labsense-ui-kit 1.4.44 → 1.4.46

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.
Files changed (6) hide show
  1. package/dist/Inputs/TextField.d.ts +3 -0
  2. package/dist/index.js +239 -146
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.modern.js +239 -146
  5. package/dist/index.modern.js.map +1 -1
  6. package/package.json +1 -1
package/dist/index.modern.js CHANGED
@@ -8712,7 +8712,7 @@ var timeStringToSeconds = function timeStringToSeconds(timeString) {
8712
8712
  return hours * 3600 + minutes * 60 + seconds;
8713
8713
  };
8714
8714
 
8715
- var _templateObject$9, _templateObject2$6, _templateObject3$3, _templateObject4$2, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
8715
+ var _templateObject$9, _templateObject2$6, _templateObject3$3, _templateObject4$2, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24;
8716
8716
  var DatePickerContainer = styled.div(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: column;\n position: relative;\n"])));
8717
8717
  var CalendarContainer = styled.div(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n overflow: auto;\n display: flex;\n flex-direction: row;\n background: ", ";\n position: absolute;\n border: ", ";\n height: auto;\n width: auto;\n border-radius: 10px;\n z-index: 10;\n padding: 10px;\n top: 0px;\n right: 0px;\n gap: 16px;\n transition: border 0.3s ease;\n"])), function (_ref) {
8718
8718
  var theme = _ref.theme;
@@ -8742,105 +8742,113 @@ var Selectedtime = styled.div(_templateObject9 || (_templateObject9 = _taggedTem
8742
8742
  return theme.vms.text.medium;
8743
8743
  });
8744
8744
  var Line$1 = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n width: 100%;\n padding-top: 10px;\n padding-bottom: 10px;\n"])));
8745
- var Zones = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n"])));
8746
- var CalendarHeader = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px;\n"])));
8747
- var CalendarMonthYear = styled.span(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n color: ", ";\n justify-content: center;\n align-items: center;\n"])), function (_ref7) {
8745
+ var Zones = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n & + & {\n margin-top: 8px;\n }\n"])));
8746
+ var ZoneLabel = styled.span(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n font-weight: 400;\n font-size: 12px;\n color: ", ";\n"])), function (_ref7) {
8748
8747
  var theme = _ref7.theme;
8749
8748
  return theme.vms.text.medium;
8750
8749
  });
8751
- var CalendarContent = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n gap: 5px;\n padding: 10px;\n"])));
8752
- var Button = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n background: ", ";\n color: ", ";\n border: none;\n border-radius: 5px;\n padding: 5px 10px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n height: ", ";\n\n svg {\n cursor: pointer;\n }\n"])), function (_ref8) {
8750
+ var ZoneValue = styled.span(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n font-weight: 600;\n font-size: 13px;\n color: ", ";\n"])), function (_ref8) {
8753
8751
  var theme = _ref8.theme;
8754
- return theme.vms["default"].secondary;
8755
- }, function (_ref9) {
8752
+ return theme.vms.text.dark;
8753
+ });
8754
+ var CalendarHeader = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px;\n"])));
8755
+ var CalendarMonthYear = styled.span(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n color: ", ";\n justify-content: center;\n align-items: center;\n"])), function (_ref9) {
8756
8756
  var theme = _ref9.theme;
8757
- return theme.vms.text.white;
8758
- }, function (_ref10) {
8759
- var $size = _ref10.$size;
8760
- return $size ? $size + "px" : '30px';
8761
- }, function (_ref11) {
8762
- var $size = _ref11.$size;
8763
- return $size ? $size + "px" : '30px';
8757
+ return theme.vms.text.medium;
8764
8758
  });
