@cdc/core 4.25.7 → 4.25.10

package/components/ui/_stories/IconGallery.stories.tsx

@@ -0,0 +1,316 @@
+import type { Meta } from '@storybook/react'
+import React from 'react'
+
+// Import all icons
+import AreaChartIcon from '../../../assets/icon-area-chart.svg'
+import CaretDownIcon from '../../../assets/icon-caret-down.svg'
+import CaretFilledDownIcon from '../../../assets/icon-caret-filled-down.svg'
+import CaretFilledUpIcon from '../../../assets/icon-caret-filled-up.svg'
+import CaretUpIcon from '../../../assets/icon-caret-up.svg'
+import BarPairedIcon from '../../../assets/icon-chart-bar-paired.svg'
+import BarStackedIcon from '../../../assets/icon-chart-bar-stacked.svg'
+import BarChartIcon from '../../../assets/icon-chart-bar.svg'
+import BoxWhiskerIcon from '../../../assets/icon-chart-box-whisker.svg'
+import ForecastIcon from '../../../assets/icon-chart-forecast.svg'
+import ForestPlotIcon from '../../../assets/icon-chart-forest-plot.svg'
+import LineChartIcon from '../../../assets/icon-chart-line.svg'
+import PieChartIcon from '../../../assets/icon-chart-pie.svg'
+import ScatterplotIcon from '../../../assets/icon-chart-scatterplot.svg'
+import StackedAreaIcon from '../../../assets/icon-chart-stacked-area.svg'
+import CheckIcon from '../../../assets/icon-check.svg'
+import CloseIcon from '../../../assets/icon-close.svg'
+import CodeIcon from '../../../assets/icon-code.svg'
+import ComboChartIcon from '../../../assets/icon-combo-chart.svg'
+import CommandIcon from '../../../assets/icon-command.svg'
+import DashboardIcon from '../../../assets/icon-dashboard.svg'
+import DataBiteIcon from '../../../assets/icon-databite.svg'
+import DeviationBarIcon from '../../../assets/icon-deviation-bar.svg'
+import EditIcon from '../../../assets/icon-edit.svg'
+import EpiChartIcon from '../../../assets/icon-epi-chart.svg'
+import FileUploadIcon from '../../../assets/icon-file-upload.svg'
+import FilterBarsIcon from '../../../assets/icon-filter-bars.svg'
+import FilterDropdownsIcon from '../../../assets/icon-filter-dropdowns.svg'
+import FilteredTextIcon from '../../../assets/icon-filtered-text.svg'
+import GearIcon from '../../../assets/icon-gear.svg'
+import GearMultiIcon from '../../../assets/icon-gear-multi.svg'
+import GridIcon from '../../../assets/icon-grid.svg'
+import InfoIcon from '../../../assets/icon-info.svg'
+import LinearGaugeIcon from '../../../assets/icon-linear-gauge.svg'
+import LinkIcon from '../../../assets/icon-link.svg'
+import MapAlabamaIcon from '../../../assets/icon-map-alabama.svg'
+import MapUSAIcon from '../../../assets/icon-map-usa.svg'
+import MapWorldIcon from '../../../assets/icon-map-world.svg'
+import MinusIcon from '../../../assets/icon-minus.svg'
+import MoveIcon from '../../../assets/icon-move.svg'
+import PlusIcon from '../../../assets/icon-plus.svg'
+import QuestionCircleIcon from '../../../assets/icon-question-circle.svg'
+import RotateLeftIcon from '../../../assets/icon-rotate-left.svg'
+import SankeyIcon from '../../../assets/icon-sankey.svg'
+import TableIcon from '../../../assets/icon-table.svg'
+import ToolsIcon from '../../../assets/icon-tools.svg'
+import UploadIcon from '../../../assets/icon-upload.svg'
+import WarningCircleIcon from '../../../assets/icon-warning-circle.svg'
+import WarningTriangleIcon from '../../../assets/icon-warning-triangle.svg'
+import ExternalLinkIcon from '../../../assets/external-link.svg'
+import MapFoldedIcon from '../../../assets/map-folded.svg'
+import USARegionGraphicIcon from '../../../assets/usa-region-graphic.svg'
+
+const iconList = [
+  { name: 'Area Chart', component: AreaChartIcon, category: 'Charts' },
+  { name: 'Bar Chart', component: BarChartIcon, category: 'Charts' },
+  { name: 'Bar Chart Paired', component: BarPairedIcon, category: 'Charts' },
+  { name: 'Bar Chart Stacked', component: BarStackedIcon, category: 'Charts' },
+  { name: 'Box & Whisker', component: BoxWhiskerIcon, category: 'Charts' },
+  { name: 'Combo Chart', component: ComboChartIcon, category: 'Charts' },
+  { name: 'Deviation Bar', component: DeviationBarIcon, category: 'Charts' },
+  { name: 'Epi Chart', component: EpiChartIcon, category: 'Charts' },
+  { name: 'Forecast', component: ForecastIcon, category: 'Charts' },
+  { name: 'Forest Plot', component: ForestPlotIcon, category: 'Charts' },
+  { name: 'Line Chart', component: LineChartIcon, category: 'Charts' },
+  { name: 'Linear Gauge', component: LinearGaugeIcon, category: 'Charts' },
+  { name: 'Pie Chart', component: PieChartIcon, category: 'Charts' },
+  { name: 'Sankey', component: SankeyIcon, category: 'Charts' },
+  { name: 'Scatterplot', component: ScatterplotIcon, category: 'Charts' },
+  { name: 'Stacked Area', component: StackedAreaIcon, category: 'Charts' },
+
+  { name: 'Map Alabama', component: MapAlabamaIcon, category: 'Maps' },
+  { name: 'Map USA', component: MapUSAIcon, category: 'Maps' },
+  { name: 'Map World', component: MapWorldIcon, category: 'Maps' },
+  { name: 'Map Folded', component: MapFoldedIcon, category: 'Maps' },
+  { name: 'USA Region Graphic', component: USARegionGraphicIcon, category: 'Maps' },
+
+  { name: 'Dashboard', component: DashboardIcon, category: 'Components' },
+  { name: 'Data Bite', component: DataBiteIcon, category: 'Components' },
+  { name: 'Filtered Text', component: FilteredTextIcon, category: 'Components' },
+  { name: 'Table', component: TableIcon, category: 'Components' },
+
+  { name: 'Filter Bars', component: FilterBarsIcon, category: 'Filters' },
+  { name: 'Filter Dropdowns', component: FilterDropdownsIcon, category: 'Filters' },
+
+  { name: 'Caret Down', component: CaretDownIcon, category: 'Navigation' },
+  { name: 'Caret Filled Down', component: CaretFilledDownIcon, category: 'Navigation' },
+  { name: 'Caret Filled Up', component: CaretFilledUpIcon, category: 'Navigation' },
+  { name: 'Caret Up', component: CaretUpIcon, category: 'Navigation' },
+
+  { name: 'Check', component: CheckIcon, category: 'Actions' },
+  { name: 'Close', component: CloseIcon, category: 'Actions' },
+  { name: 'Edit', component: EditIcon, category: 'Actions' },
+  { name: 'File Upload', component: FileUploadIcon, category: 'Actions' },
+  { name: 'Minus', component: MinusIcon, category: 'Actions' },
+  { name: 'Move', component: MoveIcon, category: 'Actions' },
+  { name: 'Plus', component: PlusIcon, category: 'Actions' },
+  { name: 'Rotate Left', component: RotateLeftIcon, category: 'Actions' },
+  { name: 'Upload', component: UploadIcon, category: 'Actions' },
+
+  { name: 'Code', component: CodeIcon, category: 'Interface' },
+  { name: 'Command', component: CommandIcon, category: 'Interface' },
+  { name: 'External Link', component: ExternalLinkIcon, category: 'Interface' },
+  { name: 'Gear', component: GearIcon, category: 'Interface' },
+  { name: 'Gear Multi', component: GearMultiIcon, category: 'Interface' },
+  { name: 'Grid', component: GridIcon, category: 'Interface' },
+  { name: 'Info', component: InfoIcon, category: 'Interface' },
+  { name: 'Link', component: LinkIcon, category: 'Interface' },
+  { name: 'Question Circle', component: QuestionCircleIcon, category: 'Interface' },
+  { name: 'Tools', component: ToolsIcon, category: 'Interface' },
+  { name: 'Warning Circle', component: WarningCircleIcon, category: 'Interface' },
+  { name: 'Warning Triangle', component: WarningTriangleIcon, category: 'Interface' },
+]
+
+const categories = [...new Set(iconList.map(icon => icon.category))]
+
+const meta: Meta = {
+  title: 'Components/Atoms/Icon Gallery',
+  parameters: {
+    docs: {
+      page: () => (
+        <div style={{ padding: '20px' }}>
+          <h1>Icon Gallery</h1>
+          <p>This gallery showcases all available icons in the CDC Open Viz system, organized by category.</p>
+
+          {categories.map(category => (
+            <div key={category} style={{ marginBottom: '40px' }}>
+              <h2>{category}</h2>
+              <div style={{
+                display: 'grid',
+                gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+                gap: '20px',
+                marginBottom: '20px'
+              }}>
+                {iconList
+                  .filter(icon => icon.category === category)
+                  .map(icon => (
+                    <div
+                      key={icon.name}
+                      style={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        padding: '15px',
+                        border: '1px solid #e0e0e0',
+                        borderRadius: '8px',
+                        backgroundColor: '#fafafa'
+                      }}
+                    >
+                      <icon.component
+                        width="48"
+                        height="48"
+                        style={{ marginBottom: '10px' }}
+                      />
+                      <span style={{
+                        fontSize: '12px',
+                        fontWeight: 'bold',
+                        textAlign: 'center',
+                        color: '#333'
+                      }}>
+                        {icon.name}
+                      </span>
+                      <code style={{
+                        fontSize: '10px',
+                        color: '#666',
+                        marginTop: '5px',
+                        textAlign: 'center',
+                        wordBreak: 'break-all'
+                      }}>
+                        {icon.component.toString().includes('icon-')
+                          ? icon.component.toString().match(/icon-[^.]+/)?.[0] || 'icon'
+                          : icon.component.toString().match(/[^/]+(?=\.svg)/)?.[0] || 'icon'
+                        }.svg
+                      </code>
+                    </div>
+                  ))}
+              </div>
+            </div>
+          ))}
+
+          <h2>Usage</h2>
+          <p>Import and use icons as React components:</p>
+          <pre><code>{`import WarningIcon from '@cdc/core/assets/icon-warning-circle.svg'
+
+// Basic usage
+<WarningIcon width="24" height="24" />
+
+// With styling
+<WarningIcon
+  width="32"
+  height="32"
+  className="warning-icon"
+  style={{ color: '#ff6b6b' }}
+/>`}</code></pre>
+
+          <h2>Guidelines</h2>
+          <ul>
+            <li><strong>Consistent Sizing</strong>: Use standard sizes (16px, 24px, 32px, 48px) for consistency</li>
+            <li><strong>Accessibility</strong>: Always provide meaningful alt text or aria-labels when needed</li>
+            <li><strong>Color</strong>: Icons inherit the current text color by default, can be overridden with CSS</li>
+            <li><strong>Context</strong>: Choose icons that clearly represent their function or content</li>
+            <li><strong>Performance</strong>: SVG icons are optimized for fast loading and scalability</li>
+          </ul>
+
+          <h2>File Location</h2>
+          <p>All icons are located in <code>packages/core/assets/</code> and follow the naming convention:</p>
+          <ul>
+            <li><code>icon-[name].svg</code> for interface and action icons</li>
+            <li><code>[descriptive-name].svg</code> for specialized graphics</li>
+          </ul>
+        </div>
+      )
+    }
+  }
+}
+
+export default meta
+
+export const Gallery = {
+  render: () => (
+    <div style={{ padding: '20px' }}>
+      <h1>Icon Gallery</h1>
+      <p>This gallery showcases all available icons in the CDC Open Viz system, organized by category.</p>
+
+      {categories.map(category => (
+        <div key={category} style={{ marginBottom: '40px' }}>
+          <h2>{category}</h2>
+          <div style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+            gap: '20px',
+            marginBottom: '20px'
+          }}>
+            {iconList
+              .filter(icon => icon.category === category)
+              .map(icon => (
+                <div
+                  key={icon.name}
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    padding: '15px',
+                    border: '1px solid #e0e0e0',
+                    borderRadius: '8px',
+                    backgroundColor: '#fafafa'
+                  }}
+                >
+                  <icon.component
+                    width="48"
+                    height="48"
+                    style={{ marginBottom: '10px' }}
+                  />
+                  <span style={{
+                    fontSize: '12px',
+                    fontWeight: 'bold',
+                    textAlign: 'center',
+                    color: '#333'
+                  }}>
+                    {icon.name}
+                  </span>
+                  <code style={{
+                    fontSize: '10px',
+                    color: '#666',
+                    marginTop: '5px',
+                    textAlign: 'center',
+                    wordBreak: 'break-all'
+                  }}>
+                    {icon.component.toString().includes('icon-')
+                      ? icon.component.toString().match(/icon-[^.]+/)?.[0] || 'icon'
+                      : icon.component.toString().match(/[^/]+(?=\.svg)/)?.[0] || 'icon'
+                    }.svg
+                  </code>
+                </div>
+              ))}
+          </div>
+        </div>
+      ))}
+
+      <h2>Usage</h2>
+      <p>Import and use icons as React components:</p>
+      <pre><code>{`import WarningIcon from '@cdc/core/assets/icon-warning-circle.svg'
+
+// Basic usage
+<WarningIcon width="24" height="24" />
+
+// With styling
+<WarningIcon
+  width="32"
+  height="32"
+  className="warning-icon"
+  style={{ color: '#ff6b6b' }}
+/>`}</code></pre>
+
+      <h2>Guidelines</h2>
+      <ul>
+        <li><strong>Consistent Sizing</strong>: Use standard sizes (16px, 24px, 32px, 48px) for consistency</li>
+        <li><strong>Accessibility</strong>: Always provide meaningful alt text or aria-labels when needed</li>
+        <li><strong>Color</strong>: Icons inherit the current text color by default, can be overridden with CSS</li>
+        <li><strong>Context</strong>: Choose icons that clearly represent their function or content</li>
+        <li><strong>Performance</strong>: SVG icons are optimized for fast loading and scalability</li>
+      </ul>
+
+      <h2>File Location</h2>
+      <p>All icons are located in <code>packages/core/assets/</code> and follow the naming convention:</p>
+      <ul>
+        <li><code>icon-[name].svg</code> for interface and action icons</li>
+        <li><code>[descriptive-name].svg</code> for specialized graphics</li>
+      </ul>
+    </div>
+  )
+}

