@laerdal/life-react-components 1.9.8-dev.22 → 1.9.8-dev.25

package/dist/NotificationDot/NotificationDot.d.ts

@@ -1,9 +1,9 @@
-import * as React from 'react';
-import { Size } from '../types';
-export interface NotificationProps {
-    size?: Size.Small | Size.Medium | Size.Large;
-    variant: 'critical' | 'positive';
-    testId?: string;
-}
-declare const NotificationDot: React.FunctionComponent<NotificationProps>;
-export default NotificationDot;
+import * as React from 'react';
+import { Size } from '../types';
+export interface NotificationProps {
+    size?: Size.Small | Size.Medium | Size.Large;
+    variant: 'critical' | 'positive';
+    testId?: string;
+}
+declare const NotificationDot: React.FunctionComponent<NotificationProps>;
+export default NotificationDot;

package/dist/NotificationDot/NotificationDot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/NotificationDot/NotificationDot.tsx"],"names":["React","styled","Size","COLORS","ContentWrapper","div","props","size","Small","Large","Content","variant","correct_500","critical_500","white","NotificationDot","Medium","testId"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,IAAT,QAAqB,UAArB;AACA,SAAQC,MAAR,QAAqB,IAArB;;AAQA,IAAMC,cAAc,GAAGH,MAAM,CAACI,GAAV,sJACT,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CADS,EAER,UAACH,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CAFQ,EAGP,UAACH,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,KAA5B,GAAqCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,KAA5B,GAAoC,KAApF;AAAA,CAHO,CAApB;AAOA,IAAMC,OAAO,GAAGT,MAAM,CAACI,GAAV,0MACS,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACK,OAAN,KAAkB,UAAlB,GAA+BR,MAAM,CAACS,WAAtC,GAAoDT,MAAM,CAACU,YAAtE;AAAA,CADT,EAED,UAACP,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CAFC,EAGF,UAACH,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CAHE,EAIM,UAACH,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CAJN,EAKD,UAACH,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,eAAeL,MAAM,CAACW,KAAlD,GAA2DR,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,eAAeN,MAAM,CAACW,KAAlD,GAA0D,eAAeX,MAAM,CAACW,KAAtJ;AAAA,CALC,CAAb;;AASA,IAAMC,eAA2D,GAAG,SAA9DA,eAA8D,OAA2C;AAAA,uBAAzCR,IAAyC;AAAA,MAAzCA,IAAyC,0BAAlCL,IAAI,CAACc,MAA6B;AAAA,MAArBL,OAAqB,QAArBA,OAAqB;AAAA,MAAZM,MAAY,QAAZA,MAAY;AAC7G,sBACE,KAAC,cAAD;AAAgB,IAAA,IAAI,EAAEV,IAAtB;AAA4B,IAAA,OAAO,EAAEI,OAArC;AAAA,2BACE,KAAC,OAAD;AAAS,MAAA,IAAI,EAAEJ,IAAf;AAAqB,MAAA,OAAO,EAAEI,OAA9B;AAAuC,qBAAaM;AAApD;AADF,IADF;AAKD,CAND;;;AApBEN,EAAAA,O,aAAS,U,EAAa,U;AACtBM,EAAAA,M;;AA2BF,eAAeF,eAAf","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { Size } from '../types';\r\nimport {COLORS} from '..';\r\n\r\nexport interface NotificationProps {\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  variant: 'critical' | 'positive';\r\n  testId?: string;\r\n}\r\n\r\nconst ContentWrapper = styled.div<NotificationProps>`\r\n  width: ${(props) => props.size === Size.Small ? '16px' : (props.size === Size.Large ? '24px' : '20px')};\r\n  height: ${(props) => props.size === Size.Small ? '16px' : (props.size === Size.Large ? '24px' : '20px')};\r\n  padding: ${(props) => props.size === Size.Small ? '3px' : (props.size === Size.Large ? '4px' : '4px')};\r\n  box-sizing: border-box;\r\n`;\r\n\r\nconst Content = styled.div<NotificationProps>`\r\n  background-color: ${(props) => props.variant === 'positive' ? COLORS.correct_500 : COLORS.critical_500};\r\n  height: ${(props) => props.size === Size.Small ? '10px' : (props.size === Size.Large ? '16px' : '12px')};\r\n  width: ${(props) => props.size === Size.Small ? '10px' : (props.size === Size.Large ? '16px' : '12px')};\r\n  border-radius: ${(props) => props.size === Size.Small ? '10px' : (props.size === Size.Large ? '16px' : '12px')};\r\n  border: ${(props) => props.size === Size.Small ? '2px solid ' + COLORS.white : (props.size === Size.Large ? '3px solid ' + COLORS.white : '2px solid ' + COLORS.white)};\r\n  box-sizing: border-box;\r\n`;\r\n\r\nconst NotificationDot: React.FunctionComponent<NotificationProps> = ({size = Size.Medium, variant, testId}) => {\r\n  return (\r\n    <ContentWrapper size={size} variant={variant}>\r\n      <Content size={size} variant={variant} data-testid={testId}/>\r\n    </ContentWrapper>\r\n  );\r\n};\r\n\r\nexport default NotificationDot;\r\n"],"file":"NotificationDot.js"}
+{"version":3,"sources":["../../src/NotificationDot/NotificationDot.tsx"],"names":["React","styled","Size","COLORS","ContentWrapper","div","props","size","Small","Large","Content","variant","correct_500","critical_500","white","NotificationDot","Medium","testId"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,IAAT,QAAqB,UAArB;AACA,SAAQC,MAAR,QAAqB,IAArB;;AAQA,IAAMC,cAAc,GAAGH,MAAM,CAACI,GAAV,sJACT,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CADS,EAER,UAACH,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CAFQ,EAGP,UAACH,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,KAA5B,GAAqCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,KAA5B,GAAoC,KAApF;AAAA,CAHO,CAApB;AAOA,IAAMC,OAAO,GAAGT,MAAM,CAACI,GAAV,0MACS,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACK,OAAN,KAAkB,UAAlB,GAA+BR,MAAM,CAACS,WAAtC,GAAoDT,MAAM,CAACU,YAAtE;AAAA,CADT,EAED,UAACP,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CAFC,EAGF,UAACH,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CAHE,EAIM,UAACH,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CAJN,EAKD,UAACH,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,eAAeL,MAAM,CAACW,KAAlD,GAA2DR,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,eAAeN,MAAM,CAACW,KAAlD,GAA0D,eAAeX,MAAM,CAACW,KAAtJ;AAAA,CALC,CAAb;;AASA,IAAMC,eAA2D,GAAG,SAA9DA,eAA8D,OAA2C;AAAA,uBAAzCR,IAAyC;AAAA,MAAzCA,IAAyC,0BAAlCL,IAAI,CAACc,MAA6B;AAAA,MAArBL,OAAqB,QAArBA,OAAqB;AAAA,MAAZM,MAAY,QAAZA,MAAY;AAC7G,sBACE,KAAC,cAAD;AAAgB,IAAA,IAAI,EAAEV,IAAtB;AAA4B,IAAA,OAAO,EAAEI,OAArC;AAAA,2BACE,KAAC,OAAD;AAAS,MAAA,IAAI,EAAEJ,IAAf;AAAqB,MAAA,OAAO,EAAEI,OAA9B;AAAuC,qBAAaM;AAApD;AADF,IADF;AAKD,CAND;;;AApBEN,EAAAA,O,aAAS,U,EAAa,U;AACtBM,EAAAA,M;;AA2BF,eAAeF,eAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Size } from '../types';\nimport {COLORS} from '..';\n\nexport interface NotificationProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  variant: 'critical' | 'positive';\n  testId?: string;\n}\n\nconst ContentWrapper = styled.div<NotificationProps>`\n  width: ${(props) => props.size === Size.Small ? '16px' : (props.size === Size.Large ? '24px' : '20px')};\n  height: ${(props) => props.size === Size.Small ? '16px' : (props.size === Size.Large ? '24px' : '20px')};\n  padding: ${(props) => props.size === Size.Small ? '3px' : (props.size === Size.Large ? '4px' : '4px')};\n  box-sizing: border-box;\n`;\n\nconst Content = styled.div<NotificationProps>`\n  background-color: ${(props) => props.variant === 'positive' ? COLORS.correct_500 : COLORS.critical_500};\n  height: ${(props) => props.size === Size.Small ? '10px' : (props.size === Size.Large ? '16px' : '12px')};\n  width: ${(props) => props.size === Size.Small ? '10px' : (props.size === Size.Large ? '16px' : '12px')};\n  border-radius: ${(props) => props.size === Size.Small ? '10px' : (props.size === Size.Large ? '16px' : '12px')};\n  border: ${(props) => props.size === Size.Small ? '2px solid ' + COLORS.white : (props.size === Size.Large ? '3px solid ' + COLORS.white : '2px solid ' + COLORS.white)};\n  box-sizing: border-box;\n`;\n\nconst NotificationDot: React.FunctionComponent<NotificationProps> = ({size = Size.Medium, variant, testId}) => {\n  return (\n    <ContentWrapper size={size} variant={variant}>\n      <Content size={size} variant={variant} data-testid={testId}/>\n    </ContentWrapper>\n  );\n};\n\nexport default NotificationDot;\n"],"file":"NotificationDot.js"}

package/dist/NotificationDot/index.d.ts

@@ -1 +1 @@
-export { default as NotificationDot } from './NotificationDot';
+export { default as NotificationDot } from './NotificationDot';

