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

package/dist/design-system-react-components.esm.js

@@ -1,4 +1,4 @@
-import { chakra, useStyleConfig, Icon as Icon$2, Box, Accordion as Accordion$2, AccordionPanel, AccordionItem, AccordionButton, Button as Button$2, useMultiStyleConfig, Heading as Heading$2, Text as Text$2, Flex, useMergeRefs, Tooltip as Tooltip$2, Breadcrumb as Breadcrumb$1, BreadcrumbItem, BreadcrumbLink, useMediaQuery, Stack, LinkBox, LinkOverlay, Checkbox as Checkbox$2, CheckboxGroup as CheckboxGroup$2, TableCaption, Thead, Tr, Th, Table as Table$1, Tbody, Td, HStack, SimpleGrid as SimpleGrid$1, Input, Textarea, extendTheme, ChakraProvider, Radio as Radio$2, RadioGroup as RadioGroup$2, useDisclosure, Drawer, DrawerOverlay, DrawerContent, DrawerHeader, DrawerBody, VStack, keyframes as keyframes$1, UnorderedList, ListItem, useOutsideClick, Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, Spacer, CircularProgress, CircularProgressLabel, Progress, Select as Select$2, Skeleton as Skeleton$1, RangeSlider, RangeSliderTrack, RangeSliderFilledTrack, RangeSliderThumb, Slider as Slider$1, SliderTrack, SliderFilledTrack, SliderThumb, Tabs as Tabs$1, Tab, TabPanel, TabList, TabPanels, Switch as Switch$1, useTheme } from '@chakra-ui/react';
+import { chakra, useStyleConfig, Icon as Icon$2, Box, useColorMode, Accordion as Accordion$2, AccordionPanel, AccordionItem, AccordionButton, Button as Button$2, useMultiStyleConfig, Heading as Heading$2, Text as Text$2, useColorModeValue, Flex, useMergeRefs, Tooltip as Tooltip$2, Breadcrumb as Breadcrumb$1, BreadcrumbItem, BreadcrumbLink, useMediaQuery, Stack, LinkBox, LinkOverlay, Checkbox as Checkbox$2, CheckboxGroup as CheckboxGroup$2, TableCaption, Thead, Tr, Th, Table as Table$1, Tbody, Td, HStack, SimpleGrid as SimpleGrid$1, Input, Textarea, extendTheme, ChakraProvider, Radio as Radio$2, RadioGroup as RadioGroup$2, useDisclosure, Drawer, DrawerOverlay, DrawerContent, DrawerHeader, DrawerBody, VStack, keyframes as keyframes$1, UnorderedList, ListItem, useOutsideClick, Modal as Modal$1, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, Spacer, CircularProgress, CircularProgressLabel, Progress, Select as Select$2, Skeleton as Skeleton$1, RangeSlider, RangeSliderTrack, RangeSliderFilledTrack, RangeSliderThumb, Slider as Slider$1, SliderTrack, SliderFilledTrack, SliderThumb, Tabs as Tabs$1, Tab, TabPanel, TabList, TabPanels, Switch as Switch$1, useTheme } from '@chakra-ui/react';
 export { Box, Center, Circle, ColorModeScript, Flex, Grid, GridItem, HStack, Spacer, Square, Stack, Tab, TabList, TabPanel, TabPanels, VStack, cookieStorageManager, localStorageManager, useColorMode, useColorModeValue } from '@chakra-ui/react';
 import React__default, { createElement, forwardRef, useRef, useState, useEffect, Fragment, useReducer, useContext } from 'react';
 import useNativeLazyLoading from '@charlietango/use-native-lazy-loading';
@@ -1409,7 +1409,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;
   }
