@carbon/ibm-products 2.34.0 → 2.36.0-alpha.27

package/es/components/ExportModal/ExportModal.d.ts

@@ -1,5 +1,113 @@
+/// <reference path="../../../src/custom-typings/index.d.ts" />
+import React, { ReactNode } from 'react';
+import { ComposedModal } from '@carbon/react';
+type InputType = 'text' | 'password';
+type PreformattedExtensions = {
+    extension?: string;
+    description?: string;
+};
+interface RemoveModalProps extends React.ComponentProps<typeof ComposedModal> {
+    /**
+     * Body content for the modal
+     */
+    body?: string;
+    /**
+     * Optional class name
+     */
+    className?: string;
+    /**
+     * specify if an error occurred
+     */
+    error?: boolean;
+    /**
+     * messaging to display in the event of an error
+     */
+    errorMessage?: string;
+    /**
+     * name of the file being exported
+     */
+    filename: string;
+    /**
+     * label text that's displayed when hovering over visibility toggler to hide key
+     */
+    hidePasswordLabel?: string;
+    /**
+     * label for the text input
+     */
+    inputLabel?: string;
+    /**
+     * specify the type of text input
+     */
+    inputType: InputType;
+    /**
+     * text for an invalid input
+     */
+    invalidInputText?: string;
+    /**
+     * specify if the modal is in a loading state
+     */
+    loading?: boolean;
+    /**
+     * message to display during the loading state
+     */
+    loadingMessage?: string;
+    /**
+     * Specify a handler for closing modal
+     */
+    onClose?: () => void;
+    /**
+     * Specify a handler for "submitting" modal. Returns the file name
+     */
+    onRequestSubmit?: (value?: string) => void;
+    /**
+     * Specify whether the Modal is currently open
+     */
+    open?: boolean;
+    /**
+     * The DOM node the tearsheet should be rendered within. Defaults to document.body.
+     */
+    portalTarget?: ReactNode;
+    /**
+     * Array of extensions to display as radio buttons
+     */
+    preformattedExtensions: readonly PreformattedExtensions[];
+    /**
+     * Label for the preformatted label form group
+     */
+    preformattedExtensionsLabel?: string;
+    /**
+     * Specify the text for the primary button
+     */
+    primaryButtonText: string;
+    /**
+     * Specify the text for the secondary button
+     */
+    secondaryButtonText: string;
+    /**
+     * label text that's displayed when hovering over visibility toggler to show key
+     */
+    showPasswordLabel?: string;
+    /**
+     * messaging to display if the export was successful
+     */
+    successMessage?: string;
+    /**
+     * specify if the export was successful
+     */
+    successful?: boolean;
+    /**
+     * The text displayed at the top of the modal
+     */
+    title: string;
+    /**
+     * array of valid extensions the file can have
+     */
+    validExtensions: readonly any[];
+}
 /**
  * Modal dialog version of the export pattern
  */
-export let ExportModal: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let ExportModal: React.ForwardRefExoticComponent<RemoveModalProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<unknown>>;
+export {};

package/es/components/ExportModal/ExportModal.js

@@ -26,7 +26,6 @@ var defaults = {
   preformattedExtensions: Object.freeze([]),
   validExtensions: Object.freeze([])
 };
-
 /**
  * Modal dialog version of the export pattern
  */
@@ -39,7 +38,7 @@ var ExportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     hidePasswordLabel = _ref.hidePasswordLabel,
     inputLabel = _ref.inputLabel,
     _ref$inputType = _ref.inputType,
-    inputType = _ref$inputType === void 0 ? defaults.inputType : _ref$inputType,
+    inputType = _ref$inputType === void 0 ? 'text' : _ref$inputType,
     invalidInputText = _ref.invalidInputText,
     loading = _ref.loading,
     loadingMessage = _ref.loadingMessage,
