@elliemae/ds-form 1.60.0 → 2.0.0-alpha.12

package/esm/SearchBox/DSSearchBox.js

@@ -1,3 +1,4 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
 import React from 'react';
 import { describe } from 'react-desc';
 import { CloseXsmall, Search } from '@elliemae/ds-icons';
@@ -7,105 +8,80 @@ import { SButton } from './SButton.js';
 import { useSearch } from './useSearch.js';
 import { searchBoxProps } from './props.js';
 import { defaultProps } from './defaultProps.js';
-import 'styled-components';
-import '../TextBox/DSTextBox.js';
-import '@babel/runtime/helpers/esm/extends';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
-import '../Input/DSInput.js';
-import '../Input/InputImpl.js';
-import '@babel/runtime/helpers/esm/typeof';
-import '@babel/runtime/helpers/esm/defineProperty';
-import '@babel/runtime/helpers/esm/classCallCheck';
-import '@babel/runtime/helpers/esm/createClass';
-import '@babel/runtime/helpers/esm/assertThisInitialized';
-import '@babel/runtime/helpers/esm/inherits';
-import '@babel/runtime/helpers/esm/possibleConstructorReturn';
-import '@babel/runtime/helpers/esm/getPrototypeOf';
-import 'prop-types';
-import 'lodash';
-import '@elliemae/ds-classnames';
-import '@elliemae/ds-button';
-import '@elliemae/ds-tooltip';
-import '../Input/InputAddonWrapper.js';
-import '@babel/runtime/helpers/esm/toConsumableArray';
-import '@elliemae/ds-system';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import '@elliemae/ds-utilities';
 
-/* eslint-disable complexity */
+var _Search;
 