@@ -1417,7 +1417,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
   });
 };
 /**
@@ -1425,7 +1426,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 = [];
@@ -1433,7 +1434,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"
@@ -1466,7 +1471,7 @@ var getElementsFromData = function getElementsFromData(data, id, isAlwaysRendere
       var bgColorByAccordionType = colorMap[content.accordionType];
       return React__default.createElement(React__default.Fragment, null, React__default.createElement(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: {
@@ -1475,13 +1480,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(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);
     });
   });
 };
@@ -1498,6 +1512,7 @@ var Accordion = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, re
     isAlwaysRendered = _props$isAlwaysRender === void 0 ? false : _props$isAlwaysRender,
     panelMaxHeight = props.panelMaxHeight,
     rest = _objectWithoutPropertiesLoose(props, _excluded$R);
+  var isDarkMode = 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(Accordion$2, Object.assign({
@@ -1505,7 +1520,7 @@ var Accordion = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, re
     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"];
@@ -2022,13 +2037,15 @@ var AlphabetFilter = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (prop
     setSelectedLetter(clickedLetter);
     onClick && onClick(clickedLetter);
   };
+  // Set the color of the border of the selected letter based on the color mode.
+  var selectedLetterBorderColor = 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"
     });
@@ -4160,8 +4177,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`.
@@ -4178,6 +4198,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.
@@ -4210,6 +4238,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"
+        }
+      }
     }
   }
 };
@@ -4239,6 +4283,9 @@ var labelLegendText = {
   width: "100%",
   span: {
     fontWeight: "regular"
+  },
+  _dark: {
+    color: "dark.ui.typography.heading"
   }
 };
 // Used for the disabled state of Select and TextInput
@@ -4246,11 +4293,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 = {
@@ -4272,7 +4327,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: {
@@ -4354,9 +4413,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",
@@ -4394,7 +4530,6 @@ var colors = {
     },
     // Semantic colors
     bg: {
-      page: white,
       "default": grayxLightCool,
       hover: grayLightCool,
       active: grayMedium
@@ -4427,12 +4562,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: {
@@ -4442,6 +4587,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: {
@@ -4472,49 +4619,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
@@ -4720,17 +4851,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"],
@@ -4778,7 +4923,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"
+      }
     }
   }
 };
@@ -4787,6 +4939,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"
@@ -4797,19 +4952,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: {
@@ -4819,6 +4995,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",
@@ -4889,6 +5069,7 @@ var Breadcrumb = {
   variants: {
     blogs: blogs,
     booksAndMore: booksAndMore,
+    brand: brand,
     education: education,
     locations: locations,
     research: research,
@@ -4922,6 +5103,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) {
@@ -4966,7 +5167,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,
@@ -4986,7 +5196,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
@@ -5005,6 +5216,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"
+      }
     }
   });
 };
@@ -5021,6 +5241,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"
+      }
     }
   });
 };
@@ -5030,7 +5259,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), {
@@ -5040,6 +5269,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"
+      }
     }
   });
 };
@@ -5058,7 +5297,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) {
@@ -5072,6 +5312,14 @@ var callout = function callout(_ref7) {
     },
     _active: {
       bg: "brand.secondary"
+    },
+    _dark: {
+      bg: "brand.primary",
+      color: "ui.white",
+      _hover: {
+        bg: "brand.secondary",
+        color: "ui.white"
+      }
     }
   });
 };
@@ -5084,6 +5332,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"
+      }
     }
   });
 };
@@ -5201,7 +5457,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,
@@ -5260,8 +5519,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);
   }
@@ -5296,7 +5560,10 @@ var CardActions$1 = {
       }
     }, topBorderStyles, bottomBorderStyles, {
       justifyContent: justifyContent,
-      borderColor: "ui.gray.medium"
+      borderColor: "ui.border.default",
+      _dark: {
+        borderColor: "dark.ui.border.default"
+      }
     });
   }
 };
@@ -5405,6 +5672,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
@@ -5534,8 +5844,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: {
@@ -5544,12 +5857,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"
       }
@@ -5570,13 +5887,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"
+        }
       }
     });
   }
@@ -5611,7 +5931,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 = {
@@ -5683,11 +6015,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",
@@ -5700,6 +6046,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",
@@ -5707,6 +6058,9 @@ var FeedbackBox = {
       paddingBottom: "s",
       p: {
         marginBottom: "0"
+      },
+      _dark: {
+        background: "dark.ui.bg.hover"
       }
     },
     openButton: {
@@ -5743,16 +6097,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"
@@ -5776,6 +6146,9 @@ var Footer = {
       lg: "30px 0"
     },
     position: "relative",
+    _dark: {
+      backgroundColor: "dark.ui.bg.default"
+    },
     // The two main lists.
     listsContainer: {
       display: "flex",
@@ -5889,7 +6262,10 @@ var Footer = {
           textDecoration: "none",
           svg: {
             width: "36px",
-            height: "36px"
+            height: "36px",
+            _dark: {
+              fill: "dark.ui.typography.body"
+            }
           }
         }
       }
@@ -5908,11 +6284,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: {
@@ -5952,10 +6334,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: {
@@ -5980,6 +6368,7 @@ var headerDarkBlue = "#135772";
 var headerFocusColor = "#0F465C";
 var headerLightBlue = "#78CCED";
 var headerRed = "#ED1C24";
+var headerRedDarkMode = "#DC6F73";
 var headerRedDonate = "#E32B31";
 var headerYellow = "#FEE34A";
 var headerFocus = {
@@ -5993,6 +6382,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",
@@ -6008,7 +6400,10 @@ var Header = {
     horizontalRule: {
       bg: headerRed,
       marginTop: "0",
-      marginBottom: "0"
+      marginBottom: "0",
+      _dark: {
+        backgroundColor: "dark.brand.primary"
+      }
     },
     logo: {
       padding: {
@@ -6195,7 +6590,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",
@@ -6292,7 +6696,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"
+          }
+        }
       }
     };
   }
@@ -6342,7 +6755,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"
+          }
+        }
+      }
     };
   }
 };
@@ -6351,7 +6779,10 @@ var linkFocusHoverStyles = {
   borderBottom: "3px solid",
   color: headerRed,
   paddingBottom: "2px",
-  textDecoration: "none"
+  textDecoration: "none",
+  _dark: {
+    color: headerRedDarkMode
+  }
 };
 var HeaderLowerNav = {
   baseStyle: {
@@ -6371,7 +6802,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)
+      }
     }
   }
 };
@@ -6389,6 +6825,11 @@ var HeaderMobileIconNav = {
       minHeight: "60px",
       minWidth: "60px",
       _focus: headerFocus
+    },
+    _dark: {
+      svg: {
+        fill: "dark.ui.typography.heading"
+      }
     }
   }
 };
@@ -6483,7 +6924,13 @@ var HeaderMobileNavButton = {
           fill: isOpen ? "ui.white" : "ui.black"
         }
       },
-      _focus: headerFocus
+      _focus: headerFocus,
+      _dark: {
+        backgroundColor: isOpen ? headerBlack : "transparent",
+        svg: {
+          fill: "dark.ui.typography.heading"
+        }
+      }
     };
   }
 };
@@ -6559,7 +7006,10 @@ var HeaderSearchForm = {
           fontStyle: "normal"
         },
         _focus: headerFocus,
-        _hover: headerFocus
+        _hover: headerFocus,
+        _dark: {
+          color: "dark.ui.typography.body"
+        }
       }
     },
     searchBtn: {
@@ -6626,6 +7076,12 @@ var HeaderSearchForm = {
         backgroundColor: headerBlue
       },
       _focus: headerFocus
+    },
+    _dark: {
+      color: "ui.white",
+      label: {
+        color: "ui.white"
+      }
     }
   }
 };
@@ -6647,13 +7103,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: {
@@ -6663,6 +7130,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: {
@@ -6674,6 +7147,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
@@ -6705,7 +7187,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"
     }
   }
 };
@@ -6736,10 +7230,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",
@@ -6756,6 +7259,9 @@ var HeaderUpperNav = {
       width: "85px",
       _hover: {
         bg: headerRed
+      },
+      _dark: {
+        color: "var(--nypl-colors-ui-black) !important"
       }
     }
   }
@@ -6764,8 +7270,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, {
@@ -6785,10 +7297,6 @@ var variants = {
       width: "s",
       textDecoration: "none",
       fill: "currentColor"
-    },
-    _hover: {
-      color: "ui.link.secondary",
-      textDecoration: "underline"
     }
   },
   // The "button" variant is deprecated.
@@ -6805,10 +7313,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({})),
@@ -6831,6 +7347,10 @@ var variants = {
     pointerEvents: "none",
     _visited: {
       color: "ui.gray.dark"
+    },
+    _dark: {
+      bg: "dark.ui.disabled.secondary",
+      color: "dark.ui.disabled.primary"
     }
   })
 };
@@ -6919,7 +7439,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:
@@ -6938,7 +7461,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
+      }
     };
   }
 };
@@ -7011,20 +7537,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
+        }
+      }
     })
   });
 };
@@ -7063,6 +7600,10 @@ var primary$1 = {
     },
     bodyText: {
       marginBottom: "0"
+    },
+    _dark: {
+      bg: "dark.ui.bg.default",
+      color: "dark.ui.typography.body"
     }
   }
 };
@@ -7088,6 +7629,9 @@ var tertiary = {
         base: "xxs",
         xl: "xs"
       }
+    },
+    _dark: {
+      color: "dark.ui.typography.body"
     }
   }),
   heading: {
@@ -7098,6 +7642,9 @@ var tertiary = {
   },
   p: {
     marginBottom: "0"
+  },
+  _dark: {
+    bg: "dark.ui.bg.default"
   }
 };
 var campaign = {
@@ -7135,6 +7682,10 @@ var campaign = {
     },
     top: {
       md: "xxl"
+    },
+    _dark: {
+      bg: "dark.ui.bg.default",
+      color: "dark.ui.typography.body"
     }
   },
   a: {
@@ -7199,7 +7750,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: {
@@ -7219,13 +7773,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"
+      }
     };
   }
 };
@@ -7366,6 +7923,11 @@ var baseUnorderedStyles = function baseUnorderedStyles(noStyling) {
         lineHeight: "0.9",
         marginStart: "-1rem",
         width: "1rem"
+      },
+      _dark: {
+        _before: {
+          color: "dark.ui.bg.active"
+        }
       }
     }
   });
@@ -7376,9 +7938,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, {
@@ -7393,7 +7961,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",
@@ -7402,6 +7970,10 @@ var baseDescriptionStyles = /*#__PURE__*/_extends({}, baseSectionDescriptionStyl
     paddingTop: "s",
     paddingEnd: {
       md: "table.column"
+    },
+    _dark: {
+      borderColor: "dark.ui.border.default",
+      color: "dark.ui.typography.heading"
     }
   },
   dd: {
@@ -7412,10 +7984,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"
+      }
     }
   }
 });
