@nypl/design-system-react-components 1.0.7 → 1.0.8

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

@@ -1726,7 +1726,7 @@ var Icon = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (pr
   }
 });
 
-var _excluded$R = ["accordionData", "id", "isDefaultOpen"];
+var _excluded$R = ["accordionData", "id", "isDefaultOpen", "panelMaxHeight"];
 /**
  * Get the minus or plus icon depending on whether the accordion
  * is open or closed.
@@ -1751,7 +1751,7 @@ var getIcon = function getIcon(isExpanded, index, id) {
  */
 
 
-var getElementsFromData = function getElementsFromData(data, id) {
+var getElementsFromData = function getElementsFromData(data, id, panelMaxHeight) {
   var _data, _data2;
 
   if (data === void 0) {
@@ -1774,10 +1774,14 @@ var getElementsFromData = function getElementsFromData(data, id) {
       key: index,
       dangerouslySetInnerHTML: {
         __html: content.panel
-      }
+      },
+      maxHeight: panelMaxHeight,
+      overflow: "auto"
     }) : React__default.createElement(react.AccordionPanel, {
       id: id + "-panel-" + index,
-      key: index
+      key: index,
+      maxHeight: panelMaxHeight,
+      overflow: "auto"
     }, content.panel);
     return React__default.createElement(react.AccordionItem, {
       id: id + "-item-" + index,
@@ -1802,7 +1806,7 @@ var getElementsFromData = function getElementsFromData(data, id) {
         flex: "1",
         fontSize: multipleFontSize,
         textAlign: "left"
-      }, content.label), getIcon(isExpanded, index, id)), panel);
+      }, content.label), getIcon(isExpanded, index, id)), isExpanded && panel);
     });
   });
 };
@@ -1817,6 +1821,7 @@ var Accordion = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
       id = props.id,
       _props$isDefaultOpen = props.isDefaultOpen,
       isDefaultOpen = _props$isDefaultOpen === void 0 ? false : _props$isDefaultOpen,
+      panelMaxHeight = props.panelMaxHeight,
       rest = _objectWithoutPropertiesLoose(props, _excluded$R); // Pass `0` to open the first accordion in the 0-index based array.
 
 
@@ -1826,7 +1831,7 @@ var Accordion = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
     defaultIndex: openFirstAccordion,
     id: id,
     ref: ref
-  }, rest), getElementsFromData(accordionData, id));
+  }, rest), getElementsFromData(accordionData, id, panelMaxHeight));
 }));
 
 var _excluded$S = ["breadcrumbsData", "breadcrumbsType", "className", "id"];
@@ -2358,19 +2363,19 @@ var Image = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (p
     loading: isLazy ? "lazy" : undefined
   }, srcProp, {
     __css: _extends({}, styles.img, additionalImageStyles)
-  }));
+  }, rest));
   var finalImage = useImageWrapper ? React__default.createElement(ImageWrapper, Object.assign({
     additionalWrapperStyles: additionalWrapperStyles,
     aspectRatio: aspectRatio,
     className: className,
     size: size
   }, caption || credit ? {} : rest), imageComponent) : imageComponent;
