npm - @cdc/markup-include - Versions diffs - 4.26.1 → 4.26.3 - Mend

@cdc/markup-include 4.26.1 → 4.26.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/LICENSE +201 -0
package/dist/cdcmarkupinclude.js +11506 -11344
package/examples/default.json +69 -0
package/index.html +1 -29
package/package.json +32 -35
package/src/CdcMarkupInclude.tsx +73 -110
package/src/_stories/MarkupInclude.Editor.stories.tsx +11 -16
package/src/cdcMarkupInclude.style.css +15 -11
package/src/components/EditorPanel/EditorPanel.styles.css +1 -1
package/src/components/EditorPanel/EditorPanel.tsx +60 -4
package/src/data/initial-state.js +4 -2
package/src/scss/main.scss +17 -13
package/src/test/CdcMarkupInclude.test.jsx +2 -2

package/examples/default.json ADDED Viewed

@@ -0,0 +1,69 @@
+{
+  "contentEditor": {
+    "inlineHTML": "<div>The age adjusted rate for {{race}} was 644.2, compared to Non-Hispanic American Indian, which was {{ageAdjustedRate}}.</div>",
+    "markupVariables": [
+      {
+        "name": "race",
+        "tag": "{{race}}",
+        "columnName": "Race",
+        "conditions": [
+          {
+            "columnName": "Age-adjusted rate",
+            "isOrIsNotEqualTo": "is",
+            "value": "644.2"
+          }
+        ]
+      },
+      {
+        "name": "ageAdjustedRate",
+        "tag": "{{ageAdjustedRate}}",
+        "columnName": "Age-adjusted rate",
+        "conditions": [
+          {
+            "columnName": "Race",
+            "isOrIsNotEqualTo": "is",
+            "value": "Non-Hispanic American Indian"
+          }
+        ]
+      }
+    ],
+    "showHeader": false,
+    "srcUrl": "https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Markup-Include-Button-and-Text.html",
+    "title": "",
+    "useInlineHTML": false
+  },
+  "data": [
+    {
+      "Race": "Hispanic or Latino",
+      "Age-adjusted rate": "644.2"
+    },
+    {
+      "Race": "Non-Hispanic American Indian",
+      "Age-adjusted rate": "636.1"
+    },
+    {
+      "Race": "Non-Hispanic Black",
+      "Age-adjusted rate": "563.7"
+    },
+    {
+      "Race": "Non-Hispanic Asian or Pacific Islander",
+      "Age-adjusted rate": "202.5"
+    },
+    {
+      "Race": "Non-Hispanic White",
+      "Age-adjusted rate": "183.6"
+    }
+  ],
+  "legend": {},
+  "newViz": true,
+  "theme": "theme-amber",
+  "type": "markup-include",
+  "runtime": null,
+  "visual": {
+    "border": false,
+    "accent": true,
+    "background": true,
+    "hideBackgroundColor": false,
+    "borderColorTheme": false
+  }
+}

package/index.html CHANGED Viewed

@@ -1,29 +1 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-    <style type="text/css">
-      body {
-        margin: 0;
-        border-top: none !important;
-      }
-      /* Add 1rem padding to mimic DFE when editor is not visible */
-      .cdc-open-viz-module:not(.isEditor) {
-        padding: 1rem;
-      }
-    </style>
-    <link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/5.0/css/app.min.css?_=71669" />
-  </head>
-  <body>
-    <!-- Original -->
-    <!-- DATA PRESENTATION GALLERY: https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/Markup-Include.html#examples -->
-    <!-- <div class="react-container" data-config="/src/_stories/_mock/icon-no-text.json"></div> -->
-    <!-- <div class="react-container" data-config="/src/_stories/_mock/image-with-text.json"></div> -->
-    <div class="react-container" data-config="/src/_stories/_mock/button-and-text.json"></div>
-    <script type="module" src="./src/index.tsx"></script>
-  </body>
-</html>
+<!-- index.html is generated by @cdc/core/generateViteConfig.js using the files in @cdc/core/devTemplate/ -->

