@planningcenter/tapestry-react 2.10.0-rc.8 → 2.10.0

package/dist/cjs/Text/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _Text = require("./Text");
+
+exports["default"] = _Text.Text;
+Object.keys(_Text).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Text[key]) return;
+  exports[key] = _Text[key];
+});

package/dist/cjs/TextArea/TextArea.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _InputBox = _interopRequireDefault(require("../Input/InputBox"));
+
+var TextArea = function TextArea(_ref) {
+  var defaultValue = _ref.defaultValue,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["defaultValue"]);
+  return /*#__PURE__*/_react["default"].createElement(_InputBox["default"], (0, _extends2["default"])({
+    as: "textarea",
+    defaultValue: defaultValue,
+    maxWidth: "100%",
+    minWidth: "100%",
+    tabIndex: 0
+  }, restProps));
+};
+
+var _default = TextArea;
+exports["default"] = _default;

package/dist/cjs/TextArea/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _TextArea = _interopRequireDefault(require("./TextArea"));
+
+var _default = _TextArea["default"];
+exports["default"] = _default;

package/dist/cjs/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,138 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.ThemeProvider = ThemeProvider;
+exports.themeInitializerScript = exports.themeStorage = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@emotion/react");
+
+var _cache = _interopRequireDefault(require("@emotion/cache"));
+
+var _merge = _interopRequireDefault(require("lodash/merge"));
+
+var _Box = require("../Box");
+
+var _defaultTheme = _interopRequireDefault(require("../system/default-theme"));
+
+var _system = require("../system");
+
+var _utils = require("../utils");
+
+var _styles = require("./styles");
+
+exports.setRootStyles = _styles.setRootStyles;
+exports.styleReset = _styles.styleReset;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var STORAGE_KEY = 'tapestry-react-theme';
+var caches = {
+  "default": (0, _cache["default"])({
+    key: 'tapestry-react'
+  })
+};
+
+function mergeIntoNewObject() {
+  for (var _len = arguments.length, merges = new Array(_len), _key = 0; _key < _len; _key++) {
+    merges[_key] = arguments[_key];
+  }
+
+  return _merge["default"].apply(void 0, [{}].concat(merges));
+}
+
+var themeStorage = {
+  get: function get() {
+    return window.localStorage.getItem(STORAGE_KEY);
+  },
+  set: function set(value) {
+    return window.localStorage.setItem(STORAGE_KEY, value);
+  }
+};
+exports.themeStorage = themeStorage;
+var themeInitializerScript = "\ntry {\n  var theme = window.localStorage.getItem('" + STORAGE_KEY + "')\n  if (theme) {\n    document.documentElement.dataset.theme = theme\n  }\n} catch (e) {}\n";
+exports.themeInitializerScript = themeInitializerScript;
+var emptyTheme = {};
+
+function mergeThemes(a, b) {
+  var _a$button, _b$button, _a$spinner, _b$spinner, _a$spinner2, _b$spinner2;
+
+  if (a === void 0) {
+    a = {};
+  }
+
+  if (b === void 0) {
+    b = {};
+  }
+
+  return _objectSpread(_objectSpread(_objectSpread({}, a), b), {}, {
+    button: _objectSpread(_objectSpread(_objectSpread({}, a.button), b.button), {}, {
+      themes: mergeIntoNewObject(((_a$button = a.button) == null ? void 0 : _a$button.themes) || {}, ((_b$button = b.button) == null ? void 0 : _b$button.themes) || {})
+    }),
+    colors: mergeIntoNewObject((0, _system.flattenPalette)(a.colors || {}), (0, _system.flattenPalette)(b.colors || {})),
+    spinner: _objectSpread(_objectSpread(_objectSpread({}, a.spinner), b.spinner), {}, {
+      sizes: mergeIntoNewObject(((_a$spinner = a.spinner) == null ? void 0 : _a$spinner.sizes) || {}, ((_b$spinner = b.spinner) == null ? void 0 : _b$spinner.sizes) || {}),
+      thickness: mergeIntoNewObject(((_a$spinner2 = a.spinner) == null ? void 0 : _a$spinner2.thickness) || {}, ((_b$spinner2 = b.spinner) == null ? void 0 : _b$spinner2.thickness) || {})
+    })
+  });
+}
+
+function ThemeProvider(_ref) {
+  var _ref2;
+
+  var _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? emptyTheme : _ref$theme,
+      children = _ref.children,
+      boxProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["theme", "children"]);
+
+  var _useState = (0, _react.useState)(function () {
+    return mergeThemes(_defaultTheme["default"], theme);
+  }),
+      mergedTheme = _useState[0],
+      setMergedTheme = _useState[1];
+
+  var cache = (0, _react.useMemo)(function () {
+    if (caches[theme.id]) {
+      return caches[theme.id];
+    } else {
+      caches[theme.id] = (0, _cache["default"])({
+        key: "tapestry-react-" + theme.id
+      });
+      return caches[theme.id];
+    }
+  }, [theme.id]);
+  (0, _react.useLayoutEffect)(function () {
+    var nextTheme = mergeThemes(_defaultTheme["default"], theme);
+    (0, _styles.setRootStyles)(nextTheme.id, (0, _utils.objectToCSSProperties)('colors', nextTheme.colors));
+
+    if (!(0, _utils.shallowEqual)(mergedTheme, nextTheme)) {
+      setMergedTheme(nextTheme);
+    }
+  }, [theme]);
+  return /*#__PURE__*/_react["default"].createElement(_react2.CacheProvider, {
+    value: cache
+  }, /*#__PURE__*/_react["default"].createElement(_react2.ThemeProvider, {
+    theme: mergedTheme
+  }, /*#__PURE__*/_react["default"].createElement(_Box.Box, (0, _extends2["default"])({
+    className: "tapestry-react-reset"
+  }, boxProps, (_ref2 = {}, _ref2["" + (0, _styles.getThemeDataAttribute)(mergedTheme.id)] = true, _ref2)), children)));
+}
+
+ThemeProvider.cache = caches["default"];
+ThemeProvider.setRootStyles = _styles.setRootStyles;
+ThemeProvider.styleReset = _styles.styleReset;
+ThemeProvider.themeInitializerScript = themeInitializerScript;
+ThemeProvider.themeStorage = themeStorage;

