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

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

@@ -1163,13 +1163,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 ? exports.IconNames.Minus : exports.IconNames.Plus;
   return React.createElement(Icon, {
+    id: "accordion-" + id + "-icon-" + index,
     name: iconName,
     size: exports.IconSizes.Small
   });
@@ -1181,7 +1182,7 @@ var getIcon = function getIcon(isExpanded) {
  */
 
 
-var getElementsFromContentData = function getElementsFromContentData(data) {
+var getElementsFromContentData = function getElementsFromContentData(data, id) {
   var _data;
 
   if (data === void 0) {
@@ -1194,23 +1195,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" ? React.createElement(react.AccordionPanel, {
+      id: id + "-panel-" + index,
       key: index,
       dangerouslySetInnerHTML: {
         __html: content.panel
       }
     }) : React.createElement(react.AccordionPanel, {
+      id: id + "-panel-" + index,
       key: index
     }, content.panel);
     return React.createElement(react.AccordionItem, {
+      id: id + "-item-" + index,
       key: index
     }, function (_ref) {
       var isExpanded = _ref.isExpanded;
       return React.createElement(React.Fragment, null, React.createElement(react.AccordionButton, {
+        id: id + "-button-" + index,
         padding: multiplePadding
       }, React.createElement(react.Box, {
         flex: "1",
         textAlign: "left"
-      }, content.label), getIcon(isExpanded)), panel);
+      }, content.label), getIcon(isExpanded, index, id)), panel);
     });
   });
 };
