@gamelearn/arcade-components 0.7.1 → 0.10.0

package/dist/components/{decision-component/components/Rewards.js → rewards-component/components/RewardsComponent.js}

@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _RewardItem = _interopRequireDefault(require("./RewardItem"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
@@ -35,46 +37,66 @@ function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "und
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var Rewards = function Rewards(_ref) {
+var RewardsComponent = function RewardsComponent(_ref) {
   var rewards = _ref.rewards,
       addPoints = _ref.addPoints,
-      indicators = _ref.indicators;
-  // Constantes para carrousel
-  var itemRef = (0, _react.useRef)();
-  var carouselContentRef = (0, _react.useRef)();
+      emitEvent = _ref.emitEvent;
+  var carouselRef = (0, _react.useRef)();
+  var indicators = emitEvent({
+    type: 'loadIndicators'
+  });
 
   var _useState = (0, _react.useState)(0),
       _useState2 = _slicedToArray(_useState, 2),
-      itemWidth = _useState2[0],
-      setItemWidth = _useState2[1];
+      offset = _useState2[0],
+      setOffset = _useState2[1];
+
+  var rewardsSize = (0, _react.useRef)({});
 
   var _useState3 = (0, _react.useState)(0),
       _useState4 = _slicedToArray(_useState3, 2),
-      carouselContentWidth = _useState4[0],
-      setCarouselContentWidth = _useState4[1];
+      leftAmount = _useState4[0],
+      setLeftAmount = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(0),
+  var _useState5 = (0, _react.useState)(),
       _useState6 = _slicedToArray(_useState5, 2),
-      offset = _useState6[0],
-      setOffset = _useState6[1];
+      rightAmount = _useState6[0],
+      setRightAmount = _useState6[1];
 
-  var _useState7 = (0, _react.useState)("translateX(0px)"),
+  var _useState7 = (0, _react.useState)(0),
       _useState8 = _slicedToArray(_useState7, 2),
-      transform = _useState8[0],
-      setTransform = _useState8[1];
+      totalItems = _useState8[0],
+      setTotalItems = _useState8[1];
 
-  var _useState9 = (0, _react.useState)(0),
-      _useState10 = _slicedToArray(_useState9, 2),
-      itemsLeft = _useState10[0],
-      setItemsLeft = _useState10[1];
-
-  var onlyGrade = rewards.filter(function (reward) {
-    return reward.type === 'grade';
-  }).length === rewards.length;
   var filteredRewards = rewards.filter(function (reward) {
     return reward.type !== 'grade';
   });
   var rewardsUnified = [];
+  var displayingItems = 4;
+
+  var getIndicator = function getIndicator(element) {
+    var group = indicators[element.type];
+
+    if (group) {
+      var indicator = group.find(function (r) {
+        return r.id === element.id;
+      });
+      return indicator || null;
+    }
+
+    return null;
+  };
+
+  var getLabel = function getLabel(element) {
+    var indicator = getIndicator(element);
+    return indicator ? indicator.name : null;
+  };
+
+  var _getIcon = function getIcon(element) {
+    var indicator = getIndicator(element);
+    return indicator ? indicator.icon : null;
+  };
+
   filteredRewards.forEach(function (currentReward) {
     var found = rewardsUnified.findIndex(function (reward) {
       return currentReward.id === reward.id;
@@ -83,121 +105,86 @@ var Rewards = function Rewards(_ref) {
     if (found >= 0) {
       rewardsUnified[found].points += currentReward.points;
     } else {
-      rewardsUnified.push(_objectSpread({}, currentReward));
+      rewardsUnified.push(_objectSpread(_objectSpread({}, currentReward), {}, {
+        label: getLabel(currentReward)
+      }));
     }
   });
-  var filteredRewardsUnified = rewardsUnified.filter(function (reward) {
-    return reward.points !== 0;
-  });
-  var noRewards = filteredRewardsUnified.length === 0;
-  (0, _react.useEffect)(function () {
-    if (onlyGrade) {
-      addPoints();
-    }
-  }, [onlyGrade, addPoints]);
-  (0, _react.useEffect)(function () {
-    if (carouselContentRef.current) {
-      setCarouselContentWidth(carouselContentRef.current.offsetWidth);
-    }
-  }, [carouselContentRef]);
-  (0, _react.useEffect)(function () {
-    var itemInScreen = Math.floor(carouselContentWidth / itemWidth);
-    var currentItemsLeft = filteredRewardsUnified.length - itemInScreen - offset;
-    setItemsLeft(currentItemsLeft);
-  }, [carouselContentWidth, itemWidth, offset, filteredRewardsUnified.length]);
-  (0, _react.useEffect)(function () {
-    setTransform("translateX(-".concat(itemWidth * offset, "px)"));
-  }, [itemWidth, offset]);
-  (0, _react.useEffect)(function () {
-    if (itemRef.current) {
-      var separatorWidth = Number.parseInt(window.getComputedStyle(itemRef.current).getPropertyValue('margin-right').split('px')[0], 0);
-      var iWidth = Number.parseInt(itemRef.current.offsetWidth, 0);
-      setItemWidth(separatorWidth + iWidth);
-    }
-  }, [carouselContentRef, itemRef]);
 
   var onClickPrev = function onClickPrev() {
-    if (offset <= 0) return;
+    if (offset - 1 < 0) return;
     setOffset(offset - 1);
+    var nextSize = Object.values(rewardsSize.current)[offset - 1];
+    setRightAmount(null);
+    setLeftAmount(leftAmount + nextSize);
   };
 
   var onClickNext = function onClickNext() {
-    if (itemsLeft <= 1) {
-      return;
-    }
-
+    if (offset + displayingItems >= totalItems) return;
+    setRightAmount(offset + displayingItems === totalItems - 1 ? 0 : null);
     setOffset(offset + 1);
+    var nextSize = Object.values(rewardsSize.current)[offset];
+    setLeftAmount(leftAmount - nextSize);
   };
 
-  if (onlyGrade || noRewards) {
-    return null;
-  }
-
+  (0, _react.useEffect)(function () {
+    setTotalItems(Object.values(rewardsSize.current).length);
+  }, []);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "test--results__rewards"
   }, /*#__PURE__*/_react.default.createElement("span", {
     onClick: onClickPrev,
-    className: "icon-back ".concat(filteredRewardsUnified.length < 4 ? 'visibility--hidden' : '', " ").concat(offset <= 0 ? 'disabled' : '')
+    className: "icon-back ".concat(rewardsUnified.length <= displayingItems ? 'visibility--hidden' : '', " ").concat(offset <= 0 ? 'disabled' : '')
   }), /*#__PURE__*/_react.default.createElement("div", {
-    ref: carouselContentRef,
     className: "test--results__carrousel"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "test--results__carrousel--list test--results__centered",
     style: {
-      transform: transform
+      position: 'relative',
+      height: '100%',
+      overflow: 'hidden'
     }
-  }, filteredRewardsUnified.map(function (reward, i) {
-    var group = indicators.find(function (g) {
-      return g.type === reward.type;
-    });
-
-    if (!group) {
-      return null;
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: carouselRef,
+    style: {
+      display: 'flex',
+      position: 'absolute',
+      left: rewardsUnified.length >= displayingItems && leftAmount !== null && rightAmount == null ? "".concat(leftAmount, "px") : 'auto',
+      right: rightAmount !== null ? "".concat(rightAmount) : 'auto',
+      transition: 'all .2s linear'
     }
-
-    var indicator = group.records.find(function (r) {
-      return r.id === reward.id;
+  }, rewardsUnified && Object.values(rewardsUnified).map(function (reward) {
+    return /*#__PURE__*/_react.default.createElement(_RewardItem.default, {
+      key: reward.id,
+      ref: function ref(node) {
+        if (node) {
+          var computedStyle = window.getComputedStyle(node);
+          var marginString = computedStyle.marginLeft.split('px')[0];
+          var marginLeft = parseInt(marginString, 10);
+          rewardsSize.current[reward.id] = node.clientWidth + marginLeft * 2;
+        }
+      },
+      emitEvent: emitEvent,
+      elementReward: reward,
+      getIcon: function getIcon(icon) {
+        return _getIcon(icon);
+      }
     });
-
-    if (!indicator) {
-      return null;
-    }
-
-    return /*#__PURE__*/_react.default.createElement("div", {
-      key: indicator.name,
-      ref: itemRef,
-      className: "test--results__carrousel--item"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "test--rewards__icons"
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: indicator.icon
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      className: "test--rewards__indicator\n                  ".concat(reward.points > 0 ? 'success' : 'failed')
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "".concat(reward.points > 0 ? 'icon-up' : 'icon-down')
-    }))), /*#__PURE__*/_react.default.createElement("span", {
-      className: "test--rewards__text"
-    }, /*#__PURE__*/_react.default.createElement("b", null, reward.points > 0 ? '+' : '', reward.points), ":", indicator.name));
-  }))), /*#__PURE__*/_react.default.createElement("span", {
+  })))), /*#__PURE__*/_react.default.createElement("span", {
     onClick: onClickNext,
-    className: "icon-next ".concat(filteredRewardsUnified.length < 4 ? 'visibility--hidden' : '', " ").concat(itemsLeft <= 1 ? 'disabled' : '')
+    className: "icon-next ".concat(rewardsUnified.length <= displayingItems ? 'visibility--hidden' : '', " ").concat(offset + displayingItems >= totalItems ? 'disabled' : '')
   }));
 };
 
-Rewards.defaultProps = {
-  rewards: [],
-  indicators: [],
-  addPoints: function addPoints() {}
+RewardsComponent.propTypes = {
+  nodeId: _propTypes.default.string,
+  context: _propTypes.default.shape({}),
+  rewards: _propTypes.default.arrayOf({})
 };
-Rewards.propTypes = {
-  indicators: _propTypes.default.arrayOf(_propTypes.default.shape({})),
-  rewards: _propTypes.default.arrayOf(_propTypes.default.shape({
-    type: _propTypes.default.string,
-    id: _propTypes.default.string,
-    name: _propTypes.default.string,
-    points: _propTypes.default.number
-  })),
-  addPoints: _propTypes.default.func
+RewardsComponent.defaultProps = {
+  nodeId: 0,
+  context: {},
+  rewards: []
 };
-var _default = Rewards;
+var _default = RewardsComponent;
 exports.default = _default;

package/dist/components/rewards-component/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _RewardsComponent = _interopRequireDefault(require("./components/RewardsComponent"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _RewardsComponent.default;
+exports.default = _default;

package/dist/components/rewards-component/mocks/mockForStory.js

@@ -0,0 +1,264 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mockProps5 = exports.mockProps4 = exports.mockProps3 = exports.mockProps2 = exports.mockProps1 = void 0;
+
+var emitEvent = function emitEvent(_ref) {
+  var type = _ref.type,
+      payload = _ref.payload;
+
+  if (type === 'translate') {
+    return payload;
+  }
+
+  if (type === 'loadIndicators') {
+    return {
+      score: [{
+        color: '#4e469e',
+        description: 'description_0_dY5ms0vf',
+        description_labelId: 'description_0_dY5ms0vf',
+        icon: 'font-indicator-bolsa',
+        id: 'ki4qrkam',
+        name: 'Indicator1',
+        name_labelId: 'name_0_dY5ms9T1',
+        points: 295,
+        type: 'score'
+      }, {
+        color: '#4e469e',
+        description: 'description_0_dY5ms0vf',
+        description_labelId: 'description_0_dY5ms0vf',
+        icon: 'font-indicator-bolsa',
+        id: 'ki4qrop',
+        name: 'Indicator1',
+        name_labelId: 'name_0_dY5ms9T1',
+        points: 300,
+        type: 'score'
+      }, {
+        color: '#4e469e',
+        description: 'description_0_dY5ms0vf',
+        description_labelId: 'description_0_dY5ms0vf',
+        icon: 'font-indicator-bolsa',
+        id: 'ki4qiuyi',
+        name: 'Indicator1',
+        name_labelId: 'name_0_dY5ms9T1',
+        points: 300,
+        type: 'score'
+      }],
+      skill: [{
+        color: '#559cac',
+        description: 'description_0_dY5msi7o',
+        description_labelId: 'description_0_dY5msi7o',
+        icon: 'font-indicator-microfono-2',
+        id: 'ki4qrkas',
+        name: 'competency2',
+        name_labelId: 'name_0_dY5mslgV',
+        points: 295,
+        type: 'skill'
+      }, {
+        color: '#559cac',
+        description: 'description_0_dY5msi7o',
+        description_labelId: 'description_0_dY5msi7o',
+        icon: 'font-indicator-microfono-2',
+        id: 'ki4qropi',
+        name: 'competency2',
+        name_labelId: 'name_0_dY5mslgV',
+        points: 295,
+        type: 'skill'
+      }],
+      grade: undefined
+    };
+  }
+};
+
+var mockProps1 = {
+  emitEvent: emitEvent,
+  rewards: [{
+    id: 'ki4qrkam',
+    name: 'Power',
+    points: -22,
+    type: 'score'
+  }]
+};
+exports.mockProps1 = mockProps1;
+var mockProps2 = {
+  emitEvent: emitEvent,
+  rewards: [{
+    id: 'ki4qrkam',
+    name: 'Power',
+    points: -22,
+    type: 'score'
+  }, {
+    id: 'ki4qrop',
+    name: 'BananaSplit3jndflgndjkfh',
+    points: -299453433433434,
+    type: 'score'
+  }]
+};
+exports.mockProps2 = mockProps2;
+var mockProps3 = {
+  emitEvent: emitEvent,
+  rewards: [{
+    id: 'ki4qrkam',
+    name: 'Power',
+    points: -22,
+    type: 'score'
+  }, {
+    id: 'ki4qrop',
+    name: 'BananaSplit3jndflgndjkfh',
+    points: -299453433433434,
+    type: 'score'
+  }, {
+    id: 'ki4qiuyi',
+    name: 'BananaSplit4',
+    points: 87,
+    type: 'score'
+  }]
+};
+exports.mockProps3 = mockProps3;
+var mockProps4 = {
+  emitEvent: emitEvent,
+  rewards: [{
+    id: 'ki4qrkam',
+    name: 'Power',
+    points: -22,
+    type: 'score'
+  }, {
+    id: 'ki4qrkam',
+    name: 'BananaSplit',
+    points: -2,
+    type: 'score'
+  }, {
+    id: 'ki4qrkam',
+    name: 'BananaSplit2',
+    points: -2,
+    type: 'score'
+  }, {
+    id: 'ki4qrop',
+    name: 'BananaSplit3jndflgndjkfh',
+    points: -299453433433434,
+    type: 'score'
+  }, {
+    id: 'ki4qiuyi',
+    name: 'BananaSplit4',
+    points: 87,
+    type: 'score'
+  }, {
+    id: 'ki4qrkam',
+    name: 'BananaSplit5',
+    points: 552,
+    type: 'score'
+  }, {
+    id: 'ki4qrkas',
+    name: 'BananaSplit46',
+    points: 87,
+    type: 'skill'
+  }, {
+    id: 'ki4qrkas',
+    name: 'BananaSplit57',
+    points: 552,
+    type: 'skill'
+  }, {
+    id: 'ki4qrkas',
+    name: 'BananaSplit8',
+    points: 87,
+    type: 'skill'
+  }, {
+    id: 'ki4qrkas',
+    name: 'BananaSplit9',
+    points: 552,
+    type: 'skill'
+  }, {
+    id: 'ki4qrkas',
+    name: 'BananaSplit10',
+    points: 87,
+    type: 'skill'
+  }, {
+    id: 'ki4qrkas',
+    name: 'BananaSplit11',
+    points: 552,
+    type: 'skill'
+  }, {
+    id: 'ki4qrkas',
+    name: 'BananaSplit12',
+    points: 87,
+    type: 'skill'
+  }]
+};
+exports.mockProps4 = mockProps4;
+var mockProps5 = {
+  emitEvent: emitEvent,
+  rewards: [{
+    id: 'ki4qrkam',
+    name: 'Power',
+    points: -22,
+    type: 'score'
+  }, {
+    id: 'ki4qrkam',
+    name: 'BananaSplit',
+    points: -2,
+    type: 'score'
+  }, {
+    id: 'ki4qrkam',
+    name: 'BananaSplit2',
+    points: -2,
+    type: 'score'
+  }, {
+    id: 'ki4qrop',
+    name: 'BananaSplit3jndflgndjkfh',
+    points: -299453433433434,
+    type: 'score'
+  }, {
+    id: 'ki4qiuyi',
+    name: 'BananaSplit4',
+    points: 87,
+    type: 'score'
+  }, {
+    id: 'ki4qrkam',
+    name: 'BananaSplit5',
+    points: 552,
+    type: 'score'
+  }, {
+    id: 'ki4qrkas',
+    name: 'BananaSplit46',
+    points: 87,
+    type: 'skill'
+  }, {
+    id: 'ki4qrkas',
+    name: 'BananaSplit57',
+    points: 552,
+    type: 'skill'
+  }, {
+    id: 'ki4qrkas',
+    name: 'BananaSplit8',
+    points: 87,
+    type: 'skill'
+  }, {
+    id: 'ki4qrkas',
+    name: 'BananaSplit9',
+    points: 552,
+    type: 'skill'
+  }, {
+    id: 'ki4qrkas',
+    name: 'BananaSplit10',
+    points: 87,
+    type: 'skill'
+  }, {
+    id: 'ki4qrkas',
+    name: 'BananaSplit11',
+    points: 552,
+    type: 'skill'
+  }, {
+    id: 'ki4qrkas',
+    name: 'BananaSplit12',
+    points: 87,
+    type: 'skill'
+  }, {
+    id: 'ki4qropi',
+    name: 'BananaSplit13',
+    points: 552,
+    type: 'skill'
+  }]
+};
+exports.mockProps5 = mockProps5;

package/dist/components/survey-component/components/ApplicableBox.js

@@ -0,0 +1,73 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { 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; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var OPTIONS = ['yes', 'no'];
+var LETTERS = ['A', 'B'];
+
+var ApplicableBox = function ApplicableBox(_ref) {
+  var setSurveyData = _ref.setSurveyData,
+      survey = _ref.survey,
+      id = _ref.id,
+      enable = _ref.enable,
+      translate = _ref.translate;
+
+  var _useState = (0, _react.useState)(),
+      _useState2 = _slicedToArray(_useState, 2),
+      optionSelected = _useState2[0],
+      selectOption = _useState2[1];
+
+  var select = function select(option) {
+    enable();
+    selectOption(option);
+    setSurveyData(_objectSpread(_objectSpread({}, survey), {}, _defineProperty({}, id, option)));
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "survey--page__item"
+  }, OPTIONS.map(function (option, i) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: option,
+      onClick: function onClick() {
+        return select(option);
+      },
+      className: "survey--response__item ".concat(optionSelected === option ? 'selected' : '')
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "survey--response__index"
+    }, LETTERS[i]), /*#__PURE__*/_react.default.createElement("div", {
+      className: "survey--response__text"
+    }, translate("survey.".concat(option))));
+  }));
+};
+
+var _default = ApplicableBox;
+exports.default = _default;