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

package/CHANGELOG.md

@@ -8,6 +8,23 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 0.27.0 (April 27, 2022)
+
+### Adds
+
+- Adds two patterns for rendering the updated `Modal` component. This is still an ongoing work-in-progress as the `Modal` gets finalized but it is now using Chakra under-the-hood.
+- Adds `@chakra-ui/storybook-addon` so stories automatically pick up the Chakra-based NYPL theme.
+
+### Updates
+
+- Updates React and React DOM to version 17.
+- Updates Chakra packages `@chakra-ui/react` and `@chakra-ui/system`.
+- Updates the `HelperErrorText` styling to correctly display when used with a `Select` element with a `labelPosition` of inline.
+
+### Removals
+
+- Removes the following packages: `@storybook/addon-queryparams` and `react-router-dom`.
+
 ## 0.26.1 (April 22, 2022)
 
 ### Updates

package/dist/components/Modal/Modal.d.ts

@@ -1,13 +1,33 @@
 import * as React from "react";
-export interface ModalProps {
-    /** ClassName that appears in addition to "modal" */
-    className?: string;
+interface BaseModalProps {
+    bodyContent?: string | JSX.Element;
+    closeButtonLabel?: string;
+    headingText?: string | JSX.Element;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
+    isOpen?: boolean;
+    onClose?: () => void;
 }
-/** Full-screen modal that appears on top of the body of the page. */
-export default class Modal extends React.Component<ModalProps, any> {
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    render(): JSX.Element;
+export interface ModalProps {
+    buttonText?: string;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+    modalProps: BaseModalProps;
 }
+/**
+ * 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.
+ */
+export declare const ModalTrigger: import("@chakra-ui/react").ChakraComponent<({ buttonText, id, modalProps, ...rest }: React.PropsWithChildren<ModalProps>) => JSX.Element, {}>;
+/**
+ * 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.
+ */
+export declare function useModal(): {
+    onClose: () => void;
+    onOpen: () => void;
+    Modal: import("@chakra-ui/react").ChakraComponent<({ bodyContent, closeButtonLabel, headingText, id, ...rest }: React.PropsWithChildren<BaseModalProps>) => JSX.Element, {}>;
+};
+export {};

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

@@ -29,22 +29,6 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-
-  _setPrototypeOf(subClass, superClass);
-}
-
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-
-  return _setPrototypeOf(o, p);
-}
-
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -4333,8 +4317,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
@@ -4343,11 +4326,6 @@ var Select = {
       ".chakra-select__icon-wrapper": {
         zIndex: "9999"
       },
-      helperText: {
-        marginLeft: labelPosition === "inline" ? {
-          md: labelWidth + "px"
-        } : null
-      },
       inline: {
         display: {
           md: "flex"
@@ -8759,43 +8737,119 @@ var Logo$1 = /*#__PURE__*/react.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__*/react.chakra(function (_ref) {
+  var bodyContent = _ref.bodyContent,
+      _ref$closeButtonLabel = _ref.closeButtonLabel,
+      closeButtonLabel = _ref$closeButtonLabel === void 0 ? "Close" : _ref$closeButtonLabel,
+      headingText = _ref.headingText,
+      id = _ref.id,
+      isOpen = _ref.isOpen,
+      onClose = _ref.onClose,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$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 = React.useState(defaultSize),
+      size = _React$useState[0],
+      setSize = _React$useState[1];
 
-  var _proto = Modal.prototype;
+  var windowDimensions = useWindowSize();
+  React.useEffect(function () {
+    if (windowDimensions.width <= breakpointMedium) {
+      setSize(fullSize);
+    } else {
+      setSize(defaultSize);
+    }
+  }, [windowDimensions.width]);
+  return React.createElement(react.Modal, Object.assign({
+    id: id,
+    isOpen: isOpen,
+    onClose: onClose,
+    scrollBehavior: "inside",
+    size: size
+  }, rest), React.createElement(react.ModalOverlay, null), React.createElement(react.ModalContent, null, React.createElement(react.ModalHeader, null, headingText), React.createElement(react.ModalCloseButton, null), React.createElement(react.ModalBody, null, bodyContent), React.createElement(react.ModalFooter, null, React.createElement(react.ButtonGroup, null, React.createElement(Button, {
+    id: "modal-close-btn",
+    onClick: onClose
+  }, closeButtonLabel)))));
+});
+/**
+ * The `ModalTrigger` component renders a button that you click to open the
+ * internal `Modal` component. Note that props to update the internal `Modal`
+ * component are passed through to the `modalProps` prop.
+ */
 
-  _proto.componentDidMount = function componentDidMount() {
-    document.body.classList.add("no-scroll");
-  };
+var ModalTrigger = /*#__PURE__*/react.chakra(function (_ref2) {
+  var buttonText = _ref2.buttonText,
+      id = _ref2.id,
+      modalProps = _ref2.modalProps,
+      rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$5);
 
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    document.body.classList.remove("no-scroll");
-  };
+  var _useDisclosure = react.useDisclosure(),
+      isOpen = _useDisclosure.isOpen,
+      onOpen = _useDisclosure.onOpen,
+      onClose = _useDisclosure.onClose;
 
-  _proto.render = function render() {
-    var _this$props = this.props,
-        id = _this$props.id,
-        className = _this$props.className;
-    return React.createElement("div", {
-      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-      tabIndex: 0,
-      className: "modal " + className,
-      id: id
-    }, this.props.children);
+  var finalOnCloseHandler = function finalOnCloseHandler() {
+    modalProps.onClose && modalProps.onClose();
+    onClose();
   };
 
-  return Modal;
-}(React.Component);
+  return React.createElement(React.Fragment, null, React.createElement(Button, {
+    id: "modal-open-btn",
+    onClick: onOpen
+  }, buttonText), React.createElement(BaseModal, Object.assign({
+    bodyContent: modalProps.bodyContent,
+    closeButtonLabel: modalProps.closeButtonLabel,
+    headingText: modalProps.headingText,
+    id: id,
+    isOpen: isOpen,
+    onClose: finalOnCloseHandler
+  }, rest)));
+});
+/**
+ * This hook function can be used to render the `Modal` component with a custom
+ * open button(s) and optional custom close button(s). You must render your own
+ * button and pass the appropriate `onOpen` and ` handler for the modal to open.
+ */
+
+function useModal() {
+  var _useDisclosure2 = react.useDisclosure(),
+      isOpen = _useDisclosure2.isOpen,
+      onClose = _useDisclosure2.onClose,
+      onOpen = _useDisclosure2.onOpen;
+
+  var Modal = react.chakra(function (_ref3) {
+    var bodyContent = _ref3.bodyContent,
+        closeButtonLabel = _ref3.closeButtonLabel,
+        headingText = _ref3.headingText,
+        id = _ref3.id,
+        rest = _objectWithoutPropertiesLoose(_ref3, _excluded3$2);
+
+    return React.createElement(BaseModal, Object.assign({
+      bodyContent: bodyContent,
+      closeButtonLabel: closeButtonLabel,
+      headingText: headingText,
+      id: id,
+      isOpen: isOpen,
+      onClose: onClose
+    }, rest));
+  });
+  return {
+    onClose: onClose,
+    onOpen: onOpen,
+    Modal: Modal
+  };
+}
 
-var _excluded$1p = ["children", "icon", "id", "isCentered", "notificationType"],
-    _excluded2$5 = ["alignText", "children", "icon", "notificationType"],
-    _excluded3$2 = ["ariaLabel", "className", "dismissible", "icon", "id", "isCentered", "noMargin", "notificationContent", "notificationHeading", "notificationType", "showIcon"];
+var _excluded$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.
  */
@@ -8806,7 +8860,7 @@ var NotificationHeading$1 = /*#__PURE__*/react.chakra(function (props) {
       id = props.id,
       isCentered = props.isCentered,
       notificationType = props.notificationType,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1p);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1q);
 
   var styles = react.useMultiStyleConfig("NotificationHeading", {
     icon: icon,
@@ -8831,7 +8885,7 @@ var NotificationContent$1 = /*#__PURE__*/react.chakra(function (props) {
       children = props.children,
       icon = props.icon,
       notificationType = props.notificationType,
-      rest = _objectWithoutPropertiesLoose(props, _excluded2$5);
+      rest = _objectWithoutPropertiesLoose(props, _excluded2$6);
 
   var styles = react.useMultiStyleConfig("NotificationContent", {
     alignText: alignText,
@@ -8866,7 +8920,7 @@ var Notification$1 = /*#__PURE__*/react.chakra(function (props) {
       notificationType = _props$notificationTy === void 0 ? exports.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 = React.useState(true),
       isOpen = _useState[0],
@@ -8962,7 +9016,7 @@ var Notification$1 = /*#__PURE__*/react.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.
  */
@@ -8976,7 +9030,7 @@ var Pagination$1 = /*#__PURE__*/react.chakra(function (props) {
       initialPage = _props$initialPage === void 0 ? 1 : _props$initialPage,
       onPageChange = props.onPageChange,
       pageCount = props.pageCount,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1q);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1r);
 
   var refCurrentPage = React.useRef(currentPage);
 
@@ -9168,7 +9222,7 @@ var Pagination$1 = /*#__PURE__*/react.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,
@@ -9190,7 +9244,7 @@ var ProgressIndicator$1 = /*#__PURE__*/react.chakra(function (props) {
       size = _props$size === void 0 ? exports.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 = react.useMultiStyleConfig("ProgressIndicator", {
     darkMode: darkMode,
@@ -9256,7 +9310,7 @@ var ProgressIndicator$1 = /*#__PURE__*/react.chakra(function (props) {
   }, rest), progressComponent(indicatorType));
 });
 
-var _excluded$1s = ["className", "helperText", "id", "invalidText", "isChecked", "isDisabled", "isInvalid", "isRequired", "labelText", "name", "onChange", "showHelperInvalidText", "showLabel", "value"];
+var _excluded$1t = ["className", "helperText", "id", "invalidText", "isChecked", "isDisabled", "isInvalid", "isRequired", "labelText", "name", "onChange", "showHelperInvalidText", "showLabel", "value"];
 var Radio$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var className = props.className,
       helperText = props.helperText,
@@ -9277,7 +9331,7 @@ var Radio$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function
       _props$showLabel = props.showLabel,
       showLabel = _props$showLabel === void 0 ? true : _props$showLabel,
       value = props.value,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1s);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1t);
 
   var styles = react.useMultiStyleConfig("Radio", {});
   var footnote = isInvalid ? invalidText : helperText;
@@ -9318,7 +9372,7 @@ var Radio$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function
   }));
 }));
 
-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
@@ -9354,7 +9408,7 @@ var RadioGroup$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(func
       showLabel = _props$showLabel === void 0 ? true : _props$showLabel,
       _props$showRequiredLa = props.showRequiredLabel,
       showRequiredLabel = _props$showRequiredLa === void 0 ? true : _props$showRequiredLa,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1t);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1u);
 
   var _React$useState = React.useState(defaultValue),
       value = _React$useState[0],
@@ -9430,7 +9484,7 @@ var RadioGroup$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(func
   TextSizes["Mini"] = "mini";
 })(exports.TextSizes || (exports.TextSizes = {}));
 