-  return React__default.createElement(react.Box, Object.assign({
+  return React__default.createElement(react.Box, {
     ref: finalRefs
-  }, rest), caption || credit ? React__default.createElement(react.Box, Object.assign({
+  }, caption || credit ? React__default.createElement(react.Box, {
     as: "figure",
     __css: _extends({}, styles.figure, additionalFigureStyles)
-  }, rest), finalImage, React__default.createElement(react.Box, {
+  }, finalImage, React__default.createElement(react.Box, {
     as: "figcaption",
     __css: styles.figcaption
   }, caption && React__default.createElement(react.Box, {
@@ -3311,14 +3316,119 @@ 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 DataTable = function DataTable(props) {
-  var _props$dataBlack = props.dataBlack,
-      dataBlack = _props$dataBlack === void 0 ? ["--", "--", "--"] : _props$dataBlack,
-      _props$dataWhite = props.dataWhite,
-      dataWhite = _props$dataWhite === void 0 ? ["--", "--", "--"] : _props$dataWhite,
+  var dataBgPageColor = props.dataBgPageColor,
+      dataBgDefaultColor = props.dataBgDefaultColor,
+      _props$dataBlackColor = props.dataBlackColor,
+      dataBlackColor = _props$dataBlackColor === void 0 ? ["--", "--", "--"] : _props$dataBlackColor,
+      dataHeadingColor = props.dataHeadingColor,
+      dataBodyColor = props.dataBodyColor,
+      _props$dataWhiteColor = props.dataWhiteColor,
+      dataWhiteColor = _props$dataWhiteColor === void 0 ? ["--", "--", "--"] : _props$dataWhiteColor,
       _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,
@@ -3331,24 +3441,44 @@ var DataTable = function DataTable(props) {
     });
   };
 
-  var columnHeaders = ["Color", "Ratio", "16px", "36px"];
-  var whiteSmallTextSuccess = (dataWhite[1] === "AA" || dataWhite[1] === "AAA") && React.createElement(SuccessIcon, null);
-  var whiteLargeTextSuccess = (dataWhite[2] === "AA" || dataWhite[2] === "AAA") && React.createElement(SuccessIcon, null);
-  var blackSmallTextSuccess = (dataBlack[1] === "AA" || dataBlack[1] === "AAA") && React.createElement(SuccessIcon, null);
-  var blackLargeTextSuccess = (dataBlack[2] === "AA" || dataBlack[2] === "AAA") && React.createElement(SuccessIcon, null);
+  var successfulContrast = function successfulContrast(dataColor, textSize) {
+    if (textSize === void 0) {
+      textSize = "small";
+    }
+
+    var dataTextIndex = textSize === "small" ? 1 : 2;
+    return (dataColor[dataTextIndex] === "AA" || dataColor[dataTextIndex] === "AAA") && React.createElement(SuccessIcon, null);
+  };
+
+  var columnHeaders = ["Color", "Ratio", "16px", "36px"]; // All color data have the following two rows.
+
+  var whiteSmallTextSuccess = successfulContrast(dataWhiteColor);
+  var whiteLargeTextSuccess = successfulContrast(dataWhiteColor, "large");
+  var blackSmallTextSuccess = successfulContrast(dataBlackColor);
+  var blackLargeTextSuccess = successfulContrast(dataBlackColor, "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"); // All ColorCards have these two rows.
+
   var tableData = [[React.createElement("span", {
     key: "colorUiWhite",
     style: {
       color: "white",
       padding: 0
     }
-  }, "ui.white"), dataWhite[0] + ":1", React.createElement(React.Fragment, null, dataWhite[1], whiteSmallTextSuccess), React.createElement(React.Fragment, null, dataWhite[2], whiteLargeTextSuccess)], [React.createElement("span", {
+  }, "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"), dataBlack[0] + ":1", React.createElement(React.Fragment, null, dataBlack[1], blackSmallTextSuccess), React.createElement(React.Fragment, null, dataBlack[2], blackLargeTextSuccess)]];
+  }, "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",
@@ -3370,7 +3500,48 @@ var DataTable = function DataTable(props) {
         fontSize: "text.tag"
       }, cellStyles)
     }
-  };
+  }; // For dark mode `ColorCard`s, there are four extra rows.
+
+  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)]);
+  }
+
+  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)]);
+  }
+
+  if (dataHeadingColor && dataHeadingColor.length > 0) {
+    tableData.push([React.createElement("span", {
+      key: "colorHeading",
+      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)]);
+  }
+
+  if (dataBodyColor && dataBodyColor.length > 0) {
+    tableData.push([React.createElement("span", {
+      key: "colorText",
+      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)]);
+  }
+
   return React.createElement(Table, {
     columnHeaders: columnHeaders,
     showRowDividers: true,
@@ -3381,13 +3552,17 @@ var DataTable = function DataTable(props) {
 };
 var ColorCard = function ColorCard(props) {
   var backgroundColor = props.backgroundColor,
+      dataBgPageColor = props.dataBgPageColor,
+      dataBgDefaultColor = props.dataBgDefaultColor,
       _props$colorName = props.colorName,
       colorName = _props$colorName === void 0 ? "" : _props$colorName,
       colorSource = props.colorSource,
-      _props$dataBlack2 = props.dataBlack,
-      dataBlack = _props$dataBlack2 === void 0 ? ["--", "--", "--"] : _props$dataBlack2,
-      _props$dataWhite2 = props.dataWhite,
-      dataWhite = _props$dataWhite2 === void 0 ? ["--", "--", "--"] : _props$dataWhite2,
+      _props$dataBlackColor2 = props.dataBlackColor,
+      dataBlackColor = _props$dataBlackColor2 === void 0 ? ["--", "--", "--"] : _props$dataBlackColor2,
+      dataHeadingColor = props.dataHeadingColor,
+      dataBodyColor = props.dataBodyColor,
+      _props$dataWhiteColor2 = props.dataWhiteColor,
+      dataWhiteColor = _props$dataWhiteColor2 === void 0 ? ["--", "--", "--"] : _props$dataWhiteColor2,
       _props$textColor2 = props.textColor,
       textColor = _props$textColor2 === void 0 ? "ui.white" : _props$textColor2;
   var cssVarName = "--nypl-colors-" + colorName.replace(/\./g, "-");
@@ -3412,9 +3587,13 @@ var ColorCard = function ColorCard(props) {
     fontWeight: "medium",
     noSpace: true,
     size: "tag"
-  }, "Base: ", colorSource)), React.createElement(DataTable, {
-    dataBlack: dataBlack,
-    dataWhite: dataWhite,
+  }, "Source: ", colorSource)), React.createElement(DataTable, {
+    dataBgPageColor: dataBgPageColor,
+    dataBgDefaultColor: dataBgDefaultColor,
+    dataBlackColor: dataBlackColor,
+    dataHeadingColor: dataHeadingColor,
+    dataBodyColor: dataBodyColor,
+    dataWhiteColor: dataWhiteColor,
     textColor: textColor
   })));
 };
