@coorpacademy/components 11.30.1 → 11.32.1-alpha.16

package/es/template/my-learning/index.js

@@ -0,0 +1,354 @@
+import _getOr from "lodash/fp/getOr";
+import React, { useCallback, useState, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { convert } from 'css-color-function';
+import style from './style.css';
+import Provider from '../../atom/provider';
+import Icon from '../../atom/icon';
+import Picture from '../../atom/picture';
+import ButtonLink from '../../atom/button-link';
+import ToolTip from '../../atom/tooltip';
+import SkillPickerModal from '../../molecule/skill-picker-modal';
+import ResponsiveLearningProfileRadarChart from '../../molecule/learning-profile-radar-chart';
+import SkillsChartSideInformationPanel from '../../molecule/skills-chart-side-information-panel';
+import LearnerSkillCard from '../../molecule/learner-skill-card';
+
+const ChangeSkillFocusButton = (props, context) => {
+  const [hovered, setHovered] = useState(false);
+  const {
+    onClick
+  } = props;
+  const {
+    skin,
+    translate
+  } = context;
+
+  const primarySkinColor = _getOr('#0061FF', 'common.primary', skin);
+
+  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);
+  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);
+  const buttonProps = {
+    customStyle: {
+      backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),
+      color: hovered ? '#FFFFFF' : primarySkinColor,
+      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'
+    },
+    onClick,
+    label: translate('change_skill_focus'),
+    'data-name': 'change-skill-focus-button',
+    icon: {
+      position: 'left',
+      faIcon: {
+        name: 'arrows-rotate',
+        backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),
+        color: hovered ? '#FFFFFF' : primarySkinColor,
+        size: 16
+      }
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    onMouseOver: handleMouseOver,
+    onMouseLeave: handleMouseLeave,
+    "data-name": "button-explore-wrapper"
+  }, /*#__PURE__*/React.createElement(ButtonLink, buttonProps));
+};
+
+ChangeSkillFocusButton.contextTypes = {
+  translate: Provider.childContextTypes.translate
+};
+ChangeSkillFocusButton.propTypes = process.env.NODE_ENV !== "production" ? {
+  onClick: PropTypes.func
+} : {};
+
+const FilterButton = (props, context) => {
+  const {
+    active,
+    filter,
+    skillTotal,
+    onClick
+  } = props;
+  const {
+    skin
+  } = context;
+
+  const primarySkinColor = _getOr('#0061FF', 'common.primary', skin);
+
+  const Content = useCallback(() => /*#__PURE__*/React.createElement("div", null, filter, /*#__PURE__*/React.createElement("span", {
+    className: active ? style.skillFilterNumber : style.skillFilterNumberInActive
+  }, skillTotal)), [filter, skillTotal, active]);
+  const buttonProps = {
+    customStyle: {
+      backgroundColor: active ? convert(`color(${primarySkinColor} a(0.07))`) : '#FFFFFF',
+      color: active ? primarySkinColor : '#9999A8',
+      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',
+      width: 'fit-content'
+    },
+    onClick,
+    content: /*#__PURE__*/React.createElement(Content, null),
+    'data-name': 'change-skill-focus-button'
+  };
+  return /*#__PURE__*/React.createElement(ButtonLink, buttonProps);
+};
+
+FilterButton.propTypes = process.env.NODE_ENV !== "production" ? {
+  active: PropTypes.bool,
+  filter: PropTypes.string,
+  skillTotal: PropTypes.number,
+  onClick: PropTypes.func
+} : {};
+
+const MyLearning = (props, context) => {
+  const {
+    skills,
+    selectedSkills,
+    skillsStats,
+    skillsLocales,
+    skillsFilters,
+    isLoading,
+    onSkillFocusConfirm,
+    onReviewSkill,
+    onExploreSkill
+  } = props;
+  const {
+    translate
+  } = context;
+  const [open, setOpen] = useState(false);
+  const [selectedSkillsList, setSelectedSkillsList] = useState([...selectedSkills]);
+  const [skillFocusSelected, setSkillFocusSelected] = useState(undefined);
+  const [activeFilter, setActiveFilter] = useState('all'); // const skillsMap = useMemo(() => {
+  //   const tempSkillsMap = {};
+  //   all.forEach(skill => (tempSkillsMap[skill.skillTitle] = {...skill, focus: false}));
+  //   return tempSkillsMap;
+  // }, [all]);
+  // const focusSkills = useMemo(() => skillList.filter(skill => skill.focus), [skillList]);
+
+  const skillsReviewReady = useMemo(() => {
+    return skills.filter(skill => skillsFilters[skill].review);
+  }, [skills, skillsFilters]);
+  const graphDatas = useMemo(() => {
+    const data = {};
+    selectedSkillsList.forEach(skill => data[skill] = skillsStats[skill].score);
+    return data;
+  }, [selectedSkillsList, skillsStats]);
+  const graphLegends = useMemo(() => {
+    const data = {};
+    selectedSkillsList.forEach(skill => data[skill] = skillsLocales[skill]);
+    return data;
+  }, [selectedSkillsList, skillsLocales]);
+  const filters = [{
+    name: 'all',
+    skills: skills
+  }, {
+    name: 'review',
+    skills: skillsReviewReady
+  }];
+  const coursedCompletedData = useMemo(() => skillFocusSelected ? skillsStats[skillFocusSelected].coursesCompleted : selectedSkillsList.reduce((sum, skill) => sum + skillsStats[skill].coursesCompleted, 0), [skillFocusSelected, skillsStats, selectedSkillsList, skillFocusSelected]);
+  const questionsAnsweredData = useMemo(() => skillFocusSelected ? skillsStats[skillFocusSelected].questionsAnswered : selectedSkillsList.reduce((sum, skill) => sum + skillsStats[skill].questionsAnswered, 0), [skillFocusSelected, skillsStats, selectedSkillsList, skillFocusSelected]);
+  const learningHoursData = useMemo(() => skillFocusSelected ? skillsStats[skillFocusSelected].learningHours : selectedSkillsList.reduce((sum, skill) => sum + skillsStats[skill].learningHours, 0), [skillFocusSelected, skillsStats, selectedSkillsList, skillFocusSelected]);
+  const skillChartPaneLegends = useMemo(() => translate('on', {
+    focusedSkill: skillFocusSelected ? skillsLocales[skillFocusSelected] : translate('focused_skills')
+  }), [translate, skillsLocales, skillFocusSelected]);
+  const skillChartPanelProps = [{
+    title: translate('courses_completed'),
+    value: coursedCompletedData,
+    legend: skillChartPaneLegends,
+    icon: {
+      iconName: 'book-open-cover',
+      backgroundColor: '#D9F4F7'
+    }
+  }, {
+    title: translate('questions_answered'),
+    value: questionsAnsweredData,
+    legend: skillChartPaneLegends,
+    icon: {
+      iconName: 'circle-question',
+      backgroundColor: '#FFDCD1'
+    }
+  }, {
+    title: translate('learning_hours'),
+    value: learningHoursData,
+    legend: skillChartPaneLegends,
+    icon: {
+      iconName: 'clock',
+      backgroundColor: '#FAD6DE'
+    }
+  }];
+  const handleOnDotClick = useCallback(skillRef => setSkillFocusSelected(skillRef), [setSkillFocusSelected]);
+  const handleOpenSkillPicker = useCallback(() => setOpen(true), [setOpen]);
+  const handleCloseSkillPicker = useCallback(() => setOpen(false), [setOpen]);
+  const handleConfirmSkillPicker = useCallback(focusSkillList => {
+    setSelectedSkillsList(focusSkillList);
+    onSkillFocusConfirm(focusSkillList);
+    setOpen(false);
+  }, [onSkillFocusConfirm, setSelectedSkillsList, setOpen]);
+  const TooltipContent = useCallback(() => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, translate('review_mode_tooltip_header'))), /*#__PURE__*/React.createElement("p", null, translate('review_mode_tooltip_content')), /*#__PURE__*/React.createElement("ol", null, /*#__PURE__*/React.createElement("li", null, translate('Choose 1 Skill')), /*#__PURE__*/React.createElement("li", null, translate('Answer 5 Questions')), /*#__PURE__*/React.createElement("li", null, translate('You have Infinite Lives')), /*#__PURE__*/React.createElement("li", null, translate('Get it all right')))), [translate]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.container
+  }, /*#__PURE__*/React.createElement(SkillPickerModal, {
+    skills: skills,
+    selectedSkills: selectedSkillsList,
+    skillsLocales: skillsLocales,
+    isOpen: open,
+    isLoading: isLoading,
+    onCancel: handleCloseSkillPicker,
+    onConfirm: handleConfirmSkillPicker,
+    onClose: handleCloseSkillPicker
+  }), /*#__PURE__*/React.createElement("div", {
+    className: style.skillFocusContainer
+  }, /*#__PURE__*/React.createElement("header", {
+    className: style.skillFocusHeader
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.skillFocusHeaderIcon
+  }, /*#__PURE__*/React.createElement(Icon, {
+    iconName: "bullseye-arrow",
+    backgroundColor: "#DDD1FF",
+    size: {
+      faSize: 20,
+      wrapperSize: 48
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: style.skillFocusHeaderContent
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.skillFocusHeaderTitle
+  }, translate('skill_focus')), /*#__PURE__*/React.createElement("div", {
+    className: style.skillFocusHeaderDescription
+  }, translate('skills_focus_description'))), selectedSkillsList.length > 0 ? /*#__PURE__*/React.createElement(ChangeSkillFocusButton, {
+    onClick: handleOpenSkillPicker
+  }) : null), selectedSkillsList.length > 0 ? /*#__PURE__*/React.createElement("div", {
+    className: style.skillFocusContent
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.radarContainer
+  }, /*#__PURE__*/React.createElement(ResponsiveLearningProfileRadarChart, {
+    totalDataset: 1,
+    height: 424,
+    width: 680,
+    data: graphDatas,
+    legend: graphLegends,
+    margin: {
+      top: 80
+    },
+    onClick: handleOnDotClick,
+    colors: [{
+      gradient: {
+        fill: ['#0062ffff', '#8000ff85'],
+        stroke: ['#0062ffff', '#8000FF']
+      },
+      percentage: {
+        color: '#0061FF',
+        background: 'linear-gradient(180deg, rgba(0, 97, 255, 0.10) 0%, rgba(147, 107, 255, 0.10) 100%)'
+      },
+      label: {
+        color: '#020202ff'
+      }
+    }]
+  })), /*#__PURE__*/React.createElement(SkillsChartSideInformationPanel, {
+    sidePanelItems: skillChartPanelProps
+  })) : /*#__PURE__*/React.createElement("div", {
+    className: style.skillFocusEmpty
+  }, /*#__PURE__*/React.createElement(Picture, {
+    className: style.img,
+    src: 'https://t4.ftcdn.net/jpg/01/43/23/83/360_F_143238306_lh0ap42wgot36y44WybfQpvsJB5A1CHc.jpg',
+    alt: 'demo'
+  }), /*#__PURE__*/React.createElement("div", {
+    className: style.skillFocusEmptyTitle
+  }, translate('skill_focus_empty_title')), /*#__PURE__*/React.createElement("div", {
+    className: style.skillFocusEmptyDescription
+  }, translate('skills_focus_empty_description')), /*#__PURE__*/React.createElement(ButtonLink, {
+    customStyle: {
+      width: '168px'
+    },
+    type: 'primary',
+    onClick: handleOpenSkillPicker,
+    label: translate('choose_your_focus')
+  }))), /*#__PURE__*/React.createElement("header", {
+    className: style.skillListHeader
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.skillListHeaderIcon
+  }, /*#__PURE__*/React.createElement(Icon, {
+    iconName: "dumbbell",
+    backgroundColor: "#FFF9D1",
+    size: {
+      faSize: 20,
+      wrapperSize: 48
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: style.skillListHeaderContent
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.skillListHeaderTitle
+  }, translate('skills')), /*#__PURE__*/React.createElement("div", {
+    className: style.skillListHeaderDescription
+  }, translate('Explore or review skills'), /*#__PURE__*/React.createElement(ToolTip, {
+    fontSize: 12,
+    iconContainerClassName: style.infoIconTooltip,
+    tooltipClassName: style.tooltip,
+    TooltipContent: TooltipContent,
+    closeToolTipInformationTextAriaLabel: translate('Press the escape key to close the information text')
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: style.skillFilterContainer
+  }, filters.map((filter, index) => {
+    function handleFilterClick() {
+      setActiveFilter(filter.name);
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      key: index
+    }, /*#__PURE__*/React.createElement(FilterButton, {
+      active: activeFilter === filter.name,
+      filter: translate(filter.name),
+      skillTotal: filter.skills.length,
+      onClick: handleFilterClick
+    }));
+  })), /*#__PURE__*/React.createElement("div", {
+    className: style.skillListContainer
+  }, skills.map((skill, index) => {
+    if (activeFilter === 'review' && !skillsFilters[skill].review) return null;
+
+    function handleReviewSkill() {
+      onReviewSkill(skill);
+    }
+
+    function handleExploreSkill() {
+      onExploreSkill(skill);
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      key: index
+    }, /*#__PURE__*/React.createElement(LearnerSkillCard, {
+      skillTitle: skillsLocales[skill],
+      focus: selectedSkills.includes(skill),
+      metrics: {
+        skillCourses: skillsStats[skill].courses,
+        skillQuestions: skillsStats[skill].questionsAnswered,
+        completedCourses: skillsStats[skill].coursesCompleted
+      },
+      review: skillsFilters[skill].review,
+      onReviewClick: handleReviewSkill,
+      onExploreClick: handleExploreSkill
+    }));
+  })));
+};
+
+MyLearning.contextTypes = {
+  translate: Provider.childContextTypes.translate
+};
+MyLearning.propTypes = process.env.NODE_ENV !== "production" ? {
+  skills: PropTypes.arrayOf(PropTypes.string),
+  selectedSkills: PropTypes.arrayOf(PropTypes.string),
+  skillsStats: PropTypes.objectOf(PropTypes.shape({
+    score: PropTypes.number,
+    courses: PropTypes.number,
+    coursesCompleted: PropTypes.number,
+    questionsAnswered: PropTypes.number,
+    learningHours: PropTypes.number
+  })),
+  skillsFilters: PropTypes.objectOf(PropTypes.shape({
+    review: PropTypes.boolean
+  })),
+  skillsLocales: PropTypes.objectOf(PropTypes.string),
+  isLoading: PropTypes.bool,
+  onSkillFocusConfirm: PropTypes.func,
+  onReviewSkill: PropTypes.func,
+  onExploreSkill: PropTypes.func
+} : {};
+export default MyLearning;
+//# sourceMappingURL=index.js.map

