@coorpacademy/components 11.30.1 → 11.32.0

package/es/molecule/learner-skill-card/index.js

@@ -0,0 +1,159 @@
+import _getOr from "lodash/fp/getOr";
+import _get from "lodash/fp/get";
+import React, { useCallback, useState } from 'react';
+import { convert } from 'css-color-function';
+import PropTypes from 'prop-types';
+import Icon from '../../atom/icon';
+import ButtonLink from '../../atom/button-link';
+import Provider from '../../atom/provider';
+import style from './style.css';
+
+const LearnerSkillCard = (props, context) => {
+  const {
+    'aria-label': ariaLabel,
+    skillTitle,
+    skillAriaLabel,
+    metrics,
+    onReviewClick,
+    onExploreClick
+  } = props;
+  const {
+    skillCourses,
+    skillQuestions,
+    completedCourses = 0
+  } = metrics;
+  const {
+    skin,
+    translate
+  } = context;
+  const [hovered, setHovered] = useState(false);
+
+  const primarySkinColor = _getOr('#0061FF', 'common.primary', skin);
+
+  const reviewLocale = translate('Review');
+  const exploreLocale = translate('Explore');
+  const coursesLocale = translate('courses');
+  const questionsLocale = translate('questions');
+  const skillFocusLocale = translate('skill_focus');
+  const coursesCompletedLocale = translate('courses_completed');
+  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);
+  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);
+  const buttonReviewProps = {
+    customStyle: {
+      backgroundColor: '#FFF',
+      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'
+    },
+    onReviewClick,
+    'aria-label': `${skillTitle}, ${reviewLocale}`,
+    label: reviewLocale,
+    'data-name': 'learner-skill-card-review-button'
+  };
+  const buttonExploreProps = {
+    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'
+    },
+    onExploreClick,
+    'aria-label': `${skillTitle}, ${exploreLocale}`,
+    label: exploreLocale,
+    'data-name': 'learner-skill-card-explore-button',
+    icon: {
+      position: 'left',
+      faIcon: {
+        name: 'compass',
+        backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),
+        color: hovered ? '#FFFFFF' : primarySkinColor,
+        size: 16
+      }
+    }
+  };
+  const completedPercentage = skillCourses && Number.parseInt(completedCourses / skillCourses * 100);
+  const ProgressBar = useCallback(() => {
+    if (!skillCourses) return null;
+    const progressBarColor = '#3EC483';
+    const inlineProgressValueStyle = {
+      backgroundColor: progressBarColor,
+      width: `${completedPercentage}%`
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.progressWrapper
+    }, /*#__PURE__*/React.createElement("div", {
+      "data-name": "progress",
+      className: style.progress,
+      style: inlineProgressValueStyle,
+      role: "progressbar",
+      "aria-label": _get('progression', ariaLabel)
+    }));
+  }, [completedPercentage, ariaLabel, skillCourses]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.learnerSkillCardWrapper,
+    "data-name": "learner-skill-card-wrapper",
+    "aria-label": ariaLabel
+  }, skillCourses || skillQuestions ? /*#__PURE__*/React.createElement("div", {
+    className: style.skillCoursesAndQuestionsWrapper
+  }, skillCourses ? /*#__PURE__*/React.createElement("div", {
+    className: style.skillInformation,
+    "data-name": "skill-courses"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.skillInformationNumber
+  }, skillCourses), " ", coursesLocale) : null, skillQuestions ? /*#__PURE__*/React.createElement("div", {
+    className: style.skillInformation,
+    "data-name": "skill-questions"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.skillInformationNumber
+  }, skillQuestions), "\xA0", questionsLocale) : null) : null, /*#__PURE__*/React.createElement("div", {
+    className: style.skillTitleWrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-name": "skill-title",
+    className: style.skillTitle,
+    "aria-label": skillAriaLabel || skillTitle
+  }, skillTitle), /*#__PURE__*/React.createElement("div", {
+    className: style.skillFocusBadge
+  }, /*#__PURE__*/React.createElement(Icon, {
+    iconName: "bullseye-arrow",
+    backgroundColor: "#DDD1FF",
+    size: {
+      faSize: 10,
+      wrapperSize: 16
+    }
+  }), skillFocusLocale)), /*#__PURE__*/React.createElement(ProgressBar, null), /*#__PURE__*/React.createElement("div", {
+    className: style.progressInformations
+  }, skillCourses && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: style.progressInformation,
+    "data-name": "skill-completed-courses"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.progressInformationNumber
+  }, completedCourses), coursesCompletedLocale), /*#__PURE__*/React.createElement("div", {
+    className: style.progressInformation,
+    "data-name": "completed-percentage"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.progressInformationNumber
+  }, completedPercentage, "%")))), /*#__PURE__*/React.createElement("div", {
+    className: style.ctaWrapper,
+    "data-name": "cta-wrapper"
+  }, /*#__PURE__*/React.createElement(ButtonLink, buttonReviewProps), /*#__PURE__*/React.createElement("div", {
+    className: style.buttonWrapper,
+    onMouseOver: handleMouseOver,
+    onMouseLeave: handleMouseLeave,
+    "data-name": "button-explore-wrapper"
+  }, /*#__PURE__*/React.createElement(ButtonLink, buttonExploreProps))));
+};
+
+LearnerSkillCard.contextTypes = {
+  translate: Provider.childContextTypes.translate
+};
+LearnerSkillCard.propTypes = process.env.NODE_ENV !== "production" ? {
+  'aria-label': PropTypes.string,
+  skillTitle: PropTypes.string,
+  skillAriaLabel: PropTypes.string,
+  metrics: PropTypes.shape({
+    skillCourses: PropTypes.number,
+    skillQuestions: PropTypes.number,
+    completedCourses: PropTypes.number
+  }),
+  onReviewClick: PropTypes.func,
+  onExploreClick: PropTypes.func
+} : {};
+export default LearnerSkillCard;
+//# sourceMappingURL=index.js.map

