@coorpacademy/components 11.9.3-alpha.29 → 11.9.3-alpha.31

package/es/molecule/questions/mobile/switch/index.native.js

@@ -19,6 +19,7 @@ const styleSheet = StyleSheet.create({
     paddingVertical: 5
   }
 });
+
 const Switch = props => {
   const templateContext = useTemplateContext();
   const {
@@ -68,10 +69,12 @@ const Switch = props => {
       id: 'slider',
       questionType: 'slider'
     });
+
     if (onSliderChange) {
       onSliderChange(_value);
     }
   }, [analytics, onSliderChange]);
+
   switch (type) {
     case 'qcm':
       return /*#__PURE__*/React.createElement(View, {
@@ -85,6 +88,7 @@ const Switch = props => {
         style: styleSheet.choice,
         questionType: type
       }, choice.label)));
+
     case 'qcmGraphic':
       return /*#__PURE__*/React.createElement(View, {
         testID: "question-choices"
@@ -98,11 +102,13 @@ const Switch = props => {
         style: styleSheet.choice,
         questionType: type
       }, choice.label)));
+
     case 'slider':
       {
         if (min === undefined || max === undefined) {
           return /*#__PURE__*/React.createElement(View, null);
         }
+
         return /*#__PURE__*/React.createElement(QuestionSlider, {
           min: min,
           max: max,
@@ -113,12 +119,14 @@ const Switch = props => {
           testID: "question-slider"
         });
       }
+
     case 'template':
       if (handleBlur === undefined || handleFocus === undefined || focusedSelectId === undefined) {
         // eslint-disable-next-line no-console
         console.warn('type template must implement handleFocus etc within Context.store');
         return /*#__PURE__*/React.createElement(View, null);
       }
+
       return /*#__PURE__*/React.createElement(View, {
         testID: "question-choices"
       }, /*#__PURE__*/React.createElement(QuestionTemplate, {
@@ -130,6 +138,7 @@ const Switch = props => {
         handleFocus: handleFocus,
         focusedSelectId: focusedSelectId
       }));
+
     case 'qcmDrag':
       return /*#__PURE__*/React.createElement(View, {
         testID: "question-draggable"
@@ -137,10 +146,12 @@ const Switch = props => {
         choices: choices,
         onPress: handleChoicePress
       }));
+
     case 'basic':
       if (!onInputValueChange) {
         return /*#__PURE__*/React.createElement(View, null);
       }
+
       return /*#__PURE__*/React.createElement(FreeText, {
         fullWidth: true,
         onChange: onInputValueChange,
@@ -148,9 +159,11 @@ const Switch = props => {
         questionType: "basic",
         isDisabled: isDisabled
       });
+
     default:
       return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Text, null, "Unhandled type: ", type));
   }
 };
+
 export default Switch;
 //# sourceMappingURL=index.native.js.map

