@laerdal/life-react-components 1.9.8-dev.16 → 1.9.8-dev.17.full

package/dist/GlobalNavigationBar/mobile/MobileMenuContent.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuContent.tsx"],"names":["HeaderText","styled","div","ComponentTextStyle","Bold","COLORS","neutral_600","BREAKPOINTS","SMALL","HeaderNote","ParagraphTextStyle","Regular","HeaderContainer","neutral_200","ScrollableContainer","Size","Small","MenuItemsContainer","MenuSectionContainer","MenuSectionHeader","neutral_20","neutral_500","MenuSectionList","PinnedContainer","FooterText","FooterNote","FooterLink","FooterContainer","ActionContainer","Wrapper","MobileMenuContent","header","items","footer","action","onSubMenuOpen","isSmallScreen","query","replace","navigate","isActiveRoute","React","useState","scrollable","setScrollable","updateOnResize","scrollContainerRef","dimensions","node","useEffect","clientHeight","scrollHeight","renderItem","item","index","type","label","map","Medium","value","disabled","icon","displayLabel","noteLabel","note","e","nativeEvent","stopImmediatePropagation","external","to","exact","filter","a","pinned","some","link","id","target","onClick","href"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n  MenuButton,\n  MenuGroupFooter,\n  MenuGroupHeader,\n  MenuNavigationItemTypeGroup,\n  MenuNavigationItemTypeItem,\n  MenuNavigationItemTypeSection\n} from '../types';\nimport styled from 'styled-components';\nimport {\n  BREAKPOINTS,\n  COLORS,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ParagraphSStyling,\n  ParagraphTextStyle,\n  ParagraphXSStyling,\n  scrollBarStyling\n} from '../../styles';\nimport {Size} from '../../types';\nimport {HyperLink} from '../../HyperLink';\nimport {useMediaQuery} from 'react-responsive';\nimport {Button} from '../../Button';\nimport {useNavigationHelper} from '../NavigationHelper';\nimport {MenuItem} from '../../MenuItem';\nimport {SystemIcons} from '../../icons';\nimport {useDimensionsRef} from 'rooks';\n\n\nconst HeaderText = styled.div`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\nconst HeaderNote = styled.div`\n  ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n`;\nconst HeaderContainer = styled.div`\n  margin: 0 24px;\n  padding-bottom: 8px;\n  box-sizing: border-box;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n`;\n\n\nconst ScrollableContainer = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  max-height: 100%;\n\n  &.scrollable {\n    margin-right: 6px;\n    padding-right: 10px;\n  }\n\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst MenuItemsContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  padding: 8px;\n`;\n\nconst MenuSectionContainer = styled.div`\n  padding-bottom: 8px;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\nconst MenuSectionHeader = styled.div`\n  display: flex;\n  align-items: center;\n  padding: 8px 16px 4px 16px;\n  box-sizing: border-box;\n  min-height: 32px;\n  background-color: ${COLORS.neutral_20};\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\n\nconst PinnedContainer = styled.div`\n  border-top: 1px solid ${COLORS.neutral_200};\n`;\n\nconst FooterText = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\nconst FooterNote = styled.div`\n  ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n  }\n`;\nconst FooterLink = styled.div`\n  a {\n    ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n    ${BREAKPOINTS.SMALL} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n  }\n`;\n\nconst FooterContainer = styled.div`\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n  background: ${COLORS.neutral_20};\n\n  ${BREAKPOINTS.SMALL} {\n    padding: 16px;\n  }\n`;\n\nconst ActionContainer = styled.div`\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n\n  ${BREAKPOINTS.SMALL} {\n    padding: 16px;\n  }\n`;\n\nconst Wrapper = styled.div`\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n`;\n\ninterface MobileMenuContentProps {\n  header?: MenuGroupHeader;\n  items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n  footer?: MenuGroupFooter;\n  action?: MenuButton;\n\n  onSubMenuOpen?: (item: MenuNavigationItemTypeGroup) => void;\n}\n\nconst MobileMenuContent: React.FunctionComponent<MobileMenuContentProps> = ({\n                                                                              header,\n                                                                              items,\n                                                                              footer,\n                                                                              action,\n                                                                              onSubMenuOpen\n                                                                            }) => {\n\n  const isSmallScreen = useMediaQuery({query: BREAKPOINTS.SMALL.replace('@media ', '')});\n\n  const {navigate, isActiveRoute} = useNavigationHelper();\n\n  const [scrollable, setScrollable] = React.useState(false);\n\n  const [scrollContainerRef, dimensions, node] = useDimensionsRef({updateOnResize: true});\n\n  React.useEffect(() => {\n    const clientHeight = node?.clientHeight ?? 0;\n    const scrollHeight = node?.scrollHeight ?? 0;\n    setScrollable(scrollHeight > clientHeight);\n  }, [header, dimensions, node, footer, action, items]);\n\n  const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection, index: number) => {\n    switch (item.type) {\n      case 'section':\n        return (\n          <MenuSectionContainer key={index}>\n            {item.label && <MenuSectionHeader>{item.label}</MenuSectionHeader>}\n            <MenuSectionList>\n              {item.items.map((item, index) => renderItem(item, index))}\n            </MenuSectionList>\n          </MenuSectionContainer>\n        );\n      case 'group':\n        return <MenuItem key={index}\n                         id={'menu-item-' + index}\n                         size={isSmallScreen ? Size.Medium : Size.Small}\n                         active={false}\n                         item={{\n                           value: item.label,\n                           disabled: item.disabled,\n                           icon: item.icon,\n                           displayLabel: item.label,\n                           noteLabel: item.note,\n                         }}\n                         iconRight={<SystemIcons.ArrowDropRight/>}\n                         onClickHandler={(e) => {\n                           e.nativeEvent.stopImmediatePropagation();\n                           onSubMenuOpen && onSubMenuOpen(item);\n                         }}/>\n      case 'item':\n      default:\n        return (\n          <MenuItem key={index}\n                    id={'menu-item-' + index}\n                    active={!item.external && isActiveRoute(item.to, !!item.exact)}\n                    size={isSmallScreen ? Size.Medium : Size.Small}\n                    item={{\n                      value: item.to,\n                      disabled: item.disabled,\n                      icon: item.icon,\n                      displayLabel: item.label,\n                      noteLabel: item.note,\n                    }}\n                    onClickHandler={() => {\n                      item.action && item.action();\n                      navigate(item.to, !!item.external);\n                    }}/>\n        );\n    }\n  }\n\n  return (\n    <Wrapper>\n      <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n        {\n          !!header &&\n          <HeaderContainer>\n            <HeaderText>{header.header}</HeaderText>\n            {header.note && <HeaderNote>{header.note}</HeaderNote>}\n          </HeaderContainer>\n        }\n        <MenuItemsContainer>\n          {items?.filter(a => !a.pinned).map((item, index) => renderItem(item, index))}\n        </MenuItemsContainer>\n      </ScrollableContainer>\n      {\n        items?.some(a => a.pinned) &&\n        <PinnedContainer>\n          <MenuItemsContainer>\n            {items?.filter(a => !!a.pinned).map((item, index) => renderItem(item, index))}\n          </MenuItemsContainer>\n        </PinnedContainer>\n\n      }\n      {\n        footer &&\n        <FooterContainer>\n          <FooterText>{footer.header}</FooterText>\n          {footer.note && <FooterNote>{footer.note}</FooterNote>}\n          {footer.link &&\n            <FooterLink>\n              <HyperLink variant={'default'}\n                         id={footer.link.id}\n                         target={footer.link.target}\n                         onClick={footer.link.onClick}\n                         href={footer.link.href}>\n                {footer.link.label}\n              </HyperLink>\n            </FooterLink>\n          }\n        </FooterContainer>\n      }\n      {\n        action &&\n        <ActionContainer>\n          <Button variant={'secondary'}\n                  size={isSmallScreen ? Size.Medium : Size.Small}\n                  disabled={action.disabled}\n                  icon={action.icon}\n                  onClick={action.action}>\n            {action.label}\n          </Button>\n        </ActionContainer>\n      }\n    </Wrapper>\n  )\n};\n\nexport default MobileMenuContent;\n"],"file":"MobileMenuContent.cjs"}
+{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuContent.tsx"],"names":["HeaderText","styled","div","ComponentTextStyle","Bold","COLORS","neutral_600","BREAKPOINTS","SMALL","HeaderNote","ParagraphTextStyle","Regular","HeaderContainer","neutral_200","ScrollableContainer","Size","Small","MenuItemsContainer","MenuSectionContainer","MenuSectionHeader","neutral_20","neutral_500","MenuSectionList","PinnedContainer","FooterText","FooterNote","FooterLink","FooterContainer","ActionContainer","Wrapper","MobileMenuContent","header","items","footer","action","onSubMenuOpen","isSmallScreen","query","replace","navigate","isActiveRoute","React","useState","scrollable","setScrollable","updateOnResize","scrollContainerRef","dimensions","node","useEffect","clientHeight","scrollHeight","renderItem","item","index","type","label","map","Medium","value","disabled","icon","displayLabel","noteLabel","note","e","nativeEvent","stopImmediatePropagation","external","to","exact","filter","a","pinned","some","link","id","target","onClick","href"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n  MenuButton,\n  MenuGroupFooter,\n  MenuGroupHeader,\n  MenuNavigationItemTypeGroup,\n  MenuNavigationItemTypeItem,\n  MenuNavigationItemTypeSection\n} from '../types';\nimport styled from 'styled-components';\nimport {\n  BREAKPOINTS,\n  COLORS,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ParagraphSStyling,\n  ParagraphTextStyle,\n  ParagraphXSStyling,\n  scrollBarStyling\n} from '../../styles';\nimport {Size} from '../../types';\nimport {HyperLink} from '../../HyperLink';\nimport {useMediaQuery} from 'react-responsive';\nimport {Button} from '../../Button';\nimport {useNavigationHelper} from '../NavigationHelper';\nimport {MenuItem} from '../../MenuItem';\nimport {SystemIcons} from '../../icons';\nimport {useDimensionsRef} from 'rooks';\n\n\nconst HeaderText = styled.div`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\nconst HeaderNote = styled.div`\n  ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst HeaderContainer = styled.div`\n  margin: 0 24px;\n  padding-bottom: 8px;\n  box-sizing: border-box;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n`;\n\n\nconst ScrollableContainer = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  max-height: 100%;\n\n  &.scrollable {\n    margin-right: 6px;\n    padding-right: 10px;\n  }\n\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst MenuItemsContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  padding: 8px;\n`;\n\nconst MenuSectionContainer = styled.div`\n  padding-bottom: 8px;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\nconst MenuSectionHeader = styled.div`\n  display: flex;\n  align-items: center;\n  padding: 8px 16px 4px 16px;\n  box-sizing: border-box;\n  min-height: 32px;\n  background-color: ${COLORS.neutral_20};\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\n\nconst PinnedContainer = styled.div`\n  border-top: 1px solid ${COLORS.neutral_200};\n`;\n\nconst FooterText = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\nconst FooterNote = styled.div`\n  ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n  }\n`;\nconst FooterLink = styled.div`\n  a {\n    ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n    ${BREAKPOINTS.SMALL} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n  }\n`;\n\nconst FooterContainer = styled.div`\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n  background: ${COLORS.neutral_20};\n\n  ${BREAKPOINTS.SMALL} {\n    padding: 16px;\n  }\n`;\n\nconst ActionContainer = styled.div`\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n\n  ${BREAKPOINTS.SMALL} {\n    padding: 16px;\n  }\n`;\n\nconst Wrapper = styled.div`\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n`;\n\ninterface MobileMenuContentProps {\n  header?: MenuGroupHeader;\n  items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n  footer?: MenuGroupFooter;\n  action?: MenuButton;\n\n  onSubMenuOpen?: (item: MenuNavigationItemTypeGroup) => void;\n}\n\nconst MobileMenuContent: React.FunctionComponent<MobileMenuContentProps> = ({\n                                                                              header,\n                                                                              items,\n                                                                              footer,\n                                                                              action,\n                                                                              onSubMenuOpen\n                                                                            }) => {\n\n  const isSmallScreen = useMediaQuery({query: BREAKPOINTS.SMALL.replace('@media ', '')});\n\n  const {navigate, isActiveRoute} = useNavigationHelper();\n\n  const [scrollable, setScrollable] = React.useState(false);\n\n  const [scrollContainerRef, dimensions, node] = useDimensionsRef({updateOnResize: true});\n\n  React.useEffect(() => {\n    const clientHeight = node?.clientHeight ?? 0;\n    const scrollHeight = node?.scrollHeight ?? 0;\n    setScrollable(scrollHeight > clientHeight);\n  }, [header, dimensions, node, footer, action, items]);\n\n  const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection, index: number) => {\n    switch (item.type) {\n      case 'section':\n        return (\n          <MenuSectionContainer key={index}>\n            {item.label && <MenuSectionHeader>{item.label}</MenuSectionHeader>}\n            <MenuSectionList>\n              {item.items.map((item, index) => renderItem(item, index))}\n            </MenuSectionList>\n          </MenuSectionContainer>\n        );\n      case 'group':\n        return <MenuItem key={index}\n                         id={'menu-item-' + index}\n                         size={isSmallScreen ? Size.Medium : Size.Small}\n                         active={false}\n                         item={{\n                           value: item.label,\n                           disabled: item.disabled,\n                           icon: item.icon,\n                           displayLabel: item.label,\n                           noteLabel: item.note,\n                         }}\n                         iconRight={<SystemIcons.ArrowDropRight/>}\n                         onClickHandler={(e) => {\n                           e.nativeEvent.stopImmediatePropagation();\n                           onSubMenuOpen && onSubMenuOpen(item);\n                         }}/>\n      case 'item':\n      default:\n        return (\n          <MenuItem key={index}\n                    id={'menu-item-' + index}\n                    active={!item.external && isActiveRoute(item.to, !!item.exact)}\n                    size={isSmallScreen ? Size.Medium : Size.Small}\n                    item={{\n                      value: item.to,\n                      disabled: item.disabled,\n                      icon: item.icon,\n                      displayLabel: item.label,\n                      noteLabel: item.note,\n                    }}\n                    onClickHandler={() => {\n                      item.action && item.action();\n                      navigate(item.to, !!item.external);\n                    }}/>\n        );\n    }\n  }\n\n  return (\n    <Wrapper>\n      <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n        {\n          !!header &&\n          <HeaderContainer>\n            <HeaderText>{header.header}</HeaderText>\n            {header.note && <HeaderNote>{header.note}</HeaderNote>}\n          </HeaderContainer>\n        }\n        <MenuItemsContainer>\n          {items?.filter(a => !a.pinned).map((item, index) => renderItem(item, index))}\n        </MenuItemsContainer>\n      </ScrollableContainer>\n      {\n        items?.some(a => a.pinned) &&\n        <PinnedContainer>\n          <MenuItemsContainer>\n            {items?.filter(a => !!a.pinned).map((item, index) => renderItem(item, index))}\n          </MenuItemsContainer>\n        </PinnedContainer>\n\n      }\n      {\n        footer &&\n        <FooterContainer>\n          <FooterText>{footer.header}</FooterText>\n          {footer.note && <FooterNote>{footer.note}</FooterNote>}\n          {footer.link &&\n            <FooterLink>\n              <HyperLink variant={'default'}\n                         id={footer.link.id}\n                         target={footer.link.target}\n                         onClick={footer.link.onClick}\n                         href={footer.link.href}>\n                {footer.link.label}\n              </HyperLink>\n            </FooterLink>\n          }\n        </FooterContainer>\n      }\n      {\n        action &&\n        <ActionContainer>\n          <Button variant={'secondary'}\n                  size={isSmallScreen ? Size.Medium : Size.Small}\n                  disabled={action.disabled}\n                  icon={action.icon}\n                  onClick={action.action}>\n            {action.label}\n          </Button>\n        </ActionContainer>\n      }\n    </Wrapper>\n  )\n};\n\nexport default MobileMenuContent;\n"],"file":"MobileMenuContent.cjs"}