@@ -1232,7 +1237,7 @@ function Accordion(props) {
     id: id,
     defaultIndex: [openFirstAccordion],
     allowMultiple: true
-  }, getElementsFromContentData(contentData));
+  }, getElementsFromContentData(contentData, id));
 }
 
 (function (ColorVariants) {
@@ -1329,11 +1334,15 @@ function Breadcrumbs(props) {
   var finalStyles = _extends({}, styles, additionalStyles);
 
   var breadcrumbItems = getElementsFromData(breadcrumbsData, id);
-  return React.createElement(react.Breadcrumb, {
+  var ariaAttrs = {
+    "aria-label": "Breadcrumb"
+  };
+  return React.createElement(react.Breadcrumb, Object.assign({
     className: className,
-    __css: finalStyles,
     id: id
-  }, breadcrumbItems);
+  }, ariaAttrs, {
+    __css: finalStyles
+  }), breadcrumbItems);
 }
 
 (function (ButtonTypes) {
@@ -1868,7 +1877,7 @@ function Card(props) {
         mainActionLink: mainActionLink
       }, child.props.children) : child.props.children;
       var elem = React.cloneElement(child, {
-        additionalStyles: styles.heading,
+        additionalStyles: _extends({}, styles.heading, child.props.additionalStyles),
         key: key,
         center: center,
         // Override the child text with the potential `CardLinkOverlay`.
@@ -2286,9 +2295,15 @@ function FormRow(props) {
   var count = React.Children.count(children);
   var alteredChildren = React.Children.map(children, function (child, i) {
     if (!child) return null;
-    return React.cloneElement(child, {
-      id: id + "-grandchild" + i
-    });
+
+    if (child.type === FormField || child.props.mdxType === "FormField") {
+      return React.cloneElement(child, {
+        id: id + "-grandchild" + i
+      });
+    }
+
+    console.warn("FormRow children must be `FormField` components.");
+    return null;
   });
   return React.createElement(SimpleGrid, {
     columns: count,
@@ -2317,29 +2332,29 @@ function Form(props) {
   var action = props.action,
       children = props.children,
       className = props.className,
+      _props$gap = props.gap,
+      gap = _props$gap === void 0 ? exports.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 ? exports.GridGaps.Large : _props$spacing;
+      onSubmit = props.onSubmit;
   var attributes = {};
   action && (attributes["action"] = action);
   method && (method === "get" || method === "post") && (attributes["method"] = method);
   var alteredChildren = React.Children.map(children, function (child, i) {
     return React.cloneElement(child, {
-      gap: spacing,
+      gap: gap,
       id: id + "-child" + i
     });
   });
-  return React.createElement(react.Box, Object.assign({
-    as: "form",
+  return React.createElement("form", Object.assign({
     "aria-label": "form",
-    id: id
-  }, attributes, {
-    className: className
-  }), React.createElement(SimpleGrid, {
+    className: className,
+    id: id,
+    onSubmit: onSubmit
+  }, attributes), React.createElement(SimpleGrid, {
     columns: 1,
-    gap: spacing,
+    gap: gap,
     id: id + "-parent"
   }, alteredChildren));
 }
@@ -3312,7 +3327,7 @@ var Breadcrumb = {
         marginInlineStart: "xxs"
       }
     },
-    "li:nth-last-child(2)": {
+    "li:nth-last-of-type(2)": {
       display: "inline-block",
       span: {
         display: {
@@ -5415,6 +5430,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",
@@ -5447,11 +5471,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"
     }
   };
 };
@@ -6002,7 +6030,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 = react.useStyleConfig("HorizontalRule", {
     align: align
   });
@@ -6114,7 +6142,7 @@ function List$1(props) {
     React.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.");
       }
     });
@@ -7032,8 +7060,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 = React.useState(initialPage),
@@ -7063,7 +7090,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.
 
 
@@ -7428,16 +7455,16 @@ var RadioGroup$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var styles = react.useMultiStyleConfig("RadioGroup", {});
   return React.createElement(Fieldset, {
-    id: "radio-group-" + id,
     className: className,
+    id: "radio-group-" + id,
     isLegendHidden: !showLabel,
     legendText: labelText,
     optReqFlag: optReqFlag
   }, React.createElement(react.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 && React.createElement(react.Box, {
@@ -7605,6 +7632,7 @@ var Select$1 = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     ref: ref
   }, controlledProps, ariaAttributes, {
     icon: React__default.createElement(Icon, {
+      id: id + "-icon",
       name: exports.IconNames.Arrow,
       size: exports.IconSizes.Medium
     }),
@@ -7660,8 +7688,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)" : "");
@@ -7677,9 +7703,10 @@ function SearchBar$1(props) {
   }; // Render the `Select` component.
 
   var selectElem = selectProps && React.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 React.createElement("option", {
@@ -7689,11 +7716,11 @@ function SearchBar$1(props) {
   })); // Render the `TextInput` component.
 
   var textInputNative = textInputProps && React.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: exports.TextInputTypes.text,
     variantType: selectElem ? TextInputVariants.SearchBarSelect : TextInputVariants.SearchBar,
     value: textInputProps == null ? void 0 : textInputProps.value
@@ -7702,16 +7729,17 @@ function SearchBar$1(props) {
   var buttonElem = React.createElement(Button, {
     additionalStyles: searchBarButtonStyles,
     buttonType: buttonType,
-    id: generateUUID(),
+    id: "searchbar-button-" + id,
     isDisabled: isDisabled,
     onClick: buttonOnClick,
     type: "submit"
   }, React.createElement(Icon, {
+    align: exports.IconAlign.Left,
+    id: "searchbar-icon-" + id,
     name: exports.IconNames.Search,
-    size: exports.IconSizes.Small,
-    align: exports.IconAlign.Left
-  }), "Search"); // If a custom input element was passed, use that instead of the
-  // `TextInput` component.
+    size: exports.IconSizes.Small
+  }), "Search"); // If a custom input element was passed, use that element
+  // instead of the DS `TextInput` component.
 
   var textInputElem = textInputElement || textInputNative;
   return React.createElement(ComponentWrapper$1, {
@@ -7723,11 +7751,10 @@ function SearchBar$1(props) {
     isInvalid: isInvalid
   }, React.createElement(react.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,
@@ -8291,11 +8318,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) {
@@ -8311,10 +8341,10 @@ var getElementsFromContentData$1 = function getElementsFromContentData(data, use
 
     if (typeof tab.content === "string") {
       tempPanel = React.createElement(react.TabPanel, {
-        key: index,
         dangerouslySetInnerHTML: {
           __html: tab.content
-        }
+        },
+        key: index
       });
     } else {
       tempPanel = React.createElement(react.TabPanel, {
@@ -8341,7 +8371,10 @@ var getElementsFromChildren = function getElementsFromChildren(children) {
   var panels = [];
 
   if (!(children != null && children.length)) {
-    return {};
+    return {
+      tabs: [],
+      panels: []
+    };
   }
 
   children.forEach(function (child) {
@@ -8350,7 +8383,7 @@ var getElementsFromChildren = function getElementsFromChildren(children) {
       var childTabs = React.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.");
       }
     }
 
@@ -8395,7 +8428,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.
 
@@ -8421,43 +8458,47 @@ function Tabs(props) {
     }
   }, [goToStart, windowDimensions.width]);
   var previousButton = React.createElement(Button, {
-    buttonType: exports.ButtonTypes.Primary,
     attributes: _extends({
       "aria-label": "Previous"
     }, styles.buttonArrows, {
       left: "0"
     }),
+    buttonType: exports.ButtonTypes.Primary,
+    id: "tabs-previous-" + id,
     onClick: prevSlide
   }, React.createElement(Icon, {
-    name: exports.IconNames.Arrow,
     iconRotation: exports.IconRotationTypes.Rotate90,
+    id: "tabs-previous-icon-" + id,
+    name: exports.IconNames.Arrow,
     size: exports.IconSizes.Small
   }));
   var nextButton = React.createElement(Button, {
-    buttonType: exports.ButtonTypes.Primary,
     attributes: _extends({
       "aria-label": "Next"
     }, styles.buttonArrows, {
       right: "0"
     }),
+    buttonType: exports.ButtonTypes.Primary,
+    id: "tabs-next-" + id,
     onClick: nextSlide
   }, React.createElement(Icon, {
-    name: exports.IconNames.Arrow,
     iconRotation: exports.IconRotationTypes.Rotate270,
+    id: "tabs-next-icon-" + id,
+    name: exports.IconNames.Arrow,
     size: exports.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 React.createElement(react.Tabs, {
-    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"
   }, React.createElement(react.Box, {
     __css: styles.tablistWrapper,
     sx: {
@@ -8483,18 +8524,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 = react.useStyleConfig("TemplateHeader", {});
+var TemplateAboveHeader = function TemplateAboveHeader(props) {
+  var styles = react.useStyleConfig("TemplateBreakout", {});
   return React.createElement(react.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 = react.useStyleConfig("TemplateHeader", {});
+  var headerElement = React.createElement(react.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.
+    React.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 = React.createElement(react.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
@@ -8528,11 +8608,11 @@ var TemplateContent$1 = function TemplateContent(props) {
   // `TemplateContentSidebar` components.
 
   var newChildren = React.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 = React.cloneElement(child, {
         sidebar: sidebar
       });
@@ -8607,18 +8687,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 = React.createElement(React.Fragment, null, children); // The user wants to render the `footer` HTML element.
 
   if (renderFooterElement) {
     // But give a warning if one was passed.
     React.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.");
       }
     });
@@ -8639,7 +8719,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,
@@ -8648,12 +8729,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 && React.createElement(TemplateAboveHeader, null, aboveHeader);
   var breakoutElem = breakout && React.createElement(TemplateBreakout$1, null, breakout);
   var contentTopElem = contentTop && React.createElement(TemplateContentTop$1, null, contentTop);
   var contentPrimaryElem = contentPrimary && React.createElement(TemplateContentPrimary$1, null, contentPrimary);
   var contentSidebarElem = contentSidebar && React.createElement(TemplateContentSidebar$1, null, contentSidebar);
-  return React.createElement(Template$1, null, (header || breakoutElem) && React.createElement(TemplateHeader$1, null, header, breakoutElem), React.createElement(TemplateContent$1, {
+  return React.createElement(Template$1, null, aboveHeaderElem, (header || breakoutElem) && React.createElement(TemplateHeader$1, {
+    renderHeaderElement: renderHeaderElement
+  }, header, breakoutElem), React.createElement(TemplateContent$1, {
     sidebar: sidebar
   }, contentTopElem, sidebar === "left" && contentSidebarElem, contentPrimaryElem, sidebar === "right" && contentSidebarElem), footer && React.createElement(TemplateFooter, {
     renderFooterElement: renderFooterElement
@@ -8881,6 +8967,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,
@@ -8888,12 +8979,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);
@@ -8902,18 +8993,23 @@ function Table(props) {
     showRowDividers: showRowDividers,
     useRowHeaders: useRowHeaders
   });
-  var columnHeadersElems = columnHeaders && React.createElement(react.Thead, null, React.createElement(react.Tr, null, columnHeaders.map(function (child, key) {
+  var tableCaption = titleText && React.createElement(react.TableCaption, null, titleText);
+  var columnHeadersElems = (columnHeaders == null ? void 0 : columnHeaders.length) > 0 && React.createElement(react.Thead, null, React.createElement(react.Tr, null, columnHeaders.map(function (child, key) {
     return React.createElement(react.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;
     }
 
@@ -8931,7 +9027,6 @@ function Table(props) {
     }));
   };
 
-  var tableCaption = titleText && React.createElement(react.TableCaption, null, titleText);
   return React.createElement(react.Table, {
     id: id,
     sx: styles,
@@ -8963,6 +9058,12 @@ Object.defineProperty(exports, 'Circle', {
     return react.Circle;
   }
 });
+Object.defineProperty(exports, 'Flex', {
+  enumerable: true,
+  get: function () {
+    return react.Flex;
+  }
+});
 Object.defineProperty(exports, 'Grid', {
   enumerable: true,
   get: function () {
@@ -8981,6 +9082,12 @@ Object.defineProperty(exports, 'HStack', {
     return react.HStack;
   }
 });
+Object.defineProperty(exports, 'Spacer', {
+  enumerable: true,
+  get: function () {
+    return react.Spacer;
+  }
+});
 Object.defineProperty(exports, 'Square', {
   enumerable: true,
   get: function () {
@@ -9037,8 +9144,8 @@ exports.DatePicker = DatePicker;
 exports.Fieldset = Fieldset;
 exports.Form = Form;
 exports.FormField = FormField;
+exports.FormGaps = exports.GridGaps;
 exports.FormRow = FormRow;
-exports.FormSpacing = exports.GridGaps;
 exports.Heading = Heading;
 exports.HelperErrorText = HelperErrorText;
 exports.Hero = Hero$1;
@@ -9065,6 +9172,7 @@ exports.StructuredContent = StructuredContent$1;
 exports.Table = Table;
 exports.Tabs = Tabs;
 exports.Template = Template$1;
+exports.TemplateAboveHeader = TemplateAboveHeader;
 exports.TemplateAppContainer = TemplateAppContainer;
 exports.TemplateBreakout = TemplateBreakout$1;
 exports.TemplateContent = TemplateContent$1;