@laerdal/life-react-components 3.5.0 → 3.5.1-uss.hackathon

package/dist/Modals/ModalDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalDialog.js","names":["React","Button","IconButton","SystemIcons","COLORS","ComponentL","ComponentM","ComponentTextStyle","ComponentXL","Size","ModalContainer","BackButtonWrapper","CloseButtonWrapper","Column","FlexContainer","ModalBody","ModalFooter","ModalHeaderActions","ModalHeaderActionsWithImage","ModalTitleSection","StyledModalHeader","ModalHoverModifier","ImageOverlay","ImageContainer","ModalNote","TooltipWrapper","HyperLink","ImageWithFallbacks","ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","topImageWithFallbacksProps","topImageGrayscale","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","zIndex","contentOverflow","width","hasContentBorders","getMinWidth","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","getMaxHeight","ModalTitle","Bold","ModalTootip","XSmall","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","cloneElement","LeftFooterAction","text","actionType","disabled","action","button","type","loading","variant","order","marginRight","href","e","preventDefault","display","flexDirection","maxHeight","loader","alt","fallbacks","src","map","b","i","id"],"sources":["../../src/Modals/ModalDialog.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Button, IconButton } from '../Button';\r\nimport { SystemIcons } from '../icons';\r\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\r\nimport { Size } from '../types';\r\nimport ModalContainer from './ModalContainer';\r\nimport {\r\n  BackButtonWrapper,\r\n  CloseButtonWrapper,\r\n  Column,\r\n  FlexContainer,\r\n  ModalBody,\r\n  ModalFooter,\r\n  ModalHeaderActions,\r\n  ModalHeaderActionsWithImage,\r\n  ModalTitleSection,\r\n  StyledModalHeader,\r\n  ModalHoverModifier,\r\n  ImageOverlay,\r\n  ImageContainer,\r\n} from './ModalStyles';\r\n\r\nimport { ModalNote } from './ModalNote';\r\nimport { TooltipWrapper } from '../Tooltips';\r\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\r\nimport { HyperLink, ImageWithFallbacks } from '..';\r\nimport { ImageWithFallbacksProps } from '../Image/ImageWithFallbacks';\r\n\r\ninterface NewModalProps {\r\n  size?: Size;\r\n  isModalOpen: boolean;\r\n  children?: React.ReactNode;\r\n  closeModalAndClearInput: any;\r\n  title?: string | React.ReactNode;\r\n  topImage?: any;\r\n  topImageWithFallbacksProps?: ImageWithFallbacksProps;\r\n  topImageGrayscale?: boolean;\r\n  buttons?: ButtonAction[];\r\n  leftFooterAction?: LeftFooterAction;\r\n  tooltip?: string;\r\n  backButton?: () => void;\r\n  closeAction: () => void;\r\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\r\n  note?: string | React.ReactNode;\r\n  state?: string;\r\n  icon?: React.ReactNode;\r\n  zIndex?: number;\r\n  contentOverflow?: string;\r\n  width?: string;\r\n  hasContentBorders?: boolean;\r\n}\r\n\r\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\r\n  size,\r\n  isModalOpen,\r\n  closeModalAndClearInput,\r\n  title,\r\n  topImage,\r\n  topImageWithFallbacksProps,\r\n  topImageGrayscale,\r\n  buttons,\r\n  leftFooterAction,\r\n  backButton,\r\n  closeAction,\r\n  submitAction,\r\n  tooltip,\r\n  children,\r\n  note,\r\n  state,\r\n  icon,\r\n  zIndex,\r\n  contentOverflow,\r\n  width,\r\n  hasContentBorders,\r\n}) => {\r\n  const getMinWidth = () => {\r\n    switch (size) {\r\n      case Size.Small:\r\n        return '320px';\r\n      case Size.Large:\r\n        return '640px';\r\n      case Size.Medium:\r\n      default:\r\n        return '480px';\r\n    }\r\n  };\r\n\r\n  const getMaxWidth = () => {\r\n    switch (size) {\r\n      case Size.Small:\r\n        return '480px';\r\n      case Size.Large:\r\n        return '720px';\r\n      case Size.Medium:\r\n      default:\r\n        return '640px';\r\n    }\r\n  };\r\n\r\n  const getImageHeight = () => {\r\n    switch (size) {\r\n      case Size.Small:\r\n        return 160;\r\n      case Size.Medium:\r\n        return 200;\r\n      case Size.Large:\r\n        return 240;\r\n      default:\r\n        return 200;\r\n    }\r\n  };\r\n\r\n  const getMarginBottom = () => {\r\n    switch (size) {\r\n      case Size.Small:\r\n        return '16px';\r\n      case Size.Medium:\r\n        return '24px';\r\n      case Size.Large:\r\n        return '32px';\r\n      default:\r\n        return '24px';\r\n    }\r\n  };\r\n\r\n  const getPadding = () => {\r\n    switch (size) {\r\n      case Size.Small:\r\n        return '16px 16px 8px';\r\n      case Size.Medium:\r\n        return '24px 24px 20px';\r\n      case Size.Large:\r\n        return '32px';\r\n      default:\r\n        return '24px 24px 16px';\r\n    }\r\n  };\r\n\r\n  const getMaxHeight = () => {\r\n    switch (size) {\r\n      case Size.Small:\r\n        return 'calc(100vh - 56px)';\r\n      case Size.Medium:\r\n        return 'calc(100vh - 76px)';\r\n      case Size.Large:\r\n        return 'calc(100vh - 96px)';\r\n      default:\r\n        return 'calc(100vh - 72px)';\r\n    }\r\n  };\r\n\r\n  const ModalTitle = (title: string | React.ReactNode, size?: Size) => {\r\n    if (typeof title === 'string') {\r\n      switch (size) {\r\n        case Size.Small:\r\n          return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\r\n        case Size.Medium:\r\n          return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\r\n        case Size.Large:\r\n          return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\r\n        default:\r\n          return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\r\n      }\r\n    } else {\r\n      return title;\r\n    }\r\n  };\r\n\r\n  const ModalTootip = (tooltip: string) => {\r\n    return (\r\n      <ModalHoverModifier>\r\n        <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\r\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\r\n            <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600} />\r\n          </IconButton>\r\n        </TooltipWrapper>\r\n      </ModalHoverModifier>\r\n    );\r\n  };\r\n\r\n  const ModalCloseButton = (onClick: any) => {\r\n    return (\r\n      <CloseButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} size={size}>\r\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\r\n          <SystemIcons.Close size=\"24px\" color={COLORS.black} />\r\n        </IconButton>\r\n      </CloseButtonWrapper>\r\n    );\r\n  };\r\n\r\n  const ModalBackButton = () => {\r\n    if (backButton) {\r\n      return (\r\n        <BackButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} size={size}>\r\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\r\n            <SystemIcons.ArrowLineLeft size=\"24px\" color={COLORS.black} />\r\n          </IconButton>\r\n        </BackButtonWrapper>\r\n      );\r\n    }\r\n  };\r\n\r\n  const getLeftActionIconElement = (icon: React.ReactNode) => {\r\n    return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\r\n  };\r\n\r\n  const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\r\n    const { text, actionType, disabled, icon, action } = leftFooterAction;\r\n    switch (actionType) {\r\n      case 'button':\r\n        const button = leftFooterAction as LeftFooterButton;\r\n        return (\r\n          <Button\r\n            id={'left-action-button'}\r\n            type={button?.type}\r\n            disabled={disabled}\r\n            loading={button?.loading}\r\n            icon={icon}\r\n            size={size}\r\n            onClick={action}\r\n            variant={button?.variant ?? 'secondary'}\r\n            style={{ order: -1, marginRight: 'auto' }}>\r\n            {button?.children ?? button?.text}\r\n          </Button>\r\n        );\r\n      case 'hyperlink':\r\n        return (\r\n          <HyperLink\r\n            id=\"left-action-hyperlink\"\r\n            className=\"footer-action\"\r\n            href={(leftFooterAction as LeftFooterHyperlink).href}\r\n            disabled={disabled}\r\n            variant=\"default\"\r\n            onClick={(e) => {\r\n              if (action) {\r\n                e.preventDefault();\r\n                action(e);\r\n              }\r\n            }}>\r\n            {text}\r\n            {icon && getLeftActionIconElement(icon)}\r\n          </HyperLink>\r\n        );\r\n      case 'note':\r\n        return (\r\n          <div className=\"footer-action note\">\r\n            {icon && getLeftActionIconElement(icon)}\r\n            <span>{text}</span>\r\n          </div>\r\n        );\r\n    }\r\n  };\r\n\r\n  return (\r\n    <ModalContainer\r\n      showModal={isModalOpen}\r\n      closeModal={closeModalAndClearInput}\r\n      minWidth={getMinWidth()}\r\n      maxWidth={getMaxWidth()}\r\n      height=\"auto\"\r\n      padding={getPadding()}\r\n      zIndex={zIndex}\r\n      width={width}>\r\n      <Column>\r\n        <form onSubmit={submitAction} style={{ display: 'flex', flexDirection: 'column', maxHeight: getMaxHeight() }}>\r\n          {(topImage || topImageWithFallbacksProps) && (\r\n            <StyledModalHeader size={size} $height={getImageHeight()} marginBottom={getMarginBottom()}>\r\n              <ImageContainer $height={getImageHeight()}>\r\n                {topImageGrayscale && <ImageOverlay $height={getImageHeight()} />}\r\n                {topImage && <img src={topImage} alt=\"Modal top\" />}\r\n                {!topImage && topImageWithFallbacksProps && (\r\n                  <ImageWithFallbacks\r\n                    loader={topImageWithFallbacksProps.loader}\r\n                    alt={topImageWithFallbacksProps.alt}\r\n                    fallbacks={topImageWithFallbacksProps.fallbacks}\r\n                    src={topImageWithFallbacksProps.src}\r\n                  />\r\n                )}\r\n              </ImageContainer>\r\n              <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\r\n                {ModalBackButton()}\r\n                {ModalCloseButton(closeAction)}\r\n              </ModalHeaderActionsWithImage>\r\n            </StyledModalHeader>\r\n          )}\r\n          <ModalTitleSection>\r\n            <FlexContainer>\r\n              {!(topImage || topImageWithFallbacksProps) && ModalBackButton()}\r\n              {title && ModalTitle(title, size)}\r\n            </FlexContainer>\r\n            {(tooltip || !(topImage || topImageWithFallbacksProps)) && (\r\n              <ModalHeaderActions>\r\n                {tooltip && ModalTootip(tooltip)}\r\n                {!(topImage || topImageWithFallbacksProps) && ModalCloseButton(closeAction)}\r\n              </ModalHeaderActions>\r\n            )}\r\n          </ModalTitleSection>\r\n\r\n          <ModalBody size={size} overflow={contentOverflow} hasContentBorders={hasContentBorders}>\r\n            {children}\r\n          </ModalBody>\r\n\r\n          {note && <ModalNote note={note} state={state} size={size} icon={icon} />}\r\n\r\n          <ModalFooter size={size}>\r\n            {leftFooterAction && LeftFooterAction(leftFooterAction)}\r\n            {buttons?.map((b, i) => (\r\n              <Button key={b.id || i} icon={b.icon} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\r\n                {b.children ?? b.text}\r\n              </Button>\r\n            ))}\r\n          </ModalFooter>\r\n        </form>\r\n      </Column>\r\n    </ModalContainer>\r\n  );\r\n};\r\n\r\nexport default ModalDialog;\r\n"],"mappings":"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"}
+{"version":3,"file":"ModalDialog.js","names":["React","Button","IconButton","SystemIcons","COLORS","ComponentL","ComponentM","ComponentTextStyle","ComponentXL","Size","ModalContainer","BackButtonWrapper","CloseButtonWrapper","Column","FlexContainer","ModalBody","ModalFooter","ModalHeaderActions","ModalHeaderActionsWithImage","ModalTitleSection","StyledModalHeader","ModalHoverModifier","ImageOverlay","ImageContainer","ModalNote","TooltipWrapper","HyperLink","ImageWithFallbacks","ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","topImageWithFallbacksProps","topImageGrayscale","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","zIndex","contentOverflow","width","hasContentBorders","getMinWidth","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","getMaxHeight","ModalTitle","Bold","ModalTootip","XSmall","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","e","preventDefault","display","flexDirection","maxHeight","loader","alt","fallbacks","src","map","b","i","id"],"sources":["../../src/Modals/ModalDialog.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Button, IconButton } from '../Button';\r\nimport { SystemIcons } from '../icons';\r\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\r\nimport { Size } from '../types';\r\nimport ModalContainer from './ModalContainer';\r\nimport {\r\n  BackButtonWrapper,\r\n  CloseButtonWrapper,\r\n  Column,\r\n  FlexContainer,\r\n  ModalBody,\r\n  ModalFooter,\r\n  ModalHeaderActions,\r\n  ModalHeaderActionsWithImage,\r\n  ModalTitleSection,\r\n  StyledModalHeader,\r\n  ModalHoverModifier,\r\n  ImageOverlay,\r\n  ImageContainer,\r\n} from './ModalStyles';\r\n\r\nimport { ModalNote } from './ModalNote';\r\nimport { TooltipWrapper } from '../Tooltips';\r\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\r\nimport { HyperLink, ImageWithFallbacks } from '..';\r\nimport { ImageWithFallbacksProps } from '../Image/ImageWithFallbacks';\r\n\r\ninterface NewModalProps {\r\n  size?: Size;\r\n  isModalOpen: boolean;\r\n  children?: React.ReactNode;\r\n  closeModalAndClearInput: any;\r\n  title?: string | React.ReactNode;\r\n  topImage?: any;\r\n  topImageWithFallbacksProps?: ImageWithFallbacksProps;\r\n  topImageGrayscale?: boolean;\r\n  buttons?: ButtonAction[];\r\n  leftFooterAction?: LeftFooterAction;\r\n  tooltip?: string;\r\n  backButton?: () => void;\r\n  closeAction: () => void;\r\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\r\n  note?: string | React.ReactNode;\r\n  state?: string;\r\n  icon?: React.ReactNode;\r\n  zIndex?: number;\r\n  contentOverflow?: string;\r\n  width?: string;\r\n  hasContentBorders?: boolean;\r\n}\r\n\r\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\r\n  size,\r\n  isModalOpen,\r\n  closeModalAndClearInput,\r\n  title,\r\n  topImage,\r\n  topImageWithFallbacksProps,\r\n  topImageGrayscale,\r\n  buttons,\r\n  leftFooterAction,\r\n  backButton,\r\n  closeAction,\r\n  submitAction,\r\n  tooltip,\r\n  children,\r\n  note,\r\n  state,\r\n  icon,\r\n  zIndex,\r\n  contentOverflow,\r\n  width,\r\n  hasContentBorders,\r\n}) => {\r\n  const getMinWidth = () => {\r\n    switch (size) {\r\n      case Size.Small:\r\n        return '320px';\r\n      case Size.Large:\r\n        return '640px';\r\n      case Size.Medium:\r\n      default:\r\n        return '480px';\r\n    }\r\n  };\r\n\r\n  const getMaxWidth = () => {\r\n    switch (size) {\r\n      case Size.Small:\r\n        return '480px';\r\n      case Size.Large:\r\n        return '720px';\r\n      case Size.Medium:\r\n      default:\r\n        return '640px';\r\n    }\r\n  };\r\n\r\n  const getImageHeight = () => {\r\n    switch (size) {\r\n      case Size.Small:\r\n        return 160;\r\n      case Size.Medium:\r\n        return 200;\r\n      case Size.Large:\r\n        return 240;\r\n      default:\r\n        return 200;\r\n    }\r\n  };\r\n\r\n  const getMarginBottom = () => {\r\n    switch (size) {\r\n      case Size.Small:\r\n        return '16px';\r\n      case Size.Medium:\r\n        return '24px';\r\n      case Size.Large:\r\n        return '32px';\r\n      default:\r\n        return '24px';\r\n    }\r\n  };\r\n\r\n  const getPadding = () => {\r\n    switch (size) {\r\n      case Size.Small:\r\n        return '16px 16px 8px';\r\n      case Size.Medium:\r\n        return '24px 24px 20px';\r\n      case Size.Large:\r\n        return '32px';\r\n      default:\r\n        return '24px 24px 16px';\r\n    }\r\n  };\r\n\r\n  const getMaxHeight = () => {\r\n    switch (size) {\r\n      case Size.Small:\r\n        return 'calc(100vh - 56px)';\r\n      case Size.Medium:\r\n        return 'calc(100vh - 76px)';\r\n      case Size.Large:\r\n        return 'calc(100vh - 96px)';\r\n      default:\r\n        return 'calc(100vh - 72px)';\r\n    }\r\n  };\r\n\r\n  const ModalTitle = (title: string | React.ReactNode, size?: Size) => {\r\n    if (typeof title === 'string') {\r\n      switch (size) {\r\n        case Size.Small:\r\n          return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\r\n        case Size.Medium:\r\n          return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\r\n        case Size.Large:\r\n          return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\r\n        default:\r\n          return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\r\n      }\r\n    } else {\r\n      return title;\r\n    }\r\n  };\r\n\r\n  const ModalTootip = (tooltip: string) => {\r\n    return (\r\n      <ModalHoverModifier>\r\n        <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\r\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\r\n            <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600} />\r\n          </IconButton>\r\n        </TooltipWrapper>\r\n      </ModalHoverModifier>\r\n    );\r\n  };\r\n\r\n  const ModalCloseButton = (onClick: any) => {\r\n    return (\r\n      <CloseButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} size={size}>\r\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\r\n          <SystemIcons.Close size=\"24px\" color={COLORS.black} />\r\n        </IconButton>\r\n      </CloseButtonWrapper>\r\n    );\r\n  };\r\n\r\n  const ModalBackButton = () => {\r\n    if (backButton) {\r\n      return (\r\n        <BackButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} size={size}>\r\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\r\n            <SystemIcons.ArrowLineLeft size=\"24px\" color={COLORS.black} />\r\n          </IconButton>\r\n        </BackButtonWrapper>\r\n      );\r\n    }\r\n  };\r\n\r\n  const getLeftActionIconElement = (icon: React.ReactNode) => {\r\n    return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\r\n  };\r\n\r\n  const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\r\n    const { text, actionType, disabled, icon, action } = leftFooterAction;\r\n    switch (actionType) {\r\n      case 'button':\r\n        return (\r\n          <Button\r\n            id={'left-action-button'}\r\n            type={(leftFooterAction as LeftFooterButton)?.type}\r\n            disabled={disabled}\r\n            loading={(leftFooterAction as LeftFooterButton)?.loading}\r\n            icon={icon}\r\n            size={size}\r\n            onClick={action}\r\n            variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\r\n            style={{ order: -1, marginRight: 'auto' }}>\r\n            {text}\r\n          </Button>\r\n        );\r\n      case 'hyperlink':\r\n        return (\r\n          <HyperLink\r\n            id=\"left-action-hyperlink\"\r\n            className=\"footer-action\"\r\n            href={(leftFooterAction as LeftFooterHyperlink).href}\r\n            disabled={disabled}\r\n            variant=\"default\"\r\n            onClick={(e) => {\r\n              if (action) {\r\n                e.preventDefault();\r\n                action(e);\r\n              }\r\n            }}>\r\n            {text}\r\n            {icon && getLeftActionIconElement(icon)}\r\n          </HyperLink>\r\n        );\r\n      case 'note':\r\n        return (\r\n          <div className=\"footer-action note\">\r\n            {icon && getLeftActionIconElement(icon)}\r\n            <span>{text}</span>\r\n          </div>\r\n        );\r\n    }\r\n  };\r\n\r\n  return (\r\n    <ModalContainer\r\n      showModal={isModalOpen}\r\n      closeModal={closeModalAndClearInput}\r\n      minWidth={getMinWidth()}\r\n      maxWidth={getMaxWidth()}\r\n      height=\"auto\"\r\n      padding={getPadding()}\r\n      zIndex={zIndex}\r\n      width={width}>\r\n      <Column>\r\n        <form onSubmit={submitAction} style={{ display: 'flex', flexDirection: 'column', maxHeight: getMaxHeight() }}>\r\n          {(topImage || topImageWithFallbacksProps) && (\r\n            <StyledModalHeader size={size} $height={getImageHeight()} marginBottom={getMarginBottom()}>\r\n              <ImageContainer $height={getImageHeight()}>\r\n                {topImageGrayscale && <ImageOverlay $height={getImageHeight()} />}\r\n                {topImage && <img src={topImage} alt=\"Modal top\" />}\r\n                {!topImage && topImageWithFallbacksProps && (\r\n                  <ImageWithFallbacks\r\n                    loader={topImageWithFallbacksProps.loader}\r\n                    alt={topImageWithFallbacksProps.alt}\r\n                    fallbacks={topImageWithFallbacksProps.fallbacks}\r\n                    src={topImageWithFallbacksProps.src}\r\n                  />\r\n                )}\r\n              </ImageContainer>\r\n              <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\r\n                {ModalBackButton()}\r\n                {ModalCloseButton(closeAction)}\r\n              </ModalHeaderActionsWithImage>\r\n            </StyledModalHeader>\r\n          )}\r\n          <ModalTitleSection>\r\n            <FlexContainer>\r\n              {!(topImage || topImageWithFallbacksProps) && ModalBackButton()}\r\n              {title && ModalTitle(title, size)}\r\n            </FlexContainer>\r\n            {(tooltip || !(topImage || topImageWithFallbacksProps)) && (\r\n              <ModalHeaderActions>\r\n                {tooltip && ModalTootip(tooltip)}\r\n                {!(topImage || topImageWithFallbacksProps) && ModalCloseButton(closeAction)}\r\n              </ModalHeaderActions>\r\n            )}\r\n          </ModalTitleSection>\r\n\r\n          <ModalBody size={size} overflow={contentOverflow} hasContentBorders={hasContentBorders}>\r\n            {children}\r\n          </ModalBody>\r\n\r\n          {note && <ModalNote note={note} state={state} size={size} icon={icon} />}\r\n\r\n          <ModalFooter size={size}>\r\n            {leftFooterAction && LeftFooterAction(leftFooterAction)}\r\n            {buttons?.map((b, i) => (\r\n              <Button key={b.id || i} icon={b.icon} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\r\n                {b.text}\r\n              </Button>\r\n            ))}\r\n          </ModalFooter>\r\n        </form>\r\n      </Column>\r\n    </ModalContainer>\r\n  );\r\n};\r\n\r\nexport default ModalDialog;\r\n"],"mappings":"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"}

