@nypl/design-system-react-components 0.25.0 → 0.25.1

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

@@ -11,41 +11,6 @@ var uuid = require('uuid');
 var ReactDatePicker = _interopDefault(require('react-datepicker'));
 var themeTools = require('@chakra-ui/theme-tools');
 
-// Re-written in TS from https://github.com/drupal-pattern-lab/bem-twig-extension
-function bem(baseClass, modifiers, blockName, extra) {
-  var classes = []; // If using a blockname to override default class.
-
-  if (blockName) {
-    classes.push(blockName.concat("__").concat(baseClass)); // Set blockname--modifier classes for each modifier.
-
-    if ((modifiers == null ? void 0 : modifiers.length) > 0) {
-      modifiers.forEach(function (modifier) {
-        classes.push(blockName.concat("__").concat(baseClass).concat("--").concat(modifier));
-      });
-    }
-  } // If not overriding base class.
-  else {
-    // Set base class.
-    classes.push(baseClass);
-
-    if ((modifiers == null ? void 0 : modifiers.length) > 0) {
-      modifiers.forEach(function (modifier) {
-        classes.push(baseClass.concat("--").concat(modifier));
-      });
-    }
-  } // If extra non-BEM classes are added.
-
-
-  if ((extra == null ? void 0 : extra.length) > 0) {
-    extra.forEach(function (extraClass) {
-      classes.push(extraClass);
-    });
-  }
-
-  var attributes = classes.join(" ");
-  return attributes;
-}
-
 function _extends() {
   _extends = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -99,6 +64,103 @@ function generateUUID() {
   return uuid.v4();
 }
 
+/* eslint-disable camelcase */
+var IconAlign;
+
+(function (IconAlign) {
+  IconAlign["Left"] = "left";
+  IconAlign["Right"] = "right";
+  IconAlign["None"] = "none";
+})(IconAlign || (IconAlign = {}));
+
+var IconTypes;
+
+(function (IconTypes) {
+  IconTypes["Default"] = "default";
+  IconTypes["Breadcrumbs"] = "breadcrumbs";
+})(IconTypes || (IconTypes = {}));
+
+(function (IconRotationTypes) {
+  IconRotationTypes["Rotate0"] = "rotate0";
+  IconRotationTypes["Rotate90"] = "rotate90";
+  IconRotationTypes["Rotate180"] = "rotate180";
+  IconRotationTypes["Rotate270"] = "rotate270";
+})(exports.IconRotationTypes || (exports.IconRotationTypes = {}));
+
+(function (IconColors) {
+  IconColors["UiBlack"] = "ui.black";
+  IconColors["UiWhite"] = "ui.white";
+  IconColors["BrandPrimary"] = "brand.primary";
+  IconColors["BrandSecondary"] = "brand.secondary";
+  IconColors["SectionWhatsOnPrimary"] = "section.whats-on.primary";
+  IconColors["SectionWhatsOnSecondary"] = "section.whats-on.secondary";
+  IconColors["SectionBooksAndMorePrimary"] = "section.books-and-more.primary";
+  IconColors["SectionBooksAndMoreSecondary"] = "section.books-and-more.secondary";
+  IconColors["SectionResearchPrimary"] = "section.research.primary";
+  IconColors["SectionResearchSecondary"] = "section.research.secondary";
+  IconColors["SectionLocationsPrimary"] = "section.locations.primary";
+  IconColors["SectionLocationsSecondary"] = "section.locations.secondary";
+  IconColors["SectionBlogsPrimary"] = "section.blogs.primary";
+  IconColors["SectionBlogsSecondary"] = "section.blogs.secondary";
+  IconColors["SectionResearchLibraryLpa"] = "section.research-library.lpa";
+  IconColors["SectionResearchLibrarySchomburg"] = "section.research-library.schomburg";
+  IconColors["SectionResearchLibrarySchwartzman"] = "section.research-library.schwartzman";
+})(exports.IconColors || (exports.IconColors = {}));
+
+(function (IconSizes) {
+  IconSizes["Small"] = "small";
+  IconSizes["Medium"] = "medium";
+  IconSizes["Large"] = "large";
+  IconSizes["ExtraLarge"] = "xlarge";
+  IconSizes["ExtraExtraLarge"] = "xxlarge";
+  IconSizes["ExtraExtraExtraLarge"] = "xxxlarge";
+})(exports.IconSizes || (exports.IconSizes = {}));
+
+(function (IconNames) {
+  IconNames["AccessibilityFull"] = "accessibility_full";
+  IconNames["AccessibilityPartial"] = "accessibility_partial";
+  IconNames["Arrow"] = "arrow";
+  IconNames["Check"] = "check";
+  IconNames["Clock"] = "clock";
+  IconNames["Close"] = "close";
+  IconNames["Download"] = "download";
+  IconNames["ErrorFilled"] = "error_filled";
+  IconNames["ErrorOutline"] = "error_outline";
+  IconNames["Headset"] = "headset";
+  IconNames["Minus"] = "minus";
+  IconNames["Plus"] = "plus";
+  IconNames["Search"] = "search";
+  IconNames["SpeakerNotes"] = "speaker_notes";
+  IconNames["UtilityAccountFilled"] = "utility_account_filled";
+  IconNames["UtilityAccountUnfilled"] = "utility_account_unfilled";
+  IconNames["UtilityHamburger"] = "utility_hamburger";
+  IconNames["UtilitySearch"] = "utility_search";
+})(exports.IconNames || (exports.IconNames = {}));
+
+(function (LogoNames) {
+  LogoNames["Brooklyn"] = "brooklyn";
+  LogoNames["LogoBrooklyn"] = "logo_brooklyn";
+  LogoNames["LogoNypl"] = "logo_nypl";
+  LogoNames["LogoNyplNegative"] = "logo_nypl_negative";
+  LogoNames["LogoQueens"] = "logo_queens";
+  LogoNames["LpaNegative"] = "lpa_negative";
+  LogoNames["LpaPositive"] = "lpa_positive";
+  LogoNames["NyplCircleNegative"] = "nypl_circle_negative";
+  LogoNames["NyplCirclePositive"] = "nypl_circle_positive";
+  LogoNames["NyplFullLockUpNegative"] = "nypl_full_lock_up_negative";
+  LogoNames["NyplFullLockUp"] = "nypl_full_lock_up";
+  LogoNames["NyplNoLionNegative"] = "nypl_no_lion_negative";
+  LogoNames["NyplNoLionPositive"] = "nypl_no_lion_positive";
+  LogoNames["QueensLong"] = "queens_long";
+  LogoNames["QueensStacked"] = "queens_stacked";
+  LogoNames["SchomburgCircle"] = "schomburg_circle";
+  LogoNames["SchomburgPositive"] = "schomburg_positive";
+  LogoNames["SimplyeBlack"] = "simplye_black";
+  LogoNames["SimplyeColor"] = "simplye_color";
+  LogoNames["SnflNegative"] = "snfl_negative";
+  LogoNames["SnflPositive"] = "snfl_positive";
+})(exports.LogoNames || (exports.LogoNames = {}));
+
 var _path, _path2, _path3;
 
 function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
@@ -1195,247 +1257,279 @@ var iconSvgs = {
  */
 
 function Icon(props) {
-  var blockName = props.blockName,
-      _props$decorative = props.decorative,
-      decorative = _props$decorative === void 0 ? false : _props$decorative,
+  var _props$align = props.align,
+      align = _props$align === void 0 ? "none" : _props$align,
+      children = props.children,
       className = props.className,
-      titleText = props.titleText,
-      iconRotation = props.iconRotation,
-      color = props.color,
-      size = props.size,
-      _props$modifiers = props.modifiers,
-      modifiers = _props$modifiers === void 0 ? [] : _props$modifiers,
+      _props$color = props.color,
+      color = _props$color === void 0 ? exports.IconColors.UiBlack : _props$color,
+      _props$decorative = props.decorative,
+      decorative = _props$decorative === void 0 ? true : _props$decorative,
+      _props$iconRotation = props.iconRotation,
+      iconRotation = _props$iconRotation === void 0 ? exports.IconRotationTypes.Rotate0 : _props$iconRotation,
+      _props$id = props.id,
+      id = _props$id === void 0 ? generateUUID() : _props$id,
       name = props.name,
-      children = props.children,
-      _props$attributes = props.attributes,
-      attributes = _props$attributes === void 0 ? [] : _props$attributes;
+      _props$size = props.size,
+      size = _props$size === void 0 ? exports.IconSizes.Medium : _props$size,
+      _props$type = props.type,
+      type = _props$type === void 0 ? IconTypes.Default : _props$type;
+  var styles = react.useStyleConfig("Icon", {
+    align: align,
+    color: color,
+    iconRotation: iconRotation,
+    size: size,
+    variant: type
+  });
+  var iconProps = {
+    "aria-hidden": decorative,
+    className: className,
+    id: id,
+    role: "img"
+  };
+  var childSVG = null; // Component prop validation
+
+  if (name && children) {
+    console.warn("Icon accepts either a `name` prop or an `svg` element child, not both.");
+    return null;
+  } else if (!name && !children) {
+    console.warn("Pass an icon `name` prop or an SVG child to `Icon` to ensure an icon appears.");
+    return null;
+  } // The user wants to render an existing icon. Load the icon and render it
+  // as a component through Chakra's Icon component. Otherwise, we're going to
+  // render the SVG child with NYPL-theme styling.
+
+
+  if (name) {
+    var SvgComponent = iconSvgs[name];
+    return React.createElement(react.Icon, Object.assign({
+      as: SvgComponent
+    }, iconProps, {
+      __css: styles
+    }));
+  } // If no `name` prop was passed, we expect a child SVG element to be passed.
+  // Apply icon props to the SVG child.
 
-  if (iconRotation) {
-    modifiers.push(iconRotation);
-  }
 
-  if (color) {
-    modifiers.push(color);
+  if (children.type === "svg" || children.props.type === "svg" || children.props.mdxType === "svg") {
+    childSVG = React.cloneElement(children, _extends({}, iconProps));
+  } else {
+    console.warn("You must pass an `svg` element to the `Icon` component.");
   }
 
-  if (size) {
-    modifiers.push(size);
+  return React.createElement(react.Box, {
+    __css: styles
+  }, childSVG);
+}
+
+/**
+ * Get the minus or plus icon depending on whether the accordion
+ * is open or closed.
+ */
+
+var getIcon = function getIcon(isExpanded) {
+  if (isExpanded === void 0) {
+    isExpanded = false;
   }
 
-  var iconID = generateUUID();
+  var iconName = isExpanded ? exports.IconNames.Minus : exports.IconNames.Plus;
+  return React.createElement(Icon, {
+    name: iconName,
+    size: exports.IconSizes.Small
+  });
+};
+/**
+ * Returns `AccordionItems` for every accordion object in the data
+ * array. This automatically creates the `AccordionButton` and `AccordionPanel`
+ * combination that is required for the Chakra `Accordion` component.
+ */
+
 
-  var iconProps = _extends({
-    className: bem("icon", modifiers, blockName, [className]),
-    id: iconID,
-    role: "img",
-    title: titleText || null,
-    "aria-hidden": decorative
-  }, attributes); // Apply icon props to SVG that was passed as a child.
+var getElementsFromContentData = function getElementsFromContentData(data) {
+  var _data;
 
+  if (data === void 0) {
+    data = [];
+  }
 
-  var renderChildren = function renderChildren() {
-    return React.Children.map(children, function (child) {
-      return React.cloneElement(child, _extends({}, iconProps));
+  // For FAQ-style multiple accordions, the button should be bigger.
+  // Otherwise, use the default.
+  var multiplePadding = ((_data = data) == null ? void 0 : _data.length) > 1 ? 4 : null;
+  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, {
+      key: index,
+      dangerouslySetInnerHTML: {
+        __html: content.panel
+      }
+    }) : React.createElement(react.AccordionPanel, {
+      key: index
+    }, content.panel);
+    return React.createElement(react.AccordionItem, {
+      key: index
+    }, function (_ref) {
+      var isExpanded = _ref.isExpanded;
+      return React.createElement(React.Fragment, null, React.createElement(react.AccordionButton, {
+        padding: multiplePadding
+      }, React.createElement(react.Box, {
+        flex: "1",
+        textAlign: "left"
+      }, content.label), getIcon(isExpanded)), panel);
     });
-  }; // Component prop validation
+  });
+};
+/**
+ * Accordion component that shows content on toggle. Can be used to display
+ * multiple accordion items together.
+ */
 
 
-  if (name && children) {
-    throw new Error("Icon accepts either a name or children, not both");
-  } else if (!name && !children) {
-    console.warn("Pass a name or any children to Icon to ensure an icon appears");
-  } // The user wants to render an existing icon. Load the icon and render it
-  // as a component. Otherwise, we're just going to render the children that
-  // were passed to this component.
+function Accordion(props) {
+  var contentData = props.contentData,
+      _props$id = props.id,
+      id = _props$id === void 0 ? generateUUID() : _props$id,
+      _props$isDefaultOpen = props.isDefaultOpen,
+      isDefaultOpen = _props$isDefaultOpen === void 0 ? false : _props$isDefaultOpen; // Pass `0` to open the first accordion in the 0-index based array.
 
+  var openFirstAccordion = isDefaultOpen ? 0 : undefined;
+  return React.createElement(react.Accordion, {
+    id: id,
+    defaultIndex: [openFirstAccordion],
+    allowMultiple: true
+  }, getElementsFromContentData(contentData));
+}
 
-  if (name) {
-    var SvgComponent = iconSvgs[name];
-    return React.createElement(SvgComponent, Object.assign({}, iconProps));
+var ColorVariants;
+
+(function (ColorVariants) {
+  ColorVariants["BooksAndMore"] = "booksAndMore";
+  ColorVariants["Locations"] = "locations";
+  ColorVariants["Research"] = "research";
+  ColorVariants["WhatsOn"] = "whatsOn";
+})(ColorVariants || (ColorVariants = {}));
+
+// Utility functions to use throughout the codebase
+
+/**
+ * range
+ * Get an array of values from `start` to `stop` - 1 with an optional
+ * `step` between values.
+ */
+var range = function range(start, stop, step) {
+  if (step === void 0) {
+    step = 1;
   }
 
-  return React.createElement(React.Fragment, null, renderChildren());
-}
+  if (!start) {
+    return [];
+  }
 
-/* eslint-disable camelcase */
+  return Array(Math.ceil((stop - start) / step)).fill(start).map(function (x, y) {
+    return x + y * step;
+  });
+};
+/**
+ * Map an enum value to a component's Chakra theme variant object. If a wrong
+ * value is passed (typically in non-Typescript scenarios), then the "fallback"
+ * value, if provided, will be used.
+ */
 
-(function (IconRotationTypes) {
-  IconRotationTypes["rotate0"] = "rotate-0";
-  IconRotationTypes["rotate90"] = "rotate-90";
-  IconRotationTypes["rotate180"] = "rotate-180";
-  IconRotationTypes["rotate270"] = "rotate-270";
-})(exports.IconRotationTypes || (exports.IconRotationTypes = {}));
+var getVariant = function getVariant(variant, collection, fallback) {
+  if (fallback === void 0) {
+    fallback = null;
+  }
 
-(function (IconNames) {
-  IconNames["accessibility_full"] = "accessibility_full";
-  IconNames["accessibility_partial"] = "accessibility_partial";
-  IconNames["arrow"] = "arrow";
-  IconNames["check"] = "check";
-  IconNames["clock"] = "clock";
-  IconNames["close"] = "close";
-  IconNames["download"] = "download";
-  IconNames["error_filled"] = "error_filled";
-  IconNames["error_outline"] = "error_outline";
-  IconNames["headset"] = "headset";
-  IconNames["minus"] = "minus";
-  IconNames["plus"] = "plus";
-  IconNames["search"] = "search";
-  IconNames["speaker_notes"] = "speaker_notes";
-  IconNames["utility_account_filled"] = "utility_account_filled";
-  IconNames["utility_account_unfilled"] = "utility_account_unfilled";
-  IconNames["utility_hamburger"] = "utility_hamburger";
-  IconNames["utility_search"] = "utility_search";
-})(exports.IconNames || (exports.IconNames = {}));
+  var variantMap = {};
 
-(function (LogoNames) {
-  LogoNames["brooklyn"] = "brooklyn";
-  LogoNames["logo_brooklyn"] = "logo_brooklyn";
-  LogoNames["logo_nypl"] = "logo_nypl";
-  LogoNames["logo_nypl_negative"] = "logo_nypl_negative";
-  LogoNames["logo_queens"] = "logo_queens";
-  LogoNames["lpa_negative"] = "lpa_negative";
-  LogoNames["lpa_positive"] = "lpa_positive";
-  LogoNames["nypl_circle_negative"] = "nypl_circle_negative";
-  LogoNames["nypl_circle_positive"] = "nypl_circle_positive";
-  LogoNames["nypl_full_lock_up_negative"] = "nypl_full_lock_up_negative";
-  LogoNames["nypl_full_lock_up"] = "nypl_full_lock_up";
-  LogoNames["nypl_no_lion_negative"] = "nypl_no_lion_negative";
-  LogoNames["nypl_no_lion_positive"] = "nypl_no_lion_positive";
-  LogoNames["queens_long"] = "queens_long";
-  LogoNames["queens_stacked"] = "queens_stacked";
-  LogoNames["schomburg_circle"] = "schomburg_circle";
-  LogoNames["schomburg_positive"] = "schomburg_positive";
-  LogoNames["simplye_black"] = "simplye_black";
-  LogoNames["simplye_color"] = "simplye_color";
-  LogoNames["snfl_negative"] = "snfl_negative";
-  LogoNames["snfl_positive"] = "snfl_positive";
-})(exports.LogoNames || (exports.LogoNames = {}));
+  for (var type in collection) {
+    variantMap[collection[type]] = collection[type];
+  }
 
-(function (IconColors) {
-  IconColors["ui_black"] = "ui-black";
-  IconColors["ui_white"] = "ui-white";
-  IconColors["brand_primary"] = "brand-primary";
-  IconColors["brand_secondary"] = "brand-secondary";
-  IconColors["section_whats_on_primary"] = "section-whats-on-primary";
-  IconColors["section_books_and_more_primary"] = "section-books-and-more-primary";
-  IconColors["section_research_primary"] = "section-research-primary";
-  IconColors["section_research_secondary"] = "section-research-secondary";
-  IconColors["section_locations_primary"] = "section-locations-primary";
-  IconColors["section_research_library_lpa"] = "section-research-library-lpa";
-  IconColors["section_research_library_schomburg"] = "section-research-library-schomburg";
-  IconColors["section_research_library_schwartzman"] = "section-research-library-schwartzman";
-})(exports.IconColors || (exports.IconColors = {}));
+  return variantMap[variant] || fallback;
+};
 
-(function (IconSizes) {
-  IconSizes["small"] = "small";
-  IconSizes["medium"] = "medium";
-  IconSizes["large"] = "large";
-  IconSizes["xlarge"] = "xlarge";
-  IconSizes["xxlarge"] = "xxlarge";
-  IconSizes["xxxlarge"] = "xxxlarge";
-})(exports.IconSizes || (exports.IconSizes = {}));
+var getElementsFromData = function getElementsFromData(data, breadcrumbsID) {
+  if (!(data != null && data.length)) {
+    return {};
+  }
 
-/** Accordion component that shows content on toggle */
+  var breadcrumbItems = data.map(function (breadcrumbData, index) {
+    return React.createElement(react.BreadcrumbItem, {
+      key: index,
+      isCurrentPage: index === data.length - 1 ? true : false
+    }, React.createElement(react.BreadcrumbLink, {
+      href: breadcrumbData.url
+    }, index === data.length - 2 && React.createElement(Icon, {
+      name: exports.IconNames.Arrow,
+      size: exports.IconSizes.Small,
+      iconRotation: exports.IconRotationTypes.Rotate90,
+      id: breadcrumbsID + "__backarrow",
+      className: "breadcrumbs-icon",
+      type: IconTypes.Breadcrumbs
+    }), React.createElement("span", {
+      className: "breadcrumb-label"
+    }, breadcrumbData.text)));
+  });
+  return breadcrumbItems;
+};
 
-function Accordion(props) {
-  var _props$modifiers = props.modifiers,
-      modifiers = _props$modifiers === void 0 ? [] : _props$modifiers,
-      blockName = props.blockName,
-      id = props.id,
+function Breadcrumbs(props) {
+  var breadcrumbsData = props.breadcrumbsData,
       className = props.className,
-      inputId = props.inputId,
-      _props$defaultOpen = props.defaultOpen,
-      defaultOpen = _props$defaultOpen === void 0 ? false : _props$defaultOpen,
-      accordionLabel = props.accordionLabel,
-      children = props.children;
-  return React.createElement("div", {
-    id: id,
-    className: bem("accordion", modifiers, blockName, [className])
-  }, React.createElement("input", {
-    id: "accordion-" + inputId,
-    className: bem("input", modifiers, "accordion"),
-    type: "checkbox",
-    defaultChecked: defaultOpen
-  }), React.createElement("label", {
-    htmlFor: "accordion-" + inputId,
-    className: bem("label", modifiers, "accordion")
-  }, accordionLabel, React.createElement(Icon, {
-    decorative: true,
-    name: exports.IconNames.minus,
-    modifiers: ["small", "" + exports.IconNames.minus]
-  }), React.createElement(Icon, {
-    decorative: true,
-    name: exports.IconNames.plus,
-    modifiers: ["small", "" + exports.IconNames.plus]
-  })), React.createElement("div", {
-    className: bem("content", modifiers, "accordion")
-  }, children));
-}
+      colorVariant = props.colorVariant,
+      _props$id = props.id,
+      id = _props$id === void 0 ? generateUUID() : _props$id;
+  var variant = getVariant(colorVariant, ColorVariants);
 
-function isTextBreadcrumb(obj) {
-  return typeof obj.url === "string";
-}
+  if (!breadcrumbsData || breadcrumbsData.length === 0) {
+    throw new Error("You must use the `breadcrumbsData` prop to pass a data object to the Breadcrumbs component. That prop is current empty.");
+  }
 
-var Breadcrumbs = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(Breadcrumbs, _React$Component);
+  var styles = react.useStyleConfig("Breadcrumb", {
+    variant: variant
+  });
+  var breadcrumbItems = getElementsFromData(breadcrumbsData, id);
+  return React.createElement(react.Breadcrumb, {
+    className: className,
+    __css: styles,
+    id: id
+  }, breadcrumbItems);
+}
 
-  function Breadcrumbs(props) {
-    return _React$Component.call(this, props) || this;
-  }
+// Re-written in TS from https://github.com/drupal-pattern-lab/bem-twig-extension
+function bem(baseClass, modifiers, blockName, extra) {
+  var classes = []; // If using a blockname to override default class.
 
-  var _proto = Breadcrumbs.prototype;
+  if (blockName) {
+    classes.push(blockName.concat("__").concat(baseClass)); // Set blockname--modifier classes for each modifier.
 
-  _proto.render = function render() {
-    var _this$props = this.props,
-        breadcrumbs = _this$props.breadcrumbs,
-        className = _this$props.className,
-        blockName = _this$props.blockName,
-        modifiers = _this$props.modifiers;
-    var baseClass = "breadcrumbs";
-    var breadcrumbItems = [];
+    if ((modifiers == null ? void 0 : modifiers.length) > 0) {
+      modifiers.forEach(function (modifier) {
+        classes.push(blockName.concat("__").concat(baseClass).concat("--").concat(modifier));
+      });
+    }
+  } // If not overriding base class.
+  else {
+    // Set base class.
+    classes.push(baseClass);
 
-    if (!breadcrumbs || breadcrumbs.length === 0) {
-      throw new Error("Breadcrumbs must contain a set of links. Breadcrumbs currently empty");
+    if ((modifiers == null ? void 0 : modifiers.length) > 0) {
+      modifiers.forEach(function (modifier) {
+        classes.push(baseClass.concat("--").concat(modifier));
+      });
     }
+  } // If extra non-BEM classes are added.
 
-    breadcrumbs.forEach(function (item, index) {
-      var last = index === breadcrumbs.length - 1;
-      var linkComponent;
-
-      if (isTextBreadcrumb(item)) {
-        linkComponent = item.url ? React.createElement("a", {
-          href: item.url,
-          className: bem("link", [], baseClass)
-        }, item.text) : item.text;
-      } else {
-        var props = {
-          className: bem("link", [], baseClass)
-        };
-        linkComponent = React.createElement(item.type, _extends({}, props, item.props), item.props.children);
-      }
 
-      breadcrumbItems.push(React.createElement("li", {
-        key: baseClass + "-" + index,
-        className: bem("item", [], baseClass)
-      }, last && React.createElement(Icon, {
-        name: exports.IconNames.arrow,
-        blockName: baseClass,
-        modifiers: ["small"],
-        decorative: true
-      }), linkComponent));
+  if ((extra == null ? void 0 : extra.length) > 0) {
+    extra.forEach(function (extraClass) {
+      classes.push(extraClass);
     });
-    return React.createElement("nav", {
-      className: bem(baseClass, modifiers, blockName, [className]),
-      role: "navigation",
-      "aria-label": "Breadcrumbs"
-    }, React.createElement("ul", {
-      className: bem("list", [], baseClass)
-    }, breadcrumbItems));
-  };
+  }
 
-  return Breadcrumbs;
-}(React.Component);
-Breadcrumbs.defaultProps = {};
+  var attributes = classes.join(" ");
+  return attributes;
+}
 
 (function (ButtonTypes) {
   ButtonTypes["Primary"] = "primary";
@@ -1443,6 +1537,7 @@ Breadcrumbs.defaultProps = {};
   ButtonTypes["Callout"] = "callout";
   ButtonTypes["Pill"] = "pill";
   ButtonTypes["Link"] = "link";
+  ButtonTypes["SearchBar"] = "searchBar";
 })(exports.ButtonTypes || (exports.ButtonTypes = {}));
 
 var variantMap = {};
@@ -1457,7 +1552,7 @@ for (var type in exports.ButtonTypes) {
  */
 
 
-var getVariant = function getVariant(buttonType) {
+var getVariant$1 = function getVariant(buttonType) {
   return variantMap[buttonType] || exports.ButtonTypes.Primary;
 };
 /** Renders a simple `button` element with custom classes and modifiers. */
@@ -1499,7 +1594,7 @@ function Button(props) {
   if (childCount === 1 && hasIcon) {
     variant = "icon-only";
   } else {
-    variant = getVariant(buttonType);
+    variant = getVariant$1(buttonType);
   }
 
   styles = react.useStyleConfig("Button", {
@@ -1530,8 +1625,6 @@ function Button(props) {
   HeadingLevels[HeadingLevels["Six"] = 6] = "Six";
 })(exports.HeadingLevels || (exports.HeadingLevels = {}));
 
-// MT-82, MT 225, etc
-
 var variantMap$1 = {};
 
 for (var type$1 in exports.HeadingDisplaySizes) {
@@ -1544,7 +1637,7 @@ for (var type$1 in exports.HeadingDisplaySizes) {
  */
 
 
-var getVariant$1 = function getVariant(displaySize) {
+var getVariant$2 = function getVariant(displaySize) {
   return variantMap$1[displaySize] || null;
 };
 
@@ -1554,13 +1647,19 @@ function Heading(props) {
       id = props.id,
       _props$level = props.level,
       level = _props$level === void 0 ? exports.HeadingLevels.Two : _props$level,
+      _props$sx = props.sx,
+      sx = _props$sx === void 0 ? {} : _props$sx,
       text = props.text,
       url = props.url,
       urlClass = props.urlClass;
-  var variant = displaySize ? getVariant$1(displaySize) : "h" + level;
+  var variant = displaySize ? getVariant$2(displaySize) : "h" + level;
   var styles = react.useStyleConfig("Heading", {
     variant: variant
-  });
+  }); // Combine native base styles with any additional styles.
+  // This is used only in the `Hero` component, for now.
+
+  var finalStyles = _extends({}, styles, sx);
+
   var asHeading = "h" + level;
 
   if (level < 1 || level > 6) {
@@ -1588,7 +1687,7 @@ function Heading(props) {
   return React.createElement(react.Heading, {
     id: id,
     as: asHeading,
-    sx: styles,
+    sx: finalStyles,
     className: className
   }, content);
 }
@@ -1734,8 +1833,8 @@ function Card(props) {
 }
 
 (function (CardLayouts) {
-  CardLayouts["Horizontal"] = "horizontal";
-  CardLayouts["Vertical"] = "vertical";
+  CardLayouts["Row"] = "row";
+  CardLayouts["Column"] = "column";
 })(exports.CardLayouts || (exports.CardLayouts = {}));
 
 (function (CardImageRatios) {
@@ -1819,12 +1918,14 @@ function HelperErrorText(props) {
   }, attributes), props.children);
 }
 
-var _excluded$1 = ["isIndeterminate"];
+var _excluded$1 = ["isIndeterminate", "isChecked"];
 var onChangeDefault = function onChangeDefault() {
   return;
 };
 
 function CheckboxIcon(props) {
+  // Don't need the `isChecked` prop but it causes
+  // rendering issues on the SVG element.
   var isIndeterminate = props.isIndeterminate,
       rest = _objectWithoutPropertiesLoose(props, _excluded$1);
 
@@ -1841,7 +1942,8 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var className = props.className,
       errorText = props.errorText,
       helperText = props.helperText,
-      id = props.id,
+      _props$id = props.id,
+      id = _props$id === void 0 ? generateUUID() : _props$id,
       isChecked = props.isChecked,
       _props$isDisabled = props.isDisabled,
       isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
@@ -1857,17 +1959,16 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var styles = react.useMultiStyleConfig("Checkbox", {});
   var footnote = isInvalid ? errorText : helperText;
   var attributes = {};
-  var checkboxID = id || generateUUID();
   var onChange = props.onChange || onChangeDefault;
 
   if (!showLabel) {
     attributes["aria-label"] = labelText && footnote ? labelText + " - " + footnote : labelText;
   } else {
-    if (footnote) attributes["aria-describedby"] = checkboxID + "-helperText";
+    if (footnote) attributes["aria-describedby"] = id + "-helperText";
   }
 
   return React.createElement(React.Fragment, null, React.createElement(react.Checkbox, Object.assign({
-    id: checkboxID,
+    id: id,
     className: className,
     name: name || "default",
     isDisabled: isDisabled,
@@ -1882,66 +1983,303 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
     defaultIsChecked: false
   }, {
     icon: React.createElement(CheckboxIcon, null),
-    //iconColor="ui.focus"
     __css: styles
   }, attributes), showLabel && labelText), footnote && showLabel && React.createElement(react.Box, {
     __css: styles.helper,
     "aria-disabled": isDisabled
   }, React.createElement(HelperErrorText, {
     isError: isInvalid,
-    id: checkboxID + "-helperText"
+    id: id + "-helperText"
   }, footnote)));
 });
 Checkbox.displayName = "Checkbox";
 
-function FormRow(props) {
-  var children = props.children,
-      className = props.className;
-  return React.createElement("div", {
-    className: bem("form-row", [], "", [className])
-  }, children);
-} // FormField child-component
-
-function FormField(props) {
-  var children = props.children,
-      className = props.className;
-  return React.createElement("div", {
-    className: bem("form-field", [], "", [className])
-  }, children);
-}
-function Form(props) {
-  var action = props.action,
-      _props$attributes = props.attributes,
-      attributes = _props$attributes === void 0 ? {} : _props$attributes,
-      children = props.children,
-      className = props.className,
-      _props$id = props.id,
-      id = _props$id === void 0 ? generateUUID() : _props$id,
-      method = props.method,
-      _props$modifiers = props.modifiers,
-      modifiers = _props$modifiers === void 0 ? [] : _props$modifiers,
-      spacing = props.spacing;
-  action && (attributes["action"] = action);
-  method && (method === "get" || method === "post") && (attributes["method"] = method);
-  spacing && modifiers.push("spacing-" + spacing);
-  return React.createElement("form", Object.assign({
-    className: bem("form", modifiers, "", [className]),
-    id: id
-  }, attributes), children);
-}
-
-(function (DatePickerTypes) {
-  DatePickerTypes["Full"] = "full";
-  DatePickerTypes["Month"] = "month";
-  DatePickerTypes["Year"] = "year";
-})(exports.DatePickerTypes || (exports.DatePickerTypes = {}));
-
-// HTML Input types as defined by MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
-
-(function (TextInputTypes) {
-  TextInputTypes["email"] = "email";
-  TextInputTypes["hidden"] = "hidden"; // eslint-disable-next-line id-blacklist
-
+/**
+ * This is based on:
+ *   root size of 16px or 1rem
+ *   1 spacing unit is 4px or 0.25rem
+ *
+ * Chakra's mental model: If you need a spacing of 40px, divide it by 4.
+ * That'll give you 10. Then use it in your component.
+ *
+ * The DS uses eight CSS variables/values found in "src/styles/03-space/_space.css":
+ *   --space-xxs = 4px or 0.25rem
+ *   --space-xs = 8px or 0.5rem
+ *   --space-s = 16px or 1rem
+ *   --space-m = 24px or 1.5rem
+ *   --space-l = 32px or 2rem
+ *   --space-xl = 48px or 3rem
+ *   --space-xxl = 64px or 4rem
+ *   --space-xxxl = 96px or 6rem
+ *
+ * @note Even though all the following values are available through Chakra,
+ * we recommend to only use the spacing values that map to the DS values
+ * declared above.
+ *
+ * Chakra Number Value | Chakra Name value | DS Variable
+ * ------------------- | ----------------- | -----------------
+ *        1            |         xxs       |   --space-xxs
+ *        2            |         xs        |   --space-xs
+ *        4            |         s         |   --space-s
+ *        6            |         m         |   --space-m
+ *        8            |         l         |   --space-l
+ *        12           |         xl        |   --space-xl
+ *        16           |         xxl       |   --space-xxl
+ *        24           |         xxxl      |   --space-xxxl
+ */
+var spacing = {
+  px: "1px",
+  0: "0",
+  0.5: "0.125rem",
+  // --space-xxs = 4px
+  xxs: "0.25rem",
+  1: "0.25rem",
+  1.5: "0.375rem",
+  // --space-xs = 8px
+  xs: "0.5rem",
+  2: "0.5rem",
+  2.5: "0.625rem",
+  3: "0.75rem",
+  3.5: "0.875rem",
+  // --space-s = 16px
+  s: "1rem",
+  4: "1rem",
+  5: "1.25rem",
+  // --space-m = 24px
+  m: "1.5rem",
+  6: "1.5rem",
+  7: "1.75rem",
+  // --space-l = 32px
+  l: "2rem",
+  8: "2rem",
+  9: "2.25rem",
+  10: "2.5rem",
+  // --space-xl = 48px
+  xl: "3rem",
+  12: "3rem",
+  14: "3.5rem",
+  // --space-xxl = 64px
+  xxl: "4rem",
+  16: "4rem",
+  20: "5rem",
+  // --space-xxxl = 96px
+  xxxl: "6rem",
+  24: "6rem",
+  28: "7rem",
+  32: "8rem",
+  36: "9rem",
+  40: "10rem",
+  44: "11rem",
+  48: "12rem",
+  52: "13rem",
+  56: "14rem",
+  60: "15rem",
+  64: "16rem",
+  72: "18rem",
+  80: "20rem",
+  96: "24rem"
+};
+
+(function (CheckboxGroupLayoutTypes) {
+  CheckboxGroupLayoutTypes["Column"] = "column";
+  CheckboxGroupLayoutTypes["Row"] = "row";
+})(exports.CheckboxGroupLayoutTypes || (exports.CheckboxGroupLayoutTypes = {}));
+
+/**
+ * Wrapper component to wrap `Checkbox` components. Can be displayed in a
+ * column or in a row. The `CheckboxGroup` component renders all the necessary
+ * wrapping and associated text elements, but the checkbox input elements
+ * _need_ to be child `Checkbox` components from the NYPL Design System.
+ */
+
+
+var CheckboxGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var children = props.children,
+      _props$defaultValue = props.defaultValue,
+      defaultValue = _props$defaultValue === void 0 ? [] : _props$defaultValue,
+      invalidText = props.invalidText,
+      helperText = props.helperText,
+      _props$id = props.id,
+      id = _props$id === void 0 ? generateUUID() : _props$id,
+      _props$isDisabled = props.isDisabled,
+      isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
+      _props$isInvalid = props.isInvalid,
+      isInvalid = _props$isInvalid === void 0 ? false : _props$isInvalid,
+      _props$isRequired = props.isRequired,
+      isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
+      labelText = props.labelText,
+      _props$layout = props.layout,
+      layout = _props$layout === void 0 ? exports.CheckboxGroupLayoutTypes.Column : _props$layout,
+      name = props.name,
+      onChange = props.onChange,
+      _props$optReqFlag = props.optReqFlag,
+      optReqFlag = _props$optReqFlag === void 0 ? true : _props$optReqFlag,
+      _props$showLabel = props.showLabel,
+      showLabel = _props$showLabel === void 0 ? true : _props$showLabel;
+  var footnote = isInvalid ? invalidText : helperText;
+  var spacingProp = layout === exports.CheckboxGroupLayoutTypes.Column ? spacing.s : spacing.l;
+  var newChildren = [];
+  var checkboxProps = defaultValue && onChange ? {
+    defaultValue: defaultValue,
+    onChange: onChange
+  } : {}; // Go through the Checkbox children and update them as needed.
+
+  React.Children.map(children, function (child, i) {
+    if (child.type !== Checkbox) {
+      // Special case for Storybook MDX documentation.
+      if (child.props.mdxType && child.props.mdxType === "Checkbox") ; else {
+        console.warn("Only `Checkbox` components are allowed inside the `CheckboxGroup` component.");
+      }
+    }
+
+    if (child !== undefined && child !== null) {
+      var newProps = {
+        key: i,
+        id: id + "-" + i,
+        name: name,
+        isDisabled: isDisabled,
+        isInvalid: isInvalid,
+        isRequired: isRequired
+      };
+      newChildren.push(React.cloneElement(child, newProps));
+    }
+  }); // Get the Chakra-based styles for all the custom elements in this component.
+
+  var styles = react.useMultiStyleConfig("CustomCheckboxGroup", {});
+  return React.createElement(react.Box, {
+    as: "fieldset",
+    id: "checkbox-group-" + id,
+    __css: styles
+  }, React.createElement("legend", {
+    className: showLabel ? "" : "sr-only"
+  }, React.createElement("span", null, labelText), optReqFlag && React.createElement(react.Box, {
+    as: "span",
+    __css: styles.required
+  }, isRequired ? "Required" : "Optional")), React.createElement(react.CheckboxGroup, Object.assign({}, checkboxProps), React.createElement(react.Stack, {
+    id: id,
+    "data-testid": "checkbox-group",
+    direction: [layout],
+    spacing: spacingProp,
+    ref: ref,
+    "aria-label": !showLabel ? labelText : null
+  }, newChildren)), footnote && React.createElement(react.Box, {
+    __css: styles.helper
+  }, React.createElement(HelperErrorText, {
+    isError: isInvalid
+  }, footnote)));
+});
+
+(function (GridGaps) {
+  GridGaps["ExtraExtraSmall"] = "xxs";
+  GridGaps["ExtraSmall"] = "xs";
+  GridGaps["Small"] = "s";
+  GridGaps["Medium"] = "m";
+  GridGaps["Large"] = "l";
+  GridGaps["ExtraLarge"] = "xl";
+  GridGaps["ExtraExtraLarge"] = "xxl";
+})(exports.GridGaps || (exports.GridGaps = {}));
+
+function SimpleGrid(props) {
+  var children = props.children,
+      columns = props.columns,
+      className = props.className,
+      _props$gap = props.gap,
+      gap = _props$gap === void 0 ? exports.GridGaps.Large : _props$gap,
+      id = props.id;
+  var responsiveCols = columns ? {
+    base: 1,
+    md: columns
+  } : {
+    base: 1,
+    md: 2,
+    lg: 3
+  };
+  return React.createElement(react.SimpleGrid, {
+    columns: responsiveCols,
+    gap: gap,
+    id: id || generateUUID(),
+    className: className
+  }, children);
+}
+
+/** FormRow child-component */
+
+function FormRow(props) {
+  var children = props.children,
+      className = props.className,
+      gap = props.gap,
+      id = props.id;
+  var count = React.Children.count(children);
+  var alteredChildren = React.Children.map(children, function (child, i) {
+    return React.cloneElement(child, {
+      id: id + "-grandchild" + i
+    });
+  });
+  return React.createElement(SimpleGrid, {
+    columns: count,
+    className: className,
+    gap: gap,
+    id: id
+  }, alteredChildren);
+}
+/** FormField child-component */
+
+function FormField(props) {
+  var children = props.children,
+      className = props.className,
+      gap = props.gap,
+      id = props.id;
+  return React.createElement(SimpleGrid, {
+    columns: 1,
+    className: className,
+    gap: gap,
+    id: id
+  }, children);
+}
+/** main Form component */
+
+function Form(props) {
+  var action = props.action,
+      children = props.children,
+      className = props.className,
+      _props$id = props.id,
+      id = _props$id === void 0 ? generateUUID() : _props$id,
+      method = props.method,
+      spacing = props.spacing;
+  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,
+      id: id + "-child" + i
+    });
+  });
+  return React.createElement(react.Box, Object.assign({
+    as: "form",
+    "aria-label": "form",
+    id: id
+  }, attributes, {
+    className: className
+  }), React.createElement(SimpleGrid, {
+    columns: 1,
+    gap: spacing,
+    id: id + "-parent"
+  }, alteredChildren));
+}
+
+(function (DatePickerTypes) {
+  DatePickerTypes["Full"] = "full";
+  DatePickerTypes["Month"] = "month";
+  DatePickerTypes["Year"] = "year";
+})(exports.DatePickerTypes || (exports.DatePickerTypes = {}));
+
+// HTML Input types as defined by MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
+
+(function (TextInputTypes) {
+  TextInputTypes["email"] = "email";
+  TextInputTypes["hidden"] = "hidden"; // eslint-disable-next-line id-blacklist
+
   TextInputTypes["number"] = "number";
   TextInputTypes["password"] = "password";
   TextInputTypes["text"] = "text";
@@ -1963,6 +2301,14 @@ var TextInputFormats;
   TextInputFormats["textarea"] = "";
   TextInputFormats["url"] = "https://domain.com";
 })(TextInputFormats || (TextInputFormats = {}));
+
+var TextInputVariants;
+
+(function (TextInputVariants) {
+  TextInputVariants["Default"] = "default";
+  TextInputVariants["SearchBar"] = "searchBar";
+  TextInputVariants["SearchBarSelect"] = "searchBarSelect";
+})(TextInputVariants || (TextInputVariants = {}));
 /*
 export enum TextInputPatterns {
   // eslint-disable-next-line prettier/prettier
@@ -1984,95 +2330,90 @@ export enum TextInputPatterns {
  */
 
 function Label(props) {
-  var attributes = props.attributes,
-      blockName = props.blockName,
-      children = props.children,
+  var children = props.children,
       className = props.className,
       htmlFor = props.htmlFor,
-      id = props.id,
-      _props$modifiers = props.modifiers,
-      modifiers = _props$modifiers === void 0 ? [] : _props$modifiers,
+      _props$id = props.id,
+      id = _props$id === void 0 ? generateUUID() : _props$id,
       optReqFlag = props.optReqFlag;
-  var baseClass = "label";
-  var labelAttributes = {
-    className: bem(baseClass, modifiers, blockName, [className]),
+  var styles = react.useMultiStyleConfig("Label", {});
+  return React.createElement(react.Box, {
+    as: "label",
+    id: id,
+    className: className,
     htmlFor: htmlFor,
-    id: id
-  };
-  var helperString;
-
-  if (optReqFlag) {
-    helperString = React.createElement("div", {
-      className: bem("required-helper", [], baseClass)
-    }, optReqFlag);
-  }
-
-  return React.createElement("label", labelAttributes, attributes, children, helperString);
+    __css: styles
+  }, children, optReqFlag && React.createElement(react.Box, {
+    __css: styles.helper
+  }, optReqFlag));
 }
 
-/** Renders either an `input` element with a specified type or a `textarea`
- * element. All types will render an accessible Label component and an optional
- * HelperErrorText component.
+/**
+ * Renders either an `input` element with a specified type or a `textarea`
+ * element. All types will render an accessible `Label` component and an
+ * optional `HelperErrorText` component.
  */
 
 var TextInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$attributes = props.attributes,
       attributes = _props$attributes === void 0 ? {} : _props$attributes,
-      _props$type = props.type,
-      type = _props$type === void 0 ? exports.TextInputTypes.text : _props$type,
-      required = props.required,
+      className = props.className,
+      helperText = props.helperText,
+      _props$id = props.id,
+      id = _props$id === void 0 ? generateUUID() : _props$id,
+      invalidText = props.invalidText,
+      _props$isDisabled = props.isDisabled,
+      isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
+      _props$isInvalid = props.isInvalid,
+      isInvalid = _props$isInvalid === void 0 ? false : _props$isInvalid,
+      _props$isRequired = props.isRequired,
+      isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
       labelText = props.labelText,
+      onChange = props.onChange,
+      placeholder = props.placeholder,
       _props$showLabel = props.showLabel,
       showLabel = _props$showLabel === void 0 ? true : _props$showLabel,
       _props$showOptReqLabe = props.showOptReqLabel,
       showOptReqLabel = _props$showOptReqLabe === void 0 ? true : _props$showOptReqLabe,
-      helperText = props.helperText,
-      invalidText = props.invalidText,
-      placeholder = props.placeholder,
+      _props$type = props.type,
+      type = _props$type === void 0 ? exports.TextInputTypes.text : _props$type,
       value = props.value,
-      className = props.className,
-      disabled = props.disabled,
-      errored = props.errored,
-      onChange = props.onChange,
-      _props$modifiers = props.modifiers,
-      modifiers = _props$modifiers === void 0 ? [] : _props$modifiers,
-      _props$id = props.id,
-      id = _props$id === void 0 ? generateUUID() : _props$id;
+      _props$variantType = props.variantType,
+      variantType = _props$variantType === void 0 ? TextInputVariants.Default : _props$variantType;
+  var styles = react.useMultiStyleConfig("TextInput", {
+    variant: variantType
+  });
   var isTextArea = type === exports.TextInputTypes.textarea;
   var isHidden = type === exports.TextInputTypes.hidden;
-  var optReqFlag = required ? "Required" : "Optional";
-  var errorOutput = invalidText ? invalidText : "There is an error related to this field.";
-  var footnote;
+  var optReqFlag = isRequired ? "Required" : "Optional";
+  var finalInvalidText = invalidText ? invalidText : "There is an error related to this field.";
+  var footnote = isInvalid ? finalInvalidText : helperText;
+  var fieldOutput;
   var options;
-  if (!showLabel) attributes["aria-label"] = labelText;
-  if (helperText) attributes["aria-describedby"] = helperText;
-
-  if (errored) {
-    modifiers.push("error");
-  }
 
-  if (isTextArea) {
-    modifiers.push("textarea");
-  }
-
-  if (errored) {
-    footnote = errorOutput;
-  } else {
-    footnote = helperText;
+  if (!showLabel) {
+    attributes["aria-label"] = labelText && footnote ? labelText + " - " + footnote : labelText;
+  } else if (helperText) {
+    attributes["aria-describedby"] = id + "-helperText";
   }
 
   if (type === exports.TextInputTypes.tel || type === exports.TextInputTypes.url || type === exports.TextInputTypes.email) {
     var example = TextInputFormats[type];
     footnote = React.createElement(React.Fragment, null, "Ex: ", example, React.createElement("br", null), footnote);
-  }
+  } // When the type is "hidden", the input element needs fewer attributes.
+
 
-  options = _extends({
+  options = isHidden ? {
     id: id,
-    className: bem("inputfield", modifiers, "", [className]),
-    "aria-required": required,
     "aria-hidden": isHidden,
-    disabled: disabled,
-    required: required,
+    onChange: onChange,
+    ref: ref
+  } : _extends({
+    id: id,
+    "aria-required": isRequired,
+    isDisabled: isDisabled,
+    isRequired: isRequired,
+    isInvalid: isInvalid,
     placeholder: placeholder,
     onChange: onChange,
     ref: ref
@@ -2084,22 +2425,30 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
       type: type,
       value: value
     }, options);
+    fieldOutput = React.createElement(react.Input, Object.assign({}, options, {
+      __css: styles.input
+    }));
+  } else {
+    fieldOutput = React.createElement(react.Textarea, Object.assign({}, options, {
+      __css: styles.textarea
+    }), value);
   }
 
-  var fieldOutput = React.createElement(isTextArea ? "textarea" : "input", options, isTextArea ? value : null);
-  var transformedInput = React.createElement("div", {
-    className: "textinput"
+  return React.createElement(react.Box, {
+    __css: styles,
+    className: className
   }, labelText && showLabel && !isHidden && React.createElement(Label, {
     htmlFor: id,
     optReqFlag: showOptReqLabel && optReqFlag,
     id: id + "-label"
-  }, labelText), fieldOutput, (helperText && !isHidden || errored) && React.createElement(HelperErrorText, {
-    isError: errored,
+  }, labelText), fieldOutput, footnote && !isHidden && React.createElement(react.Box, {
+    __css: styles.helper,
+    "aria-disabled": isDisabled
+  }, React.createElement(HelperErrorText, {
+    isError: isInvalid,
     id: id + "-helperText"
-  }, footnote));
-  return transformedInput;
+  }, footnote)));
 });
-TextInput.displayName = "TextInput";
 
 /**
  * A Design System `TextInput` component that is used as the custom input
@@ -2118,10 +2467,10 @@ var CustomTextInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       onChange = _ref.onChange,
       value = _ref.value,
       labelText = _ref.labelText,
-      disabled = _ref.disabled,
+      isDisabled = _ref.isDisabled,
       dsRequired = _ref.dsRequired,
       showOptReqLabel = _ref.showOptReqLabel,
-      errored = _ref.errored,
+      isInvalid = _ref.isInvalid,
       helperText = _ref.helperText,
       invalidText = _ref.invalidText,
       onClick = _ref.onClick,
@@ -2134,10 +2483,10 @@ var CustomTextInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onChange: onChange,
     value: value,
     labelText: labelText,
-    disabled: disabled,
-    required: dsRequired,
+    isDisabled: isDisabled,
+    isRequired: dsRequired,
     showOptReqLabel: showOptReqLabel,
-    errored: errored,
+    isInvalid: isInvalid,
     helperText: helperText,
     invalidText: invalidText,
     // Use either the specific prop-based or the forwardRef value.
@@ -2211,11 +2560,11 @@ var DatePicker = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
       helperTextFrom = props.helperTextFrom,
       helperTextTo = props.helperTextTo,
       invalidText = props.invalidText,
-      errored = props.errored,
+      isInvalid = props.isInvalid,
       required = props.required,
       _props$showOptReqLabe = props.showOptReqLabel,
       showOptReqLabel = _props$showOptReqLabe === void 0 ? true : _props$showOptReqLabe,
-      disabled = props.disabled,
+      isDisabled = props.isDisabled,
       nameFrom = props.nameFrom,
       nameTo = props.nameTo,
       blockName = props.blockName,
@@ -2269,7 +2618,7 @@ var DatePicker = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     minDate: minDate ? new Date(minDate) : null,
     maxDate: maxDate ? new Date(maxDate) : null,
     dateFormat: dateFormat,
-    disabled: disabled
+    isDisabled: isDisabled
   }; // Both TextInput components share some props.
 
   var baseCustomTextInputAttrs = {
@@ -2278,8 +2627,8 @@ var DatePicker = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     // Always display the labels or the input fields when
     // the DatePicker component is a `dateRange` type.
     showLabel: dateRange ? true : showLabel,
-    disabled: disabled,
-    errored: errored,
+    isDisabled: isDisabled,
+    isInvalid: isInvalid,
     helperText: dateRange ? helperTextFrom : helperText,
     invalidText: invalidText
   };
@@ -2373,92 +2722,89 @@ var DatePicker = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
   }, helperText));
 });
 
-(function (FormSpacing) {
-  FormSpacing["ExtraExtraSmall"] = "extra-extra-small";
-  FormSpacing["ExtraSmall"] = "extra-small";
-  FormSpacing["Small"] = "small";
-  FormSpacing["Medium"] = "medium";
-  FormSpacing["Large"] = "large";
-  FormSpacing["ExtraLarge"] = "extra-large";
-})(exports.FormSpacing || (exports.FormSpacing = {}));
-
 (function (HeroTypes) {
-  HeroTypes["Campaign"] = "CAMPAIGN";
-  HeroTypes["FiftyFifty"] = "FIFTYFIFTY";
-  HeroTypes["Primary"] = "PRIMARY";
-  HeroTypes["Secondary"] = "SECONDARY";
-  HeroTypes["Tertiary"] = "TERTIARY";
+  HeroTypes["Primary"] = "primary";
+  HeroTypes["Secondary"] = "secondary";
+  HeroTypes["SecondaryBooksAndMore"] = "secondaryBooksAndMore";
+  HeroTypes["SecondaryLocations"] = "secondaryLocations";
+  HeroTypes["SecondaryResearch"] = "secondaryResearch";
+  HeroTypes["SecondaryWhatsOn"] = "secondaryWhatsOn";
+  HeroTypes["Tertiary"] = "tertiary";
+  HeroTypes["Campaign"] = "campaign";
+  HeroTypes["FiftyFifty"] = "fiftyfifty";
 })(exports.HeroTypes || (exports.HeroTypes = {}));
 
-// OH-30 Header with Image Right
+var HeroSecondaryTypes = [exports.HeroTypes.Secondary, exports.HeroTypes.SecondaryBooksAndMore, exports.HeroTypes.SecondaryLocations, exports.HeroTypes.SecondaryResearch, exports.HeroTypes.SecondaryWhatsOn];
+
+var variantMap$2 = {};
+
+for (var type$2 in exports.HeroTypes) {
+  variantMap$2[exports.HeroTypes[type$2]] = exports.HeroTypes[type$2];
+}
+/**
+ * Map the HeroTypes to the Hero Chakra theme variant object. If a wrong
+ * value is passed (typically in non-Typescript scenarios), then the default
+ * is the "primary" variant.
+ */
+
+
+var getVariant$3 = function getVariant(type) {
+  return variantMap$2[type] || exports.HeroTypes.Primary;
+};
+
 function Hero(props) {
-  var heroBaseClass = "hero";
   var backgroundColor = props.backgroundColor,
       backgroundImageSrc = props.backgroundImageSrc,
-      blockName = props.blockName,
-      className = props.className,
       foregroundColor = props.foregroundColor,
       heading = props.heading,
       heroType = props.heroType,
       image = props.image,
-      _props$modifiers = props.modifiers,
-      modifiers = _props$modifiers === void 0 ? [] : _props$modifiers,
       locationDetails = props.locationDetails,
       subHeaderText = props.subHeaderText;
+  var variant = getVariant$3(heroType);
+  var styles = react.useMultiStyleConfig("Hero", {
+    variant: variant
+  });
+  var headingStyles = styles.heading; // We want to add `Hero`-specific styling to the `Heading` component.
 
-  if (heroType === exports.HeroTypes.Primary) {
-    modifiers.push("primary");
-  } else if (heroType === exports.HeroTypes.Secondary) {
-    modifiers.push("secondary");
-  } else if (heroType === exports.HeroTypes.Tertiary) {
-    modifiers.push("tertiary");
-  } else if (heroType === exports.HeroTypes.FiftyFifty) {
-    modifiers.push("50-50");
-  } else if (heroType === exports.HeroTypes.Campaign) {
-    modifiers.push("campaign");
-  }
+  var finalHeading = heading && React.cloneElement(heading, {
+    sx: headingStyles
+  });
+  var backgroundImageStyle = {};
+  var contentBoxStyling = {};
 
-  if (heroType === exports.HeroTypes.Primary && !backgroundImageSrc) {
-    console.warn("Warning: it is recommended to use the \"backgroundImageSrc\" prop for PRIMARY hero");
-    modifiers.push("warning");
-  }
+  if (heroType === exports.HeroTypes.Primary) {
+    if (!backgroundImageSrc) {
+      console.warn("Warning: it is recommended to use the \"backgroundImageSrc\" prop for PRIMARY hero.");
+    }
 
-  if (heroType === exports.HeroTypes.Primary && image) {
-    console.warn("Warning: the \"image\" prop has been passed, but PRIMARY hero will not use it");
-    modifiers.push("warning");
+    if (image) {
+      console.warn("Warning: the \"image\" prop has been passed, but PRIMARY hero will not use it.");
+    }
+  } else if (locationDetails) {
+    console.warn("Warning: Please provide \"locationDetails\" only to PRIMARY hero.");
   }
 
-  if (heroType === exports.HeroTypes.Secondary && backgroundImageSrc) {
-    console.warn("Warning: the \"backgroundImageSrc\" prop has been passed, but SECONDARY hero will not use it");
-    modifiers.push("warning");
+  if (HeroSecondaryTypes.includes(heroType) && backgroundImageSrc) {
+    console.warn("Warning: the \"backgroundImageSrc\" prop has been passed, but SECONDARY hero will not use it.");
   }
 
   if (heroType === exports.HeroTypes.Tertiary && (backgroundImageSrc || image)) {
-    console.warn("Warning: TERTIARY hero will not use any of the image props");
-    modifiers.push("warning");
-  }
-
-  if (heroType === exports.HeroTypes.FiftyFifty && backgroundImageSrc) {
-    console.warn("Warning: the \"backgroundImageSrc\" prop has been passed, but FIFTYFIFTY hero will not use it");
-    modifiers.push("warning");
+    console.warn("Warning: TERTIARY hero will not use any of the image props.");
   }
 
   if (heroType === exports.HeroTypes.Campaign && (!backgroundImageSrc || !image)) {
-    console.warn("Warning: it is recommended to use both \"backgroundImageSrc\" and \"image\" props for CAMPAIGN hero");
-    modifiers.push("warning");
+    console.warn("Warning: it is recommended to use both \"backgroundImageSrc\" and \"image\" props for CAMPAIGN hero.");
   }
 
-  if (heroType !== exports.HeroTypes.Primary && locationDetails) {
-    console.warn("Warning: Please provide \"locationDetails\" only to PRIMARY hero");
-    modifiers.push("warning");
+  if (heroType === exports.HeroTypes.FiftyFifty && backgroundImageSrc) {
+    console.warn("Warning: the \"backgroundImageSrc\" prop has been passed, but FIFTYFIFTY hero will not use it.");
   }
 
-  var backgroundImageStyle = {};
-
   if (heroType === exports.HeroTypes.Primary) {
     backgroundImageStyle = backgroundImageSrc ? {
       backgroundImage: "url(" + backgroundImageSrc + ")"
-    } : null;
+    } : {};
   } else if (heroType === exports.HeroTypes.Campaign) {
     backgroundImageStyle = backgroundImageSrc ? {
       backgroundImage: "url(" + backgroundImageSrc + ")"
@@ -2471,30 +2817,29 @@ function Hero(props) {
     };
   }
 
-  var contentBoxStyling = {};
-
-  if (heroType === exports.HeroTypes.Primary || heroType === exports.HeroTypes.Tertiary || heroType === exports.HeroTypes.FiftyFifty || heroType === exports.HeroTypes.Campaign) {
+  if (!HeroSecondaryTypes.includes(heroType)) {
     contentBoxStyling = {
       color: foregroundColor,
       backgroundColor: backgroundColor
     };
-  } else {
-    if (foregroundColor || backgroundColor) {
-      console.warn("Warning: the \"foregroundColor\" and/or \"backgroundColor\" props have been passed, but SECONDARY Hero will not use them");
-      modifiers.push("warning");
-    }
+  } else if (foregroundColor || backgroundColor) {
+    console.warn("Warning: the \"foregroundColor\" and/or \"backgroundColor\" props have been passed, but SECONDARY Hero will not use them.");
   }
 
-  var childrenToRender = heroType === exports.HeroTypes.Campaign ? React.createElement(React.Fragment, null, image, React.createElement("div", {
-    className: "interior"
-  }, heading, subHeaderText)) : React.createElement(React.Fragment, null, heroType !== exports.HeroTypes.Primary && heroType !== exports.HeroTypes.Tertiary && image, heading, heroType === exports.HeroTypes.Tertiary && subHeaderText ? React.createElement("p", null, subHeaderText) : subHeaderText);
-  return React.createElement("div", {
-    className: bem(heroBaseClass, modifiers, blockName, [className]),
+  var childrenToRender = heroType === exports.HeroTypes.Campaign ? React.createElement(React.Fragment, null, image, React.createElement(react.Box, {
+    __css: styles.interior
+  }, finalHeading, subHeaderText)) : React.createElement(React.Fragment, null, heroType !== exports.HeroTypes.Primary && heroType !== exports.HeroTypes.Tertiary && image, finalHeading, heroType === exports.HeroTypes.Tertiary && subHeaderText ? React.createElement("p", null, subHeaderText) : React.createElement(react.Box, {
+    __css: styles.bodyText
+  }, subHeaderText));
+  return React.createElement(react.Box, {
+    "data-testid": "hero",
     "data-responsive-background-image": true,
-    style: backgroundImageStyle
-  }, React.createElement("div", {
-    className: bem("content", [], heroBaseClass),
-    style: contentBoxStyling
+    style: backgroundImageStyle,
+    __css: styles
+  }, React.createElement(react.Box, {
+    "data-testid": "hero-content",
+    style: contentBoxStyling,
+    __css: styles.content
   }, childrenToRender), locationDetails);
 }
 
@@ -2582,90 +2927,99 @@ Input.displayName = "Input";
 })(exports.LinkTypes || (exports.LinkTypes = {}));
 
 /**
- * A component that uses an `href` prop or a child anchor element, to create an
- * anchor element with added styling and conventions.
+ * Renders the `Link` children components with a direction arrow icon based
+ * on the `Backwards` or `Forwards` `LinkTypes` type.
+ */
+
+function getWithDirectionIcon(children, type) {
+  var iconRotation;
+  var iconAlign;
+  var icon = null; // An icon needs a position in order for it to be created and
+  // rendered in the link.
+
+  if (type === exports.LinkTypes.Backwards) {
+    iconRotation = exports.IconRotationTypes.Rotate90;
+    iconAlign = IconAlign.Left;
+  } else if (type === exports.LinkTypes.Forwards) {
+    iconRotation = exports.IconRotationTypes.Rotate270;
+    iconAlign = IconAlign.Right;
+  }
+
+  icon = React.createElement(Icon, {
+    name: exports.IconNames.Arrow,
+    align: iconAlign,
+    iconRotation: iconRotation,
+    className: "more-link"
+  });
+  return React.createElement(React.Fragment, null, type === exports.LinkTypes.Backwards && icon, children, type === exports.LinkTypes.Forwards && icon);
+}
+/**
+ * A component that uses an `href` prop or a child anchor element, to create
+ * an anchor element with added styling and conventions.
  */
 
+
 var Link = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var attributes = props.attributes,
-      blockName = props.blockName,
+      children = props.children,
       className = props.className,
       href = props.href,
-      id = props.id,
+      _props$id = props.id,
+      id = _props$id === void 0 ? generateUUID() : _props$id,
       _props$type = props.type,
-      type = _props$type === void 0 ? exports.LinkTypes.Default : _props$type,
-      _props$modifiers = props.modifiers,
-      modifiers = _props$modifiers === void 0 ? [] : _props$modifiers,
-      children = props.children; // Merge the necessary props alongside any extra props for the
+      type = _props$type === void 0 ? exports.LinkTypes.Default : _props$type; // Merge the necessary props alongside any extra props for the
   // anchor element.
 
   var linkProps = _extends({
     id: id,
     href: href
-  }, attributes);
+  }, attributes); // The LinkTypes.Default type.
+
 
-  var baseClass = "link";
-  var childProps = {};
+  var variant = "link";
 
   if (typeof children === "string" && !href) {
     throw new Error("Link needs prop 'href'");
   }
 
   if (type === exports.LinkTypes.Action || type === exports.LinkTypes.Forwards || type === exports.LinkTypes.Backwards) {
-    baseClass = "more-link";
+    variant = "moreLink";
   } else if (type === exports.LinkTypes.Button) {
-    baseClass = "button";
-  }
-
-  var iconRotation, iconPosition, iconLeft, iconRight; // An icon needs a position in order for it to be created and
-  // rendered in the link.
-
-  if (type === exports.LinkTypes.Backwards) {
-    iconRotation = exports.IconRotationTypes.rotate90;
-    iconPosition = "left";
-  } else if (type === exports.LinkTypes.Forwards) {
-    iconRotation = exports.IconRotationTypes.rotate270;
-    iconPosition = "right";
+    variant = "button";
   }
 
-  var navigationIconProps = {
-    name: exports.IconNames.arrow,
-    modifiers: [iconPosition, iconRotation].concat(modifiers),
-    blockName: "more-link",
-    decorative: true
-  };
-
-  if (type === exports.LinkTypes.Backwards) {
-    iconLeft = React.createElement(Icon, Object.assign({}, navigationIconProps));
-  } else if (type === exports.LinkTypes.Forwards) {
-    iconRight = React.createElement(Icon, Object.assign({}, navigationIconProps));
-  }
+  var style = react.useStyleConfig("Link", {
+    variant: variant
+  }); // Render with specific direction arrows only if the type
+  // is Forwards or Backwards.
 
-  var linkClassName = bem(baseClass, modifiers, blockName, [className]);
+  var newChildren = type === exports.LinkTypes.Forwards || type === exports.LinkTypes.Backwards ? getWithDirectionIcon(children, type) : children;
 
-  if (!props.href) {
-    // React Types error makes this fail:  https://github.com/DefinitelyTyped/DefinitelyTyped/issues/32832
-    // let children = React.Children.only(props.children);
-    if (React.Children.count(props.children) > 1) {
-      throw new Error("Please pass only one child into Link");
+  if (!href) {
+    // React Types error makes this fail:
+    // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/32832
+    // let children = React.Children.only(children);
+    if (React.Children.count(children) > 1) {
+      throw new Error("Please pass only one child into `Link`.");
     }
 
-    var _children = props.children[0] ? props.children[0] : props.children;
-
-    childProps = _children.props;
-    return React.cloneElement(_children, _extends({
-      className: linkClassName
+    var childrenToClone = children[0] ? children[0] : children;
+    var childProps = childrenToClone.props;
+    return React.cloneElement(childrenToClone, _extends({
+      className: className
     }, linkProps, childProps, {
       ref: ref
-    }), [_children.props.children]);
+    }), [childrenToClone.props.children]);
   } else {
-    return React.createElement("a", _extends({}, linkProps, {
-      className: linkClassName,
+    return React.createElement(react.Box, Object.assign({
+      as: "a",
+      className: className,
       ref: ref
-    }), iconLeft, props.children, iconRight);
+    }, linkProps, {
+      __css: style
+    }), newChildren);
   }
 });
-Link.displayName = "Link";
 
 (function (ListTypes) {
   ListTypes["Ordered"] = "ol";
@@ -2885,18 +3239,18 @@ function Notification(props) {
         return React__default.createElement(Icon, {
           decorative: false,
           className: "notification-icon",
-          name: exports.IconNames.speaker_notes,
-          color: exports.IconColors.section_research_secondary,
-          modifiers: ["large"]
+          name: exports.IconNames.SpeakerNotes,
+          color: exports.IconColors.SectionResearchSecondary,
+          size: exports.IconSizes.Large
         });
 
       case "warning":
         return React__default.createElement(Icon, {
           decorative: false,
           className: "notification-icon",
-          name: exports.IconNames.error_filled,
-          color: exports.IconColors.brand_primary,
-          modifiers: ["large"]
+          name: exports.IconNames.ErrorFilled,
+          color: exports.IconColors.BrandPrimary,
+          size: exports.IconSizes.Large
         });
 
       default:
@@ -2946,34 +3300,12 @@ function Notification(props) {
     className: "dismissible-button",
     onClick: handleClose
   }, React__default.createElement(Icon, {
-    modifiers: ["medium"],
     decorative: false,
-    name: exports.IconNames.close,
-    titleText: "Close notification"
+    name: exports.IconNames.Close,
+    size: exports.IconSizes.Large
   })) : null);
 }
 
-// Utility functions to use throughout the codebase
-
-/**
- * range
- * Get an array of values from `start` to `stop` - 1 with an optional
- * `step` between values.
- */
-var range = function range(start, stop, step) {
-  if (step === void 0) {
-    step = 1;
-  }
-
-  if (!start) {
-    return [];
-  }
-
-  return Array(Math.ceil((stop - start) / step)).fill(start).map(function (x, y) {
-    return x + y * step;
-  });
-};
-
 /** A component that provides a navigational list of page items. */
 
 var Pagination = function Pagination(props) {
@@ -3170,92 +3502,6 @@ var Radio = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, footnote)));
 });
 
-/**
- * This is based on:
- *   root size of 16px or 1rem
- *   1 spacing unit is 4px or 0.25rem
- *
- * Chakra's mental model: If you need a spacing of 40px, divide it by 4.
- * That'll give you 10. Then use it in your component.
- *
- * The DS uses eight CSS variables/values found in "src/styles/03-space/_space.css":
- *   --space-xxs = 4px or 0.25rem
- *   --space-xs = 8px or 0.5rem
- *   --space-s = 16px or 1rem
- *   --space-m = 24px or 1.5rem
- *   --space-l = 32px or 2rem
- *   --space-xl = 48px or 3rem
- *   --space-xxl = 64px or 4rem
- *   --space-xxxl = 96px or 6rem
- *
- * @note Even though all the following values are available through Chakra,
- * we recommend to only use the spacing values that map to the DS values
- * declared above.
- *
- * Chakra Number Value | Chakra Name value | DS Variable
- * ------------------- | ----------------- | -----------------
- *        1            |         xxs       |   --space-xxs
- *        2            |         xs        |   --space-xs
- *        4            |         s         |   --space-s
- *        6            |         m         |   --space-m
- *        8            |         l         |   --space-l
- *        12           |         xl        |   --space-xl
- *        16           |         xxl       |   --space-xxl
- *        24           |         xxxl      |   --space-xxxl
- */
-var spacing = {
-  px: "1px",
-  0: "0",
-  0.5: "0.125rem",
-  // --space-xxs = 4px
-  xxs: "0.25rem",
-  1: "0.25rem",
-  1.5: "0.375rem",
-  // --space-xs = 8px
-  xs: "0.5rem",
-  2: "0.5rem",
-  2.5: "0.625rem",
-  3: "0.75rem",
-  3.5: "0.875rem",
-  // --space-s = 16px
-  s: "1rem",
-  4: "1rem",
-  5: "1.25rem",
-  // --space-m = 24px
-  m: "1.5rem",
-  6: "1.5rem",
-  7: "1.75rem",
-  // --space-l = 32px
-  l: "2rem",
-  8: "2rem",
-  9: "2.25rem",
-  10: "2.5rem",
-  // --space-xl = 48px
-  xl: "3rem",
-  12: "3rem",
-  14: "3.5rem",
-  // --space-xxl = 64px
-  xxl: "4rem",
-  16: "4rem",
-  20: "5rem",
-  // --space-xxxl = 96px
-  xxxl: "6rem",
-  24: "6rem",
-  28: "7rem",
-  32: "8rem",
-  36: "9rem",
-  40: "10rem",
-  44: "11rem",
-  48: "12rem",
-  52: "13rem",
-  56: "14rem",
-  60: "15rem",
-  64: "16rem",
-  72: "18rem",
-  80: "20rem",
-  96: "24rem"
-};
-
 (function (RadioGroupLayoutTypes) {
   RadioGroupLayoutTypes["Column"] = "column";
   RadioGroupLayoutTypes["Row"] = "row";
@@ -3315,22 +3561,14 @@ var RadioGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var chakraRadioProps = getRadioProps({
       value: child.props.value
     });
-    var newProps = {
-      key: i
-    };
 
     if (child !== undefined && child !== null) {
-      if (isDisabled) {
-        newProps["isDisabled"] = true;
-      }
-
-      if (isInvalid) {
-        newProps["isInvalid"] = true;
-      }
-
-      if (isRequired) {
-        newProps["isRequired"] = true;
-      }
+      var newProps = {
+        key: i,
+        isDisabled: isDisabled,
+        isInvalid: isInvalid,
+        isRequired: isRequired
+      };
 
       if (child.props.value === defaultValue) {
         newProps["checked"] = true;
@@ -3363,57 +3601,219 @@ var RadioGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, footnote)));
 });
 
-/** Renders a wrapper `form` element to be used with `Select` (optional),
- * `Input`, and `Button` components together. */
-
-function SearchBar(props) {
-  var ariaLabel = props.ariaLabel,
-      ariaLabelledBy = props.ariaLabelledBy,
-      blockName = props.blockName,
-      children = props.children,
-      className = props.className,
-      id = props.id,
-      _props$modifiers = props.modifiers,
-      modifiers = _props$modifiers === void 0 ? [] : _props$modifiers,
-      onSubmit = props.onSubmit,
-      attributes = props.attributes,
-      method = props.method,
-      action = props.action;
-  var baseClass = "search-bar";
-  return React.createElement("form", Object.assign({
-    className: bem(baseClass, modifiers, blockName, [className]),
-    id: id,
-    role: "search",
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    onSubmit: onSubmit,
-    method: method,
-    action: action
-  }, attributes), children);
-}
+var SelectTypes;
 
-(function (SkeletonLoaderLayouts) {
-  SkeletonLoaderLayouts["Horizontal"] = "horizontal";
-  SkeletonLoaderLayouts["Vertical"] = "vertical";
-})(exports.SkeletonLoaderLayouts || (exports.SkeletonLoaderLayouts = {}));
+(function (SelectTypes) {
+  SelectTypes["Default"] = "default";
+  SelectTypes["SearchBar"] = "searchbar";
+})(SelectTypes || (SelectTypes = {}));
 
-(function (SkeletonLoaderImageRatios) {
-  SkeletonLoaderImageRatios["Landscape"] = "landscape";
-  SkeletonLoaderImageRatios["Portrait"] = "portrait";
-  SkeletonLoaderImageRatios["Square"] = "square";
-})(exports.SkeletonLoaderImageRatios || (exports.SkeletonLoaderImageRatios = {}));
+/**
+ * Component that renders Chakra's `Select` component along with an accessible
+ * `Label` and optional `HelperErrorText` component.
+ */
 
-function SkeletonLoader(props) {
-  var border = props.border,
+var Select = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
+  var children = props.children,
       className = props.className,
-      _props$contentSize = props.contentSize,
-      contentSize = _props$contentSize === void 0 ? 3 : _props$contentSize,
+      helperText = props.helperText,
+      _props$id = props.id,
+      id = _props$id === void 0 ? generateUUID() : _props$id,
+      invalidText = props.invalidText,
+      _props$isDisabled = props.isDisabled,
+      isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
+      _props$isInvalid = props.isInvalid,
+      isInvalid = _props$isInvalid === void 0 ? false : _props$isInvalid,
+      _props$isRequired = props.isRequired,
+      isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
+      labelText = props.labelText,
+      name = props.name,
+      onChange = props.onChange,
+      _props$showLabel = props.showLabel,
+      showLabel = _props$showLabel === void 0 ? true : _props$showLabel,
+      _props$showOptReqLabe = props.showOptReqLabel,
+      showOptReqLabel = _props$showOptReqLabe === void 0 ? true : _props$showOptReqLabe,
+      _props$type = props.type,
+      type = _props$type === void 0 ? SelectTypes.Default : _props$type,
+      value = props.value;
+  var ariaAttributes = {};
+  var optReqFlag = isRequired ? "Required" : "Optional";
+  var styles = react.useMultiStyleConfig("CustomSelect", {
+    variant: type
+  });
+  var finalInvalidText = invalidText ? invalidText : "There is an error related to this field.";
+  var footnote = isInvalid ? finalInvalidText : helperText; // To control the `Select` component, both `onChange` and `value`
+  // must be passed.
+
+  var controlledProps = onChange && value ? {
+    onChange: onChange,
+    value: value
+  } : {};
+
+  if (!showLabel) {
+    ariaAttributes["aria-label"] = labelText && footnote ? labelText + " - " + footnote : labelText;
+  } else if (helperText) {
+    ariaAttributes["aria-describedby"] = id + "-helperText";
+  }
+
+  if (React__default.Children.count(children) > 10) {
+    console.warn("NYPL DS recommends that <select> fields have no more than 10 options; an auto-complete text input is a good alternative for 11 or more options.");
+  }
+
+  if (React__default.Children.count(children) < 4) {
+    console.warn("NYPL DS recommends that <select> fields have at least 4 options; a radio button group is a good alternative for 3 or fewer options.");
+  }
+
+  return React__default.createElement(react.Box, {
+    className: className,
+    __css: styles
+  }, showLabel && React__default.createElement(Label, {
+    id: id + "-label",
+    htmlFor: id,
+    optReqFlag: showOptReqLabel && optReqFlag
+  }, labelText), React__default.createElement(react.Select, Object.assign({
+    id: id,
+    variant: "outline",
+    isRequired: isRequired,
+    isDisabled: isDisabled,
+    isInvalid: isInvalid,
+    name: name,
+    ref: ref
+  }, controlledProps, ariaAttributes, {
+    icon: React__default.createElement(Icon, {
+      name: exports.IconNames.Arrow,
+      size: exports.IconSizes.Medium
+    }),
+    __css: styles.select
+  }), children), footnote && React__default.createElement(react.Box, {
+    __css: styles.helper,
+    "aria-disabled": isDisabled
+  }, React__default.createElement(HelperErrorText, {
+    isError: isInvalid,
+    id: id + "-helperText"
+  }, footnote)));
+});
+
+/**
+ * Renders a wrapper `form` element to be used with `Select` (optional),
+ * `Input`, and `Button` components together.
+ */
+
+function SearchBar(props) {
+  var action = props.action,
+      _props$buttonOnClick = props.buttonOnClick,
+      buttonOnClick = _props$buttonOnClick === void 0 ? null : _props$buttonOnClick,
+      className = props.className,
+      helperErrorText = props.helperErrorText,
+      _props$id = props.id,
+      id = _props$id === void 0 ? generateUUID() : _props$id,
+      invalidText = props.invalidText,
+      _props$isDisabled = props.isDisabled,
+      isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
+      _props$isInvalid = props.isInvalid,
+      isInvalid = _props$isInvalid === void 0 ? false : _props$isInvalid,
+      _props$isRequired = props.isRequired,
+      isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
+      labelText = props.labelText,
+      method = props.method,
+      onSubmit = props.onSubmit,
+      selectProps = props.selectProps,
+      textInputElement = props.textInputElement,
+      textInputProps = props.textInputProps;
+  var styles = react.useMultiStyleConfig("SearchBar", {
+    hasSelect: selectProps
+  });
+  var stateProps = {
+    isDisabled: isDisabled,
+    isInvalid: isInvalid,
+    isRequired: isRequired
+  };
+  var helperErrorTextID = generateUUID();
+  var ariaDescribedby = helperErrorTextID;
+  var footnote = isInvalid ? invalidText : helperErrorText;
+  var finalAriaLabel = footnote ? labelText + " - " + footnote : labelText; // Render the `Select` component.
+
+  var selectElem = selectProps && React.createElement(Select, Object.assign({
+    id: generateUUID(),
+    name: selectProps == null ? void 0 : selectProps.name,
+    labelText: selectProps == null ? void 0 : selectProps.labelText,
+    showLabel: false,
+    helperText: "",
+    type: SelectTypes.SearchBar
+  }, stateProps), selectProps == null ? void 0 : selectProps.optionsData.map(function (option) {
+    return React.createElement("option", {
+      key: option,
+      value: option
+    }, option);
+  })); // Render the `TextInput` component.
+
+  var textInputNative = textInputProps && React.createElement(TextInput, Object.assign({
+    id: generateUUID(),
+    labelText: textInputProps == null ? void 0 : textInputProps.labelText,
+    placeholder: textInputProps == null ? void 0 : textInputProps.placeholder,
+    type: exports.TextInputTypes.text,
+    variantType: selectElem ? TextInputVariants.SearchBarSelect : TextInputVariants.SearchBar,
+    helperText: "",
+    showLabel: false
+  }, stateProps)); // Render the `Button` component.
+
+  var buttonElem = React.createElement(Button, {
+    id: generateUUID(),
+    buttonType: exports.ButtonTypes.SearchBar,
+    type: "submit",
+    onClick: buttonOnClick,
+    disabled: isDisabled
+  }, React.createElement(Icon, {
+    name: exports.IconNames.Search,
+    size: exports.IconSizes.Small,
+    align: IconAlign.Left
+  }), "Search"); // Render the `HelperErrorText` component.
+
+  var helperErrorTextElem = footnote && React.createElement(HelperErrorText, {
+    id: helperErrorTextID,
+    isError: isInvalid
+  }, footnote); // If a custom input element was passed, use that instead of the
+  // `TextInput` component.
+
+  var textInputElem = textInputElement || textInputNative;
+  return React.createElement(react.Box, {
+    as: "form",
+    id: id,
+    className: className,
+    role: "search",
+    "aria-label": finalAriaLabel,
+    "aria-describedby": ariaDescribedby,
+    onSubmit: onSubmit,
+    method: method,
+    action: action,
+    __css: styles
+  }, React.createElement(react.Box, {
+    __css: styles.topRow
+  }, selectElem, textInputElem, buttonElem), helperErrorTextElem);
+}
+
+(function (SkeletonLoaderLayouts) {
+  SkeletonLoaderLayouts["Row"] = "row";
+  SkeletonLoaderLayouts["Column"] = "column";
+})(exports.SkeletonLoaderLayouts || (exports.SkeletonLoaderLayouts = {}));
+
+(function (SkeletonLoaderImageRatios) {
+  SkeletonLoaderImageRatios["Landscape"] = "landscape";
+  SkeletonLoaderImageRatios["Portrait"] = "portrait";
+  SkeletonLoaderImageRatios["Square"] = "square";
+})(exports.SkeletonLoaderImageRatios || (exports.SkeletonLoaderImageRatios = {}));
+
+function SkeletonLoader(props) {
+  var border = props.border,
+      className = props.className,
+      _props$contentSize = props.contentSize,
+      contentSize = _props$contentSize === void 0 ? 3 : _props$contentSize,
       _props$headingSize = props.headingSize,
       headingSize = _props$headingSize === void 0 ? 1 : _props$headingSize,
       _props$imageAspectRat = props.imageAspectRatio,
       imageAspectRatio = _props$imageAspectRat === void 0 ? exports.SkeletonLoaderImageRatios.Square : _props$imageAspectRat,
       _props$layout = props.layout,
-      layout = _props$layout === void 0 ? exports.SkeletonLoaderLayouts.Vertical : _props$layout,
+      layout = _props$layout === void 0 ? exports.SkeletonLoaderLayouts.Column : _props$layout,
       _props$showButton = props.showButton,
       showButton = _props$showButton === void 0 ? false : _props$showButton,
       _props$showContent = props.showContent,
@@ -3434,6 +3834,7 @@ function SkeletonLoader(props) {
 
   for (var i = 0; i < headingSize; i++) {
     headingItems.push(React.createElement("div", {
+      key: "heading-" + i,
       className: bem("skeleton-loader-heading", imageModifiers, "", ["skeleton-element"])
     }));
   }
@@ -3442,6 +3843,7 @@ function SkeletonLoader(props) {
 
   for (var _i = 0; _i < contentSize; _i++) {
     contentItems.push(React.createElement("div", {
+      key: "content-" + _i,
       className: bem("skeleton-loader-content", imageModifiers, "", ["skeleton-element"])
     }));
   }
@@ -3470,124 +3872,34 @@ function SkeletonLoader(props) {
   }))));
 }
 
