@nypl/design-system-react-components 1.1.0-rc → 1.1.0-rc4

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

@@ -5880,7 +5880,8 @@ var Header = {
     },
     horizontalRule: {
       bg: headerRed,
-      marginTop: "0"
+      marginTop: "0",
+      marginBottom: "0"
     },
     logo: {
       padding: {
@@ -8822,27 +8823,132 @@ var DSProvider = function DSProvider(_ref) {
   }, children);
 };
 
-var _excluded$19 = ["align", "className"];
-var HorizontalRule$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref) {
-  var align = props.align,
+var _excluded$19 = ["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__*/chakra( /*#__PURE__*/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$19);
 
-  var styles = useStyleConfig("HorizontalRule", {
-    align: align
+  var styles = 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.
 
-  var finalStyles = _extends({}, styles, {
-    height: "2px",
-    width: "100%"
-  });
+  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;
+  }
 
-  return React__default.createElement(Box, Object.assign({
-    as: "hr",
-    className: className,
-    ref: ref,
-    __css: finalStyles
-  }, rest));
+  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.");
+      }
+    });
+  };
+  /**
+   * 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(type);
+    listElement = React__default.createElement(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(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;
@@ -11349,135 +11455,162 @@ var Logo$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref)
   }, childSVG);
 }));
 
-var _excluded$1V = ["children", "className", "id", "inline", "listItems", "noStyling", "title", "type"];
+var link$1 = {
+  nyplLinks: [[{
+    text: "Accessibility",
+    href: "http://www.nypl.org/accessibility"
+  }, {
+    text: "Press",
+    href: "http://www.nypl.org/help/about-nypl/media-center"
+  }, {
+    text: "Careers",
+    href: "http://www.nypl.org/careers"
+  }, {
+    text: "Space Rental",
+    href: "http://www.nypl.org/spacerental"
+  }], [{
+    text: "Privacy Policy",
+    href: "http://www.nypl.org/help/about-nypl/legal-notices/privacy-policy"
+  }, {
+    text: "Other Policies",
+    href: "http://www.nypl.org/policies"
+  }, {
+    text: "Terms & Conditions",
+    href: "http://www.nypl.org/terms-conditions"
+  }, {
+    text: "Governance",
+    href: "http://www.nypl.org/help/about-nypl/leadership/board-trustees"
+  }], [{
+    text: "Rules & Regulations",
+    href: "http://www.nypl.org/help/about-nypl/legal-notices/rules-and-regulations"
+  }, {
+    text: "About NYPL",
+    href: "http://www.nypl.org/help/about-nypl"
+  }, {
+    text: "Language",
+    href: "http://www.nypl.org/language"
+  }]],
+  socialMedia: [{
+    href: "https://www.facebook.com/nypl",
+    iconName: "legacySocialFacebook",
+    title: "NYPL on Facebook"
+  }, {
+    href: "https://twitter.com/nypl",
+    iconName: "legacySocialTwitter",
+    title: "NYPL on Twitter"
+  }, {
+    href: "https://instagram.com/nypl",
+    iconName: "legacySocialInstagram",
+    title: "NYPL on Instagram"
+  }, {
+    href: "https://www.youtube.com/user/NewYorkPublicLibrary",
+    iconName: "legacySocialYoutube",
+    title: "NYPL on Youtube"
+  }]
+};
+
+var _excluded$1V = ["className", "id"];
 /**
- * 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.
+ * This `Footer` component renders the NYPL-branded footer elements such
+ * as navigational NYPL.org links, social media links, copyright, and
+ * NYPL building facade image.
  */
 
