@nypl/design-system-react-components 1.4.2 → 1.5.0-rc

package/dist/design-system-react-components.cjs.development.js

@@ -1415,7 +1415,7 @@ var _excluded$R = ["accordionData", "id", "isDefaultOpen", "isAlwaysRendered", "
  * Get the minus or plus icon depending on whether the accordion
  * is open or closed.
  */
-var getIcon = function getIcon(isExpanded, index, id) {
+var getIcon = function getIcon(isExpanded, index, id, iconColor) {
   if (isExpanded === void 0) {
     isExpanded = false;
   }
@@ -1423,7 +1423,8 @@ var getIcon = function getIcon(isExpanded, index, id) {
   return React__default.createElement(Icon, {
     id: "accordion-" + id + "-icon-" + index,
     name: iconName,
-    size: "small"
+    size: "small",
+    color: iconColor
   });
 };
 /**
@@ -1431,7 +1432,7 @@ var getIcon = function getIcon(isExpanded, index, id) {
  * array. This automatically creates the `AccordionButton` and `AccordionPanel`
  * combination that is required for the Chakra `Accordion` component.
  */
-var getElementsFromData = function getElementsFromData(data, id, isAlwaysRendered, panelMaxHeight) {
+var getElementsFromData = function getElementsFromData(data, id, isAlwaysRendered, isDarkMode, panelMaxHeight) {
   var _data, _data2;
   if (data === void 0) {
     data = [];
@@ -1439,7 +1440,11 @@ var getElementsFromData = function getElementsFromData(data, id, isAlwaysRendere
   if (isAlwaysRendered === void 0) {
     isAlwaysRendered = false;
   }
-  var colorMap = {
+  var colorMap = isDarkMode ? {
+    "default": "ui.white",
+    warning: "ui.status.primary",
+    error: "dark.ui.error.primary"
+  } : {
     "default": "ui.white",
     warning: "ui.status.primary",
     error: "ui.status.secondary"
@@ -1472,7 +1477,7 @@ var getElementsFromData = function getElementsFromData(data, id, isAlwaysRendere
       var bgColorByAccordionType = colorMap[content.accordionType];
       return React__default.createElement(React__default.Fragment, null, React__default.createElement(react.AccordionButton, {
         id: id + "-button-" + index,
-        borderColor: "ui.gray.medium",
+        borderColor: isDarkMode ? "dark.ui.border.default" : "ui.gray.medium",
         padding: multiplePadding,
         bg: !content.accordionType ? colorMap["default"] : bgColorByAccordionType,
         _expanded: {
@@ -1481,13 +1486,22 @@ var getElementsFromData = function getElementsFromData(data, id, isAlwaysRendere
         _hover: {
           bg: !content.accordionType || content.accordionType === "default" ? "transparent" : bgColorByAccordionType,
           borderColor: "ui.gray.dark"
+        },
+        _dark: {
+          _expanded: {
+            bg: "dark.ui.bg.active"
+          },
+          bg: "dark.ui.bg.default",
+          color: "dark.ui.typography.heading",
+          borderLeft: "4px solid",
+          borderLeftColor: !content.accordionType || content.accordionType === "default" ? "dark.ui.border.hover" : bgColorByAccordionType
         }
       }, React__default.createElement(react.Box, {
         as: "span",
         flex: "1",
         fontSize: multipleFontSize,
         textAlign: "left"
-      }, content.label), getIcon(isExpanded, index, id)), (isAlwaysRendered || isExpanded) && panel);
+      }, content.label), getIcon(isExpanded, index, id, isDarkMode ? "dark.ui.typography.heading" : "ui.black")), (isAlwaysRendered || isExpanded) && panel);
     });
   });
 };
@@ -1504,6 +1518,7 @@ var Accordion = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
     isAlwaysRendered = _props$isAlwaysRender === void 0 ? false : _props$isAlwaysRender,
     panelMaxHeight = props.panelMaxHeight,
     rest = _objectWithoutPropertiesLoose(props, _excluded$R);
+  var isDarkMode = react.useColorMode().colorMode === "dark";
   // Pass `0` to open the first accordion in the 0-index based array.
   var openFirstAccordion = isDefaultOpen ? [0] : undefined;
   return React__default.createElement(react.Accordion, Object.assign({
@@ -1511,7 +1526,7 @@ var Accordion = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
     defaultIndex: openFirstAccordion,
     id: id,
     ref: ref
-  }, rest), getElementsFromData(accordionData, id, isAlwaysRendered, panelMaxHeight));
+  }, rest), getElementsFromData(accordionData, id, isAlwaysRendered, isDarkMode, panelMaxHeight));
 }));
 
 var _excluded$S = ["buttonType", "children", "className", "id", "isDisabled", "mouseDown", "onClick", "size", "type"];
@@ -2028,13 +2043,15 @@ var AlphabetFilter = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(fu
     setSelectedLetter(clickedLetter);
     onClick && onClick(clickedLetter);
   };
+  // Set the color of the border of the selected letter based on the color mode.
+  var selectedLetterBorderColor = react.useColorModeValue("ui.gray.dark", "ui.gray.medium");
   var getButtonElement = function getButtonElement(item) {
     var isSelectedLetter = selectedLetter === item.value && item.value !== "showAll";
     var isShowAll = item.value === "showAll";
     var isButtonDisabled = isDisabled || activeLetters && !activeLetters.includes(item.value) && !isShowAll;
     var buttonStyles = isSelectedLetter ? _extends({}, styles.button, {
       border: "1px solid",
-      borderColor: "ui.border.hover"
+      borderColor: selectedLetterBorderColor
     }) : _extends({}, styles.button, {
       border: "1px solid transparent"
     });
@@ -4166,8 +4183,11 @@ var activeFocus = function activeFocus(darkMode) {
     boxShadow: "none",
     outline: "2px solid",
     outlineOffset: "2px",
-    outlineColor: darkMode ? "ui.white" : "ui.focus",
-    zIndex: "9999"
+    outlineColor: darkMode ? "dark.ui.focus" : "ui.focus",
+    zIndex: "9999",
+    _dark: {
+      outlineColor: "dark.ui.focus"
+    }
   };
 };
 // Used in `Checkbox` and `Radio`.
@@ -4184,6 +4204,14 @@ var checkboxRadioLabelStyles = {
   },
   _invalid: {
     color: "ui.error.primary"
+  },
+  _dark: {
+    _disabled: {
+      color: "dark.ui.disabled.primary"
+    },
+    _invalid: {
+      color: "dark.ui.error.primary"
+    }
   }
 };
 // Custom values not in the spacing theme.
@@ -4216,6 +4244,22 @@ var checkboxRadioHoverStyles = {
       _invalid: {
         borderColor: "ui.error.primary"
       }
+    },
+    _dark: {
+      span: {
+        _first: {
+          borderColor: "ui.gray.dark"
+        },
+        _checked: {
+          borderColor: "dark.ui.focus"
+        },
+        _disabled: {
+          borderColor: "dark.ui.disabled.primary"
+        },
+        _invalid: {
+          borderColor: "dark.ui.error.primary"
+        }
+      }
     }
   }
 };
@@ -4245,6 +4289,9 @@ var labelLegendText = {
   width: "100%",
   span: {
     fontWeight: "regular"
+  },
+  _dark: {
+    color: "dark.ui.typography.heading"
   }
 };
 // Used for the disabled state of Select and TextInput
