@nypl/design-system-react-components 1.2.1 → 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,14 +569,13 @@ 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
   }, title) : null, _path$n || (_path$n = /*#__PURE__*/createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M12 0C5.376 0 0 5.376 0 12s5.376 12 12 12 12-5.376 12-12S18.624 0 12 0Zm1.2 13.2h-2.4V6h2.4v7.2ZM10.8 18h2.4v-2.4h-2.4V18Z"
+    d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm1.003 11h-2V7h2v6Zm-2 3.998h2v-2h-2v2Z"
   })));
 };
 
@@ -613,16 +589,15 @@ var SvgErrorOutline = function SvgErrorOutline(_ref) {
     titleId = _ref.titleId,
     props = _objectWithoutProperties$o(_ref, _excluded$o);
   return /*#__PURE__*/createElement("svg", _extends$p({
-    viewBox: "0 0 24 25",
+    viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/createElement("title", {
     id: titleId
   }, title) : null, _path$o || (_path$o = /*#__PURE__*/createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M11.988.912C5.364.912 0 6.288 0 12.912s5.364 12 11.988 12c6.636 0 12.012-5.376 12.012-12s-5.376-12-12.012-12Zm1.212 13.2v-7.2h-2.4v7.2h2.4Zm0 4.8v-2.4h-2.4v2.4h2.4Zm-10.8-6c0 5.304 4.296 9.6 9.6 9.6 5.304 0 9.6-4.296 9.6-9.6 0-5.304-4.296-9.6-9.6-9.6a9.597 9.597 0 0 0-9.6 9.6Z"
+    d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2Zm1.013 5h-2v6h2V7Zm0 7.998h-2v2h2v-2Zm-9.002-2.996c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8-8 3.58-8 8Z"
   })));
 };
 
@@ -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)));
   });
@@ -2444,8 +2389,7 @@ var Image = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref) {
     size: size
   }, caption || credit ? {} : rest), imageComponent) : imageComponent;
   return React__default.createElement(Box, {
-    ref: finalRefs,
-    "data-testid": "test"
+    ref: finalRefs
   }, caption || credit ? React__default.createElement(Box, {
     as: "figure",
     __css: _extends({}, styles.figure, additionalFigureStyles)
@@ -3074,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
@@ -3133,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.
@@ -3151,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);
@@ -3218,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,
@@ -3349,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",
@@ -3380,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,
@@ -3443,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,
@@ -3463,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, {
@@ -3479,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"];
@@ -3547,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
     });
@@ -3601,7 +3544,7 @@ var Label = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref) {
   }, rest), children, isRequired && React__default.createElement("span", null, requiredLabelText ? " (" + requiredLabelText + ")" : " (Required)"));
 }));
 
