@byline/ui 0.9.3 → 0.10.1

package/src/fields/array/array-field.tsx

@@ -9,7 +9,6 @@
 import { useEffect, useState } from 'react'
 
 import type { ArrayField as ArrayFieldType, Field } from '@byline/core'
-import { IconButton, PlusIcon } from '@infonomic/uikit/react'
 import cx from 'classnames'
 
 import { DraggableSortable, moveItem } from '../../dnd/draggable-sortable'
@@ -17,6 +16,7 @@ import { defaultScalarForField } from '../../fields/field-helpers'
 import { FieldRenderer } from '../../fields/field-renderer'
 import { SortableItem } from '../../fields/sortable-item'
 import { useFormContext } from '../../forms/form-context'
+import { IconButton, PlusIcon } from '../../uikit.js'
 import styles from './array-field.module.css'
 
 // ---------------------------------------------------------------------------

package/src/fields/blocks/blocks-field.tsx

@@ -13,7 +13,6 @@ import type {
   Field,
   GroupField as GroupFieldType,
 } from '@byline/core'
-import { Card, CloseIcon, IconButton, Modal, PlusIcon } from '@infonomic/uikit/react'
 import cx from 'classnames'
 
 import { DraggableSortable, moveItem } from '../../dnd/draggable-sortable'
@@ -21,6 +20,7 @@ import { defaultScalarForField } from '../../fields/field-helpers'
 import { GroupField } from '../../fields/group/group-field'
 import { SortableItem } from '../../fields/sortable-item'
 import { useFormContext } from '../../forms/form-context'
+import { Card, CloseIcon, IconButton, Modal, PlusIcon } from '../../uikit.js'
 import styles from './blocks-field.module.css'
 
 // ---------------------------------------------------------------------------

package/src/fields/checkbox/checkbox-field.tsx

@@ -7,9 +7,9 @@
  */
 
 import type { CheckboxField as FieldType } from '@byline/core'
-import { Checkbox } from '@infonomic/uikit/react'
 
 import { useFieldError, useFieldValue } from '../../forms/form-context'