package/dist/cjs/ThemeProvider/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _ThemeProvider = require("./ThemeProvider");
+
+exports["default"] = _ThemeProvider.ThemeProvider;
+Object.keys(_ThemeProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ThemeProvider[key]) return;
+  exports[key] = _ThemeProvider[key];
+});

package/dist/cjs/ThemeProvider/styles.js

@@ -0,0 +1,52 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getThemeDataAttribute = getThemeDataAttribute;
+exports.styleReset = exports.defaultColorProperties = exports.setRootStyles = void 0;
+
+var _system = require("../system");
+
+var _utils = require("../utils");
+
+function getThemeDataAttribute(themeId) {
+  if (themeId) {
+    return "data-tapestry-react-theme-provider-" + themeId;
+  } else {
+    return 'data-tapestry-react-theme-provider';
+  }
+}
+
+var getRootStyles = function getRootStyles(id, styles) {
+  var styleString = Object.keys(styles).map(function (key) {
+    return key + ": " + styles[key];
+  }).join('; ');
+  return "[" + getThemeDataAttribute(id) + "] { " + styleString + " }";
+};
+
+var setRootStyles = function setRootStyles(themeId, styles) {
+  ensureStyleElement(themeId);
+  var styleElement = document.getElementById("tapestry-react-style-" + themeId);
+  var sheet = styleElement.sheet;
+  var styleString = getRootStyles(themeId, styles);
+  sheet.deleteRule(0);
+  sheet.insertRule(styleString, 0);
+};
+
+exports.setRootStyles = setRootStyles;
+var defaultColorProperties = (0, _utils.objectToCSSProperties)('colors', (0, _system.flattenPalette)(_system.defaultTheme.colors));
+exports.defaultColorProperties = defaultColorProperties;
+var styleReset = ("\n" + getRootStyles(null, defaultColorProperties) + "\n\n.tapestry-react-reset {\n  appearance: none;\n  background-color: transparent;\n  border-width: 0px;\n  border-style: solid;\n  border-color: transparent;\n  box-sizing: border-box;\n  color: inherit;\n  box-sizing: border-box;\n  flex-grow: 0;\n  flex-shrink: 0;\n  flex-basis: auto;\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n  font-weight: 400;\n  margin-top: 0;\n  margin-right: 0;\n  margin-bottom: 0;\n  margin-left: 0;\n  min-width: 0px;\n  min-height: 0px;\n  padding-top: 0;\n  padding-right: 0;\n  padding-bottom: 0;\n  padding-left: 0;\n  text-decoration: none;\n}\n\n.tapestry-react-reset::-moz-focus-inner {\n  padding-top: 0;\n  padding-right: 0;\n  padding-bottom: 0;\n  padding-left: 0;\n  border: none;\n}\n\n.tapestry-react-reset:focus:not(.focus-visible) {\n  outline: 0px;\n}\n" // minify string
+).replace(/\n/g, '').replace(/\s\s+/g, ' '); // we use our own global style implementation in place of Emotion Global
+// so we can have more control over when styles are injected since multiple
+// Providers can be used on a page
+
+exports.styleReset = styleReset;
+
+function ensureStyleElement(themeId) {
+  if (typeof window !== 'undefined' && !document.getElementById("tapestry-react-style-" + themeId)) {
+    var styleElement = document.createElement('style');
+    styleElement.id = "tapestry-react-style-" + themeId;
+    styleElement.innerHTML = styleReset;
+    document.head.insertAdjacentElement('afterbegin', styleElement);
+  }
+}