package/dist/GlobalNavigationBar/mobile/MobileMenuContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuContent.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ParagraphSStyling","ParagraphTextStyle","ParagraphXSStyling","scrollBarStyling","Size","HyperLink","useMediaQuery","Button","useNavigationHelper","MenuItem","SystemIcons","useDimensionsRef","HeaderText","div","Bold","neutral_600","SMALL","HeaderNote","Regular","HeaderContainer","neutral_200","ScrollableContainer","Small","MenuItemsContainer","MenuSectionContainer","MenuSectionHeader","neutral_20","neutral_500","MenuSectionList","PinnedContainer","FooterText","FooterNote","FooterLink","FooterContainer","ActionContainer","Wrapper","MobileMenuContent","header","items","footer","action","onSubMenuOpen","isSmallScreen","query","replace","navigate","isActiveRoute","useState","scrollable","setScrollable","updateOnResize","scrollContainerRef","dimensions","node","useEffect","clientHeight","scrollHeight","renderItem","item","index","type","label","map","Medium","value","disabled","icon","displayLabel","noteLabel","note","e","nativeEvent","stopImmediatePropagation","external","to","exact","filter","a","pinned","some","link","id","target","onClick","href"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n  MenuButton,\n  MenuGroupFooter,\n  MenuGroupHeader,\n  MenuNavigationItemTypeGroup,\n  MenuNavigationItemTypeItem,\n  MenuNavigationItemTypeSection\n} from '../types';\nimport styled from 'styled-components';\nimport {\n  BREAKPOINTS,\n  COLORS,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ParagraphSStyling,\n  ParagraphTextStyle,\n  ParagraphXSStyling,\n  scrollBarStyling\n} from '../../styles';\nimport {Size} from '../../types';\nimport {HyperLink} from '../../HyperLink';\nimport {useMediaQuery} from 'react-responsive';\nimport {Button} from '../../Button';\nimport {useNavigationHelper} from '../NavigationHelper';\nimport {MenuItem} from '../../MenuItem';\nimport {SystemIcons} from '../../icons';\nimport {useDimensionsRef} from 'rooks';\n\n\nconst HeaderText = styled.div`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\nconst HeaderNote = styled.div`\n  ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n`;\nconst HeaderContainer = styled.div`\n  margin: 0 24px;\n  padding-bottom: 8px;\n  box-sizing: border-box;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n`;\n\n\nconst ScrollableContainer = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  max-height: 100%;\n\n  &.scrollable {\n    margin-right: 6px;\n    padding-right: 10px;\n  }\n\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst MenuItemsContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  padding: 8px;\n`;\n\nconst MenuSectionContainer = styled.div`\n  padding-bottom: 8px;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\nconst MenuSectionHeader = styled.div`\n  display: flex;\n  align-items: center;\n  padding: 8px 16px 4px 16px;\n  box-sizing: border-box;\n  min-height: 32px;\n  background-color: ${COLORS.neutral_20};\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\n\nconst PinnedContainer = styled.div`\n  border-top: 1px solid ${COLORS.neutral_200};\n`;\n\nconst FooterText = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\nconst FooterNote = styled.div`\n  ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n  }\n`;\nconst FooterLink = styled.div`\n  a {\n    ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n    ${BREAKPOINTS.SMALL} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n  }\n`;\n\nconst FooterContainer = styled.div`\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n  background: ${COLORS.neutral_20};\n\n  ${BREAKPOINTS.SMALL} {\n    padding: 16px;\n  }\n`;\n\nconst ActionContainer = styled.div`\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n\n  ${BREAKPOINTS.SMALL} {\n    padding: 16px;\n  }\n`;\n\nconst Wrapper = styled.div`\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n`;\n\ninterface MobileMenuContentProps {\n  header?: MenuGroupHeader;\n  items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n  footer?: MenuGroupFooter;\n  action?: MenuButton;\n\n  onSubMenuOpen?: (item: MenuNavigationItemTypeGroup) => void;\n}\n\nconst MobileMenuContent: React.FunctionComponent<MobileMenuContentProps> = ({\n                                                                              header,\n                                                                              items,\n                                                                              footer,\n                                                                              action,\n                                                                              onSubMenuOpen\n                                                                            }) => {\n\n  const isSmallScreen = useMediaQuery({query: BREAKPOINTS.SMALL.replace('@media ', '')});\n\n  const {navigate, isActiveRoute} = useNavigationHelper();\n\n  const [scrollable, setScrollable] = React.useState(false);\n\n  const [scrollContainerRef, dimensions, node] = useDimensionsRef({updateOnResize: true});\n\n  React.useEffect(() => {\n    const clientHeight = node?.clientHeight ?? 0;\n    const scrollHeight = node?.scrollHeight ?? 0;\n    setScrollable(scrollHeight > clientHeight);\n  }, [header, dimensions, node, footer, action, items]);\n\n  const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection, index: number) => {\n    switch (item.type) {\n      case 'section':\n        return (\n          <MenuSectionContainer key={index}>\n            {item.label && <MenuSectionHeader>{item.label}</MenuSectionHeader>}\n            <MenuSectionList>\n              {item.items.map((item, index) => renderItem(item, index))}\n            </MenuSectionList>\n          </MenuSectionContainer>\n        );\n      case 'group':\n        return <MenuItem key={index}\n                         id={'menu-item-' + index}\n                         size={isSmallScreen ? Size.Medium : Size.Small}\n                         active={false}\n                         item={{\n                           value: item.label,\n                           disabled: item.disabled,\n                           icon: item.icon,\n                           displayLabel: item.label,\n                           noteLabel: item.note,\n                         }}\n                         iconRight={<SystemIcons.ArrowDropRight/>}\n                         onClickHandler={(e) => {\n                           e.nativeEvent.stopImmediatePropagation();\n                           onSubMenuOpen && onSubMenuOpen(item);\n                         }}/>\n      case 'item':\n      default:\n        return (\n          <MenuItem key={index}\n                    id={'menu-item-' + index}\n                    active={!item.external && isActiveRoute(item.to, !!item.exact)}\n                    size={isSmallScreen ? Size.Medium : Size.Small}\n                    item={{\n                      value: item.to,\n                      disabled: item.disabled,\n                      icon: item.icon,\n                      displayLabel: item.label,\n                      noteLabel: item.note,\n                    }}\n                    onClickHandler={() => {\n                      item.action && item.action();\n                      navigate(item.to, !!item.external);\n                    }}/>\n        );\n    }\n  }\n\n  return (\n    <Wrapper>\n      <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n        {\n          !!header &&\n          <HeaderContainer>\n            <HeaderText>{header.header}</HeaderText>\n            {header.note && <HeaderNote>{header.note}</HeaderNote>}\n          </HeaderContainer>\n        }\n        <MenuItemsContainer>\n          {items?.filter(a => !a.pinned).map((item, index) => renderItem(item, index))}\n        </MenuItemsContainer>\n      </ScrollableContainer>\n      {\n        items?.some(a => a.pinned) &&\n        <PinnedContainer>\n          <MenuItemsContainer>\n            {items?.filter(a => !!a.pinned).map((item, index) => renderItem(item, index))}\n          </MenuItemsContainer>\n        </PinnedContainer>\n\n      }\n      {\n        footer &&\n        <FooterContainer>\n          <FooterText>{footer.header}</FooterText>\n          {footer.note && <FooterNote>{footer.note}</FooterNote>}\n          {footer.link &&\n            <FooterLink>\n              <HyperLink variant={'default'}\n                         id={footer.link.id}\n                         target={footer.link.target}\n                         onClick={footer.link.onClick}\n                         href={footer.link.href}>\n                {footer.link.label}\n              </HyperLink>\n            </FooterLink>\n          }\n        </FooterContainer>\n      }\n      {\n        action &&\n        <ActionContainer>\n          <Button variant={'secondary'}\n                  size={isSmallScreen ? Size.Medium : Size.Small}\n                  disabled={action.disabled}\n                  icon={action.icon}\n                  onClick={action.action}>\n            {action.label}\n          </Button>\n        </ActionContainer>\n      }\n    </Wrapper>\n  )\n};\n\nexport default MobileMenuContent;\n"],"file":"MobileMenuContent.js"}
+{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuContent.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ParagraphSStyling","ParagraphTextStyle","ParagraphXSStyling","scrollBarStyling","Size","HyperLink","useMediaQuery","Button","useNavigationHelper","MenuItem","SystemIcons","useDimensionsRef","HeaderText","div","Bold","neutral_600","SMALL","HeaderNote","Regular","HeaderContainer","neutral_200","ScrollableContainer","Small","MenuItemsContainer","MenuSectionContainer","MenuSectionHeader","neutral_20","neutral_500","MenuSectionList","PinnedContainer","FooterText","FooterNote","FooterLink","FooterContainer","ActionContainer","Wrapper","MobileMenuContent","header","items","footer","action","onSubMenuOpen","isSmallScreen","query","replace","navigate","isActiveRoute","useState","scrollable","setScrollable","updateOnResize","scrollContainerRef","dimensions","node","useEffect","clientHeight","scrollHeight","renderItem","item","index","type","label","map","Medium","value","disabled","icon","displayLabel","noteLabel","note","e","nativeEvent","stopImmediatePropagation","external","to","exact","filter","a","pinned","some","link","id","target","onClick","href"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n  MenuButton,\n  MenuGroupFooter,\n  MenuGroupHeader,\n  MenuNavigationItemTypeGroup,\n  MenuNavigationItemTypeItem,\n  MenuNavigationItemTypeSection\n} from '../types';\nimport styled from 'styled-components';\nimport {\n  BREAKPOINTS,\n  COLORS,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ParagraphSStyling,\n  ParagraphTextStyle,\n  ParagraphXSStyling,\n  scrollBarStyling\n} from '../../styles';\nimport {Size} from '../../types';\nimport {HyperLink} from '../../HyperLink';\nimport {useMediaQuery} from 'react-responsive';\nimport {Button} from '../../Button';\nimport {useNavigationHelper} from '../NavigationHelper';\nimport {MenuItem} from '../../MenuItem';\nimport {SystemIcons} from '../../icons';\nimport {useDimensionsRef} from 'rooks';\n\n\nconst HeaderText = styled.div`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\nconst HeaderNote = styled.div`\n  ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst HeaderContainer = styled.div`\n  margin: 0 24px;\n  padding-bottom: 8px;\n  box-sizing: border-box;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n`;\n\n\nconst ScrollableContainer = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  max-height: 100%;\n\n  &.scrollable {\n    margin-right: 6px;\n    padding-right: 10px;\n  }\n\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst MenuItemsContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  padding: 8px;\n`;\n\nconst MenuSectionContainer = styled.div`\n  padding-bottom: 8px;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\nconst MenuSectionHeader = styled.div`\n  display: flex;\n  align-items: center;\n  padding: 8px 16px 4px 16px;\n  box-sizing: border-box;\n  min-height: 32px;\n  background-color: ${COLORS.neutral_20};\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\n\nconst PinnedContainer = styled.div`\n  border-top: 1px solid ${COLORS.neutral_200};\n`;\n\nconst FooterText = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\nconst FooterNote = styled.div`\n  ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n  }\n`;\nconst FooterLink = styled.div`\n  a {\n    ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n    ${BREAKPOINTS.SMALL} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n  }\n`;\n\nconst FooterContainer = styled.div`\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n  background: ${COLORS.neutral_20};\n\n  ${BREAKPOINTS.SMALL} {\n    padding: 16px;\n  }\n`;\n\nconst ActionContainer = styled.div`\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n\n  ${BREAKPOINTS.SMALL} {\n    padding: 16px;\n  }\n`;\n\nconst Wrapper = styled.div`\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n`;\n\ninterface MobileMenuContentProps {\n  header?: MenuGroupHeader;\n  items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n  footer?: MenuGroupFooter;\n  action?: MenuButton;\n\n  onSubMenuOpen?: (item: MenuNavigationItemTypeGroup) => void;\n}\n\nconst MobileMenuContent: React.FunctionComponent<MobileMenuContentProps> = ({\n                                                                              header,\n                                                                              items,\n                                                                              footer,\n                                                                              action,\n                                                                              onSubMenuOpen\n                                                                            }) => {\n\n  const isSmallScreen = useMediaQuery({query: BREAKPOINTS.SMALL.replace('@media ', '')});\n\n  const {navigate, isActiveRoute} = useNavigationHelper();\n\n  const [scrollable, setScrollable] = React.useState(false);\n\n  const [scrollContainerRef, dimensions, node] = useDimensionsRef({updateOnResize: true});\n\n  React.useEffect(() => {\n    const clientHeight = node?.clientHeight ?? 0;\n    const scrollHeight = node?.scrollHeight ?? 0;\n    setScrollable(scrollHeight > clientHeight);\n  }, [header, dimensions, node, footer, action, items]);\n\n  const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection, index: number) => {\n    switch (item.type) {\n      case 'section':\n        return (\n          <MenuSectionContainer key={index}>\n            {item.label && <MenuSectionHeader>{item.label}</MenuSectionHeader>}\n            <MenuSectionList>\n              {item.items.map((item, index) => renderItem(item, index))}\n            </MenuSectionList>\n          </MenuSectionContainer>\n        );\n      case 'group':\n        return <MenuItem key={index}\n                         id={'menu-item-' + index}\n                         size={isSmallScreen ? Size.Medium : Size.Small}\n                         active={false}\n                         item={{\n                           value: item.label,\n                           disabled: item.disabled,\n                           icon: item.icon,\n                           displayLabel: item.label,\n                           noteLabel: item.note,\n                         }}\n                         iconRight={<SystemIcons.ArrowDropRight/>}\n                         onClickHandler={(e) => {\n                           e.nativeEvent.stopImmediatePropagation();\n                           onSubMenuOpen && onSubMenuOpen(item);\n                         }}/>\n      case 'item':\n      default:\n        return (\n          <MenuItem key={index}\n                    id={'menu-item-' + index}\n                    active={!item.external && isActiveRoute(item.to, !!item.exact)}\n                    size={isSmallScreen ? Size.Medium : Size.Small}\n                    item={{\n                      value: item.to,\n                      disabled: item.disabled,\n                      icon: item.icon,\n                      displayLabel: item.label,\n                      noteLabel: item.note,\n                    }}\n                    onClickHandler={() => {\n                      item.action && item.action();\n                      navigate(item.to, !!item.external);\n                    }}/>\n        );\n    }\n  }\n\n  return (\n    <Wrapper>\n      <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n        {\n          !!header &&\n          <HeaderContainer>\n            <HeaderText>{header.header}</HeaderText>\n            {header.note && <HeaderNote>{header.note}</HeaderNote>}\n          </HeaderContainer>\n        }\n        <MenuItemsContainer>\n          {items?.filter(a => !a.pinned).map((item, index) => renderItem(item, index))}\n        </MenuItemsContainer>\n      </ScrollableContainer>\n      {\n        items?.some(a => a.pinned) &&\n        <PinnedContainer>\n          <MenuItemsContainer>\n            {items?.filter(a => !!a.pinned).map((item, index) => renderItem(item, index))}\n          </MenuItemsContainer>\n        </PinnedContainer>\n\n      }\n      {\n        footer &&\n        <FooterContainer>\n          <FooterText>{footer.header}</FooterText>\n          {footer.note && <FooterNote>{footer.note}</FooterNote>}\n          {footer.link &&\n            <FooterLink>\n              <HyperLink variant={'default'}\n                         id={footer.link.id}\n                         target={footer.link.target}\n                         onClick={footer.link.onClick}\n                         href={footer.link.href}>\n                {footer.link.label}\n              </HyperLink>\n            </FooterLink>\n          }\n        </FooterContainer>\n      }\n      {\n        action &&\n        <ActionContainer>\n          <Button variant={'secondary'}\n                  size={isSmallScreen ? Size.Medium : Size.Small}\n                  disabled={action.disabled}\n                  icon={action.icon}\n                  onClick={action.action}>\n            {action.label}\n          </Button>\n        </ActionContainer>\n      }\n    </Wrapper>\n  )\n};\n\nexport default MobileMenuContent;\n"],"file":"MobileMenuContent.js"}

