@cdc/core 4.25.3 → 4.25.5-1

package/components/Filters/components/Dropdown.tsx

@@ -0,0 +1,39 @@
+import { VizFilter } from '../../../types/VizFilter'
+
+export const DROPDOWN_STYLES = 'py-2 ps-2 w-100 d-block'
+
+type DropdownProps = {
+  index: number
+  label: string
+  filter: VizFilter
+  changeFilterActive: (index: number, value: string) => void
+}
+
+const Dropdown: React.FC<DropdownProps> = ({ index: outerIndex, label, filter, changeFilterActive }) => {
+  const { active, queuedActive } = filter
+
+  return (
+    <select
+      id={`filter-${outerIndex}`}
+      name={label}
+      aria-label={`Filter by ${label}`}
+      className={`cove-form-select ${DROPDOWN_STYLES}`}
+      style={{ backgroundColor: 'white !important' }}
+      data-index='0'
+      value={queuedActive || active}
+      onChange={e => {
+        changeFilterActive(outerIndex, e.target.value)
+      }}
+    >
+      {filter.values?.map((value, index) => {
+        return (
+          <option key={index} value={value} aria-label={value}>
+            {filter.labels && filter.labels[value] ? filter.labels[value] : value}
+          </option>
+        )
+      })}
+    </select>
+  )
+}
+
+export default Dropdown

package/components/Filters/components/Tabs.tsx

@@ -0,0 +1,82 @@
+import { useEffect, useId, useState } from 'react'
+import { VizFilter } from '../../../types/VizFilter'
+
+type TabsProps = {
+  filter: VizFilter
+  index: number
+  changeFilterActive: Function
+  theme: string
+}
+
+const Tabs: React.FC<TabsProps> = ({ filter, index: outerIndex, changeFilterActive, theme }) => {
+  const [selectedFilter, setSelectedFilter] = useState<EventTarget>(null)
+
+  const id = useId()
+
+  useEffect(() => {
+    if (selectedFilter) {
+      const el = document.getElementById(selectedFilter.id)
+      if (el) el.focus()
+    }
+  }, [selectedFilter])
+
+  const getClassList = value => {
+    const isActive = filter.active === value
+    let classList = []
+    switch (filter.filterStyle) {
+      case 'tab bar':
+        classList = ['button__tab-bar', isActive && 'button__tab-bar--active']
+        break
+      case 'pill':
+        classList = ['pill', isActive && 'pill--active', theme && theme]
+        break
+      default:
+        const tabSimple = filter.filterStyle === 'tab-simple' && 'tab--simple'
+        classList = ['tab', isActive && 'tab--active', theme && theme, tabSimple]
+        break
+    }
+    return classList.filter(Boolean).join(' ')
+  }
+
+  const Tabs = filter.values.map((value, index) => {
+    return (
+      <button
+        id={`${value}-${outerIndex}-${index}-${id}`}
+        className={getClassList(value)}
+        onClick={e => {
+          changeFilterActive(outerIndex, value)
+          setSelectedFilter(e.target)
+        }}
+        onKeyDown={e => {
+          if (e.keyCode === 13) {
+            changeFilterActive(outerIndex, value)
+            setSelectedFilter(e.target)
+          }
+        }}
+      >
+        {value}
+      </button>
+    )
+  })
+
+  switch (filter.filterStyle) {
+    case 'tab bar':
+      return <section className='single-filters__tab-bar'>{Tabs}</section>
+    case 'tab-simple':
+      return <div className='tab-simple-container d-flex w-100'>{Tabs}</div>
+    case 'pill':
+      return (
+        <>
+          {Tabs.map((Tab, index) => (
+            <div className='pill__wrapper' key={`pill-${index}`}>
+              {Tab}
+            </div>
+          ))}
+        </>
+      )
+    default:
+      return <>{Tabs}</>
+  }
+}
+
+export default Tabs

package/components/Filters/helpers/getChangedFilters.ts

