@coorpacademy/components 11.32.19 → 11.32.20-alpha.31

package/es/template/my-learning/style.css

@@ -3,6 +3,7 @@
 @value tablet from breakpoints;
 @value mobile from breakpoints;
 @value white from colors;
+@value cm_grey_50 from colors;
 @value cm_grey_100 from colors;
 @value cm_grey_500 from colors;
 
@@ -10,12 +11,11 @@
   background-color: white;
   min-height: 100%;
   width: 100%;
+  font-family: "Gilroy";
+  font-style: normal;
 }
 
 .container {
-  background-color: white;
-  font-family: "Gilroy";
-  font-style: normal;
   margin-top: 48px;
   margin-bottom: 48px;
   margin-left: auto;
@@ -28,10 +28,21 @@
   max-width: calc(1080px + 32px);
 }
 
+.cardsListContainer {
+  background-color: cm_grey_50;
+  padding: 48px 0;
+}
+
+/* to ecrase wrapper's style from CardsList component */
+.cardsListContainer > :first-child {
+  padding: 0;
+}
+
 .skillFocusContainer {
   border-radius: 16px;
   border: 1px solid cm_grey_100;
   overflow: hidden;
+  margin-top: 48px;
   margin-bottom: 40px;
 }
 
@@ -272,4 +283,8 @@
   .skillFocusContent {
     flex-direction: column;
   }
+
+  .cardsListContainer {
+    padding: 24px 16px;
+  }
 }

package/lib/atom/circular-progress-bar/index.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { LearningPriorityCardPropTypes } from './types';
+declare const CircularProgressBar: {
+    ({ label, progression, size, strokeWidth, "aria-label": ariaLabel, "data-name": dataName }: LearningPriorityCardPropTypes): JSX.Element;
+    propTypes: {
+        label: import("prop-types").Requireable<string>;
+        progression: import("prop-types").Validator<number>;
+        size: import("prop-types").Requireable<number>;
+        strokeWidth: import("prop-types").Requireable<number>;
+        'aria-label': import("prop-types").Requireable<string>;
+        'data-name': import("prop-types").Requireable<string>;
+    };
+};
+export default CircularProgressBar;
+//# sourceMappingURL=index.d.ts.map

package/lib/atom/circular-progress-bar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/circular-progress-bar/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,6BAA6B,EAA+B,MAAM,SAAS,CAAC;AAmBpF,QAAA,MAAM,mBAAmB;gGAOtB,6BAA6B;;;;;;;;;CAgD/B,CAAC;AAIF,eAAe,mBAAmB,CAAC"}

package/lib/atom/circular-progress-bar/index.js

