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

package/dist/Popover/Popover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_","_Button","_icons","_styles","_types","_jsxRuntime","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","PopoverContainer","exports","styled","div","_taggedTemplateLiteral2","props","$size","Size","Small","Large","COLORS","getColor","theme","BOXSHADOWS","BOXSHADOW_CENTERED","Z_INDEXES","popover","$position","Position","Bottom","Top","Left","Right","$showArrowPointer","renderArrowStyles","PopoverTopSectionContainer","PopoverMiddleSectionContainer","scrollBarStyling","PopoverBottomSectionContainer","TextContainer","renderMargins","$note","NoteContainer","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentSStyling","ComponentXSStyling","LabelContainer","Bold","ComponentLStyling","ComponentMStyling","CloseButtonContainer","TextButtonContainer","IconButtonContainer","PopoverWrapper","$showOnClick","concat","$showPopover","isNotePresent","size","position","Popover","_ref","_bottomSectionProps$t","_bottomSectionProps$i","Medium","topSectionProps","bottomSectionProps","mainContent","children","showOnClick","showArrowPointer","showPopover","setShowPopover","useState","useTheme","popoverRef","useRef","useEffect","checkIfClickedOutside","current","contains","target","document","addEventListener","removeEventListener","jsxs","ref","note","jsx","text","IconButton","action","useTransparentBackground","iconColor","variant","shape","SystemIcons","Close","textButton","icon","Button","onClick","label","className","iconButtons","map","iconButton","propTypes","_propTypes","string","isRequired","arrayOf","node","func","bool","_default"],"sources":["../../src/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\r\nimport { Button, IconButton } from '../Button';\r\nimport { SystemIcons } from '../icons';\r\nimport { BOXSHADOWS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling, scrollBarStyling, Z_INDEXES } from '../styles';\r\nimport { Position, Size } from '../types';\r\n\r\nexport const PopoverContainer = styled.div<{ $size: Size; $position: Position; $showArrowPointer: boolean }>`\r\n  //height: ${(props) => (props.$size === Size.Small ? '240px' : props.$size === Size.Large ? '480px' : '360px')};\r\n  min-width: ${(props) => (props.$size === Size.Small ? '320px' : props.$size === Size.Large ? '640px' : '480px')};\r\n  border-radius: 4px;\r\n  background: ${props => COLORS.getColor('white', props.theme)};\r\n  cursor: default;\r\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\r\n\r\n  position: absolute;  \r\n  visibility: hidden;\r\n  opacity: 0;\r\n  z-index: ${Z_INDEXES.popover};\r\n\r\n  ${(props) => (props.$position == Position.Bottom ? 'right: 50%; top: calc(100% + 16px); transform: translateX(50%);' : '')}\r\n  ${(props) => (props.$position == Position.Top ? 'right: 50%; bottom: calc(100% + 16px); transform: translateX(50%);' : '')}\r\n\r\n  ${(props) => (props.$position == Position.Left ? 'bottom: 50%; right: calc(100% + 16px); transform: translateY(50%);' : '')}\r\n  ${(props) => (props.$position == Position.Right ? 'bottom: 50%; left: calc(100% + 16px); transform: translateY(50%);' : '')}\r\n\r\n  &::after {\r\n    ${(props) => (props.$showArrowPointer ? renderArrowStyles(props.$position) : '')}\r\n`;\r\n\r\nexport const PopoverTopSectionContainer = styled.div<{ $size: Size }>`\r\n  height: ${(props) => (props.$size === Size.Small ? '56px' : props.$size === Size.Large ? '72px' : '64px')};\r\n  display: flex;\r\n`;\r\n\r\nexport const PopoverMiddleSectionContainer = styled.div<{ $size: Size }>`\r\n  margin: 8px;\r\n  height: ${(props) => (props.$size === Size.Small ? '104px' : props.$size === Size.Large ? '304px' : '208px')};\r\n  padding: ${(props) => (props.$size === Size.Small ? '0 8px' : props.$size === Size.Large ? '0 16px' : '0 12px')};\r\n  overflow-y: auto;\r\n  ${scrollBarStyling(Size.Small)}\r\n`;\r\n\r\nexport const PopoverBottomSectionContainer = styled.div<{ $size: Size }>`\r\n  height: ${(props) => (props.$size === Size.Small ? '64px' : props.$size === Size.Large ? '88px' : '72px')};  \r\n  display: flex;\r\n\r\n  .bottom-flex {\r\n    flex: 1;\r\n  }\r\n`;\r\n\r\nconst TextContainer = styled.div<{ $note: boolean; $size: Size }>`\r\n  display: flex;\r\n  flex-direction: column;\r\n  margin: ${(props) => renderMargins(props.$note, props.$size)};\r\n  flex-grow: 1;\r\n`;\r\n\r\nconst NoteContainer = styled.div<{ $size: Size }>`\r\n  ${(props) =>\r\n    props.$size === Size.Small\r\n      ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))\r\n      : props.$size === Size.Large\r\n      ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))\r\n      : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n`;\r\n\r\nconst LabelContainer = styled.div<{ $size: Size }>`\r\n  ${(props) =>\r\n    props.$size === Size.Small\r\n      ? ComponentSStyling(ComponentTextStyle.Bold, null)\r\n      : props.$size === Size.Large\r\n      ? ComponentLStyling(ComponentTextStyle.Bold, null)\r\n      : ComponentMStyling(ComponentTextStyle.Bold, null)}\r\n`;\r\n\r\nconst CloseButtonContainer = styled.div<{ $size: Size }>`\r\n  margin: ${(props) => (props.$size === Size.Small ? '4px 16px 4px 0' : props.$size === Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0')};\r\n`;\r\n\r\nconst TextButtonContainer = styled.div<{ $size: Size }>`\r\n  margin: ${(props) => (props.$size === Size.Small ? '8px 0 8px 16px' : props.$size === Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px')};\r\n`;\r\n\r\nconst IconButtonContainer = styled.div<{ $size: Size }>`\r\n  margin: ${(props) => (props.$size === Size.Small ? '8px 16px 8px 0' : props.$size === Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0')};\r\n  display: flex;\r\n`;\r\n\r\nexport const PopoverWrapper = styled.div<{ $position: Position; $showOnClick: boolean; $showPopover: boolean }>`\r\n  position: relative;\r\n\r\n  .pointer-space {\r\n    height: ${(props) => (props.$position === Position.Top || props.$position === Position.Bottom ? '16px' : '100%')};\r\n    width: ${(props) => (props.$position === Position.Left || props.$position === Position.Right ? '16px' : '100%')};\r\n    position: absolute;\r\n\r\n    ${(props) => (props.$position === Position.Left ? 'right:100%; bottom: 0%' : '')};\r\n    ${(props) => (props.$position === Position.Right ? 'left:100%; bottom: 0%' : '')};\r\n\r\n    ${(props) => (props.$position === Position.Top ? 'bottom: 100%' : '')};\r\n    ${(props) => (props.$position === Position.Bottom ? 'top: 100%' : '')};\r\n  }\r\n\r\n  ${(props) =>\r\n    props.$showOnClick\r\n      ? `${PopoverContainer} {\r\n        visibility: ${props.$showPopover ? 'visible' : 'hidden'};\r\n        opacity: ${props.$showPopover ? '1' : '0'};\r\n    }\r\n    cursor: pointer;`\r\n      : `&:hover {\r\n      ${PopoverContainer} {\r\n        visibility: visible;\r\n        opacity: 1;\r\n      }\r\n    }`}\r\n`;\r\n\r\nconst renderMargins = (isNotePresent: boolean, size: Size): string => {\r\n  if (isNotePresent) {\r\n    return size === Size.Small ? '10px 16px' : size === Size.Large ? '14px 24px' : '12px 20px';\r\n  } else {\r\n    return size === Size.Small ? '18px 16px' : size === Size.Large ? '24px' : '20px';\r\n  }\r\n};\r\n\r\nconst renderArrowStyles = (position: Position) => {\r\n  if (position === Position.Bottom) {\r\n    return `height: 0px;\r\n            width: 0px;\r\n            border-top: 16px solid transparent;\r\n            border-right: 12px solid transparent;\r\n            border-bottom: 16px solid rgb(255,255,255);\r\n            border-left: 12px solid transparent;\r\n            content: \"\";\r\n            position: absolute;\r\n            right: calc(50% - 12px);\r\n            bottom: calc(100% - 1px);`;\r\n  }\r\n\r\n  if (position === Position.Top) {\r\n    return `height: 0px;\r\n            width: 0px;\r\n            border-top: 16px solid rgb(255,255,255);\r\n            border-right: 12px solid transparent;\r\n            border-bottom: 16px solid transparent;\r\n            border-left: 12px solid transparent;\r\n            content: \"\";\r\n            position: absolute;\r\n            right: calc(50% - 12px);\r\n            top: calc(100% - 1px);`;\r\n  }\r\n\r\n  if (position === Position.Left) {\r\n    return `height: 0px;\r\n            width: 0px;\r\n            border-top: 12px solid transparent;\r\n            border-right: 16px solid transparent;\r\n            border-bottom: 12px solid transparent;\r\n            border-left: 16px solid rgb(255,255,255);\r\n            content: \"\";\r\n            position: absolute;\r\n            left: calc(100% - 1px);\r\n            bottom: calc(50% - 12px);`;\r\n  }\r\n\r\n  if (position === Position.Right) {\r\n    return `height: 0px;\r\n            width: 0px;\r\n            border-top: 12px solid transparent;\r\n            border-right: 16px solid rgb(255,255,255);\r\n            border-bottom: 12px solid transparent;\r\n            border-left: 16px solid transparent;\r\n            content: \"\";\r\n            position: absolute;\r\n            right: calc(100% - 1px);\r\n            bottom: calc(50% - 12px);`;\r\n  }\r\n};\r\n\r\nexport interface PopoverTopSectionProps {\r\n  /**\r\n   * Required. The main text to be displayed in the top section of the popover.\r\n   */\r\n  text: string;\r\n\r\n  /**\r\n   * Optional. A note to be displayed below the main text in the top section of the popover.\r\n   */\r\n  note?: string;\r\n};\r\n\r\nexport interface PopoverActionButtonProps {\r\n  /**\r\n   * Required. The icon to be displayed on the button.\r\n   */\r\n  icon: React.ReactNode;\r\n\r\n  /**\r\n   * Required. The handler function to be called when the button is clicked.\r\n   */\r\n  action: () => void;\r\n\r\n  /**\r\n   * Optional. The label for the button. If provided, the button will display this text.\r\n   */\r\n  label?: string;\r\n};\r\n\r\nexport interface PopoverBottomSectionProps {\r\n  /**\r\n   * Optional. An array of PopoverActionButtonProps objects.\r\n   * Each object represents an icon button to be displayed in the bottom section of the popover.\r\n   */\r\n  iconButtons?: PopoverActionButtonProps[];\r\n\r\n  /**\r\n   * Optional. A PopoverActionButtonProps object representing a text button to be displayed in the bottom section of the popover.\r\n   */\r\n  textButton?: PopoverActionButtonProps;\r\n};\r\n\r\nexport interface PopoverProps {\r\n  /**\r\n   * Optional. The size of the popover. It can be 'Small', 'Medium', or 'Large'.\r\n   * Defaults to 'Medium' if not specified.\r\n   */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n\r\n  /**\r\n   * Optional. Properties for the top section of the popover.\r\n   */\r\n  topSectionProps?: PopoverTopSectionProps;\r\n\r\n  /**\r\n   * Optional. Properties for the bottom section of the popover.\r\n   */\r\n  bottomSectionProps?: PopoverBottomSectionProps;\r\n\r\n  /**\r\n   * Required. The main content to be displayed in the popover.\r\n   */\r\n  mainContent: React.ReactNode;\r\n\r\n  /**\r\n   * Required. The children to be rendered inside the popover.\r\n   */\r\n  children: React.ReactNode;\r\n\r\n  /**\r\n   * Required. The position of the popover relative to the target element.\r\n   * It can be 'Top', 'Bottom', 'Right', or 'Left'.\r\n   */\r\n  position: Position.Top | Position.Bottom | Position.Right | Position.Left;\r\n\r\n  /**\r\n   * Required. A boolean indicating whether the popover should be shown when the target element is clicked. Defaults to 'false', meaning that popover will be shown on mouse hover.\r\n   */\r\n  showOnClick: boolean;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether an arrow pointer should be shown on the popover.\r\n   * Defaults to 'false' if not specified.\r\n   */\r\n  showArrowPointer?: boolean;\r\n};\r\n\r\nconst Popover: React.FunctionComponent<PopoverProps> = ({\r\n  size = Size.Medium,\r\n  topSectionProps,\r\n  bottomSectionProps,\r\n  mainContent,\r\n  children,\r\n  position,\r\n  showOnClick = false,\r\n  showArrowPointer = false,\r\n}) => {\r\n  const [showPopover, setShowPopover] = React.useState(false);\r\n  const theme = useTheme();\r\n  const popoverRef = React.useRef<any>();\r\n\r\n  React.useEffect(() => {\r\n    const checkIfClickedOutside = (e: { target: any }) => {\r\n      if (showPopover && popoverRef.current && !popoverRef.current.contains(e.target)) {\r\n        setShowPopover(false);\r\n      }\r\n    };\r\n\r\n    document.addEventListener('mousedown', checkIfClickedOutside);\r\n\r\n    return () => {\r\n      document.removeEventListener('mousedown', checkIfClickedOutside);\r\n    };\r\n  }, [showPopover]);\r\n\r\n  return (\r\n    <PopoverWrapper $position={position} $showOnClick={showOnClick} $showPopover={showPopover}>\r\n      <PopoverContainer $size={size} $position={position} ref={popoverRef} $showArrowPointer={showArrowPointer}>\r\n        {!!topSectionProps && (\r\n          <PopoverTopSectionContainer $size={size}>\r\n            <TextContainer $note={!!topSectionProps?.note} $size={size}>\r\n              {topSectionProps?.note && <NoteContainer $size={size}>{topSectionProps.note}</NoteContainer>}\r\n              <LabelContainer $size={size}>{topSectionProps?.text}</LabelContainer>\r\n            </TextContainer>\r\n\r\n            {showOnClick && (\r\n              <CloseButtonContainer $size={size} data-testid={'closeBtn'}>\r\n                <IconButton action={() => setShowPopover(false)} useTransparentBackground iconColor={COLORS.getColor('neutral_600', theme)} variant=\"secondary\" shape=\"circular\">\r\n                  <SystemIcons.Close />\r\n                </IconButton>\r\n              </CloseButtonContainer>\r\n            )}\r\n          </PopoverTopSectionContainer>\r\n        )}\r\n\r\n        <PopoverMiddleSectionContainer $size={size}>{mainContent}</PopoverMiddleSectionContainer>\r\n\r\n        {!!bottomSectionProps && (\r\n          <PopoverBottomSectionContainer $size={size}>\r\n            {!!bottomSectionProps?.textButton?.icon && (\r\n              <TextButtonContainer $size={size} data-testid={'textBtn'}>\r\n                <Button size={size} variant=\"secondary\" icon={bottomSectionProps.textButton.icon} onClick={bottomSectionProps.textButton.action}>\r\n                  {bottomSectionProps.textButton.label}\r\n                </Button>\r\n              </TextButtonContainer>\r\n            )}\r\n\r\n            <div className=\"bottom-flex\" />\r\n\r\n            <IconButtonContainer $size={size} data-testid={'iconBtn'}>\r\n              {bottomSectionProps?.iconButtons?.map((iconButton) => (\r\n                <IconButton action={iconButton.action} variant=\"secondary\" shape=\"circular\" useTransparentBackground>\r\n                  {iconButton.icon}\r\n                </IconButton>\r\n              ))}\r\n            </IconButtonContainer>\r\n          </PopoverBottomSectionContainer>\r\n        )}\r\n      </PopoverContainer>\r\n\r\n      <div onClick={() => showOnClick && setShowPopover(!showPopover)}>\r\n        {children}\r\n\r\n        <div className=\"pointer-space\" />\r\n      </div>\r\n    </PopoverWrapper>\r\n  );\r\n};\r\n\r\nexport default Popover;\r\n"],"mappings":";;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAF,uBAAA,CAAAC,OAAA;AACA,IAAAE,CAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AAA0C,IAAAO,WAAA,GAAAP,OAAA;AAAA,IAAAQ,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,iBAAA,EAAAC,iBAAA;AAAA,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAArB,wBAAAqB,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAEnC,MAAMW,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAGE,yBAAM,CAACC,GAAG,CAAAlC,eAAA,KAAAA,eAAA,OAAAmC,uBAAA,CAAAlB,OAAA,yRAC3BmB,KAAK,IAAMA,KAAK,CAACC,KAAK,KAAKC,WAAI,CAACC,KAAK,GAAG,OAAO,GAAGH,KAAK,CAACC,KAAK,KAAKC,WAAI,CAACE,KAAK,GAAG,OAAO,GAAG,OAAQ,EAChGJ,KAAK,IAAMA,KAAK,CAACC,KAAK,KAAKC,WAAI,CAACC,KAAK,GAAG,OAAO,GAAGH,KAAK,CAACC,KAAK,KAAKC,WAAI,CAACE,KAAK,GAAG,OAAO,GAAG,OAAQ,EAEjGJ,KAAK,IAAIK,QAAM,CAACC,QAAQ,CAAC,OAAO,EAAEN,KAAK,CAACO,KAAK,CAAC,EAE9CC,kBAAU,CAACC,kBAAkB,EAKhCC,iBAAS,CAACC,OAAO,EAEzBX,KAAK,IAAMA,KAAK,CAACY,SAAS,IAAIC,eAAQ,CAACC,MAAM,GAAG,iEAAiE,GAAG,EAAG,EACvHd,KAAK,IAAMA,KAAK,CAACY,SAAS,IAAIC,eAAQ,CAACE,GAAG,GAAG,oEAAoE,GAAG,EAAG,EAEvHf,KAAK,IAAMA,KAAK,CAACY,SAAS,IAAIC,eAAQ,CAACG,IAAI,GAAG,oEAAoE,GAAG,EAAG,EACxHhB,KAAK,IAAMA,KAAK,CAACY,SAAS,IAAIC,eAAQ,CAACI,KAAK,GAAG,mEAAmE,GAAG,EAAG,EAGtHjB,KAAK,IAAMA,KAAK,CAACkB,iBAAiB,GAAGC,iBAAiB,CAACnB,KAAK,CAACY,SAAS,CAAC,GAAG,EAAG,CACnF;AAEM,MAAMQ,0BAA0B,GAAAxB,OAAA,CAAAwB,0BAAA,GAAGvB,yBAAM,CAACC,GAAG,CAAAjC,gBAAA,KAAAA,gBAAA,OAAAkC,uBAAA,CAAAlB,OAAA,+CACvCmB,KAAK,IAAMA,KAAK,CAACC,KAAK,KAAKC,WAAI,CAACC,KAAK,GAAG,MAAM,GAAGH,KAAK,CAACC,KAAK,KAAKC,WAAI,CAACE,KAAK,GAAG,MAAM,GAAG,MAAO,CAE1G;AAEM,MAAMiB,6BAA6B,GAAAzB,OAAA,CAAAyB,6BAAA,GAAGxB,yBAAM,CAACC,GAAG,CAAAhC,gBAAA,KAAAA,gBAAA,OAAAiC,uBAAA,CAAAlB,OAAA,4FAE1CmB,KAAK,IAAMA,KAAK,CAACC,KAAK,KAAKC,WAAI,CAACC,KAAK,GAAG,OAAO,GAAGH,KAAK,CAACC,KAAK,KAAKC,WAAI,CAACE,KAAK,GAAG,OAAO,GAAG,OAAQ,EAChGJ,KAAK,IAAMA,KAAK,CAACC,KAAK,KAAKC,WAAI,CAACC,KAAK,GAAG,OAAO,GAAGH,KAAK,CAACC,KAAK,KAAKC,WAAI,CAACE,KAAK,GAAG,QAAQ,GAAG,QAAS,EAE7G,IAAAkB,wBAAgB,EAACpB,WAAI,CAACC,KAAK,CAAC,CAC/B;AAEM,MAAMoB,6BAA6B,GAAA3B,OAAA,CAAA2B,6BAAA,GAAG1B,yBAAM,CAACC,GAAG,CAAA/B,gBAAA,KAAAA,gBAAA,OAAAgC,uBAAA,CAAAlB,OAAA,wFAC1CmB,KAAK,IAAMA,KAAK,CAACC,KAAK,KAAKC,WAAI,CAACC,KAAK,GAAG,MAAM,GAAGH,KAAK,CAACC,KAAK,KAAKC,WAAI,CAACE,KAAK,GAAG,MAAM,GAAG,MAAO,CAM1G;AAED,MAAMoB,aAAa,GAAG3B,yBAAM,CAACC,GAAG,CAAA9B,gBAAA,KAAAA,gBAAA,OAAA+B,uBAAA,CAAAlB,OAAA,2FAGnBmB,KAAK,IAAKyB,aAAa,CAACzB,KAAK,CAAC0B,KAAK,EAAE1B,KAAK,CAACC,KAAK,CAAC,CAE7D;AAED,MAAM0B,aAAa,GAAG9B,yBAAM,CAACC,GAAG,CAAA7B,gBAAA,KAAAA,gBAAA,OAAA8B,uBAAA,CAAAlB,OAAA,oBAC3BmB,KAAK,IACNA,KAAK,CAACC,KAAK,KAAKC,WAAI,CAACC,KAAK,GACtB,IAAAyB,2BAAmB,EAACC,oBAAkB,CAACC,OAAO,EAAEzB,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEN,KAAK,CAACO,KAAK,CAAC,CAAC,GAC5FP,KAAK,CAACC,KAAK,KAAKC,WAAI,CAACE,KAAK,GAC1B,IAAA2B,yBAAiB,EAACF,oBAAkB,CAACC,OAAO,EAAEzB,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEN,KAAK,CAACO,KAAK,CAAC,CAAC,GAC1F,IAAAyB,oBAAkB,EAACH,oBAAkB,CAACC,OAAO,EAAEzB,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEN,KAAK,CAACO,KAAK,CAAC,CAAC,CAClG;AAED,MAAM0B,cAAc,GAAGpC,yBAAM,CAACC,GAAG,CAAA5B,gBAAA,KAAAA,gBAAA,OAAA6B,uBAAA,CAAAlB,OAAA,oBAC5BmB,KAAK,IACNA,KAAK,CAACC,KAAK,KAAKC,WAAI,CAACC,KAAK,GACtB,IAAA4B,yBAAiB,EAACF,oBAAkB,CAACK,IAAI,EAAE,IAAI,CAAC,GAChDlC,KAAK,CAACC,KAAK,KAAKC,WAAI,CAACE,KAAK,GAC1B,IAAA+B,yBAAiB,EAACN,oBAAkB,CAACK,IAAI,EAAE,IAAI,CAAC,GAChD,IAAAE,yBAAiB,EAACP,oBAAkB,CAACK,IAAI,EAAE,IAAI,CAAC,CACvD;AAED,MAAMG,oBAAoB,GAAGxC,yBAAM,CAACC,GAAG,CAAA3B,gBAAA,KAAAA,gBAAA,OAAA4B,uBAAA,CAAAlB,OAAA,6BAC1BmB,KAAK,IAAMA,KAAK,CAACC,KAAK,KAAKC,WAAI,CAACC,KAAK,GAAG,gBAAgB,GAAGH,KAAK,CAACC,KAAK,KAAKC,WAAI,CAACE,KAAK,GAAG,kBAAkB,GAAG,gBAAiB,CAC1I;AAED,MAAMkC,mBAAmB,GAAGzC,yBAAM,CAACC,GAAG,CAAA1B,gBAAA,KAAAA,gBAAA,OAAA2B,uBAAA,CAAAlB,OAAA,6BACzBmB,KAAK,IAAMA,KAAK,CAACC,KAAK,KAAKC,WAAI,CAACC,KAAK,GAAG,gBAAgB,GAAGH,KAAK,CAACC,KAAK,KAAKC,WAAI,CAACE,KAAK,GAAG,kBAAkB,GAAG,kBAAmB,CAC5I;AAED,MAAMmC,mBAAmB,GAAG1C,yBAAM,CAACC,GAAG,CAAAzB,iBAAA,KAAAA,iBAAA,OAAA0B,uBAAA,CAAAlB,OAAA,+CACzBmB,KAAK,IAAMA,KAAK,CAACC,KAAK,KAAKC,WAAI,CAACC,KAAK,GAAG,gBAAgB,GAAGH,KAAK,CAACC,KAAK,KAAKC,WAAI,CAACE,KAAK,GAAG,kBAAkB,GAAG,kBAAmB,CAE5I;AAEM,MAAMoC,cAAc,GAAA5C,OAAA,CAAA4C,cAAA,GAAG3C,yBAAM,CAACC,GAAG,CAAAxB,iBAAA,KAAAA,iBAAA,OAAAyB,uBAAA,CAAAlB,OAAA,sLAIzBmB,KAAK,IAAMA,KAAK,CAACY,SAAS,KAAKC,eAAQ,CAACE,GAAG,IAAIf,KAAK,CAACY,SAAS,KAAKC,eAAQ,CAACC,MAAM,GAAG,MAAM,GAAG,MAAO,EACtGd,KAAK,IAAMA,KAAK,CAACY,SAAS,KAAKC,eAAQ,CAACG,IAAI,IAAIhB,KAAK,CAACY,SAAS,KAAKC,eAAQ,CAACI,KAAK,GAAG,MAAM,GAAG,MAAO,EAG5GjB,KAAK,IAAMA,KAAK,CAACY,SAAS,KAAKC,eAAQ,CAACG,IAAI,GAAG,wBAAwB,GAAG,EAAG,EAC7EhB,KAAK,IAAMA,KAAK,CAACY,SAAS,KAAKC,eAAQ,CAACI,KAAK,GAAG,uBAAuB,GAAG,EAAG,EAE7EjB,KAAK,IAAMA,KAAK,CAACY,SAAS,KAAKC,eAAQ,CAACE,GAAG,GAAG,cAAc,GAAG,EAAG,EAClEf,KAAK,IAAMA,KAAK,CAACY,SAAS,KAAKC,eAAQ,CAACC,MAAM,GAAG,WAAW,GAAG,EAAG,EAGpEd,KAAK,IACNA,KAAK,CAACyC,YAAY,MAAAC,MAAA,CACX/C,gBAAgB,8BAAA+C,MAAA,CACL1C,KAAK,CAAC2C,YAAY,GAAG,SAAS,GAAG,QAAQ,0BAAAD,MAAA,CAC5C1C,KAAK,CAAC2C,YAAY,GAAG,GAAG,GAAG,GAAG,0DAAAD,MAAA,CAIzC/C,gBAAgB,0EAIlB,CACL;AAED,MAAM8B,aAAa,GAAGA,CAACmB,aAAsB,EAAEC,IAAU,KAAa;EACpE,IAAID,aAAa,EAAE;IACjB,OAAOC,IAAI,KAAK3C,WAAI,CAACC,KAAK,GAAG,WAAW,GAAG0C,IAAI,KAAK3C,WAAI,CAACE,KAAK,GAAG,WAAW,GAAG,WAAW;EAC5F,CAAC,MAAM;IACL,OAAOyC,IAAI,KAAK3C,WAAI,CAACC,KAAK,GAAG,WAAW,GAAG0C,IAAI,KAAK3C,WAAI,CAACE,KAAK,GAAG,MAAM,GAAG,MAAM;EAClF;AACF,CAAC;AAED,MAAMe,iBAAiB,GAAI2B,QAAkB,IAAK;EAChD,IAAIA,QAAQ,KAAKjC,eAAQ,CAACC,MAAM,EAAE;IAChC;EAUF;EAEA,IAAIgC,QAAQ,KAAKjC,eAAQ,CAACE,GAAG,EAAE;IAC7B;EAUF;EAEA,IAAI+B,QAAQ,KAAKjC,eAAQ,CAACG,IAAI,EAAE;IAC9B;EAUF;EAEA,IAAI8B,QAAQ,KAAKjC,eAAQ,CAACI,KAAK,EAAE;IAC/B;EAUF;AACF,CAAC;AAYA;AAiBA;AAaA;AA6CA;AAED,MAAM8B,OAA8C,GAAGC,IAAA,IASjD;EAAA,IAAAC,qBAAA,EAAAC,qBAAA;EAAA,IATkD;IACtDL,IAAI,GAAG3C,WAAI,CAACiD,MAAM;IAClBC,eAAe;IACfC,kBAAkB;IAClBC,WAAW;IACXC,QAAQ;IACRT,QAAQ;IACRU,WAAW,GAAG,KAAK;IACnBC,gBAAgB,GAAG;EACrB,CAAC,GAAAT,IAAA;EACC,MAAM,CAACU,WAAW,EAAEC,cAAc,CAAC,GAAGzG,KAAK,CAAC0G,QAAQ,CAAC,KAAK,CAAC;EAC3D,MAAMrD,KAAK,GAAG,IAAAsD,0BAAQ,EAAC,CAAC;EACxB,MAAMC,UAAU,GAAG5G,KAAK,CAAC6G,MAAM,CAAM,CAAC;EAEtC7G,KAAK,CAAC8G,SAAS,CAAC,MAAM;IACpB,MAAMC,qBAAqB,GAAIzF,CAAkB,IAAK;MACpD,IAAIkF,WAAW,IAAII,UAAU,CAACI,OAAO,IAAI,CAACJ,UAAU,CAACI,OAAO,CAACC,QAAQ,CAAC3F,CAAC,CAAC4F,MAAM,CAAC,EAAE;QAC/ET,cAAc,CAAC,KAAK,CAAC;MACvB;IACF,CAAC;IAEDU,QAAQ,CAACC,gBAAgB,CAAC,WAAW,EAAEL,qBAAqB,CAAC;IAE7D,OAAO,MAAM;MACXI,QAAQ,CAACE,mBAAmB,CAAC,WAAW,EAAEN,qBAAqB,CAAC;IAClE,CAAC;EACH,CAAC,EAAE,CAACP,WAAW,CAAC,CAAC;EAEjB,oBACE,IAAA/F,WAAA,CAAA6G,IAAA,EAAChC,cAAc;IAAC5B,SAAS,EAAEkC,QAAS;IAACL,YAAY,EAAEe,WAAY;IAACb,YAAY,EAAEe,WAAY;IAAAH,QAAA,gBACxF,IAAA5F,WAAA,CAAA6G,IAAA,EAAC7E,gBAAgB;MAACM,KAAK,EAAE4C,IAAK;MAACjC,SAAS,EAAEkC,QAAS;MAAC2B,GAAG,EAAEX,UAAW;MAAC5C,iBAAiB,EAAEuC,gBAAiB;MAAAF,QAAA,GACtG,CAAC,CAACH,eAAe,iBAChB,IAAAzF,WAAA,CAAA6G,IAAA,EAACpD,0BAA0B;QAACnB,KAAK,EAAE4C,IAAK;QAAAU,QAAA,gBACtC,IAAA5F,WAAA,CAAA6G,IAAA,EAAChD,aAAa;UAACE,KAAK,EAAE,CAAC,EAAC0B,eAAe,aAAfA,eAAe,eAAfA,eAAe,CAAEsB,IAAI,CAAC;UAACzE,KAAK,EAAE4C,IAAK;UAAAU,QAAA,GACxD,CAAAH,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAEsB,IAAI,kBAAI,IAAA/G,WAAA,CAAAgH,GAAA,EAAChD,aAAa;YAAC1B,KAAK,EAAE4C,IAAK;YAAAU,QAAA,EAAEH,eAAe,CAACsB;UAAI,CAAgB,CAAC,eAC5F,IAAA/G,WAAA,CAAAgH,GAAA,EAAC1C,cAAc;YAAChC,KAAK,EAAE4C,IAAK;YAAAU,QAAA,EAAEH,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAEwB;UAAI,CAAiB,CAAC;QAAA,CACxD,CAAC,EAEfpB,WAAW,iBACV,IAAA7F,WAAA,CAAAgH,GAAA,EAACtC,oBAAoB;UAACpC,KAAK,EAAE4C,IAAK;UAAC,eAAa,UAAW;UAAAU,QAAA,eACzD,IAAA5F,WAAA,CAAAgH,GAAA,EAACpH,OAAA,CAAAsH,UAAU;YAACC,MAAM,EAAEA,CAAA,KAAMnB,cAAc,CAAC,KAAK,CAAE;YAACoB,wBAAwB;YAACC,SAAS,EAAE3E,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEC,KAAK,CAAE;YAAC0E,OAAO,EAAC,WAAW;YAACC,KAAK,EAAC,UAAU;YAAA3B,QAAA,eAC9J,IAAA5F,WAAA,CAAAgH,GAAA,EAACnH,MAAA,CAAA2H,WAAW,CAACC,KAAK,IAAE;UAAC,CACX;QAAC,CACO,CACvB;MAAA,CACyB,CAC7B,eAED,IAAAzH,WAAA,CAAAgH,GAAA,EAACtD,6BAA6B;QAACpB,KAAK,EAAE4C,IAAK;QAAAU,QAAA,EAAED;MAAW,CAAgC,CAAC,EAExF,CAAC,CAACD,kBAAkB,iBACnB,IAAA1F,WAAA,CAAA6G,IAAA,EAACjD,6BAA6B;QAACtB,KAAK,EAAE4C,IAAK;QAAAU,QAAA,GACxC,CAAC,EAACF,kBAAkB,aAAlBA,kBAAkB,gBAAAJ,qBAAA,GAAlBI,kBAAkB,CAAEgC,UAAU,cAAApC,qBAAA,eAA9BA,qBAAA,CAAgCqC,IAAI,kBACrC,IAAA3H,WAAA,CAAAgH,GAAA,EAACrC,mBAAmB;UAACrC,KAAK,EAAE4C,IAAK;UAAC,eAAa,SAAU;UAAAU,QAAA,eACvD,IAAA5F,WAAA,CAAAgH,GAAA,EAACpH,OAAA,CAAAgI,MAAM;YAAC1C,IAAI,EAAEA,IAAK;YAACoC,OAAO,EAAC,WAAW;YAACK,IAAI,EAAEjC,kBAAkB,CAACgC,UAAU,CAACC,IAAK;YAACE,OAAO,EAAEnC,kBAAkB,CAACgC,UAAU,CAACP,MAAO;YAAAvB,QAAA,EAC7HF,kBAAkB,CAACgC,UAAU,CAACI;UAAK,CAC9B;QAAC,CACU,CACtB,eAED,IAAA9H,WAAA,CAAAgH,GAAA;UAAKe,SAAS,EAAC;QAAa,CAAE,CAAC,eAE/B,IAAA/H,WAAA,CAAAgH,GAAA,EAACpC,mBAAmB;UAACtC,KAAK,EAAE4C,IAAK;UAAC,eAAa,SAAU;UAAAU,QAAA,EACtDF,kBAAkB,aAAlBA,kBAAkB,gBAAAH,qBAAA,GAAlBG,kBAAkB,CAAEsC,WAAW,cAAAzC,qBAAA,uBAA/BA,qBAAA,CAAiC0C,GAAG,CAAEC,UAAU,iBAC/C,IAAAlI,WAAA,CAAAgH,GAAA,EAACpH,OAAA,CAAAsH,UAAU;YAACC,MAAM,EAAEe,UAAU,CAACf,MAAO;YAACG,OAAO,EAAC,WAAW;YAACC,KAAK,EAAC,UAAU;YAACH,wBAAwB;YAAAxB,QAAA,EACjGsC,UAAU,CAACP;UAAI,CACN,CACb;QAAC,CACiB,CAAC;MAAA,CACO,CAChC;IAAA,CACe,CAAC,eAEnB,IAAA3H,WAAA,CAAA6G,IAAA;MAAKgB,OAAO,EAAEA,CAAA,KAAMhC,WAAW,IAAIG,cAAc,CAAC,CAACD,WAAW,CAAE;MAAAH,QAAA,GAC7DA,QAAQ,eAET,IAAA5F,WAAA,CAAAgH,GAAA;QAAKe,SAAS,EAAC;MAAe,CAAE,CAAC;IAAA,CAC9B,CAAC;EAAA,CACQ,CAAC;AAErB,CAAC;AAAC3C,OAAA,CAAA+C,SAAA;EAnHA1C,eAAe,EAAA2C,UAAA,CAAAlH,OAAA,CAAAqG,KAAA;IAhDfN,IAAI,EAAAmB,UAAA,CAAAlH,OAAA,CAAAmH,MAAA,CAAAC,UAAA;IAKJvB,IAAI,EAAAqB,UAAA,CAAAlH,OAAA,CAAAmH;EAAA;EAgDJ3C,kBAAkB,EAAA0C,UAAA,CAAAlH,OAAA,CAAAqG,KAAA;IAvBlBS,WAAW,EAAAI,UAAA,CAAAlH,OAAA,CAAAqH,OAAA,CAAAH,UAAA,CAAAlH,OAAA,CAAAqG,KAAA;MAlBXI,IAAI,EAAAS,UAAA,CAAAlH,OAAA,CAAAsH,IAAA,CAAAF,UAAA;MAKJnB,MAAM,EAAAiB,UAAA,CAAAlH,OAAA,CAAAuH,IAAA,CAAAH,UAAA;MAKNR,KAAK,EAAAM,UAAA,CAAAlH,OAAA,CAAAmH;IAAA;IAaLX,UAAU,EAAAU,UAAA,CAAAlH,OAAA,CAAAqG,KAAA;MAvBVI,IAAI,EAAAS,UAAA,CAAAlH,OAAA,CAAAsH,IAAA,CAAAF,UAAA;MAKJnB,MAAM,EAAAiB,UAAA,CAAAlH,OAAA,CAAAuH,IAAA,CAAAH,UAAA;MAKNR,KAAK,EAAAM,UAAA,CAAAlH,OAAA,CAAAmH;IAAA;EAAA;EAoCL1C,WAAW,EAAAyC,UAAA,CAAAlH,OAAA,CAAAsH,IAAA,CAAAF,UAAA;EAKX1C,QAAQ,EAAAwC,UAAA,CAAAlH,OAAA,CAAAsH,IAAA,CAAAF,UAAA;EAWRzC,WAAW,EAAAuC,UAAA,CAAAlH,OAAA,CAAAwH,IAAA,CAAAJ,UAAA;EAMXxC,gBAAgB,EAAAsC,UAAA,CAAAlH,OAAA,CAAAwH;AAAA;AAAA,IAAAC,QAAA,GAAA1G,OAAA,CAAAf,OAAA,GAqFHkE,OAAO","ignoreList":[]}
+{"version":3,"file":"Popover.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_","_Button","_icons","_styles","_types","_jsxRuntime","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","PopoverContainer","styled","div","_taggedTemplateLiteral2","props","$size","Size","Small","Large","COLORS","getColor","theme","BOXSHADOWS","BOXSHADOW_CENTERED","Z_INDEXES","popover","$position","Position","Bottom","Top","Left","Right","$showArrowPointer","renderArrowStyles","exports","PopoverTopSectionContainer","PopoverMiddleSectionContainer","scrollBarStyling","PopoverBottomSectionContainer","TextContainer","renderMargins","$note","NoteContainer","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentSStyling","ComponentXSStyling","LabelContainer","Bold","ComponentLStyling","ComponentMStyling","CloseButtonContainer","TextButtonContainer","IconButtonContainer","PopoverWrapper","$showOnClick","concat","$showPopover","isNotePresent","size","position","Popover","_ref","_bottomSectionProps$t","_bottomSectionProps$i","_ref$size","Medium","topSectionProps","bottomSectionProps","mainContent","children","_ref$showOnClick","showOnClick","_ref$showArrowPointer","showArrowPointer","_React$useState","useState","_React$useState2","_slicedToArray2","showPopover","setShowPopover","useTheme","popoverRef","useRef","useEffect","checkIfClickedOutside","current","contains","target","document","addEventListener","removeEventListener","jsxs","ref","note","jsx","text","IconButton","action","useTransparentBackground","iconColor","variant","shape","SystemIcons","Close","textButton","icon","Button","onClick","label","className","iconButtons","map","iconButton","propTypes","_propTypes","string","isRequired","arrayOf","node","func","bool","_default"],"sources":["../../src/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\r\nimport { Button, IconButton } from '../Button';\r\nimport { SystemIcons } from '../icons';\r\nimport { BOXSHADOWS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling, scrollBarStyling, Z_INDEXES } from '../styles';\r\nimport { Position, Size } from '../types';\r\n\r\nexport const PopoverContainer = styled.div<{ $size: Size; $position: Position; $showArrowPointer: boolean }>`\r\n  //height: ${(props) => (props.$size === Size.Small ? '240px' : props.$size === Size.Large ? '480px' : '360px')};\r\n  min-width: ${(props) => (props.$size === Size.Small ? '320px' : props.$size === Size.Large ? '640px' : '480px')};\r\n  border-radius: 4px;\r\n  background: ${props => COLORS.getColor('white', props.theme)};\r\n  cursor: default;\r\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\r\n\r\n  position: absolute;  \r\n  visibility: hidden;\r\n  opacity: 0;\r\n  z-index: ${Z_INDEXES.popover};\r\n\r\n  ${(props) => (props.$position == Position.Bottom ? 'right: 50%; top: calc(100% + 16px); transform: translateX(50%);' : '')}\r\n  ${(props) => (props.$position == Position.Top ? 'right: 50%; bottom: calc(100% + 16px); transform: translateX(50%);' : '')}\r\n\r\n  ${(props) => (props.$position == Position.Left ? 'bottom: 50%; right: calc(100% + 16px); transform: translateY(50%);' : '')}\r\n  ${(props) => (props.$position == Position.Right ? 'bottom: 50%; left: calc(100% + 16px); transform: translateY(50%);' : '')}\r\n\r\n  &::after {\r\n    ${(props) => (props.$showArrowPointer ? renderArrowStyles(props.$position) : '')}\r\n`;\r\n\r\nexport const PopoverTopSectionContainer = styled.div<{ $size: Size }>`\r\n  height: ${(props) => (props.$size === Size.Small ? '56px' : props.$size === Size.Large ? '72px' : '64px')};\r\n  display: flex;\r\n`;\r\n\r\nexport const PopoverMiddleSectionContainer = styled.div<{ $size: Size }>`\r\n  margin: 8px;\r\n  height: ${(props) => (props.$size === Size.Small ? '104px' : props.$size === Size.Large ? '304px' : '208px')};\r\n  padding: ${(props) => (props.$size === Size.Small ? '0 8px' : props.$size === Size.Large ? '0 16px' : '0 12px')};\r\n  overflow-y: auto;\r\n  ${scrollBarStyling(Size.Small)}\r\n`;\r\n\r\nexport const PopoverBottomSectionContainer = styled.div<{ $size: Size }>`\r\n  height: ${(props) => (props.$size === Size.Small ? '64px' : props.$size === Size.Large ? '88px' : '72px')};  \r\n  display: flex;\r\n\r\n  .bottom-flex {\r\n    flex: 1;\r\n  }\r\n`;\r\n\r\nconst TextContainer = styled.div<{ $note: boolean; $size: Size }>`\r\n  display: flex;\r\n  flex-direction: column;\r\n  margin: ${(props) => renderMargins(props.$note, props.$size)};\r\n  flex-grow: 1;\r\n`;\r\n\r\nconst NoteContainer = styled.div<{ $size: Size }>`\r\n  ${(props) =>\r\n    props.$size === Size.Small\r\n      ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))\r\n      : props.$size === Size.Large\r\n      ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))\r\n      : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n`;\r\n\r\nconst LabelContainer = styled.div<{ $size: Size }>`\r\n  ${(props) =>\r\n    props.$size === Size.Small\r\n      ? ComponentSStyling(ComponentTextStyle.Bold, null)\r\n      : props.$size === Size.Large\r\n      ? ComponentLStyling(ComponentTextStyle.Bold, null)\r\n      : ComponentMStyling(ComponentTextStyle.Bold, null)}\r\n`;\r\n\r\nconst CloseButtonContainer = styled.div<{ $size: Size }>`\r\n  margin: ${(props) => (props.$size === Size.Small ? '4px 16px 4px 0' : props.$size === Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0')};\r\n`;\r\n\r\nconst TextButtonContainer = styled.div<{ $size: Size }>`\r\n  margin: ${(props) => (props.$size === Size.Small ? '8px 0 8px 16px' : props.$size === Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px')};\r\n`;\r\n\r\nconst IconButtonContainer = styled.div<{ $size: Size }>`\r\n  margin: ${(props) => (props.$size === Size.Small ? '8px 16px 8px 0' : props.$size === Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0')};\r\n  display: flex;\r\n`;\r\n\r\nexport const PopoverWrapper = styled.div<{ $position: Position; $showOnClick: boolean; $showPopover: boolean }>`\r\n  position: relative;\r\n\r\n  .pointer-space {\r\n    height: ${(props) => (props.$position === Position.Top || props.$position === Position.Bottom ? '16px' : '100%')};\r\n    width: ${(props) => (props.$position === Position.Left || props.$position === Position.Right ? '16px' : '100%')};\r\n    position: absolute;\r\n\r\n    ${(props) => (props.$position === Position.Left ? 'right:100%; bottom: 0%' : '')};\r\n    ${(props) => (props.$position === Position.Right ? 'left:100%; bottom: 0%' : '')};\r\n\r\n    ${(props) => (props.$position === Position.Top ? 'bottom: 100%' : '')};\r\n    ${(props) => (props.$position === Position.Bottom ? 'top: 100%' : '')};\r\n  }\r\n\r\n  ${(props) =>\r\n    props.$showOnClick\r\n      ? `${PopoverContainer} {\r\n        visibility: ${props.$showPopover ? 'visible' : 'hidden'};\r\n        opacity: ${props.$showPopover ? '1' : '0'};\r\n    }\r\n    cursor: pointer;`\r\n      : `&:hover {\r\n      ${PopoverContainer} {\r\n        visibility: visible;\r\n        opacity: 1;\r\n      }\r\n    }`}\r\n`;\r\n\r\nconst renderMargins = (isNotePresent: boolean, size: Size): string => {\r\n  if (isNotePresent) {\r\n    return size === Size.Small ? '10px 16px' : size === Size.Large ? '14px 24px' : '12px 20px';\r\n  } else {\r\n    return size === Size.Small ? '18px 16px' : size === Size.Large ? '24px' : '20px';\r\n  }\r\n};\r\n\r\nconst renderArrowStyles = (position: Position) => {\r\n  if (position === Position.Bottom) {\r\n    return `height: 0px;\r\n            width: 0px;\r\n            border-top: 16px solid transparent;\r\n            border-right: 12px solid transparent;\r\n            border-bottom: 16px solid rgb(255,255,255);\r\n            border-left: 12px solid transparent;\r\n            content: \"\";\r\n            position: absolute;\r\n            right: calc(50% - 12px);\r\n            bottom: calc(100% - 1px);`;\r\n  }\r\n\r\n  if (position === Position.Top) {\r\n    return `height: 0px;\r\n            width: 0px;\r\n            border-top: 16px solid rgb(255,255,255);\r\n            border-right: 12px solid transparent;\r\n            border-bottom: 16px solid transparent;\r\n            border-left: 12px solid transparent;\r\n            content: \"\";\r\n            position: absolute;\r\n            right: calc(50% - 12px);\r\n            top: calc(100% - 1px);`;\r\n  }\r\n\r\n  if (position === Position.Left) {\r\n    return `height: 0px;\r\n            width: 0px;\r\n            border-top: 12px solid transparent;\r\n            border-right: 16px solid transparent;\r\n            border-bottom: 12px solid transparent;\r\n            border-left: 16px solid rgb(255,255,255);\r\n            content: \"\";\r\n            position: absolute;\r\n            left: calc(100% - 1px);\r\n            bottom: calc(50% - 12px);`;\r\n  }\r\n\r\n  if (position === Position.Right) {\r\n    return `height: 0px;\r\n            width: 0px;\r\n            border-top: 12px solid transparent;\r\n            border-right: 16px solid rgb(255,255,255);\r\n            border-bottom: 12px solid transparent;\r\n            border-left: 16px solid transparent;\r\n            content: \"\";\r\n            position: absolute;\r\n            right: calc(100% - 1px);\r\n            bottom: calc(50% - 12px);`;\r\n  }\r\n};\r\n\r\nexport interface PopoverTopSectionProps {\r\n  /**\r\n   * Required. The main text to be displayed in the top section of the popover.\r\n   */\r\n  text: string;\r\n\r\n  /**\r\n   * Optional. A note to be displayed below the main text in the top section of the popover.\r\n   */\r\n  note?: string;\r\n};\r\n\r\nexport interface PopoverActionButtonProps {\r\n  /**\r\n   * Required. The icon to be displayed on the button.\r\n   */\r\n  icon: React.ReactNode;\r\n\r\n  /**\r\n   * Required. The handler function to be called when the button is clicked.\r\n   */\r\n  action: () => void;\r\n\r\n  /**\r\n   * Optional. The label for the button. If provided, the button will display this text.\r\n   */\r\n  label?: string;\r\n};\r\n\r\nexport interface PopoverBottomSectionProps {\r\n  /**\r\n   * Optional. An array of PopoverActionButtonProps objects.\r\n   * Each object represents an icon button to be displayed in the bottom section of the popover.\r\n   */\r\n  iconButtons?: PopoverActionButtonProps[];\r\n\r\n  /**\r\n   * Optional. A PopoverActionButtonProps object representing a text button to be displayed in the bottom section of the popover.\r\n   */\r\n  textButton?: PopoverActionButtonProps;\r\n};\r\n\r\nexport interface PopoverProps {\r\n  /**\r\n   * Optional. The size of the popover. It can be 'Small', 'Medium', or 'Large'.\r\n   * Defaults to 'Medium' if not specified.\r\n   */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n\r\n  /**\r\n   * Optional. Properties for the top section of the popover.\r\n   */\r\n  topSectionProps?: PopoverTopSectionProps;\r\n\r\n  /**\r\n   * Optional. Properties for the bottom section of the popover.\r\n   */\r\n  bottomSectionProps?: PopoverBottomSectionProps;\r\n\r\n  /**\r\n   * Required. The main content to be displayed in the popover.\r\n   */\r\n  mainContent: React.ReactNode;\r\n\r\n  /**\r\n   * Required. The children to be rendered inside the popover.\r\n   */\r\n  children: React.ReactNode;\r\n\r\n  /**\r\n   * Required. The position of the popover relative to the target element.\r\n   * It can be 'Top', 'Bottom', 'Right', or 'Left'.\r\n   */\r\n  position: Position.Top | Position.Bottom | Position.Right | Position.Left;\r\n\r\n  /**\r\n   * Required. A boolean indicating whether the popover should be shown when the target element is clicked. Defaults to 'false', meaning that popover will be shown on mouse hover.\r\n   */\r\n  showOnClick: boolean;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether an arrow pointer should be shown on the popover.\r\n   * Defaults to 'false' if not specified.\r\n   */\r\n  showArrowPointer?: boolean;\r\n};\r\n\r\nconst Popover: React.FunctionComponent<PopoverProps> = ({\r\n  size = Size.Medium,\r\n  topSectionProps,\r\n  bottomSectionProps,\r\n  mainContent,\r\n  children,\r\n  position,\r\n  showOnClick = false,\r\n  showArrowPointer = false,\r\n}) => {\r\n  const [showPopover, setShowPopover] = React.useState(false);\r\n  const theme = useTheme();\r\n  const popoverRef = React.useRef<any>();\r\n\r\n  React.useEffect(() => {\r\n    const checkIfClickedOutside = (e: { target: any }) => {\r\n      if (showPopover && popoverRef.current && !popoverRef.current.contains(e.target)) {\r\n        setShowPopover(false);\r\n      }\r\n    };\r\n\r\n    document.addEventListener('mousedown', checkIfClickedOutside);\r\n\r\n    return () => {\r\n      document.removeEventListener('mousedown', checkIfClickedOutside);\r\n    };\r\n  }, [showPopover]);\r\n\r\n  return (\r\n    <PopoverWrapper $position={position} $showOnClick={showOnClick} $showPopover={showPopover}>\r\n      <PopoverContainer $size={size} $position={position} ref={popoverRef} $showArrowPointer={showArrowPointer}>\r\n        {!!topSectionProps && (\r\n          <PopoverTopSectionContainer $size={size}>\r\n            <TextContainer $note={!!topSectionProps?.note} $size={size}>\r\n              {topSectionProps?.note && <NoteContainer $size={size}>{topSectionProps.note}</NoteContainer>}\r\n              <LabelContainer $size={size}>{topSectionProps?.text}</LabelContainer>\r\n            </TextContainer>\r\n\r\n            {showOnClick && (\r\n              <CloseButtonContainer $size={size} data-testid={'closeBtn'}>\r\n                <IconButton action={() => setShowPopover(false)} useTransparentBackground iconColor={COLORS.getColor('neutral_600', theme)} variant=\"secondary\" shape=\"circular\">\r\n                  <SystemIcons.Close />\r\n                </IconButton>\r\n              </CloseButtonContainer>\r\n            )}\r\n          </PopoverTopSectionContainer>\r\n        )}\r\n\r\n        <PopoverMiddleSectionContainer $size={size}>{mainContent}</PopoverMiddleSectionContainer>\r\n\r\n        {!!bottomSectionProps && (\r\n          <PopoverBottomSectionContainer $size={size}>\r\n            {!!bottomSectionProps?.textButton?.icon && (\r\n              <TextButtonContainer $size={size} data-testid={'textBtn'}>\r\n                <Button size={size} variant=\"secondary\" icon={bottomSectionProps.textButton.icon} onClick={bottomSectionProps.textButton.action}>\r\n                  {bottomSectionProps.textButton.label}\r\n                </Button>\r\n              </TextButtonContainer>\r\n            )}\r\n\r\n            <div className=\"bottom-flex\" />\r\n\r\n            <IconButtonContainer $size={size} data-testid={'iconBtn'}>\r\n              {bottomSectionProps?.iconButtons?.map((iconButton) => (\r\n                <IconButton action={iconButton.action} variant=\"secondary\" shape=\"circular\" useTransparentBackground>\r\n                  {iconButton.icon}\r\n                </IconButton>\r\n              ))}\r\n            </IconButtonContainer>\r\n          </PopoverBottomSectionContainer>\r\n        )}\r\n      </PopoverContainer>\r\n\r\n      <div onClick={() => showOnClick && setShowPopover(!showPopover)}>\r\n        {children}\r\n\r\n        <div className=\"pointer-space\" />\r\n      </div>\r\n    </PopoverWrapper>\r\n  );\r\n};\r\n\r\nexport default Popover;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Popover/Popover.js

@@ -1,3 +1,4 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
@@ -8,26 +9,77 @@ import { Button, IconButton } from '../Button';
 import { SystemIcons } from '../icons';
 import { BOXSHADOWS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling, scrollBarStyling, Z_INDEXES } from '../styles';
 import { Position, Size } from '../types';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const PopoverContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  //height: ", ";\n  min-width: ", ";\n  border-radius: 4px;\n  background: ", ";\n  cursor: default;\n  box-shadow: ", ";\n\n  position: absolute;  \n  visibility: hidden;\n  opacity: 0;\n  z-index: ", ";\n\n  ", "\n  ", "\n\n  ", "\n  ", "\n\n  &::after {\n    ", "\n"])), props => props.$size === Size.Small ? '240px' : props.$size === Size.Large ? '480px' : '360px', props => props.$size === Size.Small ? '320px' : props.$size === Size.Large ? '640px' : '480px', props => COLORS.getColor('white', props.theme), BOXSHADOWS.BOXSHADOW_CENTERED, Z_INDEXES.popover, props => props.$position == Position.Bottom ? 'right: 50%; top: calc(100% + 16px); transform: translateX(50%);' : '', props => props.$position == Position.Top ? 'right: 50%; bottom: calc(100% + 16px); transform: translateX(50%);' : '', props => props.$position == Position.Left ? 'bottom: 50%; right: calc(100% + 16px); transform: translateY(50%);' : '', props => props.$position == Position.Right ? 'bottom: 50%; left: calc(100% + 16px); transform: translateY(50%);' : '', props => props.$showArrowPointer ? renderArrowStyles(props.$position) : '');
-export const PopoverTopSectionContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: ", ";\n  display: flex;\n"])), props => props.$size === Size.Small ? '56px' : props.$size === Size.Large ? '72px' : '64px');
-export const PopoverMiddleSectionContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 8px;\n  height: ", ";\n  padding: ", ";\n  overflow-y: auto;\n  ", "\n"])), props => props.$size === Size.Small ? '104px' : props.$size === Size.Large ? '304px' : '208px', props => props.$size === Size.Small ? '0 8px' : props.$size === Size.Large ? '0 16px' : '0 12px', scrollBarStyling(Size.Small));
-export const PopoverBottomSectionContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  height: ", ";  \n  display: flex;\n\n  .bottom-flex {\n    flex: 1;\n  }\n"])), props => props.$size === Size.Small ? '64px' : props.$size === Size.Large ? '88px' : '72px');
-const TextContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  margin: ", ";\n  flex-grow: 1;\n"])), props => renderMargins(props.$note, props.$size));
-const NoteContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n"])), props => props.$size === Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme)) : props.$size === Size.Large ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme)) : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme)));
-const LabelContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n"])), props => props.$size === Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, null) : props.$size === Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, null) : ComponentMStyling(ComponentTextStyle.Bold, null));
-const CloseButtonContainer = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  margin: ", ";\n"])), props => props.$size === Size.Small ? '4px 16px 4px 0' : props.$size === Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0');
-const TextButtonContainer = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  margin: ", ";\n"])), props => props.$size === Size.Small ? '8px 0 8px 16px' : props.$size === Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px');
-const IconButtonContainer = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin: ", ";\n  display: flex;\n"])), props => props.$size === Size.Small ? '8px 16px 8px 0' : props.$size === Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0');
-export const PopoverWrapper = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  position: relative;\n\n  .pointer-space {\n    height: ", ";\n    width: ", ";\n    position: absolute;\n\n    ", ";\n    ", ";\n\n    ", ";\n    ", ";\n  }\n\n  ", "\n"])), props => props.$position === Position.Top || props.$position === Position.Bottom ? '16px' : '100%', props => props.$position === Position.Left || props.$position === Position.Right ? '16px' : '100%', props => props.$position === Position.Left ? 'right:100%; bottom: 0%' : '', props => props.$position === Position.Right ? 'left:100%; bottom: 0%' : '', props => props.$position === Position.Top ? 'bottom: 100%' : '', props => props.$position === Position.Bottom ? 'top: 100%' : '', props => props.$showOnClick ? "".concat(PopoverContainer, " {\n        visibility: ").concat(props.$showPopover ? 'visible' : 'hidden', ";\n        opacity: ").concat(props.$showPopover ? '1' : '0', ";\n    }\n    cursor: pointer;") : "&:hover {\n      ".concat(PopoverContainer, " {\n        visibility: visible;\n        opacity: 1;\n      }\n    }"));
-const renderMargins = (isNotePresent, size) => {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var PopoverContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  //height: ", ";\n  min-width: ", ";\n  border-radius: 4px;\n  background: ", ";\n  cursor: default;\n  box-shadow: ", ";\n\n  position: absolute;  \n  visibility: hidden;\n  opacity: 0;\n  z-index: ", ";\n\n  ", "\n  ", "\n\n  ", "\n  ", "\n\n  &::after {\n    ", "\n"])), function (props) {
+  return props.$size === Size.Small ? '240px' : props.$size === Size.Large ? '480px' : '360px';
+}, function (props) {
+  return props.$size === Size.Small ? '320px' : props.$size === Size.Large ? '640px' : '480px';
+}, function (props) {
+  return COLORS.getColor('white', props.theme);
+}, BOXSHADOWS.BOXSHADOW_CENTERED, Z_INDEXES.popover, function (props) {
+  return props.$position == Position.Bottom ? 'right: 50%; top: calc(100% + 16px); transform: translateX(50%);' : '';
+}, function (props) {
+  return props.$position == Position.Top ? 'right: 50%; bottom: calc(100% + 16px); transform: translateX(50%);' : '';
+}, function (props) {
+  return props.$position == Position.Left ? 'bottom: 50%; right: calc(100% + 16px); transform: translateY(50%);' : '';
+}, function (props) {
+  return props.$position == Position.Right ? 'bottom: 50%; left: calc(100% + 16px); transform: translateY(50%);' : '';
+}, function (props) {
+  return props.$showArrowPointer ? renderArrowStyles(props.$position) : '';
+});
+export var PopoverTopSectionContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: ", ";\n  display: flex;\n"])), function (props) {
+  return props.$size === Size.Small ? '56px' : props.$size === Size.Large ? '72px' : '64px';
+});
+export var PopoverMiddleSectionContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 8px;\n  height: ", ";\n  padding: ", ";\n  overflow-y: auto;\n  ", "\n"])), function (props) {
+  return props.$size === Size.Small ? '104px' : props.$size === Size.Large ? '304px' : '208px';
+}, function (props) {
+  return props.$size === Size.Small ? '0 8px' : props.$size === Size.Large ? '0 16px' : '0 12px';
+}, scrollBarStyling(Size.Small));
+export var PopoverBottomSectionContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  height: ", ";  \n  display: flex;\n\n  .bottom-flex {\n    flex: 1;\n  }\n"])), function (props) {
+  return props.$size === Size.Small ? '64px' : props.$size === Size.Large ? '88px' : '72px';
+});
+var TextContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  margin: ", ";\n  flex-grow: 1;\n"])), function (props) {
+  return renderMargins(props.$note, props.$size);
+});
+var NoteContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n"])), function (props) {
+  return props.$size === Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme)) : props.$size === Size.Large ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme)) : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme));
+});
+var LabelContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n"])), function (props) {
+  return props.$size === Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, null) : props.$size === Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, null) : ComponentMStyling(ComponentTextStyle.Bold, null);
+});
+var CloseButtonContainer = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  margin: ", ";\n"])), function (props) {
+  return props.$size === Size.Small ? '4px 16px 4px 0' : props.$size === Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0';
+});
+var TextButtonContainer = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  margin: ", ";\n"])), function (props) {
+  return props.$size === Size.Small ? '8px 0 8px 16px' : props.$size === Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px';
+});
+var IconButtonContainer = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin: ", ";\n  display: flex;\n"])), function (props) {
+  return props.$size === Size.Small ? '8px 16px 8px 0' : props.$size === Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0';
+});
+export var PopoverWrapper = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  position: relative;\n\n  .pointer-space {\n    height: ", ";\n    width: ", ";\n    position: absolute;\n\n    ", ";\n    ", ";\n\n    ", ";\n    ", ";\n  }\n\n  ", "\n"])), function (props) {
+  return props.$position === Position.Top || props.$position === Position.Bottom ? '16px' : '100%';
+}, function (props) {
+  return props.$position === Position.Left || props.$position === Position.Right ? '16px' : '100%';
+}, function (props) {
+  return props.$position === Position.Left ? 'right:100%; bottom: 0%' : '';
+}, function (props) {
+  return props.$position === Position.Right ? 'left:100%; bottom: 0%' : '';
+}, function (props) {
+  return props.$position === Position.Top ? 'bottom: 100%' : '';
+}, function (props) {
+  return props.$position === Position.Bottom ? 'top: 100%' : '';
+}, function (props) {
+  return props.$showOnClick ? "".concat(PopoverContainer, " {\n        visibility: ").concat(props.$showPopover ? 'visible' : 'hidden', ";\n        opacity: ").concat(props.$showPopover ? '1' : '0', ";\n    }\n    cursor: pointer;") : "&:hover {\n      ".concat(PopoverContainer, " {\n        visibility: visible;\n        opacity: 1;\n      }\n    }");
+});
+var renderMargins = function renderMargins(isNotePresent, size) {
   if (isNotePresent) {
     return size === Size.Small ? '10px 16px' : size === Size.Large ? '14px 24px' : '12px 20px';
   } else {
     return size === Size.Small ? '18px 16px' : size === Size.Large ? '24px' : '20px';
   }
 };
