@nypl/design-system-react-components 0.26.1 → 1.0.0

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

@@ -29,22 +29,6 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-
-  _setPrototypeOf(subClass, superClass);
-}
-
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-
-  return _setPrototypeOf(o, p);
-}
-
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -60,97 +44,6 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-(function (AccordionTypes) {
-  AccordionTypes["Default"] = "default";
-  AccordionTypes["Warning"] = "warning";
-  AccordionTypes["Error"] = "error";
-})(exports.AccordionTypes || (exports.AccordionTypes = {}));
-
-/* eslint-disable camelcase */
-
-(function (IconAlign) {
-  IconAlign["Left"] = "left";
-  IconAlign["Right"] = "right";
-  IconAlign["None"] = "none";
-})(exports.IconAlign || (exports.IconAlign = {}));
-
-(function (IconTypes) {
-  IconTypes["Default"] = "default";
-  IconTypes["Breadcrumbs"] = "breadcrumbs";
-})(exports.IconTypes || (exports.IconTypes = {}));
-
-(function (IconRotationTypes) {
-  IconRotationTypes["Rotate0"] = "rotate0";
-  IconRotationTypes["Rotate90"] = "rotate90";
-  IconRotationTypes["Rotate180"] = "rotate180";
-  IconRotationTypes["Rotate270"] = "rotate270";
-})(exports.IconRotationTypes || (exports.IconRotationTypes = {}));
-
-(function (IconColors) {
-  IconColors["UiBlack"] = "ui.black";
-  IconColors["UiWhite"] = "ui.white";
-  IconColors["BrandPrimary"] = "brand.primary";
-  IconColors["BrandSecondary"] = "brand.secondary";
-  IconColors["SectionBlogsPrimary"] = "section.blogs.primary";
-  IconColors["SectionBlogsSecondary"] = "section.blogs.secondary";
-  IconColors["SectionBooksAndMorePrimary"] = "section.books-and-more.primary";
-  IconColors["SectionBooksAndMoreSecondary"] = "section.books-and-more.secondary";
-  IconColors["SectionEducationPrimary"] = "section.education.primary";
-  IconColors["SectionEducationSecondary"] = "section.education.secondary";
-  IconColors["SectionLocationsPrimary"] = "section.locations.primary";
-  IconColors["SectionLocationsSecondary"] = "section.locations.secondary";
-  IconColors["SectionResearchPrimary"] = "section.research.primary";
-  IconColors["SectionResearchSecondary"] = "section.research.secondary";
-  IconColors["SectionResearchLibraryLpa"] = "section.research-library.lpa";
-  IconColors["SectionResearchLibrarySchomburg"] = "section.research-library.schomburg";
-  IconColors["SectionResearchLibrarySchwartzman"] = "section.research-library.schwartzman";
-  IconColors["SectionWhatsOnPrimary"] = "section.whats-on.primary";
-  IconColors["SectionWhatsOnSecondary"] = "section.whats-on.secondary";
-})(exports.IconColors || (exports.IconColors = {}));
-
-(function (IconSizes) {
-  IconSizes["Default"] = "default";
-  IconSizes["Small"] = "small";
-  IconSizes["Medium"] = "medium";
-  IconSizes["Large"] = "large";
-  IconSizes["ExtraLarge"] = "xlarge";
-  IconSizes["ExtraExtraLarge"] = "xxlarge";
-  IconSizes["ExtraExtraExtraLarge"] = "xxxlarge";
-})(exports.IconSizes || (exports.IconSizes = {}));
-
-(function (IconNames) {
-  IconNames["AccessibilityFull"] = "accessibility_full";
-  IconNames["AccessibilityPartial"] = "accessibility_partial";
-  IconNames["ActionCheckCircle"] = "action_check_circle";
-  IconNames["ActionHelpDefault"] = "action_help_default";
-  IconNames["ActionHelpOutline"] = "action_help_outline";
-  IconNames["AlertNotificationImportant"] = "alert_notification_important";
-  IconNames["ActionLaunch"] = "action_launch";
-  IconNames["Arrow"] = "arrow";
-  IconNames["Check"] = "check";
-  IconNames["Clock"] = "clock";
-  IconNames["Close"] = "close";
-  IconNames["Download"] = "download";
-  IconNames["ErrorFilled"] = "error_filled";
-  IconNames["ErrorOutline"] = "error_outline";
-  IconNames["FileTypeAudio"] = "file_type_audio";
-  IconNames["FileTypeDoc"] = "file_type_doc";
-  IconNames["FileTypeGenericDoc"] = "file_type_generic_doc";
-  IconNames["FileTypeImage"] = "file_type_image";
-  IconNames["FileTypePdf"] = "file_type_pdf";
-  IconNames["FileTypeSpreadsheet"] = "file_type_spreadsheet";
-  IconNames["FileTypeVideo"] = "file_type_video";
-  IconNames["Headset"] = "headset";
-  IconNames["Minus"] = "minus";
-  IconNames["Plus"] = "plus";
-  IconNames["Search"] = "search";
-  IconNames["SpeakerNotes"] = "speaker_notes";
-  IconNames["UtilityAccountFilled"] = "utility_account_filled";
-  IconNames["UtilityAccountUnfilled"] = "utility_account_unfilled";
-  IconNames["UtilityHamburger"] = "utility_hamburger";
-  IconNames["UtilitySearch"] = "utility_search";
-})(exports.IconNames || (exports.IconNames = {}));
-
 var _path, _path2, _path3;
 
 var _excluded = ["title", "titleId"];