package/dist/Paginator/Paginator.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Paginator/Paginator.tsx"],"names":["Container","styled","nav","BREAKPOINTS","MEDIUM","Items","ul","Item","li","ComponentTextStyle","Regular","COLORS","neutral_600","focusStyles","Z_INDEXES","hover","primary_800","primary_20","active","primary_700","primary_100","neutral_800","neutral_20","Dots","ItemContent","primary_500","Step","up","target","disabled","page","onPageChange","id","history","handleButtonClick","push","event","Paginator","pageCount","currentPage","baseUrl","pages","from","to","i","findIndex","item","map"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {NavLink} from 'react-router-dom';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {ChevronLeft, ChevronRight} from '../icons/systemicons/SystemIcons';\r\nimport {ComponentMStyling} from '../styles/typography';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\nimport {useHistory} from 'react-router';\r\nimport {IconButton} from '../Button';\r\n\r\nconst Container = styled.nav`\r\n  margin: 20px 0;\r\n  display: flex;\r\n  justify-content: center;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    width: 75%;\r\n  }\r\n`;\r\n\r\nconst Items = styled.ul`\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\r\n  display: flex;\r\n`;\r\n\r\nconst Item = styled.li`\r\n  width: 48px;\r\n  height: 48px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  & > * {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 100%;\r\n    height: 100%;\r\n    text-decoration: none;\r\n\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n\r\n    &:focus,\r\n    &:focus-within {\r\n      ${focusStyles}\r\n    }\r\n  }\r\n  & > a:hover {\r\n    z-index: ${Z_INDEXES.hover};\r\n    color: ${COLORS.primary_800};\r\n    background-color: ${COLORS.primary_20};\r\n  }\r\n  & > a:active {\r\n    z-index: ${Z_INDEXES.active};\r\n    color: ${COLORS.primary_700};\r\n    background-color: ${COLORS.primary_100};\r\n  }\r\n  & > a.active {\r\n    z-index: ${Z_INDEXES.active};\r\n    color: ${COLORS.neutral_800};\r\n    background-color: ${COLORS.neutral_20};\r\n    cursor: default;\r\n    &:hover {\r\n      color: ${COLORS.primary_800};\r\n      background-color: ${COLORS.primary_20};\r\n    }\r\n    &:active {\r\n      color: ${COLORS.primary_700};\r\n      background-color: ${COLORS.primary_100};\r\n    }\r\n  }\r\n`;\r\n\r\nconst Dots = styled(Item)`\r\n  cursor: not-allowed;\r\n  &:after{\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n    content: '...';\r\n  }\r\n`;\r\n\r\nconst ItemContent = styled('div')`\r\n  text-align:center;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  position: relative;\r\n  width: 100%;\r\n  height: 100%;\r\n  \r\n  &.active:after{\r\n    content: '';\r\n    position: absolute;\r\n    bottom: 4px;\r\n    width: 32px;\r\n    border-radius: 4px;\r\n    height: 4px;\r\n    background-color: ${COLORS.primary_500}\r\n  }\r\n  &.active:hover:after{\r\n    background-color: ${COLORS.primary_700}\r\n  }\r\n  &.active:active:after{\r\n    background-color: ${COLORS.primary_800}\r\n  }\r\n`\r\n\r\ntype PaginatorProps = {\r\n  pageCount: number;\r\n  currentPage: number;\r\n  baseUrl: string;\r\n  onPageChange?: (page: number) => void;\r\n};\r\n\r\nconst Step = ({\r\n  up = true,\r\n  target = '',\r\n  disabled = false,\r\n  page,\r\n  onPageChange,\r\n  id,\r\n}: {\r\n  up: boolean;\r\n  target: string;\r\n  disabled: boolean;\r\n  page: number;\r\n  onPageChange?: (page: number) => void;\r\n  id?: string;\r\n}) => {\r\n  const history = useHistory();\r\n\r\n  const handleButtonClick = () => {\r\n    history.push(target);\r\n    onPageChange && onPageChange(page);\r\n  }\r\n\r\n  return (\r\n    <IconButton id={id}\r\n                action={event => handleButtonClick()}\r\n                variant={'secondary'}\r\n                shape={'circular'}\r\n                disabled={disabled}>\r\n      {up ? <ChevronRight/> : <ChevronLeft/>}\r\n    </IconButton>\r\n  )\r\n};\r\n\r\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\r\n  const pages = [];\r\n  let from = 2;\r\n  let to = 4;\r\n  if (pageCount === 0) return null;\r\n\r\n  if (pageCount > 1) {\r\n    if (currentPage >= 4 && currentPage <= pageCount - 2) {\r\n      from = currentPage - 1;\r\n      to = currentPage + 1;\r\n    } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\r\n      from = pageCount - 3;\r\n      to = pageCount - 1;\r\n    }\r\n    if (to > pageCount) {\r\n      to = pageCount;\r\n    }\r\n    for (let i = from; i <= to; i += 1) {\r\n      pages.push(i);\r\n    }\r\n  }\r\n\r\n  return (\r\n    <Container>\r\n      <Items>\r\n        <Step up={false}\r\n              target={`${baseUrl}/${currentPage - 1}`}\r\n              page={currentPage - 1}\r\n              disabled={currentPage === 1}\r\n              onPageChange={() => {\r\n                if (onPageChange) onPageChange(currentPage - 1);\r\n              }}\r\n              id=\"paginator-left\"/>\r\n        {pages.findIndex(item => item === 1) === -1 && (\r\n          <Item>\r\n            <NavLink\r\n              to={`${baseUrl}/1`}\r\n              onClick={() => {\r\n                if (onPageChange) onPageChange(1);\r\n              }}>\r\n                <ItemContent className={currentPage === 1 ? 'active' : ''}>\r\n                 <span>1</span>\r\n                </ItemContent>\r\n            </NavLink>\r\n          </Item>\r\n        )}\r\n        {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\r\n          <Dots/>\r\n        )}\r\n        {pages.map(page => (\r\n          <Item key={page}>\r\n            <NavLink\r\n              to={`${baseUrl}/${page}`}\r\n              onClick={() => {\r\n                if (onPageChange) onPageChange(page);\r\n              }}>\r\n                <ItemContent className={currentPage === page ? 'active' : ''}>\r\n                 <span>{page}</span>\r\n                </ItemContent>\r\n            </NavLink>\r\n          </Item>\r\n        ))}\r\n        {pageCount > 5 && currentPage <= pageCount - 3 && (\r\n          <Dots/>\r\n        )}\r\n        {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\r\n          <Item>\r\n            <NavLink\r\n              to={`${baseUrl}/${pageCount}`}\r\n              onClick={() => {\r\n                if (onPageChange) onPageChange(pageCount);\r\n              }}>\r\n                <ItemContent className={currentPage === pageCount ? 'active' : ''}>\r\n                 <span>{pageCount}</span>\r\n                </ItemContent>\r\n            </NavLink>\r\n          </Item>\r\n        )}\r\n        <Step up\r\n              target={`${baseUrl}/${currentPage + 1}`}\r\n              page={currentPage + 1}\r\n              disabled={currentPage === pageCount}\r\n              onPageChange={() => {\r\n                if (onPageChange) onPageChange(currentPage + 1);\r\n              }}\r\n              id=\"paginator-right\"/>\r\n      </Items>\r\n    </Container>\r\n  );\r\n};\r\n\r\nexport default Paginator;\r\n"],"file":"Paginator.cjs"}
+{"version":3,"sources":["../../src/Paginator/Paginator.tsx"],"names":["Container","styled","nav","BREAKPOINTS","MEDIUM","Items","ul","Item","li","ComponentTextStyle","Regular","COLORS","neutral_600","focusStyles","Z_INDEXES","hover","primary_800","primary_20","active","primary_700","primary_100","neutral_800","neutral_20","Dots","ItemContent","primary_500","Step","up","target","disabled","page","onPageChange","id","history","handleButtonClick","push","event","Paginator","pageCount","currentPage","baseUrl","pages","from","to","i","findIndex","item","map"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {ChevronLeft, ChevronRight} from '../icons/systemicons/SystemIcons';\nimport {ComponentMStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {useHistory} from 'react-router';\nimport {IconButton} from '../Button';\n\nconst Container = styled.nav`\n  margin: 20px 0;\n  display: flex;\n  justify-content: center;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 75%;\n  }\n`;\n\nconst Items = styled.ul`\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n`;\n\nconst Item = styled.li`\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & > * {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    text-decoration: none;\n\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n    &:focus,\n    &:focus-within {\n      ${focusStyles}\n    }\n  }\n  & > a:hover {\n    z-index: ${Z_INDEXES.hover};\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_20};\n  }\n  & > a:active {\n    z-index: ${Z_INDEXES.active};\n    color: ${COLORS.primary_700};\n    background-color: ${COLORS.primary_100};\n  }\n  & > a.active {\n    z-index: ${Z_INDEXES.active};\n    color: ${COLORS.neutral_800};\n    background-color: ${COLORS.neutral_20};\n    cursor: default;\n    &:hover {\n      color: ${COLORS.primary_800};\n      background-color: ${COLORS.primary_20};\n    }\n    &:active {\n      color: ${COLORS.primary_700};\n      background-color: ${COLORS.primary_100};\n    }\n  }\n`;\n\nconst Dots = styled(Item)`\n  cursor: not-allowed;\n  &:after{\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    content: '...';\n  }\n`;\n\nconst ItemContent = styled('div')`\n  text-align:center;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  \n  &.active:after{\n    content: '';\n    position: absolute;\n    bottom: 4px;\n    width: 32px;\n    border-radius: 4px;\n    height: 4px;\n    background-color: ${COLORS.primary_500}\n  }\n  &.active:hover:after{\n    background-color: ${COLORS.primary_700}\n  }\n  &.active:active:after{\n    background-color: ${COLORS.primary_800}\n  }\n`\n\ntype PaginatorProps = {\n  pageCount: number;\n  currentPage: number;\n  baseUrl: string;\n  onPageChange?: (page: number) => void;\n};\n\nconst Step = ({\n  up = true,\n  target = '',\n  disabled = false,\n  page,\n  onPageChange,\n  id,\n}: {\n  up: boolean;\n  target: string;\n  disabled: boolean;\n  page: number;\n  onPageChange?: (page: number) => void;\n  id?: string;\n}) => {\n  const history = useHistory();\n\n  const handleButtonClick = () => {\n    history.push(target);\n    onPageChange && onPageChange(page);\n  }\n\n  return (\n    <IconButton id={id}\n                action={event => handleButtonClick()}\n                variant={'secondary'}\n                shape={'circular'}\n                disabled={disabled}>\n      {up ? <ChevronRight/> : <ChevronLeft/>}\n    </IconButton>\n  )\n};\n\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\n  const pages = [];\n  let from = 2;\n  let to = 4;\n  if (pageCount === 0) return null;\n\n  if (pageCount > 1) {\n    if (currentPage >= 4 && currentPage <= pageCount - 2) {\n      from = currentPage - 1;\n      to = currentPage + 1;\n    } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\n      from = pageCount - 3;\n      to = pageCount - 1;\n    }\n    if (to > pageCount) {\n      to = pageCount;\n    }\n    for (let i = from; i <= to; i += 1) {\n      pages.push(i);\n    }\n  }\n\n  return (\n    <Container>\n      <Items>\n        <Step up={false}\n              target={`${baseUrl}/${currentPage - 1}`}\n              page={currentPage - 1}\n              disabled={currentPage === 1}\n              onPageChange={() => {\n                if (onPageChange) onPageChange(currentPage - 1);\n              }}\n              id=\"paginator-left\"/>\n        {pages.findIndex(item => item === 1) === -1 && (\n          <Item>\n            <NavLink\n              to={`${baseUrl}/1`}\n              onClick={() => {\n                if (onPageChange) onPageChange(1);\n              }}>\n                <ItemContent className={currentPage === 1 ? 'active' : ''}>\n                 <span>1</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        )}\n        {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\n          <Dots/>\n        )}\n        {pages.map(page => (\n          <Item key={page}>\n            <NavLink\n              to={`${baseUrl}/${page}`}\n              onClick={() => {\n                if (onPageChange) onPageChange(page);\n              }}>\n                <ItemContent className={currentPage === page ? 'active' : ''}>\n                 <span>{page}</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        ))}\n        {pageCount > 5 && currentPage <= pageCount - 3 && (\n          <Dots/>\n        )}\n        {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\n          <Item>\n            <NavLink\n              to={`${baseUrl}/${pageCount}`}\n              onClick={() => {\n                if (onPageChange) onPageChange(pageCount);\n              }}>\n                <ItemContent className={currentPage === pageCount ? 'active' : ''}>\n                 <span>{pageCount}</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        )}\n        <Step up\n              target={`${baseUrl}/${currentPage + 1}`}\n              page={currentPage + 1}\n              disabled={currentPage === pageCount}\n              onPageChange={() => {\n                if (onPageChange) onPageChange(currentPage + 1);\n              }}\n              id=\"paginator-right\"/>\n      </Items>\n    </Container>\n  );\n};\n\nexport default Paginator;\n"],"file":"Paginator.cjs"}

package/dist/Paginator/Paginator.d.ts

@@ -1,8 +1,8 @@
-declare type PaginatorProps = {
-    pageCount: number;
-    currentPage: number;
-    baseUrl: string;
-    onPageChange?: (page: number) => void;
-};
-declare const Paginator: ({ pageCount, currentPage, baseUrl, onPageChange }: PaginatorProps) => JSX.Element | null;
-export default Paginator;
+declare type PaginatorProps = {
+    pageCount: number;
+    currentPage: number;
+    baseUrl: string;
+    onPageChange?: (page: number) => void;
+};
+declare const Paginator: ({ pageCount, currentPage, baseUrl, onPageChange }: PaginatorProps) => JSX.Element | null;
+export default Paginator;

package/dist/Paginator/Paginator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Paginator/Paginator.tsx"],"names":["React","styled","NavLink","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","ChevronLeft","ChevronRight","ComponentMStyling","Z_INDEXES","useHistory","IconButton","Container","nav","MEDIUM","Items","ul","Item","li","Regular","neutral_600","hover","primary_800","primary_20","active","primary_700","primary_100","neutral_800","neutral_20","Dots","ItemContent","primary_500","Step","up","target","disabled","page","onPageChange","id","history","handleButtonClick","push","event","Paginator","pageCount","currentPage","baseUrl","pages","from","to","i","findIndex","item","map"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {NavLink} from 'react-router-dom';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {ChevronLeft, ChevronRight} from '../icons/systemicons/SystemIcons';\r\nimport {ComponentMStyling} from '../styles/typography';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\nimport {useHistory} from 'react-router';\r\nimport {IconButton} from '../Button';\r\n\r\nconst Container = styled.nav`\r\n  margin: 20px 0;\r\n  display: flex;\r\n  justify-content: center;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    width: 75%;\r\n  }\r\n`;\r\n\r\nconst Items = styled.ul`\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\r\n  display: flex;\r\n`;\r\n\r\nconst Item = styled.li`\r\n  width: 48px;\r\n  height: 48px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  & > * {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 100%;\r\n    height: 100%;\r\n    text-decoration: none;\r\n\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n\r\n    &:focus,\r\n    &:focus-within {\r\n      ${focusStyles}\r\n    }\r\n  }\r\n  & > a:hover {\r\n    z-index: ${Z_INDEXES.hover};\r\n    color: ${COLORS.primary_800};\r\n    background-color: ${COLORS.primary_20};\r\n  }\r\n  & > a:active {\r\n    z-index: ${Z_INDEXES.active};\r\n    color: ${COLORS.primary_700};\r\n    background-color: ${COLORS.primary_100};\r\n  }\r\n  & > a.active {\r\n    z-index: ${Z_INDEXES.active};\r\n    color: ${COLORS.neutral_800};\r\n    background-color: ${COLORS.neutral_20};\r\n    cursor: default;\r\n    &:hover {\r\n      color: ${COLORS.primary_800};\r\n      background-color: ${COLORS.primary_20};\r\n    }\r\n    &:active {\r\n      color: ${COLORS.primary_700};\r\n      background-color: ${COLORS.primary_100};\r\n    }\r\n  }\r\n`;\r\n\r\nconst Dots = styled(Item)`\r\n  cursor: not-allowed;\r\n  &:after{\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n    content: '...';\r\n  }\r\n`;\r\n\r\nconst ItemContent = styled('div')`\r\n  text-align:center;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  position: relative;\r\n  width: 100%;\r\n  height: 100%;\r\n  \r\n  &.active:after{\r\n    content: '';\r\n    position: absolute;\r\n    bottom: 4px;\r\n    width: 32px;\r\n    border-radius: 4px;\r\n    height: 4px;\r\n    background-color: ${COLORS.primary_500}\r\n  }\r\n  &.active:hover:after{\r\n    background-color: ${COLORS.primary_700}\r\n  }\r\n  &.active:active:after{\r\n    background-color: ${COLORS.primary_800}\r\n  }\r\n`\r\n\r\ntype PaginatorProps = {\r\n  pageCount: number;\r\n  currentPage: number;\r\n  baseUrl: string;\r\n  onPageChange?: (page: number) => void;\r\n};\r\n\r\nconst Step = ({\r\n  up = true,\r\n  target = '',\r\n  disabled = false,\r\n  page,\r\n  onPageChange,\r\n  id,\r\n}: {\r\n  up: boolean;\r\n  target: string;\r\n  disabled: boolean;\r\n  page: number;\r\n  onPageChange?: (page: number) => void;\r\n  id?: string;\r\n}) => {\r\n  const history = useHistory();\r\n\r\n  const handleButtonClick = () => {\r\n    history.push(target);\r\n    onPageChange && onPageChange(page);\r\n  }\r\n\r\n  return (\r\n    <IconButton id={id}\r\n                action={event => handleButtonClick()}\r\n                variant={'secondary'}\r\n                shape={'circular'}\r\n                disabled={disabled}>\r\n      {up ? <ChevronRight/> : <ChevronLeft/>}\r\n    </IconButton>\r\n  )\r\n};\r\n\r\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\r\n  const pages = [];\r\n  let from = 2;\r\n  let to = 4;\r\n  if (pageCount === 0) return null;\r\n\r\n  if (pageCount > 1) {\r\n    if (currentPage >= 4 && currentPage <= pageCount - 2) {\r\n      from = currentPage - 1;\r\n      to = currentPage + 1;\r\n    } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\r\n      from = pageCount - 3;\r\n      to = pageCount - 1;\r\n    }\r\n    if (to > pageCount) {\r\n      to = pageCount;\r\n    }\r\n    for (let i = from; i <= to; i += 1) {\r\n      pages.push(i);\r\n    }\r\n  }\r\n\r\n  return (\r\n    <Container>\r\n      <Items>\r\n        <Step up={false}\r\n              target={`${baseUrl}/${currentPage - 1}`}\r\n              page={currentPage - 1}\r\n              disabled={currentPage === 1}\r\n              onPageChange={() => {\r\n                if (onPageChange) onPageChange(currentPage - 1);\r\n              }}\r\n              id=\"paginator-left\"/>\r\n        {pages.findIndex(item => item === 1) === -1 && (\r\n          <Item>\r\n            <NavLink\r\n              to={`${baseUrl}/1`}\r\n              onClick={() => {\r\n                if (onPageChange) onPageChange(1);\r\n              }}>\r\n                <ItemContent className={currentPage === 1 ? 'active' : ''}>\r\n                 <span>1</span>\r\n                </ItemContent>\r\n            </NavLink>\r\n          </Item>\r\n        )}\r\n        {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\r\n          <Dots/>\r\n        )}\r\n        {pages.map(page => (\r\n          <Item key={page}>\r\n            <NavLink\r\n              to={`${baseUrl}/${page}`}\r\n              onClick={() => {\r\n                if (onPageChange) onPageChange(page);\r\n              }}>\r\n                <ItemContent className={currentPage === page ? 'active' : ''}>\r\n                 <span>{page}</span>\r\n                </ItemContent>\r\n            </NavLink>\r\n          </Item>\r\n        ))}\r\n        {pageCount > 5 && currentPage <= pageCount - 3 && (\r\n          <Dots/>\r\n        )}\r\n        {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\r\n          <Item>\r\n            <NavLink\r\n              to={`${baseUrl}/${pageCount}`}\r\n              onClick={() => {\r\n                if (onPageChange) onPageChange(pageCount);\r\n              }}>\r\n                <ItemContent className={currentPage === pageCount ? 'active' : ''}>\r\n                 <span>{pageCount}</span>\r\n                </ItemContent>\r\n            </NavLink>\r\n          </Item>\r\n        )}\r\n        <Step up\r\n              target={`${baseUrl}/${currentPage + 1}`}\r\n              page={currentPage + 1}\r\n              disabled={currentPage === pageCount}\r\n              onPageChange={() => {\r\n                if (onPageChange) onPageChange(currentPage + 1);\r\n              }}\r\n              id=\"paginator-right\"/>\r\n      </Items>\r\n    </Container>\r\n  );\r\n};\r\n\r\nexport default Paginator;\r\n"],"file":"Paginator.js"}
+{"version":3,"sources":["../../src/Paginator/Paginator.tsx"],"names":["React","styled","NavLink","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","ChevronLeft","ChevronRight","ComponentMStyling","Z_INDEXES","useHistory","IconButton","Container","nav","MEDIUM","Items","ul","Item","li","Regular","neutral_600","hover","primary_800","primary_20","active","primary_700","primary_100","neutral_800","neutral_20","Dots","ItemContent","primary_500","Step","up","target","disabled","page","onPageChange","id","history","handleButtonClick","push","event","Paginator","pageCount","currentPage","baseUrl","pages","from","to","i","findIndex","item","map"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {ChevronLeft, ChevronRight} from '../icons/systemicons/SystemIcons';\nimport {ComponentMStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {useHistory} from 'react-router';\nimport {IconButton} from '../Button';\n\nconst Container = styled.nav`\n  margin: 20px 0;\n  display: flex;\n  justify-content: center;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 75%;\n  }\n`;\n\nconst Items = styled.ul`\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n`;\n\nconst Item = styled.li`\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & > * {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    text-decoration: none;\n\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n    &:focus,\n    &:focus-within {\n      ${focusStyles}\n    }\n  }\n  & > a:hover {\n    z-index: ${Z_INDEXES.hover};\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_20};\n  }\n  & > a:active {\n    z-index: ${Z_INDEXES.active};\n    color: ${COLORS.primary_700};\n    background-color: ${COLORS.primary_100};\n  }\n  & > a.active {\n    z-index: ${Z_INDEXES.active};\n    color: ${COLORS.neutral_800};\n    background-color: ${COLORS.neutral_20};\n    cursor: default;\n    &:hover {\n      color: ${COLORS.primary_800};\n      background-color: ${COLORS.primary_20};\n    }\n    &:active {\n      color: ${COLORS.primary_700};\n      background-color: ${COLORS.primary_100};\n    }\n  }\n`;\n\nconst Dots = styled(Item)`\n  cursor: not-allowed;\n  &:after{\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    content: '...';\n  }\n`;\n\nconst ItemContent = styled('div')`\n  text-align:center;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  \n  &.active:after{\n    content: '';\n    position: absolute;\n    bottom: 4px;\n    width: 32px;\n    border-radius: 4px;\n    height: 4px;\n    background-color: ${COLORS.primary_500}\n  }\n  &.active:hover:after{\n    background-color: ${COLORS.primary_700}\n  }\n  &.active:active:after{\n    background-color: ${COLORS.primary_800}\n  }\n`\n\ntype PaginatorProps = {\n  pageCount: number;\n  currentPage: number;\n  baseUrl: string;\n  onPageChange?: (page: number) => void;\n};\n\nconst Step = ({\n  up = true,\n  target = '',\n  disabled = false,\n  page,\n  onPageChange,\n  id,\n}: {\n  up: boolean;\n  target: string;\n  disabled: boolean;\n  page: number;\n  onPageChange?: (page: number) => void;\n  id?: string;\n}) => {\n  const history = useHistory();\n\n  const handleButtonClick = () => {\n    history.push(target);\n    onPageChange && onPageChange(page);\n  }\n\n  return (\n    <IconButton id={id}\n                action={event => handleButtonClick()}\n                variant={'secondary'}\n                shape={'circular'}\n                disabled={disabled}>\n      {up ? <ChevronRight/> : <ChevronLeft/>}\n    </IconButton>\n  )\n};\n\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\n  const pages = [];\n  let from = 2;\n  let to = 4;\n  if (pageCount === 0) return null;\n\n  if (pageCount > 1) {\n    if (currentPage >= 4 && currentPage <= pageCount - 2) {\n      from = currentPage - 1;\n      to = currentPage + 1;\n    } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\n      from = pageCount - 3;\n      to = pageCount - 1;\n    }\n    if (to > pageCount) {\n      to = pageCount;\n    }\n    for (let i = from; i <= to; i += 1) {\n      pages.push(i);\n    }\n  }\n\n  return (\n    <Container>\n      <Items>\n        <Step up={false}\n              target={`${baseUrl}/${currentPage - 1}`}\n              page={currentPage - 1}\n              disabled={currentPage === 1}\n              onPageChange={() => {\n                if (onPageChange) onPageChange(currentPage - 1);\n              }}\n              id=\"paginator-left\"/>\n        {pages.findIndex(item => item === 1) === -1 && (\n          <Item>\n            <NavLink\n              to={`${baseUrl}/1`}\n              onClick={() => {\n                if (onPageChange) onPageChange(1);\n              }}>\n                <ItemContent className={currentPage === 1 ? 'active' : ''}>\n                 <span>1</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        )}\n        {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\n          <Dots/>\n        )}\n        {pages.map(page => (\n          <Item key={page}>\n            <NavLink\n              to={`${baseUrl}/${page}`}\n              onClick={() => {\n                if (onPageChange) onPageChange(page);\n              }}>\n                <ItemContent className={currentPage === page ? 'active' : ''}>\n                 <span>{page}</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        ))}\n        {pageCount > 5 && currentPage <= pageCount - 3 && (\n          <Dots/>\n        )}\n        {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\n          <Item>\n            <NavLink\n              to={`${baseUrl}/${pageCount}`}\n              onClick={() => {\n                if (onPageChange) onPageChange(pageCount);\n              }}>\n                <ItemContent className={currentPage === pageCount ? 'active' : ''}>\n                 <span>{pageCount}</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        )}\n        <Step up\n              target={`${baseUrl}/${currentPage + 1}`}\n              page={currentPage + 1}\n              disabled={currentPage === pageCount}\n              onPageChange={() => {\n                if (onPageChange) onPageChange(currentPage + 1);\n              }}\n              id=\"paginator-right\"/>\n      </Items>\n    </Container>\n  );\n};\n\nexport default Paginator;\n"],"file":"Paginator.js"}

package/dist/Paginator/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Paginator/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["import Paginator from './Paginator';\r\n\r\nexport { Paginator };\r\n"],"file":"index.cjs"}
+{"version":3,"sources":["../../src/Paginator/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["import Paginator from './Paginator';\n\nexport { Paginator };\n"],"file":"index.cjs"}

package/dist/Paginator/index.d.ts

@@ -1,2 +1,2 @@
-import Paginator from './Paginator';
-export { Paginator };
+import Paginator from './Paginator';
+export { Paginator };

package/dist/Paginator/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Paginator/index.ts"],"names":["Paginator"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,aAAtB;AAEA,SAASA,SAAT","sourcesContent":["import Paginator from './Paginator';\r\n\r\nexport { Paginator };\r\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/Paginator/index.ts"],"names":["Paginator"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,aAAtB;AAEA,SAASA,SAAT","sourcesContent":["import Paginator from './Paginator';\n\nexport { Paginator };\n"],"file":"index.js"}

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","Position","Bottom","Top","Left","Right","showArrowPointer","renderArrowStyles","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';\r\nimport styled from 'styled-components';\r\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\r\nimport { Button, IconButton } from '../Button';\r\nimport { SystemIcons } from '../icons';\r\nimport { BOXSHADOWS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling, scrollBarStyling, Z_INDEXES } from '../styles';\r\nimport { Position, Size } from '../types';\r\n\r\nconst Container = styled.div<{size: Size, position: Position, showArrowPointer: boolean}>`\r\n  //height: ${props=>props.size===Size.Small ? '240px' : (props.size===Size.Large ? '480px' : '360px')};\r\n  min-width: ${props=>props.size===Size.Small ? '320px' : (props.size===Size.Large ? '640px' : '480px')};\r\n  border-radius: 4px;\r\n  background: ${COLORS.white};\r\n  cursor: default;\r\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\r\n\r\n  position: absolute;  \r\n  visibility: hidden;\r\n  opacity: 0;\r\n  z-index: ${Z_INDEXES.popover};\r\n\r\n  ${props => (props.position == Position.Bottom ? 'right: 50%; top: calc(100% + 16px); transform: translateX(50%);' : '')}\r\n  ${props => (props.position == Position.Top ? 'right: 50%; bottom: calc(100% + 16px); transform: translateX(50%);' : '')}\r\n\r\n  ${props => (props.position == Position.Left ? 'bottom: 50%; right: calc(100% + 16px); transform: translateY(50%);' : '')}\r\n  ${props => (props.position == Position.Right ? 'bottom: 50%; left: calc(100% + 16px); transform: translateY(50%);' : '')}\r\n\r\n  &::after {\r\n    ${props => props.showArrowPointer ? renderArrowStyles(props.position) : ''}\r\n`;\r\n\r\nconst TopContainer = styled.div<{size: Size}>`\r\n  height: ${props=>props.size===Size.Small ? '56px' : (props.size===Size.Large ? '72px' : '64px')};\r\n  max-width: ${props=>props.size===Size.Small ? '344px' : (props.size===Size.Large ? '624px' : '464px')};\r\n  display: flex;\r\n`;\r\n\r\nconst MainContentWrapper = styled.div<{size: Size}>`\r\n  margin: 8px;\r\n`;\r\n\r\nconst MiddleContainer = styled.div<{size: Size}>`\r\n  height: ${props=>props.size===Size.Small ? '104px' : (props.size===Size.Large ? '304px' : '208px')};\r\n  max-width: ${props=>props.size===Size.Small ? '312px' : (props.size===Size.Large ? '576px' : '424px')};\r\n  padding: ${props=>props.size===Size.Small ? '0 8px' : (props.size===Size.Large ? '0 16px' : '0 12px')};\r\n  overflow-y: auto;\r\n  ${scrollBarStyling(Size.Small)}\r\n`;\r\n\r\nconst BottomContainer = styled.div<{size: Size}>`\r\n  height: ${props=>props.size===Size.Small ? '64px' : (props.size===Size.Large ? '88px' : '72px')};\r\n  max-width: ${props=>props.size===Size.Small ? '344px' : (props.size===Size.Large ? '624px' : '464px')};\r\n  display: flex;\r\n\r\n  .bottom-flex {\r\n    flex: 1;\r\n  }\r\n`;\r\n\r\nconst TextContainer = styled.div<{note: boolean, size: Size}>`\r\n  display: flex;\r\n  flex-direction: column;\r\n  margin: ${props=>renderMargins(props.note, props.size)};\r\n  flex-grow: 1;\r\n`;\r\n\r\nconst NoteContainer = styled.div<{size: Size}>`\r\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))}\r\n`;\r\n\r\nconst LabelContainer = styled.div<{size: Size}>`\r\n  ${props=>props.size===Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, null) : (props.size===Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, null) : ComponentMStyling(ComponentTextStyle.Bold, null))}\r\n`;\r\n\r\nconst CloseButtonContainer = styled.div<{size: Size}>`\r\n  margin: ${props=>props.size===Size.Small ? '4px 16px 4px 0' : (props.size===Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0')};\r\n`;\r\n\r\nconst TextButtonContainer = styled.div<{size: Size}>`\r\n  margin: ${props=>props.size===Size.Small ? '8px 0 8px 16px' : (props.size===Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px')};\r\n`;\r\n\r\nconst IconButtonContainer = styled.div<{size: Size}>`\r\n  margin: ${props=>props.size===Size.Small ? '8px 16px 8px 0' : (props.size===Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0')};\r\n  display: flex;\r\n`;\r\n\r\nconst Wrapper = styled.div<{position: Position, showOnClick: boolean, showPopover: boolean}>`\r\n  position: relative;\r\n\r\n  .pointer-space {\r\n    height: ${props=>props.position===Position.Top || props.position===Position.Bottom ? '16px' : '100%'};\r\n    width: ${props=>props.position===Position.Left || props.position===Position.Right ? '16px' : '100%'};\r\n    position: absolute;\r\n\r\n    ${props=>props.position===Position.Left ? 'right:100%; bottom: 0%' : ''};\r\n    ${props=>props.position===Position.Right ? 'left:100%; bottom: 0%' : ''};\r\n\r\n    ${props=>props.position===Position.Top ? 'bottom: 100%' : ''};\r\n    ${props=>props.position===Position.Bottom ? 'top: 100%' : ''};\r\n  }\r\n\r\n  ${props=>props.showOnClick ? \r\n    `${Container} {\r\n        visibility: ${props.showPopover ? 'visible' : 'hidden'};\r\n        opacity: ${props.showPopover ? '1' : '0'};\r\n    }\r\n    cursor: pointer;` \r\n    : \r\n    `&:hover {\r\n      ${Container} {\r\n        visibility: visible;\r\n        opacity: 1;\r\n      }\r\n    }`\r\n  }\r\n`;\r\n\r\nconst renderMargins = (isNotePresent: boolean, size: Size): string => {\r\n  if(isNotePresent){\r\n    return (size===Size.Small ? '10px 16px' : (size===Size.Large ? '14px 24px' : '12px 20px'));\r\n  }\r\n  else{\r\n    return (size===Size.Small ? '18px 16px' : (size===Size.Large ? '24px' : '20px'));\r\n  }\r\n}\r\n\r\nconst renderArrowStyles = (position: Position) => {\r\n  if(position === Position.Bottom){\r\n    return `height: 0px;\r\n            width: 0px;\r\n            border-top: 16px solid transparent;\r\n            border-right: 12px solid transparent;\r\n            border-bottom: 16px solid rgb(255,255,255);\r\n            border-left: 12px solid transparent;\r\n            content: \"\";\r\n            position: absolute;\r\n            right: calc(50% - 12px);\r\n            bottom: calc(100% - 1px);`\r\n  }\r\n\r\n  if(position === Position.Top){\r\n    return `height: 0px;\r\n            width: 0px;\r\n            border-top: 16px solid rgb(255,255,255);\r\n            border-right: 12px solid transparent;\r\n            border-bottom: 16px solid transparent;\r\n            border-left: 12px solid transparent;\r\n            content: \"\";\r\n            position: absolute;\r\n            right: calc(50% - 12px);\r\n            top: calc(100% - 1px);`\r\n  }\r\n\r\n  if(position === Position.Left){\r\n    return `height: 0px;\r\n            width: 0px;\r\n            border-top: 12px solid transparent;\r\n            border-right: 16px solid transparent;\r\n            border-bottom: 12px solid transparent;\r\n            border-left: 16px solid rgb(255,255,255);\r\n            content: \"\";\r\n            position: absolute;\r\n            left: calc(100% - 1px);\r\n            bottom: calc(50% - 12px);`\r\n  }\r\n\r\n  if(position === Position.Right){\r\n    return `height: 0px;\r\n            width: 0px;\r\n            border-top: 12px solid transparent;\r\n            border-right: 16px solid rgb(255,255,255);\r\n            border-bottom: 12px solid transparent;\r\n            border-left: 16px solid transparent;\r\n            content: \"\";\r\n            position: absolute;\r\n            right: calc(100% - 1px);\r\n            bottom: calc(50% - 12px);`\r\n  }\r\n}\r\n\r\ntype topSectionProps = {\r\n  text: string;\r\n  note?: string;\r\n}\r\n\r\ntype actionButtonProps = {\r\n  icon: React.ReactNode;\r\n  action: ()=>void;\r\n  label?: string;\r\n}\r\n\r\ntype bottomSectionProps = {\r\n  iconButtons?: actionButtonProps[];\r\n  textButton?: actionButtonProps;\r\n}\r\n\r\ntype PopoverProps = {\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  topSectionProps?: topSectionProps;\r\n  bottomSectionProps?: bottomSectionProps;\r\n  mainContent: React.ReactNode;\r\n  children: React.ReactNode;\r\n  position: Position.Top | Position.Bottom | Position.Right | Position.Left;\r\n  showOnClick: boolean;\r\n  showArrowPointer?: boolean;\r\n}\r\n\r\nconst Popover: React.FunctionComponent<PopoverProps> = \r\n({\r\n    size=Size.Medium,\r\n    topSectionProps,\r\n    bottomSectionProps,\r\n    mainContent,\r\n    children,\r\n    position,\r\n    showOnClick=false,\r\n    showArrowPointer=false\r\n}) => {\r\n\r\n  const [showPopover, setShowPopover] = React.useState(false);\r\n  const popoverRef = React.useRef<any>();\r\n\r\n  React.useEffect(()=>{\r\n    const checkIfClickedOutside = (e: { target: any; }) => {\r\n      if (showPopover && popoverRef.current && !popoverRef.current.contains(e.target)) {\r\n        setShowPopover(false);\r\n      }\r\n    }\r\n\r\n    document.addEventListener(\"mousedown\", checkIfClickedOutside)\r\n\r\n    return () => {\r\n      document.removeEventListener(\"mousedown\", checkIfClickedOutside)\r\n    }\r\n  },[showPopover]);\r\n\r\n  return (\r\n    <Wrapper position={position} showOnClick={showOnClick} showPopover={showPopover}>\r\n      <Container size={size} position={position} ref={popoverRef} showArrowPointer={showArrowPointer}>\r\n        {!!topSectionProps && \r\n          <TopContainer size={size}>\r\n            <TextContainer note={!!topSectionProps?.note} size={size}>\r\n              {topSectionProps?.note && \r\n                <NoteContainer size={size}>\r\n                  {topSectionProps.note}\r\n                </NoteContainer>\r\n              }\r\n              <LabelContainer size={size}>\r\n                {topSectionProps?.text}\r\n              </LabelContainer>\r\n            </TextContainer>\r\n\r\n            {showOnClick && \r\n              <CloseButtonContainer size={size} data-testid={'closeBtn'}>\r\n                <IconButton action={()=>setShowPopover(false)} useTransparentBackground iconColor={COLORS.neutral_600} variant='secondary' shape='circular'>\r\n                  <SystemIcons.Close />\r\n                </IconButton>\r\n              </CloseButtonContainer>\r\n            }\r\n          </TopContainer>\r\n        }\r\n\r\n        <MainContentWrapper size={size}>\r\n          <MiddleContainer size={size}>\r\n            {mainContent}\r\n          </MiddleContainer>\r\n        </MainContentWrapper>\r\n\r\n        {!!bottomSectionProps && \r\n          <BottomContainer size={size}>\r\n            {!!bottomSectionProps?.textButton?.icon && \r\n              <TextButtonContainer size={size} data-testid={'textBtn'}>\r\n                <Button size={size} variant='secondary' icon={bottomSectionProps.textButton.icon} onClick={bottomSectionProps.textButton.action}>\r\n                  {bottomSectionProps.textButton.label}\r\n                </Button>\r\n              </TextButtonContainer>\r\n            }\r\n\r\n            <div className='bottom-flex'/>\r\n            \r\n            <IconButtonContainer size={size} data-testid={'iconBtn'}>\r\n              {bottomSectionProps?.iconButtons?.map((iconButton) =>\r\n                \r\n                  <IconButton action={iconButton.action} variant='secondary' shape='circular' useTransparentBackground>\r\n                    {iconButton.icon}\r\n                  </IconButton>            \r\n              )}\r\n            </IconButtonContainer>\r\n          </BottomContainer>\r\n        }\r\n      </Container>\r\n\r\n      <div onClick={()=>showOnClick && setShowPopover(!showPopover)}>\r\n        {children}\r\n\r\n        <div className='pointer-space'/>\r\n      </div>\r\n\r\n    </Wrapper>\r\n  );\r\n};\r\n\r\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","showArrowPointer","renderArrowStyles","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, showArrowPointer: boolean}>`\n  //height: ${props=>props.size===Size.Small ? '240px' : (props.size===Size.Large ? '480px' : '360px')};\n  min-width: ${props=>props.size===Size.Small ? '320px' : (props.size===Size.Large ? '640px' : '480px')};\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% + 16px); transform: translateX(50%);' : '')}\n  ${props => (props.position == Position.Top ? 'right: 50%; bottom: calc(100% + 16px); transform: translateX(50%);' : '')}\n\n  ${props => (props.position == Position.Left ? 'bottom: 50%; right: calc(100% + 16px); transform: translateY(50%);' : '')}\n  ${props => (props.position == Position.Right ? 'bottom: 50%; left: calc(100% + 16px); transform: translateY(50%);' : '')}\n\n  &::after {\n    ${props => props.showArrowPointer ? renderArrowStyles(props.position) : ''}\n`;\n\nconst TopContainer = styled.div<{size: Size}>`\n  height: ${props=>props.size===Size.Small ? '56px' : (props.size===Size.Large ? '72px' : '64px')};\n  max-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  margin: 8px;\n`;\n\nconst MiddleContainer = styled.div<{size: Size}>`\n  height: ${props=>props.size===Size.Small ? '104px' : (props.size===Size.Large ? '304px' : '208px')};\n  max-width: ${props=>props.size===Size.Small ? '312px' : (props.size===Size.Large ? '576px' : '424px')};\n  padding: ${props=>props.size===Size.Small ? '0 8px' : (props.size===Size.Large ? '0 16px' : '0 12px')};\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  max-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 ? '16px' : '100%'};\n    width: ${props=>props.position===Position.Left || props.position===Position.Right ? '16px' : '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\nconst renderArrowStyles = (position: Position) => {\n  if(position === Position.Bottom){\n    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);`\n  }\n\n  if(position === Position.Top){\n    return `height: 0px;\n            width: 0px;\n            border-top: 16px solid rgb(255,255,255);\n            border-right: 12px solid transparent;\n            border-bottom: 16px solid transparent;\n            border-left: 12px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(50% - 12px);\n            top: calc(100% - 1px);`\n  }\n\n  if(position === Position.Left){\n    return `height: 0px;\n            width: 0px;\n            border-top: 12px solid transparent;\n            border-right: 16px solid transparent;\n            border-bottom: 12px solid transparent;\n            border-left: 16px solid rgb(255,255,255);\n            content: \"\";\n            position: absolute;\n            left: calc(100% - 1px);\n            bottom: calc(50% - 12px);`\n  }\n\n  if(position === Position.Right){\n    return `height: 0px;\n            width: 0px;\n            border-top: 12px solid transparent;\n            border-right: 16px solid rgb(255,255,255);\n            border-bottom: 12px solid transparent;\n            border-left: 16px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(100% - 1px);\n            bottom: calc(50% - 12px);`\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  showArrowPointer?: 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    showArrowPointer=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} showArrowPointer={showArrowPointer}>\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,27 +1,27 @@
-import * as React from 'react';
-import { Position, Size } from '../types';
-declare type topSectionProps = {
-    text: string;
-    note?: string;
-};
-declare type actionButtonProps = {
-    icon: React.ReactNode;
-    action: () => void;
-    label?: string;
-};
-declare type bottomSectionProps = {
-    iconButtons?: actionButtonProps[];
-    textButton?: actionButtonProps;
-};
-declare type PopoverProps = {
-    size?: Size.Small | Size.Medium | Size.Large;
-    topSectionProps?: topSectionProps;
-    bottomSectionProps?: bottomSectionProps;
-    mainContent: React.ReactNode;
-    children: React.ReactNode;
-    position: Position.Top | Position.Bottom | Position.Right | Position.Left;
-    showOnClick: boolean;
-    showArrowPointer?: boolean;
-};
-declare const Popover: React.FunctionComponent<PopoverProps>;
-export default Popover;
+import * as React from 'react';
+import { Position, Size } from '../types';
+declare type topSectionProps = {
+    text: string;
+    note?: string;
+};
+declare type actionButtonProps = {
+    icon: React.ReactNode;
+    action: () => void;
+    label?: string;
+};
+declare type bottomSectionProps = {
+    iconButtons?: actionButtonProps[];
+    textButton?: actionButtonProps;
+};
+declare type PopoverProps = {
+    size?: Size.Small | Size.Medium | Size.Large;
+    topSectionProps?: topSectionProps;
+    bottomSectionProps?: bottomSectionProps;
+    mainContent: React.ReactNode;
+    children: React.ReactNode;
+    position: Position.Top | Position.Bottom | Position.Right | Position.Left;
+    showOnClick: boolean;
+    showArrowPointer?: boolean;
+};
+declare const Popover: React.FunctionComponent<PopoverProps>;
+export default Popover;

package/dist/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Popover/Popover.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXSStyling","Button","IconButton","SystemIcons","BOXSHADOWS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","scrollBarStyling","Z_INDEXES","Position","Size","Container","div","props","size","Small","Large","white","BOXSHADOW_CENTERED","popover","position","Bottom","Top","Left","Right","showArrowPointer","renderArrowStyles","TopContainer","MainContentWrapper","MiddleContainer","BottomContainer","TextContainer","renderMargins","note","NoteContainer","Regular","neutral_600","LabelContainer","Bold","CloseButtonContainer","TextButtonContainer","IconButtonContainer","Wrapper","showOnClick","showPopover","isNotePresent","Popover","Medium","topSectionProps","bottomSectionProps","mainContent","children","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';\r\nimport styled from 'styled-components';\r\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\r\nimport { Button, IconButton } from '../Button';\r\nimport { SystemIcons } from '../icons';\r\nimport { BOXSHADOWS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling, scrollBarStyling, Z_INDEXES } from '../styles';\r\nimport { Position, Size } from '../types';\r\n\r\nconst Container = styled.div<{size: Size, position: Position, showArrowPointer: boolean}>`\r\n  //height: ${props=>props.size===Size.Small ? '240px' : (props.size===Size.Large ? '480px' : '360px')};\r\n  min-width: ${props=>props.size===Size.Small ? '320px' : (props.size===Size.Large ? '640px' : '480px')};\r\n  border-radius: 4px;\r\n  background: ${COLORS.white};\r\n  cursor: default;\r\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\r\n\r\n  position: absolute;  \r\n  visibility: hidden;\r\n  opacity: 0;\r\n  z-index: ${Z_INDEXES.popover};\r\n\r\n  ${props => (props.position == Position.Bottom ? 'right: 50%; top: calc(100% + 16px); transform: translateX(50%);' : '')}\r\n  ${props => (props.position == Position.Top ? 'right: 50%; bottom: calc(100% + 16px); transform: translateX(50%);' : '')}\r\n\r\n  ${props => (props.position == Position.Left ? 'bottom: 50%; right: calc(100% + 16px); transform: translateY(50%);' : '')}\r\n  ${props => (props.position == Position.Right ? 'bottom: 50%; left: calc(100% + 16px); transform: translateY(50%);' : '')}\r\n\r\n  &::after {\r\n    ${props => props.showArrowPointer ? renderArrowStyles(props.position) : ''}\r\n`;\r\n\r\nconst TopContainer = styled.div<{size: Size}>`\r\n  height: ${props=>props.size===Size.Small ? '56px' : (props.size===Size.Large ? '72px' : '64px')};\r\n  max-width: ${props=>props.size===Size.Small ? '344px' : (props.size===Size.Large ? '624px' : '464px')};\r\n  display: flex;\r\n`;\r\n\r\nconst MainContentWrapper = styled.div<{size: Size}>`\r\n  margin: 8px;\r\n`;\r\n\r\nconst MiddleContainer = styled.div<{size: Size}>`\r\n  height: ${props=>props.size===Size.Small ? '104px' : (props.size===Size.Large ? '304px' : '208px')};\r\n  max-width: ${props=>props.size===Size.Small ? '312px' : (props.size===Size.Large ? '576px' : '424px')};\r\n  padding: ${props=>props.size===Size.Small ? '0 8px' : (props.size===Size.Large ? '0 16px' : '0 12px')};\r\n  overflow-y: auto;\r\n  ${scrollBarStyling(Size.Small)}\r\n`;\r\n\r\nconst BottomContainer = styled.div<{size: Size}>`\r\n  height: ${props=>props.size===Size.Small ? '64px' : (props.size===Size.Large ? '88px' : '72px')};\r\n  max-width: ${props=>props.size===Size.Small ? '344px' : (props.size===Size.Large ? '624px' : '464px')};\r\n  display: flex;\r\n\r\n  .bottom-flex {\r\n    flex: 1;\r\n  }\r\n`;\r\n\r\nconst TextContainer = styled.div<{note: boolean, size: Size}>`\r\n  display: flex;\r\n  flex-direction: column;\r\n  margin: ${props=>renderMargins(props.note, props.size)};\r\n  flex-grow: 1;\r\n`;\r\n\r\nconst NoteContainer = styled.div<{size: Size}>`\r\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))}\r\n`;\r\n\r\nconst LabelContainer = styled.div<{size: Size}>`\r\n  ${props=>props.size===Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, null) : (props.size===Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, null) : ComponentMStyling(ComponentTextStyle.Bold, null))}\r\n`;\r\n\r\nconst CloseButtonContainer = styled.div<{size: Size}>`\r\n  margin: ${props=>props.size===Size.Small ? '4px 16px 4px 0' : (props.size===Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0')};\r\n`;\r\n\r\nconst TextButtonContainer = styled.div<{size: Size}>`\r\n  margin: ${props=>props.size===Size.Small ? '8px 0 8px 16px' : (props.size===Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px')};\r\n`;\r\n\r\nconst IconButtonContainer = styled.div<{size: Size}>`\r\n  margin: ${props=>props.size===Size.Small ? '8px 16px 8px 0' : (props.size===Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0')};\r\n  display: flex;\r\n`;\r\n\r\nconst Wrapper = styled.div<{position: Position, showOnClick: boolean, showPopover: boolean}>`\r\n  position: relative;\r\n\r\n  .pointer-space {\r\n    height: ${props=>props.position===Position.Top || props.position===Position.Bottom ? '16px' : '100%'};\r\n    width: ${props=>props.position===Position.Left || props.position===Position.Right ? '16px' : '100%'};\r\n    position: absolute;\r\n\r\n    ${props=>props.position===Position.Left ? 'right:100%; bottom: 0%' : ''};\r\n    ${props=>props.position===Position.Right ? 'left:100%; bottom: 0%' : ''};\r\n\r\n    ${props=>props.position===Position.Top ? 'bottom: 100%' : ''};\r\n    ${props=>props.position===Position.Bottom ? 'top: 100%' : ''};\r\n  }\r\n\r\n  ${props=>props.showOnClick ? \r\n    `${Container} {\r\n        visibility: ${props.showPopover ? 'visible' : 'hidden'};\r\n        opacity: ${props.showPopover ? '1' : '0'};\r\n    }\r\n    cursor: pointer;` \r\n    : \r\n    `&:hover {\r\n      ${Container} {\r\n        visibility: visible;\r\n        opacity: 1;\r\n      }\r\n    }`\r\n  }\r\n`;\r\n\r\nconst renderMargins = (isNotePresent: boolean, size: Size): string => {\r\n  if(isNotePresent){\r\n    return (size===Size.Small ? '10px 16px' : (size===Size.Large ? '14px 24px' : '12px 20px'));\r\n  }\r\n  else{\r\n    return (size===Size.Small ? '18px 16px' : (size===Size.Large ? '24px' : '20px'));\r\n  }\r\n}\r\n\r\nconst renderArrowStyles = (position: Position) => {\r\n  if(position === Position.Bottom){\r\n    return `height: 0px;\r\n            width: 0px;\r\n            border-top: 16px solid transparent;\r\n            border-right: 12px solid transparent;\r\n            border-bottom: 16px solid rgb(255,255,255);\r\n            border-left: 12px solid transparent;\r\n            content: \"\";\r\n            position: absolute;\r\n            right: calc(50% - 12px);\r\n            bottom: calc(100% - 1px);`\r\n  }\r\n\r\n  if(position === Position.Top){\r\n    return `height: 0px;\r\n            width: 0px;\r\n            border-top: 16px solid rgb(255,255,255);\r\n            border-right: 12px solid transparent;\r\n            border-bottom: 16px solid transparent;\r\n            border-left: 12px solid transparent;\r\n            content: \"\";\r\n            position: absolute;\r\n            right: calc(50% - 12px);\r\n            top: calc(100% - 1px);`\r\n  }\r\n\r\n  if(position === Position.Left){\r\n    return `height: 0px;\r\n            width: 0px;\r\n            border-top: 12px solid transparent;\r\n            border-right: 16px solid transparent;\r\n            border-bottom: 12px solid transparent;\r\n            border-left: 16px solid rgb(255,255,255);\r\n            content: \"\";\r\n            position: absolute;\r\n            left: calc(100% - 1px);\r\n            bottom: calc(50% - 12px);`\r\n  }\r\n\r\n  if(position === Position.Right){\r\n    return `height: 0px;\r\n            width: 0px;\r\n            border-top: 12px solid transparent;\r\n            border-right: 16px solid rgb(255,255,255);\r\n            border-bottom: 12px solid transparent;\r\n            border-left: 16px solid transparent;\r\n            content: \"\";\r\n            position: absolute;\r\n            right: calc(100% - 1px);\r\n            bottom: calc(50% - 12px);`\r\n  }\r\n}\r\n\r\ntype topSectionProps = {\r\n  text: string;\r\n  note?: string;\r\n}\r\n\r\ntype actionButtonProps = {\r\n  icon: React.ReactNode;\r\n  action: ()=>void;\r\n  label?: string;\r\n}\r\n\r\ntype bottomSectionProps = {\r\n  iconButtons?: actionButtonProps[];\r\n  textButton?: actionButtonProps;\r\n}\r\n\r\ntype PopoverProps = {\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  topSectionProps?: topSectionProps;\r\n  bottomSectionProps?: bottomSectionProps;\r\n  mainContent: React.ReactNode;\r\n  children: React.ReactNode;\r\n  position: Position.Top | Position.Bottom | Position.Right | Position.Left;\r\n  showOnClick: boolean;\r\n  showArrowPointer?: boolean;\r\n}\r\n\r\nconst Popover: React.FunctionComponent<PopoverProps> = \r\n({\r\n    size=Size.Medium,\r\n    topSectionProps,\r\n    bottomSectionProps,\r\n    mainContent,\r\n    children,\r\n    position,\r\n    showOnClick=false,\r\n    showArrowPointer=false\r\n}) => {\r\n\r\n  const [showPopover, setShowPopover] = React.useState(false);\r\n  const popoverRef = React.useRef<any>();\r\n\r\n  React.useEffect(()=>{\r\n    const checkIfClickedOutside = (e: { target: any; }) => {\r\n      if (showPopover && popoverRef.current && !popoverRef.current.contains(e.target)) {\r\n        setShowPopover(false);\r\n      }\r\n    }\r\n\r\n    document.addEventListener(\"mousedown\", checkIfClickedOutside)\r\n\r\n    return () => {\r\n      document.removeEventListener(\"mousedown\", checkIfClickedOutside)\r\n    }\r\n  },[showPopover]);\r\n\r\n  return (\r\n    <Wrapper position={position} showOnClick={showOnClick} showPopover={showPopover}>\r\n      <Container size={size} position={position} ref={popoverRef} showArrowPointer={showArrowPointer}>\r\n        {!!topSectionProps && \r\n          <TopContainer size={size}>\r\n            <TextContainer note={!!topSectionProps?.note} size={size}>\r\n              {topSectionProps?.note && \r\n                <NoteContainer size={size}>\r\n                  {topSectionProps.note}\r\n                </NoteContainer>\r\n              }\r\n              <LabelContainer size={size}>\r\n                {topSectionProps?.text}\r\n              </LabelContainer>\r\n            </TextContainer>\r\n\r\n            {showOnClick && \r\n              <CloseButtonContainer size={size} data-testid={'closeBtn'}>\r\n                <IconButton action={()=>setShowPopover(false)} useTransparentBackground iconColor={COLORS.neutral_600} variant='secondary' shape='circular'>\r\n                  <SystemIcons.Close />\r\n                </IconButton>\r\n              </CloseButtonContainer>\r\n            }\r\n          </TopContainer>\r\n        }\r\n\r\n        <MainContentWrapper size={size}>\r\n          <MiddleContainer size={size}>\r\n            {mainContent}\r\n          </MiddleContainer>\r\n        </MainContentWrapper>\r\n\r\n        {!!bottomSectionProps && \r\n          <BottomContainer size={size}>\r\n            {!!bottomSectionProps?.textButton?.icon && \r\n              <TextButtonContainer size={size} data-testid={'textBtn'}>\r\n                <Button size={size} variant='secondary' icon={bottomSectionProps.textButton.icon} onClick={bottomSectionProps.textButton.action}>\r\n                  {bottomSectionProps.textButton.label}\r\n                </Button>\r\n              </TextButtonContainer>\r\n            }\r\n\r\n            <div className='bottom-flex'/>\r\n            \r\n            <IconButtonContainer size={size} data-testid={'iconBtn'}>\r\n              {bottomSectionProps?.iconButtons?.map((iconButton) =>\r\n                \r\n                  <IconButton action={iconButton.action} variant='secondary' shape='circular' useTransparentBackground>\r\n                    {iconButton.icon}\r\n                  </IconButton>            \r\n              )}\r\n            </IconButtonContainer>\r\n          </BottomContainer>\r\n        }\r\n      </Container>\r\n\r\n      <div onClick={()=>showOnClick && setShowPopover(!showPopover)}>\r\n        {children}\r\n\r\n        <div className='pointer-space'/>\r\n      </div>\r\n\r\n    </Wrapper>\r\n  );\r\n};\r\n\r\nexport default Popover;"],"file":"Popover.js"}
+{"version":3,"sources":["../../src/Popover/Popover.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXSStyling","Button","IconButton","SystemIcons","BOXSHADOWS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","scrollBarStyling","Z_INDEXES","Position","Size","Container","div","props","size","Small","Large","white","BOXSHADOW_CENTERED","popover","position","Bottom","Top","Left","Right","showArrowPointer","renderArrowStyles","TopContainer","MainContentWrapper","MiddleContainer","BottomContainer","TextContainer","renderMargins","note","NoteContainer","Regular","neutral_600","LabelContainer","Bold","CloseButtonContainer","TextButtonContainer","IconButtonContainer","Wrapper","showOnClick","showPopover","isNotePresent","Popover","Medium","topSectionProps","bottomSectionProps","mainContent","children","useState","setShowPopover","popoverRef","useRef","useEffect","checkIfClickedOutside","e","current","contains","target","document","addEventListener","removeEventListener","text","textButton","icon","action","label","iconButtons","map","iconButton"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,MAAT,EAAiBC,kBAAjB,EAAqCC,kBAArC,QAA+D,IAA/D;AACA,SAASC,MAAT,EAAiBC,UAAjB,QAAmC,WAAnC;AACA,SAASC,WAAT,QAA4B,UAA5B;AACA,SAASC,UAAT,EAAqBC,iBAArB,EAAwCC,iBAAxC,EAA2DC,iBAA3D,EAA8EC,mBAA9E,EAAmGC,gBAAnG,EAAqHC,SAArH,QAAsI,WAAtI;AACA,SAASC,QAAT,EAAmBC,IAAnB,QAA+B,UAA/B;;;AAEA,IAAMC,SAAS,GAAGhB,MAAM,CAACiB,GAAV,qVACD,UAAAC,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaJ,IAAI,CAACK,KAAlB,GAA0B,OAA1B,GAAqCF,KAAK,CAACC,IAAN,KAAaJ,IAAI,CAACM,KAAlB,GAA0B,OAA1B,GAAoC,OAA3E;AAAA,CADJ,EAEA,UAAAH,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaJ,IAAI,CAACK,KAAlB,GAA0B,OAA1B,GAAqCF,KAAK,CAACC,IAAN,KAAaJ,IAAI,CAACM,KAAlB,GAA0B,OAA1B,GAAoC,OAA3E;AAAA,CAFL,EAICpB,MAAM,CAACqB,KAJR,EAMCf,UAAU,CAACgB,kBANZ,EAWFV,SAAS,CAACW,OAXR,EAaX,UAAAN,KAAK;AAAA,SAAKA,KAAK,CAACO,QAAN,IAAkBX,QAAQ,CAACY,MAA3B,GAAoC,iEAApC,GAAwG,EAA7G;AAAA,CAbM,EAcX,UAAAR,KAAK;AAAA,SAAKA,KAAK,CAACO,QAAN,IAAkBX,QAAQ,CAACa,GAA3B,GAAiC,oEAAjC,GAAwG,EAA7G;AAAA,CAdM,EAgBX,UAAAT,KAAK;AAAA,SAAKA,KAAK,CAACO,QAAN,IAAkBX,QAAQ,CAACc,IAA3B,GAAkC,oEAAlC,GAAyG,EAA9G;AAAA,CAhBM,EAiBX,UAAAV,KAAK;AAAA,SAAKA,KAAK,CAACO,QAAN,IAAkBX,QAAQ,CAACe,KAA3B,GAAmC,mEAAnC,GAAyG,EAA9G;AAAA,CAjBM,EAoBT,UAAAX,KAAK;AAAA,SAAIA,KAAK,CAACY,gBAAN,GAAyBC,iBAAiB,CAACb,KAAK,CAACO,QAAP,CAA1C,GAA6D,EAAjE;AAAA,CApBI,CAAf;AAuBA,IAAMO,YAAY,GAAGhC,MAAM,CAACiB,GAAV,iIACN,UAAAC,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaJ,IAAI,CAACK,KAAlB,GAA0B,MAA1B,GAAoCF,KAAK,CAACC,IAAN,KAAaJ,IAAI,CAACM,KAAlB,GAA0B,MAA1B,GAAmC,MAAzE;AAAA,CADC,EAEH,UAAAH,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaJ,IAAI,CAACK,KAAlB,GAA0B,OAA1B,GAAqCF,KAAK,CAACC,IAAN,KAAaJ,IAAI,CAACM,KAAlB,GAA0B,OAA1B,GAAoC,OAA3E;AAAA,CAFF,CAAlB;AAMA,IAAMY,kBAAkB,GAAGjC,MAAM,CAACiB,GAAV,yFAAxB;AAIA,IAAMiB,eAAe,GAAGlC,MAAM,CAACiB,GAAV,8JACT,UAAAC,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaJ,IAAI,CAACK,KAAlB,GAA0B,OAA1B,GAAqCF,KAAK,CAACC,IAAN,KAAaJ,IAAI,CAACM,KAAlB,GAA0B,OAA1B,GAAoC,OAA3E;AAAA,CADI,EAEN,UAAAH,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaJ,IAAI,CAACK,KAAlB,GAA0B,OAA1B,GAAqCF,KAAK,CAACC,IAAN,KAAaJ,IAAI,CAACM,KAAlB,GAA0B,OAA1B,GAAoC,OAA3E;AAAA,CAFC,EAGR,UAAAH,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaJ,IAAI,CAACK,KAAlB,GAA0B,OAA1B,GAAqCF,KAAK,CAACC,IAAN,KAAaJ,IAAI,CAACM,KAAlB,GAA0B,QAA1B,GAAqC,QAA5E;AAAA,CAHG,EAKjBT,gBAAgB,CAACG,IAAI,CAACK,KAAN,CALC,CAArB;AAQA,IAAMe,eAAe,GAAGnC,MAAM,CAACiB,GAAV,wKACT,UAAAC,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaJ,IAAI,CAACK,KAAlB,GAA0B,MAA1B,GAAoCF,KAAK,CAACC,IAAN,KAAaJ,IAAI,CAACM,KAAlB,GAA0B,MAA1B,GAAmC,MAAzE;AAAA,CADI,EAEN,UAAAH,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaJ,IAAI,CAACK,KAAlB,GAA0B,OAA1B,GAAqCF,KAAK,CAACC,IAAN,KAAaJ,IAAI,CAACM,KAAlB,GAA0B,OAA1B,GAAoC,OAA3E;AAAA,CAFC,CAArB;AAUA,IAAMe,aAAa,GAAGpC,MAAM,CAACiB,GAAV,yJAGP,UAAAC,KAAK;AAAA,SAAEmB,aAAa,CAACnB,KAAK,CAACoB,IAAP,EAAapB,KAAK,CAACC,IAAnB,CAAf;AAAA,CAHE,CAAnB;AAOA,IAAMoB,aAAa,GAAGvC,MAAM,CAACiB,GAAV,kFACf,UAAAC,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaJ,IAAI,CAACK,KAAlB,GAA0BT,mBAAmB,CAACT,kBAAkB,CAACsC,OAApB,EAA6BvC,MAAM,CAACwC,WAApC,CAA7C,GAAiGvB,KAAK,CAACC,IAAN,KAAaJ,IAAI,CAACM,KAAlB,GAA0BX,iBAAiB,CAACR,kBAAkB,CAACsC,OAApB,EAA6BvC,MAAM,CAACwC,WAApC,CAA3C,GAA8FtC,kBAAkB,CAACD,kBAAkB,CAACsC,OAApB,EAA6BvC,MAAM,CAACwC,WAApC,CAAnN;AAAA,CADU,CAAnB;AAIA,IAAMC,cAAc,GAAG1C,MAAM,CAACiB,GAAV,kFAChB,UAAAC,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaJ,IAAI,CAACK,KAAlB,GAA0BV,iBAAiB,CAACR,kBAAkB,CAACyC,IAApB,EAA0B,IAA1B,CAA3C,GAA8EzB,KAAK,CAACC,IAAN,KAAaJ,IAAI,CAACM,KAAlB,GAA0Bb,iBAAiB,CAACN,kBAAkB,CAACyC,IAApB,EAA0B,IAA1B,CAA3C,GAA6ElC,iBAAiB,CAACP,kBAAkB,CAACyC,IAApB,EAA0B,IAA1B,CAA9K;AAAA,CADW,CAApB;AAIA,IAAMC,oBAAoB,GAAG5C,MAAM,CAACiB,GAAV,2FACd,UAAAC,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaJ,IAAI,CAACK,KAAlB,GAA0B,gBAA1B,GAA8CF,KAAK,CAACC,IAAN,KAAaJ,IAAI,CAACM,KAAlB,GAA0B,kBAA1B,GAA+C,gBAA/F;AAAA,CADS,CAA1B;AAIA,IAAMwB,mBAAmB,GAAG7C,MAAM,CAACiB,GAAV,6FACb,UAAAC,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaJ,IAAI,CAACK,KAAlB,GAA0B,gBAA1B,GAA8CF,KAAK,CAACC,IAAN,KAAaJ,IAAI,CAACM,KAAlB,GAA0B,kBAA1B,GAA+C,kBAA/F;AAAA,CADQ,CAAzB;AAIA,IAAMyB,mBAAmB,GAAG9C,MAAM,CAACiB,GAAV,+GACb,UAAAC,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaJ,IAAI,CAACK,KAAlB,GAA0B,gBAA1B,GAA8CF,KAAK,CAACC,IAAN,KAAaJ,IAAI,CAACM,KAAlB,GAA0B,kBAA1B,GAA+C,kBAA/F;AAAA,CADQ,CAAzB;AAKA,IAAM0B,OAAO,GAAG/C,MAAM,CAACiB,GAAV,sPAIC,UAAAC,KAAK;AAAA,SAAEA,KAAK,CAACO,QAAN,KAAiBX,QAAQ,CAACa,GAA1B,IAAiCT,KAAK,CAACO,QAAN,KAAiBX,QAAQ,CAACY,MAA3D,GAAoE,MAApE,GAA6E,MAA/E;AAAA,CAJN,EAKA,UAAAR,KAAK;AAAA,SAAEA,KAAK,CAACO,QAAN,KAAiBX,QAAQ,CAACc,IAA1B,IAAkCV,KAAK,CAACO,QAAN,KAAiBX,QAAQ,CAACe,KAA5D,GAAoE,MAApE,GAA6E,MAA/E;AAAA,CALL,EAQP,UAAAX,KAAK;AAAA,SAAEA,KAAK,CAACO,QAAN,KAAiBX,QAAQ,CAACc,IAA1B,GAAiC,wBAAjC,GAA4D,EAA9D;AAAA,CARE,EASP,UAAAV,KAAK;AAAA,SAAEA,KAAK,CAACO,QAAN,KAAiBX,QAAQ,CAACe,KAA1B,GAAkC,uBAAlC,GAA4D,EAA9D;AAAA,CATE,EAWP,UAAAX,KAAK;AAAA,SAAEA,KAAK,CAACO,QAAN,KAAiBX,QAAQ,CAACa,GAA1B,GAAgC,cAAhC,GAAiD,EAAnD;AAAA,CAXE,EAYP,UAAAT,KAAK;AAAA,SAAEA,KAAK,CAACO,QAAN,KAAiBX,QAAQ,CAACY,MAA1B,GAAmC,WAAnC,GAAiD,EAAnD;AAAA,CAZE,EAeT,UAAAR,KAAK;AAAA,SAAEA,KAAK,CAAC8B,WAAN,aACJhC,SADI,qCAEWE,KAAK,CAAC+B,WAAN,GAAoB,SAApB,GAAgC,QAF3C,iCAGQ/B,KAAK,CAAC+B,WAAN,GAAoB,GAApB,GAA0B,GAHlC,iEAQHjC,SARG,0EAAF;AAAA,CAfI,CAAb;;AA+BA,IAAMqB,aAAa,GAAG,SAAhBA,aAAgB,CAACa,aAAD,EAAyB/B,IAAzB,EAAgD;AACpE,MAAG+B,aAAH,EAAiB;AACf,WAAQ/B,IAAI,KAAGJ,IAAI,CAACK,KAAZ,GAAoB,WAApB,GAAmCD,IAAI,KAAGJ,IAAI,CAACM,KAAZ,GAAoB,WAApB,GAAkC,WAA7E;AACD,GAFD,MAGI;AACF,WAAQF,IAAI,KAAGJ,IAAI,CAACK,KAAZ,GAAoB,WAApB,GAAmCD,IAAI,KAAGJ,IAAI,CAACM,KAAZ,GAAoB,MAApB,GAA6B,MAAxE;AACD;AACF,CAPD;;AASA,IAAMU,iBAAiB,GAAG,SAApBA,iBAAoB,CAACN,QAAD,EAAwB;AAChD,MAAGA,QAAQ,KAAKX,QAAQ,CAACY,MAAzB,EAAgC;AAC9B;AAUD;;AAED,MAAGD,QAAQ,KAAKX,QAAQ,CAACa,GAAzB,EAA6B;AAC3B;AAUD;;AAED,MAAGF,QAAQ,KAAKX,QAAQ,CAACc,IAAzB,EAA8B;AAC5B;AAUD;;AAED,MAAGH,QAAQ,KAAKX,QAAQ,CAACe,KAAzB,EAA+B;AAC7B;AAUD;AACF,CApDD;;AAiFA,IAAMsB,OAA8C,GACpD,SADMA,OACN,OASM;AAAA;;AAAA,uBARFhC,IAQE;AAAA,MARFA,IAQE,0BARGJ,IAAI,CAACqC,MAQR;AAAA,MAPFC,eAOE,QAPFA,eAOE;AAAA,MANFC,kBAME,QANFA,kBAME;AAAA,MALFC,WAKE,QALFA,WAKE;AAAA,MAJFC,QAIE,QAJFA,QAIE;AAAA,MAHF/B,QAGE,QAHFA,QAGE;AAAA,8BAFFuB,WAEE;AAAA,MAFFA,WAEE,iCAFU,KAEV;AAAA,mCADFlB,gBACE;AAAA,MADFA,gBACE,sCADe,KACf;;AAEJ,wBAAsC/B,KAAK,CAAC0D,QAAN,CAAe,KAAf,CAAtC;AAAA;AAAA,MAAOR,WAAP;AAAA,MAAoBS,cAApB;;AACA,MAAMC,UAAU,GAAG5D,KAAK,CAAC6D,MAAN,EAAnB;AAEA7D,EAAAA,KAAK,CAAC8D,SAAN,CAAgB,YAAI;AAClB,QAAMC,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACC,CAAD,EAAyB;AACrD,UAAId,WAAW,IAAIU,UAAU,CAACK,OAA1B,IAAqC,CAACL,UAAU,CAACK,OAAX,CAAmBC,QAAnB,CAA4BF,CAAC,CAACG,MAA9B,CAA1C,EAAiF;AAC/ER,QAAAA,cAAc,CAAC,KAAD,CAAd;AACD;AACF,KAJD;;AAMAS,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,WAA1B,EAAuCN,qBAAvC;AAEA,WAAO,YAAM;AACXK,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,WAA7B,EAA0CP,qBAA1C;AACD,KAFD;AAGD,GAZD,EAYE,CAACb,WAAD,CAZF;AAcA,sBACE,MAAC,OAAD;AAAS,IAAA,QAAQ,EAAExB,QAAnB;AAA6B,IAAA,WAAW,EAAEuB,WAA1C;AAAuD,IAAA,WAAW,EAAEC,WAApE;AAAA,4BACE,MAAC,SAAD;AAAW,MAAA,IAAI,EAAE9B,IAAjB;AAAuB,MAAA,QAAQ,EAAEM,QAAjC;AAA2C,MAAA,GAAG,EAAEkC,UAAhD;AAA4D,MAAA,gBAAgB,EAAE7B,gBAA9E;AAAA,iBACG,CAAC,CAACuB,eAAF,iBACC,MAAC,YAAD;AAAc,QAAA,IAAI,EAAElC,IAApB;AAAA,gCACE,MAAC,aAAD;AAAe,UAAA,IAAI,EAAE,CAAC,EAACkC,eAAD,aAACA,eAAD,eAACA,eAAe,CAAEf,IAAlB,CAAtB;AAA8C,UAAA,IAAI,EAAEnB,IAApD;AAAA,qBACG,CAAAkC,eAAe,SAAf,IAAAA,eAAe,WAAf,YAAAA,eAAe,CAAEf,IAAjB,kBACC,KAAC,aAAD;AAAe,YAAA,IAAI,EAAEnB,IAArB;AAAA,sBACGkC,eAAe,CAACf;AADnB,YAFJ,eAME,KAAC,cAAD;AAAgB,YAAA,IAAI,EAAEnB,IAAtB;AAAA,sBACGkC,eADH,aACGA,eADH,uBACGA,eAAe,CAAEiB;AADpB,YANF;AAAA,UADF,EAYGtB,WAAW,iBACV,KAAC,oBAAD;AAAsB,UAAA,IAAI,EAAE7B,IAA5B;AAAkC,yBAAa,UAA/C;AAAA,iCACE,KAAC,UAAD;AAAY,YAAA,MAAM,EAAE;AAAA,qBAAIuC,cAAc,CAAC,KAAD,CAAlB;AAAA,aAApB;AAA+C,YAAA,wBAAwB,MAAvE;AAAwE,YAAA,SAAS,EAAEzD,MAAM,CAACwC,WAA1F;AAAuG,YAAA,OAAO,EAAC,WAA/G;AAA2H,YAAA,KAAK,EAAC,UAAjI;AAAA,mCACE,KAAC,WAAD,CAAa,KAAb;AADF;AADF,UAbJ;AAAA,QAFJ,eAwBE,KAAC,kBAAD;AAAoB,QAAA,IAAI,EAAEtB,IAA1B;AAAA,+BACE,KAAC,eAAD;AAAiB,UAAA,IAAI,EAAEA,IAAvB;AAAA,oBACGoC;AADH;AADF,QAxBF,EA8BG,CAAC,CAACD,kBAAF,iBACC,MAAC,eAAD;AAAiB,QAAA,IAAI,EAAEnC,IAAvB;AAAA,mBACG,CAAC,EAACmC,kBAAD,aAACA,kBAAD,wCAACA,kBAAkB,CAAEiB,UAArB,kDAAC,sBAAgCC,IAAjC,CAAD,iBACC,KAAC,mBAAD;AAAqB,UAAA,IAAI,EAAErD,IAA3B;AAAiC,yBAAa,SAA9C;AAAA,iCACE,KAAC,MAAD;AAAQ,YAAA,IAAI,EAAEA,IAAd;AAAoB,YAAA,OAAO,EAAC,WAA5B;AAAwC,YAAA,IAAI,EAAEmC,kBAAkB,CAACiB,UAAnB,CAA8BC,IAA5E;AAAkF,YAAA,OAAO,EAAElB,kBAAkB,CAACiB,UAAnB,CAA8BE,MAAzH;AAAA,sBACGnB,kBAAkB,CAACiB,UAAnB,CAA8BG;AADjC;AADF,UAFJ,eASE;AAAK,UAAA,SAAS,EAAC;AAAf,UATF,eAWE,KAAC,mBAAD;AAAqB,UAAA,IAAI,EAAEvD,IAA3B;AAAiC,yBAAa,SAA9C;AAAA,oBACGmC,kBADH,aACGA,kBADH,gDACGA,kBAAkB,CAAEqB,WADvB,0DACG,sBAAiCC,GAAjC,CAAqC,UAACC,UAAD;AAAA,gCAElC,KAAC,UAAD;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,QA/BJ;AAAA,MADF,eAuDE;AAAK,MAAA,OAAO,EAAE;AAAA,eAAIxB,WAAW,IAAIU,cAAc,CAAC,CAACT,WAAF,CAAjC;AAAA,OAAd;AAAA,iBACGO,QADH,eAGE;AAAK,QAAA,SAAS,EAAC;AAAf,QAHF;AAAA,MAvDF;AAAA,IADF;AAgED,CA7FD;;;AATEH,EAAAA,e;AAjBAiB,IAAAA,I;AACAhC,IAAAA,I;;AAiBAgB,EAAAA,kB;AAPAqB,IAAAA,W;AANAH,MAAAA,I;AACAC,MAAAA,M;AACAC,MAAAA,K;;AAKAH,IAAAA,U;AAPAC,MAAAA,I;AACAC,MAAAA,M;AACAC,MAAAA,K;;;AAYAnB,EAAAA,W;AACAC,EAAAA,Q;AAEAR,EAAAA,W;AACAlB,EAAAA,gB;;AAkGF,eAAeqB,OAAf","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, showArrowPointer: boolean}>`\n  //height: ${props=>props.size===Size.Small ? '240px' : (props.size===Size.Large ? '480px' : '360px')};\n  min-width: ${props=>props.size===Size.Small ? '320px' : (props.size===Size.Large ? '640px' : '480px')};\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% + 16px); transform: translateX(50%);' : '')}\n  ${props => (props.position == Position.Top ? 'right: 50%; bottom: calc(100% + 16px); transform: translateX(50%);' : '')}\n\n  ${props => (props.position == Position.Left ? 'bottom: 50%; right: calc(100% + 16px); transform: translateY(50%);' : '')}\n  ${props => (props.position == Position.Right ? 'bottom: 50%; left: calc(100% + 16px); transform: translateY(50%);' : '')}\n\n  &::after {\n    ${props => props.showArrowPointer ? renderArrowStyles(props.position) : ''}\n`;\n\nconst TopContainer = styled.div<{size: Size}>`\n  height: ${props=>props.size===Size.Small ? '56px' : (props.size===Size.Large ? '72px' : '64px')};\n  max-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  margin: 8px;\n`;\n\nconst MiddleContainer = styled.div<{size: Size}>`\n  height: ${props=>props.size===Size.Small ? '104px' : (props.size===Size.Large ? '304px' : '208px')};\n  max-width: ${props=>props.size===Size.Small ? '312px' : (props.size===Size.Large ? '576px' : '424px')};\n  padding: ${props=>props.size===Size.Small ? '0 8px' : (props.size===Size.Large ? '0 16px' : '0 12px')};\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  max-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 ? '16px' : '100%'};\n    width: ${props=>props.position===Position.Left || props.position===Position.Right ? '16px' : '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\nconst renderArrowStyles = (position: Position) => {\n  if(position === Position.Bottom){\n    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);`\n  }\n\n  if(position === Position.Top){\n    return `height: 0px;\n            width: 0px;\n            border-top: 16px solid rgb(255,255,255);\n            border-right: 12px solid transparent;\n            border-bottom: 16px solid transparent;\n            border-left: 12px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(50% - 12px);\n            top: calc(100% - 1px);`\n  }\n\n  if(position === Position.Left){\n    return `height: 0px;\n            width: 0px;\n            border-top: 12px solid transparent;\n            border-right: 16px solid transparent;\n            border-bottom: 12px solid transparent;\n            border-left: 16px solid rgb(255,255,255);\n            content: \"\";\n            position: absolute;\n            left: calc(100% - 1px);\n            bottom: calc(50% - 12px);`\n  }\n\n  if(position === Position.Right){\n    return `height: 0px;\n            width: 0px;\n            border-top: 12px solid transparent;\n            border-right: 16px solid rgb(255,255,255);\n            border-bottom: 12px solid transparent;\n            border-left: 16px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(100% - 1px);\n            bottom: calc(50% - 12px);`\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  showArrowPointer?: 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    showArrowPointer=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} showArrowPointer={showArrowPointer}>\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.js"}