8765
- var CalendarDates = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n width: ", ";\n height: ", ";\n display: flex;\n align-items: center;\n justify-content: flex-start;\n flex-direction: column;\n position: relative;\n cursor: ", ";\n font-size: 12px;\n opacity: ", ";\n\n &::after {\n content: '';\n display: ", ";\n position: absolute;\n bottom: 0;\n left: 50%;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n transform: translateX(-50%);\n background: ", ";\n }\n"])), function (_ref12) {
8759
+ var CalendarContent = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n gap: 5px;\n padding: 10px;\n"])));
8760
+ var Button = styled.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n background: ", ";\n color: ", ";\n border: none;\n border-radius: 5px;\n padding: 5px 10px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n height: ", ";\n\n svg {\n cursor: pointer;\n }\n"])), function (_ref10) {
8761
+ var theme = _ref10.theme;
8762
+ return theme.vms["default"].secondary;
8763
+ }, function (_ref11) {
8764
+ var theme = _ref11.theme;
8765
+ return theme.vms.text.white;
8766
+ }, function (_ref12) {
8766
8767
  var $size = _ref12.$size;
8767
8768
  return $size ? $size + "px" : '30px';
8768
8769
  }, function (_ref13) {
8769
8770
  var $size = _ref13.$size;
8771
+ return $size ? $size + "px" : '30px';
8772
+ });
8773
+ var CalendarDates = styled.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n width: ", ";\n height: ", ";\n display: flex;\n align-items: center;\n justify-content: flex-start;\n flex-direction: column;\n position: relative;\n cursor: ", ";\n font-size: 12px;\n opacity: ", ";\n\n &::after {\n content: '';\n display: ", ";\n position: absolute;\n bottom: 0;\n left: 50%;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n transform: translateX(-50%);\n background: ", ";\n }\n"])), function (_ref14) {
8774
+ var $size = _ref14.$size;
8775
+ return $size ? $size + "px" : '30px';
8776
+ }, function (_ref15) {
8777
+ var $size = _ref15.$size;
8770
8778
  return $size ? $size + 8 + "px" : '38px';
8771
- }, function (_ref14) {
8772
- var $isFuture = _ref14.$isFuture,
8773
- $futureDateTime = _ref14.$futureDateTime;
8779
+ }, function (_ref16) {
8780
+ var $isFuture = _ref16.$isFuture,
8781
+ $futureDateTime = _ref16.$futureDateTime;
8774
8782
  return !$futureDateTime && $isFuture ? 'default' : 'pointer';
8775
- }, function (_ref15) {
8776
- var $isFuture = _ref15.$isFuture,
8777
- $futureDateTime = _ref15.$futureDateTime;
8783
+ }, function (_ref17) {
8784
+ var $isFuture = _ref17.$isFuture,
8785
+ $futureDateTime = _ref17.$futureDateTime;
8778
8786
  return !$futureDateTime && $isFuture ? 0.5 : 1;
8779
- }, function (_ref16) {
8780
- var $showDot = _ref16.$showDot;
8787
+ }, function (_ref18) {
8788
+ var $showDot = _ref18.$showDot;
8781
8789
  return $showDot ? 'block' : 'none';
8782
- }, function (_ref17) {
8783
- var $dotColor = _ref17.$dotColor,
8784
- theme = _ref17.theme;
8790
+ }, function (_ref19) {
8791
+ var $dotColor = _ref19.$dotColor,
8792
+ theme = _ref19.theme;
8785
8793
  return $dotColor || theme.vms["default"].primary;
8786
8794
  });
8787
- var CalendarDateLabel = styled.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n width: ", ";\n height: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n background-color: ", ";\n color: ", ";\n border: ", ";\n\n ", ":hover & {\n background-color: ", ";\n }\n"])), function (_ref18) {
8788
- var $size = _ref18.$size;
8789
- return $size ? $size + "px" : '30px';
8790
- }, function (_ref19) {
8791
- var $size = _ref19.$size;
8795
+ var CalendarDateLabel = styled.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n width: ", ";\n height: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n background-color: ", ";\n color: ", ";\n border: ", ";\n\n ", ":hover & {\n background-color: ", ";\n }\n"])), function (_ref20) {
8796
+ var $size = _ref20.$size;
8792
8797
  return $size ? $size + "px" : '30px';
8793
- }, function (_ref20) {
8794
- var $selected = _ref20.$selected,
8795
- $inRange = _ref20.$inRange,
8796
- $plain = _ref20.$plain,
8797
- theme = _ref20.theme;
8798
- return $plain ? 'transparent' : $selected ? theme.vms["default"].primary : $inRange ? theme.vms["default"].primary : theme.vms["default"].tertiary;
8799
8798
  }, function (_ref21) {
8800
- var $selected = _ref21.$selected,
8801
- $inRange = _ref21.$inRange,
8802
- $plain = _ref21.$plain,
8803
- theme = _ref21.theme;
8804
- return $plain ? theme.vms.text.medium : $selected ? theme.vms.text.white : $inRange ? theme.vms.text.white : theme.vms.text.medium;
8799
+ var $size = _ref21.$size;
8800
+ return $size ? $size + "px" : '30px';
8805
8801
  }, function (_ref22) {
8806
- var $highlightBorder = _ref22.$highlightBorder;
8807
- return $highlightBorder ? "2px solid " + $highlightBorder : '2px solid transparent';
8808
- }, CalendarDates, function (_ref23) {
8802
+ var $selected = _ref22.$selected,
8803
+ $inRange = _ref22.$inRange,
8804
+ $plain = _ref22.$plain,
8805
+ theme = _ref22.theme;
8806
+ return $plain ? 'transparent' : $selected ? theme.vms["default"].primary : $inRange ? theme.vms["default"].primary : theme.vms["default"].tertiary;
8807
+ }, function (_ref23) {
8809
8808
  var $selected = _ref23.$selected,
8810
8809
  $inRange = _ref23.$inRange,
8811
8810
  $plain = _ref23.$plain,
8812
- $isFuture = _ref23.$isFuture,
8813
- $futureDateTime = _ref23.$futureDateTime,
8814
8811
  theme = _ref23.theme;
8812
+ return $plain ? theme.vms.text.medium : $selected ? theme.vms.text.white : $inRange ? theme.vms.text.white : theme.vms.text.medium;
8813
+ }, function (_ref24) {
8814
+ var $highlightBorder = _ref24.$highlightBorder;
8815
+ return $highlightBorder ? "2px solid " + $highlightBorder : '2px solid transparent';
8816
+ }, CalendarDates, function (_ref25) {
8817
+ var $selected = _ref25.$selected,
8818
+ $inRange = _ref25.$inRange,
8819
+ $plain = _ref25.$plain,
8820
+ $isFuture = _ref25.$isFuture,
8821
+ $futureDateTime = _ref25.$futureDateTime,
8822
+ theme = _ref25.theme;
8815
8823
  return $plain ? 'transparent' : !$futureDateTime && $isFuture ? 'transparent' : $selected ? theme.vms.disabled.primary : $inRange ? theme.vms.disabled.primary : theme.vms.disabled.primary;
8816
8824
  });
