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

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

@@ -1,6 +1,6 @@
-import { chakra, useStyleConfig, Icon as Icon$2, Box, Accordion as Accordion$2, AccordionPanel, AccordionItem, AccordionButton, Breadcrumb as Breadcrumb$1, BreadcrumbItem, BreadcrumbLink, Button as Button$2, Heading as Heading$2, useMultiStyleConfig, LinkBox, LinkOverlay, Checkbox as Checkbox$2, CheckboxGroup as CheckboxGroup$2, Stack, SimpleGrid as SimpleGrid$1, Input, Textarea, extendTheme, ChakraProvider, CircularProgress, CircularProgressLabel, Progress, Radio as Radio$2, RadioGroup as RadioGroup$2, Text as Text$2, Select as Select$2, Skeleton as Skeleton$1, RangeSlider, RangeSliderTrack, RangeSliderFilledTrack, RangeSliderThumb, Slider as Slider$1, SliderTrack, SliderFilledTrack, SliderThumb, Tabs as Tabs$1, Tab, TabPanel, TabList, TabPanels, Switch as Switch$1, useTheme, TableCaption, Thead, Tr, Th, Table as Table$1, Tbody, Td } from '@chakra-ui/react';
+import { chakra, useStyleConfig, Icon as Icon$2, Box, Accordion as Accordion$2, AccordionPanel, AccordionItem, AccordionButton, Breadcrumb as Breadcrumb$1, BreadcrumbItem, BreadcrumbLink, Button as Button$2, Heading as Heading$2, useMultiStyleConfig, LinkBox, LinkOverlay, Checkbox as Checkbox$2, CheckboxGroup as CheckboxGroup$2, Stack, SimpleGrid as SimpleGrid$1, Input, Textarea, extendTheme, ChakraProvider, useDisclosure, Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, ButtonGroup, CircularProgress, CircularProgressLabel, Progress, Radio as Radio$2, RadioGroup as RadioGroup$2, Text as Text$2, Select as Select$2, Skeleton as Skeleton$1, RangeSlider, RangeSliderTrack, RangeSliderFilledTrack, RangeSliderThumb, Slider as Slider$1, SliderTrack, SliderFilledTrack, SliderThumb, Tabs as Tabs$1, Tab, TabPanel, TabList, TabPanels, Switch as Switch$1, useTheme, TableCaption, Thead, Tr, Th, Table as Table$1, Tbody, Td } from '@chakra-ui/react';
 export { Box, ButtonGroup, Center, Circle, Flex, Grid, GridItem, HStack, Spacer, Square, Stack, Tab, TabList, TabPanel, TabPanels, VStack } from '@chakra-ui/react';
-import React__default, { createElement, cloneElement, Fragment, Children, forwardRef, useState, useEffect, Component, useRef } from 'react';
+import React__default, { createElement, cloneElement, Fragment, Children, forwardRef, useState, useEffect, useRef } from 'react';
 import ReactDatePicker from 'react-datepicker';
 import { createBreakpoints, cssVar } from '@chakra-ui/theme-tools';
 import { keyframes } from '@chakra-ui/system';
