@nypl/design-system-react-components 1.3.0 → 1.4.0-rc

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

@@ -12,6 +12,7 @@ var reactIntersectionObserver = require('react-intersection-observer');
 var ReactDatePicker = _interopDefault(require('react-datepicker'));
 var themeTools = require('@chakra-ui/theme-tools');
 var system = require('@chakra-ui/system');
+var downshift = require('downshift');
 var FocusLock = _interopDefault(require('@chakra-ui/focus-lock'));
 var Cookies = _interopDefault(require('js-cookie'));
 var ReactGA = _interopDefault(require('react-ga'));
@@ -42,6 +43,13 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   }
   return target;
 }
+function _taggedTemplateLiteralLoose(strings, raw) {
+  if (!raw) {
+    raw = strings.slice(0);
+  }
+  strings.raw = raw;
+  return strings;
+}
 
 var _path, _path2, _path3;
 var _excluded = ["title", "titleId"];
@@ -1602,16 +1610,20 @@ function getWithDirectionIcon(children, type, linkId) {
   });
   return React__default.createElement(React__default.Fragment, null, type === "backwards" && icon, children, type === "forwards" && icon);
 }
-function getExternalIcon(children, linkId) {
+function getExternalExtraElements(children, linkId, styles) {
   var iconId = linkId + "-icon";
-  var icon = React__default.createElement(Icon, {
+  var extraElements = React__default.createElement(React__default.Fragment, null, React__default.createElement(react.Box, {
+    as: "span",
+    __css: styles
+  }, "This link opens in a new window"), React__default.createElement(Icon, {
     align: "right",
     className: "more-link",
     id: iconId,
     name: "actionLaunch",
-    size: "medium"
-  });
-  return React__default.createElement(React__default.Fragment, null, children, icon);
+    size: "medium",
+    title: "External link"
+  }));
+  return React__default.createElement(React__default.Fragment, null, children, extraElements);
 }
 /**
  * A component that uses an `href` prop or a child anchor element, to create
@@ -1640,12 +1652,16 @@ var Link = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (pr
   if (type === "action" || type === "forwards" || type === "backwards" || type === "external") {
     variant = "moreLink";
   } else if (type.includes("button")) {
-    if (type === "button") {
-      console.warn("NYPL Reservoir Link: The \"button\" type is deprecated. Instead, use either \"buttonPrimary\", \"buttonSecondary\", \"buttonPill\", \"buttonCallout\", \"buttonNoBrand\", or \"buttonDisabled\".");
-    }
+    /** This deprecation warning is temporarily being removed, but it will be
+     * reinstated once teams are able to update their `Link`s appropriately. */
+    // if (type === "button") {
+    //   console.warn(
+    //     `NYPL Reservoir Link: The "button" type is deprecated. Instead, use either "buttonPrimary", "buttonSecondary", "buttonPill", "buttonCallout", "buttonNoBrand", or "buttonDisabled".`
+    //   );
+    // }
     variant = type;
   }
