@7shifts/sous-chef 3.11.2 → 3.12.0

package/dist/index.modern.js

@@ -3,14 +3,14 @@ import classnames from 'classnames';
 import { toast as toast$1, ToastContainer as ToastContainer$1, Slide } from 'react-toastify';
 import ReactDOM from 'react-dom';
 import 'react-toastify/dist/ReactToastify.css';
+import { debounce } from 'lodash-es';
+import parseTime from 'time-autocomplete/src/core/AMPMParser';
 import ReactModal from 'react-modal';
 import DayPicker, { DateUtils } from 'react-day-picker';
 import 'react-day-picker/lib/style.css';
 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';
@@ -4517,518 +4517,697 @@ var DROPDOWN_TRIGGER = {
   CLICK: 'click'
 };
 
-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 styles$e = {"header":"_36nxW","header__close-button":"_2zYre","sub-header":"_2XwRD"};
-
-var ModalHeader = function ModalHeader(_ref) {
-  var header = _ref.header,
-      subHeader = _ref.subHeader,
-      onClose = _ref.onClose,
-      loading = _ref.loading;
-
-  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 styles$d = {"label":"_h724f","label--truncate":"_1VUoF"};
 
-  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));
+var isEllipsisActive = function isEllipsisActive(e) {
+  return e.offsetWidth < e.scrollWidth;
 };
 
