@atlaskit/atlassian-navigation/dist/cjs/components/Search/skeleton.js

A horizontal navigation component for Atlassian products.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SearchSkeleton = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("react");
var _react2 = require("@emotion/react");
var _constants = require("../../common/constants");
var _theme = require("../../theme");
var _skeleton = require("../IconButton/skeleton");
/** @jsx jsx */

var searchInputContainerStyles = (0, _react2.css)((0, _defineProperty2.default)({
  marginRight: _constants.gridSize,
  marginLeft: 20,
  position: 'relative'
}, "@media (max-width: ".concat(_constants.CREATE_BREAKPOINT - 1, "px)"), {
  display: 'none !important'
}));
var searchInputSkeletonStyles = (0, _react2.css)({
  boxSizing: 'border-box',
  width: '220px',
  height: "".concat(_constants.gridSize * 4, "px"),
  padding: "0 ".concat(_constants.gridSize, "px 0 40px"),
  borderRadius: 6,
  opacity: 0.15
});
var searchIconStyles = (0, _react2.css)((0, _defineProperty2.default)({}, "@media (min-width: ".concat(_constants.CREATE_BREAKPOINT, "px)"), {
  display: 'none !important'
}));

// Not exported to consumers, only used in NavigationSkeleton
// eslint-disable-next-line @repo/internal/react/require-jsdoc
var SearchSkeleton = function SearchSkeleton() {
  var theme = (0, _theme.useTheme)();
  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", {
    css: searchInputContainerStyles
  }, (0, _react2.jsx)("div", {
    style: theme.mode.skeleton,
    css: searchInputSkeletonStyles
  })), (0, _react2.jsx)(_skeleton.IconButtonSkeleton, {
    css: searchIconStyles,
    marginRight: 5,
    size: _constants.gridSize * 3.25
  }));
};
exports.SearchSkeleton = SearchSkeleton;