@@ -4252,11 +4299,19 @@ var selectTextInputDisabledStyles = {
   bg: "ui.disabled.secondary",
   borderColor: "ui.disabled.primary",
   color: "ui.gray.dark",
-  opacity: "1"
+  opacity: "1",
+  _dark: {
+    bg: "dark.ui.bg.default",
+    borderColor: "dark.ui.disabled.secondary",
+    color: "dark.ui.disabled.primary"
+  }
 };
 // Used for the focus state of Select and TextInput
 var selectTextInputFocusStyles = /*#__PURE__*/_extends({}, /*#__PURE__*/activeFocus(), {
-  borderColor: "ui.focus"
+  borderColor: "ui.focus",
+  _dark: /*#__PURE__*/_extends({}, /*#__PURE__*/activeFocus(true), {
+    borderColor: "dark.ui.focus"
+  })
 });
 // Used for p, ul, and ol
 var textMargin = {
@@ -4278,7 +4333,11 @@ var global = {
     fontSize: "text.default",
     fontWeight: "text.default",
     lineHeight: "1.5",
-    overflowX: "hidden"
+    overflowX: "hidden",
+    _dark: {
+      bg: "dark.ui.bg.page",
+      color: "dark.ui.typography.body"
+    }
   },
   // styles for the `a` element
   a: {
@@ -4360,9 +4419,86 @@ var linkPrimary = "#0576D3";
 var linkSecondary = "#004B98";
 var brandPrimary = "#C60917";
 var brandSecondary = "#760000";
+var blogsPrimary = grayLightCool;
+var blogsSecondary = grayMedium;
+var educationPrimary = "#1D62E6";
+var educationSecondary = "#2540A4";
+var researchPrimary = "#00838A";
+var researchSecondary = "#006166";
+var researchLibraryLpa = "#005D53";
+var researchLibrarySchomburg = "#A03E31";
+var researchLibrarySchwartzman = brandSecondary;
+var whatsOnPrimary = "#242424";
+var whatsOnSecondary = black;
 var brandObj = {
-  primary: brandPrimary,
-  secondary: brandSecondary
+  light: {
+    primary: brandPrimary,
+    secondary: brandSecondary
+  },
+  dark: {
+    primary: /*#__PURE__*/hexToRGB(brandPrimary, 0.2),
+    secondary: /*#__PURE__*/hexToRGB(brandSecondary, 0.2)
+  }
+};
+var blogsObj = {
+  light: {
+    primary: blogsPrimary,
+    secondary: blogsSecondary
+  },
+  dark: {
+    primary: /*#__PURE__*/hexToRGB(blogsPrimary, 0.2),
+    secondary: /*#__PURE__*/hexToRGB(blogsSecondary, 0.2)
+  }
+};
+var booksAndMoreObj = {
+  light: brandObj.light,
+  dark: brandObj.dark
+};
+var educationObj = {
+  light: {
+    primary: educationPrimary,
+    secondary: educationSecondary
+  },
+  dark: {
+    primary: /*#__PURE__*/hexToRGB(educationPrimary, 0.2),
+    secondary: /*#__PURE__*/hexToRGB(educationSecondary, 0.2)
+  }
+};
+var locationsObj = {
+  light: brandObj.light,
+  dark: brandObj.dark
+};
+var researchObj = {
+  light: {
+    primary: researchPrimary,
+    secondary: researchSecondary
+  },
+  dark: {
+    primary: /*#__PURE__*/hexToRGB(researchPrimary, 0.2),
+    secondary: /*#__PURE__*/hexToRGB(researchSecondary, 0.2)
+  }
+};
+var researchLibraryObj = {
+  light: {
+    lpa: researchLibraryLpa,
+    schomburg: researchLibrarySchomburg,
+    schwatzman: researchLibrarySchwartzman
+  },
+  dark: {
+    lpa: /*#__PURE__*/hexToRGB(researchLibraryLpa, 0.2),
+    schomburg: /*#__PURE__*/hexToRGB(researchLibrarySchomburg, 0.2),
+    schwatzman: /*#__PURE__*/hexToRGB(researchLibrarySchwartzman, 0.2)
+  }
+};
+var whatsOnObj = {
+  light: {
+    primary: whatsOnPrimary,
+    secondary: whatsOnSecondary
+  },
+  dark: {
+    primary: /*#__PURE__*/hexToRGB(grayLightCool, 0.2),
+    secondary: /*#__PURE__*/hexToRGB(white, 0.05)
+  }
 };
 var colors = {
   transparent: "transparent",
@@ -4400,7 +4536,6 @@ var colors = {
     },
     // Semantic colors
     bg: {
-      page: white,
       "default": grayxLightCool,
       hover: grayLightCool,
       active: grayMedium
@@ -4433,12 +4568,22 @@ var colors = {
       "x-light-warm": "#F8F8F7"
     }
   },
-  // dark mode ui fills
+  // dark mode fills
   dark: {
+    brand: brandObj.dark,
+    section: {
+      blogs: blogsObj.dark,
+      "books-and-more": booksAndMoreObj.dark,
+      education: educationObj.dark,
+      locations: locationsObj.dark,
+      research: researchObj.dark,
+      "research-library": researchLibraryObj.dark,
+      "whats-on": whatsOnObj.dark
+    },
     ui: {
       /// State and link utilities
       disabled: {
-        primary: grayxDark,
+        primary: grayDark,
         secondary: grayxxDark
       },
       error: {
@@ -4448,6 +4593,8 @@ var colors = {
       focus: "#6090E3",
       link: {
         primary: "#79B7EB",
+        "primary-05": /*#__PURE__*/hexToRGB("#79B7EB", 0.05),
+        "primary-10": /*#__PURE__*/hexToRGB("#79B7EB", 0.1),
         secondary: "#95CFFF"
       },
       status: {
@@ -4478,49 +4625,33 @@ var colors = {
         heading: grayLightCool,
         body: grayMedium,
         inverse: {
-          heading: grayxxDark,
-          body: grayxxDark
+          heading: grayxxxDark,
+          body: grayxxxDark
         }
       }
     }
   },
   /** Brand fills are the NYPL primary and secondary colors. */
-  brand: brandObj,
+  brand: brandObj.light,
   /** Brand fills for sections on NYPL pages. */
   section: {
     /** Blogs is used for the Blogs section. */
-    blogs: {
-      primary: grayLightCool,
-      secondary: grayMedium
-    },
+    blogs: blogsObj.light,
     /** Books and More is used for the Catalog, Staff Picks, Recommendations,
      * New Arrivals, and E-Book Central. */
-    "books-and-more": brandObj,
+    "books-and-more": booksAndMoreObj.light,
     /** Education is used for the Education section front and associated
      * sub-sections. */
-    education: {
-      primary: "#1D62E6",
-      secondary: "#2540A4"
-    },
+    education: educationObj.light,
     /** Locations is used for Location Finder and all branch pages with
      * the exceptions of some research libraries. */
-    locations: brandObj,
+    locations: locationsObj.light,
     /** Research is used for the Research Catalog and SCC. */
-    research: {
-      primary: "#00838A",
-      secondary: "#006166"
-    },
+    research: researchObj.light,
     /** Research libraries with specific brand colors to adhere to. */
-    "research-library": {
-      lpa: "#005D53",
-      schomburg: "#A03E31",
-      schwartzman: brandSecondary
-    },
+    "research-library": researchLibraryObj.light,
     /** What's On is used for Exhibitions & Events. */
-    "whats-on": {
-      primary: "#242424",
-      secondary: black
-    }
+    "whats-on": whatsOnObj.light
   },
   /**
    * The following color scales are useful for color edge cases where a
@@ -4726,17 +4857,31 @@ var typography = {
 
 var containerStyles = {
   border: "none",
-  width: "100%"
+  width: "100%",
+  _dark: {
+    bg: "dark.ui.bg.default",
+    color: "dark.ui.typography.heading",
+    borderColor: "dark.ui.border.default"
+  }
 };
 var buttonStyles = {
   borderWidth: "1px",
-  fontWeight: "medium"
+  fontWeight: "medium",
+  _dark: {
+    bg: "dark.ui.bg.default",
+    color: "dark.ui.typography.heading"
+  }
 };
 var panelStyles = {
   padding: "s",
   borderLeftWidth: "1px",
   borderRightWidth: "1px",
-  borderBottomWidth: "1px"
+  borderBottomWidth: "1px",
+  _dark: {
+    bg: "dark.ui.bg.default",
+    color: "dark.ui.typography.body",
+    borderColor: "dark.ui.border.default"
+  }
 };
 var Accordion$1 = {
   parts: ["container", "button", "panel"],
@@ -4784,7 +4929,14 @@ var AudioPlayer$1 = {
   baseStyle: {
     invalid: {
       backgroundColor: "ui.bg.default",
-      padding: "s"
+      border: "1px solid",
+      borderColor: "ui.border.default",
+      padding: "s",
+      _dark: {
+        bg: "dark.ui.bg.default",
+        border: "1px solid",
+        borderColor: "dark.ui.border.default"
+      }
     }
   }
 };
@@ -4793,6 +4945,9 @@ var AudioPlayer$1 = {
 var blogs = {
   bg: "section.blogs.secondary",
   color: "ui.black",
+  _dark: {
+    bg: "dark.section.blogs.secondary"
+  },
   a: {
     _hover: {
       color: "ui.gray.x-dark"
@@ -4803,19 +4958,40 @@ var blogs = {
   }
 };
 var booksAndMore = {
-  bg: "section.books-and-more.secondary"
+  bg: "section.books-and-more.secondary",
+  _dark: {
+    bg: "dark.section.books-and-more.secondary"
+  }
+};
+var brand = {
+  bg: "brand.secondary",
+  _dark: {
+    bg: "dark.brand.secondary"
+  }
 };
 var education = {
-  bg: "section.education.secondary"
+  bg: "section.education.secondary",
+  _dark: {
+    bg: "dark.section.education.secondary"
+  }
 };
 var locations = {
-  bg: "section.locations.primary"
+  bg: "section.locations.primary",
+  _dark: {
+    bg: "dark.section.locations.primary"
+  }
 };
 var research = {
-  bg: "section.research.secondary"
+  bg: "section.research.secondary",
+  _dark: {
+    bg: "dark.section.research.secondary"
+  }
 };
 var whatsOn = {
-  bg: "section.whats-on.secondary"
+  bg: "section.whats-on.secondary",
+  _dark: {
+    bg: "dark.section.whats-on.secondary"
+  }
 };
 var Breadcrumb = {
   baseStyle: {
@@ -4825,6 +5001,10 @@ var Breadcrumb = {
     fontWeight: "breadcrumbs.default",
     paddingBottom: "xs",
     paddingTop: "xs",
+    _dark: {
+      bg: "dark.ui.bg.hover",
+      color: "dark.ui.typography.heading"
+    },
     ol: {
       alignItems: {
         base: "center",
@@ -4895,6 +5075,7 @@ var Breadcrumb = {
   variants: {
     blogs: blogs,
     booksAndMore: booksAndMore,
+    brand: brand,
     education: education,
     locations: locations,
     research: research,
@@ -4928,6 +5109,26 @@ var buttonBaseStyle = {
     color: "ui.gray.dark",
     opacity: "1",
     pointerEvents: "none"
+  },
+  _dark: {
+    _disabled: {
+      bg: "dark.ui.disabled.secondary",
+      color: "dark.ui.disabled.primary"
+    }
+  }
+};
+var ghostDarkStyles = {
+  bg: "transparent",
+  borderColor: "dark.ui.link.primary",
+  color: "dark.ui.link.primary",
+  _hover: {
+    bg: "dark.ui.link.primary-10",
+    borderColor: "dark.ui.link.secondary",
+    color: "dark.ui.link.secondary"
+  },
+  _disabled: {
+    bg: "dark.ui.bg.default",
+    borderColor: "dark.ui.disabled.primary"
   }
 };
 var generalSizeValues = function generalSizeValues(size, isPill) {
@@ -4972,7 +5173,16 @@ var primary = function primary(_ref) {
     buttonSize = _ref$buttonSize === void 0 ? "medium" : _ref$buttonSize;
   return _extends({
     bg: "ui.link.primary"
-  }, generalSizeValues(buttonSize));
+  }, generalSizeValues(buttonSize), {
+    _dark: {
+      bg: "dark.ui.link.primary",
+      color: "ui.gray.xxx-dark",
+      _hover: {
+        bg: "dark.ui.link.secondary",
+        color: "ui.gray.xxx-dark"
+      }
+    }
+  });
 };
 var secondary = function secondary(_ref2) {
   var _ref2$buttonSize = _ref2.buttonSize,
@@ -4992,7 +5202,8 @@ var secondary = function secondary(_ref2) {
       bg: "transparent",
       borderColor: "ui.disabled.primary",
       color: "ui.disabled.primary"
-    }
+    },
+    _dark: _extends({}, ghostDarkStyles)
   });
 };
 // The "link" type is deprecated but we still want to style
@@ -5011,6 +5222,15 @@ var link = function link(_ref3) {
     _hover: {
       bg: "transparent",
       color: "ui.link.secondary"
+    },
+    _dark: {
+      color: "dark.ui.link.primary",
+      _disabled: {
+        bg: "transparent"
+      },
+      _hover: {
+        color: "dark.ui.link.secondary"
+      }
     }
   });
 };
@@ -5027,6 +5247,15 @@ var text = function text(_ref4) {
     _hover: {
       bg: "ui.link.primary-05",
       color: "ui.link.secondary"
+    },
+    _dark: {
+      color: "dark.ui.link.primary",
+      _disabled: {
+        bg: "transparent"
+      },
+      _hover: {
+        color: "dark.ui.link.secondary"
+      }
     }
   });
 };
@@ -5036,7 +5265,7 @@ var pill = function pill(_ref5) {
   return _extends({
     bg: "ui.white",
     border: "1px solid",
-    borderColor: "ui.gray.light-cool",
+    borderColor: "ui.border.default",
     borderRadius: "button.pill",
     color: "inherit"
   }, generalSizeValues(buttonSize, true), {
@@ -5046,6 +5275,16 @@ var pill = function pill(_ref5) {
     },
     _disabled: {
       bg: "ui.gray.x-light-cool"
+    },
+    _dark: {
+      background: "transparent",
+      borderColor: "dark.ui.border.default",
+      color: "dark.ui.typography.heading",
+      _hover: {
+        background: "dark.ui.bg.hover",
+        borderColor: "dark.ui.border.hover",
+        color: "dark.ui.typography.heading"
+      }
     }
   });
 };
@@ -5064,7 +5303,8 @@ var iconOnly = function iconOnly(_ref6) {
       bg: "ui.link.primary-05",
       borderColor: "ui.link.secondary",
       color: "ui.link.secondary"
-    }
+    },
+    _dark: _extends({}, ghostDarkStyles)
   });
 };
 var callout = function callout(_ref7) {
@@ -5078,6 +5318,14 @@ var callout = function callout(_ref7) {
     },
     _active: {
       bg: "brand.secondary"
+    },
+    _dark: {
+      bg: "brand.primary",
+      color: "ui.white",
+      _hover: {
+        bg: "brand.secondary",
+        color: "ui.white"
+      }
     }
   });
 };
@@ -5090,6 +5338,14 @@ var noBrand = function noBrand(_ref8) {
   }, generalSizeValues(buttonSize), {
     _hover: {
       bg: "ui.gray.x-dark"
+    },
+    _dark: {
+      bg: "ui.gray.x-dark",
+      color: "ui.white",
+      _hover: {
+        bg: "ui.gray.dark",
+        color: "ui.white"
+      }
     }
   });
 };
@@ -5207,7 +5463,10 @@ var Card$1 = {
     } : {};
     var baseBorderStyles = isBordered ? {
       border: "1px solid",
-      borderColor: "ui.gray.medium"
+      borderColor: "ui.border.default",
+      _dark: {
+        borderColor: "dark.ui.border.default"
+      }
     } : {};
     var bodyPadding = getBodyPaddingStyles({
       isBordered: isBordered,
@@ -5266,8 +5525,13 @@ var Card$1 = {
       heading: {
         marginBottom: "xs",
         a: mainActionLink ? {
-          color: "ui.black"
-        } : null
+          color: "ui.typography.heading"
+        } : null,
+        _dark: {
+          a: mainActionLink ? {
+            color: "dark.ui.typography.heading"
+          } : null
+        }
       }
     }, baseBorderStyles, layoutStyles);
   }
@@ -5302,7 +5566,10 @@ var CardActions$1 = {
       }
     }, topBorderStyles, bottomBorderStyles, {
       justifyContent: justifyContent,
-      borderColor: "ui.gray.medium"
+      borderColor: "ui.border.default",
+      _dark: {
+        borderColor: "dark.ui.border.default"
+      }
     });
   }
 };
@@ -5411,6 +5678,49 @@ var baseStyleControl = {
   _invalid: {
     borderColor: "ui.error.primary",
     color: "ui.error.primary"
+  },
+  _dark: {
+    borderColor: "dark.ui.border.default",
+    backgroundColor: "dark.ui.bg.default",
+    color: "dark.ui.typography.body",
+    _checked: {
+      borderColor: "dark.ui.focus",
+      color: "dark.ui.focus",
+      _disabled: {
+        backgroundColor: "dark.ui.bg.default",
+        borderColor: "dark.ui.disabled.secondary",
+        svg: {
+          color: "dark.ui.disabled.secondary"
+        }
+      },
+      _indeterminate: {
+        color: "dark.ui.focus",
+        borderColor: "dark.ui.focus"
+      },
+      _invalid: {
+        borderColor: "dark.ui.error.primary",
+        color: "dark.ui.error.primary"
+      }
+    },
+    _indeterminate: {
+      color: "dark.ui.focus",
+      borderColor: "dark.ui.focus"
+    },
+    _disabled: {
+      backgroundColor: "dark.ui.bg.default",
+      borderColor: "dark.ui.disabled.secondary",
+      svg: {
+        color: "dark.ui.disabled.secondary"
+      }
+    },
+    _focus: {
+      boxShadow: "none",
+      outlineColor: "dark.ui.focus"
+    },
+    _invalid: {
+      borderColor: "dark.ui.error.primary",
+      color: "dark.ui.error.primary"
+    }
   }
 };
 // Style object for the Checkbox's label
@@ -5540,8 +5850,11 @@ var CustomImage = {
         width: "100%"
       }, imageSizes$1[size], {
         img: {
-          backgroundColor: "ui.gray.x-light-cool",
-          marginBottom: "xxs"
+          backgroundColor: "ui.bg.default",
+          marginBottom: "xxs",
+          _dark: {
+            backgroundColor: "dark.ui.bg.default"
+          }
         }
       }),
       figcaption: {
@@ -5550,12 +5863,16 @@ var CustomImage = {
       },
       img: _extends({
         display: "block",
-        backgroundColor: "ui.gray.x-light-cool",
+        backgroundColor: "ui.bg.default",
         boxSizing: "border-box",
         objectFit: "cover",
         position: "relative",
         width: "100%"
-      }, imageSizes$1[size]),
+      }, imageSizes$1[size], {
+        _dark: {
+          backgroundColor: "dark.ui.bg.default"
+        }
+      }),
       captionWrappers: {
         marginTop: "xxs"
       }
@@ -5576,13 +5893,16 @@ var CustomImageWrapper = {
     }, imageSizes$1[size], {
       crop: _extends({}, imageRatios[ratio]),
       img: {
-        backgroundColor: "ui.gray.x-light-cool",
+        backgroundColor: "ui.bg.default",
         height: "100%",
         left: "0",
         maxWidth: "100%",
         position: "absolute",
         top: "0",
-        width: "100%"
+        width: "100%",
+        _dark: {
+          backgroundColor: "dark.ui.bg.default"
+        }
       }
     });
   }
@@ -5617,7 +5937,19 @@ var select = {
   _invalid: {
     border: "1px solid",
     borderColor: "ui.error.primary",
-    boxShadow: "none"
+    boxShadow: "none",
+    color: "ui.error.primary"
+  },
+  _dark: {
+    backgroundColor: "dark.ui.bg.default",
+    borderColor: "dark.ui.border.default",
+    _hover: {
+      borderColor: "dark.ui.border.hover"
+    },
+    _invalid: {
+      borderColor: "dark.ui.error.primary",
+      color: "dark.ui.error.primary"
+    }
   }
 };
 var Select = {
@@ -5689,11 +6021,25 @@ var FeedbackBox = {
       p: "0",
       position: "absolute",
       span: /*#__PURE__*/screenreaderOnly(),
-      top: "xs"
+      top: "xs",
+      _dark: {
+        svg: {
+          fill: "dark.ui.typography.heading"
+        }
+      }
     },
     drawerBody: {
+      borderLeft: {
+        base: undefined,
+        md: "1px solid"
+      },
+      borderColor: "ui.border.default",
       paddingTop: "m",
-      paddingBottom: "m"
+      paddingBottom: "m",
+      _dark: {
+        background: "dark.ui.bg.page",
+        borderColor: "dark.ui.border.default"
+      }
     },
     drawerContent: {
       marginStart: "auto",
@@ -5706,6 +6052,11 @@ var FeedbackBox = {
       alignItems: "baseline",
       background: "ui.gray.light-cool",
       borderBottomWidth: "1px",
+      borderLeftWidth: {
+        base: undefined,
+        md: "1px"
+      },
+      borderTopWidth: "1px",
       display: "flex",
       fontSize: "text.default",
       px: "m",
@@ -5713,6 +6064,9 @@ var FeedbackBox = {
       paddingBottom: "s",
       p: {
         marginBottom: "0"
+      },
+      _dark: {
+        background: "dark.ui.bg.hover"
       }
     },
     openButton: {
@@ -5749,16 +6103,32 @@ var filterBarWidth = {
   }
 };
 var FilterBar = {
-  parts: ["modalHeader", "modalFooter", "modalCloseButton", "globalButtonGroup", "globalButtonGroupWrapper"],
+  parts: ["modalBody", "modalHeader", "modalFooter", "modalCloseButton", "globalButtonGroup", "globalButtonGroupWrapper"],
   baseStyle: function baseStyle(_ref) {
     var width = _ref.width;
     return {
       width: "full",
+      modalBody: {
+        _dark: {
+          background: "dark.ui.bg.page"
+        }
+      },
       modalHeader: {
-        bg: "ui.gray.x-light-cool"
+        bg: "ui.bg.default",
+        _dark: {
+          background: "dark.ui.bg.default",
+          borderBottom: "1px solid",
+          borderColor: "dark.ui.border.default"
+        }
       },
       modalFooter: {
-        bg: "ui.gray.x-light-cool"
+        bg: "ui.bg.default",
+        _dark: {
+          background: "dark.ui.bg.default",
+          borderTop: "1px solid",
+          borderColor: "dark.ui.border.default",
+          color: "dark.ui.typography.heading"
+        }
       },
       modalCloseButton: {
         mt: "8px"
@@ -5782,6 +6152,9 @@ var Footer = {
       lg: "30px 0"
     },
     position: "relative",
+    _dark: {
+      backgroundColor: "dark.ui.bg.default"
+    },
     // The two main lists.
     listsContainer: {
       display: "flex",
@@ -5895,7 +6268,10 @@ var Footer = {
           textDecoration: "none",
           svg: {
             width: "36px",
-            height: "36px"
+            height: "36px",
+            _dark: {
+              fill: "dark.ui.typography.body"
+            }
           }
         }
       }
@@ -5914,11 +6290,17 @@ var Footer = {
         backgroundColor: footerGray,
         outline: "solid 2px",
         outlineColor: "ui.white"
+      },
+      _dark: {
+        color: "dark.ui.typography.body"
       }
     },
     // All SVGs in the footer.
     svg: {
-      fill: "ui.white"
+      fill: "ui.white",
+      _dark: {
+        color: "dark.ui.typography.body"
+      }
     },
     // For the floating NYPL logo.
     logoContainer: {
@@ -5958,10 +6340,16 @@ var Footer = {
       width: {
         md: "400px"
       },
+      _dark: {
+        color: "dark.ui.typography.body"
+      },
       img: {
         bg: "transparent",
         height: "auto",
-        width: "100%"
+        width: "100%",
+        _dark: {
+          opacity: "0.8"
+        }
       }
     },
     copyright: {
@@ -5986,6 +6374,7 @@ var headerDarkBlue = "#135772";
 var headerFocusColor = "#0F465C";
 var headerLightBlue = "#78CCED";
 var headerRed = "#ED1C24";
+var headerRedDarkMode = "#DC6F73";
 var headerRedDonate = "#E32B31";
 var headerYellow = "#FEE34A";
 var headerFocus = {
@@ -5999,6 +6388,9 @@ var Header = {
   parts: ["container", "horizontalRule", "logo"],
   baseStyle: {
     fontFamily: "'system-ui', 'Segoe UI', Tahoma, 'Helvetica', 'arial'",
+    _dark: {
+      backgroundColor: "dark.ui.bg.default"
+    },
     container: {
       marginX: {
         md: "20px",
@@ -6014,7 +6406,10 @@ var Header = {
     horizontalRule: {
       bg: headerRed,
       marginTop: "0",
-      marginBottom: "0"
+      marginBottom: "0",
+      _dark: {
+        backgroundColor: "dark.brand.primary"
+      }
     },
     logo: {
       padding: {
@@ -6201,7 +6596,16 @@ var HeaderLogin = {
             base: "0",
             md: "28px"
           }
-        })
+        }),
+        _dark: {
+          color: "ui.gray.xx-dark",
+          svg: {
+            fill: "ui.gray.xx-dark"
+          },
+          _hover: {
+            color: "ui.gray.xx-dark"
+          }
+        }
       },
       patronGreeting: {
         alignSelf: "flex-start",
@@ -6298,7 +6702,16 @@ var HeaderLogin = {
             base: "0",
             md: "28px !important"
           }
-        })
+        }),
+        _dark: {
+          color: "ui.gray.xx-dark",
+          svg: {
+            fill: "ui.gray.xx-dark"
+          },
+          _hover: {
+            color: "ui.gray.xx-dark"
+          }
+        }
       }
     };
   }
@@ -6348,7 +6761,22 @@ var HeaderLoginButton = {
         },
         textDecoration: "none"
       },
-      _focus: headerFocus
+      _focus: headerFocus,
+      _dark: {
+        bg: {
+          base: isOpen ? headerBlack : "dark.ui.bg.default",
+          md: isOpen ? headerDarkBlue : "dark.ui.bg.default"
+        },
+        color: "dark.ui.typography.heading",
+        svg: {
+          fill: isOpen ? "dark.ui.typography.heading" : null
+        },
+        _hover: {
+          svg: {
+            fill: "dark.ui.typography.heading"
+          }
+        }
+      }
     };
   }
 };
@@ -6357,7 +6785,10 @@ var linkFocusHoverStyles = {
   borderBottom: "3px solid",
   color: headerRed,
   paddingBottom: "2px",
-  textDecoration: "none"
+  textDecoration: "none",
+  _dark: {
+    color: headerRedDarkMode
+  }
 };
 var HeaderLowerNav = {
   baseStyle: {
@@ -6377,7 +6808,12 @@ var HeaderLowerNav = {
       fontWeight: "medium",
       textDecoration: "none",
       _hover: linkFocusHoverStyles,
-      _focus: /*#__PURE__*/_extends({}, headerFocus, linkFocusHoverStyles)
+      _focus: /*#__PURE__*/_extends({}, headerFocus, linkFocusHoverStyles),
+      _dark: {
+        color: "dark.ui.typography.heading",
+        _hover: linkFocusHoverStyles,
+        _focus: /*#__PURE__*/_extends({}, headerFocus, linkFocusHoverStyles)
+      }
     }
   }
 };
@@ -6395,6 +6831,11 @@ var HeaderMobileIconNav = {
       minHeight: "60px",
       minWidth: "60px",
       _focus: headerFocus
+    },
+    _dark: {
+      svg: {
+        fill: "dark.ui.typography.heading"
+      }
     }
   }
 };
@@ -6489,7 +6930,13 @@ var HeaderMobileNavButton = {
           fill: isOpen ? "ui.white" : "ui.black"
         }
       },
-      _focus: headerFocus
+      _focus: headerFocus,
+      _dark: {
+        backgroundColor: isOpen ? headerBlack : "transparent",
+        svg: {
+          fill: "dark.ui.typography.heading"
+        }
+      }
     };
   }
 };