package/components/ui/_stories/Title.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import Title from '../Title'
 
 const meta: Meta = {

package/contexts/EditorContext.ts

@@ -0,0 +1,18 @@
+import { WCMSProps } from '@cdc/core/types/WCMSProps'
+import { Dispatch, createContext } from 'react'
+import EditorActions from './editor.actions'
+import { EditorState } from '@cdc/core/contexts/editor.reducer'
+
+export type EditorCTX = WCMSProps &
+  EditorState & {
+    displayName?: string
+    setTempConfig: Function
+  }
+
+const ConfigContext = createContext<EditorCTX>({
+  displayName: 'ConfigContext',
+  setTempConfig: () => {}
+} as unknown as EditorCTX)
+
+export default ConfigContext
+export const EditorDispatchContext = createContext<Dispatch<EditorActions>>(() => {})

package/contexts/editor.actions.ts

@@ -0,0 +1,28 @@
+import { type Action } from '@cdc/core/types/Action'
+import { type ViewPort } from '@cdc/core/types/ViewPort'
+import { type Visualization } from '@cdc/core/types/Visualization'
+import { type DataSet } from '@cdc/core/types/DataSet'
+
+type EDITOR_SAVE = Action<'EDITOR_SAVE', Visualization>
+type EDITOR_SET_CONFIG = Action<'EDITOR_SET_CONFIG', Visualization>
+type EDITOR_TEMP_SAVE = Action<'EDITOR_TEMP_SAVE', Visualization>
+type EDITOR_SET_ERRORS = Action<'EDITOR_SET_ERRORS', string[]>
+type EDITOR_SET_VIEWPORT = Action<'EDITOR_SET_VIEWPORT', ViewPort>
+type EDITOR_SET_GLOBALACTIVE = Action<'EDITOR_SET_GLOBALACTIVE', number>
+type SET_DASHBOARD_DATASET = Action<
+  'SET_DASHBOARD_DATASET',
+  { datasetKey: string; oldDatasetKey?: string; dataset: DataSet }
+>
+type DELETE_DATASET = Action<'DELETE_DASHBOARD_DATASET', { datasetKey: string }>
+
+type actions =
+  | EDITOR_SAVE
+  | EDITOR_TEMP_SAVE
+  | EDITOR_SET_ERRORS
+  | EDITOR_SET_VIEWPORT
+  | EDITOR_SET_GLOBALACTIVE
+  | EDITOR_SET_CONFIG
+  | DELETE_DATASET
+  | SET_DASHBOARD_DATASET
+
+export default actions

package/contexts/editor.reducer.ts

@@ -0,0 +1,94 @@
+import _ from 'lodash'
+import EditorActions from './editor.actions'
+import { Visualization } from '@cdc/core/types/Visualization'
+import { devToolsWrapper } from '@cdc/core/helpers/withDevTools'
+import { cloneConfig } from '@cdc/core/helpers/cloneConfig'
+
+export type EditorState = {
+  config?: Visualization
+  tempConfig?: Visualization | null
+  errors: string[]
+  currentViewport: string
+  globalActive: number
+  newViz?: boolean
+}
+const reducer = (state: EditorState, action: EditorActions): EditorState => {
+  switch (action.type) {
+    case 'EDITOR_SAVE': {
+      return { ...state, config: action.payload, tempConfig: null }
+    }
+    case 'EDITOR_SET_CONFIG': {
+      return { ...state, config: action.payload }
+    }
+    case 'SET_DASHBOARD_DATASET': {
+      const { dataset, datasetKey, oldDatasetKey } = action.payload
+      const oldDataset = oldDatasetKey ? state.config?.datasets[oldDatasetKey] : {}
+      const config = cloneConfig(state.config)
+      if (oldDatasetKey) {
+        const changeDatasets = _config => {
+          _config.rows?.forEach(row => {
+            if (row.dataKey === oldDatasetKey) {
+              row.dataKey = datasetKey
+            }
+          })
+          Object.values(_config.visualizations || {}).forEach((viz: any) => {
+            if (viz.dataKey === oldDatasetKey) {
+              viz.dataKey = datasetKey
+            }
+          })
+        }
+        applyMultiDashboards(config, changeDatasets)
+        delete config.datasets[oldDatasetKey]
+      }
+      Object.values(config.datasets).forEach(dataset => {
+        dataset.preview = false
+      })
+      config.datasets[datasetKey] = { ...oldDataset, ...dataset }
+      return { ...state, config }
+    }
+    case 'DELETE_DASHBOARD_DATASET': {
+      const { datasetKey } = action.payload
+      const deleteDatasetKeys = _config => {
+        _config.rows?.forEach(row => {
+          if (row.dataKey === datasetKey) {
+            delete row.dataKey
+          }
+        })
+        Object.values(_config.visualizations || {}).forEach((viz: any) => {
+          if (viz.dataKey === datasetKey) {
+            delete viz.dataKey
+          }
+        })
+      }
+      const config = cloneConfig(state.config)
+      applyMultiDashboards(config, deleteDatasetKeys)
+      delete config.datasets[datasetKey]
+      return { ...state, config }
+    }
+    case 'EDITOR_TEMP_SAVE': {
+      return { ...state, tempConfig: action.payload }
+    }
+    case 'EDITOR_SET_ERRORS': {
+      return { ...state, errors: action.payload }
+    }
+    case 'EDITOR_SET_VIEWPORT': {
+      return { ...state, currentViewport: action.payload }
+    }
+    case 'EDITOR_SET_GLOBALACTIVE': {
+      return { ...state, globalActive: action.payload }
+    }
+    default:
+      return state
+  }
+}
+
+const applyMultiDashboards = (config: Record<string, any>, mutationFunc: Function) => {
+  if (config.multiDashboards) {
+    config.multiDashboards.forEach(dashboard => {
+      mutationFunc(dashboard)
+    })
+  }
+  mutationFunc(config)
+}
+
+export default devToolsWrapper<EditorState, EditorActions>(reducer)

package/data/chartColorPalettes.ts

@@ -0,0 +1,118 @@
+import { updatePaletteNames } from '../helpers/updatePaletteNames'
+import { sharedPalettes } from './sharedPalettes'
+
+// Chart-specific color palettes with versioned structure
+
+const chartColorPalettesData = {
+  v1: {
+    'qualitative_bold': [
+      '#377eb8',
+      '#ff7f00',
+      '#4daf4a',
+      '#984ea3',
+      '#e41a1c',
+      '#ffff33',
+      '#a65628',
+      '#f781bf',
+      '#3399CC'
+    ],
+
+    'qualitative_soft': [
+      '#a6cee3',
+      '#1f78b4',
+      '#b2df8a',
+      '#33a02c',
+      '#fb9a99',
+      '#e31a1c',
+      '#fdbf6f',
+      '#ff7f00',
+      '#aca9eb'
+    ],
+    qualitative1: sharedPalettes.qualitative1,
+
+    qualitative2: sharedPalettes.qualitative2,
+
+    qualitative3: sharedPalettes.qualitative3,
+
+    qualitative4: sharedPalettes.qualitative4,
+
+    'sequential_blue': ['#c6dbef', '#9ecae1', '#6baed6', '#4292c6', '#2171b5', '#084594'],
+    'sequential_blue_extended': ['#d5f6f9', '#99e2ed', '#5fb6d1', '#3189b0', '#116091', '#0a3e72'],
+    'sequential_orange_extended': ['#ffefcf', '#ffd49c', '#f7a866', '#eb7723', '#b95117', '#862b0b'],
+    'sequential_green': ['#c7e9c0', '#a1d99b', '#74c476', '#41ab5d', '#238b45', '#005a32'],
+
+    colorblindsafe: sharedPalettes.colorblindsafe
+  },
+  v2: {
+    // New standardized v2 palettes per migration guide (underscore naming convention)
+    'sequential_orange': ['#FFE4D5', '#FED0B6', '#F7B99A', '#ED9E7C', '#E58061', '#DB6B49', '#C95936', '#A8462C', '#702B1D'],
+    'sequential_purple': ['#E2D3DF', '#CDB2C8', '#B78FAF', '#A6739B', '#935586', '#823A73', '#722161', '#5F2359', '#47264F'],
+    'sequential_blue': ['#DBE8F7', '#BED5ED', '#99BCE1', '#73A1D5', '#4E88C7', '#1E6BC0', '#0057B7', '#01418D', '#032659'],
+    'sequential_green': ['#D5F9F6', '#AEECE7', '#85DED7', '#63D2CA', '#3BBCAF', '#14A594', '#0A937F', '#0F7A68', '#105B4D'],
+    'qualitative_standard': ['#0057B7', '#722161', '#00B1CE', '#D94E5F', '#5A8E3F', '#FFB24D', '#FB7E38', '#032659', '#975722'],
+
+    // New v2-only palettes (no migration needed)
+    'sequential_teal': ['#e5fafc', '#b3e3ed', '#80cddf', '#4db8d1', '#00b1ce', '#03a2bd', '#0690a6', '#0d6e81', '#125261'],
+    'divergent_blue_cyan': ['#032659', '#014697', '#1D6ABF', '#6197D2', '#C1D2DB', '#5CCBDE', '#01ACC9', '#097F95', '#125261'],
+    'divergent_blue_purple': ['#032659', '#014697', '#1D6ABF', '#6197D2', '#C4CDE1', '#AF8CAA', '#935586', '#7C256B', '#47264F'],
+    'divergent_green_orange': ['#105B4D', '#16806E', '#3EA394', '#5EBFB3', '#FABF61', '#EE956C', '#E27447', '#AC4726', '#702B1D'],
+    'divergent_blue_orange': ['#032659', '#0057B7', '#0092C6', '#55B1A3', '#FFB24D', '#EA803B', '#DD622F', '#AF3423', '#660F14']
+  }
+}
+
+export const twoColorPaletteData = {
+  v1: {
+    'monochrome-1': ['#a6cee3', '#15017a'],
+    'monochrome-2': ['#c2c0fc', '#15017a'],
+    'monochrome-3': ['#cab2d6', '#6a3d9a'],
+    'monochrome-4': ['#c2c0fc', '#6a3d9a'],
+    'monochrome-5': ['#fedab8', '#bf5b17'],
+    'cool-1': ['#b2df8a', '#1f78b4'],
+    'cool-2': ['#a6cee3', '#72d66b'],
+    'cool-3': ['#c2c0fc', '#386cb0'],
+    'cool-4': ['#72d66b', '#6a3d9a'],
+    'cool-5': ['#a6cee3', '#6a3d9a'],
+    'warm-1': ['#e31a1c', '#fedab8'],
+    'complementary-1': ['#1f78b4', '#e6ab02'],
+    'complementary-2': ['#1f78b4', '#ff7f00'],
+    'complementary-3': ['#6a3d9a', '#ff7f00'],
+    'complementary-4': ['#6a3d9a', '#e6ab02'],
+    'complementary-5': ['#df168c', '#1eb386']
+  },
+  v2: {
+    // All palettes using indexes [2,6] from their respective divergent palettes
+    'divergent_blue_purple': ['#1D6ABF', '#935586'],
+
+    'divergent_green_orange': ['#3EA394', '#E27447'],
+
+    'divergent_blue_cyan': ['#1D6ABF', '#01ACC9'],
+
+    'divergent_blue_orange': ['#0092C6', '#DD622F']
+  }
+}
+
+// Forecasting Palettes should be refactored to use versioned palettes
+const sequentialColors = {
+  'Sequential Blue': ['#c6dbef', '#9ecae1', '#6baed6', '#4292c6', '#2171b5', '#084594'],
+  'Sequential Blue Two': ['#d5f6f9', '#99e2ed', '#5fb6d1', '#3189b0', '#116091', '#0a3e72'],
+  'Sequential Blue Three': sharedPalettes.sequentialBlueNine,
+  'Sequential Orange': ['#ffefcf', '#ffd49c', '#f7a866', '#eb7723', '#b95117', '#862b0b'],
+  'Sequential Orange Two': sharedPalettes.sequentialOrangeNine,
+  'Sequential Green': ['#c7e9c0', '#a1d99b', '#74c476', '#41ab5d', '#238b45', '#005a32']
+}
+
+// Process and export chart color palettes with versioned structure
+export const chartColorPalettes = {
+  v1: updatePaletteNames(chartColorPalettesData.v1),
+  v2: updatePaletteNames(chartColorPalettesData.v2)
+}
+
+export const twoColorPalette = {
+  v1: updatePaletteNames(twoColorPaletteData.v1),
+  v2: updatePaletteNames(twoColorPaletteData.v2) // No changes for v2, but structured for consistency
+}
+
+export const sequentialPalettes = sequentialColors
+export const colorPalettesChart = chartColorPalettes
+export const colorPalettesChartV1 = chartColorPalettes.v1
+export const colorPalettesChartV2 = chartColorPalettes.v2

package/data/colorPalettes.ts

@@ -0,0 +1,9 @@
+import { mapColorPalettes, mapColorPalettesV1, mapColorPalettesV2 } from './mapColorPalettes'
+import { chartColorPalettes, sequentialPalettes, colorPalettesChart, colorPalettesChartV1, colorPalettesChartV2, twoColorPalette } from './chartColorPalettes'
+
+
+// Re-export map palettes (already processed in mapColorPalettes.ts)
+export { mapColorPalettes, mapColorPalettesV1, mapColorPalettesV2 }
+
+// Re-export chart palettes (already processed in chartColorPalettes.ts)
+export { chartColorPalettes, sequentialPalettes, colorPalettesChart, colorPalettesChartV1, colorPalettesChartV2, twoColorPalette }

package/data/mapColorPalettes.ts

@@ -0,0 +1,45 @@
+import { updatePaletteNames } from '../helpers/updatePaletteNames'
+import { sharedPalettes } from './sharedPalettes'
+
+// Map-specific color palettes extracted from main colorPalettes.ts
+
+const mapColorPalettesData = {
+  v1: {
+    sequential_yellow_orange_red: ['#ffffcc', '#ffeda0', '#fed976', '#feb24c', '#fd8d3c', '#fc4e2a', '#e31a1c', '#bd0026', '#800026'],
+    sequential_yellow_orange_brown: ['#ffffe5', '#fff7bc', '#fee391', '#fec44f', '#fe9929', '#ec7014', '#cc4c02', '#993404', '#662506'],
+    sequential_pink_purple: ['#fff7f3', '#fde0dd', '#fcc5c0', '#fa9fb5', '#f768a1', '#dd3497', '#ae017e', '#7a0177', '#49006a'],
+    sequential_blue_green: ['#fff7fb', '#ece2f0', '#d0d1e6', '#a6bddb', '#67a9cf', '#3690c0', '#02818a', '#016c59', '#014636'],
+    sequential_orange_red: ['#fff7ec', '#fee8c8', '#fdd49e', '#fdbb84', '#fc8d59', '#ef6548', '#d7301f', '#b30000', '#7f0000'],
+    sequential_red: ['#fff5f0', '#fee0d2', '#fcbba1', '#fc9272', '#fb6a4a', '#ef3b2c', '#cb181d', '#a50f15', '#67000d'],
+    sequential_green_blue: ['#f7fcf0', '#e0f3db', '#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#267ba6', '#0868ac', '#084081'],
+    divergent_yellow_purple: ['#fff0b0', '#f5cc76', '#edae4b', '#e3683c', '#bf2a48', '#6d2059', '#8f0c4b', '#310958', '#0e0943'],
+    qualitative1: sharedPalettes.qualitative1,
+    qualitative2: sharedPalettes.qualitative2,
+    qualitative3: sharedPalettes.qualitative3,
+    qualitative4: sharedPalettes.qualitative4,
+    sequential_blue_extended: sharedPalettes.sequentialBlueNine,
+    sequential_orange_extended: sharedPalettes.sequentialOrangeNine,
+    colorblindsafe: sharedPalettes.colorblindsafe
+  },
+  v2: {
+    sequential_blue: ["#dbe8f7", "#bed5ed", "#99bce1", "#73a1d5", "#4e88c7", "#1e6bc0", "#0057b7", "#01418d", "#032659"],
+    sequential_teal: ["#e5fafc", "#b3e3ed", "#80cddf", "#4db8d1", "#00b1ce", "#03a2bd", "#0690a6", "#0d6e81", "#125261"],
+    sequential_purple: ["#e2d3df", "#cdb2c8", "#b78faf", "#a6739b", "#935586", "#823a73", "#722161", "#5f2359", "#47264f"],
+    sequential_orange: ["#ffe4d5", "#fed0b6", "#f7b99a", "#ed9e7c", "#e58061", "#db6b49", "#c95936", "#a8462c", "#702b1d"],
+    sequential_green: ["#d5f9f6", "#aeece7", "#85ded7", "#63d2ca", "#3bbcaf", "#14a594", "#0a937f", "#0f7a68", "#105b4d"],
+    divergent_blue_cyan: ["#032659", "#014697", "#1d6abf", "#6197d2", "#c1d2db", "#5ccbde", "#01acc9", "#097f95", "#125261"],
+    divergent_blue_purple: ["#032659", "#014697", "#1d6abf", "#6197d2", "#c4cde1", "#af8caa", "#935586", "#7c256b", "#47264f"],
+    divergent_green_orange: ["#105b4d", "#16806e", "#3ea394", "#5ebfb3", "#fabf61", "#ee956c", "#e27447", "#ac4726", "#702b1d"],
+    divergent_blue_orange: ["#032659", "#0057b7", "#0092c6", "#55b1a3", "#ffb24d", "#ea803b", "#dd622f", "#af3423", "#660f14"],
+    qualitative_standard: ["#0057b7", "#722161", "#00b1ce", "#d94e5f", "#5a8e3f", "#ffb24d", "#fb7e38", "#032659", "#975722"],
+  }
+}
+
+// Process and export map color palettes
+export const mapColorPalettes = {
+  v1: updatePaletteNames(mapColorPalettesData.v1),
+  v2: updatePaletteNames(mapColorPalettesData.v2)
+}
+
+export const mapColorPalettesV1 = mapColorPalettes.v1
+export const mapColorPalettesV2 = mapColorPalettes.v2