@@ -23,22 +23,6 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-
-  _setPrototypeOf(subClass, superClass);
-}
-
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-
-  return _setPrototypeOf(o, p);
-}
-
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -4363,8 +4347,7 @@ var select = {
 var Select = {
   parts: ["helperText", "inline", "select"],
   baseStyle: function baseStyle(_ref) {
-    var labelPosition = _ref.labelPosition,
-        labelWidth = _ref.labelWidth;
+    var labelPosition = _ref.labelPosition;
     return {
       marginBottom: "xs",
       // The backgroundColor set to "ui.white" hides the arrow SVG icon when
@@ -4373,11 +4356,6 @@ var Select = {
       ".chakra-select__icon-wrapper": {
         zIndex: "9999"
       },
-      helperText: {
-        marginLeft: labelPosition === "inline" ? {
-          md: labelWidth + "px"
-        } : null
-      },
       inline: {
         display: {
           md: "flex"
@@ -8807,43 +8785,119 @@ var Logo$1 = /*#__PURE__*/chakra(function (props) {
   }, rest), childSVG);
 });
 
-/** Full-screen modal that appears on top of the body of the page. */
+var _excluded$1p = ["bodyContent", "closeButtonLabel", "headingText", "id", "isOpen", "onClose"],
+    _excluded2$5 = ["buttonText", "id", "modalProps"],
+    _excluded3$2 = ["bodyContent", "closeButtonLabel", "headingText", "id"];
+var BaseModal = /*#__PURE__*/chakra(function (_ref) {
+  var bodyContent = _ref.bodyContent,
+      _ref$closeButtonLabel = _ref.closeButtonLabel,
+      closeButtonLabel = _ref$closeButtonLabel === void 0 ? "Close" : _ref$closeButtonLabel,
+      headingText = _ref.headingText,
+      id = _ref.id,
+      isOpen = _ref.isOpen,
+      onClose = _ref.onClose,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$1p);
 
-var Modal = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(Modal, _React$Component);
+  // Based on --nypl-breakpoint-medium
+  var breakpointMedium = 600;
+  var defaultSize = "xl";
+  var fullSize = "full";
 
-  function Modal() {
-    return _React$Component.apply(this, arguments) || this;
-  }
+  var _React$useState = useState(defaultSize),
+      size = _React$useState[0],
+      setSize = _React$useState[1];
 
-  var _proto = Modal.prototype;
+  var windowDimensions = useWindowSize();
+  useEffect(function () {
+    if (windowDimensions.width <= breakpointMedium) {
+      setSize(fullSize);
+    } else {
+      setSize(defaultSize);
+    }
+  }, [windowDimensions.width]);
+  return createElement(Modal, Object.assign({
+    id: id,
+    isOpen: isOpen,
+    onClose: onClose,
+    scrollBehavior: "inside",
+    size: size
+  }, rest), createElement(ModalOverlay, null), createElement(ModalContent, null, createElement(ModalHeader, null, headingText), createElement(ModalCloseButton, null), createElement(ModalBody, null, bodyContent), createElement(ModalFooter, null, createElement(ButtonGroup, null, createElement(Button, {
+    id: "modal-close-btn",
+    onClick: onClose
+  }, closeButtonLabel)))));
+});
+/**
+ * The `ModalTrigger` component renders a button that you click to open the
+ * internal `Modal` component. Note that props to update the internal `Modal`
+ * component are passed through to the `modalProps` prop.
+ */
 
-  _proto.componentDidMount = function componentDidMount() {
-    document.body.classList.add("no-scroll");
-  };
+var ModalTrigger = /*#__PURE__*/chakra(function (_ref2) {
+  var buttonText = _ref2.buttonText,
+      id = _ref2.id,
+      modalProps = _ref2.modalProps,
+      rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$5);
 
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    document.body.classList.remove("no-scroll");
-  };
+  var _useDisclosure = useDisclosure(),
+      isOpen = _useDisclosure.isOpen,
+      onOpen = _useDisclosure.onOpen,
+      onClose = _useDisclosure.onClose;
 
-  _proto.render = function render() {
-    var _this$props = this.props,
-        id = _this$props.id,
-        className = _this$props.className;
-    return createElement("div", {
-      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-      tabIndex: 0,
-      className: "modal " + className,
-      id: id
-    }, this.props.children);
+  var finalOnCloseHandler = function finalOnCloseHandler() {
+    modalProps.onClose && modalProps.onClose();
+    onClose();
   };
 
-  return Modal;
-}(Component);
+  return createElement(Fragment, null, createElement(Button, {
+    id: "modal-open-btn",
+    onClick: onOpen
+  }, buttonText), createElement(BaseModal, Object.assign({
+    bodyContent: modalProps.bodyContent,
+    closeButtonLabel: modalProps.closeButtonLabel,
+    headingText: modalProps.headingText,
+    id: id,
+    isOpen: isOpen,
+    onClose: finalOnCloseHandler
+  }, rest)));
+});
+/**
+ * This hook function can be used to render the `Modal` component with a custom
+ * open button(s) and optional custom close button(s). You must render your own
+ * button and pass the appropriate `onOpen` and ` handler for the modal to open.
+ */
+
+function useModal() {
+  var _useDisclosure2 = useDisclosure(),
+      isOpen = _useDisclosure2.isOpen,
+      onClose = _useDisclosure2.onClose,
+      onOpen = _useDisclosure2.onOpen;
+
+  var Modal = chakra(function (_ref3) {
+    var bodyContent = _ref3.bodyContent,
+        closeButtonLabel = _ref3.closeButtonLabel,
+        headingText = _ref3.headingText,
+        id = _ref3.id,
+        rest = _objectWithoutPropertiesLoose(_ref3, _excluded3$2);
+
+    return createElement(BaseModal, Object.assign({
+      bodyContent: bodyContent,
+      closeButtonLabel: closeButtonLabel,
+      headingText: headingText,
+      id: id,
+      isOpen: isOpen,
+      onClose: onClose
+    }, rest));
+  });
+  return {
+    onClose: onClose,
+    onOpen: onOpen,
+    Modal: Modal
+  };
+}
 
-var _excluded$1p = ["children", "icon", "id", "isCentered", "notificationType"],
-    _excluded2$5 = ["alignText", "children", "icon", "notificationType"],
-    _excluded3$2 = ["ariaLabel", "className", "dismissible", "icon", "id", "isCentered", "noMargin", "notificationContent", "notificationHeading", "notificationType", "showIcon"];
+var _excluded$1q = ["children", "icon", "id", "isCentered", "notificationType"],
+    _excluded2$6 = ["alignText", "children", "icon", "notificationType"],
+    _excluded3$3 = ["ariaLabel", "className", "dismissible", "icon", "id", "isCentered", "noMargin", "notificationContent", "notificationHeading", "notificationType", "showIcon"];
 /**
  * NotificationHeading child-component.
  */
@@ -8854,7 +8908,7 @@ var NotificationHeading$1 = /*#__PURE__*/chakra(function (props) {
       id = props.id,
       isCentered = props.isCentered,
       notificationType = props.notificationType,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1p);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1q);
 
   var styles = useMultiStyleConfig("NotificationHeading", {
     icon: icon,
@@ -8879,7 +8933,7 @@ var NotificationContent$1 = /*#__PURE__*/chakra(function (props) {
       children = props.children,
       icon = props.icon,
       notificationType = props.notificationType,
-      rest = _objectWithoutPropertiesLoose(props, _excluded2$5);
+      rest = _objectWithoutPropertiesLoose(props, _excluded2$6);
 
   var styles = useMultiStyleConfig("NotificationContent", {
     alignText: alignText,
@@ -8914,7 +8968,7 @@ var Notification$1 = /*#__PURE__*/chakra(function (props) {
       notificationType = _props$notificationTy === void 0 ? NotificationTypes.Standard : _props$notificationTy,
       _props$showIcon = props.showIcon,
       showIcon = _props$showIcon === void 0 ? true : _props$showIcon,
-      rest = _objectWithoutPropertiesLoose(props, _excluded3$2);
+      rest = _objectWithoutPropertiesLoose(props, _excluded3$3);
 
   var _useState = useState(true),
       isOpen = _useState[0],
@@ -9010,7 +9064,7 @@ var Notification$1 = /*#__PURE__*/chakra(function (props) {
   }, childHeading, childContent), dismissibleButton);
 });
 
-var _excluded$1q = ["className", "currentPage", "getPageHref", "id", "initialPage", "onPageChange", "pageCount"];
+var _excluded$1r = ["className", "currentPage", "getPageHref", "id", "initialPage", "onPageChange", "pageCount"];
 /**
  * A component that provides a navigational list of page items.
  */
@@ -9024,7 +9078,7 @@ var Pagination$1 = /*#__PURE__*/chakra(function (props) {
       initialPage = _props$initialPage === void 0 ? 1 : _props$initialPage,
       onPageChange = props.onPageChange,
       pageCount = props.pageCount,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1q);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1r);
 
   var refCurrentPage = useRef(currentPage);
 
@@ -9216,7 +9270,7 @@ var Pagination$1 = /*#__PURE__*/chakra(function (props) {
   }, previousLiLink, getPaginationNumbers(selectedPage), nextLiLink));
 });
 
-var _excluded$1r = ["darkMode", "id", "indicatorType", "isIndeterminate", "labelText", "showLabel", "size", "value"];
+var _excluded$1s = ["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,
@@ -9238,7 +9292,7 @@ var ProgressIndicator$1 = /*#__PURE__*/chakra(function (props) {
       size = _props$size === void 0 ? ProgressIndicatorSizes.Default : _props$size,
       _props$value = props.value,
       value = _props$value === void 0 ? 0 : _props$value,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1r);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1s);
 
   var styles = useMultiStyleConfig("ProgressIndicator", {
     darkMode: darkMode,
@@ -9304,7 +9358,7 @@ var ProgressIndicator$1 = /*#__PURE__*/chakra(function (props) {
   }, rest), progressComponent(indicatorType));
 });
 
-var _excluded$1s = ["className", "helperText", "id", "invalidText", "isChecked", "isDisabled", "isInvalid", "isRequired", "labelText", "name", "onChange", "showHelperInvalidText", "showLabel", "value"];
+var _excluded$1t = ["className", "helperText", "id", "invalidText", "isChecked", "isDisabled", "isInvalid", "isRequired", "labelText", "name", "onChange", "showHelperInvalidText", "showLabel", "value"];
 var Radio$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
       helperText = props.helperText,
@@ -9325,7 +9379,7 @@ var Radio$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref)
       _props$showLabel = props.showLabel,
       showLabel = _props$showLabel === void 0 ? true : _props$showLabel,
       value = props.value,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1s);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1t);
 
   var styles = useMultiStyleConfig("Radio", {});
   var footnote = isInvalid ? invalidText : helperText;
