@cdc/core 4.26.1 → 4.26.3

package/assets/callout-flag.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="481.000000pt" height="563.000000pt" viewBox="0 0 481.000000 563.000000" preserveAspectRatio="xMidYMid meet">
+  <g transform="translate(0.000000,563.000000) scale(0.100000,-0.100000)" fill="#2c7a99" stroke="none">
+    <path d="M890 5514 c-161 -43 -308 -201 -354 -381 -14 -55 -16 -314 -16 -2527 0 -2015 2 -2466 13 -2466 7 0 51 14 97 30 47 17 92 33 100 35 8 2 16 4 18 5 1 2 7 4 12 5 6 1 11 3 13 4 1 2 13 4 26 7 14 2 30 9 38 15 7 6 13 8 13 4 0 -4 7 -2 15 5 8 7 15 10 15 6 0 -3 17 1 38 10 49 21 856 293 905 305 21 5 45 13 55 19 9 5 40 16 67 24 28 8 162 52 299 99 l249 85 151 -53 c83 -29 253 -90 379 -134 264 -94 556 -198 974 -346 164 -58 308 -110 321 -115 13 -6 27 -10 33 -10 11 0 8 4951 -4 4994 -22 80 -84 183 -152 252 -75 76 -141 114 -233 133 -38 8 -477 11 -1535 10 -1268 0 -1490 -3 -1537 -15z m2687 -1570 c49 -31 82 -134 64 -201 -10 -37 -41 -64 -422 -369 -227 -181 -430 -341 -452 -356 -43 -30 -84 -35 -136 -17 -17 6 -156 107 -309 224 l-277 213 -40 -31 c-50 -39 -318 -259 -325 -267 -3 -3 -27 -24 -55 -45 -27 -22 -55 -44 -61 -50 -86 -77 -253 -202 -277 -207 -20 -4 -53 -1 -84 8 -69 19 -105 64 -111 140 -6 70 8 100 69 149 105 84 134 107 168 133 19 15 92 74 164 132 71 58 144 116 162 130 86 68 114 90 187 150 124 102 156 120 206 120 23 0 57 -7 75 -16 18 -9 145 -103 282 -209 283 -217 293 -224 303 -210 4 6 42 39 86 74 43 35 88 71 100 81 31 27 153 127 231 190 37 30 111 91 164 135 142 119 217 145 288 99z m-1431 -983 c60 -44 59 -29 62 -601 3 -596 4 -589 -70 -638 -76 -49 -171 -29 -228 50 l-30 41 0 526 c0 591 -3 569 75 623 35 25 48 28 100 25 44 -2 69 -9 91 -26z m1252 15 c37 -19 67 -55 81 -95 8 -25 10 -183 9 -555 -3 -579 -1 -555 -71 -603 -67 -45 -144 -35 -211 27 l-41 39 -3 543 -2 544 23 35 c46 68 149 99 215 65z m-610 -343 c71 -57 71 -57 71 -448 0 -322 -1 -353 -19 -392 -27 -60 -83 -95 -155 -95 -63 -1 -95 16 -132 72 -23 33 -23 36 -23 407 0 406 -1 401 57 455 34 32 54 38 116 34 35 -2 57 -11 85 -33z m-1313 -142 c54 -24 92 -71 100 -124 4 -23 5 -159 3 -302 -3 -293 -3 -293 -82 -343 -66 -41 -160 -30 -207 24 -34 40 -39 84 -39 361 0 303 3 322 61 366 53 39 105 45 164 18z"/>
+  </g>
+</svg>

package/assets/icon-chart-area.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free v6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M64 64c0-17.7-14.3-32-32-32S0 46.3 0 64L0 400c0 44.2 35.8 80 80 80l400 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 416c-8.8 0-16-7.2-16-16L64 64zm96 288l288 0c17.7 0 32-14.3 32-32l0-68.2c0-7.6-2.7-15-7.7-20.8l-65.8-76.8c-12.1-14.2-33.7-15-46.9-1.8l-21 21c-10 10-26.4 9.2-35.4-1.6l-39.2-47c-12.6-15.1-35.7-15.4-48.7-.6L135.9 215c-5.1 5.8-7.9 13.3-7.9 21.1l0 84c0 17.7 14.3 32 32 32z"/></svg>

package/assets/icon-chart-radar.svg