-var ModalContext = createContext({
-  isModalMounted: false
-});
-var useModalContext = function useModalContext() {
-  var context = useContext(ModalContext);
-  return context || {};
-};
+var useLabelTooltip = function useLabelTooltip(labelId, tooltipContent, truncate) {
+  var _useState = useState(false),
+      showTooltip = _useState[0],
+      setShowTooltip = _useState[1];
 
-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
-    }
-  };
-  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']
-    }
-  }, React__default.createElement(ModalHeader, {
-    header: header,
-    subHeader: subHeader,
-    onClose: onClose,
-    loading: loading
-  }), React__default.createElement(ModalContext.Provider, {
-    value: {
-      isModalMounted: true
+  var shouldTruncate = typeof tooltipContent === 'string' && truncate;
+  var labelElement = document.getElementById(labelId);
+  var isHidden = labelElement && labelElement.offsetParent === null;
+  var handleApplyTooltip = useCallback(function () {
+    if (!shouldTruncate) {
+      return;
     }
-  }, children));
-};
-
-Modal.setAppElement = function (rootElement) {
-  ReactModal.setAppElement(rootElement);
-};
-
-var THRESHOLD = 20;
-var useScrollShadow = function useScrollShadow() {
-  var ref = useRef(null);
 
-  var _useState = useState(false),
-      showScrollShadow = _useState[0],
-      setShowScrollShadow = _useState[1];
+    var labelElement = document.getElementById(labelId);
 
-  useEffect(function () {
-    if (!ref.current) {
+    if (!labelElement) {
       return;
     }
 
-    var modalBody = ref.current;
+    var shouldShowTooltip = isEllipsisActive(labelElement);
 
-    if (modalBody.offsetHeight > THRESHOLD) {
-      setShowScrollShadow(true);
+    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 {
-    ref: ref,
-    showScrollShadow: showScrollShadow
+    showTooltip: showTooltip,
+    shouldTruncate: shouldTruncate
   };
 };
 
-var styles$f = {"modal-body":"_2J-ku","modal-body--with-scroll-shadow":"_2ErCP"};
-
-var ModalBody = function ModalBody(_ref) {
+var Label = function Label(_ref) {
   var _classNames;
 
-  var children = _ref.children,
-      testId = _ref.testId;
+  var htmlFor = _ref.htmlFor,
+      children = _ref.children,
+      _ref$truncate = _ref.truncate,
+      truncate = _ref$truncate === void 0 ? true : _ref$truncate;
+  var labelId = "label-" + htmlFor;
 
-  var _useScrollShadow = useScrollShadow(),
-      ref = _useScrollShadow.ref,
-      showScrollShadow = _useScrollShadow.showScrollShadow;
+  var _useLabelTooltip = useLabelTooltip(labelId, children, truncate),
+      showTooltip = _useLabelTooltip.showTooltip,
+      shouldTruncate = _useLabelTooltip.shouldTruncate;
 
-  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
+  var LabelElement = React__default.createElement("label", {
+    htmlFor: htmlFor,
+    id: labelId,
+    className: classnames(styles$d['label'], (_classNames = {}, _classNames[styles$d['label--truncate']] = shouldTruncate, _classNames))
   }, children);
-};
-
-var styles$g = {"modal-footer":"_LKOr5","tertiary-container":"_Qktd-"};
-
-var updateButtonProps = function updateButtonProps(button, newProps) {
-  if (!button) {
-    return null;
-  }
 
-  if (button.type !== Button$1) {
-    return button;
+  if (showTooltip) {
+    return React__default.createElement(Tooltip$1, {
+      overlay: children,
+      placement: "top"
+    }, LabelElement);
   }
 
-  return React__default.cloneElement(button, _extends({}, newProps));
+  return LabelElement;
 };
 
-var ModalFooter = function ModalFooter(_ref) {
-  var children = _ref.children,
-      actions = _ref.actions,
-      testId = _ref.testId;
+var styles$e = {"caption":"_1DWBq"};
 
-  if (actions) {
-    var _actions$primary, _actions$secondary, _actions$tertiary, _classnames;
+var Caption = function Caption(_ref) {
+  var fieldId = _ref.fieldId,
+      children = _ref.children;
+  return React__default.createElement("div", {
+    id: fieldId && fieldId + "-describer",
+    className: styles$e['caption']
+  }, children);
+};
 
-    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 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 React__default.createElement(FooterContainer, null, children);
-};
+var styles$f = {"error-message":"_nZ2MD"};
 
-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;
+var ErrorMessage = function ErrorMessage(_ref) {
+  var fieldId = _ref.fieldId,
+      children = _ref.children,
+      testId = _ref.testId;
   return React__default.createElement("div", {
-    className: styles$g['modal-footer'],
+    id: fieldId && fieldId + "-error-message",
+    className: styles$f['error-message'],
     "data-testid": testId
   }, React__default.createElement(Inline, {
-    justifyContent: "end",
-    space: 12,
-    flex: hasCustomAlignment ? [1] : undefined
-  }, children));
+    space: 8,
+    alignItems: "center"
+  }, React__default.createElement(IconTimesOctagon, {
+    color: RADISH400,
+    size: "medium"
+  }), children));
 };
 
-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 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"};
-
-function parseDate(str, format, locale) {
-  var parsed = dateFnsParse(str, format, new Date(), {
-    locale: locale
-  });
-
-  if (str.length === format.length && DateUtils.isDate(parsed)) {
-    return parsed;
-  }
-
-  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)
-  };
-}
-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 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 CALENDAR_MODE = {
-  DAY: 'day',
-  WEEK: 'week'
+var Context$1 = createContext({});
+var useFormContext = function useFormContext() {
+  var context = useContext(Context$1);
+  return context || {};
 };
-var CALENDAR_PLACEMENT = {
-  BOTTOM: 'bottom',
-  TOP: 'top'
+
+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 calculateCalendarPosition = function calculateCalendarPosition(placement, anchorPosition, calendarDimensions) {
-  if (!calendarDimensions) {
-    return {
-      left: 0,
-      top: 0
-    };
+var getFormikState = function getFormikState(name, formik) {
+  if (formik === undefined) {
+    return null;
   }
 
-  var horizontalPosition = getHorizontalPosition(anchorPosition, calendarDimensions);
-  var verticalPosition = getVerticalPosition(anchorPosition, placement, calendarDimensions);
-  return _extends({}, horizontalPosition, verticalPosition);
-};
+  var formikPath = getFormikArrayPath(name);
 
-var getHorizontalPosition = function getHorizontalPosition(anchorPosition, calendarDimensions) {
-  var innerWidth = window.innerWidth;
-  var calendarRight = anchorPosition.left + calendarDimensions.width;
+  if (formikPath.length === 0) {
+    return null;
+  }
+
+  var formikLatestLevel = formikPath.reduce(function (acc, path) {
+    var _acc$touched, _acc$error, _acc$value;
 
-  if (innerWidth > calendarRight + BUFFER) {
     return {
-      left: anchorPosition.left
+      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 {
-    left: anchorPosition.right - calendarDimensions.width
+    error: formikLatestLevel.touched ? formikLatestLevel.error : undefined,
+    value: formikLatestLevel.value
   };
 };
-
-var getVerticalPosition = function getVerticalPosition(anchorPosition, placement, calendarDimensions) {
-  var calendarTopAboveTrigger = anchorPosition.top - calendarDimensions.height - PADDING;
-  var calendarTopBelowTrigger = anchorPosition.bottom + PADDING;
-
-  if (placement === CALENDAR_PLACEMENT.TOP) {
-    if (calendarTopAboveTrigger < 0) {
-      return {
-        top: anchorPosition.bottom + PADDING
-      };
-    }
-
-    return {
-      top: calendarTopAboveTrigger + window.scrollY
-    };
-  } else {
-    if (calendarTopBelowTrigger + calendarDimensions.height > window.innerHeight) {
-      return {
-        top: calendarTopAboveTrigger + window.scrollY
-      };
-    }
-
-    return {
-      top: calendarTopBelowTrigger + window.scrollY
-    };
-  }
+var getFormikArrayPath = function getFormikArrayPath(name) {
+  return name.split(/[^a-zA-Z0-9]/).filter(Boolean);
 };
 
-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 _useState = useState(null),
-      calendarRef = _useState[0],
-      setCalendarRef = _useState[1];
+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 style = mode === CALENDAR_MODE.DAY ? styles$h : styles$i;
-  var anchorNode = anchorRef.current;
-  useOnClickOutside({
-    current: calendarRef
-  }, function (event) {
-    var _anchorRef$current;
+  var _useFormContext = useFormContext(),
+      formik = _useFormContext.formik;
 
-    if (!((_anchorRef$current = anchorRef.current) !== null && _anchorRef$current !== void 0 && _anchorRef$current.contains(event === null || event === void 0 ? void 0 : event.srcElement))) {
-      onClickOutside();
-    }
+  var id = useFieldId({
+    name: name,
+    id: inputId
   });
-  var weekRange = selected ? createWeekRange(selected, weekStart) : undefined;
-  var selectedRange = weekRange && {
-    from: weekRange.start,
-    to: weekRange.end
+  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);
+    }
   };
+  var formikState = getFormikState(name, formik);
 
-  var handleSelect = function handleSelect(day) {
-    var selectedDate = setToMidnight(day);
-
-    if (mode === CALENDAR_MODE.DAY) {
-      onSelect(selectedDate);
-    } else {
-      var _weekRange = createWeekRange(selectedDate, weekStart);
+  if (formik && formikState) {
+    var currencyBlur = function currencyBlur() {
+      if (type === 'currency') {
+        formik.setFieldValue(name, Number(value).toFixed(2));
+      }
+    };
 
-      onSelect(_weekRange.start);
-    }
+    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();
+      }
+    });
+  }
 
-    setTimeout(function () {
-      onClickOutside();
-    }, 100);
-  };
+  return controllers;
+};
 
-  if (!anchorNode) {
-    return null;
-  }
+var textFieldStyles = {"text-field":"_20YOA","text-field--invalid":"_3kUSh","text-field--prefixed":"_3IU3Q","text-field--suffixed":"_QXJOD"};
 
-  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
-  }, 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');
-      });
+var useTextField = function useTextField(_ref) {
+  var _classnames;
 
-      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 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 styles$j = {"dropdown-list":"_1v1df","dropdown-list__item--hover":"_eAjpa"};
+var styles$g = {"affix-container":"_ybKOk","affix-container--prefixed":"_2COk3","affix-container--suffixed":"_1xXXN","prefix":"_eX5OL","suffix":"__YH01"};
 
-var findNextActiveIndex = function findNextActiveIndex(items, startAt) {
-  var startIndex = 0;
+var AffixContainer = function AffixContainer(_ref) {
+  var _classnames;
 
-  if (startAt !== null && startAt + 1 <= items.length) {
-    startIndex = startAt + 1;
-  }
+  var prefix = _ref.prefix,
+      suffix = _ref.suffix,
+      children = _ref.children,
+      testId = _ref.testId;
+  var container = useRef(null);
+  var prefixElement = useRef(null);
+  var suffixElement = useRef(null);
+  var isHidden = container.current && container.current.offsetParent === null;
+  useLayoutEffect(function () {
+    if (container.current) {
+      var input = container.current.querySelector('input, [class$=control] > div');
 
-  var hasEnabledItems = items.slice(startIndex).some(function (item) {
-    return !item.disabled;
-  });
+      if (input) {
+        if (prefix && prefixElement.current) {
+          var _prefixElement$curren;
 
-  if (hasEnabledItems) {
-    var _nextEnabledIndex = items.findIndex(function (item, index) {
-      if (index < startIndex) {
-        return false;
-      }
+          var prefixWidth = prefixElement === null || prefixElement === void 0 ? void 0 : (_prefixElement$curren = prefixElement.current) === null || _prefixElement$curren === void 0 ? void 0 : _prefixElement$curren.offsetWidth;
+          input.style.paddingLeft = prefixWidth + 'px';
+        }
 
-      return !item.disabled;
-    });
+        if (suffix && suffixElement.current) {
+          var suffixWidth = suffixElement.current.offsetWidth;
+          input.style.paddingRight = suffixWidth + 'px';
+        }
+      }
+    }
+  }, [prefix, suffix, isHidden]);
+  var hasPrefix = !!prefix;
+  var hasSuffix = !!suffix;
 
-    return _nextEnabledIndex;
+  if (!hasPrefix && !hasSuffix) {
+    return children;
   }
 
-  var nextEnabledIndex = items.findIndex(function (item) {
-    return !item.disabled;
-  });
-  return nextEnabledIndex >= 0 ? nextEnabledIndex : null;
+  var classes = classnames(styles$g['affix-container'], (_classnames = {}, _classnames[styles$g['affix-container--prefixed']] = hasPrefix, _classnames[styles$g['affix-container--suffixed']] = hasSuffix, _classnames));
+  return React__default.createElement("div", {
+    className: classes,
+    ref: container,
+    "data-testid": testId
+  }, hasPrefix && React__default.createElement("div", {
+    className: styles$g['prefix'],
+    ref: prefixElement
+  }, prefix), children, hasSuffix && React__default.createElement("div", {
+    className: styles$g['suffix'],
+    ref: suffixElement
+  }, suffix));
 };
-var findPreviousEnabledIndex = function findPreviousEnabledIndex(items, startAt) {
-  for (var i = startAt - 1; i >= 0; i--) {
-    if (!items[i].disabled) {
-      return i;
-    }
-  }
 
-  for (var _i = items.length - 1; _i > startAt - 1; _i--) {
-    if (!items[_i].disabled) {
-      return _i;
+var TimeFieldInput = function TimeFieldInput(_ref) {
+  var inputProps = _ref.inputProps,
+      allOtherProps = _ref.allOtherProps,
+      prefix = _ref.prefix,
+      duration = _ref.duration;
+  return React__default.createElement(AffixContainer, {
+    prefix: prefix ? prefix : React__default.createElement(IconClock, {
+      size: "medium",
+      color: GREY400
+    }),
+    suffix: duration
+  }, 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);
     }
-  }
-
-  return null;
+  })));
 };
 
-var useListKeyboardNavigation = function useListKeyboardNavigation(listItems, actions) {
-  var _useState = useState(null),
-      focusedItem = _useState[0],
-      setFocusedItem = _useState[1];
+var _excluded$2g = ["placeholder", "autoComplete", "selectedTimeOption", "prefix", "startTime", "duration"];
 
-  var focusOnNextItem = function focusOnNextItem(callback) {
-    var nextFocusItem = findNextActiveIndex(listItems, focusedItem);
-    setFocusedItem(nextFocusItem);
-    callback(nextFocusItem);
-  };
+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,
+      selectedTimeOption = _ref.selectedTimeOption,
+      prefix = _ref.prefix,
+      duration = _ref.duration,
+      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2g);
 
-  var focusOnPrevItem = function focusOnPrevItem(callback) {
-    var prevFocusItem = findPreviousEnabledIndex(listItems, focusedItem || 0);
-    setFocusedItem(prevFocusItem);
-    callback(prevFocusItem);
-  };
+  var _useTextField = useTextField(_extends({}, allOtherProps, {
+    placeholder: placeholder,
+    autoComplete: autoComplete,
+    ref: ref
+  })),
+      inputProps = _useTextField.inputProps,
+      fieldProps = _useTextField.fieldProps;
 
-  var setFocusOnItem = function setFocusOnItem(index) {
-    if (index < 0) {
-      setFocusedItem(null);
-      return;
+  useEffect(function () {
+    if (selectedTimeOption) {
+      inputProps.onChange({
+        target: {
+          value: selectedTimeOption
+        }
+      });
     }
+  }, [selectedTimeOption]);
+  return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement(TimeFieldInput, {
+    inputProps: inputProps,
+    allOtherProps: allOtherProps,
+    prefix: prefix,
+    duration: duration
+  }));
+};
 
-    if (listItems[index].disabled) {
-      return;
-    }
+var TimeFieldDropdownTrigger = forwardRef(TimeFieldDropdownElement);
 
-    setFocusedItem(index);
-  };
+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 handleKeyPress = useCallback(function (event) {
-    if (event.key === 'ArrowDown') {
-      focusOnNextItem(function (focusItem) {
-        var _actions$onNavigate;
+  var _useState = useState(false),
+      isOpen = _useState[0],
+      setIsOpen = _useState[1];
 
-        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 triggerRef = useRef(null);
+  var paneRef = useRef(null);
+  var isFocusingOverlay = useRef(false);
 
-    if (event.key === 'ArrowUp') {
-      focusOnPrevItem(function (focusItem) {
-        var _actions$onNavigate2;
+  var handleToggleDropdown = function handleToggleDropdown() {
+    return setIsOpen(!isOpen);
+  };
 
-        return actions === null || actions === void 0 ? void 0 : (_actions$onNavigate2 = actions.onNavigate) === null || _actions$onNavigate2 === void 0 ? void 0 : _actions$onNavigate2.call(actions, focusItem);
-      });
+  var handleMouseClick = function handleMouseClick(e) {
+    if (trigger.type === TimeFieldDropdownTrigger) {
+      setIsOpen(true);
+    } else {
+      handleToggleDropdown();
     }
 
-    if (event.key === 'Enter' && focusedItem !== null) {
-      var _actions$onPressEnter;
+    e.stopPropagation();
 
-      var onClick = listItems[focusedItem].onClick;
+    if ('onClick' in trigger.props) {
+      trigger.props.onClick(e);
+    }
+  };
+
+  var handleMouseEnter = function handleMouseEnter(e) {
+    if (triggersOn !== 'hover') {
+      return;
+    }
+
+    setIsOpen(true);
+
+    if ('onMouseEnter' in trigger.props) {
+      trigger.props.onMouseEnter(e);
+    }
+  };
+
+  var handleFocus = function handleFocus(e) {
+    if (triggersOn !== 'hover') {
+      if (trigger.type === TimeFieldDropdownTrigger && !isOpen) {
+        setIsOpen(true);
+      }
+
+      if ('onFocus' in trigger.props) {
+        trigger.props.onFocus(e);
+      }
+
+      return;
+    }
+
+    setIsOpen(true);
+
+    if ('onFocus' in trigger.props) {
+      trigger.props.onFocus(e);
+    }
+  };
+
+  var handleMouseLeave = function handleMouseLeave(e) {
+    if (triggersOn !== 'hover' || !paneRef.current) {
+      return;
+    }
+
+    var panePosition = paneRef.current.getBoundingClientRect();
+
+    if (!isGoingTowardsPane(panePosition, e.clientY)) {
+      setIsOpen(false);
+
+      if ('onMouseLeave' in trigger.props) {
+        trigger.props.onMouseLeave && trigger.props.onMouseLeave(e);
+      }
+    }
+  };
+
+  var handlePaneMouseEnter = function handlePaneMouseEnter() {
+    isFocusingOverlay.current = true;
+  };
+
+  var handlePaneMouseLeave = function handlePaneMouseLeave() {
+    isFocusingOverlay.current = false;
+
+    if (triggersOn === 'hover') {
+      setIsOpen(false);
+    }
+  };
+
+  var handleOnBlur = function handleOnBlur(e) {
+    trigger.props.onBlur && trigger.props.onBlur(e);
+
+    if (!paneRef || !(paneRef !== null && paneRef !== void 0 && paneRef.current)) {
+      return;
+    }
+
+    var focusableElements = getKeyboardFocusableElements(paneRef.current);
+
+    if (focusableElements.length > 0) {
+      window.setTimeout(function () {
+        return focusableElements[0].focus();
+      }, 0);
+    } else {
+      setIsOpen(false);
+    }
+  };
+
+  var getRef = function getRef() {
+    if ((trigger.type === Button$1 || trigger.type === TimeFieldDropdownTrigger) && trigger.ref) {
+      return trigger.ref;
+    }
+
+    return triggerRef;
+  };
+
+  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 styles$h = {"dropdown-list":"_1v1df","dropdown-list__item--hover":"_eAjpa"};
+
+var findNextActiveIndex = function findNextActiveIndex(items, startAt) {
+  var startIndex = 0;
+
+  if (startAt !== null && startAt + 1 <= items.length) {
+    startIndex = startAt + 1;
+  }
+
+  var hasEnabledItems = items.slice(startIndex).some(function (item) {
+    return !item.disabled;
+  });
+
+  if (hasEnabledItems) {
+    var _nextEnabledIndex = items.findIndex(function (item, index) {
+      if (index < startIndex) {
+        return false;
+      }
+
+      return !item.disabled;
+    });
+
+    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;
+    }
+  }
+
+  for (var _i = items.length - 1; _i > startAt - 1; _i--) {
+    if (!items[_i].disabled) {
+      return _i;
+    }
+  }
+
+  return null;
+};
+
+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;
+    }
+
+    if (listItems[index].disabled) {
+      return;
+    }
+
+    setFocusedItem(index);
+  };
+
+  var handleKeyPress = useCallback(function (event) {
+    if (event.key === 'ArrowDown') {
+      focusOnNextItem(function (focusItem) {
+        var _actions$onNavigate;
+
+        return actions === null || actions === void 0 ? void 0 : (_actions$onNavigate = actions.onNavigate) === null || _actions$onNavigate === void 0 ? void 0 : _actions$onNavigate.call(actions, focusItem);
+      });
+    }
+
+    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));
     }
@@ -5042,17 +5221,27 @@ var useListKeyboardNavigation = function useListKeyboardNavigation(listItems, ac
   };
 };
 
-var styles$k = {"dropdown-list-divider":"_3x1F6"};
+var styles$i = {"dropdown-list-divider":"_3x1F6"};
 
 var DropdownListDivider = function DropdownListDivider(_ref) {
   var testId = _ref.testId;
   return React__default.createElement("div", {
-    className: styles$k['dropdown-list-divider'],
+    className: styles$i['dropdown-list-divider'],
     "data-testid": testId
   });
 };
 
-var styles$l = {"dropdown-list-item":"_B3_I5","dropdown-list-item--selected":"_1mr1h","dropdown-list-item__content":"_2b7Fg","dropdown-list-item--disabled":"_2l0Cb"};
+var styles$j = {"dropdown-list-item":"_B3_I5","dropdown-list-item--selected":"_1mr1h","dropdown-list-item__content":"_2b7Fg","dropdown-list-item--disabled":"_2l0Cb"};
+
+var COLORS = {};
+
+var getColor = function getColor(color) {
+  if (color && COLORS[color]) {
+    return COLORS[color];
+  } else {
+    return color;
+  }
+};
 
 var TEXT_TYPES = {
   CAPTION: 'caption',
@@ -5077,9 +5266,9 @@ var ALIGNMENTS = {
   JUSTIFY: 'justify'
 };
 
-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 styles$k = {"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 _excluded$2h = ["children", "as", "emphasis", "alignment", "color", "testId"];
 
 var Text = function Text(_ref) {
   var _classnames;
@@ -5091,14 +5280,14 @@ var Text = function Text(_ref) {
       alignment = _ref.alignment,
       color = _ref.color,
       testId = _ref.testId,
-      positionProps = _objectWithoutPropertiesLoose(_ref, _excluded$2g);
+      positionProps = _objectWithoutPropertiesLoose(_ref, _excluded$2h);
 
   var positionStyles = usePositionStyles(positionProps);
   var elementProps = {
     style: _extends({
-      color: color
+      color: getColor(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)),
+    className: classnames(styles$k['text'], (_classnames = {}, _classnames[styles$k['text--bold']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.BOLD), _classnames[styles$k['text--italic']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.ITALIC), _classnames[styles$k['text--underline']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.UNDERLINE), _classnames[styles$k['text--monospace']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.MONOSPACE), _classnames[styles$k['text--align-left']] = alignment === ALIGNMENTS.LEFT, _classnames[styles$k['text--align-right']] = alignment === ALIGNMENTS.RIGHT, _classnames[styles$k['text--align-center']] = alignment === ALIGNMENTS.CENTER, _classnames[styles$k['text--align-justify']] = alignment === ALIGNMENTS.JUSTIFY, _classnames[styles$k['text__body']] = as === TEXT_TYPES.BODY, _classnames[styles$k['text__insight']] = as === TEXT_TYPES.INSIGHT, _classnames[styles$k['text__caption']] = as === TEXT_TYPES.CAPTION, _classnames)),
     'data-testid': testId
   };
   var pTypes = [TEXT_TYPES.BODY, TEXT_TYPES.CAPTION, TEXT_TYPES.INSIGHT];
@@ -5109,37 +5298,24 @@ var Text = function Text(_ref) {
 var Bold = function Bold(_ref) {
   var children = _ref.children;
   return React__default.createElement("span", {
-    className: classnames(styles$m['text--bold'], styles$m['text'])
+    className: classnames(styles$k['text--bold'], styles$k['text'])
   }, children);
 };
 
 var Underline = function Underline(_ref) {
   var children = _ref.children;
   return React__default.createElement("span", {
-    className: classnames(styles$m['text--underline'], styles$m['text'])
+    className: classnames(styles$k['text--underline'], styles$k['text'])
   }, children);
 };
 
 var Italic = function Italic(_ref) {
   var children = _ref.children;
   return React__default.createElement("span", {
-    className: classnames(styles$m['text--italic'], styles$m['text'])
+    className: classnames(styles$k['text--italic'], styles$k['text'])
   }, children);
 };
 
-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 DropdownListItem = function DropdownListItem(_ref) {
   var _classNames;
 
@@ -5179,7 +5355,7 @@ var DropdownListItem = function DropdownListItem(_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)),
+    className: classnames(styles$j['dropdown-list-item'], (_classNames = {}, _classNames[styles$j['dropdown-list-item--selected']] = selected, _classNames[styles$j['dropdown-list-item--disabled']] = disabled, _classNames)),
     onMouseDown: function onMouseDown(e) {
       return e.preventDefault();
     },
@@ -5188,7 +5364,7 @@ var DropdownListItem = function DropdownListItem(_ref) {
     role: "menuitem",
     "data-testid": testId
   }, prefix, React__default.createElement("div", {
-    className: styles$l['dropdown-list-item__content']
+    className: styles$j['dropdown-list-item__content']
   }, React__default.createElement(Stack, {
     space: 4,
     flex: [1]
@@ -5280,7 +5456,7 @@ var DropdownList = function DropdownList(_ref) {
     }
   }, [highlightItemIndex]);
   return React__default.createElement("ul", {
-    className: styles$j['dropdown-list'],
+    className: styles$h['dropdown-list'],
     "data-testid": testId,
     ref: listRef
   }, React__default.Children.map(children, function (child, index) {
@@ -5288,7 +5464,7 @@ var DropdownList = function DropdownList(_ref) {
 
     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)),
+      className: classnames(styles$h['dropdown-list__item'], (_classNames = {}, _classNames[styles$h['dropdown-list__item--hover']] = focusedItem === index, _classNames)),
       onMouseEnter: function onMouseEnter() {
         return setFocusOnItem(index);
       }
@@ -5296,537 +5472,438 @@ var DropdownList = function DropdownList(_ref) {
   }));
 };
 
-var styles$n = {"label":"_h724f","label--truncate":"_1VUoF"};
-
-var isEllipsisActive = function isEllipsisActive(e) {
-  return e.offsetWidth < e.scrollWidth;
+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 useLabelTooltip = function useLabelTooltip(labelId, tooltipContent, truncate) {
-  var _useState = useState(false),
-      showTooltip = _useState[0],
-      setShowTooltip = _useState[1];
+var styles$l = {"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 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 {
-    showTooltip: showTooltip,
-    shouldTruncate: shouldTruncate
-  };
-};
-
-var Label = function Label(_ref) {
-  var _classNames;
-
-  var htmlFor = _ref.htmlFor,
-      children = _ref.children,
-      _ref$truncate = _ref.truncate,
-      truncate = _ref$truncate === void 0 ? true : _ref$truncate;
-  var labelId = "label-" + htmlFor;
+var styles$m = {"overlay":"_2puqJ","overlay--after-open":"_1167h","overlay--before-close":"_t_t7L","content":"_wQQ_2","content--after-open":"_3jwux","content--before-close":"_2c2QP"};
 
-  var _useLabelTooltip = useLabelTooltip(labelId, children, truncate),
-      showTooltip = _useLabelTooltip.showTooltip,
-      shouldTruncate = _useLabelTooltip.shouldTruncate;
+var styles$n = {"header":"_36nxW","header__close-button":"_2zYre","sub-header":"_2XwRD"};
 
-  var LabelElement = React__default.createElement("label", {
-    htmlFor: htmlFor,
-    id: labelId,
-    className: classnames(styles$n['label'], (_classNames = {}, _classNames[styles$n['label--truncate']] = shouldTruncate, _classNames))
-  }, children);
+var ModalHeader = function ModalHeader(_ref) {
+  var header = _ref.header,
+      subHeader = _ref.subHeader,
+      onClose = _ref.onClose,
+      loading = _ref.loading;
 
-  if (showTooltip) {
-    return React__default.createElement(Tooltip$1, {
-      overlay: children,
-      placement: "top"
-    }, LabelElement);
+  if (!header && !subHeader) {
+    return onClose ? React__default.createElement("div", {
+      className: styles$n['header__close-button']
+    }, React__default.createElement(Button$1, {
+      theme: "link-icon",
+      onClick: onClose,
+      disabled: loading
+    }, React__default.createElement(IconTimes, null))) : null;
   }
 
-  return LabelElement;
-};
-
-var styles$o = {"caption":"_1DWBq"};
-
-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 styles$p = {"error-message":"_nZ2MD"};
-
-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
+  return React__default.createElement(Stack, {
+    space: 12,
+    marginBottom: 24
   }, React__default.createElement(Inline, {
-    space: 8,
+    flex: [1],
     alignItems: "center"
-  }, React__default.createElement(IconTimesOctagon, {
-    color: RADISH400,
-    size: "medium"
-  }), children));
-};
-
-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));
+  }, React__default.createElement("span", {
+    className: styles$n['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$n['sub-header']
+  }, subHeader));
 };
 
-var Context$1 = createContext({});
-var useFormContext = function useFormContext() {
-  var context = useContext(Context$1);
+var ModalContext = createContext({
+  isModalMounted: false
+});
+var useModalContext = function useModalContext() {
+  var context = useContext(ModalContext);
   return context || {};
 };
 
-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 getFormikState = function getFormikState(name, formik) {
-  if (formik === undefined) {
-    return null;
-  }
-
-  var formikPath = getFormikArrayPath(name);
-
-  if (formikPath.length === 0) {
-    return null;
-  }
-
-  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);
-    },
-    onBlur: function onBlur(e) {
-      return _onBlur && _onBlur(e.target.value);
-    },
-    onFocus: function onFocus(e) {
-      return _onFocus && _onFocus(e.target.value);
+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
     },
-    onKeyDown: function onKeyDown(e) {
-      return _onKeyDown && _onKeyDown(e.key);
+    overlay: {
+      zIndex: zIndex
     }
   };
-  var formikState = getFormikState(name, formik);
+  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$m['overlay'],
+      afterOpen: styles$m['overlay--after-open'],
+      beforeClose: styles$m['overlay--before-close']
+    },
+    className: {
+      base: styles$m['content'],
+      afterOpen: styles$m['content--after-open'],
+      beforeClose: styles$m['content--before-close']
+    }
+  }, React__default.createElement(ModalHeader, {
+    header: header,
+    subHeader: subHeader,
+    onClose: onClose,
+    loading: loading
+  }), React__default.createElement(ModalContext.Provider, {
+    value: {
+      isModalMounted: true
+    }
+  }, children));
+};
 
-  if (formik && formikState) {
-    var currencyBlur = function currencyBlur() {
-      if (type === 'currency') {
-        formik.setFieldValue(name, Number(value).toFixed(2));
-      }
-    };
+Modal.setAppElement = function (rootElement) {
+  ReactModal.setAppElement(rootElement);
+};
 
-    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();
-      }
-    });
-  }
+var THRESHOLD = 20;
+var useScrollShadow = function useScrollShadow() {
+  var ref = useRef(null);
 
-  return controllers;
-};
+  var _useState = useState(false),
+      showScrollShadow = _useState[0],
+      setShowScrollShadow = _useState[1];
 
-var textFieldStyles = {"text-field":"_20YOA","text-field--invalid":"_3kUSh","text-field--prefixed":"_3IU3Q","text-field--suffixed":"_QXJOD"};
+  useEffect(function () {
+    if (!ref.current) {
+      return;
+    }
 
-var useTextField = function useTextField(_ref) {
-  var _classnames;
+    var modalBody = ref.current;
 
-  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
-  };
+    if (modalBody.offsetHeight > THRESHOLD) {
+      setShowScrollShadow(true);
+    }
+  }, []);
   return {
-    inputProps: inputProps,
-    fieldProps: fieldProps
+    ref: ref,
+    showScrollShadow: showScrollShadow
   };
 };
 
-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 _excluded$2h = ["placeholder", "autoComplete", "selectedTimeOption"];
-
-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,
-      selectedTimeOption = _ref.selectedTimeOption,
-      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2h);
+var styles$o = {"modal-body":"_2J-ku","modal-body--with-scroll-shadow":"_2ErCP"};
 
-  var _useTextField = useTextField(_extends({}, allOtherProps, {
-    placeholder: placeholder,
-    autoComplete: autoComplete,
-    ref: ref
-  })),
-      inputProps = _useTextField.inputProps,
-      fieldProps = _useTextField.fieldProps;
+var ModalBody = function ModalBody(_ref) {
+  var _classNames;
 
-  useEffect(function () {
-    if (selectedTimeOption) {
-      inputProps.onChange({
-        target: {
-          value: selectedTimeOption
-        }
-      });
-    }
-  }, [selectedTimeOption]);
-  return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement(TimeFieldInput, {
-    inputProps: inputProps,
-    allOtherProps: allOtherProps
-  }));
-};
+  var children = _ref.children,
+      testId = _ref.testId;
 
