@nypl/design-system-react-components 1.2.2 → 1.3.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, Heading as Heading$2, Text as Text$2, useMultiStyleConfig, Flex, Breadcrumb as Breadcrumb$1, BreadcrumbItem, BreadcrumbLink, useMediaQuery, Stack, useMergeRefs, LinkBox, LinkOverlay, Checkbox as Checkbox$2, CheckboxGroup as CheckboxGroup$2, SimpleGrid as SimpleGrid$1, TableCaption, Thead, Tr, Th, Table as Table$1, Tbody, Td, useTheme, Input, Textarea, extendTheme, ChakraProvider, Radio as Radio$2, RadioGroup as RadioGroup$2, HStack, useOutsideClick, VStack, Spacer, useDisclosure, Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, 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, Tooltip as Tooltip$2, Switch as Switch$1 } from '@chakra-ui/react';
+import { chakra, useStyleConfig, Icon as Icon$2, Box, Accordion as Accordion$2, AccordionPanel, AccordionItem, AccordionButton, Button as Button$2, Heading as Heading$2, Text as Text$2, useMultiStyleConfig, Flex, Breadcrumb as Breadcrumb$1, BreadcrumbItem, BreadcrumbLink, useMediaQuery, Stack, useMergeRefs, 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, useOutsideClick, VStack, Spacer, useDisclosure, Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, 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, Tooltip as Tooltip$2, 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, useContext } from 'react';
 import useNativeLazyLoading from '@charlietango/use-native-lazy-loading';
