@nypl/design-system-react-components 1.2.2 → 1.3.0-rc-2

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,7 +575,6 @@ 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
@@ -621,7 +597,6 @@ var SvgErrorOutline = function SvgErrorOutline(_ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$p({
     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
@@ -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)));
   });
@@ -3079,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
@@ -3138,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.
@@ -3156,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);
@@ -3223,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,
@@ -3354,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",
@@ -3385,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)]);
+  }
+  // For dark mode `ColorCard`s, there are four extra rows.
+  if (dataDarkBgPageColor && dataDarkBgPageColor.length > 0) {
+    tableData.push([React.createElement("span", {
+      key: "colorDarkBgPage",
+      style: {
+        padding: 0
+      }
+    }, 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 (dataDarkBgDefaultColor && dataDarkBgDefaultColor.length > 0) {
+    tableData.push([React.createElement("span", {
+      key: "colorDarkBgDefault",
+      style: {
+        padding: 0
+      }
+    }, 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 (dataHeadingColor && dataHeadingColor.length > 0) {
+  if (dataDarkHeadingColor && dataDarkHeadingColor.length > 0) {
     tableData.push([React.createElement("span", {
-      key: "colorHeading",
+      key: "colorDarkHeading",
       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-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 (dataBodyColor && dataBodyColor.length > 0) {
+  if (dataDarkBodyColor && dataDarkBodyColor.length > 0) {
     tableData.push([React.createElement("span", {
-      key: "colorText",
+      key: "colorDarkText",
       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-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,
@@ -3448,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,
@@ -3468,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, {
@@ -3484,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"];
@@ -3552,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
     });
@@ -4272,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
@@ -4282,7 +4226,7 @@ var global = {
  */
 var breakpoints = /*#__PURE__*/themeTools.createBreakpoints({
   sm: "20em",
-  md: "38em",
+  md: "37.5em",
   lg: "60em",
   xl: "80em",
   "2xl": "96em"
@@ -4359,6 +4303,7 @@ var colors = {
     },
     // Semantic colors
     bg: {
+      page: white,
       "default": grayxLightCool,
       hover: grayLightCool,
       active: grayMedium
@@ -4369,7 +4314,11 @@ var colors = {
     },
     typography: {
       heading: black,
-      body: black
+      body: black,
+      inverse: {
+        heading: white,
+        body: white
+      }
     },
     // Grayscale
     gray: {
@@ -4430,7 +4379,11 @@ var colors = {
       },
       typography: {
         heading: grayLightCool,
-        body: grayMedium
+        body: grayMedium,
+        inverse: {
+          heading: grayxxDark,
+          body: grayxxDark
+        }
       }
     }
   },
@@ -4730,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",
@@ -5618,13 +5580,54 @@ var DatePicker$1 = {
   }
 };
 
-var Fieldset$1 = {
-  baseStyle: function baseStyle(_ref) {
-    var isLegendHidden = _ref.isLegendHidden;
-    var screenreaderStyles = isLegendHidden ? screenreaderOnly() : {};
-    return {
-      border: 0,
-      padding: 0,
+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;
+    var screenreaderStyles = isLegendHidden ? screenreaderOnly() : {};
+    return {
+      border: 0,
+      padding: 0,
       legend: _extends({}, labelLegendText, screenreaderStyles)
     };
   }
@@ -8234,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"
 };
@@ -8859,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
@@ -8915,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,
@@ -8950,6 +8969,7 @@ var theme = /*#__PURE__*/react.extendTheme( /*#__PURE__*/_extends({
     CustomSlider: CustomSlider,
     StatusBadge: StatusBadge,
     StructuredContent: StructuredContent,
+    StyledList: StyledList,
     Tabs: CustomTabs,
     CustomTable: CustomTable
   }, TagSetStyles, TemplateStyles, {
@@ -8981,133 +9001,875 @@ var DSProvider = function DSProvider(_ref) {
   }, children);
 };
 
-var _excluded$1b = ["children", "className", "id", "inline", "listItems", "noStyling", "title", "type"];
+var _excluded$1b = ["children", "icon", "id", "isCentered", "notificationType"],
+  _excluded2$5 = ["alignText", "children", "icon", "notificationType"],
+  _excluded3$3 = ["ariaLabel", "className", "dismissible", "icon", "id", "isCentered", "noMargin", "notificationContent", "notificationHeading", "notificationType", "showIcon"];
 /**
- * A component that renders list item `li` elements or description item `dt`
- * and `dd` elements based on the `type` prop. Note that the `title` prop will
- * only display for the `Description` list type.
+ * NotificationHeading child-component.
  */
-var List$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (props, ref) {
+var NotificationHeading$1 = /*#__PURE__*/react.chakra(function (props) {
   var children = props.children,
-    className = props.className,
+    icon = props.icon,
     id = props.id,
-    _props$inline = props.inline,
-    inline = _props$inline === void 0 ? false : _props$inline,
-    listItems = props.listItems,
-    _props$noStyling = props.noStyling,
-    noStyling = _props$noStyling === void 0 ? false : _props$noStyling,
-    title = props.title,
-    _props$type = props.type,
-    type = _props$type === void 0 ? "ul" : _props$type,
+    isCentered = props.isCentered,
+    notificationType = props.notificationType,
     rest = _objectWithoutPropertiesLoose(props, _excluded$1b);
-  var styles = react.useStyleConfig("List", {
-    inline: inline,
-    noStyling: noStyling,
-    variant: type
+  var styles = react.useMultiStyleConfig("NotificationHeading", {
+    icon: icon,
+    isCentered: isCentered,
+    notificationType: notificationType
   });
-  var listElement = null;
-  // Either li/dt/dd children elements must be passed or the `listItems`
-  // prop must be used.
-  if (children && listItems && (listItems == null ? void 0 : listItems.length) > 0) {
-    console.warn("NYPL Reservoir List: Pass in either `<li>`, `<dt>`, or `<dd>` " + "children or use the `listItems` data prop. Do not use both.");
-    return null;
-  }
-  if (!children && !listItems) {
-    console.warn("NYPL Reservoir List: Pass in either `<li>` children or pass data in " + "the `listItems` prop, not both.");
-    return null;
-  }
-  /**
-   * This returns either the `children` elements passed to the `List` component
-   * first, otherwise it will check and render the data passed into the
-   * `listItems` props based on the `ListType` type. If it is of type unordered
-   * or ordered, it will return `li` elements. Otherwise, it will return a
-   * combination of `dt` and `dd` elements for the description type.
-   */
-  var listChildrenElms = function listChildrenElms(listType) {
-    if (children) {
-      return children;
-    }
-    if (!listItems) {
-      return null;
-    }
-    if (listType === "ol" || listType === "ul") {
-      return listItems.map(function (item, i) {
-        return React__default.createElement("li", {
-          key: i
-        }, item);
-      });
-    } else if (listType === "dl") {
-      return listItems.map(function (item, i) {
-        return [React__default.createElement("dt", {
-          key: i + "-term"
-        }, item.term), React__default.createElement("dd", {
-          key: i + "-des"
-        }, item.description)];
-      });
-    }
-    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.");
-      }
-    });
+  return React__default.createElement(react.Box, Object.assign({
+    as: "header",
+    __css: styles
+  }, rest), icon, React__default.createElement(Heading, {
+    id: id + "-heading",
+    level: "four",
+    __css: styles.heading
+  }, children));
+});
+/**
+ * NotificationContent child-component.
+ */
+var NotificationContent$1 = /*#__PURE__*/react.chakra(function (props) {
+  var alignText = props.alignText,
+    children = props.children,
+    icon = props.icon,
+    notificationType = props.notificationType,
+    rest = _objectWithoutPropertiesLoose(props, _excluded2$5);
+  var styles = react.useMultiStyleConfig("NotificationContent", {
+    alignText: alignText,
+    icon: icon,
+    notificationType: notificationType
+  });
+  return React__default.createElement(react.Box, Object.assign({
+    __css: styles
+  }, rest), icon, React__default.createElement(react.Box, {
+    __css: styles.content
+  }, children));
+});
+/**
+ * Component used to present users with three different levels of notifications:
+ * standard, announcement, and warning.
+ */
+var Notification$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var ariaLabel = props.ariaLabel,
+    className = props.className,
+    _props$dismissible = props.dismissible,
+    dismissible = _props$dismissible === void 0 ? false : _props$dismissible,
+    icon = props.icon,
+    id = props.id,
+    _props$isCentered = props.isCentered,
+    isCentered = _props$isCentered === void 0 ? false : _props$isCentered,
+    _props$noMargin = props.noMargin,
+    noMargin = _props$noMargin === void 0 ? false : _props$noMargin,
+    notificationContent = props.notificationContent,
+    notificationHeading = props.notificationHeading,
+    _props$notificationTy = props.notificationType,
+    notificationType = _props$notificationTy === void 0 ? "standard" : _props$notificationTy,
+    _props$showIcon = props.showIcon,
+    showIcon = _props$showIcon === void 0 ? true : _props$showIcon,
+    rest = _objectWithoutPropertiesLoose(props, _excluded3$3);
+  var _useState = React.useState(true),
+    isOpen = _useState[0],
+    setIsOpen = _useState[1];
+  var handleClose = function handleClose() {
+    return setIsOpen(false);
   };
-  /**
-   * Checks for `dt` and `dd` elements and consoles a warning if the
-   * children are different HTML elements.
-   */
-  var checkDescriptionChildrenError = function checkDescriptionChildrenError() {
-    React__default.Children.map(children, function (child) {
-      if (child.type !== "dt" && child.type !== "dd" && child.type !== React__default.Fragment && child.props.mdxType !== "dt" && child.props.mdxType !== "dd" && child.props.mdxType !== React__default.Fragment) {
-        console.warn("NYPL Reservoir List: Direct children of `List` (description) must " + "be `<dt>`s and `<dd>`s.");
+  var styles = react.useMultiStyleConfig("Notification", {
+    dismissible: dismissible,
+    isCentered: isCentered,
+    noMargin: noMargin,
+    notificationType: notificationType
+  });
+  var iconElement = function iconElement() {
+    var baseIconProps = {
+      size: "large",
+      __css: styles.icon
+    };
+    // If the icon should not display, return undefined.
+    if (!showIcon) {
+      return undefined;
+    }
+    // If a custom icon is passed, add specific `Notification` styles.
+    if (icon) return React__default.cloneElement(icon, _extends({
+      id: id + "-custom-notification-icon"
+    }, baseIconProps));
+    var iconProps = {
+      announcement: {
+        color: "section.research.secondary",
+        name: "speakerNotes",
+        title: "Notification announcement icon"
+      },
+      standard: {
+        color: "ui.black",
+        name: "alertNotificationImportant",
+        title: "Notification standard icon"
+      },
+      warning: {
+        color: "brand.primary",
+        name: "errorFilled",
+        title: "Notification warning icon"
       }
-    });
+    };
+    return React__default.createElement(Icon, Object.assign({
+      id: id + "-notification-icon"
+    }, iconProps[notificationType], baseIconProps));
   };
-  if (type === "ol" || type === "ul") {
-    checkListChildrenError(type);
-    listElement = React__default.createElement(react.Box, Object.assign({
-      as: type,
-      id: id,
-      className: className,
-      ref: ref,
-      __css: styles
-    }, rest), listChildrenElms(type));
-  } else if (type === "dl") {
-    checkDescriptionChildrenError();
-    listElement = React__default.createElement(react.Box, Object.assign({
-      as: "section",
-      id: id,
-      className: className,
-      ref: ref,
-      __css: styles
-    }, rest), title && React__default.createElement(Heading, {
-      id: id + "-heading"
-    }, title), React__default.createElement("dl", null, listChildrenElms(type)));
-  }
-  return listElement;
-}));
-
-var _path$L, _path2$f, _path3$7;
-var _excluded$1c = ["title", "titleId"];
-function _extends$R() { _extends$R = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$R.apply(this, arguments); }
-function _objectWithoutProperties$Q(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$R(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose$R(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var SvgLogoAppleAppStoreBlack = function SvgLogoAppleAppStoreBlack(_ref) {
-  var title = _ref.title,
-    titleId = _ref.titleId,
-    props = _objectWithoutProperties$Q(_ref, _excluded$1c);
+  var dismissibleButton = dismissible && React__default.createElement(Button, {
+    "aria-label": "Close the notification",
+    buttonType: "text",
+    id: id + "-notification-dismissible-button",
+    onClick: handleClose,
+    __css: styles.dismissibleButton
+  }, React__default.createElement(Icon, {
+    id: id + "-dismissible-notification-icon",
+    name: "close",
+    size: "large",
+    title: "Notification close icon"
+  }));
+  var iconElem = iconElement();
+  var childHeading = notificationHeading && React__default.createElement(NotificationHeading$1, {
+    icon: iconElem,
+    id: id,
+    isCentered: isCentered,
+    notificationType: notificationType
+  }, notificationHeading);
+  // Specific alignment styles for the content.
+  var alignText = !!(childHeading && showIcon && (!!icon || !isCentered));
+  var childContent = React__default.createElement(NotificationContent$1, {
+    alignText: alignText,
+    icon: !childHeading ? iconElem : undefined,
+    notificationType: notificationType
+  }, notificationContent);
+  // If the `Notification` is closed, don't render anything.
+  if (!isOpen) {
+    return null;
+  }
+  return React__default.createElement(react.Box, Object.assign({
+    "aria-label": ariaLabel,
+    as: "aside",
+    className: className,
+    "data-type": notificationType,
+    id: id,
+    ref: ref,
+    __css: styles
+  }, rest), React__default.createElement(react.Box, {
+    __css: styles.container
+  }, childHeading, childContent), dismissibleButton);
+}));
+
+var _excluded$1c = ["className", "helperText", "id", "invalidText", "isChecked", "isDisabled", "isInvalid", "isRequired", "labelText", "name", "onChange", "showHelperInvalidText", "showLabel", "value"];
+var Radio$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var className = props.className,
+    helperText = props.helperText,
+    id = props.id,
+    invalidText = props.invalidText,
+    isChecked = props.isChecked,
+    _props$isDisabled = props.isDisabled,
+    isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
+    _props$isInvalid = props.isInvalid,
+    isInvalid = _props$isInvalid === void 0 ? false : _props$isInvalid,
+    _props$isRequired = props.isRequired,
+    isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
+    labelText = props.labelText,
+    name = props.name,
+    onChange = props.onChange,
+    _props$showHelperInva = props.showHelperInvalidText,
+    showHelperInvalidText = _props$showHelperInva === void 0 ? true : _props$showHelperInva,
+    _props$showLabel = props.showLabel,
+    showLabel = _props$showLabel === void 0 ? true : _props$showLabel,
+    value = props.value,
+    rest = _objectWithoutPropertiesLoose(props, _excluded$1c);
+  var styles = react.useMultiStyleConfig("Radio", {
+    showLabel: showLabel
+  });
+  var wrapperStyles = react.useStyleConfig("RadioWrapper");
+  var footnote = isInvalid ? invalidText : helperText;
+  var ariaAttributes = getAriaAttrs({
+    footnote: footnote,
+    id: id,
+    labelText: labelText,
+    name: "Radio",
+    showLabel: showLabel
+  });
+  // We can't use the aria-label because of how Chakra renders its
+  // Radio component. Instead, we'll visually hide the label.
+  delete ariaAttributes["aria-label"];
+  if (!id) {
+    console.warn("NYPL Reservoir Radio: This component's required `id` prop was not passed.");
+  }
+  return React__default.createElement(ComponentWrapper, Object.assign({
+    helperText: helperText,
+    helperTextStyles: styles.helperErrorText,
+    id: id,
+    invalidText: invalidText,
+    isInvalid: isInvalid,
+    showHelperInvalidText: showHelperInvalidText,
+    sx: wrapperStyles
+  }, rest), React__default.createElement(react.Radio, Object.assign({
+    className: className,
+    id: id,
+    isChecked: isChecked,
+    isDisabled: isDisabled,
+    isInvalid: isInvalid,
+    isRequired: isRequired,
+    name: name,
+    onChange: onChange,
+    ref: ref,
+    value: value,
+    alignItems: "flex-start",
+    sx: styles
+  }, ariaAttributes), React__default.createElement(react.Box, {
+    as: "span",
+    __css: showLabel ? {} : styles.hiddenLabel
+  }, labelText)));
+}));
+
+var _excluded$1d = ["children", "className", "defaultValue", "helperText", "id", "invalidText", "isDisabled", "isFullWidth", "isInvalid", "isRequired", "labelText", "layout", "name", "onChange", "showHelperInvalidText", "showLabel", "showRequiredLabel"];
+/**
+ * RadioGroup is a wrapper for DS `Radio` components that renders as a fieldset
+ * HTML element along with optional helper text. The `name` prop is essential
+ * for this form group element and is not needed for individual DS `Radio`
+ * components when `RadioGroup` is used.
+ */
+var RadioGroup$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var children = props.children,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className,
+    defaultValue = props.defaultValue,
+    helperText = props.helperText,
+    id = props.id,
+    invalidText = props.invalidText,
+    _props$isDisabled = props.isDisabled,
+    isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
+    _props$isFullWidth = props.isFullWidth,
+    isFullWidth = _props$isFullWidth === void 0 ? false : _props$isFullWidth,
+    _props$isInvalid = props.isInvalid,
+    isInvalid = _props$isInvalid === void 0 ? false : _props$isInvalid,
+    _props$isRequired = props.isRequired,
+    isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
+    labelText = props.labelText,
+    _props$layout = props.layout,
+    layout = _props$layout === void 0 ? "column" : _props$layout,
+    name = props.name,
+    _onChange = props.onChange,
+    _props$showHelperInva = props.showHelperInvalidText,
+    showHelperInvalidText = _props$showHelperInva === void 0 ? true : _props$showHelperInva,
+    _props$showLabel = props.showLabel,
+    showLabel = _props$showLabel === void 0 ? true : _props$showLabel,
+    _props$showRequiredLa = props.showRequiredLabel,
+    showRequiredLabel = _props$showRequiredLa === void 0 ? true : _props$showRequiredLa,
+    rest = _objectWithoutPropertiesLoose(props, _excluded$1d);
+  var _React$useState = React__default.useState(defaultValue),
+    value = _React$useState[0],
+    setValue = _React$useState[1];
+  var footnote = isInvalid ? invalidText : helperText;
+  var spacingProp = layout === "column" ? spacing.s : spacing.l;
+  var newChildren = [];
+  // Get the Chakra-based styles for the custom elements in this component.
+  var styles = react.useMultiStyleConfig("RadioGroup", {
+    isFullWidth: isFullWidth
+  });
+  // Props for the `ChakraRadioGroup` component.
+  var radioGroupProps = {
+    "aria-label": !showLabel ? labelText : undefined,
+    name: name,
+    onChange: function onChange(selected) {
+      setValue(selected);
+      _onChange && _onChange(selected);
+    },
+    ref: ref,
+    value: value
+  };
+  if (!id) {
+    console.warn("NYPL Reservoir RadioGroup: This component's required `id` prop was not passed.");
+  }
+  // Go through the Radio children and update them as needed.
+  React__default.Children.map(children, function (child, key) {
+    if ((child == null ? void 0 : child.type) !== Radio$1) {
+      var _child$props, _child$props2;
+      // Special case for Storybook MDX documentation.
+      if ((_child$props = child.props) != null && _child$props.mdxType && ((_child$props2 = child.props) == null ? void 0 : _child$props2.mdxType) === "Radio") ; else {
+        console.warn("NYPL Reservoir RadioGroup: Only `Radio` components are allowed " + "inside the `RadioGroup` component.");
+      }
+    }
+    if (child !== undefined && child !== null) {
+      var newProps = {
+        key: key,
+        isDisabled: isDisabled,
+        isInvalid: isInvalid,
+        isRequired: isRequired
+      };
+      newChildren.push(React__default.cloneElement(child, newProps));
+    }
+  });
+  return React__default.createElement(Fieldset, Object.assign({
+    className: className,
+    id: "radio-group-" + id,
+    isLegendHidden: !showLabel,
+    isRequired: isRequired,
+    legendText: labelText,
+    showRequiredLabel: showRequiredLabel
+  }, rest, {
+    __css: styles
+  }), React__default.createElement(react.RadioGroup, Object.assign({}, radioGroupProps), React__default.createElement(react.Stack, {
+    direction: [layout],
+    spacing: spacingProp
+  }, newChildren)), footnote && showHelperInvalidText && React__default.createElement(HelperErrorText, {
+    id: id + "-helperErrorText",
+    isInvalid: isInvalid,
+    text: footnote,
+    __css: styles.helperErrorText
+  }));
+}));
+
+/**
+ * DS internal helper hook to use state with prop dependencies.
+ */
+function useStateWithDependencies(initialValue) {
+  var _useState = React.useState(initialValue),
+    value = _useState[0],
+    setValue = _useState[1];
+  React.useEffect(function () {
+    setValue(initialValue);
+  }, [initialValue]);
+  return [value, setValue];
+}
+
+var initialState = {
+  category: "comment",
+  comment: "",
+  email: ""
+};
+/**
+ * Simple reducer to manage the internal state of the form
+ * fields in the FeedbackBox component.
+ */
+function reducer(state, action) {
+  switch (action.type) {
+    case "category":
+      return _extends({}, state, {
+        category: action.payload
+      });
+    case "comment":
+      return _extends({}, state, {
+        comment: action.payload
+      });
+    case "email":
+      return _extends({}, state, {
+        email: action.payload
+      });
+    case "clear":
+    default:
+      return initialState;
+  }
+}
+/**
+ * DS internal helper reducer hook to manage internal state for the FeedbackBox
+ * component. Note: this custom hook is not tested directly as it's an
+ * implementation detail of the FeedbackBox component, following the guidance
+ * of RTL: https://testing-library.com/docs/example-react-hooks-useReducer
+ */
+function useFeedbackBoxReducer() {
+  var _useReducer = React.useReducer(reducer, initialState),
+    state = _useReducer[0],
+    dispatch = _useReducer[1];
+  var setCategory = function setCategory(category) {
+    return dispatch({
+      type: "category",
+      payload: category
+    });
+  };
+  var setComment = function setComment(comment) {
+    return dispatch({
+      type: "comment",
+      payload: comment
+    });
+  };
+  var setEmail = function setEmail(email) {
+    return dispatch({
+      type: "email",
+      payload: email
+    });
+  };
+  var clearValues = function clearValues() {
+    return dispatch({
+      type: "clear"
+    });
+  };
+  return {
+    state: state,
+    setCategory: setCategory,
+    setComment: setComment,
+    setEmail: setEmail,
+    clearValues: clearValues
+  };
+}
+
+var _excluded$1e = ["className", "confirmationText", "descriptionText", "hiddenFields", "id", "isInvalidComment", "isInvalidEmail", "notificationText", "onSubmit", "showCategoryField", "showEmailField", "title", "view", "isOpen", "onOpen", "onClose"];
+/**
+ * The `FeedbackBox` component renders a fixed-positioned button on the bottom
+ * right corner of a page that opens a Chakra `Drawer` popup component. Inside
+ * of the popup, a form is rendered with fields that allows users to provide
+ * feedback. The `FeedbackBox` component does *not* call any API with the
+ * submitted data; that feature is the responsibility of the consuming
+ * application.
+ */
+var FeedbackBox$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    confirmationText = _ref.confirmationText,
+    descriptionText = _ref.descriptionText,
+    hiddenFields = _ref.hiddenFields,
+    _ref$id = _ref.id,
+    id = _ref$id === void 0 ? "feedbackbox" : _ref$id,
+    _ref$isInvalidComment = _ref.isInvalidComment,
+    isInvalidComment = _ref$isInvalidComment === void 0 ? false : _ref$isInvalidComment,
+    _ref$isInvalidEmail = _ref.isInvalidEmail,
+    isInvalidEmail = _ref$isInvalidEmail === void 0 ? false : _ref$isInvalidEmail,
+    notificationText = _ref.notificationText,
+    onSubmit = _ref.onSubmit,
+    _ref$showCategoryFiel = _ref.showCategoryField,
+    showCategoryField = _ref$showCategoryFiel === void 0 ? false : _ref$showCategoryFiel,
+    _ref$showEmailField = _ref.showEmailField,
+    showEmailField = _ref$showEmailField === void 0 ? false : _ref$showEmailField,
+    title = _ref.title,
+    _ref$view = _ref.view,
+    view = _ref$view === void 0 ? "form" : _ref$view,
+    isOpen = _ref.isOpen,
+    onOpen = _ref.onOpen,
+    onClose = _ref.onClose,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1e);
+  // We want to keep internal state for the view but also
+  // update if the consuming app updates it, based on API
+  // success and failure responses.
+  var _useStateWithDependen = useStateWithDependencies(view),
+    viewType = _useStateWithDependen[0],
+    setViewType = _useStateWithDependen[1];
+  var _useState = React.useState(false),
+    isSubmitted = _useState[0],
+    setIsSubmitted = _useState[1];
+  // Helps keep track of form field state values.
+  var _useFeedbackBoxReduce = useFeedbackBoxReducer(),
+    state = _useFeedbackBoxReduce.state,
+    setCategory = _useFeedbackBoxReduce.setCategory,
+    setComment = _useFeedbackBoxReduce.setComment,
+    setEmail = _useFeedbackBoxReduce.setEmail,
+    clearValues = _useFeedbackBoxReduce.clearValues;
+  // Chakra's hook to control Drawer's actions.
+  var disclosure = react.useDisclosure();
+  var finalIsOpen = isOpen ? isOpen : disclosure.isOpen;
+  var finalOnOpen = onOpen ? onOpen : disclosure.onOpen;
+  var finalOnClose = onClose ? onClose : disclosure.onClose;
+  var focusRef = React.useRef();
+  var styles = react.useMultiStyleConfig("FeedbackBox", {});
+  var isFormView = viewType === "form";
+  var isConfirmationView = viewType === "confirmation";
+  var isErrorView = viewType === "error";
+  var confirmationTimeout = 3000;
+  var maxCommentCharacters = 500;
+  var initMinHeight = "275px";
+  var initTemplateRows = "auto 1fr";
+  var minHeightWithCategory = "345px";
+  var minHeightWithEmail = "385px";
+  var minHeightWithCategoryAndEmail = "455px";
+  var drawerMinHeight = initMinHeight;
+  var closeAndResetForm = function closeAndResetForm() {
+    finalOnClose();
+    setViewType("form");
+    clearValues();
+  };
+  var internalOnSubmit = function internalOnSubmit(e) {
+    e.preventDefault();
+    var submittedValues = _extends({}, state);
+    if (hiddenFields) {
+      submittedValues = _extends({}, submittedValues, hiddenFields);
+    }
+    onSubmit && onSubmit(submittedValues);
+    setIsSubmitted(true);
+  };
+  var notificationElement = isFormView && notificationText ? React__default.createElement(Notification$1, {
+    isCentered: true,
+    noMargin: true,
+    notificationContent: notificationText,
+    showIcon: false,
+    sx: {
+      // The padding of the Notification is smaller than
+      // the initial one.
+      "> div": {
+        py: "xs"
+      }
+    }
+  }) : undefined;
+  var descriptionElement = isFormView && descriptionText ? React__default.createElement(Text, {
+    fontWeight: "medium",
+    mb: "0"
+  }, descriptionText) : undefined;
+  var privacyPolicyField = React__default.createElement(FormField, null, React__default.createElement(Link, {
+    href: "https://www.nypl.org/help/about-nypl/legal-notices/privacy-policy",
+    type: "external",
+    fontSize: "text.tag"
+  }, "Privacy Policy"));
+  // When the submit button is clicked, set a timeout before displaying
+  // the confirmation or error screen. This automatically goes to the
+  // confirmation view after three (3) seconds, but the consuming app
+  // can set the error view if there are any issues.
+  React.useEffect(function () {
+    var timer;
+    if (isSubmitted) {
+      // If the consuming app does not provide any updates based
+      // on its API response, go to confirmation screen.
+      timer = setTimeout(function () {
+        setIsSubmitted(false);
+        if (isErrorView) {
+          setViewType("error");
+        } else {
+          setViewType("confirmation");
+        }
+        clearValues();
+      }, confirmationTimeout);
+      // If the consuming app does pass the API response to the
+      // component, then cancel the timeout above and display the
+      // appropriate screen.
+      if (view !== viewType) {
+        setIsSubmitted(false);
+        setViewType(view);
+        clearTimeout(timer);
+      }
+    }
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [clearValues, isErrorView, isSubmitted, setViewType, view, viewType]);
+  // Delay focusing on the confirmation or error message
+  // because it's an element that dynamically gets rendered,
+  // so it is not always available in the DOM.
+  React.useEffect(function () {
+    var timer;
+    if (viewType === "error" || viewType === "confirmation") {
+      timer = setTimeout(function () {
+        var _focusRef$current;
+        focusRef == null ? void 0 : (_focusRef$current = focusRef.current) == null ? void 0 : _focusRef$current.focus();
+      }, 250);
+    }
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [focusRef, viewType]);
+  if (showCategoryField) {
+    drawerMinHeight = minHeightWithCategory;
+  }
+  if (showEmailField) {
+    drawerMinHeight = minHeightWithEmail;
+  }
+  if (showCategoryField && showEmailField) {
+    drawerMinHeight = minHeightWithCategoryAndEmail;
+  }
+  return React__default.createElement(react.Box, Object.assign({
+    className: className,
+    id: id,
+    ref: ref,
+    sx: styles
+  }, rest), React__default.createElement(Button, {
+    id: "open",
+    onClick: finalOnOpen,
+    sx: styles.openButton
+  }, title), React__default.createElement(react.Drawer, {
+    blockScrollOnMount: false,
+    isOpen: finalIsOpen,
+    onClose: finalOnClose,
+    placement: "bottom"
+  }, React__default.createElement(react.DrawerOverlay, null), React__default.createElement(react.DrawerContent, {
+    sx: styles.drawerContent
+  }, React__default.createElement(react.DrawerHeader, {
+    sx: styles.drawerHeader
+  }, React__default.createElement(Text, {
+    "data-testid": "title"
+  }, title), React__default.createElement(react.Spacer, null), React__default.createElement(Button, {
+    buttonType: "text",
+    id: "close-btn",
+    onClick: finalOnClose,
+    sx: styles.closeButton
+  }, React__default.createElement(Icon, {
+    color: "ui.black",
+    name: "minus",
+    size: "medium"
+  }), React__default.createElement("span", null, "Close ", title))), React__default.createElement(react.DrawerBody, {
+    sx: styles.drawerBody
+  }, React__default.createElement(Form, {
+    gap: "grid.s",
+    id: "feedback-form",
+    onSubmit: internalOnSubmit,
+    sx: {
+      "> div": {
+        minHeight: drawerMinHeight,
+        gridTemplateRows: initTemplateRows
+      }
+    }
+  }, React__default.createElement(FormField, null, notificationElement, descriptionElement), isFormView && React__default.createElement(React__default.Fragment, null, showCategoryField && React__default.createElement(FormField, null, React__default.createElement(RadioGroup$1, {
+    defaultValue: state.category,
+    id: id + "-category",
+    isDisabled: isSubmitted,
+    labelText: "What is your feedback about?",
+    layout: "row",
+    name: id + "-category",
+    onChange: function onChange(selected) {
+      return setCategory(selected);
+    }
+  }, React__default.createElement(Radio$1, {
+    id: "comment",
+    labelText: "Comment",
+    value: "comment"
+  }), React__default.createElement(Radio$1, {
+    id: "correction",
+    labelText: "Correction",
+    value: "correction"
+  }), React__default.createElement(Radio$1, {
+    id: "bug",
+    labelText: "Bug",
+    value: "bug"
+  }))), React__default.createElement(FormField, null, React__default.createElement(TextInput, {
+    helperText: maxCommentCharacters - state.comment.length + " characters remaining",
+    id: id + "-comment",
+    invalidText: "Please fill out this field.",
+    isDisabled: isSubmitted,
+    isInvalid: isInvalidComment,
+    isRequired: true,
+    labelText: "Comment",
+    maxLength: maxCommentCharacters,
+    name: id + "-comment",
+    onChange: function onChange(e) {
+      return setComment(e.target.value);
+    },
+    placeholder: "Enter your question or feedback here",
+    type: "textarea",
+    defaultValue: state.comment
+  })), showEmailField && React__default.createElement(FormField, null, React__default.createElement(TextInput, {
+    id: id + "-email",
+    invalidText: "Please enter a valid email address.",
+    isDisabled: isSubmitted,
+    isInvalid: isInvalidEmail,
+    labelText: "Email",
+    name: id + "-email",
+    onChange: function onChange(e) {
+      return setEmail(e.target.value);
+    },
+    placeholder: "Enter your email address here",
+    type: "email",
+    value: state.email
+  })), privacyPolicyField, React__default.createElement(FormField, null, React__default.createElement(ButtonGroup, {
+    buttonWidth: "full",
+    id: "submit-cancel"
+  }, React__default.createElement(Button, {
+    buttonType: "secondary",
+    id: "cancel",
+    isDisabled: isSubmitted,
+    key: "cancel",
+    onClick: closeAndResetForm
+  }, "Cancel"), React__default.createElement(Button, {
+    id: "submit",
+    isDisabled: isSubmitted,
+    key: "submit",
+    type: "submit"
+  }, "Submit")))), isConfirmationView && React__default.createElement(React__default.Fragment, null, React__default.createElement(react.Box, {
+    key: "confirmationWrapper",
+    margin: "auto",
+    tabIndex: 0,
+    textAlign: "center",
+    ref: focusRef
+  }, React__default.createElement(Icon, {
+    name: "actionCheckCircleFilled",
+    size: "large"
+  }), React__default.createElement(Text, {
+    fontWeight: "medium"
+  }, "Thank you for submitting your feedback."), showEmailField && React__default.createElement(Text, null, "If you provided an email address and require a response, our service staff will reach out to you via email."), confirmationText ? React__default.createElement(Text, null, confirmationText) : undefined), privacyPolicyField, React__default.createElement(FormField, null, React__default.createElement(ButtonGroup, {
+    buttonWidth: "full",
+    id: "submit-cancel"
+  }, React__default.createElement(Button, {
+    id: "return-browsing",
+    buttonType: "secondary",
+    onClick: closeAndResetForm
+  }, "Return to Browsing")))), isErrorView && React__default.createElement(React__default.Fragment, null, React__default.createElement(react.Box, {
+    color: "ui.error.primary",
+    key: "errorWrapper",
+    margin: "auto",
+    tabIndex: 0,
+    textAlign: "center",
+    ref: focusRef
+  }, React__default.createElement(Icon, {
+    color: "ui.error.primary",
+    name: "errorFilled",
+    size: "large"
+  }), React__default.createElement(Text, {
+    fontWeight: "medium"
+  }, "Oops! Something went wrong. An error occured while processing your feedback.")), privacyPolicyField, React__default.createElement(FormField, null, React__default.createElement(ButtonGroup, {
+    buttonWidth: "full",
+    id: "submit-cancel"
+  }, React__default.createElement(Button, {
+    id: "return-browsing2",
+    key: "return-browsing2",
+    buttonType: "secondary",
+    onClick: closeAndResetForm
+  }, "Return to Browsing"), React__default.createElement(Button, {
+    id: "try-again",
+    key: "try-again",
+    onClick: function onClick() {
+      return setViewType("form");
+    }
+  }, "Try Again")))))))));
+}));
+function useFeedbackBox() {
+  var _useDisclosure = react.useDisclosure(),
+    isOpen = _useDisclosure.isOpen,
+    onClose = _useDisclosure.onClose,
+    onOpen = _useDisclosure.onOpen;
+  var InternalFeedbackBox = react.chakra(function (props) {
+    return React__default.createElement(FeedbackBox$1, Object.assign({
+      isOpen: isOpen,
+      onClose: onClose,
+      onOpen: onOpen
+    }, props));
+  });
+  return {
+    isOpen: isOpen,
+    onClose: onClose,
+    onOpen: onOpen,
+    FeedbackBox: InternalFeedbackBox
+  };
+}
+
+var _excluded$1f = ["children", "className", "id", "inline", "listItems", "noStyling", "title", "type"];
+/**
+ * A component that renders list item `li` elements or description item `dt`
+ * and `dd` elements based on the `type` prop. Note that the `title` prop will
+ * only display for the `Description` list type.
+ */
+var List$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var children = props.children,
+    className = props.className,
+    id = props.id,
+    _props$inline = props.inline,
+    inline = _props$inline === void 0 ? false : _props$inline,
+    listItems = props.listItems,
+    _props$noStyling = props.noStyling,
+    noStyling = _props$noStyling === void 0 ? false : _props$noStyling,
+    title = props.title,
+    _props$type = props.type,
+    type = _props$type === void 0 ? "ul" : _props$type,
+    rest = _objectWithoutPropertiesLoose(props, _excluded$1f);
+  var styles = react.useStyleConfig("List", {
+    inline: inline,
+    noStyling: noStyling,
+    variant: type
+  });
+  var listElement = null;
+  // Either li/dt/dd children elements must be passed or the `listItems`
+  // prop must be used.
+  if (children && listItems && (listItems == null ? void 0 : listItems.length) > 0) {
+    console.warn("NYPL Reservoir List: Pass in either `<li>`, `<dt>`, or `<dd>` " + "children or use the `listItems` data prop. Do not use both.");
+    return null;
+  }
+  if (!children && !listItems) {
+    console.warn("NYPL Reservoir List: Pass in either `<li>` children or pass data in " + "the `listItems` prop, not both.");
+    return null;
+  }
+  /**
+   * This returns either the `children` elements passed to the `List` component
+   * first, otherwise it will check and render the data passed into the
+   * `listItems` props based on the `ListType` type. If it is of type unordered
+   * or ordered, it will return `li` elements. Otherwise, it will return a
+   * combination of `dt` and `dd` elements for the description type.
+   */
+  var listChildrenElms = function listChildrenElms(listType) {
+    if (children) {
+      return children;
+    }
+    if (!listItems) {
+      return null;
+    }
+    if (listType === "ol" || listType === "ul") {
+      return listItems.map(function (item, i) {
+        return React__default.createElement("li", {
+          key: i
+        }, item);
+      });
+    } else if (listType === "dl") {
+      return listItems.map(function (item, i) {
+        return [React__default.createElement("dt", {
+          key: i + "-term"
+        }, item.term), React__default.createElement("dd", {
+          key: i + "-des"
+        }, item.description)];
+      });
+    }
+    return null;
+  };
+  /**
+   * Checks for `dt` and `dd` elements and consoles a warning if the
+   * children are different HTML elements.
+   */
+  var checkDescriptionChildrenError = function checkDescriptionChildrenError() {
+    React__default.Children.map(children, function (child) {
+      if (child.type !== "dt" && child.type !== "dd" && child.type !== React__default.Fragment && child.props.mdxType !== "dt" && child.props.mdxType !== "dd" && child.props.mdxType !== React__default.Fragment) {
+        console.warn("NYPL Reservoir List: Direct children of `List` (description) must " + "be `<dt>`s and `<dd>`s.");
+      }
+    });
+  };
+  if (type === "ol" || type === "ul") {
+    checkListChildrenError(children, type);
+    listElement = React__default.createElement(react.Box, Object.assign({
+      as: type,
+      id: id,
+      className: className,
+      ref: ref,
+      __css: styles
+    }, rest), listChildrenElms(type));
+  } else if (type === "dl") {
+    checkDescriptionChildrenError();
+    listElement = React__default.createElement(react.Box, Object.assign({
+      as: "section",
+      id: id,
+      className: className,
+      ref: ref,
+      __css: styles
+    }, rest), title && React__default.createElement(Heading, {
+      id: id + "-heading"
+    }, title), React__default.createElement("dl", null, listChildrenElms(type)));
+  }
+  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$1g = ["title", "titleId"];
+function _extends$R() { _extends$R = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$R.apply(this, arguments); }
+function _objectWithoutProperties$Q(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$R(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose$R(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var SvgLogoAppleAppStoreBlack = function SvgLogoAppleAppStoreBlack(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties$Q(_ref, _excluded$1g);
   return /*#__PURE__*/React.createElement("svg", _extends$R({
     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
@@ -9124,19 +9886,18 @@ var SvgLogoAppleAppStoreBlack = function SvgLogoAppleAppStoreBlack(_ref) {
 };
 
 var _path$M, _path2$g, _path3$8;
-var _excluded$1d = ["title", "titleId"];
+var _excluded$1h = ["title", "titleId"];
 function _extends$S() { _extends$S = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$S.apply(this, arguments); }
 function _objectWithoutProperties$R(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$S(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$S(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoAppleAppStoreWhite = function SvgLogoAppleAppStoreWhite(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$R(_ref, _excluded$1d);
+    props = _objectWithoutProperties$R(_ref, _excluded$1h);
   return /*#__PURE__*/React.createElement("svg", _extends$S({
     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
@@ -9153,18 +9914,17 @@ var SvgLogoAppleAppStoreWhite = function SvgLogoAppleAppStoreWhite(_ref) {
 };
 
 var _path$N, _path2$h, _path3$9;
-var _excluded$1e = ["title", "titleId"];
+var _excluded$1i = ["title", "titleId"];
 function _extends$T() { _extends$T = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$T.apply(this, arguments); }
 function _objectWithoutProperties$S(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$T(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$T(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoBplBlack = function SvgLogoBplBlack(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$S(_ref, _excluded$1e);
+    props = _objectWithoutProperties$S(_ref, _excluded$1i);
   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
@@ -9178,19 +9938,18 @@ var SvgLogoBplBlack = function SvgLogoBplBlack(_ref) {
 };
 
 var _path$O, _path2$i, _path3$a;
-var _excluded$1f = ["title", "titleId"];
+var _excluded$1j = ["title", "titleId"];
 function _extends$U() { _extends$U = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$U.apply(this, arguments); }
 function _objectWithoutProperties$T(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$U(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$U(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoBplWhite = function SvgLogoBplWhite(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$T(_ref, _excluded$1f);
+    props = _objectWithoutProperties$T(_ref, _excluded$1j);
   return /*#__PURE__*/React.createElement("svg", _extends$U({
     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
@@ -9204,19 +9963,18 @@ var SvgLogoBplWhite = function SvgLogoBplWhite(_ref) {
 };
 
 var _rect$2, _path$P;
-var _excluded$1g = ["title", "titleId"];
+var _excluded$1k = ["title", "titleId"];
 function _extends$V() { _extends$V = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$V.apply(this, arguments); }
 function _objectWithoutProperties$U(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$V(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$V(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoCleverBadgeColor = function SvgLogoCleverBadgeColor(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$U(_ref, _excluded$1g);
+    props = _objectWithoutProperties$U(_ref, _excluded$1k);
   return /*#__PURE__*/React.createElement("svg", _extends$V({
     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
@@ -9235,19 +9993,18 @@ var SvgLogoCleverBadgeColor = function SvgLogoCleverBadgeColor(_ref) {
 };
 
 var _path$Q;
-var _excluded$1h = ["title", "titleId"];
+var _excluded$1l = ["title", "titleId"];
 function _extends$W() { _extends$W = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$W.apply(this, arguments); }
 function _objectWithoutProperties$V(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$W(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$W(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoCleverColor = function SvgLogoCleverColor(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$V(_ref, _excluded$1h);
+    props = _objectWithoutProperties$V(_ref, _excluded$1l);
   return /*#__PURE__*/React.createElement("svg", _extends$W({
     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
@@ -9259,19 +10016,18 @@ var SvgLogoCleverColor = function SvgLogoCleverColor(_ref) {
 };
 
 var _path$R;
-var _excluded$1i = ["title", "titleId"];
+var _excluded$1m = ["title", "titleId"];
 function _extends$X() { _extends$X = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$X.apply(this, arguments); }
 function _objectWithoutProperties$W(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$X(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$X(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoCleverWhite = function SvgLogoCleverWhite(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$W(_ref, _excluded$1i);
+    props = _objectWithoutProperties$W(_ref, _excluded$1m);
   return /*#__PURE__*/React.createElement("svg", _extends$X({
     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
@@ -9283,19 +10039,18 @@ var SvgLogoCleverWhite = function SvgLogoCleverWhite(_ref) {
 };
 
 var _path$S, _path2$j, _path3$b, _path4$1, _path5, _path6, _path7, _path8, _path9, _path10, _path11, _path12, _path13;
-var _excluded$1j = ["title", "titleId"];
+var _excluded$1n = ["title", "titleId"];
 function _extends$Y() { _extends$Y = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$Y.apply(this, arguments); }
 function _objectWithoutProperties$X(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$Y(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$Y(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoFirstbookColor = function SvgLogoFirstbookColor(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$X(_ref, _excluded$1j);
+    props = _objectWithoutProperties$X(_ref, _excluded$1n);
   return /*#__PURE__*/React.createElement("svg", _extends$Y({
     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
@@ -9342,19 +10097,18 @@ var SvgLogoFirstbookColor = function SvgLogoFirstbookColor(_ref) {
 };
 
 var _g$3;
-var _excluded$1k = ["title", "titleId"];
+var _excluded$1o = ["title", "titleId"];
 function _extends$Z() { _extends$Z = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$Z.apply(this, arguments); }
 function _objectWithoutProperties$Y(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$Z(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$Z(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoFirstbookColorNegative = function SvgLogoFirstbookColorNegative(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$Y(_ref, _excluded$1k);
+    props = _objectWithoutProperties$Y(_ref, _excluded$1o);
   return /*#__PURE__*/React.createElement("svg", _extends$Z({
     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
@@ -9406,19 +10160,18 @@ var SvgLogoFirstbookColorNegative = function SvgLogoFirstbookColorNegative(_ref)
 };
 
 var _g$4, _defs;
-var _excluded$1l = ["title", "titleId"];
+var _excluded$1p = ["title", "titleId"];
 function _extends$_() { _extends$_ = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$_.apply(this, arguments); }
 function _objectWithoutProperties$Z(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$_(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$_(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoGooglePlayBlack = function SvgLogoGooglePlayBlack(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$Z(_ref, _excluded$1l);
+    props = _objectWithoutProperties$Z(_ref, _excluded$1p);
   return /*#__PURE__*/React.createElement("svg", _extends$_({
     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
@@ -9547,19 +10300,18 @@ var SvgLogoGooglePlayBlack = function SvgLogoGooglePlayBlack(_ref) {
 };
 
 var _path$T, _path2$k;
-var _excluded$1m = ["title", "titleId"];
+var _excluded$1q = ["title", "titleId"];
 function _extends$$() { _extends$$ = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$$.apply(this, arguments); }
 function _objectWithoutProperties$_(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$$(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$$(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoLpaColor = function SvgLogoLpaColor(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$_(_ref, _excluded$1m);
+    props = _objectWithoutProperties$_(_ref, _excluded$1q);
   return /*#__PURE__*/React.createElement("svg", _extends$$({
     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
@@ -9573,18 +10325,17 @@ var SvgLogoLpaColor = function SvgLogoLpaColor(_ref) {
 };
 
 var _path$U;
-var _excluded$1n = ["title", "titleId"];
+var _excluded$1r = ["title", "titleId"];
 function _extends$10() { _extends$10 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$10.apply(this, arguments); }
 function _objectWithoutProperties$$(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$10(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$10(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoLpaBlack = function SvgLogoLpaBlack(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$$(_ref, _excluded$1n);
+    props = _objectWithoutProperties$$(_ref, _excluded$1r);
   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
@@ -9594,19 +10345,18 @@ var SvgLogoLpaBlack = function SvgLogoLpaBlack(_ref) {
 };
 
 var _path$V;
-var _excluded$1o = ["title", "titleId"];
+var _excluded$1s = ["title", "titleId"];
 function _extends$11() { _extends$11 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$11.apply(this, arguments); }
 function _objectWithoutProperties$10(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$11(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$11(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoLpaWhite = function SvgLogoLpaWhite(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$10(_ref, _excluded$1o);
+    props = _objectWithoutProperties$10(_ref, _excluded$1s);
   return /*#__PURE__*/React.createElement("svg", _extends$11({
     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
@@ -9616,18 +10366,17 @@ var SvgLogoLpaWhite = function SvgLogoLpaWhite(_ref) {
 };
 
 var _g$5;
-var _excluded$1p = ["title", "titleId"];
+var _excluded$1t = ["title", "titleId"];
 function _extends$12() { _extends$12 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$12.apply(this, arguments); }
 function _objectWithoutProperties$11(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$12(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$12(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoMlnBlack = function SvgLogoMlnBlack(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$11(_ref, _excluded$1p);
+    props = _objectWithoutProperties$11(_ref, _excluded$1t);
   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
@@ -9639,19 +10388,18 @@ var SvgLogoMlnBlack = function SvgLogoMlnBlack(_ref) {
 };
 
 var _g$6;
-var _excluded$1q = ["title", "titleId"];
+var _excluded$1u = ["title", "titleId"];
 function _extends$13() { _extends$13 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$13.apply(this, arguments); }
 function _objectWithoutProperties$12(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$13(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$13(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoMlnColor = function SvgLogoMlnColor(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$12(_ref, _excluded$1q);
+    props = _objectWithoutProperties$12(_ref, _excluded$1u);
   return /*#__PURE__*/React.createElement("svg", _extends$13({
     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
@@ -9663,19 +10411,18 @@ var SvgLogoMlnColor = function SvgLogoMlnColor(_ref) {
 };
 
 var _g$7;
-var _excluded$1r = ["title", "titleId"];
+var _excluded$1v = ["title", "titleId"];
 function _extends$14() { _extends$14 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$14.apply(this, arguments); }
 function _objectWithoutProperties$13(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$14(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$14(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoMlnWhite = function SvgLogoMlnWhite(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$13(_ref, _excluded$1r);
+    props = _objectWithoutProperties$13(_ref, _excluded$1v);
   return /*#__PURE__*/React.createElement("svg", _extends$14({
     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
@@ -9687,19 +10434,18 @@ var SvgLogoMlnWhite = function SvgLogoMlnWhite(_ref) {
 };
 
 var _g$8, _defs$1;
-var _excluded$1s = ["title", "titleId"];
+var _excluded$1w = ["title", "titleId"];
 function _extends$15() { _extends$15 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$15.apply(this, arguments); }
 function _objectWithoutProperties$14(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$15(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$15(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoNycdoeColor = function SvgLogoNycdoeColor(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$14(_ref, _excluded$1s);
+    props = _objectWithoutProperties$14(_ref, _excluded$1w);
   return /*#__PURE__*/React.createElement("svg", _extends$15({
     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
@@ -9728,19 +10474,18 @@ var SvgLogoNycdoeColor = function SvgLogoNycdoeColor(_ref) {
   })))));
 };
 
-var _excluded$1t = ["title", "titleId"];
+var _excluded$1x = ["title", "titleId"];
 function _extends$16() { _extends$16 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$16.apply(this, arguments); }
 function _objectWithoutProperties$15(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$16(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$16(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoNyplFullBlack = function SvgLogoNyplFullBlack(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$15(_ref, _excluded$1t);
+    props = _objectWithoutProperties$15(_ref, _excluded$1x);
   return /*#__PURE__*/React.createElement("svg", _extends$16({
     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
@@ -9811,19 +10556,18 @@ var SvgLogoNyplFullBlack = function SvgLogoNyplFullBlack(_ref) {
 };
 
 var _g$9, _defs$2;
-var _excluded$1u = ["title", "titleId"];
+var _excluded$1y = ["title", "titleId"];
 function _extends$17() { _extends$17 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$17.apply(this, arguments); }
 function _objectWithoutProperties$16(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$17(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$17(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoNyplFullWhite = function SvgLogoNyplFullWhite(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$16(_ref, _excluded$1u);
+    props = _objectWithoutProperties$16(_ref, _excluded$1y);
   return /*#__PURE__*/React.createElement("svg", _extends$17({
     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
@@ -9847,19 +10591,18 @@ var SvgLogoNyplFullWhite = function SvgLogoNyplFullWhite(_ref) {
 };
 
 var _path$W, _path2$l, _path3$c;
-var _excluded$1v = ["title", "titleId"];
+var _excluded$1z = ["title", "titleId"];
 function _extends$18() { _extends$18 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$18.apply(this, arguments); }
 function _objectWithoutProperties$17(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$18(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$18(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoNyplLionBlack = function SvgLogoNyplLionBlack(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$17(_ref, _excluded$1v);
+    props = _objectWithoutProperties$17(_ref, _excluded$1z);
   return /*#__PURE__*/React.createElement("svg", _extends$18({
     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
@@ -9878,19 +10621,18 @@ var SvgLogoNyplLionBlack = function SvgLogoNyplLionBlack(_ref) {
 };
 
 var _path$X;
-var _excluded$1w = ["title", "titleId"];
+var _excluded$1A = ["title", "titleId"];
 function _extends$19() { _extends$19 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$19.apply(this, arguments); }
 function _objectWithoutProperties$18(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$19(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$19(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoNyplLionWhite = function SvgLogoNyplLionWhite(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$18(_ref, _excluded$1w);
+    props = _objectWithoutProperties$18(_ref, _excluded$1A);
   return /*#__PURE__*/React.createElement("svg", _extends$19({
     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
@@ -9903,19 +10645,18 @@ var SvgLogoNyplLionWhite = function SvgLogoNyplLionWhite(_ref) {
 };
 
 var _path$Y, _path2$m, _path3$d, _path4$2, _path5$1, _path6$1, _path7$1, _path8$1, _path9$1, _path10$1, _path11$1, _path12$1, _path13$1, _path14, _path15;
-var _excluded$1x = ["title", "titleId"];
+var _excluded$1B = ["title", "titleId"];
 function _extends$1a() { _extends$1a = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1a.apply(this, arguments); }
 function _objectWithoutProperties$19(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1a(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1a(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoNyplTextBlack = function SvgLogoNyplTextBlack(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$19(_ref, _excluded$1x);
+    props = _objectWithoutProperties$19(_ref, _excluded$1B);
   return /*#__PURE__*/React.createElement("svg", _extends$1a({
     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
@@ -9982,19 +10723,18 @@ var SvgLogoNyplTextBlack = function SvgLogoNyplTextBlack(_ref) {
 };
 
 var _path$Z, _path2$n, _path3$e, _path4$3, _path5$2, _path6$2, _path7$2, _path8$2, _path9$2, _path10$2, _path11$2, _path12$2, _path13$2, _path14$1, _path15$1;
-var _excluded$1y = ["title", "titleId"];
+var _excluded$1C = ["title", "titleId"];
 function _extends$1b() { _extends$1b = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1b.apply(this, arguments); }
 function _objectWithoutProperties$1a(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1b(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1b(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoNyplTextWhite = function SvgLogoNyplTextWhite(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1a(_ref, _excluded$1y);
+    props = _objectWithoutProperties$1a(_ref, _excluded$1C);
   return /*#__PURE__*/React.createElement("svg", _extends$1b({
     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
@@ -10061,19 +10801,18 @@ var SvgLogoNyplTextWhite = function SvgLogoNyplTextWhite(_ref) {
 };
 
 var _g$a, _defs$3;
-var _excluded$1z = ["title", "titleId"];
+var _excluded$1D = ["title", "titleId"];
 function _extends$1c() { _extends$1c = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1c.apply(this, arguments); }
 function _objectWithoutProperties$1b(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1c(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1c(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoOpenebooksColor = function SvgLogoOpenebooksColor(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1b(_ref, _excluded$1z);
+    props = _objectWithoutProperties$1b(_ref, _excluded$1D);
   return /*#__PURE__*/React.createElement("svg", _extends$1c({
     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
@@ -10117,19 +10856,18 @@ var SvgLogoOpenebooksColor = function SvgLogoOpenebooksColor(_ref) {
 };
 
 var _g$b, _defs$4;
-var _excluded$1A = ["title", "titleId"];
+var _excluded$1E = ["title", "titleId"];
 function _extends$1d() { _extends$1d = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1d.apply(this, arguments); }
 function _objectWithoutProperties$1c(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1d(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1d(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoOpenebooksNegative = function SvgLogoOpenebooksNegative(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1c(_ref, _excluded$1A);
+    props = _objectWithoutProperties$1c(_ref, _excluded$1E);
   return /*#__PURE__*/React.createElement("svg", _extends$1d({
     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
@@ -10196,19 +10934,18 @@ var SvgLogoOpenebooksNegative = function SvgLogoOpenebooksNegative(_ref) {
 };
 
 var _g$c, _defs$5;
-var _excluded$1B = ["title", "titleId"];
+var _excluded$1F = ["title", "titleId"];
 function _extends$1e() { _extends$1e = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1e.apply(this, arguments); }
 function _objectWithoutProperties$1d(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1e(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1e(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoOpenebooksWithTextColor = function SvgLogoOpenebooksWithTextColor(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1d(_ref, _excluded$1B);
+    props = _objectWithoutProperties$1d(_ref, _excluded$1F);
   return /*#__PURE__*/React.createElement("svg", _extends$1e({
     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
@@ -10252,19 +10989,18 @@ var SvgLogoOpenebooksWithTextColor = function SvgLogoOpenebooksWithTextColor(_re
 };
 
 var _g$d, _defs$6;
-var _excluded$1C = ["title", "titleId"];
+var _excluded$1G = ["title", "titleId"];
 function _extends$1f() { _extends$1f = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1f.apply(this, arguments); }
 function _objectWithoutProperties$1e(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1f(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1f(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoOpenebooksWithTextNegative = function SvgLogoOpenebooksWithTextNegative(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1e(_ref, _excluded$1C);
+    props = _objectWithoutProperties$1e(_ref, _excluded$1G);
   return /*#__PURE__*/React.createElement("svg", _extends$1f({
     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
@@ -10334,18 +11070,17 @@ var SvgLogoOpenebooksWithTextNegative = function SvgLogoOpenebooksWithTextNegati
 };
 
 var _path$_;
-var _excluded$1D = ["title", "titleId"];
+var _excluded$1H = ["title", "titleId"];
 function _extends$1g() { _extends$1g = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1g.apply(this, arguments); }
 function _objectWithoutProperties$1f(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1g(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1g(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoQplAltBlack = function SvgLogoQplAltBlack(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1f(_ref, _excluded$1D);
+    props = _objectWithoutProperties$1f(_ref, _excluded$1H);
   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
@@ -10355,19 +11090,18 @@ var SvgLogoQplAltBlack = function SvgLogoQplAltBlack(_ref) {
 };
 
 var _path$$;
-var _excluded$1E = ["title", "titleId"];
+var _excluded$1I = ["title", "titleId"];
 function _extends$1h() { _extends$1h = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1h.apply(this, arguments); }
 function _objectWithoutProperties$1g(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1h(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1h(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoQplAltWhite = function SvgLogoQplAltWhite(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1g(_ref, _excluded$1E);
+    props = _objectWithoutProperties$1g(_ref, _excluded$1I);
   return /*#__PURE__*/React.createElement("svg", _extends$1h({
     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
@@ -10377,18 +11111,17 @@ var SvgLogoQplAltWhite = function SvgLogoQplAltWhite(_ref) {
 };
 
 var _path$10, _path2$o, _path3$f, _path4$4, _path5$3;
-var _excluded$1F = ["title", "titleId"];
+var _excluded$1J = ["title", "titleId"];
 function _extends$1i() { _extends$1i = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1i.apply(this, arguments); }
 function _objectWithoutProperties$1h(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1i(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1i(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoQplBlack = function SvgLogoQplBlack(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1h(_ref, _excluded$1F);
+    props = _objectWithoutProperties$1h(_ref, _excluded$1J);
   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
@@ -10414,19 +11147,18 @@ var SvgLogoQplBlack = function SvgLogoQplBlack(_ref) {
 };
 
 var _g$e, _defs$7;
-var _excluded$1G = ["title", "titleId"];
+var _excluded$1K = ["title", "titleId"];
 function _extends$1j() { _extends$1j = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1j.apply(this, arguments); }
 function _objectWithoutProperties$1i(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1j(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1j(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoQplColor = function SvgLogoQplColor(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1i(_ref, _excluded$1G);
+    props = _objectWithoutProperties$1i(_ref, _excluded$1K);
   return /*#__PURE__*/React.createElement("svg", _extends$1j({
     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
@@ -10470,19 +11202,18 @@ var SvgLogoQplColor = function SvgLogoQplColor(_ref) {
 };
 
 var _path$11, _path2$p, _path3$g, _path4$5, _path5$4;
-var _excluded$1H = ["title", "titleId"];
+var _excluded$1L = ["title", "titleId"];
 function _extends$1k() { _extends$1k = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1k.apply(this, arguments); }
 function _objectWithoutProperties$1j(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1k(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1k(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoQplWhite = function SvgLogoQplWhite(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1j(_ref, _excluded$1H);
+    props = _objectWithoutProperties$1j(_ref, _excluded$1L);
   return /*#__PURE__*/React.createElement("svg", _extends$1k({
     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
@@ -10508,19 +11239,18 @@ var SvgLogoQplWhite = function SvgLogoQplWhite(_ref) {
 };
 
 var _path$12, _path2$q, _path3$h, _path4$6, _path5$5;
-var _excluded$1I = ["title", "titleId"];
+var _excluded$1M = ["title", "titleId"];
 function _extends$1l() { _extends$1l = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1l.apply(this, arguments); }
 function _objectWithoutProperties$1k(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1l(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1l(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoReservoirIconColor = function SvgLogoReservoirIconColor(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1k(_ref, _excluded$1I);
+    props = _objectWithoutProperties$1k(_ref, _excluded$1M);
   return /*#__PURE__*/React.createElement("svg", _extends$1l({
     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
@@ -10543,19 +11273,18 @@ var SvgLogoReservoirIconColor = function SvgLogoReservoirIconColor(_ref) {
 };
 
 var _g$f;
-var _excluded$1J = ["title", "titleId"];
+var _excluded$1N = ["title", "titleId"];
 function _extends$1m() { _extends$1m = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1m.apply(this, arguments); }
 function _objectWithoutProperties$1l(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1m(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1m(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoReservoirVerticalColor = function SvgLogoReservoirVerticalColor(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1l(_ref, _excluded$1J);
+    props = _objectWithoutProperties$1l(_ref, _excluded$1N);
   return /*#__PURE__*/React.createElement("svg", _extends$1m({
     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
@@ -10577,18 +11306,17 @@ var SvgLogoReservoirVerticalColor = function SvgLogoReservoirVerticalColor(_ref)
 };
 
 var _path$13, _path2$r, _path3$i, _path4$7, _path5$6;
-var _excluded$1K = ["title", "titleId"];
+var _excluded$1O = ["title", "titleId"];
 function _extends$1n() { _extends$1n = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1n.apply(this, arguments); }
 function _objectWithoutProperties$1m(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1n(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1n(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoSchomburgBlack = function SvgLogoSchomburgBlack(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1m(_ref, _excluded$1K);
+    props = _objectWithoutProperties$1m(_ref, _excluded$1O);
   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
@@ -10606,18 +11334,17 @@ var SvgLogoSchomburgBlack = function SvgLogoSchomburgBlack(_ref) {
 };
 
 var _path$14, _path2$s, _path3$j, _path4$8, _path5$7;
-var _excluded$1L = ["title", "titleId"];
+var _excluded$1P = ["title", "titleId"];
 function _extends$1o() { _extends$1o = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1o.apply(this, arguments); }
 function _objectWithoutProperties$1n(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1o(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1o(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoSchomburgCircleBlack = function SvgLogoSchomburgCircleBlack(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1n(_ref, _excluded$1L);
+    props = _objectWithoutProperties$1n(_ref, _excluded$1P);
   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
@@ -10635,19 +11362,18 @@ var SvgLogoSchomburgCircleBlack = function SvgLogoSchomburgCircleBlack(_ref) {
 };
 
 var _path$15, _path2$t, _path3$k, _path4$9, _path5$8;
-var _excluded$1M = ["title", "titleId"];
+var _excluded$1Q = ["title", "titleId"];
 function _extends$1p() { _extends$1p = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1p.apply(this, arguments); }
 function _objectWithoutProperties$1o(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1p(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1p(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoSchomburgCircleColor = function SvgLogoSchomburgCircleColor(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1o(_ref, _excluded$1M);
+    props = _objectWithoutProperties$1o(_ref, _excluded$1Q);
   return /*#__PURE__*/React.createElement("svg", _extends$1p({
     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
@@ -10670,19 +11396,18 @@ var SvgLogoSchomburgCircleColor = function SvgLogoSchomburgCircleColor(_ref) {
 };
 
 var _path$16, _path2$u, _path3$l, _path4$a, _path5$9;
-var _excluded$1N = ["title", "titleId"];
+var _excluded$1R = ["title", "titleId"];
 function _extends$1q() { _extends$1q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1q.apply(this, arguments); }
 function _objectWithoutProperties$1p(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1q(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1q(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoSchomburgCircleWhite = function SvgLogoSchomburgCircleWhite(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1p(_ref, _excluded$1N);
+    props = _objectWithoutProperties$1p(_ref, _excluded$1R);
   return /*#__PURE__*/React.createElement("svg", _extends$1q({
     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
@@ -10700,19 +11425,18 @@ var SvgLogoSchomburgCircleWhite = function SvgLogoSchomburgCircleWhite(_ref) {
 };
 
 var _path$17, _path2$v, _path3$m, _path4$b, _path5$a, _path6$3, _path7$3;
-var _excluded$1O = ["title", "titleId"];
+var _excluded$1S = ["title", "titleId"];
 function _extends$1r() { _extends$1r = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1r.apply(this, arguments); }
 function _objectWithoutProperties$1q(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1r(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1r(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoSchomburgColor = function SvgLogoSchomburgColor(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1q(_ref, _excluded$1O);
+    props = _objectWithoutProperties$1q(_ref, _excluded$1S);
   return /*#__PURE__*/React.createElement("svg", _extends$1r({
     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
@@ -10741,19 +11465,18 @@ var SvgLogoSchomburgColor = function SvgLogoSchomburgColor(_ref) {
 };
 
 var _path$18, _path2$w, _path3$n, _path4$c, _path5$b;
-var _excluded$1P = ["title", "titleId"];
+var _excluded$1T = ["title", "titleId"];
 function _extends$1s() { _extends$1s = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1s.apply(this, arguments); }
 function _objectWithoutProperties$1r(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1s(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1s(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoSchomburgWhite = function SvgLogoSchomburgWhite(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1r(_ref, _excluded$1P);
+    props = _objectWithoutProperties$1r(_ref, _excluded$1T);
   return /*#__PURE__*/React.createElement("svg", _extends$1s({
     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
@@ -10771,18 +11494,17 @@ var SvgLogoSchomburgWhite = function SvgLogoSchomburgWhite(_ref) {
 };
 
 var _g$g, _defs$8;
-var _excluded$1Q = ["title", "titleId"];
+var _excluded$1U = ["title", "titleId"];
 function _extends$1t() { _extends$1t = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1t.apply(this, arguments); }
 function _objectWithoutProperties$1s(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1t(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1t(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoSimplyeBlack = function SvgLogoSimplyeBlack(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1s(_ref, _excluded$1Q);
+    props = _objectWithoutProperties$1s(_ref, _excluded$1U);
   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
@@ -10804,19 +11526,18 @@ var SvgLogoSimplyeBlack = function SvgLogoSimplyeBlack(_ref) {
 };
 
 var _g$h, _defs$9;
-var _excluded$1R = ["title", "titleId"];
+var _excluded$1V = ["title", "titleId"];
 function _extends$1u() { _extends$1u = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1u.apply(this, arguments); }
 function _objectWithoutProperties$1t(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1u(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1u(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoSimplyeWhite = function SvgLogoSimplyeWhite(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1t(_ref, _excluded$1R);
+    props = _objectWithoutProperties$1t(_ref, _excluded$1V);
   return /*#__PURE__*/React.createElement("svg", _extends$1u({
     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
@@ -10837,19 +11558,18 @@ var SvgLogoSimplyeWhite = function SvgLogoSimplyeWhite(_ref) {
 };
 
 var _g$i, _defs$a;
-var _excluded$1S = ["title", "titleId"];
+var _excluded$1W = ["title", "titleId"];
 function _extends$1v() { _extends$1v = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1v.apply(this, arguments); }
 function _objectWithoutProperties$1u(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1v(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1v(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoSimplyeColor = function SvgLogoSimplyeColor(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1u(_ref, _excluded$1S);
+    props = _objectWithoutProperties$1u(_ref, _excluded$1W);
   return /*#__PURE__*/React.createElement("svg", _extends$1v({
     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
@@ -10877,18 +11597,17 @@ var SvgLogoSimplyeColor = function SvgLogoSimplyeColor(_ref) {
 };
 
 var _path$19;
-var _excluded$1T = ["title", "titleId"];
+var _excluded$1X = ["title", "titleId"];
 function _extends$1w() { _extends$1w = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1w.apply(this, arguments); }
 function _objectWithoutProperties$1v(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1w(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1w(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoSnflBlack = function SvgLogoSnflBlack(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1v(_ref, _excluded$1T);
+    props = _objectWithoutProperties$1v(_ref, _excluded$1X);
   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
@@ -10898,19 +11617,18 @@ var SvgLogoSnflBlack = function SvgLogoSnflBlack(_ref) {
 };
 
 var _path$1a;
-var _excluded$1U = ["title", "titleId"];
+var _excluded$1Y = ["title", "titleId"];
 function _extends$1x() { _extends$1x = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1x.apply(this, arguments); }
 function _objectWithoutProperties$1w(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1x(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1x(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoSnflWhite = function SvgLogoSnflWhite(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1w(_ref, _excluded$1U);
+    props = _objectWithoutProperties$1w(_ref, _excluded$1Y);
   return /*#__PURE__*/React.createElement("svg", _extends$1x({
     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
@@ -10920,19 +11638,18 @@ var SvgLogoSnflWhite = function SvgLogoSnflWhite(_ref) {
 };
 
 var _path$1b, _path2$x, _path3$o, _path4$d, _path5$c, _path6$4, _path7$4, _path8$3, _path9$3, _path10$3, _path11$3, _path12$3, _path13$3, _path14$2, _path15$2, _path16, _path17, _path18, _path19, _path20, _path21, _path22, _path23, _path24, _path25, _path26, _path27, _path28, _path29, _path30, _path31, _path32, _path33, _path34, _path35, _path36, _path37, _path38, _path39, _path40, _path41, _path42, _path43, _path44, _path45, _path46, _path47, _path48, _path49, _path50, _path51, _path52, _path53, _path54, _path55;
-var _excluded$1V = ["title", "titleId"];
+var _excluded$1Z = ["title", "titleId"];
 function _extends$1y() { _extends$1y = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1y.apply(this, arguments); }
 function _objectWithoutProperties$1x(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1y(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1y(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoTreasuresColor = function SvgLogoTreasuresColor(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1x(_ref, _excluded$1V);
+    props = _objectWithoutProperties$1x(_ref, _excluded$1Z);
   return /*#__PURE__*/React.createElement("svg", _extends$1y({
     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
@@ -11105,19 +11822,18 @@ var SvgLogoTreasuresColor = function SvgLogoTreasuresColor(_ref) {
 };
 
 var _path$1c, _path2$y, _path3$p, _path4$e, _path5$d, _path6$5, _path7$5, _path8$4, _path9$4, _path10$4, _path11$4, _path12$4, _path13$4, _path14$3, _path15$3, _path16$1, _path17$1, _path18$1, _path19$1, _path20$1, _path21$1, _path22$1, _path23$1, _path24$1, _path25$1, _path26$1, _path27$1, _path28$1, _path29$1, _path30$1, _path31$1, _path32$1, _path33$1, _path34$1, _path35$1, _path36$1, _path37$1, _path38$1, _path39$1, _path40$1, _path41$1, _path42$1, _path43$1, _path44$1, _path45$1, _path46$1, _path47$1, _path48$1, _path49$1, _path50$1, _path51$1, _path52$1, _path53$1, _path54$1, _path55$1;
-var _excluded$1W = ["title", "titleId"];
+var _excluded$1_ = ["title", "titleId"];
 function _extends$1z() { _extends$1z = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1z.apply(this, arguments); }
 function _objectWithoutProperties$1y(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1z(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1z(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var SvgLogoTreasuresColorNegative = function SvgLogoTreasuresColorNegative(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1y(_ref, _excluded$1W);
+    props = _objectWithoutProperties$1y(_ref, _excluded$1_);
   return /*#__PURE__*/React.createElement("svg", _extends$1z({
     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
@@ -11340,7 +12056,7 @@ var logoSvgs = {
   treasuresColorNegative: SvgLogoTreasuresColorNegative
 };
 
-var _excluded$1X = ["children", "className", "decorative", "id", "name", "size", "title"];
+var _excluded$1$ = ["children", "className", "decorative", "id", "name", "size", "title"];
 /**
  * The `Logo` component renders SVG-based logos and color variants that are
  * commonly used by the New York Public Library.
@@ -11357,7 +12073,7 @@ var Logo$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (
     size = _props$size === void 0 ? "medium" : _props$size,
     _props$title = props.title,
     title = _props$title === void 0 ? name + " logo" : _props$title,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$1X);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$1$);
   var styles = react.useStyleConfig("Logo", {
     size: size
   });
@@ -11458,7 +12174,7 @@ var link$1 = {
   }]
 };
 
-var _excluded$1Y = ["className", "id"];
+var _excluded$20 = ["className", "id"];
 /**
  * This `Footer` component renders the NYPL-branded footer elements such
  * as navigational NYPL.org links, social media links, copyright, and
@@ -11468,7 +12184,7 @@ var Footer$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function
   var className = _ref.className,
     _ref$id = _ref.id,
     id = _ref$id === void 0 ? "footer" : _ref$id,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1Y);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$20);
   var styles = react.useMultiStyleConfig("Footer", {});
   var nyplLinks = link$1.nyplLinks.map(function (links, index) {
     return React__default.createElement(List$1, {
@@ -11492,266 +12208,101 @@ var Footer$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function
     }, React__default.createElement(Icon, {
       "aria-label": link.title,
       decorative: false,
-      name: link.iconName,
-      size: "small",
-      title: link.title
-    }));
-  });
-  return React__default.createElement(react.Box, Object.assign({
-    as: "footer",
-    className: className,
-    id: id,
-    ref: ref,
-    role: "contentinfo"
-  }, rest, {
-    __css: styles
-  }), React__default.createElement(react.Box, {
-    __css: styles.listsContainer
-  }, React__default.createElement(List$1, {
-    "data-testid": "text-links",
-    listItems: nyplLinks,
-    noStyling: true,
-    type: "ul",
-    __css: styles.footerLinksList
-  }), React__default.createElement(List$1, {
-    "data-testid": "social-media-links",
-    listItems: socialLinks,
-    noStyling: true,
-    type: "ul",
-    __css: styles.socialMediaList
-  })), React__default.createElement(react.Box, {
-    __css: styles.nyplInfoContainer
-  }, React__default.createElement(react.Box, null, React__default.createElement(Image, {
-    alt: "NYPL Main Building Facade",
-    src: "https://cdn-d8.nypl.org/s3fs-public/2020-05/NYPL_MainFacadeRev2Cam2.png"
-  })), React__default.createElement(react.Box, {
-    __css: styles.copyright
-  }, React__default.createElement("p", null, "\xA9 The New York Public Library, ", new Date().getFullYear()), React__default.createElement("p", null, "The New York Public Library is a 501(c)(3) | EIN 13-1887440"))), React__default.createElement(react.Box, {
-    __css: styles.logoContainer
-  }, React__default.createElement(Logo$1, {
-    "aria-label": "The New York Public Library",
-    decorative: false,
-    name: "nyplTextWhite",
-    size: "small",
-    title: "The New York Public Library"
-  })));
-}));
-
-var _excluded$1Z = ["align", "className"];
-var HorizontalRule$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var align = props.align,
-    className = props.className,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$1Z);
-  var styles = react.useStyleConfig("HorizontalRule", {
-    align: align
-  });
-  var finalStyles = _extends({}, styles, {
-    height: "2px",
-    width: "100%"
-  });
-  return React__default.createElement(react.Box, Object.assign({
-    as: "hr",
-    className: className,
-    ref: ref,
-    __css: finalStyles
-  }, rest));
-}));
-
-var _excluded$1_ = ["className", "id", "target"];
-/**
- * SkipNavigation is a component that is used to provide a navigational list of
- * links. The first link is used to skip to the main content of the page using
- * the `#mainContent` id, and the second link points to accessibility information
- * on NYPL.org. These links are visually hidden but can be read by screenreaders.
- */
-var SkipNavigation$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var className = props.className,
-    id = props.id,
-    _props$target = props.target,
-    target = _props$target === void 0 ? "#mainContent" : _props$target,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$1_);
-  var styles = react.useStyleConfig("SkipNavigation");
-  return React__default.createElement(react.Box, Object.assign({
-    as: "nav",
-    "aria-label": "Skip Navigation",
-    className: className,
-    id: id,
-    ref: ref,
-    __css: styles
-  }, rest), React__default.createElement(List$1, {
-    inline: true,
-    noStyling: true,
-    type: "ul"
-  }, React__default.createElement("li", null, React__default.createElement(Link, {
-    href: target
-  }, "Skip to Main Content")), React__default.createElement("li", null, React__default.createElement(Link, {
-    href: "https://www.nypl.org/accessibility"
-  }, "Click to learn about accessibility at the Library"))));
-}));
-
-var _excluded$1$ = ["className", "helperText", "id", "invalidText", "isChecked", "isDisabled", "isInvalid", "isRequired", "labelText", "name", "onChange", "showHelperInvalidText", "showLabel", "value"];
-var Radio$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var className = props.className,
-    helperText = props.helperText,
-    id = props.id,
-    invalidText = props.invalidText,
-    isChecked = props.isChecked,
-    _props$isDisabled = props.isDisabled,
-    isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
-    _props$isInvalid = props.isInvalid,
-    isInvalid = _props$isInvalid === void 0 ? false : _props$isInvalid,
-    _props$isRequired = props.isRequired,
-    isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
-    labelText = props.labelText,
-    name = props.name,
-    onChange = props.onChange,
-    _props$showHelperInva = props.showHelperInvalidText,
-    showHelperInvalidText = _props$showHelperInva === void 0 ? true : _props$showHelperInva,
-    _props$showLabel = props.showLabel,
-    showLabel = _props$showLabel === void 0 ? true : _props$showLabel,
-    value = props.value,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$1$);
-  var styles = react.useMultiStyleConfig("Radio", {
-    showLabel: showLabel
-  });
-  var wrapperStyles = react.useStyleConfig("RadioWrapper");
-  var footnote = isInvalid ? invalidText : helperText;
-  var ariaAttributes = getAriaAttrs({
-    footnote: footnote,
-    id: id,
-    labelText: labelText,
-    name: "Radio",
-    showLabel: showLabel
-  });
-  // We can't use the aria-label because of how Chakra renders its
-  // Radio component. Instead, we'll visually hide the label.
-  delete ariaAttributes["aria-label"];
-  if (!id) {
-    console.warn("NYPL Reservoir Radio: This component's required `id` prop was not passed.");
-  }
-  return React__default.createElement(ComponentWrapper, Object.assign({
-    helperText: helperText,
-    helperTextStyles: styles.helperErrorText,
-    id: id,
-    invalidText: invalidText,
-    isInvalid: isInvalid,
-    showHelperInvalidText: showHelperInvalidText,
-    sx: wrapperStyles
-  }, rest), React__default.createElement(react.Radio, Object.assign({
-    className: className,
-    id: id,
-    isChecked: isChecked,
-    isDisabled: isDisabled,
-    isInvalid: isInvalid,
-    isRequired: isRequired,
-    name: name,
-    onChange: onChange,
-    ref: ref,
-    value: value,
-    alignItems: "flex-start",
-    sx: styles
-  }, ariaAttributes), React__default.createElement(react.Box, {
-    as: "span",
-    __css: showLabel ? {} : styles.hiddenLabel
-  }, labelText)));
-}));
-
-var _excluded$20 = ["children", "className", "defaultValue", "helperText", "id", "invalidText", "isDisabled", "isFullWidth", "isInvalid", "isRequired", "labelText", "layout", "name", "onChange", "showHelperInvalidText", "showLabel", "showRequiredLabel"];
-/**
- * RadioGroup is a wrapper for DS `Radio` components that renders as a fieldset
- * HTML element along with optional helper text. The `name` prop is essential
- * for this form group element and is not needed for individual DS `Radio`
- * components when `RadioGroup` is used.
- */
-var RadioGroup$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var children = props.children,
-    _props$className = props.className,
-    className = _props$className === void 0 ? "" : _props$className,
-    defaultValue = props.defaultValue,
-    helperText = props.helperText,
-    id = props.id,
-    invalidText = props.invalidText,
-    _props$isDisabled = props.isDisabled,
-    isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
-    _props$isFullWidth = props.isFullWidth,
-    isFullWidth = _props$isFullWidth === void 0 ? false : _props$isFullWidth,
-    _props$isInvalid = props.isInvalid,
-    isInvalid = _props$isInvalid === void 0 ? false : _props$isInvalid,
-    _props$isRequired = props.isRequired,
-    isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
-    labelText = props.labelText,
-    _props$layout = props.layout,
-    layout = _props$layout === void 0 ? "column" : _props$layout,
-    name = props.name,
-    _onChange = props.onChange,
-    _props$showHelperInva = props.showHelperInvalidText,
-    showHelperInvalidText = _props$showHelperInva === void 0 ? true : _props$showHelperInva,
-    _props$showLabel = props.showLabel,
-    showLabel = _props$showLabel === void 0 ? true : _props$showLabel,
-    _props$showRequiredLa = props.showRequiredLabel,
-    showRequiredLabel = _props$showRequiredLa === void 0 ? true : _props$showRequiredLa,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$20);
-  var _React$useState = React__default.useState(defaultValue),
-    value = _React$useState[0],
-    setValue = _React$useState[1];
-  var footnote = isInvalid ? invalidText : helperText;
-  var spacingProp = layout === "column" ? spacing.s : spacing.l;
-  var newChildren = [];
-  // Get the Chakra-based styles for the custom elements in this component.
-  var styles = react.useMultiStyleConfig("RadioGroup", {
-    isFullWidth: isFullWidth
-  });
-  // Props for the `ChakraRadioGroup` component.
-  var radioGroupProps = {
-    "aria-label": !showLabel ? labelText : undefined,
-    name: name,
-    onChange: function onChange(selected) {
-      setValue(selected);
-      _onChange && _onChange(selected);
-    },
-    ref: ref,
-    value: value
-  };
-  if (!id) {
-    console.warn("NYPL Reservoir RadioGroup: This component's required `id` prop was not passed.");
-  }
-  // Go through the Radio children and update them as needed.
-  React__default.Children.map(children, function (child, key) {
-    if ((child == null ? void 0 : child.type) !== Radio$1) {
-      var _child$props, _child$props2;
-      // Special case for Storybook MDX documentation.
-      if ((_child$props = child.props) != null && _child$props.mdxType && ((_child$props2 = child.props) == null ? void 0 : _child$props2.mdxType) === "Radio") ; else {
-        console.warn("NYPL Reservoir RadioGroup: Only `Radio` components are allowed " + "inside the `RadioGroup` component.");
-      }
-    }
-    if (child !== undefined && child !== null) {
-      var newProps = {
-        key: key,
-        isDisabled: isDisabled,
-        isInvalid: isInvalid,
-        isRequired: isRequired
-      };
-      newChildren.push(React__default.cloneElement(child, newProps));
-    }
+      name: link.iconName,
+      size: "small",
+      title: link.title
+    }));
   });
-  return React__default.createElement(Fieldset, Object.assign({
+  return React__default.createElement(react.Box, Object.assign({
+    as: "footer",
     className: className,
-    id: "radio-group-" + id,
-    isLegendHidden: !showLabel,
-    isRequired: isRequired,
-    legendText: labelText,
-    showRequiredLabel: showRequiredLabel
+    id: id,
+    ref: ref,
+    role: "contentinfo"
   }, rest, {
     __css: styles
-  }), React__default.createElement(react.RadioGroup, Object.assign({}, radioGroupProps), React__default.createElement(react.Stack, {
-    direction: [layout],
-    spacing: spacingProp
-  }, newChildren)), footnote && showHelperInvalidText && React__default.createElement(HelperErrorText, {
-    id: id + "-helperErrorText",
-    isInvalid: isInvalid,
-    text: footnote,
-    __css: styles.helperErrorText
-  }));
+  }), React__default.createElement(react.Box, {
+    __css: styles.listsContainer
+  }, React__default.createElement(List$1, {
+    "data-testid": "text-links",
+    listItems: nyplLinks,
+    noStyling: true,
+    type: "ul",
+    __css: styles.footerLinksList
+  }), React__default.createElement(List$1, {
+    "data-testid": "social-media-links",
+    listItems: socialLinks,
+    noStyling: true,
+    type: "ul",
+    __css: styles.socialMediaList
+  })), React__default.createElement(react.Box, {
+    __css: styles.nyplInfoContainer
+  }, React__default.createElement(react.Box, null, React__default.createElement(Image, {
+    alt: "NYPL Main Building Facade",
+    src: "https://cdn-d8.nypl.org/s3fs-public/2020-05/NYPL_MainFacadeRev2Cam2.png"
+  })), React__default.createElement(react.Box, {
+    __css: styles.copyright
+  }, React__default.createElement("p", null, "\xA9 The New York Public Library, ", new Date().getFullYear()), React__default.createElement("p", null, "The New York Public Library is a 501(c)(3) | EIN 13-1887440"))), React__default.createElement(react.Box, {
+    __css: styles.logoContainer
+  }, React__default.createElement(Logo$1, {
+    "aria-label": "The New York Public Library",
+    decorative: false,
+    name: "nyplTextWhite",
+    size: "small",
+    title: "The New York Public Library"
+  })));
+}));
+
+var _excluded$21 = ["align", "className"];
+var HorizontalRule$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var align = props.align,
+    className = props.className,
+    rest = _objectWithoutPropertiesLoose(props, _excluded$21);
+  var styles = react.useStyleConfig("HorizontalRule", {
+    align: align
+  });
+  var finalStyles = _extends({}, styles, {
+    height: "2px",
+    width: "100%"
+  });
+  return React__default.createElement(react.Box, Object.assign({
+    as: "hr",
+    className: className,
+    ref: ref,
+    __css: finalStyles
+  }, rest));
+}));
+
+var _excluded$22 = ["className", "id", "target"];
+/**
+ * SkipNavigation is a component that is used to provide a navigational list of
+ * links. The first link is used to skip to the main content of the page using
+ * the `#mainContent` id, and the second link points to accessibility information
+ * on NYPL.org. These links are visually hidden but can be read by screenreaders.
+ */
+var SkipNavigation$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var className = props.className,
+    id = props.id,
+    _props$target = props.target,
+    target = _props$target === void 0 ? "#mainContent" : _props$target,
+    rest = _objectWithoutPropertiesLoose(props, _excluded$22);
+  var styles = react.useStyleConfig("SkipNavigation");
+  return React__default.createElement(react.Box, Object.assign({
+    as: "nav",
+    "aria-label": "Skip Navigation",
+    className: className,
+    id: id,
+    ref: ref,
+    __css: styles
+  }, rest), React__default.createElement(List$1, {
+    inline: true,
+    noStyling: true,
+    type: "ul"
+  }, React__default.createElement("li", null, React__default.createElement(Link, {
+    href: target
+  }, "Skip to Main Content")), React__default.createElement("li", null, React__default.createElement(Link, {
+    href: "https://www.nypl.org/accessibility"
+  }, "Click to learn about accessibility at the Library"))));
 }));
 
 /*eslint no-useless-escape: 0 */
@@ -12652,227 +13203,69 @@ var HeaderMobileNav$1 = /*#__PURE__*/react.chakra(function () {
     href: upperNavLinks.donate.href,
     gridColumn: "1 / span 2",
     onClick: function onClick() {
-      return gaUtils.trackEvent("Donate", "Mobile Buttons Donate");
-    }
-  }, upperNavLinks.donate.text.toUpperCase())));
-});
-
-/**
- * This is the button that will render the navigational list of links
- * when it is clicked and keep focus trapped within the menu.
- */
-var HeaderMobileNavButton$1 = /*#__PURE__*/react.chakra(function () {
-  var _useState = React.useState(false),
-    isOpen = _useState[0],
-    setIsOpen = _useState[1];
-  var styles = react.useStyleConfig("HeaderMobileNavButton", {
-    isOpen: isOpen
-  });
-  var ref = React.useRef(null);
-  useCloseDropDown(setIsOpen, ref);
-  return React__default.createElement(react.Box, {
-    ref: ref
-  }, React__default.createElement(FocusLock, {
-    isDisabled: !isOpen
-  }, React__default.createElement(Button, {
-    "aria-haspopup": "true",
-    "aria-label": isOpen ? "Close Navigation" : "Open Navigation",
-    "aria-expanded": isOpen ? true : null,
-    buttonType: "text",
-    id: "mobileNav-btn",
-    onClick: function onClick() {
-      gaUtils.trackEvent("Click", "Mobile mobileMenu");
-      setIsOpen(!isOpen);
-    },
-    __css: styles
-  }, React__default.createElement(Icon, {
-    name: isOpen ? "close" : "utilityHamburger",
-    size: "large"
-  })), isOpen && React__default.createElement(HeaderMobileNav$1, null)));
-});
-
-/**
- * This component renders the mobile list of icon buttons for
- * logging in, searching, and navigating on NYPL.org.
- */
-var HeaderMobileIconNav$1 = /*#__PURE__*/react.chakra(function () {
-  var styles = react.useStyleConfig("HeaderMobileIconNav");
-  return React__default.createElement(react.Flex, {
-    sx: styles
-  }, React__default.createElement(HeaderLoginButton$1, {
-    isMobile: true
-  }), React__default.createElement(Link, {
-    "aria-label": "NYPL Locations Near Me",
-    href: "https://nypl.org/locations",
-    onClick: function onClick() {
-      return gaUtils.trackEvent("Click", "Mobile Locations Button");
-    }
-  }, React__default.createElement(Icon, {
-    name: "locator",
-    size: "large",
-    title: "NYPL Locator"
-  })), React__default.createElement(HeaderSearchButton$1, {
-    isMobile: true
-  }), React__default.createElement(HeaderMobileNavButton$1, null));
-});
-
-var _excluded$21 = ["children", "icon", "id", "isCentered", "notificationType"],
-  _excluded2$5 = ["alignText", "children", "icon", "notificationType"],
-  _excluded3$3 = ["ariaLabel", "className", "dismissible", "icon", "id", "isCentered", "noMargin", "notificationContent", "notificationHeading", "notificationType", "showIcon"];
-/**
- * NotificationHeading child-component.
- */
-var NotificationHeading$1 = /*#__PURE__*/react.chakra(function (props) {
-  var children = props.children,
-    icon = props.icon,
-    id = props.id,
-    isCentered = props.isCentered,
-    notificationType = props.notificationType,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$21);
-  var styles = react.useMultiStyleConfig("NotificationHeading", {
-    icon: icon,
-    isCentered: isCentered,
-    notificationType: notificationType
-  });
-  return React__default.createElement(react.Box, Object.assign({
-    as: "header",
-    __css: styles
-  }, rest), icon, React__default.createElement(Heading, {
-    id: id + "-heading",
-    level: "four",
-    __css: styles.heading
-  }, children));
-});
-/**
- * NotificationContent child-component.
- */
-var NotificationContent$1 = /*#__PURE__*/react.chakra(function (props) {
-  var alignText = props.alignText,
-    children = props.children,
-    icon = props.icon,
-    notificationType = props.notificationType,
-    rest = _objectWithoutPropertiesLoose(props, _excluded2$5);
-  var styles = react.useMultiStyleConfig("NotificationContent", {
-    alignText: alignText,
-    icon: icon,
-    notificationType: notificationType
-  });
-  return React__default.createElement(react.Box, Object.assign({
-    __css: styles
-  }, rest), icon, React__default.createElement(react.Box, {
-    __css: styles.content
-  }, children));
-});
-/**
- * Component used to present users with three different levels of notifications:
- * standard, announcement, and warning.
- */
-var Notification$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var ariaLabel = props.ariaLabel,
-    className = props.className,
-    _props$dismissible = props.dismissible,
-    dismissible = _props$dismissible === void 0 ? false : _props$dismissible,
-    icon = props.icon,
-    id = props.id,
-    _props$isCentered = props.isCentered,
-    isCentered = _props$isCentered === void 0 ? false : _props$isCentered,
-    _props$noMargin = props.noMargin,
-    noMargin = _props$noMargin === void 0 ? false : _props$noMargin,
-    notificationContent = props.notificationContent,
-    notificationHeading = props.notificationHeading,
-    _props$notificationTy = props.notificationType,
-    notificationType = _props$notificationTy === void 0 ? "standard" : _props$notificationTy,
-    _props$showIcon = props.showIcon,
-    showIcon = _props$showIcon === void 0 ? true : _props$showIcon,
-    rest = _objectWithoutPropertiesLoose(props, _excluded3$3);
-  var _useState = React.useState(true),
-    isOpen = _useState[0],
-    setIsOpen = _useState[1];
-  var handleClose = function handleClose() {
-    return setIsOpen(false);
-  };
-  var styles = react.useMultiStyleConfig("Notification", {
-    dismissible: dismissible,
-    isCentered: isCentered,
-    noMargin: noMargin,
-    notificationType: notificationType
-  });
-  var iconElement = function iconElement() {
-    var baseIconProps = {
-      size: "large",
-      __css: styles.icon
-    };
-    // If the icon should not display, return undefined.
-    if (!showIcon) {
-      return undefined;
+      return gaUtils.trackEvent("Donate", "Mobile Buttons Donate");
     }
-    // If a custom icon is passed, add specific `Notification` styles.
-    if (icon) return React__default.cloneElement(icon, _extends({
-      id: id + "-custom-notification-icon"
-    }, baseIconProps));
-    var iconProps = {
-      announcement: {
-        color: "section.research.secondary",
-        name: "speakerNotes",
-        title: "Notification announcement icon"
-      },
-      standard: {
-        color: "ui.black",
-        name: "alertNotificationImportant",
-        title: "Notification standard icon"
-      },
-      warning: {
-        color: "brand.primary",
-        name: "errorFilled",
-        title: "Notification warning icon"
-      }
-    };
-    return React__default.createElement(Icon, Object.assign({
-      id: id + "-notification-icon"
-    }, iconProps[notificationType], baseIconProps));
-  };
-  var dismissibleButton = dismissible && React__default.createElement(Button, {
-    "aria-label": "Close the notification",
+  }, upperNavLinks.donate.text.toUpperCase())));
+});
+
+/**
+ * This is the button that will render the navigational list of links
+ * when it is clicked and keep focus trapped within the menu.
+ */
+var HeaderMobileNavButton$1 = /*#__PURE__*/react.chakra(function () {
+  var _useState = React.useState(false),
+    isOpen = _useState[0],
+    setIsOpen = _useState[1];
+  var styles = react.useStyleConfig("HeaderMobileNavButton", {
+    isOpen: isOpen
+  });
+  var ref = React.useRef(null);
+  useCloseDropDown(setIsOpen, ref);
+  return React__default.createElement(react.Box, {
+    ref: ref
+  }, React__default.createElement(FocusLock, {
+    isDisabled: !isOpen
+  }, React__default.createElement(Button, {
+    "aria-haspopup": "true",
+    "aria-label": isOpen ? "Close Navigation" : "Open Navigation",
+    "aria-expanded": isOpen ? true : null,
     buttonType: "text",
-    id: id + "-notification-dismissible-button",
-    onClick: handleClose,
-    __css: styles.dismissibleButton
+    id: "mobileNav-btn",
+    onClick: function onClick() {
+      gaUtils.trackEvent("Click", "Mobile mobileMenu");
+      setIsOpen(!isOpen);
+    },
+    __css: styles
   }, React__default.createElement(Icon, {
-    id: id + "-dismissible-notification-icon",
-    name: "close",
+    name: isOpen ? "close" : "utilityHamburger",
+    size: "large"
+  })), isOpen && React__default.createElement(HeaderMobileNav$1, null)));
+});
+
+/**
+ * This component renders the mobile list of icon buttons for
+ * logging in, searching, and navigating on NYPL.org.
+ */
+var HeaderMobileIconNav$1 = /*#__PURE__*/react.chakra(function () {
+  var styles = react.useStyleConfig("HeaderMobileIconNav");
+  return React__default.createElement(react.Flex, {
+    sx: styles
+  }, React__default.createElement(HeaderLoginButton$1, {
+    isMobile: true
+  }), React__default.createElement(Link, {
+    "aria-label": "NYPL Locations Near Me",
+    href: "https://nypl.org/locations",
+    onClick: function onClick() {
+      return gaUtils.trackEvent("Click", "Mobile Locations Button");
+    }
+  }, React__default.createElement(Icon, {
+    name: "locator",
     size: "large",
-    title: "Notification close icon"
-  }));
-  var iconElem = iconElement();
-  var childHeading = notificationHeading && React__default.createElement(NotificationHeading$1, {
-    icon: iconElem,
-    id: id,
-    isCentered: isCentered,
-    notificationType: notificationType
-  }, notificationHeading);
-  // Specific alignment styles for the content.
-  var alignText = !!(childHeading && showIcon && (!!icon || !isCentered));
-  var childContent = React__default.createElement(NotificationContent$1, {
-    alignText: alignText,
-    icon: !childHeading ? iconElem : undefined,
-    notificationType: notificationType
-  }, notificationContent);
-  // If the `Notification` is closed, don't render anything.
-  if (!isOpen) {
-    return null;
-  }
-  return React__default.createElement(react.Box, Object.assign({
-    "aria-label": ariaLabel,
-    as: "aside",
-    className: className,
-    "data-type": notificationType,
-    id: id,
-    ref: ref,
-    __css: styles
-  }, rest), React__default.createElement(react.Box, {
-    __css: styles.container
-  }, childHeading, childContent), dismissibleButton);
-}));
+    title: "NYPL Locator"
+  })), React__default.createElement(HeaderSearchButton$1, {
+    isMobile: true
+  }), React__default.createElement(HeaderMobileNavButton$1, null));
+});
 
 /**
  * The HeaderSitewideAlerts component makes an API request to an NYPL API
@@ -13199,7 +13592,7 @@ var Header$1 = /*#__PURE__*/react.chakra(function (_ref) {
   }))));
 });
 
-var _excluded$22 = ["backgroundColor", "backgroundImageSrc", "foregroundColor", "heading", "heroType", "imageProps", "locationDetails", "subHeaderText"];
+var _excluded$23 = ["backgroundColor", "backgroundImageSrc", "foregroundColor", "heading", "heroType", "imageProps", "locationDetails", "subHeaderText"];
 // Only used for internal purposes.
 var heroSecondaryTypes = ["secondary", "secondaryBooksAndMore", "secondaryLocations", "secondaryResearch", "secondaryWhatsOn"];
 var Hero$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -13215,7 +13608,7 @@ var Hero$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (
     } : _props$imageProps,
     locationDetails = props.locationDetails,
     subHeaderText = props.subHeaderText,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$22);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$23);
   var styles = react.useMultiStyleConfig("Hero", {
     variant: heroType
   });
@@ -13304,7 +13697,7 @@ var Hero$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (
   }
 });
 
-var _excluded$23 = ["bodyContent", "closeButtonLabel", "headingText", "id", "isOpen", "onClose"],
+var _excluded$24 = ["bodyContent", "closeButtonLabel", "headingText", "id", "isOpen", "onClose"],
   _excluded2$6 = ["buttonText", "id", "modalProps"],
   _excluded3$4 = ["bodyContent", "closeButtonLabel", "headingText", "id"];
 var BaseModal = /*#__PURE__*/react.chakra(function (_ref) {
@@ -13315,7 +13708,7 @@ var BaseModal = /*#__PURE__*/react.chakra(function (_ref) {
     id = _ref.id,
     isOpen = _ref.isOpen,
     onClose = _ref.onClose,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$23);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$24);
   var xlarge = "xl";
   var fullSize = "full";
   var _useNYPLBreakpoints = useNYPLBreakpoints(),
@@ -13396,7 +13789,7 @@ function useModal() {
   };
 }
 
-var _excluded$24 = ["className", "currentPage", "getPageHref", "id", "initialPage", "onPageChange", "pageCount"];
+var _excluded$25 = ["className", "currentPage", "getPageHref", "id", "initialPage", "onPageChange", "pageCount"];
 /**
  * A component that provides a navigational list of page items.
  */
@@ -13409,7 +13802,7 @@ var Pagination$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(func
     initialPage = _props$initialPage === void 0 ? 1 : _props$initialPage,
     onPageChange = props.onPageChange,
     pageCount = props.pageCount,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$24);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$25);
   var refCurrentPage = React.useRef(currentPage);
   var _useState = React.useState(initialPage),
     selectedPage = _useState[0],
@@ -13599,7 +13992,7 @@ var Pagination$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(func
   }, previousLiLink, getPaginationNumbers(selectedPage), nextLiLink));
 }));
 
-var _excluded$25 = ["darkMode", "id", "indicatorType", "isIndeterminate", "labelText", "showLabel", "size", "value"];
+var _excluded$26 = ["darkMode", "id", "indicatorType", "isIndeterminate", "labelText", "showLabel", "size", "value"];
 /**
  * A component that displays a progress status for any task that takes a long
  * time to complete or consists of multiple steps. Examples include downloading,
@@ -13620,7 +14013,7 @@ var ProgressIndicator$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardR
     size = _props$size === void 0 ? "default" : _props$size,
     _props$value = props.value,
     value = _props$value === void 0 ? 0 : _props$value,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$25);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$26);
   var styles = react.useMultiStyleConfig("ProgressIndicator", {
     darkMode: darkMode,
     size: size
@@ -13679,7 +14072,7 @@ var ProgressIndicator$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardR
   }, rest), progressComponent(indicatorType));
 }));
 
-var _excluded$26 = ["children", "className", "helperText", "id", "invalidText", "isDisabled", "isInvalid", "isRequired", "labelPosition", "labelText", "name", "onChange", "placeholder", "selectType", "showHelperInvalidText", "showLabel", "showRequiredLabel", "value"];
+var _excluded$27 = ["children", "className", "helperText", "id", "invalidText", "isDisabled", "isInvalid", "isRequired", "labelPosition", "labelText", "name", "onChange", "placeholder", "selectType", "showHelperInvalidText", "showLabel", "showRequiredLabel", "value"];
 /**
  * Component that renders Chakra's `Select` component along with an accessible
  * `Label` and optional `HelperErrorText` component.
@@ -13712,7 +14105,7 @@ var Select$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function
     showRequiredLabel = _props$showRequiredLa === void 0 ? true : _props$showRequiredLa,
     _props$value = props.value,
     value = _props$value === void 0 ? "" : _props$value,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$26);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$27);
   var _useState = React.useState(0),
     labelWidth = _useState[0],
     setLabelWidth = _useState[1];
@@ -13794,7 +14187,7 @@ var Select$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function
   }), children)));
 }));
 
-var _excluded$27 = ["action", "buttonOnClick", "className", "descriptionText", "headingText", "helperText", "id", "invalidText", "isDisabled", "isInvalid", "isRequired", "labelText", "method", "noBrandButtonType", "onSubmit", "selectProps", "textInputElement", "textInputProps"];
+var _excluded$28 = ["action", "buttonOnClick", "className", "descriptionText", "headingText", "helperText", "id", "invalidText", "isDisabled", "isInvalid", "isRequired", "labelText", "method", "noBrandButtonType", "onSubmit", "selectProps", "textInputElement", "textInputProps"];
 /**
  * Renders a wrapper `form` element to be used with `Select` (optional),
  * `Input`, and `Button` components together.
@@ -13822,7 +14215,7 @@ var SearchBar$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(funct
     selectProps = props.selectProps,
     textInputElement = props.textInputElement,
     textInputProps = props.textInputProps,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$27);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$28);
   var styles = react.useMultiStyleConfig("SearchBar", {});
   var stateProps = {
     helperText: "",
@@ -13914,7 +14307,7 @@ var SearchBar$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(funct
   }, selectElem, textInputElem, buttonElem));
 }));
 
-var _excluded$28 = ["className", "contentSize", "headingSize", "imageAspectRatio", "isBordered", "layout", "showButton", "showContent", "showHeading", "showImage", "width"];
+var _excluded$29 = ["className", "contentSize", "headingSize", "imageAspectRatio", "isBordered", "layout", "showButton", "showContent", "showHeading", "showImage", "width"];
 /**
  * The `SkeletonLoader` component renders a placeholder to be used while
  * dynamic content is loading.
@@ -13940,7 +14333,7 @@ var SkeletonLoader$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(
     _props$showImage = props.showImage,
     showImage = _props$showImage === void 0 ? true : _props$showImage,
     width = props.width,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$28);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$29);
   var styles = react.useMultiStyleConfig("SkeletonLoader", {
     isBordered: isBordered,
     imageAspectRatio: imageAspectRatio,
@@ -13998,7 +14391,7 @@ var SkeletonLoader$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(
   })))));
 }));
 
-var _excluded$29 = ["className", "defaultValue", "helperText", "id", "invalidText", "isDisabled", "isInvalid", "isRangeSlider", "isRequired", "labelText", "max", "min", "name", "onChange", "showBoxes", "showHelperInvalidText", "showLabel", "showRequiredLabel", "showValues", "step", "value"];
+var _excluded$2a = ["className", "defaultValue", "helperText", "id", "invalidText", "isDisabled", "isInvalid", "isRangeSlider", "isRequired", "labelText", "max", "min", "name", "onChange", "showBoxes", "showHelperInvalidText", "showLabel", "showRequiredLabel", "showValues", "step", "value"];
 /**
  * The `Slider` component renders a singular value slider or a range slider
  * with a min and max value. The value(s) can be updated through the slider
@@ -14039,7 +14432,7 @@ var Slider = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (
     _props$step = props.step,
     step = _props$step === void 0 ? 1 : _props$step,
     value = props.value,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$29);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$2a);
   if (!id) {
     console.warn("NYPL Reservoir Slider: This component's required `id` prop was not passed.");
   }
@@ -14230,7 +14623,7 @@ var Slider = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (
   }, max), showBoxes && getTextInput("end")));
 }));
 
-var _excluded$2a = ["children", "className", "id", "level"];
+var _excluded$2b = ["children", "className", "id", "level"];
 /**
  * The `StatusBadge` component is used to display a visual badge for three
  * different status levels.
@@ -14241,7 +14634,7 @@ var StatusBadge$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(fun
     id = props.id,
     _props$level = props.level,
     level = _props$level === void 0 ? "low" : _props$level,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$2a);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$2b);
   var styles = react.useStyleConfig("StatusBadge", {
     variant: level
   });
@@ -14256,7 +14649,7 @@ var StatusBadge$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(fun
   }, rest), children);
 }));
 
-var _excluded$2b = ["calloutText", "className", "headingText", "id", "imageProps", "bodyContent"];
+var _excluded$2c = ["calloutText", "className", "headingText", "id", "imageProps", "bodyContent"];
 /**
  * Internal component used in the `StructuredContent` component
  * that renders the DS `Image` component.
@@ -14306,7 +14699,7 @@ var StructuredContent$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardR
       src: ""
     } : _props$imageProps,
     bodyContent = props.bodyContent,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$2b);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$2c);
   var hasImage = imageProps.src || imageProps.component;
   var hasFigureImage = imageProps.caption || imageProps.credit;
   var styles = react.useMultiStyleConfig("StructuredContent", {
@@ -14350,6 +14743,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
@@ -14398,7 +14832,7 @@ var useCarouselStyles = function useCarouselStyles(slidesCount, slideWidth) {
   };
 };
 
-var _excluded$2c = ["children", "defaultIndex", "id", "onChange", "tabsData", "useHash"];
+var _excluded$2d = ["children", "defaultIndex", "id", "onChange", "tabsData", "useHash"];
 /**
  * An internal function used to update the hash in the URL.
  * This function is only used when `useHash` is `true`.
@@ -14500,7 +14934,7 @@ var Tabs = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (pr
     tabsData = props.tabsData,
     _props$useHash = props.useHash,
     useHash = _props$useHash === void 0 ? false : _props$useHash,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$2c);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$2d);
   var styles = react.useMultiStyleConfig("Tabs", {});
   // Just an estimate of the tab width for the mobile carousel.
   var initTabWidth = 65;
@@ -14580,13 +15014,13 @@ var Tabs = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (pr
   }, React__default.createElement(react.Box, Object.assign({}, carouselStyle), tabs)), nextButton), panels);
 }));
 
-var _excluded$2d = ["children", "className", "content", "id", "isDisabled", "shouldWrapChildren"];
+var _excluded$2e = ["children", "className", "content", "id", "isDisabled", "shouldWrapChildren"];
 var Tooltip$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
     content = props.content,
     isDisabled = props.isDisabled,
     shouldWrapChildren = props.shouldWrapChildren,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$2d);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$2e);
   if (typeof content !== "string" && typeof content !== "number") {
     React__default.Children.map(content, function (contentChild) {
       if (contentChild.type !== Icon || contentChild.type !== Image) {
@@ -14711,7 +15145,7 @@ var TagSetFilter$1 = /*#__PURE__*/react.chakra(function (props) {
   }, "Clear Filters") : null);
 });
 
-var _excluded$2e = ["className", "id", "isDismissible", "onClick", "tagSetData", "type"];
+var _excluded$2f = ["className", "id", "isDismissible", "onClick", "tagSetData", "type"];
 // Type guard so we can make sure we have a "filter" `TagSet` variant.
 function isFilterType(type) {
   return type === "filter";
@@ -14755,7 +15189,7 @@ var TagSet$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function
     tagSetData = _props$tagSetData === void 0 ? [] : _props$tagSetData,
     _props$type = props.type,
     type = _props$type === void 0 ? "filter" : _props$type,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$2e);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$2f);
   var styles = react.useStyleConfig("TagSet", {});
   if (!isFilterType(type)) {
     if (isDismissible) {
@@ -14783,7 +15217,7 @@ var TagSet$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function
   }));
 }));
 
-var _excluded$2f = ["aboveHeader", "breakout", "contentId", "contentBottom", "contentPrimary", "contentSidebar", "contentTop", "footer", "header", "sidebar", "renderFooterElement", "renderHeaderElement", "renderSkipNavigation"];
+var _excluded$2g = ["aboveHeader", "breakout", "contentId", "contentBottom", "contentPrimary", "contentSidebar", "contentTop", "footer", "header", "sidebar", "renderFooterElement", "renderHeaderElement", "renderSkipNavigation"];
 /**
  * The main top-level parent component that wraps all template-related
  * components.
@@ -15006,7 +15440,7 @@ var TemplateAppContainer = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forward
     renderHeaderElement = _props$renderHeaderEl === void 0 ? true : _props$renderHeaderEl,
     _props$renderSkipNavi = props.renderSkipNavigation,
     renderSkipNavigation = _props$renderSkipNavi === void 0 ? false : _props$renderSkipNavi,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$2f);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$2g);
   var aboveHeaderElem = aboveHeader && React__default.createElement(TemplateAboveHeader, null, aboveHeader);
   var contentTopElem = contentTop && React__default.createElement(TemplateContentTop, null, contentTop);
   var contentPrimaryElem = contentPrimary && React__default.createElement(TemplateContentPrimary$1, null, contentPrimary);
@@ -15024,7 +15458,7 @@ var TemplateAppContainer = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forward
   }, footer)));
 }));
 
-var _excluded$2g = ["defaultChecked", "helperText", "id", "invalidText", "isChecked", "isDisabled", "isInvalid", "isRequired", "labelText", "name", "onChange", "size"];
+var _excluded$2h = ["defaultChecked", "helperText", "id", "invalidText", "isChecked", "isDisabled", "isInvalid", "isRequired", "labelText", "name", "onChange", "size"];
 var onChangeDefault = function onChangeDefault() {
   return;
 };
@@ -15050,7 +15484,7 @@ var Toggle$2 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function
     onChange = _props$onChange === void 0 ? onChangeDefault : _props$onChange,
     _props$size = props.size,
     size = _props$size === void 0 ? "default" : _props$size,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$2g);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$2h);
   var styles = react.useMultiStyleConfig("Toggle", {
     isDisabled: isDisabled,
     size: size
@@ -15096,7 +15530,97 @@ var Toggle$2 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function
   }), labelText)));
 }));
 
-var _excluded$2h = ["aspectRatio", "className", "descriptionText", "embedCode", "headingText", "helperText", "id", "iframeTitle", "showHelperInvalidText", "videoId", "videoType"];
+/**
+ * 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$2i = ["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,
     className = props.className,
@@ -15110,7 +15634,7 @@ var VideoPlayer$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(fun
     showHelperInvalidText = _props$showHelperInva === void 0 ? true : _props$showHelperInva,
     videoId = props.videoId,
     videoType = props.videoType,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$2h);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$2i);
   var iframeTitleFinal = videoType === "vimeo" ? iframeTitle || "Vimeo video player" : iframeTitle || "YouTube video player";
   var videoSrc = videoType === "vimeo" ? "https://player.vimeo.com/video/" + videoId + "?autoplay=0&loop=0" : "https://www.youtube.com/embed/" + videoId + "?disablekb=1&autoplay=0&fs=1&modestbranding=0";
   var iFrameTitleEmbedCode = iframeTitle ? "" + iframeTitle : "Video player";
@@ -15310,6 +15834,7 @@ exports.CheckboxGroup = CheckboxGroup;
 exports.ColorCard = ColorCard;
 exports.DSProvider = DSProvider;
 exports.DatePicker = DatePicker;
+exports.FeedbackBox = FeedbackBox$1;
 exports.Fieldset = Fieldset;
 exports.Footer = Footer$1;
 exports.Form = Form;
@@ -15340,6 +15865,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;
@@ -15359,6 +15885,7 @@ exports.Toggle = Toggle$2;
 exports.Tooltip = Tooltip$1;
 exports.VideoPlayer = VideoPlayer$1;
 exports.useCarouselStyles = useCarouselStyles;
+exports.useFeedbackBox = useFeedbackBox;
 exports.useModal = useModal;
 exports.useNYPLBreakpoints = useNYPLBreakpoints;
 exports.useNYPLTheme = useNYPLTheme;