-var TimeFieldDropdownTrigger = forwardRef(TimeFieldDropdownElement);
+  var _useScrollShadow = useScrollShadow(),
+      ref = _useScrollShadow.ref,
+      showScrollShadow = _useScrollShadow.showScrollShadow;
 
-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;
+  return React__default.createElement("div", {
+    className: classnames(styles$o['modal-body'], (_classNames = {}, _classNames[styles$o['modal-body--with-scroll-shadow']] = showScrollShadow, _classNames)),
+    ref: ref,
+    "data-testid": testId
+  }, children);
+};
 
-  var _useState = useState(false),
-      isOpen = _useState[0],
-      setIsOpen = _useState[1];
+var styles$p = {"modal-footer":"_LKOr5","tertiary-container":"_Qktd-"};
 
-  var triggerRef = useRef(null);
-  var paneRef = useRef(null);
-  var isFocusingOverlay = useRef(false);
+var updateButtonProps = function updateButtonProps(button, newProps) {
+  if (!button) {
+    return null;
+  }
 
-  var handleToggleDropdown = function handleToggleDropdown() {
-    return setIsOpen(!isOpen);
-  };
+  if (button.type !== Button$1) {
+    return button;
+  }
 
-  var handleMouseClick = function handleMouseClick(e) {
-    if (trigger.type === TimeFieldDropdownTrigger) {
-      setIsOpen(true);
-    } else {
-      handleToggleDropdown();
-    }
+  return React__default.cloneElement(button, _extends({}, newProps));
+};
 
-    e.stopPropagation();
+var ModalFooter = function ModalFooter(_ref) {
+  var children = _ref.children,
+      actions = _ref.actions,
+      testId = _ref.testId;
 
-    if ('onClick' in trigger.props) {
-      trigger.props.onClick(e);
-    }
-  };
+  if (actions) {
+    var _actions$primary, _actions$secondary, _actions$tertiary, _classnames;
 
-  var handleMouseEnter = function handleMouseEnter(e) {
-    if (triggersOn !== 'hover') {
-      return;
-    }
+    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$p['tertiary-container']] = tertiaryButton && tertiaryButton.props.theme.startsWith('link'), _classnames))
+    }, tertiaryButton || React__default.createElement("div", null)), React__default.createElement(Inline, {
+      space: 12
+    }, secondaryButton, primaryButton)));
+  }
 
