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

package/dist/Tooltips/TooltipOverflow.js.map

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

package/dist/Tooltips/TooltipStyles.cjs

@@ -1,26 +1,69 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TooltipTrigger = exports.TooltipContainer = exports.Tooltip = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _types = require("../types");
 var _styles = require("../styles");
 var _typography = require("../styles/typography");
 var _zIndexes = require("../styles/z-indexes");
-var _templateObject, _templateObject2, _templateObject3;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const distanceToEdge = size => {
   return size == _types.Size.XSmall ? '8px' : !size || size == _types.Size.Small ? '12px' : '16px';
 };
-const Tooltip = exports.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"])), props => props.$size == _types.Size.Small || props.$size != _types.Size.Medium ? (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('white', props.theme)) : '', props => props.$size == _types.Size.XSmall ? (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('white', props.theme)) : '', props => props.$size == _types.Size.Medium ? (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('white', props.theme)) : '', props => props.$align == 'center' ? 'text-align: center;' : '', _styles.BOXSHADOWS.BOXSHADOW_L2, props => props.$size == _types.Size.XSmall ? '4px 8px' : props.$size == _types.Size.Medium ? '8px 12px' : '6px 10px', props => props.$width ? "width: ".concat(props.$width, ";") : 'width: max-content;', props => props.$height, props => {
-  var _props$$maxWidth;
-  return (_props$$maxWidth = props.$maxWidth) !== null && _props$$maxWidth !== void 0 ? _props$$maxWidth : '34em';
-}, props => _styles.COLORS.getColor('primary_800', props.theme), _zIndexes.Z_INDEXES.tooltip, props => props.$position == 'top' ? 'bottom: 110%;' : props.$position == 'bottom' ? 'top: 110%;' : '', props => props.$position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '', props => props.$position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : '', props => props.$position == 'left' || props.$position == 'right' ? '' : props.$align == 'start' ? 'left: 0%;' : props.$align == 'end' ? 'right: 0%;' : 'left: 50%; transform: translateX(-50%);', props => !props.$withArrow ? 'display: none;' : '', props => props.$position == 'top' ? 'top: 100%;' : props.$position == 'bottom' ? 'bottom: 100%;' : '', props => props.$position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : '', props => props.$position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : '', props => props.$position == 'left' || props.$position == 'right' ? '' : props.$align == 'start' ? "left: ".concat(distanceToEdge(props.$size), ";") : props.$align == 'end' ? "right: ".concat(distanceToEdge(props.$size), ";") : 'left: 50%;', props => props.$position == 'left' ? '' : 'margin-left: -5px;', props => props.$position == 'top' ? _styles.COLORS.getColor('primary_800', props.theme) : 'transparent', props => props.$position == 'right' ? _styles.COLORS.getColor('primary_800', props.theme) : 'transparent', props => props.$position == 'bottom' ? _styles.COLORS.getColor('primary_800', props.theme) : 'transparent', props => props.$position == 'left' ? _styles.COLORS.getColor('primary_800', props.theme) : 'transparent');
+const Tooltip = exports.Tooltip = _styledComponents.default.div`
+  pointer-events: none;
+  ${props => props.$size == _types.Size.Small || props.$size != _types.Size.Medium ? (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('white', props.theme)) : ''}
+  ${props => props.$size == _types.Size.XSmall ? (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('white', props.theme)) : ''}
+    ${props => props.$size == _types.Size.Medium ? (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('white', props.theme)) : ''}
+    ${props => props.$align == 'center' ? 'text-align: center;' : ''}
+    box-shadow: ${_styles.BOXSHADOWS.BOXSHADOW_L2};
+  box-sizing: border-box;
+
+  padding: ${props => props.$size == _types.Size.XSmall ? '4px 8px' : props.$size == _types.Size.Medium ? '8px 12px' : '6px 10px'};
+  border-radius: 2px;
+  ${props => props.$width ? `width: ${props.$width};` : 'width: max-content;'}
+  height: ${props => props.$height};
+  max-width: ${props => props.$maxWidth ?? '34em'};
+  background: ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+  position: absolute;
+  opacity: 0;
+  z-index: ${_zIndexes.Z_INDEXES.tooltip};
+  ${props => props.$position == 'top' ? 'bottom: 110%;' : props.$position == 'bottom' ? 'top: 110%;' : ''}
+
+  ${props => props.$position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : ''}
+    ${props => props.$position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : ''}
+            
+    ${props => props.$position == 'left' || props.$position == 'right' ? '' : props.$align == 'start' ? 'left: 0%;' : props.$align == 'end' ? 'right: 0%;' : 'left: 50%; transform: translateX(-50%);'}
+
+
+&::after {
+    ${props => !props.$withArrow ? 'display: none;' : ''}
+    content: "";
+    position: absolute;
+    ${props => props.$position == 'top' ? 'top: 100%;' : props.$position == 'bottom' ? 'bottom: 100%;' : ''}
+
+    ${props => props.$position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : ''}
+    ${props => props.$position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : ''}
+
+    ${props => props.$position == 'left' || props.$position == 'right' ? '' : props.$align == 'start' ? `left: ${distanceToEdge(props.$size)};` : props.$align == 'end' ? `right: ${distanceToEdge(props.$size)};` : 'left: 50%;'}
+
+    ${props => props.$position == 'left' ? '' : 'margin-left: -5px;'}
+    margin: -0.5px;
+    border-width: 4px;
+    border-style: solid;
+    border-color: ${props => props.$position == 'top' ? _styles.COLORS.getColor('primary_800', props.theme) : 'transparent'} ${props => props.$position == 'right' ? _styles.COLORS.getColor('primary_800', props.theme) : 'transparent'}
+      ${props => props.$position == 'bottom' ? _styles.COLORS.getColor('primary_800', props.theme) : 'transparent'} ${props => props.$position == 'left' ? _styles.COLORS.getColor('primary_800', props.theme) : 'transparent'};
+  }
+
+  & > span {
+    word-wrap: break-word;
+    color: white;
+  }
+`;
 Tooltip.defaultProps = {
   $withArrow: false,
   $size: _types.Size.Small,
@@ -28,7 +71,33 @@ Tooltip.defaultProps = {
   $align: 'center',
   $position: 'bottom'
 };
-const TooltipTrigger = (triggerType, delay) => (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    }"));
+const TooltipTrigger = (triggerType, delay) => (0, _styledComponents.css)`
+  ${triggerType == 'hover' ? `&:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {
+      opacity: 1;
+      transition: 0.5s;
+    transition-delay: ${delay ?? '0.7s'};
+    }` : `& ${Tooltip} {
+      transition: 0.5s;
+      transition-delay: ${delay ?? '0s'};
+    }
+  
+    &.show ${Tooltip} {
+      opacity: 1;
+    }
+  
+    &.hide ${Tooltip} {
+      opacity: 0;
+    }`}
+`;
 exports.TooltipTrigger = TooltipTrigger;
-const TooltipContainer = exports.TooltipContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  position: relative;\n\n  ", "\n\n  &:focus {\n    ", "\n  }\n"])), props => TooltipTrigger(props.$triggerType, props.$delay), _styles.focusStyles);
+const TooltipContainer = exports.TooltipContainer = _styledComponents.default.div`
+  display: inline-block;
+  position: relative;
+
+  ${props => TooltipTrigger(props.$triggerType, props.$delay)}
+
+  &:focus {
+    ${_styles.focusStyles}
+  }
+`;
 //# sourceMappingURL=TooltipStyles.cjs.map

package/dist/Tooltips/TooltipStyles.cjs.map

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

package/dist/Tooltips/TooltipStyles.d.ts

@@ -1,16 +1,15 @@
-/// <reference types="react" />
-import { Size } from '../types';
-export declare const Tooltip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $withArrow?: boolean | undefined;
-    $size?: Size | undefined;
-    $height?: string | undefined;
-    $maxWidth?: string | undefined;
-    $align?: 'start' | 'end' | 'center' | undefined;
-    $position?: 'top' | 'right' | 'bottom' | 'left' | undefined;
-    $width?: string | undefined;
-}>> & string;
-export declare const TooltipTrigger: (triggerType: 'hover' | 'click', delay?: string) => import("styled-components").RuleSet<object>;
-export declare const TooltipContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $triggerType: 'hover' | 'click';
-    $delay?: string | undefined;
-}>> & string;
+import { Size } from '../types';
+export declare const Tooltip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $withArrow?: boolean;
+    $size?: Size;
+    $height?: string;
+    $maxWidth?: string;
+    $align?: "start" | "end" | "center" | undefined;
+    $position?: "top" | "right" | "bottom" | "left" | undefined;
+    $width?: string;
+}>> & string;
+export declare const TooltipTrigger: (triggerType: "hover" | "click", delay?: string) => import("styled-components").RuleSet<object>;
+export declare const TooltipContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $triggerType: "hover" | "click";
+    $delay?: string;
+}>> & string;

