@carbon/react 1.24.0 → 1.25.0

package/lib/components/Tabs/Tabs.js

@@ -15,6 +15,7 @@ var cx = require('classnames');
 var debounce = require('lodash.debounce');
 var PropTypes = require('prop-types');
 var React = require('react');
+require('../Tooltip/DefinitionTooltip.js');
 var Tooltip = require('../Tooltip/Tooltip.js');
 var useControllableState = require('../../internal/useControllableState.js');
 var useEffectOnce = require('../../internal/useEffectOnce.js');
@@ -24,6 +25,7 @@ var useMergedRefs = require('../../internal/useMergedRefs.js');
 var useNoInteractiveChildren = require('../../internal/useNoInteractiveChildren.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var usePressable = require('./usePressable.js');
+var deprecate = require('../../prop-types/deprecate.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -388,7 +390,7 @@ TabList.propTypes = {
   /**
    * Specify whether or not to use the light component variant
    */
-  light: PropTypes__default["default"].bool,
+  light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `TabList` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
 
   /**
    * Provide the props that describe the right overflow button

package/lib/components/TextArea/TextArea.Skeleton.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Copyright IBM Corp. 2016, 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 PropTypes from 'prop-types';
+import React from 'react';
+export interface TextAreaSkeletonProps extends React.InputHTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify an optional className to add to the form item wrapper.
+     */
+    className?: string;
+    /**
+     * Specify whether the label should be hidden, or not
+     */
+    hideLabel?: boolean;
+}
+declare const TextAreaSkeleton: {
+    (props: TextAreaSkeletonProps): JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to add to the form item wrapper.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the label should be hidden, or not
+         */
+        hideLabel: PropTypes.Requireable<boolean>;
+    };
+};
+export default TextAreaSkeleton;
+export { TextAreaSkeleton };

package/lib/components/TextArea/TextArea.Skeleton.js

@@ -21,12 +21,12 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["hideLabel", "className"];
+var _excluded = ["className", "hideLabel"];
 
