@commercetools-uikit/time-input 14.0.0 → 14.0.3

package/README.md

@@ -49,23 +49,15 @@ export default Example;
 | `name`                 | `string`                                                                                              |          |           | Used as HTML name of the input component.                                                      |
 | `autoComplete`         | `string`                                                                                              |          |           | Used as HTML autocomplete of the input component.                                              |
 | `value`                | `string`                                                                                              |          |           | Value of the input                                                                             |
-| `onChange`             | `Function`<br/>[See signature.](#signature-onChange)                                                  |    ✅    |           | Called with an event holding the new value.                                                    |
-| `onBlur`               | `FocusEventHandler`                                                                                   |          |           | Called when input is blurred&#xA;<br/>                                                         |
-| `onFocus`              | `FocusEventHandler`                                                                                   |          |           | Called when input is focused&#xA;<br/>&#xA;Signature: `(event) => void`                        |
+| `onChange`             | `ChangeEventHandler`                                                                                  |          |           | Called with an event holding the new value.                                                    |
+| `onBlur`               | `FocusEventHandler`                                                                                   |          |           | Called when input is blurred                                                                   |
+| `onFocus`              | `FocusEventHandler`                                                                                   |          |           | Called when input is focused                                                                   |
 | `isAutofocussed`       | `boolean`                                                                                             |          |           | Focus the input on initial render                                                              |
 | `isDisabled`           | `boolean`                                                                                             |          |           | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). |
 | `placeholder`          | `string`                                                                                              |          |           | Placeholder text for the input                                                                 |
 | `hasError`             | `boolean`                                                                                             |          |           | Indicates if the input has invalid values                                                      |
 | `isReadOnly`           | `boolean`                                                                                             |          |           | Indicates that the field is displaying read-only content                                       |
 
-## Signatures
-
-### Signature `onChange`
-
-```ts
-(event: TEvent) => void
-```
-
 ## `value`
 
 The value after the field has been blurred is always either valid or an empty string. The input automatically formats the value on blur by calling `onChange` with the formatted value - or with an empty value in case the input was not a valid time.

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
 var _pt = require('prop-types');
 var _padStartInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/pad-start');
 var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
@@ -190,14 +191,14 @@ ClearSection.propTypes = process.env.NODE_ENV !== "production" ? {
   onClear: _pt__default["default"].func.isRequired
 } : {};
 ClearSection.displayName = 'ClearSection';
