@coorpacademy/components 10.22.3 → 10.22.4

package/lib/hoc/modal/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hoc/modal/index.native.tsx"],"names":["HEADER_HEIGHT","createStyleSheet","theme","StyleSheet","create","container","borderRadius","radius","card","overflow","backgroundColor","colors","white","header","alignItems","justifyContent","paddingHorizontal","spacing","medium","height","content","paddingBottom","contentWithHeader","paddingTop","contentWithIcon","small","icon","marginTop","padding","thumbnail","alignSelf","iconContent","Modal","props","templateContext","styleSheet","setStylesheet","children","headerBackgroundColor","iconBackgroundColor","renderIcon","contentStyle","onClose","testID","_stylesheet","gray","dark"],"mappings":"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","sourcesContent":["import React, {useState, useEffect} from 'react';\nimport {StyleSheet, View, ViewStyle} from 'react-native';\nimport HeaderBackButton from '../../atom/header-back-button/index.native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\n\nexport type Props = {\n  children: React.ReactNode;\n  headerBackgroundColor?: string;\n  iconBackgroundColor?: string;\n  renderIcon?: React.ReactNode;\n  contentStyle?: ViewStyle;\n  onClose: () => void;\n  testID?: string;\n};\n\nexport const HEADER_HEIGHT = 64;\n\ntype StyleSheetType = {\n  container: {\n    borderRadius: number;\n    overflow: string;\n    backgroundColor: string;\n  };\n  header: {\n    backgroundColor: string;\n    alignItems: string;\n    justifyContent: string;\n    paddingHorizontal: number;\n    height: number;\n  };\n  content: {\n    paddingHorizontal: number;\n    paddingBottom: number;\n    alignItems: string;\n  };\n  contentWithHeader: {\n    paddingTop: number;\n  };\n  contentWithIcon: {\n    paddingTop: number;\n  };\n  icon: {\n    marginTop: number;\n    padding: number;\n    backgroundColor: string;\n    borderRadius: string;\n    alignSelf: string;\n  };\n  iconContent: {\n    backgroundColor: string;\n    padding: number;\n    borderRadius: number;\n    justifyContent: string;\n    alignItems: string;\n  };\n};\n\nconst createStyleSheet = theme =>\n  StyleSheet.create({\n    container: {\n      borderRadius: theme.radius.card,\n      overflow: 'hidden',\n      backgroundColor: theme.colors.white\n    },\n    header: {\n      backgroundColor: theme.colors.white,\n      alignItems: 'flex-end',\n      justifyContent: 'center',\n      paddingHorizontal: theme.spacing.medium,\n      height: HEADER_HEIGHT\n    },\n    content: {\n      paddingHorizontal: theme.spacing.medium,\n      paddingBottom: theme.spacing.medium,\n      alignItems: 'center'\n    },\n    contentWithHeader: {\n      paddingTop: theme.spacing.medium\n    },\n    contentWithIcon: {\n      paddingTop: theme.spacing.small\n    },\n    icon: {\n      marginTop: -HEADER_HEIGHT * (3 / 4),\n      padding: 5,\n      backgroundColor: theme.colors.white,\n      borderRadius: theme.radius.thumbnail,\n      alignSelf: 'center'\n    },\n    iconContent: {\n      backgroundColor: theme.colors.white,\n      padding: theme.spacing.small,\n      borderRadius: theme.radius.thumbnail,\n      justifyContent: 'center',\n      alignItems: 'center'\n    }\n  });\n\nconst Modal = (props: Props) => {\n  const templateContext = useTemplateContext();\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n  const {theme} = templateContext;\n\n  const {\n    children,\n    headerBackgroundColor,\n    iconBackgroundColor,\n    renderIcon,\n    contentStyle,\n    onClose,\n    testID\n  } = props;\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.container} testID={testID}>\n      <View style={[styleSheet.header, {backgroundColor: headerBackgroundColor}]}>\n        <HeaderBackButton\n          color={theme.colors.gray.dark}\n          isFloating={false}\n          testID=\"close-modal\"\n          onPress={onClose}\n          type=\"close\"\n        />\n      </View>\n      {renderIcon ? (\n        <View style={styleSheet.icon}>\n          <View style={[styleSheet.iconContent, {backgroundColor: iconBackgroundColor}]}>\n            {renderIcon}\n          </View>\n        </View>\n      ) : null}\n      <View\n        style={[\n          styleSheet.content,\n          headerBackgroundColor && styleSheet.contentWithHeader,\n          renderIcon && styleSheet.contentWithIcon,\n          contentStyle\n        ]}\n      >\n        {children}\n      </View>\n    </View>\n  );\n};\n\nexport default Modal;\n"],"file":"index.native.js"}

package/lib/hoc/modal/select/index.native.js

@@ -0,0 +1,101 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _templateContext = require("../../../template/app-review/template-context");
+
+var _index = _interopRequireDefault(require("../index.native"));
+
+var _index2 = _interopRequireDefault(require("../select-item/index.native"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const createStyleSheet = theme => _reactNative.StyleSheet.create({
+  content: {
+    paddingHorizontal: 0
+  },
+  separator: {
+    borderTopWidth: 1,
+    borderColor: theme.colors.border
+  },
+  list: {
+    width: '100%'
+  }
+});
+
+const keyExtractor = (item, index) => {
+  return `modal-select-item-${index + 1}`;
+};
+
+const createRenderItem = (value, testID, onChange) => ({
+  item,
+  index
+}) => {
+  // eslint-disable-next-line unicorn/consistent-function-scoping
+  const handleChange = _value => () => onChange(_value);
+
+  return /*#__PURE__*/_react.default.createElement(_index2.default, {
+    onPress: handleChange(item.text),
+    isSelected: value === item.text,
+    testID: `${testID}-item-${index + 1}`
+  }, item.text);
+};
+
+const createSeparator = styleSheet => () => {
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styleSheet?.separator
+  });
+};
+
+const ModalSelect = props => {
+  const templateContext = (0, _templateContext.useTemplateContext)();
+  const [styleSheet, setStylesheet] = (0, _react.useState)(null);
+  const {
+    theme
+  } = templateContext;
+  const {
+    value,
+    values,
+    onChange,
+    onClose,
+    testID = 'modal-select'
+  } = props;
+  (0, _react.useEffect)(() => {
+    const _stylesheet = createStyleSheet(theme);
+
+    setStylesheet(_stylesheet);
+  }, [theme]);
+  const renderItem = (0, _react.useMemo)(() => createRenderItem(value, testID, onChange), [value, testID, onChange]);
+  const renderSeparator = (0, _react.useMemo)(() => createSeparator(styleSheet), [styleSheet]);
+
+  if (!styleSheet) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    onClose: onClose,
+    contentStyle: styleSheet?.content,
+    testID: testID
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
+    data: values,
+    renderItem: renderItem,
+    keyExtractor: keyExtractor,
+    showsVerticalScrollIndicator: false,
+    ItemSeparatorComponent: renderSeparator,
+    style: styleSheet?.list,
+    testID: `${testID}-items`
+  }));
+};
+
+var _default = ModalSelect;
+exports.default = _default;
+//# sourceMappingURL=index.native.js.map

