@7shifts/sous-chef 2.1.1 → 2.3.0

package/dist/forms/MultiSelectField/MultiSelectField.d.ts

@@ -15,7 +15,9 @@ declare type Props<T> = {
     placeholder?: string;
     disabled?: boolean;
     closeOnSelect?: boolean;
+    /** When the user opens the menu, if this prop is `true`, it will scroll the page into to the menu view (if its content falls under a scroll). It is recomended to disable this behaviour when using the `MultiSelectField` inside a modal. */
+    menuShouldScrollIntoView?: boolean;
 };
 /** Component to make possible choose from a predefined options. */
-declare const MultiSelectField: <T extends unknown>({ name, id: inputId, value, options, onChange, onBlur, CustomOption: UserCustomOption, label, caption, error, placeholder, disabled, closeOnSelect }: Props<T>) => JSX.Element;
+declare const MultiSelectField: <T extends unknown>({ name, id: inputId, value, options, onChange, onBlur, CustomOption: UserCustomOption, label, caption, error, placeholder, disabled, closeOnSelect, menuShouldScrollIntoView }: Props<T>) => JSX.Element;
 export default MultiSelectField;

package/dist/forms/SelectField/SelectField.d.ts

@@ -18,7 +18,9 @@ declare type Props<T> = {
     /** Use a prefix for things like currency symbols (“$”, “¥”, “£”) or icons. */
     prefix?: React.ReactNode;
     asToolbarFilter?: boolean;
+    /** When the user opens the menu, if this prop is `true`, it will scroll the page into to the menu view (if its content falls under a scroll). It is recomended to disable this behaviour when using the `SelectField` inside a modal. */
+    menuShouldScrollIntoView?: boolean;
 };
 /** Component to make possible choose from a predefined options. */
-declare const SelectField: <T extends unknown>({ name, id: inputId, value, options, onChange, onBlur, CustomOption: UserCustomOption, SelectedOptionPrefix, label, caption, error, placeholder, disabled, prefix, asToolbarFilter }: Props<T>) => JSX.Element;
+declare const SelectField: <T extends unknown>({ name, id: inputId, value, options, onChange, onBlur, CustomOption: UserCustomOption, SelectedOptionPrefix, label, caption, error, placeholder, disabled, prefix, asToolbarFilter, menuShouldScrollIntoView }: Props<T>) => JSX.Element;
 export default SelectField;