-    setIsOpen(true);
+  return React__default.createElement(FooterContainer, null, children);
+};
 
-    if ('onMouseEnter' in trigger.props) {
-      trigger.props.onMouseEnter(e);
-    }
-  };
+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$p['modal-footer'],
+    "data-testid": testId
+  }, React__default.createElement(Inline, {
+    justifyContent: "end",
+    space: 12,
+    flex: hasCustomAlignment ? [1] : undefined
+  }, children));
+};
 
-  var handleFocus = function handleFocus(e) {
-    if (triggersOn !== 'hover') {
-      if (trigger.type === TimeFieldDropdownTrigger && !isOpen) {
-        setIsOpen(true);
-      }
+var styles$q = {"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"};
 
-      if ('onFocus' in trigger.props) {
-        trigger.props.onFocus(e);
-      }
+var styles$r = {"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"};
 
-      return;
-    }
+function parseDate(str, format, locale) {
+  var parsed = dateFnsParse(str, format, new Date(), {
+    locale: locale
+  });
 
-    setIsOpen(true);
+  if (str.length === format.length && DateUtils.isDate(parsed)) {
+    return parsed;
+  }
 
-    if ('onFocus' in trigger.props) {
-      trigger.props.onFocus(e);
-    }
+  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)
   };
+}
+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 handleMouseLeave = function handleMouseLeave(e) {
-    if (triggersOn !== 'hover' || !paneRef.current) {
-      return;
-    }
+var CALENDAR_MODE = {
+  DAY: 'day',
+  WEEK: 'week'
+};
+var CALENDAR_PLACEMENT = {
+  BOTTOM: 'bottom',
+  TOP: 'top'
+};
 
-    var panePosition = paneRef.current.getBoundingClientRect();
+var calculateCalendarPosition = function calculateCalendarPosition(placement, anchorPosition, calendarDimensions) {
+  if (!calendarDimensions) {
+    return {
+      left: 0,
+      top: 0
+    };
+  }
 
-    if (!isGoingTowardsPane(panePosition, e.clientY)) {
-      setIsOpen(false);
+  var horizontalPosition = getHorizontalPosition(anchorPosition, calendarDimensions);
+  var verticalPosition = getVerticalPosition(anchorPosition, placement, calendarDimensions);
+  return _extends({}, horizontalPosition, verticalPosition);
+};
 
-      if ('onMouseLeave' in trigger.props) {
-        trigger.props.onMouseLeave && trigger.props.onMouseLeave(e);
-      }
-    }
-  };
+var getHorizontalPosition = function getHorizontalPosition(anchorPosition, calendarDimensions) {
+  var innerWidth = window.innerWidth;
+  var calendarRight = anchorPosition.left + calendarDimensions.width;
 
-  var handlePaneMouseEnter = function handlePaneMouseEnter() {
-    isFocusingOverlay.current = true;
+  if (innerWidth > calendarRight + BUFFER) {
+    return {
+      left: anchorPosition.left
+    };
+  }
+
+  return {
+    left: anchorPosition.right - calendarDimensions.width
   };
+};
 
-  var handlePaneMouseLeave = function handlePaneMouseLeave() {
-    isFocusingOverlay.current = false;
+var getVerticalPosition = function getVerticalPosition(anchorPosition, placement, calendarDimensions) {
+  var calendarTopAboveTrigger = anchorPosition.top - calendarDimensions.height - PADDING;
+  var calendarTopBelowTrigger = anchorPosition.bottom + PADDING;
 
-    if (triggersOn === 'hover') {
-      setIsOpen(false);
+  if (placement === CALENDAR_PLACEMENT.TOP) {
+    if (calendarTopAboveTrigger < 0) {
+      return {
+        top: anchorPosition.bottom + PADDING
+      };
     }
-  };
 
-  var handleOnBlur = function handleOnBlur() {
-    if (!paneRef || !(paneRef !== null && paneRef !== void 0 && paneRef.current)) {
-      return;
+    return {
+      top: calendarTopAboveTrigger + window.scrollY
+    };
+  } else {
+    if (calendarTopBelowTrigger + calendarDimensions.height > window.innerHeight) {
+      return {
+        top: calendarTopAboveTrigger + window.scrollY
+      };
     }
 
-    var focusableElements = getKeyboardFocusableElements(paneRef.current);
+    return {
+      top: calendarTopBelowTrigger + window.scrollY
+    };
+  }
+};
 
-    if (focusableElements.length > 0) {
-      window.setTimeout(function () {
-        return focusableElements[0].focus();
-      }, 0);
-    } else if (!isFocusingOverlay.current) {
-      setIsOpen(false);
+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 _useState = useState(null),
+      calendarRef = _useState[0],
+      setCalendarRef = _useState[1];
+
+  var style = mode === CALENDAR_MODE.DAY ? styles$q : styles$r;
+  var anchorNode = anchorRef.current;
+  useOnClickOutside({
+    current: calendarRef
+  }, function (event) {
+    var _anchorRef$current;
+
+    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 getRef = function getRef() {
-    if ((trigger.type === Button$1 || trigger.type === TimeFieldDropdownTrigger) && trigger.ref) {
-      return trigger.ref;
+  var handleSelect = function handleSelect(day) {
+    var selectedDate = setToMidnight(day);
+
+    if (mode === CALENDAR_MODE.DAY) {
+      onSelect(selectedDate);
+    } else {
+      var _weekRange = createWeekRange(selectedDate, weekStart);
+
+      onSelect(_weekRange.start);
     }
 
-    return triggerRef;
+    setTimeout(function () {
+      onClickOutside();
+    }, 100);
   };
 
-  var updatedRef = getRef();
-  var triggerProps = {
-    onClick: handleMouseClick,
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
-    onBlur: handleOnBlur,
-    ref: updatedRef,
-    style: {
-      width: triggerWidth === 'full' ? '100%' : 'fit-content'
+  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);
     },
-    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));
-};
+    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');
+      });
 
-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 (!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 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 DataTableCellElement = function DataTableCellElement(_ref, ref) {
   var _columns$columnIndex, _classnames, _classnames2, _classnames3;
 
@@ -5848,17 +5925,17 @@ var DataTableCellElement = function DataTableCellElement(_ref, ref) {
   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))
+    className: classnames(styles$l['data-table-cell__error-icon'], (_classnames = {}, _classnames[styles$l['data-table-cell__error-icon--right-align']] = isRightAligned, _classnames[styles$l['data-table-cell__error-icon--left-align']] = !isRightAligned, _classnames))
   }, React__default.createElement(IconTimesOctagon, {
     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']),
+    className: classnames((_classnames2 = {}, _classnames2[styles$l['data-table-cell--invalid']] = hasError, _classnames2[styles$l['data-table-cell--no-padding']] = noPadding, _classnames2[styles$l['data-table-cell--vertical-border']] = hasVerticalBorders, _classnames2), styles$l['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))
+    className: classnames(styles$l['data-table-cell__content'], (_classnames3 = {}, _classnames3[styles$l['data-table-cell__content--with-error']] = hasError, _classnames3[styles$l['data-table-cell__content--right-align']] = isRightAligned, _classnames3))
   }, isRightAligned && icon, children, !isRightAligned && icon));
   return React__default.createElement(Tooltip$1, {
     overlay: errorMessage,
@@ -5895,59 +5972,6 @@ var DataTableRowActions = function DataTableRowActions(_ref) {
   })));
 };
 
-var styles$r = {"affix-container":"_ybKOk","affix-container--prefixed":"_2COk3","affix-container--suffixed":"_1xXXN","prefix":"_eX5OL","suffix":"__YH01"};
-
-var AffixContainer = function AffixContainer(_ref) {
-  var _classnames;
-
-  var prefix = _ref.prefix,
-      suffix = _ref.suffix,
-      children = _ref.children,
-      testId = _ref.testId;
-  var container = useRef(null);
-  var prefixElement = useRef(null);
-  var suffixElement = useRef(null);
-  var isHidden = container.current && container.current.offsetParent === null;
-  useLayoutEffect(function () {
-    if (container.current) {
-      var input = container.current.querySelector('input, [class$=control] > div');
-
-      if (input) {
-        if (prefix && prefixElement.current) {
-          var _prefixElement$curren;
-
-          var prefixWidth = prefixElement === null || prefixElement === void 0 ? void 0 : (_prefixElement$curren = prefixElement.current) === null || _prefixElement$curren === void 0 ? void 0 : _prefixElement$curren.offsetWidth;
-          input.style.paddingLeft = prefixWidth + 'px';
-        }
-
-        if (suffix && suffixElement.current) {
-          var suffixWidth = suffixElement.current.offsetWidth;
-          input.style.paddingRight = suffixWidth + 'px';
-        }
-      }
-    }
-  }, [prefix, suffix, isHidden]);
-  var hasPrefix = !!prefix;
-  var hasSuffix = !!suffix;
-
-  if (!hasPrefix && !hasSuffix) {
-    return children;
-  }
-
-  var classes = classnames(styles$r['affix-container'], (_classnames = {}, _classnames[styles$r['affix-container--prefixed']] = hasPrefix, _classnames[styles$r['affix-container--suffixed']] = hasSuffix, _classnames));
-  return React__default.createElement("div", {
-    className: classes,
-    ref: container,
-    "data-testid": testId
-  }, hasPrefix && React__default.createElement("div", {
-    className: styles$r['prefix'],
-    ref: prefixElement
-  }, prefix), children, hasSuffix && React__default.createElement("div", {
-    className: styles$r['suffix'],
-    ref: suffixElement
-  }, suffix));
-};
-
 var styles$s = {"data-table-editable-cell":"_qYNve","data-table-editable-cell--right-aligned":"_3w6bw","data-table-editable-cell--currency":"_2y-_5","data-table-editable-cell--invalid":"_1Mx8j","data-table-editable-cell--top-left":"_2BlhN","data-table-editable-cell--top-right":"_1qDoN","data-table-editable-cell--bottom-left":"_2NUlb","data-table-editable-cell--bottom-right":"_3Mm-v"};
 
 var DataTableEditableCellElement = function DataTableEditableCellElement(_ref, ref) {
@@ -8503,7 +8527,7 @@ var DateField = function DateField(_ref) {
     error: controllers.error
   };
   var dayPickerProps = {
-    classNames: styles$h,
+    classNames: styles$q,
     disabledDays: function disabledDays(day) {
       return _disabledDays && _disabledDays(setToMidnight(day));
     },
@@ -8521,7 +8545,7 @@ var DateField = function DateField(_ref) {
     })
   }, React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$h,
+    classNames: styles$q,
     formatDate: formatDate,
     parseDate: parseDate,
     placeholder: placeholder || format.toUpperCase(),
@@ -9001,7 +9025,7 @@ var WeekField = function WeekField(_ref) {
   };
 
   var dayPickerProps = {
-    classNames: styles$i,
+    classNames: styles$r,
     disabledDays: function disabledDays(day) {
       return _disabledDays && _disabledDays(setToMidnight(day));
     },
@@ -9031,7 +9055,7 @@ var WeekField = function WeekField(_ref) {
     })
   }, React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$i,
+    classNames: styles$r,
     formatDate: formatDate,
     parseDate: parseDate,
     placeholder: placeholder || format.toUpperCase(),
@@ -9070,35 +9094,59 @@ var WeekField = function WeekField(_ref) {
   })));
 };
 
