@bagelink/vue 1.17.2 → 1.17.6

package/src/components/Dropdown.vue

@@ -1,15 +1,12 @@
 <!-- prettier-ignore-start -->
 <!-- eslint-disable -->
 <script setup lang="ts">
+import type { VirtualElement } from '@floating-ui/dom'
 import type { IconType, ThemeType } from '../index'
-import { Btn, useDevice, useEscapeKey } from '../index'
+import type { AlignedPlacement, AnchorPoint, DropdownItem, TriggerEvent } from './Dropdown.types'
+import { Btn, Divider, useDevice, useEscapeKey } from '../index'
 import { autoPlacement, computePosition, flip, offset, shift } from '@floating-ui/dom'
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue'
-
-export type Side = 'top' | 'right' | 'bottom' | 'left'
-export type Alignment = 'start' | 'end'
-export type AlignedPlacement = 'auto' | Side | `${Side}-${Alignment}`
-export type TriggerEvent = 'click' | 'hover'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, useSlots, watch } from 'vue'
 
 defineOptions({ inheritAttrs: false, name: 'DropDown' })
 const props = withDefaults(defineProps<{
@@ -26,9 +23,7 @@ const props = withDefaults(defineProps<{
 	icon?: IconType
 	color?: ThemeType
 	triggerClass?: string
-	/** Extra class(es) applied to the teleported popover element. Useful to scope
-	 * a theme onto the popup, which renders outside the trigger's DOM subtree
-	 * (e.g. `popup-class="bgl-dark-mode"` for an always-dark recreation). */
+	/** Extra class(es) applied to the teleported popover element. */
 	popupClass?: string
 	iconEnd?: IconType
 	outline?: boolean
@@ -39,18 +34,20 @@ const props = withDefaults(defineProps<{
 	noAutoFocus?: boolean
 	autoHide?: boolean
 	triggers?: TriggerEvent[]
-	showTriggers?: TriggerEvent[]
-	hideTriggers?: TriggerEvent[]
 	popperTriggers?: TriggerEvent[]
-	popperShowTriggers?: TriggerEvent[]
-	popperHideTriggers?: TriggerEvent[]
 	showGroup?: string
 	card?: boolean
 	/** Remove all popup content padding, whether or not the slot contains a Card. */
 	noPadding?: boolean
 	delay?: number | { show: number; hide: number }
-	/** Override the anchor element used for positioning. When provided, the #trigger slot is not rendered. */
-	referenceEl?: Element | null
+	/** Declarative menu items. Can be used instead of or alongside the default slot. */
+	items?: DropdownItem[]
+	/** Alias for `items` for backward compatibility. */
+	options?: DropdownItem[]
+	/** Override the anchor element (or Floating UI VirtualElement) used for positioning. */
+	referenceEl?: Element | VirtualElement | null
+	/** Position the dropdown at explicit viewport coordinates `{ x, y, width?, height? }`. */
+	anchorPoint?: AnchorPoint | null
 }>(), {
 	thin: true,
 	flat: true,
@@ -60,26 +57,24 @@ const props = withDefaults(defineProps<{
 	autoHide: true,
 	triggers: () => ['click'],
 	popperTriggers: () => [],
-	popperShowTriggers: () => [],
-	popperHideTriggers: () => [],
 })
 
-const emit = defineEmits<{ show: []; hide: [] }>()
+const emit = defineEmits<{
+	show: []
+	hide: []
+	select: [value: string | number | DropdownItem, item: DropdownItem]
+}>()
 
+const slots = useSlots()
 const shown = defineModel('shown', { type: Boolean, default: false })
 const hasOpened = ref(shown.value)
 
 const triggerWrapRef = ref<HTMLElement | null>(null)
 const popoverRef = ref<HTMLElement | null>(null)
+const runtimeAnchorPoint = ref<AnchorPoint | null>(null)
 
-// Tracks whether the popover was opened via keyboard (Enter/Space/Arrow) so we know
-// whether to move focus into the menu on open.
 let openedViaKeyboard = false
 
-// Unique id for this popover instance, used to track parent–child relationships
-// across teleported popovers. `useId()` is SSR-stable and collision-free — the
-// old module-level counter reset per SSR render, producing duplicate ids like
-// `bgl-dd-1` on multiple dropdowns (an a11y failure: duplicate ARIA IDs).
 const bglId = `bgl-dd-${useId()}`
 const POPOVER_ROOT = '#bagelink-popover-root'
 const teleportTarget = ref<string | Element>(POPOVER_ROOT)
@@ -89,6 +84,11 @@ const { isMobile } = useDevice()
 const shouldDisablePositioning = computed(() => props.disablePlacement && isMobile.value)
 const isSmallScreen = isMobile
 
+const resolvedItems = computed(() => props.items ?? props.options ?? [])
+const effectiveAnchorPoint = computed(() => props.anchorPoint ?? runtimeAnchorPoint.value)
+const hasExternalAnchor = computed(() => Boolean(props.referenceEl || effectiveAnchorPoint.value))
+const shouldRenderTrigger = computed(() => !hasExternalAnchor.value || Boolean(slots.trigger))
+
 const effectiveTriggers = computed(() =>
 	isSmallScreen.value
 		? props.triggers.map(t => (t === 'hover' ? 'click' : t))
@@ -121,8 +121,38 @@ const resolvedDelay = computed((): { show: number; hide: number } => {
 // ShowGroup registry — shared across all Dropdown instances on the page
 const groupRegistry = new Map<string, Set<() => void>>()
 
+function toVirtualElement(pt: AnchorPoint): VirtualElement {
+	const width = pt.width ?? 0
+	const height = pt.height ?? 0
+	return {
+		getBoundingClientRect() {
+			return {
+				width,
+				height,
+				x: pt.x,
+				y: pt.y,
+				top: pt.y,
+				left: pt.x,
+				right: pt.x + width,
+				bottom: pt.y + height,
+				toJSON() { return this },
+			} as DOMRect
+		},
+	}
+}
+
+function resolveAnchorElement(): Element | VirtualElement | null {
+	if (effectiveAnchorPoint.value) {
+		return toVirtualElement(effectiveAnchorPoint.value)
+	}
+	if (props.referenceEl) {
+		return props.referenceEl
+	}
+	return (triggerWrapRef.value?.firstElementChild ?? triggerWrapRef.value) as Element | null
+}
+
 async function updatePosition() {
-	const triggerEl = (props.referenceEl ?? triggerWrapRef.value?.firstElementChild) as HTMLElement | null
+	const triggerEl = resolveAnchorElement()
 	if (!popoverRef.value || !triggerEl || shouldDisablePositioning.value) return
 
 	const isAuto = props.placement === 'auto'
@@ -147,33 +177,33 @@ function isOpen(): boolean {
 }
 
 async function internalShow() {
-	if (props.disabled || isOpen()) return
+	if (props.disabled) return
+	if (isOpen()) {
+		await updatePosition()
+		return
+	}
 
 	hasOpened.value = true
-	teleportTarget.value = triggerWrapRef.value?.closest('dialog[open]') ?? POPOVER_ROOT
+	const hostEl = props.referenceEl instanceof Element ? props.referenceEl : triggerWrapRef.value
+	teleportTarget.value = hostEl?.closest('dialog[open]') ?? POPOVER_ROOT
 
 	if (props.showGroup && groupRegistry.has(props.showGroup)) {
 		groupRegistry.get(props.showGroup)!.forEach(fn => fn())
 	}
 
-	// Wait for Teleport to move the element to the new target before promoting to top layer
 	await nextTick()
 	if (!popoverRef.value) return
 
-	// Tag with our own id and, if the trigger lives inside another open popover, tag with that owner's id.
-	// This lets ancestor Dropdowns skip closing when a click lands inside our (teleported) popover.
 	popoverRef.value.dataset.bglId = bglId
-	const ownerPopover = triggerWrapRef.value?.closest<HTMLElement>('[data-bgl-id]')
+	const ownerPopover = hostEl?.closest<HTMLElement>('[data-bgl-id]')
 	if (ownerPopover?.dataset.bglId) popoverRef.value.dataset.bglOwner = ownerPopover.dataset.bglId
 	else delete popoverRef.value.dataset.bglOwner
 
-	// Show hidden first so floating-ui can measure it, then position, then reveal
 	popoverRef.value.style.opacity = '0'
 	popoverRef.value.showPopover()
 	await updatePosition()
 	popoverRef.value.style.opacity = ''
 
-	// For keyboard-driven opens, move focus into the menu so arrow keys work immediately.
 	if (openedViaKeyboard) {
 		focusFirstItem()
 		openedViaKeyboard = false
@@ -182,9 +212,6 @@ async function internalShow() {
 
 function internalHide(opts?: { restoreFocus?: boolean }) {
 	if (!isOpen()) return
-	// Only restore focus to the trigger for keyboard-driven closes (Esc/click).
-	// Hover-driven closes must NOT steal focus back, otherwise the trigger gets a
-	// stray :focus-visible ring after the pointer has already moved elsewhere.
 	const restoreFocus = opts?.restoreFocus ?? true
 	if (restoreFocus && !props.noAutoFocus) {
 		const focusable = triggerWrapRef.value?.querySelector<HTMLElement>(
@@ -195,6 +222,24 @@ function internalHide(opts?: { restoreFocus?: boolean }) {
 	popoverRef.value?.hidePopover()
 }
 
+function openAt(target: AnchorPoint | MouseEvent) {
+	if ('clientX' in target && 'clientY' in target) {
+		runtimeAnchorPoint.value = { x: target.clientX, y: target.clientY, width: 0, height: 0 }
+	} else {
+		runtimeAnchorPoint.value = { ...target }
+	}
+	internalShow()
+}
+
+function handleItemClick(item: DropdownItem) {
+	if (item.disabled) return
+	item.action?.()
+	emit('select', item.value ?? item.label ?? item, item)
+	if (props.autoHide) {
+		internalHide()
+	}
+}
+
 // --- Keyboard accessibility helpers -------------------------------------------------
 
 const FOCUSABLE_SELECTOR = [
@@ -219,13 +264,11 @@ function focusItemAt(index: number) {
 	items[wrapped]?.focus()
 }
 
-// Move focus into the menu (first focusable item) — used for keyboard-driven opens.
 function focusFirstItem() {
 	if (props.noAutoFocus) return
 	focusItemAt(0)
 }
 
-// Arrow-key navigation while the popover is open.
 function onPopoverKeydown(e: KeyboardEvent) {
 	const items = getFocusableItems()
 	if (items.length === 0) return
@@ -260,6 +303,20 @@ watch(shown, (val) => {
 	else if (!val && isOpen()) internalHide()
 })
 
+// Reposition live when anchorPoint or referenceEl changes while open
+watch(
+	() => [
+		effectiveAnchorPoint.value?.x,
+		effectiveAnchorPoint.value?.y,
+		effectiveAnchorPoint.value?.width,
+		effectiveAnchorPoint.value?.height,
+		props.referenceEl,
+	],
+	() => {
+		if (isOpen()) updatePosition()
+	}
+)
+
 // Sync popover state → shown model
 function onPopoverToggle(e: Event) {
 	const te = e as ToggleEvent
@@ -280,19 +337,13 @@ function onDocumentPointerDown(e: PointerEvent) {
 	if (!props.autoHide || !isOpen()) return
 	const target = e.target as Node
 	if (popoverRef.value?.contains(target) || triggerWrapRef.value?.contains(target)) return
-	// External anchor (referenceEl) counts as the trigger — don't close when
-	// the user interacts with it (e.g. re-clicking the chip that opened us).
 	if (props.referenceEl instanceof Node && props.referenceEl.contains(target)) return
-	// Don't close if the click landed inside a descendant popover (e.g. a SelectInput inside this
-	// dropdown that teleports its popup to <body>). We detect this via a data-bgl-owner attribute
-	// that each Dropdown sets on its popover element to point to the nearest ancestor popover's id.
 	const openPopovers = document.querySelectorAll<HTMLElement>('[popover]:popover-open')
 	const myId = popoverRef.value?.dataset.bglId
 	for (const p of Array.from(openPopovers)) {
 		if (p === popoverRef.value) continue
 		if (p.contains(target) && myId && p.dataset.bglOwner === myId) return
 	}
-	// Pointer landed elsewhere — let the click move focus naturally, don't yank it back to the trigger.
 	internalHide({ restoreFocus: false })
 }
 
@@ -304,11 +355,8 @@ let showTimer: ReturnType<typeof setTimeout> | undefined
 let hideTimer: ReturnType<typeof setTimeout> | undefined
 function clearTimers() { clearTimeout(showTimer); clearTimeout(hideTimer) }
 
-// Guard against double toggles within the same tick. The <Btn> trigger handles keydown.enter/space
-// itself AND the browser also fires a native click for Enter/Space on a <button>, which would
-// otherwise toggle the popover twice (open → immediately close, the "opens for a second" bug).
 let lastToggleAt = 0
-function toggle(viaKeyboard: boolean) {
+function toggle(viaKeyboard = false) {
 	const now = Date.now()
 	if (now - lastToggleAt < 50) return
 	lastToggleAt = now
@@ -318,12 +366,9 @@ function toggle(viaKeyboard: boolean) {
 
 function onTriggerClick(e?: MouseEvent) {
 	if (!isClickTrigger.value) return
-	// A click via keyboard (Enter/Space) reports detail === 0; a real pointer click reports >= 1.
 	toggle(!!e && e.detail === 0)
 }
 
-// Keyboard activation on the trigger. Works for ALL trigger types (including hover-only) so the
-// dropdown is reachable by keyboard users — WCAG requires hover-revealed content to also open on focus.
 function onTriggerKeydown(e: KeyboardEvent) {
 	const target = e.target as HTMLElement | null
 	if (
@@ -345,8 +390,6 @@ function onTriggerKeydown(e: KeyboardEvent) {
 		case 'ArrowDown':
 			e.preventDefault()
 			openedViaKeyboard = true
-			// Arrow keys are a deliberate request to navigate, so move focus into the menu
-			// even when noAutoFocus is set (noAutoFocus only suppresses focus-on-open).
 			if (isOpen()) focusItemAt(0)
 			else internalShow()
 			break
@@ -401,7 +444,6 @@ onMounted(() => {
 		if (!groupRegistry.has(props.showGroup)) groupRegistry.set(props.showGroup, new Set())
 		groupRegistry.get(props.showGroup)!.add(internalHide)
 	}
-	// Honour an already-true v-model:shown on mount (watch is not immediate).
 	if (shown.value) internalShow()
 })
 
@@ -412,14 +454,14 @@ onBeforeUnmount(() => {
 	if (isOpen()) popoverRef.value?.hidePopover()
 })
 
-defineExpose({ show, hide, shown })
+defineExpose({ show, hide, toggle, openAt, updatePosition, shown })
 </script>
 
 <template>
 	<div style="display: contents">
-		<!-- Trigger wrapper — omitted when referenceEl is provided externally -->
+		<!-- Trigger wrapper — omitted when anchored externally without a #trigger slot -->
 		<div
-			v-if="!referenceEl"
+			v-if="shouldRenderTrigger"
 			ref="triggerWrapRef" v-bind="$attrs"
 			@mouseenter="onTriggerMouseenter" @mouseleave="onTriggerMouseleave" @focus="onTriggerMouseenter"
 			@blur="onTriggerMouseleave" @keydown="onTriggerKeydown"
@@ -456,7 +498,31 @@ defineExpose({ show, hide, shown })
 					'bgl-dropdown__content--no-padding': props.noPadding,
 				}"
 				style="border-radius: calc(var(--bgl-card-border-radius) * 0.7);">
-					<slot :hide :show :shown />
+					<template v-if="resolvedItems.length > 0">
+						<div class="bgl-dropdown__items flex flex-column gap-0125">
+							<template v-for="(item, idx) in resolvedItems" :key="item.value ?? item.label ?? idx">
+								<Divider v-if="item.divider" class="my-025" />
+								<div v-else-if="item.header" class="bgl-dropdown__header px-05 py-025 txt11 semi opacity-5 uppercase">
+									{{ item.header }}
+								</div>
+								<Btn
+									v-else
+									thin
+									flat
+									full-width
+									align-txt="start"
+									role="menuitem"
+									:icon="item.icon"
+									:value="item.label"
+									:color="item.danger ? 'red' : item.color"
+									:disabled="item.disabled"
+									:class="[item.class, { active: item.active, 'bgl-dropdown__item--danger': item.danger }]"
+									@click="handleItemClick(item)"
+								/>
+							</template>
+						</div>
+					</template>
+					<slot :hide :show :shown :open-at="openAt" />
 				</div>
 			</div>
 		</Teleport>
@@ -533,15 +599,10 @@ animation: bgl-dropdown-enter 0.18s ease 0.04s both;
 transform-origin: top left;
 }
 
-/* Default menu breathing room so items don't touch the rounded top/bottom edges.
-   Applies to the card content itself so plain menu content (e.g. a list of Btns)
-   gets the same padding as content wrapped in a .bgl_card — no consumer py-* needed. */
 .bgl-dropdown__content--card {
 padding-block: 0.5rem;
 padding-inline: 0.375rem;
 }
-/* A direct Card is the popup's main surface, so neither wrapper nor Card gets
-   the default menu padding. */
 .bgl-dropdown__content--card:has(> .bgl_card) {
 padding: 0;
 }
@@ -554,6 +615,10 @@ padding: 0;
 padding: 0;
 }
 
+.bgl-dropdown__items {
+min-width: 150px;
+}
+
 </style>
 <!-- prettier-ignore-end -->
 <!-- eslint-enable -->

package/src/components/FilterQuery.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import type { FilterField, QueryOption, OptionsSource } from './FilterQuery.types'
-import type { AlignedPlacement } from './Dropdown.vue'
+import type { AlignedPlacement } from './Dropdown.types'
 export type { FilterField, QueryOption, OptionsSource }
 </script>
 

package/src/components/Icon/Icon.vue

@@ -2,7 +2,7 @@
 import type { IconType } from '../../index'
 import { useDevice } from '../../index'
 import { computed, ref, onMounted, watchEffect } from 'vue'
-import { FONT_AWESOME_ICONS, MATERIAL_ICONS, FONT_AWESOME_BRANDS_ICONS } from './constants'
+import { MATERIAL_ICONS, FONT_AWESOME_BRANDS_ICONS } from './constants'
 
 type AnimateType = 'spin' | 'pulse' | 'bounce' | 'fade-in' | 'slide-up' | 'rotate-in'
 type TransitionType = 'slide-up' | 'rotate' | 'scale' | 'fade'
@@ -21,7 +21,6 @@ const props = withDefaults(defineProps<{
 	    Uses `color`, and defaults to black when no color is provided. */
 	soft?: boolean
 	weight?: number | string
-	fontAwesome?: boolean
 	fill?: boolean
 	/** Entrance / looping effect. Pure CSS, opt-in. e.g. `animate="spin"`. */
 	animate?: AnimateType
@@ -50,17 +49,15 @@ const computedSize = computed(() => {
 })
 
 const iconRenderType = computed(() => {
-	if (props.fontAwesome && (FONT_AWESOME_ICONS.includes(iconRender.value) || FONT_AWESOME_BRANDS_ICONS.includes(iconRender.value))) { return 'font-awesome' }
+	// Only brand glyphs use Font Awesome. Regular/solid icons are intentionally
+	// unsupported; their names fall back to Material Symbols.
+	if (FONT_AWESOME_BRANDS_ICONS.includes(iconRender.value)) { return 'font-awesome-brand' }
 	if (MATERIAL_ICONS.includes(iconRender.value)) { return 'material' }
-	if (FONT_AWESOME_ICONS.includes(iconRender.value) || FONT_AWESOME_BRANDS_ICONS.includes(iconRender.value)) { return 'font-awesome' }
 	return 'material'
 })
 
-const isFaBrand = computed(() => FONT_AWESOME_BRANDS_ICONS.includes(iconRender.value))
-
 // Hide until required font is ready to avoid ligature text/fallback flash
 const isMaterialReady = ref(true)
-const isFAFreeReady = ref(true)
 const isFABrandsReady = ref(true)
 
 function getFontFaceSet(): FontFaceSet | null {
@@ -92,11 +89,6 @@ async function loadMaterialIfNeeded() {
 	isMaterialReady.value = ok
 }
 
-async function loadFAFreeIfNeeded() {
-	const ok = await ensureFontLoaded('Font Awesome 6 Free')
-	isFAFreeReady.value = ok
-}
-
 async function loadFABrandsIfNeeded() {
 	const ok = await ensureFontLoaded('Font Awesome 6 Brands')
 	isFABrandsReady.value = ok
@@ -108,14 +100,10 @@ onMounted(() => {
 		const fonts = getFontFaceSet()
 		isMaterialReady.value = fonts ? fonts.check('1em "Material Symbols Outlined"') : true
 		void loadMaterialIfNeeded()
-	} else if (isFaBrand.value) {
+	} else {
 		const fonts = getFontFaceSet()
 		isFABrandsReady.value = fonts ? fonts.check('1em "Font Awesome 6 Brands"') : true
 		void loadFABrandsIfNeeded()
-	} else {
-		const fonts = getFontFaceSet()
-		isFAFreeReady.value = fonts ? fonts.check('1em "Font Awesome 6 Free"') : true
-		void loadFAFreeIfNeeded()
 	}
 })
 
@@ -123,16 +111,14 @@ watchEffect(() => {
 	if (!supportsFontLoading()) { return }
 	if (iconRenderType.value === 'material') {
 		void loadMaterialIfNeeded()
-	} else if (isFaBrand.value) {
-		void loadFABrandsIfNeeded()
 	} else {
-		void loadFAFreeIfNeeded()
+		void loadFABrandsIfNeeded()
 	}
 })
 
 const isCurrentFontReady = computed(() => {
 	if (iconRenderType.value === 'material') { return isMaterialReady.value }
-	return isFaBrand.value ? isFABrandsReady.value : isFAFreeReady.value
+	return isFABrandsReady.value
 })
 
 // Entrance / loop animation class + timing.
@@ -213,16 +199,13 @@ const iconStyle = computed(() => {
 			{{ iconRender }}
 		</span>
 		<span
-			v-else-if="iconRenderType === 'font-awesome'" :key="`font-awesome-${iconRender}`" class="fa bgl_icon-font notranslate" :class="[
+			v-else-if="iconRenderType === 'font-awesome-brand'" :key="`font-awesome-brand-${iconRender}`" class="fa fa-brands bgl_icon-font notranslate" :class="[
 				`fa-${iconRender}`,
 				animateClass,
 				roundClass,
 				roundPairClass,
 				softClass,
 				{
-					'fa-brands': isFaBrand,
-					'fa-solid': fill,
-					'far': !fill && !isFaBrand,
 					'color-white keep-white': round && !soft && isRawCssColor,
 				},
 			]" :style="iconStyle" aria-hidden="true"
@@ -239,7 +222,6 @@ const iconStyle = computed(() => {
  * RANGES shrinks the served font dramatically (the full ~3.8MB font is the
  * single biggest asset on the page) while keeping weight/fill working. */
 @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,100..700,0..1,0');
-@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css');
 
 [dir='rtl'] .data-row .bgl_icon-font,
 [dir='rtl'] .embedded-field .bgl_icon-font,
@@ -264,10 +246,6 @@ const iconStyle = computed(() => {
 	box-sizing: border-box;
 }
 
-.bgl_icon-font.fa {
-	font-family: 'Font Awesome 6 Free', serif !important;
-}
-
 .bgl_icon-font.fa-brands {
 	font-family: 'Font Awesome 6 Brands', serif !important;
 }

package/src/components/Icon/constants.ts

@@ -1,169 +1,3 @@
-export const FONT_AWESOME_ICONS = [
-	'trash-can',
-	'message',
-	'file-lines',
-	'calendar-days',
-	'hand-point-right',
-	'face-smile-beam',
-	'face-grin-stars',
-	'address-book',
-	'comments',
-	'paste',
-	'face-grin-tongue-squint',
-	'face-flushed',
-	'square-caret-right',
-	'square-minus',
-	'compass',
-	'square-caret-down',
-	'face-kiss-beam',
-	'lightbulb',
-	'flag',
-	'square-check',
-	'circle-dot',
-	'face-dizzy',
-	'futbol',
-	'pen-to-square',
-	'hourglass-half',
-	'eye-slash',
-	'hand',
-	'hand-spock',
-	'face-kiss',
-	'face-grin-tongue',
-	'chess-bishop',
-	'face-grin-wink',
-	'face-grin-wide',
-	'face-frown-open',
-	'hand-point-up',
-	'bookmark',
-	'hand-point-down',
-	'folder',
-	'user',
-	'square-caret-left',
-	'star',
-	'chess-knight',
-	'face-laugh-squint',
-	'face-laugh',
-	'folder-open',
-	'clipboard',
-	'chess-queen',
-	'hand-back-fist',
-	'square-caret-up',
-	'chart-bar',
-	'window-restore',
-	'square-plus',
-	'image',
-	'folder-closed',
-	'lemon',
-	'handshake',
-	'gem',
-	'circle-play',
-	'circle-check',
-	'circle-stop',
-	'id-badge',
-	'face-laugh-beam',
-	'registered',
-	'address-card',
-	'face-tired',
-	'font-awesome',
-	'face-smile-wink',
-	'file-word',
-	'file-powerpoint',
-	'envelope-open',
-	'file-zipper',
-	'square',
-	'snowflake',
-	'newspaper',
-	'face-kiss-wink-heart',
-	'star-half-stroke',
-	'file-excel',
-	'face-grin-beam',
-	'object-ungroup',
-	'circle-right',
-	'face-rolling-eyes',
-	'object-group',
-	'heart',
-	'face-surprise',
-	'circle-pause',
-	'circle',
-	'circle-up',
-	'file-audio',
-	'file-image',
-	'circle-question',
-	'face-meh-blank',
-	'eye',
-	'face-sad-cry',
-	'file-code',
-	'window-maximize',
-	'face-frown',
-	'floppy-disk',
-	'comment-dots',
-	'face-grin-squint',
-	'hand-pointer',
-	'hand-scissors',
-	'face-grin-tears',
-	'calendar-xmark',
-	'file-video',
-	'file-pdf',
-	'comment',
-	'envelope',
-	'hourglass',
-	'calendar-check',
-	'hard-drive',
-	'face-grin-squint-tears',
-	'rectangle-list',
-	'calendar-plus',
-	'circle-left',
-	'money-bill-1',
-	'clock',
-	'keyboard',
-	'closed-captioning',
-	'images',
-	'face-grin',
-	'face-meh',
-	'id-card',
-	'sun',
-	'face-laugh-wink',
-	'circle-down',
-	'thumbs-down',
-	'chess-pawn',
-	'credit-card',
-	'bell',
-	'file',
-	'hospital',
-	'chess-rook',
-	'star-half',
-	'chess-king',
-	'circle-user',
-	'copy',
-	'share-from-square',
-	'copyright',
-	'map',
-	'bell-slash',
-	'hand-lizard',
-	'face-smile',
-	'hand-peace',
-	'face-grin-hearts',
-	'building',
-	'face-grin-beam-sweat',
-	'moon',
-	'calendar',
-	'face-grin-tongue-wink',
-	'clone',
-	'face-angry',
-	'rectangle-xmark',
-	'paper-plane',
-	'life-ring',
-	'face-grimace',
-	'calendar-minus',
-	'circle-xmark',
-	'thumbs-up',
-	'window-minimize',
-	'square-full',
-	'note-sticky',
-	'face-sad-tear',
-	'hand-point-left'
-]
-
 export const FONT_AWESOME_BRANDS_ICONS = [
 	'monero',
 	'hooli',