@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor">
+    <!-- Outer pentagon (grid) -->
+    <path d="M256 32l211.25 153.5L175 478.5H337l81.25-293L256 32zm0 0L44.75 185.5L175 478.5h162L175 478.5 44.75 185.5 256 32z" fill="none" stroke="currentColor" stroke-width="20" stroke-linejoin="round"/>
+    <!-- Middle pentagon (grid ring) -->
+    <path d="M256 112l126.75 92.1L207.5 375.3h97l48.75-171.2L256 112z" fill="none" stroke="currentColor" stroke-width="12" stroke-opacity="0.4" stroke-linejoin="round"/>
+    <path d="M256 112l-126.75 92.1L207.5 375.3h-97l-48.75-171.2L256 112z" fill="none" stroke="currentColor" stroke-width="12" stroke-opacity="0.4" stroke-linejoin="round"/>
+    <!-- Inner pentagon (grid ring) -->
+    <path d="M256 192l63.4 46L289 332.7h-66l-30-94.7L256 192z" fill="none" stroke="currentColor" stroke-width="8" stroke-opacity="0.3" stroke-linejoin="round"/>
+    <!-- Axis lines -->
+    <line x1="256" y1="256" x2="256" y2="32" stroke="currentColor" stroke-width="8" stroke-opacity="0.5"/>
+    <line x1="256" y1="256" x2="467.25" y2="185.5" stroke="currentColor" stroke-width="8" stroke-opacity="0.5"/>
+    <line x1="256" y1="256" x2="337" y2="478.5" stroke="currentColor" stroke-width="8" stroke-opacity="0.5"/>
+    <line x1="256" y1="256" x2="175" y2="478.5" stroke="currentColor" stroke-width="8" stroke-opacity="0.5"/>
+    <line x1="256" y1="256" x2="44.75" y2="185.5" stroke="currentColor" stroke-width="8" stroke-opacity="0.5"/>
+    <!-- Data polygon (filled) -->
+    <polygon points="256,80 400,200 350,420 162,420 112,200" fill="currentColor" fill-opacity="0.3" stroke="currentColor" stroke-width="16" stroke-linejoin="round"/>
+    <!-- Data points -->
+    <circle cx="256" cy="80" r="12" fill="currentColor"/>
+    <circle cx="400" cy="200" r="12" fill="currentColor"/>
+    <circle cx="350" cy="420" r="12" fill="currentColor"/>
+    <circle cx="162" cy="420" r="12" fill="currentColor"/>
+    <circle cx="112" cy="200" r="12" fill="currentColor"/>
+</svg>