-var getTimeOptions = function getTimeOptions(interval, startTime) {
+var getTimeOptions = function getTimeOptions(interval, startTime, skipStartTime) {
   if (startTime === void 0) {
     startTime = new Date('Janurary 1 2023 00:00:00');
   }
 
+  if (skipStartTime === void 0) {
+    skipStartTime = false;
+  }
+
+  var intervalCoeffecient = 1000 * 60 * interval;
   var optionsCount = 60 * 24 / interval;
   var timeOptions = [];
-  var intervalCoeffecient = 1000 * 60 * interval;
   var rounded = new Date(Math.ceil(startTime.getTime() / intervalCoeffecient) * intervalCoeffecient);
+  var skipFirstInterval = skipStartTime && startTime.getTime() === rounded.getTime();
 
-  var formatHours = function formatHours(hours) {
-    if (hours === 0) {
-      return 12;
-    } else if (hours > 12) {
-      return hours - 12;
-    } else {
-      return hours;
-    }
-  };
-
-  for (var i = 0; i < optionsCount; i++) {
+  for (var i = skipFirstInterval ? 1 : 0; i < optionsCount; i++) {
     var newDate = new Date(rounded.getTime());
     newDate.setMinutes(rounded.getMinutes() + interval * i);
+    var hours = formatHours(newDate.getHours());
     var minutes = newDate.getMinutes();
-    timeOptions.push(formatHours(newDate.getHours()) + ":" + (minutes === 0 ? '00' : minutes) + " " + (newDate.getHours() < 12 ? 'AM' : 'PM'));
+    var period = newDate.getHours() < 12 ? 'AM' : 'PM';
+    timeOptions.push(hours + ":" + (minutes === 0 ? '00' : minutes) + " " + period);
   }
 
   return timeOptions;
 };
+var getDuration = function getDuration(timeOption, startTime) {
+  var start = new Date("Janurary 1 2023 " + startTime).getTime();
+  var end = new Date("Janurary 1 2023 " + timeOption).getTime();
+  var diffInMinutes = Math.round((end - start) / 60000);
+
+  if (diffInMinutes < 0) {
+    diffInMinutes = diffInMinutes + 1440;
+  }
+
+  if (diffInMinutes < 60) {
+    return "(" + diffInMinutes + " min" + (diffInMinutes === 1 ? '' : 's') + ")";
+  } else if (diffInMinutes >= 60) {
+    return "(" + +(diffInMinutes / 60).toFixed(2) + " hr" + (diffInMinutes === 60 ? '' : 's') + ")";
+  } else {
+    return undefined;
+  }
+};
+
+var formatHours = function formatHours(hours) {
+  if (hours === 0) {
+    return 12;
+  } else if (hours > 12) {
+    return hours - 12;
+  } else {
+    return hours;
+  }
+};
 
 var TimeFieldDropdown = function TimeFieldDropdown(_ref) {
   var trigger = _ref.trigger,
@@ -9106,7 +9154,9 @@ var TimeFieldDropdown = function TimeFieldDropdown(_ref) {
       startTime = _ref.startTime,
       onOptionClick = _ref.onOptionClick,
       inputValue = _ref.inputValue,
-      width = _ref.width;
+      width = _ref.width,
+      _ref$endField = _ref.endField,
+      endField = _ref$endField === void 0 ? false : _ref$endField;
   var startTimeParsed;
 
   if (startTime) {
@@ -9114,7 +9164,7 @@ var TimeFieldDropdown = function TimeFieldDropdown(_ref) {
   }
 
   var timeOptions = useMemo(function () {
-    return getTimeOptions(interval, startTimeParsed);
+    return getTimeOptions(interval, startTimeParsed, endField && !!startTime);
   }, [interval, startTime]);
 
   var _useState = useState(undefined),
@@ -9142,16 +9192,22 @@ var TimeFieldDropdown = function TimeFieldDropdown(_ref) {
       onClick: function onClick() {
         onOptionClick(option);
       }
-    }, option);
+    }, React__default.createElement(Inline, {
+      space: 4
+    }, option, endField && startTime && getDuration(option, startTime)));
   })));
 };
 