-var List$1 = /*#__PURE__*/chakra( /*#__PURE__*/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$1V);
-
-  var styles = 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 `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;
+var Footer$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+      _ref$id = _ref.id,
+      id = _ref$id === void 0 ? "footer" : _ref$id,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$1V);
 
-      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.");
-      }
+  var styles = useMultiStyleConfig("Footer", {});
+  var nyplLinks = link$1.nyplLinks.map(function (links, index) {
+    return React__default.createElement(List$1, {
+      key: index,
+      listItems: links.map(function (link) {
+        return React__default.createElement(Link, {
+          href: link.href,
+          key: link.text
+        }, link.text);
+      }),
+      noStyling: true,
+      type: "ul",
+      __css: styles.footerLinksInner
     });
-  };
-  /**
-   * Checks for `dt` and `dd` elements and consoles a warning if the
-   * children are different HTML elements.
-   */
+  });
+  var socialLinks = link$1.socialMedia.map(function (link, index) {
+    return React__default.createElement(Link, {
+      href: link.href,
+      key: index
+    }, React__default.createElement(Icon, {
+      decorative: false,
+      name: link.iconName,
+      size: "small",
+      title: link.title
+    }));
+  });
+  return React__default.createElement(Box, Object.assign({
+    as: "footer",
+    className: className,
+    id: id,
+    ref: ref,
+    role: "contentinfo"
+  }, rest, {
+    __css: styles
+  }), React__default.createElement(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(Box, {
+    __css: styles.nyplInfoContainer
+  }, React__default.createElement(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(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(Box, {
+    __css: styles.logoContainer
+  }, React__default.createElement(Logo$1, {
+    decorative: false,
+    name: "nyplTextWhite",
+    size: "small",
+    title: "The New York Public Library"
+  })));
+}));
 
+var _excluded$1W = ["align", "className"];
+var HorizontalRule$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref) {
+  var align = props.align,
+      className = props.className,
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1W);
 
-  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 = useStyleConfig("HorizontalRule", {
+    align: align
+  });
 
-  if (type === "ol" || type === "ul") {
-    checkListChildrenError(type);
-    listElement = React__default.createElement(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(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)));
-  }
+  var finalStyles = _extends({}, styles, {
+    height: "2px",
+    width: "100%"
+  });
 
-  return listElement;
+  return React__default.createElement(Box, Object.assign({
+    as: "hr",
+    className: className,
+    ref: ref,
+    __css: finalStyles
+  }, rest));
 }));
 
-var _excluded$1W = ["className", "id", "target"];
+var _excluded$1X = ["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
@@ -11490,7 +11623,7 @@ var SkipNavigation$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (pr
       id = props.id,
       _props$target = props.target,
       target = _props$target === void 0 ? "#mainContent" : _props$target,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1W);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1X);
 
   var styles = useStyleConfig("SkipNavigation");
   return React__default.createElement(Box, Object.assign({
@@ -11511,7 +11644,7 @@ var SkipNavigation$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (pr
   }, "Click to learn about accessibility at the Library"))));
 }));
 
-var _excluded$1X = ["className", "helperText", "id", "invalidText", "isChecked", "isDisabled", "isInvalid", "isRequired", "labelText", "name", "onChange", "showHelperInvalidText", "showLabel", "value"];
+var _excluded$1Y = ["className", "helperText", "id", "invalidText", "isChecked", "isDisabled", "isInvalid", "isRequired", "labelText", "name", "onChange", "showHelperInvalidText", "showLabel", "value"];
 var Radio$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
       helperText = props.helperText,
@@ -11532,7 +11665,7 @@ var Radio$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref)
       _props$showLabel = props.showLabel,
       showLabel = _props$showLabel === void 0 ? true : _props$showLabel,
       value = props.value,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1X);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1Y);
 
   var styles = useMultiStyleConfig("Radio", {
     showLabel: showLabel
@@ -11579,7 +11712,7 @@ var Radio$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref)
   }, labelText)));
 }));
 
-var _excluded$1Y = ["children", "className", "defaultValue", "helperText", "id", "invalidText", "isDisabled", "isFullWidth", "isInvalid", "isRequired", "labelText", "layout", "name", "onChange", "showHelperInvalidText", "showLabel", "showRequiredLabel"];
+var _excluded$1Z = ["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
@@ -11615,7 +11748,7 @@ var RadioGroup$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props,
       showLabel = _props$showLabel === void 0 ? true : _props$showLabel,
       _props$showRequiredLa = props.showRequiredLabel,
       showRequiredLabel = _props$showRequiredLa === void 0 ? true : _props$showRequiredLa,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1Y);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1Z);
 
   var _React$useState = React__default.useState(defaultValue),
       value = _React$useState[0],
@@ -12720,7 +12853,7 @@ var HeaderMobileIconNav$1 = /*#__PURE__*/chakra(function () {
   }), React__default.createElement(HeaderMobileNavButton$1, null));
 });
 
-var _excluded$1Z = ["children", "icon", "id", "isCentered", "notificationType"],
+var _excluded$1_ = ["children", "icon", "id", "isCentered", "notificationType"],
     _excluded2$5 = ["alignText", "children", "icon", "notificationType"],
     _excluded3$3 = ["ariaLabel", "className", "dismissible", "icon", "id", "isCentered", "noMargin", "notificationContent", "notificationHeading", "notificationType", "showIcon"];
 /**
@@ -12733,7 +12866,7 @@ var NotificationHeading$1 = /*#__PURE__*/chakra(function (props) {
       id = props.id,
       isCentered = props.isCentered,
       notificationType = props.notificationType,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1Z);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1_);
 
   var styles = useMultiStyleConfig("NotificationHeading", {
     icon: icon,
@@ -13239,7 +13372,7 @@ var Header$1 = /*#__PURE__*/chakra(function (_ref) {
   }))));
 });
 
-var _excluded$1_ = ["backgroundColor", "backgroundImageSrc", "foregroundColor", "heading", "heroType", "imageProps", "locationDetails", "subHeaderText"];
+var _excluded$1$ = ["backgroundColor", "backgroundImageSrc", "foregroundColor", "heading", "heroType", "imageProps", "locationDetails", "subHeaderText"];
 
 var heroSecondaryTypes = ["secondary", "secondaryBooksAndMore", "secondaryLocations", "secondaryResearch", "secondaryWhatsOn"];
 var Hero$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref) {
@@ -13255,7 +13388,7 @@ var Hero$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref)
   } : _props$imageProps,
       locationDetails = props.locationDetails,
       subHeaderText = props.subHeaderText,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1_);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1$);
 
   var styles = useMultiStyleConfig("Hero", {
     variant: heroType
@@ -13355,7 +13488,7 @@ var Hero$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref)
   }
 });
 
-var _excluded$1$ = ["bodyContent", "closeButtonLabel", "headingText", "id", "isOpen", "onClose"],
+var _excluded$20 = ["bodyContent", "closeButtonLabel", "headingText", "id", "isOpen", "onClose"],
     _excluded2$6 = ["buttonText", "id", "modalProps"],
     _excluded3$4 = ["bodyContent", "closeButtonLabel", "headingText", "id"];
 var BaseModal = /*#__PURE__*/chakra(function (_ref) {
@@ -13366,7 +13499,7 @@ var BaseModal = /*#__PURE__*/chakra(function (_ref) {
       id = _ref.id,
       isOpen = _ref.isOpen,
       onClose = _ref.onClose,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$1$);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$20);
 
   var xlarge = "xl";
   var fullSize = "full";
@@ -13457,7 +13590,7 @@ function useModal() {
   };
 }
 
-var _excluded$20 = ["className", "currentPage", "getPageHref", "id", "initialPage", "onPageChange", "pageCount"];
+var _excluded$21 = ["className", "currentPage", "getPageHref", "id", "initialPage", "onPageChange", "pageCount"];
 /**
  * A component that provides a navigational list of page items.
  */
@@ -13471,7 +13604,7 @@ var Pagination$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props,
       initialPage = _props$initialPage === void 0 ? 1 : _props$initialPage,
       onPageChange = props.onPageChange,
       pageCount = props.pageCount,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$20);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$21);
 
   var refCurrentPage = useRef(currentPage);
 
@@ -13664,7 +13797,7 @@ var Pagination$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props,
   }, previousLiLink, getPaginationNumbers(selectedPage), nextLiLink));
 }));
 
-var _excluded$21 = ["darkMode", "id", "indicatorType", "isIndeterminate", "labelText", "showLabel", "size", "value"];
+var _excluded$22 = ["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,
@@ -13686,7 +13819,7 @@ var ProgressIndicator$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function
       size = _props$size === void 0 ? "default" : _props$size,
       _props$value = props.value,
       value = _props$value === void 0 ? 0 : _props$value,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$21);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$22);
 
   var styles = useMultiStyleConfig("ProgressIndicator", {
     darkMode: darkMode,
@@ -13753,7 +13886,7 @@ var ProgressIndicator$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function
   }, rest), progressComponent(indicatorType));
 }));
 
-var _excluded$22 = ["children", "className", "helperText", "id", "invalidText", "isDisabled", "isInvalid", "isRequired", "labelPosition", "labelText", "name", "onChange", "placeholder", "selectType", "showHelperInvalidText", "showLabel", "showRequiredLabel", "value"];
+var _excluded$23 = ["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.
@@ -13787,7 +13920,7 @@ var Select$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref
       showRequiredLabel = _props$showRequiredLa === void 0 ? true : _props$showRequiredLa,
       _props$value = props.value,
       value = _props$value === void 0 ? "" : _props$value,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$22);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$23);
 
   var _useState = useState(0),
       labelWidth = _useState[0],
@@ -13873,7 +14006,7 @@ var Select$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref
   }), children)));
 }));
 
-var _excluded$23 = ["action", "buttonOnClick", "className", "descriptionText", "headingText", "helperText", "id", "invalidText", "isDisabled", "isInvalid", "isRequired", "labelText", "method", "noBrandButtonType", "onSubmit", "selectProps", "textInputElement", "textInputProps"];
+var _excluded$24 = ["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.
@@ -13902,7 +14035,7 @@ var SearchBar$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props,
       selectProps = props.selectProps,
       textInputElement = props.textInputElement,
       textInputProps = props.textInputProps,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$23);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$24);
 
   var styles = useMultiStyleConfig("SearchBar", {});
   var stateProps = {
@@ -13996,7 +14129,7 @@ var SearchBar$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props,
   }, selectElem, textInputElem, buttonElem));
 }));
 
-var _excluded$24 = ["className", "contentSize", "headingSize", "imageAspectRatio", "isBordered", "layout", "showButton", "showContent", "showHeading", "showImage", "width"];
+var _excluded$25 = ["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.
@@ -14023,7 +14156,7 @@ var SkeletonLoader$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (pr
       _props$showImage = props.showImage,
       showImage = _props$showImage === void 0 ? true : _props$showImage,
       width = props.width,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$24);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$25);
 
   var styles = useMultiStyleConfig("SkeletonLoader", {
     isBordered: isBordered,
@@ -14086,7 +14219,7 @@ var SkeletonLoader$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (pr
   })))));
 }));
 
-var _excluded$25 = ["className", "defaultValue", "helperText", "id", "invalidText", "isDisabled", "isInvalid", "isRangeSlider", "isRequired", "labelText", "max", "min", "name", "onChange", "showBoxes", "showHelperInvalidText", "showLabel", "showRequiredLabel", "showValues", "step"];
+var _excluded$26 = ["className", "defaultValue", "helperText", "id", "invalidText", "isDisabled", "isInvalid", "isRangeSlider", "isRequired", "labelText", "max", "min", "name", "onChange", "showBoxes", "showHelperInvalidText", "showLabel", "showRequiredLabel", "showValues", "step"];
 /**
  * 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
@@ -14127,7 +14260,7 @@ var Slider = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref)
       showValues = _props$showValues === void 0 ? true : _props$showValues,
       _props$step = props.step,
       step = _props$step === void 0 ? 1 : _props$step,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$25);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$26);
 
   if (!id) {
     console.warn("NYPL Reservoir Slider: This component's required `id` prop was not passed.");
@@ -14317,7 +14450,7 @@ var Slider = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref)
   }, max), showBoxes && getTextInput("end")));
 }));
 
-var _excluded$26 = ["children", "className", "id", "level"];
+var _excluded$27 = ["children", "className", "id", "level"];
 /**
  * The `StatusBadge` component is used to display a visual badge for three
  * different status levels.
@@ -14329,7 +14462,7 @@ var StatusBadge$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props
       id = props.id,
       _props$level = props.level,
       level = _props$level === void 0 ? "low" : _props$level,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$26);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$27);
 
   var styles = useStyleConfig("StatusBadge", {
     variant: level
@@ -14347,7 +14480,7 @@ var StatusBadge$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props
   }, rest), children);
 }));
 
-var _excluded$27 = ["calloutText", "className", "headingText", "id", "imageProps", "bodyContent"];
+var _excluded$28 = ["calloutText", "className", "headingText", "id", "imageProps", "bodyContent"];
 /**
  * Internal component used in the `StructuredContent` component
  * that renders the DS `Image` component.
@@ -14399,7 +14532,7 @@ var StructuredContent$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function
     src: ""
   } : _props$imageProps,
       bodyContent = props.bodyContent,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$27);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$28);
 
   var hasImage = imageProps.src || imageProps.component;
   var hasFigureImage = imageProps.caption || imageProps.credit;
@@ -14501,7 +14634,7 @@ var useCarouselStyles = function useCarouselStyles(slidesCount, slideWidth) {
   };
 };
 
-var _excluded$28 = ["children", "defaultIndex", "id", "onChange", "tabsData", "useHash"];
+var _excluded$29 = ["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`.
@@ -14620,7 +14753,7 @@ var Tabs = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref) {
       tabsData = props.tabsData,
       _props$useHash = props.useHash,
       useHash = _props$useHash === void 0 ? false : _props$useHash,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$28);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$29);
 
   var styles = useMultiStyleConfig("Tabs", {}); // Just an estimate of the tab width for the mobile carousel.
 