-var Select = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
-  var _props$ariaLabel = props.ariaLabel,
-      ariaLabel = _props$ariaLabel === void 0 ? null : _props$ariaLabel,
-      blockName = props.blockName,
-      children = props.children,
-      className = props.className,
-      errored = props.errored,
-      invalidText = props.invalidText,
-      helperText = props.helperText,
-      helperTextId = props.helperTextId,
-      isRequired = props.isRequired,
-      labelId = props.labelId,
-      labelText = props.labelText,
-      onBlur = props.onBlur,
-      onChange = props.onChange,
-      name = props.name,
-      required = props.required,
-      _props$attributes = props.attributes,
-      attributes = _props$attributes === void 0 ? {} : _props$attributes,
-      _props$disabled = props.disabled,
-      disabled = _props$disabled === void 0 ? false : _props$disabled,
-      selectedOption = props.selectedOption,
-      showLabel = props.showLabel,
-      _props$showOptReqLabe = props.showOptReqLabel,
-      showOptReqLabel = _props$showOptReqLabe === void 0 ? true : _props$showOptReqLabe;
-  var modifiers = props.modifiers ? props.modifiers : [];
-  var id = props.id || generateUUID();
-  var ariaLabelledBy = null;
-  if (!showLabel) attributes["aria-label"] = labelText;
-  if (helperText && showLabel) attributes["aria-describedby"] = id + "-helperText";
-  if (errored) modifiers.push("error");
-  var req = isRequired || required;
-  var optReqFlag = req ? "Required" : "Optional";
-  var errorOutput = invalidText ? invalidText : "There is an error related to this field.";
-  var footnote = errored ? errorOutput : helperText; // Support for deprecated prop
-
-  if (ariaLabel) attributes["aria-label"] = ariaLabel; // Support for deprecated props
-
-  if (labelId && !helperTextId) {
-    ariaLabelledBy = labelId;
-  } else if (helperTextId && !labelId) {
-    ariaLabelledBy = helperTextId;
-  } else if (labelId && helperTextId) {
-    ariaLabelledBy = labelId + " " + helperTextId;
-  }
-
-  if (React__default.Children.count(children) > 10) {
-    console.warn("NYPL DS recommends that <select> fields have no more than 10 options; an auto-complete text input is a good alternative for 11 or more options.");
-  }
-
-  if (React__default.Children.count(children) < 4) {
-    console.warn("NYPL DS recommends that <select> fields have at least 4 options; a radio button group is a good alternative for 3 or fewer options.");
-  }
-
-  if (ariaLabel) {
-    console.warn("The ariaLabel prop has been deprecated in the Select component and will be removed in a future release. Check the documentation for updated props.");
-  }
-
-  if (helperTextId) {
-    console.warn("The helperTextId prop has been deprecated in the Select component and will be removed in a future release. Check the documentation for updated props.");
-  }
-
-  if (isRequired === true || isRequired === false) {
-    console.warn("The isRequired prop has been deprecated in the Select component and will be removed in a future release. Check the documentation for updated props.");
-  }
-
-  if (labelId) {
-    console.warn("The labelId prop has been deprecated in the Select component and will be removed in a future release. Check the documentation for updated props.");
-  }
+var StatusBadgeTypes;
 
