@nypl/design-system-react-components 0.25.9 → 0.25.10

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

@@ -1,5 +1,5 @@
-import { useStyleConfig, Icon as Icon$2, Box, Accordion as Accordion$2, AccordionPanel, AccordionItem, AccordionButton, Breadcrumb as Breadcrumb$1, BreadcrumbItem, BreadcrumbLink, Button as Button$2, Heading as Heading$2, useMultiStyleConfig, LinkBox, LinkOverlay, Checkbox as Checkbox$2, CheckboxGroup as CheckboxGroup$2, Stack, SimpleGrid as SimpleGrid$1, Input, Textarea, extendTheme, ChakraProvider, CircularProgress, CircularProgressLabel, Progress, Radio as Radio$2, useRadioGroup, Text as Text$2, Select as Select$2, Skeleton as Skeleton$1, RangeSlider, RangeSliderTrack, RangeSliderFilledTrack, RangeSliderThumb, Slider as Slider$1, SliderTrack, SliderFilledTrack, SliderThumb, Tabs as Tabs$1, Tab, TabPanel, TabList, TabPanels, Switch as Switch$1, useTheme, Thead, Tr, Th, TableCaption, Table as Table$1, Tbody, Td } from '@chakra-ui/react';
-export { Box, ButtonGroup, Center, Circle, Grid, GridItem, HStack, Square, Stack, Tab, TabList, TabPanel, TabPanels, VStack } from '@chakra-ui/react';
+import { useStyleConfig, Icon as Icon$2, Box, Accordion as Accordion$2, AccordionPanel, AccordionItem, AccordionButton, Breadcrumb as Breadcrumb$1, BreadcrumbItem, BreadcrumbLink, Button as Button$2, Heading as Heading$2, useMultiStyleConfig, LinkBox, LinkOverlay, Checkbox as Checkbox$2, CheckboxGroup as CheckboxGroup$2, Stack, SimpleGrid as SimpleGrid$1, Input, Textarea, extendTheme, ChakraProvider, CircularProgress, CircularProgressLabel, Progress, Radio as Radio$2, useRadioGroup, Text as Text$2, Select as Select$2, Skeleton as Skeleton$1, RangeSlider, RangeSliderTrack, RangeSliderFilledTrack, RangeSliderThumb, Slider as Slider$1, SliderTrack, SliderFilledTrack, SliderThumb, Tabs as Tabs$1, Tab, TabPanel, TabList, TabPanels, Switch as Switch$1, useTheme, TableCaption, Thead, Tr, Th, Table as Table$1, Tbody, Td } from '@chakra-ui/react';
+export { Box, ButtonGroup, Center, Circle, Flex, Grid, GridItem, HStack, Spacer, Square, Stack, Tab, TabList, TabPanel, TabPanels, VStack } from '@chakra-ui/react';
 import React__default, { createElement, cloneElement, Fragment, Children, forwardRef, useState, Component, useEffect } from 'react';
 import { v4 } from 'uuid';
 import ReactDatePicker from 'react-datepicker';
@@ -1168,13 +1168,14 @@ function Icon(props) {
  * is open or closed.
  */
 
-var getIcon = function getIcon(isExpanded) {
+var getIcon = function getIcon(isExpanded, index, id) {
   if (isExpanded === void 0) {
     isExpanded = false;
   }
 
   var iconName = isExpanded ? IconNames.Minus : IconNames.Plus;
   return createElement(Icon, {
+    id: "accordion-" + id + "-icon-" + index,
     name: iconName,
     size: IconSizes.Small
   });
@@ -1186,7 +1187,7 @@ var getIcon = function getIcon(isExpanded) {
  */
 
 
-var getElementsFromContentData = function getElementsFromContentData(data) {
+var getElementsFromContentData = function getElementsFromContentData(data, id) {
   var _data;
 
   if (data === void 0) {
@@ -1199,23 +1200,27 @@ var getElementsFromContentData = function getElementsFromContentData(data) {
   return data.map(function (content, index) {
     // This is done to support both string and DOM element input.
     var panel = typeof content.panel === "string" ? createElement(AccordionPanel, {
+      id: id + "-panel-" + index,
       key: index,
       dangerouslySetInnerHTML: {
         __html: content.panel
       }
     }) : createElement(AccordionPanel, {
+      id: id + "-panel-" + index,
       key: index
     }, content.panel);
     return createElement(AccordionItem, {
+      id: id + "-item-" + index,
       key: index
     }, function (_ref) {
       var isExpanded = _ref.isExpanded;
       return createElement(Fragment, null, createElement(AccordionButton, {
+        id: id + "-button-" + index,
         padding: multiplePadding
       }, createElement(Box, {
         flex: "1",
         textAlign: "left"
-      }, content.label), getIcon(isExpanded)), panel);
+      }, content.label), getIcon(isExpanded, index, id)), panel);
     });
   });
 };
@@ -1237,7 +1242,7 @@ function Accordion(props) {
     id: id,
     defaultIndex: [openFirstAccordion],
     allowMultiple: true
-  }, getElementsFromContentData(contentData));
+  }, getElementsFromContentData(contentData, id));
 }
 
 var ColorVariants;
