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

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

package/dist/Popover/index.cjs

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

package/dist/Popover/index.d.ts

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

package/dist/ProfileButton/ProfileButton.cjs

@@ -1,11 +1,10 @@
 "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"));
@@ -17,37 +16,30 @@ var _Iconbutton = require("../Button/Iconbutton");
 var _NotificationDot = require("../NotificationDot");
 var _styles = require("../styles");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["portraitSrc", "icon", "initials", "onClick", "disabled", "notificationVariant", "className", "tabIndex"];
+const _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 _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 _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 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; }
-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() {
+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 = () => {
     return portraitSrc && /*#__PURE__*/(0, _jsxRuntime.jsxs)(ImageWrapper, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
         src: portraitSrc
@@ -81,12 +73,11 @@ var ProfileButton = /*#__PURE__*/React.forwardRef(function (_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 = ProfileButton;
-exports["default"] = _default;
+var _default = exports.default = ProfileButton;
 //# sourceMappingURL=ProfileButton.cjs.map

package/dist/ProfileButton/ProfileButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileButton.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_","_Iconbutton","_NotificationDot","_styles","_jsxRuntime","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","PortraitOverlay","styled","div","_taggedTemplateLiteral2","props","COLORS","getColor","theme","ProfileButtonContainer","IconButtonStyledPrimary","$hideOnLowWidth","BREAKPOINTS","MEDIUM","IconButtonContentStyles","exports","NotificationContainer","ImageWrapper","ProfileButton","forwardRef","_ref","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","rest","_objectWithoutProperties2","useTheme","renderIcon","jsxs","children","jsx","src","ComponentS","textStyle","ComponentTextStyle","Bold","color","Fragment","IconButton","action","variant","shape","NotificationDot","size","Size","Medium","propTypes","_propTypes","string","node","func","isRequired","oneOf","_default"],"sources":["../../src/ProfileButton/ProfileButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled, { useTheme } from 'styled-components';\nimport {COLORS, IconButton, Size} from '..';\nimport {IconButtonContentStyles, IconButtonStyledPrimary} from '../Button/Iconbutton';\nimport {NotificationDot} from '../NotificationDot';\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\n\nexport type ProfileButtonProps = {\n  /**\n   * Optional. The source URL of the profile picture.\n   */\n  portraitSrc?: string;\n\n  /**\n   * Optional. The icon of the profile to be displayed in absence of 'portraitSrc' and 'initials'.\n   */\n  icon?: React.ReactNode;\n\n  /**\n   * Optional. The initials of the user. If provided, these will be displayed in circle in the absence of a profile picture.\n   */\n  initials?: string;\n\n  /**\n   * Required. The handler function to be called when the button is clicked.\n   */\n  onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n\n  /**\n   * Optional. The variant of the notification dot. It can be 'positive' or 'critical'.\n   */\n  notificationVariant?: 'positive' | 'critical';\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> ;\n\nconst PortraitOverlay = styled.div`\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ${props => COLORS.getColor('black', props.theme)};\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n`;\n\nexport const ProfileButtonContainer = styled.div<{ $hideOnLowWidth?: boolean }>`\n  width: 48px;\n  height: 48px;\n  display: inline;\n  user-select: none;\n  \n  ${IconButtonStyledPrimary} {\n    display: ${props => (props.$hideOnLowWidth ? 'none' : 'inline')};\n\n    ${BREAKPOINTS.MEDIUM} {\n      display: inline;\n    }\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ${IconButtonContentStyles} {\n        background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\n\n        svg, svg path {\n          fill: ${props => COLORS.getColor('neutral_300', props.theme)};\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ${PortraitOverlay} {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ${PortraitOverlay} {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n`;\n\nconst NotificationContainer = styled.div`\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n`;\n\nconst ImageWrapper = styled.div`\n  width: 36px;\n  height: 36px;\n  position: relative;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n`;\n\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\n                                                                                 portraitSrc,\n                                                                                 icon,\n                                                                                 initials,\n                                                                                 onClick,\n                                                                                 disabled,\n                                                                                 notificationVariant,\n                                                                                 className,\n                                                                                 tabIndex,\n                                                                                 ...rest\n                                                                               }, ref) => {\n  const theme = useTheme();\n  const renderIcon = () => {\n    return (\n      (portraitSrc && (\n        <ImageWrapper>\n          <img src={portraitSrc}/>\n          <PortraitOverlay/>\n        </ImageWrapper>\n      )) ||\n      (initials && (\n        <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\n                    color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('white', theme)}>\n          {initials}\n        </ComponentS>\n      )) || <>{icon}</>\n    );\n  };\n\n  return (\n    <ProfileButtonContainer>\n      <IconButton ref={ref}\n                  className={className}\n                  disabled={disabled}\n                  action={onClick}\n                  variant=\"primary\"\n                  tabIndex={tabIndex}\n                  shape=\"circular\"\n                  {...rest}>\n        {renderIcon()}\n        {notificationVariant && (\n          <NotificationContainer>\n            <NotificationDot size={Size.Medium} variant={notificationVariant}/>\n          </NotificationContainer>\n        )}\n      </IconButton>\n    </ProfileButtonContainer>\n  );\n});\n\nexport default ProfileButton;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ProfileButton.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_","_Iconbutton","_NotificationDot","_styles","_jsxRuntime","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","PortraitOverlay","styled","div","_taggedTemplateLiteral2","props","COLORS","getColor","theme","ProfileButtonContainer","exports","IconButtonStyledPrimary","$hideOnLowWidth","BREAKPOINTS","MEDIUM","IconButtonContentStyles","NotificationContainer","ImageWrapper","ProfileButton","forwardRef","_ref","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","rest","_objectWithoutProperties2","useTheme","renderIcon","jsxs","children","jsx","src","ComponentS","textStyle","ComponentTextStyle","Bold","color","Fragment","IconButton","action","variant","shape","NotificationDot","size","Size","Medium","propTypes","_propTypes","string","node","func","isRequired","oneOf","_default"],"sources":["../../src/ProfileButton/ProfileButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {COLORS, IconButton, Size} from '..';\r\nimport {IconButtonContentStyles, IconButtonStyledPrimary} from '../Button/Iconbutton';\r\nimport {NotificationDot} from '../NotificationDot';\r\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\r\n\r\nexport type ProfileButtonProps = {\r\n  /**\r\n   * Optional. The source URL of the profile picture.\r\n   */\r\n  portraitSrc?: string;\r\n\r\n  /**\r\n   * Optional. The icon of the profile to be displayed in absence of 'portraitSrc' and 'initials'.\r\n   */\r\n  icon?: React.ReactNode;\r\n\r\n  /**\r\n   * Optional. The initials of the user. If provided, these will be displayed in circle in the absence of a profile picture.\r\n   */\r\n  initials?: string;\r\n\r\n  /**\r\n   * Required. The handler function to be called when the button is clicked.\r\n   */\r\n  onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\r\n\r\n  /**\r\n   * Optional. The variant of the notification dot. It can be 'positive' or 'critical'.\r\n   */\r\n  notificationVariant?: 'positive' | 'critical';\r\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> ;\r\n\r\nconst PortraitOverlay = styled.div`\r\n  width: 100%;\r\n  height: 100%;\r\n  border-radius: 50%;\r\n  background-color: ${props => COLORS.getColor('black', props.theme)};\r\n  opacity: 0;\r\n  position: absolute;\r\n  top: 0px;\r\n  left: 0px;\r\n`;\r\n\r\nexport const ProfileButtonContainer = styled.div<{ $hideOnLowWidth?: boolean }>`\r\n  width: 48px;\r\n  height: 48px;\r\n  display: inline;\r\n  user-select: none;\r\n  \r\n  ${IconButtonStyledPrimary} {\r\n    display: ${props => (props.$hideOnLowWidth ? 'none' : 'inline')};\r\n\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      display: inline;\r\n    }\r\n\r\n    :disabled {\r\n      img {\r\n        filter: grayscale(100%);\r\n      }\r\n\r\n      ${IconButtonContentStyles} {\r\n        background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n\r\n        svg, svg path {\r\n          fill: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n        }\r\n      }\r\n    }\r\n\r\n    :hover:not(:disabled):not(:active),\r\n    &.hover-state {\r\n      ${PortraitOverlay} {\r\n        opacity: 0.25;\r\n        transition: opacity 100ms ease-in-out;\r\n      }\r\n    }\r\n\r\n    :active:not(:disabled),\r\n    &.active-state {\r\n      ${PortraitOverlay} {\r\n        opacity: 0.5;\r\n        transition: opacity 0ms ease-in-out;\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst NotificationContainer = styled.div`\r\n  position: absolute;\r\n  left: 30px;\r\n  bottom: 30px;\r\n`;\r\n\r\nconst ImageWrapper = styled.div`\r\n  width: 36px;\r\n  height: 36px;\r\n  position: relative;\r\n\r\n  img {\r\n    width: 100%;\r\n    height: 100%;\r\n    border-radius: 50%;\r\n    object-fit: cover;\r\n  }\r\n`;\r\n\r\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\r\n                                                                                 portraitSrc,\r\n                                                                                 icon,\r\n                                                                                 initials,\r\n                                                                                 onClick,\r\n                                                                                 disabled,\r\n                                                                                 notificationVariant,\r\n                                                                                 className,\r\n                                                                                 tabIndex,\r\n                                                                                 ...rest\r\n                                                                               }, ref) => {\r\n  const theme = useTheme();\r\n  const renderIcon = () => {\r\n    return (\r\n      (portraitSrc && (\r\n        <ImageWrapper>\r\n          <img src={portraitSrc}/>\r\n          <PortraitOverlay/>\r\n        </ImageWrapper>\r\n      )) ||\r\n      (initials && (\r\n        <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\r\n                    color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('white', theme)}>\r\n          {initials}\r\n        </ComponentS>\r\n      )) || <>{icon}</>\r\n    );\r\n  };\r\n\r\n  return (\r\n    <ProfileButtonContainer>\r\n      <IconButton ref={ref}\r\n                  className={className}\r\n                  disabled={disabled}\r\n                  action={onClick}\r\n                  variant=\"primary\"\r\n                  tabIndex={tabIndex}\r\n                  shape=\"circular\"\r\n                  {...rest}>\r\n        {renderIcon()}\r\n        {notificationVariant && (\r\n          <NotificationContainer>\r\n            <NotificationDot size={Size.Medium} variant={notificationVariant}/>\r\n          </NotificationContainer>\r\n        )}\r\n      </IconButton>\r\n    </ProfileButtonContainer>\r\n  );\r\n});\r\n\r\nexport default ProfileButton;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/ProfileButton/ProfileButton.d.ts

@@ -1,49 +1,49 @@
-import * as React from 'react';
-export type ProfileButtonProps = {
-    /**
-     * Optional. The source URL of the profile picture.
-     */
-    portraitSrc?: string;
-    /**
-     * Optional. The icon of the profile to be displayed in absence of 'portraitSrc' and 'initials'.
-     */
-    icon?: React.ReactNode;
-    /**
-     * Optional. The initials of the user. If provided, these will be displayed in circle in the absence of a profile picture.
-     */
-    initials?: string;
-    /**
-     * Required. The handler function to be called when the button is clicked.
-     */
-    onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Optional. The variant of the notification dot. It can be 'positive' or 'critical'.
-     */
-    notificationVariant?: 'positive' | 'critical';
-} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>;
-export declare const ProfileButtonContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $hideOnLowWidth?: boolean | undefined;
-}>> & string;
-declare const ProfileButton: React.ForwardRefExoticComponent<{
-    /**
-     * Optional. The source URL of the profile picture.
-     */
-    portraitSrc?: string | undefined;
-    /**
-     * Optional. The icon of the profile to be displayed in absence of 'portraitSrc' and 'initials'.
-     */
-    icon?: React.ReactNode;
-    /**
-     * Optional. The initials of the user. If provided, these will be displayed in circle in the absence of a profile picture.
-     */
-    initials?: string | undefined;
-    /**
-     * Required. The handler function to be called when the button is clicked.
-     */
-    onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Optional. The variant of the notification dot. It can be 'positive' or 'critical'.
-     */
-    notificationVariant?: "critical" | "positive" | undefined;
-} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> & React.RefAttributes<HTMLButtonElement>>;
-export default ProfileButton;
+import * as React from 'react';
+export type ProfileButtonProps = {
+    /**
+     * Optional. The source URL of the profile picture.
+     */
+    portraitSrc?: string;
+    /**
+     * Optional. The icon of the profile to be displayed in absence of 'portraitSrc' and 'initials'.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Optional. The initials of the user. If provided, these will be displayed in circle in the absence of a profile picture.
+     */
+    initials?: string;
+    /**
+     * Required. The handler function to be called when the button is clicked.
+     */
+    onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Optional. The variant of the notification dot. It can be 'positive' or 'critical'.
+     */
+    notificationVariant?: 'positive' | 'critical';
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>;
+export declare const ProfileButtonContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $hideOnLowWidth?: boolean | undefined;
+}>> & string;
+declare const ProfileButton: React.ForwardRefExoticComponent<{
+    /**
+     * Optional. The source URL of the profile picture.
+     */
+    portraitSrc?: string | undefined;
+    /**
+     * Optional. The icon of the profile to be displayed in absence of 'portraitSrc' and 'initials'.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Optional. The initials of the user. If provided, these will be displayed in circle in the absence of a profile picture.
+     */
+    initials?: string | undefined;
+    /**
+     * Required. The handler function to be called when the button is clicked.
+     */
+    onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Optional. The variant of the notification dot. It can be 'positive' or 'critical'.
+     */
+    notificationVariant?: "critical" | "positive" | undefined;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> & React.RefAttributes<HTMLButtonElement>>;
+export default ProfileButton;

package/dist/ProfileButton/ProfileButton.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-var _excluded = ["portraitSrc", "icon", "initials", "onClick", "disabled", "notificationVariant", "className", "tabIndex"];
+const _excluded = ["portraitSrc", "icon", "initials", "onClick", "disabled", "notificationVariant", "className", "tabIndex"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -12,33 +12,25 @@ import { COLORS, IconButton, Size } from '..';
 import { IconButtonContentStyles, IconButtonStyledPrimary } from '../Button/Iconbutton';
 import { NotificationDot } from '../NotificationDot';
 import { BREAKPOINTS, ComponentS, ComponentTextStyle } from '../styles';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-var PortraitOverlay = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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);
-});
-export var ProfileButtonContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])), IconButtonStyledPrimary, function (props) {
-  return props.$hideOnLowWidth ? 'none' : 'inline';
-}, BREAKPOINTS.MEDIUM, IconButtonContentStyles, function (props) {
-  return COLORS.getColor('neutral_100', props.theme);
-}, function (props) {
-  return COLORS.getColor('neutral_300', props.theme);
-}, PortraitOverlay, PortraitOverlay);
-var NotificationContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n"])));
-var ImageWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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,
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const PortraitOverlay = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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));
+export const ProfileButtonContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])), IconButtonStyledPrimary, props => props.$hideOnLowWidth ? 'none' : 'inline', BREAKPOINTS.MEDIUM, IconButtonContentStyles, props => COLORS.getColor('neutral_100', props.theme), props => COLORS.getColor('neutral_300', props.theme), PortraitOverlay, PortraitOverlay);
+const NotificationContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n"])));
+const ImageWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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 = _objectWithoutProperties(_ref, _excluded);
-  var theme = useTheme();
-  var renderIcon = function renderIcon() {
+  const theme = useTheme();
+  const renderIcon = () => {
     return portraitSrc && /*#__PURE__*/_jsxs(ImageWrapper, {
       children: [/*#__PURE__*/_jsx("img", {
         src: portraitSrc

package/dist/ProfileButton/ProfileButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileButton.js","names":["React","styled","useTheme","COLORS","IconButton","Size","IconButtonContentStyles","IconButtonStyledPrimary","NotificationDot","BREAKPOINTS","ComponentS","ComponentTextStyle","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","PortraitOverlay","div","_templateObject","_taggedTemplateLiteral","props","getColor","theme","ProfileButtonContainer","_templateObject2","$hideOnLowWidth","MEDIUM","NotificationContainer","_templateObject3","ImageWrapper","_templateObject4","ProfileButton","forwardRef","_ref","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","rest","_objectWithoutProperties","_excluded","renderIcon","children","src","textStyle","Bold","color","_objectSpread","action","variant","shape","size","Medium","propTypes","_pt","string","node","func","isRequired","oneOf"],"sources":["../../src/ProfileButton/ProfileButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled, { useTheme } from 'styled-components';\nimport {COLORS, IconButton, Size} from '..';\nimport {IconButtonContentStyles, IconButtonStyledPrimary} from '../Button/Iconbutton';\nimport {NotificationDot} from '../NotificationDot';\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\n\nexport type ProfileButtonProps = {\n  /**\n   * Optional. The source URL of the profile picture.\n   */\n  portraitSrc?: string;\n\n  /**\n   * Optional. The icon of the profile to be displayed in absence of 'portraitSrc' and 'initials'.\n   */\n  icon?: React.ReactNode;\n\n  /**\n   * Optional. The initials of the user. If provided, these will be displayed in circle in the absence of a profile picture.\n   */\n  initials?: string;\n\n  /**\n   * Required. The handler function to be called when the button is clicked.\n   */\n  onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n\n  /**\n   * Optional. The variant of the notification dot. It can be 'positive' or 'critical'.\n   */\n  notificationVariant?: 'positive' | 'critical';\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> ;\n\nconst PortraitOverlay = styled.div`\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ${props => COLORS.getColor('black', props.theme)};\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n`;\n\nexport const ProfileButtonContainer = styled.div<{ $hideOnLowWidth?: boolean }>`\n  width: 48px;\n  height: 48px;\n  display: inline;\n  user-select: none;\n  \n  ${IconButtonStyledPrimary} {\n    display: ${props => (props.$hideOnLowWidth ? 'none' : 'inline')};\n\n    ${BREAKPOINTS.MEDIUM} {\n      display: inline;\n    }\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ${IconButtonContentStyles} {\n        background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\n\n        svg, svg path {\n          fill: ${props => COLORS.getColor('neutral_300', props.theme)};\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ${PortraitOverlay} {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ${PortraitOverlay} {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n`;\n\nconst NotificationContainer = styled.div`\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n`;\n\nconst ImageWrapper = styled.div`\n  width: 36px;\n  height: 36px;\n  position: relative;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n`;\n\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\n                                                                                 portraitSrc,\n                                                                                 icon,\n                                                                                 initials,\n                                                                                 onClick,\n                                                                                 disabled,\n                                                                                 notificationVariant,\n                                                                                 className,\n                                                                                 tabIndex,\n                                                                                 ...rest\n                                                                               }, ref) => {\n  const theme = useTheme();\n  const renderIcon = () => {\n    return (\n      (portraitSrc && (\n        <ImageWrapper>\n          <img src={portraitSrc}/>\n          <PortraitOverlay/>\n        </ImageWrapper>\n      )) ||\n      (initials && (\n        <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\n                    color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('white', theme)}>\n          {initials}\n        </ComponentS>\n      )) || <>{icon}</>\n    );\n  };\n\n  return (\n    <ProfileButtonContainer>\n      <IconButton ref={ref}\n                  className={className}\n                  disabled={disabled}\n                  action={onClick}\n                  variant=\"primary\"\n                  tabIndex={tabIndex}\n                  shape=\"circular\"\n                  {...rest}>\n        {renderIcon()}\n        {notificationVariant && (\n          <NotificationContainer>\n            <NotificationDot size={Size.Medium} variant={notificationVariant}/>\n          </NotificationContainer>\n        )}\n      </IconButton>\n    </ProfileButtonContainer>\n  );\n});\n\nexport default ProfileButton;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ProfileButton.js","names":["React","styled","useTheme","COLORS","IconButton","Size","IconButtonContentStyles","IconButtonStyledPrimary","NotificationDot","BREAKPOINTS","ComponentS","ComponentTextStyle","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","PortraitOverlay","div","_templateObject","_taggedTemplateLiteral","props","getColor","theme","ProfileButtonContainer","_templateObject2","$hideOnLowWidth","MEDIUM","NotificationContainer","_templateObject3","ImageWrapper","_templateObject4","ProfileButton","forwardRef","_ref","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","rest","_objectWithoutProperties","_excluded","renderIcon","children","src","textStyle","Bold","color","_objectSpread","action","variant","shape","size","Medium","propTypes","_pt","string","node","func","isRequired","oneOf"],"sources":["../../src/ProfileButton/ProfileButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {COLORS, IconButton, Size} from '..';\r\nimport {IconButtonContentStyles, IconButtonStyledPrimary} from '../Button/Iconbutton';\r\nimport {NotificationDot} from '../NotificationDot';\r\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\r\n\r\nexport type ProfileButtonProps = {\r\n  /**\r\n   * Optional. The source URL of the profile picture.\r\n   */\r\n  portraitSrc?: string;\r\n\r\n  /**\r\n   * Optional. The icon of the profile to be displayed in absence of 'portraitSrc' and 'initials'.\r\n   */\r\n  icon?: React.ReactNode;\r\n\r\n  /**\r\n   * Optional. The initials of the user. If provided, these will be displayed in circle in the absence of a profile picture.\r\n   */\r\n  initials?: string;\r\n\r\n  /**\r\n   * Required. The handler function to be called when the button is clicked.\r\n   */\r\n  onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\r\n\r\n  /**\r\n   * Optional. The variant of the notification dot. It can be 'positive' or 'critical'.\r\n   */\r\n  notificationVariant?: 'positive' | 'critical';\r\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> ;\r\n\r\nconst PortraitOverlay = styled.div`\r\n  width: 100%;\r\n  height: 100%;\r\n  border-radius: 50%;\r\n  background-color: ${props => COLORS.getColor('black', props.theme)};\r\n  opacity: 0;\r\n  position: absolute;\r\n  top: 0px;\r\n  left: 0px;\r\n`;\r\n\r\nexport const ProfileButtonContainer = styled.div<{ $hideOnLowWidth?: boolean }>`\r\n  width: 48px;\r\n  height: 48px;\r\n  display: inline;\r\n  user-select: none;\r\n  \r\n  ${IconButtonStyledPrimary} {\r\n    display: ${props => (props.$hideOnLowWidth ? 'none' : 'inline')};\r\n\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      display: inline;\r\n    }\r\n\r\n    :disabled {\r\n      img {\r\n        filter: grayscale(100%);\r\n      }\r\n\r\n      ${IconButtonContentStyles} {\r\n        background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n\r\n        svg, svg path {\r\n          fill: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n        }\r\n      }\r\n    }\r\n\r\n    :hover:not(:disabled):not(:active),\r\n    &.hover-state {\r\n      ${PortraitOverlay} {\r\n        opacity: 0.25;\r\n        transition: opacity 100ms ease-in-out;\r\n      }\r\n    }\r\n\r\n    :active:not(:disabled),\r\n    &.active-state {\r\n      ${PortraitOverlay} {\r\n        opacity: 0.5;\r\n        transition: opacity 0ms ease-in-out;\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst NotificationContainer = styled.div`\r\n  position: absolute;\r\n  left: 30px;\r\n  bottom: 30px;\r\n`;\r\n\r\nconst ImageWrapper = styled.div`\r\n  width: 36px;\r\n  height: 36px;\r\n  position: relative;\r\n\r\n  img {\r\n    width: 100%;\r\n    height: 100%;\r\n    border-radius: 50%;\r\n    object-fit: cover;\r\n  }\r\n`;\r\n\r\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\r\n                                                                                 portraitSrc,\r\n                                                                                 icon,\r\n                                                                                 initials,\r\n                                                                                 onClick,\r\n                                                                                 disabled,\r\n                                                                                 notificationVariant,\r\n                                                                                 className,\r\n                                                                                 tabIndex,\r\n                                                                                 ...rest\r\n                                                                               }, ref) => {\r\n  const theme = useTheme();\r\n  const renderIcon = () => {\r\n    return (\r\n      (portraitSrc && (\r\n        <ImageWrapper>\r\n          <img src={portraitSrc}/>\r\n          <PortraitOverlay/>\r\n        </ImageWrapper>\r\n      )) ||\r\n      (initials && (\r\n        <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\r\n                    color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('white', theme)}>\r\n          {initials}\r\n        </ComponentS>\r\n      )) || <>{icon}</>\r\n    );\r\n  };\r\n\r\n  return (\r\n    <ProfileButtonContainer>\r\n      <IconButton ref={ref}\r\n                  className={className}\r\n                  disabled={disabled}\r\n                  action={onClick}\r\n                  variant=\"primary\"\r\n                  tabIndex={tabIndex}\r\n                  shape=\"circular\"\r\n                  {...rest}>\r\n        {renderIcon()}\r\n        {notificationVariant && (\r\n          <NotificationContainer>\r\n            <NotificationDot size={Size.Medium} variant={notificationVariant}/>\r\n          </NotificationContainer>\r\n        )}\r\n      </IconButton>\r\n    </ProfileButtonContainer>\r\n  );\r\n});\r\n\r\nexport default ProfileButton;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/ProfileButton/index.cjs

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

package/dist/ProfileButton/index.d.ts

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