@commercetools-uikit/time-input 12.2.2 → 12.2.6

package/dist/commercetools-uikit-time-input.cjs.prod.js

@@ -2,10 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _extends = require('@babel/runtime-corejs3/helpers/extends');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _padStartInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/pad-start');
 var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
-var React = require('react');
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var react$1 = require('react');
 require('prop-types');
 var reactIntl = require('react-intl');
 var Constraints = require('@commercetools-uikit/constraints');
@@ -15,27 +23,15 @@ var react = require('@emotion/react');
 var icons = require('@commercetools-uikit/icons');
 var Inline = require('@commercetools-uikit/spacings-inline');
 var AccessibleButton = require('@commercetools-uikit/accessible-button');
-var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
-var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
-var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
-var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
-var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
-var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
-var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
-var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
-var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _styled = require('@emotion/styled/base');
 var designSystem = require('@commercetools-uikit/design-system');
 var inputUtils = require('@commercetools-uikit/input-utils');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
 var _padStartInstanceProperty__default = /*#__PURE__*/_interopDefault(_padStartInstanceProperty);
 var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
-var React__default = /*#__PURE__*/_interopDefault(React);
-var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
-var Inline__default = /*#__PURE__*/_interopDefault(Inline);
-var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
 var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
 var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
 var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
@@ -44,19 +40,22 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
 var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
 var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
