@jobber/components 4.1.3-pre.14 → 4.1.3

package/dist/InputTime/index.js

@@ -2,723 +2,883 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-5b8768b7.js');
+var tslib_es6 = require('../tslib.es6-efe27175.js');
 var React = require('react');
 var debounce = require('lodash/debounce');
 var temporal = require('@std-proposal/temporal');
-var FormField = require('../FormField-aff52a1d.js');
+var FormField = require('../FormField-79a0a375.js');
 require('uuid');
 require('react-hook-form');
-require('../style-inject.es-9d2f5f4e.js');
+require('../style-inject.es-dcee06b6.js');
 require('classnames');
-require('../Button-186ef2c1.js');
+require('../Button-16e043ec.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Typography-dd9717e7.js');
-require('../Text-4c04ddc3.js');
-require('../InputValidation-e09f5d20.js');
+require('../Typography-9262511f.js');
+require('../Text-7ce00adb.js');
+require('../InputValidation-97dd0dcf.js');
 require('framer-motion');
-require('../Spinner-35cee923.js');
+require('../Spinner-ae4c8a85.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 
-// https://stackoverflow.com/a/10199306/1611058
-function get_time_support() {
-  var input = document.createElement('input');
-  input.setAttribute('type', 'time');
-  var notValid = 'not-a-time';
-  input.setAttribute('value', notValid);
-  return input.value !== notValid;
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
 
-var timeSupport = get_time_support();
-if (window) window.supportsTime = timeSupport;
+var supportsTime$2 = {exports: {}};
 
-var supportsTime = timeSupport;
+var supportsTime$1 = {exports: {}};
 
-function leading_zero(number) {
-  if (isNaN(number)) return number;
-  var purified = parseInt(number);
-  return purified < 10 ? '0' + purified : number;
-}
-
-function convert_to_24hr_time(timeString_12hr) {
-  if (/-/.test(timeString_12hr)) return '';
-  var isPM = timeString_12hr.indexOf('PM') > -1;
-  var timeResult = /^([0-9]{2})/.exec(timeString_12hr);
-  var hrs = timeResult ? parseInt(timeResult[1]) : '';
-  var newHrs;
-
-  if (hrs === 12) {
-    newHrs = isPM ? 12 : 0;
-  } else {
-    newHrs = isPM ? hrs + 12 : hrs;
-  }
-
-  var finalHrs = newHrs === 24 ? 0 : newHrs;
-  var timeRegEx = /^[0-9]{2}:([0-9]{2}) (AM|PM)/;
-  return timeString_12hr.replace(timeRegEx, leading_zero(finalHrs) + ':$1');
-}
-
-function set_data_attribute($input, timeString_12hr) {
-  var filteredString = timeString_12hr.indexOf('-') > -1 ? '' : timeString_12hr;
-  var time24hr = convert_to_24hr_time(filteredString);
-  $input.setAttribute('data-value', time24hr);
-}
-
-function create_event(eventName) {
-  var event = document.createEvent('Event');
-  event.initEvent(eventName, true, true);
-  return event;
-}
-
-var inputEvent = create_event('input');
-var changeEvent = create_event('change');
-function trigger_event($input, eventName) {
-  var event = {
-    input: inputEvent,
-    change: changeEvent
-  }[eventName];
-
-  if (can_trigger_change($input)) {
-    $input.dispatchEvent(event);
-  }
-} // Browsers only send out input and change events if the time element has a full valid value
-
-function can_trigger_change($input) {
-  return !/--/.test($input.value);
-}
-
-function trigger_both_events($input) {
-  // the event only ever fires if there is a full valid value available
-  trigger_event($input, 'input');
-  trigger_event($input, 'change');
-}
-
-// I need to keep this separate from reset so that
-// I can reset without attracting focus
-function apply_default($input) {
-  $input.value = '--:-- --';
-  set_data_attribute($input, '');
-  trigger_both_events($input);
-}
-
-function convert_number(number) {
-  return isNaN(number) ? number : parseInt(number);
-}
-
-function convert_hours_to_12hr_time(hours) {
-  return hours <= 12 ? hours === 0 ? 12 : hours : hours - 12;
-}
-
-function convert_to_12hr_time(timeString_24hr) {
-  if (timeString_24hr === '') return '--:-- --';
-  var twentyFour_regex = /([0-9]{2})\:([0-9]{2})/;
-  var result = twentyFour_regex.exec(timeString_24hr);
-  var hrs_24 = convert_number(result[1]);
-  var min = result[2];
-  var hrs_12 = convert_hours_to_12hr_time(hrs_24);
-  var isPM = hrs_24 >= 12;
-  var mode = isPM ? 'PM' : 'AM';
-  return [leading_zero(hrs_12), ':', min, ' ', mode].join('');
-}
-
-function set_time($input, time_string_24hr) {
-  var twelveHr = convert_to_12hr_time(time_string_24hr);
-  $input.value = twelveHr;
-  set_data_attribute($input, time_string_24hr);
-}
-
-function update_time($input) {
-  set_time($input, $input.value);
-  return $input;
-}
-
-// IE11 doesn't support Object.values()
-function values(obj) {
-  var key_values = [];
-
-  for (var key in obj) {
-    key_values.push(obj[key]);
-  }
-
-  return key_values;
-}
-
-function select_segment($input, segment) {
-  set_input_type();
-  var actions = {
-    hrs: select(0, 2),
-    min: select(3, 5),
-    mode: select(6, 8)
-  };
-  actions[segment]($input);
-
-  function set_input_type() {
-    var type = segment === 'mode' ? 'text' : 'tel';
-    $input.setAttribute('type', type);
-  }
-
-  function select(start, end) {
-    return function () {
-      $input.setSelectionRange(start, end);
-    };
-  }
-}
+(function (module) {
+	// https://stackoverflow.com/a/10199306/1611058
+	function get_time_support () {
+		var input = document.createElement('input');
+		input.setAttribute('type','time');
+
+		var notValid = 'not-a-time';
+		input.setAttribute('value', notValid);
+
+		return (input.value !== notValid);
+	}
+
+	var timeSupport = get_time_support();
+
+	if (window) window.supportsTime = timeSupport;
+	if (module) module.exports = timeSupport;
+} (supportsTime$1));
 
-var ranges = {
-  hrs: {
-    start: 0,
-    end: 2
-  },
-  min: {
-    start: 3,
-    end: 5
-  },
-  mode: {
-    start: 6,
-    end: 8
-  }
-};
-
-function get_selected_range($input) {
-  return {
-    start: $input.selectionStart,
-    end: $input.selectionEnd
-  };
-}
-
-function get_current_segment($input) {
-  var selection = get_selected_range($input);
-
-  for (var segment in ranges) {
-    var range = ranges[segment];
-    var aboveMin = range.start <= selection.start;
-    var belowMax = range.end >= selection.end;
-
-    if (aboveMin && belowMax) {
-      return segment;
-    }
-  }
+(function (module) {
+	module.exports = supportsTime$1.exports;
+} (supportsTime$2));
 
-  return 'hrs';
-}
-
-var manual_entry_log = [];
+var supportsTime = /*@__PURE__*/getDefaultExportFromCjs(supportsTime$2.exports);
 
-function clear() {
-  manual_entry_log = [];
-}
-
-function add(entry) {
-  manual_entry_log.push(entry);
-}
+var timeInputPolyfill = {exports: {}};
 
-function items() {
-  return manual_entry_log;
-}
-
-var manual_entry_log$1 = {
-  items: items,
-  clear: clear,
-  add: add
+var leading_zero$4 = function leading_zero (number) {
+	if (isNaN(number)) return number;
+	var purified = parseInt(number);
+	return purified < 10 ? '0' + purified : number;
 };
 
-var segments = Object.keys(ranges);
-
-function get_values($input, timeString) {
-  var value = timeString ? timeString : $input.value;
-  var regEx = /([0-9-]{1,2})\:([0-9-]{1,2})\s?(AM|PM|\-\-)?/;
-  var result = regEx.exec(value);
-  return {
-    hrs: convert_number(result[1]),
-    min: convert_number(result[2]),
-    mode: result[3]
-  };
-}
-
-function update_a11y($input, announcementArray) {
-  // Timeout helps ensure that the input has stabilized
-  setTimeout(function () {
-    var current_segment = get_current_segment($input);
-    var values = get_values($input);
-    var value = values[current_segment];
-    var finalValue = value == '--' ? 'blank' : value;
-    var segmentName = {
-      hrs: 'Hours',
-      min: 'Minutes',
-      mode: 'AM/PM'
-    }[current_segment];
-    var announcements = {
-      initial: '$label grouping $fullValue.',
-      select: '$segmentName spin button $segmentValue.',
-      update: '$segmentValue.'
-    };
-    var textArray = announcementArray.map(function (providedString) {
-      if (announcements[providedString]) {
-        return announcements[providedString];
-      }
-
-      return providedString;
-    });
-    var fullValue = $input.value.replace(/--/g, 'blank');
-    var html = '<p>' + textArray.join('</p><p>') + '</p>';
-    html = html.replace(/\$label/g, $input.polyfill.label);
-    html = html.replace(/\$segmentName/g, segmentName);
-    html = html.replace(/\$segmentValue/g, finalValue);
-    html = html.replace(/\$fullValue/g, fullValue);
-    $input.polyfill.$a11y.innerHTML = html;
-  }, 1);
-}
-
-function traverse($input, direction) {
-  var segment = get_current_segment($input);
-  var modifier = direction === 'next' ? 1 : -1;
-  var next_segment_index = segments.indexOf(segment) + modifier;
-  var next_segment = {
-    next: segments[next_segment_index] || 'mode',
-    prev: next_segment_index < 0 ? 'hrs' : segments[next_segment_index]
-  }[direction];
-  select_segment($input, next_segment);
-  manual_entry_log$1.clear();
-  update_a11y($input, ['select']);
-}
-
-function next_segment($input) {
-  traverse($input, 'next');
-}
-
-function prev_segment($input) {
-  traverse($input, 'prev');
-}
-
-function select_cursor_segment($input) {
-  var current_segment = get_current_segment($input);
-  select_segment($input, current_segment);
-}
-
-function reset($input) {
-  apply_default($input);
-  select_segment($input, 'hrs');
-}
-
-function set_segment($input, segment, value) {
-  var values = get_values($input);
-  values[segment] = value;
-  var newInputVal = [leading_zero(values.hrs), ':', leading_zero(values.min), ' ', values.mode].join('');
-  $input.value = newInputVal;
-  select_segment($input, segment);
-  set_data_attribute($input, newInputVal);
-  trigger_both_events($input);
-}
-
-/*eslint indent: 0 */
-// prettier-ignore
-var all_number_keys = [// 0,  1,  2,  3,  4,  5,  6,  7,  8,  9
-48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105];
-
-var sorted_number_keys = {}; // sorted_number_keys = { 48: 0, 49: 1, 96: 0, 97: 1, ... };
-
-all_number_keys.forEach(function (key, index) {
-  var number_val = index > 9 ? index - 10 : index;
-  sorted_number_keys[key] = number_val;
-});
-
-function manual_number_entry($input, key) {
-  var key_value = sorted_number_keys[key];
-  var segment = get_current_segment($input);
-
-  if (segment !== 'mode') {
-    var entry_count = manual_entry_log$1.items().length;
-    var upper_limits = {
-      hrs: [1, 2],
-      min: [5, 9]
-    };
-    var limit = upper_limits[segment][entry_count];
-
-    if (entry_count < 2) {
-      manual_entry_log$1.add(key_value);
-    }
-
-    var full_limit = parseInt(upper_limits[segment].join(''));
-    var full_entry = parseInt(manual_entry_log$1.items().join(''));
-
-    if (full_limit >= full_entry) {
-      set_segment($input, segment, full_entry);
-    }
-
-    var at_limit = key_value > limit || manual_entry_log$1.items().length === 2;
-
-    if (at_limit) {
-      next_segment($input);
-    }
-  }
-}
-
-function clear_segment($input, segment) {
-  set_segment($input, segment, '--');
-  update_a11y($input, ['update']);
-}
-
-function switch_mode($input, default_mode) {
-  default_mode = default_mode || 'AM';
-  var current_mode = get_values($input).mode;
-  var new_mode = {
-    '--': default_mode,
-    AM: 'PM',
-    PM: 'AM'
-  }[current_mode];
-  set_segment($input, 'mode', new_mode);
-}
-
-function nudge_time_segment($input, segment, direction) {
-  var current_values = get_values($input);
-  var time;
-  var modifier = direction === 'up' ? 1 : -1;
-
-  if (current_values[segment] === '--') {
-    var current_time = new Date();
-    time = {
-      hrs: convert_hours_to_12hr_time(current_time.getHours()),
-      min: current_time.getMinutes()
-    };
-  } else {
-    var minutes = {
-      up: current_values.min < 59 ? current_values.min + modifier : 0,
-      down: current_values.min === 0 ? 59 : current_values.min + modifier
-    };
-    time = {
-      hrs: convert_hours_to_12hr_time(current_values.hrs + modifier),
-      min: minutes[direction]
-    };
-  }
-
-  set_segment($input, segment, leading_zero(time[segment]));
-}
-
-function increment($input, segment) {
-  if (segment === 'mode') {
-    switch_mode($input, 'AM');
-  } else {
-    nudge_time_segment($input, segment, 'up');
-  }
-
-  update_a11y($input, ['update']);
-}
-
-function increment_current_segment($input) {
-  var current_segment = get_current_segment($input);
-  increment($input, current_segment);
-}
-
-function decrement($input, segment) {
-  if (segment === 'mode') {
-    switch_mode($input, 'PM');
-  } else {
-    nudge_time_segment($input, segment, 'down');
-  }
-
-  update_a11y($input, ['update']);
-}
-
-function decrement_current_segment($input) {
-  var current_segment = get_current_segment($input);
-  decrement($input, current_segment);
-}
-
-function set_mode($input, type) {
-  var segment = get_current_segment($input);
-
-  if (segment === 'mode') {
-    set_segment($input, segment, type);
-  }
-}
-
-var switch_to_data_value = function ($input) {
-  var replacementVal = $input.dataset.value;
-  $input.value = replacementVal;
+var leading_zero$3 = leading_zero$4;
+
+var convert_to_24hr_time$1 = function convert_to_24hr_time (timeString_12hr) {
+	if (/-/.test(timeString_12hr)) return '';
+	var isPM = timeString_12hr.indexOf('PM') > -1;
+	var timeResult = /^([0-9]{2})/.exec(timeString_12hr);
+	var hrs = timeResult ? parseInt(timeResult[1]) : '';
+	var newHrs;
+	if (hrs === 12) {
+		newHrs = isPM ? 12 : 0;
+	} else {
+		newHrs = isPM ? hrs + 12 : hrs;
+	}
+	var finalHrs = newHrs === 24 ? 0 : newHrs;
+	var timeRegEx = /^[0-9]{2}:([0-9]{2}) (AM|PM)/;
+	return timeString_12hr.replace(timeRegEx, leading_zero$3(finalHrs)+':$1');
 };
 
-function switch_times($input, format) {
-  var is12hr = /\s/.test($input.value);
-
-  if (format != 12 && format != 24) {
-    format = is12hr ? 24 : 12;
-  }
-
-  var actions = {
-    12: function _() {
-      if (!is12hr) {
-        set_time($input, $input.dataset.value);
-      }
-    },
-    24: function _() {
-      if (is12hr) {
-        switch_to_data_value($input);
-      }
-    }
-  };
-  actions[format]();
-}
+var convert_to_24hr_time = convert_to_24hr_time$1;
+
+var set_data_attribute$3 = function set_data_attribute($input, timeString_12hr){
+	var filteredString = timeString_12hr.indexOf('-') > -1 ? '' : timeString_12hr;
+	var time24hr = convert_to_24hr_time(filteredString);
+	$input.setAttribute('data-value', time24hr);
+};
 
-function handle_tab($input, e) {
-  var current_segment = get_current_segment($input);
-  var backwards_and_first = e.shiftKey && current_segment === 'hrs';
-  var forwards_and_last = !e.shiftKey && current_segment === 'mode';
+var create_event$1 = function create_event(eventName){
+	var event = document.createEvent('Event');
+	event.initEvent(eventName, true, true);
+	return event;
+};
 
-  if (!backwards_and_first && !forwards_and_last) {
-    e.preventDefault();
+var create_event = create_event$1;
+
+var inputEvent = create_event('input');
+var changeEvent = create_event('change');
+
+var trigger_event$1 = function trigger_event($input, eventName) {
+	var event = {
+		input: inputEvent,
+		change: changeEvent,
+	}[eventName];
+
+	if (can_trigger_change($input)) {
+		$input.dispatchEvent(event);
+	}
+};
+
+// Browsers only send out input and change events if the time element has a full valid value
+function can_trigger_change ($input) {
+	return !/--/.test($input.value);
+}
+
+var trigger_event = trigger_event$1;
+
+// It seems that oninput and onchange are treated the same way by browsers :/
+var trigger_both_events$2 = function trigger_both_events($input) {
+	// the event only ever fires if there is a full valid value available
+	trigger_event($input, 'input');
+	trigger_event($input,'change');
+};
 
-    if (e.shiftKey) {
-      prev_segment($input);
-    } else {
-      next_segment($input);
-    }
-  }
-}
+// I need to keep this separate from reset so that
+// I can reset without attracting focus
+
+var set_data_attribute$2 = set_data_attribute$3;
+var trigger_both_events$1 = trigger_both_events$2;
+
+var apply_default$1 = function apply_default ($input) {
+	$input.value = '--:-- --';
+	set_data_attribute$2($input, '');
+	trigger_both_events$1($input);
+};
 
-var named_keys = {
-  ArrowDown: 40,
-  ArrowRight: 39,
-  ArrowUp: 38,
-  ArrowLeft: 37,
-  Backspace: 8,
-  Delete: 46,
-  Tab: 9,
-  Shift: 16,
-  Escape: 27,
-  a: 65,
-  p: 80
-};
-
-function bind_events($input) {
-  var shiftKey = false;
-  document.addEventListener('keydown', function (e) {
-    shiftKey = e.shiftKey;
-  });
-  document.addEventListener('keyup', function (e) {
-    shiftKey = e.shiftKey;
-  });
-
-  if ($input.form) {
-    $input.form.addEventListener('submit', function () {
-      auto_swap($input);
-    });
-  }
-
-  var focused_via_click = false;
-  $input.addEventListener('mousedown', function () {
-    focused_via_click = true;
-  }); // Turns the IE clear button into a reset button
-
-  $input.addEventListener('mouseup', function () {
-    setTimeout(function () {
-      if ($input.value === '') reset($input);
-    }, 1);
-  });
-  $input.addEventListener('click', function (e) {
-    select_cursor_segment($input);
-  });
-  $input.addEventListener('blur', function () {
-    focused_via_click = false;
-  });
-  $input.addEventListener('focus', function (e) {
-    if (!focused_via_click) {
-      e.preventDefault();
-      var segment = shiftKey ? 'mode' : 'hrs';
-      select_segment($input, segment);
-    }
+var convert_number$2 = function convert_number (number) {
+	return isNaN(number) ? number : parseInt(number);
+};
 
-    update_a11y($input, ['initial', 'select']);
-  });
-  $input.addEventListener('keydown', function (e) {
-    var is_enter_key = e.which === 13;
-    if (is_enter_key) return true;
-    var is_number_key = all_number_keys.indexOf(e.which) > -1;
-    var is_named_key = values(named_keys).indexOf(e.which) > -1;
-    var is_arrow_key = [named_keys.ArrowDown, named_keys.ArrowRight, named_keys.ArrowUp, named_keys.ArrowLeft].indexOf(e.which) > -1;
-    var is_mode_key = [named_keys.a, named_keys.p].indexOf(e.which) > -1;
-    var is_delete_key = [named_keys.Delete, named_keys.Backspace].indexOf(e.which) > -1;
-
-    if (!is_named_key || is_arrow_key || is_number_key || is_mode_key || is_delete_key) {
-      e.preventDefault();
-    }
+var convert_hours_to_12hr_time$2 = function convert_hours_to_12hr_time (hours) {
+	return hours <= 12 ? hours === 0 ? 12 : hours : hours - 12;
+};
 
-    if (is_number_key) {
-      manual_number_entry($input, e.which);
-    }
+var convert_number$1 = convert_number$2;
+var convert_hours_to_12hr_time$1 = convert_hours_to_12hr_time$2;
+var leading_zero$2 = leading_zero$4;
+
+var convert_to_12hr_time$1 = function convert_to_12hr_time (timeString_24hr) {
+	if (timeString_24hr === '') return '--:-- --';
+	var twentyFour_regex = /([0-9]{2})\:([0-9]{2})/;
+	var result = twentyFour_regex.exec(timeString_24hr);
+	var hrs_24 = convert_number$1(result[1]);
+	var min = result[2];
+	var hrs_12 = convert_hours_to_12hr_time$1(hrs_24);
+	var isPM = hrs_24 > 12;
+	var mode = isPM ? 'PM' : 'AM';
+	return [leading_zero$2(hrs_12), ':', min, ' ', mode].join('');
+};
 
-    if (is_delete_key) {
-      var segment = get_current_segment($input);
-      clear_segment($input, segment);
-    }
+var convert_to_12hr_time = convert_to_12hr_time$1;
+var set_data_attribute$1 = set_data_attribute$3;
+
+var set_time$2 = function set_time($input, time_string_24hr) {
+	var twelveHr = convert_to_12hr_time(time_string_24hr);
+	$input.value = twelveHr;
+	set_data_attribute$1($input, time_string_24hr);
+};
 
-    switch (e.which) {
-      case named_keys.ArrowRight:
-        next_segment($input);
-        break;
+var set_time$1 = set_time$2;
+
+var update_time = function update_time($input) {
+	set_time$1($input, $input.value);
+	return $input;
+};
 
-      case named_keys.ArrowLeft:
-        prev_segment($input);
-        break;
+// IE11 doesn't support Object.values()
+var values$1 = function values (obj) {
+	var key_values = [];
+	for (var key in obj) {
+		key_values.push(obj[key]);
+	}
+	return key_values;
+};
 
-      case named_keys.ArrowUp:
-        increment_current_segment($input);
-        break;
+var select_segment$5 = function select_segment ($input, segment) {
+
+	set_input_type();
+
+	var actions = {
+		hrs:  select(0, 2),
+		min:  select(3, 5),
+		mode: select(6, 8),
+	};
+
+	actions[segment]($input);
+
+	function set_input_type() {
+		var type = segment === 'mode' ? 'text' : 'tel';
+		$input.setAttribute('type', type);
+	}
+
+	function select (start, end) {
+		return function () {
+			$input.setSelectionRange(start, end);
+		}
+	}
+};
 
-      case named_keys.ArrowDown:
-        decrement_current_segment($input);
-        break;
+var ranges$2 = {
+	hrs : { start: 0, end: 2 },
+	min : { start: 3, end: 5 },
+	mode : { start: 6, end: 8 },
+};
+
+var ranges_1 = ranges$2;
 
-      case named_keys.Escape:
-        reset($input);
-        break;
+var get_selected_range$1 = function get_selected_range ($input) {
+	return { start: $input.selectionStart, end: $input.selectionEnd };
+};
 
-      case named_keys.a:
-        set_mode($input, 'AM');
-        break;
+var ranges$1 = ranges_1;
+var get_selected_range = get_selected_range$1;
+
+var get_current_segment$9 = function get_current_segment ($input) {
+	var selection = get_selected_range($input);
+	for (var segment in ranges$1) {
+		var range = ranges$1[segment];
+		var aboveMin = range.start <= selection.start;
+		var belowMax = range.end >= selection.end;
+		if (aboveMin && belowMax) {
+			return segment;
+		}
+	}
+	return 'hrs';
+};
 
-      case named_keys.p:
-        set_mode($input, 'PM');
-        break;
+var manual_entry_log$2 = [];
+
+function clear () {
+	manual_entry_log$2 = [];
+}
+
+function add (entry) {
+	manual_entry_log$2.push(entry);
+}
+
+function items(){
+	return manual_entry_log$2;
+}
+
+var manual_entry_log_1 = {
+	items: items,
+	clear: clear,
+	add: add,
+};
 
-      case named_keys.Tab:
-        handle_tab($input, e);
-        break;
-    }
-  });
-}
+var ranges = ranges_1;
+
+var segments$1 = Object.keys(ranges);
+
+var segments_1 = segments$1;
+
+var convert_number = convert_number$2;
+
+var get_values$4 = function get_values ($input, timeString) {
+	var value = timeString ? timeString : $input.value;
+	var regEx = /([0-9-]{1,2})\:([0-9-]{1,2})\s?(AM|PM|\-\-)?/;
+	var result = regEx.exec(value);
+
+	return {
+		hrs: convert_number(result[1]),
+		min: convert_number(result[2]),
+		mode: result[3],
+	}
+};
 
-function auto_swap($input) {
-  if ($input.polyfill.autoSwap) {
-    switch_times($input, 24);
-    setTimeout(function () {
-      switch_times($input, 12);
-    }, 1);
-  }
-}
+var get_current_segment$8 = get_current_segment$9;
+var get_values$3 = get_values$4;
+
+var update_a11y$5 = function update_a11y ($input, announcementArray) {
+	// Timeout helps ensure that the input has stabilized
+	setTimeout(function(){
+		var current_segment = get_current_segment$8($input);
+		var values = get_values$3($input);
+		var value = values[current_segment];
+		var finalValue = value == '--' ? 'blank' : value;
+
+		var segmentName = {
+			hrs: 'Hours',
+			min: 'Minutes',
+			mode: 'AM/PM'
+		}[current_segment];
+
+		var announcements = {
+			initial: '$label grouping $fullValue.',
+			select: '$segmentName spin button $segmentValue.',
+			update: '$segmentValue.',
+		};
+
+		var textArray = announcementArray.map(function(providedString){
+			if (announcements[providedString]) {
+				return announcements[providedString];
+			}
+			return providedString;
+		});
+
+		var fullValue = $input.value.replace(/--/g,'blank');
+
+		var html = '<p>' + textArray.join('</p><p>') + '</p>';
+		html = html.replace(/\$label/g, $input.polyfill.label);
+		html = html.replace(/\$segmentName/g, segmentName);
+		html = html.replace(/\$segmentValue/g, finalValue);
+		html = html.replace(/\$fullValue/g, fullValue);
+
+		$input.polyfill.$a11y.innerHTML = html;
+	}, 1);
+};
 
-// selector is optional, it allows for an early exit
-var get_ancestors = function ($input, selectorString) {
-  var $elem = $input; // https://stackoverflow.com/a/8729274/1611058
+var get_current_segment$7 = get_current_segment$9;
+var select_segment$4 = select_segment$5;
+
+var manual_entry_log$1 = manual_entry_log_1;
+var segments = segments_1;
+
+var update_a11y$4 = update_a11y$5;
+
+var traverse$2 = function traverse ($input, direction) {
+	var segment = get_current_segment$7($input);
+
+	var modifier = direction === 'next' ? 1 : -1;
+	var next_segment_index = segments.indexOf(segment) + modifier;
+
+	var next_segment = {
+		next: segments[next_segment_index] || 'mode',
+		prev: next_segment_index < 0 ? 'hrs' : segments[next_segment_index],
+	}[direction];
+
+	select_segment$4($input, next_segment);
+	manual_entry_log$1.clear();
+	update_a11y$4($input, ['select']);
+};
 
-  var ancestors = [];
+var traverse$1 = traverse$2;
+
+var next_segment$3 = function next_segment ($input) {
+	traverse$1($input, 'next');
+};
 
-  while ($elem) {
-    ancestors.push($elem);
-    var matchesSelector = $elem.msMatchesSelector ? $elem.msMatchesSelector(selectorString) : $elem.matches(selectorString);
+var traverse = traverse$2;
+
+var prev_segment$2 = function prev_segment ($input) {
+	traverse($input, 'prev');
+};
 
-    if (matchesSelector) {
-      return ancestors;
-    }
+var get_current_segment$6 = get_current_segment$9;
+var select_segment$3 = select_segment$5;
+
+var select_cursor_segment$1 = function select_cursor_segment ($input) {
+	var current_segment = get_current_segment$6($input);
+	select_segment$3($input, current_segment);
+};
 
-    $elem = $elem.parentElement;
-  }
+var apply_default = apply_default$1;
+var select_segment$2 = select_segment$5;
+
+var reset$1 = function reset ($input) {
+	apply_default($input);
+	select_segment$2($input, 'hrs');
+};
 
-  return ancestors;
+var get_values$2 = get_values$4;
+var leading_zero$1 = leading_zero$4;
+var select_segment$1 = select_segment$5;
+var set_data_attribute = set_data_attribute$3;
+var trigger_both_events = trigger_both_events$2;
+
+var set_segment$5 = function set_segment ($input, segment, value) {
+	var values = get_values$2($input);
+	values[segment] = value;
+	var newInputVal = [
+		leading_zero$1(values.hrs),':',
+		leading_zero$1(values.min),' ',
+		values.mode
+	].join('');
+	$input.value = newInputVal;
+	select_segment$1($input, segment);
+	set_data_attribute($input, newInputVal);
+	trigger_both_events($input);
 };
 
-function get_label($input) {
-  var labelText = aria_labelledby($input) || aria_label($input) || for_attribute($input) || label_wrapper_element($input) || title_attribute($input);
-  if (labelText) return labelText;
-  console.error('Label text for input not found.', $input);
-  throw new Error('Cannot polyfill time input due to a missing label.');
-}
+var all_number_keys$2 = [
+  // 0,  1,  2,  3,  4,  5,  6,  7,  8,  9
+    48, 49, 50, 51, 52, 53, 54, 55, 56, 57,
+    96, 97, 98, 99,100,101,102,103,104,105
+];
+
+var all_number_keys_1 = all_number_keys$2;
+
+var all_number_keys$1 = all_number_keys_1;
+
+var sorted_number_keys$1 = {};
+// sorted_number_keys = { 48: 0, 49: 1, 96: 0, 97: 1, ... };
+all_number_keys$1.forEach(function(key, index) {
+	var number_val = index > 9 ? index - 10 : index;
+	sorted_number_keys$1[key] = number_val;
+});
+
+var sorted_number_keys_1 = sorted_number_keys$1;
+
+var get_current_segment$5 = get_current_segment$9;
+var set_segment$4 = set_segment$5;
+var next_segment$2 = next_segment$3;
+
+var manual_entry_log = manual_entry_log_1;
+var sorted_number_keys = sorted_number_keys_1;
+
+var manual_number_entry$1 = function manual_number_entry($input, key) {
+	var key_value = sorted_number_keys[key];
+	var segment = get_current_segment$5($input);
+
+	if (segment !== 'mode') {
+		var entry_count = manual_entry_log.items().length;
+
+		var upper_limits = {
+			hrs: [1,2],
+			min: [5,9],
+		};
+		var limit = upper_limits[segment][entry_count];
+
+		if (entry_count < 2) {
+			manual_entry_log.add(key_value);
+		}
+
+		var full_limit = parseInt(upper_limits[segment].join(''));
+		var full_entry = parseInt(manual_entry_log.items().join(''));
+
+		if (full_limit >= full_entry) {
+			set_segment$4($input, segment, full_entry);
+		}
+
+		var at_limit = key_value > limit || manual_entry_log.items().length === 2;
+
+		if (at_limit) {
+			next_segment$2($input);
+		}
+	}
+};
 
-function aria_labelledby($input) {
-  var ariaLabelByID = $input.getAttribute('aria-labelledby');
+var set_segment$3 = set_segment$5;
+var update_a11y$3 = update_a11y$5;
+
+var clear_segment$1 = function clear_segment ($input, segment) {
+	set_segment$3($input, segment, '--');
+	update_a11y$3($input, ['update']);
+};
 
-  if (ariaLabelByID) {
-    var $ariaLabelBy = document.getElementById(ariaLabelByID);
-    if ($ariaLabelBy) return $ariaLabelBy.textContent;
-  }
+var get_values$1 = get_values$4;
+var set_segment$2 = set_segment$5;
+
+var switch_mode$2 = function switch_mode ($input, default_mode) {
+	default_mode = default_mode || 'AM';
+	var current_mode = get_values$1($input).mode;
+	var new_mode = {
+		'--' : default_mode,
+		'AM' : 'PM',
+		'PM' : 'AM',
+	}[current_mode];
+	set_segment$2($input, 'mode', new_mode);
+};
 
-  return false;
-}
+var get_values = get_values$4;
+var convert_hours_to_12hr_time = convert_hours_to_12hr_time$2;
+var leading_zero = leading_zero$4;
+var set_segment$1 = set_segment$5;
+
+var nudge_time_segment$2 = function nudge_time_segment ($input, segment, direction) {
+	var current_values = get_values($input);
+	var time;
+
+	var modifier = direction === 'up' ? 1 : -1;
+
+	if (current_values[segment] === '--') {
+		var current_time = new Date();
+		time = {
+			hrs: convert_hours_to_12hr_time(current_time.getHours()),
+			min: current_time.getMinutes(),
+		};
+	} else {
+		var minutes = {
+			up : current_values.min < 59 ? current_values.min + modifier : 0,
+			down : current_values.min === 0 ? 59 : current_values.min + modifier,
+		};
+		time = {
+			hrs: convert_hours_to_12hr_time(current_values.hrs + modifier),
+			min: minutes[direction],
+		};
+	}
+
+	set_segment$1($input, segment, leading_zero(time[segment]) );
+};
 
-function aria_label($input) {
-  var ariaLabel = $input.getAttribute('aria-label');
-  if (ariaLabel) return ariaLabel;
-  return false;
-}
+var switch_mode$1 = switch_mode$2;
+var nudge_time_segment$1 = nudge_time_segment$2;
+var update_a11y$2 = update_a11y$5;
+
+var increment$1 = function increment ($input, segment) {
+	if (segment === 'mode') {
+		switch_mode$1($input, 'AM');
+	} else {
+		nudge_time_segment$1($input, segment, 'up');
+	}
+	update_a11y$2($input, ['update']);
+};
 
-function for_attribute($input) {
-  if ($input.id) {
-    var $forLabel = document.querySelector('label[for="' + $input.id + '"]');
-    if ($forLabel) return $forLabel.textContent;
-  }
+var get_current_segment$4 = get_current_segment$9;
+var increment = increment$1;
+
+var increment_current_segment$1 = function increment_current_segment ($input) {
+	var current_segment = get_current_segment$4($input);
+	increment($input, current_segment);
+};
 
-  return false;
-}
+var switch_mode = switch_mode$2;
+var nudge_time_segment = nudge_time_segment$2;
+var update_a11y$1 = update_a11y$5;
+
+var decrement$1 = function decrement ($input, segment) {
+	if (segment === 'mode') {
+		switch_mode($input, 'PM');
+	} else {
+		nudge_time_segment($input, segment, 'down');
+	}
+	update_a11y$1($input, ['update']);
+};
 
-function label_wrapper_element($input) {
-  var ancestors = get_ancestors($input, 'label');
-  var $parentLabel = ancestors[ancestors.length - 1];
-  if ($parentLabel.nodeName == 'LABEL') return $parentLabel.textContent;
-  return false;
-}
+var get_current_segment$3 = get_current_segment$9;
+var decrement = decrement$1;
+
+var decrement_current_segment$1 = function decrement_current_segment ($input){
+	var current_segment = get_current_segment$3($input);
+	decrement($input, current_segment);
+};
 
-function title_attribute($input) {
-  var titleLabel = $input.getAttribute('title');
-  if (titleLabel) return titleLabel;
-  return false;
-}
+var get_current_segment$2 = get_current_segment$9;
+var set_segment = set_segment$5;
+
+var set_mode$1 = function set_mode ($input, type) {
+	var segment = get_current_segment$2($input);
+	if (segment === 'mode') {
+		set_segment($input, segment, type);
+	}
+};
 
-function create_accessibility_block() {
-  var $block = document.createElement('div');
-  $block.setAttribute('aria-live', 'assertive');
-  $block.setAttribute('style', 'position: absolute; opacity: 0; height: 0; width: 0; overflow: hidden; pointer-events: none;');
-  $block.classList.add('time-input-polyfill-accessibility-block');
-  document.querySelector('body').appendChild($block);
-  return $block;
-}
+var switch_to_data_value$1 = function($input) {
+	var replacementVal = $input.dataset.value;
+	$input.value = replacementVal;
+};
 
-var accessibility_block_created = false;
-var $a11y;
-
-function TimePolyfill($input, $label) {
-  $input.setAttribute('autocomplete', 'off'); // Prevent screen reader from announcing the default stuff
-
-  $input.setAttribute('aria-hidden', true);
-
-  if (!accessibility_block_created) {
-    $a11y = create_accessibility_block();
-    accessibility_block_created = true;
-  }
-
-  var label = $label ? $label.textContent : get_label($input);
-  $input.polyfill = {
-    $a11y: $a11y,
-    label: label,
-    autoSwap: true,
-    update: function update() {
-      update_time($input);
-    },
-    swap: function swap(forcedFormat) {
-      switch_times($input, forcedFormat);
-    }
-  };
+var switch_to_data_value = switch_to_data_value$1;
+var set_time = set_time$2;
+
+var switch_times$1 = function switch_times ($input, format) {
+	var is12hr = /\s/.test($input.value);
+
+	if (format != 12 && format != 24) {
+		format = is12hr ? 24 : 12;
+	}
+
+	var actions = {
+		12: function(){
+			if (!is12hr) {
+				set_time($input, $input.dataset.value);
+			}
+		},
+		24: function(){
+			if (is12hr) {
+				switch_to_data_value($input);
+			}
+		}
+	};
+	actions[format]();
+};
 
-  if ($input.value === '' || /--/.test($input.value)) {
-    apply_default($input);
-    set_data_attribute($input, '');
-  } else {
-    update_time($input);
-    set_data_attribute($input, $input.value);
-  }
+var get_current_segment$1 = get_current_segment$9;
+var prev_segment$1 = prev_segment$2;
+var next_segment$1 = next_segment$3;
+
+var handle_tab$1 = function handle_tab($input, e) {
+	var current_segment = get_current_segment$1($input);
+	var backwards_and_first = e.shiftKey && current_segment === 'hrs';
+	var forwards_and_last = !e.shiftKey && current_segment === 'mode';
+
+	if (!backwards_and_first && !forwards_and_last) {
+		e.preventDefault();
+		if (e.shiftKey) {
+			prev_segment$1($input);
+		} else {
+			next_segment$1($input);
+		}
+	}
+};
 
-  bind_events($input);
-}
+var named_keys$1 = {
+	ArrowDown: 40,
+	ArrowRight: 39,
+	ArrowUp: 38,
+	ArrowLeft: 37,
+	Backspace: 8,
+	Delete: 46,
+	Tab: 9,
+	Shift: 16,
+	Escape: 27,
+	a: 65,
+	p: 80,
+};
+
+var named_keys_1 = named_keys$1;
+
+var values = values$1;
+
+var select_segment = select_segment$5;
+
+var next_segment = next_segment$3;
+var prev_segment = prev_segment$2;
+var select_cursor_segment = select_cursor_segment$1;
+
+var get_current_segment = get_current_segment$9;
+
+var reset = reset$1;
+var manual_number_entry = manual_number_entry$1;
+var clear_segment = clear_segment$1;
+var increment_current_segment = increment_current_segment$1;
+var decrement_current_segment = decrement_current_segment$1;
+var set_mode = set_mode$1;
+var switch_times = switch_times$1;
+
+var handle_tab = handle_tab$1;
+
+var all_number_keys = all_number_keys_1;
+var named_keys = named_keys_1;
+
+var update_a11y = update_a11y$5;
+
+var bind_events = function bind_events ($input) {
+
+	var shiftKey = false;
+
+	document.addEventListener('keydown', function(e){
+		shiftKey = e.shiftKey;
+	});
+	document.addEventListener('keyup', function(e){
+		shiftKey = e.shiftKey;
+	});
+
+	if ($input.form) {
+		$input.form.addEventListener('submit', function(){
+			auto_swap($input);
+		});
+	}
+
+	var focused_via_click = false;
+
+	$input.addEventListener('mousedown', function(){
+		focused_via_click = true;
+	});
+
+	// Turns the IE clear button into a reset button
+	$input.addEventListener('mouseup', function(){
+		setTimeout(function(){
+			if ($input.value === '') reset($input);
+		}, 1);
+	});
+
+	$input.addEventListener('click', function(e){
+		select_cursor_segment($input);
+	});
+
+	$input.addEventListener('blur', function(){
+		$input.dataset.value;
+		focused_via_click = false;
+	});
+
+	$input.addEventListener('focus', function(e){
+		if (!focused_via_click) {
+			e.preventDefault();
+			var segment = shiftKey ? 'mode' : 'hrs';
+			select_segment($input, segment);
+		}
+		update_a11y($input, [
+			'initial',
+			'select'
+		]);
+	});
+
+	$input.addEventListener('keydown', function(e) {
+		var is_enter_key = e.which === 13;
+		if (is_enter_key) return true;
+
+		var is_number_key = all_number_keys.indexOf(e.which) > -1;
+		var is_named_key = values(named_keys).indexOf(e.which) > -1;
+		var is_arrow_key = [named_keys.ArrowDown, named_keys.ArrowRight, named_keys.ArrowUp, named_keys.ArrowLeft].indexOf(e.which) > -1;
+		var is_mode_key = [named_keys.a, named_keys.p].indexOf(e.which) > -1;
+		var is_delete_key = [named_keys.Delete, named_keys.Backspace].indexOf(e.which) > -1;
+
+		if (!is_named_key || is_arrow_key || is_number_key || is_mode_key || is_delete_key) { e.preventDefault(); }
+
+		if (is_number_key) {
+			manual_number_entry($input, e.which);
+		}
+
+		if (is_delete_key) {
+			var segment = get_current_segment($input);
+			clear_segment($input, segment);
+		}
+
+		switch (e.which) {
+			case named_keys.ArrowRight: next_segment($input); break;
+			case named_keys.ArrowLeft:  prev_segment($input); break;
+			case named_keys.ArrowUp:    increment_current_segment($input); break;
+			case named_keys.ArrowDown:  decrement_current_segment($input); break;
+			case named_keys.Escape:     reset($input); break;
+			case named_keys.a:          set_mode($input, 'AM'); break;
+			case named_keys.p:          set_mode($input, 'PM'); break;
+			case named_keys.Tab:        handle_tab($input, e); break;
+		}
+	});
+};
+
+function auto_swap($input) {
+	if ($input.polyfill.autoSwap) {
+		switch_times($input, 24);
+		setTimeout(function(){
+			switch_times($input, 12);
+		}, 1);
+	}
+}
+
+// selector is optional, it allows for an early exit
+var get_ancestors$1 = function ($input, selectorString) {
+	var $elem = $input;
+
+	// https://stackoverflow.com/a/8729274/1611058
+	var ancestors = [];
+	while ($elem) {
+		ancestors.push($elem);
+		var matchesSelector = $elem.msMatchesSelector ?
+			$elem.msMatchesSelector(selectorString) :
+			$elem.matches(selectorString);
+		if (matchesSelector) {
+			return ancestors;
+		}
+		$elem = $elem.parentElement;
+	}
+
+	return ancestors;
+};
 
-if (window) {
-  window.TimePolyfill = TimePolyfill;
-}
+var get_ancestors = get_ancestors$1;
+
+var get_label = function get_label ($input) {
+
+	var labelText =
+		aria_labelledby($input) ||
+		aria_label($input) ||
+		for_attribute($input) ||
+		label_wrapper_element($input) ||
+		title_attribute($input);
+
+	if (labelText) return labelText;
+
+	console.error('Label text for input not found.', $input);
+	throw new Error('Cannot polyfill time input due to a missing label.');
+};
+
+function aria_labelledby($input){
+	var ariaLabelByID = $input.getAttribute('aria-labelledby');
+	if (ariaLabelByID) {
+		var $ariaLabelBy = document.getElementById(ariaLabelByID);
+		if ($ariaLabelBy) return $ariaLabelBy.textContent;
+	}
+	return false;
+}
+
+function aria_label($input){
+	var ariaLabel = $input.getAttribute('aria-label');
+	if (ariaLabel) return ariaLabel;
+	return false;
+}
+
+function for_attribute($input){
+	if ($input.id) {
+		var $forLabel = document.querySelector('label[for="'+$input.id+'"]');
+		if ($forLabel) return $forLabel.textContent;
+	}
+	return false;
+}
+
+function label_wrapper_element($input){
+	var ancestors = get_ancestors($input, 'label');
+	var $parentLabel = ancestors[ancestors.length - 1];
+	if ($parentLabel.nodeName == 'LABEL') return $parentLabel.textContent;
+	return false
+}
+
+function title_attribute($input){
+	var titleLabel = $input.getAttribute('title');
+	if (titleLabel) return titleLabel;
+	return false
+}
+
+var create_a11y_block = function create_accessibility_block () {
+	var $block = document.createElement('div');
+	$block.setAttribute('aria-live', 'assertive');
+	$block.setAttribute('style', 'position: absolute; opacity: 0; height: 0; width: 0; overflow: hidden; pointer-events: none;');
+	$block.classList.add('time-input-polyfill-accessibility-block');
+	document.querySelector('body').appendChild($block);
+	return $block;
+};
 
-var index_cjs = TimePolyfill;
+(function (module) {
+	var apply_default = apply_default$1;
+	var update_time$1 = update_time;
+	var set_data_attribute = set_data_attribute$3;
+	var bind_events$1 = bind_events;
+	var switch_times = switch_times$1;
+	var get_label$1 = get_label;
+
+	var create_a11y_block$1 = create_a11y_block;
+
+	var accessibility_block_created = false;
+	var $a11y;
+
+	function TimePolyfill($input) {
+
+		$input.setAttribute('autocomplete','off');
+
+		// Prevent screen reader from announcing the default stuff
+		$input.setAttribute('aria-hidden', true);
+
+		if (!accessibility_block_created) {
+			$a11y = create_a11y_block$1();
+			accessibility_block_created = true;
+		}
+
+		var label = get_label$1($input);
+
+		$input.polyfill = {
+			$a11y: $a11y,
+			label: label,
+			autoSwap: true,
+			update: function() {
+				update_time$1($input);
+			},
+			swap: function(forcedFormat) {
+				switch_times($input, forcedFormat);
+			}
+		};
+
+		if ($input.value === '' || /--/.test($input.value)) {
+			apply_default($input);
+			set_data_attribute($input, '');
+		} else {
+			update_time$1($input);
+			set_data_attribute($input, $input.value);
+		}
+
+		bind_events$1($input);
+	}
+
+	if (window) window.TimePolyfill = TimePolyfill;
+	if (module) module.exports = TimePolyfill;
+} (timeInputPolyfill));
+
+var TimePolyfill = timeInputPolyfill.exports;
 
 function civilTimeToHTMLTime(civilTime) {
     if (civilTime == undefined) {
@@ -744,7 +904,7 @@ function InputTimeSafari(_a) {
     const blurHandler = generateEventHandler(handleChange);
     React.useLayoutEffect(() => {
         const input = inputTime.current;
-        new index_cjs(input);
+        new TimePolyfill(input);
         if (value) {
             input.value = civilTimeToHTMLTime(value);
             input.polyfill.update();