@@ -1336,11 +1341,15 @@ function Breadcrumbs(props) {
   var finalStyles = _extends({}, styles, additionalStyles);
 
   var breadcrumbItems = getElementsFromData(breadcrumbsData, id);
-  return createElement(Breadcrumb$1, {
+  var ariaAttrs = {
+    "aria-label": "Breadcrumb"
+  };
+  return createElement(Breadcrumb$1, Object.assign({
     className: className,
-    __css: finalStyles,
     id: id
-  }, breadcrumbItems);
+  }, ariaAttrs, {
+    __css: finalStyles
+  }), breadcrumbItems);
 }
 
 var ButtonTypes;
@@ -1891,7 +1900,7 @@ function Card(props) {
         mainActionLink: mainActionLink
       }, child.props.children) : child.props.children;
       var elem = cloneElement(child, {
-        additionalStyles: styles.heading,
+        additionalStyles: _extends({}, styles.heading, child.props.additionalStyles),
         key: key,
         center: center,
         // Override the child text with the potential `CardLinkOverlay`.
@@ -2315,9 +2324,15 @@ function FormRow(props) {
   var count = Children.count(children);
   var alteredChildren = Children.map(children, function (child, i) {
     if (!child) return null;
-    return cloneElement(child, {
-      id: id + "-grandchild" + i
-    });
+
+    if (child.type === FormField || child.props.mdxType === "FormField") {
+      return cloneElement(child, {
+        id: id + "-grandchild" + i
+      });
+    }
+
+    console.warn("FormRow children must be `FormField` components.");
+    return null;
   });
   return createElement(SimpleGrid, {
     columns: count,
@@ -2346,29 +2361,29 @@ function Form(props) {
   var action = props.action,
       children = props.children,
       className = props.className,
+      _props$gap = props.gap,
+      gap = _props$gap === void 0 ? GridGaps.Large : _props$gap,
       _props$id = props.id,
       id = _props$id === void 0 ? generateUUID() : _props$id,
       method = props.method,
-      _props$spacing = props.spacing,
-      spacing = _props$spacing === void 0 ? GridGaps.Large : _props$spacing;
+      onSubmit = props.onSubmit;
   var attributes = {};
   action && (attributes["action"] = action);
   method && (method === "get" || method === "post") && (attributes["method"] = method);
   var alteredChildren = Children.map(children, function (child, i) {
     return cloneElement(child, {
-      gap: spacing,
+      gap: gap,
       id: id + "-child" + i
     });
   });
-  return createElement(Box, Object.assign({
-    as: "form",
+  return createElement("form", Object.assign({
     "aria-label": "form",
-    id: id
-  }, attributes, {
-    className: className
-  }), createElement(SimpleGrid, {
+    className: className,
+    id: id,
+    onSubmit: onSubmit
+  }, attributes), createElement(SimpleGrid, {
     columns: 1,
-    gap: spacing,
+    gap: gap,
     id: id + "-parent"
   }, alteredChildren));
 }
@@ -3342,7 +3357,7 @@ var Breadcrumb = {
         marginInlineStart: "xxs"
       }
     },
-    "li:nth-last-child(2)": {
+    "li:nth-last-of-type(2)": {
       display: "inline-block",
       span: {
         display: {
@@ -5451,6 +5466,15 @@ var baseStyle$3 = function baseStyle(_ref) {
       showRowDividers = _ref.showRowDividers,
       useRowHeaders = _ref.useRowHeaders;
   return {
+    // Headers `th` can be rendered as the first cell in every row through the
+    // `useRowHeaders`. Whereas the header `th` in the `thead` can be rendered
+    // with a custom color, the row header `th` in the `tbody` should always
+    // have text color black.
+    tbody: {
+      th: {
+        color: "var(--nypl-colors-ui-black)"
+      }
+    },
     th: {
       border: showRowDividers ? undefined : "none",
       borderBottom: showRowDividers ? undefined : "0px",
@@ -5483,11 +5507,15 @@ var baseStyle$3 = function baseStyle(_ref) {
     },
     caption: {
       captionSide: "top",
-      textAlign: "left",
-      fontSize: "heading.secondary",
       color: "ui.black",
-      textTransform: "capitalize",
-      fontWeight: "heading.secondary"
+      fontSize: "heading.secondary",
+      fontWeight: "heading.secondary",
+      marginBottom: "s",
+      marginLeft: "0",
+      marginRight: "0",
+      marginTop: "0",
+      padding: "0",
+      textAlign: "left"
     }
   };
 };
@@ -6040,7 +6068,7 @@ function HorizontalRule$1(props) {
       _props$height = props.height,
       height = _props$height === void 0 ? "2px" : _props$height,
       _props$width = props.width,
-      width = _props$width === void 0 ? "auto" : _props$width;
+      width = _props$width === void 0 ? "100%" : _props$width;
   var styles = useStyleConfig("HorizontalRule", {
     align: align
   });
@@ -6154,7 +6182,7 @@ function List$1(props) {
     Children.map(children, function (child) {
       var _child$props;
 
-      if ((child == null ? void 0 : child.type) !== "li" && (child == null ? void 0 : (_child$props = child.props) == null ? void 0 : _child$props.mdxType) !== "li") {
+      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("Direct children of `List` (" + listType + ") should be `<li>`s.");
       }
     });
@@ -7078,8 +7106,7 @@ var Pagination$1 = function Pagination(props) {
       id = _props$id === void 0 ? generateUUID() : _props$id,
       _props$initialPage = props.initialPage,
       initialPage = _props$initialPage === void 0 ? 1 : _props$initialPage,
-      _props$onPageChange = props.onPageChange,
-      onPageChange = _props$onPageChange === void 0 ? function () {} : _props$onPageChange,
+      onPageChange = props.onPageChange,
       pageCount = props.pageCount;
 
   var _useState = useState(initialPage),
@@ -7109,7 +7136,7 @@ var Pagination$1 = function Pagination(props) {
     e.preventDefault && e.preventDefault();
     if (currentPage === selectedPage) return;
     setCurrentPage(selectedPage);
-    onPageChange(selectedPage);
+    onPageChange && onPageChange(selectedPage);
   }; // Select the previous page.
 
 
@@ -7476,16 +7503,16 @@ var RadioGroup$1 = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var styles = useMultiStyleConfig("RadioGroup", {});
   return createElement(Fieldset, {
-    id: "radio-group-" + id,
     className: className,
+    id: "radio-group-" + id,
     isLegendHidden: !showLabel,
     legendText: labelText,
     optReqFlag: optReqFlag
   }, createElement(Stack, Object.assign({
+    "aria-label": !showLabel ? labelText : null,
     direction: [layout],
     spacing: spacingProp,
-    ref: ref,
-    "aria-label": !showLabel ? labelText : null
+    ref: ref
   }, radioGroupProps, {
     sx: styles.stack
   }), newChildren), footnote && showHelperInvalidText && createElement(Box, {
@@ -7655,6 +7682,7 @@ var Select$1 = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     ref: ref
   }, controlledProps, ariaAttributes, {
     icon: React__default.createElement(Icon, {
+      id: id + "-icon",
       name: IconNames.Arrow,
       size: IconSizes.Medium
     }),
@@ -7710,8 +7738,6 @@ function SearchBar$1(props) {
     showHelperInvalidText: false,
     showLabel: false
   };
-  var helperErrorTextID = generateUUID();
-  var ariaDescribedby = helperErrorTextID;
   var footnote = isInvalid ? invalidText : helperText;
   var finalAriaLabel = footnote ? labelText + " - " + footnote : labelText;
   var textInputPlaceholder = (textInputProps == null ? void 0 : textInputProps.placeholder) + " " + (isRequired ? "(Required)" : "");
@@ -7727,9 +7753,10 @@ function SearchBar$1(props) {
   }; // Render the `Select` component.
 
   var selectElem = selectProps && createElement(Select$1, Object.assign({
-    id: generateUUID(),
-    name: selectProps == null ? void 0 : selectProps.name,
+    id: "searchbar-select-" + id,
     labelText: selectProps == null ? void 0 : selectProps.labelText,
+    name: selectProps == null ? void 0 : selectProps.name,
+    onChange: selectProps == null ? void 0 : selectProps.onChange,
     type: SelectTypes.SearchBar
   }, stateProps), selectProps == null ? void 0 : selectProps.optionsData.map(function (option) {
     return createElement("option", {
@@ -7739,11 +7766,11 @@ function SearchBar$1(props) {
   })); // Render the `TextInput` component.
 
   var textInputNative = textInputProps && createElement(TextInput, Object.assign({
-    id: generateUUID(),
+    id: "searchbar-textinput-" + id,
     labelText: textInputProps == null ? void 0 : textInputProps.labelText,
-    placeholder: textInputPlaceholder,
-    onChange: textInputProps == null ? void 0 : textInputProps.onChange,
     name: textInputProps == null ? void 0 : textInputProps.name,
+    onChange: textInputProps == null ? void 0 : textInputProps.onChange,
+    placeholder: textInputPlaceholder,
     type: TextInputTypes.text,
     variantType: selectElem ? TextInputVariants.SearchBarSelect : TextInputVariants.SearchBar,
     value: textInputProps == null ? void 0 : textInputProps.value
@@ -7752,16 +7779,17 @@ function SearchBar$1(props) {
   var buttonElem = createElement(Button, {
     additionalStyles: searchBarButtonStyles,
     buttonType: buttonType,
-    id: generateUUID(),
+    id: "searchbar-button-" + id,
     isDisabled: isDisabled,
     onClick: buttonOnClick,
     type: "submit"
   }, createElement(Icon, {
+    align: IconAlign.Left,
+    id: "searchbar-icon-" + id,
     name: IconNames.Search,
-    size: IconSizes.Small,
-    align: IconAlign.Left
-  }), "Search"); // If a custom input element was passed, use that instead of the
-  // `TextInput` component.
+    size: IconSizes.Small
+  }), "Search"); // If a custom input element was passed, use that element
+  // instead of the DS `TextInput` component.
 
   var textInputElem = textInputElement || textInputNative;
   return createElement(ComponentWrapper$1, {
@@ -7773,11 +7801,10 @@ function SearchBar$1(props) {
     isInvalid: isInvalid
   }, createElement(Box, {
     as: "form",
-    id: id + "-form",
+    id: "searchbar-form-" + id,
     className: className,
     role: "search",
     "aria-label": finalAriaLabel,
-    "aria-describedby": ariaDescribedby,
     onSubmit: onSubmit,
     method: method,
     action: action,
@@ -8349,11 +8376,14 @@ var getElementsFromContentData$1 = function getElementsFromContentData(data, use
   var panels = [];
 
   if (!(data != null && data.length)) {
-    return {};
+    return {
+      tabs: [],
+      panels: []
+    };
   }
 
   if ((data == null ? void 0 : data.length) > 6) {
-    console.warn("We recommend to use no more than six tabs. If more than six tabs are " + "needed, consider other navigational patterns.");
+    console.warn("Tabs: We recommend to use no more than six tabs. If more than six tabs " + "are needed, consider other navigational patterns.");
   }
 
   data.forEach(function (tab, index) {
@@ -8369,10 +8399,10 @@ var getElementsFromContentData$1 = function getElementsFromContentData(data, use
 
     if (typeof tab.content === "string") {
       tempPanel = createElement(TabPanel, {
-        key: index,
         dangerouslySetInnerHTML: {
           __html: tab.content
-        }
+        },
+        key: index
       });
     } else {
       tempPanel = createElement(TabPanel, {
@@ -8399,7 +8429,10 @@ var getElementsFromChildren = function getElementsFromChildren(children) {
   var panels = [];
 
   if (!(children != null && children.length)) {
-    return {};
+    return {
+      tabs: [],
+      panels: []
+    };
   }
 
   children.forEach(function (child) {
@@ -8408,7 +8441,7 @@ var getElementsFromChildren = function getElementsFromChildren(children) {
       var childTabs = Children.count(child.props.children);
 
       if (childTabs > 6) {
-        console.warn("We recommend to use no more than six tabs. If more than six tabs are " + "needed, consider other navigational patterns.");
+        console.warn("Tabs: We recommend to use no more than six tabs. If more than six " + "tabs are needed, consider other navigational patterns.");
       }
     }
 
@@ -8453,7 +8486,11 @@ function Tabs(props) {
 
   var _ref = contentData ? getElementsFromContentData$1(contentData, useHash) : getElementsFromChildren(children),
       tabs = _ref.tabs,
-      panels = _ref.panels; // `tabs` is an array for the children component approach but an object for
+      panels = _ref.panels;
+
+  if (!tabs.length || !panels.length) {
+    console.warn("Tabs: Pass data in the `data` props or as children.");
+  } // `tabs` is an array for the children component approach but an object for
   // the `contentData` prop approach. We need to get the right props key value
   // to set the carousel's length.
 
@@ -8479,43 +8516,47 @@ function Tabs(props) {
     }
   }, [goToStart, windowDimensions.width]);
   var previousButton = createElement(Button, {
-    buttonType: ButtonTypes.Primary,
     attributes: _extends({
       "aria-label": "Previous"
     }, styles.buttonArrows, {
       left: "0"
     }),
+    buttonType: ButtonTypes.Primary,
+    id: "tabs-previous-" + id,
     onClick: prevSlide
   }, createElement(Icon, {
-    name: IconNames.Arrow,
     iconRotation: IconRotationTypes.Rotate90,
+    id: "tabs-previous-icon-" + id,
+    name: IconNames.Arrow,
     size: IconSizes.Small
   }));
   var nextButton = createElement(Button, {
-    buttonType: ButtonTypes.Primary,
     attributes: _extends({
       "aria-label": "Next"
     }, styles.buttonArrows, {
       right: "0"
     }),
+    buttonType: ButtonTypes.Primary,
+    id: "tabs-next-" + id,
     onClick: nextSlide
   }, createElement(Icon, {
-    name: IconNames.Arrow,
     iconRotation: IconRotationTypes.Rotate270,
+    id: "tabs-next-icon-" + id,
+    name: IconNames.Arrow,
     size: IconSizes.Small
   }));
 
   if (children && contentData != null && contentData.length) {
-    console.warn("Only pass children or data in the `data` props but not both.");
+    console.warn("Tabs: Only pass children or data in the `data` props but not both.");
   }
 
   return createElement(Tabs$1, {
-    id: id,
-    onChange: onChange,
     defaultIndex: defaultIndex,
-    variant: "enclosed",
+    id: id,
     // The following lazy loads each panel whenever it is needed.
-    isLazy: true
+    isLazy: true,
+    onChange: onChange,
+    variant: "enclosed"
   }, createElement(Box, {
     __css: styles.tablistWrapper,
     sx: {
@@ -8541,18 +8582,57 @@ var Template$1 = function Template(props) {
   }, props.children);
 };
 /**
- * This optional component should be the first child of the `Template`
- * component. This is rendered as an HTML `<header>` element.
+ * This optional component renders its children from edge-to-edge and should
+ * be used for alerts or notifications that are typically site-wide. This must
+ * be rendered immediately before the `TemplateHeader` component. This is meant
+ * for components that render an `aside` HTML element or HTML element with the
+ * `role="complementary"` attribute. These elements should *not* be rendered
+ * in the `header` HTML section since that's an accessibility violation.
  */
 
 
-var TemplateHeader$1 = function TemplateHeader(props) {
-  var styles = useStyleConfig("TemplateHeader", {});
+var TemplateAboveHeader = function TemplateAboveHeader(props) {
+  var styles = useStyleConfig("TemplateBreakout", {});
   return createElement(Box, {
-    as: "header",
     __css: styles
   }, props.children);
 };
+/**
+ * This optional component should be the first child of the `Template`
+ * component. This is rendered as an HTML `<header>` element. If an HTML
+ * `<header>` element is already passed in a custom component as the children,
+ * set `renderFooterElement` to `false`. Otherwise, the parent wrapper will
+ * render an HTML `<header>` element.
+ */
+
+
+var TemplateHeader$1 = function TemplateHeader(_ref) {
+  var children = _ref.children,
+      _ref$renderHeaderElem = _ref.renderHeaderElement,
+      renderHeaderElement = _ref$renderHeaderElem === void 0 ? true : _ref$renderHeaderElem;
+  var styles = useStyleConfig("TemplateHeader", {});
+  var headerElement = createElement(Box, {
+    __css: styles
+  }, children); // The user wants to render the `header` HTML element.
+
+  if (renderHeaderElement) {
+    // But if they passed in a component that renders an HTML `<header>`,
+    // then log a warning.
+    Children.map(children, function (child) {
+      var _child$props;
+
+      if ((child == null ? void 0 : child.type) === "header" || (child == null ? void 0 : (_child$props = child.props) == null ? void 0 : _child$props.mdxType) === "header") {
+        console.warn("`TemplateHeader`: An HTML `header` element was passed in. Set " + "`renderHeaderElement` to `false` to avoid nested HTML `header` elements.");
+      }
+    });
+    headerElement = createElement(Box, {
+      as: "header",
+      __css: styles
+    }, children);
+  }
+
+  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
@@ -8586,11 +8666,11 @@ var TemplateContent$1 = function TemplateContent(props) {
   // `TemplateContentSidebar` components.
 
   var newChildren = Children.map(children, function (child) {
-    var _child$props, _child$props2;
+    var _child$props2, _child$props3;
 
     var newChild = child;
 
-    if (child && (child == null ? void 0 : child.type) === TemplateContentPrimary$1 || child != null && child.props && ((_child$props = child.props) == null ? void 0 : _child$props.mdxType) === "TemplateContentPrimary" || (child == null ? void 0 : child.type) === TemplateContentSidebar$1 || child != null && child.props && ((_child$props2 = child.props) == null ? void 0 : _child$props2.mdxType) === "TemplateContentSidebar") {
+    if (child && (child == null ? void 0 : child.type) === TemplateContentPrimary$1 || child != null && child.props && ((_child$props2 = child.props) == null ? void 0 : _child$props2.mdxType) === "TemplateContentPrimary" || (child == null ? void 0 : child.type) === TemplateContentSidebar$1 || child != null && child.props && ((_child$props3 = child.props) == null ? void 0 : _child$props3.mdxType) === "TemplateContentSidebar") {
       newChild = cloneElement(child, {
         sidebar: sidebar
       });
@@ -8665,18 +8745,18 @@ var TemplateContentSidebar$1 = function TemplateContentSidebar(props) {
  */
 
 
-var TemplateFooter = function TemplateFooter(_ref) {
-  var children = _ref.children,
-      _ref$renderFooterElem = _ref.renderFooterElement,
-      renderFooterElement = _ref$renderFooterElem === void 0 ? true : _ref$renderFooterElem;
+var TemplateFooter = function TemplateFooter(_ref2) {
+  var children = _ref2.children,
+      _ref2$renderFooterEle = _ref2.renderFooterElement,
+      renderFooterElement = _ref2$renderFooterEle === void 0 ? true : _ref2$renderFooterEle;
   var footerElement = createElement(Fragment, null, children); // The user wants to render the `footer` HTML element.
 
   if (renderFooterElement) {
     // But give a warning if one was passed.
     Children.map(children, function (child) {
-      var _child$props3;
+      var _child$props4;
 
-      if ((child == null ? void 0 : child.type) === "footer" || (child == null ? void 0 : (_child$props3 = child.props) == null ? void 0 : _child$props3.mdxType) === "footer") {
+      if ((child == null ? void 0 : child.type) === "footer" || (child == null ? void 0 : (_child$props4 = child.props) == null ? void 0 : _child$props4.mdxType) === "footer") {
         console.warn("`TemplateFooter`: An HTML `footer` element was passed in. Set " + "`renderFooterElement` to `false` to avoid nested HTML `footer` elements.");
       }
     });
@@ -8697,7 +8777,8 @@ var TemplateFooter = function TemplateFooter(_ref) {
 
 
 var TemplateAppContainer = function TemplateAppContainer(props) {
-  var breakout = props.breakout,
+  var aboveHeader = props.aboveHeader,
+      breakout = props.breakout,
       contentPrimary = props.contentPrimary,
       contentSidebar = props.contentSidebar,
       contentTop = props.contentTop,
@@ -8706,12 +8787,17 @@ var TemplateAppContainer = function TemplateAppContainer(props) {
       _props$sidebar2 = props.sidebar,
       sidebar = _props$sidebar2 === void 0 ? "none" : _props$sidebar2,
       _props$renderFooterEl = props.renderFooterElement,
-      renderFooterElement = _props$renderFooterEl === void 0 ? true : _props$renderFooterEl;
+      renderFooterElement = _props$renderFooterEl === void 0 ? true : _props$renderFooterEl,
+      _props$renderHeaderEl = props.renderHeaderElement,
+      renderHeaderElement = _props$renderHeaderEl === void 0 ? true : _props$renderHeaderEl;
+  var aboveHeaderElem = aboveHeader && createElement(TemplateAboveHeader, null, aboveHeader);
   var breakoutElem = breakout && createElement(TemplateBreakout$1, null, breakout);
   var contentTopElem = contentTop && createElement(TemplateContentTop$1, null, contentTop);
   var contentPrimaryElem = contentPrimary && createElement(TemplateContentPrimary$1, null, contentPrimary);
   var contentSidebarElem = contentSidebar && createElement(TemplateContentSidebar$1, null, contentSidebar);
-  return createElement(Template$1, null, (header || breakoutElem) && createElement(TemplateHeader$1, null, header, breakoutElem), createElement(TemplateContent$1, {
+  return createElement(Template$1, null, aboveHeaderElem, (header || breakoutElem) && createElement(TemplateHeader$1, {
+    renderHeaderElement: renderHeaderElement
+  }, header, breakoutElem), createElement(TemplateContent$1, {
     sidebar: sidebar
   }, contentTopElem, sidebar === "left" && contentSidebarElem, contentPrimaryElem, sidebar === "right" && contentSidebarElem), footer && createElement(TemplateFooter, {
     renderFooterElement: renderFooterElement
@@ -8945,6 +9031,11 @@ function VideoPlayer$1(props) {
   }, embedElement)));
 }
 
+/**
+ * Basic `Table` component used to organize and display tabular data in
+ * rows and columns.
+ */
+
 function Table(props) {
   var className = props.className,
       columnHeaders = props.columnHeaders,
@@ -8952,12 +9043,12 @@ function Table(props) {
       columnHeadersTextColor = props.columnHeadersTextColor,
       _props$id = props.id,
       id = _props$id === void 0 ? generateUUID() : _props$id,
-      _props$useRowHeaders = props.useRowHeaders,
-      useRowHeaders = _props$useRowHeaders === void 0 ? false : _props$useRowHeaders,
       _props$showRowDivider = props.showRowDividers,
       showRowDividers = _props$showRowDivider === void 0 ? false : _props$showRowDivider,
       tableData = props.tableData,
-      titleText = props.titleText;
+      titleText = props.titleText,
+      _props$useRowHeaders = props.useRowHeaders,
+      useRowHeaders = _props$useRowHeaders === void 0 ? false : _props$useRowHeaders;
   var customColors = {};
   columnHeadersBackgroundColor && (customColors["backgroundColor"] = columnHeadersBackgroundColor);
   columnHeadersTextColor && (customColors["color"] = columnHeadersTextColor);
@@ -8966,18 +9057,23 @@ function Table(props) {
     showRowDividers: showRowDividers,
     useRowHeaders: useRowHeaders
   });
-  var columnHeadersElems = columnHeaders && createElement(Thead, null, createElement(Tr, null, columnHeaders.map(function (child, key) {
+  var tableCaption = titleText && createElement(TableCaption, null, titleText);
+  var columnHeadersElems = (columnHeaders == null ? void 0 : columnHeaders.length) > 0 && createElement(Thead, null, createElement(Tr, null, columnHeaders.map(function (child, key) {
     return createElement(Th, {
-      scope: "col",
       key: key,
+      scope: "col",
       sx: customColors
     }, child);
   })));
+  /**
+   * This renders a normal `tbody` DOM element structure if the `tableData`
+   * passed is a two-dimensional array. This is to render the appropriate
+   * row and column structure for a table.
+   */
 
   var tableBodyElems = function tableBodyElems() {
-    /** tableData value should be two dimensional array */
     if (!Array.isArray(tableData) || tableData.length <= 0 || tableData[0].constructor !== Array) {
-      console.warn("Table data should be two dimensional array.");
+      console.warn("Table: data should be two dimensional array.");
       return null;
     }
 
@@ -8995,7 +9091,6 @@ function Table(props) {
     }));
   };
 
-  var tableCaption = titleText && createElement(TableCaption, null, titleText);
   return createElement(Table$1, {
     id: id,
     sx: styles,
@@ -9003,5 +9098,5 @@ function Table(props) {
   }, tableCaption, columnHeadersElems, tableBodyElems());
 }
 
-export { Accordion, Breadcrumbs, Button, ButtonTypes, Card, CardActions, CardContent, CardHeading, CardLayouts, Checkbox, CheckboxGroup, CheckboxGroupLayoutTypes, ColorVariants, DSProvider, DatePicker, DatePickerTypes, Fieldset, Form, FormField, FormRow, GridGaps as FormSpacing, GridGaps, Heading, HeadingDisplaySizes, HeadingLevels, HelperErrorText, Hero$1 as Hero, HeroTypes, HorizontalRule$1 as HorizontalRule, Icon, IconAlign, IconColors, IconNames, IconRotationTypes, IconSizes, IconTypes, Image, ImageRatios, ImageSizes, ImageTypes, Label, Link, LinkTypes, List$1 as List, ListTypes, Logo$1 as Logo, LogoColors, LogoNames, LogoSizes, Modal, Notification$1 as Notification, NotificationTypes, Pagination$1 as Pagination, ProgressIndicator$1 as ProgressIndicator, ProgressIndicatorSizes, ProgressIndicatorTypes, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RadioGroupLayoutTypes, SearchBar$1 as SearchBar, Select$1 as Select, SimpleGrid, SkeletonLoader$1 as SkeletonLoader, SkeletonLoaderImageRatios, SkeletonLoaderLayouts, Slider, StatusBadge$1 as StatusBadge, StatusBadgeTypes, StructuredContent$1 as StructuredContent, StructuredContentImagePosition, Table, Tabs, Template$1 as Template, TemplateAppContainer, TemplateBreakout$1 as TemplateBreakout, TemplateContent$1 as TemplateContent, TemplateContentPrimary$1 as TemplateContentPrimary, TemplateContentSidebar$1 as TemplateContentSidebar, TemplateContentTop$1 as TemplateContentTop, TemplateFooter, TemplateHeader$1 as TemplateHeader, Text$1 as Text, TextDisplaySizes, TextInput, TextInputTypes, Toggle$2 as Toggle, ToggleSizes, VideoPlayer$1 as VideoPlayer, VideoPlayerAspectRatios, VideoPlayerTypes, useNYPLTheme };
+export { Accordion, Breadcrumbs, Button, ButtonTypes, Card, CardActions, CardContent, CardHeading, CardLayouts, Checkbox, CheckboxGroup, CheckboxGroupLayoutTypes, ColorVariants, DSProvider, DatePicker, DatePickerTypes, Fieldset, Form, FormField, GridGaps as FormGaps, FormRow, GridGaps, Heading, HeadingDisplaySizes, HeadingLevels, HelperErrorText, Hero$1 as Hero, HeroTypes, HorizontalRule$1 as HorizontalRule, Icon, IconAlign, IconColors, IconNames, IconRotationTypes, IconSizes, IconTypes, Image, ImageRatios, ImageSizes, ImageTypes, Label, Link, LinkTypes, List$1 as List, ListTypes, Logo$1 as Logo, LogoColors, LogoNames, LogoSizes, Modal, Notification$1 as Notification, NotificationTypes, Pagination$1 as Pagination, ProgressIndicator$1 as ProgressIndicator, ProgressIndicatorSizes, ProgressIndicatorTypes, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RadioGroupLayoutTypes, SearchBar$1 as SearchBar, Select$1 as Select, SimpleGrid, SkeletonLoader$1 as SkeletonLoader, SkeletonLoaderImageRatios, SkeletonLoaderLayouts, Slider, StatusBadge$1 as StatusBadge, StatusBadgeTypes, StructuredContent$1 as StructuredContent, StructuredContentImagePosition, 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$1 as TemplateContentTop, TemplateFooter, TemplateHeader$1 as TemplateHeader, Text$1 as Text, TextDisplaySizes, TextInput, TextInputTypes, Toggle$2 as Toggle, ToggleSizes, VideoPlayer$1 as VideoPlayer, VideoPlayerAspectRatios, VideoPlayerTypes, useNYPLTheme };
 //# sourceMappingURL=design-system-react-components.esm.js.map