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

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

@@ -1,45 +1,10 @@
-import { useStyleConfig, Button as Button$2, Box, Link as Link$1, Heading as Heading$2, useMultiStyleConfig, Checkbox as Checkbox$2, Icon as Icon$1, Radio as Radio$2, useRadioGroup, Stack, Tabs as Tabs$1, TabList, TabPanels, Tab, TabPanel, extendTheme, ChakraProvider } from '@chakra-ui/react';
-export { Box, ButtonGroup, Center, Circle, HStack, Square, Stack, Tab, TabList, TabPanel, TabPanels, VStack } from '@chakra-ui/react';
-import React__default, { createElement, Fragment, Children, cloneElement, Component, forwardRef, useState } from 'react';
+import { useStyleConfig, Icon as Icon$2, Box, Accordion as Accordion$2, AccordionPanel, AccordionItem, AccordionButton, Breadcrumb as Breadcrumb$1, BreadcrumbItem, BreadcrumbLink, Button as Button$2, Link as Link$2, Heading as Heading$2, useMultiStyleConfig, Checkbox as Checkbox$2, CheckboxGroup as CheckboxGroup$1, Stack, SimpleGrid as SimpleGrid$1, Input as Input$1, Textarea, Radio as Radio$2, useRadioGroup, Select as Select$2, Tabs as Tabs$1, TabList, TabPanels, Tab, TabPanel, Text as Text$2, extendTheme, ChakraProvider } from '@chakra-ui/react';
+export { Box, ButtonGroup, Center, Circle, Grid, GridItem, HStack, Square, Stack, Tab, TabList, TabPanel, TabPanels, VStack } from '@chakra-ui/react';
+import React__default, { createElement, cloneElement, Fragment, Children, forwardRef, useState, Component } from 'react';
 import { v4 } from 'uuid';
 import ReactDatePicker from 'react-datepicker';
 import { createBreakpoints } from '@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++) {
@@ -93,6 +58,113 @@ function generateUUID() {
   return 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 = {}));
+
+var IconRotationTypes;
+
+(function (IconRotationTypes) {
+  IconRotationTypes["Rotate0"] = "rotate0";
+  IconRotationTypes["Rotate90"] = "rotate90";
+  IconRotationTypes["Rotate180"] = "rotate180";
+  IconRotationTypes["Rotate270"] = "rotate270";
+})(IconRotationTypes || (IconRotationTypes = {}));
+
+var IconColors;
+
+(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";
+})(IconColors || (IconColors = {}));
+
+var IconSizes;
+
+(function (IconSizes) {
+  IconSizes["Small"] = "small";
+  IconSizes["Medium"] = "medium";
+  IconSizes["Large"] = "large";
+  IconSizes["ExtraLarge"] = "xlarge";
+  IconSizes["ExtraExtraLarge"] = "xxlarge";
+  IconSizes["ExtraExtraExtraLarge"] = "xxxlarge";
+})(IconSizes || (IconSizes = {}));
+
+var IconNames;
+
+(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";
+})(IconNames || (IconNames = {}));
+
+var LogoNames;
+
+(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";
+})(LogoNames || (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); }
@@ -1189,256 +1261,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 ? 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 ? 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 ? IconSizes.Medium : _props$size,
+      _props$type = props.type,
+      type = _props$type === void 0 ? IconTypes.Default : _props$type;
+  var styles = 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 (iconRotation) {
-    modifiers.push(iconRotation);
-  }
+  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 (color) {
-    modifiers.push(color);
-  }
 
-  if (size) {
-    modifiers.push(size);
-  }
+  if (name) {
+    var SvgComponent = iconSvgs[name];
+    return createElement(Icon$2, 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.
+
 
-  var iconID = generateUUID();
+  if (children.type === "svg" || children.props.type === "svg" || children.props.mdxType === "svg") {
+    childSVG = cloneElement(children, _extends({}, iconProps));
+  } else {
+    console.warn("You must pass an `svg` element to the `Icon` 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.
+  return createElement(Box, {
+    __css: styles
+  }, childSVG);
+}
 
+/**
+ * Get the minus or plus icon depending on whether the accordion
+ * is open or closed.
+ */
 
-  var renderChildren = function renderChildren() {
-    return Children.map(children, function (child) {
-      return cloneElement(child, _extends({}, iconProps));
-    });
-  }; // Component prop validation
+var getIcon = function getIcon(isExpanded) {
+  if (isExpanded === void 0) {
+    isExpanded = false;
+  }
 
+  var iconName = isExpanded ? IconNames.Minus : IconNames.Plus;
+  return createElement(Icon, {
+    name: iconName,
+    size: 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.
+ */
 
-  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.
 
+var getElementsFromContentData = function getElementsFromContentData(data) {
+  var _data;
 
-  if (name) {
-    var SvgComponent = iconSvgs[name];
-    return createElement(SvgComponent, Object.assign({}, iconProps));
+  if (data === void 0) {
+    data = [];
   }
 
-  return createElement(Fragment, null, renderChildren());
+  // 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" ? createElement(AccordionPanel, {
+      key: index,
+      dangerouslySetInnerHTML: {
+        __html: content.panel
+      }
+    }) : createElement(AccordionPanel, {
+      key: index
+    }, content.panel);
+    return createElement(AccordionItem, {
+      key: index
+    }, function (_ref) {
+      var isExpanded = _ref.isExpanded;
+      return createElement(Fragment, null, createElement(AccordionButton, {
+        padding: multiplePadding
+      }, createElement(Box, {
+        flex: "1",
+        textAlign: "left"
+      }, content.label), getIcon(isExpanded)), panel);
+    });
+  });
+};
+/**
+ * Accordion component that shows content on toggle. Can be used to display
+ * multiple accordion items together.
+ */
+
+
+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 createElement(Accordion$2, {
+    id: id,
+    defaultIndex: [openFirstAccordion],
+    allowMultiple: true
+  }, getElementsFromContentData(contentData));
 }
 
-/* eslint-disable camelcase */
-var IconRotationTypes;
+var ColorVariants;
 
-(function (IconRotationTypes) {
-  IconRotationTypes["rotate0"] = "rotate-0";
-  IconRotationTypes["rotate90"] = "rotate-90";
-  IconRotationTypes["rotate180"] = "rotate-180";
-  IconRotationTypes["rotate270"] = "rotate-270";
-})(IconRotationTypes || (IconRotationTypes = {}));
+(function (ColorVariants) {
+  ColorVariants["BooksAndMore"] = "booksAndMore";
+  ColorVariants["Locations"] = "locations";
+  ColorVariants["Research"] = "research";
+  ColorVariants["WhatsOn"] = "whatsOn";
+})(ColorVariants || (ColorVariants = {}));
 
-var IconNames;
+// Utility functions to use throughout the codebase
 
-(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";
-})(IconNames || (IconNames = {}));
+/**
+ * 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;
+  }
 
-var LogoNames;
+  if (!start) {
+    return [];
+  }
 
-(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";
-})(LogoNames || (LogoNames = {}));
+  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.
+ */
 
-var IconColors;
+var getVariant = function getVariant(variant, collection, fallback) {
+  if (fallback === void 0) {
+    fallback = null;
+  }
 
-(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";
-})(IconColors || (IconColors = {}));
+  var variantMap = {};
 
-var IconSizes;
+  for (var type in collection) {
+    variantMap[collection[type]] = collection[type];
+  }
 
-(function (IconSizes) {
-  IconSizes["small"] = "small";
-  IconSizes["medium"] = "medium";
-  IconSizes["large"] = "large";
-  IconSizes["xlarge"] = "xlarge";
-  IconSizes["xxlarge"] = "xxlarge";
-  IconSizes["xxxlarge"] = "xxxlarge";
-})(IconSizes || (IconSizes = {}));
+  return variantMap[variant] || fallback;
+};
 
