@coorpacademy/components 11.6.1 → 11.7.3-alpha.3

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

@@ -51,6 +51,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":";;;;;;;;AA6BA,qEA6JC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/select/index.js"],"names":[],"mappings":";;;;;;;;AAoDA,qEA+KC"}

package/es/atom/select/index.js

@@ -1,6 +1,6 @@
 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 React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import filter from 'lodash/fp/filter';
@@ -11,7 +11,7 @@ import includes from 'lodash/fp/includes';
 import keys from 'lodash/fp/keys';
 import map from 'lodash/fp/map';
 import size from 'lodash/fp/size';
-import { NovaCompositionNavigationArrowDown as ArrowDown } from '@coorpacademy/nova-icons';
+import { NovaCompositionNavigationArrowDown as ArrowDown, NovaCompositionNavigationArrowTop as ArrowUp } from '@coorpacademy/nova-icons';
 import Provider, { GetSkinFromContext } from '../provider';
 import getClassState from '../../util/get-class-state';
 import style from './style.css';
@@ -28,6 +28,28 @@ const themeStyle = {
   coorpmanager: null
 };
 
+const ArrowView = ({
+  shouldRender,
+  isArrowUp,
+  ariaLabel,
+  arrowClass,
+  arrowColor
+}) => {
+  const props = useMemo(() => _extends({}, arrowColor & {
+    color: arrowColor
+  }, {
+    className: arrowClass
+  }), [ariaLabel, arrowClass, arrowColor]);
+
+  if (shouldRender) {
+    return isArrowUp ? /*#__PURE__*/React.createElement(ArrowUp, _extends({}, props, {
+      "data-testid": "select-arrow-up-icon"
+    })) : /*#__PURE__*/React.createElement(ArrowDown, _extends({}, props, {
+      "data-testid": "select-arrow-down-icon"
+    }));
+  } else return null;
+};
+
 const Select = (props, legacyContext) => {
   const {
     name,
@@ -43,10 +65,14 @@ 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]);
+  const [isArrowUp, setIsArrowUp] = useState(false);
+  const handleSelectOnFocus = useCallback(() => setIsArrowUp(true), []);
+  const handleSelectOnBlur = useCallback(() => setIsArrowUp(false), []);
   const optionList = options && options.map((option, index) => {
     return /*#__PURE__*/React.createElement("option", {
       key: index,
@@ -72,20 +98,17 @@ const Select = (props, legacyContext) => {
     selected: true
   }, options)), [options, theme]);
   const handleChange = useMemo(() => multiple ? e => {
+    setIsArrowUp(false);
     onChange(map(get('value'), e.target.selectedOptions));
   } : e => {
+    setIsArrowUp(false);
     onChange(e.target.value);
   }, [onChange, multiple]);
   const black = useMemo(() => getOr('#14171A', 'common.black', skin), [skin]);
   const color = useMemo(() => getOr('#00B0FF', 'common.primary', skin), [skin]);
-  const shouldUseSkinFontColor = useMemo(() => !isSelectedInValidOption && selected && includes(theme, ['question', 'template', 'player']), [isSelectedInValidOption, selected, theme]);
+  const isThemeOneOfQuestionTemplateOrPlayer = useMemo(() => includes(theme, ['question', 'template', 'player']), [theme]);
+  const shouldUseSkinFontColor = useMemo(() => !isSelectedInValidOption && selected && isThemeOneOfQuestionTemplateOrPlayer, [isSelectedInValidOption, selected, isThemeOneOfQuestionTemplateOrPlayer]);
   const arrowColor = selected ? color : undefined;
-  const arrowView = !multiple ? /*#__PURE__*/React.createElement(ArrowDown, {
-    color: includes(theme, ['question', 'template', 'player']) ? arrowColor : black,
-    className: shouldUseSkinFontColor ? style.selectedArrow : style.arrow,
-    "aria-label": ariaLabel,
-    "data-testid": "select-arrow-down-icon"
-  }) : null;
   const behaviorClassName = useMemo(() => getClassState(style.default, style.modified, style.error, modified, error), [error, modified]);
   const composedClassName = useMemo(() => classnames(theme && theme !== 'coorpmanager' ? themeStyle[theme] : behaviorClassName, selected ? style.selected : style.unselected, className), [behaviorClassName, className, selected, theme]);
   const labelSize = useMemo(() => size(selectedLabel), [selectedLabel]);
@@ -104,7 +127,17 @@ const Select = (props, legacyContext) => {
     style: _extends({}, shouldUseSkinFontColor && {
       color
     })
-  }, selectedLabel), arrowView, /*#__PURE__*/React.createElement("select", {
+  }, selectedLabel), /*#__PURE__*/React.createElement(ArrowView, {
+    shouldRender: !multiple,
+    isArrowUp: isArrowUp,
+    ariaLabel: ariaLabel,
+    arrowClass: shouldUseSkinFontColor ? style.selectedArrow : style.arrow,
+    arrowColor: isThemeOneOfQuestionTemplateOrPlayer ? arrowColor : black
+  }), /*#__PURE__*/React.createElement("select", _extends({}, ariaLabelledBy && !ariaLabel ? {
+    'aria-labelledby': ariaLabelledBy
+  } : {}, ariaLabel && !ariaLabelledBy ? {
+    'aria-label': ariaLabel
+  } : {}, {
     "data-name": "native-select",
     className: style.selectBox,
     title: selectedLabel,
@@ -112,8 +145,15 @@ const Select = (props, legacyContext) => {
     onChange: handleChange,
     value: selected,
     multiple: multiple,
-    disabled: disabled
-  }, optionList)), /*#__PURE__*/React.createElement("div", {
+    disabled: disabled,
+    onClick: handleSelectOnFocus,
+    onBlur: handleSelectOnBlur // onBlur does not handle completely an out of bounds click
+    // ex: select is Opened and a click is done outside, cancelling the select
+    // that doesn't count as a Blur, so an onMouseLeave is needed
+    ,
+    onMouseLeave: handleSelectOnBlur,
+    "data-testid": "native-select"
+  }), optionList)), /*#__PURE__*/React.createElement("div", {
     className: style.description
   }, description));
 };