@@ -76,7 +75,10 @@ var ExportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   useEffect(function () {
     var _preformattedExtensio;
     setName(filename);
-    setExtension(preformattedExtensions === null || preformattedExtensions === void 0 || (_preformattedExtensio = preformattedExtensions[0]) === null || _preformattedExtensio === void 0 ? void 0 : _preformattedExtensio.extension);
+    if (preformattedExtensions && preformattedExtensions.length > 0 && (_preformattedExtensio = preformattedExtensions[0]) !== null && _preformattedExtensio !== void 0 && _preformattedExtensio.extension) {
+      var _preformattedExtensio2;
+      setExtension(preformattedExtensions === null || preformattedExtensions === void 0 || (_preformattedExtensio2 = preformattedExtensions[0]) === null || _preformattedExtensio2 === void 0 ? void 0 : _preformattedExtensio2.extension);
+    }
   }, [filename, preformattedExtensions, open]);
   var onNameChangeHandler = function onNameChangeHandler(evt) {
     setName(evt.target.value);
@@ -89,7 +91,7 @@ var ExportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   };
   var onSubmitHandler = function onSubmitHandler() {
     var returnName = extension ? "".concat(filename, ".").concat(extension.toLocaleLowerCase()) : name;
-    onRequestSubmit(returnName);
+    onRequestSubmit && onRequestSubmit(returnName);
   };
   var hasInvalidExtension = function hasInvalidExtension() {
     if (!dirtyInput || !validExtensions || !validExtensions.length) {
@@ -186,6 +188,7 @@ ExportModal.propTypes = {
   /**
    * Body content for the modal
    */
+  /**@ts-ignore*/
   body: PropTypes.string,
   /**
    * Optional class name
@@ -214,6 +217,7 @@ ExportModal.propTypes = {
   /**
    * specify the type of text input
    */
+  /**@ts-ignore */
   inputType: PropTypes.oneOf(['text', 'password']),
   /**
    * text for an invalid input
@@ -246,6 +250,7 @@ ExportModal.propTypes = {
   /**
    * Array of extensions to display as radio buttons
    */
+  /**@ts-ignore */
   preformattedExtensions: PropTypes.arrayOf(PropTypes.shape({
     extension: PropTypes.string,
     description: PropTypes.string
@@ -281,6 +286,7 @@ ExportModal.propTypes = {
   /**
    * array of valid extensions the file can have
    */
+  /**@ts-ignore */
   validExtensions: PropTypes.array
 };
 ExportModal.displayName = componentName;

package/es/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.js

@@ -55,7 +55,7 @@ FilterPanelAccordion = pkg.checkComponentEnabled(FilterPanelAccordion, component
 FilterPanelAccordion.displayName = componentName;
 FilterPanelAccordion.propTypes = {
   /**
-   * Props specific to the internal `Accordion`.
+   * Props specific to the internal `Accordion` component.
    */
   accordionProps: PropTypes.shape({}),
   /**

package/es/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.js

@@ -62,7 +62,7 @@ FilterPanelAccordionItem = pkg.checkComponentEnabled(FilterPanelAccordionItem, c
 FilterPanelAccordionItem.displayName = componentName;
 FilterPanelAccordionItem.propTypes = {
   /**
-   * Props specific to the internal `AccordionItem`.
+   * Props specific to the internal `AccordionItem` component.
    */
   accordionItemProps: PropTypes.shape({}),
   /**
@@ -86,7 +86,7 @@ FilterPanelAccordionItem.propTypes = {
    */
   title: PropTypes.string,
   /**
-   * Props specific to the internal `TruncatedList`.
+   * Props specific to the internal `TruncatedList` component.
    */
   truncatedListProps: PropTypes.shape({})
 };

package/es/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.d.ts

@@ -1,5 +1,10 @@
 /**
  * Provides a checkbox, label, and count.
+ *
+ * This component is returning Carbon's Checkbox.
+ *
+ * All of Carbon Checkbox's props are directly available
+ * through "...rest", including id, onClick, etc.
  */
 export let FilterPanelCheckbox: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';

package/es/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.js

@@ -22,6 +22,11 @@ var componentName = 'FilterPanelCheckbox';
 
 /**
  * Provides a checkbox, label, and count.
+ *
+ * This component is returning Carbon's Checkbox.
+ *
+ * All of Carbon Checkbox's props are directly available
+ * through "...rest", including id, onClick, etc.
  */
 var FilterPanelCheckbox = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var className = _ref.className,
@@ -46,15 +51,6 @@ var FilterPanelCheckbox = /*#__PURE__*/React__default.forwardRef(function (_ref,
 FilterPanelCheckbox = pkg.checkComponentEnabled(FilterPanelCheckbox, componentName);
 FilterPanelCheckbox.displayName = componentName;
 FilterPanelCheckbox.propTypes = {
-  /**
-   * IMPORTANT NOTE
-   *
-   * This component is returning Carbon's Checkbox.
-   *
-   * All of Carbon Checkbox's props are directly available
-   * through "...rest", including id, onClick, etc.
-   */
-
   /**
    * Optional class to be applied to the containing node.
    */

package/es/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.js

@@ -145,7 +145,7 @@ FilterPanelCheckboxWithOverflow.propTypes = {
    */
   onChange: PropTypes.func,
   /**
-   * Props specific to the internal `OverflowMenu`.
+   * Props specific to the internal `OverflowMenu` component.
    */
   overflowMenuProps: PropTypes.shape(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, 'aria-label', PropTypes.string), "flipped", PropTypes.bool), "menuClass", PropTypes.string), "menuOptionsClass", PropTypes.string), "open", PropTypes.bool), "selectorPrimaryFocus", PropTypes.string)),
   /**

package/es/components/FilterPanel/FilterPanelSearch/FilterPanelSearch.d.ts

@@ -0,0 +1,5 @@
+/**
+ * An input field and container to show search results.
+ */
+export let FilterPanelSearch: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/es/components/FilterPanel/FilterPanelSearch/FilterPanelSearch.js

@@ -0,0 +1,92 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useState, useEffect } from 'react';
+import PropTypes from '../../../node_modules/prop-types/index.js';
+import cx from 'classnames';
+import { Search } from '@carbon/react';
+import { getDevtoolsProps } from '../../../global/js/utils/devtools.js';
+import { pkg } from '../../../settings.js';
+
+var _excluded = ["children", "className", "searchProps"];
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(pkg.prefix, "--filter-panel-search");
+var componentName = 'FilterPanelSearch';
+var defaults = {
+  searchProps: {}
+};
+
+/**
+ * An input field and container to show search results.
+ */
+var FilterPanelSearch = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    _ref$searchProps = _ref.searchProps,
+    searchProps = _ref$searchProps === void 0 ? defaults.searchProps : _ref$searchProps,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    resultsVisible = _useState2[0],
+    setResultsVisible = _useState2[1];
+  var timer;
+
+  // Hide results with a delay.
+  // Gives enough time for "show" to trigger earlier.
+  var hideResults = function hideResults() {
+    clearTimeout(timer);
+    timer = setTimeout(function () {
+      setResultsVisible(false);
+    }, 300);
+  };
+
+  // Show results immediately.
+  var showResults = function showResults() {
+    clearTimeout(timer);
+    setResultsVisible(true);
+  };
+
+  // On unmount, clear the timer.
+  useEffect(function () {
+    return clearTimeout(timer);
+  }, [timer]);
+  return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+    className: cx(blockClass, "".concat(blockClass, "__container"), className),
+    onBlur: hideResults,
+    onFocus: showResults,
+    ref: ref
+  }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement(Search, _extends({
+    className: "".concat(blockClass, "__input")
+  }, searchProps)), resultsVisible && !!children && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__results")
+  }, children));
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+FilterPanelSearch = pkg.checkComponentEnabled(FilterPanelSearch, componentName);
+FilterPanelSearch.displayName = componentName;
+FilterPanelSearch.propTypes = {
+  /**
+   * Provide the contents of the FilterPanelSearch.
+   */
+  children: PropTypes.node,
+  /**
+   * Optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+  /**
+   * Props specific to the internal `Search` component.
+   */
+  searchProps: PropTypes.shape({
+    /** The label text for the Search icon. */
+    labelText: PropTypes.string.isRequired
+  }).isRequired
+};
+
+export { FilterPanelSearch };