-  return React__default.createElement("div", {
-    className: "select"
-  }, labelText && showLabel && React__default.createElement(Label, {
-    htmlFor: id,
-    optReqFlag: showOptReqLabel && optReqFlag,
-    id: id + "-label"
-  }, labelText), React__default.createElement("select", Object.assign({
-    name: name,
-    id: id,
-    className: bem("selectfield", modifiers, blockName, [className]),
-    "aria-required": req,
-    required: req,
-    disabled: disabled,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    value: selectedOption,
-    ref: ref,
-    onBlur: onBlur,
-    onChange: onChange
-  }, attributes), React__default.Children.map(children, function (child, key) {
-    return React__default.cloneElement(child, {
-      "aria-selected": children[key] ? children[key].props.children === selectedOption : false
-    });
-  })), (helperText || errored) && React__default.createElement(HelperErrorText, {
-    isError: errored,
-    id: id + "-helperText"
-  }, footnote));
-});
-Select.displayName = "Select";
+(function (StatusBadgeTypes) {
+  StatusBadgeTypes["Low"] = "low";
+  StatusBadgeTypes["Medium"] = "medium";
+  StatusBadgeTypes["High"] = "high";
+})(StatusBadgeTypes || (StatusBadgeTypes = {}));
 
 function StatusBadge(props) {
-  var blockName = props.blockName,
+  var children = props.children,
       className = props.className,
-      level = props.level;
-  var baseClass = "status-badge";
-  var statusBadgeModifiers = ["low"];
-
-  if (!props.children) {
-    console.warn("Status Badge has no children");
-  }
+      _props$id = props.id,
+      id = _props$id === void 0 ? generateUUID() : _props$id,
+      _props$level = props.level,
+      level = _props$level === void 0 ? StatusBadgeTypes.Low : _props$level;
+  var styles = react.useStyleConfig("StatusBadge", {
+    variant: level
+  });
 
-  if (level) {
-    statusBadgeModifiers = [level];
+  if (!children) {
+    console.warn("Status Badge has no children.");
   }
 
-  return React.createElement("div", {
-    className: bem(baseClass, statusBadgeModifiers, blockName, [className])
-  }, props.children);
+  return React.createElement(react.Box, {
+    id: id,
+    className: className,
+    __css: styles
+  }, children);
 }
 
 /**
@@ -3604,7 +3916,7 @@ var onClickHash = function onClickHash(tabHash) {
  */
 
 
-var getElementsFromContentData = function getElementsFromContentData(data, useHash) {
+var getElementsFromContentData$1 = function getElementsFromContentData(data, useHash) {
   var tabs = [];
   var panels = [];
 
@@ -3699,7 +4011,7 @@ function Tabs(props) {
       useHash = _props$useHash === void 0 ? false : _props$useHash;
   var styles = react.useMultiStyleConfig("Tabs", {});
 
-  var _ref = contentData ? getElementsFromContentData(contentData, useHash) : getElementsFromChildren(children),
+  var _ref = contentData ? getElementsFromContentData$1(contentData, useHash) : getElementsFromChildren(children),
       tabs = _ref.tabs,
       panels = _ref.panels;
 
@@ -3727,20 +4039,18 @@ function Tabs(props) {
       "aria-label": "Previous"
     }, styles.buttonArrows)
   }, React.createElement(Icon, {
-    name: exports.IconNames.arrow,
-    decorative: true,
-    iconRotation: exports.IconRotationTypes.rotate90,
-    modifiers: ["small"]
+    name: exports.IconNames.Arrow,
+    iconRotation: exports.IconRotationTypes.Rotate90,
+    size: exports.IconSizes.Small
   })), React.createElement(react.TabList, null, tabs), React.createElement(Button, {
     buttonType: exports.ButtonTypes.Primary,
     attributes: _extends({
       "aria-label": "Next"
     }, styles.buttonArrows)
   }, React.createElement(Icon, {
-    name: exports.IconNames.arrow,
-    decorative: true,
-    iconRotation: exports.IconRotationTypes.rotate270,
-    modifiers: ["small"]
+    name: exports.IconNames.Arrow,
+    iconRotation: exports.IconRotationTypes.Rotate270,
+    size: exports.IconSizes.Small
   }))), React.createElement(react.TabPanels, null, panels)) : React.createElement(React.Fragment, null, React.createElement(react.Box, {
     __css: styles.tablistWrapper,
     sx: {
@@ -3751,6 +4061,208 @@ function Tabs(props) {
   }, tabs), panels));
 }
 