@@ -0,0 +1,31 @@
+import _ from 'lodash'
+import { getQueryParams, updateQueryString } from '../../../helpers/queryStringUtils'
+
+export const getChangedFilters = (filters, index, value, filterBehavior) => {
+  const newFilters = _.cloneDeep(filters)
+  const newFilter = newFilters[index]
+  if (filterBehavior === 'Apply Button') {
+    newFilter.queuedActive = value
+  } else {
+    if (newFilter.filterStyle !== 'nested-dropdown') {
+      newFilter.active = value
+    } else {
+      newFilter.active = value[0]
+      newFilter.subGrouping.active = value[1]
+    }
+
+    const queryParams = getQueryParams()
+    if (newFilter.setByQueryParameter && queryParams[newFilter.setByQueryParameter] !== newFilter.active) {
+      queryParams[newFilter.setByQueryParameter] = newFilter.active
+      updateQueryString(queryParams)
+    }
+    if (
+      newFilter?.subGrouping?.setByQueryParameter &&
+      queryParams[newFilter?.subGrouping?.setByQueryParameter] !== newFilter?.subGrouping.active
+    ) {
+      queryParams[newFilter?.subGrouping?.setByQueryParameter] = newFilter.subGrouping.active
+      updateQueryString(queryParams)
+    }
+  }
+  return newFilters
+}

package/components/Filters/helpers/getNestedOptions.ts