@@ -7482,6 +8059,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: {
@@ -7576,6 +8174,19 @@ var MultiSelect = {
               }
             }
           }
+        },
+        _dark: {
+          background: "dark.ui.bg.default",
+          borderColor: "dark.ui.border.hover",
+          ul: {
+            li: {
+              div: {
+                _hover: {
+                  bg: "dark.ui.bg.hover"
+                }
+              }
+            }
+          }
         }
       }),
       menu: {
@@ -7626,7 +8237,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",
@@ -7645,6 +8256,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: {
@@ -7672,6 +8296,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"
+          }
         }
       }
     };
@@ -7681,9 +8315,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") {
@@ -7691,19 +8325,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",
@@ -7711,8 +8350,8 @@ var Notification = {
         alignItems: "center",
         color: "ui.black",
         display: "flex",
-        height: "32px",
-        width: "32px",
+        h: "32px",
+        w: "32px",
         minWidth: "0",
         position: "absolute",
         right: "0",
@@ -7720,13 +8359,12 @@ var Notification = {
         svg: {
           marginTop: "0"
         },
+        _dark: {
+          color: "dark.ui.typography.body"
+        },
         _hover: {
           bg: "inherit"
         }
-      },
-      icon: {
-        flexShrink: "0",
-        marginEnd: "xs"
       }
     };
   }