package/dist/Modals/ModalTypes.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ModalTypes.cjs","names":[],"sources":["../../src/Modals/ModalTypes.ts"],"sourcesContent":["import {ButtonProps} from '../Button';\r\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\r\nimport {IconButtonProps} from '../Button';\r\nimport React from 'react';\r\nimport {IconDropdownButtonProps} from \"../Dropdown/DropdownButtonTypes\";\r\nimport {ToggleButtonProps} from \"../Toggles/ToggleButton\";\r\n\r\nexport interface ModalHeaderIconButton extends Omit<IconButtonProps, 'hideOnLowWidth' | 'flatEdge' | 'isInMobileMenu' | 'useTransparentBackground' | 'shouldNotInteract' | 'unsetIconSize' | 'borderRadius' | 'focusBackgroundColor' | 'children' | 'focusOnClick'> {\r\n  componentType: 'icon';\r\n  icon: React.ReactNode;\r\n}\r\n\r\nexport interface ModalHeaderDropdownButton extends Omit<IconDropdownButtonProps, 'size' | 'type'> {\r\n  componentType: 'dropdown';\r\n}\r\n\r\nexport interface ModalHeaderToggleButton extends ToggleButtonProps {\r\n  componentType: 'toggle';\r\n}\r\n\r\nexport type ModalHeaderButtons = ModalHeaderIconButton | ModalHeaderDropdownButton | ModalHeaderToggleButton;\r\n\r\n\r\nexport interface ButtonAction extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'> {\r\n  action?: (() => void) | ((e: any) => void);\r\n  text?: string;\r\n  children?: React.ReactNode;\r\n}\r\n\r\nexport interface LeftFooterActionBase {\r\n  actionType: 'hyperlink' | 'note' | 'button';\r\n  text: string;\r\n  icon?: React.ReactNode;\r\n  action?: (() => void) | ((e: any) => void);\r\n}\r\n\r\nexport interface LeftFooterHyperlink extends HyperlinkProps, LeftFooterActionBase {\r\n}\r\n\r\nexport interface LeftFooterButton extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'>, LeftFooterActionBase {\r\n  children?: React.ReactNode;\r\n}\r\n\r\nexport type LeftFooterAction = LeftFooterButton | LeftFooterHyperlink;\r\n"],"mappings":""}
+{"version":3,"file":"ModalTypes.cjs","names":[],"sources":["../../src/Modals/ModalTypes.ts"],"sourcesContent":["import {ButtonProps} from '../Button';\r\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\r\nimport {IconButtonProps} from '../Button';\r\nimport React from 'react';\r\nimport {IconDropdownButtonProps} from \"../Dropdown/DropdownButtonTypes\";\r\nimport {ToggleButtonProps} from \"../Toggles/ToggleButton\";\r\n\r\nexport interface ModalHeaderIconButton extends Omit<IconButtonProps, 'hideOnLowWidth' | 'flatEdge' | 'isInMobileMenu' | 'useTransparentBackground' | 'shouldNotInteract' | 'unsetIconSize' | 'borderRadius' | 'focusBackgroundColor' | 'children' | 'focusOnClick'> {\r\n  componentType: 'icon';\r\n  icon: React.ReactNode;\r\n}\r\n\r\nexport interface ModalHeaderDropdownButton extends Omit<IconDropdownButtonProps, 'size' | 'type'> {\r\n  componentType: 'dropdown';\r\n}\r\n\r\nexport interface ModalHeaderToggleButton extends ToggleButtonProps {\r\n  componentType: 'toggle';\r\n}\r\n\r\nexport type ModalHeaderButtons = ModalHeaderIconButton | ModalHeaderDropdownButton | ModalHeaderToggleButton;\r\n\r\n\r\nexport interface ButtonAction extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'> {\r\n  action?: (() => void) | ((e: any) => void);\r\n  text: string;\r\n}\r\n\r\nexport interface LeftFooterActionBase {\r\n  actionType: 'hyperlink' | 'note' | 'button';\r\n  text: string;\r\n  icon?: React.ReactNode;\r\n  action?: (() => void) | ((e: any) => void);\r\n}\r\n\r\nexport interface LeftFooterHyperlink extends HyperlinkProps, LeftFooterActionBase {\r\n}\r\n\r\nexport interface LeftFooterButton extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'>, LeftFooterActionBase {\r\n  text: string;\r\n}\r\n\r\nexport type LeftFooterAction = LeftFooterButton | LeftFooterHyperlink;\r\n"],"mappings":""}