@@ -0,0 +1,101 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _isNull2 = _interopRequireDefault(require("lodash/fp/isNull"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _types = require("./types");
+
+var _style = _interopRequireDefault(require("./style.css"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 }; }
+
+const ProgressionGradient = () => /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+  id: "gradient-stroke-progression",
+  x1: "81",
+  y1: "0",
+  x2: "81",
+  y2: "162",
+  gradientUnits: "userSpaceOnUse"
+}, /*#__PURE__*/_react.default.createElement("stop", {
+  stopColor: "#35CC7F"
+}), /*#__PURE__*/_react.default.createElement("stop", {
+  offset: "1",
+  stopColor: "#55F2A7"
+})));
+
+const CircularProgressBar = ({
+  label,
+  progression,
+  size,
+  strokeWidth,
+  'aria-label': ariaLabel,
+  'data-name': dataName
+}) => {
+  const [offset, setOffset] = (0, _react.useState)(null);
+  const {
+    center,
+    radius,
+    length
+  } = (0, _react.useMemo)(() => {
+    const center_ = size / 2;
+    const radius_ = center_ - strokeWidth;
+    const length_ = Math.ceil(2 * Math.PI * radius_);
+    return {
+      center: center_,
+      radius: radius_,
+      length: length_
+    };
+  }, [size, strokeWidth]);
+  (0, _react.useEffect)(() => setOffset(Math.ceil(length * ((100 - progression) / 100))), [length, progression]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.container,
+    "aria-label": ariaLabel,
+    "data-name": dataName
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    className: _style.default.svg,
+    width: size,
+    height: size
+  }, /*#__PURE__*/_react.default.createElement(ProgressionGradient, null), /*#__PURE__*/_react.default.createElement("circle", {
+    className: _style.default.mainCircle,
+    cx: center,
+    cy: center,
+    r: radius,
+    strokeWidth: 3,
+    fill: "transparent"
+  }), /*#__PURE__*/_react.default.createElement("circle", {
+    cx: center,
+    cy: center,
+    r: radius - 10 / radius * 100,
+    fill: "#fafafa"
+  }), /*#__PURE__*/_react.default.createElement("circle", {
+    className: _style.default.progressionCircle,
+    cx: center,
+    cy: center,
+    r: radius,
+    stroke: `url(#gradient-stroke-progression)`,
+    strokeWidth: strokeWidth,
+    strokeDasharray: length,
+    strokeDashoffset: (0, _isNull2.default)(offset) ? length : offset,
+    fill: "transparent",
+    strokeLinecap: "round"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.infos
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.progression
+  }, progression, "%"), /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.label
+  }, label)));
+};
+
+CircularProgressBar.propTypes = process.env.NODE_ENV !== "production" ? _types.CircularProgressBarPropTypes : {};
+var _default = CircularProgressBar;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/lib/atom/circular-progress-bar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ProgressionGradient","CircularProgressBar","label","progression","size","strokeWidth","ariaLabel","dataName","offset","setOffset","useState","center","radius","length","useMemo","center_","radius_","length_","Math","ceil","PI","useEffect","style","container","svg","mainCircle","progressionCircle","infos","propTypes","CircularProgressBarPropTypes"],"sources":["../../../src/atom/circular-progress-bar/index.tsx"],"sourcesContent":["import React, {useMemo, useState, useEffect} from 'react';\nimport {isNull} from 'lodash/fp';\nimport {LearningPriorityCardPropTypes, CircularProgressBarPropTypes} from './types';\nimport style from './style.css';\n\nconst ProgressionGradient = () => (\n  <defs>\n    <linearGradient\n      id=\"gradient-stroke-progression\"\n      x1=\"81\"\n      y1=\"0\"\n      x2=\"81\"\n      y2=\"162\"\n      gradientUnits=\"userSpaceOnUse\"\n    >\n      <stop stopColor=\"#35CC7F\" />\n      <stop offset=\"1\" stopColor=\"#55F2A7\" />\n    </linearGradient>\n  </defs>\n);\n\nconst CircularProgressBar = ({\n  label,\n  progression,\n  size,\n  strokeWidth,\n  'aria-label': ariaLabel,\n  'data-name': dataName\n}: LearningPriorityCardPropTypes) => {\n  const [offset, setOffset] = useState<null | number>(null);\n\n  const {center, radius, length} = useMemo(() => {\n    const center_ = size / 2;\n    const radius_ = center_ - strokeWidth;\n    const length_ = Math.ceil(2 * Math.PI * radius_);\n\n    return {center: center_, radius: radius_, length: length_};\n  }, [size, strokeWidth]);\n\n  useEffect(\n    () => setOffset(Math.ceil(length * ((100 - progression) / 100))),\n    [length, progression]\n  );\n\n  return (\n    <div className={style.container} aria-label={ariaLabel} data-name={dataName}>\n      <svg className={style.svg} width={size} height={size}>\n        <ProgressionGradient />\n        <circle\n          className={style.mainCircle}\n          cx={center}\n          cy={center}\n          r={radius}\n          strokeWidth={3}\n          fill=\"transparent\"\n        />\n        <circle cx={center} cy={center} r={radius - (10 / radius) * 100} fill=\"#fafafa\" />\n        <circle\n          className={style.progressionCircle}\n          cx={center}\n          cy={center}\n          r={radius}\n          stroke={`url(#gradient-stroke-progression)`}\n          strokeWidth={strokeWidth}\n          strokeDasharray={length}\n          strokeDashoffset={isNull(offset) ? length : offset}\n          fill=\"transparent\"\n          strokeLinecap=\"round\"\n        />\n      </svg>\n      <div className={style.infos}>\n        <span className={style.progression}>{progression}%</span>\n        <span className={style.label}>{label}</span>\n      </div>\n    </div>\n  );\n};\n\nCircularProgressBar.propTypes = CircularProgressBarPropTypes;\n\nexport default CircularProgressBar;\n"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;;;;;;;AAEA,MAAMA,mBAAmB,GAAG,mBAC1B,wDACE;EACE,EAAE,EAAC,6BADL;EAEE,EAAE,EAAC,IAFL;EAGE,EAAE,EAAC,GAHL;EAIE,EAAE,EAAC,IAJL;EAKE,EAAE,EAAC,KALL;EAME,aAAa,EAAC;AANhB,gBAQE;EAAM,SAAS,EAAC;AAAhB,EARF,eASE;EAAM,MAAM,EAAC,GAAb;EAAiB,SAAS,EAAC;AAA3B,EATF,CADF,CADF;;AAgBA,MAAMC,mBAAmB,GAAG,CAAC;EAC3BC,KAD2B;EAE3BC,WAF2B;EAG3BC,IAH2B;EAI3BC,WAJ2B;EAK3B,cAAcC,SALa;EAM3B,aAAaC;AANc,CAAD,KAOS;EACnC,MAAM,CAACC,MAAD,EAASC,SAAT,IAAsB,IAAAC,eAAA,EAAwB,IAAxB,CAA5B;EAEA,MAAM;IAACC,MAAD;IAASC,MAAT;IAAiBC;EAAjB,IAA2B,IAAAC,cAAA,EAAQ,MAAM;IAC7C,MAAMC,OAAO,GAAGX,IAAI,GAAG,CAAvB;IACA,MAAMY,OAAO,GAAGD,OAAO,GAAGV,WAA1B;IACA,MAAMY,OAAO,GAAGC,IAAI,CAACC,IAAL,CAAU,IAAID,IAAI,CAACE,EAAT,GAAcJ,OAAxB,CAAhB;IAEA,OAAO;MAACL,MAAM,EAAEI,OAAT;MAAkBH,MAAM,EAAEI,OAA1B;MAAmCH,MAAM,EAAEI;IAA3C,CAAP;EACD,CANgC,EAM9B,CAACb,IAAD,EAAOC,WAAP,CAN8B,CAAjC;EAQA,IAAAgB,gBAAA,EACE,MAAMZ,SAAS,CAACS,IAAI,CAACC,IAAL,CAAUN,MAAM,IAAI,CAAC,MAAMV,WAAP,IAAsB,GAA1B,CAAhB,CAAD,CADjB,EAEE,CAACU,MAAD,EAASV,WAAT,CAFF;EAKA,oBACE;IAAK,SAAS,EAAEmB,cAAA,CAAMC,SAAtB;IAAiC,cAAYjB,SAA7C;IAAwD,aAAWC;EAAnE,gBACE;IAAK,SAAS,EAAEe,cAAA,CAAME,GAAtB;IAA2B,KAAK,EAAEpB,IAAlC;IAAwC,MAAM,EAAEA;EAAhD,gBACE,6BAAC,mBAAD,OADF,eAEE;IACE,SAAS,EAAEkB,cAAA,CAAMG,UADnB;IAEE,EAAE,EAAEd,MAFN;IAGE,EAAE,EAAEA,MAHN;IAIE,CAAC,EAAEC,MAJL;IAKE,WAAW,EAAE,CALf;IAME,IAAI,EAAC;EANP,EAFF,eAUE;IAAQ,EAAE,EAAED,MAAZ;IAAoB,EAAE,EAAEA,MAAxB;IAAgC,CAAC,EAAEC,MAAM,GAAI,KAAKA,MAAN,GAAgB,GAA5D;IAAiE,IAAI,EAAC;EAAtE,EAVF,eAWE;IACE,SAAS,EAAEU,cAAA,CAAMI,iBADnB;IAEE,EAAE,EAAEf,MAFN;IAGE,EAAE,EAAEA,MAHN;IAIE,CAAC,EAAEC,MAJL;IAKE,MAAM,EAAG,mCALX;IAME,WAAW,EAAEP,WANf;IAOE,eAAe,EAAEQ,MAPnB;IAQE,gBAAgB,EAAE,sBAAOL,MAAP,IAAiBK,MAAjB,GAA0BL,MAR9C;IASE,IAAI,EAAC,aATP;IAUE,aAAa,EAAC;EAVhB,EAXF,CADF,eAyBE;IAAK,SAAS,EAAEc,cAAA,CAAMK;EAAtB,gBACE;IAAM,SAAS,EAAEL,cAAA,CAAMnB;EAAvB,GAAqCA,WAArC,MADF,eAEE;IAAM,SAAS,EAAEmB,cAAA,CAAMpB;EAAvB,GAA+BA,KAA/B,CAFF,CAzBF,CADF;AAgCD,CAvDD;;AAyDAD,mBAAmB,CAAC2B,SAApB,2CAAgCC,mCAAhC;eAEe5B,mB"}

package/lib/atom/circular-progress-bar/style.css

@@ -0,0 +1,51 @@
+@value colors: "../../variables/colors.css";
+@value cm_grey_400 from colors;
+@value cm_grey_50 from colors;
+
+.container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.svg {
+  transform: rotate(-90deg);
+}
+
+.mainCircle {
+  stroke: cm_grey_50;
+}
+
+.progressionCircle {
+  transition: stroke-dashoffset 1.5s ease-in-out;
+}
+
+.infos {
+  font-family: Gilroy;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+}
+
+.label {
+  color: cm_grey_400;
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 12px;
+}
+
+.progression {
+  color: #2caf6c;
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 32px;
+}

package/lib/atom/circular-progress-bar/types.d.ts

@@ -0,0 +1,18 @@
+import PropTypes from 'prop-types';
+export declare type LearningPriorityCardPropTypes = {
+    label: string;
+    progression: number;
+    size: number;
+    strokeWidth: number;
+    'aria-label': string;
+    'data-name': string;
+};
+export declare const CircularProgressBarPropTypes: {
+    label: PropTypes.Requireable<string>;
+    progression: PropTypes.Validator<number>;
+    size: PropTypes.Requireable<number>;
+    strokeWidth: PropTypes.Requireable<number>;
+    'aria-label': PropTypes.Requireable<string>;
+    'data-name': PropTypes.Requireable<string>;
+};
+//# sourceMappingURL=types.d.ts.map

package/lib/atom/circular-progress-bar/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atom/circular-progress-bar/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,oBAAY,6BAA6B,GAAG;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,4BAA4B;;;;;;;CAOxC,CAAC"}

package/lib/atom/circular-progress-bar/types.js

@@ -0,0 +1,19 @@
+"use strict";
+
+exports.__esModule = true;
+exports.CircularProgressBarPropTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const CircularProgressBarPropTypes = {
+  label: _propTypes.default.string,
+  progression: _propTypes.default.number.isRequired,
+  size: _propTypes.default.number,
+  strokeWidth: _propTypes.default.number,
+  'aria-label': _propTypes.default.string,
+  'data-name': _propTypes.default.string
+};
+exports.CircularProgressBarPropTypes = CircularProgressBarPropTypes;
+//# sourceMappingURL=types.js.map

package/lib/atom/circular-progress-bar/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":["CircularProgressBarPropTypes","label","PropTypes","string","progression","number","isRequired","size","strokeWidth"],"sources":["../../../src/atom/circular-progress-bar/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\n\nexport type LearningPriorityCardPropTypes = {\n  label: string;\n  progression: number;\n  size: number;\n  strokeWidth: number;\n  'aria-label': string;\n  'data-name': string;\n};\n\nexport const CircularProgressBarPropTypes = {\n  label: PropTypes.string,\n  progression: PropTypes.number.isRequired,\n  size: PropTypes.number,\n  strokeWidth: PropTypes.number,\n  'aria-label': PropTypes.string,\n  'data-name': PropTypes.string\n};\n"],"mappings":";;;;;AAAA;;;;AAWO,MAAMA,4BAA4B,GAAG;EAC1CC,KAAK,EAAEC,kBAAA,CAAUC,MADyB;EAE1CC,WAAW,EAAEF,kBAAA,CAAUG,MAAV,CAAiBC,UAFY;EAG1CC,IAAI,EAAEL,kBAAA,CAAUG,MAH0B;EAI1CG,WAAW,EAAEN,kBAAA,CAAUG,MAJmB;EAK1C,cAAcH,kBAAA,CAAUC,MALkB;EAM1C,aAAaD,kBAAA,CAAUC;AANmB,CAArC"}

package/lib/atom/radio-with-title/index.d.ts

@@ -10,6 +10,12 @@ declare const RadioWithTitle: {
             'data-name': import("prop-types").Requireable<string>;
             titleSize: import("prop-types").Requireable<string>;
             subtitleSize: import("prop-types").Requireable<string>;
+            icon: import("prop-types").Requireable<import("prop-types").InferProps<any>>;
+            tag: import("prop-types").Requireable<import("prop-types").InferProps<{
+                label: import("prop-types").Requireable<string>;
+                type: import("prop-types").Requireable<string>;
+                size: import("prop-types").Requireable<string>;
+            }>>;
         }>>>;
         name: import("prop-types").Requireable<string>;
         checked: import("prop-types").Requireable<boolean>;

package/lib/atom/radio-with-title/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/radio-with-title/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAY,mBAAmB,EAAC,MAAM,SAAS,CAAC;AAEvD,QAAA,MAAM,cAAc;YAAW,mBAAmB;;;;;;;;;;;;;;;;CAwBjD,CAAC;AAIF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/radio-with-title/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAY,mBAAmB,EAAC,MAAM,SAAS,CAAC;AAEvD,QAAA,MAAM,cAAc;YAAW,mBAAmB;;;;;;;;;;;;;;;;;;;;;;CAwBjD,CAAC;AAIF,eAAe,cAAc,CAAC"}

package/lib/atom/radio-with-title/types.d.ts

@@ -7,6 +7,12 @@ export declare const propTypes: {
         'data-name': PropTypes.Requireable<string>;
         titleSize: PropTypes.Requireable<string>;
         subtitleSize: PropTypes.Requireable<string>;
+        icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+        tag: PropTypes.Requireable<PropTypes.InferProps<{
+            label: PropTypes.Requireable<string>;
+            type: PropTypes.Requireable<string>;
+            size: PropTypes.Requireable<string>;
+        }>>;
     }>>>;
     name: PropTypes.Requireable<string>;
     checked: PropTypes.Requireable<boolean>;

package/lib/atom/radio-with-title/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atom/radio-with-title/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAGnC,eAAO,MAAM,SAAS;;;;;;;;;;;;;;CAOrB,CAAC;AAEF,oBAAY,mBAAmB,GAAG;IAChC,KAAK,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;QACjB,IAAI,EAAE,MAAM,CAAC;QACb,WAAW,EAAE,MAAM,CAAC;QACpB,YAAY,EAAE,MAAM,CAAC;KACtB,CAAC;IACF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atom/radio-with-title/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAGnC,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;CAOrB,CAAC;AAEF,oBAAY,mBAAmB,GAAG;IAChC,KAAK,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;QACjB,IAAI,EAAE,MAAM,CAAC;QACb,WAAW,EAAE,MAAM,CAAC;QACpB,YAAY,EAAE,MAAM,CAAC;KACtB,CAAC;IACF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC"}

package/lib/atom/tag/index.d.ts

@@ -1,9 +1,14 @@
 export default Tag;
-declare function Tag(props: any): JSX.Element;
+declare function Tag({ label, type, size }: {
+    label: any;
+    type?: string | undefined;
+    size?: string | undefined;
+}): JSX.Element;
 declare namespace Tag {
     namespace propTypes {
         const label: PropTypes.Requireable<string>;
         const type: PropTypes.Requireable<string>;
+        const size: PropTypes.Requireable<string>;
     }
 }
 import PropTypes from "prop-types";

package/lib/atom/tag/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/tag/index.js"],"names":[],"mappings":";AAaA,8CAQC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/tag/index.js"],"names":[],"mappings":";AAoBA;;;;gBAIC"}

package/lib/atom/tag/index.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _style = _interopRequireDefault(require("./style.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -20,21 +22,25 @@ const TAG_STYLES = {
   warning: _style.default.warning,
   progress: _style.default.progress
 };
-
-const Tag = props => {
-  const {
-    label,
-    type = 'default'
-  } = props;
-  return /*#__PURE__*/_react.default.createElement("span", {
-    className: TAG_STYLES[type],
-    "data-name": `content-tag-${label}`
-  }, label);
+const TAG_SIZE = {
+  S: _style.default.small,
+  M: _style.default.medium,
+  L: _style.default.large
 };
 
+const Tag = ({
+  label,
+  type = 'default',
+  size = 'M'
+}) => /*#__PURE__*/_react.default.createElement("span", {
+  className: (0, _classnames.default)(TAG_STYLES[type], TAG_SIZE[size]),
+  "data-name": `content-tag-${label}`
+}, label);
+
 Tag.propTypes = process.env.NODE_ENV !== "production" ? {
   label: _propTypes.default.string,
-  type: _propTypes.default.oneOf((0, _keys2.default)(TAG_STYLES))
+  type: _propTypes.default.oneOf((0, _keys2.default)(TAG_STYLES)),
+  size: _propTypes.default.oneOf(['S', 'M', 'L'])
 } : {};
 var _default = Tag;
 exports.default = _default;

package/lib/atom/tag/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["TAG_STYLES","default","style","success","failure","warning","progress","Tag","props","label","type","propTypes","PropTypes","string","oneOf"],"sources":["../../../src/atom/tag/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {keys} from 'lodash/fp';\nimport style from './style.css';\n\nconst TAG_STYLES = {\n  default: style.default,\n  success: style.success,\n  failure: style.failure,\n  warning: style.warning,\n  progress: style.progress\n};\n\nconst Tag = props => {\n  const {label, type = 'default'} = props;\n\n  return (\n    <span className={TAG_STYLES[type]} data-name={`content-tag-${label}`}>\n      {label}\n    </span>\n  );\n};\n\nTag.propTypes = {\n  label: PropTypes.string,\n  type: PropTypes.oneOf(keys(TAG_STYLES))\n};\n\nexport default Tag;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;AAEA,MAAMA,UAAU,GAAG;EACjBC,OAAO,EAAEC,cAAA,CAAMD,OADE;EAEjBE,OAAO,EAAED,cAAA,CAAMC,OAFE;EAGjBC,OAAO,EAAEF,cAAA,CAAME,OAHE;EAIjBC,OAAO,EAAEH,cAAA,CAAMG,OAJE;EAKjBC,QAAQ,EAAEJ,cAAA,CAAMI;AALC,CAAnB;;AAQA,MAAMC,GAAG,GAAGC,KAAK,IAAI;EACnB,MAAM;IAACC,KAAD;IAAQC,IAAI,GAAG;EAAf,IAA4BF,KAAlC;EAEA,oBACE;IAAM,SAAS,EAAER,UAAU,CAACU,IAAD,CAA3B;IAAmC,aAAY,eAAcD,KAAM;EAAnE,GACGA,KADH,CADF;AAKD,CARD;;AAUAF,GAAG,CAACI,SAAJ,2CAAgB;EACdF,KAAK,EAAEG,kBAAA,CAAUC,MADH;EAEdH,IAAI,EAAEE,kBAAA,CAAUE,KAAV,CAAgB,oBAAKd,UAAL,CAAhB;AAFQ,CAAhB;eAKeO,G"}
+{"version":3,"file":"index.js","names":["TAG_STYLES","default","style","success","failure","warning","progress","TAG_SIZE","S","small","M","medium","L","large","Tag","label","type","size","classnames","propTypes","PropTypes","string","oneOf"],"sources":["../../../src/atom/tag/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {keys} from 'lodash/fp';\nimport style from './style.css';\n\nconst TAG_STYLES = {\n  default: style.default,\n  success: style.success,\n  failure: style.failure,\n  warning: style.warning,\n  progress: style.progress\n};\n\nconst TAG_SIZE = {\n  S: style.small,\n  M: style.medium,\n  L: style.large\n};\n\nconst Tag = ({label, type = 'default', size = 'M'}) => (\n  <span className={classnames(TAG_STYLES[type], TAG_SIZE[size])} data-name={`content-tag-${label}`}>\n    {label}\n  </span>\n);\n\nTag.propTypes = {\n  label: PropTypes.string,\n  type: PropTypes.oneOf(keys(TAG_STYLES)),\n  size: PropTypes.oneOf(['S', 'M', 'L'])\n};\n\nexport default Tag;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;AAEA,MAAMA,UAAU,GAAG;EACjBC,OAAO,EAAEC,cAAA,CAAMD,OADE;EAEjBE,OAAO,EAAED,cAAA,CAAMC,OAFE;EAGjBC,OAAO,EAAEF,cAAA,CAAME,OAHE;EAIjBC,OAAO,EAAEH,cAAA,CAAMG,OAJE;EAKjBC,QAAQ,EAAEJ,cAAA,CAAMI;AALC,CAAnB;AAQA,MAAMC,QAAQ,GAAG;EACfC,CAAC,EAAEN,cAAA,CAAMO,KADM;EAEfC,CAAC,EAAER,cAAA,CAAMS,MAFM;EAGfC,CAAC,EAAEV,cAAA,CAAMW;AAHM,CAAjB;;AAMA,MAAMC,GAAG,GAAG,CAAC;EAACC,KAAD;EAAQC,IAAI,GAAG,SAAf;EAA0BC,IAAI,GAAG;AAAjC,CAAD,kBACV;EAAM,SAAS,EAAE,IAAAC,mBAAA,EAAWlB,UAAU,CAACgB,IAAD,CAArB,EAA6BT,QAAQ,CAACU,IAAD,CAArC,CAAjB;EAA+D,aAAY,eAAcF,KAAM;AAA/F,GACGA,KADH,CADF;;AAMAD,GAAG,CAACK,SAAJ,2CAAgB;EACdJ,KAAK,EAAEK,kBAAA,CAAUC,MADH;EAEdL,IAAI,EAAEI,kBAAA,CAAUE,KAAV,CAAgB,oBAAKtB,UAAL,CAAhB,CAFQ;EAGdiB,IAAI,EAAEG,kBAAA,CAAUE,KAAV,CAAgB,CAAC,GAAD,EAAM,GAAN,EAAW,GAAX,CAAhB;AAHQ,CAAhB;eAMeR,G"}

package/lib/atom/tag/style.css

@@ -5,41 +5,61 @@
 @value cm_negative_100 from colors;
 @value cm_orange_700 from colors;
 @value black from colors;
+@value cm_grey_100 from colors;
+@value cm_grey_500 from colors;
 
 .tag {
   border-radius: 24px;
-  font-family: 'Gilroy';
-  font-size: 14px;
-  font-weight: bold;
+  font-family: "Gilroy";
+  font-weight: 600;
   text-align: center;
-  padding: 12px 16px;
+  line-height: normal;
+}
+
+.small {
+  composes: tag;
+  font-size: 10px;
+  padding: 2px 5px;
+}
+
+.medium {
+  composes: tag;
+  font-size: 12px;
+  padding: 4px 8px;
+}
+
+.large {
+  composes: tag;
+  font-size: 14px;
+  padding: 8px 16px;
 }
 
 .default {
-    composes: tag;
-    color: black;
+  composes: tag;
+  background-color: cm_grey_100;
+  color: cm_grey_500;
 }
 
 .progress {
-    composes: tag;
-    background-color: color(cm_yellow_200 a(15%));
-    color: cm_yellow_200;
+  composes: tag;
+  background-color: color(cm_yellow_200 a(15%));
+  color: cm_yellow_200;
 }
 
 .success {
-    composes: tag;
-    background-color: color(cm_positive_100 a(15%));
-    color: cm_positive_100;
+  composes: tag;
+  background-color: color(cm_positive_100 a(15%));
+  color: cm_positive_100;
 }
 
 .failure {
-    composes: tag;
-    background-color: color(cm_negative_100 a(15%));
-    color: cm_negative_100;
+  composes: tag;
+  background-color: color(cm_negative_100 a(15%));
+  color: cm_negative_100;
 }
 
 .warning {
-    composes: tag;
-    background-color: color(cm_orange_700 a(15%));
-    color: cm_orange_700;
-}
+  composes: tag;
+  background-color: color(cm_orange_700 a(15%));
+  color: cm_orange_700;
+}

package/lib/atom/title/index.d.ts

@@ -8,6 +8,12 @@ declare namespace Title {
         'data-name': PropTypes.Requireable<string>;
         titleSize: PropTypes.Requireable<string>;
         subtitleSize: PropTypes.Requireable<string>;
+        icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+        tag: PropTypes.Requireable<PropTypes.InferProps<{
+            label: PropTypes.Requireable<string>;
+            type: PropTypes.Requireable<string>;
+            size: PropTypes.Requireable<string>;
+        }>>;
     };
 }
 import PropTypes from "prop-types";

package/lib/atom/title/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/title/index.js"],"names":[],"mappings":";AAsCA,gDAsBC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/title/index.js"],"names":[],"mappings":";AAwCA,gDA4BC"}

package/lib/atom/title/index.js

@@ -7,10 +7,16 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _icon = _interopRequireDefault(require("../icon"));
+
+var _tag = _interopRequireDefault(require("../tag"));
+
 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 getTitleStyle = (type, size) => {
   switch (type) {
     case 'page':
@@ -61,17 +67,23 @@ const Title = props => {
     type,
     'data-name': dataName,
     titleSize = 'standard',
-    subtitleSize = 'standard'
+    subtitleSize = 'standard',
+    icon,
+    tag
   } = props;
   const titleStyle = getTitleStyle(type, titleSize);
   const subtitleStyle = getSubtitleStyle(type, subtitleSize);
   const subtitleSection = subtitle ? /*#__PURE__*/_react.default.createElement("div", {
     className: subtitleStyle
   }, subtitle) : null;
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.container
+  }, icon ? /*#__PURE__*/_react.default.createElement(_icon.default, _extends({}, icon, {
+    className: _style.default.icon
+  })) : null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     className: titleStyle,
     "data-name": dataName
-  }, title), subtitleSection);
+  }, title, tag ? /*#__PURE__*/_react.default.createElement(_tag.default, tag) : null), subtitleSection));
 };
 
 Title.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -80,7 +92,9 @@ Title.propTypes = process.env.NODE_ENV !== "production" ? {
   type: _propTypes.default.oneOf(['page', 'form-group']),
   'data-name': _propTypes.default.string,
   titleSize: _propTypes.default.oneOf(['standard', 'medium', 'small']),
-  subtitleSize: _propTypes.default.oneOf(['standard', 'small', 'small-without-margin', 'extra-small'])
+  subtitleSize: _propTypes.default.oneOf(['standard', 'small', 'small-without-margin', 'extra-small']),
+  icon: _propTypes.default.shape(_icon.default.propTypes),
+  tag: _propTypes.default.shape(_tag.default.propTypes)
 } : {};
 var _default = Title;
 exports.default = _default;