package/lib/hoc/modal/select/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/hoc/modal/select/index.native.tsx"],"names":["createStyleSheet","theme","StyleSheet","create","content","paddingHorizontal","separator","borderTopWidth","borderColor","colors","border","list","width","keyExtractor","item","index","createRenderItem","value","testID","onChange","handleChange","_value","text","createSeparator","styleSheet","ModalSelect","props","templateContext","setStylesheet","values","onClose","_stylesheet","renderItem","renderSeparator"],"mappings":"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","sourcesContent":["import React, {useState, useEffect, useMemo} from 'react';\nimport {View, FlatList, StyleSheet} from 'react-native';\nimport type {Choice} from '../../../types/progression-engine.d';\n\nimport {Theme} from '../../../variables/theme.native';\nimport {useTemplateContext} from '../../../template/app-review/template-context';\n\nimport Modal from '../index.native';\nimport ModalSelectItem from '../select-item/index.native';\n\ntype ChoiceValue = Pick<Choice, 'value'>;\ntype ChoiceItem = Pick<Choice, 'items'>;\nexport type OnChangeFunction = (value: ChoiceValue) => void;\n\nexport type Props = {\n  value?: ChoiceValue;\n  values: Array<ChoiceItem>;\n  onChange: OnChangeFunction;\n  onClose?: () => void;\n  testID?: string;\n};\n\ntype StyleSheetType = {\n  content: {\n    paddingHorizontal: number;\n  };\n  separator: {\n    borderTopWidth: number;\n    borderColor: string;\n  };\n  list: {\n    width: string;\n  };\n};\n\nconst createStyleSheet = (theme: Theme) =>\n  StyleSheet.create({\n    content: {\n      paddingHorizontal: 0\n    },\n    separator: {\n      borderTopWidth: 1,\n      borderColor: theme.colors.border\n    },\n    list: {\n      width: '100%'\n    }\n  });\n\nconst keyExtractor = (item: ChoiceItem, index: number): string => {\n  return `modal-select-item-${index + 1}`;\n};\n\nconst createRenderItem = (value: ChoiceValue, testID: String, onChange: OnChangeFunction) => ({\n  item,\n  index\n}: {\n  item: ChoiceItem;\n  index: number;\n}) => {\n  // eslint-disable-next-line unicorn/consistent-function-scoping\n  const handleChange = (_value: ChoiceValue | void) => () => onChange(_value);\n\n  return (\n    <ModalSelectItem\n      onPress={handleChange(item.text)}\n      isSelected={value === item.text}\n      testID={`${testID}-item-${index + 1}`}\n    >\n      {item.text}\n    </ModalSelectItem>\n  );\n};\n\nconst createSeparator = (styleSheet: StyleSheetType) => () => {\n  return <View style={styleSheet?.separator} />;\n};\n\nconst ModalSelect = (props: Props) => {\n  const templateContext = useTemplateContext();\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n  const {theme} = templateContext;\n  const {value, values, onChange, onClose, testID = 'modal-select'} = props;\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  const renderItem = useMemo(() => createRenderItem(value, testID, onChange), [\n    value,\n    testID,\n    onChange\n  ]);\n  const renderSeparator = useMemo(() => createSeparator(styleSheet), [styleSheet]);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  return (\n    <Modal onClose={onClose} contentStyle={styleSheet?.content} testID={testID}>\n      <FlatList\n        data={values}\n        renderItem={renderItem}\n        keyExtractor={keyExtractor}\n        showsVerticalScrollIndicator={false}\n        ItemSeparatorComponent={renderSeparator}\n        style={styleSheet?.list}\n        testID={`${testID}-items`}\n      />\n    </Modal>\n  );\n};\n\nexport default ModalSelect;\n"],"file":"index.native.js"}

package/lib/hoc/modal/select-item/index.native.js

@@ -0,0 +1,70 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _index = _interopRequireDefault(require("../../../atom/text/index.native"));
+
+var _index2 = _interopRequireDefault(require("../../touchable/index.native"));
+
+var _templateContext = require("../../../template/app-review/template-context");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const createStyleSheet = (brandTheme, theme) => _reactNative.StyleSheet.create({
+  container: {
+    backgroundColor: theme.colors.white,
+    padding: theme.spacing.small
+  },
+  text: {
+    fontWeight: theme.fontWeight.bold,
+    color: theme.colors.black
+  },
+  selectedTextStyle: {
+    color: brandTheme?.colors.primary
+  }
+});
+
+const ModalSelectItem = props => {
+  const templateContext = (0, _templateContext.useTemplateContext)();
+  const [styleSheet, setStylesheet] = (0, _react.useState)(null);
+  const {
+    brandTheme,
+    theme
+  } = templateContext;
+  (0, _react.useEffect)(() => {
+    const _stylesheet = createStyleSheet(brandTheme, theme);
+
+    setStylesheet(_stylesheet);
+  }, [theme, brandTheme]);
+
+  if (!styleSheet) {
+    return null;
+  }
+
+  const {
+    children,
+    onPress,
+    isSelected,
+    testID
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(_index2.default, {
+    onPress: onPress,
+    style: styleSheet.container,
+    testID: testID
+  }, /*#__PURE__*/_react.default.createElement(_index.default, {
+    style: [styleSheet.text, isSelected && styleSheet.selectedTextStyle]
+  }, children));
+};
+
+var _default = ModalSelectItem;
+exports.default = _default;
+//# sourceMappingURL=index.native.js.map

package/lib/hoc/modal/select-item/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/hoc/modal/select-item/index.native.tsx"],"names":["createStyleSheet","brandTheme","theme","StyleSheet","create","container","backgroundColor","colors","white","padding","spacing","small","text","fontWeight","bold","color","black","selectedTextStyle","primary","ModalSelectItem","props","templateContext","styleSheet","setStylesheet","_stylesheet","children","onPress","isSelected","testID"],"mappings":";;;;;AAAA;;AACA;;AAGA;;AACA;;AACA;;;;;;;;AAwBA,MAAMA,gBAAgB,GAAG,CAACC,UAAD,EAAkBC,KAAlB,KACvBC,wBAAWC,MAAX,CAAkB;AAChBC,EAAAA,SAAS,EAAE;AACTC,IAAAA,eAAe,EAAEJ,KAAK,CAACK,MAAN,CAAaC,KADrB;AAETC,IAAAA,OAAO,EAAEP,KAAK,CAACQ,OAAN,CAAcC;AAFd,GADK;AAKhBC,EAAAA,IAAI,EAAE;AACJC,IAAAA,UAAU,EAAEX,KAAK,CAACW,UAAN,CAAiBC,IADzB;AAEJC,IAAAA,KAAK,EAAEb,KAAK,CAACK,MAAN,CAAaS;AAFhB,GALU;AAShBC,EAAAA,iBAAiB,EAAE;AACjBF,IAAAA,KAAK,EAAEd,UAAU,EAAEM,MAAZ,CAAmBW;AADT;AATH,CAAlB,CADF;;AAeA,MAAMC,eAAe,GAAIC,KAAD,IAAkB;AACxC,QAAMC,eAAe,GAAG,0CAAxB;AACA,QAAM,CAACC,UAAD,EAAaC,aAAb,IAA8B,qBAAgC,IAAhC,CAApC;AACA,QAAM;AAACtB,IAAAA,UAAD;AAAaC,IAAAA;AAAb,MAAsBmB,eAA5B;AAEA,wBAAU,MAAM;AACd,UAAMG,WAAW,GAAGxB,gBAAgB,CAACC,UAAD,EAAaC,KAAb,CAApC;;AACAqB,IAAAA,aAAa,CAACC,WAAD,CAAb;AACD,GAHD,EAGG,CAACtB,KAAD,EAAQD,UAAR,CAHH;;AAKA,MAAI,CAACqB,UAAL,EAAiB;AACf,WAAO,IAAP;AACD;;AAED,QAAM;AAACG,IAAAA,QAAD;AAAWC,IAAAA,OAAX;AAAoBC,IAAAA,UAApB;AAAgCC,IAAAA;AAAhC,MAA0CR,KAAhD;AAEA,sBACE,6BAAC,eAAD;AAAW,IAAA,OAAO,EAAEM,OAApB;AAA6B,IAAA,KAAK,EAAEJ,UAAU,CAACjB,SAA/C;AAA0D,IAAA,MAAM,EAAEuB;AAAlE,kBACE,6BAAC,cAAD;AAAM,IAAA,KAAK,EAAE,CAACN,UAAU,CAACV,IAAZ,EAAkBe,UAAU,IAAIL,UAAU,CAACL,iBAA3C;AAAb,KAA6EQ,QAA7E,CADF,CADF;AAKD,CArBD;;eAuBeN,e","sourcesContent":["import React, {useState, useEffect} from 'react';\nimport {StyleSheet, TextStyle} from 'react-native';\nimport type {PressEvent} from 'react-native/Libraries/Types/CoreEventTypes';\n\nimport Text from '../../../atom/text/index.native';\nimport Touchable from '../../touchable/index.native';\nimport {useTemplateContext} from '../../../template/app-review/template-context';\nimport {Theme} from '../../../variables/theme.native';\n\nexport type Props = {\n  isSelected?: boolean;\n  children: string;\n  onPress?: (event: PressEvent) => any;\n  testID?: string;\n};\n\ntype StyleSheetType = {\n  container: {\n    backgroundColor: string;\n    padding: number;\n  };\n  text: {\n    fontWeight: TextStyle;\n    color: string;\n  };\n  selectedTextStyle: {\n    color: string;\n  };\n};\n\nconst createStyleSheet = (brandTheme: any, theme: Theme) =>\n  StyleSheet.create({\n    container: {\n      backgroundColor: theme.colors.white,\n      padding: theme.spacing.small\n    },\n    text: {\n      fontWeight: theme.fontWeight.bold,\n      color: theme.colors.black\n    },\n    selectedTextStyle: {\n      color: brandTheme?.colors.primary\n    }\n  });\n\nconst ModalSelectItem = (props: Props) => {\n  const templateContext = useTemplateContext();\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n  const {brandTheme, theme} = templateContext;\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(brandTheme, theme);\n    setStylesheet(_stylesheet);\n  }, [theme, brandTheme]);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  const {children, onPress, isSelected, testID} = props;\n\n  return (\n    <Touchable onPress={onPress} style={styleSheet.container} testID={testID}>\n      <Text style={[styleSheet.text, isSelected && styleSheet.selectedTextStyle]}>{children}</Text>\n    </Touchable>\n  );\n};\n\nexport default ModalSelectItem;\n"],"file":"index.native.js"}

