@mw-kit/mw-ui 1.6.7 → 1.6.10

package/dist/components/Input/components/DateIntervalPicker/index.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
 import { DateIntervalPickerProps } from './interfaces';
-declare const DatePicker: React.ForwardRefExoticComponent<DateIntervalPickerProps & React.RefAttributes<HTMLInputElement>>;
+declare const DatePicker: React.ForwardRefExoticComponent<DateIntervalPickerProps & React.RefAttributes<HTMLInputElement>> & {
+    useDefaultDateIntervalState: () => [string, string];
+};
 export default DatePicker;

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

@@ -26,9 +26,9 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
     arrows?: boolean;
     borderless?: boolean;
     paddingless?: boolean;
+    inputWidth?: string;
 }
 export interface StyledLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
-    required: 1 | 0;
     invalid: 1 | 0;
     disabled: 1 | 0;
     paddingless: 1 | 0;
@@ -43,4 +43,8 @@ export interface StyledInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
     arrows: 1 | 0;
     borderless: 1 | 0;
     paddingless: 1 | 0;
+    width?: string;
+}
+export interface StyledLabelTextProps {
+    required: 1 | 0;
 }

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

@@ -1,4 +1,5 @@
-import { StyledInputProps, StyledLabelProps } from './interfaces';
+import { StyledInputProps, StyledLabelProps, StyledLabelTextProps } from './interfaces';
 export declare const IconContainer: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 export declare const Input: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, StyledInputProps, never>;
 export declare const Label: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, StyledLabelProps, never>;
+export declare const LabelText: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledLabelTextProps, never>;

package/dist/components/Input/components/Phone/index.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
 import { Details, PhoneProps } from './interfaces';
-export declare const getDetails: (phone: string) => Details | null;
-declare const Phone: React.ForwardRefExoticComponent<PhoneProps & React.RefAttributes<HTMLInputElement>>;
+export declare const getPhoneDetails: (phone: string) => Details | null;
+declare const Phone: React.ForwardRefExoticComponent<PhoneProps & React.RefAttributes<HTMLInputElement>> & {
+    getPhoneDetails: (phone: string) => Details | null;
+};
 export default Phone;

package/dist/components/Input/index.d.ts

@@ -12,5 +12,8 @@ import { RangeProps } from './components/Range/interfaces';
 import { RadioButtonProps } from './components/RadioButton/interfaces';
 import { DateIntervalPickerProps } from './components/DateIntervalPicker/interfaces';
 export declare type Props = DateProps | TimeProps | CheckboxProps | SelectProps | PasswordProps | PhoneProps | DatePickerProps | RangeProps | DefaultInputProps | SwitchProps | RadioButtonProps | DateIntervalPickerProps;
-declare const Input: React.ForwardRefExoticComponent<(TimeProps & React.RefAttributes<HTMLInputElement>) | (DefaultInputProps & React.RefAttributes<HTMLInputElement>) | (DateProps & React.RefAttributes<HTMLInputElement>) | (CheckboxProps & React.RefAttributes<HTMLInputElement>) | (import("./components/Select/hooks/Select/interfaces").SelectProps & React.RefAttributes<HTMLInputElement>) | (import("./components/Select/hooks/SelectMultiple/interfaces").SelectProps & React.RefAttributes<HTMLInputElement>) | (PasswordProps & React.RefAttributes<HTMLInputElement>) | (PhoneProps & React.RefAttributes<HTMLInputElement>) | (DatePickerProps & React.RefAttributes<HTMLInputElement>) | (RangeProps & React.RefAttributes<HTMLInputElement>) | (SwitchProps & React.RefAttributes<HTMLInputElement>) | (RadioButtonProps & React.RefAttributes<HTMLInputElement>) | (DateIntervalPickerProps & React.RefAttributes<HTMLInputElement>)>;
+declare const Input: React.ForwardRefExoticComponent<(TimeProps & React.RefAttributes<HTMLInputElement>) | (DefaultInputProps & React.RefAttributes<HTMLInputElement>) | (DateProps & React.RefAttributes<HTMLInputElement>) | (CheckboxProps & React.RefAttributes<HTMLInputElement>) | (import("./components/Select/hooks/Select/interfaces").SelectProps & React.RefAttributes<HTMLInputElement>) | (import("./components/Select/hooks/SelectMultiple/interfaces").SelectProps & React.RefAttributes<HTMLInputElement>) | (PasswordProps & React.RefAttributes<HTMLInputElement>) | (PhoneProps & React.RefAttributes<HTMLInputElement>) | (DatePickerProps & React.RefAttributes<HTMLInputElement>) | (RangeProps & React.RefAttributes<HTMLInputElement>) | (SwitchProps & React.RefAttributes<HTMLInputElement>) | (RadioButtonProps & React.RefAttributes<HTMLInputElement>) | (DateIntervalPickerProps & React.RefAttributes<HTMLInputElement>)> & {
+    useDefaultDateIntervalState: () => [string, string];
+    getPhoneDetails: (phone: string) => import("./components/Phone/interfaces").Details | null;
+};
 export default Input;