package/package.json CHANGED Viewed

@@ -1,49 +1,46 @@
 {
   "name": "@cdc/markup-include",
-  "version": "4.26.1",
+  "version": "4.26.3",
   "description": "React component for displaying HTML content from an outside link",
-  "moduleName": "CdcMarkupInclude",
-  "main": "dist/cdcmarkupinclude",
-  "type": "module",
-  "scripts": {
-    "start": "vite --open",
-    "build": "vite build",
-    "preview": "vite preview",
-    "graph": "nx graph",
-    "prepublishOnly": "lerna run --scope @cdc/markup-include build",
-    "test": "vitest run --reporter verbose",
-    "test-watch": "vitest watch --reporter verbose",
-    "test-watch:ui": "vitest --ui"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/CDCgov/cdc-open-viz",
-    "directory": "packages/markup-include"
-  },
-  "author": "Rob Shelnutt <rob@blackairplane.com>",
-  "bugs": {
-    "url": "https://github.com/CDCgov/cdc-open-viz/issues"
-  },
   "license": "Apache-2.0",
-  "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
+  "author": "Rob Shelnutt <rob@blackairplane.com>",
+  "bugs": "https://github.com/CDCgov/cdc-open-viz/issues",
   "dependencies": {
-    "@cdc/core": "^4.26.1",
-    "axios": "^1.9.0",
-    "chroma": "0.0.1",
-    "interweave": "^13.1.1",
-    "lodash": "^4.17.21",
+    "@cdc/core": "^4.26.3",
+    "axios": "^1.13.2",
+    "dompurify": "^3.3.1",
+    "lodash": "^4.17.23",
     "react-accessible-accordion": "^5.0.1"
   },
-  "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
   "devDependencies": {
     "@rollup/plugin-dsv": "^3.0.2",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react": "^5.1.2",
     "sass": "^1.89.2",
     "vite-plugin-css-injected-by-js": "^2.4.0",
     "vite-plugin-svgr": "^4.2.0"
   },
-  "gitHead": "7e3b27098c4eb7a24bc9c3654ad53f88d6419f16"
+  "gitHead": "d50e45a074fbefa56cac904917e707d57f237737",
+  "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
+  "main": "dist/cdcmarkupinclude",
+  "moduleName": "CdcMarkupInclude",
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/CDCgov/cdc-open-viz",
+    "directory": "packages/markup-include"
+  },
+  "scripts": {
+    "build": "vite build",
+    "graph": "nx graph",
+    "prepublishOnly": "lerna run --scope @cdc/markup-include build",
+    "preview": "vite preview",
+    "start": "vite --open",
+    "test": "vitest run --reporter verbose",
+    "test-watch": "vitest watch --reporter verbose",
+    "test-watch:ui": "vitest --ui"
+  },
+  "type": "module"
 }

package/src/CdcMarkupInclude.tsx CHANGED Viewed

@@ -1,7 +1,6 @@
 import { useEffect, useCallback, useRef, useReducer, useMemo } from 'react'
-import _ from 'lodash'
 // external
-import { Markup } from 'interweave'
+import DOMPurify from 'dompurify'
 import axios from 'axios'
 // cdc
@@ -11,6 +10,7 @@ import { processMarkupVariables } from '@cdc/core/helpers/markupProcessor'
 import { addValuesToFilters } from '@cdc/core/helpers/addValuesToFilters'
 import ConfigContext from './ConfigContext'
 import coveUpdateWorker from '@cdc/core/helpers/coveUpdateWorker'
+import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
 import EditorPanel from '../src/components/EditorPanel'
 import defaults from './data/initial-state'
@@ -19,7 +19,7 @@ import Loading from '@cdc/core/components/Loading'
 import Filters from '@cdc/core/components/Filters'
 import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
 import markupIncludeReducer from './store/markupInclude.reducer'