-
-var TimeInputBody = function TimeInputBody(props) {
+var TimeInputBody = /*#__PURE__*/react$1.forwardRef(function (props, ref) {
   var theme = react.useTheme();
   return jsxRuntime.jsx(Inline__default["default"], {
     alignItems: "center",
     children: jsxRuntime.jsxs(StyledInputContainer, {
       css: getInputContainerStyles(props, theme),
       children: [jsxRuntime.jsx("input", _objectSpread$1(_objectSpread$1({
+        ref: ref,
         css: getTimeInputStyles(props),
         id: props.id,
         name: props.name,
@@ -232,11 +233,7 @@ var TimeInputBody = function TimeInputBody(props) {
       })]
     })
   });
-};
-
-TimeInputBody.propTypes = process.env.NODE_ENV !== "production" ? {
-  onClear: _pt__default["default"].func.isRequired
-} : {};
+});
 TimeInputBody.displayName = 'TimeInputBody';
 var TimeInputBody$1 = TimeInputBody;
 
@@ -283,51 +280,60 @@ var hasMilliseconds = function hasMilliseconds(parsedTime) {
 var TimeInput = function TimeInput(props) {
   var id = hooks.useFieldId(props.id, sequentialId);
   var intl = reactIntl.useIntl();
-  var prevLocale = hooks.usePrevious(intl.locale);
-  var name = props.name,
-      value = props.value,
-      onBlur = props.onBlur,
-      onChange = props.onChange;
-  var emitChange = react$1.useCallback(function (nextValue) {
-    var event = {
-      target: {
-        id: id,
-        name: name,
-        value: nextValue
-      }
-    };
-    onChange(event);
-  }, [id, name, onChange]);
-  var handleBlur = react$1.useCallback(function (event) {
-    // check formatting and reformat when necessary
-    var formattedTime = value && 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$1.useCallback(function () {
-    return emitChange('');
-  }, [emitChange]); // if locale has changed
-
-  if (typeof prevLocale !== 'undefined' && prevLocale !== intl.locale) {
-    emitChange(TimeInput.toLocaleTime(value, intl.locale));
+  var element = react$1.useRef(null); // Keep internal state to allow clearing the value manually (`onClear`).
+
+  var _useState = react$1.useState(props.value),
+      _useState2 = _slicedToArray(_useState, 2),
+      controlledValue = _useState2[0],
+      setControlledValue = _useState2[1];
+
+  if (!props.isReadOnly) {
+    process.env.NODE_ENV !== "production" ? utils.warning(typeof props.onChange === 'function', 'TimeInput: `onChange` is required when input is not read only.') : void 0;
   }
 
+  var onBlur = props.onBlur,
+      onChange = props.onChange;
+  var handleChange = react$1.useCallback(function (event) {
+    var rawValue = event.target.value;
+    setControlledValue(rawValue);
+    var formattedValue = TimeInput.toLocaleTime(rawValue, intl.locale);
+    event.target.value = formattedValue;
+    onChange === null || onChange === void 0 ? void 0 : onChange(event);
+  }, [intl.locale, onChange]);
+  var handleBlur = react$1.useCallback(function (event) {
+    var rawValue = event.target.value;
+    var formattedValue = TimeInput.toLocaleTime(rawValue, intl.locale);
+    event.target.value = formattedValue;
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+  }, [intl.locale, onBlur]);
+  var handleClear = react$1.useCallback(function () {
+    var _element$current;
+
+    setControlledValue('');
+    (_element$current = element.current) === null || _element$current === void 0 ? void 0 : _element$current.dispatchEvent(new Event('change'));
+  }, []); // if locale has changed trigger a new change event
+
+  react$1.useEffect(function () {
+    var _element$current2;
+
+    (_element$current2 = element.current) === null || _element$current2 === void 0 ? void 0 : _element$current2.dispatchEvent(new Event('change'));
+  }, [intl.locale]);
   return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
     max: props.horizontalConstraint,
     children: jsxRuntime.jsx(TimeInputBody$1, _objectSpread(_objectSpread({
+      ref: element,
       id: id,
       name: props.name,
       autoComplete: props.autoComplete,
-      value: props.value,
-      onChange: props.onChange,
-      onFocus: props.onFocus,
+      value: controlledValue,
+      onChange: handleChange,
       onBlur: handleBlur,
+      onFocus: props.onFocus,
       isAutofocussed: props.isAutofocussed,
       isDisabled: props.isDisabled,
       hasError: props.hasError,
       isReadOnly: props.isReadOnly,
-      onClear: onClear,
+      onClear: handleClear,
       placeholder: typeof props.placeholder === 'string' ? props.placeholder : intl.formatMessage(messages.placeholder)
     }, utils.filterDataAttributes(props)), {}, {
       /* ARIA */
@@ -345,7 +351,7 @@ TimeInput.propTypes = process.env.NODE_ENV !== "production" ? {
   name: _pt__default["default"].string,
   autoComplete: _pt__default["default"].string,
   value: _pt__default["default"].string,
-  onChange: _pt__default["default"].func.isRequired,
+  onChange: _pt__default["default"].func,
   onBlur: _pt__default["default"].func,
   onFocus: _pt__default["default"].func,
   isAutofocussed: _pt__default["default"].bool,
@@ -392,7 +398,7 @@ TimeInput.toLocaleTime = function (time, locale) {
 var TimeInput$1 = TimeInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "14.0.0";
+var version = "14.0.3";
 
 exports["default"] = TimeInput$1;
 exports.version = version;

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
 require('prop-types');
 var _padStartInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/pad-start');
 var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
@@ -171,14 +172,14 @@ var ClearSection = function ClearSection(props) {
 };
 ClearSection.propTypes = {};
 ClearSection.displayName = 'ClearSection';
-
-var TimeInputBody = function TimeInputBody(props) {
+var TimeInputBody = /*#__PURE__*/react$1.forwardRef(function (props, ref) {
   var theme = react.useTheme();
   return jsxRuntime.jsx(Inline__default["default"], {
     alignItems: "center",
     children: jsxRuntime.jsxs(StyledInputContainer, {
       css: getInputContainerStyles(props, theme),
       children: [jsxRuntime.jsx("input", _objectSpread$1(_objectSpread$1({
+        ref: ref,
         css: getTimeInputStyles(props),
         id: props.id,
         name: props.name,
@@ -213,9 +214,7 @@ var TimeInputBody = function TimeInputBody(props) {
       })]
     })
   });
-};
-
-TimeInputBody.propTypes = {};
+});
 TimeInputBody.displayName = 'TimeInputBody';
 var TimeInputBody$1 = TimeInputBody;
 
@@ -262,51 +261,58 @@ var hasMilliseconds = function hasMilliseconds(parsedTime) {
 var TimeInput = function TimeInput(props) {
   var id = hooks.useFieldId(props.id, sequentialId);
   var intl = reactIntl.useIntl();
-  var prevLocale = hooks.usePrevious(intl.locale);
-  var name = props.name,
-      value = props.value,
-      onBlur = props.onBlur,
+  var element = react$1.useRef(null); // Keep internal state to allow clearing the value manually (`onClear`).
+
+  var _useState = react$1.useState(props.value),
+      _useState2 = _slicedToArray(_useState, 2),
+      controlledValue = _useState2[0],
+      setControlledValue = _useState2[1];
+
+  if (!props.isReadOnly) ;
+
+  var onBlur = props.onBlur,
       onChange = props.onChange;
-  var emitChange = react$1.useCallback(function (nextValue) {
-    var event = {
-      target: {
-        id: id,
-        name: name,
-        value: nextValue
-      }
-    };
-    onChange(event);
-  }, [id, name, onChange]);
+  var handleChange = react$1.useCallback(function (event) {
+    var rawValue = event.target.value;
+    setControlledValue(rawValue);
+    var formattedValue = TimeInput.toLocaleTime(rawValue, intl.locale);
+    event.target.value = formattedValue;
+    onChange === null || onChange === void 0 ? void 0 : onChange(event);
+  }, [intl.locale, onChange]);
   var handleBlur = react$1.useCallback(function (event) {
-    // check formatting and reformat when necessary
-    var formattedTime = value && 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$1.useCallback(function () {
-    return emitChange('');
-  }, [emitChange]); // if locale has changed
-
-  if (typeof prevLocale !== 'undefined' && prevLocale !== intl.locale) {
-    emitChange(TimeInput.toLocaleTime(value, intl.locale));
-  }
-
+    var rawValue = event.target.value;
+    var formattedValue = TimeInput.toLocaleTime(rawValue, intl.locale);
+    event.target.value = formattedValue;
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+  }, [intl.locale, onBlur]);
+  var handleClear = react$1.useCallback(function () {
+    var _element$current;
+
+    setControlledValue('');
+    (_element$current = element.current) === null || _element$current === void 0 ? void 0 : _element$current.dispatchEvent(new Event('change'));
+  }, []); // if locale has changed trigger a new change event
+
+  react$1.useEffect(function () {
+    var _element$current2;
+
+    (_element$current2 = element.current) === null || _element$current2 === void 0 ? void 0 : _element$current2.dispatchEvent(new Event('change'));
+  }, [intl.locale]);
   return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
     max: props.horizontalConstraint,
     children: jsxRuntime.jsx(TimeInputBody$1, _objectSpread(_objectSpread({
+      ref: element,
       id: id,
       name: props.name,
       autoComplete: props.autoComplete,
-      value: props.value,
-      onChange: props.onChange,
-      onFocus: props.onFocus,
+      value: controlledValue,
+      onChange: handleChange,
       onBlur: handleBlur,
+      onFocus: props.onFocus,
       isAutofocussed: props.isAutofocussed,
       isDisabled: props.isDisabled,
       hasError: props.hasError,
       isReadOnly: props.isReadOnly,
-      onClear: onClear,
+      onClear: handleClear,
       placeholder: typeof props.placeholder === 'string' ? props.placeholder : intl.formatMessage(messages.placeholder)
     }, utils.filterDataAttributes(props)), {}, {
       /* ARIA */
@@ -355,7 +361,7 @@ TimeInput.toLocaleTime = function (time, locale) {
 var TimeInput$1 = TimeInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "14.0.0";
+var version = "14.0.3";
 
 exports["default"] = TimeInput$1;
 exports.version = version;

package/dist/commercetools-uikit-time-input.esm.js

@@ -1,4 +1,5 @@
 import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
+import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
 import _pt from 'prop-types';
 import _padStartInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/pad-start';
 import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
@@ -10,11 +11,11 @@ import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/inst
 import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
 import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
 import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
-import { useCallback } from 'react';
+import { forwardRef, useRef, useState, useCallback, useEffect } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import Constraints from '@commercetools-uikit/constraints';
-import { filterDataAttributes, createSequentialId, parseTime } from '@commercetools-uikit/utils';
-import { useFieldId, usePrevious } from '@commercetools-uikit/hooks';
+import { filterDataAttributes, createSequentialId, warning, parseTime } from '@commercetools-uikit/utils';
+import { useFieldId } from '@commercetools-uikit/hooks';
 import { css, useTheme } from '@emotion/react';
 import { ClockIcon, CloseIcon } from '@commercetools-uikit/icons';
 import Inline from '@commercetools-uikit/spacings-inline';
@@ -168,14 +169,14 @@ ClearSection.propTypes = process.env.NODE_ENV !== "production" ? {
   onClear: _pt.func.isRequired
 } : {};
 ClearSection.displayName = 'ClearSection';
-
-var TimeInputBody = function TimeInputBody(props) {
+var TimeInputBody = /*#__PURE__*/forwardRef(function (props, ref) {
   var theme = useTheme();
   return jsx(Inline, {
     alignItems: "center",
     children: jsxs(StyledInputContainer, {
       css: getInputContainerStyles(props, theme),
       children: [jsx("input", _objectSpread$1(_objectSpread$1({
+        ref: ref,
         css: getTimeInputStyles(props),
         id: props.id,
         name: props.name,
@@ -210,11 +211,7 @@ var TimeInputBody = function TimeInputBody(props) {
       })]
     })
   });
-};
-
-TimeInputBody.propTypes = process.env.NODE_ENV !== "production" ? {
-  onClear: _pt.func.isRequired
-} : {};
+});
 TimeInputBody.displayName = 'TimeInputBody';
 var TimeInputBody$1 = TimeInputBody;
 
@@ -261,51 +258,60 @@ var hasMilliseconds = function hasMilliseconds(parsedTime) {
 var TimeInput = function TimeInput(props) {
   var id = useFieldId(props.id, sequentialId);
   var intl = useIntl();
-  var prevLocale = usePrevious(intl.locale);
-  var name = props.name,
-      value = props.value,
-      onBlur = props.onBlur,
-      onChange = props.onChange;
-  var emitChange = useCallback(function (nextValue) {
-    var event = {
-      target: {
-        id: id,
-        name: name,
-        value: nextValue
-      }
-    };
-    onChange(event);
-  }, [id, name, onChange]);
-  var handleBlur = useCallback(function (event) {
-    // check formatting and reformat when necessary
-    var formattedTime = value && 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 = useCallback(function () {
-    return emitChange('');
-  }, [emitChange]); // if locale has changed
-
-  if (typeof prevLocale !== 'undefined' && prevLocale !== intl.locale) {
-    emitChange(TimeInput.toLocaleTime(value, intl.locale));
+  var element = useRef(null); // Keep internal state to allow clearing the value manually (`onClear`).
+
+  var _useState = useState(props.value),
+      _useState2 = _slicedToArray(_useState, 2),
+      controlledValue = _useState2[0],
+      setControlledValue = _useState2[1];
+
+  if (!props.isReadOnly) {
+    process.env.NODE_ENV !== "production" ? warning(typeof props.onChange === 'function', 'TimeInput: `onChange` is required when input is not read only.') : void 0;
   }
 
+  var onBlur = props.onBlur,
+      onChange = props.onChange;
+  var handleChange = useCallback(function (event) {
+    var rawValue = event.target.value;
+    setControlledValue(rawValue);
+    var formattedValue = TimeInput.toLocaleTime(rawValue, intl.locale);
+    event.target.value = formattedValue;
+    onChange === null || onChange === void 0 ? void 0 : onChange(event);
+  }, [intl.locale, onChange]);
+  var handleBlur = useCallback(function (event) {
+    var rawValue = event.target.value;
+    var formattedValue = TimeInput.toLocaleTime(rawValue, intl.locale);
+    event.target.value = formattedValue;
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+  }, [intl.locale, onBlur]);
+  var handleClear = useCallback(function () {
+    var _element$current;
+
+    setControlledValue('');
+    (_element$current = element.current) === null || _element$current === void 0 ? void 0 : _element$current.dispatchEvent(new Event('change'));
+  }, []); // if locale has changed trigger a new change event
+
+  useEffect(function () {
+    var _element$current2;
+
+    (_element$current2 = element.current) === null || _element$current2 === void 0 ? void 0 : _element$current2.dispatchEvent(new Event('change'));
+  }, [intl.locale]);
   return jsx(Constraints.Horizontal, {
     max: props.horizontalConstraint,
     children: jsx(TimeInputBody$1, _objectSpread(_objectSpread({
+      ref: element,
       id: id,
       name: props.name,
       autoComplete: props.autoComplete,
-      value: props.value,
-      onChange: props.onChange,
-      onFocus: props.onFocus,
+      value: controlledValue,
+      onChange: handleChange,
       onBlur: handleBlur,
+      onFocus: props.onFocus,
       isAutofocussed: props.isAutofocussed,
       isDisabled: props.isDisabled,
       hasError: props.hasError,
       isReadOnly: props.isReadOnly,
-      onClear: onClear,
+      onClear: handleClear,
       placeholder: typeof props.placeholder === 'string' ? props.placeholder : intl.formatMessage(messages.placeholder)
     }, filterDataAttributes(props)), {}, {
       /* ARIA */
@@ -323,7 +329,7 @@ TimeInput.propTypes = process.env.NODE_ENV !== "production" ? {
   name: _pt.string,
   autoComplete: _pt.string,
   value: _pt.string,
-  onChange: _pt.func.isRequired,
+  onChange: _pt.func,
   onBlur: _pt.func,
   onFocus: _pt.func,
   isAutofocussed: _pt.bool,
@@ -370,6 +376,6 @@ TimeInput.toLocaleTime = function (time, locale) {
 var TimeInput$1 = TimeInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "14.0.0";
+var version = "14.0.3";
 
 export { TimeInput$1 as default, version };

package/dist/declarations/src/time-input-body.d.ts

@@ -1,8 +1,5 @@
-import type { KeyboardEvent, MouseEvent } from 'react';
+import { type KeyboardEvent, type MouseEvent } from 'react';
 import type { TTimeInputProps } from './time-input';
-declare type TTimeInputBodyProps = TTimeInputProps & {
-    onClear: (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
-};
 declare type TClearSectionProps = {
     isDisabled?: boolean;
     hasError?: boolean;
@@ -13,8 +10,7 @@ export declare const ClearSection: {
     (props: TClearSectionProps): import("@emotion/react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-declare const TimeInputBody: {
-    (props: TTimeInputBodyProps): import("@emotion/react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const TimeInputBody: import("react").ForwardRefExoticComponent<TTimeInputProps & {
+    onClear: (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
+} & import("react").RefAttributes<HTMLInputElement>>;
 export default TimeInputBody;

package/dist/declarations/src/time-input.d.ts

@@ -1,11 +1,4 @@
-import { type FocusEventHandler } from 'react';
-declare type TEvent = {
-    target: {
-        id: string;
-        name?: string;
-        value: unknown;
-    };
-};
+import { type FocusEventHandler, type ChangeEventHandler } from 'react';
 export declare type TTimeInputProps = {
     id?: string;
     'aria-invalid'?: boolean;
@@ -14,9 +7,9 @@ export declare type TTimeInputProps = {
     name?: string;
     autoComplete?: string;
     value?: string;
-    onChange: (event: TEvent) => void;
-    onBlur?: FocusEventHandler;
-    onFocus?: FocusEventHandler;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
     isAutofocussed?: boolean;
     isDisabled?: boolean;
     placeholder?: string;
@@ -30,6 +23,6 @@ declare const TimeInput: {
     defaultProps: {
         horizontalConstraint: string;
     };
-    toLocaleTime(time: string, locale: string): string;
+    toLocaleTime(time: string | undefined, locale: string): string;
 };
 export default TimeInput;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/time-input",
   "description": "The TimeInput component allows the user to select a time.",
-  "version": "14.0.0",
+  "version": "14.0.3",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -21,14 +21,14 @@
   "dependencies": {
     "@babel/runtime": "^7.17.2",
     "@babel/runtime-corejs3": "^7.17.2",
-    "@commercetools-uikit/accessible-button": "14.0.0",
-    "@commercetools-uikit/constraints": "14.0.0",
+    "@commercetools-uikit/accessible-button": "14.0.1",
+    "@commercetools-uikit/constraints": "14.0.1",
     "@commercetools-uikit/design-system": "14.0.0",
-    "@commercetools-uikit/hooks": "14.0.0",
-    "@commercetools-uikit/icons": "14.0.0",
-    "@commercetools-uikit/input-utils": "14.0.0",
-    "@commercetools-uikit/spacings-inline": "14.0.0",
-    "@commercetools-uikit/utils": "14.0.0",
+    "@commercetools-uikit/hooks": "14.0.3",
+    "@commercetools-uikit/icons": "14.0.1",
+    "@commercetools-uikit/input-utils": "14.0.2",
+    "@commercetools-uikit/spacings-inline": "14.0.1",
+    "@commercetools-uikit/utils": "14.0.1",
     "@emotion/is-prop-valid": "1.1.2",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",