-const renderArrowStyles = position => {
+var renderArrowStyles = function renderArrowStyles(position) {
   if (position === Position.Bottom) {
     return "height: 0px;\n            width: 0px;\n            border-top: 16px solid transparent;\n            border-right: 12px solid transparent;\n            border-bottom: 16px solid rgb(255,255,255);\n            border-left: 12px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(50% - 12px);\n            bottom: calc(100% - 1px);";
   }
@@ -45,29 +97,33 @@ const renderArrowStyles = position => {
 ;
 ;
 ;
-const Popover = _ref => {
+var Popover = function Popover(_ref) {
   var _bottomSectionProps$t, _bottomSectionProps$i;
-  let {
-    size = Size.Medium,
-    topSectionProps,
-    bottomSectionProps,
-    mainContent,
-    children,
-    position,
-    showOnClick = false,
-    showArrowPointer = false
-  } = _ref;
-  const [showPopover, setShowPopover] = React.useState(false);
-  const theme = useTheme();
-  const popoverRef = React.useRef();
-  React.useEffect(() => {
-    const checkIfClickedOutside = e => {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? Size.Medium : _ref$size,
+    topSectionProps = _ref.topSectionProps,
+    bottomSectionProps = _ref.bottomSectionProps,
+    mainContent = _ref.mainContent,
+    children = _ref.children,
+    position = _ref.position,
+    _ref$showOnClick = _ref.showOnClick,
+    showOnClick = _ref$showOnClick === void 0 ? false : _ref$showOnClick,
+    _ref$showArrowPointer = _ref.showArrowPointer,
+    showArrowPointer = _ref$showArrowPointer === void 0 ? false : _ref$showArrowPointer;
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    showPopover = _React$useState2[0],
+    setShowPopover = _React$useState2[1];
+  var theme = useTheme();
+  var popoverRef = React.useRef();
+  React.useEffect(function () {
+    var checkIfClickedOutside = function checkIfClickedOutside(e) {
       if (showPopover && popoverRef.current && !popoverRef.current.contains(e.target)) {
         setShowPopover(false);
       }
     };
     document.addEventListener('mousedown', checkIfClickedOutside);
-    return () => {
+    return function () {
       document.removeEventListener('mousedown', checkIfClickedOutside);
     };
   }, [showPopover]);
@@ -96,7 +152,9 @@ const Popover = _ref => {
           $size: size,
           "data-testid": 'closeBtn',
           children: /*#__PURE__*/_jsx(IconButton, {
-            action: () => setShowPopover(false),
+            action: function action() {
+              return setShowPopover(false);
+            },
             useTransparentBackground: true,
             iconColor: COLORS.getColor('neutral_600', theme),
             variant: "secondary",
@@ -124,17 +182,21 @@ const Popover = _ref => {
         }), /*#__PURE__*/_jsx(IconButtonContainer, {
           $size: size,
           "data-testid": 'iconBtn',
-          children: bottomSectionProps === null || bottomSectionProps === void 0 || (_bottomSectionProps$i = bottomSectionProps.iconButtons) === null || _bottomSectionProps$i === void 0 ? void 0 : _bottomSectionProps$i.map(iconButton => /*#__PURE__*/_jsx(IconButton, {
-            action: iconButton.action,
-            variant: "secondary",
-            shape: "circular",
-            useTransparentBackground: true,
-            children: iconButton.icon
-          }))
+          children: bottomSectionProps === null || bottomSectionProps === void 0 ? void 0 : (_bottomSectionProps$i = bottomSectionProps.iconButtons) === null || _bottomSectionProps$i === void 0 ? void 0 : _bottomSectionProps$i.map(function (iconButton) {
+            return /*#__PURE__*/_jsx(IconButton, {
+              action: iconButton.action,
+              variant: "secondary",
+              shape: "circular",
+              useTransparentBackground: true,
+              children: iconButton.icon
+            });
+          })
         })]
       })]
     }), /*#__PURE__*/_jsxs("div", {
-      onClick: () => showOnClick && setShowPopover(!showPopover),
+      onClick: function onClick() {
+        return showOnClick && setShowPopover(!showPopover);
+      },
       children: [children, /*#__PURE__*/_jsx("div", {
         className: "pointer-space"
       })]

package/dist/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","names":["React","styled","useTheme","COLORS","ComponentTextStyle","ComponentXSStyling","Button","IconButton","SystemIcons","BOXSHADOWS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","scrollBarStyling","Z_INDEXES","Position","Size","jsx","_jsx","jsxs","_jsxs","PopoverContainer","div","_templateObject","_taggedTemplateLiteral","props","$size","Small","Large","getColor","theme","BOXSHADOW_CENTERED","popover","$position","Bottom","Top","Left","Right","$showArrowPointer","renderArrowStyles","PopoverTopSectionContainer","_templateObject2","PopoverMiddleSectionContainer","_templateObject3","PopoverBottomSectionContainer","_templateObject4","TextContainer","_templateObject5","renderMargins","$note","NoteContainer","_templateObject6","Regular","LabelContainer","_templateObject7","Bold","CloseButtonContainer","_templateObject8","TextButtonContainer","_templateObject9","IconButtonContainer","_templateObject10","PopoverWrapper","_templateObject11","$showOnClick","concat","$showPopover","isNotePresent","size","position","Popover","_ref","_bottomSectionProps$t","_bottomSectionProps$i","Medium","topSectionProps","bottomSectionProps","mainContent","children","showOnClick","showArrowPointer","showPopover","setShowPopover","useState","popoverRef","useRef","useEffect","checkIfClickedOutside","e","current","contains","target","document","addEventListener","removeEventListener","ref","note","text","action","useTransparentBackground","iconColor","variant","shape","Close","textButton","icon","onClick","label","className","iconButtons","map","iconButton","propTypes","_pt","string","isRequired","arrayOf","node","func","bool"],"sources":["../../src/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\r\nimport { Button, IconButton } from '../Button';\r\nimport { SystemIcons } from '../icons';\r\nimport { BOXSHADOWS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling, scrollBarStyling, Z_INDEXES } from '../styles';\r\nimport { Position, Size } from '../types';\r\n\r\nexport const PopoverContainer = styled.div<{ $size: Size; $position: Position; $showArrowPointer: boolean }>`\r\n  //height: ${(props) => (props.$size === Size.Small ? '240px' : props.$size === Size.Large ? '480px' : '360px')};\r\n  min-width: ${(props) => (props.$size === Size.Small ? '320px' : props.$size === Size.Large ? '640px' : '480px')};\r\n  border-radius: 4px;\r\n  background: ${props => COLORS.getColor('white', props.theme)};\r\n  cursor: default;\r\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\r\n\r\n  position: absolute;  \r\n  visibility: hidden;\r\n  opacity: 0;\r\n  z-index: ${Z_INDEXES.popover};\r\n\r\n  ${(props) => (props.$position == Position.Bottom ? 'right: 50%; top: calc(100% + 16px); transform: translateX(50%);' : '')}\r\n  ${(props) => (props.$position == Position.Top ? 'right: 50%; bottom: calc(100% + 16px); transform: translateX(50%);' : '')}\r\n\r\n  ${(props) => (props.$position == Position.Left ? 'bottom: 50%; right: calc(100% + 16px); transform: translateY(50%);' : '')}\r\n  ${(props) => (props.$position == Position.Right ? 'bottom: 50%; left: calc(100% + 16px); transform: translateY(50%);' : '')}\r\n\r\n  &::after {\r\n    ${(props) => (props.$showArrowPointer ? renderArrowStyles(props.$position) : '')}\r\n`;\r\n\r\nexport const PopoverTopSectionContainer = styled.div<{ $size: Size }>`\r\n  height: ${(props) => (props.$size === Size.Small ? '56px' : props.$size === Size.Large ? '72px' : '64px')};\r\n  display: flex;\r\n`;\r\n\r\nexport const PopoverMiddleSectionContainer = styled.div<{ $size: Size }>`\r\n  margin: 8px;\r\n  height: ${(props) => (props.$size === Size.Small ? '104px' : props.$size === Size.Large ? '304px' : '208px')};\r\n  padding: ${(props) => (props.$size === Size.Small ? '0 8px' : props.$size === Size.Large ? '0 16px' : '0 12px')};\r\n  overflow-y: auto;\r\n  ${scrollBarStyling(Size.Small)}\r\n`;\r\n\r\nexport const PopoverBottomSectionContainer = styled.div<{ $size: Size }>`\r\n  height: ${(props) => (props.$size === Size.Small ? '64px' : props.$size === Size.Large ? '88px' : '72px')};  \r\n  display: flex;\r\n\r\n  .bottom-flex {\r\n    flex: 1;\r\n  }\r\n`;\r\n\r\nconst TextContainer = styled.div<{ $note: boolean; $size: Size }>`\r\n  display: flex;\r\n  flex-direction: column;\r\n  margin: ${(props) => renderMargins(props.$note, props.$size)};\r\n  flex-grow: 1;\r\n`;\r\n\r\nconst NoteContainer = styled.div<{ $size: Size }>`\r\n  ${(props) =>\r\n    props.$size === Size.Small\r\n      ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))\r\n      : props.$size === Size.Large\r\n      ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))\r\n      : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n`;\r\n\r\nconst LabelContainer = styled.div<{ $size: Size }>`\r\n  ${(props) =>\r\n    props.$size === Size.Small\r\n      ? ComponentSStyling(ComponentTextStyle.Bold, null)\r\n      : props.$size === Size.Large\r\n      ? ComponentLStyling(ComponentTextStyle.Bold, null)\r\n      : ComponentMStyling(ComponentTextStyle.Bold, null)}\r\n`;\r\n\r\nconst CloseButtonContainer = styled.div<{ $size: Size }>`\r\n  margin: ${(props) => (props.$size === Size.Small ? '4px 16px 4px 0' : props.$size === Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0')};\r\n`;\r\n\r\nconst TextButtonContainer = styled.div<{ $size: Size }>`\r\n  margin: ${(props) => (props.$size === Size.Small ? '8px 0 8px 16px' : props.$size === Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px')};\r\n`;\r\n\r\nconst IconButtonContainer = styled.div<{ $size: Size }>`\r\n  margin: ${(props) => (props.$size === Size.Small ? '8px 16px 8px 0' : props.$size === Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0')};\r\n  display: flex;\r\n`;\r\n\r\nexport const PopoverWrapper = styled.div<{ $position: Position; $showOnClick: boolean; $showPopover: boolean }>`\r\n  position: relative;\r\n\r\n  .pointer-space {\r\n    height: ${(props) => (props.$position === Position.Top || props.$position === Position.Bottom ? '16px' : '100%')};\r\n    width: ${(props) => (props.$position === Position.Left || props.$position === Position.Right ? '16px' : '100%')};\r\n    position: absolute;\r\n\r\n    ${(props) => (props.$position === Position.Left ? 'right:100%; bottom: 0%' : '')};\r\n    ${(props) => (props.$position === Position.Right ? 'left:100%; bottom: 0%' : '')};\r\n\r\n    ${(props) => (props.$position === Position.Top ? 'bottom: 100%' : '')};\r\n    ${(props) => (props.$position === Position.Bottom ? 'top: 100%' : '')};\r\n  }\r\n\r\n  ${(props) =>\r\n    props.$showOnClick\r\n      ? `${PopoverContainer} {\r\n        visibility: ${props.$showPopover ? 'visible' : 'hidden'};\r\n        opacity: ${props.$showPopover ? '1' : '0'};\r\n    }\r\n    cursor: pointer;`\r\n      : `&:hover {\r\n      ${PopoverContainer} {\r\n        visibility: visible;\r\n        opacity: 1;\r\n      }\r\n    }`}\r\n`;\r\n\r\nconst renderMargins = (isNotePresent: boolean, size: Size): string => {\r\n  if (isNotePresent) {\r\n    return size === Size.Small ? '10px 16px' : size === Size.Large ? '14px 24px' : '12px 20px';\r\n  } else {\r\n    return size === Size.Small ? '18px 16px' : size === Size.Large ? '24px' : '20px';\r\n  }\r\n};\r\n\r\nconst renderArrowStyles = (position: Position) => {\r\n  if (position === Position.Bottom) {\r\n    return `height: 0px;\r\n            width: 0px;\r\n            border-top: 16px solid transparent;\r\n            border-right: 12px solid transparent;\r\n            border-bottom: 16px solid rgb(255,255,255);\r\n            border-left: 12px solid transparent;\r\n            content: \"\";\r\n            position: absolute;\r\n            right: calc(50% - 12px);\r\n            bottom: calc(100% - 1px);`;\r\n  }\r\n\r\n  if (position === Position.Top) {\r\n    return `height: 0px;\r\n            width: 0px;\r\n            border-top: 16px solid rgb(255,255,255);\r\n            border-right: 12px solid transparent;\r\n            border-bottom: 16px solid transparent;\r\n            border-left: 12px solid transparent;\r\n            content: \"\";\r\n            position: absolute;\r\n            right: calc(50% - 12px);\r\n            top: calc(100% - 1px);`;\r\n  }\r\n\r\n  if (position === Position.Left) {\r\n    return `height: 0px;\r\n            width: 0px;\r\n            border-top: 12px solid transparent;\r\n            border-right: 16px solid transparent;\r\n            border-bottom: 12px solid transparent;\r\n            border-left: 16px solid rgb(255,255,255);\r\n            content: \"\";\r\n            position: absolute;\r\n            left: calc(100% - 1px);\r\n            bottom: calc(50% - 12px);`;\r\n  }\r\n\r\n  if (position === Position.Right) {\r\n    return `height: 0px;\r\n            width: 0px;\r\n            border-top: 12px solid transparent;\r\n            border-right: 16px solid rgb(255,255,255);\r\n            border-bottom: 12px solid transparent;\r\n            border-left: 16px solid transparent;\r\n            content: \"\";\r\n            position: absolute;\r\n            right: calc(100% - 1px);\r\n            bottom: calc(50% - 12px);`;\r\n  }\r\n};\r\n\r\nexport interface PopoverTopSectionProps {\r\n  /**\r\n   * Required. The main text to be displayed in the top section of the popover.\r\n   */\r\n  text: string;\r\n\r\n  /**\r\n   * Optional. A note to be displayed below the main text in the top section of the popover.\r\n   */\r\n  note?: string;\r\n};\r\n\r\nexport interface PopoverActionButtonProps {\r\n  /**\r\n   * Required. The icon to be displayed on the button.\r\n   */\r\n  icon: React.ReactNode;\r\n\r\n  /**\r\n   * Required. The handler function to be called when the button is clicked.\r\n   */\r\n  action: () => void;\r\n\r\n  /**\r\n   * Optional. The label for the button. If provided, the button will display this text.\r\n   */\r\n  label?: string;\r\n};\r\n\r\nexport interface PopoverBottomSectionProps {\r\n  /**\r\n   * Optional. An array of PopoverActionButtonProps objects.\r\n   * Each object represents an icon button to be displayed in the bottom section of the popover.\r\n   */\r\n  iconButtons?: PopoverActionButtonProps[];\r\n\r\n  /**\r\n   * Optional. A PopoverActionButtonProps object representing a text button to be displayed in the bottom section of the popover.\r\n   */\r\n  textButton?: PopoverActionButtonProps;\r\n};\r\n\r\nexport interface PopoverProps {\r\n  /**\r\n   * Optional. The size of the popover. It can be 'Small', 'Medium', or 'Large'.\r\n   * Defaults to 'Medium' if not specified.\r\n   */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n\r\n  /**\r\n   * Optional. Properties for the top section of the popover.\r\n   */\r\n  topSectionProps?: PopoverTopSectionProps;\r\n\r\n  /**\r\n   * Optional. Properties for the bottom section of the popover.\r\n   */\r\n  bottomSectionProps?: PopoverBottomSectionProps;\r\n\r\n  /**\r\n   * Required. The main content to be displayed in the popover.\r\n   */\r\n  mainContent: React.ReactNode;\r\n\r\n  /**\r\n   * Required. The children to be rendered inside the popover.\r\n   */\r\n  children: React.ReactNode;\r\n\r\n  /**\r\n   * Required. The position of the popover relative to the target element.\r\n   * It can be 'Top', 'Bottom', 'Right', or 'Left'.\r\n   */\r\n  position: Position.Top | Position.Bottom | Position.Right | Position.Left;\r\n\r\n  /**\r\n   * Required. A boolean indicating whether the popover should be shown when the target element is clicked. Defaults to 'false', meaning that popover will be shown on mouse hover.\r\n   */\r\n  showOnClick: boolean;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether an arrow pointer should be shown on the popover.\r\n   * Defaults to 'false' if not specified.\r\n   */\r\n  showArrowPointer?: boolean;\r\n};\r\n\r\nconst Popover: React.FunctionComponent<PopoverProps> = ({\r\n  size = Size.Medium,\r\n  topSectionProps,\r\n  bottomSectionProps,\r\n  mainContent,\r\n  children,\r\n  position,\r\n  showOnClick = false,\r\n  showArrowPointer = false,\r\n}) => {\r\n  const [showPopover, setShowPopover] = React.useState(false);\r\n  const theme = useTheme();\r\n  const popoverRef = React.useRef<any>();\r\n\r\n  React.useEffect(() => {\r\n    const checkIfClickedOutside = (e: { target: any }) => {\r\n      if (showPopover && popoverRef.current && !popoverRef.current.contains(e.target)) {\r\n        setShowPopover(false);\r\n      }\r\n    };\r\n\r\n    document.addEventListener('mousedown', checkIfClickedOutside);\r\n\r\n    return () => {\r\n      document.removeEventListener('mousedown', checkIfClickedOutside);\r\n    };\r\n  }, [showPopover]);\r\n\r\n  return (\r\n    <PopoverWrapper $position={position} $showOnClick={showOnClick} $showPopover={showPopover}>\r\n      <PopoverContainer $size={size} $position={position} ref={popoverRef} $showArrowPointer={showArrowPointer}>\r\n        {!!topSectionProps && (\r\n          <PopoverTopSectionContainer $size={size}>\r\n            <TextContainer $note={!!topSectionProps?.note} $size={size}>\r\n              {topSectionProps?.note && <NoteContainer $size={size}>{topSectionProps.note}</NoteContainer>}\r\n              <LabelContainer $size={size}>{topSectionProps?.text}</LabelContainer>\r\n            </TextContainer>\r\n\r\n            {showOnClick && (\r\n              <CloseButtonContainer $size={size} data-testid={'closeBtn'}>\r\n                <IconButton action={() => setShowPopover(false)} useTransparentBackground iconColor={COLORS.getColor('neutral_600', theme)} variant=\"secondary\" shape=\"circular\">\r\n                  <SystemIcons.Close />\r\n                </IconButton>\r\n              </CloseButtonContainer>\r\n            )}\r\n          </PopoverTopSectionContainer>\r\n        )}\r\n\r\n        <PopoverMiddleSectionContainer $size={size}>{mainContent}</PopoverMiddleSectionContainer>\r\n\r\n        {!!bottomSectionProps && (\r\n          <PopoverBottomSectionContainer $size={size}>\r\n            {!!bottomSectionProps?.textButton?.icon && (\r\n              <TextButtonContainer $size={size} data-testid={'textBtn'}>\r\n                <Button size={size} variant=\"secondary\" icon={bottomSectionProps.textButton.icon} onClick={bottomSectionProps.textButton.action}>\r\n                  {bottomSectionProps.textButton.label}\r\n                </Button>\r\n              </TextButtonContainer>\r\n            )}\r\n\r\n            <div className=\"bottom-flex\" />\r\n\r\n            <IconButtonContainer $size={size} data-testid={'iconBtn'}>\r\n              {bottomSectionProps?.iconButtons?.map((iconButton) => (\r\n                <IconButton action={iconButton.action} variant=\"secondary\" shape=\"circular\" useTransparentBackground>\r\n                  {iconButton.icon}\r\n                </IconButton>\r\n              ))}\r\n            </IconButtonContainer>\r\n          </PopoverBottomSectionContainer>\r\n        )}\r\n      </PopoverContainer>\r\n\r\n      <div onClick={() => showOnClick && setShowPopover(!showPopover)}>\r\n        {children}\r\n\r\n        <div className=\"pointer-space\" />\r\n      </div>\r\n    </PopoverWrapper>\r\n  );\r\n};\r\n\r\nexport default Popover;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Popover.js","names":["React","styled","useTheme","COLORS","ComponentTextStyle","ComponentXSStyling","Button","IconButton","SystemIcons","BOXSHADOWS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","scrollBarStyling","Z_INDEXES","Position","Size","jsx","_jsx","jsxs","_jsxs","PopoverContainer","div","_templateObject","_taggedTemplateLiteral","props","$size","Small","Large","getColor","theme","BOXSHADOW_CENTERED","popover","$position","Bottom","Top","Left","Right","$showArrowPointer","renderArrowStyles","PopoverTopSectionContainer","_templateObject2","PopoverMiddleSectionContainer","_templateObject3","PopoverBottomSectionContainer","_templateObject4","TextContainer","_templateObject5","renderMargins","$note","NoteContainer","_templateObject6","Regular","LabelContainer","_templateObject7","Bold","CloseButtonContainer","_templateObject8","TextButtonContainer","_templateObject9","IconButtonContainer","_templateObject10","PopoverWrapper","_templateObject11","$showOnClick","concat","$showPopover","isNotePresent","size","position","Popover","_ref","_bottomSectionProps$t","_bottomSectionProps$i","_ref$size","Medium","topSectionProps","bottomSectionProps","mainContent","children","_ref$showOnClick","showOnClick","_ref$showArrowPointer","showArrowPointer","_React$useState","useState","_React$useState2","_slicedToArray","showPopover","setShowPopover","popoverRef","useRef","useEffect","checkIfClickedOutside","e","current","contains","target","document","addEventListener","removeEventListener","ref","note","text","action","useTransparentBackground","iconColor","variant","shape","Close","textButton","icon","onClick","label","className","iconButtons","map","iconButton","propTypes","_pt","string","isRequired","arrayOf","node","func","bool"],"sources":["../../src/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\r\nimport { Button, IconButton } from '../Button';\r\nimport { SystemIcons } from '../icons';\r\nimport { BOXSHADOWS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling, scrollBarStyling, Z_INDEXES } from '../styles';\r\nimport { Position, Size } from '../types';\r\n\r\nexport const PopoverContainer = styled.div<{ $size: Size; $position: Position; $showArrowPointer: boolean }>`\r\n  //height: ${(props) => (props.$size === Size.Small ? '240px' : props.$size === Size.Large ? '480px' : '360px')};\r\n  min-width: ${(props) => (props.$size === Size.Small ? '320px' : props.$size === Size.Large ? '640px' : '480px')};\r\n  border-radius: 4px;\r\n  background: ${props => COLORS.getColor('white', props.theme)};\r\n  cursor: default;\r\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\r\n\r\n  position: absolute;  \r\n  visibility: hidden;\r\n  opacity: 0;\r\n  z-index: ${Z_INDEXES.popover};\r\n\r\n  ${(props) => (props.$position == Position.Bottom ? 'right: 50%; top: calc(100% + 16px); transform: translateX(50%);' : '')}\r\n  ${(props) => (props.$position == Position.Top ? 'right: 50%; bottom: calc(100% + 16px); transform: translateX(50%);' : '')}\r\n\r\n  ${(props) => (props.$position == Position.Left ? 'bottom: 50%; right: calc(100% + 16px); transform: translateY(50%);' : '')}\r\n  ${(props) => (props.$position == Position.Right ? 'bottom: 50%; left: calc(100% + 16px); transform: translateY(50%);' : '')}\r\n\r\n  &::after {\r\n    ${(props) => (props.$showArrowPointer ? renderArrowStyles(props.$position) : '')}\r\n`;\r\n\r\nexport const PopoverTopSectionContainer = styled.div<{ $size: Size }>`\r\n  height: ${(props) => (props.$size === Size.Small ? '56px' : props.$size === Size.Large ? '72px' : '64px')};\r\n  display: flex;\r\n`;\r\n\r\nexport const PopoverMiddleSectionContainer = styled.div<{ $size: Size }>`\r\n  margin: 8px;\r\n  height: ${(props) => (props.$size === Size.Small ? '104px' : props.$size === Size.Large ? '304px' : '208px')};\r\n  padding: ${(props) => (props.$size === Size.Small ? '0 8px' : props.$size === Size.Large ? '0 16px' : '0 12px')};\r\n  overflow-y: auto;\r\n  ${scrollBarStyling(Size.Small)}\r\n`;\r\n\r\nexport const PopoverBottomSectionContainer = styled.div<{ $size: Size }>`\r\n  height: ${(props) => (props.$size === Size.Small ? '64px' : props.$size === Size.Large ? '88px' : '72px')};  \r\n  display: flex;\r\n\r\n  .bottom-flex {\r\n    flex: 1;\r\n  }\r\n`;\r\n\r\nconst TextContainer = styled.div<{ $note: boolean; $size: Size }>`\r\n  display: flex;\r\n  flex-direction: column;\r\n  margin: ${(props) => renderMargins(props.$note, props.$size)};\r\n  flex-grow: 1;\r\n`;\r\n\r\nconst NoteContainer = styled.div<{ $size: Size }>`\r\n  ${(props) =>\r\n    props.$size === Size.Small\r\n      ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))\r\n      : props.$size === Size.Large\r\n      ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))\r\n      : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n`;\r\n\r\nconst LabelContainer = styled.div<{ $size: Size }>`\r\n  ${(props) =>\r\n    props.$size === Size.Small\r\n      ? ComponentSStyling(ComponentTextStyle.Bold, null)\r\n      : props.$size === Size.Large\r\n      ? ComponentLStyling(ComponentTextStyle.Bold, null)\r\n      : ComponentMStyling(ComponentTextStyle.Bold, null)}\r\n`;\r\n\r\nconst CloseButtonContainer = styled.div<{ $size: Size }>`\r\n  margin: ${(props) => (props.$size === Size.Small ? '4px 16px 4px 0' : props.$size === Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0')};\r\n`;\r\n\r\nconst TextButtonContainer = styled.div<{ $size: Size }>`\r\n  margin: ${(props) => (props.$size === Size.Small ? '8px 0 8px 16px' : props.$size === Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px')};\r\n`;\r\n\r\nconst IconButtonContainer = styled.div<{ $size: Size }>`\r\n  margin: ${(props) => (props.$size === Size.Small ? '8px 16px 8px 0' : props.$size === Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0')};\r\n  display: flex;\r\n`;\r\n\r\nexport const PopoverWrapper = styled.div<{ $position: Position; $showOnClick: boolean; $showPopover: boolean }>`\r\n  position: relative;\r\n\r\n  .pointer-space {\r\n    height: ${(props) => (props.$position === Position.Top || props.$position === Position.Bottom ? '16px' : '100%')};\r\n    width: ${(props) => (props.$position === Position.Left || props.$position === Position.Right ? '16px' : '100%')};\r\n    position: absolute;\r\n\r\n    ${(props) => (props.$position === Position.Left ? 'right:100%; bottom: 0%' : '')};\r\n    ${(props) => (props.$position === Position.Right ? 'left:100%; bottom: 0%' : '')};\r\n\r\n    ${(props) => (props.$position === Position.Top ? 'bottom: 100%' : '')};\r\n    ${(props) => (props.$position === Position.Bottom ? 'top: 100%' : '')};\r\n  }\r\n\r\n  ${(props) =>\r\n    props.$showOnClick\r\n      ? `${PopoverContainer} {\r\n        visibility: ${props.$showPopover ? 'visible' : 'hidden'};\r\n        opacity: ${props.$showPopover ? '1' : '0'};\r\n    }\r\n    cursor: pointer;`\r\n      : `&:hover {\r\n      ${PopoverContainer} {\r\n        visibility: visible;\r\n        opacity: 1;\r\n      }\r\n    }`}\r\n`;\r\n\r\nconst renderMargins = (isNotePresent: boolean, size: Size): string => {\r\n  if (isNotePresent) {\r\n    return size === Size.Small ? '10px 16px' : size === Size.Large ? '14px 24px' : '12px 20px';\r\n  } else {\r\n    return size === Size.Small ? '18px 16px' : size === Size.Large ? '24px' : '20px';\r\n  }\r\n};\r\n\r\nconst renderArrowStyles = (position: Position) => {\r\n  if (position === Position.Bottom) {\r\n    return `height: 0px;\r\n            width: 0px;\r\n            border-top: 16px solid transparent;\r\n            border-right: 12px solid transparent;\r\n            border-bottom: 16px solid rgb(255,255,255);\r\n            border-left: 12px solid transparent;\r\n            content: \"\";\r\n            position: absolute;\r\n            right: calc(50% - 12px);\r\n            bottom: calc(100% - 1px);`;\r\n  }\r\n\r\n  if (position === Position.Top) {\r\n    return `height: 0px;\r\n            width: 0px;\r\n            border-top: 16px solid rgb(255,255,255);\r\n            border-right: 12px solid transparent;\r\n            border-bottom: 16px solid transparent;\r\n            border-left: 12px solid transparent;\r\n            content: \"\";\r\n            position: absolute;\r\n            right: calc(50% - 12px);\r\n            top: calc(100% - 1px);`;\r\n  }\r\n\r\n  if (position === Position.Left) {\r\n    return `height: 0px;\r\n            width: 0px;\r\n            border-top: 12px solid transparent;\r\n            border-right: 16px solid transparent;\r\n            border-bottom: 12px solid transparent;\r\n            border-left: 16px solid rgb(255,255,255);\r\n            content: \"\";\r\n            position: absolute;\r\n            left: calc(100% - 1px);\r\n            bottom: calc(50% - 12px);`;\r\n  }\r\n\r\n  if (position === Position.Right) {\r\n    return `height: 0px;\r\n            width: 0px;\r\n            border-top: 12px solid transparent;\r\n            border-right: 16px solid rgb(255,255,255);\r\n            border-bottom: 12px solid transparent;\r\n            border-left: 16px solid transparent;\r\n            content: \"\";\r\n            position: absolute;\r\n            right: calc(100% - 1px);\r\n            bottom: calc(50% - 12px);`;\r\n  }\r\n};\r\n\r\nexport interface PopoverTopSectionProps {\r\n  /**\r\n   * Required. The main text to be displayed in the top section of the popover.\r\n   */\r\n  text: string;\r\n\r\n  /**\r\n   * Optional. A note to be displayed below the main text in the top section of the popover.\r\n   */\r\n  note?: string;\r\n};\r\n\r\nexport interface PopoverActionButtonProps {\r\n  /**\r\n   * Required. The icon to be displayed on the button.\r\n   */\r\n  icon: React.ReactNode;\r\n\r\n  /**\r\n   * Required. The handler function to be called when the button is clicked.\r\n   */\r\n  action: () => void;\r\n\r\n  /**\r\n   * Optional. The label for the button. If provided, the button will display this text.\r\n   */\r\n  label?: string;\r\n};\r\n\r\nexport interface PopoverBottomSectionProps {\r\n  /**\r\n   * Optional. An array of PopoverActionButtonProps objects.\r\n   * Each object represents an icon button to be displayed in the bottom section of the popover.\r\n   */\r\n  iconButtons?: PopoverActionButtonProps[];\r\n\r\n  /**\r\n   * Optional. A PopoverActionButtonProps object representing a text button to be displayed in the bottom section of the popover.\r\n   */\r\n  textButton?: PopoverActionButtonProps;\r\n};\r\n\r\nexport interface PopoverProps {\r\n  /**\r\n   * Optional. The size of the popover. It can be 'Small', 'Medium', or 'Large'.\r\n   * Defaults to 'Medium' if not specified.\r\n   */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n\r\n  /**\r\n   * Optional. Properties for the top section of the popover.\r\n   */\r\n  topSectionProps?: PopoverTopSectionProps;\r\n\r\n  /**\r\n   * Optional. Properties for the bottom section of the popover.\r\n   */\r\n  bottomSectionProps?: PopoverBottomSectionProps;\r\n\r\n  /**\r\n   * Required. The main content to be displayed in the popover.\r\n   */\r\n  mainContent: React.ReactNode;\r\n\r\n  /**\r\n   * Required. The children to be rendered inside the popover.\r\n   */\r\n  children: React.ReactNode;\r\n\r\n  /**\r\n   * Required. The position of the popover relative to the target element.\r\n   * It can be 'Top', 'Bottom', 'Right', or 'Left'.\r\n   */\r\n  position: Position.Top | Position.Bottom | Position.Right | Position.Left;\r\n\r\n  /**\r\n   * Required. A boolean indicating whether the popover should be shown when the target element is clicked. Defaults to 'false', meaning that popover will be shown on mouse hover.\r\n   */\r\n  showOnClick: boolean;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether an arrow pointer should be shown on the popover.\r\n   * Defaults to 'false' if not specified.\r\n   */\r\n  showArrowPointer?: boolean;\r\n};\r\n\r\nconst Popover: React.FunctionComponent<PopoverProps> = ({\r\n  size = Size.Medium,\r\n  topSectionProps,\r\n  bottomSectionProps,\r\n  mainContent,\r\n  children,\r\n  position,\r\n  showOnClick = false,\r\n  showArrowPointer = false,\r\n}) => {\r\n  const [showPopover, setShowPopover] = React.useState(false);\r\n  const theme = useTheme();\r\n  const popoverRef = React.useRef<any>();\r\n\r\n  React.useEffect(() => {\r\n    const checkIfClickedOutside = (e: { target: any }) => {\r\n      if (showPopover && popoverRef.current && !popoverRef.current.contains(e.target)) {\r\n        setShowPopover(false);\r\n      }\r\n    };\r\n\r\n    document.addEventListener('mousedown', checkIfClickedOutside);\r\n\r\n    return () => {\r\n      document.removeEventListener('mousedown', checkIfClickedOutside);\r\n    };\r\n  }, [showPopover]);\r\n\r\n  return (\r\n    <PopoverWrapper $position={position} $showOnClick={showOnClick} $showPopover={showPopover}>\r\n      <PopoverContainer $size={size} $position={position} ref={popoverRef} $showArrowPointer={showArrowPointer}>\r\n        {!!topSectionProps && (\r\n          <PopoverTopSectionContainer $size={size}>\r\n            <TextContainer $note={!!topSectionProps?.note} $size={size}>\r\n              {topSectionProps?.note && <NoteContainer $size={size}>{topSectionProps.note}</NoteContainer>}\r\n              <LabelContainer $size={size}>{topSectionProps?.text}</LabelContainer>\r\n            </TextContainer>\r\n\r\n            {showOnClick && (\r\n              <CloseButtonContainer $size={size} data-testid={'closeBtn'}>\r\n                <IconButton action={() => setShowPopover(false)} useTransparentBackground iconColor={COLORS.getColor('neutral_600', theme)} variant=\"secondary\" shape=\"circular\">\r\n                  <SystemIcons.Close />\r\n                </IconButton>\r\n              </CloseButtonContainer>\r\n            )}\r\n          </PopoverTopSectionContainer>\r\n        )}\r\n\r\n        <PopoverMiddleSectionContainer $size={size}>{mainContent}</PopoverMiddleSectionContainer>\r\n\r\n        {!!bottomSectionProps && (\r\n          <PopoverBottomSectionContainer $size={size}>\r\n            {!!bottomSectionProps?.textButton?.icon && (\r\n              <TextButtonContainer $size={size} data-testid={'textBtn'}>\r\n                <Button size={size} variant=\"secondary\" icon={bottomSectionProps.textButton.icon} onClick={bottomSectionProps.textButton.action}>\r\n                  {bottomSectionProps.textButton.label}\r\n                </Button>\r\n              </TextButtonContainer>\r\n            )}\r\n\r\n            <div className=\"bottom-flex\" />\r\n\r\n            <IconButtonContainer $size={size} data-testid={'iconBtn'}>\r\n              {bottomSectionProps?.iconButtons?.map((iconButton) => (\r\n                <IconButton action={iconButton.action} variant=\"secondary\" shape=\"circular\" useTransparentBackground>\r\n                  {iconButton.icon}\r\n                </IconButton>\r\n              ))}\r\n            </IconButtonContainer>\r\n          </PopoverBottomSectionContainer>\r\n        )}\r\n      </PopoverContainer>\r\n\r\n      <div onClick={() => showOnClick && setShowPopover(!showPopover)}>\r\n        {children}\r\n\r\n        <div className=\"pointer-space\" />\r\n      </div>\r\n    </PopoverWrapper>\r\n  );\r\n};\r\n\r\nexport default Popover;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Popover/index.cjs

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "Popover", {
   enumerable: true,
-  get: function () {
-    return _Popover.default;
+  get: function get() {
+    return _Popover["default"];
   }
 });
 var _Popover = _interopRequireDefault(require("./Popover"));

package/dist/ProfileButton/ProfileButton.cjs

@@ -1,10 +1,11 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.ProfileButtonContainer = void 0;
+exports["default"] = exports.ProfileButtonContainer = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
@@ -16,30 +17,37 @@ var _Iconbutton = require("../Button/Iconbutton");
 var _NotificationDot = require("../NotificationDot");
 var _styles = require("../styles");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["portraitSrc", "icon", "initials", "onClick", "disabled", "notificationVariant", "className", "tabIndex"];
+var _excluded = ["portraitSrc", "icon", "initials", "onClick", "disabled", "notificationVariant", "className", "tabIndex"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-const PortraitOverlay = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ", ";\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n"])), props => _.COLORS.getColor('black', props.theme));
-const ProfileButtonContainer = exports.ProfileButtonContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 48px;\n  height: 48px;\n  display: inline;\n  user-select: none;\n  \n  ", " {\n    display: ", ";\n\n    ", " {\n      display: inline;\n    }\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ", " {\n        background-color: ", ";\n\n        svg, svg path {\n          fill: ", ";\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ", " {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ", " {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n"])), _Iconbutton.IconButtonStyledPrimary, props => props.$hideOnLowWidth ? 'none' : 'inline', _styles.BREAKPOINTS.MEDIUM, _Iconbutton.IconButtonContentStyles, props => _.COLORS.getColor('neutral_100', props.theme), props => _.COLORS.getColor('neutral_300', props.theme), PortraitOverlay, PortraitOverlay);
-const NotificationContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n"])));
-const ImageWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  width: 36px;\n  height: 36px;\n  position: relative;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n"])));
-const ProfileButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-      portraitSrc,
-      icon,
-      initials,
-      onClick,
-      disabled,
-      notificationVariant,
-      className,
-      tabIndex
-    } = _ref,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  const theme = (0, _styledComponents.useTheme)();
-  const renderIcon = () => {
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var PortraitOverlay = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ", ";\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n"])), function (props) {
+  return _.COLORS.getColor('black', props.theme);
+});
+var ProfileButtonContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 48px;\n  height: 48px;\n  display: inline;\n  user-select: none;\n  \n  ", " {\n    display: ", ";\n\n    ", " {\n      display: inline;\n    }\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ", " {\n        background-color: ", ";\n\n        svg, svg path {\n          fill: ", ";\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ", " {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ", " {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n"])), _Iconbutton.IconButtonStyledPrimary, function (props) {
+  return props.$hideOnLowWidth ? 'none' : 'inline';
+}, _styles.BREAKPOINTS.MEDIUM, _Iconbutton.IconButtonContentStyles, function (props) {
+  return _.COLORS.getColor('neutral_100', props.theme);
+}, function (props) {
+  return _.COLORS.getColor('neutral_300', props.theme);
+}, PortraitOverlay, PortraitOverlay);
+exports.ProfileButtonContainer = ProfileButtonContainer;
+var NotificationContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n"])));
+var ImageWrapper = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 36px;\n  height: 36px;\n  position: relative;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n"])));
+var ProfileButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var portraitSrc = _ref.portraitSrc,
+    icon = _ref.icon,
+    initials = _ref.initials,
+    onClick = _ref.onClick,
+    disabled = _ref.disabled,
+    notificationVariant = _ref.notificationVariant,
+    className = _ref.className,
+    tabIndex = _ref.tabIndex,
+    rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var theme = (0, _styledComponents.useTheme)();
+  var renderIcon = function renderIcon() {
     return portraitSrc && /*#__PURE__*/(0, _jsxRuntime.jsxs)(ImageWrapper, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
         src: portraitSrc
@@ -73,11 +81,12 @@ const ProfileButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   });
 });
 ProfileButton.propTypes = {
-  portraitSrc: _propTypes.default.string,
-  icon: _propTypes.default.node,
-  initials: _propTypes.default.string,
-  onClick: _propTypes.default.func.isRequired,
-  notificationVariant: _propTypes.default.oneOf(['positive', 'critical'])
+  portraitSrc: _propTypes["default"].string,
+  icon: _propTypes["default"].node,
+  initials: _propTypes["default"].string,
+  onClick: _propTypes["default"].func.isRequired,
+  notificationVariant: _propTypes["default"].oneOf(['positive', 'critical'])
 };
-var _default = exports.default = ProfileButton;
+var _default = ProfileButton;
+exports["default"] = _default;
 //# sourceMappingURL=ProfileButton.cjs.map