labsense-ui-kit 1.1.59 → 1.1.61

package/dist/Badge/IconTooltip.d.ts

@@ -12,6 +12,7 @@ interface ITooltipProps {
         position?: 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight';
         tooltipTop?: string;
         border?: string;
+        borderRadius?: string;
     };
 }
 declare const IconTooltip: React.FC<ITooltipProps>;

package/dist/Container&Span/StyledComponents.d.ts

@@ -35,6 +35,8 @@ export declare const Container: import("styled-components/dist/types").IStyledCo
     $borderRadius?: string | undefined;
     $borderTopLeftRadius?: string | undefined;
     $borderTopRightRadius?: string | undefined;
+    $borderBottomRightRadius?: string | undefined;
+    $borderBottomLeftRadius?: string | undefined;
     $borderTop?: string | undefined;
     $borderBottom?: string | undefined;
     $borderLeft?: string | undefined;

package/dist/index.js

@@ -3361,7 +3361,7 @@ var Icon = function Icon(_ref2) {
 };
 
 var _templateObject$1, _templateObject2$1;
-var Container = styled__default.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex: ", ";\n  flex-wrap: ", ";\n  flex-direction: ", ";\n  justify-content: ", ";\n  align-items: ", ";  \n  gap: ", ";\n  font-weight: ", ";\n  height: ", ";\n  min-height: ", ";\n  max-height: ", ";\n  width: ", ";\n  min-width: ", ";\n  max-width: ", ";\n  padding: ", ";\n  background: ", ";\n  object-fit:", ";\n  margin: ", ";\n  border-radius: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  cursor: ", ";\n  font-size: ", ";\n  opacity: ", ";\n  pointer-events: ", ";\n  position: ", ";\n  top: ", ";\n  bottom: ", ";\n  left: ", ";\n  right: ", ";\n  text-align: ", "; \n  color: ", "; \n  overflow: ", ";\n  overflow-y: ", ";\n  z-index: ", "; \n  scrollbar-width: ", ";\n  border: ", "; \n  border-top: ", ";\n  border-bottom: ", ";\n  border-left: ", ";\n  transition: ", ";\n  box-shadow: ", ";\n\n  &:hover {\n    background: ", ";\n    color: ", ";\n  }\n"])), function (_ref) {
+var Container = styled__default.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex: ", ";\n  flex-wrap: ", ";\n  flex-direction: ", ";\n  justify-content: ", ";\n  align-items: ", ";  \n  gap: ", ";\n  font-weight: ", ";\n  height: ", ";\n  min-height: ", ";\n  max-height: ", ";\n  width: ", ";\n  min-width: ", ";\n  max-width: ", ";\n  padding: ", ";\n  background: ", ";\n  object-fit:", ";\n  margin: ", ";\n  border-radius: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  border-bottom-right-radius: ", ";\n  border-bottom-left-radius: ", ";\n  cursor: ", ";\n  font-size: ", ";\n  opacity: ", ";\n  pointer-events: ", ";\n  position: ", ";\n  top: ", ";\n  bottom: ", ";\n  left: ", ";\n  right: ", ";\n  text-align: ", "; \n  color: ", "; \n  overflow: ", ";\n  overflow-y: ", ";\n  z-index: ", "; \n  scrollbar-width: ", ";\n  border: ", "; \n  border-top: ", ";\n  border-bottom: ", ";\n  border-left: ", ";\n  transition: ", ";\n  box-shadow: ", ";\n\n  &:hover {\n    background: ", ";\n    color: ", ";\n  }\n"])), function (_ref) {
   var $flex = _ref.$flex;
   return $flex;
 }, function (_ref2) {
@@ -3422,104 +3422,110 @@ var Container = styled__default.div(_templateObject$1 || (_templateObject$1 = _t
   var $borderTopRightRadius = _ref20.$borderTopRightRadius;
   return $borderTopRightRadius;
 }, function (_ref21) {
-  var $cursor = _ref21.$cursor;
-  return $cursor;
+  var $borderBottomRightRadius = _ref21.$borderBottomRightRadius;
+  return $borderBottomRightRadius;
 }, function (_ref22) {
-  var $fontSize = _ref22.$fontSize;
-  return $fontSize;
+  var $borderBottomLeftRadius = _ref22.$borderBottomLeftRadius;
+  return $borderBottomLeftRadius;
 }, function (_ref23) {
-  var $opacity = _ref23.$opacity;
-  return $opacity;
+  var $cursor = _ref23.$cursor;
+  return $cursor;
 }, function (_ref24) {
-  var $pointerEvents = _ref24.$pointerEvents;
-  return $pointerEvents;
+  var $fontSize = _ref24.$fontSize;
+  return $fontSize;
 }, function (_ref25) {
-  var $position = _ref25.$position;
-  return $position;
+  var $opacity = _ref25.$opacity;
+  return $opacity;
 }, function (_ref26) {
-  var $top = _ref26.$top;
-  return $top;
+  var $pointerEvents = _ref26.$pointerEvents;
+  return $pointerEvents;
 }, function (_ref27) {
-  var $bottom = _ref27.$bottom;
-  return $bottom;
+  var $position = _ref27.$position;
+  return $position;
 }, function (_ref28) {
-  var $left = _ref28.$left;
-  return $left;
+  var $top = _ref28.$top;
+  return $top;
 }, function (_ref29) {
-  var $right = _ref29.$right;
-  return $right;
+  var $bottom = _ref29.$bottom;
+  return $bottom;
 }, function (_ref30) {
-  var $textAlign = _ref30.$textAlign;
-  return $textAlign;
+  var $left = _ref30.$left;
+  return $left;
 }, function (_ref31) {
-  var $color = _ref31.$color;
-  return $color;
+  var $right = _ref31.$right;
+  return $right;
 }, function (_ref32) {
-  var $overflow = _ref32.$overflow;
-  return $overflow || 'visible';
+  var $textAlign = _ref32.$textAlign;
+  return $textAlign;
 }, function (_ref33) {
-  var $overflowY = _ref33.$overflowY;
-  return $overflowY;
+  var $color = _ref33.$color;
+  return $color;
 }, function (_ref34) {
-  var $zIndex = _ref34.$zIndex;
-  return $zIndex;
+  var $overflow = _ref34.$overflow;
+  return $overflow || 'visible';
 }, function (_ref35) {
-  var $scrollbarWidth = _ref35.$scrollbarWidth;
-  return $scrollbarWidth;
+  var $overflowY = _ref35.$overflowY;
+  return $overflowY;
 }, function (_ref36) {
-  var $border = _ref36.$border;
-  return $border;
+  var $zIndex = _ref36.$zIndex;
+  return $zIndex;
 }, function (_ref37) {
-  var $borderTop = _ref37.$borderTop;
-  return $borderTop;
+  var $scrollbarWidth = _ref37.$scrollbarWidth;
+  return $scrollbarWidth;
 }, function (_ref38) {
-  var $borderBottom = _ref38.$borderBottom;
-  return $borderBottom;
+  var $border = _ref38.$border;
+  return $border;
 }, function (_ref39) {
-  var $borderLeft = _ref39.$borderLeft;
-  return $borderLeft;
+  var $borderTop = _ref39.$borderTop;
+  return $borderTop;
 }, function (_ref40) {
-  var $transition = _ref40.$transition;
-  return $transition;
+  var $borderBottom = _ref40.$borderBottom;
+  return $borderBottom;
 }, function (_ref41) {
-  var $boxShadow = _ref41.$boxShadow;
-  return $boxShadow;
+  var $borderLeft = _ref41.$borderLeft;
+  return $borderLeft;
 }, function (_ref42) {
-  var $hoverBackground = _ref42.$hoverBackground;
-  return $hoverBackground;
+  var $transition = _ref42.$transition;
+  return $transition;
 }, function (_ref43) {
-  var $hoverColor = _ref43.$hoverColor;
+  var $boxShadow = _ref43.$boxShadow;
+  return $boxShadow;
+}, function (_ref44) {
+  var $hoverBackground = _ref44.$hoverBackground;
+  return $hoverBackground;
+}, function (_ref45) {
+  var $hoverColor = _ref45.$hoverColor;
   return $hoverColor;
 });
-var Span = styled__default.span(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  color: ", ";\n  line-height: ", ";\n  text-align: ", ";\n  min-width: ", ";\n  width: ", ";\n  overflow-wrap: ", ";\n"])), function (_ref44) {
-  var $fontFamily = _ref44.$fontFamily;
+var Span = styled__default.span(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  color: ", ";\n  line-height: ", ";\n  text-align: ", ";\n  min-width: ", ";\n  width: ", ";\n  overflow-wrap: ", ";\n"])), function (_ref46) {
+  var $fontFamily = _ref46.$fontFamily;
   return $fontFamily ? $fontFamily : 'NotoSans, sans-serif';
-}, function (_ref45) {
-  var $fontWeight = _ref45.$fontWeight;
+}, function (_ref47) {
+  var $fontWeight = _ref47.$fontWeight;
   return $fontWeight ? $fontWeight : '500';
-}, function (_ref46) {
-  var $fontSize = _ref46.$fontSize;
+}, function (_ref48) {
+  var $fontSize = _ref48.$fontSize;
   return $fontSize ? $fontSize : '16px';
-}, function (_ref47) {
-  var $fontStyle = _ref47.$fontStyle;
+}, function (_ref49) {
+  var $fontStyle = _ref49.$fontStyle;
   return $fontStyle ? $fontStyle : 'normal';
-}, function (_ref48) {
-  var $color = _ref48.$color;
+}, function (_ref50) {
+  var $color = _ref50.$color;
   return $color ? $color : colorVariables.text.medium;
-}, function (_ref49) {
-  var $lineHeight = _ref49.$lineHeight;
+}, function (_ref51) {
+  var $lineHeight = _ref51.$lineHeight;
   return $lineHeight ? $lineHeight : '100%';
-}, function (_ref50) {
-  var $textAlign = _ref50.$textAlign;
+}, function (_ref52) {
+  var $textAlign = _ref52.$textAlign;
   return $textAlign ? $textAlign : 'center';
-}, function (_ref51) {
-  var $minWidth = _ref51.$minWidth;
+}, function (_ref53) {
+  var $minWidth = _ref53.$minWidth;
   return $minWidth;
-}, function (_ref52) {
-  var $width = _ref52.$width;
+}, function (_ref54) {
+  var $width = _ref54.$width;
   return $width;
-}, function (_ref53) {
-  var $overflowWrap = _ref53.$overflowWrap;
+}, function (_ref55) {
+  var $overflowWrap = _ref55.$overflowWrap;
   return $overflowWrap;
 });
 
@@ -3609,33 +3615,36 @@ 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  border: ", ";\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 $border = _ref.$border;
-  return $border;
+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: ", ";\n  padding: 6px 8px;\n  border: ", ";\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 $borderRadius = _ref.$borderRadius;
+  return $borderRadius != null ? $borderRadius : '4px';
 }, function (_ref2) {
-  var $minWidth = _ref2.$minWidth;
-  return $minWidth != null ? $minWidth : 'auto';
+  var $border = _ref2.$border;
+  return $border;
 }, function (_ref3) {
-  var $maxWidth = _ref3.$maxWidth;
-  return $maxWidth != null ? $maxWidth : 'auto';
+  var $minWidth = _ref3.$minWidth;
+  return $minWidth != null ? $minWidth : 'auto';
 }, function (_ref4) {
-  var $background = _ref4.$background;
-  return $background != null ? $background : colorVariables.accent.light_1;
+  var $maxWidth = _ref4.$maxWidth;
+  return $maxWidth != null ? $maxWidth : 'auto';
 }, function (_ref5) {
-  var $gap = _ref5.$gap;
-  return $gap != null ? $gap : '16px';
+  var $background = _ref5.$background;
+  return $background != null ? $background : colorVariables.accent.light_1;
 }, function (_ref6) {
-  var $tooltipPosition = _ref6.$tooltipPosition,
-    $iconSize = _ref6.$iconSize,
-    $tooltipTop = _ref6.$tooltipTop;
+  var $gap = _ref6.$gap;
+  return $gap != null ? $gap : '16px';
+}, function (_ref7) {
+  var $tooltipPosition = _ref7.$tooltipPosition,
+    $iconSize = _ref7.$iconSize,
+    $tooltipTop = _ref7.$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 (_ref7) {
-  var $background = _ref7.$background;
-  return $background != null ? $background : colorVariables.accent.light_1;
 }, function (_ref8) {
-  var $tooltipPosition = _ref8.$tooltipPosition;
+  var $background = _ref8.$background;
+  return $background != null ? $background : colorVariables.accent.light_1;
+}, function (_ref9) {
+  var $tooltipPosition = _ref9.$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 {
@@ -3643,25 +3652,25 @@ 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(_ref9) {
+var IconTooltip = function IconTooltip(_ref10) {
   var _tooltipCSS$position;
-  var _ref9$icon = _ref9.icon,
-    icon = _ref9$icon === void 0 ? {
+  var _ref10$icon = _ref10.icon,
+    icon = _ref10$icon === void 0 ? {
       icon: 'Information',
       size: 12,
       weight: '0px',
       color: colorVariables.text.medium
-    } : _ref9$icon,
-    infoIcon = _ref9.infoIcon,
-    infoText = _ref9.infoText,
-    _ref9$tooltipCSS = _ref9.tooltipCSS,
-    tooltipCSS = _ref9$tooltipCSS === void 0 ? {
+    } : _ref10$icon,
+    infoIcon = _ref10.infoIcon,
+    infoText = _ref10.infoText,
+    _ref10$tooltipCSS = _ref10.tooltipCSS,
+    tooltipCSS = _ref10$tooltipCSS === void 0 ? {
       background: colorVariables.accent.light_1,
       gap: '4px',
       minWidth: 'max-content',
       position: 'bottomCenter',
       tooltipTop: undefined
-    } : _ref9$tooltipCSS;
+    } : _ref10$tooltipCSS;
   return React__default.createElement(TooltipWrapper$1, null, React__default.createElement(Icon, Object.assign({}, icon, {
     onClick: function onClick() {}
   })), React__default.createElement(TooltipContainer, {
@@ -3672,7 +3681,8 @@ var IconTooltip = function IconTooltip(_ref9) {
     "$background": tooltipCSS.background,
     "$gap": tooltipCSS.gap,
     "$iconSize": icon.size || 17,
-    "$border": tooltipCSS.border
+    "$border": tooltipCSS.border,
+    "$borderRadius": tooltipCSS.borderRadius
   }, infoIcon && React__default.createElement(Icon, Object.assign({}, infoIcon)), infoText));
 };
 
@@ -5350,7 +5360,8 @@ var SelectOption = function SelectOption(_ref32) {
     "$gap": '8px',
     "$overflow": 'visible'
   }, (title || titleRightNode) && React__default.createElement(Container, {
-    "$gap": titleRightNode === null || titleRightNode === void 0 ? void 0 : titleRightNode.gap
+    "$gap": titleRightNode === null || titleRightNode === void 0 ? void 0 : titleRightNode.gap,
+    "$alignItems": 'center'
   }, title && React__default.createElement(TitleText$1, {
     "$size": size,
     htmlFor: title,