+import { Checkbox } from '../../uikit.js'
 
 export const CheckboxField = ({
   field,

package/src/fields/datetime/datetime-field.tsx

@@ -7,10 +7,10 @@
  */
 
 import type { DateTimeField as FieldType } from '@byline/core'
-import { DatePicker, ErrorText } from '@infonomic/uikit/react'
 import cx from 'classnames'
 
 import { useFieldError, useFieldValue, useIsDirty } from '../../forms/form-context'
+import { DatePicker, ErrorText } from '../../uikit.js'
 import styles from './datetime-field.module.css'
 
 export const DateTimeField = ({

package/src/fields/draggable-context-menu.tsx

@@ -8,15 +8,15 @@
  * Copyright (c) Infonomic Company Limited
  */
 
+import cx from 'classnames'
+
 import {
   DeleteIcon,
   Dropdown as DropdownMenu,
   EllipsisIcon,
   IconButton,
   PlusIcon,
-} from '@infonomic/uikit/react'
-import cx from 'classnames'
-
+} from '../uikit.js'
 import styles from './draggable-context-menu.module.css'
 
 interface DraggableContextMenuProps {

package/src/fields/file/file-field.tsx

@@ -7,10 +7,10 @@
  */
 
 import type { FileField as FieldType, StoredFileValue } from '@byline/core'
-import { ErrorText } from '@infonomic/uikit/react'
 import cx from 'classnames'
 
 import { useFieldError, useFieldValue, useIsDirty } from '../../forms/form-context'
+import { ErrorText } from '../../uikit.js'
 import styles from './file-field.module.css'
 
 interface FileFieldProps {

package/src/fields/group/group-field.tsx

@@ -9,12 +9,12 @@
 import { useMemo } from 'react'
 
 import type { Field, GroupField as GroupFieldType } from '@byline/core'
-import { ErrorText } from '@infonomic/uikit/react'
 import cx from 'classnames'
 
 import { placeholderForField } from '../../fields/field-helpers'
 import { FieldRenderer } from '../../fields/field-renderer'
 import { useFieldError } from '../../forms/form-context'
+import { ErrorText } from '../../uikit.js'
 import styles from './group-field.module.css'
 
 // ---------------------------------------------------------------------------

package/src/fields/image/image-field.tsx

@@ -11,10 +11,10 @@ import {
   isPendingStoredFileValue,
   type StoredFileValue,
 } from '@byline/core'
-import { ErrorText } from '@infonomic/uikit/react'
 import cx from 'classnames'
 
 import { useFieldError, useFieldValue, useFormContext, useIsDirty } from '../../forms/form-context'
+import { ErrorText } from '../../uikit.js'
 import { useFieldChangeHandler } from '../use-field-change-handler'
 import styles from './image-field.module.css'
 import { ImageUploadField } from './image-upload-field'

package/src/fields/numerical/numerical-field.tsx

@@ -13,9 +13,9 @@ import type {
   FloatField,
   IntegerField,
 } from '@byline/core'
-import { Input } from '@infonomic/uikit/react'
 
 import { useFieldError, useFieldValue } from '../../forms/form-context'
+import { Input } from '../../uikit.js'
 
 export const NumericalField = ({
   field,

package/src/fields/relation/relation-field.tsx

@@ -15,10 +15,10 @@ import type {
   RelatedDocumentValue,
 } from '@byline/core'
 import { getCollectionAdminConfig, getCollectionDefinition } from '@byline/core'
-import { Button, ErrorText, Label } from '@infonomic/uikit/react'
 import cx from 'classnames'
 
 import { useFieldError, useFieldValue } from '../../forms/form-context'
+import { Button, ErrorText, Label } from '../../uikit.js'
 import styles from './relation-field.module.css'
 import { RelationPicker } from './relation-picker'
 import { RelationSummary } from './relation-summary'

package/src/fields/relation/relation-picker.tsx

@@ -10,10 +10,10 @@ import { useCallback, useEffect, useState } from 'react'
 
 import type { CollectionAdminConfig, CollectionDefinition } from '@byline/core'
 import { getCollectionAdminConfig } from '@byline/core'
-import { Button, LoaderRing, Modal, Search } from '@infonomic/uikit/react'
 import cx from 'classnames'
 
 import { useBylineFieldServices } from '../../services/field-services-context'
+import { Button, LoaderRing, Modal, Search } from '../../uikit.js'
 import {
   PickerCell,
   resolveFallbackDisplayField,

package/src/fields/select/select-field.tsx

@@ -7,10 +7,10 @@
  */
 
 import type { SelectField as FieldType } from '@byline/core'
-import { ErrorText, Select } from '@infonomic/uikit/react'
 import cx from 'classnames'
 
 import { useFieldError, useFieldValue, useIsDirty } from '../../forms/form-context'
+import { ErrorText, Select } from '../../uikit.js'
 import styles from './select-field.module.css'
 
 export const SelectField = ({

package/src/fields/sortable-item.tsx

@@ -8,10 +8,10 @@
 
 import { type ReactNode, useState } from 'react'
 
-import { ChevronDownIcon, GripperVerticalIcon } from '@infonomic/uikit/react'
 import cx from 'classnames'
 
 import { useSortable } from '../dnd/draggable-sortable'
+import { ChevronDownIcon, GripperVerticalIcon } from '../uikit.js'
 import { DraggableContextMenu } from './draggable-context-menu'
 import styles from './sortable-item.module.css'
 

package/src/fields/text/text-field.tsx

@@ -9,10 +9,10 @@
 import { useCallback } from 'react'
 
 import type { Field, FieldComponentSlots, TextField as FieldType } from '@byline/core'
-import { Input, Label } from '@infonomic/uikit/react'
 import cx from 'classnames'
 
 import { useFieldError, useFieldValue } from '../../forms/form-context'
+import { Input, Label } from '../../uikit.js'
 import { LocaleBadge } from '../locale-badge'
 import styles from './text-field.module.css'
 

package/src/fields/text-area/text-area-field.tsx

@@ -9,10 +9,10 @@
 import { useCallback } from 'react'
 
 import type { Field, FieldComponentSlots, TextAreaField as FieldType } from '@byline/core'
-import { Label, TextArea } from '@infonomic/uikit/react'
 import cx from 'classnames'
 
 import { useFieldError, useFieldValue } from '../../forms/form-context'
+import { Label, TextArea } from '../../uikit.js'
 import { LocaleBadge } from '../locale-badge'
 import styles from './text-area-field.module.css'
 

package/src/fields.ts

@@ -0,0 +1,28 @@
+/**
+ * NOTE: We put a .js ending on imports here to satisfy
+ * TS / dist output
+ */
+
+export * from './fields/array/array-field.js'
+export * from './fields/blocks/blocks-field.js'
+export * from './fields/checkbox/checkbox-field.js'
+export * from './fields/column-formatter.js'
+export * from './fields/date-time-formatter.js'
+export * from './fields/datetime/datetime-field.js'
+export * from './fields/draggable-context-menu.js'
+export * from './fields/field-helpers.js'
+export * from './fields/field-renderer.js'
+export * from './fields/file/file-field.js'
+export * from './fields/group/group-field.js'
+export * from './fields/image/image-field.js'
+export * from './fields/image/image-upload-field.js'
+export * from './fields/local-date-time.js'
+export * from './fields/locale-badge.js'
+export * from './fields/numerical/numerical-field.js'
+export * from './fields/relation/relation-field.js'
+export * from './fields/relation/relation-picker.js'
+export * from './fields/select/select-field.js'
+export * from './fields/sortable-item.js'
+export * from './fields/text/text-field.js'
+export * from './fields/text-area/text-area-field.js'
+export * from './fields/use-field-change-handler.js'

package/src/forms/document-actions.tsx

@@ -8,6 +8,8 @@
 
 import { useState } from 'react'
 
+import cx from 'classnames'
+
 import {
   Button,
   CloseIcon,
@@ -16,9 +18,7 @@ import {
   EllipsisIcon,
   IconButton,
   Modal,
-} from '@infonomic/uikit/react'
-import cx from 'classnames'
-
+} from '../uikit.js'
 import styles from './document-actions.module.css'
 import type { PublishedVersionInfo } from './form-renderer'
 

package/src/forms/form-renderer.tsx

@@ -16,7 +16,6 @@ import type {
   TabSetDefinition,
   WorkflowStatus,
 } from '@byline/core'
-import { Button, ComboButton, Modal } from '@infonomic/uikit/react'
 import cx from 'classnames'
 
 import { Group } from '../admin/group'
@@ -25,6 +24,7 @@ import { Tabs } from '../admin/tabs'
 import { FieldRenderer } from '../fields/field-renderer'
 import { LocalDateTime } from '../fields/local-date-time'
 import { useBylineFieldServices } from '../services/field-services-context'
+import { Button, ComboButton, Modal } from '../uikit.js'
 import { DocumentActions } from './document-actions'
 import { FormProvider, useFieldValue, useFormContext } from './form-context'
 import styles from './form-renderer.module.css'

package/src/forms/path-widget.test.tsx

@@ -13,7 +13,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 // Lightweight uikit stubs — we don't care about the visual rendering, only
 // that the Input forwards props and the Label renders its htmlFor.
-vi.mock('@infonomic/uikit/react', () => ({
+vi.mock('@byline/ui', () => ({
   Label: ({ id, htmlFor, label }: { id?: string; htmlFor?: string; label?: string }) => (
     <label id={id} htmlFor={htmlFor}>
       {label}

package/src/forms/path-widget.tsx

@@ -9,9 +9,9 @@
 import { useCallback, useMemo } from 'react'
 
 import { slugify } from '@byline/core'
-import { Input, Label } from '@infonomic/uikit/react'
 import cx from 'classnames'
 
+import { Input, Label } from '../uikit.js'
 import { useFieldValue, useFormContext, useSystemPath } from './form-context'
 import styles from './path-widget.module.css'
 

package/src/forms.ts

@@ -0,0 +1,10 @@
+/**
+ * NOTE: We put a .js ending on imports here to satisfy
+ * TS / dist output
+ */
+
+export * from './forms/document-actions.js'
+export * from './forms/form-context.js'
+export * from './forms/form-renderer.js'
+export * from './forms/navigation-guard.js'
+export * from './forms/path-widget.js'

package/src/hooks/use-focus-trap/index.ts

@@ -0,0 +1 @@
+export { useFocusTrap } from './use-focus-trap.js'

package/src/hooks/use-focus-trap/scope-tab.ts

@@ -0,0 +1,48 @@
+/**
+ * Scope tab key navigation within a container.
+ *
+ * Based on use-focus-trap from Mantine (https://github.com/mantinedev/mantine)
+ * Original work licensed under the MIT License.
+ * Copyright (c) 2021 Vitaly Rtishchev
+ *
+ * Adapted for use as an internal ESM/TypeScript module.
+ */
+
+import { findTabbableDescendants } from './tabbable.js'
+
+export function scopeTab(node: HTMLElement, event: KeyboardEvent) {
+  const tabbable = findTabbableDescendants(node)
+  if (!tabbable.length) {
+    event.preventDefault()
+    return
+  }
+
+  const finalTabbable = tabbable[event.shiftKey ? 0 : tabbable.length - 1]
+  const root = node.getRootNode() as unknown as DocumentOrShadowRoot
+  let leavingFinalTabbable = finalTabbable === root.activeElement || node === root.activeElement
+
+  const activeElement = root.activeElement as Element
+  const activeElementIsRadio =
+    activeElement.tagName === 'INPUT' && activeElement.getAttribute('type') === 'radio'
+
+  if (activeElementIsRadio) {
+    const activeRadioGroup = tabbable.filter(
+      (element) =>
+        element.getAttribute('type') === 'radio' &&
+        element.getAttribute('name') === activeElement.getAttribute('name')
+    )
+    leavingFinalTabbable = activeRadioGroup.includes(finalTabbable)
+  }
+
+  if (!leavingFinalTabbable) {
+    return
+  }
+
+  event.preventDefault()
+
+  const target = tabbable[event.shiftKey ? tabbable.length - 1 : 0]
+
+  if (target) {
+    target.focus()
+  }
+}

package/src/hooks/use-focus-trap/tabbable.ts

@@ -0,0 +1,72 @@
+/**
+ * Focus-trap tabbable element utilities.
+ *
+ * Based on use-focus-trap from Mantine (https://github.com/mantinedev/mantine)
+ * Original work licensed under the MIT License.
+ * Copyright (c) 2021 Vitaly Rtishchev
+ *
+ * Adapted for use as an internal ESM/TypeScript module.
+ */
+
+const TABBABLE_NODES = /input|select|textarea|button|object/
+
+export const FOCUS_SELECTOR = 'a, input, select, textarea, button, object, [tabindex]'
+
+function hidden(element: HTMLElement) {
+  return element.style.display === 'none'
+}
+
+function visible(element: HTMLElement) {
+  const isHidden =
+    element.getAttribute('aria-hidden') ||
+    element.getAttribute('hidden') ||
+    element.getAttribute('type') === 'hidden'
+
+  if (isHidden) {
+    return false
+  }
+
+  let parentElement: HTMLElement = element
+  while (parentElement) {
+    if (parentElement === document.body || parentElement.nodeType === 11) {
+      break
+    }
+
+    if (hidden(parentElement)) {
+      return false
+    }
+
+    parentElement = parentElement.parentNode as HTMLElement
+  }
+
+  return true
+}
+
+function getElementTabIndex(element: HTMLElement) {
+  let tabIndex: string | null | undefined = element.getAttribute('tabindex')
+  if (tabIndex === null) {
+    tabIndex = undefined
+  }
+  return Number.parseInt(tabIndex as string, 10)
+}
+
+export function focusable(element: HTMLElement) {
+  const nodeName = element.nodeName.toLowerCase()
+  const isTabIndexNotNaN = !Number.isNaN(getElementTabIndex(element))
+  const res =
+    // @ts-expect-error function accepts any html element but if it is a button, it should not be disabled
+    (TABBABLE_NODES.test(nodeName) && !element.disabled) ||
+    (element instanceof HTMLAnchorElement ? element.href || isTabIndexNotNaN : isTabIndexNotNaN)
+
+  return res && visible(element)
+}
+
+export function tabbable(element: HTMLElement) {
+  const tabIndex = getElementTabIndex(element)
+  const isTabIndexNaN = Number.isNaN(tabIndex)
+  return (isTabIndexNaN || tabIndex >= 0) && focusable(element)
+}
+
+export function findTabbableDescendants(element: HTMLElement): HTMLElement[] {
+  return Array.from(element.querySelectorAll<HTMLElement>(FOCUS_SELECTOR)).filter(tabbable)
+}

package/src/hooks/use-focus-trap/use-focus-trap.ts

@@ -0,0 +1,83 @@
+/**
+ * Focus trap hook — traps keyboard focus within a container element.
+ *
+ * Based on use-focus-trap from Mantine (https://github.com/mantinedev/mantine)
+ * Original work licensed under the MIT License.
+ * Copyright (c) 2021 Vitaly Rtishchev
+ *
+ * Adapted for use as an internal ESM/TypeScript module.
+ */
+
+import { useCallback, useEffect, useRef } from 'react'
+
+import { scopeTab } from './scope-tab.js'
+import { FOCUS_SELECTOR, focusable, tabbable } from './tabbable.js'
+
+export function useFocusTrap(active = true): React.RefCallback<HTMLElement | null> {
+  const ref = useRef<HTMLElement>(null)
+
+  const focusNode = useCallback((node: HTMLElement) => {
+    let focusElement: HTMLElement | null = node.querySelector('[data-autofocus]')
+
+    if (!focusElement) {
+      const children = Array.from<HTMLElement>(node.querySelectorAll(FOCUS_SELECTOR))
+      focusElement = children.find(tabbable) || children.find(focusable) || null
+      if (!focusElement && focusable(node)) {
+        focusElement = node
+      }
+    }
+
+    if (focusElement) {
+      focusElement.focus({ preventScroll: true })
+    }
+  }, [])
+
+  const setRef = useCallback(
+    (node: HTMLElement | null) => {
+      if (!active) {
+        return
+      }
+
+      if (node === null) {
+        return
+      }
+
+      if (ref.current === node) {
+        return
+      }
+
+      if (node) {
+        // Delay processing the HTML node by a frame. This ensures focus is assigned correctly.
+        setTimeout(() => {
+          if (node.getRootNode()) {
+            focusNode(node)
+          }
+        })
+
+        ref.current = node
+      } else {
+        ref.current = null
+      }
+    },
+    [active, focusNode]
+  )
+
+  useEffect(() => {
+    if (!active) {
+      return undefined
+    }
+
+    ref.current && setTimeout(() => focusNode(ref.current!))
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Tab' && ref.current) {
+        scopeTab(ref.current, event)
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [active, focusNode])
+
+  return setRef
+}

package/src/hooks/use-media-query.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react'
+
+export const useMediaQuery = (query: string): boolean | null => {
+  const [matches, setMatches] = useState<boolean | null>(null)
+  useEffect(() => {
+    const mediaMatch = window.matchMedia(query)
+    if (matches == null) {
+      setMatches(mediaMatch.matches)
+    }
+    const handler = (e: MediaQueryListEvent): void => {
+      setMatches(e.matches)
+    }
+    mediaMatch.addEventListener('change', handler)
+    return () => {
+      mediaMatch.removeEventListener('change', handler)
+    }
+  }, [matches, query])
+
+  return matches
+}

package/src/icons/activity-icon.tsx

@@ -0,0 +1,41 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { IconElement } from './icon-element.js'
+import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
+
+export const ActivityIcon = ({
+  className,
+  svgClassName,
+  ...rest
+}: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-none'], styles['stroke-current'], svgClassName)
+
+  return (
+    <IconElement className={cx('activity-icon', className)} {...rest}>
+      <svg
+        className={applied}
+        xmlns="http://www.w3.org/2000/svg"
+        focusable="false"
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.75}
+      >
+        <path d="M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4" />
+        <path d="M2 6h4" />
+        <path d="M2 10h4" />
+        <path d="M2 14h4" />
+        <path d="M2 18h4" />
+        <path d="M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z" />
+      </svg>
+    </IconElement>
+  )
+}
+
+ActivityIcon.displayName = 'ActivityIcon'

package/src/icons/ai-icon.tsx

@@ -0,0 +1,45 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { IconElement } from './icon-element.jsx'
+import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
+
+export const AiIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
+  const _applied = cx(styles['stroke-current'], svgClassName)
+
+  return (
+    <IconElement className={cx('ai-icon', className)} {...rest}>
+      <svg
+        // className={applied}
+        xmlns="http://www.w3.org/2000/svg"
+        focusable="false"
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      >
+        <path
+          d="M14.0416 16.2219L13.5749 17.8284C13.1036 19.4508 12.868 20.262 12.5051 20.4675C12.1917 20.6449 11.8083 20.6449 11.4949 20.4675C11.132 20.262 10.8964 19.4508 10.4251 17.8284L9.95843 16.2219L9.95843 16.2219C9.77921 15.6049 9.68961 15.2965 9.52195 15.043C9.37356 14.8186 9.18142 14.6264 8.95705 14.478C8.70355 14.3104 8.39507 14.2208 7.77812 14.0416L7.77811 14.0416L6.1716 13.5749C4.5492 13.1036 3.738 12.868 3.5325 12.5051C3.35507 12.1917 3.35507 11.8083 3.5325 11.4949C3.738 11.132 4.5492 10.8964 6.1716 10.4251L7.77811 9.95843L7.77812 9.95843C8.39507 9.77922 8.70355 9.68961 8.95705 9.52195C9.18142 9.37356 9.37356 9.18142 9.52195 8.95705C9.68961 8.70355 9.77921 8.39507 9.95843 7.77812L9.95843 7.77811L10.4251 6.1716C10.8964 4.5492 11.132 3.738 11.4949 3.5325C11.8083 3.35507 12.1917 3.35507 12.5051 3.5325C12.868 3.738 13.1036 4.5492 13.5749 6.1716L14.0416 7.77811L14.0416 7.77812C14.2208 8.39507 14.3104 8.70355 14.478 8.95705C14.6264 9.18142 14.8186 9.37356 15.043 9.52195C15.2965 9.68961 15.6049 9.77921 16.2219 9.95843L16.2219 9.95843L17.8284 10.4251C19.4508 10.8964 20.262 11.132 20.4675 11.4949C20.6449 11.8083 20.6449 12.1917 20.4675 12.5051C20.262 12.868 19.4508 13.1036 17.8284 13.5749L16.2219 14.0416L16.2219 14.0416C15.6049 14.2208 15.2965 14.3104 15.043 14.478C14.8186 14.6264 14.6264 14.8186 14.478 15.043C14.3104 15.2965 14.2208 15.6049 14.0416 16.2219L14.0416 16.2219Z"
+          // stroke="#F5F5F5"
+        />
+        <path
+          d="M5.42282 5.94949L5.01129 7.20368C4.92849 7.45603 4.57151 7.45603 4.48871 7.20368L4.07718 5.94949C3.99537 5.70017 3.79983 5.50463 3.55051 5.42282L2.29632 5.01129C2.04397 4.92849 2.04397 4.57151 2.29632 4.48871L3.55051 4.07718C3.79983 3.99537 3.99537 3.79983 4.07718 3.55051L4.48871 2.29632C4.57151 2.04397 4.92849 2.04397 5.01129 2.29632L5.42282 3.55051C5.50463 3.79983 5.70017 3.99537 5.94949 4.07718L7.20368 4.48871C7.45603 4.57151 7.45603 4.92849 7.20368 5.01129L5.94949 5.42282C5.70017 5.50463 5.50463 5.70017 5.42282 5.94949Z"
+          fill="#FFBC0F"
+          stroke="none"
+        />
+        <path
+          d="M19.9228 20.4495L19.5113 21.7037C19.4285 21.956 19.0715 21.956 18.9887 21.7037L18.5772 20.4495C18.4954 20.2002 18.2998 20.0046 18.0505 19.9228L16.7963 19.5113C16.544 19.4285 16.544 19.0715 16.7963 18.9887L18.0505 18.5772C18.2998 18.4954 18.4954 18.2998 18.5772 18.0505L18.9887 16.7963C19.0715 16.544 19.4285 16.544 19.5113 16.7963L19.9228 18.0505C20.0046 18.2998 20.2002 18.4954 20.4495 18.5772L21.7037 18.9887C21.956 19.0715 21.956 19.4285 21.7037 19.5113L20.4495 19.9228C20.2002 20.0046 20.0046 20.2002 19.9228 20.4495Z"
+          fill="#FFBC0F"
+          stroke="none"
+        />
+      </svg>
+    </IconElement>
+  )
+}
+
+AiIcon.displayName = 'AiIcon'