@coorpacademy/components 11.10.3-alpha.0 → 11.10.4-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. package/es/atom/input-switch/index.js +2 -1
  2. package/es/atom/input-switch/index.js.map +1 -1
  3. package/es/atom/link/index.d.ts +7 -15
  4. package/es/atom/link/index.d.ts.map +1 -1
  5. package/es/atom/link/index.js +71 -97
  6. package/es/atom/link/index.js.map +1 -1
  7. package/es/atom/tooltip/index.d.ts +7 -1
  8. package/es/atom/tooltip/index.d.ts.map +1 -1
  9. package/es/atom/tooltip/index.js +39 -14
  10. package/es/atom/tooltip/index.js.map +1 -1
  11. package/es/atom/tooltip/style.css +9 -0
  12. package/es/organism/mooc-header/style.css +2 -1
  13. package/es/organism/user-preferences/index.d.ts.map +1 -1
  14. package/es/organism/user-preferences/index.js +20 -19
  15. package/es/organism/user-preferences/index.js.map +1 -1
  16. package/es/organism/user-preferences/style.css +5 -56
  17. package/es/organism/wizard-contents/index.d.ts +2 -2
  18. package/es/organism/wizard-contents/index.d.ts.map +1 -1
  19. package/es/organism/wizard-contents/index.js +32 -13
  20. package/es/organism/wizard-contents/index.js.map +1 -1
  21. package/es/organism/wizard-contents/style.css +46 -6
  22. package/es/template/activity/progression-item.d.ts +1 -1
  23. package/es/template/activity/progression-item.d.ts.map +1 -1
  24. package/es/template/activity/progression-item.js +3 -5
  25. package/es/template/activity/progression-item.js.map +1 -1
  26. package/es/template/back-office/brand-update/index.d.ts +2 -2
  27. package/lib/atom/input-switch/index.js +2 -1
  28. package/lib/atom/input-switch/index.js.map +1 -1
  29. package/lib/atom/link/index.d.ts +7 -15
  30. package/lib/atom/link/index.d.ts.map +1 -1
  31. package/lib/atom/link/index.js +75 -97
  32. package/lib/atom/link/index.js.map +1 -1
  33. package/lib/atom/tooltip/index.d.ts +7 -1
  34. package/lib/atom/tooltip/index.d.ts.map +1 -1
  35. package/lib/atom/tooltip/index.js +41 -14
  36. package/lib/atom/tooltip/index.js.map +1 -1
  37. package/lib/atom/tooltip/style.css +9 -0
  38. package/lib/organism/mooc-header/style.css +2 -1
  39. package/lib/organism/user-preferences/index.d.ts.map +1 -1
  40. package/lib/organism/user-preferences/index.js +23 -21
  41. package/lib/organism/user-preferences/index.js.map +1 -1
  42. package/lib/organism/user-preferences/style.css +5 -56
  43. package/lib/organism/wizard-contents/index.d.ts +2 -2
  44. package/lib/organism/wizard-contents/index.d.ts.map +1 -1
  45. package/lib/organism/wizard-contents/index.js +34 -13
  46. package/lib/organism/wizard-contents/index.js.map +1 -1
  47. package/lib/organism/wizard-contents/style.css +46 -6
  48. package/lib/template/activity/progression-item.d.ts +1 -1
  49. package/lib/template/activity/progression-item.d.ts.map +1 -1
  50. package/lib/template/activity/progression-item.js +3 -5
  51. package/lib/template/activity/progression-item.js.map +1 -1
  52. package/lib/template/back-office/brand-update/index.d.ts +2 -2
  53. package/package.json +2 -2