package/es/molecule/learner-skill-card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useCallback","useState","convert","PropTypes","Icon","ButtonLink","Provider","style","LearnerSkillCard","props","context","ariaLabel","skillTitle","skillAriaLabel","metrics","onReviewClick","onExploreClick","skillCourses","skillQuestions","completedCourses","skin","translate","hovered","setHovered","primarySkinColor","reviewLocale","exploreLocale","coursesLocale","questionsLocale","skillFocusLocale","coursesCompletedLocale","handleMouseOver","handleMouseLeave","buttonReviewProps","customStyle","backgroundColor","transition","label","buttonExploreProps","color","icon","position","faIcon","name","size","completedPercentage","Number","parseInt","ProgressBar","progressBarColor","inlineProgressValueStyle","width","progressWrapper","progress","learnerSkillCardWrapper","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","skillTitleWrapper","skillFocusBadge","faSize","wrapperSize","progressInformations","progressInformation","progressInformationNumber","ctaWrapper","buttonWrapper","contextTypes","childContextTypes","propTypes","string","shape","number","func"],"sources":["../../../src/molecule/learner-skill-card/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport {convert} from 'css-color-function';\nimport {get, getOr} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport Icon from '../../atom/icon';\nimport ButtonLink from '../../atom/button-link';\nimport Provider from '../../atom/provider';\nimport style from './style.css';\n\nconst LearnerSkillCard = (props, context) => {\n  const {\n    'aria-label': ariaLabel,\n    skillTitle,\n    skillAriaLabel,\n    metrics,\n    onReviewClick,\n    onExploreClick\n  } = props;\n  const {skillCourses, skillQuestions, completedCourses = 0} = metrics;\n  const {skin, translate} = context;\n  const [hovered, setHovered] = useState(false);\n  const primarySkinColor = getOr('#0061FF', 'common.primary', skin);\n\n  const reviewLocale = translate('Review');\n  const exploreLocale = translate('Explore');\n  const coursesLocale = translate('courses');\n  const questionsLocale = translate('questions');\n  const skillFocusLocale = translate('skill_focus');\n  const coursesCompletedLocale = translate('courses_completed');\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  const buttonReviewProps = {\n    customStyle: {\n      backgroundColor: '#FFF',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\n    onReviewClick,\n    'aria-label': `${skillTitle}, ${reviewLocale}`,\n    label: reviewLocale,\n    'data-name': 'learner-skill-card-review-button'\n  };\n\n  const buttonExploreProps = {\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    onExploreClick,\n    'aria-label': `${skillTitle}, ${exploreLocale}`,\n    label: exploreLocale,\n    'data-name': 'learner-skill-card-explore-button',\n    icon: {\n      position: 'left',\n      faIcon: {\n        name: 'compass',\n        backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n        color: hovered ? '#FFFFFF' : primarySkinColor,\n        size: 16\n      }\n    }\n  };\n\n  const completedPercentage =\n    skillCourses && Number.parseInt((completedCourses / skillCourses) * 100);\n\n  const ProgressBar = useCallback(() => {\n    if (!skillCourses) return null;\n\n    const progressBarColor = '#3EC483';\n    const inlineProgressValueStyle = {\n      backgroundColor: progressBarColor,\n      width: `${completedPercentage}%`\n    };\n\n    return (\n      <div className={style.progressWrapper}>\n        <div\n          data-name=\"progress\"\n          className={style.progress}\n          style={inlineProgressValueStyle}\n          role=\"progressbar\"\n          aria-label={get('progression', ariaLabel)}\n        />\n      </div>\n    );\n  }, [completedPercentage, ariaLabel, skillCourses]);\n\n  return (\n    <div\n      className={style.learnerSkillCardWrapper}\n      data-name=\"learner-skill-card-wrapper\"\n      aria-label={ariaLabel}\n    >\n      {skillCourses || skillQuestions ? (\n        <div className={style.skillCoursesAndQuestionsWrapper}>\n          {skillCourses ? (\n            <div className={style.skillInformation} data-name=\"skill-courses\">\n              <span className={style.skillInformationNumber}>{skillCourses}</span> {coursesLocale}\n            </div>\n          ) : null}\n          {skillQuestions ? (\n            <div className={style.skillInformation} data-name=\"skill-questions\">\n              <span className={style.skillInformationNumber}>{skillQuestions}</span>\n              &nbsp;{questionsLocale}\n            </div>\n          ) : null}\n        </div>\n      ) : null}\n      <div className={style.skillTitleWrapper}>\n        <div\n          data-name=\"skill-title\"\n          className={style.skillTitle}\n          aria-label={skillAriaLabel || skillTitle}\n        >\n          {skillTitle}\n        </div>\n        <div className={style.skillFocusBadge}>\n          <Icon\n            iconName=\"bullseye-arrow\"\n            backgroundColor=\"#DDD1FF\"\n            size={{\n              faSize: 10,\n              wrapperSize: 16\n            }}\n          />\n          {skillFocusLocale}\n        </div>\n      </div>\n      <ProgressBar />\n      <div className={style.progressInformations}>\n        {skillCourses && (\n          <>\n            <div className={style.progressInformation} data-name=\"skill-completed-courses\">\n              <span className={style.progressInformationNumber}>{completedCourses}</span>\n              {coursesCompletedLocale}\n            </div>\n            <div className={style.progressInformation} data-name=\"completed-percentage\">\n              <span className={style.progressInformationNumber}>{completedPercentage}%</span>\n            </div>\n          </>\n        )}\n      </div>\n      <div className={style.ctaWrapper} data-name=\"cta-wrapper\">\n        <ButtonLink {...buttonReviewProps} />\n        <div\n          className={style.buttonWrapper}\n          onMouseOver={handleMouseOver}\n          onMouseLeave={handleMouseLeave}\n          data-name=\"button-explore-wrapper\"\n        >\n          <ButtonLink {...buttonExploreProps} />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nLearnerSkillCard.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nLearnerSkillCard.propTypes = {\n  'aria-label': PropTypes.string,\n  skillTitle: PropTypes.string,\n  skillAriaLabel: PropTypes.string,\n  metrics: PropTypes.shape({\n    skillCourses: PropTypes.number,\n    skillQuestions: PropTypes.number,\n    completedCourses: PropTypes.number\n  }),\n  onReviewClick: PropTypes.func,\n  onExploreClick: PropTypes.func\n};\n\nexport default LearnerSkillCard;\n"],"mappings":"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"}

package/es/molecule/learner-skill-card/style.css

@@ -0,0 +1,119 @@
+@value breakpoints: "../../variables/breakpoints.css";
+@value mobile from breakpoints;
+@value colors: "../../variables/colors.css";
+@value cm_grey_400 from colors;
+@value white from colors;
+@value light from colors;
+@value box_shadow_light_dark from colors;
+@value box_shadow_medium_dark from colors;
+
+@keyframes progressbar {
+  0% {
+    width: 0;
+  }
+}
+
+.textBase {
+  font-family: "Gilroy";
+  font-style: normal;
+}
+
+.learnerSkillCardWrapper {
+  display: flex;
+  flex-direction: column;
+  max-width: 258px;
+  width: 100%;
+  min-height: 252px;
+  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.04);
+  transition: box-shadow 0.15s ease-in-out;
+  border-radius: 12px;
+  padding: 24px;
+  box-sizing: border-box;
+}
+
+.learnerSkillCardWrapper:hover {
+  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.10);
+}
+
+.skillCoursesAndQuestionsWrapper,
+.progressInformations {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.skillInformation,
+.progressInformation {
+  composes: textBase;
+  font-weight: 400;
+  font-size: 10px;
+  line-height: 12px;
+  color: cm_grey_400;
+}
+
+.skillInformationNumber,
+.progressInformationNumber {
+  color: #000;
+}
+
+.skillTitleWrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 68px;
+  margin-bottom: 24px;
+}
+
+.skillTitle {
+  composes: textBase;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 22px;
+  margin-bottom: 8px;
+}
+
+.skillFocusBadge {
+  composes: textBase;
+  display: flex;
+  height: 12px;
+  width: 62px;
+  align-items: center;
+  background-color: #DDD1FF;
+  border-radius: 24px;
+  padding: 2px 4px;
+  font-size: 10px;
+  line-height: 12px;
+  font-weight: 600;
+  color: #3900D6;
+  margin-right: 8px;
+}
+
+.progressWrapper {
+  position: relative;
+  left: 0;
+  width: 100%;
+  height: 4px;
+  border-radius: 2px;
+  overflow: hidden;
+  background: light;
+  margin-bottom: 8px;
+}
+
+.progress {
+  display: block;
+  height: 4px;
+  animation: progressbar 2s ease-in-out;
+}
+
+.progressInformations {
+  min-height: 12px;
+  margin-bottom: 24px;
+}
+
+.ctaWrapper {
+  margin-top: auto;
+  display: flex;
+}
+
+.buttonWrapper {
+  display: flex;
+}

package/es/molecule/questions/template/index.d.ts

@@ -29,7 +29,7 @@ declare namespace Template {
             theme: PropTypes.Requireable<string>;
             'aria-label': PropTypes.Requireable<string>;
             groupAriaLabel: PropTypes.Requireable<string>;
-        }, "aria-label" | "theme" | "onChange" | "options" | "groupAriaLabel">>>) | null | undefined)[]>;
+        }, "aria-label" | "onChange" | "theme" | "options" | "groupAriaLabel">>>) | null | undefined)[]>;
         const groupAriaLabel: PropTypes.Requireable<string>;
     }
 }