@@ -14710,7 +14843,7 @@ var Tabs = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref) {
   }, React__default.createElement(Box, Object.assign({}, carouselStyle), tabs)), nextButton), panels);
 })); // Tabs is also exported above so the props can display in Storybook.
 
-var _excluded$29 = ["aboveHeader", "breakout", "contentId", "contentBottom", "contentPrimary", "contentSidebar", "contentTop", "footer", "header", "sidebar", "renderFooterElement", "renderHeaderElement", "renderSkipNavigation"];
+var _excluded$2a = ["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.
@@ -14911,7 +15044,9 @@ var TemplateFooter = function TemplateFooter(_ref2) {
       _ref2$renderFooterEle = _ref2.renderFooterElement,
       renderFooterElement = _ref2$renderFooterEle === void 0 ? true : _ref2$renderFooterEle;
   var styles = useStyleConfig("TemplateBreakout", {});
-  var footerElement = React__default.createElement(React__default.Fragment, null, children); // The user wants to render the `footer` HTML element.
+  var footerElement = React__default.createElement(Box, {
+    __css: styles
+  }, children); // The user wants to render the `footer` HTML element.
 
   if (renderFooterElement) {
     // But give a warning if one was passed.
@@ -14958,7 +15093,7 @@ var TemplateAppContainer = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function
       renderHeaderElement = _props$renderHeaderEl === void 0 ? true : _props$renderHeaderEl,
       _props$renderSkipNavi = props.renderSkipNavigation,
       renderSkipNavigation = _props$renderSkipNavi === void 0 ? false : _props$renderSkipNavi,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$29);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$2a);
 
   var aboveHeaderElem = aboveHeader && React__default.createElement(TemplateAboveHeader, null, aboveHeader);
   var contentTopElem = contentTop && React__default.createElement(TemplateContentTop, null, contentTop);
@@ -14977,7 +15112,7 @@ var TemplateAppContainer = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function
   }, footer)));
 }));
 