@@ -7734,22 +8372,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"
+            }
           }
         }
       }
@@ -7770,12 +8424,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"
       }
     };
   }
@@ -7809,6 +8483,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.
@@ -7818,10 +8495,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"
+              }
             }
           }
         }
@@ -7836,13 +8519,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: {
@@ -7910,6 +8600,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
@@ -7973,12 +8699,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"
+      }
     }
   }
 };
@@ -7990,8 +8726,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%",
@@ -8108,8 +8847,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"
+    }
   }
 };
 
@@ -8150,15 +8892,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: {
@@ -8166,20 +8910,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
@@ -8197,10 +8946,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,
@@ -8211,6 +8966,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"
+          }
         }
       }
     };
@@ -8227,24 +8989,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 = 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) {
@@ -8280,6 +9060,9 @@ var baseTRStyles = function baseTRStyles(columnHeadersBackgroundColor, showRowDi
         md: "0"
       },
       borderColor: "ui.gray.medium"
+    },
+    _dark: {
+      borderColor: "dark.ui.border.default"
     }
   };
 };
@@ -8299,7 +9082,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"
@@ -8340,7 +9123,7 @@ var baseCellStyles = function baseCellStyles(columnHeadersBackgroundColor, colum
         md: "m"
       } : null,
       borderBottom: showRowDividers ? "1px solid" : "none",