@@ -12,7 +12,7 @@ export const getNestedOptions = ({ orderedValues, values, subGrouping }: GetOpti
   const filteredValues = orderedValues?.length
     ? orderedValues.filter(orderedValue => values.includes(orderedValue))
     : values
-  const v: NestedOptions = filteredValues.map<[ValueTextPair, ValueTextPair[]]>(value => {
+  const options: NestedOptions = filteredValues.map<[ValueTextPair, ValueTextPair[]]>(value => {
     if (!subGrouping) return [[value], []]
     const { orderedValues, values: filteredSubValues } = subGrouping.valuesLookup[value]
     // keep custom subFilter order
@@ -25,5 +25,5 @@ export const getNestedOptions = ({ orderedValues, values, subGrouping }: GetOpti
     return structuredNestedDropdownData
   })
 
-  return v
+  return options
 }

package/components/Filters/helpers/getNewRuntime.ts

@@ -0,0 +1,35 @@
+import _ from 'lodash'
+
+export const getNewRuntime = (visualizationConfig, newFilteredData) => {
+  const runtime = _.cloneDeep(visualizationConfig.runtime) || {}
+  runtime.series = []
+  runtime.seriesLabels = {}
+  runtime.seriesLabelsAll = []
+  const { filters, columns, dynamicSeriesType, dynamicSeriesLineType, xAxis } = visualizationConfig
+  if (newFilteredData?.length) {
+    const columnNames = Object.keys(newFilteredData[0])
+    columnNames.forEach(colName => {
+      const isNotXAxis = xAxis.dataKey !== colName
+      const isNotFiltered = !filters || !filters?.find(filter => filter.columnName === colName)
+      const noColConfiguration = !columns || Object.keys(columns).indexOf(colName) === -1
+      if (isNotXAxis && isNotFiltered && noColConfiguration) {
+        runtime.series.push({
+          dataKey: colName,
+          type: dynamicSeriesType,
+          lineType: dynamicSeriesLineType,
+          tooltip: true
+        })
+      }
+    })
+  }
+
+  runtime.seriesKeys = runtime.series
+    ? runtime.series.map(series => {
+        runtime.seriesLabels[series.dataKey] = series.name || series.label || series.dataKey
+        runtime.seriesLabelsAll.push(series.name || series.dataKey)
+        return series.dataKey
+      })
+    : []
+
+  return runtime
+}

package/components/Filters/helpers/handleSorting.ts

@@ -17,8 +17,8 @@ export const handleSorting = singleFilter => {
     return String(asc ? a : b).localeCompare(String(asc ? b : a), 'en', { numeric: true })
   }
 
-  singleFilter.values = singleFilterValues.sort(sort)
-  singleFilter.orderedValues = singleFilterValues.sort(sort)
+  singleFilter.values = singleFilterValues?.sort(sort)
+  singleFilter.orderedValues = singleFilterValues?.sort(sort)
 
   return singleFilter
 }

package/components/Filters/helpers/tests/getChangedFilters.test.ts

@@ -0,0 +1,92 @@
+import { describe, it, expect, vi, type Mock } from 'vitest'
+import { getChangedFilters } from '../getChangedFilters'
+import { getQueryParams, updateQueryString } from '../../../../helpers/queryStringUtils'
+import _ from 'lodash'
+
+vi.mock('../../../../helpers/queryStringUtils', () => ({
+  getQueryParams: vi.fn(),
+  updateQueryString: vi.fn()
+}))
+
+describe('getChangedFilters', () => {
+  it('should update queuedActive when filterBehavior is "Apply Button"', () => {
+    const filters = [{ queuedActive: false }]
+    const index = 0
+    const value = true
+    const filterBehavior = 'Apply Button'
+
+    const result = getChangedFilters(filters, index, value, filterBehavior)
+
+    expect(result[index].queuedActive).toBe(true)
+  })
+
+  it('should update active for non-nested-dropdown filters', () => {
+    const filters = [{ filterStyle: 'dropdown', active: false }]
+    const index = 0
+    const value = true
+    const filterBehavior = 'Immediate'
+
+    const result = getChangedFilters(filters, index, value, filterBehavior)
+
+    expect(result[index].active).toBe(true)
+  })
+
+  it('should update active and subGrouping.active for nested-dropdown filters', () => {
+    const filters = [
+      {
+        filterStyle: 'nested-dropdown',
+        active: null,
+        subGrouping: { active: null }
+      }
+    ]
+    const index = 0
+    const value = ['parentValue', 'childValue']
+    const filterBehavior = 'Immediate'
+
+    const result = getChangedFilters(filters, index, value, filterBehavior)
+
+    expect(result[index].active).toBe('parentValue')
+    expect(result[index].subGrouping.active).toBe('childValue')
+  })
+
+  it('should update query parameters when setByQueryParameter is defined', () => {
+    const filters = [
+      {
+        filterStyle: 'dropdown',
+        active: false,
+        setByQueryParameter: 'filterParam'
+      }
+    ]
+    const index = 0
+    const value = true
+    const filterBehavior = 'Immediate'
+
+    ;(getQueryParams as Mock).mockReturnValue({ filterParam: false })
+
+    getChangedFilters(filters, index, value, filterBehavior)
+
+    expect(updateQueryString).toHaveBeenCalledWith({ filterParam: true })
+  })
+
+  it('should update query parameters for subGrouping when setByQueryParameter is defined', () => {
+    const filters = [
+      {
+        filterStyle: 'nested-dropdown',
+        active: null,
+        subGrouping: {
+          active: null,
+          setByQueryParameter: 'subFilterParam'
+        }
+      }
+    ]
+    const index = 0
+    const value = ['parentValue', 'childValue']
+    const filterBehavior = 'Immediate'
+
+    ;(getQueryParams as Mock).mockReturnValue({ subFilterParam: null })
+
+    getChangedFilters(filters, index, value, filterBehavior)
+
+    expect(updateQueryString).toHaveBeenCalledWith({ subFilterParam: 'childValue' })
+  })
+})

package/components/Filters/helpers/tests/getNestedOptions.test.ts

@@ -90,4 +90,35 @@ describe('getNestedOptions', () => {
     ]
     expect(getNestedOptions(params)).toEqual(expectedOutput)
   })
+
+  it('should return an empty array when values is an empty array', () => {
+    const params = {
+      values: [],
+      subGrouping: null
+    }
+    const expectedOutput: NestedOptions = []
+    expect(getNestedOptions(params)).toEqual(expectedOutput)
+  })
+
+  it('should handle values with a single element', () => {
+    const params = {
+      values: ['value1'],
+      subGrouping: null
+    }
+    const expectedOutput: NestedOptions = [[['value1'], []]]
+    expect(getNestedOptions(params)).toEqual(expectedOutput)
+  })
+
+  it('should handle values with multiple elements', () => {
+    const params = {
+      values: ['value1', 'value2', 'value3'],
+      subGrouping: null
+    }
+    const expectedOutput: NestedOptions = [
+      [['value1'], []],
+      [['value2'], []],
+      [['value3'], []]
+    ]
+    expect(getNestedOptions(params)).toEqual(expectedOutput)
+  })
 })

package/components/Filters/helpers/tests/getNewRuntime.test.ts

