From cf63654478425d0f573b8b2ac6b2207af9d6585f Mon Sep 17 00:00:00 2001
From: Borghild <borghild.vikoyr@miles.no>
Date: Wed, 21 Aug 2024 08:58:06 +0200
Subject: [PATCH] :art: change search to not search when you type

---
 .eslintrc.cjs                                 |   1 +
 web/core/Button/index.tsx                     |   9 +-
 web/package.json                              |   6 +-
 .../pageTemplates/newsroom/Filters.tsx        |   9 +-
 .../search/ControlledSearchBox.tsx            |  10 +-
 web/pageComponents/search/Search.tsx          |  16 +--
 web/pageComponents/search/SearchBox.tsx       | 116 +++++++++++----
 web/pages/search/index.global.tsx             |  41 +++---
 web/pnpm-lock.yaml                            | 132 +++++-------------
 web/sections/Grid/Span2And1.tsx               |   1 +
 web/sections/Grid/ThreeColumns.tsx            |   1 +
 web/styles/tailwind.css                       |  15 ++
 web/tailwind.config.cjs                       |   4 +
 13 files changed, 183 insertions(+), 178 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 4910d916c..8c21ff678 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -42,6 +42,7 @@ module.exports = {
     ],
     // This rule was so noicy so let's turn it off and see how that works
     '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/ban-ts-comment': ['error', { 'ts-ignore': 'allow-with-description' }],
     'import/newline-after-import': ['error'],
     'import/no-unresolved': ['error', { ignore: ['^@'] }],
     'react/no-array-index-key': ['error'],
diff --git a/web/core/Button/index.tsx b/web/core/Button/index.tsx
index f1fab7276..e735fa7c4 100644
--- a/web/core/Button/index.tsx
+++ b/web/core/Button/index.tsx
@@ -1,6 +1,6 @@
 import { IconType } from '@equinor/eds-core-react/dist/types/components/Icon/Icon.types'
 import { ButtonHTMLAttributes, forwardRef } from 'react'