-var _excluded$2a = ["defaultChecked", "helperText", "id", "invalidText", "isChecked", "isDisabled", "isInvalid", "isRequired", "labelText", "name", "onChange", "size"];
+var _excluded$2b = ["defaultChecked", "helperText", "id", "invalidText", "isChecked", "isDisabled", "isInvalid", "isRequired", "labelText", "name", "onChange", "size"];
 var onChangeDefault = function onChangeDefault() {
   return;
 };
@@ -15004,7 +15139,7 @@ var Toggle$2 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref
       onChange = _props$onChange === void 0 ? onChangeDefault : _props$onChange,
       _props$size = props.size,
       size = _props$size === void 0 ? "default" : _props$size,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$2a);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$2b);
 
   var styles = useMultiStyleConfig("Toggle", {
     isDisabled: isDisabled,
@@ -15053,7 +15188,7 @@ var Toggle$2 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref
   }), labelText)));
 }));
 
-var _excluded$2b = ["aspectRatio", "className", "descriptionText", "embedCode", "headingText", "helperText", "id", "iframeTitle", "showHelperInvalidText", "videoId", "videoType"];
+var _excluded$2c = ["aspectRatio", "className", "descriptionText", "embedCode", "headingText", "helperText", "id", "iframeTitle", "showHelperInvalidText", "videoId", "videoType"];
 var VideoPlayer$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref) {
   var aspectRatio = props.aspectRatio,
       className = props.className,
@@ -15067,7 +15202,7 @@ var VideoPlayer$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props
       showHelperInvalidText = _props$showHelperInva === void 0 ? true : _props$showHelperInva,
       videoId = props.videoId,
       videoType = props.videoType,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$2b);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$2c);
 
   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";
