cfpb · higs4281 · Apr 16, 2026 · Apr 9, 2026 · Apr 9, 2026 · Apr 9, 2026
diff --git a/cypress/e2e/common/filters.cy.js b/cypress/e2e/common/filters.cy.js
@@ -59,7 +59,7 @@ describe('Filter Panel', () => {
     cy.url().should('include', `date_received_max=202`);
     cy.log('can expand/collapse/apply filter group');
     // default date Filter pills
-    cy.get('.pill-panel .pill').should('have.length', 1);
+    cy.get('.pill-panel .a-tag-filter').should('have.length', 1);
     waitForLoading();
 
     cy.log('close simple filter, as it is open by default');
@@ -86,13 +86,13 @@ describe('Filter Panel', () => {
 
     cy.url().should('include', 'timely=Yes');
     // Filter pill
-    cy.get('.pill-panel .pill').contains('Timely: Yes').should('exist');
+    cy.get('.pill-panel .a-tag-filter').contains('Timely: Yes').should('exist');
 
     // Filter clear button
-    cy.get('li.clear-all').should('exist');
-    cy.get('li.clear-all').click();
+    cy.get('li.pill-panel__clear button').should('exist');
+    cy.get('li.pill-panel__clear button').click();
 
-    cy.get('.pill-panel .pill').should('not.exist');
+    cy.get('.pill-panel .a-tag-filter').should('not.exist');
 
     // Product/Sub-product
     cy.log('can collapse/expand a complex filter');
@@ -134,7 +134,7 @@ describe('Filter Panel', () => {
     cy.get('input#product-mortgage').click({ force: true });
     waitForLoading();
 
-    cy.get('.pill-panel .pill').contains('Mortgage').should('exist');
+    cy.get('.pill-panel .a-tag-filter').contains('Mortgage').should('exist');
     cy.url().should('include', 'product=Mortgage');
     cy.log('remove filter');
     cy.get('input#product-mortgage').click({ force: true });
@@ -157,13 +157,17 @@ describe('Filter Panel', () => {
 
     cy.url().should('include', '&product=Mortgage%E2%80%A2FHA%20mortgage');
 
-    cy.get('.pill-panel .pill').contains('FHA mortgage').should('exist');
+    cy.get('.pill-panel .a-tag-filter')
+      .contains('FHA mortgage')
+      .should('exist');
 
     cy.log('remove sub-filter when applying parent filter');
     cy.get('input#product-mortgage').click({ force: true });
     waitForLoading();
 
-    cy.get('.pill-panel .pill').contains('FHA mortgage').should('not.exist');
+    cy.get('.pill-panel .a-tag-filter')
+      .contains('FHA mortgage')
+      .should('not.exist');
 
     cy.url().should('not.include', '&product=Mortgage%E2%80%A2FHA%20mortgage');
     cy.url().should('include', 'product=Mortgage');
@@ -194,6 +198,6 @@ describe('Filter Panel', () => {
 
     cy.get('.state .typeahead-selector li').contains('Texas').click();
 
-    cy.get('.pill-panel .pill').contains('TX').should('exist');
+    cy.get('.pill-panel .a-tag-filter').contains('TX').should('exist');
   });
 });
diff --git a/cypress/e2e/document/document.cy.js b/cypress/e2e/document/document.cy.js
@@ -40,7 +40,7 @@ describe('Document View', () => {
         'Relevance',
       );
 
-      cy.contains('.pill', 'Has narrative').should('be.visible');
+      cy.contains('.a-tag-filter', 'Has narrative').should('be.visible');
 
       cy.get('#filterHasNarrative').should('be.checked');
       cy.get('.cards-panel .card-container a').first().click();
@@ -58,7 +58,7 @@ describe('Document View', () => {
         'Relevance',
       );
 
-      cy.contains('.pill', 'Has narrative').should('be.visible');
+      cy.contains('.a-tag-filter', 'Has narrative').should('be.visible');
 
       cy.get('#filterHasNarrative').should('be.checked');
     });

diff --git a/dist/ccdb5.css b/dist/ccdb5.css
diff --git a/dist/ccdb5.js b/dist/ccdb5.js
diff --git a/dist/ccdb5.js.LICENSE.txt b/dist/ccdb5.js.LICENSE.txt
@@ -117,7 +117,7 @@
  */
 
 /**
- * react-router v7.13.1
+ * react-router v7.14.1
  *
  * Copyright (c) Remix Software Inc.
  *

diff --git a/dist/index.html b/dist/index.html
@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Development Harness</title>
   <script defer src="/ccdb5.js"></script><link href="/ccdb5.css" rel="stylesheet"></head>
-  <body>
+  <body class="ccdb-dev-harness">
     <div id="ccdb-ui-root"></div>
   </body>
 </html>
diff --git a/jest.config.js b/jest.config.js
@@ -15,10 +15,10 @@ module.exports = {
   ],
   coverageThreshold: {
     global: {
-      branches: 86,
-      functions: 93,
-      lines: 94,
-      statements: 94,
+      branches: 81,
+      functions: 91,
+      lines: 91,
+      statements: 90,
     },
   },
   coverageReporters: ['lcov', 'text', 'html', 'text-summary'],

diff --git a/package.json b/package.json
@@ -34,27 +34,27 @@
     "preview": "rsbuild preview"
   },
   "dependencies": {
-    "@cfpb/cfpb-design-system": "^4.4.0",
-    "@cfpb/design-system-react": "^1.0.0",
+    "@cfpb/cfpb-design-system": "^5.3.1",
+    "@cfpb/design-system-react": "^1.0.2",
     "@reduxjs/toolkit": "^2.11.2",
-    "britecharts": "git+https://github.com/cfpb/cfpb-britecharts.git#v2.5",
+    "britecharts": "git+https://github.com/cfpb/cfpb-britecharts.git#v2.6",
     "d3": "^7.9.0",
     "d3-array": "3.2.4",
     "dayjs": "^1.11.20",
-    "highcharts": "12.5.0",
+    "highcharts": "12.6.0",
     "history": "^5.3.0",
     "intro.js": "7.2.0",
     "intro.js-react": "1.0.0",
     "prop-types": "^15.8.1",
     "query-string": "^9.3.1",
-    "react": "^19.2.4",
+    "react": "^19.2.5",
     "react-bootstrap": "^2.10.10",
     "react-bootstrap-typeahead": "^6.4.1",
-    "react-dom": "^19.2.4",
+    "react-dom": "^19.2.5",
     "react-fast-compare": "^3.2.2",
     "react-modal": "^3.16.3",
     "react-redux": "^9.2.0",
-    "react-router": "^7.13.1"
+    "react-router": "^7.14.1"
   },
   "devDependencies": {
     "@babel/core": "^7.29.0",
@@ -64,7 +64,7 @@
     "@babel/preset-react": "^7.28.5",
     "@cfpb/browserslist-config": "^0.0.6",
     "@eslint/js": "^9.39.4",
-    "@rsbuild/core": "^1.7.3",
+    "@rsbuild/core": "^1.7.5",
     "@rsbuild/plugin-react": "^1.4.6",
     "@rsbuild/plugin-sass": "^1.5.1",
     "@rsbuild/plugin-svgr": "^1.3.1",
@@ -74,40 +74,40 @@
     "@testing-library/react": "^16.3.2",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.6.1",
-    "autoprefixer": "^10.4.27",
+    "autoprefixer": "^10.5.0",
     "babel-jest": "^30.3.0",
     "babel-plugin-module-resolver": "^5.0.3",
     "coveralls-next": "^6.0.1",
-    "cypress": "^15.12.0",
+    "cypress": "^15.13.1",
     "eslint": "^9.39.4",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-cypress": "^5.3.0",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jest": "^29.15.0",
+    "eslint-plugin-jest": "^29.15.2",
     "eslint-plugin-jest-dom": "^5.5.0",
-    "eslint-plugin-jsdoc": "^62.8.0",
+    "eslint-plugin-jsdoc": "^62.9.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-redux": "^4.2.2",
-    "eslint-plugin-testing-library": "^7.16.1",
-    "globals": "^17.4.0",
+    "eslint-plugin-testing-library": "^7.16.2",
+    "globals": "^17.5.0",
     "husky": "^9.1.7",
     "identity-obj-proxy": "3.0.0",
     "jest": "^30.3.0",
     "jest-environment-jsdom": "^30.3.0",
     "jest-fetch-mock": "^3.0.3",
     "lint-staged": "^16.4.0",
-    "lodash": "^4.17.23",
-    "postcss": "^8.5.8",
-    "prettier": "^3.8.1",
+    "lodash": "^4.18.1",
+    "postcss": "^8.5.10",
+    "prettier": "^3.8.3",
     "release-it": "^19.2.4",
-    "sass": "^1.98.0",
+    "sass": "^1.99.0",
     "string-replace-loader": "^3.3.0",
-    "stylelint": "^17.5.0",
+    "stylelint": "^17.8.0",
     "stylelint-config-standard": "^40.0.0",
     "stylelint-config-standard-scss": "^17.0.0",
-    "webpack": "^5.105.4"
+    "webpack": "^5.106.2"
   },
   "lint-staged": {
     "src/**/*.{css,scss}": [

diff --git a/public/index.html b/public/index.html
@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Development Harness</title>
   </head>
-  <body>
+  <body class="ccdb-dev-harness">
     <div id="ccdb-ui-root"></div>
   </body>
 </html>
diff --git a/rsbuild.config.mts b/rsbuild.config.mts
@@ -106,6 +106,8 @@ export default defineConfig({
     proxy: {
       // http://localhost:3000/api -> http://localhost:3000/api
       // http://localhost:3000/api/foo -> http://localhost:3000/api/foo
+      // swap for local development when the API is down.
+      // https://www.consumerfinance.gov -> http://localhost:8000/
       '/data-research': 'https://www.consumerfinance.gov',
     },
   },

diff --git a/src/api/params/params.js b/src/api/params/params.js
@@ -18,13 +18,7 @@ export function extractAggregationParams(filters, query) {
       !['frm', 'page', 'search_after', 'size', 'sort'].includes(key),
   );
 
-  const filterParams = Object.keys(filters).filter(
-    (key) =>
-      // exclude these from query
-      !['dataNormalization', 'enablePer1000', 'mapWarningEnabled'].includes(
-        key,
-      ),
-  );
+  const filterParams = Object.keys(filters);
 
   // Grab specific attributes from the reducers
   return Object.assign(
@@ -42,13 +36,7 @@ export function extractAggregationParams(filters, query) {
  * @returns {object} a dictionary of strings
  */
 export function extractBasicParams(filterState, queryState) {
-  const filterParams = Object.keys(filterState).filter(
-    (key) =>
-      // exclude these from query
-      !['dataNormalization', 'enablePer1000', 'mapWarningEnabled'].includes(
-        key,
-      ),
-  );
+  const filterParams = Object.keys(filterState);
 
   // Grab specific attributes from the reducers
   return Object.assign(
@@ -166,13 +154,7 @@ export function extractTrendsParams(filters, query, trends) {
       !['frm', 'page', 'search_after', 'size', 'sort'].includes(key),
   );
 
-  const filterParams = Object.keys(filterState).filter(
-    (key) =>
-      // exclude these from query
-      !['dataNormalization', 'enablePer1000', 'mapWarningEnabled'].includes(
-        key,
-      ),
-  );
+  const filterParams = Object.keys(filterState);
 
   // Grab specific attributes from the reducers
   return Object.assign(

diff --git a/src/components/ActionBar/ActionBar.js b/src/components/ActionBar/ActionBar.js
@@ -20,7 +20,7 @@ export const ActionBar = () => {
     dispatch(updatePrintModeOn());
   };
   return (
-    <div>
+    <>
       <div className="action-bar" id="search-summary">
         {total === docCount ? (
           <Heading type="2">
@@ -65,6 +65,6 @@ export const ActionBar = () => {
         )}
       </div>
       <StaleDataWarnings />
-    </div>
+    </>
   );
 };
diff --git a/src/components/ActionBar/ActionBar.scss b/src/components/ActionBar/ActionBar.scss
@@ -2,23 +2,25 @@
 @use 'css/base' as *;
 
 .action-bar {
-  border: 1px solid var(--gray-40);
-  border-left: 0; // Don't double the border with the filters
+  border-left: 1px solid transparent;
+  border-right: 1px solid var(--gray-40);
+  border-bottom: 1px solid var(--gray-40);
   background-color: var(--green-20);
   padding: $gutter-normal $grid-gutter-width;
+  margin-left: -15px;
 
   h2 {
     margin: 0;
 
-    @media screen and (max-width: $layout-breakpoint-phone-max) {
+    @media screen and (max-width: $bp-xs-max) {
       padding: $gutter-normal;
     }
   }
 
   .export-results {
     padding-top: $gutter-minimum;
-    margin: 0;
-    margin-bottom: $gutter-minimum;
+    margin: 0 0 $gutter-minimum;
+
     .a-btn {
       margin-right: $gutter-normal;
       font-size: $size-v;
@@ -30,33 +32,19 @@
     }
   }
 
-  .a-btn--link {
-    color: var(--pacific-dark);
-
-    &:hover {
-      color: var(--navy);
-    }
-
-    &:focus {
-      color: var(--pacific-dark);
-      border: 1px dotted var(--pacific-dark);
-    }
-
-    &:active {
-      color: var(--navy);
-      border: 1px dotted var(--navy);
-    }
-  }
-
-  @media screen and (max-width: $layout-breakpoint-phone-max) {
-    padding-left: 0;
+  @media screen and (max-width: $bp-xs-max) {
+    margin: 0;
+    padding-left: $gutter-normal;
+    padding-right: $gutter-normal;
     border: 1px solid var(--gray-40);
+    width: 100%;
+    box-sizing: border-box;
     .export-results {
-      margin-left: 15px;
+      margin-left: 0;
     }
   }
 
-  @media screen and (min-width: $layout-breakpoint-superwide-min){
-    padding-left: 40px;
+  @media screen and (max-width: 749px) {
+    border-left: 1px solid var(--gray-40);
   }
 }
diff --git a/src/components/Charts/ChartWrapper/ChartWrapper.js b/src/components/Charts/ChartWrapper/ChartWrapper.js
@@ -1,12 +1,13 @@
 import './ChartWrapper.scss';
 import PropTypes from 'prop-types';
+import { Paragraph } from '@cfpb/design-system-react';
 
 export const ChartWrapper = ({ domId, hasKey }) => (
   <section className={`${hasKey ? 'ext-tooltip' : ''}`}>
     <div className="chart-wrapper">
-      <p className="y-axis-label">Complaints</p>
+      <Paragraph className="y-axis-label">Complaints</Paragraph>
       <div id={domId} />
-      <p className="x-axis-label">Date received by the CFPB</p>
+      <Paragraph className="x-axis-label">Date received by the CFPB</Paragraph>
     </div>
   </section>
 );
-Original file line number
+Diff line change
@@ Expand Up / @@ -117,7 +117,7 @@ @@
      */
     /**
-     * react-router v7.13.1
+     * react-router v7.14.1
      *
      * Copyright (c) Remix Software Inc.
      *
@@ Expand Down @@