package/dist/cjs/TileView/TileView.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.TileView = TileView;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = require("@emotion/react");
+
+var React = _interopRequireWildcard(require("react"));
+
+var _splitStyles = _interopRequireDefault(require("../system/split-styles"));
+
+var _system = require("../system");
+
+var _VariantProvider = require("../VariantProvider");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } /** @jsxRuntime classic */ /** @jsx jsx */
+
+var tileViewPlugin = {
+  styleProps: ['minCellWidth', 'spacing'],
+  getStyles: function getStyles(_ref) {
+    var minCellWidth = _ref.minCellWidth,
+        spacing = _ref.spacing,
+        styles = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["minCellWidth", "spacing"]);
+    var parsedMinCellWidth = (0, _system.spacingValue)(minCellWidth);
+
+    if (parsedMinCellWidth) {
+      styles.gridTemplateColumns = "repeat(auto-fill, minmax(" + parsedMinCellWidth + ", 1fr))";
+    }
+
+    if (spacing !== undefined) {
+      styles.gap = (0, _system.spacingValue)(spacing);
+    }
+
+    return styles;
+  }
+};
+var defaultElement = 'div';
+
+function TileView(_ref2) {
+  var as = _ref2.as,
+      innerRef = _ref2.innerRef,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, ["as", "innerRef"]);
+  var Element = as || defaultElement;
+  var variant = (0, _VariantProvider.useVariant)();
+  return (0, _react.jsx)(Element, (0, _extends2["default"])({
+    ref: innerRef
+  }, (0, _splitStyles["default"])(_objectSpread({
+    display: 'grid',
+    grow: 1,
+    shrink: 1,
+    plugin: tileViewPlugin,
+    variant: variant
+  }, props))));
+}

package/dist/cjs/TileView/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _TileView = require("./TileView");
+
+exports["default"] = _TileView.TileView;
+Object.keys(_TileView).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _TileView[key]) return;
+  exports[key] = _TileView[key];
+});

package/dist/cjs/TimeField/TimeField.js