package/dist/index.js

@@ -182,14 +182,15 @@ var dateToIsoString = function dateToIsoString(date, time, fullYear, pattern) {
 
   var dateData = [date.getDate().toString().padStart(2, '0'), (date.getMonth() + 1).toString().padStart(2, '0'), date.getFullYear().toString().padStart(4, '0')];
   if (fullYear === false) dateData[2] = dateData[2].substring(2, 4);
+  var dateStr = dateData.join('/');
 
   if (pattern === 'us') {
     var tmp = dateData[0];
     dateData[0] = dateData[2];
     dateData[2] = tmp;
+    dateStr = dateData.join('-');
   }
 
-  var dateStr = dateData.join('/');
   if (!time) return dateStr;
   var timeStr = [date.getHours().toString().padStart(2, '0'), date.getMinutes().toString().padStart(2, '0'), date.getSeconds().toString().padStart(2, '0')].join(':');
   return [dateStr, timeStr].join(' ');
@@ -12599,14 +12600,14 @@ var getMask = function getMask(mask) {
   };
 };
 
-var _templateObject$c, _templateObject2$a, _templateObject3$a, _templateObject4$9, _templateObject5$8, _templateObject6$6, _templateObject7$4, _templateObject8$3, _templateObject9$3, _templateObject10$2, _templateObject11$1, _templateObject12$1, _templateObject13$1;
+var _templateObject$c, _templateObject2$a, _templateObject3$a, _templateObject4$9, _templateObject5$8, _templateObject6$6, _templateObject7$4, _templateObject8$3, _templateObject9$3, _templateObject10$2, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1;
 var IconContainer = styled__default.button(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 17px;\n\n  background-color: transparent;\n  border: none;\n  box-shadow: none;\n  padding: 0;\n\n  ", "\n"])), function (_ref) {
   var onClick = _ref.onClick,
       disabled = _ref.disabled;
   if (!onClick || disabled) return;
   return styled.css(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteralLoose(["\n      cursor: pointer;\n    "])));
 });