@@ -0,0 +1,82 @@
+import { describe, it, expect } from 'vitest'
+import { getNewRuntime } from '../getNewRuntime'
+
+describe('getNewRuntime', () => {
+  it('should return a runtime object with default values when no data is provided', () => {
+    const visualizationConfig = { runtime: {} }
+    const newFilteredData = null
+
+    const result = getNewRuntime(visualizationConfig, newFilteredData)
+
+    expect(result.series).toEqual([])
+    expect(result.seriesLabels).toEqual({})
+    expect(result.seriesLabelsAll).toEqual([])
+    expect(result.seriesKeys).toEqual([])
+  })
+
+  it('should populate runtime.series with valid series from newFilteredData', () => {
+    const visualizationConfig = {
+      runtime: {},
+      filters: [],
+      columns: {},
+      dynamicSeriesType: 'bar',
+      dynamicSeriesLineType: 'solid',
+      xAxis: { dataKey: 'x' }
+    }
+    const newFilteredData = [
+      { x: 1, y: 10, z: 20 },
+      { x: 2, y: 15, z: 25 }
+    ]
+
+    const result = getNewRuntime(visualizationConfig, newFilteredData)
+
+    expect(result.series).toEqual([
+      { dataKey: 'y', type: 'bar', lineType: 'solid', tooltip: true },
+      { dataKey: 'z', type: 'bar', lineType: 'solid', tooltip: true }
+    ])
+    expect(result.seriesKeys).toEqual(['y', 'z'])
+    expect(result.seriesLabels).toEqual({ y: 'y', z: 'z' })
+    expect(result.seriesLabelsAll).toEqual(['y', 'z'])
+  })
+
+  it('should exclude series keys that match filters or columns', () => {
+    const visualizationConfig = {
+      runtime: {},
+      filters: [{ columnName: 'y' }],
+      columns: { z: {} },
+      dynamicSeriesType: 'bar',
+      dynamicSeriesLineType: 'solid',
+      xAxis: { dataKey: 'x' }
+    }
+    const newFilteredData = [
+      { x: 1, y: 10, z: 20, w: 30 },
+      { x: 2, y: 15, z: 25, w: 35 }
+    ]
+
+    const result = getNewRuntime(visualizationConfig, newFilteredData)
+
+    expect(result.series).toEqual([{ dataKey: 'w', type: 'bar', lineType: 'solid', tooltip: true }])
+    expect(result.seriesKeys).toEqual(['w'])
+    expect(result.seriesLabels).toEqual({ w: 'w' })
+    expect(result.seriesLabelsAll).toEqual(['w'])
+  })
+
+  it('should handle empty newFilteredData gracefully', () => {
+    const visualizationConfig = {
+      runtime: {},
+      filters: [],
+      columns: {},
+      dynamicSeriesType: 'bar',
+      dynamicSeriesLineType: 'solid',
+      xAxis: { dataKey: 'x' }
+    }
+    const newFilteredData = []
+
+    const result = getNewRuntime(visualizationConfig, newFilteredData)
+
+    expect(result.series).toEqual([])
+    expect(result.seriesKeys).toEqual([])
+    expect(result.seriesLabels).toEqual({})
+    expect(result.seriesLabelsAll).toEqual([])
+  })
+})

package/components/Filters/index.ts

@@ -1,5 +1,5 @@
 export { default } from './Filters'
 
-export { filterOrderOptions, filterStyleOptions, useFilters } from './Filters'
+export { filterStyleOptions } from './Filters'
 
 export { handleSorting } from './helpers/handleSorting'

package/components/Layout/components/Visualization/index.tsx

@@ -6,17 +6,18 @@ import './visualizations.scss'
 import { Config as WaffleChartConfig } from '@cdc/waffle-chart/src/types/Config'
 import { MarkupIncludeConfig } from '@cdc/core/types/MarkupInclude'
 import { DashboardFilters } from '@cdc/dashboard/src/types/DashboardFilters'
+import { MapConfig } from '@cdc/map/src/types/MapConfig'
 
 type VisualizationWrapper = {
   children: React.ReactNode
-  config: ChartConfig | DataBiteConfig | WaffleChartConfig | MarkupIncludeConfig | DashboardFilters
+  config: ChartConfig | DataBiteConfig | WaffleChartConfig | MarkupIncludeConfig | DashboardFilters | MapConfig
   currentViewport?: string
   imageId?: string
   isEditor: boolean
   showEditorPanel?: boolean
 }
 