-var DSSearchBox = function DSSearchBox(_ref) {
-  var className = _ref.className,
-      clearable = _ref.clearable,
-      containerProps = _ref.containerProps,
-      disableButton = _ref.disableButton,
-      disabled = _ref.disabled,
-      innerRef = _ref.innerRef,
-      onBlur = _ref.onBlur,
-      onChange = _ref.onChange,
-      onKeyUp = _ref.onKeyUp,
-      onSearch = _ref.onSearch,
-      onClearButtonClick = _ref.onClearButtonClick,
-      placeholder = _ref.placeholder,
-      property = _ref.property,
-      readOnly = _ref.readOnly,
-      searchOnEnter = _ref.searchOnEnter,
-      onSearchButtonClick = _ref.onSearchButtonClick,
-      showIcon = _ref.showIcon,
-      style = _ref.style,
-      value = _ref.value;
-
-  var _useSearch = useSearch({
-    onChange: onChange,
-    onKeyUp: onKeyUp,
-    onSearch: onSearch,
-    onSearchButtonClick: onSearchButtonClick,
-    property: property,
-    searchOnEnter: searchOnEnter,
-    value: value,
-    onClearButtonClick: onClearButtonClick
-  }),
-      searchValue = _useSearch.searchValue,
-      handleChange = _useSearch.handleChange,
-      handleSearch = _useSearch.handleSearch,
-      handleKeyUp = _useSearch.handleKeyUp,
-      handleClear = _useSearch.handleClear;
-
-  var shouldShowClearIcon = clearable && (searchValue === null || searchValue === void 0 ? void 0 : searchValue.length) > 0;
-  var shouldShowSearchIcon = !shouldShowClearIcon && showIcon;
-  var shouldShowAnyIcon = shouldShowClearIcon || shouldShowSearchIcon;
-  var PureSearchboxIcon = React.useMemo(function () {
-    var Icon = /*#__PURE__*/React.createElement(Search, {
+const DSSearchBox = _ref => {
+  let {
+    className,
+    clearable,
+    containerProps,
+    disableButton,
+    disabled,
+    innerRef,
+    onBlur,
+    onChange,
+    onKeyUp,
+    onSearch,
+    onClearButtonClick,
+    placeholder,
+    property,
+    readOnly,
+    searchOnEnter,
+    onSearchButtonClick,
+    showIcon,
+    style,
+    value
+  } = _ref;
+  const {
+    searchValue,
+    handleChange,
+    handleSearch,
+    handleKeyUp,
+    handleClear
+  } = useSearch({
+    onChange,
+    onKeyUp,
+    onSearch,
+    onSearchButtonClick,
+    property,
+    searchOnEnter,
+    value,
+    onClearButtonClick
+  });
+  const shouldShowClearIcon = clearable && (searchValue === null || searchValue === void 0 ? void 0 : searchValue.length) > 0;
+  const shouldShowSearchIcon = !shouldShowClearIcon && showIcon;
+  const shouldShowAnyIcon = shouldShowClearIcon || shouldShowSearchIcon;
+  const PureSearchboxIcon = React.useMemo(() => {
+    let Icon = _Search || (_Search = /*#__PURE__*/_jsx(Search, {
       "aria-label": "Search"
-    });
+    }));
 
-    var handleOnClick = function handleOnClick() {
-      return handleSearch(true);
-    };
+    let handleOnClick = () => handleSearch(true);
 
     if (!shouldShowAnyIcon) return null;
 
     if (shouldShowClearIcon) {
-      Icon = /*#__PURE__*/React.createElement(CloseXsmall, {
+      Icon = /*#__PURE__*/_jsx(CloseXsmall, {
         color: DSIconColors.PRIMARY,
         "aria-label": "Clear input"
       });
       handleOnClick = handleClear;
     }
 
-    return /*#__PURE__*/React.createElement(SButton, {
+    return /*#__PURE__*/_jsx(SButton, {
       disabled: disabled || disableButton,
       icon: Icon,
       onClick: handleOnClick,
       dataTestid: shouldShowClearIcon ? 'ds-searchbox-button-clear' : 'ds-searchbox-button'
     });
   }, [shouldShowClearIcon, shouldShowSearchIcon, shouldShowAnyIcon, disabled, disableButton, handleSearch, handleClear]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     style: {
       position: 'relative',
       zIndex: 0
     }
-  }, /*#__PURE__*/React.createElement(SearchBoxTextBox, {
+  }, void 0, /*#__PURE__*/_jsx(SearchBoxTextBox, {
     className: className,
     containerProps: containerProps,
     disabled: disabled,
@@ -120,10 +96,8 @@ var DSSearchBox = function DSSearchBox(_ref) {
   }), PureSearchboxIcon);
 };
 
-DSSearchBox.propTypes = searchBoxProps;
 DSSearchBox.defaultProps = defaultProps;
-var SearchBoxWithSchema = describe(DSSearchBox);
+const SearchBoxWithSchema = describe(DSSearchBox);
 SearchBoxWithSchema.propTypes = searchBoxProps;
 
 export { SearchBoxWithSchema, DSSearchBox as default };
-//# sourceMappingURL=DSSearchBox.js.map

package/esm/SearchBox/NavSearchBox.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
 import styled from 'styled-components';
 import { describe } from 'react-desc';
 import { ChevronDown, ChevronUp, CloseXsmall, Search } from '@elliemae/ds-icons';
@@ -7,123 +7,104 @@ import DSButton from '@elliemae/ds-button';
 import DSTextBox from '../TextBox/DSTextBox.js';
 import { navSearchBoxProps } from './props.js';
 import { navSearchBoxDefaultProps } from './defaultProps.js';
-import '@babel/runtime/helpers/esm/extends';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
-import '../Input/DSInput.js';
-import '../Input/InputImpl.js';
-import '@babel/runtime/helpers/esm/typeof';
-import '@babel/runtime/helpers/esm/defineProperty';
-import '@babel/runtime/helpers/esm/classCallCheck';
-import '@babel/runtime/helpers/esm/createClass';
-import '@babel/runtime/helpers/esm/assertThisInitialized';
-import '@babel/runtime/helpers/esm/inherits';
-import '@babel/runtime/helpers/esm/possibleConstructorReturn';
-import '@babel/runtime/helpers/esm/getPrototypeOf';
-import 'lodash';
-import '@elliemae/ds-classnames';
-import '@elliemae/ds-tooltip';
-import '../Input/InputAddonWrapper.js';
-import '@babel/runtime/helpers/esm/toConsumableArray';
+import { jsxs, Fragment } from 'react/jsx-runtime';
 
-/* eslint-disable max-lines */
-var StyledResultTracker = /*#__PURE__*/styled.div.withConfig({
+var _StyledVerticalSepara, _VerticalSeparator;
+const StyledResultTracker = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-sbwvud-0"
 })(["padding:0 8px;color:#a2a9b6;white-space:nowrap;word-spacing:2px;"]);
-var StyledVerticalSeparator = /*#__PURE__*/styled.div.withConfig({
+const StyledVerticalSeparator = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-sbwvud-1"
 })(["height:60%;border-right:1px solid #a2a9b6;"]);
-var StyledToolbarRightAddonsWrapper = /*#__PURE__*/styled.div.withConfig({
+const StyledToolbarRightAddonsWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-sbwvud-2"
 })(["display:flex;align-items:center;justify-content:flex-end;"]);
-var NavBtn = /*#__PURE__*/styled(DSButton).withConfig({
+const NavBtn = /*#__PURE__*/styled(DSButton).withConfig({
   componentId: "sc-sbwvud-3"
-})(["height:calc(100% - 2px);border:none;border-radius:", ";"], function (_ref) {
-  var last = _ref.last;
+})(["height:calc(100% - 2px);border:none;border-radius:", ";"], _ref => {
+  let {
+    last
+  } = _ref;
   return last ? '2px  2px 0px 0px' : '0px';
 });
 
-var RightButtonsGroup = function RightButtonsGroup(props) {
-  var onNext = props.onNext,
-      onPrevious = props.onPrevious,
-      onClear = props.onClear,
-      hideNavs = props.hideNavs,
-      showClear = props.showClear;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, !hideNavs && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NavBtn, {
-    buttonType: "text",
-    containerProps: {
-      'data-testid': 'ds-navsearchbox-next'
-    },
-    icon: /*#__PURE__*/React.createElement(ChevronDown, {
-      color: ['brand-primary', '800']
-    }),
-    onClick: onNext
-  }), /*#__PURE__*/React.createElement(NavBtn, {
-    buttonType: "text",
-    containerProps: {
-      'data-testid': 'ds-navsearchbox-prev'
-    },
-    icon: /*#__PURE__*/React.createElement(ChevronUp, {
-      color: ['brand-primary', '800']
-    }),
-    onClick: onPrevious
-  })), showClear ? /*#__PURE__*/React.createElement(NavBtn, {
-    containerProps: {
-      'data-testid': 'ds-navsearchbox-clear'
-    },
-    buttonType: "text",
-    icon: /*#__PURE__*/React.createElement(CloseXsmall, {
-      color: ['brand-primary', '800']
-    }),
-    onClick: onClear,
-    last: true
-  }) : /*#__PURE__*/React.createElement(NavBtn, {
-    containerProps: {
-      'data-testid': 'ds-navsearchbox-clear'
-    },
-    buttonType: "text",
-    icon: /*#__PURE__*/React.createElement(Search, {
-      color: ['brand-primary', '800']
-    }),
-    last: true
-  }));
-};
-
-RightButtonsGroup.propTypes = {
-  onNext: PropTypes.func.isRequired,
-  onPrevious: PropTypes.func.isRequired,
-  onClear: PropTypes.func.isRequired,
-  hideNavs: PropTypes.bool,
-  showClear: PropTypes.bool
+const RightButtonsGroup = props => {
+  const {
+    onNext,
+    onPrevious,
+    onClear,
+    hideNavs,
+    showClear
+  } = props;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [!hideNavs && /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/_jsx(NavBtn, {
+        buttonType: "text",
+        containerProps: {
+          'data-testid': 'ds-navsearchbox-next'
+        },
+        icon: /*#__PURE__*/_jsx(ChevronDown, {
+          color: ['brand-primary', '800']
+        }),
+        onClick: onNext
+      }), /*#__PURE__*/_jsx(NavBtn, {
+        buttonType: "text",
+        containerProps: {
+          'data-testid': 'ds-navsearchbox-prev'
+        },
+        icon: /*#__PURE__*/_jsx(ChevronUp, {
+          color: ['brand-primary', '800']
+        }),
+        onClick: onPrevious
+      })]
+    }), showClear ? /*#__PURE__*/_jsx(NavBtn, {
+      containerProps: {
+        'data-testid': 'ds-navsearchbox-clear'
+      },
+      buttonType: "text",
+      icon: /*#__PURE__*/_jsx(CloseXsmall, {
+        color: ['brand-primary', '800']
+      }),
+      onClick: onClear,
+      last: true
+    }) : /*#__PURE__*/_jsx(NavBtn, {
+      containerProps: {
+        'data-testid': 'ds-navsearchbox-clear'
+      },
+      buttonType: "text",
+      icon: /*#__PURE__*/_jsx(Search, {
+        color: ['brand-primary', '800']
+      }),
+      last: true
+    })]
+  });
 };
 
-var ResultTracker = function ResultTracker(props) {
-  var currentResultIndex = props.currentResultIndex,
-      totalResults = props.totalResults;
+const ResultTracker = props => {
+  const {
+    currentResultIndex,
+    totalResults
+  } = props;
   if (currentResultIndex === -1 && !totalResults) return null;
-  if (currentResultIndex === -1 && totalResults) return /*#__PURE__*/React.createElement(StyledResultTracker, null, totalResults);
-  return /*#__PURE__*/React.createElement(StyledResultTracker, null, "".concat(currentResultIndex + 1, " / ").concat(totalResults));
-};
-
-ResultTracker.propTypes = {
-  currentResultIndex: PropTypes.number.isRequired,
-  totalResults: PropTypes.number.isRequired
+  if (currentResultIndex === -1 && totalResults) return /*#__PURE__*/_jsx(StyledResultTracker, {}, void 0, totalResults);
+  return /*#__PURE__*/_jsx(StyledResultTracker, {}, void 0, "".concat(currentResultIndex + 1, " / ").concat(totalResults));
 };
 
-var VerticalSeparator = function VerticalSeparator() {
-  return /*#__PURE__*/React.createElement(StyledVerticalSeparator, null);
-};
+const VerticalSeparator = () => _StyledVerticalSepara || (_StyledVerticalSepara = /*#__PURE__*/_jsx(StyledVerticalSeparator, {}));
 
-var ToolbarRightAddons = function ToolbarRightAddons(props) {
-  var onNext = props.onNext,
-      onPrevious = props.onPrevious,
-      onClear = props.onClear,
-      currentResultIndex = props.currentResultIndex,
-      totalResults = props.totalResults,
-      showClear = props.showClear;
-  return /*#__PURE__*/React.createElement(StyledToolbarRightAddonsWrapper, null, /*#__PURE__*/React.createElement(ResultTracker, {
+const ToolbarRightAddons = props => {
+  const {
+    onNext,
+    onPrevious,
+    onClear,
+    currentResultIndex,
+    totalResults,
+    showClear
+  } = props;
+  return /*#__PURE__*/_jsx(StyledToolbarRightAddonsWrapper, {}, void 0, /*#__PURE__*/_jsx(ResultTracker, {
     currentResultIndex: currentResultIndex,
     totalResults: totalResults
-  }), currentResultIndex !== -1 || totalResults ? /*#__PURE__*/React.createElement(VerticalSeparator, null) : null, /*#__PURE__*/React.createElement(RightButtonsGroup, {
+  }), currentResultIndex !== -1 || totalResults ? _VerticalSeparator || (_VerticalSeparator = /*#__PURE__*/_jsx(VerticalSeparator, {})) : null, /*#__PURE__*/_jsx(RightButtonsGroup, {
     onNext: onNext,
     hideNavs: currentResultIndex === -1 && !totalResults,
     onPrevious: onPrevious,
@@ -132,31 +113,24 @@ var ToolbarRightAddons = function ToolbarRightAddons(props) {
   }));
 };
 
-ToolbarRightAddons.propTypes = {
-  onNext: PropTypes.func.isRequired,
-  onPrevious: PropTypes.func.isRequired,
-  onClear: PropTypes.func.isRequired,
-  currentResultIndex: PropTypes.number.isRequired,
-  totalResults: PropTypes.number.isRequired,
-  showClear: PropTypes.bool
-};
-
-var NavSearchBox = function NavSearchBox(props) {
-  var currentResultIndex = props.currentResultIndex,
-      onChange = props.onChange,
-      onClear = props.onClear,
-      onNext = props.onNext,
-      onPrevious = props.onPrevious,
-      totalResults = props.totalResults,
-      value = props.value,
-      onBlur = props.onBlur,
-      placeholder = props.placeholder;
+const NavSearchBox = props => {
+  const {
+    currentResultIndex,
+    onChange,
+    onClear,
+    onNext,
+    onPrevious,
+    totalResults,
+    value,
+    onBlur,
+    placeholder
+  } = props;
 
-  var handleChange = function handleChange(e) {
+  const handleChange = e => {
     if (onChange) onChange(e.target.value);
   };
 
-  var handleKeyDown = function handleKeyDown(e) {
+  const handleKeyDown = e => {
     // SHIFT + ENTER
     if (e.shiftKey) {
       if (e.key === 'Enter' || e.keyCode === 13) {
@@ -171,7 +145,7 @@ var NavSearchBox = function NavSearchBox(props) {
     }
   };
 
-  return /*#__PURE__*/React.createElement(DSTextBox, {
+  return /*#__PURE__*/_jsx(DSTextBox, {
     onChange: handleChange,
     containerProps: {
       'data-testid': 'ds-nav-searchbox-input'
@@ -180,7 +154,7 @@ var NavSearchBox = function NavSearchBox(props) {
     onKeyDown: handleKeyDown,
     placeholder: placeholder,
     value: value,
-    rightComponent: /*#__PURE__*/React.createElement(ToolbarRightAddons, {
+    rightComponent: /*#__PURE__*/_jsx(ToolbarRightAddons, {
       showClear: !!value,
       onNext: onNext,
       onPrevious: onPrevious,
@@ -191,10 +165,8 @@ var NavSearchBox = function NavSearchBox(props) {
   });
 };
 
-NavSearchBox.propTypes = navSearchBoxProps;
 NavSearchBox.defaultProps = navSearchBoxDefaultProps;
-var DSNavSearchBoxWithSchema = describe(NavSearchBox);
+const DSNavSearchBoxWithSchema = describe(NavSearchBox);
 DSNavSearchBoxWithSchema.propTypes = navSearchBoxProps;
 
 export { DSNavSearchBoxWithSchema, NavSearchBox };
-//# sourceMappingURL=NavSearchBox.js.map

package/esm/SearchBox/SButton.js

@@ -1,39 +1,25 @@
-import React from 'react';
-import { PropTypes } from 'react-desc';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
 import styled from 'styled-components';
 import { focus } from '@elliemae/ds-system';
 
-var Button = /*#__PURE__*/styled.button.withConfig({
+const Button = /*#__PURE__*/styled.button.withConfig({
   componentId: "sc-15udc15-0"
-})(["all:unset;position:absolute;height:calc(100% - 2px);width:28px;top:1px;right:1px;display:flex;justify-content:center;align-items:center;box-sizing:border-box;cursor:pointer;z-index:1;svg{fill:", ";}&:disabled{color:#5d6775;cursor:not-allowed;svg{fill:#5d6775;}}&:focus{", "}"], function (props) {
-  return props.theme.colors.brand['600'];
-}, focus());
+})(["all:unset;position:absolute;height:calc(100% - 2px);width:28px;top:1px;right:1px;display:flex;justify-content:center;align-items:center;box-sizing:border-box;cursor:pointer;z-index:1;svg{fill:", ";}&:disabled{color:#5d6775;cursor:not-allowed;svg{fill:#5d6775;}}&:focus{", "}"], props => props.theme.colors.brand['600'], focus());
 
-var SButton = function SButton(_ref) {
-  var icon = _ref.icon,
-      disabled = _ref.disabled,
-      onClick = _ref.onClick,
-      _ref$dataTestid = _ref.dataTestid,
-      dataTestid = _ref$dataTestid === void 0 ? "ds-searchbox-button" : _ref$dataTestid;
-  return /*#__PURE__*/React.createElement(Button, {
+const SButton = _ref => {
+  let {
+    icon,
+    disabled,
+    onClick,
+    dataTestid = "ds-searchbox-button"
+  } = _ref;
+  return /*#__PURE__*/_jsx(Button, {
     "data-testid": dataTestid,
     onClick: onClick,
     disabled: disabled,
     type: "button"
-  }, icon);
-};
-
-SButton.propTypes = {
-  /** click handler for button */
-  onClick: PropTypes.func.isRequired.description('click handler for button'),
-
-  /** ds icon to render inside button */
-  icon: PropTypes.node.isRequired.description('ds icon to render inside button'),
-
-  /** disable button */
-  disabled: PropTypes.bool.description('disable button'),
-  dataTestid: PropTypes.string.description('Data test id')
+  }, void 0, icon);
 };
 
 export { SButton };
-//# sourceMappingURL=SButton.js.map

package/esm/SearchBox/SearchBoxToggle.js

@@ -1,93 +1,68 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import React, { useState } from 'react';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import { useState } from 'react';
 import styled from 'styled-components';
 import { Search } from '@elliemae/ds-icons';
 import DSButton from '@elliemae/ds-button';
 import DSSearchBox from './DSSearchBox.js';
-import 'react-desc';
-import '@elliemae/ds-icon';
-import './styled.js';
-import '../TextBox/DSTextBox.js';
-import '../Input/DSInput.js';
-import '../Input/InputImpl.js';
-import '@babel/runtime/helpers/esm/typeof';
-import '@babel/runtime/helpers/esm/defineProperty';
-import '@babel/runtime/helpers/esm/classCallCheck';
-import '@babel/runtime/helpers/esm/createClass';
-import '@babel/runtime/helpers/esm/assertThisInitialized';
-import '@babel/runtime/helpers/esm/inherits';
-import '@babel/runtime/helpers/esm/possibleConstructorReturn';
-import '@babel/runtime/helpers/esm/getPrototypeOf';
-import 'prop-types';
-import 'lodash';
-import '@elliemae/ds-classnames';
-import '@elliemae/ds-tooltip';
-import '../Input/InputAddonWrapper.js';
-import '@babel/runtime/helpers/esm/toConsumableArray';
-import './SButton.js';
-import '@elliemae/ds-system';
-import './useSearch.js';
-import '@elliemae/ds-utilities';
-import './props.js';
-import './defaultProps.js';
+import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["onSearchButtonClick", "width"];
-var SEARCH_BUTTON_WIDTH = 26;
-var SearchWrap = /*#__PURE__*/styled.div.withConfig({
+var _Search;
+
+const _excluded = ["onSearchButtonClick", "width"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const SEARCH_BUTTON_WIDTH = 26;
+const SearchWrap = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-xt33wm-0"
-})(["transition:width 200ms ease;width:", "px;height:0;", " ", ""], SEARCH_BUTTON_WIDTH, function (props) {
-  return !props.show ? "\n        opacity:0;\n\n        & * {\n          width: ".concat(SEARCH_BUTTON_WIDTH, "px;\n          height: 0;\n          border: 0;\n        }\n      ") : '';
-}, function (props) {
-  return props.isOpen ? "width: ".concat(props.width, ";opacity: 1;height: auto;") : '';
-}); // eslint-disable-next-line react/prop-types
+})(["transition:width 200ms ease;width:", "px;height:0;", " ", ""], SEARCH_BUTTON_WIDTH, props => !props.show ? "\n        opacity:0;\n\n        & * {\n          width: ".concat(SEARCH_BUTTON_WIDTH, "px;\n          height: 0;\n          border: 0;\n        }\n      ") : '', props => props.isOpen ? "width: ".concat(props.width, ";opacity: 1;height: auto;") : ''); // eslint-disable-next-line react/prop-types
 
-var SearchBoxToggle = function SearchBoxToggle(_ref) {
-  var _onSearchButtonClick = _ref.onSearchButtonClick,
-      width = _ref.width,
+const SearchBoxToggle = _ref => {
+  let {
+    onSearchButtonClick,
+    width
+  } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isOpen = _useState2[0],
-      setOpen = _useState2[1];
+  const [isOpen, setOpen] = useState(false);
+  const [show, setShow] = useState(true);
+  const computedWidth = typeof width === 'number' ? "".concat(width, "px") : width;
 
-  var _useState3 = useState(true),
-      _useState4 = _slicedToArray(_useState3, 2),
-      show = _useState4[0],
-      setShow = _useState4[1];
-
-  var computedWidth = typeof width === 'number' ? "".concat(width, "px") : width;
-  var button = /*#__PURE__*/React.createElement(DSButton, {
-    onClick: function onClick() {
+  const button = /*#__PURE__*/_jsx(DSButton, {
+    onClick: () => {
       setOpen(true);
     },
     buttonType: "text",
-    icon: /*#__PURE__*/React.createElement(Search, null)
+    icon: _Search || (_Search = /*#__PURE__*/_jsx(Search, {}))
   });
-  return /*#__PURE__*/React.createElement("div", null, show && !isOpen && button, /*#__PURE__*/React.createElement(SearchWrap, {
+
+  return /*#__PURE__*/_jsx("div", {}, void 0, show && !isOpen && button, /*#__PURE__*/_jsx(SearchWrap, {
     show: !show || isOpen,
     isOpen: isOpen,
     width: computedWidth,
-    onTransitionEnd: function onTransitionEnd() {
+    onTransitionEnd: () => {
       setShow(!isOpen);
     }
-  }, /*#__PURE__*/React.createElement(DSSearchBox, _extends({}, rest, {
-    onSearchButtonClick: function onSearchButtonClick() {
-      _onSearchButtonClick();
-
+  }, void 0, /*#__PURE__*/jsx(DSSearchBox, _objectSpread(_objectSpread({}, rest), {}, {
+    onSearchButtonClick: () => {
+      onSearchButtonClick();
       setOpen(false);
     }
   }))));
 };
 
 SearchBoxToggle.defaultProps = {
-  onSearchButtonClick: function onSearchButtonClick() {
-    return null;
-  },
+  onSearchButtonClick: () => null,
   width: 300
 };
 
 export { SearchBoxToggle as default };
-//# sourceMappingURL=SearchBoxToggle.js.map