@@ -9366,7 +9420,7 @@ var Radio$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref)
   }));
 }));
 
-var _excluded$1t = ["children", "className", "defaultValue", "helperText", "id", "invalidText", "isDisabled", "isFullWidth", "isInvalid", "isRequired", "labelText", "layout", "name", "onChange", "showHelperInvalidText", "showLabel", "showRequiredLabel"];
+var _excluded$1u = ["children", "className", "defaultValue", "helperText", "id", "invalidText", "isDisabled", "isFullWidth", "isInvalid", "isRequired", "labelText", "layout", "name", "onChange", "showHelperInvalidText", "showLabel", "showRequiredLabel"];
 /**
  * RadioGroup is a wrapper for DS `Radio` components that renders as a fieldset
  * HTML element along with optional helper text. The `name` prop is essential
@@ -9402,7 +9456,7 @@ var RadioGroup$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props,
       showLabel = _props$showLabel === void 0 ? true : _props$showLabel,
       _props$showRequiredLa = props.showRequiredLabel,
       showRequiredLabel = _props$showRequiredLa === void 0 ? true : _props$showRequiredLa,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1t);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1u);
 
   var _React$useState = useState(defaultValue),
       value = _React$useState[0],
@@ -9480,7 +9534,7 @@ var TextSizes;
   TextSizes["Mini"] = "mini";
 })(TextSizes || (TextSizes = {}));
 
-var _excluded$1u = ["children", "className", "isBold", "isItalic", "noSpace", "size"];
+var _excluded$1v = ["children", "className", "isBold", "isItalic", "noSpace", "size"];
 var Text$1 = /*#__PURE__*/chakra(function (props) {
   var children = props.children,
       _props$className = props.className,
@@ -9490,7 +9544,7 @@ var Text$1 = /*#__PURE__*/chakra(function (props) {
       noSpace = props.noSpace,
       _props$size = props.size,
       size = _props$size === void 0 ? TextSizes.Default : _props$size,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1u);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1v);
 
   var variant = getVariant(size, TextSizes, TextSizes.Default);
   var styles = useStyleConfig("Text", {
@@ -9510,7 +9564,7 @@ var Text$1 = /*#__PURE__*/chakra(function (props) {
   }, rest), children);
 });
 
-var _excluded$1v = ["children", "descriptionText", "headingText", "helperText", "id", "invalidText", "isInvalid"];
+var _excluded$1w = ["children", "descriptionText", "headingText", "helperText", "id", "invalidText", "isInvalid"];
 var ComponentWrapper$1 = /*#__PURE__*/chakra(function (props) {
   var children = props.children,
       descriptionText = props.descriptionText,
@@ -9520,7 +9574,7 @@ var ComponentWrapper$1 = /*#__PURE__*/chakra(function (props) {
       invalidText = props.invalidText,
       _props$isInvalid = props.isInvalid,
       isInvalid = _props$isInvalid === void 0 ? false : _props$isInvalid,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1v);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1w);
 
   var hasChildren = !!children;
   var styles = useMultiStyleConfig("ComponentWrapper", {
@@ -9562,7 +9616,7 @@ var LabelPositions;
   LabelPositions["Inline"] = "inline";
 })(LabelPositions || (LabelPositions = {}));
 
-var _excluded$1w = ["additionalStyles", "children", "className", "helperText", "id", "invalidText", "isDisabled", "isInvalid", "isRequired", "labelPosition", "labelText", "name", "onChange", "placeholder", "selectType", "showHelperInvalidText", "showLabel", "showRequiredLabel", "value"];
+var _excluded$1x = ["additionalStyles", "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.
@@ -9598,7 +9652,7 @@ var Select$1 = /*#__PURE__*/chakra( /*#__PURE__*/React__default.forwardRef(funct
       showRequiredLabel = _props$showRequiredLa === void 0 ? true : _props$showRequiredLa,
       _props$value = props.value,
       value = _props$value === void 0 ? "" : _props$value,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1w);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1x);
 
   var ariaAttributes = {};
 
@@ -9609,8 +9663,7 @@ var Select$1 = /*#__PURE__*/chakra( /*#__PURE__*/React__default.forwardRef(funct
   var labelRef = useRef();
   var styles = useMultiStyleConfig("CustomSelect", {
     variant: selectType,
-    labelPosition: labelPosition,
-    labelWidth: labelWidth
+    labelPosition: labelPosition
   });
   var finalInvalidText = invalidText ? invalidText : "There is an error related to this field.";
   var footnote = isInvalid ? finalInvalidText : helperText; // To control the `Select` component, both `onChange` and `value`
@@ -9619,7 +9672,10 @@ var Select$1 = /*#__PURE__*/chakra( /*#__PURE__*/React__default.forwardRef(funct
   var controlledProps = onChange ? {
     onChange: onChange,
     value: value
-  } : {};
+  } : {}; // The number of pixels between the label and select elements
+  // when the labelPosition is inline (equivalent to --nypl-space-xs).
+
+  var labelSelectGap = 8;
 
   if (!showLabel) {
     ariaAttributes["aria-label"] = labelText && footnote ? labelText + " - " + footnote : labelText;
@@ -9634,9 +9690,11 @@ var Select$1 = /*#__PURE__*/chakra( /*#__PURE__*/React__default.forwardRef(funct
   useEffect(function () {
     if (labelPosition === LabelPositions.Inline) {
       if (labelRef.current) {
-        var width = labelRef.current.clientWidth + 8;
+        var width = labelRef.current.clientWidth + labelSelectGap;
         setLabelWidth(width);
       }
+    } else {
+      setLabelWidth(0);
     }
   }, [labelPosition]);
   return React__default.createElement(Box, Object.assign({
@@ -9667,14 +9725,18 @@ var Select$1 = /*#__PURE__*/chakra( /*#__PURE__*/React__default.forwardRef(funct
       size: IconSizes.Medium
     }),
     __css: styles.select
-  }), children), footnote && showHelperInvalidText && React__default.createElement(HelperErrorText, {
+  }), children)), footnote && showHelperInvalidText && React__default.createElement(HelperErrorText, {
     id: id + "-helperText",
     isInvalid: isInvalid,
-    text: footnote
-  })));
+    text: footnote,
+    ml: {
+      sm: "auto",
+      md: labelWidth + "px"
+    }
+  }));
 }));
 