-import Layout from '@cdc/core/components/Layout'
+import { VisualizationContainer, VisualizationContent } from '@cdc/core/components/Layout'
 // styles
 import './cdcMarkupInclude.style.css'
 import './scss/main.scss'
@@ -79,10 +79,6 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
   const { inlineHTML, srcUrl, title, useInlineHTML } = contentEditor || {}
-  const shouldApplyTopPadding =
-    visual?.border || visual?.background || (contentEditor?.title && contentEditor?.titleStyle === 'legacy')
-  const shouldApplySidePadding = visual?.border || visual?.accent || visual?.background
   // Default Functions
   const updateConfig = newConfig => {
     Object.keys(defaults).forEach(key => {
@@ -112,8 +108,9 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
     let responseData = response.data ?? {}
     if (response.dataUrl) {
-      const dataString = await fetch(response.dataUrl)
-      responseData = await dataString.json()
+      const { data, dataMetadata } = await fetchRemoteData(response.dataUrl)
+      responseData = data
+      response.dataMetadata = dataMetadata
     }
     response.data = responseData
@@ -124,7 +121,7 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
       processedConfig.filters = addValuesToFilters(processedConfig.filters, responseData)
     }
-    updateConfig({ ...configObj, ...processedConfig })
+    updateConfig({ ...defaults, ...processedConfig })
     dispatch({ type: 'SET_LOADING', payload: false })
   }
@@ -203,63 +200,29 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
   }
   /**
-   * Transforms HTML by extracting <style> tags and applying their CSS rules as inline styles.
-   * This ensures that the CSS is applied only to this COVE visualization.
+   * Extracts <style> tags from HTML and scopes them using CSS nesting under the given scope ID.
    */
-  const applyStyleTagsAsInlineStyles = (html: string): string => {
-    if (!html || typeof html !== 'string') return html
+  const extractAndScopeStyles = (html: string, scopeId: string): { scopedCSS: string; cleanHTML: string } => {
+    if (!html || typeof html !== 'string') return { scopedCSS: '', cleanHTML: html }
-    // Use DOMParser to parse HTML
     const parser = new DOMParser()
     const doc = parser.parseFromString(html, 'text/html')
-    // Extract all <style> elements
     const styleElements = doc.querySelectorAll('style')
-    if (styleElements.length === 0) return html
-    // Parse CSS rules
-    const sheet = new CSSStyleSheet()
-    const cssRules: Array<{ selector: string; styles: string }> = []
+    if (styleElements.length === 0) return { scopedCSS: '', cleanHTML: html }
+    const cssFragments: string[] = []
     styleElements.forEach(styleEl => {
-      try {
-        // replaceSync parses the CSS and throws if invalid
-        sheet.replaceSync(styleEl.textContent || '')
-        // Extract parsed rules from the stylesheet
-        for (let i = 0; i < sheet.cssRules.length; i++) {
-          const rule = sheet.cssRules[i]
-          if (rule instanceof CSSStyleRule) {
-            cssRules.push({
-              selector: rule.selectorText,
-              styles: rule.style.cssText
-            })
-          }
-        }
-      } catch (e) {
-        console.warn('Markup Include: Invalid CSS in style tag', e)
+      const text = styleEl.textContent?.trim()
+      if (text) {
+        cssFragments.push(text)
       }
       styleEl.remove()
     })
-    // Apply each CSS rule to matching elements
-    for (const rule of cssRules) {
-      try {
-        const elements = doc.body.querySelectorAll(rule.selector)
-        elements.forEach(el => {
-          const existingStyle = el.getAttribute('style') || ''
-          const newStyle = existingStyle ? `${existingStyle}; ${rule.styles}` : rule.styles
-          el.setAttribute('style', newStyle)
-        })
-      } catch (e) {
-        // Skip invalid selectors (e.g., pseudo-selectors like :hover won't match)
-        console.warn(`Markup Include: Could not apply CSS rule for selector "${rule.selector}"`, e)
-      }
-    }
+    const scopedCSS = cssFragments.length > 0 ? `#${scopeId} {\n${cssFragments.join('\n')}\n}` : ''
-    return doc.body.innerHTML
+    return { scopedCSS, cleanHTML: doc.body.innerHTML }
   }
   //Load initial config
@@ -289,69 +252,69 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
         allowHideSection,
         filters: config?.filters || [],
         datasets,
-        configDataKey: config?.dataKey
+        configDataKey: config?.dataKey,
+        locale: config?.locale,
+        dataMetadata: config?.dataMetadata
       })
     : { processedContent: parseBodyMarkup(urlMarkup), shouldHideSection: false, shouldShowNoDataMessage: false }