package/dist/Tooltips/TooltipStyles.js

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

package/dist/Tooltips/TooltipTypes.d.ts

@@ -1,29 +1,28 @@
-/// <reference types="react" />
-import { Size } from "../types";
-/**
- * Types for the table.
- */
-export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
-    label?: string;
-    /** Optional. If set, then there will be an arrow at the edge closest to children components */
-    withArrow?: boolean;
-    /** Optional.  */
-    width?: string;
-    /** Optional. Defaults to 'Small'. */
-    size?: Size;
-    /** Optional. Delay in appearance of the tooltip. Defaults to 0.7s for 'hover' trigger type. */
-    delay?: string;
-    /** Optional. TabIndex property set to TooltipContainer  */
-    tabIndex?: number;
-    /** Optional. Defaults to 'auto'. */
-    height?: string;
-    /** Optional. To which edge of wrapped components tooltip will be aligned. Defaults to 'center'.  */
-    align?: 'start' | 'end' | 'center' | undefined;
-    /** Optional. Defaults to 'bottom'.  */
-    position?: 'top' | 'right' | 'bottom' | 'left' | undefined;
-    children?: React.ReactNode;
-    /** Optional. What should trigger the appearance of the tooltip - hover or click event. */
-    trigger?: 'hover' | 'click';
-    /** Optional. How long tooltip will be visible after appearing to the user in milliseconds. Works only for trigger type 'click'. Defaults to '5000' */
-    hideAfter?: number;
-}
+import { Size } from "../types";
+/**
+ * Types for the table.
+ */
+export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
+    label?: string;
+    /** Optional. If set, then there will be an arrow at the edge closest to children components */
+    withArrow?: boolean;
+    /** Optional.  */
+    width?: string;
+    /** Optional. Defaults to 'Small'. */
+    size?: Size;
+    /** Optional. Delay in appearance of the tooltip. Defaults to 0.7s for 'hover' trigger type. */
+    delay?: string;
+    /** Optional. TabIndex property set to TooltipContainer  */
+    tabIndex?: number;
+    /** Optional. Defaults to 'auto'. */
+    height?: string;
+    /** Optional. To which edge of wrapped components tooltip will be aligned. Defaults to 'center'.  */
+    align?: 'start' | 'end' | 'center' | undefined;
+    /** Optional. Defaults to 'bottom'.  */
+    position?: 'top' | 'right' | 'bottom' | 'left' | undefined;
+    children?: React.ReactNode;
+    /** Optional. What should trigger the appearance of the tooltip - hover or click event. */
+    trigger?: 'hover' | 'click';
+    /** Optional. How long tooltip will be visible after appearing to the user in milliseconds. Works only for trigger type 'click'. Defaults to '5000' */
+    hideAfter?: number;
+}

