labsense-ui-kit 1.1.56 → 1.1.58

package/dist/Badge/IconTooltip.d.ts

@@ -3,19 +3,14 @@ import { IconProps } from '../Icons';
 interface ITooltipProps {
     icon: IconProps;
     infoIcon?: IconProps;
-    infoText: string;
-    infoText2?: string;
-    infoText3?: string;
-    infoText4?: string;
+    infoText: React.ReactNode;
     tooltipCSS?: {
         background?: string;
-        color?: string;
         gap?: string;
         minWidth?: string;
+        maxWidth?: string;
         position?: 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight';
         tooltipTop?: string;
-        fontSize?: string;
-        fontWeight?: string;
     };
 }
 declare const IconTooltip: React.FC<ITooltipProps>;

package/dist/index.js

@@ -3609,27 +3609,30 @@ var Badge = function Badge(_ref4) {
 };
 
 var _templateObject$3, _templateObject2$3, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
-var TooltipContainer = styled__default.div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  position: absolute;\n  z-index: 10;\n  align-items: center;\n  justify-content: center;\n  visibility: hidden;\n  opacity: 0;\n  transition: opacity 0.3s;\n  border-radius: 4px;\n  padding: 6px 8px;\n  min-width: ", ";\n  background-color: ", ";\n  gap: ", ";\n\n  ", "\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 16px;\n    height: 8px;\n    background-color: ", ";\n    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\n\n    ", "\n  }\n"])), function (_ref) {
+var TooltipContainer = styled__default.div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  position: absolute;\n  z-index: 10;\n  align-items: center;\n  justify-content: center;\n  visibility: hidden;\n  opacity: 0;\n  transition: opacity 0.3s;\n  border-radius: 4px;\n  padding: 6px 8px;\n  min-width: ", ";\n  min-width: ", ";\n  background-color: ", ";\n  gap: ", ";\n\n  ", "\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 16px;\n    height: 8px;\n    background-color: ", ";\n    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\n\n    ", "\n  }\n"])), function (_ref) {
   var $minWidth = _ref.$minWidth;
   return $minWidth != null ? $minWidth : 'auto';
 }, function (_ref2) {
-  var $background = _ref2.$background;
-  return $background != null ? $background : colorVariables.accent.light_1;
+  var $maxWidth = _ref2.$maxWidth;
+  return $maxWidth != null ? $maxWidth : 'auto';
 }, function (_ref3) {
-  var $gap = _ref3.$gap;
-  return $gap != null ? $gap : '16px';
+  var $background = _ref3.$background;
+  return $background != null ? $background : colorVariables.accent.light_1;
 }, function (_ref4) {
-  var $tooltipPosition = _ref4.$tooltipPosition,
-    $iconSize = _ref4.$iconSize,
-    $tooltipTop = _ref4.$tooltipTop;
+  var $gap = _ref4.$gap;
+  return $gap != null ? $gap : '16px';
+}, function (_ref5) {
+  var $tooltipPosition = _ref5.$tooltipPosition,
+    $iconSize = _ref5.$iconSize,
+    $tooltipTop = _ref5.$tooltipTop;
   var vertical = $tooltipPosition.startsWith('top') ? "bottom: " + ($tooltipTop != null ? $tooltipTop : "calc(50% + " + ($iconSize + 2) + "px)") + ";" : "top: " + ($tooltipTop != null ? $tooltipTop : "calc(50% + " + ($iconSize + 2) + "px)") + ";";
   var horizontal = $tooltipPosition.endsWith('Left') ? styled.css(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["left: calc(100% + 10px); transform: translateX(-99%);"]))) : $tooltipPosition.endsWith('Center') ? styled.css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["left: 50%; transform: translateX(-50%);"]))) : styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["right: calc(100% + 10px); transform: translateX(99%);"])));
   return styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["", " ", ";"])), vertical, horizontal);