@@ -4177,21 +4356,32 @@ var breakpoints = /*#__PURE__*/themeTools.createBreakpoints({
  * All colors can be found in Storybook:
  *   https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/docs/style-guide-colors--page
  *
- * All UI colors can be found in Figma:
+ * All UI Fills colors can be found in Figma:
  *   https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=47083%3A27674
  *
- * All Brand colors can be found in Figma:
+ * All Brand Fills colors can be found in Figma:
  *   https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=15454%3A47007
  *
+ * All Dark Mode UI Fills colors can be found in Figma:
+ *   https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=61991%3A45315
+ *
  * At the end of this file, there are objects that extend Chakra's default
  * color shade palette for individual colors. WE DO NOT RECOMMEND to use them
  * and only recommend to use the colors defined by the Design System such as the
  * following "ui", "brand", and "section" colors below.
  */
 // Reusable variables:
+var black = "#000";
+var white = "#fff";
+var grayDark = "#616161";
+var grayxxxxDark = "#121212";
+var grayxxxDark = "#191919";
+var grayxxDark = "#212121";
+var grayxDark = "#424242";
+var grayMedium = "#BDBDBD";
 var grayLightCool = "#E9E9E9";
+var grayxLightCool = "#F5F5F5";
 var grayxxLightCool = "#FAFAFA";
-var grayMedium = "#BDBDBD";
 var brandPrimary = "#C60917";
 var brandSecondary = "#760000";
 var brandObj = {
@@ -4202,8 +4392,8 @@ var colors = {
   transparent: "transparent",
   // ui fills
   ui: {
-    black: "#000",
-    white: "#fff",
+    black: black,
+    white: white,
     /// State and link utilities
     disabled: {
       primary: grayLightCool,
@@ -4231,18 +4421,81 @@ var colors = {
       primary: "#F0974E",
       secondary: "#EC7B1F"
     },
+    // Semantic colors
+    bg: {
+      "default": grayxLightCool,
+      hover: grayLightCool,
+      active: grayMedium
+    },
+    border: {
+      "default": grayMedium,
+      hover: grayDark
+    },
+    typography: {
+      heading: black,
+      body: black
+    },
     // Grayscale
     gray: {
-      "xx-dark": "#212121",
-      "x-dark": "#424242",
-      xdark: "#424242",
-      dark: "#616161",
+      "xxxx-dark": grayxxxxDark,
+      "xxx-dark": grayxxxDark,
+      "xx-dark": grayxxDark,
+      "x-dark": grayxDark,
+      dark: grayDark,
       medium: grayMedium,
       "light-cool": grayLightCool,
+      "x-light-cool": grayxLightCool,
+      "xx-light-cool": grayxxLightCool,
+      // Gray Alts
       "light-warm": "#EFEDEB",
-      "x-light-cool": "#F5F5F5",
-      "x-light-warm": "#F8F8F7",
-      "xx-light-cool": grayxxLightCool
+      "x-light-warm": "#F8F8F7"
+    }
+  },
+  // dark mode ui fills
+  dark: {
+    ui: {
+      /// State and link utilities
+      disabled: {
+        primary: grayxDark,
+        secondary: grayxxDark
+      },
+      error: {
+        primary: "#E1454C",
+        secondary: "#F67C82"
+      },
+      focus: "#5181D4",
+      link: {
+        primary: "#2085D8",
+        secondary: "#50A0E1"
+      },
+      status: {
+        primary: "#6F6544",
+        secondary: "#6F6765"
+      },
+      success: {
+        primary: "#0E3B15",
+        secondary: "#0F2912"
+      },
+      test: "#592B22",
+      warning: {
+        primary: "#493320",
+        secondary: "#482C15"
+      },
+      // Semantic colors
+      bg: {
+        page: grayxxxxDark,
+        "default": grayxxxDark,
+        hover: grayxxDark,
+        active: grayxDark
+      },
+      border: {
+        "default": grayxDark,
+        hover: grayMedium
+      },
+      typography: {
+        heading: grayLightCool,
+        body: grayMedium
+      }
     }
   },
 
@@ -4274,21 +4527,21 @@ var colors = {
 
     /** Research is used for the Research Catalog and SCC. */
     research: {
-      primary: "#00838a",
+      primary: "#00838A",
       secondary: "#006166"
     },
 
     /** Research libraries with specific brand colors to adhere to. */
     "research-library": {
-      lpa: "#005d53",
-      schomburg: "#a03e31",
+      lpa: "#005D53",
+      schomburg: "#A03E31",
       schwartzman: brandSecondary
     },
 
     /** What's On is used for Exhibitions & Events. */
     "whats-on": {
       primary: "#242424",
-      secondary: "#000000"
+      secondary: black
     }
   },
 
@@ -6483,11 +6736,11 @@ var SkipNavigation = {
       width: "1px",
       // Only display when the user focuses on the links.
       _focus: {
-        border: "1px solid var(—nypl-colors-ui-gray-dark)",
         height: "auto",
-        left: "2rem",
-        padding: "var(--nypl-space-inset-extranarrow) var(--nypl-space-inset-narrow)",
-        top: "3rem",
+        left: "1rem",
+        paddingX: "inset.extranarrow",
+        paddingY: "inset.extranarrow",
+        top: "1rem",
         width: "auto"
       }
     }
@@ -7079,87 +7332,72 @@ var CustomTabs = {
   }
 };
 
-// From @mixin breakout:
-// Used for elements that should be edge-to-edge.
-var breakout = {
-  marginEnd: "calc(-50vw + 50%)",
-  marginStart: "calc(-50vw + 50%)"
-}; // From the `wrapper` SCSS mixin.
-// TODO: Eventually we may be able to put shared JS style objects
-// into a utils file for other mixins that are shared.
-
-var wrapperStyles$1 = {
-  marginY: 0,
-  marginX: "auto",
-  maxWidth: "1280px",
-  paddingTop: 0,
-  paddingBottom: 0,
-  paddingEnd: "s",
-  paddingStart: "s",
-  width: "100%"
-};
+/**
+ * Grid layout based on https://www.joshwcomeau.com/css/full-bleed/
+ */
 var Template = {
   baseStyle: {
     boxSizing: "border-box",
     color: "ui.black",
-    // Users with non-overlay scrollbars have a small horizontal scrollbar from
-    // our breakout mixin. Fix identified here: https://cloudfour.com/thinks/breaking-out-with-viewport-units-and-calc/#one-big-dumb-caveat
-    overflowX: "hidden",
-    "*": {
-      boxSizing: "inherit"
-    },
-    "*::after": {
-      boxSizing: "inherit"
-    },
-    "*::before": {
-      boxSizing: "inherit"
-    }
+    display: "grid",
+    gridTemplateColumns: "\n      1fr\n      min(1280px, 100%)\n      1fr",
+    rowGap: "grid.l"
   },
   sizes: {},
   defaultProps: {}
-};
-var TemplateHeader = {
+}; // Elements that need to breakout will span outside
+// the center 1280px grid column.
+
+var TemplateBreakout = {
   baseStyle: {
-    marginBottom: "page.hstack"
+    width: "100%",
+    // This could be "1 / 4" and it would mean the same. This is
+    // "future-proof" the grid column assignment to the last column.
+    gridColumn: "1 / -1"
   }
 };
-var TemplateBreakout = {
-  baseStyle: /*#__PURE__*/_extends({}, breakout, {
-    width: "100vw",
-    marginBottom: "page.hstack"
-  })
-};
 var TemplateContent = {
-  baseStyle: /*#__PURE__*/_extends({}, wrapperStyles$1, {
-    display: "block",
-    marginBottom: "page.hstack"
-  }),
+  baseStyle: {
+    // Set this element to start on the second 1280px grid column.
+    gridColumn: "2",
+    // But this element also contains its own grid system within.
+    display: "grid",
+    gridTemplateColumns: "1fr",
+    paddingY: 0,
+    paddingX: "s",
+    gap: "grid.l"
+  },
+  // With left or right sidebars, we need to set two grid columns and
+  // the column for the sidebar is max 255px width.
   variants: {
-    sidebar: {
-      display: "flex",
-      flexFlow: {
-        base: "column nowrap",
-        md: "row wrap"
+    left: {
+      gridTemplateColumns: {
+        md: "255px 1fr"
+      }
+    },
+    right: {
+      gridTemplateColumns: {
+        md: "1fr 255px"
       }
     }
   }
 };
-var TemplateContentTop = {
+var TemplateContentTopBottom = {
   baseStyle: {
-    flex: "1 0 100%",
-    marginBottom: "page.hstack"
+    gridColumn: {
+      base: "1",
+      md: "1 / span 2"
+    },
+    height: "100%"
   }
 };
 var TemplateContentPrimary = {
-  baseStyle: {
-    flex: "1 1",
-    marginBottom: "page.hstack"
-  },
   variants: {
     left: {
-      display: "flex",
-      flexFlow: "column nowrap",
-      order: "1",
+      gridColumn: {
+        base: "1",
+        md: "2"
+      },
       marginEnd: {
         md: 0
       },
@@ -7170,37 +7408,23 @@ var TemplateContentPrimary = {
   }
 };
 var TemplateContentSidebar = {
-  baseStyle: {
-    flex: {
-      base: "0 0 auto",
-      md: "0 0 255px"
-    },
-    order: {
-      md: "page.vstack"
-    },
-    marginBottom: "page.hstack"
-  },
   variants: {
     left: {
-      marginEnd: {
-        base: 0,
-        md: "page.vstack"
-      }
+      gridColumn: "1"
     },
     right: {
-      marginStart: {
-        base: 0,
-        md: "page.vstack"
+      gridColumn: {
+        base: "1",
+        md: "2"
       }
     }
   }
 };
 var TemplateStyles = {
   Template: Template,
-  TemplateHeader: TemplateHeader,
   TemplateBreakout: TemplateBreakout,
   TemplateContent: TemplateContent,
-  TemplateContentTop: TemplateContentTop,
+  TemplateContentTopBottom: TemplateContentTopBottom,
   TemplateContentPrimary: TemplateContentPrimary,
   TemplateContentSidebar: TemplateContentSidebar
 };
@@ -12049,7 +12273,7 @@ var Tabs = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (pr
   }, React__default.createElement(react.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", "contentPrimary", "contentSidebar", "contentTop", "footer", "header", "sidebar", "renderFooterElement", "renderHeaderElement", "renderSkipNavigation"];
+var _excluded$29 = ["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.
@@ -12086,11 +12310,11 @@ var TemplateAboveHeader = function TemplateAboveHeader(props) {
  */
 
 
-var TemplateHeader$1 = function TemplateHeader(_ref) {
+var TemplateHeader = function TemplateHeader(_ref) {
   var children = _ref.children,
       _ref$renderHeaderElem = _ref.renderHeaderElement,
       renderHeaderElement = _ref$renderHeaderElem === void 0 ? true : _ref$renderHeaderElem;
-  var styles = react.useStyleConfig("TemplateHeader", {});
+  var styles = react.useStyleConfig("TemplateBreakout", {});
   var headerElement = React__default.createElement(react.Box, {
     __css: styles
   }, children); // The user wants to render the `header` HTML element.
@@ -12114,9 +12338,10 @@ var TemplateHeader$1 = function TemplateHeader(_ref) {
   return headerElement;
 };
 /**
- * This optional component should be used inside the `TemplateHeader` component.
- * This is meant to render its children from edge to edge and is most useful
- * for the `Breadcrumbs` and `Hero` components, and other banner-like components.
+ * This component should be used inside the `Template` component to contain both
+ * the `TemplateAboveHeader` and `TemplateHeader` components. This is meant to
+ * render its children from edge to edge and is most useful for the headers,
+ * `Breadcrumbs`, and `Hero` components or other banner-like components.
  */
 
 
@@ -12145,7 +12370,7 @@ var TemplateContent$1 = function TemplateContent(props) {
       _props$sidebar = props.sidebar,
       sidebar = _props$sidebar === void 0 ? "none" : _props$sidebar;
   var styles = react.useStyleConfig("TemplateContent", {
-    variant: sidebar !== "none" ? "sidebar" : null
+    variant: sidebar
   }); // Manually pass in the `sidebar` prop to the `TemplateContentPrimary` and
   // `TemplateContentSidebar` components.
 
@@ -12175,8 +12400,22 @@ var TemplateContent$1 = function TemplateContent(props) {
  */
 
 
-var TemplateContentTop$1 = function TemplateContentTop(props) {
-  var styles = react.useStyleConfig("TemplateContentTop", {});
+var TemplateContentTop = function TemplateContentTop(props) {
+  var styles = react.useStyleConfig("TemplateContentTopBottom", {});
+  return React__default.createElement(react.Box, {
+    __css: styles
+  }, props.children);
+};
+/**
+ * This optional component must be used inside the `TemplateContent` component
+ * and after the `TemplateContentPrimary` or `TemplateContentSidebar` component.
+ * This renders content in the main width of the container and should always
+ * render below the primary component and the sidebar component (if any).
+ */
+
+
+var TemplateContentBottom = function TemplateContentBottom(props) {
+  var styles = react.useStyleConfig("TemplateContentTopBottom", {});
   return React__default.createElement(react.Box, {
     __css: styles
   }, props.children);
@@ -12234,6 +12473,7 @@ var TemplateFooter = function TemplateFooter(_ref2) {
   var children = _ref2.children,
       _ref2$renderFooterEle = _ref2.renderFooterElement,
       renderFooterElement = _ref2$renderFooterEle === void 0 ? true : _ref2$renderFooterEle;
+  var styles = react.useStyleConfig("TemplateBreakout", {});
   var footerElement = React__default.createElement(React__default.Fragment, null, children); // The user wants to render the `footer` HTML element.
 
   if (renderFooterElement) {
@@ -12246,7 +12486,8 @@ var TemplateFooter = function TemplateFooter(_ref2) {
       }
     });
     footerElement = React__default.createElement(react.Box, {
-      as: "footer"
+      as: "footer",
+      __css: styles
     }, children);
   }
 
@@ -12266,6 +12507,7 @@ var TemplateAppContainer = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forward
       breakout = props.breakout,
       _props$contentId = props.contentId,
       contentId = _props$contentId === void 0 ? "mainContent" : _props$contentId,
+      contentBottom = props.contentBottom,
       contentPrimary = props.contentPrimary,
       contentSidebar = props.contentSidebar,
       contentTop = props.contentTop,
@@ -12282,20 +12524,20 @@ var TemplateAppContainer = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forward
       rest = _objectWithoutPropertiesLoose(props, _excluded$29);
 
   var aboveHeaderElem = aboveHeader && React__default.createElement(TemplateAboveHeader, null, aboveHeader);
-  var breakoutElem = breakout && React__default.createElement(TemplateBreakout$1, null, breakout);
-  var contentTopElem = contentTop && React__default.createElement(TemplateContentTop$1, null, contentTop);
+  var contentTopElem = contentTop && React__default.createElement(TemplateContentTop, null, contentTop);
   var contentPrimaryElem = contentPrimary && React__default.createElement(TemplateContentPrimary$1, null, contentPrimary);
+  var contentBottomElem = contentBottom && React__default.createElement(TemplateContentBottom, null, contentBottom);
   var contentSidebarElem = contentSidebar && React__default.createElement(TemplateContentSidebar$1, null, contentSidebar);
-  return React__default.createElement(Template$1, Object.assign({
+  return React__default.createElement(React__default.Fragment, null, renderSkipNavigation ? React__default.createElement(SkipNavigation$1, null) : null, React__default.createElement(Template$1, Object.assign({
     ref: ref
-  }, rest), renderSkipNavigation ? React__default.createElement(SkipNavigation$1, null) : null, aboveHeaderElem, (header || breakoutElem) && React__default.createElement(TemplateHeader$1, {
+  }, rest), React__default.createElement(TemplateBreakout$1, null, aboveHeaderElem, (header || breakout) && React__default.createElement(TemplateHeader, {
     renderHeaderElement: renderHeaderElement
-  }, header, breakoutElem), React__default.createElement(TemplateContent$1, {
+  }, header, breakout)), React__default.createElement(TemplateContent$1, {
     id: contentId,
     sidebar: sidebar
-  }, contentTopElem, sidebar === "left" && contentSidebarElem, contentPrimaryElem, sidebar === "right" && contentSidebarElem), footer && React__default.createElement(TemplateFooter, {
+  }, contentTopElem, sidebar === "left" && contentSidebarElem, contentPrimaryElem, sidebar === "right" && contentSidebarElem, contentBottomElem), footer && React__default.createElement(TemplateFooter, {
     renderFooterElement: renderFooterElement
-  }, footer));
+  }, footer)));
 }));
 
 var _excluded$2a = ["defaultChecked", "helperText", "id", "invalidText", "isChecked", "isDisabled", "isInvalid", "isRequired", "labelText", "name", "onChange", "size"];
@@ -12374,94 +12616,6 @@ var Toggle$2 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function
   }), labelText)));
 }));
 
-/**
- * A custom hook that returns the Chakra-based NYPL theme object. This must be
- * used inside a component that is wrapped in the `DSProvider` component, so
- * that the theme object can be available to use.
- */
-
-function useNYPLTheme() {
-  var theme = react.useTheme();
-
-  if (!theme || Object.keys(theme).length === 0) {
-    console.warn("NYPL Reservoir useNYPLTheme: hook must be used inside of `<DSProvider />`.");
-    return {};
-  } // Chakra provides a lot of their own styles but
-  // only NYPL styles should be exported.
-
-
-  return {
-    // base, sm, md, lg, xl, 2xl
-    breakpoints: theme.breakpoints,
-    colors: {
-      // primary, secondary
-      brand: theme.colors.brand,
-      // blogs, books-and-more, education, locations,
-      // research, research-library, whats-on
-      section: theme.colors.section,
-      transparent: theme.colors.transparent,
-      // black, disabled, error, focus, gray, link,
-      // status, success, test, warning, white
-      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$2b = ["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,
@@ -12716,9 +12870,9 @@ exports.TemplateBreakout = TemplateBreakout$1;
 exports.TemplateContent = TemplateContent$1;
 exports.TemplateContentPrimary = TemplateContentPrimary$1;
 exports.TemplateContentSidebar = TemplateContentSidebar$1;
-exports.TemplateContentTop = TemplateContentTop$1;
+exports.TemplateContentTop = TemplateContentTop;
 exports.TemplateFooter = TemplateFooter;
-exports.TemplateHeader = TemplateHeader$1;
+exports.TemplateHeader = TemplateHeader;
 exports.Text = Text;
 exports.TextInput = TextInput;
 exports.Toggle = Toggle$2;