-const Visualization: React.FC<VisualizationWrapper> = forwardRef((props, ref) => {
+const Visualization = forwardRef<HTMLDivElement, VisualizationWrapper>((props, ref) => {
   const {
     config = {},
     isEditor = false,
@@ -93,7 +94,6 @@ const Visualization: React.FC<VisualizationWrapper> = forwardRef((props, ref) =>
   }
 
   return (
-    // prettier-ignore
     <div
       {...(config.type === 'chart' ? { 'data-lollipop': config.isLollipopChart } : {})}
       className={getWrappingClasses().join(' ')}

package/components/Legend/Legend.Gradient.tsx

@@ -4,9 +4,11 @@ import { type MapConfig } from '@cdc/map/src/types/MapConfig'
 import { type ChartConfig } from '@cdc/chart/src/types/ChartConfig'
 import { getTextWidth } from '../../helpers/getTextWidth'
 import { DimensionsType } from '../../types/Dimensions'
+import useLegendSeparators from '@cdc/map/src/hooks/useLegendSeparators'
 
 const MARGIN = 1
 const BORDER_SIZE = 1
+const BORDER_COLOR = '#d3d3d3'
 const MOBILE_BREAKPOINT = 576
 
 type CombinedConfig = MapConfig | ChartConfig
@@ -27,7 +29,7 @@ const LegendGradient = ({
   parentPaddingToSubtract = 0
 }: GradientProps): JSX.Element => {
   const { uid, legend, type } = config
-  const { tickRotation, position, style, subStyle, hideBorder } = legend
+  const { tickRotation, position, style, subStyle, separators } = legend
 
   const isLinearBlocks = subStyle === 'linear blocks'
   let [width] = dimensions
@@ -36,6 +38,10 @@ const LegendGradient = ({
   const legendWidth = Number(width) - parentPaddingToSubtract - MARGIN * 2 - BORDER_SIZE * 2
   const uniqueID = `${uid}-${Date.now()}`
 
+  // Legend separators logic
+  const { legendSeparators, separatorSize, legendSeparatorsToSubtract, getTickSeparatorsAdjustment } =
+    useLegendSeparators(separators, legendWidth, isLinearBlocks)
+
   const numTicks = colors?.length
 
   const longestLabel = (labels || []).reduce((a: string, b) => (a.length > String(b).length ? a : b), '')
@@ -57,8 +63,8 @@ const LegendGradient = ({
 
   // render ticks and labels
   const ticks = labels.map((key, index) => {
-    const segmentWidth = legendWidth / numTicks
-    const xPositionX = index * segmentWidth + segmentWidth + MARGIN
+    const segmentWidth = (legendWidth - legendSeparatorsToSubtract) / numTicks
+    const xPositionX = index * segmentWidth + segmentWidth + MARGIN + getTickSeparatorsAdjustment(index)
     const textAnchor = rotationAngle ? 'end' : 'middle'
     const verticalAnchor = rotationAngle ? 'middle' : 'start'
     const lastTick = index === labels.length - 1
@@ -94,7 +100,7 @@ const LegendGradient = ({
     return (
       <svg className={'w-100 overflow-visible'} height={newHeight}>
         {/* background border*/}
-        <rect x={0} y={0} width={legendWidth + MARGIN * 2} height={boxHeight + MARGIN * 2} fill='#d3d3d3' />
+        <rect x={0} y={0} width={legendWidth + MARGIN * 2} height={boxHeight + MARGIN * 2} fill={BORDER_COLOR} />
         {/* Define the gradient */}
         <linearGradient id={`gradient-smooth-${uniqueID}`} x1='0%' y1='0%' x2='100%' y2='0%'>
           {stops}
@@ -110,25 +116,62 @@ const LegendGradient = ({
           />
         )}
 
-        {subStyle === 'linear blocks' &&
-          colors.map((color, index) => {
-            const segmentWidth = legendWidth / numTicks
-            const xPosition = index * segmentWidth + MARGIN
-            return (
-              <Group>
-                <rect
-                  key={index}
-                  x={xPosition}
-                  y={MARGIN}
-                  width={segmentWidth}
-                  height={boxHeight}
-                  fill={color}
-                  stroke='white'
-                  strokeWidth='0'
-                />
-              </Group>
-            )
-          })}
+        {subStyle === 'linear blocks' && (
+          <>
+            {colors.map((color, index) => {
+              const segmentWidth = (legendWidth - legendSeparatorsToSubtract) / numTicks
+              const xPosition = index * segmentWidth + MARGIN + getTickSeparatorsAdjustment(index)
+              return (
+                <Group>
+                  <rect
+                    key={index}
+                    x={xPosition}
+                    y={MARGIN}
+                    width={segmentWidth}
+                    height={boxHeight}
+                    fill={color}
+                    stroke='white'
+                    strokeWidth='0'
+                  />
+                </Group>
+              )
+            })}
+            {/* Legend separators */}
+            {legendSeparators.map((separatorAfter, index) => {
+              const segmentWidth = (legendWidth - legendSeparatorsToSubtract) / numTicks
+              const xPosition = separatorAfter * segmentWidth + MARGIN + getTickSeparatorsAdjustment(separatorAfter - 1)
+              return (
+                <Group>
+                  {/* Separators block */}
+                  <rect
+                    key={index}
+                    x={xPosition}
+                    y={MARGIN / 2}
+                    width={separatorSize}
+                    height={boxHeight + MARGIN}
+                    fill={'white'}
+                    stroke={'white'}
+                    strokeWidth={MARGIN}
+                  />
+
+                  {/* Dotted dividing line */}
+                  <line
+                    key={index}
+                    x1={xPosition + separatorSize / 2}
+                    x2={xPosition + separatorSize / 2}
+                    y1={-3}
+                    y2={boxHeight + MARGIN + 3}
+                    stroke={'var(--colors-gray-cool-40'}
+                    strokeWidth={1}
+                    strokeDasharray='5,3'
+                    strokeDashoffset={1}
+                  />
+                </Group>
+              )
+            })}
+          </>
+        )}
+
         {/* Ticks and labels */}
         <g>{ticks}</g>
       </svg>

package/components/MultiSelect/multiselect.styles.css

@@ -5,6 +5,7 @@
   .wrapper {
     display: inline-flex;
     align-items: center;
+    width: 100%;
     .selected {
       &[aria-disabled='true'] {
         background: var(--lightestGray);
@@ -12,6 +13,7 @@
       border: 1px solid var(--lightGray);
       padding: 7px;
       min-width: 200px;
+      width: 100%;
       display: inline-block;
       :is(button) {
         border: none;

package/components/NestedDropdown/NestedDropdown.tsx

@@ -260,7 +260,7 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
         onKeyUp={handleKeyUp}
       >
         <div
-          className={`nested-dropdown-input-container${loading || !options.length ? ' disabled' : ''}`}
+          className={`nested-dropdown-input-container${loading || !options?.length ? ' disabled' : ''}`}
           aria-label='searchInput'
           aria-disabled={loading}
           role='textbox'
@@ -276,7 +276,7 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
             value={userSearchTerm !== null ? userSearchTerm : inputValue}
             onChange={handleSearchTermChange}
             placeholder={loading ? 'Loading...' : '- Select -'}
-            disabled={loading || !options.length}
+            disabled={loading || !options?.length}
             onClick={() => {
               if (inputHasFocus) setIsListOpened(!isListOpened)
             }}

package/components/RichTooltip/RichTooltip.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { Tooltip as ReactTooltip } from 'react-tooltip'
+import './richTooltip.css'
+
+const RichTooltip = ({ linkText, href = null, tooltipOpacity = 100, tooltipContent }) => {
+  return (
+    <>
+      <a
+        className='tooltip-link'
+        data-tooltip-content={tooltipContent}
+        data-tooltip-id='supression-tooltip'
+        href={href}
+      >
+        {linkText}
+      </a>
+
+      <ReactTooltip
+        id='supression-tooltip'
+        place='top'
+        effect='solid'
+        variant='light'
+        style={{
+          background: `rgba(255, 255, 255, ${tooltipOpacity})`,
+          color: 'var(--cool-gray-90)',
+          padding: '9px 18px',
+          boxShadow: '0px 2px 2px rgba(28, 29, 31, 0.45)',
+          maxWidth: '239px',
+          fontSize: 'var(--filter-label-font-size)',
+          fontFamily: 'var(--app-font-main)',
+          borderRadius: '4px'
+        }}
+      />
+    </>
+  )
+}
+
+export default RichTooltip