-var _excluded$2q = ["interval", "startTime"];
+var _excluded$2q = ["interval", "startTime", "prefix", "endField", "duration"];
 
 var TimeFieldElement = function TimeFieldElement(_ref, forwardedRef) {
   var _ref$interval = _ref.interval,
       interval = _ref$interval === void 0 ? 15 : _ref$interval,
       startTime = _ref.startTime,
+      prefix = _ref.prefix,
+      _ref$endField = _ref.endField,
+      endField = _ref$endField === void 0 ? false : _ref$endField,
+      duration = _ref.duration,
       allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2q);
 
   var internalRef = useRef(null);
@@ -9195,17 +9251,148 @@ var TimeFieldElement = function TimeFieldElement(_ref, forwardedRef) {
       onInputChange: function onInputChange(e) {
         return setSelectedDropdownValue(e);
       },
-      selectedTimeOption: selectedDropdownValue
+      selectedTimeOption: selectedDropdownValue,
+      prefix: prefix,
+      duration: duration
     })),
     startTime: startTime,
     onOptionClick: onOptionClick,
     inputValue: selectedDropdownValue,
-    width: width
+    width: width,
+    endField: endField
   });
 };
 
+var TimeRangeSelector = forwardRef(TimeFieldElement);
 var TimeField = forwardRef(TimeFieldElement);
 
+var styles$U = {"text-field":"_1EJlZ","time-range-field":"_20_Q3","text-field--invalid":"_3vaZG","text-field--prefixed":"_2dh_z","text-field--suffixed":"_2iyg-","time-range-field--invalid":"_22G5J","time-range-field--disabled":"_1bvhh"};
+
+var TimeRangeEnd = function TimeRangeEnd(_ref) {
+  var startTime = _ref.startTime,
+      onChange = _ref.onChange,
+      interval = _ref.interval,
+      _ref$placeholder = _ref.placeholder,
+      placeholder = _ref$placeholder === void 0 ? '2:00 PM' : _ref$placeholder,
+      duration = _ref.duration,
+      disabled = _ref.disabled,
+      testId = _ref.testId;
+  return React__default.createElement(TimeRangeSelector, {
+    name: "end-time",
+    startTime: startTime,
+    onChange: onChange,
+    placeholder: placeholder,
+    interval: interval,
+    prefix: React__default.createElement(IconArrowRight, {
+      size: "medium",
+      color: GREY400
+    }),
+    duration: duration,
+    endField: true,
+    testId: testId && testId + "-end-time",
+    disabled: disabled
+  });
+};
+
+var TimeRangeStart = function TimeRangeStart(_ref) {
+  var startTime = _ref.startTime,
+      onChange = _ref.onChange,
+      interval = _ref.interval,
+      _ref$placeholder = _ref.placeholder,
+      placeholder = _ref$placeholder === void 0 ? '9:00 AM' : _ref$placeholder,
+      id = _ref.id,
+      disabled = _ref.disabled,
+      testId = _ref.testId;
+  return React__default.createElement(TimeRangeSelector, {
+    name: "start-time",
+    startTime: startTime,
+    onChange: onChange,
+    placeholder: placeholder,
+    interval: interval,
+    testId: testId && testId + "-start-time",
+    id: id,
+    disabled: disabled
+  });
+};
+
+var TimeRangeField = function TimeRangeField(_ref) {
+  var _classnames;
+
+  var name = _ref.name,
+      inputId = _ref.id,
+      value = _ref.value,
+      _ref$interval = _ref.interval,
+      interval = _ref$interval === void 0 ? 15 : _ref$interval,
+      startTime = _ref.startTime,
+      onChange = _ref.onChange,
+      onBlur = _ref.onBlur,
+      label = _ref.label,
+      caption = _ref.caption,
+      error = _ref.error,
+      placeholder = _ref.placeholder,
+      disabled = _ref.disabled,
+      testId = _ref.testId;
+  var controllers = useRangeFieldControllers({
+    name: name,
+    id: inputId,
+    value: value,
+    onChange: onChange,
+    onBlur: onBlur,
+    error: error
+  });
+  var hasError = controllers.error;
+  var fieldProps = {
+    name: name,
+    id: controllers.id,
+    label: label,
+    caption: caption,
+    error: controllers.error
+  };
+  var _controllers$value = controllers.value,
+      start = _controllers$value.start,
+      end = _controllers$value.end;
+
+  var onStartChange = function onStartChange(inputValue) {
+    controllers.onChange({
+      start: inputValue === '' ? undefined : inputValue,
+      end: end
+    });
+  };
+
+  var onEndChange = function onEndChange(inputValue) {
+    controllers.onChange({
+      start: start,
+      end: inputValue === '' ? undefined : inputValue
+    });
+  };
+
+  var timeRangeDuration = getDuration(end, start);
+  return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement("div", {
+    className: classnames(styles$U['time-range-field'], (_classnames = {}, _classnames[styles$U['time-range-field--invalid']] = hasError, _classnames[styles$U['time-range-field--disabled']] = disabled, _classnames)),
+    "data-testid": testId
+  }, React__default.createElement(TimeRangeStart, {
+    startTime: startTime,
+    interval: interval,
+    onChange: function onChange(value) {
+      return onStartChange(value);
+    },
+    placeholder: placeholder,
+    testId: testId,
+    id: controllers.id,
+    disabled: disabled
+  }), React__default.createElement(TimeRangeEnd, {
+    startTime: start,
+    interval: interval,
+    onChange: function onChange(value) {
+      return onEndChange(value);
+    },
+    placeholder: placeholder,
+    duration: timeRangeDuration,
+    testId: testId,
+    disabled: disabled
+  })));
+};
+
 var _excluded$2r = ["currencySymbol", "step"];
 
 var CurrencyFieldElement = function CurrencyFieldElement(_ref, ref) {
@@ -9368,7 +9555,7 @@ var BUTTON_THEME = {
   UPSELL: 'upsell'
 };
 
-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 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 ButtonCTA = function ButtonCTA(_ref) {
   var button = _ref.button,
@@ -9391,7 +9578,7 @@ var ButtonCTA = function ButtonCTA(_ref) {
   }, button.props));
 };
 
-var styles$V = {"banner__caption":"_1jqm8"};
+var styles$W = {"banner__caption":"_1jqm8"};
 
 var InlineBannerCTA = function InlineBannerCTA(_ref) {
   var primaryButton = _ref.primaryButton,
@@ -9422,7 +9609,7 @@ var InlineBannerCTA = function InlineBannerCTA(_ref) {
     bannerTheme: bannerTheme,
     primaryCTA: true
   })), caption && multiLine && React__default.createElement("div", {
-    className: styles$V['banner__caption']
+    className: styles$W['banner__caption']
   }, caption));
 };
 
