labsense-ui-kit 1.4.45 → 1.4.46

package/dist/Inputs/TextField.d.ts

@@ -28,6 +28,9 @@ interface InputProps {
     };
     autoComplete?: string;
     loading?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
 }
 declare const TextField: React.FC<InputProps>;
 export default TextField;

package/dist/index.js

@@ -10857,7 +10857,7 @@ var SearchBox = function SearchBox(_ref9) {
   }));
 };
 
-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;
+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;
 var Label = styled__default.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) {
   var $fontWeight = _ref.$fontWeight;
   return $fontWeight != null ? $fontWeight : '500';
@@ -10897,7 +10897,7 @@ var Label = styled__default.label(_templateObject$f || (_templateObject$f = _tag
       return $titlecolor;
   }
 });
-var Input = styled__default.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) {
+var Input = styled__default.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) {
   var theme = _ref4.theme;
   return "1px solid " + theme.vms.border.light;
 }, function (_ref5) {
@@ -10914,15 +10914,16 @@ var Input = styled__default.input(_templateObject2$c || (_templateObject2$c = _t
 }, function (_ref8) {
   var $size = _ref8.$size,
     $type = _ref8.$type;
+  var rightPadding = $type === 'password' ? '38px' : $type === 'number' ? '28px' : undefined;
   switch ($size) {
     case 'small':
-      return "\n          font-size: 12px;\n          padding: " + ($type === 'password' ? '5px 38px 5px 10px' : '5px 10px') + ";\n        ";
+      return "\n          font-size: 12px;\n          padding: 5px " + (rightPadding != null ? rightPadding : '10px') + " 5px 10px;\n        ";
     case 'medium':
-      return "\n          font-size: 14px;\n          padding: " + ($type === 'password' ? '9.5px 38px 9.5px 12px' : '9.5px 12px') + ";\n        ";
+      return "\n          font-size: 14px;\n          padding: 9.5px " + (rightPadding != null ? rightPadding : '12px') + " 9.5px 12px;\n        ";
     case 'large':
-      return "\n          font-size: 16px;\n          padding: " + ($type === 'password' ? '9px 38px 9px 14px' : '9px 14px') + ";\n        ";
+      return "\n          font-size: 16px;\n          padding: 9px " + (rightPadding != null ? rightPadding : '14px') + " 9px 14px;\n        ";
     default:
-      return "\n          font-size: 14px;\n          padding: " + ($type === 'password' ? '7px 38px 7px 12px' : '7px 12px') + ";\n        ";
+      return "\n          font-size: 14px;\n          padding: 7px " + (rightPadding != null ? rightPadding : '12px') + " 7px 12px;\n        ";
   }
 }, function (_ref9) {
   var $color = _ref9.$color,
@@ -10968,13 +10969,38 @@ var IconWrapper$1 = styled__default.div(_templateObject4$6 || (_templateObject4$
   var $disabled = _ref11.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 });
-var Asterisk$1 = styled__default.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) {
+var NumberStepper = styled__default.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) {
   var theme = _ref12.theme;
+  return theme.vms.border.light;
+}, function (_ref13) {
+  var $disabled = _ref13.$disabled;
+  return $disabled ? 0.5 : 1;
+});
+var NumberStepperButton = styled__default.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) {
+  var $disabled = _ref14.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+}, function (_ref15) {
+  var theme = _ref15.theme;
+  return theme.vms.accent.light_2;
+}, function (_ref16) {
+  var theme = _ref16.theme;
+  return theme.vms.border.light;
+}, function (_ref17) {
+  var $disabled = _ref17.$disabled,
+    theme = _ref17.theme;
+  return $disabled ? theme.vms.accent.light_2 : theme.vms.accent.light_3;
+}, function (_ref18) {
+  var $disabled = _ref18.$disabled,
+    theme = _ref18.theme;
+  return $disabled ? theme.vms.accent.light_2 : theme.vms.border.light;
+});
+var Asterisk$1 = styled__default.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) {
+  var theme = _ref19.theme;
   return theme.vms["default"].error;
 });
