@coorpacademy/components 11.25.0 → 11.27.0

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,49 @@
+@value colors: "../../variables/colors.css";
+@value cm_primary_blue from colors;
+@value cm_grey_50 from colors;
+@value lightDark from colors;
+
+.tickWrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: end;
+    gap: 6px;
+    width: 100%;
+    height: 100%;
+    font-size: 14px;
+    font-family: 'Gilroy';
+    font-weight: 600;
+    padding: 0px 12px;
+    box-sizing: border-box;
+}
+
+.tickWrapperFocus {
+    background-color: cm_grey_50;
+    border-radius: 12px;
+    width: fit-content;
+}
+
+.tickValue {
+    padding: 4px;
+    border-radius: 12px;
+}
+
+.tickLabel {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: normal;
+    width: 100%;
+    width: fit-content;
+}
+
+.tooltip {
+    position: relative;
+    font-family: 'Gilroy';
+    font-weight: 600;
+    background-color: lightDark;
+    color: cm_grey_50;
+    padding: 4px 8px;
+    border-radius: 8px;
+    width: 100%;
+}

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

@@ -0,0 +1,145 @@
+import PropTypes from 'prop-types';
+export declare const learningProfileRadarChartPropTypes: {
+    data: PropTypes.Validator<{
+        [x: string]: NonNullable<number | (number | null | undefined)[] | null | undefined> | null | undefined;
+    }>;
+    totalDataset: PropTypes.Validator<number>;
+    onDotClick: PropTypes.Requireable<(...args: any[]) => any>;
+    colors: PropTypes.Requireable<(PropTypes.InferProps<{
+        gradient: PropTypes.Requireable<PropTypes.InferProps<{
+            fill: PropTypes.Requireable<(string | null | undefined)[]>;
+            stroke: PropTypes.Requireable<(string | null | undefined)[]>;
+        }>>;
+        percentage: PropTypes.Requireable<PropTypes.InferProps<{
+            color: PropTypes.Requireable<string>;
+            background: PropTypes.Requireable<string>;
+        }>>;
+        label: PropTypes.Requireable<PropTypes.InferProps<{
+            color: PropTypes.Requireable<string>;
+        }>>;
+    }> | null | undefined)[]>;
+    width: PropTypes.Requireable<number>;
+    height: PropTypes.Requireable<number>;
+};
+export declare const customDotPropTypes: {
+    cx: PropTypes.Requireable<number>;
+    cy: PropTypes.Requireable<number>;
+    payload: PropTypes.Requireable<PropTypes.InferProps<{
+        payload: PropTypes.Requireable<PropTypes.InferProps<{
+            value: PropTypes.Requireable<number>;
+            subject: PropTypes.Requireable<string>;
+        }>>;
+        name: PropTypes.Requireable<string>;
+    }>>;
+    onDotClick: PropTypes.Requireable<(...args: any[]) => any>;
+    index: PropTypes.Requireable<number>;
+    activeDot: PropTypes.Requireable<PropTypes.InferProps<{
+        label: PropTypes.Requireable<string>;
+        value: PropTypes.Requireable<number>;
+        key: PropTypes.Requireable<string>;
+    }>>;
+    dataKey: PropTypes.Requireable<string>;
+    stroke: PropTypes.Requireable<string>;
+};
+export declare const customTooltipPropTypes: {
+    active: PropTypes.Requireable<boolean>;
+    payload: PropTypes.Requireable<(PropTypes.InferProps<{
+        value: PropTypes.Requireable<number>;
+    }> | null | undefined)[]>;
+    label: PropTypes.Requireable<string>;
+};
+export declare const gradientPropTypes: {
+    type: PropTypes.Requireable<string>;
+    colors: PropTypes.Requireable<(string | null | undefined)[]>;
+};
+export declare type ColorType = {
+    gradient?: {
+        fill?: string[];
+        stroke?: string[];
+    };
+    percentage?: {
+        color?: string;
+        background?: string;
+    };
+    label?: {
+        color?: string;
+    };
+};
+export declare type LearningProfileRadarChartPropTypes = {
+    data: {
+        [ref: string]: number | number[];
+    };
+    legend: {
+        [ref: string]: string;
+    };
+    totalDataset: number;
+    onClick: (skillRef: string) => void;
+    colors?: ColorType[];
+    width?: number;
+    height?: number;
+};
+export declare type CustomDotPropTypes = {
+    cx: number;
+    cy: number;
+    payload: {
+        payload: {
+            value: number;
+            subject: string;
+        };
+        name: string;
+    };
+    onDotClick: (name: string) => void;
+    index: number;
+    activeDot?: {
+        label: string;
+        value: number;
+        key: string;
+    };
+    dataKey: string;
+    stroke: string;
+};
+export declare type CustomTooltipPropTypes = {
+    active: boolean;
+    payload: {
+        value: number;
+    }[];
+    label: string;
+};
+export declare type GradientPropTypes = {
+    type: string;
+    colors: string[];
+};
+export declare type TickType = {
+    offset: {
+        x: number;
+        y: number;
+    };
+    alignment: 'center' | 'start' | 'end';
+    margin?: 'auto';
+    marginLeft?: 'auto';
+    marginRight?: 'auto';
+};
+export declare type FormatedColorsType = {
+    gradient: {
+        fill: string[];
+        stroke: string[];
+    };
+    percentage: {
+        color: string;
+        background: string;
+    };
+    label: {
+        color: string;
+    };
+};
+export declare type FormatedDataType = {
+    subject: string;
+} & {
+    [key: string]: number | string;
+};
+export declare type ActiveDotType = {
+    key: string;
+    value: number | string;
+    label: string;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/learning-profile-radar-chart/types.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,54 @@
+import PropTypes from 'prop-types'; // PROPTYPES
+
+export const learningProfileRadarChartPropTypes = {
+  data: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number])).isRequired,
+  totalDataset: PropTypes.number.isRequired,
+  onDotClick: PropTypes.func,
+  colors: PropTypes.arrayOf(PropTypes.shape({
+    gradient: PropTypes.shape({
+      fill: PropTypes.arrayOf(PropTypes.string),
+      stroke: PropTypes.arrayOf(PropTypes.string)
+    }),
+    percentage: PropTypes.shape({
+      color: PropTypes.string,
+      background: PropTypes.string
+    }),
+    label: PropTypes.shape({
+      color: PropTypes.string
+    })
+  })),
+  width: PropTypes.number,
+  height: PropTypes.number
+};
+export const customDotPropTypes = {
+  cx: PropTypes.number,
+  cy: PropTypes.number,
+  payload: PropTypes.shape({
+    payload: PropTypes.shape({
+      value: PropTypes.number,
+      subject: PropTypes.string
+    }),
+    name: PropTypes.string
+  }),
+  onDotClick: PropTypes.func,
+  index: PropTypes.number,
+  activeDot: PropTypes.shape({
+    label: PropTypes.string,
+    value: PropTypes.number,
+    key: PropTypes.string
+  }),
+  dataKey: PropTypes.string,
+  stroke: PropTypes.string
+};
+export const customTooltipPropTypes = {
+  active: PropTypes.bool,
+  payload: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.number
+  })),
+  label: PropTypes.string
+};
+export const gradientPropTypes = {
+  type: PropTypes.string,
+  colors: PropTypes.arrayOf(PropTypes.string)
+}; // TYPES
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":["PropTypes","learningProfileRadarChartPropTypes","data","objectOf","oneOfType","arrayOf","number","isRequired","totalDataset","onDotClick","func","colors","shape","gradient","fill","string","stroke","percentage","color","background","label","width","height","customDotPropTypes","cx","cy","payload","value","subject","name","index","activeDot","key","dataKey","customTooltipPropTypes","active","bool","gradientPropTypes","type"],"sources":["../../../src/molecule/learning-profile-radar-chart/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\n\n// PROPTYPES\nexport const learningProfileRadarChartPropTypes = {\n  data: PropTypes.objectOf(\n    PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number])\n  ).isRequired,\n  totalDataset: PropTypes.number.isRequired,\n  onDotClick: PropTypes.func,\n  colors: PropTypes.arrayOf(\n    PropTypes.shape({\n      gradient: PropTypes.shape({\n        fill: PropTypes.arrayOf(PropTypes.string),\n        stroke: PropTypes.arrayOf(PropTypes.string)\n      }),\n      percentage: PropTypes.shape({\n        color: PropTypes.string,\n        background: PropTypes.string\n      }),\n      label: PropTypes.shape({\n        color: PropTypes.string\n      })\n    })\n  ),\n  width: PropTypes.number,\n  height: PropTypes.number\n};\n\nexport const customDotPropTypes = {\n  cx: PropTypes.number,\n  cy: PropTypes.number,\n  payload: PropTypes.shape({\n    payload: PropTypes.shape({\n      value: PropTypes.number,\n      subject: PropTypes.string\n    }),\n    name: PropTypes.string\n  }),\n  onDotClick: PropTypes.func,\n  index: PropTypes.number,\n  activeDot: PropTypes.shape({\n    label: PropTypes.string,\n    value: PropTypes.number,\n    key: PropTypes.string\n  }),\n  dataKey: PropTypes.string,\n  stroke: PropTypes.string\n};\n\nexport const customTooltipPropTypes = {\n  active: PropTypes.bool,\n  payload: PropTypes.arrayOf(\n    PropTypes.shape({\n      value: PropTypes.number\n    })\n  ),\n  label: PropTypes.string\n};\n\nexport const gradientPropTypes = {\n  type: PropTypes.string,\n  colors: PropTypes.arrayOf(PropTypes.string)\n};\n\n// TYPES\nexport type ColorType = {\n  gradient?: {\n    fill?: string[];\n    stroke?: string[];\n  };\n  percentage?: {\n    color?: string;\n    background?: string;\n  };\n  label?: {\n    color?: string;\n  };\n};\n\nexport type LearningProfileRadarChartPropTypes = {\n  data: {\n    [ref: string]: number | number[];\n  };\n  legend: {\n    [ref: string]: string;\n  };\n  totalDataset: number;\n  onClick: (skillRef: string) => void;\n  colors?: ColorType[];\n  width?: number;\n  height?: number;\n};\n\nexport type CustomDotPropTypes = {\n  cx: number;\n  cy: number;\n  payload: {\n    payload: {\n      value: number;\n      subject: string;\n    };\n    name: string;\n  };\n  onDotClick: (name: string) => void;\n  index: number;\n  activeDot?: {\n    label: string;\n    value: number;\n    key: string;\n  };\n  dataKey: string;\n  stroke: string;\n};\n\nexport type CustomTooltipPropTypes = {\n  active: boolean;\n  payload: {\n    value: number;\n  }[];\n  label: string;\n};\n\nexport type GradientPropTypes = {\n  type: string;\n  colors: string[];\n};\n\nexport type TickType = {\n  offset: {x: number; y: number};\n  alignment: 'center' | 'start' | 'end';\n  margin?: 'auto';\n  marginLeft?: 'auto';\n  marginRight?: 'auto';\n};\n\nexport type FormatedColorsType = {\n  gradient: {\n    fill: string[];\n    stroke: string[];\n  };\n  percentage: {\n    color: string;\n    background: string;\n  };\n  label: {\n    color: string;\n  };\n};\n\nexport type FormatedDataType = {\n  subject: string;\n} & {\n  [key: string]: number | string;\n};\n\nexport type ActiveDotType = {\n  key: string;\n  value: number | string;\n  label: string;\n};\n"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,YAAtB,C,CAEA;;AACA,OAAO,MAAMC,kCAAkC,GAAG;EAChDC,IAAI,EAAEF,SAAS,CAACG,QAAV,CACJH,SAAS,CAACI,SAAV,CAAoB,CAACJ,SAAS,CAACK,OAAV,CAAkBL,SAAS,CAACM,MAA5B,CAAD,EAAsCN,SAAS,CAACM,MAAhD,CAApB,CADI,EAEJC,UAH8C;EAIhDC,YAAY,EAAER,SAAS,CAACM,MAAV,CAAiBC,UAJiB;EAKhDE,UAAU,EAAET,SAAS,CAACU,IAL0B;EAMhDC,MAAM,EAAEX,SAAS,CAACK,OAAV,CACNL,SAAS,CAACY,KAAV,CAAgB;IACdC,QAAQ,EAAEb,SAAS,CAACY,KAAV,CAAgB;MACxBE,IAAI,EAAEd,SAAS,CAACK,OAAV,CAAkBL,SAAS,CAACe,MAA5B,CADkB;MAExBC,MAAM,EAAEhB,SAAS,CAACK,OAAV,CAAkBL,SAAS,CAACe,MAA5B;IAFgB,CAAhB,CADI;IAKdE,UAAU,EAAEjB,SAAS,CAACY,KAAV,CAAgB;MAC1BM,KAAK,EAAElB,SAAS,CAACe,MADS;MAE1BI,UAAU,EAAEnB,SAAS,CAACe;IAFI,CAAhB,CALE;IASdK,KAAK,EAAEpB,SAAS,CAACY,KAAV,CAAgB;MACrBM,KAAK,EAAElB,SAAS,CAACe;IADI,CAAhB;EATO,CAAhB,CADM,CANwC;EAqBhDM,KAAK,EAAErB,SAAS,CAACM,MArB+B;EAsBhDgB,MAAM,EAAEtB,SAAS,CAACM;AAtB8B,CAA3C;AAyBP,OAAO,MAAMiB,kBAAkB,GAAG;EAChCC,EAAE,EAAExB,SAAS,CAACM,MADkB;EAEhCmB,EAAE,EAAEzB,SAAS,CAACM,MAFkB;EAGhCoB,OAAO,EAAE1B,SAAS,CAACY,KAAV,CAAgB;IACvBc,OAAO,EAAE1B,SAAS,CAACY,KAAV,CAAgB;MACvBe,KAAK,EAAE3B,SAAS,CAACM,MADM;MAEvBsB,OAAO,EAAE5B,SAAS,CAACe;IAFI,CAAhB,CADc;IAKvBc,IAAI,EAAE7B,SAAS,CAACe;EALO,CAAhB,CAHuB;EAUhCN,UAAU,EAAET,SAAS,CAACU,IAVU;EAWhCoB,KAAK,EAAE9B,SAAS,CAACM,MAXe;EAYhCyB,SAAS,EAAE/B,SAAS,CAACY,KAAV,CAAgB;IACzBQ,KAAK,EAAEpB,SAAS,CAACe,MADQ;IAEzBY,KAAK,EAAE3B,SAAS,CAACM,MAFQ;IAGzB0B,GAAG,EAAEhC,SAAS,CAACe;EAHU,CAAhB,CAZqB;EAiBhCkB,OAAO,EAAEjC,SAAS,CAACe,MAjBa;EAkBhCC,MAAM,EAAEhB,SAAS,CAACe;AAlBc,CAA3B;AAqBP,OAAO,MAAMmB,sBAAsB,GAAG;EACpCC,MAAM,EAAEnC,SAAS,CAACoC,IADkB;EAEpCV,OAAO,EAAE1B,SAAS,CAACK,OAAV,CACPL,SAAS,CAACY,KAAV,CAAgB;IACde,KAAK,EAAE3B,SAAS,CAACM;EADH,CAAhB,CADO,CAF2B;EAOpCc,KAAK,EAAEpB,SAAS,CAACe;AAPmB,CAA/B;AAUP,OAAO,MAAMsB,iBAAiB,GAAG;EAC/BC,IAAI,EAAEtC,SAAS,CAACe,MADe;EAE/BJ,MAAM,EAAEX,SAAS,CAACK,OAAV,CAAkBL,SAAS,CAACe,MAA5B;AAFuB,CAA1B,C,CAKP"}