package/assets/logo2.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.9.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="135 160 228 147" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#0055B8;}
+	.st1{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M141.22,300.14H186h151.44c10.88,0,19.84-8.27,20.91-18.87c0.07-0.71,0.11-1.42,0.11-2.15V165.04H188.93
+		h-26.68c-7.26,0-13.65,3.68-17.43,9.27c-0.76,1.12-1.41,2.31-1.94,3.57c-1.06,2.52-1.65,5.28-1.65,8.18V300.14z"/>
+	<path class="st1" d="M162.25,160.83c-13.91,0-25.23,11.32-25.23,25.23v118.28h31.62h6.95h161.85c13.91,0,25.23-11.32,25.23-25.23
+		V160.83H162.25z M326.53,239.21c-0.2-0.23-0.56-0.25-0.78-0.05c-1.32,1.19-5.84,4.76-12.61,4.88c-8.53,0.14-17.17-6.93-17.17-19.2
+		c0-12.27,8.92-19.21,17.27-19.21c6.2,0,10.2,2.92,11.41,3.95c0.23,0.19,0.57,0.17,0.77-0.06l7.57-8.41c0.18-0.2,0.2-0.51,0.02-0.72
+		c-1.24-1.49-6.57-6.89-18.51-6.89c-1.11,0-2.25,0.06-3.41,0.17l45.61-28.63h1.76v62.45l-31.15,12.59L326.53,239.21z M243.33,242.49
+		h-6.37c-0.31,0-0.56-0.25-0.56-0.56v-34.78c0-0.31,0.25-0.56,0.56-0.56h7.31c11.28,0,18.77,5.56,18.77,17.43
+		C263.04,237.79,255.72,242.49,243.33,242.49z M240.95,194.29h-17.32c-0.31,0-0.56,0.25-0.56,0.56v59.4c0,0.08,0.02,0.15,0.04,0.22
+		l-65.24,45.68h-6.1l40.05-44.48c2.03,0.34,4.03,0.51,5.93,0.51c11.85,0,18.13-6.24,19.55-7.87c0.19-0.21,0.19-0.53,0-0.74
+		l-7.52-8.36c-0.2-0.23-0.56-0.25-0.78-0.05c-1.32,1.19-5.84,4.76-12.61,4.88c-8.53,0.14-17.17-6.93-17.17-19.2
+		c0-12.27,8.92-19.21,17.27-19.21c6.2,0,10.2,2.92,11.41,3.95c0.23,0.19,0.57,0.17,0.77-0.06l7.57-8.41c0.18-0.2,0.2-0.51,0.02-0.72
+		c-1.24-1.49-6.57-6.89-18.51-6.89c-5.92,0-12.69,1.53-18.48,5.1l12.88-33.56h76.66L240.95,194.29z M142.88,177.88
+		c0.53-1.26,1.18-2.45,1.94-3.57c3.78-5.59,10.18-9.27,17.43-9.27h26.35l-14.39,37.49c-5.11,4.98-8.62,12.23-8.62,22.3
+		c0,0.05,0,0.1,0,0.15l-24.37,63.49V186.06C141.22,183.16,141.81,180.39,142.88,177.88z M141.22,297.77l25.1-65.41
+		c2.66,12.93,12.13,19.81,21.77,22.47l-40.8,45.31h-6.07V297.77z M163.69,300.14l64.76-45.34h16.43c18.03,0,32.01-10.51,32.01-30.08
+		c0-21.2-13.14-29.7-31.38-30.37l27.92-29.3h77.01l-49.53,31.09c-9.9,4-18.58,12.87-18.58,28.7c0,14.08,6.93,22.65,15.44,27.19
+		l-119.11,48.12H163.69z M358.35,281.27c-1.08,10.6-10.03,18.87-20.91,18.87h-149.9l114.43-46.23c4.21,1.55,8.58,2.26,12.53,2.26
+		c11.85,0,18.13-6.24,19.55-7.87c0.19-0.21,0.19-0.53,0-0.74l-4.37-4.85l28.78-11.63v48.03
+		C358.46,279.84,358.43,280.56,358.35,281.27z"/>
+</g>
+
+</svg>

package/components/AdvancedEditor/EmbedEditor.tsx

@@ -1,31 +1,55 @@
 import React, { useState, useEffect, useMemo } from 'react'
-import { generateEmbedCode } from '../../helpers/embedCodeGenerator'
+import {
+  generateEmbedCode,
+  extractFilters,
+  initializeFilterState,
+  buildFilterUrlParams,
+  type FilterMetadata,
+  type FilterState
+} from '../../helpers/embed'
+import '../../helpers/embed/embedHelper.js' // Initialize embed helper for iframe resizing
 
 type EmbedEditorProps = {
   config?: any // Current visualization config
 }
 
+type TabId = 'preview' | 'code'
+
 /**
  * EmbedEditor - Provides "Share with Partners" functionality
  * Generates embed codes for iframe embedding of visualizations
+ * Now includes filter customization, preview, and embed code generation
  */
 export const EmbedEditor: React.FC<EmbedEditorProps> = ({ config }) => {
   const [configUrl, setConfigUrl] = useState<string | null>(null)
   const [showEmbedModal, setShowEmbedModal] = useState(false)
-  const [embedCode, setEmbedCode] = useState('')
-  const [embedCodeCopied, setEmbedCodeCopied] = useState(false)
   const [isExpanded, setIsExpanded] = useState(false)
+  const [activeTab, setActiveTab] = useState<TabId>('preview')
+  const [embedCodeCopied, setEmbedCodeCopied] = useState(false)
+
+  // Extract filters from config
+  const filters = useMemo(() => extractFilters(config), [config])
+
+  // Initialize filter state
+  const [filterState, setFilterState] = useState<Record<string, FilterState>>({})
+
+  // Update filter state when filters change
+  useEffect(() => {
+    if (filters.length > 0) {
+      setFilterState(initializeFilterState(filters))
+    }
+  }, [filters])
 
   // Check if all filters have setByQueryParameter
   const filtersAreValid = useMemo(() => {
     if (!config) return true
 
     // Check regular filters
-    const filters = config.filters || []
+    const regularFilters = config.filters || []
     // Check dashboard shared filters
     const sharedFilters = config.dashboard?.sharedFilters || []
 
-    const allFilters = [...filters, ...sharedFilters]
+    const allFilters = [...regularFilters, ...sharedFilters]
 
     // If no filters, valid
     if (allFilters.length === 0) return true
@@ -34,6 +58,20 @@ export const EmbedEditor: React.FC<EmbedEditorProps> = ({ config }) => {
     return allFilters.every((filter: any) => !!filter.setByQueryParameter)
   }, [config])
 
+  // Determine if we have valid filters to show
+  const hasFilters = filters.length > 0 && filtersAreValid
+
+  // Generate embed code with current filter settings
+  const embedCode = useMemo(() => {
+    if (!configUrl) return ''
+
+    const urlParams = buildFilterUrlParams(filters, filterState)
+    return generateEmbedCode({
+      configUrl,
+      urlParams
+    })
+  }, [configUrl, filters, filterState])
+
   // Detect configUrl from WCMS permalink or use dev fallback
   useEffect(() => {
     // Try to get config URL from WCMS permalink element
@@ -74,12 +112,33 @@ export const EmbedEditor: React.FC<EmbedEditorProps> = ({ config }) => {
       return
     }
 
-    const code = generateEmbedCode({ configUrl })
-    setEmbedCode(code)
+    setActiveTab('preview')
     setShowEmbedModal(true)
     setEmbedCodeCopied(false)
   }
 
+  // Handle filter value change
+  const handleFilterChange = (filterKey: string, value: string) => {
+    setFilterState(prev => ({
+      ...prev,
+      [filterKey]: {
+        ...prev[filterKey],
+        value
+      }
+    }))
+  }
+
+  // Handle filter hide toggle
+  const handleHideToggle = (filterKey: string, hide: boolean) => {
+    setFilterState(prev => ({
+      ...prev,
+      [filterKey]: {
+        ...prev[filterKey],
+        hide
+      }
+    }))
+  }
+
   // Handle copying embed code from modal
   const handleCopyFromModal = async () => {
     try {
@@ -98,9 +157,6 @@ export const EmbedEditor: React.FC<EmbedEditorProps> = ({ config }) => {
     setEmbedCodeCopied(false)
   }
 
-  // Hide embed section until released
-  return null
-
   return (
     <>
       {/* Collapsible Share with Partners Section */}
@@ -155,8 +211,7 @@ export const EmbedEditor: React.FC<EmbedEditorProps> = ({ config }) => {
             ) : (
               <>
                 <p style={{ fontSize: '0.85em', marginBottom: '1em', color: '#666' }}>
-                  Generate embed codes for partners to add this visualization to their websites. Your visualization will
-                  need to be published to Link (www.cdc.gov) before it can be embedded by a partner.
+                  Generate embed codes for partners to add this visualization to their website.
                 </p>
 
                 <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5em' }}>
@@ -174,7 +229,7 @@ export const EmbedEditor: React.FC<EmbedEditorProps> = ({ config }) => {
         )}
       </div>
 
-      {/* Embed Code Modal */}
+      {/* Embed Code Modal with Tabs */}
       {showEmbedModal && (
         <div
           className='modal-overlay'
@@ -186,8 +241,9 @@ export const EmbedEditor: React.FC<EmbedEditorProps> = ({ config }) => {
             bottom: 0,
             backgroundColor: 'rgba(0, 0, 0, 0.5)',
             display: 'flex',
-            alignItems: 'center',
+            alignItems: 'flex-start',
             justifyContent: 'center',
+            paddingTop: '5vh',
             zIndex: 9999
           }}
           onClick={handleCloseModal}
@@ -198,12 +254,16 @@ export const EmbedEditor: React.FC<EmbedEditorProps> = ({ config }) => {
               backgroundColor: 'white',
               borderRadius: '8px',
               boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
-              maxWidth: '600px',
+              maxWidth: '800px',
               width: '90%',
-              margin: '20px'
+              maxHeight: '90vh',
+              margin: '20px',
+              display: 'flex',
+              flexDirection: 'column'
             }}
             onClick={e => e.stopPropagation()}
           >
+            {/* Modal Header */}
             <div
               className='modal-header'
               style={{
@@ -216,7 +276,7 @@ export const EmbedEditor: React.FC<EmbedEditorProps> = ({ config }) => {
                 borderRadius: '8px 8px 0 0'
               }}
             >
-              <h3 style={{ color: 'white', margin: 0 }}>Embed Code</h3>
+              <h3 style={{ color: 'white', margin: 0 }}>Share with Partners</h3>
               <button
                 onClick={handleCloseModal}
                 style={{
@@ -234,26 +294,196 @@ export const EmbedEditor: React.FC<EmbedEditorProps> = ({ config }) => {
               </button>
             </div>
 
-            <div className='modal-body' style={{ padding: '20px' }}>
-              <p style={{ marginBottom: '10px', color: '#666' }}>Copy this code and paste it into your website:</p>
-              <textarea
-                readOnly
-                value={embedCode}
-                style={{
-                  width: '100%',
-                  height: '180px',
-                  fontFamily: 'monospace',
-                  fontSize: '0.85em',
-                  padding: '10px',
-                  border: '1px solid #ddd',
-                  borderRadius: '4px',
-                  resize: 'vertical',
-                  boxSizing: 'border-box'
-                }}
-                onFocus={e => e.target.select()}
-              />
+            {/* Tab Navigation */}
+            <div
+              style={{
+                display: 'flex',
+                borderBottom: '1px solid #e0e0e0',
+                backgroundColor: '#f5f5f5'
+              }}
+            >
+              {(['preview', 'code'] as TabId[]).map(tab => {
+                const tabLabels: Record<TabId, string> = {
+                  preview: 'Preview Visualization',
+                  code: 'Get Embed Code'
+                }
+
+                return (
+                  <button
+                    key={tab}
+                    onClick={() => setActiveTab(tab)}
+                    style={{
+                      flex: 1,
+                      padding: '12px 16px',
+                      border: 'none',
+                      backgroundColor: activeTab === tab ? 'white' : 'transparent',
+                      borderBottom: activeTab === tab ? '2px solid #005eaa' : '2px solid transparent',
+                      color: activeTab === tab ? '#005eaa' : '#666',
+                      fontWeight: activeTab === tab ? 'bold' : 'normal',
+                      cursor: 'pointer',
+                      transition: 'all 0.2s'
+                    }}
+                  >
+                    {tabLabels[tab]}
+                  </button>
+                )
+              })}
             </div>
 
+            {/* Tab Content */}
+            <div
+              className='modal-body'
+              style={{
+                padding: '20px',
+                flex: 1,
+                overflow: 'auto'
+              }}
+            >
+              {/* Preview Tab - Contains filter controls (if filters exist) and preview */}
+              {activeTab === 'preview' && (
+                <div>
+                  {/* Filter Settings - only shown if there are valid filters */}
+                  {hasFilters && (
+                    <>
+                      <h4 style={{ marginTop: 0, marginBottom: '1rem' }}>Filter Settings</h4>
+                      <p style={{ marginBottom: '1rem', color: '#666' }}>
+                        Set default values and visibility for filters in the partner's embedded visualization.
+                      </p>
+                      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', marginBottom: '2rem' }}>
+                        {filters.map((filter, index) => {
+                          const state = filterState[filter.key] || { value: '', hide: false }
+                          const hasValues = filter.values && filter.values.length > 0
+
+                          return (
+                            <div
+                              key={filter.key || index}
+                              style={{
+                                padding: '1rem',
+                                background: 'white',
+                                border: '1px solid #ddd',
+                                borderRadius: '4px'
+                              }}
+                            >
+                              <label
+                                htmlFor={`filter-${index}`}
+                                style={{
+                                  display: 'block',
+                                  marginBottom: '0.5rem',
+                                  fontWeight: 'bold'
+                                }}
+                              >
+                                {filter.label}
+                              </label>
+
+                              {hasValues ? (
+                                <select
+                                  id={`filter-${index}`}
+                                  value={state.value}
+                                  onChange={e => handleFilterChange(filter.key, e.target.value)}
+                                  style={{
+                                    width: '100%',
+                                    padding: '0.5rem',
+                                    fontSize: '0.9rem',
+                                    border: '2px solid #d1d5db',
+                                    borderRadius: '6px',
+                                    backgroundColor: '#f9fafb',
+                                    cursor: 'pointer'
+                                  }}
+                                >
+                                  {filter.values?.map((value, valueIndex) => (
+                                    <option key={valueIndex} value={value}>
+                                      {value}
+                                    </option>
+                                  ))}
+                                </select>
+                              ) : (
+                                <div style={{ color: '#999', fontStyle: 'italic' }}>No values available</div>
+                              )}
+
+                              <div style={{ marginTop: '0.75rem' }}>
+                                <label
+                                  style={{
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    cursor: 'pointer',
+                                    fontWeight: 'normal'
+                                  }}
+                                >
+                                  <input
+                                    type='checkbox'
+                                    checked={state.hide}
+                                    onChange={e => handleHideToggle(filter.key, e.target.checked)}
+                                    style={{ marginRight: '0.5rem' }}
+                                  />
+                                  <span style={{ color: '#666' }}>Hide filter in embed</span>
+                                </label>
+                              </div>
+                            </div>
+                          )
+                        })}
+                      </div>
+                    </>
+                  )}
+
+                  {/* Preview Section - title only shown if there are filters */}
+                  {hasFilters && <h4 style={{ marginBottom: '1rem' }}>Preview</h4>}
+                  <p style={{ marginBottom: '1rem', color: '#666' }}>
+                    This shows how the visualization will appear on the partner website
+                    {hasFilters ? ' with your selected settings' : ''}. The partner will have control over the width of
+                    the embedded visualization. If you do not see the latest version of the visualization, save it and
+                    reopen this popup.
+                  </p>
+                  <div
+                    style={{
+                      border: '2px dashed #999',
+                      borderRadius: '4px',
+                      padding: '1rem'
+                    }}
+                  >
+                    <div
+                      key={`${configUrl}-${JSON.stringify(filterState)}`}
+                      data-cove-embed
+                      data-config-url={(() => {
+                        const urlParams = buildFilterUrlParams(filters, filterState)
+                        const params = new URLSearchParams()
+                        Object.entries(urlParams).forEach(([key, value]) => {
+                          if (value) params.set(key, value)
+                        })
+                        return params.toString() ? `${configUrl}?${params.toString()}` : configUrl || ''
+                      })()}
+                    />
+                  </div>
+                </div>
+              )}
+
+              {/* Embed Code Tab */}
+              {activeTab === 'code' && (
+                <div>
+                  <p style={{ marginBottom: '10px', color: '#666' }}>
+                    Copy this code and send it to a partner so they can add it to their site. Your visualization will
+                    need to be published to Link (www.cdc.gov) before it can be embedded by a partner.
+                  </p>
+                  <textarea
+                    readOnly
+                    value={embedCode}
+                    style={{
+                      width: '100%',
+                      height: '200px',
+                      fontFamily: 'monospace',
+                      fontSize: '0.85em',
+                      padding: '10px',
+                      border: '1px solid #ddd',
+                      borderRadius: '4px',
+                      resize: 'vertical',
+                      boxSizing: 'border-box'
+                    }}
+                    onFocus={e => e.target.select()}
+                  />
+                </div>
+              )}
+            </div>
+
+            {/* Modal Footer */}
             <div
               className='modal-footer'
               style={{
@@ -267,9 +497,11 @@ export const EmbedEditor: React.FC<EmbedEditorProps> = ({ config }) => {
               <button className='btn btn-secondary' onClick={handleCloseModal}>
                 Close
               </button>
-              <button className='btn btn-primary' onClick={handleCopyFromModal} style={{ minWidth: '120px' }}>
-                {embedCodeCopied ? '✓ Copied!' : 'Copy to Clipboard'}
-              </button>
+              {activeTab === 'code' && (
+                <button className='btn btn-primary' onClick={handleCopyFromModal} style={{ minWidth: '120px' }}>
+                  {embedCodeCopied ? '✓ Copied!' : 'Copy to Clipboard'}
+                </button>
+              )}
             </div>
           </div>
         </div>

package/components/Alert/components/Alert.styles.css

@@ -1,12 +1,12 @@
-.cdc-open-viz-module {
+.cove-visualization {
   .accordion__panel > .alert {
     margin-bottom: 15px;
   }
 
   .alert {
     align-items: center;
-    justify-content: center;
     display: inline-flex;
+    justify-content: center;
 
     .cove-icon {
       margin: 5px;

package/components/ComboBox/combobox.styles.css

@@ -1,54 +1,54 @@
-.cdc-open-viz-module {
+.cove-visualization {
   .cove-combobox {
     position: relative;
     width: 100%;
   }
 
   .cove-combobox-wrapper {
-    position: relative;
-    display: flex;
     align-items: center;
+    display: flex;
+    position: relative;
     width: 100%;
   }
 
   input.cove-combobox-input[role='combobox'] {
-    width: 100%;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-clip: padding-box;
+    background-color: white;
+    border: 1px solid var(--cool-gray-10) !important;
+    border-radius: 0.333rem;
+    color: var(--cool-gray-90);
+    cursor: text;
     display: block;
-    padding: 0.5rem 3rem 0.5rem 0.5rem;
     font-family: var(--app-font-secondary);
-    font-weight: 300;
     font-size: 0.833rem;
+    font-weight: 300;
     line-height: normal;
-    color: var(--cool-gray-90);
-    background-color: white;
-    background-clip: padding-box;
-    border: 1px solid var(--cool-gray-10) !important;
-    border-radius: 0.333rem;
+    padding: 0.5rem 3rem 0.5rem 0.5rem;
     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-    appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    cursor: text;
+    width: 100%;
   }
 
   input.cove-combobox-input[role='combobox']:focus {
-    color: var(--cool-gray-90);
     background-color: white;
     border: 1px solid var(--cool-gray-10) !important;
     box-shadow: none;
+    color: var(--cool-gray-90);
   }
 
   input.cove-combobox-input[role='combobox']:focus-visible {
+    border-radius: 6px !important;
     outline: dashed 2px rgb(0, 122, 153) !important;
     outline-offset: 3px !important;
-    border-radius: 6px !important;
   }
 
   input.cove-combobox-input[role='combobox']:disabled {
     background-color: var(--lightestGray);
     color: var(--cool-gray-90);
-    opacity: 1;
     cursor: default;
+    opacity: 1;
   }
 
   input.cove-combobox-input[role='combobox']:disabled::placeholder {
@@ -62,21 +62,21 @@
   }
 
   .cove-combobox-button {
-    position: absolute;
-    right: 0.5rem;
-    top: 50%;
-    transform: translateY(-50%);
-    display: flex;
     align-items: center;
-    justify-content: center;
-    width: 1em;
-    height: 1em;
     background: transparent;
     border: none;
     cursor: pointer;
+    display: flex;
+    height: 1em;
+    justify-content: center;
     padding: 0;
-    z-index: 2;
     pointer-events: none;
+    position: absolute;
+    right: 0.5rem;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 1em;
+    z-index: 2;
   }
 
   .cove-combobox-button:disabled {
@@ -94,21 +94,21 @@
   }
 
   .cove-combobox-listbox {
-    position: absolute;
-    top: calc(100% + 0.125rem);
-    left: 0;
-    right: auto;
-    width: 150%;
-    z-index: 1000;
-    max-height: 20rem;
-    margin: 0;
-    padding: 0;
-    overflow-y: auto;
-    list-style: none;
     background-color: white;
     border: 1px solid var(--cool-gray-10);
     border-radius: 0.333rem;
     box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+    left: 0;
+    list-style: none;
+    margin: 0;
+    max-height: 20rem;
+    overflow-y: auto;
+    padding: 0;
+    position: absolute;
+    right: auto;
+    top: calc(100% + 0.125rem);
+    width: 150%;
+    z-index: 1000;
   }
 
   .cove-combobox-listbox:has(.no-results) {
@@ -116,14 +116,14 @@
   }
 
   .cove-combobox-option {
-    padding: 0.5rem 0.5rem;
-    font-family: var(--app-font-secondary);
-    font-weight: 300;
-    font-size: 0.778rem;
     color: var(--cool-gray-90);
     cursor: pointer;
-    user-select: none;
+    font-family: var(--app-font-secondary);
+    font-size: 0.778rem;
+    font-weight: 300;
+    padding: 0.5rem 0.5rem;
     transition: background-color 0.15s ease-in-out;
+    user-select: none;
   }
 
   .cove-combobox-option .cove-combobox-option-highlight {
@@ -148,15 +148,15 @@
   }
 
   .sr-only {
-    position: absolute;
-    width: 1px;
+    border: 0;
+    clip: rect(0, 0, 0, 0);
     height: 1px;
-    padding: 0;
     margin: -1px;
     overflow: hidden;
-    clip: rect(0, 0, 0, 0);
+    padding: 0;
+    position: absolute;
     white-space: nowrap;
-    border: 0;
+    width: 1px;
   }
 
   @media (prefers-reduced-motion: reduce) {