@mw-kit/mw-ui 1.7.37 → 1.7.39

package/dist/components/Input/components/Range/interfaces.d.ts

@@ -15,6 +15,7 @@ export interface RangeProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     value: number;
     width?: string;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: number) => void;
+    setValue: React.Dispatch<React.SetStateAction<number>>;
     markers?: {
         min?: number;
         max?: number;

package/dist/components/Input/components/Range/styles.d.ts

@@ -1,10 +1,15 @@
 import React from 'react';
+export declare const NavBar: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    percent: number;
+    position: 'bottom' | 'top';
+}, never>;
 export declare const Input: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
 interface StyledLabelProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
     disabled: 1 | 0;
     required: 1 | 0;
     width?: string;
 }
+export declare const LabelContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const Label: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, StyledLabelProps, never>;
 interface InputContainerProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
     invalid: 1 | 0;

package/dist/index.js

@@ -15545,7 +15545,7 @@ var Switch = function Switch(props) {
   })), React__default.createElement("span", null), label.after && React__default.createElement(LabelContainer$3, null, label.after));
 };
 
-var _templateObject$q, _templateObject2$m, _templateObject3$i, _templateObject4$d, _templateObject5$b, _templateObject6$a, _templateObject7$a, _templateObject8$8, _templateObject9$8, _templateObject10$6, _templateObject11$4, _templateObject12$3, _templateObject13$2, _templateObject14$2, _templateObject15$2, _templateObject16$2;
+var _templateObject$q, _templateObject2$m, _templateObject3$i, _templateObject4$d, _templateObject5$b, _templateObject6$a, _templateObject7$a, _templateObject8$8, _templateObject9$8, _templateObject10$6, _templateObject11$4, _templateObject12$3, _templateObject13$2, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$1, _templateObject20$1;
 var bullet = styled.css(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n  appearance: none;\n  width: ", ";\n  height: ", ";\n  border-radius: 100%;\n  border-width: 1px;\n  border-style: solid;\n  background-color: ", ";\n  box-shadow: 0px 1px 3px ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.spacings.s4;
@@ -15559,61 +15559,88 @@ var bullet = styled.css(_templateObject$q || (_templateObject$q = _taggedTemplat
   var theme = _ref4.theme;
   return theme.getColor('black', 10);
 });
-var Input$2 = styled__default.input(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n  appearance: none;\n  width: 100%;\n  height: 10px;\n  background-color: transparent;\n  outline: none;\n  position: relative;\n  z-index: 3;\n  margin: 0;\n\n  :not(:disabled) {\n    cursor: pointer;\n  }\n\n  /** firefox */\n  ::-moz-range-thumb {\n    ", "\n  }\n  /** ie */\n  ::-ms-thumb {\n    ", "\n  }\n  /** chrome */\n  ::-webkit-slider-thumb {\n    ", "\n  }\n"])), bullet, bullet, bullet);
-var Label$5 = styled__default.label(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteralLoose(["\n  ", ";\n  line-height: 19px;\n\n  width: ", ";\n  box-sizing: border-box;\n  display: block;\n  position: relative;\n\n  ", "\n\n  > div:first-child {\n    display: inline-block;\n    margin-bottom: ", ";\n\n    ", "\n  }\n"])), function (_ref5) {
+var NavBar = styled__default.div(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  z-index: 2;\n\n  left: 0;\n  width: 100%;\n  height: calc(33px + ", ");\n  transition: height 0.25s ease-in-out;\n  overflow: hidden;\n\n  ", "\n\n  > div {\n    position: absolute;\n    z-index: 2;\n\n    width: 100px;\n    left: ", ";\n    background-color: ", ";\n    color: ", ";\n    padding: ", ";\n    border-radius: 4px;\n\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n"])), function (_ref5) {
   var theme = _ref5.theme;
-  return theme.useTypography('p');
-}, function (_ref6) {
-  var width = _ref6.width;
-  return width || '100%';
-}, function (_ref7) {
-  var disabled = _ref7.disabled;
-  if (!disabled) return;
-  return styled.css(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
-}, function (_ref8) {
-  var theme = _ref8.theme;
   return theme.spacings.s1;
+}, function (_ref6) {
+  var position = _ref6.position;
+  return position === 'bottom' ? styled.css(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteralLoose(["\n          bottom: 100%;\n          > div {\n            bottom: ", ";\n          }\n        "])), function (_ref7) {
+    var theme = _ref7.theme;
+    return theme.spacings.s1;
+  }) : styled.css(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteralLoose(["\n          top: 100%;\n          > div {\n            top: ", ";\n          }\n        "])), function (_ref8) {
+    var theme = _ref8.theme;
+    return theme.spacings.s1;
+  });
 }, function (_ref9) {
-  var required = _ref9.required;
-  if (!required) return;
-  return styled.css(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteralLoose(["\n        :after {\n          content: ' *';\n        }\n      "])));
+  var percent = _ref9.percent;
+  if (percent < 10) return '0%';
+  if (percent > 90) return 'calc(100% - 100px)';
+  return "calc(" + percent + "% - 50px + 22px * " + (50 - percent) / 100 + ")";
+}, function (_ref10) {
+  var theme = _ref10.theme;
+  return theme.colors.blue;
+}, function (_ref11) {
+  var theme = _ref11.theme;
+  return theme.colors.white;
+}, function (_ref12) {
+  var theme = _ref12.theme;
+  return theme.spacings.s1;
 });
-var InputContainer$1 = styled__default.div(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  display: flex;\n  gap: 6px;\n\n  > div {\n    position: relative;\n  }\n\n  ", "\n"])), function (_ref10) {
-  var theme = _ref10.theme,
-      invalid = _ref10.invalid;
+var Input$2 = styled__default.input(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteralLoose(["\n  appearance: none;\n  width: 100%;\n  height: 10px;\n  background-color: transparent;\n  outline: none;\n  position: relative;\n  z-index: 3;\n  margin: 0;\n\n  :not(:disabled) {\n    cursor: pointer;\n  }\n\n  /** firefox */\n  ::-moz-range-thumb {\n    ", "\n  }\n  /** ie */\n  ::-ms-thumb {\n    ", "\n  }\n  /** chrome */\n  ::-webkit-slider-thumb {\n    ", "\n  }\n"])), bullet, bullet, bullet);
+var LabelContainer$4 = styled__default.div(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  margin-bottom: ", ";\n"])), function (_ref13) {
+  var theme = _ref13.theme;
+  return theme.spacings.s1;
+});
+var Label$5 = styled__default.label(_templateObject7$a || (_templateObject7$a = _taggedTemplateLiteralLoose(["\n  ", ";\n  line-height: 19px;\n\n  width: ", ";\n  box-sizing: border-box;\n  display: block;\n  position: relative;\n\n  ", "\n\n  > ", " {\n    ", "\n  }\n\n  :not(:hover) ", " {\n    height: 0;\n  }\n"])), function (_ref14) {
+  var theme = _ref14.theme;
+  return theme.useTypography('p');
+}, function (_ref15) {
+  var width = _ref15.width;
+  return width || '100%';
+}, function (_ref16) {
+  var disabled = _ref16.disabled;
+  if (!disabled) return;
+  return styled.css(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
+}, LabelContainer$4, function (_ref17) {
+  var required = _ref17.required;
+  return required && styled.css(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteralLoose(["\n          :after {\n            content: ' *';\n          }\n        "])));
+}, NavBar);
+var InputContainer$1 = styled__default.div(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  display: flex;\n  gap: 6px;\n\n  > div {\n    position: relative;\n  }\n\n  ", "\n"])), function (_ref18) {
+  var theme = _ref18.theme,
+      invalid = _ref18.invalid;
 
   if (!invalid) {
-    return styled.css(_templateObject7$a || (_templateObject7$a = _taggedTemplateLiteralLoose(["\n        ", " > span {\n          background-color: ", ";\n        }\n\n        ", " {\n          /** firefox */\n          ::-moz-range-thumb {\n            border-color: ", ";\n          }\n          /** ie */\n          ::-ms-thumb {\n            border-color: ", ";\n          }\n          /** chrome */\n          ::-webkit-slider-thumb {\n            border-color: ", ";\n          }\n        }\n      "])), SelectedArea, theme.colors.blue, Input$2, theme.colors.lightestGrey, theme.colors.lightestGrey, theme.colors.lightestGrey);
+    return styled.css(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteralLoose(["\n        ", " > span {\n          background-color: ", ";\n        }\n\n        ", " {\n          /** firefox */\n          ::-moz-range-thumb {\n            border-color: ", ";\n          }\n          /** ie */\n          ::-ms-thumb {\n            border-color: ", ";\n          }\n          /** chrome */\n          ::-webkit-slider-thumb {\n            border-color: ", ";\n          }\n        }\n      "])), SelectedArea, theme.colors.blue, Input$2, theme.colors.lightestGrey, theme.colors.lightestGrey, theme.colors.lightestGrey);
   }
 
