carbon-react 111.5.2 → 111.5.3

package/esm/components/search/index.d.ts

@@ -1 +1,2 @@
-export { default } from "./search";
+export { default } from "./search.component";
+export type { SearchProps } from "./search.component";

package/esm/components/search/search-button.style.d.ts

@@ -0,0 +1,3 @@
+export declare const StyledButtonIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledSearchButton: import("styled-components").StyledComponent<"div", any, {}, never>;
+export default StyledSearchButton;

package/esm/components/search/search-button.style.js

@@ -0,0 +1,36 @@
+import styled from "styled-components";
+import StyledButton from "../button/button.style";
+import StyledIcon from "../icon/icon.style";
+import { baseTheme } from "../../style/themes";
+export const StyledButtonIcon = styled.div`
+  &&& ${StyledIcon} {
+    color: var(--colorsActionMajorYang100);
+    margin-right: 0px;
+  }
+`;
+const StyledSearchButton = styled.div`
+  display: inline-flex;
+  border-bottom: none;
+
+  & ${StyledButton} {
+    background-color: var(--colorsActionMajor500);
+    border-color: var(--colorsActionMajorTransparent);
+    :hover {
+      background: var(--colorsActionMajor600);
+      border-color: var(--colorsActionMajorTransparent);
+    }
+
+    width: 40px;
+    margin: 0px 0px;
+    padding-bottom: 3px;
+    :focus {
+      z-index: ${({
+  theme
+}) => theme.zIndex.smallOverlay};
+    }
+  }
+`;
+StyledSearchButton.defaultProps = {
+  theme: baseTheme
+};
+export default StyledSearchButton;

package/esm/components/search/search.component.d.ts

@@ -0,0 +1,55 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { ValidationProps } from "../../__internal__/validations";
+export interface SearchEvent {
+    target: {
+        name?: string;
+        id?: string;
+        value: string;
+    };
+}
+export interface SearchProps extends ValidationProps, MarginProps {
+    /** Prop to specify the aria-label of the search component */
+    "aria-label"?: string;
+    /** Prop for `uncontrolled` use */
+    defaultValue?: string;
+    /** Prop for `id` */
+    id?: string;
+    /** A callback to retrieve the input reference */
+    inputRef?: React.MutableRefObject<HTMLInputElement | null>;
+    /** Prop for `name` */
+    name?: string;
+    /** Prop for `onBlur` events */
+    onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
+    /** Prop for `onChange` events */
+    onChange?: (ev: SearchEvent) => void;
+    /** Prop for `onClick` events.
+     *  `onClick` events are triggered when the `searchButton` is clicked
+     */
+    onClick?: (ev: SearchEvent) => void;
+    /** Prop for `onFocus` events */
+    onFocus?: (ev: React.FocusEvent<HTMLInputElement>) => void;
+    /** Prop for `onKeyDown` events */
+    onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement>) => void;
+    /** Prop for a placeholder */
+    placeholder?: string;
+    /** Prop boolean to state whether the `search` icon renders */
+    searchButton?: boolean;
+    /**
+     * Prop for specifying an input width length.
+     * Leaving the `searchWidth` prop with no value will default the width to '100%'
+     */
+    searchWidth?: string;
+    /** Prop for active search threshold. This must be a positive number */
+    threshold?: number;
+    /** Prop for `controlled` use */
+    value?: string;
+    /** Prop to specify the styling of the search component */
+    variant?: "default" | "dark";
+    /** Input tabindex */
+    tabIndex?: number;
+    /** Overrides the default tooltip position */
+    tooltipPosition?: "top" | "bottom" | "left" | "right";
+}
+export declare const Search: ({ defaultValue, onChange, onClick, onFocus, onBlur, onKeyDown, value, id, name, threshold, searchWidth, searchButton, placeholder, variant, "aria-label": ariaLabel, inputRef, tabIndex, error, warning, info, tooltipPosition, ...rest }: SearchProps) => JSX.Element;
+export default Search;

package/esm/components/search/search.component.js

@@ -2,15 +2,14 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useState, useMemo, useEffect } from "react";
 import PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
 import invariant from "invariant";