package/dist/Tooltips/TooltipWrapper.cjs

@@ -34,18 +34,17 @@ const TooltipWrapper = _ref => {
     } = _ref,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   const [showTooltip, setShowTooltip] = React.useState(false);
-  const timeoutRef = (0, _react.useRef)();
+  const timeoutRef = (0, _react.useRef)(null);
   const ref = (0, _common.useClickOutsideRef)(() => setShowTooltip(false));
   const handleClick = e => {
-    var _ref$current;
-    if (ref !== null && ref !== void 0 && (_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains(e === null || e === void 0 ? void 0 : e.target)) {
+    if (ref?.current?.contains(e?.target)) {
       setShowTooltip(true);
       timeoutRef.current && clearTimeout(timeoutRef.current);
       timeoutRef.current = setTimeout(() => setShowTooltip(false), hideAfter);
     }
   };
   const handleButtonDown = e => {
-    if ((e === null || e === void 0 ? void 0 : e.key) === 'Enter' || (e === null || e === void 0 ? void 0 : e.key) === ' ') {
+    if (e?.key === 'Enter' || e?.key === ' ') {
       setShowTooltip(true);
       timeoutRef.current && clearTimeout(timeoutRef.current);
       timeoutRef.current = setTimeout(() => setShowTooltip(false), hideAfter);
@@ -53,17 +52,15 @@ const TooltipWrapper = _ref => {
   };
   (0, _react.useEffect)(() => {
     if (trigger == 'click') {
-      var _ref$current2;
       document.addEventListener('mousedown', handleClick);
-      ref === null || ref === void 0 || (_ref$current2 = ref.current) === null || _ref$current2 === void 0 || _ref$current2.addEventListener('keydown', handleButtonDown);
+      ref?.current?.addEventListener('keydown', handleButtonDown);
       return () => {
-        var _ref$current3;
         document.removeEventListener('mousedown', handleClick);
-        ref === null || ref === void 0 || (_ref$current3 = ref.current) === null || _ref$current3 === void 0 || _ref$current3.removeEventListener('keydown', handleButtonDown);
+        ref?.current?.removeEventListener('keydown', handleButtonDown);
       };
     }
   }, [trigger]);
-  const cls = "".concat(trigger === 'click' ? showTooltip ? 'show' : 'hide' : '');
+  const cls = `${trigger === 'click' ? showTooltip ? 'show' : 'hide' : ''}`;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TooltipStyles.TooltipContainer, {
     ref: ref,
     $delay: delay,

package/dist/Tooltips/TooltipWrapper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipWrapper.cjs","names":["_react","_interopRequireWildcard","require","React","_TooltipStyles","_common","_types","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","TooltipWrapper","_ref","label","children","withArrow","tabIndex","size","Size","Small","height","delay","undefined","align","position","trigger","hideAfter","props","_objectWithoutProperties2","showTooltip","setShowTooltip","useState","timeoutRef","useRef","ref","useClickOutsideRef","handleClick","_ref$current","current","contains","target","clearTimeout","setTimeout","handleButtonDown","key","useEffect","_ref$current2","document","addEventListener","_ref$current3","removeEventListener","cls","concat","jsxs","TooltipContainer","$delay","$triggerType","className","jsx","Tooltip","$align","$height","role","$size","$withArrow","$position","_default","exports"],"sources":["../../src/Tooltips/TooltipWrapper.tsx"],"sourcesContent":["import * as React from 'react';\r\n\r\nimport {TooltipProps} from './TooltipTypes';\r\n\r\nimport {TooltipContainer, Tooltip} from './TooltipStyles';\r\nimport {useClickOutsideRef} from '../common';\r\nimport {useEffect, useRef} from \"react\";\r\nimport {Size} from \"../types\";\r\n\r\nconst TooltipWrapper = ({\r\n                          label, children,\r\n                          withArrow,\r\n                          tabIndex,\r\n                          size = Size.Small,\r\n                          height = 'auto',\r\n                          delay = undefined,\r\n                          align = 'center',\r\n                          position = 'bottom',\r\n                          trigger = 'hover',\r\n                          hideAfter = 5000,\r\n                          ...props\r\n                        }: TooltipProps) => {\r\n\r\n  const [showTooltip, setShowTooltip] = React.useState(false);\r\n  const timeoutRef = useRef<any>();\r\n\r\n  const ref = useClickOutsideRef(() => setShowTooltip(false));\r\n\r\n  const handleClick = (e?: MouseEvent) => {\r\n    if (ref?.current?.contains(e?.target as Node)) {\r\n      setShowTooltip(true)\r\n      timeoutRef.current && clearTimeout(timeoutRef.current);\r\n      timeoutRef.current = setTimeout(() => setShowTooltip(false), hideAfter);\r\n    }\r\n  }\r\n  const handleButtonDown = (e?: KeyboardEvent) => {\r\n    if (e?.key === 'Enter' || e?.key === ' ') {\r\n      setShowTooltip(true);\r\n      timeoutRef.current && clearTimeout(timeoutRef.current);\r\n      timeoutRef.current = setTimeout(() => setShowTooltip(false), hideAfter);\r\n    }\r\n  }\r\n\r\n  useEffect(() => {\r\n    if (trigger == 'click') {\r\n      document.addEventListener('mousedown', handleClick);\r\n      ref?.current?.addEventListener('keydown', handleButtonDown);\r\n\r\n      return () => {\r\n        document.removeEventListener('mousedown', handleClick);\r\n        ref?.current?.removeEventListener('keydown', handleButtonDown);\r\n      };\r\n    }\r\n  }, [trigger])\r\n\r\n  const cls = `${trigger === 'click' ? showTooltip ? 'show' : 'hide' : ''}`;\r\n  return <TooltipContainer ref={ref}\r\n                           $delay={delay}\r\n                           tabIndex={tabIndex}\r\n                           $triggerType={trigger}\r\n                           className={cls}>\r\n    <Tooltip $align={align}\r\n             $height={height}\r\n             role=\"tooltip\"\r\n             $size={size}\r\n             $withArrow={withArrow}\r\n             $position={position}\r\n             {...props}>\r\n      {label}\r\n    </Tooltip>\r\n    {children}\r\n  </TooltipContainer>;\r\n};\r\n\r\nexport default TooltipWrapper;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TooltipWrapper.cjs","names":["_react","_interopRequireWildcard","require","React","_TooltipStyles","_common","_types","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","TooltipWrapper","_ref","label","children","withArrow","tabIndex","size","Size","Small","height","delay","undefined","align","position","trigger","hideAfter","props","_objectWithoutProperties2","showTooltip","setShowTooltip","useState","timeoutRef","useRef","ref","useClickOutsideRef","handleClick","current","contains","target","clearTimeout","setTimeout","handleButtonDown","key","useEffect","document","addEventListener","removeEventListener","cls","jsxs","TooltipContainer","$delay","$triggerType","className","jsx","Tooltip","$align","$height","role","$size","$withArrow","$position","_default","exports"],"sources":["../../src/Tooltips/TooltipWrapper.tsx"],"sourcesContent":["import * as React from 'react';\r\n\r\nimport {TooltipProps} from './TooltipTypes';\r\n\r\nimport {TooltipContainer, Tooltip} from './TooltipStyles';\r\nimport {useClickOutsideRef} from '../common';\r\nimport {useEffect, useRef} from \"react\";\r\nimport {Size} from \"../types\";\r\n\r\nconst TooltipWrapper = ({\r\n                          label, children,\r\n                          withArrow,\r\n                          tabIndex,\r\n                          size = Size.Small,\r\n                          height = 'auto',\r\n                          delay = undefined,\r\n                          align = 'center',\r\n                          position = 'bottom',\r\n                          trigger = 'hover',\r\n                          hideAfter = 5000,\r\n                          ...props\r\n                        }: TooltipProps) => {\r\n\r\n  const [showTooltip, setShowTooltip] = React.useState(false);\r\n  const timeoutRef = useRef<any>(null);\r\n\r\n  const ref = useClickOutsideRef(() => setShowTooltip(false));\r\n\r\n  const handleClick = (e?: MouseEvent) => {\r\n    if (ref?.current?.contains(e?.target as Node)) {\r\n      setShowTooltip(true)\r\n      timeoutRef.current && clearTimeout(timeoutRef.current);\r\n      timeoutRef.current = setTimeout(() => setShowTooltip(false), hideAfter);\r\n    }\r\n  }\r\n  const handleButtonDown = (e?: KeyboardEvent) => {\r\n    if (e?.key === 'Enter' || e?.key === ' ') {\r\n      setShowTooltip(true);\r\n      timeoutRef.current && clearTimeout(timeoutRef.current);\r\n      timeoutRef.current = setTimeout(() => setShowTooltip(false), hideAfter);\r\n    }\r\n  }\r\n\r\n  useEffect(() => {\r\n    if (trigger == 'click') {\r\n      document.addEventListener('mousedown', handleClick);\r\n      ref?.current?.addEventListener('keydown', handleButtonDown);\r\n\r\n      return () => {\r\n        document.removeEventListener('mousedown', handleClick);\r\n        ref?.current?.removeEventListener('keydown', handleButtonDown);\r\n      };\r\n    }\r\n  }, [trigger])\r\n\r\n  const cls = `${trigger === 'click' ? showTooltip ? 'show' : 'hide' : ''}`;\r\n  return <TooltipContainer ref={ref}\r\n                           $delay={delay}\r\n                           tabIndex={tabIndex}\r\n                           $triggerType={trigger}\r\n                           className={cls}>\r\n    <Tooltip $align={align}\r\n             $height={height}\r\n             role=\"tooltip\"\r\n             $size={size}\r\n             $withArrow={withArrow}\r\n             $position={position}\r\n             {...props}>\r\n      {label}\r\n    </Tooltip>\r\n    {children}\r\n  </TooltipContainer>;\r\n};\r\n\r\nexport default TooltipWrapper;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Tooltips/TooltipWrapper.d.ts

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