@@ -6565,7 +7012,10 @@ var HeaderSearchForm = {
           fontStyle: "normal"
         },
         _focus: headerFocus,
-        _hover: headerFocus
+        _hover: headerFocus,
+        _dark: {
+          color: "dark.ui.typography.body"
+        }
       }
     },
     searchBtn: {
@@ -6632,6 +7082,12 @@ var HeaderSearchForm = {
         backgroundColor: headerBlue
       },
       _focus: headerFocus
+    },
+    _dark: {
+      color: "ui.white",
+      label: {
+        color: "ui.white"
+      }
     }
   }
 };
@@ -6653,13 +7109,24 @@ var HeaderSearchButton = {
         md: "80px"
       },
       textDecoration: "none",
+      _dark: {
+        color: isOpen ? "ui.white" : "dark.ui.link.primary"
+      },
       span: {
         alignItems: "center",
         borderBottom: {
           md: "3px solid #1B7FA7"
         },
         display: "inline-flex",
-        lineHeight: "1.3"
+        lineHeight: "1.3",
+        _dark: {
+          borderBottom: isOpen ? "0" : {
+            md: "3px solid"
+          },
+          borderColor: {
+            md: "dark.ui.link.primary"
+          }
+        }
       },
       svg: {
         marginLeft: {
@@ -6669,6 +7136,12 @@ var HeaderSearchButton = {
         fill: {
           base: isOpen ? "ui.white" : "ui.black",
           md: isOpen ? "ui.white" : "ui.link.primary"
+        },
+        _dark: {
+          fill: {
+            base: isOpen ? "ui.white" : "dark.ui.typography.heading",
+            md: isOpen ? "ui.white" : "dark.ui.link.primary"
+          }
         }
       },
       _hover: {
@@ -6680,6 +7153,15 @@ var HeaderSearchButton = {
             base: isOpen ? "ui.white" : "ui.black",
             md: isOpen ? "ui.white" : "ui.link.primary"
           }
+        },
+        _dark: {
+          color: isOpen ? "ui.white" : "dark.ui.link.primary",
+          svg: {
+            fill: {
+              base: isOpen ? "ui.white" : "dark.ui.typography.heading",
+              md: isOpen ? "ui.white" : "dark.ui.link.primary"
+            }
+          }
         }
       },
       _focus: headerFocus
@@ -6711,7 +7193,19 @@ var SitewideAlerts = {
       },
       p: {
         marginBottom: "0"
+      },
+      _dark: {
+        color: "ui.typography.heading",
+        a: {
+          color: "ui.typography.heading",
+          _hover: {
+            color: "ui.typography.heading"
+          }
+        }
       }
+    },
+    _dark: {
+      backgroundColor: "dark.ui.status.primary"
     }
   }
 };