-var SkeletonWrapper = styled__default.div(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n"])));
-var SkeletonLabel = styled__default.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) {
-  var $size = _ref13.$size;
+var SkeletonWrapper = styled__default.div(_templateObject8$4 || (_templateObject8$4 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n"])));
+var SkeletonLabel = styled__default.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) {
+  var $size = _ref20.$size;
   switch ($size) {
     case 'small':
       return '12px';
@@ -10986,8 +11012,8 @@ var SkeletonLabel = styled__default.div(_templateObject7$4 || (_templateObject7$
       return '14px';
   }
 });
-var SkeletonInput = styled__default.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) {
-  var $size = _ref14.$size;
+var SkeletonInput = styled__default.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) {
+  var $size = _ref21.$size;
   switch ($size) {
     case 'small':
       return 'height: 32px;';
@@ -10999,84 +11025,88 @@ var SkeletonInput = styled__default.div(_templateObject8$4 || (_templateObject8$
       return 'height: 38px;';
   }
 });
-var TimeInputWrapper$1 = styled__default(InputWrapper$1)(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n  cursor: ", ";\n\n  input {\n    cursor: ", ";\n  }\n"])), function (_ref15) {
-  var $disabled = _ref15.$disabled;
+var TimeInputWrapper$1 = styled__default(InputWrapper$1)(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteralLoose(["\n  cursor: ", ";\n\n  input {\n    cursor: ", ";\n  }\n"])), function (_ref22) {
+  var $disabled = _ref22.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
-}, function (_ref16) {
-  var $disabled = _ref16.$disabled;
+}, function (_ref23) {
+  var $disabled = _ref23.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 });
-var TimePickerDropdown = styled__default.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) {
-  var theme = _ref17.theme;
+var TimePickerDropdown = styled__default.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) {
+  var theme = _ref24.theme;
   return theme.vms.border.light;
-}, function (_ref18) {
-  var theme = _ref18.theme;
+}, function (_ref25) {
+  var theme = _ref25.theme;
   return theme.vms.text.white;
 });
-var SliderColumn = styled__default.div(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n"])));
-var SliderLabel = styled__default.div(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteralLoose(["\n  font-size: 12px;\n  font-weight: 500;\n  color: ", ";\n  margin-bottom: 4px;\n"])), function (_ref19) {
-  var theme = _ref19.theme;
+var SliderColumn = styled__default.div(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n"])));
+var SliderLabel = styled__default.div(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteralLoose(["\n  font-size: 12px;\n  font-weight: 500;\n  color: ", ";\n  margin-bottom: 4px;\n"])), function (_ref26) {
+  var theme = _ref26.theme;
   return theme.vms.text.medium;
 });
-var SliderWrapper = styled__default.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) {
-  var theme = _ref20.theme;
+var SliderWrapper = styled__default.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) {
+  var theme = _ref27.theme;
   return theme.vms.border.light;
-}, function (_ref21) {
-  var theme = _ref21.theme;
+}, function (_ref28) {
+  var theme = _ref28.theme;
   return theme.vms.accent.light_2;
-}, function (_ref22) {
-  var theme = _ref22.theme;
+}, function (_ref29) {
+  var theme = _ref29.theme;
   return theme.vms.accent.light_2;
-}, function (_ref23) {
-  var theme = _ref23.theme;
+}, function (_ref30) {
+  var theme = _ref30.theme;
   return theme.vms.border.medium;
-}, function (_ref24) {
-  var theme = _ref24.theme;
+}, function (_ref31) {
+  var theme = _ref31.theme;
   return theme.vms.text.medium;
 });
-var SliderItem = styled__default.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) {
-  var $selected = _ref25.$selected,
-    theme = _ref25.theme;
+var SliderItem = styled__default.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) {
+  var $selected = _ref32.$selected,
+    theme = _ref32.theme;
   return $selected ? theme.vms.text.white : theme.vms.text.dark;
-}, function (_ref26) {
-  var $selected = _ref26.$selected,
-    theme = _ref26.theme;
+}, function (_ref33) {
+  var $selected = _ref33.$selected,
+    theme = _ref33.theme;
   return $selected ? theme.vms["default"].primary : 'transparent';
-}, function (_ref27) {
-  var $selected = _ref27.$selected,
-    theme = _ref27.theme;
+}, function (_ref34) {
+  var $selected = _ref34.$selected,
+    theme = _ref34.theme;
   return $selected ? theme.vms["default"].primary : theme.vms.accent.light_3;
 });
