<commit_before>import {CloseIcon, ControlsIcon, SearchIcon} from '@sanity/icons'
import {Box, Button, Card, Flex, Spinner, studioTheme} from '@sanity/ui'
import React, {Dispatch, SetStateAction, useCallback, useEffect, useRef, useState} from 'react'
import styled from 'styled-components'
import {useSearchState} from '../contexts/search'
import {supportsTouch} from '../utils/supportsTouch'
import {CustomTextInput} from './CustomTextInput'

interface SearchHeaderProps {
  onClose?: () => void
  setHeaderInputRef: Dispatch<SetStateAction<HTMLInputElement>>
}

const AlignedSpinner = styled(Spinner)`
  svg {
    width: 20px;
    vertical-align: bottom !important;
  }
`

const FilterBox = styled(Box)`
  position: relative;
`

const SearchHeaderCard = styled(Card)`
  flex-shrink: 0;
`

const NotificationBadge = styled.div`
  align-items: center;
  background: ${({theme}) => theme.sanity.color.selectable.primary.enabled.fg};
  color: ${({theme}) => theme.sanity.color.selectable.primary.selected.fg};
  border-radius: 100%;<commit_msg>fix(default-layout): apply offset on search spinner wrapping element<commit_after>import {CloseIcon, ControlsIcon, SearchIcon} from '@sanity/icons'
import {Box, Button, Card, Flex, Spinner, studioTheme} from '@sanity/ui'
import React, {Dispatch, SetStateAction, useCallback, useEffect, useRef, useState} from 'react'
import styled from 'styled-components'
import {useSearchState} from '../contexts/search'
import {supportsTouch} from '../utils/supportsTouch'
import {CustomTextInput} from './CustomTextInput'

interface SearchHeaderProps {
  onClose?: () => void
  setHeaderInputRef: Dispatch<SetStateAction<HTMLInputElement>>
}

const AlignedSpinner = styled(Spinner)`
  align-items: center;
  display: flex;
  justify-content: center;
  margin-top: 4.5px;
  svg {
    width: 20px;
  }
`

const FilterBox = styled(Box)`
  position: relative;
`

const SearchHeaderCard = styled(Card)`
  flex-shrink: 0;
`

const NotificationBadge = styled.div`
  align-items: center;
  background: ${({theme}) => theme.sanity.color.selectable.primary.enabled.fg};
  color: ${({theme}) => theme.sanity.color.selectable.primary.selected.fg};
  border-radius: 100%;
{'fraction_non_alphanumeric': 0.1354071363220494, 'fraction_numerical': 0.006404391582799634, 'mean_word_length': 5.5675675675675675, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 13, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6348839', 'n_tokens_mistral': 705, 'n_tokens_neox': 683, 'n_words': 169}