@coorpacademy/components 11.27.0 → 11.29.0

package/es/atom/icon/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/icon/index.js"],"names":[],"mappings":"AAgBA,mDAAoD;AAiB7C,iEACoE;;AAE3E,uDA6BG"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/icon/index.js"],"names":[],"mappings":"AAiBA,mDAAoD;AAiB7C,iEACoE;;AAE3E,uDAgCG"}

package/es/atom/icon/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import PropTypes, { number } from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { fas } from '@fortawesome/pro-solid-svg-icons';
 import { library } from '@fortawesome/fontawesome-svg-core';
@@ -12,18 +12,19 @@ library.add(fas);
 const DEFAULT_PRESET = 'm';
 const ICON_LUMINOSITY = 32;
 const DEFAULT_WRAPPER_SIZE = 40;
+const ICON_PADDING = 8;
 export const DEFAULT_ICON_COLOR = 'hsl(0, 0%, 32%)';
 const SIZE_CONFIGS = {
   s: {
-    faSize: 'sm',
+    faSize: 12,
     wrapperSize: 32
   },
   m: {
-    faSize: 'lg',
+    faSize: 16,
     wrapperSize: DEFAULT_WRAPPER_SIZE
   },
   xl: {
-    faSize: 'xl',
+    faSize: 20,
     wrapperSize: 48
   }
 };
@@ -39,10 +40,12 @@ const Icon = /*#__PURE__*/React.memo(function Icon({
 }) {
   const effectiveIconColor = iconColor || backgroundColor ? getForegroundColor(backgroundColor) : DEFAULT_ICON_COLOR;
   const effectiveSize = size ? merge(SIZE_CONFIGS[DEFAULT_PRESET], size) : getOr(SIZE_CONFIGS[DEFAULT_PRESET], toLower(preset), SIZE_CONFIGS);
+  const wrapperSize = effectiveSize.wrapperSize - ICON_PADDING * 2;
   const iconWrapperStyle = {
     backgroundColor,
-    width: effectiveSize.wrapperSize,
-    height: effectiveSize.wrapperSize
+    width: wrapperSize,
+    height: wrapperSize,
+    padding: ICON_PADDING
   };
   return /*#__PURE__*/React.createElement("div", {
     className: style.iconWrapper,
@@ -50,7 +53,7 @@ const Icon = /*#__PURE__*/React.memo(function Icon({
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: `fa-${iconName}`,
     color: effectiveIconColor,
-    size: effectiveSize.faSize
+    "font-size": effectiveSize.faSize
   }));
 });
 Icon.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -59,7 +62,7 @@ Icon.propTypes = process.env.NODE_ENV !== "production" ? {
   backgroundColor: PropTypes.string,
   preset: PropTypes.oneOf(['s', 'm', 'xl']),
   size: PropTypes.shape({
-    faSize: PropTypes.oneOf(['2xs', 'xs', 'sm', 'lg', 'xl', '2xl', '1x', '2x', '3x', '4x', '5x', '6x', '7x', '8x', '9x', '10x']),
+    faSize: number,
     wrapperSize: PropTypes.number
   })
 } : {};

package/es/atom/icon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","FontAwesomeIcon","fas","library","toLower","merge","getOr","Color","style","add","DEFAULT_PRESET","ICON_LUMINOSITY","DEFAULT_WRAPPER_SIZE","DEFAULT_ICON_COLOR","SIZE_CONFIGS","s","faSize","wrapperSize","m","xl","getForegroundColor","backgroundColor","to","set","l","toString","Icon","memo","iconName","iconColor","preset","size","effectiveIconColor","effectiveSize","iconWrapperStyle","width","height","iconWrapper","propTypes","string","isRequired","oneOf","shape","number"],"sources":["../../../src/atom/icon/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {fas} from '@fortawesome/pro-solid-svg-icons';\nimport {library} from '@fortawesome/fontawesome-svg-core';\nimport toLower from 'lodash/fp/toLower';\nimport merge from 'lodash/fp/merge';\nimport getOr from 'lodash/fp/getOr';\nimport Color from 'colorjs.io';\nimport style from './style.css';\n\nlibrary.add(fas);\n\nconst DEFAULT_PRESET = 'm';\nconst ICON_LUMINOSITY = 32;\nconst DEFAULT_WRAPPER_SIZE = 40;\nexport const DEFAULT_ICON_COLOR = 'hsl(0, 0%, 32%)';\n\nconst SIZE_CONFIGS = {\n  s: {\n    faSize: 'sm',\n    wrapperSize: 32\n  },\n  m: {\n    faSize: 'lg',\n    wrapperSize: DEFAULT_WRAPPER_SIZE\n  },\n  xl: {\n    faSize: 'xl',\n    wrapperSize: 48\n  }\n};\n\nexport const getForegroundColor = backgroundColor =>\n  new Color(backgroundColor).to('hsl').set({l: ICON_LUMINOSITY}).toString();\n\nconst Icon = React.memo(function Icon({\n  iconName,\n  iconColor,\n  backgroundColor,\n  preset = DEFAULT_PRESET,\n  size\n}) {\n  const effectiveIconColor =\n    iconColor || backgroundColor ? getForegroundColor(backgroundColor) : DEFAULT_ICON_COLOR;\n\n  const effectiveSize = size\n    ? merge(SIZE_CONFIGS[DEFAULT_PRESET], size)\n    : getOr(SIZE_CONFIGS[DEFAULT_PRESET], toLower(preset), SIZE_CONFIGS);\n\n  const iconWrapperStyle = {\n    backgroundColor,\n    width: effectiveSize.wrapperSize,\n    height: effectiveSize.wrapperSize\n  };\n\n  return (\n    <div className={style.iconWrapper} style={iconWrapperStyle}>\n      <FontAwesomeIcon\n        icon={`fa-${iconName}`}\n        color={effectiveIconColor}\n        size={effectiveSize.faSize}\n      />\n    </div>\n  );\n});\n\nIcon.propTypes = {\n  iconName: PropTypes.string.isRequired,\n  iconColor: PropTypes.string,\n  backgroundColor: PropTypes.string,\n  preset: PropTypes.oneOf(['s', 'm', 'xl']),\n  size: PropTypes.shape({\n    faSize: PropTypes.oneOf([\n      '2xs',\n      'xs',\n      'sm',\n      'lg',\n      'xl',\n      '2xl',\n      '1x',\n      '2x',\n      '3x',\n      '4x',\n      '5x',\n      '6x',\n      '7x',\n      '8x',\n      '9x',\n      '10x'\n    ]),\n    wrapperSize: PropTypes.number\n  })\n};\n\nexport default Icon;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","PropTypes","number","FontAwesomeIcon","fas","library","toLower","merge","getOr","Color","style","add","DEFAULT_PRESET","ICON_LUMINOSITY","DEFAULT_WRAPPER_SIZE","ICON_PADDING","DEFAULT_ICON_COLOR","SIZE_CONFIGS","s","faSize","wrapperSize","m","xl","getForegroundColor","backgroundColor","to","set","l","toString","Icon","memo","iconName","iconColor","preset","size","effectiveIconColor","effectiveSize","iconWrapperStyle","width","height","padding","iconWrapper","propTypes","string","isRequired","oneOf","shape"],"sources":["../../../src/atom/icon/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes, {number} from 'prop-types';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {fas} from '@fortawesome/pro-solid-svg-icons';\nimport {library} from '@fortawesome/fontawesome-svg-core';\nimport toLower from 'lodash/fp/toLower';\nimport merge from 'lodash/fp/merge';\nimport getOr from 'lodash/fp/getOr';\nimport Color from 'colorjs.io';\nimport style from './style.css';\n\nlibrary.add(fas);\n\nconst DEFAULT_PRESET = 'm';\nconst ICON_LUMINOSITY = 32;\nconst DEFAULT_WRAPPER_SIZE = 40;\nconst ICON_PADDING = 8;\nexport const DEFAULT_ICON_COLOR = 'hsl(0, 0%, 32%)';\n\nconst SIZE_CONFIGS = {\n  s: {\n    faSize: 12,\n    wrapperSize: 32\n  },\n  m: {\n    faSize: 16,\n    wrapperSize: DEFAULT_WRAPPER_SIZE\n  },\n  xl: {\n    faSize: 20,\n    wrapperSize: 48\n  }\n};\n\nexport const getForegroundColor = backgroundColor =>\n  new Color(backgroundColor).to('hsl').set({l: ICON_LUMINOSITY}).toString();\n\nconst Icon = React.memo(function Icon({\n  iconName,\n  iconColor,\n  backgroundColor,\n  preset = DEFAULT_PRESET,\n  size\n}) {\n  const effectiveIconColor =\n    iconColor || backgroundColor ? getForegroundColor(backgroundColor) : DEFAULT_ICON_COLOR;\n\n  const effectiveSize = size\n    ? merge(SIZE_CONFIGS[DEFAULT_PRESET], size)\n    : getOr(SIZE_CONFIGS[DEFAULT_PRESET], toLower(preset), SIZE_CONFIGS);\n\n  const wrapperSize = effectiveSize.wrapperSize - ICON_PADDING * 2;\n\n  const iconWrapperStyle = {\n    backgroundColor,\n    width: wrapperSize,\n    height: wrapperSize,\n    padding: ICON_PADDING\n  };\n\n  return (\n    <div className={style.iconWrapper} style={iconWrapperStyle}>\n      <FontAwesomeIcon\n        icon={`fa-${iconName}`}\n        color={effectiveIconColor}\n        font-size={effectiveSize.faSize}\n      />\n    </div>\n  );\n});\n\nIcon.propTypes = {\n  iconName: PropTypes.string.isRequired,\n  iconColor: PropTypes.string,\n  backgroundColor: PropTypes.string,\n  preset: PropTypes.oneOf(['s', 'm', 'xl']),\n  size: PropTypes.shape({\n    faSize: number,\n    wrapperSize: PropTypes.number\n  })\n};\n\nexport default Icon;\n"],"mappings":"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"}

package/es/atom/icon/style.css

@@ -1,5 +1,4 @@
 .iconWrapper {
-  padding: 8px;
   border-radius: 8px;
   display: flex;
   align-items: center;

package/es/molecule/learning-profile-radar-chart/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learning-profile-radar-chart/index.tsx"],"names":[],"mappings":";AA6BA,OAAO,EAGL,gBAAgB,EAChB,kCAAkC,EAGnC,MAAM,SAAS,CAAC;AA+OjB,eAAO,MAAM,UAAU,EAAE,CACvB,MAAM,EAAE;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAC,EAC/B,KAAK,EAAE,kCAAkC,CAAC,MAAM,CAAC,KAC9C,gBAAgB,EAOX,CAAC;AAEX,eAAO,MAAM,yBAAyB;kFAQnC,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;CA8GpC,CAAC;AAEF,QAAA,MAAM,mCAAmC;YAAW,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;CAIrF,CAAC;AAKF,eAAe,mCAAmC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learning-profile-radar-chart/index.tsx"],"names":[],"mappings":";AA6BA,OAAO,EAGL,gBAAgB,EAChB,kCAAkC,EAGnC,MAAM,SAAS,CAAC;AAwPjB,eAAO,MAAM,UAAU,EAAE,CACvB,MAAM,EAAE;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAC,EAC/B,KAAK,EAAE,kCAAkC,CAAC,MAAM,CAAC,KAC9C,gBAAgB,EAOX,CAAC;AAEX,eAAO,MAAM,yBAAyB;kFAQnC,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;CAiHpC,CAAC;AAEF,QAAA,MAAM,mCAAmC;YAAW,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;CAIrF,CAAC;AAKF,eAAe,mCAAmC,CAAC"}

package/es/molecule/learning-profile-radar-chart/index.js

@@ -182,11 +182,11 @@ const buildRadars = (totalDataset, handleOnDotClick, activeDot) => _times(index
     // use with the tooltip component
     ,
     dot: /*#__PURE__*/React.createElement(CustomDot, {
-      onDotClick: handleOnDotClick(datakey),
+      onDotClick: handleOnDotClick,
       activeDot: activeDot,
       dataKey: datakey,
       stroke: `url(#gradient-stroke-${index})`,
-      dataName: dataset
+      dataName: `dot-${dataset}`
     })
   }));
 }, totalDataset);