package/dist/Modals/ModalTypes.d.ts

@@ -17,8 +17,7 @@ export interface ModalHeaderToggleButton extends ToggleButtonProps {
 export type ModalHeaderButtons = ModalHeaderIconButton | ModalHeaderDropdownButton | ModalHeaderToggleButton;
 export interface ButtonAction extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'> {
     action?: (() => void) | ((e: any) => void);
-    text?: string;
-    children?: React.ReactNode;
+    text: string;
 }
 export interface LeftFooterActionBase {
     actionType: 'hyperlink' | 'note' | 'button';
@@ -29,6 +28,6 @@ export interface LeftFooterActionBase {
 export interface LeftFooterHyperlink extends HyperlinkProps, LeftFooterActionBase {
 }
 export interface LeftFooterButton extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'>, LeftFooterActionBase {
-    children?: React.ReactNode;
+    text: string;
 }
 export type LeftFooterAction = LeftFooterButton | LeftFooterHyperlink;

package/dist/Modals/ModalTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalTypes.js","names":[],"sources":["../../src/Modals/ModalTypes.ts"],"sourcesContent":["import {ButtonProps} from '../Button';\r\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\r\nimport {IconButtonProps} from '../Button';\r\nimport React from 'react';\r\nimport {IconDropdownButtonProps} from \"../Dropdown/DropdownButtonTypes\";\r\nimport {ToggleButtonProps} from \"../Toggles/ToggleButton\";\r\n\r\nexport interface ModalHeaderIconButton extends Omit<IconButtonProps, 'hideOnLowWidth' | 'flatEdge' | 'isInMobileMenu' | 'useTransparentBackground' | 'shouldNotInteract' | 'unsetIconSize' | 'borderRadius' | 'focusBackgroundColor' | 'children' | 'focusOnClick'> {\r\n  componentType: 'icon';\r\n  icon: React.ReactNode;\r\n}\r\n\r\nexport interface ModalHeaderDropdownButton extends Omit<IconDropdownButtonProps, 'size' | 'type'> {\r\n  componentType: 'dropdown';\r\n}\r\n\r\nexport interface ModalHeaderToggleButton extends ToggleButtonProps {\r\n  componentType: 'toggle';\r\n}\r\n\r\nexport type ModalHeaderButtons = ModalHeaderIconButton | ModalHeaderDropdownButton | ModalHeaderToggleButton;\r\n\r\n\r\nexport interface ButtonAction extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'> {\r\n  action?: (() => void) | ((e: any) => void);\r\n  text?: string;\r\n  children?: React.ReactNode;\r\n}\r\n\r\nexport interface LeftFooterActionBase {\r\n  actionType: 'hyperlink' | 'note' | 'button';\r\n  text: string;\r\n  icon?: React.ReactNode;\r\n  action?: (() => void) | ((e: any) => void);\r\n}\r\n\r\nexport interface LeftFooterHyperlink extends HyperlinkProps, LeftFooterActionBase {\r\n}\r\n\r\nexport interface LeftFooterButton extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'>, LeftFooterActionBase {\r\n  children?: React.ReactNode;\r\n}\r\n\r\nexport type LeftFooterAction = LeftFooterButton | LeftFooterHyperlink;\r\n"],"mappings":""}
+{"version":3,"file":"ModalTypes.js","names":[],"sources":["../../src/Modals/ModalTypes.ts"],"sourcesContent":["import {ButtonProps} from '../Button';\r\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\r\nimport {IconButtonProps} from '../Button';\r\nimport React from 'react';\r\nimport {IconDropdownButtonProps} from \"../Dropdown/DropdownButtonTypes\";\r\nimport {ToggleButtonProps} from \"../Toggles/ToggleButton\";\r\n\r\nexport interface ModalHeaderIconButton extends Omit<IconButtonProps, 'hideOnLowWidth' | 'flatEdge' | 'isInMobileMenu' | 'useTransparentBackground' | 'shouldNotInteract' | 'unsetIconSize' | 'borderRadius' | 'focusBackgroundColor' | 'children' | 'focusOnClick'> {\r\n  componentType: 'icon';\r\n  icon: React.ReactNode;\r\n}\r\n\r\nexport interface ModalHeaderDropdownButton extends Omit<IconDropdownButtonProps, 'size' | 'type'> {\r\n  componentType: 'dropdown';\r\n}\r\n\r\nexport interface ModalHeaderToggleButton extends ToggleButtonProps {\r\n  componentType: 'toggle';\r\n}\r\n\r\nexport type ModalHeaderButtons = ModalHeaderIconButton | ModalHeaderDropdownButton | ModalHeaderToggleButton;\r\n\r\n\r\nexport interface ButtonAction extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'> {\r\n  action?: (() => void) | ((e: any) => void);\r\n  text: string;\r\n}\r\n\r\nexport interface LeftFooterActionBase {\r\n  actionType: 'hyperlink' | 'note' | 'button';\r\n  text: string;\r\n  icon?: React.ReactNode;\r\n  action?: (() => void) | ((e: any) => void);\r\n}\r\n\r\nexport interface LeftFooterHyperlink extends HyperlinkProps, LeftFooterActionBase {\r\n}\r\n\r\nexport interface LeftFooterButton extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'>, LeftFooterActionBase {\r\n  text: string;\r\n}\r\n\r\nexport type LeftFooterAction = LeftFooterButton | LeftFooterHyperlink;\r\n"],"mappings":""}

package/dist/NavItem/NavItem.d.ts

@@ -5,5 +5,5 @@ export type StyledComponentPropsWithAs<C extends string | React.ComponentType<an
     forwardedAs?: FAsC | undefined;
 };
 export declare const NavItemDiv: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const NavItem: (props: StyledComponentPropsWithAs<string | React.ComponentType<any>, any, {}, never, string | React.ComponentType<any>, "div">) => JSX.Element;
+declare const NavItem: (props: StyledComponentPropsWithAs<string | React.ComponentType<any>, any, {}, never, string | React.ComponentType<any>, "div">) => React.JSX.Element;
 export default NavItem;

package/dist/Paginator/Paginator.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import * as React from 'react';
 type PaginatorProps = {
     pageCount: number;
     currentPage: number;
     baseUrl: string;
     onPageChange?: (page: number) => boolean | void;
 };
-declare const Paginator: ({ pageCount, currentPage, baseUrl, onPageChange }: PaginatorProps) => JSX.Element | null;
+declare const Paginator: ({ pageCount, currentPage, baseUrl, onPageChange }: PaginatorProps) => React.JSX.Element | null;
 export default Paginator;

