@cdc/dashboard 4.26.2 → 4.26.3

package/src/_stories/_mock/tab-simple-filter.json

@@ -0,0 +1,153 @@
+{
+  "dashboard": {
+    "theme": "theme-blue",
+    "sharedFilters": [
+      {
+        "key": "category",
+        "showDropdown": true,
+        "filterStyle": "tab-simple",
+        "values": ["Category A", "Category B", "Category C"],
+        "orderedValues": ["Category A", "Category B", "Category C"],
+        "type": "datafilter",
+        "columnName": "category",
+        "tier": 1,
+        "order": "cust",
+        "defaultValue": "Category A"
+      }
+    ]
+  },
+  "rows": [
+    {
+      "columns": [
+        {
+          "width": 12,
+          "widget": "dashboardFilters1"
+        }
+      ]
+    },
+    {
+      "columns": [
+        {
+          "width": 12,
+          "widget": "chart1"
+        }
+      ]
+    }
+  ],
+  "visualizations": {
+    "dashboardFilters1": {
+      "filters": [],
+      "filterBehavior": "Filter Change",
+      "newViz": true,
+      "uid": "dashboardFilters1",
+      "type": "dashboardFilters",
+      "sharedFilterIndexes": [0],
+      "visualizationType": "dashboardFilters"
+    },
+    "chart1": {
+      "filters": [],
+      "filterBehavior": "Filter Change",
+      "uid": "chart1",
+      "type": "chart",
+      "visualizationType": "Bar",
+      "title": "Sales by Category",
+      "showTitle": true,
+      "theme": "theme-blue",
+      "animate": false,
+      "dataKey": "./tab-simple-data.json",
+      "dataDescription": {
+        "horizontal": false,
+        "series": false
+      },
+      "xAxis": {
+        "dataKey": "product",
+        "type": "categorical",
+        "hideAxis": false,
+        "hideLabel": false,
+        "hideTicks": false,
+        "size": 75,
+        "tickRotation": 0,
+        "labelColor": "#1c1d1f",
+        "tickLabelColor": "#1c1d1f",
+        "tickColor": "#1c1d1f",
+        "axisPadding": 200,
+        "padding": 5,
+        "sortDates": false,
+        "anchors": []
+      },
+      "yAxis": {
+        "hideAxis": false,
+        "hideLabel": false,
+        "hideTicks": false,
+        "size": 50,
+        "gridLines": false,
+        "labelColor": "#1c1d1f",
+        "tickLabelColor": "#1c1d1f",
+        "tickColor": "#1c1d1f",
+        "anchors": [],
+        "categories": []
+      },
+      "series": [
+        {
+          "dataKey": "sales",
+          "type": "Bar",
+          "axis": "Left",
+          "tooltip": true
+        }
+      ],
+      "orientation": "vertical",
+      "general": {
+        "showZeroValueData": true,
+        "palette": {
+          "name": "qualitative_bold",
+          "version": "1.0"
+        }
+      },
+      "columns": {},
+      "legend": {
+        "hide": true
+      },
+      "table": {
+        "label": "Data Table",
+        "show": false,
+        "sharedFilterColumns": ["category"]
+      },
+      "heights": {
+        "vertical": 300,
+        "horizontal": 750
+      },
+      "visual": {
+        "border": true,
+        "accent": true,
+        "background": true
+      },
+      "tooltips": {
+        "opacity": 90,
+        "singleSeries": false
+      },
+      "barThickness": 0.35
+    }
+  },
+  "datasets": {
+    "./tab-simple-data.json": {
+      "data": [
+        { "category": "Category A", "product": "Widget", "sales": "120" },
+        { "category": "Category A", "product": "Gadget", "sales": "85" },
+        { "category": "Category A", "product": "Doohickey", "sales": "210" },
+        { "category": "Category B", "product": "Widget", "sales": "95" },
+        { "category": "Category B", "product": "Gadget", "sales": "150" },
+        { "category": "Category B", "product": "Doohickey", "sales": "60" },
+        { "category": "Category C", "product": "Widget", "sales": "175" },
+        { "category": "Category C", "product": "Gadget", "sales": "110" },
+        { "category": "Category C", "product": "Doohickey", "sales": "140" }
+      ],
+      "dataFileSize": 500,
+      "dataFileName": "./tab-simple-data.json",
+      "dataFileSourceType": "file",
+      "dataFileFormat": "JSON",
+      "preview": true
+    }
+  },
+  "type": "dashboard",
+  "version": "4.26.1"
+}