package/lib/hoc/touchable/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hoc/touchable/index.native.tsx"],"names":["hitSlop","left","right","bottom","top","logEvent","eventName","analyticsID","analytics","analyticsParams","id","Touchable","props","templateContext","theme","vibration","onPress","onLongPress","isWithoutFeedback","isHighlight","activeOpacity","disabled","handlePress","event","vibrate","ANALYTICS_EVENT_TYPE","PRESS","handleLongPress","LONG_PRESS","colors","gray","light"],"mappings":";;;;;AAAA;;AAQA;;AACA;;AACA;;;;;;;;AAGA,MAAMA,OAAO,GAAG;AACdC,EAAAA,IAAI,EAAE,EADQ;AAEdC,EAAAA,KAAK,EAAE,EAFO;AAGdC,EAAAA,MAAM,EAAE,EAHM;AAIdC,EAAAA,GAAG,EAAE;AAJS,CAAhB;;AAmCA,MAAMC,QAAQ,GAAG,CACfC,SADe,EAEfC,WAFe,EAGfC,SAHe,EAIfC,eAJe,KAKZ;AACHD,EAAAA,SAAS,IACPA,SAAS,CAACH,QAAV,CAAmBC,SAAnB,wBACMG,eAAe,IAAI,EADzB;AAEEC,IAAAA,EAAE,EAAEH;AAFN,KADF;AAKD,CAXD;;AAaA,MAAMI,SAAS,GAAIC,KAAD,IAAkB;AAClC,QAAMC,eAAe,GAAG,0CAAxB;AAEA,QAAM;AAACC,IAAAA,KAAD;AAAQC,IAAAA,SAAR;AAAmBP,IAAAA;AAAnB,MAAgCK,eAAtC;AAEA,QAAM;AACJN,IAAAA,WADI;AAEJE,IAAAA,eAFI;AAGJO,IAAAA,OAHI;AAIJC,IAAAA,WAJI;AAKJC,IAAAA,iBALI;AAMJC,IAAAA,WANI;AAOJC,IAAAA,aAPI;AAQJC,IAAAA;AARI,MASFT,KATJ;AAWA,QAAMU,WAAW,GAAG,oBAClB,MAAOC,KAAD,IAAuB;AAC3B,QAAI,CAACP,OAAL,EAAc;AAEdD,IAAAA,SAAS,EAAES,OAAX;AAEAhB,IAAAA,SAAS,IAAIH,QAAQ,CAACoB,gCAAqBC,KAAtB,EAA6BnB,WAA7B,EAA0CC,SAA1C,EAAqDC,eAArD,CAArB;AACAO,IAAAA,OAAO,CAACO,KAAD,CAAP;AACD,GARiB,EASlB,CAACf,SAAD,EAAYD,WAAZ,EAAyBE,eAAzB,EAA0CO,OAA1C,EAAmDD,SAAnD,CATkB,CAApB;AAYA,QAAMY,eAAe,GAAG,oBACtB,MAAOJ,KAAD,IAAuB;AAC3B,QAAI,CAACN,WAAL,EAAkB;AAElBF,IAAAA,SAAS,EAAES,OAAX;AAEAhB,IAAAA,SAAS,IACPH,QAAQ,CAACoB,gCAAqBG,UAAtB,EAAkCrB,WAAlC,EAA+CC,SAA/C,EAA0DC,eAA1D,CADV;AAEAQ,IAAAA,WAAW,CAACM,KAAD,CAAX;AACD,GATqB,EAUtB,CAACf,SAAD,EAAYD,WAAZ,EAAyBE,eAAzB,EAA0CQ,WAA1C,EAAuDF,SAAvD,CAVsB,CAAxB;;AAaA,MAAII,WAAJ,EAAiB;AACf,wBACE,6BAAC,+BAAD,eACMP,KADN;AAEE,MAAA,OAAO,EAAEZ,OAFX;AAGE,MAAA,aAAa,EAAEc,KAAK,CAACe,MAAN,CAAaC,IAAb,CAAkBC,KAHnC;AAIE,MAAA,OAAO,EAAET,WAJX;AAKE,MAAA,WAAW,EAAEK,eALf;AAME,MAAA,aAAa,EAAEP,aAAa,KAAKC,QAAQ,GAAG,CAAH,GAAO,IAApB;AAN9B,OADF;AAUD;;AAED,sBACE,6BAAC,6BAAD,eACMT,KADN;AAEE,IAAA,OAAO,EAAEZ,OAFX;AAGE,IAAA,OAAO,EAAEsB,WAHX;AAIE,IAAA,WAAW,EAAEK,eAJf;AAKE,IAAA,aAAa,EAAGT,iBAAiB,IAAI,CAAtB,IAA4BE,aAA5B,KAA8CC,QAAQ,GAAG,CAAH,GAAO,GAA7D;AALjB,KADF;AASD,CA/DD;;eAiEeV,S","sourcesContent":["import {TouchableOpacity, TouchableHighlight, ViewStyle} from 'react-native';\nimport type {\n  BlurEvent,\n  LayoutEvent,\n  FocusEvent,\n  PressEvent\n} from 'react-native/Libraries/Types/CoreEventTypes';\n\nimport React, {useMemo} from 'react';\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {ANALYTICS_EVENT_TYPE, Analytics, AnalyticsEventParams} from '../../variables/analytics';\nimport {Vibration} from '../../variables/vibration';\n\nconst hitSlop = {\n  left: 12,\n  right: 12,\n  bottom: 12,\n  top: 12\n};\n\nexport type Props = {\n  accessible?: boolean;\n  children?: React.ReactNode;\n  delayLongPress?: number;\n  delayPressIn?: number;\n  delayPressOut?: number;\n  disabled?: boolean;\n  focusable?: boolean;\n  onBlur?: (event: BlurEvent) => any;\n  onFocus?: (event: FocusEvent) => any;\n  onLayout?: (event: LayoutEvent) => any;\n  onLongPress?: (event: PressEvent) => any;\n  onPress?: (event: PressEvent) => any;\n  onPressIn?: (event: PressEvent) => any;\n  onPressOut?: (event: PressEvent) => any;\n  testID?: string;\n  isHighlight?: boolean;\n  isWithoutFeedback?: boolean;\n  // for TouchableOpacity\n  activeOpacity?: number;\n  style?: ViewStyle;\n  // Analytics\n  analytics?: Analytics;\n  analyticsID: string;\n  analyticsParams?: AnalyticsEventParams;\n  vibration?: Vibration;\n};\n\nconst logEvent = (\n  eventName: string,\n  analyticsID: String,\n  analytics: Analytics,\n  analyticsParams: AnalyticsEventParams | undefined\n) => {\n  analytics &&\n    analytics.logEvent(eventName, {\n      ...(analyticsParams || {}),\n      id: analyticsID\n    });\n};\n\nconst Touchable = (props: Props) => {\n  const templateContext = useTemplateContext();\n\n  const {theme, vibration, analytics} = templateContext;\n\n  const {\n    analyticsID,\n    analyticsParams,\n    onPress,\n    onLongPress,\n    isWithoutFeedback,\n    isHighlight,\n    activeOpacity,\n    disabled\n  } = props;\n\n  const handlePress = useMemo(\n    () => (event: PressEvent) => {\n      if (!onPress) return;\n\n      vibration?.vibrate();\n\n      analytics && logEvent(ANALYTICS_EVENT_TYPE.PRESS, analyticsID, analytics, analyticsParams);\n      onPress(event);\n    },\n    [analytics, analyticsID, analyticsParams, onPress, vibration]\n  );\n\n  const handleLongPress = useMemo(\n    () => (event: PressEvent) => {\n      if (!onLongPress) return;\n\n      vibration?.vibrate();\n\n      analytics &&\n        logEvent(ANALYTICS_EVENT_TYPE.LONG_PRESS, analyticsID, analytics, analyticsParams);\n      onLongPress(event);\n    },\n    [analytics, analyticsID, analyticsParams, onLongPress, vibration]\n  );\n\n  if (isHighlight) {\n    return (\n      <TouchableHighlight\n        {...props}\n        hitSlop={hitSlop}\n        underlayColor={theme.colors.gray.light}\n        onPress={handlePress}\n        onLongPress={handleLongPress}\n        activeOpacity={activeOpacity || (disabled ? 1 : 0.85)}\n      />\n    );\n  }\n\n  return (\n    <TouchableOpacity\n      {...props}\n      hitSlop={hitSlop}\n      onPress={handlePress}\n      onLongPress={handleLongPress}\n      activeOpacity={(isWithoutFeedback && 1) || activeOpacity || (disabled ? 1 : 0.2)}\n    />\n  );\n};\n\nexport default Touchable;\n"],"file":"index.native.js"}
+{"version":3,"sources":["../../../src/hoc/touchable/index.native.tsx"],"names":["hitSlop","left","right","bottom","top","logEvent","eventName","analyticsID","analytics","analyticsParams","id","Touchable","props","templateContext","theme","vibration","onPress","onLongPress","isWithoutFeedback","isHighlight","activeOpacity","disabled","handlePress","event","vibrate","ANALYTICS_EVENT_TYPE","PRESS","handleLongPress","LONG_PRESS","colors","gray","light"],"mappings":";;;;;AAAA;;AAQA;;AACA;;AACA;;;;;;;;AAGA,MAAMA,OAAO,GAAG;AACdC,EAAAA,IAAI,EAAE,EADQ;AAEdC,EAAAA,KAAK,EAAE,EAFO;AAGdC,EAAAA,MAAM,EAAE,EAHM;AAIdC,EAAAA,GAAG,EAAE;AAJS,CAAhB;;AAmCA,MAAMC,QAAQ,GAAG,CACfC,SADe,EAEfC,WAFe,EAGfC,SAHe,EAIfC,eAJe,KAKZ;AACHD,EAAAA,SAAS,IACPA,SAAS,CAACH,QAAV,CAAmBC,SAAnB,wBACMG,eAAe,IAAI,EADzB;AAEEC,IAAAA,EAAE,EAAEH;AAFN,KADF;AAKD,CAXD;;AAaA,MAAMI,SAAS,GAAIC,KAAD,IAAkB;AAClC,QAAMC,eAAe,GAAG,0CAAxB;AAEA,QAAM;AAACC,IAAAA,KAAD;AAAQC,IAAAA,SAAR;AAAmBP,IAAAA;AAAnB,MAAgCK,eAAtC;AAEA,QAAM;AACJN,IAAAA,WADI;AAEJE,IAAAA,eAFI;AAGJO,IAAAA,OAHI;AAIJC,IAAAA,WAJI;AAKJC,IAAAA,iBALI;AAMJC,IAAAA,WANI;AAOJC,IAAAA,aAPI;AAQJC,IAAAA;AARI,MASFT,KATJ;AAWA,QAAMU,WAAW,GAAG,oBAClB,MAAOC,KAAD,IAAuB;AAC3B,QAAI,CAACP,OAAL,EAAc;AAEdD,IAAAA,SAAS,EAAES,OAAX;AAEAhB,IAAAA,SAAS,IAAIH,QAAQ,CAACoB,gCAAqBC,KAAtB,EAA6BnB,WAA7B,EAA0CC,SAA1C,EAAqDC,eAArD,CAArB;AACAO,IAAAA,OAAO,CAACO,KAAD,CAAP;AACD,GARiB,EASlB,CAACf,SAAD,EAAYD,WAAZ,EAAyBE,eAAzB,EAA0CO,OAA1C,EAAmDD,SAAnD,CATkB,CAApB;AAYA,QAAMY,eAAe,GAAG,oBACtB,MAAOJ,KAAD,IAAuB;AAC3B,QAAI,CAACN,WAAL,EAAkB;AAElBF,IAAAA,SAAS,EAAES,OAAX;AAEAhB,IAAAA,SAAS,IACPH,QAAQ,CAACoB,gCAAqBG,UAAtB,EAAkCrB,WAAlC,EAA+CC,SAA/C,EAA0DC,eAA1D,CADV;AAEAQ,IAAAA,WAAW,CAACM,KAAD,CAAX;AACD,GATqB,EAUtB,CAACf,SAAD,EAAYD,WAAZ,EAAyBE,eAAzB,EAA0CQ,WAA1C,EAAuDF,SAAvD,CAVsB,CAAxB;;AAaA,MAAII,WAAJ,EAAiB;AACf,wBACE,6BAAC,+BAAD,eACMP,KADN;AAEE,MAAA,OAAO,EAAEZ,OAFX;AAGE,MAAA,aAAa,EAAEc,KAAK,CAACe,MAAN,CAAaC,IAAb,CAAkBC,KAHnC;AAIE,MAAA,OAAO,EAAET,WAJX;AAKE,MAAA,WAAW,EAAEK,eALf;AAME,MAAA,aAAa,EAAEP,aAAa,KAAKC,QAAQ,GAAG,CAAH,GAAO,IAApB;AAN9B,OADF;AAUD;;AAED,sBACE,6BAAC,6BAAD,eACMT,KADN;AAEE,IAAA,OAAO,EAAEZ,OAFX;AAGE,IAAA,OAAO,EAAEsB,WAHX;AAIE,IAAA,WAAW,EAAEK,eAJf;AAKE,IAAA,aAAa,EAAGT,iBAAiB,IAAI,CAAtB,IAA4BE,aAA5B,KAA8CC,QAAQ,GAAG,CAAH,GAAO,GAA7D;AALjB,KADF;AASD,CA/DD;;eAiEeV,S","sourcesContent":["import {TouchableOpacity, TouchableHighlight, ViewStyle} from 'react-native';\nimport type {\n  BlurEvent,\n  LayoutEvent,\n  FocusEvent,\n  PressEvent\n} from 'react-native/Libraries/Types/CoreEventTypes';\n\nimport React, {useMemo} from 'react';\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {ANALYTICS_EVENT_TYPE, Analytics, AnalyticsEventParams} from '../../variables/analytics';\nimport {Vibration} from '../../variables/vibration';\n\nconst hitSlop = {\n  left: 12,\n  right: 12,\n  bottom: 12,\n  top: 12\n};\n\nexport type Props = {\n  accessible?: boolean;\n  children?: React.ReactNode;\n  delayLongPress?: number;\n  delayPressIn?: number;\n  delayPressOut?: number;\n  disabled?: boolean;\n  focusable?: boolean;\n  onBlur?: (event: BlurEvent) => any;\n  onFocus?: (event: FocusEvent) => any;\n  onLayout?: (event: LayoutEvent) => any;\n  onLongPress?: (event: PressEvent) => any;\n  onPress?: (event: PressEvent) => any;\n  onPressIn?: (event: PressEvent) => any;\n  onPressOut?: (event: PressEvent) => any;\n  testID?: string;\n  isHighlight?: boolean;\n  isWithoutFeedback?: boolean;\n  // for TouchableOpacity\n  activeOpacity?: number;\n  style?: ViewStyle;\n  // Analytics\n  analytics?: Analytics;\n  analyticsID?: string;\n  analyticsParams?: AnalyticsEventParams;\n  vibration?: Vibration;\n};\n\nconst logEvent = (\n  eventName: string,\n  analyticsID: String,\n  analytics: Analytics,\n  analyticsParams: AnalyticsEventParams | undefined\n) => {\n  analytics &&\n    analytics.logEvent(eventName, {\n      ...(analyticsParams || {}),\n      id: analyticsID\n    });\n};\n\nconst Touchable = (props: Props) => {\n  const templateContext = useTemplateContext();\n\n  const {theme, vibration, analytics} = templateContext;\n\n  const {\n    analyticsID,\n    analyticsParams,\n    onPress,\n    onLongPress,\n    isWithoutFeedback,\n    isHighlight,\n    activeOpacity,\n    disabled\n  } = props;\n\n  const handlePress = useMemo(\n    () => (event: PressEvent) => {\n      if (!onPress) return;\n\n      vibration?.vibrate();\n\n      analytics && logEvent(ANALYTICS_EVENT_TYPE.PRESS, analyticsID, analytics, analyticsParams);\n      onPress(event);\n    },\n    [analytics, analyticsID, analyticsParams, onPress, vibration]\n  );\n\n  const handleLongPress = useMemo(\n    () => (event: PressEvent) => {\n      if (!onLongPress) return;\n\n      vibration?.vibrate();\n\n      analytics &&\n        logEvent(ANALYTICS_EVENT_TYPE.LONG_PRESS, analyticsID, analytics, analyticsParams);\n      onLongPress(event);\n    },\n    [analytics, analyticsID, analyticsParams, onLongPress, vibration]\n  );\n\n  if (isHighlight) {\n    return (\n      <TouchableHighlight\n        {...props}\n        hitSlop={hitSlop}\n        underlayColor={theme.colors.gray.light}\n        onPress={handlePress}\n        onLongPress={handleLongPress}\n        activeOpacity={activeOpacity || (disabled ? 1 : 0.85)}\n      />\n    );\n  }\n\n  return (\n    <TouchableOpacity\n      {...props}\n      hitSlop={hitSlop}\n      onPress={handlePress}\n      onLongPress={handleLongPress}\n      activeOpacity={(isWithoutFeedback && 1) || activeOpacity || (disabled ? 1 : 0.2)}\n    />\n  );\n};\n\nexport default Touchable;\n"],"file":"index.native.js"}

package/lib/index.js

@@ -22,5 +22,9 @@ var _loading = _interopRequireDefault(require("./template/app-player/loading"));
 
 exports.Loading = _loading.default;
 
+var _popinNoAccess = _interopRequireDefault(require("./template/app-player/popin-no-access"));
+
+exports.PopinNoAccess = _popinNoAccess.default;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":[],"mappings":";;;;AAAA;;;;AACA;;;;AACA;;;;AACA;;;;AACA","sourcesContent":["import Provider from './atom/provider';\nimport PopinEnd from './template/app-player/popin-end';\nimport PopinCorrection from './template/app-player/popin-correction';\nimport Player from './template/app-player/player';\nimport Loading from './template/app-player/loading';\n\nexport {Provider, PopinEnd, PopinCorrection, Loading, Player};\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":[],"mappings":";;;;AAAA;;;;AACA;;;;AACA;;;;AACA;;;;AACA;;;;AACA","sourcesContent":["import Provider from './atom/provider';\nimport PopinEnd from './template/app-player/popin-end';\nimport PopinCorrection from './template/app-player/popin-correction';\nimport Player from './template/app-player/player';\nimport Loading from './template/app-player/loading';\nimport PopinNoAccess from './template/app-player/popin-no-access';\n\nexport {Provider, PopinEnd, PopinCorrection, Loading, Player, PopinNoAccess};\n"],"file":"index.js"}

package/lib/molecule/cm-popin/index.js

@@ -25,15 +25,23 @@ const CMPopin = props => {
     secondButton,
     onClose,
     header,
-    icon
+    icon,
+    backgroundImageUrl,
+    descriptionText
   } = props;
   const logo = {
     AlertDiamond: _novaIcons.NovaSolidInterfaceFeedbackInterfaceAlertDiamond,
     WindowUpload: _novaIcons.NovaSolidApplicationsWindowUpload3
   };
   const LogoComponent = logo[icon];
+  const backgroundImageStyle = backgroundImageUrl ? {
+    backgroundImage: `url(${backgroundImageUrl})`,
+    backgroundSize: 'cover'
+  } : null;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.background
+    className: _style.default.background,
+    style: backgroundImageStyle,
+    "data-name": 'cm-popin-container'
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.popin
   }, /*#__PURE__*/_react.default.createElement("header", {
@@ -48,16 +56,24 @@ const CMPopin = props => {
     size: "small",
     icon: "close"
   }) : null), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.titleContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.contentSection
   }, LogoComponent ? /*#__PURE__*/_react.default.createElement(LogoComponent, {
     className: _style.default.icon
   }) : null, content ? /*#__PURE__*/_react.default.createElement("p", {
     className: mode === 'alert' ? _style.default.content : _style.default.message,
-    "data-name": `cm-popin-content` // eslint-disable-next-line react/no-danger
+    "data-name": 'cm-popin-content' // eslint-disable-next-line react/no-danger
     ,
     dangerouslySetInnerHTML: {
       __html: content
     }
+  }) : null), descriptionText ? /*#__PURE__*/_react.default.createElement("p", {
+    className: _style.default.descriptionText // eslint-disable-next-line react/no-danger
+    ,
+    dangerouslySetInnerHTML: {
+      __html: descriptionText
+    }
   }) : null), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.buttonContainer
   }, firstButton ? /*#__PURE__*/_react.default.createElement("div", {
@@ -65,16 +81,16 @@ const CMPopin = props => {
   }, /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
     label: firstButton.label,
     onClick: firstButton.handleOnclick,
-    "data-name": `cm-popin-cta`,
+    "data-name": 'cm-popin-cta',
     "aria-label": firstButton['aria-label'],
     type: firstButton.type
   })) : null, secondButton ? /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.button