-  const markup = applyStyleTagsAsInlineStyles(processedMarkup.processedContent)
+  const scopeId = `cove-mi-${config?.runtime?.uniqueId || 'default'}`
+  const { scopedCSS, cleanHTML } = extractAndScopeStyles(processedMarkup.processedContent, scopeId)
+  const sanitizedHTML = cleanHTML ? DOMPurify.sanitize(cleanHTML) : ''
   const hideMarkupInclude = processedMarkup.shouldHideSection
   const _showNoDataMessage = processedMarkup.shouldShowNoDataMessage
   if (loading === false) {
-    content = (
-      <>
-        {isEditor && <EditorPanel datasets={datasets} />}
-        {!hideMarkupInclude && (
-          <Layout.Responsive isEditor={isEditor}>
-            <div className='markup-include-content-container cove-component__content no-borders'>
-              <Title
-                title={title}
-                isDashboard={isDashboard}
-                titleStyle={contentEditor.titleStyle}
-                config={config}
-                classes={[`${theme}`, 'mb-0']}
-                noContent={!markup}
-              />
-              <div className={`markup-include-component ${contentClasses.join(' ')}`}>
-                <div className={`${innerContainerClasses.join(' ')}`}>
-                  {/* Filters */}
-                  {config.filters && config.filters.length > 0 && (
-                    <Filters
-                      config={config}
-                      setFilters={setFilters}
-                      excludedData={data || []}
-                      dimensions={[0, 0]}
-                      interactionLabel={interactionLabel || 'markup-include'}
-                    />
-                  )}
-                  <div
-                    className={`cove-component__content-wrap${shouldApplyTopPadding ? ' has-top-padding' : ''}${
-                      shouldApplySidePadding ? ' has-side-padding' : ''
-                    }`}
-                  >
-                    {_showNoDataMessage && (
-                      <div className='no-data-message'>
-                        <p>{`${noDataMessageText}`}</p>
-                      </div>
-                    )}
-                    {!markupError && !_showNoDataMessage && <Markup allowElements={!!urlMarkup} content={markup} />}
-                    {markupError && srcUrl && !_showNoDataMessage && <div className='warning'>{errorMessage}</div>}
-                  </div>
-                </div>
-              </div>
-              <FootnotesStandAlone
-                config={configObj?.footnotes}
-                filters={config?.filters || []}
-                markupVariables={markupVariables}
-                enableMarkupVariables={config?.enableMarkupVariables}
-                data={data}
-              />
-            </div>
-          </Layout.Responsive>
+    content = !hideMarkupInclude && (
+      <VisualizationContent
+        innerClassName={`markup-include-content-container ${innerContainerClasses.join(' ')}`.trim()}
+        bodyClassName={`markup-include-component ${contentClasses.join(' ')}`.trim()}
+        message={
+          config.filters && config.filters.length > 0 ? (
+            <Filters
+              config={config}
+              setFilters={setFilters}
+              excludedData={data || []}
+              dimensions={[0, 0]}
+              interactionLabel={interactionLabel || 'markup-include'}
+            />
+          ) : null
+        }
+        header={
+          <Title
+            title={title}
+            isDashboard={isDashboard}
+            titleStyle={contentEditor?.titleStyle}
+            config={config}
+            classes={[`${theme}`, 'mb-0']}
+            noContent={!sanitizedHTML}
+          />
+        }
+        footer={
+          <FootnotesStandAlone
+            config={configObj?.footnotes}
+            filters={config?.filters || []}
+            markupVariables={markupVariables}
+            enableMarkupVariables={config?.enableMarkupVariables}
+            data={data}
+            dataMetadata={config?.dataMetadata}
+          />
+        }
+      >
+        {_showNoDataMessage && (
+          <div className='no-data-message'>
+            <p>{`${noDataMessageText}`}</p>
+          </div>
+        )}
+        {!markupError && !_showNoDataMessage && (
+          <div id={scopeId}>
+            {scopedCSS && <style>{scopedCSS}</style>}
+            <div dangerouslySetInnerHTML={{ __html: sanitizedHTML }} />
+          </div>
         )}
-      </>
+        {markupError && srcUrl && !_showNoDataMessage && <div className='warning'>{errorMessage}</div>}
+      </VisualizationContent>
     )
   }
@@ -370,9 +333,9 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
     <ErrorBoundary component='CdcMarkupInclude'>
       <ConfigContext.Provider value={{ config, updateConfig, loading, data: data, setParentConfig, isDashboard }}>
         {!config?.newViz && config?.runtime && config?.runtime.editorErrorMessage && <Error />}
-        <Layout.VisualizationWrapper config={config} isEditor={isEditor} showEditorPanel={config?.showEditorPanel}>
+        <VisualizationContainer config={config} isEditor={isEditor} editorPanel={<EditorPanel datasets={datasets} />}>
           {content}
-        </Layout.VisualizationWrapper>
+        </VisualizationContainer>
       </ConfigContext.Provider>
     </ErrorBoundary>
   )

package/src/_stories/MarkupInclude.Editor.stories.tsx CHANGED Viewed

@@ -138,7 +138,7 @@ export const GeneralSectionTests: Story = {
       'Title Update',
       () => {
         const modernTitle = canvasElement.querySelector('.cove-title')
-        const legacyTitle = canvasElement.querySelector('.cove-component__header h2')
+        const legacyTitle = canvasElement.querySelector('.cove-visualization__header h2')
         const titleElement = modernTitle || legacyTitle
         return titleElement?.textContent?.trim() || ''
       },
@@ -150,7 +150,7 @@ export const GeneralSectionTests: Story = {
     )
     const modernHeader = canvasElement.querySelector('.cove-title')
-    const legacyHeader = canvasElement.querySelector('.cove-component__header h2')
+    const legacyHeader = canvasElement.querySelector('.cove-visualization__header h2')
     const headerElement = modernHeader || legacyHeader
     expect(headerElement).toBeTruthy()
     expect(headerElement!.textContent?.trim()).toBe('Updated Markup Include Title E2E')
@@ -226,7 +226,7 @@ export const ContentEditorTests: Story = {
     await performAndAssert(
       'HTML Content Update',
       () => {
-        const contentElement = canvasElement.querySelector('.cove-component__content')
+        const contentElement = canvasElement.querySelector('.cove-visualization__body')
         return contentElement?.innerHTML || ''
       },
       async () => {
@@ -255,7 +255,7 @@ export const ContentEditorTests: Story = {
       'Source URL Update and Content Loading',
       () => ({
         inputValue: srcUrlInput.value,
-        contentText: canvasElement.querySelector('.cove-component__content')?.textContent || ''
+        contentText: canvasElement.querySelector('.cove-visualization__body')?.textContent || ''
       }),
       async () => {
         await userEvent.clear(srcUrlInput)
@@ -296,7 +296,7 @@ export const VisualSectionTests: Story = {
     await waitForEditor(canvas)
     await openAccordion(canvas, 'Visual')
-    const contentContainer = () => canvasElement.querySelector('.cove-component__content') as HTMLElement
+    const contentContainer = () => canvasElement.querySelector('.cove-visualization__body') as HTMLElement
     const visualContainer = () => canvasElement.querySelector('.markup-include-component') as HTMLElement
     expect(contentContainer()).toBeTruthy()
     expect(visualContainer()).toBeTruthy()
@@ -306,21 +306,16 @@ export const VisualSectionTests: Story = {
     // Expectation: Theme class changes on component
     // ============================================================================
     const getThemeState = () => {
-      // Use the contentContainer like other tests, and check its parent for theme classes
       const content = contentContainer()
       if (!content) return { theme: '', classes: '', element: 'content not found' }
-      // Check content itself and its parent for theme classes
+      // Theme is applied to the outer cove-visualization wrapper — traverse up to find it
+      const themeWrapper = content.closest('[class*="theme-"]') as HTMLElement
+      const theme = themeWrapper ? Array.from(themeWrapper.classList).find(cls => cls.startsWith('theme-')) || '' : ''
       const contentClasses = Array.from(content.classList).join(' ')
       const parentClasses = content.parentElement ? Array.from(content.parentElement.classList).join(' ') : ''
-      const contentTheme = Array.from(content.classList).find(cls => cls.startsWith('theme-')) || ''
-      const parentTheme = content.parentElement
-        ? Array.from(content.parentElement.classList).find(cls => cls.startsWith('theme-')) || ''
-        : ''
-      const theme = contentTheme || parentTheme || ''
       return {
         theme,
         classes: contentClasses + ' | parent: ' + parentClasses,
@@ -380,7 +375,7 @@ export const VisualSectionTests: Story = {
       'Border Color Theme Toggle',
       () => ({
         checked: borderColorThemeCheckbox.checked,
-        hasBorderColorTheme: visualContainer().classList.contains('component--has-borderColorTheme')
+        hasBorderColorTheme: visualContainer().classList.contains('component--has-border-color-theme')
       }),
       async () => {
         const checkboxWrapper =
@@ -455,7 +450,7 @@ export const VisualSectionTests: Story = {
       'Hide Background Color Toggle',
       () => ({
         checked: hideBackgroundCheckbox.checked,
-        hideBackground: visualContainer().classList.contains('component--hideBackgroundColor')
+        hideBackground: visualContainer().classList.contains('component--hide-background-color')
       }),
       async () => {
         const checkboxWrapper = hideBackgroundCheckbox.closest('.cove-input__checkbox--small') || hideBackgroundCheckbox

package/src/cdcMarkupInclude.style.css CHANGED Viewed

@@ -1,39 +1,43 @@
-.cdc-open-viz-module.markup-include {
+.cove-visualization.markup-include {
   .spacing-wrapper {
     background-color: var(--lightGray) !important;
   }
   .cove-tooltip-variable {
     display: none;
   }
-  .markup-include-content-container.cove-component__content {
-    .markup-include-component.cove-component__content:not(.component--hideBackgroundColor, .component--has-background) {
+  c .markup-include-content-container.cove-visualization__inner {
+    .markup-include-component.cove-visualization__body:not(.component--hide-background-color, .component--has-background) {
       background-color: white;
     }
   }
 }
-.cdc-open-viz-module.markup-include.isEditor {
+.cove-visualization.markup-include.is-editor {
   .cove-tooltip-variable {
-    position: relative;
-    display: inline;
     background: var(--orange-tertiary);
+    display: inline;
+    position: relative;
     .cove-tooltip-value {
-      display: none;
-      position: absolute;
       background: var(--white);
       border: 1px solid black;
+      display: none;
       font-size: 16px;
+      max-width: 500px;
       padding: 10px;
+      position: absolute;
       width: 100vw;
-      max-width: 500px;
       z-index: 9999;
     }
-    &:hover > .cove-tooltip-value {
+    &:hover>.cove-tooltip-value {
       display: block;
     }
   }
   .cove-markup-include-variable-value {
     display: none !important;
   }
-}
+}

package/src/components/EditorPanel/EditorPanel.styles.css CHANGED Viewed

@@ -1,4 +1,4 @@
-.cdc-open-viz-module.markup-include {
+.cove-visualization.markup-include {
   .need-data-source-prompt {
     color: var(--gray);
     font-size: 0.8rem;