@@ -0,0 +1,333 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _Input = _interopRequireDefault(require("../Input/Input"));
+
+var _InputBox = _interopRequireDefault(require("../Input/InputBox"));
+
+var _InputField = _interopRequireDefault(require("../Input/InputField"));
+
+var _NumberField = _interopRequireDefault(require("../NumberField"));
+
+var _utils = require("../utils");
+
+var _utils2 = require("./utils");
+
+var isMobile = typeof window !== 'undefined' ? /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) : false;
+
+var TimeField = function TimeField(_ref) {
+  var ignoredKeys = _ref.ignoredKeys,
+      interval = _ref.interval,
+      _ref$isIOS = _ref.isIOS,
+      isIOS = _ref$isIOS === void 0 ? false : _ref$isIOS,
+      max = _ref.max,
+      min = _ref.min,
+      onChange = _ref.onChange,
+      _ref$twelveHourClock = _ref.twelveHourClock,
+      twelveHourClock = _ref$twelveHourClock === void 0 ? true : _ref$twelveHourClock,
+      value = _ref.value,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["ignoredKeys", "interval", "isIOS", "max", "min", "onChange", "twelveHourClock", "value"]);
+  var ref = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)(value[0]),
+      hours = _useState[0],
+      setHours = _useState[1];
+
+  var _useState2 = (0, _react.useState)(value[1]),
+      minutes = _useState2[0],
+      setMinutes = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(hours < 12 ? 'AM' : 'PM'),
+      meridiem = _useState3[0],
+      setMeridiem = _useState3[1];
+
+  var _useState4 = (0, _react.useState)(twelveHourClock && hours > 12 ? hours - 12 : hours),
+      hoursDisplay = _useState4[0],
+      setHoursDisplay = _useState4[1];
+
+  var decrementHoursBy = function decrementHoursBy(amount) {
+    var updatedHours = hours - amount;
+
+    if (twelveHourClock) {
+      if (updatedHours > 12) {
+        setHours(updatedHours);
+        setHoursDisplay(updatedHours - 12);
+      } else if (updatedHours <= 12 && updatedHours > 0) {
+        setHours(updatedHours);
+        setHoursDisplay(updatedHours);
+      } else if (updatedHours === 0) {
+        setHours(updatedHours);
+        setHoursDisplay(12);
+      } else {
+        setHours(23);
+        setHoursDisplay(11);
+      }
+    } else {
+      if (updatedHours < 0) {
+        setHours(23);
+        setHoursDisplay(23);
+      } else {
+        setHours(updatedHours);
+        setHoursDisplay(updatedHours);
+      }
+    }
+  };
+
+  var incrementHoursBy = function incrementHoursBy(amount) {
+    var updatedHours = hours + amount;
+
+    if (twelveHourClock) {
+      if (updatedHours > 0 && updatedHours <= 12) {
+        setHours(updatedHours);
+        setHoursDisplay(updatedHours);
+      } else if (updatedHours > 12 && updatedHours < 24) {
+        setHours(updatedHours);
+        setHoursDisplay(updatedHours - 12);
+      } else {
+        setHours(0);
+        setHoursDisplay(12);
+      }
+    } else {
+      if (updatedHours < 24) {
+        setHours(updatedHours);
+        setHoursDisplay(updatedHours);
+      } else {
+        setHours(0);
+        setHoursDisplay(0);
+      }
+    }
+  };
+
+  var decrementMinutesBy = function decrementMinutesBy(amount) {
+    var updatedMinutes = minutes - amount;
+
+    if (updatedMinutes >= 0) {
+      setMinutes(updatedMinutes);
+    } else {
+      setMinutes(59);
+      decrementHoursBy(1);
+    }
+  };
+
+  var incrementMinutesBy = function incrementMinutesBy(amount) {
+    var updatedMinutes = minutes + amount;
+
+    if (updatedMinutes <= 59) {
+      setMinutes(updatedMinutes);
+    } else {
+      setMinutes(0);
+      incrementHoursBy(1);
+    }
+  };
+
+  var toggleMeridiem = function toggleMeridiem() {
+    if (meridiem === 'AM') {
+      setMeridiem('PM');
+
+      if (hours >= 0 && hours <= 12) {
+        setHours(hours + 12);
+      }
+    } else {
+      setMeridiem('AM');
+
+      if (hours >= 12 && hours < 24) {
+        setHours(hours - 12);
+      }
+    }
+  };
+
+  var handleHoursKeyDown = function handleHoursKeyDown(event) {
+    if (ignoredKeys && ignoredKeys.includes(event.key)) {
+      return;
+    }
+
+    if (event.key === 'Backspace') {
+      event.preventDefault();
+    }
+
+    if (event.key === 'ArrowRight') {
+      ref.current.node.children[2].focus();
+    }
+
+    if (event.key === 'ArrowUp') {
+      incrementHoursBy(1);
+    }
+
+    if (event.key === 'ArrowDown') {
+      decrementHoursBy(1);
+    }
+  };
+
+  var handleHoursChange = function handleHoursChange(e) {
+    setHoursDisplay(e);
+    !twelveHourClock && setHours(e);
+  };
+
+  var handleHoursBlur = function handleHoursBlur(e) {
+    var updatedHoursValue = parseInt(e.target.value);
+
+    if (twelveHourClock) {
+      if (updatedHoursValue === 0) {
+        setHours(0);
+        setHoursDisplay(12);
+      } else if (hours <= 12) {
+        setHours(updatedHoursValue);
+        setHoursDisplay(updatedHoursValue);
+      } else {
+        if (updatedHoursValue === 12) {
+          setHours(12);
+          setHoursDisplay(12);
+        } else {
+          setHours(updatedHoursValue + 12);
+          setHoursDisplay(updatedHoursValue);
+        }
+      }
+    } else {
+      setHours(updatedHoursValue);
+      setHoursDisplay(updatedHoursValue);
+    }
+  };
+
+  var handleMinutesKeyDown = function handleMinutesKeyDown(event) {
+    if (event.key === 'ArrowLeft') {
+      ref.current.node.children[0].focus();
+    }
+
+    if (event.key === 'ArrowRight') {
+      ref.current.node.children[3].focus();
+    }
+
+    if (event.key === 'ArrowUp') {
+      incrementMinutesBy(1);
+    }
+
+    if (event.key === 'ArrowDown') {
+      decrementMinutesBy(1);
+    }
+  };
+
+  var handleAMPMKeyDown = function handleAMPMKeyDown(event) {
+    if (ignoredKeys && ignoredKeys.includes(event.key)) {
+      return;
+    }
+
+    if (event.key !== 'Tab' && !(event.metaKey && event.key === 'r')) {
+      event.preventDefault();
+    }
+
+    if (event.key === 'ArrowLeft') {
+      ref.current.node.children[2].focus();
+    }
+
+    if (event.key.toLowerCase() === 'a' && meridiem === 'PM' || event.key.toLowerCase() === 'p' && meridiem === 'AM' || event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+      toggleMeridiem();
+    }
+  };
+
+  var updateTime = function updateTime(time) {
+    var hours = time[0],
+        minutes = time[1];
+    return onChange([hours, minutes]);
+  };
+
+  var handleMobileChange = function handleMobileChange(event) {
+    var _event$target$value$s = event.target.value.split(':'),
+        hours = _event$target$value$s[0],
+        minutes = _event$target$value$s[1];
+
+    if (hours || minutes) {
+      setHours(hours);
+      setMinutes(minutes);
+    } else {
+      setHours(0);
+      setMinutes(0);
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    if (hours < 12) {
+      setMeridiem('AM');
+    } else {
+      setMeridiem('PM');
+    }
+
+    updateTime([hours, minutes]);
+  }, [hours, minutes]);
+  return isMobile || isIOS ? /*#__PURE__*/_react["default"].createElement(_Input["default"], (0, _extends2["default"])({}, restProps, {
+    type: "time",
+    autoWidth: hours + ":" + (0, _utils.padNumber)(minutes, 2) + " " + meridiem,
+    value: (0, _utils.padNumber)(hours, 2) + ":" + (0, _utils.padNumber)(minutes, 2),
+    onChange: handleMobileChange
+  })) : /*#__PURE__*/_react["default"].createElement(_InputBox["default"], (0, _extends2["default"])({
+    ref: ref,
+    inline: true
+  }, restProps), /*#__PURE__*/_react["default"].createElement(_NumberField["default"], {
+    "aria-label": "Hours",
+    autoWidth: false,
+    fontVariantNumeric: "tabular-nums",
+    grow: 0,
+    max: twelveHourClock ? 12 : 23,
+    min: 0,
+    moveFocusOnMax: true,
+    onBlur: handleHoursBlur,
+    onChange: handleHoursChange,
+    onKeyDown: handleHoursKeyDown,
+    pad: 2,
+    textAlign: "center",
+    value: hoursDisplay,
+    width: "2ch",
+    ignoredKeys: ignoredKeys
+  }), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    as: "span",
+    width: 0.5,
+    textAlign: "center",
+    userSelect: "none"
+  }, ":"), /*#__PURE__*/_react["default"].createElement(_NumberField["default"], {
+    "aria-label": "Minutes",
+    autoWidth: false,
+    fontVariantNumeric: "tabular-nums",
+    grow: 0,
+    max: 59,
+    min: 0,
+    moveFocusOnMax: true,
+    onChange: function onChange(e) {
+      return setMinutes(e);
+    },
+    onKeyDown: handleMinutesKeyDown,
+    pad: 2,
+    textAlign: "center",
+    value: minutes,
+    width: "2ch",
+    ignoredKeys: ignoredKeys
+  }), twelveHourClock && /*#__PURE__*/_react["default"].createElement(_InputField["default"], {
+    "aria-label": "AM/PM",
+    grow: 0,
+    highlightOnInteraction: true,
+    onChange: _utils.noop,
+    onKeyDown: handleAMPMKeyDown,
+    textAlign: "center",
+    value: meridiem,
+    width: "2em"
+  }));
+};
+
+TimeField.addHoursToTime = _utils2.addHoursToTime;
+TimeField.addMinutesToTime = _utils2.addMinutesToTime;
+TimeField.addTimeToDate = _utils2.addTimeToDate;
+TimeField.getTimeFromDate = _utils2.getTimeFromDate;
+var _default = TimeField;
+exports["default"] = _default;