-var _excluded$1u = ["children", "className", "isBold", "isItalic", "noSpace", "size"];
+var _excluded$1v = ["children", "className", "isBold", "isItalic", "noSpace", "size"];
 var Text$1 = /*#__PURE__*/react.chakra(function (props) {
   var children = props.children,
       _props$className = props.className,
@@ -9440,7 +9494,7 @@ var Text$1 = /*#__PURE__*/react.chakra(function (props) {
       noSpace = props.noSpace,
       _props$size = props.size,
       size = _props$size === void 0 ? exports.TextSizes.Default : _props$size,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1u);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1v);
 
   var variant = getVariant(size, exports.TextSizes, exports.TextSizes.Default);
   var styles = react.useStyleConfig("Text", {
@@ -9460,7 +9514,7 @@ var Text$1 = /*#__PURE__*/react.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__*/react.chakra(function (props) {
   var children = props.children,
       descriptionText = props.descriptionText,
@@ -9470,7 +9524,7 @@ var ComponentWrapper$1 = /*#__PURE__*/react.chakra(function (props) {
       invalidText = props.invalidText,
       _props$isInvalid = props.isInvalid,
       isInvalid = _props$isInvalid === void 0 ? false : _props$isInvalid,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1v);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1w);
 
   var hasChildren = !!children;
   var styles = react.useMultiStyleConfig("ComponentWrapper", {
@@ -9510,7 +9564,7 @@ var SelectTypes;
   LabelPositions["Inline"] = "inline";
 })(exports.LabelPositions || (exports.LabelPositions = {}));
 
-var _excluded$1w = ["additionalStyles", "children", "className", "helperText", "id", "invalidText", "isDisabled", "isInvalid", "isRequired", "labelPosition", "labelText", "name", "onChange", "placeholder", "selectType", "showHelperInvalidText", "showLabel", "showRequiredLabel", "value"];
+var _excluded$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.
@@ -9546,7 +9600,7 @@ var Select$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React__default.forwardRef
       showRequiredLabel = _props$showRequiredLa === void 0 ? true : _props$showRequiredLa,
       _props$value = props.value,
       value = _props$value === void 0 ? "" : _props$value,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1w);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1x);
 
   var ariaAttributes = {};
 
@@ -9557,8 +9611,7 @@ var Select$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React__default.forwardRef
   var labelRef = React.useRef();
   var styles = react.useMultiStyleConfig("CustomSelect", {
     variant: selectType,
-    labelPosition: labelPosition,
-    labelWidth: labelWidth
+    labelPosition: labelPosition
   });
   var finalInvalidText = invalidText ? invalidText : "There is an error related to this field.";
   var footnote = isInvalid ? finalInvalidText : helperText; // To control the `Select` component, both `onChange` and `value`
@@ -9567,7 +9620,10 @@ var Select$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React__default.forwardRef
   var controlledProps = onChange ? {
     onChange: onChange,
     value: value
-  } : {};
+  } : {}; // The number of pixels between the label and select elements
+  // when the labelPosition is inline (equivalent to --nypl-space-xs).
+
+  var labelSelectGap = 8;
 
   if (!showLabel) {
     ariaAttributes["aria-label"] = labelText && footnote ? labelText + " - " + footnote : labelText;
@@ -9582,9 +9638,11 @@ var Select$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React__default.forwardRef
   React.useEffect(function () {
     if (labelPosition === exports.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(react.Box, Object.assign({
@@ -9615,14 +9673,18 @@ var Select$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React__default.forwardRef
       size: exports.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.
@@ -9652,7 +9714,7 @@ var SearchBar$1 = /*#__PURE__*/react.chakra(function (props) {
       selectProps = props.selectProps,
       textInputElement = props.textInputElement,
       textInputProps = props.textInputProps,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1x);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1y);
 
   var styles = react.useMultiStyleConfig("SearchBar", {});
   var stateProps = {
@@ -9751,7 +9813,7 @@ var SearchBar$1 = /*#__PURE__*/react.chakra(function (props) {
   SkeletonLoaderImageRatios["Square"] = "square";
 })(exports.SkeletonLoaderImageRatios || (exports.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.
@@ -9778,7 +9840,7 @@ var SkeletonLoader$1 = /*#__PURE__*/react.chakra(function (props) {
       _props$showImage = props.showImage,
       showImage = _props$showImage === void 0 ? true : _props$showImage,
       width = props.width,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1y);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1z);
 
   var styles = react.useMultiStyleConfig("SkeletonLoader", {
     isBordered: isBordered,
@@ -9840,7 +9902,7 @@ var SkeletonLoader$1 = /*#__PURE__*/react.chakra(function (props) {
   })))));
 });
 
-var _excluded$1z = ["className", "defaultValue", "helperText", "id", "invalidText", "isDisabled", "isInvalid", "isRangeSlider", "isRequired", "labelText", "max", "min", "name", "onChange", "showBoxes", "showHelperInvalidText", "showLabel", "showRequiredLabel", "showValues", "step"];
+var _excluded$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
@@ -9881,7 +9943,7 @@ var Slider = /*#__PURE__*/react.chakra(function (props) {
       showValues = _props$showValues === void 0 ? true : _props$showValues,
       _props$step = props.step,
       step = _props$step === void 0 ? 1 : _props$step,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1z);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1A);
 
   if (!id) {
     console.warn("NYPL Reservoir Slider: This component's required `id` prop was not passed.");
@@ -10072,7 +10134,7 @@ var Slider = /*#__PURE__*/react.chakra(function (props) {
   StatusBadgeTypes["High"] = "high";
 })(exports.StatusBadgeTypes || (exports.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.
@@ -10084,7 +10146,7 @@ var StatusBadge$1 = /*#__PURE__*/react.chakra(function (props) {
       id = props.id,
       _props$level = props.level,
       level = _props$level === void 0 ? exports.StatusBadgeTypes.Low : _props$level,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1A);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1B);
 
   var styles = react.useStyleConfig("StatusBadge", {
     variant: level
@@ -10107,7 +10169,7 @@ var StatusBadge$1 = /*#__PURE__*/react.chakra(function (props) {
   StructuredContentImagePosition["Center"] = "center";
 })(exports.StructuredContentImagePosition || (exports.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.
@@ -10159,7 +10221,7 @@ var StructuredContent$1 = /*#__PURE__*/react.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;
@@ -10261,7 +10323,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`.
@@ -10380,7 +10442,7 @@ var Tabs = /*#__PURE__*/react.chakra(function (props) {
       tabsData = props.tabsData,
       _props$useHash = props.useHash,
       useHash = _props$useHash === void 0 ? false : _props$useHash,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1C);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1D);
 
   var styles = react.useMultiStyleConfig("Tabs", {}); // Just an estimate of the tab width for the mobile carousel.
 
@@ -10479,7 +10541,7 @@ var Tabs = /*#__PURE__*/react.chakra(function (props) {
   }, React.createElement(react.Box, Object.assign({}, carouselStyle), tabs)), nextButton), panels);
 }); // Tabs is also exported above so the props can display in Storybook.
 
-var _excluded$1D = ["aboveHeader", "breakout", "contentId", "contentPrimary", "contentSidebar", "contentTop", "footer", "header", "sidebar", "renderFooterElement", "renderHeaderElement"];
+var _excluded$1E = ["aboveHeader", "breakout", "contentId", "contentPrimary", "contentSidebar", "contentTop", "footer", "header", "sidebar", "renderFooterElement", "renderHeaderElement"];
 /**
  * The main top-level parent component that wraps all template-related
  * components.
@@ -10706,7 +10768,7 @@ var TemplateAppContainer = /*#__PURE__*/react.chakra(function (props) {
       renderFooterElement = _props$renderFooterEl === void 0 ? true : _props$renderFooterEl,
       _props$renderHeaderEl = props.renderHeaderElement,
       renderHeaderElement = _props$renderHeaderEl === void 0 ? true : _props$renderHeaderEl,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1D);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1E);
 
   var aboveHeaderElem = aboveHeader && React.createElement(TemplateAboveHeader, null, aboveHeader);
   var breakoutElem = breakout && React.createElement(TemplateBreakout$1, null, breakout);
@@ -10723,7 +10785,7 @@ var TemplateAppContainer = /*#__PURE__*/react.chakra(function (props) {
   }, footer));
 });
 
-var _excluded$1E = ["additionalStyles", "defaultChecked", "helperText", "id", "invalidText", "isChecked", "isDisabled", "isInvalid", "isRequired", "labelText", "name", "onChange", "size"];
+var _excluded$1F = ["additionalStyles", "defaultChecked", "helperText", "id", "invalidText", "isChecked", "isDisabled", "isInvalid", "isRequired", "labelText", "name", "onChange", "size"];
 var onChangeDefault$1 = function onChangeDefault() {
   return;
 };
@@ -10752,7 +10814,7 @@ var Toggle$2 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function
       onChange = _props$onChange === void 0 ? onChangeDefault$1 : _props$onChange,
       _props$size = props.size,
       size = _props$size === void 0 ? exports.ToggleSizes.Default : _props$size,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1E);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1F);
 
   var footnote = isInvalid ? invalidText : helperText;
   var ariaAttributes = {};
@@ -10894,7 +10956,7 @@ function useNYPLTheme() {
   VideoPlayerAspectRatios["Square"] = "square";
 })(exports.VideoPlayerAspectRatios || (exports.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__*/react.chakra(function (props) {
   var aspectRatio = props.aspectRatio,
       className = props.className,
@@ -10908,7 +10970,7 @@ var VideoPlayer$1 = /*#__PURE__*/react.chakra(function (props) {
       showHelperInvalidText = _props$showHelperInva === void 0 ? true : _props$showHelperInva,
       videoId = props.videoId,
       videoType = props.videoType,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1F);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1G);
 
   var iframeTitleFinal = videoType === exports.VideoPlayerTypes.Vimeo ? iframeTitle || "Vimeo video player" : iframeTitle || "YouTube video player";
   var videoSrc = videoType === exports.VideoPlayerTypes.Vimeo ? "https://player.vimeo.com/video/" + videoId + "?autoplay=0&loop=0" : "https://www.youtube.com/embed/" + videoId + "?disablekb=1&autoplay=0&fs=1&modestbranding=0";
@@ -10977,7 +11039,7 @@ var VideoPlayer$1 = /*#__PURE__*/react.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.
@@ -10995,7 +11057,7 @@ var Table = /*#__PURE__*/react.chakra(function (props) {
       titleText = props.titleText,
       _props$useRowHeaders = props.useRowHeaders,
       useRowHeaders = _props$useRowHeaders === void 0 ? false : _props$useRowHeaders,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1G);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1H);
 
   var customColors = {};
   columnHeadersBackgroundColor && (customColors["backgroundColor"] = columnHeadersBackgroundColor);
@@ -11168,7 +11230,7 @@ exports.Label = Label;
 exports.Link = Link;
 exports.List = List$1;
 exports.Logo = Logo$1;
-exports.Modal = Modal;
+exports.ModalTrigger = ModalTrigger;
 exports.Notification = Notification$1;
 exports.Pagination = Pagination$1;
 exports.ProgressIndicator = ProgressIndicator$1;
@@ -11198,6 +11260,7 @@ exports.TextInput = TextInput;
 exports.Toggle = Toggle$2;
 exports.VideoPlayer = VideoPlayer$1;
 exports.useCarouselStyles = useCarouselStyles;
+exports.useModal = useModal;
 exports.useNYPLTheme = useNYPLTheme;
 exports.useWindowSize = useWindowSize;
 //# sourceMappingURL=design-system-react-components.cjs.development.js.map