@@ -9469,14 +9656,14 @@ var InlineBanner = function InlineBanner(_ref) {
   var Layout = multiLine ? Stack : Inline;
   return React__default.createElement("div", {
     "data-testid": testId,
-    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)),
+    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)),
     style: positionStyles
   }, React__default.createElement(Inline, {
     alignItems: multiLine ? undefined : 'center',
     flex: ['0 1 auto', 1],
     space: 12
   }, React__default.createElement("div", {
-    className: styles$U['banner__icon']
+    className: styles$V['banner__icon']
   }, React__default.createElement(InlineBannerIcon, {
     theme: theme
   })), React__default.createElement(Layout, {
@@ -9486,9 +9673,9 @@ var InlineBanner = function InlineBanner(_ref) {
     flex: ['min-content'],
     flexWrap: multiLine ? undefined : 'wrap'
   }, title && React__default.createElement("div", {
-    className: styles$U['banner__title']
+    className: styles$V['banner__title']
   }, title), React__default.createElement("div", {
-    className: classnames(styles$U['banner__body'], (_classnames2 = {}, _classnames2[styles$U['banner__body--multilineCTA']] = primaryButton && multiLine, _classnames2))
+    className: classnames(styles$V['banner__body'], (_classnames2 = {}, _classnames2[styles$V['banner__body--multilineCTA']] = primaryButton && multiLine, _classnames2))
   }, children), primaryButton && React__default.createElement(InlineBannerCTA, {
     primaryButton: primaryButton,
     secondaryButton: secondaryButton,
@@ -9496,7 +9683,7 @@ var InlineBanner = function InlineBanner(_ref) {
     multiLine: multiLine,
     bannerTheme: theme
   })), dismissable && React__default.createElement("div", {
-    className: styles$U['banner__close']
+    className: styles$V['banner__close']
   }, React__default.createElement(Button$1, {
     theme: "link-icon",
     type: "button",
@@ -9510,7 +9697,7 @@ var PERSISTENT_BANNER_THEME = {
   DANGER: 'danger'
 };
 
-var styles$W = {"persistent-banner":"_1KO1J","persistent-banner--info":"_2mTN3","persistent-banner--danger":"_1YuCF","persistent-banner--upsell":"_tlNFk"};
+var styles$X = {"persistent-banner":"_1KO1J","persistent-banner--info":"_2mTN3","persistent-banner--danger":"_1YuCF","persistent-banner--upsell":"_tlNFk"};
 
 var PersistentBanner = function PersistentBanner(_ref) {
   var _classNames;
@@ -9539,7 +9726,7 @@ var PersistentBanner = function PersistentBanner(_ref) {
   };
 
   return React__default.createElement("div", {
-    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)),
+    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)),
     "data-testid": testId
   }, onDismiss ? React__default.createElement(Inline, {
     flex: [1],
@@ -9611,7 +9798,7 @@ var useProgress = function useProgress(progress, maxValue, getMetric) {
   };
 };
 
-var styles$X = {"circular-progress":"_1XR7V","circular-progress__label":"_1BygP","circular-progress__track":"_1Ak-z","circular-progress__indicator":"_22YIp"};
+var styles$Y = {"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,
@@ -9626,7 +9813,7 @@ var CircularProgress = function CircularProgress(_ref) {
 
   var determinant = metric.percentage * 2.79;
   return React__default.createElement("div", Object.assign({}, elementProps, {
-    className: styles$X['circular-progress'],
+    className: styles$Y['circular-progress'],
     "data-testid": testId
   }), React__default.createElement("svg", {
     viewBox: "0 0 100 100"
@@ -9635,21 +9822,21 @@ var CircularProgress = function CircularProgress(_ref) {
     cy: 50,
     r: 45,
     strokeWidth: "10px",
-    className: styles$X['circular-progress__track']
+    className: styles$Y['circular-progress__track']
   }), React__default.createElement("circle", {
     cx: 50,
     cy: 50,
     r: 45,
     strokeWidth: "10px",
-    className: styles$X['circular-progress__indicator'],
+    className: styles$Y['circular-progress__indicator'],
     strokeDashoffset: "66",
     strokeDasharray: determinant + " " + (279 - determinant)
   })), React__default.createElement("div", {
-    className: styles$X['circular-progress__label']
+    className: styles$Y['circular-progress__label']
   }, children || metric.progress + "/" + metric.maxValue));
 };
 
-var styles$Y = {"progress-bar":"_3nyZN","progress-bar__indicator":"_11TEp","progress-bar__steps":"_3XFTU"};
+var styles$Z = {"progress-bar":"_3nyZN","progress-bar__indicator":"_11TEp","progress-bar__steps":"_3XFTU"};
 
 var ProgressBar = function ProgressBar(_ref) {
   var progress = _ref.progress,
@@ -9664,15 +9851,15 @@ var ProgressBar = function ProgressBar(_ref) {
       metric = _useProgress.metric;
 
   return React__default.createElement(Stack, null, React__default.createElement("div", Object.assign({}, elementProps, {
-    className: styles$Y['progress-bar'],
+    className: styles$Z['progress-bar'],
     "data-testid": testId
   }), React__default.createElement("div", {
-    className: styles$Y['progress-bar__indicator'],
+    className: styles$Z['progress-bar__indicator'],
     style: {
       width: metric.percentage + "%"
     }
   })), steps && steps.length > 0 && React__default.createElement("div", {
-    className: styles$Y['progress-bar__steps']
+    className: styles$Z['progress-bar__steps']
   }, steps.map(function (step) {
     return React__default.createElement("div", {
       key: step
@@ -9680,7 +9867,7 @@ var ProgressBar = function ProgressBar(_ref) {
   })));
 };
 
-var styles$Z = {"badge":"_2f81N","badge--warning":"_2g1GI","badge--danger":"_2zLnM","badge--success":"_27QOo","badge--info":"_2gmsM"};
+var styles$_ = {"badge":"_2f81N","badge--warning":"_2g1GI","badge--danger":"_2zLnM","badge--success":"_27QOo","badge--info":"_2gmsM"};
 
 var _excluded$2u = ["children", "theme", "title", "testId"];
 
@@ -9704,7 +9891,7 @@ var Badge = function Badge(_ref, forwardedRef) {
     overlay: title,
     ref: ref
   }, React__default.createElement("div", Object.assign({
-    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)),
+    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)),
     ref: ref,
     "data-testid": testId
   }, otherProps), children));
@@ -9712,9 +9899,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$$ = {"avatar-image":"_GKL9P"};
+var styles$10 = {"avatar-image":"_GKL9P"};
 
 var AvatarImage = function AvatarImage(_ref) {
   var url = _ref.url,
@@ -9739,7 +9926,7 @@ var AvatarImage = function AvatarImage(_ref) {
   }
 
   return React__default.createElement("div", {
-    className: styles$$['avatar-image']
+    className: styles$10['avatar-image']
   }, React__default.createElement(IconUserSolid, {
     size: "flexible",
     color: color
@@ -9808,7 +9995,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
     },
@@ -9821,7 +10008,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));
 };
 
@@ -9834,7 +10021,7 @@ var CHIP_THEME = {
   DANGER: 'danger'
 };
 
-var styles$10 = {"chip":"_1fIeV","chip--marketing":"_V4byU","chip--success":"_37gN9","chip--upsell":"_Tw7tp","chip--warning":"_t94VZ","chip--info":"_3SmeO","chip--danger":"_2eoX0"};
+var styles$11 = {"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;
@@ -9845,11 +10032,11 @@ var Chip = function Chip(_ref) {
       testId = _ref.testId;
   return React__default.createElement("div", {
     "data-testid": testId,
-    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))
+    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))
   }, children);
 };
 
-var styles$11 = {"pill":"_23q4Y","pill--default":"_niDEM","pill--success":"_IwDRB","pill--danger":"_MPji-","pill--warning":"_3S2m8","pill--info":"_2G3ML"};
+var styles$12 = {"pill":"_23q4Y","pill--default":"_niDEM","pill--success":"_IwDRB","pill--danger":"_MPji-","pill--warning":"_3S2m8","pill--info":"_2G3ML"};
 
 var PILL_THEME = {
   INFO: 'info',
@@ -9868,7 +10055,7 @@ var Pill = function Pill(_ref) {
       testId = _ref.testId;
   return React__default.createElement("div", {
     "data-testid": testId,
-    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))
+    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))
   }, children);
 };
 
@@ -9878,9 +10065,9 @@ var EMPTY_STATE_SIZE = {
   LARGE: 'large'
 };
 
-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$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$13 = {"empty-state-container-cta":"_1Cx9N","empty-state-container-cta--inside-modal":"_WbcaM"};
+var styles$14 = {"empty-state-container-cta":"_1Cx9N","empty-state-container-cta--inside-modal":"_WbcaM"};
 
 var EmptyStateContainerCTA = function EmptyStateContainerCTA(_ref) {
   var _actions$primary, _actions$secondary, _classNames;
@@ -9898,7 +10085,7 @@ var EmptyStateContainerCTA = function EmptyStateContainerCTA(_ref) {
     size: BUTTON_SIZES.MIN_WIDTH_100
   });
   return React__default.createElement("div", {
-    className: classnames(styles$13['empty-state-container-cta'], (_classNames = {}, _classNames[styles$13['empty-state-container-cta--inside-modal']] = isInsideModal, _classNames))
+    className: classnames(styles$14['empty-state-container-cta'], (_classNames = {}, _classNames[styles$14['empty-state-container-cta--inside-modal']] = isInsideModal, _classNames))
   }, primaryButton, secondaryButton);
 };
 
