@coorpacademy/components 11.5.2 → 11.6.0

package/es/atom/review-presentation/index.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/atom/review-presentation/index.native.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAC,eAAe,EAAW,MAAM,cAAc,CAAC;AA8FvD,QAAA,MAAM,UAAU,UAAW,eAAe,uBA0CzC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/atom/review-presentation/index.native.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAC,eAAe,EAAW,MAAM,cAAc,CAAC;AAoGvD,QAAA,MAAM,UAAU,UAAW,eAAe,uBA4CzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/es/atom/review-presentation/index.native.js

@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
 import { View, StyleSheet, Text } from 'react-native';
 import { NovaLineSelectionCursorsCursorArrowTarget as TargetIcon, NovaSolidInterfaceFeedbackInterfaceQuestionMark as QuestionMarkIcon, NovaSolidStatusCheckCircle2 as CheckCircle2Icon, NovaCompositionCoorpacademyVoteHeartOutline as HeartIcon } from '@coorpacademy/nova-icons';
 import { useTemplateContext } from '../../template/app-review/template-context';
-import { HEADER_HEIGHT } from '../../organism/header-v2/index.native';
 import Touchable from '../../hoc/touchable/index.native';
 import Html from '../html/index.native';
 
@@ -12,7 +11,8 @@ const createStyleSheet = (brandTheme, theme) => StyleSheet.create({
     justifyContent: 'space-between',
     flex: 1,
     padding: 20,
-    paddingTop: HEADER_HEIGHT + 20
+    paddingTop: 20,
+    paddingBottom: 100
   },
   title: {
     height: 72,
@@ -21,13 +21,17 @@ const createStyleSheet = (brandTheme, theme) => StyleSheet.create({
     fontWeight: theme.fontWeight.bold,
     lineHeight: 36,
     color: theme.colors.text.primary,
-    marginBottom: theme.spacing.small
+    marginBottom: 32
   },
   text: {
     fontSize: theme.fontSize.large,
     color: theme.colors.text.primary,
-    opacity: 0.7,
-    marginBottom: theme.spacing.small
+    opacity: 0.7
+  },
+  tips: {
+    marginTop: 32,
+    height: 300,
+    justifyContent: 'center'
   },
   tip: {
     flexDirection: 'row',
@@ -50,8 +54,8 @@ const createStyleSheet = (brandTheme, theme) => StyleSheet.create({
   button: {
     height: 52,
     borderRadius: 7,
-    marginBottom: theme.spacing.large,
-    marginTop: theme.spacing.large,
+    marginBottom: 32,
+    marginTop: 16,
     backgroundColor: brandTheme?.colors?.primary || theme.colors.cta,
     justifyContent: 'center'
   },
@@ -123,7 +127,9 @@ const Onboarding = props => {
     style: styleSheet.title
   }, translations.appReview.presentation.title), /*#__PURE__*/React.createElement(Html, {
     style: styleSheet.text
-  }, translations.appReview.presentation.text), /*#__PURE__*/React.createElement(Tip, {
+  }, translations.appReview.presentation.text), /*#__PURE__*/React.createElement(View, {
+    style: styleSheet.tips
+  }, /*#__PURE__*/React.createElement(Tip, {
     Icon: TargetIcon,
     text: translations.appReview.presentation.labelList.skills.text
   }), /*#__PURE__*/React.createElement(Tip, {
@@ -135,7 +141,7 @@ const Onboarding = props => {
   }), /*#__PURE__*/React.createElement(Tip, {
     Icon: CheckCircle2Icon,
     text: translations.appReview.presentation.labelList.allright.text
-  }), /*#__PURE__*/React.createElement(Touchable, {
+  })), /*#__PURE__*/React.createElement(Touchable, {
     testID: "button-quit-revision-onboarding",
     onPress: onPress,
     analyticsID: "button-start",

package/es/atom/review-presentation/index.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.js","names":["React","useState","useEffect","View","StyleSheet","Text","NovaLineSelectionCursorsCursorArrowTarget","TargetIcon","NovaSolidInterfaceFeedbackInterfaceQuestionMark","QuestionMarkIcon","NovaSolidStatusCheckCircle2","CheckCircle2Icon","NovaCompositionCoorpacademyVoteHeartOutline","HeartIcon","useTemplateContext","HEADER_HEIGHT","Touchable","Html","createStyleSheet","brandTheme","theme","create","container","backgroundColor","colors","white","justifyContent","flex","padding","paddingTop","title","height","width","fontSize","xxlarge","fontWeight","bold","lineHeight","color","text","primary","marginBottom","spacing","small","large","opacity","tip","flexDirection","overflow","alignItems","borderRadius","gray","extra","marginTop","micro","tipText","icon","margin","button","cta","buttonText","alignSelf","Tip","props","templateContext","styleSheet","setStylesheet","Icon","_stylesheet","Onboarding","translations","onPress","appReview","presentation","labelList","skills","questions","lifes","allright","ok"],"sources":["../../../src/atom/review-presentation/index.native.tsx"],"sourcesContent":["import React, {useState, useEffect} from 'react';\nimport {View, StyleSheet, Text, ViewStyle, TextStyle} from 'react-native';\nimport {\n  NovaLineSelectionCursorsCursorArrowTarget as TargetIcon,\n  NovaSolidInterfaceFeedbackInterfaceQuestionMark as QuestionMarkIcon,\n  NovaSolidStatusCheckCircle2 as CheckCircle2Icon,\n  NovaCompositionCoorpacademyVoteHeartOutline as HeartIcon\n} from '@coorpacademy/nova-icons';\n\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {Theme} from '../../variables/theme.native';\nimport {HEADER_HEIGHT} from '../../organism/header-v2/index.native';\nimport Touchable from '../../hoc/touchable/index.native';\nimport Html from '../html/index.native';\nimport {Brand} from '../../variables/brand.native';\nimport {OnboardingProps, TipProps} from './prop-types';\n\ntype StyleSheetType = {\n  container: ViewStyle;\n  title: TextStyle;\n  text: TextStyle;\n  tip: ViewStyle;\n  tipText: TextStyle;\n  icon: ViewStyle;\n  button: ViewStyle;\n  buttonText: TextStyle;\n};\n\nconst createStyleSheet = (brandTheme: Brand, theme: Theme): StyleSheetType =>\n  StyleSheet.create({\n    container: {\n      backgroundColor: theme.colors.white,\n      justifyContent: 'space-between',\n      flex: 1,\n      padding: 20,\n      paddingTop: HEADER_HEIGHT + 20\n    },\n    title: {\n      height: 72,\n      width: 268,\n      fontSize: theme.fontSize.xxlarge,\n      fontWeight: theme.fontWeight.bold,\n      lineHeight: 36,\n      color: theme.colors.text.primary,\n      marginBottom: theme.spacing.small\n    },\n    text: {\n      fontSize: theme.fontSize.large,\n      color: theme.colors.text.primary,\n      opacity: 0.7,\n      marginBottom: theme.spacing.small\n    },\n    tip: {\n      flexDirection: 'row',\n      overflow: 'hidden',\n      alignItems: 'center',\n      height: 54,\n      borderRadius: 8,\n      backgroundColor: theme.colors.gray.extra,\n      marginTop: theme.spacing.micro,\n      marginBottom: theme.spacing.micro\n    },\n    tipText: {\n      fontSize: 16,\n      lineHeight: 22,\n      color: theme.colors.text.primary\n    },\n    icon: {\n      margin: 10\n    },\n    button: {\n      height: 52,\n      borderRadius: 7,\n      marginBottom: theme.spacing.large,\n      marginTop: theme.spacing.large,\n      backgroundColor: brandTheme?.colors?.primary || theme.colors.cta,\n      justifyContent: 'center'\n    },\n    buttonText: {\n      alignSelf: 'center',\n      fontWeight: theme.fontWeight.bold,\n      fontSize: theme.fontSize.large,\n      color: '#fff'\n    }\n  });\n\nconst Tip = (props: TipProps) => {\n  const templateContext = useTemplateContext();\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n  const {brandTheme, theme} = templateContext;\n  const {Icon, text} = props;\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(brandTheme, theme);\n    setStylesheet(_stylesheet);\n  }, [brandTheme, theme]);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  return (\n    <View style={styleSheet.tip}>\n      <Icon height={16} width={16} style={styleSheet.icon} color={theme.colors.text.primary} />\n      <Text style={styleSheet.tipText}>{text}</Text>\n    </View>\n  );\n};\n\nconst Onboarding = (props: OnboardingProps) => {\n  const templateContext = useTemplateContext();\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n  const {brandTheme, theme, translations} = templateContext;\n  const {onPress} = props;\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(brandTheme, theme);\n    setStylesheet(_stylesheet);\n  }, [brandTheme, theme]);\n\n  // ------------------------------------\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  return (\n    <View style={styleSheet.container}>\n      <Html style={styleSheet.title}>{translations.appReview.presentation.title}</Html>\n      <Html style={styleSheet.text}>{translations.appReview.presentation.text}</Html>\n\n      <Tip Icon={TargetIcon} text={translations.appReview.presentation.labelList.skills.text} />\n      <Tip\n        Icon={QuestionMarkIcon}\n        text={translations.appReview.presentation.labelList.questions.text}\n      />\n      <Tip Icon={HeartIcon} text={translations.appReview.presentation.labelList.lifes.text} />\n      <Tip\n        Icon={CheckCircle2Icon}\n        text={translations.appReview.presentation.labelList.allright.text}\n      />\n      <Touchable\n        testID=\"button-quit-revision-onboarding\"\n        onPress={onPress}\n        analyticsID=\"button-start\"\n        style={styleSheet.button}\n      >\n        <Text style={styleSheet.buttonText}>{translations.ok}</Text>\n      </Touchable>\n    </View>\n  );\n};\n\nexport default Onboarding;\n"],"mappings":"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"}
+{"version":3,"file":"index.native.js","names":["React","useState","useEffect","View","StyleSheet","Text","NovaLineSelectionCursorsCursorArrowTarget","TargetIcon","NovaSolidInterfaceFeedbackInterfaceQuestionMark","QuestionMarkIcon","NovaSolidStatusCheckCircle2","CheckCircle2Icon","NovaCompositionCoorpacademyVoteHeartOutline","HeartIcon","useTemplateContext","Touchable","Html","createStyleSheet","brandTheme","theme","create","container","backgroundColor","colors","white","justifyContent","flex","padding","paddingTop","paddingBottom","title","height","width","fontSize","xxlarge","fontWeight","bold","lineHeight","color","text","primary","marginBottom","large","opacity","tips","marginTop","tip","flexDirection","overflow","alignItems","borderRadius","gray","extra","spacing","micro","tipText","icon","margin","button","cta","buttonText","alignSelf","Tip","props","templateContext","styleSheet","setStylesheet","Icon","_stylesheet","Onboarding","translations","onPress","appReview","presentation","labelList","skills","questions","lifes","allright","ok"],"sources":["../../../src/atom/review-presentation/index.native.tsx"],"sourcesContent":["import React, {useState, useEffect} from 'react';\nimport {View, StyleSheet, Text, ViewStyle, TextStyle} from 'react-native';\nimport {\n  NovaLineSelectionCursorsCursorArrowTarget as TargetIcon,\n  NovaSolidInterfaceFeedbackInterfaceQuestionMark as QuestionMarkIcon,\n  NovaSolidStatusCheckCircle2 as CheckCircle2Icon,\n  NovaCompositionCoorpacademyVoteHeartOutline as HeartIcon\n} from '@coorpacademy/nova-icons';\n\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {Theme} from '../../variables/theme.native';\nimport Touchable from '../../hoc/touchable/index.native';\nimport Html from '../html/index.native';\nimport {Brand} from '../../variables/brand.native';\nimport {OnboardingProps, TipProps} from './prop-types';\n\ntype StyleSheetType = {\n  container: ViewStyle;\n  title: TextStyle;\n  text: TextStyle;\n  tips: ViewStyle;\n  tip: ViewStyle;\n  tipText: TextStyle;\n  icon: ViewStyle;\n  button: ViewStyle;\n  buttonText: TextStyle;\n};\n\nconst createStyleSheet = (brandTheme: Brand, theme: Theme): StyleSheetType =>\n  StyleSheet.create({\n    container: {\n      backgroundColor: theme.colors.white,\n      justifyContent: 'space-between',\n      flex: 1,\n      padding: 20,\n      paddingTop: 20,\n      paddingBottom: 100\n    },\n    title: {\n      height: 72,\n      width: 268,\n      fontSize: theme.fontSize.xxlarge,\n      fontWeight: theme.fontWeight.bold,\n      lineHeight: 36,\n      color: theme.colors.text.primary,\n      marginBottom: 32\n    },\n    text: {\n      fontSize: theme.fontSize.large,\n      color: theme.colors.text.primary,\n      opacity: 0.7\n    },\n    tips: {\n      marginTop: 32,\n      height: 300,\n      justifyContent: 'center'\n    },\n    tip: {\n      flexDirection: 'row',\n      overflow: 'hidden',\n      alignItems: 'center',\n      height: 54,\n      borderRadius: 8,\n      backgroundColor: theme.colors.gray.extra,\n      marginTop: theme.spacing.micro,\n      marginBottom: theme.spacing.micro\n    },\n    tipText: {\n      fontSize: 16,\n      lineHeight: 22,\n      color: theme.colors.text.primary\n    },\n    icon: {\n      margin: 10\n    },\n    button: {\n      height: 52,\n      borderRadius: 7,\n      marginBottom: 32,\n      marginTop: 16,\n      backgroundColor: brandTheme?.colors?.primary || theme.colors.cta,\n      justifyContent: 'center'\n    },\n    buttonText: {\n      alignSelf: 'center',\n      fontWeight: theme.fontWeight.bold,\n      fontSize: theme.fontSize.large,\n      color: '#fff'\n    }\n  });\n\nconst Tip = (props: TipProps) => {\n  const templateContext = useTemplateContext();\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n  const {brandTheme, theme} = templateContext;\n  const {Icon, text} = props;\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(brandTheme, theme);\n    setStylesheet(_stylesheet);\n  }, [brandTheme, theme]);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  return (\n    <View style={styleSheet.tip}>\n      <Icon height={16} width={16} style={styleSheet.icon} color={theme.colors.text.primary} />\n      <Text style={styleSheet.tipText}>{text}</Text>\n    </View>\n  );\n};\n\nconst Onboarding = (props: OnboardingProps) => {\n  const templateContext = useTemplateContext();\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n  const {brandTheme, theme, translations} = templateContext;\n  const {onPress} = props;\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(brandTheme, theme);\n    setStylesheet(_stylesheet);\n  }, [brandTheme, theme]);\n\n  // ------------------------------------\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  return (\n    <View style={styleSheet.container}>\n      <Html style={styleSheet.title}>{translations.appReview.presentation.title}</Html>\n      <Html style={styleSheet.text}>{translations.appReview.presentation.text}</Html>\n\n      <View style={styleSheet.tips}>\n        <Tip Icon={TargetIcon} text={translations.appReview.presentation.labelList.skills.text} />\n        <Tip\n          Icon={QuestionMarkIcon}\n          text={translations.appReview.presentation.labelList.questions.text}\n        />\n        <Tip Icon={HeartIcon} text={translations.appReview.presentation.labelList.lifes.text} />\n        <Tip\n          Icon={CheckCircle2Icon}\n          text={translations.appReview.presentation.labelList.allright.text}\n        />\n      </View>\n      <Touchable\n        testID=\"button-quit-revision-onboarding\"\n        onPress={onPress}\n        analyticsID=\"button-start\"\n        style={styleSheet.button}\n      >\n        <Text style={styleSheet.buttonText}>{translations.ok}</Text>\n      </Touchable>\n    </View>\n  );\n};\n\nexport default Onboarding;\n"],"mappings":"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"}

package/es/hoc/transition/test/fixtures/style.css

@@ -0,0 +1,45 @@
+.container {
+  width: 300px;
+  height: 300px;
+  position: relative;
+  perspective: 800px;
+}
+
+.square {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: transform 1s;
+  border: 1px solid black;
+  top: 100px;
+  left: 100px;
+}
+
+.flipped > .square {
+  transform: rotateY(180deg);
+}
+
+.front,
+.back {
+  margin: 0;
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+}
+
+.front {
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-flow: column;
+}
+
+.back {
+  background-image: url(http://img.voi.pmdstatic.net/fit/http.3A.2F.2Fprd2-bone-image.2Es3-website-eu-west-1.2Eamazonaws.2Ecom.2Fprismamedia_people.2F2017.2F06.2F30.2Fa9a1132c-920d-4d0d-af0c-7c686d72dfe5.2Ejpeg/380x285/quality/80/jacques-chirac.jpg);
+  background-size: cover;
+  transform: rotateY(180deg);
+}

package/es/molecule/select-multiple/test/snapshots/index.js.md

@@ -0,0 +1,211 @@
+# Snapshot report for `src/molecule/select-multiple/test/index.js`
+
+The actual snapshot is saved in `index.js.snap`.
+
+Generated by [AVA](https://ava.li).
+
+## should shallow render when select is opened
+
+> Snapshot 1
+
+    ShallowWrapper {
+      <div
+        className="select-multiple__default variables__defaultText"
+      >
+        <span
+          className="select-multiple__title"
+        >
+          Learning Path:
+        </span>
+        <div
+          className="select-multiple__select"
+          onClick={Function {}}
+          title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut"
+        >
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+          <SvgComponent⍟
+            className="select-multiple__arrow select-multiple__down"
+            color={undefined}
+          />
+        </div>
+        <div
+          className="select-multiple__activeChoices"
+        >
+          <ul
+            className="select-multiple__list"
+          >
+            <li
+              className="select-multiple__choice"
+              key="0"
+            >
+              <TitledCheckbox⍟
+                background={undefined}
+                choice={
+                  {
+                    i: 0,
+                    name: 'Digital',
+                    selected: false,
+                    value: 'digital',
+                  }
+                }
+                onToggle={Function {}}
+              />
+            </li>
+            <li
+              className="select-multiple__choice"
+              key="1"
+            >
+              <TitledCheckbox⍟
+                background={undefined}
+                choice={
+                  {
+                    i: 1,
+                    name: 'Esprit du temps',
+                    selected: false,
+                    value: 'espritDuTemps',
+                  }
+                }
+                onToggle={Function {}}
+              />
+            </li>
+            <li
+              className="select-multiple__choice"
+              key="2"
+            >
+              <TitledCheckbox⍟
+                background={undefined}
+                choice={
+                  {
+                    i: 2,
+                    name: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut',
+                    selected: true,
+                    value: 'loremIpsum',
+                  }
+                }
+                onToggle={Function {}}
+              />
+            </li>
+            <li
+              className="select-multiple__choice"
+              key="3"
+            >
+              <TitledCheckbox⍟
+                background={undefined}
+                choice={
+                  {
+                    i: 3,
+                    name: 'Le monde du projet',
+                    selected: false,
+                    value: 'project',
+                  }
+                }
+                onToggle={Function {}}
+              />
+            </li>
+          </ul>
+        </div>
+      </div>,
+    }
+
+## should shallow render with default props
+
+> Snapshot 1
+
+    ShallowWrapper {
+      <div
+        className="select-multiple__default variables__defaultText"
+      >
+        <span
+          className="select-multiple__title"
+        >
+          Learning Path:
+        </span>
+        <div
+          className="select-multiple__select"
+          onClick={Function {}}
+          title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut"
+        >
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+          <SvgComponent⍟
+            className="select-multiple__arrow"
+            color={undefined}
+          />
+        </div>
+        <div
+          className="select-multiple__choices"
+        >
+          <ul
+            className="select-multiple__list"
+          >
+            <li
+              className="select-multiple__choice"
+              key="0"
+            >
+              <TitledCheckbox⍟
+                background={undefined}
+                choice={
+                  {
+                    i: 0,
+                    name: 'Digital',
+                    selected: false,
+                    value: 'digital',
+                  }
+                }
+                onToggle={Function {}}
+              />
+            </li>
+            <li
+              className="select-multiple__choice"
+              key="1"
+            >
+              <TitledCheckbox⍟
+                background={undefined}
+                choice={
+                  {
+                    i: 1,
+                    name: 'Esprit du temps',
+                    selected: false,
+                    value: 'espritDuTemps',
+                  }
+                }
+                onToggle={Function {}}
+              />
+            </li>
+            <li
+              className="select-multiple__choice"
+              key="2"
+            >
+              <TitledCheckbox⍟
+                background={undefined}
+                choice={
+                  {
+                    i: 2,
+                    name: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut',
+                    selected: true,
+                    value: 'loremIpsum',
+                  }
+                }
+                onToggle={Function {}}
+              />
+            </li>
+            <li
+              className="select-multiple__choice"
+              key="3"
+            >
+              <TitledCheckbox⍟
+                background={undefined}
+                choice={
+                  {
+                    i: 3,
+                    name: 'Le monde du projet',
+                    selected: false,
+                    value: 'project',
+                  }
+                }
+                onToggle={Function {}}
+              />
+            </li>
+          </ul>
+        </div>
+      </div>,
+    }

package/es/template/app-review/index.d.ts

@@ -424,7 +424,6 @@ declare const AppReview: {
                 }>>>;
                 endReview: import("prop-types").Requireable<boolean>;
             }>>;
-            reviewBackgroundAriaLabel: import("prop-types").Requireable<string>;
             congrats: import("prop-types").Requireable<import("prop-types").InferProps<{
                 'aria-label': import("prop-types").Requireable<string>;
                 'data-name': import("prop-types").Requireable<string>;

package/es/template/app-review/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/app-review/index.tsx"],"names":[],"mappings":";AAGA,OAAkB,EAAC,cAAc,EAAC,MAAM,cAAc,CAAC;AAEvD,QAAA,MAAM,SAAS;2BAAwB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOpD,CAAC;AAIF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/app-review/index.tsx"],"names":[],"mappings":";AAGA,OAAkB,EAAC,cAAc,EAAC,MAAM,cAAc,CAAC;AAEvD,QAAA,MAAM,SAAS;2BAAwB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOpD,CAAC;AAIF,eAAe,SAAS,CAAC"}

package/es/template/app-review/player/background-review.css

@@ -0,0 +1,235 @@
+@value breakpoints: "../../../variables/breakpoints.css";
+@value tablet from breakpoints;
+@value mobile from breakpoints;
+
+.interrogationBase {
+    position: absolute;
+    font-family: "Gilroy";
+    font-size: 700px;
+    font-weight: 700;
+    text-align: center;
+    color: black;
+    opacity: 0.02;
+    user-select: none;
+    z-index: 1;
+  }
+  
+  .mainContainer {
+    position: relative;
+    width: 100vw;
+    height: 100%;
+    background: #ffffff;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+  }
+  
+  .container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0px;
+    top: 0px;
+  }
+  
+  .interrogationLeft {
+    composes: interrogationBase;
+    left: -14%;
+    top: -15%;
+    transform: rotate(49.77deg);
+  }
+  
+  .interrogationRight {
+    composes: interrogationBase;
+    left: 72%;
+    top: 12%;
+    transform: rotate(135deg);
+  }
+  
+  .recYellow {
+    position: absolute;
+    left: -40.79%;
+    right: 60.63%;
+    top: 0.34%;
+    bottom: 24.77%;
+    background: radial-gradient(
+      circle closest-side at 57.97% 41.54%,
+      #ffc043 0%,
+      rgba(255, 255, 255, 0) 100%
+    );
+    opacity: 0.4;
+    filter: blur(80px);
+  }
+  
+  .recRed {
+    position: absolute;
+    left: 3.72%;
+    right: 42.62%;
+    top: 23.04%;
+    bottom: -9.22%;
+    background: radial-gradient(
+      circle closest-side at 57.97% 41.54%,
+      #ff7043 0%,
+      rgba(255, 255, 255, 0) 100%
+    );
+    opacity: 0.2;
+    filter: blur(80px);
+  }
+  
+  .recBlue {
+    position: absolute;
+    left: 42.5%;
+    right: 0.35%;
+    top: 40.78%;
+    bottom: -67.67%;
+    background: radial-gradient(
+      circle closest-side at 39.9% 50%,
+      rgba(0, 97, 255, 0.55) 0%,
+      rgba(255, 255, 255, 0) 100%
+    );
+    opacity: 0.5;
+    filter: blur(80px);
+  }
+  
+  .recGreen {
+    position: absolute;
+    left: 64.14%;
+    right: -20.87%;
+    top: -27.96%;
+    bottom: 45.85%;
+    background: radial-gradient(
+      circle closest-side at 56.78% 61.36%,
+      #2199ab 0%,
+      rgba(255, 255, 255, 0) 100%
+    );
+    opacity: 0.5;
+    filter: blur(100px);
+  }
+  
+  .recGreenLight {
+    position: absolute;
+    left: 50.13%;
+    right: -18.51%;
+    top: 13.13%;
+    bottom: 6.78%;
+    background: radial-gradient(
+      circle closest-side at 54.18% 40.45%,
+      #18bb98 0%,
+      rgba(255, 255, 255, 0) 100%
+    );
+    opacity: 0.5;
+    filter: blur(100px);
+  }
+  
+  @media tablet {
+    .interrogationLeft {
+      left: -8%;
+      top: 6%;
+      font-size: 500px;
+    }
+  
+    .interrogationRight {
+      left: 70%;
+      top: 6%;
+      font-size: 500px;
+    }
+  
+    .recYellow {
+      left: -20.79%;
+      right: 55.63%;
+      top: 5.34%;
+      bottom: 34.77%;
+      background: radial-gradient(
+        circle closest-side at 57.97% 41.54%,
+        #ffc043 0%,
+        rgba(255, 255, 255, 0) 100%
+      );
+    }
+  
+    .recRed {
+      left: 10.72%;
+      right: 42.62%;
+      top: 33.04%;
+      bottom: -9.22%;
+      background: radial-gradient(
+        circle closest-side at 57.97% 41.54%,
+        #ff7043 0%,
+        rgba(255, 255, 255, 0) 100%
+      );
+      filter: blur(50px);
+      opacity: 0.2;
+    }
+  
+    .recBlue {
+      bottom: -80.78%;
+      background: radial-gradient(
+        circle closest-side at 39.9% 50%,
+        rgba(0, 97, 255, 0.55) 0%,
+        rgba(255, 255, 255, 0) 100%
+      );
+    }
+  
+    .recGreen {
+      bottom: 43.13%;
+      background: radial-gradient(
+        circle closest-side at 56.78% 61.36%,
+        #2199ab 0%,
+        rgba(255, 255, 255, 0) 100%
+      );
+      opacity: 0.3;
+    }
+  
+    .recGreenLight {
+      left: 40%;
+      top: 13.13%;
+      background: radial-gradient(
+        circle closest-side at 54.18% 40.45%,
+        #18bb98 0%,
+        rgba(255, 255, 255, 0) 100%
+      );
+    }
+  }
+  
+  @media mobile {
+    .interrogationLeft {
+      left: -25%;
+      top: 3%;
+      font-size: 400px;
+    }
+  
+    .interrogationRight {
+      left: 55%;
+      top: 36%;
+      font-size: 400px;
+    }
+  
+    .recYellow {
+      right: 50%;
+      top: -5.34%;
+      opacity: 0.5;
+    }
+  
+    .recRed {
+      opacity: 0.5;
+    }
+  
+    .recBlue {
+      left: 48.5%;
+      right: -35%;
+      bottom: -50.78%;
+      opacity: 0.5;
+    }
+  
+    .recGreen {
+      top: -23.13%;
+      left: 30%;
+      opacity: 0.5;
+    }
+  
+    .recGreenLight {
+      top: -3.13%;
+      left: 30%;
+      opacity: 0.5;
+    }
+  }
+  

package/es/template/app-review/player/background-review.d.ts

@@ -0,0 +1,3 @@
+export default ReviewBackground;
+declare function ReviewBackground(): JSX.Element;
+//# sourceMappingURL=background-review.d.ts.map

package/es/template/app-review/player/background-review.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"background-review.d.ts","sourceRoot":"","sources":["../../../../src/template/app-review/player/background-review.js"],"names":[],"mappings":";AAGA,iDAkBC"}

package/es/{atom/review-background/index.js → template/app-review/player/background-review.js}

@@ -1,14 +1,9 @@
 import React from 'react';
-import style from './style.css';
-import propTypes from './prop-types';
+import style from './background-review.css';
 
-const ReviewBackground = props => {
-  const {
-    'aria-label': ariaLabel
-  } = props;
+const ReviewBackground = () => {
   return /*#__PURE__*/React.createElement("div", {
     className: style.mainContainer,
-    "aria-label": ariaLabel,
     tabIndex: -1
   }, /*#__PURE__*/React.createElement("div", {
     className: style.container,
@@ -37,6 +32,5 @@ const ReviewBackground = props => {
   })));
 };
 
-ReviewBackground.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
 export default ReviewBackground;
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=background-review.js.map

package/es/template/app-review/player/background-review.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"background-review.js","names":["React","style","ReviewBackground","mainContainer","container","interrogationLeft","interrogationRight","recYellow","recRed","recBlue","recGreen","recGreenLight"],"sources":["../../../../src/template/app-review/player/background-review.js"],"sourcesContent":["import React from 'react';\nimport style from './background-review.css';\n\nconst ReviewBackground = () => {\n  return (\n    <div className={style.mainContainer} tabIndex={-1}>\n      <div className={style.container} tabIndex={-1}>\n        <span className={style.interrogationLeft} tabIndex={-1}>\n          ?\n        </span>\n        <span className={style.interrogationRight} tabIndex={-1}>\n          ?\n        </span>\n        <div className={style.recYellow} tabIndex={-1} />\n        <div className={style.recRed} tabIndex={-1} />\n        <div className={style.recBlue} tabIndex={-1} />\n        <div className={style.recGreen} tabIndex={-1} />\n        <div className={style.recGreenLight} tabIndex={-1} />\n      </div>\n    </div>\n  );\n};\n\nexport default ReviewBackground;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,KAAP,MAAkB,yBAAlB;;AAEA,MAAMC,gBAAgB,GAAG,MAAM;EAC7B,oBACE;IAAK,SAAS,EAAED,KAAK,CAACE,aAAtB;IAAqC,QAAQ,EAAE,CAAC;EAAhD,gBACE;IAAK,SAAS,EAAEF,KAAK,CAACG,SAAtB;IAAiC,QAAQ,EAAE,CAAC;EAA5C,gBACE;IAAM,SAAS,EAAEH,KAAK,CAACI,iBAAvB;IAA0C,QAAQ,EAAE,CAAC;EAArD,OADF,eAIE;IAAM,SAAS,EAAEJ,KAAK,CAACK,kBAAvB;IAA2C,QAAQ,EAAE,CAAC;EAAtD,OAJF,eAOE;IAAK,SAAS,EAAEL,KAAK,CAACM,SAAtB;IAAiC,QAAQ,EAAE,CAAC;EAA5C,EAPF,eAQE;IAAK,SAAS,EAAEN,KAAK,CAACO,MAAtB;IAA8B,QAAQ,EAAE,CAAC;EAAzC,EARF,eASE;IAAK,SAAS,EAAEP,KAAK,CAACQ,OAAtB;IAA+B,QAAQ,EAAE,CAAC;EAA1C,EATF,eAUE;IAAK,SAAS,EAAER,KAAK,CAACS,QAAtB;IAAgC,QAAQ,EAAE,CAAC;EAA3C,EAVF,eAWE;IAAK,SAAS,EAAET,KAAK,CAACU,aAAtB;IAAqC,QAAQ,EAAE,CAAC;EAAhD,EAXF,CADF,CADF;AAiBD,CAlBD;;AAoBA,eAAeT,gBAAf"}

package/es/template/app-review/player/index.d.ts

@@ -1,8 +1,7 @@
 export default PlayerReview;
-declare function PlayerReview({ header, stack, reviewBackgroundAriaLabel, congrats, quitPopin }: {
+declare function PlayerReview({ header, stack, congrats, quitPopin }: {
     header: any;
     stack: any;
-    reviewBackgroundAriaLabel: any;
     congrats: any;
     quitPopin: any;
 }): JSX.Element;