-var _excluded$1x = ["action", "buttonOnClick", "className", "descriptionText", "headingText", "helperText", "id", "invalidText", "isDisabled", "isInvalid", "isRequired", "labelText", "method", "noBrandButtonType", "onSubmit", "selectProps", "textInputElement", "textInputProps"];
+var _excluded$1y = ["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.
@@ -9704,7 +9766,7 @@ var SearchBar$1 = /*#__PURE__*/chakra(function (props) {
       selectProps = props.selectProps,
       textInputElement = props.textInputElement,
       textInputProps = props.textInputProps,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1x);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1y);
 
   var styles = useMultiStyleConfig("SearchBar", {});
   var stateProps = {
@@ -9805,7 +9867,7 @@ var SkeletonLoaderImageRatios;
   SkeletonLoaderImageRatios["Square"] = "square";
 })(SkeletonLoaderImageRatios || (SkeletonLoaderImageRatios = {}));
 
-var _excluded$1y = ["className", "contentSize", "headingSize", "imageAspectRatio", "isBordered", "layout", "showButton", "showContent", "showHeading", "showImage", "width"];
+var _excluded$1z = ["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.
@@ -9832,7 +9894,7 @@ var SkeletonLoader$1 = /*#__PURE__*/chakra(function (props) {
       _props$showImage = props.showImage,
       showImage = _props$showImage === void 0 ? true : _props$showImage,
       width = props.width,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1y);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1z);
 
   var styles = useMultiStyleConfig("SkeletonLoader", {
     isBordered: isBordered,
@@ -9894,7 +9956,7 @@ var SkeletonLoader$1 = /*#__PURE__*/chakra(function (props) {
   })))));
 });
 