-      borderColor: cellBorderColorStyles
+      borderColor: CellBorderColorStyles()
     },
     "> span": {
       flexBasis: "50%",
@@ -8357,7 +9140,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"
+        }
       }
     }
   };
@@ -8387,6 +9173,9 @@ var baseTHStyles = function baseTHStyles(columnHeadersBackgroundColor, columnHea
         base: "0",
         md: undefined
       }
+    },
+    _dark: {
+      color: columnHeadersTextColor ? columnHeadersTextColor : "dark.ui.typography.heading"
     }
   });
 };
@@ -8424,7 +9213,7 @@ var baseTDStyles = function baseTDStyles(columnHeadersBackgroundColor, columnHea
         base: 0,
         md: undefined
       },
-      borderColor: cellBorderColorStyles
+      borderColor: CellBorderColorStyles()
     }
   });
 };
@@ -8437,15 +9226,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"
@@ -8470,7 +9267,10 @@ var baseStyle$2 = function baseStyle(_ref) {
       marginEnd: "0",
       marginTop: "0",
       padding: "0",
-      textAlign: "left"
+      textAlign: "left",
+      _dark: {
+        color: "dark.ui.typography.heading"
+      }
     }
   };
 };
@@ -8577,6 +9377,11 @@ var StyledList = {
         borderColor: "ui.border.default",
         my: "xs",
         px: "xs"
+      },
+      _dark: {
+        li: {
+          borderColor: "dark.ui.border.default"
+        }
       }
     }
   }
@@ -8586,7 +9391,6 @@ var tablist = {
   borderColor: "ui.black"
 };
 var tab = {
-  color: "black !important",
   paddingInlineStart: "s",
   paddingStart: "s",
   background: "transparent",
@@ -8623,10 +9427,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: {
@@ -8641,7 +9462,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",
@@ -8675,7 +9510,10 @@ var tablistWrapper = {
     base: "4px",
     md: "0"
   },
-  position: "relative"
+  position: "relative",
+  _dark: {
+    borderColor: "dark.ui.border.hover"
+  }
 };
 var tabpanels = {
   paddingTop: "2px"
@@ -8729,6 +9567,9 @@ var CustomTabs = {
     tablistWrapper: tablistWrapper,
     tabpanels: tabpanels,
     carouselParent: carouselParent
+  },
+  defaultProps: {
+    colorScheme: "ui.black"
   }
 };
 
@@ -8740,9 +9581,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",
@@ -8766,7 +9607,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",
@@ -8775,7 +9626,10 @@ var TagSetFilter = {
           md: "22px"
         },
         fontSize: "text.tag",
-        minHeight: "22px"
+        minHeight: "22px",
+        _dark: {
+          color: "dark.ui.typography.heading"
+        }
       }
     };
   }
@@ -8829,6 +9683,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"
+        }
+      }
     }
   }
 };
