@coorpacademy/components 11.11.1-alpha.0 → 11.11.1-alpha.3

package/es/atom/input-search/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-search/index.js"],"names":[],"mappings":";AAYA,iDA+CC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-search/index.js"],"names":[],"mappings":";AAYA,iDAgDC"}

package/es/atom/input-search/index.js

@@ -39,6 +39,7 @@ const Search = props => {
     name: "search",
     id: "search",
     placeholder: placeholder,
+    title: placeholder,
     value: value,
     onInput: handleChange,
     onFocus: onFocus,

package/es/atom/input-search/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","classnames","NovaCompositionCoorpacademySearchThin","CMSearchIcon","NovaCompositionCoorpacademySearch","SearchIcon","NovaSolidStatusClose","CloseIcon","Provider","style","Search","props","value","placeholder","onChange","onClear","onFocus","onBlur","theme","handleChange","e","target","cmStyle","coorpmanager","isDefaultTheme","wrapperSearch","searchIcon","title","noValue","search","clearIcon","contextTypes","skin","childContextTypes","propTypes","string","isRequired","func","oneOf"],"sources":["../../../src/atom/input-search/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {\n  NovaCompositionCoorpacademySearchThin as CMSearchIcon,\n  NovaCompositionCoorpacademySearch as SearchIcon,\n  NovaSolidStatusClose as CloseIcon\n} from '@coorpacademy/nova-icons';\nimport {noop, isEmpty} from 'lodash/fp';\nimport Provider from '../provider';\nimport style from './style.css';\n\nconst Search = props => {\n  const {\n    value,\n    placeholder,\n    onChange = noop,\n    onClear = noop,\n    onFocus,\n    onBlur,\n    theme = 'default'\n  } = props;\n  const handleChange = useMemo(() => e => onChange(e.target.value), [onChange]);\n  const cmStyle = classnames(style.coorpmanager);\n  const isDefaultTheme = theme === 'default';\n\n  return (\n    <div className={isDefaultTheme ? style.wrapperSearch : cmStyle}>\n      <label htmlFor=\"search\" title={placeholder}>\n        {!isDefaultTheme ? (\n          <CMSearchIcon className={style.searchIcon} />\n        ) : (\n          <SearchIcon className={style.searchIcon} />\n        )}\n        {!isDefaultTheme ? (\n          <span className={classnames(style.title, isEmpty(value) && style.noValue)}>\n            {placeholder}\n          </span>\n        ) : null}\n      </label>\n      <input\n        data-name=\"search-input\"\n        className={style.search}\n        aria-label={placeholder}\n        type=\"text\"\n        name=\"search\"\n        id=\"search\"\n        placeholder={placeholder}\n        value={value}\n        onInput={handleChange}\n        onFocus={onFocus}\n        onChange={noop}\n        onBlur={onBlur}\n      />\n      {value && !isDefaultTheme ? (\n        <CloseIcon onClick={onClear} className={style.clearIcon} />\n      ) : null}\n    </div>\n  );\n};\n\nSearch.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nSearch.propTypes = {\n  value: PropTypes.string,\n  placeholder: PropTypes.string.isRequired,\n  onChange: PropTypes.func,\n  onClear: PropTypes.func,\n  onFocus: PropTypes.func,\n  onBlur: PropTypes.func,\n  theme: PropTypes.oneOf(['default', 'coorpmanager'])\n};\n\nexport default Search;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,OAAf,QAA6B,OAA7B;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SACEC,qCAAqC,IAAIC,YAD3C,EAEEC,iCAAiC,IAAIC,UAFvC,EAGEC,oBAAoB,IAAIC,SAH1B,QAIO,0BAJP;AAMA,OAAOC,QAAP,MAAqB,aAArB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,MAAM,GAAGC,KAAK,IAAI;EACtB,MAAM;IACJC,KADI;IAEJC,WAFI;IAGJC,QAAQ,QAHJ;IAIJC,OAAO,QAJH;IAKJC,OALI;IAMJC,MANI;IAOJC,KAAK,GAAG;EAPJ,IAQFP,KARJ;EASA,MAAMQ,YAAY,GAAGpB,OAAO,CAAC,MAAMqB,CAAC,IAAIN,QAAQ,CAACM,CAAC,CAACC,MAAF,CAAST,KAAV,CAApB,EAAsC,CAACE,QAAD,CAAtC,CAA5B;EACA,MAAMQ,OAAO,GAAGrB,UAAU,CAACQ,KAAK,CAACc,YAAP,CAA1B;EACA,MAAMC,cAAc,GAAGN,KAAK,KAAK,SAAjC;EAEA,oBACE;IAAK,SAAS,EAAEM,cAAc,GAAGf,KAAK,CAACgB,aAAT,GAAyBH;EAAvD,gBACE;IAAO,OAAO,EAAC,QAAf;IAAwB,KAAK,EAAET;EAA/B,GACG,CAACW,cAAD,gBACC,oBAAC,YAAD;IAAc,SAAS,EAAEf,KAAK,CAACiB;EAA/B,EADD,gBAGC,oBAAC,UAAD;IAAY,SAAS,EAAEjB,KAAK,CAACiB;EAA7B,EAJJ,EAMG,CAACF,cAAD,gBACC;IAAM,SAAS,EAAEvB,UAAU,CAACQ,KAAK,CAACkB,KAAP,EAAc,SAAQf,KAAR,KAAkBH,KAAK,CAACmB,OAAtC;EAA3B,GACGf,WADH,CADD,GAIG,IAVN,CADF,eAaE;IACE,aAAU,cADZ;IAEE,SAAS,EAAEJ,KAAK,CAACoB,MAFnB;IAGE,cAAYhB,WAHd;IAIE,IAAI,EAAC,MAJP;IAKE,IAAI,EAAC,QALP;IAME,EAAE,EAAC,QANL;IAOE,WAAW,EAAEA,WAPf;IAQE,KAAK,EAAED,KART;IASE,OAAO,EAAEO,YATX;IAUE,OAAO,EAAEH,OAVX;IAWE,QAAQ,OAXV;IAYE,MAAM,EAAEC;EAZV,EAbF,EA2BGL,KAAK,IAAI,CAACY,cAAV,gBACC,oBAAC,SAAD;IAAW,OAAO,EAAET,OAApB;IAA6B,SAAS,EAAEN,KAAK,CAACqB;EAA9C,EADD,GAEG,IA7BN,CADF;AAiCD,CA/CD;;AAiDApB,MAAM,CAACqB,YAAP,GAAsB;EACpBC,IAAI,EAAExB,QAAQ,CAACyB,iBAAT,CAA2BD;AADb,CAAtB;AAIAtB,MAAM,CAACwB,SAAP,2CAAmB;EACjBtB,KAAK,EAAEZ,SAAS,CAACmC,MADA;EAEjBtB,WAAW,EAAEb,SAAS,CAACmC,MAAV,CAAiBC,UAFb;EAGjBtB,QAAQ,EAAEd,SAAS,CAACqC,IAHH;EAIjBtB,OAAO,EAAEf,SAAS,CAACqC,IAJF;EAKjBrB,OAAO,EAAEhB,SAAS,CAACqC,IALF;EAMjBpB,MAAM,EAAEjB,SAAS,CAACqC,IAND;EAOjBnB,KAAK,EAAElB,SAAS,CAACsC,KAAV,CAAgB,CAAC,SAAD,EAAY,cAAZ,CAAhB;AAPU,CAAnB;AAUA,eAAe5B,MAAf"}
+{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","classnames","NovaCompositionCoorpacademySearchThin","CMSearchIcon","NovaCompositionCoorpacademySearch","SearchIcon","NovaSolidStatusClose","CloseIcon","Provider","style","Search","props","value","placeholder","onChange","onClear","onFocus","onBlur","theme","handleChange","e","target","cmStyle","coorpmanager","isDefaultTheme","wrapperSearch","searchIcon","title","noValue","search","clearIcon","contextTypes","skin","childContextTypes","propTypes","string","isRequired","func","oneOf"],"sources":["../../../src/atom/input-search/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {\n  NovaCompositionCoorpacademySearchThin as CMSearchIcon,\n  NovaCompositionCoorpacademySearch as SearchIcon,\n  NovaSolidStatusClose as CloseIcon\n} from '@coorpacademy/nova-icons';\nimport {noop, isEmpty} from 'lodash/fp';\nimport Provider from '../provider';\nimport style from './style.css';\n\nconst Search = props => {\n  const {\n    value,\n    placeholder,\n    onChange = noop,\n    onClear = noop,\n    onFocus,\n    onBlur,\n    theme = 'default'\n  } = props;\n  const handleChange = useMemo(() => e => onChange(e.target.value), [onChange]);\n  const cmStyle = classnames(style.coorpmanager);\n  const isDefaultTheme = theme === 'default';\n\n  return (\n    <div className={isDefaultTheme ? style.wrapperSearch : cmStyle}>\n      <label htmlFor=\"search\" title={placeholder}>\n        {!isDefaultTheme ? (\n          <CMSearchIcon className={style.searchIcon} />\n        ) : (\n          <SearchIcon className={style.searchIcon} />\n        )}\n        {!isDefaultTheme ? (\n          <span className={classnames(style.title, isEmpty(value) && style.noValue)}>\n            {placeholder}\n          </span>\n        ) : null}\n      </label>\n      <input\n        data-name=\"search-input\"\n        className={style.search}\n        aria-label={placeholder}\n        type=\"text\"\n        name=\"search\"\n        id=\"search\"\n        placeholder={placeholder}\n        title={placeholder}\n        value={value}\n        onInput={handleChange}\n        onFocus={onFocus}\n        onChange={noop}\n        onBlur={onBlur}\n      />\n      {value && !isDefaultTheme ? (\n        <CloseIcon onClick={onClear} className={style.clearIcon} />\n      ) : null}\n    </div>\n  );\n};\n\nSearch.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nSearch.propTypes = {\n  value: PropTypes.string,\n  placeholder: PropTypes.string.isRequired,\n  onChange: PropTypes.func,\n  onClear: PropTypes.func,\n  onFocus: PropTypes.func,\n  onBlur: PropTypes.func,\n  theme: PropTypes.oneOf(['default', 'coorpmanager'])\n};\n\nexport default Search;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,OAAf,QAA6B,OAA7B;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SACEC,qCAAqC,IAAIC,YAD3C,EAEEC,iCAAiC,IAAIC,UAFvC,EAGEC,oBAAoB,IAAIC,SAH1B,QAIO,0BAJP;AAMA,OAAOC,QAAP,MAAqB,aAArB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,MAAM,GAAGC,KAAK,IAAI;EACtB,MAAM;IACJC,KADI;IAEJC,WAFI;IAGJC,QAAQ,QAHJ;IAIJC,OAAO,QAJH;IAKJC,OALI;IAMJC,MANI;IAOJC,KAAK,GAAG;EAPJ,IAQFP,KARJ;EASA,MAAMQ,YAAY,GAAGpB,OAAO,CAAC,MAAMqB,CAAC,IAAIN,QAAQ,CAACM,CAAC,CAACC,MAAF,CAAST,KAAV,CAApB,EAAsC,CAACE,QAAD,CAAtC,CAA5B;EACA,MAAMQ,OAAO,GAAGrB,UAAU,CAACQ,KAAK,CAACc,YAAP,CAA1B;EACA,MAAMC,cAAc,GAAGN,KAAK,KAAK,SAAjC;EAEA,oBACE;IAAK,SAAS,EAAEM,cAAc,GAAGf,KAAK,CAACgB,aAAT,GAAyBH;EAAvD,gBACE;IAAO,OAAO,EAAC,QAAf;IAAwB,KAAK,EAAET;EAA/B,GACG,CAACW,cAAD,gBACC,oBAAC,YAAD;IAAc,SAAS,EAAEf,KAAK,CAACiB;EAA/B,EADD,gBAGC,oBAAC,UAAD;IAAY,SAAS,EAAEjB,KAAK,CAACiB;EAA7B,EAJJ,EAMG,CAACF,cAAD,gBACC;IAAM,SAAS,EAAEvB,UAAU,CAACQ,KAAK,CAACkB,KAAP,EAAc,SAAQf,KAAR,KAAkBH,KAAK,CAACmB,OAAtC;EAA3B,GACGf,WADH,CADD,GAIG,IAVN,CADF,eAaE;IACE,aAAU,cADZ;IAEE,SAAS,EAAEJ,KAAK,CAACoB,MAFnB;IAGE,cAAYhB,WAHd;IAIE,IAAI,EAAC,MAJP;IAKE,IAAI,EAAC,QALP;IAME,EAAE,EAAC,QANL;IAOE,WAAW,EAAEA,WAPf;IAQE,KAAK,EAAEA,WART;IASE,KAAK,EAAED,KATT;IAUE,OAAO,EAAEO,YAVX;IAWE,OAAO,EAAEH,OAXX;IAYE,QAAQ,OAZV;IAaE,MAAM,EAAEC;EAbV,EAbF,EA4BGL,KAAK,IAAI,CAACY,cAAV,gBACC,oBAAC,SAAD;IAAW,OAAO,EAAET,OAApB;IAA6B,SAAS,EAAEN,KAAK,CAACqB;EAA9C,EADD,GAEG,IA9BN,CADF;AAkCD,CAhDD;;AAkDApB,MAAM,CAACqB,YAAP,GAAsB;EACpBC,IAAI,EAAExB,QAAQ,CAACyB,iBAAT,CAA2BD;AADb,CAAtB;AAIAtB,MAAM,CAACwB,SAAP,2CAAmB;EACjBtB,KAAK,EAAEZ,SAAS,CAACmC,MADA;EAEjBtB,WAAW,EAAEb,SAAS,CAACmC,MAAV,CAAiBC,UAFb;EAGjBtB,QAAQ,EAAEd,SAAS,CAACqC,IAHH;EAIjBtB,OAAO,EAAEf,SAAS,CAACqC,IAJF;EAKjBrB,OAAO,EAAEhB,SAAS,CAACqC,IALF;EAMjBpB,MAAM,EAAEjB,SAAS,CAACqC,IAND;EAOjBnB,KAAK,EAAElB,SAAS,CAACsC,KAAV,CAAgB,CAAC,SAAD,EAAY,cAAZ,CAAhB;AAPU,CAAnB;AAUA,eAAe5B,MAAf"}

package/es/atom/input-switch/index.d.ts

@@ -9,6 +9,8 @@ declare namespace InputSwitch {
         disabled: PropTypes.Requireable<boolean>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         description: PropTypes.Requireable<string>;
+        'aria-labelledby': PropTypes.Requireable<string>;
+        'aria-label': PropTypes.Requireable<string>;
         modified: PropTypes.Requireable<boolean>;
         titlePosition: PropTypes.Requireable<string>;
         theme: PropTypes.Requireable<string>;

package/es/atom/input-switch/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-switch/index.js"],"names":[],"mappings":";AAMA,sDAuEC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-switch/index.js"],"names":[],"mappings":";AAMA,sDAgFC"}

package/es/atom/input-switch/index.js

@@ -1,5 +1,8 @@
 import _uniqueId from "lodash/fp/uniqueId";
 import _noop from "lodash/fp/noop";
+
+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 PropTypes from 'prop-types';
 import getClassState from '../../util/get-class-state';
@@ -19,7 +22,9 @@ const InputSwitch = props => {
     titlePosition = 'left',
     details = '',
     requiredSelection = false,
-    'data-name': dataName
+    'data-name': dataName,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-label': ariaLabel
   } = props;
 
   const idSwitch = id || _uniqueId('input-switch-');
@@ -27,8 +32,9 @@ const InputSwitch = props => {
   const isDisabled = disabled ? 'disabled' : '';
   const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);
   const titleView = title ? /*#__PURE__*/React.createElement("span", {
+    id: `title-view-${dataName}`,
     className: style.title
-  }, `${title} `) : null;
+  }, `${title} `, ' ') : null;
   const descriptionView = description ? /*#__PURE__*/React.createElement("div", {
     className: style.description
   }, description) : null;
@@ -63,13 +69,17 @@ const InputSwitch = props => {
   return /*#__PURE__*/React.createElement("div", {
     className: className,
     "data-name": `switch-input-${theme}${dataName}`
-  }, titlePosition === 'left' ? /*#__PURE__*/React.createElement("div", {
-    id: `title-view-${dataName}`
-  }, titleView, " ") : null, /*#__PURE__*/React.createElement("div", {
+  }, titlePosition === 'left' ? titleView : null, /*#__PURE__*/React.createElement("div", {
     className: requiredSelection ? style.requiredSelection : null
   }, /*#__PURE__*/React.createElement("div", {
     className: style.btnSwitchContainer
-  }, /*#__PURE__*/React.createElement("input", {
+  }, /*#__PURE__*/React.createElement("input", _extends({}, ariaLabelledBy ? {
+    'aria-labelledby': ariaLabelledBy
+  } : {}, title ? {
+    'aria-labelledby': `title-view-${dataName}`
+  } : {}, ariaLabel && !ariaLabelledBy && !title ? {
+    'aria-label': ariaLabel
+  } : {}, {
     type: "checkbox",
     id: idSwitch,
     name: name,
@@ -77,16 +87,16 @@ const InputSwitch = props => {
     checked: value,
     disabled: isDisabled,
     className: style.checkbox,
-    "aria-labelledby": `title-view-${dataName}`
-  }), /*#__PURE__*/React.createElement("label", {
+    "aria-labelledby": ariaLabelledBy
+  })), /*#__PURE__*/React.createElement("label", {
     htmlFor: idSwitch,
     "data-name": "input-switch-label",
     tabIndex: 0
   }))), /*#__PURE__*/React.createElement("div", {
     className: !details ? style.alignedTextContainer : null
-  }, titlePosition === 'right' ? /*#__PURE__*/React.createElement("div", {
-    id: `title-view-${dataName}`
-  }, titleView, " ") : null, details ? /*#__PURE__*/React.createElement("div", {
+  }, titlePosition === 'right' ? {
+    titleView
+  } : null, details ? /*#__PURE__*/React.createElement("div", {
     className: style.detailsTxt
   }, details) : null), descriptionView);
 };
@@ -99,6 +109,8 @@ InputSwitch.propTypes = process.env.NODE_ENV !== "production" ? {
   disabled: PropTypes.bool,
   onChange: PropTypes.func,
   description: PropTypes.string,
+  'aria-labelledby': PropTypes.string,
+  'aria-label': PropTypes.string,
   modified: PropTypes.bool,
   titlePosition: PropTypes.oneOf(['right', 'left']),
   theme: PropTypes.oneOf(['default', 'coorpmanager', 'mooc']),

package/es/atom/input-switch/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","getClassState","style","InputSwitch","props","title","name","id","value","disabled","onChange","description","modified","theme","titlePosition","details","requiredSelection","dataName","idSwitch","isDisabled","handleChange","e","target","checked","titleView","descriptionView","getClass","defaultClass","coorpmanager","modifiedClass","coorpmanagerModified","partielUncheck","default","className","btnSwitchContainer","checkbox","alignedTextContainer","detailsTxt","propTypes","string","bool","func","oneOf"],"sources":["../../../src/atom/input-switch/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, uniqueId} from 'lodash/fp';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst InputSwitch = props => {\n  const {\n    title,\n    name,\n    id,\n    value,\n    disabled,\n    onChange = noop,\n    description,\n    modified = false,\n    theme = 'default',\n    titlePosition = 'left',\n    details = '',\n    requiredSelection = false,\n    'data-name': dataName\n  } = props;\n\n  const idSwitch = id || uniqueId('input-switch-');\n  const isDisabled = disabled ? 'disabled' : '';\n  const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);\n\n  const titleView = title ? <span className={style.title}>{`${title} `}</span> : null;\n\n  const descriptionView = description ? (\n    <div className={style.description}>{description}</div>\n  ) : null;\n\n  const getClass = () => {\n    switch (theme) {\n      case 'coorpmanager':\n        return {\n          defaultClass: style.coorpmanager,\n          modifiedClass: style.coorpmanagerModified\n        };\n      case 'mooc':\n        return {\n          defaultClass: style.partielUncheck,\n          modifiedClass: style.coorpmanagerModified\n        };\n      default:\n        return {defaultClass: style.default, modifiedClass: style.modified};\n    }\n  };\n  const {defaultClass, modifiedClass} = getClass();\n  const className = getClassState(defaultClass, modifiedClass, null, modified);\n\n  return (\n    <div className={className} data-name={`switch-input-${theme}${dataName}`}>\n      {titlePosition === 'left' ? <div id={`title-view-${dataName}`}>{titleView} </div> : null}\n      <div className={requiredSelection ? style.requiredSelection : null}>\n        <div className={style.btnSwitchContainer}>\n          <input\n            type=\"checkbox\"\n            id={idSwitch}\n            name={name}\n            onChange={handleChange}\n            checked={value}\n            disabled={isDisabled}\n            className={style.checkbox}\n            aria-labelledby={`title-view-${dataName}`}\n          />\n          <label htmlFor={idSwitch} data-name=\"input-switch-label\" tabIndex={0} />\n        </div>\n      </div>\n      <div className={!details ? style.alignedTextContainer : null}>\n        {titlePosition === 'right' ? <div id={`title-view-${dataName}`}>{titleView} </div> : null}\n        {details ? <div className={style.detailsTxt}>{details}</div> : null}\n      </div>\n      {descriptionView}\n    </div>\n  );\n};\n\nInputSwitch.propTypes = {\n  title: PropTypes.string,\n  name: PropTypes.string,\n  id: PropTypes.string,\n  value: PropTypes.bool,\n  disabled: PropTypes.bool,\n  onChange: PropTypes.func,\n  description: PropTypes.string,\n  modified: PropTypes.bool,\n  titlePosition: PropTypes.oneOf(['right', 'left']),\n  theme: PropTypes.oneOf(['default', 'coorpmanager', 'mooc']),\n  details: PropTypes.string,\n  'data-name': PropTypes.string,\n  requiredSelection: PropTypes.bool\n};\nexport default InputSwitch;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","getClassState","style","InputSwitch","props","title","name","id","value","disabled","onChange","description","modified","theme","titlePosition","details","requiredSelection","dataName","ariaLabelledBy","ariaLabel","idSwitch","isDisabled","handleChange","e","target","checked","titleView","descriptionView","getClass","defaultClass","coorpmanager","modifiedClass","coorpmanagerModified","partielUncheck","default","className","btnSwitchContainer","checkbox","alignedTextContainer","detailsTxt","propTypes","string","bool","func","oneOf"],"sources":["../../../src/atom/input-switch/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, uniqueId} from 'lodash/fp';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst InputSwitch = props => {\n  const {\n    title,\n    name,\n    id,\n    value,\n    disabled,\n    onChange = noop,\n    description,\n    modified = false,\n    theme = 'default',\n    titlePosition = 'left',\n    details = '',\n    requiredSelection = false,\n    'data-name': dataName,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-label': ariaLabel\n  } = props;\n\n  const idSwitch = id || uniqueId('input-switch-');\n  const isDisabled = disabled ? 'disabled' : '';\n  const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);\n\n  const titleView = title ? (\n    <span id={`title-view-${dataName}`} className={style.title}>\n      {`${title} `}{' '}\n    </span>\n  ) : null;\n\n  const descriptionView = description ? (\n    <div className={style.description}>{description}</div>\n  ) : null;\n\n  const getClass = () => {\n    switch (theme) {\n      case 'coorpmanager':\n        return {\n          defaultClass: style.coorpmanager,\n          modifiedClass: style.coorpmanagerModified\n        };\n      case 'mooc':\n        return {\n          defaultClass: style.partielUncheck,\n          modifiedClass: style.coorpmanagerModified\n        };\n      default:\n        return {defaultClass: style.default, modifiedClass: style.modified};\n    }\n  };\n  const {defaultClass, modifiedClass} = getClass();\n  const className = getClassState(defaultClass, modifiedClass, null, modified);\n\n  return (\n    <div className={className} data-name={`switch-input-${theme}${dataName}`}>\n      {titlePosition === 'left' ? titleView : null}\n      <div className={requiredSelection ? style.requiredSelection : null}>\n        <div className={style.btnSwitchContainer}>\n          <input\n            {...(ariaLabelledBy ? {'aria-labelledby': ariaLabelledBy} : {})}\n            {...(title ? {'aria-labelledby': `title-view-${dataName}`} : {})}\n            {...(ariaLabel && !ariaLabelledBy && !title ? {'aria-label': ariaLabel} : {})}\n            type=\"checkbox\"\n            id={idSwitch}\n            name={name}\n            onChange={handleChange}\n            checked={value}\n            disabled={isDisabled}\n            className={style.checkbox}\n            aria-labelledby={ariaLabelledBy}\n          />\n          <label htmlFor={idSwitch} data-name=\"input-switch-label\" tabIndex={0} />\n        </div>\n      </div>\n      <div className={!details ? style.alignedTextContainer : null}>\n        {titlePosition === 'right' ? {titleView} : null}\n        {details ? <div className={style.detailsTxt}>{details}</div> : null}\n      </div>\n      {descriptionView}\n    </div>\n  );\n};\n\nInputSwitch.propTypes = {\n  title: PropTypes.string,\n  name: PropTypes.string,\n  id: PropTypes.string,\n  value: PropTypes.bool,\n  disabled: PropTypes.bool,\n  onChange: PropTypes.func,\n  description: PropTypes.string,\n  'aria-labelledby': PropTypes.string,\n  'aria-label': PropTypes.string,\n  modified: PropTypes.bool,\n  titlePosition: PropTypes.oneOf(['right', 'left']),\n  theme: PropTypes.oneOf(['default', 'coorpmanager', 'mooc']),\n  details: PropTypes.string,\n  'data-name': PropTypes.string,\n  requiredSelection: PropTypes.bool\n};\nexport default InputSwitch;\n"],"mappings":"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"}

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

@@ -69,6 +69,7 @@ declare namespace Select {
         modified: PropTypes.Requireable<boolean>;
         error: PropTypes.Requireable<boolean>;
         'aria-label': PropTypes.Requireable<string>;
+        'aria-labelledby': PropTypes.Requireable<string>;
     };
 }
 //# sourceMappingURL=index.d.ts.map

package/es/atom/select/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/select/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA2DA,qEAqLC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/select/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAuDA,qEAwLC"}

package/es/atom/select/index.js

@@ -38,9 +38,7 @@ const ArrowView = ({
   arrowClass,
   arrowColor
 }) => {
-  const props = useMemo(() => _extends({}, ariaLabel & {
-    'aria-label': ariaLabel
-  }, arrowColor & {
+  const props = useMemo(() => _extends({}, arrowColor & {
     color: arrowColor
   }, {
     className: arrowClass
@@ -71,7 +69,8 @@ const Select = (props, legacyContext) => {
     modified = false,
     error = false,
     title: propTitle,
-    'aria-label': ariaLabel
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy
   } = props;
   const skin = GetSkinFromContext(legacyContext);
   const title = useMemo(() => propTitle ? `${propTitle}${required ? '*' : ''}` : null, [propTitle, required]);
@@ -146,10 +145,15 @@ const Select = (props, legacyContext) => {
     ariaLabel: ariaLabel,
     arrowClass: shouldUseSkinFontColor ? style.selectedArrow : style.arrow,
     arrowColor: isThemeOneOfQuestionTemplateOrPlayer ? arrowColor : black
-  }), /*#__PURE__*/React.createElement("select", {
+  }), /*#__PURE__*/React.createElement("select", _extends({}, ariaLabelledBy ? {
+    'aria-labelledby': ariaLabelledBy
+  } : {}, ariaLabel && !ariaLabelledBy ? {
+    'aria-label': ariaLabel
+  } : {}, ariaLabel ? {
+    title: ariaLabel
+  } : {}, {
     "data-name": "native-select",
     className: style.selectBox,
-    title: selectedLabel,
     name: name,
     onChange: handleChange,
     value: selected,
@@ -162,7 +166,7 @@ const Select = (props, legacyContext) => {
     ,
     onMouseLeave: handleSelectOnBlur,
     "data-testid": "native-select"
-  }, optionList)), /*#__PURE__*/React.createElement("div", {
+  }), optionList)), /*#__PURE__*/React.createElement("div", {
     className: style.description
   }, description));
 };
@@ -195,7 +199,8 @@ Select.propTypes = process.env.NODE_ENV !== "production" ? {
   optgroups: PropTypes.arrayOf(PropTypes.shape(SelectOptionGroupPropTypes)),
   modified: PropTypes.bool,
   error: PropTypes.bool,
-  'aria-label': PropTypes.string
+  'aria-label': PropTypes.string,
+  'aria-labelledby': PropTypes.string
 } : {};
 export default Select;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useMemo","useState","PropTypes","classnames","concat","filter","find","flatMapDeep","get","getOr","includes","isEmpty","keys","map","size","NovaCompositionNavigationArrowDown","ArrowDown","NovaCompositionNavigationArrowTop","ArrowUp","Provider","GetSkinFromContext","getClassState","style","themeStyle","invalid","header","mooc","question","sort","thematiques","player","template","coorpmanager","ArrowView","shouldRender","isArrowUp","ariaLabel","arrowClass","arrowColor","props","color","className","Select","legacyContext","name","options","optgroups","borderClassName","onChange","multiple","disabled","required","description","theme","modified","error","title","propTitle","skin","setIsArrowUp","handleSelectOnFocus","handleSelectOnBlur","selectOption","option","index","value","optionList","optgroup","label","i","titleView","selected","selectedLabel","isSelectedInValidOption","validOption","handleChange","e","target","selectedOptions","black","isThemeOneOfQuestionTemplateOrPlayer","shouldUseSkinFontColor","undefined","behaviorClassName","default","composedClassName","unselected","labelSize","isLongLabel","selectWrapper","selectSpan","noLabelCommon","longLabel","selectedArrow","arrow","selectBox","SelectOptionPropTypes","string","isRequired","oneOfType","number","bool","SelectOptionGroupPropTypes","arrayOf","shape","contextTypes","childContextTypes","propTypes","func","oneOf"],"sources":["../../../src/atom/select/index.js"],"sourcesContent":["import React, {useCallback, useMemo, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport concat from 'lodash/fp/concat';\nimport filter from 'lodash/fp/filter';\nimport find from 'lodash/fp/find';\nimport flatMapDeep from 'lodash/fp/flatMapDeep';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport includes from 'lodash/fp/includes';\nimport isEmpty from 'lodash/fp/isEmpty';\nimport keys from 'lodash/fp/keys';\nimport map from 'lodash/fp/map';\nimport size from 'lodash/fp/size';\nimport {\n  NovaCompositionNavigationArrowDown as ArrowDown,\n  NovaCompositionNavigationArrowTop as ArrowUp\n} from '@coorpacademy/nova-icons';\nimport Provider, {GetSkinFromContext} from '../provider';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst themeStyle = {\n  filter: style.filter,\n  invalid: style.invalid,\n  header: style.header,\n  mooc: style.mooc,\n  question: style.question,\n  sort: style.sort,\n  thematiques: style.thematiques,\n  player: style.player,\n  template: style.template,\n  coorpmanager: null\n};\n\nconst ArrowView = ({shouldRender, isArrowUp, ariaLabel, arrowClass, arrowColor}) => {\n  const props = useMemo(\n    () => ({\n      ...(ariaLabel &\n        {\n          'aria-label': ariaLabel\n        }),\n      ...(arrowColor &\n        {\n          color: arrowColor\n        }),\n      className: arrowClass\n    }),\n    [ariaLabel, arrowClass, arrowColor]\n  );\n  if (shouldRender) {\n    return isArrowUp ? (\n      <ArrowUp {...props} data-testid=\"select-arrow-up-icon\" />\n    ) : (\n      <ArrowDown {...props} data-testid=\"select-arrow-down-icon\" />\n    );\n  } else return null;\n};\n\nconst Select = (props, legacyContext) => {\n  const {\n    name,\n    options = [],\n    optgroups = [],\n    className,\n    borderClassName,\n    onChange,\n    multiple = false,\n    disabled,\n    required,\n    description,\n    theme,\n    modified = false,\n    error = false,\n    title: propTitle,\n    'aria-label': ariaLabel\n  } = props;\n\n  const skin = GetSkinFromContext(legacyContext);\n  const title = useMemo(\n    () => (propTitle ? `${propTitle}${required ? '*' : ''}` : null),\n    [propTitle, required]\n  );\n\n  const [isArrowUp, setIsArrowUp] = useState(false);\n\n  const handleSelectOnFocus = useCallback(() => setIsArrowUp(true), []);\n  const handleSelectOnBlur = useCallback(() => setIsArrowUp(false), []);\n\n  const selectOption = (option, index) => {\n    return (\n      <option key={index} value={option.value} className={style.selectOption}>\n        {option.name}\n      </option>\n    );\n  };\n\n  const optionList = !isEmpty(options)\n    ? options.map((option, index) => selectOption(option, index))\n    : optgroups.map((optgroup, index) => {\n        return (\n          <optgroup key={index} label={optgroup.label}>\n            {optgroup.options && optgroup.options.map((option, i) => selectOption(option, i))}\n          </optgroup>\n        );\n      });\n\n  const titleView = title ? <span className={style.title}>{title} </span> : null;\n\n  const selected = useMemo(\n    () =>\n      multiple\n        ? map(get('value'), filter({selected: true}, options))\n        : get('value', find({selected: true}, concat(options, flatMapDeep('options', optgroups)))),\n    [multiple, options, optgroups]\n  );\n  const selectedLabel = useMemo(\n    () =>\n      multiple\n        ? map(get('name'), filter({selected: true}, options))\n        : get('name', find({selected: true}, concat(options, flatMapDeep('options', optgroups)))),\n    [multiple, options, optgroups]\n  );\n\n  const isSelectedInValidOption = useMemo(\n    () =>\n      theme === 'player' &&\n      getOr(false, 'name', find({validOption: false, selected: true}, options)),\n    [options, theme]\n  );\n\n  const handleChange = useMemo(\n    () =>\n      multiple\n        ? e => {\n            setIsArrowUp(false);\n            onChange(map(get('value'), e.target.selectedOptions));\n          }\n        : e => {\n            setIsArrowUp(false);\n            onChange(e.target.value);\n          },\n    [onChange, multiple]\n  );\n\n  const black = useMemo(() => getOr('#14171A', 'common.black', skin), [skin]);\n  const color = useMemo(() => getOr('#00B0FF', 'common.primary', skin), [skin]);\n  const isThemeOneOfQuestionTemplateOrPlayer = useMemo(\n    () => includes(theme, ['question', 'template', 'player']),\n    [theme]\n  );\n  const shouldUseSkinFontColor = useMemo(\n    () => !isSelectedInValidOption && selected && isThemeOneOfQuestionTemplateOrPlayer,\n    [isSelectedInValidOption, selected, isThemeOneOfQuestionTemplateOrPlayer]\n  );\n  const arrowColor = selected ? color : undefined;\n\n  const behaviorClassName = useMemo(\n    () => getClassState(style.default, style.modified, style.error, modified, error),\n    [error, modified]\n  );\n  const composedClassName = useMemo(\n    () =>\n      classnames(\n        theme && theme !== 'coorpmanager' ? themeStyle[theme] : behaviorClassName,\n        selected ? style.selected : style.unselected,\n        className\n      ),\n    [behaviorClassName, className, selected, theme]\n  );\n\n  const labelSize = useMemo(() => size(selectedLabel), [selectedLabel]);\n\n  const isLongLabel = useMemo(() => labelSize >= 65, [labelSize]);\n\n  return (\n    <div\n      className={classnames(\n        composedClassName,\n        theme === 'coorpmanager' ? style.coorpmanager : null\n      )}\n    >\n      <label\n        data-name=\"select-wrapper\"\n        style={{\n          ...(shouldUseSkinFontColor && {\n            color\n          })\n        }}\n        className={style.selectWrapper}\n      >\n        {titleView}\n        <span\n          data-name=\"select-span\"\n          className={classnames(\n            style.selectSpan,\n            includes(theme, ['player', 'invalid', 'question', 'thematiques', 'template'])\n              ? style.noLabelCommon\n              : null,\n            borderClassName,\n            isLongLabel ? style.longLabel : null\n          )}\n          style={{\n            ...(shouldUseSkinFontColor && {\n              color\n            })\n          }}\n        >\n          {selectedLabel}\n        </span>\n        <ArrowView\n          shouldRender={!multiple}\n          isArrowUp={isArrowUp}\n          ariaLabel={ariaLabel}\n          arrowClass={shouldUseSkinFontColor ? style.selectedArrow : style.arrow}\n          arrowColor={isThemeOneOfQuestionTemplateOrPlayer ? arrowColor : black}\n        />\n        <select\n          data-name=\"native-select\"\n          className={style.selectBox}\n          title={selectedLabel}\n          name={name}\n          onChange={handleChange}\n          value={selected}\n          multiple={multiple}\n          disabled={disabled}\n          onClick={handleSelectOnFocus}\n          onBlur={handleSelectOnBlur}\n          // onBlur does not handle completely an out of bounds click\n          // ex: select is Opened and a click is done outside, cancelling the select\n          // that doesn't count as a Blur, so an onMouseLeave is needed\n          onMouseLeave={handleSelectOnBlur}\n          data-testid=\"native-select\"\n        >\n          {optionList}\n        </select>\n      </label>\n      <div className={style.description}>{description}</div>\n    </div>\n  );\n};\n\nexport const SelectOptionPropTypes = {\n  name: PropTypes.string.isRequired,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  selected: PropTypes.bool,\n  validOption: PropTypes.bool\n};\n\nexport const SelectOptionGroupPropTypes = {\n  label: PropTypes.string.isRequired,\n  options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n};\n\nSelect.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nSelect.propTypes = {\n  title: PropTypes.string,\n  name: PropTypes.string,\n  className: PropTypes.string,\n  borderClassName: PropTypes.string,\n  disabled: PropTypes.bool,\n  multiple: PropTypes.bool,\n  description: PropTypes.string,\n  required: PropTypes.bool,\n  onChange: PropTypes.func,\n  theme: PropTypes.oneOf(keys(themeStyle)),\n  options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes)),\n  optgroups: PropTypes.arrayOf(PropTypes.shape(SelectOptionGroupPropTypes)),\n  modified: PropTypes.bool,\n  error: PropTypes.bool,\n  'aria-label': PropTypes.string\n};\n\nexport default Select;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","useMemo","useState","PropTypes","classnames","concat","filter","find","flatMapDeep","get","getOr","includes","isEmpty","keys","map","size","NovaCompositionNavigationArrowDown","ArrowDown","NovaCompositionNavigationArrowTop","ArrowUp","Provider","GetSkinFromContext","getClassState","style","themeStyle","invalid","header","mooc","question","sort","thematiques","player","template","coorpmanager","ArrowView","shouldRender","isArrowUp","ariaLabel","arrowClass","arrowColor","props","color","className","Select","legacyContext","name","options","optgroups","borderClassName","onChange","multiple","disabled","required","description","theme","modified","error","title","propTitle","ariaLabelledBy","skin","setIsArrowUp","handleSelectOnFocus","handleSelectOnBlur","selectOption","option","index","value","optionList","optgroup","label","i","titleView","selected","selectedLabel","isSelectedInValidOption","validOption","handleChange","e","target","selectedOptions","black","isThemeOneOfQuestionTemplateOrPlayer","shouldUseSkinFontColor","undefined","behaviorClassName","default","composedClassName","unselected","labelSize","isLongLabel","selectWrapper","selectSpan","noLabelCommon","longLabel","selectedArrow","arrow","selectBox","SelectOptionPropTypes","string","isRequired","oneOfType","number","bool","SelectOptionGroupPropTypes","arrayOf","shape","contextTypes","childContextTypes","propTypes","func","oneOf"],"sources":["../../../src/atom/select/index.js"],"sourcesContent":["import React, {useCallback, useMemo, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport concat from 'lodash/fp/concat';\nimport filter from 'lodash/fp/filter';\nimport find from 'lodash/fp/find';\nimport flatMapDeep from 'lodash/fp/flatMapDeep';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport includes from 'lodash/fp/includes';\nimport isEmpty from 'lodash/fp/isEmpty';\nimport keys from 'lodash/fp/keys';\nimport map from 'lodash/fp/map';\nimport size from 'lodash/fp/size';\nimport {\n  NovaCompositionNavigationArrowDown as ArrowDown,\n  NovaCompositionNavigationArrowTop as ArrowUp\n} from '@coorpacademy/nova-icons';\nimport Provider, {GetSkinFromContext} from '../provider';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst themeStyle = {\n  filter: style.filter,\n  invalid: style.invalid,\n  header: style.header,\n  mooc: style.mooc,\n  question: style.question,\n  sort: style.sort,\n  thematiques: style.thematiques,\n  player: style.player,\n  template: style.template,\n  coorpmanager: null\n};\n\nconst ArrowView = ({shouldRender, isArrowUp, ariaLabel, arrowClass, arrowColor}) => {\n  const props = useMemo(\n    () => ({\n      ...(arrowColor &\n        {\n          color: arrowColor\n        }),\n      className: arrowClass\n    }),\n    [ariaLabel, arrowClass, arrowColor]\n  );\n  if (shouldRender) {\n    return isArrowUp ? (\n      <ArrowUp {...props} data-testid=\"select-arrow-up-icon\" />\n    ) : (\n      <ArrowDown {...props} data-testid=\"select-arrow-down-icon\" />\n    );\n  } else return null;\n};\n\nconst Select = (props, legacyContext) => {\n  const {\n    name,\n    options = [],\n    optgroups = [],\n    className,\n    borderClassName,\n    onChange,\n    multiple = false,\n    disabled,\n    required,\n    description,\n    theme,\n    modified = false,\n    error = false,\n    title: propTitle,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy\n  } = props;\n\n  const skin = GetSkinFromContext(legacyContext);\n  const title = useMemo(\n    () => (propTitle ? `${propTitle}${required ? '*' : ''}` : null),\n    [propTitle, required]\n  );\n\n  const [isArrowUp, setIsArrowUp] = useState(false);\n\n  const handleSelectOnFocus = useCallback(() => setIsArrowUp(true), []);\n  const handleSelectOnBlur = useCallback(() => setIsArrowUp(false), []);\n\n  const selectOption = (option, index) => {\n    return (\n      <option key={index} value={option.value} className={style.selectOption}>\n        {option.name}\n      </option>\n    );\n  };\n\n  const optionList = !isEmpty(options)\n    ? options.map((option, index) => selectOption(option, index))\n    : optgroups.map((optgroup, index) => {\n        return (\n          <optgroup key={index} label={optgroup.label}>\n            {optgroup.options && optgroup.options.map((option, i) => selectOption(option, i))}\n          </optgroup>\n        );\n      });\n\n  const titleView = title ? <span className={style.title}>{title} </span> : null;\n\n  const selected = useMemo(\n    () =>\n      multiple\n        ? map(get('value'), filter({selected: true}, options))\n        : get('value', find({selected: true}, concat(options, flatMapDeep('options', optgroups)))),\n    [multiple, options, optgroups]\n  );\n  const selectedLabel = useMemo(\n    () =>\n      multiple\n        ? map(get('name'), filter({selected: true}, options))\n        : get('name', find({selected: true}, concat(options, flatMapDeep('options', optgroups)))),\n    [multiple, options, optgroups]\n  );\n\n  const isSelectedInValidOption = useMemo(\n    () =>\n      theme === 'player' &&\n      getOr(false, 'name', find({validOption: false, selected: true}, options)),\n    [options, theme]\n  );\n\n  const handleChange = useMemo(\n    () =>\n      multiple\n        ? e => {\n            setIsArrowUp(false);\n            onChange(map(get('value'), e.target.selectedOptions));\n          }\n        : e => {\n            setIsArrowUp(false);\n            onChange(e.target.value);\n          },\n    [onChange, multiple]\n  );\n\n  const black = useMemo(() => getOr('#14171A', 'common.black', skin), [skin]);\n  const color = useMemo(() => getOr('#00B0FF', 'common.primary', skin), [skin]);\n  const isThemeOneOfQuestionTemplateOrPlayer = useMemo(\n    () => includes(theme, ['question', 'template', 'player']),\n    [theme]\n  );\n  const shouldUseSkinFontColor = useMemo(\n    () => !isSelectedInValidOption && selected && isThemeOneOfQuestionTemplateOrPlayer,\n    [isSelectedInValidOption, selected, isThemeOneOfQuestionTemplateOrPlayer]\n  );\n  const arrowColor = selected ? color : undefined;\n\n  const behaviorClassName = useMemo(\n    () => getClassState(style.default, style.modified, style.error, modified, error),\n    [error, modified]\n  );\n  const composedClassName = useMemo(\n    () =>\n      classnames(\n        theme && theme !== 'coorpmanager' ? themeStyle[theme] : behaviorClassName,\n        selected ? style.selected : style.unselected,\n        className\n      ),\n    [behaviorClassName, className, selected, theme]\n  );\n\n  const labelSize = useMemo(() => size(selectedLabel), [selectedLabel]);\n\n  const isLongLabel = useMemo(() => labelSize >= 65, [labelSize]);\n\n  return (\n    <div\n      className={classnames(\n        composedClassName,\n        theme === 'coorpmanager' ? style.coorpmanager : null\n      )}\n    >\n      <label\n        data-name=\"select-wrapper\"\n        style={{\n          ...(shouldUseSkinFontColor && {\n            color\n          })\n        }}\n        className={style.selectWrapper}\n      >\n        {titleView}\n        <span\n          data-name=\"select-span\"\n          className={classnames(\n            style.selectSpan,\n            includes(theme, ['player', 'invalid', 'question', 'thematiques', 'template'])\n              ? style.noLabelCommon\n              : null,\n            borderClassName,\n            isLongLabel ? style.longLabel : null\n          )}\n          style={{\n            ...(shouldUseSkinFontColor && {\n              color\n            })\n          }}\n        >\n          {selectedLabel}\n        </span>\n        <ArrowView\n          shouldRender={!multiple}\n          isArrowUp={isArrowUp}\n          ariaLabel={ariaLabel}\n          arrowClass={shouldUseSkinFontColor ? style.selectedArrow : style.arrow}\n          arrowColor={isThemeOneOfQuestionTemplateOrPlayer ? arrowColor : black}\n        />\n        <select\n          {...(ariaLabelledBy ? {'aria-labelledby': ariaLabelledBy} : {})}\n          {...(ariaLabel && !ariaLabelledBy ? {'aria-label': ariaLabel} : {})}\n          {...(ariaLabel ? {title: ariaLabel} : {})}\n          data-name=\"native-select\"\n          className={style.selectBox}\n          name={name}\n          onChange={handleChange}\n          value={selected}\n          multiple={multiple}\n          disabled={disabled}\n          onClick={handleSelectOnFocus}\n          onBlur={handleSelectOnBlur}\n          // onBlur does not handle completely an out of bounds click\n          // ex: select is Opened and a click is done outside, cancelling the select\n          // that doesn't count as a Blur, so an onMouseLeave is needed\n          onMouseLeave={handleSelectOnBlur}\n          data-testid=\"native-select\"\n        >\n          {optionList}\n        </select>\n      </label>\n      <div className={style.description}>{description}</div>\n    </div>\n  );\n};\n\nexport const SelectOptionPropTypes = {\n  name: PropTypes.string.isRequired,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  selected: PropTypes.bool,\n  validOption: PropTypes.bool\n};\n\nexport const SelectOptionGroupPropTypes = {\n  label: PropTypes.string.isRequired,\n  options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n};\n\nSelect.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nSelect.propTypes = {\n  title: PropTypes.string,\n  name: PropTypes.string,\n  className: PropTypes.string,\n  borderClassName: PropTypes.string,\n  disabled: PropTypes.bool,\n  multiple: PropTypes.bool,\n  description: PropTypes.string,\n  required: PropTypes.bool,\n  onChange: PropTypes.func,\n  theme: PropTypes.oneOf(keys(themeStyle)),\n  options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes)),\n  optgroups: PropTypes.arrayOf(PropTypes.shape(SelectOptionGroupPropTypes)),\n  modified: PropTypes.bool,\n  error: PropTypes.bool,\n  'aria-label': PropTypes.string,\n  'aria-labelledby': PropTypes.string\n};\n\nexport default Select;\n"],"mappings":"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"}

package/{lib/atom/review-header-step-item → es/atom/status-item}/index.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
-import { HeaderStepItemProps } from './types';
-declare const ReviewHeaderStepItem: {
-    (props: HeaderStepItemProps): JSX.Element;
+import { StatusItemProps } from './types';
+declare const StatusItem: {
+    (props: StatusItemProps): JSX.Element;
     propTypes: {
         current: import("prop-types").Requireable<boolean>;
         icon: import("prop-types").Requireable<string>;
         value: import("prop-types").Requireable<string>;
     };
 };
-export default ReviewHeaderStepItem;
+export default StatusItem;
 //# sourceMappingURL=index.d.ts.map

package/es/atom/status-item/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/status-item/index.tsx"],"names":[],"mappings":";AASA,OAAkB,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAqFnD,QAAA,MAAM,UAAU;YAAW,eAAe;;;;;;CAkBzC,CAAC;AAWF,eAAe,UAAU,CAAC"}

package/es/atom/status-item/index.js

@@ -0,0 +1,104 @@
+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 classnames from 'classnames';
+import { NovaCompositionCoorpacademyCheck as RightIcon, NovaSolidStatusClose as WrongIcon } from '@coorpacademy/nova-icons';
+import Provider, { GetTranslateFromContext } from '../provider';
+import style from './style.css';
+import propTypes from './types';
+
+const Content = (props, legacyContext) => {
+  const {
+    icon,
+    current,
+    value
+  } = props;
+  const translate = GetTranslateFromContext(legacyContext);
+  let child;
+  let contentAriaLabel;
+
+  switch (icon) {
+    case 'no-answer':
+      child = value;
+      contentAriaLabel = translate('review_header_step_item.not_answered_question', {
+        current: current ? 'current ' : '',
+        headerStepValue: value
+      });
+      break;
+
+    case 'right':
+      child = /*#__PURE__*/React.createElement(RightIcon, {
+        className: classnames(style.rightIcon, current && style.currentRightIcon),
+        role: "status",
+        "aria-label": translate('review_header_step_item.correct_question', {
+          current: current ? 'current ' : '',
+          headerStepValue: value
+        })
+      });
+      break;
+
+    case 'wrong':
+      child = /*#__PURE__*/React.createElement(WrongIcon, {
+        className: classnames(style.wrongIcon, current && style.currentWrongIcon),
+        role: "alert",
+        "aria-label": translate('review_header_step_item.incorrect_question', {
+          current: current ? 'current ' : '',
+          headerStepValue: value
+        })
+      });
+      break;
+
+    case 'errors-number':
+      child = value;
+      contentAriaLabel = translate('bulk_import.errors_number', {
+        bulkImportErrorsNumber: value
+      });
+      break;
+
+    case 'valid':
+      child = /*#__PURE__*/React.createElement(RightIcon, {
+        className: classnames(style.validIcon),
+        role: "status",
+        "aria-label": translate('bulk_import.valid_scorm')
+      });
+      break;
+
+    case 'invalid':
+      child = /*#__PURE__*/React.createElement(WrongIcon, {
+        className: classnames(style.invalidIcon),
+        role: "alert",
+        "aria-label": translate('bulk_import.invalid_scorm')
+      });
+      break;
+
+    default:
+      return null;
+  }
+
+  return /*#__PURE__*/React.createElement("span", _extends({}, icon === 'no-answer' || icon === 'errors-number' ? {
+    'aria-label': contentAriaLabel,
+    role: 'status'
+  } : {}, {
+    className: style.value
+  }), child);
+};
+
+const StatusItem = props => {
+  const {
+    icon,
+    current
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames(style.default, icon === 'right' && style.right, icon === 'wrong' && style.wrong, current && style.current, icon === 'valid' && style.valid, icon === 'invalid' && style.invalid, icon === 'errors-number' && style.errorsNumber),
+    "data-name": "status-item"
+  }, /*#__PURE__*/React.createElement(Content, props));
+};
+
+Content.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
+Content.contextTypes = {
+  skin: Provider.childContextTypes.skin,
+  translate: Provider.childContextTypes.translate
+};
+StatusItem.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
+export default StatusItem;
+//# sourceMappingURL=index.js.map

package/es/atom/status-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","classnames","NovaCompositionCoorpacademyCheck","RightIcon","NovaSolidStatusClose","WrongIcon","Provider","GetTranslateFromContext","style","propTypes","Content","props","legacyContext","icon","current","value","translate","child","contentAriaLabel","headerStepValue","rightIcon","currentRightIcon","wrongIcon","currentWrongIcon","bulkImportErrorsNumber","validIcon","invalidIcon","role","StatusItem","default","right","wrong","valid","invalid","errorsNumber","contextTypes","skin","childContextTypes"],"sources":["../../../src/atom/status-item/index.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport {\n  NovaCompositionCoorpacademyCheck as RightIcon,\n  NovaSolidStatusClose as WrongIcon\n} from '@coorpacademy/nova-icons';\nimport Provider, {GetTranslateFromContext} from '../provider';\nimport {WebContextValues} from '../provider/web-context';\nimport style from './style.css';\nimport propTypes, {StatusItemProps} from './types';\n\nconst Content = (props: StatusItemProps, legacyContext: WebContextValues) => {\n  const {icon, current, value} = props;\n  const translate = GetTranslateFromContext(legacyContext);\n  let child;\n  let contentAriaLabel;\n  switch (icon) {\n    case 'no-answer':\n      child = value;\n      contentAriaLabel = translate('review_header_step_item.not_answered_question', {\n        current: current ? 'current ' : '',\n        headerStepValue: value\n      });\n      break;\n\n    case 'right':\n      child = (\n        <RightIcon\n          className={classnames(style.rightIcon, current && style.currentRightIcon)}\n          role=\"status\"\n          aria-label={translate('review_header_step_item.correct_question', {\n            current: current ? 'current ' : '',\n            headerStepValue: value\n          })}\n        />\n      );\n      break;\n\n    case 'wrong':\n      child = (\n        <WrongIcon\n          className={classnames(style.wrongIcon, current && style.currentWrongIcon)}\n          role=\"alert\"\n          aria-label={translate('review_header_step_item.incorrect_question', {\n            current: current ? 'current ' : '',\n            headerStepValue: value\n          })}\n        />\n      );\n      break;\n\n    case 'errors-number':\n      child = value;\n      contentAriaLabel = translate('bulk_import.errors_number', {\n        bulkImportErrorsNumber: value\n      });\n      break;\n\n    case 'valid':\n      child = (\n        <RightIcon\n          className={classnames(style.validIcon)}\n          role=\"status\"\n          aria-label={translate('bulk_import.valid_scorm')}\n        />\n      );\n      break;\n\n    case 'invalid':\n      child = (\n        <WrongIcon\n          className={classnames(style.invalidIcon)}\n          role=\"alert\"\n          aria-label={translate('bulk_import.invalid_scorm')}\n        />\n      );\n      break;\n\n    default:\n      return null;\n  }\n\n  return (\n    <span\n      {...(icon === 'no-answer' || icon === 'errors-number'\n        ? {'aria-label': contentAriaLabel, role: 'status'}\n        : {})}\n      className={style.value}\n    >\n      {child}\n    </span>\n  );\n};\n\nconst StatusItem = (props: StatusItemProps) => {\n  const {icon, current} = props;\n  return (\n    <div\n      className={classnames(\n        style.default,\n        icon === 'right' && style.right,\n        icon === 'wrong' && style.wrong,\n        current && style.current,\n        icon === 'valid' && style.valid,\n        icon === 'invalid' && style.invalid,\n        icon === 'errors-number' && style.errorsNumber\n      )}\n      data-name=\"status-item\"\n    >\n      <Content {...props} />\n    </div>\n  );\n};\n\nContent.propTypes = propTypes;\n\nContent.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nStatusItem.propTypes = propTypes;\n\nexport default StatusItem;\n"],"mappings":"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"}

package/es/atom/status-item/index.native.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { StatusItemProps } from './types';
+declare const Step: ({ value, icon, current }: StatusItemProps) => JSX.Element | null;
+export default Step;
+//# sourceMappingURL=index.native.d.ts.map

package/es/atom/status-item/index.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/atom/status-item/index.native.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AA6CxC,QAAA,MAAM,IAAI,6BAA4B,eAAe,uBA2BpD,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/es/atom/{review-header-step-item → status-item}/index.native.js

@@ -3,7 +3,7 @@ import { StyleSheet, Text, View } from 'react-native';
 import { NovaCompositionCoorpacademyCheck as RightIcon, NovaSolidStatusClose as WrongIcon } from '@coorpacademy/nova-icons';
 import { COLORS } from '../../variables/colors';
 
-const createStyle = (current, icon) => {
+const createStyle = (icon, current) => {
   let backgroundColor;
 
   switch (icon) {
@@ -49,7 +49,7 @@ const Step = ({
 }) => {
   const [style, setStyle] = useState(null);
   useEffect(() => {
-    const _style = createStyle(current, icon);
+    const _style = createStyle(icon, current);
 
     setStyle(_style);
   }, [current, icon]);

package/es/atom/status-item/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.native.js","names":["React","useEffect","useState","StyleSheet","Text","View","NovaCompositionCoorpacademyCheck","RightIcon","NovaSolidStatusClose","WrongIcon","COLORS","createStyle","icon","current","backgroundColor","positive","negative","gray","create","step","width","height","opacity","marginHorizontal","alignItems","justifyContent","borderRadius","stepText","fontWeight","fontSize","Step","value","style","setStyle","_style","child"],"sources":["../../../src/atom/status-item/index.native.tsx"],"sourcesContent":["import React, {useEffect, useState} from 'react';\nimport {StyleSheet, Text, TextStyle, View, ViewStyle} from 'react-native';\nimport {\n  NovaCompositionCoorpacademyCheck as RightIcon,\n  NovaSolidStatusClose as WrongIcon\n} from '@coorpacademy/nova-icons';\nimport {COLORS} from '../../variables/colors';\nimport {StatusItemProps} from './types';\n\ntype StyleSheetType = {\n  step: ViewStyle;\n  stepText: TextStyle;\n  icon: ViewStyle;\n};\n\nconst createStyle = (icon: StatusItemProps['icon'], current?: boolean): StyleSheetType => {\n  let backgroundColor;\n\n  switch (icon) {\n    case 'right':\n      backgroundColor = COLORS.positive;\n      break;\n    case 'wrong':\n      backgroundColor = COLORS.negative;\n      break;\n    case 'no-answer':\n    default:\n      backgroundColor = COLORS.gray;\n  }\n\n  return StyleSheet.create({\n    step: {\n      width: current ? 40 : 32,\n      height: current ? 40 : 32,\n      opacity: current ? 1 : 0.5,\n      marginHorizontal: 8,\n      backgroundColor,\n      alignItems: 'center',\n      justifyContent: 'center',\n      borderRadius: 50\n    },\n    stepText: {\n      fontWeight: '600',\n      fontSize: current ? 16 : 12\n    },\n    icon: {\n      width: current ? 14 : 12,\n      height: current ? 14 : 12\n    }\n  });\n};\n\nconst Step = ({value, icon, current}: StatusItemProps) => {\n  const [style, setStyle] = useState<StyleSheetType | null>(null);\n\n  useEffect(() => {\n    const _style = createStyle(icon, current);\n    setStyle(_style);\n  }, [current, icon]);\n\n  if (!style) {\n    return null;\n  }\n\n  let child;\n\n  switch (icon) {\n    case 'right':\n      child = <RightIcon style={style.icon} color=\"#fff\" />;\n      break;\n    case 'wrong':\n      child = <WrongIcon style={style.icon} color=\"#fff\" />;\n      break;\n    case 'no-answer':\n    default:\n      child = <Text style={style.stepText}>{value}</Text>;\n  }\n\n  return <View style={style.step}>{child}</View>;\n};\n\nexport default Step;\n"],"mappings":"AAAA,OAAOA,KAAP,IAAeC,SAAf,EAA0BC,QAA1B,QAAyC,OAAzC;AACA,SAAQC,UAAR,EAAoBC,IAApB,EAAqCC,IAArC,QAA2D,cAA3D;AACA,SACEC,gCAAgC,IAAIC,SADtC,EAEEC,oBAAoB,IAAIC,SAF1B,QAGO,0BAHP;AAIA,SAAQC,MAAR,QAAqB,wBAArB;;AASA,MAAMC,WAAW,GAAG,CAACC,IAAD,EAAgCC,OAAhC,KAAsE;EACxF,IAAIC,eAAJ;;EAEA,QAAQF,IAAR;IACE,KAAK,OAAL;MACEE,eAAe,GAAGJ,MAAM,CAACK,QAAzB;MACA;;IACF,KAAK,OAAL;MACED,eAAe,GAAGJ,MAAM,CAACM,QAAzB;MACA;;IACF,KAAK,WAAL;IACA;MACEF,eAAe,GAAGJ,MAAM,CAACO,IAAzB;EATJ;;EAYA,OAAOd,UAAU,CAACe,MAAX,CAAkB;IACvBC,IAAI,EAAE;MACJC,KAAK,EAAEP,OAAO,GAAG,EAAH,GAAQ,EADlB;MAEJQ,MAAM,EAAER,OAAO,GAAG,EAAH,GAAQ,EAFnB;MAGJS,OAAO,EAAET,OAAO,GAAG,CAAH,GAAO,GAHnB;MAIJU,gBAAgB,EAAE,CAJd;MAKJT,eALI;MAMJU,UAAU,EAAE,QANR;MAOJC,cAAc,EAAE,QAPZ;MAQJC,YAAY,EAAE;IARV,CADiB;IAWvBC,QAAQ,EAAE;MACRC,UAAU,EAAE,KADJ;MAERC,QAAQ,EAAEhB,OAAO,GAAG,EAAH,GAAQ;IAFjB,CAXa;IAevBD,IAAI,EAAE;MACJQ,KAAK,EAAEP,OAAO,GAAG,EAAH,GAAQ,EADlB;MAEJQ,MAAM,EAAER,OAAO,GAAG,EAAH,GAAQ;IAFnB;EAfiB,CAAlB,CAAP;AAoBD,CAnCD;;AAqCA,MAAMiB,IAAI,GAAG,CAAC;EAACC,KAAD;EAAQnB,IAAR;EAAcC;AAAd,CAAD,KAA6C;EACxD,MAAM,CAACmB,KAAD,EAAQC,QAAR,IAAoB/B,QAAQ,CAAwB,IAAxB,CAAlC;EAEAD,SAAS,CAAC,MAAM;IACd,MAAMiC,MAAM,GAAGvB,WAAW,CAACC,IAAD,EAAOC,OAAP,CAA1B;;IACAoB,QAAQ,CAACC,MAAD,CAAR;EACD,CAHQ,EAGN,CAACrB,OAAD,EAAUD,IAAV,CAHM,CAAT;;EAKA,IAAI,CAACoB,KAAL,EAAY;IACV,OAAO,IAAP;EACD;;EAED,IAAIG,KAAJ;;EAEA,QAAQvB,IAAR;IACE,KAAK,OAAL;MACEuB,KAAK,gBAAG,oBAAC,SAAD;QAAW,KAAK,EAAEH,KAAK,CAACpB,IAAxB;QAA8B,KAAK,EAAC;MAApC,EAAR;MACA;;IACF,KAAK,OAAL;MACEuB,KAAK,gBAAG,oBAAC,SAAD;QAAW,KAAK,EAAEH,KAAK,CAACpB,IAAxB;QAA8B,KAAK,EAAC;MAApC,EAAR;MACA;;IACF,KAAK,WAAL;IACA;MACEuB,KAAK,gBAAG,oBAAC,IAAD;QAAM,KAAK,EAAEH,KAAK,CAACL;MAAnB,GAA8BI,KAA9B,CAAR;EATJ;;EAYA,oBAAO,oBAAC,IAAD;IAAM,KAAK,EAAEC,KAAK,CAACb;EAAnB,GAA0BgB,KAA1B,CAAP;AACD,CA3BD;;AA6BA,eAAeL,IAAf"}

package/es/atom/{review-header-step-item → status-item}/style.css

@@ -3,6 +3,12 @@
 @value cm_positive_100 from colors;
 @value cm_negative_100 from colors;
 @value white from colors;
+@value positive from colors;
+@value negative from colors;
+@value cm_negative_50 from colors;
+@value cm_green_secondary_200 from colors;
+@value cm_green_secondary_100 from colors;
+@value cm_pink_50 from colors;
 
 .default {
   width: 32px;
@@ -62,4 +68,45 @@
   transform: scale(1.5);
 }
 
+/* ----------------- CM bulk theme ------------------------- */
 
+
+.valid {
+  opacity: 1;
+  width: 24px;
+  height: 24px;
+  background-color: cm_green_secondary_100;
+}
+
+.validIcon {
+  color: cm_green_secondary_200;
+  width: 12px;
+  height: 10px;
+  transition: transform 0.25s ease;
+}
+
+.invalid {
+  opacity: 1;
+  width: 24px;
+  height: 24px;
+  background-color: cm_negative_50;
+}
+
+.invalidIcon {
+  color: cm_negative_100;
+  width: 10px;
+  height: 10px;
+  transition: color 0.25s ease;
+}
+
+.errorsNumber {
+  opacity: 1;
+  width: 24px;
+  height: 24px;
+  background-color: cm_pink_50;
+  color: cm_negative_100;
+  font-family: 'Gilroy';
+  font-style: normal;
+  font-weight: 600;
+  font-size: 14px;
+}

package/es/atom/{review-header-step-item → status-item}/types.d.ts

@@ -5,12 +5,12 @@ declare const propTypes: {
     value: PropTypes.Requireable<string>;
 };
 export default propTypes;
-export declare type HeaderStepItemProps = {
-    current: boolean;
-    icon: 'no-answer' | 'right' | 'wrong';
-    value: string;
+export declare type StatusItemProps = {
+    current?: boolean;
+    icon: 'no-answer' | 'right' | 'wrong' | 'valid' | 'invalid' | 'errors-number';
+    value?: string;
 };
 export declare type Fixture = {
-    props: HeaderStepItemProps;
+    props: StatusItemProps;
 };
 //# sourceMappingURL=types.d.ts.map

package/es/atom/status-item/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atom/status-item/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,QAAA,MAAM,SAAS;;;;CAId,CAAC;AAEF,eAAe,SAAS,CAAC;AAEzB,oBAAY,eAAe,GAAG;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,WAAW,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,eAAe,CAAC;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,oBAAY,OAAO,GAAG;IACpB,KAAK,EAAE,eAAe,CAAC;CACxB,CAAC"}