@laerdal/life-react-components 5.0.8-dev.2.full → 5.0.9

package/dist/Panel/Panel.js

@@ -1,10 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-const _excluded = ["items", "order"],
+var _excluded = ["items", "order"],
   _excluded2 = ["media", "content", "title", "order"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _Panel$propTypes;
 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 React from 'react';
@@ -15,54 +16,60 @@ import { SystemIcons } from "../icons";
 import { LinearProgress, LinearProgressType } from "../LinearProgress";
 import { useMediaMatch } from "rooks";
 import { Size } from "../types";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  min-height: 100%;\n  align-items: flex-end;\n  box-sizing: border-box;\n  overflow: hidden;\n\n  gap: 24px;\n  padding: 24px 32px 64px;\n\n  ", " {\n    gap: 32px;\n    padding: 32px 64px 128px;\n  }\n\n  &.reverse {\n    align-items: flex-start;\n  }\n"])), props => COLORS.getColor('neutral_20', props.theme), BREAKPOINTS.LARGE);
-const Media = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 320px;\n  height: 200px;\n\n\n  img {\n    object-fit: contain;\n  }\n\n  img.fit {\n    object-fit: contain;\n  }\n\n  img.fill {\n    object-fit: cover;\n  }\n\n  max-width: 100%;\n\n  img {\n    max-width: 100%;\n    width: 320px;\n    height: 200px;\n  }\n\n  ", " {\n    width: 488px;\n    height: 280px;\n\n    img {\n      width: 488px;\n      height: 280px;\n    }\n  }\n\n"])), BREAKPOINTS.LARGE);
-const Body = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n\n  width: 100%;\n  max-width: 320px;\n\n  ", " {\n    max-width: 488px;\n  }\n  \n  p:not(:first-of-type) {\n    flex: 1;\n    color: ", ";\n  }\n\n\n"])), BREAKPOINTS.LARGE, props => COLORS.getColor('neutral_600', props.theme));
-const Footer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n\n  max-width: 320px;\n\n  ", " {\n    max-width: 488px;\n  }\n\n  .progress {\n    width: max-content;\n  }\n"])), BREAKPOINTS.LARGE);
-export const Panel = props => {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  min-height: 100%;\n  align-items: flex-end;\n  box-sizing: border-box;\n  overflow: hidden;\n\n  gap: 24px;\n  padding: 24px 32px 64px;\n\n  ", " {\n    gap: 32px;\n    padding: 32px 64px 128px;\n  }\n\n  &.reverse {\n    align-items: flex-start;\n  }\n"])), function (props) {
+  return COLORS.getColor('neutral_20', props.theme);
+}, BREAKPOINTS.LARGE);
+var Media = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 320px;\n  height: 200px;\n\n\n  img {\n    object-fit: contain;\n  }\n\n  img.fit {\n    object-fit: contain;\n  }\n\n  img.fill {\n    object-fit: cover;\n  }\n\n  max-width: 100%;\n\n  img {\n    max-width: 100%;\n    width: 320px;\n    height: 200px;\n  }\n\n  ", " {\n    width: 488px;\n    height: 280px;\n\n    img {\n      width: 488px;\n      height: 280px;\n    }\n  }\n\n"])), BREAKPOINTS.LARGE);
+var Body = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n\n  width: 100%;\n  max-width: 320px;\n\n  ", " {\n    max-width: 488px;\n  }\n  \n  p:not(:first-of-type) {\n    flex: 1;\n    color: ", ";\n  }\n\n\n"])), BREAKPOINTS.LARGE, function (props) {
+  return COLORS.getColor('neutral_600', props.theme);
+});
+var Footer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n\n  max-width: 320px;\n\n  ", " {\n    max-width: 488px;\n  }\n\n  .progress {\n    width: max-content;\n  }\n"])), BREAKPOINTS.LARGE);
+export var Panel = function Panel(props) {
   var _currentItem$media, _currentItem$media2;
-  const [currentImage, setCurrentImage] = React.useState(0);
-  const isLargeScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));
-  let rest = {};
-  let order = undefined;
-  let media = undefined;
-  let title = '';
-  let content = undefined;
-  let items = [];
+  var _React$useState = React.useState(0),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    currentImage = _React$useState2[0],
+    setCurrentImage = _React$useState2[1];
+  var isLargeScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));
+  var rest = {};
+  var order = undefined;
+  var media = undefined;
+  var title = '';
+  var content = undefined;
+  var items = [];
   switch (props.type) {
     case 'carousel':
       var _props = props;
-      ({
-        items = [],
-        order
-      } = _props);
+      var _props$items = _props.items;
+      items = _props$items === void 0 ? [] : _props$items;
+      order = _props.order;
       rest = _objectWithoutProperties(_props, _excluded);
       _props;
       break;
     case 'default':
     default:
       var _props2 = props;
-      ({
-        media,
-        content,
-        title = '',
-        order
-      } = _props2);
+      media = _props2.media;
+      content = _props2.content;
+      var _props2$title = _props2.title;
+      title = _props2$title === void 0 ? '' : _props2$title;
+      order = _props2.order;
       rest = _objectWithoutProperties(_props2, _excluded2);
       _props2;
       break;
   }
