@laerdal/life-react-components 3.1.3-dev.1 → 3.2.0

package/dist/Modals/ModalContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContent.js","names":["React","Size","ModalContainer","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXLStyling","ComponentXSStyling","ComponentXXSStyling","Note","scrollBarStyling","TooltipContainer","TooltipWrapper","Button","IconButton","SystemIcons","HyperLink","DropdownButton","ToggleButton","ImageWithFallbacks","HeaderText","div","HeaderTitle","Bold","black","HeaderActions","HeaderWithImageActions","HeaderWithImage","Header","Content","Small","FooterLeftContainer","FooterLeftNote","neutral_600","FooterLeftLink","primary_500","FooterRightContainer","Footer","Wrapper","ModalContent","props","tooltip","XSmall","cursor","headerActions","map","action","index","componentType","icon","rest","id","size","getLeftActionIconElement","leftFooterAction","cloneElement","Large","actionType","text","variant","e","preventDefault","isModalOpen","closeAction","Medium","image","onBack","title","note","children","footerActions","item","a","key","zIndex"],"sources":["../../src/Modals/ModalContent.tsx"],"sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport {\n  ButtonAction,\n  ModalHeaderIconButton,\n  LeftFooterAction,\n  LeftFooterButton,\n  LeftFooterHyperlink,\n  ModalHeaderButtons\n} from './ModalTypes';\nimport {ModalContainer} from './index';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentLStyling,\n  ComponentMStyling, ComponentSStyling,\n  ComponentTextStyle, ComponentXLStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling, Note,\n  scrollBarStyling\n} from '../styles';\nimport {TooltipContainer, TooltipWrapper} from '../Tooltips';\nimport {Button, IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\nimport {HyperLink} from '../HyperLink';\nimport {ImageWithFallbacksProps} from \"../Image/ImageWithFallbacks\";\nimport {DropdownButton} from \"../Dropdown\";\nimport {ToggleButton} from \"../Toggles\";\nimport {ImageWithFallbacks} from \"../Image\";\n\nconst HeaderText = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  padding: 12px 0 12px 12px;\n  gap: 4px;\n\n  &:not(:first-child) {\n    padding-left: 0 !important;\n  }\n\n`;\nconst HeaderTitle = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n`;\n\nconst HeaderActions = styled.div`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst HeaderWithImageActions = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  position: absolute;\n\n  button:only-child {\n    justify-self: flex-end;\n  }\n\n  top: 4px;\n  left: 4px;\n  right: 4px;\n\n  .medium & {\n    top: 12px;\n    left: 12px;\n    right: 12px;\n  }\n\n  .large & {\n    top: 20px;\n    left: 20px;\n    right: 20px;\n  }\n`;\n\nconst HeaderWithImage = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n\n  img {\n    object-fit: cover;\n    width: 100%;\n    height: 160px;\n    border-top-left-radius: 8px;\n    border-top-right-radius: 8px;\n  }\n\n  .medium & {\n    img {\n      height: 200px;\n    }\n  }\n\n  .large & {\n    img {\n      height: 240px;\n    }\n  }\n`;\n\nconst Header = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 4px;\n\n  ${TooltipContainer} {\n    height: max-content;\n  }\n`;\n\nconst Content = styled.div`\n  margin-right: 8px;\n  padding: 0 8px 0 16px;\n  overflow: auto;\n\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst FooterLeftContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst FooterLeftNote = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 4px;\n\n  ${ComponentXXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst FooterLeftLink = styled.div`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n`;\n\nconst FooterRightContainer = styled.div`\n  gap: 8px;\n  margin-left: auto;\n`\n\nconst Footer = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 8px 16px;\n`;\n\n\nconst Wrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: max-content;\n\n  max-height: calc(100vh - 32px);\n  max-width: calc(100vw - 32px);\n\n  &.medium {\n    max-height: calc(100vh - 64px);\n    max-width: calc(100vw - 64px);\n\n    ${Header} {\n      padding: 12px 12px 4px 12px;\n\n      ${HeaderText} {\n        padding: 12px 0 12px 12px;\n        gap: 4px;\n\n        ${HeaderTitle} {\n          ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n        }\n      }\n    }\n\n    ${Content} {\n      padding: 0 16px 0 24px;\n    }\n\n    ${Footer} {\n      padding: 12px 24px 20px 24px;\n\n      ${FooterLeftNote} {\n        ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n        gap: 6px;\n      }\n\n      ${FooterLeftLink} {\n        a {\n          gap: 6px;\n        }\n\n        ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${FooterRightContainer} {\n        gap: 8px;\n      }\n    }\n  }\n\n  &.large {\n    max-height: calc(100vh - 112px);\n    max-width: calc(100vw - 112px);\n\n    ${Header} {\n      padding: 20px 20px 4px 20px;\n\n      ${HeaderText} {\n        padding: 10px 0 10px 12px;\n        gap: 8px;\n\n        ${HeaderTitle} {\n          ${ComponentXLStyling(ComponentTextStyle.Bold, null)}\n        }\n      }\n    }\n\n    ${Content} {\n      padding: 0 24px 0 32px;\n    }\n\n    ${Footer} {\n      padding: 16px 32px 32px 32px;\n\n      ${FooterLeftNote} {\n        ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n        gap: 8px;\n      }\n\n      ${FooterLeftLink} {\n        a {\n          gap: 8px;\n        }\n\n        ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${FooterRightContainer} {\n        gap: 16px;\n      }\n    }\n  }\n`;\n\n\ninterface ModalContentProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  isModalOpen: boolean;\n  closeAction: () => void;\n  onBack?: () => void;\n  title: string;\n  note?: string;\n  image?: ImageWithFallbacksProps;\n  headerActions?: ModalHeaderButtons[];\n  footerActions?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  zIndex?: number;\n  children?: React.ReactNode;\n}\n\nconst ModalContent: React.FC<ModalContentProps> = (props) => {\n\n  const tooltip = () =>\n    !!props.tooltip &&\n    <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"bottom\" withArrow={false}\n                    label={props.tooltip}>\n      <IconButton variant=\"secondary\" shape=\"circular\" style={{cursor: 'help'}} action={() => {\n      }}>\n        <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600}/>\n      </IconButton>\n    </TooltipWrapper>;\n\n  const headerActions = () => props.headerActions?.map((action, index) => {\n      switch (action.componentType) {\n        case 'icon': {\n          const {icon, componentType, ...rest} = action;\n          return <IconButton key={action.id || index}\n                             {...rest}>\n            {icon}\n          </IconButton>\n        }\n        case 'dropdown': {\n          const {componentType, ...rest} = action;\n          return <DropdownButton type={'icon'} size={props.size} {...rest}/>\n        }\n        case 'toggle': {\n          const {componentType, ...rest} = action;\n          return <ToggleButton  {...rest}/>\n        }\n      }\n    }\n  );\n\n  const getLeftActionIconElement = () =>\n    !!props.leftFooterAction?.icon &&\n    React.cloneElement(props.leftFooterAction?.icon as React.ReactElement, {\n      size:\n        props.size === Size.Small\n          ? '20px'\n          : props.size === Size.Large\n            ? '28px'\n            : '24px'\n    });\n\n  const leftFooterAction = () => {\n    if (!props.leftFooterAction) return null;\n\n    switch (props.leftFooterAction.actionType) {\n      case 'button': {\n        const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterButton;\n        return (\n          <Button{...rest}\n                 size={props.size}\n                 onClick={action}\n                 variant={variant ?? 'secondary'}>\n            {text}\n          </Button>\n        );\n      }\n      case 'hyperlink': {\n        const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterHyperlink;\n        return (\n          <FooterLeftLink>\n            <HyperLink {...rest}\n                       variant={variant ?? 'default'}\n                       onClick={(e) => {\n                         if (action) {\n                           e.preventDefault();\n                           action(e);\n                         }\n                       }}>\n              {text}\n              {getLeftActionIconElement()}\n            </HyperLink>\n          </FooterLeftLink>\n        );\n\n      }\n      case 'note': {\n        const {text} = props.leftFooterAction;\n        return (\n          <FooterLeftNote>\n            {getLeftActionIconElement()}\n            <span>{text}</span>\n          </FooterLeftNote>\n        );\n      }\n    }\n  };\n\n\n  return (\n    <ModalContainer showModal={props.isModalOpen} closeModal={props.closeAction}>\n      <Wrapper className={props.size ?? Size.Medium}>\n        {\n          props.image &&\n          <HeaderWithImage>\n            <ImageWithFallbacks {...props.image}/>\n            <HeaderWithImageActions>\n              {\n                props.onBack &&\n                <IconButton variant=\"secondary\" shape=\"circular\" action={props.onBack}>\n                  <SystemIcons.ArrowLineLeft/>\n                </IconButton>\n\n              }\n              <IconButton dataTestId={'content-modal-close-button'} id={'content-modal-close-button'}\n                          variant=\"secondary\"\n                          shape=\"circular\"\n                          action={props.closeAction}>\n                <SystemIcons.Close size=\"24px\" color={COLORS.neutral_600}/>\n              </IconButton>\n            </HeaderWithImageActions>\n\n            <Header>\n              <HeaderText>\n                <HeaderTitle>{props.title}</HeaderTitle>\n                {!!props.note && <Note>{props.note}</Note>}\n              </HeaderText>\n              <HeaderActions>\n                {tooltip()}\n                {headerActions()}\n              </HeaderActions>\n            </Header>\n          </HeaderWithImage>\n        }\n        {\n          !props.image &&\n          <Header>\n            {\n              props.onBack &&\n              <IconButton variant=\"secondary\" shape=\"circular\" action={props.onBack}>\n                <SystemIcons.ArrowLineLeft/>\n              </IconButton>\n            }\n            <HeaderText>\n              <HeaderTitle>{props.title}</HeaderTitle>\n              {!!props.note && <Note>{props.note}</Note>}\n            </HeaderText>\n            <HeaderActions>\n              {tooltip()}\n              {headerActions()}\n              <IconButton dataTestId={'content-modal-close-button'} id={'content-modal-close-button'}\n                          variant=\"secondary\"\n                          shape=\"circular\"\n                          action={props.closeAction}>\n                <SystemIcons.Close size=\"24px\" color={COLORS.neutral_600}/>\n              </IconButton>\n            </HeaderActions>\n          </Header>\n        }\n        <Content>\n          {props.children}\n        </Content>\n        <Footer>\n          <FooterLeftContainer>\n            {leftFooterAction()}\n          </FooterLeftContainer>\n          <FooterRightContainer>\n            {props.footerActions?.map((item, index) => {\n                const {action, text, ...rest} = item;\n                return <Button key={rest.id || index}\n                               {...rest}\n                               onClick={action}\n                               size={props.size}\n                               onKeyDown={a => (a.key === 'Enter' || a.key === ' ') && action!(a)}>\n                  {text}\n                </Button>\n              }\n            )}\n          </FooterRightContainer>\n        </Footer>\n      </Wrapper>\n    </ModalContainer>\n  );\n};\n\nexport default ModalContent;\n"],"mappings":"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"}
+{"version":3,"file":"ModalContent.js","names":["React","Size","ModalContainer","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXLStyling","ComponentXSStyling","ComponentXXSStyling","scrollBarStyling","TooltipContainer","TooltipWrapper","Button","IconButton","SystemIcons","HyperLink","HeaderText","div","HeaderTitle","Bold","black","HeaderNote","Regular","neutral_600","HeaderActions","Header","Content","Small","FooterLeftContainer","FooterLeftNote","FooterLeftLink","primary_500","FooterRightContainer","Footer","Wrapper","ModalContent","props","tooltip","XSmall","cursor","headerActions","map","action","index","icon","rest","id","getLeftActionIconElement","leftFooterAction","cloneElement","size","Large","actionType","text","variant","e","preventDefault","isModalOpen","closeAction","Medium","onBack","title","note","children","footerActions","item","a","key","zIndex"],"sources":["../../src/Modals/ModalContent.tsx"],"sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport {ButtonAction, IconButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink} from './ModalTypes';\nimport {ModalContainer} from './index';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentLStyling,\n  ComponentMStyling, ComponentSStyling,\n  ComponentTextStyle, ComponentXLStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling,\n  scrollBarStyling\n} from '../styles';\nimport {TooltipContainer, TooltipWrapper} from '../Tooltips';\nimport {Button, IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\nimport {HyperLink} from '../HyperLink';\n\nconst HeaderText = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  padding: 12px 0 12px 12px;\n  gap: 4px;\n  \n  &:not(:first-child) {\n    padding-left: 0 !important;\n  }\n  \n`;\nconst HeaderTitle = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n`;\nconst HeaderNote = styled.div`\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst HeaderActions = styled.div`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst Header = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 4px;\n\n  ${TooltipContainer} {\n    height: max-content;\n  }\n`;\n\nconst Content = styled.div`\n  margin-right: 8px;\n  padding: 0 8px 0 16px;\n  overflow: auto;\n\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst FooterLeftContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst FooterLeftNote = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 4px;\n\n  ${ComponentXXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst FooterLeftLink = styled.div`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n`;\n\nconst FooterRightContainer = styled.div`\n  gap: 8px;\n  margin-left: auto;\n`\n\nconst Footer = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 8px 16px;\n`;\n\n\nconst Wrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: max-content;\n\n  max-height: calc(100vh - 32px);\n  max-width: calc(100vw - 32px);\n\n  &.medium {\n    max-height: calc(100vh - 64px);\n    max-width: calc(100vw - 64px);\n\n    ${Header} {\n      padding: 12px 12px 4px 12px;\n\n      ${HeaderText} {\n        padding: 12px 0 12px 12px;\n        gap: 4px;\n\n        ${HeaderTitle} {\n          ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n        }\n\n        ${HeaderNote} {\n          ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n        }\n      }\n    }\n\n    ${Content} {\n      padding: 0 16px 0 24px;\n    }\n\n    ${Footer} {\n      padding: 12px 24px 20px 24px;\n\n      ${FooterLeftNote} {\n        ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n        gap: 6px;\n      }\n\n      ${FooterLeftLink} {\n        a {\n          gap: 6px;\n        }\n\n        ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${FooterRightContainer} {\n        gap: 8px;\n      }\n    }\n  }\n\n  &.large {\n    max-height: calc(100vh - 112px);\n    max-width: calc(100vw - 112px);\n\n    ${Header} {\n      padding: 20px 20px 4px 20px;\n\n      ${HeaderText} {\n        padding: 10px 0 10px 12px;\n        gap: 8px;\n\n        ${HeaderTitle} {\n          ${ComponentXLStyling(ComponentTextStyle.Bold, null)}\n        }\n\n        ${HeaderNote} {\n          ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n        }\n      }\n    }\n\n    ${Content} {\n      padding: 0 24px 0 32px;\n    }\n\n    ${Footer} {\n      padding: 16px 32px 32px 32px;\n\n      ${FooterLeftNote} {\n        ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n        gap: 8px;\n      }\n\n      ${FooterLeftLink} {\n        a {\n          gap: 8px;\n        }\n\n        ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${FooterRightContainer} {\n        gap: 16px;\n      }\n    }\n  }\n`;\n\n\ninterface ModalContentProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  isModalOpen: boolean;\n  closeAction: () => void;\n  onBack?: () => void;\n  title: string;\n  note?: string;\n  headerActions?: IconButtonAction[];\n  footerActions?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  zIndex?: number;\n  children?: React.ReactNode;\n}\n\nconst ModalContent: React.FC<ModalContentProps> = (props) => {\n\n  const tooltip = () =>\n    !!props.tooltip &&\n    <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"bottom\" withArrow={false}\n                    label={props.tooltip}>\n      <IconButton variant=\"secondary\" shape=\"circular\" style={{cursor: 'help'}} action={() => {\n      }}>\n        <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600}/>\n      </IconButton>\n    </TooltipWrapper>;\n\n  const headerActions = () => props.headerActions?.map((action, index) => {\n      const {icon, ...rest} = action;\n      return <IconButton key={action.id || index}\n                         {...rest}>\n        {icon}\n      </IconButton>\n    }\n  );\n\n  const getLeftActionIconElement = () =>\n    !!props.leftFooterAction?.icon &&\n    React.cloneElement(props.leftFooterAction?.icon as React.ReactElement, {\n      size:\n        props.size === Size.Small\n          ? '20px'\n          : props.size === Size.Large\n            ? '28px'\n            : '24px'\n    });\n\n  const leftFooterAction = () => {\n    if (!props.leftFooterAction) return null;\n\n    switch (props.leftFooterAction.actionType) {\n      case 'button': {\n        const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterButton;\n        return (\n          <Button{...rest}\n                 size={props.size}\n                 onClick={action}\n                 variant={variant ?? 'secondary'}>\n            {text}\n          </Button>\n        );\n      }\n      case 'hyperlink': {\n        const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterHyperlink;\n        return (\n          <FooterLeftLink>\n            <HyperLink {...rest}\n                       variant={variant ?? 'default'}\n                       onClick={(e) => {\n                         if (action) {\n                           e.preventDefault();\n                           action(e);\n                         }\n                       }}>\n              {text}\n              {getLeftActionIconElement()}\n            </HyperLink>\n          </FooterLeftLink>\n        );\n\n      }\n      case 'note': {\n        const {text} = props.leftFooterAction;\n        return (\n          <FooterLeftNote>\n            {getLeftActionIconElement()}\n            <span>{text}</span>\n          </FooterLeftNote>\n        );\n      }\n    }\n  };\n\n\n  return (\n    <ModalContainer showModal={props.isModalOpen} closeModal={props.closeAction}>\n      <Wrapper className={props.size ?? Size.Medium}>\n        <Header>\n          {\n            props.onBack &&\n            <IconButton variant=\"secondary\" shape=\"circular\" action={props.onBack}>\n              <SystemIcons.ArrowLineLeft/>\n            </IconButton>\n          }\n          <HeaderText>\n            <HeaderTitle>{props.title}</HeaderTitle>\n            {!!props.note && <HeaderNote>{props.note}</HeaderNote>}\n          </HeaderText>\n          <HeaderActions>\n            {tooltip()}\n            {headerActions()}\n            <IconButton dataTestId={'content-modal-close-button'} id={'content-modal-close-button'} variant=\"secondary\" shape=\"circular\"\n                        action={props.closeAction}>\n              <SystemIcons.Close size=\"24px\" color={COLORS.neutral_600}/>\n            </IconButton>\n          </HeaderActions>\n        </Header>\n        <Content>\n          {props.children}\n        </Content>\n        <Footer>\n          <FooterLeftContainer>\n            {leftFooterAction()}\n          </FooterLeftContainer>\n          <FooterRightContainer>\n            {props.footerActions?.map((item, index) => {\n                const {action, text, ...rest} = item;\n                return <Button key={rest.id || index}\n                               {...rest}\n                               onClick={action}\n                               size={props.size}\n                               onKeyDown={a => (a.key === 'Enter' || a.key === ' ') && action!(a)}>\n                  {text}\n                </Button>\n              }\n            )}\n          </FooterRightContainer>\n        </Footer>\n      </Wrapper>\n    </ModalContainer>\n  );\n};\n\nexport default ModalContent;\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';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {IconButtonProps} from '../Button';\nimport React from 'react';\nimport {IconDropdownButtonProps} from \"../Dropdown/DropdownButtonTypes\";\nimport {ToggleButtonProps} from \"../Toggles/ToggleButton\";\n\nexport interface ModalHeaderIconButton extends Omit<IconButtonProps, 'hideOnLowWidth' | 'flatEdge' | 'isInMobileMenu' | 'useTransparentBackground' | 'shouldNotInteract' | 'unsetIconSize' | 'borderRadius' | 'focusBackgroundColor' | 'children' | 'focusOnClick'> {\n  componentType: 'icon';\n  icon: React.ReactNode;\n}\n\nexport interface ModalHeaderDropdownButton extends Omit<IconDropdownButtonProps, 'size' | 'type'> {\n  componentType: 'dropdown';\n}\n\nexport interface ModalHeaderToggleButton extends ToggleButtonProps {\n  componentType: 'toggle';\n}\n\nexport type ModalHeaderButtons = ModalHeaderIconButton | ModalHeaderDropdownButton | ModalHeaderToggleButton;\n\n\nexport interface ButtonAction extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'> {\n  action?: (() => void) | ((e: any) => void);\n  text: string;\n}\n\nexport interface LeftFooterActionBase {\n  actionType: 'hyperlink' | 'note' | 'button';\n  text: string;\n  icon?: React.ReactNode;\n  action?: (() => void) | ((e: any) => void);\n}\n\nexport interface LeftFooterHyperlink extends HyperlinkProps, LeftFooterActionBase {\n}\n\nexport interface LeftFooterButton extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'>, LeftFooterActionBase {\n  text: string;\n}\n\nexport type LeftFooterAction = LeftFooterButton | LeftFooterHyperlink;\n"],"mappings":""}
+{"version":3,"file":"ModalTypes.cjs","names":[],"sources":["../../src/Modals/ModalTypes.ts"],"sourcesContent":["import { ButtonProps } from '../Button/Button';\nimport { HyperlinkProps } from '../HyperLink/HyperLink';\nimport {IconButtonProps} from '../Button/Iconbutton';\nimport React from 'react';\n\nexport interface IconButtonAction extends Pick<IconButtonProps, 'variant' | 'id' | 'shape' | 'disabled' | 'action' | 'tooltip'> {\n  icon: React.ReactNode;\n}\n\nexport interface ButtonAction extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'> {\n  action?: (() => void) | ((e: any) => void);\n  text: string;\n}\n\nexport interface LeftFooterActionBase {\n  actionType: 'hyperlink' | 'note' | 'button';\n  text: string;\n  icon?: React.ReactNode;\n  action?: (() => void) | ((e: any) => void);\n}\n\nexport interface LeftFooterHyperlink extends HyperlinkProps, LeftFooterActionBase {}\n\nexport interface LeftFooterButton extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'>, LeftFooterActionBase {\n  text: string;\n}\n\nexport type LeftFooterAction = LeftFooterButton | LeftFooterHyperlink;\n"],"mappings":""}