package/dist/Popover/index.d.ts

@@ -1 +1 @@
-export { default as Popover } from './Popover';
+export { default as Popover } from './Popover';

package/dist/ProfileButton/ProfileButton.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ProfileButton/ProfileButton.tsx"],"names":["PortraitOverlay","styled","div","COLORS","black","Container","StyledPrimaryIconButton","props","hideOnLowWidth","BREAKPOINTS","MEDIUM","IconButtonContent","neutral_100","neutral_300","NotificationContainer","ImageWrapper","ProfileButton","React","forwardRef","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","renderIcon","ComponentTextStyle","Bold","white","Size","Medium"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAcA,IAAMA,eAAe,GAAGC,0BAAOC,GAAV,0OAICC,SAAOC,KAJR,CAArB;;AAWA,IAAMC,SAAS,GAAGJ,0BAAOC,GAAV,8vBAMXI,mCANW,EAOA,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,cAAN,GAAuB,MAAvB,GAAgC,QAArC;AAAA,CAPL,EASTC,oBAAYC,MATH,EAkBPC,6BAlBO,EAmBaR,SAAOS,WAnBpB,EAsBGT,SAAOU,WAtBV,EA6BPb,eA7BO,EAqCPA,eArCO,CAAf;;AA6CA,IAAMc,qBAAqB,GAAGb,0BAAOC,GAAV,8IAA3B;;AAMA,IAAMa,YAAY,GAAGd,0BAAOC,GAAV,qPAAlB;;AAaA,IAAMc,aAAa,gBAAGC,KAAK,CAACC,UAAN,CAAwD,gBAUIC,GAVJ,EAUY;AAAA,MATTC,WASS,QATTA,WASS;AAAA,MARTC,IAQS,QARTA,IAQS;AAAA,MAPTC,QAOS,QAPTA,QAOS;AAAA,MANTC,OAMS,QANTA,OAMS;AAAA,MALTf,cAKS,QALTA,cAKS;AAAA,MAJTgB,QAIS,QAJTA,QAIS;AAAA,MAHTC,mBAGS,QAHTA,mBAGS;AAAA,MAFTC,SAES,QAFTA,SAES;AAAA,MADTC,QACS,QADTA,QACS;;AACxF,MAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvB,WACGR,WAAW,iBACV,sBAAC,YAAD;AAAA,8BACE;AAAK,QAAA,GAAG,EAAEA;AAAV,QADF,eAEE,qBAAC,eAAD,KAFF;AAAA,MADF,IAMCE,QAAQ,iBACP,qBAAC,kBAAD;AAAY,MAAA,SAAS,EAAC,UAAtB;AAAiC,MAAA,SAAS,EAAEO,2BAAmBC,IAA/D;AACY,MAAA,KAAK,EAAEN,QAAQ,GAAGrB,SAAOU,WAAV,GAAwBV,SAAO4B,KAD1D;AAAA,gBAEGT;AAFH,MAPF,iBAWM;AAAA,gBAAGD;AAAH,MAZR;AAcD,GAfD;;AAiBA,sBACE,qBAAC,SAAD;AAAW,IAAA,cAAc,EAAEb,cAA3B;AAAA,2BACE,sBAAC,YAAD;AAAY,MAAA,GAAG,EAAEW,GAAjB;AACY,MAAA,SAAS,EAAEO,SADvB;AAEY,MAAA,QAAQ,EAAEF,QAFtB;AAGY,MAAA,MAAM,EAAED,OAHpB;AAIY,MAAA,OAAO,EAAC,SAJpB;AAKY,MAAA,QAAQ,EAAEI,QALtB;AAMY,MAAA,KAAK,EAAC,UANlB;AAOY,MAAA,cAAc,EAAEnB,cAP5B;AAAA,iBAQGoB,UAAU,EARb,EASGH,mBAAmB,iBAClB,qBAAC,qBAAD;AAAA,+BACE,qBAAC,gCAAD;AAAiB,UAAA,IAAI,EAAEO,OAAKC,MAA5B;AAAoC,UAAA,OAAO,EAAER;AAA7C;AADF,QAVJ;AAAA;AADF,IADF;AAmBD,CA/CqB,CAAtB;;AAtFEL,EAAAA,W;AACAC,EAAAA,I;AACAC,EAAAA,Q;AACAC,EAAAA,O;AACAC,EAAAA,Q;AACAC,EAAAA,mB,4BAAsB,U,EAAa,U;AACnCC,EAAAA,S;AACAlB,EAAAA,c;AACAmB,EAAAA,Q;;eA+HaX,a","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {COLORS, IconButton, Size} from '..';\r\nimport {IconButtonContent, StyledPrimaryIconButton} from '../Button/Iconbutton';\r\nimport {NotificationDot} from '../NotificationDot';\r\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\r\n\r\ntype ProfileButtonProps = {\r\n  portraitSrc?: string;\r\n  icon?: React.ReactNode;\r\n  initials?: string;\r\n  onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\r\n  disabled?: boolean;\r\n  notificationVariant?: 'positive' | 'critical';\r\n  className?: string;\r\n  hideOnLowWidth?: boolean;\r\n  tabIndex?: number;\r\n};\r\n\r\nconst PortraitOverlay = styled.div`\r\n  width: 100%;\r\n  height: 100%;\r\n  border-radius: 50%;\r\n  background-color: ${COLORS.black};\r\n  opacity: 0;\r\n  position: absolute;\r\n  top: 0px;\r\n  left: 0px;\r\n`;\r\n\r\nconst Container = styled.div<{ hideOnLowWidth?: boolean }>`\r\n  width: 48px;\r\n  height: 48px;\r\n  display: inline;\r\n  user-select: none;\r\n  \r\n  ${StyledPrimaryIconButton} {\r\n    display: ${props => (props.hideOnLowWidth ? 'none' : 'inline')};\r\n\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      display: inline;\r\n    }\r\n\r\n    :disabled {\r\n      img {\r\n        filter: grayscale(100%);\r\n      }\r\n\r\n      ${IconButtonContent} {\r\n        background-color: ${COLORS.neutral_100};\r\n\r\n        svg, svg path {\r\n          fill: ${COLORS.neutral_300};\r\n        }\r\n      }\r\n    }\r\n\r\n    :hover:not(:disabled):not(:active),\r\n    &.hover-state {\r\n      ${PortraitOverlay} {\r\n        opacity: 0.25;\r\n        transition: opacity 100ms ease-in-out;\r\n      }\r\n    }\r\n\r\n    :active:not(:disabled),\r\n    &.active-state {\r\n      ${PortraitOverlay} {\r\n        opacity: 0.5;\r\n        transition: opacity 0ms ease-in-out;\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst NotificationContainer = styled.div`\r\n  position: absolute;\r\n  left: 30px;\r\n  bottom: 30px;\r\n`;\r\n\r\nconst ImageWrapper = styled.div`\r\n  width: 36px;\r\n  height: 36px;\r\n  position: relative;\r\n\r\n  img {\r\n    width: 100%;\r\n    height: 100%;\r\n    border-radius: 50%;\r\n    object-fit: cover;\r\n  }\r\n`;\r\n\r\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\r\n                                                                                 portraitSrc,\r\n                                                                                 icon,\r\n                                                                                 initials,\r\n                                                                                 onClick,\r\n                                                                                 hideOnLowWidth,\r\n                                                                                 disabled,\r\n                                                                                 notificationVariant,\r\n                                                                                 className,\r\n                                                                                 tabIndex\r\n                                                                               }, ref) => {\r\n  const renderIcon = () => {\r\n    return (\r\n      (portraitSrc && (\r\n        <ImageWrapper>\r\n          <img src={portraitSrc}/>\r\n          <PortraitOverlay/>\r\n        </ImageWrapper>\r\n      )) ||\r\n      (initials && (\r\n        <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\r\n                    color={disabled ? COLORS.neutral_300 : COLORS.white}>\r\n          {initials}\r\n        </ComponentS>\r\n      )) || <>{icon}</>\r\n    );\r\n  };\r\n\r\n  return (\r\n    <Container hideOnLowWidth={hideOnLowWidth}>\r\n      <IconButton ref={ref}\r\n                  className={className}\r\n                  disabled={disabled}\r\n                  action={onClick}\r\n                  variant=\"primary\"\r\n                  tabIndex={tabIndex}\r\n                  shape=\"circular\"\r\n                  hideOnLowWidth={hideOnLowWidth}>\r\n        {renderIcon()}\r\n        {notificationVariant && (\r\n          <NotificationContainer>\r\n            <NotificationDot size={Size.Medium} variant={notificationVariant}/>\r\n          </NotificationContainer>\r\n        )}\r\n      </IconButton>\r\n    </Container>\r\n  );\r\n});\r\n\r\nexport default ProfileButton;\r\n"],"file":"ProfileButton.cjs"}
+{"version":3,"sources":["../../src/ProfileButton/ProfileButton.tsx"],"names":["PortraitOverlay","styled","div","COLORS","black","Container","StyledPrimaryIconButton","props","hideOnLowWidth","BREAKPOINTS","MEDIUM","IconButtonContent","neutral_100","neutral_300","NotificationContainer","ImageWrapper","ProfileButton","React","forwardRef","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","renderIcon","ComponentTextStyle","Bold","white","Size","Medium"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAcA,IAAMA,eAAe,GAAGC,0BAAOC,GAAV,0OAICC,SAAOC,KAJR,CAArB;;AAWA,IAAMC,SAAS,GAAGJ,0BAAOC,GAAV,8vBAMXI,mCANW,EAOA,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,cAAN,GAAuB,MAAvB,GAAgC,QAArC;AAAA,CAPL,EASTC,oBAAYC,MATH,EAkBPC,6BAlBO,EAmBaR,SAAOS,WAnBpB,EAsBGT,SAAOU,WAtBV,EA6BPb,eA7BO,EAqCPA,eArCO,CAAf;;AA6CA,IAAMc,qBAAqB,GAAGb,0BAAOC,GAAV,8IAA3B;;AAMA,IAAMa,YAAY,GAAGd,0BAAOC,GAAV,qPAAlB;;AAaA,IAAMc,aAAa,gBAAGC,KAAK,CAACC,UAAN,CAAwD,gBAUIC,GAVJ,EAUY;AAAA,MATTC,WASS,QATTA,WASS;AAAA,MARTC,IAQS,QARTA,IAQS;AAAA,MAPTC,QAOS,QAPTA,QAOS;AAAA,MANTC,OAMS,QANTA,OAMS;AAAA,MALTf,cAKS,QALTA,cAKS;AAAA,MAJTgB,QAIS,QAJTA,QAIS;AAAA,MAHTC,mBAGS,QAHTA,mBAGS;AAAA,MAFTC,SAES,QAFTA,SAES;AAAA,MADTC,QACS,QADTA,QACS;;AACxF,MAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvB,WACGR,WAAW,iBACV,sBAAC,YAAD;AAAA,8BACE;AAAK,QAAA,GAAG,EAAEA;AAAV,QADF,eAEE,qBAAC,eAAD,KAFF;AAAA,MADF,IAMCE,QAAQ,iBACP,qBAAC,kBAAD;AAAY,MAAA,SAAS,EAAC,UAAtB;AAAiC,MAAA,SAAS,EAAEO,2BAAmBC,IAA/D;AACY,MAAA,KAAK,EAAEN,QAAQ,GAAGrB,SAAOU,WAAV,GAAwBV,SAAO4B,KAD1D;AAAA,gBAEGT;AAFH,MAPF,iBAWM;AAAA,gBAAGD;AAAH,MAZR;AAcD,GAfD;;AAiBA,sBACE,qBAAC,SAAD;AAAW,IAAA,cAAc,EAAEb,cAA3B;AAAA,2BACE,sBAAC,YAAD;AAAY,MAAA,GAAG,EAAEW,GAAjB;AACY,MAAA,SAAS,EAAEO,SADvB;AAEY,MAAA,QAAQ,EAAEF,QAFtB;AAGY,MAAA,MAAM,EAAED,OAHpB;AAIY,MAAA,OAAO,EAAC,SAJpB;AAKY,MAAA,QAAQ,EAAEI,QALtB;AAMY,MAAA,KAAK,EAAC,UANlB;AAOY,MAAA,cAAc,EAAEnB,cAP5B;AAAA,iBAQGoB,UAAU,EARb,EASGH,mBAAmB,iBAClB,qBAAC,qBAAD;AAAA,+BACE,qBAAC,gCAAD;AAAiB,UAAA,IAAI,EAAEO,OAAKC,MAA5B;AAAoC,UAAA,OAAO,EAAER;AAA7C;AADF,QAVJ;AAAA;AADF,IADF;AAmBD,CA/CqB,CAAtB;;AAtFEL,EAAAA,W;AACAC,EAAAA,I;AACAC,EAAAA,Q;AACAC,EAAAA,O;AACAC,EAAAA,Q;AACAC,EAAAA,mB,4BAAsB,U,EAAa,U;AACnCC,EAAAA,S;AACAlB,EAAAA,c;AACAmB,EAAAA,Q;;eA+HaX,a","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, IconButton, Size} from '..';\nimport {IconButtonContent, StyledPrimaryIconButton} from '../Button/Iconbutton';\nimport {NotificationDot} from '../NotificationDot';\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\n\ntype ProfileButtonProps = {\n  portraitSrc?: string;\n  icon?: React.ReactNode;\n  initials?: string;\n  onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  disabled?: boolean;\n  notificationVariant?: 'positive' | 'critical';\n  className?: string;\n  hideOnLowWidth?: boolean;\n  tabIndex?: number;\n};\n\nconst PortraitOverlay = styled.div`\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ${COLORS.black};\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n`;\n\nconst Container = styled.div<{ hideOnLowWidth?: boolean }>`\n  width: 48px;\n  height: 48px;\n  display: inline;\n  user-select: none;\n  \n  ${StyledPrimaryIconButton} {\n    display: ${props => (props.hideOnLowWidth ? 'none' : 'inline')};\n\n    ${BREAKPOINTS.MEDIUM} {\n      display: inline;\n    }\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ${IconButtonContent} {\n        background-color: ${COLORS.neutral_100};\n\n        svg, svg path {\n          fill: ${COLORS.neutral_300};\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ${PortraitOverlay} {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ${PortraitOverlay} {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n`;\n\nconst NotificationContainer = styled.div`\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n`;\n\nconst ImageWrapper = styled.div`\n  width: 36px;\n  height: 36px;\n  position: relative;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n`;\n\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\n                                                                                 portraitSrc,\n                                                                                 icon,\n                                                                                 initials,\n                                                                                 onClick,\n                                                                                 hideOnLowWidth,\n                                                                                 disabled,\n                                                                                 notificationVariant,\n                                                                                 className,\n                                                                                 tabIndex\n                                                                               }, ref) => {\n  const renderIcon = () => {\n    return (\n      (portraitSrc && (\n        <ImageWrapper>\n          <img src={portraitSrc}/>\n          <PortraitOverlay/>\n        </ImageWrapper>\n      )) ||\n      (initials && (\n        <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\n                    color={disabled ? COLORS.neutral_300 : COLORS.white}>\n          {initials}\n        </ComponentS>\n      )) || <>{icon}</>\n    );\n  };\n\n  return (\n    <Container hideOnLowWidth={hideOnLowWidth}>\n      <IconButton ref={ref}\n                  className={className}\n                  disabled={disabled}\n                  action={onClick}\n                  variant=\"primary\"\n                  tabIndex={tabIndex}\n                  shape=\"circular\"\n                  hideOnLowWidth={hideOnLowWidth}>\n        {renderIcon()}\n        {notificationVariant && (\n          <NotificationContainer>\n            <NotificationDot size={Size.Medium} variant={notificationVariant}/>\n          </NotificationContainer>\n        )}\n      </IconButton>\n    </Container>\n  );\n});\n\nexport default ProfileButton;\n"],"file":"ProfileButton.cjs"}

package/dist/ProfileButton/ProfileButton.d.ts

@@ -1,14 +1,14 @@
-import * as React from 'react';
-declare type ProfileButtonProps = {
-    portraitSrc?: string;
-    icon?: React.ReactNode;
-    initials?: string;
-    onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;
-    disabled?: boolean;
-    notificationVariant?: 'positive' | 'critical';
-    className?: string;
-    hideOnLowWidth?: boolean;
-    tabIndex?: number;
-};
-declare const ProfileButton: React.ForwardRefExoticComponent<ProfileButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export default ProfileButton;
+import * as React from 'react';
+declare type ProfileButtonProps = {
+    portraitSrc?: string;
+    icon?: React.ReactNode;
+    initials?: string;
+    onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;
+    disabled?: boolean;
+    notificationVariant?: 'positive' | 'critical';
+    className?: string;
+    hideOnLowWidth?: boolean;
+    tabIndex?: number;
+};
+declare const ProfileButton: React.ForwardRefExoticComponent<ProfileButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default ProfileButton;