@cdc/core 4.25.8 → 4.25.11

package/styles/v2/layout/_data-table.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 .cove-data-table {
   position: relative;
 }
@@ -144,7 +146,7 @@
   }
 
   .sort {
-    background-color: darken($mediumGray, 10%);
+    background-color: color.adjust($mediumGray, $lightness: -10%);
     background-repeat: no-repeat;
     background-position: right 0.5em center;
     background-size: 10px 5px;
@@ -161,7 +163,6 @@
   }
 }
 
-
 .cove-data-table__footer {
   margin-top: 1rem;
 }

package/styles/v2/themes/_color-definitions.scss

@@ -1,4 +1,5 @@
 @use 'sass:string';
+@use 'sass:list';
 @import './../../variables';
 
 $theme: (
@@ -82,8 +83,8 @@ $theme: (
   @each $theme-name, $theme-colors in $theme {
     // Header
     .theme-#{$theme-name} {
-      background-color: string.unquote(nth($theme-colors, 1));
-      border-color: string.unquote(nth($theme-colors, 2));
+      background-color: string.unquote(list.nth($theme-colors, 1));
+      border-color: string.unquote(list.nth($theme-colors, 2));
       border-bottom-style: solid;
       border-bottom-width: 4px;
     }
@@ -95,7 +96,7 @@ $theme: (
         &:not(.no-borders) {
           /// borders are the theme color
           &.component--has-borderColorTheme {
-            border: 1px solid string.unquote(nth($theme-colors, 1));
+            border: 1px solid string.unquote(list.nth($theme-colors, 1));
           }
           /// using default border color to draw borders
           &:not(.component--has-borderColorTheme) {
@@ -108,23 +109,23 @@ $theme: (
 
         /// left accent bar
         &.component--has-accent {
-          border-left: 0.5rem solid string.unquote(nth($theme-colors, 1)) !important;
+          border-left: 0.5rem solid string.unquote(list.nth($theme-colors, 1)) !important;
         }
 
         /// Apply a background color
         &.component--has-background:not(.component--hideBackgroundColor) {
-          background: string.unquote(nth($theme-colors, 3));
+          background: string.unquote(list.nth($theme-colors, 3));
         }
       }
 
       .cove-component__header {
-        border-color: string.unquote(nth($theme-colors, 2));
+        border-color: string.unquote(list.nth($theme-colors, 2));
       }
     }
 
     &.theme-#{$theme-name} {
       .cove-component__header {
-        border-color: string.unquote(nth($theme-colors, 2));
+        border-color: string.unquote(list.nth($theme-colors, 2));
       }
     }
   }
@@ -135,42 +136,42 @@ $theme: (
   @each $theme-name, $theme-colors in $theme {
     &.theme-#{$theme-name} {
       .single-filters--tab .tab--active:not(.tab--simple) {
-        border: 1px solid string.unquote(nth($theme-colors, 1));
-        border-top: 3px solid string.unquote(nth($theme-colors, 1));
+        border: 1px solid string.unquote(list.nth($theme-colors, 1));
+        border-top: 3px solid string.unquote(list.nth($theme-colors, 1));
         border-bottom: none;
       }
 
       .single-filters--tab .tab:not(.tab--active):not(.tab--simple) {
-        border-bottom: 1px solid string.unquote(nth($theme-colors, 1));
+        border-bottom: 1px solid string.unquote(list.nth($theme-colors, 1));
       }
 
       .single-filters--pill .pill--active {
-        background-color: string.unquote(nth($theme-colors, 1));
+        background-color: string.unquote(list.nth($theme-colors, 1));
         color: #fff;
       }
     }
 
     .theme-#{$theme-name} {
       .single-filters--tab .tab--active:not(.tab--simple) {
-        border: 1px solid string.unquote(nth($theme-colors, 1));
-        border-top: 3px solid string.unquote(nth($theme-colors, 1));
+        border: 1px solid string.unquote(list.nth($theme-colors, 1));
+        border-top: 3px solid string.unquote(list.nth($theme-colors, 1));
         border-bottom: none;
       }
 
       .single-filters--tab .tab:not(.tab--active):not(.tab--simple) {
-        border-bottom: 1px solid string.unquote(nth($theme-colors, 1));
+        border-bottom: 1px solid string.unquote(list.nth($theme-colors, 1));
       }
 
       .single-filters--pill .pill--active {
-        background-color: string.unquote(nth($theme-colors, 1));
+        background-color: string.unquote(list.nth($theme-colors, 1));
         color: #fff;
       }
 
       .button__tab-bar--active {
-        outline: 2px solid string.unquote(nth($theme-colors, 1));
+        outline: 2px solid string.unquote(list.nth($theme-colors, 1));
       }
       .apply:not([disabled]) {
-        background-color: string.unquote(nth($theme-colors, 1));
+        background-color: string.unquote(list.nth($theme-colors, 1));
       }
     }
   }

package/styles/v2/utils/_breakpoints.scss

@@ -13,7 +13,7 @@
       @content;
     }
   } @else if $class == lg {
-    @media (min-width: 1170px) {
+    @media (min-width: 1300px) {
       @content;
     }
   } @else if $class == xl {

package/styles/v2/utils/index.scss

@@ -4,5 +4,4 @@
 @import 'align';
 @import 'animations';
 @import 'breakpoints';
-@import 'functions';
 @import 'grid';

package/styles/waiting.scss

@@ -1,5 +1,5 @@
 .cdc-open-viz-module {
-  @import 'mixins';
+  @import 'v2/utils/mixins';
   .waiting {
     &.collapsed {
       padding: 2em !important;

package/testing-setup.js

@@ -0,0 +1,32 @@
+import { expect, afterEach, describe, it } from 'vitest'
+import { cleanup } from '@testing-library/react'
+import matchers from '@testing-library/jest-dom/matchers'
+import '@testing-library/jest-dom'
+import '@testing-library/jest-dom/extend-expect'
+
+// extends Vitest's expect method with methods from react-testing-library
+expect.extend(matchers)
+
+// Needed for globals
+window.URL.createObjectURL = function () {}
+
+// needed to get past watchMedia error.
+// https://github.com/vitest-dev/vitest/issues/821
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(), // deprecated
+    removeListener: vi.fn(), // deprecated
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn()
+  }))
+})
+
+// runs a cleanup after each test case (e.g. clearing jsdom)
+afterEach(() => {
+  cleanup()
+})