@@ -15137,13 +15272,13 @@ var VideoPlayer$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props
   }, embedElement)));
 }));
 
-var _excluded$2c = ["children", "className", "content", "id", "isDisabled", "shouldWrapChildren"];
+var _excluded$2d = ["children", "className", "content", "id", "isDisabled", "shouldWrapChildren"];
 var Tooltip$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
       content = props.content,
       isDisabled = props.isDisabled,
       shouldWrapChildren = props.shouldWrapChildren,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$2c);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$2d);
 
   if (typeof content !== "string") {
     React__default.Children.map(content, function (contentChild) {
@@ -15169,5 +15304,5 @@ var Tooltip$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, re
   }, rest), newChildren);
 }));
 
-export { Accordion, Breadcrumbs, Button, ButtonGroup, Card, CardActions, CardContent, CardHeading, Checkbox, CheckboxGroup, ColorCard, DSProvider, DatePicker, Fieldset, Form, FormField, FormRow, Header$1 as Header, Heading, HelperErrorText, Hero$1 as Hero, HorizontalRule$1 as HorizontalRule, Icon, Image, Label, Link, List$1 as List, Logo$1 as Logo, ModalTrigger, Notification$1 as Notification, Pagination$1 as Pagination, ProgressIndicator$1 as ProgressIndicator, Radio$1 as Radio, RadioGroup$1 as RadioGroup, SearchBar$1 as SearchBar, Select$1 as Select, SimpleGrid, SkeletonLoader$1 as SkeletonLoader, SkipNavigation$1 as SkipNavigation, Slider, StatusBadge$1 as StatusBadge, StructuredContent$1 as StructuredContent, Table, Tabs, Template$1 as Template, TemplateAboveHeader, TemplateAppContainer, TemplateBreakout$1 as TemplateBreakout, TemplateContent$1 as TemplateContent, TemplateContentPrimary$1 as TemplateContentPrimary, TemplateContentSidebar$1 as TemplateContentSidebar, TemplateContentTop, TemplateFooter, TemplateHeader, Text, TextInput, Toggle$2 as Toggle, Tooltip$1 as Tooltip, VideoPlayer$1 as VideoPlayer, useCarouselStyles, useModal, useNYPLBreakpoints, useNYPLTheme, useWindowSize };
+export { Accordion, Breadcrumbs, Button, ButtonGroup, Card, CardActions, CardContent, CardHeading, Checkbox, CheckboxGroup, ColorCard, DSProvider, DatePicker, Fieldset, Footer$1 as Footer, Form, FormField, FormRow, Header$1 as Header, Heading, HelperErrorText, Hero$1 as Hero, HorizontalRule$1 as HorizontalRule, Icon, Image, Label, Link, List$1 as List, Logo$1 as Logo, ModalTrigger, Notification$1 as Notification, Pagination$1 as Pagination, ProgressIndicator$1 as ProgressIndicator, Radio$1 as Radio, RadioGroup$1 as RadioGroup, SearchBar$1 as SearchBar, Select$1 as Select, SimpleGrid, SkeletonLoader$1 as SkeletonLoader, SkipNavigation$1 as SkipNavigation, Slider, StatusBadge$1 as StatusBadge, StructuredContent$1 as StructuredContent, Table, Tabs, Template$1 as Template, TemplateAboveHeader, TemplateAppContainer, TemplateBreakout$1 as TemplateBreakout, TemplateContent$1 as TemplateContent, TemplateContentPrimary$1 as TemplateContentPrimary, TemplateContentSidebar$1 as TemplateContentSidebar, TemplateContentTop, TemplateFooter, TemplateHeader, Text, TextInput, Toggle$2 as Toggle, Tooltip$1 as Tooltip, VideoPlayer$1 as VideoPlayer, useCarouselStyles, useModal, useNYPLBreakpoints, useNYPLTheme, useWindowSize };
 //# sourceMappingURL=design-system-react-components.esm.js.map