@laerdal/life-react-components 1.8.0-dev.9 → 1.9.0

package/dist/Modals/ModalNote.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Modals/ModalNote.tsx"],"names":["ModalNote","note","icon","size","state","stateVal","toLowerCase","COLORS","correct_500","warning_500","primary_500"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;AASO,IAAMA,SAA6C,GAAG,SAAhDA,SAAgD,OAA6C;AAAA,MAA1CC,IAA0C,QAA1CA,IAA0C;AAAA,MAApCC,IAAoC,QAApCA,IAAoC;AAAA,MAA9BC,IAA8B,QAA9BA,IAA8B;AAAA,wBAAxBC,KAAwB;AAAA,MAAxBA,KAAwB,2BAAhB,SAAgB;AACxG,MAAMC,QAAQ,GAAGD,KAAK,CAACE,WAAN,EAAjB;;AAEA,UAAQD,QAAR;AACE,SAAK,UAAL;AACE,0BACE,sBAAC,6BAAD;AAAkB,QAAA,KAAK,EAAEA,QAAzB;AAAmC,QAAA,IAAI,EAAEF,IAAzC;AAAA,mBACGD,IAAI,GAAGA,IAAH,gBAAU,qBAAC,0BAAD;AAAe,UAAA,KAAK,EAAEK,SAAOC;AAA7B,UADjB,eAEE;AAAA,oBAAOP;AAAP,UAFF;AAAA,QADF;;AAOF,SAAK,SAAL;AACE,0BACE,sBAAC,6BAAD;AAAkB,QAAA,KAAK,EAAEI,QAAzB;AAAmC,QAAA,IAAI,EAAEF,IAAzC;AAAA,mBACGD,IAAI,GAAGA,IAAH,gBAAU,qBAAC,6BAAD;AAAkB,UAAA,KAAK,EAAEK,SAAOE;AAAhC,UADjB,eAEE;AAAA,oBAAOR;AAAP,UAFF;AAAA,QADF;;AAOF,SAAK,UAAL;AACE,0BACE,sBAAC,6BAAD;AAAkB,QAAA,KAAK,EAAEI,QAAzB;AAAmC,QAAA,IAAI,EAAEF,IAAzC;AAAA,mBACGD,IAAI,GAAGA,IAAH,gBAAU,qBAAC,6BAAD;AAAkB,UAAA,KAAK,EAAEK,SAAOE;AAAhC,UADjB,eAEE;AAAA,oBAAOR;AAAP,UAFF;AAAA,QADF;;AAOF;AACE,0BACE,sBAAC,6BAAD;AAAkB,QAAA,KAAK,EAAEI,QAAzB;AAAmC,QAAA,IAAI,EAAEF,IAAzC;AAAA,mBACGD,IAAI,GAAGA,IAAH,gBAAU,qBAAC,wBAAD;AAAa,UAAA,KAAK,EAAEK,SAAOG,WAA3B;AAAwC,UAAA,SAAS,EAAEP;AAAnD,UADjB,eAEE;AAAA,oBAAOF;AAAP,UAFF;AAAA,QADF;AA1BJ;AAiCD,CApCM;;;;AANLA,EAAAA,I;AACAC,EAAAA,I;AACAE,EAAAA,K;AACAD,EAAAA,I;;eAyCaH,S","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '..';\nimport { CheckComplete, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { ModalNoteSection } from './ModalStyles';\n\ninterface NoteProps {\n  note: string | React.ReactNode;\n  icon?: React.ReactNode;\n  state?: string;\n  size?: string;\n}\n\nexport const ModalNote: React.FunctionComponent<NoteProps> = ({ note, icon, size, state = 'neutral' }) => {\n  const stateVal = state.toLowerCase();\n\n  switch (stateVal) {\n    case 'positive':\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <CheckComplete color={COLORS.correct_500} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n\n    case 'warning':\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <TechnicalWarning color={COLORS.warning_500} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n\n    case 'critical':\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <TechnicalWarning color={COLORS.warning_500} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n\n    default:\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <Information color={COLORS.primary_500} className={size} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n  }\n};\n\nexport default ModalNote;\n"],"file":"ModalNote.cjs"}
+{"version":3,"sources":["../../src/Modals/ModalNote.tsx"],"names":["ModalNote","note","icon","size","state","stateVal","toLowerCase","COLORS","correct_500","warning_500","primary_500"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;AASO,IAAMA,SAA6C,GAAG,SAAhDA,SAAgD,OAA6C;AAAA,MAA1CC,IAA0C,QAA1CA,IAA0C;AAAA,MAApCC,IAAoC,QAApCA,IAAoC;AAAA,MAA9BC,IAA8B,QAA9BA,IAA8B;AAAA,wBAAxBC,KAAwB;AAAA,MAAxBA,KAAwB,2BAAhB,SAAgB;AACxG,MAAMC,QAAQ,GAAGD,KAAK,CAACE,WAAN,EAAjB;;AAEA,UAAQD,QAAR;AACE,SAAK,UAAL;AACE,0BACE,sBAAC,6BAAD;AAAkB,QAAA,KAAK,EAAEA,QAAzB;AAAmC,QAAA,IAAI,EAAEF,IAAzC;AAAA,mBACGD,IAAI,GAAGA,IAAH,gBAAU,qBAAC,sBAAD;AAAW,UAAA,KAAK,EAAEK,SAAOC;AAAzB,UADjB,eAEE;AAAA,oBAAOP;AAAP,UAFF;AAAA,QADF;;AAOF,SAAK,SAAL;AACE,0BACE,sBAAC,6BAAD;AAAkB,QAAA,KAAK,EAAEI,QAAzB;AAAmC,QAAA,IAAI,EAAEF,IAAzC;AAAA,mBACGD,IAAI,GAAGA,IAAH,gBAAU,qBAAC,6BAAD;AAAkB,UAAA,KAAK,EAAEK,SAAOE;AAAhC,UADjB,eAEE;AAAA,oBAAOR;AAAP,UAFF;AAAA,QADF;;AAOF,SAAK,UAAL;AACE,0BACE,sBAAC,6BAAD;AAAkB,QAAA,KAAK,EAAEI,QAAzB;AAAmC,QAAA,IAAI,EAAEF,IAAzC;AAAA,mBACGD,IAAI,GAAGA,IAAH,gBAAU,qBAAC,6BAAD;AAAkB,UAAA,KAAK,EAAEK,SAAOE;AAAhC,UADjB,eAEE;AAAA,oBAAOR;AAAP,UAFF;AAAA,QADF;;AAOF;AACE,0BACE,sBAAC,6BAAD;AAAkB,QAAA,KAAK,EAAEI,QAAzB;AAAmC,QAAA,IAAI,EAAEF,IAAzC;AAAA,mBACGD,IAAI,GAAGA,IAAH,gBAAU,qBAAC,wBAAD;AAAa,UAAA,KAAK,EAAEK,SAAOG,WAA3B;AAAwC,UAAA,SAAS,EAAEP;AAAnD,UADjB,eAEE;AAAA,oBAAOF;AAAP,UAFF;AAAA,QADF;AA1BJ;AAiCD,CApCM;;;;AANLA,EAAAA,I;AACAC,EAAAA,I;AACAE,EAAAA,K;AACAD,EAAAA,I;;eAyCaH,S","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '..';\nimport { CheckMark, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { ModalNoteSection } from './ModalStyles';\n\ninterface NoteProps {\n  note: string | React.ReactNode;\n  icon?: React.ReactNode;\n  state?: string;\n  size?: string;\n}\n\nexport const ModalNote: React.FunctionComponent<NoteProps> = ({ note, icon, size, state = 'neutral' }) => {\n  const stateVal = state.toLowerCase();\n\n  switch (stateVal) {\n    case 'positive':\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <CheckMark color={COLORS.correct_500} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n\n    case 'warning':\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <TechnicalWarning color={COLORS.warning_500} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n\n    case 'critical':\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <TechnicalWarning color={COLORS.warning_500} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n\n    default:\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <Information color={COLORS.primary_500} className={size} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n  }\n};\n\nexport default ModalNote;\n"],"file":"ModalNote.cjs"}

package/dist/Modals/ModalNote.js

@@ -1,7 +1,7 @@
 import _pt from "prop-types";
 import * as React from 'react';
 import { COLORS } from '..';
-import { CheckComplete, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';
+import { CheckMark, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';
 import { ModalNoteSection } from './ModalStyles';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -18,7 +18,7 @@ export var ModalNote = function ModalNote(_ref) {
       return /*#__PURE__*/_jsxs(ModalNoteSection, {
         state: stateVal,
         size: size,
-        children: [icon ? icon : /*#__PURE__*/_jsx(CheckComplete, {
+        children: [icon ? icon : /*#__PURE__*/_jsx(CheckMark, {
           color: COLORS.correct_500
         }), /*#__PURE__*/_jsx("span", {
           children: note

package/dist/Modals/ModalNote.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Modals/ModalNote.tsx"],"names":["React","COLORS","CheckComplete","Information","TechnicalWarning","ModalNoteSection","ModalNote","note","icon","size","state","stateVal","toLowerCase","correct_500","warning_500","primary_500"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,MAAT,QAAuB,IAAvB;AACA,SAASC,aAAT,EAAwBC,WAAxB,EAAqCC,gBAArC,QAA6D,kCAA7D;AACA,SAASC,gBAAT,QAAiC,eAAjC;;;AASA,OAAO,IAAMC,SAA6C,GAAG,SAAhDA,SAAgD,OAA6C;AAAA,MAA1CC,IAA0C,QAA1CA,IAA0C;AAAA,MAApCC,IAAoC,QAApCA,IAAoC;AAAA,MAA9BC,IAA8B,QAA9BA,IAA8B;AAAA,wBAAxBC,KAAwB;AAAA,MAAxBA,KAAwB,2BAAhB,SAAgB;AACxG,MAAMC,QAAQ,GAAGD,KAAK,CAACE,WAAN,EAAjB;;AAEA,UAAQD,QAAR;AACE,SAAK,UAAL;AACE,0BACE,MAAC,gBAAD;AAAkB,QAAA,KAAK,EAAEA,QAAzB;AAAmC,QAAA,IAAI,EAAEF,IAAzC;AAAA,mBACGD,IAAI,GAAGA,IAAH,gBAAU,KAAC,aAAD;AAAe,UAAA,KAAK,EAAEP,MAAM,CAACY;AAA7B,UADjB,eAEE;AAAA,oBAAON;AAAP,UAFF;AAAA,QADF;;AAOF,SAAK,SAAL;AACE,0BACE,MAAC,gBAAD;AAAkB,QAAA,KAAK,EAAEI,QAAzB;AAAmC,QAAA,IAAI,EAAEF,IAAzC;AAAA,mBACGD,IAAI,GAAGA,IAAH,gBAAU,KAAC,gBAAD;AAAkB,UAAA,KAAK,EAAEP,MAAM,CAACa;AAAhC,UADjB,eAEE;AAAA,oBAAOP;AAAP,UAFF;AAAA,QADF;;AAOF,SAAK,UAAL;AACE,0BACE,MAAC,gBAAD;AAAkB,QAAA,KAAK,EAAEI,QAAzB;AAAmC,QAAA,IAAI,EAAEF,IAAzC;AAAA,mBACGD,IAAI,GAAGA,IAAH,gBAAU,KAAC,gBAAD;AAAkB,UAAA,KAAK,EAAEP,MAAM,CAACa;AAAhC,UADjB,eAEE;AAAA,oBAAOP;AAAP,UAFF;AAAA,QADF;;AAOF;AACE,0BACE,MAAC,gBAAD;AAAkB,QAAA,KAAK,EAAEI,QAAzB;AAAmC,QAAA,IAAI,EAAEF,IAAzC;AAAA,mBACGD,IAAI,GAAGA,IAAH,gBAAU,KAAC,WAAD;AAAa,UAAA,KAAK,EAAEP,MAAM,CAACc,WAA3B;AAAwC,UAAA,SAAS,EAAEN;AAAnD,UADjB,eAEE;AAAA,oBAAOF;AAAP,UAFF;AAAA,QADF;AA1BJ;AAiCD,CApCM;;AANLA,EAAAA,I;AACAC,EAAAA,I;AACAE,EAAAA,K;AACAD,EAAAA,I;;AAyCF,eAAeH,SAAf","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '..';\nimport { CheckComplete, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { ModalNoteSection } from './ModalStyles';\n\ninterface NoteProps {\n  note: string | React.ReactNode;\n  icon?: React.ReactNode;\n  state?: string;\n  size?: string;\n}\n\nexport const ModalNote: React.FunctionComponent<NoteProps> = ({ note, icon, size, state = 'neutral' }) => {\n  const stateVal = state.toLowerCase();\n\n  switch (stateVal) {\n    case 'positive':\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <CheckComplete color={COLORS.correct_500} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n\n    case 'warning':\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <TechnicalWarning color={COLORS.warning_500} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n\n    case 'critical':\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <TechnicalWarning color={COLORS.warning_500} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n\n    default:\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <Information color={COLORS.primary_500} className={size} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n  }\n};\n\nexport default ModalNote;\n"],"file":"ModalNote.js"}
+{"version":3,"sources":["../../src/Modals/ModalNote.tsx"],"names":["React","COLORS","CheckMark","Information","TechnicalWarning","ModalNoteSection","ModalNote","note","icon","size","state","stateVal","toLowerCase","correct_500","warning_500","primary_500"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,MAAT,QAAuB,IAAvB;AACA,SAASC,SAAT,EAAoBC,WAApB,EAAiCC,gBAAjC,QAAyD,kCAAzD;AACA,SAASC,gBAAT,QAAiC,eAAjC;;;AASA,OAAO,IAAMC,SAA6C,GAAG,SAAhDA,SAAgD,OAA6C;AAAA,MAA1CC,IAA0C,QAA1CA,IAA0C;AAAA,MAApCC,IAAoC,QAApCA,IAAoC;AAAA,MAA9BC,IAA8B,QAA9BA,IAA8B;AAAA,wBAAxBC,KAAwB;AAAA,MAAxBA,KAAwB,2BAAhB,SAAgB;AACxG,MAAMC,QAAQ,GAAGD,KAAK,CAACE,WAAN,EAAjB;;AAEA,UAAQD,QAAR;AACE,SAAK,UAAL;AACE,0BACE,MAAC,gBAAD;AAAkB,QAAA,KAAK,EAAEA,QAAzB;AAAmC,QAAA,IAAI,EAAEF,IAAzC;AAAA,mBACGD,IAAI,GAAGA,IAAH,gBAAU,KAAC,SAAD;AAAW,UAAA,KAAK,EAAEP,MAAM,CAACY;AAAzB,UADjB,eAEE;AAAA,oBAAON;AAAP,UAFF;AAAA,QADF;;AAOF,SAAK,SAAL;AACE,0BACE,MAAC,gBAAD;AAAkB,QAAA,KAAK,EAAEI,QAAzB;AAAmC,QAAA,IAAI,EAAEF,IAAzC;AAAA,mBACGD,IAAI,GAAGA,IAAH,gBAAU,KAAC,gBAAD;AAAkB,UAAA,KAAK,EAAEP,MAAM,CAACa;AAAhC,UADjB,eAEE;AAAA,oBAAOP;AAAP,UAFF;AAAA,QADF;;AAOF,SAAK,UAAL;AACE,0BACE,MAAC,gBAAD;AAAkB,QAAA,KAAK,EAAEI,QAAzB;AAAmC,QAAA,IAAI,EAAEF,IAAzC;AAAA,mBACGD,IAAI,GAAGA,IAAH,gBAAU,KAAC,gBAAD;AAAkB,UAAA,KAAK,EAAEP,MAAM,CAACa;AAAhC,UADjB,eAEE;AAAA,oBAAOP;AAAP,UAFF;AAAA,QADF;;AAOF;AACE,0BACE,MAAC,gBAAD;AAAkB,QAAA,KAAK,EAAEI,QAAzB;AAAmC,QAAA,IAAI,EAAEF,IAAzC;AAAA,mBACGD,IAAI,GAAGA,IAAH,gBAAU,KAAC,WAAD;AAAa,UAAA,KAAK,EAAEP,MAAM,CAACc,WAA3B;AAAwC,UAAA,SAAS,EAAEN;AAAnD,UADjB,eAEE;AAAA,oBAAOF;AAAP,UAFF;AAAA,QADF;AA1BJ;AAiCD,CApCM;;AANLA,EAAAA,I;AACAC,EAAAA,I;AACAE,EAAAA,K;AACAD,EAAAA,I;;AAyCF,eAAeH,SAAf","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '..';\nimport { CheckMark, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { ModalNoteSection } from './ModalStyles';\n\ninterface NoteProps {\n  note: string | React.ReactNode;\n  icon?: React.ReactNode;\n  state?: string;\n  size?: string;\n}\n\nexport const ModalNote: React.FunctionComponent<NoteProps> = ({ note, icon, size, state = 'neutral' }) => {\n  const stateVal = state.toLowerCase();\n\n  switch (stateVal) {\n    case 'positive':\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <CheckMark color={COLORS.correct_500} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n\n    case 'warning':\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <TechnicalWarning color={COLORS.warning_500} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n\n    case 'critical':\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <TechnicalWarning color={COLORS.warning_500} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n\n    default:\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <Information color={COLORS.primary_500} className={size} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n  }\n};\n\nexport default ModalNote;\n"],"file":"ModalNote.js"}

package/dist/Popover/Popover.cjs

@@ -31,7 +31,7 @@ var _types = require("../types");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -42,21 +42,21 @@ var Container = _styledComponents.default.div(_templateObject || (_templateObjec
 }, function (props) {
   return props.size === _types.Size.Small ? '344px' : props.size === _types.Size.Large ? '624px' : '464px';
 }, _.COLORS.white, _styles.BOXSHADOWS.BOXSHADOW_CENTERED, _styles.Z_INDEXES.popover, function (props) {
-  return props.position == 'bottom' ? 'right: 50%; top: calc(100% + 8px); transform: translateX(50%);' : '';
+  return props.position == _types.Position.Bottom ? 'right: 50%; top: calc(100% + 8px); transform: translateX(50%);' : '';
 }, function (props) {
-  return props.position == 'top' ? 'right: 50%; bottom: calc(100% + 8px); transform: translateX(50%);' : '';
+  return props.position == _types.Position.Top ? 'right: 50%; bottom: calc(100% + 8px); transform: translateX(50%);' : '';
 }, function (props) {
-  return props.position == 'left' ? 'bottom: 50%; right: calc(100% + 8px); transform: translateY(50%);' : '';
+  return props.position == _types.Position.Left ? 'bottom: 50%; right: calc(100% + 8px); transform: translateY(50%);' : '';
 }, function (props) {
-  return props.position == 'right' ? 'bottom: 50%; left: calc(100% + 8px); transform: translateY(50%);' : '';
+  return props.position == _types.Position.Right ? 'bottom: 50%; left: calc(100% + 8px); transform: translateY(50%);' : '';
 }, _.COLORS.white, function (props) {
-  return props.position == 'bottom' ? 'right: 50%; bottom: 100%; transform: translateY(50%) rotate(45deg);' : '';
+  return props.position == _types.Position.Bottom ? 'right: 50%; bottom: 100%; transform: translateY(50%) rotate(45deg);' : '';
 }, function (props) {
-  return props.position == 'top' ? 'right: 50%; top: 100%; transform: translateY(-50%) rotate(45deg);' : '';
+  return props.position == _types.Position.Top ? 'right: 50%; top: 100%; transform: translateY(-50%) rotate(45deg);' : '';
 }, function (props) {
-  return props.position == 'left' ? 'bottom: 50%; left: 100%; transform: translateX(-50%) rotate(45deg);' : '';
+  return props.position == _types.Position.Left ? 'bottom: 50%; left: 100%; transform: translateX(-50%) rotate(45deg);' : '';
 }, function (props) {
-  return props.position == 'right' ? 'bottom: 50%; right: 100%; transform: translateX(50%) rotate(45deg);' : '';
+  return props.position == _types.Position.Right ? 'bottom: 50%; right: 100%; transform: translateX(50%) rotate(45deg);' : '';
 });
 
 var TopContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: ", ";\n  width: ", ";\n  display: flex;\n"])), function (props) {
@@ -65,58 +65,60 @@ var TopContainer = _styledComponents.default.div(_templateObject2 || (_templateO
   return props.size === _types.Size.Small ? '344px' : props.size === _types.Size.Large ? '624px' : '464px';
 });
 
-var MiddleContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  height: ", ";\n  width: ", ";\n  padding: ", ";\n  overflow-y: auto;\n  ", "\n"])), function (props) {
+var MainContentWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", ";\n"])), function (props) {
+  return props.size === _types.Size.Small ? '8px 0 8px 16px' : props.size === _types.Size.Large ? '8px 0 8px 24px' : '8px 0 8px 20px';
+});
+
+var MiddleContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  height: ", ";\n  width: ", ";\n  padding-right: ", ";\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 ? '312px' : props.size === _types.Size.Large ? '576px' : '424px';
 }, function (props) {
-  return props.size === _types.Size.Small ? '8px 16px' : props.size === _types.Size.Large ? '8px 24px' : '8px 20px';
-}, function (props) {
-  return (0, _styles.scrollBarStyling)(props.size === _types.Size.Small ? _types.Size.Small : _types.Size.Medium);
-});
+  return props.size === _types.Size.Small ? '6px' : props.size === _types.Size.Large ? '14px' : '10px';
+}, (0, _styles.scrollBarStyling)(_types.Size.Small));
 
-var BottomContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  height: ", ";\n  width: ", ";\n  display: flex;\n\n  .bottom-flex {\n    flex: 1;\n  }\n"])), function (props) {
+var BottomContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  height: ", ";\n  width: ", ";\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';
 }, function (props) {
   return props.size === _types.Size.Small ? '344px' : props.size === _types.Size.Large ? '624px' : '464px';
 });
 
-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) {
+var TextContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (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) {
+var NoteContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), function (props) {
   return props.size === _types.Size.Small ? (0, _styles.ComponentXXSStyling)(_.ComponentTextStyle.Regular, _.COLORS.neutral_600) : props.size === _types.Size.Large ? (0, _styles.ComponentSStyling)(_.ComponentTextStyle.Regular, _.COLORS.neutral_600) : (0, _.ComponentXSStyling)(_.ComponentTextStyle.Regular, _.COLORS.neutral_600);
 });
 
-var LabelContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), function (props) {
+var LabelContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (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) {
+var CloseButtonContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (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) {
+var TextButtonContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (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) {
+var IconButtonContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (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 Wrapper = _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 === 'top' || props.position === 'bottom' ? '8px' : '100%';
+var Wrapper = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (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 ? '8px' : '100%';
 }, function (props) {
-  return props.position === 'left' || props.position === 'right' ? '8px' : '100%';
+  return props.position === _types.Position.Left || props.position === _types.Position.Right ? '8px' : '100%';
 }, function (props) {
-  return props.position === 'left' ? 'right:100%; bottom: 0%' : '';
+  return props.position === _types.Position.Left ? 'right:100%; bottom: 0%' : '';
 }, function (props) {
-  return props.position === 'right' ? 'left:100%; bottom: 0%' : '';
+  return props.position === _types.Position.Right ? 'left:100%; bottom: 0%' : '';
 }, function (props) {
-  return props.position === 'top' ? 'bottom: 100%' : '';
+  return props.position === _types.Position.Top ? 'bottom: 100%' : '';
 }, function (props) {
-  return props.position === 'bottom' ? 'top: 100%' : '';
+  return props.position === _types.Position.Bottom ? 'top: 100%' : '';
 }, function (props) {
   return props.showOnClick ? "".concat(Container, " {\n        visibility: ").concat(props.showPopover ? 'visible' : 'hidden', ";\n        opacity: ").concat(props.showPopover ? '1' : '0', ";\n    }\n    cursor: pointer;") : "&:hover {\n      ".concat(Container, " {\n        visibility: visible;\n        opacity: 1;\n      }\n    }");
 });
@@ -147,6 +149,19 @@ var Popover = function Popover(_ref) {
       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__*/(0, _jsxRuntime.jsxs)(Wrapper, {
     position: position,
     showOnClick: showOnClick,
@@ -154,6 +169,7 @@ var Popover = function Popover(_ref) {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
       size: size,
       position: position,
+      ref: popoverRef,
       children: [!!topSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsxs)(TopContainer, {
         size: size,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(TextContainer, {
@@ -180,9 +196,12 @@ var Popover = function Popover(_ref) {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Close, {})
           })
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MiddleContainer, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MainContentWrapper, {
         size: size,
-        children: mainContent
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MiddleContainer, {
+          size: size,
+          children: mainContent
+        })
       }), !!bottomSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsxs)(BottomContainer, {
         size: size,
         children: [!!(bottomSectionProps !== null && bottomSectionProps !== void 0 && (_bottomSectionProps$t = bottomSectionProps.textButton) !== null && _bottomSectionProps$t !== void 0 && _bottomSectionProps$t.icon) && /*#__PURE__*/(0, _jsxRuntime.jsx)(TextButtonContainer, {
@@ -241,7 +260,6 @@ Popover.propTypes = {
   }),
   mainContent: _propTypes.default.node.isRequired,
   children: _propTypes.default.node.isRequired,
-  position: _propTypes.default.oneOf(['top', 'bottom', 'right', 'left']).isRequired,
   showOnClick: _propTypes.default.bool.isRequired
 };
 var _default = Popover;

package/dist/Popover/Popover.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Popover/Popover.tsx"],"names":["Container","styled","div","props","size","Size","Small","Large","COLORS","white","BOXSHADOWS","BOXSHADOW_CENTERED","Z_INDEXES","popover","position","TopContainer","MiddleContainer","Medium","BottomContainer","TextContainer","renderMargins","note","NoteContainer","ComponentTextStyle","Regular","neutral_600","LabelContainer","Bold","CloseButtonContainer","TextButtonContainer","IconButtonContainer","Wrapper","showOnClick","showPopover","isNotePresent","Popover","topSectionProps","bottomSectionProps","mainContent","children","React","useState","setShowPopover","text","textButton","icon","action","label","iconButtons","map","iconButton"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,SAAS,GAAGC,0BAAOC,GAAV,weACH,UAAAC,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaC,YAAKC,KAAlB,GAA0B,OAA1B,GAAqCH,KAAK,CAACC,IAAN,KAAaC,YAAKE,KAAlB,GAA0B,OAA1B,GAAoC,OAA3E;AAAA,CADF,EAEJ,UAAAJ,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaC,YAAKC,KAAlB,GAA0B,OAA1B,GAAqCH,KAAK,CAACC,IAAN,KAAaC,YAAKE,KAAlB,GAA0B,OAA1B,GAAoC,OAA3E;AAAA,CAFD,EAICC,SAAOC,KAJR,EAMCC,mBAAWC,kBANZ,EAWFC,kBAAUC,OAXR,EAaX,UAAAV,KAAK;AAAA,SAAKA,KAAK,CAACW,QAAN,IAAkB,QAAlB,GAA6B,gEAA7B,GAAgG,EAArG;AAAA,CAbM,EAcX,UAAAX,KAAK;AAAA,SAAKA,KAAK,CAACW,QAAN,IAAkB,KAAlB,GAA0B,mEAA1B,GAAgG,EAArG;AAAA,CAdM,EAgBX,UAAAX,KAAK;AAAA,SAAKA,KAAK,CAACW,QAAN,IAAkB,MAAlB,GAA2B,mEAA3B,GAAiG,EAAtG;AAAA,CAhBM,EAiBX,UAAAX,KAAK;AAAA,SAAKA,KAAK,CAACW,QAAN,IAAkB,OAAlB,GAA4B,kEAA5B,GAAiG,EAAtG;AAAA,CAjBM,EAwBGN,SAAOC,KAxBV,EA0BT,UAAAN,KAAK;AAAA,SAAKA,KAAK,CAACW,QAAN,IAAkB,QAAlB,GAA6B,qEAA7B,GAAqG,EAA1G;AAAA,CA1BI,EA2BT,UAAAX,KAAK;AAAA,SAAKA,KAAK,CAACW,QAAN,IAAkB,KAAlB,GAA0B,mEAA1B,GAAgG,EAArG;AAAA,CA3BI,EA6BT,UAAAX,KAAK;AAAA,SAAKA,KAAK,CAACW,QAAN,IAAkB,MAAlB,GAA2B,qEAA3B,GAAmG,EAAxG;AAAA,CA7BI,EA8BT,UAAAX,KAAK;AAAA,SAAKA,KAAK,CAACW,QAAN,IAAkB,OAAlB,GAA4B,qEAA5B,GAAoG,EAAzG;AAAA,CA9BI,CAAf;;AAiCA,IAAMC,YAAY,GAAGd,0BAAOC,GAAV,2IACN,UAAAC,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaC,YAAKC,KAAlB,GAA0B,MAA1B,GAAoCH,KAAK,CAACC,IAAN,KAAaC,YAAKE,KAAlB,GAA0B,MAA1B,GAAmC,MAAzE;AAAA,CADC,EAEP,UAAAJ,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaC,YAAKC,KAAlB,GAA0B,OAA1B,GAAqCH,KAAK,CAACC,IAAN,KAAaC,YAAKE,KAAlB,GAA0B,OAA1B,GAAoC,OAA3E;AAAA,CAFE,CAAlB;;AAMA,IAAMS,eAAe,GAAGf,0BAAOC,GAAV,wKACT,UAAAC,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaC,YAAKC,KAAlB,GAA0B,OAA1B,GAAqCH,KAAK,CAACC,IAAN,KAAaC,YAAKE,KAAlB,GAA0B,OAA1B,GAAoC,OAA3E;AAAA,CADI,EAEV,UAAAJ,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaC,YAAKC,KAAlB,GAA0B,OAA1B,GAAqCH,KAAK,CAACC,IAAN,KAAaC,YAAKE,KAAlB,GAA0B,OAA1B,GAAoC,OAA3E;AAAA,CAFK,EAGR,UAAAJ,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaC,YAAKC,KAAlB,GAA0B,UAA1B,GAAwCH,KAAK,CAACC,IAAN,KAAaC,YAAKE,KAAlB,GAA0B,UAA1B,GAAuC,UAAjF;AAAA,CAHG,EAKjB,UAAAJ,KAAK;AAAA,SAAE,8BAAiBA,KAAK,CAACC,IAAN,KAAaC,YAAKC,KAAlB,GAAwBD,YAAKC,KAA7B,GAAmCD,YAAKY,MAAzD,CAAF;AAAA,CALY,CAArB;;AAQA,IAAMC,eAAe,GAAGjB,0BAAOC,GAAV,kLACT,UAAAC,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaC,YAAKC,KAAlB,GAA0B,MAA1B,GAAoCH,KAAK,CAACC,IAAN,KAAaC,YAAKE,KAAlB,GAA0B,MAA1B,GAAmC,MAAzE;AAAA,CADI,EAEV,UAAAJ,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaC,YAAKC,KAAlB,GAA0B,OAA1B,GAAqCH,KAAK,CAACC,IAAN,KAAaC,YAAKE,KAAlB,GAA0B,OAA1B,GAAoC,OAA3E;AAAA,CAFK,CAArB;;AAUA,IAAMY,aAAa,GAAGlB,0BAAOC,GAAV,uKAGP,UAAAC,KAAK;AAAA,SAAEiB,aAAa,CAACjB,KAAK,CAACkB,IAAP,EAAalB,KAAK,CAACC,IAAnB,CAAf;AAAA,CAHE,CAAnB;;AAOA,IAAMkB,aAAa,GAAGrB,0BAAOC,GAAV,gGACf,UAAAC,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaC,YAAKC,KAAlB,GAA0B,iCAAoBiB,qBAAmBC,OAAvC,EAAgDhB,SAAOiB,WAAvD,CAA1B,GAAiGtB,KAAK,CAACC,IAAN,KAAaC,YAAKE,KAAlB,GAA0B,+BAAkBgB,qBAAmBC,OAArC,EAA8ChB,SAAOiB,WAArD,CAA1B,GAA8F,0BAAmBF,qBAAmBC,OAAtC,EAA+ChB,SAAOiB,WAAtD,CAAjM;AAAA,CADU,CAAnB;;AAIA,IAAMC,cAAc,GAAGzB,0BAAOC,GAAV,gGAChB,UAAAC,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaC,YAAKC,KAAlB,GAA0B,+BAAkBiB,qBAAmBI,IAArC,EAA2C,IAA3C,CAA1B,GAA8ExB,KAAK,CAACC,IAAN,KAAaC,YAAKE,KAAlB,GAA0B,+BAAkBgB,qBAAmBI,IAArC,EAA2C,IAA3C,CAA1B,GAA6E,+BAAkBJ,qBAAmBI,IAArC,EAA2C,IAA3C,CAA7J;AAAA,CADW,CAApB;;AAIA,IAAMC,oBAAoB,GAAG3B,0BAAOC,GAAV,yGACd,UAAAC,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaC,YAAKC,KAAlB,GAA0B,gBAA1B,GAA8CH,KAAK,CAACC,IAAN,KAAaC,YAAKE,KAAlB,GAA0B,kBAA1B,GAA+C,gBAA/F;AAAA,CADS,CAA1B;;AAIA,IAAMsB,mBAAmB,GAAG5B,0BAAOC,GAAV,yGACb,UAAAC,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaC,YAAKC,KAAlB,GAA0B,gBAA1B,GAA8CH,KAAK,CAACC,IAAN,KAAaC,YAAKE,KAAlB,GAA0B,kBAA1B,GAA+C,kBAA/F;AAAA,CADQ,CAAzB;;AAIA,IAAMuB,mBAAmB,GAAG7B,0BAAOC,GAAV,6HACb,UAAAC,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaC,YAAKC,KAAlB,GAA0B,gBAA1B,GAA8CH,KAAK,CAACC,IAAN,KAAaC,YAAKE,KAAlB,GAA0B,kBAA1B,GAA+C,kBAA/F;AAAA,CADQ,CAAzB;;AAKA,IAAMwB,OAAO,GAAG9B,0BAAOC,GAAV,oQAIC,UAAAC,KAAK;AAAA,SAAEA,KAAK,CAACW,QAAN,KAAiB,KAAjB,IAA0BX,KAAK,CAACW,QAAN,KAAiB,QAA3C,GAAsD,KAAtD,GAA8D,MAAhE;AAAA,CAJN,EAKA,UAAAX,KAAK;AAAA,SAAEA,KAAK,CAACW,QAAN,KAAiB,MAAjB,IAA2BX,KAAK,CAACW,QAAN,KAAiB,OAA5C,GAAsD,KAAtD,GAA8D,MAAhE;AAAA,CALL,EAQP,UAAAX,KAAK;AAAA,SAAEA,KAAK,CAACW,QAAN,KAAiB,MAAjB,GAA0B,wBAA1B,GAAqD,EAAvD;AAAA,CARE,EASP,UAAAX,KAAK;AAAA,SAAEA,KAAK,CAACW,QAAN,KAAiB,OAAjB,GAA2B,uBAA3B,GAAqD,EAAvD;AAAA,CATE,EAWP,UAAAX,KAAK;AAAA,SAAEA,KAAK,CAACW,QAAN,KAAiB,KAAjB,GAAyB,cAAzB,GAA0C,EAA5C;AAAA,CAXE,EAYP,UAAAX,KAAK;AAAA,SAAEA,KAAK,CAACW,QAAN,KAAiB,QAAjB,GAA4B,WAA5B,GAA0C,EAA5C;AAAA,CAZE,EAeT,UAAAX,KAAK;AAAA,SAAEA,KAAK,CAAC6B,WAAN,aACJhC,SADI,qCAEWG,KAAK,CAAC8B,WAAN,GAAoB,SAApB,GAAgC,QAF3C,iCAGQ9B,KAAK,CAAC8B,WAAN,GAAoB,GAApB,GAA0B,GAHlC,iEAQHjC,SARG,0EAAF;AAAA,CAfI,CAAb;;AA+BA,IAAMoB,aAAa,GAAG,SAAhBA,aAAgB,CAACc,aAAD,EAAyB9B,IAAzB,EAAgD;AACpE,MAAG8B,aAAH,EAAiB;AACf,WAAQ9B,IAAI,KAAGC,YAAKC,KAAZ,GAAoB,WAApB,GAAmCF,IAAI,KAAGC,YAAKE,KAAZ,GAAoB,WAApB,GAAkC,WAA7E;AACD,GAFD,MAGI;AACF,WAAQH,IAAI,KAAGC,YAAKC,KAAZ,GAAoB,WAApB,GAAmCF,IAAI,KAAGC,YAAKE,KAAZ,GAAoB,MAApB,GAA6B,MAAxE;AACD;AACF,CAPD;;AAmCA,IAAM4B,OAA8C,GACpD,SADMA,OACN,OAQM;AAAA;;AAAA,uBAPF/B,IAOE;AAAA,MAPFA,IAOE,0BAPGC,YAAKY,MAOR;AAAA,MANFmB,eAME,QANFA,eAME;AAAA,MALFC,kBAKE,QALFA,kBAKE;AAAA,MAJFC,WAIE,QAJFA,WAIE;AAAA,MAHFC,QAGE,QAHFA,QAGE;AAAA,MAFFzB,QAEE,QAFFA,QAEE;AAAA,8BADFkB,WACE;AAAA,MADFA,WACE,iCADU,KACV;;AAEJ,wBAAsCQ,KAAK,CAACC,QAAN,CAAe,KAAf,CAAtC;AAAA;AAAA,MAAOR,WAAP;AAAA,MAAoBS,cAApB;;AAEA,sBACE,sBAAC,OAAD;AAAS,IAAA,QAAQ,EAAE5B,QAAnB;AAA6B,IAAA,WAAW,EAAEkB,WAA1C;AAAuD,IAAA,WAAW,EAAEC,WAApE;AAAA,4BACE,sBAAC,SAAD;AAAW,MAAA,IAAI,EAAE7B,IAAjB;AAAuB,MAAA,QAAQ,EAAEU,QAAjC;AAAA,iBACG,CAAC,CAACsB,eAAF,iBACC,sBAAC,YAAD;AAAc,QAAA,IAAI,EAAEhC,IAApB;AAAA,gCACE,sBAAC,aAAD;AAAe,UAAA,IAAI,EAAE,CAAC,EAACgC,eAAD,aAACA,eAAD,eAACA,eAAe,CAAEf,IAAlB,CAAtB;AAA8C,UAAA,IAAI,EAAEjB,IAApD;AAAA,qBACG,CAAAgC,eAAe,SAAf,IAAAA,eAAe,WAAf,YAAAA,eAAe,CAAEf,IAAjB,kBACC,qBAAC,aAAD;AAAe,YAAA,IAAI,EAAEjB,IAArB;AAAA,sBACGgC,eAAe,CAACf;AADnB,YAFJ,eAME,qBAAC,cAAD;AAAgB,YAAA,IAAI,EAAEjB,IAAtB;AAAA,sBACGgC,eADH,aACGA,eADH,uBACGA,eAAe,CAAEO;AADpB,YANF;AAAA,UADF,EAYGX,WAAW,iBACV,qBAAC,oBAAD;AAAsB,UAAA,IAAI,EAAE5B,IAA5B;AAAkC,yBAAa,UAA/C;AAAA,iCACE,qBAAC,kBAAD;AAAY,YAAA,MAAM,EAAE;AAAA,qBAAIsC,cAAc,CAAC,KAAD,CAAlB;AAAA,aAApB;AAA+C,YAAA,wBAAwB,MAAvE;AAAwE,YAAA,SAAS,EAAElC,SAAOiB,WAA1F;AAAuG,YAAA,OAAO,EAAC,WAA/G;AAA2H,YAAA,KAAK,EAAC,UAAjI;AAAA,mCACE,qBAAC,kBAAD,CAAa,KAAb;AADF;AADF,UAbJ;AAAA,QAFJ,eAwBE,qBAAC,eAAD;AAAiB,QAAA,IAAI,EAAErB,IAAvB;AAAA,kBACGkC;AADH,QAxBF,EA4BG,CAAC,CAACD,kBAAF,iBACC,sBAAC,eAAD;AAAiB,QAAA,IAAI,EAAEjC,IAAvB;AAAA,mBACG,CAAC,EAACiC,kBAAD,aAACA,kBAAD,wCAACA,kBAAkB,CAAEO,UAArB,kDAAC,sBAAgCC,IAAjC,CAAD,iBACC,qBAAC,mBAAD;AAAqB,UAAA,IAAI,EAAEzC,IAA3B;AAAiC,yBAAa,SAA9C;AAAA,iCACE,qBAAC,cAAD;AAAQ,YAAA,IAAI,EAAEA,IAAd;AAAoB,YAAA,OAAO,EAAC,WAA5B;AAAwC,YAAA,IAAI,EAAEiC,kBAAkB,CAACO,UAAnB,CAA8BC,IAA5E;AAAkF,YAAA,OAAO,EAAER,kBAAkB,CAACO,UAAnB,CAA8BE,MAAzH;AAAA,sBACGT,kBAAkB,CAACO,UAAnB,CAA8BG;AADjC;AADF,UAFJ,eASE;AAAK,UAAA,SAAS,EAAC;AAAf,UATF,eAWE,qBAAC,mBAAD;AAAqB,UAAA,IAAI,EAAE3C,IAA3B;AAAiC,yBAAa,SAA9C;AAAA,oBACGiC,kBADH,aACGA,kBADH,gDACGA,kBAAkB,CAAEW,WADvB,0DACG,sBAAiCC,GAAjC,CAAqC,UAACC,UAAD;AAAA,gCAElC,qBAAC,kBAAD;AAAY,cAAA,MAAM,EAAEA,UAAU,CAACJ,MAA/B;AAAuC,cAAA,OAAO,EAAC,WAA/C;AAA2D,cAAA,KAAK,EAAC,UAAjE;AAA4E,cAAA,wBAAwB,MAApG;AAAA,wBACGI,UAAU,CAACL;AADd,cAFkC;AAAA,WAArC;AADH,UAXF;AAAA,QA7BJ;AAAA,MADF,eAqDE;AAAK,MAAA,OAAO,EAAE;AAAA,eAAIb,WAAW,IAAIU,cAAc,CAAC,CAACT,WAAF,CAAjC;AAAA,OAAd;AAAA,iBACGM,QADH,eAGE;AAAK,QAAA,SAAS,EAAC;AAAf,QAHF;AAAA,MArDF;AAAA,IADF;AA8DD,CA3ED;;;AAREH,EAAAA,e;AAjBAO,IAAAA,I;AACAtB,IAAAA,I;;AAiBAgB,EAAAA,kB;AAPAW,IAAAA,W;AANAH,MAAAA,I;AACAC,MAAAA,M;AACAC,MAAAA,K;;AAKAH,IAAAA,U;AAPAC,MAAAA,I;AACAC,MAAAA,M;AACAC,MAAAA,K;;;AAYAT,EAAAA,W;AACAC,EAAAA,Q;AACAzB,EAAAA,Q,4BAAU,K,EAAQ,Q,EAAW,O,EAAU,M;AACvCkB,EAAAA,W;;eAgFaG,O","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\nimport { Button, IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { BOXSHADOWS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling, scrollBarStyling, Z_INDEXES } from '../styles';\nimport { Size } from '../types';\n\nconst Container = styled.div<{size: Size, position: string}>`\n  height: ${props=>props.size===Size.Small ? '240px' : (props.size===Size.Large ? '480px' : '360px')};\n  width: ${props=>props.size===Size.Small ? '344px' : (props.size===Size.Large ? '624px' : '464px')};\n  border-radius: 4px;\n  background: ${COLORS.white};\n  cursor: default;\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\n\n  position: absolute;  \n  visibility: hidden;\n  opacity: 0;\n  z-index: ${Z_INDEXES.popover};\n\n  ${props => (props.position == 'bottom' ? 'right: 50%; top: calc(100% + 8px); transform: translateX(50%);' : '')}\n  ${props => (props.position == 'top' ? 'right: 50%; bottom: calc(100% + 8px); transform: translateX(50%);' : '')}\n\n  ${props => (props.position == 'left' ? 'bottom: 50%; right: calc(100% + 8px); transform: translateY(50%);' : '')}\n  ${props => (props.position == 'right' ? 'bottom: 50%; left: calc(100% + 8px); transform: translateY(50%);' : '')}\n\n  &::after {\n    height: 16px;\n    width: 16px;\n    content: \"\";\n    position: absolute;\n    background: ${COLORS.white};\n\n    ${props => (props.position == 'bottom' ? 'right: 50%; bottom: 100%; transform: translateY(50%) rotate(45deg);' : '')}\n    ${props => (props.position == 'top' ? 'right: 50%; top: 100%; transform: translateY(-50%) rotate(45deg);' : '')}\n\n    ${props => (props.position == 'left' ? 'bottom: 50%; left: 100%; transform: translateX(-50%) rotate(45deg);' : '')}\n    ${props => (props.position == 'right' ? 'bottom: 50%; right: 100%; transform: translateX(50%) rotate(45deg);' : '')}\n`;\n\nconst TopContainer = styled.div<{size: Size}>`\n  height: ${props=>props.size===Size.Small ? '56px' : (props.size===Size.Large ? '72px' : '64px')};\n  width: ${props=>props.size===Size.Small ? '344px' : (props.size===Size.Large ? '624px' : '464px')};\n  display: flex;\n`;\n\nconst MiddleContainer = styled.div<{size: Size}>`\n  height: ${props=>props.size===Size.Small ? '104px' : (props.size===Size.Large ? '304px' : '208px')};\n  width: ${props=>props.size===Size.Small ? '312px' : (props.size===Size.Large ? '576px' : '424px')};\n  padding: ${props=>props.size===Size.Small ? '8px 16px' : (props.size===Size.Large ? '8px 24px' : '8px 20px')};\n  overflow-y: auto;\n  ${props=>scrollBarStyling(props.size===Size.Small?Size.Small:Size.Medium)}\n`;\n\nconst BottomContainer = styled.div<{size: Size}>`\n  height: ${props=>props.size===Size.Small ? '64px' : (props.size===Size.Large ? '88px' : '72px')};\n  width: ${props=>props.size===Size.Small ? '344px' : (props.size===Size.Large ? '624px' : '464px')};\n  display: flex;\n\n  .bottom-flex {\n    flex: 1;\n  }\n`;\n\nconst TextContainer = styled.div<{note: boolean, size: Size}>`\n  display: flex;\n  flex-direction: column;\n  margin: ${props=>renderMargins(props.note, props.size)};\n  flex-grow: 1;\n`;\n\nconst NoteContainer = styled.div<{size: Size}>`\n  ${props=>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))}\n`;\n\nconst LabelContainer = styled.div<{size: Size}>`\n  ${props=>props.size===Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, null) : (props.size===Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, null) : ComponentMStyling(ComponentTextStyle.Bold, null))}\n`;\n\nconst CloseButtonContainer = styled.div<{size: Size}>`\n  margin: ${props=>props.size===Size.Small ? '4px 16px 4px 0' : (props.size===Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0')};\n`;\n\nconst TextButtonContainer = styled.div<{size: Size}>`\n  margin: ${props=>props.size===Size.Small ? '8px 0 8px 16px' : (props.size===Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px')};\n`;\n\nconst IconButtonContainer = styled.div<{size: Size}>`\n  margin: ${props=>props.size===Size.Small ? '8px 16px 8px 0' : (props.size===Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0')};\n  display: flex;\n`;\n\nconst Wrapper = styled.div<{position: string, showOnClick: boolean, showPopover: boolean}>`\n  position: relative;\n\n  .pointer-space {\n    height: ${props=>props.position==='top' || props.position==='bottom' ? '8px' : '100%'};\n    width: ${props=>props.position==='left' || props.position==='right' ? '8px' : '100%'};\n    position: absolute;\n\n    ${props=>props.position==='left' ? 'right:100%; bottom: 0%' : ''};\n    ${props=>props.position==='right' ? 'left:100%; bottom: 0%' : ''};\n\n    ${props=>props.position==='top' ? 'bottom: 100%' : ''};\n    ${props=>props.position==='bottom' ? 'top: 100%' : ''};\n  }\n\n  ${props=>props.showOnClick ? \n    `${Container} {\n        visibility: ${props.showPopover ? 'visible' : 'hidden'};\n        opacity: ${props.showPopover ? '1' : '0'};\n    }\n    cursor: pointer;` \n    : \n    `&:hover {\n      ${Container} {\n        visibility: visible;\n        opacity: 1;\n      }\n    }`\n  }\n`;\n\nconst renderMargins = (isNotePresent: boolean, size: Size): string => {\n  if(isNotePresent){\n    return (size===Size.Small ? '10px 16px' : (size===Size.Large ? '14px 24px' : '12px 20px'));\n  }\n  else{\n    return (size===Size.Small ? '18px 16px' : (size===Size.Large ? '24px' : '20px'));\n  }\n}\n\ntype topSectionProps = {\n  text: string;\n  note?: string;\n}\n\ntype actionButtonProps = {\n  icon: React.ReactNode;\n  action: ()=>void;\n  label?: string;\n}\n\ntype bottomSectionProps = {\n  iconButtons?: actionButtonProps[];\n  textButton?: actionButtonProps;\n}\n\ntype PopoverProps = {\n  size?: Size.Small | Size.Medium | Size.Large;\n  topSectionProps?: topSectionProps;\n  bottomSectionProps?: bottomSectionProps;\n  mainContent: React.ReactNode;\n  children: React.ReactNode;\n  position: 'top' | 'bottom' | 'right' | 'left';\n  showOnClick: boolean;\n}\n\nconst Popover: React.FunctionComponent<PopoverProps> = \n({\n    size=Size.Medium,\n    topSectionProps,\n    bottomSectionProps,\n    mainContent,\n    children,\n    position,\n    showOnClick=false\n}) => {\n\n  const [showPopover, setShowPopover] = React.useState(false);\n\n  return (\n    <Wrapper position={position} showOnClick={showOnClick} showPopover={showPopover}>\n      <Container size={size} position={position}>\n        {!!topSectionProps && \n          <TopContainer size={size}>\n            <TextContainer note={!!topSectionProps?.note} size={size}>\n              {topSectionProps?.note && \n                <NoteContainer size={size}>\n                  {topSectionProps.note}\n                </NoteContainer>\n              }\n              <LabelContainer size={size}>\n                {topSectionProps?.text}\n              </LabelContainer>\n            </TextContainer>\n\n            {showOnClick && \n              <CloseButtonContainer size={size} data-testid={'closeBtn'}>\n                <IconButton action={()=>setShowPopover(false)} useTransparentBackground iconColor={COLORS.neutral_600} variant='secondary' shape='circular'>\n                  <SystemIcons.Close />\n                </IconButton>\n              </CloseButtonContainer>\n            }\n          </TopContainer>\n        }\n\n        <MiddleContainer size={size}>\n          {mainContent}\n        </MiddleContainer>\n\n        {!!bottomSectionProps && \n          <BottomContainer size={size}>\n            {!!bottomSectionProps?.textButton?.icon && \n              <TextButtonContainer size={size} data-testid={'textBtn'}>\n                <Button size={size} variant='secondary' icon={bottomSectionProps.textButton.icon} onClick={bottomSectionProps.textButton.action}>\n                  {bottomSectionProps.textButton.label}\n                </Button>\n              </TextButtonContainer>\n            }\n\n            <div className='bottom-flex'/>\n            \n            <IconButtonContainer size={size} data-testid={'iconBtn'}>\n              {bottomSectionProps?.iconButtons?.map((iconButton) =>\n                \n                  <IconButton action={iconButton.action} variant='secondary' shape='circular' useTransparentBackground>\n                    {iconButton.icon}\n                  </IconButton>            \n              )}\n            </IconButtonContainer>\n          </BottomContainer>\n        }\n      </Container>\n\n      <div onClick={()=>showOnClick && setShowPopover(!showPopover)}>\n        {children}\n\n        <div className='pointer-space'/>\n      </div>\n\n    </Wrapper>\n  );\n};\n\nexport default Popover;"],"file":"Popover.cjs"}
+{"version":3,"sources":["../../src/Popover/Popover.tsx"],"names":["Container","styled","div","props","size","Size","Small","Large","COLORS","white","BOXSHADOWS","BOXSHADOW_CENTERED","Z_INDEXES","popover","position","Position","Bottom","Top","Left","Right","TopContainer","MainContentWrapper","MiddleContainer","BottomContainer","TextContainer","renderMargins","note","NoteContainer","ComponentTextStyle","Regular","neutral_600","LabelContainer","Bold","CloseButtonContainer","TextButtonContainer","IconButtonContainer","Wrapper","showOnClick","showPopover","isNotePresent","Popover","Medium","topSectionProps","bottomSectionProps","mainContent","children","React","useState","setShowPopover","popoverRef","useRef","useEffect","checkIfClickedOutside","e","current","contains","target","document","addEventListener","removeEventListener","text","textButton","icon","action","label","iconButtons","map","iconButton"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\nimport { Button, IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { BOXSHADOWS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling, scrollBarStyling, Z_INDEXES } from '../styles';\nimport { Position, Size } from '../types';\n\nconst Container = styled.div<{size: Size, position: Position}>`\n  height: ${props=>props.size===Size.Small ? '240px' : (props.size===Size.Large ? '480px' : '360px')};\n  width: ${props=>props.size===Size.Small ? '344px' : (props.size===Size.Large ? '624px' : '464px')};\n  border-radius: 4px;\n  background: ${COLORS.white};\n  cursor: default;\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\n\n  position: absolute;  \n  visibility: hidden;\n  opacity: 0;\n  z-index: ${Z_INDEXES.popover};\n\n  ${props => (props.position == Position.Bottom ? 'right: 50%; top: calc(100% + 8px); transform: translateX(50%);' : '')}\n  ${props => (props.position == Position.Top ? 'right: 50%; bottom: calc(100% + 8px); transform: translateX(50%);' : '')}\n\n  ${props => (props.position == Position.Left ? 'bottom: 50%; right: calc(100% + 8px); transform: translateY(50%);' : '')}\n  ${props => (props.position == Position.Right ? 'bottom: 50%; left: calc(100% + 8px); transform: translateY(50%);' : '')}\n\n  &::after {\n    height: 16px;\n    width: 16px;\n    content: \"\";\n    position: absolute;\n    background: ${COLORS.white};\n\n    ${props => (props.position == Position.Bottom ? 'right: 50%; bottom: 100%; transform: translateY(50%) rotate(45deg);' : '')}\n    ${props => (props.position == Position.Top ? 'right: 50%; top: 100%; transform: translateY(-50%) rotate(45deg);' : '')}\n\n    ${props => (props.position == Position.Left ? 'bottom: 50%; left: 100%; transform: translateX(-50%) rotate(45deg);' : '')}\n    ${props => (props.position == Position.Right ? 'bottom: 50%; right: 100%; transform: translateX(50%) rotate(45deg);' : '')}\n`;\n\nconst TopContainer = styled.div<{size: Size}>`\n  height: ${props=>props.size===Size.Small ? '56px' : (props.size===Size.Large ? '72px' : '64px')};\n  width: ${props=>props.size===Size.Small ? '344px' : (props.size===Size.Large ? '624px' : '464px')};\n  display: flex;\n`;\n\nconst MainContentWrapper = styled.div<{size: Size}>`\n  padding: ${props=>props.size===Size.Small ? '8px 0 8px 16px' : (props.size===Size.Large ? '8px 0 8px 24px' : '8px 0 8px 20px')};\n`;\n\nconst MiddleContainer = styled.div<{size: Size}>`\n  height: ${props=>props.size===Size.Small ? '104px' : (props.size===Size.Large ? '304px' : '208px')};\n  width: ${props=>props.size===Size.Small ? '312px' : (props.size===Size.Large ? '576px' : '424px')};\n  padding-right: ${props=>props.size===Size.Small ? '6px' : (props.size===Size.Large ? '14px' : '10px')};\n  overflow-y: auto;\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst BottomContainer = styled.div<{size: Size}>`\n  height: ${props=>props.size===Size.Small ? '64px' : (props.size===Size.Large ? '88px' : '72px')};\n  width: ${props=>props.size===Size.Small ? '344px' : (props.size===Size.Large ? '624px' : '464px')};\n  display: flex;\n\n  .bottom-flex {\n    flex: 1;\n  }\n`;\n\nconst TextContainer = styled.div<{note: boolean, size: Size}>`\n  display: flex;\n  flex-direction: column;\n  margin: ${props=>renderMargins(props.note, props.size)};\n  flex-grow: 1;\n`;\n\nconst NoteContainer = styled.div<{size: Size}>`\n  ${props=>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))}\n`;\n\nconst LabelContainer = styled.div<{size: Size}>`\n  ${props=>props.size===Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, null) : (props.size===Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, null) : ComponentMStyling(ComponentTextStyle.Bold, null))}\n`;\n\nconst CloseButtonContainer = styled.div<{size: Size}>`\n  margin: ${props=>props.size===Size.Small ? '4px 16px 4px 0' : (props.size===Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0')};\n`;\n\nconst TextButtonContainer = styled.div<{size: Size}>`\n  margin: ${props=>props.size===Size.Small ? '8px 0 8px 16px' : (props.size===Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px')};\n`;\n\nconst IconButtonContainer = styled.div<{size: Size}>`\n  margin: ${props=>props.size===Size.Small ? '8px 16px 8px 0' : (props.size===Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0')};\n  display: flex;\n`;\n\nconst Wrapper = styled.div<{position: Position, showOnClick: boolean, showPopover: boolean}>`\n  position: relative;\n\n  .pointer-space {\n    height: ${props=>props.position===Position.Top || props.position===Position.Bottom ? '8px' : '100%'};\n    width: ${props=>props.position===Position.Left || props.position===Position.Right ? '8px' : '100%'};\n    position: absolute;\n\n    ${props=>props.position===Position.Left ? 'right:100%; bottom: 0%' : ''};\n    ${props=>props.position===Position.Right ? 'left:100%; bottom: 0%' : ''};\n\n    ${props=>props.position===Position.Top ? 'bottom: 100%' : ''};\n    ${props=>props.position===Position.Bottom ? 'top: 100%' : ''};\n  }\n\n  ${props=>props.showOnClick ? \n    `${Container} {\n        visibility: ${props.showPopover ? 'visible' : 'hidden'};\n        opacity: ${props.showPopover ? '1' : '0'};\n    }\n    cursor: pointer;` \n    : \n    `&:hover {\n      ${Container} {\n        visibility: visible;\n        opacity: 1;\n      }\n    }`\n  }\n`;\n\nconst renderMargins = (isNotePresent: boolean, size: Size): string => {\n  if(isNotePresent){\n    return (size===Size.Small ? '10px 16px' : (size===Size.Large ? '14px 24px' : '12px 20px'));\n  }\n  else{\n    return (size===Size.Small ? '18px 16px' : (size===Size.Large ? '24px' : '20px'));\n  }\n}\n\ntype topSectionProps = {\n  text: string;\n  note?: string;\n}\n\ntype actionButtonProps = {\n  icon: React.ReactNode;\n  action: ()=>void;\n  label?: string;\n}\n\ntype bottomSectionProps = {\n  iconButtons?: actionButtonProps[];\n  textButton?: actionButtonProps;\n}\n\ntype PopoverProps = {\n  size?: Size.Small | Size.Medium | Size.Large;\n  topSectionProps?: topSectionProps;\n  bottomSectionProps?: bottomSectionProps;\n  mainContent: React.ReactNode;\n  children: React.ReactNode;\n  position: Position.Top | Position.Bottom | Position.Right | Position.Left;\n  showOnClick: boolean;\n}\n\nconst Popover: React.FunctionComponent<PopoverProps> = \n({\n    size=Size.Medium,\n    topSectionProps,\n    bottomSectionProps,\n    mainContent,\n    children,\n    position,\n    showOnClick=false\n}) => {\n\n  const [showPopover, setShowPopover] = React.useState(false);\n  const popoverRef = React.useRef<any>();\n\n  React.useEffect(()=>{\n    const checkIfClickedOutside = (e: { target: any; }) => {\n      if (showPopover && popoverRef.current && !popoverRef.current.contains(e.target)) {\n        setShowPopover(false);\n      }\n    }\n\n    document.addEventListener(\"mousedown\", checkIfClickedOutside)\n\n    return () => {\n      document.removeEventListener(\"mousedown\", checkIfClickedOutside)\n    }\n  },[showPopover]);\n\n  return (\n    <Wrapper position={position} showOnClick={showOnClick} showPopover={showPopover}>\n      <Container size={size} position={position} ref={popoverRef}>\n        {!!topSectionProps && \n          <TopContainer size={size}>\n            <TextContainer note={!!topSectionProps?.note} size={size}>\n              {topSectionProps?.note && \n                <NoteContainer size={size}>\n                  {topSectionProps.note}\n                </NoteContainer>\n              }\n              <LabelContainer size={size}>\n                {topSectionProps?.text}\n              </LabelContainer>\n            </TextContainer>\n\n            {showOnClick && \n              <CloseButtonContainer size={size} data-testid={'closeBtn'}>\n                <IconButton action={()=>setShowPopover(false)} useTransparentBackground iconColor={COLORS.neutral_600} variant='secondary' shape='circular'>\n                  <SystemIcons.Close />\n                </IconButton>\n              </CloseButtonContainer>\n            }\n          </TopContainer>\n        }\n\n        <MainContentWrapper size={size}>\n          <MiddleContainer size={size}>\n            {mainContent}\n          </MiddleContainer>\n        </MainContentWrapper>\n\n        {!!bottomSectionProps && \n          <BottomContainer size={size}>\n            {!!bottomSectionProps?.textButton?.icon && \n              <TextButtonContainer size={size} data-testid={'textBtn'}>\n                <Button size={size} variant='secondary' icon={bottomSectionProps.textButton.icon} onClick={bottomSectionProps.textButton.action}>\n                  {bottomSectionProps.textButton.label}\n                </Button>\n              </TextButtonContainer>\n            }\n\n            <div className='bottom-flex'/>\n            \n            <IconButtonContainer size={size} data-testid={'iconBtn'}>\n              {bottomSectionProps?.iconButtons?.map((iconButton) =>\n                \n                  <IconButton action={iconButton.action} variant='secondary' shape='circular' useTransparentBackground>\n                    {iconButton.icon}\n                  </IconButton>            \n              )}\n            </IconButtonContainer>\n          </BottomContainer>\n        }\n      </Container>\n\n      <div onClick={()=>showOnClick && setShowPopover(!showPopover)}>\n        {children}\n\n        <div className='pointer-space'/>\n      </div>\n\n    </Wrapper>\n  );\n};\n\nexport default Popover;"],"file":"Popover.cjs"}

package/dist/Popover/Popover.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Size } from '../types';
+import { Position, Size } from '../types';
 declare type topSectionProps = {
     text: string;
     note?: string;
@@ -19,7 +19,7 @@ declare type PopoverProps = {
     bottomSectionProps?: bottomSectionProps;
     mainContent: React.ReactNode;
     children: React.ReactNode;
-    position: 'top' | 'bottom' | 'right' | 'left';
+    position: Position.Top | Position.Bottom | Position.Right | Position.Left;
     showOnClick: boolean;
 };
 declare const Popover: React.FunctionComponent<PopoverProps>;

package/dist/Popover/Popover.js

@@ -2,7 +2,7 @@ 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;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 
 import * as React from 'react';
 import styled from 'styled-components';
@@ -10,7 +10,7 @@ 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 { Size } from '../types';
+import { Position, Size } from '../types';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: ", ";\n  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    height: 16px;\n    width: 16px;\n    content: \"\";\n    position: absolute;\n    background: ", ";\n\n    ", "\n    ", "\n\n    ", "\n    ", "\n"])), function (props) {
@@ -18,71 +18,72 @@ var Container = styled.div(_templateObject || (_templateObject = _taggedTemplate
 }, function (props) {
   return props.size === Size.Small ? '344px' : props.size === Size.Large ? '624px' : '464px';
 }, COLORS.white, BOXSHADOWS.BOXSHADOW_CENTERED, Z_INDEXES.popover, function (props) {
-  return props.position == 'bottom' ? 'right: 50%; top: calc(100% + 8px); transform: translateX(50%);' : '';
+  return props.position == Position.Bottom ? 'right: 50%; top: calc(100% + 8px); transform: translateX(50%);' : '';
 }, function (props) {
-  return props.position == 'top' ? 'right: 50%; bottom: calc(100% + 8px); transform: translateX(50%);' : '';
+  return props.position == Position.Top ? 'right: 50%; bottom: calc(100% + 8px); transform: translateX(50%);' : '';
 }, function (props) {
-  return props.position == 'left' ? 'bottom: 50%; right: calc(100% + 8px); transform: translateY(50%);' : '';
+  return props.position == Position.Left ? 'bottom: 50%; right: calc(100% + 8px); transform: translateY(50%);' : '';
 }, function (props) {
-  return props.position == 'right' ? 'bottom: 50%; left: calc(100% + 8px); transform: translateY(50%);' : '';
+  return props.position == Position.Right ? 'bottom: 50%; left: calc(100% + 8px); transform: translateY(50%);' : '';
 }, COLORS.white, function (props) {
-  return props.position == 'bottom' ? 'right: 50%; bottom: 100%; transform: translateY(50%) rotate(45deg);' : '';
+  return props.position == Position.Bottom ? 'right: 50%; bottom: 100%; transform: translateY(50%) rotate(45deg);' : '';
 }, function (props) {
-  return props.position == 'top' ? 'right: 50%; top: 100%; transform: translateY(-50%) rotate(45deg);' : '';
+  return props.position == Position.Top ? 'right: 50%; top: 100%; transform: translateY(-50%) rotate(45deg);' : '';
 }, function (props) {
-  return props.position == 'left' ? 'bottom: 50%; left: 100%; transform: translateX(-50%) rotate(45deg);' : '';
+  return props.position == Position.Left ? 'bottom: 50%; left: 100%; transform: translateX(-50%) rotate(45deg);' : '';
 }, function (props) {
-  return props.position == 'right' ? 'bottom: 50%; right: 100%; transform: translateX(50%) rotate(45deg);' : '';
+  return props.position == Position.Right ? 'bottom: 50%; right: 100%; transform: translateX(50%) rotate(45deg);' : '';
 });
 var TopContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: ", ";\n  width: ", ";\n  display: flex;\n"])), function (props) {
   return props.size === Size.Small ? '56px' : props.size === Size.Large ? '72px' : '64px';
 }, function (props) {
   return props.size === Size.Small ? '344px' : props.size === Size.Large ? '624px' : '464px';
 });
-var MiddleContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: ", ";\n  width: ", ";\n  padding: ", ";\n  overflow-y: auto;\n  ", "\n"])), function (props) {
+var MainContentWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: ", ";\n"])), function (props) {
+  return props.size === Size.Small ? '8px 0 8px 16px' : props.size === Size.Large ? '8px 0 8px 24px' : '8px 0 8px 20px';
+});
+var MiddleContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  height: ", ";\n  width: ", ";\n  padding-right: ", ";\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 ? '312px' : props.size === Size.Large ? '576px' : '424px';
 }, function (props) {
-  return props.size === Size.Small ? '8px 16px' : props.size === Size.Large ? '8px 24px' : '8px 20px';
-}, function (props) {
-  return scrollBarStyling(props.size === Size.Small ? Size.Small : Size.Medium);
-});
-var BottomContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  height: ", ";\n  width: ", ";\n  display: flex;\n\n  .bottom-flex {\n    flex: 1;\n  }\n"])), function (props) {
+  return props.size === Size.Small ? '6px' : props.size === Size.Large ? '14px' : '10px';
+}, scrollBarStyling(Size.Small));
+var BottomContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  height: ", ";\n  width: ", ";\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';
 }, function (props) {
   return props.size === Size.Small ? '344px' : props.size === Size.Large ? '624px' : '464px';
 });
-var TextContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  margin: ", ";\n  flex-grow: 1;\n"])), function (props) {
+var TextContainer = styled.div(_templateObject6 || (_templateObject6 = _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) {
+var NoteContainer = styled.div(_templateObject7 || (_templateObject7 = _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) {
+var LabelContainer = styled.div(_templateObject8 || (_templateObject8 = _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) {
+var CloseButtonContainer = styled.div(_templateObject9 || (_templateObject9 = _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) {
+var TextButtonContainer = styled.div(_templateObject10 || (_templateObject10 = _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) {
+var IconButtonContainer = styled.div(_templateObject11 || (_templateObject11 = _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';
 });
-var Wrapper = 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 === 'top' || props.position === 'bottom' ? '8px' : '100%';
+var Wrapper = styled.div(_templateObject12 || (_templateObject12 = _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 ? '8px' : '100%';
 }, function (props) {
-  return props.position === 'left' || props.position === 'right' ? '8px' : '100%';
+  return props.position === Position.Left || props.position === Position.Right ? '8px' : '100%';
 }, function (props) {
-  return props.position === 'left' ? 'right:100%; bottom: 0%' : '';
+  return props.position === Position.Left ? 'right:100%; bottom: 0%' : '';
 }, function (props) {
-  return props.position === 'right' ? 'left:100%; bottom: 0%' : '';
+  return props.position === Position.Right ? 'left:100%; bottom: 0%' : '';
 }, function (props) {
-  return props.position === 'top' ? 'bottom: 100%' : '';
+  return props.position === Position.Top ? 'bottom: 100%' : '';
 }, function (props) {
-  return props.position === 'bottom' ? 'top: 100%' : '';
+  return props.position === Position.Bottom ? 'top: 100%' : '';
 }, function (props) {
   return props.showOnClick ? "".concat(Container, " {\n        visibility: ").concat(props.showPopover ? 'visible' : 'hidden', ";\n        opacity: ").concat(props.showPopover ? '1' : '0', ";\n    }\n    cursor: pointer;") : "&:hover {\n      ".concat(Container, " {\n        visibility: visible;\n        opacity: 1;\n      }\n    }");
 });
@@ -113,6 +114,19 @@ var Popover = function Popover(_ref) {
       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(Wrapper, {
     position: position,
     showOnClick: showOnClick,
@@ -120,6 +134,7 @@ var Popover = function Popover(_ref) {
     children: [/*#__PURE__*/_jsxs(Container, {
       size: size,
       position: position,
+      ref: popoverRef,
       children: [!!topSectionProps && /*#__PURE__*/_jsxs(TopContainer, {
         size: size,
         children: [/*#__PURE__*/_jsxs(TextContainer, {
@@ -146,9 +161,12 @@ var Popover = function Popover(_ref) {
             children: /*#__PURE__*/_jsx(SystemIcons.Close, {})
           })
         })]
-      }), /*#__PURE__*/_jsx(MiddleContainer, {
+      }), /*#__PURE__*/_jsx(MainContentWrapper, {
         size: size,
-        children: mainContent
+        children: /*#__PURE__*/_jsx(MiddleContainer, {
+          size: size,
+          children: mainContent
+        })
       }), !!bottomSectionProps && /*#__PURE__*/_jsxs(BottomContainer, {
         size: size,
         children: [!!(bottomSectionProps !== null && bottomSectionProps !== void 0 && (_bottomSectionProps$t = bottomSectionProps.textButton) !== null && _bottomSectionProps$t !== void 0 && _bottomSectionProps$t.icon) && /*#__PURE__*/_jsx(TextButtonContainer, {
@@ -207,7 +225,6 @@ Popover.propTypes = {
   }),
   mainContent: _pt.node.isRequired,
   children: _pt.node.isRequired,
-  position: _pt.oneOf(['top', 'bottom', 'right', 'left']).isRequired,
   showOnClick: _pt.bool.isRequired
 };
 export default Popover;