package/types/MarkupInclude.ts

@@ -1,20 +1,26 @@
 import { Runtime } from '@cdc/core/types/Runtime'
-import { Variable } from '@cdc/markup-include/src/types/Variable'
+import { MarkupVariable } from './MarkupVariable'
 import { Visualization } from './Visualization'
+import { VizFilter } from './VizFilter'
 
 export type MarkupIncludeConfig = Visualization & {
   contentEditor: {
     // Changing the base config object creates an infinite loop, nesting it is a workaround
     allowHideSection?: boolean
     inlineHTML: string
-    markupVariables: Variable[]
+    markupVariables?: MarkupVariable[]
     showHeader: boolean
+    showNoDataMessage?: boolean
+    noDataMessageText?: string
     srcUrl: string
     title: string
     useInlineHTML: boolean
   }
   data?: Object[]
+  enableMarkupVariables?: boolean
+  filters?: VizFilter[]
   formattedData: {}
+  markupVariables?: MarkupVariable[] // Support markupVariables at root level for backwards compatibility
   newViz?: boolean
   runtime?: Runtime
   visual: {

package/types/MarkupVariable.ts

@@ -0,0 +1,19 @@
+export type MarkupCondition = {
+  columnName: string
+  isOrIsNotEqualTo: 'is' | 'is not'
+  value: string
+}
+
+export type MarkupVariable = {
+  columnName: string
+  conditions: MarkupCondition[]
+  name: string
+  tag: string
+  addCommas?: boolean
+  hideOnNull?: boolean
+}
+
+export type MarkupConfig = {
+  markupVariables?: MarkupVariable[]
+  enableMarkupVariables?: boolean
+}

package/types/VizFilter.ts

@@ -23,6 +23,7 @@ export type GeneralFilter = FilterBase & {
   queuedActive: string | string[]
   filterStyle: VizFilterStyle
   label: string
+  labels?: Record<string, string>
   order: OrderBy
   orderColumn?: string
   orderedValues?: string[] // should only exist if the order is 'cust'
@@ -46,6 +47,7 @@ export type SubGrouping = {
   setByQueryParameter: string
   order?: OrderBy
   valuesLookup: Record<string, { orderedValues?: string[]; values: string[] }>
+  defaultValue?: string
 }
 
 export type VizFilter = GeneralFilter | MultiSelectFilter

package/vitest.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: ['../../vitest.setup.ts'],
+    exclude: [
+      '**/node_modules/**',
+      '**/dist/**',
+      '**/.storybook/**',
+      '**/*.stories.*',
+      '**/storybook-static/**'
+    ]
+  }
+})