-  const moveLeft = () => {
+  var moveLeft = function moveLeft() {
     props.type === 'carousel' && setCurrentImage(currentImage === 0 ? items.length - 1 : currentImage - 1);
   };
-  const moveRight = () => {
+  var moveRight = function moveRight() {
     props.type === 'carousel' && setCurrentImage(currentImage + 1 > items.length - 1 ? 0 : currentImage + 1);
   };
-  const currentItem = props.type === 'carousel' ? items[currentImage] : {
-    media,
-    title,
-    content
+  var currentItem = props.type === 'carousel' ? items[currentImage] : {
+    media: media,
+    title: title,
+    content: content
   };
   return /*#__PURE__*/_jsxs(Wrapper, _objectSpread(_objectSpread({}, rest), {}, {
     className: "".concat(rest.className || '', " ").concat(order || '', " "),
@@ -99,7 +106,7 @@ export const Panel = props => {
     })]
   }));
 };
-Panel.propTypes = {
+Panel.propTypes = (_Panel$propTypes = {
   type: _pt.oneOf(['default', 'carousel']),
   media: _pt.oneOfType([_pt.shape({
     type: _pt.oneOf(['image']).isRequired,
@@ -111,24 +118,18 @@ Panel.propTypes = {
     content: _pt.node.isRequired
   })]),
   title: _pt.string,
-  content: _pt.node,
-  type: _pt.oneOf(['default']),
-  order: _pt.oneOf(['default', 'reverse']),
-  type: _pt.oneOf(['default', 'carousel']),
-  type: _pt.oneOf(['carousel']).isRequired,
-  order: _pt.oneOf(['default', 'reverse']),
-  items: _pt.arrayOf(_pt.shape({
-    media: _pt.oneOfType([_pt.shape({
-      type: _pt.oneOf(['image']).isRequired,
-      src: _pt.string.isRequired,
-      alt: _pt.string.isRequired,
-      fit: _pt.oneOf(['fill', 'fit'])
-    }), _pt.shape({
-      type: _pt.oneOf(['custom']).isRequired,
-      content: _pt.node.isRequired
-    })]),
-    title: _pt.string,
-    content: _pt.node
-  }))
-};
+  content: _pt.node
+}, _defineProperty(_Panel$propTypes, "type", _pt.oneOf(['default'])), _defineProperty(_Panel$propTypes, "order", _pt.oneOf(['default', 'reverse'])), _defineProperty(_Panel$propTypes, "type", _pt.oneOf(['default', 'carousel'])), _defineProperty(_Panel$propTypes, "type", _pt.oneOf(['carousel']).isRequired), _defineProperty(_Panel$propTypes, "order", _pt.oneOf(['default', 'reverse'])), _defineProperty(_Panel$propTypes, "items", _pt.arrayOf(_pt.shape({
+  media: _pt.oneOfType([_pt.shape({
+    type: _pt.oneOf(['image']).isRequired,
+    src: _pt.string.isRequired,
+    alt: _pt.string.isRequired,
+    fit: _pt.oneOf(['fill', 'fit'])
+  }), _pt.shape({
+    type: _pt.oneOf(['custom']).isRequired,
+    content: _pt.node.isRequired
+  })]),
+  title: _pt.string,
+  content: _pt.node
+}))), _Panel$propTypes);
 //# sourceMappingURL=Panel.js.map

package/dist/Panel/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","names":["React","styled","BREAKPOINTS","COLORS","Quote","IconButton","SystemIcons","LinearProgress","LinearProgressType","useMediaMatch","Size","jsx","_jsx","jsxs","_jsxs","Wrapper","div","_templateObject","_taggedTemplateLiteral","props","getColor","theme","LARGE","Media","_templateObject2","Body","_templateObject3","Footer","_templateObject4","Panel","_currentItem$media","_currentItem$media2","currentImage","setCurrentImage","useState","isLargeScreen","replace","rest","order","undefined","media","title","content","items","type","_props","_objectWithoutProperties","_excluded","_props2","_excluded2","moveLeft","length","moveRight","currentItem","_objectSpread","className","concat","children","fit","src","alt","action","variant","shape","ChevronLeft","size","Large","Medium","value","max","Dots","ChevronRight","propTypes","_pt","oneOf","oneOfType","isRequired","string","node","arrayOf"],"sources":["../../src/Panel/Panel.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from \"styled-components\";\r\nimport {BREAKPOINTS, COLORS, Quote} from \"../styles\";\r\nimport {IconButton} from \"../Button\";\r\nimport {SystemIcons} from \"../icons\";\r\nimport {LinearProgress, LinearProgressType} from \"../LinearProgress\";\r\nimport {useMediaMatch} from \"rooks\";\r\nimport {Size} from \"../types\";\r\n\r\nconst Wrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  background: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n  min-height: 100%;\r\n  align-items: flex-end;\r\n  box-sizing: border-box;\r\n  overflow: hidden;\r\n\r\n  gap: 24px;\r\n  padding: 24px 32px 64px;\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    gap: 32px;\r\n    padding: 32px 64px 128px;\r\n  }\r\n\r\n  &.reverse {\r\n    align-items: flex-start;\r\n  }\r\n`;\r\n\r\nconst Media = styled.div`\r\n  display: flex;\r\n  width: 320px;\r\n  height: 200px;\r\n\r\n\r\n  img {\r\n    object-fit: contain;\r\n  }\r\n\r\n  img.fit {\r\n    object-fit: contain;\r\n  }\r\n\r\n  img.fill {\r\n    object-fit: cover;\r\n  }\r\n\r\n  max-width: 100%;\r\n\r\n  img {\r\n    max-width: 100%;\r\n    width: 320px;\r\n    height: 200px;\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    width: 488px;\r\n    height: 280px;\r\n\r\n    img {\r\n      width: 488px;\r\n      height: 280px;\r\n    }\r\n  }\r\n\r\n`;\r\n\r\nconst Body = styled.div`\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  text-align: center;\r\n\r\n  width: 100%;\r\n  max-width: 320px;\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    max-width: 488px;\r\n  }\r\n  \r\n  p:not(:first-of-type) {\r\n    flex: 1;\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  }\r\n\r\n\r\n`;\r\nconst Footer = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 100%;\r\n\r\n  max-width: 320px;\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    max-width: 488px;\r\n  }\r\n\r\n  .progress {\r\n    width: max-content;\r\n  }\r\n`;\r\n\r\nexport interface BasePanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'content'> {\r\n  type?: 'default' | 'carousel';\r\n}\r\n\r\nexport interface PanelContent {\r\n  media?: { type: 'image', src: string; alt: string, fit?: 'fill' | 'fit' } | { type: 'custom', content: React.ReactNode };\r\n  title?: string;\r\n  content?: React.ReactNode;\r\n}\r\n\r\nexport interface DefaultPanelProps extends BasePanelProps, PanelContent {\r\n  /**\r\n   * Optional. Specifies the type of the panel as 'default'.\r\n   * If not specified, the type defaults to 'default'.\r\n   */\r\n  type?: 'default';\r\n\r\n  /**\r\n   * Optional. Specifies the order of the content in the panel.\r\n   * It can be 'default' or 'reverse'. Defaults to 'default' if not specified.\r\n   */\r\n  order?: 'default' | 'reverse';\r\n}\r\n\r\nexport interface CarouselPanelProps extends BasePanelProps {\r\n  /**\r\n   * Required. Specifies the type of the panel as 'carousel'.\r\n   */\r\n  type: 'carousel';\r\n\r\n  /**\r\n   * Optional. Specifies the order of the content in the panel.\r\n   * It can be 'default' or 'reverse'. Defaults to 'default' if not specified.\r\n   */\r\n  order?: 'default' | 'reverse';\r\n\r\n  /**\r\n   * Optional. An array of PanelContent objects.\r\n   * Each object represents a slide in the carousel.\r\n   */\r\n  items?: PanelContent[];\r\n}\r\nexport type PanelProps = DefaultPanelProps | CarouselPanelProps;\r\n\r\nexport const Panel = (props: PanelProps) => {\r\n\r\n  const [currentImage, setCurrentImage] = React.useState(0);\r\n  const isLargeScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));\r\n\r\n  let rest: React.HTMLAttributes<HTMLDivElement> = {};\r\n  let order = undefined;\r\n  let media = undefined;\r\n  let title = '';\r\n  let content = undefined;\r\n  let items: PanelContent[] = [];\r\n\r\n\r\n  switch (props.type) {\r\n    case 'carousel':\r\n      ({items = [], order, ...rest} = props);\r\n      break;\r\n    case 'default':\r\n    default:\r\n      ({media, content, title = '', order, ...rest} = props)\r\n      break;\r\n  }\r\n\r\n\r\n  const moveLeft = () => {\r\n    props.type === 'carousel' && setCurrentImage(currentImage === 0 ? items.length - 1 : currentImage - 1);\r\n  }\r\n  const moveRight = () => {\r\n    props.type === 'carousel' && setCurrentImage(currentImage + 1 > items.length - 1 ? 0 : currentImage + 1);\r\n  }\r\n\r\n  const currentItem: PanelContent = props.type === 'carousel' ? items[currentImage] : {media, title, content};\r\n\r\n  return (\r\n    <Wrapper {...rest} className={`${rest.className || ''} ${order || ''} `}>\r\n      <Media>\r\n        {\r\n          currentItem.media?.type === 'image' &&\r\n            <img className={currentItem.media.fit} src={currentItem.media.src} alt={currentItem.media.alt}/>\r\n        }\r\n        {\r\n          currentItem.media?.type === 'custom' && currentItem.media.content\r\n        }\r\n      </Media>\r\n      <Body>\r\n        <Quote>{currentItem.title}</Quote>\r\n        <p>{currentItem.content}</p>\r\n      </Body>\r\n      {\r\n        props.type === 'carousel' &&\r\n          <Footer>\r\n              <IconButton action={moveLeft} variant={'secondary'} shape={'circular'}>\r\n                  <SystemIcons.ChevronLeft/>\r\n              </IconButton>\r\n              <LinearProgress size={isLargeScreen ? Size.Large : Size.Medium}\r\n                              className={'progress'}\r\n                              value={currentImage + 1}\r\n                              max={props.items!.length }\r\n                              type={LinearProgressType.Dots}/>\r\n              <IconButton action={moveRight} variant={'secondary'} shape={'circular'}>\r\n                  <SystemIcons.ChevronRight/>\r\n              </IconButton>\r\n          </Footer>\r\n      }\r\n    </Wrapper>\r\n  )\r\n};\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Panel.js","names":["React","styled","BREAKPOINTS","COLORS","Quote","IconButton","SystemIcons","LinearProgress","LinearProgressType","useMediaMatch","Size","jsx","_jsx","jsxs","_jsxs","Wrapper","div","_templateObject","_taggedTemplateLiteral","props","getColor","theme","LARGE","Media","_templateObject2","Body","_templateObject3","Footer","_templateObject4","Panel","_currentItem$media","_currentItem$media2","_React$useState","useState","_React$useState2","_slicedToArray","currentImage","setCurrentImage","isLargeScreen","replace","rest","order","undefined","media","title","content","items","type","_props","_props$items","_objectWithoutProperties","_excluded","_props2","_props2$title","_excluded2","moveLeft","length","moveRight","currentItem","_objectSpread","className","concat","children","fit","src","alt","action","variant","shape","ChevronLeft","size","Large","Medium","value","max","Dots","ChevronRight","propTypes","_Panel$propTypes","_pt","oneOf","oneOfType","isRequired","string","node","_defineProperty","arrayOf"],"sources":["../../src/Panel/Panel.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from \"styled-components\";\r\nimport {BREAKPOINTS, COLORS, Quote} from \"../styles\";\r\nimport {IconButton} from \"../Button\";\r\nimport {SystemIcons} from \"../icons\";\r\nimport {LinearProgress, LinearProgressType} from \"../LinearProgress\";\r\nimport {useMediaMatch} from \"rooks\";\r\nimport {Size} from \"../types\";\r\n\r\nconst Wrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  background: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n  min-height: 100%;\r\n  align-items: flex-end;\r\n  box-sizing: border-box;\r\n  overflow: hidden;\r\n\r\n  gap: 24px;\r\n  padding: 24px 32px 64px;\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    gap: 32px;\r\n    padding: 32px 64px 128px;\r\n  }\r\n\r\n  &.reverse {\r\n    align-items: flex-start;\r\n  }\r\n`;\r\n\r\nconst Media = styled.div`\r\n  display: flex;\r\n  width: 320px;\r\n  height: 200px;\r\n\r\n\r\n  img {\r\n    object-fit: contain;\r\n  }\r\n\r\n  img.fit {\r\n    object-fit: contain;\r\n  }\r\n\r\n  img.fill {\r\n    object-fit: cover;\r\n  }\r\n\r\n  max-width: 100%;\r\n\r\n  img {\r\n    max-width: 100%;\r\n    width: 320px;\r\n    height: 200px;\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    width: 488px;\r\n    height: 280px;\r\n\r\n    img {\r\n      width: 488px;\r\n      height: 280px;\r\n    }\r\n  }\r\n\r\n`;\r\n\r\nconst Body = styled.div`\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  text-align: center;\r\n\r\n  width: 100%;\r\n  max-width: 320px;\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    max-width: 488px;\r\n  }\r\n  \r\n  p:not(:first-of-type) {\r\n    flex: 1;\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  }\r\n\r\n\r\n`;\r\nconst Footer = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 100%;\r\n\r\n  max-width: 320px;\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    max-width: 488px;\r\n  }\r\n\r\n  .progress {\r\n    width: max-content;\r\n  }\r\n`;\r\n\r\nexport interface BasePanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'content'> {\r\n  type?: 'default' | 'carousel';\r\n}\r\n\r\nexport interface PanelContent {\r\n  media?: { type: 'image', src: string; alt: string, fit?: 'fill' | 'fit' } | { type: 'custom', content: React.ReactNode };\r\n  title?: string;\r\n  content?: React.ReactNode;\r\n}\r\n\r\nexport interface DefaultPanelProps extends BasePanelProps, PanelContent {\r\n  /**\r\n   * Optional. Specifies the type of the panel as 'default'.\r\n   * If not specified, the type defaults to 'default'.\r\n   */\r\n  type?: 'default';\r\n\r\n  /**\r\n   * Optional. Specifies the order of the content in the panel.\r\n   * It can be 'default' or 'reverse'. Defaults to 'default' if not specified.\r\n   */\r\n  order?: 'default' | 'reverse';\r\n}\r\n\r\nexport interface CarouselPanelProps extends BasePanelProps {\r\n  /**\r\n   * Required. Specifies the type of the panel as 'carousel'.\r\n   */\r\n  type: 'carousel';\r\n\r\n  /**\r\n   * Optional. Specifies the order of the content in the panel.\r\n   * It can be 'default' or 'reverse'. Defaults to 'default' if not specified.\r\n   */\r\n  order?: 'default' | 'reverse';\r\n\r\n  /**\r\n   * Optional. An array of PanelContent objects.\r\n   * Each object represents a slide in the carousel.\r\n   */\r\n  items?: PanelContent[];\r\n}\r\nexport type PanelProps = DefaultPanelProps | CarouselPanelProps;\r\n\r\nexport const Panel = (props: PanelProps) => {\r\n\r\n  const [currentImage, setCurrentImage] = React.useState(0);\r\n  const isLargeScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));\r\n\r\n  let rest: React.HTMLAttributes<HTMLDivElement> = {};\r\n  let order = undefined;\r\n  let media = undefined;\r\n  let title = '';\r\n  let content = undefined;\r\n  let items: PanelContent[] = [];\r\n\r\n\r\n  switch (props.type) {\r\n    case 'carousel':\r\n      ({items = [], order, ...rest} = props);\r\n      break;\r\n    case 'default':\r\n    default:\r\n      ({media, content, title = '', order, ...rest} = props)\r\n      break;\r\n  }\r\n\r\n\r\n  const moveLeft = () => {\r\n    props.type === 'carousel' && setCurrentImage(currentImage === 0 ? items.length - 1 : currentImage - 1);\r\n  }\r\n  const moveRight = () => {\r\n    props.type === 'carousel' && setCurrentImage(currentImage + 1 > items.length - 1 ? 0 : currentImage + 1);\r\n  }\r\n\r\n  const currentItem: PanelContent = props.type === 'carousel' ? items[currentImage] : {media, title, content};\r\n\r\n  return (\r\n    <Wrapper {...rest} className={`${rest.className || ''} ${order || ''} `}>\r\n      <Media>\r\n        {\r\n          currentItem.media?.type === 'image' &&\r\n            <img className={currentItem.media.fit} src={currentItem.media.src} alt={currentItem.media.alt}/>\r\n        }\r\n        {\r\n          currentItem.media?.type === 'custom' && currentItem.media.content\r\n        }\r\n      </Media>\r\n      <Body>\r\n        <Quote>{currentItem.title}</Quote>\r\n        <p>{currentItem.content}</p>\r\n      </Body>\r\n      {\r\n        props.type === 'carousel' &&\r\n          <Footer>\r\n              <IconButton action={moveLeft} variant={'secondary'} shape={'circular'}>\r\n                  <SystemIcons.ChevronLeft/>\r\n              </IconButton>\r\n              <LinearProgress size={isLargeScreen ? Size.Large : Size.Medium}\r\n                              className={'progress'}\r\n                              value={currentImage + 1}\r\n                              max={props.items!.length }\r\n                              type={LinearProgressType.Dots}/>\r\n              <IconButton action={moveRight} variant={'secondary'} shape={'circular'}>\r\n                  <SystemIcons.ChevronRight/>\r\n              </IconButton>\r\n          </Footer>\r\n      }\r\n    </Wrapper>\r\n  )\r\n};\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Panel/index.cjs

@@ -9,7 +9,7 @@ Object.keys(_Panel).forEach(function (key) {
   if (key in exports && exports[key] === _Panel[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
-    get: function () {
+    get: function get() {
       return _Panel[key];
     }
   });

package/dist/Panel/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["_Panel","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sources":["../../src/Panel/index.ts"],"sourcesContent":["export * from './Panel';\r\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,MAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,MAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,MAAA,CAAAK,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
+{"version":3,"file":"index.cjs","names":["_Panel","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sources":["../../src/Panel/index.ts"],"sourcesContent":["export * from './Panel';\r\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,MAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,MAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAT,MAAA,CAAAK,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}

package/dist/Popover/Popover.cjs

@@ -1,10 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.PopoverWrapper = exports.PopoverTopSectionContainer = exports.PopoverMiddleSectionContainer = exports.PopoverContainer = exports.PopoverBottomSectionContainer = void 0;
+exports["default"] = exports.PopoverWrapper = exports.PopoverTopSectionContainer = exports.PopoverMiddleSectionContainer = exports.PopoverContainer = exports.PopoverBottomSectionContainer = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
@@ -16,27 +18,82 @@ var _styles = require("../styles");
 var _types = require("../types");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const PopoverContainer = exports.PopoverContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), props => props.$size === _types.Size.Small ? '240px' : props.$size === _types.Size.Large ? '480px' : '360px', props => props.$size === _types.Size.Small ? '320px' : props.$size === _types.Size.Large ? '640px' : '480px', props => _.COLORS.getColor('white', props.theme), _styles.BOXSHADOWS.BOXSHADOW_CENTERED, _styles.Z_INDEXES.popover, props => props.$position == _types.Position.Bottom ? 'right: 50%; top: calc(100% + 16px); transform: translateX(50%);' : '', props => props.$position == _types.Position.Top ? 'right: 50%; bottom: calc(100% + 16px); transform: translateX(50%);' : '', props => props.$position == _types.Position.Left ? 'bottom: 50%; right: calc(100% + 16px); transform: translateY(50%);' : '', props => props.$position == _types.Position.Right ? 'bottom: 50%; left: calc(100% + 16px); transform: translateY(50%);' : '', props => props.$showArrowPointer ? renderArrowStyles(props.$position) : '');
-const PopoverTopSectionContainer = exports.PopoverTopSectionContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: ", ";\n  display: flex;\n"])), props => props.$size === _types.Size.Small ? '56px' : props.$size === _types.Size.Large ? '72px' : '64px');
-const PopoverMiddleSectionContainer = exports.PopoverMiddleSectionContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 8px;\n  height: ", ";\n  padding: ", ";\n  overflow-y: auto;\n  ", "\n"])), props => props.$size === _types.Size.Small ? '104px' : props.$size === _types.Size.Large ? '304px' : '208px', props => props.$size === _types.Size.Small ? '0 8px' : props.$size === _types.Size.Large ? '0 16px' : '0 12px', (0, _styles.scrollBarStyling)(_types.Size.Small));
-const PopoverBottomSectionContainer = exports.PopoverBottomSectionContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  height: ", ";  \n  display: flex;\n\n  .bottom-flex {\n    flex: 1;\n  }\n"])), props => props.$size === _types.Size.Small ? '64px' : props.$size === _types.Size.Large ? '88px' : '72px');
-const TextContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  margin: ", ";\n  flex-grow: 1;\n"])), props => renderMargins(props.$note, props.$size));
-const NoteContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), props => props.$size === _types.Size.Small ? (0, _styles.ComponentXXSStyling)(_.ComponentTextStyle.Regular, _.COLORS.getColor('neutral_600', props.theme)) : props.$size === _types.Size.Large ? (0, _styles.ComponentSStyling)(_.ComponentTextStyle.Regular, _.COLORS.getColor('neutral_600', props.theme)) : (0, _.ComponentXSStyling)(_.ComponentTextStyle.Regular, _.COLORS.getColor('neutral_600', props.theme)));
-const LabelContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), props => props.$size === _types.Size.Small ? (0, _styles.ComponentSStyling)(_.ComponentTextStyle.Bold, null) : props.$size === _types.Size.Large ? (0, _styles.ComponentLStyling)(_.ComponentTextStyle.Bold, null) : (0, _styles.ComponentMStyling)(_.ComponentTextStyle.Bold, null));
-const CloseButtonContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  margin: ", ";\n"])), props => props.$size === _types.Size.Small ? '4px 16px 4px 0' : props.$size === _types.Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0');
-const TextButtonContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  margin: ", ";\n"])), props => props.$size === _types.Size.Small ? '8px 0 8px 16px' : props.$size === _types.Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px');
-const IconButtonContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  margin: ", ";\n  display: flex;\n"])), props => props.$size === _types.Size.Small ? '8px 16px 8px 0' : props.$size === _types.Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0');
-const PopoverWrapper = exports.PopoverWrapper = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n\n  .pointer-space {\n    height: ", ";\n    width: ", ";\n    position: absolute;\n\n    ", ";\n    ", ";\n\n    ", ";\n    ", ";\n  }\n\n  ", "\n"])), props => props.$position === _types.Position.Top || props.$position === _types.Position.Bottom ? '16px' : '100%', props => props.$position === _types.Position.Left || props.$position === _types.Position.Right ? '16px' : '100%', props => props.$position === _types.Position.Left ? 'right:100%; bottom: 0%' : '', props => props.$position === _types.Position.Right ? 'left:100%; bottom: 0%' : '', props => props.$position === _types.Position.Top ? 'bottom: 100%' : '', props => props.$position === _types.Position.Bottom ? 'top: 100%' : '', props => 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    }"));
-const renderMargins = (isNotePresent, size) => {
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var PopoverContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\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 === _types.Size.Small ? '240px' : props.$size === _types.Size.Large ? '480px' : '360px';
+}, function (props) {
+  return props.$size === _types.Size.Small ? '320px' : props.$size === _types.Size.Large ? '640px' : '480px';
+}, function (props) {
+  return _.COLORS.getColor('white', props.theme);
+}, _styles.BOXSHADOWS.BOXSHADOW_CENTERED, _styles.Z_INDEXES.popover, function (props) {
+  return props.$position == _types.Position.Bottom ? 'right: 50%; top: calc(100% + 16px); transform: translateX(50%);' : '';
+}, function (props) {
+  return props.$position == _types.Position.Top ? 'right: 50%; bottom: calc(100% + 16px); transform: translateX(50%);' : '';
+}, function (props) {
+  return props.$position == _types.Position.Left ? 'bottom: 50%; right: calc(100% + 16px); transform: translateY(50%);' : '';
+}, function (props) {
+  return props.$position == _types.Position.Right ? 'bottom: 50%; left: calc(100% + 16px); transform: translateY(50%);' : '';
+}, function (props) {
+  return props.$showArrowPointer ? renderArrowStyles(props.$position) : '';
+});
+exports.PopoverContainer = PopoverContainer;
+var PopoverTopSectionContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  height: ", ";\n  display: flex;\n"])), function (props) {
+  return props.$size === _types.Size.Small ? '56px' : props.$size === _types.Size.Large ? '72px' : '64px';
+});
+exports.PopoverTopSectionContainer = PopoverTopSectionContainer;
+var PopoverMiddleSectionContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  margin: 8px;\n  height: ", ";\n  padding: ", ";\n  overflow-y: auto;\n  ", "\n"])), function (props) {
+  return props.$size === _types.Size.Small ? '104px' : props.$size === _types.Size.Large ? '304px' : '208px';
+}, function (props) {
+  return props.$size === _types.Size.Small ? '0 8px' : props.$size === _types.Size.Large ? '0 16px' : '0 12px';
+}, (0, _styles.scrollBarStyling)(_types.Size.Small));
+exports.PopoverMiddleSectionContainer = PopoverMiddleSectionContainer;
+var PopoverBottomSectionContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  height: ", ";  \n  display: flex;\n\n  .bottom-flex {\n    flex: 1;\n  }\n"])), function (props) {
+  return props.$size === _types.Size.Small ? '64px' : props.$size === _types.Size.Large ? '88px' : '72px';
+});
+exports.PopoverBottomSectionContainer = PopoverBottomSectionContainer;
+var TextContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  margin: ", ";\n  flex-grow: 1;\n"])), function (props) {
+  return renderMargins(props.$note, props.$size);
+});
+var NoteContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n"])), function (props) {
+  return props.$size === _types.Size.Small ? (0, _styles.ComponentXXSStyling)(_.ComponentTextStyle.Regular, _.COLORS.getColor('neutral_600', props.theme)) : props.$size === _types.Size.Large ? (0, _styles.ComponentSStyling)(_.ComponentTextStyle.Regular, _.COLORS.getColor('neutral_600', props.theme)) : (0, _.ComponentXSStyling)(_.ComponentTextStyle.Regular, _.COLORS.getColor('neutral_600', props.theme));
+});
+var LabelContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n"])), function (props) {
+  return props.$size === _types.Size.Small ? (0, _styles.ComponentSStyling)(_.ComponentTextStyle.Bold, null) : props.$size === _types.Size.Large ? (0, _styles.ComponentLStyling)(_.ComponentTextStyle.Bold, null) : (0, _styles.ComponentMStyling)(_.ComponentTextStyle.Bold, null);
+});
+var CloseButtonContainer = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  margin: ", ";\n"])), function (props) {
+  return props.$size === _types.Size.Small ? '4px 16px 4px 0' : props.$size === _types.Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0';
+});
+var TextButtonContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  margin: ", ";\n"])), function (props) {
+  return props.$size === _types.Size.Small ? '8px 0 8px 16px' : props.$size === _types.Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px';
+});
+var IconButtonContainer = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  margin: ", ";\n  display: flex;\n"])), function (props) {
+  return props.$size === _types.Size.Small ? '8px 16px 8px 0' : props.$size === _types.Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0';
+});
+var PopoverWrapper = _styledComponents["default"].div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\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 === _types.Position.Top || props.$position === _types.Position.Bottom ? '16px' : '100%';
+}, function (props) {
+  return props.$position === _types.Position.Left || props.$position === _types.Position.Right ? '16px' : '100%';
+}, function (props) {
+  return props.$position === _types.Position.Left ? 'right:100%; bottom: 0%' : '';
+}, function (props) {
+  return props.$position === _types.Position.Right ? 'left:100%; bottom: 0%' : '';
+}, function (props) {
+  return props.$position === _types.Position.Top ? 'bottom: 100%' : '';
+}, function (props) {
+  return props.$position === _types.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    }");
+});
+exports.PopoverWrapper = PopoverWrapper;
+var renderMargins = function renderMargins(isNotePresent, size) {
   if (isNotePresent) {
     return size === _types.Size.Small ? '10px 16px' : size === _types.Size.Large ? '14px 24px' : '12px 20px';
   } else {
     return size === _types.Size.Small ? '18px 16px' : size === _types.Size.Large ? '24px' : '20px';
   }
 };
