@laerdal/life-react-components 6.0.0-dev.1.full → 6.0.0-dev.10.full

package/dist/Paginator/Paginator.js.map

@@ -1 +1 @@
-{"version":3,"file":"Paginator.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","SystemIcons","ComponentMStyling","Z_INDEXES","IconButton","HyperLink","jsx","_jsx","jsxs","_jsxs","Container","nav","MEDIUM","Items","ul","Item","li","props","Regular","getColor","theme","hover","active","Dots","ItemContent","Step","_ref","up","target","disabled","page","onPageChange","id","handleButtonClick","action","event","variant","shape","children","ChevronRight","ChevronLeft","Paginator","_ref2","pageCount","currentPage","baseUrl","pages","from","to","i","push","findIndex","item","onClick","e","preventDefault","href","className","map","propTypes","_pt","number","isRequired","string","func"],"sources":["../../src/Paginator/Paginator.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {SystemIcons} from '../icons';\r\nimport {ComponentMStyling} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport {IconButton} from '../Button';\r\nimport { HyperLink } from '../HyperLink';\r\n\r\nconst Container = styled.nav`\r\n  margin: 20px 0;\r\n  display: flex;\r\n  justify-content: center;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    width: 75%;\r\n  }\r\n`;\r\n\r\nconst Items = styled.ul`\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\r\n  display: flex;\r\n`;\r\n\r\nconst Item = styled.li`\r\n  width: 48px;\r\n  height: 48px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  & > * {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 100%;\r\n    height: 100%;\r\n    text-decoration: none;\r\n\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n\r\n    &:focus,\r\n    &:focus-within {\r\n      ${focusStyles}\r\n    }\r\n  }\r\n  & > a:hover {\r\n    z-index: ${Z_INDEXES.hover};\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n  }\r\n  & > a:active {\r\n    z-index: ${Z_INDEXES.active};\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n  }\r\n  & > a.active {\r\n    z-index: ${Z_INDEXES.active};\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n    background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n    cursor: default;\r\n    &:hover {\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    }\r\n    &:active {\r\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nconst Dots = styled(Item)`\r\n  cursor: not-allowed;\r\n  &:after{\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n    content: '...';\r\n  }\r\n`;\r\n\r\nconst ItemContent = styled('div')`\r\n  text-align:center;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  position: relative;\r\n  width: 100%;\r\n  height: 100%;\r\n  \r\n  &.active:after{\r\n    content: '';\r\n    position: absolute;\r\n    bottom: 4px;\r\n    width: 32px;\r\n    border-radius: 4px;\r\n    height: 4px;\r\n    background-color: ${props => COLORS.getColor('primary_500', props.theme)}\r\n  }\r\n  &.active:hover:after{\r\n    background-color: ${props => COLORS.getColor('primary_700', props.theme)}\r\n  }\r\n  &.active:active:after{\r\n    background-color: ${props => COLORS.getColor('primary_800', props.theme)}\r\n  }\r\n`\r\n\r\nexport interface PaginatorProps {\r\n  /**\r\n   * Required. The total number of pages.\r\n   */\r\n  pageCount: number;\r\n\r\n  /**\r\n   * Required. The current active page.\r\n   */\r\n  currentPage: number;\r\n\r\n  /**\r\n   * Required. The base URL to which the page number will be appended.\r\n   */\r\n  baseUrl: string;\r\n\r\n  /**\r\n   * Optional. A callback function that will be called when the page changes.\r\n   * It receives the new page number as its argument.\r\n   * If the function returns false, the page change will be prevented.\r\n   */\r\n  onPageChange?: (page: number) => boolean | void;\r\n};\r\n\r\nconst Step = ({\r\n  up = true,\r\n  target = '',\r\n  disabled = false,\r\n  page,\r\n  onPageChange,\r\n  id,\r\n}: {\r\n  up: boolean;\r\n  target: string;\r\n  disabled: boolean;\r\n  page: number;\r\n  onPageChange?: (page: number) => void | boolean;\r\n  id?: string;\r\n}) => {\r\n  \r\n  const handleButtonClick = () => {\r\n    onPageChange && !onPageChange(page);\r\n  }\r\n\r\n  return (\r\n    <IconButton id={id}\r\n                action={event => handleButtonClick()}\r\n                variant={'secondary'}\r\n                shape={'circular'}\r\n                disabled={disabled}>\r\n      {up ? <SystemIcons.ChevronRight/> : <SystemIcons.ChevronLeft/>}\r\n    </IconButton>\r\n  )\r\n};\r\n\r\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\r\n  const pages = [];\r\n  let from = 2;\r\n  let to = 4;\r\n  if (pageCount === 0) return null;\r\n\r\n  if (pageCount > 1) {\r\n    if (currentPage >= 4 && currentPage <= pageCount - 2) {\r\n      from = currentPage - 1;\r\n      to = currentPage + 1;\r\n    } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\r\n      from = pageCount - 3;\r\n      to = pageCount - 1;\r\n    }\r\n    if (to > pageCount) {\r\n      to = pageCount;\r\n    }\r\n    for (let i = from; i <= to; i += 1) {\r\n      pages.push(i);\r\n    }\r\n  }\r\n\r\n  return (\r\n    <Container>\r\n      <Items>\r\n        <Step up={false}\r\n              target={`${baseUrl}/${currentPage - 1}`}\r\n              page={currentPage - 1}\r\n              disabled={currentPage === 1}\r\n              onPageChange={onPageChange}\r\n              id=\"paginator-left\"/>\r\n        {pages.findIndex(item => item === 1) === -1 && (\r\n          <Item>\r\n            <HyperLink\r\n              target='_self'\r\n              onClick={(e) => {\r\n                onPageChange && onPageChange(1);\r\n                e.preventDefault();\r\n              } } variant={'styleless'} href={''}>\r\n                <ItemContent className={currentPage === 1 ? 'active' : ''}>\r\n                 <span>1</span>\r\n                </ItemContent>\r\n            </HyperLink>\r\n          </Item>\r\n        )}\r\n        {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\r\n          <Dots/>\r\n        )}\r\n        {pages.map(page => (\r\n          <Item key={page}>\r\n            <HyperLink\r\n              target='_self'\r\n              href={''}\r\n              onClick={(e) => {\r\n                onPageChange && onPageChange(page);\r\n                e.preventDefault();\r\n              } } variant={'styleless'}>\r\n                <ItemContent className={currentPage === page ? 'active' : ''}>\r\n                 <span>{page}</span>\r\n                </ItemContent>\r\n            </HyperLink>\r\n          </Item>\r\n        ))}\r\n        {pageCount > 5 && currentPage <= pageCount - 3 && (\r\n          <Dots/>\r\n        )}\r\n        {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\r\n          <Item>\r\n            <HyperLink\r\n              target='_self'\r\n              href={''}\r\n              variant='styleless'\r\n              onClick={(e) => {\r\n                onPageChange && onPageChange(pageCount);\r\n                e.preventDefault();\r\n              }}>\r\n                <ItemContent className={currentPage === pageCount ? 'active' : ''}>\r\n                 <span>{pageCount}</span>\r\n                </ItemContent>\r\n            </HyperLink>\r\n          </Item>\r\n        )}\r\n        <Step up\r\n              target={`${baseUrl}/${currentPage + 1}`}\r\n              page={currentPage + 1}\r\n              disabled={currentPage === pageCount}\r\n              onPageChange={onPageChange}\r\n              id=\"paginator-right\"/>\r\n      </Items>\r\n    </Container>\r\n  );\r\n};\r\n\r\nexport default Paginator;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Paginator.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","SystemIcons","ComponentMStyling","Z_INDEXES","IconButton","HyperLink","jsx","_jsx","jsxs","_jsxs","Container","nav","MEDIUM","Items","ul","Item","li","props","Regular","generateToken","componentType","defaultVariant","theme","hover","state","active","Dots","ItemContent","Step","_ref","up","target","disabled","page","onPageChange","id","handleButtonClick","action","event","variant","shape","children","ChevronRight","ChevronLeft","Paginator","_ref2","pageCount","currentPage","baseUrl","pages","from","to","i","push","findIndex","item","onClick","e","preventDefault","href","className","map","propTypes","_pt","number","isRequired","string","func"],"sources":["../../src/Paginator/Paginator.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {SystemIcons} from '../icons';\r\nimport {ComponentMStyling} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport {IconButton} from '../Button';\r\nimport { HyperLink } from '../HyperLink';\r\n\r\nconst Container = styled.nav`\r\n  margin: 20px 0;\r\n  display: flex;\r\n  justify-content: center;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    width: 75%;\r\n  }\r\n`;\r\n\r\nconst Items = styled.ul`\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\r\n  display: flex;\r\n`;\r\n\r\nconst Item = styled.li`\r\n  width: 48px;\r\n  height: 48px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  & > * {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 100%;\r\n    height: 100%;\r\n    text-decoration: none;\r\n\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant: 'subtle'}, props.theme))}\r\n\r\n    &:focus,\r\n    &:focus-within {\r\n      ${focusStyles}\r\n    }\r\n  }\r\n  & > a:hover {\r\n    z-index: ${Z_INDEXES.hover};\r\n    color: ${props => COLORS.generateToken({ componentType:'text', state: 'hover' }, props.theme)};\r\n    background-color: ${props => COLORS.generateToken({ componentType:'bg-surface', state:'hover' }, props.theme)};\r\n  }\r\n\r\n  & > a:active {\r\n    z-index: ${Z_INDEXES.active};\r\n    color: ${props => COLORS.generateToken({ componentType:'text', state:'active' }, props.theme)};\r\n    background-color: ${props => COLORS.generateToken({ componentType:'bg-surface', state:'active' }, props.theme)};\r\n  }\r\n`;\r\n\r\nconst Dots = styled(Item)`\r\n  cursor: not-allowed;\r\n  &:after{\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'icon',defaultVariant:'subtle'}, props.theme))}\r\n    content: '...';\r\n  }\r\n`;\r\n\r\nconst ItemContent = styled('div')`\r\n  text-align:center;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  position: relative;\r\n  width: 100%;\r\n  height: 100%;\r\n  \r\n  &.somename {\r\n    z-index: ${Z_INDEXES.active};\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'default' }, props.theme)};\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'selected' }, props.theme)};\r\n    cursor: default;\r\n    &:hover {\r\n      color: ${props => COLORS.generateToken({ componentType: 'text', state: 'hover' }, props.theme)};\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'hover' }, props.theme)};\r\n    }\r\n    &:active {\r\n      color: ${props => COLORS.generateToken({ componentType: 'text', state: 'active' }, props.theme)};\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'active' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &.somename:after{\r\n    content: '';\r\n    position: absolute;\r\n    bottom: 4px;\r\n    width: 32px;\r\n    border-radius: 4px;\r\n    height: 4px;\r\n    background-color: ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'selected'}, props.theme)}\r\n  }\r\n  &.somename:hover:after{\r\n    background-color: ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'selected'}, props.theme)}\r\n  }\r\n  &.somename:active:after{\r\n    background-color: ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'selected'}, props.theme)}\r\n  }\r\n`\r\n\r\nexport interface PaginatorProps {\r\n  /**\r\n   * Required. The total number of pages.\r\n   */\r\n  pageCount: number;\r\n\r\n  /**\r\n   * Required. The current active page.\r\n   */\r\n  currentPage: number;\r\n\r\n  /**\r\n   * Required. The base URL to which the page number will be appended.\r\n   */\r\n  baseUrl: string;\r\n\r\n  /**\r\n   * Optional. A callback function that will be called when the page changes.\r\n   * It receives the new page number as its argument.\r\n   * If the function returns false, the page change will be prevented.\r\n   */\r\n  onPageChange?: (page: number) => boolean | void;\r\n};\r\n\r\nconst Step = ({\r\n  up = true,\r\n  target = '',\r\n  disabled = false,\r\n  page,\r\n  onPageChange,\r\n  id,\r\n}: {\r\n  up: boolean;\r\n  target: string;\r\n  disabled: boolean;\r\n  page: number;\r\n  onPageChange?: (page: number) => void | boolean;\r\n  id?: string;\r\n}) => {\r\n  \r\n  const handleButtonClick = () => {\r\n    onPageChange && !onPageChange(page);\r\n  }\r\n\r\n  return (\r\n    <IconButton id={id}\r\n                action={event => handleButtonClick()}\r\n                variant={'secondary'}\r\n                shape={'circular'}\r\n                disabled={disabled}>\r\n      {up ? <SystemIcons.ChevronRight/> : <SystemIcons.ChevronLeft/>}\r\n    </IconButton>\r\n  )\r\n};\r\n\r\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\r\n  const pages = [];\r\n  let from = 2;\r\n  let to = 4;\r\n  if (pageCount === 0) return null;\r\n\r\n  if (pageCount > 1) {\r\n    if (currentPage >= 4 && currentPage <= pageCount - 2) {\r\n      from = currentPage - 1;\r\n      to = currentPage + 1;\r\n    } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\r\n      from = pageCount - 3;\r\n      to = pageCount - 1;\r\n    }\r\n    if (to > pageCount) {\r\n      to = pageCount;\r\n    }\r\n    for (let i = from; i <= to; i += 1) {\r\n      pages.push(i);\r\n    }\r\n  }\r\n\r\n  return (\r\n    <Container>\r\n      <Items>\r\n        <Step up={false}\r\n              target={`${baseUrl}/${currentPage - 1}`}\r\n              page={currentPage - 1}\r\n              disabled={currentPage === 1}\r\n              onPageChange={onPageChange}\r\n              id=\"paginator-left\"/>\r\n        {pages.findIndex(item => item === 1) === -1 && (\r\n          <Item>\r\n            <HyperLink\r\n              target='_self'\r\n              onClick={(e) => {\r\n                onPageChange && onPageChange(1);\r\n                e.preventDefault();\r\n              } } variant={'styleless'} href={''}>\r\n                <ItemContent className={currentPage === 1 ? 'somename' : ''}>\r\n                 <span>1</span>\r\n                </ItemContent>\r\n            </HyperLink>\r\n          </Item>\r\n        )}\r\n        {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\r\n          <Dots/>\r\n        )}\r\n        {pages.map(page => (\r\n          <Item key={page}>\r\n            <HyperLink\r\n              target='_self'\r\n              href={''}\r\n              onClick={(e) => {\r\n                onPageChange && onPageChange(page);\r\n                e.preventDefault();\r\n              } } variant={'styleless'}>\r\n                <ItemContent className={currentPage === page ? 'somename' : ''}>\r\n                 <span>{page}</span>\r\n                </ItemContent>\r\n            </HyperLink>\r\n          </Item>\r\n        ))}\r\n        {pageCount > 5 && currentPage <= pageCount - 3 && (\r\n          <Dots/>\r\n        )}\r\n        {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\r\n          <Item>\r\n            <HyperLink\r\n              target='_self'\r\n              href={''}\r\n              variant='styleless'\r\n              onClick={(e) => {\r\n                onPageChange && onPageChange(pageCount);\r\n                e.preventDefault();\r\n              }}>\r\n                <ItemContent className={currentPage === pageCount ? 'somename' : ''}>\r\n                 <span>{pageCount}</span>\r\n                </ItemContent>\r\n            </HyperLink>\r\n          </Item>\r\n        )}\r\n        <Step up\r\n              target={`${baseUrl}/${currentPage + 1}`}\r\n              page={currentPage + 1}\r\n              disabled={currentPage === pageCount}\r\n              onPageChange={onPageChange}\r\n              id=\"paginator-right\"/>\r\n      </Items>\r\n    </Container>\r\n  );\r\n};\r\n\r\nexport default Paginator;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Panel/Panel.cjs

@@ -95,7 +95,10 @@ const Body = _styledComponents.default.div`
   
   p:not(:first-of-type) {
     flex: 1;
-    color: ${props => _styles.COLORS.getColor('neutral_600', props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
   }
 
 

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","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","Wrapper","styled","div","props","COLORS","getColor","theme","BREAKPOINTS","LARGE","Media","Body","Footer","Panel","currentImage","setCurrentImage","React","useState","isLargeScreen","useMediaMatch","replace","rest","order","undefined","media","title","content","items","type","_props","_objectWithoutProperties2","_props2","moveLeft","moveRight","currentItem","jsxs","className","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":";;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,eAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AACA,IAAAO,MAAA,GAAAP,OAAA;AAA8B,IAAAQ,WAAA,GAAAR,OAAA;AAAA,MAAAS,SAAA;EAAAC,UAAA;AAAA,SAAAC,QAAAC,CAAA,EAAAC,CAAA,QAAAC,CAAA,GAAAC,MAAA,CAAAC,IAAA,CAAAJ,CAAA,OAAAG,MAAA,CAAAE,qBAAA,QAAAC,CAAA,GAAAH,MAAA,CAAAE,qBAAA,CAAAL,CAAA,GAAAC,CAAA,KAAAK,CAAA,GAAAA,CAAA,CAAAC,MAAA,WAAAN,CAAA,WAAAE,MAAA,CAAAK,wBAAA,CAAAR,CAAA,EAAAC,CAAA,EAAAQ,UAAA,OAAAP,CAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,CAAA,EAAAI,CAAA,YAAAJ,CAAA;AAAA,SAAAU,cAAAZ,CAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAY,SAAA,CAAAC,MAAA,EAAAb,CAAA,UAAAC,CAAA,WAAAW,SAAA,CAAAZ,CAAA,IAAAY,SAAA,CAAAZ,CAAA,QAAAA,CAAA,OAAAF,OAAA,CAAAI,MAAA,CAAAD,CAAA,OAAAa,OAAA,WAAAd,CAAA,QAAAe,gBAAA,CAAAC,OAAA,EAAAjB,CAAA,EAAAC,CAAA,EAAAC,CAAA,CAAAD,CAAA,SAAAE,MAAA,CAAAe,yBAAA,GAAAf,MAAA,CAAAgB,gBAAA,CAAAnB,CAAA,EAAAG,MAAA,CAAAe,yBAAA,CAAAhB,CAAA,KAAAH,OAAA,CAAAI,MAAA,CAAAD,CAAA,GAAAa,OAAA,WAAAd,CAAA,IAAAE,MAAA,CAAAiB,cAAA,CAAApB,CAAA,EAAAC,CAAA,EAAAE,MAAA,CAAAK,wBAAA,CAAAN,CAAA,EAAAD,CAAA,iBAAAD,CAAA;AAE9B,MAAMqB,OAAO,GAAGC,yBAAM,CAACC,GAAG;AAC1B;AACA;AACA,gBAAgBC,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,YAAY,EAAEF,KAAK,CAACG,KAAK,CAAC;AACnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIC,mBAAW,CAACC,KAAK;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,MAAMC,KAAK,GAAGR,yBAAM,CAACC,GAAG;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIK,mBAAW,CAACC,KAAK;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,MAAME,IAAI,GAAGT,yBAAM,CAACC,GAAG;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIK,mBAAW,CAACC,KAAK;AACrB;AACA;AACA;AACA;AACA;AACA,aAAaL,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACjE;AACA;AACA;AACA,CAAC;AACD,MAAMK,MAAM,GAAGV,yBAAM,CAACC,GAAG;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIK,mBAAW,CAACC,KAAK;AACrB;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AA8CM,MAAMI,KAAK,GAAIT,KAAiB,IAAK;EAE1C,MAAM,CAACU,YAAY,EAAEC,eAAe,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAC,CAAC,CAAC;EACzD,MAAMC,aAAa,GAAG,IAAAC,oBAAa,EAACX,mBAAW,CAACC,KAAK,CAACW,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;EAE7E,IAAIC,IAA0C,GAAG,CAAC,CAAC;EACnD,IAAIC,KAAK,GAAGC,SAAS;EACrB,IAAIC,KAAK,GAAGD,SAAS;EACrB,IAAIE,KAAK,GAAG,EAAE;EACd,IAAIC,OAAO,GAAGH,SAAS;EACvB,IAAII,KAAqB,GAAG,EAAE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","ignoreList":[]}
+{"version":3,"file":"Panel.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_Button","_icons","_LinearProgress","_rooks","_types","_jsxRuntime","_excluded","_excluded2","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","Wrapper","styled","div","props","COLORS","getColor","theme","BREAKPOINTS","LARGE","Media","Body","generateToken","componentType","defaultVariant","Footer","Panel","currentImage","setCurrentImage","React","useState","isLargeScreen","useMediaMatch","replace","rest","order","undefined","media","title","content","items","type","_props","_objectWithoutProperties2","_props2","moveLeft","moveRight","currentItem","jsxs","className","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.generateToken({componentType:'text',defaultVariant:'subtle'}, 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":";;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,eAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AACA,IAAAO,MAAA,GAAAP,OAAA;AAA8B,IAAAQ,WAAA,GAAAR,OAAA;AAAA,MAAAS,SAAA;EAAAC,UAAA;AAAA,SAAAC,QAAAC,CAAA,EAAAC,CAAA,QAAAC,CAAA,GAAAC,MAAA,CAAAC,IAAA,CAAAJ,CAAA,OAAAG,MAAA,CAAAE,qBAAA,QAAAC,CAAA,GAAAH,MAAA,CAAAE,qBAAA,CAAAL,CAAA,GAAAC,CAAA,KAAAK,CAAA,GAAAA,CAAA,CAAAC,MAAA,WAAAN,CAAA,WAAAE,MAAA,CAAAK,wBAAA,CAAAR,CAAA,EAAAC,CAAA,EAAAQ,UAAA,OAAAP,CAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,CAAA,EAAAI,CAAA,YAAAJ,CAAA;AAAA,SAAAU,cAAAZ,CAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAY,SAAA,CAAAC,MAAA,EAAAb,CAAA,UAAAC,CAAA,WAAAW,SAAA,CAAAZ,CAAA,IAAAY,SAAA,CAAAZ,CAAA,QAAAA,CAAA,OAAAF,OAAA,CAAAI,MAAA,CAAAD,CAAA,OAAAa,OAAA,WAAAd,CAAA,QAAAe,gBAAA,CAAAC,OAAA,EAAAjB,CAAA,EAAAC,CAAA,EAAAC,CAAA,CAAAD,CAAA,SAAAE,MAAA,CAAAe,yBAAA,GAAAf,MAAA,CAAAgB,gBAAA,CAAAnB,CAAA,EAAAG,MAAA,CAAAe,yBAAA,CAAAhB,CAAA,KAAAH,OAAA,CAAAI,MAAA,CAAAD,CAAA,GAAAa,OAAA,WAAAd,CAAA,IAAAE,MAAA,CAAAiB,cAAA,CAAApB,CAAA,EAAAC,CAAA,EAAAE,MAAA,CAAAK,wBAAA,CAAAN,CAAA,EAAAD,CAAA,iBAAAD,CAAA;AAE9B,MAAMqB,OAAO,GAAGC,yBAAM,CAACC,GAAG;AAC1B;AACA;AACA,gBAAgBC,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,YAAY,EAAEF,KAAK,CAACG,KAAK,CAAC;AACnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIC,mBAAW,CAACC,KAAK;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,MAAMC,KAAK,GAAGR,yBAAM,CAACC,GAAG;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIK,mBAAW,CAACC,KAAK;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,MAAME,IAAI,GAAGT,yBAAM,CAACC,GAAG;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIK,mBAAW,CAACC,KAAK;AACrB;AACA;AACA;AACA;AACA;AACA,aAAaL,KAAK,IAAIC,cAAM,CAACO,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAACC,cAAc,EAAC;AAAQ,CAAC,EAAEV,KAAK,CAACG,KAAK,CAAC;AACvG;AACA;AACA;AACA,CAAC;AACD,MAAMQ,MAAM,GAAGb,yBAAM,CAACC,GAAG;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIK,mBAAW,CAACC,KAAK;AACrB;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AA8CM,MAAMO,KAAK,GAAIZ,KAAiB,IAAK;EAE1C,MAAM,CAACa,YAAY,EAAEC,eAAe,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAC,CAAC,CAAC;EACzD,MAAMC,aAAa,GAAG,IAAAC,oBAAa,EAACd,mBAAW,CAACC,KAAK,CAACc,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;EAE7E,IAAIC,IAA0C,GAAG,CAAC,CAAC;EACnD,IAAIC,KAAK,GAAGC,SAAS;EACrB,IAAIC,KAAK,GAAGD,SAAS;EACrB,IAAIE,KAAK,GAAG,EAAE;EACd,IAAIC,O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","ignoreList":[]}

package/dist/Panel/Panel.js

@@ -88,7 +88,10 @@ const Body = styled.div`
   
   p:not(:first-of-type) {
     flex: 1;
-    color: ${props => COLORS.getColor('neutral_600', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
   }
 
 

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","props","getColor","theme","LARGE","Media","Body","Footer","Panel","currentImage","setCurrentImage","useState","isLargeScreen","replace","rest","order","undefined","media","title","content","items","type","_props","_objectWithoutProperties","_excluded","_props2","_excluded2","moveLeft","length","moveRight","currentItem","_objectSpread","className","children","fit","src","alt","action","variant","shape","ChevronLeft","size","Large","Medium","value","max","Dots","ChevronRight","propTypes","_pt","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":";;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,WAAW,EAAEC,MAAM,EAAEC,KAAK,QAAO,WAAW;AACpD,SAAQC,UAAU,QAAO,WAAW;AACpC,SAAQC,WAAW,QAAO,UAAU;AACpC,SAAQC,cAAc,EAAEC,kBAAkB,QAAO,mBAAmB;AACpE,SAAQC,aAAa,QAAO,OAAO;AACnC,SAAQC,IAAI,QAAO,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE9B,MAAMC,OAAO,GAAGd,MAAM,CAACe,GAAG;AAC1B;AACA;AACA,gBAAgBC,KAAK,IAAId,MAAM,CAACe,QAAQ,CAAC,YAAY,EAAED,KAAK,CAACE,KAAK,CAAC;AACnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIjB,WAAW,CAACkB,KAAK;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,MAAMC,KAAK,GAAGpB,MAAM,CAACe,GAAG;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAId,WAAW,CAACkB,KAAK;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,MAAME,IAAI,GAAGrB,MAAM,CAACe,GAAG;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAId,WAAW,CAACkB,KAAK;AACrB;AACA;AACA;AACA;AACA;AACA,aAAaH,KAAK,IAAId,MAAM,CAACe,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AACjE;AACA;AACA;AACA,CAAC;AACD,MAAMI,MAAM,GAAGtB,MAAM,CAACe,GAAG;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAId,WAAW,CAACkB,KAAK;AACrB;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AA8CD,OAAO,MAA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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","props","getColor","theme","LARGE","Media","Body","generateToken","componentType","defaultVariant","Footer","Panel","currentImage","setCurrentImage","useState","isLargeScreen","replace","rest","order","undefined","media","title","content","items","type","_props","_objectWithoutProperties","_excluded","_props2","_excluded2","moveLeft","length","moveRight","currentItem","_objectSpread","className","children","fit","src","alt","action","variant","shape","ChevronLeft","size","Large","Medium","value","max","Dots","ChevronRight","propTypes","_pt","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.generateToken({componentType:'text',defaultVariant:'subtle'}, 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":";;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,WAAW,EAAEC,MAAM,EAAEC,KAAK,QAAO,WAAW;AACpD,SAAQC,UAAU,QAAO,WAAW;AACpC,SAAQC,WAAW,QAAO,UAAU;AACpC,SAAQC,cAAc,EAAEC,kBAAkB,QAAO,mBAAmB;AACpE,SAAQC,aAAa,QAAO,OAAO;AACnC,SAAQC,IAAI,QAAO,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE9B,MAAMC,OAAO,GAAGd,MAAM,CAACe,GAAG;AAC1B;AACA;AACA,gBAAgBC,KAAK,IAAId,MAAM,CAACe,QAAQ,CAAC,YAAY,EAAED,KAAK,CAACE,KAAK,CAAC;AACnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIjB,WAAW,CAACkB,KAAK;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,MAAMC,KAAK,GAAGpB,MAAM,CAACe,GAAG;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAId,WAAW,CAACkB,KAAK;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,MAAME,IAAI,GAAGrB,MAAM,CAACe,GAAG;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAId,WAAW,CAACkB,KAAK;AACrB;AACA;AACA;AACA;AACA;AACA,aAAaH,KAAK,IAAId,MAAM,CAACoB,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAACC,cAAc,EAAC;AAAQ,CAAC,EAAER,KAAK,CAACE,KAAK,CAAC;AACvG;AACA;AACA;AACA,CAAC;AACD,MAAMO,MAAM,GAAGzB,MAAM,CAACe,GAAG;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAId,WAAW,CAACkB,KAAK;AACrB;AACA;A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","ignoreList":[]}

package/dist/Popover/Popover.cjs

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

@@ -11,7 +11,10 @@ export const PopoverContainer = styled.div`
   //height: ${props => props.$size === Size.Small ? '240px' : props.$size === Size.Large ? '480px' : '360px'};
   min-width: ${props => props.$size === Size.Small ? '320px' : props.$size === Size.Large ? '640px' : '480px'};
   border-radius: 4px;
-  background: ${props => COLORS.getColor('white', props.theme)};
+  background: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'high'
+}, props.theme)};
   cursor: default;
   box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};
 
@@ -51,11 +54,24 @@ export const PopoverBottomSectionContainer = styled.div`
 const TextContainer = styled.div`
   display: flex;
   flex-direction: column;
+  color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme)};
   margin: ${props => renderMargins(props.$note, props.$size)};
   flex-grow: 1;
 `;
 const NoteContainer = styled.div`
-  ${props => props.$size === Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme)) : props.$size === Size.Large ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme)) : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}
+  ${props => props.$size === Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)) : props.$size === Size.Large ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)) : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
 `;
 const LabelContainer = styled.div`
   ${props => props.$size === Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, null) : props.$size === Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, null) : ComponentMStyling(ComponentTextStyle.Bold, null)}
@@ -209,7 +225,10 @@ const Popover = _ref => {
           children: /*#__PURE__*/_jsx(IconButton, {
             action: () => setShowPopover(false),
             useTransparentBackground: true,
-            iconColor: COLORS.getColor('neutral_600', theme),
+            iconColor: COLORS.generateToken({
+              componentType: 'icon',
+              defaultVariant: 'subtle'
+            }, theme),
             variant: "secondary",
             shape: "circular",
             children: /*#__PURE__*/_jsx(SystemIcons.Close, {})