@elliemae/ds-form 2.2.0-alpha.3 → 3.0.0-next.0

package/esm/SearchBox/DSSearchBox.js

@@ -1,35 +1,45 @@
-import * as React from "react";
-import React2 from "react";
-import { describe } from "react-desc";
-import { Search, CloseXsmall } from "@elliemae/ds-icons";
-import { DSIconColors } from "@elliemae/ds-icon";
-import { SearchBoxTextBox } from "./styled";
-import { SButton } from "./SButton";
-import { useSearch } from "./useSearch";
-import { searchBoxProps } from "./props";
-import { defaultProps } from "./defaultProps";
-const DSSearchBox = ({
-  className,
-  clearable,
-  containerProps,
-  disableButton,
-  disabled,
-  innerRef,
-  onBlur,
-  onChange,
-  onKeyUp,
-  onSearch,
-  onClearButtonClick,
-  placeholder,
-  property,
-  readOnly,
-  searchOnEnter,
-  onSearchButtonClick,
-  showIcon,
-  style,
-  value
-}) => {
-  const { searchValue, handleChange, handleSearch, handleKeyUp, handleClear } = useSearch({
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import React from 'react';
+import { describe } from 'react-desc';
+import { CloseXsmall, Search } from '@elliemae/ds-icons';
+import { DSIconColors } from '@elliemae/ds-icon';
+import { SearchBoxTextBox } from './styled.js';
+import { SButton } from './SButton.js';
+import { useSearch } from './useSearch.js';
+import { searchBoxProps } from './props.js';
+import { defaultProps } from './defaultProps.js';
+
+var _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,
@@ -39,63 +49,55 @@ const DSSearchBox = ({
     value,
     onClearButtonClick
   });
-  const shouldShowClearIcon = clearable && searchValue?.length > 0;
+  const shouldShowClearIcon = clearable && (searchValue === null || searchValue === void 0 ? void 0 : searchValue.length) > 0;
   const shouldShowSearchIcon = !shouldShowClearIcon && showIcon;
   const shouldShowAnyIcon = shouldShowClearIcon || shouldShowSearchIcon;
-  const PureSearchboxIcon = React2.useMemo(() => {
-    let Icon = /* @__PURE__ */ React2.createElement(Search, {
+  const PureSearchboxIcon = React.useMemo(() => {
+    let Icon = _Search || (_Search = /*#__PURE__*/_jsx(Search, {
       "aria-label": "Search"
-    });
+    }));
+
     let handleOnClick = () => handleSearch(true);
-    if (!shouldShowAnyIcon)
-      return null;
+
+    if (!shouldShowAnyIcon) return null;
+
     if (shouldShowClearIcon) {
-      Icon = /* @__PURE__ */ React2.createElement(CloseXsmall, {
+      Icon = /*#__PURE__*/_jsx(CloseXsmall, {
         color: DSIconColors.PRIMARY,
         "aria-label": "Clear input"
       });
       handleOnClick = handleClear;
     }
-    return /* @__PURE__ */ React2.createElement(SButton, {
+
+    return /*#__PURE__*/_jsx(SButton, {
       disabled: disabled || disableButton,
       icon: Icon,
       onClick: handleOnClick,
-      dataTestid: shouldShowClearIcon ? "ds-searchbox-button-clear" : "ds-searchbox-button"
+      dataTestid: shouldShowClearIcon ? 'ds-searchbox-button-clear' : 'ds-searchbox-button'
     });
-  }, [
-    shouldShowClearIcon,
-    shouldShowSearchIcon,
-    shouldShowAnyIcon,
-    disabled,
-    disableButton,
-    handleSearch,
-    handleClear
-  ]);
-  return /* @__PURE__ */ React2.createElement("div", {
-    style: { position: "relative", zIndex: 0 }
-  }, /* @__PURE__ */ React2.createElement(SearchBoxTextBox, {
-    className,
-    containerProps,
-    disabled,
-    innerRef,
+  }, [shouldShowClearIcon, shouldShowSearchIcon, shouldShowAnyIcon, disabled, disableButton, handleSearch, handleClear]);
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      position: 'relative',
+      zIndex: 0
+    }
+  }, void 0, /*#__PURE__*/_jsx(SearchBoxTextBox, {
+    className: className,
+    containerProps: containerProps,
+    disabled: disabled,
+    innerRef: innerRef,
     onChange: handleChange,
     onKeyUp: handleKeyUp,
-    onBlur,
-    placeholder,
-    readOnly,
-    style,
+    onBlur: onBlur,
+    placeholder: placeholder,
+    readOnly: readOnly,
+    style: style,
     value: searchValue
   }), PureSearchboxIcon);
 };
-DSSearchBox.propTypes = searchBoxProps;
+
 DSSearchBox.defaultProps = defaultProps;
 const SearchBoxWithSchema = describe(DSSearchBox);
 SearchBoxWithSchema.propTypes = searchBoxProps;
-var DSSearchBox_default = DSSearchBox;
-export {
-  DSSearchBox,
-  DSSearchBox as SearchBox,
-  SearchBoxWithSchema,
-  DSSearchBox_default as default
-};
-//# sourceMappingURL=DSSearchBox.js.map
+
+export { SearchBoxWithSchema, DSSearchBox as default };

package/esm/SearchBox/NavSearchBox.js

@@ -1,108 +1,119 @@
-import * as React from "react";
-import React2 from "react";
-import PropTypes from "prop-types";
-import styled from "styled-components";
-import { describe } from "react-desc";
-import { ChevronDown, Search, ChevronUp, CloseXsmall } from "@elliemae/ds-icons";
-import { DSButton } from "@elliemae/ds-button";
-import { DSTextBox } from "../TextBox";
-import { navSearchBoxProps } from "./props";
-import { navSearchBoxDefaultProps } from "./defaultProps";
-const StyledResultTracker = styled.div`
-  padding: 0 8px;
-  color: #a2a9b6; // this is color picked from the placeholder, specs doesn't specify
-  white-space: nowrap;
-  word-spacing: 2px;
-`;
-const StyledVerticalSeparator = styled.div`
-  height: 60%;
-  border-right: 1px solid #a2a9b6; // this is color picked from the placeholder, specs doesn't specify
-`;
-const StyledToolbarRightAddonsWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-`;
-const NavBtn = styled(DSButton)`
-  height: calc(100% - 2px);
-  border: none;
-  border-radius: ${({ last }) => last ? "2px  2px 0px 0px" : "0px"};
-`;
-const RightButtonsGroup = (props) => {
-  const { onNext, onPrevious, onClear, hideNavs, showClear } = props;
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, !hideNavs && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(NavBtn, {
-    buttonType: "text",
-    containerProps: { "data-testid": "ds-navsearchbox-next" },
-    icon: /* @__PURE__ */ React2.createElement(ChevronDown, {
-      color: ["brand-primary", "800"]
-    }),
-    onClick: onNext
-  }), /* @__PURE__ */ React2.createElement(NavBtn, {
-    buttonType: "text",
-    containerProps: { "data-testid": "ds-navsearchbox-prev" },
-    icon: /* @__PURE__ */ React2.createElement(ChevronUp, {
-      color: ["brand-primary", "800"]
-    }),
-    onClick: onPrevious
-  })), showClear ? /* @__PURE__ */ React2.createElement(NavBtn, {
-    containerProps: { "data-testid": "ds-navsearchbox-clear" },
-    buttonType: "text",
-    icon: /* @__PURE__ */ React2.createElement(CloseXsmall, {
-      color: ["brand-primary", "800"]
-    }),
-    onClick: onClear,
-    last: true
-  }) : /* @__PURE__ */ React2.createElement(NavBtn, {
-    containerProps: { "data-testid": "ds-navsearchbox-clear" },
-    buttonType: "text",
-    icon: /* @__PURE__ */ React2.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 ResultTracker = (props) => {
-  const { currentResultIndex, totalResults } = props;
-  if (currentResultIndex === -1 && !totalResults)
-    return null;
-  if (currentResultIndex === -1 && totalResults)
-    return /* @__PURE__ */ React2.createElement(StyledResultTracker, null, totalResults);
-  return /* @__PURE__ */ React2.createElement(StyledResultTracker, null, `${currentResultIndex + 1} / ${totalResults}`);
-};
-ResultTracker.propTypes = {
-  currentResultIndex: PropTypes.number.isRequired,
-  totalResults: PropTypes.number.isRequired
+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';
+import DSButton from '@elliemae/ds-button';
+import DSTextBox from '../TextBox/DSTextBox.js';
+import { navSearchBoxProps } from './props.js';
+import { navSearchBoxDefaultProps } from './defaultProps.js';
+import { jsxs, Fragment } from 'react/jsx-runtime';
+
+var _StyledVerticalSepara, _VerticalSeparator;
+const StyledResultTracker = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-sbwvud-0"
+})(["padding:0 8px;color:#a2a9b6;white-space:nowrap;word-spacing:2px;"]);
+const StyledVerticalSeparator = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-sbwvud-1"
+})(["height:60%;border-right:1px solid #a2a9b6;"]);
+const StyledToolbarRightAddonsWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-sbwvud-2"
+})(["display:flex;align-items:center;justify-content:flex-end;"]);
+const NavBtn = /*#__PURE__*/styled(DSButton).withConfig({
+  componentId: "sc-sbwvud-3"
+})(["height:calc(100% - 2px);border:none;border-radius:", ";"], _ref => {
+  let {
+    last
+  } = _ref;
+  return last ? '2px  2px 0px 0px' : '0px';
+});
+
+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
+    })]
+  });
 };
-const VerticalSeparator = () => /* @__PURE__ */ React2.createElement(StyledVerticalSeparator, null);
-const ToolbarRightAddons = (props) => {
-  const { onNext, onPrevious, onClear, currentResultIndex, totalResults, showClear } = props;
-  return /* @__PURE__ */ React2.createElement(StyledToolbarRightAddonsWrapper, null, /* @__PURE__ */ React2.createElement(ResultTracker, {
+
+const ResultTracker = props => {
+  const {
     currentResultIndex,
     totalResults
-  }), currentResultIndex !== -1 || totalResults ? /* @__PURE__ */ React2.createElement(VerticalSeparator, null) : null, /* @__PURE__ */ React2.createElement(RightButtonsGroup, {
+  } = props;
+  if (currentResultIndex === -1 && !totalResults) return null;
+  if (currentResultIndex === -1 && totalResults) return /*#__PURE__*/_jsx(StyledResultTracker, {}, void 0, totalResults);
+  return /*#__PURE__*/_jsx(StyledResultTracker, {}, void 0, "".concat(currentResultIndex + 1, " / ").concat(totalResults));
+};
+
+const VerticalSeparator = () => _StyledVerticalSepara || (_StyledVerticalSepara = /*#__PURE__*/_jsx(StyledVerticalSeparator, {}));
+
+const ToolbarRightAddons = props => {
+  const {
     onNext,
-    hideNavs: currentResultIndex === -1 && !totalResults,
     onPrevious,
-    showClear,
-    onClear
+    onClear,
+    currentResultIndex,
+    totalResults,
+    showClear
+  } = props;
+  return /*#__PURE__*/_jsx(StyledToolbarRightAddonsWrapper, {}, void 0, /*#__PURE__*/_jsx(ResultTracker, {
+    currentResultIndex: currentResultIndex,
+    totalResults: totalResults
+  }), currentResultIndex !== -1 || totalResults ? _VerticalSeparator || (_VerticalSeparator = /*#__PURE__*/_jsx(VerticalSeparator, {})) : null, /*#__PURE__*/_jsx(RightButtonsGroup, {
+    onNext: onNext,
+    hideNavs: currentResultIndex === -1 && !totalResults,
+    onPrevious: onPrevious,
+    showClear: showClear,
+    onClear: onClear
   }));
 };
-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
-};
-const NavSearchBox = (props) => {
+
+const NavSearchBox = props => {
   const {
     currentResultIndex,
     onChange,
@@ -116,46 +127,50 @@ const NavSearchBox = (props) => {
     autoFocus,
     innerRef
   } = props;
-  const handleChange = (e) => {
-    if (onChange)
-      onChange(e.target.value);
+
+  const handleChange = e => {
+    if (onChange) onChange(e.target.value);
   };
-  const handleKeyDown = (e) => {
+
+  const handleKeyDown = e => {
+    // SHIFT + ENTER
     if (e.shiftKey) {
-      if (e.key === "Enter" || e.keyCode === 13) {
+      if (e.key === 'Enter' || e.keyCode === 13) {
         onPrevious();
       }
-    } else if (e.key === "Escape" || e.keyCode === 27) {
+    } // ESCAPE
+    else if (e.key === 'Escape' || e.keyCode === 27) {
       onClear();
-    } else if (e.key === "Enter" || e.keyCode === 13) {
+    } // ENTER
+    else if (e.key === 'Enter' || e.keyCode === 13) {
       onNext();
     }
   };
-  return /* @__PURE__ */ React2.createElement(DSTextBox, {
+
+  return /*#__PURE__*/_jsx(DSTextBox, {
     onChange: handleChange,
-    containerProps: { "data-testid": "ds-nav-searchbox-input" },
-    onBlur,
+    containerProps: {
+      'data-testid': 'ds-nav-searchbox-input'
+    },
+    onBlur: onBlur,
     onKeyDown: handleKeyDown,
-    placeholder,
-    value,
-    autoFocus,
-    innerRef,
-    rightComponent: /* @__PURE__ */ React2.createElement(ToolbarRightAddons, {
+    placeholder: placeholder,
+    value: value,
+    autoFocus: autoFocus,
+    innerRef: innerRef,
+    rightComponent: /*#__PURE__*/_jsx(ToolbarRightAddons, {
       showClear: !!value,
-      onNext,
-      onPrevious,
-      onClear,
-      currentResultIndex,
-      totalResults
+      onNext: onNext,
+      onPrevious: onPrevious,
+      onClear: onClear,
+      currentResultIndex: currentResultIndex,
+      totalResults: totalResults
     })
   });
 };
-NavSearchBox.propTypes = navSearchBoxProps;
+
 NavSearchBox.defaultProps = navSearchBoxDefaultProps;
 const DSNavSearchBoxWithSchema = describe(NavSearchBox);
 DSNavSearchBoxWithSchema.propTypes = navSearchBoxProps;
-export {
-  DSNavSearchBoxWithSchema,
-  NavSearchBox
-};
-//# sourceMappingURL=NavSearchBox.js.map
+
+export { DSNavSearchBoxWithSchema, NavSearchBox };

package/esm/SearchBox/SButton.js

@@ -1,48 +1,25 @@
-import * as React from "react";
-import React2 from "react";
-import { PropTypes } from "react-desc";
-import styled from "styled-components";
-import { focus } from "@elliemae/ds-system";
-const Button = styled.button`
-  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: ${(props) => props.theme.colors.brand["600"]};
-  }
-  &:disabled {
-    color: #5d6775;
-    cursor: not-allowed;
-    svg {
-      fill: #5d6775;
-    }
-  }
-  &:focus {
-    ${focus()}
-  }
-`;
-const SButton = ({ icon, disabled, onClick, dataTestid = "ds-searchbox-button" }) => /* @__PURE__ */ React2.createElement(Button, {
-  "data-testid": dataTestid,
-  onClick,
-  disabled,
-  type: "button"
-}, icon);
-SButton.propTypes = {
-  onClick: PropTypes.func.isRequired.description("click handler for button"),
-  icon: PropTypes.node.isRequired.description("ds icon to render inside button"),
-  disabled: PropTypes.bool.description("disable button"),
-  dataTestid: PropTypes.string.description("Data test id")
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import styled from 'styled-components';
+import { focus } from '@elliemae/ds-system';
+
+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{", "}"], props => props.theme.colors.brand['600'], focus());
+
+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"
+  }, void 0, icon);
 };
-export {
-  SButton
-};
-//# sourceMappingURL=SButton.js.map
+
+export { SButton };

package/esm/SearchBox/SearchBoxToggle.js

@@ -1,58 +1,68 @@
-import * as React from "react";
-import React2, { useState } from "react";
-import styled from "styled-components";
-import { Search } from "@elliemae/ds-icons";
-import { DSButton } from "@elliemae/ds-button";
-import { DSSearchBox } from "./DSSearchBox";
+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 '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 { jsx } from 'react/jsx-runtime';
+
+var _Search;
+
+const _excluded = ["onSearchButtonClick", "width"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const SEARCH_BUTTON_WIDTH = 26;
-const SearchWrap = styled.div`
-  transition: width 200ms ease;
-  width: ${SEARCH_BUTTON_WIDTH}px;
-  height: 0;
-
-  ${(props) => !props.show ? `
-        opacity:0;
-
-        & * {
-          width: ${SEARCH_BUTTON_WIDTH}px;
-          height: 0;
-          border: 0;
-        }
-      ` : ""}
-  ${(props) => props.isOpen ? `width: ${props.width};opacity: 1;height: auto;` : ""}
-`;
-const SearchBoxToggle = ({ onSearchButtonClick, width, ...rest }) => {
+const SearchWrap = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-xt33wm-0"
+})(["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
+
+const SearchBoxToggle = _ref => {
+  let {
+    onSearchButtonClick,
+    width
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
   const [isOpen, setOpen] = useState(false);
   const [show, setShow] = useState(true);
-  const computedWidth = typeof width === "number" ? `${width}px` : width;
-  const button = /* @__PURE__ */ React2.createElement(DSButton, {
+  const computedWidth = typeof width === 'number' ? "".concat(width, "px") : width;
+
+  const button = /*#__PURE__*/_jsx(DSButton, {
     onClick: () => {
       setOpen(true);
     },
     buttonType: "text",
-    icon: /* @__PURE__ */ React2.createElement(Search, null)
+    icon: _Search || (_Search = /*#__PURE__*/_jsx(Search, {}))
   });
-  return /* @__PURE__ */ React2.createElement("div", null, show && !isOpen && button, /* @__PURE__ */ React2.createElement(SearchWrap, {
+
+  return /*#__PURE__*/_jsx("div", {}, void 0, show && !isOpen && button, /*#__PURE__*/_jsx(SearchWrap, {
     show: !show || isOpen,
-    isOpen,
+    isOpen: isOpen,
     width: computedWidth,
     onTransitionEnd: () => {
       setShow(!isOpen);
     }
-  }, /* @__PURE__ */ React2.createElement(DSSearchBox, {
-    ...rest,
+  }, void 0, /*#__PURE__*/jsx(DSSearchBox, _objectSpread(_objectSpread({}, rest), {}, {
     onSearchButtonClick: () => {
       onSearchButtonClick();
       setOpen(false);
     }
-  })));
+  }))));
 };
+
 SearchBoxToggle.defaultProps = {
   onSearchButtonClick: () => null,
   width: 300
 };
-var SearchBoxToggle_default = SearchBoxToggle;
-export {
-  SearchBoxToggle_default as default
-};
-//# sourceMappingURL=SearchBoxToggle.js.map
+
+export { SearchBoxToggle as default };