@pingux/astro 1.42.2 → 2.0.0-alpha.4

package/lib/cjs/components/SearchField/SearchField.js

@@ -1,65 +1,37 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
 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 _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
-
-var _searchfield = require("@react-aria/searchfield");
-
-var _searchfield2 = require("@react-stately/searchfield");
-
+var _reactAria = require("react-aria");
+var _reactStately = require("react-stately");
 var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
-
 var _SearchIcon = _interopRequireDefault(require("mdi-react/SearchIcon"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _ = require("../../");
-
-var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
-
+var _ = require("../..");
 var _hooks = require("../../hooks");
-
+var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
+var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
 var _react2 = require("@emotion/react");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 /**
  * Renders a search field with associated controls including visual elements and keyboard
  * interaction handlers.
@@ -71,57 +43,50 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 var SearchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var autocomplete = props.autocomplete,
-      hasAutoFocus = props.hasAutoFocus,
-      hasNoClearButton = props.hasNoClearButton,
-      icon = props.icon,
-      isExcludedFromTabOrder = props.isExcludedFromTabOrder,
-      label = props.label,
-      controlProps = props.controlProps,
-      iconProps = props.iconProps,
-      labelProps = props.labelProps;
+    hasAutoFocus = props.hasAutoFocus,
+    hasNoClearButton = props.hasNoClearButton,
+    icon = props.icon,
+    isExcludedFromTabOrder = props.isExcludedFromTabOrder,
+    label = props.label,
+    controlProps = props.controlProps,
+    iconProps = props.iconProps,
+    labelProps = props.labelProps;
   var searchRef = (0, _react.useRef)();
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
-
   (0, _react.useImperativeHandle)(ref, function () {
     return searchRef.current;
   });
-  var state = (0, _searchfield2.useSearchFieldState)(props);
-
-  var _useSearchField = (0, _searchfield.useSearchField)(_objectSpread({
-    autoComplete: autocomplete,
-    autoFocus: hasAutoFocus,
-    excludeFromTabOrder: isExcludedFromTabOrder
-  }, props), state, searchRef),
-      raLabelProps = _useSearchField.labelProps,
-      raInputProps = _useSearchField.inputProps,
-      clearButtonProps = _useSearchField.clearButtonProps;
-
+  var state = (0, _reactStately.useSearchFieldState)(props);
+  var _useSearchField = (0, _reactAria.useSearchField)(_objectSpread({
+      autoComplete: autocomplete,
+      autoFocus: hasAutoFocus,
+      excludeFromTabOrder: isExcludedFromTabOrder
+    }, props), state, searchRef),
+    raLabelProps = _useSearchField.labelProps,
+    raInputProps = _useSearchField.inputProps,
+    clearButtonProps = _useSearchField.clearButtonProps;
   var _useField = (0, _hooks.useField)(_objectSpread(_objectSpread({}, props), {}, {
-    labelProps: _objectSpread(_objectSpread({}, labelProps), raLabelProps),
-    controlProps: _objectSpread(_objectSpread({}, controlProps), raInputProps)
-  })),
-      fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlProps = _useField.fieldControlProps,
-      fieldLabelProps = _useField.fieldLabelProps;
-
+      labelProps: _objectSpread(_objectSpread({}, labelProps), raLabelProps),
+      controlProps: _objectSpread(_objectSpread({}, controlProps), raInputProps)
+    })),
+    fieldContainerProps = _useField.fieldContainerProps,
+    fieldControlInputProps = _useField.fieldControlInputProps,
+    fieldControlWrapperProps = _useField.fieldControlWrapperProps,
+    fieldLabelProps = _useField.fieldLabelProps;
   var handleKeyDownEvent = function handleKeyDownEvent(e) {
     var key = e.key;
-
     if (key === 'Enter' || key === ' ') {
       state.setValue('');
     }
   };
-
-  return (0, _react2.jsx)(_.Box, fieldContainerProps, label && (0, _react2.jsx)(_.Label, fieldLabelProps), (0, _react2.jsx)(_.Box, {
-    variant: "forms.search.container"
-  }, (0, _react2.jsx)(_.Input, (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.Box, fieldContainerProps, label && (0, _react2.jsx)(_.Label, fieldLabelProps), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    variant: "forms.search.wrapper"
+  }, fieldControlWrapperProps), (0, _react2.jsx)(_.Input, (0, _extends2["default"])({
     ref: searchRef,
     pl: 40,
     pr: 40
-  }, fieldControlProps, {
-    variant: "forms.input.search"
-  })), icon && (0, _react2.jsx)(_.Icon, (0, _extends2["default"])({
+  }, fieldControlInputProps)), icon && (0, _react2.jsx)(_.Icon, (0, _extends2["default"])({
     icon: icon,
     variant: "forms.search.icon",
     size: 22
@@ -140,134 +105,102 @@ var SearchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     icon: _CloseIcon["default"]
   }))));
 });
-SearchField.propTypes = _objectSpread({
+SearchField.propTypes = _objectSpread(_objectSpread({
   /**
    * @ignore
    * Identifies the currently active element when DOM focus is on a composite widget, textbox,
    * group, or application.
    */
   'aria-activedescendant': _propTypes["default"].string,
-
   /**
    * Indicates whether inputting text could trigger display of one or more predictions of the
    * user's intended value for an input and specifies how predictions would be presented if they
    * are made.
    */
   'aria-autocomplete': _propTypes["default"].oneOf(['none', 'inline', 'list', 'both']),
-
   /**
    * @ignore
    * Indicates the availability and type of interactive popup element, such as menu or dialog, that
    * can be triggered by an element.
    */
   'aria-haspopup': _propTypes["default"].oneOf([true, false, 'menu', 'listbox', 'tree', 'grid', 'dialog']),
-
   /** How the input should handle autocompletion according to the browser. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). The `autocomplete` prop is an alias for this. */
   autoComplete: _propTypes["default"].string,
-
   /** @ignore Alias for `autoComplete` prop. Exists for backwards-compatibility. */
   autocomplete: _propTypes["default"].string,
-
   /** The default value (uncontrolled). */
   defaultValue: _propTypes["default"].string,
-
   /** Whether the element should receive focus on render. */
   hasAutoFocus: _propTypes["default"].bool,
-
   /** Whether to display the clear button or not. */
   hasNoClearButton: _propTypes["default"].bool,
-
   /** The icon to display alongside the placeholder text. */
   icon: _propTypes["default"].elementType,
-
   /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
   id: _propTypes["default"].string,
-
   /** Whether the input is disabled. */
   isDisabled: _propTypes["default"].bool,
-
   /** The content to display as the label. */
   label: _propTypes["default"].node,
-
   /** The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). */
   name: _propTypes["default"].string,
-
   /** Temporary text that occupies the text input when it is empty. */
   placeholder: _propTypes["default"].string,
-
   /** The current value (controlled). */
   value: _propTypes["default"].string,
-
   /**
    * Handler that is called when the SearchField is submitted.
    * (value: string) => void
    */
   onSubmit: _propTypes["default"].func,
-
   /**
    * Handler that is called when the clear button is pressed.
    * () => void
    */
   onClear: _propTypes["default"].func,
-
   /**
    * Handler that is called when the element receives focus.
    * (e: FocusEvent) => void
    */
   onFocus: _propTypes["default"].func,
-
   /**
    * Handler that is called when the element loses focus.
    * (e: FocusEvent) => void
    */
   onBlur: _propTypes["default"].func,
-
   /**
    * Handler that is called when a key is pressed.
    * (e: KeyboardEvent) => void
    */
   onKeyDown: _propTypes["default"].func,
-
   /**
    * Handler that is called when a key is released.
    * (e: KeyboardEvent) => void
    */
   onKeyUp: _propTypes["default"].func,
-
   /**
    * Handler that is called when the value changes.
    * (value: string) => void
    */
   onChange: _propTypes["default"].func,
-  containerProps: _propTypes["default"].shape({}),
-
-  /** Props object that is spread into the input element. */
-  controlProps: _propTypes["default"].shape({}),
-
   /** Props object that is spread into the icon element. */
   iconProps: _propTypes["default"].shape({}),
-
-  /** Props object that is spread into the label element. */
-  labelProps: _propTypes["default"].shape({}),
   // NOTE: unsurfaced useSearchField / useSearchFieldState props listed below
 
   /** @ignore Whether the input can be selected but not changed by the user. */
   isReadOnly: _propTypes["default"].bool,
-
   /**
    * @ignore
    * Whether user input is required on the input before form submission.
    * Often paired with the necessityIndicator prop to add a visual indicator to the input.
    */
   isRequired: _propTypes["default"].bool,
-
   /**
    * @ignore
    * Handler that is called when the element's focus status changes.
    * (isFocused: boolean) => void
    */
   onFocusChange: _propTypes["default"].func,
-
   /**
    * @ignore
    * Whether to exclude the element from the sequential tab order. If true, the element will not be
@@ -276,77 +209,63 @@ SearchField.propTypes = _objectSpread({
    * available.
    */
   isExcludedFromTabOrder: _propTypes["default"].bool,
-
   /** The maximum number of characters supported by the input set by the user. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefmaxlength). */
   maxLength: _propTypes["default"].number,
-
   /** @ignore The minimum number of characters required by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefminlength). */
   minLength: _propTypes["default"].number,
-
   /** @ignore Regex pattern that the value of the input must match to be valid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefpattern). */
   pattern: _propTypes["default"].string,
-
   /** @ignore The type of input to render. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype). */
   type: _propTypes["default"].string,
-
   /**
    * @ignore
    * Hints at the type of data that might be entered by the user while editing the element or its
    * contents. See [MDN](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute).
    */
   inputMode: _propTypes["default"].oneOf(['none', 'text', 'tel', 'url', 'email', 'numeric', 'decimal', 'search']),
-
   /**
    * @ignore
    * Handler that is called when the user copies text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy).
    */
   onCopy: _propTypes["default"].func,
-
   /** @ignore Handler that is called when the user cuts text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncut). */
   onCut: _propTypes["default"].func,
-
   /** @ignore Handler that is called when the user pastes text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste). */
   onPaste: _propTypes["default"].func,
-
   /**
    * @ignore
    * Handler that is called when a text composition system starts a new text composition session.
    * See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event).
    */
   onCompositionStart: _propTypes["default"].func,
-
   /**
    * @ignore
    * Handler that is called when a text composition system completes or cancels the current text
    * composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event).
    */
   onCompositionEnd: _propTypes["default"].func,
-
   /**
    * @ignore
    * Handler that is called when a new character is received in the current text composition
    * session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event).
    */
   onCompositionUpdate: _propTypes["default"].func,
-
   /**
    * @ignore
    * Handler that is called when text in the input is selected. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event).
    */
   onSelect: _propTypes["default"].func,
-
   /**
    * @ignore
    * Handler that is called when the input value is about to be modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event).
    */
   onBeforeInput: _propTypes["default"].func,
-
   /**
    * @ignore
    * Handler that is called when the input value is modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event).
    */
   onInput: _propTypes["default"].func
-}, _ariaAttributes.ariaAttributesBasePropTypes);
+}, _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes);
 SearchField.defaultProps = {
   hasNoClearButton: false,
   icon: _SearchIcon["default"]

package/lib/cjs/components/SearchField/SearchField.stories.js

@@ -1,61 +1,35 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
 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 _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = exports.NoClearButton = exports.Default = exports.CustomIcon = exports.ControlledWithDebouncedInput = exports.Controlled = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _AccountGroupIcon = _interopRequireDefault(require("mdi-react/AccountGroupIcon"));
-
 var _SearchIcon = _interopRequireDefault(require("mdi-react/SearchIcon"));
-
-var _ = require("../../");
-
-var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
-
+var _ = require("../..");
 var _hooks = require("../../hooks");
-
+var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
+var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
 var _react2 = require("@emotion/react");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var _default = {
   title: 'Form/SearchField',
   component: _.SearchField,
@@ -66,7 +40,7 @@ var _default = {
       }
     }
   },
