@carbon/ibm-products 2.33.0 → 2.35.0

package/lib/components/FilterPanel/FilterPanelSearch/FilterPanelSearch.js

@@ -0,0 +1,99 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var index = require('../../../node_modules/prop-types/index.js');
+var cx = require('classnames');
+var react = require('@carbon/react');
+var devtools = require('../../../global/js/utils/devtools.js');
+var settings = require('../../../settings.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _excluded = ["children", "className", "searchProps"];
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(settings.pkg.prefix, "--filter-panel-search");
+var componentName = 'FilterPanelSearch';
+var defaults = {
+  searchProps: {}
+};
+
+/**
+ * An input field and container to show search results.
+ */
+exports.FilterPanelSearch = /*#__PURE__*/React__default["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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var _useState = React.useState(false),
+    _useState2 = _rollupPluginBabelHelpers.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.
+  React.useEffect(function () {
+    return clearTimeout(timer);
+  }, [timer]);
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    className: cx__default["default"](blockClass, "".concat(blockClass, "__container"), className),
+    onBlur: hideResults,
+    onFocus: showResults,
+    ref: ref
+  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement(react.Search, _rollupPluginBabelHelpers["extends"]({
+    className: "".concat(blockClass, "__input")
+  }, searchProps)), resultsVisible && !!children && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(blockClass, "__results")
+  }, children));
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+exports.FilterPanelSearch = settings.pkg.checkComponentEnabled(exports.FilterPanelSearch, componentName);
+exports.FilterPanelSearch.displayName = componentName;
+exports.FilterPanelSearch.propTypes = {
+  /**
+   * Provide the contents of the FilterPanelSearch.
+   */
+  children: index["default"].node,
+  /**
+   * Optional class to be applied to the containing node.
+   */
+  className: index["default"].string,
+  /**
+   * Props specific to the internal `Search` component.
+   */
+  searchProps: index["default"].shape({
+    /** The label text for the Search icon. */
+    labelText: index["default"].string.isRequired
+  }).isRequired
+};

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

@@ -1,3 +1,8 @@
 export { FilterPanel } from "./FilterPanel";
+export { FilterPanelAccordion } from "./FilterPanelAccordion/FilterPanelAccordion";
+export { FilterPanelAccordionItem } from "./FilterPanelAccordionItem/FilterPanelAccordionItem";
 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/lib/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/lib/components/HTTPErrors/HTTPError403/HTTPError403.js

