labsense-ui-kit 1.1.44 → 1.1.45

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -19,6 +19,7 @@ interface Option {
19
19
  interface MultiSelectDropdownProps {
20
20
  options: Option[];
21
21
  title?: string;
22
+ titleWeight?: string;
22
23
  titleSize?: number;
23
24
  titleColor?: string;
24
25
  labelText?: string;
package/dist/index.js CHANGED
@@ -4549,16 +4549,19 @@ var DropdownButton = styled__default.div(_templateObject2$6 || (_templateObject2
4549
4549
  return '14px';
4550
4550
  }
4551
4551
  });
4552
- var TitleText = styled__default.div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n width: max-content;\n position: relative;\n font-weight: 500;\n font-size: ", ";\n line-height: ", ";\n\n color: ", ";\n"])), function (_ref15) {
4553
- var $titleSize = _ref15.$titleSize,
4554
- $size = _ref15.$size;
4555
- return $titleSize ? $titleSize + "px" : $size === 'small' ? '14px' : $size === 'large' ? '18px' : '16px';
4552
+ var TitleText = styled__default.div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n width: max-content;\n position: relative;\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n\n color: ", ";\n"])), function (_ref15) {
4553
+ var $titleWeight = _ref15.$titleWeight;
4554
+ return $titleWeight != null ? $titleWeight : '500';
4556
4555
  }, function (_ref16) {
4557
4556
  var $titleSize = _ref16.$titleSize,
4558
4557
  $size = _ref16.$size;
4559
4558
  return $titleSize ? $titleSize + "px" : $size === 'small' ? '14px' : $size === 'large' ? '18px' : '16px';
4560
4559
  }, function (_ref17) {
4561
- var $titleColor = _ref17.$titleColor;
4560
+ var $titleSize = _ref17.$titleSize,
4561
+ $size = _ref17.$size;
4562
+ return $titleSize ? $titleSize + "px" : $size === 'small' ? '14px' : $size === 'large' ? '18px' : '16px';
4563
+ }, function (_ref18) {
4564
+ var $titleColor = _ref18.$titleColor;
4562
4565
  switch ($titleColor) {
4563
4566
  case 'dark':
4564
4567
  return colorVariables.text.dark;
@@ -4581,24 +4584,24 @@ var TitleText = styled__default.div(_templateObject3$4 || (_templateObject3$4 =
4581
4584
  }
4582
4585
  });
4583
4586
  var Container$2 = styled__default.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n width: 100%;\n gap: 8px;\n"])));
4584
- var LabelText = styled__default.div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 400;\n font-style:", ";\n color: ", ";\n"])), function (_ref18) {
4585
- var $labelStyle = _ref18.$labelStyle;
4587
+ var LabelText = styled__default.div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 400;\n font-style:", ";\n color: ", ";\n"])), function (_ref19) {
4588
+ var $labelStyle = _ref19.$labelStyle;
4586
4589
  return $labelStyle;
4587
4590
  }, colorVariables.text.medium);
4588
- var DropdownMenu = styled__default.div(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteralLoose(["\n max-height: 156px;\n padding: 4px;\n box-sizing: border-box;\n border: 1px solid ", ";\n border-radius: ", ";\n width: ", ";\n background: ", ";\n display: flex;\n flex-direction: column;\n gap: 4px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n margin-top: 8px;\n overflow-y: auto;\n position: absolute;\n z-index: 2;\n scrollbar-width: thin;\n"])), colorVariables.border.light, function (_ref19) {
4589
- var $optionsBorderRadius = _ref19.$optionsBorderRadius;
4591
+ var DropdownMenu = styled__default.div(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteralLoose(["\n max-height: 156px;\n padding: 4px;\n box-sizing: border-box;\n border: 1px solid ", ";\n border-radius: ", ";\n width: ", ";\n background: ", ";\n display: flex;\n flex-direction: column;\n gap: 4px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n margin-top: 8px;\n overflow-y: auto;\n position: absolute;\n z-index: 2;\n scrollbar-width: thin;\n"])), colorVariables.border.light, function (_ref20) {
4592
+ var $optionsBorderRadius = _ref20.$optionsBorderRadius;
4590
4593
  return $optionsBorderRadius || '8px';
4591
- }, function (_ref20) {
4592
- var $width = _ref20.$width;
4593
- return $width ? $width : 'max-content';
4594
4594
  }, function (_ref21) {
4595
- var $menuBackground = _ref21.$menuBackground;
4595
+ var $width = _ref21.$width;
4596
+ return $width ? $width : 'max-content';
4597
+ }, function (_ref22) {
4598
+ var $menuBackground = _ref22.$menuBackground;
4596
4599
  return $menuBackground || colorVariables.accent.extraLight;
4597
4600
  });