package/dist/Panel/Panel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.cjs","names":["Wrapper","styled","div","COLORS","neutral_20","BREAKPOINTS","LARGE","Media","Body","neutral_600","Footer","Panel","props","React","useState","currentImage","setCurrentImage","isLargeScreen","useMediaMatch","replace","rest","order","undefined","media","title","content","items","type","moveLeft","length","moveRight","currentItem","className","fit","src","alt","Size","Large","Medium","LinearProgressType","Dots"],"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\ninterface BasePanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\r\n  type?: 'default' | 'carousel';\r\n}\r\n\r\ninterface 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\ninterface DefaultPanelProps extends BasePanelProps, PanelContent {\r\n  type?: 'default';\r\n  order?: 'default' | 'reverse';\r\n}\r\n\r\ninterface CarouselPanelProps extends BasePanelProps {\r\n  type: 'carousel';\r\n  order?: 'default' | 'reverse';\r\n  items?: PanelContent[];\r\n}\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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"}
+{"version":3,"file":"Panel.cjs","names":["Wrapper","styled","div","COLORS","neutral_20","BREAKPOINTS","LARGE","Media","Body","neutral_600","Footer","Panel","props","React","useState","currentImage","setCurrentImage","isLargeScreen","useMediaMatch","replace","rest","order","undefined","media","title","content","items","type","moveLeft","length","moveRight","currentItem","className","fit","src","alt","Size","Large","Medium","LinearProgressType","Dots"],"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\ninterface BasePanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'content'> {\r\n  type?: 'default' | 'carousel';\r\n}\r\n\r\ninterface 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\ninterface DefaultPanelProps extends BasePanelProps, PanelContent {\r\n  type?: 'default';\r\n  order?: 'default' | 'reverse';\r\n}\r\n\r\ninterface CarouselPanelProps extends BasePanelProps {\r\n  type: 'carousel';\r\n  order?: 'default' | 'reverse';\r\n  items?: PanelContent[];\r\n}\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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAA8B;AAAA;EAAA;AAAA;AAAA;AAAA;AAE9B,IAAMA,OAAO,GAAGC,yBAAM,CAACC,GAAG,uZAGVC,cAAM,CAACC,UAAU,EAS7BC,mBAAW,CAACC,KAAK,CAQpB;AAED,IAAMC,KAAK,GAAGN,yBAAM,CAACC,GAAG,gfA0BpBG,mBAAW,CAACC,KAAK,CAUpB;AAED,IAAME,IAAI,GAAGP,yBAAM,CAACC,GAAG,uVAUnBG,mBAAW,CAACC,KAAK,EAMRH,cAAM,CAACM,WAAW,CAI9B;AACD,IAAMC,MAAM,GAAGT,yBAAM,CAACC,GAAG,4RAQrBG,mBAAW,CAACC,KAAK,CAOpB;AAyBM,IAAMK,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAiB,EAAK;EAAA;EAE1C,sBAAwCC,cAAK,CAACC,QAAQ,CAAC,CAAC,CAAC;IAAA;IAAlDC,YAAY;IAAEC,eAAe;EACpC,IAAMC,aAAa,GAAG,IAAAC,oBAAa,EAACb,mBAAW,CAACC,KAAK,CAACa,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;EAG9B,QAAQd,KAAK,CAACe,IAAI;IAChB,KAAK,UAAU;MAAA,aACmBf,KAAK;MAAA,0BAAnCc,KAAK;MAALA,KAAK,6BAAG,EAAE;MAAEL,KAAK,UAALA,KAAK;MAAKD,IAAI;MAAA;MAC5B;IACF,KAAK,SAAS;IACd;MAAA,cACkDR,KAAK;MAAnDW,KAAK,WAALA,KAAK;MAAEE,OAAO,WAAPA,OAAO;MAAA,4BAAED,KAAK;MAALA,KAAK,8BAAG,EAAE;MAAEH,KAAK,WAALA,KAAK;MAAKD,IAAI;MAAA;MAC5C;EAAM;EAIV,IAAMQ,QAAQ,GAAG,SAAXA,QAAQ,GAAS;IACrBhB,KAAK,CAACe,IAAI,KAAK,UAAU,IAAIX,eAAe,CAACD,YAAY,KAAK,CAAC,GAAGW,KAAK,CAACG,MAAM,GAAG,CAAC,GAAGd,YAAY,GAAG,CAAC,CAAC;EACxG,CAAC;EACD,IAAMe,SAAS,GAAG,SAAZA,SAAS,GAAS;IACtBlB,KAAK,CAACe,IAAI,KAAK,UAAU,IAAIX,eAAe,CAACD,YAAY,GAAG,CAAC,GAAGW,KAAK,CAACG,MAAM,GAAG,CAAC,GAAG,CAAC,GAAGd,YAAY,GAAG,CAAC,CAAC;EAC1G,CAAC;EAED,IAAMgB,WAAyB,GAAGnB,KAAK,CAACe,IAAI,KAAK,UAAU,GAAGD,KAAK,CAACX,YAAY,CAAC,GAAG;IAACQ,KAAK,EAALA,KAAK;IAAEC,KAAK,EAALA,KAAK;IAAEC,OAAO,EAAPA;EAAO,CAAC;EAE3G,oBACE,sBAAC,OAAO,kCAAKL,IAAI;IAAE,SAAS,YAAKA,IAAI,CAACY,SAAS,IAAI,EAAE,cAAIX,KAAK,IAAI,EAAE,MAAI;IAAA,wBACtE,sBAAC,KAAK;MAAA,WAEF,uBAAAU,WAAW,CAACR,KAAK,uDAAjB,mBAAmBI,IAAI,MAAK,OAAO,iBACjC;QAAK,SAAS,EAAEI,WAAW,CAACR,KAAK,CAACU,GAAI;QAAC,GAAG,EAAEF,WAAW,CAACR,KAAK,CAACW,GAAI;QAAC,GAAG,EAAEH,WAAW,CAACR,KAAK,CAACY;MAAI,EAAE,EAGlG,wBAAAJ,WAAW,CAACR,KAAK,wDAAjB,oBAAmBI,IAAI,MAAK,QAAQ,IAAII,WAAW,CAACR,KAAK,CAACE,OAAO;IAAA,EAE7D,eACR,sBAAC,IAAI;MAAA,wBACH,qBAAC,aAAK;QAAA,UAAEM,WAAW,CAACP;MAAK,EAAS,eAClC;QAAA,UAAIO,WAAW,CAACN;MAAO,EAAK;IAAA,EACvB,EAELb,KAAK,CAACe,IAAI,KAAK,UAAU,iBACvB,sBAAC,MAAM;MAAA,wBACH,qBAAC,kBAAU;QAAC,MAAM,EAAEC,QAAS;QAAC,OAAO,EAAE,WAAY;QAAC,KAAK,EAAE,UAAW;QAAA,uBAClE,qBAAC,kBAAW,CAAC,WAAW;MAAE,EACjB,eACb,qBAAC,8BAAc;QAAC,IAAI,EAAEX,aAAa,GAAGmB,WAAI,CAACC,KAAK,GAAGD,WAAI,CAACE,MAAO;QAC/C,SAAS,EAAE,UAAW;QACtB,KAAK,EAAEvB,YAAY,GAAG,CAAE;QACxB,GAAG,EAAEH,KAAK,CAACc,KAAK,CAAEG,MAAQ;QAC1B,IAAI,EAAEU,kCAAkB,CAACC;MAAK,EAAE,eAChD,qBAAC,kBAAU;QAAC,MAAM,EAAEV,SAAU;QAAC,OAAO,EAAE,WAAY;QAAC,KAAK,EAAE,UAAW;QAAA,uBACnE,qBAAC,kBAAW,CAAC,YAAY;MAAE,EAClB;IAAA,EACR;EAAA,GAEL;AAEd,CAAC;AAAC;AAAA;EAxFAH,IAAI,4BAAG,SAAS,EAAG,UAAU;EAI7BJ,KAAK;IAAKI,IAAI,4BAAE,OAAO;IAAEO,GAAG;IAAUC,GAAG;IAAUF,GAAG,4BAAG,MAAM,EAAG,KAAK;EAAA;IAAON,IAAI,4BAAE,QAAQ;IAAEF,OAAO;EAAA;EACrGD,KAAK;EACLC,OAAO;AAAA,qFAIA,SAAS,wFACR,SAAS,EAAG,SAAS,uFAXtB,SAAS,EAAG,UAAU,uFAevB,UAAU,mGACR,SAAS,EAAG,SAAS;EAZ7BF,KAAK;IAAKI,IAAI,4BAAE,OAAO;IAAEO,GAAG;IAAUC,GAAG;IAAUF,GAAG,4BAAG,MAAM,EAAG,KAAK;EAAA;IAAON,IAAI,4BAAE,QAAQ;IAAEF,OAAO;EAAA;EACrGD,KAAK;EACLC,OAAO;AAAA"}