-import StyledSearch, { StyledSearchButton, StyledButtonIcon } from "./search.style";
-import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { filterStyledSystemMarginProps } from "../../style/utils";
+import tagComponent from "../../__internal__/utils/helpers/tags/tags";
+import StyledSearch from "./search.style";
+import StyledSearchButton, { StyledButtonIcon } from "./search-button.style";
 import Icon from "../icon";
 import Textbox from "../textbox";
 import Button from "../button";
-const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 
 const Search = ({
   defaultValue,
@@ -39,6 +38,7 @@ const Search = ({
   const isControlled = value !== undefined;
   const initialValue = isControlled ? value : defaultValue;
   !(typeof initialValue === "string") ? process.env.NODE_ENV !== "production" ? invariant(false, "This component has no initial value") : invariant(false) : void 0;
+  !(threshold === undefined || typeof threshold === "number" && threshold > 0) ? process.env.NODE_ENV !== "production" ? invariant(false, "Threshold must be a positive number") : invariant(false) : void 0;
   const [searchValue, setSearchValue] = useState(initialValue);
   const [isFocused, setIsFocused] = useState(false);
   const [searchIsActive, setSearchIsActive] = useState(initialValue.length >= threshold);
@@ -57,36 +57,35 @@ const Search = ({
       return ["search", -1];
     }
 
-    return ["", -1];
+    return [undefined, -1];
   }, [isControlled, searchValue, value, isFocused, searchIsActive, threshold, searchButton, inputRef]);
+  let buttonProps = {};
 
-  const handleChange = e => {
+  const handleChange = event => {
     if (onChange) {
-      onChange(e);
+      onChange(event);
     }
 
     if (!isControlled) {
-      setSearchValue(e.target.value);
+      setSearchValue(event.target.value);
     }
   };
 
-  const handleFocus = e => {
+  const handleFocus = event => {
     setIsFocused(true);
 
     if (onFocus) {
-      onFocus(e);
+      onFocus(event);
     }
   };
 
-  let buttonProps = {};
-
   if (searchButton && onClick) {
     buttonProps = {
-      onClick: ev => {
+      onClick: () => {
         onClick({
           target: {
-            name: ev.target.name || name,
-            id: ev.target.id || id,
+            name,
+            id,
             value: !isControlled ? searchValue : value
           }
         });
@@ -111,39 +110,40 @@ const Search = ({
     }
   };
 
-  const handleMouseDown = ev => {
-    ev.preventDefault();
+  const handleMouseDown = event => {
+    event.preventDefault();
   };
 
-  const handleBlur = e => {
+  const handleBlur = event => {
     setIsFocused(false);
 
     if (onBlur) {
-      onBlur(e);
+      onBlur(event);
     }
   };
 
-  const handleKeyDown = ev => {
-    if (ev.key.length === 1) {
-      ev.stopPropagation();
+  const handleKeyDown = event => {
+    if (event.key.length === 1) {
+      event.stopPropagation();
     }
 
     if (onKeyDown) {
-      onKeyDown(ev);
+      onKeyDown(event);
     }
   };
 
   const assignInput = input => {
     if (inputRef) {
-      inputRef.current = input.current;
+      inputRef.current = input === null || input === void 0 ? void 0 : input.current;
     }
   };
 
+  const isSearchTyped = isFocused || (!isControlled ? !!searchValue.length : !!value.length);
   return /*#__PURE__*/React.createElement(StyledSearch, _extends({
     isFocused: isFocused,
     searchWidth: searchWidth,
     searchIsActive: searchIsActive,
-    searchHasValue: !isControlled ? searchValue && searchValue.length : value && value.length,
+    searchHasValue: !isControlled ? !!(searchValue !== null && searchValue !== void 0 && searchValue.length) : !!(value !== null && value !== void 0 && value.length),
     showSearchButton: searchButton,
     variant: variant,
     mb: 0
@@ -168,8 +168,7 @@ const Search = ({
     warning: warning,
     info: info,
     tooltipPosition: tooltipPosition
-  }), searchButton && /*#__PURE__*/React.createElement(StyledSearchButton, null, Boolean(isFocused || (!isControlled ? searchValue.length : value.length)) && /*#__PURE__*/React.createElement(Button, _extends({
-    tabIndex: iconTabIndex,
+  }), searchButton && /*#__PURE__*/React.createElement(StyledSearchButton, null, isSearchTyped && /*#__PURE__*/React.createElement(Button, _extends({
     size: "medium",
     px: "16px"
   }, buttonProps), /*#__PURE__*/React.createElement(StyledButtonIcon, null, /*#__PURE__*/React.createElement(Icon, {
@@ -178,92 +177,183 @@ const Search = ({
 };
 
 Search.propTypes = {
-  /** Filtered styled system margin props */
-  ...marginPropTypes,
-
-  /** Prop for `uncontrolled` use */
-  defaultValue: PropTypes.string,
-
-  /** Prop for `controlled` use */
-  value: PropTypes.string,
-
-  /** Prop for `onClick` events.
-   * `onClick` events are triggered when the `searchButton` is clicked */
-  onClick: PropTypes.func,
-
-  /** Prop for `onChange` events */
-  onChange: PropTypes.func,
-
-  /** Prop for `onKeyDown` events */
-  onKeyDown: PropTypes.func,
-
-  /** Prop boolean to state whether the `search` icon renders */
-  searchButton: PropTypes.bool,
-
-  /** Prop for specifying an input width length.
-   * Leaving the `searchWidth` prop with no value will default the width to '100%' */
-  searchWidth: PropTypes.string,
-
-  /** Prop for `onFocus` events */
-  onFocus: PropTypes.func,
-
-  /** Prop for `onBlur` events */
-  onBlur: PropTypes.func,
-
-  /** Prop for `id` */
-  id: PropTypes.string,
-
-  /** Prop for `name` */
-  name: PropTypes.string,
-
-  /** Prop for active search threshold. This must be a positive number */
-  threshold(props, propName) {
-    let error;
-
-    if (props[propName] && typeof props[propName] === "number" && props[propName] < 0) {
-      error = new Error("Threshold must be a positive number.");
-    }
-
-    return error;
-  },
-
-  /** Prop for a placeholder */
-  placeholder: PropTypes.string,
-
-  /** Prop to specify the styling of the search component */
-  variant: PropTypes.oneOf(["default", "dark"]),
-
-  /** Prop to specify the aria-label of the search component */
   "aria-label": PropTypes.string,
-
-  /**
-   * @private
-   * @ignore
-   * A callback to retrieve the input reference
-   */
-  inputRef: PropTypes.shape({
-    current: PropTypes.instanceOf(Element)
+  "defaultValue": PropTypes.string,
+  "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  "id": PropTypes.string,
+  "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  "inputRef": PropTypes.shape({
+    "current": PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.object]).isRequired
   }),
-
-  /** Input tabindex */
-  tabIndex: PropTypes.number,
-
-  /** Indicate that error has occurred
-  Pass string to display icon, tooltip and red border
-  Pass true boolean to only display red border */
-  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
-  /** Indicate that warning has occurred
-  Pass string to display icon, tooltip and orange border
-  Pass true boolean to only display orange border */
-  warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
-  /** Indicate additional information
-  Pass string to display icon, tooltip and blue border
-  Pass true boolean to only display blue border */
-  info: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
-  /** Overrides the default tooltip position */
-  tooltipPosition: PropTypes.oneOf(["top", "bottom", "left", "right"])
+  "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "margin": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "ml": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mx": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "my": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "name": PropTypes.string,
+  "onBlur": PropTypes.func,
+  "onChange": PropTypes.func,
+  "onClick": PropTypes.func,
+  "onFocus": PropTypes.func,
+  "onKeyDown": PropTypes.func,
+  "placeholder": PropTypes.string,
+  "searchButton": PropTypes.bool,
+  "searchWidth": PropTypes.string,
+  "tabIndex": PropTypes.number,
+  "threshold": PropTypes.number,
+  "tooltipPosition": PropTypes.oneOf(["bottom", "left", "right", "top"]),
+  "value": PropTypes.string,
+  "variant": PropTypes.oneOf(["dark", "default"]),
+  "warning": PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
 };
+export { Search };
 export default Search;

package/esm/components/search/search.style.d.ts

@@ -1,4 +1,11 @@
+interface StyledSearchProps {
+    name?: string;
+    isFocused?: boolean;
+    searchHasValue?: boolean;
+    searchIsActive?: boolean;
+    searchWidth?: string;
+    showSearchButton?: boolean;
+    variant?: string;
+}
+declare const StyledSearch: import("styled-components").StyledComponent<"div", any, StyledSearchProps, never>;
 export default StyledSearch;
-export const StyledSearchButton: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledButtonIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const StyledSearch: import("styled-components").StyledComponent<"div", any, {}, never>;

package/esm/components/search/search.style.js

@@ -4,7 +4,6 @@ import StyledInputIconToggle from "../../__internal__/input-icon-toggle/input-ic
 import StyledInputPresentation from "../../__internal__/input/input-presentation.style";
 import StyledInput from "../../__internal__/input/input.style";
 import StyledIcon from "../icon/icon.style";
-import StyledButton from "../button/button.style";
 import { baseTheme } from "../../style/themes";
 import StyledFormField from "../../__internal__/form-field/form-field.style";
 const StyledSearch = styled.div`
@@ -138,34 +137,4 @@ const StyledSearch = styled.div`
 StyledSearch.defaultProps = {
   theme: baseTheme
 };
-export default StyledSearch;
-export const StyledSearchButton = styled.div`
-  display: inline-flex;
-  border-bottom: none;
-  & ${StyledButton} {
-    background-color: var(--colorsActionMajor500);
-    border-color: var(--colorsActionMajorTransparent);
-    :hover {
-      background: var(--colorsActionMajor600);
-      border-color: var(--colorsActionMajorTransparent);
-    }
-
-    width: 40px;
-    margin: 0px 0px;
-    padding-bottom: 3px;
-    :focus {
-      z-index: ${({
-  theme
-}) => theme.zIndex.smallOverlay};
-    }
-  }
-`;
-export const StyledButtonIcon = styled.div`
-  &&& ${StyledIcon} {
-    color: var(--colorsActionMajorYang100);
-    margin-right: 0px;
-  }
-`;
-StyledSearchButton.defaultProps = {
-  theme: baseTheme
-};
+export default StyledSearch;

package/lib/components/search/index.d.ts

@@ -1 +1,2 @@
-export { default } from "./search";
+export { default } from "./search.component";
+export type { SearchProps } from "./search.component";

package/lib/components/search/search-button.style.d.ts

@@ -0,0 +1,3 @@
+export declare const StyledButtonIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledSearchButton: import("styled-components").StyledComponent<"div", any, {}, never>;
+export default StyledSearchButton;

package/lib/components/search/search-button.style.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StyledButtonIcon = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _button = _interopRequireDefault(require("../button/button.style"));
+
+var _icon = _interopRequireDefault(require("../icon/icon.style"));
+
+var _themes = require("../../style/themes");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const StyledButtonIcon = _styledComponents.default.div`
+  &&& ${_icon.default} {
+    color: var(--colorsActionMajorYang100);
+    margin-right: 0px;
+  }
+`;
+exports.StyledButtonIcon = StyledButtonIcon;
+const StyledSearchButton = _styledComponents.default.div`
+  display: inline-flex;
+  border-bottom: none;
+
+  & ${_button.default} {
+    background-color: var(--colorsActionMajor500);
+    border-color: var(--colorsActionMajorTransparent);
+    :hover {
+      background: var(--colorsActionMajor600);
+      border-color: var(--colorsActionMajorTransparent);
+    }
+
+    width: 40px;
+    margin: 0px 0px;
+    padding-bottom: 3px;
+    :focus {
+      z-index: ${({
+  theme
+}) => theme.zIndex.smallOverlay};
+    }
+  }
+`;
+StyledSearchButton.defaultProps = {
+  theme: _themes.baseTheme
+};
+var _default = StyledSearchButton;
+exports.default = _default;