-  var style = react.useStyleConfig("Link", {
+  var styles = react.useMultiStyleConfig("Link", {
     variant: variant
   });
   var rel = type === "external" ? "nofollow" : null;
@@ -1653,7 +1669,7 @@ var Link = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (pr
   // 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 === "forwards" || type === "backwards") && getWithDirectionIcon(children, type, id) || type === "external" && getExternalIcon(children, id) || children;
+  var newChildren = (type === "forwards" || type === "backwards") && getWithDirectionIcon(children, type, id) || type === "external" && getExternalExtraElements(children, id, styles.srOnly) || children;
   if (!href) {
     // React Types error makes this fail:
     // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/32832
@@ -1665,7 +1681,7 @@ var Link = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (pr
     var childProps = childrenToClone.props;
     return React__default.createElement(react.Box, Object.assign({
       as: "span",
-      __css: style
+      __css: styles
     }, rest), React__default.cloneElement(childrenToClone, _extends({
       className: className
     }, linkProps, childProps, {
@@ -1682,7 +1698,7 @@ var Link = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (pr
       onClick: onClick,
       target: target
     }, linkProps, {
-      __css: style
+      __css: styles
     }), newChildren);
   }
 }));
@@ -1781,13 +1797,12 @@ var HelperErrorText = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(f
     text = _ref.text,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$V);
   // Only announce the text in the invalid state.
-  var announceAriaLive = isInvalid;
   var styles = react.useStyleConfig("HelperErrorText", {
     isInvalid: isInvalid
   });
   var props = _extends({
     "aria-atomic": ariaAtomic,
-    "aria-live": announceAriaLive ? ariaLive : "off",
+    "aria-live": ariaLive === "off" ? undefined : ariaLive,
     className: className,
     "data-isinvalid": isInvalid,
     id: id,
@@ -2268,19 +2283,22 @@ var ButtonGroup = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(funct
     buttonWidth: finalButtonWidth
   });
   React__default.Children.map(children, function (child, key) {
-    if ((child == null ? void 0 : child.type) !== Button) {
-      // Special case for Storybook MDX documentation.
-      if (child != null && child.props.mdxType && (child == null ? void 0 : child.props.mdxType) === "Button") ; else {
-        console.warn("NYPL Reservoir ButtonGroup: Only Button components can be children of ButtonGroup.");
-        return;
+    if (React__default.isValidElement(child)) {
+      if (child.type !== Button) {
+        // Special case for Storybook MDX documentation.
+        // @ts-ignore
+        if (child.props.mdxType && child.props.mdxType === "Button") ; else {
+          console.warn("NYPL Reservoir ButtonGroup: Only Button components can be children of ButtonGroup.");
+          return;
+        }
       }
+      var disabledProps = isDisabled ? {
+        isDisabled: isDisabled
+      } : {};
+      newChildren.push(React__default.cloneElement(child, _extends({
+        key: key
+      }, disabledProps)));
     }
-    var disabledProps = isDisabled ? {
-      isDisabled: isDisabled
-    } : {};
-    child && newChildren.push(React__default.cloneElement(child, _extends({
-      key: key
-    }, disabledProps)));
   });
   return React__default.createElement(react.Stack, Object.assign({
     className: className,
@@ -2668,6 +2686,18 @@ var getAriaAttrs = function getAriaAttrs(_ref) {
   }
   return ariaAttributes;
 };
+/** Convert a hex color value to an rgb or rgba value */
+var hexToRGB = function hexToRGB(hex, alpha) {
+  var shortHex = hex.length === 4;
+  var rSlice = shortHex ? hex.slice(1, 2).repeat(2) : hex.slice(1, 3),
+    gSlice = shortHex ? hex.slice(2, 3).repeat(2) : hex.slice(3, 5),
+    bSlice = shortHex ? hex.slice(3, 4).repeat(2) : hex.slice(5, 7);
+  var r = parseInt(rSlice, 16),
+    g = parseInt(gSlice, 16),
+    b = parseInt(bSlice, 16);
+  var rgb = r + ", " + g + ", " + b;
+  return alpha ? "rgba(" + rgb + "," + alpha + ")" : "rgb(" + rgb + ")";
+};
 
 var _excluded$12 = ["isIndeterminate", "isChecked"],
   _excluded2$2 = ["className", "invalidText", "helperText", "id", "isChecked", "isDisabled", "isIndeterminate", "isInvalid", "isRequired", "labelText", "name", "onChange", "showHelperInvalidText", "showLabel", "value"];
@@ -3550,7 +3580,7 @@ var Label = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (p
   }, rest), children, isRequired && React__default.createElement("span", null, requiredLabelText ? " (" + requiredLabelText + ")" : " (Required)"));
 }));
 
-var _excluded$19 = ["className", "defaultValue", "helperText", "id", "invalidText", "isClearable", "isDisabled", "isInvalid", "isRequired", "labelText", "max", "maxLength", "min", "name", "onChange", "onClick", "onFocus", "placeholder", "showHelperInvalidText", "showLabel", "showRequiredLabel", "requiredLabelText", "step", "textInputType", "type", "value"];
+var _excluded$19 = ["className", "defaultValue", "helperText", "id", "invalidText", "isClearable", "isClearableCallback", "isDisabled", "isInvalid", "isRequired", "labelText", "max", "maxLength", "min", "name", "onChange", "onClick", "onFocus", "placeholder", "showHelperInvalidText", "showLabel", "showRequiredLabel", "requiredLabelText", "step", "textInputType", "type", "value"];
 // Only used internally.
 var TextInputFormats = {
   email: "jdoe@domain.com",
@@ -3574,6 +3604,7 @@ var TextInput = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
     invalidText = props.invalidText,
     _props$isClearable = props.isClearable,
     isClearable = _props$isClearable === void 0 ? false : _props$isClearable,
+    isClearableCallback = props.isClearableCallback,
     _props$isDisabled = props.isDisabled,
     isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
     _props$isInvalid = props.isInvalid,
@@ -3617,12 +3648,18 @@ var TextInput = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
   });
   var isTextArea = type === "textarea";
   var isHidden = type === "hidden";
+  var hasAutocomplete = false;
   var finalInvalidText = invalidText ? invalidText : "There is an error related to this field.";
   var internalOnChange = function internalOnChange(e) {
     setFinalValue(e.target.value);
     onChange && onChange(e);
   };
   var footnote = isInvalid ? finalInvalidText : helperText;
+  if (type === "tel" || type === "url" || type === "email") {
+    hasAutocomplete = true;
+    var example = TextInputFormats[type] || "";
+    footnote = React__default.createElement(React__default.Fragment, null, "Ex: ", example, React__default.createElement("br", null), footnote);
+  }
   var ariaAttributes = getAriaAttrs({
     footnote: footnote,
     id: id,
@@ -3632,6 +3669,7 @@ var TextInput = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
   });
   var onClearClick = function onClearClick() {
     setFinalValue("");
+    isClearableCallback && isClearableCallback();
     // Set focus back to the input element.
     finalRef.current.focus();
   };
@@ -3651,10 +3689,6 @@ var TextInput = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
     finalIsInvalid = true;
     console.warn("NYPL Reservoir TextInput: The `min` prop is greater than the `max` prop.");
   }
-  if (type === "tel" || type === "url" || type === "email") {
-    var example = TextInputFormats[type] || "";
-    footnote = React__default.createElement(React__default.Fragment, null, "Ex: ", example, React__default.createElement("br", null), footnote);
-  }
   // When the type is "hidden", the input element needs fewer attributes.
   options = isHidden ? {
     defaultValue: defaultValue,
@@ -3665,6 +3699,7 @@ var TextInput = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
     ref: finalRef
   } : _extends({
     "aria-required": isRequired,
+    autocomplete: hasAutocomplete ? type : null,
     defaultValue: defaultValue,
     id: id,
     isDisabled: isDisabled,
@@ -4254,14 +4289,16 @@ var breakpoints = /*#__PURE__*/themeTools.createBreakpoints({
 var black = "#000";
 var white = "#fff";
 var grayDark = "#616161";
-var grayxxxxDark = "#121212";
-var grayxxxDark = "#191919";
-var grayxxDark = "#212121";
+var grayxxxxDark = "#191919";
+var grayxxxDark = "#252525";
+var grayxxDark = "#2E2E2E";
 var grayxDark = "#424242";
 var grayMedium = "#BDBDBD";
 var grayLightCool = "#E9E9E9";
 var grayxLightCool = "#F5F5F5";
 var grayxxLightCool = "#FAFAFA";
+var linkPrimary = "#0576D3";
+var linkSecondary = "#004B98";
 var brandPrimary = "#C60917";
 var brandSecondary = "#760000";
 var brandObj = {
@@ -4285,8 +4322,9 @@ var colors = {
     },
     focus: "#4181F1",
     link: {
-      primary: "#0576D3",
-      secondary: "#004B98"
+      primary: linkPrimary,
+      "primary-05": /*#__PURE__*/hexToRGB(linkPrimary, 0.05),
+      secondary: linkSecondary
     },
     status: {
       primary: "#F9E08E",
@@ -4345,26 +4383,26 @@ var colors = {
         secondary: grayxxDark
       },
       error: {
-        primary: "#E1454C",
-        secondary: "#F67C82"
+        primary: "#E1767B",
+        secondary: "#F08F93"
       },
-      focus: "#5181D4",
+      focus: "#6090E3",
       link: {
-        primary: "#2085D8",
-        secondary: "#50A0E1"
+        primary: "#79B7EB",
+        secondary: "#95CFFF"
       },
       status: {
-        primary: "#6F6544",
-        secondary: "#6F6765"
+        primary: "#B69C46",
+        secondary: "#CB8E7C"
       },
       success: {
-        primary: "#0E3B15",
-        secondary: "#0F2912"
+        primary: "#52AA60",
+        secondary: "#81C88A"
       },
       test: "#592B22",
       warning: {
-        primary: "#493320",
-        secondary: "#482C15"
+        primary: "#DC8034",
+        secondary: "#F1A66A"
       },
       // Semantic colors
       bg: {
@@ -4887,7 +4925,7 @@ var secondary = function secondary(_ref2) {
     color: "ui.link.primary"
   }, generalSizeValues(buttonSize), {
     _hover: {
-      bg: "ui.bg.default",
+      bg: "ui.link.primary-05",
       borderColor: "ui.link.secondary",
       color: "ui.link.secondary"
     },
@@ -4928,7 +4966,7 @@ var text = function text(_ref4) {
       bg: "transparent"
     },
     _hover: {
-      bg: "transparent",
+      bg: "ui.link.primary-05",
       color: "ui.link.secondary"
     }
   });
@@ -4964,9 +5002,9 @@ var iconOnly = function iconOnly(_ref6) {
     paddingInlineStart: "inset.narrow",
     paddingInlineEnd: "inset.narrow",
     _hover: {
-      bg: "ui.bg.default",
-      borderColor: "ui.link.primary",
-      color: "ui.link.primary"
+      bg: "ui.link.primary-05",
+      borderColor: "ui.link.secondary",
+      color: "ui.link.secondary"
     }
   });
 };
@@ -5509,7 +5547,14 @@ var select = {
   },
   _active: selectTextInputFocusStyles,
   _disabled: /*#__PURE__*/_extends({}, selectTextInputDisabledStyles),
-  _focus: selectTextInputFocusStyles,
+  _focus: /*#__PURE__*/_extends({}, selectTextInputFocusStyles, {
+    // When the select is focused, the icon should be on top of the dropdown.
+    // This should only be done when focused, otherswise the icon will render
+    // above any other elements on the page.
+    "+ .chakra-select__icon-wrapper": {
+      zIndex: "9999"
+    }
+  }),
   _invalid: {
     border: "1px solid",
     borderColor: "ui.error.primary",
@@ -5521,12 +5566,6 @@ var Select = {
   baseStyle: function baseStyle(_ref) {
     var labelPosition = _ref.labelPosition;
     return {
-      // 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"
-      },
       inline: {
         display: {
           md: "flex"
@@ -5584,8 +5623,14 @@ var FeedbackBox = {
   parts: ["closeButton", "drawerBody", "drawerContent", "drawerHeader", "openButton"],
   baseStyle: {
     closeButton: {
+      /** This is overriding the default min-height value in order to keep the
+       * button spacing symmetrical. */
+      minHeight: "40px",
+      right: "xs",
       p: "0",
-      span: /*#__PURE__*/screenreaderOnly()
+      position: "absolute",
+      span: /*#__PURE__*/screenreaderOnly(),
+      top: "xs"
     },
     drawerBody: {
       paddingTop: "m",
@@ -5605,8 +5650,8 @@ var FeedbackBox = {
       display: "flex",
       fontSize: "text.default",
       px: "m",
-      paddingTop: "xs",
-      paddingBottom: "xs",
+      paddingTop: "s",
+      paddingBottom: "s",
       p: {
         marginBottom: "0"
       }
@@ -5633,6 +5678,37 @@ var Fieldset$1 = {
   }
 };
 
+var filterBarWidth = {
+  "default": {
+    width: {
+      base: "100%",
+      md: "265px"
+    }
+  },
+  full: {
+    width: "100%"
+  }
+};
+var FilterBar = {
+  parts: ["modalHeader", "modalFooter", "modalCloseButton", "globalButtonGroup", "globalButtonGroupWrapper"],
+  baseStyle: function baseStyle(_ref) {
+    var width = _ref.width;
+    return {
+      width: "full",
+      modalHeader: {
+        bg: "ui.gray.x-light-cool"
+      },
+      modalFooter: {
+        bg: "ui.gray.x-light-cool"
+      },
+      modalCloseButton: {
+        mt: "8px"
+      },
+      globalButtonGroupWrapper: _extends({}, filterBarWidth[width])
+    };
+  }
+};
+
 var footerGray = "#54514A";
 var Footer = {
   baseStyle: {
@@ -6714,14 +6790,18 @@ var variants = {
   })
 };
 var Link$1 = {
+  parts: ["srOnly"],
   baseStyle: /*#__PURE__*/_extends({}, baseLinkStyles, {
-    // This is needed for custom anchor elements or link components
-    // that are passed as children to the `Link` component.
+    /** This is needed for custom anchor elements or link components
+     * that are passed as children to the `Link` component. */
     a: {
       _hover: {
         color: "ui.link.secondary"
       }
-    }
+    },
+    /** The element will handle descriptive text added to aid
+     * screen readers. */
+    srOnly: /*#__PURE__*/screenreaderOnly()
   }),
   variants: variants
 };
@@ -7357,6 +7437,202 @@ var Logo = {
   }
 };
 
+var multiSelectWidths = {
+  "default": {
+    width: {
+      base: "100%",
+      md: "250px"
+    }
+  },
+  fitContent: {
+    width: {
+      base: "100%",
+      md: "fit-content"
+    },
+    minWidth: {
+      md: "175px"
+    }
+  },
+  full: {
+    width: "100%"
+  }
+};
+var MultiSelect = {
+  parts: ["actionButtons", "menu", "menuButton", "menuContainer", "menuChildren"],
+  baseStyle: function baseStyle(_ref) {
+    var isBlockElement = _ref.isBlockElement,
+      isOpen = _ref.isOpen,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? "default" : _ref$width;
+    return _extends({}, multiSelectWidths[width], {
+      position: "relative",
+      actionButtons: {
+        borderTop: "1px solid",
+        borderColor: "ui.gray.medium",
+        gap: {
+          base: "0",
+          md: "s"
+        },
+        justifyContent: "flex-end",
+        padding: {
+          base: "s",
+          md: "xs"
+        },
+        width: "auto"
+      },
+      menuContainer: _extends({
+        backgroundColor: "white",
+        position: {
+          md: isBlockElement ? "relative" : "absolute"
+        },
+        display: isOpen ? "block" : "none",
+        zIndex: isBlockElement ? 0 : 9999
+      }, width === "fitContent" && {
+        minWidth: {
+          md: "275px"
+        },
+        maxWidth: {
+          md: "375px"
+        }
+      }, {
+        width: "100%",
+        // These are for active states
+        boxSizing: "border-box",
+        border: "1px solid",
+        borderBottomLeftRadius: "button.default",
+        borderBottomRightRadius: "button.default",
+        borderTopLeftRadius: "0",
+        borderTopRightRadius: "0",
+        borderColor: "ui.gray.dark",
+        marginTop: "-1px",
+        paddingX: 0,
+        paddingY: 0,
+        ul: {
+          m: 0,
+          px: 0,
+          py: "xs",
+          li: {
+            p: 0,
+            div: {
+              px: "s",
+              paddingTop: "xs",
+              paddingBottom: "6px",
+              _hover: {
+                bg: "ui.gray.x-light-cool"
+              }
+            }
+          },
+          ul: {
+            py: 0,
+            li: {
+              div: {
+                paddingLeft: "46px",
+                paddingRight: 0
+              }
+            }
+          }
+        }
+      }),
+      menu: {
+        paddingX: "xs",
+        // Controls the height of the multiselect menu, before scroll bar.
+        maxHeight: {
+          base: "100%",
+          md: "285px"
+        },
+        overflowX: {
+          base: "hidden"
+        },
+        overflowY: {
+          base: "auto"
+        },
+        _focus: {
+          outline: "0px !important"
+        }
+      },
+      menuChildren: {
+        paddingLeft: "m",
+        marginBottom: 0
+      }
+    });
+  }
+};
+
+var MultiSelectMenuButton = {
+  parts: ["buttonLabel", "menuButton", "selectedItemsCountButton", "toggleIcon"],
+  baseStyle: function baseStyle(_ref) {
+    var _ref$hasSelectedItems = _ref.hasSelectedItems,
+      hasSelectedItems = _ref$hasSelectedItems === void 0 ? false : _ref$hasSelectedItems,
+      _ref$isOpen = _ref.isOpen,
+      isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen;
+    return {
+      buttonLabel: {
+        justifyContent: "flex-start",
+        overflow: "hidden",
+        marginLeft: hasSelectedItems ? "50px" : "0",
+        marginRight: "l",
+        textAlign: "left",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        transition: "margin 150ms ease-out"
+      },
+      menuButton: {
+        alignItems: "center",
+        backgroundColor: isOpen ? "ui.bg.active" : "ui.white",
+        borderBottomLeftRadius: isOpen ? "0" : "button.default",
+        borderBottomRightRadius: isOpen ? "0" : "button.default",
+        borderColor: isOpen ? "ui.gray.dark" : "ui.gray.medium",
+        borderRadius: "button.default",
+        borderWidth: "1px",
+        fontSize: "button.default",
+        minHeight: {
+          base: defaultElementSizes.mobileFieldHeight,
+          md: "auto"
+        },
+        px: "s",
+        py: "xs",
+        display: "inline-flex",
+        justifyContent: "space-between",
+        width: "100%",
+        _hover: {
+          backgroundColor: isOpen ? "ui.bg.active" : "ui.white",
+          borderColor: "ui.gray.dark"
+        },
+        svg: {
+          marginTop: "0"
+        }
+      },
+      selectedItemsCountButton: {
+        alignItems: "center",
+        backgroundColor: "ui.gray.light-cool",
+        border: "1px",
+        borderRadius: "20px",
+        borderColor: isOpen ? "ui.border.hover" : "ui.border.default",
+        display: "flex",
+        flexShrink: 0,
+        fontSize: "text.tag",
+        justifyContent: "flex-end",
+        left: "15px",
+        marginRight: "xs",
+        position: "absolute",
+        top: {
+          base: "12px",
+          md: "10px"
+        },
+        width: "46px",
+        _hover: {
+          borderColor: isOpen ? "ui.gray.xx-dark" : "ui.border.hover"
+        },
+        svg: {
+          marginLeft: "xxs",
+          marginRight: "6px",
+          marginTop: "0"
+        }
+      }
+    };
+  }
+};
+
 var Notification = {
   parts: ["container", "dismissibleButton", "icon"],
   baseStyle: function baseStyle(_ref) {
@@ -8935,6 +9211,7 @@ var theme = /*#__PURE__*/react.extendTheme( /*#__PURE__*/_extends({
     DatePicker: DatePicker$1,
     FeedbackBox: FeedbackBox,
     Fieldset: Fieldset$1,
+    FilterBar: FilterBar,
     Footer: Footer,
     Header: Header,
     HeaderLogin: HeaderLogin,
@@ -8955,7 +9232,9 @@ var theme = /*#__PURE__*/react.extendTheme( /*#__PURE__*/_extends({
     Label: Label$1,
     Link: Link$1,
     List: List,
-    Logo: Logo
+    Logo: Logo,
+    MultiSelect: MultiSelect,
+    MultiSelectMenuButton: MultiSelectMenuButton
   }, NotificationStyles, {
     Pagination: Pagination,
     ProgressIndicator: ProgressIndicator,
@@ -9456,6 +9735,9 @@ var FeedbackBox$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(fun
     setComment = _useFeedbackBoxReduce.setComment,
     setEmail = _useFeedbackBoxReduce.setEmail,
     clearValues = _useFeedbackBoxReduce.clearValues;
+  // Hook into NYPL breakpoint
+  var _useNYPLBreakpoints = useNYPLBreakpoints(),
+    isLargerThanMobile = _useNYPLBreakpoints.isLargerThanMobile;
   // Chakra's hook to control Drawer's actions.
   var disclosure = react.useDisclosure();
   var finalIsOpen = isOpen ? isOpen : disclosure.isOpen;
@@ -9468,11 +9750,13 @@ var FeedbackBox$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(fun
   var isErrorView = viewType === "error";
   var confirmationTimeout = 3000;
   var maxCommentCharacters = 500;
-  var initMinHeight = "275px";
+  var initMinHeight = 165;
   var initTemplateRows = "auto 1fr";
-  var minHeightWithCategory = "345px";
-  var minHeightWithEmail = "385px";
-  var minHeightWithCategoryAndEmail = "455px";
+  var minHeightWithCategory = 235;
+  var minHeightWithEmail = 275;
+  var minHeightWithCategoryAndEmail = 345;
+  var notificationHeightAdjustment = 37;
+  var descriptionHeightAdjustment = 24;
   var drawerMinHeight = initMinHeight;
   var closeAndResetForm = function closeAndResetForm() {
     finalOnClose();
@@ -9499,16 +9783,18 @@ var FeedbackBox$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(fun
       "> div": {
         py: "xs"
       }
-    }
+    },
+    width: "100%"
   }) : undefined;
   var descriptionElement = isFormView && descriptionText ? React__default.createElement(Text, {
     fontWeight: "medium",
-    mb: "0"
+    noSpace: true
   }, descriptionText) : undefined;
   var privacyPolicyField = React__default.createElement(FormField, null, React__default.createElement(Link, {
     href: "https://www.nypl.org/help/about-nypl/legal-notices/privacy-policy",
     type: "external",
-    fontSize: "text.tag"
+    fontSize: "text.tag",
+    width: "fit-content"
   }, "Privacy Policy"));
   // When the submit button is clicked, set a timeout before displaying
   // the confirmation or error screen. This automatically goes to the
@@ -9565,6 +9851,16 @@ var FeedbackBox$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(fun
   if (showCategoryField && showEmailField) {
     drawerMinHeight = minHeightWithCategoryAndEmail;
   }
+  if (notificationText) {
+    drawerMinHeight += notificationHeightAdjustment;
+  }
+  if (descriptionText) {
+    drawerMinHeight += descriptionHeightAdjustment;
+  }
+  if (notificationText && descriptionText) {
+    drawerMinHeight += 16;
+  }
+  var finalDrawerMinHeight = drawerMinHeight + "px";
   return React__default.createElement(react.Box, Object.assign({
     className: className,
     id: id,
@@ -9581,11 +9877,7 @@ var FeedbackBox$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(fun
     placement: "bottom"
   }, React__default.createElement(react.DrawerOverlay, null), React__default.createElement(react.DrawerContent, {
     sx: styles.drawerContent
-  }, React__default.createElement(react.DrawerHeader, {
-    sx: styles.drawerHeader
-  }, React__default.createElement(Text, {
-    "data-testid": "title"
-  }, title), React__default.createElement(react.Spacer, null), React__default.createElement(Button, {
+  }, React__default.createElement(Button, {
     buttonType: "text",
     id: "close-btn",
     onClick: finalOnClose,
@@ -9594,24 +9886,38 @@ var FeedbackBox$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(fun
     color: "ui.black",
     name: "minus",
     size: "medium"
-  }), React__default.createElement("span", null, "Close ", title))), React__default.createElement(react.DrawerBody, {
+  }), React__default.createElement("span", null, "Close ", title)), React__default.createElement(react.DrawerHeader, {
+    sx: styles.drawerHeader
+  }, React__default.createElement(Text, {
+    "data-testid": "title"
+  }, title)), React__default.createElement(react.DrawerBody, {
     sx: styles.drawerBody
   }, React__default.createElement(Form, {
     gap: "grid.s",
     id: "feedback-form",
     onSubmit: internalOnSubmit,
     sx: {
-      "> div": {
-        minHeight: drawerMinHeight,
+      ".feedback-body": {
+        alignItems: "flex-start",
+        minHeight: finalDrawerMinHeight,
         gridTemplateRows: initTemplateRows
+      },
+      ".feedback-body.response": {
+        alignItems: "center",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center"
       }
     }
-  }, React__default.createElement(FormField, null, notificationElement, descriptionElement), isFormView && React__default.createElement(React__default.Fragment, null, showCategoryField && React__default.createElement(FormField, null, React__default.createElement(RadioGroup$1, {
+  }, isFormView && React__default.createElement(React__default.Fragment, null, React__default.createElement(react.VStack, {
+    className: "feedback-body",
+    spacing: "s"
+  }, (notificationElement || descriptionElement) && React__default.createElement(React__default.Fragment, null, notificationElement, descriptionElement), showCategoryField && React__default.createElement(FormField, null, React__default.createElement(RadioGroup$1, {
     defaultValue: state.category,
     id: id + "-category",
     isDisabled: isSubmitted,
     labelText: "What is your feedback about?",
-    layout: "row",
+    layout: isLargerThanMobile ? "row" : "column",
     name: id + "-category",
     onChange: function onChange(selected) {
       return setCategory(selected);
@@ -9628,7 +9934,9 @@ var FeedbackBox$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(fun
     id: "bug",
     labelText: "Bug",
     value: "bug"
-  }))), React__default.createElement(FormField, null, React__default.createElement(TextInput, {
+  }))), React__default.createElement(FormField, {
+    width: "100%"
+  }, React__default.createElement(TextInput, {
     helperText: maxCommentCharacters - state.comment.length + " characters remaining",
     id: id + "-comment",
     invalidText: "Please fill out this field.",
@@ -9644,7 +9952,9 @@ var FeedbackBox$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(fun
     placeholder: "Enter your question or feedback here",
     type: "textarea",
     defaultValue: state.comment
-  })), showEmailField && React__default.createElement(FormField, null, React__default.createElement(TextInput, {
+  })), showEmailField && React__default.createElement(FormField, {
+    width: "100%"
+  }, React__default.createElement(TextInput, {
     id: id + "-email",
     invalidText: "Please enter a valid email address.",
     isDisabled: isSubmitted,
@@ -9657,7 +9967,7 @@ var FeedbackBox$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(fun
     placeholder: "Enter your email address here",
     type: "email",
     value: state.email
-  })), privacyPolicyField, React__default.createElement(FormField, null, React__default.createElement(ButtonGroup, {
+  }))), privacyPolicyField, React__default.createElement(FormField, null, React__default.createElement(ButtonGroup, {
     buttonWidth: "full",
     id: "submit-cancel"
   }, React__default.createElement(Button, {
@@ -9672,6 +9982,7 @@ var FeedbackBox$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(fun
     key: "submit",
     type: "submit"
   }, "Submit")))), isConfirmationView && React__default.createElement(React__default.Fragment, null, React__default.createElement(react.Box, {
+    className: "feedback-body response",
     key: "confirmationWrapper",
     margin: "auto",
     tabIndex: 0,
@@ -9690,6 +10001,7 @@ var FeedbackBox$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(fun
     buttonType: "secondary",
     onClick: closeAndResetForm
   }, "Return to Browsing")))), isErrorView && React__default.createElement(React__default.Fragment, null, React__default.createElement(react.Box, {
+    className: "feedback-body response",
     color: "ui.error.primary",
     key: "errorWrapper",
     margin: "auto",
@@ -9738,78 +10050,730 @@ function useFeedbackBox() {
   };
 }
 
-var _excluded$1f = ["children", "className", "id", "inline", "listItems", "noStyling", "title", "type"];
+var _excluded$1f = ["id", "isOpen", "multiSelectId", "multiSelectLabel", "onClear", "onKeyDown", "onMenuToggle", "selectedItems"];
+var _templateObject;
+var grow = /*#__PURE__*/react.keyframes(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  from {width: 22px; opacity: 0; }\n  to {width: 46px; opacity: 1;}\n"])));
 /**
- * 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
- * only display for the `Description` list type.
+ * The toggle button component used to open and close the `MultiSelect` menu.
+ * A second button is rendered above the main button that displays the current
+ * number of selected items. Clicking on the second button will clear all
+ * the selected items and the main button's close event will not be fired
+ * (as expected).
  */
-var List$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var children = props.children,
-    className = props.className,
-    id = props.id,
-    _props$inline = props.inline,
-    inline = _props$inline === void 0 ? false : _props$inline,
-    listItems = props.listItems,
-    _props$noStyling = props.noStyling,
-    noStyling = _props$noStyling === void 0 ? false : _props$noStyling,
-    title = props.title,
-    _props$type = props.type,
-    type = _props$type === void 0 ? "ul" : _props$type,
+var MultiSelectMenuButton$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _selectedItems$multiS;
+  var id = props.id,
+    isOpen = props.isOpen,
+    multiSelectId = props.multiSelectId,
+    multiSelectLabel = props.multiSelectLabel,
+    onClear = props.onClear,
+    onMenuToggle = props.onMenuToggle,
+    selectedItems = props.selectedItems,
     rest = _objectWithoutPropertiesLoose(props, _excluded$1f);
-  var styles = react.useStyleConfig("List", {
-    inline: inline,
-    noStyling: noStyling,
-    variant: type
+  var iconType = isOpen ? "minus" : "plus";
+  var growAnimation = grow + " 150ms ease-out";
+  // Sets the selected items count on the menu button.
+  var getSelectedItemsCount;
+  var selectedItemsAriaLabel;
+  if (((_selectedItems$multiS = selectedItems[multiSelectId]) == null ? void 0 : _selectedItems$multiS.items.length) > 0) {
+    getSelectedItemsCount = "" + selectedItems[multiSelectId].items.length;
+    var itemPlural = getSelectedItemsCount === "1" ? "" : "s";
+    selectedItemsAriaLabel = getSelectedItemsCount + " item" + itemPlural + " selected";
+  }
+  var styles = react.useMultiStyleConfig("MultiSelectMenuButton", {
+    isOpen: isOpen,
+    hasSelectedItems: getSelectedItemsCount
   });
-  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) {
-    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;
+  // We need this for our "fake" button inside the main menu button.
+  function onKeyPress(e) {
+    var enterOrSpace = e.key === "Enter" || e.key === " " || e.key === "Spacebar" || e.which === 13 || e.which === 32;
+    if (enterOrSpace) {
+      e.preventDefault();
+      onClear();
+    }
   }
-  if (!children && !listItems) {
-    console.warn("NYPL Reservoir List: Pass in either `<li>` children or pass data in " + "the `listItems` prop, not both.");
-    return null;
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Button, Object.assign({
+    buttonType: "secondary",
+    id: id,
+    onClick: onMenuToggle,
+    ref: ref,
+    __css: styles.menuButton
+  }, rest), React__default.createElement(react.Box, {
+    as: "span",
+    title: multiSelectLabel,
+    __css: styles.buttonLabel
+  }, multiSelectLabel), React__default.createElement(Icon, {
+    id: "ms-" + multiSelectId + "-icon",
+    name: iconType,
+    size: "small"
+  })), getSelectedItemsCount && React__default.createElement(react.Box, {
+    animation: growAnimation,
+    "aria-label": selectedItemsAriaLabel,
+    as: "span",
+    onClick: onClear,
+    onKeyPress: onKeyPress,
+    role: "button",
+    tabIndex: 0,
+    __css: styles.selectedItemsCountButton
+  }, React__default.createElement(react.Box, {
+    as: "span",
+    verticalAlign: "text-bottom"
+  }, getSelectedItemsCount), React__default.createElement(Icon, {
+    align: "right",
+    id: "ms-" + multiSelectId + "-selected-items-count-icon",
+    marginLeft: "xs",
+    name: "close",
+    size: "xsmall"
+  })));
+});
+
+var _excluded$1g = ["id", "isBlockElement", "isDefaultOpen", "items", "label", "onChange", "onClear", "selectedItems", "width"];
+/** MultiSelectListbox renders a non-hierarchical list of checkbox options for the `variant="listbox". It leverager downshift-js for accessiblity. */
+var MultiSelectListbox = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var id = props.id,
+    isBlockElement = props.isBlockElement,
+    isDefaultOpen = props.isDefaultOpen,
+    items = props.items,
+    label = props.label,
+    onChange = props.onChange,
+    onClear = props.onClear,
+    selectedItems = props.selectedItems,
+    width = props.width,
+    rest = _objectWithoutPropertiesLoose(props, _excluded$1g);
+  // Downshift.
+  var _useSelect = downshift.useSelect({
+      items: items,
+      // Downshift's internal state for handling keyboard and mouse events.
+      stateReducer: function stateReducer(state, actionAndChanges) {
+        var changes = actionAndChanges.changes,
+          type = actionAndChanges.type;
+        switch (type) {
+          case downshift.useSelect.stateChangeTypes.MenuKeyDownEnter:
+          case downshift.useSelect.stateChangeTypes.MenuKeyDownSpaceButton:
+          case downshift.useSelect.stateChangeTypes.ItemClick:
+            return _extends({}, changes, {
+              isOpen: true,
+              highlightedIndex: state.highlightedIndex
+            });
+          default:
+            return changes;
+        }
+      },
+      //@ts-ignore
+      selectedItem: selectedItems,
+      onSelectedItemChange: function onSelectedItemChange(_ref) {
+        var selectedItem = _ref.selectedItem;
+        onChange(selectedItem, id);
+      },
+      initialIsOpen: isDefaultOpen
+    }),
+    getItemProps = _useSelect.getItemProps,
+    getMenuProps = _useSelect.getMenuProps,
+    getToggleButtonProps = _useSelect.getToggleButtonProps,
+    highlightedIndex = _useSelect.highlightedIndex,
+    isOpen = _useSelect.isOpen;
+  var styles = react.useMultiStyleConfig("MultiSelect", {
+    width: width,
+    isBlockElement: isBlockElement,
+    isOpen: isOpen
+  });
+  // If a item passed to the listbox variant has children,
+  if (items.some(function (item) {
+    return item.children;
+  })) {
+    console.warn("NYPL Reservoir MultiSelect: Only the variant 'dialog' can render nested select items.");
   }
-  /**
-   * 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.
-   */
-  var listChildrenElms = function listChildrenElms(listType) {
-    if (children) {
-      return children;
-    }
-    if (!listItems) {
-      return null;
-    }
-    if (listType === "ol" || listType === "ul") {
-      return listItems.map(function (item, i) {
-        return React__default.createElement("li", {
-          key: i
-        }, item);
-      });
-    } else if (listType === "dl") {
-      return listItems.map(function (item, i) {
-        return [React__default.createElement("dt", {
-          key: i + "-term"
-        }, item.term), React__default.createElement("dd", {
-          key: i + "-des"
-        }, item.description)];
-      });
-    }
-    return null;
-  };
-  /**
-   * Checks for `dt` and `dd` elements and consoles a warning if the
-   * children are different HTML elements.
-   */
-  var checkDescriptionChildrenError = function checkDescriptionChildrenError() {
-    React__default.Children.map(children, function (child) {
+  return React__default.createElement(react.Box, Object.assign({
+    id: id,
+    __css: styles
+  }, rest), React__default.createElement(MultiSelectMenuButton$1, Object.assign({
+    multiSelectId: id,
+    multiSelectLabel: label,
+    isOpen: isOpen,
+    selectedItems: selectedItems,
+    onClear: onClear,
+    ref: ref
+  }, getToggleButtonProps({
+    id: "ms-" + id + "-menu-button",
+    "aria-labelledby": "ms-" + id + "-menu ms-" + id + "-menu-button"
+  }))), React__default.createElement(react.Box, {
+    __css: styles.menuContainer
+  }, React__default.createElement(react.UnorderedList, Object.assign({
+    styleType: "none",
+    marginInlineStart: "0"
+  }, getMenuProps({
+    id: "ms-" + id + "-menu",
+    "aria-labelledby": "ms-" + id + "-menu-button"
+  }), {
+    // @FIX This prevents the menu from closing when checkbox or label is clicked.
+    onClick: function onClick(e) {
+      return e.preventDefault();
+    },
+    __css: styles.menu
+  }), isOpen && items.map(function (item, index) {
+    var _selectedItems$id;
+    return React__default.createElement(react.ListItem, Object.assign({
+      py: 1,
+      // @TODO fix this, we want to pass the key prop as part of ...getItemProps but get
+      // error  Missing "key" prop for element in iterator  react/jsx-key
+      key: item.id
+    }, getItemProps({
+      id: "ms-" + id + "-item-" + index,
+      key: item.id,
+      item: item,
+      index: index
+    }), {
+      sx: highlightedIndex === index ? {
+        backgroundColor: "ui.gray.x-light-cool"
+      } : {}
+    }), React__default.createElement(Checkbox, {
+      id: item.id,
+      labelText: item.name,
+      name: item.name,
+      isChecked: (_selectedItems$id = selectedItems[id]) == null ? void 0 : _selectedItems$id.items.includes(item.id),
+      onChange: function onChange() {
+        return null;
+      }
+    }));
+  }))));
+}),
+// Pass all custom props to Chakra and override, for width prop.
+{
+  shouldForwardProp: function shouldForwardProp() {
+    return true;
+  }
+});
+
+var _excluded$1h = ["id", "isBlockElement", "isDefaultOpen", "items", "label", "onApply", "onChange", "onClear", "onMixedStateChange", "selectedItems", "width"];
+var MultiSelectDialog = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var id = props.id,
+    isBlockElement = props.isBlockElement,
+    isDefaultOpen = props.isDefaultOpen,
+    items = props.items,
+    label = props.label,
+    onApply = props.onApply,
+    onChange = props.onChange,
+    onClear = props.onClear,
+    onMixedStateChange = props.onMixedStateChange,
+    selectedItems = props.selectedItems,
+    width = props.width,
+    rest = _objectWithoutPropertiesLoose(props, _excluded$1h);
+  // Use NYPL Breakpoints hook to check screen size
+  var _useNYPLBreakpoints = useNYPLBreakpoints(),
+    isLargerThanMobile = _useNYPLBreakpoints.isLargerThanMobile;
+  // Control the open or closed state of the MultiSelect.
+  var _useState = React.useState(isDefaultOpen),
+    isOpen = _useState[0],
+    setIsOpen = _useState[1];
+  var styles = react.useMultiStyleConfig("MultiSelect", {
+    width: width,
+    isBlockElement: isBlockElement,
+    isOpen: isOpen
+  });
+  // Create a ref that we add to the element for which we want to detect outside clicks.
+  var internalRef = React.useRef();
+  // Custom Hook, Closes the MultiSelect if user clicks outside.
+  function useOnClickOutside(ref, handler) {
+    React__default.useEffect(function () {
+      var listener = function listener(event) {
+        // Do nothing if clicking ref's element or descendent elements
+        if (!ref.current || ref.current.contains(event.target)) {
+          return;
+        }
+        handler(event);
+      };
+      document.addEventListener("mousedown", listener);
+      document.addEventListener("touchstart", listener);
+      return function () {
+        document.removeEventListener("mousedown", listener);
+        document.removeEventListener("touchstart", listener);
+      };
+    }, [ref, handler]);
+  }
+  useOnClickOutside(internalRef, function () {
+    return setIsOpen(false);
+  });
+  // Merge internal ref with the ref passed through the chakra function.
+  var mergedRefs = react.useMergeRefs(internalRef, ref);
+  var isChecked = function isChecked(multiSelectId, itemId) {
+    if (selectedItems[multiSelectId]) {
+      return !!selectedItems[multiSelectId].items.find(function (selectedItemId) {
+        return selectedItemId === itemId;
+      });
+    }
+    return false;
+  };
+  // isAllChecked defines the isChecked status of parent checkboxes. If all child items are selected, it will turn true, otherwise it returns false.
+  // This prop is only passed to parent options.
+  var isAllChecked = function isAllChecked(multiSelectId, item) {
+    var childIds = item.children.map(function (childItem) {
+      return childItem.id;
+    });
+    if (selectedItems[multiSelectId] !== undefined) {
+      return childIds.every(function (childItem) {
+        return selectedItems[multiSelectId].items.includes(childItem);
+      });
+    }
+    return false;
+  };
+  // isInteterminate will return true if some child items of the parent item are selected. This prop is only passed to parent options.
+  var isIndeterminate = function isIndeterminate(multiSelectId, item) {
+    var childIds = item.children.map(function (childItem) {
+      return childItem.id;
+    });
+    if (selectedItems[multiSelectId] !== undefined && childIds.some(function (childItem) {
+      return selectedItems[multiSelectId].items.includes(childItem);
+    })) {
+      return !isAllChecked(multiSelectId, item);
+    }
+    return false;
+  };
+  return React__default.createElement(react.Box, Object.assign({
+    id: id,
+    ref: mergedRefs,
+    __css: styles
+  }, rest), React__default.createElement(FocusLock, {
+    isDisabled: !isOpen
+  }, React__default.createElement(MultiSelectMenuButton$1, {
+    id: "ms-" + id + "-menu-button",
+    multiSelectId: id,
+    multiSelectLabel: label,
+    isOpen: isOpen,
+    selectedItems: selectedItems,
+    onMenuToggle: function onMenuToggle() {
+      setIsOpen(!isOpen);
+    },
+    onClear: onClear
+  }), React__default.createElement(react.Box, Object.assign({
+    role: "dialog",
+    __css: styles.menuContainer
+  }, isOpen && {
+    "aria-modal": true
+  }, {
+    "aria-labelledby": "ms-" + id + "-menu-button"
+  }), React__default.createElement(react.UnorderedList, {
+    styleType: "none",
+    marginInlineStart: "0",
+    __css: styles.menu
+  }, isOpen && items.map(function (item) {
+    return React__default.createElement(react.ListItem, {
+      key: item.id,
+      py: "xxs"
+    }, item.children ? React__default.createElement(React__default.Fragment, null, React__default.createElement(Checkbox, Object.assign({
+      id: item.id,
+      labelText: item.name,
+      name: item.name
+    }, onMixedStateChange !== undefined ? {
+      isChecked: isAllChecked(id, item),
+      isIndeterminate: isIndeterminate(id, item),
+      onChange: onMixedStateChange
+    } : {
+      isChecked: isChecked(id, item.id),
+      onChange: onChange
+    })), React__default.createElement(react.UnorderedList, {
+      styleType: "none",
+      marginInlineStart: "0",
+      __css: styles.menuChildren
+    }, item.children.map(function (childItem) {
+      return React__default.createElement(react.ListItem, {
+        key: childItem.id,
+        py: "xxs"
+      }, React__default.createElement(Checkbox, {
+        id: childItem.id,
+        labelText: childItem.name,
+        name: childItem.name,
+        isChecked: isChecked(id, childItem.id),
+        onChange: onChange
+      }));
+    }))) : React__default.createElement(Checkbox, {
+      id: item.id,
+      labelText: item.name,
+      name: item.name,
+      isChecked: isChecked(id, item.id),
+      onChange: onChange
+    }));
+  })), isOpen && isLargerThanMobile && React__default.createElement(ButtonGroup, {
+    __css: styles.actionButtons
+  }, React__default.createElement(Button, {
+    id: "ms-" + id + "-clear",
+    buttonType: "link",
+    type: "button",
+    onClick: onClear
+  }, "Clear"), React__default.createElement(Button, {
+    id: "ms-" + id + "-apply",
+    buttonType: "primary",
+    type: "button",
+    onClick: function onClick() {
+      // Close the multiselect on apply.
+      setIsOpen(false);
+      // Run the onApply prop function.
+      onApply();
+    }
+  }, "Apply")))));
+}),
+// Pass all custom props to Chakra and override, for width prop.
+{
+  shouldForwardProp: function shouldForwardProp() {
+    return true;
+  }
+});
+
+var _excluded$1i = ["id", "isBlockElement", "isDefaultOpen", "items", "label", "onApply", "onChange", "onClear", "onMixedStateChange", "selectedItems", "variant", "width"];
+/**
+ * The `MultiSelect` component is a form input element that presents a list
+ * of `Checkbox` components from which a user can make one or multiple
+ * selections. Two variants of the MultiSelect component are offered, each with
+ * slightly different functionality and requirements.  Because of these
+ * differences, the two variants are broken out in separate stories below.
+ */
+var MultiSelect$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var id = props.id,
+    _props$isBlockElement = props.isBlockElement,
+    isBlockElement = _props$isBlockElement === void 0 ? false : _props$isBlockElement,
+    _props$isDefaultOpen = props.isDefaultOpen,
+    isDefaultOpen = _props$isDefaultOpen === void 0 ? false : _props$isDefaultOpen,
+    items = props.items,
+    label = props.label,
+    onApply = props.onApply,
+    onChange = props.onChange,
+    onClear = props.onClear,
+    onMixedStateChange = props.onMixedStateChange,
+    selectedItems = props.selectedItems,
+    variant = props.variant,
+    _props$width = props.width,
+    width = _props$width === void 0 ? "default" : _props$width,
+    rest = _objectWithoutPropertiesLoose(props, _excluded$1i);
+  var commonProps = {
+    id: id,
+    isBlockElement: isBlockElement,
+    isDefaultOpen: isDefaultOpen,
+    items: items,
+    label: label,
+    onClear: onClear,
+    selectedItems: selectedItems,
+    variant: variant,
+    width: width
+  };
+  if (variant === "listbox") {
+    var listboxOnChange = onChange;
+    return React__default.createElement(MultiSelectListbox, Object.assign({}, commonProps, {
+      ref: ref,
+      onChange: listboxOnChange
+    }, rest));
+  }
+  if (variant === "dialog") {
+    var dialogOnChange = onChange;
+    return React__default.createElement(MultiSelectDialog, Object.assign({}, commonProps, {
+      onChange: dialogOnChange,
+      onMixedStateChange: onMixedStateChange,
+      onApply: onApply,
+      ref: ref
+    }, rest));
+  }
+  return null;
+}),
+// Pass all custom props to Chakra and override, for width prop.
+{
+  shouldForwardProp: function shouldForwardProp() {
+    return true;
+  }
+});
+
+var _excluded$1j = ["children", "className", "id", "labelText", "layout", "multiSelectWidth", "showLabel"];
+/**
+ * `MultiSelectGroup` is a wrapper component specific for `MultiSelect` components. The wrapped `MutliSelect` components can be displayed in a
+ * column or in a row. The `MultiSelectGroup` component renders all the necessary
+ * wrapping and associated text elements, but the child elements
+ * _need_ to be `MultiSelect` components from the NYPL Design System.
+ */
+var MultiSelectGroup = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var children = props.children,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className,
+    id = props.id,
+    labelText = props.labelText,
+    _props$layout = props.layout,
+    layout = _props$layout === void 0 ? "row" : _props$layout,
+    _props$multiSelectWid = props.multiSelectWidth,
+    multiSelectWidth = _props$multiSelectWid === void 0 ? "default" : _props$multiSelectWid,
+    _props$showLabel = props.showLabel,
+    showLabel = _props$showLabel === void 0 ? true : _props$showLabel,
+    rest = _objectWithoutPropertiesLoose(props, _excluded$1j);
+  var newChildren = [];
+  var _useNYPLBreakpoints = useNYPLBreakpoints(),
+    isLargerThanMobile = _useNYPLBreakpoints.isLargerThanMobile;
+  var finalLayout = isLargerThanMobile ? layout : "column";
+  var finallWidth = isLargerThanMobile ? multiSelectWidth : "full";
+  var isBlockElement = layout === "column" ? true : false;
+  var styles = react.useMultiStyleConfig("MultiSelectGroup", {
+    width: finallWidth
+  });
+  // Go through the MultiSelect children and update props as needed.
+  React__default.Children.map(children, function (child) {
+    if (React__default.isValidElement(child)) {
+      // @TODO: DXP needs to pass custom MultiSelects that wrap DS Mutliselects - type check deos not allow DXP to use MultiSelectGroup
+      // if (child.type !== MultiSelect) {
+      //   console.warn(
+      //     "NYPL Reservoir MultiSelectGroup: Only MultiSelect components can be children of MultiSelectGroup."
+      //   );
+      //   return;
+      // }
+      if (child.type === MultiSelect$1) {
+        var _props = {
+          isBlockElement: isBlockElement,
+          width: multiSelectWidth
+        };
+        newChildren.push(React__default.cloneElement(child, _props));
+      } else {
+        newChildren.push(React__default.cloneElement(child));
+      }
+    }
+  });
+  return React__default.createElement(Fieldset, Object.assign({
+    id: id + "-multiselect-group",
+    legendText: labelText,
+    isLegendHidden: !showLabel,
+    __css: styles
+  }, rest), React__default.createElement(react.Stack, {
+    "aria-label": !showLabel ? labelText : undefined,
+    className: className,
+    columnGap: "xs",
+    "data-testid": "multi-select-group",
+    direction: finalLayout,
+    id: id,
+    ref: ref,
+    rowGap: finalLayout === "row" ? "xs" : "0",
+    spacing: isLargerThanMobile ? "xs" : "0",
+    wrap: layout === "row" ? "wrap" : null,
+    sx: {
+      "> div": {
+        _notFirst: {
+          mx: "0"
+        }
+      }
+    }
+  }, newChildren));
+}));
+
+var _excluded$1k = ["children", "id", "isOpen", "headingText", "layout", "onClear", "onSubmit", "onToggle", "onOpen", "onClose", "selectedItems", "showClearAll", "showSubmitAll", "filterWidth"];
+/**
+ * `FilterBar` is a wrapper component for filter components.
+ * The DS considers the following components as filter components:
+ * - `MultiSelectGroup`
+ *
+ * The wrapped components/ component groups can be displayed in a column or
+ * in a row layout. `FilterBar` can render additional `Clear All` and a `Apply Filters` buttons. The two
+ * _optional_ buttons are controlled by the `showClearAll`/ `onClear` or `showSubmitAll`/`onSubmit` props repectively.
+ */
+var FilterBar$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var children = props.children,
+    id = props.id,
+    isOpen = props.isOpen,
+    headingText = props.headingText,
+    _props$layout = props.layout,
+    layout = _props$layout === void 0 ? "row" : _props$layout,
+    onClear = props.onClear,
+    onSubmit = props.onSubmit,
+    onToggle = props.onToggle,
+    onOpen = props.onOpen,
+    _onClose = props.onClose,
+    selectedItems = props.selectedItems,
+    _props$showClearAll = props.showClearAll,
+    showClearAll = _props$showClearAll === void 0 ? false : _props$showClearAll,
+    _props$showSubmitAll = props.showSubmitAll,
+    showSubmitAll = _props$showSubmitAll === void 0 ? false : _props$showSubmitAll,
+    filterWidth = props.filterWidth,
+    rest = _objectWithoutPropertiesLoose(props, _excluded$1k);
+  var _useNYPLBreapoints = useNYPLBreakpoints(),
+    isLargerThanMedium = _useNYPLBreapoints.isLargerThanMedium;
+  var finalLayout = isLargerThanMedium ? layout : "column";
+  var finalWidth = isLargerThanMedium ? filterWidth ? filterWidth : finalLayout === "column" ? "full" : "default" : "full";
+  var styles = react.useMultiStyleConfig("FilterBar", {
+    layout: finalLayout,
+    width: finalWidth
+  });
+  var getSelectedItemsCount = function getSelectedItemsCount() {
+    return Object.entries(selectedItems).length ? "(" + Object.entries(selectedItems).length + ")" : "";
+  };
+  // Warning when onSubmit is passed but the showSubmitAll is missing
+  if (onSubmit && showSubmitAll === false) {
+    console.warn("NYPL Reservoir FilterBar: The `onSubmit` handler was set, but the `Apply Filters` button is not visible.");
+  }
+  // Warning when showSubmitAll is passed but onSubmit is missing
+  if (onSubmit === undefined && showSubmitAll === true) {
+    console.warn("NYPL Reservoir FilterBar: The `Apply Filters` button is rendering but no onSubmit function was passed.");
+  }
+  var newChildren = [];
+  // Go through the FilterBar children and update props as needed.
+  React__default.Children.map(children, function (child) {
+    if (React__default.isValidElement(child)) {
+      if (child.type === MultiSelectGroup) {
+        var _props = {
+          layout: finalLayout,
+          multiSelectWidth: finalWidth
+        };
+        newChildren.push(React__default.cloneElement(child, _props));
+      } else if (child.type === MultiSelect$1) {
+        var _props2 = {
+          isBlockElement: finalLayout === "column",
+          width: finalWidth
+        };
+        newChildren.push(React__default.cloneElement(child, _props2));
+      } else {
+        console.warn("NYPL Reservoir FilterBar: Invalid child component was passed", child);
+        return;
+      }
+    }
+  });
+  return React__default.createElement(react.Box, Object.assign({
+    id: "filter-bar-" + id,
+    __css: styles,
+    ref: ref
+  }, rest), isLargerThanMedium ? React__default.createElement(React__default.Fragment, null, headingText && React__default.createElement(Heading, {
+    text: headingText,
+    level: "two",
+    size: "tertiary"
+  }), React__default.createElement(react.Stack, {
+    alignItems: layout === "row" ? "flex-end" : null,
+    columnGap: "l",
+    direction: layout,
+    rowGap: "s",
+    spacing: "0",
+    wrap: layout === "row" ? "wrap" : null,
+    sx: {
+      "> div": {
+        _notFirst: {
+          mx: "0"
+        }
+      }
+    }
+  }, newChildren && newChildren.map(function (newChild, i) {
+    return React__default.createElement(react.Box, {
+      key: "filter-bar-child-" + i
+    }, newChild);
+  }), (showSubmitAll || showClearAll) && React__default.createElement(ButtonGroup, {
+    layout: finalLayout,
+    __css: styles.globalButtonGroup,
+    buttonWidth: layout === "column" ? "full" : "default"
+  }, showSubmitAll && React__default.createElement(Button, {
+    buttonType: "primary",
+    id: id + "-submit-all-button",
+    onClick: onSubmit
+  }, "Apply Filters"), showClearAll && React__default.createElement(Button, {
+    buttonType: "text",
+    id: id + "-clear-all-button",
+    onClick: onClear,
+    textAlign: "center"
+  }, "Clear Filters")))) : React__default.createElement(React__default.Fragment, null, React__default.createElement(Button, {
+    id: "filter-bar-" + id + "-show-filters",
+    buttonType: "secondary",
+    onClick: function onClick() {
+      onToggle === undefined ? onOpen() : onToggle();
+    }
+  }, "Show Filter " + getSelectedItemsCount()), React__default.createElement(react.Modal, {
+    isOpen: isOpen,
+    onClose: function onClose() {
+      onToggle === undefined ? _onClose() : onToggle();
+    },
+    size: "full",
+    scrollBehavior: "inside"
+  }, React__default.createElement(react.ModalOverlay, null), React__default.createElement(react.ModalContent, null, React__default.createElement(react.ModalHeader, {
+    sx: styles.modalHeader
+  }, "Filter Criteria"), React__default.createElement(react.ModalCloseButton, {
+    sx: styles.modalCloseButton
+  }), React__default.createElement(react.ModalBody, null, newChildren), React__default.createElement(react.ModalFooter, {
+    sx: styles.modalFooter
+  }, React__default.createElement(ButtonGroup, {
+    layout: "row",
+    buttonWidth: "full"
+  }, React__default.createElement(Button, {
+    id: "filter-bar-" + id + "-see-results",
+    type: "submit",
+    onClick: function onClick() {
+      onSubmit();
+      onToggle === undefined ? _onClose() : onToggle();
+    }
+  }, "Show Results"), React__default.createElement(Button, {
+    id: "filter-bar-" + id + "-clear",
+    buttonType: "text",
+    type: "reset",
+    textAlign: "center",
+    onClick: onClear
+  }, "Clear Filters")))))));
+}));
+
+var _excluded$1l = ["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
+ * only display for the `Description` list type.
+ */
+var List$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var children = props.children,
+    className = props.className,
+    id = props.id,
+    _props$inline = props.inline,
+    inline = _props$inline === void 0 ? false : _props$inline,
+    listItems = props.listItems,
+    _props$noStyling = props.noStyling,
+    noStyling = _props$noStyling === void 0 ? false : _props$noStyling,
+    title = props.title,
+    _props$type = props.type,
+    type = _props$type === void 0 ? "ul" : _props$type,
+    rest = _objectWithoutPropertiesLoose(props, _excluded$1l);
+  var styles = react.useStyleConfig("List", {
+    inline: inline,
+    noStyling: noStyling,
+    variant: type
+  });
+  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) {
+    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;
+  }
+  if (!children && !listItems) {
+    console.warn("NYPL Reservoir List: Pass in either `<li>` children or pass data in " + "the `listItems` prop, not both.");
+    return null;
+  }
+  /**
+   * 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.
+   */
+  var listChildrenElms = function listChildrenElms(listType) {
+    if (children) {
+      return children;
+    }
+    if (!listItems) {
+      return null;
+    }
+    if (listType === "ol" || listType === "ul") {
+      return listItems.map(function (item, i) {
+        return React__default.createElement("li", {
+          key: i
+        }, item);
+      });
+    } else if (listType === "dl") {
+      return listItems.map(function (item, i) {
+        return [React__default.createElement("dt", {
+          key: i + "-term"
+        }, item.term), React__default.createElement("dd", {
+          key: i + "-des"
+        }, item.description)];
+      });
+    }
+    return null;
+  };
+  /**
+   * Checks for `dt` and `dd` elements and consoles a warning if the
+   * children are different HTML elements.
+   */
+  var checkDescriptionChildrenError = function checkDescriptionChildrenError() {
+    React__default.Children.map(children, function (child) {
       if (child.type !== "dt" && child.type !== "dd" && child.type !== React__default.Fragment && child.props.mdxType !== "dt" && child.props.mdxType !== "dd" && child.props.mdxType !== React__default.Fragment) {
         console.warn("NYPL Reservoir List: Direct children of `List` (description) must " + "be `<dt>`s and `<dd>`s.");
       }
@@ -9858,14 +10822,14 @@ var checkListChildrenError = function checkListChildrenError(children, listType,
 };
 
 var _path$L, _path2$f, _path3$7;
-var _excluded$1g = ["title", "titleId"];
+var _excluded$1m = ["title", "titleId"];
 function _extends$R() { _extends$R = Object.assign ? Object.assign.bind() : 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); }
 function _objectWithoutProperties$Q(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$R(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$R(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; }
 var SvgLogoAppleAppStoreBlack = function SvgLogoAppleAppStoreBlack(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$Q(_ref, _excluded$1g);
+    props = _objectWithoutProperties$Q(_ref, _excluded$1m);
   return /*#__PURE__*/React.createElement("svg", _extends$R({
     viewBox: "0 0 200 67",
     fill: "none",
@@ -9886,14 +10850,14 @@ var SvgLogoAppleAppStoreBlack = function SvgLogoAppleAppStoreBlack(_ref) {
 };
 
 var _path$M, _path2$g, _path3$8;
-var _excluded$1h = ["title", "titleId"];
+var _excluded$1n = ["title", "titleId"];
 function _extends$S() { _extends$S = Object.assign ? Object.assign.bind() : 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); }
 function _objectWithoutProperties$R(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$S(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$S(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; }
 var SvgLogoAppleAppStoreWhite = function SvgLogoAppleAppStoreWhite(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$R(_ref, _excluded$1h);
+    props = _objectWithoutProperties$R(_ref, _excluded$1n);
   return /*#__PURE__*/React.createElement("svg", _extends$S({
     viewBox: "0 0 200 67",
     fill: "none",
@@ -9914,14 +10878,14 @@ var SvgLogoAppleAppStoreWhite = function SvgLogoAppleAppStoreWhite(_ref) {
 };
 
 var _path$N, _path2$h, _path3$9;
-var _excluded$1i = ["title", "titleId"];
+var _excluded$1o = ["title", "titleId"];
 function _extends$T() { _extends$T = Object.assign ? Object.assign.bind() : 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); }
 function _objectWithoutProperties$S(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$T(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$T(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; }
 var SvgLogoBplBlack = function SvgLogoBplBlack(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$S(_ref, _excluded$1i);
+    props = _objectWithoutProperties$S(_ref, _excluded$1o);
   return /*#__PURE__*/React.createElement("svg", _extends$T({
     viewBox: "0 0 328 120",
     xmlns: "http://www.w3.org/2000/svg",
@@ -9938,14 +10902,14 @@ var SvgLogoBplBlack = function SvgLogoBplBlack(_ref) {
 };
 
 var _path$O, _path2$i, _path3$a;
-var _excluded$1j = ["title", "titleId"];
+var _excluded$1p = ["title", "titleId"];
 function _extends$U() { _extends$U = Object.assign ? Object.assign.bind() : 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); }
 function _objectWithoutProperties$T(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$U(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$U(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; }
 var SvgLogoBplWhite = function SvgLogoBplWhite(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$T(_ref, _excluded$1j);
+    props = _objectWithoutProperties$T(_ref, _excluded$1p);
   return /*#__PURE__*/React.createElement("svg", _extends$U({
     viewBox: "0 0 328 120",
     fill: "#fff",
@@ -9963,14 +10927,14 @@ var SvgLogoBplWhite = function SvgLogoBplWhite(_ref) {
 };
 
 var _rect$2, _path$P;
-var _excluded$1k = ["title", "titleId"];
+var _excluded$1q = ["title", "titleId"];
 function _extends$V() { _extends$V = Object.assign ? Object.assign.bind() : 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); }
 function _objectWithoutProperties$U(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$V(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$V(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; }
 var SvgLogoCleverBadgeColor = function SvgLogoCleverBadgeColor(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$U(_ref, _excluded$1k);
+    props = _objectWithoutProperties$U(_ref, _excluded$1q);
   return /*#__PURE__*/React.createElement("svg", _extends$V({
     viewBox: "0 0 118 119",
     fill: "none",
@@ -9993,14 +10957,14 @@ var SvgLogoCleverBadgeColor = function SvgLogoCleverBadgeColor(_ref) {
 };
 
 var _path$Q;
-var _excluded$1l = ["title", "titleId"];
+var _excluded$1r = ["title", "titleId"];
 function _extends$W() { _extends$W = Object.assign ? Object.assign.bind() : 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); }
 function _objectWithoutProperties$V(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$W(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$W(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; }
 var SvgLogoCleverColor = function SvgLogoCleverColor(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$V(_ref, _excluded$1l);
+    props = _objectWithoutProperties$V(_ref, _excluded$1r);
   return /*#__PURE__*/React.createElement("svg", _extends$W({
     viewBox: "0 0 312 88",
     fill: "#436CF2",
@@ -10016,14 +10980,14 @@ var SvgLogoCleverColor = function SvgLogoCleverColor(_ref) {
 };
 
 var _path$R;
-var _excluded$1m = ["title", "titleId"];
+var _excluded$1s = ["title", "titleId"];
 function _extends$X() { _extends$X = Object.assign ? Object.assign.bind() : 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); }
 function _objectWithoutProperties$W(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$X(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$X(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; }
 var SvgLogoCleverWhite = function SvgLogoCleverWhite(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$W(_ref, _excluded$1m);
+    props = _objectWithoutProperties$W(_ref, _excluded$1s);
   return /*#__PURE__*/React.createElement("svg", _extends$X({
     viewBox: "0 0 312 88",
     fill: "#fff",
@@ -10039,14 +11003,14 @@ var SvgLogoCleverWhite = function SvgLogoCleverWhite(_ref) {
 };
 
 var _path$S, _path2$j, _path3$b, _path4$1, _path5, _path6, _path7, _path8, _path9, _path10, _path11, _path12, _path13;
-var _excluded$1n = ["title", "titleId"];
+var _excluded$1t = ["title", "titleId"];
 function _extends$Y() { _extends$Y = Object.assign ? Object.assign.bind() : 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); }
 function _objectWithoutProperties$X(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$Y(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$Y(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; }
 var SvgLogoFirstbookColor = function SvgLogoFirstbookColor(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$X(_ref, _excluded$1n);
+    props = _objectWithoutProperties$X(_ref, _excluded$1t);
   return /*#__PURE__*/React.createElement("svg", _extends$Y({
     viewBox: "0 0 172 152",
     fill: "none",
@@ -10097,14 +11061,14 @@ var SvgLogoFirstbookColor = function SvgLogoFirstbookColor(_ref) {
 };
 
 var _g$3;
-var _excluded$1o = ["title", "titleId"];
+var _excluded$1u = ["title", "titleId"];
 function _extends$Z() { _extends$Z = Object.assign ? Object.assign.bind() : 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); }
 function _objectWithoutProperties$Y(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$Z(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$Z(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; }
 var SvgLogoFirstbookColorNegative = function SvgLogoFirstbookColorNegative(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$Y(_ref, _excluded$1o);
+    props = _objectWithoutProperties$Y(_ref, _excluded$1u);
   return /*#__PURE__*/React.createElement("svg", _extends$Z({
     viewBox: "0 0 170 150",
     fill: "none",
@@ -10160,14 +11124,14 @@ var SvgLogoFirstbookColorNegative = function SvgLogoFirstbookColorNegative(_ref)
 };
 
 var _g$4, _defs;
-var _excluded$1p = ["title", "titleId"];
+var _excluded$1v = ["title", "titleId"];
 function _extends$_() { _extends$_ = Object.assign ? Object.assign.bind() : 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); }
 function _objectWithoutProperties$Z(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$_(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$_(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; }
 var SvgLogoGooglePlayBlack = function SvgLogoGooglePlayBlack(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$Z(_ref, _excluded$1p);
+    props = _objectWithoutProperties$Z(_ref, _excluded$1v);
   return /*#__PURE__*/React.createElement("svg", _extends$_({
     viewBox: "0 0 200 60",
     fill: "none",
@@ -10300,14 +11264,14 @@ var SvgLogoGooglePlayBlack = function SvgLogoGooglePlayBlack(_ref) {
 };
 
 var _path$T, _path2$k;
-var _excluded$1q = ["title", "titleId"];
+var _excluded$1w = ["title", "titleId"];
 function _extends$$() { _extends$$ = Object.assign ? Object.assign.bind() : 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); }
 function _objectWithoutProperties$_(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$$(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$$(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; }
 var SvgLogoLpaColor = function SvgLogoLpaColor(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$_(_ref, _excluded$1q);
+    props = _objectWithoutProperties$_(_ref, _excluded$1w);
   return /*#__PURE__*/React.createElement("svg", _extends$$({
     viewBox: "0 0 186 74",
     fill: "none",
@@ -10325,14 +11289,14 @@ var SvgLogoLpaColor = function SvgLogoLpaColor(_ref) {
 };
 
 var _path$U;
-var _excluded$1r = ["title", "titleId"];
+var _excluded$1x = ["title", "titleId"];
 function _extends$10() { _extends$10 = Object.assign ? Object.assign.bind() : 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); }
 function _objectWithoutProperties$$(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$10(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$10(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; }
 var SvgLogoLpaBlack = function SvgLogoLpaBlack(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$$(_ref, _excluded$1r);
+    props = _objectWithoutProperties$$(_ref, _excluded$1x);
   return /*#__PURE__*/React.createElement("svg", _extends$10({
     viewBox: "0 0 186 74",
     xmlns: "http://www.w3.org/2000/svg",
@@ -10345,14 +11309,14 @@ var SvgLogoLpaBlack = function SvgLogoLpaBlack(_ref) {
 };
 
 var _path$V;
-var _excluded$1s = ["title", "titleId"];
+var _excluded$1y = ["title", "titleId"];
 function _extends$11() { _extends$11 = Object.assign ? Object.assign.bind() : 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); }
 function _objectWithoutProperties$10(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$11(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$11(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; }
 var SvgLogoLpaWhite = function SvgLogoLpaWhite(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$10(_ref, _excluded$1s);
+    props = _objectWithoutProperties$10(_ref, _excluded$1y);
   return /*#__PURE__*/React.createElement("svg", _extends$11({
     viewBox: "0 0 186 74",
     fill: "#fff",
@@ -10366,14 +11330,14 @@ var SvgLogoLpaWhite = function SvgLogoLpaWhite(_ref) {
 };
 
 var _g$5;
-var _excluded$1t = ["title", "titleId"];
+var _excluded$1z = ["title", "titleId"];
 function _extends$12() { _extends$12 = Object.assign ? Object.assign.bind() : 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); }
 function _objectWithoutProperties$11(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$12(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$12(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; }
 var SvgLogoMlnBlack = function SvgLogoMlnBlack(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$11(_ref, _excluded$1t);
+    props = _objectWithoutProperties$11(_ref, _excluded$1z);
   return /*#__PURE__*/React.createElement("svg", _extends$12({
     viewBox: "0 0 300 71",
     xmlns: "http://www.w3.org/2000/svg",
@@ -10388,14 +11352,14 @@ var SvgLogoMlnBlack = function SvgLogoMlnBlack(_ref) {
 };
 
 var _g$6;
-var _excluded$1u = ["title", "titleId"];
+var _excluded$1A = ["title", "titleId"];
 function _extends$13() { _extends$13 = Object.assign ? Object.assign.bind() : 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); }
 function _objectWithoutProperties$12(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$13(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$13(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; }
 var SvgLogoMlnColor = function SvgLogoMlnColor(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$12(_ref, _excluded$1u);
+    props = _objectWithoutProperties$12(_ref, _excluded$1A);
   return /*#__PURE__*/React.createElement("svg", _extends$13({
     viewBox: "0 0 300 71",
     fill: "#C60917",
@@ -10411,14 +11375,14 @@ var SvgLogoMlnColor = function SvgLogoMlnColor(_ref) {
 };
 
 var _g$7;
-var _excluded$1v = ["title", "titleId"];
+var _excluded$1B = ["title", "titleId"];
 function _extends$14() { _extends$14 = Object.assign ? Object.assign.bind() : 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); }
 function _objectWithoutProperties$13(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$14(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$14(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; }
 var SvgLogoMlnWhite = function SvgLogoMlnWhite(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$13(_ref, _excluded$1v);
+    props = _objectWithoutProperties$13(_ref, _excluded$1B);
   return /*#__PURE__*/React.createElement("svg", _extends$14({
     viewBox: "0 0 300 71",
     fill: "#fff",
@@ -10434,14 +11398,14 @@ var SvgLogoMlnWhite = function SvgLogoMlnWhite(_ref) {
 };
 
 var _g$8, _defs$1;
-var _excluded$1w = ["title", "titleId"];
+var _excluded$1C = ["title", "titleId"];
 function _extends$15() { _extends$15 = Object.assign ? Object.assign.bind() : 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$15.apply(this, arguments); }
 function _objectWithoutProperties$14(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$15(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$15(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; }
 var SvgLogoNycdoeColor = function SvgLogoNycdoeColor(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$14(_ref, _excluded$1w);
+    props = _objectWithoutProperties$14(_ref, _excluded$1C);
   return /*#__PURE__*/React.createElement("svg", _extends$15({
     viewBox: "0 0 341 61",
     fill: "none",
@@ -10474,14 +11438,14 @@ var SvgLogoNycdoeColor = function SvgLogoNycdoeColor(_ref) {
   })))));
 };
 
-var _excluded$1x = ["title", "titleId"];
+var _excluded$1D = ["title", "titleId"];
 function _extends$16() { _extends$16 = Object.assign ? Object.assign.bind() : 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$16.apply(this, arguments); }
 function _objectWithoutProperties$15(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$16(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$16(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; }
 var SvgLogoNyplFullBlack = function SvgLogoNyplFullBlack(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$15(_ref, _excluded$1x);
+    props = _objectWithoutProperties$15(_ref, _excluded$1D);
   return /*#__PURE__*/React.createElement("svg", _extends$16({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 966.787 543.733",
@@ -10556,14 +11520,14 @@ var SvgLogoNyplFullBlack = function SvgLogoNyplFullBlack(_ref) {
 };
 
 var _g$9, _defs$2;
-var _excluded$1y = ["title", "titleId"];
+var _excluded$1E = ["title", "titleId"];
 function _extends$17() { _extends$17 = Object.assign ? Object.assign.bind() : 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$17.apply(this, arguments); }
 function _objectWithoutProperties$16(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$17(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$17(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; }
 var SvgLogoNyplFullWhite = function SvgLogoNyplFullWhite(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$16(_ref, _excluded$1y);
+    props = _objectWithoutProperties$16(_ref, _excluded$1E);
   return /*#__PURE__*/React.createElement("svg", _extends$17({
     viewBox: "0 0 967 568",
     fill: "none",
@@ -10591,14 +11555,14 @@ var SvgLogoNyplFullWhite = function SvgLogoNyplFullWhite(_ref) {
 };
 
 var _path$W, _path2$l, _path3$c;
-var _excluded$1z = ["title", "titleId"];
+var _excluded$1F = ["title", "titleId"];
 function _extends$18() { _extends$18 = Object.assign ? Object.assign.bind() : 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$18.apply(this, arguments); }
 function _objectWithoutProperties$17(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$18(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$18(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; }
 var SvgLogoNyplLionBlack = function SvgLogoNyplLionBlack(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$17(_ref, _excluded$1z);
+    props = _objectWithoutProperties$17(_ref, _excluded$1F);
   return /*#__PURE__*/React.createElement("svg", _extends$18({
     viewBox: "0 0 136 135",
     fill: "none",
@@ -10621,14 +11585,14 @@ var SvgLogoNyplLionBlack = function SvgLogoNyplLionBlack(_ref) {
 };
 
 var _path$X;
-var _excluded$1A = ["title", "titleId"];
+var _excluded$1G = ["title", "titleId"];
 function _extends$19() { _extends$19 = Object.assign ? Object.assign.bind() : 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$19.apply(this, arguments); }
 function _objectWithoutProperties$18(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$19(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$19(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; }
 var SvgLogoNyplLionWhite = function SvgLogoNyplLionWhite(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$18(_ref, _excluded$1A);
+    props = _objectWithoutProperties$18(_ref, _excluded$1G);
   return /*#__PURE__*/React.createElement("svg", _extends$19({
     viewBox: "0 0 125 126",
     fill: "none",
@@ -10645,14 +11609,14 @@ var SvgLogoNyplLionWhite = function SvgLogoNyplLionWhite(_ref) {
 };
 
 var _path$Y, _path2$m, _path3$d, _path4$2, _path5$1, _path6$1, _path7$1, _path8$1, _path9$1, _path10$1, _path11$1, _path12$1, _path13$1, _path14, _path15;
-var _excluded$1B = ["title", "titleId"];
+var _excluded$1H = ["title", "titleId"];
 function _extends$1a() { _extends$1a = Object.assign ? Object.assign.bind() : 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$1a.apply(this, arguments); }
 function _objectWithoutProperties$19(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1a(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1a(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; }
 var SvgLogoNyplTextBlack = function SvgLogoNyplTextBlack(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$19(_ref, _excluded$1B);
+    props = _objectWithoutProperties$19(_ref, _excluded$1H);
   return /*#__PURE__*/React.createElement("svg", _extends$1a({
     viewBox: "0 0 201 165",
     fill: "none",
@@ -10723,14 +11687,14 @@ var SvgLogoNyplTextBlack = function SvgLogoNyplTextBlack(_ref) {
 };
 
 var _path$Z, _path2$n, _path3$e, _path4$3, _path5$2, _path6$2, _path7$2, _path8$2, _path9$2, _path10$2, _path11$2, _path12$2, _path13$2, _path14$1, _path15$1;
-var _excluded$1C = ["title", "titleId"];
+var _excluded$1I = ["title", "titleId"];
 function _extends$1b() { _extends$1b = Object.assign ? Object.assign.bind() : 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$1b.apply(this, arguments); }
 function _objectWithoutProperties$1a(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1b(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1b(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; }
 var SvgLogoNyplTextWhite = function SvgLogoNyplTextWhite(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1a(_ref, _excluded$1C);
+    props = _objectWithoutProperties$1a(_ref, _excluded$1I);
   return /*#__PURE__*/React.createElement("svg", _extends$1b({
     viewBox: "0 0 201 165",
     fill: "none",
@@ -10801,14 +11765,14 @@ var SvgLogoNyplTextWhite = function SvgLogoNyplTextWhite(_ref) {
 };
 
 var _g$a, _defs$3;
-var _excluded$1D = ["title", "titleId"];
+var _excluded$1J = ["title", "titleId"];
 function _extends$1c() { _extends$1c = Object.assign ? Object.assign.bind() : 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$1c.apply(this, arguments); }
 function _objectWithoutProperties$1b(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1c(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1c(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; }
 var SvgLogoOpenebooksColor = function SvgLogoOpenebooksColor(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1b(_ref, _excluded$1D);
+    props = _objectWithoutProperties$1b(_ref, _excluded$1J);
   return /*#__PURE__*/React.createElement("svg", _extends$1c({
     viewBox: "0 0 152 139",
     fill: "none",
@@ -10856,14 +11820,14 @@ var SvgLogoOpenebooksColor = function SvgLogoOpenebooksColor(_ref) {
 };
 
 var _g$b, _defs$4;
-var _excluded$1E = ["title", "titleId"];
+var _excluded$1K = ["title", "titleId"];
 function _extends$1d() { _extends$1d = Object.assign ? Object.assign.bind() : 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$1d.apply(this, arguments); }
 function _objectWithoutProperties$1c(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1d(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1d(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; }
 var SvgLogoOpenebooksNegative = function SvgLogoOpenebooksNegative(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1c(_ref, _excluded$1E);
+    props = _objectWithoutProperties$1c(_ref, _excluded$1K);
   return /*#__PURE__*/React.createElement("svg", _extends$1d({
     viewBox: "0 0 155 139",
     fill: "none",
@@ -10934,14 +11898,14 @@ var SvgLogoOpenebooksNegative = function SvgLogoOpenebooksNegative(_ref) {
 };
 
 var _g$c, _defs$5;
-var _excluded$1F = ["title", "titleId"];
+var _excluded$1L = ["title", "titleId"];
 function _extends$1e() { _extends$1e = Object.assign ? Object.assign.bind() : 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$1e.apply(this, arguments); }
 function _objectWithoutProperties$1d(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1e(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1e(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; }
 var SvgLogoOpenebooksWithTextColor = function SvgLogoOpenebooksWithTextColor(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1d(_ref, _excluded$1F);
+    props = _objectWithoutProperties$1d(_ref, _excluded$1L);
   return /*#__PURE__*/React.createElement("svg", _extends$1e({
     viewBox: "0 0 152 139",
     fill: "none",
@@ -10989,14 +11953,14 @@ var SvgLogoOpenebooksWithTextColor = function SvgLogoOpenebooksWithTextColor(_re
 };
 
 var _g$d, _defs$6;
-var _excluded$1G = ["title", "titleId"];
+var _excluded$1M = ["title", "titleId"];
 function _extends$1f() { _extends$1f = Object.assign ? Object.assign.bind() : 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$1f.apply(this, arguments); }
 function _objectWithoutProperties$1e(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1f(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1f(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; }
 var SvgLogoOpenebooksWithTextNegative = function SvgLogoOpenebooksWithTextNegative(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1e(_ref, _excluded$1G);
+    props = _objectWithoutProperties$1e(_ref, _excluded$1M);
   return /*#__PURE__*/React.createElement("svg", _extends$1f({
     viewBox: "0 0 155 139",
     fill: "none",
@@ -11070,14 +12034,14 @@ var SvgLogoOpenebooksWithTextNegative = function SvgLogoOpenebooksWithTextNegati
 };
 
 var _path$_;
-var _excluded$1H = ["title", "titleId"];
+var _excluded$1N = ["title", "titleId"];
 function _extends$1g() { _extends$1g = Object.assign ? Object.assign.bind() : 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$1g.apply(this, arguments); }
 function _objectWithoutProperties$1f(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1g(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1g(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; }
 var SvgLogoQplAltBlack = function SvgLogoQplAltBlack(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1f(_ref, _excluded$1H);
+    props = _objectWithoutProperties$1f(_ref, _excluded$1N);
   return /*#__PURE__*/React.createElement("svg", _extends$1g({
     viewBox: "0 0 250 134",
     xmlns: "http://www.w3.org/2000/svg",
@@ -11090,14 +12054,14 @@ var SvgLogoQplAltBlack = function SvgLogoQplAltBlack(_ref) {
 };
 
 var _path$$;
-var _excluded$1I = ["title", "titleId"];
+var _excluded$1O = ["title", "titleId"];
 function _extends$1h() { _extends$1h = Object.assign ? Object.assign.bind() : 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$1h.apply(this, arguments); }
 function _objectWithoutProperties$1g(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1h(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1h(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; }
 var SvgLogoQplAltWhite = function SvgLogoQplAltWhite(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1g(_ref, _excluded$1I);
+    props = _objectWithoutProperties$1g(_ref, _excluded$1O);
   return /*#__PURE__*/React.createElement("svg", _extends$1h({
     viewBox: "0 0 250 134",
     fill: "#fff",
@@ -11111,14 +12075,14 @@ var SvgLogoQplAltWhite = function SvgLogoQplAltWhite(_ref) {
 };
 
 var _path$10, _path2$o, _path3$f, _path4$4, _path5$3;
-var _excluded$1J = ["title", "titleId"];
+var _excluded$1P = ["title", "titleId"];
 function _extends$1i() { _extends$1i = Object.assign ? Object.assign.bind() : 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$1i.apply(this, arguments); }
 function _objectWithoutProperties$1h(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1i(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1i(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; }
 var SvgLogoQplBlack = function SvgLogoQplBlack(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1h(_ref, _excluded$1J);
+    props = _objectWithoutProperties$1h(_ref, _excluded$1P);
   return /*#__PURE__*/React.createElement("svg", _extends$1i({
     viewBox: "0 0 320 43",
     xmlns: "http://www.w3.org/2000/svg",
@@ -11147,14 +12111,14 @@ var SvgLogoQplBlack = function SvgLogoQplBlack(_ref) {
 };
 
 var _g$e, _defs$7;
-var _excluded$1K = ["title", "titleId"];
+var _excluded$1Q = ["title", "titleId"];
 function _extends$1j() { _extends$1j = Object.assign ? Object.assign.bind() : 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$1j.apply(this, arguments); }
 function _objectWithoutProperties$1i(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1j(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1j(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; }
 var SvgLogoQplColor = function SvgLogoQplColor(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1i(_ref, _excluded$1K);
+    props = _objectWithoutProperties$1i(_ref, _excluded$1Q);
   return /*#__PURE__*/React.createElement("svg", _extends$1j({
     viewBox: "0 0 355 48",
     fill: "none",
@@ -11202,14 +12166,14 @@ var SvgLogoQplColor = function SvgLogoQplColor(_ref) {
 };
 
 var _path$11, _path2$p, _path3$g, _path4$5, _path5$4;
-var _excluded$1L = ["title", "titleId"];
+var _excluded$1R = ["title", "titleId"];
 function _extends$1k() { _extends$1k = Object.assign ? Object.assign.bind() : 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$1k.apply(this, arguments); }
 function _objectWithoutProperties$1j(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1k(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1k(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; }
 var SvgLogoQplWhite = function SvgLogoQplWhite(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1j(_ref, _excluded$1L);
+    props = _objectWithoutProperties$1j(_ref, _excluded$1R);
   return /*#__PURE__*/React.createElement("svg", _extends$1k({
     viewBox: "0 0 320 43",
     fill: "#fff",
@@ -11239,14 +12203,14 @@ var SvgLogoQplWhite = function SvgLogoQplWhite(_ref) {
 };
 
 var _path$12, _path2$q, _path3$h, _path4$6, _path5$5;
-var _excluded$1M = ["title", "titleId"];
+var _excluded$1S = ["title", "titleId"];
 function _extends$1l() { _extends$1l = Object.assign ? Object.assign.bind() : 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$1l.apply(this, arguments); }
 function _objectWithoutProperties$1k(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1l(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1l(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; }
 var SvgLogoReservoirIconColor = function SvgLogoReservoirIconColor(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1k(_ref, _excluded$1M);
+    props = _objectWithoutProperties$1k(_ref, _excluded$1S);
   return /*#__PURE__*/React.createElement("svg", _extends$1l({
     viewBox: "0 0 105 129",
     fill: "none",
@@ -11273,14 +12237,14 @@ var SvgLogoReservoirIconColor = function SvgLogoReservoirIconColor(_ref) {
 };
 
 var _g$f;
-var _excluded$1N = ["title", "titleId"];
+var _excluded$1T = ["title", "titleId"];
 function _extends$1m() { _extends$1m = Object.assign ? Object.assign.bind() : 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$1m.apply(this, arguments); }
 function _objectWithoutProperties$1l(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1m(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1m(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; }
 var SvgLogoReservoirVerticalColor = function SvgLogoReservoirVerticalColor(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1l(_ref, _excluded$1N);
+    props = _objectWithoutProperties$1l(_ref, _excluded$1T);
   return /*#__PURE__*/React.createElement("svg", _extends$1m({
     viewBox: "0 0 234 261",
     fill: "none",
@@ -11306,14 +12270,14 @@ var SvgLogoReservoirVerticalColor = function SvgLogoReservoirVerticalColor(_ref)
 };
 
 var _path$13, _path2$r, _path3$i, _path4$7, _path5$6;
-var _excluded$1O = ["title", "titleId"];
+var _excluded$1U = ["title", "titleId"];
 function _extends$1n() { _extends$1n = Object.assign ? Object.assign.bind() : 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$1n.apply(this, arguments); }
 function _objectWithoutProperties$1m(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1n(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1n(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; }
 var SvgLogoSchomburgBlack = function SvgLogoSchomburgBlack(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1m(_ref, _excluded$1O);
+    props = _objectWithoutProperties$1m(_ref, _excluded$1U);
   return /*#__PURE__*/React.createElement("svg", _extends$1n({
     viewBox: "0 0 185 79",
     xmlns: "http://www.w3.org/2000/svg",
@@ -11334,14 +12298,14 @@ var SvgLogoSchomburgBlack = function SvgLogoSchomburgBlack(_ref) {
 };
 
 var _path$14, _path2$s, _path3$j, _path4$8, _path5$7;
-var _excluded$1P = ["title", "titleId"];
+var _excluded$1V = ["title", "titleId"];
 function _extends$1o() { _extends$1o = Object.assign ? Object.assign.bind() : 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$1o.apply(this, arguments); }
 function _objectWithoutProperties$1n(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1o(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1o(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; }
 var SvgLogoSchomburgCircleBlack = function SvgLogoSchomburgCircleBlack(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1n(_ref, _excluded$1P);
+    props = _objectWithoutProperties$1n(_ref, _excluded$1V);
   return /*#__PURE__*/React.createElement("svg", _extends$1o({
     viewBox: "0 0 67 67",
     xmlns: "http://www.w3.org/2000/svg",
@@ -11362,14 +12326,14 @@ var SvgLogoSchomburgCircleBlack = function SvgLogoSchomburgCircleBlack(_ref) {
 };
 
 var _path$15, _path2$t, _path3$k, _path4$9, _path5$8;
-var _excluded$1Q = ["title", "titleId"];
+var _excluded$1W = ["title", "titleId"];
 function _extends$1p() { _extends$1p = Object.assign ? Object.assign.bind() : 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$1p.apply(this, arguments); }
 function _objectWithoutProperties$1o(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1p(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1p(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; }
 var SvgLogoSchomburgCircleColor = function SvgLogoSchomburgCircleColor(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1o(_ref, _excluded$1Q);
+    props = _objectWithoutProperties$1o(_ref, _excluded$1W);
   return /*#__PURE__*/React.createElement("svg", _extends$1p({
     viewBox: "0 0 67 67",
     fill: "none",
@@ -11396,14 +12360,14 @@ var SvgLogoSchomburgCircleColor = function SvgLogoSchomburgCircleColor(_ref) {
 };
 
 var _path$16, _path2$u, _path3$l, _path4$a, _path5$9;
-var _excluded$1R = ["title", "titleId"];
+var _excluded$1X = ["title", "titleId"];
 function _extends$1q() { _extends$1q = Object.assign ? Object.assign.bind() : 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$1q.apply(this, arguments); }
 function _objectWithoutProperties$1p(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1q(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1q(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; }
 var SvgLogoSchomburgCircleWhite = function SvgLogoSchomburgCircleWhite(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1p(_ref, _excluded$1R);
+    props = _objectWithoutProperties$1p(_ref, _excluded$1X);
   return /*#__PURE__*/React.createElement("svg", _extends$1q({
     viewBox: "0 0 67 67",
     fill: "#fff",
@@ -11425,14 +12389,14 @@ var SvgLogoSchomburgCircleWhite = function SvgLogoSchomburgCircleWhite(_ref) {
 };
 
 var _path$17, _path2$v, _path3$m, _path4$b, _path5$a, _path6$3, _path7$3;
-var _excluded$1S = ["title", "titleId"];
+var _excluded$1Y = ["title", "titleId"];
 function _extends$1r() { _extends$1r = Object.assign ? Object.assign.bind() : 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$1r.apply(this, arguments); }
 function _objectWithoutProperties$1q(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1r(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1r(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; }
 var SvgLogoSchomburgColor = function SvgLogoSchomburgColor(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1q(_ref, _excluded$1S);
+    props = _objectWithoutProperties$1q(_ref, _excluded$1Y);
   return /*#__PURE__*/React.createElement("svg", _extends$1r({
     viewBox: "0 0 185 79",
     fill: "none",
@@ -11465,14 +12429,14 @@ var SvgLogoSchomburgColor = function SvgLogoSchomburgColor(_ref) {
 };
 
 var _path$18, _path2$w, _path3$n, _path4$c, _path5$b;
-var _excluded$1T = ["title", "titleId"];
+var _excluded$1Z = ["title", "titleId"];
 function _extends$1s() { _extends$1s = Object.assign ? Object.assign.bind() : 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$1s.apply(this, arguments); }
 function _objectWithoutProperties$1r(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1s(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1s(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; }
 var SvgLogoSchomburgWhite = function SvgLogoSchomburgWhite(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1r(_ref, _excluded$1T);
+    props = _objectWithoutProperties$1r(_ref, _excluded$1Z);
   return /*#__PURE__*/React.createElement("svg", _extends$1s({
     viewBox: "0 0 185 79",
     fill: "#fff",
@@ -11494,14 +12458,14 @@ var SvgLogoSchomburgWhite = function SvgLogoSchomburgWhite(_ref) {
 };
 
 var _g$g, _defs$8;
-var _excluded$1U = ["title", "titleId"];
+var _excluded$1_ = ["title", "titleId"];
 function _extends$1t() { _extends$1t = Object.assign ? Object.assign.bind() : 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$1t.apply(this, arguments); }
 function _objectWithoutProperties$1s(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1t(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1t(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; }
 var SvgLogoSimplyeBlack = function SvgLogoSimplyeBlack(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1s(_ref, _excluded$1U);
+    props = _objectWithoutProperties$1s(_ref, _excluded$1_);
   return /*#__PURE__*/React.createElement("svg", _extends$1t({
     viewBox: "0 0 512 148",
     xmlns: "http://www.w3.org/2000/svg",
@@ -11526,14 +12490,14 @@ var SvgLogoSimplyeBlack = function SvgLogoSimplyeBlack(_ref) {
 };
 
 var _g$h, _defs$9;
-var _excluded$1V = ["title", "titleId"];
+var _excluded$1$ = ["title", "titleId"];
 function _extends$1u() { _extends$1u = Object.assign ? Object.assign.bind() : 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$1u.apply(this, arguments); }
 function _objectWithoutProperties$1t(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1u(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1u(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; }
 var SvgLogoSimplyeWhite = function SvgLogoSimplyeWhite(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1t(_ref, _excluded$1V);
+    props = _objectWithoutProperties$1t(_ref, _excluded$1$);
   return /*#__PURE__*/React.createElement("svg", _extends$1u({
     viewBox: "0 0 512 148",
     fill: "#fff",
@@ -11558,14 +12522,14 @@ var SvgLogoSimplyeWhite = function SvgLogoSimplyeWhite(_ref) {
 };
 
 var _g$i, _defs$a;
-var _excluded$1W = ["title", "titleId"];
+var _excluded$20 = ["title", "titleId"];
 function _extends$1v() { _extends$1v = Object.assign ? Object.assign.bind() : 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$1v.apply(this, arguments); }
 function _objectWithoutProperties$1u(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1v(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1v(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; }
 var SvgLogoSimplyeColor = function SvgLogoSimplyeColor(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1u(_ref, _excluded$1W);
+    props = _objectWithoutProperties$1u(_ref, _excluded$20);
   return /*#__PURE__*/React.createElement("svg", _extends$1v({
     viewBox: "0 0 682 196",
     fill: "none",
@@ -11597,14 +12561,14 @@ var SvgLogoSimplyeColor = function SvgLogoSimplyeColor(_ref) {
 };
 
 var _path$19;
-var _excluded$1X = ["title", "titleId"];
+var _excluded$21 = ["title", "titleId"];
 function _extends$1w() { _extends$1w = Object.assign ? Object.assign.bind() : 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$1w.apply(this, arguments); }
 function _objectWithoutProperties$1v(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1w(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1w(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; }
 var SvgLogoSnflBlack = function SvgLogoSnflBlack(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1v(_ref, _excluded$1X);
+    props = _objectWithoutProperties$1v(_ref, _excluded$21);
   return /*#__PURE__*/React.createElement("svg", _extends$1w({
     viewBox: "0 0 84 111",
     xmlns: "http://www.w3.org/2000/svg",
@@ -11617,14 +12581,14 @@ var SvgLogoSnflBlack = function SvgLogoSnflBlack(_ref) {
 };
 
 var _path$1a;
-var _excluded$1Y = ["title", "titleId"];
+var _excluded$22 = ["title", "titleId"];
 function _extends$1x() { _extends$1x = Object.assign ? Object.assign.bind() : 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$1x.apply(this, arguments); }
 function _objectWithoutProperties$1w(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1x(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1x(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; }
 var SvgLogoSnflWhite = function SvgLogoSnflWhite(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1w(_ref, _excluded$1Y);
+    props = _objectWithoutProperties$1w(_ref, _excluded$22);
   return /*#__PURE__*/React.createElement("svg", _extends$1x({
     viewBox: "0 0 84 111",
     fill: "#fff",
@@ -11638,14 +12602,14 @@ var SvgLogoSnflWhite = function SvgLogoSnflWhite(_ref) {
 };
 
 var _path$1b, _path2$x, _path3$o, _path4$d, _path5$c, _path6$4, _path7$4, _path8$3, _path9$3, _path10$3, _path11$3, _path12$3, _path13$3, _path14$2, _path15$2, _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$1Z = ["title", "titleId"];
+var _excluded$23 = ["title", "titleId"];
 function _extends$1y() { _extends$1y = Object.assign ? Object.assign.bind() : 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$1y.apply(this, arguments); }
 function _objectWithoutProperties$1x(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1y(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1y(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; }
 var SvgLogoTreasuresColor = function SvgLogoTreasuresColor(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1x(_ref, _excluded$1Z);
+    props = _objectWithoutProperties$1x(_ref, _excluded$23);
   return /*#__PURE__*/React.createElement("svg", _extends$1y({
     viewBox: "0 0 324 265",
     fill: "none",
@@ -11822,14 +12786,14 @@ var SvgLogoTreasuresColor = function SvgLogoTreasuresColor(_ref) {
 };
 
 var _path$1c, _path2$y, _path3$p, _path4$e, _path5$d, _path6$5, _path7$5, _path8$4, _path9$4, _path10$4, _path11$4, _path12$4, _path13$4, _path14$3, _path15$3, _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$1_ = ["title", "titleId"];
+var _excluded$24 = ["title", "titleId"];
 function _extends$1z() { _extends$1z = Object.assign ? Object.assign.bind() : 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$1z.apply(this, arguments); }
 function _objectWithoutProperties$1y(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1z(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$1z(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; }
 var SvgLogoTreasuresColorNegative = function SvgLogoTreasuresColorNegative(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
-    props = _objectWithoutProperties$1y(_ref, _excluded$1_);
+    props = _objectWithoutProperties$1y(_ref, _excluded$24);
   return /*#__PURE__*/React.createElement("svg", _extends$1z({
     viewBox: "0 0 327 266",
     fill: "none",
@@ -12056,7 +13020,7 @@ var logoSvgs = {
   treasuresColorNegative: SvgLogoTreasuresColorNegative
 };
 
-var _excluded$1$ = ["children", "className", "decorative", "id", "name", "size", "title"];
+var _excluded$25 = ["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.
@@ -12073,7 +13037,7 @@ var Logo$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (
     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$1$);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$25);
   var styles = react.useStyleConfig("Logo", {
     size: size
   });
@@ -12174,7 +13138,7 @@ var link$1 = {
   }]
 };
 
-var _excluded$20 = ["className", "id"];
+var _excluded$26 = ["className", "id"];
 /**
  * This `Footer` component renders the NYPL-branded footer elements such
  * as navigational NYPL.org links, social media links, copyright, and
@@ -12184,7 +13148,7 @@ var Footer$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function
   var className = _ref.className,
     _ref$id = _ref.id,
     id = _ref$id === void 0 ? "footer" : _ref$id,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$20);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$26);
   var styles = react.useMultiStyleConfig("Footer", {});
   var nyplLinks = link$1.nyplLinks.map(function (links, index) {
     return React__default.createElement(List$1, {
@@ -12253,11 +13217,11 @@ var Footer$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function
   })));
 }));
 
-var _excluded$21 = ["align", "className"];
+var _excluded$27 = ["align", "className"];
 var HorizontalRule$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var align = props.align,
     className = props.className,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$21);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$27);
   var styles = react.useStyleConfig("HorizontalRule", {
     align: align
   });
@@ -12273,7 +13237,7 @@ var HorizontalRule$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(
   }, rest));
 }));
 
-var _excluded$22 = ["className", "id", "target"];
+var _excluded$28 = ["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
@@ -12285,7 +13249,7 @@ var SkipNavigation$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(
     id = props.id,
     _props$target = props.target,
     target = _props$target === void 0 ? "#mainContent" : _props$target,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$22);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$28);
   var styles = react.useStyleConfig("SkipNavigation");
   return React__default.createElement(react.Box, Object.assign({
     as: "nav",
@@ -13592,7 +14556,7 @@ var Header$1 = /*#__PURE__*/react.chakra(function (_ref) {
   }))));
 });
 
-var _excluded$23 = ["backgroundColor", "backgroundImageSrc", "foregroundColor", "heading", "heroType", "imageProps", "locationDetails", "subHeaderText"];
+var _excluded$29 = ["backgroundColor", "backgroundImageSrc", "foregroundColor", "heading", "heroType", "imageProps", "locationDetails", "subHeaderText"];
 // Only used for internal purposes.
 var heroSecondaryTypes = ["secondary", "secondaryBooksAndMore", "secondaryLocations", "secondaryResearch", "secondaryWhatsOn"];
 var Hero$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -13608,7 +14572,7 @@ var Hero$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (
     } : _props$imageProps,
     locationDetails = props.locationDetails,
     subHeaderText = props.subHeaderText,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$23);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$29);
   var styles = react.useMultiStyleConfig("Hero", {
     variant: heroType
   });
@@ -13697,7 +14661,7 @@ var Hero$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (
   }
 });
 
-var _excluded$24 = ["bodyContent", "closeButtonLabel", "headingText", "id", "isOpen", "onClose"],
+var _excluded$2a = ["bodyContent", "closeButtonLabel", "headingText", "id", "isOpen", "onClose"],
   _excluded2$6 = ["buttonText", "id", "modalProps"],
   _excluded3$4 = ["bodyContent", "closeButtonLabel", "headingText", "id"];
 var BaseModal = /*#__PURE__*/react.chakra(function (_ref) {
@@ -13708,7 +14672,7 @@ var BaseModal = /*#__PURE__*/react.chakra(function (_ref) {
     id = _ref.id,
     isOpen = _ref.isOpen,
     onClose = _ref.onClose,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$24);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2a);
   var xlarge = "xl";
   var fullSize = "full";
   var _useNYPLBreakpoints = useNYPLBreakpoints(),
@@ -13789,7 +14753,7 @@ function useModal() {
   };
 }
 
-var _excluded$25 = ["className", "currentPage", "getPageHref", "id", "initialPage", "onPageChange", "pageCount"];
+var _excluded$2b = ["className", "currentPage", "getPageHref", "id", "initialPage", "onPageChange", "pageCount"];
 /**
  * A component that provides a navigational list of page items.
  */
@@ -13802,7 +14766,7 @@ var Pagination$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(func
     initialPage = _props$initialPage === void 0 ? 1 : _props$initialPage,
     onPageChange = props.onPageChange,
     pageCount = props.pageCount,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$25);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$2b);
   var refCurrentPage = React.useRef(currentPage);
   var _useState = React.useState(initialPage),
     selectedPage = _useState[0],
@@ -13992,7 +14956,7 @@ var Pagination$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(func
   }, previousLiLink, getPaginationNumbers(selectedPage), nextLiLink));
 }));
 
-var _excluded$26 = ["darkMode", "id", "indicatorType", "isIndeterminate", "labelText", "showLabel", "size", "value"];
+var _excluded$2c = ["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,
@@ -14013,7 +14977,7 @@ var ProgressIndicator$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardR
     size = _props$size === void 0 ? "default" : _props$size,
     _props$value = props.value,
     value = _props$value === void 0 ? 0 : _props$value,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$26);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$2c);
   var styles = react.useMultiStyleConfig("ProgressIndicator", {
     darkMode: darkMode,
     size: size
@@ -14072,7 +15036,7 @@ var ProgressIndicator$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardR
   }, rest), progressComponent(indicatorType));
 }));
 
-var _excluded$27 = ["children", "className", "helperText", "id", "invalidText", "isDisabled", "isInvalid", "isRequired", "labelPosition", "labelText", "name", "onChange", "placeholder", "selectType", "showHelperInvalidText", "showLabel", "showRequiredLabel", "value"];
+var _excluded$2d = ["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.
@@ -14105,7 +15069,7 @@ var Select$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function
     showRequiredLabel = _props$showRequiredLa === void 0 ? true : _props$showRequiredLa,
     _props$value = props.value,
     value = _props$value === void 0 ? "" : _props$value,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$27);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$2d);
   var _useState = React.useState(0),
     labelWidth = _useState[0],
     setLabelWidth = _useState[1];
@@ -14187,7 +15151,7 @@ var Select$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function
   }), children)));
 }));
 
-var _excluded$28 = ["action", "buttonOnClick", "className", "descriptionText", "headingText", "helperText", "id", "invalidText", "isDisabled", "isInvalid", "isRequired", "labelText", "method", "noBrandButtonType", "onSubmit", "selectProps", "textInputElement", "textInputProps"];
+var _excluded$2e = ["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.
@@ -14215,7 +15179,7 @@ var SearchBar$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(funct
     selectProps = props.selectProps,
     textInputElement = props.textInputElement,
     textInputProps = props.textInputProps,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$28);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$2e);
   var styles = react.useMultiStyleConfig("SearchBar", {});
   var stateProps = {
     helperText: "",
@@ -14307,7 +15271,7 @@ var SearchBar$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(funct
   }, selectElem, textInputElem, buttonElem));
 }));
 
-var _excluded$29 = ["className", "contentSize", "headingSize", "imageAspectRatio", "isBordered", "layout", "showButton", "showContent", "showHeading", "showImage", "width"];
+var _excluded$2f = ["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.
@@ -14333,7 +15297,7 @@ var SkeletonLoader$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(
     _props$showImage = props.showImage,
     showImage = _props$showImage === void 0 ? true : _props$showImage,
     width = props.width,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$29);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$2f);
   var styles = react.useMultiStyleConfig("SkeletonLoader", {
     isBordered: isBordered,
     imageAspectRatio: imageAspectRatio,
@@ -14391,7 +15355,7 @@ var SkeletonLoader$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(
   })))));
 }));
 
-var _excluded$2a = ["className", "defaultValue", "helperText", "id", "invalidText", "isDisabled", "isInvalid", "isRangeSlider", "isRequired", "labelText", "max", "min", "name", "onChange", "showBoxes", "showHelperInvalidText", "showLabel", "showRequiredLabel", "showValues", "step", "value"];
+var _excluded$2g = ["className", "defaultValue", "helperText", "id", "invalidText", "isDisabled", "isInvalid", "isRangeSlider", "isRequired", "labelText", "max", "min", "name", "onChange", "onChangeEnd", "showBoxes", "showHelperInvalidText", "showLabel", "showRequiredLabel", "showValues", "step", "value"];
 /**
  * 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
@@ -14419,6 +15383,7 @@ var Slider = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (
     min = _props$min === void 0 ? 0 : _props$min,
     name = props.name,
     _onChange = props.onChange,
+    _onChangeEnd = props.onChangeEnd,
     _props$showBoxes = props.showBoxes,
     showBoxes = _props$showBoxes === void 0 ? true : _props$showBoxes,
     _props$showHelperInva = props.showHelperInvalidText,
@@ -14432,10 +15397,13 @@ var Slider = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (
     _props$step = props.step,
     step = _props$step === void 0 ? 1 : _props$step,
     value = props.value,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$2a);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$2g);
   if (!id) {
     console.warn("NYPL Reservoir Slider: This component's required `id` prop was not passed.");
   }
+  if (_onChange && _onChangeEnd) {
+    console.warn("NYPL Reservoir Slider: Both `onChange` and `onChangeEnd` props were passed.");
+  }
   // For the RangeSlider, if the defaultValue is not an array, then we set
   // the defaultValue to an array with the min and max values.
   var rangeSliderDefault = typeof defaultValue === "number" ? [min, max] : defaultValue;
@@ -14486,6 +15454,10 @@ var Slider = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (
       setCurrentValue(val);
       _onChange && _onChange(val);
     },
+    onChangeEnd: function onChangeEnd(val) {
+      setCurrentValue(val);
+      _onChangeEnd && _onChangeEnd(val);
+    },
     step: step,
     // Additional margins so slider thumbs don't overflow past the
     // edge when the value boxes or min/max values are hidden.
@@ -14522,7 +15494,12 @@ var Slider = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (
           setCurrentValue(newValue);
           // If the text input was updated directly,
           // send the data back to the user.
-          _onChange && _onChange(newValue);
+          if (_onChange) {
+            _onChange && _onChange(newValue);
+          }
+          if (_onChangeEnd) {
+            _onChangeEnd && _onChangeEnd(newValue);
+          }
         }
       }, textInputSharedProps),
       end: _extends({
@@ -14544,7 +15521,12 @@ var Slider = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (
           setCurrentValue(newValue);
           // If the text input was updated directly,
           // send the data back to the user.
-          _onChange && _onChange(newValue);
+          if (_onChange) {
+            _onChange && _onChange(newValue);
+          }
+          if (_onChangeEnd) {
+            _onChangeEnd && _onChangeEnd(newValue);
+          }
         }
       }, textInputSharedProps)
     };
@@ -14623,7 +15605,7 @@ var Slider = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (
   }, max), showBoxes && getTextInput("end")));
 }));
 
-var _excluded$2b = ["children", "className", "id", "level"];
+var _excluded$2h = ["children", "className", "id", "level"];
 /**
  * The `StatusBadge` component is used to display a visual badge for three
  * different status levels.
@@ -14634,7 +15616,7 @@ var StatusBadge$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(fun
     id = props.id,
     _props$level = props.level,
     level = _props$level === void 0 ? "low" : _props$level,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$2b);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$2h);
   var styles = react.useStyleConfig("StatusBadge", {
     variant: level
   });
@@ -14649,7 +15631,7 @@ var StatusBadge$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(fun
   }, rest), children);
 }));
 
-var _excluded$2c = ["calloutText", "className", "headingText", "id", "imageProps", "bodyContent"];
+var _excluded$2i = ["calloutText", "className", "headingText", "id", "imageProps", "bodyContent"];
 /**
  * Internal component used in the `StructuredContent` component
  * that renders the DS `Image` component.
@@ -14699,7 +15681,7 @@ var StructuredContent$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardR
       src: ""
     } : _props$imageProps,
     bodyContent = props.bodyContent,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$2c);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$2i);
   var hasImage = imageProps.src || imageProps.component;
   var hasFigureImage = imageProps.caption || imageProps.credit;
   var styles = react.useMultiStyleConfig("StructuredContent", {
@@ -14832,7 +15814,7 @@ var useCarouselStyles = function useCarouselStyles(slidesCount, slideWidth) {
   };
 };
 
-var _excluded$2d = ["children", "defaultIndex", "id", "onChange", "tabsData", "useHash"];
+var _excluded$2j = ["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`.
@@ -14934,7 +15916,7 @@ var Tabs = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (pr
     tabsData = props.tabsData,
     _props$useHash = props.useHash,
     useHash = _props$useHash === void 0 ? false : _props$useHash,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$2d);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$2j);
   var styles = react.useMultiStyleConfig("Tabs", {});
   // Just an estimate of the tab width for the mobile carousel.
   var initTabWidth = 65;
@@ -15014,13 +15996,13 @@ var Tabs = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (pr
   }, React__default.createElement(react.Box, Object.assign({}, carouselStyle), tabs)), nextButton), panels);
 }));
 
-var _excluded$2e = ["children", "className", "content", "id", "isDisabled", "shouldWrapChildren"];
+var _excluded$2k = ["children", "className", "content", "id", "isDisabled", "shouldWrapChildren"];
 var Tooltip$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
     content = props.content,
     isDisabled = props.isDisabled,
     shouldWrapChildren = props.shouldWrapChildren,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$2e);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$2k);
   if (typeof content !== "string" && typeof content !== "number") {
     React__default.Children.map(content, function (contentChild) {
       if (contentChild.type !== Icon || contentChild.type !== Image) {
@@ -15145,7 +16127,7 @@ var TagSetFilter$1 = /*#__PURE__*/react.chakra(function (props) {
   }, "Clear Filters") : null);
 });
 
-var _excluded$2f = ["className", "id", "isDismissible", "onClick", "tagSetData", "type"];
+var _excluded$2l = ["className", "id", "isDismissible", "onClick", "tagSetData", "type"];
 // Type guard so we can make sure we have a "filter" `TagSet` variant.
 function isFilterType(type) {
   return type === "filter";
@@ -15189,7 +16171,7 @@ var TagSet$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function
     tagSetData = _props$tagSetData === void 0 ? [] : _props$tagSetData,
     _props$type = props.type,
     type = _props$type === void 0 ? "filter" : _props$type,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$2f);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$2l);
   var styles = react.useStyleConfig("TagSet", {});
   if (!isFilterType(type)) {
     if (isDismissible) {
@@ -15217,7 +16199,7 @@ var TagSet$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function
   }));
 }));
 
-var _excluded$2g = ["aboveHeader", "breakout", "contentId", "contentBottom", "contentPrimary", "contentSidebar", "contentTop", "footer", "header", "sidebar", "renderFooterElement", "renderHeaderElement", "renderSkipNavigation"];
+var _excluded$2m = ["aboveHeader", "breakout", "contentId", "contentBottom", "contentPrimary", "contentSidebar", "contentTop", "footer", "header", "sidebar", "renderFooterElement", "renderHeaderElement", "renderSkipNavigation"];
 /**
  * The main top-level parent component that wraps all template-related
  * components.
@@ -15440,7 +16422,7 @@ var TemplateAppContainer = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forward
     renderHeaderElement = _props$renderHeaderEl === void 0 ? true : _props$renderHeaderEl,
     _props$renderSkipNavi = props.renderSkipNavigation,
     renderSkipNavigation = _props$renderSkipNavi === void 0 ? false : _props$renderSkipNavi,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$2g);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$2m);
   var aboveHeaderElem = aboveHeader && React__default.createElement(TemplateAboveHeader, null, aboveHeader);
   var contentTopElem = contentTop && React__default.createElement(TemplateContentTop, null, contentTop);
   var contentPrimaryElem = contentPrimary && React__default.createElement(TemplateContentPrimary$1, null, contentPrimary);
@@ -15458,7 +16440,7 @@ var TemplateAppContainer = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forward
   }, footer)));
 }));
 
-var _excluded$2h = ["defaultChecked", "helperText", "id", "invalidText", "isChecked", "isDisabled", "isInvalid", "isRequired", "labelText", "name", "onChange", "size"];
+var _excluded$2n = ["defaultChecked", "helperText", "id", "invalidText", "isChecked", "isDisabled", "isInvalid", "isRequired", "labelText", "name", "onChange", "size"];
 var onChangeDefault = function onChangeDefault() {
   return;
 };
@@ -15484,7 +16466,7 @@ var Toggle$2 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function
     onChange = _props$onChange === void 0 ? onChangeDefault : _props$onChange,
     _props$size = props.size,
     size = _props$size === void 0 ? "default" : _props$size,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$2h);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$2n);
   var styles = react.useMultiStyleConfig("Toggle", {
     isDisabled: isDisabled,
     size: size
@@ -15530,6 +16512,157 @@ var Toggle$2 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function
   }), labelText)));
 }));
 
+/**
+ * The useMultiSelect hook returns an object containing all the functions and state needed to handle the selectedItems of a `MultiSelect` component.
+ * It can be used in conjunction with one single `MultiSelect` component as well as a group of `MultiSelect`s in the `MultiSelectGroup` component.
+ * The returned object includes the functions onChange, onClear, onMixedStateChange for handling any changes to the selection of items
+ * and the current state of the selection: selectedItems.
+ */
+function useMultiSelect(initialState) {
+  var _useState = React.useState(initialState !== undefined ? initialState : {}),
+    selectedItems = _useState[0],
+    _setSelectedItems = _useState[1];
+  /**
+   * handleChange is used for both MultiSelect variants. It handles the state for checkbox options that either have no child options or are child options themselves.
+   * It accepts two arguments - the id of the checkbox option and the id of the MultiSelect component.
+   */
+  var handleChange = function handleChange(itemId, multiSelectId) {
+    var _extends2;
+    var itemIds;
+    // Check if the multiSelect already exists in the state.
+    if (selectedItems.hasOwnProperty(multiSelectId)) {
+      // Make a copy of the existing selected items.
+      itemIds = selectedItems[multiSelectId].items.slice();
+      // If itemId is in the selectedItems, remove it from the array.
+      if (selectedItems[multiSelectId].items.indexOf(itemId) > -1) {
+        itemIds = itemIds.filter(function (id) {
+          return id !== itemId;
+        });
+      } else {
+        // Add it to the array, but modify the copy, not the original.
+        itemIds.push(itemId);
+      }
+      // If there were no items from the multiSelect in the selectedItems before
+    } else {
+      // Add the itemId to the itemsIds
+      itemIds = [];
+      itemIds.push(itemId);
+    }
+    // Update selectedItems on state to reflect the new selection
+    _setSelectedItems(_extends({}, selectedItems, (_extends2 = {}, _extends2[multiSelectId] = {
+      items: itemIds
+    }, _extends2)));
+  };
+  /**
+   * handleMixedStateChange is used only for the "dialog" variant. It handles the state for checkbox options with child options.
+   * It accepts three arguments - the id of the checkbox option (parentId), the id of the MultiSelect component and the items array of the MultiSelect.
+   */
+  var handleMixedStateChange = function handleMixedStateChange(parentId, multiSelectId, items) {
+    var _extends3;
+    // Build an array of child items.
+    var childItems = items.filter(function (item) {
+      return item.id === parentId;
+    })[0].children.map(function (child) {
+      return child.id;
+    });
+    var newItems;
+    // If some items of the multiSelect are already selected
+    if (selectedItems[multiSelectId] !== undefined) {
+      // If all children of the parent are already selected
+      if (childItems.every(function (childItem) {
+        return selectedItems[multiSelectId].items.includes(childItem);
+      })) {
+        // Remove all children from the selectedItems array (unselect all child checkbox options)
+        newItems = selectedItems[multiSelectId].items.filter(function (stateItem) {
+          return !childItems.includes(stateItem);
+        });
+      } else {
+        // Else add missing childItems.
+        newItems = [].concat(childItems.filter(function (childItem) {
+          return !selectedItems[multiSelectId].items.includes(childItem);
+        }), selectedItems[multiSelectId].items);
+      }
+      // If no items of this multiSelect were selected before
+    } else {
+      newItems = childItems;
+    }
+    // Update selectedItems on state to reflect the new selection
+    _setSelectedItems(_extends({}, selectedItems, (_extends3 = {}, _extends3[multiSelectId] = {
+      items: newItems
+    }, _extends3)));
+  };
+  /**
+   * handleClear is used for both MultiSelect variants. It will remove all selected items of specific MultiSelect component from the selectedItems array.
+   * It accepts one argument - the id of the MultiSelect component.
+   */
+  var handleClear = function handleClear(multiSelectId) {
+    var newSelectedItems = {};
+    for (var _i = 0, _Object$keys = Object.keys(selectedItems); _i < _Object$keys.length; _i++) {
+      var key = _Object$keys[_i];
+      if (key !== multiSelectId) {
+        newSelectedItems[key] = selectedItems[key];
+      }
+    }
+    _setSelectedItems(newSelectedItems);
+  };
+  /**
+   * handleClearAll is used to clear all MultiSelects of a group. It will remove all selected items.
+   */
+  var handleClearAll = function handleClearAll() {
+    return _setSelectedItems({});
+  };
+  return {
+    selectedItems: selectedItems,
+    setSelectedItems: function setSelectedItems(newState) {
+      return _setSelectedItems(newState);
+    },
+    onChange: handleChange,
+    onMixedStateChange: handleMixedStateChange,
+    onClear: handleClear,
+    onClearAll: handleClearAll
+  };
+}
+
+/**
+ * The `useFilterBar` hook returns an object containing all the functions and state needed to control a FilterBar component and its child components.
+ * The returned object includes the functions `onChange`, `onMixedStateChange`, `onClear` and `onClearAll` for handling any changes to the selectedItems object,
+ * a `setSelectedItems` function that allows to set an initial selectedItems state
+ * and the current state of the selection: `selectedItems`.
+ * In addition it returns all props to handle a filter module overlay for the mobile view: a boolean value representing the current module state: `isModalOpen`,
+ * an `onToggle` function to change the module state or alternatively `onOpen` and `onClose` functions.
+ */
+function useFilterBar(initialState) {
+  var _useState = React.useState(false),
+    isModalOpen = _useState[0],
+    setIsModalOpen = _useState[1];
+  var _useMultiSelect = useMultiSelect(initialState),
+    selectedItems = _useMultiSelect.selectedItems,
+    setSelectedItems = _useMultiSelect.setSelectedItems,
+    onChange = _useMultiSelect.onChange,
+    onMixedStateChange = _useMultiSelect.onMixedStateChange,
+    onClear = _useMultiSelect.onClear,
+    onClearAll = _useMultiSelect.onClearAll;
+  var handleToggle = function handleToggle() {
+    return setIsModalOpen(!isModalOpen);
+  };
+  return {
+    selectedItems: selectedItems,
+    setSelectedItems: setSelectedItems,
+    isModalOpen: isModalOpen,
+    onOpen: function onOpen() {
+      return setIsModalOpen(true);
+    },
+    onClose: function onClose() {
+      return setIsModalOpen(false);
+    },
+    onToggle: handleToggle,
+    onChange: onChange,
+    onMixedStateChange: onMixedStateChange,
+    onClear: onClear,
+    onClearAll: onClearAll
+  };
+}
+
 /**
  * A custom hook that returns the Chakra-based NYPL theme object. This must be
  * used inside a component that is wrapped in the `DSProvider` component, so
@@ -15620,7 +16753,7 @@ function useNYPLTheme() {
   };
 }
 
-var _excluded$2i = ["aspectRatio", "className", "descriptionText", "embedCode", "headingText", "helperText", "id", "iframeTitle", "showHelperInvalidText", "videoId", "videoType"];
+var _excluded$2o = ["aspectRatio", "className", "descriptionText", "embedCode", "headingText", "helperText", "id", "iframeTitle", "showHelperInvalidText", "videoId", "videoType"];
 var VideoPlayer$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var aspectRatio = props.aspectRatio,
     className = props.className,
@@ -15634,7 +16767,7 @@ var VideoPlayer$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(fun
     showHelperInvalidText = _props$showHelperInva === void 0 ? true : _props$showHelperInva,
     videoId = props.videoId,
     videoType = props.videoType,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$2i);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$2o);
   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";
@@ -15836,6 +16969,7 @@ exports.DSProvider = DSProvider;
 exports.DatePicker = DatePicker;
 exports.FeedbackBox = FeedbackBox$1;
 exports.Fieldset = Fieldset;
+exports.FilterBar = FilterBar$1;
 exports.Footer = Footer$1;
 exports.Form = Form;
 exports.FormField = FormField;
@@ -15852,6 +16986,8 @@ exports.Link = Link;
 exports.List = List$1;
 exports.Logo = Logo$1;
 exports.ModalTrigger = ModalTrigger;
+exports.MultiSelect = MultiSelect$1;
+exports.MultiSelectGroup = MultiSelectGroup;
 exports.Notification = Notification$1;
 exports.Pagination = Pagination$1;
 exports.ProgressIndicator = ProgressIndicator$1;
@@ -15886,7 +17022,9 @@ exports.Tooltip = Tooltip$1;
 exports.VideoPlayer = VideoPlayer$1;
 exports.useCarouselStyles = useCarouselStyles;
 exports.useFeedbackBox = useFeedbackBox;
+exports.useFilterBar = useFilterBar;
 exports.useModal = useModal;
+exports.useMultiSelect = useMultiSelect;
 exports.useNYPLBreakpoints = useNYPLBreakpoints;
 exports.useNYPLTheme = useNYPLTheme;
 exports.useWindowSize = useWindowSize;