@coorpacademy/components 11.32.48-alpha.78 → 11.32.48

package/lib/molecule/expandible-actionable-table/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/expandible-actionable-table/index.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAC,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AAOjE,OAAO,EAA2C,KAAK,EAAY,MAAM,SAAS,CAAC;AAqCnF,QAAA,MAAM,yBAAyB;YAAW,KAAK,iBAAiB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoL/E,CAAC;AASF,eAAe,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/expandible-actionable-table/index.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAC,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AAOjE,OAAO,EAA2C,KAAK,EAAY,MAAM,SAAS,CAAC;AAqCnF,QAAA,MAAM,yBAAyB;YAAW,KAAK,iBAAiB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoL/E,CAAC;AASF,eAAe,yBAAyB,CAAC"}

package/lib/molecule/expandible-actionable-table/types.d.ts

@@ -45,6 +45,8 @@ export declare const propTypes: {
         label: PropTypes.Requireable<string>;
         content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         'aria-label': PropTypes.Requireable<string>;
+        tooltipText: PropTypes.Requireable<string>;
+        tooltipPlacement: PropTypes.Requireable<string>;
         'data-name': PropTypes.Requireable<string>;
         'data-testid': PropTypes.Requireable<string>;
         icon: PropTypes.Requireable<PropTypes.InferProps<{

package/lib/molecule/expandible-actionable-table/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/expandible-actionable-table/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAInC,OAAO,EAAC,0BAA0B,EAAC,MAAM,mCAAmC,CAAC;AAC7E,OAAO,EAAC,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAC,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAC,KAAK,IAAI,gBAAgB,EAAC,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAC,KAAK,IAAI,oBAAoB,EAAC,MAAM,4BAA4B,CAAC;AA0BzE,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoBrB,CAAC;AAEF,oBAAY,KAAK,GACb,MAAM,GACN,CAAC,eAAe,GAAG;IACjB,aAAa,EAAE,QAAQ,CAAC;CACzB,CAAC,GACF,CAAC,oBAAoB,GAAG;IACtB,aAAa,EAAE,cAAc,CAAC;CAC/B,CAAC,CAAC;AAEP,oBAAY,SAAS,GACjB,CAAC,eAAe,GAAG;IACjB,aAAa,EAAE,aAAa,CAAC;CAC9B,CAAC,GACF,CAAC,0BAA0B,GAAG;IAC5B,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC,CAAC;AAEP,oBAAY,SAAS,GACjB,CAAC,gBAAgB,GAAG;IAClB,aAAa,EAAE,cAAc,CAAC;CAC/B,CAAC,GACF,CAAC,KAAK,GAAG;IACP,aAAa,EAAE,yBAAyB,CAAC;CAC1C,CAAC,CAAC;AAEP,oBAAY,MAAM,GAAG;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC;AACrC,oBAAY,GAAG,GAAG;IAChB,MAAM,EAAE,KAAK,EAAE,CAAC;IAEhB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AACF,oBAAY,OAAO,GAAG,MAAM,EAAE,CAAC;AAC/B,oBAAY,IAAI,GAAG,GAAG,EAAE,CAAC;AAEzB,oBAAY,KAAK,GAAG;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,GAAG,MAAM,GAAG,IAAI,GAAG,GAAG,EAAE,CAAC;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC,CAAC;AAEF,oBAAY,WAAW,GAAG;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/expandible-actionable-table/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAInC,OAAO,EAAC,0BAA0B,EAAC,MAAM,mCAAmC,CAAC;AAC7E,OAAO,EAAC,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAC,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAC,KAAK,IAAI,gBAAgB,EAAC,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAC,KAAK,IAAI,oBAAoB,EAAC,MAAM,4BAA4B,CAAC;AA0BzE,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoBrB,CAAC;AAEF,oBAAY,KAAK,GACb,MAAM,GACN,CAAC,eAAe,GAAG;IACjB,aAAa,EAAE,QAAQ,CAAC;CACzB,CAAC,GACF,CAAC,oBAAoB,GAAG;IACtB,aAAa,EAAE,cAAc,CAAC;CAC/B,CAAC,CAAC;AAEP,oBAAY,SAAS,GACjB,CAAC,eAAe,GAAG;IACjB,aAAa,EAAE,aAAa,CAAC;CAC9B,CAAC,GACF,CAAC,0BAA0B,GAAG;IAC5B,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC,CAAC;AAEP,oBAAY,SAAS,GACjB,CAAC,gBAAgB,GAAG;IAClB,aAAa,EAAE,cAAc,CAAC;CAC/B,CAAC,GACF,CAAC,KAAK,GAAG;IACP,aAAa,EAAE,yBAAyB,CAAC;CAC1C,CAAC,CAAC;AAEP,oBAAY,MAAM,GAAG;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC;AACrC,oBAAY,GAAG,GAAG;IAChB,MAAM,EAAE,KAAK,EAAE,CAAC;IAEhB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AACF,oBAAY,OAAO,GAAG,MAAM,EAAE,CAAC;AAC/B,oBAAY,IAAI,GAAG,GAAG,EAAE,CAAC;AAEzB,oBAAY,KAAK,GAAG;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,GAAG,MAAM,GAAG,IAAI,GAAG,GAAG,EAAE,CAAC;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC,CAAC;AAEF,oBAAY,WAAW,GAAG;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CAAC,CAAC"}

package/lib/molecule/skill-picker-modal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/skill-picker-modal/index.js"],"names":[],"mappings":";AAUA,gFAoKC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/skill-picker-modal/index.js"],"names":[],"mappings":";AAUA,gFAsKC"}

package/lib/molecule/skill-picker-modal/index.js

@@ -50,6 +50,7 @@ const SkillPickerModal = (props, context) => {
   const {
     translate
   } = context;
+  const detectScrollbar = true;
   const [sortedSkills, setSortedSkills] = (0, _react.useState)((0, _sortBy2.default)(skill => skillsLocales[skill], skills));
   const [currentSort, setCurrentSort] = (0, _react.useState)('alphabetical');
   const [selectedSkillList, setSelectedSkillList] = (0, _react.useState)(selectedSkills);
@@ -118,7 +119,8 @@ const SkillPickerModal = (props, context) => {
     headerIcon: {
       name: 'bullseye-arrow',
       backgroundColor: '#DDD1FF'
-    }
+    },
+    detectScrollbar: detectScrollbar
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.skillPickerContainer
   }, isLoading ? /*#__PURE__*/_react.default.createElement("div", {

package/lib/molecule/skill-picker-modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["SkillPickerModal","props","context","skills","selectedSkills","skillsLocales","skillsScore","isOpen","isLoading","maxSelectedSkills","minSelectedSkills","onCancel","onConfirm","onClose","translate","sortedSkills","setSortedSkills","useState","skill","currentSort","setCurrentSort","selectedSkillList","setSelectedSkillList","handleCancel","useCallback","handleClose","skillProgressAvailable","skillList","useMemo","map","skillTitle","skillRef","focus","includes","score","isError","length","footer","footerDescription","skillNumber","text","cancelButton","label","disabled","confirmButton","iconName","sorting","theme","options","value","name","selected","onChange","useEffect","prev","backgroundColor","style","skillPickerContainer","loaderContainer","loader","ctaWrapper","sortWrapper","display","gap","flexWrap","index","handleChipClick","newSelectedSkillList","selectedSkill","subText","toFixed","contextTypes","Provider","childContextTypes","propTypes","PropTypes","arrayOf","string","objectOf","number","bool","func"],"sources":["../../../src/molecule/skill-picker-modal/index.js"],"sourcesContent":["import React, {useMemo, useState, useCallback, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport {filter, some, sortBy} from 'lodash/fp';\nimport BaseModal from '../base-modal';\nimport Chip from '../../atom/chip';\nimport Loader from '../../atom/loader';\nimport Select from '../../atom/select';\nimport Provider from '../../atom/provider';\nimport style from './style.css';\n\nconst SkillPickerModal = (props, context) => {\n  const {\n    skills,\n    selectedSkills,\n    skillsLocales,\n    skillsScore,\n    isOpen,\n    isLoading,\n    maxSelectedSkills = 6,\n    minSelectedSkills = 3,\n    onCancel,\n    onConfirm,\n    onClose\n  } = props;\n  const {translate} = context;\n\n  const [sortedSkills, setSortedSkills] = useState(sortBy(skill => skillsLocales[skill], skills));\n  const [currentSort, setCurrentSort] = useState('alphabetical');\n  const [selectedSkillList, setSelectedSkillList] = useState(selectedSkills);\n\n  const handleCancel = useCallback(() => {\n    setSelectedSkillList(selectedSkills);\n    onCancel();\n  }, [setSelectedSkillList, selectedSkills, onCancel]);\n\n  const handleClose = useCallback(() => {\n    setSelectedSkillList(selectedSkills);\n    onClose();\n  }, [setSelectedSkillList, selectedSkills, onClose]);\n\n  const skillProgressAvailable = some(skill => skillsScore[skill] > 0, skills);\n\n  const skillList = useMemo(() => {\n    return sortedSkills.map(skill => {\n      return {\n        skillTitle: skillsLocales[skill],\n        skillRef: skill,\n        focus: selectedSkillList.includes(skill),\n        score: skillsScore[skill]\n      };\n    });\n  }, [sortedSkills, selectedSkillList, skillsLocales, skillsScore]);\n\n  const isError = useMemo(\n    () =>\n      selectedSkillList.length > maxSelectedSkills || selectedSkillList.length < minSelectedSkills,\n    [selectedSkillList, maxSelectedSkills, minSelectedSkills]\n  );\n\n  const footer = useMemo(() => {\n    const footerDescription =\n      selectedSkillList.length > maxSelectedSkills\n        ? translate('skill_focus_footer_error_description', {\n            skillNumber: selectedSkillList.length - maxSelectedSkills\n          })\n        : translate('skill_focus_footer_description', {\n            skillNumber: minSelectedSkills - selectedSkillList.length\n          });\n    return {\n      text: isLoading || !isError ? '' : footerDescription,\n      isError,\n      cancelButton: {\n        onCancel: handleCancel,\n        label: translate('cancel'),\n        disabled: isLoading || isError\n      },\n      confirmButton: {\n        onConfirm: () => onConfirm(selectedSkillList),\n        label: translate('confirm'),\n        iconName: 'circle-check',\n        disabled: isLoading || isError\n      }\n    };\n  }, [\n    isError,\n    handleCancel,\n    onConfirm,\n    translate,\n    selectedSkillList,\n    isLoading,\n    maxSelectedSkills,\n    minSelectedSkills\n  ]);\n\n  const sorting = useMemo(\n    () => ({\n      theme: 'skillDetail',\n      options: ['alphabetical', 'progress'].map(value => ({\n        name: value === 'progress' ? translate('progress') : translate('alphabetical'),\n        value,\n        selected: currentSort === value\n      })),\n      onChange: value => setCurrentSort(value)\n    }),\n    [currentSort, translate]\n  );\n\n  useEffect(() => {\n    // eslint-disable-next-line lodash-fp/no-extraneous-function-wrapping\n    setSortedSkills(prev =>\n      sortBy(\n        skill => (currentSort === 'progress' ? -skillsScore[skill] : skillsLocales[skill]),\n        prev\n      )\n    );\n  }, [currentSort, skillsScore, skillsLocales, setSortedSkills]);\n\n  if ((!isLoading && !skills) || !isOpen) return null;\n\n  return (\n    <BaseModal\n      title={translate('skill_focus')}\n      description={translate('skill_focus_description')}\n      isOpen={isOpen}\n      onClose={handleClose}\n      footer={footer}\n      headerIcon={{\n        name: 'bullseye-arrow',\n        backgroundColor: '#DDD1FF'\n      }}\n    >\n      <div className={style.skillPickerContainer}>\n        {isLoading ? (\n          <div className={style.loaderContainer}>\n            <Loader className={style.loader} theme=\"coorpmanager\" />\n          </div>\n        ) : (\n          <>\n            <div className={style.ctaWrapper}>\n              <div>{`${selectedSkillList.length} ${translate('selected')}`}</div>\n              {skillProgressAvailable ? (\n                <div className={style.sortWrapper}>\n                  {translate('sort_by')}\n                  <Select {...sorting} aria-label=\"All courses sort\" />\n                </div>\n              ) : null}\n            </div>\n            <div style={{display: 'flex', gap: '16px', flexWrap: 'wrap'}}>\n              {skillList.map((skill, index) => {\n                const {skillTitle, skillRef, focus, score} = skill;\n                function handleChipClick() {\n                  const newSelectedSkillList = focus\n                    ? filter(selectedSkill => selectedSkill !== skillRef, selectedSkillList)\n                    : [...selectedSkillList, skill.skillRef];\n                  setSelectedSkillList(newSelectedSkillList);\n                }\n\n                return (\n                  <Chip\n                    {...(skillProgressAvailable ? {subText: `${score.toFixed(1)}%`} : {})}\n                    text={skillTitle}\n                    selected={focus}\n                    onClick={handleChipClick}\n                    key={index}\n                    backgroundColor=\"skin\"\n                  />\n                );\n              })}\n            </div>\n          </>\n        )}\n      </div>\n    </BaseModal>\n  );\n};\n\nSkillPickerModal.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nSkillPickerModal.propTypes = {\n  skills: PropTypes.arrayOf(PropTypes.string),\n  selectedSkills: PropTypes.arrayOf(PropTypes.string),\n  skillsLocales: PropTypes.objectOf(PropTypes.string),\n  skillsScore: PropTypes.objectOf(PropTypes.number),\n  isOpen: PropTypes.bool,\n  isLoading: PropTypes.bool,\n  minSelectedSkills: PropTypes.number,\n  maxSelectedSkills: PropTypes.number,\n  onCancel: PropTypes.func,\n  onConfirm: PropTypes.func,\n  onClose: PropTypes.func\n};\n\nexport default SkillPickerModal;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["SkillPickerModal","props","context","skills","selectedSkills","skillsLocales","skillsScore","isOpen","isLoading","maxSelectedSkills","minSelectedSkills","onCancel","onConfirm","onClose","translate","detectScrollbar","sortedSkills","setSortedSkills","useState","skill","currentSort","setCurrentSort","selectedSkillList","setSelectedSkillList","handleCancel","useCallback","handleClose","skillProgressAvailable","skillList","useMemo","map","skillTitle","skillRef","focus","includes","score","isError","length","footer","footerDescription","skillNumber","text","cancelButton","label","disabled","confirmButton","iconName","sorting","theme","options","value","name","selected","onChange","useEffect","prev","backgroundColor","style","skillPickerContainer","loaderContainer","loader","ctaWrapper","sortWrapper","display","gap","flexWrap","index","handleChipClick","newSelectedSkillList","selectedSkill","subText","toFixed","contextTypes","Provider","childContextTypes","propTypes","PropTypes","arrayOf","string","objectOf","number","bool","func"],"sources":["../../../src/molecule/skill-picker-modal/index.js"],"sourcesContent":["import React, {useMemo, useState, useCallback, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport {filter, some, sortBy} from 'lodash/fp';\nimport BaseModal from '../base-modal';\nimport Chip from '../../atom/chip';\nimport Loader from '../../atom/loader';\nimport Select from '../../atom/select';\nimport Provider from '../../atom/provider';\nimport style from './style.css';\n\nconst SkillPickerModal = (props, context) => {\n  const {\n    skills,\n    selectedSkills,\n    skillsLocales,\n    skillsScore,\n    isOpen,\n    isLoading,\n    maxSelectedSkills = 6,\n    minSelectedSkills = 3,\n    onCancel,\n    onConfirm,\n    onClose\n  } = props;\n  const {translate} = context;\n\n  const detectScrollbar = true;\n  const [sortedSkills, setSortedSkills] = useState(sortBy(skill => skillsLocales[skill], skills));\n  const [currentSort, setCurrentSort] = useState('alphabetical');\n  const [selectedSkillList, setSelectedSkillList] = useState(selectedSkills);\n\n  const handleCancel = useCallback(() => {\n    setSelectedSkillList(selectedSkills);\n    onCancel();\n  }, [setSelectedSkillList, selectedSkills, onCancel]);\n\n  const handleClose = useCallback(() => {\n    setSelectedSkillList(selectedSkills);\n    onClose();\n  }, [setSelectedSkillList, selectedSkills, onClose]);\n\n  const skillProgressAvailable = some(skill => skillsScore[skill] > 0, skills);\n\n  const skillList = useMemo(() => {\n    return sortedSkills.map(skill => {\n      return {\n        skillTitle: skillsLocales[skill],\n        skillRef: skill,\n        focus: selectedSkillList.includes(skill),\n        score: skillsScore[skill]\n      };\n    });\n  }, [sortedSkills, selectedSkillList, skillsLocales, skillsScore]);\n\n  const isError = useMemo(\n    () =>\n      selectedSkillList.length > maxSelectedSkills || selectedSkillList.length < minSelectedSkills,\n    [selectedSkillList, maxSelectedSkills, minSelectedSkills]\n  );\n\n  const footer = useMemo(() => {\n    const footerDescription =\n      selectedSkillList.length > maxSelectedSkills\n        ? translate('skill_focus_footer_error_description', {\n            skillNumber: selectedSkillList.length - maxSelectedSkills\n          })\n        : translate('skill_focus_footer_description', {\n            skillNumber: minSelectedSkills - selectedSkillList.length\n          });\n    return {\n      text: isLoading || !isError ? '' : footerDescription,\n      isError,\n      cancelButton: {\n        onCancel: handleCancel,\n        label: translate('cancel'),\n        disabled: isLoading || isError\n      },\n      confirmButton: {\n        onConfirm: () => onConfirm(selectedSkillList),\n        label: translate('confirm'),\n        iconName: 'circle-check',\n        disabled: isLoading || isError\n      }\n    };\n  }, [\n    isError,\n    handleCancel,\n    onConfirm,\n    translate,\n    selectedSkillList,\n    isLoading,\n    maxSelectedSkills,\n    minSelectedSkills\n  ]);\n\n  const sorting = useMemo(\n    () => ({\n      theme: 'skillDetail',\n      options: ['alphabetical', 'progress'].map(value => ({\n        name: value === 'progress' ? translate('progress') : translate('alphabetical'),\n        value,\n        selected: currentSort === value\n      })),\n      onChange: value => setCurrentSort(value)\n    }),\n    [currentSort, translate]\n  );\n\n  useEffect(() => {\n    // eslint-disable-next-line lodash-fp/no-extraneous-function-wrapping\n    setSortedSkills(prev =>\n      sortBy(\n        skill => (currentSort === 'progress' ? -skillsScore[skill] : skillsLocales[skill]),\n        prev\n      )\n    );\n  }, [currentSort, skillsScore, skillsLocales, setSortedSkills]);\n\n  if ((!isLoading && !skills) || !isOpen) return null;\n\n  return (\n    <BaseModal\n      title={translate('skill_focus')}\n      description={translate('skill_focus_description')}\n      isOpen={isOpen}\n      onClose={handleClose}\n      footer={footer}\n      headerIcon={{\n        name: 'bullseye-arrow',\n        backgroundColor: '#DDD1FF'\n      }}\n      detectScrollbar={detectScrollbar}\n    >\n      <div className={style.skillPickerContainer}>\n        {isLoading ? (\n          <div className={style.loaderContainer}>\n            <Loader className={style.loader} theme=\"coorpmanager\" />\n          </div>\n        ) : (\n          <>\n            <div className={style.ctaWrapper}>\n              <div>{`${selectedSkillList.length} ${translate('selected')}`}</div>\n              {skillProgressAvailable ? (\n                <div className={style.sortWrapper}>\n                  {translate('sort_by')}\n                  <Select {...sorting} aria-label=\"All courses sort\" />\n                </div>\n              ) : null}\n            </div>\n            <div style={{display: 'flex', gap: '16px', flexWrap: 'wrap'}}>\n              {skillList.map((skill, index) => {\n                const {skillTitle, skillRef, focus, score} = skill;\n                function handleChipClick() {\n                  const newSelectedSkillList = focus\n                    ? filter(selectedSkill => selectedSkill !== skillRef, selectedSkillList)\n                    : [...selectedSkillList, skill.skillRef];\n                  setSelectedSkillList(newSelectedSkillList);\n                }\n\n                return (\n                  <Chip\n                    {...(skillProgressAvailable ? {subText: `${score.toFixed(1)}%`} : {})}\n                    text={skillTitle}\n                    selected={focus}\n                    onClick={handleChipClick}\n                    key={index}\n                    backgroundColor=\"skin\"\n                  />\n                );\n              })}\n            </div>\n          </>\n        )}\n      </div>\n    </BaseModal>\n  );\n};\n\nSkillPickerModal.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nSkillPickerModal.propTypes = {\n  skills: PropTypes.arrayOf(PropTypes.string),\n  selectedSkills: PropTypes.arrayOf(PropTypes.string),\n  skillsLocales: PropTypes.objectOf(PropTypes.string),\n  skillsScore: PropTypes.objectOf(PropTypes.number),\n  isOpen: PropTypes.bool,\n  isLoading: PropTypes.bool,\n  minSelectedSkills: PropTypes.number,\n  maxSelectedSkills: PropTypes.number,\n  onCancel: PropTypes.func,\n  onConfirm: PropTypes.func,\n  onClose: PropTypes.func\n};\n\nexport default SkillPickerModal;\n"],"mappings":"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"}

package/lib/molecule/translation-modal/index.d.ts

@@ -0,0 +1,85 @@
+export default TranslationModal;
+declare function TranslationModal(props: any, context: any): JSX.Element | null;
+declare namespace TranslationModal {
+    namespace contextTypes {
+        const translate: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+    namespace propTypes {
+        const isOpen: PropTypes.Requireable<boolean>;
+        const onCancel: PropTypes.Requireable<(...args: any[]) => any>;
+        const onConfirm: PropTypes.Requireable<(...args: any[]) => any>;
+        const onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        const source: PropTypes.Requireable<PropTypes.InferProps<{
+            inputText: PropTypes.Requireable<PropTypes.InferProps<{
+                theme: PropTypes.Requireable<string>;
+                autoFocus: PropTypes.Requireable<boolean>;
+                title: PropTypes.Requireable<string>;
+                placeholder: PropTypes.Requireable<string>;
+                defaultValue: PropTypes.Requireable<string>;
+                disabled: PropTypes.Requireable<boolean>;
+                value: PropTypes.Requireable<string>;
+                hint: PropTypes.Requireable<string>;
+                error: PropTypes.Requireable<string>;
+                onChange: PropTypes.Requireable<(...args: any[]) => any>;
+                description: PropTypes.Requireable<string>;
+                modified: PropTypes.Requireable<boolean>;
+                type: PropTypes.Requireable<string>;
+                valid: PropTypes.Requireable<boolean>;
+                'aria-label': PropTypes.Requireable<string>;
+                'data-name': PropTypes.Requireable<string>;
+            }>>;
+            textArea: PropTypes.Requireable<PropTypes.InferProps<{
+                theme: PropTypes.Requireable<string>;
+                placeholder: PropTypes.Requireable<string>;
+                title: PropTypes.Requireable<string>;
+                name: PropTypes.Requireable<string>;
+                disabled: PropTypes.Requireable<boolean>;
+                value: PropTypes.Requireable<string>;
+                hint: PropTypes.Requireable<string>;
+                error: PropTypes.Requireable<string>;
+                onChange: PropTypes.Requireable<(...args: any[]) => any>;
+                description: PropTypes.Requireable<string>;
+                modified: PropTypes.Requireable<boolean>;
+                valid: PropTypes.Requireable<boolean>;
+            }>>;
+            inputLanguage: PropTypes.Requireable<string>;
+        }>>;
+        const target: PropTypes.Requireable<PropTypes.InferProps<{
+            inputText: PropTypes.Requireable<PropTypes.InferProps<{
+                theme: PropTypes.Requireable<string>;
+                autoFocus: PropTypes.Requireable<boolean>;
+                title: PropTypes.Requireable<string>;
+                placeholder: PropTypes.Requireable<string>;
+                defaultValue: PropTypes.Requireable<string>;
+                disabled: PropTypes.Requireable<boolean>;
+                value: PropTypes.Requireable<string>;
+                hint: PropTypes.Requireable<string>;
+                error: PropTypes.Requireable<string>;
+                onChange: PropTypes.Requireable<(...args: any[]) => any>;
+                description: PropTypes.Requireable<string>;
+                modified: PropTypes.Requireable<boolean>;
+                type: PropTypes.Requireable<string>;
+                valid: PropTypes.Requireable<boolean>;
+                'aria-label': PropTypes.Requireable<string>;
+                'data-name': PropTypes.Requireable<string>;
+            }>>;
+            textArea: PropTypes.Requireable<PropTypes.InferProps<{
+                theme: PropTypes.Requireable<string>;
+                placeholder: PropTypes.Requireable<string>;
+                title: PropTypes.Requireable<string>;
+                name: PropTypes.Requireable<string>;
+                disabled: PropTypes.Requireable<boolean>;
+                value: PropTypes.Requireable<string>;
+                hint: PropTypes.Requireable<string>;
+                error: PropTypes.Requireable<string>;
+                onChange: PropTypes.Requireable<(...args: any[]) => any>;
+                description: PropTypes.Requireable<string>;
+                modified: PropTypes.Requireable<boolean>;
+                valid: PropTypes.Requireable<boolean>;
+            }>>;
+            language: PropTypes.Requireable<string>;
+        }>>;
+    }
+}
+import PropTypes from "prop-types";
+//# sourceMappingURL=index.d.ts.map

package/lib/molecule/translation-modal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/translation-modal/index.js"],"names":[],"mappings":";AAmBA,gFAkGC"}

package/lib/molecule/translation-modal/index.js

@@ -0,0 +1,168 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _baseModal = _interopRequireDefault(require("../base-modal"));
+
+var _provider = _interopRequireDefault(require("../../atom/provider"));
+
+var _colors = require("../../variables/colors");
+
+var _inputText = _interopRequireDefault(require("../../atom/input-text"));
+
+var _inputTextarea = _interopRequireDefault(require("../../atom/input-textarea"));
+
+var _style = _interopRequireDefault(require("./style.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _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); }
+
+const renderInputGroup = ({
+  title,
+  inputProps,
+  textAreaProps,
+  disabled
+}) => {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.inputGroup
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.title
+  }, title), /*#__PURE__*/_react.default.createElement(_inputText.default, _extends({}, inputProps, {
+    disabled: disabled
+  })), /*#__PURE__*/_react.default.createElement(_inputTextarea.default, _extends({}, textAreaProps, {
+    disabled: disabled
+  })));
+};
+
+const TranslationModal = (props, context) => {
+  const {
+    isOpen,
+    onCancel,
+    onConfirm,
+    onClose,
+    source: {
+      inputText: sourceInputText,
+      textArea: sourceTextArea,
+      inputLanguage
+    },
+    target: {
+      inputText: targetInputText,
+      textArea: targetTextArea,
+      language: outputLanguage
+    }
+  } = props;
+  const {
+    translate
+  } = context;
+  const detectScrollbar = true;
+  const [inputValue, setInputValue] = (0, _react.useState)(targetInputText?.value || '');
+  const [textAreaValue, setTextAreaValue] = (0, _react.useState)(targetTextArea?.value || '');
+  const handleCancel = (0, _react.useCallback)(() => {
+    onCancel();
+  }, [onCancel]);
+  const handleClose = (0, _react.useCallback)(() => {
+    onClose();
+  }, [onClose]);
+  const handleInputChange = (0, _react.useCallback)(e => {
+    setInputValue(e.target.value);
+  }, []);
+  const handleTextAreaChange = (0, _react.useCallback)(e => {
+    setTextAreaValue(e.target.value);
+  }, []);
+  const isConfirmDisabled = (0, _react.useMemo)(() => {
+    return !inputValue.trim() || !textAreaValue.trim();
+  }, [inputValue, textAreaValue]);
+  const footer = (0, _react.useMemo)(() => {
+    return {
+      cancelButton: {
+        onCancel: handleCancel,
+        label: translate('cancel')
+      },
+      confirmButton: {
+        onConfirm: () => {
+          onConfirm();
+        },
+        label: translate('confirm'),
+        iconName: 'plus',
+        disabled: isConfirmDisabled,
+        color: _colors.COLORS.cm_primary_blue
+      }
+    };
+  }, [handleCancel, onConfirm, translate, isConfirmDisabled]);
+  if (!isOpen) return null;
+  return /*#__PURE__*/_react.default.createElement(_baseModal.default, {
+    title: translate('translation_title'),
+    description: translate('translation_description'),
+    isOpen: isOpen,
+    onClose: handleClose,
+    footer: footer,
+    headerIcon: {
+      name: 'language',
+      backgroundColor: '#D6E6FF'
+    },
+    detectScrollbar: detectScrollbar
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.translationModal
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.horizontalSection
+  }, renderInputGroup({
+    title: inputLanguage,
+    inputProps: sourceInputText,
+    textAreaProps: sourceTextArea,
+    disabled: true
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.separator
+  }), renderInputGroup({
+    title: outputLanguage,
+    inputProps: _extends({}, targetInputText, {
+      value: inputValue,
+      onChange: handleInputChange
+    }),
+    textAreaProps: _extends({}, targetTextArea, {
+      value: textAreaValue,
+      onChange: handleTextAreaChange
+    }),
+    disabled: false
+  }))));
+};
+
+TranslationModal.contextTypes = {
+  translate: _provider.default.childContextTypes.translate
+};
+TranslationModal.propTypes = process.env.NODE_ENV !== "production" ? {
+  isOpen: _propTypes.default.bool,
+  onCancel: _propTypes.default.func,
+  onConfirm: _propTypes.default.func,
+  onClose: _propTypes.default.func,
+  source: _propTypes.default.shape({
+    inputText: _propTypes.default.shape(_extends({}, _inputText.default.propTypes, {
+      theme: _propTypes.default.string
+    })),
+    textArea: _propTypes.default.shape(_extends({}, _inputTextarea.default.propTypes, {
+      theme: _propTypes.default.string
+    })),
+    inputLanguage: _propTypes.default.string
+  }),
+  target: _propTypes.default.shape({
+    inputText: _propTypes.default.shape(_extends({}, _inputText.default.propTypes, {
+      theme: _propTypes.default.string
+    })),
+    textArea: _propTypes.default.shape(_extends({}, _inputTextarea.default.propTypes, {
+      theme: _propTypes.default.string
+    })),
+    language: _propTypes.default.string
+  })
+} : {};
+var _default = TranslationModal;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/lib/molecule/translation-modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["renderInputGroup","title","inputProps","textAreaProps","disabled","style","inputGroup","TranslationModal","props","context","isOpen","onCancel","onConfirm","onClose","source","inputText","sourceInputText","textArea","sourceTextArea","inputLanguage","target","targetInputText","targetTextArea","language","outputLanguage","translate","detectScrollbar","inputValue","setInputValue","useState","value","textAreaValue","setTextAreaValue","handleCancel","useCallback","handleClose","handleInputChange","e","handleTextAreaChange","isConfirmDisabled","useMemo","trim","footer","cancelButton","label","confirmButton","iconName","color","COLORS","cm_primary_blue","name","backgroundColor","translationModal","horizontalSection","separator","onChange","contextTypes","Provider","childContextTypes","propTypes","PropTypes","bool","func","shape","InputText","theme","string","TextArea"],"sources":["../../../src/molecule/translation-modal/index.js"],"sourcesContent":["import React, {useMemo, useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport BaseModal from '../base-modal';\nimport Provider from '../../atom/provider';\nimport {COLORS} from '../../variables/colors';\nimport InputText from '../../atom/input-text';\nimport TextArea from '../../atom/input-textarea';\nimport style from './style.css';\n\nconst renderInputGroup = ({title, inputProps, textAreaProps, disabled}) => {\n  return (\n    <div className={style.inputGroup}>\n      <div className={style.title}>{title}</div>\n      <InputText {...inputProps} disabled={disabled} />\n      <TextArea {...textAreaProps} disabled={disabled} />\n    </div>\n  );\n};\n\nconst TranslationModal = (props, context) => {\n  const {\n    isOpen,\n    onCancel,\n    onConfirm,\n    onClose,\n    source: {inputText: sourceInputText, textArea: sourceTextArea, inputLanguage},\n    target: {inputText: targetInputText, textArea: targetTextArea, language: outputLanguage}\n  } = props;\n  const {translate} = context;\n\n  const detectScrollbar = true;\n\n  const [inputValue, setInputValue] = useState(targetInputText?.value || '');\n  const [textAreaValue, setTextAreaValue] = useState(targetTextArea?.value || '');\n\n  const handleCancel = useCallback(() => {\n    onCancel();\n  }, [onCancel]);\n\n  const handleClose = useCallback(() => {\n    onClose();\n  }, [onClose]);\n\n  const handleInputChange = useCallback(e => {\n    setInputValue(e.target.value);\n  }, []);\n\n  const handleTextAreaChange = useCallback(e => {\n    setTextAreaValue(e.target.value);\n  }, []);\n\n  const isConfirmDisabled = useMemo(() => {\n    return !inputValue.trim() || !textAreaValue.trim();\n  }, [inputValue, textAreaValue]);\n\n  const footer = useMemo(() => {\n    return {\n      cancelButton: {\n        onCancel: handleCancel,\n        label: translate('cancel')\n      },\n      confirmButton: {\n        onConfirm: () => {\n          onConfirm();\n        },\n        label: translate('confirm'),\n        iconName: 'plus',\n        disabled: isConfirmDisabled,\n        color: COLORS.cm_primary_blue\n      }\n    };\n  }, [handleCancel, onConfirm, translate, isConfirmDisabled]);\n\n  if (!isOpen) return null;\n\n  return (\n    <BaseModal\n      title={translate('translation_title')}\n      description={translate('translation_description')}\n      isOpen={isOpen}\n      onClose={handleClose}\n      footer={footer}\n      headerIcon={{\n        name: 'language',\n        backgroundColor: '#D6E6FF'\n      }}\n      detectScrollbar={detectScrollbar}\n    >\n      <div className={style.translationModal}>\n        <div className={style.horizontalSection}>\n          {renderInputGroup({\n            title: inputLanguage,\n            inputProps: sourceInputText,\n            textAreaProps: sourceTextArea,\n            disabled: true\n          })}\n\n          <div className={style.separator} />\n\n          {renderInputGroup({\n            title: outputLanguage,\n            inputProps: {\n              ...targetInputText,\n              value: inputValue,\n              onChange: handleInputChange\n            },\n            textAreaProps: {\n              ...targetTextArea,\n              value: textAreaValue,\n              onChange: handleTextAreaChange\n            },\n            disabled: false\n          })}\n        </div>\n      </div>\n    </BaseModal>\n  );\n};\n\nTranslationModal.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nTranslationModal.propTypes = {\n  isOpen: PropTypes.bool,\n  onCancel: PropTypes.func,\n  onConfirm: PropTypes.func,\n  onClose: PropTypes.func,\n  source: PropTypes.shape({\n    inputText: PropTypes.shape({\n      ...InputText.propTypes,\n      theme: PropTypes.string\n    }),\n    textArea: PropTypes.shape({\n      ...TextArea.propTypes,\n      theme: PropTypes.string\n    }),\n    inputLanguage: PropTypes.string\n  }),\n  target: PropTypes.shape({\n    inputText: PropTypes.shape({\n      ...InputText.propTypes,\n      theme: PropTypes.string\n    }),\n    textArea: PropTypes.shape({\n      ...TextArea.propTypes,\n      theme: PropTypes.string\n    }),\n    language: PropTypes.string\n  })\n};\n\nexport default TranslationModal;\n"],"mappings":"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"}

package/lib/molecule/translation-modal/style.css

@@ -0,0 +1,45 @@
+@value colors: "../../variables/colors.css";
+@value cm_grey_100 from colors;
+@value cm_grey_700 from colors;
+
+.translationModal {
+  width: calc(71vw - 68px);
+  max-width: 612px;
+}
+
+@media mobile {
+  .translationModal {
+    width: 100%;
+  }
+}
+
+.title {
+  color: cm_grey_700;
+  font-family: Gilroy;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 22px;
+}
+
+.inputGroup {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: 30px;
+}
+
+.horizontalSection {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.separator {
+  width: 2px;
+  flex-shrink: 0;
+  height: auto;
+  align-self: stretch;
+  background: cm_grey_100;
+  margin: 0 16px;
+}

package/lib/organism/list-items/index.d.ts

@@ -16,6 +16,8 @@ declare namespace ListItems {
             label: PropTypes.Requireable<string>;
             content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
             'aria-label': PropTypes.Requireable<string>;
+            tooltipText: PropTypes.Requireable<string>;
+            tooltipPlacement: PropTypes.Requireable<string>;
             'data-name': PropTypes.Requireable<string>;
             'data-testid': PropTypes.Requireable<string>;
             icon: PropTypes.Requireable<PropTypes.InferProps<{
@@ -167,6 +169,8 @@ declare namespace ListItems {
                 label: PropTypes.Requireable<string>;
                 content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
                 'aria-label': PropTypes.Requireable<string>;
+                tooltipText: PropTypes.Requireable<string>;
+                tooltipPlacement: PropTypes.Requireable<string>;
                 'data-name': PropTypes.Requireable<string>;
                 'data-testid': PropTypes.Requireable<string>;
                 icon: PropTypes.Requireable<PropTypes.InferProps<{

package/lib/organism/setup-header/index.d.ts

@@ -9,6 +9,8 @@ declare namespace SetupHeader {
                 label: PropTypes.Requireable<string>;
                 content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
                 'aria-label': PropTypes.Requireable<string>;
+                tooltipText: PropTypes.Requireable<string>;
+                tooltipPlacement: PropTypes.Requireable<string>;
                 'data-name': PropTypes.Requireable<string>;
                 'data-testid': PropTypes.Requireable<string>;
                 icon: PropTypes.Requireable<PropTypes.InferProps<{
@@ -33,6 +35,8 @@ declare namespace SetupHeader {
                 label: PropTypes.Requireable<string>;
                 content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
                 'aria-label': PropTypes.Requireable<string>;
+                tooltipText: PropTypes.Requireable<string>;
+                tooltipPlacement: PropTypes.Requireable<string>;
                 'data-name': PropTypes.Requireable<string>;
                 'data-testid': PropTypes.Requireable<string>;
                 icon: PropTypes.Requireable<PropTypes.InferProps<{
@@ -57,6 +61,8 @@ declare namespace SetupHeader {
                 label: PropTypes.Requireable<string>;
                 content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
                 'aria-label': PropTypes.Requireable<string>;
+                tooltipText: PropTypes.Requireable<string>;
+                tooltipPlacement: PropTypes.Requireable<string>;
                 'data-name': PropTypes.Requireable<string>;
                 'data-testid': PropTypes.Requireable<string>;
                 icon: PropTypes.Requireable<PropTypes.InferProps<{
@@ -81,6 +87,8 @@ declare namespace SetupHeader {
                 label: PropTypes.Requireable<string>;
                 content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
                 'aria-label': PropTypes.Requireable<string>;
+                tooltipText: PropTypes.Requireable<string>;
+                tooltipPlacement: PropTypes.Requireable<string>;
                 'data-name': PropTypes.Requireable<string>;
                 'data-testid': PropTypes.Requireable<string>;
                 icon: PropTypes.Requireable<PropTypes.InferProps<{

package/lib/organism/wizard-contents/index.d.ts

@@ -25,6 +25,8 @@ declare namespace WizardContents {
                 label: PropTypes.Requireable<string>;
                 content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
                 'aria-label': PropTypes.Requireable<string>;
+                tooltipText: PropTypes.Requireable<string>;
+                tooltipPlacement: PropTypes.Requireable<string>;
                 'data-name': PropTypes.Requireable<string>;
                 'data-testid': PropTypes.Requireable<string>;
                 icon: PropTypes.Requireable<PropTypes.InferProps<{
@@ -49,6 +51,8 @@ declare namespace WizardContents {
                 label: PropTypes.Requireable<string>;
                 content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
                 'aria-label': PropTypes.Requireable<string>;
+                tooltipText: PropTypes.Requireable<string>;
+                tooltipPlacement: PropTypes.Requireable<string>;
                 'data-name': PropTypes.Requireable<string>;
                 'data-testid': PropTypes.Requireable<string>;
                 icon: PropTypes.Requireable<PropTypes.InferProps<{
@@ -448,6 +452,8 @@ declare namespace WizardContents {
                 label: PropTypes.Requireable<string>;
                 content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
                 'aria-label': PropTypes.Requireable<string>;
+                tooltipText: PropTypes.Requireable<string>;
+                tooltipPlacement: PropTypes.Requireable<string>;
                 'data-name': PropTypes.Requireable<string>;
                 'data-testid': PropTypes.Requireable<string>;
                 icon: PropTypes.Requireable<PropTypes.InferProps<{

package/lib/template/app-player/loading/index.d.ts

@@ -97,6 +97,8 @@ declare namespace PlayerLoading {
                         label: PropTypes.Requireable<string>;
                         content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
                         'aria-label': PropTypes.Requireable<string>;
+                        tooltipText: PropTypes.Requireable<string>;
+                        tooltipPlacement: PropTypes.Requireable<string>;
                         'data-name': PropTypes.Requireable<string>;
                         'data-testid': PropTypes.Requireable<string>;
                         icon: PropTypes.Requireable<PropTypes.InferProps<{
@@ -248,6 +250,8 @@ declare namespace PlayerLoading {
                             label: PropTypes.Requireable<string>;
                             content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
                             'aria-label': PropTypes.Requireable<string>;
+                            tooltipText: PropTypes.Requireable<string>;
+                            tooltipPlacement: PropTypes.Requireable<string>;
                             'data-name': PropTypes.Requireable<string>;
                             'data-testid': PropTypes.Requireable<string>;
                             icon: PropTypes.Requireable<PropTypes.InferProps<{

package/lib/template/app-player/player/index.d.ts

@@ -148,6 +148,8 @@ declare namespace SlidePlayer {
                             label: PropTypes.Requireable<string>;
                             content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
                             'aria-label': PropTypes.Requireable<string>;
+                            tooltipText: PropTypes.Requireable<string>;
+                            tooltipPlacement: PropTypes.Requireable<string>;
                             'data-name': PropTypes.Requireable<string>;
                             'data-testid': PropTypes.Requireable<string>;
                             icon: PropTypes.Requireable<PropTypes.InferProps<{
@@ -299,6 +301,8 @@ declare namespace SlidePlayer {
                                 label: PropTypes.Requireable<string>;
                                 content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
                                 'aria-label': PropTypes.Requireable<string>;
+                                tooltipText: PropTypes.Requireable<string>;
+                                tooltipPlacement: PropTypes.Requireable<string>;
                                 'data-name': PropTypes.Requireable<string>;
                                 'data-testid': PropTypes.Requireable<string>;
                                 icon: PropTypes.Requireable<PropTypes.InferProps<{
@@ -453,6 +457,8 @@ declare namespace SlidePlayer {
                         label: PropTypes.Requireable<string>;
                         content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
                         'aria-label': PropTypes.Requireable<string>;
+                        tooltipText: PropTypes.Requireable<string>;
+                        tooltipPlacement: PropTypes.Requireable<string>;
                         'data-name': PropTypes.Requireable<string>;
                         'data-testid': PropTypes.Requireable<string>;
                         icon: PropTypes.Requireable<PropTypes.InferProps<{
@@ -604,6 +610,8 @@ declare namespace SlidePlayer {
                             label: PropTypes.Requireable<string>;
                             content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
                             'aria-label': PropTypes.Requireable<string>;
+                            tooltipText: PropTypes.Requireable<string>;
+                            tooltipPlacement: PropTypes.Requireable<string>;
                             'data-name': PropTypes.Requireable<string>;
                             'data-testid': PropTypes.Requireable<string>;
                             icon: PropTypes.Requireable<PropTypes.InferProps<{

package/lib/template/app-player/player/slides/index.d.ts

@@ -154,6 +154,8 @@ declare namespace SlidesPlayer {
                         label: PropTypes.Requireable<string>;
                         content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
                         'aria-label': PropTypes.Requireable<string>;
+                        tooltipText: PropTypes.Requireable<string>;
+                        tooltipPlacement: PropTypes.Requireable<string>;
                         'data-name': PropTypes.Requireable<string>;
                         'data-testid': PropTypes.Requireable<string>;
                         icon: PropTypes.Requireable<PropTypes.InferProps<{
@@ -305,6 +307,8 @@ declare namespace SlidesPlayer {
                             label: PropTypes.Requireable<string>;
                             content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
                             'aria-label': PropTypes.Requireable<string>;
+                            tooltipText: PropTypes.Requireable<string>;
+                            tooltipPlacement: PropTypes.Requireable<string>;
                             'data-name': PropTypes.Requireable<string>;
                             'data-testid': PropTypes.Requireable<string>;
                             icon: PropTypes.Requireable<PropTypes.InferProps<{

package/lib/template/app-player/player/slides/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/template/app-player/player/slides/index.js"],"names":[],"mappings":";AA+aA,qEAkBC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA1ID;;uBAyBC;;;;;;;;;;;;;;;;;;;;;;;;;AArPD;;;gBAaC;;;;;;;;;;;;;AAyDD;;;;gBAEC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAlHD,oEAQC;;;;;;;;;AAgND;;gBAiBC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/GD,qEAaC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/template/app-player/player/slides/index.js"],"names":[],"mappings":";AA+aA,qEAkBC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA1ID;;uBAyBC;;;;;;;;;;;;;;;;;;;;;;;;;AArPD;;;gBAaC;;;;;;;;;;;;;AAyDD;;;;gBAEC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAlHD,oEAQC;;;;;;;;;AAgND;;gBAiBC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/GD,qEAaC"}

package/lib/template/app-player/popin-correction/index.d.ts

@@ -184,6 +184,8 @@ declare class PopinCorrection extends React.Component<any, any, any> {
                         label: PropTypes.Requireable<string>;
                         content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
                         'aria-label': PropTypes.Requireable<string>;
+                        tooltipText: PropTypes.Requireable<string>;
+                        tooltipPlacement: PropTypes.Requireable<string>;
                         'data-name': PropTypes.Requireable<string>;
                         'data-testid': PropTypes.Requireable<string>;
                         icon: PropTypes.Requireable<PropTypes.InferProps<{
@@ -335,6 +337,8 @@ declare class PopinCorrection extends React.Component<any, any, any> {
                             label: PropTypes.Requireable<string>;
                             content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
                             'aria-label': PropTypes.Requireable<string>;
+                            tooltipText: PropTypes.Requireable<string>;
+                            tooltipPlacement: PropTypes.Requireable<string>;
                             'data-name': PropTypes.Requireable<string>;
                             'data-testid': PropTypes.Requireable<string>;
                             icon: PropTypes.Requireable<PropTypes.InferProps<{

package/lib/template/app-player/popin-correction/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/template/app-player/popin-correction/index.js"],"names":[],"mappings":";AAmGA;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAmBE;IAEF;;;;;;;;;;;;;;;;;;;;;;MAEE;IAEF,wBAIC;IAFC;;MAA0B;IAkB5B,gCAEC;IAhBD,0BAEC;IAED,kBAQC;IALC,gCAIE;IAIF,aAAsB;IAGxB,sBAsEC;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/template/app-player/popin-correction/index.js"],"names":[],"mappings":";AAmGA;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAmBE;IAEF;;;;;;;;;;;;;;;;;;;;;;MAEE;IAEF,wBAIC;IAFC;;MAA0B;IAkB5B,gCAEC;IAhBD,0BAEC;IAED,kBAQC;IALC,gCAIE;IAIF,aAAsB;IAGxB,sBAsEC;CACF"}