package/dist/forms/TextField/TextField.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 declare type AutoCompleteType = 'off' | 'on';
-declare type Props = {
+export declare type Props = {
     autoComplete?: AutoCompleteType;
     autoFocus?: boolean;
     caption?: React.ReactNode;

package/dist/forms/TextField/useTextField.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import { RefType } from '../../utils/types';
+import type { Props } from './TextField';
+declare type UseTextFieldProps = Props & {
+    ref: RefType<HTMLInputElement>;
+};
+export declare const useTextField: ({ autoComplete, autoFocus, defaultValue, disabled, error, id, maxLength, name, caption, label, onBlur, onChange, onFocus, onKeyDown, placeholder, value, ref }: UseTextFieldProps) => {
+    inputProps: {
+        'aria-describedby': string;
+        'aria-invalid': boolean;
+        autoComplete: "on" | "off" | undefined;
+        autoFocus: boolean | undefined;
+        className: string;
+        'data-testid': string;
+        disabled: boolean | undefined;
+        defaultValue: string | undefined;
+        id: string;
+        maxLength: number | undefined;
+        name: string;
+        onBlur: (e: import("react").ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+        onChange: (e: import("react").ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+        onFocus: (e: import("react").FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+        onKeyDown: (e: import("react").KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+        placeholder: string | undefined;
+        ref: RefType<HTMLInputElement>;
+        size: number;
+        type: string;
+        value: string | undefined;
+    };
+    fieldProps: {
+        caption: import("react").ReactNode;
+        error: string | undefined;
+        label: import("react").ReactNode;
+        id: string;
+        name: string;
+    };
+};
+export {};

package/dist/forms/TimeField/TimeField.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { Props as TextFieldProps } from '../TextField/TextField';
+/**
+ * `TimeField` are like `TextField` but it auto-format the value when the user leaves the field.
+ *
+ * At the end, it is just a string formatted nicely. **You are in charge of validating the value and parsing it back to a value that you can use on your application**.
+ */
+declare const TimeField: React.ForwardRefExoticComponent<Pick<TextFieldProps, "disabled" | "id" | "caption" | "label" | "error" | "onChange" | "name" | "value" | "onBlur" | "placeholder" | "autoFocus" | "onFocus" | "onKeyDown" | "defaultValue" | "autoComplete" | "maxLength"> & React.RefAttributes<HTMLInputElement>>;
+export default TimeField;

package/dist/forms/TimeField/index.d.ts

@@ -0,0 +1 @@
+export { default } from './TimeField';

package/dist/forms/index.d.ts

@@ -12,7 +12,8 @@ import SelectField from './SelectField';
 import DateField from './DateField';
 import DateRangeField from './DateRangeField';
 import WeekField from './WeekField';
-export { Form, FormRow, TextAreaField, TextField, CheckboxField, PillSelectField, RadioGroupField, RadioGroupOption, PasswordField, MultiSelectField, SelectField, DateField, DateRangeField, WeekField, SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PERCENT, SIZE_75_PERCENT };
+import TimeField from './TimeField';
+export { Form, FormRow, TextAreaField, TextField, CheckboxField, PillSelectField, RadioGroupField, RadioGroupOption, PasswordField, MultiSelectField, SelectField, DateField, DateRangeField, WeekField, TimeField, SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PERCENT, SIZE_75_PERCENT };
 export type { PasswordCriteria } from './PasswordField/types';
 export type { SelectOption, SelectOptions } from './SelectField/types';
 export type { FormikType } from './Form/types';

package/dist/icons/components/IconGavel.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { IconSize } from '../types';
+declare type Props = {
+    size?: IconSize;
+    color?: string;
+} & React.SVGProps<SVGSVGElement>;
+declare const IconGavel: {
+    (props: Props): JSX.Element;
+    displayName: string;
+};
+export default IconGavel;

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

@@ -56,6 +56,7 @@ export { default as IconFile } from './IconFile';
 export { default as IconFlag } from './IconFlag';
 export { default as IconFourDotsCircle } from './IconFourDotsCircle';
 export { default as IconFourSquares } from './IconFourSquares';
+export { default as IconGavel } from './IconGavel';
 export { default as IconGift } from './IconGift';
 export { default as IconGrinBeam } from './IconGrinBeam';
 export { default as IconGripVertical } from './IconGripVertical';

package/dist/index.css

@@ -1571,6 +1571,7 @@ Please ask a designer if you have questions about which colours to use.
 ._1Sc9D {
   padding-top: 8px;
   padding-bottom: 6px;
+  width: 100%;
 }
 /*********************************
 For new colours, see _colors.scss.

package/dist/index.js

@@ -12,6 +12,7 @@ var dateFnsFormat = _interopDefault(require('date-fns/format'));
 var dateFnsParse = _interopDefault(require('date-fns/parse'));
 var startOfDay = _interopDefault(require('date-fns/startOfDay'));
 var eachDayOfInterval = _interopDefault(require('date-fns/eachDayOfInterval'));
+var parseTime = _interopDefault(require('time-autocomplete/src/core/AMPMParser'));
 var ReactModal = _interopDefault(require('react-modal'));
 
 function _extends() {
@@ -239,8 +240,8 @@ var updateMisalignedOverlay = function updateMisalignedOverlay(overlayPosition,
   if (overlayPosition.left > arrowPosition.left) {
     left = arrowPosition.left - ARROW_MARGIN;
   } else if (overlayPosition.left + tooltipRectPosition.width < arrowPosition.left + ARROW_WIDTH) {
-    left = arrowPosition.left - tooltipRectPosition.width + ARROW_WIDTH + ARROW_MARGIN;
-  }
+      left = arrowPosition.left - tooltipRectPosition.width + ARROW_WIDTH + ARROW_MARGIN;
+    }
 
   return _extends({}, overlayPosition, {
     left: left
@@ -1784,6 +1785,21 @@ var IconFourSquares = function IconFourSquares(props) {
 
 IconFourSquares.displayName = 'IconFourSquares';
 
+var IconGavel = function IconGavel(props) {
+  return React__default.createElement("svg", Object.assign({
+    viewBox: "0 0 60 60",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "data-testid": "icon-gavel",
+    style: getIconStyles(props)
+  }, props), React__default.createElement("path", {
+    d: "m58.698 21.863-2.418-2.42a4.442 4.442 0 0 0-5.476-.638l-9.61-9.609a4.442 4.442 0 0 0-.638-5.476l-2.418-2.418a4.438 4.438 0 0 0-6.28 0L18.551 14.605a4.446 4.446 0 0 0 0 6.28l2.42 2.42a4.448 4.448 0 0 0 5.475.637l3.48 3.48-6.891 6.89-.947-.946a5.095 5.095 0 0 0-7.198 0l-13.403 13.4a5.095 5.095 0 0 0 0 7.198l4.548 4.548a5.095 5.095 0 0 0 7.197 0l13.401-13.403a5.095 5.095 0 0 0 0-7.198l-.947-.947 6.891-6.89 3.48 3.479a4.449 4.449 0 0 0 .637 5.476l2.42 2.419a4.446 4.446 0 0 0 6.28 0l13.303-13.305a4.439 4.439 0 0 0 0-6.28ZM23.983 42.457l-13.401 13.4a1.34 1.34 0 0 1-1.894 0l-4.546-4.545a1.34 1.34 0 0 1 0-1.894l13.401-13.4a1.34 1.34 0 0 1 1.894 0l4.546 4.545a1.341 1.341 0 0 1 0 1.894Zm32.065-16.966L42.743 38.796a.69.69 0 0 1-.977 0l-2.42-2.42a.691.691 0 0 1 0-.976l1.932-1.93L26.53 18.721l-1.93 1.931a.692.692 0 0 1-.978 0l-2.419-2.419a.692.692 0 0 1 0-.977L34.51 3.952a.691.691 0 0 1 .977 0l2.419 2.42a.691.691 0 0 1 0 .976l-1.93 1.931L50.72 24.026l1.931-1.93a.69.69 0 0 1 .977 0l2.419 2.418a.692.692 0 0 1 0 .977Z",
+    fill: "currentColor"
+  }));
+};
+
+IconGavel.displayName = 'IconGavel';
+
 var IconGift = function IconGift(props) {
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
@@ -1807,9 +1823,6 @@ var IconGrinBeam = function IconGrinBeam(props) {
     "data-testid": "icon-grin-beam",
     style: getIconStyles(props)
   }, props), React__default.createElement("path", {
-    fill: "#fff",
-    d: "M0 0h20v20H0z"
-  }), React__default.createElement("path", {
     d: "M4.746 9.676a.335.335 0 0 0 .375-.145l.383-.664c.31-.535.774-.844 1.27-.844s.96.309 1.27.844l.383.664c.085.145.25.184.375.145a.314.314 0 0 0 .23-.324c-.133-1.645-1.298-2.79-2.258-2.79S4.65 7.707 4.516 9.352a.317.317 0 0 0 .23.324Zm6.452 0a.335.335 0 0 0 .375-.145l.383-.664c.31-.535.774-.844 1.27-.844s.96.309 1.27.844l.383.664c.085.145.25.184.375.145a.314.314 0 0 0 .23-.324c-.133-1.645-1.299-2.79-2.258-2.79-.96 0-2.125 1.145-2.258 2.79a.317.317 0 0 0 .23.324Zm3.766 2.855c-1.218.38-3.029.594-4.964.594-1.935 0-3.746-.215-4.964-.594a.662.662 0 0 0-.617.121.62.62 0 0 0-.213.579c.37 2.148 3.354 3.644 5.798 3.644s5.423-1.496 5.798-3.645a.624.624 0 0 0-.213-.578.66.66 0 0 0-.625-.12ZM10 15.625c-1.411 0-3.105-.637-3.972-1.574 2.319.422 5.63.422 7.948 0-.871.937-2.565 1.574-3.976 1.574ZM10 .312C4.476.313 0 4.649 0 10s4.476 9.688 10 9.688S20 15.351 20 10 15.524.312 10 .312Zm0 18.125c-4.802 0-8.71-3.785-8.71-8.437 0-4.652 3.908-8.438 8.71-8.438 4.802 0 8.71 3.786 8.71 8.438 0 4.652-3.908 8.438-8.71 8.438Z",
     fill: "currentColor"
   }));
@@ -3910,30 +3923,29 @@ var TextAreaField = function TextAreaField(_ref) {
 
 var styles$j = {"text-field":"_20YOA","text-field--invalid":"_3kUSh","text-field--prefixed":"_3IU3Q","text-field--suffixed":"_QXJOD"};
 
-var TextFieldElement = function TextFieldElement(_ref, ref) {
+var useTextField = function useTextField(_ref) {
   var _classnames;
 
   var autoComplete = _ref.autoComplete,
       autoFocus = _ref.autoFocus,
-      caption = _ref.caption,
       defaultValue = _ref.defaultValue,
       disabled = _ref.disabled,
       error = _ref.error,
-      inputId = _ref.id,
-      label = _ref.label,
+      id = _ref.id,
       maxLength = _ref.maxLength,
       name = _ref.name,
+      caption = _ref.caption,
+      label = _ref.label,
       onBlur = _ref.onBlur,
       onChange = _ref.onChange,
       onFocus = _ref.onFocus,
       onKeyDown = _ref.onKeyDown,
       placeholder = _ref.placeholder,
-      prefix = _ref.prefix,
-      suffix = _ref.suffix,
-      value = _ref.value;
+      value = _ref.value,
+      ref = _ref.ref;
   var controllers = useFieldControllers({
     error: error,
-    id: inputId,
+    id: id,
     name: name,
     onChange: onChange,
     onBlur: onBlur,
@@ -3942,23 +3954,13 @@ var TextFieldElement = function TextFieldElement(_ref, ref) {
     value: value
   });
   var hasError = !!controllers.error;
-  var fieldProps = {
-    caption: caption,
-    error: controllers.error,
-    label: label,
-    id: controllers.id,
-    name: name
-  };
-  return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement(AffixContainer, {
-    prefix: prefix,
-    suffix: suffix
-  }, React__default.createElement("input", {
-    "aria-describedby": hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
-    "aria-invalid": hasError,
+  var inputProps = {
+    'aria-describedby': hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
+    'aria-invalid': hasError,
     autoComplete: autoComplete,
     autoFocus: autoFocus,
     className: classnames(styles$j['text-field'], (_classnames = {}, _classnames[styles$j['text-field--invalid']] = hasError, _classnames)),
-    "data-testid": "text-field-" + name,
+    'data-testid': "text-field-" + name,
     disabled: disabled,
     defaultValue: defaultValue,
     id: controllers.id,
@@ -3971,9 +3973,39 @@ var TextFieldElement = function TextFieldElement(_ref, ref) {
     placeholder: placeholder,
     ref: ref,
     size: 1,
-    type: "text",
+    type: 'text',
     value: controllers.value
-  })));
+  };
+  var fieldProps = {
+    caption: caption,
+    error: controllers.error,
+    label: label,
+    id: inputProps.id,
+    name: name
+  };
+  return {
+    inputProps: inputProps,
+    fieldProps: fieldProps
+  };
+};
+
+var _excluded$2 = ["prefix", "suffix"];
+
+var TextFieldElement = function TextFieldElement(_ref, ref) {
+  var prefix = _ref.prefix,
+      suffix = _ref.suffix,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+
+  var _useTextField = useTextField(_extends({}, props, {
+    ref: ref
+  })),
+      inputProps = _useTextField.inputProps,
+      fieldProps = _useTextField.fieldProps;
+
+  return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement(AffixContainer, {
+    prefix: prefix,
+    suffix: suffix
+  }, React__default.createElement("input", Object.assign({}, inputProps))));
 };
 
 var TextField = React.forwardRef(TextFieldElement);
@@ -4482,7 +4514,7 @@ var getSelectStyles = function getSelectStyles(_ref) {
       return Object.assign({}, base, {
         flex: '1',
         fontFamily: FONT_FAMILY,
-        minWidth: '64px',
+        minWidth: '110px',
         backgroundColor: state.isDisabled && !asToolbarFilter ? GREY100 : WHITE,
         position: 'initial'
       });
@@ -4527,11 +4559,12 @@ var getSelectStyles = function getSelectStyles(_ref) {
       return Object.assign({}, base, {
         color: state.isDisabled ? GREY400 : null,
         marginRight: 0,
-        position: 'static',
+        position: asToolbarFilter ? 'static' : 'absolute',
         transform: 'initial',
         overflow: 'hidden',
         textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap'
+        whiteSpace: 'nowrap',
+        top: !asToolbarFilter && 'auto'
       });
     },
     dropdownIndicator: function dropdownIndicator(base, state) {
@@ -4546,7 +4579,8 @@ var getSelectStyles = function getSelectStyles(_ref) {
         color: state.isDisabled ? GREY400 : state.isSelected ? EGGPLANT700 : GREY500,
         cursor: 'pointer',
         fontFamily: FONT_FAMILY,
-        fontSize: '14px'
+        fontSize: '14px',
+        wordBreak: 'break-word'
       });
     },
     group: function group(base) {
@@ -4583,12 +4617,12 @@ var getSelectStyles = function getSelectStyles(_ref) {
   };
 };
 
-var _excluded$2 = ["children", "CustomComponent"];
+var _excluded$3 = ["children", "CustomComponent"];
 
 function CustomOption(_ref) {
   var children = _ref.children,
       CustomComponent = _ref.CustomComponent,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
   return React__default.createElement(Select.components.Option, Object.assign({}, props), React__default.createElement(CustomComponent, Object.assign({}, props), children));
 }
@@ -4607,7 +4641,9 @@ var MultiSelectField = function MultiSelectField(_ref) {
       placeholder = _ref.placeholder,
       disabled = _ref.disabled,
       _ref$closeOnSelect = _ref.closeOnSelect,
-      closeOnSelect = _ref$closeOnSelect === void 0 ? false : _ref$closeOnSelect;
+      closeOnSelect = _ref$closeOnSelect === void 0 ? false : _ref$closeOnSelect,
+      _ref$menuShouldScroll = _ref.menuShouldScrollIntoView,
+      menuShouldScrollIntoView = _ref$menuShouldScroll === void 0 ? true : _ref$menuShouldScroll;
   var controllers = useMultiSelectFieldControllers({
     name: name,
     id: inputId,
@@ -4645,6 +4681,18 @@ var MultiSelectField = function MultiSelectField(_ref) {
           CustomComponent: UserCustomOption
         }, props));
       } : Select.components.Option
+    },
+    menuShouldScrollIntoView: menuShouldScrollIntoView,
+    menuPlacement: menuShouldScrollIntoView ? 'bottom' : 'auto',
+    menuPosition: menuShouldScrollIntoView ? 'absolute' : 'fixed',
+    closeMenuOnScroll: function closeMenuOnScroll(e) {
+      if (menuShouldScrollIntoView || !e.target) {
+        return false;
+      }
+
+      var target = e.target;
+      var isScrollingTheMenu = typeof target.className === 'string' && target.className.includes('MenuList');
+      return !isScrollingTheMenu;
     }
   }));
 };
@@ -4703,14 +4751,14 @@ var useSelectFieldControllers = function useSelectFieldControllers(_ref) {
 
 var styles$q = {"custom-control":"_1cDCR"};
 
-var _excluded$3 = ["children", "CustomPrefixComponent"];
+var _excluded$4 = ["children", "CustomPrefixComponent"];
 
 function CustomControl(_ref) {
   var _props$getValue;
 
   var children = _ref.children,
       CustomPrefixComponent = _ref.CustomPrefixComponent,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
 
   var selectedOption = (_props$getValue = props.getValue()) === null || _props$getValue === void 0 ? void 0 : _props$getValue[0];
   return React__default.createElement(Select.components.Control, Object.assign({}, props), CustomControl && selectedOption ? React__default.createElement("div", {
@@ -4727,12 +4775,12 @@ function CustomControl(_ref) {
   }, props)), children)) : children);
 }
 
-var _excluded$4 = ["children", "CustomComponent"];
+var _excluded$5 = ["children", "CustomComponent"];
 
 function CustomOption$1(_ref) {
   var children = _ref.children,
       CustomComponent = _ref.CustomComponent,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
 
   return React__default.createElement(Select.components.Option, Object.assign({}, props), React__default.createElement(CustomComponent, Object.assign({}, props), children));
 }
@@ -4753,7 +4801,9 @@ var SelectField = function SelectField(_ref) {
       disabled = _ref.disabled,
       prefix = _ref.prefix,
       _ref$asToolbarFilter = _ref.asToolbarFilter,
-      asToolbarFilter = _ref$asToolbarFilter === void 0 ? false : _ref$asToolbarFilter;
+      asToolbarFilter = _ref$asToolbarFilter === void 0 ? false : _ref$asToolbarFilter,
+      _ref$menuShouldScroll = _ref.menuShouldScrollIntoView,
+      menuShouldScrollIntoView = _ref$menuShouldScroll === void 0 ? true : _ref$menuShouldScroll;
   var controllers = useSelectFieldControllers({
     name: name,
     id: inputId,
@@ -4796,6 +4846,18 @@ var SelectField = function SelectField(_ref) {
           CustomPrefixComponent: SelectedOptionPrefix
         }, props));
       } : Select.components.Control
+    },
+    menuShouldScrollIntoView: menuShouldScrollIntoView,
+    menuPlacement: menuShouldScrollIntoView ? 'bottom' : 'auto',
+    menuPosition: menuShouldScrollIntoView ? 'absolute' : 'fixed',
+    closeMenuOnScroll: function closeMenuOnScroll(e) {
+      if (menuShouldScrollIntoView || !e.target) {
+        return false;
+      }
+
+      var target = e.target;
+      var isScrollingTheMenu = typeof target.className === 'string' && target.className.includes('MenuList');
+      return !isScrollingTheMenu;
     }
   })));
 };
@@ -5388,6 +5450,34 @@ var WeekField = function WeekField(_ref) {
   })));
 };
 
+var _excluded$6 = ["placeholder", "autoComplete"];
+
+var TimeFieldElement = function TimeFieldElement(_ref, ref) {
+  var _ref$placeholder = _ref.placeholder,
+      placeholder = _ref$placeholder === void 0 ? '9am' : _ref$placeholder,
+      _ref$autoComplete = _ref.autoComplete,
+      autoComplete = _ref$autoComplete === void 0 ? 'off' : _ref$autoComplete,
+      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+
+  var _useTextField = useTextField(_extends({}, allOtherProps, {
+    placeholder: placeholder,
+    autoComplete: autoComplete,
+    ref: ref
+  })),
+      inputProps = _useTextField.inputProps,
+      fieldProps = _useTextField.fieldProps;
+
+  return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement("input", Object.assign({}, inputProps, {
+    onBlur: function onBlur(e) {
+      e.target.value = parseTime(e.target.value, 'g:i A');
+      inputProps.onChange(e);
+      inputProps.onBlur(e);
+    }
+  })));
+};
+
+var TimeField = React.forwardRef(TimeFieldElement);
+
 var styles$u = {"caption":"_1QDLF","label":"_2wiMV","toggle":"_1ui8X","toggle__label":"_1YRJT","toggle__caption":"_1jEiW","toggle__switch":"_3tNyE"};
 
 var Toggle = function Toggle(_ref) {
@@ -5561,7 +5651,7 @@ var FooterContainer = function FooterContainer(_ref2) {
 
 var styles$z = {"badge":"_2f81N","badge--warning":"_2g1GI","badge--danger":"_2zLnM","badge--success":"_27QOo","badge--info":"_2gmsM"};
 
-var _excluded$5 = ["children", "theme", "title"];
+var _excluded$7 = ["children", "theme", "title"];
 
 var Badge = function Badge(_ref, forwardedRef) {
   var _classnames;
@@ -5569,7 +5659,7 @@ var Badge = function Badge(_ref, forwardedRef) {
   var children = _ref.children,
       theme = _ref.theme,
       title = _ref.title,
-      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$7);
 
   var internalRef = React.useRef(null);
   var ref = forwardedRef || internalRef;
@@ -5769,6 +5859,7 @@ exports.IconFilePdf = IconFilePdf;
 exports.IconFlag = IconFlag;
 exports.IconFourDotsCircle = IconFourDotsCircle;
 exports.IconFourSquares = IconFourSquares;
+exports.IconGavel = IconGavel;
 exports.IconGift = IconGift;
 exports.IconGrinBeam = IconGrinBeam;
 exports.IconGripVertical = IconGripVertical;
@@ -5852,6 +5943,7 @@ exports.Spinner = Spinner;
 exports.Stack = Stack;
 exports.TextAreaField = TextAreaField;
 exports.TextField = TextField;
+exports.TimeField = TimeField;
 exports.Toggle = Toggle;
 exports.Tooltip = Tooltip$1;
 exports.WeekField = WeekField;