package/es/molecule/quick-access-card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/quick-access-card/index.js"],"names":[],"mappings":";AAiIA,wEAkEC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/quick-access-card/index.js"],"names":[],"mappings":";AAoIA,wEAkEC"}

package/es/molecule/quick-access-card/index.js

@@ -2,7 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { NovaSolidContentContentBookAdd as CockpitIcon, NovaSolidUsersActionsUser as ManageUserIcon, NovaSolidFilesBasicFileUpload2 as UploadUserIcon, NovaSolidEmailAtSign as ManageEmailIcon, NovaSolidDesignPaintBrush2 as LookAndFeelIcon, NovaSolidContentContentViewList as DashboardIcon, NovaSolidContentEditionFlash as MassiveBattleIcon, NovaSolidApplicationsWindowApplication5 as CmsIcon, NovaSolidBusinessBusinessGraphLine2 as AnalyticsIcon, NovaCompositionNavigationArrowRight as ActionIcon, NovaCompositionCoorpacademyOpenInNewTab as NewTabIcon, NovaLinePhoneMobilePhone as MobilePhone, NovaLineMessagesChatChatBubbleCircleQuestionMark as ChatBubbleCircleQuestionMark, NovaLineNetworkNetworkAlert as NetworkAlert, NovaLineObjectsBinoculars as Binoculaire, NovaLineContentEditionContentBook as ContentBook } from '@coorpacademy/nova-icons';
 import Link from '../../atom/link';
+import { COLORS } from '../../variables/colors';
 import style from './style.css';
