@coorpacademy/components 11.40.13 → 11.40.14-alpha.10

package/es/atom/checkbox-with-title/index.d.ts

@@ -1,5 +1,5 @@
 export default CheckboxWithTitle;
-declare function CheckboxWithTitle(props: any): JSX.Element;
+declare function CheckboxWithTitle(props: any, context: any): JSX.Element;
 declare namespace CheckboxWithTitle {
     const propTypes: {
         title: PropTypes.Requireable<string>;
@@ -17,6 +17,29 @@ declare namespace CheckboxWithTitle {
             [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
         }>;
     };
+    namespace contextTypes {
+        const skin: PropTypes.Requireable<PropTypes.InferProps<{
+            common: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            images: PropTypes.Requireable<PropTypes.InferProps<{
+                'logo-mobile': PropTypes.Requireable<any>;
+                logo: PropTypes.Requireable<any>;
+                'logo-email': PropTypes.Requireable<any>;
+                login: PropTypes.Requireable<any>;
+            }>>;
+            icons: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            mod: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            courses: PropTypes.Requireable<any[]>;
+            texts: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+        }>>;
+    }
 }
 import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

package/es/atom/checkbox-with-title/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/checkbox-with-title/index.js"],"names":[],"mappings":";AAQA,4DA0DC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/checkbox-with-title/index.js"],"names":[],"mappings":";AAUA,0EA+DC"}

package/es/atom/checkbox-with-title/index.js

@@ -1,15 +1,18 @@
 import _uniqueId from "lodash/fp/uniqueId";
 import _noop from "lodash/fp/noop";
+import _getOr from "lodash/fp/getOr";
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import FaIcon from '../icon';
+import { COLORS } from '../../variables/colors';
+import Provider from '../provider';
 import style from './style.css';
 const DEFAULT_ICON_STYLE = {
   padding: '0',
   width: '20px',
   height: '20px'
 };
-const CheckboxWithTitle = props => {
+const CheckboxWithTitle = (props, context) => {
   const {
     title,
     name,
@@ -24,6 +27,10 @@ const CheckboxWithTitle = props => {
     },
     customStyle = {}
   } = props;
+  const {
+    skin
+  } = context;
+  const primaryColor = _getOr(COLORS.cm_primary_blue, 'common.primary', skin);
   const {
     iconName,
     iconColor,
@@ -48,7 +55,11 @@ const CheckboxWithTitle = props => {
     "data-name": dataName,
     "aria-label": ariaLabel
   }), /*#__PURE__*/React.createElement("div", {
-    className: style.label
+    className: style.label,
+    style: checked ? {
+      background: primaryColor,
+      borderColor: primaryColor
+    } : null
   }, checked ? /*#__PURE__*/React.createElement(FaIcon, {
     className: style.icon,
     iconName: iconName,
@@ -82,5 +93,8 @@ CheckboxWithTitle.propTypes = process.env.NODE_ENV !== "production" ? {
   }),
   customStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))
 } : {};
+CheckboxWithTitle.contextTypes = {
+  skin: Provider.childContextTypes.skin
+};
 export default CheckboxWithTitle;
 //# sourceMappingURL=index.js.map

package/es/atom/checkbox-with-title/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","FaIcon","style","DEFAULT_ICON_STYLE","padding","width","height","CheckboxWithTitle","props","title","name","checked","onChange","_noop","dataName","ariaLabel","icon","iconName","iconColor","preset","customStyle","idCheckbox","_uniqueId","handleChange","e","target","createElement","className","container","htmlFor","type","id","checkbox","label","dangerouslySetInnerHTML","__html","propTypes","process","env","NODE_ENV","string","bool","func","shape","objectOf","oneOfType","number"],"sources":["../../../src/atom/checkbox-with-title/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, uniqueId} from 'lodash/fp';\nimport FaIcon from '../icon';\nimport style from './style.css';\n\nconst DEFAULT_ICON_STYLE = {padding: '0', width: '20px', height: '20px'};\n\nconst CheckboxWithTitle = props => {\n  const {\n    title,\n    name,\n    checked,\n    onChange = noop,\n    'data-name': dataName,\n    'aria-label': ariaLabel,\n    icon = {iconName: 'check', iconColor: 'white', preset: 's'},\n    customStyle = {}\n  } = props;\n  const {iconName, iconColor, preset} = icon;\n  const idCheckbox = useMemo(() => uniqueId('input-checkbox-'), []);\n  const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);\n\n  return (\n    <div className={style.container} style={{...customStyle}}>\n      {onChange !== noop ? (\n        <label htmlFor={idCheckbox}>\n          <input\n            type=\"checkbox\"\n            id={idCheckbox}\n            name={name}\n            onChange={handleChange}\n            checked={checked}\n            className={style.checkbox}\n            data-name={dataName}\n            aria-label={ariaLabel}\n          />\n          <div className={style.label}>\n            {checked ? (\n              <FaIcon\n                className={style.icon}\n                iconName={iconName}\n                iconColor={iconColor}\n                preset={preset}\n                customStyle={DEFAULT_ICON_STYLE}\n              />\n            ) : (\n              <FaIcon\n                className={style.icon}\n                iconName={'square'}\n                iconColor={'transparent'}\n                preset=\"s\"\n                customStyle={DEFAULT_ICON_STYLE}\n              />\n            )}\n          </div>\n        </label>\n      ) : null}\n      {title ? (\n        <span\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{__html: title}}\n        />\n      ) : null}\n    </div>\n  );\n};\n\nCheckboxWithTitle.propTypes = {\n  title: PropTypes.string,\n  name: PropTypes.string,\n  checked: PropTypes.bool,\n  onChange: PropTypes.func,\n  'aria-label': PropTypes.string,\n  'data-name': PropTypes.string,\n  icon: PropTypes.shape({\n    iconName: PropTypes.string,\n    iconColor: PropTypes.string,\n    preset: PropTypes.string\n  }),\n  customStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n};\nexport default CheckboxWithTitle;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","FaIcon","COLORS","Provider","style","DEFAULT_ICON_STYLE","padding","width","height","CheckboxWithTitle","props","context","title","name","checked","onChange","_noop","dataName","ariaLabel","icon","iconName","iconColor","preset","customStyle","skin","primaryColor","_getOr","cm_primary_blue","idCheckbox","_uniqueId","handleChange","e","target","createElement","className","container","htmlFor","type","id","checkbox","label","background","borderColor","dangerouslySetInnerHTML","__html","propTypes","process","env","NODE_ENV","string","bool","func","shape","objectOf","oneOfType","number","contextTypes","childContextTypes"],"sources":["../../../src/atom/checkbox-with-title/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr, noop, uniqueId} from 'lodash/fp';\nimport FaIcon from '../icon';\nimport {COLORS} from '../../variables/colors';\nimport Provider from '../provider';\nimport style from './style.css';\n\nconst DEFAULT_ICON_STYLE = {padding: '0', width: '20px', height: '20px'};\n\nconst CheckboxWithTitle = (props, context) => {\n  const {\n    title,\n    name,\n    checked,\n    onChange = noop,\n    'data-name': dataName,\n    'aria-label': ariaLabel,\n    icon = {iconName: 'check', iconColor: 'white', preset: 's'},\n    customStyle = {}\n  } = props;\n  const {skin} = context;\n  const primaryColor = getOr(COLORS.cm_primary_blue, 'common.primary', skin);\n  const {iconName, iconColor, preset} = icon;\n  const idCheckbox = useMemo(() => uniqueId('input-checkbox-'), []);\n  const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);\n\n  return (\n    <div className={style.container} style={{...customStyle}}>\n      {onChange !== noop ? (\n        <label htmlFor={idCheckbox}>\n          <input\n            type=\"checkbox\"\n            id={idCheckbox}\n            name={name}\n            onChange={handleChange}\n            checked={checked}\n            className={style.checkbox}\n            data-name={dataName}\n            aria-label={ariaLabel}\n          />\n          <div\n            className={style.label}\n            style={checked ? {background: primaryColor, borderColor: primaryColor} : null}\n          >\n            {checked ? (\n              <FaIcon\n                className={style.icon}\n                iconName={iconName}\n                iconColor={iconColor}\n                preset={preset}\n                customStyle={DEFAULT_ICON_STYLE}\n              />\n            ) : (\n              <FaIcon\n                className={style.icon}\n                iconName={'square'}\n                iconColor={'transparent'}\n                preset=\"s\"\n                customStyle={DEFAULT_ICON_STYLE}\n              />\n            )}\n          </div>\n        </label>\n      ) : null}\n      {title ? (\n        <span\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{__html: title}}\n        />\n      ) : null}\n    </div>\n  );\n};\n\nCheckboxWithTitle.propTypes = {\n  title: PropTypes.string,\n  name: PropTypes.string,\n  checked: PropTypes.bool,\n  onChange: PropTypes.func,\n  'aria-label': PropTypes.string,\n  'data-name': PropTypes.string,\n  icon: PropTypes.shape({\n    iconName: PropTypes.string,\n    iconColor: PropTypes.string,\n    preset: PropTypes.string\n  }),\n  customStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n};\n\nCheckboxWithTitle.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\nexport default CheckboxWithTitle;\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/chip/index.js"],"names":[],"mappings":"AAmBO,qGAG0E;;AAGjF,6DAuEC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/chip/index.js"],"names":[],"mappings":"AAmBO,qGAG0E;;AAGjF,6DA0EC"}

package/es/atom/chip/index.js

@@ -1,7 +1,7 @@
 import React, { useMemo, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import get from 'lodash/fp/get';
+import getOr from 'lodash/fp/getOr';
 import { convert } from 'css-color-function';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { fas } from '@fortawesome/pro-solid-svg-icons';
@@ -27,14 +27,14 @@ const Chip = (props, context) => {
     customIcon,
     onClick,
     leftIcon,
-    backgroundColor = DEFAULT_BACKGROUND_COLOR,
+    backgroundColor,
     customStyle
   } = props;
   const {
     skin
   } = context;
-  const skinColor = get('common.primary', skin);
-  const selectedBgColor = backgroundColor === 'skin' && skinColor ? skinColor : backgroundColor;
+  const skinColor = getOr(DEFAULT_BACKGROUND_COLOR, 'common.primary', skin);
+  const selectedBgColor = backgroundColor === 'skin' && skinColor ? skinColor : backgroundColor || DEFAULT_BACKGROUND_COLOR;
   const hoveredSelectedBgColor = calculateHoveredSelectedBgColor(selectedBgColor);
   const [isHovered, setIsHovered] = useState(false);
   const handleClick = useMemo(() => onClick, [onClick]);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","useState","useCallback","PropTypes","classnames","get","convert","FontAwesomeIcon","fas","library","Provider","COLORS","style","add","LUMINOSITY_DELTA","cm_primary_blue","DEFAULT_BACKGROUND_COLOR","ICON_SIZE","calculateHoveredSelectedBgColor","selectedBgColor","luminosityDelta","Chip","props","context","text","subText","textColor","cm_grey_700","selected","customIcon","onClick","leftIcon","backgroundColor","customStyle","skin","skinColor","hoveredSelectedBgColor","isHovered","setIsHovered","handleClick","handleMouseEnter","handleMouseLeave","hoverStyle","defaultIcon","showIcon","color","white","createElement","className","container","unselected","onMouseEnter","onMouseLeave","left","icon","fontSize","title","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","string","bool","func","objectOf","oneOfType","number"],"sources":["../../../src/atom/chip/index.js"],"sourcesContent":["import React, {useMemo, useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\n\nimport get from 'lodash/fp/get';\nimport {convert} from 'css-color-function';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {fas} from '@fortawesome/pro-solid-svg-icons';\nimport {library} from '@fortawesome/fontawesome-svg-core';\nimport Provider from '../provider';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\n\nlibrary.add(fas);\n\nconst LUMINOSITY_DELTA = 0.08;\nconst {cm_primary_blue: DEFAULT_BACKGROUND_COLOR} = COLORS;\nconst ICON_SIZE = '12px';\n\nexport const calculateHoveredSelectedBgColor = (\n  selectedBgColor,\n  luminosityDelta = LUMINOSITY_DELTA\n) => convert(`hsl(from ${selectedBgColor} h s calc(l*(1 - ${luminosityDelta})))`);\n// note: luminosity decrease is relative to the selected color\n\nconst Chip = (props, context) => {\n  const {\n    text,\n    subText,\n    textColor = COLORS.cm_grey_700,\n    selected = false,\n    customIcon,\n    onClick,\n    leftIcon,\n    backgroundColor = DEFAULT_BACKGROUND_COLOR,\n    customStyle\n  } = props;\n  const {skin} = context;\n  const skinColor = get('common.primary', skin);\n  const selectedBgColor = backgroundColor === 'skin' && skinColor ? skinColor : backgroundColor;\n  const hoveredSelectedBgColor = calculateHoveredSelectedBgColor(selectedBgColor);\n\n  const [isHovered, setIsHovered] = useState(false);\n\n  const handleClick = useMemo(() => onClick, [onClick]);\n\n  const handleMouseEnter = useCallback(() => {\n    setIsHovered(true);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setIsHovered(false);\n  }, []);\n\n  const hoverStyle = isHovered ? {backgroundColor: hoveredSelectedBgColor} : {};\n\n  const defaultIcon = selected ? 'fa-check' : 'fa-plus';\n  const showIcon = customIcon !== 'none';\n  const color = selected ? COLORS.white : textColor;\n\n  return (\n    <div\n      className={classnames(style.container, !selected && style.unselected)}\n      style={{\n        ...(selected && selectedBgColor ? {backgroundColor: selectedBgColor} : {}),\n        ...(selected && hoverStyle),\n        ...customStyle\n      }}\n      onClick={handleClick}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      aria-label={text}\n      data-name={`chip-${text}`}\n    >\n      <div className={style.left}>\n        {leftIcon ? <FontAwesomeIcon style={{color}} icon={leftIcon} fontSize={ICON_SIZE} /> : null}\n        <div title={text}>\n          <span className={style.text} style={{color}}>\n            {text}\n          </span>\n          {subText ? (\n            <span className={style.subText} style={{color}}>\n              {subText}\n            </span>\n          ) : null}\n        </div>\n      </div>\n      {showIcon ? (\n        <FontAwesomeIcon\n          style={{color}}\n          icon={customIcon ? `fa-${customIcon}` : defaultIcon}\n          fontSize={ICON_SIZE}\n        />\n      ) : null}\n    </div>\n  );\n};\n\nChip.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nChip.propTypes = {\n  text: PropTypes.string,\n  subText: PropTypes.string,\n  textColor: PropTypes.string,\n  selected: PropTypes.bool,\n  customIcon: PropTypes.string,\n  backgroundColor: PropTypes.string,\n  onClick: PropTypes.func,\n  leftIcon: PropTypes.string,\n  customStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n};\n\nexport default Chip;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useMemo","useState","useCallback","PropTypes","classnames","getOr","convert","FontAwesomeIcon","fas","library","Provider","COLORS","style","add","LUMINOSITY_DELTA","cm_primary_blue","DEFAULT_BACKGROUND_COLOR","ICON_SIZE","calculateHoveredSelectedBgColor","selectedBgColor","luminosityDelta","Chip","props","context","text","subText","textColor","cm_grey_700","selected","customIcon","onClick","leftIcon","backgroundColor","customStyle","skin","skinColor","hoveredSelectedBgColor","isHovered","setIsHovered","handleClick","handleMouseEnter","handleMouseLeave","hoverStyle","defaultIcon","showIcon","color","white","createElement","className","container","unselected","onMouseEnter","onMouseLeave","left","icon","fontSize","title","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","string","bool","func","objectOf","oneOfType","number"],"sources":["../../../src/atom/chip/index.js"],"sourcesContent":["import React, {useMemo, useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\n\nimport getOr from 'lodash/fp/getOr';\nimport {convert} from 'css-color-function';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {fas} from '@fortawesome/pro-solid-svg-icons';\nimport {library} from '@fortawesome/fontawesome-svg-core';\nimport Provider from '../provider';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\n\nlibrary.add(fas);\n\nconst LUMINOSITY_DELTA = 0.08;\nconst {cm_primary_blue: DEFAULT_BACKGROUND_COLOR} = COLORS;\nconst ICON_SIZE = '12px';\n\nexport const calculateHoveredSelectedBgColor = (\n  selectedBgColor,\n  luminosityDelta = LUMINOSITY_DELTA\n) => convert(`hsl(from ${selectedBgColor} h s calc(l*(1 - ${luminosityDelta})))`);\n// note: luminosity decrease is relative to the selected color\n\nconst Chip = (props, context) => {\n  const {\n    text,\n    subText,\n    textColor = COLORS.cm_grey_700,\n    selected = false,\n    customIcon,\n    onClick,\n    leftIcon,\n    backgroundColor,\n    customStyle\n  } = props;\n  const {skin} = context;\n  const skinColor = getOr(DEFAULT_BACKGROUND_COLOR, 'common.primary', skin);\n  const selectedBgColor =\n    backgroundColor === 'skin' && skinColor\n      ? skinColor\n      : backgroundColor || DEFAULT_BACKGROUND_COLOR;\n  const hoveredSelectedBgColor = calculateHoveredSelectedBgColor(selectedBgColor);\n\n  const [isHovered, setIsHovered] = useState(false);\n\n  const handleClick = useMemo(() => onClick, [onClick]);\n\n  const handleMouseEnter = useCallback(() => {\n    setIsHovered(true);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setIsHovered(false);\n  }, []);\n\n  const hoverStyle = isHovered ? {backgroundColor: hoveredSelectedBgColor} : {};\n\n  const defaultIcon = selected ? 'fa-check' : 'fa-plus';\n  const showIcon = customIcon !== 'none';\n  const color = selected ? COLORS.white : textColor;\n\n  return (\n    <div\n      className={classnames(style.container, !selected && style.unselected)}\n      style={{\n        ...(selected && selectedBgColor ? {backgroundColor: selectedBgColor} : {}),\n        ...(selected && hoverStyle),\n        ...customStyle\n      }}\n      onClick={handleClick}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      aria-label={text}\n      data-name={`chip-${text}`}\n    >\n      <div className={style.left}>\n        {leftIcon ? <FontAwesomeIcon style={{color}} icon={leftIcon} fontSize={ICON_SIZE} /> : null}\n        <div title={text}>\n          <span className={style.text} style={{color}}>\n            {text}\n          </span>\n          {subText ? (\n            <span className={style.subText} style={{color}}>\n              {subText}\n            </span>\n          ) : null}\n        </div>\n      </div>\n      {showIcon ? (\n        <FontAwesomeIcon\n          style={{color}}\n          icon={customIcon ? `fa-${customIcon}` : defaultIcon}\n          fontSize={ICON_SIZE}\n        />\n      ) : null}\n    </div>\n  );\n};\n\nChip.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nChip.propTypes = {\n  text: PropTypes.string,\n  subText: PropTypes.string,\n  textColor: PropTypes.string,\n  selected: PropTypes.bool,\n  customIcon: PropTypes.string,\n  backgroundColor: PropTypes.string,\n  onClick: PropTypes.func,\n  leftIcon: PropTypes.string,\n  customStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n};\n\nexport default Chip;\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,5 +1,5 @@
 export default InputSwitch;
-declare function InputSwitch(props: any): JSX.Element;
+declare function InputSwitch(props: any, context: any): JSX.Element;
 declare namespace InputSwitch {
     const propTypes: {
         title: PropTypes.Requireable<string>;
@@ -19,6 +19,29 @@ declare namespace InputSwitch {
         requiredSelection: PropTypes.Requireable<boolean>;
         icon: PropTypes.Requireable<string>;
     };
+    namespace contextTypes {
+        const skin: PropTypes.Requireable<PropTypes.InferProps<{
+            common: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            images: PropTypes.Requireable<PropTypes.InferProps<{
+                'logo-mobile': PropTypes.Requireable<any>;
+                logo: PropTypes.Requireable<any>;
+                'logo-email': PropTypes.Requireable<any>;
+                login: PropTypes.Requireable<any>;
+            }>>;
+            icons: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            mod: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            courses: PropTypes.Requireable<any[]>;
+            texts: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+        }>>;
+    }
 }
 import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

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

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

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

@@ -1,13 +1,16 @@
 import _uniqueId from "lodash/fp/uniqueId";
 import _noop from "lodash/fp/noop";
+import _getOr from "lodash/fp/getOr";
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import getClassState from '../../util/get-class-state';
+import { COLORS } from '../../variables/colors';
+import Provider from '../provider';
 import style from './style.css';
-const InputSwitch = props => {
+const InputSwitch = (props, context) => {
   const {
     title,
     name,
@@ -26,6 +29,10 @@ const InputSwitch = props => {
     'aria-label': ariaLabel,
     icon
   } = props;
+  const {
+    skin
+  } = context;
+  const primaryColor = _getOr(COLORS.cm_primary_blue, 'common.primary', skin);
   const idSwitch = id || _uniqueId('input-switch-');
   const isDisabled = disabled ? 'disabled' : '';
   const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);
@@ -97,7 +104,11 @@ const InputSwitch = props => {
     "data-name": "input-switch-label",
     tabIndex: 0,
     "aria-label": ariaLabel,
-    title: ariaLabel
+    title: ariaLabel,
+    style: value ? {
+      background: primaryColor,
+      borderColor: primaryColor
+    } : null
   }))), /*#__PURE__*/React.createElement("div", {
     className: !details ? style.alignedTextContainer : null
   }, titlePosition === 'right' ? titleView : null, details ? /*#__PURE__*/React.createElement("div", {
@@ -122,5 +133,8 @@ InputSwitch.propTypes = process.env.NODE_ENV !== "production" ? {
   requiredSelection: PropTypes.bool,
   icon: PropTypes.string
 } : {};
+InputSwitch.contextTypes = {
+  skin: Provider.childContextTypes.skin
+};
 export default InputSwitch;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","FontAwesomeIcon","classNames","getClassState","style","InputSwitch","props","title","name","id","value","disabled","onChange","_noop","description","modified","theme","titlePosition","details","requiredSelection","dataName","ariaLabelledBy","ariaLabel","icon","idSwitch","_uniqueId","isDisabled","handleChange","e","target","checked","titleView","createElement","className","titleContainer","newMoocTitleContainer","descriptionView","getClass","defaultClass","coorpmanager","modifiedClass","coorpmanagerModified","newMooc","newMoocModified","partielUncheck","defaultStyle","btnSwitchContainer","_extends","type","checkbox","htmlFor","tabIndex","alignedTextContainer","detailsTxt","propTypes","process","env","NODE_ENV","string","bool","func","oneOf"],"sources":["../../../src/atom/input-switch/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, uniqueId} from 'lodash/fp';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport classNames from 'classnames';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst InputSwitch = props => {\n  const {\n    title,\n    name,\n    id,\n    value,\n    disabled,\n    onChange = noop,\n    description,\n    modified = false,\n    theme = 'default',\n    titlePosition = 'left',\n    details = '',\n    requiredSelection = false,\n    'data-name': dataName,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-label': ariaLabel,\n    icon\n  } = props;\n\n  const idSwitch = id || uniqueId('input-switch-');\n  const isDisabled = disabled ? 'disabled' : '';\n  const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);\n  const titleView = title ? (\n    <div\n      className={classNames(\n        icon ? style.titleContainer : null,\n        theme === 'newMooc' ? style.newMoocTitleContainer : null\n      )}\n    >\n      {icon ? <FontAwesomeIcon icon={icon} className={style.icon} /> : null}\n      <span id={`title-view-${dataName}`} className={style.title}>\n        {title}\n      </span>\n    </div>\n  ) : null;\n\n  const descriptionView = description ? (\n    <div className={style.description}>{description}</div>\n  ) : null;\n\n  const getClass = () => {\n    switch (theme) {\n      case 'coorpmanager':\n        return {\n          defaultClass: style.coorpmanager,\n          modifiedClass: style.coorpmanagerModified\n        };\n      case 'newMooc':\n        return {\n          defaultClass: style.newMooc,\n          modifiedClass: style.newMoocModified\n        };\n      case 'mooc':\n        return {\n          defaultClass: style.partielUncheck,\n          modifiedClass: style.coorpmanagerModified\n        };\n      default:\n        return {defaultClass: style.defaultStyle, modifiedClass: style.modified};\n    }\n  };\n  const {defaultClass, modifiedClass} = getClass();\n  const className = getClassState(defaultClass, modifiedClass, null, modified);\n\n  return (\n    <div className={className} data-name={`switch-input-${theme}${dataName}`}>\n      {titlePosition === 'left' ? titleView : null}\n      <div className={requiredSelection ? style.requiredSelection : null}>\n        <div className={style.btnSwitchContainer}>\n          <input\n            {...(ariaLabelledBy ? {'aria-labelledby': ariaLabelledBy} : {})}\n            {...(title ? {'aria-labelledby': `title-view-${dataName}`} : {})}\n            {...(ariaLabel && !ariaLabelledBy && !title ? {'aria-label': ariaLabel} : {})}\n            type=\"checkbox\"\n            id={idSwitch}\n            name={name}\n            onChange={handleChange}\n            checked={value}\n            disabled={isDisabled}\n            className={style.checkbox}\n            aria-labelledby={ariaLabelledBy}\n          />\n          <label\n            htmlFor={idSwitch}\n            data-name=\"input-switch-label\"\n            tabIndex={0}\n            aria-label={ariaLabel}\n            title={ariaLabel}\n          />\n        </div>\n      </div>\n      <div className={!details ? style.alignedTextContainer : null}>\n        {titlePosition === 'right' ? titleView : null}\n        {details ? <div className={style.detailsTxt}>{details}</div> : null}\n      </div>\n      {descriptionView}\n    </div>\n  );\n};\n\nInputSwitch.propTypes = {\n  title: PropTypes.string,\n  name: PropTypes.string,\n  id: PropTypes.string,\n  value: PropTypes.bool,\n  disabled: PropTypes.bool,\n  onChange: PropTypes.func,\n  description: PropTypes.string,\n  'aria-labelledby': PropTypes.string,\n  'aria-label': PropTypes.string,\n  modified: PropTypes.bool,\n  titlePosition: PropTypes.oneOf(['right', 'left']),\n  theme: PropTypes.oneOf(['default', 'coorpmanager', 'mooc', 'newMooc']),\n  details: PropTypes.string,\n  'data-name': PropTypes.string,\n  requiredSelection: PropTypes.bool,\n  icon: PropTypes.string\n};\nexport default InputSwitch;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","FontAwesomeIcon","classNames","getClassState","COLORS","Provider","style","InputSwitch","props","context","title","name","id","value","disabled","onChange","_noop","description","modified","theme","titlePosition","details","requiredSelection","dataName","ariaLabelledBy","ariaLabel","icon","skin","primaryColor","_getOr","cm_primary_blue","idSwitch","_uniqueId","isDisabled","handleChange","e","target","checked","titleView","createElement","className","titleContainer","newMoocTitleContainer","descriptionView","getClass","defaultClass","coorpmanager","modifiedClass","coorpmanagerModified","newMooc","newMoocModified","partielUncheck","defaultStyle","btnSwitchContainer","_extends","type","checkbox","htmlFor","tabIndex","background","borderColor","alignedTextContainer","detailsTxt","propTypes","process","env","NODE_ENV","string","bool","func","oneOf","contextTypes","childContextTypes"],"sources":["../../../src/atom/input-switch/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr, noop, uniqueId} from 'lodash/fp';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport classNames from 'classnames';\nimport getClassState from '../../util/get-class-state';\nimport {COLORS} from '../../variables/colors';\nimport Provider from '../provider';\nimport style from './style.css';\n\nconst InputSwitch = (props, context) => {\n  const {\n    title,\n    name,\n    id,\n    value,\n    disabled,\n    onChange = noop,\n    description,\n    modified = false,\n    theme = 'default',\n    titlePosition = 'left',\n    details = '',\n    requiredSelection = false,\n    'data-name': dataName,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-label': ariaLabel,\n    icon\n  } = props;\n  const {skin} = context;\n  const primaryColor = getOr(COLORS.cm_primary_blue, 'common.primary', skin);\n  const idSwitch = id || uniqueId('input-switch-');\n  const isDisabled = disabled ? 'disabled' : '';\n  const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);\n  const titleView = title ? (\n    <div\n      className={classNames(\n        icon ? style.titleContainer : null,\n        theme === 'newMooc' ? style.newMoocTitleContainer : null\n      )}\n    >\n      {icon ? <FontAwesomeIcon icon={icon} className={style.icon} /> : null}\n      <span id={`title-view-${dataName}`} className={style.title}>\n        {title}\n      </span>\n    </div>\n  ) : null;\n\n  const descriptionView = description ? (\n    <div className={style.description}>{description}</div>\n  ) : null;\n\n  const getClass = () => {\n    switch (theme) {\n      case 'coorpmanager':\n        return {\n          defaultClass: style.coorpmanager,\n          modifiedClass: style.coorpmanagerModified\n        };\n      case 'newMooc':\n        return {\n          defaultClass: style.newMooc,\n          modifiedClass: style.newMoocModified\n        };\n      case 'mooc':\n        return {\n          defaultClass: style.partielUncheck,\n          modifiedClass: style.coorpmanagerModified\n        };\n      default:\n        return {defaultClass: style.defaultStyle, modifiedClass: style.modified};\n    }\n  };\n  const {defaultClass, modifiedClass} = getClass();\n  const className = getClassState(defaultClass, modifiedClass, null, modified);\n\n  return (\n    <div className={className} data-name={`switch-input-${theme}${dataName}`}>\n      {titlePosition === 'left' ? titleView : null}\n      <div className={requiredSelection ? style.requiredSelection : null}>\n        <div className={style.btnSwitchContainer}>\n          <input\n            {...(ariaLabelledBy ? {'aria-labelledby': ariaLabelledBy} : {})}\n            {...(title ? {'aria-labelledby': `title-view-${dataName}`} : {})}\n            {...(ariaLabel && !ariaLabelledBy && !title ? {'aria-label': ariaLabel} : {})}\n            type=\"checkbox\"\n            id={idSwitch}\n            name={name}\n            onChange={handleChange}\n            checked={value}\n            disabled={isDisabled}\n            className={style.checkbox}\n            aria-labelledby={ariaLabelledBy}\n          />\n          <label\n            htmlFor={idSwitch}\n            data-name=\"input-switch-label\"\n            tabIndex={0}\n            aria-label={ariaLabel}\n            title={ariaLabel}\n            style={value ? {background: primaryColor, borderColor: primaryColor} : null}\n          />\n        </div>\n      </div>\n      <div className={!details ? style.alignedTextContainer : null}>\n        {titlePosition === 'right' ? titleView : null}\n        {details ? <div className={style.detailsTxt}>{details}</div> : null}\n      </div>\n      {descriptionView}\n    </div>\n  );\n};\n\nInputSwitch.propTypes = {\n  title: PropTypes.string,\n  name: PropTypes.string,\n  id: PropTypes.string,\n  value: PropTypes.bool,\n  disabled: PropTypes.bool,\n  onChange: PropTypes.func,\n  description: PropTypes.string,\n  'aria-labelledby': PropTypes.string,\n  'aria-label': PropTypes.string,\n  modified: PropTypes.bool,\n  titlePosition: PropTypes.oneOf(['right', 'left']),\n  theme: PropTypes.oneOf(['default', 'coorpmanager', 'mooc', 'newMooc']),\n  details: PropTypes.string,\n  'data-name': PropTypes.string,\n  requiredSelection: PropTypes.bool,\n  icon: PropTypes.string\n};\n\nInputSwitch.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nexport default InputSwitch;\n"],"mappings":"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","ignoreList":[]}

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

@@ -4,6 +4,12 @@ declare class Range extends React.Component<any, any, any> {
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         onChangeEnd: PropTypes.Requireable<(...args: any[]) => any>;
         multi: PropTypes.Requireable<boolean>;
+        theme: PropTypes.Requireable<string>;
+        min: PropTypes.Requireable<number>;
+        max: PropTypes.Requireable<number>;
+        step: PropTypes.Requireable<number>;
+        minLabel: PropTypes.Requireable<string>;
+        maxLabel: PropTypes.Requireable<string>;
         HammerForTestingMin: PropTypes.Requireable<PropTypes.InferProps<{
             on: PropTypes.Requireable<(...args: any[]) => any>;
             destroy: PropTypes.Requireable<(...args: any[]) => any>;
@@ -14,17 +20,39 @@ declare class Range extends React.Component<any, any, any> {
             destroy: PropTypes.Requireable<(...args: any[]) => any>;
             stop: PropTypes.Requireable<(...args: any[]) => any>;
         }>>;
-        value: PropTypes.Requireable<NonNullable<number | (number | null | undefined)[] | null | undefined>>;
+    };
+    static contextTypes: {
+        skin: PropTypes.Requireable<PropTypes.InferProps<{
+            common: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            images: PropTypes.Requireable<PropTypes.InferProps<{
+                'logo-mobile': PropTypes.Requireable<any>;
+                logo: PropTypes.Requireable<any>;
+                'logo-email': PropTypes.Requireable<any>;
+                login: PropTypes.Requireable<any>;
+            }>>;
+            icons: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            mod: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            courses: PropTypes.Requireable<any[]>;
+            texts: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+        }>>;
     };
     static getDerivedStateFromProps(props: any, state: any): {
         multi: any;
-        value: any;
+        value: number | (number | number[])[];
     } | null;
     constructor(props: any, context: any);
     state: {
         pending: boolean;
         multi: any;
-        value: any;
+        value: number | (number | number[])[];
     };
     handleClick(e: any): void;
     setRefTrack(track: any): void;
@@ -33,6 +61,8 @@ declare class Range extends React.Component<any, any, any> {
     handleMinChangeEnd(e: any): void;
     handleMaxChangeEnd(e: any): void;
     track: any;
+    normalizedToActual(normalizedValue: any): any;
+    roundToStep(value: any): number;
     handleChange(value: any, valueIndex: any, pending: any): void;
     triggerChange(newValues: any, pending: any): any;
     render(): JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/range/index.js"],"names":[],"mappings":";AA4EA;IACE;;;;;;;;;;;;;;;MAQE;IAEF;;;aAMC;IAED,sCAcC;IAXC;;;;MAGC;IAkEH,0BAmBC;IA3ED,8BAEC;IAED,8BAKC;IAED,8BAKC;IAED,iCAKC;IAED,iCAKC;IA7BC,WAAkB;IA+BpB,8DAcC;IAED,iDAMC;IAuBD,sBAyCC;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/range/index.js"],"names":[],"mappings":";AAyFA;IACE;;;;;;;;;;;;;;;;;;;;MAYE;IAEF;;;;;;;;;;;;;;;;;;;;;;MAEE;IAEF;;;aAIC;IAED,sCAYC;IAVC;;;;MAGC;IAuEH,0BAkBC;IAhFD,8BAEC;IAYD,8BAKC;IAED,8BAKC;IAED,iCAKC;IAED,iCAKC;IAvCC,WAAkB;IAGpB,8CAGC;IAED,gCAGC;IA8BD,8DAWC;IAED,iDAKC;IAsBD,sBAmFC;CACF"}

package/es/atom/range/index.js

@@ -1,8 +1,10 @@
+import _getOr from "lodash/fp/getOr";
 import _clamp from "lodash/fp/clamp";
 import _set from "lodash/fp/set";
 import _noop from "lodash/fp/noop";
 import React from 'react';
 import PropTypes from 'prop-types';
+import Provider from '../provider';
 import Handle from './handle';
 import style from './style.css';
 const valueOnTrack = (track, x) => {
@@ -15,11 +17,20 @@ const valueOnTrack = (track, x) => {
 const extractStateFromProps = props => {
   const {
     multi = false,
-    value = multi ? [0, 1] : 0
+    value = multi ? [0, 1] : 0,
+    min = 0,
+    max = 100
   } = props;
+  const toNormalized = actualValue => (actualValue - min) / (max - min);
+  let normalizedValue;
+  if (multi) {
+    normalizedValue = Array.isArray(value) ? value.map(toNormalized) : [toNormalized(0), toNormalized(value)];
+  } else {
+    normalizedValue = toNormalized(value);
+  }
   return {
     multi,
-    value: multi ? value : [0, value]
+    value: multi ? normalizedValue : [0, normalizedValue]
   };
 };
 const RenderHandles = props => {
@@ -72,6 +83,9 @@ RenderHandles.propTypes = process.env.NODE_ENV !== "production" ? {
   HammerForTestingMax: Handle.propTypes.HammerForTesting
 } : {};
 class Range extends React.Component {
+  static contextTypes = {
+    skin: Provider.childContextTypes.skin
+  };
   static getDerivedStateFromProps(props, state) {
     const {
       pending
@@ -95,6 +109,19 @@ class Range extends React.Component {
   setRefTrack(track) {
     this.track = track;
   }
+  normalizedToActual(normalizedValue) {
+    const {
+      min = 0,
+      max = 100
+    } = this.props;
+    return min + normalizedValue * (max - min);
+  }
+  roundToStep(value) {
+    const {
+      step = 1
+    } = this.props;
+    return Math.round(value / step) * step;
+  }
   handleMinChange(e) {
     e.srcEvent.stopPropagation();
     e.srcEvent.preventDefault();
@@ -139,7 +166,8 @@ class Range extends React.Component {
       multi = false
     } = this.props;
     const handle = pending ? onChange : onChangeEnd;
-    return handle(multi ? newValues : newValues[1]);
+    const actualValues = newValues.map(val => this.roundToStep(this.normalizedToActual(val)));
+    return handle(multi ? actualValues : actualValues[1]);
   }
   handleClick(e) {
     e.stopPropagation();
@@ -148,8 +176,7 @@ class Range extends React.Component {
       value: [left, right],
       multi
     } = this.state;
-    const x = e.clientX;
-    const newValue = valueOnTrack(this.track, x);
+    const newValue = valueOnTrack(this.track, e.clientX);
     if (!multi) return this.handleChange(newValue, 1, false);
     if (left === right) {
       const isClickToTheLeft = left - newValue > 0;
@@ -164,22 +191,30 @@ class Range extends React.Component {
       value: [left, right],
       pending
     } = this.state;
+    const {
+      theme = 'default',
+      minLabel = 'Min',
+      maxLabel = 'Max',
+      HammerForTestingMin,
+      HammerForTestingMax
+    } = this.props;
     const railWidth = right - left;
     const railLeft = left;
-    const railStyle = {
-      backgroundColor: '#9999A8',
+    const {
+      skin
+    } = this.context;
+    const primaryColor = _getOr('#00B0FF', 'common.primary', skin);
+    const railStyle = theme === 'mooc' ? {
+      backgroundColor: primaryColor,
+      width: `${railWidth * 100}%`,
+      left: `${railLeft * 100}%`
+    } : {
       width: `${railWidth * 100}%`,
       left: `${railLeft * 100}%`
     };
-    const {
-      HammerForTestingMin,
-      HammerForTestingMax
-    } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      "data-testid": "slider",
-      className: style.containerWrapper,
-      onClick: this.handleClick
-    }, /*#__PURE__*/React.createElement("div", {
+    const minActualValue = this.roundToStep(this.normalizedToActual(left));
+    const maxActualValue = this.roundToStep(this.normalizedToActual(right));
+    const sliderComponent = /*#__PURE__*/React.createElement("div", {
       className: style.container
     }, /*#__PURE__*/React.createElement("div", {
       "data-testid": "track",
@@ -200,17 +235,50 @@ class Range extends React.Component {
       onHandleMinChangeEnd: this.handleMinChangeEnd,
       onHandleMaxChange: this.handleMaxChange,
       onHandleMaxChangeEnd: this.handleMaxChangeEnd
-    })));
+    }));
+    if (theme === 'mooc') {
+      return /*#__PURE__*/React.createElement("div", {
+        "data-testid": "slider",
+        className: style.containerWrapper
+      }, /*#__PURE__*/React.createElement("div", {
+        onClick: this.handleClick
+      }, sliderComponent), /*#__PURE__*/React.createElement("div", {
+        className: style.inputsRow
+      }, multi ? /*#__PURE__*/React.createElement("div", {
+        className: style.moocInput,
+        "data-testid": "min-value"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: style.inputHint
+      }, minLabel), /*#__PURE__*/React.createElement("span", {
+        className: style.inputValue
+      }, minActualValue)) : null, /*#__PURE__*/React.createElement("div", {
+        className: style.moocInput,
+        "data-testid": "max-value"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: style.inputHint
+      }, maxLabel), /*#__PURE__*/React.createElement("span", {
+        className: style.inputValue
+      }, maxActualValue))));
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      "data-testid": "slider",
+      className: style.containerWrapper,
+      onClick: this.handleClick
+    }, sliderComponent);
   }
 }
 Range.propTypes = process.env.NODE_ENV !== "production" ? {
   onChange: PropTypes.func,
   onChangeEnd: PropTypes.func,
   multi: PropTypes.bool,
+  theme: PropTypes.oneOf(['default', 'mooc']),
+  min: PropTypes.number,
+  max: PropTypes.number,
+  step: PropTypes.number,
+  minLabel: PropTypes.string,
+  maxLabel: PropTypes.string,
   HammerForTestingMin: RenderHandles.propTypes.HammerForTestingMin,
-  HammerForTestingMax: RenderHandles.propTypes.HammerForTestingMax,
-  // eslint-disable-next-line react/no-unused-prop-types
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)])
+  HammerForTestingMax: RenderHandles.propTypes.HammerForTestingMax
 } : {};
 export default Range;
 //# sourceMappingURL=index.js.map