@@ -199,7 +199,8 @@ const buildCustomLabel = ({
   label,
   activeDot,
   chartType,
-  formatedColors
+  formatedColors,
+  onClick
 }) => {
   const isCurrentDotActive = activeDot?.label === label;
 
@@ -213,12 +214,19 @@ const buildCustomLabel = ({
   } = _CHART_CONFIGS$chartT,
         rest = _objectWithoutPropertiesLoose(_CHART_CONFIGS$chartT, _excluded);
 
+  function onLabelClick(e) {
+    e.stopPropagation();
+    onClick(label);
+  }
+
   return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("foreignObject", {
     x: x + offsetX,
     y: y + offsetY,
     width: "200",
     height: "65"
   }, /*#__PURE__*/React.createElement("div", {
+    "data-name": label,
+    onClick: onLabelClick,
     className: classnames(style.tickWrapper, isCurrentDotActive && style.tickWrapperFocus),
     style: _extends({}, rest, {
       alignItems: alignment,
@@ -308,21 +316,24 @@ export const LearningProfileRadarChart = ({
     };
   }, [activeDot]);
 
-  function handleOnDotClick(datakey) {
-    return label => {
-      const payload = formatedData.find(data_ => data_.subject === label);
+  function handleOnDotClick(label) {
+    const payload = formatedData.find(({
+      subject
+    }) => subject === label);
+    if (!payload) return;
+    const index = formatedData.indexOf(payload);
+    const datakey = `value${index + 1}`;
 
-      const skillRef = _findKey(val => val === payload?.subject, legend);
+    const skillRef = _findKey(val => val === payload?.subject, legend);
 
-      if (payload && skillRef) {
-        setActiveDot({
-          key: datakey,
-          value: payload[datakey],
-          label: payload.subject
-        });
-        onClick(skillRef);
-      }
-    };
+    if (skillRef) {
+      setActiveDot({
+        key: datakey,
+        value: payload[datakey],
+        label: payload.subject
+      });
+      onClick(skillRef);
+    }
   }
 
   function renderCustomLabel({
@@ -347,7 +358,8 @@ export const LearningProfileRadarChart = ({
       label,
       activeDot,
       chartType,
-      formatedColors
+      formatedColors,
+      onClick: handleOnDotClick
     });
   }
 

package/es/molecule/learning-profile-radar-chart/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","Fragment","useCallback","useEffect","useMemo","useState","Radar","RadarChart","PolarGrid","PolarAngleAxis","ResponsiveContainer","Tooltip","PolarRadiusAxis","classnames","isMobile","getIsMobile","style","learningProfileRadarChartPropTypes","top","offset","x","y","alignment","margin","bottom","right","marginRight","left","marginLeft","BLACK","WHITE","DEFAULT_MAIN_COLOR","DEFAULT_COLORS","gradient","fill","stroke","percentage","color","background","label","CHART_CONFIGS","triangle","name","ticks","sideCount","quadrilateral","pentagon","hexagon","DOT_DEFAULT_PROPS","strokeWidth","strokeOpacity","r","pointerEvents","cursor","DOT_ACTIVE_PROPS","RADAR_DEFAULT_PROPS","fillOpacity","Gradient","type","colors","firstColor","secondColor","CustomTooltip","active","payload","length","tooltip","value","CustomDot","cx","cy","onDotClick","activeDot","dataName","subject","onClick","e","stopPropagation","buildRadars","totalDataset","handleOnDotClick","index","datakey","dataset","buildCustomLabel","percentagesValues","chartType","formatedColors","isCurrentDotActive","offsetX","offsetY","rest","tickWrapper","tickWrapperFocus","alignItems","textAlign","opacity","map","colorLabel","i","tickValue","tickLabel","CHART_CONFIGS_BY_SIDE_COUNT","formatValues","values_","val","formatData","legend","data_","ref","LearningProfileRadarChart","data","colorsProps","width","height","setIsMobile","setActiveDot","Object","assign","gradients","userAgent","navigator","isMobile_","setIsMobile_","handleClick","undefined","window","addEventListener","removeEventListener","formatedData","find","skillRef","key","renderCustomLabel","currentData","ResponsiveLearningProfileRadarChart","props","propTypes"],"sources":["../../../src/molecule/learning-profile-radar-chart/index.tsx"],"sourcesContent":["import React, {Fragment, useCallback, useEffect, useMemo, useState} from 'react';\nimport {\n  Radar,\n  RadarChart,\n  PolarGrid,\n  PolarAngleAxis,\n  ResponsiveContainer,\n  Tooltip,\n  PolarRadiusAxis\n} from 'recharts';\nimport {\n  pipe,\n  keyBy,\n  mapValues,\n  size,\n  getOr,\n  map,\n  toPairs,\n  values,\n  isEmpty,\n  omit,\n  fromPairs,\n  times,\n  flatten,\n  findKey\n} from 'lodash/fp';\nimport classnames from 'classnames';\nimport {isMobile as getIsMobile} from '../../util/check-is-mobile';\nimport style from './style.css';\nimport {\n  ActiveDotType,\n  FormatedColorsType,\n  FormatedDataType,\n  LearningProfileRadarChartPropTypes,\n  TickType,\n  learningProfileRadarChartPropTypes\n} from './types';\n\ntype CHART_TYPE_TYPE = keyof typeof CHART_CONFIGS;\n\n/* TICK_POSITIONS */\nconst top: TickType = {offset: {x: -100, y: -65}, alignment: 'center', margin: 'auto'};\nconst bottom: TickType = {offset: {x: -100, y: 10}, alignment: 'center', margin: 'auto'};\nconst right: TickType = {offset: {x: 30, y: -10}, alignment: 'start', marginRight: 'auto'};\nconst left: TickType = {offset: {x: -230, y: -10}, alignment: 'end', marginLeft: 'auto'};\n\n/* CONSTANTS */\nconst BLACK = '#000000ff';\nconst WHITE = '#ffffffff';\nconst DEFAULT_MAIN_COLOR = '#0062ffff';\n\nconst DEFAULT_COLORS: FormatedColorsType = {\n  gradient: {\n    fill: [DEFAULT_MAIN_COLOR, DEFAULT_MAIN_COLOR],\n    stroke: [DEFAULT_MAIN_COLOR, DEFAULT_MAIN_COLOR]\n  },\n  percentage: {\n    color: BLACK,\n    background: WHITE\n  },\n  label: {\n    color: BLACK\n  }\n};\n\nconst CHART_CONFIGS = {\n  triangle: {\n    name: 'triangle',\n    ticks: [top, right, left],\n    sideCount: 3\n  },\n  quadrilateral: {\n    name: 'quadrilateral',\n    ticks: [top, right, bottom, left],\n    sideCount: 4\n  },\n  pentagon: {\n    name: 'pentagon',\n    ticks: [top, right, right, left, left],\n    sideCount: 5\n  },\n  hexagon: {\n    name: 'hexagon',\n    ticks: [top, right, right, bottom, left, left],\n    sideCount: 6\n  }\n} as const;\n\nconst DOT_DEFAULT_PROPS = {\n  strokeWidth: 4,\n  strokeOpacity: 0.2,\n  fill: '#fff',\n  r: 8,\n  pointerEvents: 'all',\n  style: {cursor: 'pointer'}\n} as const;\n\nconst DOT_ACTIVE_PROPS = {\n  fill: '#fff',\n  r: 8,\n  strokeWidth: 6,\n  strokeOpacity: 0.5\n} as const;\n\nconst RADAR_DEFAULT_PROPS = {\n  strokeWidth: 6,\n  strokeOpacity: 0.2,\n  fillOpacity: 0.2\n} as const;\n\n/* COMPONENTS */\nconst Gradient = ({type, colors: [firstColor, secondColor]}: {type: string; colors: string[]}) => (\n  <defs>\n    <linearGradient id={`gradient-${type}`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n      <stop offset=\"0%\" stopColor={firstColor} />\n      <stop offset=\"100%\" stopColor={secondColor} />\n    </linearGradient>\n  </defs>\n);\n\nconst CustomTooltip = ({\n  active,\n  payload,\n  label\n}: {\n  active?: boolean;\n  payload?: {value: number}[];\n  label?: string;\n}) =>\n  active && !!payload?.length ? (\n    <div className={style.tooltip}>\n      <p>{label}</p>\n      <p>{payload[0].value}%</p>\n    </div>\n  ) : null;\n\nconst CustomDot = ({\n  cx,\n  cy,\n  payload,\n  onDotClick,\n  stroke,\n  activeDot,\n  dataName\n}: {\n  cx?: number;\n  cy?: number;\n  payload?: {payload: {subject: string} & {[datakey: string]: number}; name: string};\n  onDotClick: (name: string) => void;\n  dataKey: string;\n  stroke: string;\n  activeDot?: ActiveDotType;\n  dataName: string;\n}) => (\n  <circle\n    {...{\n      ...DOT_DEFAULT_PROPS,\n      ...(payload?.payload.subject === activeDot?.label && DOT_ACTIVE_PROPS),\n      stroke,\n      cx,\n      cy,\n      onClick: e => {\n        e.stopPropagation();\n\n        if (!payload?.name) return;\n        onDotClick(payload.name);\n      },\n      'data-name': dataName\n    }}\n  />\n);\n\nconst buildRadars = (\n  totalDataset: number,\n  handleOnDotClick: (datakey: string) => (name: string) => void,\n  activeDot?: ActiveDotType\n) =>\n  times(index => {\n    const datakey = `value${index + 1}`;\n    const dataset = `dataset-${index + 1}`;\n\n    return (\n      <Radar\n        {...RADAR_DEFAULT_PROPS}\n        fill={`url(#gradient-fill-${index})`}\n        stroke={`url(#gradient-stroke-${index})`}\n        key={dataset}\n        name={dataset}\n        dataKey={datakey}\n        activeDot={{\n          ...DOT_ACTIVE_PROPS,\n          stroke: `url(#gradient-stroke-${index})`\n        }}\n        // only on mobile\n        // to handle dot style on hover (convert to click)\n        // use with the tooltip component\n        dot={\n          <CustomDot\n            onDotClick={handleOnDotClick(datakey)}\n            activeDot={activeDot}\n            dataKey={datakey}\n            stroke={`url(#gradient-stroke-${index})`}\n            dataName={dataset}\n          />\n        }\n      />\n    );\n  }, totalDataset);\n\nconst buildCustomLabel = ({\n  index,\n  x,\n  y,\n  percentagesValues,\n  label,\n  activeDot,\n  chartType,\n  formatedColors\n}: {\n  index: number;\n  x: number;\n  y: number;\n  percentagesValues: number[];\n  label: string;\n  chartType: CHART_TYPE_TYPE;\n  formatedColors: FormatedColorsType[];\n  activeDot?: ActiveDotType;\n}) => {\n  const isCurrentDotActive = activeDot?.label === label;\n  const {\n    offset: {x: offsetX, y: offsetY},\n    alignment,\n    ...rest\n  } = CHART_CONFIGS[chartType].ticks[index];\n\n  return (\n    <g>\n      <foreignObject x={x + offsetX} y={y + offsetY} width=\"200\" height=\"65\">\n        <div\n          className={classnames(style.tickWrapper, isCurrentDotActive && style.tickWrapperFocus)}\n          style={{\n            ...rest,\n            alignItems: alignment,\n            textAlign: alignment,\n            opacity: !isEmpty(activeDot) && !isCurrentDotActive ? 0.3 : 1\n          }}\n        >\n          {formatedColors.map(\n            ({percentage: {color, background}, label: {color: colorLabel}}, i) => (\n              <Fragment key={i}>\n                <span className={style.tickValue} style={{color, background}}>\n                  {percentagesValues[i]}\n                </span>\n                <span className={style.tickLabel} style={{color: colorLabel}}>\n                  {label}\n                </span>\n              </Fragment>\n            )\n          )}\n        </div>\n      </foreignObject>\n    </g>\n  );\n};\n\n/* UTILS */\nconst CHART_CONFIGS_BY_SIDE_COUNT = pipe(keyBy('sideCount'), mapValues('name'))(CHART_CONFIGS);\n\nconst formatValues: (values_: number | number[]) => Record<string, number> = pipe(\n  values_ => flatten([values_]),\n  values_ => values_.map((val: number, i: number): [string, number] => [`value${i + 1}`, val]),\n  fromPairs\n);\n\n/* this convert incoming component data to rechart data structure */\nexport const formatData: (\n  legend: {[ref: string]: string},\n  data_: LearningProfileRadarChartPropTypes['data']\n) => FormatedDataType[] = (legend, data_) =>\n  pipe(\n    toPairs,\n    map(([ref, values_]: [string, number | number[]]) => ({\n      ...formatValues(values_),\n      subject: legend[ref]\n    }))\n  )(data_);\n\nexport const LearningProfileRadarChart = ({\n  data,\n  legend,\n  totalDataset,\n  colors: colorsProps,\n  onClick,\n  width,\n  height\n}: LearningProfileRadarChartPropTypes) => {\n  const [isMobile, setIsMobile] = useState(false);\n  const [activeDot, setActiveDot] = useState<ActiveDotType>();\n\n  const formatedColors = times(i => {\n    if (!colorsProps?.length) return DEFAULT_COLORS;\n\n    const colors = colorsProps[i];\n    return colors ? Object.assign({}, DEFAULT_COLORS, colors) : DEFAULT_COLORS;\n  })(totalDataset);\n\n  const chartType: CHART_TYPE_TYPE = useMemo(\n    () => getOr('hexagon', size(data), CHART_CONFIGS_BY_SIDE_COUNT),\n    [data]\n  );\n\n  const gradients = useMemo(\n    () =>\n      formatedColors.map(({gradient: {fill, stroke}}, index) => (\n        <svg key={`gradient-${index}`}>\n          <Gradient type={`fill-${index}`} colors={fill} />\n          <Gradient type={`stroke-${index}`} colors={stroke} />\n        </svg>\n      )),\n    [formatedColors]\n  );\n\n  const userAgent = navigator?.userAgent;\n  const isMobile_ = useMemo(() => getIsMobile(userAgent), [userAgent]);\n\n  const setIsMobile_ = useCallback(() => {\n    setIsMobile(isMobile_);\n  }, [isMobile_]);\n\n  useEffect(() => setIsMobile_(), [setIsMobile_]);\n\n  useEffect(() => {\n    const handleClick = () => setActiveDot(undefined);\n\n    !isEmpty(activeDot) && window.addEventListener('click', handleClick);\n\n    return () => {\n      window.removeEventListener('click', handleClick);\n    };\n  }, [activeDot]);\n\n  function handleOnDotClick(datakey: string) {\n    return (label: string) => {\n      const payload = formatedData.find(data_ => data_.subject === label);\n      const skillRef = findKey(val => val === payload?.subject, legend);\n\n      if (payload && skillRef) {\n        setActiveDot({\n          key: datakey,\n          value: payload[datakey],\n          label: payload.subject\n        });\n        onClick(skillRef);\n      }\n    };\n  }\n\n  function renderCustomLabel({\n    x,\n    y,\n    payload: {value: label},\n    index\n  }: {\n    x: number;\n    y: number;\n    payload: {value: string};\n    index: number;\n  }) {\n    const currentData = formatedData.find(({subject}) => subject === label);\n    const percentagesValues: number[] = pipe(\n      omit('subject'),\n      mapValues(value => `${value}%`),\n      values\n    )(currentData);\n\n    return buildCustomLabel({\n      index,\n      x,\n      y,\n      percentagesValues,\n      label,\n      activeDot,\n      chartType,\n      formatedColors\n    });\n  }\n  const formatedData = useMemo(() => formatData(legend, data), [legend, data]);\n\n  return (\n    <RadarChart\n      width={width}\n      height={height}\n      cx=\"50%\"\n      cy=\"50%\"\n      outerRadius=\"80%\"\n      data={formatedData}\n    >\n      {gradients}\n      {buildRadars(totalDataset, handleOnDotClick, activeDot)}\n      <PolarGrid strokeDasharray={15} strokeWidth={3} radialLines={false} />\n      <PolarAngleAxis dataKey=\"subject\" tick={!isMobile && renderCustomLabel} />\n      <PolarRadiusAxis tick={false} axisLine={false} domain={[0, 100]} />\n      {isMobile ? <Tooltip cursor={false} content={<CustomTooltip />} /> : null}\n    </RadarChart>\n  );\n};\n\nconst ResponsiveLearningProfileRadarChart = (props: LearningProfileRadarChartPropTypes) => (\n  <ResponsiveContainer width=\"100%\" height=\"100%\">\n    <LearningProfileRadarChart {...props} />\n  </ResponsiveContainer>\n);\n\nLearningProfileRadarChart.propTypes = learningProfileRadarChartPropTypes;\nResponsiveLearningProfileRadarChart.propTypes = learningProfileRadarChartPropTypes;\n\nexport default ResponsiveLearningProfileRadarChart;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","Fragment","useCallback","useEffect","useMemo","useState","Radar","RadarChart","PolarGrid","PolarAngleAxis","ResponsiveContainer","Tooltip","PolarRadiusAxis","classnames","isMobile","getIsMobile","style","learningProfileRadarChartPropTypes","top","offset","x","y","alignment","margin","bottom","right","marginRight","left","marginLeft","BLACK","WHITE","DEFAULT_MAIN_COLOR","DEFAULT_COLORS","gradient","fill","stroke","percentage","color","background","label","CHART_CONFIGS","triangle","name","ticks","sideCount","quadrilateral","pentagon","hexagon","DOT_DEFAULT_PROPS","strokeWidth","strokeOpacity","r","pointerEvents","cursor","DOT_ACTIVE_PROPS","RADAR_DEFAULT_PROPS","fillOpacity","Gradient","type","colors","firstColor","secondColor","CustomTooltip","active","payload","length","tooltip","value","CustomDot","cx","cy","onDotClick","activeDot","dataName","subject","onClick","e","stopPropagation","buildRadars","totalDataset","handleOnDotClick","index","datakey","dataset","buildCustomLabel","percentagesValues","chartType","formatedColors","isCurrentDotActive","offsetX","offsetY","rest","onLabelClick","tickWrapper","tickWrapperFocus","alignItems","textAlign","opacity","map","colorLabel","i","tickValue","tickLabel","CHART_CONFIGS_BY_SIDE_COUNT","formatValues","values_","val","formatData","legend","data_","ref","LearningProfileRadarChart","data","colorsProps","width","height","setIsMobile","setActiveDot","Object","assign","gradients","userAgent","navigator","isMobile_","setIsMobile_","handleClick","undefined","window","addEventListener","removeEventListener","formatedData","find","indexOf","skillRef","key","renderCustomLabel","currentData","ResponsiveLearningProfileRadarChart","props","propTypes"],"sources":["../../../src/molecule/learning-profile-radar-chart/index.tsx"],"sourcesContent":["import React, {Fragment, useCallback, useEffect, useMemo, useState} from 'react';\nimport {\n  Radar,\n  RadarChart,\n  PolarGrid,\n  PolarAngleAxis,\n  ResponsiveContainer,\n  Tooltip,\n  PolarRadiusAxis\n} from 'recharts';\nimport {\n  pipe,\n  keyBy,\n  mapValues,\n  size,\n  getOr,\n  map,\n  toPairs,\n  values,\n  isEmpty,\n  omit,\n  fromPairs,\n  times,\n  flatten,\n  findKey\n} from 'lodash/fp';\nimport classnames from 'classnames';\nimport {isMobile as getIsMobile} from '../../util/check-is-mobile';\nimport style from './style.css';\nimport {\n  ActiveDotType,\n  FormatedColorsType,\n  FormatedDataType,\n  LearningProfileRadarChartPropTypes,\n  TickType,\n  learningProfileRadarChartPropTypes\n} from './types';\n\ntype CHART_TYPE_TYPE = keyof typeof CHART_CONFIGS;\n\n/* TICK_POSITIONS */\nconst top: TickType = {offset: {x: -100, y: -65}, alignment: 'center', margin: 'auto'};\nconst bottom: TickType = {offset: {x: -100, y: 10}, alignment: 'center', margin: 'auto'};\nconst right: TickType = {offset: {x: 30, y: -10}, alignment: 'start', marginRight: 'auto'};\nconst left: TickType = {offset: {x: -230, y: -10}, alignment: 'end', marginLeft: 'auto'};\n\n/* CONSTANTS */\nconst BLACK = '#000000ff';\nconst WHITE = '#ffffffff';\nconst DEFAULT_MAIN_COLOR = '#0062ffff';\n\nconst DEFAULT_COLORS: FormatedColorsType = {\n  gradient: {\n    fill: [DEFAULT_MAIN_COLOR, DEFAULT_MAIN_COLOR],\n    stroke: [DEFAULT_MAIN_COLOR, DEFAULT_MAIN_COLOR]\n  },\n  percentage: {\n    color: BLACK,\n    background: WHITE\n  },\n  label: {\n    color: BLACK\n  }\n};\n\nconst CHART_CONFIGS = {\n  triangle: {\n    name: 'triangle',\n    ticks: [top, right, left],\n    sideCount: 3\n  },\n  quadrilateral: {\n    name: 'quadrilateral',\n    ticks: [top, right, bottom, left],\n    sideCount: 4\n  },\n  pentagon: {\n    name: 'pentagon',\n    ticks: [top, right, right, left, left],\n    sideCount: 5\n  },\n  hexagon: {\n    name: 'hexagon',\n    ticks: [top, right, right, bottom, left, left],\n    sideCount: 6\n  }\n} as const;\n\nconst DOT_DEFAULT_PROPS = {\n  strokeWidth: 4,\n  strokeOpacity: 0.2,\n  fill: '#fff',\n  r: 8,\n  pointerEvents: 'all',\n  style: {cursor: 'pointer'}\n} as const;\n\nconst DOT_ACTIVE_PROPS = {\n  fill: '#fff',\n  r: 8,\n  strokeWidth: 6,\n  strokeOpacity: 0.5\n} as const;\n\nconst RADAR_DEFAULT_PROPS = {\n  strokeWidth: 6,\n  strokeOpacity: 0.2,\n  fillOpacity: 0.2\n} as const;\n\n/* COMPONENTS */\nconst Gradient = ({type, colors: [firstColor, secondColor]}: {type: string; colors: string[]}) => (\n  <defs>\n    <linearGradient id={`gradient-${type}`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n      <stop offset=\"0%\" stopColor={firstColor} />\n      <stop offset=\"100%\" stopColor={secondColor} />\n    </linearGradient>\n  </defs>\n);\n\nconst CustomTooltip = ({\n  active,\n  payload,\n  label\n}: {\n  active?: boolean;\n  payload?: {value: number}[];\n  label?: string;\n}) =>\n  active && !!payload?.length ? (\n    <div className={style.tooltip}>\n      <p>{label}</p>\n      <p>{payload[0].value}%</p>\n    </div>\n  ) : null;\n\nconst CustomDot = ({\n  cx,\n  cy,\n  payload,\n  onDotClick,\n  stroke,\n  activeDot,\n  dataName\n}: {\n  cx?: number;\n  cy?: number;\n  payload?: {payload: {subject: string} & {[datakey: string]: number}; name: string};\n  onDotClick: (name: string) => void;\n  dataKey: string;\n  stroke: string;\n  activeDot?: ActiveDotType;\n  dataName: string;\n}) => (\n  <circle\n    {...{\n      ...DOT_DEFAULT_PROPS,\n      ...(payload?.payload.subject === activeDot?.label && DOT_ACTIVE_PROPS),\n      stroke,\n      cx,\n      cy,\n      onClick: e => {\n        e.stopPropagation();\n\n        if (!payload?.name) return;\n        onDotClick(payload.name);\n      },\n      'data-name': dataName\n    }}\n  />\n);\n\nconst buildRadars = (\n  totalDataset: number,\n  handleOnDotClick: (name: string) => void,\n  activeDot?: ActiveDotType\n) =>\n  times(index => {\n    const datakey = `value${index + 1}`;\n    const dataset = `dataset-${index + 1}`;\n\n    return (\n      <Radar\n        {...RADAR_DEFAULT_PROPS}\n        fill={`url(#gradient-fill-${index})`}\n        stroke={`url(#gradient-stroke-${index})`}\n        key={dataset}\n        name={dataset}\n        dataKey={datakey}\n        activeDot={{\n          ...DOT_ACTIVE_PROPS,\n          stroke: `url(#gradient-stroke-${index})`\n        }}\n        // only on mobile\n        // to handle dot style on hover (convert to click)\n        // use with the tooltip component\n        dot={\n          <CustomDot\n            onDotClick={handleOnDotClick}\n            activeDot={activeDot}\n            dataKey={datakey}\n            stroke={`url(#gradient-stroke-${index})`}\n            dataName={`dot-${dataset}`}\n          />\n        }\n      />\n    );\n  }, totalDataset);\n\nconst buildCustomLabel = ({\n  index,\n  x,\n  y,\n  percentagesValues,\n  label,\n  activeDot,\n  chartType,\n  formatedColors,\n  onClick\n}: {\n  index: number;\n  x: number;\n  y: number;\n  percentagesValues: number[];\n  label: string;\n  chartType: CHART_TYPE_TYPE;\n  formatedColors: FormatedColorsType[];\n  activeDot?: ActiveDotType;\n  onClick: (name: string) => void;\n}) => {\n  const isCurrentDotActive = activeDot?.label === label;\n  const {\n    offset: {x: offsetX, y: offsetY},\n    alignment,\n    ...rest\n  } = CHART_CONFIGS[chartType].ticks[index];\n\n  function onLabelClick(e: React.MouseEvent) {\n    e.stopPropagation();\n    onClick(label);\n  }\n\n  return (\n    <g>\n      <foreignObject x={x + offsetX} y={y + offsetY} width=\"200\" height=\"65\">\n        <div\n          data-name={label}\n          onClick={onLabelClick}\n          className={classnames(style.tickWrapper, isCurrentDotActive && style.tickWrapperFocus)}\n          style={{\n            ...rest,\n            alignItems: alignment,\n            textAlign: alignment,\n            opacity: !isEmpty(activeDot) && !isCurrentDotActive ? 0.3 : 1\n          }}\n        >\n          {formatedColors.map(\n            ({percentage: {color, background}, label: {color: colorLabel}}, i) => (\n              <Fragment key={i}>\n                <span className={style.tickValue} style={{color, background}}>\n                  {percentagesValues[i]}\n                </span>\n                <span className={style.tickLabel} style={{color: colorLabel}}>\n                  {label}\n                </span>\n              </Fragment>\n            )\n          )}\n        </div>\n      </foreignObject>\n    </g>\n  );\n};\n\n/* UTILS */\nconst CHART_CONFIGS_BY_SIDE_COUNT = pipe(keyBy('sideCount'), mapValues('name'))(CHART_CONFIGS);\n\nconst formatValues: (values_: number | number[]) => Record<string, number> = pipe(\n  values_ => flatten([values_]),\n  values_ => values_.map((val: number, i: number): [string, number] => [`value${i + 1}`, val]),\n  fromPairs\n);\n\n/* this convert incoming component data to rechart data structure */\nexport const formatData: (\n  legend: {[ref: string]: string},\n  data_: LearningProfileRadarChartPropTypes['data']\n) => FormatedDataType[] = (legend, data_) =>\n  pipe(\n    toPairs,\n    map(([ref, values_]: [string, number | number[]]) => ({\n      ...formatValues(values_),\n      subject: legend[ref]\n    }))\n  )(data_);\n\nexport const LearningProfileRadarChart = ({\n  data,\n  legend,\n  totalDataset,\n  colors: colorsProps,\n  onClick,\n  width,\n  height\n}: LearningProfileRadarChartPropTypes) => {\n  const [isMobile, setIsMobile] = useState(false);\n  const [activeDot, setActiveDot] = useState<ActiveDotType>();\n\n  const formatedColors = times(i => {\n    if (!colorsProps?.length) return DEFAULT_COLORS;\n\n    const colors = colorsProps[i];\n    return colors ? Object.assign({}, DEFAULT_COLORS, colors) : DEFAULT_COLORS;\n  })(totalDataset);\n\n  const chartType: CHART_TYPE_TYPE = useMemo(\n    () => getOr('hexagon', size(data), CHART_CONFIGS_BY_SIDE_COUNT),\n    [data]\n  );\n\n  const gradients = useMemo(\n    () =>\n      formatedColors.map(({gradient: {fill, stroke}}, index) => (\n        <svg key={`gradient-${index}`}>\n          <Gradient type={`fill-${index}`} colors={fill} />\n          <Gradient type={`stroke-${index}`} colors={stroke} />\n        </svg>\n      )),\n    [formatedColors]\n  );\n\n  const userAgent = navigator?.userAgent;\n  const isMobile_ = useMemo(() => getIsMobile(userAgent), [userAgent]);\n\n  const setIsMobile_ = useCallback(() => {\n    setIsMobile(isMobile_);\n  }, [isMobile_]);\n\n  useEffect(() => setIsMobile_(), [setIsMobile_]);\n\n  useEffect(() => {\n    const handleClick = () => setActiveDot(undefined);\n\n    !isEmpty(activeDot) && window.addEventListener('click', handleClick);\n\n    return () => {\n      window.removeEventListener('click', handleClick);\n    };\n  }, [activeDot]);\n\n  function handleOnDotClick(label: string) {\n    const payload = formatedData.find(({subject}) => subject === label);\n    if (!payload) return;\n\n    const index = formatedData.indexOf(payload);\n    const datakey = `value${index + 1}`;\n    const skillRef = findKey(val => val === payload?.subject, legend);\n\n    if (skillRef) {\n      setActiveDot({\n        key: datakey,\n        value: payload[datakey],\n        label: payload.subject\n      });\n      onClick(skillRef);\n    }\n  }\n\n  function renderCustomLabel({\n    x,\n    y,\n    payload: {value: label},\n    index\n  }: {\n    x: number;\n    y: number;\n    payload: {value: string};\n    index: number;\n  }) {\n    const currentData = formatedData.find(({subject}) => subject === label);\n    const percentagesValues: number[] = pipe(\n      omit('subject'),\n      mapValues(value => `${value}%`),\n      values\n    )(currentData);\n\n    return buildCustomLabel({\n      index,\n      x,\n      y,\n      percentagesValues,\n      label,\n      activeDot,\n      chartType,\n      formatedColors,\n      onClick: handleOnDotClick\n    });\n  }\n  const formatedData = useMemo(() => formatData(legend, data), [legend, data]);\n\n  return (\n    <RadarChart\n      width={width}\n      height={height}\n      cx=\"50%\"\n      cy=\"50%\"\n      outerRadius=\"80%\"\n      data={formatedData}\n    >\n      {gradients}\n      {buildRadars(totalDataset, handleOnDotClick, activeDot)}\n      <PolarGrid strokeDasharray={15} strokeWidth={3} radialLines={false} />\n      <PolarAngleAxis dataKey=\"subject\" tick={!isMobile && renderCustomLabel} />\n      <PolarRadiusAxis tick={false} axisLine={false} domain={[0, 100]} />\n      {isMobile ? <Tooltip cursor={false} content={<CustomTooltip />} /> : null}\n    </RadarChart>\n  );\n};\n\nconst ResponsiveLearningProfileRadarChart = (props: LearningProfileRadarChartPropTypes) => (\n  <ResponsiveContainer width=\"100%\" height=\"100%\">\n    <LearningProfileRadarChart {...props} />\n  </ResponsiveContainer>\n);\n\nLearningProfileRadarChart.propTypes = learningProfileRadarChartPropTypes;\nResponsiveLearningProfileRadarChart.propTypes = learningProfileRadarChartPropTypes;\n\nexport default ResponsiveLearningProfileRadarChart;\n"],"mappings":"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"}

package/es/molecule/learning-profile-radar-chart/style.css

@@ -46,4 +46,6 @@
     padding: 4px 8px;
     border-radius: 8px;
     width: 100%;
+    padding: 8px 12px;
+    box-sizing: border-box;
 }

package/es/molecule/skills-chart-side-information-item/index.d.ts

@@ -0,0 +1,17 @@
+export default SkillsChartSideInformationItem;
+declare function SkillsChartSideInformationItem({ title, value, legend, icon: iconProps }: {
+    title: any;
+    value: any;
+    legend: any;
+    icon: any;
+}): JSX.Element;
+declare namespace SkillsChartSideInformationItem {
+    namespace propTypes {
+        const icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+        const title: PropTypes.Requireable<string>;
+        const value: PropTypes.Requireable<string>;
+        const legend: PropTypes.Requireable<string>;
+    }
+}
+import PropTypes from "prop-types";
+//# sourceMappingURL=index.d.ts.map

package/es/molecule/skills-chart-side-information-item/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/skills-chart-side-information-item/index.js"],"names":[],"mappings":";AAMA;;;;;gBAcC"}

package/es/molecule/skills-chart-side-information-item/index.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import defaults from 'lodash/fp/defaults';
+import Icon from '../../atom/icon';
+import style from './style.css';
+
+const SkillsChartSideInformationItem = ({
+  title,
+  value,
+  legend,
+  icon: iconProps
+}) => /*#__PURE__*/React.createElement("div", {
+  className: style.InformationElement
+}, /*#__PURE__*/React.createElement("div", {
+  className: style.titleContainer
+}, /*#__PURE__*/React.createElement(Icon, defaults({
+  preset: 's'
+}, iconProps)), /*#__PURE__*/React.createElement("div", {
+  className: style.title
+}, title)), /*#__PURE__*/React.createElement("div", {
+  className: style.value
+}, value), /*#__PURE__*/React.createElement("div", {
+  className: style.legend
+}, /*#__PURE__*/React.createElement("span", {
+  // eslint-disable-next-line react/no-danger
+  dangerouslySetInnerHTML: {
+    __html: legend
+  }
+})));
+
+SkillsChartSideInformationItem.propTypes = process.env.NODE_ENV !== "production" ? {
+  icon: PropTypes.shape(Icon.propTypes),
+  title: PropTypes.string,
+  value: PropTypes.string,
+  legend: PropTypes.string
+} : {};
+export default SkillsChartSideInformationItem;
+//# sourceMappingURL=index.js.map

package/es/molecule/skills-chart-side-information-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","PropTypes","defaults","Icon","style","SkillsChartSideInformationItem","title","value","legend","icon","iconProps","InformationElement","titleContainer","preset","__html","propTypes","shape","string"],"sources":["../../../src/molecule/skills-chart-side-information-item/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport defaults from 'lodash/fp/defaults';\nimport Icon from '../../atom/icon';\nimport style from './style.css';\n\nconst SkillsChartSideInformationItem = ({title, value, legend, icon: iconProps}) => (\n  <div className={style.InformationElement}>\n    <div className={style.titleContainer}>\n      <Icon {...defaults({preset: 's'}, iconProps)} />\n      <div className={style.title}>{title}</div>\n    </div>\n    <div className={style.value}>{value}</div>\n    <div className={style.legend}>\n      <span\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: legend}}\n      />\n    </div>\n  </div>\n);\n\nSkillsChartSideInformationItem.propTypes = {\n  icon: PropTypes.shape(Icon.propTypes),\n  title: PropTypes.string,\n  value: PropTypes.string,\n  legend: PropTypes.string\n};\n\nexport default SkillsChartSideInformationItem;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,QAAP,MAAqB,oBAArB;AACA,OAAOC,IAAP,MAAiB,iBAAjB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,8BAA8B,GAAG,CAAC;EAACC,KAAD;EAAQC,KAAR;EAAeC,MAAf;EAAuBC,IAAI,EAAEC;AAA7B,CAAD,kBACrC;EAAK,SAAS,EAAEN,KAAK,CAACO;AAAtB,gBACE;EAAK,SAAS,EAAEP,KAAK,CAACQ;AAAtB,gBACE,oBAAC,IAAD,EAAUV,QAAQ,CAAC;EAACW,MAAM,EAAE;AAAT,CAAD,EAAgBH,SAAhB,CAAlB,CADF,eAEE;EAAK,SAAS,EAAEN,KAAK,CAACE;AAAtB,GAA8BA,KAA9B,CAFF,CADF,eAKE;EAAK,SAAS,EAAEF,KAAK,CAACG;AAAtB,GAA8BA,KAA9B,CALF,eAME;EAAK,SAAS,EAAEH,KAAK,CAACI;AAAtB,gBACE;EACE;EACA,uBAAuB,EAAE;IAACM,MAAM,EAAEN;EAAT;AAF3B,EADF,CANF,CADF;;AAgBAH,8BAA8B,CAACU,SAA/B,2CAA2C;EACzCN,IAAI,EAAER,SAAS,CAACe,KAAV,CAAgBb,IAAI,CAACY,SAArB,CADmC;EAEzCT,KAAK,EAAEL,SAAS,CAACgB,MAFwB;EAGzCV,KAAK,EAAEN,SAAS,CAACgB,MAHwB;EAIzCT,MAAM,EAAEP,SAAS,CAACgB;AAJuB,CAA3C;AAOA,eAAeZ,8BAAf"}

package/es/molecule/skills-chart-side-information-item/style.css

@@ -0,0 +1,47 @@
+@value colors: "../../variables/colors.css";
+@value cm_grey_50 from colors;
+@value cm_grey_500 from colors;
+@value cm_grey_700 from colors;
+
+.InformationElement {
+  border-radius: 12px;
+  background: cm_grey_50;
+  display: flex;
+  padding: 24px;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  align-self: stretch;
+}
+
+.titleContainer {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.title {
+  color: cm_grey_500;
+  font-family: Gilroy;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 22px;
+  margin-left: 8px;
+}
+
+.value {
+  color: cm_grey_700;
+  font-family: Gilroy;
+  font-size: 28px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 36px;
+}
+
+.legend {
+  color: cm_grey_700;
+  font-family: Gilroy;
+  font-size: 14px;
+  font-style: normal;
+  line-height: 20px;
+}

package/es/molecule/skills-chart-side-information-panel/index.d.ts

@@ -0,0 +1,16 @@
+export default SkillsChartSideInformationPanel;
+declare function SkillsChartSideInformationPanel({ sidePanelItems }: {
+    sidePanelItems?: any[] | undefined;
+}): JSX.Element;
+declare namespace SkillsChartSideInformationPanel {
+    namespace propTypes {
+        const sidePanelItems: PropTypes.Requireable<(PropTypes.InferProps<{
+            icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+            title: PropTypes.Requireable<string>;
+            value: PropTypes.Requireable<string>;
+            legend: PropTypes.Requireable<string>;
+        }> | null | undefined)[]>;
+    }
+}
+import PropTypes from "prop-types";
+//# sourceMappingURL=index.d.ts.map

package/es/molecule/skills-chart-side-information-panel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/skills-chart-side-information-panel/index.js"],"names":[],"mappings":";AAMA;;gBAWC"}

package/es/molecule/skills-chart-side-information-panel/index.js

@@ -0,0 +1,26 @@
+import _map from "lodash/fp/map";
+
+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); }
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import SkillsChartSideInformationItem from '../skills-chart-side-information-item';
+import style from './style.css';
+
+const SkillsChartSideInformationPanel = ({
+  sidePanelItems = []
+}) => {
+  const sidePanel = _map(sidePanelItemProps => /*#__PURE__*/React.createElement(SkillsChartSideInformationItem, _extends({}, sidePanelItemProps, {
+    key: `side-panel-item-${sidePanelItemProps.title}`
+  })), sidePanelItems);
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.sidePanel
+  }, sidePanel);
+};
+
+SkillsChartSideInformationPanel.propTypes = process.env.NODE_ENV !== "production" ? {
+  sidePanelItems: PropTypes.arrayOf(PropTypes.shape(SkillsChartSideInformationItem.propTypes))
+} : {};
+export default SkillsChartSideInformationPanel;
+//# sourceMappingURL=index.js.map

package/es/molecule/skills-chart-side-information-panel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","PropTypes","SkillsChartSideInformationItem","style","SkillsChartSideInformationPanel","sidePanelItems","sidePanel","sidePanelItemProps","title","propTypes","arrayOf","shape"],"sources":["../../../src/molecule/skills-chart-side-information-panel/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {map} from 'lodash/fp';\nimport SkillsChartSideInformationItem from '../skills-chart-side-information-item';\nimport style from './style.css';\n\nconst SkillsChartSideInformationPanel = ({sidePanelItems = []}) => {\n  const sidePanel = map(\n    sidePanelItemProps => (\n      <SkillsChartSideInformationItem\n        {...sidePanelItemProps}\n        key={`side-panel-item-${sidePanelItemProps.title}`}\n      />\n    ),\n    sidePanelItems\n  );\n  return <div className={style.sidePanel}>{sidePanel}</div>;\n};\n\nSkillsChartSideInformationPanel.propTypes = {\n  sidePanelItems: PropTypes.arrayOf(PropTypes.shape(SkillsChartSideInformationItem.propTypes))\n};\n\nexport default SkillsChartSideInformationPanel;\n"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,8BAAP,MAA2C,uCAA3C;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,+BAA+B,GAAG,CAAC;EAACC,cAAc,GAAG;AAAlB,CAAD,KAA2B;EACjE,MAAMC,SAAS,GAAG,KAChBC,kBAAkB,iBAChB,oBAAC,8BAAD,eACMA,kBADN;IAEE,GAAG,EAAG,mBAAkBA,kBAAkB,CAACC,KAAM;EAFnD,GAFc,EAOhBH,cAPgB,CAAlB;;EASA,oBAAO;IAAK,SAAS,EAAEF,KAAK,CAACG;EAAtB,GAAkCA,SAAlC,CAAP;AACD,CAXD;;AAaAF,+BAA+B,CAACK,SAAhC,2CAA4C;EAC1CJ,cAAc,EAAEJ,SAAS,CAACS,OAAV,CAAkBT,SAAS,CAACU,KAAV,CAAgBT,8BAA8B,CAACO,SAA/C,CAAlB;AAD0B,CAA5C;AAIA,eAAeL,+BAAf"}

package/es/molecule/skills-chart-side-information-panel/style.css

@@ -0,0 +1,10 @@
+.sidePanel {
+    display: flex;
+    width: 316px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 16px;
+    align-self: stretch;
+ }
+ 

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/icon/index.js"],"names":[],"mappings":"AAgBA,mDAAoD;AAiB7C,iEACoE;;AAE3E,uDA6BG"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/icon/index.js"],"names":[],"mappings":"AAiBA,mDAAoD;AAiB7C,iEACoE;;AAE3E,uDAgCG"}