+    className: secondButton.largeButton ? _style.default.largeButton : _style.default.button
   }, /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
     label: secondButton.label,
     onClick: secondButton.handleOnclick,
     "data-name": `cm-popin-cta-${secondButton.type}`,
-    "aria-label": firstButton['aria-label'],
+    "aria-label": secondButton['aria-label'],
     type: secondButton.type
   })) : null)));
 };
@@ -93,10 +109,13 @@ CMPopin.propTypes = process.env.NODE_ENV !== "production" ? {
     label: _propTypes.default.string,
     handleOnclick: _propTypes.default.func,
     type: _propTypes.default.oneOf(['dangerous', 'primary']),
-    'aria-label': _propTypes.default.string
+    'aria-label': _propTypes.default.string,
+    largeButton: _propTypes.default.boolean
   }),
   onClose: _propTypes.default.func,
-  icon: _propTypes.default.string
+  icon: _propTypes.default.string,
+  backgroundImageUrl: _propTypes.default.string,
+  descriptionText: _propTypes.default.string
 } : {};
 var _default = CMPopin;
 exports.default = _default;

package/lib/molecule/cm-popin/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/molecule/cm-popin/index.js"],"names":["CMPopin","props","content","mode","firstButton","secondButton","onClose","header","icon","logo","AlertDiamond","WindowUpload","LogoComponent","style","background","popin","popinHeader","headerBackground","contentSection","message","__html","buttonContainer","button","label","handleOnclick","type","propTypes","PropTypes","string","oneOf","shape","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n  NovaSolidInterfaceFeedbackInterfaceAlertDiamond as AlertDiamond,\n  NovaSolidApplicationsWindowUpload3 as WindowUpload\n} from '@coorpacademy/nova-icons';\nimport Cta from '../../atom/button-link';\nimport ButtonLinkIconOnly from '../../atom/button-link-icon-only';\nimport style from './style.css';\n\nconst CMPopin = props => {\n  const {content, mode = 'alert', firstButton, secondButton, onClose, header, icon} = props;\n\n  const logo = {\n    AlertDiamond,\n    WindowUpload\n  };\n  const LogoComponent = logo[icon];\n\n  return (\n    <div className={style.background}>\n      <div className={style.popin}>\n        <header className={style.popinHeader}>\n          {header ? <img className={style.headerBackground} src={header} /> : null}\n          {onClose ? (\n            <ButtonLinkIconOnly\n              onClick={onClose}\n              data-name={'close-icon'}\n              aria-label={'close-icon'}\n              size=\"small\"\n              icon=\"close\"\n            />\n          ) : null}\n        </header>\n        <div className={style.contentSection}>\n          {LogoComponent ? <LogoComponent className={style.icon} /> : null}\n          {content ? (\n            <p\n              className={mode === 'alert' ? style.content : style.message}\n              data-name={`cm-popin-content`}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: content}}\n            />\n          ) : null}\n        </div>\n\n        <div className={style.buttonContainer}>\n          {firstButton ? (\n            <div className={style.button}>\n              <Cta\n                label={firstButton.label}\n                onClick={firstButton.handleOnclick}\n                data-name={`cm-popin-cta`}\n                aria-label={firstButton['aria-label']}\n                type={firstButton.type}\n              />\n            </div>\n          ) : null}\n          {secondButton ? (\n            <div className={style.button}>\n              <Cta\n                label={secondButton.label}\n                onClick={secondButton.handleOnclick}\n                data-name={`cm-popin-cta-${secondButton.type}`}\n                aria-label={firstButton['aria-label']}\n                type={secondButton.type}\n              />\n            </div>\n          ) : null}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nCMPopin.propTypes = {\n  content: PropTypes.string,\n  mode: PropTypes.oneOf(['alert', 'information']),\n  header: PropTypes.string,\n  firstButton: PropTypes.shape({\n    label: PropTypes.string,\n    handleOnclick: PropTypes.func,\n    'aria-label': PropTypes.string,\n    type: PropTypes.string\n  }),\n  secondButton: PropTypes.shape({\n    label: PropTypes.string,\n    handleOnclick: PropTypes.func,\n    type: PropTypes.oneOf(['dangerous', 'primary']),\n    'aria-label': PropTypes.string\n  }),\n  onClose: PropTypes.func,\n  icon: PropTypes.string\n};\n\nexport default CMPopin;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/molecule/cm-popin/index.js"],"names":["CMPopin","props","content","mode","firstButton","secondButton","onClose","header","icon","backgroundImageUrl","descriptionText","logo","AlertDiamond","WindowUpload","LogoComponent","backgroundImageStyle","backgroundImage","backgroundSize","style","background","popin","popinHeader","headerBackground","titleContainer","contentSection","message","__html","buttonContainer","button","label","handleOnclick","type","largeButton","propTypes","PropTypes","string","oneOf","shape","func","boolean"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n  NovaSolidInterfaceFeedbackInterfaceAlertDiamond as AlertDiamond,\n  NovaSolidApplicationsWindowUpload3 as WindowUpload\n} from '@coorpacademy/nova-icons';\nimport Cta from '../../atom/button-link';\nimport ButtonLinkIconOnly from '../../atom/button-link-icon-only';\nimport style from './style.css';\n\nconst CMPopin = props => {\n  const {\n    content,\n    mode = 'alert',\n    firstButton,\n    secondButton,\n    onClose,\n    header,\n    icon,\n    backgroundImageUrl,\n    descriptionText\n  } = props;\n\n  const logo = {\n    AlertDiamond,\n    WindowUpload\n  };\n  const LogoComponent = logo[icon];\n\n  const backgroundImageStyle = backgroundImageUrl\n    ? {\n        backgroundImage: `url(${backgroundImageUrl})`,\n        backgroundSize: 'cover'\n      }\n    : null;\n\n  return (\n    <div className={style.background} style={backgroundImageStyle} data-name={'cm-popin-container'}>\n      <div className={style.popin}>\n        <header className={style.popinHeader}>\n          {header ? <img className={style.headerBackground} src={header} /> : null}\n          {onClose ? (\n            <ButtonLinkIconOnly\n              onClick={onClose}\n              data-name={'close-icon'}\n              aria-label={'close-icon'}\n              size=\"small\"\n              icon=\"close\"\n            />\n          ) : null}\n        </header>\n        <div className={style.titleContainer}>\n          <div className={style.contentSection}>\n            {LogoComponent ? <LogoComponent className={style.icon} /> : null}\n            {content ? (\n              <p\n                className={mode === 'alert' ? style.content : style.message}\n                data-name={'cm-popin-content'}\n                // eslint-disable-next-line react/no-danger\n                dangerouslySetInnerHTML={{__html: content}}\n              />\n            ) : null}\n          </div>\n          {descriptionText ? (\n            <p\n              className={style.descriptionText}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: descriptionText}}\n            />\n          ) : null}\n        </div>\n        <div className={style.buttonContainer}>\n          {firstButton ? (\n            <div className={style.button}>\n              <Cta\n                label={firstButton.label}\n                onClick={firstButton.handleOnclick}\n                data-name={'cm-popin-cta'}\n                aria-label={firstButton['aria-label']}\n                type={firstButton.type}\n              />\n            </div>\n          ) : null}\n          {secondButton ? (\n            <div className={secondButton.largeButton ? style.largeButton : style.button}>\n              <Cta\n                label={secondButton.label}\n                onClick={secondButton.handleOnclick}\n                data-name={`cm-popin-cta-${secondButton.type}`}\n                aria-label={secondButton['aria-label']}\n                type={secondButton.type}\n              />\n            </div>\n          ) : null}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nCMPopin.propTypes = {\n  content: PropTypes.string,\n  mode: PropTypes.oneOf(['alert', 'information']),\n  header: PropTypes.string,\n  firstButton: PropTypes.shape({\n    label: PropTypes.string,\n    handleOnclick: PropTypes.func,\n    'aria-label': PropTypes.string,\n    type: PropTypes.string\n  }),\n  secondButton: PropTypes.shape({\n    label: PropTypes.string,\n    handleOnclick: PropTypes.func,\n    type: PropTypes.oneOf(['dangerous', 'primary']),\n    'aria-label': PropTypes.string,\n    largeButton: PropTypes.boolean\n  }),\n  onClose: PropTypes.func,\n  icon: PropTypes.string,\n  backgroundImageUrl: PropTypes.string,\n  descriptionText: PropTypes.string\n};\n\nexport default CMPopin;\n"],"file":"index.js"}

package/lib/molecule/cm-popin/style.css

@@ -14,6 +14,7 @@
 @value cm_grey_100 from colors;
 @value cm_grey_200 from colors;
 @value cm_blue_600 from colors;
+@value cm_grey_500 from colors;
 
 .background {
   top: 0px;
@@ -28,6 +29,7 @@
   overflow: hidden;
   display: flex;
   position:fixed;
+  z-index: 3;
 }
 
 .headerBackground {
@@ -37,7 +39,6 @@
 }
 
 .popin {
-  position: absolute;
   overflow: auto;
   width: 500px;
   height: 414px;
@@ -112,6 +113,11 @@
   padding: 8px;
 }
 
+.largeButton {
+  width: 338px;
+  padding: 8px;
+}
+
 .icon {
   width: 60px;
   height: 60px;
@@ -126,4 +132,21 @@
 
 .popinHeader button {
   position: absolute;
+}
+.descriptionText {
+  text-align: center;
+  font-family: Gilroy;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 22px;
+  color: cm_grey_500;
+  font-style: normal;
+  white-space: pre-line;
+  margin-top: 0px;
+}
+.titleContainer {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
 }

package/lib/molecule/feedback/index.js

@@ -32,7 +32,8 @@ const Feedback = (props, context) => {
     media,
     mediaDescription,
     title,
-    description
+    description,
+    mode = 'default'
   } = props;
 
   const resource = media && media.type && _extends(_extends({}, media), (0, _pipe2.default)((0, _get2.default)('src.0'), (0, _extend2.default)({
@@ -40,8 +41,11 @@ const Feedback = (props, context) => {
   }))(media));
 
   return (resource || title || description ? /*#__PURE__*/_react.default.createElement("div", {
+    className: mode === 'scorm' ? _style.default.feedbackContainerScorm : null
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.feedback,
-    "data-name": "feedback"
+    "data-name": "feedback",
+    id: "feedback"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(_style.default.title, _style.default.innerHTML),
     "data-name": "title" // eslint-disable-next-line react/no-danger
@@ -68,7 +72,7 @@ const Feedback = (props, context) => {
     dangerouslySetInnerHTML: {
       __html: mediaDescription
     }
-  })) : null)) : null) || '';
+  })) : null))) : null) || '';
 };
 
 Feedback.propTypes = process.env.NODE_ENV !== "production" ? {

package/lib/molecule/feedback/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/molecule/feedback/index.js"],"names":["Feedback","props","context","media","mediaDescription","title","description","resource","type","style","feedback","innerHTML","__html","descWrapper","resourcePlayer","propTypes","PropTypes","string","shape","oneOf","TYPE_IMAGE","TYPE_PDF","TYPE_VIDEO","TYPE_AUDIO","src","array"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;AAEA,MAAMA,QAAQ,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;AACnC,QAAM;AAACC,IAAAA,KAAD;AAAQC,IAAAA,gBAAR;AAA0BC,IAAAA,KAA1B;AAAiCC,IAAAA;AAAjC,MAAgDL,KAAtD;;AACA,QAAMM,QAAQ,GAAGJ,KAAK,IACpBA,KAAK,CAACK,IADS,0BAEVL,KAFU,GAGV,oBAAK,mBAAI,OAAJ,CAAL,EAAmB,sBAAO;AAACG,IAAAA,WAAW,EAAEF;AAAd,GAAP,CAAnB,EAA4DD,KAA5D,CAHU,CAAjB;;AAMA,SACE,CAACI,QAAQ,IAAIF,KAAZ,IAAqBC,WAArB,gBACC;AAAK,IAAA,SAAS,EAAEG,eAAMC,QAAtB;AAAgC,iBAAU;AAA1C,kBACE;AACE,IAAA,SAAS,EAAE,yBAAWD,eAAMJ,KAAjB,EAAwBI,eAAME,SAA9B,CADb;AAEE,iBAAU,OAFZ,CAGE;AAHF;AAIE,IAAA,uBAAuB,EAAE;AAACC,MAAAA,MAAM,EAAEP;AAAT;AAJ3B,IADF,eAOE;AAAK,IAAA,SAAS,EAAEI,eAAMI;AAAtB,kBACE;AACE,IAAA,SAAS,EAAE,yBAAWJ,eAAMH,WAAjB,EAA8BG,eAAME,SAApC,CADb;AAEE,iBAAU,aAFZ,CAGE;AAHF;AAIE,IAAA,uBAAuB,EAAE;AAACC,MAAAA,MAAM,EAAEN;AAAT;AAJ3B,IADF,EAOGC,QAAQ,gBACP,uDACE,6BAAC,uBAAD;AAAgB,IAAA,SAAS,EAAEE,eAAMK,cAAjC;AAAiD,IAAA,QAAQ,EAAEP;AAA3D,IADF,eAEE;AACE,iBAAU,kBADZ;AAEE,IAAA,SAAS,EAAE,yBAAWE,eAAML,gBAAjB,EAAmCK,eAAME,SAAzC,CAFb,CAGE;AAHF;AAIE,IAAA,uBAAuB,EAAE;AAACC,MAAAA,MAAM,EAAER;AAAT;AAJ3B,IAFF,CADO,GAUL,IAjBN,CAPF,CADD,GA4BG,IA5BJ,KA4Ba,EA7Bf;AA+BD,CAvCD;;AAyCAJ,QAAQ,CAACe,SAAT,2CAAqB;AACnBV,EAAAA,KAAK,EAAEW,mBAAUC,MADE;AAEnBX,EAAAA,WAAW,EAAEU,mBAAUC,MAFJ;AAGnBd,EAAAA,KAAK,EAAEa,mBAAUE,KAAV,CAAgB;AACrBV,IAAAA,IAAI,EAAEQ,mBAAUG,KAAV,CAAgB,CAACC,0BAAD,EAAaC,wBAAb,EAAuBC,0BAAvB,EAAmCC,0BAAnC,CAAhB,CADe;AAErBC,IAAAA,GAAG,EAAER,mBAAUS;AAFM,GAAhB,CAHY;AAOnBrB,EAAAA,gBAAgB,EAAEY,mBAAUC;AAPT,CAArB;eAUejB,Q","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {pipe, get, extend} from 'lodash/fp';\nimport classnames from 'classnames';\nimport ResourcePlayer, {TYPE_IMAGE, TYPE_VIDEO, TYPE_PDF, TYPE_AUDIO} from '../resource-player';\nimport style from './style.css';\n\nconst Feedback = (props, context) => {\n  const {media, mediaDescription, title, description} = props;\n  const resource = media &&\n    media.type && {\n      ...media,\n      ...pipe(get('src.0'), extend({description: mediaDescription}))(media)\n    };\n\n  return (\n    (resource || title || description ? (\n      <div className={style.feedback} data-name=\"feedback\">\n        <div\n          className={classnames(style.title, style.innerHTML)}\n          data-name=\"title\"\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{__html: title}}\n        />\n        <div className={style.descWrapper}>\n          <div\n            className={classnames(style.description, style.innerHTML)}\n            data-name=\"description\"\n            // eslint-disable-next-line react/no-danger\n            dangerouslySetInnerHTML={{__html: description}}\n          />\n          {resource ? (\n            <div>\n              <ResourcePlayer className={style.resourcePlayer} resource={resource} />\n              <div\n                data-name=\"mediaDescription\"\n                className={classnames(style.mediaDescription, style.innerHTML)}\n                // eslint-disable-next-line react/no-danger\n                dangerouslySetInnerHTML={{__html: mediaDescription}}\n              />\n            </div>\n          ) : null}\n        </div>\n      </div>\n    ) : null) || ''\n  );\n};\n\nFeedback.propTypes = {\n  title: PropTypes.string,\n  description: PropTypes.string,\n  media: PropTypes.shape({\n    type: PropTypes.oneOf([TYPE_IMAGE, TYPE_PDF, TYPE_VIDEO, TYPE_AUDIO]),\n    src: PropTypes.array\n  }),\n  mediaDescription: PropTypes.string\n};\n\nexport default Feedback;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/molecule/feedback/index.js"],"names":["Feedback","props","context","media","mediaDescription","title","description","mode","resource","type","style","feedbackContainerScorm","feedback","innerHTML","__html","descWrapper","resourcePlayer","propTypes","PropTypes","string","shape","oneOf","TYPE_IMAGE","TYPE_PDF","TYPE_VIDEO","TYPE_AUDIO","src","array"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;AAEA,MAAMA,QAAQ,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;AACnC,QAAM;AAACC,IAAAA,KAAD;AAAQC,IAAAA,gBAAR;AAA0BC,IAAAA,KAA1B;AAAiCC,IAAAA,WAAjC;AAA8CC,IAAAA,IAAI,GAAG;AAArD,MAAkEN,KAAxE;;AACA,QAAMO,QAAQ,GAAGL,KAAK,IACpBA,KAAK,CAACM,IADS,0BAEVN,KAFU,GAGV,oBAAK,mBAAI,OAAJ,CAAL,EAAmB,sBAAO;AAACG,IAAAA,WAAW,EAAEF;AAAd,GAAP,CAAnB,EAA4DD,KAA5D,CAHU,CAAjB;;AAMA,SACE,CAACK,QAAQ,IAAIH,KAAZ,IAAqBC,WAArB,gBACC;AAAK,IAAA,SAAS,EAAEC,IAAI,KAAK,OAAT,GAAmBG,eAAMC,sBAAzB,GAAkD;AAAlE,kBACE;AAAK,IAAA,SAAS,EAAED,eAAME,QAAtB;AAAgC,iBAAU,UAA1C;AAAqD,IAAA,EAAE,EAAC;AAAxD,kBACE;AACE,IAAA,SAAS,EAAE,yBAAWF,eAAML,KAAjB,EAAwBK,eAAMG,SAA9B,CADb;AAEE,iBAAU,OAFZ,CAGE;AAHF;AAIE,IAAA,uBAAuB,EAAE;AAACC,MAAAA,MAAM,EAAET;AAAT;AAJ3B,IADF,eAOE;AAAK,IAAA,SAAS,EAAEK,eAAMK;AAAtB,kBACE;AACE,IAAA,SAAS,EAAE,yBAAWL,eAAMJ,WAAjB,EAA8BI,eAAMG,SAApC,CADb;AAEE,iBAAU,aAFZ,CAGE;AAHF;AAIE,IAAA,uBAAuB,EAAE;AAACC,MAAAA,MAAM,EAAER;AAAT;AAJ3B,IADF,EAOGE,QAAQ,gBACP,uDACE,6BAAC,uBAAD;AAAgB,IAAA,SAAS,EAAEE,eAAMM,cAAjC;AAAiD,IAAA,QAAQ,EAAER;AAA3D,IADF,eAEE;AACE,iBAAU,kBADZ;AAEE,IAAA,SAAS,EAAE,yBAAWE,eAAMN,gBAAjB,EAAmCM,eAAMG,SAAzC,CAFb,CAGE;AAHF;AAIE,IAAA,uBAAuB,EAAE;AAACC,MAAAA,MAAM,EAAEV;AAAT;AAJ3B,IAFF,CADO,GAUL,IAjBN,CAPF,CADF,CADD,GA8BG,IA9BJ,KA8Ba,EA/Bf;AAiCD,CAzCD;;AA2CAJ,QAAQ,CAACiB,SAAT,2CAAqB;AACnBZ,EAAAA,KAAK,EAAEa,mBAAUC,MADE;AAEnBb,EAAAA,WAAW,EAAEY,mBAAUC,MAFJ;AAGnBhB,EAAAA,KAAK,EAAEe,mBAAUE,KAAV,CAAgB;AACrBX,IAAAA,IAAI,EAAES,mBAAUG,KAAV,CAAgB,CAACC,0BAAD,EAAaC,wBAAb,EAAuBC,0BAAvB,EAAmCC,0BAAnC,CAAhB,CADe;AAErBC,IAAAA,GAAG,EAAER,mBAAUS;AAFM,GAAhB,CAHY;AAOnBvB,EAAAA,gBAAgB,EAAEc,mBAAUC;AAPT,CAArB;eAUenB,Q","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {pipe, get, extend} from 'lodash/fp';\nimport classnames from 'classnames';\nimport ResourcePlayer, {TYPE_IMAGE, TYPE_VIDEO, TYPE_PDF, TYPE_AUDIO} from '../resource-player';\nimport style from './style.css';\n\nconst Feedback = (props, context) => {\n  const {media, mediaDescription, title, description, mode = 'default'} = props;\n  const resource = media &&\n    media.type && {\n      ...media,\n      ...pipe(get('src.0'), extend({description: mediaDescription}))(media)\n    };\n\n  return (\n    (resource || title || description ? (\n      <div className={mode === 'scorm' ? style.feedbackContainerScorm : null}>\n        <div className={style.feedback} data-name=\"feedback\" id=\"feedback\">\n          <div\n            className={classnames(style.title, style.innerHTML)}\n            data-name=\"title\"\n            // eslint-disable-next-line react/no-danger\n            dangerouslySetInnerHTML={{__html: title}}\n          />\n          <div className={style.descWrapper}>\n            <div\n              className={classnames(style.description, style.innerHTML)}\n              data-name=\"description\"\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: description}}\n            />\n            {resource ? (\n              <div>\n                <ResourcePlayer className={style.resourcePlayer} resource={resource} />\n                <div\n                  data-name=\"mediaDescription\"\n                  className={classnames(style.mediaDescription, style.innerHTML)}\n                  // eslint-disable-next-line react/no-danger\n                  dangerouslySetInnerHTML={{__html: mediaDescription}}\n                />\n              </div>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    ) : null) || ''\n  );\n};\n\nFeedback.propTypes = {\n  title: PropTypes.string,\n  description: PropTypes.string,\n  media: PropTypes.shape({\n    type: PropTypes.oneOf([TYPE_IMAGE, TYPE_PDF, TYPE_VIDEO, TYPE_AUDIO]),\n    src: PropTypes.array\n  }),\n  mediaDescription: PropTypes.string\n};\n\nexport default Feedback;\n"],"file":"index.js"}

package/lib/molecule/feedback/style.css

@@ -9,6 +9,8 @@
 @value medium from colors;
 @value xtraLightGrey from colors;
 @value white from colors;
+@value cm_grey_75 from colors;
+
 
 .feedback {
   width: 100%;
@@ -19,6 +21,24 @@
   flex-direction: column;
 }
 
+.feedbackContainerScorm {
+  background-color: white;
+  max-width: 884px;
+  height: 386px;
+  padding-bottom: 10px;
+  overflow-x: auto;
+  border: 1px solid cm_grey_75;
+  border-top: 0px;
+  z-index: 2;
+  margin-top: 60px;
+  position: relative;
+}
+
+.feedbackContainerScorm > .feedback {
+  border-bottom: 0px;
+  height: 100%;
+}
+
 .title {
   width: 100%;
   margin-bottom: 20px;
@@ -90,6 +110,10 @@
     width: 100%;
     margin-bottom: 8px;
   }
+  .feedbackContainerScorm {
+    width: 100%;
+    height: 100%;
+  }
 }
 
 .innerHTML {

package/lib/template/app-player/player/index.js

@@ -7,6 +7,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _cmPopin = _interopRequireDefault(require("../../../molecule/cm-popin"));
+
 var _slides = _interopRequireDefault(require("./slides"));
 
 var _style = _interopRequireDefault(require("./style.css"));
@@ -15,7 +17,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const SlidePlayer = props => {
   const {
-    player
+    player,
+    popin
   } = props;
   const backgroundImage = player.backgroundUrl ? `url(${player.backgroundUrl})` : null;
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -28,11 +31,12 @@ const SlidePlayer = props => {
     style: {
       backgroundImage
     }
-  }), /*#__PURE__*/_react.default.createElement(_slides.default, player)));
+  }), /*#__PURE__*/_react.default.createElement(_slides.default, player), popin ? /*#__PURE__*/_react.default.createElement(_cmPopin.default, popin) : null));
 };
 
 SlidePlayer.propTypes = process.env.NODE_ENV !== "production" ? {
-  player: _propTypes.default.shape(_slides.default.propTypes)
+  player: _propTypes.default.shape(_slides.default.propTypes),
+  popin: _propTypes.default.shape(_cmPopin.default.propTypes)
 } : {};
 var _default = SlidePlayer;
 exports.default = _default;