-var _excluded$1z = ["className", "defaultValue", "helperText", "id", "invalidText", "isDisabled", "isInvalid", "isRangeSlider", "isRequired", "labelText", "max", "min", "name", "onChange", "showBoxes", "showHelperInvalidText", "showLabel", "showRequiredLabel", "showValues", "step"];
+var _excluded$1A = ["className", "defaultValue", "helperText", "id", "invalidText", "isDisabled", "isInvalid", "isRangeSlider", "isRequired", "labelText", "max", "min", "name", "onChange", "showBoxes", "showHelperInvalidText", "showLabel", "showRequiredLabel", "showValues", "step"];
 /**
  * The `Slider` component renders a singular value slider or a range slider
  * with a min and max value. The value(s) can be updated through the slider
@@ -9935,7 +9997,7 @@ var Slider = /*#__PURE__*/chakra(function (props) {
       showValues = _props$showValues === void 0 ? true : _props$showValues,
       _props$step = props.step,
       step = _props$step === void 0 ? 1 : _props$step,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1z);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1A);
 
   if (!id) {
     console.warn("NYPL Reservoir Slider: This component's required `id` prop was not passed.");
@@ -10128,7 +10190,7 @@ var StatusBadgeTypes;
   StatusBadgeTypes["High"] = "high";
 })(StatusBadgeTypes || (StatusBadgeTypes = {}));
 