package/lib/atom/icon/index.js

@@ -5,7 +5,7 @@ exports.getForegroundColor = exports.default = exports.DEFAULT_ICON_COLOR = void
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _propTypes = _interopRequireWildcard(require("prop-types"));
 
 var _reactFontawesome = require("@fortawesome/react-fontawesome");
 
@@ -23,6 +23,10 @@ var _colorjs = _interopRequireDefault(require("colorjs.io"));
 
 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 }; }
 
 _fontawesomeSvgCore.library.add(_proSolidSvgIcons.fas);
@@ -30,19 +34,20 @@ _fontawesomeSvgCore.library.add(_proSolidSvgIcons.fas);
 const DEFAULT_PRESET = 'm';
 const ICON_LUMINOSITY = 32;
 const DEFAULT_WRAPPER_SIZE = 40;
+const ICON_PADDING = 8;
 const DEFAULT_ICON_COLOR = 'hsl(0, 0%, 32%)';
 exports.DEFAULT_ICON_COLOR = DEFAULT_ICON_COLOR;
 const SIZE_CONFIGS = {
   s: {
-    faSize: 'sm',
+    faSize: 12,
     wrapperSize: 32
   },
   m: {
-    faSize: 'lg',
+    faSize: 16,
     wrapperSize: DEFAULT_WRAPPER_SIZE
   },
   xl: {
-    faSize: 'xl',
+    faSize: 20,
     wrapperSize: 48
   }
 };