+var Inline__default = /*#__PURE__*/_interopDefault(Inline);
+var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
 var _styled__default = /*#__PURE__*/_interopDefault(_styled);
 
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default['default'](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default['default'](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$2(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](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) { var _context; _forEachInstanceProperty__default['default'](_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context2; _forEachInstanceProperty__default['default'](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
+function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default["default"](_context = ownKeys$2(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context2; _forEachInstanceProperty__default["default"](_context2 = ownKeys$2(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
 // * a disabled-field currently does not display warning/error-states so it takes precedence
 // * a readonly-field cannot be changed, but it might be relevant for validation, so error and warning are checked first
 // how you can interact with the field is controlled separately by the props, this only influences visuals
 
 var getClearSectionStyles = function getClearSectionStyles(theme) {
-  var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
+  var overwrittenVars = _objectSpread$2(_objectSpread$2({}, designSystem.customProperties), theme);
 
-  return /*#__PURE__*/react.css("align-items:center;box-sizing:border-box;display:flex;margin:", overwrittenVars.spacingXs, ";cursor:pointer;&:hover svg *{fill:", overwrittenVars.colorWarning, ";}" + ("" ));
+  return /*#__PURE__*/react.css("align-items:center;box-sizing:border-box;display:flex;margin:", overwrittenVars.spacingXs, ";cursor:pointer;&:hover svg *{fill:", overwrittenVars.colorWarning, ";}" + ("" ), "" );
 };
 
 var getClockIconContainerColor = function getClockIconContainerColor(vars, props) {
@@ -92,9 +91,9 @@ var getClockIconContainerFontColor = function getClockIconContainerFontColor(var
 };
 
 var getClockIconContainerStyles = function getClockIconContainerStyles(props, theme) {
-  var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
+  var overwrittenVars = _objectSpread$2(_objectSpread$2({}, designSystem.customProperties), theme);
 
-  return /*#__PURE__*/react.css("align-items:center;box-sizing:border-box;background:none;background-color:", props.isDisabled ? overwrittenVars.backgroundColorForInputWhenDisabled : 'none', ";border:0;border-left:1px solid ", overwrittenVars.borderColorForInput, ";border-top-right-radius:", overwrittenVars.borderRadiusForInput, ";border-bottom-right-radius:", overwrittenVars.borderRadiusForInput, ";border-color:", getClockIconContainerColor(overwrittenVars, props), ";color:", getClockIconContainerFontColor(overwrittenVars, props), ";cursor:", props.isDisabled ? 'not-allowed' : 'default', ";height:100%;display:flex;padding:", overwrittenVars.spacingXs, ";outline:0;transition:color ", overwrittenVars.transitionStandard, ",border-color ", overwrittenVars.transitionStandard, ";&:hover:not(:disabled):not(:read-only),&:focus{border-color:", overwrittenVars.borderColorForInputWhenFocused, ";}" + ("" ));
+  return /*#__PURE__*/react.css("align-items:center;box-sizing:border-box;background:none;background-color:", props.isDisabled ? overwrittenVars.backgroundColorForInputWhenDisabled : 'none', ";border:0;border-left:1px solid ", overwrittenVars.borderColorForInput, ";border-top-right-radius:", overwrittenVars.borderRadiusForInput, ";border-bottom-right-radius:", overwrittenVars.borderRadiusForInput, ";border-color:", getClockIconContainerColor(overwrittenVars, props), ";color:", getClockIconContainerFontColor(overwrittenVars, props), ";cursor:", props.isDisabled ? 'not-allowed' : 'default', ";height:100%;display:flex;padding:", overwrittenVars.spacingXs, ";outline:0;transition:color ", overwrittenVars.transitionStandard, ",border-color ", overwrittenVars.transitionStandard, ";&:hover:not(:disabled):not(:read-only),&:focus{border-color:", overwrittenVars.borderColorForInputWhenFocused, ";}" + ("" ), "" );
 };
 
 var getInputContainerBorderColor = function getInputContainerBorderColor(vars, props) {
@@ -130,9 +129,9 @@ var getInputContainerFontColor = function getInputContainerFontColor(vars, props
 };
 
 var getInputContainerStyles = function getInputContainerStyles(props, theme) {
-  var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
+  var overwrittenVars = _objectSpread$2(_objectSpread$2({}, designSystem.customProperties), theme);
 
-  return /*#__PURE__*/react.css("appearance:none;background-color:", props.isDisabled ? overwrittenVars.backgroundColorForInputWhenDisabled : overwrittenVars.backgroundColorForInput, ";border:1px solid ", getInputContainerBorderColor(overwrittenVars, props), ";border-radius:", overwrittenVars.borderRadiusForInput, ";box-sizing:border-box;color:", getInputContainerFontColor(overwrittenVars, props), ";cursor:", props.isDisabled ? 'not-allowed' : 'default', ";width:100%;height:", overwrittenVars.sizeHeightInput, ";align-items:center;display:flex;font-size:", overwrittenVars.fontSizeDefault, ";font-family:inherit;transition:border-color ", overwrittenVars.transitionStandard, ",box-shadow ", overwrittenVars.transitionStandard, ";svg{fill:", props.isReadOnly ? overwrittenVars.fontColorForInputWhenReadonly : 'inherit', ";}&:focus-within{border-color:", overwrittenVars.borderColorForInputWhenFocused, ";box-shadow:inset 0 0 0 2px ", overwrittenVars.borderColorForInputWhenFocused, ";}:hover:not(:disabled):not(:read-only),:focus{border-color:", overwrittenVars.borderColorForInputWhenFocused, ";}" + ("" ));
+  return /*#__PURE__*/react.css("appearance:none;background-color:", props.isDisabled ? overwrittenVars.backgroundColorForInputWhenDisabled : overwrittenVars.backgroundColorForInput, ";border:1px solid ", getInputContainerBorderColor(overwrittenVars, props), ";border-radius:", overwrittenVars.borderRadiusForInput, ";box-sizing:border-box;color:", getInputContainerFontColor(overwrittenVars, props), ";cursor:", props.isDisabled ? 'not-allowed' : 'default', ";width:100%;height:", overwrittenVars.sizeHeightInput, ";align-items:center;display:flex;font-size:", overwrittenVars.fontSizeDefault, ";font-family:inherit;transition:border-color ", overwrittenVars.transitionStandard, ",box-shadow ", overwrittenVars.transitionStandard, ";svg{fill:", props.isReadOnly ? overwrittenVars.fontColorForInputWhenReadonly : 'inherit', ";}&:focus-within{border-color:", overwrittenVars.borderColorForInputWhenFocused, ";box-shadow:inset 0 0 0 2px ", overwrittenVars.borderColorForInputWhenFocused, ";}:hover:not(:disabled):not(:read-only),:focus{border-color:", overwrittenVars.borderColorForInputWhenFocused, ";}" + ("" ), "" );
 };
 
 var _ref = {
@@ -146,66 +145,72 @@ var getTimeInputStyles = function getTimeInputStyles(props) {
 }; // This styled component is only useful because it's referenced in the `StyledInputContainer`.
 
 
-var StyledClockIconContainer = _styled__default['default']("label", {
+var StyledClockIconContainer = _styled__default["default"]("label", {
   target: "ebw0ygn1"
-} )();
+} )("" );
 
-var StyledInputContainer = _styled__default['default']("div", {
+var StyledInputContainer = _styled__default["default"]("div", {
   target: "ebw0ygn0"
-} )("&:hover,&:hover ", StyledClockIconContainer, ",&:focus-within ", StyledClockIconContainer, "{border-color:", designSystem.customProperties.borderColorForInputWhenFocused, ";}");
+} )("&:hover,&:hover ", StyledClockIconContainer, ",&:focus-within ", StyledClockIconContainer, "{border-color:", designSystem.customProperties.borderColorForInputWhenFocused, ";}" + ("" ));
 
+function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context2; _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
 var ClearSection = function ClearSection(props) {
   var theme = react.useTheme();
-  return react.jsx(AccessibleButton__default['default'], {
+  return jsxRuntime.jsx(AccessibleButton__default["default"], {
     theme: theme,
     css: getClearSectionStyles(theme),
     label: "clear",
     "aria-label": "clear",
     onClick: props.onClear,
-    hasError: props.hasError
-  }, react.jsx(icons.CloseIcon, {
-    size: "medium"
-  }));
+    hasError: props.hasError,
+    children: jsxRuntime.jsx(icons.CloseIcon, {
+      size: "medium"
+    })
+  });
 };
 ClearSection.displayName = 'ClearSection';
 ClearSection.propTypes = {};
 
 var TimeInputBody = function TimeInputBody(props) {
   var theme = react.useTheme();
-  return react.jsx(Inline__default['default'], {
-    alignItems: "center"
-  }, react.jsx(StyledInputContainer, {
-    css: getInputContainerStyles(props, theme)
-  }, react.jsx("input", _extends({
-    css: getTimeInputStyles(props, theme),
-    id: props.id,
-    name: props.name,
-    autoComplete: props.autoComplete,
-    placeholder: props.placeholder,
-    autoFocus: props.isAutofocussed,
-    disabled: props.isDisabled,
-    readOnly: props.isReadOnly,
-    value: props.value,
-    onChange: props.onChange,
-    onFocus: props.onFocus,
-    onBlur: props.onBlur
-  }, utils.filterDataAttributes(props), {
-    /* ARIA */
-    role: "textbox",
-    "aria-readonly": props.isReadOnly,
-    contentEditable: !props.isReadOnly
-  })), !props.isDisabled && !props.isReadOnly && react.jsx(ClearSection, {
-    isDisabled: props.isDisabled,
-    hasError: props.hasError,
-    isReadOnly: props.isReadOnly,
-    onClear: props.onClear
-  }), react.jsx(StyledClockIconContainer, {
-    css: getClockIconContainerStyles(props, theme),
-    htmlFor: props.id,
-    "data-toggle": true
-  }, react.jsx(icons.ClockIcon, {
-    color: props.isDisabled || props.isReadOnly ? 'neutral60' : 'solid'
-  }))));
+  return jsxRuntime.jsx(Inline__default["default"], {
+    alignItems: "center",
+    children: jsxRuntime.jsxs(StyledInputContainer, {
+      css: getInputContainerStyles(props, theme),
+      children: [jsxRuntime.jsx("input", _objectSpread$1(_objectSpread$1({
+        css: getTimeInputStyles(props, theme),
+        id: props.id,
+        name: props.name,
+        autoComplete: props.autoComplete,
+        placeholder: props.placeholder,
+        autoFocus: props.isAutofocussed,
+        disabled: props.isDisabled,
+        readOnly: props.isReadOnly,
+        value: props.value,
+        onChange: props.onChange,
+        onFocus: props.onFocus,
+        onBlur: props.onBlur
+      }, utils.filterDataAttributes(props)), {}, {
+        /* ARIA */
+        "aria-readonly": props.isReadOnly,
+        contentEditable: !props.isReadOnly
+      })), !props.isDisabled && !props.isReadOnly && jsxRuntime.jsx(ClearSection, {
+        isDisabled: props.isDisabled,
+        hasError: props.hasError,
+        isReadOnly: props.isReadOnly,
+        onClear: props.onClear
+      }), jsxRuntime.jsx(StyledClockIconContainer, {
+        css: getClockIconContainerStyles(props, theme),
+        htmlFor: props.id,
+        "data-toggle": true,
+        children: jsxRuntime.jsx(icons.ClockIcon, {
+          color: props.isDisabled || props.isReadOnly ? 'neutral60' : 'solid'
+        })
+      })]
+    })
+  });
 };
 
 TimeInputBody.displayName = 'TimeInputBody';
@@ -220,13 +225,16 @@ var messages = reactIntl.defineMessages({
   }
 });
 
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](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) { var _context6; _forEachInstanceProperty__default["default"](_context6 = ownKeys(Object(source), true)).call(_context6, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context7; _forEachInstanceProperty__default["default"](_context7 = ownKeys(Object(source))).call(_context7, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
 var sequentialId = utils.createSequentialId('time-input-');
 
 var leftPad = function leftPad(value) {
   var _context;
 
   var length = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
-  return _padStartInstanceProperty__default['default'](_context = String(value)).call(_context, length, '0');
+  return _padStartInstanceProperty__default["default"](_context = String(value)).call(_context, length, '0');
 };
 
 var format24hr = function format24hr(_ref) {
@@ -237,12 +245,12 @@ var format24hr = function format24hr(_ref) {
       seconds = _ref.seconds,
       milliseconds = _ref.milliseconds;
 
-  var base = _concatInstanceProperty__default['default'](_context2 = "".concat(leftPad(hours), ":")).call(_context2, leftPad(minutes));
+  var base = _concatInstanceProperty__default["default"](_context2 = "".concat(leftPad(hours), ":")).call(_context2, leftPad(minutes));
 
   if (seconds === 0 && milliseconds === 0) return base;
-  if (milliseconds === 0) return _concatInstanceProperty__default['default'](_context3 = "".concat(base, ":")).call(_context3, leftPad(seconds)); // string representation of a time without timezone in ISO 8601 format
+  if (milliseconds === 0) return _concatInstanceProperty__default["default"](_context3 = "".concat(base, ":")).call(_context3, leftPad(seconds)); // string representation of a time without timezone in ISO 8601 format
 
-  return _concatInstanceProperty__default['default'](_context4 = _concatInstanceProperty__default['default'](_context5 = "".concat(base, ":")).call(_context5, leftPad(seconds), ".")).call(_context4, leftPad(milliseconds, 3));
+  return _concatInstanceProperty__default["default"](_context4 = _concatInstanceProperty__default["default"](_context5 = "".concat(base, ":")).call(_context5, leftPad(seconds), ".")).call(_context4, leftPad(milliseconds, 3));
 };
 
 var hasMilliseconds = function hasMilliseconds(parsedTime) {
@@ -257,7 +265,7 @@ var TimeInput = function TimeInput(props) {
       value = props.value,
       onBlur = props.onBlur,
       onChange = props.onChange;
-  var emitChange = React__default['default'].useCallback(function (nextValue) {
+  var emitChange = react$1.useCallback(function (nextValue) {
     var event = {
       target: {
         id: id,
@@ -267,14 +275,14 @@ var TimeInput = function TimeInput(props) {
     };
     onChange(event);
   }, [id, name, onChange]);
-  var handleBlur = React__default['default'].useCallback(function (event) {
+  var handleBlur = react$1.useCallback(function (event) {
     // check formatting and reformat when necessary
     var formattedTime = TimeInput.toLocaleTime(value, intl.locale);
     if (formattedTime !== value) emitChange(formattedTime); // forward the onBlur call
 
     if (onBlur) onBlur(event);
   }, [intl.locale, value, onBlur, emitChange]);
-  var onClear = React__default['default'].useCallback(function () {
+  var onClear = react$1.useCallback(function () {
     return emitChange('');
   }, [emitChange]); // if locale has changed
 
@@ -282,23 +290,24 @@ var TimeInput = function TimeInput(props) {
     emitChange(TimeInput.toLocaleTime(value, intl.locale));
   }
 
-  return react.jsx(Constraints__default['default'].Horizontal, {
-    max: props.horizontalConstraint
-  }, react.jsx(TimeInputBody$1, _extends({
-    id: id,
-    name: props.name,
-    autoComplete: props.autoComplete,
-    value: props.value,
-    onChange: props.onChange,
-    onFocus: props.onFocus,
-    onBlur: handleBlur,
-    isAutofocussed: props.isAutofocussed,
-    isDisabled: props.isDisabled,
-    hasError: props.hasError,
-    isReadOnly: props.isReadOnly,
-    onClear: onClear,
-    placeholder: typeof props.placeholder === 'string' ? props.placeholder : intl.formatMessage(messages.placeholder)
-  }, utils.filterDataAttributes(props))));
+  return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
+    max: props.horizontalConstraint,
+    children: jsxRuntime.jsx(TimeInputBody$1, _objectSpread({
+      id: id,
+      name: props.name,
+      autoComplete: props.autoComplete,
+      value: props.value,
+      onChange: props.onChange,
+      onFocus: props.onFocus,
+      onBlur: handleBlur,
+      isAutofocussed: props.isAutofocussed,
+      isDisabled: props.isDisabled,
+      hasError: props.hasError,
+      isReadOnly: props.isReadOnly,
+      onClear: onClear,
+      placeholder: typeof props.placeholder === 'string' ? props.placeholder : intl.formatMessage(messages.placeholder)
+    }, utils.filterDataAttributes(props)))
+  });
 };
 
 TimeInput.displayName = 'TimeInput'; // Takes any input like 15:10, 3 AM, 3AM, 3:15AM, 3:5AM and turns it
@@ -339,8 +348,8 @@ TimeInput.toLocaleTime = function (time, locale) {
 
 var TimeInput$1 = TimeInput;
 
-// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
-var version = '12.2.2';
+// NOTE: This string will be replaced on build time with the package version.
+var version = "12.2.6";
 
-exports['default'] = TimeInput$1;
+exports["default"] = TimeInput$1;
 exports.version = version;