@bigbinary/neeto-molecules 3.16.21 → 3.16.23

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.
@@ -54,6 +54,9 @@ var HelpPopover = function HelpPopover(_ref) {
54
54
  }, popoverProps), {}, {
55
55
  children: /*#__PURE__*/jsxs("div", {
56
56
  className: "flex flex-col",
57
+ onClick: function onClick(event) {
58
+ return event.stopPropagation();
59
+ },
57
60
  children: [title && /*#__PURE__*/jsx(Popover.Title, {
58
61
  "data-cy": "help-popover-title",
59
62
  "data-testid": "help-popover-title",
@@ -1 +1 @@
1
- {"version":3,"file":"HelpPopover.js","sources":["../src/components/HelpPopover/constants.js","../src/components/HelpPopover/index.jsx"],"sourcesContent":["export const SIZE = { default: 16, large: 20 };\n","import { useRef } from \"react\";\n\nimport classNames from \"classnames\";\nimport { Help } from \"neetoicons\";\nimport { Button, Popover, Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { SIZE } from \"./constants\";\n\nconst HelpPopover = ({\n title,\n size = \"default\",\n description,\n helpLinkProps,\n popoverProps,\n className,\n iconColor = \"currentColor\",\n icon: IconComponent = Help,\n ...otherProps\n}) => {\n const { t } = useTranslation();\n\n const popoverRef = useRef();\n\n return (\n <>\n <Button\n {...otherProps}\n data-cy=\"help-popover-button\"\n data-testid=\"help-popover-button\"\n icon={() => <IconComponent color={iconColor} size={SIZE[size]} />}\n ref={popoverRef}\n style=\"text\"\n className={classNames(\n \"neeto-molecule-help-popover-trigger neeto-ui-rounded-full bg-transparent p-0\",\n className\n )}\n />\n <Popover\n appendTo={() => document.body}\n reference={popoverRef}\n {...popoverProps}\n >\n <div className=\"flex flex-col\">\n {title && (\n <Popover.Title\n data-cy=\"help-popover-title\"\n data-testid=\"help-popover-title\"\n >\n {title}\n </Popover.Title>\n )}\n {typeof description === \"string\" ? (\n <Typography\n data-cy=\"help-popover-description\"\n data-testid=\"help-popover-description\"\n lineHeight=\"normal\"\n style=\"body2\"\n >\n {description}\n </Typography>\n ) : (\n description\n )}\n {helpLinkProps && (\n <Button\n className=\"neeto-ui-mt-3\"\n data-cy=\"help-popover-link-button\"\n label={t(\"neetoMolecules.common.viewHelpArticle\")}\n size=\"small\"\n {...helpLinkProps}\n data-testid=\"help-popover-link-button\"\n style=\"link\"\n target=\"_blank\"\n />\n )}\n </div>\n </Popover>\n </>\n );\n};\n\nHelpPopover.propTypes = {\n /**\n * To set the title of the help popover.\n */\n title: PropTypes.string,\n /**\n * To set the size of the popover help icon.\n */\n size: PropTypes.oneOf([\"default\", \"large\"]),\n /**\n * To set the description of the popover, this can be a string or a custom component.\n */\n description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n /**\n * To set the props of the help link which is displayed below the description.\n */\n helpLinkProps: PropTypes.object,\n /**\n * To set the props of the popover to customize it further.\n */\n popoverProps: PropTypes.object,\n /**\n * Additional classes passed on to the help button element.\n */\n className: PropTypes.string,\n /**\n * To set the default icon color of the help icon.\n */\n iconColor: PropTypes.string,\n /**\n * To customize the icon of the help popover.\n */\n icon: PropTypes.node,\n};\n\nexport default HelpPopover;\n"],"names":["SIZE","large","HelpPopover","_ref","title","_ref$size","size","description","helpLinkProps","popoverProps","className","_ref$iconColor","iconColor","_ref$icon","icon","IconComponent","Help","otherProps","_objectWithoutProperties","_excluded","_useTranslation","useTranslation","t","popoverRef","useRef","_jsxs","_Fragment","children","_jsx","Button","_objectSpread","color","ref","style","classNames","Popover","appendTo","document","body","reference","Title","Typography","lineHeight","label","target"],"mappings":"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"}
1
+ {"version":3,"file":"HelpPopover.js","sources":["../src/components/HelpPopover/constants.js","../src/components/HelpPopover/index.jsx"],"sourcesContent":["export const SIZE = { default: 16, large: 20 };\n","import { useRef } from \"react\";\n\nimport classNames from \"classnames\";\nimport { Help } from \"neetoicons\";\nimport { Button, Popover, Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { SIZE } from \"./constants\";\n\nconst HelpPopover = ({\n title,\n size = \"default\",\n description,\n helpLinkProps,\n popoverProps,\n className,\n iconColor = \"currentColor\",\n icon: IconComponent = Help,\n ...otherProps\n}) => {\n const { t } = useTranslation();\n\n const popoverRef = useRef();\n\n return (\n <>\n <Button\n {...otherProps}\n data-cy=\"help-popover-button\"\n data-testid=\"help-popover-button\"\n icon={() => <IconComponent color={iconColor} size={SIZE[size]} />}\n ref={popoverRef}\n style=\"text\"\n className={classNames(\n \"neeto-molecule-help-popover-trigger neeto-ui-rounded-full bg-transparent p-0\",\n className\n )}\n />\n <Popover\n appendTo={() => document.body}\n reference={popoverRef}\n {...popoverProps}\n >\n <div\n className=\"flex flex-col\"\n onClick={event => event.stopPropagation()}\n >\n {title && (\n <Popover.Title\n data-cy=\"help-popover-title\"\n data-testid=\"help-popover-title\"\n >\n {title}\n </Popover.Title>\n )}\n {typeof description === \"string\" ? (\n <Typography\n data-cy=\"help-popover-description\"\n data-testid=\"help-popover-description\"\n lineHeight=\"normal\"\n style=\"body2\"\n >\n {description}\n </Typography>\n ) : (\n description\n )}\n {helpLinkProps && (\n <Button\n className=\"neeto-ui-mt-3\"\n data-cy=\"help-popover-link-button\"\n label={t(\"neetoMolecules.common.viewHelpArticle\")}\n size=\"small\"\n {...helpLinkProps}\n data-testid=\"help-popover-link-button\"\n style=\"link\"\n target=\"_blank\"\n />\n )}\n </div>\n </Popover>\n </>\n );\n};\n\nHelpPopover.propTypes = {\n /**\n * To set the title of the help popover.\n */\n title: PropTypes.string,\n /**\n * To set the size of the popover help icon.\n */\n size: PropTypes.oneOf([\"default\", \"large\"]),\n /**\n * To set the description of the popover, this can be a string or a custom component.\n */\n description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n /**\n * To set the props of the help link which is displayed below the description.\n */\n helpLinkProps: PropTypes.object,\n /**\n * To set the props of the popover to customize it further.\n */\n popoverProps: PropTypes.object,\n /**\n * Additional classes passed on to the help button element.\n */\n className: PropTypes.string,\n /**\n * To set the default icon color of the help icon.\n */\n iconColor: PropTypes.string,\n /**\n * To customize the icon of the help popover.\n */\n icon: PropTypes.node,\n};\n\nexport default HelpPopover;\n"],"names":["SIZE","large","HelpPopover","_ref","title","_ref$size","size","description","helpLinkProps","popoverProps","className","_ref$iconColor","iconColor","_ref$icon","icon","IconComponent","Help","otherProps","_objectWithoutProperties","_excluded","_useTranslation","useTranslation","t","popoverRef","useRef","_jsxs","_Fragment","children","_jsx","Button","_objectSpread","color","ref","style","classNames","Popover","appendTo","document","body","reference","onClick","event","stopPropagation","Title","Typography","lineHeight","label","target"],"mappings":"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"}
@@ -7,6 +7,7 @@ import { t } from 'i18next';
7
7
  import Computer from '@bigbinary/neeto-icons/Computer';
8
8
  import Tablet from '@bigbinary/neeto-icons/Tablet';
9
9
  import Mobile from '@bigbinary/neeto-icons/Mobile';
10
+ import { n } from './inject-css-DmrvuTKK.js';
10
11
  import { createElement } from 'react';
11
12
  import { jsx } from 'react/jsx-runtime';
12
13
 
@@ -26,6 +27,9 @@ var RESPONSIVE_DEVICES_MAP = _defineProperty(_defineProperty(_defineProperty({},
26
27
  label: t("neetoMolecules.responsiveDevicePicker.mobile")
27
28
  });
28
29
 
30
+ var css = ".neeto-molecules-device-switcher{border-radius:var(--neeto-ui-rounded-md);display:flex}.neeto-molecules-device-switcher .neeto-ui-btn{margin-left:-.0625rem}.neeto-molecules-device-switcher .neeto-ui-btn.neeto-molecules-device-switcher__btn--active{--neeto-ui-btn-color:rgb(var(--neeto-ui-primary-500));--neeto-ui-btn-bg-color:rgb(var(--neeto-ui-primary-100));--neeto-ui-btn-hover-color:rgb(var(--neeto-ui-primary-500));--neeto-ui-btn-hover-bg-color:rgb(var(--neeto-ui-primary-100));--neeto-ui-btn-focus-color:rgb(var(--neeto-ui-primary-600));z-index:1}.neeto-molecules-device-switcher .neeto-ui-btn:first-child{border-bottom-right-radius:0;border-left:0;border-top-right-radius:0;margin-left:0}.neeto-molecules-device-switcher .neeto-ui-btn:last-child{border-bottom-left-radius:0;border-top-left-radius:0}.neeto-molecules-device-switcher .neeto-ui-btn:not(:first-child):not(:last-child){border-radius:0}";
31
+ n(css,{});
32
+
29
33
  var _excluded = ["className", "selectedDevice", "onDeviceChange"];
30
34
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
31
35
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -36,7 +40,7 @@ var ResponsiveDevicePicker = function ResponsiveDevicePicker(_ref) {
36
40
  onDeviceChange = _ref.onDeviceChange,
37
41
  otherProps = _objectWithoutProperties(_ref, _excluded);
38
42
  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
39
- className: classnames("flex items-center justify-center gap-2", className)
43
+ className: classnames("neeto-molecules-device-switcher flex items-center justify-center", className)
40
44
  }, otherProps), {}, {
41
45
  children: Object.entries(RESPONSIVE_DEVICES_MAP).map(function (_ref2) {
42
46
  var _ref3 = _slicedToArray(_ref2, 2),
@@ -49,8 +53,11 @@ var ResponsiveDevicePicker = function ResponsiveDevicePicker(_ref) {
49
53
  "data-testid": "".concat(label.toLowerCase(), "-device-button"),
50
54
  key: key,
51
55
  size: "small",
52
- style: key === selectedDevice ? "primary" : "secondary",
56
+ style: "tertiary",
53
57
  title: label,
58
+ className: classnames("neeto-molecules-device-switcher__btn", {
59
+ "neeto-molecules-device-switcher__btn--active": key === selectedDevice
60
+ }),
54
61
  onClick: function onClick() {
55
62
  return onDeviceChange(key);
56
63
  }
@@ -1 +1 @@
1
- {"version":3,"file":"ResponsiveDevicePicker.js","sources":["../src/components/ResponsiveDevicePicker/constants.js","../src/components/ResponsiveDevicePicker/index.jsx"],"sourcesContent":["import { t } from \"i18next\";\nimport { Computer, Tablet, Mobile } from \"neetoicons\";\n\nexport const RESPONSIVE_DEVICES = {\n DESKTOP: \"desktop\",\n TABLET: \"tablet\",\n MOBILE: \"mobile\",\n};\n\nexport const RESPONSIVE_DEVICES_MAP = {\n [RESPONSIVE_DEVICES.DESKTOP]: {\n icon: Computer,\n label: t(\"neetoMolecules.responsiveDevicePicker.desktop\"),\n },\n [RESPONSIVE_DEVICES.TABLET]: {\n icon: Tablet,\n label: t(\"neetoMolecules.responsiveDevicePicker.tablet\"),\n },\n [RESPONSIVE_DEVICES.MOBILE]: {\n icon: Mobile,\n label: t(\"neetoMolecules.responsiveDevicePicker.mobile\"),\n },\n};\n","import classnames from \"classnames\";\nimport { Button } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nimport { RESPONSIVE_DEVICES_MAP } from \"./constants\";\n\nconst ResponsiveDevicePicker = ({\n className = \"\",\n selectedDevice,\n onDeviceChange,\n ...otherProps\n}) => (\n <div\n className={classnames(\"flex items-center justify-center gap-2\", className)}\n {...otherProps}\n >\n {Object.entries(RESPONSIVE_DEVICES_MAP).map(([key, { icon, label }]) => (\n <Button\n {...{ icon }}\n data-testid={`${label.toLowerCase()}-device-button`}\n key={key}\n size=\"small\"\n style={key === selectedDevice ? \"primary\" : \"secondary\"}\n title={label}\n onClick={() => onDeviceChange(key)}\n />\n ))}\n </div>\n);\n\nResponsiveDevicePicker.propTypes = {\n /**\n * To specify external classnames as overrides.\n */\n className: PropTypes.string,\n /**\n * To show the active device.\n */\n selectedDevice: PropTypes.string,\n /**\n * Handler function that is triggered when one of the device options are selected.\n */\n onDeviceChange: PropTypes.func,\n};\n\nexport default ResponsiveDevicePicker;\n"],"names":["RESPONSIVE_DEVICES","DESKTOP","TABLET","MOBILE","RESPONSIVE_DEVICES_MAP","_defineProperty","icon","Computer","label","t","Tablet","Mobile","ResponsiveDevicePicker","_ref","_ref$className","className","selectedDevice","onDeviceChange","otherProps","_objectWithoutProperties","_excluded","_jsx","_objectSpread","classnames","children","Object","entries","map","_ref2","_ref3","_slicedToArray","key","_ref3$","_createElement","Button","concat","toLowerCase","size","style","title","onClick"],"mappings":";;;;;;;;;;;;AAGO,IAAMA,kBAAkB,GAAG;AAChCC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,MAAM,EAAE,QAAQ;AAChBC,EAAAA,MAAM,EAAE,QAAA;AACV,CAAC,CAAA;AAEM,IAAMC,sBAAsB,GAAAC,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAChCL,EAAAA,EAAAA,kBAAkB,CAACC,OAAO,EAAG;AAC5BK,EAAAA,IAAI,EAAEC,QAAQ;EACdC,KAAK,EAAEC,CAAC,CAAC,+CAA+C,CAAA;AAC1D,CAAC,CACAT,EAAAA,kBAAkB,CAACE,MAAM,EAAG;AAC3BI,EAAAA,IAAI,EAAEI,MAAM;EACZF,KAAK,EAAEC,CAAC,CAAC,8CAA8C,CAAA;AACzD,CAAC,CACAT,EAAAA,kBAAkB,CAACG,MAAM,EAAG;AAC3BG,EAAAA,IAAI,EAAEK,MAAM;EACZH,KAAK,EAAEC,CAAC,CAAC,8CAA8C,CAAA;AACzD,CAAC,CACF;;;;;AChBD,IAAMG,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAAAC,cAAA,GAAAD,IAAA,CAC1BE,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,cAAA;IACdE,cAAc,GAAAH,IAAA,CAAdG,cAAc;IACdC,cAAc,GAAAJ,IAAA,CAAdI,cAAc;AACXC,IAAAA,UAAU,GAAAC,wBAAA,CAAAN,IAAA,EAAAO,SAAA,CAAA,CAAA;AAAA,EAAA,oBAEbC,GAAA,CAAA,KAAA,EAAAC,aAAA,CAAAA,aAAA,CAAA;AACEP,IAAAA,SAAS,EAAEQ,UAAU,CAAC,wCAAwC,EAAER,SAAS,CAAA;AAAE,GAAA,EACvEG,UAAU,CAAA,EAAA,EAAA,EAAA;IAAAM,QAAA,EAEbC,MAAM,CAACC,OAAO,CAACtB,sBAAsB,CAAC,CAACuB,GAAG,CAAC,UAAAC,KAAA,EAAA;AAAA,MAAA,IAAAC,KAAA,GAAAC,cAAA,CAAAF,KAAA,EAAA,CAAA,CAAA;AAAEG,QAAAA,GAAG,GAAAF,KAAA,CAAA,CAAA,CAAA;AAAAG,QAAAA,MAAA,GAAAH,KAAA,CAAA,CAAA,CAAA;QAAIvB,IAAI,GAAA0B,MAAA,CAAJ1B,IAAI;QAAEE,KAAK,GAAAwB,MAAA,CAALxB,KAAK,CAAA;MAAA,oBAC9DyB,aAAA,CAACC,MAAM,EAAA;AACC5B,QAAAA,IAAI,EAAJA,IAAI;AACV,QAAA,aAAA,EAAA,EAAA,CAAA6B,MAAA,CAAgB3B,KAAK,CAAC4B,WAAW,EAAE,EAAiB,gBAAA,CAAA;AACpDL,QAAAA,GAAG,EAAEA,GAAI;AACTM,QAAAA,IAAI,EAAC,OAAO;AACZC,QAAAA,KAAK,EAAEP,GAAG,KAAKf,cAAc,GAAG,SAAS,GAAG,WAAY;AACxDuB,QAAAA,KAAK,EAAE/B,KAAM;QACbgC,OAAO,EAAE,SAATA,OAAOA,GAAA;UAAA,OAAQvB,cAAc,CAACc,GAAG,CAAC,CAAA;AAAA,SAAA;AAAC,OACpC,CAAC,CAAA;KACH,CAAA;AAAC,GAAA,CACC,CAAC,CAAA;AAAA;;;;"}
1
+ {"version":3,"file":"ResponsiveDevicePicker.js","sources":["../src/components/ResponsiveDevicePicker/constants.js","../src/components/ResponsiveDevicePicker/index.jsx"],"sourcesContent":["import { t } from \"i18next\";\nimport { Computer, Tablet, Mobile } from \"neetoicons\";\n\nexport const RESPONSIVE_DEVICES = {\n DESKTOP: \"desktop\",\n TABLET: \"tablet\",\n MOBILE: \"mobile\",\n};\n\nexport const RESPONSIVE_DEVICES_MAP = {\n [RESPONSIVE_DEVICES.DESKTOP]: {\n icon: Computer,\n label: t(\"neetoMolecules.responsiveDevicePicker.desktop\"),\n },\n [RESPONSIVE_DEVICES.TABLET]: {\n icon: Tablet,\n label: t(\"neetoMolecules.responsiveDevicePicker.tablet\"),\n },\n [RESPONSIVE_DEVICES.MOBILE]: {\n icon: Mobile,\n label: t(\"neetoMolecules.responsiveDevicePicker.mobile\"),\n },\n};\n","import classnames from \"classnames\";\nimport { Button } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nimport { RESPONSIVE_DEVICES_MAP } from \"./constants\";\nimport \"./responsive-device-picker.scss\";\n\nconst ResponsiveDevicePicker = ({\n className = \"\",\n selectedDevice,\n onDeviceChange,\n ...otherProps\n}) => (\n <div\n className={classnames(\n \"neeto-molecules-device-switcher flex items-center justify-center\",\n className\n )}\n {...otherProps}\n >\n {Object.entries(RESPONSIVE_DEVICES_MAP).map(([key, { icon, label }]) => (\n <Button\n {...{ icon }}\n data-testid={`${label.toLowerCase()}-device-button`}\n key={key}\n size=\"small\"\n style=\"tertiary\"\n title={label}\n className={classnames(\"neeto-molecules-device-switcher__btn\", {\n \"neeto-molecules-device-switcher__btn--active\":\n key === selectedDevice,\n })}\n onClick={() => onDeviceChange(key)}\n />\n ))}\n </div>\n);\n\nResponsiveDevicePicker.propTypes = {\n /**\n * To specify external classnames as overrides.\n */\n className: PropTypes.string,\n /**\n * To show the active device.\n */\n selectedDevice: PropTypes.string,\n /**\n * Handler function that is triggered when one of the device options are selected.\n */\n onDeviceChange: PropTypes.func,\n};\n\nexport default ResponsiveDevicePicker;\n"],"names":["RESPONSIVE_DEVICES","DESKTOP","TABLET","MOBILE","RESPONSIVE_DEVICES_MAP","_defineProperty","icon","Computer","label","t","Tablet","Mobile","ResponsiveDevicePicker","_ref","_ref$className","className","selectedDevice","onDeviceChange","otherProps","_objectWithoutProperties","_excluded","_jsx","_objectSpread","classnames","children","Object","entries","map","_ref2","_ref3","_slicedToArray","key","_ref3$","_createElement","Button","concat","toLowerCase","size","style","title","onClick"],"mappings":";;;;;;;;;;;;;AAGO,IAAMA,kBAAkB,GAAG;AAChCC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,MAAM,EAAE,QAAQ;AAChBC,EAAAA,MAAM,EAAE,QAAA;AACV,CAAC,CAAA;AAEM,IAAMC,sBAAsB,GAAAC,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAChCL,EAAAA,EAAAA,kBAAkB,CAACC,OAAO,EAAG;AAC5BK,EAAAA,IAAI,EAAEC,QAAQ;EACdC,KAAK,EAAEC,CAAC,CAAC,+CAA+C,CAAA;AAC1D,CAAC,CACAT,EAAAA,kBAAkB,CAACE,MAAM,EAAG;AAC3BI,EAAAA,IAAI,EAAEI,MAAM;EACZF,KAAK,EAAEC,CAAC,CAAC,8CAA8C,CAAA;AACzD,CAAC,CACAT,EAAAA,kBAAkB,CAACG,MAAM,EAAG;AAC3BG,EAAAA,IAAI,EAAEK,MAAM;EACZH,KAAK,EAAEC,CAAC,CAAC,8CAA8C,CAAA;AACzD,CAAC,CACF;;;;;;;;ACfD,IAAMG,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAAAC,cAAA,GAAAD,IAAA,CAC1BE,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,cAAA;IACdE,cAAc,GAAAH,IAAA,CAAdG,cAAc;IACdC,cAAc,GAAAJ,IAAA,CAAdI,cAAc;AACXC,IAAAA,UAAU,GAAAC,wBAAA,CAAAN,IAAA,EAAAO,SAAA,CAAA,CAAA;AAAA,EAAA,oBAEbC,GAAA,CAAA,KAAA,EAAAC,aAAA,CAAAA,aAAA,CAAA;AACEP,IAAAA,SAAS,EAAEQ,UAAU,CACnB,kEAAkE,EAClER,SACF,CAAA;AAAE,GAAA,EACEG,UAAU,CAAA,EAAA,EAAA,EAAA;IAAAM,QAAA,EAEbC,MAAM,CAACC,OAAO,CAACtB,sBAAsB,CAAC,CAACuB,GAAG,CAAC,UAAAC,KAAA,EAAA;AAAA,MAAA,IAAAC,KAAA,GAAAC,cAAA,CAAAF,KAAA,EAAA,CAAA,CAAA;AAAEG,QAAAA,GAAG,GAAAF,KAAA,CAAA,CAAA,CAAA;AAAAG,QAAAA,MAAA,GAAAH,KAAA,CAAA,CAAA,CAAA;QAAIvB,IAAI,GAAA0B,MAAA,CAAJ1B,IAAI;QAAEE,KAAK,GAAAwB,MAAA,CAALxB,KAAK,CAAA;MAAA,oBAC9DyB,aAAA,CAACC,MAAM,EAAA;AACC5B,QAAAA,IAAI,EAAJA,IAAI;AACV,QAAA,aAAA,EAAA,EAAA,CAAA6B,MAAA,CAAgB3B,KAAK,CAAC4B,WAAW,EAAE,EAAiB,gBAAA,CAAA;AACpDL,QAAAA,GAAG,EAAEA,GAAI;AACTM,QAAAA,IAAI,EAAC,OAAO;AACZC,QAAAA,KAAK,EAAC,UAAU;AAChBC,QAAAA,KAAK,EAAE/B,KAAM;AACbO,QAAAA,SAAS,EAAEQ,UAAU,CAAC,sCAAsC,EAAE;UAC5D,8CAA8C,EAC5CQ,GAAG,KAAKf,cAAAA;AACZ,SAAC,CAAE;QACHwB,OAAO,EAAE,SAATA,OAAOA,GAAA;UAAA,OAAQvB,cAAc,CAACc,GAAG,CAAC,CAAA;AAAA,SAAA;AAAC,OACpC,CAAC,CAAA;KACH,CAAA;AAAC,GAAA,CACC,CAAC,CAAA;AAAA;;;;"}
@@ -37,6 +37,7 @@ import DatePicker from '@bigbinary/neetoui/DatePicker';
37
37
  import Share from '@bigbinary/neeto-icons/Share';
38
38
  import QrCode from '@bigbinary/neeto-icons/QrCode';
39
39
  import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
40
+ import HelpPopover from './HelpPopover.js';
40
41
  import LeftArrow from '@bigbinary/neeto-icons/LeftArrow';
41
42
  import CardLayout from './CardLayout.js';
42
43
  import Header$1 from './Header.js';
@@ -51,9 +52,8 @@ import '@bigbinary/neeto-icons/MenuHorizontal';
51
52
  import '@bigbinary/neeto-icons/MenuVertical';
52
53
  import '@bigbinary/neetoui/Dropdown';
53
54
  import '@bigbinary/neetoui/Tooltip';
54
- import './Breadcrumbs.js';
55
- import './HelpPopover.js';
56
55
  import '@bigbinary/neetoui/Popover';
56
+ import './Breadcrumbs.js';
57
57
  import './Search.js';
58
58
  import '@bigbinary/neeto-commons-frontend/react-utils/useFuncDebounce';
59
59
  import '@bigbinary/neeto-commons-frontend/react-utils/useQueryParams';
@@ -540,7 +540,7 @@ var Link = function Link(_ref) {
540
540
  });
541
541
  };
542
542
 
543
- var _excluded = ["title", "link", "description", "Icon", "onClick"];
543
+ var _excluded = ["title", "link", "description", "Icon", "onClick", "helpPopoverProps"];
544
544
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
545
545
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
546
546
  var Card = function Card(_ref) {
@@ -550,6 +550,7 @@ var Card = function Card(_ref) {
550
550
  Icon = _ref.Icon,
551
551
  _ref$onClick = _ref.onClick,
552
552
  onClick = _ref$onClick === void 0 ? noop : _ref$onClick,
553
+ helpPopoverProps = _ref.helpPopoverProps,
553
554
  otherProps = _objectWithoutProperties(_ref, _excluded);
554
555
  var Component = isPresent(link) ? Link$1 : "div";
555
556
  return /*#__PURE__*/jsxs(Component, _objectSpread(_objectSpread({
@@ -566,7 +567,7 @@ var Card = function Card(_ref) {
566
567
  className: "min-w-0 flex-grow break-words",
567
568
  style: "h4",
568
569
  children: title
569
- })]
570
+ }), helpPopoverProps && /*#__PURE__*/jsx(HelpPopover, _objectSpread({}, helpPopoverProps))]
570
571
  }), description && /*#__PURE__*/jsx(Typography, {
571
572
  className: "break-words",
572
573
  lineHeight: "normal",
@@ -600,10 +601,12 @@ var ShareBlock = function ShareBlock(_ref) {
600
601
  Icon = _ref2.icon,
601
602
  onClick = _ref2.onClick,
602
603
  dataCy = _ref2.dataCy,
603
- description = _ref2.description;
604
+ description = _ref2.description,
605
+ helpPopoverProps = _ref2.helpPopoverProps;
604
606
  return /*#__PURE__*/createElement(Card, {
605
607
  Icon: Icon,
606
608
  description: description,
609
+ helpPopoverProps: helpPopoverProps,
607
610
  link: link,
608
611
  onClick: onClick,
609
612
  title: title,