package/es/util/check-is-mobile.d.ts

@@ -0,0 +1,2 @@
+export function isMobile(userAgent: any): any;
+//# sourceMappingURL=check-is-mobile.d.ts.map

package/es/util/check-is-mobile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"check-is-mobile.d.ts","sourceRoot":"","sources":["../../src/util/check-is-mobile.js"],"names":[],"mappings":"AAEO,8CAC6D"}

package/es/util/check-is-mobile.js

@@ -0,0 +1,3 @@
+const MOBILE_USER_AGENT_REGEX = /iphone|ipad|ipod|android|blackberry|windows phone/g;
+export const isMobile = userAgent => userAgent && MOBILE_USER_AGENT_REGEX.test(userAgent.toLowerCase());
+//# sourceMappingURL=check-is-mobile.js.map

package/es/util/check-is-mobile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"check-is-mobile.js","names":["MOBILE_USER_AGENT_REGEX","isMobile","userAgent","test","toLowerCase"],"sources":["../../src/util/check-is-mobile.js"],"sourcesContent":["const MOBILE_USER_AGENT_REGEX = /iphone|ipad|ipod|android|blackberry|windows phone/g;\n\nexport const isMobile = userAgent =>\n  userAgent && MOBILE_USER_AGENT_REGEX.test(userAgent.toLowerCase());\n"],"mappings":"AAAA,MAAMA,uBAAuB,GAAG,oDAAhC;AAEA,OAAO,MAAMC,QAAQ,GAAGC,SAAS,IAC/BA,SAAS,IAAIF,uBAAuB,CAACG,IAAxB,CAA6BD,SAAS,CAACE,WAAV,EAA7B,CADR"}