@@ -50,7 +50,6 @@ var SvgAccessibilityFull = function SvgAccessibilityFull(_ref) {
     viewBox: "0 0 18 18",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -85,7 +84,6 @@ var SvgAccessibilityPartial = function SvgAccessibilityPartial(_ref) {
     viewBox: "0 0 18 18",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -119,7 +117,6 @@ var SvgActionCheckCircle = function SvgActionCheckCircle(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$3({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -142,7 +139,6 @@ var SvgActionCheckCircleFilled = function SvgActionCheckCircleFilled(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$4({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -163,7 +159,6 @@ var SvgActionExit = function SvgActionExit(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$5({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -186,7 +181,6 @@ var SvgActionHelpDefault = function SvgActionHelpDefault(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$6({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -209,7 +203,6 @@ var SvgActionHelpOutline = function SvgActionHelpOutline(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$7({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -232,7 +225,6 @@ var SvgActionLaunch = function SvgActionLaunch(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$8({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -255,7 +247,6 @@ var SvgActionPower = function SvgActionPower(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$9({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -278,7 +269,6 @@ var SvgActionRegistration = function SvgActionRegistration(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$a({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -299,7 +289,6 @@ var SvgActionSettings = function SvgActionSettings(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$b({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -322,7 +311,6 @@ var SvgAlertNotificationImportant = function SvgAlertNotificationImportant(_ref)
   return /*#__PURE__*/createElement("svg", _extends$c({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -345,7 +333,6 @@ var SvgAlertWarningFilled = function SvgAlertWarningFilled(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$d({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -368,7 +355,6 @@ var SvgAlertWarningOutline = function SvgAlertWarningOutline(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$e({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -391,7 +377,6 @@ var SvgArrow = function SvgArrow(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$f({
     viewBox: "0 0 24 14",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -414,7 +399,6 @@ var SvgBuilding = function SvgBuilding(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$g({
     viewBox: "0 0 26 26",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -437,7 +421,6 @@ var SvgCheck = function SvgCheck(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$h({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -458,7 +441,6 @@ var SvgClock = function SvgClock(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$i({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -481,7 +463,6 @@ var SvgClose = function SvgClose(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$j({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -502,7 +483,6 @@ var SvgDecorativeEnvelope = function SvgDecorativeEnvelope(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$k({
     viewBox: "0 0 68 68",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -525,7 +505,6 @@ var SvgDecorativeLibraryCard = function SvgDecorativeLibraryCard(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$l({
     viewBox: "0 0 68 68",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -548,7 +527,6 @@ var SvgDecorativeShoppingBag = function SvgDecorativeShoppingBag(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$m({
     viewBox: "0 0 68 68",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -569,7 +547,6 @@ var SvgDownload = function SvgDownload(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$n({
     viewBox: "0 0 14 18",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -592,7 +569,6 @@ var SvgErrorFilled = function SvgErrorFilled(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$o({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -615,7 +591,6 @@ var SvgErrorOutline = function SvgErrorOutline(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$p({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -638,7 +613,6 @@ var SvgFileTypeAudio = function SvgFileTypeAudio(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$q({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -667,7 +641,6 @@ var SvgFileTypeDoc = function SvgFileTypeDoc(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$r({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -696,7 +669,6 @@ var SvgFileTypeGenericDoc = function SvgFileTypeGenericDoc(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$s({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -723,7 +695,6 @@ var SvgFileTypeImage = function SvgFileTypeImage(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$t({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -760,7 +731,6 @@ var SvgFileTypePdf = function SvgFileTypePdf(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$u({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -789,7 +759,6 @@ var SvgFileTypeSpreadsheet = function SvgFileTypeSpreadsheet(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$v({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -818,7 +787,6 @@ var SvgFileTypeVideo = function SvgFileTypeVideo(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$w({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -845,7 +813,6 @@ var SvgHeadset = function SvgHeadset(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$x({
     viewBox: "0 0 18 19",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -866,7 +833,6 @@ var SvgLegacyAccountFilled = function SvgLegacyAccountFilled(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$y({
     viewBox: "0 0 32 33",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -887,7 +853,6 @@ var SvgLegacyAccountUnfilled = function SvgLegacyAccountUnfilled(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$z({
     viewBox: "0 0 33 33",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -908,7 +873,6 @@ var SvgLegacySocialFacebook = function SvgLegacySocialFacebook(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$A({
     viewBox: "0 0 32 32",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -929,7 +893,6 @@ var SvgLegacySocialInstagram = function SvgLegacySocialInstagram(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$B({
     viewBox: "0 0 32 32",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -950,7 +913,6 @@ var SvgLegacySocialTwitter = function SvgLegacySocialTwitter(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$C({
     viewBox: "0 0 32 32",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -971,7 +933,6 @@ var SvgLegacySocialYoutube = function SvgLegacySocialYoutube(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$D({
     viewBox: "0 0 32 32",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -992,7 +953,6 @@ var SvgLocator = function SvgLocator(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$E({
     viewBox: "0 0 32 32",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -1017,7 +977,6 @@ var SvgMinus = function SvgMinus(_ref) {
     width: 24,
     height: 2,
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -1040,7 +999,6 @@ var SvgPlus = function SvgPlus(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$G({
     viewBox: "0 0 23 23",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -1071,7 +1029,6 @@ var SvgSearch = function SvgSearch(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$H({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -1094,7 +1051,6 @@ var SvgSocialFacebook = function SvgSocialFacebook(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$I({
     viewBox: "0 0 36 36",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -1117,7 +1073,6 @@ var SvgSocialInstagram = function SvgSocialInstagram(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$J({
     viewBox: "0 0 37 37",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -1144,7 +1099,6 @@ var SvgSocialTumblr = function SvgSocialTumblr(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$K({
     viewBox: "0 0 36 36",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -1169,7 +1123,6 @@ var SvgSocialTwitter = function SvgSocialTwitter(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$L({
     viewBox: "0 0 36 36",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -1192,7 +1145,6 @@ var SvgSocialYoutube = function SvgSocialYoutube(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$M({
     viewBox: "0 0 36 36",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -1217,7 +1169,6 @@ var SvgSpeakerNotes = function SvgSpeakerNotes(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$N({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -1241,7 +1192,6 @@ var SvgUtilityAccountFilled = function SvgUtilityAccountFilled(_ref) {
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -1267,7 +1217,6 @@ var SvgUtilityAccountUnfilled = function SvgUtilityAccountUnfilled(_ref) {
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -1298,7 +1247,6 @@ var SvgUtilityHamburger = function SvgUtilityHamburger(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$Q({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -1585,9 +1533,6 @@ var Button = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref)
   if (!id) {
     console.warn("NYPL Reservoir Button: This component's required `id` prop was not passed.");
   }
-  if (buttonType === "link") {
-    console.warn("NYPL Reservoir Button: The 'link' value for the 'buttonType' prop has been deprecated.");
-  }
   React__default.Children.map(children, function (child) {
     childCount++;
     if (child !== undefined && child !== null) {
@@ -2317,9 +2262,9 @@ var ButtonGroup = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props,
     buttonWidth: finalButtonWidth
   });
   React__default.Children.map(children, function (child, key) {
-    if (child.type !== Button) {
+    if ((child == null ? void 0 : child.type) !== Button) {
       // Special case for Storybook MDX documentation.
-      if (child.props.mdxType && child.props.mdxType === "Button") ; else {
+      if (child != null && child.props.mdxType && (child == null ? void 0 : child.props.mdxType) === "Button") ; else {
         console.warn("NYPL Reservoir ButtonGroup: Only Button components can be children of ButtonGroup.");
         return;
       }
@@ -2327,7 +2272,7 @@ var ButtonGroup = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props,
     var disabledProps = isDisabled ? {
       isDisabled: isDisabled
     } : {};
-    newChildren.push(React__default.cloneElement(child, _extends({
+    child && newChildren.push(React__default.cloneElement(child, _extends({
       key: key
     }, disabledProps)));
   });
@@ -3073,36 +3018,6 @@ var CheckboxGroup = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props
   }));
 }));
 
-var _excluded$15 = ["children", "columns", "className", "gap", "id"];
-var SimpleGrid = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref) {
-  var children = props.children,
-    columns = props.columns,
-    className = props.className,
-    _props$gap = props.gap,
-    gap = _props$gap === void 0 ? "grid.l" : _props$gap,
-    id = props.id,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$15);
-  var responsiveCols = columns ? {
-    base: 1,
-    md: columns
-  } : {
-    base: 1,
-    md: 2,
-    lg: 3
-  };
-  return React__default.createElement(SimpleGrid$1, Object.assign({
-    className: className,
-    columns: responsiveCols,
-    gap: gap,
-    id: id,
-    ref: ref
-  }, rest), children);
-}), {
-  shouldForwardProp: function shouldForwardProp() {
-    return true;
-  }
-});
-
 /**
  * React hook used to get the window size on device resizing.
  * Based on https://usehooks-typescript.com/react-hook/use-window-size
@@ -3132,7 +3047,7 @@ function useWindowSize() {
   return windowSize;
 }
 
-var _excluded$16 = ["className", "columnHeaders", "columnHeadersBackgroundColor", "columnHeadersTextColor", "id", "showRowDividers", "tableData", "titleText", "useRowHeaders"];
+var _excluded$15 = ["className", "columnHeaders", "columnHeadersBackgroundColor", "columnHeadersTextColor", "id", "showRowDividers", "tableData", "titleText", "useRowHeaders"];
 /**
  * Basic `Table` component used to organize and display tabular data in
  * rows and columns.
@@ -3150,7 +3065,7 @@ var Table = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref) {
     titleText = props.titleText,
     _props$useRowHeaders = props.useRowHeaders,
     useRowHeaders = _props$useRowHeaders === void 0 ? false : _props$useRowHeaders,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$16);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$15);
   var customColors = {};
   columnHeadersBackgroundColor && (customColors["backgroundColor"] = columnHeadersBackgroundColor);
   columnHeadersTextColor && (customColors["color"] = columnHeadersTextColor);
@@ -3217,113 +3132,37 @@ var Table = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref) {
   }, rest), tableCaption, columnHeadersElems, tableBodyElems());
 }));
 
-/**
- * A custom hook that returns the Chakra-based NYPL theme object. This must be
- * used inside a component that is wrapped in the `DSProvider` component, so
- * that the theme object can be available to use.
- */
-function useNYPLTheme() {
-  var theme = useTheme();
-  if (!theme || Object.keys(theme).length === 0) {
-    console.warn("NYPL Reservoir useNYPLTheme: hook must be used inside of `<DSProvider />`.");
-    return {};
-  }
-  // Chakra provides a lot of their own styles but
-  // only NYPL styles should be exported.
-  return {
-    // base, sm, md, lg, xl, 2xl
-    breakpoints: theme.breakpoints,
-    colors: {
-      // primary, secondary
-      brand: theme.colors.brand,
-      // dark mode colors:
-      // ui.disabled, ui.error, ui.focus, ui.link,
-      // ui.status, ui.success, ui.test, ui.warning,
-      // ui.bg, ui.border, ui.typography
-      dark: theme.colors.dark,
-      // blogs, books-and-more, education, locations,
-      // research, research-library, whats-on
-      section: theme.colors.section,
-      transparent: theme.colors.transparent,
-      // black, white, gray, disabled, error, focus, link,
-      // status, success, test, warning, bg, border, typography
-      ui: theme.colors.ui
-    },
-    fontSizes: {
-      "-3": theme.fontSizes["-3"],
-      "-2": theme.fontSizes["-2"],
-      "-1": theme.fontSizes["-1"],
-      "0": theme.fontSizes["0"],
-      "1": theme.fontSizes["1"],
-      "2": theme.fontSizes["2"],
-      "3": theme.fontSizes["3"],
-      "4": theme.fontSizes["4"],
-      // default
-      breadcrumbs: theme.fontSizes.breadcrumbs,
-      // default
-      button: theme.fontSizes.button,
-      // primary, secondary, tertiary, callout
-      heading: theme.fontSizes.heading,
-      // default
-      helper: theme.fontSizes.helper,
-      // default, secondary
-      label: theme.fontSizes.label,
-      // default, caption, tag, mini
-      text: theme.fontSizes.text
-    },
-    fontWeights: {
-      light: theme.fontWeights.light,
-      regular: theme.fontWeights.regular,
-      medium: theme.fontWeights.medium,
-      bold: theme.fontWeights.bold,
-      // default, lastChild
-      breadcrumbs: theme.fontWeights.breadcrumbs,
-      // default
-      button: theme.fontWeights.button,
-      // primary, secondary, tertiary, callout
-      heading: theme.fontWeights.heading,
-      // default
-      helper: theme.fontWeights.helper,
-      // default
-      label: theme.fontWeights.label,
-      // default, caption, tag, mini
-      text: theme.fontWeights.text
-    },
-    fonts: {
-      body: theme.fonts.body,
-      heading: theme.fonts.heading
-    },
-    radii: theme.radii,
-    space: {
-      xxs: theme.space.xxs,
-      xs: theme.space.xs,
-      s: theme.space.s,
-      m: theme.space.m,
-      l: theme.space.l,
-      xl: theme.space.xl,
-      xxl: theme.space.xxl,
-      xxxl: theme.space.xxxl
+var SmallColorSwatch = function SmallColorSwatch(props) {
+  var backgroundColor = props.backgroundColor,
+    border = props.border,
+    darkBorder = props.darkBorder;
+  return createElement("span", {
+    style: {
+      backgroundColor: backgroundColor,
+      border: !border && !darkBorder ? null : darkBorder ? "1px solid #191919" : "1px solid #E9E9E9",
+      display: "inline-block",
+      height: "1rem",
+      marginRight: ".5rem",
+      verticalAlign: "middle",
+      width: "1rem"
     }
-  };
-}
-
+  });
+};
 var DataTable = function DataTable(props) {
   var dataBgPageColor = props.dataBgPageColor,
     dataBgDefaultColor = props.dataBgDefaultColor,
+    dataDarkBgPageColor = props.dataDarkBgPageColor,
+    dataDarkBgDefaultColor = props.dataDarkBgDefaultColor,
     _props$dataBlackColor = props.dataBlackColor,
     dataBlackColor = _props$dataBlackColor === void 0 ? ["--", "--", "--"] : _props$dataBlackColor,
-    dataHeadingColor = props.dataHeadingColor,
-    dataBodyColor = props.dataBodyColor,
+    dataDarkHeadingColor = props.dataDarkHeadingColor,
+    dataDarkBodyColor = props.dataDarkBodyColor,
     _props$dataWhiteColor = props.dataWhiteColor,
     dataWhiteColor = _props$dataWhiteColor === void 0 ? ["--", "--", "--"] : _props$dataWhiteColor,
+    dataBrandPrimaryColor = props.dataBrandPrimaryColor,
+    dataBrandSecondaryColor = props.dataBrandSecondaryColor,
     _props$textColor = props.textColor,
     textColor = _props$textColor === void 0 ? "ui.white" : _props$textColor;
-  var _useNYPLTheme = useNYPLTheme(),
-    ui = _useNYPLTheme.colors.ui;
-  var grayxxxxDark = ui.gray["xxxx-dark"];
-  var grayxxxDark = ui.gray["xxx-dark"];
-  var grayLightCool = ui.gray["light-cool"];
-  var grayMedium = ui.gray.medium;
   var SuccessIcon = function SuccessIcon() {
     return createElement(Icon, {
       color: textColor,
@@ -3348,29 +3187,41 @@ var DataTable = function DataTable(props) {
   var whiteLargeTextSuccess = successfulContrast(dataWhiteColor, "large");
   var blackSmallTextSuccess = successfulContrast(dataBlackColor);
   var blackLargeTextSuccess = successfulContrast(dataBlackColor, "large");
+  var brandPrimarySmallTextSuccess = dataBrandPrimaryColor && successfulContrast(dataBrandPrimaryColor);
+  var brandPrimaryLargeTextSuccess = dataBrandPrimaryColor && successfulContrast(dataBrandPrimaryColor, "large");
+  var brandSecondarySmallTextSuccess = dataBrandSecondaryColor && successfulContrast(dataBrandSecondaryColor);
+  var brandSecondaryLargeTextSuccess = dataBrandSecondaryColor && successfulContrast(dataBrandSecondaryColor, "large");
   // The dark theme colors might have the following color contrast information.
   var bgPageSmallTextSuccess = dataBgPageColor && successfulContrast(dataBgPageColor);
   var bgPageLargeTextSuccess = dataBgPageColor && successfulContrast(dataBgPageColor, "large");
   var bgDefaultSmallTextSuccess = dataBgDefaultColor && successfulContrast(dataBgDefaultColor);
   var bgDefaultLargeTextSuccess = dataBgDefaultColor && successfulContrast(dataBgDefaultColor, "large");
-  var headingSmallTextSuccess = dataHeadingColor && successfulContrast(dataHeadingColor);
-  var headingLargeTextSuccess = dataHeadingColor && successfulContrast(dataHeadingColor, "large");
-  var textSmallTextSuccess = dataBodyColor && successfulContrast(dataBodyColor);
-  var textLargeTextSuccess = dataBodyColor && successfulContrast(dataBodyColor, "large");
+  var darkBgPageSmallTextSuccess = dataDarkBgPageColor && successfulContrast(dataDarkBgPageColor);
+  var darkBgPageLargeTextSuccess = dataDarkBgPageColor && successfulContrast(dataDarkBgPageColor, "large");
+  var darkBgDefaultSmallTextSuccess = dataDarkBgDefaultColor && successfulContrast(dataDarkBgDefaultColor);
+  var darkBgDefaultLargeTextSuccess = dataDarkBgDefaultColor && successfulContrast(dataDarkBgDefaultColor, "large");
+  var darkHeadingSmallTextSuccess = dataDarkHeadingColor && successfulContrast(dataDarkHeadingColor);
+  var darkHeadingLargeTextSuccess = dataDarkHeadingColor && successfulContrast(dataDarkHeadingColor, "large");
+  var textSmallTextSuccess = dataDarkBodyColor && successfulContrast(dataDarkBodyColor);
+  var textLargeTextSuccess = dataDarkBodyColor && successfulContrast(dataDarkBodyColor, "large");
   // All ColorCards have these two rows.
   var tableData = [[createElement("span", {
     key: "colorUiWhite",
     style: {
-      color: "white",
       padding: 0
     }
-  }, "ui.white"), dataWhiteColor[0] + ":1", createElement(Fragment, null, dataWhiteColor[1], whiteSmallTextSuccess), createElement(Fragment, null, dataWhiteColor[2], whiteLargeTextSuccess)], [createElement("span", {
+  }, createElement(SmallColorSwatch, {
+    backgroundColor: "white",
+    border: true
+  }), "ui.white"), dataWhiteColor[0] + ":1", createElement(Fragment, null, dataWhiteColor[1], whiteSmallTextSuccess), createElement(Fragment, null, dataWhiteColor[2], whiteLargeTextSuccess)], [createElement("span", {
     key: "colorUiBlack",
     style: {
-      color: "black",
       padding: 0
     }
-  }, "ui.black"), dataBlackColor[0] + ":1", createElement(Fragment, null, dataBlackColor[1], blackSmallTextSuccess), createElement(Fragment, null, dataBlackColor[2], blackLargeTextSuccess)]];
+  }, createElement(SmallColorSwatch, {
+    backgroundColor: "black",
+    darkBorder: true
+  }), "ui.black"), dataBlackColor[0] + ":1", createElement(Fragment, null, dataBlackColor[1], blackSmallTextSuccess), createElement(Fragment, null, dataBlackColor[2], blackLargeTextSuccess)]];
   var cellStyles = {
     borderColor: textColor === "ui.white" ? "white !important" : "black !important",
     fontWeight: "medium",
@@ -3379,56 +3230,109 @@ var DataTable = function DataTable(props) {
   var tableStyles = {
     tbody: {
       td: _extends({
-        fontSize: "text.caption"
+        fontSize: "text.tag"
       }, cellStyles),
       th: _extends({
-        fontSize: "text.caption",
+        fontSize: "text.tag",
         textTransform: "none"
-      }, cellStyles)
+      }, cellStyles, {
+        _first: {
+          span: {
+            color: textColor
+          }
+        }
+      })
     },
     thead: {
       th: _extends({
         color: textColor,
-        fontSize: "text.tag"
+        fontSize: "text.tag",
+        textTransform: "uppercase"
       }, cellStyles)
     }
   };
-  // For dark mode `ColorCard`s, there are four extra rows.
+  // The Brand colors are needed for some `ColorCard`s.
+  if (dataBrandPrimaryColor && dataBrandPrimaryColor.length > 0) {
+    tableData.push([createElement("span", {
+      key: "colorBrandPrimaryPage",
+      style: {
+        padding: 0
+      }
+    }, createElement(SmallColorSwatch, {
+      backgroundColor: "var(--nypl-colors-brand-primary)"
+    }), "brand.primary"), dataBrandPrimaryColor[0] + ":1", createElement(Fragment, null, dataBrandPrimaryColor[1], brandPrimarySmallTextSuccess), createElement(Fragment, null, dataBrandPrimaryColor[2], brandPrimaryLargeTextSuccess)]);
+  }
+  if (dataBrandSecondaryColor && dataBrandSecondaryColor.length > 0) {
+    tableData.push([createElement("span", {
+      key: "colorBrandSecondaryPage",
+      style: {
+        padding: 0
+      }
+    }, createElement(SmallColorSwatch, {
+      backgroundColor: "var(--nypl-colors-brand-secondary)"
+    }), "brand.secondary"), dataBrandSecondaryColor[0] + ":1", createElement(Fragment, null, dataBrandSecondaryColor[1], brandSecondarySmallTextSuccess), createElement(Fragment, null, dataBrandSecondaryColor[2], brandSecondaryLargeTextSuccess)]);
+  }
   if (dataBgPageColor && dataBgPageColor.length > 0) {
     tableData.push([createElement("span", {
       key: "colorBgPage",
       style: {
-        color: grayxxxxDark,
         padding: 0
       }
-    }, "bg page"), dataBgPageColor[0] + ":1", createElement(Fragment, null, dataBgPageColor[1], bgPageSmallTextSuccess), createElement(Fragment, null, dataBgPageColor[2], bgPageLargeTextSuccess)]);
+    }, createElement(SmallColorSwatch, {
+      backgroundColor: "var(--nypl-colors-ui-bg-page)",
+      border: true
+    }), "ui.bg.page"), dataBgPageColor[0] + ":1", createElement(Fragment, null, dataBgPageColor[1], bgPageSmallTextSuccess), createElement(Fragment, null, dataBgPageColor[2], bgPageLargeTextSuccess)]);
   }
   if (dataBgDefaultColor && dataBgDefaultColor.length > 0) {
     tableData.push([createElement("span", {
       key: "colorBgDefault",
       style: {
-        color: grayxxxDark,
         padding: 0
       }
-    }, "bg default"), dataBgDefaultColor[0] + ":1", createElement(Fragment, null, dataBgDefaultColor[1], bgDefaultSmallTextSuccess), createElement(Fragment, null, dataBgDefaultColor[2], bgDefaultLargeTextSuccess)]);
+    }, createElement(SmallColorSwatch, {
+      backgroundColor: "var(--nypl-colors-ui-bg-default)"
+    }), "ui.bg.default"), dataBgDefaultColor[0] + ":1", createElement(Fragment, null, dataBgDefaultColor[1], bgDefaultSmallTextSuccess), createElement(Fragment, null, dataBgDefaultColor[2], bgDefaultLargeTextSuccess)]);
   }
-  if (dataHeadingColor && dataHeadingColor.length > 0) {
+  // For dark mode `ColorCard`s, there are four extra rows.
+  if (dataDarkBgPageColor && dataDarkBgPageColor.length > 0) {
     tableData.push([createElement("span", {
-      key: "colorHeading",
+      key: "colorDarkBgPage",
       style: {
-        color: grayLightCool,
         padding: 0
       }
-    }, "heading"), dataHeadingColor[0] + ":1", createElement(Fragment, null, dataHeadingColor[1], headingSmallTextSuccess), createElement(Fragment, null, dataHeadingColor[2], headingLargeTextSuccess)]);
+    }, createElement(SmallColorSwatch, {
+      backgroundColor: "var(--nypl-colors-dark-ui-bg-page)"
+    }), "dark.ui.bg.page"), dataDarkBgPageColor[0] + ":1", createElement(Fragment, null, dataDarkBgPageColor[1], darkBgPageSmallTextSuccess), createElement(Fragment, null, dataDarkBgPageColor[2], darkBgPageLargeTextSuccess)]);
   }
-  if (dataBodyColor && dataBodyColor.length > 0) {
+  if (dataDarkBgDefaultColor && dataDarkBgDefaultColor.length > 0) {
     tableData.push([createElement("span", {
-      key: "colorText",
+      key: "colorDarkBgDefault",
       style: {
-        color: grayMedium,
         padding: 0
       }
-    }, "body"), dataBodyColor[0] + ":1", createElement(Fragment, null, dataBodyColor[1], textSmallTextSuccess), createElement(Fragment, null, dataBodyColor[2], textLargeTextSuccess)]);
+    }, createElement(SmallColorSwatch, {
+      backgroundColor: "var(--nypl-colors-dark-ui-bg-default)"
+    }), "dark.ui.bg.default"), dataDarkBgDefaultColor[0] + ":1", createElement(Fragment, null, dataDarkBgDefaultColor[1], darkBgDefaultSmallTextSuccess), createElement(Fragment, null, dataDarkBgDefaultColor[2], darkBgDefaultLargeTextSuccess)]);
+  }
+  if (dataDarkHeadingColor && dataDarkHeadingColor.length > 0) {
+    tableData.push([createElement("span", {
+      key: "colorDarkHeading",
+      style: {
+        padding: 0
+      }
+    }, createElement(SmallColorSwatch, {
+      backgroundColor: "var(--nypl-colors-ui-typography-heading)"
+    }), "ui.typography.heading"), dataDarkHeadingColor[0] + ":1", createElement(Fragment, null, dataDarkHeadingColor[1], darkHeadingSmallTextSuccess), createElement(Fragment, null, dataDarkHeadingColor[2], darkHeadingLargeTextSuccess)]);
+  }
+  if (dataDarkBodyColor && dataDarkBodyColor.length > 0) {
+    tableData.push([createElement("span", {
+      key: "colorDarkText",
+      style: {
+        padding: 0
+      }
+    }, createElement(SmallColorSwatch, {
+      backgroundColor: "var(--nypl-colors-ui-typography-body)"
+    }), "ui.typography.body"), dataDarkBodyColor[0] + ":1", createElement(Fragment, null, dataDarkBodyColor[1], textSmallTextSuccess), createElement(Fragment, null, dataDarkBodyColor[2], textLargeTextSuccess)]);
   }
   return createElement(Table, {
     columnHeaders: columnHeaders,
@@ -3442,19 +3346,23 @@ var ColorCard = function ColorCard(props) {
   var backgroundColor = props.backgroundColor,
     dataBgPageColor = props.dataBgPageColor,
     dataBgDefaultColor = props.dataBgDefaultColor,
+    dataDarkBgPageColor = props.dataDarkBgPageColor,
+    dataDarkBgDefaultColor = props.dataDarkBgDefaultColor,
     _props$colorName = props.colorName,
     colorName = _props$colorName === void 0 ? "" : _props$colorName,
     colorSource = props.colorSource,
     _props$dataBlackColor2 = props.dataBlackColor,
     dataBlackColor = _props$dataBlackColor2 === void 0 ? ["--", "--", "--"] : _props$dataBlackColor2,
-    dataHeadingColor = props.dataHeadingColor,
-    dataBodyColor = props.dataBodyColor,
+    dataDarkHeadingColor = props.dataDarkHeadingColor,
+    dataDarkBodyColor = props.dataDarkBodyColor,
     _props$dataWhiteColor2 = props.dataWhiteColor,
     dataWhiteColor = _props$dataWhiteColor2 === void 0 ? ["--", "--", "--"] : _props$dataWhiteColor2,
+    dataBrandPrimaryColor = props.dataBrandPrimaryColor,
+    dataBrandSecondaryColor = props.dataBrandSecondaryColor,
     _props$textColor2 = props.textColor,
     textColor = _props$textColor2 === void 0 ? "ui.white" : _props$textColor2;
   var cssVarName = "--nypl-colors-" + colorName.replace(/\./g, "-");
-  var border = backgroundColor === "ui.white" ? "1px solid var(--nypl-colors-ui-gray-light-cool)" : undefined;
+  var border = backgroundColor === "ui.white" || backgroundColor === "ui.typography.inverse.heading" || backgroundColor === "ui.typography.inverse.body" ? "1px solid var(--nypl-colors-ui-gray-light-cool)" : undefined;
   return createElement(Box, {
     bg: backgroundColor,
     color: textColor,
@@ -3462,9 +3370,11 @@ var ColorCard = function ColorCard(props) {
     paddingBottom: "m",
     paddingTop: "s",
     border: border
-  }, createElement(SimpleGrid, {
-    columns: 2
-  }, createElement(Box, null, createElement(Heading, {
+  }, createElement(HStack, {
+    alignItems: "top"
+  }, createElement(Box, {
+    width: "80%"
+  }, createElement(Heading, {
     noSpace: true,
     size: "tertiary"
   }, backgroundColor), createElement(Text, {
@@ -3478,14 +3388,48 @@ var ColorCard = function ColorCard(props) {
   }, "Source: ", colorSource)), createElement(DataTable, {
     dataBgPageColor: dataBgPageColor,
     dataBgDefaultColor: dataBgDefaultColor,
+    dataDarkBgPageColor: dataDarkBgPageColor,
+    dataDarkBgDefaultColor: dataDarkBgDefaultColor,
     dataBlackColor: dataBlackColor,
-    dataHeadingColor: dataHeadingColor,
-    dataBodyColor: dataBodyColor,
+    dataDarkHeadingColor: dataDarkHeadingColor,
+    dataDarkBodyColor: dataDarkBodyColor,
     dataWhiteColor: dataWhiteColor,
+    dataBrandPrimaryColor: dataBrandPrimaryColor,
+    dataBrandSecondaryColor: dataBrandSecondaryColor,
     textColor: textColor
   })));
 };
 
+var _excluded$16 = ["children", "columns", "className", "gap", "id"];
+var SimpleGrid = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+    columns = props.columns,
+    className = props.className,
+    _props$gap = props.gap,
+    gap = _props$gap === void 0 ? "grid.l" : _props$gap,
+    id = props.id,
+    rest = _objectWithoutPropertiesLoose(props, _excluded$16);
+  var responsiveCols = columns ? {
+    base: 1,
+    md: columns
+  } : {
+    base: 1,
+    md: 2,
+    lg: 3
+  };
+  return React__default.createElement(SimpleGrid$1, Object.assign({
+    className: className,
+    columns: responsiveCols,
+    gap: gap,
+    id: id,
+    ref: ref
+  }, rest), children);
+}), {
+  shouldForwardProp: function shouldForwardProp() {
+    return true;
+  }
+});
+
 var _excluded$17 = ["children", "className", "gap", "id"],
   _excluded2$3 = ["children", "className", "gap", "id"],
   _excluded3$1 = ["action", "children", "className", "gap", "id", "method", "onSubmit"];
@@ -3546,7 +3490,7 @@ var Form = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref) {
   action && (attributes["action"] = action);
   method && (method === "get" || method === "post") && (attributes["method"] = method);
   var alteredChildren = React__default.Children.map(children, function (child, i) {
-    return React__default.cloneElement(child, {
+    return child && React__default.cloneElement(child, {
       gap: gap,
       id: id + "-child" + i
     });
@@ -4266,7 +4210,7 @@ var global = {
  * Chakra Value |     DS Variable           | EM/PX value
  * ------------------------------------------------------
  *      sm      | --nypl-breakpoint-small   | 20em/320px
- *      md      | --nypl-breakpoint-medium  | 38em/600px
+ *      md      | --nypl-breakpoint-medium  | 37.5em/600px
  *      lg      | --nypl-breakpoint-large   | 60em/960px
  *      xl      | --nypl-breakpoint-xl      | 80em/1280px
  *     2xl      |        N/A                | 96em/1536px
@@ -4276,7 +4220,7 @@ var global = {
  */
 var breakpoints = /*#__PURE__*/createBreakpoints({
   sm: "20em",
-  md: "38em",
+  md: "37.5em",
   lg: "60em",
   xl: "80em",
   "2xl": "96em"
@@ -4353,6 +4297,7 @@ var colors = {
     },
     // Semantic colors
     bg: {
+      page: white,
       "default": grayxLightCool,
       hover: grayLightCool,
       active: grayMedium
@@ -4363,7 +4308,11 @@ var colors = {
     },
     typography: {
       heading: black,
-      body: black
+      body: black,
+      inverse: {
+        heading: white,
+        body: white
+      }
     },
     // Grayscale
     gray: {
@@ -4424,7 +4373,11 @@ var colors = {
       },
       typography: {
         heading: grayLightCool,
-        body: grayMedium
+        body: grayMedium,
+        inverse: {
+          heading: grayxxDark,
+          body: grayxxDark
+        }
       }
     }
   },
@@ -4724,6 +4677,15 @@ var AlphabetFilter$1 = {
   }
 };
 
+var AudioPlayer$1 = {
+  baseStyle: {
+    invalid: {
+      backgroundColor: "ui.bg.default",
+      padding: "s"
+    }
+  }
+};
+
 // Variant styling
 var blogs = {
   bg: "section.blogs.secondary",
@@ -5612,6 +5574,47 @@ var DatePicker$1 = {
   }
 };
 
+var FeedbackBox = {
+  parts: ["closeButton", "drawerBody", "drawerContent", "drawerHeader", "openButton"],
+  baseStyle: {
+    closeButton: {
+      p: "0",
+      span: /*#__PURE__*/screenreaderOnly()
+    },
+    drawerBody: {
+      paddingTop: "m",
+      paddingBottom: "m"
+    },
+    drawerContent: {
+      marginStart: "auto",
+      width: {
+        base: "100%",
+        md: "375px"
+      }
+    },
+    drawerHeader: {
+      alignItems: "baseline",
+      background: "ui.gray.light-cool",
+      borderBottomWidth: "1px",
+      display: "flex",
+      fontSize: "text.default",
+      px: "m",
+      paddingTop: "xs",
+      paddingBottom: "xs",
+      p: {
+        marginBottom: "0"
+      }
+    },
+    openButton: {
+      position: "fixed",
+      borderRadius: "0",
+      bottom: "0",
+      right: "0",
+      zIndex: "5"
+    }
+  }
+};
+
 var Fieldset$1 = {
   baseStyle: function baseStyle(_ref) {
     var isLegendHidden = _ref.isLegendHidden;
@@ -8228,6 +8231,30 @@ var StructuredContent = {
   }
 };
 
+var StyledList = {
+  baseStyle: function baseStyle(_ref) {
+    var _ref$textSize = _ref.textSize,
+      textSize = _ref$textSize === void 0 ? "default" : _ref$textSize;
+    return _extends({
+      fontSize: "text." + textSize
+    }, baseListStyles(false, true), baseUnorderedStyles(true));
+  },
+  variants: {
+    capped: {
+      li: {
+        borderStart: "1px solid",
+        borderEnd: {
+          base: "1px solid",
+          md: "none"
+        },
+        borderColor: "ui.border.default",
+        my: "xs",
+        px: "xs"
+      }
+    }
+  }
+};
+
 var tablist = {
   borderColor: "ui.black"
 };
@@ -8853,15 +8880,6 @@ var VideoPlayer = {
   }
 };
 
-var AudioPlayer$1 = {
-  baseStyle: {
-    invalid: {
-      backgroundColor: "ui.bg.default",
-      padding: "s"
-    }
-  }
-};
-
 /**
  * See Chakra default theme for shape of theme object:
  * https://github.com/chakra-ui/chakra-ui/tree/main/packages/theme
@@ -8909,6 +8927,7 @@ var theme = /*#__PURE__*/extendTheme( /*#__PURE__*/_extends({
     CustomImageWrapper: CustomImageWrapper,
     CustomSelect: Select,
     DatePicker: DatePicker$1,
+    FeedbackBox: FeedbackBox,
     Fieldset: Fieldset$1,
     Footer: Footer,
     Header: Header,
@@ -8944,6 +8963,7 @@ var theme = /*#__PURE__*/extendTheme( /*#__PURE__*/_extends({
     CustomSlider: CustomSlider,
     StatusBadge: StatusBadge,
     StructuredContent: StructuredContent,
+    StyledList: StyledList,
     Tabs: CustomTabs,
     CustomTable: CustomTable
   }, TagSetStyles, TemplateStyles, {
@@ -9041,18 +9061,6 @@ var List$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref)
     }
     return null;
   };
-  /**
-   * Checks for `li` elements and consoles a warning if the
-   * children are different HTML elements.
-   */
-  var checkListChildrenError = function checkListChildrenError(listType) {
-    React__default.Children.map(children, function (child) {
-      var _child$props;
-      if (child && (child == null ? void 0 : child.type) !== "li" && (child == null ? void 0 : (_child$props = child.props) == null ? void 0 : _child$props.mdxType) !== "li") {
-        console.warn("NYPL Reservoir List: Direct children of `List` (" + listType + ") must be `<li>`s.");
-      }
-    });
-  };
   /**
    * Checks for `dt` and `dd` elements and consoles a warning if the
    * children are different HTML elements.
@@ -9065,7 +9073,7 @@ var List$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref)
     });
   };
   if (type === "ol" || type === "ul") {
-    checkListChildrenError(type);
+    checkListChildrenError(children, type);
     listElement = React__default.createElement(Box, Object.assign({
       as: type,
       id: id,
@@ -9087,6 +9095,24 @@ var List$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref)
   }
   return listElement;
 }));
+/**
+ * Checks for `li` elements and consoles a warning if the
+ * children are different HTML elements.
+ */
+var checkListChildrenError = function checkListChildrenError(children, listType, componentName) {
+  if (listType === void 0) {
+    listType = "ul";
+  }
+  if (componentName === void 0) {
+    componentName = "List";
+  }
+  React__default.Children.map(children, function (child) {
+    var _child$props;
+    if (child && (child == null ? void 0 : child.type) !== "li" && (child == null ? void 0 : (_child$props = child.props) == null ? void 0 : _child$props.mdxType) !== "li") {
+      console.warn("NYPL Reservoir " + componentName + ": Direct children of `" + componentName + "` (" + listType + ") must be `<li>`s.");
+    }
+  });
+};
 
 var _path$L, _path2$f, _path3$7;
 var _excluded$1c = ["title", "titleId"];
@@ -9101,7 +9127,6 @@ var SvgLogoAppleAppStoreBlack = function SvgLogoAppleAppStoreBlack(_ref) {
     viewBox: "0 0 200 67",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -9130,7 +9155,6 @@ var SvgLogoAppleAppStoreWhite = function SvgLogoAppleAppStoreWhite(_ref) {
     viewBox: "0 0 200 67",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -9158,7 +9182,6 @@ var SvgLogoBplBlack = function SvgLogoBplBlack(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$T({
     viewBox: "0 0 328 120",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -9184,7 +9207,6 @@ var SvgLogoBplWhite = function SvgLogoBplWhite(_ref) {
     viewBox: "0 0 328 120",
     fill: "#fff",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -9210,7 +9232,6 @@ var SvgLogoCleverBadgeColor = function SvgLogoCleverBadgeColor(_ref) {
     viewBox: "0 0 118 119",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -9241,7 +9262,6 @@ var SvgLogoCleverColor = function SvgLogoCleverColor(_ref) {
     viewBox: "0 0 312 88",
     fill: "#436CF2",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -9265,7 +9285,6 @@ var SvgLogoCleverWhite = function SvgLogoCleverWhite(_ref) {
     viewBox: "0 0 312 88",
     fill: "#fff",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -9289,7 +9308,6 @@ var SvgLogoFirstbookColor = function SvgLogoFirstbookColor(_ref) {
     viewBox: "0 0 172 152",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -9348,7 +9366,6 @@ var SvgLogoFirstbookColorNegative = function SvgLogoFirstbookColorNegative(_ref)
     viewBox: "0 0 170 150",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -9412,7 +9429,6 @@ var SvgLogoGooglePlayBlack = function SvgLogoGooglePlayBlack(_ref) {
     viewBox: "0 0 200 60",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -9553,7 +9569,6 @@ var SvgLogoLpaColor = function SvgLogoLpaColor(_ref) {
     viewBox: "0 0 186 74",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -9578,7 +9593,6 @@ var SvgLogoLpaBlack = function SvgLogoLpaBlack(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$10({
     viewBox: "0 0 186 74",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -9600,7 +9614,6 @@ var SvgLogoLpaWhite = function SvgLogoLpaWhite(_ref) {
     viewBox: "0 0 186 74",
     fill: "#fff",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -9621,7 +9634,6 @@ var SvgLogoMlnBlack = function SvgLogoMlnBlack(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$12({
     viewBox: "0 0 300 71",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -9645,7 +9657,6 @@ var SvgLogoMlnColor = function SvgLogoMlnColor(_ref) {
     viewBox: "0 0 300 71",
     fill: "#C60917",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -9669,7 +9680,6 @@ var SvgLogoMlnWhite = function SvgLogoMlnWhite(_ref) {
     viewBox: "0 0 300 71",
     fill: "#fff",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -9693,7 +9703,6 @@ var SvgLogoNycdoeColor = function SvgLogoNycdoeColor(_ref) {
     viewBox: "0 0 341 61",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -9734,7 +9743,6 @@ var SvgLogoNyplFullBlack = function SvgLogoNyplFullBlack(_ref) {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 966.787 543.733",
     xmlSpace: "preserve",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -9817,7 +9825,6 @@ var SvgLogoNyplFullWhite = function SvgLogoNyplFullWhite(_ref) {
     viewBox: "0 0 967 568",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -9853,7 +9860,6 @@ var SvgLogoNyplLionBlack = function SvgLogoNyplLionBlack(_ref) {
     viewBox: "0 0 136 135",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -9884,7 +9890,6 @@ var SvgLogoNyplLionWhite = function SvgLogoNyplLionWhite(_ref) {
     viewBox: "0 0 125 126",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -9909,7 +9914,6 @@ var SvgLogoNyplTextBlack = function SvgLogoNyplTextBlack(_ref) {
     viewBox: "0 0 201 165",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -9988,7 +9992,6 @@ var SvgLogoNyplTextWhite = function SvgLogoNyplTextWhite(_ref) {
     viewBox: "0 0 201 165",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -10067,7 +10070,6 @@ var SvgLogoOpenebooksColor = function SvgLogoOpenebooksColor(_ref) {
     viewBox: "0 0 152 139",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -10123,7 +10125,6 @@ var SvgLogoOpenebooksNegative = function SvgLogoOpenebooksNegative(_ref) {
     viewBox: "0 0 155 139",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -10202,7 +10203,6 @@ var SvgLogoOpenebooksWithTextColor = function SvgLogoOpenebooksWithTextColor(_re
     viewBox: "0 0 152 139",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -10258,7 +10258,6 @@ var SvgLogoOpenebooksWithTextNegative = function SvgLogoOpenebooksWithTextNegati
     viewBox: "0 0 155 139",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -10339,7 +10338,6 @@ var SvgLogoQplAltBlack = function SvgLogoQplAltBlack(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$1g({
     viewBox: "0 0 250 134",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -10361,7 +10359,6 @@ var SvgLogoQplAltWhite = function SvgLogoQplAltWhite(_ref) {
     viewBox: "0 0 250 134",
     fill: "#fff",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -10382,7 +10379,6 @@ var SvgLogoQplBlack = function SvgLogoQplBlack(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$1i({
     viewBox: "0 0 320 43",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -10420,7 +10416,6 @@ var SvgLogoQplColor = function SvgLogoQplColor(_ref) {
     viewBox: "0 0 355 48",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -10476,7 +10471,6 @@ var SvgLogoQplWhite = function SvgLogoQplWhite(_ref) {
     viewBox: "0 0 320 43",
     fill: "#fff",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -10514,7 +10508,6 @@ var SvgLogoReservoirIconColor = function SvgLogoReservoirIconColor(_ref) {
     viewBox: "0 0 105 129",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -10549,7 +10542,6 @@ var SvgLogoReservoirVerticalColor = function SvgLogoReservoirVerticalColor(_ref)
     viewBox: "0 0 234 261",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -10582,7 +10574,6 @@ var SvgLogoSchomburgBlack = function SvgLogoSchomburgBlack(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$1n({
     viewBox: "0 0 185 79",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -10611,7 +10602,6 @@ var SvgLogoSchomburgCircleBlack = function SvgLogoSchomburgCircleBlack(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$1o({
     viewBox: "0 0 67 67",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -10641,7 +10631,6 @@ var SvgLogoSchomburgCircleColor = function SvgLogoSchomburgCircleColor(_ref) {
     viewBox: "0 0 67 67",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -10676,7 +10665,6 @@ var SvgLogoSchomburgCircleWhite = function SvgLogoSchomburgCircleWhite(_ref) {
     viewBox: "0 0 67 67",
     fill: "#fff",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -10706,7 +10694,6 @@ var SvgLogoSchomburgColor = function SvgLogoSchomburgColor(_ref) {
     viewBox: "0 0 185 79",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -10747,7 +10734,6 @@ var SvgLogoSchomburgWhite = function SvgLogoSchomburgWhite(_ref) {
     viewBox: "0 0 185 79",
     fill: "#fff",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -10776,7 +10762,6 @@ var SvgLogoSimplyeBlack = function SvgLogoSimplyeBlack(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$1t({
     viewBox: "0 0 512 148",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -10810,7 +10795,6 @@ var SvgLogoSimplyeWhite = function SvgLogoSimplyeWhite(_ref) {
     viewBox: "0 0 512 148",
     fill: "#fff",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -10843,7 +10827,6 @@ var SvgLogoSimplyeColor = function SvgLogoSimplyeColor(_ref) {
     viewBox: "0 0 682 196",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -10882,7 +10865,6 @@ var SvgLogoSnflBlack = function SvgLogoSnflBlack(_ref) {
   return /*#__PURE__*/createElement("svg", _extends$1w({
     viewBox: "0 0 84 111",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -10904,7 +10886,6 @@ var SvgLogoSnflWhite = function SvgLogoSnflWhite(_ref) {
     viewBox: "0 0 84 111",
     fill: "#fff",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -10926,7 +10907,6 @@ var SvgLogoTreasuresColor = function SvgLogoTreasuresColor(_ref) {
     viewBox: "0 0 324 265",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -11111,7 +11091,6 @@ var SvgLogoTreasuresColorNegative = function SvgLogoTreasuresColorNegative(_ref)
     viewBox: "0 0 327 266",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
@@ -14344,6 +14323,47 @@ var StructuredContent$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function
   }), finalBodyContent);
 }));
 
+/**
+ * The `StyledList` component renders an HTML list with styles that do not
+ * adhere to traditional numbered and bulleted list styles. Unlike
+ * the `List` component, `StyledList` only renders an unordered list.
+ */
+var StyledList$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+    className = props.className,
+    id = props.id,
+    _props$listItems = props.listItems,
+    listItems = _props$listItems === void 0 ? [] : _props$listItems,
+    _props$style = props.style,
+    style = _props$style === void 0 ? "capped" : _props$style,
+    _props$textSize = props.textSize,
+    textSize = _props$textSize === void 0 ? "default" : _props$textSize;
+  var styles = useMultiStyleConfig("StyledList", {
+    textSize: textSize,
+    variant: style
+  });
+  var finalChildren;
+  if (children && listItems.length > 0) {
+    console.warn("NYPL Reservoir StyledList: Pass in either `<li>` children or use the " + "`listItems` data prop. Do not use both.");
+    return null;
+  }
+  // Makes sure that the passed children elements are `li` elements but
+  // it is not enforced. Only a warning is logged to the console.
+  checkListChildrenError(children, "ul", "StyledList");
+  finalChildren = children || listItems.map(function (item, i) {
+    return React__default.createElement("li", {
+      key: i
+    }, item);
+  });
+  return React__default.createElement(Box, {
+    as: "ul",
+    className: className,
+    id: id,
+    ref: ref,
+    __css: styles
+  }, finalChildren);
+}));
+
 /**
  * Custom hook that controls the sliding function for the carousel wrapper.
  * This returns functions to use for the "previous" and "next" buttons as well
@@ -15090,6 +15110,96 @@ var Toggle$2 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref
   }), labelText)));
 }));
 
+/**
+ * A custom hook that returns the Chakra-based NYPL theme object. This must be
+ * used inside a component that is wrapped in the `DSProvider` component, so
+ * that the theme object can be available to use.
+ */
+function useNYPLTheme() {
+  var theme = useTheme();
+  if (!theme || Object.keys(theme).length === 0) {
+    console.warn("NYPL Reservoir useNYPLTheme: hook must be used inside of `<DSProvider />`.");
+    return {};
+  }
+  // Chakra provides a lot of their own styles but
+  // only NYPL styles should be exported.
+  return {
+    // base, sm, md, lg, xl, 2xl
+    breakpoints: theme.breakpoints,
+    colors: {
+      // primary, secondary
+      brand: theme.colors.brand,
+      // dark mode colors:
+      // ui.disabled, ui.error, ui.focus, ui.link,
+      // ui.status, ui.success, ui.test, ui.warning,
+      // ui.bg, ui.border, ui.typography
+      dark: theme.colors.dark,
+      // blogs, books-and-more, education, locations,
+      // research, research-library, whats-on
+      section: theme.colors.section,
+      transparent: theme.colors.transparent,
+      // black, white, gray, disabled, error, focus, link,
+      // status, success, test, warning, bg, border, typography
+      ui: theme.colors.ui
+    },
+    fontSizes: {
+      "-3": theme.fontSizes["-3"],
+      "-2": theme.fontSizes["-2"],
+      "-1": theme.fontSizes["-1"],
+      "0": theme.fontSizes["0"],
+      "1": theme.fontSizes["1"],
+      "2": theme.fontSizes["2"],
+      "3": theme.fontSizes["3"],
+      "4": theme.fontSizes["4"],
+      // default
+      breadcrumbs: theme.fontSizes.breadcrumbs,
+      // default
+      button: theme.fontSizes.button,
+      // primary, secondary, tertiary, callout
+      heading: theme.fontSizes.heading,
+      // default
+      helper: theme.fontSizes.helper,
+      // default, secondary
+      label: theme.fontSizes.label,
+      // default, caption, tag, mini
+      text: theme.fontSizes.text
+    },
+    fontWeights: {
+      light: theme.fontWeights.light,
+      regular: theme.fontWeights.regular,
+      medium: theme.fontWeights.medium,
+      bold: theme.fontWeights.bold,
+      // default, lastChild
+      breadcrumbs: theme.fontWeights.breadcrumbs,
+      // default
+      button: theme.fontWeights.button,
+      // primary, secondary, tertiary, callout
+      heading: theme.fontWeights.heading,
+      // default
+      helper: theme.fontWeights.helper,
+      // default
+      label: theme.fontWeights.label,
+      // default, caption, tag, mini
+      text: theme.fontWeights.text
+    },
+    fonts: {
+      body: theme.fonts.body,
+      heading: theme.fonts.heading
+    },
+    radii: theme.radii,
+    space: {
+      xxs: theme.space.xxs,
+      xs: theme.space.xs,
+      s: theme.space.s,
+      m: theme.space.m,
+      l: theme.space.l,
+      xl: theme.space.xl,
+      xxl: theme.space.xxl,
+      xxxl: theme.space.xxxl
+    }
+  };
+}
+
 var _excluded$2h = ["aspectRatio", "className", "descriptionText", "embedCode", "headingText", "helperText", "id", "iframeTitle", "showHelperInvalidText", "videoId", "videoType"];
 var VideoPlayer$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref) {
   var aspectRatio = props.aspectRatio,
@@ -15169,5 +15279,5 @@ var VideoPlayer$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props
   }, embedElement)));
 }));
 
-export { Accordion, AlphabetFilter, AudioPlayer, Breadcrumbs, Button, ButtonGroup, Card, CardActions, CardContent, CardHeading, Checkbox, CheckboxGroup, ColorCard, DSProvider, DatePicker, Fieldset, Footer$1 as Footer, Form, FormField, FormRow, Header$1 as Header, Heading, HelperErrorText, Hero$1 as Hero, HorizontalRule$1 as HorizontalRule, Icon, Image, Label, Link, List$1 as List, Logo$1 as Logo, ModalTrigger, Notification$1 as Notification, Pagination$1 as Pagination, ProgressIndicator$1 as ProgressIndicator, Radio$1 as Radio, RadioGroup$1 as RadioGroup, SearchBar$1 as SearchBar, Select$1 as Select, SimpleGrid, SkeletonLoader$1 as SkeletonLoader, SkipNavigation$1 as SkipNavigation, Slider, StatusBadge$1 as StatusBadge, StructuredContent$1 as StructuredContent, Table, Tabs, TagSet$1 as TagSet, Template$1 as Template, TemplateAboveHeader, TemplateAppContainer, TemplateBreakout$1 as TemplateBreakout, TemplateContent$1 as TemplateContent, TemplateContentPrimary$1 as TemplateContentPrimary, TemplateContentSidebar$1 as TemplateContentSidebar, TemplateContentTop, TemplateFooter, TemplateHeader, Text, TextInput, Toggle$2 as Toggle, Tooltip$1 as Tooltip, VideoPlayer$1 as VideoPlayer, useCarouselStyles, useModal, useNYPLBreakpoints, useNYPLTheme, useWindowSize };
+export { Accordion, AlphabetFilter, AudioPlayer, Breadcrumbs, Button, ButtonGroup, Card, CardActions, CardContent, CardHeading, Checkbox, CheckboxGroup, ColorCard, DSProvider, DatePicker, Fieldset, Footer$1 as Footer, Form, FormField, FormRow, Header$1 as Header, Heading, HelperErrorText, Hero$1 as Hero, HorizontalRule$1 as HorizontalRule, Icon, Image, Label, Link, List$1 as List, Logo$1 as Logo, ModalTrigger, Notification$1 as Notification, Pagination$1 as Pagination, ProgressIndicator$1 as ProgressIndicator, Radio$1 as Radio, RadioGroup$1 as RadioGroup, SearchBar$1 as SearchBar, Select$1 as Select, SimpleGrid, SkeletonLoader$1 as SkeletonLoader, SkipNavigation$1 as SkipNavigation, Slider, StatusBadge$1 as StatusBadge, StructuredContent$1 as StructuredContent, StyledList$1 as StyledList, Table, Tabs, TagSet$1 as TagSet, Template$1 as Template, TemplateAboveHeader, TemplateAppContainer, TemplateBreakout$1 as TemplateBreakout, TemplateContent$1 as TemplateContent, TemplateContentPrimary$1 as TemplateContentPrimary, TemplateContentSidebar$1 as TemplateContentSidebar, TemplateContentTop, TemplateFooter, TemplateHeader, Text, TextInput, Toggle$2 as Toggle, Tooltip$1 as Tooltip, VideoPlayer$1 as VideoPlayer, useCarouselStyles, useModal, useNYPLBreakpoints, useNYPLTheme, useWindowSize };
 //# sourceMappingURL=design-system-react-components.esm.js.map