@@ -6742,10 +7236,19 @@ var HeaderUpperNav = {
         color: "ui.black",
         textDecoration: "none"
       },
-      _focus: headerFocus
+      _focus: headerFocus,
+      _dark: {
+        color: "dark.ui.typography.heading",
+        _hover: {
+          color: "dark.ui.typography.heading"
+        }
+      }
     },
     svg: {
-      marginTop: "0"
+      marginTop: "0",
+      _dark: {
+        fill: "white"
+      }
     },
     emailUpdatesLink: {
       display: "flex",
@@ -6762,6 +7265,9 @@ var HeaderUpperNav = {
       width: "85px",
       _hover: {
         bg: headerRed
+      },
+      _dark: {
+        color: "var(--nypl-colors-ui-black) !important"
       }
     }
   }
@@ -6770,8 +7276,14 @@ var HeaderUpperNav = {
 var baseLinkStyles = {
   color: "ui.link.primary",
   textDecoration: "underline",
+  _dark: {
+    color: "dark.ui.link.primary"
+  },
   _hover: {
-    color: "ui.link.secondary"
+    color: "ui.link.secondary",
+    _dark: {
+      color: "dark.ui.link.secondary"
+    }
   }
 };
 var baseButtonLinkStyles = /*#__PURE__*/_extends({}, buttonBaseStyle, {
@@ -6791,10 +7303,6 @@ var variants = {
       width: "s",
       textDecoration: "none",
       fill: "currentColor"
-    },
-    _hover: {
-      color: "ui.link.secondary",
-      textDecoration: "underline"
     }
   },
   // The "button" variant is deprecated.
@@ -6811,10 +7319,18 @@ var variants = {
     textDecoration: "none",
     fontWeight: "button.default",
     bg: "ui.link.primary",
+    _dark: {
+      color: "ui.gray.xxx-dark",
+      bg: "dark.ui.link.primary"
+    },
     _hover: {
       color: "ui.white",
       bg: "ui.link.secondary",
-      textDecoration: "none"
+      textDecoration: "underline",
+      _dark: {
+        color: "ui.gray.xxx-dark",
+        bg: "dark.ui.link.secondary"
+      }
     }
   },
   buttonPrimary: /*#__PURE__*/_extends({}, baseButtonLinkStyles, /*#__PURE__*/primary({})),
@@ -6837,6 +7353,10 @@ var variants = {
     pointerEvents: "none",
     _visited: {
       color: "ui.gray.dark"
+    },
+    _dark: {
+      bg: "dark.ui.disabled.secondary",
+      color: "dark.ui.disabled.primary"
     }
   })
 };
@@ -6925,7 +7445,10 @@ var Heading$1 = {
       // passed as children to the Heading component.
       a: baseLinkStyles,
       marginBottom: noSpace ? "0" : "s",
-      textTransform: isCapitalized ? "capitalize" : isUppercase ? "uppercase" : isLowercase ? "lowercase" : null
+      textTransform: isCapitalized ? "capitalize" : isUppercase ? "uppercase" : isLowercase ? "lowercase" : null,
+      _dark: {
+        color: "dark.ui.typography.heading"
+      }
     };
   },
   // Available variants:
@@ -6944,7 +7467,10 @@ var helperErrorText = {
       marginTop: "xxs",
       marginBottom: "0",
       fontSize: "helper.default",
-      color: isInvalid ? "ui.error.primary" : "ui.black"
+      color: isInvalid ? "ui.error.primary" : null,
+      _dark: {
+        color: isInvalid ? "dark.ui.error.primary" : null
+      }
     };
   }
 };
@@ -7017,20 +7543,31 @@ var secondaryHeadingBase = {
     position: "absolute",
     width: "4000px",
     zIndex: "-1"
+  },
+  _dark: {
+    color: "dark.ui.typography.heading"
   }
 };
 // Get all the styles for the specific Secondary variant but
 // update the background color.
 var getSecondaryVariantStyles = function getSecondaryVariantStyles(bgColor) {
   if (bgColor === void 0) {
-    bgColor = "ui.black";
+    bgColor = "";
   }
+  var finalBgColor = {
+    light: bgColor ? bgColor : "ui.black",
+    dark: bgColor ? "dark." + bgColor : "dark.ui.bg.active"
+  };
   return _extends({}, secondaryBase, {
     heading: _extends({}, secondaryHeadingBase, {
-      bg: bgColor,
       _before: _extends({}, secondaryHeadingBase["_before"], {
-        bg: bgColor
-      })
+        bg: finalBgColor.light
+      }),
+      _dark: {
+        _before: {
+          bg: finalBgColor.dark
+        }
+      }
     })
   });
 };
@@ -7069,6 +7606,10 @@ var primary$1 = {
     },
     bodyText: {
       marginBottom: "0"
+    },
+    _dark: {
+      bg: "dark.ui.bg.default",
+      color: "dark.ui.typography.body"
     }
   }
 };
@@ -7094,6 +7635,9 @@ var tertiary = {
         base: "xxs",
         xl: "xs"
       }
+    },
+    _dark: {
+      color: "dark.ui.typography.body"
     }
   }),
   heading: {
@@ -7104,6 +7648,9 @@ var tertiary = {
   },
   p: {
     marginBottom: "0"
+  },
+  _dark: {
+    bg: "dark.ui.bg.default"
   }
 };
 var campaign = {
@@ -7141,6 +7688,10 @@ var campaign = {
     },
     top: {
       md: "xxl"
+    },
+    _dark: {
+      bg: "dark.ui.bg.default",
+      color: "dark.ui.typography.body"
     }
   },
   a: {
@@ -7205,7 +7756,10 @@ var fiftyFifty = {
 };
 var Hero = {
   baseStyle: {
-    bg: "ui.gray.x-light-cool"
+    bg: "ui.gray.x-light-cool",
+    _dark: {
+      bg: "dark.ui.bg.default"
+    }
   },
   // Available variants:
   variants: {
@@ -7225,13 +7779,16 @@ var HorizontalRule = {
   baseStyle: function baseStyle(_ref) {
     var align = _ref.align;
     return {
-      bg: "ui.gray.light-cool",
+      bg: "ui.bg.hover",
       border: "0",
       height: "2px",
       marginBottom: "s",
       marginTop: "s",
       marginStart: align === "left" ? 0 : "auto",
-      marginEnd: align === "right" ? 0 : "auto"
+      marginEnd: align === "right" ? 0 : "auto",
+      _dark: {
+        bg: "dark.ui.bg.active"
+      }
     };
   }
 };
@@ -7372,6 +7929,11 @@ var baseUnorderedStyles = function baseUnorderedStyles(noStyling) {
         lineHeight: "0.9",
         marginStart: "-1rem",
         width: "1rem"
+      },
+      _dark: {
+        _before: {
+          color: "dark.ui.bg.active"
+        }
       }
     }
   });