-const renderArrowStyles = position => {
+var renderArrowStyles = function renderArrowStyles(position) {
   if (position === _types.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);";
   }
@@ -54,29 +111,33 @@ const renderArrowStyles = position => {
 ;
 ;
 ;
-const Popover = _ref => {
+var Popover = function Popover(_ref) {
   var _bottomSectionProps$t, _bottomSectionProps$i;
-  let {
-    size = _types.Size.Medium,
-    topSectionProps,
-    bottomSectionProps,
-    mainContent,
-    children,
-    position,
-    showOnClick = false,
-    showArrowPointer = false
-  } = _ref;
-  const [showPopover, setShowPopover] = React.useState(false);
-  const theme = (0, _styledComponents.useTheme)();
-  const popoverRef = React.useRef();
-  React.useEffect(() => {
-    const checkIfClickedOutside = e => {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? _types.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 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    showPopover = _React$useState2[0],
+    setShowPopover = _React$useState2[1];
+  var theme = (0, _styledComponents.useTheme)();
+  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 () => {
+    return function () {
       document.removeEventListener('mousedown', checkIfClickedOutside);
     };
   }, [showPopover]);
@@ -105,7 +166,9 @@ const Popover = _ref => {
           $size: size,
           "data-testid": 'closeBtn',
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
-            action: () => setShowPopover(false),
+            action: function action() {
+              return setShowPopover(false);
+            },
             useTransparentBackground: true,
             iconColor: _.COLORS.getColor('neutral_600', theme),
             variant: "secondary",
@@ -133,17 +196,21 @@ const Popover = _ref => {
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButtonContainer, {
           $size: size,
           "data-testid": 'iconBtn',
-          children: bottomSectionProps === null || bottomSectionProps === void 0 || (_bottomSectionProps$i = bottomSectionProps.iconButtons) === null || _bottomSectionProps$i === void 0 ? void 0 : _bottomSectionProps$i.map(iconButton => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
-            action: iconButton.action,
-            variant: "secondary",
-            shape: "circular",
-            useTransparentBackground: true,
-            children: iconButton.icon
-          }))
+          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__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+              action: iconButton.action,
+              variant: "secondary",
+              shape: "circular",
+              useTransparentBackground: true,
+              children: iconButton.icon
+            });
+          })
         })]
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      onClick: () => showOnClick && setShowPopover(!showPopover),
+      onClick: function onClick() {
+        return showOnClick && setShowPopover(!showPopover);
+      },
       children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "pointer-space"
       })]