-  argTypes: _objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     label: {
       control: {
         type: 'text'
@@ -85,10 +59,7 @@ var _default = {
     hasAutoFocus: {},
     hasNoClearButton: {},
     autoComplete: {},
-    containerProps: {},
     iconProps: {},
-    controlProps: {},
-    labelProps: {},
     name: {},
     id: {},
     'aria-autocomplete': {
@@ -99,28 +70,23 @@ var _default = {
         type: 'none'
       }
     }
-  }, _ariaAttributes.ariaAttributeBaseArgTypes)
+  }, _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
 };
 exports["default"] = _default;
-
 var Default = function Default(args) {
   return (0, _react2.jsx)(_.SearchField, (0, _extends2["default"])({}, args, {
     icon: _SearchIcon["default"],
     onSubmit: function onSubmit(text) {
       return alert(text);
     } // eslint-disable-line no-alert
-
   }));
 };
-
 exports.Default = Default;
-
 var Controlled = function Controlled() {
   var _useState = (0, _react.useState)(''),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
   return (0, _react2.jsx)(_.SearchField, {
     value: value,
     onChange: setValue,
@@ -129,12 +95,9 @@ var Controlled = function Controlled() {
     onSubmit: function onSubmit(text) {
       return alert(text);
     } // eslint-disable-line no-alert
-
   });
 };
-
 exports.Controlled = Controlled;
-
 var CustomIcon = function CustomIcon() {
   return (0, _react2.jsx)(_.SearchField, {
     icon: _AccountGroupIcon["default"],
@@ -143,12 +106,9 @@ var CustomIcon = function CustomIcon() {
     onSubmit: function onSubmit(text) {
       return alert(text);
     } // eslint-disable-line no-alert
-
   });
 };
-
 exports.CustomIcon = CustomIcon;
-
 var NoClearButton = function NoClearButton() {
   return (0, _react2.jsx)(_.SearchField, {
     hasNoClearButton: true,
@@ -157,18 +117,14 @@ var NoClearButton = function NoClearButton() {
     onSubmit: function onSubmit(text) {
       return alert(text);
     } // eslint-disable-line no-alert
-
   });
 };
-
 exports.NoClearButton = NoClearButton;
-
 var ControlledWithDebouncedInput = function ControlledWithDebouncedInput() {
   var _useState3 = (0, _react.useState)(''),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      value = _useState4[0],
-      setValue = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    value = _useState4[0],
+    setValue = _useState4[1];
   var debouncedSearchText = (0, _hooks.useDebounce)({
     value: value,
     delay: 500
@@ -181,10 +137,8 @@ var ControlledWithDebouncedInput = function ControlledWithDebouncedInput() {
     onSubmit: function onSubmit(text) {
       return alert(text);
     } // eslint-disable-line no-alert
-
   }), (0, _react2.jsx)(_.Text, {
     mt: "xs"
   }, "Debounced value: ".concat(debouncedSearchText)));
 };
-
 exports.ControlledWithDebouncedInput = ControlledWithDebouncedInput;