-}, function (_ref5) {
-  var $background = _ref5.$background;
-  return $background != null ? $background : colorVariables.accent.light_1;
 }, function (_ref6) {
-  var $tooltipPosition = _ref6.$tooltipPosition;
+  var $background = _ref6.$background;
+  return $background != null ? $background : colorVariables.accent.light_1;
+}, function (_ref7) {
+  var $tooltipPosition = _ref7.$tooltipPosition;
   if ($tooltipPosition.startsWith('top')) {
     return $tooltipPosition.endsWith('Left') ? styled.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["top: 100%; right: 10px; transform: rotate(180deg);"]))) : $tooltipPosition.endsWith('Right') ? styled.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["top: 100%; left: 10px; transform: rotate(180deg);"]))) : styled.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["top: 100%; left: 50%; transform: translateX(-50%) rotate(180deg);"])));
   } else {
@@ -3637,51 +3640,36 @@ var TooltipContainer = styled__default.div(_templateObject$3 || (_templateObject
   }
 });
 var TooltipWrapper$1 = styled__default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  position: relative;\n  align-items: center;\n  cursor: pointer;\n\n  &:hover ", " {\n    visibility: visible;\n    opacity: 1;\n  }\n"])), TooltipContainer);
-var IconTooltip = function IconTooltip(_ref7) {
+var IconTooltip = function IconTooltip(_ref8) {
   var _tooltipCSS$position;
-  var _ref7$icon = _ref7.icon,
-    icon = _ref7$icon === void 0 ? {
+  var _ref8$icon = _ref8.icon,
+    icon = _ref8$icon === void 0 ? {
       icon: 'Information',
       size: 12,
       weight: '0px',
       color: colorVariables.text.medium
-    } : _ref7$icon,
-    infoIcon = _ref7.infoIcon,
-    infoText = _ref7.infoText,
-    infoText2 = _ref7.infoText2,
-    infoText3 = _ref7.infoText3,
-    infoText4 = _ref7.infoText4,
-    _ref7$tooltipCSS = _ref7.tooltipCSS,
-    tooltipCSS = _ref7$tooltipCSS === void 0 ? {
+    } : _ref8$icon,
+    infoIcon = _ref8.infoIcon,
+    infoText = _ref8.infoText,
+    _ref8$tooltipCSS = _ref8.tooltipCSS,
+    tooltipCSS = _ref8$tooltipCSS === void 0 ? {
       background: colorVariables.accent.light_1,
-      color: colorVariables.text.dark,
       gap: '4px',
       minWidth: 'max-content',
       position: 'bottomCenter',
-      tooltipTop: undefined,
-      fontSize: '12px',
-      fontWeight: '400'
-    } : _ref7$tooltipCSS;
-  var texts = [infoText, infoText2, infoText3, infoText4].filter(Boolean);
+      tooltipTop: undefined
+    } : _ref8$tooltipCSS;
   return React__default.createElement(TooltipWrapper$1, null, React__default.createElement(Icon, Object.assign({}, icon, {
     onClick: function onClick() {}
   })), React__default.createElement(TooltipContainer, {
     "$tooltipPosition": (_tooltipCSS$position = tooltipCSS.position) != null ? _tooltipCSS$position : 'bottomCenter',
     "$minWidth": tooltipCSS.minWidth,
+    "$maxWidth": tooltipCSS.maxWidth,
     "$tooltipTop": tooltipCSS.tooltipTop,
     "$background": tooltipCSS.background,
     "$gap": tooltipCSS.gap,
     "$iconSize": icon.size || 17
-  }, infoIcon && React__default.createElement(Icon, Object.assign({}, infoIcon)), React__default.createElement(Container, {
-    "$flexDirection": 'column'
-  }, texts.map(function (text, i) {
-    return React__default.createElement(Span, {
-      key: i,
-      "$color": tooltipCSS.color,
-      "$fontSize": tooltipCSS.fontSize,
-      "$fontWeight": tooltipCSS.fontWeight
-    }, text, i < texts.length - 1 && React__default.createElement("br", null));
-  }))));
+  }, infoIcon && React__default.createElement(Icon, Object.assign({}, infoIcon)), infoText));
 };
 
 var _templateObject$4;