@nypl/design-system-react-components 1.2.1 → 1.3.0-rc

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

@@ -56,7 +56,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__*/React.createElement("title", {
     id: titleId
@@ -91,7 +90,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__*/React.createElement("title", {
     id: titleId
@@ -125,7 +123,6 @@ var SvgActionCheckCircle = function SvgActionCheckCircle(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$3({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -148,7 +145,6 @@ var SvgActionCheckCircleFilled = function SvgActionCheckCircleFilled(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$4({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -169,7 +165,6 @@ var SvgActionExit = function SvgActionExit(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$5({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -192,7 +187,6 @@ var SvgActionHelpDefault = function SvgActionHelpDefault(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$6({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -215,7 +209,6 @@ var SvgActionHelpOutline = function SvgActionHelpOutline(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$7({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -238,7 +231,6 @@ var SvgActionLaunch = function SvgActionLaunch(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$8({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -261,7 +253,6 @@ var SvgActionPower = function SvgActionPower(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$9({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -284,7 +275,6 @@ var SvgActionRegistration = function SvgActionRegistration(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$a({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -305,7 +295,6 @@ var SvgActionSettings = function SvgActionSettings(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$b({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -328,7 +317,6 @@ var SvgAlertNotificationImportant = function SvgAlertNotificationImportant(_ref)
   return /*#__PURE__*/React.createElement("svg", _extends$c({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -351,7 +339,6 @@ var SvgAlertWarningFilled = function SvgAlertWarningFilled(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$d({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -374,7 +361,6 @@ var SvgAlertWarningOutline = function SvgAlertWarningOutline(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$e({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -397,7 +383,6 @@ var SvgArrow = function SvgArrow(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$f({
     viewBox: "0 0 24 14",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -420,7 +405,6 @@ var SvgBuilding = function SvgBuilding(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$g({
     viewBox: "0 0 26 26",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -443,7 +427,6 @@ var SvgCheck = function SvgCheck(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$h({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -464,7 +447,6 @@ var SvgClock = function SvgClock(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$i({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -487,7 +469,6 @@ var SvgClose = function SvgClose(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$j({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -508,7 +489,6 @@ var SvgDecorativeEnvelope = function SvgDecorativeEnvelope(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$k({
     viewBox: "0 0 68 68",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -531,7 +511,6 @@ var SvgDecorativeLibraryCard = function SvgDecorativeLibraryCard(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$l({
     viewBox: "0 0 68 68",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -554,7 +533,6 @@ var SvgDecorativeShoppingBag = function SvgDecorativeShoppingBag(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$m({
     viewBox: "0 0 68 68",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -575,7 +553,6 @@ var SvgDownload = function SvgDownload(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$n({
     viewBox: "0 0 14 18",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -598,14 +575,13 @@ var SvgErrorFilled = function SvgErrorFilled(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$o({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, _path$n || (_path$n = /*#__PURE__*/React.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"
   })));
 };
 
@@ -619,16 +595,15 @@ var SvgErrorOutline = function SvgErrorOutline(_ref) {
     titleId = _ref.titleId,
     props = _objectWithoutProperties$o(_ref, _excluded$o);
   return /*#__PURE__*/React.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__*/React.createElement("title", {
     id: titleId
   }, title) : null, _path$o || (_path$o = /*#__PURE__*/React.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"
   })));
 };
 
@@ -644,7 +619,6 @@ var SvgFileTypeAudio = function SvgFileTypeAudio(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$q({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -673,7 +647,6 @@ var SvgFileTypeDoc = function SvgFileTypeDoc(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$r({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -702,7 +675,6 @@ var SvgFileTypeGenericDoc = function SvgFileTypeGenericDoc(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$s({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -729,7 +701,6 @@ var SvgFileTypeImage = function SvgFileTypeImage(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$t({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -766,7 +737,6 @@ var SvgFileTypePdf = function SvgFileTypePdf(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$u({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -795,7 +765,6 @@ var SvgFileTypeSpreadsheet = function SvgFileTypeSpreadsheet(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$v({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -824,7 +793,6 @@ var SvgFileTypeVideo = function SvgFileTypeVideo(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$w({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -851,7 +819,6 @@ var SvgHeadset = function SvgHeadset(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$x({
     viewBox: "0 0 18 19",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -872,7 +839,6 @@ var SvgLegacyAccountFilled = function SvgLegacyAccountFilled(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$y({
     viewBox: "0 0 32 33",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -893,7 +859,6 @@ var SvgLegacyAccountUnfilled = function SvgLegacyAccountUnfilled(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$z({
     viewBox: "0 0 33 33",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -914,7 +879,6 @@ var SvgLegacySocialFacebook = function SvgLegacySocialFacebook(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$A({
     viewBox: "0 0 32 32",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -935,7 +899,6 @@ var SvgLegacySocialInstagram = function SvgLegacySocialInstagram(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$B({
     viewBox: "0 0 32 32",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -956,7 +919,6 @@ var SvgLegacySocialTwitter = function SvgLegacySocialTwitter(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$C({
     viewBox: "0 0 32 32",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -977,7 +939,6 @@ var SvgLegacySocialYoutube = function SvgLegacySocialYoutube(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$D({
     viewBox: "0 0 32 32",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -998,7 +959,6 @@ var SvgLocator = function SvgLocator(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$E({
     viewBox: "0 0 32 32",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -1023,7 +983,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__*/React.createElement("title", {
     id: titleId
@@ -1046,7 +1005,6 @@ var SvgPlus = function SvgPlus(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$G({
     viewBox: "0 0 23 23",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -1077,7 +1035,6 @@ var SvgSearch = function SvgSearch(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$H({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -1100,7 +1057,6 @@ var SvgSocialFacebook = function SvgSocialFacebook(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$I({
     viewBox: "0 0 36 36",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -1123,7 +1079,6 @@ var SvgSocialInstagram = function SvgSocialInstagram(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$J({
     viewBox: "0 0 37 37",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -1150,7 +1105,6 @@ var SvgSocialTumblr = function SvgSocialTumblr(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$K({
     viewBox: "0 0 36 36",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -1175,7 +1129,6 @@ var SvgSocialTwitter = function SvgSocialTwitter(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$L({
     viewBox: "0 0 36 36",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -1198,7 +1151,6 @@ var SvgSocialYoutube = function SvgSocialYoutube(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$M({
     viewBox: "0 0 36 36",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -1223,7 +1175,6 @@ var SvgSpeakerNotes = function SvgSpeakerNotes(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$N({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -1247,7 +1198,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__*/React.createElement("title", {
     id: titleId
@@ -1273,7 +1223,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__*/React.createElement("title", {
     id: titleId
@@ -1304,7 +1253,6 @@ var SvgUtilityHamburger = function SvgUtilityHamburger(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$Q({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -1591,9 +1539,6 @@ var Button = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (
   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) {
@@ -2323,9 +2268,9 @@ var ButtonGroup = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(funct
     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;
       }
@@ -2333,7 +2278,7 @@ var ButtonGroup = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(funct
     var disabledProps = isDisabled ? {
       isDisabled: isDisabled
     } : {};
-    newChildren.push(React__default.cloneElement(child, _extends({
+    child && newChildren.push(React__default.cloneElement(child, _extends({
       key: key
     }, disabledProps)));
   });
@@ -2450,8 +2395,7 @@ var Image = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (p
     size: size
   }, caption || credit ? {} : rest), imageComponent) : imageComponent;
   return React__default.createElement(react.Box, {
-    ref: finalRefs,
-    "data-testid": "test"
+    ref: finalRefs
   }, caption || credit ? React__default.createElement(react.Box, {
     as: "figure",
     __css: _extends({}, styles.figure, additionalFigureStyles)
@@ -3080,36 +3024,6 @@ var CheckboxGroup = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(fun
   }));
 }));
 
-var _excluded$15 = ["children", "columns", "className", "gap", "id"];
-var SimpleGrid = /*#__PURE__*/react.chakra( /*#__PURE__*/React.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(react.SimpleGrid, 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
@@ -3139,7 +3053,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.
@@ -3157,7 +3071,7 @@ var Table = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (p
     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);
@@ -3224,113 +3138,37 @@ var Table = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (p
   }, 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 = react.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 React.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 React.createElement(Icon, {
       color: textColor,
@@ -3355,29 +3193,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 = [[React.createElement("span", {
     key: "colorUiWhite",
     style: {
-      color: "white",
       padding: 0
     }
-  }, "ui.white"), dataWhiteColor[0] + ":1", React.createElement(React.Fragment, null, dataWhiteColor[1], whiteSmallTextSuccess), React.createElement(React.Fragment, null, dataWhiteColor[2], whiteLargeTextSuccess)], [React.createElement("span", {
+  }, React.createElement(SmallColorSwatch, {
+    backgroundColor: "white",
+    border: true
+  }), "ui.white"), dataWhiteColor[0] + ":1", React.createElement(React.Fragment, null, dataWhiteColor[1], whiteSmallTextSuccess), React.createElement(React.Fragment, null, dataWhiteColor[2], whiteLargeTextSuccess)], [React.createElement("span", {
     key: "colorUiBlack",
     style: {
-      color: "black",
       padding: 0
     }
-  }, "ui.black"), dataBlackColor[0] + ":1", React.createElement(React.Fragment, null, dataBlackColor[1], blackSmallTextSuccess), React.createElement(React.Fragment, null, dataBlackColor[2], blackLargeTextSuccess)]];
+  }, React.createElement(SmallColorSwatch, {
+    backgroundColor: "black",
+    darkBorder: true
+  }), "ui.black"), dataBlackColor[0] + ":1", React.createElement(React.Fragment, null, dataBlackColor[1], blackSmallTextSuccess), React.createElement(React.Fragment, null, dataBlackColor[2], blackLargeTextSuccess)]];
   var cellStyles = {
     borderColor: textColor === "ui.white" ? "white !important" : "black !important",
     fontWeight: "medium",
@@ -3386,56 +3236,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([React.createElement("span", {
+      key: "colorBrandPrimaryPage",
+      style: {
+        padding: 0
+      }
+    }, React.createElement(SmallColorSwatch, {
+      backgroundColor: "var(--nypl-colors-brand-primary)"
+    }), "brand.primary"), dataBrandPrimaryColor[0] + ":1", React.createElement(React.Fragment, null, dataBrandPrimaryColor[1], brandPrimarySmallTextSuccess), React.createElement(React.Fragment, null, dataBrandPrimaryColor[2], brandPrimaryLargeTextSuccess)]);
+  }
+  if (dataBrandSecondaryColor && dataBrandSecondaryColor.length > 0) {
+    tableData.push([React.createElement("span", {
+      key: "colorBrandSecondaryPage",
+      style: {
+        padding: 0
+      }
+    }, React.createElement(SmallColorSwatch, {
+      backgroundColor: "var(--nypl-colors-brand-secondary)"
+    }), "brand.secondary"), dataBrandSecondaryColor[0] + ":1", React.createElement(React.Fragment, null, dataBrandSecondaryColor[1], brandSecondarySmallTextSuccess), React.createElement(React.Fragment, null, dataBrandSecondaryColor[2], brandSecondaryLargeTextSuccess)]);
+  }
   if (dataBgPageColor && dataBgPageColor.length > 0) {
     tableData.push([React.createElement("span", {
       key: "colorBgPage",
       style: {
-        color: grayxxxxDark,
         padding: 0
       }
-    }, "bg page"), dataBgPageColor[0] + ":1", React.createElement(React.Fragment, null, dataBgPageColor[1], bgPageSmallTextSuccess), React.createElement(React.Fragment, null, dataBgPageColor[2], bgPageLargeTextSuccess)]);
+    }, React.createElement(SmallColorSwatch, {
+      backgroundColor: "var(--nypl-colors-ui-bg-page)",
+      border: true
+    }), "ui.bg.page"), dataBgPageColor[0] + ":1", React.createElement(React.Fragment, null, dataBgPageColor[1], bgPageSmallTextSuccess), React.createElement(React.Fragment, null, dataBgPageColor[2], bgPageLargeTextSuccess)]);
   }
   if (dataBgDefaultColor && dataBgDefaultColor.length > 0) {
     tableData.push([React.createElement("span", {
       key: "colorBgDefault",
       style: {
-        color: grayxxxDark,
         padding: 0
       }
-    }, "bg default"), dataBgDefaultColor[0] + ":1", React.createElement(React.Fragment, null, dataBgDefaultColor[1], bgDefaultSmallTextSuccess), React.createElement(React.Fragment, null, dataBgDefaultColor[2], bgDefaultLargeTextSuccess)]);
+    }, React.createElement(SmallColorSwatch, {
+      backgroundColor: "var(--nypl-colors-ui-bg-default)"
+    }), "ui.bg.default"), dataBgDefaultColor[0] + ":1", React.createElement(React.Fragment, null, dataBgDefaultColor[1], bgDefaultSmallTextSuccess), React.createElement(React.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([React.createElement("span", {
-      key: "colorHeading",
+      key: "colorDarkBgPage",
       style: {
-        color: grayLightCool,
         padding: 0
       }
-    }, "heading"), dataHeadingColor[0] + ":1", React.createElement(React.Fragment, null, dataHeadingColor[1], headingSmallTextSuccess), React.createElement(React.Fragment, null, dataHeadingColor[2], headingLargeTextSuccess)]);
+    }, React.createElement(SmallColorSwatch, {
+      backgroundColor: "var(--nypl-colors-dark-ui-bg-page)"
+    }), "dark.ui.bg.page"), dataDarkBgPageColor[0] + ":1", React.createElement(React.Fragment, null, dataDarkBgPageColor[1], darkBgPageSmallTextSuccess), React.createElement(React.Fragment, null, dataDarkBgPageColor[2], darkBgPageLargeTextSuccess)]);
   }
-  if (dataBodyColor && dataBodyColor.length > 0) {
+  if (dataDarkBgDefaultColor && dataDarkBgDefaultColor.length > 0) {
     tableData.push([React.createElement("span", {
-      key: "colorText",
+      key: "colorDarkBgDefault",
       style: {
-        color: grayMedium,
         padding: 0
       }
-    }, "body"), dataBodyColor[0] + ":1", React.createElement(React.Fragment, null, dataBodyColor[1], textSmallTextSuccess), React.createElement(React.Fragment, null, dataBodyColor[2], textLargeTextSuccess)]);
+    }, React.createElement(SmallColorSwatch, {
+      backgroundColor: "var(--nypl-colors-dark-ui-bg-default)"
+    }), "dark.ui.bg.default"), dataDarkBgDefaultColor[0] + ":1", React.createElement(React.Fragment, null, dataDarkBgDefaultColor[1], darkBgDefaultSmallTextSuccess), React.createElement(React.Fragment, null, dataDarkBgDefaultColor[2], darkBgDefaultLargeTextSuccess)]);
+  }
+  if (dataDarkHeadingColor && dataDarkHeadingColor.length > 0) {
+    tableData.push([React.createElement("span", {
+      key: "colorDarkHeading",
+      style: {
+        padding: 0
+      }
+    }, React.createElement(SmallColorSwatch, {
+      backgroundColor: "var(--nypl-colors-ui-typography-heading)"
+    }), "ui.typography.heading"), dataDarkHeadingColor[0] + ":1", React.createElement(React.Fragment, null, dataDarkHeadingColor[1], darkHeadingSmallTextSuccess), React.createElement(React.Fragment, null, dataDarkHeadingColor[2], darkHeadingLargeTextSuccess)]);
+  }
+  if (dataDarkBodyColor && dataDarkBodyColor.length > 0) {
+    tableData.push([React.createElement("span", {
+      key: "colorDarkText",
+      style: {
+        padding: 0
+      }
+    }, React.createElement(SmallColorSwatch, {
+      backgroundColor: "var(--nypl-colors-ui-typography-body)"
+    }), "ui.typography.body"), dataDarkBodyColor[0] + ":1", React.createElement(React.Fragment, null, dataDarkBodyColor[1], textSmallTextSuccess), React.createElement(React.Fragment, null, dataDarkBodyColor[2], textLargeTextSuccess)]);
   }
   return React.createElement(Table, {
     columnHeaders: columnHeaders,
@@ -3449,19 +3352,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 React.createElement(react.Box, {
     bg: backgroundColor,
     color: textColor,
@@ -3469,9 +3376,11 @@ var ColorCard = function ColorCard(props) {
     paddingBottom: "m",
     paddingTop: "s",
     border: border
-  }, React.createElement(SimpleGrid, {
-    columns: 2
-  }, React.createElement(react.Box, null, React.createElement(Heading, {
+  }, React.createElement(react.HStack, {
+    alignItems: "top"
+  }, React.createElement(react.Box, {
+    width: "80%"
+  }, React.createElement(Heading, {
     noSpace: true,
     size: "tertiary"
   }, backgroundColor), React.createElement(Text, {
@@ -3485,14 +3394,48 @@ var ColorCard = function ColorCard(props) {
   }, "Source: ", colorSource)), React.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__*/react.chakra( /*#__PURE__*/React.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(react.SimpleGrid, 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"];
@@ -3553,7 +3496,7 @@ var Form = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (pr
   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
     });
@@ -3607,7 +3550,7 @@ var Label = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (p
   }, 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",
@@ -3629,6 +3572,8 @@ var TextInput = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
     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,
@@ -3659,12 +3604,24 @@ var TextInput = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
     type = _props$type === void 0 ? "text" : _props$type,
     value = props.value,
     rest = _objectWithoutPropertiesLoose(props, _excluded$19);
+  var _useState = React.useState(value || ""),
+    finalValue = _useState[0],
+    setFinalValue = _useState[1];
+  var closedRef = React.useRef();
+  var mergedRefs = react.useMergeRefs(closedRef, ref);
+  // If a ref is not passed, then merging refs won't work.
+  var finalRef = ref ? mergedRefs : closedRef;
   var styles = react.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,
@@ -3673,9 +3630,20 @@ var TextInput = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
     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;
+  React.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.");
   }
@@ -3693,8 +3661,8 @@ var TextInput = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
     id: id,
     "aria-hidden": isHidden,
     name: name,
-    onChange: onChange,
-    ref: ref
+    onChange: internalOnChange,
+    ref: finalRef
   } : _extends({
     "aria-required": isRequired,
     defaultValue: defaultValue,
@@ -3706,11 +3674,11 @@ var TextInput = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
     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);
@@ -3719,12 +3687,27 @@ var TextInput = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
   if (!isTextArea) {
     options = _extends({
       type: type,
-      value: value
+      value: finalValue
     }, options);
     fieldOutput = React__default.createElement(react.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(react.Textarea, Object.assign({}, options, {
       __css: styles.textarea
     }), value);
@@ -3742,7 +3725,7 @@ var TextInput = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
     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"],
@@ -4233,7 +4216,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
@@ -4243,7 +4226,7 @@ var global = {
  */
 var breakpoints = /*#__PURE__*/themeTools.createBreakpoints({
   sm: "20em",
-  md: "38em",
+  md: "37.5em",
   lg: "60em",
   xl: "80em",
   "2xl": "96em"
@@ -4320,6 +4303,7 @@ var colors = {
     },
     // Semantic colors
     bg: {
+      page: white,
       "default": grayxLightCool,
       hover: grayLightCool,
       active: grayMedium
@@ -4330,7 +4314,11 @@ var colors = {
     },
     typography: {
       heading: black,
-      body: black
+      body: black,
+      inverse: {
+        heading: white,
+        body: white
+      }
     },
     // Grayscale
     gray: {
@@ -4391,7 +4379,11 @@ var colors = {
       },
       typography: {
         heading: grayLightCool,
-        body: grayMedium
+        body: grayMedium,
+        inverse: {
+          heading: grayxxDark,
+          body: grayxxDark
+        }
       }
     }
   },
@@ -4691,6 +4683,15 @@ var AlphabetFilter$1 = {
   }
 };
 
+var AudioPlayer$1 = {
+  baseStyle: {
+    invalid: {
+      backgroundColor: "ui.bg.default",
+      padding: "s"
+    }
+  }
+};
+
 // Variant styling
 var blogs = {
   bg: "section.blogs.secondary",
@@ -5579,6 +5580,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;
@@ -6910,10 +6952,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: {
@@ -8188,6 +8237,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"
 };
@@ -8619,12 +8692,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: {
@@ -8797,15 +8886,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
@@ -8853,6 +8933,7 @@ var theme = /*#__PURE__*/react.extendTheme( /*#__PURE__*/_extends({
     CustomImageWrapper: CustomImageWrapper,
     CustomSelect: Select,
     DatePicker: DatePicker$1,
+    FeedbackBox: FeedbackBox,
     Fieldset: Fieldset$1,
     Footer: Footer,
     Header: Header,
@@ -8888,6 +8969,7 @@ var theme = /*#__PURE__*/react.extendTheme( /*#__PURE__*/_extends({
     CustomSlider: CustomSlider,
     StatusBadge: StatusBadge,
     StructuredContent: StructuredContent,
+    StyledList: StyledList,
     Tabs: CustomTabs,
     CustomTable: CustomTable
   }, TagSetStyles, TemplateStyles, {
@@ -8985,18 +9067,6 @@ var List$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (
     }
     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.
@@ -9009,7 +9079,7 @@ var List$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (
     });
   };
   if (type === "ol" || type === "ul") {
-    checkListChildrenError(type);
+    checkListChildrenError(children, type);
     listElement = React__default.createElement(react.Box, Object.assign({
       as: type,
       id: id,
@@ -9031,6 +9101,24 @@ var List$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (
   }
   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"];
@@ -9045,7 +9133,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__*/React.createElement("title", {
     id: titleId
@@ -9074,7 +9161,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__*/React.createElement("title", {
     id: titleId
@@ -9102,7 +9188,6 @@ var SvgLogoBplBlack = function SvgLogoBplBlack(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$T({
     viewBox: "0 0 328 120",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -9128,7 +9213,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__*/React.createElement("title", {
     id: titleId
@@ -9154,7 +9238,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__*/React.createElement("title", {
     id: titleId
@@ -9185,7 +9268,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__*/React.createElement("title", {
     id: titleId
@@ -9209,7 +9291,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__*/React.createElement("title", {
     id: titleId
@@ -9233,7 +9314,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__*/React.createElement("title", {
     id: titleId
@@ -9292,7 +9372,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__*/React.createElement("title", {
     id: titleId
@@ -9356,7 +9435,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__*/React.createElement("title", {
     id: titleId
@@ -9497,7 +9575,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__*/React.createElement("title", {
     id: titleId
@@ -9522,7 +9599,6 @@ var SvgLogoLpaBlack = function SvgLogoLpaBlack(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$10({
     viewBox: "0 0 186 74",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -9544,7 +9620,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__*/React.createElement("title", {
     id: titleId
@@ -9565,7 +9640,6 @@ var SvgLogoMlnBlack = function SvgLogoMlnBlack(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$12({
     viewBox: "0 0 300 71",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -9589,7 +9663,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__*/React.createElement("title", {
     id: titleId
@@ -9613,7 +9686,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__*/React.createElement("title", {
     id: titleId
@@ -9637,7 +9709,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__*/React.createElement("title", {
     id: titleId
@@ -9678,7 +9749,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__*/React.createElement("title", {
     id: titleId
@@ -9761,7 +9831,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__*/React.createElement("title", {
     id: titleId
@@ -9797,7 +9866,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__*/React.createElement("title", {
     id: titleId
@@ -9828,7 +9896,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__*/React.createElement("title", {
     id: titleId
@@ -9853,7 +9920,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__*/React.createElement("title", {
     id: titleId
@@ -9932,7 +9998,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__*/React.createElement("title", {
     id: titleId
@@ -10011,7 +10076,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__*/React.createElement("title", {
     id: titleId
@@ -10067,7 +10131,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__*/React.createElement("title", {
     id: titleId
@@ -10146,7 +10209,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__*/React.createElement("title", {
     id: titleId
@@ -10202,7 +10264,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__*/React.createElement("title", {
     id: titleId
@@ -10283,7 +10344,6 @@ var SvgLogoQplAltBlack = function SvgLogoQplAltBlack(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$1g({
     viewBox: "0 0 250 134",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -10305,7 +10365,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__*/React.createElement("title", {
     id: titleId
@@ -10326,7 +10385,6 @@ var SvgLogoQplBlack = function SvgLogoQplBlack(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$1i({
     viewBox: "0 0 320 43",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -10364,7 +10422,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__*/React.createElement("title", {
     id: titleId
@@ -10420,7 +10477,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__*/React.createElement("title", {
     id: titleId
@@ -10458,7 +10514,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__*/React.createElement("title", {
     id: titleId
@@ -10493,7 +10548,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__*/React.createElement("title", {
     id: titleId
@@ -10526,7 +10580,6 @@ var SvgLogoSchomburgBlack = function SvgLogoSchomburgBlack(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$1n({
     viewBox: "0 0 185 79",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -10555,7 +10608,6 @@ var SvgLogoSchomburgCircleBlack = function SvgLogoSchomburgCircleBlack(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$1o({
     viewBox: "0 0 67 67",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -10585,7 +10637,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__*/React.createElement("title", {
     id: titleId
@@ -10620,7 +10671,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__*/React.createElement("title", {
     id: titleId
@@ -10650,7 +10700,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__*/React.createElement("title", {
     id: titleId
@@ -10691,7 +10740,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__*/React.createElement("title", {
     id: titleId
@@ -10720,7 +10768,6 @@ var SvgLogoSimplyeBlack = function SvgLogoSimplyeBlack(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$1t({
     viewBox: "0 0 512 148",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -10754,7 +10801,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__*/React.createElement("title", {
     id: titleId
@@ -10787,7 +10833,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__*/React.createElement("title", {
     id: titleId
@@ -10826,7 +10871,6 @@ var SvgLogoSnflBlack = function SvgLogoSnflBlack(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$1w({
     viewBox: "0 0 84 111",
     xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
@@ -10848,7 +10892,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__*/React.createElement("title", {
     id: titleId
@@ -10870,7 +10913,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__*/React.createElement("title", {
     id: titleId
@@ -11055,7 +11097,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__*/React.createElement("title", {
     id: titleId
@@ -13805,6 +13846,7 @@ var SearchBar$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(funct
   // 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,
@@ -14287,6 +14329,47 @@ var StructuredContent$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardR
   }), 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__*/react.chakra( /*#__PURE__*/React.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 = react.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(react.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
@@ -14536,12 +14619,16 @@ var Tooltip$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
   }, children) : children;
   var styles = react.useMultiStyleConfig("Tooltip", {});
   return React__default.createElement(react.Tooltip, 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);
@@ -15029,6 +15116,96 @@ var Toggle$2 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function
   }), 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 = react.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__*/react.chakra( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var aspectRatio = props.aspectRatio,
@@ -15273,6 +15450,7 @@ exports.SkipNavigation = SkipNavigation$1;
 exports.Slider = Slider;
 exports.StatusBadge = StatusBadge$1;
 exports.StructuredContent = StructuredContent$1;
+exports.StyledList = StyledList$1;
 exports.Table = Table;
 exports.Tabs = Tabs;
 exports.TagSet = TagSet$1;