@coorpacademy/components 10.30.10-alpha.7 → 10.30.11-alpha.1

package/es/atom/picture/index.d.ts

@@ -3,6 +3,7 @@ declare function Picture(props: any): JSX.Element;
 declare namespace Picture {
     namespace propTypes {
         const src: PropTypes.Requireable<any>;
+        const alt: PropTypes.Requireable<string>;
     }
 }
 import PropTypes from "prop-types";

package/es/atom/picture/index.js

@@ -25,11 +25,11 @@ const toSrcSet = ({
 const toSetAlt = ({
   alt
 }) => {
-  return !alt ? {
+  return alt ? {
+    alt
+  } : {
     alt: '',
     'aria-hidden': true
-  } : {
-    alt
   };
 };
 
@@ -48,7 +48,8 @@ const Picture = props => {
 };
 
 Picture.propTypes = process.env.NODE_ENV !== "production" ? {
-  src: PropTypes.oneOfType([SrcPropType, PropTypes.objectOf(SrcPropType)])
+  src: PropTypes.oneOfType([SrcPropType, PropTypes.objectOf(SrcPropType)]),
+  alt: PropTypes.string
 } : {};
 export default Picture;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","SrcPropType","style","toSrcSet","src","key","url","toSetAlt","alt","Picture","props","empty","propTypes","oneOfType","objectOf"],"sources":["../../../src/atom/picture/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {filter, get, isNil, isObject, join, map, pipe, set, toPairs} from 'lodash/fp';\nimport {SrcPropType} from '../../util/proptypes';\nimport style from './style.css';\n\nconst toSrcSet = ({src}) => {\n  if (!isObject(src)) return {};\n  return pipe(\n    set(\n      'srcSet',\n      pipe(\n        toPairs,\n        filter(([key, url]) => url),\n        map(([key, url]) => `${url} ${key}`),\n        join(',')\n      )(src)\n    ),\n    set('src', get('1x', src))\n  )({});\n};\n\nconst toSetAlt = ({alt}) => {\n  return !alt ? {alt: '', 'aria-hidden': true} : {alt};\n};\n\nconst Picture = props => {\n  const {src} = props;\n  if (isNil(src)) {\n    return <div className={style.empty} />;\n  }\n  return <img {...props} {...toSrcSet(props)} {...toSetAlt(props)} />;\n};\n\nPicture.propTypes = {\n  src: PropTypes.oneOfType([SrcPropType, PropTypes.objectOf(SrcPropType)])\n};\n\nexport default Picture;\n"],"mappings":";;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,SAAQC,WAAR,QAA0B,sBAA1B;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,QAAQ,GAAG,CAAC;EAACC;AAAD,CAAD,KAAW;EAC1B,IAAI,CAAC,UAASA,GAAT,CAAL,EAAoB,OAAO,EAAP;EACpB,OAAO,MACL,KACE,QADF,EAEE,gBAEE,QAAO,CAAC,CAACC,GAAD,EAAMC,GAAN,CAAD,KAAgBA,GAAvB,CAFF,EAGE,KAAI,CAAC,CAACD,GAAD,EAAMC,GAAN,CAAD,KAAiB,GAAEA,GAAI,IAAGD,GAAI,EAAlC,CAHF,EAIE,MAAK,GAAL,CAJF,EAKED,GALF,CAFF,CADK,EAUL,KAAI,KAAJ,EAAW,KAAI,IAAJ,EAAUA,GAAV,CAAX,CAVK,EAWL,EAXK,CAAP;AAYD,CAdD;;AAgBA,MAAMG,QAAQ,GAAG,CAAC;EAACC;AAAD,CAAD,KAAW;EAC1B,OAAO,CAACA,GAAD,GAAO;IAACA,GAAG,EAAE,EAAN;IAAU,eAAe;EAAzB,CAAP,GAAwC;IAACA;EAAD,CAA/C;AACD,CAFD;;AAIA,MAAMC,OAAO,GAAGC,KAAK,IAAI;EACvB,MAAM;IAACN;EAAD,IAAQM,KAAd;;EACA,IAAI,OAAMN,GAAN,CAAJ,EAAgB;IACd,oBAAO;MAAK,SAAS,EAAEF,KAAK,CAACS;IAAtB,EAAP;EACD;;EACD,oBAAO,wCAASD,KAAT,EAAoBP,QAAQ,CAACO,KAAD,CAA5B,EAAyCH,QAAQ,CAACG,KAAD,CAAjD,EAAP;AACD,CAND;;AAQAD,OAAO,CAACG,SAAR,2CAAoB;EAClBR,GAAG,EAAEJ,SAAS,CAACa,SAAV,CAAoB,CAACZ,WAAD,EAAcD,SAAS,CAACc,QAAV,CAAmBb,WAAnB,CAAd,CAApB;AADa,CAApB;AAIA,eAAeQ,OAAf"}
+{"version":3,"file":"index.js","names":["React","PropTypes","SrcPropType","style","toSrcSet","src","key","url","toSetAlt","alt","Picture","props","empty","propTypes","oneOfType","objectOf","string"],"sources":["../../../src/atom/picture/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {filter, get, isNil, isObject, join, map, pipe, set, toPairs} from 'lodash/fp';\nimport {SrcPropType} from '../../util/proptypes';\nimport style from './style.css';\n\nconst toSrcSet = ({src}) => {\n  if (!isObject(src)) return {};\n  return pipe(\n    set(\n      'srcSet',\n      pipe(\n        toPairs,\n        filter(([key, url]) => url),\n        map(([key, url]) => `${url} ${key}`),\n        join(',')\n      )(src)\n    ),\n    set('src', get('1x', src))\n  )({});\n};\n\nconst toSetAlt = ({alt}) => {\n  return alt ? {alt} : {alt: '', 'aria-hidden': true};\n};\n\nconst Picture = props => {\n  const {src} = props;\n  if (isNil(src)) {\n    return <div className={style.empty} />;\n  }\n  return <img {...props} {...toSrcSet(props)} {...toSetAlt(props)} />;\n};\n\nPicture.propTypes = {\n  src: PropTypes.oneOfType([SrcPropType, PropTypes.objectOf(SrcPropType)]),\n  alt: PropTypes.string\n};\n\nexport default Picture;\n"],"mappings":";;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,SAAQC,WAAR,QAA0B,sBAA1B;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,QAAQ,GAAG,CAAC;EAACC;AAAD,CAAD,KAAW;EAC1B,IAAI,CAAC,UAASA,GAAT,CAAL,EAAoB,OAAO,EAAP;EACpB,OAAO,MACL,KACE,QADF,EAEE,gBAEE,QAAO,CAAC,CAACC,GAAD,EAAMC,GAAN,CAAD,KAAgBA,GAAvB,CAFF,EAGE,KAAI,CAAC,CAACD,GAAD,EAAMC,GAAN,CAAD,KAAiB,GAAEA,GAAI,IAAGD,GAAI,EAAlC,CAHF,EAIE,MAAK,GAAL,CAJF,EAKED,GALF,CAFF,CADK,EAUL,KAAI,KAAJ,EAAW,KAAI,IAAJ,EAAUA,GAAV,CAAX,CAVK,EAWL,EAXK,CAAP;AAYD,CAdD;;AAgBA,MAAMG,QAAQ,GAAG,CAAC;EAACC;AAAD,CAAD,KAAW;EAC1B,OAAOA,GAAG,GAAG;IAACA;EAAD,CAAH,GAAW;IAACA,GAAG,EAAE,EAAN;IAAU,eAAe;EAAzB,CAArB;AACD,CAFD;;AAIA,MAAMC,OAAO,GAAGC,KAAK,IAAI;EACvB,MAAM;IAACN;EAAD,IAAQM,KAAd;;EACA,IAAI,OAAMN,GAAN,CAAJ,EAAgB;IACd,oBAAO;MAAK,SAAS,EAAEF,KAAK,CAACS;IAAtB,EAAP;EACD;;EACD,oBAAO,wCAASD,KAAT,EAAoBP,QAAQ,CAACO,KAAD,CAA5B,EAAyCH,QAAQ,CAACG,KAAD,CAAjD,EAAP;AACD,CAND;;AAQAD,OAAO,CAACG,SAAR,2CAAoB;EAClBR,GAAG,EAAEJ,SAAS,CAACa,SAAV,CAAoB,CAACZ,WAAD,EAAcD,SAAS,CAACc,QAAV,CAAmBb,WAAnB,CAAd,CAApB,CADa;EAElBO,GAAG,EAAER,SAAS,CAACe;AAFG,CAApB;AAKA,eAAeN,OAAf"}

package/es/behaviours/use-translate-vertically.native.d.ts

@@ -0,0 +1,16 @@
+import { Animated } from 'react-native';
+declare type Params = Omit<Animated.TimingAnimationConfig, 'useNativeDriver' | 'toValue'> & {
+    onFinished?: () => void;
+    fromValue?: number;
+    toValue?: Animated.TimingAnimationConfig['toValue'];
+};
+declare const useTranslateVertically: (params?: Params) => {
+    translate: () => void;
+    animatedY: {
+        transform: {
+            translateY: Animated.Value;
+        }[];
+    };
+};
+export default useTranslateVertically;
+//# sourceMappingURL=use-translate-vertically.native.d.ts.map

package/es/behaviours/use-translate-vertically.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-translate-vertically.native.d.ts","sourceRoot":"","sources":["../../src/behaviours/use-translate-vertically.native.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,cAAc,CAAC;AAEtC,aAAK,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,qBAAqB,EAAE,iBAAiB,GAAG,SAAS,CAAC,GAAG;IAClF,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,QAAQ,CAAC,qBAAqB,CAAC,SAAS,CAAC,CAAC;CACrD,CAAC;AAEF,QAAA,MAAM,sBAAsB,YAAY,MAAM;;;;;;;CAkB7C,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/es/behaviours/use-translate-vertically.native.js

@@ -0,0 +1,44 @@
+const _excluded = ["fromValue", "toValue", "duration", "onFinished"];
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import { useCallback, useRef } from 'react';
+import { Animated } from 'react-native';
+
+const useTranslateVertically = (params = {}) => {
+  const {
+    fromValue = 0,
+    toValue = 100,
+    duration = 550,
+    onFinished
+  } = params,
+        othersParams = _objectWithoutPropertiesLoose(params, _excluded);
+
+  const translateY = useRef(new Animated.Value(fromValue)).current;
+  const translate = useCallback(() => {
+    Animated.timing(translateY, _extends({}, othersParams, {
+      toValue,
+      duration,
+      useNativeDriver: true
+    })).start(({
+      finished
+    }) => {
+      if (finished) {
+        onFinished?.();
+      }
+    });
+  }, [onFinished, duration, othersParams, toValue, translateY]);
+  return {
+    translate,
+    animatedY: {
+      transform: [{
+        translateY
+      }]
+    }
+  };
+};
+
+export default useTranslateVertically;
+//# sourceMappingURL=use-translate-vertically.native.js.map

package/es/behaviours/use-translate-vertically.native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-translate-vertically.native.js","names":["useCallback","useRef","Animated","useTranslateVertically","params","fromValue","toValue","duration","onFinished","othersParams","translateY","Value","current","translate","timing","useNativeDriver","start","finished","animatedY","transform"],"sources":["../../src/behaviours/use-translate-vertically.native.tsx"],"sourcesContent":["import {useCallback, useRef} from 'react';\nimport {Animated} from 'react-native';\n\ntype Params = Omit<Animated.TimingAnimationConfig, 'useNativeDriver' | 'toValue'> & {\n  onFinished?: () => void;\n  fromValue?: number;\n  toValue?: Animated.TimingAnimationConfig['toValue'];\n};\n\nconst useTranslateVertically = (params: Params = {}) => {\n  const {fromValue = 0, toValue = 100, duration = 550, onFinished, ...othersParams} = params;\n  const translateY = useRef(new Animated.Value(fromValue)).current;\n\n  const translate = useCallback(() => {\n    Animated.timing(translateY, {\n      ...othersParams,\n      toValue,\n      duration,\n      useNativeDriver: true\n    }).start(({finished}) => {\n      if (finished) {\n        onFinished?.();\n      }\n    });\n  }, [onFinished, duration, othersParams, toValue, translateY]);\n\n  return {translate, animatedY: {transform: [{translateY}]}};\n};\n\nexport default useTranslateVertically;\n"],"mappings":";;;;;;AAAA,SAAQA,WAAR,EAAqBC,MAArB,QAAkC,OAAlC;AACA,SAAQC,QAAR,QAAuB,cAAvB;;AAQA,MAAMC,sBAAsB,GAAG,CAACC,MAAc,GAAG,EAAlB,KAAyB;EACtD,MAAM;IAACC,SAAS,GAAG,CAAb;IAAgBC,OAAO,GAAG,GAA1B;IAA+BC,QAAQ,GAAG,GAA1C;IAA+CC;EAA/C,IAA8EJ,MAApF;EAAA,MAAoEK,YAApE,iCAAoFL,MAApF;;EACA,MAAMM,UAAU,GAAGT,MAAM,CAAC,IAAIC,QAAQ,CAACS,KAAb,CAAmBN,SAAnB,CAAD,CAAN,CAAsCO,OAAzD;EAEA,MAAMC,SAAS,GAAGb,WAAW,CAAC,MAAM;IAClCE,QAAQ,CAACY,MAAT,CAAgBJ,UAAhB,eACKD,YADL;MAEEH,OAFF;MAGEC,QAHF;MAIEQ,eAAe,EAAE;IAJnB,IAKGC,KALH,CAKS,CAAC;MAACC;IAAD,CAAD,KAAgB;MACvB,IAAIA,QAAJ,EAAc;QACZT,UAAU;MACX;IACF,CATD;EAUD,CAX4B,EAW1B,CAACA,UAAD,EAAaD,QAAb,EAAuBE,YAAvB,EAAqCH,OAArC,EAA8CI,UAA9C,CAX0B,CAA7B;EAaA,OAAO;IAACG,SAAD;IAAYK,SAAS,EAAE;MAACC,SAAS,EAAE,CAAC;QAACT;MAAD,CAAD;IAAZ;EAAvB,CAAP;AACD,CAlBD;;AAoBA,eAAeP,sBAAf"}

package/es/behaviours/use-update-opacity.native.d.ts

@@ -0,0 +1,14 @@
+import { Animated } from 'react-native';
+declare type Params = Omit<Animated.TimingAnimationConfig, 'useNativeDriver' | 'toValue'> & {
+    onFadeInFinished?: () => void;
+    onFadeOutFinished?: () => void;
+};
+declare const useUpdateOpacity: (params?: Params) => {
+    fadeIn: () => void;
+    fadeOut: () => void;
+    animatedOpacity: {
+        opacity: Animated.Value;
+    };
+};
+export default useUpdateOpacity;
+//# sourceMappingURL=use-update-opacity.native.d.ts.map

package/es/behaviours/use-update-opacity.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-update-opacity.native.d.ts","sourceRoot":"","sources":["../../src/behaviours/use-update-opacity.native.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,cAAc,CAAC;AAEtC,aAAK,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,qBAAqB,EAAE,iBAAiB,GAAG,SAAS,CAAC,GAAG;IAClF,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC,CAAC;AAEF,QAAA,MAAM,gBAAgB,YAAY,MAAM;;;;;;CAgCvC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/es/behaviours/use-update-opacity.native.js

@@ -0,0 +1,55 @@
+const _excluded = ["duration", "onFadeInFinished", "onFadeOutFinished"];
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import { useCallback, useRef } from 'react';
+import { Animated } from 'react-native';
+
+const useUpdateOpacity = (params = {}) => {
+  const {
+    duration = 750,
+    onFadeInFinished,
+    onFadeOutFinished
+  } = params,
+        othersParams = _objectWithoutPropertiesLoose(params, _excluded);
+
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const fadeIn = useCallback(() => {
+    Animated.timing(fadeAnim, _extends({}, othersParams, {
+      toValue: 1,
+      duration,
+      useNativeDriver: true
+    })).start(({
+      finished
+    }) => {
+      if (finished) {
+        onFadeInFinished?.();
+      }
+    });
+  }, [duration, fadeAnim, onFadeInFinished, othersParams]);
+  const fadeOut = useCallback(() => {
+    Animated.timing(fadeAnim, _extends({}, othersParams, {
+      toValue: 0,
+      duration,
+      useNativeDriver: true
+    })).start(({
+      finished
+    }) => {
+      if (finished) {
+        onFadeOutFinished?.();
+      }
+    });
+  }, [duration, fadeAnim, onFadeOutFinished, othersParams]);
+  return {
+    fadeIn,
+    fadeOut,
+    animatedOpacity: {
+      opacity: fadeAnim
+    }
+  };
+};
+
+export default useUpdateOpacity;
+//# sourceMappingURL=use-update-opacity.native.js.map

package/es/behaviours/use-update-opacity.native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-update-opacity.native.js","names":["useCallback","useRef","Animated","useUpdateOpacity","params","duration","onFadeInFinished","onFadeOutFinished","othersParams","fadeAnim","Value","current","fadeIn","timing","toValue","useNativeDriver","start","finished","fadeOut","animatedOpacity","opacity"],"sources":["../../src/behaviours/use-update-opacity.native.tsx"],"sourcesContent":["import {useCallback, useRef} from 'react';\nimport {Animated} from 'react-native';\n\ntype Params = Omit<Animated.TimingAnimationConfig, 'useNativeDriver' | 'toValue'> & {\n  onFadeInFinished?: () => void;\n  onFadeOutFinished?: () => void;\n};\n\nconst useUpdateOpacity = (params: Params = {}) => {\n  const {duration = 750, onFadeInFinished, onFadeOutFinished, ...othersParams} = params;\n\n  const fadeAnim = useRef(new Animated.Value(0)).current;\n\n  const fadeIn = useCallback(() => {\n    Animated.timing(fadeAnim, {\n      ...othersParams,\n      toValue: 1,\n      duration,\n      useNativeDriver: true\n    }).start(({finished}) => {\n      if (finished) {\n        onFadeInFinished?.();\n      }\n    });\n  }, [duration, fadeAnim, onFadeInFinished, othersParams]);\n\n  const fadeOut = useCallback(() => {\n    Animated.timing(fadeAnim, {\n      ...othersParams,\n      toValue: 0,\n      duration,\n      useNativeDriver: true\n    }).start(({finished}) => {\n      if (finished) {\n        onFadeOutFinished?.();\n      }\n    });\n  }, [duration, fadeAnim, onFadeOutFinished, othersParams]);\n\n  return {fadeIn, fadeOut, animatedOpacity: {opacity: fadeAnim}};\n};\n\nexport default useUpdateOpacity;\n"],"mappings":";;;;;;AAAA,SAAQA,WAAR,EAAqBC,MAArB,QAAkC,OAAlC;AACA,SAAQC,QAAR,QAAuB,cAAvB;;AAOA,MAAMC,gBAAgB,GAAG,CAACC,MAAc,GAAG,EAAlB,KAAyB;EAChD,MAAM;IAACC,QAAQ,GAAG,GAAZ;IAAiBC,gBAAjB;IAAmCC;EAAnC,IAAyEH,MAA/E;EAAA,MAA+DI,YAA/D,iCAA+EJ,MAA/E;;EAEA,MAAMK,QAAQ,GAAGR,MAAM,CAAC,IAAIC,QAAQ,CAACQ,KAAb,CAAmB,CAAnB,CAAD,CAAN,CAA8BC,OAA/C;EAEA,MAAMC,MAAM,GAAGZ,WAAW,CAAC,MAAM;IAC/BE,QAAQ,CAACW,MAAT,CAAgBJ,QAAhB,eACKD,YADL;MAEEM,OAAO,EAAE,CAFX;MAGET,QAHF;MAIEU,eAAe,EAAE;IAJnB,IAKGC,KALH,CAKS,CAAC;MAACC;IAAD,CAAD,KAAgB;MACvB,IAAIA,QAAJ,EAAc;QACZX,gBAAgB;MACjB;IACF,CATD;EAUD,CAXyB,EAWvB,CAACD,QAAD,EAAWI,QAAX,EAAqBH,gBAArB,EAAuCE,YAAvC,CAXuB,CAA1B;EAaA,MAAMU,OAAO,GAAGlB,WAAW,CAAC,MAAM;IAChCE,QAAQ,CAACW,MAAT,CAAgBJ,QAAhB,eACKD,YADL;MAEEM,OAAO,EAAE,CAFX;MAGET,QAHF;MAIEU,eAAe,EAAE;IAJnB,IAKGC,KALH,CAKS,CAAC;MAACC;IAAD,CAAD,KAAgB;MACvB,IAAIA,QAAJ,EAAc;QACZV,iBAAiB;MAClB;IACF,CATD;EAUD,CAX0B,EAWxB,CAACF,QAAD,EAAWI,QAAX,EAAqBF,iBAArB,EAAwCC,YAAxC,CAXwB,CAA3B;EAaA,OAAO;IAACI,MAAD;IAASM,OAAT;IAAkBC,eAAe,EAAE;MAACC,OAAO,EAAEX;IAAV;EAAnC,CAAP;AACD,CAhCD;;AAkCA,eAAeN,gBAAf"}

package/es/molecule/card-congrats/index.native.js

@@ -76,13 +76,13 @@ const CardCongrats = ({
     style: styleSheet.card
   }, /*#__PURE__*/React.createElement(View, {
     style: styleSheet.animation
-  }, /*#__PURE__*/React.createElement(LottieView, {
+  }, animationUri ? /*#__PURE__*/React.createElement(LottieView, {
     source: {
       uri: animationUri
     },
     autoPlay: true,
     loop: false
-  })), /*#__PURE__*/React.createElement(Text, {
+  }) : null), /*#__PURE__*/React.createElement(Text, {
     style: styleSheet.cardTitle
   }, text), /*#__PURE__*/React.createElement(View, {
     style: [styleSheet.reward, {

package/es/molecule/card-congrats/index.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.js","names":["React","useEffect","useState","StyleSheet","Text","View","LottieView","useTemplateContext","BOX_STYLE","createStyleSheet","theme","create","animation","marginBottom","width","height","card","alignItems","paddingTop","paddingBottom","borderRadius","margin","backgroundColor","colors","white","cardTitle","fontWeight","fontSize","lineHeight","color","text","primary","reward","rewardText","marginHorizontal","iconBig","iconSmall","CardCongrats","animationUri","Icon","value","iconColor","textColor","direction","styleSheet","setStylesheet","_stylesheet","uri","flexDirection"],"sources":["../../../src/molecule/card-congrats/index.native.tsx"],"sourcesContent":["import React, {useEffect, useState} from 'react';\nimport {StyleSheet, Text, TextStyle, View, ViewStyle} from 'react-native';\nimport LottieView from 'lottie-react-native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {Theme} from '../../variables/theme.native';\nimport {BOX_STYLE} from '../../variables/shadow';\nimport {CardCongratsProps} from './types';\n\ntype StyleSheetType = {\n  animation: ViewStyle;\n  card: ViewStyle;\n  cardTitle: TextStyle;\n  iconBig: ViewStyle;\n  iconSmall: ViewStyle;\n  reward: ViewStyle;\n  rewardText: TextStyle;\n};\n\nconst createStyleSheet = (theme: Theme): StyleSheetType =>\n  StyleSheet.create({\n    animation: {\n      marginBottom: 12,\n      width: 132,\n      height: 132\n    },\n    // eslint-disable-next-line @coorpacademy/coorpacademy/no-overwriting-spread\n    card: {\n      alignItems: 'center',\n      paddingTop: 32,\n      paddingBottom: 24,\n      borderRadius: 24,\n      margin: 10,\n      width: 280,\n      height: 317,\n      ...BOX_STYLE,\n      backgroundColor: theme.colors.white\n    },\n    cardTitle: {\n      fontWeight: '400',\n      fontSize: 32,\n      lineHeight: 40,\n      color: theme.colors.text.primary\n    },\n    reward: {\n      alignItems: 'center'\n    },\n    rewardText: {\n      fontWeight: '700',\n      fontSize: 64,\n      lineHeight: 77,\n      marginHorizontal: 10\n    },\n    iconBig: {\n      width: 70,\n      height: 70\n    },\n    iconSmall: {\n      width: 53,\n      height: 53\n    }\n  });\n\nconst CardCongrats = ({\n  animationUri,\n  Icon,\n  value,\n  text,\n  iconColor,\n  textColor,\n  direction\n}: CardCongratsProps) => {\n  const {theme} = useTemplateContext();\n\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  return (\n    <View style={styleSheet.card}>\n      <View style={styleSheet.animation}>\n        <LottieView source={{uri: animationUri}} autoPlay loop={false} />\n      </View>\n      <Text style={styleSheet.cardTitle}>{text}</Text>\n      <View style={[styleSheet.reward, {flexDirection: direction}]}>\n        <Text style={[styleSheet.rewardText, {color: textColor}]}>{value}</Text>\n        <Icon style={styleSheet.iconSmall} color={iconColor} />\n      </View>\n    </View>\n  );\n};\n\nexport default CardCongrats;\n"],"mappings":"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"}
+{"version":3,"file":"index.native.js","names":["React","useEffect","useState","StyleSheet","Text","View","LottieView","useTemplateContext","BOX_STYLE","createStyleSheet","theme","create","animation","marginBottom","width","height","card","alignItems","paddingTop","paddingBottom","borderRadius","margin","backgroundColor","colors","white","cardTitle","fontWeight","fontSize","lineHeight","color","text","primary","reward","rewardText","marginHorizontal","iconBig","iconSmall","CardCongrats","animationUri","Icon","value","iconColor","textColor","direction","styleSheet","setStylesheet","_stylesheet","uri","flexDirection"],"sources":["../../../src/molecule/card-congrats/index.native.tsx"],"sourcesContent":["import React, {useEffect, useState} from 'react';\nimport {StyleSheet, Text, TextStyle, View, ViewStyle} from 'react-native';\nimport LottieView from 'lottie-react-native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {Theme} from '../../variables/theme.native';\nimport {BOX_STYLE} from '../../variables/shadow';\nimport {CardCongratsProps} from './types';\n\ntype StyleSheetType = {\n  animation: ViewStyle;\n  card: ViewStyle;\n  cardTitle: TextStyle;\n  iconBig: ViewStyle;\n  iconSmall: ViewStyle;\n  reward: ViewStyle;\n  rewardText: TextStyle;\n};\n\nconst createStyleSheet = (theme: Theme): StyleSheetType =>\n  StyleSheet.create({\n    animation: {\n      marginBottom: 12,\n      width: 132,\n      height: 132\n    },\n    // eslint-disable-next-line @coorpacademy/coorpacademy/no-overwriting-spread\n    card: {\n      alignItems: 'center',\n      paddingTop: 32,\n      paddingBottom: 24,\n      borderRadius: 24,\n      margin: 10,\n      width: 280,\n      height: 317,\n      ...BOX_STYLE,\n      backgroundColor: theme.colors.white\n    },\n    cardTitle: {\n      fontWeight: '400',\n      fontSize: 32,\n      lineHeight: 40,\n      color: theme.colors.text.primary\n    },\n    reward: {\n      alignItems: 'center'\n    },\n    rewardText: {\n      fontWeight: '700',\n      fontSize: 64,\n      lineHeight: 77,\n      marginHorizontal: 10\n    },\n    iconBig: {\n      width: 70,\n      height: 70\n    },\n    iconSmall: {\n      width: 53,\n      height: 53\n    }\n  });\n\nconst CardCongrats = ({\n  animationUri,\n  Icon,\n  value,\n  text,\n  iconColor,\n  textColor,\n  direction\n}: CardCongratsProps) => {\n  const {theme} = useTemplateContext();\n\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  return (\n    <View style={styleSheet.card}>\n      <View style={styleSheet.animation}>\n        {animationUri ? <LottieView source={{uri: animationUri}} autoPlay loop={false} /> : null}\n      </View>\n      <Text style={styleSheet.cardTitle}>{text}</Text>\n      <View style={[styleSheet.reward, {flexDirection: direction}]}>\n        <Text style={[styleSheet.rewardText, {color: textColor}]}>{value}</Text>\n        <Icon style={styleSheet.iconSmall} color={iconColor} />\n      </View>\n    </View>\n  );\n};\n\nexport default CardCongrats;\n"],"mappings":"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"}

package/es/molecule/card-congrats/types.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ColorValue, ViewStyle } from 'react-native';
 export declare type CardCongratsProps = {
-    animationUri: string;
+    animationUri: string | null;
     Icon: React.FC<{
         style: ViewStyle;
         color: ColorValue;

package/es/molecule/card-congrats/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/card-congrats/types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAC,UAAU,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AAEnD,oBAAY,iBAAiB,GAAG;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC;QAAC,KAAK,EAAE,SAAS,CAAC;QAAC,KAAK,EAAE,UAAU,CAAA;KAAC,CAAC,CAAC;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,UAAU,CAAC;IACtB,SAAS,EAAE,UAAU,CAAC;IACtB,SAAS,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;CACvC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/card-congrats/types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAC,UAAU,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AAEnD,oBAAY,iBAAiB,GAAG;IAC9B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC;QAAC,KAAK,EAAE,SAAS,CAAC;QAAC,KAAK,EAAE,UAAU,CAAA;KAAC,CAAC,CAAC;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,UAAU,CAAC;IACtB,SAAS,EAAE,UAAU,CAAC;IACtB,SAAS,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;CACvC,CAAC"}

package/es/molecule/card-congrats/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/molecule/card-congrats/types.ts"],"sourcesContent":["import {ColorValue, ViewStyle} from 'react-native';\n\nexport type CardCongratsProps = {\n  animationUri: string;\n  Icon: React.FC<{style: ViewStyle; color: ColorValue}>;\n  value: string;\n  text: string;\n  iconColor: ColorValue;\n  textColor: ColorValue;\n  direction: ViewStyle['flexDirection'];\n};\n"],"mappings":""}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/molecule/card-congrats/types.ts"],"sourcesContent":["import {ColorValue, ViewStyle} from 'react-native';\n\nexport type CardCongratsProps = {\n  animationUri: string | null;\n  Icon: React.FC<{style: ViewStyle; color: ColorValue}>;\n  value: string;\n  text: string;\n  iconColor: ColorValue;\n  textColor: ColorValue;\n  direction: ViewStyle['flexDirection'];\n};\n"],"mappings":""}

package/es/molecule/review-correction-popin/index.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/molecule/review-correction-popin/index.native.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAgC,0BAA0B,EAAC,MAAM,cAAc,CAAC;AA4QvF,QAAA,MAAM,qBAAqB,kDAMxB,0BAA0B,uBAiD5B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/molecule/review-correction-popin/index.native.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAgC,0BAA0B,EAAC,MAAM,cAAc,CAAC;AAyPvF,QAAA,MAAM,qBAAqB,kDAMxB,0BAA0B,uBAiD5B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/es/molecule/review-correction-popin/index.native.js

@@ -1,12 +1,13 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Animated, Easing, StyleSheet, View } from 'react-native';
 import { NovaCompositionCoorpacademyCheck as RightIcon, NovaSolidStatusClose as WrongIcon, NovaLineLoginKey1 as KlfIcon } from '@coorpacademy/nova-icons';
 import Html from '../../atom/html/index.native';
 import Text from '../../atom/text/index.native';
 import Touchable from '../../hoc/touchable/index.native';
 import { useTemplateContext } from '../../template/app-review/template-context';
+import useUpdateOpacity from '../../behaviours/use-update-opacity.native';
 
 const createStyleSheet = (theme, type) => StyleSheet.create({
   wrapper: {
@@ -54,8 +55,7 @@ const createStyleSheet = (theme, type) => StyleSheet.create({
     fontWeight: '600',
     lineHeight: 24,
     marginLeft: 12,
-    textTransform: 'uppercase',
-    wordBreak: 'break-word'
+    textTransform: 'uppercase'
   },
   feedbackSection: {
     marginVertical: theme.spacing.medium
@@ -72,8 +72,7 @@ const createStyleSheet = (theme, type) => StyleSheet.create({
     color: theme.colors.white,
     fontSize: 14,
     fontWeight: theme.fontWeight.extraBold,
-    lineHeight: 17,
-    wordBreak: 'break-word'
+    lineHeight: 17
   },
   htmlInfoMessage: {
     color: theme.colors.white,
@@ -181,23 +180,13 @@ const KlfButton = ({
   styleSheet
 }) => {
   const [displayTooltip, setDisplayTooltip] = useState(false);
-  const fadeAnim = useRef(new Animated.Value(0)).current;
-  const fadeIn = useCallback(() => {
-    Animated.timing(fadeAnim, {
-      toValue: 1,
-      duration: 1000,
-      easing: Easing.bezier(0.25, 1, 0.5, 1),
-      useNativeDriver: true
-    }).start();
-  }, [fadeAnim]);
-  const fadeOut = useCallback(() => {
-    Animated.timing(fadeAnim, {
-      toValue: 0,
-      duration: 500,
-      easing: Easing.bezier(0.25, 1, 0.5, 1),
-      useNativeDriver: true
-    }).start();
-  }, [fadeAnim]);
+  const {
+    fadeIn,
+    fadeOut,
+    animatedOpacity
+  } = useUpdateOpacity({
+    easing: Easing.bezier(0.25, 1, 0.5, 1)
+  });
   const handlePressKey = useCallback(() => {
     setDisplayTooltip(!displayTooltip);
     !displayTooltip ? fadeIn() : fadeOut();
@@ -220,9 +209,7 @@ const KlfButton = ({
   return /*#__PURE__*/React.createElement(View, {
     style: containerButtonKlf
   }, /*#__PURE__*/React.createElement(Animated.View, {
-    style: [containerTooltip, {
-      opacity: fadeAnim
-    }]
+    style: [containerTooltip, animatedOpacity]
   }, /*#__PURE__*/React.createElement(Touchable, {
     style: buttonTooltip,
     accessibilityLabel: `aria-label-tooltip`,

package/es/molecule/review-correction-popin/index.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.js","names":["React","useCallback","useEffect","useRef","useState","Animated","Easing","StyleSheet","View","NovaCompositionCoorpacademyCheck","RightIcon","NovaSolidStatusClose","WrongIcon","NovaLineLoginKey1","KlfIcon","Html","Text","Touchable","useTemplateContext","createStyleSheet","theme","type","create","wrapper","height","color","colors","white","display","popin","padding","spacing","medium","borderRadius","flexDirection","alignItems","backgroundColor","negative","positive","shadowColor","shadowOpacity","shadowOffset","width","shadowRadius","elevation","correctionSection","iconCircle","justifyContent","opacity","icon","resultLabel","fontSize","fontWeight","lineHeight","marginLeft","textTransform","wordBreak","feedbackSection","marginVertical","labelContainer","alignSelf","paddingHorizontal","tiny","paddingVertical","micro","marginBottom","label","extraBold","htmlInfoMessage","button","base","small","buttonText","cta","bold","textAlign","containerButtonKlf","buttonKlf","buttonKlfActive","buttonKlfText","iconKey","marginRight","containerTooltip","zIndex","position","black","buttonTooltip","bottom","right","htmlTooltipText","text","primary","triangleTooltip","borderStyle","borderLeftWidth","borderRightWidth","borderBottomWidth","borderTopWidth","borderLeftColor","borderTopColor","borderRightColor","borderBottomColor","transform","rotate","left","top","KlfButton","klf","styleSheet","displayTooltip","setDisplayTooltip","fadeAnim","Value","current","fadeIn","timing","toValue","duration","easing","bezier","useNativeDriver","start","fadeOut","handlePressKey","tooltip","ICONS","wrong","ReviewCorrectionPopin","information","next","templateContext","setStylesheet","handlePressNext","onClick","Icon","_stylesheet","message"],"sources":["../../../src/molecule/review-correction-popin/index.native.tsx"],"sourcesContent":["import React, {useCallback, useEffect, useRef, useState} from 'react';\nimport {Animated, Easing, TextStyle, StyleSheet, View, ViewStyle} from 'react-native';\nimport {\n  NovaCompositionCoorpacademyCheck as RightIcon,\n  NovaSolidStatusClose as WrongIcon,\n  NovaLineLoginKey1 as KlfIcon\n} from '@coorpacademy/nova-icons';\nimport Html from '../../atom/html/index.native';\nimport {Theme} from '../../variables/theme.native';\nimport Text from '../../atom/text/index.native';\nimport Touchable from '../../hoc/touchable/index.native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {ReviewCorrectionPopinKLFProps, ReviewCorrectionPopinProps} from './prop-types';\n\ninterface StyleSheetType {\n  wrapper: ViewStyle;\n  popin: ViewStyle;\n  correctionSection: ViewStyle;\n  iconCircle: ViewStyle;\n  icon: ViewStyle;\n  resultLabel: TextStyle;\n  feedbackSection: ViewStyle;\n  labelContainer: ViewStyle;\n  label: TextStyle;\n  htmlInfoMessage: TextStyle;\n  button: ViewStyle;\n  buttonText: TextStyle;\n  buttonKlf: ViewStyle;\n  buttonKlfActive: TextStyle;\n  buttonKlfText: TextStyle;\n  iconKey: ViewStyle;\n  containerTooltip: ViewStyle;\n  buttonTooltip: ViewStyle;\n  containerButtonKlf: ViewStyle;\n  triangleTooltip: ViewStyle;\n  htmlTooltipText: TextStyle;\n}\n\nconst createStyleSheet = (theme: Theme, type: string): StyleSheetType =>\n  StyleSheet.create({\n    wrapper: {\n      height: 'auto',\n      color: theme.colors.white,\n      display: 'flex'\n    },\n    popin: {\n      padding: theme.spacing.medium,\n      borderRadius: 16,\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'flex-start',\n      backgroundColor: type === 'wrong' ? theme.colors.negative : theme.colors.positive,\n      shadowColor: type === 'wrong' ? theme.colors.negative : theme.colors.positive,\n      shadowOpacity: 0.5,\n      shadowOffset: {width: 0, height: 0},\n      shadowRadius: 15,\n      elevation: 4\n    },\n    correctionSection: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      width: '80%'\n    },\n    iconCircle: {\n      width: 60,\n      height: 60,\n      alignItems: 'center',\n      justifyContent: 'center',\n      backgroundColor: theme.colors.white,\n      opacity: 0.7,\n      borderRadius: 50\n    },\n    icon: {\n      height: 30,\n      width: 30\n    },\n    resultLabel: {\n      color: theme.colors.white,\n      fontSize: 24,\n      fontWeight: '600',\n      lineHeight: 24,\n      marginLeft: 12,\n      textTransform: 'uppercase',\n      wordBreak: 'break-word'\n    },\n    feedbackSection: {\n      marginVertical: theme.spacing.medium\n    },\n    labelContainer: {\n      alignSelf: 'flex-start',\n      backgroundColor: 'rgba(255, 255, 255, 0.3)',\n      borderRadius: 56,\n      paddingHorizontal: theme.spacing.tiny,\n      paddingVertical: theme.spacing.micro,\n      marginBottom: 8\n    },\n    label: {\n      color: theme.colors.white,\n      fontSize: 14,\n      fontWeight: theme.fontWeight.extraBold,\n      lineHeight: 17,\n      wordBreak: 'break-word'\n    },\n    htmlInfoMessage: {\n      color: theme.colors.white,\n      fontSize: 16,\n      fontWeight: '600',\n      lineHeight: 19\n    },\n    button: {\n      alignSelf: 'stretch',\n      backgroundColor: theme.colors.white,\n      borderRadius: 7,\n      paddingHorizontal: theme.spacing.base,\n      paddingVertical: theme.spacing.small\n    },\n    buttonText: {\n      color: theme.colors.cta,\n      fontSize: 14,\n      fontWeight: theme.fontWeight.bold,\n      lineHeight: 20,\n      textAlign: 'center'\n    },\n    containerButtonKlf: {\n      width: '100%'\n    },\n    buttonKlf: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      justifyContent: 'center',\n      backgroundColor: 'rgba(255, 255, 255, 0.1)',\n      borderRadius: 7,\n      paddingHorizontal: theme.spacing.base,\n      paddingVertical: theme.spacing.small,\n      marginBottom: theme.spacing.tiny\n    },\n    buttonKlfActive: {\n      backgroundColor:\n        'linear-gradient(0deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), rgba(255, 255, 255, 0.1)'\n    },\n    buttonKlfText: {\n      color: 'white',\n      fontSize: 14,\n      fontWeight: theme.fontWeight.bold,\n      lineHeight: 20,\n      textAlign: 'center'\n    },\n    iconKey: {\n      width: 12,\n      height: 12,\n      marginRight: theme.spacing.tiny\n    },\n    containerTooltip: {\n      zIndex: 30,\n      position: 'relative',\n      shadowColor: theme.colors.black,\n      shadowOpacity: 0.3,\n      shadowOffset: {width: 0, height: 0},\n      shadowRadius: 8\n    },\n    buttonTooltip: {\n      flexDirection: 'column',\n      justifyContent: 'center',\n      backgroundColor: theme.colors.white,\n      borderRadius: 15,\n      padding: theme.spacing.small,\n      width: '112%',\n      position: 'absolute',\n      bottom: 4,\n      right: -15,\n      zIndex: 20\n    },\n    htmlTooltipText: {\n      color: theme.colors.text.primary,\n      fontSize: 16,\n      fontWeight: '600',\n      lineHeight: 22,\n      textAlign: 'center'\n    },\n    triangleTooltip: {\n      width: 0,\n      height: 0,\n      backgroundColor: 'transparent',\n      borderStyle: 'solid',\n      borderLeftWidth: 13,\n      borderRightWidth: 13,\n      borderBottomWidth: 13,\n      borderTopWidth: 13,\n      borderLeftColor: 'transparent',\n      borderTopColor: 'transparent',\n      borderRightColor: theme.colors.white,\n      borderBottomColor: theme.colors.white,\n      transform: [{rotate: '45deg'}],\n      position: 'absolute',\n      left: 110,\n      top: -20,\n      borderRadius: 4\n    }\n  });\n\nconst KlfButton = ({\n  klf,\n  styleSheet\n}: {\n  klf: ReviewCorrectionPopinKLFProps;\n  styleSheet: StyleSheetType;\n}) => {\n  const [displayTooltip, setDisplayTooltip] = useState(false);\n\n  const fadeAnim = useRef(new Animated.Value(0)).current;\n\n  const fadeIn = useCallback(() => {\n    Animated.timing(fadeAnim, {\n      toValue: 1,\n      duration: 1000,\n      easing: Easing.bezier(0.25, 1, 0.5, 1),\n      useNativeDriver: true\n    }).start();\n  }, [fadeAnim]);\n\n  const fadeOut = useCallback(() => {\n    Animated.timing(fadeAnim, {\n      toValue: 0,\n      duration: 500,\n      easing: Easing.bezier(0.25, 1, 0.5, 1),\n      useNativeDriver: true\n    }).start();\n  }, [fadeAnim]);\n\n  const handlePressKey = useCallback(() => {\n    setDisplayTooltip(!displayTooltip);\n    !displayTooltip ? fadeIn() : fadeOut();\n  }, [displayTooltip, fadeIn, fadeOut]);\n\n  const {\n    buttonKlf,\n    buttonKlfActive,\n    buttonKlfText,\n    containerButtonKlf,\n    containerTooltip,\n    buttonTooltip,\n    htmlTooltipText,\n    iconKey,\n    triangleTooltip\n  } = styleSheet;\n\n  const {label, tooltip} = klf;\n\n  return (\n    <View style={containerButtonKlf}>\n      <Animated.View style={[containerTooltip, {opacity: fadeAnim}]}>\n        <Touchable\n          style={buttonTooltip}\n          accessibilityLabel={`aria-label-tooltip`}\n          isHighlight\n          onPress={handlePressKey}\n          testID=\"button-tooltip\"\n        >\n          <Html style={htmlTooltipText}>{tooltip}</Html>\n        </Touchable>\n        <View style={triangleTooltip} />\n      </Animated.View>\n      <Touchable\n        style={displayTooltip ? {...buttonKlf, ...buttonKlfActive} : buttonKlf}\n        accessibilityLabel={`aria-label-${label}`}\n        onPress={handlePressKey}\n        testID=\"button-klf\"\n      >\n        <KlfIcon style={iconKey} color=\"white\" />\n        <Text style={buttonKlfText}>{label}</Text>\n      </Touchable>\n    </View>\n  );\n};\n\nconst ICONS = {\n  right: RightIcon,\n  wrong: WrongIcon\n};\n\nconst ReviewCorrectionPopin = ({\n  information,\n  klf,\n  next,\n  type,\n  resultLabel\n}: ReviewCorrectionPopinProps) => {\n  const templateContext = useTemplateContext();\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n  const {theme} = templateContext;\n  const handlePressNext = next.onClick;\n\n  const Icon = ICONS[type];\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme, type);\n    setStylesheet(_stylesheet);\n  }, [theme, type]);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  return (\n    <View style={styleSheet.wrapper}>\n      <View style={styleSheet.popin}>\n        <View style={styleSheet.correctionSection}>\n          <View style={styleSheet.iconCircle}>\n            <Icon\n              style={styleSheet.icon}\n              color={type === 'wrong' ? theme.colors.negative : theme.colors.positive}\n            />\n          </View>\n          <Text style={styleSheet.resultLabel}>{resultLabel}</Text>\n        </View>\n        <View style={styleSheet.feedbackSection} accessibilityLabel=\"answer-information\">\n          <View style={styleSheet.labelContainer} needsOffscreenAlphaCompositing>\n            <Text accessibilityLabel={information.label} style={styleSheet.label}>\n              {information.label}\n            </Text>\n          </View>\n          <Html style={styleSheet.htmlInfoMessage}>{information.message}</Html>\n        </View>\n        {klf && type === 'wrong' ? <KlfButton styleSheet={styleSheet} klf={klf} /> : null}\n        <Touchable\n          style={styleSheet.button}\n          onPress={handlePressNext}\n          accessibilityLabel={next['aria-label']}\n          testID={next['data-name']}\n        >\n          <Text style={styleSheet.buttonText}>{next.label}</Text>\n        </Touchable>\n      </View>\n    </View>\n  );\n};\n\nexport default ReviewCorrectionPopin;\n"],"mappings":"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"}
+{"version":3,"file":"index.native.js","names":["React","useCallback","useEffect","useState","Animated","Easing","StyleSheet","View","NovaCompositionCoorpacademyCheck","RightIcon","NovaSolidStatusClose","WrongIcon","NovaLineLoginKey1","KlfIcon","Html","Text","Touchable","useTemplateContext","useUpdateOpacity","createStyleSheet","theme","type","create","wrapper","height","color","colors","white","display","popin","padding","spacing","medium","borderRadius","flexDirection","alignItems","backgroundColor","negative","positive","shadowColor","shadowOpacity","shadowOffset","width","shadowRadius","elevation","correctionSection","iconCircle","justifyContent","opacity","icon","resultLabel","fontSize","fontWeight","lineHeight","marginLeft","textTransform","feedbackSection","marginVertical","labelContainer","alignSelf","paddingHorizontal","tiny","paddingVertical","micro","marginBottom","label","extraBold","htmlInfoMessage","button","base","small","buttonText","cta","bold","textAlign","containerButtonKlf","buttonKlf","buttonKlfActive","buttonKlfText","iconKey","marginRight","containerTooltip","zIndex","position","black","buttonTooltip","bottom","right","htmlTooltipText","text","primary","triangleTooltip","borderStyle","borderLeftWidth","borderRightWidth","borderBottomWidth","borderTopWidth","borderLeftColor","borderTopColor","borderRightColor","borderBottomColor","transform","rotate","left","top","KlfButton","klf","styleSheet","displayTooltip","setDisplayTooltip","fadeIn","fadeOut","animatedOpacity","easing","bezier","handlePressKey","tooltip","ICONS","wrong","ReviewCorrectionPopin","information","next","templateContext","setStylesheet","handlePressNext","onClick","Icon","_stylesheet","message"],"sources":["../../../src/molecule/review-correction-popin/index.native.tsx"],"sourcesContent":["import React, {useCallback, useEffect, useState} from 'react';\nimport {Animated, Easing, TextStyle, StyleSheet, View, ViewStyle} from 'react-native';\nimport {\n  NovaCompositionCoorpacademyCheck as RightIcon,\n  NovaSolidStatusClose as WrongIcon,\n  NovaLineLoginKey1 as KlfIcon\n} from '@coorpacademy/nova-icons';\nimport Html from '../../atom/html/index.native';\nimport {Theme} from '../../variables/theme.native';\nimport Text from '../../atom/text/index.native';\nimport Touchable from '../../hoc/touchable/index.native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport useUpdateOpacity from '../../behaviours/use-update-opacity.native';\nimport {ReviewCorrectionPopinKLFProps, ReviewCorrectionPopinProps} from './prop-types';\n\ninterface StyleSheetType {\n  wrapper: ViewStyle;\n  popin: ViewStyle;\n  correctionSection: ViewStyle;\n  iconCircle: ViewStyle;\n  icon: ViewStyle;\n  resultLabel: TextStyle;\n  feedbackSection: ViewStyle;\n  labelContainer: ViewStyle;\n  label: TextStyle;\n  htmlInfoMessage: TextStyle;\n  button: ViewStyle;\n  buttonText: TextStyle;\n  buttonKlf: ViewStyle;\n  buttonKlfActive: TextStyle;\n  buttonKlfText: TextStyle;\n  iconKey: ViewStyle;\n  containerTooltip: ViewStyle;\n  buttonTooltip: ViewStyle;\n  containerButtonKlf: ViewStyle;\n  triangleTooltip: ViewStyle;\n  htmlTooltipText: TextStyle;\n}\n\nconst createStyleSheet = (theme: Theme, type: string): StyleSheetType =>\n  StyleSheet.create({\n    wrapper: {\n      height: 'auto',\n      color: theme.colors.white,\n      display: 'flex'\n    },\n    popin: {\n      padding: theme.spacing.medium,\n      borderRadius: 16,\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'flex-start',\n      backgroundColor: type === 'wrong' ? theme.colors.negative : theme.colors.positive,\n      shadowColor: type === 'wrong' ? theme.colors.negative : theme.colors.positive,\n      shadowOpacity: 0.5,\n      shadowOffset: {width: 0, height: 0},\n      shadowRadius: 15,\n      elevation: 4\n    },\n    correctionSection: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      width: '80%'\n    },\n    iconCircle: {\n      width: 60,\n      height: 60,\n      alignItems: 'center',\n      justifyContent: 'center',\n      backgroundColor: theme.colors.white,\n      opacity: 0.7,\n      borderRadius: 50\n    },\n    icon: {\n      height: 30,\n      width: 30\n    },\n    resultLabel: {\n      color: theme.colors.white,\n      fontSize: 24,\n      fontWeight: '600',\n      lineHeight: 24,\n      marginLeft: 12,\n      textTransform: 'uppercase'\n    },\n    feedbackSection: {\n      marginVertical: theme.spacing.medium\n    },\n    labelContainer: {\n      alignSelf: 'flex-start',\n      backgroundColor: 'rgba(255, 255, 255, 0.3)',\n      borderRadius: 56,\n      paddingHorizontal: theme.spacing.tiny,\n      paddingVertical: theme.spacing.micro,\n      marginBottom: 8\n    },\n    label: {\n      color: theme.colors.white,\n      fontSize: 14,\n      fontWeight: theme.fontWeight.extraBold,\n      lineHeight: 17\n    },\n    htmlInfoMessage: {\n      color: theme.colors.white,\n      fontSize: 16,\n      fontWeight: '600',\n      lineHeight: 19\n    },\n    button: {\n      alignSelf: 'stretch',\n      backgroundColor: theme.colors.white,\n      borderRadius: 7,\n      paddingHorizontal: theme.spacing.base,\n      paddingVertical: theme.spacing.small\n    },\n    buttonText: {\n      color: theme.colors.cta,\n      fontSize: 14,\n      fontWeight: theme.fontWeight.bold,\n      lineHeight: 20,\n      textAlign: 'center'\n    },\n    containerButtonKlf: {\n      width: '100%'\n    },\n    buttonKlf: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      justifyContent: 'center',\n      backgroundColor: 'rgba(255, 255, 255, 0.1)',\n      borderRadius: 7,\n      paddingHorizontal: theme.spacing.base,\n      paddingVertical: theme.spacing.small,\n      marginBottom: theme.spacing.tiny\n    },\n    buttonKlfActive: {\n      backgroundColor:\n        'linear-gradient(0deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), rgba(255, 255, 255, 0.1)'\n    },\n    buttonKlfText: {\n      color: 'white',\n      fontSize: 14,\n      fontWeight: theme.fontWeight.bold,\n      lineHeight: 20,\n      textAlign: 'center'\n    },\n    iconKey: {\n      width: 12,\n      height: 12,\n      marginRight: theme.spacing.tiny\n    },\n    containerTooltip: {\n      zIndex: 30,\n      position: 'relative',\n      shadowColor: theme.colors.black,\n      shadowOpacity: 0.3,\n      shadowOffset: {width: 0, height: 0},\n      shadowRadius: 8\n    },\n    buttonTooltip: {\n      flexDirection: 'column',\n      justifyContent: 'center',\n      backgroundColor: theme.colors.white,\n      borderRadius: 15,\n      padding: theme.spacing.small,\n      width: '112%',\n      position: 'absolute',\n      bottom: 4,\n      right: -15,\n      zIndex: 20\n    },\n    htmlTooltipText: {\n      color: theme.colors.text.primary,\n      fontSize: 16,\n      fontWeight: '600',\n      lineHeight: 22,\n      textAlign: 'center'\n    },\n    triangleTooltip: {\n      width: 0,\n      height: 0,\n      backgroundColor: 'transparent',\n      borderStyle: 'solid',\n      borderLeftWidth: 13,\n      borderRightWidth: 13,\n      borderBottomWidth: 13,\n      borderTopWidth: 13,\n      borderLeftColor: 'transparent',\n      borderTopColor: 'transparent',\n      borderRightColor: theme.colors.white,\n      borderBottomColor: theme.colors.white,\n      transform: [{rotate: '45deg'}],\n      position: 'absolute',\n      left: 110,\n      top: -20,\n      borderRadius: 4\n    }\n  });\n\nconst KlfButton = ({\n  klf,\n  styleSheet\n}: {\n  klf: ReviewCorrectionPopinKLFProps;\n  styleSheet: StyleSheetType;\n}) => {\n  const [displayTooltip, setDisplayTooltip] = useState(false);\n  const {fadeIn, fadeOut, animatedOpacity} = useUpdateOpacity({\n    easing: Easing.bezier(0.25, 1, 0.5, 1)\n  });\n\n  const handlePressKey = useCallback(() => {\n    setDisplayTooltip(!displayTooltip);\n    !displayTooltip ? fadeIn() : fadeOut();\n  }, [displayTooltip, fadeIn, fadeOut]);\n\n  const {\n    buttonKlf,\n    buttonKlfActive,\n    buttonKlfText,\n    containerButtonKlf,\n    containerTooltip,\n    buttonTooltip,\n    htmlTooltipText,\n    iconKey,\n    triangleTooltip\n  } = styleSheet;\n\n  const {label, tooltip} = klf;\n\n  return (\n    <View style={containerButtonKlf}>\n      <Animated.View style={[containerTooltip, animatedOpacity]}>\n        <Touchable\n          style={buttonTooltip}\n          accessibilityLabel={`aria-label-tooltip`}\n          isHighlight\n          onPress={handlePressKey}\n          testID=\"button-tooltip\"\n        >\n          <Html style={htmlTooltipText}>{tooltip}</Html>\n        </Touchable>\n        <View style={triangleTooltip} />\n      </Animated.View>\n      <Touchable\n        style={displayTooltip ? {...buttonKlf, ...buttonKlfActive} : buttonKlf}\n        accessibilityLabel={`aria-label-${label}`}\n        onPress={handlePressKey}\n        testID=\"button-klf\"\n      >\n        <KlfIcon style={iconKey} color=\"white\" />\n        <Text style={buttonKlfText}>{label}</Text>\n      </Touchable>\n    </View>\n  );\n};\n\nconst ICONS = {\n  right: RightIcon,\n  wrong: WrongIcon\n};\n\nconst ReviewCorrectionPopin = ({\n  information,\n  klf,\n  next,\n  type,\n  resultLabel\n}: ReviewCorrectionPopinProps) => {\n  const templateContext = useTemplateContext();\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n  const {theme} = templateContext;\n  const handlePressNext = next.onClick;\n\n  const Icon = ICONS[type];\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme, type);\n    setStylesheet(_stylesheet);\n  }, [theme, type]);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  return (\n    <View style={styleSheet.wrapper}>\n      <View style={styleSheet.popin}>\n        <View style={styleSheet.correctionSection}>\n          <View style={styleSheet.iconCircle}>\n            <Icon\n              style={styleSheet.icon}\n              color={type === 'wrong' ? theme.colors.negative : theme.colors.positive}\n            />\n          </View>\n          <Text style={styleSheet.resultLabel}>{resultLabel}</Text>\n        </View>\n        <View style={styleSheet.feedbackSection} accessibilityLabel=\"answer-information\">\n          <View style={styleSheet.labelContainer} needsOffscreenAlphaCompositing>\n            <Text accessibilityLabel={information.label} style={styleSheet.label}>\n              {information.label}\n            </Text>\n          </View>\n          <Html style={styleSheet.htmlInfoMessage}>{information.message}</Html>\n        </View>\n        {klf && type === 'wrong' ? <KlfButton styleSheet={styleSheet} klf={klf} /> : null}\n        <Touchable\n          style={styleSheet.button}\n          onPress={handlePressNext}\n          accessibilityLabel={next['aria-label']}\n          testID={next['data-name']}\n        >\n          <Text style={styleSheet.buttonText}>{next.label}</Text>\n        </Touchable>\n      </View>\n    </View>\n  );\n};\n\nexport default ReviewCorrectionPopin;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,WAAf,EAA4BC,SAA5B,EAAuCC,QAAvC,QAAsD,OAAtD;AACA,SAAQC,QAAR,EAAkBC,MAAlB,EAAqCC,UAArC,EAAiDC,IAAjD,QAAuE,cAAvE;AACA,SACEC,gCAAgC,IAAIC,SADtC,EAEEC,oBAAoB,IAAIC,SAF1B,EAGEC,iBAAiB,IAAIC,OAHvB,QAIO,0BAJP;AAKA,OAAOC,IAAP,MAAiB,8BAAjB;AAEA,OAAOC,IAAP,MAAiB,8BAAjB;AACA,OAAOC,SAAP,MAAsB,kCAAtB;AACA,SAAQC,kBAAR,QAAiC,4CAAjC;AACA,OAAOC,gBAAP,MAA6B,4CAA7B;;AA2BA,MAAMC,gBAAgB,GAAG,CAACC,KAAD,EAAeC,IAAf,KACvBf,UAAU,CAACgB,MAAX,CAAkB;EAChBC,OAAO,EAAE;IACPC,MAAM,EAAE,MADD;IAEPC,KAAK,EAAEL,KAAK,CAACM,MAAN,CAAaC,KAFb;IAGPC,OAAO,EAAE;EAHF,CADO;EAMhBC,KAAK,EAAE;IACLC,OAAO,EAAEV,KAAK,CAACW,OAAN,CAAcC,MADlB;IAELC,YAAY,EAAE,EAFT;IAGLL,OAAO,EAAE,MAHJ;IAILM,aAAa,EAAE,QAJV;IAKLC,UAAU,EAAE,YALP;IAMLC,eAAe,EAAEf,IAAI,KAAK,OAAT,GAAmBD,KAAK,CAACM,MAAN,CAAaW,QAAhC,GAA2CjB,KAAK,CAACM,MAAN,CAAaY,QANpE;IAOLC,WAAW,EAAElB,IAAI,KAAK,OAAT,GAAmBD,KAAK,CAACM,MAAN,CAAaW,QAAhC,GAA2CjB,KAAK,CAACM,MAAN,CAAaY,QAPhE;IAQLE,aAAa,EAAE,GARV;IASLC,YAAY,EAAE;MAACC,KAAK,EAAE,CAAR;MAAWlB,MAAM,EAAE;IAAnB,CATT;IAULmB,YAAY,EAAE,EAVT;IAWLC,SAAS,EAAE;EAXN,CANS;EAmBhBC,iBAAiB,EAAE;IACjBX,aAAa,EAAE,KADE;IAEjBC,UAAU,EAAE,QAFK;IAGjBO,KAAK,EAAE;EAHU,CAnBH;EAwBhBI,UAAU,EAAE;IACVJ,KAAK,EAAE,EADG;IAEVlB,MAAM,EAAE,EAFE;IAGVW,UAAU,EAAE,QAHF;IAIVY,cAAc,EAAE,QAJN;IAKVX,eAAe,EAAEhB,KAAK,CAACM,MAAN,CAAaC,KALpB;IAMVqB,OAAO,EAAE,GANC;IAOVf,YAAY,EAAE;EAPJ,CAxBI;EAiChBgB,IAAI,EAAE;IACJzB,MAAM,EAAE,EADJ;IAEJkB,KAAK,EAAE;EAFH,CAjCU;EAqChBQ,WAAW,EAAE;IACXzB,KAAK,EAAEL,KAAK,CAACM,MAAN,CAAaC,KADT;IAEXwB,QAAQ,EAAE,EAFC;IAGXC,UAAU,EAAE,KAHD;IAIXC,UAAU,EAAE,EAJD;IAKXC,UAAU,EAAE,EALD;IAMXC,aAAa,EAAE;EANJ,CArCG;EA6ChBC,eAAe,EAAE;IACfC,cAAc,EAAErC,KAAK,CAACW,OAAN,CAAcC;EADf,CA7CD;EAgDhB0B,cAAc,EAAE;IACdC,SAAS,EAAE,YADG;IAEdvB,eAAe,EAAE,0BAFH;IAGdH,YAAY,EAAE,EAHA;IAId2B,iBAAiB,EAAExC,KAAK,CAACW,OAAN,CAAc8B,IAJnB;IAKdC,eAAe,EAAE1C,KAAK,CAACW,OAAN,CAAcgC,KALjB;IAMdC,YAAY,EAAE;EANA,CAhDA;EAwDhBC,KAAK,EAAE;IACLxC,KAAK,EAAEL,KAAK,CAACM,MAAN,CAAaC,KADf;IAELwB,QAAQ,EAAE,EAFL;IAGLC,UAAU,EAAEhC,KAAK,CAACgC,UAAN,CAAiBc,SAHxB;IAILb,UAAU,EAAE;EAJP,CAxDS;EA8DhBc,eAAe,EAAE;IACf1C,KAAK,EAAEL,KAAK,CAACM,MAAN,CAAaC,KADL;IAEfwB,QAAQ,EAAE,EAFK;IAGfC,UAAU,EAAE,KAHG;IAIfC,UAAU,EAAE;EAJG,CA9DD;EAoEhBe,MAAM,EAAE;IACNT,SAAS,EAAE,SADL;IAENvB,eAAe,EAAEhB,KAAK,CAACM,MAAN,CAAaC,KAFxB;IAGNM,YAAY,EAAE,CAHR;IAIN2B,iBAAiB,EAAExC,KAAK,CAACW,OAAN,CAAcsC,IAJ3B;IAKNP,eAAe,EAAE1C,KAAK,CAACW,OAAN,CAAcuC;EALzB,CApEQ;EA2EhBC,UAAU,EAAE;IACV9C,KAAK,EAAEL,KAAK,CAACM,MAAN,CAAa8C,GADV;IAEVrB,QAAQ,EAAE,EAFA;IAGVC,UAAU,EAAEhC,KAAK,CAACgC,UAAN,CAAiBqB,IAHnB;IAIVpB,UAAU,EAAE,EAJF;IAKVqB,SAAS,EAAE;EALD,CA3EI;EAkFhBC,kBAAkB,EAAE;IAClBjC,KAAK,EAAE;EADW,CAlFJ;EAqFhBkC,SAAS,EAAE;IACT1C,aAAa,EAAE,KADN;IAETC,UAAU,EAAE,QAFH;IAGTY,cAAc,EAAE,QAHP;IAITX,eAAe,EAAE,0BAJR;IAKTH,YAAY,EAAE,CALL;IAMT2B,iBAAiB,EAAExC,KAAK,CAACW,OAAN,CAAcsC,IANxB;IAOTP,eAAe,EAAE1C,KAAK,CAACW,OAAN,CAAcuC,KAPtB;IAQTN,YAAY,EAAE5C,KAAK,CAACW,OAAN,CAAc8B;EARnB,CArFK;EA+FhBgB,eAAe,EAAE;IACfzC,eAAe,EACb;EAFa,CA/FD;EAmGhB0C,aAAa,EAAE;IACbrD,KAAK,EAAE,OADM;IAEb0B,QAAQ,EAAE,EAFG;IAGbC,UAAU,EAAEhC,KAAK,CAACgC,UAAN,CAAiBqB,IAHhB;IAIbpB,UAAU,EAAE,EAJC;IAKbqB,SAAS,EAAE;EALE,CAnGC;EA0GhBK,OAAO,EAAE;IACPrC,KAAK,EAAE,EADA;IAEPlB,MAAM,EAAE,EAFD;IAGPwD,WAAW,EAAE5D,KAAK,CAACW,OAAN,CAAc8B;EAHpB,CA1GO;EA+GhBoB,gBAAgB,EAAE;IAChBC,MAAM,EAAE,EADQ;IAEhBC,QAAQ,EAAE,UAFM;IAGhB5C,WAAW,EAAEnB,KAAK,CAACM,MAAN,CAAa0D,KAHV;IAIhB5C,aAAa,EAAE,GAJC;IAKhBC,YAAY,EAAE;MAACC,KAAK,EAAE,CAAR;MAAWlB,MAAM,EAAE;IAAnB,CALE;IAMhBmB,YAAY,EAAE;EANE,CA/GF;EAuHhB0C,aAAa,EAAE;IACbnD,aAAa,EAAE,QADF;IAEba,cAAc,EAAE,QAFH;IAGbX,eAAe,EAAEhB,KAAK,CAACM,MAAN,CAAaC,KAHjB;IAIbM,YAAY,EAAE,EAJD;IAKbH,OAAO,EAAEV,KAAK,CAACW,OAAN,CAAcuC,KALV;IAMb5B,KAAK,EAAE,MANM;IAObyC,QAAQ,EAAE,UAPG;IAQbG,MAAM,EAAE,CARK;IASbC,KAAK,EAAE,CAAC,EATK;IAUbL,MAAM,EAAE;EAVK,CAvHC;EAmIhBM,eAAe,EAAE;IACf/D,KAAK,EAAEL,KAAK,CAACM,MAAN,CAAa+D,IAAb,CAAkBC,OADV;IAEfvC,QAAQ,EAAE,EAFK;IAGfC,UAAU,EAAE,KAHG;IAIfC,UAAU,EAAE,EAJG;IAKfqB,SAAS,EAAE;EALI,CAnID;EA0IhBiB,eAAe,EAAE;IACfjD,KAAK,EAAE,CADQ;IAEflB,MAAM,EAAE,CAFO;IAGfY,eAAe,EAAE,aAHF;IAIfwD,WAAW,EAAE,OAJE;IAKfC,eAAe,EAAE,EALF;IAMfC,gBAAgB,EAAE,EANH;IAOfC,iBAAiB,EAAE,EAPJ;IAQfC,cAAc,EAAE,EARD;IASfC,eAAe,EAAE,aATF;IAUfC,cAAc,EAAE,aAVD;IAWfC,gBAAgB,EAAE/E,KAAK,CAACM,MAAN,CAAaC,KAXhB;IAYfyE,iBAAiB,EAAEhF,KAAK,CAACM,MAAN,CAAaC,KAZjB;IAaf0E,SAAS,EAAE,CAAC;MAACC,MAAM,EAAE;IAAT,CAAD,CAbI;IAcfnB,QAAQ,EAAE,UAdK;IAefoB,IAAI,EAAE,GAfS;IAgBfC,GAAG,EAAE,CAAC,EAhBS;IAiBfvE,YAAY,EAAE;EAjBC;AA1ID,CAAlB,CADF;;AAgKA,MAAMwE,SAAS,GAAG,CAAC;EACjBC,GADiB;EAEjBC;AAFiB,CAAD,KAMZ;EACJ,MAAM,CAACC,cAAD,EAAiBC,iBAAjB,IAAsC1G,QAAQ,CAAC,KAAD,CAApD;EACA,MAAM;IAAC2G,MAAD;IAASC,OAAT;IAAkBC;EAAlB,IAAqC9F,gBAAgB,CAAC;IAC1D+F,MAAM,EAAE5G,MAAM,CAAC6G,MAAP,CAAc,IAAd,EAAoB,CAApB,EAAuB,GAAvB,EAA4B,CAA5B;EADkD,CAAD,CAA3D;EAIA,MAAMC,cAAc,GAAGlH,WAAW,CAAC,MAAM;IACvC4G,iBAAiB,CAAC,CAACD,cAAF,CAAjB;IACA,CAACA,cAAD,GAAkBE,MAAM,EAAxB,GAA6BC,OAAO,EAApC;EACD,CAHiC,EAG/B,CAACH,cAAD,EAAiBE,MAAjB,EAAyBC,OAAzB,CAH+B,CAAlC;EAKA,MAAM;IACJnC,SADI;IAEJC,eAFI;IAGJC,aAHI;IAIJH,kBAJI;IAKJM,gBALI;IAMJI,aANI;IAOJG,eAPI;IAQJT,OARI;IASJY;EATI,IAUFgB,UAVJ;EAYA,MAAM;IAAC1C,KAAD;IAAQmD;EAAR,IAAmBV,GAAzB;EAEA,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAE/B;EAAb,gBACE,oBAAC,QAAD,CAAU,IAAV;IAAe,KAAK,EAAE,CAACM,gBAAD,EAAmB+B,eAAnB;EAAtB,gBACE,oBAAC,SAAD;IACE,KAAK,EAAE3B,aADT;IAEE,kBAAkB,EAAG,oBAFvB;IAGE,WAAW,MAHb;IAIE,OAAO,EAAE8B,cAJX;IAKE,MAAM,EAAC;EALT,gBAOE,oBAAC,IAAD;IAAM,KAAK,EAAE3B;EAAb,GAA+B4B,OAA/B,CAPF,CADF,eAUE,oBAAC,IAAD;IAAM,KAAK,EAAEzB;EAAb,EAVF,CADF,eAaE,oBAAC,SAAD;IACE,KAAK,EAAEiB,cAAc,gBAAOhC,SAAP,EAAqBC,eAArB,IAAwCD,SAD/D;IAEE,kBAAkB,EAAG,cAAaX,KAAM,EAF1C;IAGE,OAAO,EAAEkD,cAHX;IAIE,MAAM,EAAC;EAJT,gBAME,oBAAC,OAAD;IAAS,KAAK,EAAEpC,OAAhB;IAAyB,KAAK,EAAC;EAA/B,EANF,eAOE,oBAAC,IAAD;IAAM,KAAK,EAAED;EAAb,GAA6Bb,KAA7B,CAPF,CAbF,CADF;AAyBD,CAxDD;;AA0DA,MAAMoD,KAAK,GAAG;EACZ9B,KAAK,EAAE9E,SADK;EAEZ6G,KAAK,EAAE3G;AAFK,CAAd;;AAKA,MAAM4G,qBAAqB,GAAG,CAAC;EAC7BC,WAD6B;EAE7Bd,GAF6B;EAG7Be,IAH6B;EAI7BpG,IAJ6B;EAK7B6B;AAL6B,CAAD,KAMI;EAChC,MAAMwE,eAAe,GAAGzG,kBAAkB,EAA1C;EACA,MAAM,CAAC0F,UAAD,EAAagB,aAAb,IAA8BxH,QAAQ,CAAwB,IAAxB,CAA5C;EACA,MAAM;IAACiB;EAAD,IAAUsG,eAAhB;EACA,MAAME,eAAe,GAAGH,IAAI,CAACI,OAA7B;EAEA,MAAMC,IAAI,GAAGT,KAAK,CAAChG,IAAD,CAAlB;EAEAnB,SAAS,CAAC,MAAM;IACd,MAAM6H,WAAW,GAAG5G,gBAAgB,CAACC,KAAD,EAAQC,IAAR,CAApC;;IACAsG,aAAa,CAACI,WAAD,CAAb;EACD,CAHQ,EAGN,CAAC3G,KAAD,EAAQC,IAAR,CAHM,CAAT;;EAKA,IAAI,CAACsF,UAAL,EAAiB;IACf,OAAO,IAAP;EACD;;EAED,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAEA,UAAU,CAACpF;EAAxB,gBACE,oBAAC,IAAD;IAAM,KAAK,EAAEoF,UAAU,CAAC9E;EAAxB,gBACE,oBAAC,IAAD;IAAM,KAAK,EAAE8E,UAAU,CAAC9D;EAAxB,gBACE,oBAAC,IAAD;IAAM,KAAK,EAAE8D,UAAU,CAAC7D;EAAxB,gBACE,oBAAC,IAAD;IACE,KAAK,EAAE6D,UAAU,CAAC1D,IADpB;IAEE,KAAK,EAAE5B,IAAI,KAAK,OAAT,GAAmBD,KAAK,CAACM,MAAN,CAAaW,QAAhC,GAA2CjB,KAAK,CAACM,MAAN,CAAaY;EAFjE,EADF,CADF,eAOE,oBAAC,IAAD;IAAM,KAAK,EAAEqE,UAAU,CAACzD;EAAxB,GAAsCA,WAAtC,CAPF,CADF,eAUE,oBAAC,IAAD;IAAM,KAAK,EAAEyD,UAAU,CAACnD,eAAxB;IAAyC,kBAAkB,EAAC;EAA5D,gBACE,oBAAC,IAAD;IAAM,KAAK,EAAEmD,UAAU,CAACjD,cAAxB;IAAwC,8BAA8B;EAAtE,gBACE,oBAAC,IAAD;IAAM,kBAAkB,EAAE8D,WAAW,CAACvD,KAAtC;IAA6C,KAAK,EAAE0C,UAAU,CAAC1C;EAA/D,GACGuD,WAAW,CAACvD,KADf,CADF,CADF,eAME,oBAAC,IAAD;IAAM,KAAK,EAAE0C,UAAU,CAACxC;EAAxB,GAA0CqD,WAAW,CAACQ,OAAtD,CANF,CAVF,EAkBGtB,GAAG,IAAIrF,IAAI,KAAK,OAAhB,gBAA0B,oBAAC,SAAD;IAAW,UAAU,EAAEsF,UAAvB;IAAmC,GAAG,EAAED;EAAxC,EAA1B,GAA4E,IAlB/E,eAmBE,oBAAC,SAAD;IACE,KAAK,EAAEC,UAAU,CAACvC,MADpB;IAEE,OAAO,EAAEwD,eAFX;IAGE,kBAAkB,EAAEH,IAAI,CAAC,YAAD,CAH1B;IAIE,MAAM,EAAEA,IAAI,CAAC,WAAD;EAJd,gBAME,oBAAC,IAAD;IAAM,KAAK,EAAEd,UAAU,CAACpC;EAAxB,GAAqCkD,IAAI,CAACxD,KAA1C,CANF,CAnBF,CADF,CADF;AAgCD,CAvDD;;AAyDA,eAAesD,qBAAf"}

package/es/organism/get-the-app/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/get-the-app/index.js"],"names":[],"mappings":";AAuHA,kEA+DC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA3ED;;gBAMC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/get-the-app/index.js"],"names":[],"mappings":";AAoIA,kEA+DC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA3ED;;gBAMC"}

package/es/organism/get-the-app/index.js

@@ -6,6 +6,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { NovaCompositionCoorpacademyMagicWand as MagicWand, NovaCompositionCoorpacademyCoorpApp as CoorpAppLogo } from '@coorpacademy/nova-icons';
 import Button from '../../atom/button';
+import Picture from '../../atom/picture';
 import style from './style.css';
 
 const Header = ({
@@ -93,10 +94,22 @@ const StoresLinks = ({
   onAppStoreButtonClick,
   appStoreButtonImageUrl,
   playStoreButtonImageUrl,
-  onPlayStoreButtonClick
+  onPlayStoreButtonClick,
+  'android-alt': androidAlt,
+  'ios-alt': iosAlt
 }) => /*#__PURE__*/React.createElement("div", {
   className: style.storeLinksContainer
-});
+}, /*#__PURE__*/React.createElement(Picture, {
+  className: style.img,
+  src: appStoreButtonImageUrl,
+  onClick: onAppStoreButtonClick,
+  alt: iosAlt
+}), /*#__PURE__*/React.createElement(Picture, {
+  className: style.img,
+  src: playStoreButtonImageUrl,
+  onClick: onPlayStoreButtonClick,
+  alt: androidAlt
+}));
 
 StoresLinks.propTypes = process.env.NODE_ENV !== "production" ? {
   onAppStoreButtonClick: PropTypes.func,

package/es/organism/get-the-app/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","NovaCompositionCoorpacademyMagicWand","MagicWand","NovaCompositionCoorpacademyCoorpApp","CoorpAppLogo","Button","style","Header","step","header","subHeader","headerContainer","headerWrapper","propTypes","string","QrCodeImage","showMobileAppAccess","qrCodeImageUrl","preMessage","linkMessage","endMessage","qrcodeWrapper","qrcodeOverlay","qrcodeModal","qrcodeModalLink","bool","MagicLink","disabled","submitValue","magicLinkUrl","color","buttonWrapper","iconWrapper","magicLinkIcon","StoresLinks","onAppStoreButtonClick","appStoreButtonImageUrl","playStoreButtonImageUrl","onPlayStoreButtonClick","storeLinksContainer","func","Divider","word","dividerWrapper","divider","GetTheApp","props","context","storeStep","connectionStep","qrCodeStep","magicLinkStep","diviserWord","skin","primaryColor","container","coorpAppLogoWrapper","coorpAppLogo","store","secondStepWrapper","connectionWrapper","wrapper","shape"],"sources":["../../../src/organism/get-the-app/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n  NovaCompositionCoorpacademyMagicWand as MagicWand,\n  NovaCompositionCoorpacademyCoorpApp as CoorpAppLogo\n} from '@coorpacademy/nova-icons';\nimport {get} from 'lodash/fp';\nimport Button from '../../atom/button';\nimport style from './style.css';\n\nconst Header = ({step, header, subHeader}) => (\n  <div className={style.headerContainer}>\n    {step ? (\n      <div className={style.headerWrapper}>\n        <h1 className={style.step}>{step}</h1>\n        <h1 className={style.header}>{header}</h1>\n      </div>\n    ) : (\n      <h1 className={style.header}>{header} </h1>\n    )}\n    {subHeader ? <h4 className={style.subHeader}>{subHeader} </h4> : null}\n  </div>\n);\n\nHeader.propTypes = {\n  step: PropTypes.string,\n  header: PropTypes.string,\n  subHeader: PropTypes.string\n};\n\nconst QrCodeImage = ({\n  showMobileAppAccess,\n  qrCodeImageUrl,\n  preMessage,\n  linkMessage,\n  endMessage\n}) => {\n  return (\n    <div className={style.qrcodeWrapper}>\n      <img src={qrCodeImageUrl} />\n      {showMobileAppAccess ? (\n        <div className={style.qrcodeOverlay}>\n          <div className={style.qrcodeModal}>\n            <span>{preMessage} </span>\n            <a href=\"mailto:assistance@coorpacademy.com\" className={style.qrcodeModalLink}>\n              <span>{linkMessage} </span>\n            </a>\n            <span>{endMessage} </span>\n          </div>\n        </div>\n      ) : null}\n    </div>\n  );\n};\nQrCodeImage.propTypes = {\n  showMobileAppAccess: PropTypes.bool,\n  qrCodeImageUrl: PropTypes.string,\n  preMessage: PropTypes.string,\n  linkMessage: PropTypes.string,\n  endMessage: PropTypes.string\n};\n\nconst MagicLink = ({disabled, submitValue, magicLinkUrl, color}) => {\n  return (\n    <div className={style.buttonWrapper}>\n      <Button\n        color={color}\n        disabled={disabled}\n        isLinkDisabled={disabled}\n        href={magicLinkUrl}\n        type=\"link\"\n        submitValue={null}\n      >\n        <div className={style.iconWrapper}>\n          <MagicWand className={style.magicLinkIcon} />\n          <p>{submitValue}</p>\n        </div>\n      </Button>\n    </div>\n  );\n};\n\nMagicLink.propTypes = {\n  magicLinkUrl: PropTypes.string,\n  disabled: PropTypes.bool,\n  submitValue: PropTypes.string\n};\n\nconst StoresLinks = ({\n  onAppStoreButtonClick,\n  appStoreButtonImageUrl,\n  playStoreButtonImageUrl,\n  onPlayStoreButtonClick\n}) => (\n  <div className={style.storeLinksContainer}>\n    {/* <img className={style.img} src={appStoreButtonImageUrl} onClick={onAppStoreButtonClick} />\n    <img className={style.img} src={playStoreButtonImageUrl} onClick={onPlayStoreButtonClick} /> */}\n  </div>\n);\n\nStoresLinks.propTypes = {\n  onAppStoreButtonClick: PropTypes.func,\n  appStoreButtonImageUrl: PropTypes.string,\n  playStoreButtonImageUrl: PropTypes.string,\n  onPlayStoreButtonClick: PropTypes.func\n};\n\nconst Divider = ({word}) => (\n  <div className={style.dividerWrapper}>\n    <div className={style.divider} />\n    <p>{word}</p>\n    <div className={style.divider} />\n  </div>\n);\n\nDivider.propTypes = {\n  word: PropTypes.string\n};\n\nconst GetTheApp = (props, context) => {\n  const {\n    onAppStoreButtonClick,\n    appStoreButtonImageUrl,\n    playStoreButtonImageUrl,\n    onPlayStoreButtonClick,\n    storeStep,\n    connectionStep,\n    qrCodeStep,\n    magicLinkStep,\n    diviserWord,\n    qrCodeImageUrl,\n    magicLinkUrl,\n    disabled,\n    showMobileAppAccess,\n    submitValue,\n    preMessage,\n    linkMessage,\n    endMessage\n  } = props;\n  const {skin} = context;\n  const primaryColor = get('common.primary', skin);\n  return (\n    <div className={style.container}>\n      <div className={style.coorpAppLogoWrapper}>\n        <CoorpAppLogo height={51} width={250} className={style.coorpAppLogo} />\n      </div>\n      <div className={style.store}>\n        <Header {...storeStep} />\n        <StoresLinks\n          onAppStoreButtonClick={onAppStoreButtonClick}\n          appStoreButtonImageUrl={appStoreButtonImageUrl}\n          playStoreButtonImageUrl={playStoreButtonImageUrl}\n          onPlayStoreButtonClick={onPlayStoreButtonClick}\n        />\n      </div>\n      <div className={style.secondStepWrapper}>\n        <Header {...connectionStep} />\n        <div className={style.connectionWrapper}>\n          <div className={style.wrapper}>\n            <Header {...qrCodeStep} />\n            <QrCodeImage\n              showMobileAppAccess={showMobileAppAccess}\n              qrCodeImageUrl={qrCodeImageUrl}\n              preMessage={preMessage}\n              linkMessage={linkMessage}\n              endMessage={endMessage}\n            />\n          </div>\n          <Divider word={diviserWord} />\n          <div className={style.wrapper}>\n            <Header {...magicLinkStep} />\n            <MagicLink\n              color={primaryColor}\n              submitValue={submitValue}\n              disabled={disabled}\n              magicLinkUrl={magicLinkUrl}\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nGetTheApp.propTypes = {\n  ...StoresLinks.propTypes,\n  storeStep: PropTypes.shape(Header.propTypes),\n  connectionStep: PropTypes.shape(Header.propTypes),\n  qrCodeStep: PropTypes.shape(Header.propTypes),\n  magicLinkStep: PropTypes.shape(Header.propTypes),\n  ...QrCodeImage.propTypes,\n  diviserWord: Divider.propTypes.word,\n  ...MagicLink.propTypes\n};\n\nexport default GetTheApp;\n"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,SACEC,oCAAoC,IAAIC,SAD1C,EAEEC,mCAAmC,IAAIC,YAFzC,QAGO,0BAHP;AAKA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,MAAM,GAAG,CAAC;EAACC,IAAD;EAAOC,MAAP;EAAeC;AAAf,CAAD,kBACb;EAAK,SAAS,EAAEJ,KAAK,CAACK;AAAtB,GACGH,IAAI,gBACH;EAAK,SAAS,EAAEF,KAAK,CAACM;AAAtB,gBACE;EAAI,SAAS,EAAEN,KAAK,CAACE;AAArB,GAA4BA,IAA5B,CADF,eAEE;EAAI,SAAS,EAAEF,KAAK,CAACG;AAArB,GAA8BA,MAA9B,CAFF,CADG,gBAMH;EAAI,SAAS,EAAEH,KAAK,CAACG;AAArB,GAA8BA,MAA9B,MAPJ,EASGC,SAAS,gBAAG;EAAI,SAAS,EAAEJ,KAAK,CAACI;AAArB,GAAiCA,SAAjC,MAAH,GAAuD,IATnE,CADF;;AAcAH,MAAM,CAACM,SAAP,2CAAmB;EACjBL,IAAI,EAAER,SAAS,CAACc,MADC;EAEjBL,MAAM,EAAET,SAAS,CAACc,MAFD;EAGjBJ,SAAS,EAAEV,SAAS,CAACc;AAHJ,CAAnB;;AAMA,MAAMC,WAAW,GAAG,CAAC;EACnBC,mBADmB;EAEnBC,cAFmB;EAGnBC,UAHmB;EAInBC,WAJmB;EAKnBC;AALmB,CAAD,KAMd;EACJ,oBACE;IAAK,SAAS,EAAEd,KAAK,CAACe;EAAtB,gBACE;IAAK,GAAG,EAAEJ;EAAV,EADF,EAEGD,mBAAmB,gBAClB;IAAK,SAAS,EAAEV,KAAK,CAACgB;EAAtB,gBACE;IAAK,SAAS,EAAEhB,KAAK,CAACiB;EAAtB,gBACE,kCAAOL,UAAP,MADF,eAEE;IAAG,IAAI,EAAC,oCAAR;IAA6C,SAAS,EAAEZ,KAAK,CAACkB;EAA9D,gBACE,kCAAOL,WAAP,MADF,CAFF,eAKE,kCAAOC,UAAP,MALF,CADF,CADkB,GAUhB,IAZN,CADF;AAgBD,CAvBD;;AAwBAL,WAAW,CAACF,SAAZ,2CAAwB;EACtBG,mBAAmB,EAAEhB,SAAS,CAACyB,IADT;EAEtBR,cAAc,EAAEjB,SAAS,CAACc,MAFJ;EAGtBI,UAAU,EAAElB,SAAS,CAACc,MAHA;EAItBK,WAAW,EAAEnB,SAAS,CAACc,MAJD;EAKtBM,UAAU,EAAEpB,SAAS,CAACc;AALA,CAAxB;;AAQA,MAAMY,SAAS,GAAG,CAAC;EAACC,QAAD;EAAWC,WAAX;EAAwBC,YAAxB;EAAsCC;AAAtC,CAAD,KAAkD;EAClE,oBACE;IAAK,SAAS,EAAExB,KAAK,CAACyB;EAAtB,gBACE,oBAAC,MAAD;IACE,KAAK,EAAED,KADT;IAEE,QAAQ,EAAEH,QAFZ;IAGE,cAAc,EAAEA,QAHlB;IAIE,IAAI,EAAEE,YAJR;IAKE,IAAI,EAAC,MALP;IAME,WAAW,EAAE;EANf,gBAQE;IAAK,SAAS,EAAEvB,KAAK,CAAC0B;EAAtB,gBACE,oBAAC,SAAD;IAAW,SAAS,EAAE1B,KAAK,CAAC2B;EAA5B,EADF,eAEE,+BAAIL,WAAJ,CAFF,CARF,CADF,CADF;AAiBD,CAlBD;;AAoBAF,SAAS,CAACb,SAAV,2CAAsB;EACpBgB,YAAY,EAAE7B,SAAS,CAACc,MADJ;EAEpBa,QAAQ,EAAE3B,SAAS,CAACyB,IAFA;EAGpBG,WAAW,EAAE5B,SAAS,CAACc;AAHH,CAAtB;;AAMA,MAAMoB,WAAW,GAAG,CAAC;EACnBC,qBADmB;EAEnBC,sBAFmB;EAGnBC,uBAHmB;EAInBC;AAJmB,CAAD,kBAMlB;EAAK,SAAS,EAAEhC,KAAK,CAACiC;AAAtB,EANF;;AAYAL,WAAW,CAACrB,SAAZ,2CAAwB;EACtBsB,qBAAqB,EAAEnC,SAAS,CAACwC,IADX;EAEtBJ,sBAAsB,EAAEpC,SAAS,CAACc,MAFZ;EAGtBuB,uBAAuB,EAAErC,SAAS,CAACc,MAHb;EAItBwB,sBAAsB,EAAEtC,SAAS,CAACwC;AAJZ,CAAxB;;AAOA,MAAMC,OAAO,GAAG,CAAC;EAACC;AAAD,CAAD,kBACd;EAAK,SAAS,EAAEpC,KAAK,CAACqC;AAAtB,gBACE;EAAK,SAAS,EAAErC,KAAK,CAACsC;AAAtB,EADF,eAEE,+BAAIF,IAAJ,CAFF,eAGE;EAAK,SAAS,EAAEpC,KAAK,CAACsC;AAAtB,EAHF,CADF;;AAQAH,OAAO,CAAC5B,SAAR,2CAAoB;EAClB6B,IAAI,EAAE1C,SAAS,CAACc;AADE,CAApB;;AAIA,MAAM+B,SAAS,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EACpC,MAAM;IACJZ,qBADI;IAEJC,sBAFI;IAGJC,uBAHI;IAIJC,sBAJI;IAKJU,SALI;IAMJC,cANI;IAOJC,UAPI;IAQJC,aARI;IASJC,WATI;IAUJnC,cAVI;IAWJY,YAXI;IAYJF,QAZI;IAaJX,mBAbI;IAcJY,WAdI;IAeJV,UAfI;IAgBJC,WAhBI;IAiBJC;EAjBI,IAkBF0B,KAlBJ;EAmBA,MAAM;IAACO;EAAD,IAASN,OAAf;;EACA,MAAMO,YAAY,GAAG,KAAI,gBAAJ,EAAsBD,IAAtB,CAArB;;EACA,oBACE;IAAK,SAAS,EAAE/C,KAAK,CAACiD;EAAtB,gBACE;IAAK,SAAS,EAAEjD,KAAK,CAACkD;EAAtB,gBACE,oBAAC,YAAD;IAAc,MAAM,EAAE,EAAtB;IAA0B,KAAK,EAAE,GAAjC;IAAsC,SAAS,EAAElD,KAAK,CAACmD;EAAvD,EADF,CADF,eAIE;IAAK,SAAS,EAAEnD,KAAK,CAACoD;EAAtB,gBACE,oBAAC,MAAD,EAAYV,SAAZ,CADF,eAEE,oBAAC,WAAD;IACE,qBAAqB,EAAEb,qBADzB;IAEE,sBAAsB,EAAEC,sBAF1B;IAGE,uBAAuB,EAAEC,uBAH3B;IAIE,sBAAsB,EAAEC;EAJ1B,EAFF,CAJF,eAaE;IAAK,SAAS,EAAEhC,KAAK,CAACqD;EAAtB,gBACE,oBAAC,MAAD,EAAYV,cAAZ,CADF,eAEE;IAAK,SAAS,EAAE3C,KAAK,CAACsD;EAAtB,gBACE;IAAK,SAAS,EAAEtD,KAAK,CAACuD;EAAtB,gBACE,oBAAC,MAAD,EAAYX,UAAZ,CADF,eAEE,oBAAC,WAAD;IACE,mBAAmB,EAAElC,mBADvB;IAEE,cAAc,EAAEC,cAFlB;IAGE,UAAU,EAAEC,UAHd;IAIE,WAAW,EAAEC,WAJf;IAKE,UAAU,EAAEC;EALd,EAFF,CADF,eAWE,oBAAC,OAAD;IAAS,IAAI,EAAEgC;EAAf,EAXF,eAYE;IAAK,SAAS,EAAE9C,KAAK,CAACuD;EAAtB,gBACE,oBAAC,MAAD,EAAYV,aAAZ,CADF,eAEE,oBAAC,SAAD;IACE,KAAK,EAAEG,YADT;IAEE,WAAW,EAAE1B,WAFf;IAGE,QAAQ,EAAED,QAHZ;IAIE,YAAY,EAAEE;EAJhB,EAFF,CAZF,CAFF,CAbF,CADF;AAyCD,CA/DD;;AAiEAgB,SAAS,CAAChC,SAAV,wDACKqB,WAAW,CAACrB,SADjB;EAEEmC,SAAS,EAAEhD,SAAS,CAAC8D,KAAV,CAAgBvD,MAAM,CAACM,SAAvB,CAFb;EAGEoC,cAAc,EAAEjD,SAAS,CAAC8D,KAAV,CAAgBvD,MAAM,CAACM,SAAvB,CAHlB;EAIEqC,UAAU,EAAElD,SAAS,CAAC8D,KAAV,CAAgBvD,MAAM,CAACM,SAAvB,CAJd;EAKEsC,aAAa,EAAEnD,SAAS,CAAC8D,KAAV,CAAgBvD,MAAM,CAACM,SAAvB;AALjB,GAMKE,WAAW,CAACF,SANjB;EAOEuC,WAAW,EAAEX,OAAO,CAAC5B,SAAR,CAAkB6B;AAPjC,GAQKhB,SAAS,CAACb,SARf;AAWA,eAAegC,SAAf"}
+{"version":3,"file":"index.js","names":["React","PropTypes","NovaCompositionCoorpacademyMagicWand","MagicWand","NovaCompositionCoorpacademyCoorpApp","CoorpAppLogo","Button","Picture","style","Header","step","header","subHeader","headerContainer","headerWrapper","propTypes","string","QrCodeImage","showMobileAppAccess","qrCodeImageUrl","preMessage","linkMessage","endMessage","qrcodeWrapper","qrcodeOverlay","qrcodeModal","qrcodeModalLink","bool","MagicLink","disabled","submitValue","magicLinkUrl","color","buttonWrapper","iconWrapper","magicLinkIcon","StoresLinks","onAppStoreButtonClick","appStoreButtonImageUrl","playStoreButtonImageUrl","onPlayStoreButtonClick","androidAlt","iosAlt","storeLinksContainer","img","func","Divider","word","dividerWrapper","divider","GetTheApp","props","context","storeStep","connectionStep","qrCodeStep","magicLinkStep","diviserWord","skin","primaryColor","container","coorpAppLogoWrapper","coorpAppLogo","store","secondStepWrapper","connectionWrapper","wrapper","shape"],"sources":["../../../src/organism/get-the-app/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n  NovaCompositionCoorpacademyMagicWand as MagicWand,\n  NovaCompositionCoorpacademyCoorpApp as CoorpAppLogo\n} from '@coorpacademy/nova-icons';\nimport {get} from 'lodash/fp';\nimport Button from '../../atom/button';\nimport Picture from '../../atom/picture';\nimport style from './style.css';\n\nconst Header = ({step, header, subHeader}) => (\n  <div className={style.headerContainer}>\n    {step ? (\n      <div className={style.headerWrapper}>\n        <h1 className={style.step}>{step}</h1>\n        <h1 className={style.header}>{header}</h1>\n      </div>\n    ) : (\n      <h1 className={style.header}>{header} </h1>\n    )}\n    {subHeader ? <h4 className={style.subHeader}>{subHeader} </h4> : null}\n  </div>\n);\n\nHeader.propTypes = {\n  step: PropTypes.string,\n  header: PropTypes.string,\n  subHeader: PropTypes.string\n};\n\nconst QrCodeImage = ({\n  showMobileAppAccess,\n  qrCodeImageUrl,\n  preMessage,\n  linkMessage,\n  endMessage\n}) => {\n  return (\n    <div className={style.qrcodeWrapper}>\n      <img src={qrCodeImageUrl} />\n      {showMobileAppAccess ? (\n        <div className={style.qrcodeOverlay}>\n          <div className={style.qrcodeModal}>\n            <span>{preMessage} </span>\n            <a href=\"mailto:assistance@coorpacademy.com\" className={style.qrcodeModalLink}>\n              <span>{linkMessage} </span>\n            </a>\n            <span>{endMessage} </span>\n          </div>\n        </div>\n      ) : null}\n    </div>\n  );\n};\nQrCodeImage.propTypes = {\n  showMobileAppAccess: PropTypes.bool,\n  qrCodeImageUrl: PropTypes.string,\n  preMessage: PropTypes.string,\n  linkMessage: PropTypes.string,\n  endMessage: PropTypes.string\n};\n\nconst MagicLink = ({disabled, submitValue, magicLinkUrl, color}) => {\n  return (\n    <div className={style.buttonWrapper}>\n      <Button\n        color={color}\n        disabled={disabled}\n        isLinkDisabled={disabled}\n        href={magicLinkUrl}\n        type=\"link\"\n        submitValue={null}\n      >\n        <div className={style.iconWrapper}>\n          <MagicWand className={style.magicLinkIcon} />\n          <p>{submitValue}</p>\n        </div>\n      </Button>\n    </div>\n  );\n};\n\nMagicLink.propTypes = {\n  magicLinkUrl: PropTypes.string,\n  disabled: PropTypes.bool,\n  submitValue: PropTypes.string\n};\n\nconst StoresLinks = ({\n  onAppStoreButtonClick,\n  appStoreButtonImageUrl,\n  playStoreButtonImageUrl,\n  onPlayStoreButtonClick,\n  'android-alt': androidAlt,\n  'ios-alt': iosAlt\n}) => (\n  <div className={style.storeLinksContainer}>\n    <Picture\n      className={style.img}\n      src={appStoreButtonImageUrl}\n      onClick={onAppStoreButtonClick}\n      alt={iosAlt}\n    />\n    <Picture\n      className={style.img}\n      src={playStoreButtonImageUrl}\n      onClick={onPlayStoreButtonClick}\n      alt={androidAlt}\n    />\n  </div>\n);\n\nStoresLinks.propTypes = {\n  onAppStoreButtonClick: PropTypes.func,\n  appStoreButtonImageUrl: PropTypes.string,\n  playStoreButtonImageUrl: PropTypes.string,\n  onPlayStoreButtonClick: PropTypes.func\n};\n\nconst Divider = ({word}) => (\n  <div className={style.dividerWrapper}>\n    <div className={style.divider} />\n    <p>{word}</p>\n    <div className={style.divider} />\n  </div>\n);\n\nDivider.propTypes = {\n  word: PropTypes.string\n};\n\nconst GetTheApp = (props, context) => {\n  const {\n    onAppStoreButtonClick,\n    appStoreButtonImageUrl,\n    playStoreButtonImageUrl,\n    onPlayStoreButtonClick,\n    storeStep,\n    connectionStep,\n    qrCodeStep,\n    magicLinkStep,\n    diviserWord,\n    qrCodeImageUrl,\n    magicLinkUrl,\n    disabled,\n    showMobileAppAccess,\n    submitValue,\n    preMessage,\n    linkMessage,\n    endMessage\n  } = props;\n  const {skin} = context;\n  const primaryColor = get('common.primary', skin);\n  return (\n    <div className={style.container}>\n      <div className={style.coorpAppLogoWrapper}>\n        <CoorpAppLogo height={51} width={250} className={style.coorpAppLogo} />\n      </div>\n      <div className={style.store}>\n        <Header {...storeStep} />\n        <StoresLinks\n          onAppStoreButtonClick={onAppStoreButtonClick}\n          appStoreButtonImageUrl={appStoreButtonImageUrl}\n          playStoreButtonImageUrl={playStoreButtonImageUrl}\n          onPlayStoreButtonClick={onPlayStoreButtonClick}\n        />\n      </div>\n      <div className={style.secondStepWrapper}>\n        <Header {...connectionStep} />\n        <div className={style.connectionWrapper}>\n          <div className={style.wrapper}>\n            <Header {...qrCodeStep} />\n            <QrCodeImage\n              showMobileAppAccess={showMobileAppAccess}\n              qrCodeImageUrl={qrCodeImageUrl}\n              preMessage={preMessage}\n              linkMessage={linkMessage}\n              endMessage={endMessage}\n            />\n          </div>\n          <Divider word={diviserWord} />\n          <div className={style.wrapper}>\n            <Header {...magicLinkStep} />\n            <MagicLink\n              color={primaryColor}\n              submitValue={submitValue}\n              disabled={disabled}\n              magicLinkUrl={magicLinkUrl}\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nGetTheApp.propTypes = {\n  ...StoresLinks.propTypes,\n  storeStep: PropTypes.shape(Header.propTypes),\n  connectionStep: PropTypes.shape(Header.propTypes),\n  qrCodeStep: PropTypes.shape(Header.propTypes),\n  magicLinkStep: PropTypes.shape(Header.propTypes),\n  ...QrCodeImage.propTypes,\n  diviserWord: Divider.propTypes.word,\n  ...MagicLink.propTypes\n};\n\nexport default GetTheApp;\n"],"mappings":"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"}

package/es/organism/mooc-footer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/mooc-footer/index.js"],"names":[],"mappings":";AA8CA,qDA+HC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/mooc-footer/index.js"],"names":[],"mappings":";AA+CA,qDA+HC"}

package/es/organism/mooc-footer/index.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { NovaCompositionCoorpacademyCoorpApp as CoorpAppLogo, NovaCompositionCoorpacademyCoorpLogo as CoorpLogo } from '@coorpacademy/nova-icons';
 import Link from '../../atom/link';
 import SocialLink from '../../atom/social-link';
+import Picture from '../../atom/picture';
 import style from './style.css';
 const socialLinksTypes = process.env.NODE_ENV !== "production" ? ['facebook', 'twitter', 'linkedin', 'youtube', 'instagram'] : {};
 
@@ -16,12 +17,12 @@ const StoresLinks = ({
   'ios-alt': iosAlt
 }) => /*#__PURE__*/React.createElement("div", {
   className: style.storeLinksContainer
-}, /*#__PURE__*/React.createElement("img", {
+}, /*#__PURE__*/React.createElement(Picture, {
   className: style.imgApple,
   src: appStoreButtonImageUrl,
   onClick: onAppStoreButtonClick,
   alt: iosAlt
-}), /*#__PURE__*/React.createElement("img", {
+}), /*#__PURE__*/React.createElement(Picture, {
   className: style.img,
   src: playStoreButtonImageUrl,
   onClick: onPlayStoreButtonClick,