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

package/dist/Panel/Panel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_Button","_icons","_LinearProgress","_rooks","_types","_jsxRuntime","_excluded","_excluded2","_templateObject","_templateObject2","_templateObject3","_templateObject4","_Panel$propTypes","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","Wrapper","styled","div","_taggedTemplateLiteral2","COLORS","neutral_20","BREAKPOINTS","LARGE","Media","Body","neutral_600","Footer","Panel","props","_currentItem$media","_currentItem$media2","_React$useState","React","useState","_React$useState2","_slicedToArray2","currentImage","setCurrentImage","isLargeScreen","useMediaMatch","replace","rest","order","undefined","media","title","content","items","type","_props","_props$items","_objectWithoutProperties2","_props2","_props2$title","moveLeft","moveRight","currentItem","jsxs","className","concat","children","jsx","fit","src","alt","Quote","IconButton","action","variant","shape","SystemIcons","ChevronLeft","LinearProgress","size","Size","Large","Medium","value","max","LinearProgressType","Dots","ChevronRight","exports","propTypes","_propTypes","oneOf","oneOfType","isRequired","string","node","arrayOf"],"sources":["../../src/Panel/Panel.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from \"styled-components\";\r\nimport {BREAKPOINTS, COLORS, Quote} from \"../styles\";\r\nimport {IconButton} from \"../Button\";\r\nimport {SystemIcons} from \"../icons\";\r\nimport {LinearProgress, LinearProgressType} from \"../LinearProgress\";\r\nimport {useMediaMatch} from \"rooks\";\r\nimport {Size} from \"../types\";\r\n\r\nconst Wrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  background: ${COLORS.neutral_20};\r\n  min-height: 100%;\r\n  align-items: flex-end;\r\n  box-sizing: border-box;\r\n  overflow: hidden;\r\n\r\n  gap: 24px;\r\n  padding: 24px 32px 64px;\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    gap: 32px;\r\n    padding: 32px 64px 128px;\r\n  }\r\n\r\n  &.reverse {\r\n    align-items: flex-start;\r\n  }\r\n`;\r\n\r\nconst Media = styled.div`\r\n  display: flex;\r\n  width: 320px;\r\n  height: 200px;\r\n\r\n\r\n  img {\r\n    object-fit: contain;\r\n  }\r\n\r\n  img.fit {\r\n    object-fit: contain;\r\n  }\r\n\r\n  img.fill {\r\n    object-fit: cover;\r\n  }\r\n\r\n  max-width: 100%;\r\n\r\n  img {\r\n    max-width: 100%;\r\n    width: 320px;\r\n    height: 200px;\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    width: 488px;\r\n    height: 280px;\r\n\r\n    img {\r\n      width: 488px;\r\n      height: 280px;\r\n    }\r\n  }\r\n\r\n`;\r\n\r\nconst Body = styled.div`\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  text-align: center;\r\n\r\n  width: 100%;\r\n  max-width: 320px;\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    max-width: 488px;\r\n  }\r\n  \r\n  p:not(:first-of-type) {\r\n    flex: 1;\r\n    color: ${COLORS.neutral_600};\r\n  }\r\n\r\n\r\n`;\r\nconst Footer = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 100%;\r\n\r\n  max-width: 320px;\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    max-width: 488px;\r\n  }\r\n\r\n  .progress {\r\n    width: max-content;\r\n  }\r\n`;\r\n\r\nexport interface BasePanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'content'> {\r\n  type?: 'default' | 'carousel';\r\n}\r\n\r\nexport interface PanelContent {\r\n  media?: { type: 'image', src: string; alt: string, fit?: 'fill' | 'fit' } | { type: 'custom', content: React.ReactNode };\r\n  title?: string;\r\n  content?: React.ReactNode;\r\n}\r\n\r\nexport interface DefaultPanelProps extends BasePanelProps, PanelContent {\r\n  /**\r\n   * Optional. Specifies the type of the panel as 'default'.\r\n   * If not specified, the type defaults to 'default'.\r\n   */\r\n  type?: 'default';\r\n\r\n  /**\r\n   * Optional. Specifies the order of the content in the panel.\r\n   * It can be 'default' or 'reverse'. Defaults to 'default' if not specified.\r\n   */\r\n  order?: 'default' | 'reverse';\r\n}\r\n\r\nexport interface CarouselPanelProps extends BasePanelProps {\r\n  /**\r\n   * Required. Specifies the type of the panel as 'carousel'.\r\n   */\r\n  type: 'carousel';\r\n\r\n  /**\r\n   * Optional. Specifies the order of the content in the panel.\r\n   * It can be 'default' or 'reverse'. Defaults to 'default' if not specified.\r\n   */\r\n  order?: 'default' | 'reverse';\r\n\r\n  /**\r\n   * Optional. An array of PanelContent objects.\r\n   * Each object represents a slide in the carousel.\r\n   */\r\n  items?: PanelContent[];\r\n}\r\nexport type PanelProps = DefaultPanelProps | CarouselPanelProps;\r\n\r\nexport const Panel = (props: PanelProps) => {\r\n\r\n  const [currentImage, setCurrentImage] = React.useState(0);\r\n  const isLargeScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));\r\n\r\n  let rest: React.HTMLAttributes<HTMLDivElement> = {};\r\n  let order = undefined;\r\n  let media = undefined;\r\n  let title = '';\r\n  let content = undefined;\r\n  let items: PanelContent[] = [];\r\n\r\n\r\n  switch (props.type) {\r\n    case 'carousel':\r\n      ({items = [], order, ...rest} = props);\r\n      break;\r\n    case 'default':\r\n    default:\r\n      ({media, content, title = '', order, ...rest} = props)\r\n      break;\r\n  }\r\n\r\n\r\n  const moveLeft = () => {\r\n    props.type === 'carousel' && setCurrentImage(currentImage === 0 ? items.length - 1 : currentImage - 1);\r\n  }\r\n  const moveRight = () => {\r\n    props.type === 'carousel' && setCurrentImage(currentImage + 1 > items.length - 1 ? 0 : currentImage + 1);\r\n  }\r\n\r\n  const currentItem: PanelContent = props.type === 'carousel' ? items[currentImage] : {media, title, content};\r\n\r\n  return (\r\n    <Wrapper {...rest} className={`${rest.className || ''} ${order || ''} `}>\r\n      <Media>\r\n        {\r\n          currentItem.media?.type === 'image' &&\r\n            <img className={currentItem.media.fit} src={currentItem.media.src} alt={currentItem.media.alt}/>\r\n        }\r\n        {\r\n          currentItem.media?.type === 'custom' && currentItem.media.content\r\n        }\r\n      </Media>\r\n      <Body>\r\n        <Quote>{currentItem.title}</Quote>\r\n        <p>{currentItem.content}</p>\r\n      </Body>\r\n      {\r\n        props.type === 'carousel' &&\r\n          <Footer>\r\n              <IconButton action={moveLeft} variant={'secondary'} shape={'circular'}>\r\n                  <SystemIcons.ChevronLeft/>\r\n              </IconButton>\r\n              <LinearProgress size={isLargeScreen ? Size.Large : Size.Medium}\r\n                              className={'progress'}\r\n                              value={currentImage + 1}\r\n                              max={props.items!.length }\r\n                              type={LinearProgressType.Dots}/>\r\n              <IconButton action={moveRight} variant={'secondary'} shape={'circular'}>\r\n                  <SystemIcons.ChevronRight/>\r\n              </IconButton>\r\n          </Footer>\r\n      }\r\n    </Wrapper>\r\n  )\r\n};\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Panel.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_Button","_icons","_LinearProgress","_rooks","_types","_jsxRuntime","_excluded","_excluded2","_templateObject","_templateObject2","_templateObject3","_templateObject4","_Panel$propTypes","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","Wrapper","styled","div","_taggedTemplateLiteral2","props","COLORS","getColor","theme","BREAKPOINTS","LARGE","Media","Body","Footer","Panel","_currentItem$media","_currentItem$media2","_React$useState","React","useState","_React$useState2","_slicedToArray2","currentImage","setCurrentImage","isLargeScreen","useMediaMatch","replace","rest","order","undefined","media","title","content","items","type","_props","_props$items","_objectWithoutProperties2","_props2","_props2$title","moveLeft","moveRight","currentItem","jsxs","className","concat","children","jsx","fit","src","alt","Quote","IconButton","action","variant","shape","SystemIcons","ChevronLeft","LinearProgress","size","Size","Large","Medium","value","max","LinearProgressType","Dots","ChevronRight","exports","propTypes","_propTypes","oneOf","oneOfType","isRequired","string","node","arrayOf"],"sources":["../../src/Panel/Panel.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from \"styled-components\";\r\nimport {BREAKPOINTS, COLORS, Quote} from \"../styles\";\r\nimport {IconButton} from \"../Button\";\r\nimport {SystemIcons} from \"../icons\";\r\nimport {LinearProgress, LinearProgressType} from \"../LinearProgress\";\r\nimport {useMediaMatch} from \"rooks\";\r\nimport {Size} from \"../types\";\r\n\r\nconst Wrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  background: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n  min-height: 100%;\r\n  align-items: flex-end;\r\n  box-sizing: border-box;\r\n  overflow: hidden;\r\n\r\n  gap: 24px;\r\n  padding: 24px 32px 64px;\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    gap: 32px;\r\n    padding: 32px 64px 128px;\r\n  }\r\n\r\n  &.reverse {\r\n    align-items: flex-start;\r\n  }\r\n`;\r\n\r\nconst Media = styled.div`\r\n  display: flex;\r\n  width: 320px;\r\n  height: 200px;\r\n\r\n\r\n  img {\r\n    object-fit: contain;\r\n  }\r\n\r\n  img.fit {\r\n    object-fit: contain;\r\n  }\r\n\r\n  img.fill {\r\n    object-fit: cover;\r\n  }\r\n\r\n  max-width: 100%;\r\n\r\n  img {\r\n    max-width: 100%;\r\n    width: 320px;\r\n    height: 200px;\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    width: 488px;\r\n    height: 280px;\r\n\r\n    img {\r\n      width: 488px;\r\n      height: 280px;\r\n    }\r\n  }\r\n\r\n`;\r\n\r\nconst Body = styled.div`\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  text-align: center;\r\n\r\n  width: 100%;\r\n  max-width: 320px;\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    max-width: 488px;\r\n  }\r\n  \r\n  p:not(:first-of-type) {\r\n    flex: 1;\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  }\r\n\r\n\r\n`;\r\nconst Footer = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 100%;\r\n\r\n  max-width: 320px;\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    max-width: 488px;\r\n  }\r\n\r\n  .progress {\r\n    width: max-content;\r\n  }\r\n`;\r\n\r\nexport interface BasePanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'content'> {\r\n  type?: 'default' | 'carousel';\r\n}\r\n\r\nexport interface PanelContent {\r\n  media?: { type: 'image', src: string; alt: string, fit?: 'fill' | 'fit' } | { type: 'custom', content: React.ReactNode };\r\n  title?: string;\r\n  content?: React.ReactNode;\r\n}\r\n\r\nexport interface DefaultPanelProps extends BasePanelProps, PanelContent {\r\n  /**\r\n   * Optional. Specifies the type of the panel as 'default'.\r\n   * If not specified, the type defaults to 'default'.\r\n   */\r\n  type?: 'default';\r\n\r\n  /**\r\n   * Optional. Specifies the order of the content in the panel.\r\n   * It can be 'default' or 'reverse'. Defaults to 'default' if not specified.\r\n   */\r\n  order?: 'default' | 'reverse';\r\n}\r\n\r\nexport interface CarouselPanelProps extends BasePanelProps {\r\n  /**\r\n   * Required. Specifies the type of the panel as 'carousel'.\r\n   */\r\n  type: 'carousel';\r\n\r\n  /**\r\n   * Optional. Specifies the order of the content in the panel.\r\n   * It can be 'default' or 'reverse'. Defaults to 'default' if not specified.\r\n   */\r\n  order?: 'default' | 'reverse';\r\n\r\n  /**\r\n   * Optional. An array of PanelContent objects.\r\n   * Each object represents a slide in the carousel.\r\n   */\r\n  items?: PanelContent[];\r\n}\r\nexport type PanelProps = DefaultPanelProps | CarouselPanelProps;\r\n\r\nexport const Panel = (props: PanelProps) => {\r\n\r\n  const [currentImage, setCurrentImage] = React.useState(0);\r\n  const isLargeScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));\r\n\r\n  let rest: React.HTMLAttributes<HTMLDivElement> = {};\r\n  let order = undefined;\r\n  let media = undefined;\r\n  let title = '';\r\n  let content = undefined;\r\n  let items: PanelContent[] = [];\r\n\r\n\r\n  switch (props.type) {\r\n    case 'carousel':\r\n      ({items = [], order, ...rest} = props);\r\n      break;\r\n    case 'default':\r\n    default:\r\n      ({media, content, title = '', order, ...rest} = props)\r\n      break;\r\n  }\r\n\r\n\r\n  const moveLeft = () => {\r\n    props.type === 'carousel' && setCurrentImage(currentImage === 0 ? items.length - 1 : currentImage - 1);\r\n  }\r\n  const moveRight = () => {\r\n    props.type === 'carousel' && setCurrentImage(currentImage + 1 > items.length - 1 ? 0 : currentImage + 1);\r\n  }\r\n\r\n  const currentItem: PanelContent = props.type === 'carousel' ? items[currentImage] : {media, title, content};\r\n\r\n  return (\r\n    <Wrapper {...rest} className={`${rest.className || ''} ${order || ''} `}>\r\n      <Media>\r\n        {\r\n          currentItem.media?.type === 'image' &&\r\n            <img className={currentItem.media.fit} src={currentItem.media.src} alt={currentItem.media.alt}/>\r\n        }\r\n        {\r\n          currentItem.media?.type === 'custom' && currentItem.media.content\r\n        }\r\n      </Media>\r\n      <Body>\r\n        <Quote>{currentItem.title}</Quote>\r\n        <p>{currentItem.content}</p>\r\n      </Body>\r\n      {\r\n        props.type === 'carousel' &&\r\n          <Footer>\r\n              <IconButton action={moveLeft} variant={'secondary'} shape={'circular'}>\r\n                  <SystemIcons.ChevronLeft/>\r\n              </IconButton>\r\n              <LinearProgress size={isLargeScreen ? Size.Large : Size.Medium}\r\n                              className={'progress'}\r\n                              value={currentImage + 1}\r\n                              max={props.items!.length }\r\n                              type={LinearProgressType.Dots}/>\r\n              <IconButton action={moveRight} variant={'secondary'} shape={'circular'}>\r\n                  <SystemIcons.ChevronRight/>\r\n              </IconButton>\r\n          </Footer>\r\n      }\r\n    </Wrapper>\r\n  )\r\n};\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Panel/Panel.js

@@ -18,9 +18,13 @@ import { useMediaMatch } from "rooks";
 import { Size } from "../types";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  min-height: 100%;\n  align-items: flex-end;\n  box-sizing: border-box;\n  overflow: hidden;\n\n  gap: 24px;\n  padding: 24px 32px 64px;\n\n  ", " {\n    gap: 32px;\n    padding: 32px 64px 128px;\n  }\n\n  &.reverse {\n    align-items: flex-start;\n  }\n"])), COLORS.neutral_20, BREAKPOINTS.LARGE);
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  min-height: 100%;\n  align-items: flex-end;\n  box-sizing: border-box;\n  overflow: hidden;\n\n  gap: 24px;\n  padding: 24px 32px 64px;\n\n  ", " {\n    gap: 32px;\n    padding: 32px 64px 128px;\n  }\n\n  &.reverse {\n    align-items: flex-start;\n  }\n"])), function (props) {
+  return COLORS.getColor('neutral_20', props.theme);
+}, BREAKPOINTS.LARGE);
 var Media = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 320px;\n  height: 200px;\n\n\n  img {\n    object-fit: contain;\n  }\n\n  img.fit {\n    object-fit: contain;\n  }\n\n  img.fill {\n    object-fit: cover;\n  }\n\n  max-width: 100%;\n\n  img {\n    max-width: 100%;\n    width: 320px;\n    height: 200px;\n  }\n\n  ", " {\n    width: 488px;\n    height: 280px;\n\n    img {\n      width: 488px;\n      height: 280px;\n    }\n  }\n\n"])), BREAKPOINTS.LARGE);