-var _excluded$1A = ["children", "className", "id", "level"];
+var _excluded$1B = ["children", "className", "id", "level"];
 /**
  * The `StatusBadge` component is used to display a visual badge for three
  * different status levels.
@@ -10140,7 +10202,7 @@ var StatusBadge$1 = /*#__PURE__*/chakra(function (props) {
       id = props.id,
       _props$level = props.level,
       level = _props$level === void 0 ? StatusBadgeTypes.Low : _props$level,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1A);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1B);
 
   var styles = useStyleConfig("StatusBadge", {
     variant: level
@@ -10165,7 +10227,7 @@ var StructuredContentImagePosition;
   StructuredContentImagePosition["Center"] = "center";
 })(StructuredContentImagePosition || (StructuredContentImagePosition = {}));
 
-var _excluded$1B = ["calloutText", "className", "headingText", "id", "imageProps", "bodyContent"];
+var _excluded$1C = ["calloutText", "className", "headingText", "id", "imageProps", "bodyContent"];
 /**
  * Internal component used in the `StructuredContent` component
  * that renders the DS `Image` component.
@@ -10217,7 +10279,7 @@ var StructuredContent$1 = /*#__PURE__*/chakra(function (props) {
     src: ""
   } : _props$imageProps,
       bodyContent = props.bodyContent,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1B);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1C);
 
   var hasImage = imageProps.src || imageProps.component;
   var hasFigureImage = imageProps.caption || imageProps.credit;
@@ -10319,7 +10381,7 @@ var useCarouselStyles = function useCarouselStyles(slidesCount, slideWidth) {
   };
 };
 
-var _excluded$1C = ["children", "defaultIndex", "id", "onChange", "tabsData", "useHash"];
+var _excluded$1D = ["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`.
@@ -10438,7 +10500,7 @@ var Tabs = /*#__PURE__*/chakra(function (props) {
       tabsData = props.tabsData,
       _props$useHash = props.useHash,
       useHash = _props$useHash === void 0 ? false : _props$useHash,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1C);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1D);
 
   var styles = useMultiStyleConfig("Tabs", {}); // Just an estimate of the tab width for the mobile carousel.
 
@@ -10537,7 +10599,7 @@ var Tabs = /*#__PURE__*/chakra(function (props) {
   }, createElement(Box, Object.assign({}, carouselStyle), tabs)), nextButton), panels);
 }); // Tabs is also exported above so the props can display in Storybook.
 
-var _excluded$1D = ["aboveHeader", "breakout", "contentId", "contentPrimary", "contentSidebar", "contentTop", "footer", "header", "sidebar", "renderFooterElement", "renderHeaderElement"];
+var _excluded$1E = ["aboveHeader", "breakout", "contentId", "contentPrimary", "contentSidebar", "contentTop", "footer", "header", "sidebar", "renderFooterElement", "renderHeaderElement"];
 /**
  * The main top-level parent component that wraps all template-related
  * components.
@@ -10764,7 +10826,7 @@ var TemplateAppContainer = /*#__PURE__*/chakra(function (props) {
       renderFooterElement = _props$renderFooterEl === void 0 ? true : _props$renderFooterEl,
       _props$renderHeaderEl = props.renderHeaderElement,
       renderHeaderElement = _props$renderHeaderEl === void 0 ? true : _props$renderHeaderEl,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1D);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1E);
 
   var aboveHeaderElem = aboveHeader && createElement(TemplateAboveHeader, null, aboveHeader);
   var breakoutElem = breakout && createElement(TemplateBreakout$1, null, breakout);