@@ -28,7 +28,6 @@ var _excluded = ["className", "description", "errorCodeLabel", "links", "title"]
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.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
@@ -80,6 +79,7 @@ exports.HTTPError403.propTypes = {
   /**
    * Links that will display for extra context when receiving particular errors
    */
+  /**@ts-ignore*/
   links: index.propTypesExports.arrayOf(index.propTypesExports.shape({
     /**
      * The text to display for the link

package/lib/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/lib/components/HTTPErrors/HTTPError404/HTTPError404.js

@@ -28,7 +28,6 @@ var _excluded = ["className", "description", "errorCodeLabel", "links", "title"]
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.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
@@ -80,6 +79,7 @@ exports.HTTPError404.propTypes = {
   /**
    * Links that will display for extra context when receiving particular errors
    */
+  /**@ts-ignore */
   links: index.propTypesExports.arrayOf(index.propTypesExports.shape({
     /**
      * The text to display for the link

package/lib/components/ImportModal/ImportModal.d.ts

@@ -1,2 +1,136 @@
-export let ImportModal: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+/**
+ * Copyright IBM Corp. 2021, 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 React, { ReactNode } from 'react';
+type FileType = {
+    fetchError?: undefined | boolean;
+    fileData?: File;
+    fileSize?: number;
+    iconDescription?: string;
+    invalidFileType?: boolean;
+    name: string;
+    status?: string;
+    uuid?: string;
+    invalid?: boolean;
+    errorBody?: string;
+    errorSubject?: string;
+};
+interface ImportModalProps {
+    /**
+     * Specifies the file types that are valid for importing
+     */
+    accept?: string[];
+    /**
+     * Optional class name
+     */
+    className?: string;
+    /**
+     * The default message shown for an import error
+     */
+    defaultErrorBody: string;
+    /**
+     * The default header that is displayed to show an error message
+     */
+    defaultErrorHeader: string;
+    /**
+     * Content that is displayed inside the modal
+     */
+    description?: string;
+    /**
+     * Optional error body to display specifically for a fetch error
+     */
+    fetchErrorBody?: string;
+    /**
+     * Optional error header to display specifically for a fetch error
+     */
+    fetchErrorHeader?: string;
+    /**
+     * Header for the drag and drop box
+     */
+    fileDropHeader?: string;
+    /**
+     * Label for the drag and drop box
+     */
+    fileDropLabel?: string;
+    /**
+     * Label that appears when a file is uploaded to show number of files (1 / 1)
+     */
+    fileUploadLabel?: string;
+    /**
+     * Button icon for import by url button
+     */
+    inputButtonIcon?: boolean;
+    /**
+     * Button text for import by url button
+     */
+    inputButtonText: string;
+    /**
+     * ID for text input
+     */
+    inputId?: string;
+    /**
+     * Header to display above import by url
+     */
+    inputLabel?: string;
+    /**
+     * Placeholder for text input
+     */
+    inputPlaceholder?: string;
+    /**
+     * Optional error message to display specifically for a invalid file type error
+     */
+    invalidFileTypeErrorBody?: string;
+    /**
+     * Optional error header to display specifically for a invalid file type error
+     */
+    invalidFileTypeErrorHeader?: string;
+    /**
+     * Description for delete file icon
+     */
+    invalidIconDescription?: string;
+    /**
+     * File size limit in bytes
+     */
+    maxFileSize?: number;
+    /**
+     * Optional error message to display specifically for a max file size error
+     */
+    maxFileSizeErrorBody?: string;
+    /**
+     * Optional error header to display specifically for a max file size error
+     */
+    maxFileSizeErrorHeader?: string;
+    /**
+     * Specify a handler for closing modal
+     */
+    onClose?(): void;
+    /**
+     * Specify a handler for "submitting" modal. Access the imported file via `file => {}`
+     */
+    onRequestSubmit(files: FileType[]): 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;
+    /**
+     * Specify the text for the primary button
+     */
+    primaryButtonText: string;
+    /**
+     * Specify the text for the secondary button
+     */
+    secondaryButtonText: string;
+    /**
+     * The text displayed at the top of the modal
+     */
+    title: string;
+}
+export declare let ImportModal: React.FC<ImportModalProps>;
+export {};

package/lib/components/ImportModal/ImportModal.js

@@ -85,6 +85,7 @@ exports.ImportModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
   var updateFiles = function updateFiles(newFiles) {
     var updatedFiles = newFiles.map(function (file) {
+      var _newFile$fileSize;
       var newFile = {
         uuid: file.uuid || uuidv4["default"](),
         status: 'edit',
@@ -103,7 +104,7 @@ exports.ImportModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         newFile.errorBody = invalidFileTypeErrorBody || defaultErrorBody;
         newFile.errorSubject = invalidFileTypeErrorHeader || defaultErrorHeader;
         newFile.invalid = true;
-      } else if (maxFileSize && newFile.fileSize > maxFileSize) {
+      } else if (maxFileSize && ((_newFile$fileSize = newFile === null || newFile === void 0 ? void 0 : newFile.fileSize) !== null && _newFile$fileSize !== void 0 ? _newFile$fileSize : 0) > maxFileSize) {
         newFile.errorBody = maxFileSizeErrorBody || defaultErrorBody;
         newFile.errorSubject = maxFileSizeErrorHeader || defaultErrorHeader;
         newFile.invalid = true;
@@ -136,7 +137,7 @@ exports.ImportModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
               _context.next = 10;
               break;
             }
-            throw new Error(response.status);
+            throw new Error("".concat(response.status));
           case 10:
             _context.next = 12;
             return response.blob();

package/lib/components/InlineTip/InlineTip.d.ts

@@ -1,7 +1,95 @@
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * 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, { ReactNode } from 'react';
+type MediaType = {
+    render?: () => ReactNode;
+    filePaths?: string[];
+};
+interface InlineTipProps {
+    /**
+     * Optional "call to action" ghost button or link that can appear
+     * directly below the content. This component comes with pre-styled
+     * elements available to use: `InlineTipLink` and `InlineTipButton`.
+     */
+    action?: ReactNode;
+    /**
+     * Provide the contents of the InlineTip.
+     */
+    children: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Tooltip text and aria label for the Close button icon.
+     */
+    closeIconDescription?: string;
+    /**
+     * The label for the collapse button.
+     * This button is not visible if `media` is specified.
+     */
+    collapseButtonLabel?: string;
+    /**
+     * If set to `true`, it will truncate the body text to
+     * one line and expose an expand/collapse button toggle.
+     *
+     * This feature is disabled if `media` is specified.
+     */
+    collapsible?: boolean;
+    /**
+     * The label for the expand button.
+     * This button is not visible if `media` is specified.
+     */
+    expandButtonLabel?: string;
+    /**
+     * The object describing an image in one of two shapes.
+     * - If a single media element is required, use `{render}`.
+     * - If a stepped animation is required, use `{filePaths}`.
+     *
+     * Enabling `media` disables the `collapsible` feature.
+     */
+    media: MediaType;
+    /**
+     * Set to `true` to arrange the information in a format
+     * that is easier to read in a limited space.
+     */
+    narrow?: boolean;
+    /**
+     * Function to call when the tertiary button is clicked.
+     */
+    onClick?: () => void;
+    /**
+     * Function to call when the InlineTip is closed via the "X" button.
+     */
+    onClose?: () => void;
+    /**
+     * Defining the label will show a the tertiary button with the crossroads icon.
+     * You will still need to define the `onClose` method to trigger a callback.
+     */
+    tertiaryButtonLabel?: string;
+    /**
+     * The title of the InlineTip.
+     */
+    title: string;
+    /**
+     * If true, insert 1 rem of "space" on the left of the component.
+     * This will allow the component's content to line up with other
+     * content on the page under special circumstances.
+     *
+     * This will only be applied when `narrow` is false.
+     */
+    withLeftGutter?: boolean;
+}
 /**
  * Inline tips are messages embedded within other components that
  * provide an ambient way to deliver learning content without
  * distracting the user from their flow.
  */
-export let InlineTip: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let InlineTip: React.ForwardRefExoticComponent<InlineTipProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/InlineTip/InlineTip.js

@@ -44,9 +44,9 @@ var defaults = {
   narrow: false,
   withLeftGutter: false,
   onClick: function onClick() {},
-  onClose: function onClose() {}
+  onClose: function onClose() {},
+  title: 'Use case-specific heading'
 };
-
 /**
  * Inline tips are messages embedded within other components that
  * provide an ambient way to deliver learning content without
@@ -196,6 +196,7 @@ exports.InlineTip.propTypes = {
    *
    * Enabling `media` disables the `collapsible` feature.
    */
+  /**@ts-ignore*/
   media: index["default"].oneOfType([index["default"].shape({
     render: index["default"].func
   }), index["default"].shape({

package/lib/components/Nav/Nav.js

@@ -111,7 +111,7 @@ exports.Nav = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
    */
   var handleListClick = function handleListClick(id) {
     Object.keys(navigationLists.current).forEach(function (key) {
-      if (key !== id && !navigationLists.current[key].isExpandedOnPageload) {
+      if (key !== id && !navigationLists.current[key].isExpandedOnPageLoad) {
         navigationLists.current[key].close();
       }
     });

package/lib/components/Nav/NavList.js

@@ -31,7 +31,7 @@ var defaults = {
   className: '',
   children: null,
   id: '',
-  isExpandedOnPageload: false,
+  isExpandedOnPageLoad: false,
   onItemClick: function onItemClick() {},
   onListClick: function onListClick() {},
   tabIndex: 0,
@@ -50,8 +50,8 @@ var NavList = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
     icon = _ref$icon === void 0 ? defaults.icon : _ref$icon,
     _ref$id = _ref.id,
     id = _ref$id === void 0 ? defaults.id : _ref$id,
-    _ref$isExpandedOnPage = _ref.isExpandedOnPageload,
-    isExpandedOnPageload = _ref$isExpandedOnPage === void 0 ? defaults.isExpandedOnPageload : _ref$isExpandedOnPage,
+    _ref$isExpandedOnPage = _ref.isExpandedOnPageLoad,
+    isExpandedOnPageLoad = _ref$isExpandedOnPage === void 0 ? defaults.isExpandedOnPageLoad : _ref$isExpandedOnPage,
     _ref$navigationItemTi = _ref.navigationItemTitle,
     navigationItemTitle = _ref$navigationItemTi === void 0 ? defaults.navigationItemTitle : _ref$navigationItemTi,
     _ref$onItemClick = _ref.onItemClick,
@@ -62,7 +62,7 @@ var NavList = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
     tabIndex = _ref$tabIndex === void 0 ? defaults.tabIndex : _ref$tabIndex,
     _ref$title = _ref.title,
     title = _ref$title === void 0 ? defaults.title : _ref$title;
-  var _useState = React.useState(isExpandedOnPageload),
+  var _useState = React.useState(isExpandedOnPageLoad),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
@@ -74,7 +74,7 @@ var NavList = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
       var childProps = _ref3.props;
       return childProps.href;
     });
-    setOpen(hrefs.includes(activeHref) || isExpandedOnPageload);
+    setOpen(hrefs.includes(activeHref) || isExpandedOnPageLoad);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -108,7 +108,7 @@ var NavList = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
   React.useImperativeHandle(ref, function () {
     return {
       close: close,
-      isExpandedOnPageload: isExpandedOnPageload
+      isExpandedOnPageLoad: isExpandedOnPageLoad
     };
   });
   var newChildren = React__default["default"].Children.map(children, function (child, index) {
@@ -159,7 +159,7 @@ NavList.propTypes = {
   /** @type {string} ID of a list. */
   id: index.propTypesExports.string,
   /** @type {boolean} State of a list. */
-  isExpandedOnPageload: index.propTypesExports.bool,
+  isExpandedOnPageLoad: index.propTypesExports.bool,
   /** @type {boolean} Title of nav. */
   navigationItemTitle: index.propTypesExports.string,
   /** @type {Function} Click handler for an item. */

package/lib/components/NotificationsPanel/NotificationsPanel.js

@@ -326,7 +326,7 @@ exports.NotificationsPanel = /*#__PURE__*/React__default["default"].forwardRef(f
     id: blockClass,
     className: cx__default["default"](blockClass, className, "".concat(blockClass, "__container")),
     style: {
-      animation: !reducedMotion.matches ? "".concat(open ? 'fade-in 250ms' : 'fade-out 250ms') : null
+      animation: !reducedMotion.matches ? "".concat(open ? 'fade-in 250ms' : 'fade-out forwards 250ms') : null
     },
     onAnimationEnd: onAnimationEnd,
     ref: ref || notificationPanelRef

package/lib/components/OptionsTile/OptionsTile.d.ts

@@ -1,5 +1,79 @@
 /**
- * TODO: A description of the component.
+ * Copyright IBM Corp. 2021, 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.
  */
-export let OptionsTile: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+import React, { ReactNode } from 'react';
+interface OptionsTileProps {
+    /**
+     * Provide content to render as expandable OptionsTile. If no children
+     * are present, the OptionsTile will render as its variant.
+     */
+    children?: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Whether the toggle is enabled or disabled. If nothing is passed,
+     * no toggle will be rendered.
+     */
+    enabled?: boolean;
+    /**
+     * Whether the OptionsTile is in invalid validation state.
+     */
+    invalid?: boolean;
+    /**
+     * Provide a text explaining why the OptionsTile is in invalid state.
+     */
+    invalidText?: string;
+    /**
+     * Whether the OptionsTile is in locked validation state.
+     */
+    locked?: boolean;
+    /**
+     * Provide a text explaining why the OptionsTile is in locked state.
+     */
+    lockedText?: string;
+    /**
+     * Provide a function which will be called each time the user
+     * toggles the open state of the OptionsTile.
+     */
+    onChange?: (value: boolean) => void;
+    /**
+     * Provide a function which will be called each time the user
+     * interacts with the toggle.
+     */
+    onToggle: (value: boolean) => void;
+    /**
+     * Whether the OptionsTile is in open state.
+     */
+    open?: boolean;
+    /**
+     * Define the size of the OptionsTile.
+     */
+    size: 'lg' | 'xl';
+    /**
+     * Optionally provide a text summarizing the current state of the content.
+     */
+    summary?: string;
+    /**
+     * Provide the title for this OptionsTile.
+     */
+    title: string;
+    /**
+     * Optionally provide an id which should be used for the title.
+     */
+    titleId?: string;
+    /**
+     * Whether the OptionsTile is in warning validation state.
+     */
+    warn?: boolean;
+    /**
+     * Provide a text explaining why the OptionsTile is in warning state.
+     */
+    warnText?: string;
+}
+export declare let OptionsTile: React.ForwardRefExoticComponent<OptionsTileProps & React.RefAttributes<HTMLDivElement>>;
+export {};