@@ -7382,9 +7944,15 @@ var baseSectionDescriptionStyles = {
   paddingStart: "0",
   h2: {
     borderTop: "3px solid",
-    borderColor: "ui.gray.medium",
+    borderColor: "ui.border.default",
     margin: "0",
-    padding: "var(--nypl-space-xs) 0 0"
+    padding: "var(--nypl-space-xs) 0 0",
+    _dark: {
+      borderColor: "dark.ui.border.default"
+    }
+  },
+  _dark: {
+    borderColor: "dark.ui.border.default"
   }
 };
 var baseDescriptionStyles = /*#__PURE__*/_extends({}, baseSectionDescriptionStyles, {
@@ -7399,7 +7967,7 @@ var baseDescriptionStyles = /*#__PURE__*/_extends({}, baseSectionDescriptionStyl
   },
   dt: {
     borderTop: "1px solid",
-    borderColor: "ui.gray.light-cool",
+    borderColor: "ui.border.default",
     fontWeight: "label.default",
     paddingBottom: {
       base: "0",
@@ -7408,6 +7976,10 @@ var baseDescriptionStyles = /*#__PURE__*/_extends({}, baseSectionDescriptionStyl
     paddingTop: "s",
     paddingEnd: {
       md: "table.column"
+    },
+    _dark: {
+      borderColor: "dark.ui.border.default",
+      color: "dark.ui.typography.heading"
     }
   },
   dd: {
@@ -7418,10 +7990,15 @@ var baseDescriptionStyles = /*#__PURE__*/_extends({}, baseSectionDescriptionStyl
       md: "1px solid"
     },
     borderColor: {
-      md: "ui.gray.light-cool"
+      md: "ui.border.default"
     },
     paddingTop: {
       md: "s"
+    },
+    _dark: {
+      borderColor: {
+        md: "dark.ui.border.default"
+      }
     }
   }
 });
@@ -7488,6 +8065,27 @@ var Logo = {
   }
 };
 
+var Modal = {
+  parts: ["header", "overlay", "dialogContainer", "dialog", "closeButton", "body", "footer"],
+  baseStyle: {
+    dialog: {
+      _dark: {
+        bg: "dark.ui.bg.default"
+      }
+    },
+    header: {
+      _dark: {
+        color: "dark.ui.typography.heading"
+      }
+    },
+    body: {
+      _dark: {
+        color: "dark.ui.typography.body"
+      }
+    }
+  }
+};
+
 var multiSelectWidths = {
   "default": {
     width: {
@@ -7582,6 +8180,19 @@ var MultiSelect = {
               }
             }
           }
+        },
+        _dark: {
+          background: "dark.ui.bg.default",
+          borderColor: "dark.ui.border.hover",
+          ul: {
+            li: {
+              div: {
+                _hover: {
+                  bg: "dark.ui.bg.hover"
+                }
+              }
+            }
+          }
         }
       }),
       menu: {
@@ -7632,7 +8243,7 @@ var MultiSelectMenuButton = {
         backgroundColor: isOpen ? "ui.bg.active" : "ui.white",
         borderBottomLeftRadius: isOpen ? "0" : "button.default",
         borderBottomRightRadius: isOpen ? "0" : "button.default",
-        borderColor: isOpen ? "ui.gray.dark" : "ui.gray.medium",
+        borderColor: isOpen ? "ui.border.hover" : "ui.border.default",
         borderRadius: "button.default",
         borderWidth: "1px",
         fontSize: "button.default",
@@ -7651,6 +8262,19 @@ var MultiSelectMenuButton = {
         },
         svg: {
           marginTop: "0"
+        },
+        _dark: {
+          backgroundColor: isOpen ? "dark.ui.bg.active" : "dark.ui.bg.default",
+          borderBottomLeftRadius: isOpen ? "0" : "button.default",
+          borderBottomRightRadius: isOpen ? "0" : "button.default",
+          borderColor: isOpen ? "dark.ui.border.hover" : "dark.ui.border.default",
+          svg: {
+            fill: "dark.ui.typography.heading"
+          },
+          _hover: {
+            backgroundColor: isOpen ? "dark.ui.bg.active" : "dark.ui.bg.default",
+            borderColor: "dark.ui.border.hover"
+          }
         }
       },
       selectedItemsCountButton: {
@@ -7678,6 +8302,16 @@ var MultiSelectMenuButton = {
           marginLeft: "xxs",
           marginRight: "6px",
           marginTop: "0"
+        },
+        _dark: {
+          backgroundColor: "dark.ui.bg.hover",
+          borderColor: isOpen ? "dark.ui.border.hover" : "dark.ui.border.default",
+          svg: {
+            fill: "dark.ui.typography.heading"
+          },
+          _hover: {
+            borderColor: isOpen ? "ui.white" : "dark.ui.border.hover"
+          }
         }
       }
     };