8817
- var Year = styled.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n font-weight: 500;\n font-size: 12px;\n"])));
8818
- var Month = styled.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n font-weight: 600;\n font-size: 14px;\n"])));
8819
- var InputWrapper = styled.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n display: flex;\n gap: 24px;\n"])));
8820
- var TimeInputWrapper = styled.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n align-items: center;\n"])));
8821
- var StyledInput = styled.input(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n outline: none;\n width: 60px;\n height: 30px;\n text-align: center;\n font-size: 16px;\n border-radius: 5px;\n background: ", ";\n border: ", ";\n color: ", ";\n"])), function (_ref24) {
8822
- var theme = _ref24.theme;
8825
+ var Year = styled.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n font-weight: 500;\n font-size: 12px;\n"])));
8826
+ var Month = styled.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n font-weight: 600;\n font-size: 14px;\n"])));
8827
+ var InputWrapper = styled.div(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n display: flex;\n gap: 24px;\n"])));
8828
+ var TimeInputWrapper = styled.div(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n align-items: center;\n"])));
8829
+ var StyledInput = styled.input(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n outline: none;\n width: 60px;\n height: 30px;\n text-align: center;\n font-size: 16px;\n border-radius: 5px;\n background: ", ";\n border: ", ";\n color: ", ";\n"])), function (_ref26) {
8830
+ var theme = _ref26.theme;
8823
8831
  return theme.vms.text.white;
8824
- }, function (_ref25) {
8825
- var theme = _ref25.theme;
8832
+ }, function (_ref27) {
8833
+ var theme = _ref27.theme;
8826
8834
  return "1px solid " + theme.vms.border.extraBold;
8827
- }, function (_ref26) {
8828
- var theme = _ref26.theme;
8835
+ }, function (_ref28) {
8836
+ var theme = _ref28.theme;
8829
8837
  return theme.vms.text.dark;
8830
8838
  });
8831
- var DatePicker = function DatePicker(_ref27) {
8839
+ var DatePicker = function DatePicker(_ref29) {
8832
8840
  var _renderState$startDat3, _renderState$startDat4;
8833
- var _ref27$dateSize = _ref27.dateSize,
8834
- dateSize = _ref27$dateSize === void 0 ? 30 : _ref27$dateSize,
8835
- dateTime = _ref27.dateTime,
8836
- setDateTime = _ref27.setDateTime,
8837
- _ref27$futureDateTime = _ref27.futureDateTime,
8838
- futureDateTime = _ref27$futureDateTime === void 0 ? true : _ref27$futureDateTime,
8839
- _ref27$clockType = _ref27.clockType,
8840
- clockType = _ref27$clockType === void 0 ? '24hr' : _ref27$clockType,
8841
- _ref27$markedDateRang = _ref27.markedDateRanges,
8842
- markedDateRanges = _ref27$markedDateRang === void 0 ? [] : _ref27$markedDateRang,
8843
- calendarBorder = _ref27.calendarBorder;
8841
+ var _ref29$dateSize = _ref29.dateSize,
8842
+ dateSize = _ref29$dateSize === void 0 ? 30 : _ref29$dateSize,
8843
+ dateTime = _ref29.dateTime,
8844
+ setDateTime = _ref29.setDateTime,
8845
+ _ref29$futureDateTime = _ref29.futureDateTime,
8846
+ futureDateTime = _ref29$futureDateTime === void 0 ? true : _ref29$futureDateTime,
8847
+ _ref29$clockType = _ref29.clockType,
8848
+ clockType = _ref29$clockType === void 0 ? '24hr' : _ref29$clockType,
8849
+ _ref29$markedDateRang = _ref29.markedDateRanges,
8850
+ markedDateRanges = _ref29$markedDateRang === void 0 ? [] : _ref29$markedDateRang,
8851
+ calendarBorder = _ref29.calendarBorder;
8844
8852
  var themeColors = useTheme();
8845
8853
  var _useTranslation = useTranslation(),
8846
8854
  t = _useTranslation.t;
@@ -9081,6 +9089,9 @@ var DatePicker = function DatePicker(_ref27) {
9081
9089
  var formatTime = function formatTime(value) {
9082
9090
  return value.toString().padStart(2, '0');
9083
9091
  };
9092
+ var formatClockType = function formatClockType(value) {
9093
+ return value === '12hr' ? '12-hour' : '24-hour';
9094
+ };
9084
9095
  return React.createElement(DatePickerContainer, null, React.createElement(CalendarContainer, {
9085
9096
  "$border": calendarBorder,
9086
9097
  onClick: function onClick(e) {
@@ -9142,7 +9153,7 @@ var DatePicker = function DatePicker(_ref27) {
9142
9153
  onChange: function onChange(e) {
9143
9154
  return handleMinuteChange(e, false);
9144
9155
  }
9145
- }))))), React.createElement(Line$1, null, React.createElement("hr", null)), React.createElement(Zones, null, React.createElement(CurrentTime, null, t('TimePicker_Zone')), React.createElement(CurrentTime, null, getSystemTimezoneAbbreviation())), React.createElement(Zones, null, React.createElement(CurrentTime, null, t('TimePicker_ClockType')), React.createElement(CurrentTime, null, clockType)))));
9156
+ }))))), React.createElement(Line$1, null, React.createElement("hr", null)), React.createElement(Zones, null, React.createElement(ZoneLabel, null, t('TimePicker_Zone')), React.createElement(ZoneValue, null, getSystemTimezoneAbbreviation())), React.createElement(Zones, null, React.createElement(ZoneLabel, null, t('TimePicker_ClockType')), React.createElement(ZoneValue, null, formatClockType(clockType))))));
9146
9157
  };