package/dist/Modals/ModalTypes.d.ts

@@ -1,20 +1,10 @@
-import { ButtonProps } from '../Button';
+import { ButtonProps } from '../Button/Button';
 import { HyperlinkProps } from '../HyperLink/HyperLink';
-import { IconButtonProps } from '../Button';
+import { IconButtonProps } from '../Button/Iconbutton';
 import React from 'react';
-import { IconDropdownButtonProps } from "../Dropdown/DropdownButtonTypes";
-import { ToggleButtonProps } from "../Toggles/ToggleButton";
-export interface ModalHeaderIconButton extends Omit<IconButtonProps, 'hideOnLowWidth' | 'flatEdge' | 'isInMobileMenu' | 'useTransparentBackground' | 'shouldNotInteract' | 'unsetIconSize' | 'borderRadius' | 'focusBackgroundColor' | 'children' | 'focusOnClick'> {
-    componentType: 'icon';
+export interface IconButtonAction extends Pick<IconButtonProps, 'variant' | 'id' | 'shape' | 'disabled' | 'action' | 'tooltip'> {
     icon: React.ReactNode;
 }
-export interface ModalHeaderDropdownButton extends Omit<IconDropdownButtonProps, 'size' | 'type'> {
-    componentType: 'dropdown';
-}
-export interface ModalHeaderToggleButton extends ToggleButtonProps {
-    componentType: 'toggle';
-}
-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;

package/dist/Modals/ModalTypes.js.map

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

package/dist/Modals/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../src/Modals/index.tsx"],"sourcesContent":["import Modal, { ModalCloseButton } from './Modal';\nimport ModalContainer from './ModalContainer';\nimport { ModalHeader, ModalTitle, ModalBody, ModalFooter } from './ModalStyles';\nimport ModalDialog from './ModalDialog';\nimport ModalContent from './ModalContent';\n\nexport { Modal, ModalContainer, ModalHeader, ModalBody, ModalFooter, ModalTitle, ModalCloseButton, ModalDialog, ModalContent };\n\nexport type {LeftFooterAction, LeftFooterHyperlink, LeftFooterActionBase, LeftFooterButton, ModalHeaderIconButton} from './ModalTypes';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAA0C;AAAA"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/Modals/index.tsx"],"sourcesContent":["import Modal, { ModalCloseButton } from './Modal';\nimport ModalContainer from './ModalContainer';\nimport { ModalHeader, ModalTitle, ModalBody, ModalFooter } from './ModalStyles';\nimport ModalDialog from './ModalDialog';\nimport ModalContent from './ModalContent';\n\nexport { Modal, ModalContainer, ModalHeader, ModalBody, ModalFooter, ModalTitle, ModalCloseButton, ModalDialog, ModalContent };\n\nexport type {LeftFooterAction, LeftFooterHyperlink, LeftFooterActionBase, LeftFooterButton, IconButtonAction} from './ModalTypes';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAA0C;AAAA"}