@@ -151,26 +218,27 @@ const Popover = _ref => {
   });
 };
 Popover.propTypes = {
-  topSectionProps: _propTypes.default.shape({
-    text: _propTypes.default.string.isRequired,
-    note: _propTypes.default.string
+  topSectionProps: _propTypes["default"].shape({
+    text: _propTypes["default"].string.isRequired,
+    note: _propTypes["default"].string
   }),
-  bottomSectionProps: _propTypes.default.shape({
-    iconButtons: _propTypes.default.arrayOf(_propTypes.default.shape({
-      icon: _propTypes.default.node.isRequired,
-      action: _propTypes.default.func.isRequired,
-      label: _propTypes.default.string
+  bottomSectionProps: _propTypes["default"].shape({
+    iconButtons: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+      icon: _propTypes["default"].node.isRequired,
+      action: _propTypes["default"].func.isRequired,
+      label: _propTypes["default"].string
     })),
-    textButton: _propTypes.default.shape({
-      icon: _propTypes.default.node.isRequired,
-      action: _propTypes.default.func.isRequired,
-      label: _propTypes.default.string
+    textButton: _propTypes["default"].shape({
+      icon: _propTypes["default"].node.isRequired,
+      action: _propTypes["default"].func.isRequired,
+      label: _propTypes["default"].string
     })
   }),
-  mainContent: _propTypes.default.node.isRequired,
-  children: _propTypes.default.node.isRequired,
-  showOnClick: _propTypes.default.bool.isRequired,
-  showArrowPointer: _propTypes.default.bool
+  mainContent: _propTypes["default"].node.isRequired,
+  children: _propTypes["default"].node.isRequired,
+  showOnClick: _propTypes["default"].bool.isRequired,
+  showArrowPointer: _propTypes["default"].bool
 };
-var _default = exports.default = Popover;
+var _default = Popover;
+exports["default"] = _default;
 //# sourceMappingURL=Popover.cjs.map