package/es/components/FilterPanel/index.d.ts

@@ -5,3 +5,4 @@ export { FilterPanelCheckbox } from "./FilterPanelCheckbox/FilterPanelCheckbox";
 export { FilterPanelCheckboxWithOverflow } from "./FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow";
 export { FilterPanelGroup } from "./FilterPanelGroup/FilterPanelGroup";
 export { FilterPanelLabel } from "./FilterPanelLabel/FilterPanelLabel";
+export { FilterPanelSearch } from "./FilterPanelSearch/FilterPanelSearch";

package/es/components/FullPageError/FullPageError.d.ts

@@ -1,5 +1,6 @@
 /**
- * TODO: A description of the component.
+ * Display a full-page error when the requested page is unavailable to the user.
+ * This is typically caused by issues with the requested URL or access permissions.
  */
 export let FullPageError: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';

package/es/components/FullPageError/FullPageError.js

@@ -9,17 +9,14 @@ import { objectWithoutProperties as _objectWithoutProperties, extends as _extend
 import React__default from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
 import cx from 'classnames';
-import { Grid, Column } from '@carbon/react';
-import { ErrorGenericSVG } from './assets/ErrorGenericSVG.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
+import { ErrorGenericSVG } from './assets/ErrorGenericSVG.js';
 import { Error404SVG } from './assets/Error404SVG.js';
 import { Error403SVG } from './assets/Error403SVG.js';
+import { Grid, Column } from '@carbon/react';
 
-var _excluded = ["children", "className", "description", "errorLabel", "kind", "title"];
-
-// Carbon and package components we use.
-/* TODO: @import(s) of carbon components and other package components. */
+var _excluded = ["children", "className", "description", "label", "kind", "title"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--full-page-error");
@@ -27,88 +24,68 @@ var componentName = 'FullPageError';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
-// Default values can be included here and then assigned to the prop params,
-// e.g. prop = defaults.prop,
-// This gathers default values together neatly and ensures non-primitive
-// values are initialized early to avoid react making unnecessary re-renders.
-// Note that default values are not required for props that are 'required',
-// nor for props where the component can apply undefined values reasonably.
-// Default values should be provided when the component needs to make a choice
-// or assumption when a prop is not supplied.
-
 // Default values for props
 var defaults = {
   kind: 'custom'
 };
 
 /**
- * TODO: A description of the component.
+ * Display a full-page error when the requested page is unavailable to the user.
+ * This is typically caused by issues with the requested URL or access permissions.
  */
 var FullPageError = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     description = _ref.description,
-    errorLabel = _ref.errorLabel,
+    label = _ref.label,
     _ref$kind = _ref.kind,
     kind = _ref$kind === void 0 ? defaults.kind : _ref$kind,
     title = _ref.title,
     rest = _objectWithoutProperties(_ref, _excluded);
   var errorData = {
     403: {
-      title: 'Access denied',
-      description: 'You are not authorized to access the requested page. Please verify that you are logged in to the hosting environment and your access permissions are correct.',
       svg: /*#__PURE__*/React__default.createElement(Error403SVG, {
-        className: cx("".concat(blockClass, "__error-svg"), "".concat(blockClass, "__error-403"))
+        className: "".concat(blockClass, "__svg ").concat(blockClass, "__403")
       })
     },
     404: {
-      title: 'Page not found',
-      description: 'The page you requested has moved or is unavailable, or the specified URL is not valid. Please check the URL or search the site for the requested content.',
       svg: /*#__PURE__*/React__default.createElement(Error404SVG, {
-        className: cx("".concat(blockClass, "__error-svg"), "".concat(blockClass, "__error-404"))
+        className: "".concat(blockClass, "__svg ").concat(blockClass, "__404")
       })
     },
     custom: {
-      title: title,
-      description: description,
       svg: /*#__PURE__*/React__default.createElement(ErrorGenericSVG, {
-        className: cx("".concat(blockClass, "__error-svg"), "".concat(blockClass, "__error-custom"))
+        className: "".concat(blockClass, "__svg ").concat(blockClass, "__custom")
       })
     }
   };
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
-    className: cx(blockClass,
-    // Apply the block class to the main HTML element
-    className,
-    // Apply any supplied class names to the main HTML element.
-    // example: `${blockClass}__template-string-class-${kind}-n-${size}`,
-    {
-      // switched classes dependant on props or state
-      // example: [`${blockClass}__here-if-small`]: size === 'sm',
-    }),
+    className: cx(blockClass, className),
     ref: ref,
     role: "main"
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__error-container")
+    className: "".concat(blockClass, "__container")
   }, /*#__PURE__*/React__default.createElement(Grid, {
-    className: "".concat(blockClass, "__error-grid")
+    className: "".concat(blockClass, "__grid")
   }, /*#__PURE__*/React__default.createElement(Column, {
     sm: 4,
     md: 3,
     lg: 6,
-    className: "".concat(blockClass, "__error-column")
+    className: "".concat(blockClass, "__column")
   }, /*#__PURE__*/React__default.createElement("h1", {
-    className: "".concat(blockClass, "__error-title")
+    className: "".concat(blockClass, "__title")
   }, /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(blockClass, "__error-label")
-  }, "\u21B3 ", kind === 'custom' ? errorLabel : "Error ".concat(kind)), /*#__PURE__*/React__default.createElement("span", null, errorData[kind].title)), /*#__PURE__*/React__default.createElement("p", {
+    className: "".concat(blockClass, "__label")
+  }, "\u21B3 ", label), /*#__PURE__*/React__default.createElement("span", null, title)), /*#__PURE__*/React__default.createElement("p", {
     className: "".concat(blockClass, "__description")
-  }, description || errorData[kind].description), children), /*#__PURE__*/React__default.createElement(Column, {
+  }, description), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__body")
+  }, children)), /*#__PURE__*/React__default.createElement(Column, {
     sm: 4,
     md: 5,
     lg: 10
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__error-svg-container")
+    className: "".concat(blockClass, "__svg-container")
   }, errorData[kind].svg)))));
 });
 