package/lib/template/app-player/player/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/template/app-player/player/index.js"],"names":["SlidePlayer","props","player","backgroundImage","backgroundUrl","style","wrapper","playerWrapper","playerBackground","propTypes","PropTypes","shape","SlidesPlayer"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,WAAW,GAAGC,KAAK,IAAI;AAC3B,QAAM;AAACC,IAAAA;AAAD,MAAWD,KAAjB;AACA,QAAME,eAAe,GAAGD,MAAM,CAACE,aAAP,GAAwB,OAAMF,MAAM,CAACE,aAAc,GAAnD,GAAwD,IAAhF;AACA,sBACE;AAAK,iBAAU,aAAf;AAA6B,IAAA,SAAS,EAAEC,eAAMC;AAA9C,kBACE;AAAK,IAAA,SAAS,EAAED,eAAME;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEF,eAAMG,gBAAtB;AAAwC,IAAA,KAAK,EAAE;AAACL,MAAAA;AAAD;AAA/C,IADF,eAEE,6BAAC,eAAD,EAAkBD,MAAlB,CAFF,CADF,CADF;AAQD,CAXD;;AAaAF,WAAW,CAACS,SAAZ,2CAAwB;AACtBP,EAAAA,MAAM,EAAEQ,mBAAUC,KAAV,CAAgBC,gBAAaH,SAA7B;AADc,CAAxB;eAIeT,W","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport SlidesPlayer from './slides';\nimport style from './style.css';\n\nconst SlidePlayer = props => {\n  const {player} = props;\n  const backgroundImage = player.backgroundUrl ? `url(${player.backgroundUrl})` : null;\n  return (\n    <div data-name=\"slidePlayer\" className={style.wrapper}>\n      <div className={style.playerWrapper}>\n        <div className={style.playerBackground} style={{backgroundImage}} />\n        <SlidesPlayer {...player} />\n      </div>\n    </div>\n  );\n};\n\nSlidePlayer.propTypes = {\n  player: PropTypes.shape(SlidesPlayer.propTypes)\n};\n\nexport default SlidePlayer;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../../src/template/app-player/player/index.js"],"names":["SlidePlayer","props","player","popin","backgroundImage","backgroundUrl","style","wrapper","playerWrapper","playerBackground","propTypes","PropTypes","shape","SlidesPlayer","CMPopin"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,WAAW,GAAGC,KAAK,IAAI;AAC3B,QAAM;AAACC,IAAAA,MAAD;AAASC,IAAAA;AAAT,MAAkBF,KAAxB;AACA,QAAMG,eAAe,GAAGF,MAAM,CAACG,aAAP,GAAwB,OAAMH,MAAM,CAACG,aAAc,GAAnD,GAAwD,IAAhF;AACA,sBACE;AAAK,iBAAU,aAAf;AAA6B,IAAA,SAAS,EAAEC,eAAMC;AAA9C,kBACE;AAAK,IAAA,SAAS,EAAED,eAAME;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEF,eAAMG,gBAAtB;AAAwC,IAAA,KAAK,EAAE;AAACL,MAAAA;AAAD;AAA/C,IADF,eAEE,6BAAC,eAAD,EAAkBF,MAAlB,CAFF,EAGGC,KAAK,gBAAG,6BAAC,gBAAD,EAAaA,KAAb,CAAH,GAA4B,IAHpC,CADF,CADF;AASD,CAZD;;AAcAH,WAAW,CAACU,SAAZ,2CAAwB;AACtBR,EAAAA,MAAM,EAAES,mBAAUC,KAAV,CAAgBC,gBAAaH,SAA7B,CADc;AAEtBP,EAAAA,KAAK,EAAEQ,mBAAUC,KAAV,CAAgBE,iBAAQJ,SAAxB;AAFe,CAAxB;eAKeV,W","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport CMPopin from '../../../molecule/cm-popin';\nimport SlidesPlayer from './slides';\nimport style from './style.css';\n\nconst SlidePlayer = props => {\n  const {player, popin} = props;\n  const backgroundImage = player.backgroundUrl ? `url(${player.backgroundUrl})` : null;\n  return (\n    <div data-name=\"slidePlayer\" className={style.wrapper}>\n      <div className={style.playerWrapper}>\n        <div className={style.playerBackground} style={{backgroundImage}} />\n        <SlidesPlayer {...player} />\n        {popin ? <CMPopin {...popin} /> : null}\n      </div>\n    </div>\n  );\n};\n\nSlidePlayer.propTypes = {\n  player: PropTypes.shape(SlidesPlayer.propTypes),\n  popin: PropTypes.shape(CMPopin.propTypes)\n};\n\nexport default SlidePlayer;\n"],"file":"index.js"}