@@ -7687,9 +8321,9 @@ var MultiSelectMenuButton = {
 var Notification = {
   parts: ["container", "dismissibleButton", "icon"],
   baseStyle: function baseStyle(_ref) {
-    var dismissible = _ref.dismissible,
-      isCentered = _ref.isCentered,
+    var isCentered = _ref.isCentered,
       noMargin = _ref.noMargin,
+      notificationHeading = _ref.notificationHeading,
       notificationType = _ref.notificationType;
     var bg = "ui.status.primary";
     if (notificationType === "announcement" || notificationType === "warning") {
@@ -7697,19 +8331,24 @@ var Notification = {
     }
     return {
       bg: bg,
+      borderRadius: noMargin ? "0" : "4px",
       display: "flex",
       fontSize: "text.caption",
+      m: noMargin ? "0" : "s",
       position: "relative",
+      p: "inset.default",
       textAlign: isCentered ? "center" : null,
-      borderRadius: noMargin ? "0" : "4px",
-      margin: noMargin ? "0" : "s",
+      _dark: {
+        bg: "dark.ui.bg.hover"
+      },
       container: {
-        margin: "auto",
+        display: "flex",
+        flexDirection: isCentered || notificationHeading ? "column" : "row",
+        m: "auto",
         maxWidth: "var(--nypl-breakpoint-xl)",
-        padding: "inset.default",
-        paddingEnd: dismissible ? "l" : null,
-        paddingStart: isCentered && dismissible ? "l" : null,
-        width: "100%"
+        paddingEnd: "s",
+        paddingStart: "s",
+        w: "100%"
       },
       dismissibleButton: {
         border: "none",
@@ -7717,8 +8356,8 @@ var Notification = {
         alignItems: "center",
         color: "ui.black",
         display: "flex",
-        height: "32px",
-        width: "32px",
+        h: "32px",
+        w: "32px",
         minWidth: "0",
         position: "absolute",
         right: "0",
@@ -7726,13 +8365,12 @@ var Notification = {
         svg: {
           marginTop: "0"
         },
+        _dark: {
+          color: "dark.ui.typography.body"
+        },
         _hover: {
           bg: "inherit"
         }
-      },
-      icon: {
-        flexShrink: "0",
-        marginEnd: "xs"
       }
     };
   }
@@ -7740,22 +8378,38 @@ var Notification = {
 var NotificationContent = {
   parts: ["content"],
   baseStyle: function baseStyle(_ref2) {
-    var alignText = _ref2.alignText,
-      icon = _ref2.icon,
-      notificationType = _ref2.notificationType;
+    var isCentered = _ref2.isCentered,
+      notificationHeading = _ref2.notificationHeading,
+      notificationType = _ref2.notificationType,
+      showIcon = _ref2.showIcon;
     return {
       display: "flex",
       justifyContent: "center",
       content: {
         color: notificationType === "warning" ? "brand.primary" : "currentColor",
-        marginTop: icon ? "xxxs" : "0",
-        paddingStart: alignText ? "calc(var(--nypl-space-s) + var(--nypl-space-s))" : null,
-        width: "100%",
-        // Links should always be black and underlined.
+        marginTop: showIcon ? "xxxs" : "0",
+        paddingStart: !isCentered && showIcon ? notificationHeading ? "l" : "xs" : "0",
+        pt: !isCentered && notificationHeading ? "xxs" : "0",
+        w: "100%",
+        _dark: {
+          borderLeftColor: notificationType === "standard" ? "ui.status.primary" : notificationType === "announcement" ? "ui.success.primary" : "dark.ui.error.primary",
+          borderLeftStyle: !isCentered ? "solid" : "none",
+          borderLeftWidth: "2px",
+          marginTop: "0",
+          paddingStart: !isCentered ? "xs" : "0",
+          color: "dark.ui.typography.body",
+          ml: !isCentered && showIcon ? notificationHeading ? "l" : "xs" : "0"
+        },
+        // Links should always be underlined, and always be black if the
+        // color mode is light.
         a: {
           color: "ui.black",
-          _hover: {
-            color: "ui.black"
+          textDecoration: "underline",
+          _dark: {
+            color: "dark.ui.link.primary",
+            _hover: {
+              color: "dark.ui.link.secondary"
+            }
           }
         }
       }
@@ -7776,12 +8430,32 @@ var NotificationHeading = {
     }
     return {
       display: "flex",
-      marginBottom: "xxs",
-      justifyContent: isCentered ? "center" : null,
+      flexDirection: isCentered ? "column" : "row",
+      m: isCentered ? "auto" : "null",
+      mb: isCentered ? "xs" : "0",
+      px: isCentered ? "s" : "0",
+      w: "fit-content",
+      _dark: {
+        borderBottomColor: notificationType === "standard" ? "ui.status.primary" : notificationType === "announcement" ? "ui.success.primary" : "dark.ui.error.primary",
+        borderBottomStyle: isCentered ? "solid" : "none",
+        borderBottomWidth: "2px",
+        color: "dark.ui.typography.heading",
+        paddingBottom: isCentered ? "xs" : "0"
+      },
       heading: {
-        marginBottom: "0",
-        marginTop: icon ? "xxxs" : "0",
-        color: color
+        color: color,
+        ml: icon && !isCentered ? "xs" : "0",
+        mt: icon ? "xxxs" : "0",
+        _dark: {
+          borderLeftColor: notificationType === "standard" ? "ui.status.primary" : notificationType === "announcement" ? "ui.success.primary" : "dark.ui.error.primary",
+          borderLeftStyle: !isCentered ? "solid" : "none",
+          borderLeftWidth: "2px",
+          paddingLeft: !isCentered ? "xs" : "0"
+        }
+      },
+      svg: {
+        mx: isCentered ? "auto" : "",
+        mb: isCentered ? "xxs" : "0"
       }
     };
   }
@@ -7815,6 +8489,9 @@ var ProgressIndicator = {
       size = _ref.size;
     return {
       color: darkMode ? "ui.white" : "ui.black",
+      _dark: {
+        color: "dark.ui.typography.heading"
+      },
       circular: {
         // Note: we have to target the SVG HTMl elements in order
         // to override the default styles.
@@ -7824,10 +8501,16 @@ var ProgressIndicator = {
           display: "block",
           circle: {
             _first: {
-              stroke: darkMode ? "ui.gray.dark" : "ui.gray.light-cool"
+              stroke: darkMode ? "ui.gray.dark" : "ui.gray.light-cool",
+              _dark: {
+                stroke: "dark.ui.bg.hover"
+              }
             },
             _last: {
-              stroke: darkMode ? "ui.white" : "ui.link.primary"
+              stroke: darkMode ? "ui.white" : "ui.link.primary",
+              _dark: {
+                stroke: "dark.ui.link.primary"
+              }
             }
           }
         }
@@ -7842,13 +8525,20 @@ var ProgressIndicator = {
         // Hard to target this specific element without using
         // "Progress" as the key name in index.ts
         "> div": {
-          bg: darkMode ? "ui.white" : "ui.link.primary"
+          bg: darkMode ? "ui.white" : "ui.link.primary",
+          _dark: {
+            bg: "dark.ui.link.primary"
+          }
         },
         flex: 25,
         bg: darkMode ? "ui.gray.dark" : "ui.gray.light-cool",
         height: {
           base: "4px",
           md: size === "default" ? "8px" : "4px"
+        },
+        _dark: {
+          bg: "dark.ui.bg.hover",
+          color: "dark.ui.typography.heading"
         }
       },
       linearContainer: {
@@ -7916,6 +8606,42 @@ var baseStyleControl$1 = {
   }),
   _invalid: {
     borderColor: "ui.error.primary"
+  },
+  _dark: {
+    borderColor: "dark.ui.border.default",
+    backgroundColor: "dark.ui.bg.default",
+    _checked: {
+      borderColor: "dark.ui.focus",
+      _disabled: {
+        borderColor: "dark.ui.disabled.secondary",
+        _before: {
+          bg: "dark.ui.disabled.secondary"
+        }
+      },
+      _invalid: {
+        borderColor: "dark.ui.error.primary",
+        _before: {
+          borderColor: "dark.ui.error.primary",
+          bg: "dark.ui.error.primary"
+        }
+      }
+    },
+    _disabled: {
+      borderColor: "dark.ui.disabled.secondary",
+      _before: {
+        bg: "dark.ui.disabled.secondary"
+      }
+    },
+    _focus: {
+      boxShadow: "none",
+      outlineColor: "dark.ui.focus"
+    },
+    _invalid: {
+      borderColor: "dark.ui.error.primary"
+    },
+    _before: {
+      bg: "dark.ui.focus"
+    }
   }
 };
 // Style object for the Radio's label
@@ -7979,12 +8705,22 @@ var SearchBar = {
     },
     select: {
       flexShrink: "0",
-      marginBottom: "0",
+      marginBottom: {
+        base: "-1px",
+        md: "0"
+      },
       maxWidth: {
         base: undefined,
         md: "255px"
       },
-      textOverflow: "ellipsis"
+      textOverflow: "ellipsis",
+      marginRight: {
+        base: undefined,
+        md: "-1px"
+      },
+      _hover: {
+        zIndex: "10"
+      }
     }
   }
 };
@@ -7996,8 +8732,11 @@ var element = {
 };
 var borderRules = {
   border: "1px solid",
-  borderColor: "ui.gray.light-cool",
-  padding: "s"
+  borderColor: "ui.gray.x-light-cool",
+  padding: "s",
+  _dark: {
+    borderColor: "ui.gray.xx-dark"
+  }
 };
 var imagePaddingBottomStyles = {
   landscape: "50%",
@@ -8114,8 +8853,11 @@ var fade = function fade() {
 var Skeleton = {
   baseStyle: {
     borderRadius: "2px",
-    background: "ui.gray.light-cool",
-    animation: /*#__PURE__*/fade() + " 1000ms cubic-bezier(0.25, -0.5, 1, 0) infinite"
+    bg: "ui.gray.light-cool",
+    animation: /*#__PURE__*/fade() + " 1000ms cubic-bezier(0.25, -0.5, 1, 0) infinite",
+    _dark: {
+      bg: "dark.ui.bg.hover"
+    }
   }
 };
 
@@ -8156,15 +8898,17 @@ var staticValues = {
 var CustomSlider = {
   parts: ["container", "leftValue", "rightValue", "textInput", "sliderContainer", "filledTrack", "track", "thumb"],
   baseStyle: function baseStyle(_ref) {
-    var isDisabled = _ref.isDisabled,
+    var isDarkMode = _ref.isDarkMode,
+      isDisabled = _ref.isDisabled,
       isInvalid = _ref.isInvalid,
       showBoxes = _ref.showBoxes,
       showValues = _ref.showValues;
-    var baseColor = "ui.link.primary";
+    var prefix = isDarkMode ? "dark." : "";
+    var baseColor = prefix + "ui.link.primary";
     if (isInvalid) {
-      baseColor = "ui.error.primary";
+      baseColor = prefix + "ui.error.primary";
     } else if (isDisabled) {
-      baseColor = "ui.disabled.primary";
+      baseColor = prefix + "ui.disabled.primary";
     }
     return {
       container: {
@@ -8172,20 +8916,25 @@ var CustomSlider = {
         alignItems: "center"
       },
       leftValue: _extends({}, staticValues, {
-        color: isDisabled ? "ui.gray.dark" : null
+        color: isDisabled ? "ui.disabled.primary" : null,
+        _dark: {
+          color: isDisabled ? "dark.ui.disabled.primary" : null
+        }
       }),
       rightValue: _extends({}, staticValues, {
         marginStart: "s",
         // If the text input boxes are shown, then there already is
         // a margin, so we can set this static value to "0".
         marginEnd: showBoxes ? "0" : "s",
-        color: isDisabled ? "ui.gray.dark" : null
+        color: isDisabled ? "ui.disabled.primary" : null,
+        _dark: {
+          color: isDisabled ? "dark.ui.disabled.primary" : null
+        }
       }),
       textInput: {
         // Allows for three or more digits present in the
         // min or max value text input.
-        minWidth: "65px",
-        color: isInvalid ? "ui.error.primary" : "ui.black"
+        minWidth: "65px"
       },
       // This is added to the container so that the slider thumbs don't
       // overflow past the container when the value boxes or min/max values
@@ -8203,10 +8952,16 @@ var CustomSlider = {
         bgColor: "ui.gray.light-cool",
         _disabled: {
           bgColor: "ui.disabled.primary"
+        },
+        _dark: {
+          bgColor: "dark.ui.bg.active",
+          _disabled: {
+            bgColor: "dark.ui.disabled.primary"
+          }
         }
       },
       thumb: {
-        border: "1px solid",
+        border: "2px solid",
         // Thumb doesn't have an _invalid state...
         // so we manually do it through the props.
         borderColor: baseColor,
@@ -8217,6 +8972,13 @@ var CustomSlider = {
         _disabled: {
           bgColor: "ui.disabled.secondary",
           borderColor: "ui.disabled.primary"
+        },
+        _dark: {
+          bgColor: "dark.ui.bg.default",
+          _disabled: {
+            bgColor: "dark.ui.disabled.secondary",
+            borderColor: "dark.ui.disabled.primary"
+          }
         }
       }
     };
@@ -8233,24 +8995,42 @@ var StatusBadge = {
     py: "inset.extranarrow",
     px: "inset.narrow",
     textAlign: "center",
-    width: "fit-content"
+    width: "fit-content",
+    _dark: {
+      backgroundColor: "dark.ui.bg.active",
+      borderLeft: "4px solid",
+      borderColor: "ui.gray.medium",
+      color: "dark.ui.typography.heading"
+    }
   },
   variants: {
     low: {
       bg: "ui.gray.light-cool"
     },
     medium: {
-      bg: "ui.status.primary"
+      bg: "ui.status.primary",
+      _dark: {
+        borderColor: "ui.status.primary"
+      }
     },
     high: {
-      bg: "ui.status.secondary"
+      bg: "ui.status.secondary",
+      _dark: {
+        borderColor: "dark.ui.error.primary"
+      }
     }
   }
 };
 
-var cellBorderColorStyles = {
-  base: "ui.gray.light-cool",
-  md: "ui.gray.medium"
+var CellBorderColorStyles = function CellBorderColorStyles() {
+  var colorValues = react.useColorModeValue({
+    base: "ui.gray.light-cool",
+    md: "ui.border.default"
+  }, {
+    base: "ui.gray.xx-dark",
+    md: "dark.ui.border.default"
+  });
+  return colorValues;
 };
 var baseTRStyles = function baseTRStyles(columnHeadersBackgroundColor, showRowDividers, useRowHeaders) {
   if (columnHeadersBackgroundColor === void 0) {
@@ -8286,6 +9066,9 @@ var baseTRStyles = function baseTRStyles(columnHeadersBackgroundColor, showRowDi
         md: "0"
       },
       borderColor: "ui.gray.medium"
+    },
+    _dark: {
+      borderColor: "dark.ui.border.default"
     }
   };
 };
@@ -8305,7 +9088,7 @@ var baseCellStyles = function baseCellStyles(columnHeadersBackgroundColor, colum
   return {
     border: showRowDividers ? undefined : "none",
     borderBottom: showRowDividers ? "1px solid" : "0",
-    borderColor: cellBorderColorStyles,
+    borderColor: CellBorderColorStyles(),
     display: {
       base: "flex",
       md: "table-cell"
@@ -8346,7 +9129,7 @@ var baseCellStyles = function baseCellStyles(columnHeadersBackgroundColor, colum
         md: "m"
       } : null,
       borderBottom: showRowDividers ? "1px solid" : "none",
-      borderColor: cellBorderColorStyles
+      borderColor: CellBorderColorStyles()
     },
     "> span": {
       flexBasis: "50%",
@@ -8363,7 +9146,10 @@ var baseCellStyles = function baseCellStyles(columnHeadersBackgroundColor, colum
         bg: columnHeadersBackgroundColor ? columnHeadersBackgroundColor : undefined,
         color: columnHeadersTextColor ? columnHeadersTextColor : "ui.black",
         fontWeight: "medium",
-        paddingStart: columnHeadersBackgroundColor || showRowDividers || useRowHeaders ? "s" : undefined
+        paddingStart: columnHeadersBackgroundColor || showRowDividers || useRowHeaders ? "s" : undefined,
+        _dark: {
+          color: columnHeadersTextColor ? columnHeadersTextColor : "dark.ui.typography.heading"
+        }
       }
     }
   };
@@ -8393,6 +9179,9 @@ var baseTHStyles = function baseTHStyles(columnHeadersBackgroundColor, columnHea
         base: "0",
         md: undefined
       }
+    },
+    _dark: {
+      color: columnHeadersTextColor ? columnHeadersTextColor : "dark.ui.typography.heading"
     }
   });
 };
@@ -8430,7 +9219,7 @@ var baseTDStyles = function baseTDStyles(columnHeadersBackgroundColor, columnHea
         base: 0,
         md: undefined
       },
-      borderColor: cellBorderColorStyles
+      borderColor: CellBorderColorStyles()
     }
   });
 };
@@ -8443,15 +9232,23 @@ var baseStyle$2 = function baseStyle(_ref) {
     // Headers `th` can be rendered as the first cell in every row through the
     // `useRowHeaders`. Whereas the header `th` in the `thead` can be rendered
     // with a custom color, the row header `th` in the `tbody` should always
-    // have text color black.
+    // have text color black for light color mode and `dark.ui.typography.heading`
+    // for dark color mode.
     tbody: {
       th: {
-        color: "ui.black",
         backgroundColor: useRowHeaders ? {
           base: "ui.gray.x-light-cool",
           md: "unset"
         } : undefined,
-        verticalAlign: "top"
+        color: "ui.black",
+        verticalAlign: "top",
+        _dark: {
+          backgroundColor: useRowHeaders ? {
+            base: "dark.ui.bg.default",
+            md: "unset"
+          } : undefined,
+          color: "dark.ui.typography.heading"
+        }
       },
       td: {
         verticalAlign: "top"
@@ -8476,7 +9273,10 @@ var baseStyle$2 = function baseStyle(_ref) {
       marginEnd: "0",
       marginTop: "0",
       padding: "0",
-      textAlign: "left"
+      textAlign: "left",
+      _dark: {
+        color: "dark.ui.typography.heading"
+      }
     }
   };
 };
@@ -8583,6 +9383,11 @@ var StyledList = {
         borderColor: "ui.border.default",
         my: "xs",
         px: "xs"
+      },
+      _dark: {
+        li: {
+          borderColor: "dark.ui.border.default"
+        }
       }
     }
   }
@@ -8592,7 +9397,6 @@ var tablist = {
   borderColor: "ui.black"
 };
 var tab = {
-  color: "black !important",
   paddingInlineStart: "s",
   paddingStart: "s",
   background: "transparent",
@@ -8629,10 +9433,27 @@ var tab = {
   },
   _focus: {
     boxShadow: "0"
+  },
+  _dark: {
+    color: "dark.ui.typography.heading",
+    border: "1px solid transparent",
+    borderBottom: "1px solid",
+    borderBottomColor: "dark.ui.border.hover",
+    _hover: {
+      bg: "dark.ui.bg.hover"
+    },
+    _selected: {
+      color: "dark.ui.typography.heading",
+      border: "0",
+      bg: "dark.ui.bg.active",
+      borderBottom: "3px solid"
+    }
   }
 };
 // Only display the previous/next arrow buttons on mobile.
 var buttonArrows = {
+  bg: "transparent",
+  color: "black",
   border: "0",
   borderRadius: "0",
   display: {
@@ -8647,7 +9468,21 @@ var buttonArrows = {
   // Code from https://codesandbox.io/s/fxjeo for the mobile carousel
   pos: "absolute",
   transition: "0.6s ease",
-  zIndex: "9999"
+  zIndex: "9999",
+  _hover: {
+    bg: "unset",
+    color: "unset",
+    borderColor: "unset"
+  },
+  _disabled: {
+    color: "ui.disabled.primary"
+  },
+  _dark: {
+    color: "dark.ui.typography.heading",
+    _disabled: {
+      color: "dark.ui.disabled.primary"
+    }
+  }
 };
 var tablistWrapper = {
   display: "flex",
@@ -8681,7 +9516,10 @@ var tablistWrapper = {
     base: "4px",
     md: "0"
   },
-  position: "relative"
+  position: "relative",
+  _dark: {
+    borderColor: "dark.ui.border.hover"
+  }
 };
 var tabpanels = {
   paddingTop: "2px"
@@ -8735,6 +9573,9 @@ var CustomTabs = {
     tablistWrapper: tablistWrapper,
     tabpanels: tabpanels,
     carouselParent: carouselParent
+  },
+  defaultProps: {
+    colorScheme: "ui.black"
   }
 };
 
@@ -8746,9 +9587,9 @@ var TagSetFilter = {
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      bg: "ui.gray.x-light-cool",
+      bg: "ui.bg.default",
       border: "1px solid",
-      borderColor: "ui.gray.medium",
+      borderColor: "ui.border.default",
       borderRadius: "pill",
       color: "ui.black",
       cursor: isDismissible ? "pointer" : "auto",
@@ -8772,7 +9613,17 @@ var TagSetFilter = {
         whiteSpace: "nowrap"
       },
       _hover: {
-        bg: isDismissible ? "ui.gray.light-cool" : "ui.gray.x-light-cool"
+        bg: isDismissible ? "ui.bg.hover" : "ui.bg.default",
+        borderColor: isDismissible ? "ui.border.hover" : "ui.border.default"
+      },
+      _dark: {
+        bg: "dark.ui.bg.default",
+        borderColor: "dark.ui.border.default",
+        color: "dark.ui.typography.body",
+        _hover: {
+          bg: isDismissible ? "dark.ui.bg.hover" : "dark.ui.bg.default",
+          borderColor: isDismissible ? "dark.ui.border.hover" : "dark.ui.border.default"
+        }
       },
       clearAll: {
         color: "ui.black",
@@ -8781,7 +9632,10 @@ var TagSetFilter = {
           md: "22px"
         },
         fontSize: "text.tag",
-        minHeight: "22px"
+        minHeight: "22px",
+        _dark: {
+          color: "dark.ui.typography.heading"
+        }
       }
     };
   }
@@ -8835,6 +9689,29 @@ var TagSetExplore = {
       "> span": {
         color: "ui.white"
       }
+    },
+    _dark: {
+      bg: "dark.ui.bg.default",
+      borderColor: "dark.ui.link.primary",
+      color: "dark.ui.link.primary",
+      a: {
+        color: "dark.ui.link.primary"
+      },
+      svg: {
+        fill: "dark.ui.link.primary"
+      },
+      _hover: {
+        bg: "dark.ui.link.primary",
+        a: {
+          color: "ui.gray.xxx-dark"
+        },
+        svg: {
+          fill: "ui.gray.xxx-dark"
+        },
+        "> span": {
+          color: "ui.gray.xxx-dark"
+        }
+      }
     }
   }
 };
@@ -8862,7 +9739,10 @@ var Template = {
     color: "ui.black",
     display: "grid",
     gridTemplateColumns: "\n      1fr\n      min(1280px, 100%)\n      1fr",
-    rowGap: "grid.l"
+    rowGap: "grid.l",
+    _dark: {
+      color: "dark.ui.typography.body"
+    }
   },
   sizes: {},
   defaultProps: {}
@@ -9014,7 +9894,32 @@ var input = {
   _invalid: {
     border: "1px solid",
     borderColor: "ui.error.primary",
-    boxShadow: "none"
+    boxShadow: "none",
+    color: "ui.error.primary",
+    _focus: {
+      borderColor: "ui.focus"
+    }
+  },
+  _dark: {
+    bgColor: "dark.ui.bg.default",
+    borderColor: "dark.ui.border.default",
+    _hover: {
+      borderColor: "dark.ui.border.hover"
+    },
+    _disabled: /*#__PURE__*/_extends({}, selectTextInputDisabledStyles, {
+      _placeholder: {
+        color: "ui.gray.x-dark"
+      }
+    }),
+    _active: selectTextInputFocusStyles,
+    _focus: selectTextInputFocusStyles,
+    _placeholder: {
+      color: "ui.gray.dark"
+    },
+    _invalid: {
+      borderColor: "dark.ui.error.primary",
+      color: "dark.ui.error.primary"
+    }
   }
 };
 var TextInput$1 = {
@@ -9091,7 +9996,6 @@ var Switch = {
     var size = _ref2.size;
     return {
       alignItems: "start",
-      opacity: 0.4,
       track: {
         backgroundColor: "ui.gray.medium",
         border: "1px solid",
@@ -9121,6 +10025,33 @@ var Switch = {
           outlineColor: "ui.focus",
           outlineOffset: "2px",
           zIndex: "9999"
+        },
+        _dark: {
+          bgColor: "ui.gray.dark",
+          borderColor: "ui.gray.dark",
+          _checked: {
+            bg: "dark.ui.link.primary",
+            borderColor: "dark.ui.link.primary"
+          },
+          _invalid: {
+            bg: "inherit",
+            borderColor: "dark.ui.error.primary",
+            "> span": {
+              bg: "dark.ui.error.primary"
+            }
+          },
+          _disabled: {
+            bg: "dark.ui.disabled.secondary",
+            borderColor: "dark.ui.disabled.secondary",
+            opacity: 1,
+            // These are styles for the thumb. _isDisabled was not working within the `thumb` part.
+            ".chakra-switch__thumb": {
+              bgColor: "dark.ui.disabled.primary"
+            }
+          },
+          _focus: {
+            outlineColor: "dark.ui.focus"
+          }
         }
       },
       label: {
@@ -9130,11 +10061,22 @@ var Switch = {
         _disabled: {
           color: "ui.gray.dark",
           fontStyle: "italic"
+        },
+        _invalid: {
+          color: "ui.error.primary"
+        },
+        _dark: {
+          _disabled: {
+            color: "dark.ui.disabled.primary"
+          },
+          _invalid: {
+            color: "dark.ui.error.primary"
+          }
         }
       },
       thumb: {
-        _disabled: {
-          bg: "ui.error.primary"
+        _dark: {
+          bgColor: "dark.ui.bg.default"
         }
       }
     };
@@ -9164,10 +10106,10 @@ var Toggle$1 = {
   Switch: Switch
 };
 
-var _baseStyle;
+var _dark, _baseStyle;
 var $bg = /*#__PURE__*/themeTools.cssVar("tooltip-bg");
 var Tooltip$1 = {
-  baseStyle: (_baseStyle = {}, _baseStyle[$bg.variable] = "colors.ui.gray.xx-dark", _baseStyle.borderRadius = "4px", _baseStyle.boxShadow = "none", _baseStyle.color = "ui.white", _baseStyle.fontSize = "text.tag", _baseStyle.marginBottom = "xxs", _baseStyle.maxWidth = "240px", _baseStyle.px = "s", _baseStyle.py = "xs", _baseStyle)
+  baseStyle: (_baseStyle = {}, _baseStyle[$bg.variable] = "colors.ui.gray.xx-dark", _baseStyle.borderRadius = "4px", _baseStyle.boxShadow = "none", _baseStyle.color = "ui.white", _baseStyle.fontSize = "text.tag", _baseStyle.marginBottom = "xxs", _baseStyle.maxWidth = "240px", _baseStyle.px = "s", _baseStyle.py = "xs", _baseStyle._dark = (_dark = {}, _dark[$bg.variable] = "colors.ui.gray.x-dark", _dark), _baseStyle)
 };
 
 var fourByThree = {
@@ -9182,8 +10124,15 @@ var square = {
 };
 var invalid = {
   backgroundColor: "ui.gray.light-cool",
+  border: "1px solid",
+  borderColor: "ui.border.default",
   height: "auto",
-  padding: "s"
+  padding: "s",
+  _dark: {
+    bg: "dark.ui.bg.default",
+    border: "1px solid",
+    borderColor: "dark.ui.border.default"
+  }
 };
 var VideoPlayer = {
   baseStyle: {
@@ -9284,6 +10233,7 @@ var theme = /*#__PURE__*/react.extendTheme( /*#__PURE__*/_extends({
     Link: Link$1,
     List: List,
     Logo: Logo,
+    Modal: Modal,
     MultiSelect: MultiSelect,
     MultiSelectMenuButton: MultiSelectMenuButton
   }, NotificationStyles, {
@@ -9332,7 +10282,7 @@ var DSProvider = function DSProvider(_ref) {
 };
 
 var _excluded$1c = ["children", "icon", "id", "isCentered", "notificationType"],
-  _excluded2$5 = ["alignText", "children", "icon", "notificationType"],
+  _excluded2$5 = ["alignText", "children", "isCentered", "notificationHeading", "notificationType", "showIcon"],
   _excluded3$3 = ["ariaLabel", "className", "dismissible", "icon", "id", "isCentered", "noMargin", "notificationContent", "notificationHeading", "notificationType", "showIcon"];
 /**
  * NotificationHeading child-component.
@@ -9352,9 +10302,10 @@ var NotificationHeading$1 = /*#__PURE__*/react.chakra(function (props) {
   return React__default.createElement(react.Box, Object.assign({
     as: "header",
     __css: styles
-  }, rest), icon, React__default.createElement(Heading, {
+  }, rest), icon, children && React__default.createElement(Heading, {
     id: id + "-heading",
     level: "four",
+    noSpace: true,
     __css: styles.heading
   }, children));
 });
@@ -9364,17 +10315,21 @@ var NotificationHeading$1 = /*#__PURE__*/react.chakra(function (props) {
 var NotificationContent$1 = /*#__PURE__*/react.chakra(function (props) {
   var alignText = props.alignText,
     children = props.children,
-    icon = props.icon,
+    isCentered = props.isCentered,
+    notificationHeading = props.notificationHeading,
     notificationType = props.notificationType,
+    showIcon = props.showIcon,
     rest = _objectWithoutPropertiesLoose(props, _excluded2$5);
   var styles = react.useMultiStyleConfig("NotificationContent", {
     alignText: alignText,
-    icon: icon,
-    notificationType: notificationType
+    isCentered: isCentered,
+    notificationHeading: notificationHeading,
+    notificationType: notificationType,
+    showIcon: showIcon
   });
   return React__default.createElement(react.Box, Object.assign({
     __css: styles
-  }, rest), icon, React__default.createElement(react.Box, {
+  }, rest), children && React__default.createElement(react.Box, {
     __css: styles.content
   }, children));
 });
@@ -9403,14 +10358,17 @@ var Notification$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(fu
   var _useState = React.useState(true),
     isOpen = _useState[0],
     setIsOpen = _useState[1];
+  var _useColorMode = react.useColorMode(),
+    colorMode = _useColorMode.colorMode;
   var handleClose = function handleClose() {
     return setIsOpen(false);
   };
   var styles = react.useMultiStyleConfig("Notification", {
-    dismissible: dismissible,
     isCentered: isCentered,
     noMargin: noMargin,
-    notificationType: notificationType
+    notificationHeading: notificationHeading,
+    notificationType: notificationType,
+    showIcon: showIcon
   });
   var iconElement = function iconElement() {
     var baseIconProps = {
@@ -9427,25 +10385,29 @@ var Notification$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(fu
     }, baseIconProps));
     var iconProps = {
       announcement: {
-        color: "section.research.secondary",
+        color: colorMode === "dark" ? "ui.gray.medium" : "section.research.secondary",
         name: "speakerNotes",
         title: "Notification announcement icon"
       },
       standard: {
-        color: "ui.black",
+        color: colorMode === "dark" ? "ui.status.primary" : "ui.black",
         name: "alertNotificationImportant",
         title: "Notification standard icon"
       },
       warning: {
-        color: "brand.primary",
+        color: colorMode === "dark" ? "dark.ui.error.primary" : "brand.primary",
         name: "errorFilled",
         title: "Notification warning icon"
       }
     };
     return React__default.createElement(Icon, Object.assign({
+      className: "notification-icon",
       id: id + "-notification-icon"
     }, iconProps[notificationType], baseIconProps));
   };
+  /** Setting the icon color in the styles is not working, so we need to
+   * explicitly override the icon color directly on the component. */
+  var dismissibleButtonIconColor = react.useColorModeValue("ui.black", "dark.ui.typography.heading");
   var dismissibleButton = dismissible && React__default.createElement(Button, {
     "aria-label": "Close the notification",
     buttonType: "text",
@@ -9453,13 +10415,14 @@ var Notification$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(fu
     onClick: handleClose,
     __css: styles.dismissibleButton
   }, React__default.createElement(Icon, {
+    fill: dismissibleButtonIconColor,
     id: id + "-dismissible-notification-icon",
     name: "close",
     size: "large",
     title: "Notification close icon"
   }));
   var iconElem = iconElement();
-  var childHeading = notificationHeading && React__default.createElement(NotificationHeading$1, {
+  var childHeading = (notificationHeading || showIcon) && React__default.createElement(NotificationHeading$1, {
     icon: iconElem,
     id: id,
     isCentered: isCentered,
@@ -9469,8 +10432,10 @@ var Notification$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(fu
   var alignText = !!(childHeading && showIcon && (!!icon || !isCentered));
   var childContent = React__default.createElement(NotificationContent$1, {
     alignText: alignText,
-    icon: !childHeading ? iconElem : undefined,
-    notificationType: notificationType
+    isCentered: isCentered,
+    notificationHeading: notificationHeading,
+    notificationType: notificationType,
+    showIcon: showIcon
   }, notificationContent);
   // If the `Notification` is closed, don't render anything.
   if (!isOpen) {
@@ -9803,6 +10768,7 @@ var FeedbackBox$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(fun
   var maxCommentCharacters = 500;
   var initMinHeight = 165;
   var initTemplateRows = "auto 1fr";
+  var iconColor = react.useColorModeValue(null, "dark.ui.typography.body");
   var minHeightWithCategory = 235;
   var minHeightWithEmail = 275;
   var minHeightWithCategoryAndEmail = 345;
@@ -9828,6 +10794,7 @@ var FeedbackBox$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(fun
     noMargin: true,
     notificationContent: notificationText,
     showIcon: false,
+    p: "0",
     sx: {
       // The padding of the Notification is smaller than
       // the initial one.
@@ -10040,6 +11007,7 @@ var FeedbackBox$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(fun
     textAlign: "center",
     ref: focusRef
   }, React__default.createElement(Icon, {
+    color: iconColor,
     name: "actionCheckCircleFilled",
     size: "large"
   }), React__default.createElement(Text, {
@@ -10787,7 +11755,9 @@ var FilterBar$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(funct
     sx: styles.modalHeader
   }, "Filter Criteria"), React__default.createElement(react.ModalCloseButton, {
     sx: styles.modalCloseButton
-  }), React__default.createElement(react.ModalBody, null, newChildren), React__default.createElement(react.ModalFooter, {
+  }), React__default.createElement(react.ModalBody, {
+    sx: styles.modalBody
+  }, newChildren), React__default.createElement(react.ModalFooter, {
     sx: styles.modalFooter
   }, React__default.createElement(ButtonGroup, {
     layout: "row",
@@ -13931,8 +14901,8 @@ var HeaderSearchForm$1 = /*#__PURE__*/react.chakra(function (_ref) {
 });
 
 /**
- * This is the button that will render the search form when it is clicked
- * and keep focus trapped within the menu.
+ * This is the button that will render the search form when it is clicked and
+ * keep focus trapped within the menu.
  */
 var HeaderSearchButton$1 = /*#__PURE__*/react.chakra(function (_ref) {
   var _ref$isMobile = _ref.isMobile,
@@ -14445,7 +15415,7 @@ var Header$1 = /*#__PURE__*/react.chakra(function (_ref) {
     __css: styles.logo
   }, React__default.createElement(Logo$1, {
     "aria-label": "NYPL Header Logo",
-    name: isLargerThanLarge ? "nyplFullBlack" : "nyplLionBlack",
+    name: isLargerThanLarge ? react.useColorModeValue("nyplFullBlack", "nyplFullWhite") : react.useColorModeValue("nyplLionBlack", "nyplLionWhite"),
     size: isLargerThanMobile ? "large" : "small",
     title: "NYPL Header Logo"
   })), React__default.createElement(react.Spacer, null), isLargerThanMobile ? React__default.createElement(react.VStack, {
@@ -14731,7 +15701,10 @@ var Pagination$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(func
     // The current page link has different styles.
     var currentStyles = isSelectedPage ? {
       color: "ui.black",
-      pointerEvent: "none"
+      pointerEvent: "none",
+      _dark: {
+        color: "dark.ui.typography.body"
+      }
     } : {};
     var allAttrs = {
       items: {
@@ -14996,6 +15969,8 @@ var Select$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function
   // The number of pixels between the label and select elements
   // when the labelPosition is inline (equivalent to --nypl-space-xs).
   var labelSelectGap = 8;
+  // Set the color of the dropdown arrow based on the color mode.
+  var arrowColor = react.useColorModeValue(isInvalid ? "ui.error.primary" : "ui.black", isInvalid ? "dark.ui.error.primary" : "dark.ui.typography.body");
   if (!id) {
     console.warn("NYPL Reservoir Select: This component's required `id` prop was not passed.");
   }
@@ -15043,6 +16018,7 @@ var Select$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function
     ref: ref
   }, controlledProps, ariaAttributes, {
     icon: React__default.createElement(Icon, {
+      color: arrowColor,
       id: id + "-icon",
       name: "arrow",
       size: "medium"
@@ -15313,6 +16289,7 @@ var Slider = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (
   var _useStateWithDependen = useStateWithDependencies(value),
     currentValue = _useStateWithDependen[0],
     setCurrentValue = _useStateWithDependen[1];
+  var isDarkMode = react.useColorMode().colorMode === "dark";
   var finalIsInvalid = isInvalid;
   // In the Range Slider, if the first value is bigger than the second value,
   // then set the invalid state.
@@ -15325,6 +16302,7 @@ var Slider = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (
     console.warn("NYPL Reservoir Slider: The `min` prop is greater than the `max` prop.");
   }
   var styles = react.useMultiStyleConfig("CustomSlider", {
+    isDarkMode: isDarkMode,
     isDisabled: isDisabled,
     isInvalid: finalIsInvalid,
     showBoxes: showBoxes,
@@ -15936,6 +16914,9 @@ var TagSetFilter$1 = /*#__PURE__*/react.chakra(function (props) {
   var finalOnClick = function finalOnClick(tagLabel) {
     onClick && onClick(tagLabel);
   };
+  // Set element colors based on color mode
+  var dismissButtonColor = react.useColorModeValue("ui.gray.x-dark", "dark.ui.typography.body");
+  var iconColor = react.useColorModeValue("ui.black", "dark.ui.typography.body");
   // This expects that the consuming app passes in a new set of data
   // whenever the current list of tags needs to be updated.
   React.useEffect(function () {
@@ -15961,6 +16942,7 @@ var TagSetFilter$1 = /*#__PURE__*/react.chakra(function (props) {
       sx: styles
     }, !isDismissible && tagSet.iconName ? React__default.createElement(Icon, {
       align: "left",
+      color: iconColor,
       "data-testid": "ts-icon",
       name: tagSet.iconName,
       size: "small"
@@ -15969,7 +16951,7 @@ var TagSetFilter$1 = /*#__PURE__*/react.chakra(function (props) {
       align: "right",
       name: "close",
       size: "small",
-      color: "ui.gray.x-dark",
+      color: dismissButtonColor,
       width: "12px"
     }) : null));
   }), filters.length > 1 && isDismissible ? React__default.createElement(Button, {