emoji-picker-react 4.22.2 → 5.0.0

package/src/components/header/Search/Search.tsx

@@ -1,165 +1,105 @@
 import * as React from 'react';
 import { cx } from 'shipstyles';
 
-import { darkMode, stylesheet } from '../../../Stylesheet/stylesheet';
-import {
-  useAutoFocusSearchConfig,
-  useSearchDisabledConfig,
-  useSearchPlaceHolderConfig,
-} from '../../../config/useConfig';
-import { useCloseAllOpenToggles } from '../../../hooks/useCloseAllOpenToggles';
-import { useFilter } from '../../../hooks/useFilter';
-import { useIsSkinToneInSearch } from '../../../hooks/useShouldShowSkinTonePicker';
+import { stylesheet } from '../../../Stylesheet/stylesheet';
+import { SearchInput } from '../../../primitives/SearchInput';
+import { useDefaultAppearance } from '../../../primitives/appearance';
+import { filterPrimitiveProps } from '../../../primitives/nativeProps';
+import type { SearchProps } from '../../../primitives/types';
 import Flex from '../../Layout/Flex';
 import Relative from '../../Layout/Relative';
-import { useSearchInputRef } from '../../context/ElementRefContext';
-import { SkinTonePicker } from '../SkinTonePicker/SkinTonePicker';
 
 import { BtnClearSearch } from './BtnClearSearch';
 import { IcnSearch } from './IcnSearch';