package/es/molecule/questions/mobile/switch/index.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.js","names":["React","useCallback","View","StyleSheet","Text","QuestionChoice","QuestionDraggable","QuestionTemplate","QuestionSlider","FreeText","useTemplateContext","ANALYTICS_EVENT_TYPE","styleSheet","create","cards","flexDirection","alignItems","card","flex","choice","paddingVertical","Switch","props","templateContext","analytics","store","focusedSelectId","handleBlur","handleFocus","type","template","isDisabled","choices","min","max","unit","value","step","onSliderChange","onItemPress","onItemInputChange","onInputValueChange","handleChoicePress","onPress","handleItemInputChange","_value","handleSlidingComplete","logEvent","SLIDE","id","questionType","map","_id","selected","label","media","undefined","console","warn"],"sources":["../../../../../src/molecule/questions/mobile/switch/index.native.tsx"],"sourcesContent":["import React, {useCallback} from 'react';\nimport {View, StyleSheet, Text, ViewStyle} from 'react-native';\n\nimport QuestionChoice from '../../../../atom/choice/index.native';\nimport QuestionDraggable from '../draggable/index.native';\nimport QuestionTemplate from '../template/index.native';\nimport QuestionSlider from '../slider/index.native';\nimport FreeText from '../../free-text/index.native';\n\nimport {useTemplateContext} from '../../../../template/app-review/template-context';\nimport {ANALYTICS_EVENT_TYPE} from '../../../../variables/analytics';\n\nimport type {\n  QuestionType,\n  Choice,\n  TemplateListOfChoices,\n  TemplateTextChoice,\n  SelectableChoice\n} from '../../types';\n\nexport type Props = {\n  type: QuestionType;\n  isDisabled?: boolean;\n  template?: string;\n  choices?: Array<Choice>;\n  min?: number;\n  max?: number;\n  unit?: string;\n  step?: number;\n  value?: number;\n  onInputValueChange?: (value: string) => void;\n  onSliderChange?: (value: number) => void;\n  // --- mobile learner only\n  onItemInputChange?: (item: Choice, value: string) => void;\n  onItemPress?: (item: Choice) => void;\n};\n\ntype StyleSheetType = {\n  cards: ViewStyle;\n  card: ViewStyle;\n  choice: ViewStyle;\n};\n\nconst styleSheet: StyleSheetType = StyleSheet.create({\n  cards: {\n    flexDirection: 'row',\n    alignItems: 'stretch'\n  },\n  card: {\n    flex: 1\n  },\n  choice: {\n    paddingVertical: 5\n  }\n});\n\nconst Switch = (props: Props) => {\n  const templateContext = useTemplateContext();\n  const {analytics, store} = templateContext;\n  const {focusedSelectId, handleBlur, handleFocus} = store;\n\n  const {\n    type,\n    template,\n    isDisabled,\n    choices = [],\n    min,\n    max,\n    unit,\n    value,\n    step,\n    onSliderChange,\n    onItemPress,\n    onItemInputChange,\n    onInputValueChange\n  } = props;\n\n  const handleChoicePress = useCallback(\n    (choice: Choice) => () => {\n      if ((choice as SelectableChoice).onPress) {\n        // e.g. app-review\n        (choice as SelectableChoice).onPress();\n      } else if (onItemPress) {\n        // e.g. learner\n        onItemPress(choice);\n      }\n    },\n    [onItemPress]\n  );\n\n  const handleItemInputChange = useCallback(\n    (choice: Choice, _value: string) => {\n      if ((choice as SelectableChoice).onPress) {\n        // e.g. app-review\n        (choice as SelectableChoice).onPress(_value);\n      } else if (onItemInputChange) {\n        // e.g. learner\n        onItemInputChange(choice, _value);\n      }\n    },\n    [onItemInputChange]\n  );\n\n  const handleSlidingComplete = useCallback(\n    _value => {\n      analytics &&\n        analytics.logEvent(ANALYTICS_EVENT_TYPE.SLIDE, {\n          id: 'slider',\n          questionType: 'slider'\n        });\n\n      if (onSliderChange) {\n        onSliderChange(_value);\n      }\n    },\n    [analytics, onSliderChange]\n  );\n\n  switch (type) {\n    case 'qcm':\n      return (\n        <View testID=\"question-choices\">\n          {(choices as SelectableChoice[]).map(choice => (\n            <QuestionChoice\n              key={`question-choice-${choice._id}`}\n              onPress={handleChoicePress(choice)}\n              isDisabled={isDisabled}\n              isSelected={choice.selected}\n              testID={`question-choice-${choice._id}`}\n              style={styleSheet.choice}\n              questionType={type}\n            >\n              {choice.label}\n            </QuestionChoice>\n          ))}\n        </View>\n      );\n    case 'qcmGraphic':\n      return (\n        <View testID=\"question-choices\">\n          {(choices as SelectableChoice[]).map(choice => (\n            <QuestionChoice\n              key={`question-choice-${choice._id}`}\n              onPress={handleChoicePress(choice)}\n              media={choice.media}\n              isDisabled={isDisabled}\n              isSelected={choice.selected}\n              testID={`question-choice-${choice._id}`}\n              style={styleSheet.choice}\n              questionType={type}\n            >\n              {choice.label}\n            </QuestionChoice>\n          ))}\n        </View>\n      );\n    case 'slider': {\n      if (min === undefined || max === undefined) {\n        return <View />;\n      }\n\n      return (\n        <QuestionSlider\n          min={min}\n          max={max}\n          unit={unit}\n          value={value}\n          step={step}\n          onSlidingComplete={handleSlidingComplete}\n          testID=\"question-slider\"\n        />\n      );\n    }\n    case 'template':\n      if (handleBlur === undefined || handleFocus === undefined || focusedSelectId === undefined) {\n        // eslint-disable-next-line no-console\n        console.warn('type template must implement handleFocus etc within Context.store');\n        return <View />;\n      }\n\n      return (\n        <View testID=\"question-choices\">\n          <QuestionTemplate\n            isDisabled={isDisabled}\n            template={template || ''}\n            choices={choices as (TemplateListOfChoices | TemplateTextChoice)[]}\n            onInputChange={handleItemInputChange}\n            handleBlur={handleBlur}\n            handleFocus={handleFocus}\n            focusedSelectId={focusedSelectId}\n          />\n        </View>\n      );\n    case 'qcmDrag':\n      return (\n        <View testID=\"question-draggable\">\n          <QuestionDraggable choices={choices as SelectableChoice[]} onPress={handleChoicePress} />\n        </View>\n      );\n    case 'basic':\n      if (!onInputValueChange) {\n        return <View />;\n      }\n\n      return (\n        <FreeText\n          fullWidth\n          onChange={onInputValueChange}\n          testID=\"question-input-text\"\n          questionType=\"basic\"\n          isDisabled={isDisabled}\n        />\n      );\n    default:\n      return (\n        <View>\n          <Text>Unhandled type: {type}</Text>\n        </View>\n      );\n  }\n};\n\nexport default Switch;\n"],"mappings":"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"}
+{"version":3,"file":"index.native.js","names":["React","useCallback","View","StyleSheet","Text","QuestionChoice","QuestionDraggable","QuestionTemplate","QuestionSlider","FreeText","useTemplateContext","ANALYTICS_EVENT_TYPE","styleSheet","create","cards","flexDirection","alignItems","card","flex","choice","paddingVertical","Switch","props","templateContext","analytics","store","focusedSelectId","handleBlur","handleFocus","type","template","isDisabled","choices","min","max","unit","value","step","onSliderChange","onItemPress","onItemInputChange","onInputValueChange","handleChoicePress","onPress","handleItemInputChange","_value","handleSlidingComplete","logEvent","SLIDE","id","questionType","map","_id","selected","label","media","undefined","console","warn"],"sources":["../../../../../src/molecule/questions/mobile/switch/index.native.tsx"],"sourcesContent":["import React, {useCallback} from 'react';\nimport {View, StyleSheet, Text, ViewStyle} from 'react-native';\n\nimport QuestionChoice from '../../../../atom/choice/index.native';\nimport QuestionDraggable from '../draggable/index.native';\nimport QuestionTemplate from '../template/index.native';\nimport QuestionSlider from '../slider/index.native';\nimport FreeText from '../../free-text/index.native';\n\nimport {useTemplateContext} from '../../../../template/app-review/template-context';\nimport {ANALYTICS_EVENT_TYPE} from '../../../../variables/analytics';\n\nimport type {\n  QuestionType,\n  Choice,\n  TemplateListOfChoices,\n  TemplateTextChoice,\n  SelectableChoice\n} from '../../types';\n\nexport type Props = {\n  type: QuestionType;\n  isDisabled?: boolean;\n  template?: string;\n  choices?: Array<Choice>;\n  min?: number;\n  max?: number;\n  unit?: string;\n  step?: number;\n  value?: number;\n  onInputValueChange?: (value: string) => void;\n  onSliderChange?: (value: number) => void;\n  // --- mobile learner only\n  onItemInputChange?: (item: Choice, value: string) => void;\n  onItemPress?: (item: Choice) => void;\n};\n\ntype StyleSheetType = {\n  cards: ViewStyle;\n  card: ViewStyle;\n  choice: ViewStyle;\n};\n\nconst styleSheet: StyleSheetType = StyleSheet.create({\n  cards: {\n    flexDirection: 'row',\n    alignItems: 'stretch'\n  },\n  card: {\n    flex: 1\n  },\n  choice: {\n    paddingVertical: 5\n  }\n});\n\nconst Switch = (props: Props) => {\n  const templateContext = useTemplateContext();\n  const {analytics, store} = templateContext;\n  const {focusedSelectId, handleBlur, handleFocus} = store;\n\n  const {\n    type,\n    template,\n    isDisabled,\n    choices = [],\n    min,\n    max,\n    unit,\n    value,\n    step,\n    onSliderChange,\n    onItemPress,\n    onItemInputChange,\n    onInputValueChange\n  } = props;\n\n  const handleChoicePress = useCallback(\n    (choice: Choice) => () => {\n      if ((choice as SelectableChoice).onPress) {\n        // e.g. app-review\n        (choice as SelectableChoice).onPress();\n      } else if (onItemPress) {\n        // e.g. learner\n        onItemPress(choice);\n      }\n    },\n    [onItemPress]\n  );\n\n  const handleItemInputChange = useCallback(\n    (choice: Choice, _value: string) => {\n      if ((choice as SelectableChoice).onPress) {\n        // e.g. app-review\n        (choice as SelectableChoice).onPress(_value);\n      } else if (onItemInputChange) {\n        // e.g. learner\n        onItemInputChange(choice, _value);\n      }\n    },\n    [onItemInputChange]\n  );\n\n  const handleSlidingComplete = useCallback(\n    _value => {\n      analytics &&\n        analytics.logEvent(ANALYTICS_EVENT_TYPE.SLIDE, {\n          id: 'slider',\n          questionType: 'slider'\n        });\n\n      if (onSliderChange) {\n        onSliderChange(_value);\n      }\n    },\n    [analytics, onSliderChange]\n  );\n\n  switch (type) {\n    case 'qcm':\n      return (\n        <View testID=\"question-choices\">\n          {(choices as SelectableChoice[]).map(choice => (\n            <QuestionChoice\n              key={`question-choice-${choice._id}`}\n              onPress={handleChoicePress(choice)}\n              isDisabled={isDisabled}\n              isSelected={choice.selected}\n              testID={`question-choice-${choice._id}`}\n              style={styleSheet.choice}\n              questionType={type}\n            >\n              {choice.label}\n            </QuestionChoice>\n          ))}\n        </View>\n      );\n    case 'qcmGraphic':\n      return (\n        <View testID=\"question-choices\">\n          {(choices as SelectableChoice[]).map(choice => (\n            <QuestionChoice\n              key={`question-choice-${choice._id}`}\n              onPress={handleChoicePress(choice)}\n              media={choice.media}\n              isDisabled={isDisabled}\n              isSelected={choice.selected}\n              testID={`question-choice-${choice._id}`}\n              style={styleSheet.choice}\n              questionType={type}\n            >\n              {choice.label}\n            </QuestionChoice>\n          ))}\n        </View>\n      );\n    case 'slider': {\n      if (min === undefined || max === undefined) {\n        return <View />;\n      }\n\n      return (\n        <QuestionSlider\n          min={min}\n          max={max}\n          unit={unit}\n          value={value}\n          step={step}\n          onSlidingComplete={handleSlidingComplete}\n          testID=\"question-slider\"\n        />\n      );\n    }\n    case 'template':\n      if (handleBlur === undefined || handleFocus === undefined || focusedSelectId === undefined) {\n        // eslint-disable-next-line no-console\n        console.warn('type template must implement handleFocus etc within Context.store');\n        return <View />;\n      }\n\n      return (\n        <View testID=\"question-choices\">\n          <QuestionTemplate\n            isDisabled={isDisabled}\n            template={template || ''}\n            choices={choices as (TemplateListOfChoices | TemplateTextChoice)[]}\n            onInputChange={handleItemInputChange}\n            handleBlur={handleBlur}\n            handleFocus={handleFocus}\n            focusedSelectId={focusedSelectId}\n          />\n        </View>\n      );\n    case 'qcmDrag':\n      return (\n        <View testID=\"question-draggable\">\n          <QuestionDraggable choices={choices as SelectableChoice[]} onPress={handleChoicePress} />\n        </View>\n      );\n    case 'basic':\n      if (!onInputValueChange) {\n        return <View />;\n      }\n\n      return (\n        <FreeText\n          fullWidth\n          onChange={onInputValueChange}\n          testID=\"question-input-text\"\n          questionType=\"basic\"\n          isDisabled={isDisabled}\n        />\n      );\n    default:\n      return (\n        <View>\n          <Text>Unhandled type: {type}</Text>\n        </View>\n      );\n  }\n};\n\nexport default Switch;\n"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { TemplateListOfChoices, TemplateTextChoice } from '../../types';
 import { FocusedSelectId, HandleBlur, HandleFocus } from '../../../../template/app-review/template-context';
-export type Props = {
+export declare type Props = {
     isDisabled?: boolean;
     template: string;
     choices: Array<TemplateTextChoice | TemplateListOfChoices>;

package/es/molecule/questions/mobile/template/index.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../../../src/molecule/questions/mobile/template/index.native.tsx"],"names":[],"mappings":";AAQA,OAAO,KAAK,EAAC,qBAAqB,EAAE,kBAAkB,EAAC,MAAM,aAAa,CAAC;AAE3E,OAAO,EACL,eAAe,EACf,UAAU,EACV,WAAW,EAEZ,MAAM,kDAAkD,CAAC;AAoJ1D,MAAM,MAAM,KAAK,GAAG;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,KAAK,CAAC,kBAAkB,GAAG,qBAAqB,CAAC,CAAC;IAC3D,aAAa,EAAE,CAAC,IAAI,EAAE,kBAAkB,GAAG,qBAAqB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzF,eAAe,EAAE,eAAe,CAAC;IACjC,UAAU,EAAE,UAAU,CAAC;IACvB,WAAW,EAAE,WAAW,CAAC;CAC1B,CAAC;AAEF,QAAA,MAAM,gBAAgB,UAAW,KAAK,uBA+CrC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../../../src/molecule/questions/mobile/template/index.native.tsx"],"names":[],"mappings":";AAQA,OAAO,KAAK,EAAC,qBAAqB,EAAE,kBAAkB,EAAC,MAAM,aAAa,CAAC;AAE3E,OAAO,EACL,eAAe,EACf,UAAU,EACV,WAAW,EAEZ,MAAM,kDAAkD,CAAC;AAoJ1D,oBAAY,KAAK,GAAG;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,KAAK,CAAC,kBAAkB,GAAG,qBAAqB,CAAC,CAAC;IAC3D,aAAa,EAAE,CAAC,IAAI,EAAE,kBAAkB,GAAG,qBAAqB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzF,eAAe,EAAE,eAAe,CAAC;IACjC,UAAU,EAAE,UAAU,CAAC;IACvB,WAAW,EAAE,WAAW,CAAC;CAC1B,CAAC;AAEF,QAAA,MAAM,gBAAgB,UAAW,KAAK,uBA+CrC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/es/molecule/questions/mobile/template/index.native.js

@@ -1,4 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React, { useEffect, useState } from 'react';
 import { View } from 'react-native';
 import trim from 'lodash/fp/trim';
@@ -9,6 +10,7 @@ import FreeText from '../../free-text/index.native';
 import { useTemplateContext } from '../../../../template/app-review/template-context';
 import parseTemplateString from '../../../../util/parse-template-string';
 import { BOX_STYLE } from '../../../../variables/shadow';
+
 const createStyleSheet = theme => ({
   container: {
     width: '100%',
@@ -42,6 +44,7 @@ const createStyleSheet = theme => ({
     textAlign: 'center'
   }
 });
+
 const Item = props => {
   const {
     part,
@@ -62,18 +65,23 @@ const Item = props => {
   const inputNames = choices.map(choice => choice.name);
   const id = `question-part-${index + 1}`;
   const isFocused = focusedSelectId === id;
+
   if (part.type === 'answerField' && inputNames.includes(part.value)) {
     const choiceIndex = choices.findIndex(choice => choice.name === part.value);
     const choice = choices[choiceIndex];
     const {
       value
     } = choice;
+
     if (!choice || !choice.type || !choice.name) {
       return null;
     }
+
     const disabledSuffix = isDisabled ? '-disabled' : '';
     const selectedSuffix = value ? '-selected' : '';
+
     const handleInputChange = _item => _value => onInputChange(_item, _value);
+
     if (choice.type === 'text') {
       return /*#__PURE__*/React.createElement(View, {
         style: styles.spaced,
@@ -87,8 +95,10 @@ const Item = props => {
         questionType: "template"
       }));
     }
+
     const selectInputStyle = [styles.selectInput];
     const selectTextStyle = [styles.selectText];
+
     if (choice.type === 'select') {
       return /*#__PURE__*/React.createElement(View, {
         style: styles.spaced,
@@ -110,6 +120,7 @@ const Item = props => {
       }));
     }
   }
+
   return /*#__PURE__*/React.createElement(Html, {
     key: id,
     fontSize: theme.fontSize.regular,
@@ -117,6 +128,7 @@ const Item = props => {
     style: styles.htmlText
   }, trim(part.value || ''));
 };
+
 const QuestionTemplate = props => {
   const {
     template,
@@ -134,11 +146,14 @@ const QuestionTemplate = props => {
   const [styleSheet, setStylesheet] = useState(null);
   useEffect(() => {
     const _stylesheet = createStyleSheet(theme);
+
     setStylesheet(_stylesheet);
   }, [theme]);
+
   if (!template || !styleSheet) {
     return null;
   }
+
   const parts = parseTemplateString(template);
   return /*#__PURE__*/React.createElement(View, {
     style: styleSheet.container,
@@ -162,5 +177,6 @@ const QuestionTemplate = props => {
     type: "micro"
   }))));
 };
+
 export default QuestionTemplate;
 //# sourceMappingURL=index.native.js.map

package/es/molecule/questions/mobile/template/index.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.js","names":["React","useEffect","useState","View","trim","Html","Select","Space","FreeText","useTemplateContext","parseTemplateString","BOX_STYLE","createStyleSheet","theme","container","width","flexDirection","flexWrap","justifyContent","alignItems","spaced","paddingVertical","spacing","tiny","htmlText","color","colors","black","fontWeight","bold","lineHeight","selectInput","padding","borderRadius","radius","regular","minWidth","marginHorizontal","backgroundColor","white","selectText","gray","medium","fontSize","textAlign","Item","props","part","index","isDisabled","focusedSelectId","choices","onInputChange","handleBlur","handleFocus","styles","templateContext","translations","inputNames","map","choice","name","id","isFocused","type","includes","value","choiceIndex","findIndex","disabledSuffix","selectedSuffix","handleInputChange","_item","_value","selectInputStyle","selectTextStyle","items","selectAnAnswer","QuestionTemplate","template","styleSheet","setStylesheet","_stylesheet","parts"],"sources":["../../../../../src/molecule/questions/mobile/template/index.native.tsx"],"sourcesContent":["import React, {useEffect, useState} from 'react';\nimport {TextStyle, View, ViewStyle} from 'react-native';\n\nimport trim from 'lodash/fp/trim';\n\nimport Html from '../../../../atom/html/index.native';\nimport Select from '../../../../atom/select-modal/index.native';\nimport Space from '../../../../atom/space/index.native';\nimport type {TemplateListOfChoices, TemplateTextChoice} from '../../types';\nimport FreeText from '../../free-text/index.native';\nimport {\n  FocusedSelectId,\n  HandleBlur,\n  HandleFocus,\n  useTemplateContext\n} from '../../../../template/app-review/template-context';\nimport {Theme} from '../../../../variables/theme.native';\nimport parseTemplateString from '../../../../util/parse-template-string';\nimport {BOX_STYLE} from '../../../../variables/shadow';\n\ntype StyleSheetType = {\n  container: ViewStyle;\n  spaced: ViewStyle;\n  htmlText: TextStyle;\n  selectInput: ViewStyle;\n  selectText: TextStyle;\n};\n\nconst createStyleSheet = (theme: Theme): StyleSheetType => ({\n  container: {\n    width: '100%',\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n    justifyContent: 'center',\n    alignItems: 'center'\n  },\n  spaced: {\n    paddingVertical: theme.spacing.tiny\n  },\n  htmlText: {\n    color: theme.colors.black,\n    fontWeight: theme.fontWeight.bold,\n    lineHeight: 25\n  },\n  // eslint-disable-next-line @coorpacademy/coorpacademy/no-overwriting-spread\n  selectInput: {\n    padding: theme.spacing.tiny,\n    borderRadius: theme.radius.regular,\n    minWidth: 175,\n    marginHorizontal: 12,\n    paddingVertical: 16,\n    ...BOX_STYLE,\n    backgroundColor: theme.colors.white\n  },\n  selectText: {\n    color: theme.colors.gray.medium,\n    fontWeight: theme.fontWeight.bold,\n    fontSize: theme.fontSize.regular,\n    textAlign: 'center'\n  }\n});\n\ntype TemplatePart = {\n  type: 'string' | 'answerField';\n  value: string;\n};\n\ntype ItemProps = {\n  part: TemplatePart;\n  choices: Array<TemplateTextChoice | TemplateListOfChoices>;\n  index: number;\n  isDisabled?: boolean;\n  onInputChange: (item: TemplateTextChoice | TemplateListOfChoices, value: string) => void;\n  focusedSelectId: FocusedSelectId;\n  handleBlur: HandleBlur;\n  handleFocus: HandleFocus;\n  styles: StyleSheetType;\n};\n\nconst Item = (props: ItemProps) => {\n  const {\n    part,\n    index,\n    isDisabled = false,\n    focusedSelectId,\n    choices,\n    onInputChange,\n    handleBlur,\n    handleFocus,\n    styles\n  } = props;\n\n  const templateContext = useTemplateContext();\n  const {theme, translations} = templateContext;\n\n  const inputNames = choices.map(choice => choice.name);\n  const id = `question-part-${index + 1}`;\n  const isFocused = focusedSelectId === id;\n\n  if (part.type === 'answerField' && inputNames.includes(part.value)) {\n    const choiceIndex = choices.findIndex(choice => choice.name === part.value);\n    const choice = choices[choiceIndex];\n    const {value} = choice;\n\n    if (!choice || !choice.type || !choice.name) {\n      return null;\n    }\n\n    const disabledSuffix = isDisabled ? '-disabled' : '';\n    const selectedSuffix = value ? '-selected' : '';\n\n    const handleInputChange =\n      (_item: TemplateTextChoice | TemplateListOfChoices) => (_value: string) =>\n        onInputChange(_item, _value);\n\n    if (choice.type === 'text') {\n      return (\n        <View style={styles.spaced} testID={id}>\n          <FreeText\n            key={id}\n            isDisabled={isDisabled}\n            onChange={handleInputChange(choice)}\n            value={value}\n            testID={`${id}-text${selectedSuffix}${disabledSuffix}`}\n            questionType=\"template\"\n          />\n        </View>\n      );\n    }\n\n    const selectInputStyle: TextStyle[] = [styles.selectInput];\n    const selectTextStyle: TextStyle[] = [styles.selectText];\n\n    if (choice.type === 'select') {\n      return (\n        <View style={styles.spaced} testID={id}>\n          <Select\n            isDisabled={isDisabled}\n            questionType=\"template\"\n            values={choice.items}\n            value={value}\n            placeholder={translations.selectAnAnswer}\n            isFocused={isFocused}\n            onBlur={handleBlur}\n            onFocus={handleFocus(id)}\n            onChange={handleInputChange(choice)}\n            textStyle={selectTextStyle}\n            style={selectInputStyle}\n            analyticsID={`${id}-select${selectedSuffix}${disabledSuffix}`}\n            testID={`${id}-select${selectedSuffix}${disabledSuffix}`}\n          />\n        </View>\n      );\n    }\n  }\n\n  return (\n    <Html key={id} fontSize={theme.fontSize.regular} testID={id} style={styles.htmlText}>\n      {trim(part.value || '')}\n    </Html>\n  );\n};\n\nexport type Props = {\n  isDisabled?: boolean;\n  template: string;\n  choices: Array<TemplateTextChoice | TemplateListOfChoices>;\n  onInputChange: (item: TemplateTextChoice | TemplateListOfChoices, value: string) => void;\n  focusedSelectId: FocusedSelectId;\n  handleBlur: HandleBlur;\n  handleFocus: HandleFocus;\n};\n\nconst QuestionTemplate = (props: Props) => {\n  const {\n    template,\n    onInputChange,\n    choices,\n    handleBlur,\n    handleFocus,\n    focusedSelectId,\n    isDisabled = false\n  } = props;\n\n  const templateContext = useTemplateContext();\n  const {theme} = templateContext;\n\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  if (!template || !styleSheet) {\n    return null;\n  }\n\n  const parts: TemplatePart[] = parseTemplateString(template);\n\n  return (\n    <View style={styleSheet.container} testID=\"question-template\">\n      {parts.map((part, id) => (\n        <View key={`question-part-${id}`} style={{flexDirection: 'row'}}>\n          <Item\n            part={part}\n            choices={choices}\n            index={id}\n            focusedSelectId={focusedSelectId}\n            isDisabled={isDisabled}\n            handleBlur={handleBlur}\n            handleFocus={handleFocus}\n            onInputChange={onInputChange}\n            styles={styleSheet}\n          />\n          <Space type=\"micro\" />\n        </View>\n      ))}\n    </View>\n  );\n};\n\nexport default QuestionTemplate;\n"],"mappings":"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"}
+{"version":3,"file":"index.native.js","names":["React","useEffect","useState","View","trim","Html","Select","Space","FreeText","useTemplateContext","parseTemplateString","BOX_STYLE","createStyleSheet","theme","container","width","flexDirection","flexWrap","justifyContent","alignItems","spaced","paddingVertical","spacing","tiny","htmlText","color","colors","black","fontWeight","bold","lineHeight","selectInput","padding","borderRadius","radius","regular","minWidth","marginHorizontal","backgroundColor","white","selectText","gray","medium","fontSize","textAlign","Item","props","part","index","isDisabled","focusedSelectId","choices","onInputChange","handleBlur","handleFocus","styles","templateContext","translations","inputNames","map","choice","name","id","isFocused","type","includes","value","choiceIndex","findIndex","disabledSuffix","selectedSuffix","handleInputChange","_item","_value","selectInputStyle","selectTextStyle","items","selectAnAnswer","QuestionTemplate","template","styleSheet","setStylesheet","_stylesheet","parts"],"sources":["../../../../../src/molecule/questions/mobile/template/index.native.tsx"],"sourcesContent":["import React, {useEffect, useState} from 'react';\nimport {TextStyle, View, ViewStyle} from 'react-native';\n\nimport trim from 'lodash/fp/trim';\n\nimport Html from '../../../../atom/html/index.native';\nimport Select from '../../../../atom/select-modal/index.native';\nimport Space from '../../../../atom/space/index.native';\nimport type {TemplateListOfChoices, TemplateTextChoice} from '../../types';\nimport FreeText from '../../free-text/index.native';\nimport {\n  FocusedSelectId,\n  HandleBlur,\n  HandleFocus,\n  useTemplateContext\n} from '../../../../template/app-review/template-context';\nimport {Theme} from '../../../../variables/theme.native';\nimport parseTemplateString from '../../../../util/parse-template-string';\nimport {BOX_STYLE} from '../../../../variables/shadow';\n\ntype StyleSheetType = {\n  container: ViewStyle;\n  spaced: ViewStyle;\n  htmlText: TextStyle;\n  selectInput: ViewStyle;\n  selectText: TextStyle;\n};\n\nconst createStyleSheet = (theme: Theme): StyleSheetType => ({\n  container: {\n    width: '100%',\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n    justifyContent: 'center',\n    alignItems: 'center'\n  },\n  spaced: {\n    paddingVertical: theme.spacing.tiny\n  },\n  htmlText: {\n    color: theme.colors.black,\n    fontWeight: theme.fontWeight.bold,\n    lineHeight: 25\n  },\n  // eslint-disable-next-line @coorpacademy/coorpacademy/no-overwriting-spread\n  selectInput: {\n    padding: theme.spacing.tiny,\n    borderRadius: theme.radius.regular,\n    minWidth: 175,\n    marginHorizontal: 12,\n    paddingVertical: 16,\n    ...BOX_STYLE,\n    backgroundColor: theme.colors.white\n  },\n  selectText: {\n    color: theme.colors.gray.medium,\n    fontWeight: theme.fontWeight.bold,\n    fontSize: theme.fontSize.regular,\n    textAlign: 'center'\n  }\n});\n\ntype TemplatePart = {\n  type: 'string' | 'answerField';\n  value: string;\n};\n\ntype ItemProps = {\n  part: TemplatePart;\n  choices: Array<TemplateTextChoice | TemplateListOfChoices>;\n  index: number;\n  isDisabled?: boolean;\n  onInputChange: (item: TemplateTextChoice | TemplateListOfChoices, value: string) => void;\n  focusedSelectId: FocusedSelectId;\n  handleBlur: HandleBlur;\n  handleFocus: HandleFocus;\n  styles: StyleSheetType;\n};\n\nconst Item = (props: ItemProps) => {\n  const {\n    part,\n    index,\n    isDisabled = false,\n    focusedSelectId,\n    choices,\n    onInputChange,\n    handleBlur,\n    handleFocus,\n    styles\n  } = props;\n\n  const templateContext = useTemplateContext();\n  const {theme, translations} = templateContext;\n\n  const inputNames = choices.map(choice => choice.name);\n  const id = `question-part-${index + 1}`;\n  const isFocused = focusedSelectId === id;\n\n  if (part.type === 'answerField' && inputNames.includes(part.value)) {\n    const choiceIndex = choices.findIndex(choice => choice.name === part.value);\n    const choice = choices[choiceIndex];\n    const {value} = choice;\n\n    if (!choice || !choice.type || !choice.name) {\n      return null;\n    }\n\n    const disabledSuffix = isDisabled ? '-disabled' : '';\n    const selectedSuffix = value ? '-selected' : '';\n\n    const handleInputChange =\n      (_item: TemplateTextChoice | TemplateListOfChoices) => (_value: string) =>\n        onInputChange(_item, _value);\n\n    if (choice.type === 'text') {\n      return (\n        <View style={styles.spaced} testID={id}>\n          <FreeText\n            key={id}\n            isDisabled={isDisabled}\n            onChange={handleInputChange(choice)}\n            value={value}\n            testID={`${id}-text${selectedSuffix}${disabledSuffix}`}\n            questionType=\"template\"\n          />\n        </View>\n      );\n    }\n\n    const selectInputStyle: TextStyle[] = [styles.selectInput];\n    const selectTextStyle: TextStyle[] = [styles.selectText];\n\n    if (choice.type === 'select') {\n      return (\n        <View style={styles.spaced} testID={id}>\n          <Select\n            isDisabled={isDisabled}\n            questionType=\"template\"\n            values={choice.items}\n            value={value}\n            placeholder={translations.selectAnAnswer}\n            isFocused={isFocused}\n            onBlur={handleBlur}\n            onFocus={handleFocus(id)}\n            onChange={handleInputChange(choice)}\n            textStyle={selectTextStyle}\n            style={selectInputStyle}\n            analyticsID={`${id}-select${selectedSuffix}${disabledSuffix}`}\n            testID={`${id}-select${selectedSuffix}${disabledSuffix}`}\n          />\n        </View>\n      );\n    }\n  }\n\n  return (\n    <Html key={id} fontSize={theme.fontSize.regular} testID={id} style={styles.htmlText}>\n      {trim(part.value || '')}\n    </Html>\n  );\n};\n\nexport type Props = {\n  isDisabled?: boolean;\n  template: string;\n  choices: Array<TemplateTextChoice | TemplateListOfChoices>;\n  onInputChange: (item: TemplateTextChoice | TemplateListOfChoices, value: string) => void;\n  focusedSelectId: FocusedSelectId;\n  handleBlur: HandleBlur;\n  handleFocus: HandleFocus;\n};\n\nconst QuestionTemplate = (props: Props) => {\n  const {\n    template,\n    onInputChange,\n    choices,\n    handleBlur,\n    handleFocus,\n    focusedSelectId,\n    isDisabled = false\n  } = props;\n\n  const templateContext = useTemplateContext();\n  const {theme} = templateContext;\n\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  if (!template || !styleSheet) {\n    return null;\n  }\n\n  const parts: TemplatePart[] = parseTemplateString(template);\n\n  return (\n    <View style={styleSheet.container} testID=\"question-template\">\n      {parts.map((part, id) => (\n        <View key={`question-part-${id}`} style={{flexDirection: 'row'}}>\n          <Item\n            part={part}\n            choices={choices}\n            index={id}\n            focusedSelectId={focusedSelectId}\n            isDisabled={isDisabled}\n            handleBlur={handleBlur}\n            handleFocus={handleFocus}\n            onInputChange={onInputChange}\n            styles={styleSheet}\n          />\n          <Space type=\"micro\" />\n        </View>\n      ))}\n    </View>\n  );\n};\n\nexport default QuestionTemplate;\n"],"mappings":"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"}

package/es/molecule/questions/qcm/index.js

@@ -1,4 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React, { useMemo } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
@@ -7,6 +8,7 @@ import maxBy from 'lodash/fp/maxBy';
 import Provider, { GetSkinFromContext } from '../../../atom/provider';
 import { getShadowBoxColorFromPrimary } from '../../../util/get-shadow-box-color-from-primary';
 import style from './style.css';
+
 const QCM = (props, legacyContext) => {
   const {
     answers,
@@ -39,13 +41,14 @@ const QCM = (props, legacyContext) => {
     }, /*#__PURE__*/React.createElement("div", {
       "data-name": "answer-background",
       style: {
-        backgroundColor: selected ? primarySkinColor : '#F4F4F5' /* cm_grey_75 */
+        backgroundColor: selected ? primarySkinColor : '#F4F4F5'
+        /* cm_grey_75 */
+
       },
       className: style.background
     }), /*#__PURE__*/React.createElement("span", {
       "data-name": "answer-label",
-      className: style.answerText
-      // eslint-disable-next-line react/no-danger
+      className: style.answerText // eslint-disable-next-line react/no-danger
       ,
       dangerouslySetInnerHTML: {
         __html: title
@@ -59,6 +62,7 @@ const QCM = (props, legacyContext) => {
     "aria-label": groupAriaLabel
   }, answersViews);
 };
+
 QCM.contextTypes = {
   skin: Provider.childContextTypes.skin
 };

package/es/molecule/questions/qcm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","classnames","PropTypes","getOr","maxBy","Provider","GetSkinFromContext","getShadowBoxColorFromPrimary","style","QCM","props","legacyContext","answers","groupAriaLabel","longestAnswer","title","length","skin","primarySkinColor","answersViews","map","answer","key","onClick","selected","ariaLabel","longAnswerClass","selectedAnswerClass","selectedAnswer","unselectedAnswer","innerHTML","boxShadow","backgroundColor","background","answerText","__html","wrapper","contextTypes","childContextTypes","propTypes","arrayOf","shape","string","bool","func"],"sources":["../../../../src/molecule/questions/qcm/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport getOr from 'lodash/fp/getOr';\nimport maxBy from 'lodash/fp/maxBy';\nimport Provider, {GetSkinFromContext} from '../../../atom/provider';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst QCM = (props, legacyContext) => {\n  const {answers, groupAriaLabel} = props;\n  const longestAnswer = maxBy(({title}) => title.length, answers);\n  const skin = GetSkinFromContext(legacyContext);\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const answersViews = useMemo(\n    () =>\n      answers.map((answer, key) => {\n        const {onClick, title, selected, 'aria-label': ariaLabel} = answer;\n        const longAnswerClass = longestAnswer.title === title ? style.longestAnswer : style.answer;\n        const selectedAnswerClass = selected ? style.selectedAnswer : style.unselectedAnswer;\n\n        return (\n          <div\n            data-name=\"answer\"\n            aria-label={ariaLabel || title}\n            className={classnames(longAnswerClass, style.innerHTML, selectedAnswerClass)}\n            onClick={onClick}\n            style={{\n              ...(selected && {\n                boxShadow: `0 4px 16px ${getShadowBoxColorFromPrimary(primarySkinColor)}`\n              })\n            }}\n            data-selected={selected}\n            key={key}\n          >\n            <div\n              data-name=\"answer-background\"\n              style={{backgroundColor: selected ? primarySkinColor : '#F4F4F5' /* cm_grey_75 */}}\n              className={style.background}\n            />\n            <span\n              data-name=\"answer-label\"\n              className={style.answerText}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: title}}\n            />\n          </div>\n        );\n      }),\n    [answers, longestAnswer, primarySkinColor]\n  );\n\n  return (\n    <div data-name=\"qcm\" className={style.wrapper} role=\"group\" aria-label={groupAriaLabel}>\n      {answersViews}\n    </div>\n  );\n};\n\nQCM.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nQCM.propTypes = {\n  answers: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      selected: PropTypes.bool,\n      onClick: PropTypes.func,\n      'aria-label': PropTypes.string\n    })\n  ),\n  groupAriaLabel: PropTypes.string\n};\n\nexport default QCM;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useMemo","classnames","PropTypes","getOr","maxBy","Provider","GetSkinFromContext","getShadowBoxColorFromPrimary","style","QCM","props","legacyContext","answers","groupAriaLabel","longestAnswer","title","length","skin","primarySkinColor","answersViews","map","answer","key","onClick","selected","ariaLabel","longAnswerClass","selectedAnswerClass","selectedAnswer","unselectedAnswer","innerHTML","boxShadow","backgroundColor","background","answerText","__html","wrapper","contextTypes","childContextTypes","propTypes","arrayOf","shape","string","bool","func"],"sources":["../../../../src/molecule/questions/qcm/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport getOr from 'lodash/fp/getOr';\nimport maxBy from 'lodash/fp/maxBy';\nimport Provider, {GetSkinFromContext} from '../../../atom/provider';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst QCM = (props, legacyContext) => {\n  const {answers, groupAriaLabel} = props;\n  const longestAnswer = maxBy(({title}) => title.length, answers);\n  const skin = GetSkinFromContext(legacyContext);\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const answersViews = useMemo(\n    () =>\n      answers.map((answer, key) => {\n        const {onClick, title, selected, 'aria-label': ariaLabel} = answer;\n        const longAnswerClass = longestAnswer.title === title ? style.longestAnswer : style.answer;\n        const selectedAnswerClass = selected ? style.selectedAnswer : style.unselectedAnswer;\n\n        return (\n          <div\n            data-name=\"answer\"\n            aria-label={ariaLabel || title}\n            className={classnames(longAnswerClass, style.innerHTML, selectedAnswerClass)}\n            onClick={onClick}\n            style={{\n              ...(selected && {\n                boxShadow: `0 4px 16px ${getShadowBoxColorFromPrimary(primarySkinColor)}`\n              })\n            }}\n            data-selected={selected}\n            key={key}\n          >\n            <div\n              data-name=\"answer-background\"\n              style={{backgroundColor: selected ? primarySkinColor : '#F4F4F5' /* cm_grey_75 */}}\n              className={style.background}\n            />\n            <span\n              data-name=\"answer-label\"\n              className={style.answerText}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: title}}\n            />\n          </div>\n        );\n      }),\n    [answers, longestAnswer, primarySkinColor]\n  );\n\n  return (\n    <div data-name=\"qcm\" className={style.wrapper} role=\"group\" aria-label={groupAriaLabel}>\n      {answersViews}\n    </div>\n  );\n};\n\nQCM.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nQCM.propTypes = {\n  answers: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      selected: PropTypes.bool,\n      onClick: PropTypes.func,\n      'aria-label': PropTypes.string\n    })\n  ),\n  groupAriaLabel: PropTypes.string\n};\n\nexport default QCM;\n"],"mappings":"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"}

package/es/molecule/questions/qcm-drag/index.js

@@ -15,14 +15,17 @@ const AnswersPropTypes = process.env.NODE_ENV !== "production" ? PropTypes.array
   title: PropTypes.string,
   help: PropTypes.string
 })) : {};
+
 const EmptyView = ({
   help
 }) => /*#__PURE__*/React.createElement("span", {
   className: style.emptySpan
 }, help);
+
 EmptyView.propTypes = process.env.NODE_ENV !== "production" ? {
   help: PropTypes.string
 } : {};
+
 const Choices = ({
   answers
 }) => {
@@ -36,8 +39,7 @@ const Choices = ({
       className: classnames(selected ? style.invisibleAnswer : style.unselected, style.innerHTML),
       "data-name": "answer",
       onClick: onClick,
-      key: key
-      // eslint-disable-next-line react/no-danger
+      key: key // eslint-disable-next-line react/no-danger
       ,
       dangerouslySetInnerHTML: {
         __html: title
@@ -48,15 +50,18 @@ const Choices = ({
     className: style.choices
   }, answersViews);
 };
+
 Choices.propTypes = process.env.NODE_ENV !== "production" ? {
   answers: AnswersPropTypes
 } : {};
+
 const SelectedAnswerSections = ({
   answers,
   help,
   backgroundColor
 }) => {
   const selectedAnswers = _pipe(_filter('selected'), _orderBy('order', 'asc'))(answers);
+
   const selectedAnswersViews = selectedAnswers.map((answer, key) => {
     const {
       onClick,
@@ -82,14 +87,14 @@ const SelectedAnswerSections = ({
     }, /*#__PURE__*/React.createElement("span", {
       "data-name": "answerContent",
       className: classnames(style.selectedAnswerText, style.innerHTML),
-      title: title
-      // eslint-disable-next-line react/no-danger
+      title: title // eslint-disable-next-line react/no-danger
       ,
       dangerouslySetInnerHTML: {
         __html: title
       }
     })));
   });
+
   if (selectedAnswersViews.length > 0) {
     return /*#__PURE__*/React.createElement("div", {
       className: style.selectedAnswers
@@ -102,18 +107,22 @@ const SelectedAnswerSections = ({
     }));
   }
 };
+
 SelectedAnswerSections.propTypes = process.env.NODE_ENV !== "production" ? {
   answers: AnswersPropTypes,
   help: EmptyView.propTypes.help,
   backgroundColor: PropTypes.string
 } : {};
+
 const QcmDrag = ({
   answers,
   help,
   groupAriaLabel
 }, legacyContext) => {
   const skin = GetSkinFromContext(legacyContext);
+
   const primarySkinColor = _getOr('#00B0FF', 'common.primary', skin);
+
   return /*#__PURE__*/React.createElement("div", {
     className: style.wrapper,
     role: "group",
@@ -129,6 +138,7 @@ const QcmDrag = ({
     answers: answers
   })));
 };
+
 QcmDrag.propTypes = process.env.NODE_ENV !== "production" ? {
   answers: AnswersPropTypes,
   help: SelectedAnswerSections.propTypes.help,

package/es/molecule/questions/qcm-drag/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classnames","Provider","GetSkinFromContext","getShadowBoxColorFromPrimary","style","AnswersPropTypes","arrayOf","shape","onClick","func","order","number","selected","bool","title","string","help","EmptyView","emptySpan","propTypes","Choices","answers","answersViews","map","answer","key","invisibleAnswer","unselected","innerHTML","__html","choices","SelectedAnswerSections","backgroundColor","selectedAnswers","selectedAnswersViews","boxShadow","background","content","selectedAnswerText","length","emptyAnswers","QcmDrag","groupAriaLabel","legacyContext","skin","primarySkinColor","wrapper","contextTypes","childContextTypes"],"sources":["../../../../src/molecule/questions/qcm-drag/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {pipe, filter, orderBy, getOr} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Provider, {GetSkinFromContext} from '../../../atom/provider';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst AnswersPropTypes = PropTypes.arrayOf(\n  PropTypes.shape({\n    onClick: PropTypes.func,\n    order: PropTypes.number,\n    selected: PropTypes.bool,\n    title: PropTypes.string,\n    help: PropTypes.string\n  })\n);\n\nconst EmptyView = ({help}) => <span className={style.emptySpan}>{help}</span>;\n\nEmptyView.propTypes = {\n  help: PropTypes.string\n};\n\nconst Choices = ({answers}) => {\n  const answersViews = answers.map((answer, key) => {\n    const {onClick, title, selected} = answer;\n    return (\n      <div\n        className={classnames(selected ? style.invisibleAnswer : style.unselected, style.innerHTML)}\n        data-name=\"answer\"\n        onClick={onClick}\n        key={key}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: title}}\n      />\n    );\n  });\n\n  return <div className={style.choices}>{answersViews}</div>;\n};\n\nChoices.propTypes = {\n  answers: AnswersPropTypes\n};\n\nconst SelectedAnswerSections = ({answers, help, backgroundColor}) => {\n  const selectedAnswers = pipe(filter('selected'), orderBy('order', 'asc'))(answers);\n  const selectedAnswersViews = selectedAnswers.map((answer, key) => {\n    const {onClick, title} = answer;\n    return (\n      <div\n        data-selected=\"true\"\n        onClick={onClick}\n        key={key}\n        data-name=\"selectedAnswer\"\n        className={style.selected}\n        style={{\n          boxShadow: `0px 4px 16px ${getShadowBoxColorFromPrimary(backgroundColor)}`\n        }}\n      >\n        <div\n          data-name=\"answerBackground\"\n          style={{\n            backgroundColor\n          }}\n          className={style.background}\n        />\n        <div className={style.content}>\n          <span\n            data-name=\"answerContent\"\n            className={classnames(style.selectedAnswerText, style.innerHTML)}\n            title={title}\n            // eslint-disable-next-line react/no-danger\n            dangerouslySetInnerHTML={{__html: title}}\n          />\n        </div>\n      </div>\n    );\n  });\n\n  if (selectedAnswersViews.length > 0) {\n    return <div className={style.selectedAnswers}>{selectedAnswersViews}</div>;\n  } else {\n    return (\n      <div className={style.emptyAnswers}>\n        <EmptyView help={help} />\n      </div>\n    );\n  }\n};\n\nSelectedAnswerSections.propTypes = {\n  answers: AnswersPropTypes,\n  help: EmptyView.propTypes.help,\n  backgroundColor: PropTypes.string\n};\n\nconst QcmDrag = ({answers, help, groupAriaLabel}, legacyContext) => {\n  const skin = GetSkinFromContext(legacyContext);\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  return (\n    <div className={style.wrapper} role=\"group\" aria-label={groupAriaLabel}>\n      <SelectedAnswerSections answers={answers} help={help} backgroundColor={primarySkinColor} />\n      <div data-name=\"qcm-drag-answers\" className={style.answers}>\n        <Choices answers={answers} />\n      </div>\n    </div>\n  );\n};\n\nQcmDrag.propTypes = {\n  answers: AnswersPropTypes,\n  help: SelectedAnswerSections.propTypes.help,\n  groupAriaLabel: PropTypes.string\n};\n\nQcmDrag.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nexport default QcmDrag;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","PropTypes","classnames","Provider","GetSkinFromContext","getShadowBoxColorFromPrimary","style","AnswersPropTypes","arrayOf","shape","onClick","func","order","number","selected","bool","title","string","help","EmptyView","emptySpan","propTypes","Choices","answers","answersViews","map","answer","key","invisibleAnswer","unselected","innerHTML","__html","choices","SelectedAnswerSections","backgroundColor","selectedAnswers","selectedAnswersViews","boxShadow","background","content","selectedAnswerText","length","emptyAnswers","QcmDrag","groupAriaLabel","legacyContext","skin","primarySkinColor","wrapper","contextTypes","childContextTypes"],"sources":["../../../../src/molecule/questions/qcm-drag/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {pipe, filter, orderBy, getOr} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Provider, {GetSkinFromContext} from '../../../atom/provider';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst AnswersPropTypes = PropTypes.arrayOf(\n  PropTypes.shape({\n    onClick: PropTypes.func,\n    order: PropTypes.number,\n    selected: PropTypes.bool,\n    title: PropTypes.string,\n    help: PropTypes.string\n  })\n);\n\nconst EmptyView = ({help}) => <span className={style.emptySpan}>{help}</span>;\n\nEmptyView.propTypes = {\n  help: PropTypes.string\n};\n\nconst Choices = ({answers}) => {\n  const answersViews = answers.map((answer, key) => {\n    const {onClick, title, selected} = answer;\n    return (\n      <div\n        className={classnames(selected ? style.invisibleAnswer : style.unselected, style.innerHTML)}\n        data-name=\"answer\"\n        onClick={onClick}\n        key={key}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: title}}\n      />\n    );\n  });\n\n  return <div className={style.choices}>{answersViews}</div>;\n};\n\nChoices.propTypes = {\n  answers: AnswersPropTypes\n};\n\nconst SelectedAnswerSections = ({answers, help, backgroundColor}) => {\n  const selectedAnswers = pipe(filter('selected'), orderBy('order', 'asc'))(answers);\n  const selectedAnswersViews = selectedAnswers.map((answer, key) => {\n    const {onClick, title} = answer;\n    return (\n      <div\n        data-selected=\"true\"\n        onClick={onClick}\n        key={key}\n        data-name=\"selectedAnswer\"\n        className={style.selected}\n        style={{\n          boxShadow: `0px 4px 16px ${getShadowBoxColorFromPrimary(backgroundColor)}`\n        }}\n      >\n        <div\n          data-name=\"answerBackground\"\n          style={{\n            backgroundColor\n          }}\n          className={style.background}\n        />\n        <div className={style.content}>\n          <span\n            data-name=\"answerContent\"\n            className={classnames(style.selectedAnswerText, style.innerHTML)}\n            title={title}\n            // eslint-disable-next-line react/no-danger\n            dangerouslySetInnerHTML={{__html: title}}\n          />\n        </div>\n      </div>\n    );\n  });\n\n  if (selectedAnswersViews.length > 0) {\n    return <div className={style.selectedAnswers}>{selectedAnswersViews}</div>;\n  } else {\n    return (\n      <div className={style.emptyAnswers}>\n        <EmptyView help={help} />\n      </div>\n    );\n  }\n};\n\nSelectedAnswerSections.propTypes = {\n  answers: AnswersPropTypes,\n  help: EmptyView.propTypes.help,\n  backgroundColor: PropTypes.string\n};\n\nconst QcmDrag = ({answers, help, groupAriaLabel}, legacyContext) => {\n  const skin = GetSkinFromContext(legacyContext);\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  return (\n    <div className={style.wrapper} role=\"group\" aria-label={groupAriaLabel}>\n      <SelectedAnswerSections answers={answers} help={help} backgroundColor={primarySkinColor} />\n      <div data-name=\"qcm-drag-answers\" className={style.answers}>\n        <Choices answers={answers} />\n      </div>\n    </div>\n  );\n};\n\nQcmDrag.propTypes = {\n  answers: AnswersPropTypes,\n  help: SelectedAnswerSections.propTypes.help,\n  groupAriaLabel: PropTypes.string\n};\n\nQcmDrag.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nexport default QcmDrag;\n"],"mappings":"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"}

package/es/molecule/questions/qcm-graphic/index.js

@@ -1,18 +1,23 @@
 import _getOr from "lodash/fp/getOr";
+
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Provider, { GetSkinFromContext } from '../../../atom/provider';
 import { getShadowBoxColorFromPrimary } from '../../../util/get-shadow-box-color-from-primary';
 import style from './style.css';
+
 const QCMImage = (props, legacyContext) => {
   const {
     answers,
     groupAriaLabel
   } = props;
   const skin = GetSkinFromContext(legacyContext);
+
   const primarySkinColor = _getOr('#00B0FF', 'common.primary', skin);
+
   const answersViews = answers.map((answer, key) => {
     const {
       onClick,
@@ -51,8 +56,7 @@ const QCMImage = (props, legacyContext) => {
       className: style.titleWrapper
     }, /*#__PURE__*/React.createElement("div", {
       title: title,
-      className: classnames(style.title, style.innerHTML)
-      // eslint-disable-next-line react/no-danger
+      className: classnames(style.title, style.innerHTML) // eslint-disable-next-line react/no-danger
       ,
       dangerouslySetInnerHTML: {
         __html: title
@@ -66,6 +70,7 @@ const QCMImage = (props, legacyContext) => {
     "aria-label": groupAriaLabel
   }, answersViews);
 };
+
 QCMImage.contextTypes = {
   skin: Provider.childContextTypes.skin
 };

package/es/molecule/questions/qcm-graphic/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classnames","Provider","GetSkinFromContext","getShadowBoxColorFromPrimary","style","QCMImage","props","legacyContext","answers","groupAriaLabel","skin","primarySkinColor","answersViews","map","answer","key","onClick","title","selected","image","ariaLabel","boxShadow","backgroundColor","background","content","imageWrapper","backgroundImage","titleWrapper","innerHTML","__html","wrapper","contextTypes","childContextTypes","propTypes","arrayOf","shape","string","bool","func"],"sources":["../../../../src/molecule/questions/qcm-graphic/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Provider, {GetSkinFromContext} from '../../../atom/provider';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst QCMImage = (props, legacyContext) => {\n  const {answers, groupAriaLabel} = props;\n  const skin = GetSkinFromContext(legacyContext);\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const answersViews = answers.map((answer, key) => {\n    const {onClick, title, selected, image, ariaLabel} = answer;\n\n    return (\n      <div\n        onClick={onClick}\n        data-selected={selected}\n        data-name=\"answerGraphic\"\n        style={{\n          ...(selected && {\n            boxShadow: `0 4px 16px ${getShadowBoxColorFromPrimary(primarySkinColor)}`\n          })\n        }}\n        className={selected ? style.selected : style.answer}\n        key={key}\n      >\n        <div\n          data-name=\"answerBackground\"\n          style={{\n            backgroundColor: selected ? primarySkinColor : '#F4F4F5'\n          }}\n          className={style.background}\n        />\n        <div data-name=\"answerContent\" className={style.content}>\n          <div\n            className={style.imageWrapper}\n            data-name=\"answerImage\"\n            aria-label={ariaLabel || title}\n            style={{\n              backgroundImage: `url(${image})`\n            }}\n          />\n          <div data-name=\"answerText\" className={style.titleWrapper}>\n            <div\n              title={title}\n              className={classnames(style.title, style.innerHTML)}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: title}}\n            />\n          </div>\n        </div>\n      </div>\n    );\n  });\n\n  return (\n    <div\n      data-name=\"qcm-graphic-wrapper\"\n      className={style.wrapper}\n      role=\"group\"\n      aria-label={groupAriaLabel}\n    >\n      {answersViews}\n    </div>\n  );\n};\n\nQCMImage.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nQCMImage.propTypes = {\n  answers: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      selected: PropTypes.bool,\n      onClick: PropTypes.func,\n      image: PropTypes.string,\n      ariaLabel: PropTypes.string\n    })\n  ),\n  groupAriaLabel: PropTypes.string\n};\n\nexport default QCMImage;\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAElC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,QAAQ,IAAGC,kBAAkB,QAAO,wBAAwB;AACnE,SAAQC,4BAA4B,QAAO,iDAAiD;AAC5F,OAAOC,KAAK,MAAM,aAAa;AAE/B,MAAMC,QAAQ,GAAG,CAACC,KAAK,EAAEC,aAAa,KAAK;EACzC,MAAM;IAACC,OAAO;IAAEC;EAAc,CAAC,GAAGH,KAAK;EACvC,MAAMI,IAAI,GAAGR,kBAAkB,CAACK,aAAa,CAAC;EAC9C,MAAMI,gBAAgB,GAAG,OAAM,SAAS,EAAE,gBAAgB,EAAED,IAAI,CAAC;EAEjE,MAAME,YAAY,GAAGJ,OAAO,CAACK,GAAG,CAAC,CAACC,MAAM,EAAEC,GAAG,KAAK;IAChD,MAAM;MAACC,OAAO;MAAEC,KAAK;MAAEC,QAAQ;MAAEC,KAAK;MAAEC;IAAS,CAAC,GAAGN,MAAM;IAE3D,oBACE;MACE,OAAO,EAAEE,OAAQ;MACjB,iBAAeE,QAAS;MACxB,aAAU,eAAe;MACzB,KAAK,eACCA,QAAQ,IAAI;QACdG,SAAS,EAAG,cAAalB,4BAA4B,CAACQ,gBAAgB,CAAE;MAC1E,CAAC,CACD;MACF,SAAS,EAAEO,QAAQ,GAAGd,KAAK,CAACc,QAAQ,GAAGd,KAAK,CAACU,MAAO;MACpD,GAAG,EAAEC;IAAI,gBAET;MACE,aAAU,kBAAkB;MAC5B,KAAK,EAAE;QACLO,eAAe,EAAEJ,QAAQ,GAAGP,gBAAgB,GAAG;MACjD,CAAE;MACF,SAAS,EAAEP,KAAK,CAACmB;IAAW,EAC5B,eACF;MAAK,aAAU,eAAe;MAAC,SAAS,EAAEnB,KAAK,CAACoB;IAAQ,gBACtD;MACE,SAAS,EAAEpB,KAAK,CAACqB,YAAa;MAC9B,aAAU,aAAa;MACvB,cAAYL,SAAS,IAAIH,KAAM;MAC/B,KAAK,EAAE;QACLS,eAAe,EAAG,OAAMP,KAAM;MAChC;IAAE,EACF,eACF;MAAK,aAAU,YAAY;MAAC,SAAS,EAAEf,KAAK,CAACuB;IAAa,gBACxD;MACE,KAAK,EAAEV,KAAM;MACb,SAAS,EAAEjB,UAAU,CAACI,KAAK,CAACa,KAAK,EAAEb,KAAK,CAACwB,SAAS;MAClD;MAAA;MACA,uBAAuB,EAAE;QAACC,MAAM,EAAEZ;MAAK;IAAE,EACzC,CACE,CACF,CACF;EAEV,CAAC,CAAC;EAEF,oBACE;IACE,aAAU,qBAAqB;IAC/B,SAAS,EAAEb,KAAK,CAAC0B,OAAQ;IACzB,IAAI,EAAC,OAAO;IACZ,cAAYrB;EAAe,GAE1BG,YAAY,CACT;AAEV,CAAC;AAEDP,QAAQ,CAAC0B,YAAY,GAAG;EACtBrB,IAAI,EAAET,QAAQ,CAAC+B,iBAAiB,CAACtB;AACnC,CAAC;AAEDL,QAAQ,CAAC4B,SAAS,2CAAG;EACnBzB,OAAO,EAAET,SAAS,CAACmC,OAAO,CACxBnC,SAAS,CAACoC,KAAK,CAAC;IACdlB,KAAK,EAAElB,SAAS,CAACqC,MAAM;IACvBlB,QAAQ,EAAEnB,SAAS,CAACsC,IAAI;IACxBrB,OAAO,EAAEjB,SAAS,CAACuC,IAAI;IACvBnB,KAAK,EAAEpB,SAAS,CAACqC,MAAM;IACvBhB,SAAS,EAAErB,SAAS,CAACqC;EACvB,CAAC,CAAC,CACH;EACD3B,cAAc,EAAEV,SAAS,CAACqC;AAC5B,CAAC;AAED,eAAe/B,QAAQ"}
+{"version":3,"file":"index.js","names":["React","PropTypes","classnames","Provider","GetSkinFromContext","getShadowBoxColorFromPrimary","style","QCMImage","props","legacyContext","answers","groupAriaLabel","skin","primarySkinColor","answersViews","map","answer","key","onClick","title","selected","image","ariaLabel","boxShadow","backgroundColor","background","content","imageWrapper","backgroundImage","titleWrapper","innerHTML","__html","wrapper","contextTypes","childContextTypes","propTypes","arrayOf","shape","string","bool","func"],"sources":["../../../../src/molecule/questions/qcm-graphic/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Provider, {GetSkinFromContext} from '../../../atom/provider';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst QCMImage = (props, legacyContext) => {\n  const {answers, groupAriaLabel} = props;\n  const skin = GetSkinFromContext(legacyContext);\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const answersViews = answers.map((answer, key) => {\n    const {onClick, title, selected, image, ariaLabel} = answer;\n\n    return (\n      <div\n        onClick={onClick}\n        data-selected={selected}\n        data-name=\"answerGraphic\"\n        style={{\n          ...(selected && {\n            boxShadow: `0 4px 16px ${getShadowBoxColorFromPrimary(primarySkinColor)}`\n          })\n        }}\n        className={selected ? style.selected : style.answer}\n        key={key}\n      >\n        <div\n          data-name=\"answerBackground\"\n          style={{\n            backgroundColor: selected ? primarySkinColor : '#F4F4F5'\n          }}\n          className={style.background}\n        />\n        <div data-name=\"answerContent\" className={style.content}>\n          <div\n            className={style.imageWrapper}\n            data-name=\"answerImage\"\n            aria-label={ariaLabel || title}\n            style={{\n              backgroundImage: `url(${image})`\n            }}\n          />\n          <div data-name=\"answerText\" className={style.titleWrapper}>\n            <div\n              title={title}\n              className={classnames(style.title, style.innerHTML)}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: title}}\n            />\n          </div>\n        </div>\n      </div>\n    );\n  });\n\n  return (\n    <div\n      data-name=\"qcm-graphic-wrapper\"\n      className={style.wrapper}\n      role=\"group\"\n      aria-label={groupAriaLabel}\n    >\n      {answersViews}\n    </div>\n  );\n};\n\nQCMImage.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nQCMImage.propTypes = {\n  answers: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      selected: PropTypes.bool,\n      onClick: PropTypes.func,\n      image: PropTypes.string,\n      ariaLabel: PropTypes.string\n    })\n  ),\n  groupAriaLabel: PropTypes.string\n};\n\nexport default QCMImage;\n"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,QAAP,IAAkBC,kBAAlB,QAA2C,wBAA3C;AACA,SAAQC,4BAAR,QAA2C,iDAA3C;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,QAAQ,GAAG,CAACC,KAAD,EAAQC,aAAR,KAA0B;EACzC,MAAM;IAACC,OAAD;IAAUC;EAAV,IAA4BH,KAAlC;EACA,MAAMI,IAAI,GAAGR,kBAAkB,CAACK,aAAD,CAA/B;;EACA,MAAMI,gBAAgB,GAAG,OAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAAzB;;EAEA,MAAME,YAAY,GAAGJ,OAAO,CAACK,GAAR,CAAY,CAACC,MAAD,EAASC,GAAT,KAAiB;IAChD,MAAM;MAACC,OAAD;MAAUC,KAAV;MAAiBC,QAAjB;MAA2BC,KAA3B;MAAkCC;IAAlC,IAA+CN,MAArD;IAEA,oBACE;MACE,OAAO,EAAEE,OADX;MAEE,iBAAeE,QAFjB;MAGE,aAAU,eAHZ;MAIE,KAAK,eACCA,QAAQ,IAAI;QACdG,SAAS,EAAG,cAAalB,4BAA4B,CAACQ,gBAAD,CAAmB;MAD1D,CADb,CAJP;MASE,SAAS,EAAEO,QAAQ,GAAGd,KAAK,CAACc,QAAT,GAAoBd,KAAK,CAACU,MAT/C;MAUE,GAAG,EAAEC;IAVP,gBAYE;MACE,aAAU,kBADZ;MAEE,KAAK,EAAE;QACLO,eAAe,EAAEJ,QAAQ,GAAGP,gBAAH,GAAsB;MAD1C,CAFT;MAKE,SAAS,EAAEP,KAAK,CAACmB;IALnB,EAZF,eAmBE;MAAK,aAAU,eAAf;MAA+B,SAAS,EAAEnB,KAAK,CAACoB;IAAhD,gBACE;MACE,SAAS,EAAEpB,KAAK,CAACqB,YADnB;MAEE,aAAU,aAFZ;MAGE,cAAYL,SAAS,IAAIH,KAH3B;MAIE,KAAK,EAAE;QACLS,eAAe,EAAG,OAAMP,KAAM;MADzB;IAJT,EADF,eASE;MAAK,aAAU,YAAf;MAA4B,SAAS,EAAEf,KAAK,CAACuB;IAA7C,gBACE;MACE,KAAK,EAAEV,KADT;MAEE,SAAS,EAAEjB,UAAU,CAACI,KAAK,CAACa,KAAP,EAAcb,KAAK,CAACwB,SAApB,CAFvB,CAGE;MAHF;MAIE,uBAAuB,EAAE;QAACC,MAAM,EAAEZ;MAAT;IAJ3B,EADF,CATF,CAnBF,CADF;EAwCD,CA3CoB,CAArB;EA6CA,oBACE;IACE,aAAU,qBADZ;IAEE,SAAS,EAAEb,KAAK,CAAC0B,OAFnB;IAGE,IAAI,EAAC,OAHP;IAIE,cAAYrB;EAJd,GAMGG,YANH,CADF;AAUD,CA5DD;;AA8DAP,QAAQ,CAAC0B,YAAT,GAAwB;EACtBrB,IAAI,EAAET,QAAQ,CAAC+B,iBAAT,CAA2BtB;AADX,CAAxB;AAIAL,QAAQ,CAAC4B,SAAT,2CAAqB;EACnBzB,OAAO,EAAET,SAAS,CAACmC,OAAV,CACPnC,SAAS,CAACoC,KAAV,CAAgB;IACdlB,KAAK,EAAElB,SAAS,CAACqC,MADH;IAEdlB,QAAQ,EAAEnB,SAAS,CAACsC,IAFN;IAGdrB,OAAO,EAAEjB,SAAS,CAACuC,IAHL;IAIdnB,KAAK,EAAEpB,SAAS,CAACqC,MAJH;IAKdhB,SAAS,EAAErB,SAAS,CAACqC;EALP,CAAhB,CADO,CADU;EAUnB3B,cAAc,EAAEV,SAAS,CAACqC;AAVP,CAArB;AAaA,eAAe/B,QAAf"}