package/dist/Panel/Panel.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-interface BasePanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+interface BasePanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'content'> {
     type?: 'default' | 'carousel';
 }
 interface PanelContent {
@@ -25,5 +25,5 @@ interface CarouselPanelProps extends BasePanelProps {
     items?: PanelContent[];
 }
 export type PanelProps = DefaultPanelProps | CarouselPanelProps;
-export declare const Panel: (props: PanelProps) => JSX.Element;
+export declare const Panel: (props: PanelProps) => React.JSX.Element;
 export {};

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","Wrapper","div","neutral_20","LARGE","Media","Body","neutral_600","Footer","Panel","props","useState","currentImage","setCurrentImage","isLargeScreen","replace","rest","order","undefined","media","title","content","items","type","moveLeft","length","moveRight","currentItem","className","fit","src","alt","Large","Medium","Dots"],"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\ninterface BasePanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\r\n  type?: 'default' | 'carousel';\r\n}\r\n\r\ninterface 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\ninterface DefaultPanelProps extends BasePanelProps, PanelContent {\r\n  type?: 'default';\r\n  order?: 'default' | 'reverse';\r\n}\r\n\r\ninterface CarouselPanelProps extends BasePanelProps {\r\n  type: 'carousel';\r\n  order?: 'default' | 'reverse';\r\n  items?: PanelContent[];\r\n}\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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"}
+{"version":3,"file":"Panel.js","names":["React","styled","BREAKPOINTS","COLORS","Quote","IconButton","SystemIcons","LinearProgress","LinearProgressType","useMediaMatch","Size","Wrapper","div","neutral_20","LARGE","Media","Body","neutral_600","Footer","Panel","props","useState","currentImage","setCurrentImage","isLargeScreen","replace","rest","order","undefined","media","title","content","items","type","moveLeft","length","moveRight","currentItem","className","fit","src","alt","Large","Medium","Dots"],"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\ninterface BasePanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'content'> {\r\n  type?: 'default' | 'carousel';\r\n}\r\n\r\ninterface 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\ninterface DefaultPanelProps extends BasePanelProps, PanelContent {\r\n  type?: 'default';\r\n  order?: 'default' | 'reverse';\r\n}\r\n\r\ninterface CarouselPanelProps extends BasePanelProps {\r\n  type: 'carousel';\r\n  order?: 'default' | 'reverse';\r\n  items?: PanelContent[];\r\n}\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;AAAA;AAE9B,IAAMC,OAAO,GAAGV,MAAM,CAACW,GAAG,yYAGVT,MAAM,CAACU,UAAU,EAS7BX,WAAW,CAACY,KAAK,CAQpB;AAED,IAAMC,KAAK,GAAGd,MAAM,CAACW,GAAG,keA0BpBV,WAAW,CAACY,KAAK,CAUpB;AAED,IAAME,IAAI,GAAGf,MAAM,CAACW,GAAG,yUAUnBV,WAAW,CAACY,KAAK,EAMRX,MAAM,CAACc,WAAW,CAI9B;AACD,IAAMC,MAAM,GAAGjB,MAAM,CAACW,GAAG,8QAQrBV,WAAW,CAACY,KAAK,CAOpB;AAyBD,OAAO,IAAMK,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAiB,EAAK;EAAA;EAE1C,sBAAwCpB,KAAK,CAACqB,QAAQ,CAAC,CAAC,CAAC;IAAA;IAAlDC,YAAY;IAAEC,eAAe;EACpC,IAAMC,aAAa,GAAGf,aAAa,CAACP,WAAW,CAACY,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;EAG9B,QAAQZ,KAAK,CAACa,IAAI;IAChB,KAAK,UAAU;MAAA,aACmBb,KAAK;MAAA,0BAAnCY,KAAK;MAALA,KAAK,6BAAG,EAAE;MAAEL,KAAK,UAALA,KAAK;MAAKD,IAAI;MAAA;MAC5B;IACF,KAAK,SAAS;IACd;MAAA,cACkDN,KAAK;MAAnDS,KAAK,WAALA,KAAK;MAAEE,OAAO,WAAPA,OAAO;MAAA,4BAAED,KAAK;MAALA,KAAK,8BAAG,EAAE;MAAEH,KAAK,WAALA,KAAK;MAAKD,IAAI;MAAA;MAC5C;EAAM;EAIV,IAAMQ,QAAQ,GAAG,SAAXA,QAAQ,GAAS;IACrBd,KAAK,CAACa,IAAI,KAAK,UAAU,IAAIV,eAAe,CAACD,YAAY,KAAK,CAAC,GAAGU,KAAK,CAACG,MAAM,GAAG,CAAC,GAAGb,YAAY,GAAG,CAAC,CAAC;EACxG,CAAC;EACD,IAAMc,SAAS,GAAG,SAAZA,SAAS,GAAS;IACtBhB,KAAK,CAACa,IAAI,KAAK,UAAU,IAAIV,eAAe,CAACD,YAAY,GAAG,CAAC,GAAGU,KAAK,CAACG,MAAM,GAAG,CAAC,GAAG,CAAC,GAAGb,YAAY,GAAG,CAAC,CAAC;EAC1G,CAAC;EAED,IAAMe,WAAyB,GAAGjB,KAAK,CAACa,IAAI,KAAK,UAAU,GAAGD,KAAK,CAACV,YAAY,CAAC,GAAG;IAACO,KAAK,EAALA,KAAK;IAAEC,KAAK,EAALA,KAAK;IAAEC,OAAO,EAAPA;EAAO,CAAC;EAE3G,oBACE,MAAC,OAAO,kCAAKL,IAAI;IAAE,SAAS,YAAKA,IAAI,CAACY,SAAS,IAAI,EAAE,cAAIX,KAAK,IAAI,EAAE,MAAI;IAAA,wBACtE,MAAC,KAAK;MAAA,WAEF,uBAAAU,WAAW,CAACR,KAAK,uDAAjB,mBAAmBI,IAAI,MAAK,OAAO,iBACjC;QAAK,SAAS,EAAEI,WAAW,CAACR,KAAK,CAACU,GAAI;QAAC,GAAG,EAAEF,WAAW,CAACR,KAAK,CAACW,GAAI;QAAC,GAAG,EAAEH,WAAW,CAACR,KAAK,CAACY;MAAI,EAAE,EAGlG,wBAAAJ,WAAW,CAACR,KAAK,wDAAjB,oBAAmBI,IAAI,MAAK,QAAQ,IAAII,WAAW,CAACR,KAAK,CAACE,OAAO;IAAA,EAE7D,eACR,MAAC,IAAI;MAAA,wBACH,KAAC,KAAK;QAAA,UAAEM,WAAW,CAACP;MAAK,EAAS,eAClC;QAAA,UAAIO,WAAW,CAACN;MAAO,EAAK;IAAA,EACvB,EAELX,KAAK,CAACa,IAAI,KAAK,UAAU,iBACvB,MAAC,MAAM;MAAA,wBACH,KAAC,UAAU;QAAC,MAAM,EAAEC,QAAS;QAAC,OAAO,EAAE,WAAY;QAAC,KAAK,EAAE,UAAW;QAAA,uBAClE,KAAC,WAAW,CAAC,WAAW;MAAE,EACjB,eACb,KAAC,cAAc;QAAC,IAAI,EAAEV,aAAa,GAAGd,IAAI,CAACgC,KAAK,GAAGhC,IAAI,CAACiC,MAAO;QAC/C,SAAS,EAAE,UAAW;QACtB,KAAK,EAAErB,YAAY,GAAG,CAAE;QACxB,GAAG,EAAEF,KAAK,CAACY,KAAK,CAAEG,MAAQ;QAC1B,IAAI,EAAE3B,kBAAkB,CAACoC;MAAK,EAAE,eAChD,KAAC,UAAU;QAAC,MAAM,EAAER,SAAU;QAAC,OAAO,EAAE,WAAY;QAAC,KAAK,EAAE,UAAW;QAAA,uBACnE,KAAC,WAAW,CAAC,YAAY;MAAE,EAClB;IAAA,EACR;EAAA,GAEL;AAEd,CAAC;AAAC;EAxFAH,IAAI,aAAG,SAAS,EAAG,UAAU;EAI7BJ,KAAK;IAAKI,IAAI,aAAE,OAAO;IAAEO,GAAG;IAAUC,GAAG;IAAUF,GAAG,aAAG,MAAM,EAAG,KAAK;EAAA;IAAON,IAAI,aAAE,QAAQ;IAAEF,OAAO;EAAA;EACrGD,KAAK;EACLC,OAAO;AAAA,wDAIA,SAAS,2DACR,SAAS,EAAG,SAAS,0DAXtB,SAAS,EAAG,UAAU,0DAevB,UAAU,sEACR,SAAS,EAAG,SAAS;EAZ7BF,KAAK;IAAKI,IAAI,aAAE,OAAO;IAAEO,GAAG;IAAUC,GAAG;IAAUF,GAAG,aAAG,MAAM,EAAG,KAAK;EAAA;IAAON,IAAI,aAAE,QAAQ;IAAEF,OAAO;EAAA;EACrGD,KAAK;EACLC,OAAO;AAAA"}