@@ -1054,39 +947,39 @@ function SvgUtilityHamburger(_ref) {
 
 /* eslint-disable camelcase */
 var iconSvgs = {
-  accessibility_full: SvgAccessibilityFull,
-  accessibility_partial: SvgAccessibilityPartial,
-  action_check_circle: SvgActionCheckCircle,
-  action_help_default: SvgActionHelpDefault,
-  action_help_outline: SvgActionHelpOutline,
-  action_launch: SvgActionLaunch,
-  alert_notification_important: SvgAlertNotificationImportant,
+  accessibilityFull: SvgAccessibilityFull,
+  accessibilityPartial: SvgAccessibilityPartial,
+  actionCheckCircle: SvgActionCheckCircle,
+  actionHelpDefault: SvgActionHelpDefault,
+  actionHelpOutline: SvgActionHelpOutline,
+  actionLaunch: SvgActionLaunch,
+  alertNotificationImportant: SvgAlertNotificationImportant,
   arrow: SvgArrow,
   check: SvgCheck,
   clock: SvgClock,
   close: SvgClose,
   download: SvgDownload,
-  error_filled: SvgErrorFilled,
-  error_outline: SvgErrorOutline,
-  file_type_audio: SvgFileTypeAudio,
-  file_type_doc: SvgFileTypeDoc,
-  file_type_generic_doc: SvgFileTypeGenericDoc,
-  file_type_image: SvgFileTypeImage,
-  file_type_pdf: SvgFileTypePdf,
-  file_type_spreadsheet: SvgFileTypeSpreadsheet,
-  file_type_video: SvgFileTypeVideo,
+  errorFilled: SvgErrorFilled,
+  errorOutline: SvgErrorOutline,
+  fileTypeAudio: SvgFileTypeAudio,
+  fileTypeDoc: SvgFileTypeDoc,
+  fileTypeGenericDoc: SvgFileTypeGenericDoc,
+  fileTypeImage: SvgFileTypeImage,
+  fileTypePdf: SvgFileTypePdf,
+  fileTypeSpreadsheet: SvgFileTypeSpreadsheet,
+  fileTypeVideo: SvgFileTypeVideo,
   headset: SvgHeadset,
   minus: SvgMinus,
   plus: SvgPlus,
   search: SvgSearch,
-  speaker_notes: SvgSpeakerNotes,
-  utility_account_filled: SvgUtilityAccountFilled,
-  utility_account_unfilled: SvgUtilityAccountUnfilled,
-  utility_hamburger: SvgUtilityHamburger,
-  utility_search: SvgSearch
+  speakerNotes: SvgSpeakerNotes,
+  utilityAccountFilled: SvgUtilityAccountFilled,
+  utilityAccountUnfilled: SvgUtilityAccountUnfilled,
+  utilityHamburger: SvgUtilityHamburger,
+  utilitySearch: SvgSearch
 };
 
-var _excluded$t = ["additionalStyles", "align", "children", "className", "color", "decorative", "iconRotation", "id", "name", "size", "title", "type"];
+var _excluded$t = ["align", "children", "className", "color", "decorative", "iconRotation", "id", "name", "size", "title", "type"];
 /**
  * Renders SVG-based icons.
  */
@@ -1094,26 +987,24 @@ var _excluded$t = ["additionalStyles", "align", "children", "className", "color"
 var Icon = /*#__PURE__*/react.chakra(function (props) {
   var _children$props, _children$props2;
 
-  var _props$additionalStyl = props.additionalStyles,
-      additionalStyles = _props$additionalStyl === void 0 ? {} : _props$additionalStyl,
-      _props$align = props.align,
-      align = _props$align === void 0 ? exports.IconAlign.None : _props$align,
+  var _props$align = props.align,
+      align = _props$align === void 0 ? "none" : _props$align,
       children = props.children,
       className = props.className,
       _props$color = props.color,
-      color = _props$color === void 0 ? exports.IconColors.UiBlack : _props$color,
+      color = _props$color === void 0 ? "ui.black" : _props$color,
       _props$decorative = props.decorative,
       decorative = _props$decorative === void 0 ? true : _props$decorative,
       _props$iconRotation = props.iconRotation,
-      iconRotation = _props$iconRotation === void 0 ? exports.IconRotationTypes.Rotate0 : _props$iconRotation,
+      iconRotation = _props$iconRotation === void 0 ? "rotate0" : _props$iconRotation,
       id = props.id,
       name = props.name,
       _props$size = props.size,
-      size = _props$size === void 0 ? exports.IconSizes.Default : _props$size,
+      size = _props$size === void 0 ? "default" : _props$size,
       _props$title = props.title,
       title = _props$title === void 0 ? name + " icon" : _props$title,
       _props$type = props.type,
-      type = _props$type === void 0 ? exports.IconTypes.Default : _props$type,
+      type = _props$type === void 0 ? "default" : _props$type,
       rest = _objectWithoutPropertiesLoose(props, _excluded$t);
 
   var styles = react.useStyleConfig("Icon", {
@@ -1150,7 +1041,7 @@ var Icon = /*#__PURE__*/react.chakra(function (props) {
     return React.createElement(react.Icon, Object.assign({
       as: SvgComponent
     }, iconProps, {
-      __css: _extends({}, styles, additionalStyles)
+      __css: styles
     }));
   } // If no `name` prop was passed, we expect a child SVG element to be passed.
   // Apply icon props to the SVG child.
@@ -1162,11 +1053,11 @@ var Icon = /*#__PURE__*/react.chakra(function (props) {
     console.warn("NYPL Reservoir Icon: An `svg` element must be passed to the `Icon` " + "component as its child.");
   }
 
-  return React.createElement(react.Box, Object.assign({
+  return React.createElement(react.Box, {
     __css: styles
-  }, rest), childSVG);
+  }, childSVG);
 }, // Pass all custom props to Chakra and override, e.g. we want the
-// DS color prop to use the DS enum and not color strings.
+// DS color value set and not color strings.
 {
   shouldForwardProp: function shouldForwardProp() {
     return true;
@@ -1184,11 +1075,11 @@ var getIcon = function getIcon(isExpanded, index, id) {
     isExpanded = false;
   }
 
-  var iconName = isExpanded ? exports.IconNames.Minus : exports.IconNames.Plus;
+  var iconName = isExpanded ? "minus" : "plus";
   return React.createElement(Icon, {
     id: "accordion-" + id + "-icon-" + index,
     name: iconName,
-    size: exports.IconSizes.Small
+    size: "small"
   });
 };
 /**
@@ -1199,16 +1090,20 @@ var getIcon = function getIcon(isExpanded, index, id) {
 
 
 var getElementsFromData = function getElementsFromData(data, id) {
-  var _colorMap, _data;
+  var _data;
 
   if (data === void 0) {
     data = [];
   }
 
-  var colorMap = (_colorMap = {}, _colorMap[exports.AccordionTypes.Default] = "ui.white", _colorMap[exports.AccordionTypes.Warning] = "ui.status.primary", _colorMap[exports.AccordionTypes.Error] = "ui.status.secondary", _colorMap); // For FAQ-style multiple accordions, the button should be bigger.
+  var colorMap = {
+    "default": "ui.white",
+    warning: "ui.status.primary",
+    error: "ui.status.secondary"
+  }; // 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;
+  var multiplePadding = ((_data = data) == null ? void 0 : _data.length) > 1 ? "4" : "initial";
   return data.map(function (content, index) {
     // This is done to support both string and DOM element input.
     var panel = typeof content.panel === "string" ? React.createElement(react.AccordionPanel, {
@@ -1259,64 +1154,15 @@ var Accordion = /*#__PURE__*/react.chakra(function (props) {
       rest = _objectWithoutPropertiesLoose(props, _excluded$u); // Pass `0` to open the first accordion in the 0-index based array.
 
 
-  var openFirstAccordion = isDefaultOpen ? 0 : undefined;
+  var openFirstAccordion = isDefaultOpen ? [0] : undefined;
   return React.createElement(react.Accordion, Object.assign({
     id: id,
-    defaultIndex: [openFirstAccordion],
+    defaultIndex: openFirstAccordion,
     allowMultiple: true
   }, rest), getElementsFromData(accordionData, id));
 });
 
-(function (BreadcrumbsTypes) {
-  BreadcrumbsTypes["Blogs"] = "blogs";
-  BreadcrumbsTypes["BooksAndMore"] = "booksAndMore";
-  BreadcrumbsTypes["Education"] = "education";
-  BreadcrumbsTypes["Locations"] = "locations";
-  BreadcrumbsTypes["Research"] = "research";
-  BreadcrumbsTypes["WhatsOn"] = "whatsOn";
-})(exports.BreadcrumbsTypes || (exports.BreadcrumbsTypes = {}));
-
-// 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;
-  });
-};
-/**
- * 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 getVariant = function getVariant(variant, collection, fallback) {
-  if (fallback === void 0) {
-    fallback = null;
-  }
-
-  var variantMap = {};
-
-  for (var type in collection) {
-    variantMap[collection[type]] = collection[type];
-  }
-
-  return variantMap[variant] || fallback;
-};
-
-var _excluded$v = ["additionalStyles", "breadcrumbsData", "breadcrumbsType", "className", "id"];
+var _excluded$v = ["breadcrumbsData", "breadcrumbsType", "className", "id"];
 
 var getElementsFromData$1 = function getElementsFromData(data, breadcrumbsID) {
   if (!(data != null && data.length)) {
@@ -1330,12 +1176,12 @@ var getElementsFromData$1 = function getElementsFromData(data, breadcrumbsID) {
     }, React.createElement(react.BreadcrumbLink, {
       href: breadcrumbData.url
     }, index === data.length - 2 && React.createElement(Icon, {
-      name: exports.IconNames.Arrow,
-      size: exports.IconSizes.Small,
-      iconRotation: exports.IconRotationTypes.Rotate90,
+      name: "arrow",
+      size: "small",
+      iconRotation: "rotate90",
       id: breadcrumbsID + "__backarrow",
       className: "breadcrumbs-icon",
-      type: exports.IconTypes.Breadcrumbs
+      type: "breadcrumbs"
     }), React.createElement("span", {
       className: "breadcrumb-label"
     }, breadcrumbData.text)));
@@ -1344,54 +1190,37 @@ var getElementsFromData$1 = function getElementsFromData(data, breadcrumbsID) {
 };
 
 var Breadcrumbs = /*#__PURE__*/react.chakra(function (props) {
-  var _props$additionalStyl = props.additionalStyles,
-      additionalStyles = _props$additionalStyl === void 0 ? {} : _props$additionalStyl,
-      breadcrumbsData = props.breadcrumbsData,
-      breadcrumbsType = props.breadcrumbsType,
+  var breadcrumbsData = props.breadcrumbsData,
+      _props$breadcrumbsTyp = props.breadcrumbsType,
+      breadcrumbsType = _props$breadcrumbsTyp === void 0 ? "whatsOn" : _props$breadcrumbsTyp,
       className = props.className,
       id = props.id,
       rest = _objectWithoutPropertiesLoose(props, _excluded$v);
 
-  var variant = getVariant(breadcrumbsType, exports.BreadcrumbsTypes);
-
   if (!breadcrumbsData || breadcrumbsData.length === 0) {
     throw new Error("NYPL Reservoir Breadcrumbs: No data was passed to the `breadcrumbsData` prop.");
   }
 
   var styles = react.useStyleConfig("Breadcrumb", {
-    variant: variant
+    variant: breadcrumbsType
   });
-
-  var finalStyles = _extends({}, styles, additionalStyles);
-
   var breadcrumbItems = getElementsFromData$1(breadcrumbsData, id);
   return React.createElement(react.Breadcrumb, Object.assign({
     "aria-label": "Breadcrumb",
     className: className,
     id: id,
-    __css: finalStyles
+    __css: styles
   }, rest), breadcrumbItems);
 });
 
-(function (ButtonTypes) {
-  ButtonTypes["Primary"] = "primary";
-  ButtonTypes["Secondary"] = "secondary";
-  ButtonTypes["Callout"] = "callout";
-  ButtonTypes["Pill"] = "pill";
-  ButtonTypes["Link"] = "link";
-  ButtonTypes["NoBrand"] = "noBrand";
-})(exports.ButtonTypes || (exports.ButtonTypes = {}));
-
-var _excluded$w = ["additionalStyles", "attributes", "buttonType", "children", "className", "id", "isDisabled", "mouseDown", "onClick", "type"];
+var _excluded$w = ["buttonType", "children", "className", "id", "isDisabled", "mouseDown", "onClick", "type"];
 /**
  * Renders a simple `button` element with custom variant styles.
  */
 
 var Button = /*#__PURE__*/react.chakra(function (props) {
-  var _props$additionalStyl = props.additionalStyles,
-      additionalStyles = _props$additionalStyl === void 0 ? {} : _props$additionalStyl,
-      attributes = props.attributes,
-      buttonType = props.buttonType,
+  var _props$buttonType = props.buttonType,
+      buttonType = _props$buttonType === void 0 ? "primary" : _props$buttonType,
       children = props.children,
       _props$className = props.className,
       className = _props$className === void 0 ? "" : _props$className,
@@ -1412,7 +1241,7 @@ var Button = /*#__PURE__*/react.chakra(function (props) {
   };
   var childCount = 0;
   var hasIcon = false;
-  var variant;
+  var variant = buttonType;
   var styles = {};
 
   if (!id) {
@@ -1423,7 +1252,9 @@ var Button = /*#__PURE__*/react.chakra(function (props) {
     childCount++;
 
     if (child !== undefined && child !== null) {
-      if (child.type === Icon || child.props && child.props.mdxType === "Icon") {
+      var _child$props;
+
+      if (child.type === Icon || (child == null ? void 0 : (_child$props = child.props) == null ? void 0 : _child$props.mdxType) === "Icon") {
         hasIcon = true;
       }
     }
@@ -1431,8 +1262,6 @@ var Button = /*#__PURE__*/react.chakra(function (props) {
 
   if (childCount === 1 && hasIcon) {
     variant = "iconOnly";
-  } else {
-    variant = getVariant(buttonType, exports.ButtonTypes, exports.ButtonTypes.Primary);
   }
 
   styles = react.useStyleConfig("Button", {
@@ -1444,45 +1273,121 @@ var Button = /*#__PURE__*/react.chakra(function (props) {
     className: className,
     type: type,
     isDisabled: isDisabled
-  }, attributes, btnCallback, {
-    __css: _extends({}, styles, additionalStyles)
+  }, btnCallback, {
+    __css: styles
   }, rest), children);
 });
 
-(function (LayoutTypes) {
-  LayoutTypes["Column"] = "column";
-  LayoutTypes["Row"] = "row";
-})(exports.LayoutTypes || (exports.LayoutTypes = {}));
-
-(function (HeadingSizes) {
-  HeadingSizes["Primary"] = "primary";
-  HeadingSizes["Secondary"] = "secondary";
-  HeadingSizes["Tertiary"] = "tertiary";
-  HeadingSizes["Callout"] = "callout";
-})(exports.HeadingSizes || (exports.HeadingSizes = {}));
-
-(function (HeadingLevels) {
-  HeadingLevels["One"] = "one";
-  HeadingLevels["Two"] = "two";
-  HeadingLevels["Three"] = "three";
-  HeadingLevels["Four"] = "four";
-  HeadingLevels["Five"] = "five";
-  HeadingLevels["Six"] = "six";
-})(exports.HeadingLevels || (exports.HeadingLevels = {}));
-
-(function (LinkTypes) {
-  LinkTypes["Action"] = "action";
-  LinkTypes["Backwards"] = "backwards";
-  LinkTypes["Button"] = "button";
-  LinkTypes["Default"] = "default";
-  LinkTypes["External"] = "external";
-  LinkTypes["Forwards"] = "forwards";
-})(exports.LinkTypes || (exports.LinkTypes = {}));
-
-var _excluded$x = ["additionalStyles", "attributes", "children", "className", "href", "id", "type"];
+/**
+ * React hook used to get the window size on device resizing.
+ * Based on https://usehooks-typescript.com/react-hook/use-window-size
+ */
+
+function useWindowSize() {
+  var _React$useState = React__default.useState({
+    width: 0,
+    height: 0
+  }),
+      windowSize = _React$useState[0],
+      setWindowSize = _React$useState[1];
+
+  React__default.useEffect(function () {
+    var handler = function handler() {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    }; // Set size at the first client-side load
+
+
+    handler();
+    window.addEventListener("resize", handler); // Remove event listener on cleanup
+
+    return function () {
+      window.removeEventListener("resize", handler);
+    };
+  }, []);
+  return windowSize;
+}
+
+var _excluded$x = ["buttonWidth", "children", "className", "id", "isDisabled", "layout"];
+/**
+ * A simple wrapper to group `Button` components together. The layout can be set
+ * to row or column and the width of internal `Button` components can be set to
+ * the parent's full width or the `Button`'s content width
+ */
+
+
+var ButtonGroup = /*#__PURE__*/react.chakra(function (props) {
+  var _props$buttonWidth = props.buttonWidth,
+      buttonWidth = _props$buttonWidth === void 0 ? "default" : _props$buttonWidth,
+      children = props.children,
+      _props$className = props.className,
+      className = _props$className === void 0 ? "" : _props$className,
+      id = props.id,
+      _props$isDisabled = props.isDisabled,
+      isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
+      _props$layout = props.layout,
+      layout = _props$layout === void 0 ? "row" : _props$layout,
+      rest = _objectWithoutPropertiesLoose(props, _excluded$x);
+
+  var newChildren = []; // Based on --nypl-breakpoint-medium
+
+  var breakpointMedium = 600;
+
+  var _React$useState = React.useState(layout),
+      finalLayout = _React$useState[0],
+      setFinalLayout = _React$useState[1];
+
+  var _React$useState2 = React.useState(buttonWidth),
+      finalButtonWidth = _React$useState2[0],
+      setFinalButtonWidth = _React$useState2[1];
+
+  var windowDimensions = useWindowSize();
+  React.useEffect(function () {
+    // When on a mobile device or narrow window, always set the layout to
+    // column and the button width to "full".
+    if (windowDimensions.width <= breakpointMedium) {
+      setFinalButtonWidth("full");
+      setFinalLayout("column");
+    } else {
+      // Otherwise, set the layout and button width to the values
+      // passed in via the `buttonWidth` and `layout` props.
+      setFinalButtonWidth(buttonWidth);
+      setFinalLayout(layout);
+    }
+  }, [buttonWidth, layout, windowDimensions.width]);
+  var styles = react.useStyleConfig("ButtonGroup", {
+    buttonWidth: finalButtonWidth
+  });
+  React.Children.map(children, function (child, key) {
+    if (child.type !== Button) {
+      // Special case for Storybook MDX documentation.
+      if (child.props.mdxType && child.props.mdxType === "Button") ; else {
+        console.warn("NYPL Reservoir ButtonGroup: Only Button components can be children of ButtonGroup.");
+        return;
+      }
+    }
+
+    newChildren.push(React.cloneElement(child, {
+      key: key,
+      isDisabled: isDisabled
+    }));
+  });
+  return React.createElement(react.Stack, Object.assign({
+    id: id,
+    className: className,
+    direction: finalLayout,
+    // Always set the spacing to "8px".
+    spacing: "xs",
+    sx: styles
+  }, rest), newChildren);
+});
+
+var _excluded$y = ["children", "className", "href", "id", "type"];
 /**
  * Renders the `Link` children components with a direction arrow icon based
- * on the `Backwards` or `Forwards` `LinkTypes` type.
+ * on the `"backwards"` or `"forwards"` `linkType` value.
  */
 
 function getWithDirectionIcon(children, type, linkId) {
@@ -1491,12 +1396,12 @@ function getWithDirectionIcon(children, type, linkId) {
   var icon = null; // An icon needs a position in order for it to be created and
   // rendered in the link.
 
-  if (type === exports.LinkTypes.Backwards) {
-    iconRotation = exports.IconRotationTypes.Rotate90;
-    iconAlign = exports.IconAlign.Left;
-  } else if (type === exports.LinkTypes.Forwards) {
-    iconRotation = exports.IconRotationTypes.Rotate270;
-    iconAlign = exports.IconAlign.Right;
+  if (type === "backwards") {
+    iconRotation = "rotate90";
+    iconAlign = "left";
+  } else if (type === "forwards") {
+    iconRotation = "rotate270";
+    iconAlign = "right";
   }
 
   var iconId = linkId + "-icon";
@@ -1505,20 +1410,20 @@ function getWithDirectionIcon(children, type, linkId) {
     className: "more-link",
     iconRotation: iconRotation,
     id: iconId,
-    name: exports.IconNames.Arrow,
-    size: exports.IconSizes.Medium
+    name: "arrow",
+    size: "medium"
   });
-  return React.createElement(React.Fragment, null, type === exports.LinkTypes.Backwards && icon, children, type === exports.LinkTypes.Forwards && icon);
+  return React.createElement(React.Fragment, null, type === "backwards" && icon, children, type === "forwards" && icon);
 }
 
 function getExternalIcon(children, linkId) {
   var iconId = linkId + "-icon";
   var icon = React.createElement(Icon, {
-    align: exports.IconAlign.Right,
+    align: "right",
     className: "more-link",
     id: iconId,
-    name: exports.IconNames.ActionLaunch,
-    size: exports.IconSizes.Medium
+    name: "actionLaunch",
+    size: "medium"
   });
   return React.createElement(React.Fragment, null, children, icon);
 }
@@ -1529,23 +1434,20 @@ function getExternalIcon(children, linkId) {
 
 
 var Link = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _props$additionalStyl = props.additionalStyles,
-      additionalStyles = _props$additionalStyl === void 0 ? {} : _props$additionalStyl,
-      attributes = props.attributes,
-      children = props.children,
+  var children = props.children,
       className = props.className,
       href = props.href,
       id = props.id,
       _props$type = props.type,
-      type = _props$type === void 0 ? exports.LinkTypes.Default : _props$type,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$x); // Merge the necessary props alongside any extra props for the
+      type = _props$type === void 0 ? "default" : _props$type,
+      rest = _objectWithoutPropertiesLoose(props, _excluded$y); // Merge the necessary props alongside any extra props for the
   // anchor element.
 
 
   var linkProps = _extends({
     id: id,
     href: href
-  }, attributes); // The LinkTypes.Default type.
+  }, rest); // The "default" type.
 
 
   var variant = "link";
@@ -1554,21 +1456,21 @@ var Link = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (pr
     throw new Error("`Link` needs the `href` prop.");
   }
 
-  if (type === exports.LinkTypes.Action || type === exports.LinkTypes.Forwards || type === exports.LinkTypes.Backwards || type === exports.LinkTypes.External) {
+  if (type === "action" || type === "forwards" || type === "backwards" || type === "external") {
     variant = "moreLink";
-  } else if (type === exports.LinkTypes.Button) {
+  } else if (type === "button") {
     variant = "button";
   }
 
   var style = react.useStyleConfig("Link", {
     variant: variant
-  }); // Render with specific direction arrows if the type is
+  });
+  var rel = type === "external" ? "nofollow" : null;
+  var target = type === "external" ? "_blank" : null; // Render with specific direction arrows if the type is
   // Forwards or Backwards.  Or render with the launch icon
   // if the type is External.  Otherwise, do not add an icon.
 
-  var newChildren = (type === exports.LinkTypes.Forwards || type === exports.LinkTypes.Backwards) && getWithDirectionIcon(children, type, id) || type === exports.LinkTypes.External && getExternalIcon(children, id) || children;
-  var rel = type === exports.LinkTypes.External ? "nofollow" : null;
-  var target = type === exports.LinkTypes.External ? "_blank" : null;
+  var newChildren = (type === "forwards" || type === "backwards") && getWithDirectionIcon(children, type, id) || type === "external" && getExternalIcon(children, id) || children;
 
   if (!href) {
     // React Types error makes this fail:
@@ -1580,18 +1482,15 @@ var Link = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (pr
 
     var childrenToClone = children[0] ? children[0] : children;
     var childProps = childrenToClone.props;
-    return React.createElement(react.Box, Object.assign({
+    return React.createElement(react.Box, {
       as: "span",
       __css: style
-    }, rest), React.cloneElement(childrenToClone, _extends({
+    }, React.cloneElement(childrenToClone, _extends({
       className: className
     }, linkProps, childProps, {
       ref: ref,
       rel: rel,
-      target: target,
-      // Useful if more styles are needed for the custom
-      // anchor element or link component.
-      style: additionalStyles
+      target: target
     }), [childrenToClone.props.children]));
   } else {
     return React.createElement(react.Box, Object.assign({
@@ -1601,17 +1500,17 @@ var Link = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (pr
       rel: rel,
       target: target
     }, linkProps, {
-      __css: _extends({}, style, additionalStyles)
-    }, rest), newChildren);
+      __css: style
+    }), newChildren);
   }
 }));
 
-var _excluded$y = ["additionalStyles", "className", "id", "level", "size", "text", "url", "urlClass"];
+var _excluded$z = ["className", "id", "level", "size", "text", "url", "urlClass"];
 /** Map the word heading level to the number heading level. The default is 2. */
 
 var getMappedLevel = function getMappedLevel(level) {
   if (level === void 0) {
-    level = exports.HeadingLevels.Two;
+    level = "two";
   }
 
   var levelMap = {
@@ -1626,27 +1525,23 @@ var getMappedLevel = function getMappedLevel(level) {
 };
 
 var Heading = /*#__PURE__*/react.chakra(function (props) {
-  var _props$additionalStyl = props.additionalStyles,
-      additionalStyles = _props$additionalStyl === void 0 ? {} : _props$additionalStyl,
-      className = props.className,
+  var className = props.className,
       id = props.id,
       _props$level = props.level,
-      level = _props$level === void 0 ? exports.HeadingLevels.Two : _props$level,
+      level = _props$level === void 0 ? "two" : _props$level,
       size = props.size,
       text = props.text,
       url = props.url,
       urlClass = props.urlClass,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$y);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$z);
 
   var finalLevel = getMappedLevel(level);
-  var variant = size ? getVariant(size, exports.HeadingSizes) : "h" + finalLevel;
+  var variant = size ? size : "h" + finalLevel;
   var styles = react.useStyleConfig("Heading", {
     variant: variant
   }); // Combine native base styles with any additional styles.
   // This is used in the `Hero` and `Notification` components.
 
-  var finalStyles = _extends({}, styles, additionalStyles);
-
   var asHeading = "h" + finalLevel;
 
   if (!props.children && !text) {
@@ -1668,36 +1563,11 @@ var Heading = /*#__PURE__*/react.chakra(function (props) {
     as: asHeading,
     className: className,
     id: id,
-    sx: finalStyles
+    sx: styles
   }, rest), content);
 });
 
-(function (ImageRatios) {
-  ImageRatios["FourByThree"] = "fourByThree";
-  ImageRatios["OneByTwo"] = "oneByTwo";
-  ImageRatios["Original"] = "original";
-  ImageRatios["SixteenByNine"] = "sixteenByNine";
-  ImageRatios["Square"] = "square";
-  ImageRatios["ThreeByFour"] = "threeByFour";
-  ImageRatios["ThreeByTwo"] = "threeByTwo";
-  ImageRatios["TwoByOne"] = "twoByOne";
-})(exports.ImageRatios || (exports.ImageRatios = {}));
-
-(function (ImageSizes) {
-  ImageSizes["Default"] = "default";
-  ImageSizes["ExtraExtraSmall"] = "xxsmall";
-  ImageSizes["ExtraSmall"] = "xsmall";
-  ImageSizes["Small"] = "small";
-  ImageSizes["Medium"] = "medium";
-  ImageSizes["Large"] = "large";
-})(exports.ImageSizes || (exports.ImageSizes = {}));
-
-(function (ImageTypes) {
-  ImageTypes["Default"] = "default";
-  ImageTypes["Circle"] = "circle";
-})(exports.ImageTypes || (exports.ImageTypes = {}));
-
-var _excluded$z = ["additionalWrapperStyles", "className", "children", "aspectRatio", "size"],
+var _excluded$A = ["additionalWrapperStyles", "className", "children", "aspectRatio", "size"],
     _excluded2 = ["additionalFigureStyles", "additionalImageStyles", "additionalWrapperStyles", "alt", "aspectRatio", "caption", "className", "component", "credit", "imageType", "size", "src"];
 var ImageWrapper = /*#__PURE__*/react.chakra(function (props) {
   var _props$additionalWrap = props.additionalWrapperStyles,
@@ -1706,10 +1576,10 @@ var ImageWrapper = /*#__PURE__*/react.chakra(function (props) {
       className = _props$className === void 0 ? "" : _props$className,
       children = props.children,
       _props$aspectRatio = props.aspectRatio,
-      aspectRatio = _props$aspectRatio === void 0 ? exports.ImageRatios.Original : _props$aspectRatio,
+      aspectRatio = _props$aspectRatio === void 0 ? "original" : _props$aspectRatio,
       _props$size = props.size,
-      size = _props$size === void 0 ? exports.ImageSizes.Default : _props$size,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$z);
+      size = _props$size === void 0 ? "default" : _props$size,
+      rest = _objectWithoutPropertiesLoose(props, _excluded$A);
 
   var styles = react.useMultiStyleConfig("CustomImageWrapper", {
     ratio: aspectRatio,
@@ -1732,20 +1602,20 @@ var Image = /*#__PURE__*/react.chakra(function (props) {
       additionalWrapperStyles = _props$additionalWrap2 === void 0 ? {} : _props$additionalWrap2,
       alt = props.alt,
       _props$aspectRatio2 = props.aspectRatio,
-      aspectRatio = _props$aspectRatio2 === void 0 ? exports.ImageRatios.Original : _props$aspectRatio2,
+      aspectRatio = _props$aspectRatio2 === void 0 ? "original" : _props$aspectRatio2,
       caption = props.caption,
       _props$className2 = props.className,
       className = _props$className2 === void 0 ? "" : _props$className2,
       component = props.component,
       credit = props.credit,
       _props$imageType = props.imageType,
-      imageType = _props$imageType === void 0 ? exports.ImageTypes.Default : _props$imageType,
+      imageType = _props$imageType === void 0 ? "default" : _props$imageType,
       _props$size2 = props.size,
-      size = _props$size2 === void 0 ? exports.ImageSizes.Default : _props$size2,
+      size = _props$size2 === void 0 ? "default" : _props$size2,
       src = props.src,
       rest = _objectWithoutPropertiesLoose(props, _excluded2);
 
-  var useImageWrapper = aspectRatio !== exports.ImageRatios.Original;
+  var useImageWrapper = aspectRatio !== "original";
   var styles = react.useMultiStyleConfig("CustomImage", {
     variant: imageType,
     size: size
@@ -1780,39 +1650,7 @@ var Image = /*#__PURE__*/react.chakra(function (props) {
   }, credit))) : finalImage;
 });
 
-/**
- * React hook used to get the window size on device resizing.
- * Based on https://usehooks-typescript.com/react-hook/use-window-size
- */
-
-function useWindowSize() {
-  var _React$useState = React__default.useState({
-    width: 0,
-    height: 0
-  }),
-      windowSize = _React$useState[0],
-      setWindowSize = _React$useState[1];
-
-  React__default.useEffect(function () {
-    var handler = function handler() {
-      setWindowSize({
-        width: window.innerWidth,
-        height: window.innerHeight
-      });
-    }; // Set size at the first client-side load
-
-
-    handler();
-    window.addEventListener("resize", handler); // Remove event listener on cleanup
-
-    return function () {
-      window.removeEventListener("resize", handler);
-    };
-  }, []);
-  return windowSize;
-}
-
-var _excluded$A = ["children"],
+var _excluded$B = ["children"],
     _excluded2$1 = ["bottomBorder", "children", "isCentered", "layout", "topBorder"],
     _excluded3 = ["backgroundColor", "children", "className", "foregroundColor", "id", "imageProps", "isAlignedRightActions", "isBordered", "isCentered", "layout", "mainActionLink"];
 /**
@@ -1857,12 +1695,12 @@ var CardHeading = /*#__PURE__*/react.chakra(Heading); // CardContent child-compo
 
 var CardContent = /*#__PURE__*/react.chakra(function (props) {
   var children = props.children,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$A);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$B);
 
   var styles = react.useStyleConfig("CardContent");
-  return children && React.createElement(react.Box, Object.assign({
+  return children ? React.createElement(react.Box, Object.assign({
     __css: styles
-  }, rest), children);
+  }, rest), children) : null;
 }); // CardActions child-component
 
 var CardActions = /*#__PURE__*/react.chakra(function (props) {
@@ -1879,9 +1717,9 @@ var CardActions = /*#__PURE__*/react.chakra(function (props) {
     layout: layout,
     topBorder: topBorder
   });
-  return children && React.createElement(react.Box, Object.assign({
+  return children ? React.createElement(react.Box, Object.assign({
     __css: styles
-  }, rest), children);
+  }, rest), children) : null;
 });
 /**
  * If `mainActionLink` is passed, then this adds Chakra's `LinkBox` wrapper
@@ -1920,12 +1758,12 @@ var Card = /*#__PURE__*/react.chakra(function (props) {
       _props$imageProps = props.imageProps,
       imageProps = _props$imageProps === void 0 ? {
     alt: "",
-    aspectRatio: exports.ImageRatios.Square,
+    aspectRatio: "square",
     caption: undefined,
     component: undefined,
     credit: undefined,
     isAtEnd: false,
-    size: exports.ImageSizes.Default,
+    size: "default",
     src: ""
   } : _props$imageProps,
       _props$isAlignedRight = props.isAlignedRightActions,
@@ -1934,34 +1772,34 @@ var Card = /*#__PURE__*/react.chakra(function (props) {
       _props$isCentered = props.isCentered,
       isCentered = _props$isCentered === void 0 ? false : _props$isCentered,
       _props$layout = props.layout,
-      layout = _props$layout === void 0 ? exports.LayoutTypes.Column : _props$layout,
+      layout = _props$layout === void 0 ? "column" : _props$layout,
       mainActionLink = props.mainActionLink,
       rest = _objectWithoutPropertiesLoose(props, _excluded3);
 
   var hasImage = imageProps.src || imageProps.component;
 
-  var _React$useState = React.useState(imageProps.size),
+  var _React$useState = React.useState(imageProps.size || "default"),
       finalImageSize = _React$useState[0],
       setFinalImageSize = _React$useState[1];
 
-  var finalImageAspectRatio = imageProps.component ? exports.ImageRatios.Original : imageProps.aspectRatio;
+  var finalImageAspectRatio = imageProps.component ? "original" : imageProps.aspectRatio;
   var customColors = {};
   var cardContents = [];
   var cardRightContents = [];
   var windowDimensions = useWindowSize();
   var cardHeadingCount = 0;
 
-  if (imageProps.component && imageProps.aspectRatio !== exports.ImageRatios.Square) {
+  if (imageProps.component && imageProps.aspectRatio !== "square") {
     console.warn("NYPL Reservoir Card: Both the `imageProps.component` and `imageProps.aspectRatio` " + "props were set but `imageProps.aspectRatio` will be ignored in favor " + "of the aspect ratio on `imageProps.component` prop.");
   } // The `Card`'s image should always display as 100% width on mobile. To
-  // achieve this, we set the size to `ImageSizes.Default` only when the
+  // achieve this, we set the size to `"default"` only when the
   // viewport is less than "600px". Otherwise, we set the size to
   // the value passed in via `imageSize`.
 
 
   React.useEffect(function () {
     if (windowDimensions.width < 600) {
-      setFinalImageSize(exports.ImageSizes.Default);
+      setFinalImageSize("default");
     } else {
       setFinalImageSize(imageProps.size);
     }
@@ -1989,11 +1827,11 @@ var Card = /*#__PURE__*/react.chakra(function (props) {
         mainActionLink: mainActionLink
       }, child.props.children) : child.props.children;
       var elem = React.cloneElement(child, {
-        additionalStyles: _extends({}, styles.heading, child.props.additionalStyles),
         key: key,
         // Override the child text with the potential `CardLinkOverlay`.
         children: newChildren,
-        layout: layout
+        layout: layout,
+        __css: styles.heading
       });
       cardContents.push(elem);
       cardHeadingCount++;
@@ -2012,7 +1850,7 @@ var Card = /*#__PURE__*/react.chakra(function (props) {
       // `CardContent` component when in the row layout.
 
 
-      if (isAlignedRightActions && layout === exports.LayoutTypes.Row) {
+      if (isAlignedRightActions && layout === "row") {
         cardRightContents.push(_elem2);
       } else {
         cardContents.push(_elem2);
@@ -2044,15 +1882,13 @@ var Card = /*#__PURE__*/react.chakra(function (props) {
   }, cardRightContents) : null));
 });
 
-var _excluded$B = ["additionalStyles", "ariaAtomic", "ariaLive", "className", "id", "isInvalid", "text"];
+var _excluded$C = ["ariaAtomic", "ariaLive", "className", "id", "isInvalid", "text"];
 /**
  * Helper or error text for forms components.
  */
 
 var HelperErrorText = /*#__PURE__*/react.chakra(function (_ref) {
-  var _ref$additionalStyles = _ref.additionalStyles,
-      additionalStyles = _ref$additionalStyles === void 0 ? {} : _ref$additionalStyles,
-      _ref$ariaAtomic = _ref.ariaAtomic,
+  var _ref$ariaAtomic = _ref.ariaAtomic,
       ariaAtomic = _ref$ariaAtomic === void 0 ? true : _ref$ariaAtomic,
       _ref$ariaLive = _ref.ariaLive,
       ariaLive = _ref$ariaLive === void 0 ? "polite" : _ref$ariaLive,
@@ -2062,7 +1898,7 @@ var HelperErrorText = /*#__PURE__*/react.chakra(function (_ref) {
       _ref$isInvalid = _ref.isInvalid,
       isInvalid = _ref$isInvalid === void 0 ? false : _ref$isInvalid,
       text = _ref.text,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$B);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$C);
 
   // Only announce the text in the invalid state.
   var announceAriaLive = isInvalid;
@@ -2070,15 +1906,13 @@ var HelperErrorText = /*#__PURE__*/react.chakra(function (_ref) {
     isInvalid: isInvalid
   });
 
-  var finalStyles = _extends({}, styles, additionalStyles);
-
   var props = _extends({
     "aria-atomic": ariaAtomic,
     "aria-live": announceAriaLive ? ariaLive : "off",
     className: className,
     "data-isinvalid": isInvalid,
     id: id,
-    __css: finalStyles
+    __css: styles
   }, rest);
 
   return typeof text === "string" ? React.createElement(react.Box, Object.assign({}, props, {
@@ -2088,7 +1922,7 @@ var HelperErrorText = /*#__PURE__*/react.chakra(function (_ref) {
   })) : React.createElement(react.Box, Object.assign({}, props), text);
 });
 
-var _excluded$C = ["isIndeterminate", "isChecked"],
+var _excluded$D = ["isIndeterminate", "isChecked"],
     _excluded2$2 = ["className", "invalidText", "helperText", "id", "isChecked", "isDisabled", "isIndeterminate", "isInvalid", "isRequired", "labelText", "name", "showHelperInvalidText", "showLabel", "value"];
 var onChangeDefault = function onChangeDefault() {
   return;
@@ -2098,7 +1932,7 @@ function CheckboxIcon(props) {
   // We don't need the `isIndeterminate` or `isChecked` props but it
   // causes rendering issues on the SVG element, so we remove them
   // before passing all the props to the `Icon` component.
-  var rest = _objectWithoutPropertiesLoose(props, _excluded$C);
+  var rest = _objectWithoutPropertiesLoose(props, _excluded$D);
 
   return React.createElement(react.Icon, Object.assign({
     viewBox: "0 0 24 24"
@@ -2172,14 +2006,14 @@ var Checkbox = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function
     alignItems: "flex-start",
     __css: styles
   }, ariaAttributes, rest), showLabel && labelText), footnote && showHelperInvalidText && React.createElement(HelperErrorText, {
-    additionalStyles: styles.helperErrorText,
     id: id + "-helperText",
     isInvalid: isInvalid,
-    text: footnote
+    text: footnote,
+    __css: styles.helperErrorText
   }));
 }));
 
-var _excluded$D = ["children", "className", "id", "isLegendHidden", "isRequired", "legendText", "showRequiredLabel"];
+var _excluded$E = ["children", "className", "id", "isLegendHidden", "isRequired", "legendText", "showRequiredLabel"];
 /**
  * A wrapper component that renders a `fieldset` element along with a `legend`
  * element as its first child. Commonly used to wrap form components.
@@ -2196,7 +2030,7 @@ var Fieldset = /*#__PURE__*/react.chakra(function (_ref) {
       legendText = _ref.legendText,
       _ref$showRequiredLabe = _ref.showRequiredLabel,
       showRequiredLabel = _ref$showRequiredLabe === void 0 ? true : _ref$showRequiredLabe,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$D);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$E);
 
   var styles = react.useMultiStyleConfig("Fieldset", {
     isLegendHidden: isLegendHidden
@@ -2348,7 +2182,7 @@ var reservoirSpacingTokens = {
 };
 var spacing = /*#__PURE__*/_extends({}, chakraSpacingTokens, reservoirSpacingTokens);
 
-var _excluded$E = ["children", "defaultValue", "helperText", "id", "invalidText", "isDisabled", "isFullWidth", "isInvalid", "isRequired", "labelText", "layout", "name", "onChange", "showHelperInvalidText", "showLabel", "showRequiredLabel"];
+var _excluded$F = ["children", "defaultValue", "helperText", "id", "invalidText", "isDisabled", "isFullWidth", "isInvalid", "isRequired", "labelText", "layout", "name", "onChange", "showHelperInvalidText", "showLabel", "showRequiredLabel"];
 /**
  * Wrapper component to wrap `Checkbox` components. Can be displayed in a
  * column or in a row. The `CheckboxGroup` component renders all the necessary
@@ -2374,7 +2208,7 @@ var CheckboxGroup = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(fun
       isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
       labelText = props.labelText,
       _props$layout = props.layout,
-      layout = _props$layout === void 0 ? exports.LayoutTypes.Column : _props$layout,
+      layout = _props$layout === void 0 ? "column" : _props$layout,
       name = props.name,
       onChange = props.onChange,
       _props$showHelperInva = props.showHelperInvalidText,
@@ -2383,11 +2217,11 @@ var CheckboxGroup = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(fun
       showLabel = _props$showLabel === void 0 ? true : _props$showLabel,
       _props$showRequiredLa = props.showRequiredLabel,
       showRequiredLabel = _props$showRequiredLa === void 0 ? true : _props$showRequiredLa,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$E);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$F);
 
   var footnote = isInvalid ? invalidText : helperText;
-  var spacingProp = layout === exports.LayoutTypes.Column ? spacing.input.group["default"].vstack : spacing.input.group["default"].hstack;
   var newChildren = [];
+  var spacingProp = layout === "column" ? spacing.input.group["default"].vstack : spacing.input.group["default"].hstack;
   var checkboxProps = defaultValue && onChange ? {
     defaultValue: defaultValue,
     onChange: onChange
@@ -2434,41 +2268,25 @@ var CheckboxGroup = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(fun
     direction: [layout],
     spacing: spacingProp,
     ref: ref,
-    "aria-label": !showLabel ? labelText : null,
+    "aria-label": !showLabel ? labelText : undefined,
     sx: styles.stack
   }, newChildren)), footnote && showHelperInvalidText && React.createElement(HelperErrorText, {
-    additionalStyles: styles.helperErrorText,
     id: id + "-helperErrorText",
     isInvalid: isInvalid,
-    text: footnote
+    text: footnote,
+    __css: styles.helperErrorText
   }));
 }));
 
-(function (DatePickerTypes) {
-  DatePickerTypes["Full"] = "full";
-  DatePickerTypes["Month"] = "month";
-  DatePickerTypes["Year"] = "year";
-})(exports.DatePickerTypes || (exports.DatePickerTypes = {}));
-
-(function (GridGaps) {
-  GridGaps["ExtraExtraSmall"] = "grid.xxs";
-  GridGaps["ExtraSmall"] = "grid.xs";
-  GridGaps["Small"] = "grid.s";
-  GridGaps["Medium"] = "grid.m";
-  GridGaps["Large"] = "grid.l";
-  GridGaps["ExtraLarge"] = "grid.xl";
-  GridGaps["ExtraExtraLarge"] = "grid.xxl";
-})(exports.GridGaps || (exports.GridGaps = {}));
-
-var _excluded$F = ["children", "columns", "className", "gap", "id"];
+var _excluded$G = ["children", "columns", "className", "gap", "id"];
 var SimpleGrid = /*#__PURE__*/react.chakra(function (props) {
   var children = props.children,
       columns = props.columns,
       className = props.className,
       _props$gap = props.gap,
-      gap = _props$gap === void 0 ? exports.GridGaps.Large : _props$gap,
+      gap = _props$gap === void 0 ? "grid.l" : _props$gap,
       id = props.id,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$F);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$G);
 
   var responsiveCols = columns ? {
     base: 1,
@@ -2490,7 +2308,7 @@ var SimpleGrid = /*#__PURE__*/react.chakra(function (props) {
   }
 });
 
-var _excluded$G = ["children", "className", "gap", "id"],
+var _excluded$H = ["children", "className", "gap", "id"],
     _excluded2$3 = ["children", "className", "gap", "id"],
     _excluded3$1 = ["action", "children", "className", "gap", "id", "method", "onSubmit"];
 /** FormRow child-component */
@@ -2500,7 +2318,7 @@ var FormRow = /*#__PURE__*/react.chakra(function (props) {
       className = props.className,
       gap = props.gap,
       id = props.id,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$G);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$H);
 
   var count = React.Children.count(children);
   var alteredChildren = React.Children.map(children, function (child, i) {
@@ -2545,7 +2363,7 @@ var Form = /*#__PURE__*/react.chakra(function (props) {
       children = props.children,
       className = props.className,
       _props$gap = props.gap,
-      gap = _props$gap === void 0 ? exports.GridGaps.Large : _props$gap,
+      gap = _props$gap === void 0 ? "grid.l" : _props$gap,
       id = props.id,
       method = props.method,
       onSubmit = props.onSubmit,
@@ -2580,60 +2398,7 @@ var Form = /*#__PURE__*/react.chakra(function (props) {
   }
 });
 
-// HTML Input types as defined by MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
-
-(function (TextInputTypes) {
-  TextInputTypes["email"] = "email";
-  TextInputTypes["hidden"] = "hidden"; // eslint-disable-next-line id-blacklist
-
-  TextInputTypes["number"] = "number";
-  TextInputTypes["password"] = "password";
-  TextInputTypes["text"] = "text";
-  TextInputTypes["textarea"] = "textarea";
-  TextInputTypes["tel"] = "tel";
-  TextInputTypes["url"] = "url";
-})(exports.TextInputTypes || (exports.TextInputTypes = {})); // Only used internally in `TextInput`.
-
-
-var TextInputFormats;
-
-(function (TextInputFormats) {
-  TextInputFormats["email"] = "jdoe@domain.com";
-  TextInputFormats["hidden"] = ""; // eslint-disable-next-line id-blacklist
-
-  TextInputFormats["number"] = "";
-  TextInputFormats["password"] = "";
-  TextInputFormats["text"] = "";
-  TextInputFormats["tel"] = "(123) 123-1234";
-  TextInputFormats["textarea"] = "";
-  TextInputFormats["url"] = "https://domain.com";
-})(TextInputFormats || (TextInputFormats = {})); // Only used internally in `TextInput` and `SearchBar`.
-
-
-var TextInputVariants;
-
-(function (TextInputVariants) {
-  TextInputVariants["Default"] = "default";
-  TextInputVariants["SearchBar"] = "searchBar";
-  TextInputVariants["SearchBarSelect"] = "searchBarSelect";
-})(TextInputVariants || (TextInputVariants = {}));
-/*
-export enum TextInputPatterns {
-  // eslint-disable-next-line prettier/prettier
-  email = "[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,}$",
-  hidden = "",
-  // eslint-disable-next-line id-blacklist
-  number = "",
-  password = "",
-  text = "",
-  // eslint-disable-next-line prettier/prettier
-  tel = "([0-9]{3}) [0-9]{3}-[0-9]{4}",
-  textarea = "textarea",
-  url = "https?://.+",
-}
-*/
-
-var _excluded$H = ["children", "className", "htmlFor", "id", "isInlined", "isRequired"];
+var _excluded$I = ["children", "className", "htmlFor", "id", "isInlined", "isRequired"];
 /**
  * A label for form inputs. It should never be used alone.
  */
@@ -2647,7 +2412,7 @@ var Label = /*#__PURE__*/react.chakra(function (props) {
       isInlined = _props$isInlined === void 0 ? false : _props$isInlined,
       _props$isRequired = props.isRequired,
       isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$H);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$I);
 
   var styles = react.useStyleConfig("Label", {
     isInlined: isInlined
@@ -2666,7 +2431,17 @@ var Label = /*#__PURE__*/react.chakra(function (props) {
   }, rest), children, isRequired && React.createElement("span", null, " (Required)"));
 });
 
-var _excluded$I = ["additionalStyles", "attributes", "className", "defaultValue", "helperText", "id", "invalidText", "isDisabled", "isInvalid", "isRequired", "labelText", "name", "onChange", "placeholder", "showHelperInvalidText", "showLabel", "showRequiredLabel", "step", "textInputType", "type", "value"];
+var _excluded$J = ["className", "defaultValue", "helperText", "id", "invalidText", "isDisabled", "isInvalid", "isRequired", "labelText", "max", "maxLength", "min", "name", "onChange", "onClick", "onFocus", "placeholder", "showHelperInvalidText", "showLabel", "showRequiredLabel", "step", "textInputType", "type", "value"];
+
+var TextInputFormats = {
+  email: "jdoe@domain.com",
+  hidden: "",
+  password: "",
+  text: "",
+  tel: "(123) 123-1234",
+  textarea: "",
+  url: "https://domain.com"
+};
 /**
  * Renders either an `input` element with a specified type or a `textarea`
  * element. All types will render an accessible `Label` component and an
@@ -2674,11 +2449,7 @@ var _excluded$I = ["additionalStyles", "attributes", "className", "defaultValue"
  */
 
 var TextInput = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _props$additionalStyl = props.additionalStyles,
-      additionalStyles = _props$additionalStyl === void 0 ? {} : _props$additionalStyl,
-      _props$attributes = props.attributes,
-      attributes = _props$attributes === void 0 ? {} : _props$attributes,
-      className = props.className,
+  var className = props.className,
       defaultValue = props.defaultValue,
       helperText = props.helperText,
       id = props.id,
@@ -2690,8 +2461,13 @@ var TextInput = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
       _props$isRequired = props.isRequired,
       isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
       labelText = props.labelText,
+      max = props.max,
+      maxLength = props.maxLength,
+      min = props.min,
       name = props.name,
       onChange = props.onChange,
+      onClick = props.onClick,
+      onFocus = props.onFocus,
       placeholder = props.placeholder,
       _props$showHelperInva = props.showHelperInvalidText,
       showHelperInvalidText = _props$showHelperInva === void 0 ? true : _props$showHelperInva,
@@ -2702,22 +2478,20 @@ var TextInput = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
       _props$step = props.step,
       step = _props$step === void 0 ? 1 : _props$step,
       _props$textInputType = props.textInputType,
-      textInputType = _props$textInputType === void 0 ? TextInputVariants.Default : _props$textInputType,
+      textInputType = _props$textInputType === void 0 ? "default" : _props$textInputType,
       _props$type = props.type,
-      type = _props$type === void 0 ? exports.TextInputTypes.text : _props$type,
+      type = _props$type === void 0 ? "text" : _props$type,
       value = props.value,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$I);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$J);
 
   var styles = react.useMultiStyleConfig("TextInput", {
     variant: textInputType
   });
-
-  var finalStyles = _extends({}, styles, additionalStyles);
-
-  var isTextArea = type === exports.TextInputTypes.textarea;
-  var isHidden = type === exports.TextInputTypes.hidden;
+  var isTextArea = type === "textarea";
+  var isHidden = type === "hidden";
   var finalInvalidText = invalidText ? invalidText : "There is an error related to this field.";
   var footnote = isInvalid ? finalInvalidText : helperText;
+  var ariaAttributes = {};
   var fieldOutput;
   var options;
 
@@ -2726,13 +2500,13 @@ var TextInput = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
   }
 
   if (!showLabel) {
-    attributes["aria-label"] = labelText && footnote ? labelText + " - " + footnote : labelText;
+    ariaAttributes["aria-label"] = labelText && footnote ? labelText + " - " + footnote : labelText;
   } else if (helperText) {
-    attributes["aria-describedby"] = id + "-helperText";
+    ariaAttributes["aria-describedby"] = id + "-helperText";
   }
 
-  if (type === exports.TextInputTypes.tel || type === exports.TextInputTypes.url || type === exports.TextInputTypes.email) {
-    var example = TextInputFormats[type];
+  if (type === "tel" || type === "url" || type === "email") {
+    var example = TextInputFormats[type] || "";
     footnote = React.createElement(React.Fragment, null, "Ex: ", example, React.createElement("br", null), footnote);
   } // When the type is "hidden", the input element needs fewer attributes.
 
@@ -2750,13 +2524,18 @@ var TextInput = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
     isDisabled: isDisabled,
     isRequired: isRequired,
     isInvalid: isInvalid,
-    placeholder: placeholder,
+    max: max,
+    maxLength: maxLength,
+    min: min,
     name: name,
     onChange: onChange,
+    onClick: onClick,
+    onFocus: onFocus,
+    placeholder: placeholder,
     ref: ref,
     // The `step` attribute is useful for the number type.
-    step: type === exports.TextInputTypes.number ? step : null
-  }, attributes); // For `input` and `textarea`, all attributes are the same but `input`
+    step: type === "number" ? step : null
+  }, ariaAttributes, rest); // For `input` and `textarea`, all attributes are the same but `input`
   // also needs `type` and `value` to render correctly.
 
   if (!isTextArea) {
@@ -2765,16 +2544,16 @@ var TextInput = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
       value: value
     }, options);
     fieldOutput = React.createElement(react.Input, Object.assign({}, options, {
-      __css: finalStyles.input
+      __css: styles.input
     }));
   } else {
     fieldOutput = React.createElement(react.Textarea, Object.assign({}, options, {
-      __css: finalStyles.textarea
+      __css: styles.textarea
     }), value);
   }
 
   return React.createElement(react.Box, Object.assign({
-    __css: finalStyles,
+    __css: styles,
     className: className
   }, rest), labelText && showLabel && !isHidden && React.createElement(Label, {
     htmlFor: id,
@@ -2787,7 +2566,7 @@ var TextInput = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
   }));
 }));
 
-var _excluded$J = ["children", "className", "id", "isDateRange", "isRequired", "labelText", "showLabel", "showRequiredLabel"],
+var _excluded$K = ["children", "className", "id", "isDateRange", "isRequired", "labelText", "showLabel", "showRequiredLabel"],
     _excluded2$4 = ["className", "dateFormat", "dateType", "helperText", "helperTextFrom", "helperTextTo", "id", "initialDate", "initialDateTo", "invalidText", "isDateRange", "isDisabled", "isInvalid", "isRequired", "labelText", "maxDate", "minDate", "nameFrom", "nameTo", "onChange", "refTo", "showHelperInvalidText", "showLabel", "showRequiredLabel"];
 /**
  * A Design System `TextInput` component that is used as the custom input
@@ -2799,17 +2578,15 @@ var _excluded$J = ["children", "className", "id", "isDateRange", "isRequired", "
  */
 
 var CustomTextInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref$additionalStyles = _ref.additionalStyles,
-      additionalStyles = _ref$additionalStyles === void 0 ? {} : _ref$additionalStyles,
-      attributes = _ref.attributes,
-      dsId = _ref.dsId,
-      dsRef = _ref.dsRef,
+  var dsRef = _ref.dsRef,
       helperText = _ref.helperText,
+      id = _ref.id,
       invalidText = _ref.invalidText,
       isDisabled = _ref.isDisabled,
       isInvalid = _ref.isInvalid,
       isRequired = _ref.isRequired,
       labelText = _ref.labelText,
+      name = _ref.name,
       onChange = _ref.onChange,
       onClick = _ref.onClick,
       showLabel = _ref.showLabel,
@@ -2817,26 +2594,24 @@ var CustomTextInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       showRequiredLabel = _ref.showRequiredLabel,
       value = _ref.value;
   return React__default.createElement(TextInput, {
-    id: dsId,
-    showLabel: showLabel,
-    onChange: onChange,
-    value: value,
-    labelText: labelText,
+    helperText: helperText,
+    id: id,
+    invalidText: invalidText,
     isDisabled: isDisabled,
+    isInvalid: isInvalid,
     isRequired: isRequired,
+    labelText: labelText,
+    name: name,
+    onChange: onChange,
+    onClick: onClick,
     showHelperInvalidText: showHelperInvalidText,
+    showLabel: showLabel,
     showRequiredLabel: showRequiredLabel,
-    isInvalid: isInvalid,
-    helperText: helperText,
-    invalidText: invalidText,
+    value: value,
     // Use either the specific prop-based or the `forwardRef` value.
     // `react-datepicker` manipulates the `ref` value so when we
     // want a specific ref, use the `dsRef` prop.
-    ref: dsRef || ref,
-    attributes: _extends({}, attributes, {
-      onClick: onClick
-    }),
-    additionalStyles: additionalStyles
+    ref: dsRef || ref
   });
 });
 /**
@@ -2855,7 +2630,7 @@ var DatePickerWrapper = /*#__PURE__*/react.chakra(function (_ref2) {
       labelText = _ref2.labelText,
       showLabel = _ref2.showLabel,
       showRequiredLabel = _ref2.showRequiredLabel,
-      rest = _objectWithoutPropertiesLoose(_ref2, _excluded$J);
+      rest = _objectWithoutPropertiesLoose(_ref2, _excluded$K);
 
   return React__default.createElement(FormField, Object.assign({
     id: id + "-form-field"
@@ -2885,7 +2660,7 @@ var DateRangeRow = function DateRangeRow(_ref3) {
       children = _ref3.children;
   return isDateRange ? React__default.createElement(FormRow, {
     id: id + "-form-row",
-    gap: exports.GridGaps.ExtraSmall
+    gap: "grid.xs"
   }, children) : React__default.createElement(React__default.Fragment, null, children);
 };
 /**
@@ -2898,7 +2673,7 @@ var DatePicker = /*#__PURE__*/react.chakra( /*#__PURE__*/React__default.forwardR
       _props$dateFormat = props.dateFormat,
       dateFormat = _props$dateFormat === void 0 ? "yyyy-MM-dd" : _props$dateFormat,
       _props$dateType = props.dateType,
-      dateType = _props$dateType === void 0 ? exports.DatePickerTypes.Full : _props$dateType,
+      dateType = _props$dateType === void 0 ? "full" : _props$dateType,
       helperText = props.helperText,
       helperTextFrom = props.helperTextFrom,
       helperTextTo = props.helperTextTo,
@@ -2953,7 +2728,7 @@ var DatePicker = /*#__PURE__*/react.chakra( /*#__PURE__*/React__default.forwardR
 
     setFullDate(_extends({}, fullDate, (_extends2 = {}, _extends2[value] = date, _extends2)));
     onChange && onChange(_extends({}, fullDate, (_extends3 = {}, _extends3[value] = date, _extends3)));
-  }; // How many years to display in the DatePickerTypes.Year option.
+  }; // How many years to display in the "year" option.
 
 
   var yearsToDisplay = 12; // Both `ReactDatePicker` components share some props.
@@ -2973,7 +2748,6 @@ var DatePicker = /*#__PURE__*/react.chakra( /*#__PURE__*/React__default.forwardR
   }; // Both custom `TextInput` components share some props.
 
   var baseCustomTextInputAttrs = {
-    dsId: id + "-start",
     isRequired: isRequired,
     // In the date range type, don't display the "(Required)" text in
     // individual input labels. It'll display in the legend element.
@@ -2986,7 +2760,7 @@ var DatePicker = /*#__PURE__*/react.chakra( /*#__PURE__*/React__default.forwardR
     helperText: isDateRange ? helperTextFrom : helperText,
     showHelperInvalidText: showHelperInvalidText,
     invalidText: invalidText,
-    additionalStyles: finalStyles.subLabels
+    __css: finalStyles.subLabels
   }; // These are attribute objects for the `react-datepicker` package component.
 
   var startDatePickerAttrs = {};
@@ -2996,10 +2770,10 @@ var DatePicker = /*#__PURE__*/react.chakra( /*#__PURE__*/React__default.forwardR
 
   var startLabelText = labelText; // Update the appropriate props for the selected date type to render.
 
-  if (dateType === exports.DatePickerTypes.Month) {
+  if (dateType === "month") {
     baseDatePickerAttrs["showMonthYearPicker"] = true;
     baseDatePickerAttrs.dateFormat = "MM-yyyy";
-  } else if (dateType === exports.DatePickerTypes.Year) {
+  } else if (dateType === "year") {
     baseDatePickerAttrs["showYearPicker"] = true;
     baseDatePickerAttrs["yearItemNumber"] = yearsToDisplay;
     baseDatePickerAttrs.dateFormat = "yyyy";
@@ -3024,7 +2798,6 @@ var DatePicker = /*#__PURE__*/react.chakra( /*#__PURE__*/React__default.forwardR
 
   if (isDateRange) {
     var endCustomTextInputAttrs = _extends({}, baseCustomTextInputAttrs, {
-      dsId: id + "-end",
       helperText: helperTextTo
     }); // These props are used to follow the pattern recommended by
     // the react-datepicker plugin.
@@ -3043,32 +2816,30 @@ var DatePicker = /*#__PURE__*/react.chakra( /*#__PURE__*/React__default.forwardR
     });
     startLabelText = "From";
     endDatePickerElement = React__default.createElement(ReactDatePicker, Object.assign({
-      selected: fullDate.endDate,
+      customInput: React__default.createElement(CustomTextInput, Object.assign({
+        dsRef: refTo,
+        labelText: "To"
+      }, endCustomTextInputAttrs)),
+      id: id + "-end",
+      name: nameTo,
       onChange: function onChange(date) {
         return onChangeDefault(date, "endDate");
       },
-      customInput: React__default.createElement(CustomTextInput, Object.assign({
-        labelText: "To",
-        dsRef: refTo,
-        attributes: {
-          name: nameTo
-        }
-      }, endCustomTextInputAttrs))
+      selected: fullDate.endDate
     }, endDatePickerAttrs));
   }
 
   var startDatePickerElement = React__default.createElement(ReactDatePicker, Object.assign({
-    selected: fullDate.startDate,
+    customInput: React__default.createElement(CustomTextInput, Object.assign({
+      dsRef: ref,
+      labelText: startLabelText
+    }, baseCustomTextInputAttrs)),
+    id: id + "-start",
+    name: nameFrom,
     onChange: function onChange(date) {
       return onChangeDefault(date, "startDate");
     },
-    customInput: React__default.createElement(CustomTextInput, Object.assign({
-      labelText: startLabelText,
-      dsRef: ref,
-      attributes: {
-        name: nameFrom
-      }
-    }, baseCustomTextInputAttrs))
+    selected: fullDate.startDate
   }, startDatePickerAttrs));
   return React__default.createElement(DatePickerWrapper, Object.assign({
     id: id,
@@ -3276,17 +3047,14 @@ var breakpoints = /*#__PURE__*/themeTools.createBreakpoints({
 });
 
 /**
- * Colors taken from "../../styles/01-colors/*.scss"
+ * All colors can be found in Storybook:
+ *   https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/docs/style-guide-colors--page
  *
- * All UI colors can be found in 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 UI colors can be found in Figma:
+ *   https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=47083%3A27674
  *
- * All Brand colors can be found in Storybook:
- *   https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/documentation-style-guide-colors--colors-brand
- * and in Figma:
- *   https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=15454%3A47007
+ * All Brand colors can be found in Figma:
+ *   https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?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
@@ -3862,6 +3630,18 @@ var Button$1 = {
   }
 };
 
+var ButtonGroup$1 = {
+  baseStyle: function baseStyle(_ref) {
+    var buttonWidth = _ref.buttonWidth;
+    return {
+      width: buttonWidth === "default" ? "fit-content" : "100%",
+      button: {
+        flexGrow: buttonWidth === "default" ? undefined : "1"
+      }
+    };
+  }
+};
+
 var imageSizes = {
   xxsmall: {
     flex: {
@@ -3894,8 +3674,8 @@ var imageSizes = {
 
 var getBodyPaddingStyles = function getBodyPaddingStyles(_ref) {
   var hasImage = _ref.hasImage,
-      isBordered = _ref.isBordered,
       imageIsAtEnd = _ref.imageIsAtEnd,
+      isBordered = _ref.isBordered,
       isRow = _ref.isRow;
   var bodyPadding = null;
 
@@ -3930,13 +3710,13 @@ var getBodyPaddingStyles = function getBodyPaddingStyles(_ref) {
 
 var Card$1 = {
   parts: ["actions", "body", "heading"],
-  baseStyle: function baseStyle(props) {
-    var hasImage = props.hasImage,
-        imageIsAtEnd = props.imageIsAtEnd,
-        isBordered = props.isBordered,
-        isCentered = props.isCentered,
-        layout = props.layout,
-        mainActionLink = props.mainActionLink;
+  baseStyle: function baseStyle(_ref2) {
+    var hasImage = _ref2.hasImage,
+        imageIsAtEnd = _ref2.imageIsAtEnd,
+        isBordered = _ref2.isBordered,
+        isCentered = _ref2.isCentered,
+        layout = _ref2.layout,
+        mainActionLink = _ref2.mainActionLink;
     var isRow = layout === "row";
     var layoutStyles = isRow ? {
       display: "flex",
@@ -3998,11 +3778,11 @@ var Card$1 = {
   }
 };
 var CardActions$1 = {
-  baseStyle: function baseStyle(props) {
-    var bottomBorder = props.bottomBorder,
-        isCentered = props.isCentered,
-        layout = props.layout,
-        topBorder = props.topBorder;
+  baseStyle: function baseStyle(_ref3) {
+    var bottomBorder = _ref3.bottomBorder,
+        isCentered = _ref3.isCentered,
+        layout = _ref3.layout,
+        topBorder = _ref3.topBorder;
     var justifyContent = null; // Only center in the column layout.
 
     if (layout === "row") {
@@ -4041,13 +3821,13 @@ var CardContent$1 = {
   }
 };
 var CardImage$1 = {
-  baseStyle: function baseStyle(_ref2) {
-    var imageIsAtEnd = _ref2.imageIsAtEnd,
-        isCentered = _ref2.isCentered,
-        layout = _ref2.layout,
-        size = _ref2.size;
+  baseStyle: function baseStyle(_ref4) {
+    var imageIsAtEnd = _ref4.imageIsAtEnd,
+        isCentered = _ref4.isCentered,
+        layout = _ref4.layout,
+        size = _ref4.size;
     // These sizes are only for the "row" layout.
-    var imageSize = imageSizes[size] || {};
+    var imageSize = size ? imageSizes[size] : {};
     var layoutStyles = layout === "row" ? _extends({
       flex: {
         md: "0 0 225px"
@@ -4279,7 +4059,7 @@ var CustomImage = {
         width: "100%"
       }, imageSizes$1[size]),
       captionWrappers: {
-        marginBottom: "xxs"
+        marginTop: "xxs"
       }
     };
   }
@@ -4333,21 +4113,14 @@ var select = {
 var Select = {
   parts: ["helperText", "inline", "select"],
   baseStyle: function baseStyle(_ref) {
-    var labelPosition = _ref.labelPosition,
-        labelWidth = _ref.labelWidth;
+    var labelPosition = _ref.labelPosition;
     return {
-      marginBottom: "xs",
       // The backgroundColor set to "ui.white" hides the arrow SVG icon when
       // the component is focused. The background is added for dark mode and
       // so we need to add specific selector.
       ".chakra-select__icon-wrapper": {
         zIndex: "9999"
       },
-      helperText: {
-        marginLeft: labelPosition === "inline" ? {
-          md: labelWidth + "px"
-        } : null
-      },
       inline: {
         display: {
           md: "flex"
@@ -4765,7 +4538,7 @@ var campaign = {
     }
   }
 };
-var fiftyfifty = {
+var fiftyFifty = {
   content: /*#__PURE__*/_extends({}, wrapperStyles, {
     alignItems: "center",
     display: "flex",
@@ -4808,7 +4581,7 @@ var Hero = {
     secondaryWhatsOn: secondaryWhatsOn,
     tertiary: tertiary,
     campaign: campaign,
-    fiftyfifty: fiftyfifty
+    fiftyFifty: fiftyFifty
   }
 };
 
@@ -5080,12 +4853,6 @@ var Logo = {
   }
 };
 
-(function (NotificationTypes) {
-  NotificationTypes["Standard"] = "standard";
-  NotificationTypes["Announcement"] = "announcement";
-  NotificationTypes["Warning"] = "warning";
-})(exports.NotificationTypes || (exports.NotificationTypes = {}));
-
 var Notification = {
   parts: ["container", "dismissibleButton", "icon"],
   baseStyle: function baseStyle(_ref) {
@@ -5095,7 +4862,7 @@ var Notification = {
         notificationType = _ref.notificationType;
     var bg = "ui.status.primary";
 
-    if (notificationType === exports.NotificationTypes.Announcement || notificationType === exports.NotificationTypes.Warning) {
+    if (notificationType === "announcement" || notificationType === "warning") {
       bg = "ui.gray.x-light-cool";
     }
 
@@ -5151,7 +4918,7 @@ var NotificationContent = {
       display: "flex",
       justifyContent: "center",
       content: {
-        color: notificationType === exports.NotificationTypes.Warning ? "brand.primary" : "currentColor",
+        color: notificationType === "warning" ? "brand.primary" : "currentColor",
         marginTop: icon ? "xxxs" : "0",
         paddingLeft: alignText ? "calc(var(--nypl-space-m) + var(--nypl-space-s))" : null,
         width: "100%",
@@ -5174,9 +4941,9 @@ var NotificationHeading = {
         notificationType = _ref3.notificationType;
     var color = "ui.black";
 
-    if (notificationType === exports.NotificationTypes.Announcement) {
+    if (notificationType === "announcement") {
       color = "section.research.secondary";
-    } else if (notificationType === exports.NotificationTypes.Warning) {
+    } else if (notificationType === "warning") {
       color = "brand.primary";
     }
 
@@ -5214,16 +4981,6 @@ var Pagination = {
   }
 };
 
-(function (ProgressIndicatorSizes) {
-  ProgressIndicatorSizes["Default"] = "default";
-  ProgressIndicatorSizes["Small"] = "small";
-})(exports.ProgressIndicatorSizes || (exports.ProgressIndicatorSizes = {}));
-
-(function (ProgressIndicatorTypes) {
-  ProgressIndicatorTypes["Circular"] = "circular";
-  ProgressIndicatorTypes["Linear"] = "linear";
-})(exports.ProgressIndicatorTypes || (exports.ProgressIndicatorTypes = {}));
-
 var ProgressIndicator = {
   parts: ["circular", "circularLabel", "linear", "linearContainer", "linearPercentage"],
   baseStyle: function baseStyle(_ref) {
@@ -5235,8 +4992,8 @@ var ProgressIndicator = {
         // Note: we have to target the SVG HTMl elements in order
         // to override the default styles.
         svg: {
-          height: size === exports.ProgressIndicatorSizes.Default ? "48px" : "24px",
-          width: size === exports.ProgressIndicatorSizes.Default ? "48px" : "24px",
+          height: size === "default" ? "48px" : "24px",
+          width: size === "default" ? "48px" : "24px",
           display: "block",
           circle: {
             _first: {
@@ -5264,7 +5021,7 @@ var ProgressIndicator = {
         bg: darkMode ? "ui.gray.dark" : "ui.gray.light-cool",
         height: {
           base: "4px",
-          md: size === exports.ProgressIndicatorSizes.Default ? "8px" : "4px"
+          md: size === "default" ? "8px" : "4px"
         }
       },
       linearContainer: {
@@ -5520,7 +5277,31 @@ var Skeleton = {
   }
 };
 
-// Margins around the static display values.
+var SkipNavigation = {
+  baseStyle: {
+    // Don't display links by default...
+    a: {
+      backgroundColor: "ui.white",
+      height: "1px",
+      left: "-10000px",
+      overflow: "hidden",
+      position: "absolute",
+      top: "auto",
+      width: "1px",
+      // Only display when the user focuses on the links.
+      _focus: {
+        border: "1px solid var(—nypl-colors-ui-gray-dark)",
+        height: "auto",
+        left: "2rem",
+        padding: "var(--nypl-space-inset-extranarrow) var(--nypl-space-inset-narrow)",
+        top: "3rem",
+        width: "auto"
+      }
+    }
+  }
+};
+
+// Margins around the static display values.
 var staticValues = {
   marginTop: "xs",
   marginBottom: "xs",
@@ -5630,7 +5411,7 @@ var baseTHStyles = function baseTHStyles(showRowDividers, columnHeadersTextColor
   }
 
   if (columnHeadersTextColor === void 0) {
-    columnHeadersTextColor = false;
+    columnHeadersTextColor = "";
   }
 
   return {
@@ -6078,13 +5859,17 @@ var variants$2 = {
   }
 };
 var Text = {
-  baseStyle: function baseStyle(props) {
-    var fontWeight = props.isBold ? props.variant === "tag" || props.variant === "mini" ? "medium" : "bold" : null;
-    var fontStyle = props.isItalic ? "italic" : null;
+  baseStyle: function baseStyle(_ref) {
+    var isBold = _ref.isBold,
+        isItalic = _ref.isItalic,
+        noSpace = _ref.noSpace,
+        variant = _ref.variant;
+    var fontWeight = isBold ? variant === "tag" || variant === "mini" ? "medium" : "bold" : null;
+    var fontStyle = isItalic ? "italic" : null;
     return {
       fontStyle: fontStyle,
       fontWeight: fontWeight,
-      marginBottom: props.noSpace ? "0 !important" : null
+      marginBottom: noSpace ? "0 !important" : null
     };
   },
   variants: variants$2
@@ -6152,11 +5937,6 @@ var TextInput$1 = {
   }
 };
 
-(function (ToggleSizes) {
-  ToggleSizes["Default"] = "default";
-  ToggleSizes["Small"] = "small";
-})(exports.ToggleSizes || (exports.ToggleSizes = {}));
-
 var _container, _container2;
 
 var toggleBaseStyle = function toggleBaseStyle(_ref) {
@@ -6168,7 +5948,7 @@ var toggleBaseStyle = function toggleBaseStyle(_ref) {
     width: "fit-content"
   };
   var helperErrorText = {
-    marginLeft: size === exports.ToggleSizes.Default ? "xxl" : "xl",
+    marginLeft: size === "default" ? "xxl" : "xl",
     fontStyle: isDisabled ? "italic" : null
   };
   return {
@@ -6335,7 +6115,8 @@ var theme = /*#__PURE__*/react.extendTheme( /*#__PURE__*/_extends({
   components: /*#__PURE__*/_extends({
     Accordion: Accordion$1,
     Breadcrumb: Breadcrumb,
-    Button: Button$1
+    Button: Button$1,
+    ButtonGroup: ButtonGroup$1
   }, Card$2, {
     Checkbox: Checkbox$1,
     CheckboxGroup: CheckboxGroup$1,
@@ -6362,6 +6143,7 @@ var theme = /*#__PURE__*/react.extendTheme( /*#__PURE__*/_extends({
     SearchBar: SearchBar,
     Skeleton: Skeleton,
     SkeletonLoader: SkeletonLoader,
+    SkipNavigation: SkipNavigation,
     CustomSlider: CustomSlider,
     StatusBadge: StatusBadge,
     StructuredContent: StructuredContent,
@@ -6387,129 +6169,101 @@ var DSProvider = function DSProvider(_ref) {
   }, children);
 };
 
-(function (HeroTypes) {
-  HeroTypes["Primary"] = "primary";
-  HeroTypes["Secondary"] = "secondary";
-  HeroTypes["SecondaryBooksAndMore"] = "secondaryBooksAndMore";
-  HeroTypes["SecondaryLocations"] = "secondaryLocations";
-  HeroTypes["SecondaryResearch"] = "secondaryResearch";
-  HeroTypes["SecondaryWhatsOn"] = "secondaryWhatsOn";
-  HeroTypes["Tertiary"] = "tertiary";
-  HeroTypes["Campaign"] = "campaign";
-  HeroTypes["FiftyFifty"] = "fiftyfifty";
-})(exports.HeroTypes || (exports.HeroTypes = {})); // Only used for internal purposes.
-
-
-var HeroSecondaryTypes = [exports.HeroTypes.Secondary, exports.HeroTypes.SecondaryBooksAndMore, exports.HeroTypes.SecondaryLocations, exports.HeroTypes.SecondaryResearch, exports.HeroTypes.SecondaryWhatsOn];
-
-var _excluded$K = ["backgroundColor", "backgroundImageSrc", "foregroundColor", "heading", "heroType", "imageAlt", "imageSrc", "locationDetails", "subHeaderText"];
-
-var variantMap = {};
-
-for (var type in exports.HeroTypes) {
-  variantMap[exports.HeroTypes[type]] = exports.HeroTypes[type];
-}
-/**
- * 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$1 = function getVariant(type) {
-  return variantMap[type] || exports.HeroTypes.Primary;
-};
+var _excluded$L = ["backgroundColor", "backgroundImageSrc", "foregroundColor", "heading", "heroType", "imageProps", "locationDetails", "subHeaderText"];
 
+var heroSecondaryTypes = ["secondary", "secondaryBooksAndMore", "secondaryLocations", "secondaryResearch", "secondaryWhatsOn"];
 var Hero$1 = /*#__PURE__*/react.chakra(function (props) {
   var backgroundColor = props.backgroundColor,
       backgroundImageSrc = props.backgroundImageSrc,
       foregroundColor = props.foregroundColor,
       heading = props.heading,
       heroType = props.heroType,
-      imageAlt = props.imageAlt,
-      imageSrc = props.imageSrc,
+      _props$imageProps = props.imageProps,
+      imageProps = _props$imageProps === void 0 ? {
+    alt: "",
+    src: ""
+  } : _props$imageProps,
       locationDetails = props.locationDetails,
       subHeaderText = props.subHeaderText,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$K);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$L);
 
-  var variant = getVariant$1(heroType);
   var styles = react.useMultiStyleConfig("Hero", {
-    variant: variant
+    variant: heroType
   });
   var headingStyles = styles.heading; // We want to add `Hero`-specific styling to the `Heading` component.
 
   var finalHeading = heading && React.cloneElement(heading, {
-    additionalStyles: headingStyles
+    __css: headingStyles
   });
   var backgroundImageStyle = {};
   var contentBoxStyling = {};
 
-  if (imageSrc && !imageAlt) {
-    console.warn("NYPL Reservoir: The \"imageSrc\" prop was passed but the \"imageAlt\" props was not. This will make the rendered image inaccessible.");
+  if (imageProps.src && !imageProps.alt) {
+    console.warn("NYPL Reservoir Hero: The \"imageProps.src\" prop was passed but the \"imageProps.alt\" props was not. This will make the rendered image inaccessible.");
   }
 
-  if (heroType === exports.HeroTypes.Primary) {
+  if (heroType === "primary") {
     if (!backgroundImageSrc) {
-      console.warn("NYPL Reservoir Hero: It is recommended to use the `backgroundImageSrc` " + "prop for the `HeroTypes.Primary` `heroType` variant.");
+      console.warn("NYPL Reservoir Hero: It is recommended to use the `backgroundImageSrc` " + "prop for the `'primary'` `heroType` variant.");
     }
 
-    if (imageAlt && imageSrc) {
-      console.warn("NYPL Reservoir Hero: The `imageSrc` and `imageAlt` props have been " + "passed, but the `HeroTypes.Primary` `heroType` variant will not use it.");
+    if (imageProps.alt && imageProps.src) {
+      console.warn("NYPL Reservoir Hero: The `imageProps.src` and `imageProps.alt` props have been " + "passed, but the `'primary'` `heroType` variant will not use it.");
     }
   } else if (locationDetails) {
-    console.warn("NYPL Reservoir Hero: The `locationDetails` prop should only be used " + "with the `HeroTypes.Primary` `heroType` variant.");
+    console.warn("NYPL Reservoir Hero: The `locationDetails` prop should only be used " + "with the `'primary'` `heroType` variant.");
   }
 
-  if (HeroSecondaryTypes.includes(heroType) && backgroundImageSrc) {
-    console.warn("NYPL Reservoir Hero: The `backgroundImageSrc` prop has been passed, " + "but the `HeroTypes.Secondary` `heroType` variant will not use it.");
+  if (heroSecondaryTypes.includes(heroType) && backgroundImageSrc) {
+    console.warn("NYPL Reservoir Hero: The `backgroundImageSrc` prop has been passed, " + "but the `'secondary'` `heroType` variant will not use it.");
   }
 
-  if (heroType === exports.HeroTypes.Tertiary && (backgroundImageSrc || imageSrc)) {
-    console.warn("NYPL Reservoir Hero: The `HeroTypes.Tertiary` `heroType` variant hero " + "will not use any of the image props.");
+  if (heroType === "tertiary" && (backgroundImageSrc || imageProps.src)) {
+    console.warn("NYPL Reservoir Hero: The `'tertiary'` `heroType` variant hero " + "will not use any of the image props.");
   }
 
-  if (heroType === exports.HeroTypes.Campaign && (!backgroundImageSrc || !imageSrc)) {
-    console.warn("NYPL Reservoir Hero: It is recommended to use both the " + "`backgroundImageSrc` and `imageSrc` props for the " + "`HeroTypes.Campaign` `heroType` variant.");
+  if (heroType === "campaign" && (!backgroundImageSrc || !imageProps.src)) {
+    console.warn("NYPL Reservoir Hero: It is recommended to use both the " + "`backgroundImageSrc` and `imageProps.src` props for the " + "`'campaign'` `heroType` variant.");
   }
 
-  if (heroType === exports.HeroTypes.FiftyFifty && backgroundImageSrc) {
-    console.warn("NYPL Reservoir Hero: The `backgroundImageSrc` prop has been passed, " + "but the `HeroTypes.FiftyFifty` `heroType` variant hero will not use it.");
+  if (heroType === "fiftyFifty" && backgroundImageSrc) {
+    console.warn("NYPL Reservoir Hero: The `backgroundImageSrc` prop has been passed, " + "but the `'fiftyFifty'` `heroType` variant hero will not use it.");
   }
 
-  if (heroType === exports.HeroTypes.Primary) {
+  if (heroType === "primary") {
     backgroundImageStyle = backgroundImageSrc ? {
       backgroundImage: "url(" + backgroundImageSrc + ")"
     } : {};
-  } else if (heroType === exports.HeroTypes.Campaign) {
+  } else if (heroType === "campaign") {
     backgroundImageStyle = backgroundImageSrc ? {
       backgroundImage: "url(" + backgroundImageSrc + ")"
     } : {
       backgroundColor: backgroundColor
     };
-  } else if (heroType === exports.HeroTypes.Tertiary || heroType === exports.HeroTypes.FiftyFifty) {
+  } else if (heroType === "tertiary" || heroType === "fiftyFifty") {
     backgroundImageStyle = {
       backgroundColor: backgroundColor
     };
   }
 
-  if (!HeroSecondaryTypes.includes(heroType)) {
+  if (!heroSecondaryTypes.includes(heroType)) {
     contentBoxStyling = {
       color: foregroundColor,
       backgroundColor: backgroundColor
     };
   } else if (foregroundColor || backgroundColor) {
-    console.warn("NYPL Reservoir Hero: The `foregroundColor` and/or `backgroundColor` " + "props have been passed, but the `HeroTypes.Secondary` `heroType` " + "variant will not use them.");
+    console.warn("NYPL Reservoir Hero: The `foregroundColor` and/or `backgroundColor` " + "props have been passed, but the `'secondary'` `heroType` " + "variant will not use them.");
   }
 
-  var childrenToRender = heroType === exports.HeroTypes.Campaign ? React.createElement(React.Fragment, null, React.createElement(Image, {
-    alt: imageAlt,
-    src: imageSrc
+  var childrenToRender = heroType === "campaign" ? React.createElement(React.Fragment, null, React.createElement(Image, {
+    alt: imageProps.alt,
+    src: imageProps.src
   }), React.createElement(react.Box, {
     __css: styles.interior
-  }, finalHeading, subHeaderText)) : React.createElement(React.Fragment, null, heroType !== exports.HeroTypes.Primary && heroType !== exports.HeroTypes.Tertiary && React.createElement(Image, {
-    alt: imageAlt,
-    src: imageSrc
-  }), finalHeading, heroType === exports.HeroTypes.Tertiary && subHeaderText ? React.createElement("p", null, subHeaderText) : React.createElement(react.Box, {
+  }, finalHeading, subHeaderText)) : React.createElement(React.Fragment, null, heroType !== "primary" && heroType !== "tertiary" && React.createElement(Image, {
+    alt: imageProps.alt,
+    src: imageProps.src
+  }), finalHeading, heroType === "tertiary" && subHeaderText ? React.createElement("p", null, subHeaderText) : React.createElement(react.Box, {
     __css: styles.bodyText
   }, subHeaderText));
   return React.createElement(react.Box, Object.assign({
@@ -6521,18 +6275,18 @@ var Hero$1 = /*#__PURE__*/react.chakra(function (props) {
     "data-testid": "hero-content",
     style: contentBoxStyling,
     __css: styles.content
-  }, childrenToRender), locationDetails);
+  }, childrenToRender));
 }, {
   shouldForwardProp: function shouldForwardProp() {
     return true;
   }
 });
 
-var _excluded$L = ["align", "className"];
+var _excluded$M = ["align", "className"];
 var HorizontalRule$1 = /*#__PURE__*/react.chakra(function (props) {
   var align = props.align,
       className = props.className,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$L);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$M);
 
   var styles = react.useStyleConfig("HorizontalRule", {
     align: align
@@ -6550,13 +6304,7 @@ var HorizontalRule$1 = /*#__PURE__*/react.chakra(function (props) {
   }, rest));
 });
 
-(function (ListTypes) {
-  ListTypes["Ordered"] = "ol";
-  ListTypes["Unordered"] = "ul";
-  ListTypes["Description"] = "dl";
-})(exports.ListTypes || (exports.ListTypes = {}));
-
-var _excluded$M = ["additionalStyles", "children", "className", "id", "inline", "listItems", "noStyling", "title", "type"];
+var _excluded$N = ["children", "className", "id", "inline", "listItems", "noStyling", "title", "type"];
 /**
  * A component that renders list item `li` elements or description item `dt`
  * and `dd` elements based on the `type` prop. Note that the `title` prop will
@@ -6564,9 +6312,7 @@ var _excluded$M = ["additionalStyles", "children", "className", "id", "inline",
  */
 
 var List$1 = /*#__PURE__*/react.chakra(function (props) {
-  var _props$additionalStyl = props.additionalStyles,
-      additionalStyles = _props$additionalStyl === void 0 ? {} : _props$additionalStyl,
-      children = props.children,
+  var children = props.children,
       className = props.className,
       id = props.id,
       _props$inline = props.inline,
@@ -6576,21 +6322,18 @@ var List$1 = /*#__PURE__*/react.chakra(function (props) {
       noStyling = _props$noStyling === void 0 ? false : _props$noStyling,
       title = props.title,
       _props$type = props.type,
-      type = _props$type === void 0 ? exports.ListTypes.Unordered : _props$type,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$M);
+      type = _props$type === void 0 ? "ul" : _props$type,
+      rest = _objectWithoutPropertiesLoose(props, _excluded$N);
 
   var styles = react.useStyleConfig("List", {
     inline: inline,
     noStyling: noStyling,
     variant: type
   });
-
-  var finalStyles = _extends({}, styles, additionalStyles);
-
   var listElement = null; // Either li/dt/dd children elements must be passed or the `listItems`
   // prop must be used.
 
-  if (children && (listItems || (listItems == null ? void 0 : listItems.length) > 0)) {
+  if (children && listItems && (listItems == null ? void 0 : listItems.length) > 0) {
     console.warn("NYPL Reservoir List: Pass in either `<li>`, `<dt>`, or `<dd>` " + "children or use the `listItems` data prop. Do not use both.");
     return null;
   }
@@ -6602,9 +6345,9 @@ var List$1 = /*#__PURE__*/react.chakra(function (props) {
   /**
    * This returns either the `children` elements passed to the `List` component
    * first, otherwise it will check and render the data passed into the
-   * `listItems` props based on the `ListType` type. If it is of type "Unordered"
-   * or "Ordered", it will return `li` elements. Otherwise, it will return a
-   * combination of `dt` and `dd` elements for the "Description" type.
+   * `listItems` props based on the `ListType` type. If it is of type unordered
+   * or ordered, it will return `li` elements. Otherwise, it will return a
+   * combination of `dt` and `dd` elements for the description type.
    */
 
 
@@ -6613,13 +6356,17 @@ var List$1 = /*#__PURE__*/react.chakra(function (props) {
       return children;
     }
 
-    if (listType === exports.ListTypes.Ordered || listType === exports.ListTypes.Unordered) {
+    if (!listItems) {
+      return null;
+    }
+
+    if (listType === "ol" || listType === "ul") {
       return listItems.map(function (item, i) {
         return React.createElement("li", {
           key: i
         }, item);
       });
-    } else if (listType === exports.ListTypes.Description) {
+    } else if (listType === "dl") {
       return listItems.map(function (item, i) {
         return [React.createElement("dt", {
           key: i + "-term"
@@ -6660,90 +6407,32 @@ var List$1 = /*#__PURE__*/react.chakra(function (props) {
     });
   };
 
-  if (type === exports.ListTypes.Ordered || type === exports.ListTypes.Unordered) {
+  if (type === "ol" || type === "ul") {
     checkListChildrenError(type);
     listElement = React.createElement(react.Box, Object.assign({
       as: type,
       id: id,
       className: className,
-      __css: finalStyles
+      __css: styles
     }, rest), listChildrenElms(type));
-  } else if (type === exports.ListTypes.Description) {
+  } else if (type === "dl") {
     checkDescriptionChildrenError();
     listElement = React.createElement(react.Box, Object.assign({
       as: "section",
       id: id,
       className: className,
-      __css: finalStyles
+      __css: styles
     }, rest), title && React.createElement(Heading, {
-      id: id + "-heading",
-      level: exports.HeadingLevels.Two
+      id: id + "-heading"
     }, title), React.createElement("dl", null, listChildrenElms(type)));
   }
 
   return listElement;
 });
 
-(function (LogoColors) {
-  LogoColors["Default"] = "";
-  LogoColors["UiBlack"] = "ui.black";
-  LogoColors["UiWhite"] = "ui.white";
-})(exports.LogoColors || (exports.LogoColors = {}));
-
-(function (LogoSizes) {
-  LogoSizes["Default"] = "default";
-  LogoSizes["ExtraExtraSmall"] = "xxsmall";
-  LogoSizes["ExtraSmall"] = "xsmall";
-  LogoSizes["Small"] = "small";
-  LogoSizes["Medium"] = "medium";
-  LogoSizes["Large"] = "large";
-})(exports.LogoSizes || (exports.LogoSizes = {}));
-
-(function (LogoNames) {
-  LogoNames["BrooklynPublicLibraryBlack"] = "logo_bpl_black";
-  LogoNames["BrooklynPublicLibraryWhite"] = "logo_bpl_white";
-  LogoNames["CleverColor"] = "logo_clever_color";
-  LogoNames["CleverWhite"] = "logo_clever_white";
-  LogoNames["FirstBookColor"] = "logo_firstbook_color";
-  LogoNames["FirstBookColorNegative"] = "logo_firstbook_color_negative";
-  LogoNames["LPAColor"] = "logo_lpa_color";
-  LogoNames["LPABlack"] = "logo_lpa_black";
-  LogoNames["LPAWhite"] = "logo_lpa_white";
-  LogoNames["MyLibraryNYCBlack"] = "logo_mln_black";
-  LogoNames["MyLibraryNYCWhite"] = "logo_mln_white";
-  LogoNames["NYPLBlack"] = "logo_nypl_full_black";
-  LogoNames["NYPLWhite"] = "logo_nypl_full_white";
-  LogoNames["NYPLLionBlack"] = "logo_nypl_lion_black";
-  LogoNames["NYPLLionWhite"] = "logo_nypl_lion_white";
-  LogoNames["OpenEBooksColor"] = "logo_openebooks_color";
-  LogoNames["OpenEBooksNegative"] = "logo_openebooks_negative";
-  LogoNames["OpenEBooksWithTextColor"] = "logo_openebooks_wtext_color";
-  LogoNames["OpenEBooksWithTextNegative"] = "logo_openebooks_wtext_negative";
-  LogoNames["QueensPublicLibraryColor"] = "logo_qpl_color";
-  LogoNames["QueensPublicLibraryBlack"] = "logo_qpl_black";
-  LogoNames["QueensPublicLibraryWhite"] = "logo_qpl_white";
-  LogoNames["QueensPublicLibraryAltBlack"] = "logo_qpl_alt_black";
-  LogoNames["QueensPublicLibraryAltWhite"] = "logo_qpl_alt_white";
-  LogoNames["ReservoirIconColor"] = "logo_reservoir_icon_color";
-  LogoNames["ReservoirVerticalColor"] = "logo_reservoir_vertical_color";
-  LogoNames["SchomburgColor"] = "logo_schomburg_color";
-  LogoNames["SchomburgBlack"] = "logo_schomburg_black";
-  LogoNames["SchomburgWhite"] = "logo_schomburg_white";
-  LogoNames["SchomburgCircleColor"] = "logo_schomburg_circle_color";
-  LogoNames["SchomburgCircleBlack"] = "logo_schomburg_circle_black";
-  LogoNames["SchomburgCircleWhite"] = "logo_schomburg_circle_white";
-  LogoNames["SimplyEColor"] = "logo_simplye_color";
-  LogoNames["SimplyEBlack"] = "logo_simplye_black";
-  LogoNames["SimplyEWhite"] = "logo_simplye_white";
-  LogoNames["SNFLBlack"] = "logo_snfl_black";
-  LogoNames["SNFLWhite"] = "logo_snfl_white";
-  LogoNames["TreasuresColor"] = "logo_treasures_color";
-  LogoNames["TreasuresColorNegative"] = "logo_treasures_color_negative";
-})(exports.LogoNames || (exports.LogoNames = {}));
-
 var _path$r, _path2$b, _path3$7;
 
-var _excluded$N = ["title", "titleId"];
+var _excluded$O = ["title", "titleId"];
 
 function _extends$u() { _extends$u = 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$u.apply(this, arguments); }
 
@@ -6754,7 +6443,7 @@ function _objectWithoutPropertiesLoose$u(source, excluded) { if (source == null)
 function SvgLogoBplBlack(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$t(_ref, _excluded$N);
+      props = _objectWithoutProperties$t(_ref, _excluded$O);
 
   return /*#__PURE__*/React.createElement("svg", _extends$u({
     viewBox: "0 0 328 120",
@@ -6773,7 +6462,7 @@ function SvgLogoBplBlack(_ref) {
 
 var _path$s, _path2$c, _path3$8;
 
-var _excluded$O = ["title", "titleId"];
+var _excluded$P = ["title", "titleId"];
 
 function _extends$v() { _extends$v = 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$v.apply(this, arguments); }
 
@@ -6784,7 +6473,7 @@ function _objectWithoutPropertiesLoose$v(source, excluded) { if (source == null)
 function SvgLogoBplWhite(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$u(_ref, _excluded$O);
+      props = _objectWithoutProperties$u(_ref, _excluded$P);
 
   return /*#__PURE__*/React.createElement("svg", _extends$v({
     viewBox: "0 0 328 120",
@@ -6804,7 +6493,7 @@ function SvgLogoBplWhite(_ref) {
 
 var _path$t;
 
-var _excluded$P = ["title", "titleId"];
+var _excluded$Q = ["title", "titleId"];
 
 function _extends$w() { _extends$w = 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$w.apply(this, arguments); }
 
@@ -6815,7 +6504,7 @@ function _objectWithoutPropertiesLoose$w(source, excluded) { if (source == null)
 function SvgLogoCleverColor(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$v(_ref, _excluded$P);
+      props = _objectWithoutProperties$v(_ref, _excluded$Q);
 
   return /*#__PURE__*/React.createElement("svg", _extends$w({
     viewBox: "0 0 312 88",
@@ -6833,7 +6522,7 @@ function SvgLogoCleverColor(_ref) {
 
 var _path$u;
 
-var _excluded$Q = ["title", "titleId"];
+var _excluded$R = ["title", "titleId"];
 
 function _extends$x() { _extends$x = 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$x.apply(this, arguments); }
 
@@ -6844,7 +6533,7 @@ function _objectWithoutPropertiesLoose$x(source, excluded) { if (source == null)
 function SvgLogoCleverWhite(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$w(_ref, _excluded$Q);
+      props = _objectWithoutProperties$w(_ref, _excluded$R);
 
   return /*#__PURE__*/React.createElement("svg", _extends$x({
     viewBox: "0 0 312 88",
@@ -6862,7 +6551,7 @@ function SvgLogoCleverWhite(_ref) {
 
 var _path$v, _path2$d, _path3$9, _path4$1, _path5, _path6, _path7, _path8, _path9, _path10, _path11, _path12, _path13;
 
-var _excluded$R = ["title", "titleId"];
+var _excluded$S = ["title", "titleId"];
 
 function _extends$y() { _extends$y = 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$y.apply(this, arguments); }
 
@@ -6873,7 +6562,7 @@ function _objectWithoutPropertiesLoose$y(source, excluded) { if (source == null)
 function SvgLogoFirstbookColor(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$x(_ref, _excluded$R);
+      props = _objectWithoutProperties$x(_ref, _excluded$S);
 
   return /*#__PURE__*/React.createElement("svg", _extends$y({
     viewBox: "0 0 172 152",
@@ -6926,7 +6615,7 @@ function SvgLogoFirstbookColor(_ref) {
 
 var _g;
 
-var _excluded$S = ["title", "titleId"];
+var _excluded$T = ["title", "titleId"];
 
 function _extends$z() { _extends$z = 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$z.apply(this, arguments); }
 
@@ -6937,7 +6626,7 @@ function _objectWithoutPropertiesLoose$z(source, excluded) { if (source == null)
 function SvgLogoFirstbookColorNegative(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$y(_ref, _excluded$S);
+      props = _objectWithoutProperties$y(_ref, _excluded$T);
 
   return /*#__PURE__*/React.createElement("svg", _extends$z({
     viewBox: "0 0 170 150",
@@ -6947,7 +6636,7 @@ function SvgLogoFirstbookColorNegative(_ref) {
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, _g || (_g = /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#logo_firstbook_color_negative_svg__clip0_50221_35656)"
+    clipPath: "url(#logo-firstbook-color-negative_svg__clip0_50221_35656)"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M78.283 0h-.425C74.686.183.018 4.8.018 44.05v92.317c0 1.966-.328 3.633 1.634 3.916l74.49 9.384h.931l77.432-8.834c1.961-.233 1.634-1.916 1.634-6.25V46.367C156.074 4.8 81.454.183 78.283 0z",
     fill: "#fff"
@@ -6995,7 +6684,7 @@ function SvgLogoFirstbookColorNegative(_ref) {
 
 var _path$w, _path2$e;
 
-var _excluded$T = ["title", "titleId"];
+var _excluded$U = ["title", "titleId"];
 
 function _extends$A() { _extends$A = 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$A.apply(this, arguments); }
 
@@ -7006,7 +6695,7 @@ function _objectWithoutPropertiesLoose$A(source, excluded) { if (source == null)
 function SvgLogoLpaColor(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$z(_ref, _excluded$T);
+      props = _objectWithoutProperties$z(_ref, _excluded$U);
 
   return /*#__PURE__*/React.createElement("svg", _extends$A({
     viewBox: "0 0 186 74",
@@ -7026,7 +6715,7 @@ function SvgLogoLpaColor(_ref) {
 
 var _path$x;
 
-var _excluded$U = ["title", "titleId"];
+var _excluded$V = ["title", "titleId"];
 
 function _extends$B() { _extends$B = 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$B.apply(this, arguments); }
 
@@ -7037,7 +6726,7 @@ function _objectWithoutPropertiesLoose$B(source, excluded) { if (source == null)
 function SvgLogoLpaBlack(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$A(_ref, _excluded$U);
+      props = _objectWithoutProperties$A(_ref, _excluded$V);
 
   return /*#__PURE__*/React.createElement("svg", _extends$B({
     viewBox: "0 0 186 74",
@@ -7052,7 +6741,7 @@ function SvgLogoLpaBlack(_ref) {
 
 var _path$y;
 
-var _excluded$V = ["title", "titleId"];
+var _excluded$W = ["title", "titleId"];
 
 function _extends$C() { _extends$C = 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$C.apply(this, arguments); }
 
@@ -7063,7 +6752,7 @@ function _objectWithoutPropertiesLoose$C(source, excluded) { if (source == null)
 function SvgLogoLpaWhite(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$B(_ref, _excluded$V);
+      props = _objectWithoutProperties$B(_ref, _excluded$W);
 
   return /*#__PURE__*/React.createElement("svg", _extends$C({
     viewBox: "0 0 186 74",
@@ -7079,7 +6768,7 @@ function SvgLogoLpaWhite(_ref) {
 
 var _g$1;
 
-var _excluded$W = ["title", "titleId"];
+var _excluded$X = ["title", "titleId"];
 
 function _extends$D() { _extends$D = 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$D.apply(this, arguments); }
 
@@ -7090,7 +6779,7 @@ function _objectWithoutPropertiesLoose$D(source, excluded) { if (source == null)
 function SvgLogoMlnBlack(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$C(_ref, _excluded$W);
+      props = _objectWithoutProperties$C(_ref, _excluded$X);
 
   return /*#__PURE__*/React.createElement("svg", _extends$D({
     viewBox: "0 0 300 71",
@@ -7099,7 +6788,7 @@ function SvgLogoMlnBlack(_ref) {
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, _g$1 || (_g$1 = /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#logo_mln_black_svg__clip0_51609_40290)"
+    clipPath: "url(#logo-mln-black_svg__clip0_51609_40290)"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M0 66.115c3.741-4.266 7.607-8.432 11.173-12.871.254-.504.922-1.196 1.053-1.301.44-.354.774-.943 1.274-1.443.5 0 1.346.528 1.904.626 1.391.63.725.269 1.555.63a52.471 52.471 0 0030.7 3.422c15.464-2.48 30.702-6.175 46.065-9.3 9.726-1.983 19.477-3.819 29.528-2.802a32.053 32.053 0 0114.739 4.628 31.83 31.83 0 0110.824 10.97c.25.398.549.794.923 1.365.349-.37.667-.768.948-1.19 6.759-11.21 17.133-15.946 29.928-16.145 12.245-.198 23.992 2.877 35.813 5.431 11.323 2.48 22.67 4.96 34.118 6.795a57.052 57.052 0 0035.439-4.588l14.091 16.839c-5.163 1.091-9.702 2.48-14.291 2.976-17.906 2.48-35.215-.843-52.373-5.53-12.719-3.447-25.389-7.118-38.258-9.92-10.3-2.306-20.725-2.48-30.526 2.678a37.93 37.93 0 00-12.869 11.185l-1.646 2.182c-3.167-3.273-5.96-6.745-9.302-9.572-7.781-6.547-17.109-8.358-27.085-7.688-13.592.917-26.411 5.233-39.355 8.952a201.691 201.691 0 01-38.058 8.184A89.37 89.37 0 012.62 67.9c-.823-.248-1.721-.347-2.494-.52L-1 67l1-.885zM15.57 30h4.991V11.78h.372L27.798 30h3.507l6.865-18.22h.371V30h4.991V3.226h-6.42l-7.385 19.593h-.333L21.99 3.226h-6.42V30zm36.367 7.2c5.047 0 7.738-1.82 9.556-7.219l6.958-20.41h-5.715L58.45 25.046h-.37L53.792 9.57h-5.956L55.017 30l-.185.78c-.39 1.595-1.503 2.337-3.433 2.337-.5 0-1.039-.018-1.41-.055v4.082c.631.037 1.318.055 1.949.055zM72.757 30h17.516v-4.62H78.359V3.226h-5.603V30zM97.582 6.436c1.67 0 3.043-1.336 3.043-3.006A3.029 3.029 0 0097.582.405c-1.67 0-3.061 1.336-3.061 3.025 0 1.67 1.391 3.006 3.061 3.006zM94.855 30h5.417V9.571h-5.418V30zm22.933.315c5.103 0 8.294-3.989 8.294-10.52v-.037c0-6.568-3.117-10.52-8.294-10.52-2.802 0-5.084 1.372-6.123 3.599h-.334V1.76h-5.418V30h5.418v-3.173h.334c1.058 2.208 3.229 3.488 6.123 3.488zm-1.855-4.49c-2.858 0-4.658-2.264-4.658-6.011v-.038c0-3.748 1.819-6.049 4.658-6.049 2.857 0 4.638 2.301 4.638 6.03v.038c0 3.766-1.762 6.03-4.638 6.03zM130.479 30h5.418V18.57c0-2.894 1.949-4.657 5.029-4.657.835 0 1.67.13 2.486.316V9.497a8.113 8.113 0 00-2.022-.26c-2.654 0-4.509 1.3-5.159 3.507h-.334V9.571h-5.418V30zm21.747.315c2.671 0 4.824-1.131 5.863-3.024h.334V30h5.344V16.047c0-4.36-3.062-6.921-8.48-6.921-5.14 0-8.516 2.375-8.943 5.956l-.019.167h5.01l.037-.074c.427-1.206 1.67-1.893 3.618-1.893 2.227 0 3.433 1.002 3.433 2.765v1.688l-4.936.297c-5.084.297-7.923 2.45-7.923 6.123v.037c0 3.711 2.765 6.123 6.662 6.123zm-1.373-6.457v-.037c0-1.484 1.131-2.356 3.451-2.505l4.119-.26v1.504c0 2.152-1.874 3.803-4.379 3.803-1.874 0-3.191-.946-3.191-2.505zM169.073 30h5.418V18.57c0-2.894 1.948-4.657 5.029-4.657.834 0 1.669.13 2.486.316V9.497a8.115 8.115 0 00-2.023-.26c-2.653 0-4.508 1.3-5.158 3.507h-.334V9.571h-5.418V30zm19.353 7.2c5.047 0 7.737-1.82 9.555-7.219l6.958-20.41h-5.714l-4.287 15.475h-.371L190.281 9.57h-5.956L191.506 30l-.186.78c-.389 1.595-1.503 2.337-3.432 2.337-.501 0-1.039-.018-1.41-.055v4.082c.63.037 1.317.055 1.948.055zm20.818-7.2h5.362V12.874h.297L227.298 30h4.639V3.226h-5.363v17.051h-.297L213.92 3.226h-4.676V30zm36.609 0h5.603V19.999l9.333-16.773h-6.067l-5.882 11.262h-.334l-5.901-11.262h-6.067l9.315 16.773V30zm29.279.686c6.457 0 11.04-3.822 11.615-9.425l.019-.204h-5.455l-.038.148c-.593 2.858-2.913 4.732-6.123 4.732-4.23 0-6.846-3.563-6.846-9.315v-.037c0-5.752 2.616-9.296 6.828-9.296 3.191 0 5.585 2.041 6.16 5.047v.13h5.455v-.223c-.519-5.659-5.269-9.704-11.615-9.704-7.775 0-12.562 5.362-12.562 14.046v.037c0 8.684 4.806 14.064 12.562 14.064z"
   }))));
@@ -7107,7 +6796,7 @@ function SvgLogoMlnBlack(_ref) {
 
 var _g$2;
 
-var _excluded$X = ["title", "titleId"];
+var _excluded$Y = ["title", "titleId"];
 
 function _extends$E() { _extends$E = 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$E.apply(this, arguments); }
 
@@ -7118,7 +6807,7 @@ function _objectWithoutPropertiesLoose$E(source, excluded) { if (source == null)
 function SvgLogoMlnWhite(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$D(_ref, _excluded$X);
+      props = _objectWithoutProperties$D(_ref, _excluded$Y);
 
   return /*#__PURE__*/React.createElement("svg", _extends$E({
     viewBox: "0 0 300 71",
@@ -7128,7 +6817,7 @@ function SvgLogoMlnWhite(_ref) {
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, _g$2 || (_g$2 = /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#logo_mln_white_svg__clip0_51609_40290)"
+    clipPath: "url(#logo-mln-white_svg__clip0_51609_40290)"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M0 66.115c3.741-4.266 7.607-8.432 11.173-12.871.254-.504.922-1.196 1.053-1.301.44-.354.774-.943 1.274-1.443.5 0 1.346.528 1.904.626 1.391.63.725.269 1.555.63a52.471 52.471 0 0030.7 3.422c15.464-2.48 30.702-6.175 46.065-9.3 9.726-1.983 19.477-3.819 29.528-2.802a32.053 32.053 0 0114.739 4.628 31.83 31.83 0 0110.824 10.97c.25.398.549.794.923 1.365.349-.37.667-.768.948-1.19 6.759-11.21 17.133-15.946 29.928-16.145 12.245-.198 23.992 2.877 35.813 5.431 11.323 2.48 22.67 4.96 34.118 6.795a57.052 57.052 0 0035.439-4.588l14.091 16.839c-5.163 1.091-9.702 2.48-14.291 2.976-17.906 2.48-35.215-.843-52.373-5.53-12.719-3.447-25.389-7.118-38.258-9.92-10.3-2.306-20.725-2.48-30.526 2.678a37.93 37.93 0 00-12.869 11.185l-1.646 2.182c-3.167-3.273-5.96-6.745-9.302-9.572-7.781-6.547-17.109-8.358-27.085-7.688-13.592.917-26.411 5.233-39.355 8.952a201.691 201.691 0 01-38.058 8.184A89.37 89.37 0 012.62 67.9c-.823-.248-1.721-.347-2.494-.52L-1 67l1-.885zM15.57 30h4.991V11.78h.372L27.798 30h3.507l6.865-18.22h.371V30h4.991V3.226h-6.42l-7.385 19.593h-.333L21.99 3.226h-6.42V30zm36.367 7.2c5.047 0 7.738-1.82 9.556-7.219l6.958-20.41h-5.715L58.45 25.046h-.37L53.792 9.57h-5.956L55.017 30l-.185.78c-.39 1.595-1.503 2.337-3.433 2.337-.5 0-1.039-.018-1.41-.055v4.082c.631.037 1.318.055 1.949.055zM72.757 30h17.516v-4.62H78.359V3.226h-5.603V30zM97.582 6.436c1.67 0 3.043-1.336 3.043-3.006A3.029 3.029 0 0097.582.405c-1.67 0-3.061 1.336-3.061 3.025 0 1.67 1.391 3.006 3.061 3.006zM94.855 30h5.417V9.571h-5.418V30zm22.933.315c5.103 0 8.294-3.989 8.294-10.52v-.037c0-6.568-3.117-10.52-8.294-10.52-2.802 0-5.084 1.372-6.123 3.599h-.334V1.76h-5.418V30h5.418v-3.173h.334c1.058 2.208 3.229 3.488 6.123 3.488zm-1.855-4.49c-2.858 0-4.658-2.264-4.658-6.011v-.038c0-3.748 1.819-6.049 4.658-6.049 2.857 0 4.638 2.301 4.638 6.03v.038c0 3.766-1.762 6.03-4.638 6.03zM130.479 30h5.418V18.57c0-2.894 1.949-4.657 5.029-4.657.835 0 1.67.13 2.486.316V9.497a8.113 8.113 0 00-2.022-.26c-2.654 0-4.509 1.3-5.159 3.507h-.334V9.571h-5.418V30zm21.747.315c2.671 0 4.824-1.131 5.863-3.024h.334V30h5.344V16.047c0-4.36-3.062-6.921-8.48-6.921-5.14 0-8.516 2.375-8.943 5.956l-.019.167h5.01l.037-.074c.427-1.206 1.67-1.893 3.618-1.893 2.227 0 3.433 1.002 3.433 2.765v1.688l-4.936.297c-5.084.297-7.923 2.45-7.923 6.123v.037c0 3.711 2.765 6.123 6.662 6.123zm-1.373-6.457v-.037c0-1.484 1.131-2.356 3.451-2.505l4.119-.26v1.504c0 2.152-1.874 3.803-4.379 3.803-1.874 0-3.191-.946-3.191-2.505zM169.073 30h5.418V18.57c0-2.894 1.948-4.657 5.029-4.657.834 0 1.669.13 2.486.316V9.497a8.115 8.115 0 00-2.023-.26c-2.653 0-4.508 1.3-5.158 3.507h-.334V9.571h-5.418V30zm19.353 7.2c5.047 0 7.737-1.82 9.555-7.219l6.958-20.41h-5.714l-4.287 15.475h-.371L190.281 9.57h-5.956L191.506 30l-.186.78c-.389 1.595-1.503 2.337-3.432 2.337-.501 0-1.039-.018-1.41-.055v4.082c.63.037 1.317.055 1.948.055zm20.818-7.2h5.362V12.874h.297L227.298 30h4.639V3.226h-5.363v17.051h-.297L213.92 3.226h-4.676V30zm36.609 0h5.603V19.999l9.333-16.773h-6.067l-5.882 11.262h-.334l-5.901-11.262h-6.067l9.315 16.773V30zm29.279.686c6.457 0 11.04-3.822 11.615-9.425l.019-.204h-5.455l-.038.148c-.593 2.858-2.913 4.732-6.123 4.732-4.23 0-6.846-3.563-6.846-9.315v-.037c0-5.752 2.616-9.296 6.828-9.296 3.191 0 5.585 2.041 6.16 5.047v.13h5.455v-.223c-.519-5.659-5.269-9.704-11.615-9.704-7.775 0-12.562 5.362-12.562 14.046v.037c0 8.684 4.806 14.064 12.562 14.064z"
   }))));
@@ -7136,7 +6825,7 @@ function SvgLogoMlnWhite(_ref) {
 
 var _path$z, _path2$f, _path3$a, _path4$2, _path5$1, _path6$1, _path7$1;
 
-var _excluded$Y = ["title", "titleId"];
+var _excluded$Z = ["title", "titleId"];
 
 function _extends$F() { _extends$F = 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$F.apply(this, arguments); }
 
@@ -7147,7 +6836,7 @@ function _objectWithoutPropertiesLoose$F(source, excluded) { if (source == null)
 function SvgLogoNyplFullBlack(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$E(_ref, _excluded$Y);
+      props = _objectWithoutProperties$E(_ref, _excluded$Z);
 
   return /*#__PURE__*/React.createElement("svg", _extends$F({
     xmlns: "http://www.w3.org/2000/svg",
@@ -7178,7 +6867,7 @@ function SvgLogoNyplFullBlack(_ref) {
 
 var _g$3, _defs;
 
-var _excluded$Z = ["title", "titleId"];
+var _excluded$_ = ["title", "titleId"];
 
 function _extends$G() { _extends$G = 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$G.apply(this, arguments); }
 
@@ -7189,7 +6878,7 @@ function _objectWithoutPropertiesLoose$G(source, excluded) { if (source == null)
 function SvgLogoNyplFullWhite(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$F(_ref, _excluded$Z);
+      props = _objectWithoutProperties$F(_ref, _excluded$_);
 
   return /*#__PURE__*/React.createElement("svg", _extends$G({
     viewBox: "0 0 967 568",
@@ -7199,7 +6888,7 @@ function SvgLogoNyplFullWhite(_ref) {
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, _g$3 || (_g$3 = /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#logo_nypl_full_white_svg__clip0_1147_1139)",
+    clipPath: "url(#logo-nypl-full-white_svg__clip0_1147_1139)",
     fill: "#fff"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M251.237 291.137c-.698 3.641-2.919 10.677-6.472 11.135-3.576.456-6.155-3.379-8.719-4.818-4.33-2.413-10.451-3.994-16.107-5.865-4.88-1.616-11.571-3.62-13.531-8.276-2.942-6.93 3.928-10.211 8.872-11.733 4.659-1.433 8.068-1.97 14.142-2.254 8.934-.428 17.465.85 20.464 6.466 1.809 3.382 2.361 10.093 1.351 15.345zm82.012 4.469c-15.561-7.617-35.77-11.433-50.479-19.599-11.641-6.455-20.566-17.12-33.097-22.866-12.781-6.259-32.021-12.549-39.377-14.361-25.998-6.396-47.833 1.932-55.409 7.925-14.14 11.176-25.19 29.342-20.878 55.473 1.826 11.048 5.228 20.341 10.629 27.985 21.93 30.97 62.972 41.034 95.488 60.572 1.145.778 2.341.572 3.072-.423 5.461-8.034 9.901-14.498 19.1-18.322 9.339-3.899 24.035-2.576 36.705-1.957 13.093.629 27.224-.598 31.968-7.366 5.675-8.079 5.343-24.358-3.314-29.331-4.645-2.676-11.573-2.798-16.625-5.128-3.687-1.705-6.531-4.893-8.563-9.326-1.704-3.709-3.29-9.799-1.08-13.77 2.034-3.663 7.165-2.627 11.283-1.668 8.168 1.873 21.813 3.862 29.669.414 2.315-1.182-5.961-6.724-9.092-8.252zM4.386 317.474c.47-2.649.674-3.389 2.272-5.473 2.529-3.783 33.22-38.222 80.791-46.567 6.26-.899 10.772-.464 11.798 2.045 1.797 4.399-1.846 6.935-6.229 9.472C16.722 322.55 22.13 390.336 21.4 418.066c.23 11.341-7.962 13.409-10.007 8.064-8.954-24.425-16.482-62.708-7.007-108.656zm51.625-99.862c1.564-1.658 2.582-2.421 4.902-3.074 29.301-7.279 58.696-2.644 79.862 6.796 4.755 2.102 6.895 5.085 3.775 7.086-3.969 2.305-15.996 10.127-22.643 16.321-1.933 1.667-5.379 1.753-7.412 1.484-24.813-3.272-37.703-5.203-75.006 8.937-5.723 2.407-10.87-.868-8.237-5.366 4.967-8.898 16.516-23.78 24.76-32.184zm48.216-29.276c-6.415-.731-6.506-5.423-3.794-7.251 6.971-4.885 18.282-10.781 29.656-15.291 3.411-1.35 5.168-1.702 8.289-1.388 8.384.838 22.266 6.484 38.198 17.85 19.106 13.632 36.1 39.528 24.734 37.434-7.189-1.246-4.059-.904-12.485-1.828-8.611-.764-14.261.12-18.229-.284-1.729-.142-3.091-1.295-4.309-2.29-16.124-14.458-34.751-23.635-62.06-26.952z"
@@ -7210,7 +6899,7 @@ function SvgLogoNyplFullWhite(_ref) {
   }), /*#__PURE__*/React.createElement("path", {
     d: "M100.548 370.783c-13.42-32.694-4.658-62.132 1.272-73.299 2.988-5.635 5.91-9.316 9.724-8.256 4.151 1.157 5.11 5.406 5.683 13.281 4.222 65.353 43.753 87.356 93.401 110.43 39.174 20.024 83.741 42.918 121.092 98.373 5.653 8.007 6.469 12.864.088 17.45-22.776 15.546-43.404 26.383-73.589 33.422-4.541 1.063-9.229.265-13.253-10.116C203.035 444.031 132.634 448.9 100.548 370.783zM360.26 503.607c-6.382 6.383-10.006 1.382-12.089-2.719-8.941-19.01-17.674-34.919-31.756-50.332-2.437-2.471-.558-5.944 3.028-5.589 4.582.366 7.586.114 12.627-2.051 4.268-1.832 9.154-7.814 11.591-16.405 1.776-6.268 1.86-8.112 5.7-8.501.954-.089 2.702.149 3.761.453 4.674 1.332 9.693 5.152 13.36 7.964 9.406 7.185 23.439 23.046 25.895 28.177 1.56 3.267.068 5.482-.812 7.349-4.923 10.062-20.445 30.918-31.305 41.654zM476.671 7.388h7.369l54.269 78.566V7.388h7.088v90.997h-6.976l-54.777-79.13v79.13h-6.973V7.388zM605.125 57.78c-.159-9.84-5.183-19.917-17.64-19.917-11.322 0-17.904 8.725-19.814 19.917h37.454zm-45.387 7.396c0-18.458 10.686-33.49 28.009-33.49 16.703 0 25.843 13.385 24.463 32h-44.935v1.49c.114 14.876 6.412 28.542 21.992 28.542 8.322 0 15.295-3.397 18.839-6.13l3.037 5.607c-4.106 2.997-11.642 6.705-22.16 6.705-19.953 0-29.245-16.025-29.245-34.724zm60.783-31.973h7.649l15.861 54.242 17.063-54.242h7.008l17.041 54.384 16.026-54.384h7.088l-19.688 65.183h-6.519l-17.609-54.947-17.662 54.947h-6.572l-19.686-65.183zm151.272 30.876l-30.492-56.69h8.503l25.815 49.163h.223l25.823-49.163h7.664l-30.163 56.69v34.307h-7.373V64.077zm83.09 1.8c0-14.623-7.789-28.016-22.693-28.016-14.734 0-21.426 13.112-21.426 27.735 0 14.735 7.189 28.12 21.989 28.12 14.9 0 22.13-13.104 22.13-27.84zm-51.712 0c0-16.423 8.773-34.193 29.246-34.193 20.551 0 29.976 17.658 29.976 33.912 0 16.365-9.336 34.302-29.81 34.302-20.47 0-29.412-17.655-29.412-34.022zm72.807-32.676h7.14v11.36c2.433-4.785 8.329-12.877 17.496-12.877 3.038 0 5.173.675 6.298 1.124l-1.752 6.692c-1.117-.448-2.636-.956-5.333-.956-9.043 0-14.906 10.63-16.709 14.454v45.386h-7.14V33.202zm51.796 28.572L956.4 33.202h8.828l-28.847 28.572 30.366 36.61h-8.88l-30.093-36.61zM920.048.008h7.106v98.377h-7.106V.008zM495.649 190.396c17.321 0 24.463-7.929 24.463-19.964 0-11.361-6.861-19.566-24.183-19.566h-11.64v39.53h11.36zm-18.881-45.946h19.837c19.122 0 31.158 9.448 31.158 25.701 0 16.418-11.361 26.658-32.002 26.658h-11.472v38.692h-7.521V144.45zm62.463 71.929v-46.096h7.087v44.577c0 9.563 3.428 15.691 13.384 15.691 9.731 0 17.77-9.165 19.965-12.991v-47.277h7.085v52.623c0 5.171.563 10.121 1.237 12.595h-7.243c-.403-2.249-.956-7.122-.956-10.686-3.126 4.949-10.528 12.188-21.567 12.188-13.663 0-18.992-8.926-18.992-20.624zM648.8 202.942c0-14.222-5.473-27.73-21.332-27.73-5.566 0-12.146 3.263-15.826 7.369v45.667c3.004 1.516 7.503 2.531 12.705 2.531 16.524 0 24.453-14.343 24.453-27.837zm-44.276 29.127v-94.987h7.118v39.199c3.961-4.499 10.372-7.479 17.065-7.479 18.613 0 27.613 14.895 27.613 33.853 0 18.337-12.316 34.348-32.228 34.348-7.814 0-15.07-1.916-19.568-4.934zm67.747-94.987h7.143v98.419h-7.143v-98.419zm28.278 33.201h7.207v65.218h-7.207v-65.218zm-1.79-19.253c0-3.149 2.474-5.456 5.345-5.456 3.033 0 5.508 2.307 5.508 5.456 0 3.148-2.475 5.585-5.508 5.585-2.871 0-5.345-2.437-5.345-5.585zm22.718 51.796c0-20.641 11.866-34.024 28.683-34.024 9.73 0 15.858 3.654 19.39 6.803l-3.7 5.218c-3.654-3.136-8.605-5.892-15.858-5.892-14.472 0-21.037 12.595-21.037 27.612 0 14.456 6.471 28.236 20.941 28.236 7.52 0 13.817-3.264 16.688-5.796l3.091 5.312c-3.491 3.126-10.347 6.708-20.244 6.708-18.701 0-27.954-16.741-27.954-34.177zM476.671 372.798v-90.997h19.402v75.392h33.907v15.605h-53.309zm67.687 0v-66.535h18.319v66.535h-18.319zm9.154-75.134c-6.415 0-11.07-5.117-11.07-10.916 0-5.745 4.655-10.685 11.07-10.685 6.411 0 11.201 4.94 11.201 10.685 0 5.799-4.79 10.916-11.201 10.916zm43.305 61.017c1.232.429 4.1 1.521 9.163 1.521 10.122 0 16.139-7.48 16.139-21.203 0-12.429-4.222-20.077-14.059-20.077-5.736 0-10.123 3.765-11.243 5.117v34.642zm0-84.303v37.064c3.032-3.041 8.881-6.864 16.289-6.864 16.664 0 28.27 11.472 28.27 34.421 0 22.719-15.318 35.444-35.396 35.444-15.019 0-24.184-3.833-27.333-5.301v-94.764h18.17zm95.708 47.836c-1.122-.65-3.202-1.44-7.029-1.44-8.041 0-12.821 7.09-14.506 10.064v41.96h-18.138v-66.535h18.138v9.003c2.866-4.951 8.377-10.688 16.814-10.688 4.948 0 7.589.958 9.035 1.824l-4.314 15.812zm46.01 21.082h-2.368c-10.578 0-17.996 3.126-17.996 10.942 0 4.872 3.996 6.917 8.043 6.917 6.572 0 10.405-3.825 12.321-5.878v-11.981zm2.02 29.502c-.563-1.688-.955-5.064-1.061-7.087-2.987 3.487-9.288 8.732-18.697 8.732-11.399 0-20.124-6.818-20.124-18.691 0-17.375 17.892-23.673 35.494-23.673h2.368v-3.824c0-5.737-2.368-9.333-10.803-9.333-8.605 0-14.51 4.553-16.983 6.298l-7.875-11.081c3.992-3.486 12.661-9.561 26.938-9.561 18.167 0 26.77 7.032 26.77 24.634v23.9c0 8.999.956 15.465 1.912 19.686h-17.939zm70.962-50.584c-1.123-.65-3.205-1.44-7.029-1.44-8.041 0-12.824 7.09-14.496 10.064v41.96h-18.181v-66.535h18.181v9.003c2.878-4.951 8.365-10.688 16.801-10.688 4.948 0 7.593.958 9.083 1.824l-4.359 15.812zm10.604-15.951h19.349l14.799 43.814h.667l13.554-43.814h18.726l-27.499 73.619c-5.89 15.693-12.825 24.858-30.988 24.858-5.576 0-8.941-.786-10.292-1.182l2.642-14.338c.954.224 2.475.616 6.363.616 9.328 0 12.59-4.441 15.233-11.56l2.474-6.829-25.028-65.184z"
   }))), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-    id: "logo_nypl_full_white_svg__clip0_1147_1139"
+    id: "logo-nypl-full-white_svg__clip0_1147_1139"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "#fff",
     d: "M0 0h966.773v567.413H0z"
@@ -7219,7 +6908,7 @@ function SvgLogoNyplFullWhite(_ref) {
 
 var _path$A, _path2$g, _path3$b;
 
-var _excluded$_ = ["title", "titleId"];
+var _excluded$$ = ["title", "titleId"];
 
 function _extends$H() { _extends$H = 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$H.apply(this, arguments); }
 
@@ -7230,7 +6919,7 @@ function _objectWithoutPropertiesLoose$H(source, excluded) { if (source == null)
 function SvgLogoNyplLionBlack(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$G(_ref, _excluded$_);
+      props = _objectWithoutProperties$G(_ref, _excluded$$);
 
   return /*#__PURE__*/React.createElement("svg", _extends$H({
     viewBox: "0 0 136 135",
@@ -7255,7 +6944,7 @@ function SvgLogoNyplLionBlack(_ref) {
 
 var _path$B, _mask, _g$4;
 
-var _excluded$$ = ["title", "titleId"];
+var _excluded$10 = ["title", "titleId"];
 
 function _extends$I() { _extends$I = 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$I.apply(this, arguments); }
 
@@ -7266,7 +6955,7 @@ function _objectWithoutPropertiesLoose$I(source, excluded) { if (source == null)
 function SvgLogoNyplLionWhite(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$H(_ref, _excluded$$);
+      props = _objectWithoutProperties$H(_ref, _excluded$10);
 
   return /*#__PURE__*/React.createElement("svg", _extends$I({
     viewBox: "0 0 125 126",
@@ -7280,7 +6969,7 @@ function SvgLogoNyplLionWhite(_ref) {
     clipRule: "evenodd",
     d: "M122.666 79.082l-.006.019c-.499 1.582-1.133 3.595-2.402 2.672a59.23 59.23 0 00-12.99-7.207c-.275-.07-.24-.448-.14-.653.359-.81.591-1.67.69-2.551a6.232 6.232 0 011.239-2.243 22.616 22.616 0 002.338-8.203 20.544 20.544 0 00-.38-6.514 13.52 13.52 0 01-.789-2.86c0-.498.128-.995.262-1.518.118-.457.241-.934.287-1.448a8.87 8.87 0 00-5.85-6.758 275.96 275.96 0 00-4.997-2.249c-3.374-1.492-6.85-3.03-10.356-4.888a60.679 60.679 0 01-7.779-6.892 55.953 55.953 0 00-13.284-5.756 1.272 1.272 0 01-1.069-1.067 31.14 31.14 0 00-11.616-18.07c-2.168-1.69.295-2.657 3.293-2.791 20.115-1.132 39.54 7.499 52.152 23.172a62.1 62.1 0 0111.397 55.805zM29.501 8.846c-.797.53-.797 1.898 1.145 2.096 6.959.573 13.531 3.298 18.72 7.762.339.353.792.587 1.287.665.489.04 1.05.022 1.713 0 .993-.031 2.218-.071 3.782.067 1.262.103 2.516.281 3.754.535 3.41.603-1.7-6.866-7.438-10.798A27.838 27.838 0 0040.96 4.042a4.562 4.562 0 00-2.523.4 47.777 47.777 0 00-8.936 4.404zm-13 11.099c.373-.435.87-.75 1.428-.905a37.673 37.673 0 0123.522 1.974c1.393.604 2.04 1.45 1.121 2.04a51.105 51.105 0 00-6.67 4.717 3.228 3.228 0 01-2.178.435A36.309 36.309 0 0011.63 30.77c-1.7.701-3.201-.266-2.416-1.538a54.633 54.633 0 017.287-9.287zm81.78 23.683c-2.133-1.048-4.559-1.853-6.98-2.656-2.815-.934-5.624-1.866-7.958-3.175-1.581-.874-2.984-2.005-4.39-3.14-1.684-1.356-3.373-2.718-5.383-3.653a71.807 71.807 0 00-11.654-4.254 20.684 20.684 0 00-16.407 2.365 16.644 16.644 0 00-6.186 16.461 19.583 19.583 0 003.14 8.31c4.474 6.333 11.625 9.72 18.782 13.109 3.231 1.53 6.464 3.061 9.452 4.864a.625.625 0 00.88-.076l.003-.003.06-.045a12.757 12.757 0 015.64-5.454 28.588 28.588 0 0110.87-.585c3.325.64 6.765-.158 9.466-2.196a6.74 6.74 0 00-.992-8.712c-.748-.43-1.699-.636-2.653-.842-.792-.172-1.586-.344-2.268-.645a5.202 5.202 0 01-2.53-2.777 5.015 5.015 0 01-.308-4.08 2.84 2.84 0 013.349-.496c2.865.816 5.896.864 8.786.139a4.326 4.326 0 00-2.719-2.46zm-24.235-1.34a4.164 4.164 0 01-1.915 3.293 4.495 4.495 0 01-2.565-1.443 28.23 28.23 0 00-4.753-1.75 6.177 6.177 0 01-3.998-2.48c-.854-2.057 1.16-3.019 2.63-3.5a16.046 16.046 0 014.176-.669 6.278 6.278 0 016.048 1.919c.52 1.486.65 3.08.377 4.63zm-72.01 5.853a2.742 2.742 0 00-.696 1.619 59.402 59.402 0 002.083 32.42c.63 1.574 3.097.966 3.027-2.411.018-.624.026-1.314.034-2.064.102-9.222.302-27.42 21.493-40.004 1.322-.757 2.431-1.514 1.877-2.824a3.366 3.366 0 00-3.531-.623c-9.438 1.824-17.987 6.712-24.287 13.887zm100.09 8.538c0 .177.114 1.012.152 1.254a13.47 13.47 0 01-.277 4.979.713.713 0 00.223.558 8.308 8.308 0 012.91 3.413c.092.242.39.101.542-.211a16.316 16.316 0 00.184-12.429l-.008-.015c-.044-.084-.155-.296-.328-.196-.695.379-1.357.81-1.978 1.288-.6.322-1.091.793-1.42 1.36zM81.61 73.897c.239-.94.817-1.75 1.615-2.265a15.306 15.306 0 016.623-1.219 19.97 19.97 0 006.69-1.148 3.977 3.977 0 013.665-1.183c.7.351 1.215 1 1.411 1.777.306.858.433 1.772.371 2.684a82.29 82.29 0 01-3.094 7.487c.01.481-.119.955-.371 1.36a11.028 11.028 0 01-8.809 1.183 9.228 9.228 0 01-3.162-.56 6.333 6.333 0 01-1.581-1.323c-.776-.748-1.31-1.366-1.973-2.133-.23-.266-.475-.55-.75-.863A5.407 5.407 0 0181 76.056c.145-.736.35-1.458.61-2.16zm-61.686 33.61a9.874 9.874 0 002.494 3.102 61.69 61.69 0 0034.798 14.369c2.475.204 2.749-.689 2.784-2.105a43.057 43.057 0 00-9.589-18.179c-1.23-1.608-3.467-4.047-6.147-6.967-6.468-7.048-15.508-16.9-19.152-24.634a24.816 24.816 0 01-2.714-17.954c.823-3.003-1.686-4.798-4.056-.898-7.458 11.142-4.225 43.984 1.582 53.266zM30.107 65.19a26.819 26.819 0 01.378-21.694c.89-1.676 1.745-2.77 2.88-2.428 1.233.341 1.492 1.608 1.68 3.957 1.269 19.363 12.987 25.862 27.689 32.708a84.543 84.543 0 0135.91 29.117c1.68 2.359 1.919 3.798.034 5.163a60.152 60.152 0 01-21.829 9.892c-1.338.307-2.74.07-3.94-3.012-6.754-17.427-16.015-24.947-24.59-31.91-7.177-5.827-13.872-11.264-18.212-21.793zm72.632 39.117c.611 1.218 1.71 2.67 3.594.812a60.34 60.34 0 009.249-12.215 2.214 2.214 0 00.239-2.167 37.68 37.68 0 00-7.669-8.257 14.577 14.577 0 00-3.976-2.334 3.434 3.434 0 00-1.129-.137c-1.043.126-1.168.593-1.57 2.095-.034.129-.07.265-.11.41a7.431 7.431 0 01-3.424 4.803 6.76 6.76 0 01-3.733.612.97.97 0 00-1.094.467.938.938 0 00.204 1.157 55.145 55.145 0 019.419 14.754z"
   })), _mask || (_mask = /*#__PURE__*/React.createElement("mask", {
-    id: "logo_nypl_lion_white_svg__a",
+    id: "logo-nypl-lion-white_svg__a",
     maskUnits: "userSpaceOnUse",
     x: 0,
     y: 0,
@@ -7291,7 +6980,7 @@ function SvgLogoNyplLionWhite(_ref) {
     clipRule: "evenodd",
     d: "M122.666 79.082l-.006.019c-.499 1.582-1.133 3.595-2.402 2.672a59.23 59.23 0 00-12.99-7.207c-.275-.07-.24-.448-.14-.653.359-.81.591-1.67.69-2.551a6.232 6.232 0 011.239-2.243 22.616 22.616 0 002.338-8.203 20.544 20.544 0 00-.38-6.514 13.52 13.52 0 01-.789-2.86c0-.498.128-.995.262-1.518.118-.457.241-.934.287-1.448a8.87 8.87 0 00-5.85-6.758 275.96 275.96 0 00-4.997-2.249c-3.374-1.492-6.85-3.03-10.356-4.888a60.679 60.679 0 01-7.779-6.892 55.953 55.953 0 00-13.284-5.756 1.272 1.272 0 01-1.069-1.067 31.14 31.14 0 00-11.616-18.07c-2.168-1.69.295-2.657 3.293-2.791 20.115-1.132 39.54 7.499 52.152 23.172a62.1 62.1 0 0111.397 55.805zM29.501 8.846c-.797.53-.797 1.898 1.145 2.096 6.959.573 13.531 3.298 18.72 7.762.339.353.792.587 1.287.665.489.04 1.05.022 1.713 0 .993-.031 2.218-.071 3.782.067 1.262.103 2.516.281 3.754.535 3.41.603-1.7-6.866-7.438-10.798A27.838 27.838 0 0040.96 4.042a4.562 4.562 0 00-2.523.4 47.777 47.777 0 00-8.936 4.404zm-13 11.099c.373-.435.87-.75 1.428-.905a37.673 37.673 0 0123.522 1.974c1.393.604 2.04 1.45 1.121 2.04a51.105 51.105 0 00-6.67 4.717 3.228 3.228 0 01-2.178.435A36.309 36.309 0 0011.63 30.77c-1.7.701-3.201-.266-2.416-1.538a54.633 54.633 0 017.287-9.287zm81.78 23.683c-2.133-1.048-4.559-1.853-6.98-2.656-2.815-.934-5.624-1.866-7.958-3.175-1.581-.874-2.984-2.005-4.39-3.14-1.684-1.356-3.373-2.718-5.383-3.653a71.807 71.807 0 00-11.654-4.254 20.684 20.684 0 00-16.407 2.365 16.644 16.644 0 00-6.186 16.461 19.583 19.583 0 003.14 8.31c4.474 6.333 11.625 9.72 18.782 13.109 3.231 1.53 6.464 3.061 9.452 4.864a.625.625 0 00.88-.076l.003-.003.06-.045a12.757 12.757 0 015.64-5.454 28.588 28.588 0 0110.87-.585c3.325.64 6.765-.158 9.466-2.196a6.74 6.74 0 00-.992-8.712c-.748-.43-1.699-.636-2.653-.842-.792-.172-1.586-.344-2.268-.645a5.202 5.202 0 01-2.53-2.777 5.015 5.015 0 01-.308-4.08 2.84 2.84 0 013.349-.496c2.865.816 5.896.864 8.786.139a4.326 4.326 0 00-2.719-2.46zm-24.235-1.34a4.164 4.164 0 01-1.915 3.293 4.495 4.495 0 01-2.565-1.443 28.23 28.23 0 00-4.753-1.75 6.177 6.177 0 01-3.998-2.48c-.854-2.057 1.16-3.019 2.63-3.5a16.046 16.046 0 014.176-.669 6.278 6.278 0 016.048 1.919c.52 1.486.65 3.08.377 4.63zm-72.01 5.853a2.742 2.742 0 00-.696 1.619 59.402 59.402 0 002.083 32.42c.63 1.574 3.097.966 3.027-2.411.018-.624.026-1.314.034-2.064.102-9.222.302-27.42 21.493-40.004 1.322-.757 2.431-1.514 1.877-2.824a3.366 3.366 0 00-3.531-.623c-9.438 1.824-17.987 6.712-24.287 13.887zm100.09 8.538c0 .177.114 1.012.152 1.254a13.47 13.47 0 01-.277 4.979.713.713 0 00.223.558 8.308 8.308 0 012.91 3.413c.092.242.39.101.542-.211a16.316 16.316 0 00.184-12.429l-.008-.015c-.044-.084-.155-.296-.328-.196-.695.379-1.357.81-1.978 1.288-.6.322-1.091.793-1.42 1.36zM81.61 73.897c.239-.94.817-1.75 1.615-2.265a15.306 15.306 0 016.623-1.219 19.97 19.97 0 006.69-1.148 3.977 3.977 0 013.665-1.183c.7.351 1.215 1 1.411 1.777.306.858.433 1.772.371 2.684a82.29 82.29 0 01-3.094 7.487c.01.481-.119.955-.371 1.36a11.028 11.028 0 01-8.809 1.183 9.228 9.228 0 01-3.162-.56 6.333 6.333 0 01-1.581-1.323c-.776-.748-1.31-1.366-1.973-2.133-.23-.266-.475-.55-.75-.863A5.407 5.407 0 0181 76.056c.145-.736.35-1.458.61-2.16zm-61.686 33.61a9.874 9.874 0 002.494 3.102 61.69 61.69 0 0034.798 14.369c2.475.204 2.749-.689 2.784-2.105a43.057 43.057 0 00-9.589-18.179c-1.23-1.608-3.467-4.047-6.147-6.967-6.468-7.048-15.508-16.9-19.152-24.634a24.816 24.816 0 01-2.714-17.954c.823-3.003-1.686-4.798-4.056-.898-7.458 11.142-4.225 43.984 1.582 53.266zM30.107 65.19a26.819 26.819 0 01.378-21.694c.89-1.676 1.745-2.77 2.88-2.428 1.233.341 1.492 1.608 1.68 3.957 1.269 19.363 12.987 25.862 27.689 32.708a84.543 84.543 0 0135.91 29.117c1.68 2.359 1.919 3.798.034 5.163a60.152 60.152 0 01-21.829 9.892c-1.338.307-2.74.07-3.94-3.012-6.754-17.427-16.015-24.947-24.59-31.91-7.177-5.827-13.872-11.264-18.212-21.793zm72.632 39.117c.611 1.218 1.71 2.67 3.594.812a60.34 60.34 0 009.249-12.215 2.214 2.214 0 00.239-2.167 37.68 37.68 0 00-7.669-8.257 14.577 14.577 0 00-3.976-2.334 3.434 3.434 0 00-1.129-.137c-1.043.126-1.168.593-1.57 2.095-.034.129-.07.265-.11.41a7.431 7.431 0 01-3.424 4.803 6.76 6.76 0 01-3.733.612.97.97 0 00-1.094.467.938.938 0 00.204 1.157 55.145 55.145 0 019.419 14.754z"
   }))), _g$4 || (_g$4 = /*#__PURE__*/React.createElement("g", {
-    mask: "url(#logo_nypl_lion_white_svg__a)"
+    mask: "url(#logo-nypl-lion-white_svg__a)"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M0-.994h125v126H0z"
   }))));
@@ -7299,7 +6988,7 @@ function SvgLogoNyplLionWhite(_ref) {
 
 var _g$5, _defs$1;
 
-var _excluded$10 = ["title", "titleId"];
+var _excluded$11 = ["title", "titleId"];
 
 function _extends$J() { _extends$J = 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$J.apply(this, arguments); }
 
@@ -7310,7 +6999,7 @@ function _objectWithoutPropertiesLoose$J(source, excluded) { if (source == null)
 function SvgLogoOpenebooksColor(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$I(_ref, _excluded$10);
+      props = _objectWithoutProperties$I(_ref, _excluded$11);
 
   return /*#__PURE__*/React.createElement("svg", _extends$J({
     viewBox: "0 0 152 139",
@@ -7320,18 +7009,18 @@ function SvgLogoOpenebooksColor(_ref) {
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, _g$5 || (_g$5 = /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#logo_openebooks_color_svg__clip0_53471_41906)"
+    clipPath: "url(#logo-openebooks-color_svg__clip0_53471_41906)"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M130.79 29.541H20.99a5.667 5.667 0 00-5.673 5.662v98.138a5.667 5.667 0 005.673 5.661h109.8a5.667 5.667 0 005.672-5.661V35.202a5.666 5.666 0 00-5.672-5.66z",
     fill: "#012F53"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M76 7.79S43.52-12.182-.008 11.842v111.332s22.226-23.121 58.783-13.642V30.593h34.45v78.939c36.559-9.473 58.783 13.636 58.783 13.636V11.842C108.482-12.182 76 7.79 76 7.79z",
-    fill: "url(#logo_openebooks_color_svg__paint0_linear_53471_41906)"
+    fill: "url(#logo-openebooks-color_svg__paint0_linear_53471_41906)"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M13.312 98.983c19.216-7.728 38.432-8.113 57.65 0V20.067c-18.895-8.814-38.117-8.959-57.65 0v78.915zM80.102 98.983c19.216-7.728 38.432-8.113 57.65 0V20.067c-18.905-8.814-38.117-8.959-57.65 0v78.915z",
     fill: "#fff"
   }))), _defs$1 || (_defs$1 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
-    id: "logo_openebooks_color_svg__paint0_linear_53471_41906",
+    id: "logo-openebooks-color_svg__paint0_linear_53471_41906",
     x1: 76.519,
     y1: 132.496,
     x2: 75.513,
@@ -7360,7 +7049,7 @@ function SvgLogoOpenebooksColor(_ref) {
 
 var _g$6, _defs$2;
 
-var _excluded$11 = ["title", "titleId"];
+var _excluded$12 = ["title", "titleId"];
 
 function _extends$K() { _extends$K = 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$K.apply(this, arguments); }
 
@@ -7371,7 +7060,7 @@ function _objectWithoutPropertiesLoose$K(source, excluded) { if (source == null)
 function SvgLogoOpenebooksNegative(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$J(_ref, _excluded$11);
+      props = _objectWithoutProperties$J(_ref, _excluded$12);
 
   return /*#__PURE__*/React.createElement("svg", _extends$K({
     viewBox: "0 0 155 139",
@@ -7381,24 +7070,24 @@ function SvgLogoOpenebooksNegative(_ref) {
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, _g$6 || (_g$6 = /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#logo_openebooks_negative_svg__clip0_54498_42323)"
+    clipPath: "url(#logo-openebooks-negative_svg__clip0_54498_42323)"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M78.087 9.5C36.26-12.024 1.802 9.59 0 10.747v110.438c1.074-1.272 5.518-6.158 15.394-9.572v21.596a5.805 5.805 0 005.79 5.791h112.114a5.808 5.808 0 005.79-5.791v-22.206c11.82 3.711 15.912 9.885 15.912 9.885V10.797S121.052-12.61 78.087 9.5z",
     fill: "#fff"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M100.627 10.801c42.596-3.868 54.346 12.835 54.346 12.835v97.554s-11.75-16.705-54.346-12.835V10.801z",
-    fill: "url(#logo_openebooks_negative_svg__paint0_linear_54498_42323)"
+    fill: "url(#logo-openebooks-negative_svg__paint0_linear_54498_42323)"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M147.325 106.011c-36.336-17.126-64.97 0-64.97 0V16.268s28.603-17.128 64.97 0v89.743z",
     fill: "#0B1F31"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M54.346 10.793C11.75 6.924 0 23.627 0 23.627v97.554s11.75-16.705 54.346-12.834V10.793z",
-    fill: "url(#logo_openebooks_negative_svg__paint1_linear_54498_42323)"
+    fill: "url(#logo-openebooks-negative_svg__paint1_linear_54498_42323)"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M8.52 106.014c36.338-17.129 64.973 0 64.973 0V16.266s-28.604-17.124-64.972 0v89.748z",
     fill: "#0B1F31"
   }))), _defs$2 || (_defs$2 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
-    id: "logo_openebooks_negative_svg__paint0_linear_54498_42323",
+    id: "logo-openebooks-negative_svg__paint0_linear_54498_42323",
     x1: 127.8,
     y1: 121.19,
     x2: 127.8,
@@ -7419,7 +7108,7 @@ function SvgLogoOpenebooksNegative(_ref) {
     offset: 1,
     stopColor: "#fff"
   })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "logo_openebooks_negative_svg__paint1_linear_54498_42323",
+    id: "logo-openebooks-negative_svg__paint1_linear_54498_42323",
     x1: 27.173,
     y1: 121.181,
     x2: 27.173,
@@ -7444,7 +7133,7 @@ function SvgLogoOpenebooksNegative(_ref) {
 
 var _g$7, _defs$3;
 
-var _excluded$12 = ["title", "titleId"];
+var _excluded$13 = ["title", "titleId"];
 
 function _extends$L() { _extends$L = 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$L.apply(this, arguments); }
 
@@ -7452,10 +7141,10 @@ function _objectWithoutProperties$K(source, excluded) { if (source == null) retu
 
 function _objectWithoutPropertiesLoose$L(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-function SvgLogoOpenebooksWtextColor(_ref) {
+function SvgLogoOpenebooksWithTextColor(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$K(_ref, _excluded$12);
+      props = _objectWithoutProperties$K(_ref, _excluded$13);
 
   return /*#__PURE__*/React.createElement("svg", _extends$L({
     viewBox: "0 0 152 139",
@@ -7465,18 +7154,18 @@ function SvgLogoOpenebooksWtextColor(_ref) {
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, _g$7 || (_g$7 = /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#logo_openebooks_wtext_color_svg__clip0_53471_41905)"
+    clipPath: "url(#logo-openebooks-with-text-color_svg__clip0_53471_41905)"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M130.79 29.541H20.99a5.667 5.667 0 00-5.673 5.662v98.138a5.667 5.667 0 005.673 5.661h109.8a5.667 5.667 0 005.672-5.661V35.202a5.666 5.666 0 00-5.672-5.66z",
     fill: "#012F53"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M76 7.79S43.52-12.182-.008 11.842v111.332s22.226-23.121 58.783-13.642V30.593h34.45v78.939c36.559-9.473 58.783 13.636 58.783 13.636V11.842C108.482-12.182 76 7.79 76 7.79z",
-    fill: "url(#logo_openebooks_wtext_color_svg__paint0_linear_53471_41905)"
+    fill: "url(#logo-openebooks-with-text-color_svg__paint0_linear_53471_41905)"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M13.312 98.983c19.216-7.728 38.432-8.113 57.65 0V20.067c-18.895-8.814-38.117-8.959-57.65 0v78.915zM80.102 98.983c19.216-7.728 38.432-8.113 57.65 0V20.067c-18.905-8.814-38.117-8.959-57.65 0v78.915zM130.032 126.627c.01.626-.171 1.24-.519 1.76-.372.531-.89.944-1.49 1.191a5.757 5.757 0 01-2.286.419 9.806 9.806 0 01-1.835-.145 7.126 7.126 0 01-1.545-.524v-2.556c.563.28 1.154.502 1.763.66a6.857 6.857 0 001.68.235 1.69 1.69 0 00.967-.21.679.679 0 00.309-.574.58.58 0 00-.128-.377 1.348 1.348 0 00-.397-.335c-.178-.109-.663-.338-1.455-.681a7.123 7.123 0 01-1.61-.916 2.88 2.88 0 01-.796-1.016 3.339 3.339 0 01-.254-1.36 2.701 2.701 0 011.103-2.288c.734-.548 1.743-.821 3.027-.819a8.723 8.723 0 013.47.762l-.911 2.201c-1.025-.456-1.909-.683-2.654-.681a1.402 1.402 0 00-.839.194.589.589 0 00-.263.487.695.695 0 00.097.319c.057.098.137.18.233.24a13.28 13.28 0 001.816.901c.943.411 1.597.853 1.963 1.328.383.515.579 1.145.554 1.785zm-8.358 3.227h-3.342l-2.164-4.06-.878.507v3.562h-2.981v-10.619h2.981v4.609c.273-.471.576-.925.907-1.357l2.309-3.254h3.229l-3.455 4.756 3.394 5.856zm-18.875-5.324c0 2.053.737 3.079 2.21 3.078.748 0 1.302-.247 1.663-.748s.546-1.276.546-2.33-.183-1.844-.554-2.347c-.372-.502-.912-.762-1.642-.762-1.482.003-2.223 1.039-2.223 3.109zm7.536 0c0 1.787-.452 3.145-1.356 4.075-.904.931-2.227 1.395-3.97 1.394-1.72 0-3.039-.467-3.957-1.402-.918-.934-1.375-2.295-1.37-4.082 0-1.768.453-3.117 1.362-4.046.908-.928 2.234-1.396 3.978-1.401 1.745 0 3.067.462 3.966 1.387.898.925 1.347 2.283 1.347 4.075zm-19.767 0c0 2.053.737 3.079 2.21 3.078.75 0 1.304-.247 1.663-.748s.548-1.276.548-2.33-.185-1.844-.556-2.347c-.372-.502-.912-.758-1.648-.758-1.478 0-2.217 1.035-2.217 3.105zm7.536 0c0 1.787-.45 3.145-1.354 4.075-.902.931-2.224 1.395-3.965 1.394-1.72 0-3.04-.467-3.958-1.402-.918-.934-1.375-2.295-1.37-4.082 0-1.768.454-3.117 1.364-4.046.91-.928 2.236-1.396 3.978-1.401 1.746 0 3.067.462 3.964 1.387.897.925 1.344 2.283 1.341 4.075zm-17.634.878v2.231h1.039c.924 0 1.386-.378 1.388-1.135a.96.96 0 00-.374-.813 1.74 1.74 0 00-1.075-.285l-.978.002zm0-2.095h.89c.346.021.69-.068.982-.256a.871.871 0 00.35-.756c0-.595-.463-.893-1.391-.893h-.84l.009 1.905zm-2.963-4.076h3.823c1.488 0 2.592.216 3.313.646.724.419 1.088 1.091 1.088 1.999a2.471 2.471 0 01-.475 1.523c-.3.414-.743.704-1.243.815v.071a2.277 2.277 0 011.934 2.456 2.683 2.683 0 01-1.123 2.28c-.746.558-1.764.838-3.053.838h-4.26l-.004-10.628zm-5.733 4.176c-.32-.007-.63.106-.87.319a1.464 1.464 0 00-.404.987h2.519a1.39 1.39 0 00-.35-.949 1.16 1.16 0 00-.89-.359l-.005.002zm.174 6.588c-1.415 0-2.514-.363-3.298-1.09-.784-.726-1.173-1.765-1.167-3.115 0-1.389.36-2.454 1.083-3.196.722-.741 1.757-1.114 3.105-1.119 1.278 0 2.265.325 2.96.975.697.641 1.05 1.573 1.05 2.789v1.257h-5.236a1.402 1.402 0 00.516 1.083c.39.28.865.418 1.344.392.475.005.95-.042 1.415-.138a7.152 7.152 0 001.409-.487v2.035a5.177 5.177 0 01-1.424.471c-.579.098-1.165.145-1.753.141l-.004.002zm-7.692-.145h-1.45l-5.988-8.913h-.059c.08 1.048.12 2.007.12 2.877v6.036H55.7v-10.619h1.438l5.975 8.876h.07c-.011-.132-.032-.549-.068-1.257a20.277 20.277 0 01-.036-1.525v-6.094h1.19l-.014 10.619zm-12.067 0h-6.11v-10.619h6.11v1.096H47.36v3.42h4.543v1.089h-4.547v3.916h4.828l.005 1.098zm-15.156-5.238h1.146c1.13 0 1.944-.178 2.45-.532.506-.354.756-.92.756-1.699 0-.702-.237-1.224-.712-1.57-.474-.345-1.213-.515-2.216-.515h-1.424v4.316zm5.669-2.288c0 1.073-.38 1.9-1.138 2.483-.759.582-1.84.87-3.246.863h-1.287v4.178h-1.274v-10.619h2.84c2.74 0 4.11 1.032 4.11 3.095h-.005zm-19.197 2.2c0 1.437.315 2.529.945 3.275.63.746 1.548 1.116 2.756 1.11 1.213 0 2.13-.37 2.75-1.11.62-.74.93-1.832.93-3.275 0-1.429-.31-2.511-.93-3.248-.62-.736-1.53-1.106-2.729-1.11-1.213 0-2.137.373-2.771 1.119-.634.746-.951 1.825-.951 3.239zm8.729 0c0 1.7-.444 3.036-1.333 4.008-.889.973-2.12 1.461-3.695 1.467-1.612 0-2.859-.477-3.739-1.431-.88-.954-1.318-2.305-1.312-4.052 0-1.731.44-3.07 1.318-4.017.88-.947 2.128-1.424 3.748-1.431 1.574 0 2.803.485 3.686 1.454.883.97 1.326 2.304 1.33 4.002h-.003z",
     fill: "#fff"
   }))), _defs$3 || (_defs$3 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
-    id: "logo_openebooks_wtext_color_svg__paint0_linear_53471_41905",
+    id: "logo-openebooks-with-text-color_svg__paint0_linear_53471_41905",
     x1: 76.519,
     y1: 132.496,
     x2: 75.513,
@@ -7505,7 +7194,7 @@ function SvgLogoOpenebooksWtextColor(_ref) {
 
 var _g$8, _defs$4;
 
-var _excluded$13 = ["title", "titleId"];
+var _excluded$14 = ["title", "titleId"];
 
 function _extends$M() { _extends$M = 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$M.apply(this, arguments); }
 
@@ -7513,10 +7202,10 @@ function _objectWithoutProperties$L(source, excluded) { if (source == null) retu
 
 function _objectWithoutPropertiesLoose$M(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-function SvgLogoOpenebooksWtextNegative(_ref) {
+function SvgLogoOpenebooksWithTextNegative(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$L(_ref, _excluded$13);
+      props = _objectWithoutProperties$L(_ref, _excluded$14);
 
   return /*#__PURE__*/React.createElement("svg", _extends$M({
     viewBox: "0 0 155 139",
@@ -7526,13 +7215,13 @@ function SvgLogoOpenebooksWtextNegative(_ref) {
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, _g$8 || (_g$8 = /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#logo_openebooks_wtext_negative_svg__clip0_54498_42322)"
+    clipPath: "url(#logo-openebooks-with-text-negative_svg__clip0_54498_42322)"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M78.087 9.5C36.26-12.024 1.802 9.59 0 10.747v110.438c1.074-1.272 5.518-6.158 15.394-9.572v21.596a5.805 5.805 0 005.79 5.791h112.114a5.808 5.808 0 005.79-5.791v-22.206c11.82 3.711 15.912 9.885 15.912 9.885V10.797S121.052-12.61 78.087 9.5z",
     fill: "#fff"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M100.627 10.801c42.596-3.868 54.346 12.835 54.346 12.835v97.554s-11.75-16.705-54.346-12.835V10.801z",
-    fill: "url(#logo_openebooks_wtext_negative_svg__paint0_linear_54498_42322)"
+    fill: "url(#logo-openebooks-with-text-negative_svg__paint0_linear_54498_42322)"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M147.325 106.011c-36.336-17.126-64.97 0-64.97 0V16.268s28.603-17.128 64.97 0v89.743z",
     fill: "#0B1F31"
@@ -7541,12 +7230,12 @@ function SvgLogoOpenebooksWtextNegative(_ref) {
     fill: "#000"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M54.346 10.793C11.75 6.924 0 23.627 0 23.627v97.554s11.75-16.705 54.346-12.834V10.793z",
-    fill: "url(#logo_openebooks_wtext_negative_svg__paint1_linear_54498_42322)"
+    fill: "url(#logo-openebooks-with-text-negative_svg__paint1_linear_54498_42322)"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M8.52 106.014c36.338-17.129 64.973 0 64.973 0V16.266s-28.604-17.124-64.972 0v89.748z",
     fill: "#0B1F31"
   }))), _defs$4 || (_defs$4 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
-    id: "logo_openebooks_wtext_negative_svg__paint0_linear_54498_42322",
+    id: "logo-openebooks-with-text-negative_svg__paint0_linear_54498_42322",
     x1: 127.8,
     y1: 121.19,
     x2: 127.8,
@@ -7567,7 +7256,7 @@ function SvgLogoOpenebooksWtextNegative(_ref) {
     offset: 1,
     stopColor: "#fff"
   })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "logo_openebooks_wtext_negative_svg__paint1_linear_54498_42322",
+    id: "logo-openebooks-with-text-negative_svg__paint1_linear_54498_42322",
     x1: 27.173,
     y1: 121.181,
     x2: 27.173,
@@ -7592,7 +7281,7 @@ function SvgLogoOpenebooksWtextNegative(_ref) {
 
 var _path$C;
 
-var _excluded$14 = ["title", "titleId"];
+var _excluded$15 = ["title", "titleId"];
 
 function _extends$N() { _extends$N = 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$N.apply(this, arguments); }
 
@@ -7603,7 +7292,7 @@ function _objectWithoutPropertiesLoose$N(source, excluded) { if (source == null)
 function SvgLogoQplAltBlack(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$M(_ref, _excluded$14);
+      props = _objectWithoutProperties$M(_ref, _excluded$15);
 
   return /*#__PURE__*/React.createElement("svg", _extends$N({
     viewBox: "0 0 250 134",
@@ -7618,7 +7307,7 @@ function SvgLogoQplAltBlack(_ref) {
 
 var _path$D;
 
-var _excluded$15 = ["title", "titleId"];
+var _excluded$16 = ["title", "titleId"];
 
 function _extends$O() { _extends$O = 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$O.apply(this, arguments); }
 
@@ -7629,7 +7318,7 @@ function _objectWithoutPropertiesLoose$O(source, excluded) { if (source == null)
 function SvgLogoQplAltWhite(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$N(_ref, _excluded$15);
+      props = _objectWithoutProperties$N(_ref, _excluded$16);
 
   return /*#__PURE__*/React.createElement("svg", _extends$O({
     viewBox: "0 0 250 134",
@@ -7645,7 +7334,7 @@ function SvgLogoQplAltWhite(_ref) {
 
 var _path$E, _path2$h, _path3$c, _path4$3, _path5$2;
 
-var _excluded$16 = ["title", "titleId"];
+var _excluded$17 = ["title", "titleId"];
 
 function _extends$P() { _extends$P = 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$P.apply(this, arguments); }
 
@@ -7656,7 +7345,7 @@ function _objectWithoutPropertiesLoose$P(source, excluded) { if (source == null)
 function SvgLogoQplBlack(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$O(_ref, _excluded$16);
+      props = _objectWithoutProperties$O(_ref, _excluded$17);
 
   return /*#__PURE__*/React.createElement("svg", _extends$P({
     viewBox: "0 0 320 43",
@@ -7687,7 +7376,7 @@ function SvgLogoQplBlack(_ref) {
 
 var _g$9, _defs$5;
 
-var _excluded$17 = ["title", "titleId"];
+var _excluded$18 = ["title", "titleId"];
 
 function _extends$Q() { _extends$Q = 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$Q.apply(this, arguments); }
 
@@ -7698,7 +7387,7 @@ function _objectWithoutPropertiesLoose$Q(source, excluded) { if (source == null)
 function SvgLogoQplColor(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$P(_ref, _excluded$17);
+      props = _objectWithoutProperties$P(_ref, _excluded$18);
 
   return /*#__PURE__*/React.createElement("svg", _extends$Q({
     viewBox: "0 0 355 48",
@@ -7708,7 +7397,7 @@ function SvgLogoQplColor(_ref) {
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, _g$9 || (_g$9 = /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#logo_qpl_color_svg__clip0)"
+    clipPath: "url(#logo-qpl-color_svg__clip0)"
   }, /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -7738,7 +7427,7 @@ function SvgLogoQplColor(_ref) {
     d: "M65.945 32.481a.78.78 0 01.033 1.395l-.856.485c-.312.18-.727.132-1.014-.039l-3.648-2.067c-.998.41-2.115.624-3.34.624-4.587 0-8.236-3.629-8.236-8.19a8.202 8.202 0 018.236-8.237 8.221 8.221 0 018.259 8.236c0 2.144-.916 4.438-2.547 6.016l3.113 1.777zm99.688-7.709a2.962 2.962 0 002.953-2.96c0-1.522-1.326-2.74-2.953-2.74h-3.107v5.7h3.107zm-3.107 7.104a.803.803 0 01-.79.786h-.832a.787.787 0 01-.791-.786v-14.42c0-.429.347-.787.79-.787h4.839c2.896 0 5.28 2.342 5.28 5.185 0 2.901-2.372 5.276-5.257 5.276h-3.239v4.746zm12.624-14.42c0-.425.365-.787.791-.787h.832c.444 0 .791.358.791.786v9.083c0 2.384 1.485 4.05 3.742 4.05 2.29 0 3.785-1.636 3.785-4.006v-9.126c0-.428.348-.786.79-.786h.834c.426 0 .79.362.79.786v9.213c0 3.571-2.585 6.212-6.2 6.212-3.591 0-6.155-2.64-6.155-6.212v-9.213zm23.645 6.051c1.395 0 2.251-.94 2.251-2.348 0-1.405-.815-2.24-2.251-2.24H195.6v4.59h3.195v-.002zm.372 6.95c1.378 0 2.384-1.018 2.384-2.394 0-1.296-1.207-2.306-2.756-2.306h-3.239v4.7H199.167zm4.972-2.373c0 2.674-2.144 4.578-5.148 4.578h-4.992a.79.79 0 01-.79-.788V17.455c0-.427.347-.785.79-.785h4.796c2.832 0 4.863 1.845 4.863 4.38 0 1.393-.71 2.62-1.767 3.432 1.36.747 2.248 1.954 2.248 3.603zm13.305 2.372c.444 0 .792.358.792.786v.633a.784.784 0 01-.233.558.785.785 0 01-.559.23h-7.576a.79.79 0 01-.79-.788v-14.42c0-.427.348-.785.79-.785h.855c.426 0 .79.362.79.786v13h5.931zm4.57-13c0-.424.365-.787.79-.787h.877c.426 0 .792.362.792.786v14.42a.805.805 0 01-.792.787h-.877a.804.804 0 01-.79-.788V17.455zm15.525-1.004c2.162 0 3.857.685 5.565 2.134.32.32.344.815.021 1.138l-.563.557c-.324.403-.756.378-1.109.028-1.107-.955-2.582-1.543-3.936-1.543-3.19 0-5.734 2.664-5.734 5.9 0 3.217 2.548 5.878 5.734 5.878 1.523 0 2.425-.408 3.948-1.552.322-.255.676-.278 1.01-.052l.634.568c.37.278.327.842.012 1.155-1.514 1.461-3.47 2.218-5.582 2.218-4.594 0-8.28-3.639-8.28-8.193 0-4.562 3.694-8.236 8.28-8.236zm27.593 14.005c.444 0 .792.358.792.786v.632a.784.784 0 01-.233.558.785.785 0 01-.559.23h-7.576a.79.79 0 01-.79-.788v-14.42c0-.427.346-.785.79-.785h.855c.425 0 .79.363.79.786v13h5.931v.001zm4.57-13c0-.425.364-.787.79-.787h.875c.427 0 .792.362.792.786v14.42a.805.805 0 01-.792.787h-.875a.802.802 0 01-.79-.789V17.455v.001zm13.947 6.051c1.396 0 2.252-.94 2.252-2.348 0-1.405-.815-2.24-2.252-2.24h-3.195v4.59h3.195v-.002zm.372 6.95c1.378 0 2.384-1.018 2.384-2.394 0-1.296-1.207-2.306-2.756-2.306h-3.238v4.7h3.61zm4.973-2.373c0 2.674-2.145 4.578-5.149 4.578h-4.991a.792.792 0 01-.792-.788v-14.42c0-.427.348-.785.792-.785h4.795c2.833 0 4.864 1.845 4.864 4.38 0 1.393-.71 2.62-1.768 3.432 1.36.747 2.249 1.954 2.249 3.603zm11.291-3.574c1.509 0 2.778-1.257 2.778-2.807 0-1.443-1.292-2.698-2.778-2.698h-3.873v5.505h3.873zm-3.915 7.364a.803.803 0 01-.79.786h-.855a.787.787 0 01-.791-.786v-14.42c0-.429.347-.786.79-.786h5.671c2.847 0 5.149 2.224 5.149 5.012 0 1.978-1.21 3.72-3.093 4.622l2.808 5.177c.291.54-.053 1.181-.704 1.181h-1.116a.75.75 0 01-.685-.4l-2.808-5.567h-3.576v5.181zm20.953-8.192a772.62 772.62 0 00-1.342-3.004l-2.708 6.052h5.412a687.64 687.64 0 01-1.362-3.048zm-2.137-6.789a.759.759 0 01.706-.443h.22c.33 0 .57.174.714.46l6.612 14.655c.247.533-.115 1.096-.714 1.096h-.876a.768.768 0 01-.714-.46l-1.52-3.374h-7.287l-1.494 3.36a.774.774 0 01-.722.474h-.875c-.598 0-.96-.562-.714-1.094l6.664-14.674zm18.459 7.616c1.508 0 2.777-1.257 2.777-2.807 0-1.443-1.292-2.698-2.777-2.698h-3.873v5.505h3.873zm-3.918 7.365a.803.803 0 01-.79.786h-.855a.787.787 0 01-.791-.786v-14.42c0-.428.348-.786.79-.786h5.672c2.847 0 5.149 2.224 5.149 5.012 0 1.977-1.211 3.72-3.093 4.622l2.808 5.178c.29.54-.054 1.18-.704 1.18h-1.117a.744.744 0 01-.685-.4l-2.807-5.567h-3.577v5.181zm12.088-14.006a.773.773 0 01.67-1.2h1.028c.267 0 .499.147.654.35l4.12 5.66 4.123-5.665a.824.824 0 01.65-.345h1.03c.642 0 1 .665.653 1.225l-5.271 7.155v6.826a.806.806 0 01-.791.788h-.855a.79.79 0 01-.79-.788V25.07l-5.221-7.2zm-271.826-.365c0-.423.364-.785.79-.785h.832c.445 0 .792.357.792.785v9.084c0 2.384 1.484 4.05 3.742 4.05 2.289 0 3.785-1.636 3.785-4.006v-9.128c0-.428.347-.785.79-.785h.833c.426 0 .79.362.79.785v9.215c0 3.57-2.584 6.21-6.198 6.21-3.593 0-6.156-2.639-6.156-6.21v-9.215zm27.476 13.001c.444 0 .792.358.792.787v.632a.79.79 0 01-.792.787h-8.627a.79.79 0 01-.79-.787v-14.42c0-.428.346-.785.79-.785h8.627c.443 0 .792.357.792.785v.632a.791.791 0 01-.792.788h-6.982v4.57h5.91c.425 0 .79.362.79.784v.632c0 .442-.36.787-.79.787h-5.91v4.808h6.982zm15.147 0c.444 0 .792.358.792.787v.632a.793.793 0 01-.792.787h-8.628a.79.79 0 01-.79-.787v-14.42c0-.427.347-.785.79-.785h8.628c.444 0 .792.357.792.785v.632a.784.784 0 01-.233.558.785.785 0 01-.559.23h-6.983v4.57h5.91c.426 0 .791.362.791.784v.632c0 .442-.36.787-.79.787h-5.91v4.808h6.982zm8.077 1.42a.78.78 0 01-.232.557.8.8 0 01-.558.23h-.767a.8.8 0 01-.79-.788V17.266c0-.427.365-.765.79-.765h.368a.75.75 0 01.585.28l9.139 11.326V17.505c0-.427.347-.786.79-.786h.767c.426 0 .792.363.792.786v14.66c0 .426-.367.765-.792.765h-.213a.752.752 0 01-.585-.28l-9.294-11.54v10.815zm15.855-2.074l.03-.04c.04-.05.076-.094.155-.195.085-.11.123-.158.163-.204.377-.492.834-.66 1.309-.253l.118.104a7 7 0 00.925.685c.785.487 1.602.775 2.412.775 1.51 0 2.56-.899 2.56-2.024 0-1.189-.964-2-3.607-3.098-2.96-1.286-4.08-2.444-4.08-4.85 0-2.245 1.87-4.25 5.04-4.25.97.007 1.929.205 2.822.584.307.128.583.264.825.402.148.083.253.15.266.164.415.208.622.732.276 1.28-.032.048-.06.091-.122.191l-.003.006a8.212 8.212 0 01-.135.211c-.31.482-.751.608-1.265.32-.009-.004-.206-.123-.305-.18a7.769 7.769 0 00-.585-.305c-.585-.272-1.156-.442-1.675-.466a2.67 2.67 0 00-.12-.003c-1.75 0-2.647.935-2.647 2.023 0 1.156.806 1.933 2.721 2.727 3.68 1.49 5.096 2.734 5.096 5.18 0 2.442-2.292 4.294-5.105 4.294a7.273 7.273 0 01-3.344-.825 7.02 7.02 0 01-1.523-1.03l-.046-.04c-.365-.323-.47-.69-.156-1.183zm-79.424.758c3.28 0 5.974-2.668 5.974-5.92 0-3.263-2.704-5.967-5.974-5.967-3.266 0-5.952 2.7-5.952 5.966 0 3.257 2.677 5.92 5.952 5.92v.001z",
     fill: "#422980"
   }))), _defs$5 || (_defs$5 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-    id: "logo_qpl_color_svg__clip0"
+    id: "logo-qpl-color_svg__clip0"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "#fff",
     transform: "translate(0 .674)",
@@ -7748,7 +7437,7 @@ function SvgLogoQplColor(_ref) {
 
 var _path$F, _path2$i, _path3$d, _path4$4, _path5$3;
 
-var _excluded$18 = ["title", "titleId"];
+var _excluded$19 = ["title", "titleId"];
 
 function _extends$R() { _extends$R = 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$R.apply(this, arguments); }
 
@@ -7759,7 +7448,7 @@ function _objectWithoutPropertiesLoose$R(source, excluded) { if (source == null)
 function SvgLogoQplWhite(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$Q(_ref, _excluded$18);
+      props = _objectWithoutProperties$Q(_ref, _excluded$19);
 
   return /*#__PURE__*/React.createElement("svg", _extends$R({
     viewBox: "0 0 320 43",
@@ -7791,7 +7480,7 @@ function SvgLogoQplWhite(_ref) {
 
 var _path$G, _path2$j, _path3$e, _path4$5, _path5$4;
 
-var _excluded$19 = ["title", "titleId"];
+var _excluded$1a = ["title", "titleId"];
 
 function _extends$S() { _extends$S = 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$S.apply(this, arguments); }
 
@@ -7802,7 +7491,7 @@ function _objectWithoutPropertiesLoose$S(source, excluded) { if (source == null)
 function SvgLogoReservoirIconColor(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$R(_ref, _excluded$19);
+      props = _objectWithoutProperties$R(_ref, _excluded$1a);
 
   return /*#__PURE__*/React.createElement("svg", _extends$S({
     viewBox: "0 0 105 129",
@@ -7831,7 +7520,7 @@ function SvgLogoReservoirIconColor(_ref) {
 
 var _g$a;
 
-var _excluded$1a = ["title", "titleId"];
+var _excluded$1b = ["title", "titleId"];
 
 function _extends$T() { _extends$T = 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$T.apply(this, arguments); }
 
@@ -7842,7 +7531,7 @@ function _objectWithoutPropertiesLoose$T(source, excluded) { if (source == null)
 function SvgLogoReservoirVerticalColor(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$S(_ref, _excluded$1a);
+      props = _objectWithoutProperties$S(_ref, _excluded$1b);
 
   return /*#__PURE__*/React.createElement("svg", _extends$T({
     viewBox: "0 0 234 261",
@@ -7852,7 +7541,7 @@ function SvgLogoReservoirVerticalColor(_ref) {
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, _g$a || (_g$a = /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#logo_reservoir_vertical_color_svg__clip0_362_388)"
+    clipPath: "url(#logo-reservoir-vertical-color_svg__clip0_362_388)"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M3.63 181.54H17.3a14.33 14.33 0 016.56 1.4 10.237 10.237 0 014.3 3.93 11.481 11.481 0 011.52 6v.06a11.16 11.16 0 01-2.22 7 10.896 10.896 0 01-6.08 3.92l9.4 16.46h-4.27l-8.92-15.9c-.13.011-.26.011-.39 0H7.28v15.87H3.63v-38.74zM17 201.17a9.403 9.403 0 006.57-2.17 7.75 7.75 0 002.35-6 7.624 7.624 0 00-2.42-6 9.677 9.677 0 00-6.66-2.14H7.28v16.35l9.72-.04zM41.15 219a11.557 11.557 0 01-4.39-5 17.6 17.6 0 01-1.54-7.64 17.739 17.739 0 011.54-7.65 11.911 11.911 0 014.34-5.08 11.786 11.786 0 016.52-1.8 11.809 11.809 0 016.46 1.73 11.392 11.392 0 014.22 4.88 16.998 16.998 0 011.49 7.33v1.4H37v-2.82h21.07l-1.8 2.55v-1.35a13.449 13.449 0 00-1.11-5.78 8.22 8.22 0 00-3.06-3.56 8.43 8.43 0 00-12.17 3.64 13.048 13.048 0 00-1.14 5.7v1.35a13.422 13.422 0 001.14 5.8 8.37 8.37 0 003.21 3.65 9.162 9.162 0 004.86 1.28 9.927 9.927 0 003.65-.63 7.162 7.162 0 002.69-1.78 6.86 6.86 0 001.53-2.69l.08-.24h3.49v.27a9.678 9.678 0 01-1.44 3.29c-.66 1.02-1.5 1.911-2.48 2.63a11.782 11.782 0 01-3.44 1.72c-1.358.41-2.771.612-4.19.6a12.665 12.665 0 01-6.74-1.8zM70.65 219.74a9.361 9.361 0 01-3.75-2.93 8.558 8.558 0 01-1.66-4.33v-.25h3.52v.25a6.002 6.002 0 002.34 3.88 8.222 8.222 0 005 1.43 10.21 10.21 0 003.69-.59 5.24 5.24 0 002.39-1.7c.56-.739.86-1.643.85-2.57A3.812 3.812 0 0082 210a8.8 8.8 0 00-4-1.75l-4.22-1a12.702 12.702 0 01-5.86-2.76 6.125 6.125 0 01-1.92-4.66 6.899 6.899 0 011.27-4.12 8.552 8.552 0 013.52-2.81 12.281 12.281 0 015.14-1 11.883 11.883 0 015.2 1.06 8.902 8.902 0 013.52 2.93 8.593 8.593 0 011.49 4.28v.3H82.8v-.19a5.802 5.802 0 00-2.11-3.91 7.231 7.231 0 00-4.69-1.51 8.543 8.543 0 00-3.33.6 5.081 5.081 0 00-2.2 1.7 4.18 4.18 0 00-.78 2.51 3.567 3.567 0 001.21 2.77 9.203 9.203 0 004 1.77l4.19 1c2.8.667 4.783 1.583 5.95 2.75a6.33 6.33 0 011.76 4.68 6.859 6.859 0 01-1.37 4.22 9.117 9.117 0 01-3.75 2.86 13.45 13.45 0 01-5.43 1 13.224 13.224 0 01-5.6-.98zM99.15 219a11.557 11.557 0 01-4.39-5 17.599 17.599 0 01-1.55-7.64 17.74 17.74 0 011.55-7.65 12.282 12.282 0 0117.32-5.15 11.367 11.367 0 014.21 4.88 16.841 16.841 0 011.49 7.33v1.4H95v-2.82h21.09l-1.8 2.55v-1.35a13.31 13.31 0 00-1.12-5.78 8.094 8.094 0 00-3.06-3.56 8.42 8.42 0 00-6.909-.95 8.408 8.408 0 00-5.251 4.59 12.91 12.91 0 00-1.15 5.7v1.35a13.269 13.269 0 001.15 5.8 8.41 8.41 0 003.2 3.65 9.169 9.169 0 004.87 1.26 10.014 10.014 0 003.65-.63 7.124 7.124 0 002.68-1.78 6.62 6.62 0 001.53-2.69l.08-.24h3.5l-.06.27a9.882 9.882 0 01-1.35 3.29 10.197 10.197 0 01-2.49 2.63 11.685 11.685 0 01-3.44 1.72 13.99 13.99 0 01-4.19.6 12.614 12.614 0 01-6.78-1.78zM125.67 192.36h3.55v5h.08a7.999 7.999 0 012.54-4 6.54 6.54 0 014.33-1.48 8.024 8.024 0 012.21.32v3.47a4.558 4.558 0 00-1-.28 9.786 9.786 0 00-1.64-.12 5.997 5.997 0 00-5.68 3.65 9.813 9.813 0 00-.79 4.11v17.29h-3.55l-.05-27.96zM143.52 192.36h3.73l8.49 24.22h.1l8.52-24.22H168l-10.37 27.93h-3.76l-10.35-27.93zM177.41 219a11.85 11.85 0 01-4.47-5 17.174 17.174 0 01-1.6-7.68v-.06a16.99 16.99 0 011.6-7.66 11.775 11.775 0 014.47-5 13.457 13.457 0 0113.31 0 11.994 11.994 0 014.47 5 17.067 17.067 0 011.61 7.68v.06a17.139 17.139 0 01-1.61 7.69 12.099 12.099 0 01-4.46 5 12.366 12.366 0 01-6.66 1.77 12.74 12.74 0 01-6.66-1.8zm11.47-2.73a8.821 8.821 0 003.17-3.89 14.997 14.997 0 001.13-6.07v-.06a14.877 14.877 0 00-1.13-6.07 8.728 8.728 0 00-3.19-3.85A8.63 8.63 0 00184 195a8.497 8.497 0 00-4.75 1.34 8.892 8.892 0 00-3.18 3.87 14.599 14.599 0 00-1.14 6v.06a14.813 14.813 0 001.14 6.07 8.837 8.837 0 003.18 3.89 9.254 9.254 0 009.59 0l.04.04zM204 186.63a2.288 2.288 0 01-.68-1.68 2.206 2.206 0 01.68-1.65 2.354 2.354 0 012.566-.512c.286.119.546.293.764.512a2.217 2.217 0 01.67 1.7 2.354 2.354 0 01-1.446 2.159 2.36 2.36 0 01-2.554-.479v-.05zm-.12 5.73h3.54v27.93h-3.54v-27.93zM215.8 192.36h3.55v5h.08a8.007 8.007 0 012.53-4 6.579 6.579 0 014.34-1.48c.432-.002.864.035 1.29.11.308.05.612.12.91.21v3.47a4.25 4.25 0 00-1-.28 10.002 10.002 0 00-1.64-.12 5.927 5.927 0 00-5.68 3.65 9.813 9.813 0 00-.79 4.11v17.29h-3.59v-27.96zM3.28 235.89H5.2l8.24 11.83-2.2-1.95h.9v-9.88h2.06v13.39h-1.92l-8.23-11.85 2.2 1.94h-.9v9.91H3.28v-13.39zM22 243.79l-4.71-7.9h2.31l3.42 5.9h.06l3.41-5.9h2.32l-4.72 7.9v5.49H22v-5.49zM31.86 235.89h2.08v13.39h-2.08v-13.39zm1 7.07h3.43a2.9 2.9 0 002.09-.7 2.513 2.513 0 00.75-1.94 2.541 2.541 0 00-.75-2 3.002 3.002 0 00-2.09-.7H32.9v-1.75h4a4.815 4.815 0 012.32.55c.64.376 1.163.923 1.51 1.58a4.54 4.54 0 01.57 2.3 4.54 4.54 0 01-.57 2.3 4.004 4.004 0 01-1.56 1.55 4.71 4.71 0 01-2.32.55h-4l.01-1.74zM44.71 235.89h2.08v11.59H53v1.8h-8.29v-13.39zM64.88 235.89h4.72a7.002 7.002 0 013.41.78 5.292 5.292 0 012.17 2.27 7.91 7.91 0 01.76 3.6 7.901 7.901 0 01-.76 3.62 5.257 5.257 0 01-2.18 2.33 6.999 6.999 0 01-3.42.79h-4.7v-13.39zm4.52 11.59c.84.026 1.671-.17 2.41-.57a3.608 3.608 0 001.49-1.66 6.298 6.298 0 00.51-2.67 6.28 6.28 0 00-.51-2.66 3.761 3.761 0 00-1.5-1.65 4.786 4.786 0 00-2.4-.56H67v9.79l2.4-.02zM79.52 235.89H88v1.8h-6.4v3.9h6.07v1.74H81.6v4.15H88v1.8h-8.5l.02-13.39zM93.69 249.05a4.238 4.238 0 01-1.79-1.31 3.652 3.652 0 01-.74-2v-.14h2v.12c.054.4.237.772.52 1.06.306.315.683.552 1.1.69a4.79 4.79 0 001.58.24 4.24 4.24 0 001.55-.25 2.31 2.31 0 001-.71 1.78 1.78 0 00.35-1.09 1.558 1.558 0 00-.58-1.28 4.489 4.489 0 00-1.91-.77l-1.46-.3a6.003 6.003 0 01-2.93-1.34 3.202 3.202 0 01-1-2.41c-.01-.717.21-1.418.63-2a3.996 3.996 0 011.71-1.35 6.06 6.06 0 012.52-.49 6.14 6.14 0 012.46.47c.666.285 1.245.74 1.68 1.32.425.583.668 1.279.7 2v.15h-2v-.12a2 2 0 00-.46-1.07 2.42 2.42 0 00-1-.69 4.412 4.412 0 00-2.84 0 2.126 2.126 0 00-.94.69 1.592 1.592 0 00-.34 1 1.49 1.49 0 00.6 1.23c.552.378 1.18.631 1.84.74l1.46.32a6.21 6.21 0 013 1.33 3.186 3.186 0 01.94 2.44 3.65 3.65 0 01-.62 2.12 3.901 3.901 0 01-1.67 1.35 6.837 6.837 0 01-2.73.49 7.083 7.083 0 01-2.63-.44zM105.26 235.89h2.08v13.39h-2.08v-13.39zM113.85 248.65a5.64 5.64 0 01-2.16-2.41 8.373 8.373 0 01-.77-3.72 7.998 7.998 0 01.76-3.64 5.644 5.644 0 012.16-2.37 6.421 6.421 0 013.31-.83 6.26 6.26 0 012.72.55 5.11 5.11 0 011.91 1.51 5.518 5.518 0 011 2.17v.16h-2.08v-.11a3.676 3.676 0 00-1.31-1.8 3.742 3.742 0 00-2.2-.64 4 4 0 00-2.2.6 3.697 3.697 0 00-1.41 1.71 6.644 6.644 0 00-.49 2.69 6.809 6.809 0 00.5 2.76A4.005 4.005 0 00115 247c.656.418 1.422.63 2.2.61a4.172 4.172 0 001.92-.42 3.241 3.241 0 001.3-1.19 3.479 3.479 0 00.48-1.78V244h-3.51v-1.7h5.57v1.37a6.56 6.56 0 01-.69 3.11 4.686 4.686 0 01-2 2 6.498 6.498 0 01-3.11.69 6.247 6.247 0 01-3.31-.82zM126.56 235.89h1.92l8.24 11.83-2.2-1.95h.9v-9.88h2.07v13.39h-1.92l-8.24-11.85 2.2 1.94h-.9v9.91h-2.07v-13.39zM152 249.05a4.24 4.24 0 01-1.79-1.31 3.569 3.569 0 01-.74-2v-.14h2v.12c.055.398.233.769.51 1.06.311.313.691.55 1.11.69.51.168 1.044.249 1.58.24a4.24 4.24 0 001.55-.25 2.311 2.311 0 001-.71 1.78 1.78 0 00.35-1.09 1.558 1.558 0 00-.58-1.28 4.486 4.486 0 00-1.91-.77l-1.46-.3a6 6 0 01-2.93-1.34 3.208 3.208 0 01-1-2.41 3.417 3.417 0 01.64-2 3.995 3.995 0 011.71-1.35 6.673 6.673 0 015 0 4.1 4.1 0 011.69 1.32c.425.583.668 1.279.7 2v.15h-2v-.12a2.003 2.003 0 00-.46-1.07 2.416 2.416 0 00-1-.69 4.412 4.412 0 00-2.84 0 2.125 2.125 0 00-.94.69 1.59 1.59 0 00-.34 1 1.49 1.49 0 00.6 1.23c.552.378 1.18.631 1.84.74l1.46.32a6.212 6.212 0 013 1.33 3.215 3.215 0 01.94 2.44 3.65 3.65 0 01-.62 2.12 3.895 3.895 0 01-1.76 1.38 6.855 6.855 0 01-2.73.49 7.076 7.076 0 01-2.58-.49zM166.38 243.79l-4.72-7.9H164l3.43 5.9 3.42-5.9h2.32l-4.73 7.9v5.49h-2.08l.02-5.49zM177.85 249.05a4.24 4.24 0 01-1.79-1.31 3.652 3.652 0 01-.74-2v-.14h2v.12c.059.399.241.769.52 1.06.308.317.689.554 1.11.69a4.73 4.73 0 001.57.24 4.24 4.24 0 001.55-.25 2.311 2.311 0 001-.71c.241-.311.368-.696.36-1.09a1.583 1.583 0 00-.58-1.28 4.607 4.607 0 00-1.92-.77l-1.46-.3a6.057 6.057 0 01-2.93-1.34 3.206 3.206 0 01-1-2.41 3.343 3.343 0 01.63-2 3.995 3.995 0 011.71-1.35 6.702 6.702 0 015 0 4.238 4.238 0 011.69 1.32 3.74 3.74 0 01.69 2v.15h-2v-.12a2.003 2.003 0 00-.46-1.07 2.416 2.416 0 00-1-.69 4.412 4.412 0 00-2.84 0 2.18 2.18 0 00-.94.69 1.65 1.65 0 00-.34 1 1.49 1.49 0 00.6 1.23c.552.378 1.18.631 1.84.74l1.46.32a6.163 6.163 0 013 1.33 3.193 3.193 0 01.94 2.44 3.58 3.58 0 01-.62 2.12 3.853 3.853 0 01-1.76 1.38 6.838 6.838 0 01-2.73.49 7.059 7.059 0 01-2.56-.49zM192.36 237.69h-4.1v-1.8h10.27v1.8h-4.09v11.59h-2.08v-11.59zM201.82 235.89h8.5v1.8h-6.42v3.9h6.1v1.74h-6.1v4.15h6.42v1.8h-8.5v-13.39zM214.06 235.89h2.4l4.33 10.68h.06l4.33-10.68h2.41v13.39h-1.9v-9.87h-1l2.17-3.15-5.31 13h-1.54l-5.31-13 2.17 3.15H216v9.87h-1.9l-.04-13.39z",
     fill: "#000"
@@ -7870,7 +7559,7 @@ function SvgLogoReservoirVerticalColor(_ref) {
 
 var _path$H, _path2$k, _path3$f, _path4$6, _path5$5;
 
-var _excluded$1b = ["title", "titleId"];
+var _excluded$1c = ["title", "titleId"];
 
 function _extends$U() { _extends$U = 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$U.apply(this, arguments); }
 
@@ -7881,7 +7570,7 @@ function _objectWithoutPropertiesLoose$U(source, excluded) { if (source == null)
 function SvgLogoSchomburgBlack(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$T(_ref, _excluded$1b);
+      props = _objectWithoutProperties$T(_ref, _excluded$1c);
 
   return /*#__PURE__*/React.createElement("svg", _extends$U({
     viewBox: "0 0 185 79",
@@ -7904,7 +7593,7 @@ function SvgLogoSchomburgBlack(_ref) {
 
 var _path$I, _path2$l, _path3$g, _path4$7, _path5$6;
 
-var _excluded$1c = ["title", "titleId"];
+var _excluded$1d = ["title", "titleId"];
 
 function _extends$V() { _extends$V = 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$V.apply(this, arguments); }
 
@@ -7915,7 +7604,7 @@ function _objectWithoutPropertiesLoose$V(source, excluded) { if (source == null)
 function SvgLogoSchomburgCircleBlack(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$U(_ref, _excluded$1c);
+      props = _objectWithoutProperties$U(_ref, _excluded$1d);
 
   return /*#__PURE__*/React.createElement("svg", _extends$V({
     viewBox: "0 0 67 67",
@@ -7938,7 +7627,7 @@ function SvgLogoSchomburgCircleBlack(_ref) {
 
 var _path$J, _path2$m, _path3$h, _path4$8, _path5$7;
 
-var _excluded$1d = ["title", "titleId"];
+var _excluded$1e = ["title", "titleId"];
 
 function _extends$W() { _extends$W = 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$W.apply(this, arguments); }
 
@@ -7949,7 +7638,7 @@ function _objectWithoutPropertiesLoose$W(source, excluded) { if (source == null)
 function SvgLogoSchomburgCircleColor(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$V(_ref, _excluded$1d);
+      props = _objectWithoutProperties$V(_ref, _excluded$1e);
 
   return /*#__PURE__*/React.createElement("svg", _extends$W({
     viewBox: "0 0 67 67",
@@ -7978,7 +7667,7 @@ function SvgLogoSchomburgCircleColor(_ref) {
 
 var _path$K, _path2$n, _path3$i, _path4$9, _path5$8;
 
-var _excluded$1e = ["title", "titleId"];
+var _excluded$1f = ["title", "titleId"];
 
 function _extends$X() { _extends$X = 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$X.apply(this, arguments); }
 
@@ -7989,7 +7678,7 @@ function _objectWithoutPropertiesLoose$X(source, excluded) { if (source == null)
 function SvgLogoSchomburgCircleWhite(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$W(_ref, _excluded$1e);
+      props = _objectWithoutProperties$W(_ref, _excluded$1f);
 
   return /*#__PURE__*/React.createElement("svg", _extends$X({
     viewBox: "0 0 67 67",
@@ -8013,7 +7702,7 @@ function SvgLogoSchomburgCircleWhite(_ref) {
 
 var _path$L, _path2$o, _path3$j, _path4$a, _path5$9, _path6$2, _path7$2;
 
-var _excluded$1f = ["title", "titleId"];
+var _excluded$1g = ["title", "titleId"];
 
 function _extends$Y() { _extends$Y = 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$Y.apply(this, arguments); }
 
@@ -8024,7 +7713,7 @@ function _objectWithoutPropertiesLoose$Y(source, excluded) { if (source == null)
 function SvgLogoSchomburgColor(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$X(_ref, _excluded$1f);
+      props = _objectWithoutProperties$X(_ref, _excluded$1g);
 
   return /*#__PURE__*/React.createElement("svg", _extends$Y({
     viewBox: "0 0 185 79",
@@ -8059,7 +7748,7 @@ function SvgLogoSchomburgColor(_ref) {
 
 var _path$M, _path2$p, _path3$k, _path4$b, _path5$a;
 
-var _excluded$1g = ["title", "titleId"];
+var _excluded$1h = ["title", "titleId"];
 
 function _extends$Z() { _extends$Z = 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$Z.apply(this, arguments); }
 
@@ -8070,7 +7759,7 @@ function _objectWithoutPropertiesLoose$Z(source, excluded) { if (source == null)
 function SvgLogoSchomburgWhite(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$Y(_ref, _excluded$1g);
+      props = _objectWithoutProperties$Y(_ref, _excluded$1h);
 
   return /*#__PURE__*/React.createElement("svg", _extends$Z({
     viewBox: "0 0 185 79",
@@ -8094,7 +7783,7 @@ function SvgLogoSchomburgWhite(_ref) {
 
 var _g$b, _defs$6;
 
-var _excluded$1h = ["title", "titleId"];
+var _excluded$1i = ["title", "titleId"];
 
 function _extends$_() { _extends$_ = 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$_.apply(this, arguments); }
 
@@ -8105,7 +7794,7 @@ function _objectWithoutPropertiesLoose$_(source, excluded) { if (source == null)
 function SvgLogoSimplyeBlack(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$Z(_ref, _excluded$1h);
+      props = _objectWithoutProperties$Z(_ref, _excluded$1i);
 
   return /*#__PURE__*/React.createElement("svg", _extends$_({
     viewBox: "0 0 512 148",
@@ -8114,7 +7803,7 @@ function SvgLogoSimplyeBlack(_ref) {
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, _g$b || (_g$b = /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#logo_simplye_black_svg__clip0)"
+    clipPath: "url(#logo-simplye-black_svg__clip0)"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M25.017 34.161c-.504-.616-.54-1.441.215-1.69l52.402-17.328a.944.944 0 011.24.898.998.998 0 00.93.945c.415.067.836.084 1.254.05a1.001 1.001 0 001.009-.941l-.003-5.512a1.001 1.001 0 00-.558-.914 1.137 1.137 0 00-.83-.118L21.98 29.023c-2.26.73-2.663 1.004-2.663 3.432l.02 99.764a.916.916 0 00.039.282c1.212 3.697 5.547 5.389 5.547 5.389 4.256 1.615 6.449 2.064 10.304.727 0 0 .085-99.525.035-99.963a.28.28 0 00-.23-.242c-.41-.077-6.716-.21-10.017-4.25"
   }), /*#__PURE__*/React.createElement("path", {
@@ -8122,7 +7811,7 @@ function SvgLogoSimplyeBlack(_ref) {
   }), /*#__PURE__*/React.createElement("path", {
     d: "M112.969 28.139a.946.946 0 00-1.242-.897L65.072 42.744c-12.007 3.546-12.608 3.957-16.436 2.548a10.762 10.762 0 01-4.804-3.209c-.487-.63-.489-1.441.267-1.691l52.402-17.327a.946.946 0 011.24.897.984.984 0 00.93.946c.415.054.833.07 1.25.05a.99.99 0 001.013-.941l-.003-5.419a1.01 1.01 0 00-.557-1.008.99.99 0 00-.831-.117L40.848 36.944c-2.26.732-2.663 1.005-2.663 3.432l.02 97.48c0 .096.004 1.042.002 1.138-.059 3.155 3.655 4.911 5.418 5.699a14.107 14.107 0 0010.47.824l58.236-18.912a.945.945 0 00.638-.894v-18.715a.948.948 0 00-.783-.93.942.942 0 00-.435.027l-46.7 15.307a.986.986 0 01-1.265-.917v-16.534a.944.944 0 01.672-.904l47.793-15.656c.581-.213.718-.312.718-.808l-.037-19.111a.91.91 0 00-1.224-.756l-46.771 15.49c-.603.174-1.15-.439-1.15-1.067l.071-16.602a.945.945 0 01.656-.9l47.895-15.902c.391-.125.555-.68.555-1.091l.005-18.504zM193.94 91.63c.043 3.264-.609 6.5-1.911 9.494a19.556 19.556 0 01-5.499 7.236 25.79 25.79 0 01-8.742 4.574 38.338 38.338 0 01-11.52 1.621 41.503 41.503 0 01-8.569-.811 43.232 43.232 0 01-6.773-1.968 31.143 31.143 0 01-5.094-2.49 32.82 32.82 0 01-3.416-2.373l6.947-11.347c.463.31 1.158.792 2.084 1.447a20.297 20.297 0 003.473 1.911 33.661 33.661 0 004.864 1.679c2.003.521 4.066.774 6.136.752 3.937 0 6.967-.868 9.089-2.605a7.893 7.893 0 003.184-6.31 6.703 6.703 0 00-1.447-4.342 13.8 13.8 0 00-3.821-3.184 48.838 48.838 0 00-5.5-2.721 95.44 95.44 0 01-6.484-3.068 49.257 49.257 0 01-6.599-3.821 25.536 25.536 0 01-5.211-4.747 20.55 20.55 0 01-3.473-6.195 24.361 24.361 0 01-1.274-8.278 19.651 19.651 0 011.969-8.916 20.53 20.53 0 015.326-6.715 24.22 24.22 0 017.873-4.284 30.599 30.599 0 019.726-1.505c2.813-.03 5.624.202 8.394.694 2.181.398 4.329.96 6.426 1.68a26.533 26.533 0 014.631 2.083 41.813 41.813 0 013.126 2.027l-6.599 11.462a32.073 32.073 0 00-2.547-1.505 24.885 24.885 0 00-3.474-1.505 38.012 38.012 0 00-4.284-1.216 21.567 21.567 0 00-4.747-.521 12.53 12.53 0 00-7.526 2.026 6.912 6.912 0 00-2.779 5.963 6.563 6.563 0 001.101 3.88 11.19 11.19 0 003.01 2.836 30.206 30.206 0 004.515 2.431c1.737.773 3.609 1.622 5.616 2.547a110.48 110.48 0 017.41 3.706 26.855 26.855 0 016.31 4.747 21.065 21.065 0 016.079 15.63zM220.454 40.221a8.972 8.972 0 01-2.721 6.484 9.097 9.097 0 01-6.773 2.78 8.91 8.91 0 01-6.716-2.78 9.064 9.064 0 01-2.663-6.483 8.684 8.684 0 012.663-6.369 9.097 9.097 0 016.716-2.663 9.294 9.294 0 016.773 2.663 8.596 8.596 0 012.721 6.368zm-17.252 72.944V56.779h15.515v56.386h-15.515zM275.449 64.305a30.007 30.007 0 017.643-6.484 20.409 20.409 0 0110.42-2.432 18.358 18.358 0 017.584 1.39 13.05 13.05 0 014.978 3.82 14.903 14.903 0 012.721 5.79 31.09 31.09 0 01.81 7.294v39.482h-15.398V76.809a11.606 11.606 0 00-1.447-6.368c-.967-1.465-2.723-2.199-5.268-2.2a9.43 9.43 0 00-3.474.637c-1.037.4-2.012.946-2.895 1.62a20.225 20.225 0 00-2.315 2.085 74.01 74.01 0 00-1.853 2.026v38.556h-15.399V76.809c0-2.855-.521-4.997-1.564-6.426-1.041-1.427-2.72-2.141-5.036-2.142a8.78 8.78 0 00-3.878.868 14.06 14.06 0 00-3.127 2.026 15.322 15.322 0 00-2.2 2.316 73.736 73.736 0 01-1.331 1.737v37.977h-15.399V56.779h15.051v6.946a73.305 73.305 0 012.548-2.662 17.54 17.54 0 013.589-2.721 24.398 24.398 0 014.747-2.084 19.363 19.363 0 016.021-.869c4.013 0 7.159.81 9.437 2.432a14.285 14.285 0 015.035 6.484zM371.897 84.914a37.586 37.586 0 01-1.853 12.157 27.702 27.702 0 01-5.21 9.321 23.497 23.497 0 01-7.989 6.02 23.991 23.991 0 01-10.19 2.143 20.801 20.801 0 01-8.336-1.39 19.832 19.832 0 01-4.632-2.663v28.02h-15.398V56.779h15.052v5.904a21.67 21.67 0 016.078-5.094 18.72 18.72 0 019.553-2.2c7.178 0 12.794 2.547 16.846 7.642 4.052 5.094 6.078 12.389 6.079 21.883zm-16.326 0c0-5.326-.926-9.533-2.779-12.62a9.202 9.202 0 00-8.452-4.632 10.535 10.535 0 00-3.937.695c-1.095.43-2.142.974-3.126 1.62-.831.538-1.59 1.18-2.257 1.911a44.486 44.486 0 00-1.332 1.563v25.357a24.172 24.172 0 003.763 2.547 12.078 12.078 0 005.963 1.274 10.195 10.195 0 009.031-4.69c2.084-3.125 3.126-7.467 3.126-13.025zM380.929 113.165V29.801h15.399v83.364h-15.399zM402.811 56.779h16.441l12.505 37.166h.579l11.463-37.166h15.862l-23.272 62.407a64.516 64.516 0 01-4.053 8.916 25.026 25.026 0 01-5.21 6.599 21.354 21.354 0 01-7.121 4.111 29.982 29.982 0 01-9.9 1.447 31.243 31.243 0 01-5.673-.405c-1.389-.272-2.392-.484-3.01-.637l2.199-12.157a8.43 8.43 0 001.737.405c1.23.14 2.468.197 3.705.173 3.937 0 6.793-.888 8.568-2.663a19.126 19.126 0 004.284-7.178l2.084-5.79-21.188-55.228zM466.725 113.165V36.053h44.461v13.431h-28.368v17.368h25.009v12.736h-25.009v20.146h29.178v13.431h-45.271z"
   }))), _defs$6 || (_defs$6 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-    id: "logo_simplye_black_svg__clip0"
+    id: "logo-simplye-black_svg__clip0"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "#fff",
     transform: "translate(0 .118)",
@@ -8132,7 +7821,7 @@ function SvgLogoSimplyeBlack(_ref) {
 
 var _g$c, _defs$7;
 
-var _excluded$1i = ["title", "titleId"];
+var _excluded$1j = ["title", "titleId"];
 
 function _extends$$() { _extends$$ = 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$$.apply(this, arguments); }
 
@@ -8143,7 +7832,7 @@ function _objectWithoutPropertiesLoose$$(source, excluded) { if (source == null)
 function SvgLogoSimplyeWhite(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$_(_ref, _excluded$1i);
+      props = _objectWithoutProperties$_(_ref, _excluded$1j);
 
   return /*#__PURE__*/React.createElement("svg", _extends$$({
     viewBox: "0 0 512 148",
@@ -8153,7 +7842,7 @@ function SvgLogoSimplyeWhite(_ref) {
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, _g$c || (_g$c = /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#logo_simplye_white_svg__clip0)"
+    clipPath: "url(#logo-simplye-white_svg__clip0)"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M25.017 34.161c-.504-.616-.54-1.441.215-1.69l52.402-17.328a.944.944 0 011.24.898.998.998 0 00.93.945c.415.067.836.084 1.254.05a1.001 1.001 0 001.009-.941l-.003-5.512a1.001 1.001 0 00-.558-.914 1.137 1.137 0 00-.83-.118L21.98 29.023c-2.26.73-2.663 1.004-2.663 3.432l.02 99.764a.916.916 0 00.039.282c1.212 3.697 5.547 5.389 5.547 5.389 4.256 1.615 6.449 2.064 10.304.727 0 0 .085-99.525.035-99.963a.28.28 0 00-.23-.242c-.41-.077-6.716-.21-10.017-4.25"
   }), /*#__PURE__*/React.createElement("path", {
@@ -8161,7 +7850,7 @@ function SvgLogoSimplyeWhite(_ref) {
   }), /*#__PURE__*/React.createElement("path", {
     d: "M112.969 28.139a.946.946 0 00-1.242-.897L65.072 42.744c-12.007 3.546-12.608 3.957-16.436 2.548a10.762 10.762 0 01-4.804-3.209c-.487-.63-.489-1.441.267-1.691l52.402-17.327a.946.946 0 011.24.897.984.984 0 00.93.946c.415.054.833.07 1.25.05a.99.99 0 001.013-.941l-.003-5.419a1.01 1.01 0 00-.557-1.008.99.99 0 00-.831-.117L40.848 36.944c-2.26.732-2.663 1.005-2.663 3.432l.02 97.48c0 .096.004 1.042.002 1.138-.059 3.155 3.655 4.911 5.418 5.699a14.107 14.107 0 0010.47.824l58.236-18.912a.945.945 0 00.638-.894v-18.715a.948.948 0 00-.783-.93.942.942 0 00-.435.027l-46.7 15.307a.986.986 0 01-1.265-.917v-16.534a.944.944 0 01.672-.904l47.793-15.656c.581-.213.718-.312.718-.808l-.037-19.111a.91.91 0 00-1.224-.756l-46.771 15.49c-.603.174-1.15-.439-1.15-1.067l.071-16.602a.945.945 0 01.656-.9l47.895-15.902c.391-.125.555-.68.555-1.091l.005-18.504zM193.94 91.63c.043 3.264-.609 6.5-1.911 9.494a19.556 19.556 0 01-5.499 7.236 25.79 25.79 0 01-8.742 4.574 38.338 38.338 0 01-11.52 1.621 41.503 41.503 0 01-8.569-.811 43.232 43.232 0 01-6.773-1.968 31.143 31.143 0 01-5.094-2.49 32.82 32.82 0 01-3.416-2.373l6.947-11.347c.463.31 1.158.792 2.084 1.447a20.297 20.297 0 003.473 1.911 33.661 33.661 0 004.864 1.679c2.003.521 4.066.774 6.136.752 3.937 0 6.967-.868 9.089-2.605a7.893 7.893 0 003.184-6.31 6.703 6.703 0 00-1.447-4.342 13.8 13.8 0 00-3.821-3.184 48.838 48.838 0 00-5.5-2.721 95.44 95.44 0 01-6.484-3.068 49.257 49.257 0 01-6.599-3.821 25.536 25.536 0 01-5.211-4.747 20.55 20.55 0 01-3.473-6.195 24.361 24.361 0 01-1.274-8.278 19.651 19.651 0 011.969-8.916 20.53 20.53 0 015.326-6.715 24.22 24.22 0 017.873-4.284 30.599 30.599 0 019.726-1.505c2.813-.03 5.624.202 8.394.694 2.181.398 4.329.96 6.426 1.68a26.533 26.533 0 014.631 2.083 41.813 41.813 0 013.126 2.027l-6.599 11.462a32.073 32.073 0 00-2.547-1.505 24.885 24.885 0 00-3.474-1.505 38.012 38.012 0 00-4.284-1.216 21.567 21.567 0 00-4.747-.521 12.53 12.53 0 00-7.526 2.026 6.912 6.912 0 00-2.779 5.963 6.563 6.563 0 001.101 3.88 11.19 11.19 0 003.01 2.836 30.206 30.206 0 004.515 2.431c1.737.773 3.609 1.622 5.616 2.547a110.48 110.48 0 017.41 3.706 26.855 26.855 0 016.31 4.747 21.065 21.065 0 016.079 15.63zM220.454 40.221a8.972 8.972 0 01-2.721 6.484 9.097 9.097 0 01-6.773 2.78 8.91 8.91 0 01-6.716-2.78 9.064 9.064 0 01-2.663-6.483 8.684 8.684 0 012.663-6.369 9.097 9.097 0 016.716-2.663 9.294 9.294 0 016.773 2.663 8.596 8.596 0 012.721 6.368zm-17.252 72.944V56.779h15.515v56.386h-15.515zM275.449 64.305a30.007 30.007 0 017.643-6.484 20.409 20.409 0 0110.42-2.432 18.358 18.358 0 017.584 1.39 13.05 13.05 0 014.978 3.82 14.903 14.903 0 012.721 5.79 31.09 31.09 0 01.81 7.294v39.482h-15.398V76.809a11.606 11.606 0 00-1.447-6.368c-.967-1.465-2.723-2.199-5.268-2.2a9.43 9.43 0 00-3.474.637c-1.037.4-2.012.946-2.895 1.62a20.225 20.225 0 00-2.315 2.085 74.01 74.01 0 00-1.853 2.026v38.556h-15.399V76.809c0-2.855-.521-4.997-1.564-6.426-1.041-1.427-2.72-2.141-5.036-2.142a8.78 8.78 0 00-3.878.868 14.06 14.06 0 00-3.127 2.026 15.322 15.322 0 00-2.2 2.316 73.736 73.736 0 01-1.331 1.737v37.977h-15.399V56.779h15.051v6.946a73.305 73.305 0 012.548-2.662 17.54 17.54 0 013.589-2.721 24.398 24.398 0 014.747-2.084 19.363 19.363 0 016.021-.869c4.013 0 7.159.81 9.437 2.432a14.285 14.285 0 015.035 6.484zM371.897 84.914a37.586 37.586 0 01-1.853 12.157 27.702 27.702 0 01-5.21 9.321 23.497 23.497 0 01-7.989 6.02 23.991 23.991 0 01-10.19 2.143 20.801 20.801 0 01-8.336-1.39 19.832 19.832 0 01-4.632-2.663v28.02h-15.398V56.779h15.052v5.904a21.67 21.67 0 016.078-5.094 18.72 18.72 0 019.553-2.2c7.178 0 12.794 2.547 16.846 7.642 4.052 5.094 6.078 12.389 6.079 21.883zm-16.326 0c0-5.326-.926-9.533-2.779-12.62a9.202 9.202 0 00-8.452-4.632 10.535 10.535 0 00-3.937.695c-1.095.43-2.142.974-3.126 1.62-.831.538-1.59 1.18-2.257 1.911a44.486 44.486 0 00-1.332 1.563v25.357a24.172 24.172 0 003.763 2.547 12.078 12.078 0 005.963 1.274 10.195 10.195 0 009.031-4.69c2.084-3.125 3.126-7.467 3.126-13.025zM380.929 113.165V29.801h15.399v83.364h-15.399zM402.811 56.779h16.441l12.505 37.166h.579l11.463-37.166h15.862l-23.272 62.407a64.516 64.516 0 01-4.053 8.916 25.026 25.026 0 01-5.21 6.599 21.354 21.354 0 01-7.121 4.111 29.982 29.982 0 01-9.9 1.447 31.243 31.243 0 01-5.673-.405c-1.389-.272-2.392-.484-3.01-.637l2.199-12.157a8.43 8.43 0 001.737.405c1.23.14 2.468.197 3.705.173 3.937 0 6.793-.888 8.568-2.663a19.126 19.126 0 004.284-7.178l2.084-5.79-21.188-55.228zM466.725 113.165V36.053h44.461v13.431h-28.368v17.368h25.009v12.736h-25.009v20.146h29.178v13.431h-45.271z"
   }))), _defs$7 || (_defs$7 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-    id: "logo_simplye_white_svg__clip0"
+    id: "logo-simplye-white_svg__clip0"
   }, /*#__PURE__*/React.createElement("path", {
     transform: "translate(0 .118)",
     d: "M0 0h511.984v147H0z"
@@ -8170,7 +7859,7 @@ function SvgLogoSimplyeWhite(_ref) {
 
 var _g$d, _defs$8;
 
-var _excluded$1j = ["title", "titleId"];
+var _excluded$1k = ["title", "titleId"];
 
 function _extends$10() { _extends$10 = 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$10.apply(this, arguments); }
 
@@ -8181,7 +7870,7 @@ function _objectWithoutPropertiesLoose$10(source, excluded) { if (source == null
 function SvgLogoSimplyeColor(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$$(_ref, _excluded$1j);
+      props = _objectWithoutProperties$$(_ref, _excluded$1k);
 
   return /*#__PURE__*/React.createElement("svg", _extends$10({
     viewBox: "0 0 682 196",
@@ -8191,7 +7880,7 @@ function SvgLogoSimplyeColor(_ref) {
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, _g$d || (_g$d = /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#logo_simplye_color_svg__clip0)"
+    clipPath: "url(#logo-simplye-color_svg__clip0)"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M32.454 44.821c-.672-.822-.72-1.921.288-2.254l69.866-23.102a1.258 1.258 0 011.654 1.195c-.001.69.559 1.155 1.242 1.26.528.083 1.108.12 1.67.068.727-.068 1.346-.526 1.346-1.255l-.004-7.35c0-.376-.164-.94-.744-1.218-.324-.158-.735-.28-1.108-.156l-78.258 25.96c-3.012.975-3.55 1.34-3.55 4.576l.027 133.016c0 .126.013.257.052.377 1.616 4.929 7.396 7.184 7.396 7.184 5.674 2.155 8.598 2.753 13.738.969 0 0 .115-132.697.047-133.28a.373.373 0 00-.306-.323c-.546-.103-8.954-.279-13.355-5.667",
     fill: "#1B385E"
@@ -8205,7 +7894,7 @@ function SvgLogoSimplyeColor(_ref) {
     d: "M257.68 121.443c0 4.631-.848 8.852-2.547 12.658-1.698 3.81-4.144 7.024-7.333 9.65-3.19 2.624-7.077 4.657-11.654 6.096-4.581 1.44-9.703 2.162-15.361 2.162-4.221 0-8.028-.362-11.424-1.08-3.396-.721-6.406-1.594-9.03-2.625-2.626-1.027-4.891-2.134-6.793-3.319-1.906-1.181-3.423-2.238-4.554-3.165l9.261-15.128c.619.412 1.546 1.056 2.78 1.93 1.235.876 2.779 1.724 4.631 2.548 1.853.824 4.015 1.569 6.484 2.237 2.47.67 5.196 1.004 8.181 1.004 5.249 0 9.288-1.158 12.12-3.473 2.829-2.316 4.245-5.119 4.245-8.414 0-2.264-.645-4.193-1.929-5.79-1.29-1.593-2.987-3.009-5.096-4.245-2.11-1.235-4.554-2.443-7.332-3.627a127.762 127.762 0 01-8.645-4.092c-3.192-1.544-6.124-3.241-8.8-5.093-2.677-1.853-4.993-3.961-6.947-6.33-1.955-2.366-3.499-5.118-4.631-8.259-1.134-3.139-1.698-6.817-1.698-11.038 0-4.424.874-8.387 2.624-11.887 1.75-3.497 4.115-6.484 7.101-8.954 2.984-2.47 6.484-4.372 10.497-5.71 4.015-1.338 8.338-2.009 12.968-2.009 4.219 0 7.951.31 11.193.927 3.241.617 6.097 1.365 8.568 2.239 2.469.876 4.528 1.8 6.175 2.778 1.645.979 3.034 1.879 4.167 2.702l-8.799 15.283c-.926-.617-2.06-1.285-3.395-2.007-1.34-.718-2.884-1.389-4.632-2.008a50.57 50.57 0 00-5.712-1.62 28.702 28.702 0 00-6.329-.694c-4.221 0-7.565.901-10.034 2.701-2.471 1.803-3.706 4.452-3.706 7.95 0 2.06.487 3.782 1.467 5.172.976 1.39 2.315 2.65 4.013 3.782 1.699 1.134 3.706 2.214 6.022 3.242a601.234 601.234 0 017.486 3.396 147.494 147.494 0 019.88 4.94c3.189 1.75 5.994 3.86 8.414 6.329 2.416 2.471 4.373 5.379 5.865 8.723 1.491 3.345 2.239 7.385 2.239 12.118zm12.349 28.714v-75.18h20.686v75.18h-20.686zm23.002-97.256c0 3.294-1.211 6.174-3.628 8.645-2.418 2.47-5.429 3.705-9.03 3.705-3.604 0-6.588-1.236-8.955-3.705-2.368-2.47-3.55-5.35-3.55-8.645 0-3.293 1.182-6.123 3.55-8.49 2.367-2.367 5.351-3.551 8.955-3.551 3.601 0 6.612 1.184 9.03 3.55 2.417 2.368 3.628 5.198 3.628 8.49zm73.325 32.11c3.089-3.602 6.485-6.484 10.19-8.645 3.706-2.162 8.336-3.242 13.893-3.242 4.015 0 7.385.618 10.112 1.852 2.727 1.235 4.94 2.933 6.637 5.095 1.699 2.161 2.907 4.734 3.628 7.718.719 2.987 1.081 6.228 1.081 9.725v52.643h-20.531v-48.473c0-3.706-.643-6.535-1.929-8.49-1.29-1.956-3.628-2.934-7.024-2.934-1.648 0-3.192.284-4.632.848a15.621 15.621 0 00-3.86 2.161 26.835 26.835 0 00-3.086 2.78 92.35 92.35 0 00-2.471 2.701v51.407h-20.532v-48.473c0-3.807-.694-6.663-2.085-8.57-1.388-1.902-3.626-2.854-6.714-2.854-1.852 0-3.578.385-5.171 1.157-1.597.772-2.987 1.674-4.169 2.701-1.184 1.031-2.161 2.06-2.932 3.088a106.536 106.536 0 01-1.776 2.316v50.635h-20.532v-75.18h20.068v9.262a97.36 97.36 0 013.397-3.55c1.336-1.337 2.934-2.547 4.785-3.629 1.854-1.081 3.962-2.006 6.33-2.778 2.366-.772 5.041-1.158 8.027-1.158 5.351 0 9.545 1.08 12.583 3.242 3.034 2.16 5.272 5.043 6.713 8.645zm106.828 27.478c0-7.1-1.235-12.71-3.705-16.827-2.471-4.114-6.228-6.174-11.269-6.174-1.956 0-3.704.308-5.25.925-1.544.619-2.933 1.34-4.167 2.162-1.235.825-2.238 1.674-3.01 2.547a59.725 59.725 0 00-1.776 2.084v33.808c1.336 1.134 3.01 2.266 5.018 3.397 2.006 1.133 4.654 1.698 7.95 1.698 5.249 0 9.261-2.085 12.041-6.253 2.779-4.168 4.168-9.957 4.168-17.367zm21.767 0c0 5.97-.825 11.374-2.47 16.21-1.647 4.838-3.964 8.98-6.947 12.426a31.322 31.322 0 01-10.651 8.028c-4.118 1.904-8.647 2.856-13.587 2.856-4.629 0-8.336-.616-11.114-1.852-2.779-1.236-4.839-2.417-6.175-3.551v37.358h-20.531V74.976h20.069v7.873c2.057-2.57 4.758-4.836 8.103-6.791 3.344-1.955 7.588-2.934 12.737-2.934 9.571 0 17.059 3.396 22.461 10.188 5.403 6.793 8.105 16.518 8.105 29.177zm12.041 37.668V39.007h20.532v111.15h-20.532zm29.176-75.18h21.92l16.673 49.554h.772l15.284-49.555h21.149l-31.029 83.208c-1.649 4.425-3.449 8.387-5.404 11.887-1.956 3.497-4.272 6.43-6.946 8.8-2.679 2.365-5.843 4.192-9.495 5.48-3.654 1.285-8.054 1.93-13.198 1.93-3.192 0-5.713-.181-7.565-.541-1.852-.361-3.192-.644-4.013-.848l2.932-16.21c.514.205 1.286.385 2.316.541 1.028.154 2.674.23 4.941.23 5.248 0 9.054-1.183 11.422-3.551 2.367-2.368 4.269-5.557 5.712-9.569l2.779-7.72-28.25-73.637zm85.216 75.18V47.342h59.28v17.91h-37.823v23.156h33.344v16.981h-33.344v26.861h38.903v17.907h-60.36z",
     fill: "#1B385E"
   }))), _defs$8 || (_defs$8 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-    id: "logo_simplye_color_svg__clip0"
+    id: "logo-simplye-color_svg__clip0"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "#fff",
     transform: "translate(0 .118)",
@@ -8215,7 +7904,7 @@ function SvgLogoSimplyeColor(_ref) {
 
 var _path$N;
 
-var _excluded$1k = ["title", "titleId"];
+var _excluded$1l = ["title", "titleId"];
 
 function _extends$11() { _extends$11 = 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$11.apply(this, arguments); }
 
@@ -8226,7 +7915,7 @@ function _objectWithoutPropertiesLoose$11(source, excluded) { if (source == null
 function SvgLogoSnflBlack(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$10(_ref, _excluded$1k);
+      props = _objectWithoutProperties$10(_ref, _excluded$1l);
 
   return /*#__PURE__*/React.createElement("svg", _extends$11({
     viewBox: "0 0 84 111",
@@ -8241,7 +7930,7 @@ function SvgLogoSnflBlack(_ref) {
 
 var _path$O;
 
-var _excluded$1l = ["title", "titleId"];
+var _excluded$1m = ["title", "titleId"];
 
 function _extends$12() { _extends$12 = 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$12.apply(this, arguments); }
 
@@ -8252,7 +7941,7 @@ function _objectWithoutPropertiesLoose$12(source, excluded) { if (source == null
 function SvgLogoSnflWhite(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$11(_ref, _excluded$1l);
+      props = _objectWithoutProperties$11(_ref, _excluded$1m);
 
   return /*#__PURE__*/React.createElement("svg", _extends$12({
     viewBox: "0 0 84 111",
@@ -8268,7 +7957,7 @@ function SvgLogoSnflWhite(_ref) {
 
 var _path$P, _path2$q, _path3$l, _path4$c, _path5$b, _path6$3, _path7$3, _path8$1, _path9$1, _path10$1, _path11$1, _path12$1, _path13$1, _path14, _path15, _path16, _path17, _path18, _path19, _path20, _path21, _path22, _path23, _path24, _path25, _path26, _path27, _path28, _path29, _path30, _path31, _path32, _path33, _path34, _path35, _path36, _path37, _path38, _path39, _path40, _path41, _path42, _path43, _path44, _path45, _path46, _path47, _path48, _path49, _path50, _path51, _path52, _path53, _path54, _path55;
 
-var _excluded$1m = ["title", "titleId"];
+var _excluded$1n = ["title", "titleId"];
 
 function _extends$13() { _extends$13 = 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$13.apply(this, arguments); }
 
@@ -8279,7 +7968,7 @@ function _objectWithoutPropertiesLoose$13(source, excluded) { if (source == null
 function SvgLogoTreasuresColor(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$12(_ref, _excluded$1m);
+      props = _objectWithoutProperties$12(_ref, _excluded$1n);
 
   return /*#__PURE__*/React.createElement("svg", _extends$13({
     viewBox: "0 0 324 265",
@@ -8458,7 +8147,7 @@ function SvgLogoTreasuresColor(_ref) {
 
 var _path$Q, _path2$r, _path3$m, _path4$d, _path5$c, _path6$4, _path7$4, _path8$2, _path9$2, _path10$2, _path11$2, _path12$2, _path13$2, _path14$1, _path15$1, _path16$1, _path17$1, _path18$1, _path19$1, _path20$1, _path21$1, _path22$1, _path23$1, _path24$1, _path25$1, _path26$1, _path27$1, _path28$1, _path29$1, _path30$1, _path31$1, _path32$1, _path33$1, _path34$1, _path35$1, _path36$1, _path37$1, _path38$1, _path39$1, _path40$1, _path41$1, _path42$1, _path43$1, _path44$1, _path45$1, _path46$1, _path47$1, _path48$1, _path49$1, _path50$1, _path51$1, _path52$1, _path53$1, _path54$1, _path55$1;
 
-var _excluded$1n = ["title", "titleId"];
+var _excluded$1o = ["title", "titleId"];
 
 function _extends$14() { _extends$14 = 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$14.apply(this, arguments); }
 
@@ -8469,7 +8158,7 @@ function _objectWithoutPropertiesLoose$14(source, excluded) { if (source == null
 function SvgLogoTreasuresColorNegative(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
-      props = _objectWithoutProperties$13(_ref, _excluded$1n);
+      props = _objectWithoutProperties$13(_ref, _excluded$1o);
 
   return /*#__PURE__*/React.createElement("svg", _extends$14({
     viewBox: "0 0 327 266",
@@ -8648,48 +8337,48 @@ function SvgLogoTreasuresColorNegative(_ref) {
 
 /* eslint-disable camelcase */
 var logoSvgs = {
-  logo_bpl_black: SvgLogoBplBlack,
-  logo_bpl_white: SvgLogoBplWhite,
-  logo_clever_color: SvgLogoCleverColor,
-  logo_clever_white: SvgLogoCleverWhite,
-  logo_firstbook_color: SvgLogoFirstbookColor,
-  logo_firstbook_color_negative: SvgLogoFirstbookColorNegative,
-  logo_lpa_black: SvgLogoLpaBlack,
-  logo_lpa_color: SvgLogoLpaColor,
-  logo_lpa_white: SvgLogoLpaWhite,
-  logo_mln_black: SvgLogoMlnBlack,
-  logo_mln_white: SvgLogoMlnWhite,
-  logo_nypl_full_black: SvgLogoNyplFullBlack,
-  logo_nypl_full_white: SvgLogoNyplFullWhite,
-  logo_nypl_lion_black: SvgLogoNyplLionBlack,
-  logo_nypl_lion_white: SvgLogoNyplLionWhite,
-  logo_openebooks_color: SvgLogoOpenebooksColor,
-  logo_openebooks_negative: SvgLogoOpenebooksNegative,
-  logo_openebooks_wtext_color: SvgLogoOpenebooksWtextColor,
-  logo_openebooks_wtext_negative: SvgLogoOpenebooksWtextNegative,
-  logo_qpl_alt_black: SvgLogoQplAltBlack,
-  logo_qpl_alt_white: SvgLogoQplAltWhite,
-  logo_qpl_black: SvgLogoQplBlack,
-  logo_qpl_color: SvgLogoQplColor,
-  logo_qpl_white: SvgLogoQplWhite,
-  logo_reservoir_icon_color: SvgLogoReservoirIconColor,
-  logo_reservoir_vertical_color: SvgLogoReservoirVerticalColor,
-  logo_schomburg_black: SvgLogoSchomburgBlack,
-  logo_schomburg_circle_black: SvgLogoSchomburgCircleBlack,
-  logo_schomburg_circle_color: SvgLogoSchomburgCircleColor,
-  logo_schomburg_circle_white: SvgLogoSchomburgCircleWhite,
-  logo_schomburg_color: SvgLogoSchomburgColor,
-  logo_schomburg_white: SvgLogoSchomburgWhite,
-  logo_simplye_black: SvgLogoSimplyeBlack,
-  logo_simplye_white: SvgLogoSimplyeWhite,
-  logo_simplye_color: SvgLogoSimplyeColor,
-  logo_snfl_black: SvgLogoSnflBlack,
-  logo_snfl_white: SvgLogoSnflWhite,
-  logo_treasures_color: SvgLogoTreasuresColor,
-  logo_treasures_color_negative: SvgLogoTreasuresColorNegative
-};
-
-var _excluded$1o = ["additionalStyles", "children", "className", "decorative", "id", "name", "size", "title"];
+  bplBlack: SvgLogoBplBlack,
+  bplWhite: SvgLogoBplWhite,
+  cleverColor: SvgLogoCleverColor,
+  cleverWhite: SvgLogoCleverWhite,
+  firstbookColor: SvgLogoFirstbookColor,
+  firstbookColorNegative: SvgLogoFirstbookColorNegative,
+  lpaBlack: SvgLogoLpaBlack,
+  lpaColor: SvgLogoLpaColor,
+  lpaWhite: SvgLogoLpaWhite,
+  mlnBlack: SvgLogoMlnBlack,
+  mlnWhite: SvgLogoMlnWhite,
+  nyplFullBlack: SvgLogoNyplFullBlack,
+  nyplFullWhite: SvgLogoNyplFullWhite,
+  nyplLionBlack: SvgLogoNyplLionBlack,
+  nyplLionWhite: SvgLogoNyplLionWhite,
+  openebooksColor: SvgLogoOpenebooksColor,
+  openebooksNegative: SvgLogoOpenebooksNegative,
+  openebooksWithTextColor: SvgLogoOpenebooksWithTextColor,
+  openebooksWithTextNegative: SvgLogoOpenebooksWithTextNegative,
+  qplAltBlack: SvgLogoQplAltBlack,
+  qplAltWhite: SvgLogoQplAltWhite,
+  qplBlack: SvgLogoQplBlack,
+  qplColor: SvgLogoQplColor,
+  qplWhite: SvgLogoQplWhite,
+  reservoirIconColor: SvgLogoReservoirIconColor,
+  reservoirVerticalColor: SvgLogoReservoirVerticalColor,
+  schomburgBlack: SvgLogoSchomburgBlack,
+  schomburgCircleBlack: SvgLogoSchomburgCircleBlack,
+  schomburgCircleColor: SvgLogoSchomburgCircleColor,
+  schomburgCircleWhite: SvgLogoSchomburgCircleWhite,
+  schomburgColor: SvgLogoSchomburgColor,
+  schomburgWhite: SvgLogoSchomburgWhite,
+  simplyeBlack: SvgLogoSimplyeBlack,
+  simplyeWhite: SvgLogoSimplyeWhite,
+  simplyeColor: SvgLogoSimplyeColor,
+  snflBlack: SvgLogoSnflBlack,
+  snflWhite: SvgLogoSnflWhite,
+  treasuresColor: SvgLogoTreasuresColor,
+  treasuresColorNegative: SvgLogoTreasuresColorNegative
+};
+
+var _excluded$1p = ["children", "className", "decorative", "id", "name", "size", "title"];
 /**
  * The `Logo` component renders SVG-based logos and color variants that are
  * commonly used by the New York Public Library.
@@ -8698,19 +8387,17 @@ var _excluded$1o = ["additionalStyles", "children", "className", "decorative", "
 var Logo$1 = /*#__PURE__*/react.chakra(function (props) {
   var _children$props, _children$props2;
 
-  var _props$additionalStyl = props.additionalStyles,
-      additionalStyles = _props$additionalStyl === void 0 ? {} : _props$additionalStyl,
-      children = props.children,
+  var children = props.children,
       className = props.className,
       _props$decorative = props.decorative,
       decorative = _props$decorative === void 0 ? false : _props$decorative,
       id = props.id,
       name = props.name,
       _props$size = props.size,
-      size = _props$size === void 0 ? exports.LogoSizes.Medium : _props$size,
+      size = _props$size === void 0 ? "medium" : _props$size,
       _props$title = props.title,
       title = _props$title === void 0 ? name + " logo" : _props$title,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1o);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1p);
 
   var styles = react.useStyleConfig("Logo", {
     size: size
@@ -8742,7 +8429,7 @@ var Logo$1 = /*#__PURE__*/react.chakra(function (props) {
     return React.createElement(react.Icon, Object.assign({
       as: SvgComponent
     }, logoProps, {
-      __css: _extends({}, styles, additionalStyles)
+      __css: styles
     }));
   } // If no `name` prop was passed, we expect a child SVG element to be passed.
   // Apply logo props to the SVG child.
@@ -8754,48 +8441,124 @@ var Logo$1 = /*#__PURE__*/react.chakra(function (props) {
     console.warn("NYPL Reservoir Logo: An `svg` element must be passed to the `Logo` " + "component as its child.");
   }
 
-  return React.createElement(react.Box, Object.assign({
+  return React.createElement(react.Box, {
     __css: styles
-  }, rest), childSVG);
+  }, childSVG);
 });
 
-/** Full-screen modal that appears on top of the body of the page. */
+var _excluded$1q = ["bodyContent", "closeButtonLabel", "headingText", "id", "isOpen", "onClose"],
+    _excluded2$5 = ["buttonText", "id", "modalProps"],
+    _excluded3$2 = ["bodyContent", "closeButtonLabel", "headingText", "id"];
+var BaseModal = /*#__PURE__*/react.chakra(function (_ref) {
+  var bodyContent = _ref.bodyContent,
+      _ref$closeButtonLabel = _ref.closeButtonLabel,
+      closeButtonLabel = _ref$closeButtonLabel === void 0 ? "Close" : _ref$closeButtonLabel,
+      headingText = _ref.headingText,
+      id = _ref.id,
+      isOpen = _ref.isOpen,
+      onClose = _ref.onClose,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$1q);
 
-var Modal = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(Modal, _React$Component);
+  // Based on --nypl-breakpoint-medium
+  var breakpointMedium = 600;
+  var defaultSize = "xl";
+  var fullSize = "full";
 
-  function Modal() {
-    return _React$Component.apply(this, arguments) || this;
-  }
+  var _React$useState = React.useState(defaultSize),
+      size = _React$useState[0],
+      setSize = _React$useState[1];
 
-  var _proto = Modal.prototype;
+  var windowDimensions = useWindowSize();
+  React.useEffect(function () {
+    if (windowDimensions.width <= breakpointMedium) {
+      setSize(fullSize);
+    } else {
+      setSize(defaultSize);
+    }
+  }, [windowDimensions.width]);
+  return React.createElement(react.Modal, Object.assign({
+    id: id,
+    isOpen: isOpen,
+    onClose: onClose,
+    scrollBehavior: "inside",
+    size: size
+  }, rest), React.createElement(react.ModalOverlay, null), React.createElement(react.ModalContent, null, React.createElement(react.ModalHeader, null, headingText), React.createElement(react.ModalCloseButton, null), React.createElement(react.ModalBody, null, bodyContent), React.createElement(react.ModalFooter, null, React.createElement(ButtonGroup, null, React.createElement(Button, {
+    id: "modal-close-btn",
+    onClick: onClose
+  }, closeButtonLabel)))));
+});
+/**
+ * The `ModalTrigger` component renders a button that you click to open the
+ * internal `Modal` component. Note that props to update the internal `Modal`
+ * component are passed through to the `modalProps` prop.
+ */
 
-  _proto.componentDidMount = function componentDidMount() {
-    document.body.classList.add("no-scroll");
-  };
+var ModalTrigger = /*#__PURE__*/react.chakra(function (_ref2) {
+  var buttonText = _ref2.buttonText,
+      id = _ref2.id,
+      modalProps = _ref2.modalProps,
+      rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$5);
 
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    document.body.classList.remove("no-scroll");
-  };
+  var _useDisclosure = react.useDisclosure(),
+      isOpen = _useDisclosure.isOpen,
+      onOpen = _useDisclosure.onOpen,
+      onClose = _useDisclosure.onClose;
 
-  _proto.render = function render() {
-    var _this$props = this.props,
-        id = _this$props.id,
-        className = _this$props.className;
-    return React.createElement("div", {
-      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-      tabIndex: 0,
-      className: "modal " + className,
-      id: id
-    }, this.props.children);
+  var finalOnCloseHandler = function finalOnCloseHandler() {
+    modalProps.onClose && modalProps.onClose();
+    onClose();
   };
 
-  return Modal;
-}(React.Component);
+  return React.createElement(React.Fragment, null, React.createElement(Button, {
+    id: "modal-open-btn",
+    onClick: onOpen
+  }, buttonText), React.createElement(BaseModal, Object.assign({
+    bodyContent: modalProps.bodyContent,
+    closeButtonLabel: modalProps.closeButtonLabel,
+    headingText: modalProps.headingText,
+    id: id,
+    isOpen: isOpen,
+    onClose: finalOnCloseHandler
+  }, rest)));
+});
+/**
+ * This hook function can be used to render the `Modal` component with a custom
+ * open button(s) and optional custom close button(s). You must render your own
+ * button and pass the appropriate `onOpen` and ` handler for the modal to open.
+ */
+
+function useModal() {
+  var _useDisclosure2 = react.useDisclosure(),
+      isOpen = _useDisclosure2.isOpen,
+      onClose = _useDisclosure2.onClose,
+      onOpen = _useDisclosure2.onOpen;
+
+  var Modal = react.chakra(function (_ref3) {
+    var bodyContent = _ref3.bodyContent,
+        closeButtonLabel = _ref3.closeButtonLabel,
+        headingText = _ref3.headingText,
+        id = _ref3.id,
+        rest = _objectWithoutPropertiesLoose(_ref3, _excluded3$2);
+
+    return React.createElement(BaseModal, Object.assign({
+      bodyContent: bodyContent,
+      closeButtonLabel: closeButtonLabel,
+      headingText: headingText,
+      id: id,
+      isOpen: isOpen,
+      onClose: onClose
+    }, rest));
+  });
+  return {
+    onClose: onClose,
+    onOpen: onOpen,
+    Modal: Modal
+  };
+}
 
-var _excluded$1p = ["children", "icon", "id", "isCentered", "notificationType"],
-    _excluded2$5 = ["alignText", "children", "icon", "notificationType"],
-    _excluded3$2 = ["ariaLabel", "className", "dismissible", "icon", "id", "isCentered", "noMargin", "notificationContent", "notificationHeading", "notificationType", "showIcon"];
+var _excluded$1r = ["children", "icon", "id", "isCentered", "notificationType"],
+    _excluded2$6 = ["alignText", "children", "icon", "notificationType"],
+    _excluded3$3 = ["ariaLabel", "className", "dismissible", "icon", "id", "isCentered", "noMargin", "notificationContent", "notificationHeading", "notificationType", "showIcon"];
 /**
  * NotificationHeading child-component.
  */
@@ -8806,7 +8569,7 @@ var NotificationHeading$1 = /*#__PURE__*/react.chakra(function (props) {
       id = props.id,
       isCentered = props.isCentered,
       notificationType = props.notificationType,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1p);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1r);
 
   var styles = react.useMultiStyleConfig("NotificationHeading", {
     icon: icon,
@@ -8817,9 +8580,9 @@ var NotificationHeading$1 = /*#__PURE__*/react.chakra(function (props) {
     as: "header",
     __css: styles
   }, rest), icon, React__default.createElement(Heading, {
-    additionalStyles: styles.heading,
     id: id + "-heading",
-    level: exports.HeadingLevels.Four
+    level: "four",
+    __css: styles.heading
   }, children));
 });
 /**
@@ -8831,7 +8594,7 @@ var NotificationContent$1 = /*#__PURE__*/react.chakra(function (props) {
       children = props.children,
       icon = props.icon,
       notificationType = props.notificationType,
-      rest = _objectWithoutPropertiesLoose(props, _excluded2$5);
+      rest = _objectWithoutPropertiesLoose(props, _excluded2$6);
 
   var styles = react.useMultiStyleConfig("NotificationContent", {
     alignText: alignText,
@@ -8863,10 +8626,10 @@ var Notification$1 = /*#__PURE__*/react.chakra(function (props) {
       notificationContent = props.notificationContent,
       notificationHeading = props.notificationHeading,
       _props$notificationTy = props.notificationType,
-      notificationType = _props$notificationTy === void 0 ? exports.NotificationTypes.Standard : _props$notificationTy,
+      notificationType = _props$notificationTy === void 0 ? "standard" : _props$notificationTy,
       _props$showIcon = props.showIcon,
       showIcon = _props$showIcon === void 0 ? true : _props$showIcon,
-      rest = _objectWithoutPropertiesLoose(props, _excluded3$2);
+      rest = _objectWithoutPropertiesLoose(props, _excluded3$3);
 
   var _useState = React.useState(true),
       isOpen = _useState[0],
@@ -8884,51 +8647,51 @@ var Notification$1 = /*#__PURE__*/react.chakra(function (props) {
   });
 
   var iconElement = function iconElement() {
-    var _iconProps;
-
     var baseIconProps = {
-      additionalStyles: styles.icon,
-      size: exports.IconSizes.Large
-    }; // If the icon should not display, return null.
+      size: "large",
+      __css: styles.icon
+    }; // If the icon should not display, return undefined.
 
     if (!showIcon) {
-      return null;
+      return undefined;
     } // If a custom icon is passed, add specific `Notification` styles.
 
 
     if (icon) return React__default.cloneElement(icon, _extends({
       id: id + "-custom-notification-icon"
     }, baseIconProps));
-    var iconProps = (_iconProps = {}, _iconProps[exports.NotificationTypes.Announcement] = {
-      color: exports.IconColors.SectionResearchSecondary,
-      name: exports.IconNames.SpeakerNotes,
-      title: "Notification announcement icon"
-    }, _iconProps[exports.NotificationTypes.Standard] = {
-      color: exports.IconColors.UiBlack,
-      name: exports.IconNames.AlertNotificationImportant,
-      title: "Notification standard icon"
-    }, _iconProps[exports.NotificationTypes.Warning] = {
-      color: exports.IconColors.BrandPrimary,
-      name: exports.IconNames.ErrorFilled,
-      title: "Notification warning icon"
-    }, _iconProps);
+    var iconProps = {
+      announcement: {
+        color: "section.research.secondary",
+        name: "speakerNotes",
+        title: "Notification announcement icon"
+      },
+      standard: {
+        color: "ui.black",
+        name: "alertNotificationImportant",
+        title: "Notification standard icon"
+      },
+      warning: {
+        color: "brand.primary",
+        name: "errorFilled",
+        title: "Notification warning icon"
+      }
+    };
     return React__default.createElement(Icon, Object.assign({
       id: id + "-notification-icon"
-    }, baseIconProps, iconProps[notificationType]));
+    }, iconProps[notificationType], baseIconProps));
   };
 
   var dismissibleButton = dismissible && React__default.createElement(Button, {
-    additionalStyles: styles.dismissibleButton,
-    attributes: {
-      "aria-label": "Close the notification"
-    },
-    buttonType: exports.ButtonTypes.Link,
+    "aria-label": "Close the notification",
+    buttonType: "link",
     id: id + "-notification-dismissible-button",
-    onClick: handleClose
+    onClick: handleClose,
+    __css: styles.dismissibleButton
   }, React__default.createElement(Icon, {
     id: id + "-dismissible-notification-icon",
-    name: exports.IconNames.Close,
-    size: exports.IconSizes.Large,
+    name: "close",
+    size: "large",
     title: "Notification close icon"
   }));
   var iconElem = iconElement();
@@ -8939,10 +8702,10 @@ var Notification$1 = /*#__PURE__*/react.chakra(function (props) {
     notificationType: notificationType
   }, notificationHeading); // Specific alignment styles for the content.
 
-  var alignText = childHeading && showIcon && (!!icon || !isCentered);
+  var alignText = !!(childHeading && showIcon && (!!icon || !isCentered));
   var childContent = React__default.createElement(NotificationContent$1, {
     alignText: alignText,
-    icon: !childHeading ? iconElem : null,
+    icon: !childHeading ? iconElem : undefined,
     notificationType: notificationType
   }, notificationContent); // If the `Notification` is closed, don't render anything.
 
@@ -8962,7 +8725,28 @@ var Notification$1 = /*#__PURE__*/react.chakra(function (props) {
   }, childHeading, childContent), dismissibleButton);
 });
 
-var _excluded$1q = ["className", "currentPage", "getPageHref", "id", "initialPage", "onPageChange", "pageCount"];
+// 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;
+  });
+};
+
+var _excluded$1s = ["className", "currentPage", "getPageHref", "id", "initialPage", "onPageChange", "pageCount"];
 /**
  * A component that provides a navigational list of page items.
  */
@@ -8976,7 +8760,7 @@ var Pagination$1 = /*#__PURE__*/react.chakra(function (props) {
       initialPage = _props$initialPage === void 0 ? 1 : _props$initialPage,
       onPageChange = props.onPageChange,
       pageCount = props.pageCount,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1q);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1s);
 
   var refCurrentPage = React.useRef(currentPage);
 
@@ -8991,7 +8775,7 @@ var Pagination$1 = /*#__PURE__*/react.chakra(function (props) {
   // to the new currentPage and update the refCurrentPage with that value.
 
   React__default.useEffect(function () {
-    if (onPageChange && currentPage !== refCurrentPage.current) {
+    if (onPageChange && currentPage && currentPage !== refCurrentPage.current) {
       setSelectedPage(currentPage);
       refCurrentPage.current = currentPage;
     }
@@ -9084,12 +8868,12 @@ var Pagination$1 = /*#__PURE__*/react.chakra(function (props) {
       }
     };
     var linkAttrs = allAttrs[type];
-    return React__default.createElement(Link, {
-      additionalStyles: _extends({}, styles.link, currentStyles),
-      attributes: linkAttrs.attributes,
+    return React__default.createElement(Link, Object.assign({
       href: linkAttrs.href,
       id: id + "-" + linkAttrs.text
-    }, linkAttrs.text);
+    }, linkAttrs.attributes, {
+      __css: _extends({}, styles.link, currentStyles)
+    }), linkAttrs.text);
   };
   /**
    * This function returns an array of `li` elements with numbers based on the
@@ -9161,14 +8945,14 @@ var Pagination$1 = /*#__PURE__*/react.chakra(function (props) {
     className: className,
     __css: styles
   }, rest), React__default.createElement(List$1, {
-    type: exports.ListTypes.Unordered,
+    type: "ul",
     inline: true,
     noStyling: true,
     id: id + "-list"
   }, previousLiLink, getPaginationNumbers(selectedPage), nextLiLink));
 });
 
-var _excluded$1r = ["darkMode", "id", "indicatorType", "isIndeterminate", "labelText", "showLabel", "size", "value"];
+var _excluded$1t = ["darkMode", "id", "indicatorType", "isIndeterminate", "labelText", "showLabel", "size", "value"];
 /**
  * A component that displays a progress status for any task that takes a long
  * time to complete or consists of multiple steps. Examples include downloading,
@@ -9180,17 +8964,17 @@ var ProgressIndicator$1 = /*#__PURE__*/react.chakra(function (props) {
       darkMode = _props$darkMode === void 0 ? false : _props$darkMode,
       id = props.id,
       _props$indicatorType = props.indicatorType,
-      indicatorType = _props$indicatorType === void 0 ? exports.ProgressIndicatorTypes.Linear : _props$indicatorType,
+      indicatorType = _props$indicatorType === void 0 ? "linear" : _props$indicatorType,
       _props$isIndeterminat = props.isIndeterminate,
       isIndeterminate = _props$isIndeterminat === void 0 ? false : _props$isIndeterminat,
       labelText = props.labelText,
       _props$showLabel = props.showLabel,
       showLabel = _props$showLabel === void 0 ? true : _props$showLabel,
       _props$size = props.size,
-      size = _props$size === void 0 ? exports.ProgressIndicatorSizes.Default : _props$size,
+      size = _props$size === void 0 ? "default" : _props$size,
       _props$value = props.value,
       value = _props$value === void 0 ? 0 : _props$value,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1r);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1t);
 
   var styles = react.useMultiStyleConfig("ProgressIndicator", {
     darkMode: darkMode,
@@ -9211,20 +8995,20 @@ var ProgressIndicator$1 = /*#__PURE__*/react.chakra(function (props) {
     id: id,
     // If the label is visually shown, associate it with the progress indicator.
     // Otherwise, the `aria-label` will be added.
-    "aria-label": showLabel ? null : labelText,
-    "aria-labelledby": showLabel ? id + "-label" : null,
+    "aria-label": showLabel ? undefined : labelText,
+    "aria-labelledby": showLabel ? id + "-label" : undefined,
     // If `isIndeterminate` is true, then it overrides the `value` prop.
-    isIndeterminate: isIndeterminate || null,
-    value: isIndeterminate ? null : finalValue
+    isIndeterminate: isIndeterminate || undefined,
+    value: isIndeterminate ? undefined : finalValue
   };
 
   var progressComponent = function progressComponent(indicatorType) {
     // Only display the percentage text for the default size, not in the
     // indeterminate state, and when `showLabel` is true.
-    if (indicatorType === exports.ProgressIndicatorTypes.Circular) {
+    if (indicatorType === "circular") {
       // For the small size, since the label won't be visible, we need to add
       // it to the parent component's `aria-label` attribute.
-      if (size === exports.ProgressIndicatorSizes.Small) {
+      if (size === "small") {
         progressProps["aria-label"] = labelText;
       }
 
@@ -9232,7 +9016,7 @@ var ProgressIndicator$1 = /*#__PURE__*/react.chakra(function (props) {
         __css: styles.circularContainer
       }, React__default.createElement(react.CircularProgress, Object.assign({}, progressProps, {
         sx: styles.circular
-      }), showLabel && !isIndeterminate && size !== exports.ProgressIndicatorSizes.Small && React__default.createElement(react.CircularProgressLabel, null, finalValue, "%")), showLabel && size !== exports.ProgressIndicatorSizes.Small && React__default.createElement(Label, {
+      }), showLabel && !isIndeterminate && size !== "small" && React__default.createElement(react.CircularProgressLabel, null, finalValue, "%")), showLabel && size !== "small" && React__default.createElement(Label, {
         id: id + "-label",
         htmlFor: id
       }, labelText));
@@ -9256,7 +9040,7 @@ var ProgressIndicator$1 = /*#__PURE__*/react.chakra(function (props) {
   }, rest), progressComponent(indicatorType));
 });
 
-var _excluded$1s = ["className", "helperText", "id", "invalidText", "isChecked", "isDisabled", "isInvalid", "isRequired", "labelText", "name", "onChange", "showHelperInvalidText", "showLabel", "value"];
+var _excluded$1u = ["className", "helperText", "id", "invalidText", "isChecked", "isDisabled", "isInvalid", "isRequired", "labelText", "name", "onChange", "showHelperInvalidText", "showLabel", "value"];
 var Radio$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var className = props.className,
       helperText = props.helperText,
@@ -9277,11 +9061,11 @@ var Radio$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function
       _props$showLabel = props.showLabel,
       showLabel = _props$showLabel === void 0 ? true : _props$showLabel,
       value = props.value,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1s);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1u);
 
   var styles = react.useMultiStyleConfig("Radio", {});
   var footnote = isInvalid ? invalidText : helperText;
-  var attributes = {};
+  var ariaAttributes = {};
 
   if (!id) {
     console.warn("NYPL Reservoir Radio: This component's required `id` prop was not passed.");
@@ -9292,9 +9076,9 @@ var Radio$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function
       console.warn("NYPL Reservoir Radio: `labelText` must be a string when `showLabel` is false.");
     }
 
-    attributes["aria-label"] = labelText && footnote ? labelText + " - " + footnote : labelText;
+    ariaAttributes["aria-label"] = labelText && footnote ? labelText + " - " + footnote : labelText;
   } else if (footnote) {
-    attributes["aria-describedby"] = id + "-helperText";
+    ariaAttributes["aria-describedby"] = id + "-helperText";
   }
 
   return React.createElement(React.Fragment, null, React.createElement(react.Radio, Object.assign({
@@ -9310,15 +9094,15 @@ var Radio$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function
     ref: ref,
     alignItems: "flex-start",
     __css: styles
-  }, attributes, rest), showLabel && labelText), footnote && showHelperInvalidText && React.createElement(HelperErrorText, {
-    additionalStyles: styles.helperErrorText,
+  }, ariaAttributes, rest), showLabel && labelText), footnote && showHelperInvalidText && React.createElement(HelperErrorText, {
     id: id + "-helperText",
     isInvalid: isInvalid,
-    text: footnote
+    text: footnote,
+    __css: styles.helperErrorText
   }));
 }));
 
-var _excluded$1t = ["children", "className", "defaultValue", "helperText", "id", "invalidText", "isDisabled", "isFullWidth", "isInvalid", "isRequired", "labelText", "layout", "name", "onChange", "showHelperInvalidText", "showLabel", "showRequiredLabel"];
+var _excluded$1v = ["children", "className", "defaultValue", "helperText", "id", "invalidText", "isDisabled", "isFullWidth", "isInvalid", "isRequired", "labelText", "layout", "name", "onChange", "showHelperInvalidText", "showLabel", "showRequiredLabel"];
 /**
  * RadioGroup is a wrapper for DS `Radio` components that renders as a fieldset
  * HTML element along with optional helper text. The `name` prop is essential
@@ -9345,7 +9129,7 @@ var RadioGroup$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(func
       isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
       labelText = props.labelText,
       _props$layout = props.layout,
-      layout = _props$layout === void 0 ? exports.LayoutTypes.Column : _props$layout,
+      layout = _props$layout === void 0 ? "column" : _props$layout,
       name = props.name,
       _onChange = props.onChange,
       _props$showHelperInva = props.showHelperInvalidText,
@@ -9354,14 +9138,14 @@ var RadioGroup$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(func
       showLabel = _props$showLabel === void 0 ? true : _props$showLabel,
       _props$showRequiredLa = props.showRequiredLabel,
       showRequiredLabel = _props$showRequiredLa === void 0 ? true : _props$showRequiredLa,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1t);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1v);
 
   var _React$useState = React.useState(defaultValue),
       value = _React$useState[0],
       setValue = _React$useState[1];
 
   var footnote = isInvalid ? invalidText : helperText;
-  var spacingProp = layout === exports.LayoutTypes.Column ? spacing.s : spacing.l;
+  var spacingProp = layout === "column" ? spacing.s : spacing.l;
   var newChildren = []; // Get the Chakra-based styles for the custom elements in this component.
 
   var styles = react.useMultiStyleConfig("RadioGroup", {
@@ -9416,21 +9200,14 @@ var RadioGroup$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(func
     spacing: spacingProp,
     sx: styles.stack
   }, newChildren)), footnote && showHelperInvalidText && React.createElement(HelperErrorText, {
-    additionalStyles: styles.helperErrorText,
     id: id + "-helperErrorText",
     isInvalid: isInvalid,
-    text: footnote
+    text: footnote,
+    __css: styles.helperErrorText
   }));
 }));
 
-(function (TextSizes) {
-  TextSizes["Default"] = "default";
-  TextSizes["Caption"] = "caption";
-  TextSizes["Tag"] = "tag";
-  TextSizes["Mini"] = "mini";
-})(exports.TextSizes || (exports.TextSizes = {}));
-
-var _excluded$1u = ["children", "className", "isBold", "isItalic", "noSpace", "size"];
+var _excluded$1w = ["children", "className", "isBold", "isItalic", "noSpace", "size"];
 var Text$1 = /*#__PURE__*/react.chakra(function (props) {
   var children = props.children,
       _props$className = props.className,
@@ -9439,12 +9216,11 @@ var Text$1 = /*#__PURE__*/react.chakra(function (props) {
       isItalic = props.isItalic,
       noSpace = props.noSpace,
       _props$size = props.size,
-      size = _props$size === void 0 ? exports.TextSizes.Default : _props$size,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1u);
+      size = _props$size === void 0 ? "default" : _props$size,
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1w);
 
-  var variant = getVariant(size, exports.TextSizes, exports.TextSizes.Default);
   var styles = react.useStyleConfig("Text", {
-    variant: variant,
+    variant: size,
     isBold: isBold,
     isItalic: isItalic,
     noSpace: noSpace
@@ -9460,7 +9236,7 @@ var Text$1 = /*#__PURE__*/react.chakra(function (props) {
   }, rest), children);
 });
 
-var _excluded$1v = ["children", "descriptionText", "headingText", "helperText", "id", "invalidText", "isInvalid"];
+var _excluded$1x = ["children", "descriptionText", "headingText", "helperText", "id", "invalidText", "isInvalid"];
 var ComponentWrapper$1 = /*#__PURE__*/react.chakra(function (props) {
   var children = props.children,
       descriptionText = props.descriptionText,
@@ -9470,7 +9246,7 @@ var ComponentWrapper$1 = /*#__PURE__*/react.chakra(function (props) {
       invalidText = props.invalidText,
       _props$isInvalid = props.isInvalid,
       isInvalid = _props$isInvalid === void 0 ? false : _props$isInvalid,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1v);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1x);
 
   var hasChildren = !!children;
   var styles = react.useMultiStyleConfig("ComponentWrapper", {
@@ -9487,39 +9263,23 @@ var ComponentWrapper$1 = /*#__PURE__*/react.chakra(function (props) {
     __css: styles
   }, rest), headingText && React.createElement(Heading, {
     id: id + "-heading",
-    level: exports.HeadingLevels.Two,
     text: headingText
   }), descriptionText && React.createElement(Text$1, null, descriptionText), children, footnote && React.createElement(HelperErrorText, {
-    additionalStyles: styles.helperErrorText,
     id: id + "-helperText",
     isInvalid: isInvalid,
-    text: footnote
+    text: footnote,
+    __css: styles.helperErrorText
   }));
 });
 
-// Only used for internal purposes.
-var SelectTypes;
-
-(function (SelectTypes) {
-  SelectTypes["Default"] = "default";
-  SelectTypes["SearchBar"] = "searchbar";
-})(SelectTypes || (SelectTypes = {}));
-
-(function (LabelPositions) {
-  LabelPositions["Default"] = "default";
-  LabelPositions["Inline"] = "inline";
-})(exports.LabelPositions || (exports.LabelPositions = {}));
-
-var _excluded$1w = ["additionalStyles", "children", "className", "helperText", "id", "invalidText", "isDisabled", "isInvalid", "isRequired", "labelPosition", "labelText", "name", "onChange", "placeholder", "selectType", "showHelperInvalidText", "showLabel", "showRequiredLabel", "value"];
+var _excluded$1y = ["children", "className", "helperText", "id", "invalidText", "isDisabled", "isInvalid", "isRequired", "labelPosition", "labelText", "name", "onChange", "placeholder", "selectType", "showHelperInvalidText", "showLabel", "showRequiredLabel", "value"];
 /**
  * Component that renders Chakra's `Select` component along with an accessible
  * `Label` and optional `HelperErrorText` component.
  */
 
 var Select$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React__default.forwardRef(function (props, ref) {
-  var _props$additionalStyl = props.additionalStyles,
-      additionalStyles = _props$additionalStyl === void 0 ? {} : _props$additionalStyl,
-      children = props.children,
+  var children = props.children,
       className = props.className,
       helperText = props.helperText,
       id = props.id,
@@ -9531,13 +9291,13 @@ var Select$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React__default.forwardRef
       _props$isRequired = props.isRequired,
       isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
       _props$labelPosition = props.labelPosition,
-      labelPosition = _props$labelPosition === void 0 ? exports.LabelPositions.Default : _props$labelPosition,
+      labelPosition = _props$labelPosition === void 0 ? "default" : _props$labelPosition,
       labelText = props.labelText,
       name = props.name,
       onChange = props.onChange,
       placeholder = props.placeholder,
       _props$selectType = props.selectType,
-      selectType = _props$selectType === void 0 ? SelectTypes.Default : _props$selectType,
+      selectType = _props$selectType === void 0 ? "default" : _props$selectType,
       _props$showHelperInva = props.showHelperInvalidText,
       showHelperInvalidText = _props$showHelperInva === void 0 ? true : _props$showHelperInva,
       _props$showLabel = props.showLabel,
@@ -9546,7 +9306,7 @@ var Select$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React__default.forwardRef
       showRequiredLabel = _props$showRequiredLa === void 0 ? true : _props$showRequiredLa,
       _props$value = props.value,
       value = _props$value === void 0 ? "" : _props$value,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1w);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1y);
 
   var ariaAttributes = {};
 
@@ -9554,11 +9314,10 @@ var Select$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React__default.forwardRef
       labelWidth = _useState[0],
       setLabelWidth = _useState[1];
 
-  var labelRef = React.useRef();
+  var labelRef = React.useRef(null);
   var styles = react.useMultiStyleConfig("CustomSelect", {
     variant: selectType,
-    labelPosition: labelPosition,
-    labelWidth: labelWidth
+    labelPosition: labelPosition
   });
   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`
@@ -9567,7 +9326,10 @@ var Select$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React__default.forwardRef
   var controlledProps = onChange ? {
     onChange: onChange,
     value: value
-  } : {};
+  } : {}; // The number of pixels between the label and select elements
+  // when the labelPosition is inline (equivalent to --nypl-space-xs).
+
+  var labelSelectGap = 8;
 
   if (!showLabel) {
     ariaAttributes["aria-label"] = labelText && footnote ? labelText + " - " + footnote : labelText;
@@ -9580,18 +9342,20 @@ var Select$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React__default.forwardRef
   }
 
   React.useEffect(function () {
-    if (labelPosition === exports.LabelPositions.Inline) {
+    if (labelPosition === "inline") {
       if (labelRef.current) {
-        var width = labelRef.current.clientWidth + 8;
+        var width = labelRef.current.clientWidth + labelSelectGap;
         setLabelWidth(width);
       }
+    } else {
+      setLabelWidth(0);
     }
   }, [labelPosition]);
   return React__default.createElement(react.Box, Object.assign({
     className: className,
-    __css: _extends({}, styles, additionalStyles)
+    __css: styles
   }, rest), React__default.createElement(react.Box, {
-    __css: labelPosition === exports.LabelPositions.Inline && styles.inline
+    __css: labelPosition === "inline" && styles.inline
   }, showLabel && React__default.createElement(react.Box, {
     ref: labelRef
   }, React__default.createElement(Label, {
@@ -9611,18 +9375,22 @@ var Select$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React__default.forwardRef
   }, controlledProps, ariaAttributes, {
     icon: React__default.createElement(Icon, {
       id: id + "-icon",
-      name: exports.IconNames.Arrow,
-      size: exports.IconSizes.Medium
+      name: "arrow",
+      size: "medium"
     }),
     __css: styles.select
-  }), children), footnote && showHelperInvalidText && React__default.createElement(HelperErrorText, {
+  }), children)), footnote && showHelperInvalidText && React__default.createElement(HelperErrorText, {
     id: id + "-helperText",
     isInvalid: isInvalid,
-    text: footnote
-  })));
+    text: footnote,
+    ml: {
+      sm: "auto",
+      md: labelWidth + "px"
+    }
+  }));
 }));
 
-var _excluded$1x = ["action", "buttonOnClick", "className", "descriptionText", "headingText", "helperText", "id", "invalidText", "isDisabled", "isInvalid", "isRequired", "labelText", "method", "noBrandButtonType", "onSubmit", "selectProps", "textInputElement", "textInputProps"];
+var _excluded$1z = ["action", "buttonOnClick", "className", "descriptionText", "headingText", "helperText", "id", "invalidText", "isDisabled", "isInvalid", "isRequired", "labelText", "method", "noBrandButtonType", "onSubmit", "selectProps", "textInputElement", "textInputProps"];
 /**
  * Renders a wrapper `form` element to be used with `Select` (optional),
  * `Input`, and `Button` components together.
@@ -9630,8 +9398,7 @@ var _excluded$1x = ["action", "buttonOnClick", "className", "descriptionText", "
 
 var SearchBar$1 = /*#__PURE__*/react.chakra(function (props) {
   var action = props.action,
-      _props$buttonOnClick = props.buttonOnClick,
-      buttonOnClick = _props$buttonOnClick === void 0 ? null : _props$buttonOnClick,
+      buttonOnClick = props.buttonOnClick,
       className = props.className,
       descriptionText = props.descriptionText,
       headingText = props.headingText,
@@ -9652,7 +9419,7 @@ var SearchBar$1 = /*#__PURE__*/react.chakra(function (props) {
       selectProps = props.selectProps,
       textInputElement = props.textInputElement,
       textInputProps = props.textInputProps,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1x);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1z);
 
   var styles = react.useMultiStyleConfig("SearchBar", {});
   var stateProps = {
@@ -9667,7 +9434,7 @@ var SearchBar$1 = /*#__PURE__*/react.chakra(function (props) {
   var finalAriaLabel = footnote ? labelText + " - " + footnote : labelText;
   var inputPlaceholder = (textInputProps == null ? void 0 : textInputProps.placeholder) || "Search terms";
   var textInputPlaceholder = inputPlaceholder + " " + (isRequired ? "(Required)" : "");
-  var buttonType = noBrandButtonType ? exports.ButtonTypes.NoBrand : exports.ButtonTypes.Primary;
+  var buttonType = noBrandButtonType ? "noBrand" : "primary";
   var searchBarButtonStyles = {
     borderLeftRadius: "none",
     borderRightRadius: {
@@ -9684,13 +9451,13 @@ var SearchBar$1 = /*#__PURE__*/react.chakra(function (props) {
 
 
   var selectElem = selectProps && React.createElement(Select$1, Object.assign({
-    additionalStyles: styles.select,
     id: "searchbar-select-" + id,
     labelText: selectProps == null ? void 0 : selectProps.labelText,
     name: selectProps == null ? void 0 : selectProps.name,
     onChange: selectProps == null ? void 0 : selectProps.onChange,
-    selectType: SelectTypes.SearchBar,
-    value: selectProps == null ? void 0 : selectProps.value
+    selectType: "searchbar",
+    value: selectProps == null ? void 0 : selectProps.value,
+    __css: styles.select
   }, stateProps), selectProps == null ? void 0 : selectProps.optionsData.map(function (option) {
     return React.createElement("option", {
       key: option,
@@ -9704,23 +9471,23 @@ var SearchBar$1 = /*#__PURE__*/react.chakra(function (props) {
     name: textInputProps == null ? void 0 : textInputProps.name,
     onChange: textInputProps == null ? void 0 : textInputProps.onChange,
     placeholder: textInputPlaceholder,
-    textInputType: selectElem ? TextInputVariants.SearchBarSelect : TextInputVariants.SearchBar,
-    type: exports.TextInputTypes.text,
+    textInputType: selectElem ? "searchBarSelect" : "searchBar",
+    type: "text",
     value: textInputProps == null ? void 0 : textInputProps.value
   }, stateProps)); // Render the `Button` component.
 
   var buttonElem = React.createElement(Button, {
-    additionalStyles: searchBarButtonStyles,
     buttonType: buttonType,
     id: "searchbar-button-" + id,
     isDisabled: isDisabled,
     onClick: buttonOnClick,
-    type: "submit"
+    type: "submit",
+    __css: searchBarButtonStyles
   }, React.createElement(Icon, {
-    align: exports.IconAlign.Left,
+    align: "left",
     id: "searchbar-icon-" + id,
-    name: exports.IconNames.Search,
-    size: exports.IconSizes.Small
+    name: "search",
+    size: "small"
   }), "Search"); // If a custom input element was passed, use that element
   // instead of the DS `TextInput` component.
 
@@ -9745,13 +9512,7 @@ var SearchBar$1 = /*#__PURE__*/react.chakra(function (props) {
   }, selectElem, textInputElem, buttonElem));
 });
 
-(function (SkeletonLoaderImageRatios) {
-  SkeletonLoaderImageRatios["Landscape"] = "landscape";
-  SkeletonLoaderImageRatios["Portrait"] = "portrait";
-  SkeletonLoaderImageRatios["Square"] = "square";
-})(exports.SkeletonLoaderImageRatios || (exports.SkeletonLoaderImageRatios = {}));
-
-var _excluded$1y = ["className", "contentSize", "headingSize", "imageAspectRatio", "isBordered", "layout", "showButton", "showContent", "showHeading", "showImage", "width"];
+var _excluded$1A = ["className", "contentSize", "headingSize", "imageAspectRatio", "isBordered", "layout", "showButton", "showContent", "showHeading", "showImage", "width"];
 /**
  * The `SkeletonLoader` component renders a placeholder to be used while
  * dynamic content is loading.
@@ -9764,11 +9525,11 @@ var SkeletonLoader$1 = /*#__PURE__*/react.chakra(function (props) {
       _props$headingSize = props.headingSize,
       headingSize = _props$headingSize === void 0 ? 1 : _props$headingSize,
       _props$imageAspectRat = props.imageAspectRatio,
-      imageAspectRatio = _props$imageAspectRat === void 0 ? exports.SkeletonLoaderImageRatios.Square : _props$imageAspectRat,
+      imageAspectRatio = _props$imageAspectRat === void 0 ? "square" : _props$imageAspectRat,
       _props$isBordered = props.isBordered,
       isBordered = _props$isBordered === void 0 ? false : _props$isBordered,
       _props$layout = props.layout,
-      layout = _props$layout === void 0 ? exports.LayoutTypes.Column : _props$layout,
+      layout = _props$layout === void 0 ? "column" : _props$layout,
       _props$showButton = props.showButton,
       showButton = _props$showButton === void 0 ? false : _props$showButton,
       _props$showContent = props.showContent,
@@ -9778,7 +9539,7 @@ var SkeletonLoader$1 = /*#__PURE__*/react.chakra(function (props) {
       _props$showImage = props.showImage,
       showImage = _props$showImage === void 0 ? true : _props$showImage,
       width = props.width,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1y);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1A);
 
   var styles = react.useMultiStyleConfig("SkeletonLoader", {
     isBordered: isBordered,
@@ -9803,7 +9564,7 @@ var SkeletonLoader$1 = /*#__PURE__*/react.chakra(function (props) {
 
     return new Array(size).fill(null).map(function (_, i) {
       var width = i === size - 1 ? lastWidth : "100%";
-      var marginBottomValue = i === size - 1 && type === "content" ? "0" : null;
+      var marginBottomValue = i === size - 1 && type === "content" ? "0" : undefined;
       return React.createElement(react.Skeleton, {
         key: type + "-" + i,
         width: width
@@ -9840,7 +9601,40 @@ var SkeletonLoader$1 = /*#__PURE__*/react.chakra(function (props) {
   })))));
 });
 
-var _excluded$1z = ["className", "defaultValue", "helperText", "id", "invalidText", "isDisabled", "isInvalid", "isRangeSlider", "isRequired", "labelText", "max", "min", "name", "onChange", "showBoxes", "showHelperInvalidText", "showLabel", "showRequiredLabel", "showValues", "step"];
+var _excluded$1B = ["className", "id", "target"];
+/**
+ * SkipNavigation is a component that is used to provide a navigational list of
+ * links. The first link is used to skip to the main content of the page using
+ * the `#mainContent` id, and the second link points to accessibility information
+ * on NYPL.org. These links are visually hidden but can be read by screenreaders.
+ */
+
+var SkipNavigation$1 = /*#__PURE__*/react.chakra(function (props) {
+  var className = props.className,
+      id = props.id,
+      _props$target = props.target,
+      target = _props$target === void 0 ? "#mainContent" : _props$target,
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1B);
+
+  var styles = react.useStyleConfig("SkipNavigation");
+  return React.createElement(react.Box, Object.assign({
+    as: "nav",
+    "aria-label": "Skip Navigation",
+    className: className,
+    id: id,
+    __css: styles
+  }, rest), React.createElement(List$1, {
+    inline: true,
+    noStyling: true,
+    type: "ul"
+  }, React.createElement("li", null, React.createElement(Link, {
+    href: target
+  }, "Skip to Main Content")), React.createElement("li", null, React.createElement(Link, {
+    href: "https://www.nypl.org/accessibility"
+  }, "Click to learn about accessibility at the Library"))));
+});
+
+var _excluded$1C = ["className", "defaultValue", "helperText", "id", "invalidText", "isDisabled", "isInvalid", "isRangeSlider", "isRequired", "labelText", "max", "min", "name", "onChange", "showBoxes", "showHelperInvalidText", "showLabel", "showRequiredLabel", "showValues", "step"];
 /**
  * The `Slider` component renders a singular value slider or a range slider
  * with a min and max value. The value(s) can be updated through the slider
@@ -9881,7 +9675,7 @@ var Slider = /*#__PURE__*/react.chakra(function (props) {
       showValues = _props$showValues === void 0 ? true : _props$showValues,
       _props$step = props.step,
       step = _props$step === void 0 ? 1 : _props$step,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1z);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1C);
 
   if (!id) {
     console.warn("NYPL Reservoir Slider: This component's required `id` prop was not passed.");
@@ -9932,18 +9726,16 @@ var Slider = /*#__PURE__*/react.chakra(function (props) {
   }; // Props that the two `TextInput` components use.
 
   var textInputSharedProps = {
-    attributes: {
-      max: max,
-      min: min
-    },
     isDisabled: isDisabled,
     isInvalid: finalIsInvalid,
     isRequired: isRequired,
+    max: max,
+    min: min,
     // Never show the label or helper text for the `TextInput` component.
     showHelperInvalidText: false,
     showLabel: false,
     step: step,
-    type: exports.TextInputTypes.number
+    type: "number"
   };
   /**
    * This returns either the "start" or "end" `TextInput` component. Note that
@@ -9995,7 +9787,7 @@ var Slider = /*#__PURE__*/react.chakra(function (props) {
     return React.createElement(TextInput, Object.assign({
       id: id + "-textInput-" + type,
       labelText: updatedLabel,
-      additionalStyles: _extends({}, styles.textInput, {
+      __css: _extends({}, styles.textInput, {
         // Specific margins for each text input to
         // push the elements inside.
         marginRight: type === "start" ? "s" : null,
@@ -10012,8 +9804,8 @@ var Slider = /*#__PURE__*/react.chakra(function (props) {
   var getSliderType = function getSliderType() {
     return isRangeSlider ? React.createElement(react.RangeSlider // Both slider thumbs need values and should be in an array.
     , Object.assign({
-      "aria-label": !showLabel ? [labelText + " - start value", labelText + " - end value"] : null,
-      "aria-labelledby": showLabel ? [id + "-label", id + "-label"] : null,
+      "aria-label": !showLabel ? [labelText + " - start value", labelText + " - end value"] : undefined,
+      "aria-labelledby": showLabel ? [id + "-label", id + "-label"] : undefined,
       value: currentValue,
       // Make the thumbs larger.
       size: "lg"
@@ -10028,7 +9820,7 @@ var Slider = /*#__PURE__*/react.chakra(function (props) {
       index: 1,
       sx: styles.thumb
     })) : React.createElement(react.Slider, Object.assign({
-      "aria-label": !showLabel ? labelText : null,
+      "aria-label": !showLabel ? labelText : undefined,
       "aria-labelledby": id + "-label",
       value: currentValue,
       // Make the thumb larger.
@@ -10051,7 +9843,7 @@ var Slider = /*#__PURE__*/react.chakra(function (props) {
     // should link the label somewhere. So either target the first
     // input box in a `RangeSlider` or the only input box in a `Slider`.
     // When the input fields are not visible, remove this attribute.
-    htmlFor: showBoxes ? id + "-textInput-" + (isRangeSlider ? "start" : "end") : null,
+    htmlFor: showBoxes ? id + "-textInput-" + (isRangeSlider ? "start" : "end") : "",
     isRequired: showRequiredLabel && isRequired
   }, labelText), React.createElement(react.Box, {
     __css: styles.container
@@ -10066,13 +9858,7 @@ var Slider = /*#__PURE__*/react.chakra(function (props) {
   }));
 });
 
-(function (StatusBadgeTypes) {
-  StatusBadgeTypes["Low"] = "low";
-  StatusBadgeTypes["Medium"] = "medium";
-  StatusBadgeTypes["High"] = "high";
-})(exports.StatusBadgeTypes || (exports.StatusBadgeTypes = {}));
-
-var _excluded$1A = ["children", "className", "id", "level"];
+var _excluded$1D = ["children", "className", "id", "level"];
 /**
  * The `StatusBadge` component is used to display a visual badge for three
  * different status levels.
@@ -10083,8 +9869,8 @@ var StatusBadge$1 = /*#__PURE__*/react.chakra(function (props) {
       className = props.className,
       id = props.id,
       _props$level = props.level,
-      level = _props$level === void 0 ? exports.StatusBadgeTypes.Low : _props$level,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1A);
+      level = _props$level === void 0 ? "low" : _props$level,
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1D);
 
   var styles = react.useStyleConfig("StatusBadge", {
     variant: level
@@ -10101,13 +9887,7 @@ var StatusBadge$1 = /*#__PURE__*/react.chakra(function (props) {
   }, rest), children);
 });
 
-(function (StructuredContentImagePosition) {
-  StructuredContentImagePosition["Left"] = "left";
-  StructuredContentImagePosition["Right"] = "right";
-  StructuredContentImagePosition["Center"] = "center";
-})(exports.StructuredContentImagePosition || (exports.StructuredContentImagePosition = {}));
-
-var _excluded$1B = ["calloutText", "className", "headingText", "id", "imageProps", "bodyContent"];
+var _excluded$1E = ["calloutText", "className", "headingText", "id", "imageProps", "bodyContent"];
 /**
  * Internal component used in the `StructuredContent` component
  * that renders the DS `Image` component.
@@ -10150,16 +9930,16 @@ var StructuredContent$1 = /*#__PURE__*/react.chakra(function (props) {
       _props$imageProps = props.imageProps,
       imageProps = _props$imageProps === void 0 ? {
     alt: "",
-    aspectRatio: exports.ImageRatios.Square,
+    aspectRatio: "square",
     caption: undefined,
     component: undefined,
     credit: undefined,
-    position: exports.StructuredContentImagePosition.Left,
-    size: exports.ImageSizes.Medium,
+    position: "left",
+    size: "medium",
     src: ""
   } : _props$imageProps,
       bodyContent = props.bodyContent,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1B);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1E);
 
   var hasImage = imageProps.src || imageProps.component;
   var hasFigureImage = imageProps.caption || imageProps.credit;
@@ -10186,12 +9966,11 @@ var StructuredContent$1 = /*#__PURE__*/react.chakra(function (props) {
     className: className,
     __css: styles
   }, rest), headingText && React.createElement(Heading, {
-    id: id + "-heading",
-    level: exports.HeadingLevels.Two
+    id: id + "-heading"
   }, headingText), calloutText && React.createElement(Heading, {
     id: id + "-callout",
-    level: exports.HeadingLevels.Three,
-    size: exports.HeadingSizes.Callout
+    level: "three",
+    size: "callout"
   }, calloutText), hasImage && React.createElement(StructuredContentImage, {
     additionalFigureStyles: styles.imageFigure,
     additionalImageStyles: styles.image,
@@ -10202,7 +9981,7 @@ var StructuredContent$1 = /*#__PURE__*/react.chakra(function (props) {
     caption: imageProps.caption,
     credit: imageProps.credit,
     size: imageProps.size,
-    src: imageProps.src ? imageProps.src : null
+    src: imageProps.src ? imageProps.src : undefined
   }), finalBodyContent);
 });
 
@@ -10261,7 +10040,7 @@ var useCarouselStyles = function useCarouselStyles(slidesCount, slideWidth) {
   };
 };
 
-var _excluded$1C = ["children", "defaultIndex", "id", "onChange", "tabsData", "useHash"];
+var _excluded$1F = ["children", "defaultIndex", "id", "onChange", "tabsData", "useHash"];
 /**
  * An internal function used to update the hash in the URL.
  * This function is only used when `useHash` is `true`.
@@ -10299,7 +10078,7 @@ var getElementsFromData$2 = function getElementsFromData(data, useHash) {
       key: index,
       onClick: useHash ? function () {
         return onClickHash("tab" + (index + 1));
-      } : null
+      } : undefined
     }, tab.label);
 
     if (typeof tab.content === "string") {
@@ -10380,7 +10159,7 @@ var Tabs = /*#__PURE__*/react.chakra(function (props) {
       tabsData = props.tabsData,
       _props$useHash = props.useHash,
       useHash = _props$useHash === void 0 ? false : _props$useHash,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1C);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1F);
 
   var styles = react.useMultiStyleConfig("Tabs", {}); // Just an estimate of the tab width for the mobile carousel.
 
@@ -10426,34 +10205,30 @@ var Tabs = /*#__PURE__*/react.chakra(function (props) {
     }
   }, [goToStart, windowDimensions.width]);
   var previousButton = React.createElement(Button, {
-    attributes: _extends({
-      "aria-label": "Previous"
-    }, styles.buttonArrows, {
-      left: "0"
-    }),
-    buttonType: exports.ButtonTypes.Primary,
+    "aria-label": "Previous",
     id: "tabs-previous-" + id,
-    onClick: prevSlide
+    onClick: prevSlide,
+    __css: _extends({}, styles.buttonArrows, {
+      left: "0"
+    })
   }, React.createElement(Icon, {
-    iconRotation: exports.IconRotationTypes.Rotate90,
+    iconRotation: "rotate90",
     id: "tabs-previous-icon-" + id,
-    name: exports.IconNames.Arrow,
-    size: exports.IconSizes.Small
+    name: "arrow",
+    size: "small"
   }));
   var nextButton = React.createElement(Button, {
-    attributes: _extends({
-      "aria-label": "Next"
-    }, styles.buttonArrows, {
-      right: "0"
-    }),
-    buttonType: exports.ButtonTypes.Primary,
+    "aria-label": "Next",
     id: "tabs-next-" + id,
-    onClick: nextSlide
+    onClick: nextSlide,
+    __css: _extends({}, styles.buttonArrows, {
+      right: "0"
+    })
   }, React.createElement(Icon, {
-    iconRotation: exports.IconRotationTypes.Rotate270,
+    iconRotation: "rotate270",
     id: "tabs-next-icon-" + id,
-    name: exports.IconNames.Arrow,
-    size: exports.IconSizes.Small
+    name: "arrow",
+    size: "small"
   }));
 
   if (children && tabsData != null && tabsData.length) {
@@ -10479,7 +10254,7 @@ var Tabs = /*#__PURE__*/react.chakra(function (props) {
   }, React.createElement(react.Box, Object.assign({}, carouselStyle), tabs)), nextButton), panels);
 }); // Tabs is also exported above so the props can display in Storybook.
 
-var _excluded$1D = ["aboveHeader", "breakout", "contentId", "contentPrimary", "contentSidebar", "contentTop", "footer", "header", "sidebar", "renderFooterElement", "renderHeaderElement"];
+var _excluded$1G = ["aboveHeader", "breakout", "contentId", "contentPrimary", "contentSidebar", "contentTop", "footer", "header", "sidebar", "renderFooterElement", "renderHeaderElement", "renderSkipNavigation"];
 /**
  * The main top-level parent component that wraps all template-related
  * components.
@@ -10706,14 +10481,16 @@ var TemplateAppContainer = /*#__PURE__*/react.chakra(function (props) {
       renderFooterElement = _props$renderFooterEl === void 0 ? true : _props$renderFooterEl,
       _props$renderHeaderEl = props.renderHeaderElement,
       renderHeaderElement = _props$renderHeaderEl === void 0 ? true : _props$renderHeaderEl,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1D);
+      _props$renderSkipNavi = props.renderSkipNavigation,
+      renderSkipNavigation = _props$renderSkipNavi === void 0 ? false : _props$renderSkipNavi,
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1G);
 
   var aboveHeaderElem = aboveHeader && React.createElement(TemplateAboveHeader, null, aboveHeader);
   var breakoutElem = breakout && React.createElement(TemplateBreakout$1, null, breakout);
   var contentTopElem = contentTop && React.createElement(TemplateContentTop$1, null, contentTop);
   var contentPrimaryElem = contentPrimary && React.createElement(TemplateContentPrimary$1, null, contentPrimary);
   var contentSidebarElem = contentSidebar && React.createElement(TemplateContentSidebar$1, null, contentSidebar);
-  return React.createElement(Template$1, Object.assign({}, rest), aboveHeaderElem, (header || breakoutElem) && React.createElement(TemplateHeader$1, {
+  return React.createElement(Template$1, Object.assign({}, rest), renderSkipNavigation ? React.createElement(SkipNavigation$1, null) : null, aboveHeaderElem, (header || breakoutElem) && React.createElement(TemplateHeader$1, {
     renderHeaderElement: renderHeaderElement
   }, header, breakoutElem), React.createElement(TemplateContent$1, {
     id: contentId,
@@ -10723,7 +10500,7 @@ var TemplateAppContainer = /*#__PURE__*/react.chakra(function (props) {
   }, footer));
 });
 
-var _excluded$1E = ["additionalStyles", "defaultChecked", "helperText", "id", "invalidText", "isChecked", "isDisabled", "isInvalid", "isRequired", "labelText", "name", "onChange", "size"];
+var _excluded$1H = ["defaultChecked", "helperText", "id", "invalidText", "isChecked", "isDisabled", "isInvalid", "isRequired", "labelText", "name", "onChange", "size"];
 var onChangeDefault$1 = function onChangeDefault() {
   return;
 };
@@ -10732,9 +10509,7 @@ var onChangeDefault$1 = function onChangeDefault() {
  */
 
 var Toggle$2 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _props$additionalStyl = props.additionalStyles,
-      additionalStyles = _props$additionalStyl === void 0 ? {} : _props$additionalStyl,
-      _props$defaultChecked = props.defaultChecked,
+  var _props$defaultChecked = props.defaultChecked,
       defaultChecked = _props$defaultChecked === void 0 ? false : _props$defaultChecked,
       helperText = props.helperText,
       id = props.id,
@@ -10751,8 +10526,8 @@ var Toggle$2 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function
       _props$onChange = props.onChange,
       onChange = _props$onChange === void 0 ? onChangeDefault$1 : _props$onChange,
       _props$size = props.size,
-      size = _props$size === void 0 ? exports.ToggleSizes.Default : _props$size,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1E);
+      size = _props$size === void 0 ? "default" : _props$size,
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1H);
 
   var footnote = isInvalid ? invalidText : helperText;
   var ariaAttributes = {};
@@ -10770,7 +10545,7 @@ var Toggle$2 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function
   }
 
   return React.createElement(React.Fragment, null, React.createElement(react.Box, Object.assign({
-    __css: _extends({}, styles, additionalStyles)
+    __css: styles
   }, rest), React.createElement(react.Switch, Object.assign({
     id: id,
     name: name || "default",
@@ -10778,7 +10553,7 @@ var Toggle$2 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function
     isInvalid: isInvalid,
     isRequired: isRequired,
     ref: ref,
-    size: size === exports.ToggleSizes.Default ? "lg" : "sm",
+    size: size === "default" ? "lg" : "sm",
     lineHeight: "1.5"
   }, isChecked !== undefined ? {
     isChecked: isChecked,
@@ -10788,10 +10563,10 @@ var Toggle$2 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function
   }, ariaAttributes, {
     __css: switchStyles
   }), labelText)), footnote && React.createElement(HelperErrorText, {
-    additionalStyles: styles.helperErrorText,
     id: id + "-helperText",
     isInvalid: isInvalid,
-    text: footnote
+    text: footnote,
+    __css: styles.helperErrorText
   }));
 }));
 
@@ -10883,18 +10658,7 @@ function useNYPLTheme() {
   };
 }
 
-(function (VideoPlayerTypes) {
-  VideoPlayerTypes["Vimeo"] = "vimeo";
-  VideoPlayerTypes["YouTube"] = "youtube";
-})(exports.VideoPlayerTypes || (exports.VideoPlayerTypes = {}));
-
-(function (VideoPlayerAspectRatios) {
-  VideoPlayerAspectRatios["FourByThree"] = "fourByThree";
-  VideoPlayerAspectRatios["SixteenByNine"] = "sixteenByNine";
-  VideoPlayerAspectRatios["Square"] = "square";
-})(exports.VideoPlayerAspectRatios || (exports.VideoPlayerAspectRatios = {}));
-
-var _excluded$1F = ["aspectRatio", "className", "descriptionText", "embedCode", "headingText", "helperText", "id", "iframeTitle", "showHelperInvalidText", "videoId", "videoType"];
+var _excluded$1I = ["aspectRatio", "className", "descriptionText", "embedCode", "headingText", "helperText", "id", "iframeTitle", "showHelperInvalidText", "videoId", "videoType"];
 var VideoPlayer$1 = /*#__PURE__*/react.chakra(function (props) {
   var aspectRatio = props.aspectRatio,
       className = props.className,
@@ -10908,10 +10672,10 @@ var VideoPlayer$1 = /*#__PURE__*/react.chakra(function (props) {
       showHelperInvalidText = _props$showHelperInva === void 0 ? true : _props$showHelperInva,
       videoId = props.videoId,
       videoType = props.videoType,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1F);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1I);
 
-  var iframeTitleFinal = videoType === exports.VideoPlayerTypes.Vimeo ? iframeTitle || "Vimeo video player" : iframeTitle || "YouTube video player";
-  var videoSrc = videoType === exports.VideoPlayerTypes.Vimeo ? "https://player.vimeo.com/video/" + videoId + "?autoplay=0&loop=0" : "https://www.youtube.com/embed/" + videoId + "?disablekb=1&autoplay=0&fs=1&modestbranding=0";
+  var iframeTitleFinal = videoType === "vimeo" ? iframeTitle || "Vimeo video player" : iframeTitle || "YouTube video player";
+  var videoSrc = videoType === "vimeo" ? "https://player.vimeo.com/video/" + videoId + "?autoplay=0&loop=0" : "https://www.youtube.com/embed/" + videoId + "?disablekb=1&autoplay=0&fs=1&modestbranding=0";
   var iFrameTitleEmbedCode = iframeTitle ? "" + iframeTitle : "Video player";
   var embedCodeFinal = embedCode && embedCode.includes("<iframe") && !embedCode.includes("title=") ? embedCode.replace("<iframe ", "<iframe title=\"" + iFrameTitleEmbedCode + "\" ") : embedCode;
   var errorMessage = "<strong>Error:</strong> This video player has not been configured " + "properly. Please contact the site administrator.";
@@ -10941,7 +10705,7 @@ var VideoPlayer$1 = /*#__PURE__*/react.chakra(function (props) {
     isInvalid = true;
   }
 
-  var variant = isInvalid ? "invalid" : getVariant(aspectRatio, exports.VideoPlayerAspectRatios);
+  var variant = isInvalid ? "invalid" : aspectRatio;
   var styles = react.useMultiStyleConfig("VideoPlayer", {
     variant: variant
   });
@@ -10968,16 +10732,16 @@ var VideoPlayer$1 = /*#__PURE__*/react.chakra(function (props) {
       __html: errorMessage
     }
   }) : React.createElement(ComponentWrapper$1, {
-    headingText: headingText ? headingText : null,
-    descriptionText: descriptionText ? descriptionText : null,
-    helperText: helperText && showHelperInvalidText ? helperText : null,
+    headingText: headingText ? headingText : undefined,
+    descriptionText: descriptionText ? descriptionText : undefined,
+    helperText: helperText && showHelperInvalidText ? helperText : undefined,
     id: id + "-componentWrapper"
   }, React.createElement(react.Box, {
     __css: styles.inside
   }, embedElement)));
 });
 
-var _excluded$1G = ["className", "columnHeaders", "columnHeadersBackgroundColor", "columnHeadersTextColor", "id", "showRowDividers", "tableData", "titleText", "useRowHeaders"];
+var _excluded$1J = ["className", "columnHeaders", "columnHeadersBackgroundColor", "columnHeadersTextColor", "id", "showRowDividers", "tableData", "titleText", "useRowHeaders"];
 /**
  * Basic `Table` component used to organize and display tabular data in
  * rows and columns.
@@ -10985,7 +10749,8 @@ var _excluded$1G = ["className", "columnHeaders", "columnHeadersBackgroundColor"
 
 var Table = /*#__PURE__*/react.chakra(function (props) {
   var className = props.className,
-      columnHeaders = props.columnHeaders,
+      _props$columnHeaders = props.columnHeaders,
+      columnHeaders = _props$columnHeaders === void 0 ? [] : _props$columnHeaders,
       columnHeadersBackgroundColor = props.columnHeadersBackgroundColor,
       columnHeadersTextColor = props.columnHeadersTextColor,
       id = props.id,
@@ -10995,7 +10760,7 @@ var Table = /*#__PURE__*/react.chakra(function (props) {
       titleText = props.titleText,
       _props$useRowHeaders = props.useRowHeaders,
       useRowHeaders = _props$useRowHeaders === void 0 ? false : _props$useRowHeaders,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1G);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1J);
 
   var customColors = {};
   columnHeadersBackgroundColor && (customColors["backgroundColor"] = columnHeadersBackgroundColor);
@@ -11052,12 +10817,6 @@ Object.defineProperty(exports, 'Box', {
     return react.Box;
   }
 });
-Object.defineProperty(exports, 'ButtonGroup', {
-  enumerable: true,
-  get: function () {
-    return react.ButtonGroup;
-  }
-});
 Object.defineProperty(exports, 'Center', {
   enumerable: true,
   get: function () {
@@ -11145,6 +10904,7 @@ Object.defineProperty(exports, 'VStack', {
 exports.Accordion = Accordion;
 exports.Breadcrumbs = Breadcrumbs;
 exports.Button = Button;
+exports.ButtonGroup = ButtonGroup;
 exports.Card = Card;
 exports.CardActions = CardActions;
 exports.CardContent = CardContent;
@@ -11156,7 +10916,6 @@ exports.DatePicker = DatePicker;
 exports.Fieldset = Fieldset;
 exports.Form = Form;
 exports.FormField = FormField;
-exports.FormGaps = exports.GridGaps;
 exports.FormRow = FormRow;
 exports.Heading = Heading;
 exports.HelperErrorText = HelperErrorText;
@@ -11168,7 +10927,7 @@ exports.Label = Label;
 exports.Link = Link;
 exports.List = List$1;
 exports.Logo = Logo$1;
-exports.Modal = Modal;
+exports.ModalTrigger = ModalTrigger;
 exports.Notification = Notification$1;
 exports.Pagination = Pagination$1;
 exports.ProgressIndicator = ProgressIndicator$1;
@@ -11178,6 +10937,7 @@ exports.SearchBar = SearchBar$1;
 exports.Select = Select$1;
 exports.SimpleGrid = SimpleGrid;
 exports.SkeletonLoader = SkeletonLoader$1;
+exports.SkipNavigation = SkipNavigation$1;
 exports.Slider = Slider;
 exports.StatusBadge = StatusBadge$1;
 exports.StructuredContent = StructuredContent$1;
@@ -11198,6 +10958,7 @@ exports.TextInput = TextInput;
 exports.Toggle = Toggle$2;
 exports.VideoPlayer = VideoPlayer$1;
 exports.useCarouselStyles = useCarouselStyles;
+exports.useModal = useModal;
 exports.useNYPLTheme = useNYPLTheme;
 exports.useWindowSize = useWindowSize;
 //# sourceMappingURL=design-system-react-components.cjs.development.js.map