-var TextAreaSkeleton = function TextAreaSkeleton(_ref) {
-  var hideLabel = _ref.hideLabel,
-      className = _ref.className,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+var TextAreaSkeleton = function TextAreaSkeleton(props) {
+  var className = props.className,
+      hideLabel = props.hideLabel,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
 
   var prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({

package/lib/components/TextArea/TextArea.d.ts

@@ -6,8 +6,7 @@
  */
 import { ReactNodeLike } from 'prop-types';
 import React from 'react';
-type ExcludedAttributes = '';
-export interface TextAreaProps extends Omit<React.InputHTMLAttributes<HTMLTextAreaElement>, ExcludedAttributes> {
+export interface TextAreaProps extends React.InputHTMLAttributes<HTMLTextAreaElement> {
     /**
      * Provide a custom className that is applied directly to the underlying
      * `<textarea>` node
@@ -90,6 +89,14 @@ export interface TextAreaProps extends Omit<React.InputHTMLAttributes<HTMLTextAr
      * Provide the current value of the `<textarea>`
      */
     value?: string | number;
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: ReactNodeLike;
 }
 declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<unknown>>;
 export default TextArea;

package/lib/components/TextArea/TextArea.js

@@ -29,9 +29,9 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["className", "id", "labelText", "hideLabel", "onChange", "onClick", "invalid", "invalidText", "helperText", "light", "placeholder", "enableCounter", "maxCount"];
+var _excluded = ["className", "id", "labelText", "hideLabel", "onChange", "onClick", "invalid", "invalidText", "helperText", "light", "placeholder", "enableCounter", "maxCount", "warn", "warnText"];
 var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function (props, forwardRef) {
-  var _classNames, _classNames4;
+  var _classNames, _classNames4, _classNames5;
 
   var className = props.className,
       id = props.id,
@@ -46,6 +46,9 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function (props
       placeholder = props.placeholder,
       enableCounter = props.enableCounter,
       maxCount = props.maxCount,
+      _props$warn = props.warn,
+      warn = _props$warn === void 0 ? false : _props$warn,
+      warnText = props.warnText,
       other = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
 
   var prefix = usePrefix.usePrefix();
@@ -107,7 +110,13 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function (props
   }, invalidText, isFluid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
     className: "".concat(prefix, "--text-area__invalid-icon")
   })) : null;
-  var textareaClasses = cx__default["default"]("".concat(prefix, "--text-area"), [enabled ? null : className], (_classNames4 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--text-area--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--text-area--invalid"), invalid), _classNames4));
+  var warning = warn ? /*#__PURE__*/React__default["default"].createElement("div", {
+    role: "alert",
+    className: "".concat(prefix, "--form-requirement")
+  }, warnText, isFluid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
+    className: "".concat(prefix, "--text-area__invalid-icon ").concat(prefix, "--text-area__invalid-icon--warning")
+  })) : null;
+  var textareaClasses = cx__default["default"]("".concat(prefix, "--text-area"), [enabled ? null : className], (_classNames4 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--text-area--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--text-area--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--text-area--warn"), warn), _classNames4));
   var textareaRef = React.useRef(null);
   var ref = useMergedRefs.useMergedRefs([forwardRef, textareaRef]);
   useIsomorphicEffect["default"](function () {
@@ -132,16 +141,18 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function (props
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(prefix, "--text-area__label-wrapper")
   }, label, counter), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: cx__default["default"]("".concat(prefix, "--text-area__wrapper"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--text-area__wrapper--readonly"), other.readOnly)),
+    className: cx__default["default"]("".concat(prefix, "--text-area__wrapper"), (_classNames5 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames5, "".concat(prefix, "--text-area__wrapper--readonly"), other.readOnly), _rollupPluginBabelHelpers.defineProperty(_classNames5, "".concat(prefix, "--text-area__wrapper--warn"), warn), _classNames5)),
     "data-invalid": invalid || null
   }, invalid && !isFluid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
     className: "".concat(prefix, "--text-area__invalid-icon")
+  }), warn && !invalid && !isFluid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
+    className: "".concat(prefix, "--text-area__invalid-icon ").concat(prefix, "--text-area__invalid-icon--warning")
   }), input, /*#__PURE__*/React__default["default"].createElement("span", {
     className: "".concat(prefix, "--text-area__counter-alert"),
     role: "alert"
   }, ariaAnnouncement), isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
     className: "".concat(prefix, "--text-area__divider")
-  }), isFluid && invalid ? error : null), invalid && !isFluid ? error : helper);
+  }), isFluid && invalid ? error : null, isFluid && warn && !invalid ? warning : null), !invalid && !warn && !isFluid ? helper : null, invalid && !isFluid ? error : null, warn && !invalid && !isFluid ? warning : null);
 });
 TextArea.displayName = 'TextArea';
 TextArea.propTypes = {
@@ -243,7 +254,17 @@ TextArea.propTypes = {
   /**
    * Provide the current value of the `<textarea>`
    */
-  value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
+  value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes__default["default"].bool,
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText: PropTypes__default["default"].node
 };
 TextArea.defaultProps = {
   disabled: false,
@@ -255,7 +276,9 @@ TextArea.defaultProps = {
   invalidText: '',
   helperText: '',
   enableCounter: false,
-  maxCount: undefined
+  maxCount: undefined,
+  warn: false,
+  warnText: ''
 };
 var TextArea$1 = TextArea;
 

package/lib/components/TextArea/index.js

@@ -10,8 +10,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var TextArea = require('./TextArea.js');
+var TextArea_Skeleton = require('./TextArea.Skeleton.js');
 
 
 
 exports.TextArea = TextArea["default"];
 exports["default"] = TextArea["default"];
+exports.TextAreaSkeleton = TextArea_Skeleton["default"];

package/lib/components/Toggle/Toggle.js

@@ -74,8 +74,8 @@ function Toggle(_ref) {
 
   var isSm = size === 'sm';
   var sideLabel = hideLabel ? labelText : checked ? labelB : labelA;
-  var renderSideLabel = !(hideLabel && ariaLabelledby);
-  var LabelComponent = ariaLabelledby ? 'div' : 'label';
+  var renderSideLabel = !(hideLabel && !labelText);
+  var LabelComponent = labelText ? 'label' : 'div';
   var wrapperClasses = cx__default["default"]("".concat(prefix, "--toggle"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--toggle--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--toggle--readonly"), readOnly), _classNames), className);
   var labelTextClasses = cx__default["default"]("".concat(prefix, "--toggle__label-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
   var appearanceClasses = cx__default["default"]("".concat(prefix, "--toggle__appearance"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--toggle__appearance--sm"), isSm));
@@ -85,7 +85,7 @@ function Toggle(_ref) {
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
     React__default["default"].createElement("div", {
       className: wrapperClasses,
-      onClick: ariaLabelledby ? function (e) {
+      onClick: !labelText ? function (e) {
         // the underlying <button> can only be activated by keyboard as it is visually hidden;
         // therefore, if this event's target is the <button>, it had to be triggered by
         // the keyboard event which already calls handleClick. if we wouldn't catch this, the
@@ -151,10 +151,7 @@ Toggle.propTypes = {
 
   /**
    * If true, the side labels (props.labelA and props.labelB) will be replaced by
-   * props.labelText, so that the toggle doesn't render a top label. In order to fully
-   * hide any labels, you can use props['aria-labelledby'] to refer to another element
-   * that labels the toggle. props.labelText would no longer be required in that case
-   * and can therefore be omitted.
+   * props.labelText (if passed), so that the toggle doesn't render a top label.
    */
   hideLabel: PropTypes__default["default"].bool,
 
@@ -175,19 +172,11 @@ Toggle.propTypes = {
 
   /**
    * Provide the text that will be read by a screen reader when visiting this
-   * control. This is required unless 'aria-labelledby' is provided instead
+   * control. This should be provided unless 'aria-labelledby' is set instead
+   * or you use an external <label> element with its "for" attribute set to the
+   * toggle's id.
    */
-  labelText: function labelText(props) {
-    if (!props['aria-labelledby'] && !props.labelText) {
-      return new Error('labelText property is required if no aria-labelledby is provided.');
-    }
-
-    for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      rest[_key - 1] = arguments[_key];
-    }
-
-    return PropTypes__default["default"].node.apply(PropTypes__default["default"], [props].concat(rest));
-  },
+  labelText: PropTypes__default["default"].string,
 
   /**
    * Provide an event listener that is called when the control is clicked

package/lib/components/Tooltip/DefinitionTooltip.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Copyright IBM Corp. 2016, 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 from 'react';
+import { PopoverAlignment } from '../Popover';
+export interface DefinitionTooltipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'classname' | 'children' | 'type'> {
+    /**
+     * Specify how the trigger should align with the tooltip
+     */
+    align?: PopoverAlignment;
+    /**
+     * The `children` prop will be used as the value that is being defined
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Specify whether the tooltip should be open when it first renders
+     */
+    defaultOpen?: boolean;
+    /**
+     * The `definition` prop is used as the content inside of the tooltip that
+     * appears when a user interacts with the element rendered by the `children`
+     * prop
+     */
+    definition: React.ReactNode;
+    /**
+     * Provide a value that will be assigned as the id of the tooltip
+     */
+    id?: string;
+    /**
+     * Specifies whether or not the `DefinitionTooltip` should open on hover or not
+     */
+    openOnHover?: boolean;
+    /**
+     * @deprecated [Deprecated in v11] Please use the `definition` prop instead.
+     *
+     * Provide the text that will be displayed in the tooltip when it is rendered.
+     */
+    tooltipText?: React.ReactNode;
+    /**
+     * The CSS class name of the trigger element
+     */
+    triggerClassName?: string;
+}
+declare const DefinitionTooltip: React.FC<DefinitionTooltipProps>;
+export { DefinitionTooltip };

package/lib/components/Tooltip/DefinitionTooltip.js

@@ -28,7 +28,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _excluded = ["align", "className", "children", "definition", "defaultOpen", "id", "openOnHover", "tooltipText", "triggerClassName"];
 
-function DefinitionTooltip(_ref) {
+var DefinitionTooltip = function DefinitionTooltip(_ref) {
   var _ref$align = _ref.align,
       align = _ref$align === void 0 ? 'bottom-left' : _ref$align,
       className = _ref.className,
@@ -85,7 +85,7 @@ function DefinitionTooltip(_ref) {
     className: "".concat(prefix, "--definition-tooltip"),
     id: tooltipId
   }, tooltipText !== null && tooltipText !== void 0 ? tooltipText : definition));
-}
+};
 
 DefinitionTooltip.propTypes = {
   /**

package/lib/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,117 @@
+/**
+ * Copyright IBM Corp. 2016, 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 PropTypes from 'prop-types';
+import React from 'react';
+import { PopoverAlignment } from '../Popover';
+import { PolymorphicProps } from '../../types/common';
+interface TooltipBaseProps {
+    /**
+     * Specify how the trigger should align with the tooltip
+     */
+    align?: PopoverAlignment;
+    /**
+     * Pass in the child to which the tooltip will be applied
+     */
+    children?: React.ReactElement;
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Determines wether the tooltip should close when inner content is activated (click, Enter or Space)
+     */
+    closeOnActivation?: boolean;
+    /**
+     * Specify whether the tooltip should be open when it first renders
+     */
+    defaultOpen?: boolean;
+    /**
+     * Provide the description to be rendered inside of the Tooltip. The
+     * description will use `aria-describedby` and will describe the child node
+     * in addition to the text rendered inside of the child. This means that if you
+     * have text in the child node, that it will be announced alongside the
+     * description to the screen reader.
+     *
+     * Note: if label and description are both provided, label will be used and
+     * description will not be used
+     */
+    description?: React.ReactNode;
+    /**
+     * Specify the duration in milliseconds to delay before displaying the tooltip
+     */
+    enterDelayMs?: number;
+    /**
+     * Provide the label to be rendered inside of the Tooltip. The label will use
+     * `aria-labelledby` and will fully describe the child node that is provided.
+     * This means that if you have text in the child node, that it will not be
+     * announced to the screen reader.
+     *
+     * Note: if label and description are both provided, description will not be
+     * used
+     */
+    label?: React.ReactNode;
+    /**
+     * Specify the duration in milliseconds to delay before hiding the tooltip
+     */
+    leaveDelayMs?: number;
+}
+export type TooltipProps<T extends React.ElementType> = PolymorphicProps<T, TooltipBaseProps>;
+declare function Tooltip<T extends React.ElementType>({ align, className: customClassName, children, label, description, enterDelayMs, leaveDelayMs, defaultOpen, closeOnActivation, ...rest }: TooltipProps<T>): JSX.Element;
+declare namespace Tooltip {
+    var propTypes: {
+        /**
+         * Specify how the trigger should align with the tooltip
+         */
+        align: PropTypes.Requireable<string>;
+        /**
+         * Pass in the child to which the tooltip will be applied
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Determines wether the tooltip should close when inner content is activated (click, Enter or Space)
+         */
+        closeOnActivation: PropTypes.Requireable<boolean>;
+        /**
+         * Specify whether the tooltip should be open when it first renders
+         */
+        defaultOpen: PropTypes.Requireable<boolean>;
+        /**
+         * Provide the description to be rendered inside of the Tooltip. The
+         * description will use `aria-describedby` and will describe the child node
+         * in addition to the text rendered inside of the child. This means that if you
+         * have text in the child node, that it will be announced alongside the
+         * description to the screen reader.
+         *
+         * Note: if label and description are both provided, label will be used and
+         * description will not be used
+         */
+        description: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify the duration in milliseconds to delay before displaying the tooltip
+         */
+        enterDelayMs: PropTypes.Requireable<number>;
+        /**
+         * Provide the label to be rendered inside of the Tooltip. The label will use
+         * `aria-labelledby` and will fully describe the child node that is provided.
+         * This means that if you have text in the child node, that it will not be
+         * announced to the screen reader.
+         *
+         * Note: if label and description are both provided, description will not be
+         * used
+         */
+        label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify the duration in milliseconds to delay before hiding the tooltip
+         */
+        leaveDelayMs: PropTypes.Requireable<number>;
+    };
+}
+export { Tooltip };

package/lib/components/Tooltip/Tooltip.js

@@ -113,10 +113,12 @@ function Tooltip(_ref) {
 
   useNoInteractiveChildren.useNoInteractiveChildren(tooltipRef, 'The Tooltip component must have no interactive content rendered by the' + '`label` or `description` prop');
   React.useEffect(function () {
-    var interactiveContent = useNoInteractiveChildren.getInteractiveContent(containerRef.current);
+    if (containerRef !== null && containerRef.current) {
+      var interactiveContent = useNoInteractiveChildren.getInteractiveContent(containerRef.current);
 
-    if (!interactiveContent) {
-      setOpen(false);
+      if (!interactiveContent) {
+        setOpen(false);
+      }
     }
   });
   return /*#__PURE__*/React__default["default"].createElement(index.Popover, _rollupPluginBabelHelpers["extends"]({}, rest, {
@@ -128,7 +130,7 @@ function Tooltip(_ref) {
     onMouseLeave: onMouseLeave,
     open: open,
     ref: containerRef
-  }), /*#__PURE__*/React__default["default"].cloneElement(child, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, triggerProps), getChildEventHandlers(child.props))), /*#__PURE__*/React__default["default"].createElement(index.PopoverContent, {
+  }), child !== undefined ? /*#__PURE__*/React__default["default"].cloneElement(child, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, triggerProps), getChildEventHandlers(child.props))) : null, /*#__PURE__*/React__default["default"].createElement(index.PopoverContent, {
     "aria-hidden": "true",
     className: "".concat(prefix, "--tooltip-content"),
     id: id,

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

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2016, 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 { DefinitionTooltip } from './DefinitionTooltip';
+import { Tooltip } from './Tooltip';
+export { DefinitionTooltip, Tooltip };

package/lib/index.d.ts

@@ -107,6 +107,8 @@ export * from './components/Layer';
 export { LayoutDirection as unstable_LayoutDirection, useLayoutDirection as unstable_useLayoutDirection, } from './components/Layout';
 export { Menu as unstable_Menu, MenuItem as unstable_MenuItem, MenuItemDivider as unstable_MenuItemDivider, MenuItemGroup as unstable_MenuItemGroup, MenuItemRadioGroup as unstable_MenuItemRadioGroup, MenuItemSelectable as unstable_MenuItemSelectable, } from './components/Menu';
 export { OverflowMenuV2 as unstable_OverflowMenuV2 } from './components/OverflowMenuV2';
+export { ComboButton as unstable_ComboButton } from './components/ComboButton';
+export { MenuButton as unstable_MenuButton } from './components/MenuButton';
 export { PageSelector as unstable_PageSelector, Pagination as unstable_Pagination, } from './components/Pagination/experimental';
 export * from './components/Popover';
 export * from './components/ProgressBar';