package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.cjs

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.MobileMenuHeaderWrapper = exports.MobileMenuHeaderActions = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -37,10 +37,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 var MobileMenuHeaderActions = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  justify-content: flex-end;\n  display: flex;\n  flex-direction: row;\n"])));
 
+exports.MobileMenuHeaderActions = MobileMenuHeaderActions;
+
 var MobileMenuHeaderLabel = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.SMALL, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600));
 
 var MobileMenuHeaderWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0 4px;\n\n  ", " {\n    padding: 4px 8px;\n  }\n\n  ", " {\n    display: none;\n  }\n"])), _breakpoints.default.SMALL, _breakpoints.default.MEDIUM);
 
+exports.MobileMenuHeaderWrapper = MobileMenuHeaderWrapper;
+
 var MobileMenuHeader = function MobileMenuHeader(_ref) {
   var onGoBack = _ref.onGoBack,
       onClose = _ref.onClose,

package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuHeader.tsx"],"names":["MobileMenuHeaderActions","styled","div","MobileMenuHeaderLabel","ComponentTextStyle","Bold","COLORS","neutral_600","BREAKPOINTS","SMALL","MobileMenuHeaderWrapper","Breakpoints","MEDIUM","MobileMenuHeader","onGoBack","onClose","label","profile","buttons","onSubMenuOpen","buildProfileSubMenu","type","header","user","firstName","lastName","note","email","link","action","signOut","icon","disabled","items","sections","map","a","undefined","renderItem","item","index","e","nativeEvent","stopImmediatePropagation","target","charAt","menu","filter","placement","marginLeft"],"mappings":"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","sourcesContent":["import React, {useImperativeHandle} from 'react';\nimport {\n  MenuAccountInfo, MobileMenuButtonTypes,\n  MenuIconButton,\n  MenuIconSubMenuButton,\n  MenuNavigationItemTypeGroup,\n  MenuProfileButton, ProfileMenu, MenuNavigationCustomSubMenu\n} from '../types';\nimport styled from 'styled-components';\nimport Breakpoints from '../../styles/breakpoints';\nimport {IconButton} from '../../Button';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\nimport {ProfileButton} from '../../ProfileButton';\n\nconst MobileMenuHeaderActions = styled.div`\n  flex: 1;\n  justify-content: flex-end;\n  display: flex;\n  flex-direction: row;\n`;\nconst MobileMenuHeaderLabel = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\n\nconst MobileMenuHeaderWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0 4px;\n\n  ${Breakpoints.SMALL} {\n    padding: 4px 8px;\n  }\n\n  ${Breakpoints.MEDIUM} {\n    display: none;\n  }\n`\n\ninterface MobileMenuHeaderProps {\n  onGoBack?: () => void;\n  onClose: () => void;\n  label?: string;\n\n  profile?: ProfileMenu\n  buttons?: MobileMenuButtonTypes[];\n\n  onSubMenuOpen?: (item?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => void;\n}\n\n\nconst MobileMenuHeader: React.FunctionComponent<MobileMenuHeaderProps> = ({\n                                                                            onGoBack,\n                                                                            onClose,\n                                                                            label,\n                                                                            profile,\n                                                                            buttons,\n                                                                            onSubMenuOpen\n                                                                          }) => {\n\n  const buildProfileSubMenu = () => !!profile ? {\n    type: 'group',\n    label: profile.label,\n    header: {\n      header: profile.user.firstName + ' ' + profile.user.lastName,\n      note: profile.user.email,\n      link: profile.user.link\n    },\n    action: {\n      label: profile.signOut?.label,\n      action: profile.signOut?.action,\n      icon: profile.signOut?.icon,\n      disabled: profile.signOut?.disabled\n    },\n    items: profile.sections.map(a => ({...a, type: 'section'}))\n  } as MenuNavigationItemTypeGroup : undefined\n\n\n  const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n    switch (item.type) {\n      case 'profile':\n        return <ProfileButton key={index}\n                              onClick={e => {\n                                e?.nativeEvent.stopImmediatePropagation();\n                                item.action ? item.action(e?.target) && onClose() : onSubMenuOpen && onSubMenuOpen(buildProfileSubMenu())\n                              }}\n                              icon={!profile && <SystemIcons.User/>}\n                              initials={(profile?.user?.firstName?.charAt(0) ?? '') + (profile?.user?.lastName?.charAt(0) ?? '')}/>\n      case 'submenu':\n        return <IconButton key={index}\n                           disabled={item.disabled}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           action={e => {\n                             e?.nativeEvent.stopImmediatePropagation();\n                             onSubMenuOpen && onSubMenuOpen(item.menu)\n                           }}>\n          {item.icon}\n        </IconButton>\n      case 'action':\n        return <IconButton key={index}\n                           disabled={item.disabled}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           action={e => {\n                             e?.nativeEvent.stopImmediatePropagation();\n                             item.action && item.action(e?.target) && onClose();\n                           }}>\n          {item.icon}\n        </IconButton>\n    }\n  }\n\n  return (\n    <MobileMenuHeaderWrapper>\n      {\n        onGoBack &&\n        <IconButton action={e => {\n          e?.nativeEvent.stopImmediatePropagation();\n          onGoBack();\n        }}\n                    variant={'secondary'}\n                    shape={'circular'}>\n          <SystemIcons.ArrowLineLeft/>\n        </IconButton>\n      }\n      {\n        buttons?.filter(a => a.placement === 'left').map(renderItem)\n      }\n      {\n        label &&\n        <MobileMenuHeaderLabel>{label}</MobileMenuHeaderLabel>\n      }\n      <MobileMenuHeaderActions>\n        {\n          buttons?.filter(a => a.placement !== 'left').map(renderItem)\n        }\n\n        {\n          onClose &&\n          <div style={{marginLeft: '8px'}}>\n            <IconButton variant={'secondary'}\n                        action={e => {\n                          e?.nativeEvent.stopImmediatePropagation();\n                          onClose();\n                        }}\n                        shape={'circular'}>\n              <SystemIcons.Close/>\n            </IconButton>\n          </div>\n        }\n      </MobileMenuHeaderActions>\n\n    </MobileMenuHeaderWrapper>\n  )\n};\n\n\nexport default MobileMenuHeader;\n"],"file":"MobileMenuHeader.cjs"}
+{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuHeader.tsx"],"names":["MobileMenuHeaderActions","styled","div","MobileMenuHeaderLabel","ComponentTextStyle","Bold","COLORS","neutral_600","BREAKPOINTS","SMALL","MobileMenuHeaderWrapper","Breakpoints","MEDIUM","MobileMenuHeader","onGoBack","onClose","label","profile","buttons","onSubMenuOpen","buildProfileSubMenu","type","header","user","firstName","lastName","note","email","link","action","signOut","icon","disabled","items","sections","map","a","undefined","renderItem","item","index","e","nativeEvent","stopImmediatePropagation","target","charAt","menu","filter","placement","marginLeft"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n  MobileMenuButtonTypes,\n  MenuNavigationItemTypeGroup,\n  ProfileMenu, MenuNavigationCustomSubMenu\n} from '../types';\nimport styled from 'styled-components';\nimport Breakpoints from '../../styles/breakpoints';\nimport {IconButton} from '../../Button';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\nimport {ProfileButton} from '../../ProfileButton';\n\nexport const MobileMenuHeaderActions = styled.div`\n  flex: 1;\n  justify-content: flex-end;\n  display: flex;\n  flex-direction: row;\n`;\nconst MobileMenuHeaderLabel = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\n\nexport const MobileMenuHeaderWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0 4px;\n\n  ${Breakpoints.SMALL} {\n    padding: 4px 8px;\n  }\n\n  ${Breakpoints.MEDIUM} {\n    display: none;\n  }\n`\n\ninterface MobileMenuHeaderProps {\n  onGoBack?: () => void;\n  onClose: () => void;\n  label?: string;\n\n  profile?: ProfileMenu\n  buttons?: MobileMenuButtonTypes[];\n\n  onSubMenuOpen?: (item?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => void;\n}\n\n\nconst MobileMenuHeader: React.FunctionComponent<MobileMenuHeaderProps> = ({\n                                                                            onGoBack,\n                                                                            onClose,\n                                                                            label,\n                                                                            profile,\n                                                                            buttons,\n                                                                            onSubMenuOpen\n                                                                          }) => {\n\n  const buildProfileSubMenu = () => !!profile ? {\n    type: 'group',\n    label: profile.label,\n    header: {\n      header: profile.user.firstName + ' ' + profile.user.lastName,\n      note: profile.user.email,\n      link: profile.user.link\n    },\n    action: {\n      label: profile.signOut?.label,\n      action: profile.signOut?.action,\n      icon: profile.signOut?.icon,\n      disabled: profile.signOut?.disabled\n    },\n    items: profile.sections.map(a => ({...a, type: 'section'}))\n  } as MenuNavigationItemTypeGroup : undefined\n\n  const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n    switch (item.type) {\n      case 'profile':\n        return <ProfileButton key={index}\n                              onClick={e => {\n                                e?.nativeEvent.stopImmediatePropagation();\n                                item.action ? item.action(e?.target) && onClose() : onSubMenuOpen && onSubMenuOpen(buildProfileSubMenu())\n                              }}\n                              icon={!profile && <SystemIcons.User/>}\n                              initials={(profile?.user?.firstName?.charAt(0) ?? '') + (profile?.user?.lastName?.charAt(0) ?? '')}/>\n      case 'submenu':\n        return <IconButton key={index}\n                           disabled={item.disabled}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           action={e => {\n                             e?.nativeEvent.stopImmediatePropagation();\n                             onSubMenuOpen && onSubMenuOpen(item.menu)\n                           }}>\n          {item.icon}\n        </IconButton>\n      case 'action':\n        return <IconButton key={index}\n                           disabled={item.disabled}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           action={e => {\n                             e?.nativeEvent.stopImmediatePropagation();\n                             item.action && item.action(e?.target) && onClose();\n                           }}>\n          {item.icon}\n        </IconButton>\n    }\n  }\n\n  return (\n    <MobileMenuHeaderWrapper>\n      {\n        onGoBack &&\n        <IconButton action={e => {\n          e?.nativeEvent.stopImmediatePropagation();\n          onGoBack();\n        }}\n                    variant={'secondary'}\n                    shape={'circular'}>\n          <SystemIcons.ArrowLineLeft/>\n        </IconButton>\n      }\n      {\n        buttons?.filter(a => a.placement === 'left').map(renderItem)\n      }\n      {\n        label &&\n        <MobileMenuHeaderLabel>{label}</MobileMenuHeaderLabel>\n      }\n      <MobileMenuHeaderActions>\n        {\n          buttons?.filter(a => a.placement !== 'left').map(renderItem)\n        }\n\n        {\n          onClose &&\n          <div style={{marginLeft: '8px'}}>\n            <IconButton variant={'secondary'}\n                        action={e => {\n                          e?.nativeEvent.stopImmediatePropagation();\n                          onClose();\n                        }}\n                        shape={'circular'}>\n              <SystemIcons.Close/>\n            </IconButton>\n          </div>\n        }\n      </MobileMenuHeaderActions>\n\n    </MobileMenuHeaderWrapper>\n  )\n};\n\n\nexport default MobileMenuHeader;\n"],"file":"MobileMenuHeader.cjs"}

package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
 import { MobileMenuButtonTypes, MenuNavigationItemTypeGroup, ProfileMenu, MenuNavigationCustomSubMenu } from '../types';
+export declare const MobileMenuHeaderActions: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MobileMenuHeaderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 interface MobileMenuHeaderProps {
     onGoBack?: () => void;
     onClose: () => void;

package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.js

@@ -17,9 +17,9 @@ import { BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXS
 import { ProfileButton } from '../../ProfileButton';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var MobileMenuHeaderActions = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 1;\n  justify-content: flex-end;\n  display: flex;\n  flex-direction: row;\n"])));
+export var MobileMenuHeaderActions = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 1;\n  justify-content: flex-end;\n  display: flex;\n  flex-direction: row;\n"])));
 var MobileMenuHeaderLabel = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), BREAKPOINTS.SMALL, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
-var MobileMenuHeaderWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0 4px;\n\n  ", " {\n    padding: 4px 8px;\n  }\n\n  ", " {\n    display: none;\n  }\n"])), Breakpoints.SMALL, Breakpoints.MEDIUM);
+export var MobileMenuHeaderWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0 4px;\n\n  ", " {\n    padding: 4px 8px;\n  }\n\n  ", " {\n    display: none;\n  }\n"])), Breakpoints.SMALL, Breakpoints.MEDIUM);
 
 var MobileMenuHeader = function MobileMenuHeader(_ref) {
   var onGoBack = _ref.onGoBack,

package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuHeader.tsx"],"names":["React","styled","Breakpoints","IconButton","SystemIcons","BREAKPOINTS","COLORS","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ProfileButton","MobileMenuHeaderActions","div","MobileMenuHeaderLabel","Bold","neutral_600","SMALL","MobileMenuHeaderWrapper","MEDIUM","MobileMenuHeader","onGoBack","onClose","label","profile","buttons","onSubMenuOpen","buildProfileSubMenu","type","header","user","firstName","lastName","note","email","link","action","signOut","icon","disabled","items","sections","map","a","undefined","renderItem","item","index","e","nativeEvent","stopImmediatePropagation","target","charAt","menu","filter","placement","marginLeft"],"mappings":"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","sourcesContent":["import React, {useImperativeHandle} from 'react';\nimport {\n  MenuAccountInfo, MobileMenuButtonTypes,\n  MenuIconButton,\n  MenuIconSubMenuButton,\n  MenuNavigationItemTypeGroup,\n  MenuProfileButton, ProfileMenu, MenuNavigationCustomSubMenu\n} from '../types';\nimport styled from 'styled-components';\nimport Breakpoints from '../../styles/breakpoints';\nimport {IconButton} from '../../Button';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\nimport {ProfileButton} from '../../ProfileButton';\n\nconst MobileMenuHeaderActions = styled.div`\n  flex: 1;\n  justify-content: flex-end;\n  display: flex;\n  flex-direction: row;\n`;\nconst MobileMenuHeaderLabel = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\n\nconst MobileMenuHeaderWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0 4px;\n\n  ${Breakpoints.SMALL} {\n    padding: 4px 8px;\n  }\n\n  ${Breakpoints.MEDIUM} {\n    display: none;\n  }\n`\n\ninterface MobileMenuHeaderProps {\n  onGoBack?: () => void;\n  onClose: () => void;\n  label?: string;\n\n  profile?: ProfileMenu\n  buttons?: MobileMenuButtonTypes[];\n\n  onSubMenuOpen?: (item?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => void;\n}\n\n\nconst MobileMenuHeader: React.FunctionComponent<MobileMenuHeaderProps> = ({\n                                                                            onGoBack,\n                                                                            onClose,\n                                                                            label,\n                                                                            profile,\n                                                                            buttons,\n                                                                            onSubMenuOpen\n                                                                          }) => {\n\n  const buildProfileSubMenu = () => !!profile ? {\n    type: 'group',\n    label: profile.label,\n    header: {\n      header: profile.user.firstName + ' ' + profile.user.lastName,\n      note: profile.user.email,\n      link: profile.user.link\n    },\n    action: {\n      label: profile.signOut?.label,\n      action: profile.signOut?.action,\n      icon: profile.signOut?.icon,\n      disabled: profile.signOut?.disabled\n    },\n    items: profile.sections.map(a => ({...a, type: 'section'}))\n  } as MenuNavigationItemTypeGroup : undefined\n\n\n  const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n    switch (item.type) {\n      case 'profile':\n        return <ProfileButton key={index}\n                              onClick={e => {\n                                e?.nativeEvent.stopImmediatePropagation();\n                                item.action ? item.action(e?.target) && onClose() : onSubMenuOpen && onSubMenuOpen(buildProfileSubMenu())\n                              }}\n                              icon={!profile && <SystemIcons.User/>}\n                              initials={(profile?.user?.firstName?.charAt(0) ?? '') + (profile?.user?.lastName?.charAt(0) ?? '')}/>\n      case 'submenu':\n        return <IconButton key={index}\n                           disabled={item.disabled}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           action={e => {\n                             e?.nativeEvent.stopImmediatePropagation();\n                             onSubMenuOpen && onSubMenuOpen(item.menu)\n                           }}>\n          {item.icon}\n        </IconButton>\n      case 'action':\n        return <IconButton key={index}\n                           disabled={item.disabled}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           action={e => {\n                             e?.nativeEvent.stopImmediatePropagation();\n                             item.action && item.action(e?.target) && onClose();\n                           }}>\n          {item.icon}\n        </IconButton>\n    }\n  }\n\n  return (\n    <MobileMenuHeaderWrapper>\n      {\n        onGoBack &&\n        <IconButton action={e => {\n          e?.nativeEvent.stopImmediatePropagation();\n          onGoBack();\n        }}\n                    variant={'secondary'}\n                    shape={'circular'}>\n          <SystemIcons.ArrowLineLeft/>\n        </IconButton>\n      }\n      {\n        buttons?.filter(a => a.placement === 'left').map(renderItem)\n      }\n      {\n        label &&\n        <MobileMenuHeaderLabel>{label}</MobileMenuHeaderLabel>\n      }\n      <MobileMenuHeaderActions>\n        {\n          buttons?.filter(a => a.placement !== 'left').map(renderItem)\n        }\n\n        {\n          onClose &&\n          <div style={{marginLeft: '8px'}}>\n            <IconButton variant={'secondary'}\n                        action={e => {\n                          e?.nativeEvent.stopImmediatePropagation();\n                          onClose();\n                        }}\n                        shape={'circular'}>\n              <SystemIcons.Close/>\n            </IconButton>\n          </div>\n        }\n      </MobileMenuHeaderActions>\n\n    </MobileMenuHeaderWrapper>\n  )\n};\n\n\nexport default MobileMenuHeader;\n"],"file":"MobileMenuHeader.js"}
+{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuHeader.tsx"],"names":["React","styled","Breakpoints","IconButton","SystemIcons","BREAKPOINTS","COLORS","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ProfileButton","MobileMenuHeaderActions","div","MobileMenuHeaderLabel","Bold","neutral_600","SMALL","MobileMenuHeaderWrapper","MEDIUM","MobileMenuHeader","onGoBack","onClose","label","profile","buttons","onSubMenuOpen","buildProfileSubMenu","type","header","user","firstName","lastName","note","email","link","action","signOut","icon","disabled","items","sections","map","a","undefined","renderItem","item","index","e","nativeEvent","stopImmediatePropagation","target","charAt","menu","filter","placement","marginLeft"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n  MobileMenuButtonTypes,\n  MenuNavigationItemTypeGroup,\n  ProfileMenu, MenuNavigationCustomSubMenu\n} from '../types';\nimport styled from 'styled-components';\nimport Breakpoints from '../../styles/breakpoints';\nimport {IconButton} from '../../Button';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\nimport {ProfileButton} from '../../ProfileButton';\n\nexport const MobileMenuHeaderActions = styled.div`\n  flex: 1;\n  justify-content: flex-end;\n  display: flex;\n  flex-direction: row;\n`;\nconst MobileMenuHeaderLabel = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\n\nexport const MobileMenuHeaderWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0 4px;\n\n  ${Breakpoints.SMALL} {\n    padding: 4px 8px;\n  }\n\n  ${Breakpoints.MEDIUM} {\n    display: none;\n  }\n`\n\ninterface MobileMenuHeaderProps {\n  onGoBack?: () => void;\n  onClose: () => void;\n  label?: string;\n\n  profile?: ProfileMenu\n  buttons?: MobileMenuButtonTypes[];\n\n  onSubMenuOpen?: (item?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => void;\n}\n\n\nconst MobileMenuHeader: React.FunctionComponent<MobileMenuHeaderProps> = ({\n                                                                            onGoBack,\n                                                                            onClose,\n                                                                            label,\n                                                                            profile,\n                                                                            buttons,\n                                                                            onSubMenuOpen\n                                                                          }) => {\n\n  const buildProfileSubMenu = () => !!profile ? {\n    type: 'group',\n    label: profile.label,\n    header: {\n      header: profile.user.firstName + ' ' + profile.user.lastName,\n      note: profile.user.email,\n      link: profile.user.link\n    },\n    action: {\n      label: profile.signOut?.label,\n      action: profile.signOut?.action,\n      icon: profile.signOut?.icon,\n      disabled: profile.signOut?.disabled\n    },\n    items: profile.sections.map(a => ({...a, type: 'section'}))\n  } as MenuNavigationItemTypeGroup : undefined\n\n  const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n    switch (item.type) {\n      case 'profile':\n        return <ProfileButton key={index}\n                              onClick={e => {\n                                e?.nativeEvent.stopImmediatePropagation();\n                                item.action ? item.action(e?.target) && onClose() : onSubMenuOpen && onSubMenuOpen(buildProfileSubMenu())\n                              }}\n                              icon={!profile && <SystemIcons.User/>}\n                              initials={(profile?.user?.firstName?.charAt(0) ?? '') + (profile?.user?.lastName?.charAt(0) ?? '')}/>\n      case 'submenu':\n        return <IconButton key={index}\n                           disabled={item.disabled}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           action={e => {\n                             e?.nativeEvent.stopImmediatePropagation();\n                             onSubMenuOpen && onSubMenuOpen(item.menu)\n                           }}>\n          {item.icon}\n        </IconButton>\n      case 'action':\n        return <IconButton key={index}\n                           disabled={item.disabled}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           action={e => {\n                             e?.nativeEvent.stopImmediatePropagation();\n                             item.action && item.action(e?.target) && onClose();\n                           }}>\n          {item.icon}\n        </IconButton>\n    }\n  }\n\n  return (\n    <MobileMenuHeaderWrapper>\n      {\n        onGoBack &&\n        <IconButton action={e => {\n          e?.nativeEvent.stopImmediatePropagation();\n          onGoBack();\n        }}\n                    variant={'secondary'}\n                    shape={'circular'}>\n          <SystemIcons.ArrowLineLeft/>\n        </IconButton>\n      }\n      {\n        buttons?.filter(a => a.placement === 'left').map(renderItem)\n      }\n      {\n        label &&\n        <MobileMenuHeaderLabel>{label}</MobileMenuHeaderLabel>\n      }\n      <MobileMenuHeaderActions>\n        {\n          buttons?.filter(a => a.placement !== 'left').map(renderItem)\n        }\n\n        {\n          onClose &&\n          <div style={{marginLeft: '8px'}}>\n            <IconButton variant={'secondary'}\n                        action={e => {\n                          e?.nativeEvent.stopImmediatePropagation();\n                          onClose();\n                        }}\n                        shape={'circular'}>\n              <SystemIcons.Close/>\n            </IconButton>\n          </div>\n        }\n      </MobileMenuHeaderActions>\n\n    </MobileMenuHeaderWrapper>\n  )\n};\n\n\nexport default MobileMenuHeader;\n"],"file":"MobileMenuHeader.js"}

package/dist/Popover/Popover.cjs

@@ -169,9 +169,9 @@ var Popover = function Popover(_ref) {
       }
     };
 
-    document.addEventListener("mousedown", checkIfClickedOutside);
+    document.addEventListener('mousedown', checkIfClickedOutside);
     return function () {
-      document.removeEventListener("mousedown", checkIfClickedOutside);
+      document.removeEventListener('mousedown', checkIfClickedOutside);
     };
   }, [showPopover]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {

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';\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"}
+{"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) =>\n    props.size === Size.Small\n      ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)\n      : props.size === Size.Large\n      ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)\n      : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst LabelContainer = styled.div<{ size: Size }>`\n  ${(props) =>\n    props.size === Size.Small\n      ? ComponentSStyling(ComponentTextStyle.Bold, null)\n      : props.size === Size.Large\n      ? ComponentLStyling(ComponentTextStyle.Bold, null)\n      : 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) =>\n    props.showOnClick\n      ? `${Container} {\n        visibility: ${props.showPopover ? 'visible' : 'hidden'};\n        opacity: ${props.showPopover ? '1' : '0'};\n    }\n    cursor: pointer;`\n      : `&:hover {\n      ${Container} {\n        visibility: visible;\n        opacity: 1;\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  } 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  size = Size.Medium,\n  topSectionProps,\n  bottomSectionProps,\n  mainContent,\n  children,\n  position,\n  showOnClick = false,\n  showArrowPointer = false,\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 && <NoteContainer size={size}>{topSectionProps.note}</NoteContainer>}\n              <LabelContainer size={size}>{topSectionProps?.text}</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}>{mainContent}</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                <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    </Wrapper>\n  );\n};\n\nexport default Popover;\n"],"file":"Popover.cjs"}

package/dist/Popover/Popover.js

@@ -134,9 +134,9 @@ var Popover = function Popover(_ref) {
       }
     };
 