-var _excluded$19 = ["className", "defaultValue", "helperText", "id", "invalidText", "isDisabled", "isInvalid", "isRequired", "labelText", "max", "maxLength", "min", "name", "onChange", "onClick", "onFocus", "placeholder", "showHelperInvalidText", "showLabel", "showRequiredLabel", "requiredLabelText", "step", "textInputType", "type", "value"];
+var _excluded$19 = ["className", "defaultValue", "helperText", "id", "invalidText", "isClearable", "isDisabled", "isInvalid", "isRequired", "labelText", "max", "maxLength", "min", "name", "onChange", "onClick", "onFocus", "placeholder", "showHelperInvalidText", "showLabel", "showRequiredLabel", "requiredLabelText", "step", "textInputType", "type", "value"];
 // Only used internally.
 var TextInputFormats = {
   email: "jdoe@domain.com",
@@ -3623,6 +3566,8 @@ var TextInput = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, re
     helperText = props.helperText,
     id = props.id,
     invalidText = props.invalidText,
+    _props$isClearable = props.isClearable,
+    isClearable = _props$isClearable === void 0 ? false : _props$isClearable,
     _props$isDisabled = props.isDisabled,
     isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
     _props$isInvalid = props.isInvalid,
@@ -3653,12 +3598,24 @@ var TextInput = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, re
     type = _props$type === void 0 ? "text" : _props$type,
     value = props.value,
     rest = _objectWithoutPropertiesLoose(props, _excluded$19);
+  var _useState = useState(value || ""),
+    finalValue = _useState[0],
+    setFinalValue = _useState[1];
+  var closedRef = useRef();
+  var mergedRefs = useMergeRefs(closedRef, ref);
+  // If a ref is not passed, then merging refs won't work.
+  var finalRef = ref ? mergedRefs : closedRef;
   var styles = useMultiStyleConfig("TextInput", {
+    showLabel: showLabel,
     variant: textInputType
   });
   var isTextArea = type === "textarea";
   var isHidden = type === "hidden";
   var finalInvalidText = invalidText ? invalidText : "There is an error related to this field.";
+  var internalOnChange = function internalOnChange(e) {
+    setFinalValue(e.target.value);
+    onChange && onChange(e);
+  };
   var footnote = isInvalid ? finalInvalidText : helperText;
   var ariaAttributes = getAriaAttrs({
     footnote: footnote,
@@ -3667,9 +3624,20 @@ var TextInput = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, re
     name: "TextInput",
     showLabel: showLabel
   });
+  var onClearClick = function onClearClick() {
+    setFinalValue("");
+    // Set focus back to the input element.
+    finalRef.current.focus();
+  };
   var finalIsInvalid = isInvalid;
   var fieldOutput;
+  var clearButtonOutput;
   var options;
+  useEffect(function () {
+    if (value && value !== finalValue) {
+      setFinalValue(value);
+    }
+  }, [finalValue, value]);
   if (!id) {
     console.warn("NYPL Reservoir TextInput: This component's required `id` prop was not passed.");
   }
@@ -3687,8 +3655,8 @@ var TextInput = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, re
     id: id,
     "aria-hidden": isHidden,
     name: name,
-    onChange: onChange,
-    ref: ref
+    onChange: internalOnChange,
+    ref: finalRef
   } : _extends({
     "aria-required": isRequired,
     defaultValue: defaultValue,
@@ -3700,11 +3668,11 @@ var TextInput = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, re
     maxLength: maxLength,
     min: min,
     name: name,
-    onChange: onChange,
+    onChange: internalOnChange,
     onClick: onClick,
     onFocus: onFocus,
     placeholder: placeholder,
-    ref: ref,
+    ref: finalRef,
     // The `step` attribute is useful for the number type.
     step: type === "number" ? step : null
   }, ariaAttributes, rest);
@@ -3713,12 +3681,27 @@ var TextInput = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, re
   if (!isTextArea) {
     options = _extends({
       type: type,
-      value: value
+      value: finalValue
     }, options);
     fieldOutput = React__default.createElement(Input, Object.assign({}, options, {
       __css: styles.input
     }));
+    if (isClearable && !isHidden) {
+      clearButtonOutput = React__default.createElement(Button, {
+        buttonType: "text",
+        id: id + "-clear-btn",
+        onClick: onClearClick,
+        sx: styles.clearButton
+      }, React__default.createElement(Icon, {
+        color: "ui.black",
+        name: "close",
+        size: "medium"
+      }), React__default.createElement("span", null, "Clear ", labelText));
+    }
   } else {
+    if (isClearable) {
+      console.warn("NYPL Reservoir TextInput: The `isClearable` prop cannot be used with the `textarea` type.");
+    }
     fieldOutput = React__default.createElement(Textarea, Object.assign({}, options, {
       __css: styles.textarea
     }), value);
@@ -3736,7 +3719,7 @@ var TextInput = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, re
     id: id + "-label",
     isRequired: showRequiredLabel && isRequired,
     requiredLabelText: requiredLabelText
-  }, labelText), fieldOutput);
+  }, labelText), fieldOutput, !isHidden && finalValue.length > 0 && clearButtonOutput);
 }));
 
 var _excluded$1a = ["dsRef", "helperText", "id", "invalidText", "isDisabled", "isInvalid", "isRequired", "labelText", "name", "onChange", "onClick", "showLabel", "showHelperInvalidText", "showRequiredLabel", "value"],