-import SVGTimes from './svg/times.svg';
-
-export function SearchContainer() {
-  const searchDisabled = useSearchDisabledConfig();
-
-  const isSkinToneInSearch = useIsSkinToneInSearch();
-
-  if (searchDisabled) {
-    return null;
-  }
 
+export function SearchContainer({
+  children,
+  inputProps,
+  inputRef,
+}: {
+  inputProps?: SearchProps['inputProps'];
+  inputRef?: SearchProps['inputRef'];
+  children?: React.ReactNode;
+} = {}) {
   return (
     <Flex className={cx(styles.overlay)}>
-      <Search />
+      <Search inputProps={inputProps} inputRef={inputRef} />
 
-      {isSkinToneInSearch ? <SkinTonePicker /> : null}
+      {children}
     </Flex>
   );
 }
 
-export function Search() {
-  const closeAllOpenToggles = useCloseAllOpenToggles();
-  const SearchInputRef = useSearchInputRef();
-  const placeholder = useSearchPlaceHolderConfig();
-  const autoFocus = useAutoFocusSearchConfig();
-  const { statusSearchResults, searchTerm, onChange } = useFilter();
-
-  const input = SearchInputRef?.current;
-  const value = input?.value;
-
+export function Search({
+  inputProps,
+  inputRef,
+}: {
+  inputProps?: SearchProps['inputProps'];
+  inputRef?: SearchProps['inputRef'];
+} = {}) {
+  const appearance = useDefaultAppearance();
+  // The managed region and the standalone native-input primitive share
+  // the same controller, registration and accessible announcements.
+  const safe = filterPrimitiveProps(
+    (inputProps ?? {}) as Record<string, unknown>,
+    [
+      'type',
+      'value',
+      'defaultValue',
+      'onChange',
+      'autoFocus',
+      'placeholder',
+      'aria-controls',
+    ],
+  );
+  const { className, ...rest } = safe;
   return (
     <Relative className={cx(styles.searchContainer)}>
-      <input
-        // eslint-disable-next-line jsx-a11y/no-autofocus
-        autoFocus={autoFocus}
-        aria-label={'Type to search for an emoji'}
-        onFocus={closeAllOpenToggles}
-        className={cx(styles.search)}
-        type="text"
-        aria-controls="epr-search-id"
-        placeholder={placeholder}
-        onChange={(event) => {
-          onChange(event?.target?.value ?? value);
-        }}
-        ref={SearchInputRef}
+      <SearchInput
+        {...rest}
+        className={cx(
+          styles.inputGeometry,
+          appearance && styles.search,
+          className as string | undefined,
+        )}
+        ref={inputRef}
       />
-      {searchTerm ? (
-        <div
-          role="status"
-          className={cx('epr-status-search-results', styles.visuallyHidden)}
-          aria-live="polite"
-          id="epr-search-id"
-          aria-atomic="true"
-        >
-          {statusSearchResults}
-        </div>
-      ) : null}
-      <IcnSearch />
+      {appearance && <IcnSearch />}
       <BtnClearSearch />
     </Relative>
   );
 }
 
-const styles = stylesheet.create({
-  overlay: {
-    padding: 'var(--epr-header-padding)',
-    zIndex: 'var(--epr-header-overlay-z-index)',
-  },
-  searchContainer: {
-    '.': 'epr-search-container',
-    flex: '1',
-    display: 'block',
-    minWidth: '0',
-  },
-  visuallyHidden: {
-    clip: 'rect(0 0 0 0)',
-    clipPath: 'inset(50%)',
-    height: '1px',
-    overflow: 'hidden',
-    position: 'absolute',
-    whiteSpace: 'nowrap',
-    width: '1px',
-  },
-  search: {
-    outline: 'none',
-    transition: 'all 0.2s ease-in-out',
-    color: 'var(--epr-search-input-text-color)',
-    borderRadius: 'var(--epr-search-input-border-radius)',
-    padding: 'var(--epr-search-input-padding)',
-    height: 'var(--epr-search-input-height)',
-    backgroundColor: 'var(--epr-search-input-bg-color)',
-    border: '1px solid var(--epr-search-border-color)',
-    width: '100%',
-    ':focus': {
-      backgroundColor: 'var(--epr-search-input-bg-color-active)',
-      border: '1px solid var(--epr-search-border-color-active)',
-    },
-    '::placeholder': {
-      color: 'var(--epr-search-input-placeholder-color)',
-    },
-  },
-
-  btnClearSearch: {
-    '.': 'epr-btn-clear-search',
-    position: 'absolute',
-    right: 'var(--epr-search-bar-inner-padding)',
-    height: '30px',
-    width: '30px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    top: '50%',
-    transform: 'translateY(-50%)',
-    padding: '0',
-    borderRadius: '50%',
-    ':hover': {
-      background: 'var(--epr-hover-bg-color)',
-    },
-    ':focus': {
-      background: 'var(--epr-hover-bg-color)',
+const styles = /* @__PURE__ */ (() =>
+  stylesheet.create({
+    overlay: {
+      padding: 'var(--epr-header-padding)',
+      zIndex: 'var(--epr-header-overlay-z-index)',
     },
-  },
-  icnClearnSearch: {
-    '.': 'epr-icn-clear-search',
-    backgroundColor: 'transparent',
-    backgroundRepeat: 'no-repeat',
-    backgroundSize: '20px',
-    height: '20px',
-    width: '20px',
-    backgroundImage: `url(${SVGTimes})`,
-    ':hover': {
-      backgroundPositionY: '-20px',
+    searchContainer: {
+      '.': 'epr-search-container',
+      flex: '1',
+      display: 'block',
+      minWidth: '0',
     },
-    ':focus': {
-      backgroundPositionY: '-20px',
+    inputGeometry: {
+      padding: 'var(--epr-search-input-padding)',
+      height: 'var(--epr-search-input-height)',
+      width: '100%',
     },
-  },
-  ...darkMode('icnClearnSearch', {
-    backgroundPositionY: '-40px',
-  }),
-  ...darkMode('btnClearSearch', {
-    ':hover > .epr-icn-clear-search': {
-      backgroundPositionY: '-60px',
+    search: {
+      outline: 'none',
+      transition: 'all 0.2s ease-in-out',
+      color: 'var(--epr-search-input-text-color)',
+      borderRadius: 'var(--epr-search-input-border-radius)',
+      backgroundColor: 'var(--epr-search-input-bg-color)',
+      border: '1px solid var(--epr-search-border-color)',
+      ':focus': {
+        backgroundColor: 'var(--epr-search-input-bg-color-active)',
+        border: '1px solid var(--epr-search-border-color-active)',
+      },
+      '::placeholder': {
+        color: 'var(--epr-search-input-placeholder-color)',
+      },
     },
-  }),
-});
+  }))();

package/src/components/header/SkinTonePicker/BtnSkinToneVariation.tsx

@@ -2,7 +2,10 @@ import * as React from 'react';
 import { cx } from 'shipstyles';
 
 import { stylesheet } from '../../../Stylesheet/stylesheet';
-import { skinTonesNamed } from '../../../data/skinToneVariations';
+import { PickerLabels } from '../../../config/config';
+import { useLabels } from '../../../config/useConfig';
+import { useDefaultAppearance } from '../../../primitives/appearance';
+import { usePickerComponents } from '../../../primitives/components';
 import { SkinTones } from '../../../types/exposedTypes';
 import { Button } from '../../atoms/Button';
 
@@ -15,7 +18,6 @@ type Props = {
   tabIndex?: number;
 };
 
-// eslint-disable-next-line complexity
 export function BtnSkinToneVariation({
   isOpen,
   onClick,
@@ -24,70 +26,105 @@ export function BtnSkinToneVariation({
   style,
   tabIndex,
 }: Props) {
-  return (
-    <Button
-      style={style}
-      onClick={onClick}
-      tabIndex={tabIndex}
-      className={cx(
-        `epr-tone-${skinToneVariation}`,
-        styles.tone,
-        !isOpen && styles.closedTone,
-        isActive && styles.active,
-      )}
-      aria-pressed={isActive}
-      aria-label={`Skin tone ${skinTonesNamed[skinToneVariation as SkinTones]}`}
-    ></Button>
+  const labels = useLabels();
+  const appearance = useDefaultAppearance();
+  const { SkinToneButton: Custom } = usePickerComponents();
+  const decorated = appearance && !Custom;
+  const glyph =
+    '✋' +
+    (skinToneVariation === SkinTones.NEUTRAL
+      ? ''
+      : String.fromCodePoint(parseInt(skinToneVariation, 16)));
+  const props = {
+    type: 'button' as const,
+    style,
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => {
+      if (!event.defaultPrevented) onClick();
+    },
+    tabIndex,
+    className: cx(
+      `epr-tone-${skinToneVariation}`,
+      styles.geometry,
+      decorated && styles.tone,
+      !isOpen && styles.closedTone,
+      isActive && styles.active,
+    ),
+    'aria-pressed': isActive,
+    'aria-label': labels[SKIN_TONE_LABEL_KEYS[skinToneVariation]],
+    'data-epr-part': 'skin-tone-button',
+    'data-epr-active': isActive ? '' : undefined,
+    'data-epr-open': isOpen ? '' : undefined,
+    children: decorated ? undefined : glyph,
+  };
+  return Custom ? (
+    <Custom
+      {...props}
+      tone={{ skinTone: skinToneVariation, isActive, isOpen }}
+    />
+  ) : (
+    <Button {...props} />
   );
 }
 
-const styles = stylesheet.create({
-  closedTone: {
-    opacity: '0',
-    zIndex: '0',
-  },
-  active: {
-    '.': 'epr-active',
-    zIndex: '1',
-    opacity: '1',
-  },
-  tone: {
-    '.': 'epr-tone',
-    width: 'var(--epr-skin-tone-size)',
-    display: 'block',
-    cursor: 'pointer',
-    borderRadius: '4px',
-    height: 'var(--epr-skin-tone-size)',
-    position: 'absolute',
-    right: '0',
-    transition: 'transform 0.3s ease-in-out, opacity 0.35s ease-in-out',
-    zIndex: '0',
-    border: '1px solid var(--epr-skin-tone-outer-border-color)',
-    boxShadow: 'inset 0px 0px 0 1px var(--epr-skin-tone-inner-border-color)',
-    ':hover': {
-      boxShadow:
-        '0 0 0 3px var(--epr-active-skin-hover-color), inset 0px 0px 0 1px var(--epr-skin-tone-inner-border-color)',
-    },
-    ':focus': {
-      boxShadow: '0 0 0 3px var(--epr-focus-bg-color)',
-    },
-    '&.epr-tone-neutral': {
-      backgroundColor: '#ffd225',
-    },
-    '&.epr-tone-1f3fb': {
-      backgroundColor: '#ffdfbd',
-    },
-    '&.epr-tone-1f3fc': {
-      backgroundColor: '#e9c197',
+const SKIN_TONE_LABEL_KEYS: Record<SkinTones, keyof PickerLabels> = {
+  [SkinTones.NEUTRAL]: 'skinToneNeutral',
+  [SkinTones.LIGHT]: 'skinToneLight',
+  [SkinTones.MEDIUM_LIGHT]: 'skinToneMediumLight',
+  [SkinTones.MEDIUM]: 'skinToneMedium',
+  [SkinTones.MEDIUM_DARK]: 'skinToneMediumDark',
+  [SkinTones.DARK]: 'skinToneDark',
+};
+
+const styles = /* @__PURE__ */ (() =>
+  stylesheet.create({
+    geometry: {
+      width: 'var(--epr-skin-tone-size)',
+      height: 'var(--epr-skin-tone-size)',
+      display: 'block',
+      position: 'absolute',
+      insetInlineEnd: '0',
+      zIndex: '0',
     },
-    '&.epr-tone-1f3fd': {
-      backgroundColor: '#c88e62',
+    closedTone: {
+      opacity: '0',
+      zIndex: '0',
     },
-    '&.epr-tone-1f3fe': {
-      backgroundColor: '#a86637',
+    active: {
+      '.': 'epr-active',
+      zIndex: '1',
+      opacity: '1',
     },
-    '&.epr-tone-1f3ff': {
-      backgroundColor: '#60463a',
+    tone: {
+      '.': 'epr-tone',
+      cursor: 'pointer',
+      borderRadius: '4px',
+      transition: 'transform 0.3s ease-in-out, opacity 0.35s ease-in-out',
+      border: '1px solid var(--epr-skin-tone-outer-border-color)',
+      boxShadow: 'inset 0px 0px 0 1px var(--epr-skin-tone-inner-border-color)',
+      ':hover': {
+        boxShadow:
+          '0 0 0 3px var(--epr-active-skin-hover-color), inset 0px 0px 0 1px var(--epr-skin-tone-inner-border-color)',
+      },
+      ':focus': {
+        boxShadow: '0 0 0 3px var(--epr-focus-bg-color)',
+      },
+      '&.epr-tone-neutral': {
+        backgroundColor: '#ffd225',
+      },
+      '&.epr-tone-1f3fb': {
+        backgroundColor: '#ffdfbd',
+      },
+      '&.epr-tone-1f3fc': {
+        backgroundColor: '#e9c197',
+      },
+      '&.epr-tone-1f3fd': {
+        backgroundColor: '#c88e62',
+      },
+      '&.epr-tone-1f3fe': {
+        backgroundColor: '#a86637',
+      },
+      '&.epr-tone-1f3ff': {
+        backgroundColor: '#60463a',
+      },
     },
-  },
-});
+  }))();

package/src/components/header/SkinTonePicker/SkinTonePicker.tsx

@@ -1,8 +1,8 @@
-/* eslint-disable complexity */
 import * as React from 'react';
 import { cx } from 'shipstyles';
 
 import { ClassNames } from '../../../DomUtils/classNames';
+import { isRtl } from '../../../DomUtils/isRtl';
 import { stylesheet } from '../../../Stylesheet/stylesheet';
 import {
   useOnSkinToneChangeConfig,
@@ -11,6 +11,8 @@ import {
 import skinToneVariations from '../../../data/skinToneVariations';
 import { useCloseAllOpenToggles } from '../../../hooks/useCloseAllOpenToggles';
 import { useFocusSearchInput } from '../../../hooks/useFocus';
+import { useRegisterRegion } from '../../../hooks/useRegisterRegion';
+import { useDefaultAppearance } from '../../../primitives/appearance';
 import Absolute from '../../Layout/Absolute';
 import Relative from '../../Layout/Relative';
 import { useSkinTonePickerRef } from '../../context/ElementRefContext';
@@ -28,6 +30,10 @@ type Props = {
 };
 
 export function SkinTonePickerMenu() {
+  const SkinTonePickerRef = useSkinTonePickerRef();
+  // Preview-located skin-tone control is its own focus region; the
+  // search-located fan stays covered by local Search behavior.
+  useRegisterRegion('preview-skin-tone', SkinTonePickerRef);
   return (
     <Relative style={{ height: ITEM_SIZE }}>
       <Absolute style={{ bottom: 0, right: 0 }}>
@@ -40,6 +46,7 @@ export function SkinTonePickerMenu() {
 export function SkinTonePicker({
   direction = SkinTonePickerDirection.HORIZONTAL,
 }: Props) {
+  const appearance = useDefaultAppearance();
   const SkinTonePickerRef = useSkinTonePickerRef();
   const isDisabled = useSkinTonesDisabledConfig();
   const [isOpen, setIsOpen] = useSkinToneFanOpenState();
@@ -57,22 +64,31 @@ export function SkinTonePicker({
   const expandedSize = isOpen ? fullWidth : ITEM_SIZE + 'px';
 
   const vertical = direction === SkinTonePickerDirection.VERTICAL;
+  // The fan opens toward the inline start: leftward, or rightward under
+  // dir="rtl". The control is mounted before it can open, so the ref is set.
+  const inlineSign =
+    isOpen && !vertical && isRtl(SkinTonePickerRef.current) ? 1 : -1;
 
   return (
     <Relative
-      className={cx(
-        styles.skinTones,
-        vertical && styles.vertical,
-        isOpen && styles.open,
-        vertical && isOpen && styles.verticalShadow,
-      )}
+      className={skinToneClassName(appearance, vertical, isOpen)}
       style={
         vertical
           ? { flexBasis: expandedSize, height: expandedSize }
-          : { flexBasis: expandedSize }
+          // SkinTone wraps this flex item in a layout host. An explicit
+          // width lets that host reserve the fan's full horizontal span,
+          // so a neighboring Search input shrinks instead of overlapping.
+          : { flexBasis: expandedSize, width: expandedSize }
       }
     >
-      <div className={cx(styles.select)} ref={SkinTonePickerRef}>
+      <div
+        className={cx(styles.select)}
+        ref={SkinTonePickerRef}
+        data-epr-part="skin-tone"
+        // Read by the keyboard handler: arrow keys follow the fan axis
+        // wherever the control is placed.
+        data-epr-direction={vertical ? 'vertical' : 'horizontal'}
+      >
         {skinToneVariations.map((skinToneVariation, i) => {
           const active = skinToneVariation === activeSkinTone;
 
@@ -91,8 +107,8 @@ export function SkinTonePicker({
                 transform: cx(
                   vertical
                     ? `translateY(-${i * (isOpen ? ITEM_SIZE : 0)}px)`
-                    : `translateX(-${i * (isOpen ? ITEM_SIZE : 0)}px)`,
-                  isOpen && active && 'scale(1.3)',
+                    : `translateX(${inlineSign * i * (isOpen ? ITEM_SIZE : 0)}px)`,
+                  appearance && isOpen && active && 'scale(1.3)',
                 ),
               }}
               isActive={active}
@@ -114,45 +130,67 @@ export function SkinTonePicker({
   );
 }
 
+function skinToneClassName(
+  appearance: boolean,
+  vertical: boolean,
+  open: boolean,
+) {
+  return cx(
+    styles.geometry,
+    appearance && styles.skinTones,
+    vertical && styles.verticalGeometry,
+    appearance && vertical && styles.vertical,
+    appearance && open && styles.open,
+    appearance && vertical && open && styles.verticalShadow,
+  );
+}
+
 export enum SkinTonePickerDirection {
   VERTICAL = ClassNames.vertical,
   HORIZONTAL = ClassNames.horizontal,
 }
 
-const styles = stylesheet.create({
-  skinTones: {
-    '.': 'epr-skin-tones',
-    '--': {
-      '--epr-skin-tone-size': '15px',
+const styles = /* @__PURE__ */ (() =>
+  stylesheet.create({
+    geometry: {
+      '--': { '--epr-skin-tone-size': '15px' },
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      padding: '10px 0',
+    },
+    verticalGeometry: {
+      padding: '9px',
+      alignItems: 'flex-end',
+      flexDirection: 'column',
+    },
+    skinTones: {
+      '.': 'epr-skin-tones',
+      transition: 'all 0.3s ease-in-out',
+      padding: '10px 0',
+    },
+    vertical: {
+      padding: '9px',
+      alignItems: 'flex-end',
+      flexDirection: 'column',
+      borderRadius: '6px',
+      border: '1px solid var(--epr-bg-color)',
+    },
+    verticalShadow: {
+      boxShadow: '0px 0 7px var(--epr-picker-border-color)',
+    },
+    open: {
+      // @ts-ignore - backdropFilter is not recognized.
+      backdropFilter: 'blur(5px)',
+      background: 'var(--epr-skin-tone-picker-menu-color)',
+      '.epr-active': {
+        border: '1px solid var(--epr-active-skin-tone-indicator-border-color)',
+      },
     },
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    transition: 'all 0.3s ease-in-out',
-    padding: '10px 0',
-  },
-  vertical: {
-    padding: '9px',
-    alignItems: 'flex-end',
-    flexDirection: 'column',
-    borderRadius: '6px',
-    border: '1px solid var(--epr-bg-color)',
-  },
-  verticalShadow: {
-    boxShadow: '0px 0 7px var(--epr-picker-border-color)',
-  },
-  open: {
-    // @ts-ignore - backdropFilter is not recognized.
-    backdropFilter: 'blur(5px)',
-    background: 'var(--epr-skin-tone-picker-menu-color)',
-    '.epr-active': {
-      border: '1px solid var(--epr-active-skin-tone-indicator-border-color)',
+    select: {
+      '.': 'epr-skin-tone-select',
+      position: 'relative',
+      width: 'var(--epr-skin-tone-size)',
+      height: 'var(--epr-skin-tone-size)',
     },
-  },
-  select: {
-    '.': 'epr-skin-tone-select',
-    position: 'relative',
-    width: 'var(--epr-skin-tone-size)',
-    height: 'var(--epr-skin-tone-size)',
-  },
-});
+  }))();

package/src/components/icons/svgIcons.ts

@@ -0,0 +1,17 @@
+// Generated by scripts/buildIcons.ts — do not edit.
+
+// Reactions/svg/plus.svg
+export const PLUS_ICON =
+  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20px' height='80px' viewBox='0 0 20 80'%3E%3Cpath fill='%23868686' d='M5.7,10.4c0,.1,.1,.3,.2,.4C6,10.9,6.1,11,6.3,11h3.4v3.4c0,.1,.1,.3,.2,.4c.1,.1,.2,.2,.4,.2c.3,0,.5-.2,.5-.5v-3.4h3.4c.3,0,.5-.2,.5-.5s-.2-.5-.5-.5h-3.4V6.7c0-.3-.2-.5-.5-.5C9.8,6,9.6,6.2,9.6,6.5v3.4H6.2C5.9,9.9,5.7,10.1,5.7,10.4L5.7,10.4z'/%3E%3Cpath fill='%233371B7' d='M5.7,30.4c0,.1,.1,.3,.2,.4S6.1,31,6.3,31h3.4v3.4c0,.1,.1,.3,.2,.4c.1,.1,.2,.2,.4,.2c.3,0,.5-.2,.5-.5v-3.4h3.4c.3,0,.5-.2,.5-.5s-.2-.5-.5-.5h-3.4v-3.4c0-.3-.2-.5-.5-.5s-.5,.2-.5,.5v3.4H6.2C5.9,29.9,5.7,30.1,5.7,30.4L5.7,30.4z'/%3E%3Cpath fill='%23C0C0BF' d='M5.7,50.4c0,.1,.1,.3,.2,.4C6,50.9,6.1,51,6.3,51h3.4v3.4c0,.1,.1,.3,.2,.4c.1,.1,.2,.2,.4,.2c.3,0,.5-.2,.5-.5v-3.4h3.4c.3,0,.5-.2,.5-.5s-.2-.5-.5-.5h-3.4v-3.4c0-.3-.2-.5-.5-.5s-.5,.2-.5,.5v3.4H6.2C5.9,49.9,5.7,50.1,5.7,50.4L5.7,50.4z'/%3E%3Cpath fill='%236AA9DD' d='M5.7,70.4c0,.1,.1,.3,.2,.4S6.1,71,6.3,71h3.4v3.4c0,.1,.1,.3,.2,.4c.1,.1,.2,.2,.4,.2c.3,0,.5-.2,.5-.5v-3.4h3.4c.3,0,.5-.2,.5-.5s-.2-.5-.5-.5h-3.4v-3.4c0-.3-.2-.5-.5-.5s-.5,.2-.5,.5v3.4H6.4C5.9,69.9,5.7,70.1,5.7,70.4L5.7,70.4z'/%3E%3C/svg%3E";
+
+// body/svg/triangle.svg
+export const TRIANGLE_ICON =
+  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50px' height='15px' viewBox='0 0 50 15'%3E%3Cg%3E%3Cpath fill='%23FFFFFF' stroke='%23E8E7E7' stroke-miterlimit='10' d='M1.86-.43l9.83,11.53c.59,.69,1.56,.69,2.14,0l9.83-11.53'/%3E%3Cpath fill='%23010202' stroke='%23151617' stroke-miterlimit='10' d='M26.86-.43l9.83,11.53c.59,.69,1.56,.69,2.14,0l9.83-11.53'/%3E%3C/g%3E%3C/svg%3E";
+
+// header/Search/svg/magnifier.svg
+export const MAGNIFIER_ICON =
+  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20px' height='40px' viewBox='0 0 20 40'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='%23868686' d='M12,8.81c0,2.08-1.68,3.76-3.76,3.76c-2.08,0-3.76-1.68-3.76-3.76c0-2.08,1.68-3.76,3.76-3.76C10.32,5.05,12,6.73,12,8.81zM11.23,12.72c-.83,.64-1.87,1.01-2.99,1.01c-2.72,0-4.92-2.2-4.92-4.92c0-2.72,2.2-4.92,4.92-4.92c2.72,0,4.92,2.2,4.92,4.92c0,1.13-.38,2.16-1.01,2.99l3.94,3.93c.25,.25,.25,.66,0,.92c-.25,.25-.66,.25-.92,0L11.23,12.72z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='%23C0C0BF' d='M12,28.81c0,2.08-1.68,3.76-3.76,3.76c-2.08,0-3.76-1.68-3.76-3.76c0-2.08,1.68-3.76,3.76-3.76C10.32,25.05,12,26.73,12,28.81zM11.23,32.72c-.83,.64-1.87,1.01-2.99,1.01c-2.72,0-4.92-2.2-4.92-4.92c0-2.72,2.2-4.92,4.92-4.92c2.72,0,4.92,2.2,4.92,4.92c0,1.13-.38,2.16-1.01,2.99l3.94,3.93c.25,.25,.25,.66,0,.92c-.25,.25-.66,.25-.92,0L11.23,32.72z'/%3E%3C/svg%3E";
+
+// header/Search/svg/times.svg
+export const TIMES_ICON =
+  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20px' height='80px' viewBox='0 0 20 80'%3E%3Cpath fill='%23868686' d='M6.98,13.59c.1,.1,.24,.15,.37,.15s.27-.05,.37-.15l2.42-2.42l2.43,2.43c.1,.1,.24,.15,.37,.15c.14,0,.27-.05,.37-.15c.21-.21,.21-.54,0-.75l-2.43-2.43L13.32,8c.21-.21,.21-.54,0-.75c-.21-.21-.54-.21-.75,0l-2.42,2.42L7.74,7.27c-.21-.21-.54-.21-.75,0c-.21,.21-.21,.54,0,.75l2.41,2.41l-2.42,2.42C6.77,13.05,6.77,13.39,6.98,13.59L6.98,13.59z'/%3E%3Cpath fill='%23868686' d='M10.15,18.43c4.41,0,8-3.59,8-8c0-4.41-3.59-8-8-8c-4.41,0-8,3.59-8,8C2.15,14.84,5.74,18.43,10.15,18.43zM10.15,3.49c3.83,0,6.94,3.11,6.94,6.94c0,3.83-3.11,6.94-6.94,6.94c-3.83,0-6.94-3.11-6.94-6.94C3.21,6.6,6.33,3.49,10.15,3.49L10.15,3.49z'/%3E%3Cpath fill='%233371B7' d='M6.98,33.59c.1,.1,.24,.15,.37,.15s.27-.05,.37-.15l2.42-2.42l2.43,2.43c.1,.1,.24,.15,.37,.15c.14,0,.27-.05,.37-.15c.21-.21,.21-.54,0-.75l-2.43-2.43L13.32,28c.21-.21,.21-.54,0-.75c-.21-.21-.54-.21-.75,0l-2.42,2.42l-2.41-2.41c-.21-.21-.54-.21-.75,0c-.21,.21-.21,.54,0,.75l2.41,2.41l-2.42,2.42C6.77,33.05,6.77,33.39,6.98,33.59L6.98,33.59z'/%3E%3Cpath fill='%233371B7' d='M10.15,38.43c4.41,0,8-3.59,8-8c0-4.41-3.59-8-8-8c-4.41,0-8,3.59-8,8C2.15,34.84,5.74,38.43,10.15,38.43zM10.15,23.49c3.83,0,6.94,3.11,6.94,6.94c0,3.83-3.11,6.94-6.94,6.94c-3.83,0-6.94-3.11-6.94-6.94C3.21,26.6,6.33,23.49,10.15,23.49L10.15,23.49z'/%3E%3Cpath fill='%23C0C0BF' d='M6.98,53.59c.1,.1,.24,.15,.37,.15s.27-.05,.37-.15l2.42-2.42l2.43,2.43c.1,.1,.24,.15,.37,.15c.14,0,.27-.05,.37-.15c.21-.21,.21-.54,0-.75l-2.43-2.43L13.32,48c.21-.21,.21-.54,0-.75c-.21-.21-.54-.21-.75,0l-2.42,2.42l-2.41-2.41c-.21-.21-.54-.21-.75,0c-.21,.21-.21,.54,0,.75l2.41,2.41l-2.42,2.42C6.77,53.05,6.77,53.39,6.98,53.59L6.98,53.59z'/%3E%3Cpath fill='%23C0C0BF' d='M10.15,58.43c4.41,0,8-3.59,8-8c0-4.41-3.59-8-8-8c-4.41,0-8,3.59-8,8C2.15,54.84,5.74,58.43,10.15,58.43zM10.15,43.49c3.83,0,6.94,3.11,6.94,6.94c0,3.83-3.11,6.94-6.94,6.94c-3.83,0-6.94-3.11-6.94-6.94C3.21,46.6,6.33,43.49,10.15,43.49L10.15,43.49z'/%3E%3Cpath fill='%236AA9DD' d='M6.98,73.59c.1,.1,.24,.15,.37,.15s.27-.05,.37-.15l2.42-2.42l2.43,2.43c.1,.1,.24,.15,.37,.15c.14,0,.27-.05,.37-.15c.21-.21,.21-.54,0-.75l-2.43-2.43L13.32,68c.21-.21,.21-.54,0-.75c-.21-.21-.54-.21-.75,0l-2.42,2.42l-2.41-2.41c-.21-.21-.54-.21-.75,0c-.21,.21-.21,.54,0,.75l2.41,2.41l-2.42,2.42C6.77,73.05,6.77,73.39,6.98,73.59L6.98,73.59z'/%3E%3Cpath fill='%236AA9DD' d='M10.15,78.43c4.41,0,8-3.59,8-8c0-4.41-3.59-8-8-8c-4.41,0-8,3.59-8,8C2.15,74.84,5.74,78.43,10.15,78.43zM10.15,63.49c3.83,0,6.94,3.11,6.94,6.94c0,3.83-3.11,6.94-6.94,6.94c-3.83,0-6.94-3.11-6.94-6.94C3.21,66.6,6.33,63.49,10.15,63.49L10.15,63.49z'/%3E%3C/svg%3E";