-import { twMerge } from 'tailwind-merge'
+import envisTwMerge from '../../twMerge'
 
 export const commonButtonStyling = `
 w-fit
@@ -101,7 +101,12 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   ({ variant = 'contained', type = 'button', children, icon: Icon, className = '', ...rest }, ref) => {
     const variantClassNames = getVariant(variant)
 
-    const buttonClassNames = twMerge(commonButtonStyling, variantClassNames, `${Icon ? 'flex gap-2' : ''}`, className)
+    const buttonClassNames = envisTwMerge(
+      commonButtonStyling,
+      variantClassNames,
+      `${Icon ? 'flex gap-2' : ''}`,
+      className,
+    )
 
     return (
       <button ref={ref} type={type} className={buttonClassNames} {...rest}>
diff --git a/web/package.json b/web/package.json
index 987e48cdc..75fbbad6b 100644
--- a/web/package.json
+++ b/web/package.json
@@ -55,7 +55,7 @@
     "html-entities": "^2.3.2",
     "http-proxy": "^1.18.1",
     "ics": "^3.1.0",
-    "instantsearch.js": "^4.53.0",
+    "instantsearch.js": "^4.73.4",
     "next": "13.5.6",
     "next-sanity": "^4.1.7",
     "next-sanity-image": "^6.0.0",
@@ -69,8 +69,8 @@
     "react-dom": "^18.2.0",
     "react-error-boundary": "^3.1.4",
     "react-hook-form": "7.51.3",
-    "react-instantsearch": "^7.3.0",
-    "react-instantsearch-router-nextjs": "^7.3.0",
+    "react-instantsearch": "^7.12.4",
+    "react-instantsearch-router-nextjs": "^7.12.4",
     "react-intl": "^6.0.2",
     "react-is": "^18.1.0",
     "react-twitter-embed": "^4.0.4",
diff --git a/web/pageComponents/pageTemplates/newsroom/Filters.tsx b/web/pageComponents/pageTemplates/newsroom/Filters.tsx
index 8ff737fa7..3f3e9e79b 100644
--- a/web/pageComponents/pageTemplates/newsroom/Filters.tsx
+++ b/web/pageComponents/pageTemplates/newsroom/Filters.tsx
@@ -1,10 +1,9 @@
-import { useState } from 'react'
 import { useIntl } from 'react-intl'
 import styled from 'styled-components'
 import FilterHeader from './FilterHeader'
 import { RefinementList } from './RefinementList'
-import UncontrolledSearchBox from './UncontrolledSearchBox'
 import { Accordion, AccordionItem, AccordionPanel } from '@chakra-ui/react'
+import { SearchBox } from '../../../pageComponents/search/SearchBox'
 
 const StyledAccordion = styled(Accordion)`
   @media (min-width: 800px) {
@@ -32,7 +31,11 @@ const Filters = ({ ...rest }) => {
   return (
     <StyledFilters {...rest}>
       <SearchBoxContainer>
-        <UncontrolledSearchBox />
+        <SearchBox
+          className="bg-white-100 border-grey-40 text-slate-80 focus-visible:envis-outline"
+          submitClassName="bg-norwegian-woods-100 text-white-100 hover:bg-slate-blue-95"
+          resetClassName="text-grey-50 border-grey-40"
+        />
       </SearchBoxContainer>
       <StyledAccordion id="filters" allowMultiple>
         <AccordionItem>
diff --git a/web/pageComponents/search/ControlledSearchBox.tsx b/web/pageComponents/search/ControlledSearchBox.tsx
index dc765e4c9..d57164a44 100644
--- a/web/pageComponents/search/ControlledSearchBox.tsx
+++ b/web/pageComponents/search/ControlledSearchBox.tsx
@@ -58,15 +58,7 @@ export type ControlledSearchBoxProps = ComponentProps<'div'> & {
   value: string
 }
 
-const ControlledSearchBox = ({
-  inputRef,
-
-  onChange,
-  onReset,
-  onSubmit,
-  value,
-  ...props
-}: ControlledSearchBoxProps) => {
+const ControlledSearchBox = ({ inputRef, onChange, onReset, onSubmit, value, ...props }: ControlledSearchBoxProps) => {
   const intl = useIntl()
 
   function handleSubmit(event: React.FormEvent) {
diff --git a/web/pageComponents/search/Search.tsx b/web/pageComponents/search/Search.tsx
index 2493b7bdd..a04d796b2 100644
--- a/web/pageComponents/search/Search.tsx
+++ b/web/pageComponents/search/Search.tsx
@@ -4,7 +4,7 @@ import dynamic from 'next/dynamic'
 import { Flags } from '../../common/helpers/datasetHelpers'
 import { SearchBox } from './SearchBox'
 import { getIsoFromLocale } from '../../lib/localization'
-import { SearchContextProvider } from './SearchContext'
+//import { SearchContextProvider } from './SearchContext'
 import { createInstantSearchRouterNext } from 'react-instantsearch-router-nextjs'
 import singletonRouter, { useRouter } from 'next/router'
 import type { UiState } from 'instantsearch.js'
@@ -168,13 +168,13 @@ const Search = () => {
         <Index indexName={index.value} key={index.label} indexId={index.value} />
       ))}
 
-      <SearchContextProvider>
-        <SearchBox />
-        <SearchResults resultsRef={resultsRef} items={indices} />
-        <PaginationContextProvider defaultRef={resultsRef}>
-          <StyledPagination padding={padding} hitsPerPage={5} />
-        </PaginationContextProvider>
-      </SearchContextProvider>
+      {/*       <SearchContextProvider> */}
+      <SearchBox />
+      <SearchResults resultsRef={resultsRef} items={indices} />
+      <PaginationContextProvider defaultRef={resultsRef}>
+        <StyledPagination padding={padding} hitsPerPage={5} />
+      </PaginationContextProvider>
+      {/*       </SearchContextProvider> */}
     </InstantSearch>
   )
 }
diff --git a/web/pageComponents/search/SearchBox.tsx b/web/pageComponents/search/SearchBox.tsx
index 1b1426ce3..f73046838 100644
--- a/web/pageComponents/search/SearchBox.tsx
+++ b/web/pageComponents/search/SearchBox.tsx
@@ -1,52 +1,106 @@
-import { useEffect, useRef, useState, ChangeEvent, ComponentProps, useContext } from 'react'
+import { useRef, useState, ChangeEvent, ComponentProps } from 'react'
 import { useSearchBox, UseSearchBoxProps } from 'react-instantsearch'
-import ControlledSearchBox from './ControlledSearchBox'
-import { SearchContext } from './SearchContext'
+import { close, search } from '@equinor/eds-icons'
+import { useIntl } from 'react-intl'
+import { Icon } from '@equinor/eds-core-react'
+import envisTwMerge from '../../twMerge'
 
-const DEBOUNCE_TIME = 800
-
-export type SearchBoxProps = ComponentProps<'div'> & UseSearchBoxProps
-
-let timerId: any = undefined
+export type SearchBoxProps = {
+  className?: string
+  resetClassName?: string
+  submitClassName?: string
+} & ComponentProps<'div'> &
+  UseSearchBoxProps
 
 const queryHook: UseSearchBoxProps['queryHook'] = (query, search) => {
-  if (timerId) {
-    clearTimeout(timerId)
+  if (query !== '') {
+    search(query)
   }
-  timerId = setTimeout(() => search(query), DEBOUNCE_TIME)
 }
 
-export function SearchBox(props: SearchBoxProps) {
-  // I don't think we need iSearchStalled when we don't have a manual reset button and/or loading
-  // spinner if search is slow? Do we need a spinner if this happens?
-  const { query, refine /* isSearchStalled */, clear } = useSearchBox({ ...props, queryHook })
+export function SearchBox({ className = '', resetClassName = '', submitClassName = '', ...rest }: SearchBoxProps) {
+  const intl = useIntl()
+  const { query, refine, clear } = useSearchBox({ ...rest, queryHook })
   const [value, setValue] = useState(query)
-  const { setUserTyped } = useContext(SearchContext)
   const inputRef = useRef<HTMLInputElement>(null)
 
-  function onReset() {
+  function handleReset() {
     setValue('')
     clear()
-    setUserTyped(false)
+  }
+
+  function onSubmit(event: React.FormEvent) {
+    event.preventDefault()
+    event.stopPropagation()
+    refine(value)
   }
 
   function onChange(event: ChangeEvent<HTMLInputElement>) {
-    setUserTyped(true)
     setValue(event.currentTarget.value)
-    refine(event.currentTarget.value)
   }
 
-  useEffect(() => {
-    setValue(query)
-  }, [query])
-
   return (
-    <ControlledSearchBox
-      inputRef={inputRef}
-      /* isSearchStalled={isSearchStalled} */
-      onChange={onChange}
-      onReset={onReset}
-      value={value}
-    />
+    <form action="" role="search" noValidate onSubmit={onSubmit} onReset={handleReset} className="flex ">
+      <input
+        aria-label={intl.formatMessage({ id: 'search', defaultMessage: 'Search' })}
+        ref={inputRef}
+        autoComplete="off"
+        autoCorrect="off"
+        autoCapitalize="off"
+        placeholder={intl.formatMessage({ id: 'search', defaultMessage: 'Search' })}
+        spellCheck={false}
+        maxLength={512}
+        type="search"
+        value={value}
+        onChange={onChange}
+        className={envisTwMerge(
+          `flex-grow 
+          border-y
+          border-l 
+          border-white-100 
+          bg-slate-blue-95
+          rounded-s-xs
+          focus:outline-none
+          focus-visible:envis-outline-invert
+          text-white-100
+          pl-6 pr-12
+          py-4
+          no-webkit-search-cancel
+          `,
+          className,
+        )}
+      />
+      <button
+        type="reset"
+        hidden={value.length === 0}
+        className={envisTwMerge(
+          `group/reset px-4 border-y
+          border-r 
+          border-white-100 focus:outline-none focus-visible:envis-outline-invert
+          text-white-100 group-hover/reset:text-white-100/40`,
+          resetClassName,
+        )}
+      >
+        <Icon size={24} data={close} />
+      </button>
+      <button
+        type="submit"
+        className={envisTwMerge(
+          `h-inherit 
+          rounded-e-xs
+          px-4
+          py-3
+          bg-white-100
+          text-slate-blue-95
+          hover:bg-white-100/40
+          hover:text-white-100
+          focus:outline-none
+          focus-visible:envis-outline-invert`,
+          submitClassName,
+        )}
+      >
+        <Icon size={24} data={search} />
+      </button>
+    </form>
   )
 }
diff --git a/web/pages/search/index.global.tsx b/web/pages/search/index.global.tsx
index 03406b1e7..57d5cba3d 100644
--- a/web/pages/search/index.global.tsx
+++ b/web/pages/search/index.global.tsx
@@ -5,8 +5,6 @@ import type { GetStaticProps } from 'next/types'
 import { defaultLanguage } from '../../languages'
 import { getIsoFromLocale } from '../../lib/localization'
 import getIntl from '../../common/helpers/getIntl'
-import styled from 'styled-components'
-import { Button } from '@components'
 import { Icon } from '@equinor/eds-core-react'
 import { close } from '@equinor/eds-icons'
 import { TopbarDropdown } from '../../pageComponents/shared/siteMenu/TopbarDropdown'
@@ -16,24 +14,6 @@ import Search from '../../pageComponents/search/Search'
 import { useRouter } from 'next/router'
 import { FloatingOverlay } from '@floating-ui/react'
 
-const InvertedButton = styled(Button)`
-  color: var(--white-100);
-  &:hover {
-    color: var(--slate-blue-95);
-    background-color: var(--moss-green-60);
-  }
-  &:focus-visible,
-  &[data-focus-visible-added]:focus {
-    outline-color: var(--mist-blue-100);
-  }
-`
-
-const SearchContainer = styled.div`
-  padding: var(--space-large);
-  max-width: 700px;
-  margin: 0 auto;
-`
-
 export default function SearchPage() {
   const router = useRouter()
   const intl = useIntl()
@@ -47,20 +27,31 @@ export default function SearchPage() {
         <TopbarDropdown background={{ backgroundColor: 'Slate Blue 95' }}>
           <NavTopbar>
             <LogoLink />
-            <InvertedButton
-              variant="ghost_icon"
+            <button
+              type="button"
               aria-expanded={true}
               aria-label="Close search"
               onClick={() => {
                 router.back()
               }}
+              className={`
+                p-3
+                rounded-full 
+                text-white-100
+                hover:bg-moss-green-50
+                hover:text-slate-blue-95
+                focus:outline-none
+                focus-visible:envis-outline-invert
+                active:scale-99
+                active:bg-white-100/20
+                `}
             >
               <Icon size={24} data={close} />
-            </InvertedButton>
+            </button>
           </NavTopbar>
-          <SearchContainer>
+          <div className="p-8 max-w-[700px] mx-auto">
             <Search />
-          </SearchContainer>
+          </div>
         </TopbarDropdown>
       </FloatingOverlay>
     </>
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index 7d876949e..b4a434537 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -110,8 +110,8 @@ dependencies:
     specifier: ^3.1.0
     version: 3.1.0
   instantsearch.js:
-    specifier: ^4.53.0
-    version: 4.53.0(algoliasearch@4.16.0)
+    specifier: ^4.73.4
+    version: 4.73.4(algoliasearch@4.16.0)
   next:
     specifier: 13.5.6
     version: 13.5.6(@babel/core@7.21.4)(react-dom@18.2.0)(react@18.2.0)
@@ -152,11 +152,11 @@ dependencies:
     specifier: 7.51.3
     version: 7.51.3(react@18.2.0)
   react-instantsearch:
-    specifier: ^7.3.0
-    version: 7.6.0(algoliasearch@4.16.0)(react-dom@18.2.0)(react@18.2.0)
+    specifier: ^7.12.4
+    version: 7.12.4(algoliasearch@4.16.0)(react-dom@18.2.0)(react@18.2.0)
   react-instantsearch-router-nextjs:
-    specifier: ^7.3.0
-    version: 7.6.0(algoliasearch@4.16.0)(next@13.5.6)(react@18.2.0)
+    specifier: ^7.12.4
+    version: 7.12.4(algoliasearch@4.16.0)(next@13.5.6)(react@18.2.0)
   react-intl:
     specifier: ^6.0.2
     version: 6.0.2(react@18.2.0)(typescript@4.8.4)
@@ -390,17 +390,6 @@ packages:
       '@algolia/logger-common': 4.16.0
       '@algolia/requester-common': 4.16.0
 
-  /@algolia/ui-components-highlight-vdom@1.2.1:
-    resolution: {integrity: sha512-IlYgIaCUEkz9ezNbwugwKv991oOHhveyq6nzL0F1jDzg1p3q5Yj/vO4KpNG910r2dwGCG3nEm5GtChcLnarhFA==}
-    dependencies:
-      '@algolia/ui-components-shared': 1.2.1
-      '@babel/runtime': 7.24.4
-    dev: false
-
-  /@algolia/ui-components-shared@1.2.1:
-    resolution: {integrity: sha512-a7mYHf/GVQfhAx/HRiMveKkFvHspQv/REdG+C/FIOosiSmNZxX7QebDwJkrGSmDWdXO12D0Qv1xn3AytFcEDlQ==}
-    dev: false
-
   /@alloc/quick-lru@5.2.0:
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
@@ -4534,10 +4523,6 @@ packages:
     resolution: {integrity: sha512-L7wLDZlWm5mROzv87W0ofIYeQP5K2UhoFnnUyEWLKM6UBb0ZNRgAqp98qE5DkgfBXdWfc2kYmw9KZm4NLjRbsw==}
     dev: false
 
-  /@types/google.maps@3.53.4:
-    resolution: {integrity: sha512-IiDAYTONQEKCBssPtoM0XqWF8YIIk2leba4NOf9qVQ/d8l5gLuS3QT87TrX6/u8rMonQAXC9KEDmM4q7sT6MWg==}
-    dev: false
-
   /@types/google.maps@3.53.5:
     resolution: {integrity: sha512-HoRq4Te8J6krH7hj+TfdYepqegoKZCj3kkaK5gf+ySFSHLvyqYkDvkrtbcVJXQ6QBphQ0h1TF7p4J6sOh4r/zg==}
     dev: false
@@ -4646,7 +4631,7 @@ packages:
     dependencies:
       '@types/react': 18.2.17
       algoliasearch: 4.16.0
-      algoliasearch-helper: 3.14.0(algoliasearch@4.16.0)
+      algoliasearch-helper: 3.22.3(algoliasearch@4.16.0)
     dev: true
 
   /@types/react-instantsearch-dom@6.12.3:
@@ -4988,32 +4973,13 @@ packages:
       uri-js: 4.4.1
     dev: true
 
-  /algoliasearch-helper@3.13.3(algoliasearch@4.16.0):
-    resolution: {integrity: sha512-jhbbuYZ+fheXpaJlqdJdFa1jOsrTWKmRRTYDM3oVTto5VodZzM7tT+BHzslAotaJf/81CKrm6yLRQn8WIr/K4A==}
-    peerDependencies:
-      algoliasearch: '>= 3.1 < 6'
-    dependencies:
-      '@algolia/events': 4.0.1
-      algoliasearch: 4.16.0
-    dev: false
-
-  /algoliasearch-helper@3.14.0(algoliasearch@4.16.0):
-    resolution: {integrity: sha512-gXDXzsSS0YANn5dHr71CUXOo84cN4azhHKUbg71vAWnH+1JBiR4jf7to3t3JHXknXkbV0F7f055vUSBKrltHLQ==}
-    peerDependencies:
-      algoliasearch: '>= 3.1 < 6'
-    dependencies:
-      '@algolia/events': 4.0.1
-      algoliasearch: 4.16.0
-    dev: true
-
-  /algoliasearch-helper@3.16.2(algoliasearch@4.16.0):
-    resolution: {integrity: sha512-Yl/Gu5Cq4Z5s/AJ0jR37OPI1H3+z7PHz657ibyaXgMOaWvPlZ3OACN13N+7HCLPUlB0BN+8BtmrG/CqTilowBA==}
+  /algoliasearch-helper@3.22.3(algoliasearch@4.16.0):
+    resolution: {integrity: sha512-2eoEz8mG4KHE+DzfrBTrCmDPxVXv7aZZWPojAJFtARpxxMO6lkos1dJ+XDCXdPvq7q3tpYWRi6xXmVQikejtpA==}
     peerDependencies:
       algoliasearch: '>= 3.1 < 6'
     dependencies:
       '@algolia/events': 4.0.1
       algoliasearch: 4.16.0
-    dev: false
 
   /algoliasearch@4.16.0:
     resolution: {integrity: sha512-HAjKJ6bBblaXqO4dYygF4qx251GuJ6zCZt+qbJ+kU7sOC+yc84pawEjVpJByh+cGP2APFCsao2Giz50cDlKNPA==}
@@ -6690,33 +6656,14 @@ packages:
     resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
     dev: false
 
-  /instantsearch-ui-components@0.3.0:
-    resolution: {integrity: sha512-PCVvw9L0YHZs99ZZNRzmF4ghre6SVq2tiz7yCPIamMR+2pccpFXwtdJ2Gmdg+FF4SLif4d8TldvxWFOB0+L5gg==}
-    dev: false
-
-  /instantsearch.js@4.53.0(algoliasearch@4.16.0):
-    resolution: {integrity: sha512-YsKZo8yF/2/lc1FHwyP73k8IoIMPesP+8R4VSmWDf/No8EgELgpC7qgZOlQl/vLIoAAaDrKD/BfstposfMF8KQ==}
-    peerDependencies:
-      algoliasearch: '>= 3.1 < 6'
+  /instantsearch-ui-components@0.8.0:
+    resolution: {integrity: sha512-EzV7cR5+18sjmR6DMdv8yL9WuS2hUxrkqbByiLmHnJFbB4TZ4Q7oZDAn43bOItWZ2TxMK3GoxNbB/ZhWjsptPg==}
     dependencies:
-      '@algolia/events': 4.0.1
-      '@algolia/ui-components-highlight-vdom': 1.2.1
-      '@algolia/ui-components-shared': 1.2.1
-      '@types/dom-speech-recognition': 0.0.1
-      '@types/google.maps': 3.53.4
-      '@types/hogan.js': 3.0.1
-      '@types/qs': 6.9.7
-      algoliasearch: 4.16.0
-      algoliasearch-helper: 3.13.3(algoliasearch@4.16.0)
-      hogan.js: 3.0.2
-      htm: 3.1.1
-      preact: 10.15.1
-      qs: 6.9.7
-      search-insights: 2.6.0
+      '@babel/runtime': 7.24.4
     dev: false
 
-  /instantsearch.js@4.65.0(algoliasearch@4.16.0):
-    resolution: {integrity: sha512-LCJErlVwmsh/41CiEJRcoVPxfa+06yb1qmZfcvzXOMwC6ydb/yfBlFxQgjsQKYA2adwH40c3YF34Jq+V5YiaMg==}
+  /instantsearch.js@4.73.4(algoliasearch@4.16.0):
+    resolution: {integrity: sha512-QdvExJthRBXpRaX9lzey+2sqUIzlOZEpd8N5wZyLYYs6WjDHIwrNPOzmOv7VHLBBHGqZ6YkXoCoegj5zm9QI8g==}
     peerDependencies:
       algoliasearch: '>= 3.1 < 6'
     dependencies:
@@ -6726,13 +6673,13 @@ packages:
       '@types/hogan.js': 3.0.1
       '@types/qs': 6.9.7
       algoliasearch: 4.16.0
-      algoliasearch-helper: 3.16.2(algoliasearch@4.16.0)
+      algoliasearch-helper: 3.22.3(algoliasearch@4.16.0)
       hogan.js: 3.0.2
       htm: 3.1.1
-      instantsearch-ui-components: 0.3.0
+      instantsearch-ui-components: 0.8.0
       preact: 10.16.0
       qs: 6.9.7
-      search-insights: 2.13.0
+      search-insights: 2.16.3
     dev: false
 
   /internal-slot@1.0.5:
@@ -8302,10 +8249,6 @@ packages:
       source-map-js: 1.2.0
     dev: true
 
-  /preact@10.15.1:
-    resolution: {integrity: sha512-qs2ansoQEwzNiV5eAcRT1p1EC/dmEzaATVDJNiB3g2sRDWdA7b7MurXdJjB2+/WQktGWZwxvDrnuRFbWuIr64g==}
-    dev: false
-
   /preact@10.16.0:
     resolution: {integrity: sha512-XTSj3dJ4roKIC93pald6rWuB2qQJO9gO2iLLyTe87MrjQN+HklueLsmskbywEWqCHlclgz3/M4YLL2iBr9UmMA==}
     dev: false
@@ -8595,47 +8538,47 @@ packages:
       react: 18.2.0
     dev: false
 
-  /react-instantsearch-core@7.6.0(algoliasearch@4.16.0)(react@18.2.0):
-    resolution: {integrity: sha512-FBTwAJAmNSha6pSFOP1fTPjIbvyv5btS49SsdWPvQ981yiMD+zWtvCXZlVTxrBGVH6mYGbmBT0lCHTOm4kpdOg==}
+  /react-instantsearch-core@7.12.4(algoliasearch@4.16.0)(react@18.2.0):
+    resolution: {integrity: sha512-FJn0hFrC3YaZX+y4XkqleHs2lcVXlWP1oCUsvVgwnP7D21iHQLmC0POwzWnJkHk7XJc92xZKVu/jp4mnsieECw==}
     peerDependencies:
-      algoliasearch: '>= 3.1 < 5'
+      algoliasearch: '>= 3.1 < 6'
       react: '>= 16.8.0 < 19'
     dependencies:
       '@babel/runtime': 7.24.4
       algoliasearch: 4.16.0
-      algoliasearch-helper: 3.16.2(algoliasearch@4.16.0)
-      instantsearch.js: 4.65.0(algoliasearch@4.16.0)
+      algoliasearch-helper: 3.22.3(algoliasearch@4.16.0)
+      instantsearch.js: 4.73.4(algoliasearch@4.16.0)
       react: 18.2.0
       use-sync-external-store: 1.2.0(react@18.2.0)
     dev: false
 
-  /react-instantsearch-router-nextjs@7.6.0(algoliasearch@4.16.0)(next@13.5.6)(react@18.2.0):
-    resolution: {integrity: sha512-ei7xIN0ossc+/4iWwJwHCNkILT3hl3bwxxUdbo4vLobgieZ/KwFR1omgl+teycQHF1Yk0V890PNNw6MeWj5Peg==}
+  /react-instantsearch-router-nextjs@7.12.4(algoliasearch@4.16.0)(next@13.5.6)(react@18.2.0):
+    resolution: {integrity: sha512-RpewqDdpB95yC6grOin0R0Gl+HPWx3Szj8M8cRHum0ZV0opG/+HEjxV47Ywkjbu8badzz6PJwYrpyEdUvvTKKA==}
     peerDependencies:
       next: '>= 9 && < 15'
     dependencies:
-      instantsearch.js: 4.65.0(algoliasearch@4.16.0)
+      instantsearch.js: 4.73.4(algoliasearch@4.16.0)
       next: 13.5.6(@babel/core@7.21.4)(react-dom@18.2.0)(react@18.2.0)
-      react-instantsearch-core: 7.6.0(algoliasearch@4.16.0)(react@18.2.0)
+      react-instantsearch-core: 7.12.4(algoliasearch@4.16.0)(react@18.2.0)
     transitivePeerDependencies:
       - algoliasearch
       - react
     dev: false
 
-  /react-instantsearch@7.6.0(algoliasearch@4.16.0)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-9bvIkVeHUK4vaKdFqJZFbI3+1hmYDKWG52RJe+OxfLPvu4EkiSsnIc8qf3A0q0GnIdb0+HUIeZRBkUt/vYYCbQ==}
+  /react-instantsearch@7.12.4(algoliasearch@4.16.0)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-k/B5v2RKUyFSSusUzAZ7vlyrkEenh6iMdPYiBZ0YMBckYYXVCTcZmTA1sipb8DomT1lOk1QCDLa1QhoLRKNr7Q==}
     peerDependencies:
-      algoliasearch: '>= 3.1 < 5'
+      algoliasearch: '>= 3.1 < 6'
       react: '>= 16.8.0 < 19'
       react-dom: '>= 16.8.0 < 19'
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.4
       algoliasearch: 4.16.0
-      instantsearch-ui-components: 0.3.0
-      instantsearch.js: 4.65.0(algoliasearch@4.16.0)
+      instantsearch-ui-components: 0.8.0
+      instantsearch.js: 4.73.4(algoliasearch@4.16.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-      react-instantsearch-core: 7.6.0(algoliasearch@4.16.0)(react@18.2.0)
+      react-instantsearch-core: 7.12.4(algoliasearch@4.16.0)(react@18.2.0)
     dev: false
 
   /react-intl@6.0.2(react@18.2.0)(typescript@4.8.4):
@@ -8959,13 +8902,8 @@ packages:
     resolution: {integrity: sha512-qGVDoreyYiP1pkQnbnFAUIS5AjenNwwQBdl7zeos9etl+hYKWahjRTfzAZZYBv5xNHx7vNKCmaLDQZ6Fr2AEXg==}
     dev: false
 
-  /search-insights@2.13.0:
-    resolution: {integrity: sha512-Orrsjf9trHHxFRuo9/rzm0KIWmgzE8RMlZMzuhZOJ01Rnz3D0YBAe+V6473t6/H6c7irs6Lt48brULAiRWb3Vw==}
-    dev: false
-
-  /search-insights@2.6.0:
-    resolution: {integrity: sha512-vU2/fJ+h/Mkm/DJOe+EaM5cafJv/1rRTZpGJTuFPf/Q5LjzgMDsqPdSaZsAe+GAWHHsfsu+rQSAn6c8IGtBEVw==}
-    engines: {node: '>=8.16.0'}
+  /search-insights@2.16.3:
+    resolution: {integrity: sha512-hSHy/s4Zk2xibhj9XTCACB+1PqS+CaJxepGNBhKc/OsHRpqvHAUAm5+uZ6kJJbGXn0pb3XqekHjg6JAqPExzqg==}
     dev: false
 
   /semver@6.3.0:
diff --git a/web/sections/Grid/Span2And1.tsx b/web/sections/Grid/Span2And1.tsx
index cf8b30458..086c5feae 100644
--- a/web/sections/Grid/Span2And1.tsx
+++ b/web/sections/Grid/Span2And1.tsx
@@ -16,6 +16,7 @@ const Span2And1 = forwardRef<HTMLDivElement, Span2And1Props>(function Span2And1(
   const isMobile = useMediaQuery(`(max-width: 800px)`)
 
   return (
+    //@ts-ignore: Will be refactored and removed in new newsroom branch
     <Fragment ref={ref}>
       {alignSpan2Right ? (
         <>
diff --git a/web/sections/Grid/ThreeColumns.tsx b/web/sections/Grid/ThreeColumns.tsx
index d5c62f225..20f4e3bb2 100644
--- a/web/sections/Grid/ThreeColumns.tsx
+++ b/web/sections/Grid/ThreeColumns.tsx
@@ -17,6 +17,7 @@ const ThreeColumns = forwardRef<HTMLDivElement, ThreeColumnsProps>(function Thre
   const minHeight = 'min-h-[350px] lg:min-h-[600px]'
   const isMobile = useMediaQuery(`(max-width: 800px)`)
   return (
+    //@ts-ignore: Will be refactored and removed in new newsroom branch
     <Fragment ref={ref}>
       {columns.map((column: any) => {
         return (
diff --git a/web/styles/tailwind.css b/web/styles/tailwind.css
index 4da8d0939..304ca0680 100644
--- a/web/styles/tailwind.css
+++ b/web/styles/tailwind.css
@@ -243,6 +243,21 @@
       display: none;
     }
   }
+  @supports selector(::-webkit-search-cancel-button) {
+    .no-webkit-search-cancel::-webkit-search-cancel-button {
+      display: none;
+    }
+    .invert-webkit-search-cancel::-webkit-search-cancel-button {
+      -webkit-appearance: none;
+      height: 1em;
+      width: 1em;
+      background: url("data:image/svg+xml,%0A%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='1.25' y1='-1.25' x2='34.75' y2='-1.25' transform='matrix(0.681232 0.732068 -0.675487 0.737372 2.50415 3.58887)' stroke='white' stroke-width='2.5' stroke-linecap='round'/%3E%3Cline x1='1.25' y1='-1.25' x2='34.75' y2='-1.25' transform='matrix(0.681232 0.732068 -0.675487 0.737372 2.50415 3.58887)' stroke='url(%23paint0_linear_4304_84678)' stroke-width='2.5' stroke-linecap='round'/%3E%3Cline x1='1.25' y1='-1.25' x2='34.7506' y2='-1.25' transform='matrix(0.681238 -0.732062 0.675483 0.737376 4.4751 30.3545)' stroke='white' stroke-width='2.5' stroke-linecap='round'/%3E%3Cline x1='1.25' y1='-1.25' x2='34.7506' y2='-1.25' transform='matrix(0.681238 -0.732062 0.675483 0.737376 4.4751 30.3545)' stroke='url(%23paint1_linear_4304_84678)' stroke-width='2.5' stroke-linecap='round'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_4304_84678' x1='18' y1='0' x2='18' y2='1' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='white'/%3E%3Cstop offset='1' stop-color='white' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_4304_84678' x1='18.0003' y1='0' x2='18.0003' y2='1' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='white'/%3E%3Cstop offset='1' stop-color='white' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A")
+        no-repeat 50% 50%;
+      background-size: contain;
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
 
   /* Hide scrollbar for IE, Edge and Firefox */
   .no-scrollbar {
diff --git a/web/tailwind.config.cjs b/web/tailwind.config.cjs
index 387db1aa1..5cd766ac0 100644
--- a/web/tailwind.config.cjs
+++ b/web/tailwind.config.cjs
@@ -20,6 +20,7 @@ module.exports = {
     './core/**/*.{js,ts,tsx}',
     './sections/**/*.{js,ts,tsx}',
     './icons/**/*.{js,ts,tsx}',
+    './pages/**/*.{js,ts,tsx}',
   ],
   safelist: ['modal-enter', 'modal-enter-done', 'modal-exit-active', 'modal-exit'],
   /*
@@ -277,6 +278,9 @@ module.exports = {
       minWidth: {
         viewport: '375',
       },
+      borderRadius: {
+        xs: '0.1rem',
+      },
       padding: {
         'layout-sm': 'clamp(16px, calc(-38.3689px + 14.4984vw), 250px)',
         'layout-md': 'clamp(16px, calc(-69.4369px + 22.7832vw), 368px)',