@@ -10781,7 +10843,7 @@ var TemplateAppContainer = /*#__PURE__*/chakra(function (props) {
   }, footer));
 });
 
-var _excluded$1E = ["additionalStyles", "defaultChecked", "helperText", "id", "invalidText", "isChecked", "isDisabled", "isInvalid", "isRequired", "labelText", "name", "onChange", "size"];
+var _excluded$1F = ["additionalStyles", "defaultChecked", "helperText", "id", "invalidText", "isChecked", "isDisabled", "isInvalid", "isRequired", "labelText", "name", "onChange", "size"];
 var onChangeDefault$1 = function onChangeDefault() {
   return;
 };
@@ -10810,7 +10872,7 @@ var Toggle$2 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref
       onChange = _props$onChange === void 0 ? onChangeDefault$1 : _props$onChange,
       _props$size = props.size,
       size = _props$size === void 0 ? ToggleSizes.Default : _props$size,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1E);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1F);
 
   var footnote = isInvalid ? invalidText : helperText;
   var ariaAttributes = {};
@@ -10956,7 +11018,7 @@ var VideoPlayerAspectRatios;
   VideoPlayerAspectRatios["Square"] = "square";
 })(VideoPlayerAspectRatios || (VideoPlayerAspectRatios = {}));
 
-var _excluded$1F = ["aspectRatio", "className", "descriptionText", "embedCode", "headingText", "helperText", "id", "iframeTitle", "showHelperInvalidText", "videoId", "videoType"];
+var _excluded$1G = ["aspectRatio", "className", "descriptionText", "embedCode", "headingText", "helperText", "id", "iframeTitle", "showHelperInvalidText", "videoId", "videoType"];
 var VideoPlayer$1 = /*#__PURE__*/chakra(function (props) {
   var aspectRatio = props.aspectRatio,
       className = props.className,
@@ -10970,7 +11032,7 @@ var VideoPlayer$1 = /*#__PURE__*/chakra(function (props) {
       showHelperInvalidText = _props$showHelperInva === void 0 ? true : _props$showHelperInva,
       videoId = props.videoId,
       videoType = props.videoType,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1F);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1G);
 
   var iframeTitleFinal = videoType === VideoPlayerTypes.Vimeo ? iframeTitle || "Vimeo video player" : iframeTitle || "YouTube video player";
   var videoSrc = videoType === VideoPlayerTypes.Vimeo ? "https://player.vimeo.com/video/" + videoId + "?autoplay=0&loop=0" : "https://www.youtube.com/embed/" + videoId + "?disablekb=1&autoplay=0&fs=1&modestbranding=0";
@@ -11039,7 +11101,7 @@ var VideoPlayer$1 = /*#__PURE__*/chakra(function (props) {
   }, embedElement)));
 });
 
-var _excluded$1G = ["className", "columnHeaders", "columnHeadersBackgroundColor", "columnHeadersTextColor", "id", "showRowDividers", "tableData", "titleText", "useRowHeaders"];
+var _excluded$1H = ["className", "columnHeaders", "columnHeadersBackgroundColor", "columnHeadersTextColor", "id", "showRowDividers", "tableData", "titleText", "useRowHeaders"];
 /**
  * Basic `Table` component used to organize and display tabular data in
  * rows and columns.
@@ -11057,7 +11119,7 @@ var Table = /*#__PURE__*/chakra(function (props) {
       titleText = props.titleText,
       _props$useRowHeaders = props.useRowHeaders,
       useRowHeaders = _props$useRowHeaders === void 0 ? false : _props$useRowHeaders,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1G);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1H);
 
   var customColors = {};
   columnHeadersBackgroundColor && (customColors["backgroundColor"] = columnHeadersBackgroundColor);
@@ -11108,5 +11170,5 @@ var Table = /*#__PURE__*/chakra(function (props) {
   }, rest), tableCaption, columnHeadersElems, tableBodyElems());
 });
 