-var Input = styled__default.input(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  color: ", ";\n\n  line-height: 17px;\n\n  ::placeholder {\n    color: ", ";\n\n    line-height: 17px;\n\n    ", "\n  }\n\n  width: 100%;\n  box-sizing: border-box;\n\n  ", ";\n\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  border-radius: 4px;\n\n  background-color: ", ";\n\n  box-shadow: none;\n  outline: none;\n\n  ", "\n\n  ", "\n"])), function (_ref2) {
+var Input = styled__default.input(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  color: ", ";\n\n  line-height: 17px;\n\n  ::placeholder {\n    color: ", ";\n\n    line-height: 17px;\n\n    ", "\n  }\n\n  display: block;\n  width: ", ";\n  box-sizing: border-box;\n\n  ", ";\n\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  border-radius: 4px;\n\n  background-color: ", ";\n\n  box-shadow: none;\n  outline: none;\n\n  ", "\n\n  ", "\n"])), function (_ref2) {
   var theme = _ref2.theme;
   return theme.useTypography('p');
 }, function (_ref3) {
@@ -12629,69 +12630,73 @@ var Input = styled__default.input(_templateObject3$a || (_templateObject3$a = _t
 
   return styled.css(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n        opacity: 0.5;\n        font-size: 14px;\n        letter-spacing: 0px;\n      "])));
 }, function (_ref7) {
-  var theme = _ref7.theme,
-      paddingless = _ref7.paddingless;
-  if (paddingless) return;
-  return styled.css(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", ";\n    "])), theme.spacings.s2, theme.spacings.s3);
+  var width = _ref7.width;
+  return width || '100%';
 }, function (_ref8) {
   var theme = _ref8.theme,
-      invalid = _ref8.invalid,
-      borderless = _ref8.borderless;
-  if (borderless) return 'transparent';
-  return invalid ? theme.colors.warningRed : theme.colors.lightGrey;
+      paddingless = _ref8.paddingless;
+  if (paddingless) return;
+  return styled.css(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", ";\n    "])), theme.spacings.s2, theme.spacings.s3);
 }, function (_ref9) {
   var theme = _ref9.theme,
-      invalid = _ref9.invalid;
-  return invalid ? theme.getColor('warningRed', 5) : theme.colors.white;
+      invalid = _ref9.invalid,
+      borderless = _ref9.borderless;
+  if (borderless) return 'transparent';
+  return invalid ? theme.colors.warningRed : theme.colors.lightGrey;
 }, function (_ref10) {
-  var arrows = _ref10.arrows;
+  var theme = _ref10.theme,
+      invalid = _ref10.invalid;
+  return invalid ? theme.getColor('warningRed', 5) : theme.colors.white;
+}, function (_ref11) {
+  var arrows = _ref11.arrows;
   if (arrows) return;
   return styled.css(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteralLoose(["\n      /* Chrome, Safari, Edge, Opera */\n      :-webkit-outer-spin-button,\n      :-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n      }\n\n      /* Firefox */\n      -moz-appearance: textfield;\n    "])));
-}, function (_ref11) {
-  var readOnly = _ref11.readOnly,
-      onClick = _ref11.onClick,
-      disabled = _ref11.disabled;
+}, function (_ref12) {
+  var readOnly = _ref12.readOnly,
+      onClick = _ref12.onClick,
+      disabled = _ref12.disabled;
   if (!readOnly) return;
   return styled.css(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n      cursor: ", ";\n    "])), !onClick || disabled ? 'unset' : 'pointer');
 });
-var Label = styled__default.label(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  color: ", ";\n\n  width: ", ";\n  box-sizing: border-box;\n  position: relative;\n  display: block;\n\n  ", "\n\n  > div:first-child {\n    display: inline-block;\n    margin-bottom: ", ";\n\n    ", "\n  }\n\n  > ", " {\n    bottom: ", ";\n  }\n\n  ", "\n"])), function (_ref12) {
-  var theme = _ref12.theme;
-  return theme.useTypography('p');
-}, function (_ref13) {
+var Label = styled__default.label(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  color: ", ";\n\n  width: ", ";\n  box-sizing: border-box;\n  position: relative;\n  display: block;\n\n  ", "\n\n  > ", " {\n    bottom: ", ";\n  }\n\n  ", "\n"])), function (_ref13) {
   var theme = _ref13.theme;
-  return theme.colors.greyishBlue;
+  return theme.useTypography('p');
 }, function (_ref14) {
-  var width = _ref14.width;
-  return width || '100%';
+  var theme = _ref14.theme;
+  return theme.colors.greyishBlue;
 }, function (_ref15) {
-  var disabled = _ref15.disabled;
+  var width = _ref15.width;
+  return width || '100%';
+}, function (_ref16) {
+  var disabled = _ref16.disabled;
   if (!disabled) return;
   return styled.css(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
-}, function (_ref16) {
-  var theme = _ref16.theme;
-  return theme.spacings.s1;
-}, function (_ref17) {
-  var required = _ref17.required;
-  if (!required) return;
-  return styled.css(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n        :after {\n          content: ' *';\n        }\n      "])));
-}, IconContainer, function (_ref18) {
+}, IconContainer, function (_ref17) {
+  var theme = _ref17.theme,
+      paddingless = _ref17.paddingless;
+  return paddingless ? '2px' : "calc(" + theme.spacings.s2 + " + 1px)";
+}, function (_ref18) {
   var theme = _ref18.theme,
+      icon = _ref18.icon,
       paddingless = _ref18.paddingless;
-  return paddingless ? '2px' : "calc(" + theme.spacings.s2 + " + 1px)";
-}, function (_ref19) {
-  var theme = _ref19.theme,
-      icon = _ref19.icon,
-      paddingless = _ref19.paddingless;
   if (!icon) return;
   var width = icon.width,
       position = icon.position;
   var padding = paddingless ? '0px' : theme.spacings.s3;
 
   if (position === 'right') {
-    return styled.css(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteralLoose(["\n        > ", " {\n          width: ", ";\n          right: calc(", " / 2);\n        }\n\n        > ", " {\n          padding-right: calc(", " + ", ");\n        }\n      "])), IconContainer, width, padding, Input, padding, width);
+    return styled.css(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n        > ", " {\n          width: ", ";\n          right: calc(", " / 2);\n        }\n\n        > ", " {\n          padding-right: calc(", " + ", ");\n        }\n      "])), IconContainer, width, padding, Input, padding, width);
   }
 
-  return styled.css(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteralLoose(["\n      > ", " {\n        width: ", ";\n        left: calc(", " / 2);\n      }\n\n      > ", " {\n        padding-left: calc(", " + ", ");\n      }\n    "])), IconContainer, width, padding, Input, padding, width);
+  return styled.css(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteralLoose(["\n      > ", " {\n        width: ", ";\n        left: calc(", " / 2);\n      }\n\n      > ", " {\n        padding-left: calc(", " + ", ");\n      }\n    "])), IconContainer, width, padding, Input, padding, width);
+});
+var LabelText = styled__default.div(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref19) {
+  var theme = _ref19.theme;
+  return theme.spacings.s1;
+}, function (_ref20) {
+  var required = _ref20.required;
+  if (!required) return;
+  return styled.css(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
 });
 
 var Input$1 = React__default.forwardRef(function (props, ref) {
@@ -12731,12 +12736,13 @@ var Input$1 = React__default.forwardRef(function (props, ref) {
     iconOnClick = props.icon.onClick;
   }
 
-  var inputProps = filterObject(props, ['label', 'invalid', 'required', 'icon', 'mask', 'loading', 'clearable', 'setValue', 'onPressEnter', 'htmlDisabled', 'width', 'arrows', 'borderless', 'paddingless'], {
+  var inputProps = filterObject(props, ['label', 'invalid', 'required', 'icon', 'mask', 'loading', 'clearable', 'setValue', 'onPressEnter', 'htmlDisabled', 'width', 'inputWidth', 'arrows', 'borderless', 'paddingless'], {
     invalid: intInvalid,
     type: 'text',
     arrows: intArrows,
     borderless: intBorderless,
-    paddingless: intPaddingless
+    paddingless: intPaddingless,
+    width: props.inputWidth
   });
 
   var onChange = inputProps.onChange || function () {};
@@ -12803,7 +12809,7 @@ var Input$1 = React__default.forwardRef(function (props, ref) {
   }
 
   if (loading) {
-    position = position || 'left';
+    position = position || 'right';
     icon = {
       type: 'jsx',
       icon: React__default.createElement(Loader, {
@@ -12830,13 +12836,14 @@ var Input$1 = React__default.forwardRef(function (props, ref) {
   } : undefined;
   if (htmlDisabled) inputProps.disabled = true;
   return React__default.createElement(Label, {
-    required: intRequired,
     disabled: intDisabled,
     invalid: intInvalid,
     paddingless: intPaddingless,
     icon: iconProps,
     width: width
-  }, React__default.createElement("div", null, label), React__default.createElement(Input, Object.assign({}, inputProps, {
+  }, label && React__default.createElement(LabelText, {
+    required: intRequired
+  }, label), React__default.createElement(Input, Object.assign({}, inputProps, {
     ref: ref
   })), icon && React__default.createElement(IconContainer, {
     type: iconSubmit ? 'submit' : 'button',
@@ -14297,7 +14304,7 @@ var Label$2 = styled__default.div(_templateObject3$e || (_templateObject3$e = _t
   return theme.colors.darkestGrey;
 });
 
-var getDetails = function getDetails(phone) {
+var getPhoneDetails = function getPhoneDetails(phone) {
   if (!notEmptyString(phone)) return null;
   var splitted = phone.replace(/[^0-9\s]/g, '').split(' ');
   if (splitted.length < 2) return null;
@@ -14344,7 +14351,7 @@ var Button$2 = function Button(props) {
   }));
 };
 
-var Phone = React__default.forwardRef(function (props, ref) {
+var Component = React__default.forwardRef(function (props, ref) {
   var value = props.value,
       setValue = props.setValue;
 
@@ -14361,7 +14368,7 @@ var Phone = React__default.forwardRef(function (props, ref) {
       setOpen = _useState3[1];
 
   React.useEffect(function () {
-    var details = getDetails(value || '');
+    var details = getPhoneDetails(value || '');
     setCountry(details ? details.country : countries.br);
   }, [value]);
   var options = Object.keys(countries).map(function (iso) {
@@ -14386,7 +14393,7 @@ var Phone = React__default.forwardRef(function (props, ref) {
   };
 
   React.useEffect(function () {
-    var details = getDetails(value || '');
+    var details = getPhoneDetails(value || '');
     setCountry(details ? details.country : countries.br);
   }, [value]);
   React.useEffect(function () {
@@ -14445,7 +14452,10 @@ var Phone = React__default.forwardRef(function (props, ref) {
     }
   }));
 });
-Phone.displayName = 'Phone';
+Component.displayName = 'Phone';
+var Phone = Object.assign(Component, {
+  getPhoneDetails: getPhoneDetails
+});
 
 var _templateObject$l, _templateObject2$h, _templateObject3$f, _templateObject4$c, _templateObject5$b, _templateObject6$9, _templateObject7$7, _templateObject8$5, _templateObject9$5;
 var RelativeContainer$4 = styled__default.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n  position: relative;\n\n  input {\n    color: transparent;\n  }\n"])));
@@ -14670,7 +14680,7 @@ var Switch = function Switch(props) {
   })), React__default.createElement("span", null), label && React__default.createElement(LabelContainer$1, null, label));
 };
 
-var _templateObject$n, _templateObject2$j, _templateObject3$h, _templateObject4$e, _templateObject5$d, _templateObject6$b, _templateObject7$9, _templateObject8$6, _templateObject9$6, _templateObject10$4, _templateObject11$3, _templateObject12$3, _templateObject13$3, _templateObject14$1, _templateObject15, _templateObject16;
+var _templateObject$n, _templateObject2$j, _templateObject3$h, _templateObject4$e, _templateObject5$d, _templateObject6$b, _templateObject7$9, _templateObject8$6, _templateObject9$6, _templateObject10$4, _templateObject11$3, _templateObject12$3, _templateObject13$3, _templateObject14$2, _templateObject15, _templateObject16;
 var bullet = styled.css(_templateObject$n || (_templateObject$n = _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;
@@ -14730,7 +14740,7 @@ var SelectedArea = styled__default.div(_templateObject13$3 || (_templateObject13
   var percent = _ref13.percent;
   return percent;
 });
-var MarkersContainer = styled__default.div(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteralLoose(["\n  height: 17px;\n"])));
+var MarkersContainer = styled__default.div(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteralLoose(["\n  height: 17px;\n"])));
 var Marker = styled__default.div(_templateObject15 || (_templateObject15 = _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;
   return left;
@@ -15119,8 +15129,8 @@ var intervalTypes = {
       var start = new Date(base);
       start.setDate(start.getDate() - start.getUTCDay());
       start.setHours(0, 0, 0, 0);
-      var end = new Date(base);
-      end.setDate(start.getDate() - start.getUTCDay() + 6);
+      var end = new Date(start);
+      end.setDate(start.getDate() + 6);
       end.setHours(23, 59, 59, 0);
       return [start, end];
     },
@@ -15160,7 +15170,7 @@ var intervalTypes = {
       var start = new Date(base);
       start.setDate(1);
       start.setHours(0, 0, 0, 0);
-      var end = new Date(base);
+      var end = new Date(start);
       end.setMonth(end.getMonth() + 1);
       end.setDate(0);
       end.setHours(23, 59, 59, 0);
@@ -15244,7 +15254,7 @@ var parse = function parse(value) {
 };
 
 var _templateObject$q, _templateObject2$l, _templateObject3$j, _templateObject4$g, _templateObject5$f, _templateObject6$d, _templateObject7$b, _templateObject8$7, _templateObject9$7, _templateObject10$5;
-var RelativeContainer$5 = styled__default.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n  position: relative;\n\n  > :nth-child(1) input {\n    color: transparent;\n  }\n"])));
+var RelativeContainer$5 = styled__default.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n  position: relative;\n  user-select: none;\n  min-width: 220px;\n\n  > :nth-child(1) input {\n    color: transparent;\n  }\n"])));
 var LabelContainer$3 = styled__default.div(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.useTypography('p');
@@ -15252,7 +15262,7 @@ var LabelContainer$3 = styled__default.div(_templateObject2$l || (_templateObjec
   var theme = _ref2.theme;
   return theme.spacings.s3;
 });
-var Container$a = styled__default.div(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 1px;\n  left: 1px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-radius: 4px;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref3) {
+var Container$a = styled__default.div(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 1px;\n  left: 1px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-radius: 4px;\n  white-space: nowrap;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref3) {
   var theme = _ref3.theme,
       iconWidth = _ref3.iconWidth,
       paddingless = _ref3.paddingless;
@@ -15283,7 +15293,7 @@ var Button$4 = styled__default.button(_templateObject9$7 || (_templateObject9$7
   return styled.css(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
 });
 
-var DatePicker$1 = React__default.forwardRef(function (props, ref) {
+var Component$1 = React__default.forwardRef(function (props, ref) {
   var value = parse(props.value);
   var disabled = props.disabled || props.loading;
 
@@ -15460,9 +15470,21 @@ var DatePicker$1 = React__default.forwardRef(function (props, ref) {
     time: {}
   }));
 });
-DatePicker$1.displayName = 'DatePicker';
+Component$1.displayName = 'DatePicker';
+
+var useDefaultDateIntervalState = function useDefaultDateIntervalState() {
+  var start = new Date();
+  start.setHours(0, 0, 0, 0);
+  var end = new Date();
+  end.setHours(23, 59, 59, 0);
+  return [start.toISOString(), end.toISOString()];
+};
+
+var DatePicker$1 = Object.assign(Component$1, {
+  useDefaultDateIntervalState: useDefaultDateIntervalState
+});
 
-var Input$3 = React__default.forwardRef(function (props, ref) {
+var Component$2 = React__default.forwardRef(function (props, ref) {
   switch (props.type) {
     case 'date':
       {
@@ -15552,7 +15574,11 @@ var Input$3 = React__default.forwardRef(function (props, ref) {
       }
   }
 });
-Input$3.displayName = 'Input';
+Component$2.displayName = 'Input';
+var Input$3 = Object.assign(Component$2, {
+  useDefaultDateIntervalState: DatePicker$1.useDefaultDateIntervalState,
+  getPhoneDetails: Phone.getPhoneDetails
+});
 
 var Portal = function Portal(props) {
   var id = props.id,
@@ -17008,7 +17034,7 @@ var useContext$2 = function useContext() {
   return React__default.useContext(Provider$2);
 };
 
-var _templateObject$M, _templateObject2$C, _templateObject3$A, _templateObject4$w, _templateObject5$u, _templateObject6$q, _templateObject7$n, _templateObject8$j, _templateObject9$h, _templateObject10$c, _templateObject11$6, _templateObject12$4, _templateObject13$4, _templateObject14$2, _templateObject15$1;
+var _templateObject$M, _templateObject2$C, _templateObject3$A, _templateObject4$w, _templateObject5$u, _templateObject6$q, _templateObject7$n, _templateObject8$j, _templateObject9$h, _templateObject10$c, _templateObject11$6, _templateObject12$4, _templateObject13$4, _templateObject14$3, _templateObject15$1;
 var aligns = {
   self: {
     horizontal: {
@@ -17118,7 +17144,7 @@ var Col = styled__default.div(_templateObject$M || (_templateObject$M = _taggedT
   if (!hover) return;
   var h = hover === true ? ['lightGrey', 50] : hover;
   var c = Array.isArray(h) ? theme.getColor.apply(theme, h) : theme.colors[h];
-  return styled.css(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteralLoose(["\n      :hover {\n        background-color: ", ";\n      }\n    "])), c);
+  return styled.css(_templateObject14$3 || (_templateObject14$3 = _taggedTemplateLiteralLoose(["\n      :hover {\n        background-color: ", ";\n      }\n    "])), c);
 }, function (_ref9) {
   var pointer = _ref9.pointer;
   if (!pointer) return;