-var Body = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n\n  width: 100%;\n  max-width: 320px;\n\n  ", " {\n    max-width: 488px;\n  }\n  \n  p:not(:first-of-type) {\n    flex: 1;\n    color: ", ";\n  }\n\n\n"])), BREAKPOINTS.LARGE, COLORS.neutral_600);
+var Body = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n\n  width: 100%;\n  max-width: 320px;\n\n  ", " {\n    max-width: 488px;\n  }\n  \n  p:not(:first-of-type) {\n    flex: 1;\n    color: ", ";\n  }\n\n\n"])), BREAKPOINTS.LARGE, function (props) {
+  return COLORS.getColor('neutral_600', props.theme);
+});
 var Footer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n\n  max-width: 320px;\n\n  ", " {\n    max-width: 488px;\n  }\n\n  .progress {\n    width: max-content;\n  }\n"])), BREAKPOINTS.LARGE);
 export var Panel = function Panel(props) {
   var _currentItem$media, _currentItem$media2;

package/dist/Panel/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","names":["React","styled","BREAKPOINTS","COLORS","Quote","IconButton","SystemIcons","LinearProgress","LinearProgressType","useMediaMatch","Size","jsx","_jsx","jsxs","_jsxs","Wrapper","div","_templateObject","_taggedTemplateLiteral","neutral_20","LARGE","Media","_templateObject2","Body","_templateObject3","neutral_600","Footer","_templateObject4","Panel","props","_currentItem$media","_currentItem$media2","_React$useState","useState","_React$useState2","_slicedToArray","currentImage","setCurrentImage","isLargeScreen","replace","rest","order","undefined","media","title","content","items","type","_props","_props$items","_objectWithoutProperties","_excluded","_props2","_props2$title","_excluded2","moveLeft","length","moveRight","currentItem","_objectSpread","className","concat","children","fit","src","alt","action","variant","shape","ChevronLeft","size","Large","Medium","value","max","Dots","ChevronRight","propTypes","_Panel$propTypes","_pt","oneOf","oneOfType","isRequired","string","node","_defineProperty","arrayOf"],"sources":["../../src/Panel/Panel.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from \"styled-components\";\r\nimport {BREAKPOINTS, COLORS, Quote} from \"../styles\";\r\nimport {IconButton} from \"../Button\";\r\nimport {SystemIcons} from \"../icons\";\r\nimport {LinearProgress, LinearProgressType} from \"../LinearProgress\";\r\nimport {useMediaMatch} from \"rooks\";\r\nimport {Size} from \"../types\";\r\n\r\nconst Wrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  background: ${COLORS.neutral_20};\r\n  min-height: 100%;\r\n  align-items: flex-end;\r\n  box-sizing: border-box;\r\n  overflow: hidden;\r\n\r\n  gap: 24px;\r\n  padding: 24px 32px 64px;\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    gap: 32px;\r\n    padding: 32px 64px 128px;\r\n  }\r\n\r\n  &.reverse {\r\n    align-items: flex-start;\r\n  }\r\n`;\r\n\r\nconst Media = styled.div`\r\n  display: flex;\r\n  width: 320px;\r\n  height: 200px;\r\n\r\n\r\n  img {\r\n    object-fit: contain;\r\n  }\r\n\r\n  img.fit {\r\n    object-fit: contain;\r\n  }\r\n\r\n  img.fill {\r\n    object-fit: cover;\r\n  }\r\n\r\n  max-width: 100%;\r\n\r\n  img {\r\n    max-width: 100%;\r\n    width: 320px;\r\n    height: 200px;\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    width: 488px;\r\n    height: 280px;\r\n\r\n    img {\r\n      width: 488px;\r\n      height: 280px;\r\n    }\r\n  }\r\n\r\n`;\r\n\r\nconst Body = styled.div`\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  text-align: center;\r\n\r\n  width: 100%;\r\n  max-width: 320px;\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    max-width: 488px;\r\n  }\r\n  \r\n  p:not(:first-of-type) {\r\n    flex: 1;\r\n    color: ${COLORS.neutral_600};\r\n  }\r\n\r\n\r\n`;\r\nconst Footer = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 100%;\r\n\r\n  max-width: 320px;\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    max-width: 488px;\r\n  }\r\n\r\n  .progress {\r\n    width: max-content;\r\n  }\r\n`;\r\n\r\nexport interface BasePanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'content'> {\r\n  type?: 'default' | 'carousel';\r\n}\r\n\r\nexport interface PanelContent {\r\n  media?: { type: 'image', src: string; alt: string, fit?: 'fill' | 'fit' } | { type: 'custom', content: React.ReactNode };\r\n  title?: string;\r\n  content?: React.ReactNode;\r\n}\r\n\r\nexport interface DefaultPanelProps extends BasePanelProps, PanelContent {\r\n  /**\r\n   * Optional. Specifies the type of the panel as 'default'.\r\n   * If not specified, the type defaults to 'default'.\r\n   */\r\n  type?: 'default';\r\n\r\n  /**\r\n   * Optional. Specifies the order of the content in the panel.\r\n   * It can be 'default' or 'reverse'. Defaults to 'default' if not specified.\r\n   */\r\n  order?: 'default' | 'reverse';\r\n}\r\n\r\nexport interface CarouselPanelProps extends BasePanelProps {\r\n  /**\r\n   * Required. Specifies the type of the panel as 'carousel'.\r\n   */\r\n  type: 'carousel';\r\n\r\n  /**\r\n   * Optional. Specifies the order of the content in the panel.\r\n   * It can be 'default' or 'reverse'. Defaults to 'default' if not specified.\r\n   */\r\n  order?: 'default' | 'reverse';\r\n\r\n  /**\r\n   * Optional. An array of PanelContent objects.\r\n   * Each object represents a slide in the carousel.\r\n   */\r\n  items?: PanelContent[];\r\n}\r\nexport type PanelProps = DefaultPanelProps | CarouselPanelProps;\r\n\r\nexport const Panel = (props: PanelProps) => {\r\n\r\n  const [currentImage, setCurrentImage] = React.useState(0);\r\n  const isLargeScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));\r\n\r\n  let rest: React.HTMLAttributes<HTMLDivElement> = {};\r\n  let order = undefined;\r\n  let media = undefined;\r\n  let title = '';\r\n  let content = undefined;\r\n  let items: PanelContent[] = [];\r\n\r\n\r\n  switch (props.type) {\r\n    case 'carousel':\r\n      ({items = [], order, ...rest} = props);\r\n      break;\r\n    case 'default':\r\n    default:\r\n      ({media, content, title = '', order, ...rest} = props)\r\n      break;\r\n  }\r\n\r\n\r\n  const moveLeft = () => {\r\n    props.type === 'carousel' && setCurrentImage(currentImage === 0 ? items.length - 1 : currentImage - 1);\r\n  }\r\n  const moveRight = () => {\r\n    props.type === 'carousel' && setCurrentImage(currentImage + 1 > items.length - 1 ? 0 : currentImage + 1);\r\n  }\r\n\r\n  const currentItem: PanelContent = props.type === 'carousel' ? items[currentImage] : {media, title, content};\r\n\r\n  return (\r\n    <Wrapper {...rest} className={`${rest.className || ''} ${order || ''} `}>\r\n      <Media>\r\n        {\r\n          currentItem.media?.type === 'image' &&\r\n            <img className={currentItem.media.fit} src={currentItem.media.src} alt={currentItem.media.alt}/>\r\n        }\r\n        {\r\n          currentItem.media?.type === 'custom' && currentItem.media.content\r\n        }\r\n      </Media>\r\n      <Body>\r\n        <Quote>{currentItem.title}</Quote>\r\n        <p>{currentItem.content}</p>\r\n      </Body>\r\n      {\r\n        props.type === 'carousel' &&\r\n          <Footer>\r\n              <IconButton action={moveLeft} variant={'secondary'} shape={'circular'}>\r\n                  <SystemIcons.ChevronLeft/>\r\n              </IconButton>\r\n              <LinearProgress size={isLargeScreen ? Size.Large : Size.Medium}\r\n                              className={'progress'}\r\n                              value={currentImage + 1}\r\n                              max={props.items!.length }\r\n                              type={LinearProgressType.Dots}/>\r\n              <IconButton action={moveRight} variant={'secondary'} shape={'circular'}>\r\n                  <SystemIcons.ChevronRight/>\r\n              </IconButton>\r\n          </Footer>\r\n      }\r\n    </Wrapper>\r\n  )\r\n};\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Panel.js","names":["React","styled","BREAKPOINTS","COLORS","Quote","IconButton","SystemIcons","LinearProgress","LinearProgressType","useMediaMatch","Size","jsx","_jsx","jsxs","_jsxs","Wrapper","div","_templateObject","_taggedTemplateLiteral","props","getColor","theme","LARGE","Media","_templateObject2","Body","_templateObject3","Footer","_templateObject4","Panel","_currentItem$media","_currentItem$media2","_React$useState","useState","_React$useState2","_slicedToArray","currentImage","setCurrentImage","isLargeScreen","replace","rest","order","undefined","media","title","content","items","type","_props","_props$items","_objectWithoutProperties","_excluded","_props2","_props2$title","_excluded2","moveLeft","length","moveRight","currentItem","_objectSpread","className","concat","children","fit","src","alt","action","variant","shape","ChevronLeft","size","Large","Medium","value","max","Dots","ChevronRight","propTypes","_Panel$propTypes","_pt","oneOf","oneOfType","isRequired","string","node","_defineProperty","arrayOf"],"sources":["../../src/Panel/Panel.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from \"styled-components\";\r\nimport {BREAKPOINTS, COLORS, Quote} from \"../styles\";\r\nimport {IconButton} from \"../Button\";\r\nimport {SystemIcons} from \"../icons\";\r\nimport {LinearProgress, LinearProgressType} from \"../LinearProgress\";\r\nimport {useMediaMatch} from \"rooks\";\r\nimport {Size} from \"../types\";\r\n\r\nconst Wrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  background: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n  min-height: 100%;\r\n  align-items: flex-end;\r\n  box-sizing: border-box;\r\n  overflow: hidden;\r\n\r\n  gap: 24px;\r\n  padding: 24px 32px 64px;\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    gap: 32px;\r\n    padding: 32px 64px 128px;\r\n  }\r\n\r\n  &.reverse {\r\n    align-items: flex-start;\r\n  }\r\n`;\r\n\r\nconst Media = styled.div`\r\n  display: flex;\r\n  width: 320px;\r\n  height: 200px;\r\n\r\n\r\n  img {\r\n    object-fit: contain;\r\n  }\r\n\r\n  img.fit {\r\n    object-fit: contain;\r\n  }\r\n\r\n  img.fill {\r\n    object-fit: cover;\r\n  }\r\n\r\n  max-width: 100%;\r\n\r\n  img {\r\n    max-width: 100%;\r\n    width: 320px;\r\n    height: 200px;\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    width: 488px;\r\n    height: 280px;\r\n\r\n    img {\r\n      width: 488px;\r\n      height: 280px;\r\n    }\r\n  }\r\n\r\n`;\r\n\r\nconst Body = styled.div`\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  text-align: center;\r\n\r\n  width: 100%;\r\n  max-width: 320px;\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    max-width: 488px;\r\n  }\r\n  \r\n  p:not(:first-of-type) {\r\n    flex: 1;\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  }\r\n\r\n\r\n`;\r\nconst Footer = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 100%;\r\n\r\n  max-width: 320px;\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    max-width: 488px;\r\n  }\r\n\r\n  .progress {\r\n    width: max-content;\r\n  }\r\n`;\r\n\r\nexport interface BasePanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'content'> {\r\n  type?: 'default' | 'carousel';\r\n}\r\n\r\nexport interface PanelContent {\r\n  media?: { type: 'image', src: string; alt: string, fit?: 'fill' | 'fit' } | { type: 'custom', content: React.ReactNode };\r\n  title?: string;\r\n  content?: React.ReactNode;\r\n}\r\n\r\nexport interface DefaultPanelProps extends BasePanelProps, PanelContent {\r\n  /**\r\n   * Optional. Specifies the type of the panel as 'default'.\r\n   * If not specified, the type defaults to 'default'.\r\n   */\r\n  type?: 'default';\r\n\r\n  /**\r\n   * Optional. Specifies the order of the content in the panel.\r\n   * It can be 'default' or 'reverse'. Defaults to 'default' if not specified.\r\n   */\r\n  order?: 'default' | 'reverse';\r\n}\r\n\r\nexport interface CarouselPanelProps extends BasePanelProps {\r\n  /**\r\n   * Required. Specifies the type of the panel as 'carousel'.\r\n   */\r\n  type: 'carousel';\r\n\r\n  /**\r\n   * Optional. Specifies the order of the content in the panel.\r\n   * It can be 'default' or 'reverse'. Defaults to 'default' if not specified.\r\n   */\r\n  order?: 'default' | 'reverse';\r\n\r\n  /**\r\n   * Optional. An array of PanelContent objects.\r\n   * Each object represents a slide in the carousel.\r\n   */\r\n  items?: PanelContent[];\r\n}\r\nexport type PanelProps = DefaultPanelProps | CarouselPanelProps;\r\n\r\nexport const Panel = (props: PanelProps) => {\r\n\r\n  const [currentImage, setCurrentImage] = React.useState(0);\r\n  const isLargeScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));\r\n\r\n  let rest: React.HTMLAttributes<HTMLDivElement> = {};\r\n  let order = undefined;\r\n  let media = undefined;\r\n  let title = '';\r\n  let content = undefined;\r\n  let items: PanelContent[] = [];\r\n\r\n\r\n  switch (props.type) {\r\n    case 'carousel':\r\n      ({items = [], order, ...rest} = props);\r\n      break;\r\n    case 'default':\r\n    default:\r\n      ({media, content, title = '', order, ...rest} = props)\r\n      break;\r\n  }\r\n\r\n\r\n  const moveLeft = () => {\r\n    props.type === 'carousel' && setCurrentImage(currentImage === 0 ? items.length - 1 : currentImage - 1);\r\n  }\r\n  const moveRight = () => {\r\n    props.type === 'carousel' && setCurrentImage(currentImage + 1 > items.length - 1 ? 0 : currentImage + 1);\r\n  }\r\n\r\n  const currentItem: PanelContent = props.type === 'carousel' ? items[currentImage] : {media, title, content};\r\n\r\n  return (\r\n    <Wrapper {...rest} className={`${rest.className || ''} ${order || ''} `}>\r\n      <Media>\r\n        {\r\n          currentItem.media?.type === 'image' &&\r\n            <img className={currentItem.media.fit} src={currentItem.media.src} alt={currentItem.media.alt}/>\r\n        }\r\n        {\r\n          currentItem.media?.type === 'custom' && currentItem.media.content\r\n        }\r\n      </Media>\r\n      <Body>\r\n        <Quote>{currentItem.title}</Quote>\r\n        <p>{currentItem.content}</p>\r\n      </Body>\r\n      {\r\n        props.type === 'carousel' &&\r\n          <Footer>\r\n              <IconButton action={moveLeft} variant={'secondary'} shape={'circular'}>\r\n                  <SystemIcons.ChevronLeft/>\r\n              </IconButton>\r\n              <LinearProgress size={isLargeScreen ? Size.Large : Size.Medium}\r\n                              className={'progress'}\r\n                              value={currentImage + 1}\r\n                              max={props.items!.length }\r\n                              type={LinearProgressType.Dots}/>\r\n              <IconButton action={moveRight} variant={'secondary'} shape={'circular'}>\r\n                  <SystemIcons.ChevronRight/>\r\n              </IconButton>\r\n          </Footer>\r\n      }\r\n    </Wrapper>\r\n  )\r\n};\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Popover/Popover.cjs

@@ -10,7 +10,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _ = require("..");
 var _Button = require("../Button");
 var _icons = require("../icons");
@@ -24,7 +24,9 @@ var PopoverContainer = _styledComponents["default"].div(_templateObject || (_tem
   return props.size === _types.Size.Small ? '240px' : props.size === _types.Size.Large ? '480px' : '360px';
 }, function (props) {
   return props.size === _types.Size.Small ? '320px' : props.size === _types.Size.Large ? '640px' : '480px';
-}, _.COLORS.white, _styles.BOXSHADOWS.BOXSHADOW_CENTERED, _styles.Z_INDEXES.popover, function (props) {
+}, function (props) {
+  return _.COLORS.getColor('white', props.theme);
+}, _styles.BOXSHADOWS.BOXSHADOW_CENTERED, _styles.Z_INDEXES.popover, function (props) {
   return props.position == _types.Position.Bottom ? 'right: 50%; top: calc(100% + 16px); transform: translateX(50%);' : '';
 }, function (props) {
   return props.position == _types.Position.Top ? 'right: 50%; bottom: calc(100% + 16px); transform: translateX(50%);' : '';
@@ -54,7 +56,7 @@ var TextContainer = _styledComponents["default"].div(_templateObject5 || (_templ
   return renderMargins(props.note, props.size);
 });
 var NoteContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n"])), function (props) {
-  return props.size === _types.Size.Small ? (0, _styles.ComponentXXSStyling)(_.ComponentTextStyle.Regular, _.COLORS.neutral_600) : props.size === _types.Size.Large ? (0, _styles.ComponentSStyling)(_.ComponentTextStyle.Regular, _.COLORS.neutral_600) : (0, _.ComponentXSStyling)(_.ComponentTextStyle.Regular, _.COLORS.neutral_600);
+  return props.size === _types.Size.Small ? (0, _styles.ComponentXXSStyling)(_.ComponentTextStyle.Regular, _.COLORS.getColor('neutral_600', props.theme)) : props.size === _types.Size.Large ? (0, _styles.ComponentSStyling)(_.ComponentTextStyle.Regular, _.COLORS.getColor('neutral_600', props.theme)) : (0, _.ComponentXSStyling)(_.ComponentTextStyle.Regular, _.COLORS.getColor('neutral_600', props.theme));
 });
 var LabelContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n"])), function (props) {
   return props.size === _types.Size.Small ? (0, _styles.ComponentSStyling)(_.ComponentTextStyle.Bold, null) : props.size === _types.Size.Large ? (0, _styles.ComponentLStyling)(_.ComponentTextStyle.Bold, null) : (0, _styles.ComponentMStyling)(_.ComponentTextStyle.Bold, null);
@@ -126,6 +128,7 @@ var Popover = function Popover(_ref) {
     _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
     showPopover = _React$useState2[0],
     setShowPopover = _React$useState2[1];
+  var theme = (0, _styledComponents.useTheme)();
   var popoverRef = React.useRef();
   React.useEffect(function () {
     var checkIfClickedOutside = function checkIfClickedOutside(e) {
@@ -167,7 +170,7 @@ var Popover = function Popover(_ref) {
               return setShowPopover(false);
             },
             useTransparentBackground: true,
-            iconColor: _.COLORS.neutral_600,
+            iconColor: _.COLORS.getColor('neutral_600', theme),
             variant: "secondary",
             shape: "circular",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Close, {})

package/dist/Popover/Popover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_","_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","white","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","neutral_600","ComponentSStyling","ComponentXSStyling","LabelContainer","Bold","ComponentLStyling","ComponentMStyling","CloseButtonContainer","TextButtonContainer","IconButtonContainer","PopoverWrapper","showOnClick","concat","showPopover","isNotePresent","Popover","_ref","_bottomSectionProps$t","_bottomSectionProps$i","_ref$size","Medium","topSectionProps","bottomSectionProps","mainContent","children","_ref$showOnClick","_ref$showArrowPointer","_React$useState","useState","_React$useState2","_slicedToArray2","setShowPopover","popoverRef","useRef","useEffect","checkIfClickedOutside","current","contains","target","document","addEventListener","removeEventListener","jsxs","ref","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 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: ${COLORS.white};\r\n  cursor: default;\r\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\r\n\r\n  position: absolute;  \r\n  visibility: hidden;\r\n  opacity: 0;\r\n  z-index: ${Z_INDEXES.popover};\r\n\r\n  ${(props) => (props.position == Position.Bottom ? 'right: 50%; top: calc(100% + 16px); transform: translateX(50%);' : '')}\r\n  ${(props) => (props.position == Position.Top ? 'right: 50%; bottom: calc(100% + 16px); transform: translateX(50%);' : '')}\r\n\r\n  ${(props) => (props.position == Position.Left ? 'bottom: 50%; right: calc(100% + 16px); transform: translateY(50%);' : '')}\r\n  ${(props) => (props.position == Position.Right ? 'bottom: 50%; left: calc(100% + 16px); transform: translateY(50%);' : '')}\r\n\r\n  &::after {\r\n    ${(props) => (props.showArrowPointer ? renderArrowStyles(props.position) : '')}\r\n`;\r\n\r\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.neutral_600)\r\n      : props.size === Size.Large\r\n      ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)\r\n      : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\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 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.neutral_600} 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.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","Popover","_ref","_bottomSectionProps$t","_bottomSectionProps$i","_ref$size","Medium","topSectionProps","bottomSectionProps","mainContent","children","_ref$showOnClick","_ref$showArrowPointer","_React$useState","useState","_React$useState2","_slicedToArray2","setShowPopover","useTheme","popoverRef","useRef","useEffect","checkIfClickedOutside","current","contains","target","document","addEventListener","removeEventListener","jsxs","ref","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

@@ -3,7 +3,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLit
 import _pt from "prop-types";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 import * as React from 'react';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';
 import { Button, IconButton } from '../Button';
 import { SystemIcons } from '../icons';
@@ -15,7 +15,9 @@ export var PopoverContainer = styled.div(_templateObject || (_templateObject = _
   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';
-}, COLORS.white, BOXSHADOWS.BOXSHADOW_CENTERED, Z_INDEXES.popover, function (props) {
+}, 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%);' : '';
@@ -41,7 +43,7 @@ var TextContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTe
   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.neutral_600) : props.size === Size.Large ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600) : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600);
+  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);
@@ -112,6 +114,7 @@ var Popover = function Popover(_ref) {
     _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) {
@@ -153,7 +156,7 @@ var Popover = function Popover(_ref) {
               return setShowPopover(false);
             },
             useTransparentBackground: true,
-            iconColor: COLORS.neutral_600,
+            iconColor: COLORS.getColor('neutral_600', theme),
             variant: "secondary",
             shape: "circular",
             children: /*#__PURE__*/_jsx(SystemIcons.Close, {})

package/dist/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","names":["React","styled","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","white","BOXSHADOW_CENTERED","popover","position","Bottom","Top","Left","Right","showArrowPointer","renderArrowStyles","PopoverTopSectionContainer","_templateObject2","PopoverMiddleSectionContainer","_templateObject3","PopoverBottomSectionContainer","_templateObject4","TextContainer","_templateObject5","renderMargins","note","NoteContainer","_templateObject6","Regular","neutral_600","LabelContainer","_templateObject7","Bold","CloseButtonContainer","_templateObject8","TextButtonContainer","_templateObject9","IconButtonContainer","_templateObject10","PopoverWrapper","_templateObject11","showOnClick","concat","showPopover","isNotePresent","Popover","_ref","_bottomSectionProps$t","_bottomSectionProps$i","_ref$size","Medium","topSectionProps","bottomSectionProps","mainContent","children","_ref$showOnClick","_ref$showArrowPointer","_React$useState","useState","_React$useState2","_slicedToArray","setShowPopover","popoverRef","useRef","useEffect","checkIfClickedOutside","e","current","contains","target","document","addEventListener","removeEventListener","ref","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 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: ${COLORS.white};\r\n  cursor: default;\r\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\r\n\r\n  position: absolute;  \r\n  visibility: hidden;\r\n  opacity: 0;\r\n  z-index: ${Z_INDEXES.popover};\r\n\r\n  ${(props) => (props.position == Position.Bottom ? 'right: 50%; top: calc(100% + 16px); transform: translateX(50%);' : '')}\r\n  ${(props) => (props.position == Position.Top ? 'right: 50%; bottom: calc(100% + 16px); transform: translateX(50%);' : '')}\r\n\r\n  ${(props) => (props.position == Position.Left ? 'bottom: 50%; right: calc(100% + 16px); transform: translateY(50%);' : '')}\r\n  ${(props) => (props.position == Position.Right ? 'bottom: 50%; left: calc(100% + 16px); transform: translateY(50%);' : '')}\r\n\r\n  &::after {\r\n    ${(props) => (props.showArrowPointer ? renderArrowStyles(props.position) : '')}\r\n`;\r\n\r\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.neutral_600)\r\n      : props.size === Size.Large\r\n      ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)\r\n      : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\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 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.neutral_600} 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","Popover","_ref","_bottomSectionProps$t","_bottomSectionProps$i","_ref$size","Medium","topSectionProps","bottomSectionProps","mainContent","children","_ref$showOnClick","_ref$showArrowPointer","_React$useState","useState","_React$useState2","_slicedToArray","setShowPopover","popoverRef","useRef","useEffect","checkIfClickedOutside","e","current","contains","target","document","addEventListener","removeEventListener","ref","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/ProfileButton/ProfileButton.cjs

@@ -11,7 +11,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _ = require("..");
 var _Iconbutton = require("../Button/Iconbutton");
 var _NotificationDot = require("../NotificationDot");
@@ -23,10 +23,16 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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"])), _.COLORS.black);
+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, _.COLORS.neutral_100, _.COLORS.neutral_300, PortraitOverlay, PortraitOverlay);
+}, _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"])));
@@ -40,6 +46,7 @@ var ProfileButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     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", {
@@ -48,7 +55,7 @@ var ProfileButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }) || initials && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ComponentS, {
       className: "initials",
       textStyle: _styles.ComponentTextStyle.Bold,
-      color: disabled ? _.COLORS.neutral_300 : _.COLORS.white,
+      color: disabled ? _.COLORS.getColor('neutral_300', theme) : _.COLORS.getColor('white', theme),
       children: initials
     }) || /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
       children: icon