@@ -136,20 +113,18 @@ FullPageError.propTypes = {
    * This is optional for 403 and 404 kinds, and passing this would override their default descriptions.
    */
   description: PropTypes.string.isRequired,
-  /**
-   * String that will describe the error that occurred
-   */
-  errorLabel: PropTypes.string.isRequired,
   /**
    * The kind of error page to be displayed, default is custom
    */
   kind: PropTypes.oneOf(['custom', '403', '404']),
+  /**
+   * String that will describe the error that occurred
+   */
+  label: PropTypes.string.isRequired,
   /**
    * This will be for the main title of the FullPageError component
    */
   title: PropTypes.string.isRequired
-
-  /* TODO: add types and DocGen for all props. */
 };
 
 export { FullPageError };

package/es/components/HTTPErrors/HTTPError403/HTTPError403.d.ts

@@ -1,7 +1,45 @@
+/**
+ * Copyright IBM Corp. 2021, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { PropsWithChildren } from 'react';
+interface HTTPError403Props extends PropsWithChildren {
+    /**
+     * Provide an optional class to be applied to the containing node
+     */
+    className?: string;
+    /**
+     * String that will provide the description for the HTTP error code
+     */
+    description: string;
+    /**
+     * String that will describe the error that occurred
+     */
+    errorCodeLabel: string;
+    /**
+     * Links that will display for extra context when receiving particular errors
+     */
+    links: Array<{
+        /**
+         * The text to display for the link
+         */
+        text: string;
+        /**
+         * The link's destination
+         */
+        href: string;
+    }>;
+    /**
+     * This will be for the main title of the HTTP error component
+     */
+    title: string;
+}
 /**
  * HTTP errors are used in an attempt to access something that isn’t available or
 the user doesn’t have permission for. This HTTPError component is generic so you
 can use it when you receive an error code that isn't provided.
  */