@@ -141,7 +181,8 @@ Select.propTypes = process.env.NODE_ENV !== "production" ? {
   options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes)),
   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","useMemo","PropTypes","classnames","filter","find","get","getOr","includes","keys","map","size","NovaCompositionNavigationArrowDown","ArrowDown","Provider","GetSkinFromContext","getClassState","style","themeStyle","invalid","header","mooc","question","sort","thematiques","player","template","coorpmanager","Select","props","legacyContext","name","options","className","borderClassName","onChange","multiple","disabled","required","description","theme","modified","error","title","propTitle","ariaLabel","skin","optionList","option","index","value","selectOption","titleView","selected","selectedLabel","isSelectedInValidOption","validOption","handleChange","e","target","selectedOptions","black","color","shouldUseSkinFontColor","arrowColor","undefined","arrowView","selectedArrow","arrow","behaviorClassName","default","composedClassName","unselected","labelSize","isLongLabel","selectWrapper","selectSpan","noLabelCommon","longLabel","selectBox","SelectOptionPropTypes","string","isRequired","oneOfType","number","bool","contextTypes","childContextTypes","propTypes","func","oneOf","arrayOf","shape"],"sources":["../../../src/atom/select/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport filter from 'lodash/fp/filter';\nimport find from 'lodash/fp/find';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport includes from 'lodash/fp/includes';\nimport keys from 'lodash/fp/keys';\nimport map from 'lodash/fp/map';\nimport size from 'lodash/fp/size';\nimport {NovaCompositionNavigationArrowDown as ArrowDown} 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 Select = (props, legacyContext) => {\n  const {\n    name,\n    options = [],\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 optionList =\n    options &&\n    options.map((option, index) => {\n      return (\n        <option key={index} value={option.value} className={style.selectOption}>\n          {option.name}\n        </option>\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}, options)),\n    [multiple, options]\n  );\n  const selectedLabel = useMemo(\n    () =>\n      multiple\n        ? map(get('name'), filter({selected: true}, options))\n        : get('name', find({selected: true}, options)),\n    [multiple, options]\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            onChange(map(get('value'), e.target.selectedOptions));\n          }\n        : e => {\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 shouldUseSkinFontColor = useMemo(\n    () =>\n      !isSelectedInValidOption && selected && includes(theme, ['question', 'template', 'player']),\n    [isSelectedInValidOption, selected, theme]\n  );\n  const arrowColor = selected ? color : undefined;\n\n  const arrowView = !multiple ? (\n    <ArrowDown\n      color={includes(theme, ['question', 'template', 'player']) ? arrowColor : black}\n      className={shouldUseSkinFontColor ? style.selectedArrow : style.arrow}\n      aria-label={ariaLabel}\n      data-testid=\"select-arrow-down-icon\"\n    />\n  ) : null;\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        <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        >\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\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  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","filter","find","get","getOr","includes","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","borderClassName","onChange","multiple","disabled","required","description","theme","modified","error","title","propTitle","ariaLabelledBy","skin","setIsArrowUp","handleSelectOnFocus","handleSelectOnBlur","optionList","option","index","value","selectOption","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","contextTypes","childContextTypes","propTypes","func","oneOf","arrayOf","shape"],"sources":["../../../src/atom/select/index.js"],"sourcesContent":["import React, {useCallback, useMemo, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport filter from 'lodash/fp/filter';\nimport find from 'lodash/fp/find';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport includes from 'lodash/fp/includes';\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    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 optionList =\n    options &&\n    options.map((option, index) => {\n      return (\n        <option key={index} value={option.value} className={style.selectOption}>\n          {option.name}\n        </option>\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}, options)),\n    [multiple, options]\n  );\n  const selectedLabel = useMemo(\n    () =>\n      multiple\n        ? map(get('name'), filter({selected: true}, options))\n        : get('name', find({selected: true}, options)),\n    [multiple, options]\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 && !ariaLabel ? {'aria-labelledby': ariaLabelledBy} : {})}\n          {...(ariaLabel && !ariaLabelledBy ? {'aria-label': ariaLabel} : {})}\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\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  modified: PropTypes.bool,\n  error: PropTypes.bool,\n  'aria-label': PropTypes.string,\n  'aria-labelledby': PropTypes.string\n};\n\nexport default Select;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,WAAf,EAA4BC,OAA5B,EAAqCC,QAArC,QAAoD,OAApD;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,MAAP,MAAmB,kBAAnB;AACA,OAAOC,IAAP,MAAiB,gBAAjB;AACA,OAAOC,GAAP,MAAgB,eAAhB;AACA,OAAOC,KAAP,MAAkB,iBAAlB;AACA,OAAOC,QAAP,MAAqB,oBAArB;AACA,OAAOC,IAAP,MAAiB,gBAAjB;AACA,OAAOC,GAAP,MAAgB,eAAhB;AACA,OAAOC,IAAP,MAAiB,gBAAjB;AACA,SACEC,kCAAkC,IAAIC,SADxC,EAEEC,iCAAiC,IAAIC,OAFvC,QAGO,0BAHP;AAIA,OAAOC,QAAP,IAAkBC,kBAAlB,QAA2C,aAA3C;AACA,OAAOC,aAAP,MAA0B,4BAA1B;AACA,OAAOC,KAAP,MAAkB,aAAlB;AAEA,MAAMC,UAAU,GAAG;EACjBhB,MAAM,EAAEe,KAAK,CAACf,MADG;EAEjBiB,OAAO,EAAEF,KAAK,CAACE,OAFE;EAGjBC,MAAM,EAAEH,KAAK,CAACG,MAHG;EAIjBC,IAAI,EAAEJ,KAAK,CAACI,IAJK;EAKjBC,QAAQ,EAAEL,KAAK,CAACK,QALC;EAMjBC,IAAI,EAAEN,KAAK,CAACM,IANK;EAOjBC,WAAW,EAAEP,KAAK,CAACO,WAPF;EAQjBC,MAAM,EAAER,KAAK,CAACQ,MARG;EASjBC,QAAQ,EAAET,KAAK,CAACS,QATC;EAUjBC,YAAY,EAAE;AAVG,CAAnB;;AAaA,MAAMC,SAAS,GAAG,CAAC;EAACC,YAAD;EAAeC,SAAf;EAA0BC,SAA1B;EAAqCC,UAArC;EAAiDC;AAAjD,CAAD,KAAkE;EAClF,MAAMC,KAAK,GAAGpC,OAAO,CACnB,mBACMmC,UAAU,GACZ;IACEE,KAAK,EAAEF;EADT,CAFJ;IAKEG,SAAS,EAAEJ;EALb,EADmB,EAQnB,CAACD,SAAD,EAAYC,UAAZ,EAAwBC,UAAxB,CARmB,CAArB;;EAUA,IAAIJ,YAAJ,EAAkB;IAChB,OAAOC,SAAS,gBACd,oBAAC,OAAD,eAAaI,KAAb;MAAoB,eAAY;IAAhC,GADc,gBAGd,oBAAC,SAAD,eAAeA,KAAf;MAAsB,eAAY;IAAlC,GAHF;EAKD,CAND,MAMO,OAAO,IAAP;AACR,CAlBD;;AAoBA,MAAMG,MAAM,GAAG,CAACH,KAAD,EAAQI,aAAR,KAA0B;EACvC,MAAM;IACJC,IADI;IAEJC,OAAO,GAAG,EAFN;IAGJJ,SAHI;IAIJK,eAJI;IAKJC,QALI;IAMJC,QAAQ,GAAG,KANP;IAOJC,QAPI;IAQJC,QARI;IASJC,WATI;IAUJC,KAVI;IAWJC,QAAQ,GAAG,KAXP;IAYJC,KAAK,GAAG,KAZJ;IAaJC,KAAK,EAAEC,SAbH;IAcJ,cAAcpB,SAdV;IAeJ,mBAAmBqB;EAff,IAgBFlB,KAhBJ;EAkBA,MAAMmB,IAAI,GAAGtC,kBAAkB,CAACuB,aAAD,CAA/B;EACA,MAAMY,KAAK,GAAGpD,OAAO,CACnB,MAAOqD,SAAS,GAAI,GAAEA,SAAU,GAAEN,QAAQ,GAAG,GAAH,GAAS,EAAG,EAAtC,GAA0C,IADvC,EAEnB,CAACM,SAAD,EAAYN,QAAZ,CAFmB,CAArB;EAKA,MAAM,CAACf,SAAD,EAAYwB,YAAZ,IAA4BvD,QAAQ,CAAC,KAAD,CAA1C;EAEA,MAAMwD,mBAAmB,GAAG1D,WAAW,CAAC,MAAMyD,YAAY,CAAC,IAAD,CAAnB,EAA2B,EAA3B,CAAvC;EACA,MAAME,kBAAkB,GAAG3D,WAAW,CAAC,MAAMyD,YAAY,CAAC,KAAD,CAAnB,EAA4B,EAA5B,CAAtC;EAEA,MAAMG,UAAU,GACdjB,OAAO,IACPA,OAAO,CAAChC,GAAR,CAAY,CAACkD,MAAD,EAASC,KAAT,KAAmB;IAC7B,oBACE;MAAQ,GAAG,EAAEA,KAAb;MAAoB,KAAK,EAAED,MAAM,CAACE,KAAlC;MAAyC,SAAS,EAAE3C,KAAK,CAAC4C;IAA1D,GACGH,MAAM,CAACnB,IADV,CADF;EAKD,CAND,CAFF;EAUA,MAAMuB,SAAS,GAAGZ,KAAK,gBAAG;IAAM,SAAS,EAAEjC,KAAK,CAACiC;EAAvB,GAA+BA,KAA/B,MAAH,GAAmD,IAA1E;EAEA,MAAMa,QAAQ,GAAGjE,OAAO,CACtB,MACE6C,QAAQ,GACJnC,GAAG,CAACJ,GAAG,CAAC,OAAD,CAAJ,EAAeF,MAAM,CAAC;IAAC6D,QAAQ,EAAE;EAAX,CAAD,EAAmBvB,OAAnB,CAArB,CADC,GAEJpC,GAAG,CAAC,OAAD,EAAUD,IAAI,CAAC;IAAC4D,QAAQ,EAAE;EAAX,CAAD,EAAmBvB,OAAnB,CAAd,CAJa,EAKtB,CAACG,QAAD,EAAWH,OAAX,CALsB,CAAxB;EAOA,MAAMwB,aAAa,GAAGlE,OAAO,CAC3B,MACE6C,QAAQ,GACJnC,GAAG,CAACJ,GAAG,CAAC,MAAD,CAAJ,EAAcF,MAAM,CAAC;IAAC6D,QAAQ,EAAE;EAAX,CAAD,EAAmBvB,OAAnB,CAApB,CADC,GAEJpC,GAAG,CAAC,MAAD,EAASD,IAAI,CAAC;IAAC4D,QAAQ,EAAE;EAAX,CAAD,EAAmBvB,OAAnB,CAAb,CAJkB,EAK3B,CAACG,QAAD,EAAWH,OAAX,CAL2B,CAA7B;EAQA,MAAMyB,uBAAuB,GAAGnE,OAAO,CACrC,MACEiD,KAAK,KAAK,QAAV,IACA1C,KAAK,CAAC,KAAD,EAAQ,MAAR,EAAgBF,IAAI,CAAC;IAAC+D,WAAW,EAAE,KAAd;IAAqBH,QAAQ,EAAE;EAA/B,CAAD,EAAuCvB,OAAvC,CAApB,CAH8B,EAIrC,CAACA,OAAD,EAAUO,KAAV,CAJqC,CAAvC;EAOA,MAAMoB,YAAY,GAAGrE,OAAO,CAC1B,MACE6C,QAAQ,GACJyB,CAAC,IAAI;IACHd,YAAY,CAAC,KAAD,CAAZ;IACAZ,QAAQ,CAAClC,GAAG,CAACJ,GAAG,CAAC,OAAD,CAAJ,EAAegE,CAAC,CAACC,MAAF,CAASC,eAAxB,CAAJ,CAAR;EACD,CAJG,GAKJF,CAAC,IAAI;IACHd,YAAY,CAAC,KAAD,CAAZ;IACAZ,QAAQ,CAAC0B,CAAC,CAACC,MAAF,CAAST,KAAV,CAAR;EACD,CAVmB,EAW1B,CAAClB,QAAD,EAAWC,QAAX,CAX0B,CAA5B;EAcA,MAAM4B,KAAK,GAAGzE,OAAO,CAAC,MAAMO,KAAK,CAAC,SAAD,EAAY,cAAZ,EAA4BgD,IAA5B,CAAZ,EAA+C,CAACA,IAAD,CAA/C,CAArB;EACA,MAAMlB,KAAK,GAAGrC,OAAO,CAAC,MAAMO,KAAK,CAAC,SAAD,EAAY,gBAAZ,EAA8BgD,IAA9B,CAAZ,EAAiD,CAACA,IAAD,CAAjD,CAArB;EACA,MAAMmB,oCAAoC,GAAG1E,OAAO,CAClD,MAAMQ,QAAQ,CAACyC,KAAD,EAAQ,CAAC,UAAD,EAAa,UAAb,EAAyB,QAAzB,CAAR,CADoC,EAElD,CAACA,KAAD,CAFkD,CAApD;EAIA,MAAM0B,sBAAsB,GAAG3E,OAAO,CACpC,MAAM,CAACmE,uBAAD,IAA4BF,QAA5B,IAAwCS,oCADV,EAEpC,CAACP,uBAAD,EAA0BF,QAA1B,EAAoCS,oCAApC,CAFoC,CAAtC;EAIA,MAAMvC,UAAU,GAAG8B,QAAQ,GAAG5B,KAAH,GAAWuC,SAAtC;EAEA,MAAMC,iBAAiB,GAAG7E,OAAO,CAC/B,MAAMkB,aAAa,CAACC,KAAK,CAAC2D,OAAP,EAAgB3D,KAAK,CAAC+B,QAAtB,EAAgC/B,KAAK,CAACgC,KAAtC,EAA6CD,QAA7C,EAAuDC,KAAvD,CADY,EAE/B,CAACA,KAAD,EAAQD,QAAR,CAF+B,CAAjC;EAIA,MAAM6B,iBAAiB,GAAG/E,OAAO,CAC/B,MACEG,UAAU,CACR8C,KAAK,IAAIA,KAAK,KAAK,cAAnB,GAAoC7B,UAAU,CAAC6B,KAAD,CAA9C,GAAwD4B,iBADhD,EAERZ,QAAQ,GAAG9C,KAAK,CAAC8C,QAAT,GAAoB9C,KAAK,CAAC6D,UAF1B,EAGR1C,SAHQ,CAFmB,EAO/B,CAACuC,iBAAD,EAAoBvC,SAApB,EAA+B2B,QAA/B,EAAyChB,KAAzC,CAP+B,CAAjC;EAUA,MAAMgC,SAAS,GAAGjF,OAAO,CAAC,MAAMW,IAAI,CAACuD,aAAD,CAAX,EAA4B,CAACA,aAAD,CAA5B,CAAzB;EAEA,MAAMgB,WAAW,GAAGlF,OAAO,CAAC,MAAMiF,SAAS,IAAI,EAApB,EAAwB,CAACA,SAAD,CAAxB,CAA3B;EAEA,oBACE;IACE,SAAS,EAAE9E,UAAU,CACnB4E,iBADmB,EAEnB9B,KAAK,KAAK,cAAV,GAA2B9B,KAAK,CAACU,YAAjC,GAAgD,IAF7B;EADvB,gBAME;IACE,aAAU,gBADZ;IAEE,KAAK,eACC8C,sBAAsB,IAAI;MAC5BtC;IAD4B,CAD3B,CAFP;IAOE,SAAS,EAAElB,KAAK,CAACgE;EAPnB,GASGnB,SATH,eAUE;IACE,aAAU,aADZ;IAEE,SAAS,EAAE7D,UAAU,CACnBgB,KAAK,CAACiE,UADa,EAEnB5E,QAAQ,CAACyC,KAAD,EAAQ,CAAC,QAAD,EAAW,SAAX,EAAsB,UAAtB,EAAkC,aAAlC,EAAiD,UAAjD,CAAR,CAAR,GACI9B,KAAK,CAACkE,aADV,GAEI,IAJe,EAKnB1C,eALmB,EAMnBuC,WAAW,GAAG/D,KAAK,CAACmE,SAAT,GAAqB,IANb,CAFvB;IAUE,KAAK,eACCX,sBAAsB,IAAI;MAC5BtC;IAD4B,CAD3B;EAVP,GAgBG6B,aAhBH,CAVF,eA4BE,oBAAC,SAAD;IACE,YAAY,EAAE,CAACrB,QADjB;IAEE,SAAS,EAAEb,SAFb;IAGE,SAAS,EAAEC,SAHb;IAIE,UAAU,EAAE0C,sBAAsB,GAAGxD,KAAK,CAACoE,aAAT,GAAyBpE,KAAK,CAACqE,KAJnE;IAKE,UAAU,EAAEd,oCAAoC,GAAGvC,UAAH,GAAgBsC;EALlE,EA5BF,eAmCE,2CACOnB,cAAc,IAAI,CAACrB,SAAnB,GAA+B;IAAC,mBAAmBqB;EAApB,CAA/B,GAAqE,EAD5E,EAEOrB,SAAS,IAAI,CAACqB,cAAd,GAA+B;IAAC,cAAcrB;EAAf,CAA/B,GAA2D,EAFlE;IAGE,aAAU,eAHZ;IAIE,SAAS,EAAEd,KAAK,CAACsE,SAJnB;IAKE,KAAK,EAAEvB,aALT;IAME,IAAI,EAAEzB,IANR;IAOE,QAAQ,EAAE4B,YAPZ;IAQE,KAAK,EAAEJ,QART;IASE,QAAQ,EAAEpB,QATZ;IAUE,QAAQ,EAAEC,QAVZ;IAWE,OAAO,EAAEW,mBAXX;IAYE,MAAM,EAAEC,kBAZV,CAaE;IACA;IACA;IAfF;IAgBE,YAAY,EAAEA,kBAhBhB;IAiBE,eAAY;EAjBd,IAmBGC,UAnBH,CAnCF,CANF,eA+DE;IAAK,SAAS,EAAExC,KAAK,CAAC6B;EAAtB,GAAoCA,WAApC,CA/DF,CADF;AAmED,CA/KD;;AAiLA,OAAO,MAAM0C,qBAAqB,GAAG;EACnCjD,IAAI,EAAEvC,SAAS,CAACyF,MAAV,CAAiBC,UADY;EAEnC9B,KAAK,EAAE5D,SAAS,CAAC2F,SAAV,CAAoB,CAAC3F,SAAS,CAACyF,MAAX,EAAmBzF,SAAS,CAAC4F,MAA7B,CAApB,CAF4B;EAGnC7B,QAAQ,EAAE/D,SAAS,CAAC6F,IAHe;EAInC3B,WAAW,EAAElE,SAAS,CAAC6F;AAJY,CAA9B;AAOPxD,MAAM,CAACyD,YAAP,GAAsB;EACpBzC,IAAI,EAAEvC,QAAQ,CAACiF,iBAAT,CAA2B1C;AADb,CAAtB;AAIAhB,MAAM,CAAC2D,SAAP,2CAAmB;EACjB9C,KAAK,EAAElD,SAAS,CAACyF,MADA;EAEjBlD,IAAI,EAAEvC,SAAS,CAACyF,MAFC;EAGjBrD,SAAS,EAAEpC,SAAS,CAACyF,MAHJ;EAIjBhD,eAAe,EAAEzC,SAAS,CAACyF,MAJV;EAKjB7C,QAAQ,EAAE5C,SAAS,CAAC6F,IALH;EAMjBlD,QAAQ,EAAE3C,SAAS,CAAC6F,IANH;EAOjB/C,WAAW,EAAE9C,SAAS,CAACyF,MAPN;EAQjB5C,QAAQ,EAAE7C,SAAS,CAAC6F,IARH;EASjBnD,QAAQ,EAAE1C,SAAS,CAACiG,IATH;EAUjBlD,KAAK,EAAE/C,SAAS,CAACkG,KAAV,CAAgB3F,IAAI,CAACW,UAAD,CAApB,CAVU;EAWjBsB,OAAO,EAAExC,SAAS,CAACmG,OAAV,CAAkBnG,SAAS,CAACoG,KAAV,CAAgBZ,qBAAhB,CAAlB,CAXQ;EAYjBxC,QAAQ,EAAEhD,SAAS,CAAC6F,IAZH;EAajB5C,KAAK,EAAEjD,SAAS,CAAC6F,IAbA;EAcjB,cAAc7F,SAAS,CAACyF,MAdP;EAejB,mBAAmBzF,SAAS,CAACyF;AAfZ,CAAnB;AAkBA,eAAepD,MAAf"}

package/es/molecule/answer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/answer/index.js"],"names":[],"mappings":";AA4EA,iDASC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/answer/index.js"],"names":[],"mappings":";AAuEA,iDASC"}

package/es/molecule/answer/index.js

@@ -14,7 +14,6 @@ import Qcm from '../questions/qcm';
 import QcmGraphic from '../questions/qcm-graphic';
 import QuestionRange from '../questions/question-range';
 import Template from '../questions/template';
-import Provider from '../../atom/provider';
 import Audio from '../audio';
 import style from './style.css';
 import propTypes, { MediaViewPropTypes, TYPE_AUDIO, TYPE_IMAGE, TYPE_VIDEO } from './prop-types';
@@ -64,8 +63,6 @@ MediaView.propTypes = process.env.NODE_ENV !== "production" ? MediaViewPropTypes
 const Switch = ({
   model,
   help
-}, {
-  translate
 }) => {
   const {
     type
@@ -87,9 +84,7 @@ const Switch = ({
       return /*#__PURE__*/React.createElement(FreeText, model);
 
     case 'dropDown':
-      return /*#__PURE__*/React.createElement(DropDown, _extends({}, model, {
-        "aria-label": translate('drop_down_icon')
-      }));
+      return /*#__PURE__*/React.createElement(DropDown, model);
 
     case 'slider':
       return /*#__PURE__*/React.createElement(QuestionRange, model);
@@ -103,9 +98,6 @@ Switch.propTypes = process.env.NODE_ENV !== "production" ? {
   model: propTypes.model,
   help: propTypes.help
 } : {};
-Switch.contextTypes = {
-  translate: Provider.childContextTypes.translate
-};
 
 const Answer = props => {
   const {

package/es/molecule/answer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","VideoPlayer","DropDown","FreeText","QcmDrag","Qcm","QcmGraphic","QuestionRange","Template","Provider","Audio","style","propTypes","MediaViewPropTypes","TYPE_AUDIO","TYPE_IMAGE","TYPE_VIDEO","MediaView","media","videoId","type","childProps","backgroundImage","url","video","audio","Switch","model","help","translate","contextTypes","childContextTypes","Answer","props","wrapper"],"sources":["../../../src/molecule/answer/index.js"],"sourcesContent":["import React from 'react';\nimport {omit} from 'lodash/fp';\nimport VideoPlayer from '../video-player';\nimport DropDown from '../questions/drop-down';\nimport FreeText from '../questions/free-text';\nimport QcmDrag from '../questions/qcm-drag';\nimport Qcm from '../questions/qcm';\nimport QcmGraphic from '../questions/qcm-graphic';\nimport QuestionRange from '../questions/question-range';\nimport Template from '../questions/template';\nimport Provider from '../../atom/provider';\nimport Audio from '../audio';\nimport style from './style.css';\nimport propTypes, {MediaViewPropTypes, TYPE_AUDIO, TYPE_IMAGE, TYPE_VIDEO} from './prop-types';\n\nconst MediaView = ({media}) => {\n  const {videoId, type, ...childProps} = media;\n  switch (type) {\n    case TYPE_IMAGE:\n      return (\n        <div\n          className={style.media}\n          style={{\n            backgroundImage: `url(${media.url})`\n          }}\n        />\n      );\n    case TYPE_VIDEO:\n      return (\n        <div className={style.video}>\n          <VideoPlayer {...omit('id', childProps)} id={videoId} height=\"100%\" width=\"100%\" />\n        </div>\n      );\n    case TYPE_AUDIO:\n      return (\n        <div className={style.audio}>\n          <Audio {...omit('id', childProps)} height=\"100%\" width=\"100%\" />\n        </div>\n      );\n    default:\n      return null;\n  }\n};\n\nMediaView.propTypes = MediaViewPropTypes;\n\nconst Switch = ({model, help}, {translate}) => {\n  const {type} = model;\n\n  switch (type) {\n    case 'qcmDrag':\n      return <QcmDrag {...model} help={help} />;\n    case 'qcm':\n      return <Qcm {...model} />;\n    case 'qcmGraphic':\n      return <QcmGraphic {...model} />;\n    case 'freeText':\n      return <FreeText {...model} />;\n    case 'dropDown':\n      return <DropDown {...model} aria-label={translate('drop_down_icon')} />;\n    case 'slider':\n      return <QuestionRange {...model} />;\n    case 'template':\n      return <Template {...model} />;\n  }\n};\n\nSwitch.propTypes = {\n  model: propTypes.model,\n  help: propTypes.help\n};\n\nSwitch.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nconst Answer = props => {\n  const {model, media, help} = props;\n\n  return (\n    <div data-name=\"answer\" className={style.wrapper}>\n      {media ? <MediaView media={media} /> : null}\n      <Switch model={model} help={help} />\n    </div>\n  );\n};\n\nAnswer.propTypes = propTypes;\n\nexport default Answer;\n"],"mappings":";;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,WAAP,MAAwB,iBAAxB;AACA,OAAOC,QAAP,MAAqB,wBAArB;AACA,OAAOC,QAAP,MAAqB,wBAArB;AACA,OAAOC,OAAP,MAAoB,uBAApB;AACA,OAAOC,GAAP,MAAgB,kBAAhB;AACA,OAAOC,UAAP,MAAuB,0BAAvB;AACA,OAAOC,aAAP,MAA0B,6BAA1B;AACA,OAAOC,QAAP,MAAqB,uBAArB;AACA,OAAOC,QAAP,MAAqB,qBAArB;AACA,OAAOC,KAAP,MAAkB,UAAlB;AACA,OAAOC,KAAP,MAAkB,aAAlB;AACA,OAAOC,SAAP,IAAmBC,kBAAnB,EAAuCC,UAAvC,EAAmDC,UAAnD,EAA+DC,UAA/D,QAAgF,cAAhF;;AAEA,MAAMC,SAAS,GAAG,CAAC;EAACC;AAAD,CAAD,KAAa;EAC7B,MAAM;IAACC,OAAD;IAAUC;EAAV,IAAiCF,KAAvC;EAAA,MAAyBG,UAAzB,iCAAuCH,KAAvC;;EACA,QAAQE,IAAR;IACE,KAAKL,UAAL;MACE,oBACE;QACE,SAAS,EAAEJ,KAAK,CAACO,KADnB;QAEE,KAAK,EAAE;UACLI,eAAe,EAAG,OAAMJ,KAAK,CAACK,GAAI;QAD7B;MAFT,EADF;;IAQF,KAAKP,UAAL;MACE,oBACE;QAAK,SAAS,EAAEL,KAAK,CAACa;MAAtB,gBACE,oBAAC,WAAD,eAAiB,MAAK,IAAL,EAAWH,UAAX,CAAjB;QAAyC,EAAE,EAAEF,OAA7C;QAAsD,MAAM,EAAC,MAA7D;QAAoE,KAAK,EAAC;MAA1E,GADF,CADF;;IAKF,KAAKL,UAAL;MACE,oBACE;QAAK,SAAS,EAAEH,KAAK,CAACc;MAAtB,gBACE,oBAAC,KAAD,eAAW,MAAK,IAAL,EAAWJ,UAAX,CAAX;QAAmC,MAAM,EAAC,MAA1C;QAAiD,KAAK,EAAC;MAAvD,GADF,CADF;;IAKF;MACE,OAAO,IAAP;EAvBJ;AAyBD,CA3BD;;AA6BAJ,SAAS,CAACL,SAAV,2CAAsBC,kBAAtB;;AAEA,MAAMa,MAAM,GAAG,CAAC;EAACC,KAAD;EAAQC;AAAR,CAAD,EAAgB;EAACC;AAAD,CAAhB,KAAgC;EAC7C,MAAM;IAACT;EAAD,IAASO,KAAf;;EAEA,QAAQP,IAAR;IACE,KAAK,SAAL;MACE,oBAAO,oBAAC,OAAD,eAAaO,KAAb;QAAoB,IAAI,EAAEC;MAA1B,GAAP;;IACF,KAAK,KAAL;MACE,oBAAO,oBAAC,GAAD,EAASD,KAAT,CAAP;;IACF,KAAK,YAAL;MACE,oBAAO,oBAAC,UAAD,EAAgBA,KAAhB,CAAP;;IACF,KAAK,UAAL;MACE,oBAAO,oBAAC,QAAD,EAAcA,KAAd,CAAP;;IACF,KAAK,UAAL;MACE,oBAAO,oBAAC,QAAD,eAAcA,KAAd;QAAqB,cAAYE,SAAS,CAAC,gBAAD;MAA1C,GAAP;;IACF,KAAK,QAAL;MACE,oBAAO,oBAAC,aAAD,EAAmBF,KAAnB,CAAP;;IACF,KAAK,UAAL;MACE,oBAAO,oBAAC,QAAD,EAAcA,KAAd,CAAP;EAdJ;AAgBD,CAnBD;;AAqBAD,MAAM,CAACd,SAAP,2CAAmB;EACjBe,KAAK,EAAEf,SAAS,CAACe,KADA;EAEjBC,IAAI,EAAEhB,SAAS,CAACgB;AAFC,CAAnB;AAKAF,MAAM,CAACI,YAAP,GAAsB;EACpBD,SAAS,EAAEpB,QAAQ,CAACsB,iBAAT,CAA2BF;AADlB,CAAtB;;AAIA,MAAMG,MAAM,GAAGC,KAAK,IAAI;EACtB,MAAM;IAACN,KAAD;IAAQT,KAAR;IAAeU;EAAf,IAAuBK,KAA7B;EAEA,oBACE;IAAK,aAAU,QAAf;IAAwB,SAAS,EAAEtB,KAAK,CAACuB;EAAzC,GACGhB,KAAK,gBAAG,oBAAC,SAAD;IAAW,KAAK,EAAEA;EAAlB,EAAH,GAAiC,IADzC,eAEE,oBAAC,MAAD;IAAQ,KAAK,EAAES,KAAf;IAAsB,IAAI,EAAEC;EAA5B,EAFF,CADF;AAMD,CATD;;AAWAI,MAAM,CAACpB,SAAP,2CAAmBA,SAAnB;AAEA,eAAeoB,MAAf"}
+{"version":3,"file":"index.js","names":["React","VideoPlayer","DropDown","FreeText","QcmDrag","Qcm","QcmGraphic","QuestionRange","Template","Audio","style","propTypes","MediaViewPropTypes","TYPE_AUDIO","TYPE_IMAGE","TYPE_VIDEO","MediaView","media","videoId","type","childProps","backgroundImage","url","video","audio","Switch","model","help","Answer","props","wrapper"],"sources":["../../../src/molecule/answer/index.js"],"sourcesContent":["import React from 'react';\nimport {omit} from 'lodash/fp';\nimport VideoPlayer from '../video-player';\nimport DropDown from '../questions/drop-down';\nimport FreeText from '../questions/free-text';\nimport QcmDrag from '../questions/qcm-drag';\nimport Qcm from '../questions/qcm';\nimport QcmGraphic from '../questions/qcm-graphic';\nimport QuestionRange from '../questions/question-range';\nimport Template from '../questions/template';\nimport Audio from '../audio';\nimport style from './style.css';\nimport propTypes, {MediaViewPropTypes, TYPE_AUDIO, TYPE_IMAGE, TYPE_VIDEO} from './prop-types';\n\nconst MediaView = ({media}) => {\n  const {videoId, type, ...childProps} = media;\n  switch (type) {\n    case TYPE_IMAGE:\n      return (\n        <div\n          className={style.media}\n          style={{\n            backgroundImage: `url(${media.url})`\n          }}\n        />\n      );\n    case TYPE_VIDEO:\n      return (\n        <div className={style.video}>\n          <VideoPlayer {...omit('id', childProps)} id={videoId} height=\"100%\" width=\"100%\" />\n        </div>\n      );\n    case TYPE_AUDIO:\n      return (\n        <div className={style.audio}>\n          <Audio {...omit('id', childProps)} height=\"100%\" width=\"100%\" />\n        </div>\n      );\n    default:\n      return null;\n  }\n};\n\nMediaView.propTypes = MediaViewPropTypes;\n\nconst Switch = ({model, help}) => {\n  const {type} = model;\n\n  switch (type) {\n    case 'qcmDrag':\n      return <QcmDrag {...model} help={help} />;\n    case 'qcm':\n      return <Qcm {...model} />;\n    case 'qcmGraphic':\n      return <QcmGraphic {...model} />;\n    case 'freeText':\n      return <FreeText {...model} />;\n    case 'dropDown':\n      return <DropDown {...model} />;\n    case 'slider':\n      return <QuestionRange {...model} />;\n    case 'template':\n      return <Template {...model} />;\n  }\n};\n\nSwitch.propTypes = {\n  model: propTypes.model,\n  help: propTypes.help\n};\n\nconst Answer = props => {\n  const {model, media, help} = props;\n\n  return (\n    <div data-name=\"answer\" className={style.wrapper}>\n      {media ? <MediaView media={media} /> : null}\n      <Switch model={model} help={help} />\n    </div>\n  );\n};\n\nAnswer.propTypes = propTypes;\n\nexport default Answer;\n"],"mappings":"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"}

package/es/molecule/brand-form-group/index.d.ts

@@ -99,6 +99,7 @@ declare namespace BrandFormGroup {
             modified: PropTypes.Requireable<boolean>;
             error: PropTypes.Requireable<boolean>;
             'aria-label': PropTypes.Requireable<string>;
+            'aria-labelledby': PropTypes.Requireable<string>;
         }> | PropTypes.InferProps<{
             type: PropTypes.Requireable<string>;
             title: PropTypes.Validator<string>;
@@ -203,6 +204,7 @@ declare namespace BrandFormGroup {
                     modified: PropTypes.Requireable<boolean>;
                     error: PropTypes.Requireable<boolean>;
                     'aria-label': PropTypes.Requireable<string>;
+                    'aria-labelledby': PropTypes.Requireable<string>;
                 }> | PropTypes.InferProps<{
                     type: PropTypes.Requireable<string>;
                     title: PropTypes.Validator<string>;

package/es/molecule/empty-state-dashboard/index.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { Props } from './types';
+declare const EmptyStateDashboard: {
+    ({ mainText, subText, imageUrl, buttonLink }: Props): JSX.Element;
+    propTypes: {
+        mainText: import("prop-types").Requireable<string>;
+        subText: import("prop-types").Requireable<string>;
+        imageUrl: import("prop-types").Requireable<any>;
+        buttonLink: import("prop-types").Requireable<import("prop-types").InferProps<{
+            type: import("prop-types").Requireable<string>;
+            label: import("prop-types").Requireable<string>;
+            ariaLabel: import("prop-types").Requireable<string>;
+            dataName: import("prop-types").Requireable<string>;
+            icon: import("prop-types").Requireable<import("prop-types").InferProps<{
+                position: import("prop-types").Requireable<string>;
+                type: import("prop-types").Requireable<string>;
+            }>>;
+            onClick: import("prop-types").Requireable<(...args: any[]) => any>;
+        }>>;
+    };
+};
+export default EmptyStateDashboard;
+//# sourceMappingURL=index.d.ts.map

package/es/molecule/empty-state-dashboard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/empty-state-dashboard/index.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAC,KAAK,EAAY,MAAM,SAAS,CAAC;AAEzC,QAAA,MAAM,mBAAmB;kDAA+C,KAAK;;;;;;;;;;;;;;;;;CAW5E,CAAC;AAIF,eAAe,mBAAmB,CAAC"}

package/es/molecule/empty-state-dashboard/index.js

@@ -0,0 +1,31 @@
+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 ButtonLink from '../../atom/button-link';
+import style from './style.css';
+import { propTypes } from './types';
+
+const EmptyStateDashboard = ({
+  mainText,
+  subText,
+  imageUrl,
+  buttonLink
+}) => /*#__PURE__*/React.createElement("div", {
+  className: style.container
+}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", {
+  className: style.img,
+  src: imageUrl,
+  "aria-hidden": "true"
+})), /*#__PURE__*/React.createElement("p", {
+  className: style.mainText
+}, mainText), /*#__PURE__*/React.createElement("p", {
+  className: style.subText
+}, subText), /*#__PURE__*/React.createElement("div", {
+  className: style.buttonContainer
+}, /*#__PURE__*/React.createElement(ButtonLink, _extends({}, buttonLink, {
+  className: style.button
+}))));
+
+EmptyStateDashboard.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
+export default EmptyStateDashboard;
+//# sourceMappingURL=index.js.map

package/es/molecule/empty-state-dashboard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","ButtonLink","style","propTypes","EmptyStateDashboard","mainText","subText","imageUrl","buttonLink","container","img","buttonContainer","button"],"sources":["../../../src/molecule/empty-state-dashboard/index.tsx"],"sourcesContent":["import React from 'react';\nimport ButtonLink from '../../atom/button-link';\nimport style from './style.css';\nimport {Props, propTypes} from './types';\n\nconst EmptyStateDashboard = ({mainText, subText, imageUrl, buttonLink}: Props) => (\n  <div className={style.container}>\n    <div>\n      <img className={style.img} src={imageUrl} aria-hidden=\"true\" />\n    </div>\n    <p className={style.mainText}>{mainText}</p>\n    <p className={style.subText}>{subText}</p>\n    <div className={style.buttonContainer}>\n      <ButtonLink {...buttonLink} className={style.button} />\n    </div>\n  </div>\n);\n\nEmptyStateDashboard.propTypes = propTypes;\n\nexport default EmptyStateDashboard;\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,wBAAvB;AACA,OAAOC,KAAP,MAAkB,aAAlB;AACA,SAAeC,SAAf,QAA+B,SAA/B;;AAEA,MAAMC,mBAAmB,GAAG,CAAC;EAACC,QAAD;EAAWC,OAAX;EAAoBC,QAApB;EAA8BC;AAA9B,CAAD,kBAC1B;EAAK,SAAS,EAAEN,KAAK,CAACO;AAAtB,gBACE,8CACE;EAAK,SAAS,EAAEP,KAAK,CAACQ,GAAtB;EAA2B,GAAG,EAAEH,QAAhC;EAA0C,eAAY;AAAtD,EADF,CADF,eAIE;EAAG,SAAS,EAAEL,KAAK,CAACG;AAApB,GAA+BA,QAA/B,CAJF,eAKE;EAAG,SAAS,EAAEH,KAAK,CAACI;AAApB,GAA8BA,OAA9B,CALF,eAME;EAAK,SAAS,EAAEJ,KAAK,CAACS;AAAtB,gBACE,oBAAC,UAAD,eAAgBH,UAAhB;EAA4B,SAAS,EAAEN,KAAK,CAACU;AAA7C,GADF,CANF,CADF;;AAaAR,mBAAmB,CAACD,SAApB,2CAAgCA,SAAhC;AAEA,eAAeC,mBAAf"}

package/es/molecule/empty-state-dashboard/style.css

@@ -0,0 +1,55 @@
+@value colors: "../../variables/colors.css";
+@value cm_grey_500: from colors;
+@value cm_grey_800: from colors;
+
+
+.container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: center;
+    overflow: hidden;
+    text-align: center;
+    width: 100%;
+}
+
+.img {
+    height: 170px;
+    width: 220px;
+}
+
+.text {
+    font-family: 'Gilroy';
+    margin: 0 auto 0 auto;
+}
+
+.mainText {
+    composes: text;
+    color: cm_grey_800;
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 32px;
+    padding-top: 36px;
+}
+
+.subText {
+    composes: text;
+    color: cm_grey_500;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    padding-top: 4px;
+    ;
+}
+
+.buttonContainer {
+    display: flex;
+    justify-content: center;
+    padding-top: 32px;
+    width: 100%;
+}
+
+.button {
+    width: 152px;
+    height: 44px;
+}

package/es/molecule/empty-state-dashboard/types.d.ts

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+export declare const propTypes: {
+    mainText: PropTypes.Requireable<string>;
+    subText: PropTypes.Requireable<string>;
+    imageUrl: PropTypes.Requireable<any>;
+    buttonLink: PropTypes.Requireable<PropTypes.InferProps<{
+        type: PropTypes.Requireable<string>;
+        label: PropTypes.Requireable<string>;
+        ariaLabel: PropTypes.Requireable<string>;
+        dataName: PropTypes.Requireable<string>;
+        icon: PropTypes.Requireable<PropTypes.InferProps<{
+            position: PropTypes.Requireable<string>;
+            type: PropTypes.Requireable<string>;
+        }>>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    }>>;
+};
+export declare type Props = PropTypes.InferProps<typeof propTypes>;
+//# sourceMappingURL=types.d.ts.map

package/es/molecule/empty-state-dashboard/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/empty-state-dashboard/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAGnC,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;CAerB,CAAC;AAEF,oBAAY,KAAK,GAAG,SAAS,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC"}

package/es/molecule/empty-state-dashboard/types.js

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+import Picture from '../../atom/picture';
+export const propTypes = {
+  mainText: PropTypes.string,
+  subText: PropTypes.string,
+  imageUrl: Picture.propTypes.src,
+  buttonLink: PropTypes.shape({
+    type: PropTypes.string,
+    label: PropTypes.string,
+    ariaLabel: PropTypes.string,
+    dataName: PropTypes.string,
+    icon: PropTypes.shape({
+      position: PropTypes.string,
+      type: PropTypes.string
+    }),
+    onClick: PropTypes.func
+  })
+};
+//# sourceMappingURL=types.js.map

package/es/molecule/empty-state-dashboard/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":["PropTypes","Picture","propTypes","mainText","string","subText","imageUrl","src","buttonLink","shape","type","label","ariaLabel","dataName","icon","position","onClick","func"],"sources":["../../../src/molecule/empty-state-dashboard/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\nimport Picture from '../../atom/picture';\n\nexport const propTypes = {\n  mainText: PropTypes.string,\n  subText: PropTypes.string,\n  imageUrl: Picture.propTypes.src,\n  buttonLink: PropTypes.shape({\n    type: PropTypes.string,\n    label: PropTypes.string,\n    ariaLabel: PropTypes.string,\n    dataName: PropTypes.string,\n    icon: PropTypes.shape({\n      position: PropTypes.string,\n      type: PropTypes.string\n    }),\n    onClick: PropTypes.func\n  })\n};\n\nexport type Props = PropTypes.InferProps<typeof propTypes>;\n"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,YAAtB;AACA,OAAOC,OAAP,MAAoB,oBAApB;AAEA,OAAO,MAAMC,SAAS,GAAG;EACvBC,QAAQ,EAAEH,SAAS,CAACI,MADG;EAEvBC,OAAO,EAAEL,SAAS,CAACI,MAFI;EAGvBE,QAAQ,EAAEL,OAAO,CAACC,SAAR,CAAkBK,GAHL;EAIvBC,UAAU,EAAER,SAAS,CAACS,KAAV,CAAgB;IAC1BC,IAAI,EAAEV,SAAS,CAACI,MADU;IAE1BO,KAAK,EAAEX,SAAS,CAACI,MAFS;IAG1BQ,SAAS,EAAEZ,SAAS,CAACI,MAHK;IAI1BS,QAAQ,EAAEb,SAAS,CAACI,MAJM;IAK1BU,IAAI,EAAEd,SAAS,CAACS,KAAV,CAAgB;MACpBM,QAAQ,EAAEf,SAAS,CAACI,MADA;MAEpBM,IAAI,EAAEV,SAAS,CAACI;IAFI,CAAhB,CALoB;IAS1BY,OAAO,EAAEhB,SAAS,CAACiB;EATO,CAAhB;AAJW,CAAlB"}

package/es/molecule/filters/index.d.ts

@@ -31,6 +31,7 @@ declare class Filters extends React.Component<any, any, any> {
             modified: PropTypes.Requireable<boolean>;
             error: PropTypes.Requireable<boolean>;
             'aria-label': PropTypes.Requireable<string>;
+            'aria-labelledby': PropTypes.Requireable<string>;
         }>>;
         onSearch: PropTypes.Requireable<(...args: any[]) => any>;
         onToggleFilters: PropTypes.Requireable<(...args: any[]) => any>;

package/es/molecule/filters/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/filters/index.js"],"names":[],"mappings":";AASA;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAcE;IAEF;;;;;;;;;;;;;;;;;;;;;;MAEE;IAEF,wBASC;IAPC;;;MAGC;IAMH,yBAcC;IAED,uBAYC;IAED,qBAOC;IAED,sBAsFC;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/filters/index.js"],"names":[],"mappings":";AASA;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAcE;IAEF;;;;;;;;;;;;;;;;;;;;;;MAEE;IAEF,wBASC;IAPC;;;MAGC;IAMH,yBAcC;IAED,uBAYC;IAED,qBAOC;IAED,sBAsFC;CACF"}

package/es/molecule/setup-slide/index.d.ts

@@ -57,6 +57,7 @@ declare namespace SetupSlide {
             modified: PropTypes.Requireable<boolean>;
             error: PropTypes.Requireable<boolean>;
             'aria-label': PropTypes.Requireable<string>;
+            'aria-labelledby': PropTypes.Requireable<string>;
         }> | PropTypes.InferProps<{
             type: PropTypes.Requireable<string>;
             title: PropTypes.Validator<string>;

package/es/molecule/setup-slider/index.d.ts

@@ -70,6 +70,7 @@ declare namespace SetupSlider {
                 modified: PropTypes.Requireable<boolean>;
                 error: PropTypes.Requireable<boolean>;
                 'aria-label': PropTypes.Requireable<string>;
+                'aria-labelledby': PropTypes.Requireable<string>;
             }> | PropTypes.InferProps<{
                 type: PropTypes.Requireable<string>;
                 title: PropTypes.Validator<string>;

package/es/organism/brand-form/index.d.ts

@@ -129,6 +129,7 @@ declare namespace BrandForm {
                 modified: PropTypes.Requireable<boolean>;
                 error: PropTypes.Requireable<boolean>;
                 'aria-label': PropTypes.Requireable<string>;
+                'aria-labelledby': PropTypes.Requireable<string>;
             }> | PropTypes.InferProps<{
                 type: PropTypes.Requireable<string>;
                 title: PropTypes.Validator<string>;
@@ -233,6 +234,7 @@ declare namespace BrandForm {
                         modified: PropTypes.Requireable<boolean>;
                         error: PropTypes.Requireable<boolean>;
                         'aria-label': PropTypes.Requireable<string>;
+                        'aria-labelledby': PropTypes.Requireable<string>;
                     }> | PropTypes.InferProps<{
                         type: PropTypes.Requireable<string>;
                         title: PropTypes.Validator<string>;

package/es/organism/list-item/index.d.ts

@@ -1,8 +1,8 @@
 export default ListItem;
 declare function ListItem(props: any): JSX.Element;
 declare namespace ListItem {
-    namespace propTypes {
-        const bulletPointMenuButton: PropTypes.Requireable<PropTypes.InferProps<{
+    const propTypes: {
+        bulletPointMenuButton: PropTypes.Requireable<PropTypes.InferProps<{
             buttonAriaLabel: PropTypes.Requireable<string>;
             menuAriaLabel: PropTypes.Requireable<string>;
             buttons: PropTypes.Requireable<(PropTypes.InferProps<{
@@ -13,7 +13,7 @@ declare namespace ListItem {
             }> | null | undefined)[]>;
             onClick: PropTypes.Requireable<(...args: any[]) => any>;
         }>>;
-        const buttonLink: PropTypes.Requireable<PropTypes.InferProps<{
+        buttonLink: PropTypes.Requireable<PropTypes.InferProps<{
             type: PropTypes.Requireable<string>;
             label: PropTypes.Requireable<string>;
             ariaLabel: PropTypes.Requireable<string>;
@@ -24,12 +24,14 @@ declare namespace ListItem {
             }>>;
             onClick: PropTypes.Requireable<(...args: any[]) => any>;
         }>>;
-        const tags: PropTypes.Requireable<(PropTypes.InferProps<{
+        tags: PropTypes.Requireable<(PropTypes.InferProps<{
             label: PropTypes.Requireable<string>;
             type: PropTypes.Requireable<string>;
         }> | null | undefined)[]>;
-        const title: PropTypes.Validator<string>;
-    }
+        title: PropTypes.Validator<string>;
+        order: PropTypes.Requireable<number>;
+        'aria-label': PropTypes.Requireable<string>;
+    };
 }
 import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

package/es/organism/list-item/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/list-item/index.js"],"names":[],"mappings":";AAQA,mDAuBC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/list-item/index.js"],"names":[],"mappings":";AAQA,mDAqCC"}

package/es/organism/list-item/index.js

@@ -7,16 +7,20 @@ import BulletPointMenuButton from '../../molecule/bullet-point-menu-button';
 import style from './style.css';
 
 const ListItem = props => {
+  let isPublished = false;
   const {
     bulletPointMenuButton,
     buttonLink,
     tags,
-    title
+    title,
+    order,
+    'aria-label': ariaLabel
   } = props;
 
   const tagsView = _map.convert({
     cap: false
   })((tag, index) => {
+    isPublished = tag.type === 'published';
     return /*#__PURE__*/React.createElement("div", {
       key: index,
       className: style.tag
@@ -25,7 +29,15 @@ const ListItem = props => {
 
   return /*#__PURE__*/React.createElement("div", {
     className: style.wrapper
+  }, isPublished ? /*#__PURE__*/React.createElement("div", {
+    className: style.orderWrapper
   }, /*#__PURE__*/React.createElement("div", {
+    className: style.order,
+    "aria-label": ariaLabel
+  }, order + 1), /*#__PURE__*/React.createElement("div", {
+    className: style.title,
+    title: title
+  }, title)) : /*#__PURE__*/React.createElement("div", {
     className: style.title,
     title: title
   }, title), /*#__PURE__*/React.createElement("div", {
@@ -62,7 +74,9 @@ ListItem.propTypes = process.env.NODE_ENV !== "production" ? {
     label: PropTypes.string,
     type: PropTypes.oneOf(['published', 'draft', 'archived', 'revised', 'default'])
   })),
-  title: PropTypes.string.isRequired
+  title: PropTypes.string.isRequired,
+  order: PropTypes.number,
+  'aria-label': PropTypes.string
 } : {};
 export default ListItem;
 //# sourceMappingURL=index.js.map