package/src/components/DashboardFilters/DashboardFilters.tsx

@@ -11,6 +11,7 @@ import { MouseEventHandler } from 'react'
 import Loader from '@cdc/core/components/Loader'
 import _ from 'lodash'
 import { DROPDOWN_STYLES } from '@cdc/core/components/Filters/components/Dropdown'
+import Tabs from '@cdc/core/components/Filters/components/Tabs'
 
 type DashboardFilterProps = {
   show: number[]
@@ -63,7 +64,12 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
         const urlFilterType = filter.type === 'urlfilter'
         const label = stripDuplicateLabelIncrement(filter.key || '')
 
-        if (!urlFilterType && !filter.showDropdown && filter.filterStyle !== FILTER_STYLE.nestedDropdown)
+        if (
+          !urlFilterType &&
+          !filter.showDropdown &&
+          filter.filterStyle !== FILTER_STYLE.nestedDropdown &&
+          filter.filterStyle !== FILTER_STYLE.tabSimple
+        )
           return <React.Fragment key={`${filter.key}-filtersection-${filterIndex}-option`} />
         const values: JSX.Element[] = []
 
@@ -125,7 +131,10 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
           )
         }
 
-        const formGroupClass = `form-group me-4 mb-1${loading ? ' loading-filter' : ''}`
+        const isTabSimple = filter.filterStyle === FILTER_STYLE.tabSimple
+        const formGroupClass = `form-group${isTabSimple ? '' : ' me-4'} mb-1${loading ? ' loading-filter' : ''}${
+          isTabSimple ? ' w-100' : ''
+        }`
         return (
           <div className={formGroupClass} key={`${filter.key}-filtersection-${filterIndex}`}>
             {label && (
@@ -133,7 +142,14 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
                 {label}
               </label>
             )}
-            {filter.filterStyle === FILTER_STYLE.multiSelect ? (
+            {filter.filterStyle === FILTER_STYLE.tabSimple ? (
+              <Tabs
+                filter={filter}
+                index={filterIndex}
+                changeFilterActive={(index, value) => handleOnChange(index, value)}
+                loading={loading}
+              />
+            ) : filter.filterStyle === FILTER_STYLE.multiSelect ? (
               <MultiSelect
                 label={label}
                 options={multiValues}

package/src/components/DashboardFilters/DashboardFiltersEditor/DashboardFiltersEditor.tsx

@@ -12,7 +12,7 @@ import Icon from '@cdc/core/components/ui/Icon'
 import FieldSetWrapper from '@cdc/core/components/EditorPanel/FieldSetWrapper'
 import FilterEditor from './components/FilterEditor'
 import { DashboardContext, DashboardDispatchContext } from '../../../DashboardContext'
-import _ from 'lodash'
+import cloneDeep from 'lodash/cloneDeep'
 import { DashboardFilters } from '../../../types/DashboardFilters'
 import { SharedFilter } from '../../../types/SharedFilter'
 import { useGlobalContext } from '@cdc/core/components/GlobalContext'
@@ -55,7 +55,7 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
   const [isNestedDragHovered, setIsNestedDragHovered] = useState(false)
 
   const updateFilterProp = (prop: string, index: number, value) => {
-    const newSharedFilters = _.cloneDeep(sharedFilters)
+    const newSharedFilters = cloneDeep(sharedFilters)
     const {
       apiEndpoint: oldEndpoint,
       valueSelector: oldValueSelector,
@@ -102,6 +102,9 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
       // changing a api filter and want to load the api data into the preview.
       // automatically dispatches SET_SHARED_FILTERS
       loadAPIFilters(newSharedFilters, {})
+    } else if (prop === 'defaultValue') {
+      newSharedFilters[index].active = value
+      dispatch({ type: 'SET_SHARED_FILTERS', payload: newSharedFilters })
     } else {
       handleSorting(newSharedFilters[index])
       dispatch({ type: 'SET_SHARED_FILTERS', payload: newSharedFilters })
@@ -109,7 +112,7 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
   }
 
   const toggleNestedQueryParameters = (index, checked: boolean) => {
-    const newSharedFilters = _.cloneDeep(sharedFilters)
+    const newSharedFilters = cloneDeep(sharedFilters)
     const filter = newSharedFilters[index]
     const isUrlFilter = filter.type === 'urlfilter'
     const groupColumnName = isUrlFilter ? filter.apiFilter.valueSelector : filter.columnName
@@ -149,7 +152,7 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
   }
 
   const addNewFilter = () => {
-    const _sharedFilters = _.cloneDeep(sharedFilters) || []
+    const _sharedFilters = cloneDeep(sharedFilters) || []
     const columnName = 'New Dashboard Filter ' + (_sharedFilters.length + 1)
     const newFilter = { key: columnName, showDropdown: true, values: [] } as SharedFilter
     dispatch({ type: 'SET_SHARED_FILTERS', payload: [..._sharedFilters, newFilter] })

package/src/components/DashboardFilters/DashboardFiltersEditor/components/APIModal.tsx

@@ -16,7 +16,7 @@ const APIModal: React.FC<APIModalProps> = ({ filter, isNestedDropdown, updateAPI
   const [APISubGroupValueSelector, setAPISubGroupValueSelector] = useState(filter.apiFilter?.subgroupValueSelector)
   const [APISubGroupTextSelector, setAPISubGroupTextSelector] = useState(filter.apiFilter?.subgroupTextSelector)
   return (
-    <fieldset className='mb-1 px-3 cdc-open-viz-module'>
+    <fieldset className='mb-1 px-3 cove-visualization'>
       <label className='d-block'>
         <span>API Endpoint: </span>
         <textarea

package/src/components/DashboardFilters/DashboardFiltersEditor/components/FilterEditor.tsx

@@ -1,4 +1,3 @@
-import _ from 'lodash'
 import { getVizRowColumnLocator } from '../../../../helpers/getVizRowColumnLocator'
 import { Select, TextField } from '@cdc/core/components/EditorPanel/Inputs'
 import DataTransform from '@cdc/core/helpers/DataTransform'
@@ -105,7 +104,7 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
       let _dataSet = config.datasets[dataKey]
       if (!_dataSet.data && _dataSet.dataUrl) {
         setDataFiltersLoading(true)
-        let data = await fetchRemoteData(_dataSet.dataUrl)
+        let data = (await fetchRemoteData(_dataSet.dataUrl)).data
         if (_dataSet.dataDescription && data && data.length > 0) {
           try {
             data = transform.autoStandardize(data)

package/src/components/DashboardFilters/DashboardFiltersEditor/components/NestedDropDownDashboard.tsx

@@ -1,6 +1,7 @@
 import { DashboardConfig } from '../../../../types/DashboardConfig'
 import { SharedFilter } from '../../../../types/SharedFilter'
-import _ from 'lodash'
+import cloneDeep from 'lodash/cloneDeep'
+import uniq from 'lodash/uniq'
 import { SubGrouping, OrderBy } from '@cdc/core/types/VizFilter'
 import { TextField, Select } from '@cdc/core/components/EditorPanel/Inputs'
 import { handleSorting } from '@cdc/core/components/Filters/helpers/handleSorting'
@@ -72,7 +73,7 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
     const order = subGrouping?.order || 'asc'
 
     const valuesLookup = filter.values.reduce((acc, groupName) => {
-      const rawValues: string[] = _.uniq(
+      const rawValues: string[] = uniq(
         config.datasets[selectedOptionDatasetName].data
           .map(d => {
             return d[filter.columnName] === groupName ? d[newColumnName] : ''
@@ -104,7 +105,7 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
   // Handle group order change (asc/desc/cust)
   const handleGroupingOrderBy = (order: OrderBy) => {
     const groupSortObject = {
-      values: _.cloneDeep(filter.values),
+      values: cloneDeep(filter.values),
       order
     }
     const { values: newOrderedValues } = handleSorting(groupSortObject)
@@ -128,7 +129,7 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
   const handleGroupingCustomOrder = (sourceIndex: number, destinationIndex: number) => {
     if (sourceIndex === undefined || destinationIndex === undefined || sourceIndex === destinationIndex) return
 
-    const orderedValues = _.cloneDeep(filter.orderedValues || filter.values)
+    const orderedValues = cloneDeep(filter.orderedValues || filter.values)
     const [movedItem] = orderedValues.splice(sourceIndex, 1)
     orderedValues.splice(destinationIndex, 0, movedItem)
 
@@ -143,7 +144,7 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
   const handleSubGroupingOrderBy = (order: OrderBy) => {
     const newValuesLookup = Object.keys(subGrouping.valuesLookup).reduce((acc, groupName) => {
       const subGroup = subGrouping.valuesLookup[groupName]
-      const { values: sortedValues } = handleSorting({ values: _.cloneDeep(subGroup.values), order })
+      const { values: sortedValues } = handleSorting({ values: cloneDeep(subGroup.values), order })
 
       acc[groupName] = {
         values: sortedValues,
@@ -170,11 +171,11 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
   ) => {
     if (sourceIndex === undefined || destinationIndex === undefined || sourceIndex === destinationIndex) return
 
-    const updatedGroupOrderedValues = _.cloneDeep(currentOrderedValues)
+    const updatedGroupOrderedValues = cloneDeep(currentOrderedValues)
     const [movedItem] = updatedGroupOrderedValues.splice(sourceIndex, 1)
     updatedGroupOrderedValues.splice(destinationIndex, 0, movedItem)
 
-    const newSubGrouping = _.cloneDeep(subGrouping)
+    const newSubGrouping = cloneDeep(subGrouping)
     newSubGrouping.valuesLookup[groupName].values = updatedGroupOrderedValues
     newSubGrouping.valuesLookup[groupName].orderedValues = updatedGroupOrderedValues
     newSubGrouping.order = 'cust'

package/src/components/DashboardFilters/DashboardFiltersWrapper.tsx

@@ -7,7 +7,7 @@ import { FilterBehavior } from '../../helpers/FilterBehavior'
 import { getFilteredData } from '../../helpers/getFilteredData'
 import { DashboardFilters } from '../../types/DashboardFilters'
 import { getQueryParams, updateQueryString } from '@cdc/core/helpers/queryStringUtils'
-import Layout from '@cdc/core/components/Layout'
+import { VisualizationWrapper, Sidebar, Responsive } from '@cdc/core/components/Layout'
 import DashboardFiltersEditor from './DashboardFiltersEditor'
 import { ViewPort } from '@cdc/core/types/ViewPort'
 import { hasDashboardApplyBehavior } from '../../helpers/hasDashboardApplyBehavior'
@@ -302,24 +302,24 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
   const displayNone = filters?.length ? filters.every(filter => filter.showDropdown === false) : false
   if (displayNone && !isEditor) return <></>
   return (
-    <Layout.VisualizationWrapper config={visualizationConfig} isEditor={isEditor} currentViewport={currentViewport}>
+    <VisualizationWrapper config={visualizationConfig} isEditor={isEditor} currentViewport={currentViewport}>
       {isEditor && (
-        <Layout.Sidebar
+        <Sidebar
           displayPanel={displayPanel}
           isDashboard={true}
           title={'Configure Dashboard Filters'}
           onBackClick={onBackClick}
         >
           <DashboardFiltersEditor updateConfig={updateConfig} vizConfig={visualizationConfig} />
-        </Layout.Sidebar>
+        </Sidebar>
       )}
 
       {!displayNone && (
-        <Layout.Responsive isEditor={isEditor}>
+        <Responsive isEditor={isEditor}>
           <div
             className={`${
               isEditor ? ' is-editor' : ''
-            } cove-component__content col-12 cove-dashboard-filters-container`}
+            } cove-visualization__inner cove-visualization__body col-12 cove-dashboard-filters-container`}
           >
             <Filters
               show={visualizationConfig?.sharedFilterIndexes?.map(Number)}
@@ -337,9 +337,9 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
               }
             />
           </div>
-        </Layout.Responsive>
+        </Responsive>
       )}
-    </Layout.VisualizationWrapper>
+    </VisualizationWrapper>
   )
 }
 

package/src/components/DashboardFilters/_stories/DashboardFilters.stories.tsx

@@ -7,7 +7,7 @@ const meta: Meta<typeof DashboardFilters> = {
   component: DashboardFilters,
   decorators: [
     Story => (
-      <div className='cdc-open-viz-module type-dashboard'>
+      <div className='cove-visualization type-dashboard'>
         <Story />
       </div>
     )

package/src/components/DashboardFilters/dashboardfilter.styles.css

@@ -4,18 +4,18 @@
     font-weight: 700;
   }
   .btn {
+    align-self: flex-end;
     /* this is the height that is defined for the .form-control class in _forms.scss in bootstrap. */
     height: calc(1.5em + 0.75rem + 2px);
-    align-self: flex-end;
   }
   .loading-filter {
     position: relative;
     .spinner-border {
+      height: 1.5rem;
       position: absolute;
-      top: 55%;
       right: 10%;
+      top: 55%;
       width: 1.5rem;
-      height: 1.5rem;
     }
   }
   :is(select):disabled {

package/src/components/DataDesignerModal.tsx

@@ -59,8 +59,8 @@ export const DataDesignerModal: React.FC<DataDesignerModalProps> = ({ vizKey, ro
     if (dataSetChanged || noCachedData) {
       setLoadingAPIData(true)
       try {
-        newData = await fetchRemoteData(dataUrl)
-        newData = transform.autoStandardize(newData)
+        const result = await fetchRemoteData(dataUrl)
+        newData = transform.autoStandardize(result.data)
       } catch (e) {
         setErrorMessage('There was an issue loading the data source. Please check the datasource URL and try again.')
       }

package/src/components/Header/Header.tsx

@@ -176,7 +176,6 @@ const Header = (props: HeaderProps) => {
                     Show Data Table(s)
                   </label>
                   <br />
-
                   <label>
                     <input
                       type='checkbox'
@@ -185,7 +184,6 @@ const Header = (props: HeaderProps) => {
                     />
                     Expanded by Default
                   </label>
-                  <br />
                 </div>
 
                 <div className='wrap'>
@@ -206,9 +204,6 @@ const Header = (props: HeaderProps) => {
                       onChange={e => changeConfigValue('table', 'height', e.target.value)}
                     />
                   )}
-                </div>
-
-                <div className='wrap'>
                   <label>
                     <input
                       type='checkbox'
@@ -217,6 +212,17 @@ const Header = (props: HeaderProps) => {
                     />
                     Show Download CSV Link
                   </label>
+                  {config.table.download && (
+                    <input
+                      type='text'
+                      placeholder='Customize label'
+                      defaultValue={config.table.downloadDataLabel}
+                      onChange={e => changeConfigValue('table', 'downloadDataLabel', e.target.value)}
+                    />
+                  )}
+                </div>
+
+                <div className='wrap'>
                   <label>
                     <input
                       type='checkbox'
@@ -225,6 +231,22 @@ const Header = (props: HeaderProps) => {
                     />
                     Show URL to Automatically Updated Data
                   </label>
+                  <label>
+                    <input
+                      type='checkbox'
+                      defaultChecked={config.table.downloadImageButton}
+                      onChange={e => changeConfigValue('table', 'downloadImageButton', e.target.checked)}
+                    />
+                    Show Download Image Button
+                  </label>
+                  {config.table.downloadImageButton && (
+                    <input
+                      type='text'
+                      placeholder='Customize label'
+                      defaultValue={config.table.downloadImageLabel}
+                      onChange={e => changeConfigValue('table', 'downloadImageLabel', e.target.value)}
+                    />
+                  )}
                 </div>
               </>
             )}

package/src/components/Header/index.scss

@@ -1,4 +1,4 @@
-.cdc-open-viz-module .shared-filter-modal,
+.cove-visualization .shared-filter-modal,
 .cove .shared-filter-modal,
 .shared-filter-modal {
   &__title {

package/src/components/MultiConfigTabs/multiconfigtabs.styles.css

@@ -1,17 +1,17 @@
 .multi-config-tabs {
   .nav-link {
+    border-color: var(--lightGray);
     border-radius: 6px 6px 0 0;
-    font-weight: 400;
+    color: var(--primary);
     display: block;
+    font-weight: 400;
     padding: 0.5rem 1rem;
     @media (max-width: 480px) {
       padding: 0.5rem 0.8rem;
     }
-    color: var(--primary);
-    border-color: var(--lightGray);
     :is(button) {
-      display: none;
       background: none;
+      display: none;
     }
     &:hover {
       :is(button) {
@@ -31,9 +31,9 @@
       font-weight: bold;
     }
     .btn-danger {
-      text-decoration: none;
-      padding: 0px 5px;
       font-size: inherit;
+      padding: 0px 5px;
+      text-decoration: none;
     }
   }
   .add {

package/src/components/Row.tsx

@@ -70,6 +70,12 @@ const RowMenu: React.FC<RowMenuProps> = ({ rowIdx }) => {
     updateConfig({ ...config, rows: newRows })
   }
 
+  const toggleEqualHeight = () => {
+    const newRows = _.cloneDeep(rows)
+    newRows[rowIdx].equalHeight = !newRows[rowIdx].equalHeight
+    updateConfig({ ...config, rows: newRows })
+  }
+
   const moveRow = (dir = 'down') => {
     if (rowIdx === rows.length - 1 && dir === 'down') return
 
@@ -179,9 +185,24 @@ const RowMenu: React.FC<RowMenuProps> = ({ rowIdx }) => {
     </li>
   ]
 
+  const isMultiColumn = curr !== '12' && curr !== 'toggle'
+
   return (
     <nav className='row-menu'>
       <ul className='row-menu__flyout'>{layoutList}</ul>
+      {isMultiColumn && (
+        <button
+          className={`btn row-menu__btn border-0${row.equalHeight ? ' btn-primary' : ''}`}
+          title={row.equalHeight ? 'Disable Equal Height Rows' : 'Enable Equal Height Rows'}
+          onClick={toggleEqualHeight}
+        >
+          <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='25' height='20' fill='#fff'>
+            <rect x='1' y='2' width='9' height='14' rx='1' />
+            <rect x='14' y='2' width='9' height='14' rx='1' />
+            <line x1='0' y1='19' x2='24' y2='19' stroke='#fff' strokeWidth='2' strokeDasharray='3 2' />
+          </svg>
+        </button>
+      )}
       <div className='spacer'></div>
       <button
         className={`btn btn-primary row-menu__btn border-0`}

package/src/components/Toggle/toggle-style.css

@@ -1,10 +1,10 @@
-.cdc-open-viz-module {
+.cove-visualization {
   --border: 1px solid var(--lightGray);
   .toggle-component {
     display: flex;
     justify-content: right;
-    width: 100%;
     margin-bottom: 15px;
+    width: 100%;
     :first-child:is(div) {
       border: var(--border);
       border-radius: 5px 0 0 5px;
@@ -14,18 +14,18 @@
       border-radius: 0 5px 5px 0;
     }
     :is(div) {
-      border-top: var(--border);
+      background-color: var(--white);
       border-bottom: var(--border);
-      padding: 7px 15px;
+      border-top: var(--border);
+      color: var(--primary);
+      cursor: pointer;
       display: inline;
       float: right;
-      cursor: pointer;
+      padding: 7px 15px;
       &.selected {
         background-color: var(--primary);
         color: white;
       }
-      background-color: var(--white);
-      color: var(--primary);
       :is(svg) {
         height: 25px;
       }