-  return styled.css(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteralLoose(["\n      ", " > span {\n        background-color: ", ";\n      }\n\n      ", " {\n        /** firefox */\n        ::-moz-range-thumb {\n          border-color: ", ";\n        }\n        /** ie */\n        ::-ms-thumb {\n          border-color: ", ";\n        }\n        /** chrome */\n        ::-webkit-slider-thumb {\n          border-color: ", ";\n        }\n      }\n    "])), SelectedArea, theme.colors.warningRed, Input$2, theme.colors.warningRed, theme.colors.warningRed, theme.colors.warningRed);
+  return styled.css(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteralLoose(["\n      ", " > span {\n        background-color: ", ";\n      }\n\n      ", " {\n        /** firefox */\n        ::-moz-range-thumb {\n          border-color: ", ";\n        }\n        /** ie */\n        ::-ms-thumb {\n          border-color: ", ";\n        }\n        /** chrome */\n        ::-webkit-slider-thumb {\n          border-color: ", ";\n        }\n      }\n    "])), SelectedArea, theme.colors.warningRed, Input$2, theme.colors.warningRed, theme.colors.warningRed, theme.colors.warningRed);
 });
-var MinMaxLabelContainer = styled__default.div(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  padding-bottom: 2px;\n"])));
-var LabelsContainer = styled__default.div(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 7px;\n\n  ", "\n"])), function (_ref11) {
-  var position = _ref11.position;
+var MinMaxLabelContainer = styled__default.div(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  padding-bottom: 2px;\n"])));
+var LabelsContainer = styled__default.div(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 7px;\n\n  ", "\n"])), function (_ref19) {
+  var position = _ref19.position;
 
   if (position === 'bottom') {
-    return styled.css(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteralLoose(["\n        ", " {\n          flex-direction: column-reverse;\n        }\n\n        ", " {\n          :after {\n            bottom: calc(100% + 10.5px);\n          }\n        }\n\n        ", " {\n          align-items: start;\n        }\n      "])), InputContainer$1, Marker, MinMaxLabelContainer);
+    return styled.css(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n        ", " {\n          flex-direction: column-reverse;\n        }\n\n        ", " {\n          :after {\n            bottom: calc(100% + 10.5px);\n          }\n        }\n\n        ", " {\n          align-items: start;\n        }\n      "])), InputContainer$1, Marker, MinMaxLabelContainer);
   }
 
-  return styled.css(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteralLoose(["\n      ", " {\n        flex-direction: column;\n      }\n\n      ", " {\n        :after {\n          top: calc(100% + 8px);\n        }\n      }\n\n      ", " {\n        align-items: end;\n      }\n    "])), InputContainer$1, Marker, MinMaxLabelContainer);
+  return styled.css(_templateObject16$2 || (_templateObject16$2 = _taggedTemplateLiteralLoose(["\n      ", " {\n        flex-direction: column;\n      }\n\n      ", " {\n        :after {\n          top: calc(100% + 8px);\n        }\n      }\n\n      ", " {\n        align-items: end;\n      }\n    "])), InputContainer$1, Marker, MinMaxLabelContainer);
 });
-var SelectedArea = styled__default.div(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n\n  height: 3px;\n  width: 100%;\n  position: absolute;\n  bottom: calc(50% - 2px);\n  left: 0;\n  display: flex;\n  z-index: 1;\n\n  > span {\n    width: ", "%;\n    display: block;\n    box-sizing: border-box;\n    height: 100%;\n  }\n"])), function (_ref12) {
-  var theme = _ref12.theme;
+var SelectedArea = styled__default.div(_templateObject17$2 || (_templateObject17$2 = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n\n  height: 3px;\n  width: 100%;\n  position: absolute;\n  bottom: calc(50% - 2px);\n  left: 0;\n  display: flex;\n  z-index: 1;\n\n  > span {\n    width: ", "%;\n    display: block;\n    box-sizing: border-box;\n    height: 100%;\n  }\n"])), function (_ref20) {
+  var theme = _ref20.theme;
   return theme.getColor('greyishBlue', 10);
-}, function (_ref13) {
-  var percent = _ref13.percent;
+}, function (_ref21) {
+  var percent = _ref21.percent;
   return percent;
 });
-var MarkersContainer = styled__default.div(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteralLoose(["\n  height: 17px;\n"])));
-var Marker = styled__default.div(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  width: 40px;\n  text-align: center;\n  left: ", ";\n  z-index: 2;\n\n  :first-child {\n    left: 0;\n    text-align: left;\n\n    :after {\n      left: 0;\n    }\n  }\n  :last-child {\n    right: 0;\n    left: unset;\n    text-align: right;\n\n    :after {\n      right: 0;\n      left: unset;\n    }\n  }\n\n  ", "\n"])), function (_ref14) {
-  var left = _ref14.left;
+var MarkersContainer = styled__default.div(_templateObject18$2 || (_templateObject18$2 = _taggedTemplateLiteralLoose(["\n  height: 17px;\n"])));
+var Marker = styled__default.div(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  width: 40px;\n  text-align: center;\n  left: ", ";\n  z-index: 2;\n\n  :first-child {\n    left: 0;\n    text-align: left;\n\n    :after {\n      left: 0;\n    }\n  }\n  :last-child {\n    right: 0;\n    left: unset;\n    text-align: right;\n\n    :after {\n      right: 0;\n      left: unset;\n    }\n  }\n\n  ", "\n"])), function (_ref22) {
+  var left = _ref22.left;
   return left;
-}, function (_ref15) {
-  var bullet = _ref15.bullet,
-      theme = _ref15.theme;
+}, function (_ref23) {
+  var bullet = _ref23.bullet,
+      theme = _ref23.theme;
   if (!bullet) return;
-  return styled.css(_templateObject16$2 || (_templateObject16$2 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: '';\n        position: absolute;\n        left: calc(50% - 5px);\n        width: 10px;\n        height: 10px;\n        border-radius: 100%;\n        border: 1px solid ", ";\n        background-color: ", ";\n        box-shadow: 0px 1px 3px ", ";\n      }\n    "])), theme.colors.lightestGrey, theme.colors.white, theme.getColor('black', 10));
+  return styled.css(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: '';\n        position: absolute;\n        left: calc(50% - 5px);\n        width: 10px;\n        height: 10px;\n        border-radius: 100%;\n        border: 1px solid ", ";\n        background-color: ", ";\n        box-shadow: 0px 1px 3px ", ";\n      }\n    "])), theme.colors.lightestGrey, theme.colors.white, theme.getColor('black', 10));
 });
 
 var getMarkers = function getMarkers(props) {
@@ -15686,6 +15713,16 @@ var getMarkers = function getMarkers(props) {
   };
 };
 
+var getLeft = function getLeft(markers, percent, index) {
+  var z = markers - 2;
+  if (z < markers - 1) z = markers - 1;
+  var y = 20 / z;
+  var x = 20 - y * (z - index);
+  var p = index * percent;
+  var left = "calc(" + p + "% - 10px - " + x + "px)";
+  return left;
+};
+
 var Range = React__default.forwardRef(function (props, ref) {
   var label = props.label,
       minLabel = props.minLabel,
@@ -15693,7 +15730,8 @@ var Range = React__default.forwardRef(function (props, ref) {
       invalid = props.invalid,
       disabled = props.disabled,
       required = props.required,
-      width = props.width;
+      width = props.width,
+      setValue = props.setValue;
 
   var _getMarkers = getMarkers(props),
       min = _getMarkers.min,
@@ -15712,18 +15750,69 @@ var Range = React__default.forwardRef(function (props, ref) {
     throw new Error('Invalid value');
   }
 
-  var _onChange = props.onChange || function () {};
-
-  var onChange = strict ? function (event) {
-    var index = parseInt(event.target.value);
+  var getValue = strict ? function (v) {
+    var index = typeof v === 'number' ? v : parseInt(v);
     var value = markers[index].value;
+    return value;
+  } : function (v) {
+    var value = typeof v === 'number' ? v : parseFloat(v);
+    return value;
+  };
 
-    _onChange(event, value);
-  } : function (event) {
-    var value = parseFloat(event.target.value);
+  var _onChange = props.onChange || function (_event, value) {
+    return setValue(value);
+  };
+
+  var onChange = function onChange(event) {
+    var value = getValue(event.target.value);
 
     _onChange(event, value);
   };
+
+  var _ref = strict ? {
+    increment: function increment() {
+      setValue(function (prev) {
+        var index = markers.findIndex(function (e) {
+          return e.value === prev;
+        });
+        if (index < 0) return prev;
+        var x = index + 1;
+        return x < markers.length ? markers[x].value : prev;
+      });
+    },
+    canIncrement: value + 1 < markers.length,
+    decrement: function decrement() {
+      setValue(function (prev) {
+        var index = markers.findIndex(function (e) {
+          return e.value === prev;
+        });
+        if (index < 0) return prev;
+        var x = index - 1;
+        return x >= 0 ? markers[x].value : prev;
+      });
+    },
+    canDecrement: value - 1 >= 0
+  } : {
+    increment: function increment() {
+      setValue(function (prev) {
+        var x = prev + step;
+        return x > max ? prev : x;
+      });
+    },
+    canIncrement: value + step <= max,
+    decrement: function decrement() {
+      setValue(function (prev) {
+        var x = prev - step;
+        return x < min ? prev : x;
+      });
+    },
+    canDecrement: value - step >= min
+  },
+      increment = _ref.increment,
+      canIncrement = _ref.canIncrement,
+      decrement = _ref.decrement,
+      canDecrement = _ref.canDecrement;
+
   var inputProps = filterObject(props, ['label', 'minLabel', 'maxLabel', 'invalid', 'required', 'width', 'onChange', 'step', 'value'], {
     min: min,
     max: max,
@@ -15735,17 +15824,14 @@ var Range = React__default.forwardRef(function (props, ref) {
     required: required ? 1 : 0,
     disabled: disabled ? 1 : 0,
     width: width
-  }, React__default.createElement("div", null, label), React__default.createElement(LabelsContainer, {
+  }, label && React__default.createElement("div", {
+    children: label
+  }), React__default.createElement(LabelsContainer, {
     position: position
   }, minLabel && React__default.createElement(MinMaxLabelContainer, null, minLabel), React__default.createElement(InputContainer$1, {
     invalid: invalid ? 1 : 0
   }, markers.length > 0 && React__default.createElement(MarkersContainer, null, markers.map(function (marker, index) {
-    var z = markers.length - 2;
-    if (z < markers.length - 1) z = markers.length - 1;
-    var y = 20 / z;
-    var x = 20 - y * (z - index);
-    var p = index * percent;
-    var left = "calc(" + p + "% - 10px - " + x + "px)";
+    var left = getLeft(markers.length, percent, index);
     var bullet = marker.value > value ? 1 : 0;
     return React__default.createElement(Marker, {
       key: marker.value,
@@ -15754,7 +15840,20 @@ var Range = React__default.forwardRef(function (props, ref) {
     }, marker.label);
   })), React__default.createElement("div", null, React__default.createElement(Input$2, Object.assign({
     ref: ref
-  }, inputProps)), React__default.createElement(SelectedArea, {
+  }, inputProps)), React__default.createElement(NavBar, {
+    percent: value * 100 / max,
+    position: position
+  }, React__default.createElement("div", null, React__default.createElement(Icon, {
+    type: 'feather',
+    icon: 'minus_circle',
+    color: 'white',
+    onClick: canDecrement ? decrement : undefined
+  }), getValue(value), React__default.createElement(Icon, {
+    type: 'feather',
+    icon: 'plus_circle',
+    color: 'white',
+    onClick: canIncrement ? increment : undefined
+  }))), React__default.createElement(SelectedArea, {
     percent: percent
   }, Array(spans).fill(1).map(function (_value, index) {
     return React__default.createElement("span", {
@@ -15765,7 +15864,7 @@ var Range = React__default.forwardRef(function (props, ref) {
 Range.displayName = 'input';
 
 var _templateObject$r, _templateObject2$n, _templateObject3$j, _templateObject4$e, _templateObject5$c, _templateObject6$b, _templateObject7$b;
-var LabelContainer$4 = styled__default.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n  ", "\n  display: flex;\n  align-items: center;\n"])), function (_ref) {
+var LabelContainer$5 = styled__default.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n  ", "\n  display: flex;\n  align-items: center;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.useTypography('p');
 });
@@ -15783,7 +15882,7 @@ var Label$6 = styled__default.label(_templateObject2$n || (_templateObject2$n =
 }, function (_ref4) {
   var required = _ref4.required;
   if (!required) return;
-  return styled.css(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose(["\n      > ", " {\n        :after {\n          content: ' *';\n        }\n      }\n    "])), LabelContainer$4);
+  return styled.css(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose(["\n      > ", " {\n        :after {\n          content: ' *';\n        }\n      }\n    "])), LabelContainer$5);
 }, function (_ref5) {
   var invalid = _ref5.invalid;
 
@@ -15821,7 +15920,7 @@ var RadioButton = function RadioButton(props) {
     invalid: invalid ? 1 : 0
   }, React__default.createElement("input", Object.assign({}, htmlProps, {
     type: 'radio'
-  })), React__default.createElement("span", null), label && React__default.createElement(LabelContainer$4, null, label));
+  })), React__default.createElement("span", null), label && React__default.createElement(LabelContainer$5, null, label));
 };
 
 var validate = function validate(_ref, min, max) {
@@ -16009,7 +16108,7 @@ var parse = function parse(value) {
 
 var _templateObject$s, _templateObject2$o, _templateObject3$k, _templateObject4$f, _templateObject5$d, _templateObject6$c, _templateObject7$c, _templateObject8$9, _templateObject9$9, _templateObject10$7, _templateObject11$5, _templateObject12$4;
 var RelativeContainer$5 = styled__default.div(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n  position: relative;\n  user-select: none;\n  min-width: 220px;\n\n  > input,\n  > label > input {\n    color: transparent;\n    background-color: transparent;\n    width: 1px;\n    height: 1px;\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    border: 0;\n    padding: 0;\n    overflow: hidden;\n    outline: none;\n    box-shadow: none;\n  }\n"])));
-var LabelContainer$5 = styled__default.div(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 17px;\n  flex: 1;\n\n  :first-child {\n    text-align: left;\n  }\n  :not(:first-child) {\n    text-align: center;\n  }\n\n  ", "\n\n  ", ";\n"])), function (_ref) {
+var LabelContainer$6 = styled__default.div(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 17px;\n  flex: 1;\n\n  :first-child {\n    text-align: left;\n  }\n  :not(:first-child) {\n    text-align: center;\n  }\n\n  ", "\n\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.useTypography('p');
 }, function (_ref2) {
@@ -16177,7 +16276,7 @@ var Component$1 = React__default.forwardRef(function (props, ref) {
     paddingless: props.paddingless ? 1 : 0,
     borderless: props.borderless ? 1 : 0
   }, function () {
-    var label = React__default.createElement(LabelContainer$5, {
+    var label = React__default.createElement(LabelContainer$6, {
       onClick: onClick
     }, !value.some(function (v) {
       return !isDateInstance(v);