package/dist/Modals/index.d.ts

@@ -4,4 +4,4 @@ import { ModalHeader, ModalTitle, ModalBody, ModalFooter } from './ModalStyles';
 import ModalDialog from './ModalDialog';
 import ModalContent from './ModalContent';
 export { Modal, ModalContainer, ModalHeader, ModalBody, ModalFooter, ModalTitle, ModalCloseButton, ModalDialog, ModalContent };
-export type { LeftFooterAction, LeftFooterHyperlink, LeftFooterActionBase, LeftFooterButton, ModalHeaderIconButton } from './ModalTypes';
+export type { LeftFooterAction, LeftFooterHyperlink, LeftFooterActionBase, LeftFooterButton, IconButtonAction } from './ModalTypes';

package/dist/Modals/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Modal","ModalCloseButton","ModalContainer","ModalHeader","ModalTitle","ModalBody","ModalFooter","ModalDialog","ModalContent"],"sources":["../../src/Modals/index.tsx"],"sourcesContent":["import Modal, { ModalCloseButton } from './Modal';\nimport ModalContainer from './ModalContainer';\nimport { ModalHeader, ModalTitle, ModalBody, ModalFooter } from './ModalStyles';\nimport ModalDialog from './ModalDialog';\nimport ModalContent from './ModalContent';\n\nexport { Modal, ModalContainer, ModalHeader, ModalBody, ModalFooter, ModalTitle, ModalCloseButton, ModalDialog, ModalContent };\n\nexport type {LeftFooterAction, LeftFooterHyperlink, LeftFooterActionBase, LeftFooterButton, ModalHeaderIconButton} from './ModalTypes';\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,gBAAgB,QAAQ,SAAS;AACjD,OAAOC,cAAc,MAAM,kBAAkB;AAC7C,SAASC,WAAW,EAAEC,UAAU,EAAEC,SAAS,EAAEC,WAAW,QAAQ,eAAe;AAC/E,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,YAAY,MAAM,gBAAgB;AAEzC,SAASR,KAAK,EAAEE,cAAc,EAAEC,WAAW,EAAEE,SAAS,EAAEC,WAAW,EAAEF,UAAU,EAAEH,gBAAgB,EAAEM,WAAW,EAAEC,YAAY"}
+{"version":3,"file":"index.js","names":["Modal","ModalCloseButton","ModalContainer","ModalHeader","ModalTitle","ModalBody","ModalFooter","ModalDialog","ModalContent"],"sources":["../../src/Modals/index.tsx"],"sourcesContent":["import Modal, { ModalCloseButton } from './Modal';\nimport ModalContainer from './ModalContainer';\nimport { ModalHeader, ModalTitle, ModalBody, ModalFooter } from './ModalStyles';\nimport ModalDialog from './ModalDialog';\nimport ModalContent from './ModalContent';\n\nexport { Modal, ModalContainer, ModalHeader, ModalBody, ModalFooter, ModalTitle, ModalCloseButton, ModalDialog, ModalContent };\n\nexport type {LeftFooterAction, LeftFooterHyperlink, LeftFooterActionBase, LeftFooterButton, IconButtonAction} from './ModalTypes';\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,gBAAgB,QAAQ,SAAS;AACjD,OAAOC,cAAc,MAAM,kBAAkB;AAC7C,SAASC,WAAW,EAAEC,UAAU,EAAEC,SAAS,EAAEC,WAAW,QAAQ,eAAe;AAC/E,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,YAAY,MAAM,gBAAgB;AAEzC,SAASR,KAAK,EAAEE,cAAc,EAAEC,WAAW,EAAEE,SAAS,EAAEC,WAAW,EAAEF,UAAU,EAAEH,gBAAgB,EAAEM,WAAW,EAAEC,YAAY"}

package/dist/Tile/TileCommonItems.cjs

@@ -39,10 +39,11 @@ var RenderTileItem = function RenderTileItem(item, size) {
   switch (item.componentType) {
     case 'icon':
       {
+        var _item$variant, _item$shape;
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
-          variant: 'secondary',
-          useTransparentBackground: true,
-          shape: 'circular',
+          variant: (_item$variant = item.variant) !== null && _item$variant !== void 0 ? _item$variant : 'secondary',
+          useTransparentBackground: item.variant == 'secondary' ? true : false,
+          shape: (_item$shape = item.shape) !== null && _item$shape !== void 0 ? _item$shape : 'circular',
           action: item.action,
           tooltip: item.tooltip,
           disabled: item.disabled,

package/dist/Tile/TileCommonItems.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TileCommonItems.cjs","names":["TileNoteText","styled","div","TileNoteIcon","TileNoteWrapper","COLORS","neutral_600","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentXSStyling","ComponentSStyling","TileHyperLinkIcon","TileHyperLinkText","TileHyperLinkWrapper","Bold","primary_500","ComponentMStyling","ComponentLStyling","RenderTileItem","item","size","key","undefined","componentType","action","tooltip","disabled","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight","noteIcon","React","cloneElement","Size","Large","noteText","linkText","linkIcon","rest","buttonText"],"sources":["../../src/Tile/TileCommonItems.tsx"],"sourcesContent":["import {\n  TileDropdownButton,\n  TileHyperLink,\n  TileIconButton,\n  TileNote,\n  TileStandardButton,\n  TileToggleButton\n} from './TileTypes';\nimport {Button, IconButton} from '../Button';\nimport {ToggleButton} from '../Toggles';\nimport {DropdownButton} from '../Dropdown';\nimport React from 'react';\nimport styled from 'styled-components';\nimport {\n  COLORS, ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {HyperLink} from '../HyperLink';\nimport {Size} from '../types';\n\n\nexport const TileNoteText = styled.div``;\nexport const TileNoteIcon = styled.div`display: flex;`;\nexport const TileNoteWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  color: ${COLORS.neutral_600};\n\n  &.small {\n    gap: 4px;\n\n    ${TileNoteIcon} {\n      width: 16px;\n      height: 16px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    }\n  }\n\n  &.medium {\n    gap: 6px;\n\n    ${TileNoteIcon} {\n      width: 16px;\n      height: 16px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n  }\n\n  &.large {\n    gap: 8px;\n\n    ${TileNoteIcon} {\n      width: 20px;\n      height: 20px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n  }\n`;\n\n\nexport const TileHyperLinkIcon = styled.div`display: flex`;\nexport const TileHyperLinkText = styled.div``;\n\nexport const TileHyperLinkWrapper = styled.div`\n  width: max-content;\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n\n  &.small {\n    ${TileHyperLinkIcon} {\n      width: 24px;\n      height: 24px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 4px;\n    }\n  }\n\n  &.medium {\n    ${TileHyperLinkIcon} {\n      width: 24px;\n      height: 24px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 6px;\n    }\n  }\n\n  &.large {\n    ${TileHyperLinkIcon} {\n      width: 28px;\n      height: 28px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 8px;\n    }\n  }\n`\n\nexport const RenderTileItem = (item: TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton | TileNote | TileHyperLink,\n                               size: Size,\n                               key: any | undefined = undefined) => {\n  switch (item.componentType) {\n    case 'icon': {\n      return <IconButton key={key}\n                         variant={'secondary'}\n                         useTransparentBackground={true}\n                         shape={'circular'}\n                         action={item.action}\n                         tooltip={item.tooltip}\n                         disabled={item.disabled}>\n        {item.icon}\n      </IconButton>\n    }\n    case 'toggle': {\n      return <ToggleButton key={key}\n                           active={item.active}\n                           onChange={item.onChange}\n                           defaultState={item.defaultState}\n                           activeState={item.activeState}\n                           disabled={item.disabled}/>\n    }\n    case 'dropdown': {\n      return <DropdownButton key={key}\n                             type={'icon'}\n                             items={item.items}\n                             itemsType={item.itemsType}\n                             onClick={item.onClick}\n                             icon={item.icon}\n                             tooltip={item.tooltip}\n                             action={item.action}\n                             actionIcon={item.actionIcon}\n                             actionLabel={item.actionLabel}\n                             actionVariant={item.actionVariant}\n                             actionLoading={item.actionLoading}\n                             multiSelect={item.multiSelect}\n                             scrollable={item.scrollable}\n                             pinTopItem={item.pinTopItem}\n                             maxHeight={item.maxHeight}\n                             disabled={item.disabled}/>\n\n    }\n    case 'note': {\n      return <TileNoteWrapper key={key} className={size}>\n        {\n          item.noteIcon &&\n          <TileNoteIcon>\n            {React.cloneElement(item.noteIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16'})}\n          </TileNoteIcon>\n        }\n        <TileNoteText>{item.noteText}</TileNoteText>\n      </TileNoteWrapper>\n\n    }\n    case 'link': {\n      const {linkText, componentType, linkIcon, ...rest} = item;\n      return <TileHyperLinkWrapper className={size} key={key}>\n        <HyperLink {...rest}>\n          <TileHyperLinkText>{linkText}</TileHyperLinkText>\n          <TileHyperLinkIcon>\n            {React.cloneElement(linkIcon as React.ReactElement, {size: size === Size.Large ? '28px' : '24px'})}\n          </TileHyperLinkIcon>\n        </HyperLink>\n      </TileHyperLinkWrapper>\n    }\n    case 'button': {\n      const {buttonText, componentType, ...rest} = item;\n      return <Button key={key}\n                     size={size}\n                     {...rest}>\n        {buttonText}\n      </Button>\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;AAQA;AACA;AACA;AACA;AACA;AACA;AAQA;AACA;AAA8B;AAAA;EAAA;AAAA;AAAA;AAAA;AAGvB,IAAMA,YAAY,GAAGC,yBAAM,CAACC,GAAG,mFAAE;AAAC;AAClC,IAAMC,YAAY,GAAGF,yBAAM,CAACC,GAAG,mGAAgB;AAAC;AAChD,IAAME,eAAe,GAAGH,yBAAM,CAACC,GAAG,mjBAI9BG,cAAM,CAACC,WAAW,EAKvBH,YAAY,EAKZH,YAAY,EACV,IAAAO,2BAAmB,EAACC,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAOvDN,YAAY,EAKZH,YAAY,EACV,IAAAU,0BAAkB,EAACF,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAQtDN,YAAY,EAKZH,YAAY,EACV,IAAAW,yBAAiB,EAACH,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,CAG1D;AAAC;AAGK,IAAMG,iBAAiB,GAAGX,yBAAM,CAACC,GAAG,kGAAe;AAAC;AACpD,IAAMW,iBAAiB,GAAGZ,yBAAM,CAACC,GAAG,qFAAE;AAAC;AAEvC,IAAMY,oBAAoB,GAAGb,yBAAM,CAACC,GAAG,ypBAG1C,IAAAS,yBAAiB,EAACH,0BAAkB,CAACO,IAAI,EAAEV,cAAM,CAACW,WAAW,CAAC,EAS5DJ,iBAAiB,EAKjBC,iBAAiB,EACf,IAAAF,yBAAiB,EAACH,0BAAkB,CAACO,IAAI,EAAE,IAAI,CAAC,EASlDH,iBAAiB,EAKjBC,iBAAiB,EACf,IAAAI,yBAAiB,EAACT,0BAAkB,CAACO,IAAI,EAAE,IAAI,CAAC,EASlDH,iBAAiB,EAKjBC,iBAAiB,EACf,IAAAK,yBAAiB,EAACV,0BAAkB,CAACO,IAAI,EAAE,IAAI,CAAC,CAOvD;AAAA;AAEM,IAAMI,cAAc,GAAG,SAAjBA,cAAc,CAAIC,IAA4G,EAC5GC,IAAU,EAC2B;EAAA,IAArCC,GAAoB,uEAAGC,SAAS;EAC7D,QAAQH,IAAI,CAACI,aAAa;IACxB,KAAK,MAAM;MAAE;QACX,oBAAO,qBAAC,kBAAU;UACC,OAAO,EAAE,WAAY;UACrB,wBAAwB,EAAE,IAAK;UAC/B,KAAK,EAAE,UAAW;UAClB,MAAM,EAAEJ,IAAI,CAACK,MAAO;UACpB,OAAO,EAAEL,IAAI,CAACM,OAAQ;UACtB,QAAQ,EAAEN,IAAI,CAACO,QAAS;UAAA,UACxCP,IAAI,CAACQ;QAAI,GAPYN,GAAG,CAQd;MACf;IACA,KAAK,QAAQ;MAAE;QACb,oBAAO,qBAAC,qBAAY;UACC,MAAM,EAAEF,IAAI,CAACS,MAAO;UACpB,QAAQ,EAAET,IAAI,CAACU,QAAS;UACxB,YAAY,EAAEV,IAAI,CAACW,YAAa;UAChC,WAAW,EAAEX,IAAI,CAACY,WAAY;UAC9B,QAAQ,EAAEZ,IAAI,CAACO;QAAS,GALnBL,GAAG,CAKkB;MACjD;IACA,KAAK,UAAU;MAAE;QACf,oBAAO,qBAAC,wBAAc;UACC,IAAI,EAAE,MAAO;UACb,KAAK,EAAEF,IAAI,CAACa,KAAM;UAClB,SAAS,EAAEb,IAAI,CAACc,SAAU;UAC1B,OAAO,EAAEd,IAAI,CAACe,OAAQ;UACtB,IAAI,EAAEf,IAAI,CAACQ,IAAK;UAChB,OAAO,EAAER,IAAI,CAACM,OAAQ;UACtB,MAAM,EAAEN,IAAI,CAACK,MAAO;UACpB,UAAU,EAAEL,IAAI,CAACgB,UAAW;UAC5B,WAAW,EAAEhB,IAAI,CAACiB,WAAY;UAC9B,aAAa,EAAEjB,IAAI,CAACkB,aAAc;UAClC,aAAa,EAAElB,IAAI,CAACmB,aAAc;UAClC,WAAW,EAAEnB,IAAI,CAACoB,WAAY;UAC9B,UAAU,EAAEpB,IAAI,CAACqB,UAAW;UAC5B,UAAU,EAAErB,IAAI,CAACsB,UAAW;UAC5B,SAAS,EAAEtB,IAAI,CAACuB,SAAU;UAC1B,QAAQ,EAAEvB,IAAI,CAACO;QAAS,GAhBnBL,GAAG,CAgBkB;MAEnD;IACA,KAAK,MAAM;MAAE;QACX,oBAAO,sBAAC,eAAe;UAAW,SAAS,EAAED,IAAK;UAAA,WAE9CD,IAAI,CAACwB,QAAQ,iBACb,qBAAC,YAAY;YAAA,uBACVC,cAAK,CAACC,YAAY,CAAC1B,IAAI,CAACwB,QAAQ,EAAwB;cAACvB,IAAI,EAAEA,IAAI,KAAK0B,WAAI,CAACC,KAAK,GAAG,MAAM,GAAG;YAAI,CAAC;UAAC,EACxF,eAEjB,qBAAC,YAAY;YAAA,UAAE5B,IAAI,CAAC6B;UAAQ,EAAgB;QAAA,GAPjB3B,GAAG,CAQd;MAEpB;IACA,KAAK,MAAM;MAAE;QACX,IAAO4B,QAAQ,GAAsC9B,IAAI,CAAlD8B,QAAQ;UAAE1B,aAAa,GAAuBJ,IAAI,CAAxCI,aAAa;UAAE2B,QAAQ,GAAa/B,IAAI,CAAzB+B,QAAQ;UAAKC,IAAI,0CAAIhC,IAAI;QACzD,oBAAO,qBAAC,oBAAoB;UAAC,SAAS,EAAEC,IAAK;UAAA,uBAC3C,sBAAC,oBAAS,kCAAK+B,IAAI;YAAA,wBACjB,qBAAC,iBAAiB;cAAA,UAAEF;YAAQ,EAAqB,eACjD,qBAAC,iBAAiB;cAAA,uBACfL,cAAK,CAACC,YAAY,CAACK,QAAQ,EAAwB;gBAAC9B,IAAI,EAAEA,IAAI,KAAK0B,WAAI,CAACC,KAAK,GAAG,MAAM,GAAG;cAAM,CAAC;YAAC,EAChF;UAAA;QACV,GANqC1B,GAAG,CAO/B;MACzB;IACA,KAAK,QAAQ;MAAE;QACb,IAAO+B,UAAU,GAA4BjC,IAAI,CAA1CiC,UAAU;UAAE7B,cAAa,GAAaJ,IAAI,CAA9BI,aAAa;UAAK4B,KAAI,0CAAIhC,IAAI;QACjD,oBAAO,qBAAC,cAAM;UACC,IAAI,EAAEC;QAAK,GACP+B,KAAI;UAAA,UACpBC;QAAU,IAHO/B,GAAG,CAId;MACX;EAAC;AAEL,CAAC;AAAA"}
+{"version":3,"file":"TileCommonItems.cjs","names":["TileNoteText","styled","div","TileNoteIcon","TileNoteWrapper","COLORS","neutral_600","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentXSStyling","ComponentSStyling","TileHyperLinkIcon","TileHyperLinkText","TileHyperLinkWrapper","Bold","primary_500","ComponentMStyling","ComponentLStyling","RenderTileItem","item","size","key","undefined","componentType","variant","shape","action","tooltip","disabled","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight","noteIcon","React","cloneElement","Size","Large","noteText","linkText","linkIcon","rest","buttonText"],"sources":["../../src/Tile/TileCommonItems.tsx"],"sourcesContent":["import {\n  TileDropdownButton,\n  TileHyperLink,\n  TileIconButton,\n  TileNote,\n  TileStandardButton,\n  TileToggleButton\n} from './TileTypes';\nimport {Button, IconButton} from '../Button';\nimport {ToggleButton} from '../Toggles';\nimport {DropdownButton} from '../Dropdown';\nimport React from 'react';\nimport styled from 'styled-components';\nimport {\n  COLORS, ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {HyperLink} from '../HyperLink';\nimport {Size} from '../types';\n\n\nexport const TileNoteText = styled.div``;\nexport const TileNoteIcon = styled.div`display: flex;`;\nexport const TileNoteWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  color: ${COLORS.neutral_600};\n\n  &.small {\n    gap: 4px;\n\n    ${TileNoteIcon} {\n      width: 16px;\n      height: 16px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    }\n  }\n\n  &.medium {\n    gap: 6px;\n\n    ${TileNoteIcon} {\n      width: 16px;\n      height: 16px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n  }\n\n  &.large {\n    gap: 8px;\n\n    ${TileNoteIcon} {\n      width: 20px;\n      height: 20px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n  }\n`;\n\n\nexport const TileHyperLinkIcon = styled.div`display: flex`;\nexport const TileHyperLinkText = styled.div``;\n\nexport const TileHyperLinkWrapper = styled.div`\n  width: max-content;\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n\n  &.small {\n    ${TileHyperLinkIcon} {\n      width: 24px;\n      height: 24px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 4px;\n    }\n  }\n\n  &.medium {\n    ${TileHyperLinkIcon} {\n      width: 24px;\n      height: 24px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 6px;\n    }\n  }\n\n  &.large {\n    ${TileHyperLinkIcon} {\n      width: 28px;\n      height: 28px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 8px;\n    }\n  }\n`\n\nexport const RenderTileItem = (item: TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton | TileNote | TileHyperLink,\n                               size: Size,\n                               key: any | undefined = undefined) => {\n  switch (item.componentType) {\n    case 'icon': {\n      return <IconButton key={key}\n                         variant={item.variant ?? 'secondary'}\n                         useTransparentBackground={item.variant == 'secondary' ? true : false}\n                         shape={item.shape ?? 'circular'}\n                         action={item.action}\n                         tooltip={item.tooltip}\n                         disabled={item.disabled}>\n        {item.icon}\n      </IconButton>\n    }\n    case 'toggle': {\n      return <ToggleButton key={key}\n                           active={item.active}\n                           onChange={item.onChange}\n                           defaultState={item.defaultState}\n                           activeState={item.activeState}\n                           disabled={item.disabled}/>\n    }\n    case 'dropdown': {\n      return <DropdownButton key={key}\n                             type={'icon'}\n                             items={item.items}\n                             itemsType={item.itemsType}\n                             onClick={item.onClick}\n                             icon={item.icon}\n                             tooltip={item.tooltip}\n                             action={item.action}\n                             actionIcon={item.actionIcon}\n                             actionLabel={item.actionLabel}\n                             actionVariant={item.actionVariant}\n                             actionLoading={item.actionLoading}\n                             multiSelect={item.multiSelect}\n                             scrollable={item.scrollable}\n                             pinTopItem={item.pinTopItem}\n                             maxHeight={item.maxHeight}\n                             disabled={item.disabled}/>\n\n    }\n    case 'note': {\n      return <TileNoteWrapper key={key} className={size}>\n        {\n          item.noteIcon &&\n          <TileNoteIcon>\n            {React.cloneElement(item.noteIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16'})}\n          </TileNoteIcon>\n        }\n        <TileNoteText>{item.noteText}</TileNoteText>\n      </TileNoteWrapper>\n\n    }\n    case 'link': {\n      const {linkText, componentType, linkIcon, ...rest} = item;\n      return <TileHyperLinkWrapper className={size} key={key}>\n        <HyperLink {...rest}>\n          <TileHyperLinkText>{linkText}</TileHyperLinkText>\n          <TileHyperLinkIcon>\n            {React.cloneElement(linkIcon as React.ReactElement, {size: size === Size.Large ? '28px' : '24px'})}\n          </TileHyperLinkIcon>\n        </HyperLink>\n      </TileHyperLinkWrapper>\n    }\n    case 'button': {\n      const {buttonText, componentType, ...rest} = item;\n      return <Button key={key}\n                     size={size}\n                     {...rest}>\n        {buttonText}\n      </Button>\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/Tile/TileCommonItems.js

@@ -27,10 +27,11 @@ export var RenderTileItem = function RenderTileItem(item, size) {
   switch (item.componentType) {
     case 'icon':
       {
+        var _item$variant, _item$shape;
         return /*#__PURE__*/_jsx(IconButton, {
-          variant: 'secondary',
-          useTransparentBackground: true,
-          shape: 'circular',
+          variant: (_item$variant = item.variant) !== null && _item$variant !== void 0 ? _item$variant : 'secondary',
+          useTransparentBackground: item.variant == 'secondary' ? true : false,
+          shape: (_item$shape = item.shape) !== null && _item$shape !== void 0 ? _item$shape : 'circular',
           action: item.action,
           tooltip: item.tooltip,
           disabled: item.disabled,

package/dist/Tile/TileCommonItems.js.map

@@ -1 +1 @@
-{"version":3,"file":"TileCommonItems.js","names":["Button","IconButton","ToggleButton","DropdownButton","React","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","HyperLink","Size","TileNoteText","div","TileNoteIcon","TileNoteWrapper","neutral_600","Regular","TileHyperLinkIcon","TileHyperLinkText","TileHyperLinkWrapper","Bold","primary_500","RenderTileItem","item","size","key","undefined","componentType","action","tooltip","disabled","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight","noteIcon","cloneElement","Large","noteText","linkText","linkIcon","rest","buttonText"],"sources":["../../src/Tile/TileCommonItems.tsx"],"sourcesContent":["import {\n  TileDropdownButton,\n  TileHyperLink,\n  TileIconButton,\n  TileNote,\n  TileStandardButton,\n  TileToggleButton\n} from './TileTypes';\nimport {Button, IconButton} from '../Button';\nimport {ToggleButton} from '../Toggles';\nimport {DropdownButton} from '../Dropdown';\nimport React from 'react';\nimport styled from 'styled-components';\nimport {\n  COLORS, ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {HyperLink} from '../HyperLink';\nimport {Size} from '../types';\n\n\nexport const TileNoteText = styled.div``;\nexport const TileNoteIcon = styled.div`display: flex;`;\nexport const TileNoteWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  color: ${COLORS.neutral_600};\n\n  &.small {\n    gap: 4px;\n\n    ${TileNoteIcon} {\n      width: 16px;\n      height: 16px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    }\n  }\n\n  &.medium {\n    gap: 6px;\n\n    ${TileNoteIcon} {\n      width: 16px;\n      height: 16px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n  }\n\n  &.large {\n    gap: 8px;\n\n    ${TileNoteIcon} {\n      width: 20px;\n      height: 20px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n  }\n`;\n\n\nexport const TileHyperLinkIcon = styled.div`display: flex`;\nexport const TileHyperLinkText = styled.div``;\n\nexport const TileHyperLinkWrapper = styled.div`\n  width: max-content;\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n\n  &.small {\n    ${TileHyperLinkIcon} {\n      width: 24px;\n      height: 24px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 4px;\n    }\n  }\n\n  &.medium {\n    ${TileHyperLinkIcon} {\n      width: 24px;\n      height: 24px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 6px;\n    }\n  }\n\n  &.large {\n    ${TileHyperLinkIcon} {\n      width: 28px;\n      height: 28px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 8px;\n    }\n  }\n`\n\nexport const RenderTileItem = (item: TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton | TileNote | TileHyperLink,\n                               size: Size,\n                               key: any | undefined = undefined) => {\n  switch (item.componentType) {\n    case 'icon': {\n      return <IconButton key={key}\n                         variant={'secondary'}\n                         useTransparentBackground={true}\n                         shape={'circular'}\n                         action={item.action}\n                         tooltip={item.tooltip}\n                         disabled={item.disabled}>\n        {item.icon}\n      </IconButton>\n    }\n    case 'toggle': {\n      return <ToggleButton key={key}\n                           active={item.active}\n                           onChange={item.onChange}\n                           defaultState={item.defaultState}\n                           activeState={item.activeState}\n                           disabled={item.disabled}/>\n    }\n    case 'dropdown': {\n      return <DropdownButton key={key}\n                             type={'icon'}\n                             items={item.items}\n                             itemsType={item.itemsType}\n                             onClick={item.onClick}\n                             icon={item.icon}\n                             tooltip={item.tooltip}\n                             action={item.action}\n                             actionIcon={item.actionIcon}\n                             actionLabel={item.actionLabel}\n                             actionVariant={item.actionVariant}\n                             actionLoading={item.actionLoading}\n                             multiSelect={item.multiSelect}\n                             scrollable={item.scrollable}\n                             pinTopItem={item.pinTopItem}\n                             maxHeight={item.maxHeight}\n                             disabled={item.disabled}/>\n\n    }\n    case 'note': {\n      return <TileNoteWrapper key={key} className={size}>\n        {\n          item.noteIcon &&\n          <TileNoteIcon>\n            {React.cloneElement(item.noteIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16'})}\n          </TileNoteIcon>\n        }\n        <TileNoteText>{item.noteText}</TileNoteText>\n      </TileNoteWrapper>\n\n    }\n    case 'link': {\n      const {linkText, componentType, linkIcon, ...rest} = item;\n      return <TileHyperLinkWrapper className={size} key={key}>\n        <HyperLink {...rest}>\n          <TileHyperLinkText>{linkText}</TileHyperLinkText>\n          <TileHyperLinkIcon>\n            {React.cloneElement(linkIcon as React.ReactElement, {size: size === Size.Large ? '28px' : '24px'})}\n          </TileHyperLinkIcon>\n        </HyperLink>\n      </TileHyperLinkWrapper>\n    }\n    case 'button': {\n      const {buttonText, componentType, ...rest} = item;\n      return <Button key={key}\n                     size={size}\n                     {...rest}>\n        {buttonText}\n      </Button>\n    }\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"TileCommonItems.js","names":["Button","IconButton","ToggleButton","DropdownButton","React","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","HyperLink","Size","TileNoteText","div","TileNoteIcon","TileNoteWrapper","neutral_600","Regular","TileHyperLinkIcon","TileHyperLinkText","TileHyperLinkWrapper","Bold","primary_500","RenderTileItem","item","size","key","undefined","componentType","variant","shape","action","tooltip","disabled","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight","noteIcon","cloneElement","Large","noteText","linkText","linkIcon","rest","buttonText"],"sources":["../../src/Tile/TileCommonItems.tsx"],"sourcesContent":["import {\n  TileDropdownButton,\n  TileHyperLink,\n  TileIconButton,\n  TileNote,\n  TileStandardButton,\n  TileToggleButton\n} from './TileTypes';\nimport {Button, IconButton} from '../Button';\nimport {ToggleButton} from '../Toggles';\nimport {DropdownButton} from '../Dropdown';\nimport React from 'react';\nimport styled from 'styled-components';\nimport {\n  COLORS, ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {HyperLink} from '../HyperLink';\nimport {Size} from '../types';\n\n\nexport const TileNoteText = styled.div``;\nexport const TileNoteIcon = styled.div`display: flex;`;\nexport const TileNoteWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  color: ${COLORS.neutral_600};\n\n  &.small {\n    gap: 4px;\n\n    ${TileNoteIcon} {\n      width: 16px;\n      height: 16px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    }\n  }\n\n  &.medium {\n    gap: 6px;\n\n    ${TileNoteIcon} {\n      width: 16px;\n      height: 16px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n  }\n\n  &.large {\n    gap: 8px;\n\n    ${TileNoteIcon} {\n      width: 20px;\n      height: 20px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n  }\n`;\n\n\nexport const TileHyperLinkIcon = styled.div`display: flex`;\nexport const TileHyperLinkText = styled.div``;\n\nexport const TileHyperLinkWrapper = styled.div`\n  width: max-content;\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n\n  &.small {\n    ${TileHyperLinkIcon} {\n      width: 24px;\n      height: 24px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 4px;\n    }\n  }\n\n  &.medium {\n    ${TileHyperLinkIcon} {\n      width: 24px;\n      height: 24px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 6px;\n    }\n  }\n\n  &.large {\n    ${TileHyperLinkIcon} {\n      width: 28px;\n      height: 28px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 8px;\n    }\n  }\n`\n\nexport const RenderTileItem = (item: TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton | TileNote | TileHyperLink,\n                               size: Size,\n                               key: any | undefined = undefined) => {\n  switch (item.componentType) {\n    case 'icon': {\n      return <IconButton key={key}\n                         variant={item.variant ?? 'secondary'}\n                         useTransparentBackground={item.variant == 'secondary' ? true : false}\n                         shape={item.shape ?? 'circular'}\n                         action={item.action}\n                         tooltip={item.tooltip}\n                         disabled={item.disabled}>\n        {item.icon}\n      </IconButton>\n    }\n    case 'toggle': {\n      return <ToggleButton key={key}\n                           active={item.active}\n                           onChange={item.onChange}\n                           defaultState={item.defaultState}\n                           activeState={item.activeState}\n                           disabled={item.disabled}/>\n    }\n    case 'dropdown': {\n      return <DropdownButton key={key}\n                             type={'icon'}\n                             items={item.items}\n                             itemsType={item.itemsType}\n                             onClick={item.onClick}\n                             icon={item.icon}\n                             tooltip={item.tooltip}\n                             action={item.action}\n                             actionIcon={item.actionIcon}\n                             actionLabel={item.actionLabel}\n                             actionVariant={item.actionVariant}\n                             actionLoading={item.actionLoading}\n                             multiSelect={item.multiSelect}\n                             scrollable={item.scrollable}\n                             pinTopItem={item.pinTopItem}\n                             maxHeight={item.maxHeight}\n                             disabled={item.disabled}/>\n\n    }\n    case 'note': {\n      return <TileNoteWrapper key={key} className={size}>\n        {\n          item.noteIcon &&\n          <TileNoteIcon>\n            {React.cloneElement(item.noteIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16'})}\n          </TileNoteIcon>\n        }\n        <TileNoteText>{item.noteText}</TileNoteText>\n      </TileNoteWrapper>\n\n    }\n    case 'link': {\n      const {linkText, componentType, linkIcon, ...rest} = item;\n      return <TileHyperLinkWrapper className={size} key={key}>\n        <HyperLink {...rest}>\n          <TileHyperLinkText>{linkText}</TileHyperLinkText>\n          <TileHyperLinkIcon>\n            {React.cloneElement(linkIcon as React.ReactElement, {size: size === Size.Large ? '28px' : '24px'})}\n          </TileHyperLinkIcon>\n        </HyperLink>\n      </TileHyperLinkWrapper>\n    }\n    case 'button': {\n      const {buttonText, componentType, ...rest} = item;\n      return <Button key={key}\n                     size={size}\n                     {...rest}>\n        {buttonText}\n      </Button>\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/Tile/TileTypes.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TileTypes.cjs","names":[],"sources":["../../src/Tile/TileTypes.ts"],"sourcesContent":["import React from 'react';\nimport {IconButtonProps} from '../Button/Iconbutton';\nimport {ToggleButtonProps} from '../Toggles/ToggleButton';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {ButtonProps} from '../Button/Button';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {Size} from '../types';\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\n\n\nexport type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip'> & {\n  componentType: 'icon';\n  icon: React.ReactNode;\n}\n\nexport type TileToggleButton =\n  Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n  & { componentType: 'toggle'; }\n\nexport type TileDropdownButton =\n  Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\n  & {\n  componentType: 'dropdown';\n  icon: React.ReactNode;\n  tooltip?: TooltipProps;\n}\n\nexport type TileStandardButton = Pick<ButtonProps, 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {\n  componentType: 'button';\n  buttonText: string;\n}\n\nexport type TileNote = {\n  componentType: 'note';\n  noteIcon?: React.ReactNode;\n  noteText: string;\n}\n\n\nexport type TileHyperLink = HyperlinkProps & {\n  componentType: 'link';\n  linkIcon?: React.ReactNode;\n  linkText: string;\n}\n\nexport type FooterButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;\nexport type HeaderButtons = TileIconButton | TileToggleButton | TileDropdownButton;\n\nexport interface TileHeaderProps {\n  title: string;\n  tooltip?: string;\n  subtitle?: string;\n  subtitleIcon?: React.ReactNode;\n\n  buttons?: HeaderButtons[];\n}\n\nexport interface TileFooterProps {\n  leftItem?: TileNote | TileHyperLink | TileStandardButton;\n  buttons?: FooterButtons[];\n}\n\n\nexport interface TileProps extends React.HTMLAttributes<HTMLDivElement>{\n  style?: {\n    width?: string,\n    minWidth?: string,\n    maxWidth?: string,\n    height?: string,\n    minHeight?: string,\n    maxHeight?: string,\n  };\n\n  size?: Size.Small | Size.Medium | Size.Large\n\n  header?: TileHeaderProps;\n  footer?: TileFooterProps;\n}\n"],"mappings":""}
+{"version":3,"file":"TileTypes.cjs","names":[],"sources":["../../src/Tile/TileTypes.ts"],"sourcesContent":["import React from 'react';\nimport {IconButtonProps} from '../Button/Iconbutton';\nimport {ToggleButtonProps} from '../Toggles/ToggleButton';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {ButtonProps} from '../Button/Button';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {Size} from '../types';\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\n\n\nexport type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip' | 'variant' | 'shape'> & {\n  componentType: 'icon';\n  icon: React.ReactNode;\n}\n\nexport type TileToggleButton =\n  Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n  & { componentType: 'toggle'; }\n\nexport type TileDropdownButton =\n  Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\n  & {\n  componentType: 'dropdown';\n  icon: React.ReactNode;\n  tooltip?: TooltipProps;\n}\n\nexport type TileStandardButton = Pick<ButtonProps, 'width' | 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {\n  componentType: 'button';\n  buttonText: string;\n}\n\nexport type TileNote = {\n  componentType: 'note';\n  noteIcon?: React.ReactNode;\n  noteText: string;\n}\n\n\nexport type TileHyperLink = HyperlinkProps & {\n  componentType: 'link';\n  linkIcon?: React.ReactNode;\n  linkText: string;\n}\n\nexport type FooterButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;\nexport type HeaderButtons = TileIconButton | TileToggleButton | TileDropdownButton;\n\nexport interface TileHeaderProps {\n  title: string;\n  tooltip?: string;\n  subtitle?: string;\n  subtitleIcon?: React.ReactNode;\n\n  buttons?: HeaderButtons[];\n}\n\nexport interface TileFooterProps {\n  leftItem?: TileNote | TileHyperLink | TileStandardButton;\n  buttons?: FooterButtons[];\n}\n\n\nexport interface TileProps extends React.HTMLAttributes<HTMLDivElement>{\n  style?: {\n    width?: string,\n    minWidth?: string,\n    maxWidth?: string,\n    height?: string,\n    minHeight?: string,\n    maxHeight?: string,\n  };\n\n  size?: Size.Small | Size.Medium | Size.Large\n\n  header?: TileHeaderProps;\n  footer?: TileFooterProps;\n}\n"],"mappings":""}

package/dist/Tile/TileTypes.d.ts

@@ -6,7 +6,7 @@ import { ButtonProps } from '../Button/Button';
 import { HyperlinkProps } from '../HyperLink/HyperLink';
 import { Size } from '../types';
 import { TooltipProps } from "../Tooltips/TooltipTypes";
-export type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip'> & {
+export type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip' | 'variant' | 'shape'> & {
     componentType: 'icon';
     icon: React.ReactNode;
 };
@@ -18,7 +18,7 @@ export type TileDropdownButton = Pick<DropdownButtonProps, 'items' | 'onClick' |
     icon: React.ReactNode;
     tooltip?: TooltipProps;
 };
-export type TileStandardButton = Pick<ButtonProps, 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {
+export type TileStandardButton = Pick<ButtonProps, 'width' | 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {
     componentType: 'button';
     buttonText: string;
 };

package/dist/Tile/TileTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"TileTypes.js","names":[],"sources":["../../src/Tile/TileTypes.ts"],"sourcesContent":["import React from 'react';\nimport {IconButtonProps} from '../Button/Iconbutton';\nimport {ToggleButtonProps} from '../Toggles/ToggleButton';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {ButtonProps} from '../Button/Button';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {Size} from '../types';\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\n\n\nexport type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip'> & {\n  componentType: 'icon';\n  icon: React.ReactNode;\n}\n\nexport type TileToggleButton =\n  Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n  & { componentType: 'toggle'; }\n\nexport type TileDropdownButton =\n  Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\n  & {\n  componentType: 'dropdown';\n  icon: React.ReactNode;\n  tooltip?: TooltipProps;\n}\n\nexport type TileStandardButton = Pick<ButtonProps, 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {\n  componentType: 'button';\n  buttonText: string;\n}\n\nexport type TileNote = {\n  componentType: 'note';\n  noteIcon?: React.ReactNode;\n  noteText: string;\n}\n\n\nexport type TileHyperLink = HyperlinkProps & {\n  componentType: 'link';\n  linkIcon?: React.ReactNode;\n  linkText: string;\n}\n\nexport type FooterButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;\nexport type HeaderButtons = TileIconButton | TileToggleButton | TileDropdownButton;\n\nexport interface TileHeaderProps {\n  title: string;\n  tooltip?: string;\n  subtitle?: string;\n  subtitleIcon?: React.ReactNode;\n\n  buttons?: HeaderButtons[];\n}\n\nexport interface TileFooterProps {\n  leftItem?: TileNote | TileHyperLink | TileStandardButton;\n  buttons?: FooterButtons[];\n}\n\n\nexport interface TileProps extends React.HTMLAttributes<HTMLDivElement>{\n  style?: {\n    width?: string,\n    minWidth?: string,\n    maxWidth?: string,\n    height?: string,\n    minHeight?: string,\n    maxHeight?: string,\n  };\n\n  size?: Size.Small | Size.Medium | Size.Large\n\n  header?: TileHeaderProps;\n  footer?: TileFooterProps;\n}\n"],"mappings":""}
+{"version":3,"file":"TileTypes.js","names":[],"sources":["../../src/Tile/TileTypes.ts"],"sourcesContent":["import React from 'react';\nimport {IconButtonProps} from '../Button/Iconbutton';\nimport {ToggleButtonProps} from '../Toggles/ToggleButton';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {ButtonProps} from '../Button/Button';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {Size} from '../types';\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\n\n\nexport type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip' | 'variant' | 'shape'> & {\n  componentType: 'icon';\n  icon: React.ReactNode;\n}\n\nexport type TileToggleButton =\n  Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n  & { componentType: 'toggle'; }\n\nexport type TileDropdownButton =\n  Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\n  & {\n  componentType: 'dropdown';\n  icon: React.ReactNode;\n  tooltip?: TooltipProps;\n}\n\nexport type TileStandardButton = Pick<ButtonProps, 'width' | 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {\n  componentType: 'button';\n  buttonText: string;\n}\n\nexport type TileNote = {\n  componentType: 'note';\n  noteIcon?: React.ReactNode;\n  noteText: string;\n}\n\n\nexport type TileHyperLink = HyperlinkProps & {\n  componentType: 'link';\n  linkIcon?: React.ReactNode;\n  linkText: string;\n}\n\nexport type FooterButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;\nexport type HeaderButtons = TileIconButton | TileToggleButton | TileDropdownButton;\n\nexport interface TileHeaderProps {\n  title: string;\n  tooltip?: string;\n  subtitle?: string;\n  subtitleIcon?: React.ReactNode;\n\n  buttons?: HeaderButtons[];\n}\n\nexport interface TileFooterProps {\n  leftItem?: TileNote | TileHyperLink | TileStandardButton;\n  buttons?: FooterButtons[];\n}\n\n\nexport interface TileProps extends React.HTMLAttributes<HTMLDivElement>{\n  style?: {\n    width?: string,\n    minWidth?: string,\n    maxWidth?: string,\n    height?: string,\n    minHeight?: string,\n    maxHeight?: string,\n  };\n\n  size?: Size.Small | Size.Medium | Size.Large\n\n  header?: TileHeaderProps;\n  footer?: TileFooterProps;\n}\n"],"mappings":""}

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 ? 'bottom' : _ref$position,
+    position = _ref$position === void 0 ? 'top' : _ref$position,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _React$useState = React.useState(false),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -54,14 +54,9 @@ var TooltipOverflow = function TooltipOverflow(_ref) {
     checkIfOverflowed();
   }, [customW, customH]);
   var checkIfOverflowed = function checkIfOverflowed() {
-    var _ref2, _input$current;
+    var _ref2;
     //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","id","console","log","onFocus","onBlur","removeEventListener","renderedCallback","useCallback","addEventListener"],"sources":["../../src/Tooltips/TooltipOverflow.tsx"],"sourcesContent":["\nimport * as React from 'react';\n\nimport { TooltipProps } from './TooltipTypes';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport { TooltipContainer, Tooltip } from './TooltipStyles';\nimport { Size } from '..';\n \ninterface TooltipOverflowProps extends TooltipProps {\n    input?: React.MutableRefObject<HTMLInputElement | null>;\n    maxWidth?: string;\n    width?: string;\n    value?: string;\n}\n\n const TooltipOverflow = ({\n   label, children,\n   input,\n   withArrow,\n   maxWidth,\n   width,\n   value,\n   size = Size.Small,\n   height = 'auto',\n   align = 'center', \n   position = 'bottom',\n   ...props } : TooltipOverflowProps) => {\n\n  const [textOverflowed, setTextOverflowed] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<boolean>(false);\n  const {width: customW, height: customH} = useResizeDetector({ targetRef: input });\n\n  React.useEffect(() => {\n    checkIfOverflowed();\n  }, [customW, customH]);\n\n  const checkIfOverflowed = () => {\n    //adding +3 offset to offsetWidth, because sometimes when there is no overflow, scrollWidth can be equal to offsetWidth + 1\n    const over = (input && !focused && input.current && input.current.offsetWidth + 3 < input.current.scrollWidth) ?? false;\n    if(input?.current?.id == \"overflowTest\")\n    {\n      console.log(input.current.offsetWidth);\n      console.log(input.current.scrollWidth);\n      console.log(input.current);\n    }\n    setTextOverflowed(over);\n  };\n\n  React.useEffect(() => {\n    checkIfOverflowed();\n  });\n\n  const onFocus = () => {\n    checkIfOverflowed();\n    setFocused(true);\n  };\n\n  const onBlur = () => {\n    setFocused(false);\n  };\n\n  React.useEffect(() => {\n    return () => {\n      if(input?.current)\n      {\n        input?.current.removeEventListener(\"focus\", onFocus);\n        input?.current.removeEventListener(\"blur\", onBlur);\n      }\n    }\n  }, []);\n\n  const renderedCallback = React.useCallback(() => {\n    if(input && input.current)\n    {\n      input.current.addEventListener(\"focus\", onFocus);\n      input.current.addEventListener(\"blur\", onBlur);\n      checkIfOverflowed();\n    }\n  }, []);\n \n    return <div ref={renderedCallback}>{textOverflowed && <Tooltip align={align}\n               height={height}\n               role=\"tooltip\"\n               maxWidth={maxWidth}\n               width={width}\n               size={size}\n               withArrow={withArrow}\n               position={position}\n               {...props}>\n                <span>\n               {children} </span>\n            </Tooltip> }</div>;\n };\n \n export default TooltipOverflow;\n"],"mappings":"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"}
+{"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":["\nimport * as React from 'react';\n\nimport { TooltipProps } from './TooltipTypes';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport { TooltipContainer, Tooltip } from './TooltipStyles';\nimport { Size } from '..';\n \ninterface TooltipOverflowProps extends TooltipProps {\n    input?: React.MutableRefObject<HTMLInputElement | null>;\n    maxWidth?: string;\n    width?: string;\n    value?: string;\n}\n\n const TooltipOverflow = ({\n   label, children,\n   input,\n   withArrow,\n   maxWidth,\n   width,\n   value,\n   size = Size.Small,\n   height = 'auto',\n   align = 'center', \n   position = 'top',\n   ...props } : TooltipOverflowProps) => {\n\n  const [textOverflowed, setTextOverflowed] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<boolean>(false);\n  const {width: customW, height: customH} = useResizeDetector({ targetRef: input });\n\n  React.useEffect(() => {\n    checkIfOverflowed();\n  }, [customW, customH]);\n\n  const checkIfOverflowed = () => {\n    //adding +3 offset to offsetWidth, because sometimes when there is no overflow, scrollWidth can be equal to offsetWidth + 1\n    const over = (input && !focused && input.current && input.current.offsetWidth + 3 < input.current.scrollWidth) ?? false;\n    setTextOverflowed(over);\n  };\n\n  React.useEffect(() => {\n    checkIfOverflowed();\n  });\n\n  const onFocus = () => {\n    checkIfOverflowed();\n    setFocused(true);\n  };\n\n  const onBlur = () => {\n    setFocused(false);\n  };\n\n  React.useEffect(() => {\n    return () => {\n      if(input?.current)\n      {\n        input?.current.removeEventListener(\"focus\", onFocus);\n        input?.current.removeEventListener(\"blur\", onBlur);\n      }\n    }\n  }, []);\n\n  const renderedCallback = React.useCallback(() => {\n    if(input && input.current)\n    {\n      input.current.addEventListener(\"focus\", onFocus);\n      input.current.addEventListener(\"blur\", onBlur);\n      checkIfOverflowed();\n    }\n  }, []);\n \n    return <div ref={renderedCallback}>{textOverflowed && <Tooltip align={align}\n               height={height}\n               role=\"tooltip\"\n               maxWidth={maxWidth}\n               width={width}\n               size={size}\n               withArrow={withArrow}\n               position={position}\n               {...props}>\n                <span>\n               {children} </span>\n            </Tooltip> }</div>;\n };\n \n export default TooltipOverflow;\n"],"mappings":"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"}

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 ? 'bottom' : _ref$position,
+    position = _ref$position === void 0 ? 'top' : _ref$position,
     props = _objectWithoutProperties(_ref, _excluded);
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -45,14 +45,9 @@ var TooltipOverflow = function TooltipOverflow(_ref) {
     checkIfOverflowed();
   }, [customW, customH]);
   var checkIfOverflowed = function checkIfOverflowed() {
-    var _ref2, _input$current;
+    var _ref2;
     //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.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipOverflow.js","names":["React","useResizeDetector","Tooltip","Size","TooltipOverflow","label","children","input","withArrow","maxWidth","width","value","size","Small","height","align","position","props","useState","textOverflowed","setTextOverflowed","focused","setFocused","targetRef","customW","customH","useEffect","checkIfOverflowed","over","current","offsetWidth","scrollWidth","id","console","log","onFocus","onBlur","removeEventListener","renderedCallback","useCallback","addEventListener"],"sources":["../../src/Tooltips/TooltipOverflow.tsx"],"sourcesContent":["\nimport * as React from 'react';\n\nimport { TooltipProps } from './TooltipTypes';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport { TooltipContainer, Tooltip } from './TooltipStyles';\nimport { Size } from '..';\n \ninterface TooltipOverflowProps extends TooltipProps {\n    input?: React.MutableRefObject<HTMLInputElement | null>;\n    maxWidth?: string;\n    width?: string;\n    value?: string;\n}\n\n const TooltipOverflow = ({\n   label, children,\n   input,\n   withArrow,\n   maxWidth,\n   width,\n   value,\n   size = Size.Small,\n   height = 'auto',\n   align = 'center', \n   position = 'bottom',\n   ...props } : TooltipOverflowProps) => {\n\n  const [textOverflowed, setTextOverflowed] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<boolean>(false);\n  const {width: customW, height: customH} = useResizeDetector({ targetRef: input });\n\n  React.useEffect(() => {\n    checkIfOverflowed();\n  }, [customW, customH]);\n\n  const checkIfOverflowed = () => {\n    //adding +3 offset to offsetWidth, because sometimes when there is no overflow, scrollWidth can be equal to offsetWidth + 1\n    const over = (input && !focused && input.current && input.current.offsetWidth + 3 < input.current.scrollWidth) ?? false;\n    if(input?.current?.id == \"overflowTest\")\n    {\n      console.log(input.current.offsetWidth);\n      console.log(input.current.scrollWidth);\n      console.log(input.current);\n    }\n    setTextOverflowed(over);\n  };\n\n  React.useEffect(() => {\n    checkIfOverflowed();\n  });\n\n  const onFocus = () => {\n    checkIfOverflowed();\n    setFocused(true);\n  };\n\n  const onBlur = () => {\n    setFocused(false);\n  };\n\n  React.useEffect(() => {\n    return () => {\n      if(input?.current)\n      {\n        input?.current.removeEventListener(\"focus\", onFocus);\n        input?.current.removeEventListener(\"blur\", onBlur);\n      }\n    }\n  }, []);\n\n  const renderedCallback = React.useCallback(() => {\n    if(input && input.current)\n    {\n      input.current.addEventListener(\"focus\", onFocus);\n      input.current.addEventListener(\"blur\", onBlur);\n      checkIfOverflowed();\n    }\n  }, []);\n \n    return <div ref={renderedCallback}>{textOverflowed && <Tooltip align={align}\n               height={height}\n               role=\"tooltip\"\n               maxWidth={maxWidth}\n               width={width}\n               size={size}\n               withArrow={withArrow}\n               position={position}\n               {...props}>\n                <span>\n               {children} </span>\n            </Tooltip> }</div>;\n };\n \n export default TooltipOverflow;\n"],"mappings":"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"}
+{"version":3,"file":"TooltipOverflow.js","names":["React","useResizeDetector","Tooltip","Size","TooltipOverflow","label","children","input","withArrow","maxWidth","width","value","size","Small","height","align","position","props","useState","textOverflowed","setTextOverflowed","focused","setFocused","targetRef","customW","customH","useEffect","checkIfOverflowed","over","current","offsetWidth","scrollWidth","onFocus","onBlur","removeEventListener","renderedCallback","useCallback","addEventListener"],"sources":["../../src/Tooltips/TooltipOverflow.tsx"],"sourcesContent":["\nimport * as React from 'react';\n\nimport { TooltipProps } from './TooltipTypes';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport { TooltipContainer, Tooltip } from './TooltipStyles';\nimport { Size } from '..';\n \ninterface TooltipOverflowProps extends TooltipProps {\n    input?: React.MutableRefObject<HTMLInputElement | null>;\n    maxWidth?: string;\n    width?: string;\n    value?: string;\n}\n\n const TooltipOverflow = ({\n   label, children,\n   input,\n   withArrow,\n   maxWidth,\n   width,\n   value,\n   size = Size.Small,\n   height = 'auto',\n   align = 'center', \n   position = 'top',\n   ...props } : TooltipOverflowProps) => {\n\n  const [textOverflowed, setTextOverflowed] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<boolean>(false);\n  const {width: customW, height: customH} = useResizeDetector({ targetRef: input });\n\n  React.useEffect(() => {\n    checkIfOverflowed();\n  }, [customW, customH]);\n\n  const checkIfOverflowed = () => {\n    //adding +3 offset to offsetWidth, because sometimes when there is no overflow, scrollWidth can be equal to offsetWidth + 1\n    const over = (input && !focused && input.current && input.current.offsetWidth + 3 < input.current.scrollWidth) ?? false;\n    setTextOverflowed(over);\n  };\n\n  React.useEffect(() => {\n    checkIfOverflowed();\n  });\n\n  const onFocus = () => {\n    checkIfOverflowed();\n    setFocused(true);\n  };\n\n  const onBlur = () => {\n    setFocused(false);\n  };\n\n  React.useEffect(() => {\n    return () => {\n      if(input?.current)\n      {\n        input?.current.removeEventListener(\"focus\", onFocus);\n        input?.current.removeEventListener(\"blur\", onBlur);\n      }\n    }\n  }, []);\n\n  const renderedCallback = React.useCallback(() => {\n    if(input && input.current)\n    {\n      input.current.addEventListener(\"focus\", onFocus);\n      input.current.addEventListener(\"blur\", onBlur);\n      checkIfOverflowed();\n    }\n  }, []);\n \n    return <div ref={renderedCallback}>{textOverflowed && <Tooltip align={align}\n               height={height}\n               role=\"tooltip\"\n               maxWidth={maxWidth}\n               width={width}\n               size={size}\n               withArrow={withArrow}\n               position={position}\n               {...props}>\n                <span>\n               {children} </span>\n            </Tooltip> }</div>;\n };\n \n export default TooltipOverflow;\n"],"mappings":"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"}

package/dist/Tooltips/TooltipStyles.cjs

@@ -18,7 +18,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var distanceToEdge = function distanceToEdge(size) {
   return size == _types.Size.XSmall ? '8px' : !size || size == _types.Size.Small ? '12px' : '16px';
 };
-var Tooltip = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n    pointer-events: none;\n    ", "\n    ", "\n    ", "\n    ", "\n    box-shadow: ", ";\n    box-sizing: border-box;\n    \n    padding: ", ";\n    border-radius: 2px;\n    ", "\n    height: ", ";\n    max-width: ", ";\n    background: ", ";\n    position: absolute; \n    opacity: 0; \n    z-index: ", ";\n    ", "\n\n    ", "\n    ", "\n            \n    ", "\n\n\n&::after {\n    ", "\n    content: \"\";\n    position: absolute;\n    ", "\n    \n    ", "\n    ", "\n\n    ", "\n\n    ", "\n    margin: -0.5px;\n    border-width: 4px;\n    border-style: solid;\n    border-color: ", " \n                    ", " \n                    ", " \n                    ", ";\n  }\n\n  & > span {\n    word-wrap: break-word;\n    color: white;\n  }\n\n"])), function (props) {
+var Tooltip = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  pointer-events: none;\n  ", "\n  ", "\n    ", "\n    ", "\n    box-shadow: ", ";\n  box-sizing: border-box;\n\n  padding: ", ";\n  border-radius: 2px;\n  ", "\n  height: ", ";\n  max-width: ", ";\n  background: ", ";\n  position: absolute;\n  opacity: 0;\n  z-index: ", ";\n  ", "\n\n  ", "\n    ", "\n            \n    ", "\n\n\n&::after {\n    ", "\n    content: \"\";\n    position: absolute;\n    ", "\n\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n    margin: -0.5px;\n    border-width: 4px;\n    border-style: solid;\n    border-color: ", " ", "\n      ", " ", ";\n  }\n\n  & > span {\n    word-wrap: break-word;\n    color: white;\n  }\n"])), function (props) {
   return props.size == _types.Size.Small || props.size != _types.Size.Medium ? (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.white) : '';
 }, function (props) {
   return props.size == _types.Size.XSmall ? (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.white) : '';
@@ -72,12 +72,12 @@ Tooltip.defaultProps = {
   align: 'center',
   position: 'bottom'
 };
-var TooltipTrigger = function TooltipTrigger(delay) {
-  return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  &.hover {\n    &:hover ", ", &:focus-within ", ", &:focus ", " {\n      opacity: 1;\n      transition: 0.5s;\n      transition-delay: ", ";\n    }\n  }\n\n  \n  &.click ", " {\n    transition: 0.5s;\n    transition-delay: ", ";\n  }\n\n  &.click.show ", " {\n    opacity: 1;\n  }\n\n  &.click.hide ", " {\n    opacity: 0;\n  }\n\n"])), Tooltip, Tooltip, Tooltip, delay !== null && delay !== void 0 ? delay : '0.7s', Tooltip, delay !== null && delay !== void 0 ? delay : '0s', Tooltip, Tooltip);
+var TooltipTrigger = function TooltipTrigger(triggerType, delay) {
+  return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), triggerType == 'hover' ? "&:hover ".concat(Tooltip, ", &:focus-within ").concat(Tooltip, ", &:focus ").concat(Tooltip, " {\n      opacity: 1;\n      transition: 0.5s;\n    transition-delay: ").concat(delay !== null && delay !== void 0 ? delay : '0.7s', ";\n    }") : "& ".concat(Tooltip, " {\n      transition: 0.5s;\n      transition-delay: ").concat(delay !== null && delay !== void 0 ? delay : '0s', ";\n    }\n  \n    &.show ").concat(Tooltip, " {\n      opacity: 1;\n    }\n  \n    &.hide ").concat(Tooltip, " {\n      opacity: 0;\n    }"));
 };
 exports.TooltipTrigger = TooltipTrigger;
-var TooltipContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  position: relative;\n\n  ", "\n  \n  &:focus{\n    ", "\n  }\n"])), function (props) {
-  return TooltipTrigger(props.delay);
+var TooltipContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  position: relative;\n\n  ", "\n\n  &:focus {\n    ", "\n  }\n"])), function (props) {
+  return TooltipTrigger(props.triggerType, props.delay);
 }, _styles.focusStyles);
 exports.TooltipContainer = TooltipContainer;
 //# sourceMappingURL=TooltipStyles.cjs.map

package/dist/Tooltips/TooltipStyles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipStyles.cjs","names":["distanceToEdge","size","Size","XSmall","Small","Tooltip","styled","div","props","Medium","ComponentSStyling","ComponentTextStyle","Regular","COLORS","white","ComponentXSStyling","ComponentMStyling","align","BOXSHADOWS","BOXSHADOW_L2","width","height","maxWidth","primary_800","Z_INDEXES","tooltip","position","withArrow","defaultProps","TooltipTrigger","delay","css","TooltipContainer","focusStyles"],"sources":["../../src/Tooltips/TooltipStyles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { Size } from '../types';\nimport {BOXSHADOWS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst distanceToEdge = (size: Size | undefined) => {\n  return size == Size.XSmall ? '8px' : (!size || size == Size.Small) ? '12px' : '16px';\n}\n\nexport const Tooltip = styled.div<{\n  withArrow?: boolean;\n  size?: Size;\n  height?: string;\n  maxWidth?: string;\n  align?: 'start' | 'end' | 'center' | undefined;\n  position?: 'top' | 'right' | 'bottom' | 'left' | undefined;\n  width?: string;\n}>`\n\n    pointer-events: none;\n    ${props => (props.size == Size.Small || props.size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.size == Size.XSmall  ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.align == 'center' ? 'text-align: center;' : '')}\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n    box-sizing: border-box;\n    \n    padding: ${props => props.size == Size.XSmall ? '4px 8px' : props.size == Size.Medium ? '8px 12px' : '6px 10px'};\n    border-radius: 2px;\n    ${props => props.width ? `width: ${props.width};` : 'width: max-content;'}\n    height: ${props => props.height};\n    max-width: ${props => props.maxWidth ?? '34em'};\n    background: ${COLORS.primary_800};\n    position: absolute; \n    opacity: 0; \n    z-index: ${Z_INDEXES.tooltip};\n    ${props => (props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : '')}\n\n    ${props => (props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '')}\n    ${props => (props.position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : '')}\n            \n    ${props =>\n      props.position == 'left' || props.position == 'right'\n        ? ''\n        : props.align == 'start'\n        ? 'left: 0%;'\n        : props.align == 'end'\n        ? 'right: 0%;'\n        : 'left: 50%; transform: translateX(-50%);'}\n\n\n&::after {\n    ${props => (!props.withArrow ? 'display: none;' : '')}\n    content: \"\";\n    position: absolute;\n    ${props => (props.position == 'top' ? 'top: 100%;' : props.position == 'bottom' ? 'bottom: 100%;' : '')}\n    \n    ${props => (props.position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n    ${props => (props.position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n\n    ${props =>\n      props.position == 'left' || props.position == 'right' ? '' : \n      props.align == 'start' ? `left: ${distanceToEdge(props.size)};` : props.align == 'end' ? `right: ${distanceToEdge(props.size)};` : 'left: 50%;'}\n\n    ${props => (props.position == 'left' ? '' : 'margin-left: -5px;')}\n    margin: -0.5px;\n    border-width: 4px;\n    border-style: solid;\n    border-color: ${props => (props.position == 'top' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'right' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'bottom' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'left' ? COLORS.primary_800 : 'transparent')};\n  }\n\n  & > span {\n    word-wrap: break-word;\n    color: white;\n  }\n\n`;\n\nTooltip.defaultProps = {\n  withArrow: false,\n  size: Size.Small,\n  height: 'auto',\n  align: 'center',\n  position: 'bottom'\n}\n\nexport const TooltipTrigger = (delay?: string) => css`\n  &.hover {\n    &:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\n      opacity: 1;\n      transition: 0.5s;\n      transition-delay: ${delay ?? '0.7s'};\n    }\n  }\n\n  \n  &.click ${Tooltip} {\n    transition: 0.5s;\n    transition-delay: ${delay ?? '0s'};\n  }\n\n  &.click.show ${Tooltip} {\n    opacity: 1;\n  }\n\n  &.click.hide ${Tooltip} {\n    opacity: 0;\n  }\n\n`;\n\nexport const TooltipContainer = styled.div<{delay?: string}>`\n  display: inline-block;\n  position: relative;\n\n  ${props => TooltipTrigger(props.delay)}\n  \n  &:focus{\n    ${focusStyles}\n  }\n`;\n"],"mappings":"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"}
+{"version":3,"file":"TooltipStyles.cjs","names":["distanceToEdge","size","Size","XSmall","Small","Tooltip","styled","div","props","Medium","ComponentSStyling","ComponentTextStyle","Regular","COLORS","white","ComponentXSStyling","ComponentMStyling","align","BOXSHADOWS","BOXSHADOW_L2","width","height","maxWidth","primary_800","Z_INDEXES","tooltip","position","withArrow","defaultProps","TooltipTrigger","triggerType","delay","css","TooltipContainer","focusStyles"],"sources":["../../src/Tooltips/TooltipStyles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { Size } from '../types';\nimport { BOXSHADOWS, COLORS, ComponentTextStyle, focusStyles } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nconst distanceToEdge = (size: Size | undefined) => {\n  return size == Size.XSmall ? '8px' : !size || size == Size.Small ? '12px' : '16px';\n};\n\nexport const Tooltip = styled.div<{\n  withArrow?: boolean;\n  size?: Size;\n  height?: string;\n  maxWidth?: string;\n  align?: 'start' | 'end' | 'center' | undefined;\n  position?: 'top' | 'right' | 'bottom' | 'left' | undefined;\n  width?: string;\n}>`\n  pointer-events: none;\n  ${(props) => (props.size == Size.Small || props.size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n  ${(props) => (props.size == Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${(props) => (props.size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${(props) => (props.align == 'center' ? 'text-align: center;' : '')}\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n  box-sizing: border-box;\n\n  padding: ${(props) => (props.size == Size.XSmall ? '4px 8px' : props.size == Size.Medium ? '8px 12px' : '6px 10px')};\n  border-radius: 2px;\n  ${(props) => (props.width ? `width: ${props.width};` : 'width: max-content;')}\n  height: ${(props) => props.height};\n  max-width: ${(props) => props.maxWidth ?? '34em'};\n  background: ${COLORS.primary_800};\n  position: absolute;\n  opacity: 0;\n  z-index: ${Z_INDEXES.tooltip};\n  ${(props) => (props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : '')}\n\n  ${(props) => (props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '')}\n    ${(props) => (props.position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : '')}\n            \n    ${(props) =>\n    props.position == 'left' || props.position == 'right'\n      ? ''\n      : props.align == 'start'\n      ? 'left: 0%;'\n      : props.align == 'end'\n      ? 'right: 0%;'\n      : 'left: 50%; transform: translateX(-50%);'}\n\n\n&::after {\n    ${(props) => (!props.withArrow ? 'display: none;' : '')}\n    content: \"\";\n    position: absolute;\n    ${(props) => (props.position == 'top' ? 'top: 100%;' : props.position == 'bottom' ? 'bottom: 100%;' : '')}\n\n    ${(props) => (props.position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n    ${(props) => (props.position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n\n    ${(props) =>\n      props.position == 'left' || props.position == 'right'\n        ? ''\n        : props.align == 'start'\n        ? `left: ${distanceToEdge(props.size)};`\n        : props.align == 'end'\n        ? `right: ${distanceToEdge(props.size)};`\n        : 'left: 50%;'}\n\n    ${(props) => (props.position == 'left' ? '' : 'margin-left: -5px;')}\n    margin: -0.5px;\n    border-width: 4px;\n    border-style: solid;\n    border-color: ${(props) => (props.position == 'top' ? COLORS.primary_800 : 'transparent')} ${(props) => (props.position == 'right' ? COLORS.primary_800 : 'transparent')}\n      ${(props) => (props.position == 'bottom' ? COLORS.primary_800 : 'transparent')} ${(props) => (props.position == 'left' ? COLORS.primary_800 : 'transparent')};\n  }\n\n  & > span {\n    word-wrap: break-word;\n    color: white;\n  }\n`;\n\nTooltip.defaultProps = {\n  withArrow: false,\n  size: Size.Small,\n  height: 'auto',\n  align: 'center',\n  position: 'bottom',\n};\n\nexport const TooltipTrigger = (triggerType: 'hover' | 'click', delay?: string) => css`\n  ${triggerType == 'hover'\n    ? `&:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\n      opacity: 1;\n      transition: 0.5s;\n    transition-delay: ${delay ?? '0.7s'};\n    }`\n    : `& ${Tooltip} {\n      transition: 0.5s;\n      transition-delay: ${delay ?? '0s'};\n    }\n  \n    &.show ${Tooltip} {\n      opacity: 1;\n    }\n  \n    &.hide ${Tooltip} {\n      opacity: 0;\n    }`}\n`;\n\nexport const TooltipContainer = styled.div<{ triggerType: 'hover' | 'click', delay?: string }>`\n  display: inline-block;\n  position: relative;\n\n  ${(props) => TooltipTrigger(props.triggerType, props.delay)}\n\n  &:focus {\n    ${focusStyles}\n  }\n`;\n"],"mappings":"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"}

package/dist/Tooltips/TooltipStyles.d.ts

@@ -8,7 +8,8 @@ export declare const Tooltip: import("styled-components").StyledComponent<"div",
     position?: 'top' | 'right' | 'bottom' | 'left' | undefined;
     width?: string | undefined;
 }, never>;
-export declare const TooltipTrigger: (delay?: string) => import("styled-components").FlattenSimpleInterpolation;
+export declare const TooltipTrigger: (triggerType: 'hover' | 'click', delay?: string) => import("styled-components").FlattenSimpleInterpolation;
 export declare const TooltipContainer: import("styled-components").StyledComponent<"div", any, {
+    triggerType: 'hover' | 'click';
     delay?: string | undefined;
 }, never>;