4598
4601
  var SelectedOptionsWrapper = styled__default.div(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n height: 100%;\n"])));
4599
- var SelectedOptionDiv = styled__default.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n background: ", ";\n border-radius: 4px;\n padding: 6px 8px;\n box-sizing: border-box;\n gap: 6px;\n font-family: NotoSans, sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 12px;\n line-height: 12px;\n color: ", ";\n"])), function (_ref22) {
4600
- var $selectedOptionBackground = _ref22.$selectedOptionBackground,
4601
- $disabled = _ref22.$disabled;
4602
+ var SelectedOptionDiv = styled__default.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n background: ", ";\n border-radius: 4px;\n padding: 6px 8px;\n box-sizing: border-box;\n gap: 6px;\n font-family: NotoSans, sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 12px;\n line-height: 12px;\n color: ", ";\n"])), function (_ref23) {
4603
+ var $selectedOptionBackground = _ref23.$selectedOptionBackground,
4604
+ $disabled = _ref23.$disabled;
4602
4605
  switch ($selectedOptionBackground) {
4603
4606
  case 'dark':
4604
4607
  return colorVariables.text.dark;
@@ -4619,8 +4622,8 @@ var SelectedOptionDiv = styled__default.div(_templateObject8$1 || (_templateObje
4619
4622
  default:
4620
4623
  return $selectedOptionBackground || colorVariables.accent.extraLight;
4621
4624
  }
4622
- }, function (_ref23) {
4623
- var $selectedOptionColor = _ref23.$selectedOptionColor;
4625
+ }, function (_ref24) {
4626
+ var $selectedOptionColor = _ref24.$selectedOptionColor;
4624
4627
  switch ($selectedOptionColor) {
4625
4628
  case 'dark':
4626
4629
  return colorVariables.text.dark;
@@ -4642,67 +4645,68 @@ var SelectedOptionDiv = styled__default.div(_templateObject8$1 || (_templateObje
4642
4645
  return $selectedOptionColor;
4643
4646
  }
4644
4647
  });
4645
- var RemoveIcon = styled__default.div(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n width: 14px;\n height: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: ", ";\n border-radius: 50%;\n box-sizing: border-box;\n background: ", ";\n > div {\n cursor: ", ";\n }\n"])), function (_ref24) {
4646
- var $disabled = _ref24.$disabled;
4648
+ var RemoveIcon = styled__default.div(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n width: 14px;\n height: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: ", ";\n border-radius: 50%;\n box-sizing: border-box;\n background: ", ";\n > div {\n cursor: ", ";\n }\n"])), function (_ref25) {
4649
+ var $disabled = _ref25.$disabled;
4647
4650
  return $disabled ? 'not-allowed' : 'pointer';
4648
- }, function (_ref25) {
4649
- var removeIconBackground = _ref25.removeIconBackground,
4650
- $type = _ref25.$type;
4651
- return removeIconBackground ? removeIconBackground : $type === 'remove' ? '#5E5E5E24' : colorVariables.disabled.primary;
4652
4651
  }, function (_ref26) {
4653
- var $disabled = _ref26.$disabled;
4652
+ var removeIconBackground = _ref26.removeIconBackground,
4653
+ $type = _ref26.$type;
4654
+ return removeIconBackground ? removeIconBackground : $type === 'remove' ? '#5E5E5E24' : colorVariables.disabled.primary;
4655
+ }, function (_ref27) {
4656
+ var $disabled = _ref27.$disabled;
4654
4657
  return $disabled ? 'not-allowed' : 'pointer';
4655
4658
  });
4656
4659
  var TextWrapper = styled__default.div(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 4px;\n"])));
4657
4660
  var Asterisk = styled__default.span(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n color: ", ";\n font-size: 10px;\n height: fit-content;\n position: absolute;\n top: -2px;\n right: -8px;\n"])), colorVariables["default"].error);
4658
- var MultiSelectDropdown = function MultiSelectDropdown(_ref27) {
4659
- var title = _ref27.title,
4660
- titleSize = _ref27.titleSize,
4661
- _ref27$titleColor = _ref27.titleColor,
4662
- titleColor = _ref27$titleColor === void 0 ? colorVariables.text.dark : _ref27$titleColor,
4663
- _ref27$labelText = _ref27.labelText,
4664
- labelText = _ref27$labelText === void 0 ? 'Select Cameras' : _ref27$labelText,
4665
- labelStyle = _ref27.labelStyle,
4666
- labelColor = _ref27.labelColor,
4667
- _ref27$replaceLabel = _ref27.replaceLabel,
4668
- replaceLabel = _ref27$replaceLabel === void 0 ? true : _ref27$replaceLabel,
4669
- options = _ref27.options,
4670
- width = _ref27.width,
4671
- optionWidth = _ref27.optionWidth,
4672
- height = _ref27.height,
4673
- placeholder = _ref27.placeholder,
4674
- border = _ref27.border,
4675
- _ref27$background = _ref27.background,
4676
- background = _ref27$background === void 0 ? colorVariables["default"].tertiary : _ref27$background,
4677
- selectedOptionBackground = _ref27.selectedOptionBackground,
4678
- selectedOptionColor = _ref27.selectedOptionColor,
4679
- _ref27$menuBackground = _ref27.menuBackground,
4680
- menuBackground = _ref27$menuBackground === void 0 ? 'white' : _ref27$menuBackground,
4681
- optionsBorderRadius = _ref27.optionsBorderRadius,
4682
- borderRadius = _ref27.borderRadius,
4683
- removeIconBackground = _ref27.removeIconBackground,
4684
- handleSelectChange = _ref27.handleSelectChange,
4685
- selectedOptions = _ref27.selectedOptions,
4686
- placeholderColor = _ref27.placeholderColor,
4687
- optionBorder = _ref27.optionBorder,
4688
- optionColor = _ref27.optionColor,
4689
- searchIcon = _ref27.searchIcon,
4690
- searchbarTextColor = _ref27.searchbarTextColor,
4691
- searchBoxBackground = _ref27.searchBoxBackground,
4692
- searchBoxBorder = _ref27.searchBoxBorder,
4693
- searchBoxBorderRadius = _ref27.searchBoxBorderRadius,
4694
- size = _ref27.size,
4695
- removeIcon = _ref27.removeIcon,
4696
- type = _ref27.type,
4697
- icon = _ref27.icon,
4698
- _ref27$disabled = _ref27.disabled,
4699
- disabled = _ref27$disabled === void 0 ? false : _ref27$disabled,
4700
- _ref27$required = _ref27.required,
4701
- required = _ref27$required === void 0 ? false : _ref27$required,
4702
- _ref27$searchBox = _ref27.searchBox,
4703
- searchBox = _ref27$searchBox === void 0 ? true : _ref27$searchBox,
4704
- _ref27$NoOptionsText = _ref27.NoOptionsText,
4705
- NoOptionsText = _ref27$NoOptionsText === void 0 ? 'No Options Available' : _ref27$NoOptionsText;
4661
+ var MultiSelectDropdown = function MultiSelectDropdown(_ref28) {
4662
+ var title = _ref28.title,
4663
+ titleWeight = _ref28.titleWeight,
4664
+ titleSize = _ref28.titleSize,
4665
+ _ref28$titleColor = _ref28.titleColor,
4666
+ titleColor = _ref28$titleColor === void 0 ? colorVariables.text.dark : _ref28$titleColor,
4667
+ _ref28$labelText = _ref28.labelText,
4668
+ labelText = _ref28$labelText === void 0 ? 'Select Cameras' : _ref28$labelText,
4669
+ labelStyle = _ref28.labelStyle,
4670
+ labelColor = _ref28.labelColor,
4671
+ _ref28$replaceLabel = _ref28.replaceLabel,
4672
+ replaceLabel = _ref28$replaceLabel === void 0 ? true : _ref28$replaceLabel,
4673
+ options = _ref28.options,
4674
+ width = _ref28.width,
4675
+ optionWidth = _ref28.optionWidth,
4676
+ height = _ref28.height,
4677
+ placeholder = _ref28.placeholder,
4678
+ border = _ref28.border,
4679
+ _ref28$background = _ref28.background,
4680
+ background = _ref28$background === void 0 ? colorVariables["default"].tertiary : _ref28$background,
4681
+ selectedOptionBackground = _ref28.selectedOptionBackground,
4682
+ selectedOptionColor = _ref28.selectedOptionColor,
4683
+ _ref28$menuBackground = _ref28.menuBackground,
4684
+ menuBackground = _ref28$menuBackground === void 0 ? 'white' : _ref28$menuBackground,
4685
+ optionsBorderRadius = _ref28.optionsBorderRadius,
4686
+ borderRadius = _ref28.borderRadius,
4687
+ removeIconBackground = _ref28.removeIconBackground,
4688
+ handleSelectChange = _ref28.handleSelectChange,
4689
+ selectedOptions = _ref28.selectedOptions,
4690
+ placeholderColor = _ref28.placeholderColor,
4691
+ optionBorder = _ref28.optionBorder,
4692
+ optionColor = _ref28.optionColor,
4693
+ searchIcon = _ref28.searchIcon,
4694
+ searchbarTextColor = _ref28.searchbarTextColor,
4695
+ searchBoxBackground = _ref28.searchBoxBackground,
4696
+ searchBoxBorder = _ref28.searchBoxBorder,
4697
+ searchBoxBorderRadius = _ref28.searchBoxBorderRadius,
4698
+ size = _ref28.size,
4699
+ removeIcon = _ref28.removeIcon,
4700
+ type = _ref28.type,
4701
+ icon = _ref28.icon,
4702
+ _ref28$disabled = _ref28.disabled,
4703
+ disabled = _ref28$disabled === void 0 ? false : _ref28$disabled,
4704
+ _ref28$required = _ref28.required,
4705
+ required = _ref28$required === void 0 ? false : _ref28$required,
4706
+ _ref28$searchBox = _ref28.searchBox,
4707
+ searchBox = _ref28$searchBox === void 0 ? true : _ref28$searchBox,
4708
+ _ref28$NoOptionsText = _ref28.NoOptionsText,
4709
+ NoOptionsText = _ref28$NoOptionsText === void 0 ? 'No Options Available' : _ref28$NoOptionsText;
4706
4710
  var _useState = React.useState(false),
4707
4711
  isOpen = _useState[0],
4708
4712
  setIsOpen = _useState[1];
@@ -4738,7 +4742,8 @@ var MultiSelectDropdown = function MultiSelectDropdown(_ref27) {
4738
4742
  return React__default.createElement(Container$2, null, title && React__default.createElement(TitleText, {
4739
4743
  "$titleColor": titleColor,
4740
4744
  "$titleSize": titleSize,
4741
- "$size": size
4745
+ "$size": size,
4746
+ "$titleWeight": titleWeight
4742
4747
  }, title, required && React__default.createElement(Asterisk, null, "*")), React__default.createElement(DropdownContainer, {
4743
4748
  ref: dropdownRef,
4744
4749
  "$width": width,