@@ -80,7 +80,8 @@ const InputSwitch = props => {
80
80
  "aria-labelledby": `title-view-${dataName}`
81
81
  }), /*#__PURE__*/React.createElement("label", {
82
82
  htmlFor: idSwitch,
83
- "data-name": "input-switch-label"
83
+ "data-name": "input-switch-label",
84
+ tabIndex: 0
84
85
  }))), /*#__PURE__*/React.createElement("div", {
85
86
  className: !details ? style.alignedTextContainer : null
86
87
  }, titlePosition === 'right' ? /*#__PURE__*/React.createElement("div", {
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","useMemo","PropTypes","getClassState","style","InputSwitch","props","title","name","id","value","disabled","onChange","description","modified","theme","titlePosition","details","requiredSelection","dataName","idSwitch","isDisabled","handleChange","e","target","checked","titleView","descriptionView","getClass","defaultClass","coorpmanager","modifiedClass","coorpmanagerModified","partielUncheck","default","className","btnSwitchContainer","checkbox","alignedTextContainer","detailsTxt","propTypes","string","bool","func","oneOf"],"sources":["../../../src/atom/input-switch/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, uniqueId} from 'lodash/fp';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst InputSwitch = props => {\n const {\n title,\n name,\n id,\n value,\n disabled,\n onChange = noop,\n description,\n modified = false,\n theme = 'default',\n titlePosition = 'left',\n details = '',\n requiredSelection = false,\n 'data-name': dataName\n } = props;\n\n const idSwitch = id || uniqueId('input-switch-');\n const isDisabled = disabled ? 'disabled' : '';\n const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);\n\n const titleView = title ? <span className={style.title}>{`${title} `}</span> : null;\n\n const descriptionView = description ? (\n <div className={style.description}>{description}</div>\n ) : null;\n\n const getClass = () => {\n switch (theme) {\n case 'coorpmanager':\n return {\n defaultClass: style.coorpmanager,\n modifiedClass: style.coorpmanagerModified\n };\n case 'mooc':\n return {\n defaultClass: style.partielUncheck,\n modifiedClass: style.coorpmanagerModified\n };\n default:\n return {defaultClass: style.default, modifiedClass: style.modified};\n }\n };\n const {defaultClass, modifiedClass} = getClass();\n const className = getClassState(defaultClass, modifiedClass, null, modified);\n\n return (\n <div className={className} data-name={`switch-input-${theme}${dataName}`}>\n {titlePosition === 'left' ? <div id={`title-view-${dataName}`}>{titleView} </div> : null}\n <div className={requiredSelection ? style.requiredSelection : null}>\n <div className={style.btnSwitchContainer}>\n <input\n type=\"checkbox\"\n id={idSwitch}\n name={name}\n onChange={handleChange}\n checked={value}\n disabled={isDisabled}\n className={style.checkbox}\n aria-labelledby={`title-view-${dataName}`}\n />\n <label htmlFor={idSwitch} data-name=\"input-switch-label\" />\n </div>\n </div>\n <div className={!details ? style.alignedTextContainer : null}>\n {titlePosition === 'right' ? <div id={`title-view-${dataName}`}>{titleView} </div> : null}\n {details ? <div className={style.detailsTxt}>{details}</div> : null}\n </div>\n {descriptionView}\n </div>\n );\n};\n\nInputSwitch.propTypes = {\n title: PropTypes.string,\n name: PropTypes.string,\n id: PropTypes.string,\n value: PropTypes.bool,\n disabled: PropTypes.bool,\n onChange: PropTypes.func,\n description: PropTypes.string,\n modified: PropTypes.bool,\n titlePosition: PropTypes.oneOf(['right', 'left']),\n theme: PropTypes.oneOf(['default', 'coorpmanager', 'mooc']),\n details: PropTypes.string,\n 'data-name': PropTypes.string,\n requiredSelection: PropTypes.bool\n};\nexport default InputSwitch;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["React","useMemo","PropTypes","getClassState","style","InputSwitch","props","title","name","id","value","disabled","onChange","description","modified","theme","titlePosition","details","requiredSelection","dataName","idSwitch","isDisabled","handleChange","e","target","checked","titleView","descriptionView","getClass","defaultClass","coorpmanager","modifiedClass","coorpmanagerModified","partielUncheck","default","className","btnSwitchContainer","checkbox","alignedTextContainer","detailsTxt","propTypes","string","bool","func","oneOf"],"sources":["../../../src/atom/input-switch/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, uniqueId} from 'lodash/fp';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst InputSwitch = props => {\n const {\n title,\n name,\n id,\n value,\n disabled,\n onChange = noop,\n description,\n modified = false,\n theme = 'default',\n titlePosition = 'left',\n details = '',\n requiredSelection = false,\n 'data-name': dataName\n } = props;\n\n const idSwitch = id || uniqueId('input-switch-');\n const isDisabled = disabled ? 'disabled' : '';\n const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);\n\n const titleView = title ? <span className={style.title}>{`${title} `}</span> : null;\n\n const descriptionView = description ? (\n <div className={style.description}>{description}</div>\n ) : null;\n\n const getClass = () => {\n switch (theme) {\n case 'coorpmanager':\n return {\n defaultClass: style.coorpmanager,\n modifiedClass: style.coorpmanagerModified\n };\n case 'mooc':\n return {\n defaultClass: style.partielUncheck,\n modifiedClass: style.coorpmanagerModified\n };\n default:\n return {defaultClass: style.default, modifiedClass: style.modified};\n }\n };\n const {defaultClass, modifiedClass} = getClass();\n const className = getClassState(defaultClass, modifiedClass, null, modified);\n\n return (\n <div className={className} data-name={`switch-input-${theme}${dataName}`}>\n {titlePosition === 'left' ? <div id={`title-view-${dataName}`}>{titleView} </div> : null}\n <div className={requiredSelection ? style.requiredSelection : null}>\n <div className={style.btnSwitchContainer}>\n <input\n type=\"checkbox\"\n id={idSwitch}\n name={name}\n onChange={handleChange}\n checked={value}\n disabled={isDisabled}\n className={style.checkbox}\n aria-labelledby={`title-view-${dataName}`}\n />\n <label htmlFor={idSwitch} data-name=\"input-switch-label\" tabIndex={0} />\n </div>\n </div>\n <div className={!details ? style.alignedTextContainer : null}>\n {titlePosition === 'right' ? <div id={`title-view-${dataName}`}>{titleView} </div> : null}\n {details ? <div className={style.detailsTxt}>{details}</div> : null}\n </div>\n {descriptionView}\n </div>\n );\n};\n\nInputSwitch.propTypes = {\n title: PropTypes.string,\n name: PropTypes.string,\n id: PropTypes.string,\n value: PropTypes.bool,\n disabled: PropTypes.bool,\n onChange: PropTypes.func,\n description: PropTypes.string,\n modified: PropTypes.bool,\n titlePosition: PropTypes.oneOf(['right', 'left']),\n theme: PropTypes.oneOf(['default', 'coorpmanager', 'mooc']),\n details: PropTypes.string,\n 'data-name': PropTypes.string,\n requiredSelection: PropTypes.bool\n};\nexport default InputSwitch;\n"],"mappings":"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"}
@@ -1,6 +1,7 @@
1
1
  export default Link;
2
- declare class Link extends React.Component<any, any, any> {
3
- static propTypes: {
2
+ declare function Link(props: any, legacyContext: any): JSX.Element;
3
+ declare namespace Link {
4
+ const propTypes: {
4
5
  children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
5
6
  className: PropTypes.Requireable<string>;
6
7
  href: PropTypes.Requireable<string>;
@@ -15,8 +16,8 @@ declare class Link extends React.Component<any, any, any> {
15
16
  onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
16
17
  style: PropTypes.Requireable<PropTypes.InferProps<{}>>;
17
18
  };
18
- static contextTypes: {
19
- skin: PropTypes.Requireable<PropTypes.InferProps<{
19
+ namespace contextTypes {
20
+ const skin: PropTypes.Requireable<PropTypes.InferProps<{
20
21
  common: PropTypes.Requireable<{
21
22
  [x: string]: any;
22
23
  }>;
@@ -37,20 +38,11 @@ declare class Link extends React.Component<any, any, any> {
37
38
  [x: string]: any;
38
39
  }>;
39
40
  }>>;
40
- history: PropTypes.Requireable<PropTypes.InferProps<{
41
+ const history: PropTypes.Requireable<PropTypes.InferProps<{
41
42
  createHref: PropTypes.Requireable<(...args: any[]) => any>;
42
43
  push: PropTypes.Requireable<(...args: any[]) => any>;
43
44
  }>>;
44
- };
45
- constructor(props: any);
46
- state: {
47
- hovered: boolean;
48
- };
49
- handleMouseEnter: () => void;
50
- handleMouseLeave: () => void;
51
- handleOnClick: (e: any) => void;
52
- render(): JSX.Element;
45
+ }
53
46
  }
54
- import React from "react";
55
47
  import PropTypes from "prop-types";
56
48
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/link/index.js"],"names":[],"mappings":";AAMA;IACE;;;;;;;;;;;;;;MAcE;IAEF;;;;;;;;;;;;;;;;;;;;;;;;;;MAGE;IAEF,wBAKC;IAHC;;MAEC;IAGH,6BAQE;IAEF,6BAQE;IAEF,gCASE;IAEF,sBA2CC;CACF"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/link/index.js"],"names":[],"mappings":";AAMA,mEA+EC"}
@@ -7,107 +7,77 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
7
7
 
8
8
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
9
9
 
10
- import React from 'react';
10
+ import React, { useCallback, useMemo, useState } from 'react';
11
11
  import PropTypes from 'prop-types';
12
- import Provider from '../provider';
12
+ import Provider, { GetSkinFromContext } from '../provider';
13
13
  import pushToHistory from '../../util/navigation';
14
14
 
15
- class Link extends React.Component {
16
- constructor(props) {
17
- super(props);
18
-
19
- this.handleMouseEnter = () => {
20
- const {
21
- onMouseEnter = _noop
22
- } = this.props;
23
- this.setState({
24
- hovered: true
25
- });
26
- onMouseEnter();
27
- };
28
-
29
- this.handleMouseLeave = () => {
30
- const {
31
- onMouseLeave = _noop
32
- } = this.props;
33
- this.setState({
34
- hovered: false
35
- });
36
- onMouseLeave();
37
- };
38
-
39
- this.handleOnClick = e => {
40
- const {
41
- onClick = _noop,
42
- download
43
- } = this.props;
44
- onClick(e);
45
-
46
- if (!download) {
47
- const navigate = pushToHistory(this.context)(this.props);
48
- navigate(e);
49
- }
50
- };
51
-
52
- this.state = {
53
- hovered: false
54
- };
55
- }
56
-
57
- render() {
58
- const {
59
- skin,
60
- history: {
61
- createHref = _identity
62
- } = {}
63
- } = this.context;
64
-
65
- const _this$props = this.props,
66
- {
67
- skinHover,
68
- hoverColor = _getOr('#00B0FF', 'common.primary', skin),
69
- 'data-name': dataName = 'link',
70
- 'aria-label': ariaLabel
71
- } = _this$props,
72
- aProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
73
-
74
- const {
75
- href,
76
- onClick,
77
- className,
78
- style: propsStyle,
79
- children
80
- } = this.props;
81
- const {
82
- hovered
83
- } = this.state;
84
-
85
- const _style = href || onClick ? null : {
86
- pointerEvents: 'none'
87
- };
88
-
89
- const _hoverStyle = skinHover && hovered ? {
90
- color: hoverColor
91
- } : null;
92
-
93
- return /*#__PURE__*/React.createElement("a", _extends({}, aProps, {
94
- "data-name": dataName,
95
- "aria-label": ariaLabel,
96
- href: href ? createHref(href) : undefined,
97
- onClick: this.handleOnClick,
98
- onMouseEnter: this.handleMouseEnter,
99
- onMouseLeave: this.handleMouseLeave,
100
- className: className,
101
- style: _extends({}, propsStyle, _style, _hoverStyle)
102
- }), children);
103
- }
104
-
105
- }
106
-
107
- Link.contextTypes = {
108
- skin: Provider.childContextTypes.skin,
109
- history: Provider.childContextTypes.history
15
+ const Link = (props, legacyContext) => {
16
+ const skin = GetSkinFromContext(legacyContext);
17
+ const [hovered, setHovered] = useState(false);
18
+ const {
19
+ history: {
20
+ createHref = _identity
21
+ } = {}
22
+ } = legacyContext;
23
+
24
+ const {
25
+ skinHover,
26
+ hoverColor = _getOr('#00B0FF', 'common.primary', skin),
27
+ 'data-name': dataName = 'link',
28
+ 'aria-label': ariaLabel
29
+ } = props,
30
+ linKElementProps = _objectWithoutPropertiesLoose(props, _excluded);
31
+
32
+ const {
33
+ href,
34
+ onClick = _noop,
35
+ className,
36
+ style: propsStyle,
37
+ children,
38
+ onMouseLeave = _noop,
39
+ onMouseEnter = _noop,
40
+ download
41
+ } = props;
42
+ const handleMouseEnter = useCallback(() => {
43
+ setHovered(true);
44
+ onMouseEnter();
45
+ }, [onMouseEnter]);
46
+ const handleMouseLeave = useCallback(() => {
47
+ setHovered(false);
48
+ onMouseLeave();
49
+ }, [onMouseLeave]);
50
+ const navigate = useMemo(() => pushToHistory(legacyContext)({
51
+ href
52
+ }), [href, legacyContext]);
53
+ const handleOnClick = useCallback(e => {
54
+ onClick(e);
55
+
56
+ if (!download) {
57
+ navigate(e);
58
+ }
59
+ }, [download, navigate, onClick]);
60
+
61
+ const _style = href || onClick ? null : {
62
+ pointerEvents: 'none'
63
+ };
64
+
65
+ const _hoverStyle = skinHover && hovered ? {
66
+ color: hoverColor
67
+ } : null;
68
+
69
+ return /*#__PURE__*/React.createElement("a", _extends({}, linKElementProps, {
70
+ "data-name": dataName,
71
+ "aria-label": ariaLabel,
72
+ href: href ? createHref(href) : undefined,
73
+ onClick: handleOnClick,
74
+ onMouseEnter: handleMouseEnter,
75
+ onMouseLeave: handleMouseLeave,
76
+ className: className,
77
+ style: _extends({}, propsStyle, _style, _hoverStyle)
78
+ }), children);
110
79
  };
80
+
111
81
  Link.propTypes = process.env.NODE_ENV !== "production" ? {
112
82
  children: PropTypes.node,
113
83
  className: PropTypes.string,
@@ -123,5 +93,9 @@ Link.propTypes = process.env.NODE_ENV !== "production" ? {
123
93
  onMouseLeave: PropTypes.func,
124
94
  style: PropTypes.shape({})
125
95
  } : {};
96
+ Link.contextTypes = {
97
+ skin: Provider.childContextTypes.skin,
98
+ history: Provider.childContextTypes.history
99
+ };
126
100
  export default Link;
127
101
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","PropTypes","Provider","pushToHistory","Link","Component","constructor","props","handleMouseEnter","onMouseEnter","setState","hovered","handleMouseLeave","onMouseLeave","handleOnClick","e","onClick","download","navigate","context","state","render","skin","history","createHref","skinHover","hoverColor","dataName","ariaLabel","aProps","href","className","style","propsStyle","children","_style","pointerEvents","_hoverStyle","color","undefined","contextTypes","childContextTypes","propTypes","node","string","target","oneOf","bool","func","shape"],"sources":["../../../src/atom/link/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {identity, getOr, noop} from 'lodash/fp';\nimport Provider from '../provider';\nimport pushToHistory from '../../util/navigation';\n\nclass Link extends React.Component {\n static propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n href: PropTypes.string,\n 'data-name': PropTypes.string,\n 'aria-label': PropTypes.string,\n target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),\n skinHover: PropTypes.bool,\n hoverColor: PropTypes.string,\n download: PropTypes.bool,\n onClick: PropTypes.func,\n onMouseEnter: PropTypes.func,\n onMouseLeave: PropTypes.func,\n style: PropTypes.shape({})\n };\n\n static contextTypes = {\n skin: Provider.childContextTypes.skin,\n history: Provider.childContextTypes.history\n };\n\n constructor(props) {\n super(props);\n this.state = {\n hovered: false\n };\n }\n\n handleMouseEnter = () => {\n const {onMouseEnter = noop} = this.props;\n\n this.setState({\n hovered: true\n });\n\n onMouseEnter();\n };\n\n handleMouseLeave = () => {\n const {onMouseLeave = noop} = this.props;\n\n this.setState({\n hovered: false\n });\n\n onMouseLeave();\n };\n\n handleOnClick = e => {\n const {onClick = noop, download} = this.props;\n\n onClick(e);\n\n if (!download) {\n const navigate = pushToHistory(this.context)(this.props);\n navigate(e);\n }\n };\n\n render() {\n const {skin, history: {createHref = identity} = {}} = this.context;\n const {\n skinHover,\n hoverColor = getOr('#00B0FF', 'common.primary', skin),\n 'data-name': dataName = 'link',\n 'aria-label': ariaLabel,\n ...aProps\n } = this.props;\n const {href, onClick, className, style: propsStyle, children} = this.props;\n const {hovered} = this.state;\n const _style =\n href || onClick\n ? null\n : {\n pointerEvents: 'none'\n };\n const _hoverStyle =\n skinHover && hovered\n ? {\n color: hoverColor\n }\n : null;\n\n return (\n <a\n {...aProps}\n data-name={dataName}\n aria-label={ariaLabel}\n href={href ? createHref(href) : undefined}\n onClick={this.handleOnClick}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n className={className}\n style={{\n ...propsStyle,\n ..._style,\n ..._hoverStyle\n }}\n >\n {children}\n </a>\n );\n }\n}\n\nexport default Link;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["React","useCallback","useMemo","useState","PropTypes","Provider","GetSkinFromContext","pushToHistory","Link","props","legacyContext","skin","hovered","setHovered","history","createHref","skinHover","hoverColor","dataName","ariaLabel","linKElementProps","href","onClick","className","style","propsStyle","children","onMouseLeave","onMouseEnter","download","handleMouseEnter","handleMouseLeave","navigate","handleOnClick","e","_style","pointerEvents","_hoverStyle","color","undefined","propTypes","node","string","target","oneOf","bool","func","shape","contextTypes","childContextTypes"],"sources":["../../../src/atom/link/index.js"],"sourcesContent":["import React, {useCallback, useMemo, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {identity, getOr, noop} from 'lodash/fp';\nimport Provider, {GetSkinFromContext} from '../provider';\nimport pushToHistory from '../../util/navigation';\n\nconst Link = (props, legacyContext) => {\n const skin = GetSkinFromContext(legacyContext);\n const [hovered, setHovered] = useState(false);\n const {history: {createHref = identity} = {}} = legacyContext;\n const {\n skinHover,\n hoverColor = getOr('#00B0FF', 'common.primary', skin),\n 'data-name': dataName = 'link',\n 'aria-label': ariaLabel,\n ...linKElementProps\n } = props;\n const {\n href,\n onClick = noop,\n className,\n style: propsStyle,\n children,\n onMouseLeave = noop,\n onMouseEnter = noop,\n download\n } = props;\n\n const handleMouseEnter = useCallback(() => {\n setHovered(true);\n\n onMouseEnter();\n }, [onMouseEnter]);\n\n const handleMouseLeave = useCallback(() => {\n setHovered(false);\n\n onMouseLeave();\n }, [onMouseLeave]);\n\n const navigate = useMemo(() => pushToHistory(legacyContext)({href}), [href, legacyContext]);\n\n const handleOnClick = useCallback(\n e => {\n onClick(e);\n\n if (!download) {\n navigate(e);\n }\n },\n [download, navigate, onClick]\n );\n\n const _style =\n href || onClick\n ? null\n : {\n pointerEvents: 'none'\n };\n const _hoverStyle =\n skinHover && hovered\n ? {\n color: hoverColor\n }\n : null;\n\n return (\n <a\n {...linKElementProps}\n data-name={dataName}\n aria-label={ariaLabel}\n href={href ? createHref(href) : undefined}\n onClick={handleOnClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n className={className}\n style={{\n ...propsStyle,\n ..._style,\n ..._hoverStyle\n }}\n >\n {children}\n </a>\n );\n};\n\nLink.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n href: PropTypes.string,\n 'data-name': PropTypes.string,\n 'aria-label': PropTypes.string,\n target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),\n skinHover: PropTypes.bool,\n hoverColor: PropTypes.string,\n download: PropTypes.bool,\n onClick: PropTypes.func,\n onMouseEnter: PropTypes.func,\n onMouseLeave: PropTypes.func,\n style: PropTypes.shape({})\n};\n\nLink.contextTypes = {\n skin: Provider.childContextTypes.skin,\n history: Provider.childContextTypes.history\n};\n\nexport default Link;\n"],"mappings":"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"}
@@ -1,12 +1,15 @@
1
1
  export function toggleStateOnKeyPress(state: any, setState: any, ref: any): (event: any) => void;
2
2
  export default ToolTip;
3
- declare function ToolTip({ anchorId, TooltipContent, "aria-label": ariaLabel, "data-testid": dataTestId, closeToolTipInformationTextAriaLabel, toolTipIsVisible: _toolTipIsVisible }: {
3
+ declare function ToolTip({ anchorId, TooltipContent, "aria-label": ariaLabel, "data-testid": dataTestId, closeToolTipInformationTextAriaLabel, toolTipIsVisible: _toolTipIsVisible, iconContainerClassName, delayHide, fontSize }: {
4
4
  anchorId: any;
5
5
  TooltipContent: any;
6
6
  "aria-label": any;
7
7
  "data-testid": any;
8
8
  closeToolTipInformationTextAriaLabel: any;
9
9
  toolTipIsVisible: any;
10
+ iconContainerClassName: any;
11
+ delayHide?: number | undefined;
12
+ fontSize?: number | undefined;
10
13
  }): JSX.Element;
11
14
  declare namespace ToolTip {
12
15
  const propTypes: {
@@ -14,6 +17,9 @@ declare namespace ToolTip {
14
17
  'data-testid': PropTypes.Requireable<string>;
15
18
  'aria-label': PropTypes.Requireable<string>;
16
19
  closeToolTipInformationTextAriaLabel: PropTypes.Validator<string>;
20
+ iconContainerClassName: PropTypes.Requireable<string>;
21
+ delayHide: PropTypes.Requireable<number>;
22
+ fontSize: PropTypes.Requireable<number>;
17
23
  anchorId: PropTypes.Requireable<string>;
18
24
  toolTipIsVisible: PropTypes.Requireable<boolean>;
19
25
  };
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/tooltip/index.js"],"names":[],"mappings":"AA+CO,iGASN;;AAED;;;;;;;gBA2EC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/tooltip/index.js"],"names":[],"mappings":"AAwDO,iGASN;;AAED;;;;;;;;;;gBAwFC"}
@@ -1,15 +1,21 @@
1
1
  import React, { isValidElement, useState, useCallback, useMemo } from 'react';
2
+ import classnames from 'classnames';
2
3
  import PropTypes from 'prop-types';
3
4
  import ReactTooltip from 'react-tooltip';
4
5
  import isString from 'lodash/fp/isString';
5
6
  import { NovaCompositionCoorpacademyInformationIcon as InformationIcon } from '@coorpacademy/nova-icons';
6
7
  import style from './style.css';
8
+ const FontSizes = {
9
+ 12: style.tooltipContentFontSize12,
10
+ 14: style.tooltipContentFontSize14
11
+ };
7
12
 
8
13
  const ToolTipWrapper = ({
9
14
  toolTipIsVisible,
10
15
  anchorId,
11
16
  closeToolTipInformationTextAriaLabel,
12
- content
17
+ content,
18
+ handleContentMouseOver
13
19
  }) => {
14
20
  if (!toolTipIsVisible) return null;
15
21
 
@@ -26,7 +32,8 @@ const ToolTipWrapper = ({
26
32
  return /*#__PURE__*/React.createElement("div", {
27
33
  className: style.toolTip,
28
34
  "data-testid": "tooltip",
29
- "aria-label": closeToolTipInformationTextAriaLabel
35
+ "aria-label": closeToolTipInformationTextAriaLabel,
36
+ onMouseOver: handleContentMouseOver
30
37
  }, content);
31
38
  }
32
39
  };
@@ -35,7 +42,8 @@ ToolTipWrapper.propTypes = process.env.NODE_ENV !== "production" ? {
35
42
  toolTipIsVisible: PropTypes.bool,
36
43
  anchorId: PropTypes.string,
37
44
  closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,
38
- content: PropTypes.node
45
+ content: PropTypes.node,
46
+ handleContentMouseOver: PropTypes.func
39
47
  } : {};
40
48
  export const toggleStateOnKeyPress = (state, setState, ref) => event => {
41
49
  if (event.key === 'Enter') {
@@ -54,38 +62,49 @@ const ToolTip = ({
54
62
  'aria-label': ariaLabel,
55
63
  'data-testid': dataTestId,
56
64
  closeToolTipInformationTextAriaLabel,
57
- toolTipIsVisible: _toolTipIsVisible
65
+ toolTipIsVisible: _toolTipIsVisible,
66
+ iconContainerClassName,
67
+ delayHide = 250,
68
+ fontSize = 14
58
69
  }) => {
59
70
  const isComponent = useMemo(() => !isString(TooltipContent) && /*#__PURE__*/isValidElement(TooltipContent()), [TooltipContent]);
60
71
  const [toolTipIsVisible, setToolTipIsVisible] = useState(false);
72
+ const [mouseLeaveTimer, setMouseLeaveTimer] = useState(undefined);
61
73
  const handleKeyPress = useCallback(event => {
62
74
  toggleStateOnKeyPress(toolTipIsVisible, setToolTipIsVisible)(event);
63
75
  }, [toolTipIsVisible]);
76
+ const handleContentMouseOver = useCallback(() => {
77
+ mouseLeaveTimer &&
78
+ /* istanbul ignore next */
79
+ clearTimeout(mouseLeaveTimer);
80
+ }, [mouseLeaveTimer]);
64
81
  const handleMouseOver = useCallback(() => {
82
+ mouseLeaveTimer && clearTimeout(mouseLeaveTimer);
65
83
  setToolTipIsVisible(true);
66
- }, []);
84
+ }, [mouseLeaveTimer]);
67
85
  const handleMouseLeave = useCallback(() => {
68
- setToolTipIsVisible(false);
69
- }, []);
86
+ setMouseLeaveTimer(setTimeout(() => setToolTipIsVisible(false), delayHide));
87
+ }, [delayHide]);
70
88
  const content = useMemo(() => {
71
89
  return isComponent ? /*#__PURE__*/React.createElement(TooltipContent, null) : /*#__PURE__*/React.createElement("p", {
72
- className: style.tooltipContent
90
+ className: classnames([style.tooltipContent, FontSizes[fontSize]])
73
91
  }, TooltipContent);
74
- }, [TooltipContent, isComponent]);
92
+ }, [TooltipContent, fontSize, isComponent]);
75
93
  return anchorId ? /*#__PURE__*/React.createElement(ToolTipWrapper, {
76
94
  toolTipIsVisible: _toolTipIsVisible,
77
95
  anchorId: anchorId,
78
96
  closeToolTipInformationTextAriaLabel: closeToolTipInformationTextAriaLabel,
79
97
  content: content,
80
98
  onMouseLeave: handleMouseLeave,
81
- onMouseOver: handleMouseOver
99
+ onMouseOver: handleMouseOver,
100
+ fontSize: fontSize
82
101
  }) : /*#__PURE__*/React.createElement("div", {
83
102
  className: style.tooltipContainer,
84
103
  onMouseLeave: handleMouseLeave,
85
104
  onMouseOver: handleMouseOver
86
105
  }, /*#__PURE__*/React.createElement("button", {
87
106
  type: "button",
88
- className: style.tooltipIconContainer,
107
+ className: classnames([style.tooltipIconContainer, iconContainerClassName]),
89
108
  "data-testid": dataTestId,
90
109
  onKeyDown: handleKeyPress,
91
110
  tabIndex: 0
@@ -98,7 +117,9 @@ const ToolTip = ({
98
117
  toolTipIsVisible: toolTipIsVisible,
99
118
  anchorId: anchorId,
100
119
  closeToolTipInformationTextAriaLabel: closeToolTipInformationTextAriaLabel,
101
- content: content
120
+ content: content,
121
+ handleContentMouseOver: handleContentMouseOver,
122
+ fontSize: fontSize
102
123
  }));
103
124
  };
104
125
 
@@ -107,8 +128,12 @@ ToolTip.propTypes = process.env.NODE_ENV !== "production" ? {
107
128
  'data-testid': PropTypes.string,
108
129
  'aria-label': PropTypes.string,
109
130
  closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,
110
- // ---------- externalHandling --------------
111
- // if passed down, React Tooltip is used instead, due to limitations on
131
+ // ---------- Regular Tooltip exclusive --------------
132
+ iconContainerClassName: PropTypes.string,
133
+ delayHide: PropTypes.number,
134
+ fontSize: PropTypes.oneOf([12, 14]),
135
+ // ---------- React Tooltip exclusive --------------
136
+ // externalHandling: if passed down, React Tooltip is used instead, due to limitations on
112
137
  // parents overflow hidden controls
113
138
  anchorId: PropTypes.string,
114
139
  toolTipIsVisible: PropTypes.bool
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","isValidElement","useState","useCallback","useMemo","PropTypes","ReactTooltip","isString","NovaCompositionCoorpacademyInformationIcon","InformationIcon","style","ToolTipWrapper","toolTipIsVisible","anchorId","closeToolTipInformationTextAriaLabel","content","toolTipReact","toolTip","propTypes","bool","string","isRequired","node","toggleStateOnKeyPress","state","setState","ref","event","key","current","focus","stopPropagation","preventDefault","ToolTip","TooltipContent","ariaLabel","dataTestId","_toolTipIsVisible","isComponent","setToolTipIsVisible","handleKeyPress","handleMouseOver","handleMouseLeave","tooltipContent","tooltipContainer","tooltipIconContainer","informationIcon","oneOfType","func"],"sources":["../../../src/atom/tooltip/index.js"],"sourcesContent":["import React, {isValidElement, useState, useCallback, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport ReactTooltip from 'react-tooltip';\nimport isString from 'lodash/fp/isString';\nimport {NovaCompositionCoorpacademyInformationIcon as InformationIcon} from '@coorpacademy/nova-icons';\nimport style from './style.css';\n\nconst ToolTipWrapper = ({\n toolTipIsVisible,\n anchorId,\n closeToolTipInformationTextAriaLabel,\n content\n}) => {\n if (!toolTipIsVisible) return null;\n if (anchorId) {\n return (\n <ReactTooltip\n id={anchorId}\n className={style.toolTipReact}\n data-event-off=\"click\"\n place=\"left\"\n effect=\"solid\"\n aria-label={closeToolTipInformationTextAriaLabel}\n >\n {content}\n </ReactTooltip>\n );\n } else {\n return (\n <div\n className={style.toolTip}\n data-testid=\"tooltip\"\n aria-label={closeToolTipInformationTextAriaLabel}\n >\n {content}\n </div>\n );\n }\n};\n\nToolTipWrapper.propTypes = {\n toolTipIsVisible: PropTypes.bool,\n anchorId: PropTypes.string,\n closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,\n content: PropTypes.node\n};\n\nexport const toggleStateOnKeyPress = (state, setState, ref) => event => {\n if (event.key === 'Enter') {\n if (ref) ref.current.focus();\n event.stopPropagation();\n event.preventDefault();\n setState(!state);\n } else if (event.key === 'Tab' || event.key === 'Escape') {\n setState(false);\n }\n};\n\nconst ToolTip = ({\n anchorId,\n TooltipContent,\n 'aria-label': ariaLabel,\n 'data-testid': dataTestId,\n closeToolTipInformationTextAriaLabel,\n toolTipIsVisible: _toolTipIsVisible\n}) => {\n const isComponent = useMemo(\n () => !isString(TooltipContent) && isValidElement(TooltipContent()),\n [TooltipContent]\n );\n\n const [toolTipIsVisible, setToolTipIsVisible] = useState(false);\n\n const handleKeyPress = useCallback(\n event => {\n toggleStateOnKeyPress(toolTipIsVisible, setToolTipIsVisible)(event);\n },\n [toolTipIsVisible]\n );\n\n const handleMouseOver = useCallback(() => {\n setToolTipIsVisible(true);\n }, []);\n\n const handleMouseLeave = useCallback(() => {\n setToolTipIsVisible(false);\n }, []);\n\n const content = useMemo(() => {\n return isComponent ? (\n <TooltipContent />\n ) : (\n <p className={style.tooltipContent}>{TooltipContent}</p>\n );\n }, [TooltipContent, isComponent]);\n\n return anchorId ? (\n <ToolTipWrapper\n toolTipIsVisible={_toolTipIsVisible}\n anchorId={anchorId}\n closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n content={content}\n onMouseLeave={handleMouseLeave}\n onMouseOver={handleMouseOver}\n />\n ) : (\n <div\n className={style.tooltipContainer}\n onMouseLeave={handleMouseLeave}\n onMouseOver={handleMouseOver}\n >\n <button\n type=\"button\"\n className={style.tooltipIconContainer}\n data-testid={dataTestId}\n onKeyDown={handleKeyPress}\n tabIndex={0}\n >\n <InformationIcon\n className={style.informationIcon}\n width={12}\n height={12}\n aria-label={ariaLabel}\n />\n </button>\n <ToolTipWrapper\n toolTipIsVisible={toolTipIsVisible}\n anchorId={anchorId}\n closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n content={content}\n />\n </div>\n );\n};\n\nToolTip.propTypes = {\n TooltipContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node, PropTypes.string]),\n 'data-testid': PropTypes.string,\n 'aria-label': PropTypes.string,\n closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,\n // ---------- externalHandling --------------\n // if passed down, React Tooltip is used instead, due to limitations on\n // parents overflow hidden controls\n anchorId: PropTypes.string,\n toolTipIsVisible: PropTypes.bool\n};\n\nexport default ToolTip;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["React","isValidElement","useState","useCallback","useMemo","classnames","PropTypes","ReactTooltip","isString","NovaCompositionCoorpacademyInformationIcon","InformationIcon","style","FontSizes","tooltipContentFontSize12","tooltipContentFontSize14","ToolTipWrapper","toolTipIsVisible","anchorId","closeToolTipInformationTextAriaLabel","content","handleContentMouseOver","toolTipReact","toolTip","propTypes","bool","string","isRequired","node","func","toggleStateOnKeyPress","state","setState","ref","event","key","current","focus","stopPropagation","preventDefault","ToolTip","TooltipContent","ariaLabel","dataTestId","_toolTipIsVisible","iconContainerClassName","delayHide","fontSize","isComponent","setToolTipIsVisible","mouseLeaveTimer","setMouseLeaveTimer","undefined","handleKeyPress","clearTimeout","handleMouseOver","handleMouseLeave","setTimeout","tooltipContent","tooltipContainer","tooltipIconContainer","informationIcon","oneOfType","number","oneOf"],"sources":["../../../src/atom/tooltip/index.js"],"sourcesContent":["import React, {isValidElement, useState, useCallback, useMemo} from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport ReactTooltip from 'react-tooltip';\nimport isString from 'lodash/fp/isString';\nimport {NovaCompositionCoorpacademyInformationIcon as InformationIcon} from '@coorpacademy/nova-icons';\nimport style from './style.css';\n\nconst FontSizes = {\n 12: style.tooltipContentFontSize12,\n 14: style.tooltipContentFontSize14\n};\n\nconst ToolTipWrapper = ({\n toolTipIsVisible,\n anchorId,\n closeToolTipInformationTextAriaLabel,\n content,\n handleContentMouseOver\n}) => {\n if (!toolTipIsVisible) return null;\n if (anchorId) {\n return (\n <ReactTooltip\n id={anchorId}\n className={style.toolTipReact}\n data-event-off=\"click\"\n place=\"left\"\n effect=\"solid\"\n aria-label={closeToolTipInformationTextAriaLabel}\n >\n {content}\n </ReactTooltip>\n );\n } else {\n return (\n <div\n className={style.toolTip}\n data-testid=\"tooltip\"\n aria-label={closeToolTipInformationTextAriaLabel}\n onMouseOver={handleContentMouseOver}\n >\n {content}\n </div>\n );\n }\n};\n\nToolTipWrapper.propTypes = {\n toolTipIsVisible: PropTypes.bool,\n anchorId: PropTypes.string,\n closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,\n content: PropTypes.node,\n handleContentMouseOver: PropTypes.func\n};\n\nexport const toggleStateOnKeyPress = (state, setState, ref) => event => {\n if (event.key === 'Enter') {\n if (ref) ref.current.focus();\n event.stopPropagation();\n event.preventDefault();\n setState(!state);\n } else if (event.key === 'Tab' || event.key === 'Escape') {\n setState(false);\n }\n};\n\nconst ToolTip = ({\n anchorId,\n TooltipContent,\n 'aria-label': ariaLabel,\n 'data-testid': dataTestId,\n closeToolTipInformationTextAriaLabel,\n toolTipIsVisible: _toolTipIsVisible,\n iconContainerClassName,\n delayHide = 250,\n fontSize = 14\n}) => {\n const isComponent = useMemo(\n () => !isString(TooltipContent) && isValidElement(TooltipContent()),\n [TooltipContent]\n );\n\n const [toolTipIsVisible, setToolTipIsVisible] = useState(false);\n\n const [mouseLeaveTimer, setMouseLeaveTimer] = useState(undefined);\n\n const handleKeyPress = useCallback(\n event => {\n toggleStateOnKeyPress(toolTipIsVisible, setToolTipIsVisible)(event);\n },\n [toolTipIsVisible]\n );\n\n const handleContentMouseOver = useCallback(() => {\n mouseLeaveTimer && /* istanbul ignore next */ clearTimeout(mouseLeaveTimer);\n }, [mouseLeaveTimer]);\n\n const handleMouseOver = useCallback(() => {\n mouseLeaveTimer && clearTimeout(mouseLeaveTimer);\n setToolTipIsVisible(true);\n }, [mouseLeaveTimer]);\n\n const handleMouseLeave = useCallback(() => {\n setMouseLeaveTimer(setTimeout(() => setToolTipIsVisible(false), delayHide));\n }, [delayHide]);\n\n const content = useMemo(() => {\n return isComponent ? (\n <TooltipContent />\n ) : (\n <p className={classnames([style.tooltipContent, FontSizes[fontSize]])}>{TooltipContent}</p>\n );\n }, [TooltipContent, fontSize, isComponent]);\n\n return anchorId ? (\n <ToolTipWrapper\n toolTipIsVisible={_toolTipIsVisible}\n anchorId={anchorId}\n closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n content={content}\n onMouseLeave={handleMouseLeave}\n onMouseOver={handleMouseOver}\n fontSize={fontSize}\n />\n ) : (\n <div\n className={style.tooltipContainer}\n onMouseLeave={handleMouseLeave}\n onMouseOver={handleMouseOver}\n >\n <button\n type=\"button\"\n className={classnames([style.tooltipIconContainer, iconContainerClassName])}\n data-testid={dataTestId}\n onKeyDown={handleKeyPress}\n tabIndex={0}\n >\n <InformationIcon\n className={style.informationIcon}\n width={12}\n height={12}\n aria-label={ariaLabel}\n />\n </button>\n <ToolTipWrapper\n toolTipIsVisible={toolTipIsVisible}\n anchorId={anchorId}\n closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n content={content}\n handleContentMouseOver={handleContentMouseOver}\n fontSize={fontSize}\n />\n </div>\n );\n};\n\nToolTip.propTypes = {\n TooltipContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node, PropTypes.string]),\n 'data-testid': PropTypes.string,\n 'aria-label': PropTypes.string,\n closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,\n // ---------- Regular Tooltip exclusive --------------\n iconContainerClassName: PropTypes.string,\n delayHide: PropTypes.number,\n fontSize: PropTypes.oneOf([12, 14]),\n // ---------- React Tooltip exclusive --------------\n // externalHandling: if passed down, React Tooltip is used instead, due to limitations on\n // parents overflow hidden controls\n anchorId: PropTypes.string,\n toolTipIsVisible: PropTypes.bool\n};\n\nexport default ToolTip;\n"],"mappings":"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"}
@@ -67,6 +67,15 @@
67
67
  text-align: center;
68
68
  }
69
69
 
70
+ .tooltipContentFontSize14 {
71
+ font-size: 14px;
72
+ }
73
+
74
+ .tooltipContentFontSize12 {
75
+ font-size: 12px;
76
+ }
77
+
78
+
70
79
  .informationIcon {
71
80
  color: cm_grey_500;
72
81
  }
@@ -502,7 +502,7 @@
502
502
  }
503
503
 
504
504
  .homeIcon {
505
- width: 16px;
505
+ min-width: 14px;
506
506
  height: 14px;
507
507
  margin-left: 16px;
508
508
  }
@@ -538,6 +538,7 @@
538
538
  visibility: inherit;
539
539
  opacity: inherit;
540
540
  height: 15px;
541
+ width: 15px;
541
542
  transform: rotate(-45deg);
542
543
  background-color: white;
543
544
  position: inherit;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/user-preferences/index.js"],"names":[],"mappings":";AAoCA,0DAeC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/user-preferences/index.js"],"names":[],"mappings":";AAwCA,0DAeC"}