package/lib/atom/title/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["getTitleStyle","type","size","style","titlePage","titleFormGroup","mediumTitleFormGroup","smallTitleFormGroup","getSubtitleStyle","subtitlePage","subtitleFormGroup","smallSubtitleFormGroup","smallSubtitleFormGroupWithoutMargin","extraSmallSubtitleFormGroup","Title","props","title","subtitle","dataName","titleSize","subtitleSize","titleStyle","subtitleStyle","subtitleSection","propTypes","PropTypes","string","oneOf"],"sources":["../../../src/atom/title/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport style from './style.css';\n\nconst getTitleStyle = (type, size) => {\n  switch (type) {\n    case 'page':\n      return style.titlePage;\n    case 'form-group':\n      switch (size) {\n        case 'standard':\n          return style.titleFormGroup;\n        case 'medium':\n          return style.mediumTitleFormGroup;\n        case 'small':\n          return style.smallTitleFormGroup;\n      }\n  }\n};\n\nconst getSubtitleStyle = (type, size) => {\n  switch (type) {\n    case 'page':\n      return style.subtitlePage;\n    case 'form-group':\n      switch (size) {\n        case 'standard':\n          return style.subtitleFormGroup;\n        case 'small':\n          return style.smallSubtitleFormGroup;\n        case 'small-without-margin':\n          return style.smallSubtitleFormGroupWithoutMargin;\n        case 'extra-small':\n          return style.extraSmallSubtitleFormGroup;\n      }\n  }\n};\n\nconst Title = props => {\n  const {\n    title,\n    subtitle,\n    type,\n    'data-name': dataName,\n    titleSize = 'standard',\n    subtitleSize = 'standard'\n  } = props;\n  const titleStyle = getTitleStyle(type, titleSize);\n  const subtitleStyle = getSubtitleStyle(type, subtitleSize);\n\n  const subtitleSection = subtitle ? <div className={subtitleStyle}>{subtitle}</div> : null;\n\n  return (\n    <div>\n      <div className={titleStyle} data-name={dataName}>\n        {title}\n      </div>\n      {subtitleSection}\n    </div>\n  );\n};\n\nTitle.propTypes = {\n  title: PropTypes.string,\n  subtitle: PropTypes.string,\n  type: PropTypes.oneOf(['page', 'form-group']),\n  'data-name': PropTypes.string,\n  titleSize: PropTypes.oneOf(['standard', 'medium', 'small']),\n  subtitleSize: PropTypes.oneOf(['standard', 'small', 'small-without-margin', 'extra-small'])\n};\nexport default Title;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;;;AAEA,MAAMA,aAAa,GAAG,CAACC,IAAD,EAAOC,IAAP,KAAgB;EACpC,QAAQD,IAAR;IACE,KAAK,MAAL;MACE,OAAOE,cAAA,CAAMC,SAAb;;IACF,KAAK,YAAL;MACE,QAAQF,IAAR;QACE,KAAK,UAAL;UACE,OAAOC,cAAA,CAAME,cAAb;;QACF,KAAK,QAAL;UACE,OAAOF,cAAA,CAAMG,oBAAb;;QACF,KAAK,OAAL;UACE,OAAOH,cAAA,CAAMI,mBAAb;MANJ;;EAJJ;AAaD,CAdD;;AAgBA,MAAMC,gBAAgB,GAAG,CAACP,IAAD,EAAOC,IAAP,KAAgB;EACvC,QAAQD,IAAR;IACE,KAAK,MAAL;MACE,OAAOE,cAAA,CAAMM,YAAb;;IACF,KAAK,YAAL;MACE,QAAQP,IAAR;QACE,KAAK,UAAL;UACE,OAAOC,cAAA,CAAMO,iBAAb;;QACF,KAAK,OAAL;UACE,OAAOP,cAAA,CAAMQ,sBAAb;;QACF,KAAK,sBAAL;UACE,OAAOR,cAAA,CAAMS,mCAAb;;QACF,KAAK,aAAL;UACE,OAAOT,cAAA,CAAMU,2BAAb;MARJ;;EAJJ;AAeD,CAhBD;;AAkBA,MAAMC,KAAK,GAAGC,KAAK,IAAI;EACrB,MAAM;IACJC,KADI;IAEJC,QAFI;IAGJhB,IAHI;IAIJ,aAAaiB,QAJT;IAKJC,SAAS,GAAG,UALR;IAMJC,YAAY,GAAG;EANX,IAOFL,KAPJ;EAQA,MAAMM,UAAU,GAAGrB,aAAa,CAACC,IAAD,EAAOkB,SAAP,CAAhC;EACA,MAAMG,aAAa,GAAGd,gBAAgB,CAACP,IAAD,EAAOmB,YAAP,CAAtC;EAEA,MAAMG,eAAe,GAAGN,QAAQ,gBAAG;IAAK,SAAS,EAAEK;EAAhB,GAAgCL,QAAhC,CAAH,GAAqD,IAArF;EAEA,oBACE,uDACE;IAAK,SAAS,EAAEI,UAAhB;IAA4B,aAAWH;EAAvC,GACGF,KADH,CADF,EAIGO,eAJH,CADF;AAQD,CAtBD;;AAwBAT,KAAK,CAACU,SAAN,2CAAkB;EAChBR,KAAK,EAAES,kBAAA,CAAUC,MADD;EAEhBT,QAAQ,EAAEQ,kBAAA,CAAUC,MAFJ;EAGhBzB,IAAI,EAAEwB,kBAAA,CAAUE,KAAV,CAAgB,CAAC,MAAD,EAAS,YAAT,CAAhB,CAHU;EAIhB,aAAaF,kBAAA,CAAUC,MAJP;EAKhBP,SAAS,EAAEM,kBAAA,CAAUE,KAAV,CAAgB,CAAC,UAAD,EAAa,QAAb,EAAuB,OAAvB,CAAhB,CALK;EAMhBP,YAAY,EAAEK,kBAAA,CAAUE,KAAV,CAAgB,CAAC,UAAD,EAAa,OAAb,EAAsB,sBAAtB,EAA8C,aAA9C,CAAhB;AANE,CAAlB;eAQeb,K"}
+{"version":3,"file":"index.js","names":["getTitleStyle","type","size","style","titlePage","titleFormGroup","mediumTitleFormGroup","smallTitleFormGroup","getSubtitleStyle","subtitlePage","subtitleFormGroup","smallSubtitleFormGroup","smallSubtitleFormGroupWithoutMargin","extraSmallSubtitleFormGroup","Title","props","title","subtitle","dataName","titleSize","subtitleSize","icon","tag","titleStyle","subtitleStyle","subtitleSection","container","propTypes","PropTypes","string","oneOf","shape","Icon","Tag"],"sources":["../../../src/atom/title/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from '../icon';\nimport Tag from '../tag';\nimport style from './style.css';\n\nconst getTitleStyle = (type, size) => {\n  switch (type) {\n    case 'page':\n      return style.titlePage;\n    case 'form-group':\n      switch (size) {\n        case 'standard':\n          return style.titleFormGroup;\n        case 'medium':\n          return style.mediumTitleFormGroup;\n        case 'small':\n          return style.smallTitleFormGroup;\n      }\n  }\n};\n\nconst getSubtitleStyle = (type, size) => {\n  switch (type) {\n    case 'page':\n      return style.subtitlePage;\n    case 'form-group':\n      switch (size) {\n        case 'standard':\n          return style.subtitleFormGroup;\n        case 'small':\n          return style.smallSubtitleFormGroup;\n        case 'small-without-margin':\n          return style.smallSubtitleFormGroupWithoutMargin;\n        case 'extra-small':\n          return style.extraSmallSubtitleFormGroup;\n      }\n  }\n};\n\nconst Title = props => {\n  const {\n    title,\n    subtitle,\n    type,\n    'data-name': dataName,\n    titleSize = 'standard',\n    subtitleSize = 'standard',\n    icon,\n    tag\n  } = props;\n  const titleStyle = getTitleStyle(type, titleSize);\n  const subtitleStyle = getSubtitleStyle(type, subtitleSize);\n\n  const subtitleSection = subtitle ? <div className={subtitleStyle}>{subtitle}</div> : null;\n\n  return (\n    <div className={style.container}>\n      {icon ? <Icon {...icon} className={style.icon} /> : null}\n      <div>\n        <div className={titleStyle} data-name={dataName}>\n          {title}\n          {tag ? <Tag {...tag} /> : null}\n        </div>\n        {subtitleSection}\n      </div>\n    </div>\n  );\n};\n\nTitle.propTypes = {\n  title: PropTypes.string,\n  subtitle: PropTypes.string,\n  type: PropTypes.oneOf(['page', 'form-group']),\n  'data-name': PropTypes.string,\n  titleSize: PropTypes.oneOf(['standard', 'medium', 'small']),\n  subtitleSize: PropTypes.oneOf(['standard', 'small', 'small-without-margin', 'extra-small']),\n  icon: PropTypes.shape(Icon.propTypes),\n  tag: PropTypes.shape(Tag.propTypes)\n};\nexport default Title;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,aAAa,GAAG,CAACC,IAAD,EAAOC,IAAP,KAAgB;EACpC,QAAQD,IAAR;IACE,KAAK,MAAL;MACE,OAAOE,cAAA,CAAMC,SAAb;;IACF,KAAK,YAAL;MACE,QAAQF,IAAR;QACE,KAAK,UAAL;UACE,OAAOC,cAAA,CAAME,cAAb;;QACF,KAAK,QAAL;UACE,OAAOF,cAAA,CAAMG,oBAAb;;QACF,KAAK,OAAL;UACE,OAAOH,cAAA,CAAMI,mBAAb;MANJ;;EAJJ;AAaD,CAdD;;AAgBA,MAAMC,gBAAgB,GAAG,CAACP,IAAD,EAAOC,IAAP,KAAgB;EACvC,QAAQD,IAAR;IACE,KAAK,MAAL;MACE,OAAOE,cAAA,CAAMM,YAAb;;IACF,KAAK,YAAL;MACE,QAAQP,IAAR;QACE,KAAK,UAAL;UACE,OAAOC,cAAA,CAAMO,iBAAb;;QACF,KAAK,OAAL;UACE,OAAOP,cAAA,CAAMQ,sBAAb;;QACF,KAAK,sBAAL;UACE,OAAOR,cAAA,CAAMS,mCAAb;;QACF,KAAK,aAAL;UACE,OAAOT,cAAA,CAAMU,2BAAb;MARJ;;EAJJ;AAeD,CAhBD;;AAkBA,MAAMC,KAAK,GAAGC,KAAK,IAAI;EACrB,MAAM;IACJC,KADI;IAEJC,QAFI;IAGJhB,IAHI;IAIJ,aAAaiB,QAJT;IAKJC,SAAS,GAAG,UALR;IAMJC,YAAY,GAAG,UANX;IAOJC,IAPI;IAQJC;EARI,IASFP,KATJ;EAUA,MAAMQ,UAAU,GAAGvB,aAAa,CAACC,IAAD,EAAOkB,SAAP,CAAhC;EACA,MAAMK,aAAa,GAAGhB,gBAAgB,CAACP,IAAD,EAAOmB,YAAP,CAAtC;EAEA,MAAMK,eAAe,GAAGR,QAAQ,gBAAG;IAAK,SAAS,EAAEO;EAAhB,GAAgCP,QAAhC,CAAH,GAAqD,IAArF;EAEA,oBACE;IAAK,SAAS,EAAEd,cAAA,CAAMuB;EAAtB,GACGL,IAAI,gBAAG,6BAAC,aAAD,eAAUA,IAAV;IAAgB,SAAS,EAAElB,cAAA,CAAMkB;EAAjC,GAAH,GAA+C,IADtD,eAEE,uDACE;IAAK,SAAS,EAAEE,UAAhB;IAA4B,aAAWL;EAAvC,GACGF,KADH,EAEGM,GAAG,gBAAG,6BAAC,YAAD,EAASA,GAAT,CAAH,GAAsB,IAF5B,CADF,EAKGG,eALH,CAFF,CADF;AAYD,CA5BD;;AA8BAX,KAAK,CAACa,SAAN,2CAAkB;EAChBX,KAAK,EAAEY,kBAAA,CAAUC,MADD;EAEhBZ,QAAQ,EAAEW,kBAAA,CAAUC,MAFJ;EAGhB5B,IAAI,EAAE2B,kBAAA,CAAUE,KAAV,CAAgB,CAAC,MAAD,EAAS,YAAT,CAAhB,CAHU;EAIhB,aAAaF,kBAAA,CAAUC,MAJP;EAKhBV,SAAS,EAAES,kBAAA,CAAUE,KAAV,CAAgB,CAAC,UAAD,EAAa,QAAb,EAAuB,OAAvB,CAAhB,CALK;EAMhBV,YAAY,EAAEQ,kBAAA,CAAUE,KAAV,CAAgB,CAAC,UAAD,EAAa,OAAb,EAAsB,sBAAtB,EAA8C,aAA9C,CAAhB,CANE;EAOhBT,IAAI,EAAEO,kBAAA,CAAUG,KAAV,CAAgBC,aAAA,CAAKL,SAArB,CAPU;EAQhBL,GAAG,EAAEM,kBAAA,CAAUG,KAAV,CAAgBE,YAAA,CAAIN,SAApB;AARW,CAAlB;eAUeb,K"}

package/lib/atom/title/style.css

@@ -2,6 +2,11 @@
 @value cm_grey_700 from colors;
 @value cm_grey_400 from colors;
 
+.container {
+    display: flex;
+    gap: 12px;
+}
+
 .title {
     font-family: Gilroy;
     font-style: normal;
@@ -18,6 +23,9 @@
 .titleFormGroup {
     composes: title;
     font-size: 18px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
 }
 
 .mediumTitleFormGroup {
@@ -74,3 +82,8 @@
     font-weight: normal;
 }
 
+.icon {
+    height: 24px;
+    width: 24px;
+}
+

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

@@ -14,6 +14,12 @@ declare const propTypes: {
             'data-name': PropTypes.Requireable<string>;
             titleSize: PropTypes.Requireable<string>;
             subtitleSize: PropTypes.Requireable<string>;
+            icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+            tag: PropTypes.Requireable<PropTypes.InferProps<{
+                label: PropTypes.Requireable<string>;
+                type: PropTypes.Requireable<string>;
+                size: PropTypes.Requireable<string>;
+            }>>;
         }>>;
         headerIcon: PropTypes.Requireable<string>;
         backgroundImage: 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"}