labsense-ui-kit 1.1.18 → 1.1.20

package/dist/index.modern.js

@@ -2967,7 +2967,7 @@ var Icon = function Icon(_ref2) {
 };
 
 var _templateObject$1, _templateObject2$1;
-var Container = styled.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-bottom: ", ";\n  border-left: ", ";\n\n  &:hover {\n    background: ", ";\n    color: ", ";\n  }\n"])), function (_ref) {
+var Container = styled.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\n  &:hover {\n    background: ", ";\n    color: ", ";\n  }\n"])), function (_ref) {
   var $flex = _ref.$flex;
   return $flex;
 }, function (_ref2) {
@@ -3076,44 +3076,50 @@ var Container = styled.div(_templateObject$1 || (_templateObject$1 = _taggedTemp
   var $border = _ref36.$border;
   return $border;
 }, function (_ref37) {
-  var $borderBottom = _ref37.$borderBottom;
-  return $borderBottom;
+  var $borderTop = _ref37.$borderTop;
+  return $borderTop;
 }, function (_ref38) {
-  var $borderLeft = _ref38.$borderLeft;
-  return $borderLeft;
+  var $borderBottom = _ref38.$borderBottom;
+  return $borderBottom;
 }, function (_ref39) {
-  var $hoverBackground = _ref39.$hoverBackground;
-  return $hoverBackground;
+  var $borderLeft = _ref39.$borderLeft;
+  return $borderLeft;
 }, function (_ref40) {
-  var $hoverColor = _ref40.$hoverColor;
+  var $transition = _ref40.$transition;
+  return $transition;
+}, function (_ref41) {
+  var $hoverBackground = _ref41.$hoverBackground;
+  return $hoverBackground;
+}, function (_ref42) {
+  var $hoverColor = _ref42.$hoverColor;
   return $hoverColor;
 });
-var Span = styled.span(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: ", ";\n  text-align: ", ";\n  min-width: ", ";\n  width: ", ";\n  overflow-wrap: ", ";\n"])), function (_ref41) {
-  var $fontFamily = _ref41.$fontFamily;
+var Span = styled.span(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: ", ";\n  text-align: ", ";\n  min-width: ", ";\n  width: ", ";\n  overflow-wrap: ", ";\n"])), function (_ref43) {
+  var $fontFamily = _ref43.$fontFamily;
   return $fontFamily ? $fontFamily : 'NotoSans, sans-serif';
-}, function (_ref42) {
-  var $fontWeight = _ref42.$fontWeight;
+}, function (_ref44) {
+  var $fontWeight = _ref44.$fontWeight;
   return $fontWeight ? $fontWeight : '500';
-}, function (_ref43) {
-  var $fontSize = _ref43.$fontSize;
+}, function (_ref45) {
+  var $fontSize = _ref45.$fontSize;
   return $fontSize ? $fontSize : '16px';
-}, function (_ref44) {
-  var $color = _ref44.$color;
+}, function (_ref46) {
+  var $color = _ref46.$color;
   return $color ? $color : colorVariables.text.medium;
-}, function (_ref45) {
-  var $lineHeight = _ref45.$lineHeight;
+}, function (_ref47) {
+  var $lineHeight = _ref47.$lineHeight;
   return $lineHeight ? $lineHeight : '100%';
-}, function (_ref46) {
-  var $textAlign = _ref46.$textAlign;
+}, function (_ref48) {
+  var $textAlign = _ref48.$textAlign;
   return $textAlign ? $textAlign : 'center';
-}, function (_ref47) {
-  var $minWidth = _ref47.$minWidth;
+}, function (_ref49) {
+  var $minWidth = _ref49.$minWidth;
   return $minWidth;
-}, function (_ref48) {
-  var $width = _ref48.$width;
+}, function (_ref50) {
+  var $width = _ref50.$width;
   return $width;
-}, function (_ref49) {
-  var $overflowWrap = _ref49.$overflowWrap;
+}, function (_ref51) {
+  var $overflowWrap = _ref51.$overflowWrap;
   return $overflowWrap;
 });
 
@@ -5121,8 +5127,11 @@ var SearchBox = function SearchBox(_ref6) {
 };
 
 var _templateObject$e, _templateObject2$b, _templateObject3$7, _templateObject4$5, _templateObject5$5;
-var Label = styled.label(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n  cursor: auto;\n  width: 100%;\n  font-weight: 500;\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref) {
-  var $size = _ref.$size;
+var Label = styled.label(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n  cursor: auto;\n  width: 100%;\n  font-weight: ", ";\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref) {
+  var $fontWeight = _ref.$fontWeight;
+  return $fontWeight != null ? $fontWeight : '500';
+}, function (_ref2) {
+  var $size = _ref2.$size;
   switch ($size) {
     case 'small':
       return "\n          font-size: 12px;\n          line-height: 12px;\n        ";
@@ -5133,8 +5142,8 @@ var Label = styled.label(_templateObject$e || (_templateObject$e = _taggedTempla
     default:
       return "\n          font-size: 14px;\n          line-height: 14px;\n        ";
   }
-}, function (_ref2) {
-  var $titlecolor = _ref2.$titlecolor;
+}, function (_ref3) {
+  var $titlecolor = _ref3.$titlecolor;
   switch ($titlecolor) {
     case 'dark':
       return colorVariables.text.dark;
@@ -5156,22 +5165,22 @@ var Label = styled.label(_templateObject$e || (_templateObject$e = _taggedTempla
       return $titlecolor;
   }
 });
-var Input = styled.input(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  pointer-events: ", ";\n\n  ", "\n\n  &:focus {\n    border: 1px solid\n      ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables.border.light, function (_ref3) {
-  var $disabled = _ref3.$disabled;
+var Input = styled.input(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  pointer-events: ", ";\n\n  ", "\n\n  &:focus {\n    border: 1px solid\n      ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables.border.light, function (_ref4) {
+  var $disabled = _ref4.$disabled;
   return $disabled ? 'not-allowed' : 'auto';
-}, function (_ref4) {
-  var $disabled = _ref4.$disabled,
-    $background = _ref4.$background;
-  return $disabled ? colorVariables.disabled.secondary : $background;
 }, function (_ref5) {
-  var $color = _ref5.$color;
-  return $color;
+  var $disabled = _ref5.$disabled,
+    $background = _ref5.$background;
+  return $disabled ? colorVariables.disabled.secondary : $background;
 }, function (_ref6) {
-  var $disabled = _ref6.$disabled;
-  return $disabled ? 'none' : 'auto';
+  var $color = _ref6.$color;
+  return $color;
 }, function (_ref7) {
-  var $size = _ref7.$size,
-    $type = _ref7.$type;
+  var $disabled = _ref7.$disabled;
+  return $disabled ? 'none' : 'auto';
+}, function (_ref8) {
+  var $size = _ref8.$size,
+    $type = _ref8.$type;
   switch ($size) {
     case 'small':
       return "\n          font-size: 12px;\n          padding: " + ($type === 'password' ? '5px 38px 5px 10px' : '5px 10px') + ";\n        ";
@@ -5182,8 +5191,8 @@ var Input = styled.input(_templateObject2$b || (_templateObject2$b = _taggedTemp
     default:
       return "\n          font-size: 14px;\n          padding: " + ($type === 'password' ? '7px 38px 7px 12px' : '7px 12px') + ";\n        ";
   }
-}, function (_ref8) {
-  var $color = _ref8.$color;
+}, function (_ref9) {
+  var $color = _ref9.$color;
   switch ($color) {
     case 'dark':
       return colorVariables.text.dark;
@@ -5206,39 +5215,40 @@ var Input = styled.input(_templateObject2$b || (_templateObject2$b = _taggedTemp
   }
 }, colorVariables.text.light);
 var InputWrapper$1 = styled.div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n"])));
-var IconWrapper$1 = styled.div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 12px;\n  cursor: pointer;\n\n  > div {\n    cursor: ", ";\n  }\n"])), function (_ref9) {
-  var $disabled = _ref9.$disabled;
+var IconWrapper$1 = styled.div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 12px;\n  cursor: pointer;\n\n  > div {\n    cursor: ", ";\n  }\n"])), function (_ref10) {
+  var $disabled = _ref10.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 });
 var Asterisk$1 = styled.span(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: 10px;\n  height: fit-content;\n  position: absolute;\n  top: -2px;\n  right: -8px;\n"])), colorVariables["default"].error);
-var TextField = function TextField(_ref10) {
-  var _ref10$type = _ref10.type,
-    type = _ref10$type === void 0 ? 'text' : _ref10$type,
-    title = _ref10.title,
-    placeholder = _ref10.placeholder,
-    _ref10$disabled = _ref10.disabled,
-    disabled = _ref10$disabled === void 0 ? false : _ref10$disabled,
-    inputValue = _ref10.inputValue,
-    onChange = _ref10.onChange,
-    _ref10$size = _ref10.size,
-    size = _ref10$size === void 0 ? 'medium' : _ref10$size,
-    _ref10$color = _ref10.color,
-    color = _ref10$color === void 0 ? colorVariables.text.dark : _ref10$color,
-    _ref10$padding = _ref10.padding,
-    padding = _ref10$padding === void 0 ? '0px' : _ref10$padding,
-    _ref10$titlecolor = _ref10.titlecolor,
-    titlecolor = _ref10$titlecolor === void 0 ? colorVariables.text.dark : _ref10$titlecolor,
-    icon = _ref10.icon,
-    _ref10$iconsize = _ref10.iconsize,
-    iconsize = _ref10$iconsize === void 0 ? 18 : _ref10$iconsize,
-    iconweight = _ref10.iconweight,
-    iconcolor = _ref10.iconcolor,
-    _ref10$required = _ref10.required,
-    required = _ref10$required === void 0 ? false : _ref10$required,
-    _ref10$background = _ref10.background,
-    background = _ref10$background === void 0 ? colorVariables["default"].tertiary : _ref10$background,
-    onEnter = _ref10.onEnter,
-    titleRightNode = _ref10.titleRightNode;
+var TextField = function TextField(_ref11) {
+  var _ref11$type = _ref11.type,
+    type = _ref11$type === void 0 ? 'text' : _ref11$type,
+    title = _ref11.title,
+    titleWeight = _ref11.titleWeight,
+    placeholder = _ref11.placeholder,
+    _ref11$disabled = _ref11.disabled,
+    disabled = _ref11$disabled === void 0 ? false : _ref11$disabled,
+    inputValue = _ref11.inputValue,
+    onChange = _ref11.onChange,
+    _ref11$size = _ref11.size,
+    size = _ref11$size === void 0 ? 'medium' : _ref11$size,
+    _ref11$color = _ref11.color,
+    color = _ref11$color === void 0 ? colorVariables.text.dark : _ref11$color,
+    _ref11$padding = _ref11.padding,
+    padding = _ref11$padding === void 0 ? '0px' : _ref11$padding,
+    _ref11$titlecolor = _ref11.titlecolor,
+    titlecolor = _ref11$titlecolor === void 0 ? colorVariables.text.dark : _ref11$titlecolor,
+    icon = _ref11.icon,
+    _ref11$iconsize = _ref11.iconsize,
+    iconsize = _ref11$iconsize === void 0 ? 18 : _ref11$iconsize,
+    iconweight = _ref11.iconweight,
+    iconcolor = _ref11.iconcolor,
+    _ref11$required = _ref11.required,
+    required = _ref11$required === void 0 ? false : _ref11$required,
+    _ref11$background = _ref11.background,
+    background = _ref11$background === void 0 ? colorVariables["default"].tertiary : _ref11$background,
+    onEnter = _ref11.onEnter,
+    titleRightNode = _ref11.titleRightNode;
   var _useState = useState(disabled),
     isDisabled = _useState[0],
     setIsDisabled = _useState[1];
@@ -5267,6 +5277,7 @@ var TextField = function TextField(_ref10) {
     "$gap": titleRightNode === null || titleRightNode === void 0 ? void 0 : titleRightNode.gap
   }, title && React.createElement(Label, {
     "$size": size,
+    "$fontWeight": titleWeight,
     htmlFor: title,
     "$titlecolor": titlecolor
   }, title, required && React.createElement(Asterisk$1, null, "*")), titleRightNode === null || titleRightNode === void 0 ? void 0 : titleRightNode.node), React.createElement(InputWrapper$1, null, React.createElement(Input, {
@@ -5312,8 +5323,11 @@ var Container$3 = styled.div(_templateObject$f || (_templateObject$f = _taggedTe
   var $padding = _ref.$padding;
   return $padding;
 });
-var Label$1 = styled.label(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteralLoose(["\n  cursor: auto;\n  font-weight: 500;\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref2) {
-  var $size = _ref2.$size;
+var Label$1 = styled.label(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteralLoose(["\n  cursor: auto;\n  font-weight: ", ";\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref2) {
+  var $fontWeight = _ref2.$fontWeight;
+  return $fontWeight != null ? $fontWeight : '500';
+}, function (_ref3) {
+  var $size = _ref3.$size;
   switch ($size) {
     case 'small':
       return 'font-size: 12px; line-height: 12px;';
@@ -5324,22 +5338,22 @@ var Label$1 = styled.label(_templateObject2$c || (_templateObject2$c = _taggedTe
     default:
       return 'font-size: 14px; line-height: 14px;';
   }
-}, function (_ref3) {
-  var $titlecolor = _ref3.$titlecolor;
+}, function (_ref4) {
+  var $titlecolor = _ref4.$titlecolor;
   return $titlecolor || colorVariables.text.dark;
 });
-var TextAreaComponent = styled.textarea(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  resize: none;\n  height: 100%;\n  \n  ", "\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables.border.light, function (_ref4) {
-  var $disabled = _ref4.$disabled;
+var TextAreaComponent = styled.textarea(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  resize: none;\n  height: 100%;\n  \n  ", "\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables.border.light, function (_ref5) {
+  var $disabled = _ref5.$disabled;
   return $disabled ? 'not-allowed' : 'auto';
-}, function (_ref5) {
-  var $disabled = _ref5.$disabled,
-    $background = _ref5.$background;
-  return $disabled ? colorVariables.disabled.secondary : $background;
 }, function (_ref6) {
-  var $color = _ref6.$color;
-  return $color;
+  var $disabled = _ref6.$disabled,
+    $background = _ref6.$background;
+  return $disabled ? colorVariables.disabled.secondary : $background;
 }, function (_ref7) {
-  var $size = _ref7.$size;
+  var $color = _ref7.$color;
+  return $color;
+}, function (_ref8) {
+  var $size = _ref8.$size;
   switch ($size) {
     case 'small':
       return 'font-size: 12px; padding: 5px 10px;';
@@ -5350,29 +5364,30 @@ var TextAreaComponent = styled.textarea(_templateObject3$8 || (_templateObject3$
     default:
       return 'font-size: 14px; padding: 7px 12px;';
   }
-}, function (_ref8) {
-  var $color = _ref8.$color;
+}, function (_ref9) {
+  var $color = _ref9.$color;
   return $color || colorVariables.text.dark;
 }, colorVariables.text.light);
-var TextArea = function TextArea(_ref9) {
-  var title = _ref9.title,
-    placeholder = _ref9.placeholder,
-    _ref9$disabled = _ref9.disabled,
-    disabled = _ref9$disabled === void 0 ? false : _ref9$disabled,
-    inputValue = _ref9.inputValue,
-    onChange = _ref9.onChange,
-    _ref9$size = _ref9.size,
-    size = _ref9$size === void 0 ? 'medium' : _ref9$size,
-    _ref9$color = _ref9.color,
-    color = _ref9$color === void 0 ? colorVariables.text.dark : _ref9$color,
-    _ref9$padding = _ref9.padding,
-    padding = _ref9$padding === void 0 ? '0px' : _ref9$padding,
-    _ref9$titlecolor = _ref9.titlecolor,
-    titlecolor = _ref9$titlecolor === void 0 ? colorVariables.text.dark : _ref9$titlecolor,
-    _ref9$required = _ref9.required,
-    required = _ref9$required === void 0 ? false : _ref9$required,
-    _ref9$background = _ref9.background,
-    background = _ref9$background === void 0 ? colorVariables["default"].tertiary : _ref9$background;
+var TextArea = function TextArea(_ref10) {
+  var title = _ref10.title,
+    titleWeight = _ref10.titleWeight,
+    placeholder = _ref10.placeholder,
+    _ref10$disabled = _ref10.disabled,
+    disabled = _ref10$disabled === void 0 ? false : _ref10$disabled,
+    inputValue = _ref10.inputValue,
+    onChange = _ref10.onChange,
+    _ref10$size = _ref10.size,
+    size = _ref10$size === void 0 ? 'medium' : _ref10$size,
+    _ref10$color = _ref10.color,
+    color = _ref10$color === void 0 ? colorVariables.text.dark : _ref10$color,
+    _ref10$padding = _ref10.padding,
+    padding = _ref10$padding === void 0 ? '0px' : _ref10$padding,
+    _ref10$titlecolor = _ref10.titlecolor,
+    titlecolor = _ref10$titlecolor === void 0 ? colorVariables.text.dark : _ref10$titlecolor,
+    _ref10$required = _ref10.required,
+    required = _ref10$required === void 0 ? false : _ref10$required,
+    _ref10$background = _ref10.background,
+    background = _ref10$background === void 0 ? colorVariables["default"].tertiary : _ref10$background;
   var _useState = useState(disabled),
     isDisabled = _useState[0],
     setIsDisabled = _useState[1];
@@ -5383,6 +5398,7 @@ var TextArea = function TextArea(_ref9) {
     "$padding": padding
   }, title && React.createElement(Label$1, {
     "$size": size,
+    "$fontWeight": titleWeight,
     htmlFor: title,
     "$titlecolor": titlecolor
   }, title, required && React.createElement(Asterisk$1, null, "*")), React.createElement(TextAreaComponent, {