@laerdal/life-react-components 3.5.1-dev.12 → 3.5.1-dev.13

package/dist/Popover/Popover.js

@@ -1,101 +1,226 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import * as React from 'react';
-import styled from 'styled-components';
-import { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';
-import { Button, IconButton } from '../Button';
-import { SystemIcons } from '../icons';
-import { BOXSHADOWS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling, scrollBarStyling, Z_INDEXES } from '../styles';
-import { Position, Size } from '../types';
-export var PopoverContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  //height: ", ";\n  min-width: ", ";\n  border-radius: 4px;\n  background: ", ";\n  cursor: default;\n  box-shadow: ", ";\n\n  position: absolute;  \n  visibility: hidden;\n  opacity: 0;\n  z-index: ", ";\n\n  ", "\n  ", "\n\n  ", "\n  ", "\n\n  &::after {\n    ", "\n"], ["\n  //height: ", ";\n  min-width: ", ";\n  border-radius: 4px;\n  background: ", ";\n  cursor: default;\n  box-shadow: ", ";\n\n  position: absolute;  \n  visibility: hidden;\n  opacity: 0;\n  z-index: ", ";\n\n  ", "\n  ", "\n\n  ", "\n  ", "\n\n  &::after {\n    ", "\n"])), function (props) { return (props.size === Size.Small ? '240px' : props.size === Size.Large ? '480px' : '360px'); }, function (props) { return (props.size === Size.Small ? '320px' : props.size === Size.Large ? '640px' : '480px'); }, COLORS.white, BOXSHADOWS.BOXSHADOW_CENTERED, Z_INDEXES.popover, function (props) { return (props.position == Position.Bottom ? 'right: 50%; top: calc(100% + 16px); transform: translateX(50%);' : ''); }, function (props) { return (props.position == Position.Top ? 'right: 50%; bottom: calc(100% + 16px); transform: translateX(50%);' : ''); }, function (props) { return (props.position == Position.Left ? 'bottom: 50%; right: calc(100% + 16px); transform: translateY(50%);' : ''); }, function (props) { return (props.position == Position.Right ? 'bottom: 50%; left: calc(100% + 16px); transform: translateY(50%);' : ''); }, function (props) { return (props.showArrowPointer ? renderArrowStyles(props.position) : ''); });
-export var PopoverTopSectionContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: ", ";\n  display: flex;\n"], ["\n  height: ", ";\n  display: flex;\n"])), function (props) { return (props.size === Size.Small ? '56px' : props.size === Size.Large ? '72px' : '64px'); });
-export var PopoverMiddleSectionContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 8px;\n  height: ", ";\n  padding: ", ";\n  overflow-y: auto;\n  ", "\n"], ["\n  margin: 8px;\n  height: ", ";\n  padding: ", ";\n  overflow-y: auto;\n  ", "\n"])), function (props) { return (props.size === Size.Small ? '104px' : props.size === Size.Large ? '304px' : '208px'); }, function (props) { return (props.size === Size.Small ? '0 8px' : props.size === Size.Large ? '0 16px' : '0 12px'); }, scrollBarStyling(Size.Small));
-export var PopoverBottomSectionContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: ", ";  \n  display: flex;\n\n  .bottom-flex {\n    flex: 1;\n  }\n"], ["\n  height: ", ";  \n  display: flex;\n\n  .bottom-flex {\n    flex: 1;\n  }\n"])), function (props) { return (props.size === Size.Small ? '64px' : props.size === Size.Large ? '88px' : '72px'); });
-var TextContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  margin: ", ";\n  flex-grow: 1;\n"], ["\n  display: flex;\n  flex-direction: column;\n  margin: ", ";\n  flex-grow: 1;\n"])), function (props) { return renderMargins(props.note, props.size); });
-var NoteContainer = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
-    return props.size === Size.Small
-        ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)
-        : props.size === Size.Large
-            ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)
-            : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600);
-});
-var LabelContainer = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
-    return props.size === Size.Small
-        ? ComponentSStyling(ComponentTextStyle.Bold, null)
-        : props.size === Size.Large
-            ? ComponentLStyling(ComponentTextStyle.Bold, null)
-            : ComponentMStyling(ComponentTextStyle.Bold, null);
-});
-var CloseButtonContainer = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  margin: ", ";\n"], ["\n  margin: ", ";\n"])), function (props) { return (props.size === Size.Small ? '4px 16px 4px 0' : props.size === Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0'); });
-var TextButtonContainer = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  margin: ", ";\n"], ["\n  margin: ", ";\n"])), function (props) { return (props.size === Size.Small ? '8px 0 8px 16px' : props.size === Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px'); });
-var IconButtonContainer = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  margin: ", ";\n  display: flex;\n"], ["\n  margin: ", ";\n  display: flex;\n"])), function (props) { return (props.size === Size.Small ? '8px 16px 8px 0' : props.size === Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0'); });
-export var PopoverWrapper = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  position: relative;\n\n  .pointer-space {\n    height: ", ";\n    width: ", ";\n    position: absolute;\n\n    ", ";\n    ", ";\n\n    ", ";\n    ", ";\n  }\n\n  ", "\n"], ["\n  position: relative;\n\n  .pointer-space {\n    height: ", ";\n    width: ", ";\n    position: absolute;\n\n    ", ";\n    ", ";\n\n    ", ";\n    ", ";\n  }\n\n  ", "\n"])), function (props) { return (props.position === Position.Top || props.position === Position.Bottom ? '16px' : '100%'); }, function (props) { return (props.position === Position.Left || props.position === Position.Right ? '16px' : '100%'); }, function (props) { return (props.position === Position.Left ? 'right:100%; bottom: 0%' : ''); }, function (props) { return (props.position === Position.Right ? 'left:100%; bottom: 0%' : ''); }, function (props) { return (props.position === Position.Top ? 'bottom: 100%' : ''); }, function (props) { return (props.position === Position.Bottom ? 'top: 100%' : ''); }, function (props) {
-    return props.showOnClick
-        ? "".concat(PopoverContainer, " {\n        visibility: ").concat(props.showPopover ? 'visible' : 'hidden', ";\n        opacity: ").concat(props.showPopover ? '1' : '0', ";\n    }\n    cursor: pointer;")
-        : "&:hover {\n      ".concat(PopoverContainer, " {\n        visibility: visible;\n        opacity: 1;\n      }\n    }");
-});
-var renderMargins = function (isNotePresent, size) {
-    if (isNotePresent) {
-        return size === Size.Small ? '10px 16px' : size === Size.Large ? '14px 24px' : '12px 20px';
-    }
-    else {
-        return size === Size.Small ? '18px 16px' : size === Size.Large ? '24px' : '20px';
-    }
-};
-var renderArrowStyles = function (position) {
-    if (position === Position.Bottom) {
-        return "height: 0px;\n            width: 0px;\n            border-top: 16px solid transparent;\n            border-right: 12px solid transparent;\n            border-bottom: 16px solid rgb(255,255,255);\n            border-left: 12px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(50% - 12px);\n            bottom: calc(100% - 1px);";
-    }
-    if (position === Position.Top) {
-        return "height: 0px;\n            width: 0px;\n            border-top: 16px solid rgb(255,255,255);\n            border-right: 12px solid transparent;\n            border-bottom: 16px solid transparent;\n            border-left: 12px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(50% - 12px);\n            top: calc(100% - 1px);";
-    }
-    if (position === Position.Left) {
-        return "height: 0px;\n            width: 0px;\n            border-top: 12px solid transparent;\n            border-right: 16px solid transparent;\n            border-bottom: 12px solid transparent;\n            border-left: 16px solid rgb(255,255,255);\n            content: \"\";\n            position: absolute;\n            left: calc(100% - 1px);\n            bottom: calc(50% - 12px);";
-    }
-    if (position === Position.Right) {
-        return "height: 0px;\n            width: 0px;\n            border-top: 12px solid transparent;\n            border-right: 16px solid rgb(255,255,255);\n            border-bottom: 12px solid transparent;\n            border-left: 16px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(100% - 1px);\n            bottom: calc(50% - 12px);";
-    }
-};
-;
-;
-;
-;
-var Popover = function (_a) {
-    var _b, _c;
-    var _d = _a.size, size = _d === void 0 ? Size.Medium : _d, topSectionProps = _a.topSectionProps, bottomSectionProps = _a.bottomSectionProps, mainContent = _a.mainContent, children = _a.children, position = _a.position, _e = _a.showOnClick, showOnClick = _e === void 0 ? false : _e, _f = _a.showArrowPointer, showArrowPointer = _f === void 0 ? false : _f;
-    var _g = React.useState(false), showPopover = _g[0], setShowPopover = _g[1];
-    var popoverRef = React.useRef();
-    React.useEffect(function () {
-        var checkIfClickedOutside = function (e) {
-            if (showPopover && popoverRef.current && !popoverRef.current.contains(e.target)) {
-                setShowPopover(false);
-            }
-        };
-        document.addEventListener('mousedown', checkIfClickedOutside);
-        return function () {
-            document.removeEventListener('mousedown', checkIfClickedOutside);
-        };
-    }, [showPopover]);
-    return (React.createElement(PopoverWrapper, { position: position, showOnClick: showOnClick, showPopover: showPopover },
-        React.createElement(PopoverContainer, { size: size, position: position, ref: popoverRef, showArrowPointer: showArrowPointer },
-            !!topSectionProps && (React.createElement(PopoverTopSectionContainer, { size: size },
-                React.createElement(TextContainer, { note: !!(topSectionProps === null || topSectionProps === void 0 ? void 0 : topSectionProps.note), size: size },
-                    (topSectionProps === null || topSectionProps === void 0 ? void 0 : topSectionProps.note) && React.createElement(NoteContainer, { size: size }, topSectionProps.note),
-                    React.createElement(LabelContainer, { size: size }, topSectionProps === null || topSectionProps === void 0 ? void 0 : topSectionProps.text)),
-                showOnClick && (React.createElement(CloseButtonContainer, { size: size, "data-testid": 'closeBtn' },
-                    React.createElement(IconButton, { action: function () { return setShowPopover(false); }, useTransparentBackground: true, iconColor: COLORS.neutral_600, variant: "secondary", shape: "circular" },
-                        React.createElement(SystemIcons.Close, null)))))),
-            React.createElement(PopoverMiddleSectionContainer, { size: size }, mainContent),
-            !!bottomSectionProps && (React.createElement(PopoverBottomSectionContainer, { size: size },
-                !!((_b = bottomSectionProps === null || bottomSectionProps === void 0 ? void 0 : bottomSectionProps.textButton) === null || _b === void 0 ? void 0 : _b.icon) && (React.createElement(TextButtonContainer, { size: size, "data-testid": 'textBtn' },
-                    React.createElement(Button, { size: size, variant: "secondary", icon: bottomSectionProps.textButton.icon, onClick: bottomSectionProps.textButton.action }, bottomSectionProps.textButton.label))),
-                React.createElement("div", { className: "bottom-flex" }),
-                React.createElement(IconButtonContainer, { size: size, "data-testid": 'iconBtn' }, (_c = bottomSectionProps === null || bottomSectionProps === void 0 ? void 0 : bottomSectionProps.iconButtons) === null || _c === void 0 ? void 0 : _c.map(function (iconButton) { return (React.createElement(IconButton, { action: iconButton.action, variant: "secondary", shape: "circular", useTransparentBackground: true }, iconButton.icon)); }))))),
-        React.createElement("div", { onClick: function () { return showOnClick && setShowPopover(!showPopover); } },
-            children,
-            React.createElement("div", { className: "pointer-space" }))));
-};
-export default Popover;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+import * as React from 'react';
+import styled from 'styled-components';
+import { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';
+import { Button, IconButton } from '../Button';
+import { SystemIcons } from '../icons';
+import { BOXSHADOWS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling, scrollBarStyling, Z_INDEXES } from '../styles';
+import { Position, Size } from '../types';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var PopoverContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  //height: ", ";\n  min-width: ", ";\n  border-radius: 4px;\n  background: ", ";\n  cursor: default;\n  box-shadow: ", ";\n\n  position: absolute;  \n  visibility: hidden;\n  opacity: 0;\n  z-index: ", ";\n\n  ", "\n  ", "\n\n  ", "\n  ", "\n\n  &::after {\n    ", "\n"])), function (props) {
+  return props.size === Size.Small ? '240px' : props.size === Size.Large ? '480px' : '360px';
+}, function (props) {
+  return props.size === Size.Small ? '320px' : props.size === Size.Large ? '640px' : '480px';
+}, COLORS.white, BOXSHADOWS.BOXSHADOW_CENTERED, Z_INDEXES.popover, function (props) {
+  return props.position == Position.Bottom ? 'right: 50%; top: calc(100% + 16px); transform: translateX(50%);' : '';
+}, function (props) {
+  return props.position == Position.Top ? 'right: 50%; bottom: calc(100% + 16px); transform: translateX(50%);' : '';
+}, function (props) {
+  return props.position == Position.Left ? 'bottom: 50%; right: calc(100% + 16px); transform: translateY(50%);' : '';
+}, function (props) {
+  return props.position == Position.Right ? 'bottom: 50%; left: calc(100% + 16px); transform: translateY(50%);' : '';
+}, function (props) {
+  return props.showArrowPointer ? renderArrowStyles(props.position) : '';
+});
+export var PopoverTopSectionContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: ", ";\n  display: flex;\n"])), function (props) {
+  return props.size === Size.Small ? '56px' : props.size === Size.Large ? '72px' : '64px';
+});
+export var PopoverMiddleSectionContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 8px;\n  height: ", ";\n  padding: ", ";\n  overflow-y: auto;\n  ", "\n"])), function (props) {
+  return props.size === Size.Small ? '104px' : props.size === Size.Large ? '304px' : '208px';
+}, function (props) {
+  return props.size === Size.Small ? '0 8px' : props.size === Size.Large ? '0 16px' : '0 12px';
+}, scrollBarStyling(Size.Small));
+export var PopoverBottomSectionContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  height: ", ";  \n  display: flex;\n\n  .bottom-flex {\n    flex: 1;\n  }\n"])), function (props) {
+  return props.size === Size.Small ? '64px' : props.size === Size.Large ? '88px' : '72px';
+});
+var TextContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  margin: ", ";\n  flex-grow: 1;\n"])), function (props) {
+  return renderMargins(props.note, props.size);
+});
+var NoteContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n"])), function (props) {
+  return props.size === Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600) : props.size === Size.Large ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600) : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600);
+});
+var LabelContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n"])), function (props) {
+  return props.size === Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, null) : props.size === Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, null) : ComponentMStyling(ComponentTextStyle.Bold, null);
+});
+var CloseButtonContainer = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  margin: ", ";\n"])), function (props) {
+  return props.size === Size.Small ? '4px 16px 4px 0' : props.size === Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0';
+});
+var TextButtonContainer = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  margin: ", ";\n"])), function (props) {
+  return props.size === Size.Small ? '8px 0 8px 16px' : props.size === Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px';
+});
+var IconButtonContainer = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin: ", ";\n  display: flex;\n"])), function (props) {
+  return props.size === Size.Small ? '8px 16px 8px 0' : props.size === Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0';
+});
+export var PopoverWrapper = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  position: relative;\n\n  .pointer-space {\n    height: ", ";\n    width: ", ";\n    position: absolute;\n\n    ", ";\n    ", ";\n\n    ", ";\n    ", ";\n  }\n\n  ", "\n"])), function (props) {
+  return props.position === Position.Top || props.position === Position.Bottom ? '16px' : '100%';
+}, function (props) {
+  return props.position === Position.Left || props.position === Position.Right ? '16px' : '100%';
+}, function (props) {
+  return props.position === Position.Left ? 'right:100%; bottom: 0%' : '';
+}, function (props) {
+  return props.position === Position.Right ? 'left:100%; bottom: 0%' : '';
+}, function (props) {
+  return props.position === Position.Top ? 'bottom: 100%' : '';
+}, function (props) {
+  return props.position === Position.Bottom ? 'top: 100%' : '';
+}, function (props) {
+  return props.showOnClick ? "".concat(PopoverContainer, " {\n        visibility: ").concat(props.showPopover ? 'visible' : 'hidden', ";\n        opacity: ").concat(props.showPopover ? '1' : '0', ";\n    }\n    cursor: pointer;") : "&:hover {\n      ".concat(PopoverContainer, " {\n        visibility: visible;\n        opacity: 1;\n      }\n    }");
+});
+var renderMargins = function renderMargins(isNotePresent, size) {
+  if (isNotePresent) {
+    return size === Size.Small ? '10px 16px' : size === Size.Large ? '14px 24px' : '12px 20px';
+  } else {
+    return size === Size.Small ? '18px 16px' : size === Size.Large ? '24px' : '20px';
+  }
+};
+var renderArrowStyles = function renderArrowStyles(position) {
+  if (position === Position.Bottom) {
+    return "height: 0px;\n            width: 0px;\n            border-top: 16px solid transparent;\n            border-right: 12px solid transparent;\n            border-bottom: 16px solid rgb(255,255,255);\n            border-left: 12px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(50% - 12px);\n            bottom: calc(100% - 1px);";
+  }
+  if (position === Position.Top) {
+    return "height: 0px;\n            width: 0px;\n            border-top: 16px solid rgb(255,255,255);\n            border-right: 12px solid transparent;\n            border-bottom: 16px solid transparent;\n            border-left: 12px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(50% - 12px);\n            top: calc(100% - 1px);";
+  }
+  if (position === Position.Left) {
+    return "height: 0px;\n            width: 0px;\n            border-top: 12px solid transparent;\n            border-right: 16px solid transparent;\n            border-bottom: 12px solid transparent;\n            border-left: 16px solid rgb(255,255,255);\n            content: \"\";\n            position: absolute;\n            left: calc(100% - 1px);\n            bottom: calc(50% - 12px);";
+  }
+  if (position === Position.Right) {
+    return "height: 0px;\n            width: 0px;\n            border-top: 12px solid transparent;\n            border-right: 16px solid rgb(255,255,255);\n            border-bottom: 12px solid transparent;\n            border-left: 16px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(100% - 1px);\n            bottom: calc(50% - 12px);";
+  }
+};
+;
+;
+;
+;
+var Popover = function Popover(_ref) {
+  var _bottomSectionProps$t, _bottomSectionProps$i;
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? Size.Medium : _ref$size,
+    topSectionProps = _ref.topSectionProps,
+    bottomSectionProps = _ref.bottomSectionProps,
+    mainContent = _ref.mainContent,
+    children = _ref.children,
+    position = _ref.position,
+    _ref$showOnClick = _ref.showOnClick,
+    showOnClick = _ref$showOnClick === void 0 ? false : _ref$showOnClick,
+    _ref$showArrowPointer = _ref.showArrowPointer,
+    showArrowPointer = _ref$showArrowPointer === void 0 ? false : _ref$showArrowPointer;
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    showPopover = _React$useState2[0],
+    setShowPopover = _React$useState2[1];
+  var popoverRef = React.useRef();
+  React.useEffect(function () {
+    var checkIfClickedOutside = function checkIfClickedOutside(e) {
+      if (showPopover && popoverRef.current && !popoverRef.current.contains(e.target)) {
+        setShowPopover(false);
+      }
+    };
+    document.addEventListener('mousedown', checkIfClickedOutside);
+    return function () {
+      document.removeEventListener('mousedown', checkIfClickedOutside);
+    };
+  }, [showPopover]);
+  return /*#__PURE__*/_jsxs(PopoverWrapper, {
+    position: position,
+    showOnClick: showOnClick,
+    showPopover: showPopover,
+    children: [/*#__PURE__*/_jsxs(PopoverContainer, {
+      size: size,
+      position: position,
+      ref: popoverRef,
+      showArrowPointer: showArrowPointer,
+      children: [!!topSectionProps && /*#__PURE__*/_jsxs(PopoverTopSectionContainer, {
+        size: size,
+        children: [/*#__PURE__*/_jsxs(TextContainer, {
+          note: !!(topSectionProps !== null && topSectionProps !== void 0 && topSectionProps.note),
+          size: size,
+          children: [(topSectionProps === null || topSectionProps === void 0 ? void 0 : topSectionProps.note) && /*#__PURE__*/_jsx(NoteContainer, {
+            size: size,
+            children: topSectionProps.note
+          }), /*#__PURE__*/_jsx(LabelContainer, {
+            size: size,
+            children: topSectionProps === null || topSectionProps === void 0 ? void 0 : topSectionProps.text
+          })]
+        }), showOnClick && /*#__PURE__*/_jsx(CloseButtonContainer, {
+          size: size,
+          "data-testid": 'closeBtn',
+          children: /*#__PURE__*/_jsx(IconButton, {
+            action: function action() {
+              return setShowPopover(false);
+            },
+            useTransparentBackground: true,
+            iconColor: COLORS.neutral_600,
+            variant: "secondary",
+            shape: "circular",
+            children: /*#__PURE__*/_jsx(SystemIcons.Close, {})
+          })
+        })]
+      }), /*#__PURE__*/_jsx(PopoverMiddleSectionContainer, {
+        size: size,
+        children: mainContent
+      }), !!bottomSectionProps && /*#__PURE__*/_jsxs(PopoverBottomSectionContainer, {
+        size: size,
+        children: [!!(bottomSectionProps !== null && bottomSectionProps !== void 0 && (_bottomSectionProps$t = bottomSectionProps.textButton) !== null && _bottomSectionProps$t !== void 0 && _bottomSectionProps$t.icon) && /*#__PURE__*/_jsx(TextButtonContainer, {
+          size: size,
+          "data-testid": 'textBtn',
+          children: /*#__PURE__*/_jsx(Button, {
+            size: size,
+            variant: "secondary",
+            icon: bottomSectionProps.textButton.icon,
+            onClick: bottomSectionProps.textButton.action,
+            children: bottomSectionProps.textButton.label
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          className: "bottom-flex"
+        }), /*#__PURE__*/_jsx(IconButtonContainer, {
+          size: size,
+          "data-testid": 'iconBtn',
+          children: bottomSectionProps === null || bottomSectionProps === void 0 ? void 0 : (_bottomSectionProps$i = bottomSectionProps.iconButtons) === null || _bottomSectionProps$i === void 0 ? void 0 : _bottomSectionProps$i.map(function (iconButton) {
+            return /*#__PURE__*/_jsx(IconButton, {
+              action: iconButton.action,
+              variant: "secondary",
+              shape: "circular",
+              useTransparentBackground: true,
+              children: iconButton.icon
+            });
+          })
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs("div", {
+      onClick: function onClick() {
+        return showOnClick && setShowPopover(!showPopover);
+      },
+      children: [children, /*#__PURE__*/_jsx("div", {
+        className: "pointer-space"
+      })]
+    })]
+  });
+};
+Popover.propTypes = {
+  topSectionProps: _pt.shape({
+    text: _pt.string.isRequired,
+    note: _pt.string
+  }),
+  bottomSectionProps: _pt.shape({
+    iconButtons: _pt.arrayOf(_pt.shape({
+      icon: _pt.node.isRequired,
+      action: _pt.func.isRequired,
+      label: _pt.string
+    })),
+    textButton: _pt.shape({
+      icon: _pt.node.isRequired,
+      action: _pt.func.isRequired,
+      label: _pt.string
+    })
+  }),
+  mainContent: _pt.node.isRequired,
+  children: _pt.node.isRequired,
+  showOnClick: _pt.bool.isRequired,
+  showArrowPointer: _pt.bool
+};
+export default Popover;
+//# sourceMappingURL=Popover.js.map

package/dist/Popover/index.js

@@ -1 +1,2 @@
-export { default as Popover } from './Popover';
+export { default as Popover } from './Popover';
+//# sourceMappingURL=index.js.map

package/dist/ProfileButton/ProfileButton.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare type ProfileButtonProps = {
+export type ProfileButtonProps = {
     /**
      * Optional. The source URL of the profile picture.
      */
@@ -40,7 +40,7 @@ declare const ProfileButton: React.ForwardRefExoticComponent<{
     /**
      * Required. The handler function to be called when the button is clicked.
      */
-    onClick: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent> | undefined) => void;
+    onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;
     /**
      * Optional. The variant of the notification dot. It can be 'positive' or 'critical'.
      */

package/dist/ProfileButton/ProfileButton.js

@@ -1,52 +1,75 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import * as React from 'react';
-import styled from 'styled-components';
-import { COLORS, IconButton, Size } from '..';
-import { IconButtonContentStyles, IconButtonStyledPrimary } from '../Button/Iconbutton';
-import { NotificationDot } from '../NotificationDot';
-import { BREAKPOINTS, ComponentS, ComponentTextStyle } from '../styles';
-var PortraitOverlay = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ", ";\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n"], ["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ", ";\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n"])), COLORS.black);
-export var ProfileButtonContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 48px;\n  height: 48px;\n  display: inline;\n  user-select: none;\n  \n  ", " {\n    display: ", ";\n\n    ", " {\n      display: inline;\n    }\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ", " {\n        background-color: ", ";\n\n        svg, svg path {\n          fill: ", ";\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ", " {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ", " {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n"], ["\n  width: 48px;\n  height: 48px;\n  display: inline;\n  user-select: none;\n  \n  ", " {\n    display: ", ";\n\n    ", " {\n      display: inline;\n    }\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ", " {\n        background-color: ", ";\n\n        svg, svg path {\n          fill: ", ";\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ", " {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ", " {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n"])), IconButtonStyledPrimary, function (props) { return (props.hideOnLowWidth ? 'none' : 'inline'); }, BREAKPOINTS.MEDIUM, IconButtonContentStyles, COLORS.neutral_100, COLORS.neutral_300, PortraitOverlay, PortraitOverlay);
-var NotificationContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n"], ["\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n"])));
-var ImageWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 36px;\n  height: 36px;\n  position: relative;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n"], ["\n  width: 36px;\n  height: 36px;\n  position: relative;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n"])));
-var ProfileButton = React.forwardRef(function (_a, ref) {
-    var portraitSrc = _a.portraitSrc, icon = _a.icon, initials = _a.initials, onClick = _a.onClick, disabled = _a.disabled, notificationVariant = _a.notificationVariant, className = _a.className, tabIndex = _a.tabIndex, rest = __rest(_a, ["portraitSrc", "icon", "initials", "onClick", "disabled", "notificationVariant", "className", "tabIndex"]);
-    var renderIcon = function () {
-        return ((portraitSrc && (React.createElement(ImageWrapper, null,
-            React.createElement("img", { src: portraitSrc }),
-            React.createElement(PortraitOverlay, null)))) ||
-            (initials && (React.createElement(ComponentS, { className: "initials", textStyle: ComponentTextStyle.Bold, color: disabled ? COLORS.neutral_300 : COLORS.white }, initials))) || React.createElement(React.Fragment, null, icon));
-    };
-    return (React.createElement(ProfileButtonContainer, null,
-        React.createElement(IconButton, __assign({ ref: ref, className: className, disabled: disabled, action: onClick, variant: "primary", tabIndex: tabIndex, shape: "circular" }, rest),
-            renderIcon(),
-            notificationVariant && (React.createElement(NotificationContainer, null,
-                React.createElement(NotificationDot, { size: Size.Medium, variant: notificationVariant }))))));
-});
-export default ProfileButton;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _excluded = ["portraitSrc", "icon", "initials", "onClick", "disabled", "notificationVariant", "className", "tabIndex"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+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; }
+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; }
+import * as React from 'react';
+import styled from 'styled-components';
+import { COLORS, IconButton, Size } from '..';
+import { IconButtonContentStyles, IconButtonStyledPrimary } from '../Button/Iconbutton';
+import { NotificationDot } from '../NotificationDot';
+import { BREAKPOINTS, ComponentS, ComponentTextStyle } from '../styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var PortraitOverlay = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ", ";\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n"])), COLORS.black);
+export var ProfileButtonContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 48px;\n  height: 48px;\n  display: inline;\n  user-select: none;\n  \n  ", " {\n    display: ", ";\n\n    ", " {\n      display: inline;\n    }\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ", " {\n        background-color: ", ";\n\n        svg, svg path {\n          fill: ", ";\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ", " {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ", " {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n"])), IconButtonStyledPrimary, function (props) {
+  return props.hideOnLowWidth ? 'none' : 'inline';
+}, BREAKPOINTS.MEDIUM, IconButtonContentStyles, COLORS.neutral_100, COLORS.neutral_300, PortraitOverlay, PortraitOverlay);
+var NotificationContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n"])));
+var ImageWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 36px;\n  height: 36px;\n  position: relative;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n"])));
+var ProfileButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var portraitSrc = _ref.portraitSrc,
+    icon = _ref.icon,
+    initials = _ref.initials,
+    onClick = _ref.onClick,
+    disabled = _ref.disabled,
+    notificationVariant = _ref.notificationVariant,
+    className = _ref.className,
+    tabIndex = _ref.tabIndex,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var renderIcon = function renderIcon() {
+    return portraitSrc && /*#__PURE__*/_jsxs(ImageWrapper, {
+      children: [/*#__PURE__*/_jsx("img", {
+        src: portraitSrc
+      }), /*#__PURE__*/_jsx(PortraitOverlay, {})]
+    }) || initials && /*#__PURE__*/_jsx(ComponentS, {
+      className: "initials",
+      textStyle: ComponentTextStyle.Bold,
+      color: disabled ? COLORS.neutral_300 : COLORS.white,
+      children: initials
+    }) || /*#__PURE__*/_jsx(_Fragment, {
+      children: icon
+    });
+  };
+  return /*#__PURE__*/_jsx(ProfileButtonContainer, {
+    children: /*#__PURE__*/_jsxs(IconButton, _objectSpread(_objectSpread({
+      ref: ref,
+      className: className,
+      disabled: disabled,
+      action: onClick,
+      variant: "primary",
+      tabIndex: tabIndex,
+      shape: "circular"
+    }, rest), {}, {
+      children: [renderIcon(), notificationVariant && /*#__PURE__*/_jsx(NotificationContainer, {
+        children: /*#__PURE__*/_jsx(NotificationDot, {
+          size: Size.Medium,
+          variant: notificationVariant
+        })
+      })]
+    }))
+  });
+});
+ProfileButton.propTypes = {
+  portraitSrc: _pt.string,
+  icon: _pt.node,
+  initials: _pt.string,
+  onClick: _pt.func.isRequired,
+  notificationVariant: _pt.oneOf(['positive', 'critical'])
+};
+export default ProfileButton;
+//# sourceMappingURL=ProfileButton.js.map

package/dist/ProfileButton/index.js

@@ -1 +1,2 @@
-export { default as ProfileButton } from './ProfileButton';
+export { default as ProfileButton } from './ProfileButton';
+//# sourceMappingURL=index.js.map

package/dist/QuizButton/QuizButton.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Size } from '..';
-export declare type QuizButtonProps = {
+export type QuizButtonProps = {
     /**
      * Optional. The result type of the quiz button. Can be 'correct', 'incorrect', or 'partial'.
      */