package/components/ui/_stories/Colors.stories.mdx

@@ -1,220 +0,0 @@
-import { Meta, ColorPalette, ColorItem } from '@storybook/blocks'
-import colorPalettes from '@cdc/core/data/colorPalettes'
-
-export const orderedPalettes = Object.keys(colorPalettes)
-.sort()
-.reduce((acc, key) => {
-acc[key] = colorPalettes[key]
-return acc
-}, {})
-
-export const paletteFriendlyNames = {
-  'yelloworangered': 'Yellow Orange Red',
-  'yelloworangebrown': 'Yellow Orange Brown',
-  'pinkpurple': 'Pink Purple',
-  'bluegreen': 'Blue Green',
-  'orangered': 'Orange Red',
-  'red': 'Red Scale',
-  'greenblue': 'Green Blue',
-  'yellowpurple': 'Yellow Purple',
-  'qualitative-bold': 'Bold Multi-Color',
-  'qualitative-soft': 'Soft Multi-Color',
-  'qualitative1': 'Multi-Color Set 1',
-  'qualitative2': 'Multi-Color Set 2',
-  'qualitative3': 'Multi-Color Set 3',
-  'qualitative4': 'Multi-Color Set 4',
-  'sequential-blue': 'Blue Sequential',
-  'sequential-blue-2-(MPX)': 'Blue Sequential Alt',
-  'sequential-blue-2(MPX)': 'Blue Sequential Alt',
-  'sequential-orange-(MPX)': 'Orange Sequential',
-  'sequential-orange(MPX)': 'Orange Sequential',
-  'sequential-green': 'Green Sequential',
-  'Sequential Blue': 'Blue Sequential',
-  'Sequential Blue Two': 'Blue Sequential Alt',
-  'Sequential Blue Three': 'Blue Sequential Extended',
-  'Sequential Orange': 'Orange Sequential',
-  'Sequential Orange Two': 'Orange Sequential Extended',
-  'Sequential Green': 'Green Sequential',
-  'monochrome-1': 'Blue Mono',
-  'monochrome-2': 'Purple Mono',
-  'monochrome-3': 'Lavender Mono',
-  'monochrome-4': 'Violet Mono',
-  'monochrome-5': 'Brown Mono',
-  'cool-1': 'Cool Green Blue',
-  'cool-2': 'Cool Blue Green',
-  'cool-3': 'Cool Purple Blue',
-  'cool-4': 'Cool Green Purple',
-  'cool-5': 'Cool Blue Purple',
-  'warm-1': 'Warm Red Peach',
-  'complementary-1': 'Blue Gold',
-  'complementary-2': 'Blue Orange',
-  'complementary-3': 'Purple Orange',
-  'complementary-4': 'Purple Gold',
-  'complementary-5': 'Pink Teal',
-  'colorblindsafe': 'Colorblind Safe',
-}
-
-export const getPaletteName = (paletteName) => {
-  const isReversed = paletteName.endsWith('reverse');
-  const baseName = isReversed ? paletteName.slice(0, -7) : paletteName; // Remove 'reverse' suffix
-  const normalizedKey = baseName
-    .toLowerCase()
-    .replace(/\s+/g, '-')
-    .replace(/-/g, ' ')
-    .replace(/\(mpx\)/gi, ' (MonkeyPox)');
-  const friendlyName = paletteFriendlyNames[normalizedKey] || baseName
-    .replace(/-/g, ' ')
-    .replace(/\(mpx\)/gi, ' (MonkeyPox)');
-
-  const capitalizeWords = (str) => str.replace(/\b\w/g, (char) => char.toUpperCase());
-  const formattedName = capitalizeWords(friendlyName);
-
-  return isReversed ? `${formattedName} (Reversed)` : formattedName;
-};
-
-<Meta title="Design Systems/Colors" />
-
-# Visualization Color Palettes
-The color palettes are predefined sets of colors organized into categories like sequential, qualitative, and complementary groups. These groups are designed with visual clarity in mind to ensure a cohesive and effective representation of data. The palettes are listed alphabetically, with reversed versions placed directly next to their original counterparts to maintain consistency across the application. In the codebase, these palettes are dynamically applied to generate and display color schemes in various UI components, such as charts and visualizations.
-
-<ColorPalette>
-  {Object.entries(orderedPalettes).map(([paletteName, colors]) => {
-
-
-    return (
-    <ColorItem
-      key={paletteName}
-      title={getPaletteName(paletteName)}
-      colors={colors}
-    />
-  )}
-  )}
-</ColorPalette>
-
-# CDC Specific & Additional Colors
-These are additional color palettes that can be used for various UI components. When using these consult CDC Level documentation.
-
-
-<ColorPalette>
-  {[
-    {
-      title: 'Blue',
-      colors: {
-        Primary: '#005eaa',
-        Secondary: '#88c3ea',
-        Tertiary: '#c0e9ff',
-        Quaternary: '#edf9ff'
-      }
-    },
-    {
-      title: 'Purple',
-      colors: {
-        Primary: '#712177',
-        Secondary: '#b890bb',
-        Tertiary: '#e3d3e4',
-        Quaternary: '#f7f2f7'
-      }
-    },
-    {
-      title: 'Brown',
-      colors: {
-        Primary: '#705043',
-        Secondary: '#ad907b',
-        Tertiary: '#d7ccc8',
-        Quaternary: '#f2ebe8'
-      }
-    },
-    {
-      title: 'Teal',
-      colors: {
-        Primary: '#00695c',
-        Secondary: '#4ebaaa',
-        Tertiary: '#ceece7',
-        Quaternary: '#ebf7f5'
-      }
-    },
-    {
-      title: 'Pink',
-      colors: {
-        Primary: '#af4448',
-        Secondary: '#e57373',
-        Tertiary: '#ffc2c2',
-        Quaternary: '#ffe7e7'
-      }
-    },
-    {
-      title: 'Orange',
-      colors: {
-        Primary: '#bb4d00',
-        Secondary: '#ffad42',
-        Tertiary: '#ffe97d',
-        Quaternary: '#fff4cf'
-      }
-    },
-    {
-      title: 'Slate',
-      colors: {
-        Primary: '#29434e',
-        Secondary: '#7e9ba5',
-        Tertiary: '#b6c6d2',
-        Quaternary: '#e2e8ed'
-      }
-    },
-    {
-      title: 'Indigo',
-      colors: {
-        Primary: '#26418f',
-        Secondary: '#92a6dd',
-        Tertiary: '#dee8ff',
-        Quaternary: '#f2f6ff'
-      }
-    },
-    {
-      title: 'Cyan',
-      colors: {
-        Primary: '#006778',
-        Secondary: '#65b0bd',
-        Tertiary: '#cce5e9',
-        Quaternary: '#ebf5f6'
-      }
-    },
-    {
-      title: 'Green',
-      colors: {
-        Primary: '#4b830d',
-        Secondary: '#84bc49',
-        Tertiary: '#dcedc8',
-        Quaternary: '#f1f8e9'
-      }
-    },
-    {
-      title: 'Amber',
-      colors: {
-        Primary: '#fbab18',
-        Secondary: '#ffd54f',
-        Tertiary: '#ffecb3',
-        Quaternary: '#fff7e1'
-      }
-    },
-    {
-      title: 'Grayscale',
-      colors: {
-        'Base Color': '#333',
-        'Lightest Gray': '#f2f2f2',
-        'Light Gray': '#c7c7c7',
-        'Medium Gray': '#565656',
-        'Dark Gray': '#333',
-      }
-    },
-    {
-      title: 'White',
-      colors: ['#FFF']
-    },
-    {
-      title: 'Red',
-      colors: ['#d8000c']
-    }
-  ].map(({ title, colors }) => (
-    <ColorItem key={title} title={title} colors={colors} subtitle={'test'} />
-  ))}
-</ColorPalette>

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