+const {
+  cm_primary_blue
+} = COLORS;
 
 const getIcon = feature => {
   switch (feature) {
@@ -105,7 +109,7 @@ const getBackgroudRadialColors = feature => {
       return {
         iconBackgroundColor: '#F1F6FE',
         degrees: '0',
-        iconColor: '#0061FF'
+        iconColor: cm_primary_blue
       };
 
     case 'network':

package/es/molecule/quick-access-card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","NovaSolidContentContentBookAdd","CockpitIcon","NovaSolidUsersActionsUser","ManageUserIcon","NovaSolidFilesBasicFileUpload2","UploadUserIcon","NovaSolidEmailAtSign","ManageEmailIcon","NovaSolidDesignPaintBrush2","LookAndFeelIcon","NovaSolidContentContentViewList","DashboardIcon","NovaSolidContentEditionFlash","MassiveBattleIcon","NovaSolidApplicationsWindowApplication5","CmsIcon","NovaSolidBusinessBusinessGraphLine2","AnalyticsIcon","NovaCompositionNavigationArrowRight","ActionIcon","NovaCompositionCoorpacademyOpenInNewTab","NewTabIcon","NovaLinePhoneMobilePhone","MobilePhone","NovaLineMessagesChatChatBubbleCircleQuestionMark","ChatBubbleCircleQuestionMark","NovaLineNetworkNetworkAlert","NetworkAlert","NovaLineObjectsBinoculars","Binoculaire","NovaLineContentEditionContentBook","ContentBook","Link","style","getIcon","feature","getBackgroudRadialColors","iconBackgroundColor","degrees","iconColor","QuickAccessCard","props","context","title","description","href","openInNewTab","isMoocCard","Icon","newTabOnClick","newTabIcon","quickAccess","link","background","content","iconFeatureWrapper","backgroundColor","iconFeature","color","cta","iconGotoWrapper","hoverMooc","hover","iconGoto","propTypes","string","bool","oneOf"],"sources":["../../../src/molecule/quick-access-card/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n  NovaSolidContentContentBookAdd as CockpitIcon,\n  NovaSolidUsersActionsUser as ManageUserIcon,\n  NovaSolidFilesBasicFileUpload2 as UploadUserIcon,\n  NovaSolidEmailAtSign as ManageEmailIcon,\n  NovaSolidDesignPaintBrush2 as LookAndFeelIcon,\n  NovaSolidContentContentViewList as DashboardIcon,\n  NovaSolidContentEditionFlash as MassiveBattleIcon,\n  NovaSolidApplicationsWindowApplication5 as CmsIcon,\n  NovaSolidBusinessBusinessGraphLine2 as AnalyticsIcon,\n  NovaCompositionNavigationArrowRight as ActionIcon,\n  NovaCompositionCoorpacademyOpenInNewTab as NewTabIcon,\n  NovaLinePhoneMobilePhone as MobilePhone,\n  NovaLineMessagesChatChatBubbleCircleQuestionMark as ChatBubbleCircleQuestionMark,\n  NovaLineNetworkNetworkAlert as NetworkAlert,\n  NovaLineObjectsBinoculars as Binoculaire,\n  NovaLineContentEditionContentBook as ContentBook\n} from '@coorpacademy/nova-icons';\nimport Link from '../../atom/link';\nimport style from './style.css';\n\nconst getIcon = feature => {\n  switch (feature) {\n    case 'manage_users':\n      return ManageUserIcon;\n    case 'upload_users':\n      return UploadUserIcon;\n    case 'manage_email':\n      return ManageEmailIcon;\n    case 'massive_battle':\n      return MassiveBattleIcon;\n    case 'cms':\n      return CmsIcon;\n    case 'look_and_feel':\n      return LookAndFeelIcon;\n    case 'dashboard':\n      return DashboardIcon;\n    case 'cockpit':\n      return CockpitIcon;\n    case 'analytics':\n      return AnalyticsIcon;\n    case 'binoculaire':\n      return Binoculaire;\n    case 'book':\n      return ContentBook;\n    case 'network':\n      return NetworkAlert;\n    case 'chat-bubble-question':\n      return ChatBubbleCircleQuestionMark;\n    case 'mobile-phone':\n      return MobilePhone;\n    default:\n      return CockpitIcon;\n  }\n};\n\nconst getBackgroudRadialColors = feature => {\n  switch (feature) {\n    case 'manage_users':\n    case 'upload_users':\n      return {\n        iconBackgroundColor: '#2EC1D6',\n        degrees: '187',\n        iconColor: null\n      };\n    case 'look_and_feel':\n    case 'dashboard':\n      return {\n        iconBackgroundColor: '#18BB98',\n        degrees: '167',\n        iconColor: null\n      };\n    case 'cockpit':\n      return {\n        iconBackgroundColor: '#FF7043',\n        degrees: '14',\n        iconColor: null\n      };\n    case 'manage_email':\n    case 'massive_battle':\n    case 'cms':\n      return {\n        iconBackgroundColor: '#7340FF',\n        degrees: '256',\n        iconColor: null\n      };\n    case 'analytics':\n      return {\n        iconBackgroundColor: '#FF4040',\n        degrees: '0',\n        iconColor: null\n      };\n    case 'binoculaire':\n      return {\n        iconBackgroundColor: '#FFEFEB',\n        iconColor: '#FF541F',\n        degrees: '0'\n      };\n    case 'book':\n      return {\n        iconBackgroundColor: '#F1F6FE',\n        degrees: '0',\n        iconColor: '#0061FF'\n      };\n    case 'network':\n      return {\n        iconBackgroundColor: '#FFE5E6',\n        iconColor: '#FF0A0A',\n        degrees: '0'\n      };\n    case 'chat-bubble-question':\n      return {\n        iconBackgroundColor: '#E8FCF8',\n        iconColor: '#16AC8C',\n        degrees: '0'\n      };\n    case 'mobile-phone':\n      return {\n        iconBackgroundColor: '#F4F0FF',\n        degrees: '0',\n        iconColor: '#5C21FF'\n      };\n    default:\n      return null;\n  }\n};\n\nconst QuickAccessCard = (props, context) => {\n  const {title, description, feature, href, openInNewTab = false, isMoocCard = false} = props;\n  const {iconBackgroundColor, degrees, iconColor} = getBackgroudRadialColors(feature);\n  const Icon = getIcon(feature);\n  const newTabOnClick = openInNewTab ? <NewTabIcon className={style.newTabIcon} /> : null;\n\n  return (\n    <div data-name=\"quick-access-card\" data-type={feature} className={style.quickAccess}>\n      <Link href={href} target={openInNewTab ? '_blank' : '_self'} className={style.link}>\n        <div\n          style={\n            !isMoocCard\n              ? {\n                  background: `radial-gradient(62.12% 56.45% at 0% 77.29%, \n            hsl(${degrees}deg 68% 40% / 20%) 0%, \n            hsl(${degrees}deg 68% 40% / 0%) 100%), \n          radial-gradient(113.85% 103.46% at 93.27% 7.88%,\n            hsl(${degrees}deg 67% 51% / 15%) 0%, \n            hsl(${degrees}deg 67% 51% / 0%) 100%),\n          radial-gradient(49.66% 49.63% at 78.65% 86.26%, \n            hsl(${degrees}deg 87% 91%) 0%, \n            hsl(${degrees}deg 87% 91% / 0%) 100%), \n          #FAFAFA`\n                }\n              : null\n          }\n          className={style.content}\n        >\n          <div\n            className={style.iconFeatureWrapper}\n            style={{\n              backgroundColor: iconBackgroundColor\n            }}\n          >\n            <Icon className={style.iconFeature} style={{color: iconColor}} />\n          </div>\n          <div className={style.title}>\n            {title}\n            {newTabOnClick}\n          </div>\n          <div className={style.description}>{description}</div>\n          <div className={style.cta}>\n            <div\n              className={!isMoocCard ? style.iconGotoWrapper : null}\n              style={\n                !isMoocCard\n                  ? {\n                      backgroundColor: iconBackgroundColor\n                    }\n                  : null\n              }\n            >\n              <div\n                className={isMoocCard ? style.hoverMooc : style.hover}\n                style={{\n                  color: isMoocCard ? '#FFFFFF' : iconBackgroundColor\n                }}\n              >\n                <ActionIcon className={style.iconGoto} />\n              </div>\n            </div>\n          </div>\n        </div>\n      </Link>\n    </div>\n  );\n};\n\nQuickAccessCard.propTypes = {\n  title: PropTypes.string,\n  description: PropTypes.string,\n  href: PropTypes.string,\n  openInNewTab: PropTypes.bool,\n  isMoocCard: PropTypes.bool,\n  feature: PropTypes.oneOf([\n    'analytics',\n    'cms',\n    'cockpit',\n    'massive_battle',\n    'manage_email',\n    'dashboard',\n    'look_and_feel',\n    'manage_users',\n    'upload_users',\n    'binoculaire',\n    'book',\n    'network',\n    'chat-bubble-question',\n    'mobile-phone'\n  ])\n};\n\nexport default QuickAccessCard;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","PropTypes","NovaSolidContentContentBookAdd","CockpitIcon","NovaSolidUsersActionsUser","ManageUserIcon","NovaSolidFilesBasicFileUpload2","UploadUserIcon","NovaSolidEmailAtSign","ManageEmailIcon","NovaSolidDesignPaintBrush2","LookAndFeelIcon","NovaSolidContentContentViewList","DashboardIcon","NovaSolidContentEditionFlash","MassiveBattleIcon","NovaSolidApplicationsWindowApplication5","CmsIcon","NovaSolidBusinessBusinessGraphLine2","AnalyticsIcon","NovaCompositionNavigationArrowRight","ActionIcon","NovaCompositionCoorpacademyOpenInNewTab","NewTabIcon","NovaLinePhoneMobilePhone","MobilePhone","NovaLineMessagesChatChatBubbleCircleQuestionMark","ChatBubbleCircleQuestionMark","NovaLineNetworkNetworkAlert","NetworkAlert","NovaLineObjectsBinoculars","Binoculaire","NovaLineContentEditionContentBook","ContentBook","Link","COLORS","style","cm_primary_blue","getIcon","feature","getBackgroudRadialColors","iconBackgroundColor","degrees","iconColor","QuickAccessCard","props","context","title","description","href","openInNewTab","isMoocCard","Icon","newTabOnClick","newTabIcon","quickAccess","link","background","content","iconFeatureWrapper","backgroundColor","iconFeature","color","cta","iconGotoWrapper","hoverMooc","hover","iconGoto","propTypes","string","bool","oneOf"],"sources":["../../../src/molecule/quick-access-card/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n  NovaSolidContentContentBookAdd as CockpitIcon,\n  NovaSolidUsersActionsUser as ManageUserIcon,\n  NovaSolidFilesBasicFileUpload2 as UploadUserIcon,\n  NovaSolidEmailAtSign as ManageEmailIcon,\n  NovaSolidDesignPaintBrush2 as LookAndFeelIcon,\n  NovaSolidContentContentViewList as DashboardIcon,\n  NovaSolidContentEditionFlash as MassiveBattleIcon,\n  NovaSolidApplicationsWindowApplication5 as CmsIcon,\n  NovaSolidBusinessBusinessGraphLine2 as AnalyticsIcon,\n  NovaCompositionNavigationArrowRight as ActionIcon,\n  NovaCompositionCoorpacademyOpenInNewTab as NewTabIcon,\n  NovaLinePhoneMobilePhone as MobilePhone,\n  NovaLineMessagesChatChatBubbleCircleQuestionMark as ChatBubbleCircleQuestionMark,\n  NovaLineNetworkNetworkAlert as NetworkAlert,\n  NovaLineObjectsBinoculars as Binoculaire,\n  NovaLineContentEditionContentBook as ContentBook\n} from '@coorpacademy/nova-icons';\nimport Link from '../../atom/link';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\n\nconst {cm_primary_blue} = COLORS;\n\nconst getIcon = feature => {\n  switch (feature) {\n    case 'manage_users':\n      return ManageUserIcon;\n    case 'upload_users':\n      return UploadUserIcon;\n    case 'manage_email':\n      return ManageEmailIcon;\n    case 'massive_battle':\n      return MassiveBattleIcon;\n    case 'cms':\n      return CmsIcon;\n    case 'look_and_feel':\n      return LookAndFeelIcon;\n    case 'dashboard':\n      return DashboardIcon;\n    case 'cockpit':\n      return CockpitIcon;\n    case 'analytics':\n      return AnalyticsIcon;\n    case 'binoculaire':\n      return Binoculaire;\n    case 'book':\n      return ContentBook;\n    case 'network':\n      return NetworkAlert;\n    case 'chat-bubble-question':\n      return ChatBubbleCircleQuestionMark;\n    case 'mobile-phone':\n      return MobilePhone;\n    default:\n      return CockpitIcon;\n  }\n};\n\nconst getBackgroudRadialColors = feature => {\n  switch (feature) {\n    case 'manage_users':\n    case 'upload_users':\n      return {\n        iconBackgroundColor: '#2EC1D6',\n        degrees: '187',\n        iconColor: null\n      };\n    case 'look_and_feel':\n    case 'dashboard':\n      return {\n        iconBackgroundColor: '#18BB98',\n        degrees: '167',\n        iconColor: null\n      };\n    case 'cockpit':\n      return {\n        iconBackgroundColor: '#FF7043',\n        degrees: '14',\n        iconColor: null\n      };\n    case 'manage_email':\n    case 'massive_battle':\n    case 'cms':\n      return {\n        iconBackgroundColor: '#7340FF',\n        degrees: '256',\n        iconColor: null\n      };\n    case 'analytics':\n      return {\n        iconBackgroundColor: '#FF4040',\n        degrees: '0',\n        iconColor: null\n      };\n    case 'binoculaire':\n      return {\n        iconBackgroundColor: '#FFEFEB',\n        iconColor: '#FF541F',\n        degrees: '0'\n      };\n    case 'book':\n      return {\n        iconBackgroundColor: '#F1F6FE',\n        degrees: '0',\n        iconColor: cm_primary_blue\n      };\n    case 'network':\n      return {\n        iconBackgroundColor: '#FFE5E6',\n        iconColor: '#FF0A0A',\n        degrees: '0'\n      };\n    case 'chat-bubble-question':\n      return {\n        iconBackgroundColor: '#E8FCF8',\n        iconColor: '#16AC8C',\n        degrees: '0'\n      };\n    case 'mobile-phone':\n      return {\n        iconBackgroundColor: '#F4F0FF',\n        degrees: '0',\n        iconColor: '#5C21FF'\n      };\n    default:\n      return null;\n  }\n};\n\nconst QuickAccessCard = (props, context) => {\n  const {title, description, feature, href, openInNewTab = false, isMoocCard = false} = props;\n  const {iconBackgroundColor, degrees, iconColor} = getBackgroudRadialColors(feature);\n  const Icon = getIcon(feature);\n  const newTabOnClick = openInNewTab ? <NewTabIcon className={style.newTabIcon} /> : null;\n\n  return (\n    <div data-name=\"quick-access-card\" data-type={feature} className={style.quickAccess}>\n      <Link href={href} target={openInNewTab ? '_blank' : '_self'} className={style.link}>\n        <div\n          style={\n            !isMoocCard\n              ? {\n                  background: `radial-gradient(62.12% 56.45% at 0% 77.29%, \n            hsl(${degrees}deg 68% 40% / 20%) 0%, \n            hsl(${degrees}deg 68% 40% / 0%) 100%), \n          radial-gradient(113.85% 103.46% at 93.27% 7.88%,\n            hsl(${degrees}deg 67% 51% / 15%) 0%, \n            hsl(${degrees}deg 67% 51% / 0%) 100%),\n          radial-gradient(49.66% 49.63% at 78.65% 86.26%, \n            hsl(${degrees}deg 87% 91%) 0%, \n            hsl(${degrees}deg 87% 91% / 0%) 100%), \n          #FAFAFA`\n                }\n              : null\n          }\n          className={style.content}\n        >\n          <div\n            className={style.iconFeatureWrapper}\n            style={{\n              backgroundColor: iconBackgroundColor\n            }}\n          >\n            <Icon className={style.iconFeature} style={{color: iconColor}} />\n          </div>\n          <div className={style.title}>\n            {title}\n            {newTabOnClick}\n          </div>\n          <div className={style.description}>{description}</div>\n          <div className={style.cta}>\n            <div\n              className={!isMoocCard ? style.iconGotoWrapper : null}\n              style={\n                !isMoocCard\n                  ? {\n                      backgroundColor: iconBackgroundColor\n                    }\n                  : null\n              }\n            >\n              <div\n                className={isMoocCard ? style.hoverMooc : style.hover}\n                style={{\n                  color: isMoocCard ? '#FFFFFF' : iconBackgroundColor\n                }}\n              >\n                <ActionIcon className={style.iconGoto} />\n              </div>\n            </div>\n          </div>\n        </div>\n      </Link>\n    </div>\n  );\n};\n\nQuickAccessCard.propTypes = {\n  title: PropTypes.string,\n  description: PropTypes.string,\n  href: PropTypes.string,\n  openInNewTab: PropTypes.bool,\n  isMoocCard: PropTypes.bool,\n  feature: PropTypes.oneOf([\n    'analytics',\n    'cms',\n    'cockpit',\n    'massive_battle',\n    'manage_email',\n    'dashboard',\n    'look_and_feel',\n    'manage_users',\n    'upload_users',\n    'binoculaire',\n    'book',\n    'network',\n    'chat-bubble-question',\n    'mobile-phone'\n  ])\n};\n\nexport default QuickAccessCard;\n"],"mappings":"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"}

package/es/template/mobile-login/welcome/index.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../../src/template/mobile-login/welcome/index.native.tsx"],"names":[],"mappings":";AA8KA,oBAAY,KAAK,GAAG;IAClB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,yBAAyB,EAAE,MAAM,IAAI,CAAC;IACtC,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,MAAM,CAAC;QACpB,SAAS,EAAE,MAAM,CAAC;QAClB,cAAc,EAAE,MAAM,CAAC;QACvB,SAAS,EAAE,MAAM,CAAC;QAClB,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;CACH,CAAC;AAEF,QAAA,MAAM,OAAO,UAAW,KAAK,uBAuI5B,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../../src/template/mobile-login/welcome/index.native.tsx"],"names":[],"mappings":";AAiLA,oBAAY,KAAK,GAAG;IAClB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,yBAAyB,EAAE,MAAM,IAAI,CAAC;IACtC,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,MAAM,CAAC;QACpB,SAAS,EAAE,MAAM,CAAC;QAClB,cAAc,EAAE,MAAM,CAAC;QACvB,SAAS,EAAE,MAAM,CAAC;QAClB,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;CACH,CAAC;AAEF,QAAA,MAAM,OAAO,UAAW,KAAK,uBAuI5B,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/es/template/mobile-login/welcome/index.native.js

@@ -6,6 +6,10 @@ import { useAnimateProp, useTranslateY } from '@coorpacademy/react-native-animat
 import Touchable from '../../../hoc/touchable/index.native';
 import { useTemplateContext } from '../../app-review/template-context';
 import Text from '../../../atom/text/index.native';
+import { COLORS } from '../../../variables/colors';
+const {
+  cm_primary_blue
+} = COLORS;
 
 const createStyleSheet = theme => StyleSheet.create({
   wrapper: {
@@ -224,7 +228,7 @@ const Welcome = props => {
   }, /*#__PURE__*/React.createElement(Animated.View, {
     style: [styleSheet.gradients, translateGradients.animatedStyle]
   }, /*#__PURE__*/React.createElement(LinearGradient, {
-    colors: ['#0061FF', '#fff'],
+    colors: [cm_primary_blue, '#fff'],
     locations: [0, 0.95],
     style: styleSheet.gradient
   }), /*#__PURE__*/React.createElement(LinearGradient, {

package/es/template/mobile-login/welcome/index.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.js","names":["React","useEffect","useRef","useState","Animated","StyleSheet","View","LinearGradient","NovaCompositionCoorpacademyLogoCoorp","LogoCoorp","NovaCompositionCoorpacademyQrCode","QrCodeIcon","NovaCompositionCoorpacademyEmail","MailIcon","useAnimateProp","useTranslateY","Touchable","useTemplateContext","Text","createStyleSheet","theme","create","wrapper","top","bottom","left","right","flex","justifyContent","alignItems","paddingHorizontal","content","width","gradients","position","gradient","opacity","transform","rotate","gradient2","animatedLogoWrapper","animatedLogo","height","logo","padding","logoBG","backgroundColor","title","color","fontWeight","fontSize","lineHeight","paddingVertical","description","actions","buttons","button","marginVertical","flexDirection","borderRadius","overflow","ctaQrCode","colors","cta","ctaQrCodeText","marginLeft","qrCodeIcon","fill","ctaReceiveMail","ctaReceiveMailText","mailIcon","help","titleHelp","ctaHelp","textDecorationLine","Welcome","props","locales","onDemoPress","onQRCodeButtonPress","onHelpPress","onReceiveEmailButtonPress","styleSheet","setStylesheet","translateGradients","fromValue","toValue","duration","delay","translateContent","fadeInContent","property","fadeOutStartLogo","fadeInFinalLogo","scaleAnim","Value","current","interpolateScale","interpolate","inputRange","outputRange","_stylesheet","start","animatedScale","timing","useNativeDriver","animatedStyle","scale"],"sources":["../../../../src/template/mobile-login/welcome/index.native.tsx"],"sourcesContent":["import React, {useEffect, useRef, useState} from 'react';\nimport {Animated, StyleSheet, TextStyle, View, ViewStyle} from 'react-native';\nimport LinearGradient from 'react-native-linear-gradient';\nimport {\n  NovaCompositionCoorpacademyLogoCoorp as LogoCoorp,\n  NovaCompositionCoorpacademyQrCode as QrCodeIcon,\n  NovaCompositionCoorpacademyEmail as MailIcon\n} from '@coorpacademy/nova-icons';\nimport {useAnimateProp, useTranslateY} from '@coorpacademy/react-native-animation';\nimport Touchable from '../../../hoc/touchable/index.native';\nimport {useTemplateContext} from '../../app-review/template-context';\nimport {Theme} from '../../../variables/theme.native';\nimport Text from '../../../atom/text/index.native';\n\ntype StyleSheetType = {\n  wrapper: ViewStyle;\n  animatedLogoWrapper: ViewStyle;\n  animatedLogo: ViewStyle;\n  logo: ViewStyle;\n  logoBG: ViewStyle;\n  content: ViewStyle;\n  gradients: ViewStyle;\n  gradient: ViewStyle;\n  gradient2: ViewStyle;\n  title: TextStyle;\n  description: TextStyle;\n  actions: ViewStyle;\n  buttons: ViewStyle;\n  button: ViewStyle;\n  qrCodeIcon: ViewStyle;\n  mailIcon: ViewStyle;\n  ctaQrCode: ViewStyle;\n  ctaQrCodeText: TextStyle;\n  ctaReceiveMail: ViewStyle;\n  ctaReceiveMailText: TextStyle;\n  help: ViewStyle;\n  titleHelp: TextStyle;\n  ctaHelp: ViewStyle;\n};\n\nconst createStyleSheet = (theme: Theme): StyleSheetType =>\n  StyleSheet.create({\n    wrapper: {\n      top: 0,\n      bottom: 0,\n      left: 0,\n      right: 0,\n      flex: 1,\n      justifyContent: 'space-around',\n      alignItems: 'center',\n      paddingHorizontal: 24\n    },\n    content: {\n      width: '100%',\n      alignItems: 'flex-start'\n    },\n    gradients: {\n      position: 'absolute',\n      top: 400,\n      bottom: 400,\n      left: 0,\n      right: 0,\n      flex: 1\n    },\n    gradient: {\n      position: 'absolute',\n      top: -730,\n      bottom: 0,\n      left: -380,\n      right: -380,\n      opacity: 1,\n      transform: [{rotate: '35deg'}]\n    },\n    gradient2: {\n      position: 'absolute',\n      top: -630,\n      bottom: -200,\n      left: -300,\n      right: -400,\n      opacity: 0.6,\n      transform: [{rotate: '-35deg'}]\n    },\n    animatedLogoWrapper: {\n      alignItems: 'center'\n    },\n    animatedLogo: {\n      position: 'absolute',\n      width: 77,\n      height: 100\n    },\n    logo: {\n      padding: 100\n    },\n    logoBG: {\n      backgroundColor: '#fff',\n      top: 20,\n      width: 60,\n      height: 60\n    },\n    title: {\n      color: '#1D1D2B',\n      fontWeight: '600',\n      fontSize: 28,\n      lineHeight: 36,\n      paddingVertical: 8\n    },\n    description: {\n      color: '#1D1D2B',\n      fontWeight: '400',\n      fontSize: 17,\n      lineHeight: 24,\n      paddingVertical: 8\n    },\n    actions: {\n      width: '100%'\n    },\n    buttons: {\n      paddingVertical: 20,\n      alignItems: 'center'\n    },\n    button: {\n      paddingVertical: 12,\n      marginVertical: 4,\n      width: '100%',\n      flexDirection: 'row',\n      justifyContent: 'center',\n      borderRadius: 12,\n      alignItems: 'center',\n      overflow: 'hidden'\n    },\n    ctaQrCode: {\n      backgroundColor: theme.colors.cta\n    },\n    ctaQrCodeText: {\n      marginLeft: 8,\n      color: '#fff',\n      fontWeight: '700',\n      fontSize: 14,\n      lineHeight: 24\n    },\n    qrCodeIcon: {\n      fill: '#fff',\n      height: 14,\n      width: 14\n    },\n    ctaReceiveMail: {\n      backgroundColor: '#eaeaeb'\n    },\n    ctaReceiveMailText: {\n      marginLeft: 8,\n      color: '#1D1D2B',\n      fontWeight: '700',\n      fontSize: 14,\n      lineHeight: 24\n    },\n    mailIcon: {\n      fill: '#1D1D2B',\n      height: 12,\n      width: 16\n    },\n    help: {\n      flexDirection: 'row',\n      justifyContent: 'center'\n    },\n    titleHelp: {\n      color: '#9999A8'\n    },\n    ctaHelp: {\n      marginLeft: 5,\n      textDecorationLine: 'underline',\n      color: '#9999A8'\n    }\n  });\n\nexport type Props = {\n  onDemoPress: () => void;\n  onHelpPress: () => void;\n  onQRCodeButtonPress: () => void;\n  onReceiveEmailButtonPress: () => void;\n  locales: {\n    title: string;\n    description: string;\n    ctaQrCode: string;\n    ctaReceiveMail: string;\n    titleHelp: string;\n    ctaHelp: string;\n  };\n};\n\nconst Welcome = (props: Props) => {\n  const {locales, onDemoPress, onQRCodeButtonPress, onHelpPress, onReceiveEmailButtonPress} = props;\n  const {theme} = useTemplateContext();\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n\n  const translateGradients = useTranslateY({\n    fromValue: 0,\n    toValue: -200,\n    duration: 300,\n    delay: 750\n  });\n\n  const translateContent = useTranslateY({\n    fromValue: 170,\n    toValue: 0,\n    duration: 450,\n    delay: 750\n  });\n\n  const fadeInContent = useAnimateProp({\n    property: 'opacity',\n    fromValue: 0,\n    toValue: 1,\n    duration: 650,\n    delay: 750\n  });\n\n  const fadeOutStartLogo = useAnimateProp({\n    property: 'opacity',\n    fromValue: 1,\n    toValue: 0,\n    duration: 450,\n    delay: 1000\n  });\n\n  const fadeInFinalLogo = useAnimateProp({\n    property: 'opacity',\n    fromValue: 0,\n    toValue: 1,\n    duration: 250,\n    delay: 900\n  });\n\n  const scaleAnim = useRef<Animated.Value>(new Animated.Value(0)).current;\n  const interpolateScale = scaleAnim.interpolate({\n    inputRange: [0, 0.4, 0.5, 0.6, 1],\n    outputRange: [1, 1.7, 1.7, 1.7, 1]\n  });\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  useEffect(() => {\n    fadeInContent.start();\n    fadeInFinalLogo.start();\n    fadeOutStartLogo.start();\n    translateContent.start();\n    translateGradients.start();\n\n    const animatedScale = Animated.timing(scaleAnim, {\n      toValue: 1,\n      duration: 1000,\n      useNativeDriver: true\n    });\n\n    animatedScale.start();\n\n    // on mount only\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  if (!styleSheet) {\n    return null;\n  }\n  return (\n    <Animated.View style={[styleSheet.wrapper, translateContent.animatedStyle]} testID=\"welcome\">\n      <Animated.View style={[styleSheet.gradients, translateGradients.animatedStyle]}>\n        <LinearGradient\n          colors={['#0061FF', '#fff']}\n          locations={[0, 0.95]}\n          style={styleSheet.gradient}\n        />\n        <LinearGradient\n          colors={['#2199AB', '#fff']}\n          locations={[0, 0.95]}\n          style={styleSheet.gradient2}\n        />\n      </Animated.View>\n\n      <Touchable onLongPress={onDemoPress} style={styleSheet.logo}>\n        <Animated.View\n          style={[styleSheet.animatedLogoWrapper, {transform: [{scale: interpolateScale}]}]}\n        >\n          <Animated.View style={[styleSheet.logoBG, fadeInFinalLogo.animatedStyle]} />\n          <Animated.View style={[styleSheet.animatedLogo, fadeInFinalLogo.animatedStyle]}>\n            <LogoCoorp fill=\"#0061FF\" />\n          </Animated.View>\n          <Animated.View style={[styleSheet.animatedLogo, fadeOutStartLogo.animatedStyle]}>\n            <LogoCoorp fill=\"#fff\" />\n          </Animated.View>\n        </Animated.View>\n      </Touchable>\n      <Animated.View style={[styleSheet.content, fadeInContent.animatedStyle]}>\n        <Text style={styleSheet.title}>{locales.title}</Text>\n        <Text style={styleSheet.description}>{locales.description}</Text>\n\n        <View style={styleSheet.actions}>\n          <View style={styleSheet.buttons}>\n            <Touchable\n              style={[styleSheet.button, styleSheet.ctaQrCode]}\n              onPress={onQRCodeButtonPress}\n              testID=\"qr-code-button\"\n            >\n              <QrCodeIcon style={styleSheet.qrCodeIcon} />\n              <Text style={styleSheet.ctaQrCodeText}>{locales.ctaQrCode}</Text>\n            </Touchable>\n            <Touchable\n              style={[styleSheet.button, styleSheet.ctaReceiveMail]}\n              onPress={onReceiveEmailButtonPress}\n              testID=\"receive-email-button\"\n            >\n              <MailIcon style={styleSheet.mailIcon} />\n              <Text style={styleSheet.ctaReceiveMailText}>{locales.ctaReceiveMail}</Text>\n            </Touchable>\n          </View>\n          <Touchable onPress={onHelpPress} style={styleSheet.help}>\n            <Text style={styleSheet.titleHelp}>{locales.titleHelp}</Text>\n            <Text style={styleSheet.ctaHelp}>{locales.ctaHelp}</Text>\n          </Touchable>\n        </View>\n      </Animated.View>\n    </Animated.View>\n  );\n};\n\nexport default Welcome;\n"],"mappings":"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"}
+{"version":3,"file":"index.native.js","names":["React","useEffect","useRef","useState","Animated","StyleSheet","View","LinearGradient","NovaCompositionCoorpacademyLogoCoorp","LogoCoorp","NovaCompositionCoorpacademyQrCode","QrCodeIcon","NovaCompositionCoorpacademyEmail","MailIcon","useAnimateProp","useTranslateY","Touchable","useTemplateContext","Text","COLORS","cm_primary_blue","createStyleSheet","theme","create","wrapper","top","bottom","left","right","flex","justifyContent","alignItems","paddingHorizontal","content","width","gradients","position","gradient","opacity","transform","rotate","gradient2","animatedLogoWrapper","animatedLogo","height","logo","padding","logoBG","backgroundColor","title","color","fontWeight","fontSize","lineHeight","paddingVertical","description","actions","buttons","button","marginVertical","flexDirection","borderRadius","overflow","ctaQrCode","colors","cta","ctaQrCodeText","marginLeft","qrCodeIcon","fill","ctaReceiveMail","ctaReceiveMailText","mailIcon","help","titleHelp","ctaHelp","textDecorationLine","Welcome","props","locales","onDemoPress","onQRCodeButtonPress","onHelpPress","onReceiveEmailButtonPress","styleSheet","setStylesheet","translateGradients","fromValue","toValue","duration","delay","translateContent","fadeInContent","property","fadeOutStartLogo","fadeInFinalLogo","scaleAnim","Value","current","interpolateScale","interpolate","inputRange","outputRange","_stylesheet","start","animatedScale","timing","useNativeDriver","animatedStyle","scale"],"sources":["../../../../src/template/mobile-login/welcome/index.native.tsx"],"sourcesContent":["import React, {useEffect, useRef, useState} from 'react';\nimport {Animated, StyleSheet, TextStyle, View, ViewStyle} from 'react-native';\nimport LinearGradient from 'react-native-linear-gradient';\nimport {\n  NovaCompositionCoorpacademyLogoCoorp as LogoCoorp,\n  NovaCompositionCoorpacademyQrCode as QrCodeIcon,\n  NovaCompositionCoorpacademyEmail as MailIcon\n} from '@coorpacademy/nova-icons';\nimport {useAnimateProp, useTranslateY} from '@coorpacademy/react-native-animation';\nimport Touchable from '../../../hoc/touchable/index.native';\nimport {useTemplateContext} from '../../app-review/template-context';\nimport {Theme} from '../../../variables/theme.native';\nimport Text from '../../../atom/text/index.native';\nimport {COLORS} from '../../../variables/colors';\n\nconst {cm_primary_blue} = COLORS;\n\ntype StyleSheetType = {\n  wrapper: ViewStyle;\n  animatedLogoWrapper: ViewStyle;\n  animatedLogo: ViewStyle;\n  logo: ViewStyle;\n  logoBG: ViewStyle;\n  content: ViewStyle;\n  gradients: ViewStyle;\n  gradient: ViewStyle;\n  gradient2: ViewStyle;\n  title: TextStyle;\n  description: TextStyle;\n  actions: ViewStyle;\n  buttons: ViewStyle;\n  button: ViewStyle;\n  qrCodeIcon: ViewStyle;\n  mailIcon: ViewStyle;\n  ctaQrCode: ViewStyle;\n  ctaQrCodeText: TextStyle;\n  ctaReceiveMail: ViewStyle;\n  ctaReceiveMailText: TextStyle;\n  help: ViewStyle;\n  titleHelp: TextStyle;\n  ctaHelp: ViewStyle;\n};\n\nconst createStyleSheet = (theme: Theme): StyleSheetType =>\n  StyleSheet.create({\n    wrapper: {\n      top: 0,\n      bottom: 0,\n      left: 0,\n      right: 0,\n      flex: 1,\n      justifyContent: 'space-around',\n      alignItems: 'center',\n      paddingHorizontal: 24\n    },\n    content: {\n      width: '100%',\n      alignItems: 'flex-start'\n    },\n    gradients: {\n      position: 'absolute',\n      top: 400,\n      bottom: 400,\n      left: 0,\n      right: 0,\n      flex: 1\n    },\n    gradient: {\n      position: 'absolute',\n      top: -730,\n      bottom: 0,\n      left: -380,\n      right: -380,\n      opacity: 1,\n      transform: [{rotate: '35deg'}]\n    },\n    gradient2: {\n      position: 'absolute',\n      top: -630,\n      bottom: -200,\n      left: -300,\n      right: -400,\n      opacity: 0.6,\n      transform: [{rotate: '-35deg'}]\n    },\n    animatedLogoWrapper: {\n      alignItems: 'center'\n    },\n    animatedLogo: {\n      position: 'absolute',\n      width: 77,\n      height: 100\n    },\n    logo: {\n      padding: 100\n    },\n    logoBG: {\n      backgroundColor: '#fff',\n      top: 20,\n      width: 60,\n      height: 60\n    },\n    title: {\n      color: '#1D1D2B',\n      fontWeight: '600',\n      fontSize: 28,\n      lineHeight: 36,\n      paddingVertical: 8\n    },\n    description: {\n      color: '#1D1D2B',\n      fontWeight: '400',\n      fontSize: 17,\n      lineHeight: 24,\n      paddingVertical: 8\n    },\n    actions: {\n      width: '100%'\n    },\n    buttons: {\n      paddingVertical: 20,\n      alignItems: 'center'\n    },\n    button: {\n      paddingVertical: 12,\n      marginVertical: 4,\n      width: '100%',\n      flexDirection: 'row',\n      justifyContent: 'center',\n      borderRadius: 12,\n      alignItems: 'center',\n      overflow: 'hidden'\n    },\n    ctaQrCode: {\n      backgroundColor: theme.colors.cta\n    },\n    ctaQrCodeText: {\n      marginLeft: 8,\n      color: '#fff',\n      fontWeight: '700',\n      fontSize: 14,\n      lineHeight: 24\n    },\n    qrCodeIcon: {\n      fill: '#fff',\n      height: 14,\n      width: 14\n    },\n    ctaReceiveMail: {\n      backgroundColor: '#eaeaeb'\n    },\n    ctaReceiveMailText: {\n      marginLeft: 8,\n      color: '#1D1D2B',\n      fontWeight: '700',\n      fontSize: 14,\n      lineHeight: 24\n    },\n    mailIcon: {\n      fill: '#1D1D2B',\n      height: 12,\n      width: 16\n    },\n    help: {\n      flexDirection: 'row',\n      justifyContent: 'center'\n    },\n    titleHelp: {\n      color: '#9999A8'\n    },\n    ctaHelp: {\n      marginLeft: 5,\n      textDecorationLine: 'underline',\n      color: '#9999A8'\n    }\n  });\n\nexport type Props = {\n  onDemoPress: () => void;\n  onHelpPress: () => void;\n  onQRCodeButtonPress: () => void;\n  onReceiveEmailButtonPress: () => void;\n  locales: {\n    title: string;\n    description: string;\n    ctaQrCode: string;\n    ctaReceiveMail: string;\n    titleHelp: string;\n    ctaHelp: string;\n  };\n};\n\nconst Welcome = (props: Props) => {\n  const {locales, onDemoPress, onQRCodeButtonPress, onHelpPress, onReceiveEmailButtonPress} = props;\n  const {theme} = useTemplateContext();\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n\n  const translateGradients = useTranslateY({\n    fromValue: 0,\n    toValue: -200,\n    duration: 300,\n    delay: 750\n  });\n\n  const translateContent = useTranslateY({\n    fromValue: 170,\n    toValue: 0,\n    duration: 450,\n    delay: 750\n  });\n\n  const fadeInContent = useAnimateProp({\n    property: 'opacity',\n    fromValue: 0,\n    toValue: 1,\n    duration: 650,\n    delay: 750\n  });\n\n  const fadeOutStartLogo = useAnimateProp({\n    property: 'opacity',\n    fromValue: 1,\n    toValue: 0,\n    duration: 450,\n    delay: 1000\n  });\n\n  const fadeInFinalLogo = useAnimateProp({\n    property: 'opacity',\n    fromValue: 0,\n    toValue: 1,\n    duration: 250,\n    delay: 900\n  });\n\n  const scaleAnim = useRef<Animated.Value>(new Animated.Value(0)).current;\n  const interpolateScale = scaleAnim.interpolate({\n    inputRange: [0, 0.4, 0.5, 0.6, 1],\n    outputRange: [1, 1.7, 1.7, 1.7, 1]\n  });\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  useEffect(() => {\n    fadeInContent.start();\n    fadeInFinalLogo.start();\n    fadeOutStartLogo.start();\n    translateContent.start();\n    translateGradients.start();\n\n    const animatedScale = Animated.timing(scaleAnim, {\n      toValue: 1,\n      duration: 1000,\n      useNativeDriver: true\n    });\n\n    animatedScale.start();\n\n    // on mount only\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  if (!styleSheet) {\n    return null;\n  }\n  return (\n    <Animated.View style={[styleSheet.wrapper, translateContent.animatedStyle]} testID=\"welcome\">\n      <Animated.View style={[styleSheet.gradients, translateGradients.animatedStyle]}>\n        <LinearGradient\n          colors={[cm_primary_blue, '#fff']}\n          locations={[0, 0.95]}\n          style={styleSheet.gradient}\n        />\n        <LinearGradient\n          colors={['#2199AB', '#fff']}\n          locations={[0, 0.95]}\n          style={styleSheet.gradient2}\n        />\n      </Animated.View>\n\n      <Touchable onLongPress={onDemoPress} style={styleSheet.logo}>\n        <Animated.View\n          style={[styleSheet.animatedLogoWrapper, {transform: [{scale: interpolateScale}]}]}\n        >\n          <Animated.View style={[styleSheet.logoBG, fadeInFinalLogo.animatedStyle]} />\n          <Animated.View style={[styleSheet.animatedLogo, fadeInFinalLogo.animatedStyle]}>\n            <LogoCoorp fill=\"#0061FF\" />\n          </Animated.View>\n          <Animated.View style={[styleSheet.animatedLogo, fadeOutStartLogo.animatedStyle]}>\n            <LogoCoorp fill=\"#fff\" />\n          </Animated.View>\n        </Animated.View>\n      </Touchable>\n      <Animated.View style={[styleSheet.content, fadeInContent.animatedStyle]}>\n        <Text style={styleSheet.title}>{locales.title}</Text>\n        <Text style={styleSheet.description}>{locales.description}</Text>\n\n        <View style={styleSheet.actions}>\n          <View style={styleSheet.buttons}>\n            <Touchable\n              style={[styleSheet.button, styleSheet.ctaQrCode]}\n              onPress={onQRCodeButtonPress}\n              testID=\"qr-code-button\"\n            >\n              <QrCodeIcon style={styleSheet.qrCodeIcon} />\n              <Text style={styleSheet.ctaQrCodeText}>{locales.ctaQrCode}</Text>\n            </Touchable>\n            <Touchable\n              style={[styleSheet.button, styleSheet.ctaReceiveMail]}\n              onPress={onReceiveEmailButtonPress}\n              testID=\"receive-email-button\"\n            >\n              <MailIcon style={styleSheet.mailIcon} />\n              <Text style={styleSheet.ctaReceiveMailText}>{locales.ctaReceiveMail}</Text>\n            </Touchable>\n          </View>\n          <Touchable onPress={onHelpPress} style={styleSheet.help}>\n            <Text style={styleSheet.titleHelp}>{locales.titleHelp}</Text>\n            <Text style={styleSheet.ctaHelp}>{locales.ctaHelp}</Text>\n          </Touchable>\n        </View>\n      </Animated.View>\n    </Animated.View>\n  );\n};\n\nexport default Welcome;\n"],"mappings":"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"}

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',