@@ -9913,7 +10100,7 @@ var EmptyStateContainerStack = function EmptyStateContainerStack(_ref) {
       isPaywall = _ref$isPaywall === void 0 ? false : _ref$isPaywall,
       testId = _ref.testId;
   return React__default.createElement("div", {
-    className: styles$12['empty-state-container-stack'],
+    className: styles$13['empty-state-container-stack'],
     "data-testid": testId
   }, React__default.createElement("img", {
     src: mediaUrl,
@@ -9929,7 +10116,7 @@ var EmptyStateContainerStack = function EmptyStateContainerStack(_ref) {
     emphasis: "bold",
     as: "body"
   }, title), React__default.createElement("div", {
-    className: styles$12['empty-state-container-stack__body']
+    className: styles$13['empty-state-container-stack__body']
   }, children)), React__default.createElement(Stack, {
     space: 8,
     alignItems: "center"
@@ -9941,7 +10128,7 @@ var EmptyStateContainerStack = function EmptyStateContainerStack(_ref) {
   }, caption)));
 };
 
-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 styles$15 = {"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, _classnames;
@@ -9962,10 +10149,10 @@ var EmptyStateContainerInline = function EmptyStateContainerInline(_ref) {
       isInsideModal = _useModalContext.isModalMounted;
 
   return React__default.createElement("div", {
-    className: classnames(styles$14['empty-state-container-inline'], (_classNames = {}, _classNames[styles$14['empty-state-container-inline--inside-modal']] = isInsideModal, _classNames)),
+    className: classnames(styles$15['empty-state-container-inline'], (_classNames = {}, _classNames[styles$15['empty-state-container-inline--inside-modal']] = isInsideModal, _classNames)),
     "data-testid": testId
   }, React__default.createElement("div", {
-    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))
+    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))
   }, React__default.createElement(Stack, {
     space: 8
   }, header && React__default.createElement(Text, {
@@ -9974,7 +10161,7 @@ var EmptyStateContainerInline = function EmptyStateContainerInline(_ref) {
   }, header), React__default.createElement(Text, {
     as: "h1"
   }, title)), React__default.createElement("div", {
-    className: styles$14['empty-state-container-inline__body']
+    className: styles$15['empty-state-container-inline__body']
   }, children), React__default.createElement(Stack, {
     space: 8,
     marginTop: 12
@@ -9985,7 +10172,7 @@ var EmptyStateContainerInline = function EmptyStateContainerInline(_ref) {
   }), caption && React__default.createElement(Text, {
     as: "caption"
   }, caption))), React__default.createElement("div", {
-    className: styles$14['empty-state-container-inline__image']
+    className: styles$15['empty-state-container-inline__image']
   }, React__default.createElement("img", {
     src: mediaUrl,
     alt: String(title),
@@ -10059,5 +10246,5 @@ var EmptyState = function EmptyState(_ref) {
   }, children);
 };
 
-export { AsyncSelectField, Avatar, Badge$1 as Badge, Bold, BreadcrumbItem, Breadcrumbs, Button$1 as Button, Calendar, Card, CheckboxField, Chip, CircularProgress, CurrencyField, DataTable, DataTableCell, DataTableEditableCell, DataTableRow, DateField, DateFilter, DateRangeField, Dropdown, DropdownList, DropdownListDivider, DropdownListItem, EmptyState, Form, FormFeedback, FormFooter, FormRow, FormSection, IconAnalytics, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowToTop, IconArrowTurnDownRight, IconArrowUp, IconAward, IconAwful, IconAwfulMonochromatic, IconBad, IconBadMonochromatic, IconBalanceScale, IconBalanceScaleLeft, IconBan, IconBarsH, IconBarsV, IconBell, IconBirthdayCake, IconBold, IconBolt, IconBook, IconBriefcase, IconBullseyeArrow, IconCalculator, IconCalendar, IconCalendarAlt, IconCalendarCheck, IconCalendarDay, IconCalendarExclamation, IconCalendarStar, IconCalendarTomorrow, IconCamera, IconCameraSlash, IconCashRegister, IconChartBar, IconCheck, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconClipboardList, IconClock, IconCog, IconComment, IconCommentLines, IconCopy, IconCreditCard, IconCreditCardPlus, IconDecent, IconDecentMonochromatic, IconDownload, IconEdit, IconEllipsisV, IconEnvelope, IconExclaimation, IconExclaimationTriangle, IconExpand, IconExternalLink, IconEye, IconEyeSlash, IconFile, IconFilePdf, IconFlag, IconFourDotsCircle, IconFourSquares, IconGavel, IconGif, IconGift, IconGood, IconGoodMonochromatic, IconGreat, IconGreatMonochromatic, IconGrinBeam, IconGripVertical, IconHandshake, IconImage, IconInfoCircle, IconIslandTropical, IconItalic, IconLaptopSearch, IconLink, IconList, IconListOI as IconListOi, IconLock, IconMagicSolid, IconMapMarker, IconMegaphone, IconMessages, IconMinus, IconMinusCircle, IconMoneyBill, IconMugSaucerSolid, IconNotesMedical, IconOvertime, IconPaperPlane, IconPaperPlaneClock, IconPaperclip, IconPencil, IconPercentage, IconPhone, IconPlug, IconPlus, IconPrint, IconQuestionCircle, IconRepeat, IconReply, IconSearch, IconSignOut, IconSitemap, IconSlidersH, IconSort, IconStar, IconStarSolid, IconStickyNoteLines, IconStopwatch, IconStrikethrough, IconSync, IconSyncExclaimation, IconTable, IconTachometer, IconTimes, IconTimesOctagon, IconTrash, IconUnderline, IconUndo, IconUniversity, IconUserComputer, IconUserFriends, IconUserLight, IconUserPlus, IconUserSearch, IconUserSlash, IconUserSolid, IconUserTag, IconUserTie, IconUsers, IconVideo, IconVolume, IconVolumeMute, IconWrench, Inline, InlineBanner, Italic, Link, Modal, ModalBody, ModalFooter, MultiSelectField, Page, PaginationControls, PasswordField, Paywall, PercentageField, PersistentBanner, Pill, PillSelectField, ProgressBar, RadioGroupBoxOption, RadioGroupField, RadioGroupOption, SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PERCENT, SIZE_75_PERCENT, SegmentedControl, SelectField, SousChefProvider, Spinner, Stack, Text, TextAreaField, TextField, TimeField, Toggle, ToolbarSelect, Tooltip$1 as Tooltip, Underline, WeekField, toast };
+export { AsyncSelectField, Avatar, Badge$1 as Badge, Bold, BreadcrumbItem, Breadcrumbs, Button$1 as Button, Calendar, Card, CheckboxField, Chip, CircularProgress, CurrencyField, DataTable, DataTableCell, DataTableEditableCell, DataTableRow, DateField, DateFilter, DateRangeField, Dropdown, DropdownList, DropdownListDivider, DropdownListItem, EmptyState, Form, FormFeedback, FormFooter, FormRow, FormSection, IconAnalytics, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowToTop, IconArrowTurnDownRight, IconArrowUp, IconAward, IconAwful, IconAwfulMonochromatic, IconBad, IconBadMonochromatic, IconBalanceScale, IconBalanceScaleLeft, IconBan, IconBarsH, IconBarsV, IconBell, IconBirthdayCake, IconBold, IconBolt, IconBook, IconBriefcase, IconBullseyeArrow, IconCalculator, IconCalendar, IconCalendarAlt, IconCalendarCheck, IconCalendarDay, IconCalendarExclamation, IconCalendarStar, IconCalendarTomorrow, IconCamera, IconCameraSlash, IconCashRegister, IconChartBar, IconCheck, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconClipboardList, IconClock, IconCog, IconComment, IconCommentLines, IconCopy, IconCreditCard, IconCreditCardPlus, IconDecent, IconDecentMonochromatic, IconDownload, IconEdit, IconEllipsisV, IconEnvelope, IconExclaimation, IconExclaimationTriangle, IconExpand, IconExternalLink, IconEye, IconEyeSlash, IconFile, IconFilePdf, IconFlag, IconFourDotsCircle, IconFourSquares, IconGavel, IconGif, IconGift, IconGood, IconGoodMonochromatic, IconGreat, IconGreatMonochromatic, IconGrinBeam, IconGripVertical, IconHandshake, IconImage, IconInfoCircle, IconIslandTropical, IconItalic, IconLaptopSearch, IconLink, IconList, IconListOI as IconListOi, IconLock, IconMagicSolid, IconMapMarker, IconMegaphone, IconMessages, IconMinus, IconMinusCircle, IconMoneyBill, IconMugSaucerSolid, IconNotesMedical, IconOvertime, IconPaperPlane, IconPaperPlaneClock, IconPaperclip, IconPencil, IconPercentage, IconPhone, IconPlug, IconPlus, IconPrint, IconQuestionCircle, IconRepeat, IconReply, IconSearch, IconSignOut, IconSitemap, IconSlidersH, IconSort, IconStar, IconStarSolid, IconStickyNoteLines, IconStopwatch, IconStrikethrough, IconSync, IconSyncExclaimation, IconTable, IconTachometer, IconTimes, IconTimesOctagon, IconTrash, IconUnderline, IconUndo, IconUniversity, IconUserComputer, IconUserFriends, IconUserLight, IconUserPlus, IconUserSearch, IconUserSlash, IconUserSolid, IconUserTag, IconUserTie, IconUsers, IconVideo, IconVolume, IconVolumeMute, IconWrench, Inline, InlineBanner, Italic, Link, Modal, ModalBody, ModalFooter, MultiSelectField, Page, PaginationControls, PasswordField, Paywall, PercentageField, PersistentBanner, Pill, PillSelectField, ProgressBar, RadioGroupBoxOption, RadioGroupField, RadioGroupOption, SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PERCENT, SIZE_75_PERCENT, SegmentedControl, SelectField, SousChefProvider, Spinner, Stack, Text, TextAreaField, TextField, TimeField, TimeRangeField, Toggle, ToolbarSelect, Tooltip$1 as Tooltip, Underline, WeekField, toast };
 //# sourceMappingURL=index.modern.js.map