-    document.addEventListener("mousedown", checkIfClickedOutside);
+    document.addEventListener('mousedown', checkIfClickedOutside);
     return function () {
-      document.removeEventListener("mousedown", checkIfClickedOutside);
+      document.removeEventListener('mousedown', checkIfClickedOutside);
     };
   }, [showPopover]);
   return /*#__PURE__*/_jsxs(Wrapper, {

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';\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"}
+{"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,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACK,KAApB,GAA4B,OAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACM,KAApB,GAA4B,OAA5B,GAAsC,OAAxF;AAAA,CADC,EAEA,UAACH,KAAD;AAAA,SAAYA,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACK,KAApB,GAA4B,OAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACM,KAApB,GAA4B,OAA5B,GAAsC,OAAxF;AAAA,CAFA,EAICpB,MAAM,CAACqB,KAJR,EAMCf,UAAU,CAACgB,kBANZ,EAWFV,SAAS,CAACW,OAXR,EAaX,UAACN,KAAD;AAAA,SAAYA,KAAK,CAACO,QAAN,IAAkBX,QAAQ,CAACY,MAA3B,GAAoC,iEAApC,GAAwG,EAApH;AAAA,CAbW,EAcX,UAACR,KAAD;AAAA,SAAYA,KAAK,CAACO,QAAN,IAAkBX,QAAQ,CAACa,GAA3B,GAAiC,oEAAjC,GAAwG,EAApH;AAAA,CAdW,EAgBX,UAACT,KAAD;AAAA,SAAYA,KAAK,CAACO,QAAN,IAAkBX,QAAQ,CAACc,IAA3B,GAAkC,oEAAlC,GAAyG,EAArH;AAAA,CAhBW,EAiBX,UAACV,KAAD;AAAA,SAAYA,KAAK,CAACO,QAAN,IAAkBX,QAAQ,CAACe,KAA3B,GAAmC,mEAAnC,GAAyG,EAArH;AAAA,CAjBW,EAoBT,UAACX,KAAD;AAAA,SAAYA,KAAK,CAACY,gBAAN,GAAyBC,iBAAiB,CAACb,KAAK,CAACO,QAAP,CAA1C,GAA6D,EAAzE;AAAA,CApBS,CAAf;AAuBA,IAAMO,YAAY,GAAGhC,MAAM,CAACiB,GAAV,iIACN,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACK,KAApB,GAA4B,MAA5B,GAAqCF,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CADM,EAEH,UAACH,KAAD;AAAA,SAAYA,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACK,KAApB,GAA4B,OAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACM,KAApB,GAA4B,OAA5B,GAAsC,OAAxF;AAAA,CAFG,CAAlB;AAMA,IAAMY,kBAAkB,GAAGjC,MAAM,CAACiB,GAAV,yFAAxB;AAIA,IAAMiB,eAAe,GAAGlC,MAAM,CAACiB,GAAV,8JACT,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACK,KAApB,GAA4B,OAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACM,KAApB,GAA4B,OAA5B,GAAsC,OAAxF;AAAA,CADS,EAEN,UAACH,KAAD;AAAA,SAAYA,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACK,KAApB,GAA4B,OAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACM,KAApB,GAA4B,OAA5B,GAAsC,OAAxF;AAAA,CAFM,EAGR,UAACH,KAAD;AAAA,SAAYA,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACK,KAApB,GAA4B,OAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACM,KAApB,GAA4B,QAA5B,GAAuC,QAAzF;AAAA,CAHQ,EAKjBT,gBAAgB,CAACG,IAAI,CAACK,KAAN,CALC,CAArB;AAQA,IAAMe,eAAe,GAAGnC,MAAM,CAACiB,GAAV,wKACT,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACK,KAApB,GAA4B,MAA5B,GAAqCF,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CADS,EAEN,UAACH,KAAD;AAAA,SAAYA,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACK,KAApB,GAA4B,OAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACM,KAApB,GAA4B,OAA5B,GAAsC,OAAxF;AAAA,CAFM,CAArB;AAUA,IAAMe,aAAa,GAAGpC,MAAM,CAACiB,GAAV,yJAGP,UAACC,KAAD;AAAA,SAAWmB,aAAa,CAACnB,KAAK,CAACoB,IAAP,EAAapB,KAAK,CAACC,IAAnB,CAAxB;AAAA,CAHO,CAAnB;AAOA,IAAMoB,aAAa,GAAGvC,MAAM,CAACiB,GAAV,kFACf,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACK,KAApB,GACIT,mBAAmB,CAACT,kBAAkB,CAACsC,OAApB,EAA6BvC,MAAM,CAACwC,WAApC,CADvB,GAEIvB,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACM,KAApB,GACAX,iBAAiB,CAACR,kBAAkB,CAACsC,OAApB,EAA6BvC,MAAM,CAACwC,WAApC,CADjB,GAEAtC,kBAAkB,CAACD,kBAAkB,CAACsC,OAApB,EAA6BvC,MAAM,CAACwC,WAApC,CALtB;AAAA,CADe,CAAnB;AASA,IAAMC,cAAc,GAAG1C,MAAM,CAACiB,GAAV,kFAChB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACK,KAApB,GACIV,iBAAiB,CAACR,kBAAkB,CAACyC,IAApB,EAA0B,IAA1B,CADrB,GAEIzB,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACM,KAApB,GACAb,iBAAiB,CAACN,kBAAkB,CAACyC,IAApB,EAA0B,IAA1B,CADjB,GAEAlC,iBAAiB,CAACP,kBAAkB,CAACyC,IAApB,EAA0B,IAA1B,CALrB;AAAA,CADgB,CAApB;AASA,IAAMC,oBAAoB,GAAG5C,MAAM,CAACiB,GAAV,2FACd,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACK,KAApB,GAA4B,gBAA5B,GAA+CF,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACM,KAApB,GAA4B,kBAA5B,GAAiD,gBAA5G;AAAA,CADc,CAA1B;AAIA,IAAMwB,mBAAmB,GAAG7C,MAAM,CAACiB,GAAV,6FACb,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACK,KAApB,GAA4B,gBAA5B,GAA+CF,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACM,KAApB,GAA4B,kBAA5B,GAAiD,kBAA5G;AAAA,CADa,CAAzB;AAIA,IAAMyB,mBAAmB,GAAG9C,MAAM,CAACiB,GAAV,+GACb,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACK,KAApB,GAA4B,gBAA5B,GAA+CF,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACM,KAApB,GAA4B,kBAA5B,GAAiD,kBAA5G;AAAA,CADa,CAAzB;AAKA,IAAM0B,OAAO,GAAG/C,MAAM,CAACiB,GAAV,sPAIC,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACO,QAAN,KAAmBX,QAAQ,CAACa,GAA5B,IAAmCT,KAAK,CAACO,QAAN,KAAmBX,QAAQ,CAACY,MAA/D,GAAwE,MAAxE,GAAiF,MAA7F;AAAA,CAJD,EAKA,UAACR,KAAD;AAAA,SAAYA,KAAK,CAACO,QAAN,KAAmBX,QAAQ,CAACc,IAA5B,IAAoCV,KAAK,CAACO,QAAN,KAAmBX,QAAQ,CAACe,KAAhE,GAAwE,MAAxE,GAAiF,MAA7F;AAAA,CALA,EAQP,UAACX,KAAD;AAAA,SAAYA,KAAK,CAACO,QAAN,KAAmBX,QAAQ,CAACc,IAA5B,GAAmC,wBAAnC,GAA8D,EAA1E;AAAA,CARO,EASP,UAACV,KAAD;AAAA,SAAYA,KAAK,CAACO,QAAN,KAAmBX,QAAQ,CAACe,KAA5B,GAAoC,uBAApC,GAA8D,EAA1E;AAAA,CATO,EAWP,UAACX,KAAD;AAAA,SAAYA,KAAK,CAACO,QAAN,KAAmBX,QAAQ,CAACa,GAA5B,GAAkC,cAAlC,GAAmD,EAA/D;AAAA,CAXO,EAYP,UAACT,KAAD;AAAA,SAAYA,KAAK,CAACO,QAAN,KAAmBX,QAAQ,CAACY,MAA5B,GAAqC,WAArC,GAAmD,EAA/D;AAAA,CAZO,EAeT,UAACR,KAAD;AAAA,SACAA,KAAK,CAAC8B,WAAN,aACOhC,SADP,qCAEkBE,KAAK,CAAC+B,WAAN,GAAoB,SAApB,GAAgC,QAFlD,iCAGe/B,KAAK,CAAC+B,WAAN,GAAoB,GAApB,GAA0B,GAHzC,iEAOIjC,SAPJ,0EADA;AAAA,CAfS,CAAb;;AA8BA,IAAMqB,aAAa,GAAG,SAAhBA,aAAgB,CAACa,aAAD,EAAyB/B,IAAzB,EAAgD;AACpE,MAAI+B,aAAJ,EAAmB;AACjB,WAAO/B,IAAI,KAAKJ,IAAI,CAACK,KAAd,GAAsB,WAAtB,GAAoCD,IAAI,KAAKJ,IAAI,CAACM,KAAd,GAAsB,WAAtB,GAAoC,WAA/E;AACD,GAFD,MAEO;AACL,WAAOF,IAAI,KAAKJ,IAAI,CAACK,KAAd,GAAsB,WAAtB,GAAoCD,IAAI,KAAKJ,IAAI,CAACM,KAAd,GAAsB,MAAtB,GAA+B,MAA1E;AACD;AACF,CAND;;AAQA,IAAMU,iBAAiB,GAAG,SAApBA,iBAAoB,CAACN,QAAD,EAAwB;AAChD,MAAIA,QAAQ,KAAKX,QAAQ,CAACY,MAA1B,EAAkC;AAChC;AAUD;;AAED,MAAID,QAAQ,KAAKX,QAAQ,CAACa,GAA1B,EAA+B;AAC7B;AAUD;;AAED,MAAIF,QAAQ,KAAKX,QAAQ,CAACc,IAA1B,EAAgC;AAC9B;AAUD;;AAED,MAAIH,QAAQ,KAAKX,QAAQ,CAACe,KAA1B,EAAiC;AAC/B;AAUD;AACF,CApDD;;AAiFA,IAAMsB,OAA8C,GAAG,SAAjDA,OAAiD,OASjD;AAAA;;AAAA,uBARJhC,IAQI;AAAA,MARJA,IAQI,0BARGJ,IAAI,CAACqC,MAQR;AAAA,MAPJC,eAOI,QAPJA,eAOI;AAAA,MANJC,kBAMI,QANJA,kBAMI;AAAA,MALJC,WAKI,QALJA,WAKI;AAAA,MAJJC,QAII,QAJJA,QAII;AAAA,MAHJ/B,QAGI,QAHJA,QAGI;AAAA,8BAFJuB,WAEI;AAAA,MAFJA,WAEI,iCAFU,KAEV;AAAA,mCADJlB,gBACI;AAAA,MADJA,gBACI,sCADe,KACf;;AACJ,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,YAAM;AACpB,QAAMC,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACC,CAAD,EAAwB;AACpD,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,EAYG,CAACb,WAAD,CAZH;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,kBAAyB,KAAC,aAAD;AAAe,YAAA,IAAI,EAAEnB,IAArB;AAAA,sBAA4BkC,eAAe,CAACf;AAA5C,YAD5B,eAEE,KAAC,cAAD;AAAgB,YAAA,IAAI,EAAEnB,IAAtB;AAAA,sBAA6BkC,eAA7B,aAA6BA,eAA7B,uBAA6BA,eAAe,CAAEiB;AAA9C,YAFF;AAAA,UADF,EAMGtB,WAAW,iBACV,KAAC,oBAAD;AAAsB,UAAA,IAAI,EAAE7B,IAA5B;AAAkC,yBAAa,UAA/C;AAAA,iCACE,KAAC,UAAD;AAAY,YAAA,MAAM,EAAE;AAAA,qBAAMuC,cAAc,CAAC,KAAD,CAApB;AAAA,aAApB;AAAiD,YAAA,wBAAwB,MAAzE;AAA0E,YAAA,SAAS,EAAEzD,MAAM,CAACwC,WAA5F;AAAyG,YAAA,OAAO,EAAC,WAAjH;AAA6H,YAAA,KAAK,EAAC,UAAnI;AAAA,mCACE,KAAC,WAAD,CAAa,KAAb;AADF;AADF,UAPJ;AAAA,QAFJ,eAkBE,KAAC,kBAAD;AAAoB,QAAA,IAAI,EAAEtB,IAA1B;AAAA,+BACE,KAAC,eAAD;AAAiB,UAAA,IAAI,EAAEA,IAAvB;AAAA,oBAA8BoC;AAA9B;AADF,QAlBF,EAsBG,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,gCACpC,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,cADoC;AAAA,WAArC;AADH,UAXF;AAAA,QAvBJ;AAAA,MADF,eA8CE;AAAK,MAAA,OAAO,EAAE;AAAA,eAAMxB,WAAW,IAAIU,cAAc,CAAC,CAACT,WAAF,CAAnC;AAAA,OAAd;AAAA,iBACGO,QADH,eAGE;AAAK,QAAA,SAAS,EAAC;AAAf,QAHF;AAAA,MA9CF;AAAA,IADF;AAsDD,CAjFD;;;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;;AAsFF,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) =>\n    props.size === Size.Small\n      ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)\n      : props.size === Size.Large\n      ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)\n      : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst LabelContainer = styled.div<{ size: Size }>`\n  ${(props) =>\n    props.size === Size.Small\n      ? ComponentSStyling(ComponentTextStyle.Bold, null)\n      : props.size === Size.Large\n      ? ComponentLStyling(ComponentTextStyle.Bold, null)\n      : 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) =>\n    props.showOnClick\n      ? `${Container} {\n        visibility: ${props.showPopover ? 'visible' : 'hidden'};\n        opacity: ${props.showPopover ? '1' : '0'};\n    }\n    cursor: pointer;`\n      : `&:hover {\n      ${Container} {\n        visibility: visible;\n        opacity: 1;\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  } 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  size = Size.Medium,\n  topSectionProps,\n  bottomSectionProps,\n  mainContent,\n  children,\n  position,\n  showOnClick = false,\n  showArrowPointer = false,\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 && <NoteContainer size={size}>{topSectionProps.note}</NoteContainer>}\n              <LabelContainer size={size}>{topSectionProps?.text}</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}>{mainContent}</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                <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    </Wrapper>\n  );\n};\n\nexport default Popover;\n"],"file":"Popover.js"}