-var TextField = function TextField(_ref28) {
-  var _ref28$type = _ref28.type,
-    type = _ref28$type === void 0 ? 'text' : _ref28$type,
-    title = _ref28.title,
-    name = _ref28.name,
-    titleWeight = _ref28.titleWeight,
-    placeholder = _ref28.placeholder,
-    _ref28$disabled = _ref28.disabled,
-    disabled = _ref28$disabled === void 0 ? false : _ref28$disabled,
-    inputValue = _ref28.inputValue,
-    onChange = _ref28.onChange,
-    _ref28$size = _ref28.size,
-    size = _ref28$size === void 0 ? 'medium' : _ref28$size,
-    color = _ref28.color,
-    _ref28$padding = _ref28.padding,
-    padding = _ref28$padding === void 0 ? '0px' : _ref28$padding,
-    titlecolor = _ref28.titlecolor,
-    icon = _ref28.icon,
-    _ref28$iconsize = _ref28.iconsize,
-    iconsize = _ref28$iconsize === void 0 ? 18 : _ref28$iconsize,
-    iconweight = _ref28.iconweight,
-    iconcolor = _ref28.iconcolor,
-    _ref28$required = _ref28.required,
-    required = _ref28$required === void 0 ? false : _ref28$required,
-    background = _ref28.background,
-    onEnter = _ref28.onEnter,
-    titleRightNode = _ref28.titleRightNode,
-    autoComplete = _ref28.autoComplete,
-    _ref28$loading = _ref28.loading,
-    loading = _ref28$loading === void 0 ? false : _ref28$loading;
+var TextField = function TextField(_ref35) {
+  var _ref35$type = _ref35.type,
+    type = _ref35$type === void 0 ? 'text' : _ref35$type,
+    title = _ref35.title,
+    name = _ref35.name,
+    titleWeight = _ref35.titleWeight,
+    placeholder = _ref35.placeholder,
+    _ref35$disabled = _ref35.disabled,
+    disabled = _ref35$disabled === void 0 ? false : _ref35$disabled,
+    inputValue = _ref35.inputValue,
+    onChange = _ref35.onChange,
+    _ref35$size = _ref35.size,
+    size = _ref35$size === void 0 ? 'medium' : _ref35$size,
+    color = _ref35.color,
+    _ref35$padding = _ref35.padding,
+    padding = _ref35$padding === void 0 ? '0px' : _ref35$padding,
+    titlecolor = _ref35.titlecolor,
+    icon = _ref35.icon,
+    _ref35$iconsize = _ref35.iconsize,
+    iconsize = _ref35$iconsize === void 0 ? 18 : _ref35$iconsize,
+    iconweight = _ref35.iconweight,
+    iconcolor = _ref35.iconcolor,
+    _ref35$required = _ref35.required,
+    required = _ref35$required === void 0 ? false : _ref35$required,
+    background = _ref35.background,
+    onEnter = _ref35.onEnter,
+    titleRightNode = _ref35.titleRightNode,
+    autoComplete = _ref35.autoComplete,
+    _ref35$loading = _ref35.loading,
+    loading = _ref35$loading === void 0 ? false : _ref35$loading,
+    min = _ref35.min,
+    max = _ref35.max,
+    _ref35$step = _ref35.step,
+    step = _ref35$step === void 0 ? 1 : _ref35$step;
   var themeColors = useTheme();
   var _useState = React.useState(disabled),
     isDisabled = _useState[0],
@@ -11250,6 +11280,25 @@ var TextField = function TextField(_ref28) {
       return !prev;
     });
   };