@@ -8856,7 +9733,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: {}
@@ -9008,7 +9888,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 = {
@@ -9085,7 +9990,6 @@ var Switch = {
     var size = _ref2.size;
     return {
       alignItems: "start",
-      opacity: 0.4,
       track: {
         backgroundColor: "ui.gray.medium",
         border: "1px solid",
@@ -9115,6 +10019,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: {
@@ -9124,11 +10055,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"
         }
       }
     };
@@ -9158,10 +10100,10 @@ var Toggle$1 = {
   Switch: Switch
 };
 
-var _baseStyle;
+var _dark, _baseStyle;
 var $bg = /*#__PURE__*/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 = {
@@ -9176,8 +10118,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: {
@@ -9278,6 +10227,7 @@ var theme = /*#__PURE__*/extendTheme( /*#__PURE__*/_extends({
     Link: Link$1,
     List: List,
     Logo: Logo,
+    Modal: Modal,
     MultiSelect: MultiSelect,
     MultiSelectMenuButton: MultiSelectMenuButton
   }, NotificationStyles, {
@@ -9326,7 +10276,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.
@@ -9346,9 +10296,10 @@ var NotificationHeading$1 = /*#__PURE__*/chakra(function (props) {
   return React__default.createElement(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));
 });
@@ -9358,17 +10309,21 @@ var NotificationHeading$1 = /*#__PURE__*/chakra(function (props) {
 var NotificationContent$1 = /*#__PURE__*/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 = useMultiStyleConfig("NotificationContent", {
     alignText: alignText,
-    icon: icon,
-    notificationType: notificationType
+    isCentered: isCentered,
+    notificationHeading: notificationHeading,
+    notificationType: notificationType,
+    showIcon: showIcon
   });
   return React__default.createElement(Box, Object.assign({
     __css: styles
-  }, rest), icon, React__default.createElement(Box, {
+  }, rest), children && React__default.createElement(Box, {
     __css: styles.content
   }, children));
 });
@@ -9397,14 +10352,17 @@ var Notification$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (prop
   var _useState = useState(true),
     isOpen = _useState[0],
     setIsOpen = _useState[1];
+  var _useColorMode = useColorMode(),
+    colorMode = _useColorMode.colorMode;
   var handleClose = function handleClose() {
     return setIsOpen(false);
   };
   var styles = useMultiStyleConfig("Notification", {
-    dismissible: dismissible,
     isCentered: isCentered,
     noMargin: noMargin,
-    notificationType: notificationType
+    notificationHeading: notificationHeading,
+    notificationType: notificationType,
+    showIcon: showIcon
   });
   var iconElement = function iconElement() {
     var baseIconProps = {
@@ -9421,25 +10379,29 @@ var Notification$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (prop
     }, 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 = useColorModeValue("ui.black", "dark.ui.typography.heading");
   var dismissibleButton = dismissible && React__default.createElement(Button, {
     "aria-label": "Close the notification",
     buttonType: "text",
@@ -9447,13 +10409,14 @@ var Notification$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (prop
     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,
@@ -9463,8 +10426,10 @@ var Notification$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (prop
   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) {
@@ -9797,6 +10762,7 @@ var FeedbackBox$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (_ref,
   var maxCommentCharacters = 500;
   var initMinHeight = 165;
   var initTemplateRows = "auto 1fr";
+  var iconColor = useColorModeValue(null, "dark.ui.typography.body");
   var minHeightWithCategory = 235;
   var minHeightWithEmail = 275;
   var minHeightWithCategoryAndEmail = 345;
@@ -9822,6 +10788,7 @@ var FeedbackBox$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (_ref,
     noMargin: true,
     notificationContent: notificationText,
     showIcon: false,
+    p: "0",
     sx: {
       // The padding of the Notification is smaller than
       // the initial one.
@@ -10034,6 +11001,7 @@ var FeedbackBox$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (_ref,
     textAlign: "center",
     ref: focusRef
   }, React__default.createElement(Icon, {
+    color: iconColor,
     name: "actionCheckCircleFilled",
     size: "large"
   }), React__default.createElement(Text, {
@@ -10770,7 +11738,7 @@ var FilterBar$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props,
     onClick: function onClick() {
       onToggle === undefined ? onOpen() : onToggle();
     }
-  }, "Show Filter " + getSelectedItemsCount()), React__default.createElement(Modal, {
+  }, "Show Filter " + getSelectedItemsCount()), React__default.createElement(Modal$1, {
     isOpen: isOpen,
     onClose: function onClose() {
       onToggle === undefined ? _onClose() : onToggle();
@@ -10781,7 +11749,9 @@ var FilterBar$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props,
     sx: styles.modalHeader
   }, "Filter Criteria"), React__default.createElement(ModalCloseButton, {
     sx: styles.modalCloseButton
-  }), React__default.createElement(ModalBody, null, newChildren), React__default.createElement(ModalFooter, {
+  }), React__default.createElement(ModalBody, {
+    sx: styles.modalBody
+  }, newChildren), React__default.createElement(ModalFooter, {
     sx: styles.modalFooter
   }, React__default.createElement(ButtonGroup, {
     layout: "row",
@@ -13925,8 +14895,8 @@ var HeaderSearchForm$1 = /*#__PURE__*/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__*/chakra(function (_ref) {
   var _ref$isMobile = _ref.isMobile,
@@ -14439,7 +15409,7 @@ var Header$1 = /*#__PURE__*/chakra(function (_ref) {
     __css: styles.logo
   }, React__default.createElement(Logo$1, {
     "aria-label": "NYPL Header Logo",
-    name: isLargerThanLarge ? "nyplFullBlack" : "nyplLionBlack",
+    name: isLargerThanLarge ? useColorModeValue("nyplFullBlack", "nyplFullWhite") : useColorModeValue("nyplLionBlack", "nyplLionWhite"),
     size: isLargerThanMobile ? "large" : "small",
     title: "NYPL Header Logo"
   })), React__default.createElement(Spacer, null), isLargerThanMobile ? React__default.createElement(VStack, {
@@ -14573,7 +15543,7 @@ var BaseModal = /*#__PURE__*/chakra(function (_ref) {
     isLargerThanMobile = _useNYPLBreakpoints.isLargerThanMobile;
   // For larger screens, set the size to xl, otherwise set it to full.
   var size = isLargerThanMobile ? xlarge : fullSize;
-  return React__default.createElement(Modal, Object.assign({
+  return React__default.createElement(Modal$1, Object.assign({
     id: id,
     isOpen: isOpen,
     onClose: onClose,
@@ -14725,7 +15695,10 @@ var Pagination$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props,
     // 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: {
@@ -14990,6 +15963,8 @@ var Select$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref
   // 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 = 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.");
   }
@@ -15037,6 +16012,7 @@ var Select$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref
     ref: ref
   }, controlledProps, ariaAttributes, {
     icon: React__default.createElement(Icon, {
+      color: arrowColor,
       id: id + "-icon",
       name: "arrow",
       size: "medium"
@@ -15307,6 +16283,7 @@ var Slider = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref)
   var _useStateWithDependen = useStateWithDependencies(value),
     currentValue = _useStateWithDependen[0],
     setCurrentValue = _useStateWithDependen[1];
+  var isDarkMode = 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.
@@ -15319,6 +16296,7 @@ var Slider = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref)
     console.warn("NYPL Reservoir Slider: The `min` prop is greater than the `max` prop.");
   }
   var styles = useMultiStyleConfig("CustomSlider", {
+    isDarkMode: isDarkMode,
     isDisabled: isDisabled,
     isInvalid: finalIsInvalid,
     showBoxes: showBoxes,
@@ -15930,6 +16908,9 @@ var TagSetFilter$1 = /*#__PURE__*/chakra(function (props) {
   var finalOnClick = function finalOnClick(tagLabel) {
     onClick && onClick(tagLabel);
   };
+  // Set element colors based on color mode
+  var dismissButtonColor = useColorModeValue("ui.gray.x-dark", "dark.ui.typography.body");
+  var iconColor = 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.
   useEffect(function () {
@@ -15955,6 +16936,7 @@ var TagSetFilter$1 = /*#__PURE__*/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"
@@ -15963,7 +16945,7 @@ var TagSetFilter$1 = /*#__PURE__*/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, {