package/dist/SegmentControl/SegmentControl.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentControl.cjs","names":["SegmentControlItemContent","styled","div","COLORS","neutral_600","SegmentControlItemBackground","neutral_20","SegmentControlItemWrapper","focusStyles","Z_INDEXES","hover","primary_100","primary_700","active","primary_200","primary_800","neutral_300","primary_500","white","neutral_100","SegmentControlWrapper","ComponentSStyling","ComponentTextStyle","Bold","ComponentMStyling","SegmentControl","items","size","Size","Medium","onChange","selected","className","rest","onKeyPress","e","item","key","document","activeElement","blur","disabled","onClick","map","a","i","content","undefined","defaultOnMouseDownHandler"],"sources":["../../src/SegmentControl/SegmentControl.tsx"],"sourcesContent":["import React from 'react';\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles, Z_INDEXES} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\n\r\nexport const SegmentControlItemContent = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 100%;\r\n  border-radius: 8px;\r\n  padding: 0 16px;\r\n\r\n  background-color: transparent;\r\n  color: ${COLORS.neutral_600};\r\n`\r\n\r\nexport const SegmentControlItemBackground = styled.div`\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  background-color: ${COLORS.neutral_20};\r\n  padding: 4px 0px;\r\n`;\r\n\r\nexport const SegmentControlItemWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex: 1;\r\n  cursor: pointer;\r\n  min-height: 48px;\r\n\r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover {\r\n    z-index: ${Z_INDEXES.hover};\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: ${COLORS.primary_100};\r\n      color: ${COLORS.primary_700};\r\n    }\r\n  }\r\n\r\n  &:active {\r\n    z-index: ${Z_INDEXES.active};\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: ${COLORS.primary_200};\r\n      color: ${COLORS.primary_800};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: transparent;\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n\r\n  &.selected {\r\n    cursor: default;\r\n    pointer-events: none;\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: ${COLORS.primary_500};\r\n      color: ${COLORS.white};\r\n    }\r\n  }\r\n\r\n  &.selected.disabled {\r\n    cursor: not-allowed;\r\n    pointer-events: unset;\r\n    \r\n    ${SegmentControlItemContent} {\r\n      background-color: ${COLORS.neutral_100};\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const SegmentControlWrapper = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  ${SegmentControlItemWrapper}:first-of-type {\r\n    ${SegmentControlItemBackground} {\r\n      border-bottom-left-radius: 12px;\r\n      border-top-left-radius: 12px;\r\n      padding-left: 4px;\r\n    }\r\n  }\r\n\r\n  ${SegmentControlItemWrapper}:last-of-type {\r\n    ${SegmentControlItemBackground} {\r\n      border-bottom-right-radius: 12px;\r\n      border-top-right-radius: 12px;\r\n      padding-right: 4px;\r\n    }\r\n  }\r\n\r\n\r\n  &.small {\r\n    ${SegmentControlItemContent} {\r\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\r\n      min-height: 32px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${SegmentControlItemContent} {\r\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\r\n      min-height: 40px;\r\n    }\r\n  }\r\n`;\r\n\r\n\r\nexport interface SegmentControlItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\r\n  key: string\r\n  disabled?: boolean;\r\n  content: React.ReactNode | string;\r\n}\r\n\r\ninterface SegmentControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\r\n  items: SegmentControlItem[];\r\n  selected: string;\r\n  onChange: (value: string) => void;\r\n  size?: Size.Small | Size.Medium;\r\n}\r\n\r\nconst SegmentControl: React.FunctionComponent<SegmentControlProps> = ({\r\n                                                                        items,\r\n                                                                        size = Size.Medium,\r\n                                                                        onChange,\r\n                                                                        selected,\r\n                                                                        className,\r\n                                                                        ...rest\r\n                                                                      }) => {\r\n  const onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>, item: SegmentControlItem) => {\r\n    if (e.key === 'Enter' || e.key === ' ') {\r\n      //@ts-ignore\r\n      document?.activeElement?.blur();\r\n      !item.disabled && onChange(item.key);\r\n    }\r\n  };\r\n\r\n  const onClick = (e: React.MouseEvent, item: SegmentControlItem) => {\r\n    !item.disabled && onChange(item.key);\r\n  }\r\n\r\n  return (\r\n    <SegmentControlWrapper className={`${size} ${className || ''}`} {...rest}>\r\n      {items.map((a, i) => {\r\n        const {key, disabled, content, className, ...rest} = a;\r\n        return <SegmentControlItemWrapper key={a.key || i}\r\n                                          className={(className || '') + (a.disabled ? 'disabled' : '') + (a.key === selected ? ' selected' : '')}\r\n                                          tabIndex={a.disabled || a.key === selected ? -1 : 0}\r\n                                          onClick={a.disabled ? undefined : (e) => onClick(e, a)}\r\n                                          onMouseDown={defaultOnMouseDownHandler}\r\n                                          onKeyPress={a.disabled ? undefined : (e) => onKeyPress(e, a)}\r\n                                          {...rest}>\r\n          <SegmentControlItemBackground>\r\n            <SegmentControlItemContent>\r\n              {a.content}\r\n            </SegmentControlItemContent>\r\n          </SegmentControlItemBackground>\r\n        </SegmentControlItemWrapper>;\r\n      })\r\n      }\r\n    </SegmentControlWrapper>\r\n  );\r\n};\r\n\r\nexport default SegmentControl;\r\n"],"mappings":"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"}
+{"version":3,"file":"SegmentControl.cjs","names":["SegmentControlItemContent","styled","div","COLORS","neutral_600","SegmentControlItemBackground","neutral_20","SegmentControlItemWrapper","focusStyles","Z_INDEXES","hover","primary_100","primary_700","active","primary_200","primary_800","neutral_300","primary_500","white","neutral_100","SegmentControlWrapper","ComponentSStyling","ComponentTextStyle","Bold","ComponentMStyling","SegmentControl","items","size","Size","Medium","onChange","selected","className","rest","onKeyPress","e","item","key","document","activeElement","blur","disabled","onClick","map","a","i","content","undefined","defaultOnMouseDownHandler"],"sources":["../../src/SegmentControl/SegmentControl.tsx"],"sourcesContent":["import React from 'react';\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles, Z_INDEXES} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\n\r\nexport const SegmentControlItemContent = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 100%;\r\n  border-radius: 8px;\r\n  padding: 0 16px;\r\n\r\n  background-color: transparent;\r\n  color: ${COLORS.neutral_600};\r\n`\r\n\r\nexport const SegmentControlItemBackground = styled.div`\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  background-color: ${COLORS.neutral_20};\r\n  padding: 4px 0px;\r\n`;\r\n\r\nexport const SegmentControlItemWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex: 1;\r\n  cursor: pointer;\r\n  min-height: 48px;\r\n\r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover {\r\n    z-index: ${Z_INDEXES.hover};\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: ${COLORS.primary_100};\r\n      color: ${COLORS.primary_700};\r\n    }\r\n  }\r\n\r\n  &:active {\r\n    z-index: ${Z_INDEXES.active};\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: ${COLORS.primary_200};\r\n      color: ${COLORS.primary_800};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: transparent;\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n\r\n  &.selected {\r\n    cursor: default;\r\n    pointer-events: none;\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: ${COLORS.primary_500};\r\n      color: ${COLORS.white};\r\n    }\r\n  }\r\n\r\n  &.selected.disabled {\r\n    cursor: not-allowed;\r\n    pointer-events: unset;\r\n    \r\n    ${SegmentControlItemContent} {\r\n      background-color: ${COLORS.neutral_100};\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const SegmentControlWrapper = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  ${SegmentControlItemWrapper}:first-of-type {\r\n    ${SegmentControlItemBackground} {\r\n      border-bottom-left-radius: 12px;\r\n      border-top-left-radius: 12px;\r\n      padding-left: 4px;\r\n    }\r\n  }\r\n\r\n  ${SegmentControlItemWrapper}:last-of-type {\r\n    ${SegmentControlItemBackground} {\r\n      border-bottom-right-radius: 12px;\r\n      border-top-right-radius: 12px;\r\n      padding-right: 4px;\r\n    }\r\n  }\r\n\r\n\r\n  &.small {\r\n    ${SegmentControlItemContent} {\r\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\r\n      min-height: 32px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${SegmentControlItemContent} {\r\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\r\n      min-height: 40px;\r\n    }\r\n  }\r\n`;\r\n\r\n\r\nexport interface SegmentControlItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick' | 'content'> {\r\n  key: string\r\n  disabled?: boolean;\r\n  content: React.ReactNode | string;\r\n}\r\n\r\ninterface SegmentControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\r\n  items: SegmentControlItem[];\r\n  selected: string;\r\n  onChange: (value: string) => void;\r\n  size?: Size.Small | Size.Medium;\r\n}\r\n\r\nconst SegmentControl: React.FunctionComponent<SegmentControlProps> = ({\r\n                                                                        items,\r\n                                                                        size = Size.Medium,\r\n                                                                        onChange,\r\n                                                                        selected,\r\n                                                                        className,\r\n                                                                        ...rest\r\n                                                                      }) => {\r\n  const onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>, item: SegmentControlItem) => {\r\n    if (e.key === 'Enter' || e.key === ' ') {\r\n      //@ts-ignore\r\n      document?.activeElement?.blur();\r\n      !item.disabled && onChange(item.key);\r\n    }\r\n  };\r\n\r\n  const onClick = (e: React.MouseEvent, item: SegmentControlItem) => {\r\n    !item.disabled && onChange(item.key);\r\n  }\r\n\r\n  return (\r\n    <SegmentControlWrapper className={`${size} ${className || ''}`} {...rest}>\r\n      {items.map((a, i) => {\r\n        const {key, disabled, content, className, ...rest} = a;\r\n        return <SegmentControlItemWrapper key={a.key || i}\r\n                                          className={(className || '') + (a.disabled ? 'disabled' : '') + (a.key === selected ? ' selected' : '')}\r\n                                          tabIndex={a.disabled || a.key === selected ? -1 : 0}\r\n                                          onClick={a.disabled ? undefined : (e) => onClick(e, a)}\r\n                                          onMouseDown={defaultOnMouseDownHandler}\r\n                                          onKeyPress={a.disabled ? undefined : (e) => onKeyPress(e, a)}\r\n                                          {...rest}>\r\n          <SegmentControlItemBackground>\r\n            <SegmentControlItemContent>\r\n              {a.content}\r\n            </SegmentControlItemContent>\r\n          </SegmentControlItemBackground>\r\n        </SegmentControlItemWrapper>;\r\n      })\r\n      }\r\n    </SegmentControlWrapper>\r\n  );\r\n};\r\n\r\nexport default SegmentControl;\r\n"],"mappings":"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"}

package/dist/SegmentControl/SegmentControl.d.ts

@@ -4,7 +4,7 @@ export declare const SegmentControlItemContent: import("styled-components").Styl
 export declare const SegmentControlItemBackground: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SegmentControlItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SegmentControlWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export interface SegmentControlItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {
+export interface SegmentControlItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick' | 'content'> {
     key: string;
     disabled?: boolean;
     content: React.ReactNode | string;

package/dist/SegmentControl/SegmentControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentControl.js","names":["React","Size","styled","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","SegmentControlItemContent","div","neutral_600","SegmentControlItemBackground","neutral_20","SegmentControlItemWrapper","hover","primary_100","primary_700","active","primary_200","primary_800","neutral_300","primary_500","white","neutral_100","SegmentControlWrapper","Bold","SegmentControl","items","size","Medium","onChange","selected","className","rest","onKeyPress","e","item","key","document","activeElement","blur","disabled","onClick","map","a","i","content","undefined"],"sources":["../../src/SegmentControl/SegmentControl.tsx"],"sourcesContent":["import React from 'react';\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles, Z_INDEXES} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\n\r\nexport const SegmentControlItemContent = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 100%;\r\n  border-radius: 8px;\r\n  padding: 0 16px;\r\n\r\n  background-color: transparent;\r\n  color: ${COLORS.neutral_600};\r\n`\r\n\r\nexport const SegmentControlItemBackground = styled.div`\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  background-color: ${COLORS.neutral_20};\r\n  padding: 4px 0px;\r\n`;\r\n\r\nexport const SegmentControlItemWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex: 1;\r\n  cursor: pointer;\r\n  min-height: 48px;\r\n\r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover {\r\n    z-index: ${Z_INDEXES.hover};\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: ${COLORS.primary_100};\r\n      color: ${COLORS.primary_700};\r\n    }\r\n  }\r\n\r\n  &:active {\r\n    z-index: ${Z_INDEXES.active};\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: ${COLORS.primary_200};\r\n      color: ${COLORS.primary_800};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: transparent;\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n\r\n  &.selected {\r\n    cursor: default;\r\n    pointer-events: none;\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: ${COLORS.primary_500};\r\n      color: ${COLORS.white};\r\n    }\r\n  }\r\n\r\n  &.selected.disabled {\r\n    cursor: not-allowed;\r\n    pointer-events: unset;\r\n    \r\n    ${SegmentControlItemContent} {\r\n      background-color: ${COLORS.neutral_100};\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const SegmentControlWrapper = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  ${SegmentControlItemWrapper}:first-of-type {\r\n    ${SegmentControlItemBackground} {\r\n      border-bottom-left-radius: 12px;\r\n      border-top-left-radius: 12px;\r\n      padding-left: 4px;\r\n    }\r\n  }\r\n\r\n  ${SegmentControlItemWrapper}:last-of-type {\r\n    ${SegmentControlItemBackground} {\r\n      border-bottom-right-radius: 12px;\r\n      border-top-right-radius: 12px;\r\n      padding-right: 4px;\r\n    }\r\n  }\r\n\r\n\r\n  &.small {\r\n    ${SegmentControlItemContent} {\r\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\r\n      min-height: 32px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${SegmentControlItemContent} {\r\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\r\n      min-height: 40px;\r\n    }\r\n  }\r\n`;\r\n\r\n\r\nexport interface SegmentControlItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\r\n  key: string\r\n  disabled?: boolean;\r\n  content: React.ReactNode | string;\r\n}\r\n\r\ninterface SegmentControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\r\n  items: SegmentControlItem[];\r\n  selected: string;\r\n  onChange: (value: string) => void;\r\n  size?: Size.Small | Size.Medium;\r\n}\r\n\r\nconst SegmentControl: React.FunctionComponent<SegmentControlProps> = ({\r\n                                                                        items,\r\n                                                                        size = Size.Medium,\r\n                                                                        onChange,\r\n                                                                        selected,\r\n                                                                        className,\r\n                                                                        ...rest\r\n                                                                      }) => {\r\n  const onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>, item: SegmentControlItem) => {\r\n    if (e.key === 'Enter' || e.key === ' ') {\r\n      //@ts-ignore\r\n      document?.activeElement?.blur();\r\n      !item.disabled && onChange(item.key);\r\n    }\r\n  };\r\n\r\n  const onClick = (e: React.MouseEvent, item: SegmentControlItem) => {\r\n    !item.disabled && onChange(item.key);\r\n  }\r\n\r\n  return (\r\n    <SegmentControlWrapper className={`${size} ${className || ''}`} {...rest}>\r\n      {items.map((a, i) => {\r\n        const {key, disabled, content, className, ...rest} = a;\r\n        return <SegmentControlItemWrapper key={a.key || i}\r\n                                          className={(className || '') + (a.disabled ? 'disabled' : '') + (a.key === selected ? ' selected' : '')}\r\n                                          tabIndex={a.disabled || a.key === selected ? -1 : 0}\r\n                                          onClick={a.disabled ? undefined : (e) => onClick(e, a)}\r\n                                          onMouseDown={defaultOnMouseDownHandler}\r\n                                          onKeyPress={a.disabled ? undefined : (e) => onKeyPress(e, a)}\r\n                                          {...rest}>\r\n          <SegmentControlItemBackground>\r\n            <SegmentControlItemContent>\r\n              {a.content}\r\n            </SegmentControlItemContent>\r\n          </SegmentControlItemBackground>\r\n        </SegmentControlItemWrapper>;\r\n      })\r\n      }\r\n    </SegmentControlWrapper>\r\n  );\r\n};\r\n\r\nexport default SegmentControl;\r\n"],"mappings":"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"}
+{"version":3,"file":"SegmentControl.js","names":["React","Size","styled","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","SegmentControlItemContent","div","neutral_600","SegmentControlItemBackground","neutral_20","SegmentControlItemWrapper","hover","primary_100","primary_700","active","primary_200","primary_800","neutral_300","primary_500","white","neutral_100","SegmentControlWrapper","Bold","SegmentControl","items","size","Medium","onChange","selected","className","rest","onKeyPress","e","item","key","document","activeElement","blur","disabled","onClick","map","a","i","content","undefined"],"sources":["../../src/SegmentControl/SegmentControl.tsx"],"sourcesContent":["import React from 'react';\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles, Z_INDEXES} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\n\r\nexport const SegmentControlItemContent = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 100%;\r\n  border-radius: 8px;\r\n  padding: 0 16px;\r\n\r\n  background-color: transparent;\r\n  color: ${COLORS.neutral_600};\r\n`\r\n\r\nexport const SegmentControlItemBackground = styled.div`\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  background-color: ${COLORS.neutral_20};\r\n  padding: 4px 0px;\r\n`;\r\n\r\nexport const SegmentControlItemWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex: 1;\r\n  cursor: pointer;\r\n  min-height: 48px;\r\n\r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover {\r\n    z-index: ${Z_INDEXES.hover};\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: ${COLORS.primary_100};\r\n      color: ${COLORS.primary_700};\r\n    }\r\n  }\r\n\r\n  &:active {\r\n    z-index: ${Z_INDEXES.active};\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: ${COLORS.primary_200};\r\n      color: ${COLORS.primary_800};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: transparent;\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n\r\n  &.selected {\r\n    cursor: default;\r\n    pointer-events: none;\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: ${COLORS.primary_500};\r\n      color: ${COLORS.white};\r\n    }\r\n  }\r\n\r\n  &.selected.disabled {\r\n    cursor: not-allowed;\r\n    pointer-events: unset;\r\n    \r\n    ${SegmentControlItemContent} {\r\n      background-color: ${COLORS.neutral_100};\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const SegmentControlWrapper = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  ${SegmentControlItemWrapper}:first-of-type {\r\n    ${SegmentControlItemBackground} {\r\n      border-bottom-left-radius: 12px;\r\n      border-top-left-radius: 12px;\r\n      padding-left: 4px;\r\n    }\r\n  }\r\n\r\n  ${SegmentControlItemWrapper}:last-of-type {\r\n    ${SegmentControlItemBackground} {\r\n      border-bottom-right-radius: 12px;\r\n      border-top-right-radius: 12px;\r\n      padding-right: 4px;\r\n    }\r\n  }\r\n\r\n\r\n  &.small {\r\n    ${SegmentControlItemContent} {\r\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\r\n      min-height: 32px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${SegmentControlItemContent} {\r\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\r\n      min-height: 40px;\r\n    }\r\n  }\r\n`;\r\n\r\n\r\nexport interface SegmentControlItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick' | 'content'> {\r\n  key: string\r\n  disabled?: boolean;\r\n  content: React.ReactNode | string;\r\n}\r\n\r\ninterface SegmentControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\r\n  items: SegmentControlItem[];\r\n  selected: string;\r\n  onChange: (value: string) => void;\r\n  size?: Size.Small | Size.Medium;\r\n}\r\n\r\nconst SegmentControl: React.FunctionComponent<SegmentControlProps> = ({\r\n                                                                        items,\r\n                                                                        size = Size.Medium,\r\n                                                                        onChange,\r\n                                                                        selected,\r\n                                                                        className,\r\n                                                                        ...rest\r\n                                                                      }) => {\r\n  const onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>, item: SegmentControlItem) => {\r\n    if (e.key === 'Enter' || e.key === ' ') {\r\n      //@ts-ignore\r\n      document?.activeElement?.blur();\r\n      !item.disabled && onChange(item.key);\r\n    }\r\n  };\r\n\r\n  const onClick = (e: React.MouseEvent, item: SegmentControlItem) => {\r\n    !item.disabled && onChange(item.key);\r\n  }\r\n\r\n  return (\r\n    <SegmentControlWrapper className={`${size} ${className || ''}`} {...rest}>\r\n      {items.map((a, i) => {\r\n        const {key, disabled, content, className, ...rest} = a;\r\n        return <SegmentControlItemWrapper key={a.key || i}\r\n                                          className={(className || '') + (a.disabled ? 'disabled' : '') + (a.key === selected ? ' selected' : '')}\r\n                                          tabIndex={a.disabled || a.key === selected ? -1 : 0}\r\n                                          onClick={a.disabled ? undefined : (e) => onClick(e, a)}\r\n                                          onMouseDown={defaultOnMouseDownHandler}\r\n                                          onKeyPress={a.disabled ? undefined : (e) => onKeyPress(e, a)}\r\n                                          {...rest}>\r\n          <SegmentControlItemBackground>\r\n            <SegmentControlItemContent>\r\n              {a.content}\r\n            </SegmentControlItemContent>\r\n          </SegmentControlItemBackground>\r\n        </SegmentControlItemWrapper>;\r\n      })\r\n      }\r\n    </SegmentControlWrapper>\r\n  );\r\n};\r\n\r\nexport default SegmentControl;\r\n"],"mappings":"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"}

package/dist/SideMenu/SideMenuBody.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { SideMenuProps } from './types';
-export declare const SideMenuBody: (props: SideMenuProps) => JSX.Element;
+export declare const SideMenuBody: (props: SideMenuProps) => React.JSX.Element;

package/dist/SideMenu/SideMenuFooter.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { SideMenuProps } from './types';
-export declare const SideMenuFooter: (props: SideMenuProps) => JSX.Element;
+export declare const SideMenuFooter: (props: SideMenuProps) => React.JSX.Element;

package/dist/SideMenu/SideMenuHeader.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { SideMenuProps } from './types';
-export declare const SideMenuHeader: (props: SideMenuProps) => JSX.Element;
+export declare const SideMenuHeader: (props: SideMenuProps) => React.JSX.Element;

package/dist/Switcher/MobileSwitcherMenu.d.ts

@@ -9,5 +9,5 @@ interface Props {
     footerAction?: MenuButton;
     customContent?: React.ReactNode;
 }
-declare const MobileSwitcherMenu: ({ label, header, note, onMenuClose, customContent, items, footerAction }: Props) => JSX.Element;
+declare const MobileSwitcherMenu: ({ label, header, note, onMenuClose, customContent, items, footerAction }: Props) => React.JSX.Element;
 export default MobileSwitcherMenu;

package/dist/Switcher/SwitcherMenuItem.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 export interface SwitcherNavItem {
     label: string;
     url: string;
@@ -7,5 +7,5 @@ export interface SwitcherNavItem {
     as?: any;
     testId?: string;
 }
-declare const SwitcherMenuItem: ({ label, url, disabled, icon, as, testId }: SwitcherNavItem) => JSX.Element;
+declare const SwitcherMenuItem: ({ label, url, disabled, icon, as, testId }: SwitcherNavItem) => React.JSX.Element;
 export default SwitcherMenuItem;

package/dist/Tabs/HorizontalTabs.d.ts

@@ -16,5 +16,5 @@ export interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButto
     selected: boolean;
     to: string;
 }
-declare const HorizontalTabs: ({ size, tabs, sideFill, fullWidth, onTabChange, variant, ...rest }: HorizontalTabProps) => JSX.Element;
+declare const HorizontalTabs: ({ size, tabs, sideFill, fullWidth, onTabChange, variant, ...rest }: HorizontalTabProps) => React.JSX.Element;
 export default HorizontalTabs;

package/dist/Tabs/VerticalTabs.d.ts

@@ -15,5 +15,5 @@ interface VerticalTabsProps {
     size?: Size.Small | Size.Medium | Size.Large;
     entries: VerticalTabEntry[];
 }
-declare const VerticalTabs: ({ size, entries }: VerticalTabsProps) => JSX.Element;
+declare const VerticalTabs: ({ size, entries }: VerticalTabsProps) => React.JSX.Element;
 export default VerticalTabs;

package/dist/Tile/TileCommonItems.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { TileDropdownButton, TileHyperLink, TileIconButton, TileNote, TileStandardButton, TileToggleButton } from './TileTypes';
+import React from 'react';
 import { Size } from '../types';
 export declare const TileNoteText: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TileNoteIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -7,4 +7,4 @@ export declare const TileNoteWrapper: import("styled-components").StyledComponen
 export declare const TileHyperLinkIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TileHyperLinkText: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TileHyperLinkWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const RenderTileItem: (item: TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton | TileNote | TileHyperLink, size: Size, key?: any | undefined) => JSX.Element;
+export declare const RenderTileItem: (item: TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton | TileNote | TileHyperLink, size: Size, key?: any | undefined) => React.JSX.Element;

package/dist/Toasters/Toast.d.ts

@@ -35,5 +35,5 @@ type Props = {
     options?: ToastOptions;
     testId?: string;
 };
-declare const Toast: ({ content, remove, options, testId }: Props) => JSX.Element;
+declare const Toast: ({ content, remove, options, testId }: Props) => React.JSX.Element;
 export default Toast;

package/dist/Tooltips/TooltipOverflow.cjs

@@ -35,7 +35,7 @@ var TooltipOverflow = function TooltipOverflow(_ref) {
     _ref$align = _ref.align,
     align = _ref$align === void 0 ? 'center' : _ref$align,
     _ref$position = _ref.position,
-    position = _ref$position === void 0 ? 'top' : _ref$position,
+    position = _ref$position === void 0 ? 'bottom' : _ref$position,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _React$useState = React.useState(false),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -54,9 +54,14 @@ var TooltipOverflow = function TooltipOverflow(_ref) {
     checkIfOverflowed();
   }, [customW, customH]);
   var checkIfOverflowed = function checkIfOverflowed() {
-    var _ref2;
+    var _ref2, _input$current;
     //adding +3 offset to offsetWidth, because sometimes when there is no overflow, scrollWidth can be equal to offsetWidth + 1
     var over = (_ref2 = input && !focused && input.current && input.current.offsetWidth + 3 < input.current.scrollWidth) !== null && _ref2 !== void 0 ? _ref2 : false;
+    if ((input === null || input === void 0 ? void 0 : (_input$current = input.current) === null || _input$current === void 0 ? void 0 : _input$current.id) == "overflowTest") {
+      console.log(input.current.offsetWidth);
+      console.log(input.current.scrollWidth);
+      console.log(input.current);
+    }
     setTextOverflowed(over);
   };
   React.useEffect(function () {

package/dist/Tooltips/TooltipOverflow.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipOverflow.cjs","names":["TooltipOverflow","label","children","input","withArrow","maxWidth","width","value","size","Size","Small","height","align","position","props","React","useState","textOverflowed","setTextOverflowed","focused","setFocused","useResizeDetector","targetRef","customW","customH","useEffect","checkIfOverflowed","over","current","offsetWidth","scrollWidth","onFocus","onBlur","removeEventListener","renderedCallback","useCallback","addEventListener"],"sources":["../../src/Tooltips/TooltipOverflow.tsx"],"sourcesContent":["\r\nimport * as React from 'react';\r\n\r\nimport { TooltipProps } from './TooltipTypes';\r\nimport { useResizeDetector } from 'react-resize-detector';\r\n\r\nimport { TooltipContainer, Tooltip } from './TooltipStyles';\r\nimport { Size } from '..';\r\n \r\ninterface TooltipOverflowProps extends TooltipProps {\r\n    input?: React.MutableRefObject<HTMLInputElement | null>;\r\n    maxWidth?: string;\r\n    width?: string;\r\n    value?: string;\r\n}\r\n\r\n const TooltipOverflow = ({\r\n   label, children,\r\n   input,\r\n   withArrow,\r\n   maxWidth,\r\n   width,\r\n   value,\r\n   size = Size.Small,\r\n   height = 'auto',\r\n   align = 'center', \r\n   position = 'top',\r\n   ...props } : TooltipOverflowProps) => {\r\n\r\n  const [textOverflowed, setTextOverflowed] = React.useState<boolean>(false);\r\n  const [focused, setFocused] = React.useState<boolean>(false);\r\n  const {width: customW, height: customH} = useResizeDetector({ targetRef: input });\r\n\r\n  React.useEffect(() => {\r\n    checkIfOverflowed();\r\n  }, [customW, customH]);\r\n\r\n  const checkIfOverflowed = () => {\r\n    //adding +3 offset to offsetWidth, because sometimes when there is no overflow, scrollWidth can be equal to offsetWidth + 1\r\n    const over = (input && !focused && input.current && input.current.offsetWidth + 3 < input.current.scrollWidth) ?? false;\r\n    setTextOverflowed(over);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    checkIfOverflowed();\r\n  });\r\n\r\n  const onFocus = () => {\r\n    checkIfOverflowed();\r\n    setFocused(true);\r\n  };\r\n\r\n  const onBlur = () => {\r\n    setFocused(false);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    return () => {\r\n      if(input?.current)\r\n      {\r\n        input?.current.removeEventListener(\"focus\", onFocus);\r\n        input?.current.removeEventListener(\"blur\", onBlur);\r\n      }\r\n    }\r\n  }, []);\r\n\r\n  const renderedCallback = React.useCallback(() => {\r\n    if(input && input.current)\r\n    {\r\n      input.current.addEventListener(\"focus\", onFocus);\r\n      input.current.addEventListener(\"blur\", onBlur);\r\n      checkIfOverflowed();\r\n    }\r\n  }, []);\r\n \r\n    return <div ref={renderedCallback}>{textOverflowed && <Tooltip align={align}\r\n               height={height}\r\n               role=\"tooltip\"\r\n               maxWidth={maxWidth}\r\n               width={width}\r\n               size={size}\r\n               withArrow={withArrow}\r\n               position={position}\r\n               {...props}>\r\n                <span>\r\n               {children} </span>\r\n            </Tooltip> }</div>;\r\n };\r\n \r\n export default TooltipOverflow;\r\n"],"mappings":";;;;;;;;;;;;AACA;AAGA;AAEA;AACA;AAA0B;AAAA;AAAA;AAAA;AAAA;AAAA;AASzB,IAAMA,eAAe,GAAG,SAAlBA,eAAe,OAWmB;EAAA,IAVtCC,KAAK,QAALA,KAAK;IAAEC,QAAQ,QAARA,QAAQ;IACfC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,KAAK,QAALA,KAAK;IAAA,iBACLC,IAAI;IAAJA,IAAI,0BAAGC,MAAI,CAACC,KAAK;IAAA,mBACjBC,MAAM;IAANA,MAAM,4BAAG,MAAM;IAAA,kBACfC,KAAK;IAALA,KAAK,2BAAG,QAAQ;IAAA,qBAChBC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IACbC,KAAK;EAET,sBAA4CC,KAAK,CAACC,QAAQ,CAAU,KAAK,CAAC;IAAA;IAAnEC,cAAc;IAAEC,iBAAiB;EACxC,uBAA8BH,KAAK,CAACC,QAAQ,CAAU,KAAK,CAAC;IAAA;IAArDG,OAAO;IAAEC,UAAU;EAC1B,yBAA0C,IAAAC,sCAAiB,EAAC;MAAEC,SAAS,EAAEnB;IAAM,CAAC,CAAC;IAAnEoB,OAAO,sBAAdjB,KAAK;IAAmBkB,OAAO,sBAAfb,MAAM;EAE7BI,KAAK,CAACU,SAAS,CAAC,YAAM;IACpBC,iBAAiB,EAAE;EACrB,CAAC,EAAE,CAACH,OAAO,EAAEC,OAAO,CAAC,CAAC;EAEtB,IAAME,iBAAiB,GAAG,SAApBA,iBAAiB,GAAS;IAAA;IAC9B;IACA,IAAMC,IAAI,YAAIxB,KAAK,IAAI,CAACgB,OAAO,IAAIhB,KAAK,CAACyB,OAAO,IAAIzB,KAAK,CAACyB,OAAO,CAACC,WAAW,GAAG,CAAC,GAAG1B,KAAK,CAACyB,OAAO,CAACE,WAAW,yCAAK,KAAK;IACvHZ,iBAAiB,CAACS,IAAI,CAAC;EACzB,CAAC;EAEDZ,KAAK,CAACU,SAAS,CAAC,YAAM;IACpBC,iBAAiB,EAAE;EACrB,CAAC,CAAC;EAEF,IAAMK,OAAO,GAAG,SAAVA,OAAO,GAAS;IACpBL,iBAAiB,EAAE;IACnBN,UAAU,CAAC,IAAI,CAAC;EAClB,CAAC;EAED,IAAMY,MAAM,GAAG,SAATA,MAAM,GAAS;IACnBZ,UAAU,CAAC,KAAK,CAAC;EACnB,CAAC;EAEDL,KAAK,CAACU,SAAS,CAAC,YAAM;IACpB,OAAO,YAAM;MACX,IAAGtB,KAAK,aAALA,KAAK,eAALA,KAAK,CAAEyB,OAAO,EACjB;QACEzB,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEyB,OAAO,CAACK,mBAAmB,CAAC,OAAO,EAAEF,OAAO,CAAC;QACpD5B,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEyB,OAAO,CAACK,mBAAmB,CAAC,MAAM,EAAED,MAAM,CAAC;MACpD;IACF,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,IAAME,gBAAgB,GAAGnB,KAAK,CAACoB,WAAW,CAAC,YAAM;IAC/C,IAAGhC,KAAK,IAAIA,KAAK,CAACyB,OAAO,EACzB;MACEzB,KAAK,CAACyB,OAAO,CAACQ,gBAAgB,CAAC,OAAO,EAAEL,OAAO,CAAC;MAChD5B,KAAK,CAACyB,OAAO,CAACQ,gBAAgB,CAAC,MAAM,EAAEJ,MAAM,CAAC;MAC9CN,iBAAiB,EAAE;IACrB;EACF,CAAC,EAAE,EAAE,CAAC;EAEJ,oBAAO;IAAK,GAAG,EAAEQ,gBAAiB;IAAA,UAAEjB,cAAc,iBAAI,qBAAC,sBAAO;MAAC,KAAK,EAAEL,KAAM;MACjE,MAAM,EAAED,MAAO;MACf,IAAI,EAAC,SAAS;MACd,QAAQ,EAAEN,QAAS;MACnB,KAAK,EAAEC,KAAM;MACb,IAAI,EAAEE,IAAK;MACX,SAAS,EAAEJ,SAAU;MACrB,QAAQ,EAAES;IAAS,GACfC,KAAK;MAAA,uBACR;QAAA,WACAZ,QAAQ,EAAC,GAAC;MAAA;IAAO;EACX,EAAQ;AAC7B,CAAC;AAAC;EA5ECG,QAAQ;EACRC,KAAK;EACLC,KAAK;AAAA;AAAA,eA4EOP,eAAe;AAAA"}
+{"version":3,"file":"TooltipOverflow.cjs","names":["TooltipOverflow","label","children","input","withArrow","maxWidth","width","value","size","Size","Small","height","align","position","props","React","useState","textOverflowed","setTextOverflowed","focused","setFocused","useResizeDetector","targetRef","customW","customH","useEffect","checkIfOverflowed","over","current","offsetWidth","scrollWidth","id","console","log","onFocus","onBlur","removeEventListener","renderedCallback","useCallback","addEventListener"],"sources":["../../src/Tooltips/TooltipOverflow.tsx"],"sourcesContent":["\r\nimport * as React from 'react';\r\n\r\nimport { TooltipProps } from './TooltipTypes';\r\nimport { useResizeDetector } from 'react-resize-detector';\r\n\r\nimport { TooltipContainer, Tooltip } from './TooltipStyles';\r\nimport { Size } from '..';\r\n \r\ninterface TooltipOverflowProps extends TooltipProps {\r\n    input?: React.MutableRefObject<HTMLInputElement | null>;\r\n    maxWidth?: string;\r\n    width?: string;\r\n    value?: string;\r\n}\r\n\r\n const TooltipOverflow = ({\r\n   label, children,\r\n   input,\r\n   withArrow,\r\n   maxWidth,\r\n   width,\r\n   value,\r\n   size = Size.Small,\r\n   height = 'auto',\r\n   align = 'center', \r\n   position = 'bottom',\r\n   ...props } : TooltipOverflowProps) => {\r\n\r\n  const [textOverflowed, setTextOverflowed] = React.useState<boolean>(false);\r\n  const [focused, setFocused] = React.useState<boolean>(false);\r\n  const {width: customW, height: customH} = useResizeDetector({ targetRef: input });\r\n\r\n  React.useEffect(() => {\r\n    checkIfOverflowed();\r\n  }, [customW, customH]);\r\n\r\n  const checkIfOverflowed = () => {\r\n    //adding +3 offset to offsetWidth, because sometimes when there is no overflow, scrollWidth can be equal to offsetWidth + 1\r\n    const over = (input && !focused && input.current && input.current.offsetWidth + 3 < input.current.scrollWidth) ?? false;\r\n    if(input?.current?.id == \"overflowTest\")\r\n    {\r\n      console.log(input.current.offsetWidth);\r\n      console.log(input.current.scrollWidth);\r\n      console.log(input.current);\r\n    }\r\n    setTextOverflowed(over);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    checkIfOverflowed();\r\n  });\r\n\r\n  const onFocus = () => {\r\n    checkIfOverflowed();\r\n    setFocused(true);\r\n  };\r\n\r\n  const onBlur = () => {\r\n    setFocused(false);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    return () => {\r\n      if(input?.current)\r\n      {\r\n        input?.current.removeEventListener(\"focus\", onFocus);\r\n        input?.current.removeEventListener(\"blur\", onBlur);\r\n      }\r\n    }\r\n  }, []);\r\n\r\n  const renderedCallback = React.useCallback(() => {\r\n    if(input && input.current)\r\n    {\r\n      input.current.addEventListener(\"focus\", onFocus);\r\n      input.current.addEventListener(\"blur\", onBlur);\r\n      checkIfOverflowed();\r\n    }\r\n  }, []);\r\n \r\n    return <div ref={renderedCallback}>{textOverflowed && <Tooltip align={align}\r\n               height={height}\r\n               role=\"tooltip\"\r\n               maxWidth={maxWidth}\r\n               width={width}\r\n               size={size}\r\n               withArrow={withArrow}\r\n               position={position}\r\n               {...props}>\r\n                <span>\r\n               {children} </span>\r\n            </Tooltip> }</div>;\r\n };\r\n \r\n export default TooltipOverflow;\r\n"],"mappings":"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"}

package/dist/Tooltips/TooltipOverflow.d.ts

@@ -6,5 +6,5 @@ interface TooltipOverflowProps extends TooltipProps {
     width?: string;
     value?: string;
 }
-declare const TooltipOverflow: ({ label, children, input, withArrow, maxWidth, width, value, size, height, align, position, ...props }: TooltipOverflowProps) => JSX.Element;
+declare const TooltipOverflow: ({ label, children, input, withArrow, maxWidth, width, value, size, height, align, position, ...props }: TooltipOverflowProps) => React.JSX.Element;
 export default TooltipOverflow;

package/dist/Tooltips/TooltipOverflow.js

@@ -26,7 +26,7 @@ var TooltipOverflow = function TooltipOverflow(_ref) {
     _ref$align = _ref.align,
     align = _ref$align === void 0 ? 'center' : _ref$align,
     _ref$position = _ref.position,
-    position = _ref$position === void 0 ? 'top' : _ref$position,
+    position = _ref$position === void 0 ? 'bottom' : _ref$position,
     props = _objectWithoutProperties(_ref, _excluded);
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -45,9 +45,14 @@ var TooltipOverflow = function TooltipOverflow(_ref) {
     checkIfOverflowed();
   }, [customW, customH]);
   var checkIfOverflowed = function checkIfOverflowed() {
-    var _ref2;
+    var _ref2, _input$current;
     //adding +3 offset to offsetWidth, because sometimes when there is no overflow, scrollWidth can be equal to offsetWidth + 1
     var over = (_ref2 = input && !focused && input.current && input.current.offsetWidth + 3 < input.current.scrollWidth) !== null && _ref2 !== void 0 ? _ref2 : false;
+    if ((input === null || input === void 0 ? void 0 : (_input$current = input.current) === null || _input$current === void 0 ? void 0 : _input$current.id) == "overflowTest") {
+      console.log(input.current.offsetWidth);
+      console.log(input.current.scrollWidth);
+      console.log(input.current);
+    }
     setTextOverflowed(over);
   };
   React.useEffect(function () {