package/es/template/my-learning/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useCallback","useState","useMemo","PropTypes","convert","style","Provider","Icon","Picture","ButtonLink","ToolTip","SkillPickerModal","ResponsiveLearningProfileRadarChart","SkillsChartSideInformationPanel","LearnerSkillCard","ChangeSkillFocusButton","props","context","hovered","setHovered","onClick","skin","translate","primarySkinColor","handleMouseOver","handleMouseLeave","buttonProps","customStyle","backgroundColor","color","transition","label","icon","position","faIcon","name","size","contextTypes","childContextTypes","propTypes","func","FilterButton","active","filter","skillTotal","Content","skillFilterNumber","skillFilterNumberInActive","width","content","bool","string","number","MyLearning","skills","selectedSkills","skillsStats","skillsLocales","skillsFilters","isLoading","onSkillFocusConfirm","onReviewSkill","onExploreSkill","open","setOpen","selectedSkillsList","setSelectedSkillsList","skillFocusSelected","setSkillFocusSelected","undefined","activeFilter","setActiveFilter","skillsReviewReady","skill","review","graphDatas","data","forEach","score","graphLegends","filters","coursedCompletedData","coursesCompleted","reduce","sum","questionsAnsweredData","questionsAnswered","learningHoursData","learningHours","skillChartPaneLegends","focusedSkill","skillChartPanelProps","title","value","legend","iconName","handleOnDotClick","skillRef","handleOpenSkillPicker","handleCloseSkillPicker","handleConfirmSkillPicker","focusSkillList","TooltipContent","container","skillFocusContainer","skillFocusHeader","skillFocusHeaderIcon","faSize","wrapperSize","skillFocusHeaderContent","skillFocusHeaderTitle","skillFocusHeaderDescription","length","skillFocusContent","radarContainer","top","gradient","fill","stroke","percentage","background","skillFocusEmpty","img","skillFocusEmptyTitle","skillFocusEmptyDescription","skillListHeader","skillListHeaderIcon","skillListHeaderContent","skillListHeaderTitle","skillListHeaderDescription","infoIconTooltip","tooltip","skillFilterContainer","map","index","handleFilterClick","skillListContainer","handleReviewSkill","handleExploreSkill","includes","skillCourses","courses","skillQuestions","completedCourses","arrayOf","objectOf","shape","boolean"],"sources":["../../../src/template/my-learning/index.js"],"sourcesContent":["import React, {useCallback, useState, useEffect, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport {getOr} from 'lodash/fp';\nimport style from './style.css';\nimport Provider from '../../atom/provider';\nimport Icon from '../../atom/icon';\nimport Picture from '../../atom/picture';\nimport ButtonLink from '../../atom/button-link';\nimport ToolTip from '../../atom/tooltip';\nimport SkillPickerModal from '../../molecule/skill-picker-modal';\nimport ResponsiveLearningProfileRadarChart from '../../molecule/learning-profile-radar-chart';\nimport SkillsChartSideInformationPanel from '../../molecule/skills-chart-side-information-panel';\nimport LearnerSkillCard from '../../molecule/learner-skill-card';\n\nconst ChangeSkillFocusButton = (props, context) => {\n  const [hovered, setHovered] = useState(false);\n  const {onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = getOr('#0061FF', 'common.primary', skin);\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  const buttonProps = {\n    customStyle: {\n      backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n      color: hovered ? '#FFFFFF' : primarySkinColor,\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\n    onClick,\n    label: translate('change_skill_focus'),\n    'data-name': 'change-skill-focus-button',\n    icon: {\n      position: 'left',\n      faIcon: {\n        name: 'arrows-rotate',\n        backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n        color: hovered ? '#FFFFFF' : primarySkinColor,\n        size: 16\n      }\n    }\n  };\n\n  return (\n    <div\n      onMouseOver={handleMouseOver}\n      onMouseLeave={handleMouseLeave}\n      data-name=\"button-explore-wrapper\"\n    >\n      <ButtonLink {...buttonProps} />\n    </div>\n  );\n};\n\nChangeSkillFocusButton.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nChangeSkillFocusButton.propTypes = {\n  onClick: PropTypes.func\n};\n\nconst FilterButton = (props, context) => {\n  const {active, filter, skillTotal, onClick} = props;\n  const {skin} = context;\n  const primarySkinColor = getOr('#0061FF', 'common.primary', skin);\n\n  const Content = useCallback(\n    () => (\n      <div>\n        {filter}\n        <span className={active ? style.skillFilterNumber : style.skillFilterNumberInActive}>\n          {skillTotal}\n        </span>\n      </div>\n    ),\n    [filter, skillTotal, active]\n  );\n\n  const buttonProps = {\n    customStyle: {\n      backgroundColor: active ? convert(`color(${primarySkinColor} a(0.07))`) : '#FFFFFF',\n      color: active ? primarySkinColor : '#9999A8',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',\n      width: 'fit-content'\n    },\n    onClick,\n    content: <Content />,\n    'data-name': 'change-skill-focus-button'\n  };\n\n  return <ButtonLink {...buttonProps} />;\n};\n\nFilterButton.propTypes = {\n  active: PropTypes.bool,\n  filter: PropTypes.string,\n  skillTotal: PropTypes.number,\n  onClick: PropTypes.func\n};\n\nconst MyLearning = (props, context) => {\n  const {skills, selectedSkills, skillsStats, skillsLocales, skillsFilters, isLoading, onSkillFocusConfirm, onReviewSkill, onExploreSkill} = props;\n  const {translate} = context;\n  const [open, setOpen] = useState(false);\n  const [selectedSkillsList, setSelectedSkillsList] = useState([...selectedSkills]);\n  const [skillFocusSelected, setSkillFocusSelected] = useState(undefined);\n  const [activeFilter, setActiveFilter] = useState('all');\n\n  // const skillsMap = useMemo(() => {\n  //   const tempSkillsMap = {};\n  //   all.forEach(skill => (tempSkillsMap[skill.skillTitle] = {...skill, focus: false}));\n  //   return tempSkillsMap;\n  // }, [all]);\n  // const focusSkills = useMemo(() => skillList.filter(skill => skill.focus), [skillList]);\n\n  const skillsReviewReady = useMemo(() =>  {\n    return skills.filter(skill => skillsFilters[skill].review);\n  }, [skills, skillsFilters]);\n\n  const graphDatas = useMemo(() => {\n    const data = {};\n    selectedSkillsList.forEach((skill) => (data[skill] = skillsStats[skill].score));\n    return data;\n  }, [selectedSkillsList, skillsStats]);\n\n  const graphLegends = useMemo(() => {\n    const data = {};\n    selectedSkillsList.forEach((skill) => (data[skill] = skillsLocales[skill]));\n    return data;\n  }, [selectedSkillsList, skillsLocales]);\n\n  const filters = [\n    {\n      name: 'all',\n      skills: skills,\n    }, \n    {\n      name: 'review',\n      skills: skillsReviewReady,\n    }\n  ]\n\n  const coursedCompletedData = useMemo(\n    () =>\n      skillFocusSelected\n        ? skillsStats[skillFocusSelected].coursesCompleted\n        : selectedSkillsList.reduce((sum, skill) => sum + skillsStats[skill].coursesCompleted, 0),\n    [skillFocusSelected, skillsStats, selectedSkillsList, skillFocusSelected]\n  );\n\n  const questionsAnsweredData = useMemo(\n    () =>\n      skillFocusSelected\n        ? skillsStats[skillFocusSelected].questionsAnswered\n        : selectedSkillsList.reduce((sum, skill) => sum + skillsStats[skill].questionsAnswered, 0),\n    [skillFocusSelected, skillsStats, selectedSkillsList, skillFocusSelected]\n  );\n\n  const learningHoursData = useMemo(\n    () =>\n      skillFocusSelected\n        ? skillsStats[skillFocusSelected].learningHours\n        : selectedSkillsList.reduce((sum, skill) => sum + skillsStats[skill].learningHours, 0),\n    [skillFocusSelected, skillsStats, selectedSkillsList, skillFocusSelected]\n  );\n\n  const skillChartPaneLegends = useMemo(\n    () => translate('on', {focusedSkill: skillFocusSelected ? skillsLocales[skillFocusSelected] : translate('focused_skills')}),\n    [translate, skillsLocales, skillFocusSelected]\n  );\n  const skillChartPanelProps = [\n    {\n      title: translate('courses_completed'),\n      value: coursedCompletedData,\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'book-open-cover', backgroundColor: '#D9F4F7'}\n    },\n    {\n      title: translate('questions_answered'),\n      value: questionsAnsweredData,\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'circle-question', backgroundColor: '#FFDCD1'}\n    },\n    {\n      title: translate('learning_hours'),\n      value: learningHoursData,\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'clock', backgroundColor: '#FAD6DE'}\n    }\n  ];\n\n  const handleOnDotClick = useCallback(\n    skillRef => setSkillFocusSelected(skillRef),\n    [setSkillFocusSelected]\n  );\n  const handleOpenSkillPicker = useCallback(() => setOpen(true), [setOpen]);\n  const handleCloseSkillPicker = useCallback(() => setOpen(false), [setOpen]);\n  const handleConfirmSkillPicker = useCallback(\n    focusSkillList => {\n      setSelectedSkillsList(focusSkillList)\n      onSkillFocusConfirm(focusSkillList);\n      setOpen(false);\n    },\n    [onSkillFocusConfirm, setSelectedSkillsList, setOpen]\n  );\n\n  const TooltipContent = useCallback(\n    () => (\n      <div>\n        <div>\n          <b>{translate('review_mode_tooltip_header')}</b>\n        </div>\n        <p>{translate('review_mode_tooltip_content')}</p>\n        <ol>\n          <li>{translate('Choose 1 Skill')}</li>\n          <li>{translate('Answer 5 Questions')}</li>\n          <li>{translate('You have Infinite Lives')}</li>\n          <li>{translate('Get it all right')}</li>\n        </ol>\n      </div>\n    ),\n    [translate]\n  );\n\n  return (\n    <div className={style.container}>\n      <SkillPickerModal\n        skills={skills}\n        selectedSkills={selectedSkillsList}\n        skillsLocales={skillsLocales}\n        isOpen={open}\n        isLoading={isLoading}\n        onCancel={handleCloseSkillPicker}\n        onConfirm={handleConfirmSkillPicker}\n        onClose={handleCloseSkillPicker}\n      />\n      <div className={style.skillFocusContainer}>\n        <header className={style.skillFocusHeader}>\n          <div className={style.skillFocusHeaderIcon}>\n            <Icon\n              iconName=\"bullseye-arrow\"\n              backgroundColor=\"#DDD1FF\"\n              size={{faSize: 20, wrapperSize: 48}}\n            />\n          </div>\n          <div className={style.skillFocusHeaderContent}>\n            <div className={style.skillFocusHeaderTitle}>{translate('skill_focus')}</div>\n            <div className={style.skillFocusHeaderDescription}>\n              {translate('skills_focus_description')}\n            </div>\n          </div>\n          {selectedSkillsList.length > 0 ? (\n            <ChangeSkillFocusButton onClick={handleOpenSkillPicker} />\n          ) : null}\n        </header>\n        {selectedSkillsList.length > 0 ? (\n          <div className={style.skillFocusContent}>\n            <div className={style.radarContainer}>\n              <ResponsiveLearningProfileRadarChart\n                totalDataset={1}\n                height={424}\n                width={680}\n                data={graphDatas}\n                legend={graphLegends}\n                margin={{top: 80}}\n                onClick={handleOnDotClick}\n                colors={[\n                  {\n                    gradient: {\n                      fill: ['#0062ffff', '#8000ff85'],\n                      stroke: ['#0062ffff', '#8000FF']\n                    },\n                    percentage: {\n                      color: '#0061FF',\n                      background:\n                        'linear-gradient(180deg, rgba(0, 97, 255, 0.10) 0%, rgba(147, 107, 255, 0.10) 100%)'\n                    },\n                    label: {\n                      color: '#020202ff'\n                    }\n                  }\n                ]}\n              />\n            </div>\n            <SkillsChartSideInformationPanel sidePanelItems={skillChartPanelProps} />\n          </div>\n        ) : (\n          <div className={style.skillFocusEmpty}>\n            <Picture\n              className={style.img}\n              src={\n                'https://t4.ftcdn.net/jpg/01/43/23/83/360_F_143238306_lh0ap42wgot36y44WybfQpvsJB5A1CHc.jpg'\n              }\n              alt={'demo'}\n            />\n            <div className={style.skillFocusEmptyTitle}>{translate('skill_focus_empty_title')}</div>\n            <div className={style.skillFocusEmptyDescription}>\n              {translate('skills_focus_empty_description')}\n            </div>\n            <ButtonLink\n              customStyle={{\n                width: '168px'\n              }}\n              type={'primary'}\n              onClick={handleOpenSkillPicker}\n              label={translate('choose_your_focus')}\n            />\n          </div>\n        )}\n      </div>\n      <header className={style.skillListHeader}>\n        <div className={style.skillListHeaderIcon}>\n          <Icon\n            iconName=\"dumbbell\"\n            backgroundColor=\"#FFF9D1\"\n            size={{faSize: 20, wrapperSize: 48}}\n          />\n        </div>\n        <div className={style.skillListHeaderContent}>\n          <div className={style.skillListHeaderTitle}>{translate('skills')}</div>\n          <div className={style.skillListHeaderDescription}>\n            {translate('Explore or review skills')}\n            <ToolTip\n              fontSize={12}\n              iconContainerClassName={style.infoIconTooltip}\n              tooltipClassName={style.tooltip}\n              TooltipContent={TooltipContent}\n              closeToolTipInformationTextAriaLabel={translate(\n                'Press the escape key to close the information text'\n              )}\n            />\n          </div>\n        </div>\n      </header>\n      <div className={style.skillFilterContainer}>\n        {filters.map((filter, index) => {\n          function handleFilterClick() {\n            setActiveFilter(filter.name);\n          }\n\n          return (\n            <div key={index}>\n              <FilterButton\n                active={activeFilter === filter.name}\n                filter={translate(filter.name)}\n                skillTotal={filter.skills.length}\n                onClick={handleFilterClick}\n              />\n            </div>\n          );\n        })}\n      </div>\n      <div className={style.skillListContainer}>\n        {skills.map((skill, index) => {\n          if (activeFilter === 'review' && !skillsFilters[skill].review) return null;\n          function handleReviewSkill() {\n            onReviewSkill(skill);\n          }\n          function handleExploreSkill() {\n            onExploreSkill(skill);\n          }\n          return (\n            <div key={index}>\n              <LearnerSkillCard\n                skillTitle={skillsLocales[skill]}\n                focus={selectedSkills.includes(skill)}\n                metrics={{\n                  skillCourses: skillsStats[skill].courses,\n                  skillQuestions: skillsStats[skill].questionsAnswered,\n                  completedCourses: skillsStats[skill].coursesCompleted\n                }}\n                review={skillsFilters[skill].review}\n                onReviewClick={handleReviewSkill}\n                onExploreClick={handleExploreSkill}\n              />\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  );\n};\n\nMyLearning.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nMyLearning.propTypes = {\n  skills: PropTypes.arrayOf(PropTypes.string),\n  selectedSkills: PropTypes.arrayOf(PropTypes.string),\n  skillsStats: PropTypes.objectOf(\n    PropTypes.shape({\n      score: PropTypes.number,\n      courses: PropTypes.number,\n      coursesCompleted: PropTypes.number,\n      questionsAnswered: PropTypes.number,\n      learningHours: PropTypes.number,\n    })\n  ),\n  skillsFilters: PropTypes.objectOf(\n    PropTypes.shape({\n      review: PropTypes.boolean,\n    })\n  ),\n  skillsLocales: PropTypes.objectOf(PropTypes.string),\n  isLoading: PropTypes.bool,\n  onSkillFocusConfirm: PropTypes.func,\n  onReviewSkill: PropTypes.func,\n  onExploreSkill: PropTypes.func\n};\n\nexport default MyLearning;\n"],"mappings":"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"}

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

@@ -0,0 +1,179 @@
+@value colors: "../../variables/colors.css";
+@value breakpoints: "../../variables/breakpoints.css";
+@value tablet from breakpoints;
+@value mobile from breakpoints;
+@value cm_grey_100 from colors;
+@value cm_grey_500 from colors;
+
+.container {
+  font-family: "Gilroy";
+  font-style: normal;
+  margin-top: 48px;
+  margin-bottom: 48px;
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+  max-width: 1080px;
+}
+
+.skillFocusContainer {
+  border-radius: 16px;
+  border: 1px solid cm_grey_100;
+  overflow: hidden;
+  margin-bottom: 40px;
+}
+
+.skillFocusHeader,
+.skillListHeader {
+  padding: 24px;
+  display: flex;
+  position: relative;
+  border-bottom: 1px solid cm_grey_100;
+}
+
+.skillFocusHeaderIcon,
+.skillListHeaderIcon {
+  border-radius: 12px;
+  overflow: hidden;
+  margin-right: 12px;
+}
+
+.skillFocusHeaderContent,
+.skillListHeaderContent {
+  flex: 1;
+}
+
+.skillFocusHeaderTitle,
+.skillListHeaderTitle {
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 24px;
+}
+
+.skillFocusHeaderDescription,
+.skillListHeaderDescription {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  color: cm_grey_500;
+  display: flex;
+  align-items: center;
+}
+
+.skillFocusEmpty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 72px;
+}
+
+.skillFocusEmptyTitle {
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 28px;
+  margin-bottom: 8px;
+}
+
+.skillFocusEmptyDescription {
+  width: 502px;
+  text-align: center;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 22px;
+  margin-bottom: 32px;
+}
+
+.img {
+  width: 204px;
+  height: 200px;
+  margin-bottom: 32px;
+  border-radius: 50%;
+}
+
+.skillFocusContent {
+  display: flex;
+  padding: 24px;
+}
+
+.radarContainer {
+  width: 700px;
+  height: 444px;
+}
+
+.skillFilterContainer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 32px;
+}
+
+.skillFilterNumber,
+.skillFilterNumberInActive {
+  border-radius: 50%;
+  background-color: #D6E6FF;
+  color: #0061FF;
+  padding: 2px 4px;
+  margin-left: 8px;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 12px;
+}
+
+.skillFilterNumberInActive {
+  background-color: #EAEAEB;
+  color: #515161;
+}
+
+.infoIconTooltip {
+  background-color: transparent;
+}
+
+.tooltip {
+  padding: 8px 12px;
+  width: 238px;
+  color: #FFF;
+  font-size: 12px;
+  font-style: normal;
+  line-height: 16px;
+  right: -100px;
+  
+  ol {
+    padding: 14px;
+  }
+}
+
+.skillListHeader {
+  padding: 24px 0;
+  border: none;
+}
+
+.skillListContainer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+@media mobile {
+  .skillFocusContent {
+    flex-direction: column;
+  }
+
+  .radarContainer {
+    width: 370px;
+    height: 280px;
+    margin-bottom:48px;
+  }
+
+  .skillFilterContainer {
+    overflow-x: auto;
+  }
+
+  .skillListContainer {
+    align-items: center;
+    justify-content: center;
+  }
+}

package/es/variables/colors.d.ts

@@ -1,9 +1,9 @@
-declare type Colors = {
-    gray: string;
-    negative: string;
-    positive: string;
-    cm_grey_800: string;
+export declare const COLORS: {
+    readonly gray: "#EAEAEB";
+    readonly negative: "#ed3436";
+    readonly positive: "#35CC7F";
+    readonly cm_grey_800: "#171721";
+    readonly cm_primary_blue: "#0061FF";
 };
-export declare const COLORS: Colors;
-export {};
+export declare type Colors = typeof COLORS;
 //# sourceMappingURL=colors.d.ts.map

package/es/variables/colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/variables/colors.ts"],"names":[],"mappings":"AAAA,aAAK,MAAM,GAAG;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,MAKpB,CAAC"}
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/variables/colors.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;CAMT,CAAC;AAEX,oBAAY,MAAM,GAAG,OAAO,MAAM,CAAC"}

package/es/variables/colors.js

@@ -2,6 +2,7 @@ export const COLORS = {
   gray: '#EAEAEB',
   negative: '#ed3436',
   positive: '#35CC7F',
-  cm_grey_800: '#171721'
+  cm_grey_800: '#171721',
+  cm_primary_blue: '#0061FF'
 };
 //# sourceMappingURL=colors.js.map

package/es/variables/colors.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.js","names":["COLORS","gray","negative","positive","cm_grey_800"],"sources":["../../src/variables/colors.ts"],"sourcesContent":["type Colors = {\n  gray: string;\n  negative: string;\n  positive: string;\n  cm_grey_800: string;\n};\n\nexport const COLORS: Colors = {\n  gray: '#EAEAEB',\n  negative: '#ed3436',\n  positive: '#35CC7F',\n  cm_grey_800: '#171721'\n};\n"],"mappings":"AAOA,OAAO,MAAMA,MAAc,GAAG;EAC5BC,IAAI,EAAE,SADsB;EAE5BC,QAAQ,EAAE,SAFkB;EAG5BC,QAAQ,EAAE,SAHkB;EAI5BC,WAAW,EAAE;AAJe,CAAvB"}
+{"version":3,"file":"colors.js","names":["COLORS","gray","negative","positive","cm_grey_800","cm_primary_blue"],"sources":["../../src/variables/colors.ts"],"sourcesContent":["export const COLORS = {\n  gray: '#EAEAEB',\n  negative: '#ed3436',\n  positive: '#35CC7F',\n  cm_grey_800: '#171721',\n  cm_primary_blue: '#0061FF'\n} as const;\n\nexport type Colors = typeof COLORS;\n"],"mappings":"AAAA,OAAO,MAAMA,MAAM,GAAG;EACpBC,IAAI,EAAE,SADc;EAEpBC,QAAQ,EAAE,SAFU;EAGpBC,QAAQ,EAAE,SAHU;EAIpBC,WAAW,EAAE,SAJO;EAKpBC,eAAe,EAAE;AALG,CAAf"}

package/es/variables/theme.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.native.d.ts","sourceRoot":"","sources":["../../src/variables/theme.native.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAGvC,oBAAY,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE5F,eAAO,MAAM,sBAAsB,YAAY,CAAC;AAEhD,oBAAY,MAAM,GAAG;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,WAAW,EAAE,MAAM,CAAC;QACpB,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,EAAE,MAAM,CAAC;QACb,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,OAAO,EAAE;QACP,UAAU,EAAE,MAAM,CAAC;QACnB,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,oBAAY,KAAK,GAAG;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,MAAM,EAAE;QACN,MAAM,EAAE,MAAM,CAAC;QACf,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,CAAC;QACf,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;QACf,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,UAAU,EAAE;QACV,OAAO,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;QACjC,QAAQ,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;QAClC,IAAI,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;QAC9B,SAAS,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;KACpC,CAAC;IACF,QAAQ,EAAE;QACR,UAAU,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;QAClC,KAAK,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;QAC7B,MAAM,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;QAC9B,OAAO,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;QAC/B,KAAK,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;QAC7B,MAAM,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;QAC9B,OAAO,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;QAC/B,QAAQ,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;KACjC,CAAC;IACF,aAAa,EAAE;QACb,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;CACH,CAAC;AAEF,QAAA,MAAM,YAAY,EAAE,KAkEnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"theme.native.d.ts","sourceRoot":"","sources":["../../src/variables/theme.native.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAGvC,oBAAY,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE5F,eAAO,MAAM,sBAAsB,YAAY,CAAC;AAIhD,oBAAY,MAAM,GAAG;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,WAAW,EAAE,MAAM,CAAC;QACpB,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,EAAE,MAAM,CAAC;QACb,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,OAAO,EAAE;QACP,UAAU,EAAE,MAAM,CAAC;QACnB,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,oBAAY,KAAK,GAAG;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,MAAM,EAAE;QACN,MAAM,EAAE,MAAM,CAAC;QACf,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,CAAC;QACf,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;QACf,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,UAAU,EAAE;QACV,OAAO,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;QACjC,QAAQ,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;QAClC,IAAI,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;QAC9B,SAAS,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;KACpC,CAAC;IACF,QAAQ,EAAE;QACR,UAAU,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;QAClC,KAAK,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;QAC7B,MAAM,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;QAC9B,OAAO,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;QAC/B,KAAK,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;QAC7B,MAAM,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;QAC9B,OAAO,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;QAC/B,QAAQ,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;KACjC,CAAC;IACF,aAAa,EAAE;QACb,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;CACH,CAAC;AAEF,QAAA,MAAM,YAAY,EAAE,KAkEnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/es/variables/theme.native.js

@@ -1,5 +1,8 @@
 import { COLORS } from './colors';
 export const HTML_ANCHOR_TEXT_COLOR = '#002BDB';
+const {
+  cm_primary_blue
+} = COLORS;
 const defaultTheme = {
   colors: {
     border: 'rgba(0, 0, 0, 0.1)',
@@ -16,7 +19,7 @@ const defaultTheme = {
       primary: '#06265B',
       secondary: '#FFFFFF'
     },
-    cta: '#0061FF',
+    cta: cm_primary_blue,
     negative: COLORS.negative,
     positive: COLORS.positive,
     white: '#FFFFFF',