-export let HTTPError403: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let HTTPError403: React.ForwardRefExoticComponent<HTTPError403Props & React.RefAttributes<HTMLDivElement>>;
+export {};

package/es/components/HTTPErrors/HTTPError403/HTTPError403.js

@@ -19,7 +19,6 @@ var _excluded = ["className", "description", "errorCodeLabel", "links", "title"]
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--http-errors");
 var componentName = 'HTTPError403';
-
 /**
  * HTTP errors are used in an attempt to access something that isn’t available or
 the user doesn’t have permission for. This HTTPError component is generic so you
@@ -71,6 +70,7 @@ HTTPError403.propTypes = {
   /**
    * Links that will display for extra context when receiving particular errors
    */
+  /**@ts-ignore*/
   links: propTypesExports.arrayOf(propTypesExports.shape({
     /**
      * The text to display for the link

package/es/components/HTTPErrors/HTTPError404/HTTPError404.d.ts

@@ -1,7 +1,45 @@
+/**
+ * Copyright IBM Corp. 2021, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { PropsWithChildren } from 'react';
+interface HTTPError404Props extends PropsWithChildren {
+    /**
+     * Provide an optional class to be applied to the containing node
+     */
+    className?: string;
+    /**
+     * String that will provide the description for the HTTP error code
+     */
+    description: string;
+    /**
+     * String that will describe the error that occurred
+     */
+    errorCodeLabel: string;
+    /**
+     * Links that will display for extra context when receiving particular errors
+     */
+    links: Array<{
+        /**
+         * The text to display for the link
+         */
+        text: string;
+        /**
+         * The link's destination
+         */
+        href: string;
+    }>;
+    /**
+     * This will be for the main title of the HTTP error component
+     */
+    title: string;
+}
 /**
  * HTTP errors are used in an attempt to access something that isn’t available or
 the user doesn’t have permission for. This HTTPError component is generic so you
 can use it when you receive an error code that isn't provided.
  */
-export let HTTPError404: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let HTTPError404: React.ForwardRefExoticComponent<HTTPError404Props & React.RefAttributes<HTMLDivElement>>;
+export {};

package/es/components/HTTPErrors/HTTPError404/HTTPError404.js

@@ -19,7 +19,6 @@ var _excluded = ["className", "description", "errorCodeLabel", "links", "title"]
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--http-errors");
 var componentName = 'HTTPError404';
-
 /**
  * HTTP errors are used in an attempt to access something that isn’t available or
 the user doesn’t have permission for. This HTTPError component is generic so you
@@ -71,6 +70,7 @@ HTTPError404.propTypes = {
   /**
    * Links that will display for extra context when receiving particular errors
    */
+  /**@ts-ignore */
   links: propTypesExports.arrayOf(propTypesExports.shape({
     /**
      * The text to display for the link