@@ -1,14 +0,0 @@
-import { Meta, IconGallery, IconItem } from '@storybook/blocks';
-import Icon, { ICON_TYPES } from '../Icon'
-
-<Meta title="Design Systems/Iconography" />
-
-# Iconography
-
-<IconGallery>
-  {ICON_TYPES.map((name) => (
-  <IconItem name={name}>
-      <Icon display={name} />
-  </IconItem>
-  ))}
-</IconGallery>

package/data/colorPalettes.js

@@ -1,171 +0,0 @@
-import { updatePaletteNames } from '../helpers/updatePaletteNames'
-
-const colorPalettesMap = {
-  yelloworangered: ['#ffffcc', '#ffeda0', '#fed976', '#feb24c', '#fd8d3c', '#fc4e2a', '#e31a1c', '#bd0026', '#800026'],
-  yelloworangebrown: [
-    '#ffffe5',
-    '#fff7bc',
-    '#fee391',
-    '#fec44f',
-    '#fe9929',
-    '#ec7014',
-    '#cc4c02',
-    '#993404',
-    '#662506'
-  ],
-  pinkpurple: ['#fff7f3', '#fde0dd', '#fcc5c0', '#fa9fb5', '#f768a1', '#dd3497', '#ae017e', '#7a0177', '#49006a'],
-  bluegreen: ['#fff7fb', '#ece2f0', '#d0d1e6', '#a6bddb', '#67a9cf', '#3690c0', '#02818a', '#016c59', '#014636'],
-  orangered: ['#fff7ec', '#fee8c8', '#fdd49e', '#fdbb84', '#fc8d59', '#ef6548', '#d7301f', '#b30000', '#7f0000'],
-  red: ['#fff5f0', '#fee0d2', '#fcbba1', '#fc9272', '#fb6a4a', '#ef3b2c', '#cb181d', '#a50f15', '#67000d'],
-  greenblue: ['#f7fcf0', '#e0f3db', '#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#267BA6', '#0868ac', '#084081'],
-  yellowpurple: ['#FFF0B0', '#F5CC76', '#EDAE4B', '#E3683C', '#BF2A48', '#6D2059', '#8F0C4B', '#310958', '#0E0943'],
-  qualitative1: [
-    '#a6cee3',
-    '#1f78b4',
-    '#b2df8a',
-    '#33a02c',
-    '#fb9a99',
-    '#e31a1c',
-    '#6a3d9a',
-    '#cab2d6',
-    '#E31A90',
-    '#15017A',
-    '#C2C0FC'
-  ],
-  qualitative2: ['#7fc97f', '#beaed4', '#ff9', '#386cb0', '#f0027f', '#bf5b17', '#666', '#fedab8'],
-  qualitative3: ['#1b9e77', '#d95f02', '#7570b3', '#e7298a', '#66a61e', '#e6ab02', '#a6761d', '#666'],
-  qualitative4: ['#e41a1c', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00', '#ff3', '#a65628', '#f781bf'],
-  // qualitative9 doesn't appear to be used anywhere...
-  qualitative9: ['#497d0c', '#84BC49', '#88c3ea', '#fcad90', '#f26b4f', '#c31b1f', '#c31b1f'],
-  'sequential-blue-2(MPX)': [
-    '#F5FEFF',
-    '#E1FBFF',
-    '#C0F2FD',
-    '#94E2ED',
-    '#5EBAD4',
-    '#3695BE',
-    '#2273A0',
-    '#0E5181',
-    '#093460'
-  ],
-  'sequential-orange(MPX)': [
-    '#FFFDF0',
-    '#FFF7DC',
-    '#FFE9C2',
-    '#FFD097',
-    '#F7A866',
-    '#EB7723',
-    '#B95117',
-    '#853209',
-    '#661F00'
-  ],
-  colorblindsafe: ['#e69f00', '#56b4e9', '#009e73', '#f0e442', '#0072b2', '#d55e00', '#cc79a7', '#000000', '#7e5803']
-}
-
-// * ============= Palettes for Chart project ==========  * //
-
-const colorPalettes2 = {
-  'qualitative-bold': [
-    '#377eb8',
-    '#ff7f00',
-    '#4daf4a',
-    '#984ea3',
-    '#e41a1c',
-    '#ffff33',
-    '#a65628',
-    '#f781bf',
-    '#3399CC'
-  ],
-
-  'qualitative-soft': [
-    '#A6CEE3',
-    '#1F78B4',
-    '#B2DF8A',
-    '#33A02C',
-    '#FB9A99',
-    '#E31A1C',
-    '#FDBF6F',
-    '#FF7F00',
-    '#ACA9EB'
-  ],
-  qualitative1: [
-    '#a6cee3',
-    '#1f78b4',
-    '#b2df8a',
-    '#33a02c',
-    '#fb9a99',
-    '#e31a1c',
-    '#6a3d9a',
-    '#cab2d6',
-    '#E31A90',
-    '#15017A',
-    '#C2C0FC'
-  ],
-
-  qualitative2: ['#7fc97f', '#beaed4', '#ff9', '#386cb0', '#f0027f', '#bf5b17', '#666', '#fedab8'],
-
-  qualitative3: ['#1b9e77', '#d95f02', '#7570b3', '#e7298a', '#66a61e', '#e6ab02', '#a6761d', '#666'],
-
-  qualitative4: ['#e41a1c', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00', '#ff3', '#a65628', '#f781bf'],
-
-  'sequential-blue': ['#C6DBEF', '#9ECAE1', '#6BAED6', '#4292C6', '#2171B5', '#084594'],
-  'sequential-blue-2-(MPX)': ['#D5F6F9', '#99E2ED', '#5FB6D1', '#3189B0', '#116091', '#0A3E72'],
-  'sequential-orange-(MPX)': ['#FFEFCF', '#FFD49C', '#F7A866', '#EB7723', '#B95117', '#862B0B'],
-  'sequential-green': ['#C7E9C0', '#A1D99B', '#74C476', '#41AB5D', '#238B45', '#005A32'],
-
-  colorblindsafe: ['#e69f00', '#56b4e9', '#009e73', '#f0e442', '#0072b2', '#d55e00', '#cc79a7', '#000000', '#7e5803']
-}
-// * ============= Palettes for Paired bar Chart ==========  * //
-export const colorPalettes3 = {
-  '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']
-}
-
-const sequentialColors = {
-  'Sequential Blue': ['#C6DBEF', '#9ECAE1', '#6BAED6', '#4292C6', '#2171B5', '#084594'],
-  'Sequential Blue Two': ['#D5F6F9', '#99E2ED', '#5FB6D1', '#3189B0', '#116091', '#0A3E72'],
-  'Sequential Blue Three': [
-    '#F5FEFF',
-    '#E1FBFF',
-    '#C0F2FD',
-    '#94E2ED',
-    '#5EBAD4',
-    '#3695BE',
-    '#2273A0',
-    '#0E5181',
-    '#093460'
-  ],
-  'Sequential Orange': ['#FFEFCF', '#FFD49C', '#F7A866', '#EB7723', '#B95117', '#862B0B'],
-  'Sequential Orange Two': [
-    '#FFFDF0',
-    '#FFF7DC',
-    '#FFE9C2',
-    '#FFD097',
-    '#F7A866',
-    '#EB7723',
-    '#B95117',
-    '#853209',
-    '#661F00'
-  ],
-  'Sequential Green': ['#C7E9C0', '#A1D99B', '#74C476', '#41AB5D', '#238B45', '#005A32']
-}
-
-export const sequentialPalettes = sequentialColors
-export const colorPalettesChart = updatePaletteNames(colorPalettes2)
-const colorPalettes = updatePaletteNames(colorPalettesMap)
-export const twoColorPalette = updatePaletteNames(colorPalettes3)
-export default colorPalettes