+(function (TextDisplaySizes) {
+  TextDisplaySizes["Default"] = "default";
+  TextDisplaySizes["Caption"] = "caption";
+  TextDisplaySizes["Tag"] = "tag";
+  TextDisplaySizes["Mini"] = "mini";
+})(exports.TextDisplaySizes || (exports.TextDisplaySizes = {}));
+
+function Text(props) {
+  var children = props.children,
+      _props$className = props.className,
+      className = _props$className === void 0 ? "" : _props$className,
+      _props$displaySize = props.displaySize,
+      displaySize = _props$displaySize === void 0 ? exports.TextDisplaySizes.Default : _props$displaySize,
+      isBold = props.isBold,
+      isItalic = props.isItalic,
+      noSpace = props.noSpace;
+  var variant = getVariant(displaySize, exports.TextDisplaySizes, exports.TextDisplaySizes.Default);
+  var styles = react.useStyleConfig("Text", {
+    variant: variant,
+    isBold: isBold,
+    isItalic: isItalic,
+    noSpace: noSpace
+  });
+
+  if (!children) {
+    console.warn("The Text component has no children and will not render correctly.");
+  }
+
+  return React.createElement(react.Text, {
+    className: className,
+    sx: styles
+  }, children);
+}
+
+/**
+ * The main top-level parent component that wraps all template-related
+ * components. For backwards compatibility, this renders a `nypl-ds` CSS class.
+ */
+
+var Template = function Template(props) {
+  var styles = react.useStyleConfig("Template", {});
+  return React.createElement(react.Box, {
+    __css: styles,
+    className: "nypl-ds"
+  }, props.children);
+};
+/**
+ * This optional component should be the first child of the `Template`
+ * component. This is rendered as an HTML `<header>` element.
+ */
+
+
+var TemplateHeader = function TemplateHeader(props) {
+  var styles = react.useStyleConfig("TemplateHeader", {});
+  return React.createElement(react.Box, {
+    as: "header",
+    __css: styles
+  }, props.children);
+};
+/**
+ * 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.
+ */
+
+
+var TemplateBreakout = function TemplateBreakout(props) {
+  var styles = react.useStyleConfig("TemplateBreakout", {});
+  return React.createElement(react.Box, {
+    __css: styles
+  }, props.children);
+};
+/**
+ * This component is most useful to render content on the page. This renders an
+ * HTML `<main>` element and takes a `sidebar` prop with optional "left" or
+ * "right" values. This will set the correct styling needed for the
+ * `TemplateContentPrimary` and `TemplateContentSidebar` components. Note that
+ * `TemplateContentPrimary` and `TemplateContentSidebar` must be ordered
+ * correctly as children elements for the appropriate styles to take effect.
+ */
+
+
+var TemplateContent = function TemplateContent(props) {
+  var _props$sidebar = props.sidebar,
+      sidebar = _props$sidebar === void 0 ? "none" : _props$sidebar,
+      children = props.children;
+  var styles = react.useStyleConfig("TemplateContent", {
+    variant: sidebar !== "none" ? "sidebar" : null
+  }); // Manually pass in the `sidebar` prop to the `TemplateContentPrimary` and
+  // `TemplateContentSidebar` components.
+
+  var newChildren = React.Children.map(children, function (child) {
+    var _child$props, _child$props2;
+
+    var newChild = child;
+
+    if (child && (child == null ? void 0 : child.type) === TemplateContentPrimary || child != null && child.props && ((_child$props = child.props) == null ? void 0 : _child$props.mdxType) === "TemplateContentPrimary" || (child == null ? void 0 : child.type) === TemplateContentSidebar || child != null && child.props && ((_child$props2 = child.props) == null ? void 0 : _child$props2.mdxType) === "TemplateContentSidebar") {
+      newChild = React.cloneElement(child, {
+        sidebar: sidebar
+      });
+    }
+
+    return newChild;
+  });
+  return React.createElement(react.Box, {
+    as: "main",
+    __css: styles
+  }, newChildren);
+};
+/**
+ * This optional component must be used inside the `TemplateContent` component.
+ * This renders content in the main width of the container and will always render
+ * above the primary component and the sidebar component (if any).
+ */
+
+
+var TemplateContentTop = function TemplateContentTop(props) {
+  var styles = react.useStyleConfig("TemplateContentTop", {});
+  return React.createElement(react.Box, {
+    __css: styles
+  }, props.children);
+};
+/**
+ * This component is used to render content in a column when there must be a
+ * sidebar component on either its left or right side. It must go inside the
+ * `TemplateContent` component. An optional `sidebar` prop value of "left" or
+ * "right" can be passed to render the correct CSS styles. If the `sidebar`
+ * prop is used in the `TemplateContent` component, there is no need to pass
+ * the `sidebar` prop to this component -- `TemplateContent` will handle it.
+ */
+
+
+var TemplateContentPrimary = function TemplateContentPrimary(props) {
+  var sidebar = props.sidebar;
+  var styles = react.useStyleConfig("TemplateContentPrimary", {
+    variant: sidebar
+  });
+  return React.createElement(react.Box, {
+    __css: styles
+  }, props.children);
+};
+/**
+ * This component is used to render content in a sidebar column. It must go
+ * inside the `TemplateContent` component and must be paired with the
+ * `TemplateContentPrimary` component. If this is a left sidebar, it needs to be
+ * rendered before the `TemplateContentPrimary` component. If this is a right
+ * sidebar, it needs to be rendered after the `TemplateContentPrimary` component.
+ * An optional `sidebar` prop value of "left" or "right" can be passed to render
+ * the correct CSS styles. If the `sidebar` prop is used in the `TemplateContent`
+ * component, there is no need to pass the `sidebar` prop to this component --
+ * `TemplateContent` will handle it.
+ */
+
+
+var TemplateContentSidebar = function TemplateContentSidebar(props) {
+  var sidebar = props.sidebar;
+  var styles = react.useStyleConfig("TemplateContentSidebar", {
+    variant: sidebar
+  });
+  return React.createElement(react.Box, {
+    __css: styles
+  }, props.children);
+};
+/**
+ * This optional component should be the last child of the `Template`
+ * component. This is rendered as an HTML `<footer>` element and spans the full
+ * width of the page.
+ */
+
+
+var TemplateFooter = function TemplateFooter(props) {
+  return React.createElement(react.Box, {
+    as: "footer"
+  }, props.children);
+};
+/**
+ * This single component can be used instead of all the individual template
+ * components. Instead of importing and rendering the needed "template"
+ * components, each section is passed as a prop to the section where it should
+ * be rendered. For example, if you want to render content in the
+ * `TemplateContentPrimary` section, then pass it as a prop to `contentPrimary`.
+ */
+
+
+var TemplateAppContainer = function TemplateAppContainer(props) {
+  var breakout = props.breakout,
+      contentPrimary = props.contentPrimary,
+      contentSidebar = props.contentSidebar,
+      contentTop = props.contentTop,
+      footer = props.footer,
+      header = props.header,
+      _props$sidebar2 = props.sidebar,
+      sidebar = _props$sidebar2 === void 0 ? "none" : _props$sidebar2;
+  var breakoutElem = breakout && React.createElement(TemplateBreakout, null, breakout);
+  var contentTopElem = contentTop && React.createElement(TemplateContentTop, null, contentTop);
+  var contentPrimaryElem = contentPrimary && React.createElement(TemplateContentPrimary, null, contentPrimary);
+  var contentSidebarElem = contentSidebar && React.createElement(TemplateContentSidebar, null, contentSidebar);
+  return React.createElement(Template, null, (header || breakoutElem) && React.createElement(TemplateHeader, null, header, breakoutElem), React.createElement(TemplateContent, {
+    sidebar: sidebar
+  }, contentTopElem, sidebar === "left" && contentSidebarElem, contentPrimaryElem, sidebar === "right" && contentSidebarElem), footer && React.createElement(TemplateFooter, null, footer));
+};
+
 (function (VideoPlayerTypes) {
   VideoPlayerTypes["Vimeo"] = "vimeo";
   VideoPlayerTypes["YouTube"] = "youtube";
@@ -3826,20 +4338,76 @@ function VideoPlayer(props) {
 }
 
 /**
- * Colors taken from "../../styles/01-colors/*.scss"
- * All UI colors can be found in Storybook:
- *   https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/style-guide-colors--colors-utility
- * All Brand colors can be found in Storybook:
- *   https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/style-guide-colors--colors-brand
- *
- * 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
+ * These rules affect all the global elements on the `body` element of the
+ * page when the `DSProvider` component is used. This means that even if the
+ * `nypl-ds` CSS class name is not used in a consuming application, these
+ * rules will still take effect.
+ */
+var global = {
+  // styles for the `body` element
+  body: {
+    bg: "ui.white",
+    color: "ui.black",
+    fontFamily: "body",
+    fontSize: 0,
+    fontWeight: "300",
+    lineHeight: "1.5"
+  },
+  // styles for the `a` element
+  a: {
+    color: "ui.link.primary"
+  },
+  svg: {
+    display: "inline"
+  }
+};
+
+/**
+ * Breakpoints from "src/styles/base/_02-breakpoints.scss"
+ * How to use Chakra responsive styles: https://chakra-ui.com/docs/features/responsive-styles
+ *
+ * Chakra Value |     DS Variable      | EM/PX value
+ * --------------------------------------------------
+ *      sm      | --breakpoint-small   | 20em/320px
+ *      md      | --breakpoint-medium  | 38em/600px
+ *      lg      | --breakpoint-large   | 60em/960px
+ *      xl      | --breakpoint-xl      | 80em/1280px
+ *     2xl      |        N/A           | 96em/1536px
+ *
+ * @Note Chakra provides a 2xl option while the DS does not. We don't
+ * recommend using this value until further notice.
+ */
+
+var breakpoints = /*#__PURE__*/themeTools.createBreakpoints({
+  sm: "20em",
+  md: "38em",
+  lg: "60em",
+  xl: "80em",
+  "2xl": "96em"
+});
+
+/**
+ * Colors taken from "../../styles/01-colors/*.scss"
+ *
+ * All UI colors can be found in Storybook:
+ *   https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/documentation-style-guide-colors--colors-utility
+ * and in Figma:
+ *   https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=14989%3A37
+ *
+ * All Brand colors can be found in Storybook:
+ *   https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/documentation-style-guide-colors--colors-brand
+ * and in Figma:
+ *   https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=15454%3A47007
+ *
+ * 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 grayLight = "#E0E0E0";
-var grayxxlight = "#FAFAFA";
+var grayLightCool = "#E0E0E0";
+var grayxxLightCool = "#FAFAFA";
+var grayMedium = "#BDBDBD";
 var brandPrimary = "#C60917";
 var brandSecondary = "#760000";
 var brandObj = {
@@ -3854,10 +4422,13 @@ var colors = {
     white: "#fff",
     /// State and link utilities
     disabled: {
-      primary: grayLight,
-      secondary: grayxxlight
+      primary: grayLightCool,
+      secondary: grayxxLightCool
+    },
+    error: {
+      primary: "#97272C",
+      secondary: "#6F0106"
     },
-    error: "#97272C",
     focus: "#4181F1",
     link: {
       primary: "#0576D3",
@@ -3880,12 +4451,12 @@ var colors = {
     gray: {
       xdark: "#424242",
       dark: "#616161",
-      medium: "#BDBDBD",
-      light: grayLight,
-      "warm-light": "#EFEDEB",
-      xlight: "#F5F5F5",
-      "warm-xlight": "#F8F8F7",
-      xxlight: grayxxlight
+      medium: grayMedium,
+      "light-cool": grayLightCool,
+      "light-warm": "#EFEDEB",
+      "x-light-cool": "#F5F5F5",
+      "x-light-warm": "#F8F8F7",
+      "xx-light-cool": grayxxLightCool
     }
   },
 
@@ -3914,6 +4485,12 @@ var colors = {
      * the exceptions of some research libraries. */
     locations: brandObj,
 
+    /** Blogs is used for the Blogs section. */
+    blogs: {
+      primary: grayLightCool,
+      secondary: grayMedium
+    },
+
     /** Research libraries with specific brand colors to adhere to. */
     "research-library": {
       lpa: "#005d53",
@@ -4016,26 +4593,8 @@ var colors = {
   }
 };
 
-/**
- * These rules affect all the global elements on the `body` element of the
- * page when the `DSProvider` component is used. This means that even if the
- * `nypl-ds` CSS class name is not used in a consuming application, these
- * rules will still take effect.
- */
-var global = {
-  // styles for the `body` element
-  body: {
-    bg: "ui.white",
-    color: "ui.black",
-    fontFamily: "body"
-  },
-  // styles for the `a` element
-  a: {
-    color: "ui.link.primary"
-  },
-  svg: {
-    display: "inline"
-  }
+var shadows = {
+  outline: "none"
 };
 
 var typography = {
@@ -4064,31 +4623,133 @@ var typography = {
   }
 };
 
-/**
- * Breakpoints from "src/styles/base/_02-breakpoints.scss"
- * How to use Chakra responsive styles: https://chakra-ui.com/docs/features/responsive-styles
- *
- * Chakra Value |     DS Variable      | EM/PX value
- * --------------------------------------------------
- *      sm      | --breakpoint-small   | 20em/320px
- *      md      | --breakpoint-medium  | 38em/600px
- *      lg      | --breakpoint-large   | 60em/960px
- *      xl      | --breakpoint-xl      | 80em/1280px
- *     2xl      |        N/A           | 96em/1536px
- *
- * @Note Chakra provides a 2xl option while the DS does not. We don't
- * recommend using this value until further notice.
- */
+var containerStyles = {
+  borderLeftWidth: "1px",
+  borderRightWidth: "1px",
+  borderColor: "ui.gray.medium",
+  width: "100%"
+};
+var buttonStyles = {
+  border: "none",
+  fontWeight: 500,
+  _hover: {
+    bg: "ui.gray.light-cool"
+  }
+};
+var panelStyles = {
+  paddingTop: "xs",
+  paddingRight: "xxxl",
+  paddingLeft: "s",
+  paddingBottom: "xs"
+};
+var Accordion$1 = {
+  parts: ["container", "button", "panel"],
+  baseStyle: {
+    container: containerStyles,
+    button: buttonStyles,
+    panel: panelStyles
+  }
+};
 
-var breakpoints = /*#__PURE__*/themeTools.createBreakpoints({
-  sm: "20em",
-  md: "38em",
-  lg: "60em",
-  xl: "80em",
-  "2xl": "96em"
-});
+// Variant styling
+var booksAndMore = {
+  bg: "section.books-and-more.secondary"
+};
+var locations = {
+  bg: "section.locations.secondary"
+};
+var research = {
+  bg: "section.research.secondary"
+};
+var whatsOn = {
+  bg: "section.whats-on.secondary"
+};
+var Breadcrumb = {
+  baseStyle: {
+    bg: "ui.black",
+    color: "ui.white",
+    fontSize: "-1",
+    fontWeight: "regular",
+    paddingBottom: "xs",
+    paddingTop: "xs",
+    ol: {
+      alignItems: {
+        base: "center",
+        md: "unset"
+      },
+      display: {
+        base: "flex",
+        md: "block"
+      },
+      margin: "auto",
+      maxWidth: "1280px",
+      paddingLeft: "s",
+      paddingRight: "s"
+    },
+    a: {
+      _hover: {
+        color: "ui.gray.light-cool"
+      }
+    },
+    "li:last-child": {
+      fontWeight: {
+        base: "regular",
+        md: "bold"
+      },
+      ".chakra-breadcrumb__link": {
+        _hover: {
+          cursor: "default",
+          textDecoration: "none"
+        }
+      },
+      ".icon": {
+        display: "none"
+      }
+    },
+    "li:not(:last-child)": {
+      display: {
+        base: "none",
+        md: "inline-block"
+      },
+      a: {
+        marginRight: {
+          base: "xs",
+          md: "0"
+        }
+      },
+      ".icon": {
+        display: {
+          base: "inline",
+          md: "none"
+        }
+      },
+      "span:not(.breadcrumb-label)": {
+        marginInlineEnd: "xxs",
+        marginInlineStart: "xxs"
+      }
+    },
+    "li:nth-last-child(2)": {
+      display: "inline-block",
+      span: {
+        display: {
+          base: "none",
+          md: "inline"
+        }
+      }
+    }
+  },
+  // Available variants:
+  variants: {
+    booksAndMore: booksAndMore,
+    locations: locations,
+    research: research,
+    whatsOn: whatsOn
+  }
+};
+
+var _variants;
 
-// style object for base or default style
+// Style object for base or default style
 var baseStyle = {
   borderRadius: "2px",
   lineHeight: "1.5",
@@ -4096,10 +4757,14 @@ var baseStyle = {
   cursor: "pointer",
   color: "ui.white",
   justifyContent: "center",
-  py: 2,
-  px: 4,
+  py: "xs",
+  px: "s",
   textDecoration: "none",
   wordWrap: "normal",
+  svg: {
+    fill: "currentColor",
+    marginTop: "xxs"
+  },
   _hover: {
     bg: "ui.link.secondary"
   },
@@ -4107,88 +4772,96 @@ var baseStyle = {
     color: "ui.white"
   },
   _disabled: {
-    bg: "ui.gray.light",
+    bg: "ui.gray.light-cool",
     color: "ui.gray.dark",
     pointerEvents: "none",
     opacity: "1"
   }
-}; // styles for different sizes ("sm", "md", "lg")
+}; // Styles for different "lg" size
 
 var sizes = {
   lg: {
     width: "150px"
   }
-}; // styles for different visual variants:
-// primary, secondary, link, pill, icon-only
+}; // Styles for different visual variants:
+// primary, secondary, link, pill, icon-only, callout
 
-var variants = {
-  primary: {
-    bg: "ui.link.primary",
-    minWidth: "none",
-    height: "none"
-  },
-  secondary: {
-    bg: "ui.white",
-    border: "1px solid",
-    borderColor: "ui.gray.light",
-    color: "inherit",
-    _hover: {
-      bg: "ui.gray.xxlight"
-    }
+var primary = {
+  bg: "ui.link.primary",
+  minWidth: "none",
+  height: "none"
+};
+var secondary = {
+  bg: "ui.white",
+  border: "1px solid",
+  borderColor: "ui.gray.light-cool",
+  color: "inherit",
+  _hover: {
+    bg: "ui.gray.xx-light-cool"
+  }
+};
+var link = {
+  bg: "transparent",
+  lineHeight: "2.5",
+  color: "ui.link.primary",
+  textDecoration: "underline",
+  _disabled: {
+    bg: "transparent"
   },
-  link: {
+  _hover: {
     bg: "transparent",
-    lineHeight: "2.5",
-    color: "ui.link.primary",
-    textDecoration: "underline",
-    _disabled: {
-      bg: "transparent"
-    },
-    _hover: {
-      bg: "transparent",
-      color: "ui.link.secondary"
-    }
-  },
-  pill: {
-    bg: "ui.white",
-    border: "1px solid",
-    borderColor: "ui.gray.light",
-    color: "inherit",
-    borderRadius: "20px",
-    py: 2,
-    paddingInlineStart: 6,
-    paddingInlineEnd: 6,
-    _hover: {
-      bg: "ui.gray.xxlight"
-    }
+    color: "ui.link.secondary"
+  }
+};
+var pill = {
+  bg: "ui.white",
+  border: "1px solid",
+  borderColor: "ui.gray.light-cool",
+  color: "inherit",
+  borderRadius: "20px",
+  py: "xs",
+  paddingInlineStart: "m",
+  paddingInlineEnd: "m",
+  _hover: {
+    bg: "ui.gray.xx-light-cool"
+  }
+};
+var iconOnly = {
+  bg: "ui.white",
+  border: "1px solid",
+  borderColor: "ui.gray.light-cool",
+  color: "inherit",
+  _hover: {
+    bg: "ui.gray.xx-light-cool"
   },
-  "icon-only": {
-    bg: "ui.white",
-    border: "1px solid",
-    borderColor: "ui.gray.light",
-    color: "inherit",
-    _hover: {
-      bg: "ui.gray.xxlight"
-    },
-    paddingInlineStart: 1,
-    paddingInlineEnd: 1
+  paddingInlineStart: "xs",
+  paddingInlineEnd: "xs"
+};
+var callout = {
+  bg: "brand.primary",
+  _hover: {
+    bg: "brand.secondary"
   },
-  callout: {
-    bg: "brand.primary",
-    _hover: {
-      bg: "brand.secondary"
-    },
-    _active: {
-      bg: "brand.secondary"
-    }
+  _active: {
+    bg: "brand.secondary"
   }
 };
+
+var searchBar = /*#__PURE__*/_extends({}, primary, {
+  borderLeftRadius: "0"
+});
+
 var Button$1 = {
   baseStyle: baseStyle,
   sizes: sizes,
   // Available variants:
-  //   primary, secondary, link, pill, icon-only
-  variants: variants,
+  // primary, secondary, link, pill, icon-only, searchBar
+  variants: (_variants = {
+    primary: primary,
+    secondary: secondary,
+    link: link,
+    pill: pill
+  }, _variants["icon-only"] = iconOnly, _variants.callout = callout, _variants.searchBar = searchBar, _variants),
   // Default values
   defaultProps: {
     size: "md",
@@ -4197,9 +4870,80 @@ var Button$1 = {
   }
 };
 
-// @see https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/components/checkbox.ts
-// For avail theme override options.
-// Style object for the Checkbox's visual icon.
+/**
+ * These objects are also SCSS mixins but are now JS objects in the
+ * context of css-in-js and the custom NYPL-theme.
+ */
+var wrapperStyles = {
+  marginY: "0",
+  marginX: "auto",
+  maxWidth: "1280px",
+  paddingTop: "0",
+  paddingBottom: "0",
+  paddingRight: "0",
+  paddingLeft: "0",
+  width: "100%"
+};
+
+/** Reusable component styles. */
+// Used in `Select` and `TextInput`.
+
+var activeFocus = {
+  border: "1px solid",
+  borderColor: "ui.focus",
+  zIndex: "9999",
+  outline: "1px solid",
+  outlineColor: "ui.focus"
+}; // Used in `Select` and `TextInput`.
+
+var helperTextMargin = {
+  marginTop: "xs",
+  marginBottom: "0"
+}; // Used in `Checkbox` and `Radio`.
+
+var checkboxRadioLabelStyles = {
+  userSelect: "none",
+  fontSize: "0",
+  fontWeight: "light",
+  marginBottom: "0",
+  marginLeft: "xs",
+  verticalAlign: "middle",
+  _disabled: {
+    color: "ui.gray.dark",
+    opacity: 1,
+    fontStyle: "italic"
+  },
+  _invalid: {
+    color: "ui.error.primary"
+  }
+}; // Custom values not in the spacing theme.
+// Used in `Checkbox` and `Radio`.
+
+var checkboxRadioControlSize = {
+  h: "1.375rem",
+  w: "1.375rem"
+}; // Used in `CheckboxGroup` and `RadioGroup`.
+
+var checkboxRadioGroupLayout = {
+  legend: {
+    fontSize: "14px",
+    marginBottom: "s"
+  },
+  required: {
+    marginLeft: "m"
+  },
+  helper: {
+    marginTop: "s"
+  }
+}; // Used in `Checkbox` and `Radio`.
+
+var checkboxRadioHelperStyle = /*#__PURE__*/_extends({}, helperTextMargin, {
+  marginLeft: "30px",
+  _disabled: {
+    fontStyle: "italic"
+  }
+});
+
 var baseStyleIcon = {
   transitionProperty: "transform",
   transitionDuration: "normal",
@@ -4228,83 +4972,577 @@ var baseStyleControl = {
       color: "ui.gray.medium"
     }
   },
-  _indeterminate: {
-    bg: "ui.white",
-    borderColor: "ui.gray.medium"
+  _indeterminate: {
+    bg: "ui.white",
+    borderColor: "ui.gray.medium"
+  },
+  _disabled: {
+    bg: "ui.white",
+    borderColor: "ui.gray.medium"
+  },
+  _focus: {
+    borderColor: "ui.focus",
+    boxShadow: "none",
+    outlineColor: "ui.focus"
+  },
+  _invalid: {
+    borderColor: "ui.error.primary",
+    color: "ui.error.primary"
+  }
+}; // Style object for the Checkbox's label
+
+var baseStyleLabel = /*#__PURE__*/_extends({}, checkboxRadioLabelStyles); // Style object for the Checkbox's helper text
+
+
+var baseStyleHelper = /*#__PURE__*/_extends({}, checkboxRadioHelperStyle);
+
+var baseStyle$1 = {
+  icon: baseStyleIcon,
+  control: baseStyleControl,
+  label: baseStyleLabel,
+  helper: baseStyleHelper
+}; // Sticking to "lg" for the default size.
+
+var sizes$1 = {
+  lg: {
+    // Controls the width/height of the checkbox itself.
+    control: /*#__PURE__*/_extends({}, checkboxRadioControlSize, {
+      borderRadius: "3px"
+    }),
+    // Controls the font-size of the label only.
+    label: {
+      fontSize: "md"
+    }
+  }
+};
+var Checkbox$1 = {
+  parts: ["icon", "control", "label", "helper"],
+  baseStyle: baseStyle$1,
+  sizes: sizes$1,
+  // Default values
+  defaultProps: {
+    size: "lg",
+    colorScheme: "white"
+  }
+};
+
+var CustomCheckboxGroup = {
+  parts: ["legend", "required", "helper"],
+  baseStyle: /*#__PURE__*/_extends({}, checkboxRadioGroupLayout),
+  sizes: {},
+  defaultProps: {}
+};
+
+var CustomRadioGroup = {
+  parts: ["legend", "required", "helper"],
+  baseStyle: /*#__PURE__*/_extends({}, checkboxRadioGroupLayout),
+  sizes: {},
+  defaultProps: {}
+};
+
+var select = {
+  borderRadius: "2px",
+  borderColor: "ui.gray.medium",
+  paddingTop: "xs",
+  paddingRight: "xl",
+  paddingBottom: "xs",
+  paddingLeft: "s",
+  _hover: {
+    borderColor: "ui.gray.medium"
+  },
+  _active: activeFocus,
+  _focus: activeFocus,
+  _disabled: {
+    color: "ui.gray.xdark",
+    bg: "ui.gray.xx-light-cool",
+    opacity: "1"
+  },
+  _invalid: {
+    border: "1px solid",
+    borderColor: "ui.error.primary",
+    boxShadow: "none"
+  }
+};
+var Select$1 = {
+  parts: ["select", "helper"],
+  baseStyle: {
+    marginBottom: "xs",
+    helper: /*#__PURE__*/_extends({}, helperTextMargin),
+    select: select
+  },
+  variants: {
+    searchbar: {
+      select: {
+        flex: "1 1 20%",
+        borderRight: "none",
+        borderRightRadius: "0"
+      }
+    }
+  },
+  defaultProps: {
+    size: "md"
+  }
+};
+
+var margins = {
+  marginTop: "0",
+  marginLeft: "0",
+  marginRight: "0",
+  marginBottom: "s"
+}; // Heading Styles
+
+var headings = {
+  h1: /*#__PURE__*/_extends({
+    fontSize: "4",
+    fontWeight: "light",
+    letterSpacing: "0",
+    lineHeight: "1.1"
+  }, margins, {
+    width: "auto"
+  }),
+  h2: /*#__PURE__*/_extends({
+    fontSize: "3",
+    fontWeight: "medium",
+    lineHeight: "1.25"
+  }, margins, {
+    width: "auto"
+  }),
+  h3: /*#__PURE__*/_extends({
+    fontSize: "2",
+    fontWeight: "medium",
+    lineHeight: "1.25"
+  }, margins, {
+    width: "auto"
+  }),
+  h4: /*#__PURE__*/_extends({
+    fontSize: "1",
+    fontWeight: "medium",
+    lineHeight: "1.15"
+  }, margins, {
+    width: "auto"
+  }),
+  fallback: /*#__PURE__*/_extends({
+    fontSize: "1",
+    fontWeight: "regular",
+    lineHeight: "1.15"
+  }, margins, {
+    width: "auto"
+  })
+}; // Styles for different visual variants
+
+var variants = {
+  h1: headings.h1,
+  h2: headings.h2,
+  h3: headings.h3,
+  h4: headings.h4,
+  h5: headings.fallback,
+  h6: headings.fallback,
+  primary: headings.h1,
+  secondary: headings.h2,
+  tertiary: headings.h3,
+  callout: headings.h4
+};
+var Heading$1 = {
+  // Available variants:
+  // h1, h2, h3, h4, h5, h6,
+  // primary, secondary, tertiary, callout
+  variants: variants,
+  defaultProps: {
+    variant: "secondary"
+  }
+};
+
+var secondaryBase = {
+  overflowX: "hidden",
+  content: /*#__PURE__*/_extends({}, wrapperStyles, {
+    paddingRight: "s",
+    paddingLeft: "s",
+    display: "flex",
+    flexFlow: {
+      base: "column nowrap",
+      md: "row wrap"
+    },
+    img: {
+      flex: {
+        base: "1 1 100%",
+        md: "0 0 250px"
+      },
+      order: {
+        md: "3"
+      },
+      height: "150px",
+      minWidth: "0",
+      objectFit: "cover",
+      width: "100%"
+    }
+  }),
+  bodyText: {
+    marginTop: "xs",
+    marginRight: {
+      md: "xs"
+    },
+    flex: {
+      md: "1 1 50%"
+    },
+    order: {
+      md: "2"
+    }
+  }
+}; // Used for all "secondary" variants' heading component.
+
+var secondaryHeadingBase = {
+  marginBottom: "0",
+  bg: "ui.black",
+  color: "ui.white",
+  flex: "1 1 100%",
+  marginTop: "0",
+  paddingBottom: "xxs",
+  position: "relative",
+  zIndex: "0",
+  order: {
+    md: "1"
+  },
+  _before: {
+    bg: "ui.black",
+    content: "\"\"",
+    height: "100%",
+    left: "-2000px",
+    position: "absolute",
+    width: "4000px",
+    zIndex: "-1"
+  }
+}; // Get all the styles for the specific Secondary variant but
+// update the background color.
+
+var getSecondaryVariantStyles = function getSecondaryVariantStyles(bgColor) {
+  return _extends({}, secondaryBase, {
+    heading: _extends({}, secondaryHeadingBase, {
+      bg: bgColor,
+      _before: _extends({}, secondaryHeadingBase["_before"], {
+        bg: bgColor
+      })
+    })
+  });
+}; // Variant styling
+
+
+var primary$1 = {
+  alignItems: "center",
+  display: "flex",
+  flexFlow: {
+    base: "column nowrap",
+    md: "row nowrap"
+  },
+  justifyContent: "center",
+  minHeight: "350px",
+  content: {
+    bg: "ui.black",
+    color: "ui.white",
+    flex: {
+      base: "0 0 100%",
+      md: "0 0 60%"
+    },
+    maxWidth: {
+      md: "960px"
+    },
+    paddingTop: "xxl",
+    paddingBottom: "xxl",
+    paddingRight: "l",
+    paddingLeft: "l",
+    a: {
+      color: "inherit",
+      display: "inline-block"
+    },
+    heading: {
+      marginBottom: "0"
+    },
+    bodyText: {
+      marginBottom: "0"
+    }
+  }
+};
+
+var secondary$1 = /*#__PURE__*/_extends({}, secondaryBase, {
+  heading: /*#__PURE__*/_extends({}, secondaryHeadingBase)
+});
+
+var secondaryBooksAndMore = /*#__PURE__*/getSecondaryVariantStyles("section.books-and-more.primary");
+var secondaryLocations = /*#__PURE__*/getSecondaryVariantStyles("section.locations.primary");
+var secondaryResearch = /*#__PURE__*/getSecondaryVariantStyles("section.research.primary");
+var secondaryWhatsOn = /*#__PURE__*/getSecondaryVariantStyles("section.whats-on.primary");
+var tertiary = {
+  bg: "ui.gray.xdark",
+  content: /*#__PURE__*/_extends({}, wrapperStyles, {
+    color: "ui.white",
+    display: "flex",
+    flexFlow: "column nowrap",
+    paddingTop: "l",
+    paddingBottom: "l",
+    paddingRight: "s",
+    paddingLeft: "s",
+    p: {
+      marginBottom: "0"
+    }
+  }),
+  heading: {
+    marginBottom: "s",
+    _lastChild: {
+      marginBottom: "0"
+    }
+  },
+  p: {
+    marginBottom: "0"
+  }
+};
+var campaign = {
+  alignItems: "center",
+  display: "flex",
+  justifyContent: "center",
+  marginBottom: "xxl",
+  minHeight: "300px",
+  overflow: "visible",
+  padding: {
+    base: "l",
+    md: "0"
+  },
+  position: "relative",
+  content: {
+    alignItems: "center",
+    bg: "ui.black",
+    color: "ui.white",
+    display: "flex",
+    flexFlow: {
+      base: "column nowrap",
+      md: "row nowrap"
+    },
+    minHeight: "320px",
+    flex: {
+      md: "0 0 90%"
+    },
+    maxWidth: {
+      md: "1280px"
+    },
+    position: {
+      md: "relative"
+    },
+    top: {
+      md: "xxl"
+    }
+  },
+  a: {
+    color: "inherit",
+    display: "inline-block"
+  },
+  img: {
+    flex: {
+      base: "1 1 100%",
+      md: "0 0 50%"
+    },
+    minWidth: "0",
+    objectFit: "cover",
+    width: "100%",
+    height: {
+      md: "320px"
+    }
+  },
+  interior: {
+    flex: {
+      base: "0 0 100%",
+      md: "0 0 50%"
+    },
+    padding: "l",
+    maxWidth: {
+      md: "960px"
+    }
+  }
+};
+var fiftyfifty = {
+  content: /*#__PURE__*/_extends({}, wrapperStyles, {
+    alignItems: "center",
+    display: "flex",
+    flexFlow: {
+      base: "column nowrap",
+      lg: "row nowrap"
+    },
+    paddingBottom: "s",
+    paddingRight: "s",
+    paddingLeft: "s",
+    padding: {
+      lg: "unset"
+    }
+  }),
+  img: {
+    marginBottom: {
+      base: "s",
+      lg: "unset"
+    },
+    marginRight: {
+      lg: "s"
+    },
+    maxWidth: {
+      base: "fit-content",
+      lg: "50%"
+    }
+  }
+};
+var Hero$1 = {
+  baseStyle: {
+    bg: "ui.gray.x-light-warm"
+  },
+  // Available variants:
+  variants: {
+    primary: primary$1,
+    secondary: secondary$1,
+    secondaryBooksAndMore: secondaryBooksAndMore,
+    secondaryLocations: secondaryLocations,
+    secondaryResearch: secondaryResearch,
+    secondaryWhatsOn: secondaryWhatsOn,
+    tertiary: tertiary,
+    campaign: campaign,
+    fiftyfifty: fiftyfifty
+  }
+};
+
+var svgBase = {
+  display: "inline-block",
+  fill: "currentColor",
+  width: "24px",
+  height: "24px"
+};
+var align = {
+  none: {},
+  left: {
+    marginRight: "xs"
+  },
+  right: {
+    marginLeft: "xs"
+  }
+};
+var iconRotation = {
+  rotate180: {
+    transform: "rotate(180deg)"
   },
-  _disabled: {
-    bg: "ui.white",
-    borderColor: "ui.gray.medium"
+  rotate270: {
+    transform: "rotate(270deg)"
   },
-  _focus: {
-    borderColor: "ui.focus",
-    boxShadow: "none",
-    outlineColor: "ui.focus"
+  rotate0: {
+    transform: "rotate(0deg)"
   },
-  _invalid: {
-    borderColor: "ui.error",
-    color: "ui.error"
+  rotate90: {
+    transform: "rotate(90deg)"
   }
-}; // Style object for the Checkbox's label
-
-var baseStyleLabel = {
-  userSelect: "none",
-  fontSize: 0,
-  fontWeight: "light",
-  marginBottom: 0,
-  marginLeft: 2,
-  verticalAlign: "middle",
-  _disabled: {
-    color: "ui.gray.dark",
-    opacity: 1,
-    fontStyle: "italic"
+};
+var size = {
+  xxxlarge: {
+    height: "var(--space-xxl)",
+    width: "var(--space-xxl)"
   },
-  _invalid: {
-    color: "ui.error"
+  xxlarge: {
+    height: "var(--space-xl)",
+    width: "var(--space-xl)"
+  },
+  xlarge: {
+    height: "var(--space-l)",
+    width: "var(--space-l)"
+  },
+  large: {
+    height: "var(--space-m)",
+    width: "var(--space-m)"
+  },
+  medium: {
+    height: "1.125rem",
+    width: "1.125rem"
+  },
+  small: {
+    height: "0.875rem",
+    width: "0.875rem"
   }
-}; // Style object for the Checkbox's helper text
+};
+var Icon$1 = {
+  baseStyle: function baseStyle(props) {
+    var allStyles = _extends({}, svgBase, align[props.align], {
+      fill: props.color
+    }, iconRotation[props.iconRotation], size[props.size]);
+
+    return _extends({}, allStyles, {
+      // We still want to style any custom SVG element that was
+      // passed to the `Icon` component.
+      svg: _extends({}, allStyles)
+    });
+  },
+  variants: {
+    "default": {},
+    breadcrumbs: {
+      fill: "var(--ui-white)",
+      display: {
+        md: "none"
+      }
+    }
+  }
+};
 
-var baseStyleHelper = {
-  marginTop: 2,
-  marginBottom: 0,
-  marginLeft: "30px",
-  _disabled: {
-    fontStyle: "italic"
+var Label$1 = {
+  parts: ["helper"],
+  baseStyle: {
+    marginBottom: "xs",
+    alignItems: "baseline",
+    display: "flex",
+    fontWeight: "500",
+    justifyContent: "space-between",
+    fontSize: "14px",
+    helper: {
+      fontWeight: "300",
+      fontSize: "-1"
+    }
   }
 };
-var baseStyle$1 = {
-  icon: baseStyleIcon,
-  control: baseStyleControl,
-  label: baseStyleLabel,
-  helper: baseStyleHelper
-}; // Sticking to "lg" for the default size.
 
-var sizes$1 = {
-  lg: {
-    // Controls the width/height of the checkbox itself.
-    control: {
-      w: "1.375rem",
-      h: "1.375rem",
-      borderRadius: "3px"
+var variants$1 = {
+  link: {},
+  moreLink: {
+    alignItems: "center",
+    display: "inline-flex",
+    svg: {
+      height: "s",
+      width: "s",
+      textDecoration: "none",
+      fill: "currentColor"
     },
-    // Controls the font-size of the label only.
-    label: {
-      fontSize: "md"
+    _hover: {
+      textDecoration: "underline"
+    }
+  },
+  button: {
+    width: "100px",
+    borderRadius: "2px",
+    lineHeight: "1.5",
+    display: "flex",
+    cursor: "pointer",
+    color: "ui.white",
+    justifyContent: "center",
+    py: "xs",
+    px: "xs",
+    textDecoration: "none",
+    fontWeight: 500,
+    bg: "ui.link.primary",
+    _hover: {
+      color: "ui.white",
+      bg: "ui.link.secondary",
+      textDecoration: "none"
     }
   }
 };
-var Checkbox$1 = {
-  parts: ["icon", "control", "label", "helper"],
-  baseStyle: baseStyle$1,
-  sizes: sizes$1,
-  // Default values
-  defaultProps: {
-    size: "lg",
-    colorScheme: "white"
-  }
+var Link$1 = {
+  baseStyle: {
+    color: "ui.link.primary",
+    textDecoration: "underline",
+    _hover: {
+      color: "ui.link.secondary"
+    }
+  },
+  variants: variants$1
 };
 
-// Style object for the Radio's "control" or visual icon.
 var baseStyleControl$1 = {
   verticalAlign: "middle",
   transitionProperty: "box-shadow",
@@ -4328,11 +5566,11 @@ var baseStyleControl$1 = {
     },
     _invalid: {
       _hover: {
-        borderColor: "ui.error"
+        borderColor: "ui.error.primary"
       },
       _before: {
-        borderColor: "ui.error",
-        bg: "ui.error"
+        borderColor: "ui.error.primary",
+        bg: "ui.error.primary"
       }
     },
     _hover: {
@@ -4341,8 +5579,8 @@ var baseStyleControl$1 = {
     _before: {
       content: "\"\"",
       display: "block",
-      w: 3,
-      h: 3,
+      w: "3",
+      h: "3",
       borderRadius: "100%",
       bg: "ui.focus"
     }
@@ -4356,51 +5594,30 @@ var baseStyleControl$1 = {
     borderColor: "ui.focus"
   },
   _invalid: {
-    borderColor: "ui.error"
+    borderColor: "ui.error.primary"
   }
 }; // Style object for the Radio's label
 
-var baseStyleLabel$1 = {
-  userSelect: "none",
-  fontSize: 0,
-  fontWeight: "light",
-  marginBottom: 0,
-  marginLeft: 2,
-  verticalAlign: "middle",
-  _disabled: {
-    color: "ui.gray.dark",
-    opacity: 1,
-    fontStyle: "italic"
-  },
-  _invalid: {
-    color: "ui.error"
-  }
-};
+var baseStyleLabel$1 = /*#__PURE__*/_extends({}, checkboxRadioLabelStyles); // Style object for the Radio's helper text
+
+
+var baseStyleHelper$1 = /*#__PURE__*/_extends({}, checkboxRadioHelperStyle);
+
 var baseStyle$2 = {
   // Chakra-inserted elements in the Chakra Radio component
   control: baseStyleControl$1,
   label: baseStyleLabel$1,
   // Custom element in the DS Radio component.
-  helper: {
-    marginTop: 2,
-    marginBottom: 0,
-    marginLeft: "30px",
-    _disabled: {
-      fontStyle: "italic"
-    }
-  }
+  helper: baseStyleHelper$1
 }; // Sticking to "md" for the default size.
 
 var sizes$2 = {
   md: {
-    control: {
-      // Custom values not in the spacing theme.
-      h: "1.375rem",
-      w: "1.375rem"
-    }
+    control: /*#__PURE__*/_extends({}, checkboxRadioControlSize)
   }
 };
 var Radio$1 = {
+  parts: ["control", "label", "helper"],
   baseStyle: baseStyle$2,
   sizes: sizes$2,
   // Default values
@@ -4409,171 +5626,343 @@ var Radio$1 = {
   }
 };
 
-var CustomRadioGroup = {
-  parts: ["required", "helper"],
+var SearchBar$1 = {
+  parts: ["topRow"],
+  baseStyle: {
+    topRow: {
+      display: "flex",
+      marginBottom: {
+        base: "xs",
+        md: "auto"
+      },
+      flexFlow: {
+        base: "column nowrap",
+        md: "row nowrap"
+      }
+    },
+    button: {
+      marginBottom: "auto"
+    }
+  }
+};
+
+var StatusBadge$1 = {
   baseStyle: {
-    legend: {
-      marginBottom: 4
+    // Temporary until NYPL-theme radius values are configured.
+    borderRadius: "4px",
+    color: "ui.black",
+    display: "block",
+    fontSize: "-1",
+    fontStyle: "italic",
+    py: "xxs",
+    px: "xs",
+    textAlign: "center",
+    width: "fit-content"
+  },
+  variants: {
+    low: {
+      bg: "ui.gray.light-cool"
     },
-    required: {
-      marginLeft: 6
+    medium: {
+      bg: "ui.status.primary"
     },
-    helper: {
-      marginTop: 4
+    high: {
+      bg: "ui.status.secondary"
     }
+  }
+};
+
+var tab = {
+  color: "black !important",
+  paddingInlineStart: "4",
+  paddingLeft: "4",
+  background: "transparent",
+  border: "0",
+  borderBottom: "1px solid",
+  borderColor: "red",
+  marginRight: {
+    base: "0",
+    md: "1px"
+  },
+  paddingRight: {
+    base: "4",
+    md: "8",
+    lg: "12"
+  },
+  whiteSpace: "nowrap",
+  _hover: {
+    bg: "ui.gray.x-light-warm",
+    borderTopRadius: "2",
+    borderBottom: "1px solid",
+    borderBottomColor: "ui.black"
+  },
+  _selected: {
+    fontWeight: "bold",
+    bg: "ui.gray.light-warm",
+    border: "0",
+    borderTopRadius: "2",
+    borderBottom: "3px solid",
+    borderBottomColor: "ui.black",
+    paddingBottom: "5px"
+  },
+  _focus: {
+    boxShadow: "0"
+  }
+}; // Only display the previous/next arrow buttons on mobile.
+
+var buttonArrows = {
+  border: "0",
+  display: {
+    // "inline-block" - hiding until the full "arrow" functionality is built out
+    base: "none",
+    // After 38em/600px, don't display the arrow button anymore.
+    md: "none"
+  },
+  height: "44px",
+  width: "44px !important"
+}; // Styles to better align the mobile arrow buttons with the tablist.
+
+var tablistWrapper = {
+  display: "flex",
+  alignItems: "center",
+  borderBottom: {
+    base: "0",
+    md: "1px solid black"
+  },
+  margin: {
+    base: "-4px",
+    md: "0"
+  },
+  overflowX: {
+    base: "auto",
+    md: "visible"
+  },
+  paddingBottom: {
+    base: "5px",
+    md: "0"
+  },
+  paddingLeft: {
+    base: "xxs",
+    md: "0"
+  },
+  paddingRight: {
+    base: "xxs",
+    md: "0"
+  },
+  paddingTop: {
+    base: "xxs",
+    md: "0"
+  }
+};
+var CustomTabs = {
+  parts: ["tab", "buttonArrows", "tablistWrapper"],
+  baseStyle: {
+    tab: tab,
+    buttonArrows: buttonArrows,
+    tablistWrapper: tablistWrapper
   },
-  sizes: {},
   defaultProps: {}
 };
 
-var CustomTabs = {
+// From @mixin breakout:
+// Used for elements that should be edge-to-edge.
+var breakout = {
+  marginLeft: "calc(-50vw + 50%)",
+  marginRight: "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,
+  paddingRight: 0,
+  paddingLeft: 0,
+  width: "100%"
+};
+var Template$1 = {
   baseStyle: {
-    tablist: {// no custom styles
+    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"
     },
-    tab: {
-      color: "black !important",
-      paddingInlineStart: 4,
-      paddingLeft: 4,
-      background: "transparent",
-      border: "0",
-      borderBottom: "1px solid",
-      borderColor: "red",
+    "*::after": {
+      boxSizing: "inherit"
+    },
+    "*::before": {
+      boxSizing: "inherit"
+    }
+  },
+  sizes: {},
+  defaultProps: {}
+};
+var TemplateHeader$1 = {
+  baseStyle: {
+    marginBottom: 8
+  }
+};
+var TemplateBreakout$1 = {
+  baseStyle: /*#__PURE__*/_extends({}, breakout, {
+    width: "100vw",
+    marginBottom: 8
+  })
+};
+var TemplateContent$1 = {
+  baseStyle: /*#__PURE__*/_extends({}, wrapperStyles$1, {
+    display: "block",
+    marginBottom: 8
+  }),
+  variants: {
+    sidebar: {
+      display: "flex",
+      flexFlow: {
+        base: "column nowrap",
+        md: "row wrap"
+      }
+    }
+  }
+};
+var TemplateContentTop$1 = {
+  baseStyle: {
+    flex: "1 0 100%",
+    marginBottom: 8
+  }
+};
+var TemplateContentPrimary$1 = {
+  baseStyle: {
+    flex: "1 1",
+    marginBottom: 8
+  },
+  variants: {
+    left: {
+      display: "flex",
+      flexFlow: "column nowrap",
+      order: "1",
       marginRight: {
-        base: "0",
-        md: "1px"
-      },
-      paddingRight: {
-        base: 4,
-        md: 8,
-        lg: 12
-      },
-      whiteSpace: "nowrap",
-      _hover: {
-        bg: "ui.gray.warm-xlight",
-        borderTopRadius: 2,
-        borderBottom: "1px solid",
-        borderBottomColor: "ui.black"
-      },
-      _selected: {
-        fontWeight: "bold",
-        bg: "ui.gray.warm-light",
-        border: "0",
-        borderTopRadius: 2,
-        borderBottom: "3px solid",
-        borderBottomColor: "ui.black",
-        paddingBottom: "5px"
+        md: 0
       },
-      _focus: {
-        boxShadow: 0
+      minWidth: {
+        md: 0
       }
+    }
+  }
+};
+var TemplateContentSidebar$1 = {
+  baseStyle: {
+    flex: "0 0 255px",
+    order: {
+      md: "1"
     },
-    // Only display the previous/next arrow buttons on mobile.
-    buttonArrows: {
-      border: "0",
-      display: {
-        base: "none",
-        // After 38em/600px, don't display the arrow button anymore.
-        md: "none"
-      },
-      height: "44px",
-      width: "44px !important"
+    marginBottom: 8
+  },
+  variants: {
+    left: {
+      marginRight: {
+        base: 0,
+        md: 12
+      }
     },
-    // Just to better align the mobile arrow buttons with the tablist.
-    tablistWrapper: {
-      display: "flex",
-      alignItems: "center",
-      borderBottom: {
-        base: "0",
-        md: "1px solid black"
-      },
-      margin: {
-        base: "-4px",
-        md: "0"
-      },
-      overflowX: {
-        base: "auto",
-        md: "visible"
-      },
-      paddingBottom: {
-        base: "5px",
-        md: "0"
-      },
-      paddingLeft: {
-        base: "4px",
-        md: "0"
-      },
-      paddingRight: {
-        base: "4px",
-        md: "0"
-      },
-      paddingTop: {
-        base: "4px",
-        md: "0"
+    right: {
+      marginLeft: {
+        base: 0,
+        md: 12
       }
     }
-  },
-  defaultProps: {}
+  }
+};
+var TemplateStyles = {
+  Template: Template$1,
+  TemplateHeader: TemplateHeader$1,
+  TemplateBreakout: TemplateBreakout$1,
+  TemplateContent: TemplateContent$1,
+  TemplateContentTop: TemplateContentTop$1,
+  TemplateContentPrimary: TemplateContentPrimary$1,
+  TemplateContentSidebar: TemplateContentSidebar$1
 };
 
-// Heading Styles
-var headings = {
-  h1: {
-    fontSize: "4",
-    fontWeight: "light",
-    letterSpacing: "0",
-    lineHeight: "1.1",
-    margin: "0 0 0.5em",
-    width: "auto"
+var variants$2 = {
+  "default": {},
+  caption: {
+    fontSize: "-1"
   },
-  h2: {
-    fontSize: "3",
-    fontWeight: "medium",
-    lineHeight: "1.25",
-    margin: "0 0 0.5em",
-    width: "auto"
+  tag: {
+    fontSize: "-2"
   },
-  h3: {
-    fontSize: "2",
-    fontWeight: "medium",
-    lineHeight: "1.25",
-    margin: "0 0 0.5em",
-    width: "auto"
+  mini: {
+    fontSize: "-3"
+  }
+};
+var Text$1 = {
+  baseStyle: function baseStyle(props) {
+    var fontWeight = props.isBold ? "bold" : props.variant === "tag" || props.variant === "min" ? "regular" : null;
+    var fontStyle = props.isItalic ? "italic" : null;
+    return {
+      fontStyle: fontStyle,
+      fontWeight: fontWeight,
+      marginBottom: props.noSpace ? "0 !important" : null
+    };
   },
-  h4: {
-    fontSize: "1",
-    fontWeight: "medium",
-    lineHeight: "1.15",
-    margin: "0 0 0.5em",
-    width: "auto"
+  variants: variants$2
+};
+
+var input = {
+  border: "1px solid",
+  borderColor: "ui.gray.medium",
+  borderRadius: "2px",
+  py: "xs",
+  px: "s",
+  _hover: {
+    borderColor: "ui.gray.dark"
   },
-  fallback: {
-    fontSize: "1",
-    fontWeight: "regular",
-    lineHeight: "1.15",
-    margin: "0 0 0.5em",
-    width: "auto"
+  _disabled: {
+    bgColor: "ui.gray.xx-light-cool",
+    color: "ui.gray.xdark",
+    opacity: "1"
+  },
+  _active: activeFocus,
+  _focus: activeFocus,
+  _placeholder: {
+    color: "ui.gray.dark",
+    fontStyle: "italic",
+    lineHeight: "21px"
+  },
+  _invalid: {
+    border: "1px solid",
+    borderColor: "ui.error.primary",
+    boxShadow: "none"
   }
-}; // styles for different visual variants:
-// primary, secondary, tertiary, callout
-
-var variants$1 = {
-  h1: headings.h1,
-  h2: headings.h2,
-  h3: headings.h3,
-  h4: headings.h4,
-  h5: headings.fallback,
-  h6: headings.fallback,
-  primary: headings.h1,
-  secondary: headings.h2,
-  tertiary: headings.h3,
-  callout: headings.h4
 };
-var Heading$1 = {
-  // Available variants:
-  //   primary, secondary, tertiary, callout
-  variants: variants$1,
-  defaultProps: {
-    variant: "secondary"
+var TextInput$1 = {
+  parts: ["helper", "input", "textarea"],
+  baseStyle: {
+    marginBottom: "xs",
+    helper: /*#__PURE__*/_extends({}, helperTextMargin),
+    input: input,
+    textarea: /*#__PURE__*/_extends({}, input, {
+      lineheight: "1.5",
+      minHeight: "xxl"
+    })
+  },
+  variants: {
+    searchBar: {
+      flex: "1 1 80%",
+      input: {
+        borderRightRadius: "0"
+      }
+    },
+    searchBarSelect: {
+      flex: "1 1 80%",
+      input: {
+        borderRadius: "0"
+      }
+    }
   }
 };
 
@@ -4601,22 +5990,35 @@ var theme = /*#__PURE__*/react.extendTheme( /*#__PURE__*/_extends({
     global: global
   },
   breakpoints: breakpoints,
-  colors: colors
+  colors: colors,
+  shadows: shadows,
+  space: spacing
 }, typography, {
-  space: spacing,
-
   /**
    * Chakra documentation on component styles:
    * https://chakra-ui.com/docs/theming/component-style
    */
-  components: {
+  components: /*#__PURE__*/_extends({
+    Accordion: Accordion$1,
+    Breadcrumb: Breadcrumb,
     Button: Button$1,
     Checkbox: Checkbox$1,
+    CustomCheckboxGroup: CustomCheckboxGroup,
+    CustomRadioGroup: CustomRadioGroup,
+    CustomSelect: Select$1,
     Heading: Heading$1,
+    Hero: Hero$1,
+    Icon: Icon$1,
+    Label: Label$1,
+    Link: Link$1,
     Radio: Radio$1,
-    CustomRadioGroup: CustomRadioGroup,
+    SearchBar: SearchBar$1,
+    StatusBadge: StatusBadge$1,
     Tabs: CustomTabs
-  }
+  }, TemplateStyles, {
+    Text: Text$1,
+    TextInput: TextInput$1
+  })
 }));
 
 var DSProvider = function DSProvider(_ref) {
@@ -4650,6 +6052,18 @@ Object.defineProperty(exports, 'Circle', {
     return react.Circle;
   }
 });
+Object.defineProperty(exports, 'Grid', {
+  enumerable: true,
+  get: function () {
+    return react.Grid;
+  }
+});
+Object.defineProperty(exports, 'GridItem', {
+  enumerable: true,
+  get: function () {
+    return react.GridItem;
+  }
+});
 Object.defineProperty(exports, 'HStack', {
   enumerable: true,
   get: function () {
@@ -4707,11 +6121,13 @@ exports.CardContent = CardContent;
 exports.CardEdition = CardEdition;
 exports.CardHeading = CardHeading;
 exports.Checkbox = Checkbox;
+exports.CheckboxGroup = CheckboxGroup;
 exports.DSProvider = DSProvider;
 exports.DatePicker = DatePicker;
 exports.Form = Form;
 exports.FormField = FormField;
 exports.FormRow = FormRow;
+exports.FormSpacing = exports.GridGaps;
 exports.Heading = Heading;
 exports.HelperErrorText = HelperErrorText;
 exports.Hero = Hero;
@@ -4731,9 +6147,20 @@ exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
 exports.SearchBar = SearchBar;
 exports.Select = Select;
+exports.SimpleGrid = SimpleGrid;
 exports.SkeletonLoader = SkeletonLoader;
 exports.StatusBadge = StatusBadge;
 exports.Tabs = Tabs;
+exports.Template = Template;
+exports.TemplateAppContainer = TemplateAppContainer;
+exports.TemplateBreakout = TemplateBreakout;
+exports.TemplateContent = TemplateContent;
+exports.TemplateContentPrimary = TemplateContentPrimary;
+exports.TemplateContentSidebar = TemplateContentSidebar;
+exports.TemplateContentTop = TemplateContentTop;
+exports.TemplateFooter = TemplateFooter;
+exports.TemplateHeader = TemplateHeader;
+exports.Text = Text;
 exports.TextInput = TextInput;
 exports.VideoPlayer = VideoPlayer;
 //# sourceMappingURL=design-system-react-components.cjs.development.js.map