-export { Accordion, AccordionTypes, Breadcrumbs, BreadcrumbsTypes, Button, ButtonTypes, Card, CardActions, CardContent, CardHeading, Checkbox, CheckboxGroup, DSProvider, DatePicker, DatePickerTypes, Fieldset, Form, FormField, GridGaps as FormGaps, FormRow, GridGaps, Heading, HeadingLevels, HeadingSizes, HelperErrorText, Hero$1 as Hero, HeroTypes, HorizontalRule$1 as HorizontalRule, Icon, IconAlign, IconColors, IconNames, IconRotationTypes, IconSizes, IconTypes, Image, ImageRatios, ImageSizes, ImageTypes, Label, LabelPositions, LayoutTypes, Link, LinkTypes, List$1 as List, ListTypes, Logo$1 as Logo, LogoColors, LogoNames, LogoSizes, Modal, Notification$1 as Notification, NotificationTypes, Pagination$1 as Pagination, ProgressIndicator$1 as ProgressIndicator, ProgressIndicatorSizes, ProgressIndicatorTypes, Radio$1 as Radio, RadioGroup$1 as RadioGroup, SearchBar$1 as SearchBar, Select$1 as Select, SimpleGrid, SkeletonLoader$1 as SkeletonLoader, SkeletonLoaderImageRatios, Slider, StatusBadge$1 as StatusBadge, StatusBadgeTypes, StructuredContent$1 as StructuredContent, StructuredContentImagePosition, Table, Tabs, Template$1 as Template, TemplateAboveHeader, TemplateAppContainer, TemplateBreakout$1 as TemplateBreakout, TemplateContent$1 as TemplateContent, TemplateContentPrimary$1 as TemplateContentPrimary, TemplateContentSidebar$1 as TemplateContentSidebar, TemplateContentTop$1 as TemplateContentTop, TemplateFooter, TemplateHeader$1 as TemplateHeader, Text$1 as Text, TextInput, TextInputTypes, TextSizes, Toggle$2 as Toggle, ToggleSizes, VideoPlayer$1 as VideoPlayer, VideoPlayerAspectRatios, VideoPlayerTypes, useCarouselStyles, useNYPLTheme, useWindowSize };
+export { Accordion, AccordionTypes, Breadcrumbs, BreadcrumbsTypes, Button, ButtonTypes, Card, CardActions, CardContent, CardHeading, Checkbox, CheckboxGroup, DSProvider, DatePicker, DatePickerTypes, Fieldset, Form, FormField, GridGaps as FormGaps, FormRow, GridGaps, Heading, HeadingLevels, HeadingSizes, HelperErrorText, Hero$1 as Hero, HeroTypes, HorizontalRule$1 as HorizontalRule, Icon, IconAlign, IconColors, IconNames, IconRotationTypes, IconSizes, IconTypes, Image, ImageRatios, ImageSizes, ImageTypes, Label, LabelPositions, LayoutTypes, Link, LinkTypes, List$1 as List, ListTypes, Logo$1 as Logo, LogoColors, LogoNames, LogoSizes, ModalTrigger, Notification$1 as Notification, NotificationTypes, Pagination$1 as Pagination, ProgressIndicator$1 as ProgressIndicator, ProgressIndicatorSizes, ProgressIndicatorTypes, Radio$1 as Radio, RadioGroup$1 as RadioGroup, SearchBar$1 as SearchBar, Select$1 as Select, SimpleGrid, SkeletonLoader$1 as SkeletonLoader, SkeletonLoaderImageRatios, Slider, StatusBadge$1 as StatusBadge, StatusBadgeTypes, StructuredContent$1 as StructuredContent, StructuredContentImagePosition, Table, Tabs, Template$1 as Template, TemplateAboveHeader, TemplateAppContainer, TemplateBreakout$1 as TemplateBreakout, TemplateContent$1 as TemplateContent, TemplateContentPrimary$1 as TemplateContentPrimary, TemplateContentSidebar$1 as TemplateContentSidebar, TemplateContentTop$1 as TemplateContentTop, TemplateFooter, TemplateHeader$1 as TemplateHeader, Text$1 as Text, TextInput, TextInputTypes, TextSizes, Toggle$2 as Toggle, ToggleSizes, VideoPlayer$1 as VideoPlayer, VideoPlayerAspectRatios, VideoPlayerTypes, useCarouselStyles, useModal, useNYPLTheme, useWindowSize };
 //# sourceMappingURL=design-system-react-components.esm.js.map