9147
9158
 
9148
9159
  var _templateObject$a, _templateObject2$7, _templateObject3$4, _templateObject4$3, _templateObject5$3, _templateObject6$3;
@@ -10841,7 +10852,7 @@ var SearchBox = function SearchBox(_ref9) {
10841
10852
  }));
10842
10853
  };
10843
10854
 
10844
- var _templateObject$f, _templateObject2$c, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$6, _templateObject7$4, _templateObject8$4, _templateObject9$3, _templateObject10$3, _templateObject11$2, _templateObject12$2, _templateObject13$2, _templateObject14$2;
10855
+ var _templateObject$f, _templateObject2$c, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$6, _templateObject7$4, _templateObject8$4, _templateObject9$3, _templateObject10$3, _templateObject11$2, _templateObject12$2, _templateObject13$2, _templateObject14$2, _templateObject15$2, _templateObject16$1;
10845
10856
  var Label = styled.label(_templateObject$f || (_templateObject$f = _taggedTemplateLiteralLoose(["\n cursor: auto;\n width: 100%;\n font-weight: ", ";\n position: relative;\n white-space: nowrap;\n width: max-content;\n\n ", "\n\n color: ", ";\n"])), function (_ref) {
10846
10857
  var $fontWeight = _ref.$fontWeight;
10847
10858
  return $fontWeight != null ? $fontWeight : '500';
@@ -10881,7 +10892,7 @@ var Label = styled.label(_templateObject$f || (_templateObject$f = _taggedTempla
10881
10892
  return $titlecolor;
10882
10893
  }
10883
10894
  });
10884
- var Input = styled.input(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteralLoose(["\n width: 100%;\n border: ", ";\n border-radius: 8px;\n cursor: ", ";\n background: ", ";\n transition: all 0.3s ease;\n color: ", ";\n\n ", "\n\n &:focus {\n border: ", ";\n }\n\n &::placeholder {\n color: ", ";\n font-style: italic;\n }\n"])), function (_ref4) {
10895
+ var Input = styled.input(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteralLoose(["\n width: 100%;\n border: ", ";\n border-radius: 8px;\n cursor: ", ";\n background: ", ";\n transition: all 0.3s ease;\n color: ", ";\n\n ", "\n\n /* Hide native number spin buttons \u2014 replaced with a custom stepper */\n &[type='number'] {\n -moz-appearance: textfield;\n }\n &[type='number']::-webkit-outer-spin-button,\n &[type='number']::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &:focus {\n border: ", ";\n }\n\n &::placeholder {\n color: ", ";\n font-style: italic;\n }\n"])), function (_ref4) {
10885
10896
  var theme = _ref4.theme;
10886
10897
  return "1px solid " + theme.vms.border.light;
10887
10898
  }, function (_ref5) {
@@ -10898,15 +10909,16 @@ var Input = styled.input(_templateObject2$c || (_templateObject2$c = _taggedTemp
10898
10909
  }, function (_ref8) {
10899
10910
  var $size = _ref8.$size,
10900
10911
  $type = _ref8.$type;
10912
+ var rightPadding = $type === 'password' ? '38px' : $type === 'number' ? '28px' : undefined;
10901
10913
  switch ($size) {
10902
10914
  case 'small':
10903
- return "\n font-size: 12px;\n padding: " + ($type === 'password' ? '5px 38px 5px 10px' : '5px 10px') + ";\n ";
10915
+ return "\n font-size: 12px;\n padding: 5px " + (rightPadding != null ? rightPadding : '10px') + " 5px 10px;\n ";
10904
10916
  case 'medium':
10905
- return "\n font-size: 14px;\n padding: " + ($type === 'password' ? '9.5px 38px 9.5px 12px' : '9.5px 12px') + ";\n ";
10917
+ return "\n font-size: 14px;\n padding: 9.5px " + (rightPadding != null ? rightPadding : '12px') + " 9.5px 12px;\n ";
10906
10918
  case 'large':
10907
- return "\n font-size: 16px;\n padding: " + ($type === 'password' ? '9px 38px 9px 14px' : '9px 14px') + ";\n ";
10919
+ return "\n font-size: 16px;\n padding: 9px " + (rightPadding != null ? rightPadding : '14px') + " 9px 14px;\n ";
10908
10920
  default:
10909
- return "\n font-size: 14px;\n padding: " + ($type === 'password' ? '7px 38px 7px 12px' : '7px 12px') + ";\n ";
10921
+ return "\n font-size: 14px;\n padding: 7px " + (rightPadding != null ? rightPadding : '12px') + " 7px 12px;\n ";
10910
10922
  }
10911
10923
  }, function (_ref9) {
10912
10924
  var $color = _ref9.$color,
@@ -10952,13 +10964,38 @@ var IconWrapper$1 = styled.div(_templateObject4$6 || (_templateObject4$6 = _tagg
10952
10964
  var $disabled = _ref11.$disabled;
10953
10965
  return $disabled ? 'not-allowed' : 'pointer';
10954
10966
  });
10955
- var Asterisk$1 = styled.span(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteralLoose(["\n color: ", ";\n font-size: 10px;\n height: fit-content;\n position: absolute;\n top: -2px;\n right: -8px;\n"])), function (_ref12) {
10967
+ var NumberStepper = styled.div(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteralLoose(["\n position: absolute;\n right: 1px;\n top: 1px;\n bottom: 1px;\n display: flex;\n flex-direction: column;\n width: 20px;\n border-left: 1px solid ", ";\n border-radius: 0 7px 7px 0;\n overflow: hidden;\n opacity: ", ";\n"])), function (_ref12) {
10956
10968
  var theme = _ref12.theme;
10969
+ return theme.vms.border.light;
10970
+ }, function (_ref13) {
10971
+ var $disabled = _ref13.$disabled;
10972
+ return $disabled ? 0.5 : 1;
10973
+ });
10974
+ var NumberStepperButton = styled.button(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose(["\n all: unset;\n box-sizing: border-box;\n flex: 1 1 0;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: ", ";\n background: ", ";\n transition: background 0.15s ease;\n\n &:not(:first-child) {\n border-top: 1px solid ", ";\n }\n\n &:hover {\n background: ", ";\n }\n\n &:active {\n background: ", ";\n }\n"])), function (_ref14) {
10975
+ var $disabled = _ref14.$disabled;
10976
+ return $disabled ? 'not-allowed' : 'pointer';
10977
+ }, function (_ref15) {
10978
+ var theme = _ref15.theme;
10979
+ return theme.vms.accent.light_2;
10980
+ }, function (_ref16) {
10981
+ var theme = _ref16.theme;
10982
+ return theme.vms.border.light;
10983
+ }, function (_ref17) {
10984
+ var $disabled = _ref17.$disabled,
10985
+ theme = _ref17.theme;
10986
+ return $disabled ? theme.vms.accent.light_2 : theme.vms.accent.light_3;
10987
+ }, function (_ref18) {
10988
+ var $disabled = _ref18.$disabled,
10989
+ theme = _ref18.theme;
10990
+ return $disabled ? theme.vms.accent.light_2 : theme.vms.border.light;
10991
+ });
10992
+ var Asterisk$1 = styled.span(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteralLoose(["\n color: ", ";\n font-size: 10px;\n height: fit-content;\n position: absolute;\n top: -2px;\n right: -8px;\n"])), function (_ref19) {
10993
+ var theme = _ref19.theme;
10957
10994
  return theme.vms["default"].error;
10958
10995
  });
10959
- var SkeletonWrapper = styled.div(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 8px;\n"])));
10960
- var SkeletonLabel = styled.div(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteralLoose(["\n height: ", ";\n width: 80px;\n background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);\n background-size: 200% 100%;\n animation: loading 1.5s ease-in-out infinite;\n border-radius: 4px;\n\n @keyframes loading {\n 0% {\n background-position: 200% 0;\n }\n 100% {\n background-position: -200% 0;\n }\n }\n"])), function (_ref13) {
10961
- var $size = _ref13.$size;
10996
+ var SkeletonWrapper = styled.div(_templateObject8$4 || (_templateObject8$4 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 8px;\n"])));
10997
+ var SkeletonLabel = styled.div(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n height: ", ";\n width: 80px;\n background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);\n background-size: 200% 100%;\n animation: loading 1.5s ease-in-out infinite;\n border-radius: 4px;\n\n @keyframes loading {\n 0% {\n background-position: 200% 0;\n }\n 100% {\n background-position: -200% 0;\n }\n }\n"])), function (_ref20) {
10998
+ var $size = _ref20.$size;
10962
10999
  switch ($size) {
10963
11000
  case 'small':
10964
11001
  return '12px';
@@ -10970,8 +11007,8 @@ var SkeletonLabel = styled.div(_templateObject7$4 || (_templateObject7$4 = _tagg
10970
11007
  return '14px';
10971
11008
  }
10972
11009
  });
10973
- var SkeletonInput = styled.div(_templateObject8$4 || (_templateObject8$4 = _taggedTemplateLiteralLoose(["\n width: 100%;\n border-radius: 8px;\n background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);\n background-size: 200% 100%;\n animation: loading 1.5s ease-in-out infinite;\n\n ", "\n\n @keyframes loading {\n 0% {\n background-position: 200% 0;\n }\n 100% {\n background-position: -200% 0;\n }\n }\n"])), function (_ref14) {
10974
- var $size = _ref14.$size;
11010
+ var SkeletonInput = styled.div(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteralLoose(["\n width: 100%;\n border-radius: 8px;\n background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);\n background-size: 200% 100%;\n animation: loading 1.5s ease-in-out infinite;\n\n ", "\n\n @keyframes loading {\n 0% {\n background-position: 200% 0;\n }\n 100% {\n background-position: -200% 0;\n }\n }\n"])), function (_ref21) {
11011
+ var $size = _ref21.$size;
10975
11012
  switch ($size) {
10976
11013
  case 'small':
10977
11014
  return 'height: 32px;';
@@ -10983,84 +11020,88 @@ var SkeletonInput = styled.div(_templateObject8$4 || (_templateObject8$4 = _tagg
10983
11020
  return 'height: 38px;';
10984
11021
  }
10985
11022
  });
10986
- var TimeInputWrapper$1 = styled(InputWrapper$1)(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n cursor: ", ";\n\n input {\n cursor: ", ";\n }\n"])), function (_ref15) {
10987
- var $disabled = _ref15.$disabled;
11023
+ var TimeInputWrapper$1 = styled(InputWrapper$1)(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteralLoose(["\n cursor: ", ";\n\n input {\n cursor: ", ";\n }\n"])), function (_ref22) {
11024
+ var $disabled = _ref22.$disabled;
10988
11025
  return $disabled ? 'not-allowed' : 'pointer';
10989
- }, function (_ref16) {
10990
- var $disabled = _ref16.$disabled;
11026
+ }, function (_ref23) {
11027
+ var $disabled = _ref23.$disabled;
10991
11028
  return $disabled ? 'not-allowed' : 'pointer';
10992
11029
  });
10993
- var TimePickerDropdown = styled.div(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteralLoose(["\n position: fixed;\n display: flex;\n gap: 8px;\n padding: 12px;\n border: 1px solid ", ";\n border-radius: 8px;\n background: ", ";\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n z-index: 999;\n"])), function (_ref17) {
10994
- var theme = _ref17.theme;
11030
+ var TimePickerDropdown = styled.div(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteralLoose(["\n position: fixed;\n display: flex;\n gap: 8px;\n padding: 12px;\n border: 1px solid ", ";\n border-radius: 8px;\n background: ", ";\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n z-index: 999;\n"])), function (_ref24) {
11031
+ var theme = _ref24.theme;
10995
11032
  return theme.vms.border.light;
10996
- }, function (_ref18) {
10997
- var theme = _ref18.theme;
11033
+ }, function (_ref25) {
11034
+ var theme = _ref25.theme;
10998
11035
  return theme.vms.text.white;
10999
11036
  });
11000
- var SliderColumn = styled.div(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n"])));
11001
- var SliderLabel = styled.div(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteralLoose(["\n font-size: 12px;\n font-weight: 500;\n color: ", ";\n margin-bottom: 4px;\n"])), function (_ref19) {
11002
- var theme = _ref19.theme;
11037
+ var SliderColumn = styled.div(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n"])));
11038
+ var SliderLabel = styled.div(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteralLoose(["\n font-size: 12px;\n font-weight: 500;\n color: ", ";\n margin-bottom: 4px;\n"])), function (_ref26) {
11039
+ var theme = _ref26.theme;
11003
11040
  return theme.vms.text.medium;
11004
11041
  });
11005
- var SliderWrapper = styled.div(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteralLoose(["\n height: 150px;\n overflow-y: auto;\n overflow-x: hidden;\n border: 1px solid ", ";\n border-radius: 6px;\n background: ", ";\n width: 60px;\n scroll-behavior: smooth;\n \n /* Custom scrollbar */\n &::-webkit-scrollbar {\n width: 4px;\n }\n \n &::-webkit-scrollbar-track {\n background: ", ";\n }\n \n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: 2px;\n }\n \n &::-webkit-scrollbar-thumb:hover {\n background: ", ";\n }\n"])), function (_ref20) {
11006
- var theme = _ref20.theme;
11042
+ var SliderWrapper = styled.div(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n height: 150px;\n overflow-y: auto;\n overflow-x: hidden;\n border: 1px solid ", ";\n border-radius: 6px;\n background: ", ";\n width: 60px;\n scroll-behavior: smooth;\n \n /* Custom scrollbar */\n &::-webkit-scrollbar {\n width: 4px;\n }\n \n &::-webkit-scrollbar-track {\n background: ", ";\n }\n \n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: 2px;\n }\n \n &::-webkit-scrollbar-thumb:hover {\n background: ", ";\n }\n"])), function (_ref27) {
11043
+ var theme = _ref27.theme;
11007
11044
  return theme.vms.border.light;
11008
- }, function (_ref21) {
11009
- var theme = _ref21.theme;
11045
+ }, function (_ref28) {
11046
+ var theme = _ref28.theme;
11010
11047
  return theme.vms.accent.light_2;
11011
- }, function (_ref22) {
11012
- var theme = _ref22.theme;
11048
+ }, function (_ref29) {
11049
+ var theme = _ref29.theme;
11013
11050
  return theme.vms.accent.light_2;
11014
- }, function (_ref23) {
11015
- var theme = _ref23.theme;
11051
+ }, function (_ref30) {
11052
+ var theme = _ref30.theme;
11016
11053
  return theme.vms.border.medium;
11017
- }, function (_ref24) {
11018
- var theme = _ref24.theme;
11054
+ }, function (_ref31) {
11055
+ var theme = _ref31.theme;
11019
11056
  return theme.vms.text.medium;
11020
11057
  });
11021
- var SliderItem = styled.div(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteralLoose(["\n padding: 8px 12px;\n text-align: center;\n cursor: pointer;\n font-size: 14px;\n color: ", ";\n background: ", ";\n transition: all 0.2s ease;\n \n &:hover {\n background: ", ";\n }\n"])), function (_ref25) {
11022
- var $selected = _ref25.$selected,
11023
- theme = _ref25.theme;
11058
+ var SliderItem = styled.div(_templateObject16$1 || (_templateObject16$1 = _taggedTemplateLiteralLoose(["\n padding: 8px 12px;\n text-align: center;\n cursor: pointer;\n font-size: 14px;\n color: ", ";\n background: ", ";\n transition: all 0.2s ease;\n \n &:hover {\n background: ", ";\n }\n"])), function (_ref32) {
11059
+ var $selected = _ref32.$selected,
11060
+ theme = _ref32.theme;
11024
11061
  return $selected ? theme.vms.text.white : theme.vms.text.dark;
11025
- }, function (_ref26) {
11026
- var $selected = _ref26.$selected,
11027
- theme = _ref26.theme;
11062
+ }, function (_ref33) {
11063
+ var $selected = _ref33.$selected,
11064
+ theme = _ref33.theme;
11028
11065
  return $selected ? theme.vms["default"].primary : 'transparent';
11029
- }, function (_ref27) {
11030
- var $selected = _ref27.$selected,
11031
- theme = _ref27.theme;
11066
+ }, function (_ref34) {
11067
+ var $selected = _ref34.$selected,
11068
+ theme = _ref34.theme;
11032
11069
  return $selected ? theme.vms["default"].primary : theme.vms.accent.light_3;
11033
11070
  });
11034
- var TextField = function TextField(_ref28) {
11035
- var _ref28$type = _ref28.type,
11036
- type = _ref28$type === void 0 ? 'text' : _ref28$type,
11037
- title = _ref28.title,
11038
- name = _ref28.name,
11039
- titleWeight = _ref28.titleWeight,
11040
- placeholder = _ref28.placeholder,
11041
- _ref28$disabled = _ref28.disabled,
11042
- disabled = _ref28$disabled === void 0 ? false : _ref28$disabled,
11043
- inputValue = _ref28.inputValue,
11044
- onChange = _ref28.onChange,
11045
- _ref28$size = _ref28.size,
11046
- size = _ref28$size === void 0 ? 'medium' : _ref28$size,
11047
- color = _ref28.color,
11048
- _ref28$padding = _ref28.padding,
11049
- padding = _ref28$padding === void 0 ? '0px' : _ref28$padding,
11050
- titlecolor = _ref28.titlecolor,
11051
- icon = _ref28.icon,
11052
- _ref28$iconsize = _ref28.iconsize,
11053
- iconsize = _ref28$iconsize === void 0 ? 18 : _ref28$iconsize,
11054
- iconweight = _ref28.iconweight,
11055
- iconcolor = _ref28.iconcolor,
11056
- _ref28$required = _ref28.required,
11057
- required = _ref28$required === void 0 ? false : _ref28$required,
11058
- background = _ref28.background,
11059
- onEnter = _ref28.onEnter,
11060
- titleRightNode = _ref28.titleRightNode,
11061
- autoComplete = _ref28.autoComplete,
11062
- _ref28$loading = _ref28.loading,
11063
- loading = _ref28$loading === void 0 ? false : _ref28$loading;
11071
+ var TextField = function TextField(_ref35) {
11072
+ var _ref35$type = _ref35.type,
11073
+ type = _ref35$type === void 0 ? 'text' : _ref35$type,
11074
+ title = _ref35.title,
11075
+ name = _ref35.name,
11076
+ titleWeight = _ref35.titleWeight,
11077
+ placeholder = _ref35.placeholder,
11078
+ _ref35$disabled = _ref35.disabled,
11079
+ disabled = _ref35$disabled === void 0 ? false : _ref35$disabled,
11080
+ inputValue = _ref35.inputValue,
11081
+ onChange = _ref35.onChange,
11082
+ _ref35$size = _ref35.size,
11083
+ size = _ref35$size === void 0 ? 'medium' : _ref35$size,
11084
+ color = _ref35.color,
11085
+ _ref35$padding = _ref35.padding,
11086
+ padding = _ref35$padding === void 0 ? '0px' : _ref35$padding,
11087
+ titlecolor = _ref35.titlecolor,
11088
+ icon = _ref35.icon,
11089
+ _ref35$iconsize = _ref35.iconsize,
11090
+ iconsize = _ref35$iconsize === void 0 ? 18 : _ref35$iconsize,
11091
+ iconweight = _ref35.iconweight,
11092
+ iconcolor = _ref35.iconcolor,
11093
+ _ref35$required = _ref35.required,
11094
+ required = _ref35$required === void 0 ? false : _ref35$required,
11095
+ background = _ref35.background,
11096
+ onEnter = _ref35.onEnter,
11097
+ titleRightNode = _ref35.titleRightNode,
11098
+ autoComplete = _ref35.autoComplete,
11099
+ _ref35$loading = _ref35.loading,
11100
+ loading = _ref35$loading === void 0 ? false : _ref35$loading,
11101
+ min = _ref35.min,
11102
+ max = _ref35.max,
11103
+ _ref35$step = _ref35.step,
11104
+ step = _ref35$step === void 0 ? 1 : _ref35$step;
11064
11105
  var themeColors = useTheme();
11065
11106
  var _useState = useState(disabled),
11066
11107
  isDisabled = _useState[0],
@@ -11234,6 +11275,25 @@ var TextField = function TextField(_ref28) {
11234
11275
  return !prev;
11235
11276
  });
11236
11277
  };
11278
+ var handleNumberStep = function handleNumberStep(direction) {
11279
+ if (isDisabled || !onChange) return;
11280
+ var current = parseFloat(inputValue) || 0;
11281
+ var next = current + direction * step;
11282
+ if (typeof min === 'number' && next < min) next = min;
11283
+ if (typeof max === 'number' && next > max) next = max;
11284
+ var decimals = (step.toString().split('.')[1] || '').length;
11285
+ var nextValue = decimals > 0 ? next.toFixed(decimals) : next.toString();
11286
+ var syntheticEvent = {
11287
+ target: {
11288
+ value: nextValue,
11289
+ name: name || title
11290
+ }
11291
+ };
11292
+ onChange(syntheticEvent);
11293
+ };
11294
+ var currentNumberValue = parseFloat(inputValue);
11295
+ var isIncrementDisabled = isDisabled || !onChange || typeof max === 'number' && !isNaN(currentNumberValue) && currentNumberValue >= max;
11296
+ var isDecrementDisabled = isDisabled || !onChange || typeof min === 'number' && !isNaN(currentNumberValue) && currentNumberValue <= min;
11237
11297
  if (loading) {
11238
11298
  return React.createElement(Container, {
11239
11299
  "$flexDirection": 'column',
@@ -11353,7 +11413,10 @@ var TextField = function TextField(_ref28) {
11353
11413
  onKeyDown: function onKeyDown(e) {
11354
11414
  if (e.key === 'Enter') onEnter === null || onEnter === void 0 ? void 0 : onEnter();
11355
11415
  },
11356
- autoComplete: autoComplete
11416
+ autoComplete: autoComplete,
11417
+ min: type === 'number' ? min : undefined,
11418
+ max: type === 'number' ? max : undefined,
11419
+ step: type === 'number' ? step : undefined
11357
11420
  }), type === 'password' && inputValue && React.createElement(IconWrapper$1, {
11358
11421
  "$disabled": disabled,
11359
11422
  onClick: function onClick() {
@@ -11366,7 +11429,7 @@ var TextField = function TextField(_ref28) {
11366
11429
  size: iconsize,
11367
11430
  weight: iconweight,
11368
11431
  color: iconcolor || themeColors.vms["default"].primary
11369
- })), icon && type !== 'password' && React.createElement(IconWrapper$1, {
11432
+ })), icon && type !== 'password' && type !== 'number' && React.createElement(IconWrapper$1, {
11370
11433
  onClick: function onClick() {
11371
11434
  return setIsDisabled(function (prev) {
11372
11435
  return !prev;
@@ -11377,7 +11440,37 @@ var TextField = function TextField(_ref28) {
11377
11440
  size: iconsize,
11378
11441
  weight: iconweight,
11379
11442
  color: iconcolor || themeColors.vms["default"].primary
11380
- }))));
11443
+ })), type === 'number' && React.createElement(NumberStepper, {
11444
+ "$disabled": isDisabled
11445
+ }, React.createElement(NumberStepperButton, {
11446
+ type: 'button',
11447
+ tabIndex: -1,
11448
+ "$disabled": isIncrementDisabled,
11449
+ disabled: isIncrementDisabled,
11450
+ onClick: function onClick() {
11451
+ return handleNumberStep(1);
11452
+ },
11453
+ "aria-label": 'Increment'
11454
+ }, React.createElement(Icon, {
11455
+ icon: 'UpArrow',
11456
+ size: 7,
11457
+ weight: '2px',
11458
+ color: isIncrementDisabled ? themeColors.vms.text.light : themeColors.vms.text.medium
11459
+ })), React.createElement(NumberStepperButton, {
11460
+ type: 'button',
11461
+ tabIndex: -1,
11462
+ "$disabled": isDecrementDisabled,
11463
+ disabled: isDecrementDisabled,
11464
+ onClick: function onClick() {
11465
+ return handleNumberStep(-1);
11466
+ },
11467
+ "aria-label": 'Decrement'
11468
+ }, React.createElement(Icon, {
11469
+ icon: 'DownArrow',
11470
+ size: 7,
11471
+ weight: '2px',
11472
+ color: isDecrementDisabled ? themeColors.vms.text.light : themeColors.vms.text.medium
11473
+ })))));
11381
11474
  };
11382
11475
 
11383
11476
  var _templateObject$g, _templateObject2$d, _templateObject3$9;