@laerdal/life-react-components 2.3.1-dev.9 → 3.0.0

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          <TileHyperLinkIcon>\n            {React.cloneElement(linkIcon as React.ReactElement, {size: size === Size.Large ? '28px' : '24px'})}\n          </TileHyperLinkIcon>\n          <TileHyperLinkText>{linkText}</TileHyperLinkText>\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.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":"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"}

package/dist/Tile/TileCommonItems.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TileDropdownButton, TileHyperLink, TileIconButton, TileNote, TileStandardButton, TileToggleButton } from './TileTypes';
 import { Size } from '../types';
 export declare const TileNoteText: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Tile/TileCommonItems.js

@@ -90,12 +90,12 @@ export var RenderTileItem = function RenderTileItem(item, size) {
         return /*#__PURE__*/_jsx(TileHyperLinkWrapper, {
           className: size,
           children: /*#__PURE__*/_jsxs(HyperLink, _objectSpread(_objectSpread({}, rest), {}, {
-            children: [/*#__PURE__*/_jsx(TileHyperLinkIcon, {
+            children: [/*#__PURE__*/_jsx(TileHyperLinkText, {
+              children: linkText
+            }), /*#__PURE__*/_jsx(TileHyperLinkIcon, {
               children: /*#__PURE__*/React.cloneElement(linkIcon, {
                 size: size === Size.Large ? '28px' : '24px'
               })
-            }), /*#__PURE__*/_jsx(TileHyperLinkText, {
-              children: linkText
             })]
           }))
         }, key);

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          <TileHyperLinkIcon>\n            {React.cloneElement(linkIcon as React.ReactElement, {size: size === Size.Large ? '28px' : '24px'})}\n          </TileHyperLinkIcon>\n          <TileHyperLinkText>{linkText}</TileHyperLinkText>\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","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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"}

package/dist/Toggles/TogglerTypes.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Size } from '..';
 /**
  * Types for the table.

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 () {
@@ -82,7 +77,7 @@ var TooltipOverflow = function TooltipOverflow(_ref) {
       }
     };
   }, []);
-  var renderedCallback = React.useCallback(function (node) {
+  var renderedCallback = React.useCallback(function () {
     if (input && input.current) {
       input.current.addEventListener("focus", onFocus);
       input.current.addEventListener("blur", onBlur);

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","node","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(node => {\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 () {
@@ -73,7 +68,7 @@ var TooltipOverflow = function TooltipOverflow(_ref) {
       }
     };
   }, []);
-  var renderedCallback = React.useCallback(function (node) {
+  var renderedCallback = React.useCallback(function () {
     if (input && input.current) {
       input.current.addEventListener("focus", onFocus);
       input.current.addEventListener("blur", onBlur);

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","node","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(node => {\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":";;;;;;;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,SAASC,iBAAiB,QAAQ,uBAAuB;AAEzD,SAA2BC,OAAO,QAAQ,iBAAiB;AAC3D,SAASC,IAAI,QAAQ,IAAI;AAAC;AAAA;AASzB,IAAMC,eAAe,GAAG,SAAlBA,eAAe,OAWmB;EAAA,IAVtCC,KAAK,QAALA,KAAK;IAAEC,QAAQ,QAARA,QAAQ;IACfC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,KAAK,QAALA,KAAK;IAAA,iBACLC,IAAI;IAAJA,IAAI,0BAAGT,IAAI,CAACU,KAAK;IAAA,mBACjBC,MAAM;IAANA,MAAM,4BAAG,MAAM;IAAA,kBACfC,KAAK;IAALA,KAAK,2BAAG,QAAQ;IAAA,qBAChBC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IACbC,KAAK;EAET,sBAA4CjB,KAAK,CAACkB,QAAQ,CAAU,KAAK,CAAC;IAAA;IAAnEC,cAAc;IAAEC,iBAAiB;EACxC,uBAA8BpB,KAAK,CAACkB,QAAQ,CAAU,KAAK,CAAC;IAAA;IAArDG,OAAO;IAAEC,UAAU;EAC1B,yBAA0CrB,iBAAiB,CAAC;MAAEsB,SAAS,EAAEhB;IAAM,CAAC,CAAC;IAAnEiB,OAAO,sBAAdd,KAAK;IAAmBe,OAAO,sBAAfX,MAAM;EAE7Bd,KAAK,CAAC0B,SAAS,CAAC,YAAM;IACpBC,iBAAiB,EAAE;EACrB,CAAC,EAAE,CAACH,OAAO,EAAEC,OAAO,CAAC,CAAC;EAEtB,IAAME,iBAAiB,GAAG,SAApBA,iBAAiB,GAAS;IAAA;IAC9B;IACA,IAAMC,IAAI,YAAIrB,KAAK,IAAI,CAACc,OAAO,IAAId,KAAK,CAACsB,OAAO,IAAItB,KAAK,CAACsB,OAAO,CAACC,WAAW,GAAG,CAAC,GAAGvB,KAAK,CAACsB,OAAO,CAACE,WAAW,yCAAK,KAAK;IACvHX,iBAAiB,CAACQ,IAAI,CAAC;EACzB,CAAC;EAED5B,KAAK,CAAC0B,SAAS,CAAC,YAAM;IACpBC,iBAAiB,EAAE;EACrB,CAAC,CAAC;EAEF,IAAMK,OAAO,GAAG,SAAVA,OAAO,GAAS;IACpBL,iBAAiB,EAAE;IACnBL,UAAU,CAAC,IAAI,CAAC;EAClB,CAAC;EAED,IAAMW,MAAM,GAAG,SAATA,MAAM,GAAS;IACnBX,UAAU,CAAC,KAAK,CAAC;EACnB,CAAC;EAEDtB,KAAK,CAAC0B,SAAS,CAAC,YAAM;IACpB,OAAO,YAAM;MACX,IAAGnB,KAAK,aAALA,KAAK,eAALA,KAAK,CAAEsB,OAAO,EACjB;QACEtB,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEsB,OAAO,CAACK,mBAAmB,CAAC,OAAO,EAAEF,OAAO,CAAC;QACpDzB,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEsB,OAAO,CAACK,mBAAmB,CAAC,MAAM,EAAED,MAAM,CAAC;MACpD;IACF,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,IAAME,gBAAgB,GAAGnC,KAAK,CAACoC,WAAW,CAAC,YAAM;IAC/C,IAAG7B,KAAK,IAAIA,KAAK,CAACsB,OAAO,EACzB;MACEtB,KAAK,CAACsB,OAAO,CAACQ,gBAAgB,CAAC,OAAO,EAAEL,OAAO,CAAC;MAChDzB,KAAK,CAACsB,OAAO,CAACQ,gBAAgB,CAAC,MAAM,EAAEJ,MAAM,CAAC;MAC9CN,iBAAiB,EAAE;IACrB;EACF,CAAC,EAAE,EAAE,CAAC;EAEJ,oBAAO;IAAK,GAAG,EAAEQ,gBAAiB;IAAA,UAAEhB,cAAc,iBAAI,KAAC,OAAO;MAAC,KAAK,EAAEJ,KAAM;MACjE,MAAM,EAAED,MAAO;MACf,IAAI,EAAC,SAAS;MACd,QAAQ,EAAEL,QAAS;MACnB,KAAK,EAAEC,KAAM;MACb,IAAI,EAAEE,IAAK;MACX,SAAS,EAAEJ,SAAU;MACrB,QAAQ,EAAEQ;IAAS,GACfC,KAAK;MAAA,uBACR;QAAA,WACAX,QAAQ,EAAC,GAAC;MAAA;IAAO;EACX,EAAQ;AAC7B,CAAC;AAAC;EA5ECG,QAAQ;EACRC,KAAK;EACLC,KAAK;AAAA;AA4ER,eAAeP,eAAe"}

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  &.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  &.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":";;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAAgD;AAAA;AAAA;AAEhD,IAAMA,cAAc,GAAG,SAAjBA,cAAc,CAAIC,IAAsB,EAAK;EACjD,OAAOA,IAAI,IAAIC,WAAI,CAACC,MAAM,GAAG,KAAK,GAAG,CAACF,IAAI,IAAIA,IAAI,IAAIC,WAAI,CAACE,KAAK,GAAG,MAAM,GAAG,MAAM;AACpF,CAAC;AAEM,IAAMC,OAAO,GAAGC,yBAAM,CAACC,GAAG,4tBAU7B,UAACC,KAAK;EAAA,OAAMA,KAAK,CAACP,IAAI,IAAIC,WAAI,CAACE,KAAK,IAAII,KAAK,CAACP,IAAI,IAAIC,WAAI,CAACO,MAAM,GAAG,IAAAC,6BAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,KAAK,CAAC,GAAG,EAAE;AAAA,CAAC,EACrI,UAACN,KAAK;EAAA,OAAMA,KAAK,CAACP,IAAI,IAAIC,WAAI,CAACC,MAAM,GAAG,IAAAY,8BAAkB,EAACJ,0BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,KAAK,CAAC,GAAG,EAAE;AAAA,CAAC,EACxG,UAACN,KAAK;EAAA,OAAMA,KAAK,CAACP,IAAI,IAAIC,WAAI,CAACO,MAAM,GAAG,IAAAO,6BAAiB,EAACL,0BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,KAAK,CAAC,GAAG,EAAE;AAAA,CAAC,EACzG,UAACN,KAAK;EAAA,OAAMA,KAAK,CAACS,KAAK,IAAI,QAAQ,GAAG,qBAAqB,GAAG,EAAE;AAAA,CAAC,EACrDC,kBAAU,CAACC,YAAY,EAG5B,UAACX,KAAK;EAAA,OAAMA,KAAK,CAACP,IAAI,IAAIC,WAAI,CAACC,MAAM,GAAG,SAAS,GAAGK,KAAK,CAACP,IAAI,IAAIC,WAAI,CAACO,MAAM,GAAG,UAAU,GAAG,UAAU;AAAA,CAAC,EAEjH,UAACD,KAAK;EAAA,OAAMA,KAAK,CAACY,KAAK,oBAAaZ,KAAK,CAACY,KAAK,SAAM,qBAAqB;AAAA,CAAC,EACnE,UAACZ,KAAK;EAAA,OAAKA,KAAK,CAACa,MAAM;AAAA,GACpB,UAACb,KAAK;EAAA;EAAA,0BAAKA,KAAK,CAACc,QAAQ,6DAAI,MAAM;AAAA,GAClCT,cAAM,CAACU,WAAW,EAGrBC,mBAAS,CAACC,OAAO,EAC1B,UAACjB,KAAK;EAAA,OAAMA,KAAK,CAACkB,QAAQ,IAAI,KAAK,GAAG,eAAe,GAAGlB,KAAK,CAACkB,QAAQ,IAAI,QAAQ,GAAG,YAAY,GAAG,EAAE;AAAA,CAAC,EAEvG,UAAClB,KAAK;EAAA,OAAMA,KAAK,CAACkB,QAAQ,IAAI,MAAM,GAAG,4DAA4D,GAAG,EAAE;AAAA,CAAC,EACvG,UAAClB,KAAK;EAAA,OAAMA,KAAK,CAACkB,QAAQ,IAAI,OAAO,GAAG,qDAAqD,GAAG,EAAE;AAAA,CAAC,EAEnG,UAAClB,KAAK;EAAA,OACRA,KAAK,CAACkB,QAAQ,IAAI,MAAM,IAAIlB,KAAK,CAACkB,QAAQ,IAAI,OAAO,GACjD,EAAE,GACFlB,KAAK,CAACS,KAAK,IAAI,OAAO,GACtB,WAAW,GACXT,KAAK,CAACS,KAAK,IAAI,KAAK,GACpB,YAAY,GACZ,yCAAyC;AAAA,GAI3C,UAACT,KAAK;EAAA,OAAM,CAACA,KAAK,CAACmB,SAAS,GAAG,gBAAgB,GAAG,EAAE;AAAA,CAAC,EAGrD,UAACnB,KAAK;EAAA,OAAMA,KAAK,CAACkB,QAAQ,IAAI,KAAK,GAAG,YAAY,GAAGlB,KAAK,CAACkB,QAAQ,IAAI,QAAQ,GAAG,eAAe,GAAG,EAAE;AAAA,CAAC,EAEvG,UAAClB,KAAK;EAAA,OAAMA,KAAK,CAACkB,QAAQ,IAAI,OAAO,GAAG,uDAAuD,GAAG,EAAE;AAAA,CAAC,EACrG,UAAClB,KAAK;EAAA,OAAMA,KAAK,CAACkB,QAAQ,IAAI,MAAM,GAAG,sDAAsD,GAAG,EAAE;AAAA,CAAC,EAEnG,UAAClB,KAAK;EAAA,OACNA,KAAK,CAACkB,QAAQ,IAAI,MAAM,IAAIlB,KAAK,CAACkB,QAAQ,IAAI,OAAO,GACjD,EAAE,GACFlB,KAAK,CAACS,KAAK,IAAI,OAAO,mBACbjB,cAAc,CAACQ,KAAK,CAACP,IAAI,CAAC,SACnCO,KAAK,CAACS,KAAK,IAAI,KAAK,oBACVjB,cAAc,CAACQ,KAAK,CAACP,IAAI,CAAC,SACpC,YAAY;AAAA,GAEhB,UAACO,KAAK;EAAA,OAAMA,KAAK,CAACkB,QAAQ,IAAI,MAAM,GAAG,EAAE,GAAG,oBAAoB;AAAA,CAAC,EAInD,UAAClB,KAAK;EAAA,OAAMA,KAAK,CAACkB,QAAQ,IAAI,KAAK,GAAGb,cAAM,CAACU,WAAW,GAAG,aAAa;AAAA,CAAC,EAAI,UAACf,KAAK;EAAA,OAAMA,KAAK,CAACkB,QAAQ,IAAI,OAAO,GAAGb,cAAM,CAACU,WAAW,GAAG,aAAa;AAAA,CAAC,EACpK,UAACf,KAAK;EAAA,OAAMA,KAAK,CAACkB,QAAQ,IAAI,QAAQ,GAAGb,cAAM,CAACU,WAAW,GAAG,aAAa;AAAA,CAAC,EAAI,UAACf,KAAK;EAAA,OAAMA,KAAK,CAACkB,QAAQ,IAAI,MAAM,GAAGb,cAAM,CAACU,WAAW,GAAG,aAAa;AAAA,CAAC,CAOjK;AAAC;AAEFlB,OAAO,CAACuB,YAAY,GAAG;EACrBD,SAAS,EAAE,KAAK;EAChB1B,IAAI,EAAEC,WAAI,CAACE,KAAK;EAChBiB,MAAM,EAAE,MAAM;EACdJ,KAAK,EAAE,QAAQ;EACfS,QAAQ,EAAE;AACZ,CAAC;AAEM,IAAMG,cAAc,GAAG,SAAjBA,cAAc,CAAIC,WAA8B,EAAEC,KAAc;EAAA,WAAKC,qBAAG,iGACjFF,WAAW,IAAI,OAAO,qBACTzB,OAAO,8BAAoBA,OAAO,uBAAaA,OAAO,mFAG/C0B,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,MAAM,4BAE5B1B,OAAO,kEAEQ0B,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,IAAI,sCAG1B1B,OAAO,0DAIPA,OAAO,iCAEd;AAAA,CACL;AAAC;AAEK,IAAM4B,gBAAgB,GAAG3B,yBAAM,CAACC,GAAG,iLAItC,UAACC,KAAK;EAAA,OAAKqB,cAAc,CAACrB,KAAK,CAACsB,WAAW,EAAEtB,KAAK,CAACuB,KAAK,CAAC;AAAA,GAGvDG,mBAAW,CAEhB;AAAC"}

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>;

package/dist/Tooltips/TooltipStyles.js

@@ -8,7 +8,7 @@ import { Z_INDEXES } from '../styles/z-indexes';
 var distanceToEdge = function distanceToEdge(size) {
   return size == Size.XSmall ? '8px' : !size || size == Size.Small ? '12px' : '16px';
 };
-export var Tooltip = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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) {
+export var Tooltip = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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 == Size.Small || props.size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.white) : '';
 }, function (props) {
   return props.size == Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white) : '';
@@ -61,10 +61,10 @@ Tooltip.defaultProps = {
   align: 'center',
   position: 'bottom'
 };
-export var TooltipTrigger = function TooltipTrigger(delay) {
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &.hover {\n    &:hover ", ", &:focus-within ", ", &:focus ", " {\n      opacity: 1;\n      transition: 0.5s;\n    transition-delay: ", ";\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);
+export var TooltipTrigger = function TooltipTrigger(triggerType, delay) {
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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    }"));
 };
-export var TooltipContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-block;\n  position: relative;\n\n  ", "\n  \n  &:focus{\n    ", "\n  }\n"])), function (props) {
-  return TooltipTrigger(props.delay);
+export var TooltipContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-block;\n  position: relative;\n\n  ", "\n\n  &:focus {\n    ", "\n  }\n"])), function (props) {
+  return TooltipTrigger(props.triggerType, props.delay);
 }, focusStyles);
 //# sourceMappingURL=TooltipStyles.js.map

package/dist/Tooltips/TooltipStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipStyles.js","names":["styled","css","Size","BOXSHADOWS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","distanceToEdge","size","XSmall","Small","Tooltip","div","props","Medium","Regular","white","align","BOXSHADOW_L2","width","height","maxWidth","primary_800","tooltip","position","withArrow","defaultProps","TooltipTrigger","delay","TooltipContainer"],"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  &.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.js","names":["styled","css","Size","BOXSHADOWS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","distanceToEdge","size","XSmall","Small","Tooltip","div","props","Medium","Regular","white","align","BOXSHADOW_L2","width","height","maxWidth","primary_800","tooltip","position","withArrow","defaultProps","TooltipTrigger","triggerType","delay","TooltipContainer"],"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/TooltipTypes.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Size } from "../types";
 /**
  * Types for the table.

package/dist/Tooltips/TooltipWrapper.cjs

@@ -78,11 +78,12 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
       };
     }
   }, [trigger]);
-  var cls = "".concat(trigger, " ").concat(trigger === 'click' ? showTooltip ? 'show' : 'hide' : '');
+  var cls = "".concat(trigger === 'click' ? showTooltip ? 'show' : 'hide' : '');
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TooltipStyles.TooltipContainer, {
     ref: ref,
     delay: delay,
     tabIndex: tabIndex,
+    triggerType: trigger,
     className: cls,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipStyles.Tooltip, _objectSpread(_objectSpread({
       align: align,

package/dist/Tooltips/TooltipWrapper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipWrapper.cjs","names":["TooltipWrapper","label","children","withArrow","tabIndex","size","Size","Small","height","delay","undefined","align","position","trigger","hideAfter","props","React","useState","showTooltip","setShowTooltip","timeoutRef","useRef","ref","useClickOutsideRef","handleClick","e","current","contains","target","clearTimeout","setTimeout","handleButtonDown","key","useEffect","document","addEventListener","removeEventListener","cls"],"sources":["../../src/Tooltips/TooltipWrapper.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {TooltipProps} from './TooltipTypes';\n\nimport {TooltipContainer, Tooltip} from './TooltipStyles';\nimport {useClickOutsideRef} from '../common';\nimport {useEffect, useRef} from \"react\";\nimport {Size} from \"../types\";\n\nconst TooltipWrapper = ({\n                          label, children,\n                          withArrow,\n                          tabIndex,\n                          size = Size.Small,\n                          height = 'auto',\n                          delay = undefined,\n                          align = 'center',\n                          position = 'bottom',\n                          trigger = 'hover',\n                          hideAfter = 5000,\n                          ...props\n                        }: TooltipProps) => {\n\n  const [showTooltip, setShowTooltip] = React.useState(false);\n  const timeoutRef = useRef<any>();\n\n  const ref = useClickOutsideRef(() => setShowTooltip(false));\n\n  const handleClick = (e?: MouseEvent) => {\n    if (ref?.current?.contains(e?.target as Node)) {\n      setShowTooltip(true)\n      timeoutRef.current && clearTimeout(timeoutRef.current);\n      timeoutRef.current = setTimeout(() => setShowTooltip(false), hideAfter);\n    }\n  }\n  const handleButtonDown = (e?: KeyboardEvent) => {\n    if (e?.key === 'Enter' || e?.key === ' ') {\n      setShowTooltip(true);\n      timeoutRef.current && clearTimeout(timeoutRef.current);\n      timeoutRef.current = setTimeout(() => setShowTooltip(false), hideAfter);\n    }\n  }\n\n  useEffect(() => {\n    if (trigger == 'click') {\n      document.addEventListener('mousedown', handleClick);\n      ref?.current?.addEventListener('keydown', handleButtonDown);\n\n      return () => {\n        document.removeEventListener('mousedown', handleClick);\n        ref?.current?.removeEventListener('keydown', handleButtonDown);\n      };\n    }\n  }, [trigger])\n\n  const cls = `${trigger} ${trigger === 'click' ? showTooltip ? 'show' : 'hide' : ''}`;\n  return <TooltipContainer ref={ref}\n                           delay={delay}\n                           tabIndex={tabIndex}\n                           className={cls}>\n    <Tooltip align={align}\n             height={height}\n             role=\"tooltip\"\n             size={size}\n             withArrow={withArrow}\n             position={position}\n             {...props}>\n      {label}\n    </Tooltip>\n    {children}\n  </TooltipContainer>;\n};\n\nexport default TooltipWrapper;\n"],"mappings":"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"}
+{"version":3,"file":"TooltipWrapper.cjs","names":["TooltipWrapper","label","children","withArrow","tabIndex","size","Size","Small","height","delay","undefined","align","position","trigger","hideAfter","props","React","useState","showTooltip","setShowTooltip","timeoutRef","useRef","ref","useClickOutsideRef","handleClick","e","current","contains","target","clearTimeout","setTimeout","handleButtonDown","key","useEffect","document","addEventListener","removeEventListener","cls"],"sources":["../../src/Tooltips/TooltipWrapper.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {TooltipProps} from './TooltipTypes';\n\nimport {TooltipContainer, Tooltip} from './TooltipStyles';\nimport {useClickOutsideRef} from '../common';\nimport {useEffect, useRef} from \"react\";\nimport {Size} from \"../types\";\n\nconst TooltipWrapper = ({\n                          label, children,\n                          withArrow,\n                          tabIndex,\n                          size = Size.Small,\n                          height = 'auto',\n                          delay = undefined,\n                          align = 'center',\n                          position = 'bottom',\n                          trigger = 'hover',\n                          hideAfter = 5000,\n                          ...props\n                        }: TooltipProps) => {\n\n  const [showTooltip, setShowTooltip] = React.useState(false);\n  const timeoutRef = useRef<any>();\n\n  const ref = useClickOutsideRef(() => setShowTooltip(false));\n\n  const handleClick = (e?: MouseEvent) => {\n    if (ref?.current?.contains(e?.target as Node)) {\n      setShowTooltip(true)\n      timeoutRef.current && clearTimeout(timeoutRef.current);\n      timeoutRef.current = setTimeout(() => setShowTooltip(false), hideAfter);\n    }\n  }\n  const handleButtonDown = (e?: KeyboardEvent) => {\n    if (e?.key === 'Enter' || e?.key === ' ') {\n      setShowTooltip(true);\n      timeoutRef.current && clearTimeout(timeoutRef.current);\n      timeoutRef.current = setTimeout(() => setShowTooltip(false), hideAfter);\n    }\n  }\n\n  useEffect(() => {\n    if (trigger == 'click') {\n      document.addEventListener('mousedown', handleClick);\n      ref?.current?.addEventListener('keydown', handleButtonDown);\n\n      return () => {\n        document.removeEventListener('mousedown', handleClick);\n        ref?.current?.removeEventListener('keydown', handleButtonDown);\n      };\n    }\n  }, [trigger])\n\n  const cls = `${trigger === 'click' ? showTooltip ? 'show' : 'hide' : ''}`;\n  return <TooltipContainer ref={ref}\n                           delay={delay}\n                           tabIndex={tabIndex}\n                           triggerType={trigger}\n                           className={cls}>\n    <Tooltip align={align}\n             height={height}\n             role=\"tooltip\"\n             size={size}\n             withArrow={withArrow}\n             position={position}\n             {...props}>\n      {label}\n    </Tooltip>\n    {children}\n  </TooltipContainer>;\n};\n\nexport default TooltipWrapper;\n"],"mappings":";;;;;;;;;;;AAAA;AAIA;AACA;AAEA;AAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAE9B,IAAMA,cAAc,GAAG,SAAjBA,cAAc,OAYwB;EAAA,IAXlBC,KAAK,QAALA,KAAK;IAAEC,QAAQ,QAARA,QAAQ;IACfC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IAAA,iBACRC,IAAI;IAAJA,IAAI,0BAAGC,WAAI,CAACC,KAAK;IAAA,mBACjBC,MAAM;IAANA,MAAM,4BAAG,MAAM;IAAA,kBACfC,KAAK;IAALA,KAAK,2BAAGC,SAAS;IAAA,kBACjBC,KAAK;IAALA,KAAK,2BAAG,QAAQ;IAAA,qBAChBC,QAAQ;IAARA,QAAQ,8BAAG,QAAQ;IAAA,oBACnBC,OAAO;IAAPA,OAAO,6BAAG,OAAO;IAAA,sBACjBC,SAAS;IAATA,SAAS,+BAAG,IAAI;IACbC,KAAK;EAGhC,sBAAsCC,KAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;IAAA;IAApDC,WAAW;IAAEC,cAAc;EAClC,IAAMC,UAAU,GAAG,IAAAC,YAAM,GAAO;EAEhC,IAAMC,GAAG,GAAG,IAAAC,0BAAkB,EAAC;IAAA,OAAMJ,cAAc,CAAC,KAAK,CAAC;EAAA,EAAC;EAE3D,IAAMK,WAAW,GAAG,SAAdA,WAAW,CAAIC,CAAc,EAAK;IAAA;IACtC,IAAIH,GAAG,aAAHA,GAAG,+BAAHA,GAAG,CAAEI,OAAO,yCAAZ,aAAcC,QAAQ,CAACF,CAAC,aAADA,CAAC,uBAADA,CAAC,CAAEG,MAAM,CAAS,EAAE;MAC7CT,cAAc,CAAC,IAAI,CAAC;MACpBC,UAAU,CAACM,OAAO,IAAIG,YAAY,CAACT,UAAU,CAACM,OAAO,CAAC;MACtDN,UAAU,CAACM,OAAO,GAAGI,UAAU,CAAC;QAAA,OAAMX,cAAc,CAAC,KAAK,CAAC;MAAA,GAAEL,SAAS,CAAC;IACzE;EACF,CAAC;EACD,IAAMiB,gBAAgB,GAAG,SAAnBA,gBAAgB,CAAIN,CAAiB,EAAK;IAC9C,IAAI,CAAAA,CAAC,aAADA,CAAC,uBAADA,CAAC,CAAEO,GAAG,MAAK,OAAO,IAAI,CAAAP,CAAC,aAADA,CAAC,uBAADA,CAAC,CAAEO,GAAG,MAAK,GAAG,EAAE;MACxCb,cAAc,CAAC,IAAI,CAAC;MACpBC,UAAU,CAACM,OAAO,IAAIG,YAAY,CAACT,UAAU,CAACM,OAAO,CAAC;MACtDN,UAAU,CAACM,OAAO,GAAGI,UAAU,CAAC;QAAA,OAAMX,cAAc,CAAC,KAAK,CAAC;MAAA,GAAEL,SAAS,CAAC;IACzE;EACF,CAAC;EAED,IAAAmB,eAAS,EAAC,YAAM;IACd,IAAIpB,OAAO,IAAI,OAAO,EAAE;MAAA;MACtBqB,QAAQ,CAACC,gBAAgB,CAAC,WAAW,EAAEX,WAAW,CAAC;MACnDF,GAAG,aAAHA,GAAG,wCAAHA,GAAG,CAAEI,OAAO,kDAAZ,cAAcS,gBAAgB,CAAC,SAAS,EAAEJ,gBAAgB,CAAC;MAE3D,OAAO,YAAM;QAAA;QACXG,QAAQ,CAACE,mBAAmB,CAAC,WAAW,EAAEZ,WAAW,CAAC;QACtDF,GAAG,aAAHA,GAAG,wCAAHA,GAAG,CAAEI,OAAO,kDAAZ,cAAcU,mBAAmB,CAAC,SAAS,EAAEL,gBAAgB,CAAC;MAChE,CAAC;IACH;EACF,CAAC,EAAE,CAAClB,OAAO,CAAC,CAAC;EAEb,IAAMwB,GAAG,aAAMxB,OAAO,KAAK,OAAO,GAAGK,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,EAAE,CAAE;EACzE,oBAAO,sBAAC,+BAAgB;IAAC,GAAG,EAAEI,GAAI;IACT,KAAK,EAAEb,KAAM;IACb,QAAQ,EAAEL,QAAS;IACnB,WAAW,EAAES,OAAQ;IACrB,SAAS,EAAEwB,GAAI;IAAA,wBACtC,qBAAC,sBAAO;MAAC,KAAK,EAAE1B,KAAM;MACb,MAAM,EAAEH,MAAO;MACf,IAAI,EAAC,SAAS;MACd,IAAI,EAAEH,IAAK;MACX,SAAS,EAAEF,SAAU;MACrB,QAAQ,EAAES;IAAS,GACfG,KAAK;MAAA,UACfd;IAAK,GACE,EACTC,QAAQ;EAAA,EACQ;AACrB,CAAC;AAAC,eAEaF,cAAc;AAAA"}

package/dist/Tooltips/TooltipWrapper.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TooltipProps } from './TooltipTypes';
 declare const TooltipWrapper: ({ label, children, withArrow, tabIndex, size, height, delay, align, position, trigger, hideAfter, ...props }: TooltipProps) => JSX.Element;
 export default TooltipWrapper;

package/dist/Tooltips/TooltipWrapper.js

@@ -70,11 +70,12 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
       };
     }
   }, [trigger]);
-  var cls = "".concat(trigger, " ").concat(trigger === 'click' ? showTooltip ? 'show' : 'hide' : '');
+  var cls = "".concat(trigger === 'click' ? showTooltip ? 'show' : 'hide' : '');
   return /*#__PURE__*/_jsxs(TooltipContainer, {
     ref: ref,
     delay: delay,
     tabIndex: tabIndex,
+    triggerType: trigger,
     className: cls,
     children: [/*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
       align: align,

package/dist/Tooltips/TooltipWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipWrapper.js","names":["React","TooltipContainer","Tooltip","useClickOutsideRef","useEffect","useRef","Size","TooltipWrapper","label","children","withArrow","tabIndex","size","Small","height","delay","undefined","align","position","trigger","hideAfter","props","useState","showTooltip","setShowTooltip","timeoutRef","ref","handleClick","e","current","contains","target","clearTimeout","setTimeout","handleButtonDown","key","document","addEventListener","removeEventListener","cls"],"sources":["../../src/Tooltips/TooltipWrapper.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {TooltipProps} from './TooltipTypes';\n\nimport {TooltipContainer, Tooltip} from './TooltipStyles';\nimport {useClickOutsideRef} from '../common';\nimport {useEffect, useRef} from \"react\";\nimport {Size} from \"../types\";\n\nconst TooltipWrapper = ({\n                          label, children,\n                          withArrow,\n                          tabIndex,\n                          size = Size.Small,\n                          height = 'auto',\n                          delay = undefined,\n                          align = 'center',\n                          position = 'bottom',\n                          trigger = 'hover',\n                          hideAfter = 5000,\n                          ...props\n                        }: TooltipProps) => {\n\n  const [showTooltip, setShowTooltip] = React.useState(false);\n  const timeoutRef = useRef<any>();\n\n  const ref = useClickOutsideRef(() => setShowTooltip(false));\n\n  const handleClick = (e?: MouseEvent) => {\n    if (ref?.current?.contains(e?.target as Node)) {\n      setShowTooltip(true)\n      timeoutRef.current && clearTimeout(timeoutRef.current);\n      timeoutRef.current = setTimeout(() => setShowTooltip(false), hideAfter);\n    }\n  }\n  const handleButtonDown = (e?: KeyboardEvent) => {\n    if (e?.key === 'Enter' || e?.key === ' ') {\n      setShowTooltip(true);\n      timeoutRef.current && clearTimeout(timeoutRef.current);\n      timeoutRef.current = setTimeout(() => setShowTooltip(false), hideAfter);\n    }\n  }\n\n  useEffect(() => {\n    if (trigger == 'click') {\n      document.addEventListener('mousedown', handleClick);\n      ref?.current?.addEventListener('keydown', handleButtonDown);\n\n      return () => {\n        document.removeEventListener('mousedown', handleClick);\n        ref?.current?.removeEventListener('keydown', handleButtonDown);\n      };\n    }\n  }, [trigger])\n\n  const cls = `${trigger} ${trigger === 'click' ? showTooltip ? 'show' : 'hide' : ''}`;\n  return <TooltipContainer ref={ref}\n                           delay={delay}\n                           tabIndex={tabIndex}\n                           className={cls}>\n    <Tooltip align={align}\n             height={height}\n             role=\"tooltip\"\n             size={size}\n             withArrow={withArrow}\n             position={position}\n             {...props}>\n      {label}\n    </Tooltip>\n    {children}\n  </TooltipContainer>;\n};\n\nexport default TooltipWrapper;\n"],"mappings":"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"}
+{"version":3,"file":"TooltipWrapper.js","names":["React","TooltipContainer","Tooltip","useClickOutsideRef","useEffect","useRef","Size","TooltipWrapper","label","children","withArrow","tabIndex","size","Small","height","delay","undefined","align","position","trigger","hideAfter","props","useState","showTooltip","setShowTooltip","timeoutRef","ref","handleClick","e","current","contains","target","clearTimeout","setTimeout","handleButtonDown","key","document","addEventListener","removeEventListener","cls"],"sources":["../../src/Tooltips/TooltipWrapper.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {TooltipProps} from './TooltipTypes';\n\nimport {TooltipContainer, Tooltip} from './TooltipStyles';\nimport {useClickOutsideRef} from '../common';\nimport {useEffect, useRef} from \"react\";\nimport {Size} from \"../types\";\n\nconst TooltipWrapper = ({\n                          label, children,\n                          withArrow,\n                          tabIndex,\n                          size = Size.Small,\n                          height = 'auto',\n                          delay = undefined,\n                          align = 'center',\n                          position = 'bottom',\n                          trigger = 'hover',\n                          hideAfter = 5000,\n                          ...props\n                        }: TooltipProps) => {\n\n  const [showTooltip, setShowTooltip] = React.useState(false);\n  const timeoutRef = useRef<any>();\n\n  const ref = useClickOutsideRef(() => setShowTooltip(false));\n\n  const handleClick = (e?: MouseEvent) => {\n    if (ref?.current?.contains(e?.target as Node)) {\n      setShowTooltip(true)\n      timeoutRef.current && clearTimeout(timeoutRef.current);\n      timeoutRef.current = setTimeout(() => setShowTooltip(false), hideAfter);\n    }\n  }\n  const handleButtonDown = (e?: KeyboardEvent) => {\n    if (e?.key === 'Enter' || e?.key === ' ') {\n      setShowTooltip(true);\n      timeoutRef.current && clearTimeout(timeoutRef.current);\n      timeoutRef.current = setTimeout(() => setShowTooltip(false), hideAfter);\n    }\n  }\n\n  useEffect(() => {\n    if (trigger == 'click') {\n      document.addEventListener('mousedown', handleClick);\n      ref?.current?.addEventListener('keydown', handleButtonDown);\n\n      return () => {\n        document.removeEventListener('mousedown', handleClick);\n        ref?.current?.removeEventListener('keydown', handleButtonDown);\n      };\n    }\n  }, [trigger])\n\n  const cls = `${trigger === 'click' ? showTooltip ? 'show' : 'hide' : ''}`;\n  return <TooltipContainer ref={ref}\n                           delay={delay}\n                           tabIndex={tabIndex}\n                           triggerType={trigger}\n                           className={cls}>\n    <Tooltip align={align}\n             height={height}\n             role=\"tooltip\"\n             size={size}\n             withArrow={withArrow}\n             position={position}\n             {...props}>\n      {label}\n    </Tooltip>\n    {children}\n  </TooltipContainer>;\n};\n\nexport default TooltipWrapper;\n"],"mappings":"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"}