@7shifts/sous-chef 3.10.3 → 3.11.0

package/dist/index.modern.js

@@ -10,13 +10,13 @@ import dateFnsFormat from 'date-fns/format';
 import dateFnsParse from 'date-fns/parse';
 import startOfDay from 'date-fns/startOfDay';
 import { debounce } from 'lodash-es';
+import parseTime from 'time-autocomplete/src/core/AMPMParser';
 import Select, { components } from 'react-select';
 import { Link as Link$1 } from 'react-router-dom';
 import AsyncSelect from 'react-select/async';
 import DayPickerInput from 'react-day-picker/DayPickerInput';
 import { isDate, startOfDay as startOfDay$1 } from 'date-fns';
 import eachDayOfInterval from 'date-fns/eachDayOfInterval';
-import parseTime from 'time-autocomplete/src/core/AMPMParser';
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -4442,6 +4442,7 @@ var PaneOverlay = function PaneOverlay(_ref) {
   var _classNames;
 
   var width = _ref.width,
+      maxHeight = _ref.maxHeight,
       alignment = _ref.alignment,
       onMouseEnter = _ref.onMouseEnter,
       onMouseLeave = _ref.onMouseLeave,
@@ -4462,7 +4463,7 @@ var PaneOverlay = function PaneOverlay(_ref) {
   }, []);
   useOnClickOutside([paneRef, triggerRef], clickOutsideCallback);
   useLayoutEffect(function () {
-    if (!(triggerRef !== null && triggerRef !== void 0 && triggerRef.current) || !(paneRef !== null && paneRef !== void 0 && paneRef.current)) {
+    if (!triggerRef || !('current' in triggerRef) || !(triggerRef !== null && triggerRef !== void 0 && triggerRef.current) || !(paneRef !== null && paneRef !== void 0 && paneRef.current)) {
       return;
     }
 
@@ -4473,10 +4474,13 @@ var PaneOverlay = function PaneOverlay(_ref) {
   }, [triggerRef]);
   var handleEscapeKey = useCallback(onToggleDropdown, []);
   useKeyPress(['Escape'], handleEscapeKey);
+  var overflow = maxHeight ? 'scroll' : undefined;
   return React__default.createElement("div", {
     className: classnames(styles$b['dropdown-pane'], (_classNames = {}, _classNames[styles$b['dropdown-pane--with-padding']] = true, _classNames)),
     style: _extends({}, position, {
-      width: width
+      width: width,
+      maxHeight: maxHeight,
+      overflow: overflow
     }),
     ref: paneRef,
     onMouseEnter: onMouseEnter,
@@ -4512,1151 +4516,1369 @@ var DROPDOWN_TRIGGER = {
   CLICK: 'click'
 };
 
-var Dropdown = function Dropdown(_ref) {
-  var trigger = _ref.trigger,
-      _ref$triggersOn = _ref.triggersOn,
-      triggersOn = _ref$triggersOn === void 0 ? DROPDOWN_TRIGGER.CLICK : _ref$triggersOn,
-      _ref$alignment = _ref.alignment,
-      alignment = _ref$alignment === void 0 ? DROPDOWN_ALIGNEMNT.RIGHT : _ref$alignment,
-      width = _ref.width,
-      testId = _ref.testId,
-      children = _ref.children;
-
-  var _useState = useState(false),
-      isOpen = _useState[0],
-      setIsOpen = _useState[1];
-
-  var triggerRef = useRef(null);
-  var paneRef = useRef(null);
-  var isFocusingOverlay = useRef(false);
-
-  var handleToggleDropdown = function handleToggleDropdown() {
-    return setIsOpen(!isOpen);
-  };
-
-  var handleMouseClick = function handleMouseClick(e) {
-    handleToggleDropdown();
-    e.stopPropagation();
-
-    if ('onClick' in trigger.props) {
-      trigger.props.onClick(e);
-    }
-  };
+var styles$d = {"overlay":"_2puqJ","overlay--after-open":"_1167h","overlay--before-close":"_t_t7L","content":"_wQQ_2","content--after-open":"_3jwux","content--before-close":"_2c2QP"};
 
-  var handleMouseEnter = function handleMouseEnter(e) {
-    if (triggersOn !== 'hover') {
-      return;
-    }
+var styles$e = {"header":"_36nxW","header__close-button":"_2zYre","sub-header":"_2XwRD"};
 
-    setIsOpen(true);
+var ModalHeader = function ModalHeader(_ref) {
+  var header = _ref.header,
+      subHeader = _ref.subHeader,
+      onClose = _ref.onClose,
+      loading = _ref.loading;
 
-    if ('onMouseEnter' in trigger.props) {
-      trigger.props.onMouseEnter(e);
-    }
-  };
+  if (!header && !subHeader) {
+    return onClose ? React__default.createElement("div", {
+      className: styles$e['header__close-button']
+    }, React__default.createElement(Button$1, {
+      theme: "link-icon",
+      onClick: onClose,
+      disabled: loading
+    }, React__default.createElement(IconTimes, null))) : null;
+  }
 
-  var handleFocus = function handleFocus(e) {
-    if (triggersOn !== 'hover') {
-      return;
-    }
+  return React__default.createElement(Stack, {
+    space: 12,
+    marginBottom: 24
+  }, React__default.createElement(Inline, {
+    flex: [1],
+    alignItems: "center"
+  }, React__default.createElement("span", {
+    className: styles$e['header']
+  }, header), onClose && React__default.createElement(Button$1, {
+    theme: "link-icon",
+    onClick: onClose,
+    disabled: loading
+  }, React__default.createElement(IconTimes, null))), subHeader && React__default.createElement("div", {
+    className: styles$e['sub-header']
+  }, subHeader));
+};
 
-    setIsOpen(true);
+var ModalContext = createContext({
+  isModalMounted: false
+});
+var useModalContext = function useModalContext() {
+  var context = useContext(ModalContext);
+  return context || {};
+};
 
-    if ('onMouseEnter' in trigger.props) {
-      trigger.props.onMouseEnter(e);
+var Modal = function Modal(_ref) {
+  var children = _ref.children,
+      header = _ref.header,
+      subHeader = _ref.subHeader,
+      onClose = _ref.onClose,
+      loading = _ref.loading,
+      _ref$zIndex = _ref.zIndex,
+      zIndex = _ref$zIndex === void 0 ? Z_INDEX_LAYERS.MODAL : _ref$zIndex,
+      rootElementId = _ref.rootElementId,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 500 : _ref$width,
+      height = _ref.height,
+      maxWidth = _ref.maxWidth,
+      _ref$shouldReturnFocu = _ref.shouldReturnFocusAfterClose,
+      shouldReturnFocusAfterClose = _ref$shouldReturnFocu === void 0 ? true : _ref$shouldReturnFocu,
+      testId = _ref.testId;
+  var style = {
+    content: {
+      width: width,
+      height: height,
+      maxWidth: maxWidth
+    },
+    overlay: {
+      zIndex: zIndex
     }
   };
-
-  var handleMouseLeave = function handleMouseLeave(e) {
-    if (triggersOn !== 'hover' || !paneRef.current) {
-      return;
+  return React__default.createElement(ReactModal, {
+    isOpen: true,
+    testId: testId,
+    shouldCloseOnEsc: true,
+    shouldCloseOnOverlayClick: false,
+    shouldReturnFocusAfterClose: shouldReturnFocusAfterClose,
+    onRequestClose: onClose && !loading ? onClose : undefined,
+    style: style,
+    closeTimeoutMS: 200,
+    contentLabel: "Modal",
+    appElement: rootElementId && document.getElementById(rootElementId) || undefined,
+    overlayClassName: {
+      base: styles$d['overlay'],
+      afterOpen: styles$d['overlay--after-open'],
+      beforeClose: styles$d['overlay--before-close']
+    },
+    className: {
+      base: styles$d['content'],
+      afterOpen: styles$d['content--after-open'],
+      beforeClose: styles$d['content--before-close']
     }
-
-    var panePosition = paneRef.current.getBoundingClientRect();
-
-    if (!isGoingTowardsPane(panePosition, e.clientY)) {
-      setIsOpen(false);
-
-      if ('onMouseLeave' in trigger.props) {
-        trigger.props.onMouseLeave && trigger.props.onMouseLeave(e);
-      }
+  }, React__default.createElement(ModalHeader, {
+    header: header,
+    subHeader: subHeader,
+    onClose: onClose,
+    loading: loading
+  }), React__default.createElement(ModalContext.Provider, {
+    value: {
+      isModalMounted: true
     }
-  };
+  }, children));
+};
 
-  var handlePaneMouseEnter = function handlePaneMouseEnter() {
-    isFocusingOverlay.current = true;
-  };
+Modal.setAppElement = function (rootElement) {
+  ReactModal.setAppElement(rootElement);
+};
 
-  var handlePaneMouseLeave = function handlePaneMouseLeave() {
-    isFocusingOverlay.current = false;
+var THRESHOLD = 20;
+var useScrollShadow = function useScrollShadow() {
+  var ref = useRef(null);
 
-    if (triggersOn === 'hover') {
-      setIsOpen(false);
-    }
-  };
+  var _useState = useState(false),
+      showScrollShadow = _useState[0],
+      setShowScrollShadow = _useState[1];
 
-  var handleOnBlur = function handleOnBlur() {
-    if (!paneRef || !(paneRef !== null && paneRef !== void 0 && paneRef.current)) {
+  useEffect(function () {
+    if (!ref.current) {
       return;
     }
 
-    var focusableElements = getKeyboardFocusableElements(paneRef.current);
+    var modalBody = ref.current;
 
-    if (focusableElements.length > 0) {
-      window.setTimeout(function () {
-        return focusableElements[0].focus();
-      }, 0);
-    } else if (!isFocusingOverlay.current) {
-      setIsOpen(false);
+    if (modalBody.offsetHeight > THRESHOLD) {
+      setShowScrollShadow(true);
     }
+  }, []);
+  return {
+    ref: ref,
+    showScrollShadow: showScrollShadow
   };
-
-  var triggerProps = {
-    onClick: handleMouseClick,
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
-    onBlur: handleOnBlur,
-    onFocus: handleFocus,
-    ref: triggerRef
-  };
-  return React__default.createElement(DropdownContext.Provider, {
-    value: {
-      isOpen: isOpen,
-      onToggleDropdown: handleToggleDropdown,
-      triggerRef: triggerRef,
-      paneRef: paneRef
-    }
-  }, trigger.type === Button$1 ? React__default.cloneElement(trigger, _extends({}, trigger.props, triggerProps)) : React__default.createElement("button", Object.assign({}, triggerProps, {
-    className: styles$c['dropdown__trigger'],
-    onFocus: handleFocus
-  }), trigger), React__default.createElement(DropdownPane, {
-    width: width,
-    onMouseEnter: handlePaneMouseEnter,
-    onMouseLeave: handlePaneMouseLeave,
-    alignment: alignment,
-    testId: testId
-  }, children));
 };
 
-var styles$d = {"dropdown-list":"_1v1df","dropdown-list__item--hover":"_eAjpa"};
-
-var findNextActiveIndex = function findNextActiveIndex(items, startAt) {
-  var startIndex = 0;
+var styles$f = {"modal-body":"_2J-ku","modal-body--with-scroll-shadow":"_2ErCP"};
 
-  if (startAt !== null && startAt + 1 <= items.length) {
-    startIndex = startAt + 1;
-  }
+var ModalBody = function ModalBody(_ref) {
+  var _classNames;
 
-  var hasEnabledItems = items.slice(startIndex).some(function (item) {
-    return !item.disabled;
-  });
+  var children = _ref.children,
+      testId = _ref.testId;
 
-  if (hasEnabledItems) {
-    var _nextEnabledIndex = items.findIndex(function (item, index) {
-      if (index < startIndex) {
-        return false;
-      }
+  var _useScrollShadow = useScrollShadow(),
+      ref = _useScrollShadow.ref,
+      showScrollShadow = _useScrollShadow.showScrollShadow;
 
-      return !item.disabled;
-    });
+  return React__default.createElement("div", {
+    className: classnames(styles$f['modal-body'], (_classNames = {}, _classNames[styles$f['modal-body--with-scroll-shadow']] = showScrollShadow, _classNames)),
+    ref: ref,
+    "data-testid": testId
+  }, children);
+};
 
-    return _nextEnabledIndex;
-  }
+var styles$g = {"modal-footer":"_LKOr5","tertiary-container":"_Qktd-"};
 
-  var nextEnabledIndex = items.findIndex(function (item) {
-    return !item.disabled;
-  });
-  return nextEnabledIndex >= 0 ? nextEnabledIndex : null;
-};
-var findPreviousEnabledIndex = function findPreviousEnabledIndex(items, startAt) {
-  for (var i = startAt - 1; i >= 0; i--) {
-    if (!items[i].disabled) {
-      return i;
-    }
+var updateButtonProps = function updateButtonProps(button, newProps) {
+  if (!button) {
+    return null;
   }
 
-  for (var _i = items.length - 1; _i > startAt - 1; _i--) {
-    if (!items[_i].disabled) {
-      return _i;
-    }
+  if (button.type !== Button$1) {
+    return button;
   }
 
-  return null;
+  return React__default.cloneElement(button, _extends({}, newProps));
 };
 
-var useListKeyboardNavigation = function useListKeyboardNavigation(listItems, actions) {
-  var _useState = useState(null),
-      focusedItem = _useState[0],
-      setFocusedItem = _useState[1];
-
-  var focusOnNextItem = function focusOnNextItem() {
-    setFocusedItem(findNextActiveIndex(listItems, focusedItem));
-  };
+var ModalFooter = function ModalFooter(_ref) {
+  var children = _ref.children,
+      actions = _ref.actions,
+      testId = _ref.testId;
 
-  var focusOnPrevItem = function focusOnPrevItem() {
-    setFocusedItem(findPreviousEnabledIndex(listItems, focusedItem || 0));
-  };
+  if (actions) {
+    var _actions$primary, _actions$secondary, _actions$tertiary, _classnames;
 
-  var setFocusOnItem = function setFocusOnItem(index) {
-    if (listItems[index].disabled) {
-      return;
-    }
-
-    setFocusedItem(index);
-  };
+    var primaryButton = updateButtonProps(actions.primary, {
+      theme: (actions === null || actions === void 0 ? void 0 : (_actions$primary = actions.primary) === null || _actions$primary === void 0 ? void 0 : _actions$primary.props.theme) || 'primary',
+      size: BUTTON_SIZES.MIN_WIDTH_100
+    });
+    var secondaryButton = updateButtonProps(actions.secondary, {
+      theme: (actions === null || actions === void 0 ? void 0 : (_actions$secondary = actions.secondary) === null || _actions$secondary === void 0 ? void 0 : _actions$secondary.props.theme) || 'default',
+      size: BUTTON_SIZES.MIN_WIDTH_100
+    });
+    var tertiaryButton = updateButtonProps(actions.tertiary, {
+      theme: (actions === null || actions === void 0 ? void 0 : (_actions$tertiary = actions.tertiary) === null || _actions$tertiary === void 0 ? void 0 : _actions$tertiary.props.theme) || 'link-primary',
+      size: BUTTON_SIZES.MIN_WIDTH_100
+    });
+    return React__default.createElement(FooterContainer, {
+      testId: testId
+    }, React__default.createElement(Inline, {
+      justifyContent: "space-between"
+    }, React__default.createElement("div", {
+      className: classnames((_classnames = {}, _classnames[styles$g['tertiary-container']] = tertiaryButton && tertiaryButton.props.theme.startsWith('link'), _classnames))
+    }, tertiaryButton || React__default.createElement("div", null)), React__default.createElement(Inline, {
+      space: 12
+    }, secondaryButton, primaryButton)));
+  }
 
-  var handleKeyPress = useCallback(function (event) {
-    if (event.key === 'ArrowDown') {
-      focusOnNextItem();
-    }
+  return React__default.createElement(FooterContainer, null, children);
+};
 
-    if (event.key === 'ArrowUp') {
-      focusOnPrevItem();
-    }
+var FooterContainer = function FooterContainer(_ref2) {
+  var children = _ref2.children,
+      testId = _ref2.testId;
+  var childrenItens = React__default.Children.toArray(children);
+  var hasCustomAlignment = childrenItens.length === 1 && childrenItens[0].type === Inline;
+  return React__default.createElement("div", {
+    className: styles$g['modal-footer'],
+    "data-testid": testId
+  }, React__default.createElement(Inline, {
+    justifyContent: "end",
+    space: 12,
+    flex: hasCustomAlignment ? [1] : undefined
+  }, children));
+};
 
-    if (event.key === 'Enter' && focusedItem !== null) {
-      var _actions$onPressEnter;
+var styles$h = {"container":"_v1b-5","wrapper":"_3mrLu","interactionDisabled":"_1J9dh","DayPicker-Day":"_8FcQE","navBar":"_1SPuq","todayButton":"_24FJ6","navButtonInteractionDisabled":"_Oxdm9","navButtonPrev":"_20uqc","navButtonNext":"_3C53z","months":"_M_eHz","month":"_3RPpJ","caption":"_1FXNw","weekdays":"_3KcRU","weekdaysRow":"_1fO_e","weekday":"_c1Y-X","body":"_34mA1","week":"_1PmqZ","day":"_1AWH2","disabled":"_3vJkw","selected":"_1DR0N","outside":"_276GV","footer":"_2M5xr","today":"_3N6fj","overlayWrapper":"_3Zqgu","overlay":"_20Ncd","weekNumber":"_2hb-S"};
 
-      var onClick = listItems[focusedItem].onClick;
-      onClick(event);
-      actions && ((_actions$onPressEnter = actions.onPressEnter) === null || _actions$onPressEnter === void 0 ? void 0 : _actions$onPressEnter.call(actions));
-    }
+var styles$i = {"container":"_okDvi","wrapper":"_17XdD","interactionDisabled":"_1O7OT","DayPicker-Day":"_3noGA","navBar":"_1Hl3Q","todayButton":"_m0Vs9","navButtonInteractionDisabled":"_1ULWH","navButtonPrev":"_3gjq8","navButtonNext":"_1m-Kd","months":"_Fq6Xh","month":"_3i0Oo","caption":"_36X9Y","weekdays":"_1aWPn","weekdaysRow":"_3HXCK","weekday":"_t-ctd","body":"_XAbiR","week":"_3Nwep","day":"_3nNcG","disabled":"_1M4ZF","selected":"_2PEs8","outside":"_1PIJa","footer":"_2T_z1","today":"_1hVM6","overlayWrapper":"_1L-hI","overlay":"_dDPZb","weekNumber":"_1alhT"};
 
-    event.preventDefault();
-  }, [focusedItem]);
-  useKeyPress(['ArrowDown', 'ArrowUp', 'Enter'], handleKeyPress);
-  return {
-    focusedItem: focusedItem,
-    setFocusOnItem: setFocusOnItem
-  };
-};
+function parseDate(str, format, locale) {
+  var parsed = dateFnsParse(str, format, new Date(), {
+    locale: locale
+  });
 
-var styles$e = {"dropdown-list-divider":"_3x1F6"};
+  if (str.length === format.length && DateUtils.isDate(parsed)) {
+    return parsed;
+  }
 
-var DropdownListDivider = function DropdownListDivider(_ref) {
-  var testId = _ref.testId;
-  return React__default.createElement("div", {
-    className: styles$e['dropdown-list-divider'],
-    "data-testid": testId
+  return undefined;
+}
+function formatDate(date, format, locale) {
+  return dateFnsFormat(date, format, {
+    locale: locale
   });
-};
-
-var styles$f = {"dropdown-list-item":"_B3_I5","dropdown-list-item--selected":"_1mr1h","dropdown-list-item__content":"_2b7Fg","dropdown-list-item--disabled":"_2l0Cb"};
+}
+function setToMidnight(date) {
+  return date && startOfDay(date);
+}
+function getStartOfWeek(date, weekIndex) {
+  var d = new Date(date);
+  var firstDay = d.getDate() - d.getDay() + weekIndex;
+  var firstDayAdjusted = firstDay > d.getDate() ? firstDay - 7 : firstDay;
+  return new Date(d.setDate(firstDayAdjusted));
+}
+function getEndOfWeek(date, weekIndex) {
+  var startOfWeek = getStartOfWeek(date, weekIndex);
+  var endDay = startOfWeek.getDate() + 6;
+  return new Date(startOfWeek.setDate(endDay));
+}
+function createWeekRange(date, weekStart) {
+  return {
+    start: getStartOfWeek(date, weekStart),
+    end: getEndOfWeek(date, weekStart)
+  };
+}
+var DAYS = [getLocalizedString('time.sunday'), getLocalizedString('time.monday'), getLocalizedString('time.tuesday'), getLocalizedString('time.wednesday'), getLocalizedString('time.thursday'), getLocalizedString('time.friday'), getLocalizedString('time.saturday')];
+var MONTH_NAMES = [getLocalizedString('time.january'), getLocalizedString('time.february'), getLocalizedString('time.march'), getLocalizedString('time.april'), getLocalizedString('time.may'), getLocalizedString('time.june'), getLocalizedString('time.july'), getLocalizedString('time.august'), getLocalizedString('time.september'), getLocalizedString('time.october'), getLocalizedString('time.november'), getLocalizedString('time.december')];
 
-var TEXT_TYPES = {
-  CAPTION: 'caption',
-  BODY: 'body',
-  H1: 'h1',
-  H2: 'h2',
-  H3: 'h3',
-  H4: 'h4',
-  H5: 'h5',
-  INSIGHT: 'insight'
-};
-var FONT_EMPHASIS = {
-  BOLD: 'bold',
-  ITALIC: 'italic',
-  UNDERLINE: 'underline',
-  MONOSPACE: 'monospace'
+var CALENDAR_MODE = {
+  DAY: 'day',
+  WEEK: 'week'
 };
-var ALIGNMENTS = {
-  LEFT: 'left',
-  RIGHT: 'right',
-  CENTER: 'center',
-  JUSTIFY: 'justify'
+var CALENDAR_PLACEMENT = {
+  BOTTOM: 'bottom',
+  TOP: 'top'
 };
 
-var styles$g = {"text":"_3CIA3","text__body":"_1nnj8","text__caption":"_37K6o","text__insight":"_avqxy","text--bold":"_2TG6E","text--italic":"_2hlsn","text--underline":"_1Pjo6","text--monospace":"_eDdDI","text--align-left":"_2gNwS","text--align-right":"_ufv1W","text--align-center":"_2WMN6","text--align-justify":"_2iH-J"};
+var calculateCalendarPosition = function calculateCalendarPosition(placement, anchorPosition, calendarDimensions) {
+  if (!calendarDimensions) {
+    return {
+      left: 0,
+      top: 0
+    };
+  }
 
-var _excluded$2g = ["children", "as", "emphasis", "alignment", "color", "testId"];
+  var horizontalPosition = getHorizontalPosition(anchorPosition, calendarDimensions);
+  var verticalPosition = getVerticalPosition(anchorPosition, placement, calendarDimensions);
+  return _extends({}, horizontalPosition, verticalPosition);
+};
 
-var Text = function Text(_ref) {
-  var _classnames;
+var getHorizontalPosition = function getHorizontalPosition(anchorPosition, calendarDimensions) {
+  var innerWidth = window.innerWidth;
+  var calendarRight = anchorPosition.left + calendarDimensions.width;
 
-  var children = _ref.children,
-      _ref$as = _ref.as,
-      as = _ref$as === void 0 ? TEXT_TYPES.BODY : _ref$as,
-      emphasis = _ref.emphasis,
-      alignment = _ref.alignment,
-      color = _ref.color,
-      testId = _ref.testId,
-      positionProps = _objectWithoutPropertiesLoose(_ref, _excluded$2g);
+  if (innerWidth > calendarRight + BUFFER) {
+    return {
+      left: anchorPosition.left
+    };
+  }
 
-  var positionStyles = usePositionStyles(positionProps);
-  var elementProps = {
-    style: _extends({
-      color: color
-    }, positionStyles),
-    className: classnames(styles$g['text'], (_classnames = {}, _classnames[styles$g['text--bold']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.BOLD), _classnames[styles$g['text--italic']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.ITALIC), _classnames[styles$g['text--underline']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.UNDERLINE), _classnames[styles$g['text--monospace']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.MONOSPACE), _classnames[styles$g['text--align-left']] = alignment === ALIGNMENTS.LEFT, _classnames[styles$g['text--align-right']] = alignment === ALIGNMENTS.RIGHT, _classnames[styles$g['text--align-center']] = alignment === ALIGNMENTS.CENTER, _classnames[styles$g['text--align-justify']] = alignment === ALIGNMENTS.JUSTIFY, _classnames[styles$g['text__body']] = as === TEXT_TYPES.BODY, _classnames[styles$g['text__insight']] = as === TEXT_TYPES.INSIGHT, _classnames[styles$g['text__caption']] = as === TEXT_TYPES.CAPTION, _classnames)),
-    'data-testid': testId
+  return {
+    left: anchorPosition.right - calendarDimensions.width
   };
-  var pTypes = [TEXT_TYPES.BODY, TEXT_TYPES.CAPTION, TEXT_TYPES.INSIGHT];
-  var element = pTypes.includes(as) ? 'p' : as;
-  return React__default.createElement(element, elementProps, children);
 };
 
-var Bold = function Bold(_ref) {
-  var children = _ref.children;
-  return React__default.createElement("span", {
-    className: classnames(styles$g['text--bold'], styles$g['text'])
-  }, children);
-};
-
-var Underline = function Underline(_ref) {
-  var children = _ref.children;
-  return React__default.createElement("span", {
-    className: classnames(styles$g['text--underline'], styles$g['text'])
-  }, children);
-};
+var getVerticalPosition = function getVerticalPosition(anchorPosition, placement, calendarDimensions) {
+  var calendarTopAboveTrigger = anchorPosition.top - calendarDimensions.height - PADDING;
+  var calendarTopBelowTrigger = anchorPosition.bottom + PADDING;
 
-var Italic = function Italic(_ref) {
-  var children = _ref.children;
-  return React__default.createElement("span", {
-    className: classnames(styles$g['text--italic'], styles$g['text'])
-  }, children);
-};
+  if (placement === CALENDAR_PLACEMENT.TOP) {
+    if (calendarTopAboveTrigger < 0) {
+      return {
+        top: anchorPosition.bottom + PADDING
+      };
+    }
 
-var WHITE = '#ffffff';
-var EGGPLANT200 = '#d3dbf4';
-var EGGPLANT300 = '#a7b7ea';
-var EGGPLANT400 = '#6d87dd';
-var EGGPLANT500 = '#6179c6';
-var EGGPLANT600 = '#415184';
-var RADISH400 = '#e76767';
-var GREY100 = '#F3F3F3';
-var GREY200 = '#D5D5D5';
-var GREY300 = '#949494';
-var GREY400 = '#767676';
-var GREY500 = '#464646';
+    return {
+      top: calendarTopAboveTrigger + window.scrollY
+    };
+  } else {
+    if (calendarTopBelowTrigger + calendarDimensions.height > window.innerHeight) {
+      return {
+        top: calendarTopAboveTrigger + window.scrollY
+      };
+    }
 
-var DropdownListItem = function DropdownListItem(_ref) {
-  var _classNames;
+    return {
+      top: calendarTopBelowTrigger + window.scrollY
+    };
+  }
+};
 
-  var onClick = _ref.onClick,
-      prefix = _ref.prefix,
-      suffix = _ref.suffix,
-      caption = _ref.caption,
+var Calendar = function Calendar(_ref) {
+  var _ref$mode = _ref.mode,
+      mode = _ref$mode === void 0 ? CALENDAR_MODE.DAY : _ref$mode,
+      _ref$position = _ref.position,
+      position = _ref$position === void 0 ? CALENDAR_PLACEMENT.BOTTOM : _ref$position,
+      _ref$weekStart = _ref.weekStart,
+      weekStart = _ref$weekStart === void 0 ? 0 : _ref$weekStart,
       selected = _ref.selected,
-      disabled = _ref.disabled,
-      testId = _ref.testId,
-      children = _ref.children;
+      onSelect = _ref.onSelect,
+      onClickOutside = _ref.onClickOutside,
+      disabledDays = _ref.disabledDays,
+      anchorRef = _ref.anchorRef,
+      testId = _ref.testId;
 
-  var _useDropdownContext = useDropdownContext(),
-      onToggleDropdown = _useDropdownContext.onToggleDropdown;
+  var _useState = useState(null),
+      calendarRef = _useState[0],
+      setCalendarRef = _useState[1];
 
-  var handleClick = function handleClick(e) {
-    e.stopPropagation();
+  var style = mode === CALENDAR_MODE.DAY ? styles$h : styles$i;
+  var anchorNode = anchorRef.current;
+  useOnClickOutside({
+    current: calendarRef
+  }, function (event) {
+    var _anchorRef$current;
 
-    if (disabled) {
-      return;
+    if (!((_anchorRef$current = anchorRef.current) !== null && _anchorRef$current !== void 0 && _anchorRef$current.contains(event === null || event === void 0 ? void 0 : event.srcElement))) {
+      onClickOutside();
     }
-
-    onToggleDropdown();
-    onClick(e);
+  });
+  var weekRange = selected ? createWeekRange(selected, weekStart) : undefined;
+  var selectedRange = weekRange && {
+    from: weekRange.start,
+    to: weekRange.end
   };
 
-  var getCaptionColor = function getCaptionColor() {
-    if (selected) {
-      return EGGPLANT500;
-    }
+  var handleSelect = function handleSelect(day) {
+    var selectedDate = setToMidnight(day);
 
-    if (disabled) {
-      return GREY400;
+    if (mode === CALENDAR_MODE.DAY) {
+      onSelect(selectedDate);
+    } else {
+      var _weekRange = createWeekRange(selectedDate, weekStart);
+
+      onSelect(_weekRange.start);
     }
 
-    return undefined;
+    setTimeout(function () {
+      onClickOutside();
+    }, 100);
   };
 
-  return React__default.createElement("li", {
-    className: classnames(styles$f['dropdown-list-item'], (_classNames = {}, _classNames[styles$f['dropdown-list-item--selected']] = selected, _classNames[styles$f['dropdown-list-item--disabled']] = disabled, _classNames)),
-    onClick: handleClick,
-    onKeyPress: handleClick,
-    role: "menuitem",
+  if (!anchorNode) {
+    return null;
+  }
+
+  var anchorPosition = anchorNode.getBoundingClientRect();
+  var calendarPosition = calculateCalendarPosition(position, anchorPosition, calendarRef === null || calendarRef === void 0 ? void 0 : calendarRef.getBoundingClientRect());
+  return React__default.createElement(Portal, null, React__default.createElement("div", {
+    className: style.overlayWrapper
+  }, React__default.createElement("div", {
+    className: style.overlay,
+    ref: function ref(_ref2) {
+      return setCalendarRef(_ref2);
+    },
+    style: _extends({}, calendarPosition, {
+      zIndex: Z_INDEX_LAYERS.MODAL
+    }),
     "data-testid": testId
-  }, prefix, React__default.createElement("div", {
-    className: styles$f['dropdown-list-item__content']
-  }, React__default.createElement(Stack, {
-    space: 4,
-    flex: [1]
-  }, children, caption && React__default.createElement(Text, {
-    as: "caption",
-    color: getCaptionColor()
-  }, caption))), suffix);
+  }, React__default.createElement(DayPicker, {
+    format: "MM/dd/yyyy",
+    classNames: style,
+    onDayClick: function onDayClick(day, activeModifiers) {
+      var isDateDisabled = Object.keys(activeModifiers).find(function (modifier) {
+        return modifier.includes('disabled');
+      });
+
+      if (!Boolean(isDateDisabled)) {
+        handleSelect(day);
+      }
+    },
+    selectedDays: mode === CALENDAR_MODE.DAY ? selected : selectedRange,
+    disabledDays: disabledDays,
+    months: MONTH_NAMES,
+    weekdaysLong: DAYS,
+    initialMonth: selected,
+    weekdaysShort: DAYS.map(function (day) {
+      return day.substring(0, 2);
+    }),
+    showOutsideDays: mode === CALENDAR_MODE.WEEK,
+    firstDayOfWeek: weekStart
+  }))));
 };
 
-var canInteractWithItem = function canInteractWithItem(child) {
-  var itemType = getItemType(child);
+var styles$j = {"dropdown-list":"_1v1df","dropdown-list__item--hover":"_eAjpa"};
 
-  if (itemType === 'DropdownListDivider') {
-    return false;
+var findNextActiveIndex = function findNextActiveIndex(items, startAt) {
+  var startIndex = 0;
+
+  if (startAt !== null && startAt + 1 <= items.length) {
+    startIndex = startAt + 1;
   }
 
-  return !child.props.disabled || false;
-};
+  var hasEnabledItems = items.slice(startIndex).some(function (item) {
+    return !item.disabled;
+  });
 
-var getItemType = function getItemType(child) {
-  switch (child.type) {
-    case DropdownListDivider:
-      return 'DropdownListDivider';
+  if (hasEnabledItems) {
+    var _nextEnabledIndex = items.findIndex(function (item, index) {
+      if (index < startIndex) {
+        return false;
+      }
 
-    case DropdownListItem:
-      return 'DropdownListItem';
+      return !item.disabled;
+    });
 
-    default:
-      throw new Error('DropdownList - dropdown items should be using DropdownListDivider or DropdownListItem components');
+    return _nextEnabledIndex;
   }
+
+  var nextEnabledIndex = items.findIndex(function (item) {
+    return !item.disabled;
+  });
+  return nextEnabledIndex >= 0 ? nextEnabledIndex : null;
 };
+var findPreviousEnabledIndex = function findPreviousEnabledIndex(items, startAt) {
+  for (var i = startAt - 1; i >= 0; i--) {
+    if (!items[i].disabled) {
+      return i;
+    }
+  }
 
-var DropdownList = function DropdownList(_ref) {
-  var testId = _ref.testId,
-      children = _ref.children;
+  for (var _i = items.length - 1; _i > startAt - 1; _i--) {
+    if (!items[_i].disabled) {
+      return _i;
+    }
+  }
 
-  var _useDropdownContext = useDropdownContext(),
-      onToggleDropdown = _useDropdownContext.onToggleDropdown;
+  return null;
+};
 
-  var items = React__default.Children.toArray(children).map(function (child) {
-    if (!React__default.isValidElement(child)) {
-      throw new Error('DropdownList - dropdown items should be using DropdownListDivider or DropdownListItem components');
+var useListKeyboardNavigation = function useListKeyboardNavigation(listItems, actions) {
+  var _useState = useState(null),
+      focusedItem = _useState[0],
+      setFocusedItem = _useState[1];
+
+  var focusOnNextItem = function focusOnNextItem(callback) {
+    var nextFocusItem = findNextActiveIndex(listItems, focusedItem);
+    setFocusedItem(nextFocusItem);
+    callback(nextFocusItem);
+  };
+
+  var focusOnPrevItem = function focusOnPrevItem(callback) {
+    var prevFocusItem = findPreviousEnabledIndex(listItems, focusedItem || 0);
+    setFocusedItem(prevFocusItem);
+    callback(prevFocusItem);
+  };
+
+  var setFocusOnItem = function setFocusOnItem(index) {
+    if (index < 0) {
+      setFocusedItem(null);
+      return;
     }
 
-    return {
-      disabled: !canInteractWithItem(child),
-      onClick: child.props.onClick
-    };
-  });
+    if (listItems[index].disabled) {
+      return;
+    }
 
-  var _useListKeyboardNavig = useListKeyboardNavigation(items, {
-    onPressEnter: onToggleDropdown
-  }),
-      focusedItem = _useListKeyboardNavig.focusedItem,
-      setFocusOnItem = _useListKeyboardNavig.setFocusOnItem;
+    setFocusedItem(index);
+  };
 
-  return React__default.createElement("ul", {
-    className: styles$d['dropdown-list'],
-    "data-testid": testId
-  }, React__default.Children.map(children, function (child, index) {
-    var _classNames;
+  var handleKeyPress = useCallback(function (event) {
+    if (event.key === 'ArrowDown') {
+      focusOnNextItem(function (focusItem) {
+        var _actions$onNavigate;
 
-    return React__default.createElement("div", {
-      key: index,
-      className: classnames(styles$d['dropdown-list__item'], (_classNames = {}, _classNames[styles$d['dropdown-list__item--hover']] = focusedItem === index, _classNames)),
-      onMouseEnter: function onMouseEnter() {
-        return setFocusOnItem(index);
-      }
-    }, child);
-  }));
-};
+        return actions === null || actions === void 0 ? void 0 : (_actions$onNavigate = actions.onNavigate) === null || _actions$onNavigate === void 0 ? void 0 : _actions$onNavigate.call(actions, focusItem);
+      });
+    }
 
-var KebabMenu = function KebabMenu(_ref) {
-  var actions = _ref.actions;
-  return React__default.createElement(Dropdown, {
-    trigger: React__default.createElement(Button$1, {
-      theme: "link-icon"
-    }, React__default.createElement(IconEllipsisV, null)),
-    alignment: "right"
-  }, React__default.createElement(DropdownList, null, actions.map(function (action) {
-    return React__default.createElement(DropdownListItem, {
-      onClick: action.onAction,
-      key: action.action
-    }, action.label);
-  })));
+    if (event.key === 'ArrowUp') {
+      focusOnPrevItem(function (focusItem) {
+        var _actions$onNavigate2;
+
+        return actions === null || actions === void 0 ? void 0 : (_actions$onNavigate2 = actions.onNavigate) === null || _actions$onNavigate2 === void 0 ? void 0 : _actions$onNavigate2.call(actions, focusItem);
+      });
+    }
+
+    if (event.key === 'Enter' && focusedItem !== null) {
+      var _actions$onPressEnter;
+
+      var onClick = listItems[focusedItem].onClick;
+      onClick(event);
+      actions && ((_actions$onPressEnter = actions.onPressEnter) === null || _actions$onPressEnter === void 0 ? void 0 : _actions$onPressEnter.call(actions));
+    }
+
+    event.preventDefault();
+  }, [focusedItem]);
+  useKeyPress(['ArrowDown', 'ArrowUp', 'Enter'], handleKeyPress);
+  return {
+    focusedItem: focusedItem,
+    setFocusOnItem: setFocusOnItem
+  };
 };
 
-var styles$h = {"data-table-cell":"_2Ybjx","data-table-cell--no-padding":"_5KXHH","data-table-cell--vertical-border":"_2-I0j","data-table-cell--invalid":"_D73Vx","data-table-cell__content":"_3A9-M","data-table-cell__content--right-align":"_17Km7","data-table-cell__content--with-error":"_2c6KQ","data-table-cell__error-icon":"_2hIl3","data-table-cell__error-icon--right-align":"_8Uhyd","data-table-cell__error-icon--left-align":"_3X51R"};
+var styles$k = {"dropdown-list-divider":"_3x1F6"};
 
-var styles$i = {"overlay":"_2puqJ","overlay--after-open":"_1167h","overlay--before-close":"_t_t7L","content":"_wQQ_2","content--after-open":"_3jwux","content--before-close":"_2c2QP"};
+var DropdownListDivider = function DropdownListDivider(_ref) {
+  var testId = _ref.testId;
+  return React__default.createElement("div", {
+    className: styles$k['dropdown-list-divider'],
+    "data-testid": testId
+  });
+};
 
-var styles$j = {"header":"_36nxW","sub-header":"_2XwRD"};
+var styles$l = {"dropdown-list-item":"_B3_I5","dropdown-list-item--selected":"_1mr1h","dropdown-list-item__content":"_2b7Fg","dropdown-list-item--disabled":"_2l0Cb"};
 
-var ModalHeader = function ModalHeader(_ref) {
-  var header = _ref.header,
-      subHeader = _ref.subHeader,
-      onClose = _ref.onClose,
-      loading = _ref.loading;
-  return React__default.createElement(Stack, {
-    space: 12
-  }, React__default.createElement(Inline, {
-    flex: [1],
-    alignItems: "center"
-  }, React__default.createElement("span", {
-    className: styles$j['header']
-  }, header), onClose && React__default.createElement(Button$1, {
-    theme: "link-icon",
-    onClick: onClose,
-    disabled: loading
-  }, React__default.createElement(IconTimes, null))), subHeader && React__default.createElement("div", {
-    className: styles$j['sub-header']
-  }, subHeader));
+var TEXT_TYPES = {
+  CAPTION: 'caption',
+  BODY: 'body',
+  H1: 'h1',
+  H2: 'h2',
+  H3: 'h3',
+  H4: 'h4',
+  H5: 'h5',
+  INSIGHT: 'insight'
+};
+var FONT_EMPHASIS = {
+  BOLD: 'bold',
+  ITALIC: 'italic',
+  UNDERLINE: 'underline',
+  MONOSPACE: 'monospace'
+};
+var ALIGNMENTS = {
+  LEFT: 'left',
+  RIGHT: 'right',
+  CENTER: 'center',
+  JUSTIFY: 'justify'
 };
 
-var Modal = function Modal(_ref) {
-  var children = _ref.children,
-      header = _ref.header,
-      subHeader = _ref.subHeader,
-      onClose = _ref.onClose,
-      loading = _ref.loading,
-      _ref$zIndex = _ref.zIndex,
-      zIndex = _ref$zIndex === void 0 ? Z_INDEX_LAYERS.MODAL : _ref$zIndex,
-      rootElementId = _ref.rootElementId,
-      _ref$width = _ref.width,
-      width = _ref$width === void 0 ? 500 : _ref$width,
-      height = _ref.height,
-      maxWidth = _ref.maxWidth,
-      _ref$shouldReturnFocu = _ref.shouldReturnFocusAfterClose,
-      shouldReturnFocusAfterClose = _ref$shouldReturnFocu === void 0 ? true : _ref$shouldReturnFocu,
-      testId = _ref.testId;
-  var style = {
-    content: {
-      width: width,
-      height: height,
-      maxWidth: maxWidth
-    },
-    overlay: {
-      zIndex: zIndex
-    }
+var styles$m = {"text":"_3CIA3","text__body":"_1nnj8","text__caption":"_37K6o","text__insight":"_avqxy","text--bold":"_2TG6E","text--italic":"_2hlsn","text--underline":"_1Pjo6","text--monospace":"_eDdDI","text--align-left":"_2gNwS","text--align-right":"_ufv1W","text--align-center":"_2WMN6","text--align-justify":"_2iH-J"};
+
+var _excluded$2g = ["children", "as", "emphasis", "alignment", "color", "testId"];
+
+var Text = function Text(_ref) {
+  var _classnames;
+
+  var children = _ref.children,
+      _ref$as = _ref.as,
+      as = _ref$as === void 0 ? TEXT_TYPES.BODY : _ref$as,
+      emphasis = _ref.emphasis,
+      alignment = _ref.alignment,
+      color = _ref.color,
+      testId = _ref.testId,
+      positionProps = _objectWithoutPropertiesLoose(_ref, _excluded$2g);
+
+  var positionStyles = usePositionStyles(positionProps);
+  var elementProps = {
+    style: _extends({
+      color: color
+    }, positionStyles),
+    className: classnames(styles$m['text'], (_classnames = {}, _classnames[styles$m['text--bold']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.BOLD), _classnames[styles$m['text--italic']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.ITALIC), _classnames[styles$m['text--underline']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.UNDERLINE), _classnames[styles$m['text--monospace']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.MONOSPACE), _classnames[styles$m['text--align-left']] = alignment === ALIGNMENTS.LEFT, _classnames[styles$m['text--align-right']] = alignment === ALIGNMENTS.RIGHT, _classnames[styles$m['text--align-center']] = alignment === ALIGNMENTS.CENTER, _classnames[styles$m['text--align-justify']] = alignment === ALIGNMENTS.JUSTIFY, _classnames[styles$m['text__body']] = as === TEXT_TYPES.BODY, _classnames[styles$m['text__insight']] = as === TEXT_TYPES.INSIGHT, _classnames[styles$m['text__caption']] = as === TEXT_TYPES.CAPTION, _classnames)),
+    'data-testid': testId
   };
-  return React__default.createElement(ReactModal, {
-    isOpen: true,
-    testId: testId,
-    shouldCloseOnEsc: true,
-    shouldCloseOnOverlayClick: false,
-    shouldReturnFocusAfterClose: shouldReturnFocusAfterClose,
-    onRequestClose: onClose && !loading ? onClose : undefined,
-    style: style,
-    closeTimeoutMS: 200,
-    contentLabel: "Modal",
-    appElement: rootElementId && document.getElementById(rootElementId) || undefined,
-    overlayClassName: {
-      base: styles$i['overlay'],
-      afterOpen: styles$i['overlay--after-open'],
-      beforeClose: styles$i['overlay--before-close']
-    },
-    className: {
-      base: styles$i['content'],
-      afterOpen: styles$i['content--after-open'],
-      beforeClose: styles$i['content--before-close']
-    }
-  }, React__default.createElement(ModalHeader, {
-    header: header,
-    subHeader: subHeader,
-    onClose: onClose,
-    loading: loading
-  }), children);
+  var pTypes = [TEXT_TYPES.BODY, TEXT_TYPES.CAPTION, TEXT_TYPES.INSIGHT];
+  var element = pTypes.includes(as) ? 'p' : as;
+  return React__default.createElement(element, elementProps, children);
 };
 
-Modal.setAppElement = function (rootElement) {
-  ReactModal.setAppElement(rootElement);
+var Bold = function Bold(_ref) {
+  var children = _ref.children;
+  return React__default.createElement("span", {
+    className: classnames(styles$m['text--bold'], styles$m['text'])
+  }, children);
 };
 
-var THRESHOLD = 20;
-var useScrollShadow = function useScrollShadow() {
-  var ref = useRef(null);
+var Underline = function Underline(_ref) {
+  var children = _ref.children;
+  return React__default.createElement("span", {
+    className: classnames(styles$m['text--underline'], styles$m['text'])
+  }, children);
+};
 
-  var _useState = useState(false),
-      showScrollShadow = _useState[0],
-      setShowScrollShadow = _useState[1];
+var Italic = function Italic(_ref) {
+  var children = _ref.children;
+  return React__default.createElement("span", {
+    className: classnames(styles$m['text--italic'], styles$m['text'])
+  }, children);
+};
 
-  useEffect(function () {
-    if (!ref.current) {
-      return;
-    }
+var WHITE = '#ffffff';
+var EGGPLANT200 = '#d3dbf4';
+var EGGPLANT300 = '#a7b7ea';
+var EGGPLANT400 = '#6d87dd';
+var EGGPLANT500 = '#6179c6';
+var EGGPLANT600 = '#415184';
+var RADISH400 = '#e76767';
+var GREY100 = '#F3F3F3';
+var GREY200 = '#D5D5D5';
+var GREY300 = '#949494';
+var GREY400 = '#767676';
+var GREY500 = '#464646';
 
-    var modalBody = ref.current;
+var DropdownListItem = function DropdownListItem(_ref) {
+  var _classNames;
 
-    if (modalBody.offsetHeight > THRESHOLD) {
-      setShowScrollShadow(true);
+  var onClick = _ref.onClick,
+      prefix = _ref.prefix,
+      suffix = _ref.suffix,
+      caption = _ref.caption,
+      selected = _ref.selected,
+      disabled = _ref.disabled,
+      testId = _ref.testId,
+      children = _ref.children;
+
+  var _useDropdownContext = useDropdownContext(),
+      onToggleDropdown = _useDropdownContext.onToggleDropdown;
+
+  var handleClick = function handleClick(e) {
+    e.stopPropagation();
+
+    if (disabled) {
+      return;
     }
-  }, []);
-  return {
-    ref: ref,
-    showScrollShadow: showScrollShadow
-  };
-};
 
-var styles$k = {"modal-body":"_2J-ku","modal-body--with-scroll-shadow":"_2ErCP"};
+    onToggleDropdown();
+    onClick(e);
+  };
 
-var ModalBody = function ModalBody(_ref) {
-  var _classNames;
+  var getCaptionColor = function getCaptionColor() {
+    if (selected) {
+      return EGGPLANT500;
+    }
 
-  var children = _ref.children,
-      testId = _ref.testId;
+    if (disabled) {
+      return GREY400;
+    }
 
-  var _useScrollShadow = useScrollShadow(),
-      ref = _useScrollShadow.ref,
-      showScrollShadow = _useScrollShadow.showScrollShadow;
+    return undefined;
+  };
 
-  return React__default.createElement("div", {
-    className: classnames(styles$k['modal-body'], (_classNames = {}, _classNames[styles$k['modal-body--with-scroll-shadow']] = showScrollShadow, _classNames)),
-    ref: ref,
+  return React__default.createElement("li", {
+    className: classnames(styles$l['dropdown-list-item'], (_classNames = {}, _classNames[styles$l['dropdown-list-item--selected']] = selected, _classNames[styles$l['dropdown-list-item--disabled']] = disabled, _classNames)),
+    onClick: handleClick,
+    onKeyPress: handleClick,
+    role: "menuitem",
     "data-testid": testId
-  }, children);
+  }, prefix, React__default.createElement("div", {
+    className: styles$l['dropdown-list-item__content']
+  }, React__default.createElement(Stack, {
+    space: 4,
+    flex: [1]
+  }, children, caption && React__default.createElement(Text, {
+    as: "caption",
+    color: getCaptionColor()
+  }, caption))), suffix);
 };
 
-var styles$l = {"modal-footer":"_LKOr5","tertiary-container":"_Qktd-"};
-
-var updateButtonProps = function updateButtonProps(button, newProps) {
-  if (!button) {
-    return null;
-  }
+var canInteractWithItem = function canInteractWithItem(child) {
+  var itemType = getItemType(child);
 
-  if (button.type !== Button$1) {
-    return button;
+  if (itemType === 'DropdownListDivider') {
+    return false;
   }
 
-  return React__default.cloneElement(button, _extends({}, newProps));
+  return !child.props.disabled || false;
 };
 
-var ModalFooter = function ModalFooter(_ref) {
-  var children = _ref.children,
-      actions = _ref.actions,
-      testId = _ref.testId;
+var getItemType = function getItemType(child) {
+  switch (child.type) {
+    case DropdownListDivider:
+      return 'DropdownListDivider';
 
-  if (actions) {
-    var _actions$primary, _actions$secondary, _actions$tertiary, _classnames;
+    case DropdownListItem:
+      return 'DropdownListItem';
 
-    var primaryButton = updateButtonProps(actions.primary, {
-      theme: (actions === null || actions === void 0 ? void 0 : (_actions$primary = actions.primary) === null || _actions$primary === void 0 ? void 0 : _actions$primary.props.theme) || 'primary',
-      size: BUTTON_SIZES.MIN_WIDTH_100
-    });
-    var secondaryButton = updateButtonProps(actions.secondary, {
-      theme: (actions === null || actions === void 0 ? void 0 : (_actions$secondary = actions.secondary) === null || _actions$secondary === void 0 ? void 0 : _actions$secondary.props.theme) || 'default',
-      size: BUTTON_SIZES.MIN_WIDTH_100
-    });
-    var tertiaryButton = updateButtonProps(actions.tertiary, {
-      theme: (actions === null || actions === void 0 ? void 0 : (_actions$tertiary = actions.tertiary) === null || _actions$tertiary === void 0 ? void 0 : _actions$tertiary.props.theme) || 'link-primary',
-      size: BUTTON_SIZES.MIN_WIDTH_100
-    });
-    return React__default.createElement(FooterContainer, {
-      testId: testId
-    }, React__default.createElement(Inline, {
-      justifyContent: "space-between"
-    }, React__default.createElement("div", {
-      className: classnames((_classnames = {}, _classnames[styles$l['tertiary-container']] = tertiaryButton && tertiaryButton.props.theme.startsWith('link'), _classnames))
-    }, tertiaryButton || React__default.createElement("div", null)), React__default.createElement(Inline, {
-      space: 12
-    }, secondaryButton, primaryButton)));
+    default:
+      throw new Error('DropdownList - dropdown items should be using DropdownListDivider or DropdownListItem components');
   }
-
-  return React__default.createElement(FooterContainer, null, children);
 };
 
-var FooterContainer = function FooterContainer(_ref2) {
-  var children = _ref2.children,
-      testId = _ref2.testId;
-  var childrenItens = React__default.Children.toArray(children);
-  var hasCustomAlignment = childrenItens.length === 1 && childrenItens[0].type === Inline;
-  return React__default.createElement("div", {
-    className: styles$l['modal-footer'],
-    "data-testid": testId
-  }, React__default.createElement(Inline, {
-    justifyContent: "end",
-    space: 12,
-    flex: hasCustomAlignment ? [1] : undefined
-  }, children));
+var calculateScrollYPosition = function calculateScrollYPosition(newFocusItem, lastFocusItem, paneScrollTop, maxPaneHeight, elementYPosition) {
+  var directionCoeff = !lastFocusItem || newFocusItem > lastFocusItem ? -1 * maxPaneHeight : 0;
+
+  if (elementYPosition > paneScrollTop + maxPaneHeight || elementYPosition < paneScrollTop) {
+    return elementYPosition + directionCoeff;
+  }
+
+  return null;
 };
 
-var styles$m = {"container":"_v1b-5","wrapper":"_3mrLu","interactionDisabled":"_1J9dh","DayPicker-Day":"_8FcQE","navBar":"_1SPuq","todayButton":"_24FJ6","navButtonInteractionDisabled":"_Oxdm9","navButtonPrev":"_20uqc","navButtonNext":"_3C53z","months":"_M_eHz","month":"_3RPpJ","caption":"_1FXNw","weekdays":"_3KcRU","weekdaysRow":"_1fO_e","weekday":"_c1Y-X","body":"_34mA1","week":"_1PmqZ","day":"_1AWH2","disabled":"_3vJkw","selected":"_1DR0N","outside":"_276GV","footer":"_2M5xr","today":"_3N6fj","overlayWrapper":"_3Zqgu","overlay":"_20Ncd","weekNumber":"_2hb-S"};
+var DropdownList = function DropdownList(_ref) {
+  var testId = _ref.testId,
+      children = _ref.children,
+      highlightItemIndex = _ref.highlightItemIndex;
 
-var styles$n = {"container":"_okDvi","wrapper":"_17XdD","interactionDisabled":"_1O7OT","DayPicker-Day":"_3noGA","navBar":"_1Hl3Q","todayButton":"_m0Vs9","navButtonInteractionDisabled":"_1ULWH","navButtonPrev":"_3gjq8","navButtonNext":"_1m-Kd","months":"_Fq6Xh","month":"_3i0Oo","caption":"_36X9Y","weekdays":"_1aWPn","weekdaysRow":"_3HXCK","weekday":"_t-ctd","body":"_XAbiR","week":"_3Nwep","day":"_3nNcG","disabled":"_1M4ZF","selected":"_2PEs8","outside":"_1PIJa","footer":"_2T_z1","today":"_1hVM6","overlayWrapper":"_1L-hI","overlay":"_dDPZb","weekNumber":"_1alhT"};
+  var _useDropdownContext = useDropdownContext(),
+      onToggleDropdown = _useDropdownContext.onToggleDropdown;
 
-function parseDate(str, format, locale) {
-  var parsed = dateFnsParse(str, format, new Date(), {
-    locale: locale
+  var items = React__default.Children.toArray(children).map(function (child) {
+    if (!React__default.isValidElement(child)) {
+      throw new Error('DropdownList - dropdown items should be using DropdownListDivider or DropdownListItem components');
+    }
+
+    return {
+      disabled: !canInteractWithItem(child),
+      onClick: child.props.onClick
+    };
   });
+  var listRef = useRef(null);
 
-  if (str.length === format.length && DateUtils.isDate(parsed)) {
-    return parsed;
-  }
+  var scrollToItem = function scrollToItem(newFocusItem) {
+    if (listRef.current && newFocusItem !== null && listRef.current.parentNode) {
+      var element = listRef.current.querySelector(":nth-child(" + (newFocusItem + 1) + ")");
+      var parentList = listRef.current.parentNode;
+      var scrollYPosition = calculateScrollYPosition(newFocusItem, focusedItem || 0, parentList.scrollTop, 354, element.offsetTop);
 
-  return undefined;
-}
-function formatDate(date, format, locale) {
-  return dateFnsFormat(date, format, {
-    locale: locale
-  });
-}
-function setToMidnight(date) {
-  return date && startOfDay(date);
-}
-function getStartOfWeek(date, weekIndex) {
-  var d = new Date(date);
-  var firstDay = d.getDate() - d.getDay() + weekIndex;
-  var firstDayAdjusted = firstDay > d.getDate() ? firstDay - 7 : firstDay;
-  return new Date(d.setDate(firstDayAdjusted));
-}
-function getEndOfWeek(date, weekIndex) {
-  var startOfWeek = getStartOfWeek(date, weekIndex);
-  var endDay = startOfWeek.getDate() + 6;
-  return new Date(startOfWeek.setDate(endDay));
-}
-function createWeekRange(date, weekStart) {
-  return {
-    start: getStartOfWeek(date, weekStart),
-    end: getEndOfWeek(date, weekStart)
+      if (scrollYPosition !== null) {
+        parentList.scrollTo(0, scrollYPosition);
+      }
+    }
   };
-}
-var DAYS = [getLocalizedString('time.sunday'), getLocalizedString('time.monday'), getLocalizedString('time.tuesday'), getLocalizedString('time.wednesday'), getLocalizedString('time.thursday'), getLocalizedString('time.friday'), getLocalizedString('time.saturday')];
-var MONTH_NAMES = [getLocalizedString('time.january'), getLocalizedString('time.february'), getLocalizedString('time.march'), getLocalizedString('time.april'), getLocalizedString('time.may'), getLocalizedString('time.june'), getLocalizedString('time.july'), getLocalizedString('time.august'), getLocalizedString('time.september'), getLocalizedString('time.october'), getLocalizedString('time.november'), getLocalizedString('time.december')];
 
-var CALENDAR_MODE = {
-  DAY: 'day',
-  WEEK: 'week'
-};
-var CALENDAR_PLACEMENT = {
-  BOTTOM: 'bottom',
-  TOP: 'top'
+  var _useListKeyboardNavig = useListKeyboardNavigation(items, {
+    onPressEnter: onToggleDropdown,
+    onNavigate: scrollToItem
+  }),
+      focusedItem = _useListKeyboardNavig.focusedItem,
+      setFocusOnItem = _useListKeyboardNavig.setFocusOnItem;
+
+  useEffect(function () {
+    if (highlightItemIndex !== undefined) {
+      setFocusOnItem(highlightItemIndex);
+
+      if (highlightItemIndex >= 0) {
+        scrollToItem(highlightItemIndex);
+      }
+    }
+  }, [highlightItemIndex]);
+  return React__default.createElement("ul", {
+    className: styles$j['dropdown-list'],
+    "data-testid": testId,
+    ref: listRef
+  }, React__default.Children.map(children, function (child, index) {
+    var _classNames;
+
+    return React__default.createElement("div", {
+      key: index,
+      className: classnames(styles$j['dropdown-list__item'], (_classNames = {}, _classNames[styles$j['dropdown-list__item--hover']] = focusedItem === index, _classNames)),
+      onMouseEnter: function onMouseEnter() {
+        return setFocusOnItem(index);
+      }
+    }, child);
+  }));
 };
 
-var calculateCalendarPosition = function calculateCalendarPosition(placement, anchorPosition, calendarDimensions) {
-  if (!calendarDimensions) {
-    return {
-      left: 0,
-      top: 0
-    };
-  }
+var styles$n = {"label":"_h724f","label--truncate":"_1VUoF"};
 
-  var horizontalPosition = getHorizontalPosition(anchorPosition, calendarDimensions);
-  var verticalPosition = getVerticalPosition(anchorPosition, placement, calendarDimensions);
-  return _extends({}, horizontalPosition, verticalPosition);
+var isEllipsisActive = function isEllipsisActive(e) {
+  return e.offsetWidth < e.scrollWidth;
 };
 
-var getHorizontalPosition = function getHorizontalPosition(anchorPosition, calendarDimensions) {
-  var innerWidth = window.innerWidth;
-  var calendarRight = anchorPosition.left + calendarDimensions.width;
+var useLabelTooltip = function useLabelTooltip(labelId, tooltipContent, truncate) {
+  var _useState = useState(false),
+      showTooltip = _useState[0],
+      setShowTooltip = _useState[1];
 
-  if (innerWidth > calendarRight + BUFFER) {
-    return {
-      left: anchorPosition.left
-    };
-  }
+  var shouldTruncate = typeof tooltipContent === 'string' && truncate;
+  var labelElement = document.getElementById(labelId);
+  var isHidden = labelElement && labelElement.offsetParent === null;
+  var handleApplyTooltip = useCallback(function () {
+    if (!shouldTruncate) {
+      return;
+    }
+
+    var labelElement = document.getElementById(labelId);
+
+    if (!labelElement) {
+      return;
+    }
+
+    var shouldShowTooltip = isEllipsisActive(labelElement);
 
+    if (showTooltip !== shouldShowTooltip) {
+      setShowTooltip(shouldShowTooltip);
+    }
+  }, [shouldTruncate, isHidden]);
+  useEffect(function () {
+    var onWindowResize = debounce(handleApplyTooltip, 300);
+    window.addEventListener('resize', onWindowResize);
+    return function () {
+      return window.removeEventListener('resize', onWindowResize);
+    };
+  }, [handleApplyTooltip]);
+  useLayoutEffect(handleApplyTooltip, [handleApplyTooltip]);
   return {
-    left: anchorPosition.right - calendarDimensions.width
+    showTooltip: showTooltip,
+    shouldTruncate: shouldTruncate
   };
 };
 
-var getVerticalPosition = function getVerticalPosition(anchorPosition, placement, calendarDimensions) {
-  var calendarTopAboveTrigger = anchorPosition.top - calendarDimensions.height - PADDING;
-  var calendarTopBelowTrigger = anchorPosition.bottom + PADDING;
+var Label = function Label(_ref) {
+  var _classNames;
 
-  if (placement === CALENDAR_PLACEMENT.TOP) {
-    if (calendarTopAboveTrigger < 0) {
-      return {
-        top: anchorPosition.bottom + PADDING
-      };
-    }
+  var htmlFor = _ref.htmlFor,
+      children = _ref.children,
+      _ref$truncate = _ref.truncate,
+      truncate = _ref$truncate === void 0 ? true : _ref$truncate;
+  var labelId = "label-" + htmlFor;
 
-    return {
-      top: calendarTopAboveTrigger + window.scrollY
-    };
-  } else {
-    if (calendarTopBelowTrigger + calendarDimensions.height > window.innerHeight) {
-      return {
-        top: calendarTopAboveTrigger + window.scrollY
-      };
-    }
+  var _useLabelTooltip = useLabelTooltip(labelId, children, truncate),
+      showTooltip = _useLabelTooltip.showTooltip,
+      shouldTruncate = _useLabelTooltip.shouldTruncate;
 
-    return {
-      top: calendarTopBelowTrigger + window.scrollY
-    };
+  var LabelElement = React__default.createElement("label", {
+    htmlFor: htmlFor,
+    id: labelId,
+    className: classnames(styles$n['label'], (_classNames = {}, _classNames[styles$n['label--truncate']] = shouldTruncate, _classNames))
+  }, children);
+
+  if (showTooltip) {
+    return React__default.createElement(Tooltip$1, {
+      overlay: children,
+      placement: "top"
+    }, LabelElement);
   }
+
+  return LabelElement;
 };
 
-var Calendar = function Calendar(_ref) {
-  var _ref$mode = _ref.mode,
-      mode = _ref$mode === void 0 ? CALENDAR_MODE.DAY : _ref$mode,
-      _ref$position = _ref.position,
-      position = _ref$position === void 0 ? CALENDAR_PLACEMENT.BOTTOM : _ref$position,
-      _ref$weekStart = _ref.weekStart,
-      weekStart = _ref$weekStart === void 0 ? 0 : _ref$weekStart,
-      selected = _ref.selected,
-      onSelect = _ref.onSelect,
-      onClickOutside = _ref.onClickOutside,
-      disabledDays = _ref.disabledDays,
-      anchorRef = _ref.anchorRef,
-      testId = _ref.testId;
+var styles$o = {"caption":"_1DWBq"};
 
-  var _useState = useState(null),
-      calendarRef = _useState[0],
-      setCalendarRef = _useState[1];
+var Caption = function Caption(_ref) {
+  var fieldId = _ref.fieldId,
+      children = _ref.children;
+  return React__default.createElement("div", {
+    id: fieldId && fieldId + "-describer",
+    className: styles$o['caption']
+  }, children);
+};
 
-  var style = mode === CALENDAR_MODE.DAY ? styles$m : styles$n;
-  var anchorNode = anchorRef.current;
-  useOnClickOutside({
-    current: calendarRef
-  }, function (event) {
-    var _anchorRef$current;
+var styles$p = {"error-message":"_nZ2MD"};
 
-    if (!((_anchorRef$current = anchorRef.current) !== null && _anchorRef$current !== void 0 && _anchorRef$current.contains(event === null || event === void 0 ? void 0 : event.srcElement))) {
-      onClickOutside();
-    }
-  });
-  var weekRange = selected ? createWeekRange(selected, weekStart) : undefined;
-  var selectedRange = weekRange && {
-    from: weekRange.start,
-    to: weekRange.end
-  };
+var ErrorMessage = function ErrorMessage(_ref) {
+  var fieldId = _ref.fieldId,
+      children = _ref.children,
+      testId = _ref.testId;
+  return React__default.createElement("div", {
+    id: fieldId && fieldId + "-error-message",
+    className: styles$p['error-message'],
+    "data-testid": testId
+  }, React__default.createElement(Inline, {
+    space: 8,
+    alignItems: "center"
+  }, React__default.createElement(IconTimesOctagon, {
+    color: RADISH400,
+    size: "medium"
+  }), children));
+};
 
-  var handleSelect = function handleSelect(day) {
-    var selectedDate = setToMidnight(day);
+var Field = function Field(_ref) {
+  var id = _ref.id,
+      label = _ref.label,
+      caption = _ref.caption,
+      error = _ref.error,
+      children = _ref.children;
+  var shouldRenderLabel = label || typeof label === 'string';
+  return React__default.createElement(Stack, {
+    space: 8,
+    flexItems: true
+  }, shouldRenderLabel && React__default.createElement(Label, {
+    htmlFor: id
+  }, label), children, caption && React__default.createElement(Caption, {
+    fieldId: id
+  }, caption), error && React__default.createElement(ErrorMessage, {
+    fieldId: id
+  }, error));
+};
 
-    if (mode === CALENDAR_MODE.DAY) {
-      onSelect(selectedDate);
-    } else {
-      var _weekRange = createWeekRange(selectedDate, weekStart);
+var Context$1 = createContext({});
+var useFormContext = function useFormContext() {
+  var context = useContext(Context$1);
+  return context || {};
+};
 
-      onSelect(_weekRange.start);
-    }
+var useFieldId = function useFieldId(_ref) {
+  var name = _ref.name,
+      inputId = _ref.id;
+  var id = useMemo(function () {
+    return inputId ? inputId : name + "-" + Math.random();
+  }, [inputId, name]);
+  return id;
+};
 
-    setTimeout(function () {
-      onClickOutside();
-    }, 100);
-  };
+var getFormikState = function getFormikState(name, formik) {
+  if (formik === undefined) {
+    return null;
+  }
 
-  if (!anchorNode) {
+  var formikPath = getFormikArrayPath(name);
+
+  if (formikPath.length === 0) {
     return null;
   }
 
-  var anchorPosition = anchorNode.getBoundingClientRect();
-  var calendarPosition = calculateCalendarPosition(position, anchorPosition, calendarRef === null || calendarRef === void 0 ? void 0 : calendarRef.getBoundingClientRect());
-  return React__default.createElement(Portal, null, React__default.createElement("div", {
-    className: style.overlayWrapper
-  }, React__default.createElement("div", {
-    className: style.overlay,
-    ref: function ref(_ref2) {
-      return setCalendarRef(_ref2);
+  var formikLatestLevel = formikPath.reduce(function (acc, path) {
+    var _acc$touched, _acc$error, _acc$value;
+
+    return {
+      touched: (_acc$touched = acc.touched) === null || _acc$touched === void 0 ? void 0 : _acc$touched[path],
+      error: (_acc$error = acc.error) === null || _acc$error === void 0 ? void 0 : _acc$error[path],
+      value: (_acc$value = acc.value) === null || _acc$value === void 0 ? void 0 : _acc$value[path]
+    };
+  }, {
+    touched: formik.touched,
+    error: formik.errors,
+    value: formik.values
+  });
+  return {
+    error: formikLatestLevel.touched ? formikLatestLevel.error : undefined,
+    value: formikLatestLevel.value
+  };
+};
+var getFormikArrayPath = function getFormikArrayPath(name) {
+  return name.split(/[^a-zA-Z0-9]/).filter(Boolean);
+};
+
+var useFieldControllers = function useFieldControllers(_ref) {
+  var name = _ref.name,
+      inputId = _ref.id,
+      value = _ref.value,
+      _onChange = _ref.onChange,
+      _onBlur = _ref.onBlur,
+      _onFocus = _ref.onFocus,
+      _onKeyDown = _ref.onKeyDown,
+      error = _ref.error,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'text' : _ref$type;
+
+  var _useFormContext = useFormContext(),
+      formik = _useFormContext.formik;
+
+  var id = useFieldId({
+    name: name,
+    id: inputId
+  });
+  var controllers = {
+    id: id,
+    error: error,
+    value: value,
+    onChange: function onChange(e) {
+      return _onChange && _onChange(e.target.value);
     },
-    style: _extends({}, calendarPosition, {
-      zIndex: Z_INDEX_LAYERS.MODAL
-    }),
-    "data-testid": testId
-  }, React__default.createElement(DayPicker, {
-    format: "MM/dd/yyyy",
-    classNames: style,
-    onDayClick: function onDayClick(day, activeModifiers) {
-      var isDateDisabled = Object.keys(activeModifiers).find(function (modifier) {
-        return modifier.includes('disabled');
-      });
+    onBlur: function onBlur(e) {
+      return _onBlur && _onBlur(e.target.value);
+    },
+    onFocus: function onFocus(e) {
+      return _onFocus && _onFocus(e.target.value);
+    },
+    onKeyDown: function onKeyDown(e) {
+      return _onKeyDown && _onKeyDown(e.key);
+    }
+  };
+  var formikState = getFormikState(name, formik);
 
-      if (!Boolean(isDateDisabled)) {
-        handleSelect(day);
+  if (formik && formikState) {
+    var currencyBlur = function currencyBlur() {
+      if (type === 'currency') {
+        formik.setFieldValue(name, Number(value).toFixed(2));
       }
-    },
-    selectedDays: mode === CALENDAR_MODE.DAY ? selected : selectedRange,
-    disabledDays: disabledDays,
-    months: MONTH_NAMES,
-    weekdaysLong: DAYS,
-    initialMonth: selected,
-    weekdaysShort: DAYS.map(function (day) {
-      return day.substring(0, 2);
-    }),
-    showOutsideDays: mode === CALENDAR_MODE.WEEK,
-    firstDayOfWeek: weekStart
-  }))));
+    };
+
+    controllers = _extends({}, controllers, {
+      error: error !== undefined ? controllers.error : formikState.error,
+      value: value !== undefined ? controllers.value : formikState.value,
+      onChange: _onChange ? controllers.onChange : function (e) {
+        return formik.setFieldValue(name, e.target.value);
+      },
+      onBlur: _onBlur ? function (e) {
+        _onBlur && _onBlur(e.target.value);
+        formik.setFieldTouched(name);
+        currencyBlur();
+      } : function () {
+        formik.setFieldTouched(name);
+        currencyBlur();
+      }
+    });
+  }
+
+  return controllers;
 };
 
-var DataTableCellElement = function DataTableCellElement(_ref, ref) {
-  var _columns$columnIndex, _classnames, _classnames2, _classnames3;
+var textFieldStyles = {"text-field":"_20YOA","text-field--invalid":"_3kUSh","text-field--prefixed":"_3IU3Q","text-field--suffixed":"_QXJOD"};
 
-  var children = _ref.children,
-      columnIndex = _ref.columnIndex,
-      error = _ref.error,
-      _ref$delayOnCloseErro = _ref.delayOnCloseError,
-      delayOnCloseError = _ref$delayOnCloseErro === void 0 ? false : _ref$delayOnCloseErro,
-      _ref$noPadding = _ref.noPadding,
-      noPadding = _ref$noPadding === void 0 ? false : _ref$noPadding,
-      colSpan = _ref.colSpan;
+var useTextField = function useTextField(_ref) {
+  var _classnames;
 
-  var _useDataTableContext = useDataTableContext(),
-      columns = _useDataTableContext.columns,
-      hasVerticalBorders = _useDataTableContext.hasVerticalBorders;
+  var autoComplete = _ref.autoComplete,
+      autoFocus = _ref.autoFocus,
+      defaultValue = _ref.defaultValue,
+      disabled = _ref.disabled,
+      error = _ref.error,
+      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,
+      value = _ref.value,
+      ref = _ref.ref,
+      testId = _ref.testId;
+  var controllers = useFieldControllers({
+    error: error,
+    id: id,
+    name: name,
+    onChange: onChange,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
+    value: value
+  });
+  var hasError = !!controllers.error;
+  var inputProps = {
+    'aria-describedby': hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
+    'aria-invalid': hasError,
+    autoComplete: autoComplete,
+    autoFocus: autoFocus,
+    className: classnames(textFieldStyles['text-field'], (_classnames = {}, _classnames[textFieldStyles['text-field--invalid']] = hasError, _classnames)),
+    'data-testid': testId,
+    disabled: disabled,
+    defaultValue: defaultValue,
+    id: controllers.id,
+    maxLength: maxLength,
+    name: name,
+    onBlur: controllers.onBlur,
+    onChange: controllers.onChange,
+    onFocus: controllers.onFocus,
+    onKeyDown: controllers.onKeyDown,
+    placeholder: placeholder,
+    ref: ref,
+    size: 1,
+    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 column = (_columns$columnIndex = columns === null || columns === void 0 ? void 0 : columns[columnIndex]) != null ? _columns$columnIndex : null;
-  var isRightAligned = column ? column.isRightAligned : false;
-  var hasError = !!error;
-  var errorMessage = error;
-  var icon = hasError && React__default.createElement("div", {
-    className: classnames(styles$h['data-table-cell__error-icon'], (_classnames = {}, _classnames[styles$h['data-table-cell__error-icon--right-align']] = isRightAligned, _classnames[styles$h['data-table-cell__error-icon--left-align']] = !isRightAligned, _classnames))
-  }, React__default.createElement(IconTimesOctagon, {
-    size: "medium",
-    color: RADISH400
+var TimeFieldInput = function TimeFieldInput(_ref) {
+  var inputProps = _ref.inputProps,
+      allOtherProps = _ref.allOtherProps;
+  return 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);
+    },
+    onClick: allOtherProps.onClick,
+    onMouseEnter: allOtherProps.onMouseEnter,
+    onMouseLeave: allOtherProps.onMouseLeave,
+    onInput: function onInput(e) {
+      var target = e.target;
+      allOtherProps.onInputChange(target.value);
+    }
   }));
-  var TableCell = React__default.createElement("td", {
-    className: classnames((_classnames2 = {}, _classnames2[styles$h['data-table-cell--invalid']] = hasError, _classnames2[styles$h['data-table-cell--no-padding']] = noPadding, _classnames2[styles$h['data-table-cell--vertical-border']] = hasVerticalBorders, _classnames2), styles$h['data-table-cell']),
-    colSpan: colSpan,
-    ref: ref
-  }, React__default.createElement("div", {
-    className: classnames(styles$h['data-table-cell__content'], (_classnames3 = {}, _classnames3[styles$h['data-table-cell__content--with-error']] = hasError, _classnames3[styles$h['data-table-cell__content--right-align']] = isRightAligned, _classnames3))
-  }, isRightAligned && icon, children, !isRightAligned && icon));
-  return React__default.createElement(Tooltip$1, {
-    overlay: errorMessage,
-    delayOnClose: delayOnCloseError,
-    placement: "top",
-    theme: "white"
-  }, TableCell);
 };
 
-var DataTableCell = forwardRef(DataTableCellElement);
+var _excluded$2h = ["placeholder", "autoComplete"];
 
-var DataTableRowActions = function DataTableRowActions(_ref) {
-  var actions = _ref.actions,
-      columnIndex = _ref.columnIndex;
-  var kebabMenuItems = actions.filter(function (action) {
-    return action.showInKebab === undefined || action.showInKebab;
-  });
-  var sideActions = actions.filter(function (action) {
-    return action.showInKebab === false;
-  });
-  return React__default.createElement(DataTableCell, {
-    columnIndex: columnIndex
-  }, React__default.createElement("div", {
-    className: styles$a['actions'],
-    "data-testid": "data-table-dropdown-menu"
-  }, sideActions.length > 0 && sideActions.map(function (action) {
-    return React__default.createElement(Button$1, Object.assign({
-      key: action.action,
-      onClick: action.onAction,
-      theme: typeof action.label === 'string' ? 'default' : 'link-icon'
-    }, action.showInKebab === false ? action.buttonProps : {}), action.label);
-  }), kebabMenuItems.length > 0 && React__default.createElement(KebabMenu, {
-    actions: kebabMenuItems
-  })));
-};
+var TimeFieldDropdownElement = function TimeFieldDropdownElement(_ref, ref) {
+  var _ref$placeholder = _ref.placeholder,
+      placeholder = _ref$placeholder === void 0 ? '9:00 AM' : _ref$placeholder,
+      _ref$autoComplete = _ref.autoComplete,
+      autoComplete = _ref$autoComplete === void 0 ? 'off' : _ref$autoComplete,
+      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2h);
+
+  var _useTextField = useTextField(_extends({}, allOtherProps, {
+    placeholder: placeholder,
+    autoComplete: autoComplete,
+    ref: ref
+  })),
+      inputProps = _useTextField.inputProps,
+      fieldProps = _useTextField.fieldProps;
 
-var Context$1 = createContext({});
-var useFormContext = function useFormContext() {
-  var context = useContext(Context$1);
-  return context || {};
+  return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement(TimeFieldInput, {
+    inputProps: inputProps,
+    allOtherProps: allOtherProps
+  }));
 };
 
-var useFieldId = function useFieldId(_ref) {
-  var name = _ref.name,
-      inputId = _ref.id;
-  var id = useMemo(function () {
-    return inputId ? inputId : name + "-" + Math.random();
-  }, [inputId, name]);
-  return id;
-};
+var TimeFieldDropdownTrigger = forwardRef(TimeFieldDropdownElement);
 
-var getFormikState = function getFormikState(name, formik) {
-  if (formik === undefined) {
-    return null;
-  }
+var Dropdown = function Dropdown(_ref) {
+  var trigger = _ref.trigger,
+      _ref$triggersOn = _ref.triggersOn,
+      triggersOn = _ref$triggersOn === void 0 ? DROPDOWN_TRIGGER.CLICK : _ref$triggersOn,
+      _ref$alignment = _ref.alignment,
+      alignment = _ref$alignment === void 0 ? DROPDOWN_ALIGNEMNT.RIGHT : _ref$alignment,
+      width = _ref.width,
+      maxHeight = _ref.maxHeight,
+      testId = _ref.testId,
+      children = _ref.children,
+      triggerWidth = _ref.triggerWidth;
 
-  var formikPath = getFormikArrayPath(name);
+  var _useState = useState(false),
+      isOpen = _useState[0],
+      setIsOpen = _useState[1];
 
-  if (formikPath.length === 0) {
-    return null;
-  }
+  var triggerRef = useRef(null);
+  var paneRef = useRef(null);
+  var isFocusingOverlay = useRef(false);
 
-  var formikLatestLevel = formikPath.reduce(function (acc, path) {
-    var _acc$touched, _acc$error, _acc$value;
+  var handleToggleDropdown = function handleToggleDropdown() {
+    return setIsOpen(!isOpen);
+  };
 
-    return {
-      touched: (_acc$touched = acc.touched) === null || _acc$touched === void 0 ? void 0 : _acc$touched[path],
-      error: (_acc$error = acc.error) === null || _acc$error === void 0 ? void 0 : _acc$error[path],
-      value: (_acc$value = acc.value) === null || _acc$value === void 0 ? void 0 : _acc$value[path]
-    };
-  }, {
-    touched: formik.touched,
-    error: formik.errors,
-    value: formik.values
-  });
-  return {
-    error: formikLatestLevel.touched ? formikLatestLevel.error : undefined,
-    value: formikLatestLevel.value
+  var handleMouseClick = function handleMouseClick(e) {
+    if (trigger.type === TimeFieldDropdownTrigger) {
+      setIsOpen(true);
+    } else {
+      handleToggleDropdown();
+    }
+
+    e.stopPropagation();
+
+    if ('onClick' in trigger.props) {
+      trigger.props.onClick(e);
+    }
   };
-};
-var getFormikArrayPath = function getFormikArrayPath(name) {
-  return name.split(/[^a-zA-Z0-9]/).filter(Boolean);
-};
 
-var useFieldControllers = function useFieldControllers(_ref) {
-  var name = _ref.name,
-      inputId = _ref.id,
-      value = _ref.value,
-      _onChange = _ref.onChange,
-      _onBlur = _ref.onBlur,
-      _onFocus = _ref.onFocus,
-      _onKeyDown = _ref.onKeyDown,
-      error = _ref.error,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'text' : _ref$type;
+  var handleMouseEnter = function handleMouseEnter(e) {
+    if (triggersOn !== 'hover') {
+      return;
+    }
 
-  var _useFormContext = useFormContext(),
-      formik = _useFormContext.formik;
+    setIsOpen(true);
 
-  var id = useFieldId({
-    name: name,
-    id: inputId
-  });
-  var controllers = {
-    id: id,
-    error: error,
-    value: value,
-    onChange: function onChange(e) {
-      return _onChange && _onChange(e.target.value);
-    },
-    onBlur: function onBlur(e) {
-      return _onBlur && _onBlur(e.target.value);
-    },
-    onFocus: function onFocus(e) {
-      return _onFocus && _onFocus(e.target.value);
-    },
-    onKeyDown: function onKeyDown(e) {
-      return _onKeyDown && _onKeyDown(e.key);
+    if ('onMouseEnter' in trigger.props) {
+      trigger.props.onMouseEnter(e);
     }
   };
-  var formikState = getFormikState(name, formik);
 
-  if (formik && formikState) {
-    var currencyBlur = function currencyBlur() {
-      if (type === 'currency') {
-        formik.setFieldValue(name, Number(value).toFixed(2));
+  var handleFocus = function handleFocus(e) {
+    if (triggersOn !== 'hover') {
+      if (trigger.type === TimeFieldDropdownTrigger && !isOpen) {
+        setIsOpen(true);
       }
-    };
 
-    controllers = _extends({}, controllers, {
-      error: error !== undefined ? controllers.error : formikState.error,
-      value: value !== undefined ? controllers.value : formikState.value,
-      onChange: _onChange ? controllers.onChange : function (e) {
-        return formik.setFieldValue(name, e.target.value);
-      },
-      onBlur: _onBlur ? function (e) {
-        _onBlur && _onBlur(e.target.value);
-        formik.setFieldTouched(name);
-        currencyBlur();
-      } : function () {
-        formik.setFieldTouched(name);
-        currencyBlur();
+      if ('onFocus' in trigger.props) {
+        trigger.props.onFocus(e);
       }
-    });
-  }
 
-  return controllers;
-};
-
-var styles$o = {"label":"_h724f","label--truncate":"_1VUoF"};
+      return;
+    }
 
-var isEllipsisActive = function isEllipsisActive(e) {
-  return e.offsetWidth < e.scrollWidth;
-};
+    setIsOpen(true);
 
-var useLabelTooltip = function useLabelTooltip(labelId, tooltipContent, truncate) {
-  var _useState = useState(false),
-      showTooltip = _useState[0],
-      setShowTooltip = _useState[1];
+    if ('onFocus' in trigger.props) {
+      trigger.props.onFocus(e);
+    }
+  };
 
-  var shouldTruncate = typeof tooltipContent === 'string' && truncate;
-  var labelElement = document.getElementById(labelId);
-  var isHidden = labelElement && labelElement.offsetParent === null;
-  var handleApplyTooltip = useCallback(function () {
-    if (!shouldTruncate) {
+  var handleMouseLeave = function handleMouseLeave(e) {
+    if (triggersOn !== 'hover' || !paneRef.current) {
       return;
     }
 
-    var labelElement = document.getElementById(labelId);
+    var panePosition = paneRef.current.getBoundingClientRect();
 
-    if (!labelElement) {
-      return;
+    if (!isGoingTowardsPane(panePosition, e.clientY)) {
+      setIsOpen(false);
+
+      if ('onMouseLeave' in trigger.props) {
+        trigger.props.onMouseLeave && trigger.props.onMouseLeave(e);
+      }
     }
+  };
 
-    var shouldShowTooltip = isEllipsisActive(labelElement);
+  var handlePaneMouseEnter = function handlePaneMouseEnter() {
+    isFocusingOverlay.current = true;
+  };
 
-    if (showTooltip !== shouldShowTooltip) {
-      setShowTooltip(shouldShowTooltip);
+  var handlePaneMouseLeave = function handlePaneMouseLeave() {
+    isFocusingOverlay.current = false;
+
+    if (triggersOn === 'hover') {
+      setIsOpen(false);
     }
-  }, [shouldTruncate, isHidden]);
-  useEffect(function () {
-    var onWindowResize = debounce(handleApplyTooltip, 300);
-    window.addEventListener('resize', onWindowResize);
-    return function () {
-      return window.removeEventListener('resize', onWindowResize);
-    };
-  }, [handleApplyTooltip]);
-  useLayoutEffect(handleApplyTooltip, [handleApplyTooltip]);
-  return {
-    showTooltip: showTooltip,
-    shouldTruncate: shouldTruncate
   };
-};
 
-var Label = function Label(_ref) {
-  var _classNames;
+  var handleOnBlur = function handleOnBlur() {
+    if (!paneRef || !(paneRef !== null && paneRef !== void 0 && paneRef.current)) {
+      return;
+    }
 
-  var htmlFor = _ref.htmlFor,
-      children = _ref.children,
-      _ref$truncate = _ref.truncate,
-      truncate = _ref$truncate === void 0 ? true : _ref$truncate;
-  var labelId = "label-" + htmlFor;
+    var focusableElements = getKeyboardFocusableElements(paneRef.current);
 
-  var _useLabelTooltip = useLabelTooltip(labelId, children, truncate),
-      showTooltip = _useLabelTooltip.showTooltip,
-      shouldTruncate = _useLabelTooltip.shouldTruncate;
+    if (focusableElements.length > 0) {
+      window.setTimeout(function () {
+        return focusableElements[0].focus();
+      }, 0);
+    } else if (!isFocusingOverlay.current) {
+      setIsOpen(false);
+    }
+  };
 
-  var LabelElement = React__default.createElement("label", {
-    htmlFor: htmlFor,
-    id: labelId,
-    className: classnames(styles$o['label'], (_classNames = {}, _classNames[styles$o['label--truncate']] = shouldTruncate, _classNames))
-  }, children);
+  var getRef = function getRef() {
+    if ((trigger.type === Button$1 || trigger.type === TimeFieldDropdownTrigger) && trigger.ref) {
+      return trigger.ref;
+    }
 
-  if (showTooltip) {
-    return React__default.createElement(Tooltip$1, {
-      overlay: children,
-      placement: "top"
-    }, LabelElement);
-  }
+    return triggerRef;
+  };
 
-  return LabelElement;
+  var updatedRef = getRef();
+  var triggerProps = {
+    onClick: handleMouseClick,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onBlur: handleOnBlur,
+    ref: updatedRef,
+    style: {
+      width: triggerWidth === 'full' ? '100%' : 'fit-content'
+    },
+    onFocus: handleFocus
+  };
+  return React__default.createElement(DropdownContext.Provider, {
+    value: {
+      isOpen: isOpen,
+      onToggleDropdown: handleToggleDropdown,
+      triggerRef: updatedRef,
+      paneRef: paneRef
+    }
+  }, trigger.type === Button$1 || trigger.type === TimeFieldDropdownTrigger ? React__default.cloneElement(trigger, _extends({}, trigger.props, triggerProps)) : React__default.createElement("button", Object.assign({}, triggerProps, {
+    className: styles$c['dropdown__trigger'],
+    ref: updatedRef,
+    onFocus: handleFocus
+  }), trigger), React__default.createElement(DropdownPane, {
+    width: width,
+    maxHeight: maxHeight,
+    onMouseEnter: handlePaneMouseEnter,
+    onMouseLeave: handlePaneMouseLeave,
+    alignment: alignment,
+    testId: testId
+  }, children));
+};
+
+var KebabMenu = function KebabMenu(_ref) {
+  var actions = _ref.actions;
+  return React__default.createElement(Dropdown, {
+    trigger: React__default.createElement(Button$1, {
+      theme: "link-icon"
+    }, React__default.createElement(IconEllipsisV, null)),
+    alignment: "right"
+  }, React__default.createElement(DropdownList, null, actions.map(function (action) {
+    return React__default.createElement(DropdownListItem, {
+      onClick: action.onAction,
+      key: action.action
+    }, action.label);
+  })));
 };
 
-var styles$p = {"caption":"_1DWBq"};
+var styles$q = {"data-table-cell":"_2Ybjx","data-table-cell--no-padding":"_5KXHH","data-table-cell--vertical-border":"_2-I0j","data-table-cell--invalid":"_D73Vx","data-table-cell__content":"_3A9-M","data-table-cell__content--right-align":"_17Km7","data-table-cell__content--with-error":"_2c6KQ","data-table-cell__error-icon":"_2hIl3","data-table-cell__error-icon--right-align":"_8Uhyd","data-table-cell__error-icon--left-align":"_3X51R"};
 
-var Caption = function Caption(_ref) {
-  var fieldId = _ref.fieldId,
-      children = _ref.children;
-  return React__default.createElement("div", {
-    id: fieldId && fieldId + "-describer",
-    className: styles$p['caption']
-  }, children);
-};
+var DataTableCellElement = function DataTableCellElement(_ref, ref) {
+  var _columns$columnIndex, _classnames, _classnames2, _classnames3;
 
-var styles$q = {"error-message":"_nZ2MD"};
+  var children = _ref.children,
+      columnIndex = _ref.columnIndex,
+      error = _ref.error,
+      _ref$delayOnCloseErro = _ref.delayOnCloseError,
+      delayOnCloseError = _ref$delayOnCloseErro === void 0 ? false : _ref$delayOnCloseErro,
+      _ref$noPadding = _ref.noPadding,
+      noPadding = _ref$noPadding === void 0 ? false : _ref$noPadding,
+      colSpan = _ref.colSpan;
 
-var ErrorMessage = function ErrorMessage(_ref) {
-  var fieldId = _ref.fieldId,
-      children = _ref.children,
-      testId = _ref.testId;
-  return React__default.createElement("div", {
-    id: fieldId && fieldId + "-error-message",
-    className: styles$q['error-message'],
-    "data-testid": testId
-  }, React__default.createElement(Inline, {
-    space: 8,
-    alignItems: "center"
+  var _useDataTableContext = useDataTableContext(),
+      columns = _useDataTableContext.columns,
+      hasVerticalBorders = _useDataTableContext.hasVerticalBorders;
+
+  var column = (_columns$columnIndex = columns === null || columns === void 0 ? void 0 : columns[columnIndex]) != null ? _columns$columnIndex : null;
+  var isRightAligned = column ? column.isRightAligned : false;
+  var hasError = !!error;
+  var errorMessage = error;
+  var icon = hasError && React__default.createElement("div", {
+    className: classnames(styles$q['data-table-cell__error-icon'], (_classnames = {}, _classnames[styles$q['data-table-cell__error-icon--right-align']] = isRightAligned, _classnames[styles$q['data-table-cell__error-icon--left-align']] = !isRightAligned, _classnames))
   }, React__default.createElement(IconTimesOctagon, {
-    color: RADISH400,
-    size: "medium"
-  }), children));
+    size: "medium",
+    color: RADISH400
+  }));
+  var TableCell = React__default.createElement("td", {
+    className: classnames((_classnames2 = {}, _classnames2[styles$q['data-table-cell--invalid']] = hasError, _classnames2[styles$q['data-table-cell--no-padding']] = noPadding, _classnames2[styles$q['data-table-cell--vertical-border']] = hasVerticalBorders, _classnames2), styles$q['data-table-cell']),
+    colSpan: colSpan,
+    ref: ref
+  }, React__default.createElement("div", {
+    className: classnames(styles$q['data-table-cell__content'], (_classnames3 = {}, _classnames3[styles$q['data-table-cell__content--with-error']] = hasError, _classnames3[styles$q['data-table-cell__content--right-align']] = isRightAligned, _classnames3))
+  }, isRightAligned && icon, children, !isRightAligned && icon));
+  return React__default.createElement(Tooltip$1, {
+    overlay: errorMessage,
+    delayOnClose: delayOnCloseError,
+    placement: "top",
+    theme: "white"
+  }, TableCell);
 };
 
-var Field = function Field(_ref) {
-  var id = _ref.id,
-      label = _ref.label,
-      caption = _ref.caption,
-      error = _ref.error,
-      children = _ref.children;
-  var shouldRenderLabel = label || typeof label === 'string';
-  return React__default.createElement(Stack, {
-    space: 8,
-    flexItems: true
-  }, shouldRenderLabel && React__default.createElement(Label, {
-    htmlFor: id
-  }, label), children, caption && React__default.createElement(Caption, {
-    fieldId: id
-  }, caption), error && React__default.createElement(ErrorMessage, {
-    fieldId: id
-  }, error));
+var DataTableCell = forwardRef(DataTableCellElement);
+
+var DataTableRowActions = function DataTableRowActions(_ref) {
+  var actions = _ref.actions,
+      columnIndex = _ref.columnIndex;
+  var kebabMenuItems = actions.filter(function (action) {
+    return action.showInKebab === undefined || action.showInKebab;
+  });
+  var sideActions = actions.filter(function (action) {
+    return action.showInKebab === false;
+  });
+  return React__default.createElement(DataTableCell, {
+    columnIndex: columnIndex
+  }, React__default.createElement("div", {
+    className: styles$a['actions'],
+    "data-testid": "data-table-dropdown-menu"
+  }, sideActions.length > 0 && sideActions.map(function (action) {
+    return React__default.createElement(Button$1, Object.assign({
+      key: action.action,
+      onClick: action.onAction,
+      theme: typeof action.label === 'string' ? 'default' : 'link-icon'
+    }, action.showInKebab === false ? action.buttonProps : {}), action.label);
+  }), kebabMenuItems.length > 0 && React__default.createElement(KebabMenu, {
+    actions: kebabMenuItems
+  })));
 };
 
 var styles$r = {"affix-container":"_ybKOk","affix-container--prefixed":"_2COk3","affix-container--suffixed":"_1xXXN","prefix":"_eX5OL","suffix":"__YH01"};
@@ -5796,7 +6018,7 @@ var DataTableEditableCellElement = function DataTableEditableCellElement(_ref, r
 
 var DataTableEditableCell = forwardRef(DataTableEditableCellElement);
 
-var _excluded$2h = ["children", "onClick", "isSelected", "actions", "hasDefaultPadding", "hasDefaultCell", "testId"];
+var _excluded$2i = ["children", "onClick", "isSelected", "actions", "hasDefaultPadding", "hasDefaultCell", "testId"];
 
 var DataTableRowComponent = function DataTableRowComponent(_ref, ref) {
   var _classnames;
@@ -5810,7 +6032,7 @@ var DataTableRowComponent = function DataTableRowComponent(_ref, ref) {
       _ref$hasDefaultCell = _ref.hasDefaultCell,
       hasDefaultCell = _ref$hasDefaultCell === void 0 ? true : _ref$hasDefaultCell,
       testId = _ref.testId,
-      nativeDivProps = _objectWithoutPropertiesLoose(_ref, _excluded$2h);
+      nativeDivProps = _objectWithoutPropertiesLoose(_ref, _excluded$2i);
 
   var _useDataTableContext = useDataTableContext(),
       showActionMenu = _useDataTableContext.showActionMenu;
@@ -6218,13 +6440,13 @@ var isReactSelectElement = function isReactSelectElement(element) {
 
 var styles$w = {"custom-control":"_1cDCR"};
 
-var _excluded$2i = ["children"];
+var _excluded$2j = ["children"];
 
 function CustomControl(_ref) {
   var _props$getValue;
 
   var children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$2i);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$2j);
 
   var SelectedOptionPrefix = props.selectProps.componentsProps.SelectedOptionPrefix;
   var selectedOption = (_props$getValue = props.getValue()) === null || _props$getValue === void 0 ? void 0 : _props$getValue[0];
@@ -6242,11 +6464,11 @@ function CustomControl(_ref) {
   }, props)), children)) : children);
 }
 
-var _excluded$2j = ["children"];
+var _excluded$2k = ["children"];
 
 function CustomOption(_ref) {
   var children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$2j);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$2k);
 
   var UserCustomOption = props.selectProps.componentsProps.UserCustomOption;
   return React__default.createElement(components.Option, Object.assign({}, props), React__default.createElement(UserCustomOption, Object.assign({}, props), children));
@@ -6399,13 +6621,11 @@ var CustomContainer = function CustomContainer(props) {
 
 var styles$x = {"custom-menu-text-field":"_2-zhH","custom-menu-hr":"_3sdnK","custom-menu-div":"_2F1jP"};
 
-var styles$y = {"text-field":"_20YOA","text-field--invalid":"_3kUSh","text-field--prefixed":"_3IU3Q","text-field--suffixed":"_QXJOD"};
-
-var _excluded$2k = ["children"];
+var _excluded$2l = ["children"];
 
 function CustomMenu(_ref) {
   var children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$2k);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$2l);
 
   var _props$selectProps$co = props.selectProps.componentsProps,
       creatableButton = _props$selectProps$co.creatableButton,
@@ -6416,6 +6636,10 @@ function CustomMenu(_ref) {
       showFooter = _useState[0],
       setShowFooter = _useState[1];
 
+  var _useState2 = useState(''),
+      inputDefaultValue = _useState2[0],
+      setInputDefaultValue = _useState2[1];
+
   var textFieldRef = useRef(null);
   var containerRef = useRef(null);
 
@@ -6426,7 +6650,11 @@ function CustomMenu(_ref) {
       return React__default.createElement(Button$1, {
         theme: "link-primary",
         onClick: function onClick() {
-          return setShowFooter(true);
+          if (props.selectProps.inputValue) {
+            setInputDefaultValue(props.selectProps.inputValue);
+          }
+
+          setShowFooter(true);
         },
         size: "full-width"
       }, React__default.createElement(Inline, {
@@ -6448,6 +6676,8 @@ function CustomMenu(_ref) {
     if (textFieldRef.current && textFieldRef.current.value.trim() !== '') {
       onCreate(textFieldRef.current.value);
       textFieldRef.current.value = '';
+      setShowFooter(false);
+      setInputDefaultValue('');
     }
   };
 
@@ -6467,7 +6697,7 @@ function CustomMenu(_ref) {
     flex: [1],
     flexItems: true
   }, React__default.createElement("input", {
-    className: classnames(styles$y['text-field'], styles$x['custom-menu-text-field']),
+    className: classnames(textFieldStyles['text-field'], styles$x['custom-menu-text-field']),
     autoCorrect: "off",
     autoComplete: "off",
     spellCheck: "false",
@@ -6497,7 +6727,8 @@ function CustomMenu(_ref) {
     },
     ref: textFieldRef,
     "data-testid": "select-create-option-input",
-    autoFocus: true
+    autoFocus: true,
+    defaultValue: inputDefaultValue
   }), React__default.createElement(Button$1, {
     onClick: onCreateButton,
     onKeyDown: function onKeyDown(e) {
@@ -6649,9 +6880,9 @@ var ToolbarSelect = function ToolbarSelect(_ref) {
   });
 };
 
-var styles$z = {"date-filter":"_2X-yg","date-filter--wide":"_3O5Kh"};
+var styles$y = {"date-filter":"_2X-yg","date-filter--wide":"_3O5Kh"};
 
-var styles$A = {"date-filter-display":"_23gnr","date-filter-display--non-interactive":"_Zv1Se","date-filter-display--wide":"_18V8V","date-filter-display__display-icon":"_2v9v_"};
+var styles$z = {"date-filter-display":"_23gnr","date-filter-display--non-interactive":"_Zv1Se","date-filter-display--wide":"_18V8V","date-filter-display__display-icon":"_2v9v_"};
 
 var DATE_FILTER_MODE = {
   DAY: 'day',
@@ -6693,12 +6924,10 @@ var DateFilterText = function DateFilterText(_ref) {
       var weekRange = createWeekRange(selectedDate, weekStart);
       return React__default.createElement(Inline, {
         space: 12
-      }, React__default.createElement("span", null, getDateString(weekRange.start, mode)), React__default.createElement("span", {
-        className: "date-filter__to_date_icon"
-      }, React__default.createElement(IconArrowRight, {
+      }, React__default.createElement("span", null, getDateString(weekRange.start, mode)), React__default.createElement(IconArrowRight, {
         size: "small",
         color: GREY400
-      })), React__default.createElement("span", null, getDateString(weekRange.end, mode)));
+      }), React__default.createElement("span", null, getDateString(weekRange.end, mode)));
 
     default:
       return React__default.createElement("span", null, getDateString(selectedDate, mode));
@@ -6713,14 +6942,14 @@ var DateFilterDisplay = function DateFilterDisplay(_ref) {
       weekStart = _ref.weekStart,
       onClick = _ref.onClick;
   return React__default.createElement("button", {
-    className: classnames(styles$A['date-filter-display'], (_classnames = {}, _classnames[styles$A['date-filter-display--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames[styles$A['date-filter-display--non-interactive']] = mode === DATE_FILTER_MODE.MONTH, _classnames)),
+    className: classnames(styles$z['date-filter-display'], (_classnames = {}, _classnames[styles$z['date-filter-display--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames[styles$z['date-filter-display--non-interactive']] = mode === DATE_FILTER_MODE.MONTH, _classnames)),
     onClick: onClick,
     tabIndex: mode === DATE_FILTER_MODE.MONTH ? -1 : undefined
   }, React__default.createElement(Inline, {
     space: 12,
     alignItems: "center"
   }, React__default.createElement("div", {
-    className: classnames(styles$A['date-filter-display__display-icon'])
+    className: classnames(styles$z['date-filter-display__display-icon'])
   }, React__default.createElement(IconCalendarAlt, {
     size: "flexible",
     color: GREY400
@@ -6731,7 +6960,7 @@ var DateFilterDisplay = function DateFilterDisplay(_ref) {
   })));
 };
 
-var styles$B = {"date-stepper":"_s8MoI","date-stepper--backward":"_34Yoi","date-stepper--forward":"_BeWpb"};
+var styles$A = {"date-stepper":"_s8MoI","date-stepper--backward":"_34Yoi","date-stepper--forward":"_BeWpb"};
 
 var handleDateStepper = function handleDateStepper(date, mode, stepDirection, onChange) {
   var step = stepDirection === STEP_DIRECTION.FORWARD ? 1 : -1;
@@ -6766,7 +6995,7 @@ var DateFilterStepper = function DateFilterStepper(_ref) {
       onChange = _ref.onChange,
       date = _ref.date;
   return React__default.createElement("button", {
-    className: classnames(styles$B['date-stepper'], (_classnames = {}, _classnames[styles$B['date-stepper--backward']] = stepDirection === STEP_DIRECTION.BACKWARD, _classnames[styles$B['date-stepper--forward']] = stepDirection === STEP_DIRECTION.FORWARD, _classnames)),
+    className: classnames(styles$A['date-stepper'], (_classnames = {}, _classnames[styles$A['date-stepper--backward']] = stepDirection === STEP_DIRECTION.BACKWARD, _classnames[styles$A['date-stepper--forward']] = stepDirection === STEP_DIRECTION.FORWARD, _classnames)),
     onClick: function onClick() {
       return handleDateStepper(date, mode, stepDirection, onChange);
     }
@@ -6802,7 +7031,7 @@ var DateFilter = function DateFilter(_ref) {
   return React__default.createElement("div", {
     "data-testid": testId,
     ref: calendarAnchorRef,
-    className: classnames(styles$z['date-filter'], (_classnames = {}, _classnames[styles$z['date-filter--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames))
+    className: classnames(styles$y['date-filter'], (_classnames = {}, _classnames[styles$y['date-filter--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames))
   }, React__default.createElement(Inline, {
     space: 0
   }, React__default.createElement(DateFilterStepper, {
@@ -6843,7 +7072,7 @@ var DateFilter = function DateFilter(_ref) {
   }));
 };
 
-var styles$C = {"segmented-control":"_J5ph7","segmented-control__button":"_2xgv4","segmented-control__button--selected":"_1vG3O","segmented-control__divider":"_1uKNF"};
+var styles$B = {"segmented-control":"_J5ph7","segmented-control__button":"_2xgv4","segmented-control__button--selected":"_1vG3O","segmented-control__divider":"_1uKNF"};
 
 var SegmentedControl = function SegmentedControl(_ref) {
   var options = _ref.options,
@@ -6860,7 +7089,7 @@ var SegmentedControl = function SegmentedControl(_ref) {
   };
 
   return React__default.createElement("div", {
-    className: styles$C['segmented-control'],
+    className: styles$B['segmented-control'],
     "data-testid": testId
   }, options.map(function (option, i) {
     var _classnames;
@@ -6871,18 +7100,18 @@ var SegmentedControl = function SegmentedControl(_ref) {
       onClick: function onClick() {
         return onChange(option);
       },
-      className: classnames(styles$C['segmented-control__button'], (_classnames = {}, _classnames[styles$C['segmented-control__button--selected']] = isSelected(option), _classnames))
+      className: classnames(styles$B['segmented-control__button'], (_classnames = {}, _classnames[styles$B['segmented-control__button--selected']] = isSelected(option), _classnames))
     }, option), !isLastElement(i) && React__default.createElement("div", {
-      className: classnames(styles$C['segmented-control__divider'])
+      className: classnames(styles$B['segmented-control__divider'])
     }));
   }));
 };
 
-var styles$D = {"form--standard-size":"_3CaV0"};
+var styles$C = {"form--standard-size":"_3CaV0"};
 
-var styles$E = {"card":"_29ZIp","card__body":"_3Q8NT","card__body--interactive":"_2Fah6","card--focus":"_SGno0","card__body--focus":"_1zqRN","card__body--with-kebab":"_3Hwms","card__kebab":"_TmEUS"};
+var styles$D = {"card":"_29ZIp","card__body":"_3Q8NT","card__body--interactive":"_2Fah6","card--focus":"_SGno0","card__body--focus":"_1zqRN","card__body--with-kebab":"_3Hwms","card__kebab":"_TmEUS"};
 
-var _excluded$2l = ["children", "onClick", "isSelected", "actions", "testId"];
+var _excluded$2m = ["children", "onClick", "isSelected", "actions", "testId"];
 
 var Card = function Card(_ref) {
   var _classnames, _classnames2;
@@ -6893,22 +7122,22 @@ var Card = function Card(_ref) {
       isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
       actions = _ref.actions,
       testId = _ref.testId,
-      positionProps = _objectWithoutPropertiesLoose(_ref, _excluded$2l);
+      positionProps = _objectWithoutPropertiesLoose(_ref, _excluded$2m);
 
   var positionStyles = usePositionStyles(positionProps);
   return React__default.createElement("div", {
-    className: classnames(styles$E['card']),
+    className: classnames(styles$D['card']),
     style: positionStyles
   }, onClick ? React__default.createElement("button", {
-    className: classnames(styles$E['card__body'], styles$E['card__body--interactive'], (_classnames = {}, _classnames[styles$E['card__body--focus']] = isSelected, _classnames[styles$E['card__body--with-kebab']] = actions, _classnames)),
+    className: classnames(styles$D['card__body'], styles$D['card__body--interactive'], (_classnames = {}, _classnames[styles$D['card__body--focus']] = isSelected, _classnames[styles$D['card__body--with-kebab']] = actions, _classnames)),
     "data-testid": testId,
     tabIndex: 0,
     onClick: onClick
   }, children) : React__default.createElement("div", {
-    className: classnames(styles$E['card__body'], (_classnames2 = {}, _classnames2[styles$E['card__body--focus']] = isSelected, _classnames2[styles$E['card__body--with-kebab']] = actions, _classnames2)),
+    className: classnames(styles$D['card__body'], (_classnames2 = {}, _classnames2[styles$D['card__body--focus']] = isSelected, _classnames2[styles$D['card__body--with-kebab']] = actions, _classnames2)),
     "data-testid": testId
   }, children), actions && React__default.createElement("div", {
-    className: classnames(styles$E['card__kebab'])
+    className: classnames(styles$D['card__kebab'])
   }, React__default.createElement(KebabMenu, {
     actions: actions
   })));
@@ -6922,7 +7151,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
   }, children);
 };
 
-var styles$F = {"breadcrumb-item":"_XFvYB"};
+var styles$E = {"breadcrumb-item":"_XFvYB"};
 
 var BreadcrumbItem = function BreadcrumbItem(_ref) {
   var href = _ref.href,
@@ -6935,24 +7164,24 @@ var BreadcrumbItem = function BreadcrumbItem(_ref) {
   }), children);
   return reloadDocument ? React__default.createElement("a", {
     href: href,
-    className: styles$F['breadcrumb-item'],
+    className: styles$E['breadcrumb-item'],
     "data-testid": testId
   }, content) : React__default.createElement(Link$1, {
     to: href,
-    className: styles$F['breadcrumb-item'],
+    className: styles$E['breadcrumb-item'],
     relative: "path",
     reloadDocument: reloadDocument,
     "data-testid": testId
   }, content);
 };
 
-var styles$G = {"page-breadcrumbs":"_HAJCd"};
+var styles$F = {"page-breadcrumbs":"_HAJCd"};
 
 var PageBreadcrumbs = function PageBreadcrumbs(_ref) {
   var breadcrumbs = _ref.breadcrumbs;
   var items = getBreadbrumbItems(breadcrumbs);
   return React__default.createElement("div", {
-    className: styles$G['page-breadcrumbs']
+    className: styles$F['page-breadcrumbs']
   }, React__default.createElement(Breadcrumbs, null, items));
 };
 
@@ -6977,7 +7206,7 @@ var getBreadbrumbItems = function getBreadbrumbItems(breadcrumbs) {
   }, breadcrumbs.label);
 };
 
-var styles$H = {"page":"_FbhTM","page--fullwidth":"_3QyAE","page--restricted":"_17aOG"};
+var styles$G = {"page":"_FbhTM","page--fullwidth":"_3QyAE","page--restricted":"_17aOG"};
 
 var PAGE_SIZES = {
   FULL_WIDTH: 'fullwidth',
@@ -7000,7 +7229,7 @@ var Page = function Page(_ref) {
   var hasHeader = title || actions;
   var hasPageBlocks = hasHeader || banner || filterBar;
   return React__default.createElement("div", {
-    className: classnames(styles$H['page'], (_classNames = {}, _classNames[styles$H['page--restricted']] = size === PAGE_SIZES.RESTRICTED, _classNames[styles$H['page--fullwidth']] = size === PAGE_SIZES.FULL_WIDTH, _classNames)),
+    className: classnames(styles$G['page'], (_classNames = {}, _classNames[styles$G['page--restricted']] = size === PAGE_SIZES.RESTRICTED, _classNames[styles$G['page--fullwidth']] = size === PAGE_SIZES.FULL_WIDTH, _classNames)),
     "data-testid": testId
   }, React__default.createElement(Stack, {
     space: 20
@@ -7020,7 +7249,7 @@ var Page = function Page(_ref) {
   }, title), actions), subtitle && React__default.createElement(Text, null, subtitle)), banner, filterBar)), children));
 };
 
-var styles$I = {"form-section":"_7-5gD","form-section__title":"_a83vM","form-section__subtitle":"_1lKv8","form-section--no-margin":"_lZyFQ"};
+var styles$H = {"form-section":"_7-5gD","form-section__title":"_a83vM","form-section__subtitle":"_1lKv8","form-section--no-margin":"_lZyFQ"};
 
 var FormSection = function FormSection(_ref) {
   var _classnames;
@@ -7032,14 +7261,14 @@ var FormSection = function FormSection(_ref) {
       noMargin = _ref$noMargin === void 0 ? false : _ref$noMargin,
       testId = _ref.testId;
   return React__default.createElement("div", {
-    className: classnames(styles$I['form-section'], (_classnames = {}, _classnames[styles$I['form-section--no-margin']] = noMargin, _classnames)),
+    className: classnames(styles$H['form-section'], (_classnames = {}, _classnames[styles$H['form-section--no-margin']] = noMargin, _classnames)),
     "data-testid": testId
   }, React__default.createElement(Stack, null, React__default.createElement(Stack, {
     space: 8
   }, title && React__default.createElement("h2", {
-    className: classnames(styles$I['form-section__title'])
+    className: classnames(styles$H['form-section__title'])
   }, title), subtitle && React__default.createElement("h3", {
-    className: classnames(styles$I['form-section__subtitle'])
+    className: classnames(styles$H['form-section__subtitle'])
   }, subtitle)), children));
 };
 
@@ -7057,7 +7286,7 @@ var updateButtonProps$1 = function updateButtonProps(child, newProps) {
   }, newProps, child.props));
 };
 
-var styles$J = {"form-footer":"_3vVBF"};
+var styles$I = {"form-footer":"_3vVBF"};
 
 var FormFooterActions = function FormFooterActions(_ref) {
   var _actions$primary, _actions$secondary, _actions$tertiary;
@@ -7092,7 +7321,7 @@ var FormFooter = function FormFooter(_ref) {
   });
   var isInlineChildren = React__default.Children.count(children) === 1 && React__default.isValidElement(children) && children.type === Inline;
   return React__default.createElement("div", {
-    className: classnames(styles$J['form-footer']),
+    className: classnames(styles$I['form-footer']),
     "data-testid": testId
   }, actions && React__default.createElement(FormFooterActions, {
     actions: actions
@@ -7134,12 +7363,12 @@ var Form = function Form(_ref) {
     }
   }, React__default.createElement("form", {
     onSubmit: onSubmit ? handleSubmit : formik === null || formik === void 0 ? void 0 : formik.handleSubmit,
-    className: classnames((_classnames = {}, _classnames[styles$D['form--standard-size']] = !wide, _classnames)),
+    className: classnames((_classnames = {}, _classnames[styles$C['form--standard-size']] = !wide, _classnames)),
     "data-testid": testId
   }, stackContent ? React__default.createElement(Stack, null, formattedChildren) : formattedChildren));
 };
 
-var styles$K = {"form-row":"_2i-Ll"};
+var styles$J = {"form-row":"_2i-Ll"};
 
 var SIZE_25_PERCENT = '25%';
 var SIZE_33_PERCENT = '33.333%';
@@ -7170,7 +7399,7 @@ var FormRow = function FormRow(_ref) {
     space: 20,
     testId: testId,
     alignItems: "stretch",
-    extraClass: styles$K['form-row']
+    extraClass: styles$J['form-row']
   }, children, additionalColumns.map(function (_, index) {
     return React__default.createElement("span", {
       key: index,
@@ -7179,7 +7408,7 @@ var FormRow = function FormRow(_ref) {
   }));
 };
 
-var styles$L = {"text-field":"_BkzdC","text-field--focus":"_Rop31","text-field--disabled":"_2x3Cm","text-field--invalid":"_3zOwV","text-field__toolbar":"_rQqnL"};
+var styles$K = {"text-field":"_BkzdC","text-field--focus":"_Rop31","text-field--disabled":"_2x3Cm","text-field--invalid":"_3zOwV","text-field__toolbar":"_rQqnL"};
 
 var useGrowTextAreaRef = function useGrowTextAreaRef(minHeight, maxHeight, autoGrow, forwardedRef) {
   var textareaRef = useRef(null);
@@ -7255,7 +7484,7 @@ var TextAreaField = function TextAreaField(_ref) {
       updateHeight = _useGrowTextAreaRef.updateHeight;
 
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement("div", {
-    className: classnames(styles$L['text-field'], (_classnames = {}, _classnames[styles$L['text-field--invalid']] = hasError, _classnames[styles$L['text-field--disabled']] = disabled, _classnames[styles$L['text-field--focus']] = hasFocus, _classnames)),
+    className: classnames(styles$K['text-field'], (_classnames = {}, _classnames[styles$K['text-field--invalid']] = hasError, _classnames[styles$K['text-field--disabled']] = disabled, _classnames[styles$K['text-field--focus']] = hasFocus, _classnames)),
     ref: containerRef,
     onClick: function onClick(event) {
       if (event.target === (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current)) {
@@ -7287,7 +7516,7 @@ var TextAreaField = function TextAreaField(_ref) {
     },
     ref: textAreaRef
   }), toolbar && React__default.createElement("div", {
-    className: styles$L['text-field__toolbar'],
+    className: styles$K['text-field__toolbar'],
     id: controllers.id + "-toolbar",
     ref: toolbarRef,
     onClick: function onClick(event) {
@@ -7300,79 +7529,12 @@ var TextAreaField = function TextAreaField(_ref) {
   }, toolbar)));
 };
 
-var useTextField = function useTextField(_ref) {
-  var _classnames;
-
-  var autoComplete = _ref.autoComplete,
-      autoFocus = _ref.autoFocus,
-      defaultValue = _ref.defaultValue,
-      disabled = _ref.disabled,
-      error = _ref.error,
-      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,
-      value = _ref.value,
-      ref = _ref.ref,
-      testId = _ref.testId;
-  var controllers = useFieldControllers({
-    error: error,
-    id: id,
-    name: name,
-    onChange: onChange,
-    onBlur: onBlur,
-    onFocus: onFocus,
-    onKeyDown: onKeyDown,
-    value: value
-  });
-  var hasError = !!controllers.error;
-  var inputProps = {
-    'aria-describedby': hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
-    'aria-invalid': hasError,
-    autoComplete: autoComplete,
-    autoFocus: autoFocus,
-    className: classnames(styles$y['text-field'], (_classnames = {}, _classnames[styles$y['text-field--invalid']] = hasError, _classnames)),
-    'data-testid': testId,
-    disabled: disabled,
-    defaultValue: defaultValue,
-    id: controllers.id,
-    maxLength: maxLength,
-    name: name,
-    onBlur: controllers.onBlur,
-    onChange: controllers.onChange,
-    onFocus: controllers.onFocus,
-    onKeyDown: controllers.onKeyDown,
-    placeholder: placeholder,
-    ref: ref,
-    size: 1,
-    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$2m = ["prefix", "suffix"];
+var _excluded$2n = ["prefix", "suffix"];
 
 var TextFieldElement = function TextFieldElement(_ref, ref) {
   var prefix = _ref.prefix,
       suffix = _ref.suffix,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$2m);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$2n);
 
   var _useTextField = useTextField(_extends({}, props, {
     ref: ref
@@ -7434,7 +7596,7 @@ var useCheckBoxFieldControllers = function useCheckBoxFieldControllers(_ref) {
   return controllers;
 };
 
-var styles$M = {"check-box-field":"_2sg0c","check-box-field__caption":"_2LdrP","check-box-field__custom-input":"_2mA8e"};
+var styles$L = {"check-box-field":"_2sg0c","check-box-field__caption":"_2LdrP","check-box-field__custom-input":"_2mA8e"};
 
 var CheckboxField = function CheckboxField(_ref) {
   var name = _ref.name,
@@ -7464,7 +7626,7 @@ var CheckboxField = function CheckboxField(_ref) {
     flexItems: true,
     flex: ['0 0 auto']
   }, React__default.createElement("div", {
-    className: styles$M['check-box-field']
+    className: styles$L['check-box-field']
   }, React__default.createElement("input", {
     name: name,
     id: controllers.id,
@@ -7477,12 +7639,12 @@ var CheckboxField = function CheckboxField(_ref) {
     onChange: controllers.onChange,
     onBlur: controllers.onBlur
   }), React__default.createElement("span", {
-    className: styles$M['check-box-field__custom-input']
+    className: styles$L['check-box-field__custom-input']
   })), label && React__default.createElement(Label, {
     htmlFor: controllers.id,
     truncate: false
   }, label)), caption && React__default.createElement("div", {
-    className: styles$M['check-box-field__caption']
+    className: styles$L['check-box-field__caption']
   }, React__default.createElement(Caption, {
     fieldId: controllers.id
   }, caption)), controllers.error && React__default.createElement(ErrorMessage, {
@@ -7490,7 +7652,7 @@ var CheckboxField = function CheckboxField(_ref) {
   }, controllers.error));
 };
 
-var styles$N = {"pill-select-field":"_g6T-p","pill-select-field__custom-input":"_1i2AX"};
+var styles$M = {"pill-select-field":"_g6T-p","pill-select-field__custom-input":"_1i2AX"};
 
 var useMultiSelectFieldControllers = function useMultiSelectFieldControllers(_ref) {
   var name = _ref.name,
@@ -7582,7 +7744,7 @@ var PillSelectField = function PillSelectField(_ref) {
     var itemId = controllers.id + "-" + itemIdentifier;
     return React__default.createElement("div", {
       key: itemIdentifier,
-      className: styles$N['pill-select-field']
+      className: styles$M['pill-select-field']
     }, React__default.createElement("input", {
       name: name + "-" + itemIdentifier,
       id: itemId,
@@ -7604,7 +7766,7 @@ var PillSelectField = function PillSelectField(_ref) {
         controllers.onChange(newValue);
       }
     }), React__default.createElement("span", {
-      className: styles$N['pill-select-field__custom-input']
+      className: styles$M['pill-select-field__custom-input']
     }, option.label));
   })));
 };
@@ -7652,9 +7814,9 @@ var useRadioGroupFieldContext = function useRadioGroupFieldContext() {
   return context;
 };
 
-var styles$O = {"label":"_1WGz2","label--truncate":"_mQ9Rd","radio-group-field__label":"_RXyG_"};
+var styles$N = {"label":"_1WGz2","label--truncate":"_mQ9Rd","radio-group-field__label":"_RXyG_"};
 
-var styles$P = {"label":"_1Tw96","label--truncate":"_1o8rK","radio-group-box-option":"_2OGKE","radio-group-box-option__box":"_23M9k","radio-group-box-option__label":"_1r-Wg"};
+var styles$O = {"label":"_1Tw96","label--truncate":"_1o8rK","radio-group-box-option":"_2OGKE","radio-group-box-option__box":"_23M9k","radio-group-box-option__label":"_1r-Wg"};
 
 var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
   var value = _ref.value,
@@ -7669,7 +7831,7 @@ var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
     id: inputId
   });
   return React__default.createElement("label", {
-    className: styles$P['radio-group-box-option']
+    className: styles$O['radio-group-box-option']
   }, React__default.createElement("input", {
     type: "radio",
     "data-testid": testId,
@@ -7680,7 +7842,7 @@ var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
     checked: radioGroupContext.value !== undefined ? radioGroupContext.value === value : undefined,
     disabled: radioGroupContext.disabled
   }), React__default.createElement("div", {
-    className: styles$P['radio-group-box-option__box']
+    className: styles$O['radio-group-box-option__box']
   }, React__default.createElement(Stack, {
     space: 16,
     alignItems: "center",
@@ -7689,13 +7851,13 @@ var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
     space: 8,
     alignItems: "center"
   }, label && React__default.createElement("div", {
-    className: styles$P['radio-group-box-option__label']
+    className: styles$O['radio-group-box-option__label']
   }, label), caption && React__default.createElement(Caption, {
     fieldId: id
   }, caption)))));
 };
 
-var styles$Q = {"radio-group-option":"_1Clmp","radio-group-option__caption":"_3UmWA","radio-group-option__custom-input":"_1tMq-"};
+var styles$P = {"radio-group-option":"_1Clmp","radio-group-option__caption":"_3UmWA","radio-group-option__custom-input":"_1tMq-"};
 
 var RadioGroupOption = function RadioGroupOption(_ref) {
   var value = _ref.value,
@@ -7714,7 +7876,7 @@ var RadioGroupOption = function RadioGroupOption(_ref) {
     space: 8,
     alignItems: "center"
   }, React__default.createElement("div", {
-    className: styles$Q['radio-group-option']
+    className: styles$P['radio-group-option']
   }, React__default.createElement("input", {
     type: "radio",
     "data-testid": testId,
@@ -7725,11 +7887,11 @@ var RadioGroupOption = function RadioGroupOption(_ref) {
     checked: radioGroupContext.value !== undefined ? radioGroupContext.value === value : undefined,
     disabled: radioGroupContext.disabled
   }), React__default.createElement("span", {
-    className: styles$Q['radio-group-option__custom-input']
+    className: styles$P['radio-group-option__custom-input']
   })), label && React__default.createElement(Label, {
     htmlFor: id
   }, label)), caption && React__default.createElement("div", {
-    className: styles$Q['radio-group-option__caption']
+    className: styles$P['radio-group-option__caption']
   }, React__default.createElement(Caption, {
     fieldId: id
   }, caption)));
@@ -7864,7 +8026,7 @@ var RadioGroupField = function RadioGroupField(_ref) {
   }, React__default.createElement(Stack, {
     space: 12
   }, label && React__default.createElement("div", {
-    className: styles$O['radio-group-field__label']
+    className: styles$N['radio-group-field__label']
   }, label), React__default.createElement(Stack, {
     space: 8
   }, optionsType === OPTION_TYPES.RADIO ? React__default.createElement(RadioOptions, {
@@ -7877,9 +8039,9 @@ var RadioGroupField = function RadioGroupField(_ref) {
   }, children), controllers.error && React__default.createElement(ErrorMessage, null, controllers.error))));
 };
 
-var styles$R = {"text-field":"_18Rzv","text-field--invalid":"_3eD7t","text-field--prefixed":"_2evrG","text-field--suffixed":"_-MgeO","password-container":"_-Rf3c","password-toggle":"_yinPY"};
+var styles$Q = {"text-field":"_18Rzv","text-field--invalid":"_3eD7t","text-field--prefixed":"_2evrG","text-field--suffixed":"_-MgeO","password-container":"_-Rf3c","password-toggle":"_yinPY"};
 
-var styles$S = {"password-criteria":"_U0krC","password-criteria--invalid":"_2XIl4"};
+var styles$R = {"password-criteria":"_U0krC","password-criteria--invalid":"_2XIl4"};
 
 var PasswordCriteria = function PasswordCriteria(_ref) {
   var _classnames;
@@ -7887,7 +8049,7 @@ var PasswordCriteria = function PasswordCriteria(_ref) {
   var met = _ref.met,
       children = _ref.children;
   return React__default.createElement("span", {
-    className: classnames(styles$S['password-criteria'], (_classnames = {}, _classnames[styles$S['password-criteria--invalid']] = !met, _classnames))
+    className: classnames(styles$R['password-criteria'], (_classnames = {}, _classnames[styles$R['password-criteria--invalid']] = !met, _classnames))
   }, React__default.createElement(Inline, {
     space: met ? 4 : 8
   }, met ? React__default.createElement(IconCheck, {
@@ -7972,11 +8134,11 @@ var PasswordField = function PasswordField(_ref) {
     error: controllers.error
   };
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement("div", {
-    className: styles$R['password-container']
+    className: styles$Q['password-container']
   }, React__default.createElement("input", {
     name: name,
     id: controllers.id,
-    className: classnames(styles$R['text-field'], (_classnames = {}, _classnames[styles$R['text-field--invalid']] = hasError, _classnames)),
+    className: classnames(styles$Q['text-field'], (_classnames = {}, _classnames[styles$Q['text-field--invalid']] = hasError, _classnames)),
     type: type,
     "data-testid": testId,
     "aria-describedby": hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
@@ -7988,7 +8150,7 @@ var PasswordField = function PasswordField(_ref) {
     onChange: controllers.onChange,
     onBlur: controllers.onBlur
   }), React__default.createElement("div", {
-    className: styles$R['password-toggle'],
+    className: styles$Q['password-toggle'],
     onClick: toggleType,
     onKeyPress: toggleType,
     "data-testid": testId && testId + "-toggle",
@@ -8079,15 +8241,15 @@ var MultiSelectField = function MultiSelectField(_ref) {
   }));
 };
 
-var styles$T = {"custom-list":"_uC4zU"};
+var styles$S = {"custom-list":"_uC4zU"};
 
-var _excluded$2n = ["children", "hasMoreOptions", "hasMoreOptionsFirstLoad"];
+var _excluded$2o = ["children", "hasMoreOptions", "hasMoreOptionsFirstLoad"];
 
 var CustomList = function CustomList(_ref) {
   var children = _ref.children,
       hasMoreOptions = _ref.hasMoreOptions,
       hasMoreOptionsFirstLoad = _ref.hasMoreOptionsFirstLoad,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$2n);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$2o);
 
   var showFooter = hasMoreOptions;
 
@@ -8098,15 +8260,15 @@ var CustomList = function CustomList(_ref) {
   return React__default.createElement(components.MenuList, Object.assign({}, props), React__default.createElement(Fragment, null, children, showFooter && React__default.createElement(Inline, {
     justifyContent: "center"
   }, React__default.createElement("div", {
-    className: styles$T['custom-list']
+    className: styles$S['custom-list']
   }, getLocalizedString('main.START_TYPING_TO_SEE_MORE_OPTIONS')))));
 };
 
-var _excluded$2o = ["loadOptions"];
+var _excluded$2p = ["loadOptions"];
 
 var AsyncSelectField = function AsyncSelectField(_ref) {
   var loadOptions = _ref.loadOptions,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$2o);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$2p);
 
   var _useState = useState(false),
       hasMoreOptions = _useState[0],
@@ -8327,7 +8489,7 @@ var DateField = function DateField(_ref) {
     error: controllers.error
   };
   var dayPickerProps = {
-    classNames: styles$m,
+    classNames: styles$h,
     disabledDays: function disabledDays(day) {
       return _disabledDays && _disabledDays(setToMidnight(day));
     },
@@ -8345,7 +8507,7 @@ var DateField = function DateField(_ref) {
     })
   }, React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$m,
+    classNames: styles$h,
     formatDate: formatDate,
     parseDate: parseDate,
     placeholder: placeholder || format.toUpperCase(),
@@ -8454,7 +8616,7 @@ var getFormikError = function getFormikError(error) {
   return undefined;
 };
 
-var styles$U = {"container":"_1Ini2","wrapper":"_21VnL","interactionDisabled":"_wJ6Cb","DayPicker-Day":"_1c48y","navBar":"_3KwsN","todayButton":"_10CBO","navButtonInteractionDisabled":"_dHL-D","navButtonPrev":"_6kNi3","navButtonNext":"_13W_e","months":"_1FeSY","month":"_wU6A4","caption":"_AMbAo","weekdays":"_1LEst","weekdaysRow":"_2XECo","weekday":"_1C5ry","body":"_11F-Y","week":"_3MAFk","day":"_mG73F","disabled":"_2pgnH","selected":"_MtLaz","outside":"_CRqyX","footer":"_2KG9-","today":"_2JA2y","overlayWrapper":"_1JWbc","overlay":"_2tL6g","weekNumber":"_3u72O","text-field":"_25rf7","date-range-field":"_3qVhi","text-field--invalid":"_2M9Ud","text-field--prefixed":"_3TUb2","text-field--suffixed":"_foqL0","date-range-field--invalid":"_3df9R","date-range-field--disabled":"_2Nkht"};
+var styles$T = {"container":"_1Ini2","wrapper":"_21VnL","interactionDisabled":"_wJ6Cb","DayPicker-Day":"_1c48y","navBar":"_3KwsN","todayButton":"_10CBO","navButtonInteractionDisabled":"_dHL-D","navButtonPrev":"_6kNi3","navButtonNext":"_13W_e","months":"_1FeSY","month":"_wU6A4","caption":"_AMbAo","weekdays":"_1LEst","weekdaysRow":"_2XECo","weekday":"_1C5ry","body":"_11F-Y","week":"_3MAFk","day":"_mG73F","disabled":"_2pgnH","selected":"_MtLaz","outside":"_CRqyX","footer":"_2KG9-","today":"_2JA2y","overlayWrapper":"_1JWbc","overlay":"_2tL6g","weekNumber":"_3u72O","text-field":"_25rf7","date-range-field":"_3qVhi","text-field--invalid":"_2M9Ud","text-field--prefixed":"_3TUb2","text-field--suffixed":"_foqL0","date-range-field--invalid":"_3df9R","date-range-field--disabled":"_2Nkht"};
 
 var FromDate = function FromDate(_ref) {
   var name = _ref.name,
@@ -8493,7 +8655,7 @@ var FromDate = function FromDate(_ref) {
   }
 
   var dayPickerProps = {
-    classNames: styles$U,
+    classNames: styles$T,
     months: MONTH_NAMES,
     weekdaysLong: DAYS,
     weekdaysShort: DAYS.map(function (day) {
@@ -8520,7 +8682,7 @@ var FromDate = function FromDate(_ref) {
   };
   return React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$U,
+    classNames: styles$T,
     selectedDay: start,
     value: start,
     formatDate: formatDate,
@@ -8594,7 +8756,7 @@ var ToDate = function ToDate(_ref, ref) {
   }
 
   var dayPickerProps = {
-    classNames: styles$U,
+    classNames: styles$T,
     months: MONTH_NAMES,
     weekdaysLong: DAYS,
     weekdaysShort: DAYS.map(function (day) {
@@ -8613,7 +8775,7 @@ var ToDate = function ToDate(_ref, ref) {
   };
   return React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$U,
+    classNames: styles$T,
     selectedDay: end,
     value: end,
     formatDate: formatDate,
@@ -8698,7 +8860,7 @@ var DateRangeField = function DateRangeField(_ref) {
       start = _controllers$value.start,
       end = _controllers$value.end;
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement("div", {
-    className: classnames(styles$U['date-range-field'], (_classnames = {}, _classnames[styles$U['date-range-field--invalid']] = hasError, _classnames[styles$U['date-range-field--disabled']] = disabled, _classnames)),
+    className: classnames(styles$T['date-range-field'], (_classnames = {}, _classnames[styles$T['date-range-field--invalid']] = hasError, _classnames[styles$T['date-range-field--disabled']] = disabled, _classnames)),
     "data-testid": testId
   }, React__default.createElement(IconCalendarAlt, {
     size: "medium",
@@ -8825,7 +8987,7 @@ var WeekField = function WeekField(_ref) {
   };
 
   var dayPickerProps = {
-    classNames: styles$n,
+    classNames: styles$i,
     disabledDays: function disabledDays(day) {
       return _disabledDays && _disabledDays(setToMidnight(day));
     },
@@ -8855,7 +9017,7 @@ var WeekField = function WeekField(_ref) {
     })
   }, React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$n,
+    classNames: styles$i,
     formatDate: formatDate,
     parseDate: parseDate,
     placeholder: placeholder || format.toUpperCase(),
@@ -8894,42 +9056,149 @@ var WeekField = function WeekField(_ref) {
   })));
 };
 
-var _excluded$2p = ["placeholder", "autoComplete"];
+var getTimeOptions = function getTimeOptions(interval, startTime) {
+  if (startTime === void 0) {
+    startTime = new Date('Janurary 1 2023 00:00:00');
+  }
 
-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$2p);
+  var optionsCount = 60 * 24 / interval;
+  var timeOptions = [];
+  var intervalCoeffecient = 1000 * 60 * interval;
+  var rounded = new Date(Math.ceil(startTime.getTime() / intervalCoeffecient) * intervalCoeffecient);
 
-  var _useTextField = useTextField(_extends({}, allOtherProps, {
-    placeholder: placeholder,
-    autoComplete: autoComplete,
-    ref: ref
-  })),
-      inputProps = _useTextField.inputProps,
-      fieldProps = _useTextField.fieldProps;
+  var formatHours = function formatHours(hours) {
+    if (hours === 0) {
+      return 12;
+    } else if (hours > 12) {
+      return hours - 12;
+    } else {
+      return hours;
+    }
+  };
 
-  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);
+  for (var i = 0; i < optionsCount; i++) {
+    var newDate = new Date(rounded.getTime());
+    newDate.setMinutes(rounded.getMinutes() + interval * i);
+    var minutes = newDate.getMinutes();
+    timeOptions.push(formatHours(newDate.getHours()) + ":" + (minutes === 0 ? '00' : minutes) + " " + (newDate.getHours() < 12 ? 'AM' : 'PM'));
+  }
+
+  return timeOptions;
+};
+
+var TimeFieldDropdown = function TimeFieldDropdown(_ref) {
+  var trigger = _ref.trigger,
+      interval = _ref.interval,
+      startTime = _ref.startTime,
+      onOptionClick = _ref.onOptionClick,
+      inputValue = _ref.inputValue,
+      width = _ref.width;
+  var startTimeParsed;
+
+  if (startTime) {
+    startTimeParsed = startTime === 'now' ? new Date() : new Date('Janurary 1 2023 ' + parseTime(startTime, 'g:i A'));
+  }
+
+  var timeOptions = useMemo(function () {
+    return getTimeOptions(interval, startTimeParsed);
+  }, [interval, startTime]);
+
+  var _useState = useState(undefined),
+      index = _useState[0],
+      setIndex = _useState[1];
+
+  useEffect(function () {
+    if (inputValue) {
+      setIndex(timeOptions.findIndex(function (option) {
+        return option.toLowerCase().startsWith(inputValue.toLowerCase());
+      }));
     }
+  }, [inputValue]);
+  return React__default.createElement(Dropdown, {
+    triggerWidth: "full",
+    trigger: trigger,
+    alignment: "left",
+    width: width,
+    maxHeight: 397
+  }, React__default.createElement(DropdownList, {
+    highlightItemIndex: index
+  }, timeOptions.map(function (option) {
+    return React__default.createElement(DropdownListItem, {
+      key: option,
+      onClick: function onClick() {
+        onOptionClick(option);
+      }
+    }, option);
   })));
 };
 
+var _excluded$2q = ["interval", "startTime"];
+
+var TimeFieldElement = function TimeFieldElement(_ref, forwardedRef) {
+  var _ref$interval = _ref.interval,
+      interval = _ref$interval === void 0 ? 15 : _ref$interval,
+      startTime = _ref.startTime,
+      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2q);
+
+  var internalRef = useRef(null);
+  var ref = forwardedRef || internalRef;
+
+  var _useState = useState(allOtherProps.defaultValue),
+      inputValue = _useState[0],
+      setInputValue = _useState[1];
+
+  var onOptionClick = function onOptionClick(option) {
+    setInputValue(option);
+    allOtherProps.onChange && allOtherProps.onChange(option);
+    ref.current.value = option;
+    ref.current.focus();
+    ref.current.select();
+  };
+
+  var _useState2 = useState(),
+      width = _useState2[0],
+      setWidth = _useState2[1];
+
+  useEffect(function () {
+    updateDropdownWidth();
+    window.addEventListener('resize', updateDropdownWidth);
+    return function () {
+      window.removeEventListener('resize', updateDropdownWidth);
+    };
+  }, []);
+
+  var updateDropdownWidth = function updateDropdownWidth() {
+    setWidth(ref.current.offsetWidth);
+  };
+
+  return React__default.createElement(TimeFieldDropdown, {
+    interval: interval,
+    trigger: React__default.createElement(TimeFieldDropdownTrigger, Object.assign({}, allOtherProps, {
+      onClick: function onClick() {
+        return ref.current.select();
+      },
+      ref: ref,
+      onInputChange: function onInputChange(e) {
+        return setInputValue(e);
+      }
+    })),
+    startTime: startTime,
+    onOptionClick: onOptionClick,
+    inputValue: inputValue,
+    width: width
+  });
+};
+
 var TimeField = forwardRef(TimeFieldElement);
 
-var _excluded$2q = ["currencySymbol", "step"];
+var _excluded$2r = ["currencySymbol", "step"];
 
 var CurrencyFieldElement = function CurrencyFieldElement(_ref, ref) {
   var _ref$currencySymbol = _ref.currencySymbol,
       currencySymbol = _ref$currencySymbol === void 0 ? '$' : _ref$currencySymbol,
       _ref$step = _ref.step,
       step = _ref$step === void 0 ? 0.01 : _ref$step,
-      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2q);
+      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2r);
 
   var _useTextField = useTextField(_extends({}, allOtherProps, {
     ref: ref
@@ -8968,7 +9237,7 @@ var CurrencyFieldElement = function CurrencyFieldElement(_ref, ref) {
 
 var CurrencyField = forwardRef(CurrencyFieldElement);
 
-var _excluded$2r = ["max", "min", "precision", "stepSize"];
+var _excluded$2s = ["max", "min", "precision", "stepSize"];
 
 var PercentageElement = function PercentageElement(_ref, ref) {
   var _ref$max = _ref.max,
@@ -8979,7 +9248,7 @@ var PercentageElement = function PercentageElement(_ref, ref) {
       precision = _ref$precision === void 0 ? 0 : _ref$precision,
       _ref$stepSize = _ref.stepSize,
       stepSize = _ref$stepSize === void 0 ? 1 : _ref$stepSize,
-      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2r);
+      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2s);
 
   var _useTextField = useTextField(_extends({}, allOtherProps, {
     ref: ref
@@ -9084,7 +9353,7 @@ var BUTTON_THEME = {
   UPSELL: 'upsell'
 };
 
-var styles$V = {"banner":"_vgLin","banner__title":"_63TwY","banner__body":"_3n6S7","banner__body--multilineCTA":"_2pMYs","banner--info":"_ON6Eg","banner__icon":"_1-D-E","banner--success":"_1FFZh","banner--danger":"_2R34O","banner--warning":"_3Cfhe","banner--upsell":"_1SIOw","banner__close":"_3SNQ1","banner--single-line":"_3nLTI"};
+var styles$U = {"banner":"_vgLin","banner__title":"_63TwY","banner__body":"_3n6S7","banner__body--multilineCTA":"_2pMYs","banner--info":"_ON6Eg","banner__icon":"_1-D-E","banner--success":"_1FFZh","banner--danger":"_2R34O","banner--warning":"_3Cfhe","banner--upsell":"_1SIOw","banner__close":"_3SNQ1","banner--single-line":"_3nLTI"};
 
 var ButtonCTA = function ButtonCTA(_ref) {
   var button = _ref.button,
@@ -9107,7 +9376,7 @@ var ButtonCTA = function ButtonCTA(_ref) {
   }, button.props));
 };
 
-var styles$W = {"banner__caption":"_1jqm8"};
+var styles$V = {"banner__caption":"_1jqm8"};
 
 var InlineBannerCTA = function InlineBannerCTA(_ref) {
   var primaryButton = _ref.primaryButton,
@@ -9138,7 +9407,7 @@ var InlineBannerCTA = function InlineBannerCTA(_ref) {
     bannerTheme: bannerTheme,
     primaryCTA: true
   })), caption && multiLine && React__default.createElement("div", {
-    className: styles$W['banner__caption']
+    className: styles$V['banner__caption']
   }, caption));
 };
 
@@ -9163,7 +9432,7 @@ var InlineBannerIcon = function InlineBannerIcon(_ref) {
   }
 };
 
-var _excluded$2s = ["children", "theme", "title", "onClose", "caption", "primaryButton", "secondaryButton", "testId"];
+var _excluded$2t = ["children", "theme", "title", "onClose", "caption", "primaryButton", "secondaryButton", "testId"];
 
 var InlineBanner = function InlineBanner(_ref) {
   var _classnames, _classnames2;
@@ -9177,7 +9446,7 @@ var InlineBanner = function InlineBanner(_ref) {
       primaryButton = _ref.primaryButton,
       secondaryButton = _ref.secondaryButton,
       testId = _ref.testId,
-      positionProps = _objectWithoutPropertiesLoose(_ref, _excluded$2s);
+      positionProps = _objectWithoutPropertiesLoose(_ref, _excluded$2t);
 
   var positionStyles = usePositionStyles(positionProps);
   var multiLine = !!title;
@@ -9185,14 +9454,14 @@ var InlineBanner = function InlineBanner(_ref) {
   var Layout = multiLine ? Stack : Inline;
   return React__default.createElement("div", {
     "data-testid": testId,
-    className: classnames(styles$V['banner'], (_classnames = {}, _classnames[styles$V['banner--info']] = theme === BANNER_THEME.INFO, _classnames[styles$V['banner--warning']] = theme === BANNER_THEME.WARNING, _classnames[styles$V['banner--success']] = theme === BANNER_THEME.SUCCESS, _classnames[styles$V['banner--danger']] = theme === BANNER_THEME.DANGER, _classnames[styles$V['banner--upsell']] = theme === BANNER_THEME.UPSELL, _classnames[styles$V['banner--single-line']] = !multiLine, _classnames)),
+    className: classnames(styles$U['banner'], (_classnames = {}, _classnames[styles$U['banner--info']] = theme === BANNER_THEME.INFO, _classnames[styles$U['banner--warning']] = theme === BANNER_THEME.WARNING, _classnames[styles$U['banner--success']] = theme === BANNER_THEME.SUCCESS, _classnames[styles$U['banner--danger']] = theme === BANNER_THEME.DANGER, _classnames[styles$U['banner--upsell']] = theme === BANNER_THEME.UPSELL, _classnames[styles$U['banner--single-line']] = !multiLine, _classnames)),
     style: positionStyles
   }, React__default.createElement(Inline, {
     alignItems: multiLine ? undefined : 'center',
     flex: ['0 1 auto', 1],
     space: 12
   }, React__default.createElement("div", {
-    className: styles$V['banner__icon']
+    className: styles$U['banner__icon']
   }, React__default.createElement(InlineBannerIcon, {
     theme: theme
   })), React__default.createElement(Layout, {
@@ -9202,9 +9471,9 @@ var InlineBanner = function InlineBanner(_ref) {
     flex: ['min-content'],
     flexWrap: multiLine ? undefined : 'wrap'
   }, title && React__default.createElement("div", {
-    className: styles$V['banner__title']
+    className: styles$U['banner__title']
   }, title), React__default.createElement("div", {
-    className: classnames(styles$V['banner__body'], (_classnames2 = {}, _classnames2[styles$V['banner__body--multilineCTA']] = primaryButton && multiLine, _classnames2))
+    className: classnames(styles$U['banner__body'], (_classnames2 = {}, _classnames2[styles$U['banner__body--multilineCTA']] = primaryButton && multiLine, _classnames2))
   }, children), primaryButton && React__default.createElement(InlineBannerCTA, {
     primaryButton: primaryButton,
     secondaryButton: secondaryButton,
@@ -9212,7 +9481,7 @@ var InlineBanner = function InlineBanner(_ref) {
     multiLine: multiLine,
     bannerTheme: theme
   })), dismissable && React__default.createElement("div", {
-    className: styles$V['banner__close']
+    className: styles$U['banner__close']
   }, React__default.createElement(Button$1, {
     theme: "link-icon",
     type: "button",
@@ -9226,7 +9495,7 @@ var PERSISTENT_BANNER_THEME = {
   DANGER: 'danger'
 };
 
-var styles$X = {"persistent-banner":"_1KO1J","persistent-banner--info":"_2mTN3","persistent-banner--danger":"_1YuCF","persistent-banner--upsell":"_tlNFk"};
+var styles$W = {"persistent-banner":"_1KO1J","persistent-banner--info":"_2mTN3","persistent-banner--danger":"_1YuCF","persistent-banner--upsell":"_tlNFk"};
 
 var PersistentBanner = function PersistentBanner(_ref) {
   var _classNames;
@@ -9255,7 +9524,7 @@ var PersistentBanner = function PersistentBanner(_ref) {
   };
 
   return React__default.createElement("div", {
-    className: classnames(styles$X['persistent-banner'], (_classNames = {}, _classNames[styles$X['persistent-banner--info']] = theme === PERSISTENT_BANNER_THEME.INFO, _classNames[styles$X['persistent-banner--danger']] = theme === PERSISTENT_BANNER_THEME.DANGER, _classNames[styles$X['persistent-banner--upsell']] = theme === PERSISTENT_BANNER_THEME.UPSELL, _classNames)),
+    className: classnames(styles$W['persistent-banner'], (_classNames = {}, _classNames[styles$W['persistent-banner--info']] = theme === PERSISTENT_BANNER_THEME.INFO, _classNames[styles$W['persistent-banner--danger']] = theme === PERSISTENT_BANNER_THEME.DANGER, _classNames[styles$W['persistent-banner--upsell']] = theme === PERSISTENT_BANNER_THEME.UPSELL, _classNames)),
     "data-testid": testId
   }, onDismiss ? React__default.createElement(Inline, {
     flex: [1],
@@ -9327,7 +9596,7 @@ var useProgress = function useProgress(progress, maxValue, getMetric) {
   };
 };
 
-var styles$Y = {"circular-progress":"_1XR7V","circular-progress__label":"_1BygP","circular-progress__track":"_1Ak-z","circular-progress__indicator":"_22YIp"};
+var styles$X = {"circular-progress":"_1XR7V","circular-progress__label":"_1BygP","circular-progress__track":"_1Ak-z","circular-progress__indicator":"_22YIp"};
 
 var CircularProgress = function CircularProgress(_ref) {
   var progress = _ref.progress,
@@ -9342,7 +9611,7 @@ var CircularProgress = function CircularProgress(_ref) {
 
   var determinant = metric.percentage * 2.79;
   return React__default.createElement("div", Object.assign({}, elementProps, {
-    className: styles$Y['circular-progress'],
+    className: styles$X['circular-progress'],
     "data-testid": testId
   }), React__default.createElement("svg", {
     viewBox: "0 0 100 100"
@@ -9351,21 +9620,21 @@ var CircularProgress = function CircularProgress(_ref) {
     cy: 50,
     r: 45,
     strokeWidth: "10px",
-    className: styles$Y['circular-progress__track']
+    className: styles$X['circular-progress__track']
   }), React__default.createElement("circle", {
     cx: 50,
     cy: 50,
     r: 45,
     strokeWidth: "10px",
-    className: styles$Y['circular-progress__indicator'],
+    className: styles$X['circular-progress__indicator'],
     strokeDashoffset: "66",
     strokeDasharray: determinant + " " + (279 - determinant)
   })), React__default.createElement("div", {
-    className: styles$Y['circular-progress__label']
+    className: styles$X['circular-progress__label']
   }, children || metric.progress + "/" + metric.maxValue));
 };
 
-var styles$Z = {"progress-bar":"_3nyZN","progress-bar__indicator":"_11TEp","progress-bar__steps":"_3XFTU"};
+var styles$Y = {"progress-bar":"_3nyZN","progress-bar__indicator":"_11TEp","progress-bar__steps":"_3XFTU"};
 
 var ProgressBar = function ProgressBar(_ref) {
   var progress = _ref.progress,
@@ -9380,15 +9649,15 @@ var ProgressBar = function ProgressBar(_ref) {
       metric = _useProgress.metric;
 
   return React__default.createElement(Stack, null, React__default.createElement("div", Object.assign({}, elementProps, {
-    className: styles$Z['progress-bar'],
+    className: styles$Y['progress-bar'],
     "data-testid": testId
   }), React__default.createElement("div", {
-    className: styles$Z['progress-bar__indicator'],
+    className: styles$Y['progress-bar__indicator'],
     style: {
       width: metric.percentage + "%"
     }
   })), steps && steps.length > 0 && React__default.createElement("div", {
-    className: styles$Z['progress-bar__steps']
+    className: styles$Y['progress-bar__steps']
   }, steps.map(function (step) {
     return React__default.createElement("div", {
       key: step
@@ -9396,9 +9665,9 @@ var ProgressBar = function ProgressBar(_ref) {
   })));
 };
 
-var styles$_ = {"badge":"_2f81N","badge--warning":"_2g1GI","badge--danger":"_2zLnM","badge--success":"_27QOo","badge--info":"_2gmsM"};
+var styles$Z = {"badge":"_2f81N","badge--warning":"_2g1GI","badge--danger":"_2zLnM","badge--success":"_27QOo","badge--info":"_2gmsM"};
 
-var _excluded$2t = ["children", "theme", "title", "testId"];
+var _excluded$2u = ["children", "theme", "title", "testId"];
 
 var Badge = function Badge(_ref, forwardedRef) {
   var _classnames;
@@ -9407,7 +9676,7 @@ var Badge = function Badge(_ref, forwardedRef) {
       theme = _ref.theme,
       title = _ref.title,
       testId = _ref.testId,
-      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2t);
+      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2u);
 
   var internalRef = useRef(null);
   var ref = forwardedRef || internalRef;
@@ -9420,7 +9689,7 @@ var Badge = function Badge(_ref, forwardedRef) {
     overlay: title,
     ref: ref
   }, React__default.createElement("div", Object.assign({
-    className: classnames(styles$_['badge'], (_classnames = {}, _classnames[styles$_['badge--success']] = theme === 'success', _classnames[styles$_['badge--danger']] = theme === 'danger', _classnames[styles$_['badge--info']] = theme === 'info', _classnames[styles$_['badge--warning']] = theme === 'warning', _classnames)),
+    className: classnames(styles$Z['badge'], (_classnames = {}, _classnames[styles$Z['badge--success']] = theme === 'success', _classnames[styles$Z['badge--danger']] = theme === 'danger', _classnames[styles$Z['badge--info']] = theme === 'info', _classnames[styles$Z['badge--warning']] = theme === 'warning', _classnames)),
     ref: ref,
     "data-testid": testId
   }, otherProps), children));
@@ -9428,9 +9697,9 @@ var Badge = function Badge(_ref, forwardedRef) {
 
 var Badge$1 = forwardRef(Badge);
 
-var styles$$ = {"avatar":"_2wJGB","avatar--small":"_3QTSo","avatar__badge":"_2Rl8S","avatar--medium":"_1zwj0","avatar--large":"_3-U6x","avatar--extra-large":"_3qn2q"};
+var styles$_ = {"avatar":"_2wJGB","avatar--small":"_3QTSo","avatar__badge":"_2Rl8S","avatar--medium":"_1zwj0","avatar--large":"_3-U6x","avatar--extra-large":"_3qn2q"};
 
-var styles$10 = {"avatar-image":"_GKL9P"};
+var styles$$ = {"avatar-image":"_GKL9P"};
 
 var AvatarImage = function AvatarImage(_ref) {
   var url = _ref.url,
@@ -9455,7 +9724,7 @@ var AvatarImage = function AvatarImage(_ref) {
   }
 
   return React__default.createElement("div", {
-    className: styles$10['avatar-image']
+    className: styles$$['avatar-image']
   }, React__default.createElement(IconUserSolid, {
     size: "flexible",
     color: color
@@ -9524,7 +9793,7 @@ var Avatar = function Avatar(_ref) {
 
   var backgroundColor = url ? GREY200 : color;
   return React__default.createElement("div", {
-    className: classnames(styles$$['avatar'], (_classnames = {}, _classnames[styles$$['avatar--small']] = size === 'small', _classnames[styles$$['avatar--medium']] = size === 'medium', _classnames[styles$$['avatar--large']] = size === 'large', _classnames[styles$$['avatar--extra-large']] = size === 'extra-large', _classnames)),
+    className: classnames(styles$_['avatar'], (_classnames = {}, _classnames[styles$_['avatar--small']] = size === 'small', _classnames[styles$_['avatar--medium']] = size === 'medium', _classnames[styles$_['avatar--large']] = size === 'large', _classnames[styles$_['avatar--extra-large']] = size === 'extra-large', _classnames)),
     style: {
       backgroundColor: children || url && !showIconInsteadOfImage ? backgroundColor : defaultProfilePictureColors.backgroundColor
     },
@@ -9537,7 +9806,7 @@ var Avatar = function Avatar(_ref) {
       return setShowIconInsteadOfImage(true);
     }
   }), badge && size !== 'small' && React__default.createElement("div", {
-    className: styles$$['avatar__badge']
+    className: styles$_['avatar__badge']
   }, badge));
 };
 
@@ -9550,7 +9819,7 @@ var CHIP_THEME = {
   DANGER: 'danger'
 };
 
-var styles$11 = {"chip":"_1fIeV","chip--marketing":"_V4byU","chip--success":"_37gN9","chip--upsell":"_Tw7tp","chip--warning":"_t94VZ","chip--info":"_3SmeO","chip--danger":"_2eoX0"};
+var styles$10 = {"chip":"_1fIeV","chip--marketing":"_V4byU","chip--success":"_37gN9","chip--upsell":"_Tw7tp","chip--warning":"_t94VZ","chip--info":"_3SmeO","chip--danger":"_2eoX0"};
 
 var Chip = function Chip(_ref) {
   var _classnames;
@@ -9561,11 +9830,11 @@ var Chip = function Chip(_ref) {
       testId = _ref.testId;
   return React__default.createElement("div", {
     "data-testid": testId,
-    className: classnames(styles$11['chip'], (_classnames = {}, _classnames[styles$11['chip--marketing']] = theme === CHIP_THEME.MARKETING, _classnames[styles$11['chip--success']] = theme === CHIP_THEME.SUCCESS, _classnames[styles$11['chip--upsell']] = theme === CHIP_THEME.UPSELL, _classnames[styles$11['chip--warning']] = theme === CHIP_THEME.WARNING, _classnames[styles$11['chip--info']] = theme === CHIP_THEME.INFO, _classnames[styles$11['chip--danger']] = theme === CHIP_THEME.DANGER, _classnames))
+    className: classnames(styles$10['chip'], (_classnames = {}, _classnames[styles$10['chip--marketing']] = theme === CHIP_THEME.MARKETING, _classnames[styles$10['chip--success']] = theme === CHIP_THEME.SUCCESS, _classnames[styles$10['chip--upsell']] = theme === CHIP_THEME.UPSELL, _classnames[styles$10['chip--warning']] = theme === CHIP_THEME.WARNING, _classnames[styles$10['chip--info']] = theme === CHIP_THEME.INFO, _classnames[styles$10['chip--danger']] = theme === CHIP_THEME.DANGER, _classnames))
   }, children);
 };
 
-var styles$12 = {"pill":"_23q4Y","pill--default":"_niDEM","pill--success":"_IwDRB","pill--danger":"_MPji-","pill--warning":"_3S2m8","pill--info":"_2G3ML"};
+var styles$11 = {"pill":"_23q4Y","pill--default":"_niDEM","pill--success":"_IwDRB","pill--danger":"_MPji-","pill--warning":"_3S2m8","pill--info":"_2G3ML"};
 
 var PILL_THEME = {
   INFO: 'info',
@@ -9584,7 +9853,7 @@ var Pill = function Pill(_ref) {
       testId = _ref.testId;
   return React__default.createElement("div", {
     "data-testid": testId,
-    className: classnames(styles$12['pill'], (_classnames = {}, _classnames[styles$12['pill--default']] = theme === PILL_THEME.DEFAULT, _classnames[styles$12['pill--warning']] = theme === PILL_THEME.WARNING, _classnames[styles$12['pill--success']] = theme === PILL_THEME.SUCCESS, _classnames[styles$12['pill--danger']] = theme === PILL_THEME.DANGER, _classnames[styles$12['pill--info']] = theme === PILL_THEME.INFO, _classnames))
+    className: classnames(styles$11['pill'], (_classnames = {}, _classnames[styles$11['pill--default']] = theme === PILL_THEME.DEFAULT, _classnames[styles$11['pill--warning']] = theme === PILL_THEME.WARNING, _classnames[styles$11['pill--success']] = theme === PILL_THEME.SUCCESS, _classnames[styles$11['pill--danger']] = theme === PILL_THEME.DANGER, _classnames[styles$11['pill--info']] = theme === PILL_THEME.INFO, _classnames))
   }, children);
 };
 
@@ -9594,14 +9863,16 @@ var EMPTY_STATE_SIZE = {
   LARGE: 'large'
 };
 
-var styles$13 = {"empty-state-container-stack":"_2B8Vd","empty-state-container-stack__content":"_NBTDp","empty-state-container-stack__content--full-page":"_1UWbP","empty-state-container-stack__content--inline-horizontal":"_2BVOy","empty-state-container-stack__body":"_1LuiZ"};
+var styles$12 = {"empty-state-container-stack":"_2B8Vd","empty-state-container-stack__content":"_NBTDp","empty-state-container-stack__content--full-page":"_1UWbP","empty-state-container-stack__content--inline-horizontal":"_2BVOy","empty-state-container-stack__body":"_1LuiZ"};
 
-var styles$14 = {"empty-state-container-cta":"_1Cx9N"};
+var styles$13 = {"empty-state-container-cta":"_1Cx9N","empty-state-container-cta--inside-modal":"_WbcaM"};
 
 var EmptyStateContainerCTA = function EmptyStateContainerCTA(_ref) {
-  var _actions$primary, _actions$secondary;
+  var _actions$primary, _actions$secondary, _classNames;
 
   var isPaywall = _ref.isPaywall,
+      _ref$isInsideModal = _ref.isInsideModal,
+      isInsideModal = _ref$isInsideModal === void 0 ? false : _ref$isInsideModal,
       actions = _ref.actions;
   var primaryButton = updateButtonProps(actions.primary, {
     theme: actions !== null && actions !== void 0 && (_actions$primary = actions.primary) !== null && _actions$primary !== void 0 && _actions$primary.props.theme || isPaywall ? 'upsell' : 'primary',
@@ -9612,7 +9883,7 @@ var EmptyStateContainerCTA = function EmptyStateContainerCTA(_ref) {
     size: BUTTON_SIZES.MIN_WIDTH_100
   });
   return React__default.createElement("div", {
-    className: styles$14['empty-state-container-cta']
+    className: classnames(styles$13['empty-state-container-cta'], (_classNames = {}, _classNames[styles$13['empty-state-container-cta--inside-modal']] = isInsideModal, _classNames))
   }, primaryButton, secondaryButton);
 };
 
@@ -9627,7 +9898,7 @@ var EmptyStateContainerStack = function EmptyStateContainerStack(_ref) {
       isPaywall = _ref$isPaywall === void 0 ? false : _ref$isPaywall,
       testId = _ref.testId;
   return React__default.createElement("div", {
-    className: styles$13['empty-state-container-stack'],
+    className: styles$12['empty-state-container-stack'],
     "data-testid": testId
   }, React__default.createElement("img", {
     src: mediaUrl,
@@ -9643,7 +9914,7 @@ var EmptyStateContainerStack = function EmptyStateContainerStack(_ref) {
     emphasis: "bold",
     as: "body"
   }, title), React__default.createElement("div", {
-    className: styles$13['empty-state-container-stack__body']
+    className: styles$12['empty-state-container-stack__body']
   }, children)), React__default.createElement(Stack, {
     space: 8,
     alignItems: "center"
@@ -9655,10 +9926,10 @@ var EmptyStateContainerStack = function EmptyStateContainerStack(_ref) {
   }, caption)));
 };
 
-var styles$15 = {"empty-state-container-inline":"_eMr1V","empty-state-container-inline__content":"_2jreb","empty-state-container-inline__content--full-page":"_3RLfH","empty-state-container-inline__content--inline-horizontal":"_3BMpx","empty-state-container-inline__body":"_2J5vn"};
+var styles$14 = {"empty-state-container-inline":"_eMr1V","empty-state-container-inline--inside-modal":"_2sweG","empty-state-container-inline__content":"_2jreb","empty-state-container-inline__content--full-page":"_3RLfH","empty-state-container-inline__content--inline-horizontal":"_3BMpx","empty-state-container-inline__body":"_2J5vn","empty-state-container-inline__image":"_G2VtA"};
 
 var EmptyStateContainerInline = function EmptyStateContainerInline(_ref) {
-  var _classnames;
+  var _classNames, _classnames;
 
   var header = _ref.header,
       title = _ref.title,
@@ -9671,11 +9942,15 @@ var EmptyStateContainerInline = function EmptyStateContainerInline(_ref) {
       _ref$isPaywall = _ref.isPaywall,
       isPaywall = _ref$isPaywall === void 0 ? false : _ref$isPaywall,
       testId = _ref.testId;
+
+  var _useModalContext = useModalContext(),
+      isInsideModal = _useModalContext.isModalMounted;
+
   return React__default.createElement("div", {
-    className: styles$15['empty-state-container-inline'],
+    className: classnames(styles$14['empty-state-container-inline'], (_classNames = {}, _classNames[styles$14['empty-state-container-inline--inside-modal']] = isInsideModal, _classNames)),
     "data-testid": testId
   }, React__default.createElement("div", {
-    className: classnames(styles$15['empty-state-container-inline__content'], (_classnames = {}, _classnames[styles$15['empty-state-container__content--full-page']] = size === EMPTY_STATE_SIZE.LARGE, _classnames[styles$15['empty-state-container__content--inline-horizontal']] = size === EMPTY_STATE_SIZE.MEDIUM, _classnames))
+    className: classnames(styles$14['empty-state-container-inline__content'], (_classnames = {}, _classnames[styles$14['empty-state-container__content--full-page']] = size === EMPTY_STATE_SIZE.LARGE, _classnames[styles$14['empty-state-container__content--inline-horizontal']] = size === EMPTY_STATE_SIZE.MEDIUM, _classnames))
   }, React__default.createElement(Stack, {
     space: 8
   }, header && React__default.createElement(Text, {
@@ -9684,19 +9959,23 @@ var EmptyStateContainerInline = function EmptyStateContainerInline(_ref) {
   }, header), React__default.createElement(Text, {
     as: "h1"
   }, title)), React__default.createElement("div", {
-    className: styles$15['empty-state-container-inline__body']
+    className: styles$14['empty-state-container-inline__body']
   }, children), React__default.createElement(Stack, {
-    space: 8
+    space: 8,
+    marginTop: 12
   }, actions && React__default.createElement(EmptyStateContainerCTA, {
     actions: actions,
-    isPaywall: isPaywall
+    isPaywall: isPaywall,
+    isInsideModal: isInsideModal
   }), caption && React__default.createElement(Text, {
     as: "caption"
-  }, caption))), React__default.createElement("img", {
+  }, caption))), React__default.createElement("div", {
+    className: styles$14['empty-state-container-inline__image']
+  }, React__default.createElement("img", {
     src: mediaUrl,
     alt: String(title),
     width: size === EMPTY_STATE_SIZE.LARGE ? '500px' : '333px'
-  }));
+  })));
 };
 
 var EmptyStateContainer = function EmptyStateContainer(_ref) {