package/lib/atom/gradient/index.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/atom/gradient/index.native.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACvC,OAAO,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAIvC,oBAAY,KAAK,GAAG;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACtB,oBAAoB,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;CACvE,CAAC;AAEF,QAAA,MAAM,QAAQ,qFAQX,KAAK,gBA+BP,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/atom/gradient/index.native.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACvC,OAAO,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAIvC,oBAAY,KAAK,GAAG;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACtB,oBAAoB,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;CACvE,CAAC;AAEF,QAAA,MAAM,QAAQ,qFAQX,KAAK,gBAkCP,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/atom/gradient/index.native.js

@@ -7,7 +7,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactNativeLinearGradient = _interopRequireDefault(require("react-native-linear-gradient"));
 
-var _color = _interopRequireDefault(require("color"));
+var _colorjs = _interopRequireDefault(require("colorjs.io"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -23,12 +23,10 @@ const Gradient = ({
   let calculatedColors = colors;
 
   if (colors.length === 1) {
-    const {
-      r,
-      g,
-      b
-    } = (0, _color.default)(colors[0]).object();
-    calculatedColors = transparencyPosition === 'top' ? [`rgba(${r}, ${g}, ${b}, 0)`, colors[0], colors[0]] : [colors[0], colors[0], `rgba(${r}, ${g}, ${b}, 0)`];
+    const [raw] = colors;
+    const transparent = new _colorjs.default(raw).to('srgb');
+    transparent.alpha = 0;
+    calculatedColors = transparencyPosition === 'top' ? [transparent.toString(), raw, raw] : [raw, raw, transparent.toString()];
   }
 
   const _style = [];

package/lib/atom/gradient/index.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.js","names":["Gradient","children","colors","transparencyPosition","height","style","testID","pointerEvents","calculatedColors","length","r","g","b","Color","object","_style","push"],"sources":["../../../src/atom/gradient/index.native.tsx"],"sourcesContent":["import React, {ReactNode} from 'react';\nimport {ViewStyle} from 'react-native';\nimport LinearGradient from 'react-native-linear-gradient';\nimport Color from 'color';\n\nexport type Props = {\n  children?: ReactNode;\n  colors: Array<string>;\n  transparencyPosition?: 'top' | 'bottom';\n  height?: number;\n  style?: ViewStyle | ViewStyle[];\n  testID?: string;\n  pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only' | undefined;\n};\n\nconst Gradient = ({\n  children,\n  colors,\n  transparencyPosition = 'top',\n  height,\n  style,\n  testID,\n  pointerEvents\n}: Props) => {\n  let calculatedColors = colors;\n  if (colors.length === 1) {\n    const {r, g, b} = Color(colors[0]).object();\n    calculatedColors =\n      transparencyPosition === 'top'\n        ? [`rgba(${r}, ${g}, ${b}, 0)`, colors[0], colors[0]]\n        : [colors[0], colors[0], `rgba(${r}, ${g}, ${b}, 0)`];\n  }\n\n  const _style = [];\n\n  if (style) {\n    _style.push(style);\n  }\n  if (height) {\n    _style.push({height});\n  }\n\n  return (\n    (\n      <LinearGradient\n        colors={calculatedColors}\n        style={_style}\n        pointerEvents={pointerEvents}\n        testID={testID}\n      >\n        {children}\n      </LinearGradient>\n    ) || null\n  );\n};\n\nexport default Gradient;\n"],"mappings":";;;;;AAAA;;AAEA;;AACA;;;;AAYA,MAAMA,QAAQ,GAAG,CAAC;EAChBC,QADgB;EAEhBC,MAFgB;EAGhBC,oBAAoB,GAAG,KAHP;EAIhBC,MAJgB;EAKhBC,KALgB;EAMhBC,MANgB;EAOhBC;AAPgB,CAAD,KAQJ;EACX,IAAIC,gBAAgB,GAAGN,MAAvB;;EACA,IAAIA,MAAM,CAACO,MAAP,KAAkB,CAAtB,EAAyB;IACvB,MAAM;MAACC,CAAD;MAAIC,CAAJ;MAAOC;IAAP,IAAY,IAAAC,cAAA,EAAMX,MAAM,CAAC,CAAD,CAAZ,EAAiBY,MAAjB,EAAlB;IACAN,gBAAgB,GACdL,oBAAoB,KAAK,KAAzB,GACI,CAAE,QAAOO,CAAE,KAAIC,CAAE,KAAIC,CAAE,MAAvB,EAA8BV,MAAM,CAAC,CAAD,CAApC,EAAyCA,MAAM,CAAC,CAAD,CAA/C,CADJ,GAEI,CAACA,MAAM,CAAC,CAAD,CAAP,EAAYA,MAAM,CAAC,CAAD,CAAlB,EAAwB,QAAOQ,CAAE,KAAIC,CAAE,KAAIC,CAAE,MAA7C,CAHN;EAID;;EAED,MAAMG,MAAM,GAAG,EAAf;;EAEA,IAAIV,KAAJ,EAAW;IACTU,MAAM,CAACC,IAAP,CAAYX,KAAZ;EACD;;EACD,IAAID,MAAJ,EAAY;IACVW,MAAM,CAACC,IAAP,CAAY;MAACZ;IAAD,CAAZ;EACD;;EAED,OACE,aACE,6BAAC,kCAAD;IACE,MAAM,EAAEI,gBADV;IAEE,KAAK,EAAEO,MAFT;IAGE,aAAa,EAAER,aAHjB;IAIE,MAAM,EAAED;EAJV,GAMGL,QANH,CADF,IASK,IAVP;AAYD,CAvCD;;eAyCeD,Q"}
+{"version":3,"file":"index.native.js","names":["Gradient","children","colors","transparencyPosition","height","style","testID","pointerEvents","calculatedColors","length","raw","transparent","Color","to","alpha","toString","_style","push"],"sources":["../../../src/atom/gradient/index.native.tsx"],"sourcesContent":["import React, {ReactNode} from 'react';\nimport {ViewStyle} from 'react-native';\nimport LinearGradient from 'react-native-linear-gradient';\nimport Color from 'colorjs.io';\n\nexport type Props = {\n  children?: ReactNode;\n  colors: Array<string>;\n  transparencyPosition?: 'top' | 'bottom';\n  height?: number;\n  style?: ViewStyle | ViewStyle[];\n  testID?: string;\n  pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only' | undefined;\n};\n\nconst Gradient = ({\n  children,\n  colors,\n  transparencyPosition = 'top',\n  height,\n  style,\n  testID,\n  pointerEvents\n}: Props) => {\n  let calculatedColors = colors;\n  if (colors.length === 1) {\n    const [raw] = colors;\n    const transparent = new Color(raw).to('srgb');\n    transparent.alpha = 0;\n\n    calculatedColors =\n      transparencyPosition === 'top'\n        ? [transparent.toString(), raw, raw]\n        : [raw, raw, transparent.toString()];\n  }\n\n  const _style = [];\n\n  if (style) {\n    _style.push(style);\n  }\n  if (height) {\n    _style.push({height});\n  }\n\n  return (\n    (\n      <LinearGradient\n        colors={calculatedColors}\n        style={_style}\n        pointerEvents={pointerEvents}\n        testID={testID}\n      >\n        {children}\n      </LinearGradient>\n    ) || null\n  );\n};\n\nexport default Gradient;\n"],"mappings":";;;;;AAAA;;AAEA;;AACA;;;;AAYA,MAAMA,QAAQ,GAAG,CAAC;EAChBC,QADgB;EAEhBC,MAFgB;EAGhBC,oBAAoB,GAAG,KAHP;EAIhBC,MAJgB;EAKhBC,KALgB;EAMhBC,MANgB;EAOhBC;AAPgB,CAAD,KAQJ;EACX,IAAIC,gBAAgB,GAAGN,MAAvB;;EACA,IAAIA,MAAM,CAACO,MAAP,KAAkB,CAAtB,EAAyB;IACvB,MAAM,CAACC,GAAD,IAAQR,MAAd;IACA,MAAMS,WAAW,GAAG,IAAIC,gBAAJ,CAAUF,GAAV,EAAeG,EAAf,CAAkB,MAAlB,CAApB;IACAF,WAAW,CAACG,KAAZ,GAAoB,CAApB;IAEAN,gBAAgB,GACdL,oBAAoB,KAAK,KAAzB,GACI,CAACQ,WAAW,CAACI,QAAZ,EAAD,EAAyBL,GAAzB,EAA8BA,GAA9B,CADJ,GAEI,CAACA,GAAD,EAAMA,GAAN,EAAWC,WAAW,CAACI,QAAZ,EAAX,CAHN;EAID;;EAED,MAAMC,MAAM,GAAG,EAAf;;EAEA,IAAIX,KAAJ,EAAW;IACTW,MAAM,CAACC,IAAP,CAAYZ,KAAZ;EACD;;EACD,IAAID,MAAJ,EAAY;IACVY,MAAM,CAACC,IAAP,CAAY;MAACb;IAAD,CAAZ;EACD;;EAED,OACE,aACE,6BAAC,kCAAD;IACE,MAAM,EAAEI,gBADV;IAEE,KAAK,EAAEQ,MAFT;IAGE,aAAa,EAAET,aAHjB;IAIE,MAAM,EAAED;EAJV,GAMGL,QANH,CADF,IASK,IAVP;AAYD,CA1CD;;eA4CeD,Q"}

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

@@ -0,0 +1,6 @@
+export const DEFAULT_ICON_COLOR: "hsl(0, 0%, 32%)";
+export function getForegroundColor(backgroundColor: any): string;
+export default Icon;
+declare const Icon: React.NamedExoticComponent<object>;
+import React from "react";
+//# sourceMappingURL=index.d.ts.map

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

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

package/lib/atom/icon/index.js

@@ -0,0 +1,92 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getForegroundColor = exports.default = exports.DEFAULT_ICON_COLOR = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactFontawesome = require("@fortawesome/react-fontawesome");
+
+var _proSolidSvgIcons = require("@fortawesome/pro-solid-svg-icons");
+
+var _fontawesomeSvgCore = require("@fortawesome/fontawesome-svg-core");
+
+var _toLower = _interopRequireDefault(require("lodash/fp/toLower"));
+
+var _merge = _interopRequireDefault(require("lodash/fp/merge"));
+
+var _getOr = _interopRequireDefault(require("lodash/fp/getOr"));
+
+var _colorjs = _interopRequireDefault(require("colorjs.io"));
+
+var _style = _interopRequireDefault(require("./style.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+_fontawesomeSvgCore.library.add(_proSolidSvgIcons.fas);
+
+const DEFAULT_PRESET = 'm';
+const ICON_LUMINOSITY = 32;
+const DEFAULT_WRAPPER_SIZE = 40;
+const DEFAULT_ICON_COLOR = 'hsl(0, 0%, 32%)';
+exports.DEFAULT_ICON_COLOR = DEFAULT_ICON_COLOR;
+const SIZE_CONFIGS = {
+  s: {
+    faSize: 'sm',
+    wrapperSize: 32
+  },
+  m: {
+    faSize: 'lg',
+    wrapperSize: DEFAULT_WRAPPER_SIZE
+  },
+  xl: {
+    faSize: 'xl',
+    wrapperSize: 48
+  }
+};
+
+const getForegroundColor = backgroundColor => new _colorjs.default(backgroundColor).to('hsl').set({
+  l: ICON_LUMINOSITY
+}).toString();
+
+exports.getForegroundColor = getForegroundColor;
+
+const Icon = /*#__PURE__*/_react.default.memo(function Icon({
+  iconName,
+  iconColor,
+  backgroundColor,
+  preset = DEFAULT_PRESET,
+  size
+}) {
+  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 iconWrapperStyle = {
+    backgroundColor,
+    width: effectiveSize.wrapperSize,
+    height: effectiveSize.wrapperSize
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.iconWrapper,
+    style: iconWrapperStyle
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: `fa-${iconName}`,
+    color: effectiveIconColor,
+    size: effectiveSize.faSize
+  }));
+});
+
+Icon.propTypes = process.env.NODE_ENV !== "production" ? {
+  iconName: _propTypes.default.string.isRequired,
+  iconColor: _propTypes.default.string,
+  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']),
+    wrapperSize: _propTypes.default.number
+  })
+} : {};
+var _default = Icon;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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"}

package/lib/atom/icon/style.css

@@ -0,0 +1,7 @@
+.iconWrapper {
+  padding: 8px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/lib/globals.d.js.map

@@ -1 +1 @@
-{"version":3,"file":"globals.d.js","names":[],"sources":["../src/globals.d.ts"],"sourcesContent":["declare module '@coorpacademy/nova-icons';\ndeclare module '@coorpacademy/react-native-slider';\ndeclare module '@react-native-community/blur';\ndeclare module '@coorpacademy/translate';\ndeclare module 'browser-env';\ndeclare module 'react-native/*';\ndeclare module 'color';\ndeclare module 'css-color-function';\ndeclare module 'classnames';\ndeclare module '*.css';\n"],"mappings":""}
+{"version":3,"file":"globals.d.js","names":[],"sources":["../src/globals.d.ts"],"sourcesContent":["declare module '@coorpacademy/nova-icons';\ndeclare module '@coorpacademy/react-native-slider';\ndeclare module '@react-native-community/blur';\ndeclare module '@coorpacademy/translate';\ndeclare module 'browser-env';\ndeclare module 'react-native/*';\ndeclare module 'css-color-function';\ndeclare module 'classnames';\ndeclare module '*.css';\n"],"mappings":""}

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

@@ -148,10 +148,6 @@
     font-size: 16px;
     line-height: 19px;
   }
-  
-  .cta {
-    max-width: 175px;
-  }
 }
 
 @media mobile {
@@ -162,6 +158,8 @@
 
   .banner {
     justify-content: center;
+    padding-right: 24px;
+    padding-left: 24px;
   }
 
   .right {
@@ -183,7 +181,7 @@
   }
 
   .cta {
-    max-width: 150px;
+    margin-top: 12px;
   }
 }
 

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

@@ -0,0 +1,57 @@
+/// <reference types="react" />
+import { FormatedDataType, LearningProfileRadarChartPropTypes } from './types';
+export declare const formatData: (legend: {
+    [ref: string]: string;
+}, data_: LearningProfileRadarChartPropTypes['data']) => FormatedDataType[];
+export declare const LearningProfileRadarChart: {
+    ({ data, legend, totalDataset, colors: colorsProps, onClick, width, height }: LearningProfileRadarChartPropTypes): JSX.Element;
+    propTypes: {
+        data: import("prop-types").Validator<{
+            [x: string]: NonNullable<number | (number | null | undefined)[] | null | undefined> | null | undefined;
+        }>;
+        totalDataset: import("prop-types").Validator<number>;
+        onDotClick: import("prop-types").Requireable<(...args: any[]) => any>;
+        colors: import("prop-types").Requireable<(import("prop-types").InferProps<{
+            gradient: import("prop-types").Requireable<import("prop-types").InferProps<{
+                fill: import("prop-types").Requireable<(string | null | undefined)[]>;
+                stroke: import("prop-types").Requireable<(string | null | undefined)[]>;
+            }>>;
+            percentage: import("prop-types").Requireable<import("prop-types").InferProps<{
+                color: import("prop-types").Requireable<string>;
+                background: import("prop-types").Requireable<string>;
+            }>>;
+            label: import("prop-types").Requireable<import("prop-types").InferProps<{
+                color: import("prop-types").Requireable<string>;
+            }>>;
+        }> | null | undefined)[]>;
+        width: import("prop-types").Requireable<number>;
+        height: import("prop-types").Requireable<number>;
+    };
+};
+declare const ResponsiveLearningProfileRadarChart: {
+    (props: LearningProfileRadarChartPropTypes): JSX.Element;
+    propTypes: {
+        data: import("prop-types").Validator<{
+            [x: string]: NonNullable<number | (number | null | undefined)[] | null | undefined> | null | undefined;
+        }>;
+        totalDataset: import("prop-types").Validator<number>;
+        onDotClick: import("prop-types").Requireable<(...args: any[]) => any>;
+        colors: import("prop-types").Requireable<(import("prop-types").InferProps<{
+            gradient: import("prop-types").Requireable<import("prop-types").InferProps<{
+                fill: import("prop-types").Requireable<(string | null | undefined)[]>;
+                stroke: import("prop-types").Requireable<(string | null | undefined)[]>;
+            }>>;
+            percentage: import("prop-types").Requireable<import("prop-types").InferProps<{
+                color: import("prop-types").Requireable<string>;
+                background: import("prop-types").Requireable<string>;
+            }>>;
+            label: import("prop-types").Requireable<import("prop-types").InferProps<{
+                color: import("prop-types").Requireable<string>;
+            }>>;
+        }> | null | undefined)[]>;
+        width: import("prop-types").Requireable<number>;
+        height: import("prop-types").Requireable<number>;
+    };
+};
+export default ResponsiveLearningProfileRadarChart;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}