+  var handleNumberStep = function handleNumberStep(direction) {
+    if (isDisabled || !onChange) return;
+    var current = parseFloat(inputValue) || 0;
+    var next = current + direction * step;
+    if (typeof min === 'number' && next < min) next = min;
+    if (typeof max === 'number' && next > max) next = max;
+    var decimals = (step.toString().split('.')[1] || '').length;
+    var nextValue = decimals > 0 ? next.toFixed(decimals) : next.toString();
+    var syntheticEvent = {
+      target: {
+        value: nextValue,
+        name: name || title
+      }
+    };
+    onChange(syntheticEvent);
+  };
+  var currentNumberValue = parseFloat(inputValue);
+  var isIncrementDisabled = isDisabled || !onChange || typeof max === 'number' && !isNaN(currentNumberValue) && currentNumberValue >= max;
+  var isDecrementDisabled = isDisabled || !onChange || typeof min === 'number' && !isNaN(currentNumberValue) && currentNumberValue <= min;
   if (loading) {
     return React__default.createElement(Container, {
       "$flexDirection": 'column',
@@ -11369,7 +11418,10 @@ var TextField = function TextField(_ref28) {
     onKeyDown: function onKeyDown(e) {
       if (e.key === 'Enter') onEnter === null || onEnter === void 0 ? void 0 : onEnter();
     },
-    autoComplete: autoComplete
+    autoComplete: autoComplete,
+    min: type === 'number' ? min : undefined,
+    max: type === 'number' ? max : undefined,
+    step: type === 'number' ? step : undefined
   }), type === 'password' && inputValue && React__default.createElement(IconWrapper$1, {
     "$disabled": disabled,
     onClick: function onClick() {
@@ -11382,7 +11434,7 @@ var TextField = function TextField(_ref28) {
     size: iconsize,
     weight: iconweight,
     color: iconcolor || themeColors.vms["default"].primary
-  })), icon && type !== 'password' && React__default.createElement(IconWrapper$1, {
+  })), icon && type !== 'password' && type !== 'number' && React__default.createElement(IconWrapper$1, {
     onClick: function onClick() {
       return setIsDisabled(function (prev) {
         return !prev;
@@ -11393,7 +11445,37 @@ var TextField = function TextField(_ref28) {
     size: iconsize,
     weight: iconweight,
     color: iconcolor || themeColors.vms["default"].primary
-  }))));
+  })), type === 'number' && React__default.createElement(NumberStepper, {
+    "$disabled": isDisabled
+  }, React__default.createElement(NumberStepperButton, {
+    type: 'button',
+    tabIndex: -1,
+    "$disabled": isIncrementDisabled,
+    disabled: isIncrementDisabled,
+    onClick: function onClick() {
+      return handleNumberStep(1);
+    },
+    "aria-label": 'Increment'
+  }, React__default.createElement(Icon, {
+    icon: 'UpArrow',
+    size: 7,
+    weight: '2px',
+    color: isIncrementDisabled ? themeColors.vms.text.light : themeColors.vms.text.medium
+  })), React__default.createElement(NumberStepperButton, {
+    type: 'button',
+    tabIndex: -1,
+    "$disabled": isDecrementDisabled,
+    disabled: isDecrementDisabled,
+    onClick: function onClick() {
+      return handleNumberStep(-1);
+    },
+    "aria-label": 'Decrement'
+  }, React__default.createElement(Icon, {
+    icon: 'DownArrow',
+    size: 7,
+    weight: '2px',
+    color: isDecrementDisabled ? themeColors.vms.text.light : themeColors.vms.text.medium
+  })))));
 };
 
 var _templateObject$g, _templateObject2$d, _templateObject3$9;