/* search.tsx generated by @compiled/babel-plugin v0.38.1 */
import "./search.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { Fragment } from 'react';
import { cx } from '@atlaskit/css';
import SearchIcon from '@atlaskit/icon/core/search';
import { fg } from '@atlaskit/platform-feature-flags';
import { Pressable, Show, Text } from '@atlaskit/primitives/compiled';
import { useIsFhsEnabled } from '../fhs-rollout/use-is-fhs-enabled';
import { IconButton } from './themed/migration';
var styles = {
  root: "_2rko12b0 _1rjcze3t _18zr12x7 _yv0e1mfv _4cvr1h6o _bfhk1j9a _vchhusvi _80om1kdv _1e0cglyw _4t3izwfg _p12f1kvu _1bsb1osq _irr3l4ek _1di6r01l _114b11p5",
  rootT26Shape: "_2rko1qi0",
  buttonText: "_yyhyjvu9 _1ii7kb7n",
  iconBefore: "_yyhykb7n _1ii7kb7n _1e0c1txw",
  elemAfter: "_yyhy11wp _1ii7kb7n _1e0c1txw",
  fullHeightSidebar: "_p12fktbq"
};

/**
 * __Search__
 *
 * The search element for the top navigation.
 */
export var Search = function Search(_ref) {
  var label = _ref.label,
    onClick = _ref.onClick,
    _ref$iconBefore = _ref.iconBefore,
    IconBefore = _ref$iconBefore === void 0 ? SearchIcon : _ref$iconBefore,
    elemAfter = _ref.elemAfter,
    interactionName = _ref.interactionName,
    ariaHaspopup = _ref['aria-haspopup'];
  var isFhsEnabled = useIsFhsEnabled();
  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Pressable, {
    style: {
      // To win the specificity war against Emotion we move this into inline styles
      // When Emotion has been stripped from the Design System move this to Compiled.
      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
      cursor: 'text',
      border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-input, #8C8F97)")
    },
    onClick: onClick,
    xcss: cx(styles.root, fg('platform-dst-shape-theme-default') && styles.rootT26Shape, isFhsEnabled && styles.fullHeightSidebar),
    interactionName: interactionName,
    "aria-haspopup": ariaHaspopup
  }, /*#__PURE__*/React.createElement("span", {
    className: ax([styles.iconBefore])
  }, /*#__PURE__*/React.createElement(IconBefore, {
    color: "var(--ds-icon-subtle, #505258)",
    spacing: "spacious",
    label: ""
  })), /*#__PURE__*/React.createElement("div", {
    className: ax([styles.buttonText])
  }, /*#__PURE__*/React.createElement(Text, {
    color: "color.text.subtlest"
  }, label)), elemAfter && /*#__PURE__*/React.createElement("span", {
    className: ax([styles.elemAfter])
  }, elemAfter)), /*#__PURE__*/React.createElement(Show, {
    below: "xs"
  }, /*#__PURE__*/React.createElement(IconButton, {
    label: label,
    appearance: "subtle",
    icon: SearchIcon,
    onClick: onClick,
    interactionName: interactionName,
    "aria-haspopup": ariaHaspopup
  })));
};