colibri-ui 0.8.84 → 0.8.87

package/CodeField/CodeField.js

@@ -1,174 +1,127 @@
 'use strict';
 
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var tslib = require('tslib');
 var React = require('react');
 var styles = require('./CodeField.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
 var React__default = /*#__PURE__*/_interopDefault(React);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-var ONLY_DIGITS_PATTERN = "^\\d+$";
-var ONLY_CHARS_PATTERN = "^[a-zA-Z]+$";
-var ONLY_DIGITS_AND_CHARS_PATTERN = "^[a-zA-Z0-9]+$";
-var cx = function cx() {
-  for (var _len = arguments.length, classNames = new Array(_len), _key = 0; _key < _len; _key++) {
-    classNames[_key] = arguments[_key];
-  }
-  return classNames.filter(Boolean).join(" ");
-};
-var getPattern = function getPattern(pattern) {
-  return typeof pattern === "string" ? new RegExp(pattern) : pattern;
-};
-var testSymbol = function testSymbol(pattern, symbol) {
+const ONLY_DIGITS_PATTERN = "^\\d+$";
+const ONLY_CHARS_PATTERN = "^[a-zA-Z]+$";
+const ONLY_DIGITS_AND_CHARS_PATTERN = "^[a-zA-Z0-9]+$";
+const cx = (...classNames) => classNames.filter(Boolean).join(" ");
+const getPattern = pattern => typeof pattern === "string" ? new RegExp(pattern) : pattern;
+const testSymbol = (pattern, symbol) => {
   pattern.lastIndex = 0;
   return pattern.test(symbol);
 };
-var getPlaceholder = function getPlaceholder(placeholder, length) {
+const getPlaceholder = (placeholder, length) => {
   if (!placeholder) return [];
   return placeholder.length === 1 ? Array(length).fill(placeholder) : placeholder.slice(0, length).split("");
 };
-var CodeField = /*#__PURE__*/React.forwardRef(function CodeFieldComponent(_a, forwardedRef) {
+const CodeField = /*#__PURE__*/React.forwardRef(function CodeFieldComponent(_a, forwardedRef) {
   var _b;
-  var value = _a.value,
-    placeholder = _a.placeholder,
-    _a$codeLength = _a.codeLength,
-    codeLength = _a$codeLength === void 0 ? 6 : _a$codeLength,
-    caption = _a.caption,
-    _a$captionAlign = _a.captionAlign,
-    captionAlign = _a$captionAlign === void 0 ? "left" : _a$captionAlign,
-    width = _a.width,
-    _a$view = _a.view,
-    view = _a$view === void 0 ? "default" : _a$view,
-    _a$shape = _a.shape,
-    shape = _a$shape === void 0 ? "default" : _a$shape,
-    _a$size = _a.size,
-    size = _a$size === void 0 ? "l" : _a$size,
-    _a$disabled = _a.disabled,
-    disabled = _a$disabled === void 0 ? false : _a$disabled,
-    _a$isError = _a.isError,
-    isError = _a$isError === void 0 ? false : _a$isError,
-    setIsError = _a.setIsError,
-    _a$allowedSymbols = _a.allowedSymbols,
-    allowedSymbols = _a$allowedSymbols === void 0 ? ONLY_DIGITS_PATTERN : _a$allowedSymbols,
-    _a$itemErrorBehavior = _a.itemErrorBehavior,
-    itemErrorBehavior = _a$itemErrorBehavior === void 0 ? "remove-symbol" : _a$itemErrorBehavior,
-    _a$codeErrorBehavior = _a.codeErrorBehavior,
-    codeErrorBehavior = _a$codeErrorBehavior === void 0 ? "remove-code" : _a$codeErrorBehavior,
-    _a$autoComplete = _a.autoComplete,
-    autoComplete = _a$autoComplete === void 0 ? "one-time-code" : _a$autoComplete,
-    _a$inputMode = _a.inputMode,
-    inputMode = _a$inputMode === void 0 ? "numeric" : _a$inputMode,
-    autoFocus = _a.autoFocus,
-    className = _a.className,
-    style = _a.style,
-    onChange = _a.onChange,
-    onFullCodeEnter = _a.onFullCodeEnter,
-    onClick = _a.onClick,
-    _onFocus = _a.onFocus,
-    _onBlur = _a.onBlur,
-    _onSelect = _a.onSelect,
-    _onPaste = _a.onPaste,
-    _onKeyDown = _a.onKeyDown,
+  var {
+      value,
+      placeholder,
+      codeLength = 6,
+      caption,
+      captionAlign = "left",
+      width,
+      view = "default",
+      shape = "default",
+      size = "l",
+      disabled = false,
+      isError = false,
+      setIsError,
+      allowedSymbols = ONLY_DIGITS_PATTERN,
+      itemErrorBehavior = "remove-symbol",
+      codeErrorBehavior = "remove-code",
+      autoComplete = "one-time-code",
+      inputMode = "numeric",
+      autoFocus,
+      className,
+      style,
+      onChange,
+      onFullCodeEnter,
+      onClick,
+      onFocus,
+      onBlur,
+      onSelect,
+      onPaste,
+      onKeyDown
+    } = _a,
     inputProps = tslib.__rest(_a, ["value", "placeholder", "codeLength", "caption", "captionAlign", "width", "view", "shape", "size", "disabled", "isError", "setIsError", "allowedSymbols", "itemErrorBehavior", "codeErrorBehavior", "autoComplete", "inputMode", "autoFocus", "className", "style", "onChange", "onFullCodeEnter", "onClick", "onFocus", "onBlur", "onSelect", "onPaste", "onKeyDown"]);
-  var inputRef = React.useRef(null);
-  var _useState = React.useState((_b = value === null || value === void 0 ? void 0 : value.slice(0, codeLength)) !== null && _b !== void 0 ? _b : ""),
-    _useState2 = _slicedToArray__default.default(_useState, 2),
-    internalValue = _useState2[0],
-    setInternalValue = _useState2[1];
-  var _useState3 = React.useState(null),
-    _useState4 = _slicedToArray__default.default(_useState3, 2),
-    activeIndex = _useState4[0],
-    setActiveIndex = _useState4[1];
-  var _useState5 = React.useState(null),
-    _useState6 = _slicedToArray__default.default(_useState5, 2),
-    selectedIndex = _useState6[0],
-    setSelectedIndex = _useState6[1];
-  var _useState7 = React.useState(null),
-    _useState8 = _slicedToArray__default.default(_useState7, 2),
-    invalidIndex = _useState8[0],
-    setInvalidIndex = _useState8[1];
-  var _useState9 = React.useState(false),
-    _useState0 = _slicedToArray__default.default(_useState9, 2),
-    shaking = _useState0[0],
-    setShaking = _useState0[1];
-  var completedCode = React.useRef(null);
-  var fullCodeEffectMounted = React.useRef(false);
-  var errorEffectMounted = React.useRef(false);
-  var timerRef = React.useRef(null);
-  var pattern = React.useMemo(function () {
-    return getPattern(allowedSymbols);
-  }, [allowedSymbols]);
-  var currentValue = value === undefined ? internalValue : value.slice(0, codeLength);
-  var placeholders = getPlaceholder(placeholder, codeLength);
-  var items = Array.from({
+  const inputRef = React.useRef(null);
+  const [internalValue, setInternalValue] = React.useState((_b = value === null || value === void 0 ? void 0 : value.slice(0, codeLength)) !== null && _b !== void 0 ? _b : "");
+  const [activeIndex, setActiveIndex] = React.useState(null);
+  const [selectedIndex, setSelectedIndex] = React.useState(null);
+  const [invalidIndex, setInvalidIndex] = React.useState(null);
+  const [shaking, setShaking] = React.useState(false);
+  const completedCode = React.useRef(null);
+  const fullCodeEffectMounted = React.useRef(false);
+  const errorEffectMounted = React.useRef(false);
+  const timerRef = React.useRef(null);
+  const pattern = React.useMemo(() => getPattern(allowedSymbols), [allowedSymbols]);
+  const currentValue = value === undefined ? internalValue : value.slice(0, codeLength);
+  const placeholders = getPlaceholder(placeholder, codeLength);
+  const items = Array.from({
     length: codeLength
-  }, function (_, index) {
+  }, (_, index) => {
     var _a;
     return (_a = currentValue[index]) !== null && _a !== void 0 ? _a : "";
   });
-  var setInputRef = function setInputRef(element) {
+  const setInputRef = element => {
     inputRef.current = element;
     if (typeof forwardedRef === "function") forwardedRef(element);else if (forwardedRef) forwardedRef.current = element;
   };
-  var publishValue = React.useCallback(function (nextValue) {
-    var normalized = nextValue.slice(0, codeLength);
+  const publishValue = React.useCallback(nextValue => {
+    const normalized = nextValue.slice(0, codeLength);
     if (value === undefined) setInternalValue(normalized);
     onChange === null || onChange === void 0 ? void 0 : onChange(normalized);
   }, [codeLength, onChange, value]);
-  var selectPosition = React.useCallback(function (position) {
-    var end = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : position;
-    var input = inputRef.current;
+  const selectPosition = React.useCallback((position, end = position) => {
+    const input = inputRef.current;
     if (!input) return;
-    var safePosition = Math.min(position, currentValue.length, codeLength);
+    const safePosition = Math.min(position, currentValue.length, codeLength);
     input.setSelectionRange(safePosition, Math.min(end, currentValue.length));
     setActiveIndex(Math.min(safePosition, codeLength - 1));
     setSelectedIndex(safePosition < end ? Math.min(safePosition, codeLength - 1) : null);
   }, [codeLength, currentValue.length]);
-  var clearError = React.useCallback(function () {
+  const clearError = React.useCallback(() => {
     setInvalidIndex(null);
     setShaking(false);
     if (isError) setIsError === null || setIsError === void 0 ? void 0 : setIsError(false);
   }, [isError, setIsError]);
-  var showTemporaryItemError = React.useCallback(function (rawValue, index) {
+  const showTemporaryItemError = React.useCallback((rawValue, index) => {
     if (timerRef.current) clearTimeout(timerRef.current);
     setInvalidIndex(index);
     setShaking(true);
     if (itemErrorBehavior === "keep") {
       publishValue(rawValue);
-      timerRef.current = setTimeout(function () {
-        return setShaking(false);
-      }, 300);
+      timerRef.current = setTimeout(() => setShaking(false), 300);
       return;
     }
     if (value === undefined) setInternalValue(rawValue);
     onChange === null || onChange === void 0 ? void 0 : onChange(rawValue);
-    timerRef.current = setTimeout(function () {
-      var cleaned = rawValue.split("").filter(function (symbol) {
-        return testSymbol(pattern, symbol);
-      }).join("");
+    timerRef.current = setTimeout(() => {
+      const cleaned = rawValue.split("").filter(symbol => testSymbol(pattern, symbol)).join("");
       setInvalidIndex(null);
       setShaking(false);
       publishValue(cleaned);
-      requestAnimationFrame(function () {
-        return selectPosition(index);
-      });
+      requestAnimationFrame(() => selectPosition(index));
     }, 300);
   }, [itemErrorBehavior, onChange, pattern, publishValue, selectPosition, value]);
-  React.useEffect(function () {
-    if (value === undefined) setInternalValue(function (current) {
-      return current.slice(0, codeLength);
-    });
+  React.useEffect(() => {
+    if (value === undefined) setInternalValue(current => current.slice(0, codeLength));
   }, [codeLength, value]);
-  React.useEffect(function () {
-    return function () {
-      if (timerRef.current) clearTimeout(timerRef.current);
-    };
+  React.useEffect(() => () => {
+    if (timerRef.current) clearTimeout(timerRef.current);
   }, []);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (!fullCodeEffectMounted.current) {
       fullCodeEffectMounted.current = true;
       return;
@@ -182,7 +135,7 @@ var CodeField = /*#__PURE__*/React.forwardRef(function CodeFieldComponent(_a, fo
       onFullCodeEnter === null || onFullCodeEnter === void 0 ? void 0 : onFullCodeEnter(currentValue);
     }
   }, [codeLength, currentValue, onFullCodeEnter]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (!errorEffectMounted.current) {
       errorEffectMounted.current = true;
       return;
@@ -190,25 +143,25 @@ var CodeField = /*#__PURE__*/React.forwardRef(function CodeFieldComponent(_a, fo
     if (!isError) return;
     setShaking(true);
     if (timerRef.current) clearTimeout(timerRef.current);
-    timerRef.current = setTimeout(function () {
+    timerRef.current = setTimeout(() => {
       setShaking(false);
       if (codeErrorBehavior === "remove-code") publishValue("");
-      requestAnimationFrame(function () {
+      requestAnimationFrame(() => {
         var _a;
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         selectPosition(codeErrorBehavior === "remove-code" ? 0 : codeLength - 1, codeLength);
       });
     }, 300);
   }, [codeErrorBehavior, codeLength, isError, publishValue, selectPosition]);
-  var handleRootClick = function handleRootClick(event) {
+  const handleRootClick = event => {
     var _a;
     onClick === null || onClick === void 0 ? void 0 : onClick(event);
     if (event.defaultPrevented || disabled) return;
     (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     selectPosition(currentValue.length);
   };
-  var rootWidth = typeof width === "number" ? "".concat(width, "rem") : width;
-  var isGrouped = codeLength === 6;
+  const rootWidth = typeof width === "number" ? `${width}rem` : width;
+  const isGrouped = codeLength === 6;
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: cx(styles__default.default.root, styles__default.default[view], styles__default.default[size], styles__default.default[shape], disabled && styles__default.default.disabled, className),
     style: Object.assign(Object.assign({}, style), {
@@ -218,21 +171,19 @@ var CodeField = /*#__PURE__*/React.forwardRef(function CodeFieldComponent(_a, fo
     role: "presentation"
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: cx(styles__default.default.code_wrapper, (isError || shaking) && styles__default.default.code_error, shaking && styles__default.default.shaking)
-  }, items.map(function (symbol, index) {
-    return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, {
-      key: index
-    }, isGrouped && index === codeLength / 2 && (/*#__PURE__*/React__default.default.createElement("span", {
-      className: styles__default.default.separator
-    })), /*#__PURE__*/React__default.default.createElement("span", {
-      className: cx(styles__default.default.item, activeIndex === index && styles__default.default.focused, selectedIndex === index && styles__default.default.selected, invalidIndex === index && styles__default.default.item_error),
-      "aria-hidden": "true",
-      "data-code-field-item": ""
-    }, /*#__PURE__*/React__default.default.createElement("span", {
-      className: symbol ? styles__default.default.value : styles__default.default.placeholder
-    }, symbol || placeholders[index] || ""), activeIndex === index && selectedIndex === null && (/*#__PURE__*/React__default.default.createElement("span", {
-      className: styles__default.default.caret
-    }))));
-  }), /*#__PURE__*/React__default.default.createElement("input", Object.assign({}, inputProps, {
+  }, items.map((symbol, index) => (/*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, {
+    key: index
+  }, isGrouped && index === codeLength / 2 && (/*#__PURE__*/React__default.default.createElement("span", {
+    className: styles__default.default.separator
+  })), /*#__PURE__*/React__default.default.createElement("span", {
+    className: cx(styles__default.default.item, activeIndex === index && styles__default.default.focused, selectedIndex === index && styles__default.default.selected, invalidIndex === index && styles__default.default.item_error),
+    "aria-hidden": "true",
+    "data-code-field-item": ""
+  }, /*#__PURE__*/React__default.default.createElement("span", {
+    className: symbol ? styles__default.default.value : styles__default.default.placeholder
+  }, symbol || placeholders[index] || ""), activeIndex === index && selectedIndex === null && (/*#__PURE__*/React__default.default.createElement("span", {
+    className: styles__default.default.caret
+  })))))), /*#__PURE__*/React__default.default.createElement("input", Object.assign({}, inputProps, {
     ref: setInputRef,
     className: styles__default.default.native_input,
     type: "text",
@@ -241,65 +192,57 @@ var CodeField = /*#__PURE__*/React.forwardRef(function CodeFieldComponent(_a, fo
     maxLength: codeLength,
     autoComplete: autoComplete,
     inputMode: inputMode,
+    // Opt-in public prop: consumers decide when autofocus is appropriate.
+    // eslint-disable-next-line jsx-a11y/no-autofocus
     autoFocus: autoFocus,
     disabled: disabled,
     spellCheck: false,
-    onChange: function onChange(event) {
+    onChange: event => {
       if (disabled) return;
-      var rawValue = event.currentTarget.value.slice(0, codeLength);
-      var nextInvalidIndex = rawValue.split("").findIndex(function (symbol) {
-        return !testSymbol(pattern, symbol);
-      });
+      const rawValue = event.currentTarget.value.slice(0, codeLength);
+      const nextInvalidIndex = rawValue.split("").findIndex(symbol => !testSymbol(pattern, symbol));
       clearError();
       if (nextInvalidIndex < 0) publishValue(rawValue);else if (itemErrorBehavior === "forbid-enter") {
-        var cleaned = rawValue.split("").filter(function (symbol) {
-          return testSymbol(pattern, symbol);
-        }).join("");
+        const cleaned = rawValue.split("").filter(symbol => testSymbol(pattern, symbol)).join("");
         publishValue(cleaned);
-        requestAnimationFrame(function () {
-          return selectPosition(nextInvalidIndex);
-        });
+        requestAnimationFrame(() => selectPosition(nextInvalidIndex));
       } else showTemporaryItemError(rawValue, nextInvalidIndex);
     },
-    onPaste: function onPaste(event) {
+    onPaste: event => {
       var _a, _b;
-      _onPaste === null || _onPaste === void 0 ? void 0 : _onPaste(event);
+      onPaste === null || onPaste === void 0 ? void 0 : onPaste(event);
       if (event.defaultPrevented || disabled) return;
       event.preventDefault();
-      var pasted = event.clipboardData.getData("text/plain").split("").filter(function (symbol) {
-        return testSymbol(pattern, symbol);
-      });
-      var start = (_a = event.currentTarget.selectionStart) !== null && _a !== void 0 ? _a : 0;
-      var end = (_b = event.currentTarget.selectionEnd) !== null && _b !== void 0 ? _b : start;
-      var nextValue = (pasted.length >= codeLength ? pasted.join("") : "".concat(currentValue.slice(0, start)).concat(pasted.join("")).concat(currentValue.slice(end))).slice(0, codeLength);
+      const pasted = event.clipboardData.getData("text/plain").split("").filter(symbol => testSymbol(pattern, symbol));
+      const start = (_a = event.currentTarget.selectionStart) !== null && _a !== void 0 ? _a : 0;
+      const end = (_b = event.currentTarget.selectionEnd) !== null && _b !== void 0 ? _b : start;
+      const nextValue = (pasted.length >= codeLength ? pasted.join("") : `${currentValue.slice(0, start)}${pasted.join("")}${currentValue.slice(end)}`).slice(0, codeLength);
       clearError();
       publishValue(nextValue);
-      requestAnimationFrame(function () {
-        return selectPosition(Math.min(start + pasted.length, nextValue.length));
-      });
+      requestAnimationFrame(() => selectPosition(Math.min(start + pasted.length, nextValue.length)));
     },
-    onKeyDown: function onKeyDown(event) {
+    onKeyDown: event => {
       if (!disabled && ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Delete"].includes(event.key)) {
         event.preventDefault();
       }
-      _onKeyDown === null || _onKeyDown === void 0 ? void 0 : _onKeyDown(event);
+      onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
     },
-    onFocus: function onFocus(event) {
+    onFocus: event => {
       selectPosition(currentValue.length);
-      _onFocus === null || _onFocus === void 0 ? void 0 : _onFocus(event);
+      onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
     },
-    onBlur: function onBlur(event) {
+    onBlur: event => {
       setActiveIndex(null);
       setSelectedIndex(null);
-      _onBlur === null || _onBlur === void 0 ? void 0 : _onBlur(event);
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
     },
-    onSelect: function onSelect(event) {
+    onSelect: event => {
       var _a, _b;
-      var start = (_a = event.currentTarget.selectionStart) !== null && _a !== void 0 ? _a : currentValue.length;
-      var end = (_b = event.currentTarget.selectionEnd) !== null && _b !== void 0 ? _b : start;
+      const start = (_a = event.currentTarget.selectionStart) !== null && _a !== void 0 ? _a : currentValue.length;
+      const end = (_b = event.currentTarget.selectionEnd) !== null && _b !== void 0 ? _b : start;
       setActiveIndex(Math.min(start, codeLength - 1));
       setSelectedIndex(start < end ? Math.min(start, codeLength - 1) : null);
-      _onSelect === null || _onSelect === void 0 ? void 0 : _onSelect(event);
+      onSelect === null || onSelect === void 0 ? void 0 : onSelect(event);
     }
   }))), caption && (/*#__PURE__*/React__default.default.createElement("div", {
     className: cx(styles__default.default.caption, isError && styles__default.default.caption_error),

package/Counter/Counter.module.css

@@ -30,5 +30,6 @@
   font-weight: var(--font-weight-medium, 500);
   inline-size: var(--component-counter-value-inline-size);
   text-align: center;
-  user-select: none;
+  -webkit-user-select: none;
+          user-select: none;
 }

package/Counter/index.js

@@ -1,6 +1,5 @@
 'use strict';
 
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
 var clsx = require('clsx');
 var index = require('../Button/index.js');
@@ -10,33 +9,35 @@ var styles = require('./Counter.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefault(React);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-var Counter = function Counter(_ref) {
-  var _ref$value = _ref.value,
-    value = _ref$value === void 0 ? 1 : _ref$value,
-    max = _ref.max,
-    _ref$min = _ref.min,
-    min = _ref$min === void 0 ? 0 : _ref$min,
-    fullWidth = _ref.fullWidth,
-    onChange = _ref.onChange,
-    disabled = _ref.disabled,
-    className = _ref.className;
-  var minusDisabled = disabled || value <= min;
-  var plusDisabled = disabled || value >= max;
-  var handleChange = function handleChange(delta) {
+const Counter = ({
+  value = 1,
+  max,
+  min = 0,
+  fullWidth,
+  onChange,
+  disabled,
+  className
+}) => {
+  const minusDisabled = disabled || value <= min;
+  const plusDisabled = disabled || value >= max;
+  const handleChange = delta => {
     if (disabled) return;
-    var newValue = value + delta;
+    const newValue = value + delta;
     if (newValue < min || newValue > max) return;
     onChange(newValue);
   };
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(styles__default.default.root, _defineProperty__default.default({}, styles__default.default["root_fullWidth"], Boolean(fullWidth)), className)
+    className: clsx__default.default(styles__default.default.root, {
+      [styles__default.default["root_fullWidth"]]: Boolean(fullWidth)
+    }, className)
   }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(styles__default.default.control, _defineProperty__default.default({}, styles__default.default["control_fullWidth"], Boolean(fullWidth)))
+    className: clsx__default.default(styles__default.default.control, {
+      [styles__default.default["control_fullWidth"]]: Boolean(fullWidth)
+    })
   }, /*#__PURE__*/React__default.default.createElement(index.Button, {
     icon: /*#__PURE__*/React__default.default.createElement(Minus.Minus, {
       width: 16,
@@ -44,7 +45,7 @@ var Counter = function Counter(_ref) {
     }),
     disabled: minusDisabled,
     type: "button",
-    onClick: function onClick(event) {
+    onClick: event => {
       event.stopPropagation();
       handleChange(-1);
     },
@@ -58,7 +59,7 @@ var Counter = function Counter(_ref) {
     }),
     disabled: plusDisabled,
     type: "button",
-    onClick: function onClick(event) {
+    onClick: event => {
       event.stopPropagation();
       handleChange(1);
     },