@@ -62,10 +67,12 @@ const Icon = /*#__PURE__*/_react.default.memo(function Icon({
 }) {
   const effectiveIconColor = iconColor || backgroundColor ? getForegroundColor(backgroundColor) : DEFAULT_ICON_COLOR;
   const effectiveSize = size ? (0, _merge.default)(SIZE_CONFIGS[DEFAULT_PRESET], size) : (0, _getOr.default)(SIZE_CONFIGS[DEFAULT_PRESET], (0, _toLower.default)(preset), SIZE_CONFIGS);
+  const wrapperSize = effectiveSize.wrapperSize - ICON_PADDING * 2;
   const iconWrapperStyle = {
     backgroundColor,
-    width: effectiveSize.wrapperSize,
-    height: effectiveSize.wrapperSize
+    width: wrapperSize,
+    height: wrapperSize,
+    padding: ICON_PADDING
   };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.iconWrapper,
@@ -73,7 +80,7 @@ const Icon = /*#__PURE__*/_react.default.memo(function Icon({
   }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
     icon: `fa-${iconName}`,
     color: effectiveIconColor,
-    size: effectiveSize.faSize
+    "font-size": effectiveSize.faSize
   }));
 });
 
@@ -83,7 +90,7 @@ Icon.propTypes = process.env.NODE_ENV !== "production" ? {
   backgroundColor: _propTypes.default.string,
   preset: _propTypes.default.oneOf(['s', 'm', 'xl']),
   size: _propTypes.default.shape({
-    faSize: _propTypes.default.oneOf(['2xs', 'xs', 'sm', 'lg', 'xl', '2xl', '1x', '2x', '3x', '4x', '5x', '6x', '7x', '8x', '9x', '10x']),
+    faSize: _propTypes.number,
     wrapperSize: _propTypes.default.number
   })
 } : {};

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["library","add","fas","DEFAULT_PRESET","ICON_LUMINOSITY","DEFAULT_WRAPPER_SIZE","DEFAULT_ICON_COLOR","SIZE_CONFIGS","s","faSize","wrapperSize","m","xl","getForegroundColor","backgroundColor","Color","to","set","l","toString","Icon","React","memo","iconName","iconColor","preset","size","effectiveIconColor","effectiveSize","merge","getOr","toLower","iconWrapperStyle","width","height","style","iconWrapper","propTypes","PropTypes","string","isRequired","oneOf","shape","number"],"sources":["../../../src/atom/icon/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {fas} from '@fortawesome/pro-solid-svg-icons';\nimport {library} from '@fortawesome/fontawesome-svg-core';\nimport toLower from 'lodash/fp/toLower';\nimport merge from 'lodash/fp/merge';\nimport getOr from 'lodash/fp/getOr';\nimport Color from 'colorjs.io';\nimport style from './style.css';\n\nlibrary.add(fas);\n\nconst DEFAULT_PRESET = 'm';\nconst ICON_LUMINOSITY = 32;\nconst DEFAULT_WRAPPER_SIZE = 40;\nexport const DEFAULT_ICON_COLOR = 'hsl(0, 0%, 32%)';\n\nconst SIZE_CONFIGS = {\n  s: {\n    faSize: 'sm',\n    wrapperSize: 32\n  },\n  m: {\n    faSize: 'lg',\n    wrapperSize: DEFAULT_WRAPPER_SIZE\n  },\n  xl: {\n    faSize: 'xl',\n    wrapperSize: 48\n  }\n};\n\nexport const getForegroundColor = backgroundColor =>\n  new Color(backgroundColor).to('hsl').set({l: ICON_LUMINOSITY}).toString();\n\nconst Icon = React.memo(function Icon({\n  iconName,\n  iconColor,\n  backgroundColor,\n  preset = DEFAULT_PRESET,\n  size\n}) {\n  const effectiveIconColor =\n    iconColor || backgroundColor ? getForegroundColor(backgroundColor) : DEFAULT_ICON_COLOR;\n\n  const effectiveSize = size\n    ? merge(SIZE_CONFIGS[DEFAULT_PRESET], size)\n    : getOr(SIZE_CONFIGS[DEFAULT_PRESET], toLower(preset), SIZE_CONFIGS);\n\n  const iconWrapperStyle = {\n    backgroundColor,\n    width: effectiveSize.wrapperSize,\n    height: effectiveSize.wrapperSize\n  };\n\n  return (\n    <div className={style.iconWrapper} style={iconWrapperStyle}>\n      <FontAwesomeIcon\n        icon={`fa-${iconName}`}\n        color={effectiveIconColor}\n        size={effectiveSize.faSize}\n      />\n    </div>\n  );\n});\n\nIcon.propTypes = {\n  iconName: PropTypes.string.isRequired,\n  iconColor: PropTypes.string,\n  backgroundColor: PropTypes.string,\n  preset: PropTypes.oneOf(['s', 'm', 'xl']),\n  size: PropTypes.shape({\n    faSize: PropTypes.oneOf([\n      '2xs',\n      'xs',\n      'sm',\n      'lg',\n      'xl',\n      '2xl',\n      '1x',\n      '2x',\n      '3x',\n      '4x',\n      '5x',\n      '6x',\n      '7x',\n      '8x',\n      '9x',\n      '10x'\n    ]),\n    wrapperSize: PropTypes.number\n  })\n};\n\nexport default Icon;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEAA,2BAAA,CAAQC,GAAR,CAAYC,qBAAZ;;AAEA,MAAMC,cAAc,GAAG,GAAvB;AACA,MAAMC,eAAe,GAAG,EAAxB;AACA,MAAMC,oBAAoB,GAAG,EAA7B;AACO,MAAMC,kBAAkB,GAAG,iBAA3B;;AAEP,MAAMC,YAAY,GAAG;EACnBC,CAAC,EAAE;IACDC,MAAM,EAAE,IADP;IAEDC,WAAW,EAAE;EAFZ,CADgB;EAKnBC,CAAC,EAAE;IACDF,MAAM,EAAE,IADP;IAEDC,WAAW,EAAEL;EAFZ,CALgB;EASnBO,EAAE,EAAE;IACFH,MAAM,EAAE,IADN;IAEFC,WAAW,EAAE;EAFX;AATe,CAArB;;AAeO,MAAMG,kBAAkB,GAAGC,eAAe,IAC/C,IAAIC,gBAAJ,CAAUD,eAAV,EAA2BE,EAA3B,CAA8B,KAA9B,EAAqCC,GAArC,CAAyC;EAACC,CAAC,EAAEd;AAAJ,CAAzC,EAA+De,QAA/D,EADK;;;;AAGP,MAAMC,IAAI,gBAAGC,cAAA,CAAMC,IAAN,CAAW,SAASF,IAAT,CAAc;EACpCG,QADoC;EAEpCC,SAFoC;EAGpCV,eAHoC;EAIpCW,MAAM,GAAGtB,cAJ2B;EAKpCuB;AALoC,CAAd,EAMrB;EACD,MAAMC,kBAAkB,GACtBH,SAAS,IAAIV,eAAb,GAA+BD,kBAAkB,CAACC,eAAD,CAAjD,GAAqER,kBADvE;EAGA,MAAMsB,aAAa,GAAGF,IAAI,GACtB,IAAAG,cAAA,EAAMtB,YAAY,CAACJ,cAAD,CAAlB,EAAoCuB,IAApC,CADsB,GAEtB,IAAAI,cAAA,EAAMvB,YAAY,CAACJ,cAAD,CAAlB,EAAoC,IAAA4B,gBAAA,EAAQN,MAAR,CAApC,EAAqDlB,YAArD,CAFJ;EAIA,MAAMyB,gBAAgB,GAAG;IACvBlB,eADuB;IAEvBmB,KAAK,EAAEL,aAAa,CAAClB,WAFE;IAGvBwB,MAAM,EAAEN,aAAa,CAAClB;EAHC,CAAzB;EAMA,oBACE;IAAK,SAAS,EAAEyB,cAAA,CAAMC,WAAtB;IAAmC,KAAK,EAAEJ;EAA1C,gBACE,6BAAC,iCAAD;IACE,IAAI,EAAG,MAAKT,QAAS,EADvB;IAEE,KAAK,EAAEI,kBAFT;IAGE,IAAI,EAAEC,aAAa,CAACnB;EAHtB,EADF,CADF;AASD,CA7BY,CAAb;;AA+BAW,IAAI,CAACiB,SAAL,2CAAiB;EACfd,QAAQ,EAAEe,kBAAA,CAAUC,MAAV,CAAiBC,UADZ;EAEfhB,SAAS,EAAEc,kBAAA,CAAUC,MAFN;EAGfzB,eAAe,EAAEwB,kBAAA,CAAUC,MAHZ;EAIfd,MAAM,EAAEa,kBAAA,CAAUG,KAAV,CAAgB,CAAC,GAAD,EAAM,GAAN,EAAW,IAAX,CAAhB,CAJO;EAKff,IAAI,EAAEY,kBAAA,CAAUI,KAAV,CAAgB;IACpBjC,MAAM,EAAE6B,kBAAA,CAAUG,KAAV,CAAgB,CACtB,KADsB,EAEtB,IAFsB,EAGtB,IAHsB,EAItB,IAJsB,EAKtB,IALsB,EAMtB,KANsB,EAOtB,IAPsB,EAQtB,IARsB,EAStB,IATsB,EAUtB,IAVsB,EAWtB,IAXsB,EAYtB,IAZsB,EAatB,IAbsB,EActB,IAdsB,EAetB,IAfsB,EAgBtB,KAhBsB,CAAhB,CADY;IAmBpB/B,WAAW,EAAE4B,kBAAA,CAAUK;EAnBH,CAAhB;AALS,CAAjB;eA4BevB,I"}
+{"version":3,"file":"index.js","names":["library","add","fas","DEFAULT_PRESET","ICON_LUMINOSITY","DEFAULT_WRAPPER_SIZE","ICON_PADDING","DEFAULT_ICON_COLOR","SIZE_CONFIGS","s","faSize","wrapperSize","m","xl","getForegroundColor","backgroundColor","Color","to","set","l","toString","Icon","React","memo","iconName","iconColor","preset","size","effectiveIconColor","effectiveSize","merge","getOr","toLower","iconWrapperStyle","width","height","padding","style","iconWrapper","propTypes","PropTypes","string","isRequired","oneOf","shape","number"],"sources":["../../../src/atom/icon/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes, {number} from 'prop-types';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {fas} from '@fortawesome/pro-solid-svg-icons';\nimport {library} from '@fortawesome/fontawesome-svg-core';\nimport toLower from 'lodash/fp/toLower';\nimport merge from 'lodash/fp/merge';\nimport getOr from 'lodash/fp/getOr';\nimport Color from 'colorjs.io';\nimport style from './style.css';\n\nlibrary.add(fas);\n\nconst DEFAULT_PRESET = 'm';\nconst ICON_LUMINOSITY = 32;\nconst DEFAULT_WRAPPER_SIZE = 40;\nconst ICON_PADDING = 8;\nexport const DEFAULT_ICON_COLOR = 'hsl(0, 0%, 32%)';\n\nconst SIZE_CONFIGS = {\n  s: {\n    faSize: 12,\n    wrapperSize: 32\n  },\n  m: {\n    faSize: 16,\n    wrapperSize: DEFAULT_WRAPPER_SIZE\n  },\n  xl: {\n    faSize: 20,\n    wrapperSize: 48\n  }\n};\n\nexport const getForegroundColor = backgroundColor =>\n  new Color(backgroundColor).to('hsl').set({l: ICON_LUMINOSITY}).toString();\n\nconst Icon = React.memo(function Icon({\n  iconName,\n  iconColor,\n  backgroundColor,\n  preset = DEFAULT_PRESET,\n  size\n}) {\n  const effectiveIconColor =\n    iconColor || backgroundColor ? getForegroundColor(backgroundColor) : DEFAULT_ICON_COLOR;\n\n  const effectiveSize = size\n    ? merge(SIZE_CONFIGS[DEFAULT_PRESET], size)\n    : getOr(SIZE_CONFIGS[DEFAULT_PRESET], toLower(preset), SIZE_CONFIGS);\n\n  const wrapperSize = effectiveSize.wrapperSize - ICON_PADDING * 2;\n\n  const iconWrapperStyle = {\n    backgroundColor,\n    width: wrapperSize,\n    height: wrapperSize,\n    padding: ICON_PADDING\n  };\n\n  return (\n    <div className={style.iconWrapper} style={iconWrapperStyle}>\n      <FontAwesomeIcon\n        icon={`fa-${iconName}`}\n        color={effectiveIconColor}\n        font-size={effectiveSize.faSize}\n      />\n    </div>\n  );\n});\n\nIcon.propTypes = {\n  iconName: PropTypes.string.isRequired,\n  iconColor: PropTypes.string,\n  backgroundColor: PropTypes.string,\n  preset: PropTypes.oneOf(['s', 'm', 'xl']),\n  size: PropTypes.shape({\n    faSize: number,\n    wrapperSize: PropTypes.number\n  })\n};\n\nexport default Icon;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEAA,2BAAA,CAAQC,GAAR,CAAYC,qBAAZ;;AAEA,MAAMC,cAAc,GAAG,GAAvB;AACA,MAAMC,eAAe,GAAG,EAAxB;AACA,MAAMC,oBAAoB,GAAG,EAA7B;AACA,MAAMC,YAAY,GAAG,CAArB;AACO,MAAMC,kBAAkB,GAAG,iBAA3B;;AAEP,MAAMC,YAAY,GAAG;EACnBC,CAAC,EAAE;IACDC,MAAM,EAAE,EADP;IAEDC,WAAW,EAAE;EAFZ,CADgB;EAKnBC,CAAC,EAAE;IACDF,MAAM,EAAE,EADP;IAEDC,WAAW,EAAEN;EAFZ,CALgB;EASnBQ,EAAE,EAAE;IACFH,MAAM,EAAE,EADN;IAEFC,WAAW,EAAE;EAFX;AATe,CAArB;;AAeO,MAAMG,kBAAkB,GAAGC,eAAe,IAC/C,IAAIC,gBAAJ,CAAUD,eAAV,EAA2BE,EAA3B,CAA8B,KAA9B,EAAqCC,GAArC,CAAyC;EAACC,CAAC,EAAEf;AAAJ,CAAzC,EAA+DgB,QAA/D,EADK;;;;AAGP,MAAMC,IAAI,gBAAGC,cAAA,CAAMC,IAAN,CAAW,SAASF,IAAT,CAAc;EACpCG,QADoC;EAEpCC,SAFoC;EAGpCV,eAHoC;EAIpCW,MAAM,GAAGvB,cAJ2B;EAKpCwB;AALoC,CAAd,EAMrB;EACD,MAAMC,kBAAkB,GACtBH,SAAS,IAAIV,eAAb,GAA+BD,kBAAkB,CAACC,eAAD,CAAjD,GAAqER,kBADvE;EAGA,MAAMsB,aAAa,GAAGF,IAAI,GACtB,IAAAG,cAAA,EAAMtB,YAAY,CAACL,cAAD,CAAlB,EAAoCwB,IAApC,CADsB,GAEtB,IAAAI,cAAA,EAAMvB,YAAY,CAACL,cAAD,CAAlB,EAAoC,IAAA6B,gBAAA,EAAQN,MAAR,CAApC,EAAqDlB,YAArD,CAFJ;EAIA,MAAMG,WAAW,GAAGkB,aAAa,CAAClB,WAAd,GAA4BL,YAAY,GAAG,CAA/D;EAEA,MAAM2B,gBAAgB,GAAG;IACvBlB,eADuB;IAEvBmB,KAAK,EAAEvB,WAFgB;IAGvBwB,MAAM,EAAExB,WAHe;IAIvByB,OAAO,EAAE9B;EAJc,CAAzB;EAOA,oBACE;IAAK,SAAS,EAAE+B,cAAA,CAAMC,WAAtB;IAAmC,KAAK,EAAEL;EAA1C,gBACE,6BAAC,iCAAD;IACE,IAAI,EAAG,MAAKT,QAAS,EADvB;IAEE,KAAK,EAAEI,kBAFT;IAGE,aAAWC,aAAa,CAACnB;EAH3B,EADF,CADF;AASD,CAhCY,CAAb;;AAkCAW,IAAI,CAACkB,SAAL,2CAAiB;EACff,QAAQ,EAAEgB,kBAAA,CAAUC,MAAV,CAAiBC,UADZ;EAEfjB,SAAS,EAAEe,kBAAA,CAAUC,MAFN;EAGf1B,eAAe,EAAEyB,kBAAA,CAAUC,MAHZ;EAIff,MAAM,EAAEc,kBAAA,CAAUG,KAAV,CAAgB,CAAC,GAAD,EAAM,GAAN,EAAW,IAAX,CAAhB,CAJO;EAKfhB,IAAI,EAAEa,kBAAA,CAAUI,KAAV,CAAgB;IACpBlC,MAAM,EAAEmC,iBADY;IAEpBlC,WAAW,EAAE6B,kBAAA,CAAUK;EAFH,CAAhB;AALS,CAAjB;eAWexB,I"}

package/lib/atom/icon/style.css

@@ -1,5 +1,4 @@
 .iconWrapper {
-  padding: 8px;
   border-radius: 8px;
   display: flex;
   align-items: center;