@@ -4227,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
@@ -4237,7 +4220,7 @@ var global = {
  */
 var breakpoints = /*#__PURE__*/createBreakpoints({
   sm: "20em",
-  md: "38em",
+  md: "37.5em",
   lg: "60em",
   xl: "80em",
   "2xl": "96em"
@@ -4314,6 +4297,7 @@ var colors = {
     },
     // Semantic colors
     bg: {
+      page: white,
       "default": grayxLightCool,
       hover: grayLightCool,
       active: grayMedium
@@ -4324,7 +4308,11 @@ var colors = {
     },
     typography: {
       heading: black,
-      body: black
+      body: black,
+      inverse: {
+        heading: white,
+        body: white
+      }
     },
     // Grayscale
     gray: {
@@ -4385,7 +4373,11 @@ var colors = {
       },
       typography: {
         heading: grayLightCool,
-        body: grayMedium
+        body: grayMedium,
+        inverse: {
+          heading: grayxxDark,
+          body: grayxxDark
+        }
       }
     }
   },
@@ -4685,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",
@@ -5573,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;
@@ -6904,10 +6946,17 @@ var tertiary = {
     color: "ui.white",
     display: "flex",
     flexFlow: "column nowrap",
-    padding: "inset.default",
+    px: "inset.default",
+    py: {
+      base: "inset.default",
+      xl: "inset.wide"
+    },
     p: {
       marginBottom: "0",
-      marginTop: "s"
+      marginTop: {
+        base: "xxs",
+        xl: "xs"
+      }
     }
   }),
   heading: {
@@ -8182,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"
 };
@@ -8613,12 +8686,28 @@ var input = {
 };
 var TextInput$1 = {
   parts: ["input", "textarea"],
-  baseStyle: {
-    input: input,
-    textarea: /*#__PURE__*/_extends({}, input, {
-      lineheight: "1.5",
-      minHeight: "xxl"
-    })
+  baseStyle: function baseStyle(_ref) {
+    var showLabel = _ref.showLabel;
+    return {
+      position: "relative",
+      input: input,
+      textarea: _extends({}, input, {
+        lineheight: "1.5",
+        minHeight: "xxl"
+      }),
+      clearButton: {
+        position: "absolute",
+        // When `showLabel` is false, the input field is at the top
+        // which means the clear button should float higher.
+        top: showLabel ? "32px" : "0",
+        px: "xs",
+        right: "0",
+        // Don't visually show the text. This also helps
+        // use the "text" `Button` type.
+        span: screenreaderOnly(),
+        zIndex: "9999"
+      }
+    };
   },
   variants: {
     searchBar: {
@@ -8791,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
@@ -8847,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,
@@ -8882,6 +8963,7 @@ var theme = /*#__PURE__*/extendTheme( /*#__PURE__*/_extends({
     CustomSlider: CustomSlider,
     StatusBadge: StatusBadge,
     StructuredContent: StructuredContent,
+    StyledList: StyledList,
     Tabs: CustomTabs,
     CustomTable: CustomTable
   }, TagSetStyles, TemplateStyles, {
@@ -8979,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.
@@ -9003,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,
@@ -9025,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"];
@@ -9039,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
@@ -9068,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
@@ -9096,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
@@ -9122,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
@@ -9148,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
@@ -9179,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
@@ -9203,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
@@ -9227,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
@@ -9286,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
@@ -9350,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
@@ -9491,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
@@ -9516,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
@@ -9538,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
@@ -9559,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
@@ -9583,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
@@ -9607,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
@@ -9631,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
@@ -9672,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
@@ -9755,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
@@ -9791,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
@@ -9822,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
@@ -9847,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
@@ -9926,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
@@ -10005,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
@@ -10061,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
@@ -10140,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
@@ -10196,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
@@ -10277,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
@@ -10299,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
@@ -10320,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
@@ -10358,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
@@ -10414,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
@@ -10452,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
@@ -10487,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
@@ -10520,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
@@ -10549,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
@@ -10579,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
@@ -10614,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
@@ -10644,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
@@ -10685,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
@@ -10714,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
@@ -10748,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
@@ -10781,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
@@ -10820,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
@@ -10842,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
@@ -10864,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
@@ -11049,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
@@ -13799,6 +13840,7 @@ var SearchBar$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props,
   // Render the `TextInput` component.
   var textInputNative = textInputProps && React__default.createElement(TextInput, Object.assign({
     id: (textInputProps == null ? void 0 : textInputProps.id) || "searchbar-textinput-" + id,
+    isClearable: textInputProps == null ? void 0 : textInputProps.isClearable,
     labelText: textInputProps == null ? void 0 : textInputProps.labelText,
     name: textInputProps == null ? void 0 : textInputProps.name,
     onChange: textInputProps == null ? void 0 : textInputProps.onChange,
@@ -14281,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
@@ -14530,12 +14613,16 @@ var Tooltip$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, re
   }, children) : children;
   var styles = useMultiStyleConfig("Tooltip", {});
   return React__default.createElement(Tooltip$2, Object.assign({
-    hasArrow: true,
     "aria-label": typeof content !== "string" ? "Tooltip" : undefined,
-    label: content,
+    closeDelay: 750,
+    closeOnClick: true,
+    closeOnEsc: true,
+    closeOnMouseDown: true,
+    hasArrow: true,
     isDisabled: isDisabled,
-    placement: "top",
+    label: content,
     openDelay: 500,
+    placement: "top",
     ref: ref,
     __css: styles
   }, rest), newChildren);
@@ -15023,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,
@@ -15102,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