{"version":3,"file":"ContentPickerSourceMenu-afbe02f6.js","sources":["../../../app/javascript/vuecomponents/AiImageSearchSample.vue","../../../app/javascript/vuecomponents/ContentPickerSearchBar.vue","../../../app/javascript/vuecomponents/ContentPickerSearchModes.vue","../../../app/javascript/images/fallback_audio.png","../../../app/javascript/vuecomponents/ContentPickerSearchResultsAv.vue","../../../app/javascript/vuecomponents/ContentPickerSearchResultsImage.vue","../../../app/javascript/vuecomponents/content-picker-search-results-web.vue","../../../app/javascript/vuecomponents/web_browser_attribution.vue","../../../app/javascript/vuecomponents/ContentPickerSearchResults.vue","../../../app/javascript/vuecomponents/ChicletButton.vue","../../../app/javascript/vuecomponents/ContentPickerSourceMenuList.vue","../../../app/javascript/vuecomponents/ContentPickerSourceMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getTranslatedAiSearchSamplePrompt } from '@@/bits/content_picker'\nimport { __ } from '@@/bits/intl'\nimport { SearchFilters } from '@@/bits/web_search'\nimport OzContainedButton, {\n  OzContainedButtonColorScheme,\n  OzContainedButtonSizePreset,\n} from '@@/library/v4/components/OzContainedButton.vue'\nimport { useContentPickerStore } from '@@/pinia/content_picker'\nimport { processedUrl } from '@padlet/vivaldi-client'\n\nconst emit = defineEmits<{\n  (name: 'run-sample-search', payload: { searchQuery: string }): void\n}>()\n\nconst { setSearchQuery, search, pickSearchFilter } = useContentPickerStore()\n\nconst searchForSample = (): void => {\n  setSearchQuery({ query: getTranslatedAiSearchSamplePrompt() })\n  pickSearchFilter({ filter: SearchFilters.AiImages })\n  search()\n  emit('run-sample-search', { searchQuery: getTranslatedAiSearchSamplePrompt() })\n}\n</script>\n\n<template>\n  <div class=\"h-109 flex flex-col items-center justify-center\">\n    <div>\n      <img\n        :src=\"processedUrl('https://storage.googleapis.com/padlet-assets/image/basketball_nebula.webp')\"\n        width=\"240\"\n        height=\"240\"\n        :alt=\"getTranslatedAiSearchSamplePrompt()\"\n        class=\"select-none rounded-lg\"\n      />\n    </div>\n    <div>\n      <p\n        class=\"py-3 w-71 text-center text-body-extra-small text-dark-text-100 dark:text-light-text-100 px-4 select-text\"\n      >\n        \"{{ getTranslatedAiSearchSamplePrompt() }}\"\n      </p>\n    </div>\n    <div>\n      <OzContainedButton\n        class=\"mb-10\"\n        :size-preset=\"OzContainedButtonSizePreset.H24px\"\n        :color-scheme=\"OzContainedButtonColorScheme.Secondary\"\n        :text=\"__('Try this example')\"\n        data-pw=\"aiImageSearchSample\"\n        @click=\"searchForSample\"\n      />\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport type { NoSearchFilterError } from '@@/bits/content_picker'\nimport { dir } from '@@/bits/current_dir'\nimport device from '@@/bits/device'\nimport { extractUrl } from '@@/bits/html_parser'\nimport { __ } from '@@/bits/intl'\nimport { isUrl } from '@@/bits/url'\nimport OzBackButton from '@@/library/v4/components/OzBackButton.vue'\nimport OzCloseButton from '@@/library/v4/components/OzCloseButton.vue'\nimport OzIconButton, { OzIconButtonColorScheme } from '@@/library/v4/components/OzIconButton.vue'\nimport OzPlainButton, { OzPlainButtonColorScheme } from '@@/library/v4/components/OzPlainButton.vue'\nimport { useWindowSizeStore } from '@@/pinia/window_size'\nimport { storeToRefs } from 'pinia'\nimport { computed, onMounted, ref } from 'vue'\n\nconst props = defineProps<{\n  xBackButton: boolean\n  xClipboardButton: boolean\n  shouldWiggle: boolean\n  shouldForceFocusOnMount: boolean\n  searchBarPlaceholder: string\n  searchQuery: string\n  submitButtonDataId?: string\n  canAcceptLink?: boolean\n}>()\n\nconst emit = defineEmits<{\n  (name: 'back'): void\n  (name: 'blur'): void\n  (name: 'search', query: string): void\n  (name: 'clear-search'): void\n  (name: 'clear-search-error'): void\n  (name: 'click'): void\n  (name: 'close'): void\n  (name: 'copy'): void\n  (name: 'error', error: NoSearchFilterError): void\n  (name: 'focus'): void\n  (name: 'input', value: string): void\n  (name: 'paste-click'): void\n  (name: 'select', data: string): void\n}>()\n\n// https://docs.microsoft.com/en-us/rest/api/cognitiveservices-bingsearch/bing-images-api-v5-reference\n// The maximum URL length is 2,048 characters. To ensure that your URL length does not exceed the limit,\n// the maximum length of your query parameters should be less than 1,500 characters.\n// If the URL exceeds 2,048 characters, the server returns 404 Not found.\n// Need to account for percent-encoded multi-code-point UTF-8 string.\nconst MAX_SEARCH_LENGTH = 1000\n\nconst { isPhone } = storeToRefs(useWindowSizeStore())\n\nconst searchBar = ref<HTMLInputElement | null>(null)\n\nconst isSearchBarFocused = ref<boolean>(false)\n\nconst shouldShowClipboardButton = computed(\n  () => props.xClipboardButton && !isPhone.value && !device.safari && !props.searchQuery,\n)\nconst shouldShowSubmitButton = computed(() =>\n  isSearchBarFocused.value ? !shouldShowClipboardButton.value : props.searchQuery,\n)\nconst isShowingRightButton = computed(() => shouldShowClipboardButton.value || shouldShowSubmitButton.value)\n\nconst handleCopyText = (): void => {\n  emit('copy')\n}\n\nconst handleSearchBarFocus = (): void => {\n  isSearchBarFocused.value = true\n  emit('focus')\n}\n\nconst onInput = (event): void => {\n  emit('input', event.target.value)\n  emit('clear-search-error')\n}\n\nconst select = (data: string): void => {\n  emit('select', data)\n}\n\nconst unfocusForTouchDevices = () => {\n  if (device.touchable && searchBar.value) {\n    // If it's touchable, keyboard will popup, we don't want that\n    searchBar.value.blur()\n  }\n}\n\n// If the search query is a link, use it as post attachment by calling this.select\n// Else use it to search with this.search\n// If we are in link input mode, default to web search\nconst processQuery = (): void => {\n  const query = props.searchQuery\n  emit('clear-search-error')\n  unfocusForTouchDevices()\n\n  if (!query) {\n    emit('clear-search')\n    return\n  }\n  if (props.canAcceptLink) {\n    if (isUrl(query)) {\n      select(query)\n      return\n    }\n    if (isUrl(`https://${query}`)) {\n      select(`https://${query}`)\n      return\n    }\n    const extractedUrl = extractUrl(query)\n    if (extractedUrl) {\n      select(extractedUrl)\n      return\n    }\n  }\n\n  emit('search', query)\n}\n\nconst handleSearchBarFocusOut = (): void => {\n  isSearchBarFocused.value = false\n  if (device.iphone) {\n    processQuery()\n  }\n  emit('blur')\n}\n\nconst resetSearch = (): void => {\n  emit('clear-search')\n  searchBar.value?.focus()\n}\n\nconst focusSearchBar = (): void => {\n  searchBar.value?.focus()\n}\n\nconst handleEnter = (event): void => {\n  if (!props.searchQuery) {\n    event.preventDefault()\n  }\n}\n\nonMounted((): void => {\n  if ((!device.touchable || props.shouldForceFocusOnMount) && searchBar.value) {\n    // If it's touchable, keyboard will popup, we don't want that\n    searchBar.value.focus()\n  }\n})\n\ndefineExpose({\n  focusSearchBar,\n})\n</script>\n\n<template>\n  <div :class=\"['flex', 'p-4', '@tablet-portrait/surface-container:pb-3', 'tablet-portrait:-@:pb-3', 'relative']\">\n    <OzBackButton\n      v-if=\"xBackButton\"\n      :color-scheme=\"isPhone ? OzIconButtonColorScheme.Secondary : OzIconButtonColorScheme.SecondaryClear\"\n      @click=\"emit('back')\"\n    />\n    <OzCloseButton\n      v-else\n      :color-scheme=\"isPhone ? OzIconButtonColorScheme.Secondary : OzIconButtonColorScheme.SecondaryClear\"\n      data-testid=\"contentPickerCloseButton\"\n      @click=\"emit('close')\"\n    />\n\n    <div\n      :class=\"[\n        'flex',\n        'ms-4',\n        'flex-row',\n        'items-center',\n        'relative',\n        'h-10 border-2 border-solid rounded-2xl',\n        'bg-grey-50 dark:bg-grey-800',\n        isSearchBarFocused ? 'border-grape-500 dark:border-canary-500' : 'border-transparent',\n        shouldWiggle && 'animate-wiggle',\n        'box-border',\n\n        // We animate the input focus (which shows the right button) by overlaying it on top of the right button and changing the width programmatically\n        'z-10',\n        'transition-[width] ease-in duration-200',\n        // Right icon button not visible: 56 = 40 (left button width) + 16 (margin-start for this div)\n        // Right icon button visible: 112 = 56 (explained above) + 12 (margin between input and right button) + 40 (right button width)\n        isShowingRightButton ? 'w-[calc(100%-112px)]' : 'w-[calc(100%-56px)]',\n      ]\"\n    >\n      <form class=\"flex grow\" @submit.prevent=\"processQuery\">\n        <!-- eslint-disable-next-line vuejs-accessibility/form-control-has-label -->\n        <input\n          ref=\"searchBar\"\n          data-testid=\"contentPickerSearchBar\"\n          :dir=\"dir()\"\n          class=\"search-input\"\n          type=\"text\"\n          autocapitalize=\"off\"\n          :maxlength=\"MAX_SEARCH_LENGTH\"\n          :placeholder=\"searchBarPlaceholder\"\n          :aria-label=\"__('Search')\"\n          :value=\"searchQuery\"\n          @focusin=\"handleSearchBarFocus\"\n          @focusout=\"handleSearchBarFocusOut\"\n          @copy=\"handleCopyText\"\n          @cut=\"handleCopyText\"\n          @click=\"emit('click')\"\n          @input=\"onInput\"\n          @keydown.enter=\"handleEnter\"\n        />\n      </form>\n      <OzPlainButton\n        v-if=\"!isPhone && searchQuery\"\n        :class=\"['px-3', 'text-17', 'font-semibold']\"\n        :color-scheme=\"OzPlainButtonColorScheme.Secondary\"\n        :text=\"__('Clear')\"\n        @click=\"resetSearch\"\n      />\n    </div>\n    <div :class=\"['w-10', 'absolute end-4', isShowingRightButton ? 'visible' : 'invisible']\">\n      <!-- We show a different clipboard button as part of the menu list on mobile -->\n      <OzIconButton\n        v-show=\"shouldShowClipboardButton\"\n        key=\"desktop-right-icon-paste\"\n        :label=\"__('Paste clipboard')\"\n        :color-scheme=\"OzIconButtonColorScheme.SecondaryClear\"\n        icon-name=\"clipboard_outline\"\n        :icon-size=\"20\"\n        data-testid=\"contentPickerPasteClipboardButton\"\n        @click=\"emit('paste-click')\"\n      />\n      <!-- We set the tabindex to -1 to prevent the submit button from being focused when it is going to be hidden,\n           so that the focus doesn't disappear from the document -->\n      <OzIconButton\n        v-show=\"shouldShowSubmitButton\"\n        key=\"desktop-right-icon-forward\"\n        data-testid=\"contentPickerSubmitButton\"\n        :class=\"!searchQuery && 'aria-disabled:!bg-transparent'\"\n        :label=\"__('Submit')\"\n        :color-scheme=\"isPhone ? OzIconButtonColorScheme.Secondary : OzIconButtonColorScheme.SecondaryClear\"\n        icon-name=\"arrow_right\"\n        :data-pepin-id=\"submitButtonDataId\"\n        :disabled=\"!searchQuery\"\n        :tabindex=\"!searchQuery ? -1 : undefined\"\n        data-pepin-trigger=\"click\"\n        @click=\"processQuery\"\n      />\n    </div>\n  </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n.search-input {\n  @apply my-0 ps-3 md:ps-4 pe-3;\n  @apply shadow-none focus:shadow-none;\n  @apply font-sans dark:text-white-100 placeholder-dark-text-200 dark:placeholder-light-text-200;\n  @apply text-input-body;\n  @apply md:text-input-body-small;\n  @apply w-full;\n  @apply border-none;\n  @apply bg-transparent;\n}\n.skinny-button {\n  :deep(.text-label) {\n    margin: 0;\n    margin-right: 4px;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { __ } from '@@/bits/intl'\nimport type { SearchFilters } from '@@/bits/web_search'\nimport OzDivider, { OzDividerColorScheme } from '@@/library/v4/components/OzDivider.vue'\nimport OzTabs, { OzTabsPlacementMode } from '@@/library/v4/components/OzTabs.vue'\nimport { type ContentPickerSearchMode } from '@@/pinia/content_picker'\nimport { computed, ref } from 'vue'\n\nconst props = defineProps<{\n  searchModes: ContentPickerSearchMode[]\n  currentSearchFilter: SearchFilters\n}>()\n\nconst emit = defineEmits<{\n  (name: 'filter-selected', filter: string): void\n}>()\n\nconst displayedSearchModes = computed(() => props.searchModes.filter((mode) => mode.visible))\n\nconst isShook = ref<boolean>(false)\n\nconst shake = (): void => {\n  isShook.value = false\n  setTimeout(() => {\n    isShook.value = true\n  }, 1)\n}\n\ndefineExpose({\n  shake,\n})\n</script>\n\n<template>\n  <div class=\"flex shrink-0 flex-col mx-4\">\n    <div :class=\"['mx-4', 'md:mx-6', 'mt-1', 'md:mt-0', isShook && 'animate-shake']\">\n      <OzTabs\n        data-testid=\"contentPickerSearchModes\"\n        :placement-mode=\"OzTabsPlacementMode.Stretch\"\n        :aria-label=\"__('Content search tabs')\"\n        :tabs=\"displayedSearchModes\"\n        :current-tab-key=\"currentSearchFilter\"\n        @activate-tab=\"(_event, payload) => emit('filter-selected', payload.key)\"\n      />\n    </div>\n    <OzDivider :color-scheme=\"OzDividerColorScheme.Solid\" />\n  </div>\n</template>\n","export default \"__VITE_ASSET__736695b5__\"","<script setup lang=\"ts\">\nimport { getHostname } from '@@/bits/url'\nimport type { AudioSearchResult, VideoSearchResult } from '@@/bits/web_search'\nimport { SearchFilters } from '@@/bits/web_search'\nimport FallbackAudio from '@@/images/fallback_audio.png'\nimport ImageThumbnail from '@@/library/v4/components/ImageThumbnail.vue'\nimport { nextTick, onMounted, ref, watch } from 'vue'\n\nconst props = defineProps<{\n  results: (AudioSearchResult | VideoSearchResult)[]\n  filter: SearchFilters\n}>()\n\nconst emit = defineEmits<{\n  (name: 'select', url: string): void\n}>()\n\nconst LOADING_IMAGES_BG_COLOR = ['red', 'blue', 'green', 'yellow', 'purple', 'pink', 'cyan', 'orange']\nconst CROP_ASPECT_RATIO = 1.8 /* 16.2:9 to remove borders nicely since 16/9=1.(7) is non-terminating */\nconst DEFAULT_THUMBNAIL_HEIGHT = 768\nconst DEFAULT_THUMBNAIL_WIDTH = DEFAULT_THUMBNAIL_HEIGHT * CROP_ASPECT_RATIO\n\nconst container = ref<HTMLUListElement>()\nconst imageWrappers = ref<HTMLLIElement[]>()\n\nconst imageWidth = ref(0)\n\nconst handleResultsUpdate = async (): Promise<void> => {\n  await nextTick()\n  imageWidth.value = imageWrappers.value && imageWrappers.value[0] ? imageWrappers.value[0].clientWidth : 0\n}\n\nconst select = (url: string): void => {\n  emit('select', url)\n}\n\nconst audioDescription = (result: AudioSearchResult): string => {\n  if (result.release_date) {\n    // podcast episode\n    const showName = result.show_name\n    if (showName) {\n      return showName + ' · ' + new Date(result.release_date).toLocaleDateString()\n    }\n    let shortenedDescription = result.description.split(' ').slice(0, 15).join(' ')\n    if (shortenedDescription.length < result.description.length) {\n      shortenedDescription = shortenedDescription + '...'\n    }\n    return new Date(result.release_date).toLocaleDateString() + ' · ' + shortenedDescription\n  }\n  return result.description\n}\n\nconst providerName = (result: VideoSearchResult): string => {\n  if (result.provider_name) return result.provider_name\n  return getHostname(result.url)\n}\n\nconst isUsingFallbackThumbnail = (result: AudioSearchResult): boolean => {\n  return !result.thumbnail_url || result.thumbnail_url === ''\n}\n\nwatch(() => props.results, handleResultsUpdate)\n\nonMounted((): void => {\n  imageWidth.value = (container.value?.clientWidth ?? 0) / 3 - 12\n  // After the components are auto-layouted, we assigned the fixed imageWidth so that\n  // Beethoven-Vivaldi can load the most size-optimal image\n  handleResultsUpdate()\n})\n</script>\n\n<template>\n  <ul\n    ref=\"container\"\n    :class=\"['w-full', 'grid', 'grid-cols-2', 'md:grid-cols-3', 'mb-2', 'mt-2', 'mx-0', 'gap-4', 'pt-1']\"\n  >\n    <li\n      v-for=\"(result, index) in results\"\n      ref=\"imageWrappers\"\n      :key=\"filter + '-result-' + index\"\n      :class=\"['p-1/2', 'flex', 'flex-col']\"\n    >\n      <div\n        :class=\"[\n          'rounded-2xl',\n          'focus:ring-2',\n          'focus:ring-grape-500',\n          'dark:focus:ring-canary-500',\n          'focus:ring-opacity-100',\n          'hover-hover:hover:ring-2',\n          'hover-hover:hover:ring-grape-500',\n          'hover-hover:dark:hover:ring-canary-500',\n          'hover-hover:hover:ring-opacity-100',\n          'cursor-pointer',\n        ]\"\n        tabindex=\"0\"\n        @click=\"select(result.url)\"\n        @keydown.enter=\"select(result.url)\"\n        @keydown.space=\"select(result.url)\"\n      >\n        <div class=\"relative\">\n          <ImageThumbnail\n            class=\"rounded-2xl\"\n            :placeholder-color=\"LOADING_IMAGES_BG_COLOR[index % 7]\"\n            :original-image-width=\"result.thumbnail_width || DEFAULT_THUMBNAIL_WIDTH\"\n            :original-image-height=\"result.thumbnail_height || DEFAULT_THUMBNAIL_HEIGHT\"\n            :title=\"result.title\"\n            :src=\"isUsingFallbackThumbnail(result) ? FallbackAudio : result.thumbnail_url\"\n            :proxy-image=\"!isUsingFallbackThumbnail(result)\"\n            :width=\"imageWidth\"\n            :resize-strategy=\"filter == SearchFilters.Audio ? 'stretch' : 'crop'\"\n            :aspect-ratio=\"filter == SearchFilters.Audio ? 1 : CROP_ASPECT_RATIO\"\n          />\n          <div\n            v-if=\"result.duration || filter == SearchFilters.Videos\"\n            :class=\"[\n              'ss01-nums',\n              'text-xs',\n              'h-5',\n              'rounded-xl',\n              'bg-nightfall-600',\n              'text-white-100',\n              'px-2',\n              'items-center',\n              'justify-center',\n              'flex',\n              'font-medium',\n              'absolute',\n              'bottom-1',\n              'right-1',\n            ]\"\n          >\n            <span v-if=\"filter == SearchFilters.Videos && !result.duration\" class=\"yt-live-text uppercase\">\n              {{ __('Live') }}\n            </span>\n            <template v-else>\n              {{ result.duration }}\n            </template>\n          </div>\n        </div>\n\n        <div class=\"mx-2 my-2\">\n          <div class=\"text-14-19 font-medium text-highway-100 dark:text-white-100 line-clamp-2\">{{ result.title }}</div>\n          <div\n            v-if=\"filter == SearchFilters.Audio\"\n            class=\"mt-1 text-body-extra-small leading-4 text-highway-100 dark:text-white-100\"\n            :title=\"result.description\"\n          >\n            {{ audioDescription(result) }}\n          </div>\n          <div\n            v-if=\"filter == SearchFilters.Videos\"\n            class=\"mt-1 text-12-15 text-highway-200 dark:text-white-200 truncate\"\n          >\n            {{ providerName(result) }}\n          </div>\n        </div>\n      </div>\n    </li>\n  </ul>\n</template>\n\n<style lang=\"scss\" scoped>\n// Red dot before LIVE text\n.yt-live-text {\n  &:before {\n    display: inline-block;\n    width: 5px;\n    height: 5px;\n    vertical-align: 4%;\n    margin-right: 3px;\n    background: #f00;\n    content: '';\n    border-radius: 5px;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { getHostname } from '@@/bits/url'\nimport type { ImageSearchResult } from '@@/bits/web_search'\nimport { SearchFilters } from '@@/bits/web_search'\nimport ImageThumbnail from '@@/library/v4/components/ImageThumbnail.vue'\nimport { fetchJson } from '@padlet/fetch'\nimport { computed, nextTick, onMounted, ref, watch } from 'vue'\n\nconst props = defineProps<{\n  results: ImageSearchResult[]\n  filter: SearchFilters\n}>()\n\nconst emit = defineEmits<{\n  (name: 'select', url: string): void\n}>()\n\nconst LOADING_IMAGES_BG_COLOR = ['red', 'blue', 'green', 'yellow', 'purple', 'pink', 'cyan', 'orange']\n\nconst container = ref<HTMLUListElement>()\nconst imageWrappers = ref<HTMLLIElement[]>()\n\nconst imageWidth = ref(0)\n\nconst erroredThumbnailUrls = ref(new Set())\n\nconst validResults = computed(() =>\n  props.results.filter((result) => !erroredThumbnailUrls.value.has(result.thumbnail_url)),\n)\nconst isShowingAiImages = computed<boolean>(() => props.filter === SearchFilters.AiImages)\n\nconst handleResultsUpdate = async (): Promise<void> => {\n  await nextTick()\n  imageWidth.value = imageWrappers.value && imageWrappers.value[0] ? imageWrappers.value[0].clientWidth : 0\n}\n\nconst selectWithBeacon = (url: string, beaconLink: string): void => {\n  if (beaconLink) {\n    fetchJson(beaconLink, { cors: true })\n  }\n  emit('select', url)\n}\n\nconst providerName = (result: ImageSearchResult): string => {\n  if (result.provider_name) return result.provider_name\n  return getHostname(result.url)\n}\n\nconst handleImageError = (erroredUrl) => {\n  erroredThumbnailUrls.value = new Set([...erroredThumbnailUrls.value, erroredUrl])\n}\n\nwatch(() => props.results, handleResultsUpdate)\n\nonMounted((): void => {\n  imageWidth.value = (container.value?.clientWidth ?? 0) / 3 - 12\n  // After the components are auto-layouted, we assigned the fixed imageWidth so that\n  // Beethoven-Vivaldi can load the most size-optimal image\n  handleResultsUpdate()\n})\n</script>\n\n<template>\n  <ul\n    ref=\"container\"\n    :class=\"[\n      'w-full',\n      'grid',\n      'grid-cols-2',\n      !isShowingAiImages || results.length > 4 ? 'md:grid-cols-3' : '',\n      'mx-0',\n      'gap-4',\n      !isShowingAiImages ? 'my-2 pt-1' : 'pt-2 pb-4 md:pb-2 md:px-0.25 md:box-border',\n    ]\"\n  >\n    <li\n      v-for=\"(result, index) in validResults\"\n      ref=\"imageWrappers\"\n      :key=\"result.thumbnail_url\"\n      :class=\"['p-1/2', 'flex', 'flex-col', 'relative']\"\n    >\n      <div\n        :class=\"[\n          !isShowingAiImages && 'pb-1.5',\n          'rounded-2xl',\n          'focus:ring-2',\n          'focus:ring-grape-500',\n          'dark:focus:ring-canary-500',\n          'focus:ring-opacity-100',\n          'hover-hover:hover:ring-2',\n          'hover-hover:hover:ring-grape-500',\n          'hover-hover:dark:hover:ring-canary-500',\n          'hover-hover:hover:ring-opacity-100',\n          'cursor-pointer',\n          'flex',\n          'flex-col',\n        ]\"\n        :style=\"isShowingAiImages ? 'width: fit-content' : undefined\"\n        tabindex=\"0\"\n        :data-testid=\"`contentPickerSearchResultsImage-${index}`\"\n        @click=\"selectWithBeacon(result.url, result.beacon_link)\"\n        @keydown.enter=\"selectWithBeacon(result.url, result.beacon_link)\"\n        @keydown.space=\"selectWithBeacon(result.url, result.beacon_link)\"\n      >\n        <ImageThumbnail\n          v-if=\"result.width && result.height\"\n          class=\"rounded-2xl\"\n          :placeholder-color=\"LOADING_IMAGES_BG_COLOR[index % 7]\"\n          :original-image-width=\"Number(result.width)\"\n          :original-image-height=\"Number(result.height)\"\n          :title=\"result.title\"\n          :src=\"result.thumbnail_url\"\n          :width=\"imageWidth\"\n          :aspect-ratio=\"result.width / result.height\"\n          :process-image=\"isShowingAiImages\"\n          @error=\"handleImageError(result.thumbnail_url)\"\n        />\n        <img\n          v-else\n          class=\"rounded-2xl\"\n          :alt=\"result.title\"\n          loading=\"lazy\"\n          :src=\"result.thumbnail_url\"\n          @error=\"handleImageError(result.thumbnail_url)\"\n        />\n        <span v-if=\"!isShowingAiImages\">\n          <div v-if=\"result.attribution_link\" class=\"mx-2\">\n            <div class=\"mt-1.5 mb-0.5\">\n              <div v-if=\"providerName(result) === 'Unsplash'\" class=\"text-12-15 text-highway-200 dark:text-white-200\">\n                {{ __('%{imageAuthorName} on Unsplash', { imageAuthorName: result.title }) }}\n              </div>\n              <div v-else class=\"mt-1 text-12-15 text-highway-200 dark:text-white-200 truncate\" :title=\"result.title\">\n                {{ result.title }}\n              </div>\n            </div>\n            <div class=\"flex flex-row text-12-15 mt-0.5 ss01-nums text-highway-200 dark:text-white-200 truncate\">\n              <a\n                :class=\"[\n                  'text-12-15',\n                  'font-semibold',\n                  'text-highway-200',\n                  'dark:text-white-200',\n                  'shrink-0',\n                  'hover-hover:hover:text-grape-500',\n                  'hover-hover:dark:hover:text-canary-500',\n                  'focus:text-grape-500',\n                  'hover-hover:dark:focus:text-canary-500',\n                  'rounded',\n                  'focus:ring-2',\n                  'focus:ring-hover',\n                ]\"\n                :href=\"result.attribution_link\"\n                target=\"_blank\"\n                :aria-label=\"__('Go to source of the image')\"\n                @click.stop=\"\"\n              >\n                {{ __('Source') }}\n              </a>\n            </div>\n          </div>\n          <div v-else class=\"mx-2\">\n            <div class=\"mt-1.5 text-12-15 text-highway-200 dark:text-white-200 truncate\">\n              {{ providerName(result) }}\n            </div>\n          </div>\n        </span>\n      </div>\n    </li>\n  </ul>\n</template>\n","<script setup lang=\"ts\">\nimport type { WebSearchResult } from '@@/bits/web_search'\nimport { nextTick, ref } from 'vue'\n\ndefineProps<{\n  results: WebSearchResult[]\n}>()\n\nconst emit = defineEmits<{\n  (name: 'select', url: string): void\n}>()\n\nconst hoveringOn = ref<number | null>(null)\n\nfunction onSelect(url: string) {\n  emit('select', url)\n}\n\nfunction onHover(index: number) {\n  nextTick(() => (hoveringOn.value = index))\n}\n\nfunction onStopHover() {\n  hoveringOn.value = null\n}\n</script>\n\n<template>\n  <ul :class=\"['grid', 'grid-cols-1', 'mx-0', '-mt-1', 'md:mt-0', 'md:pt-2']\">\n    <li\n      v-for=\"(result, index) in results\"\n      :key=\"'web-result-' + index\"\n      :class=\"['flex', 'flex-col', 'pt-0', 'pb-0', 'last:mb-2', 'px-0', 'relative']\"\n      @mouseenter.stop=\"onHover(index)\"\n      @mouseleave.stop=\"onStopHover\"\n      @focusin=\"onHover(index)\"\n      @focusout=\"onStopHover\"\n      @click=\"onSelect(result.url)\"\n      @keydown.enter=\"onSelect(result.url)\"\n      @keydown.space=\"onSelect(result.url)\"\n    >\n      <div\n        tabindex=\"0\"\n        :class=\"[\n          'rounded-xl',\n          'focus:ring-2',\n          'focus:ring-grape-500',\n          'dark:focus:ring-canary-500',\n          'focus:ring-opacity-100',\n          'hover-hover:hover:ring-2',\n          'hover-hover:hover:ring-grape-500',\n          'hover-hover:dark:hover:ring-canary-500',\n          'hover-hover:hover:ring-opacity-100',\n          'only:hide-separator',\n          'last:hide-separator',\n          'cursor-pointer',\n          'px-2',\n          'py-3',\n        ]\"\n      >\n        <div class=\"font-semibold text-17-22 text-highway-100 dark:text-white-100 mb-1\">{{ result.title }}</div>\n        <div class=\"font-normal text-body-extra-small leading-4 text-highway-100 dark:text-white-100 mb-1\">\n          {{ result.description }}\n        </div>\n        <div class=\"truncate font-normal text-12-15 mt-1 text-highway-200 dark:text-white-200\">{{ result.url }}</div>\n      </div>\n      <div\n        :class=\"[\n          'separator',\n          'border-solid',\n          'border-highway-disabled',\n          'dark:border-white-disabled',\n          'border-t',\n          'absolute',\n          'bottom-0',\n          'left-0',\n          'right-0',\n          hoveringOn === index || (hoveringOn != null && hoveringOn - 1 === index) ? 'hidden' : '',\n        ]\"\n      />\n    </li>\n  </ul>\n</template>\n","<template>\n  <a :href=\"href\" target=\"_blank\">\n    <img class=\"attribution-image\" :src=\"src\" :width=\"width\" :height=\"height\" :alt=\"alt\" />\n  </a>\n</template>\n\n<script>\nimport { attributionMap } from '@@/bits/web_search'\nimport ProcessedImage from '@@/vuecomponents/processed_image.vue'\n\nexport default {\n  components: { ProcessedImage },\n  props: {\n    alt: {\n      type: String,\n      default: '',\n    },\n    provider: {\n      type: String,\n      required: true,\n    },\n  },\n  computed: {\n    href() {\n      return attributionMap[this.provider].href\n    },\n    src() {\n      return attributionMap[this.provider].src\n    },\n    width() {\n      return attributionMap[this.provider].width\n    },\n    height() {\n      return attributionMap[this.provider].height\n    },\n  },\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.attribution-image {\n  display: block;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { trackEvent } from '@@/bits/analytics'\nimport device from '@@/bits/device'\nimport { emojiUrl } from '@@/bits/emoji'\nimport { observeElementIntersection } from '@@/bits/intersection'\nimport { __, np__ } from '@@/bits/intl'\nimport type {\n  AiImageSearchResult,\n  AudioSearchResult,\n  ImageSearchResult,\n  VideoSearchResult,\n  WebSearchResult,\n} from '@@/bits/web_search'\nimport { SearchFilters } from '@@/bits/web_search'\nimport OzContainedButton, {\n  OzContainedButtonColorScheme,\n  OzContainedButtonSizePreset,\n} from '@@/library/v4/components/OzContainedButton.vue'\nimport OzIndeterminateSpinner from '@@/library/v4/components/OzIndeterminateSpinner.vue'\nimport { useDarkModeStore } from '@@/pinia/dark_mode'\nimport ContentPickerSearchResultsAv from '@@/vuecomponents/ContentPickerSearchResultsAv.vue'\nimport ContentPickerSearchResultsImage from '@@/vuecomponents/ContentPickerSearchResultsImage.vue'\nimport ContentPickerSearchResultsWeb from '@@/vuecomponents/content-picker-search-results-web.vue'\nimport WebBrowserAttribution from '@@/vuecomponents/web_browser_attribution.vue'\nimport { processedUrl } from '@padlet/vivaldi-client'\nimport { storeToRefs } from 'pinia'\nimport { nextTick, onUnmounted, ref, watch } from 'vue'\n\nconst props = defineProps<{\n  isOnline: boolean\n  searchQuery: string\n  searchFilter: SearchFilters | null\n  results: (AudioSearchResult | WebSearchResult | VideoSearchResult | ImageSearchResult | AiImageSearchResult)[]\n  isSearchQueryInProgress: boolean\n  isSearchMoreQueryInProgress: boolean\n  isAiImageSearchMode: boolean\n  canSearchMore: boolean\n  hasError: boolean\n}>()\n\nconst emit = defineEmits<{\n  (name: 'select', data: string): void\n  (name: 'search-more'): void\n  (name: 'clear-search-error'): void\n}>()\n\n// From JoyPixels\nconst EMOJIS = {\n  '1f626': {\n    code: '1f626',\n    category: 'people',\n    shortname: ':frowning:',\n    name: 'frowning face with open mouth',\n    keywords: ['face', 'frown', 'mouth', 'open'],\n    url: emojiUrl('png', '1f626'),\n  },\n  '1f633': {\n    code: '1f633',\n    category: 'people',\n    shortname: ':flushed:',\n    name: 'flushed face',\n    keywords: ['dazed', 'face', 'flushed'],\n    url: emojiUrl('png', '1f633'),\n  },\n  '1f634': {\n    code: '1f634',\n    category: 'people',\n    shortname: ':sleeping:',\n    name: 'sleeping face',\n    keywords: ['face', 'sleep', 'zzz'],\n    url: emojiUrl('png', '1f634'),\n  },\n}\n\nconst isMobile = device.mobile\nconst { isDarkMode } = storeToRefs(useDarkModeStore())\n\nconst resultBody = ref<HTMLDivElement | null>(null)\n\nconst hasNoResults = ref<boolean>(false)\nconst intersectionObserver = ref<IntersectionObserver | null>(null)\n\nconst processedIconUrl = (icon: object & { url: string }): string => {\n  return processedUrl(icon.url, { width: 64, height: 64, preset: 'icon' })\n}\n\nconst select = (data: string): void => {\n  if (props.isAiImageSearchMode) {\n    trackEvent('AI Image Search', 'Selected image from AI search')\n  }\n  emit('select', data)\n}\n\nwatch(\n  () => props.results,\n  (): void => {\n    nextTick(() => {\n      // necessary to wait for the element to appear\n      const searchMoreTrigger = document.querySelector('#search-more-trigger') as HTMLDivElement\n      if (searchMoreTrigger) {\n        intersectionObserver.value = observeElementIntersection(searchMoreTrigger, () => {\n          emit('search-more')\n        })\n      }\n    })\n  },\n)\n\nwatch([() => props.isSearchQueryInProgress, () => props.searchFilter], (): void => {\n  let xResults = true\n  if (props.searchQuery) {\n    xResults = props.results && props.results.length > 0\n  }\n  hasNoResults.value = !xResults\n})\n\nwatch(\n  () => props.searchFilter,\n  (): void => {\n    if (!resultBody.value) return\n    resultBody.value.scrollTop = 0\n  },\n)\n\nwatch(\n  () => props.isOnline,\n  (): void => {\n    emit('clear-search-error')\n  },\n)\n\nonUnmounted(() => {\n  const searchMoreTrigger = document.querySelector('#search-more-trigger') as HTMLDivElement\n  if (intersectionObserver.value !== null && searchMoreTrigger) {\n    intersectionObserver.value.unobserve(searchMoreTrigger)\n  }\n})\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'relative flex grow flex-col overflow-hidden',\n      isAiImageSearchMode && !isMobile ? 'h-auto pb-2' : 'h-full',\n    ]\"\n    role=\"status\"\n  >\n    <div v-if=\"isSearchQueryInProgress\" :class=\"[!isAiImageSearchMode && 'mt-2']\">\n      <div\n        v-if=\"isAiImageSearchMode\"\n        class=\"h-109 my-0.5 text-dark-text-100 dark:text-light-text-100 flex flex-col items-center justify-center pb-8\"\n      >\n        <div class=\"pb-4\"><OzIndeterminateSpinner :size=\"48\" /></div>\n        <p class=\"text-input-body-small\">\n          <strong>{{ __('Drawing your words...') }}</strong>\n        </p>\n        <p class=\"text-body-extra-small\">{{ __('This may take up to a minute') }}</p>\n      </div>\n      <OzIndeterminateSpinner v-else class=\"mx-auto\" :size=\"32\" />\n    </div>\n    <div\n      v-else-if=\"isAiImageSearchMode && hasError && isOnline\"\n      class=\"flex grow justify-center items-center flex-col text-highway-100 dark:text-white-100 h-full min-h-1/4 mb-8 px-4\"\n    >\n      <p class=\"pb-4\">\n        <img width=\"48\" height=\"48\" :src=\"processedIconUrl(EMOJIS['1f633'])\" :alt=\"EMOJIS['1f634'].name\" />\n      </p>\n      <p class=\"text-center\">\n        {{ __(\"Sorry! Looks like we can't draw that either.\") }}\n      </p>\n    </div>\n    <div\n      v-else-if=\"hasNoResults && isOnline\"\n      class=\"flex grow justify-center items-center flex-col text-highway-100 dark:text-white-100 h-full min-h-1/4 mb-8 px-4\"\n    >\n      <p class=\"pb-4\">\n        <img width=\"48\" height=\"48\" :src=\"processedIconUrl(EMOJIS['1f626'])\" :alt=\"EMOJIS['1f634'].name\" />\n      </p>\n      <p class=\"text-center\">{{ __('No results found for your search term.') }}</p>\n      <p class=\"text-center\">{{ __('Hope you find what you are looking for!') }}</p>\n    </div>\n    <div\n      v-else-if=\"results\"\n      ref=\"resultBody\"\n      :class=\"['overflow-auto', 'px-4', 'scrollbar-regular', 'dark:scrollbar-regular-dark']\"\n    >\n      <p class=\"sr-only\">\n        {{\n          np__('Number of search results found.', '{count} search result', '{count} search results', results.length, {\n            count: results.length,\n          })\n        }}\n      </p>\n      <div v-if=\"searchFilter === SearchFilters.Gif\" class=\"flex flex-1 items-center justify-center\" role=\"note\">\n        <WebBrowserAttribution\n          :aria-label=\"__('Powered By GIPHY')\"\n          :provider=\"isDarkMode ? 'giphyWhite' : 'giphyBlack'\"\n        />\n      </div>\n      <ContentPickerSearchResultsWeb v-if=\"searchFilter == SearchFilters.Web\" :results=\"results\" @select=\"select\" />\n      <ContentPickerSearchResultsImage\n        v-else-if=\"searchFilter === SearchFilters.Images\"\n        :filter=\"searchFilter\"\n        :results=\"results\"\n        @select=\"select\"\n      />\n      <ContentPickerSearchResultsImage\n        v-else-if=\"searchFilter === SearchFilters.UnsplashImages\"\n        :filter=\"searchFilter\"\n        :results=\"results\"\n        @select=\"select\"\n      />\n      <ContentPickerSearchResultsImage\n        v-else-if=\"searchFilter === SearchFilters.AiImages\"\n        :filter=\"searchFilter\"\n        :results=\"results\"\n        @select=\"select\"\n      />\n      <ContentPickerSearchResultsImage\n        v-else-if=\"searchFilter === SearchFilters.Gif\"\n        :filter=\"searchFilter\"\n        :results=\"results\"\n        @select=\"select\"\n      />\n      <ContentPickerSearchResultsImage\n        v-else-if=\"searchFilter === SearchFilters.Stock\"\n        :filter=\"searchFilter\"\n        :results=\"results\"\n        @select=\"select\"\n      />\n      <ContentPickerSearchResultsAv\n        v-else-if=\"searchFilter === SearchFilters.Audio\"\n        :filter=\"searchFilter\"\n        :results=\"results\"\n        @select=\"select\"\n      />\n      <ContentPickerSearchResultsAv\n        v-else-if=\"searchFilter === SearchFilters.Videos\"\n        :filter=\"searchFilter\"\n        :results=\"results\"\n        @select=\"select\"\n      />\n      <transition name=\"fade\">\n        <div v-if=\"isSearchMoreQueryInProgress\" class=\"absolute bottom-2 inset-x-0 my-2 flex justify-center\">\n          <div class=\"bg-modal-light dark:bg-dark-ui-300 p-2 rounded-xl shadow-xl animate-bounce\">\n            <OzIndeterminateSpinner :size=\"24\" />\n          </div>\n        </div>\n      </transition>\n      <div v-if=\"canSearchMore && isOnline\" id=\"search-more-trigger\" class=\"flex justify-center mt-4 mb-8 h-12\">\n        <OzContainedButton\n          v-show=\"!isSearchMoreQueryInProgress\"\n          :color-scheme=\"OzContainedButtonColorScheme.Secondary\"\n          :size-preset=\"OzContainedButtonSizePreset.H32px\"\n          class=\"relative mx-auto mt-4\"\n          :text=\"__('Load more')\"\n          @click=\"$emit('search-more')\"\n        />\n      </div>\n    </div>\n    <transition name=\"fade\">\n      <div\n        v-if=\"!isSearchQueryInProgress && !hasNoResults && hasError && isOnline\"\n        class=\"flex grow justify-center items-center flex-col text-highway-100 dark:text-white-100 h-full min-h-1/4 mb-8 px-4\"\n      >\n        <p class=\"pb-4\">\n          <img width=\"48\" height=\"48\" :src=\"processedIconUrl(EMOJIS['1f633'])\" :alt=\"EMOJIS['1f634'].name\" />\n        </p>\n        <p class=\"text-center\">{{ __('Oops! Something went wrong.') }}</p>\n        <p class=\"text-center\">{{ __('Please try again.') }}</p>\n      </div>\n    </transition>\n    <transition name=\"fade\">\n      <!-- N.B. If not online, we cannot load image, therefore\n      we use v-show instead of v-if to preload this part -->\n      <div\n        v-show=\"!isSearchQueryInProgress && !isOnline\"\n        class=\"flex grow justify-center items-center flex-col text-highway-100 dark:text-white-100 h-full min-h-1/4 mb-8 px-4\"\n      >\n        <p class=\"pb-4\">\n          <img width=\"48\" height=\"48\" :src=\"processedIconUrl(EMOJIS['1f634'])\" :alt=\"EMOJIS['1f634'].name\" />\n        </p>\n        <p class=\"text-center\">{{ __(\"You're offline.\") }}</p>\n        <p class=\"text-center\">{{ __('Please try again.') }}</p>\n      </div>\n    </transition>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.fade-enter-active,\n.fade-leave-active {\n  transition: opacity 0.25s;\n}\n.fade-enter,\n.fade-leave-to {\n  transition: none;\n}\n</style>\n","<script lang=\"ts\" setup>\nimport type { ChicletBackgroundColor } from '@@/bits/chiclet_color'\nimport OzAvatar from '@@/library/v4/components/OzAvatar.vue'\nimport OzBadge, { OzBadgeColorScheme } from '@@/library/v4/components/OzBadge.vue'\nimport OzBaseButton from '@@/library/v4/components/OzBaseButton.vue'\nimport OzIcon from '@@/library/v4/components/OzIcon.vue'\nimport { computed } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    iconName?: string\n    color?: ChicletBackgroundColor\n    disabled?: boolean\n    avatarUrl?: string\n    avatarAltText?: string\n    xNewBadge?: boolean\n    text?: string\n    subtext?: string\n  }>(),\n  {\n    iconName: '',\n    color: 'green',\n    disabled: false,\n    avatarUrl: '',\n    avatarAltText: '',\n    xNewBadge: false,\n    text: '',\n    subtext: '',\n  },\n)\ndefineEmits<{\n  (name: 'click', event: MouseEvent): void\n}>()\n\nconst iconColorClasses = computed(() => {\n  switch (props.color) {\n    case 'green':\n      return ['text-park']\n    case 'orange':\n      return ['text-tangerine']\n    case 'pink':\n      return ['text-padlet-pink']\n    case 'blue':\n      return ['text-oceanic']\n    case 'purple':\n      return ['text-grape']\n    case 'teal':\n      return ['text-teal']\n    default:\n      return []\n  }\n})\n</script>\n\n<template>\n  <OzBaseButton\n    :class=\"[\n      'relative',\n      'flex',\n      'items-center',\n      'text-dark-text-100',\n      'dark:text-light-text-100',\n      'py-3 @tablet-portrait/surface-container:py-2 tablet-portrait:-@:py-2',\n      'ps-3 pe-0',\n\n      // Background\n      'dark:bg-dark-ui-200',\n      color === 'green' && ['bg-park-0'],\n      color === 'orange' && ['bg-tangerine-0'],\n      color === 'pink' && ['bg-padlet-pink-0'],\n      color === 'blue' && ['bg-oceanic-0'],\n      color === 'purple' && ['bg-grape-0'],\n      color === 'teal' && ['bg-teal-0'],\n\n      // Interaction\n      !disabled && [\n        'transition-all',\n\n        // Animation\n        'hhover:animate-pulse-bg-color',\n        'hactive:animate-none',\n        'focus-visible:animate-none',\n        'dark:pulse-bg-from-dark-ui-200',\n        'dark:pulse-bg-to-dark-ui-300',\n\n        // Hover/Focus/Active\n        'hactive:text-dark-text-100',\n        'hactive:dark:bg-dark-ui-300',\n        'hactive:dark:text-light-text-100',\n        'focus-visible:dark:bg-dark-ui-300',\n        'dark:active:bg-dark-ui-300',\n        'dark:active:text-light-text-100',\n        'dark:focus-visible:bg-dark-ui-300',\n        'active:text-dark-text-100',\n\n        // Focus ring\n        '@tablet-portrait/surface-container:focus-visible:ring-[2.5px] tablet-portrait:-@:focus-visible:ring-[2.5px]',\n        '@tablet-portrait/surface-container:ring-offset-[1.5px] tablet-portrait:-@:ring-offset-[1.5px]',\n        'dark:ring-offset-grey-900 ring-offset-white',\n        'ring-grape-500 dark:ring-canary-500',\n\n        color === 'green' && [\n          'focus-visible:bg-park-200',\n          'hactive:bg-park-200',\n          'pulse-bg-from-park-0 pulse-bg-to-park-200',\n        ],\n        color === 'orange' && [\n          'focus-visible:bg-tangerine-100',\n          'hactive:bg-tangerine-100',\n          'pulse-bg-from-tangerine-0 pulse-bg-to-tangerine-200',\n        ],\n        color === 'pink' && [\n          'focus-visible:bg-padlet-pink-100',\n          'hactive:bg-padlet-pink-100',\n          'pulse-bg-from-padlet-pink-0 pulse-bg-to-padlet-pink-200',\n        ],\n        color === 'blue' && [\n          'focus-visible:bg-oceanic-100',\n          'hactive:bg-oceanic-100',\n          'pulse-bg-from-oceanic-0 pulse-bg-to-oceanic-200',\n        ],\n        color === 'purple' && [\n          'focus-visible:bg-grape-100',\n          'hactive:bg-grape-100',\n          'pulse-bg-from-grape-0 pulse-bg-to-grape-200',\n        ],\n        color === 'teal' && [\n          'focus-visible:bg-teal-100',\n          'hactive:bg-teal-100',\n          'pulse-bg-from-teal-0 pulse-bg-to-teal-200',\n        ],\n      ],\n    ]\"\n    @click=\"$emit('click', $event)\"\n  >\n    <OzIcon v-if=\"iconName\" :size=\"24\" :class=\"['shrink-0', iconColorClasses]\" :name=\"iconName\" />\n    <OzAvatar\n      v-else-if=\"avatarUrl\"\n      :height=\"24\"\n      :width=\"24\"\n      :src=\"avatarUrl\"\n      :alt-text-name=\"avatarAltText\"\n      :class=\"['shrink-0 rounded-full', iconColorClasses]\"\n    />\n\n    <span\n      :class=\"[\n        'mx-3 text-body-posts @tablet-portrait/surface-container:text-body-small tablet-portrait:-@:text-body-small text-start truncate grow',\n        subtext && 'max-w-[60%] shrink-0',\n      ]\"\n      >{{ text }}</span\n    >\n\n    <span v-if=\"subtext\" class=\"ms-auto me-4 text-body-small text-dark-text-200 dark:text-light-text-200 truncate\">{{\n      subtext\n    }}</span>\n    <OzBadge\n      v-if=\"xNewBadge\"\n      :text=\"__('New')\"\n      :color-scheme=\"OzBadgeColorScheme.Bare\"\n      :class=\"[\n        'text-light-text-100',\n        'bg-park-500 dark:bg-park-800',\n        'me-4 @tablet-portrait/surface-container:me-2.5 tablet-portrait:-@:me-2.5',\n        'px-1.5 h-5',\n        'rounded-md',\n      ]\"\n    />\n  </OzBaseButton>\n</template>\n","<script setup lang=\"ts\">\nimport type { ContentPickerSourceMenuListItem } from '@@/bits/content_picker'\nimport { ContentPickerSource } from '@@/bits/content_picker'\nimport device from '@@/bits/device'\nimport { __ } from '@@/bits/intl'\nimport type { SearchFilters } from '@@/bits/web_search'\nimport ChicletButton from '@@/vuecomponents/ChicletButton.vue'\nimport { computed, watch } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    menuList: Array<Array<ContentPickerSourceMenuListItem>>\n    clipboardText: string\n    xClipboardButton: boolean\n    isPhoneScreen: boolean\n    isDisabledOnDrag?: boolean\n  }>(),\n  {\n    isDisabledOnDrag: false,\n  },\n)\n\nconst emit = defineEmits<{\n  (name: 'close'): void\n  (name: 'paste-text'): void\n  (name: 'focus-search-bar', payload: SearchFilters): void\n  (name: 'select', payload: ContentPickerSource): void\n  (name: 'select-link', url: string): void\n  (name: 'trigger-link-input'): void\n  (name: 'trigger-ai-image-search'): void\n}>()\n\nconst displayedSourceMenuLists = computed<Array<Array<ContentPickerSourceMenuListItem>>>(() => {\n  const visibleItemLists = props.menuList\n    .map((list) => list.filter((item) => item.visible))\n    .filter((list) => list.length > 0)\n  const displayedLists: Array<Array<ContentPickerSourceMenuListItem>> = []\n\n  // If 2 adjacent lists have less than or equal to 3 items, we group them together\n  let i = 0\n  let bucket: ContentPickerSourceMenuListItem[] = []\n  while (i < visibleItemLists.length) {\n    bucket.push(...visibleItemLists[i])\n    if (bucket.length >= 3) {\n      displayedLists.push(bucket)\n      bucket = []\n    }\n    i++\n  }\n  if (bucket.length > 0) displayedLists.push(bucket)\n\n  // If total items count is less than or equal to 9, we group all lists together\n  const itemsCount = displayedLists.reduce((count, list) => count + list.length, 0)\n  return itemsCount <= 9 ? [displayedLists.flat()] : displayedLists\n})\n\nwatch(displayedSourceMenuLists, (lists) => {\n  // When there's nothing else to show in the menu, close it\n  if (lists.flat(Infinity).length === 0) {\n    emit('close')\n  }\n})\n\n// Triggers <input file> element and use camera directly\nconst triggerNativeInputWithCamera = (id: string): void => {\n  const input = document.getElementById(id)\n  if (input) {\n    input.setAttribute('capture', 'environment')\n    input.click()\n    input.removeAttribute('capture')\n  }\n}\n\nconst onClick = (item: ContentPickerSourceMenuListItem) => {\n  if (item.hiddenInputId) {\n    if (\n      device.mobile &&\n      item.type !== ContentPickerSource.FileBrowser // For file browser, don't open camera\n    ) {\n      triggerNativeInputWithCamera(item.hiddenInputId)\n    } else {\n      document.getElementById(item.hiddenInputId)?.click()\n    }\n  }\n\n  emit(item.actionType as any, item.actionPayload as any)\n}\n</script>\n\n<template>\n  <div class=\"pb-4 px-4 mt-0 @tablet-portrait/surface-container:mt-3 tablet-portrait:-@:mt-3\">\n    <div\n      v-if=\"isPhoneScreen && xClipboardButton\"\n      :class=\"[\n        'grid grid-flow-row',\n        'grid-cols-1 @tablet-portrait/surface-container:grid-cols-3 tablet-portrait:-@:grid-cols-3',\n        'gap-0 @tablet-portrait/surface-container:gap-3 tablet-portrait:-@:gap-3',\n        'mb-4',\n      ]\"\n    >\n      <ChicletButton\n        :class=\"['rounded-2.5xl @tablet-portrait/surface-container:rounded-xl tablet-portrait:-@:rounded-xl']\"\n        :disabled=\"isDisabledOnDrag\"\n        color=\"pink\"\n        icon-name=\"clipboard_outline\"\n        :aria-label=\"__('Paste from clipboard. Your clipboard text is: %{clipboardText}', { clipboardText })\"\n        :text=\"__('Clipboard')\"\n        :subtext=\"clipboardText\"\n        @click=\"$emit('paste-text')\"\n      />\n    </div>\n\n    <div\n      v-for=\"(list, index) in displayedSourceMenuLists\"\n      :key=\"index\"\n      :class=\"[\n        'grid grid-flow-row',\n        'grid-cols-1 @tablet-portrait/surface-container:grid-cols-3 tablet-portrait:-@:grid-cols-3',\n        'gap-0 @tablet-portrait/surface-container:gap-3 tablet-portrait:-@:gap-3',\n        {\n          'mt-4 @tablet-portrait/surface-container:mt-6 tablet-portrait:-@:mt-6': index > 0,\n        },\n      ]\"\n    >\n      <template v-for=\"(item, itemIndex) in list\">\n        <ChicletButton\n          :key=\"item.text\"\n          :class=\"[\n            'first:rounded-t-2.5xl @tablet-portrait/surface-container:first:rounded-t-xl tablet-portrait:-@:first:rounded-t-xl',\n            'last:rounded-b-2.5xl @tablet-portrait/surface-container:last:rounded-b-xl tablet-portrait:-@:last:rounded-b-xl',\n            '@tablet-portrait/surface-container:rounded-xl tablet-portrait:-@:rounded-xl',\n            isPhoneScreen && itemIndex < list.length - 1 && 'horizontal-bottom-separator',\n          ]\"\n          :aria-label=\"item.ariaLabel\"\n          :disabled=\"item.disabled && isDisabledOnDrag\"\n          :hidden-input-id=\"item.hiddenInputId\"\n          :color=\"item.color\"\n          :icon-name=\"item.icon\"\n          :avatar-url=\"item.avatarUrl\"\n          :avatar-alt-text=\"item.avatarAltText\"\n          :x-new-badge=\"item.isNew\"\n          :data-testid=\"item.testId\"\n          :text=\"item.text\"\n          @click=\"() => onClick(item)\"\n        />\n      </template>\n    </div>\n  </div>\n</template>\n\n<style lang=\"postcss\">\n.horizontal-bottom-separator::after {\n  @apply bg-highway-disabled dark:bg-white-disabled;\n  @apply absolute bottom-0 start-12 end-4;\n  @apply h-[0.5px];\n  @apply content-[\"\"];\n}\n</style>\n","<script setup lang=\"ts\">\nimport { trackEvent } from '@@/bits/analytics'\nimport { getTextFromClipboard, supportReadFromClipboardAPI } from '@@/bits/clipboard'\nimport type { ContentPickerSourceMenuListItem, NoSearchFilterError } from '@@/bits/content_picker'\nimport { ContentPickerSource } from '@@/bits/content_picker'\nimport { dir } from '@@/bits/current_dir'\nimport device from '@@/bits/device'\nimport { getNearestScrollingElement } from '@@/bits/dom'\nimport { __ } from '@@/bits/intl'\nimport { SearchFilters } from '@@/bits/web_search'\nimport OzCloseButton from '@@/library/v4/components/OzCloseButton.vue'\nimport OzScreenSizeAwareCenterModal from '@@/library/v4/components/OzScreenSizeAwareCenterModal.vue'\nimport { useContentPickerStore, type ContentPickerSearchMode } from '@@/pinia/content_picker'\nimport { useDarkModeStore } from '@@/pinia/dark_mode'\nimport { useWindowSizeStore } from '@@/pinia/window_size'\nimport AiImageSearchSample from '@@/vuecomponents/AiImageSearchSample.vue'\nimport ContentPickerSearchBar from '@@/vuecomponents/ContentPickerSearchBar.vue'\nimport ContentPickerSearchModes from '@@/vuecomponents/ContentPickerSearchModes.vue'\nimport ContentPickerSearchResults from '@@/vuecomponents/ContentPickerSearchResults.vue'\nimport ContentPickerSearchSuggestions from '@@/vuecomponents/ContentPickerSearchSuggestions.vue'\nimport ContentPickerSourceMenuList from '@@/vuecomponents/ContentPickerSourceMenuList.vue'\nimport { storeToRefs } from 'pinia'\nimport { computed, nextTick, onMounted, ref, watch } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    isOnline: boolean\n    menuList: Array<Array<ContentPickerSourceMenuListItem>>\n    preferredTrayStartHeight: number\n    searchSuggestions?: string[]\n    searchModes?: ContentPickerSearchMode[]\n    defaultSearchMode?: SearchFilters\n    /**\n     * Whether or not the search bar can accept a link (addding a link directly from the search bar).\n     * If this is `false`, the search bar will always search the input text.\n     */\n    canAcceptLinkInSearchBar?: boolean\n    minHeight?: number\n    xSearchBar?: boolean\n    shouldForceFullSize?: boolean\n  }>(),\n  {\n    minHeight: undefined,\n    xSearchBar: true,\n    shouldForceFullSize: false,\n    searchSuggestions: undefined,\n    searchModes: undefined,\n    defaultSearchMode: undefined,\n    canAcceptLinkInSearchBar: true,\n  },\n)\n\nconst emit = defineEmits<{\n  (name: 'close'): void\n  (name: 'select', source: ContentPickerSource): void\n  (name: 'select-link', url: string, payload: { altText?: string; contentSource: ContentPickerSource }): void\n}>()\n\nconst isSafari = device.safari\nconst isTouchable = device.touchable\n\nconst CLIPBOARD_ITEM_HEIGHT = 60 // clipboard's height is 48px and it's margin is 12px\nconst DEFAULT_SEARCH_MODES_TABS = {\n  [SearchFilters.Images]: { key: SearchFilters.Images, ref: 'imagesButton', text: __('Images') },\n  [SearchFilters.Gif]: { key: SearchFilters.Gif, ref: 'gifButton', text: __('GIF') },\n  [SearchFilters.Videos]: { key: SearchFilters.Videos, ref: 'youtubeButton', text: __('YouTube') },\n  [SearchFilters.Audio]: { key: SearchFilters.Audio, ref: 'spotifyButton', text: __('Spotify') },\n  [SearchFilters.Web]: { key: SearchFilters.Web, ref: 'webButton', text: __('Web') },\n}\n\nconst { isSmallerThanTabletPortrait, windowHeight } = storeToRefs(useWindowSizeStore())\nconst { isDarkMode } = storeToRefs(useDarkModeStore())\n\nconst contentPickerStore = useContentPickerStore()\nconst {\n  searchFilter,\n  xSearchScreen,\n  isOpenedFromSearch,\n  xSearchSuggestions,\n  isLinkInputMode,\n  isAiImageSearchMode,\n  xAiImageResults,\n  xAiImagePreview,\n  searchQuery,\n  currentSearchResultsMap,\n  isSearchQueryInProgress,\n  isSearchMoreQueryInProgress,\n  isError,\n  currentSearchResultsForFilter,\n  currentSearchMoreUrlForFilter,\n  searchSuggestions,\n  isImageSearchMode,\n} = storeToRefs(contentPickerStore)\nconst {\n  syncSearchSuggestionsWithStorage,\n  pickSearchFilter,\n  openSearch,\n  closeSearch,\n  setSearchQuery,\n  startLinkInputMode,\n  endLinkInputMode,\n  openAiImagePreview,\n  closeAiImageSearchMode,\n  reopenAiImagePreview,\n  search,\n  clearSearchError,\n  searchMore,\n} = contentPickerStore\n\nconst searchBarRef = ref<InstanceType<typeof ContentPickerSearchBar> | null>(null)\nconst searchModesRef = ref<InstanceType<typeof ContentPickerSearchModes> | null>(null)\n\nconst currentClipboardText = ref<string>('')\nconst searchFocused = ref<boolean>(false)\nconst isExpanded = ref<boolean>(false)\nconst shouldWiggleSearchBar = ref<boolean>(false)\n\nconst clipboardEnabled = computed<boolean>(() => {\n  return (\n    supportReadFromClipboardAPI &&\n    !device.safari && // Safari handles clipboard API weirdly so we don't use that at all\n    !device.androidApp // Disabling for now until we can find a way to accept clipboard permissions in android webview\n  )\n})\n\nconst xClipboardButton = ref<boolean>(clipboardEnabled.value)\n\n// SEARCH MODES\n\nconst currentSearchModes = computed((): ContentPickerSearchMode[] => {\n  if (props.searchModes) {\n    return props.searchModes\n  }\n\n  const buttons: ContentPickerSearchMode[] = []\n  const flatMenulist: ContentPickerSourceMenuListItem[] = props.menuList.flatMap((innerMenuList) => innerMenuList)\n\n  for (const item of flatMenulist) {\n    if (Object.keys(DEFAULT_SEARCH_MODES_TABS).includes(item.type)) {\n      buttons.push(DEFAULT_SEARCH_MODES_TABS[item.type])\n    }\n  }\n\n  return buttons\n})\nconst defaultSearchMode = computed((): SearchFilters => {\n  if (props.defaultSearchMode) {\n    return props.defaultSearchMode\n  }\n\n  const searchFilters = currentSearchModes.value.map((button) => button.key) as SearchFilters[]\n  return searchFilters.includes(SearchFilters.Web) ? SearchFilters.Web : searchFilters[0]\n})\n\n// DIALOG\n\nconst closeMenu = (): void => {\n  emit('close')\n}\n\nconst handleScrimClick = (): void => {\n  // Ignore scrim clicking for iPad\n  if (searchFocused.value && isTouchable) return\n  closeMenu()\n}\n\nconst menuListDisabled = ref<boolean>(false)\n\nconst handleDragStart = (): void => {\n  menuListDisabled.value = true\n}\n\nconst handleDragEnd = (): void => {\n  menuListDisabled.value = false\n}\n\n// GREEN BUTTONS\n\nconst selectSource = (source: ContentPickerSource): void => {\n  trackEvent('Content Picker', `Selected ${source}`)\n  endLinkInputMode()\n  shouldWiggleSearchBar.value = false\n  emit('select', source)\n}\n\nconst selectSearchResult = (url: string): void => {\n  trackEvent('Content Picker', 'Selected search result')\n\n  const contentSource = {\n    [SearchFilters.Images]: ContentPickerSource.ImageSearch,\n    [SearchFilters.Gif]: ContentPickerSource.GifSearch,\n    [SearchFilters.Audio]: ContentPickerSource.AudioSearch,\n    [SearchFilters.Videos]: ContentPickerSource.VideoSearch,\n    [SearchFilters.Web]: ContentPickerSource.WebBrowser,\n    [SearchFilters.AiImages]: ContentPickerSource.AiImageSearch,\n  }[searchFilter.value ?? defaultSearchMode.value]\n  if (isImageSearchMode.value) {\n    // only set altText if we are picking images.\n    emit('select-link', url, { altText: searchQuery.value, contentSource })\n  } else {\n    emit('select-link', url, { contentSource })\n  }\n\n  emit('close')\n}\n\n// CLIPBOARD\n\nconst syncClipboardText = async (): Promise<void> => {\n  try {\n    if (!isSafari && supportReadFromClipboardAPI) {\n      currentClipboardText.value = await getTextFromClipboard()\n      xClipboardButton.value =\n        clipboardEnabled.value && !!currentClipboardText.value && currentClipboardText.value.trim().length > 0\n    }\n  } catch (e) {\n    // do nothing\n  }\n}\n\n// SEARCHBAR\n\nconst searchBarPlaceholder = computed((): string => {\n  if (isLinkInputMode.value) {\n    return __('Paste or type link here')\n  }\n  if (isAiImageSearchMode.value) {\n    return __('Write what you want to draw')\n  }\n  if (props.canAcceptLinkInSearchBar) {\n    return __('Search web or paste URL')\n  }\n  return __('Search web')\n})\n\nconst xBackButton = computed((): boolean => {\n  return (\n    (xSearchScreen.value && !isOpenedFromSearch.value) || (xAiImagePreview.value && currentSearchModes.value.length > 0)\n  )\n})\n\nconst focusSearchBar = (): void => {\n  endLinkInputMode()\n  nextTick(() => {\n    if (!searchBarRef.value) return\n    searchBarRef.value.focusSearchBar()\n  })\n}\n\nconst contentPickerBodyRef = ref<HTMLElement>()\n\n// Clicking on a orange button will go to search menu with the appropriate filter\n// Clicking on clipboard will paste text and go to search menu\nconst imitateSearchBarClickWithFilter = (filter: SearchFilters): void => {\n  // Track when image, gif, video, audio, or web search is selected in the content picker\n  trackEvent('Content picker', `Selected ${filter}`)\n  endLinkInputMode()\n  if (!isLinkInputMode.value) {\n    openSearch()\n    pickSearchFilter({ filter: filter || searchFilter.value || defaultSearchMode.value })\n    if (!contentPickerBodyRef.value) return\n    const elementInChargeOfScrolling = getNearestScrollingElement(contentPickerBodyRef.value)\n    if (!elementInChargeOfScrolling) return\n    elementInChargeOfScrolling.scrollTo({ top: 0 })\n  }\n  shouldWiggleSearchBar.value = false\n  focusSearchBar()\n}\n\nconst pasteText = async (): Promise<void> => {\n  try {\n    setSearchQuery({ query: (await getTextFromClipboard()).slice(0, 140) })\n    imitateSearchBarClickWithFilter(searchFilter.value || defaultSearchMode.value)\n  } catch (e) {\n    // Reference: https://webkit.org/blog/10247/new-webkit-features-in-safari-13-1/, search for \"Async Clipboard API\"\n    // Safari requires navigator.clipboard calls to be called within user gesture event handlers instead of a permissions-based model for reading from the clipboard\n    // When getTextFromClipboard is called programatically like this, Safari will show a small \"Paste\" button on the UI to confirm if the user allows pasting\n    // If they tap/click outside the button, Safari treat it as permission denied and throws a NotAllowedError => we can ignore it\n    if (isSafari && e.name === 'NotAllowedError') {\n      return\n    }\n    // throw unknown errors again so they will go to Sentry\n    throw e\n  }\n}\n\nconst handleSearchBarSearch = (query): void => {\n  if (isLinkInputMode.value) {\n    pickSearchFilter({ filter: SearchFilters.Web })\n  } else if (isAiImageSearchMode.value) {\n    pickSearchFilter({ filter: SearchFilters.AiImages })\n  }\n  search({ query })\n}\n\n// When user click on the searchbar, we open search menu and pre-pick the previous filter\n// or \"None\" filter to not pre-pick any.\nconst handleSearchBarClick = (): void => {\n  if (!isLinkInputMode.value && !isAiImageSearchMode.value) {\n    openSearch()\n    if (!searchFilter.value) {\n      pickSearchFilter({ filter: searchFilter.value || defaultSearchMode.value })\n    }\n  }\n  focusSearchBar()\n}\n\nconst handleSearchBarFocus = (): void => {\n  syncClipboardText()\n  searchFocused.value = true\n}\n\nconst handleSearchBarBlur = (): void => {\n  searchFocused.value = false\n}\n\nconst triggerLinkInput = (): void => {\n  startLinkInputMode()\n  focusSearchBar()\n  // wiggle the search bar again every time link input is triggered\n  shouldWiggleSearchBar.value = false\n  nextTick(() => setTimeout(() => (shouldWiggleSearchBar.value = true)))\n}\n\nconst triggerAiImageSearch = (): void => {\n  trackEvent('Content picker', 'Selected AI image search')\n  openAiImagePreview()\n  focusSearchBar()\n}\n\nconst goBack = (): void => {\n  closeSearch()\n  closeAiImageSearchMode()\n  setSearchQuery({ query: '' })\n  isExpanded.value = false\n}\n\nconst handleSearchBarError = (error: NoSearchFilterError): void => {\n  if (error && error === 'NO_SEARCH_FILTER') {\n    searchModesRef.value?.shake()\n  }\n}\n\n// SEARCH QUERYING\n\nconst clearSearch = (): void => {\n  if (isAiImageSearchMode.value) {\n    reopenAiImagePreview()\n  }\n  setSearchQuery({ query: '' })\n}\n\nconst filterSelected = (filter: string): void => {\n  trackEvent('Content Picker', `Selected ${filter}`)\n  openSearch()\n  pickSearchFilter({ filter: filter as SearchFilters })\n  if (!searchQuery.value || searchQuery.value.trim() === '') {\n    focusSearchBar()\n    return\n  }\n\n  if (!searchFilter.value) {\n    return\n  }\n\n  // Search immediately after clicking the filter\n  // if the results are not populated yet.\n  if (\n    !currentSearchResultsMap.value ||\n    !currentSearchResultsMap.value[searchFilter.value] ||\n    currentSearchResultsMap.value[searchFilter.value].length === 0\n  ) {\n    search()\n  }\n}\n\nconst suggestionSelected = (suggestion: string): void => {\n  setSearchQuery({ query: suggestion })\n  search()\n}\n\n// SEARCH RESULTS\n\nonMounted((): void => {\n  syncSearchSuggestionsWithStorage()\n  syncClipboardText()\n  document.addEventListener('visibilitychange', () => {\n    syncClipboardText()\n  })\n})\n\nwatch(\n  xSearchScreen,\n  (newVal: boolean) => {\n    if (newVal && !isAiImageSearchMode.value) {\n      if (isOpenedFromSearch.value) {\n        setTimeout(() => {\n          // Because we have an input field that needs focus, we delay the animation\n          // until after the keyboard is popped up\n          isExpanded.value = true\n        }, 250)\n      } else {\n        isExpanded.value = true\n      }\n    } else {\n      isExpanded.value = false\n    }\n  },\n  { immediate: true },\n)\n\n/**\n *  If search query is being typed/change, likely when clicking paste button\n *  we make sure search menu is always shown\n */\nwatch(searchQuery, (val) => {\n  if (!xSearchScreen.value && val && val.trim() !== '') {\n    imitateSearchBarClickWithFilter(searchFilter.value || defaultSearchMode.value)\n  }\n})\n</script>\n\n<template>\n  <OzScreenSizeAwareCenterModal\n    :dir=\"dir()\"\n    :is-phone=\"isSmallerThanTabletPortrait\"\n    :window-height=\"windowHeight\"\n    :class=\"['select-none', 'deep-font-sans', isDarkMode && 'dark-mode']\"\n    :width-class=\"isAiImageSearchMode ? 'w-135' : 'w-180'\"\n    :shadow-class=\"'shadow-elevation-4'\"\n    :disable-drag=\"xSearchScreen\"\n    :full-size=\"isExpanded || shouldForceFullSize\"\n    :preferred-tray-start-height=\"\n      xClipboardButton ? preferredTrayStartHeight + CLIPBOARD_ITEM_HEIGHT : preferredTrayStartHeight\n    \"\n    :min-height=\"minHeight\"\n    :x-scrim=\"true\"\n    data-testid=\"contentPickerSourceMenu\"\n    @scrim-click=\"handleScrimClick\"\n    @scrim-esc=\"closeMenu\"\n    @dragstart=\"handleDragStart\"\n    @dragend=\"handleDragEnd\"\n  >\n    <template #header>\n      <ContentPickerSearchBar\n        v-if=\"xSearchBar || isAiImageSearchMode\"\n        ref=\"searchBarRef\"\n        :x-back-button=\"xBackButton\"\n        :x-clipboard-button=\"xClipboardButton\"\n        :should-wiggle=\"shouldWiggleSearchBar\"\n        :should-force-focus-on-mount=\"isLinkInputMode\"\n        :submit-button-data-id=\"isAiImageSearchMode ? 'ai-image-search-trigger' : ''\"\n        :search-bar-placeholder=\"searchBarPlaceholder\"\n        :search-query=\"searchQuery\"\n        :can-accept-link=\"canAcceptLinkInSearchBar\"\n        @search=\"handleSearchBarSearch\"\n        @focus=\"handleSearchBarFocus\"\n        @blur=\"handleSearchBarBlur\"\n        @copy=\"syncClipboardText\"\n        @click=\"handleSearchBarClick\"\n        @clear-search=\"clearSearch\"\n        @select=\"selectSearchResult\"\n        @back=\"goBack\"\n        @paste-click=\"pasteText\"\n        @close=\"closeMenu\"\n        @error=\"handleSearchBarError\"\n        @input=\"(query) => setSearchQuery({ query })\"\n      />\n      <div v-else class=\"p-4\">\n        <OzCloseButton @click=\"closeMenu\" />\n      </div>\n    </template>\n    <template #body>\n      <div ref=\"contentPickerBodyRef\" :class=\"['flex flex-col grow', !xAiImageResults && 'overflow-auto']\">\n        <!-- AI image search -->\n        <AiImageSearchSample\n          v-if=\"xAiImagePreview\"\n          @run-sample-search=\"setSearchQuery({ query: $event.searchQuery })\"\n        />\n        <ContentPickerSearchResults\n          v-else-if=\"xAiImageResults && searchFilter\"\n          :is-online=\"isOnline\"\n          :search-query=\"searchQuery\"\n          :search-filter=\"searchFilter\"\n          :results=\"currentSearchResultsForFilter\"\n          :is-search-query-in-progress=\"isSearchQueryInProgress\"\n          :is-search-more-query-in-progress=\"isSearchMoreQueryInProgress\"\n          :is-ai-image-search-mode=\"isAiImageSearchMode\"\n          :can-search-more=\"!!currentSearchMoreUrlForFilter\"\n          :has-error=\"isError\"\n          @select=\"selectSearchResult\"\n          @search-more=\"searchMore\"\n          @clear-search-error=\"clearSearchError\"\n        />\n\n        <!-- Master list of all content sources -->\n        <ContentPickerSourceMenuList\n          v-else-if=\"!xSearchScreen\"\n          :menu-list=\"menuList\"\n          :x-clipboard-button=\"xClipboardButton && xSearchBar\"\n          :clipboard-text=\"currentClipboardText\"\n          :is-disabled-on-drag=\"menuListDisabled\"\n          :is-phone-screen=\"isSmallerThanTabletPortrait\"\n          class=\"stroller\"\n          @close=\"closeMenu\"\n          @select=\"selectSource\"\n          @select-link=\"$emit('select-link', $event, { contentSource: ContentPickerSource.LinkInput })\"\n          @focus-search-bar=\"imitateSearchBarClickWithFilter\"\n          @paste-text=\"pasteText\"\n          @trigger-link-input=\"triggerLinkInput\"\n          @trigger-ai-image-search=\"triggerAiImageSearch\"\n        />\n        <!-- Built-in search -->\n        <template v-else>\n          <ContentPickerSearchModes\n            v-if=\"currentSearchModes.length > 1 && searchFilter\"\n            ref=\"searchModesRef\"\n            :search-modes=\"currentSearchModes\"\n            :current-search-filter=\"searchFilter\"\n            @filter-selected=\"filterSelected\"\n          />\n          <ContentPickerSearchSuggestions\n            v-if=\"xSearchSuggestions\"\n            :class=\"['pt-4']\"\n            :search-suggestions=\"props.searchSuggestions || searchSuggestions\"\n            @suggestion-selected=\"suggestionSelected\"\n          />\n          <div v-else :class=\"['pt-2', 'overflow-auto scrollbar-regular dark:scrollbar-regular-dark']\">\n            <ContentPickerSearchResults\n              :is-online=\"isOnline\"\n              :search-query=\"searchQuery\"\n              :search-filter=\"searchFilter\"\n              :results=\"currentSearchResultsForFilter\"\n              :is-search-query-in-progress=\"isSearchQueryInProgress\"\n              :is-search-more-query-in-progress=\"isSearchMoreQueryInProgress\"\n              :is-ai-image-search-mode=\"isAiImageSearchMode\"\n              :can-search-more=\"!!currentSearchMoreUrlForFilter\"\n              :has-error=\"isError\"\n              @select=\"selectSearchResult\"\n              @search-more=\"searchMore\"\n              @clear-search-error=\"clearSearchError\"\n            />\n          </div>\n        </template>\n      </div>\n    </template>\n  </OzScreenSizeAwareCenterModal>\n</template>\n\n<style lang=\"postcss\">\n.deep-font-sans {\n  * {\n    @apply font-sans;\n    @apply break-words;\n  }\n}\n</style>\n"],"names":["setSearchQuery","search","pickSearchFilter","useContentPickerStore","searchForSample","query","getTranslatedAiSearchSamplePrompt","filter","SearchFilters","AiImages","emit","searchQuery","MAX_SEARCH_LENGTH","isPhone","storeToRefs","useWindowSizeStore","searchBar","ref","isSearchBarFocused","shouldShowClipboardButton","computed","props","xClipboardButton","value","device","safari","shouldShowSubmitButton","isShowingRightButton","handleCopyText","handleSearchBarFocus","onInput","event","target","select","data","unfocusForTouchDevices","touchable","blur","processQuery","canAcceptLink","isUrl","extractedUrl","extractUrl","handleSearchBarFocusOut","iphone","resetSearch","focus","focusSearchBar","handleEnter","preventDefault","onMounted","shouldForceFocusOnMount","expose","displayedSearchModes","searchModes","mode","visible","isShook","shake","setTimeout","FallbackAudio","LOADING_IMAGES_BG_COLOR","CROP_ASPECT_RATIO","DEFAULT_THUMBNAIL_HEIGHT","DEFAULT_THUMBNAIL_WIDTH","container","imageWrappers","imageWidth","handleResultsUpdate","nextTick","clientWidth","url","audioDescription","result","release_date","showName","show_name","Date","toLocaleDateString","shortenedDescription","description","split","slice","join","length","providerName","provider_name","getHostname","isUsingFallbackThumbnail","thumbnail_url","watch","results","erroredThumbnailUrls","Set","validResults","has","isShowingAiImages","selectWithBeacon","beaconLink","fetchJson","cors","handleImageError","erroredUrl","hoveringOn","onSelect","onHover","index","onStopHover","_sfc_main","components","ProcessedImage","alt","type","String","default","provider","required","href","attributionMap","src","width","height","EMOJIS","code","category","shortname","name","keywords","emojiUrl","isMobile","mobile","isDarkMode","useDarkModeStore","resultBody","hasNoResults","intersectionObserver","processedIconUrl","icon","processedUrl","preset","isAiImageSearchMode","trackEvent","searchMoreTrigger","document","querySelector","observeElementIntersection","isSearchQueryInProgress","searchFilter","xResults","scrollTop","isOnline","onUnmounted","unobserve","iconColorClasses","color","displayedSourceMenuLists","visibleItemLists","menuList","map","list","item","displayedLists","i","bucket","push","reduce","count","flat","lists","Infinity","triggerNativeInputWithCamera","id","input","getElementById","setAttribute","click","removeAttribute","hiddenInputId","ContentPickerSource","FileBrowser","actionType","actionPayload","isSafari","isTouchable","CLIPBOARD_ITEM_HEIGHT","DEFAULT_SEARCH_MODES_TABS","Images","key","text","__","Gif","Videos","Audio","Web","isSmallerThanTabletPortrait","windowHeight","contentPickerStore","xSearchScreen","isOpenedFromSearch","xSearchSuggestions","isLinkInputMode","xAiImageResults","xAiImagePreview","currentSearchResultsMap","isSearchMoreQueryInProgress","isError","currentSearchResultsForFilter","currentSearchMoreUrlForFilter","searchSuggestions","isImageSearchMode","syncSearchSuggestionsWithStorage","openSearch","closeSearch","startLinkInputMode","endLinkInputMode","openAiImagePreview","closeAiImageSearchMode","reopenAiImagePreview","clearSearchError","searchMore","searchBarRef","searchModesRef","currentClipboardText","searchFocused","isExpanded","shouldWiggleSearchBar","clipboardEnabled","supportReadFromClipboardAPI","androidApp","currentSearchModes","buttons","flatMenulist","flatMap","innerMenuList","Object","keys","includes","defaultSearchMode","searchFilters","button","closeMenu","handleScrimClick","menuListDisabled","handleDragStart","handleDragEnd","selectSource","source","selectSearchResult","contentSource","ImageSearch","GifSearch","AudioSearch","VideoSearch","WebBrowser","AiImageSearch","altText","syncClipboardText","getTextFromClipboard","trim","searchBarPlaceholder","canAcceptLinkInSearchBar","xBackButton","contentPickerBodyRef","imitateSearchBarClickWithFilter","elementInChargeOfScrolling","getNearestScrollingElement","scrollTo","top","pasteText","e","handleSearchBarSearch","handleSearchBarClick","handleSearchBarBlur","triggerLinkInput","triggerAiImageSearch","goBack","handleSearchBarError","error","clearSearch","filterSelected","suggestionSelected","suggestion","addEventListener","newVal","immediate","val"],"mappings":"69DAeA,KAAM,CAAEA,eAAAA,EAAgBC,OAAAA,EAAQC,iBAAAA,GAAqBC,GAAsB,sFAEnDC,IAAY,CAClCJ,EAAe,CAAEK,MAAOC,GAAkC,CAAE,CAAC,EAC7DJ,EAAiB,CAAEK,OAAQC,EAAcC,QAAS,CAAC,EAC5CR,IACPS,EAAK,oBAAqB,CAAEC,YAAaL,GAAkC,CAAE,CAAC,w9CC0B1EM,EAAoB,IAEpB,CAAEC,QAAAA,CAAQ,EAAIC,EAAYC,IAAoB,EAE9CC,EAAYC,EAA6B,IAAI,EAE7CC,EAAqBD,EAAa,EAAK,EAEvCE,EAA4BC,EAChC,IAAMC,EAAMC,kBAAoB,CAACT,EAAQU,OAAS,CAACC,EAAOC,QAAU,CAACJ,EAAMV,WAC7E,EACMe,EAAyBN,EAAS,IACtCF,EAAmBK,MAAQ,CAACJ,EAA0BI,MAAQF,EAAMV,WACtE,EACMgB,EAAuBP,EAAS,IAAMD,EAA0BI,OAASG,EAAuBH,KAAK,EAErGK,EAAiBA,IAAY,CACjClB,EAAK,MAAM,GAGPmB,EAAuBA,IAAY,CACvCX,EAAmBK,MAAQ,GAC3Bb,EAAK,OAAO,GAGRoB,EAAWC,GAAgB,CAC1BrB,EAAA,QAASqB,EAAMC,OAAOT,KAAK,EAChCb,EAAK,oBAAoB,GAGrBuB,EAAUC,GAAuB,CACrCxB,EAAK,SAAUwB,CAAI,GAGfC,EAAyBA,IAAM,CAC/BX,EAAOY,WAAapB,EAAUO,OAEhCP,EAAUO,MAAMc,QAOdC,EAAeA,IAAY,CAC/B,MAAMjC,EAAQgB,EAAMV,YAIpB,GAHAD,EAAK,oBAAoB,EACFyB,IAEnB,CAAC9B,EAAO,CACVK,EAAK,cAAc,EACnB,MACF,CACA,GAAIW,EAAMkB,cAAe,CACnB,GAAAC,GAAMnC,CAAK,EAAG,CAChB4B,EAAO5B,CAAK,EACZ,MACF,CACA,GAAImC,GAAM,WAAWnC,CAAK,EAAE,EAAG,CACtB4B,EAAA,WAAW5B,CAAK,EAAE,EACzB,MACF,CACM,MAAAoC,EAAeC,GAAWrC,CAAK,EACrC,GAAIoC,EAAc,CAChBR,EAAOQ,CAAY,EACnB,MACF,CACF,CAEA/B,EAAK,SAAUL,CAAK,GAGhBsC,EAA0BA,IAAY,CAC1CzB,EAAmBK,MAAQ,GACvBC,EAAOoB,QACIN,IAEf5B,EAAK,MAAM,GAGPmC,EAAcA,IAAY,OAC9BnC,EAAK,cAAc,GACnBM,EAAAA,EAAUO,QAAVP,MAAAA,EAAiB8B,SAGbC,EAAiBA,IAAY,QACjC/B,EAAAA,EAAUO,QAAVP,MAAAA,EAAiB8B,SAGbE,EAAejB,GAAgB,CAC9BV,EAAMV,aACToB,EAAMkB,eAAe,GAIzBC,OAAAA,EAAU,IAAY,EACf,CAAC1B,EAAOY,WAAaf,EAAM8B,0BAA4BnC,EAAUO,OAEpEP,EAAUO,MAAMuB,OAEpB,CAAC,EAEYM,EAAA,CACXL,eAAAA,CACF,CAAC,wkHCtIKM,EAAuBjC,EAAS,IAAMC,EAAMiC,YAAY/C,OAAQgD,GAASA,EAAKC,OAAO,CAAC,EAEtFC,EAAUxC,EAAa,EAAK,EAE5ByC,EAAQA,IAAY,CACxBD,EAAQlC,MAAQ,GAChBoC,WAAW,IAAM,CACfF,EAAQlC,MAAQ,IACf,CAAC,GAGO6B,OAAAA,EAAA,CACXM,MAAAA,CACF,CAAC,mwBC9BcE,GAAA,qLCiBTC,EAA0B,CAAC,MAAO,OAAQ,QAAS,SAAU,SAAU,OAAQ,OAAQ,QAAQ,EAC/FC,EAAoB,IACpBC,EAA2B,IAC3BC,EAA0BD,EAA2BD,EAErDG,EAAYhD,IACZiD,EAAgBjD,IAEhBkD,EAAalD,EAAI,CAAC,EAElBmD,EAAsB,SAA2B,CACrD,MAAMC,EAAS,EACJF,EAAA5C,MAAQ2C,EAAc3C,OAAS2C,EAAc3C,MAAM,CAAC,EAAI2C,EAAc3C,MAAM,CAAC,EAAE+C,YAAc,GAGpGrC,EAAUsC,GAAsB,CACpC7D,EAAK,SAAU6D,CAAG,GAGdC,EAAoBC,GAAsC,CAC9D,GAAIA,EAAOC,aAAc,CAEvB,MAAMC,EAAWF,EAAOG,UACxB,GAAID,EACF,OAAOA,EAAW,MAAQ,IAAIE,KAAKJ,EAAOC,YAAY,EAAEI,qBAEtD,IAAAC,EAAuBN,EAAOO,YAAYC,MAAM,GAAG,EAAEC,MAAM,EAAG,EAAE,EAAEC,KAAK,GAAG,EAC9E,OAAIJ,EAAqBK,OAASX,EAAOO,YAAYI,SACnDL,EAAuBA,EAAuB,OAEzC,IAAIF,KAAKJ,EAAOC,YAAY,EAAEI,qBAAuB,MAAQC,CACtE,CACA,OAAON,EAAOO,aAGVK,EAAgBZ,GAChBA,EAAOa,cAAsBb,EAAOa,cACjCC,GAAYd,EAAOF,GAAG,EAGzBiB,EAA4Bf,GACzB,CAACA,EAAOgB,eAAiBhB,EAAOgB,gBAAkB,GAGrDC,OAAAA,EAAA,IAAMrE,EAAMsE,QAASvB,CAAmB,EAE9ClB,EAAU,IAAY,OACpBiB,EAAW5C,SAAS0C,EAAAA,EAAU1C,QAAV0C,YAAAA,EAAiBK,cAAe,GAAK,EAAI,GAGzCF,GACtB,CAAC,g3FCnDKP,EAA0B,CAAC,MAAO,OAAQ,QAAS,SAAU,SAAU,OAAQ,OAAQ,QAAQ,EAE/FI,EAAYhD,IACZiD,EAAgBjD,IAEhBkD,EAAalD,EAAI,CAAC,EAElB2E,EAAuB3E,EAAQ,IAAA4E,GAAK,EAEpCC,EAAe1E,EAAS,IAC5BC,EAAMsE,QAAQpF,OAAQkE,GAAW,CAACmB,EAAqBrE,MAAMwE,IAAItB,EAAOgB,aAAa,CAAC,CACxF,EACMO,EAAoB5E,EAAkB,IAAMC,EAAMd,SAAWC,EAAcC,QAAQ,EAEnF2D,EAAsB,SAA2B,CACrD,MAAMC,EAAS,EACJF,EAAA5C,MAAQ2C,EAAc3C,OAAS2C,EAAc3C,MAAM,CAAC,EAAI2C,EAAc3C,MAAM,CAAC,EAAE+C,YAAc,GAGpG2B,EAAmBA,CAAC1B,EAAa2B,IAA6B,CAC9DA,GACFC,GAAUD,EAAY,CAAEE,KAAM,EAAK,CAAC,EAEtC1F,EAAK,SAAU6D,CAAG,GAGdc,EAAgBZ,GAChBA,EAAOa,cAAsBb,EAAOa,cACjCC,GAAYd,EAAOF,GAAG,EAGzB8B,EAAoBC,GAAe,CAClBV,EAAArE,UAAYsE,IAAI,CAAC,GAAGD,EAAqBrE,MAAO+E,CAAU,CAAC,GAG5EZ,OAAAA,EAAA,IAAMrE,EAAMsE,QAASvB,CAAmB,EAE9ClB,EAAU,IAAY,OACpBiB,EAAW5C,SAAS0C,EAAAA,EAAU1C,QAAV0C,YAAAA,EAAiBK,cAAe,GAAK,EAAI,GAGzCF,GACtB,CAAC,21GC/CK,MAAAmC,EAAatF,EAAmB,IAAI,EAE1C,SAASuF,EAASjC,EAAa,CAC7B7D,EAAK,SAAU6D,CAAG,CACpB,CAEA,SAASkC,EAAQC,EAAe,CACrBrC,EAAA,IAAOkC,EAAWhF,MAAQmF,CAAM,CAC3C,CAEA,SAASC,GAAc,CACrBJ,EAAWhF,MAAQ,IACrB,i2DCdA,MAAAqF,GAAA,CACAC,WAAA,CAAAC,eAAAA,EAAA,EACAzF,MAAA,CACA0F,IAAA,CACAC,KAAAC,OACAC,QAAA,EACA,EACAC,SAAA,CACAH,KAAAC,OACAG,SAAA,EACA,CACA,EACAhG,SAAA,CACAiG,MAAA,CACA,OAAAC,EAAA,KAAAH,QAAA,EAAAE,IACA,EACAE,KAAA,CACA,OAAAD,EAAA,KAAAH,QAAA,EAAAI,GACA,EACAC,OAAA,CACA,OAAAF,EAAA,KAAAH,QAAA,EAAAK,KACA,EACAC,QAAA,CACA,OAAAH,EAAA,KAAAH,QAAA,EAAAM,MACA,CACA,CACA,koBCWMC,EAAS,CACb,QAAS,CACPC,KAAM,QACNC,SAAU,SACVC,UAAW,aACXC,KAAM,gCACNC,SAAU,CAAC,OAAQ,QAAS,QAAS,MAAM,EAC3CxD,IAAKyD,GAAS,MAAO,OAAO,CAC9B,EACA,QAAS,CACPL,KAAM,QACNC,SAAU,SACVC,UAAW,YACXC,KAAM,eACNC,SAAU,CAAC,QAAS,OAAQ,SAAS,EACrCxD,IAAKyD,GAAS,MAAO,OAAO,CAC9B,EACA,QAAS,CACPL,KAAM,QACNC,SAAU,SACVC,UAAW,aACXC,KAAM,gBACNC,SAAU,CAAC,OAAQ,QAAS,KAAK,EACjCxD,IAAKyD,GAAS,MAAO,OAAO,CAC9B,GAGIC,EAAWzG,EAAO0G,OAClB,CAAEC,WAAAA,CAAW,EAAIrH,EAAYsH,IAAkB,EAE/CC,EAAapH,EAA2B,IAAI,EAE5CqH,EAAerH,EAAa,EAAK,EACjCsH,EAAuBtH,EAAiC,IAAI,EAE5DuH,EAAoBC,GACjBC,GAAaD,EAAKlE,IAAK,CAAEiD,MAAO,GAAIC,OAAQ,GAAIkB,OAAQ,MAAO,CAAC,EAGnE1G,EAAUC,GAAuB,CACjCb,EAAMuH,qBACRC,EAAW,kBAAmB,+BAA+B,EAE/DnI,EAAK,SAAUwB,CAAI,GAGrBwD,OAAAA,EACE,IAAMrE,EAAMsE,QACZ,IAAY,CACVtB,EAAS,IAAM,CAEP,MAAAyE,EAAoBC,SAASC,cAAc,sBAAsB,EACnEF,IACmBP,EAAAhH,MAAQ0H,GAA2BH,EAAmB,IAAM,CAC/EpI,EAAK,aAAa,CACpB,CAAC,EAEL,CAAC,CACH,CACF,EAEMgF,EAAA,CAAC,IAAMrE,EAAM6H,wBAAyB,IAAM7H,EAAM8H,YAAY,EAAG,IAAY,CACjF,IAAIC,EAAW,GACX/H,EAAMV,cACRyI,EAAW/H,EAAMsE,SAAWtE,EAAMsE,QAAQP,OAAS,GAErDkD,EAAa/G,MAAQ,CAAC6H,CACxB,CAAC,EAED1D,EACE,IAAMrE,EAAM8H,aACZ,IAAY,CACLd,EAAW9G,QAChB8G,EAAW9G,MAAM8H,UAAY,EAC/B,CACF,EAEA3D,EACE,IAAMrE,EAAMiI,SACZ,IAAY,CACV5I,EAAK,oBAAoB,CAC3B,CACF,EAEA6I,GAAY,IAAM,CACV,MAAAT,EAAoBC,SAASC,cAAc,sBAAsB,EACnET,EAAqBhH,QAAU,MAAQuH,GACpBP,EAAAhH,MAAMiI,UAAUV,CAAiB,CAE1D,CAAC,wjMCtGKW,EAAmBrI,EAAS,IAAM,CACtC,OAAQC,EAAMqI,MAAO,CACnB,IAAK,QACH,MAAO,CAAC,WAAW,EACrB,IAAK,SACH,MAAO,CAAC,gBAAgB,EAC1B,IAAK,OACH,MAAO,CAAC,kBAAkB,EAC5B,IAAK,OACH,MAAO,CAAC,cAAc,EACxB,IAAK,SACH,MAAO,CAAC,YAAY,EACtB,IAAK,OACH,MAAO,CAAC,WAAW,EACrB,QACE,MAAO,EACX,CACF,CAAC,m2GCnBKC,EAA2BvI,EAAwD,IAAM,CAC7F,MAAMwI,EAAmBvI,EAAMwI,SAC5BC,IAAKC,GAASA,EAAKxJ,OAAQyJ,GAASA,EAAKxG,OAAO,CAAC,EACjDjD,OAAQwJ,GAASA,EAAK3E,OAAS,CAAC,EAC7B6E,EAAgE,CAAA,EAGtE,IAAIC,EAAI,EACJC,EAA4C,CAAA,EACzC,KAAAD,EAAIN,EAAiBxE,QAC1B+E,EAAOC,KAAK,GAAGR,EAAiBM,CAAC,CAAC,EAC9BC,EAAO/E,QAAU,IACnB6E,EAAeG,KAAKD,CAAM,EAC1BA,EAAS,CAAA,GAEXD,IAEF,OAAIC,EAAO/E,OAAS,GAAG6E,EAAeG,KAAKD,CAAM,EAG9BF,EAAeI,OAAO,CAACC,EAAOP,IAASO,EAAQP,EAAK3E,OAAQ,CAAC,GAC3D,EAAI,CAAC6E,EAAeM,KAAA,CAAM,EAAIN,CACrD,CAAC,EAEKvE,EAAAiE,EAA2Ba,GAAU,CAErCA,EAAMD,KAAKE,GAAQ,EAAErF,SAAW,GAClC1E,EAAK,OAAO,CAEhB,CAAC,EAGK,MAAAgK,EAAgCC,GAAqB,CACnD,MAAAC,EAAQ7B,SAAS8B,eAAeF,CAAE,EACpCC,IACIA,EAAAE,aAAa,UAAW,aAAa,EAC3CF,EAAMG,MAAM,EACZH,EAAMI,gBAAgB,SAAS,qGAIlBhB,GAA0C,OACrDA,EAAKiB,gBAELzJ,EAAO0G,QACP8B,EAAKhD,OAASkE,EAAoBC,YAElCT,EAA6BV,EAAKiB,aAAa,GAE/ClC,EAAAA,SAAS8B,eAAeb,EAAKiB,aAAa,IAA1ClC,MAAAA,EAA6CgC,SAI5CrK,EAAAsJ,EAAKoB,WAAmBpB,EAAKqB,aAAoB,g6EC3BlDC,EAAW9J,EAAOC,OAClB8J,EAAc/J,EAAOY,UAErBoJ,EAAwB,GACxBC,EAA4B,CAChC,CAACjL,EAAckL,MAAM,EAAG,CAAEC,IAAKnL,EAAckL,OAAQzK,IAAK,eAAgB2K,KAAMC,EAAG,QAAQ,CAAE,EAC7F,CAACrL,EAAcsL,GAAG,EAAG,CAAEH,IAAKnL,EAAcsL,IAAK7K,IAAK,YAAa2K,KAAMC,EAAG,KAAK,CAAE,EACjF,CAACrL,EAAcuL,MAAM,EAAG,CAAEJ,IAAKnL,EAAcuL,OAAQ9K,IAAK,gBAAiB2K,KAAMC,EAAG,SAAS,CAAE,EAC/F,CAACrL,EAAcwL,KAAK,EAAG,CAAEL,IAAKnL,EAAcwL,MAAO/K,IAAK,gBAAiB2K,KAAMC,EAAG,SAAS,CAAE,EAC7F,CAACrL,EAAcyL,GAAG,EAAG,CAAEN,IAAKnL,EAAcyL,IAAKhL,IAAK,YAAa2K,KAAMC,EAAG,KAAK,CAAE,GAG7E,CAAEK,4BAAAA,EAA6BC,aAAAA,CAAa,EAAIrL,EAAYC,IAAoB,EAChF,CAAEoH,WAAAA,CAAW,EAAIrH,EAAYsH,IAAkB,EAE/CgE,EAAqBjM,KACrB,CACJgJ,aAAAA,EACAkD,cAAAA,EACAC,mBAAAA,EACAC,mBAAAA,EACAC,gBAAAA,EACA5D,oBAAAA,EACA6D,gBAAAA,EACAC,gBAAAA,EACA/L,YAAAA,EACAgM,wBAAAA,EACAzD,wBAAAA,EACA0D,4BAAAA,EACAC,QAAAA,GACAC,8BAAAA,GACAC,8BAAAA,GACAC,kBAAAA,GACAC,kBAAAA,EACF,EAAInM,EAAYsL,CAAkB,EAC5B,CACJc,iCAAAA,GACAhN,iBAAAA,EACAiN,WAAAA,EACAC,YAAAA,GACApN,eAAAA,EACAqN,mBAAAA,GACAC,iBAAAA,EACAC,mBAAAA,GACAC,uBAAAA,GACAC,qBAAAA,GACAxN,OAAAA,EACAyN,iBAAAA,GACAC,WAAAA,EACE,EAAAvB,EAEEwB,EAAe3M,EAAwD,IAAI,EAC3E4M,GAAiB5M,EAA0D,IAAI,EAE/E6M,EAAuB7M,EAAY,EAAE,EACrC8M,EAAgB9M,EAAa,EAAK,EAClC+M,EAAa/M,EAAa,EAAK,EAC/BgN,EAAwBhN,EAAa,EAAK,EAE1CiN,EAAmB9M,EAAkB,IAEvC+M,IACA,CAAC3M,EAAOC,QACR,CAACD,EAAO4M,UAEX,EAEK9M,GAAmBL,EAAaiN,EAAiB3M,KAAK,EAItD8M,GAAqBjN,EAAS,IAAiC,CACnE,GAAIC,EAAMiC,YACR,OAAOjC,EAAMiC,YAGf,MAAMgL,EAAqC,CAAA,EACrCC,EAAkDlN,EAAMwI,SAAS2E,QAASC,GAAkBA,CAAa,EAE/G,UAAWzE,KAAQuE,EACbG,OAAOC,KAAKlD,CAAyB,EAAEmD,SAAS5E,EAAKhD,IAAI,GAC3DsH,EAAQlE,KAAKqB,EAA0BzB,EAAKhD,IAAI,CAAC,EAI9C,OAAAsH,CACT,CAAC,EACKO,EAAoBzN,EAAS,IAAqB,CACtD,GAAIC,EAAMwN,kBACR,OAAOxN,EAAMwN,kBAGf,MAAMC,EAAgBT,GAAmB9M,MAAMuI,IAAKiF,GAAWA,EAAOpD,GAAG,EAClE,OAAAmD,EAAcF,SAASpO,EAAcyL,GAAG,EAAIzL,EAAcyL,IAAM6C,EAAc,CAAC,CACxF,CAAC,EAIKE,GAAYA,IAAY,CAC5BtO,EAAK,OAAO,GAGRuO,GAAmBA,IAAY,CAE/BlB,EAAcxM,OAASgK,GACjByD,MAGNE,GAAmBjO,EAAa,EAAK,EAErCkO,GAAkBA,IAAY,CAClCD,GAAiB3N,MAAQ,IAGrB6N,GAAgBA,IAAY,CAChCF,GAAiB3N,MAAQ,IAKrB8N,GAAgBC,GAAsC,CAC/CzG,EAAA,iBAAkB,YAAYyG,CAAM,EAAE,EAChChC,IACjBW,EAAsB1M,MAAQ,GAC9Bb,EAAK,SAAU4O,CAAM,GAGjBC,GAAsBhL,GAAsB,CAChDsE,EAAW,iBAAkB,wBAAwB,EAErD,MAAM2G,EAAgB,CACpB,CAAChP,EAAckL,MAAM,EAAGR,EAAoBuE,YAC5C,CAACjP,EAAcsL,GAAG,EAAGZ,EAAoBwE,UACzC,CAAClP,EAAcwL,KAAK,EAAGd,EAAoByE,YAC3C,CAACnP,EAAcuL,MAAM,EAAGb,EAAoB0E,YAC5C,CAACpP,EAAcyL,GAAG,EAAGf,EAAoB2E,WACzC,CAACrP,EAAcC,QAAQ,EAAGyK,EAAoB4E,aAC9C,EAAA3G,EAAa5H,OAASsN,EAAkBtN,KAAK,EAC3C0L,GAAkB1L,MAEpBb,EAAK,cAAe6D,EAAK,CAAEwL,QAASpP,EAAYY,MAAOiO,cAAAA,CAAc,CAAC,EAEtE9O,EAAK,cAAe6D,EAAK,CAAEiL,cAAAA,CAAc,CAAC,EAG5C9O,EAAK,OAAO,GAKRsP,EAAoB,SAA2B,CAC/C,GAAA,CACE,CAAC1E,GAAY6C,KACML,EAAAvM,MAAQ,MAAM0O,KAClB3O,GAAAC,MACf2M,EAAiB3M,OAAS,CAAC,CAACuM,EAAqBvM,OAASuM,EAAqBvM,MAAM2O,OAAO9K,OAAS,EAE3G,MAAY,CAEZ,GAKI+K,GAAuB/O,EAAS,IAChCoL,EAAgBjL,MACXsK,EAAG,yBAAyB,EAEjCjD,EAAoBrH,MACfsK,EAAG,6BAA6B,EAErCxK,EAAM+O,yBACDvE,EAAG,yBAAyB,EAE9BA,EAAG,YAAY,CACvB,EAEKwE,GAAcjP,EAAS,IAExBiL,EAAc9K,OAAS,CAAC+K,EAAmB/K,OAAWmL,EAAgBnL,OAAS8M,GAAmB9M,MAAM6D,OAAS,CAErH,EAEKrC,EAAiBA,IAAY,CAChBuK,IACjBjJ,EAAS,IAAM,CACRuJ,EAAarM,OAClBqM,EAAarM,MAAMwB,gBACrB,CAAC,GAGGuN,GAAuBrP,IAIvBsP,GAAmChQ,GAAgC,CAInE,GAFOsI,EAAA,iBAAkB,YAAYtI,CAAM,EAAE,EAChC+M,IACb,CAACd,EAAgBjL,MAAO,CAG1B,GAFW4L,IACXjN,EAAiB,CAAEK,OAAQA,GAAU4I,EAAa5H,OAASsN,EAAkBtN,KAAM,CAAC,EAChF,CAAC+O,GAAqB/O,MAAO,OAC3B,MAAAiP,EAA6BC,GAA2BH,GAAqB/O,KAAK,EACxF,GAAI,CAACiP,EAA4B,OACjCA,EAA2BE,SAAS,CAAEC,IAAK,CAAE,CAAC,CAChD,CACA1C,EAAsB1M,MAAQ,GACfwB,KAGX6N,GAAY,SAA2B,CACvC,GAAA,CACa5Q,EAAA,CAAEK,OAAQ,MAAM4P,GAAA,GAAwB/K,MAAM,EAAG,GAAG,CAAE,CAAC,EACtCqL,GAAApH,EAAa5H,OAASsN,EAAkBtN,KAAK,QACtEsP,EAAG,CAKN,GAAAvF,GAAYuF,EAAE/I,OAAS,kBACzB,OAGI,MAAA+I,CACR,GAGIC,GAAyBzQ,GAAgB,CACzCmM,EAAgBjL,MAClBrB,EAAiB,CAAEK,OAAQC,EAAcyL,GAAI,CAAC,EACrCrD,EAAoBrH,OAC7BrB,EAAiB,CAAEK,OAAQC,EAAcC,QAAS,CAAC,EAE9CR,EAAA,CAAEI,MAAAA,CAAM,CAAC,GAKZ0Q,GAAuBA,IAAY,CACnC,CAACvE,EAAgBjL,OAAS,CAACqH,EAAoBrH,QACtC4L,IACNhE,EAAa5H,OAChBrB,EAAiB,CAAEK,OAAQ4I,EAAa5H,OAASsN,EAAkBtN,KAAM,CAAC,GAG/DwB,KAGXlB,GAAuBA,IAAY,CACrBmO,IAClBjC,EAAcxM,MAAQ,IAGlByP,GAAsBA,IAAY,CACtCjD,EAAcxM,MAAQ,IAGlB0P,GAAmBA,IAAY,CAChB5D,KACJtK,IAEfkL,EAAsB1M,MAAQ,GAC9B8C,EAAS,IAAMV,WAAW,IAAOsK,EAAsB1M,MAAQ,EAAK,CAAC,GAGjE2P,GAAuBA,IAAY,CACvCrI,EAAW,iBAAkB,0BAA0B,EACpC0E,KACJxK,KAGXoO,GAASA,IAAY,CACb/D,KACWI,KACRxN,EAAA,CAAEK,MAAO,EAAG,CAAC,EAC5B2N,EAAWzM,MAAQ,IAGf6P,GAAwBC,GAAqC,OAC7DA,GAASA,IAAU,sBACrBxD,EAAAA,GAAetM,QAAfsM,MAAAA,EAAsBnK,UAMpB4N,GAAcA,IAAY,CAC1B1I,EAAoBrH,OACDkM,KAERzN,EAAA,CAAEK,MAAO,EAAG,CAAC,GAGxBkR,GAAkBhR,GAAyB,CAI/C,GAHWsI,EAAA,iBAAkB,YAAYtI,CAAM,EAAE,EACtC4M,IACMjN,EAAA,CAAEK,OAAAA,CAAgC,CAAC,EAChD,CAACI,EAAYY,OAASZ,EAAYY,MAAM2O,SAAW,GAAI,CAC1CnN,IACf,MACF,CAEKoG,EAAa5H,QAOhB,CAACoL,EAAwBpL,OACzB,CAACoL,EAAwBpL,MAAM4H,EAAa5H,KAAK,GACjDoL,EAAwBpL,MAAM4H,EAAa5H,KAAK,EAAE6D,SAAW,IAEtDnF,KAILuR,GAAsBC,GAA6B,CACxCzR,EAAA,CAAEK,MAAOoR,CAAW,CAAC,EAC7BxR,KAKTiD,OAAAA,EAAU,IAAY,CACagK,KACf8C,IACTjH,SAAA2I,iBAAiB,mBAAoB,IAAM,CAChC1B,GACpB,CAAC,CACH,CAAC,EAEDtK,EACE2G,EACCsF,GAAoB,CACfA,GAAU,CAAC/I,EAAoBrH,MAC7B+K,EAAmB/K,MACrBoC,WAAW,IAAM,CAGfqK,EAAWzM,MAAQ,IAClB,GAAG,EAENyM,EAAWzM,MAAQ,GAGrByM,EAAWzM,MAAQ,EAEvB,EACA,CAAEqQ,UAAW,EAAK,CACpB,EAMMlM,EAAA/E,EAAckR,GAAQ,CACtB,CAACxF,EAAc9K,OAASsQ,GAAOA,EAAI3B,SAAW,IAChBK,GAAApH,EAAa5H,OAASsN,EAAkBtN,KAAK,CAEjF,CAAC"}