-/** Accordion component that shows content on toggle */
+var getElementsFromData = function getElementsFromData(data, breadcrumbsID) {
+  if (!(data != null && data.length)) {
+    return {};
+  }
 
-function Accordion(props) {
-  var _props$modifiers = props.modifiers,
-      modifiers = _props$modifiers === void 0 ? [] : _props$modifiers,
-      blockName = props.blockName,
-      id = props.id,
+  var breadcrumbItems = data.map(function (breadcrumbData, index) {
+    return createElement(BreadcrumbItem, {
+      key: index,
+      isCurrentPage: index === data.length - 1 ? true : false
+    }, createElement(BreadcrumbLink, {
+      href: breadcrumbData.url
+    }, index === data.length - 2 && createElement(Icon, {
+      name: IconNames.Arrow,
+      size: IconSizes.Small,
+      iconRotation: IconRotationTypes.Rotate90,
+      id: breadcrumbsID + "__backarrow",
+      className: "breadcrumbs-icon",
+      type: IconTypes.Breadcrumbs
+    }), createElement("span", {
+      className: "breadcrumb-label"
+    }, breadcrumbData.text)));
+  });
+  return breadcrumbItems;
+};
+
+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 createElement("div", {
-    id: id,
-    className: bem("accordion", modifiers, blockName, [className])
-  }, createElement("input", {
-    id: "accordion-" + inputId,
-    className: bem("input", modifiers, "accordion"),
-    type: "checkbox",
-    defaultChecked: defaultOpen
-  }), createElement("label", {
-    htmlFor: "accordion-" + inputId,
-    className: bem("label", modifiers, "accordion")
-  }, accordionLabel, createElement(Icon, {
-    decorative: true,
-    name: IconNames.minus,
-    modifiers: ["small", "" + IconNames.minus]
-  }), createElement(Icon, {
-    decorative: true,
-    name: IconNames.plus,
-    modifiers: ["small", "" + IconNames.plus]
-  })), 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 = useStyleConfig("Breadcrumb", {
+    variant: variant
+  });
+  var breadcrumbItems = getElementsFromData(breadcrumbsData, id);
+  return createElement(Breadcrumb$1, {
+    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 ? createElement("a", {
-          href: item.url,
-          className: bem("link", [], baseClass)
-        }, item.text) : item.text;
-      } else {
-        var props = {
-          className: bem("link", [], baseClass)
-        };
-        linkComponent = createElement(item.type, _extends({}, props, item.props), item.props.children);
-      }
 
-      breadcrumbItems.push(createElement("li", {
-        key: baseClass + "-" + index,
-        className: bem("item", [], baseClass)
-      }, last && createElement(Icon, {
-        name: 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 createElement("nav", {
-      className: bem(baseClass, modifiers, blockName, [className]),
-      role: "navigation",
-      "aria-label": "Breadcrumbs"
-    }, createElement("ul", {
-      className: bem("list", [], baseClass)
-    }, breadcrumbItems));
-  };
+  }
 
-  return Breadcrumbs;
-}(Component);
-Breadcrumbs.defaultProps = {};
+  var attributes = classes.join(" ");
+  return attributes;
+}
 
 var ButtonTypes;
 
@@ -1448,6 +1543,7 @@ var ButtonTypes;
   ButtonTypes["Callout"] = "callout";
   ButtonTypes["Pill"] = "pill";
   ButtonTypes["Link"] = "link";
+  ButtonTypes["SearchBar"] = "searchBar";
 })(ButtonTypes || (ButtonTypes = {}));
 
 var variantMap = {};
@@ -1462,7 +1558,7 @@ for (var type in ButtonTypes) {
  */
 
 
-var getVariant = function getVariant(buttonType) {
+var getVariant$1 = function getVariant(buttonType) {
   return variantMap[buttonType] || ButtonTypes.Primary;
 };
 /** Renders a simple `button` element with custom classes and modifiers. */
@@ -1504,7 +1600,7 @@ function Button(props) {
   if (childCount === 1 && hasIcon) {
     variant = "icon-only";
   } else {
-    variant = getVariant(buttonType);
+    variant = getVariant$1(buttonType);
   }
 
   styles = useStyleConfig("Button", {
@@ -1539,8 +1635,6 @@ var HeadingLevels;
   HeadingLevels[HeadingLevels["Six"] = 6] = "Six";
 })(HeadingLevels || (HeadingLevels = {}));
 
-// MT-82, MT 225, etc
-
 var variantMap$1 = {};
 
 for (var type$1 in HeadingDisplaySizes) {
@@ -1553,7 +1647,7 @@ for (var type$1 in HeadingDisplaySizes) {
  */
 
 
-var getVariant$1 = function getVariant(displaySize) {
+var getVariant$2 = function getVariant(displaySize) {
   return variantMap$1[displaySize] || null;
 };
 
@@ -1563,13 +1657,19 @@ function Heading(props) {
       id = props.id,
       _props$level = props.level,
       level = _props$level === void 0 ? 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 = 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) {
@@ -1590,14 +1690,14 @@ function Heading(props) {
 
   var contentToRender = props.children ? props.children : text;
   var content = url ? createElement(Box, {
-    as: Link$1,
+    as: Link$2,
     href: url,
     className: urlClass
   }, contentToRender) : contentToRender;
   return createElement(Heading$2, {
     id: id,
     as: asHeading,
-    sx: styles,
+    sx: finalStyles,
     className: className
   }, content);
 }
@@ -1745,8 +1845,8 @@ function Card(props) {
 var CardLayouts;
 
 (function (CardLayouts) {
-  CardLayouts["Horizontal"] = "horizontal";
-  CardLayouts["Vertical"] = "vertical";
+  CardLayouts["Row"] = "row";
+  CardLayouts["Column"] = "column";
 })(CardLayouts || (CardLayouts = {}));
 
 var CardImageRatios;
@@ -1834,17 +1934,19 @@ 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);
 
   var d = isIndeterminate ? "M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm0,19a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,12,19Zm1.6-6.08a1,1,0,0,0-.6.917,1,1,0,1,1-2,0,3,3,0,0,1,1.8-2.75A2,2,0,1,0,10,9.255a1,1,0,1,1-2,0,4,4,0,1,1,5.6,3.666Z" : "M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z";
-  return createElement(Icon$1, Object.assign({
+  return createElement(Icon$2, Object.assign({
     viewBox: "0 0 24 24"
   }, rest), createElement("path", {
     fill: "currentColor",
@@ -1856,7 +1958,8 @@ var Checkbox = /*#__PURE__*/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,
@@ -1872,17 +1975,16 @@ var Checkbox = /*#__PURE__*/forwardRef(function (props, ref) {
   var styles = 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 createElement(Fragment, null, createElement(Checkbox$2, Object.assign({
-    id: checkboxID,
+    id: id,
     className: className,
     name: name || "default",
     isDisabled: isDisabled,
@@ -1897,52 +1999,293 @@ var Checkbox = /*#__PURE__*/forwardRef(function (props, ref) {
     defaultIsChecked: false
   }, {
     icon: createElement(CheckboxIcon, null),
-    //iconColor="ui.focus"
     __css: styles
   }, attributes), showLabel && labelText), footnote && showLabel && createElement(Box, {
     __css: styles.helper,
     "aria-disabled": isDisabled
   }, 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 createElement("div", {
-    className: bem("form-row", [], "", [className])
-  }, children);
-} // FormField child-component
-
-function FormField(props) {
-  var children = props.children,
-      className = props.className;
-  return 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 createElement("form", Object.assign({
-    className: bem("form", modifiers, "", [className]),
+/**
+ * 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"
+};
+
+var CheckboxGroupLayoutTypes;
+
+(function (CheckboxGroupLayoutTypes) {
+  CheckboxGroupLayoutTypes["Column"] = "column";
+  CheckboxGroupLayoutTypes["Row"] = "row";
+})(CheckboxGroupLayoutTypes || (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__*/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 ? 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 === 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.
+
+  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(cloneElement(child, newProps));
+    }
+  }); // Get the Chakra-based styles for all the custom elements in this component.
+
+  var styles = useMultiStyleConfig("CustomCheckboxGroup", {});
+  return createElement(Box, {
+    as: "fieldset",
+    id: "checkbox-group-" + id,
+    __css: styles
+  }, createElement("legend", {
+    className: showLabel ? "" : "sr-only"
+  }, createElement("span", null, labelText), optReqFlag && createElement(Box, {
+    as: "span",
+    __css: styles.required
+  }, isRequired ? "Required" : "Optional")), createElement(CheckboxGroup$1, Object.assign({}, checkboxProps), createElement(Stack, {
+    id: id,
+    "data-testid": "checkbox-group",
+    direction: [layout],
+    spacing: spacingProp,
+    ref: ref,
+    "aria-label": !showLabel ? labelText : null
+  }, newChildren)), footnote && createElement(Box, {
+    __css: styles.helper
+  }, createElement(HelperErrorText, {
+    isError: isInvalid
+  }, footnote)));
+});
+
+var GridGaps;
+
+(function (GridGaps) {
+  GridGaps["ExtraExtraSmall"] = "xxs";
+  GridGaps["ExtraSmall"] = "xs";
+  GridGaps["Small"] = "s";
+  GridGaps["Medium"] = "m";
+  GridGaps["Large"] = "l";
+  GridGaps["ExtraLarge"] = "xl";
+  GridGaps["ExtraExtraLarge"] = "xxl";
+})(GridGaps || (GridGaps = {}));
+
+function SimpleGrid(props) {
+  var children = props.children,
+      columns = props.columns,
+      className = props.className,
+      _props$gap = props.gap,
+      gap = _props$gap === void 0 ? GridGaps.Large : _props$gap,
+      id = props.id;
+  var responsiveCols = columns ? {
+    base: 1,
+    md: columns
+  } : {
+    base: 1,
+    md: 2,
+    lg: 3
+  };
+  return createElement(SimpleGrid$1, {
+    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 = Children.count(children);
+  var alteredChildren = Children.map(children, function (child, i) {
+    return cloneElement(child, {
+      id: id + "-grandchild" + i
+    });
+  });
+  return createElement(SimpleGrid, {
+    columns: count,
+    className: className,
+    gap: gap,
     id: id
-  }, attributes), children);
+  }, alteredChildren);
+}
+/** FormField child-component */
+
+function FormField(props) {
+  var children = props.children,
+      className = props.className,
+      gap = props.gap,
+      id = props.id;
+  return 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 = Children.map(children, function (child, i) {
+    return cloneElement(child, {
+      gap: spacing,
+      id: id + "-child" + i
+    });
+  });
+  return createElement(Box, Object.assign({
+    as: "form",
+    "aria-label": "form",
+    id: id
+  }, attributes, {
+    className: className
+  }), createElement(SimpleGrid, {
+    columns: 1,
+    gap: spacing,
+    id: id + "-parent"
+  }, alteredChildren));
 }
 
 var DatePickerTypes;
@@ -1981,6 +2324,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
@@ -2002,122 +2353,125 @@ 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 = useMultiStyleConfig("Label", {});
+  return createElement(Box, {
+    as: "label",
+    id: id,
+    className: className,
     htmlFor: htmlFor,
-    id: id
-  };
-  var helperString;
-
-  if (optReqFlag) {
-    helperString = createElement("div", {
-      className: bem("required-helper", [], baseClass)
-    }, optReqFlag);
-  }
-
-  return createElement("label", labelAttributes, attributes, children, helperString);
+    __css: styles
+  }, children, optReqFlag && createElement(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__*/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 ? 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 ? 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 = useMultiStyleConfig("TextInput", {
+    variant: variantType
+  });
   var isTextArea = type === TextInputTypes.textarea;
   var isHidden = type === 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 === TextInputTypes.tel || type === TextInputTypes.url || type === TextInputTypes.email) {
     var example = TextInputFormats[type];
     footnote = createElement(Fragment, null, "Ex: ", example, 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,
-    placeholder: placeholder,
     onChange: onChange,
     ref: ref
-  }, attributes); // For `input` and `textarea`, all attributes are the same but `input`
-  // also needs `type` and `value` to render correctly.
-
+  } : _extends({
+    id: id,
+    "aria-required": isRequired,
+    isDisabled: isDisabled,
+    isRequired: isRequired,
+    isInvalid: isInvalid,
+    placeholder: placeholder,
+    onChange: onChange,
+    ref: ref
+  }, attributes); // For `input` and `textarea`, all attributes are the same but `input`
+  // also needs `type` and `value` to render correctly.
+
   if (!isTextArea) {
     options = _extends({
       type: type,
       value: value
     }, options);
+    fieldOutput = createElement(Input$1, Object.assign({}, options, {
+      __css: styles.input
+    }));
+  } else {
+    fieldOutput = createElement(Textarea, Object.assign({}, options, {
+      __css: styles.textarea
+    }), value);
   }
 
-  var fieldOutput = createElement(isTextArea ? "textarea" : "input", options, isTextArea ? value : null);
-  var transformedInput = createElement("div", {
-    className: "textinput"
+  return createElement(Box, {
+    __css: styles,
+    className: className
   }, labelText && showLabel && !isHidden && createElement(Label, {
     htmlFor: id,
     optReqFlag: showOptReqLabel && optReqFlag,
     id: id + "-label"
-  }, labelText), fieldOutput, (helperText && !isHidden || errored) && createElement(HelperErrorText, {
-    isError: errored,
+  }, labelText), fieldOutput, footnote && !isHidden && createElement(Box, {
+    __css: styles.helper,
+    "aria-disabled": isDisabled
+  }, 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
@@ -2136,10 +2490,10 @@ var CustomTextInput = /*#__PURE__*/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,
@@ -2152,10 +2506,10 @@ var CustomTextInput = /*#__PURE__*/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.
@@ -2229,11 +2583,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,
@@ -2287,7 +2641,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 = {
@@ -2296,8 +2650,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
   };
@@ -2391,96 +2745,91 @@ var DatePicker = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
   }, helperText));
 });
 
-var FormSpacing;
-
-(function (FormSpacing) {
-  FormSpacing["ExtraExtraSmall"] = "extra-extra-small";
-  FormSpacing["ExtraSmall"] = "extra-small";
-  FormSpacing["Small"] = "small";
-  FormSpacing["Medium"] = "medium";
-  FormSpacing["Large"] = "large";
-  FormSpacing["ExtraLarge"] = "extra-large";
-})(FormSpacing || (FormSpacing = {}));
-
 var HeroTypes;
 
 (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";
 })(HeroTypes || (HeroTypes = {}));
 
-// OH-30 Header with Image Right
+var HeroSecondaryTypes = [HeroTypes.Secondary, HeroTypes.SecondaryBooksAndMore, HeroTypes.SecondaryLocations, HeroTypes.SecondaryResearch, HeroTypes.SecondaryWhatsOn];
+
+var variantMap$2 = {};
+
+for (var type$2 in HeroTypes) {
+  variantMap$2[HeroTypes[type$2]] = 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] || 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 = useMultiStyleConfig("Hero", {
+    variant: variant
+  });
+  var headingStyles = styles.heading; // We want to add `Hero`-specific styling to the `Heading` component.
 
-  if (heroType === HeroTypes.Primary) {
-    modifiers.push("primary");
-  } else if (heroType === HeroTypes.Secondary) {
-    modifiers.push("secondary");
-  } else if (heroType === HeroTypes.Tertiary) {
-    modifiers.push("tertiary");
-  } else if (heroType === HeroTypes.FiftyFifty) {
-    modifiers.push("50-50");
-  } else if (heroType === HeroTypes.Campaign) {
-    modifiers.push("campaign");
-  }
+  var finalHeading = heading && cloneElement(heading, {
+    sx: headingStyles
+  });
+  var backgroundImageStyle = {};
+  var contentBoxStyling = {};
 
-  if (heroType === HeroTypes.Primary && !backgroundImageSrc) {
-    console.warn("Warning: it is recommended to use the \"backgroundImageSrc\" prop for PRIMARY hero");
-    modifiers.push("warning");
-  }
+  if (heroType === HeroTypes.Primary) {
+    if (!backgroundImageSrc) {
+      console.warn("Warning: it is recommended to use the \"backgroundImageSrc\" prop for PRIMARY hero.");
+    }
 
-  if (heroType === 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 === 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 === HeroTypes.Tertiary && (backgroundImageSrc || image)) {
-    console.warn("Warning: TERTIARY hero will not use any of the image props");
-    modifiers.push("warning");
-  }
-
-  if (heroType === 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 === 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 !== HeroTypes.Primary && locationDetails) {
-    console.warn("Warning: Please provide \"locationDetails\" only to PRIMARY hero");
-    modifiers.push("warning");
+  if (heroType === HeroTypes.FiftyFifty && backgroundImageSrc) {
+    console.warn("Warning: the \"backgroundImageSrc\" prop has been passed, but FIFTYFIFTY hero will not use it.");
   }
 
-  var backgroundImageStyle = {};
-
   if (heroType === HeroTypes.Primary) {
     backgroundImageStyle = backgroundImageSrc ? {
       backgroundImage: "url(" + backgroundImageSrc + ")"
-    } : null;
+    } : {};
   } else if (heroType === HeroTypes.Campaign) {
     backgroundImageStyle = backgroundImageSrc ? {
       backgroundImage: "url(" + backgroundImageSrc + ")"
@@ -2493,30 +2842,29 @@ function Hero(props) {
     };
   }
 
-  var contentBoxStyling = {};
-
-  if (heroType === HeroTypes.Primary || heroType === HeroTypes.Tertiary || heroType === HeroTypes.FiftyFifty || heroType === 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 === HeroTypes.Campaign ? createElement(Fragment, null, image, createElement("div", {
-    className: "interior"
-  }, heading, subHeaderText)) : createElement(Fragment, null, heroType !== HeroTypes.Primary && heroType !== HeroTypes.Tertiary && image, heading, heroType === HeroTypes.Tertiary && subHeaderText ? createElement("p", null, subHeaderText) : subHeaderText);
-  return createElement("div", {
-    className: bem(heroBaseClass, modifiers, blockName, [className]),
+  var childrenToRender = heroType === HeroTypes.Campaign ? createElement(Fragment, null, image, createElement(Box, {
+    __css: styles.interior
+  }, finalHeading, subHeaderText)) : createElement(Fragment, null, heroType !== HeroTypes.Primary && heroType !== HeroTypes.Tertiary && image, finalHeading, heroType === HeroTypes.Tertiary && subHeaderText ? createElement("p", null, subHeaderText) : createElement(Box, {
+    __css: styles.bodyText
+  }, subHeaderText));
+  return createElement(Box, {
+    "data-testid": "hero",
     "data-responsive-background-image": true,
-    style: backgroundImageStyle
-  }, createElement("div", {
-    className: bem("content", [], heroBaseClass),
-    style: contentBoxStyling
+    style: backgroundImageStyle,
+    __css: styles
+  }, createElement(Box, {
+    "data-testid": "hero-content",
+    style: contentBoxStyling,
+    __css: styles.content
   }, childrenToRender), locationDetails);
 }
 
@@ -2607,90 +2955,99 @@ var LinkTypes;
 })(LinkTypes || (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 === LinkTypes.Backwards) {
+    iconRotation = IconRotationTypes.Rotate90;
+    iconAlign = IconAlign.Left;
+  } else if (type === LinkTypes.Forwards) {
+    iconRotation = IconRotationTypes.Rotate270;
+    iconAlign = IconAlign.Right;
+  }
+
+  icon = createElement(Icon, {
+    name: IconNames.Arrow,
+    align: iconAlign,
+    iconRotation: iconRotation,
+    className: "more-link"
+  });
+  return createElement(Fragment, null, type === LinkTypes.Backwards && icon, children, type === 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__*/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 ? 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 ? 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 === LinkTypes.Action || type === LinkTypes.Forwards || type === LinkTypes.Backwards) {
-    baseClass = "more-link";
+    variant = "moreLink";
   } else if (type === 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 === LinkTypes.Backwards) {
-    iconRotation = IconRotationTypes.rotate90;
-    iconPosition = "left";
-  } else if (type === LinkTypes.Forwards) {
-    iconRotation = IconRotationTypes.rotate270;
-    iconPosition = "right";
+    variant = "button";
   }
 
-  var navigationIconProps = {
-    name: IconNames.arrow,
-    modifiers: [iconPosition, iconRotation].concat(modifiers),
-    blockName: "more-link",
-    decorative: true
-  };
-
-  if (type === LinkTypes.Backwards) {
-    iconLeft = createElement(Icon, Object.assign({}, navigationIconProps));
-  } else if (type === LinkTypes.Forwards) {
-    iconRight = createElement(Icon, Object.assign({}, navigationIconProps));
-  }
+  var style = 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 === LinkTypes.Forwards || type === 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 (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 (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 cloneElement(_children, _extends({
-      className: linkClassName
+    var childrenToClone = children[0] ? children[0] : children;
+    var childProps = childrenToClone.props;
+    return cloneElement(childrenToClone, _extends({
+      className: className
     }, linkProps, childProps, {
       ref: ref
-    }), [_children.props.children]);
+    }), [childrenToClone.props.children]);
   } else {
-    return createElement("a", _extends({}, linkProps, {
-      className: linkClassName,
+    return createElement(Box, Object.assign({
+      as: "a",
+      className: className,
       ref: ref
-    }), iconLeft, props.children, iconRight);
+    }, linkProps, {
+      __css: style
+    }), newChildren);
   }
 });
-Link.displayName = "Link";
 
 var ListTypes;
 
@@ -2914,18 +3271,18 @@ function Notification(props) {
         return React__default.createElement(Icon, {
           decorative: false,
           className: "notification-icon",
-          name: IconNames.speaker_notes,
-          color: IconColors.section_research_secondary,
-          modifiers: ["large"]
+          name: IconNames.SpeakerNotes,
+          color: IconColors.SectionResearchSecondary,
+          size: IconSizes.Large
         });
 
       case "warning":
         return React__default.createElement(Icon, {
           decorative: false,
           className: "notification-icon",
-          name: IconNames.error_filled,
-          color: IconColors.brand_primary,
-          modifiers: ["large"]
+          name: IconNames.ErrorFilled,
+          color: IconColors.BrandPrimary,
+          size: IconSizes.Large
         });
 
       default:
@@ -2975,34 +3332,12 @@ function Notification(props) {
     className: "dismissible-button",
     onClick: handleClose
   }, React__default.createElement(Icon, {
-    modifiers: ["medium"],
     decorative: false,
-    name: IconNames.close,
-    titleText: "Close notification"
+    name: IconNames.Close,
+    size: 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) {
@@ -3199,92 +3534,6 @@ var Radio = /*#__PURE__*/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"
-};
-
 var RadioGroupLayoutTypes;
 
 (function (RadioGroupLayoutTypes) {
@@ -3346,22 +3595,14 @@ var RadioGroup = /*#__PURE__*/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;
@@ -3394,61 +3635,223 @@ var RadioGroup = /*#__PURE__*/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 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 SkeletonLoaderLayouts;
-
-(function (SkeletonLoaderLayouts) {
-  SkeletonLoaderLayouts["Horizontal"] = "horizontal";
-  SkeletonLoaderLayouts["Vertical"] = "vertical";
-})(SkeletonLoaderLayouts || (SkeletonLoaderLayouts = {}));
+var SelectTypes;
 
-var SkeletonLoaderImageRatios;
+(function (SelectTypes) {
+  SelectTypes["Default"] = "default";
+  SelectTypes["SearchBar"] = "searchbar";
+})(SelectTypes || (SelectTypes = {}));
 
-(function (SkeletonLoaderImageRatios) {
-  SkeletonLoaderImageRatios["Landscape"] = "landscape";
-  SkeletonLoaderImageRatios["Portrait"] = "portrait";
-  SkeletonLoaderImageRatios["Square"] = "square";
-})(SkeletonLoaderImageRatios || (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,
+      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 = 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(Box, {
+    className: className,
+    __css: styles
+  }, showLabel && React__default.createElement(Label, {
+    id: id + "-label",
+    htmlFor: id,
+    optReqFlag: showOptReqLabel && optReqFlag
+  }, labelText), React__default.createElement(Select$2, Object.assign({
+    id: id,
+    variant: "outline",
+    isRequired: isRequired,
+    isDisabled: isDisabled,
+    isInvalid: isInvalid,
+    name: name,
+    ref: ref
+  }, controlledProps, ariaAttributes, {
+    icon: React__default.createElement(Icon, {
+      name: IconNames.Arrow,
+      size: IconSizes.Medium
+    }),
+    __css: styles.select
+  }), children), footnote && React__default.createElement(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 = 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 && 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 createElement("option", {
+      key: option,
+      value: option
+    }, option);
+  })); // Render the `TextInput` component.
+
+  var textInputNative = textInputProps && createElement(TextInput, Object.assign({
+    id: generateUUID(),
+    labelText: textInputProps == null ? void 0 : textInputProps.labelText,
+    placeholder: textInputProps == null ? void 0 : textInputProps.placeholder,
+    type: TextInputTypes.text,
+    variantType: selectElem ? TextInputVariants.SearchBarSelect : TextInputVariants.SearchBar,
+    helperText: "",
+    showLabel: false
+  }, stateProps)); // Render the `Button` component.
+
+  var buttonElem = createElement(Button, {
+    id: generateUUID(),
+    buttonType: ButtonTypes.SearchBar,
+    type: "submit",
+    onClick: buttonOnClick,
+    disabled: isDisabled
+  }, createElement(Icon, {
+    name: IconNames.Search,
+    size: IconSizes.Small,
+    align: IconAlign.Left
+  }), "Search"); // Render the `HelperErrorText` component.
+
+  var helperErrorTextElem = footnote && 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 createElement(Box, {
+    as: "form",
+    id: id,
+    className: className,
+    role: "search",
+    "aria-label": finalAriaLabel,
+    "aria-describedby": ariaDescribedby,
+    onSubmit: onSubmit,
+    method: method,
+    action: action,
+    __css: styles
+  }, createElement(Box, {
+    __css: styles.topRow
+  }, selectElem, textInputElem, buttonElem), helperErrorTextElem);
+}
+
+var SkeletonLoaderLayouts;
+
+(function (SkeletonLoaderLayouts) {
+  SkeletonLoaderLayouts["Row"] = "row";
+  SkeletonLoaderLayouts["Column"] = "column";
+})(SkeletonLoaderLayouts || (SkeletonLoaderLayouts = {}));
+
+var SkeletonLoaderImageRatios;
+
+(function (SkeletonLoaderImageRatios) {
+  SkeletonLoaderImageRatios["Landscape"] = "landscape";
+  SkeletonLoaderImageRatios["Portrait"] = "portrait";
+  SkeletonLoaderImageRatios["Square"] = "square";
+})(SkeletonLoaderImageRatios || (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 ? SkeletonLoaderImageRatios.Square : _props$imageAspectRat,
       _props$layout = props.layout,
-      layout = _props$layout === void 0 ? SkeletonLoaderLayouts.Vertical : _props$layout,
+      layout = _props$layout === void 0 ? SkeletonLoaderLayouts.Column : _props$layout,
       _props$showButton = props.showButton,
       showButton = _props$showButton === void 0 ? false : _props$showButton,
       _props$showContent = props.showContent,
@@ -3469,6 +3872,7 @@ function SkeletonLoader(props) {
 
   for (var i = 0; i < headingSize; i++) {
     headingItems.push(createElement("div", {
+      key: "heading-" + i,
       className: bem("skeleton-loader-heading", imageModifiers, "", ["skeleton-element"])
     }));
   }
@@ -3477,6 +3881,7 @@ function SkeletonLoader(props) {
 
   for (var _i = 0; _i < contentSize; _i++) {
     contentItems.push(createElement("div", {
+      key: "content-" + _i,
       className: bem("skeleton-loader-content", imageModifiers, "", ["skeleton-element"])
     }));
   }
@@ -3505,124 +3910,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 = useStyleConfig("StatusBadge", {
+    variant: level
+  });
 
-  if (level) {
-    statusBadgeModifiers = [level];
+  if (!children) {
+    console.warn("Status Badge has no children.");
   }
 
-  return createElement("div", {
-    className: bem(baseClass, statusBadgeModifiers, blockName, [className])
-  }, props.children);
+  return createElement(Box, {
+    id: id,
+    className: className,
+    __css: styles
+  }, children);
 }
 
 /**
@@ -3639,7 +3954,7 @@ var onClickHash = function onClickHash(tabHash) {
  */
 
 
-var getElementsFromContentData = function getElementsFromContentData(data, useHash) {
+var getElementsFromContentData$1 = function getElementsFromContentData(data, useHash) {
   var tabs = [];
   var panels = [];
 
@@ -3734,7 +4049,7 @@ function Tabs(props) {
       useHash = _props$useHash === void 0 ? false : _props$useHash;
   var styles = 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;
 
@@ -3762,20 +4077,18 @@ function Tabs(props) {
       "aria-label": "Previous"
     }, styles.buttonArrows)
   }, createElement(Icon, {
-    name: IconNames.arrow,
-    decorative: true,
-    iconRotation: IconRotationTypes.rotate90,
-    modifiers: ["small"]
+    name: IconNames.Arrow,
+    iconRotation: IconRotationTypes.Rotate90,
+    size: IconSizes.Small
   })), createElement(TabList, null, tabs), createElement(Button, {
     buttonType: ButtonTypes.Primary,
     attributes: _extends({
       "aria-label": "Next"
     }, styles.buttonArrows)
   }, createElement(Icon, {
-    name: IconNames.arrow,
-    decorative: true,
-    iconRotation: IconRotationTypes.rotate270,
-    modifiers: ["small"]
+    name: IconNames.Arrow,
+    iconRotation: IconRotationTypes.Rotate270,
+    size: IconSizes.Small
   }))), createElement(TabPanels, null, panels)) : createElement(Fragment, null, createElement(Box, {
     __css: styles.tablistWrapper,
     sx: {
@@ -3786,6 +4099,210 @@ function Tabs(props) {
   }, tabs), panels));
 }
 
+var TextDisplaySizes;
+
+(function (TextDisplaySizes) {
+  TextDisplaySizes["Default"] = "default";
+  TextDisplaySizes["Caption"] = "caption";
+  TextDisplaySizes["Tag"] = "tag";
+  TextDisplaySizes["Mini"] = "mini";
+})(TextDisplaySizes || (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 ? TextDisplaySizes.Default : _props$displaySize,
+      isBold = props.isBold,
+      isItalic = props.isItalic,
+      noSpace = props.noSpace;
+  var variant = getVariant(displaySize, TextDisplaySizes, TextDisplaySizes.Default);
+  var styles = 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 createElement(Text$2, {
+    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 = useStyleConfig("Template", {});
+  return createElement(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 = useStyleConfig("TemplateHeader", {});
+  return createElement(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 = useStyleConfig("TemplateBreakout", {});
+  return createElement(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 = useStyleConfig("TemplateContent", {
+    variant: sidebar !== "none" ? "sidebar" : null
+  }); // Manually pass in the `sidebar` prop to the `TemplateContentPrimary` and
+  // `TemplateContentSidebar` components.
+
+  var newChildren = 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 = cloneElement(child, {
+        sidebar: sidebar
+      });
+    }
+
+    return newChild;
+  });
+  return createElement(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 = useStyleConfig("TemplateContentTop", {});
+  return createElement(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 = useStyleConfig("TemplateContentPrimary", {
+    variant: sidebar
+  });
+  return createElement(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 = useStyleConfig("TemplateContentSidebar", {
+    variant: sidebar
+  });
+  return createElement(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 createElement(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 && createElement(TemplateBreakout, null, breakout);
+  var contentTopElem = contentTop && createElement(TemplateContentTop, null, contentTop);
+  var contentPrimaryElem = contentPrimary && createElement(TemplateContentPrimary, null, contentPrimary);
+  var contentSidebarElem = contentSidebar && createElement(TemplateContentSidebar, null, contentSidebar);
+  return createElement(Template, null, (header || breakoutElem) && createElement(TemplateHeader, null, header, breakoutElem), createElement(TemplateContent, {
+    sidebar: sidebar
+  }, contentTopElem, sidebar === "left" && contentSidebarElem, contentPrimaryElem, sidebar === "right" && contentSidebarElem), footer && createElement(TemplateFooter, null, footer));
+};
+
 var VideoPlayerTypes;
 
 (function (VideoPlayerTypes) {
@@ -3865,11 +4382,66 @@ 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
+ * 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__*/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/style-guide-colors--colors-brand
+ *   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
@@ -3877,8 +4449,9 @@ function VideoPlayer(props) {
  * 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 = {
@@ -3893,10 +4466,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",
@@ -3919,12 +4495,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
     }
   },
 
@@ -3953,6 +4529,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",
@@ -4055,26 +4637,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 = {
@@ -4103,31 +4667,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__*/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",
@@ -4135,10 +4801,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"
   },
@@ -4146,88 +4816,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",
@@ -4236,9 +4914,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",
@@ -4267,83 +5016,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"
   },
-  _disabled: {
-    bg: "ui.white",
-    borderColor: "ui.gray.medium"
+  right: {
+    marginLeft: "xs"
+  }
+};
+var iconRotation = {
+  rotate180: {
+    transform: "rotate(180deg)"
   },
-  _focus: {
-    borderColor: "ui.focus",
-    boxShadow: "none",
-    outlineColor: "ui.focus"
+  rotate270: {
+    transform: "rotate(270deg)"
   },
-  _invalid: {
-    borderColor: "ui.error",
-    color: "ui.error"
+  rotate0: {
+    transform: "rotate(0deg)"
+  },
+  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"
+  }
+};
+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"
+      }
+    }
   }
-}; // Style object for the Checkbox's helper text
+};
 
-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",
@@ -4367,11 +5610,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: {
@@ -4380,8 +5623,8 @@ var baseStyleControl$1 = {
     _before: {
       content: "\"\"",
       display: "block",
-      w: 3,
-      h: 3,
+      w: "3",
+      h: "3",
       borderRadius: "100%",
       bg: "ui.focus"
     }
@@ -4395,51 +5638,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
@@ -4448,171 +5670,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"
+      }
+    }
   }
 };
 
@@ -4640,22 +6034,35 @@ var theme = /*#__PURE__*/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) {
@@ -4665,5 +6072,5 @@ var DSProvider = function DSProvider(_ref) {
   }, children);
 };
 
-export { Accordion, Breadcrumbs, Button, ButtonTypes, Card, CardActions, CardContent, CardEdition, CardHeading, CardImageRatios, CardImageSizes, CardLayouts, Checkbox, DSProvider, DatePicker, DatePickerTypes, Form, FormField, FormRow, FormSpacing, Heading, HeadingDisplaySizes, HeadingLevels, HelperErrorText, Hero, HeroTypes, HorizontalRule, Icon, IconColors, IconNames, IconRotationTypes, IconSizes, Image, Input, InputTypes, Label, Link, LinkTypes, List, ListTypes, LogoNames, Modal, Notification, NotificationContent, NotificationHeading, NotificationTypes, Pagination, Radio, RadioGroup, RadioGroupLayoutTypes, SearchBar, Select, SkeletonLoader, SkeletonLoaderImageRatios, SkeletonLoaderLayouts, StatusBadge, Tabs, TextInput, TextInputTypes, VideoPlayer, VideoPlayerAspectRatios, VideoPlayerTypes };
+export { Accordion, Breadcrumbs, Button, ButtonTypes, Card, CardActions, CardContent, CardEdition, CardHeading, CardImageRatios, CardImageSizes, CardLayouts, Checkbox, CheckboxGroup, CheckboxGroupLayoutTypes, DSProvider, DatePicker, DatePickerTypes, Form, FormField, FormRow, GridGaps as FormSpacing, GridGaps, Heading, HeadingDisplaySizes, HeadingLevels, HelperErrorText, Hero, HeroTypes, HorizontalRule, Icon, IconColors, IconNames, IconRotationTypes, IconSizes, Image, Input, InputTypes, Label, Link, LinkTypes, List, ListTypes, LogoNames, Modal, Notification, NotificationContent, NotificationHeading, NotificationTypes, Pagination, Radio, RadioGroup, RadioGroupLayoutTypes, SearchBar, Select, SimpleGrid, SkeletonLoader, SkeletonLoaderImageRatios, SkeletonLoaderLayouts, StatusBadge, Tabs, Template, TemplateAppContainer, TemplateBreakout, TemplateContent, TemplateContentPrimary, TemplateContentSidebar, TemplateContentTop, TemplateFooter, TemplateHeader, Text, TextDisplaySizes, TextInput, TextInputTypes, VideoPlayer, VideoPlayerAspectRatios, VideoPlayerTypes };
 //# sourceMappingURL=design-system-react-components.esm.js.map