@deque/cauldron-react 5.12.0 → 5.13.0-canary.7b5349dc

package/lib/index.js

@@ -4,14 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
-var PropTypes = require('prop-types');
 var classNames = require('classnames');
 var nextId = require('react-id-generator');
 var keyname = require('keyname');
 var reactDom = require('react-dom');
 var FocusTrap = require('focus-trap-react');
 var reactPopper = require('react-popper');
-var focusable = require('focusable');
 var SyntaxHighlighter = require('react-syntax-highlighter/dist/cjs/light');
 var js = require('react-syntax-highlighter/dist/cjs/languages/hljs/javascript');
 var css = require('react-syntax-highlighter/dist/cjs/languages/hljs/css');
@@ -21,12 +19,10 @@ var yaml = require('react-syntax-highlighter/dist/cjs/languages/hljs/yaml');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var nextId__default = /*#__PURE__*/_interopDefaultLegacy(nextId);
 var keyname__default = /*#__PURE__*/_interopDefaultLegacy(keyname);
 var FocusTrap__default = /*#__PURE__*/_interopDefaultLegacy(FocusTrap);
-var focusable__default = /*#__PURE__*/_interopDefaultLegacy(focusable);
 var SyntaxHighlighter__default = /*#__PURE__*/_interopDefaultLegacy(SyntaxHighlighter);
 var js__default = /*#__PURE__*/_interopDefaultLegacy(js);
 var css__default = /*#__PURE__*/_interopDefaultLegacy(css);
@@ -46,13 +42,6 @@ var Main = /** @class */ (function (_super) {
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         mainRef: function () { }
     };
-    Main.propTypes = {
-        children: PropTypes__default["default"].node.isRequired,
-        mainRef: PropTypes__default["default"].oneOfType([
-            PropTypes__default["default"].func,
-            PropTypes__default["default"].shape({ current: PropTypes__default["default"].any })
-        ])
-    };
     return Main;
 }(React.Component));
 
@@ -69,13 +58,6 @@ var Layout = /** @class */ (function (_super) {
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         layoutRef: function () { }
     };
-    Layout.propTypes = {
-        children: PropTypes__default["default"].node.isRequired,
-        layoutRef: PropTypes__default["default"].oneOfType([
-            PropTypes__default["default"].func,
-            PropTypes__default["default"].shape({ current: PropTypes__default["default"].any })
-        ])
-    };
     return Layout;
 }(React__default["default"].Component));
 
@@ -111,22 +93,6 @@ var Workspace = /** @class */ (function (_super) {
         layoutRef: function () { },
         noSideBar: false
     };
-    Workspace.propTypes = {
-        children: PropTypes__default["default"].oneOfType([
-            PropTypes__default["default"].array,
-            PropTypes__default["default"].object,
-            PropTypes__default["default"].string
-        ]).isRequired,
-        workspaceRef: PropTypes__default["default"].oneOfType([
-            PropTypes__default["default"].func,
-            PropTypes__default["default"].shape({ current: PropTypes__default["default"].any })
-        ]),
-        layoutRef: PropTypes__default["default"].oneOfType([
-            PropTypes__default["default"].func,
-            PropTypes__default["default"].shape({ current: PropTypes__default["default"].any })
-        ]),
-        noSideBar: PropTypes__default["default"].bool
-    };
     return Workspace;
 }(React__default["default"].Component));
 
@@ -354,12 +320,6 @@ var Icon = React.forwardRef(function (_a, ref) {
         label && React__default["default"].createElement(Offscreen, null, label),
         IconSVG && React__default["default"].createElement(IconSVG, null)));
 });
-Icon.propTypes = {
-    label: PropTypes__default["default"].string,
-    className: PropTypes__default["default"].string,
-    // @ts-expect-error
-    type: PropTypes__default["default"].string.isRequired
-};
 Icon.displayName = 'Icon';
 
 var PanelTrigger = function (_a) {
@@ -376,15 +336,6 @@ var PanelTrigger = function (_a) {
                 : children),
             React__default["default"].createElement(Icon, { type: open ? iconExpanded : iconCollapsed }))));
 };
-PanelTrigger.propTypes = {
-    children: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].node]),
-    open: PropTypes__default["default"].bool,
-    iconExpanded: PropTypes__default["default"].string,
-    iconCollapsed: PropTypes__default["default"].string,
-    heading: PropTypes__default["default"].shape({
-        level: PropTypes__default["default"].number
-    })
-};
 PanelTrigger.displayName = 'PanelTrigger';
 var PanelTrigger$1 = React__default["default"].memo(PanelTrigger);
 
@@ -421,8 +372,7 @@ var ExpandCollapsePanel = /** @class */ (function (_super) {
         _this.animateOpen = function () {
             var panel = _this.panel.current;
             var animationTiming = _this.props.animationTiming;
-            var prefersReducedMotion = matchMedia('(prefers-reduced-motion: reduce)')
-                .matches;
+            var prefersReducedMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
             if (!animationTiming || prefersReducedMotion) {
                 _this.setState({ isAnimating: false });
                 return;
@@ -445,8 +395,7 @@ var ExpandCollapsePanel = /** @class */ (function (_super) {
         _this.animateClose = function () {
             var panel = _this.panel.current;
             var animationTiming = _this.props.animationTiming;
-            var prefersReducedMotion = matchMedia('(prefers-reduced-motion: reduce)')
-                .matches;
+            var prefersReducedMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
             if (!animationTiming || prefersReducedMotion) {
                 _this.setState({ isAnimating: false });
                 return;
@@ -512,13 +461,6 @@ var ExpandCollapsePanel = /** @class */ (function (_super) {
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         onToggle: function () { }
     };
-    ExpandCollapsePanel.propTypes = {
-        open: PropTypes__default["default"].bool,
-        children: PropTypes__default["default"].node.isRequired,
-        className: PropTypes__default["default"].string,
-        animationTiming: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].bool]),
-        onToggle: PropTypes__default["default"].func
-    };
     return ExpandCollapsePanel;
 }(React__default["default"].Component));
 
@@ -559,20 +501,6 @@ var Accordion = function (_a) {
 Accordion.displayName = 'Accordion';
 AccordionContent.displayName = 'AccordionContent';
 AccordionTrigger.displayName = 'AccordionTrigger';
-Accordion.propTypes = {
-    children: PropTypes__default["default"].node,
-    className: PropTypes__default["default"].string
-};
-AccordionTrigger.propTypes = {
-    children: PropTypes__default["default"].node,
-    heading: PropTypes__default["default"].shape({
-        level: PropTypes__default["default"].number
-    })
-};
-AccordionContent.propTypes = {
-    children: PropTypes__default["default"].node.isRequired,
-    className: PropTypes__default["default"].string
-};
 
 var Scrim = /** @class */ (function (_super) {
     tslib.__extends(Scrim, _super);
@@ -635,9 +563,6 @@ var Scrim = /** @class */ (function (_super) {
         }
         return (React__default["default"].createElement("div", { ref: function (el) { return (_this.el = el); }, className: "Scrim ".concat(animationClass) }));
     };
-    Scrim.propTypes = {
-        show: PropTypes__default["default"].bool.isRequired
-    };
     return Scrim;
 }(React__default["default"].Component));
 
@@ -707,16 +632,6 @@ var MenuItem = /** @class */ (function (_super) {
         onKeyDown: function () { },
         autoClickLink: true
     };
-    MenuItem.propTypes = {
-        children: PropTypes__default["default"].node.isRequired,
-        menuItemRef: PropTypes__default["default"].oneOfType([
-            PropTypes__default["default"].func,
-            PropTypes__default["default"].shape({ current: PropTypes__default["default"].any })
-        ]),
-        onClick: PropTypes__default["default"].func,
-        onKeyDown: PropTypes__default["default"].func,
-        autoClickLink: PropTypes__default["default"].bool
-    };
     return MenuItem;
 }(React.Component));
 
@@ -837,12 +752,6 @@ var TopBar$1 = /** @class */ (function (_super) {
         var _a = this.props, children = _a.children, className = _a.className; _a.thin; _a.hasTrigger; tslib.__rest(_a, ["children", "className", "thin", "hasTrigger"]);
         return (React__default["default"].createElement("ul", { role: "menubar", className: className }, React.Children.map(children, this.renderChild)));
     };
-    TopBar.propTypes = {
-        children: PropTypes__default["default"].node.isRequired,
-        className: PropTypes__default["default"].string,
-        thin: PropTypes__default["default"].bool,
-        hasTrigger: PropTypes__default["default"].bool
-    };
     TopBar.defaultProps = {
         thin: false,
         hasTrigger: false
@@ -863,10 +772,6 @@ var TopBarTrigger = function (_a) {
     return (React__default["default"].createElement(MenuItem, tslib.__assign({ "aria-haspopup": "true", className: classNames__default["default"]('TopBar__menu-trigger', className) }, other), children));
 };
 TopBarTrigger.displayName = 'TopBarTrigger';
-TopBarTrigger.propTypes = {
-    children: PropTypes__default["default"].node.isRequired,
-    className: PropTypes__default["default"].string
-};
 
 var menuAlignment = function (type) {
     switch (type) {
@@ -883,11 +788,6 @@ var OptionsMenuWrapper = function (_a) {
     var className = _a.className, align = _a.align, other = tslib.__rest(_a, ["className", "align"]);
     return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('OptionsMenu', menuAlignment(align), className) }, other)));
 };
-OptionsMenuWrapper.propTypes = {
-    children: PropTypes__default["default"].node.isRequired,
-    className: PropTypes__default["default"].string,
-    align: PropTypes__default["default"].oneOf(['left', 'right'])
-};
 
 var ClickOutsideListener = /** @class */ (function (_super) {
     tslib.__extends(ClickOutsideListener, _super);
@@ -955,13 +855,6 @@ var ClickOutsideListener = /** @class */ (function (_super) {
         mouseEvent: 'click',
         touchEvent: 'touchend'
     };
-    ClickOutsideListener.propTypes = {
-        children: PropTypes__default["default"].node,
-        target: PropTypes__default["default"].any,
-        onClickOutside: PropTypes__default["default"].func.isRequired,
-        mouseEvent: PropTypes__default["default"].oneOf(['mousedown', 'click', 'mouseup', false]),
-        touchEvent: PropTypes__default["default"].oneOf(['touchstart', 'touchend', false])
-    };
     return ClickOutsideListener;
 }(React__default["default"].Component));
 
@@ -1085,18 +978,6 @@ var OptionsMenuList = /** @class */ (function (_super) {
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         onClose: function () { }
     };
-    OptionsMenuList.propTypes = {
-        show: PropTypes__default["default"].bool,
-        children: PropTypes__default["default"].node.isRequired,
-        onClose: PropTypes__default["default"].func,
-        className: PropTypes__default["default"].string,
-        onSelect: PropTypes__default["default"].func,
-        closeOnSelect: PropTypes__default["default"].bool,
-        menuRef: PropTypes__default["default"].oneOfType([
-            PropTypes__default["default"].func,
-            PropTypes__default["default"].shape({ current: PropTypes__default["default"].any })
-        ])
-    };
     return OptionsMenuList;
 }(React__default["default"].Component));
 
@@ -1156,19 +1037,6 @@ var OptionsMenu = /** @class */ (function (_super) {
         onSelect: function () { },
         align: 'right'
     };
-    OptionsMenu.propTypes = {
-        trigger: PropTypes__default["default"].func,
-        children: PropTypes__default["default"].node.isRequired,
-        onClose: PropTypes__default["default"].func,
-        className: PropTypes__default["default"].string,
-        onSelect: PropTypes__default["default"].func,
-        closeOnSelect: PropTypes__default["default"].bool,
-        menuRef: PropTypes__default["default"].oneOfType([
-            PropTypes__default["default"].func,
-            PropTypes__default["default"].shape({ current: PropTypes__default["default"].any })
-        ]),
-        align: PropTypes__default["default"].oneOf(['left', 'right'])
-    };
     return OptionsMenu;
 }(React.Component));
 
@@ -1196,11 +1064,6 @@ var OptionsMenuItemComponent = /** @class */ (function (_super) {
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         onSelect: function () { }
     };
-    OptionsMenuItemComponent.propTypes = {
-        disabled: PropTypes__default["default"].bool,
-        className: PropTypes__default["default"].string,
-        onSelect: PropTypes__default["default"].func
-    };
     return OptionsMenuItemComponent;
 }(React__default["default"].Component));
 var OptionsMenuItem = React__default["default"].forwardRef(function OptionsMenuItem(props, ref) {
@@ -1215,14 +1078,6 @@ function OptionsMenuTriggerComponent(_a) {
     var className = _a.className, triggerRef = _a.triggerRef, other = tslib.__rest(_a, ["className", "triggerRef"]);
     return (React__default["default"].createElement("button", tslib.__assign({ type: "button", "aria-haspopup": "menu", ref: triggerRef }, other, { className: classNames__default["default"]('OptionsMenu__trigger', className) })));
 }
-OptionsMenuTriggerComponent.propTypes = {
-    children: PropTypes__default["default"].node.isRequired,
-    className: PropTypes__default["default"].string,
-    triggerRef: PropTypes__default["default"].oneOfType([
-        PropTypes__default["default"].func,
-        PropTypes__default["default"].shape({ current: PropTypes__default["default"].any })
-    ])
-};
 var OptionsMenuTrigger = React__default["default"].forwardRef(function OptionsMenuTrigger(props, ref) {
     return React__default["default"].createElement(OptionsMenuTriggerComponent, tslib.__assign({}, props, { triggerRef: ref }));
 });
@@ -1295,10 +1150,6 @@ var TopBarMenu = /** @class */ (function (_super) {
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         menuItemRef: function () { }
     };
-    TopBarMenu.propTypes = {
-        id: PropTypes__default["default"].string.isRequired,
-        children: PropTypes__default["default"].node.isRequired
-    };
     return TopBarMenu;
 }(React__default["default"].Component));
 
@@ -1346,13 +1197,6 @@ var NavBar = function (_a) {
         showNavItems && (React__default["default"].createElement("ul", { onKeyDown: handleKeyDown, id: menuId }, children))));
 };
 NavBar.displayName = 'NavBar';
-NavBar.propTypes = {
-    children: PropTypes__default["default"].node.isRequired,
-    className: PropTypes__default["default"].string,
-    collapsed: PropTypes__default["default"].bool,
-    navTriggerLabel: PropTypes__default["default"].string,
-    propId: PropTypes__default["default"].string
-};
 
 var NavItem = function (_a) {
     var children = _a.children, active = _a.active, _b = _a["aria-current"], ariaCurrent = _b === void 0 ? true : _b, other = tslib.__rest(_a, ["children", "active", 'aria-current']);
@@ -1365,9 +1209,6 @@ var NavItem = function (_a) {
         }) }, additionalProps, other), children));
 };
 NavItem.displayName = 'NavItem';
-NavItem.propTypes = {
-    children: PropTypes__default["default"].node.isRequired
-};
 
 /**
  * Selector for NATURALLY focusable elements
@@ -1479,12 +1320,6 @@ var SideBar = /** @class */ (function (_super) {
         className: '',
         show: false
     };
-    SideBar.propTypes = {
-        children: PropTypes__default["default"].node.isRequired,
-        onDismiss: PropTypes__default["default"].func.isRequired,
-        className: PropTypes__default["default"].string,
-        show: PropTypes__default["default"].bool
-    };
     return SideBar;
 }(React.Component));
 
@@ -1504,10 +1339,6 @@ SideBarItem.displayName = 'SideBarItem';
 SideBarItem.defaultProps = {
     autoClickLink: true
 };
-SideBarItem.propTypes = {
-    children: PropTypes__default["default"].node.isRequired,
-    autoClickLink: PropTypes__default["default"].bool
-};
 
 /**
  * Handles aria-hidden for dialogs.
@@ -1561,6 +1392,7 @@ var Dialog = /** @class */ (function (_super) {
     tslib.__extends(Dialog, _super);
     function Dialog(props) {
         var _this = _super.call(this, props) || this;
+        _this.headingId = nextId__default["default"]('dialog-title-');
         _this.close = _this.close.bind(_this);
         _this.focusHeading = _this.focusHeading.bind(_this);
         _this.handleClickOutside = _this.handleClickOutside.bind(_this);
@@ -1617,10 +1449,10 @@ var Dialog = /** @class */ (function (_super) {
                             return;
                         }
                         setRef(dialogRef, el);
-                    } }, other),
+                    }, "aria-labelledby": this.headingId }, other),
                     React__default["default"].createElement("div", { className: "Dialog__inner" },
                         React__default["default"].createElement("div", { className: "Dialog__header" },
-                            React__default["default"].createElement(Heading, { className: "Dialog__heading", ref: function (el) { return (_this.heading = el); }, tabIndex: -1 }, typeof heading === 'object' && 'text' in heading
+                            React__default["default"].createElement(Heading, { className: "Dialog__heading", ref: function (el) { return (_this.heading = el); }, tabIndex: -1, id: this.headingId }, typeof heading === 'object' && 'text' in heading
                                 ? heading.text
                                 : heading),
                             close),
@@ -1652,19 +1484,6 @@ var Dialog = /** @class */ (function (_super) {
         forceAction: false,
         closeButtonText: 'Close'
     };
-    Dialog.propTypes = {
-        className: PropTypes__default["default"].string,
-        show: PropTypes__default["default"].bool,
-        dialogRef: PropTypes__default["default"].oneOfType([
-            PropTypes__default["default"].func,
-            PropTypes__default["default"].shape({ current: PropTypes__default["default"].any })
-        ]),
-        onClose: PropTypes__default["default"].func,
-        forceAction: PropTypes__default["default"].bool,
-        heading: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].node]).isRequired,
-        closeButtonText: PropTypes__default["default"].string,
-        portal: PropTypes__default["default"].any
-    };
     return Dialog;
 }(React__default["default"].Component));
 var DialogContent = function (_a) {
@@ -1676,11 +1495,6 @@ var DialogContent = function (_a) {
         }) }, other), children));
 };
 DialogContent.displayName = 'DialogContent';
-DialogContent.propTypes = {
-    className: PropTypes__default["default"].string,
-    children: PropTypes__default["default"].node,
-    align: PropTypes__default["default"].string
-};
 var DialogFooter = function (_a) {
     var children = _a.children, className = _a.className, align = _a.align, other = tslib.__rest(_a, ["children", "className", "align"]);
     return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('Dialog__footer', className, {
@@ -1690,11 +1504,6 @@ var DialogFooter = function (_a) {
         }) }, other), children));
 };
 DialogFooter.displayName = 'DialogFooter';
-DialogFooter.propTypes = {
-    className: PropTypes__default["default"].string,
-    children: PropTypes__default["default"].node,
-    align: PropTypes__default["default"].string
-};
 
 var Alert = function (_a) {
     var children = _a.children, className = _a.className, _b = _a.variant, variant = _b === void 0 ? 'default' : _b, heading = _a.heading, other = tslib.__rest(_a, ["children", "className", "variant", "heading"]);
@@ -1774,17 +1583,6 @@ var SkipLink = /** @class */ (function (_super) {
         skipText: 'Skip to',
         targetText: 'Main Content'
     };
-    SkipLink.propTypes = {
-        // enforce a valid id hash string (example: '#foo')
-        target: function (props, propName, componentName) {
-            var value = props[propName];
-            if (!value || typeof value !== 'string' || value[0] !== '#') {
-                return new Error("Invalid prop ".concat(propName, " supplied to ").concat(componentName, " (must be string starting with \"#\")"));
-            }
-        },
-        skipText: PropTypes__default["default"].string,
-        targetText: PropTypes__default["default"].string
-    };
     return SkipLink;
 }(React__default["default"].Component));
 
@@ -1941,29 +1739,14 @@ function Tooltip(_a) {
         : null));
 }
 Tooltip.displayName = 'Tooltip';
-Tooltip.propTypes = {
-    children: PropTypes__default["default"].node.isRequired,
-    target: PropTypes__default["default"].any.isRequired,
-    association: PropTypes__default["default"].oneOf(['aria-labelledby', 'aria-describedby']),
-    show: PropTypes__default["default"].bool,
-    placement: PropTypes__default["default"].string,
-    variant: PropTypes__default["default"].string,
-    portal: PropTypes__default["default"].any
-};
 var TooltipHead = function (_a) {
     var className = _a.className, other = tslib.__rest(_a, ["className"]);
     return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('TooltipHead', className) }, other)));
 };
-TooltipHead.propTypes = {
-    className: PropTypes__default["default"].string
-};
 var TooltipContent = function (_a) {
     var className = _a.className, other = tslib.__rest(_a, ["className"]);
     return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('TooltipContent', className) }, other)));
 };
-TooltipContent.propTypes = {
-    className: PropTypes__default["default"].string
-};
 
 /**
  * Unfortunately, eslint does not recognize that this Polymorphic component has a displayName set
@@ -2002,345 +1785,8 @@ var IconButton = React.forwardRef(function (_a, ref) {
             disabled && React__default["default"].createElement(Offscreen, null, label)),
         !disabled && (React__default["default"].createElement(Tooltip, { target: internalRef, placement: tooltipPlacement, variant: tooltipVariant, portal: tooltipPortal, association: "aria-labelledby", hideElementOnHidden: true }, label))));
 });
-IconButton.propTypes = {
-    // @ts-expect-error
-    as: PropTypes__default["default"].elementType,
-    // @ts-expect-error
-    icon: PropTypes__default["default"].string.isRequired,
-    label: PropTypes__default["default"].node.isRequired,
-    // @ts-expect-error
-    tooltipPlacement: PropTypes__default["default"].string,
-    // @ts-expect-error
-    tooltipVariant: PropTypes__default["default"].string,
-    tooltipPortal: PropTypes__default["default"].any,
-    // @ts-expect-error
-    variant: PropTypes__default["default"].string
-};
 IconButton.displayName = 'IconButton';
 
-var i = 0;
-var randomId = function () {
-    var num = Math.floor(Math.random() * 10000) + 1;
-    return "x_".concat(i++, "_").concat(num);
-};
-
-/*
- * Recursively walks React element tree removing any id props for descendant nodes
- */
-function recursivelyRemoveIds(element) {
-    var walker = function (element) {
-        if (!React.isValidElement(element)) {
-            return element;
-        }
-        return React.cloneElement(element, {
-            // we can't remove attributes, but react treats undefined/null as "absent"
-            id: null
-        }, React.Children.map(element.props.children, function (childElement) {
-            return walker(childElement);
-        }));
-    };
-    return Array.isArray(element)
-        ? React.Children.map(element, walker)
-        : walker(element);
-}
-
-var Pointout = /** @class */ (function (_super) {
-    tslib.__extends(Pointout, _super);
-    function Pointout(props) {
-        var _this = _super.call(this, props) || this;
-        // Mirror the offscreen focus to the visible content
-        _this.attachOffscreenListeners = function () {
-            var _a = _this, offscreenRef = _a.offscreenRef, offscreenContentRef = _a.offscreenContentRef, handleOffscreenFocusIn = _a.handleOffscreenFocusIn, handleOffscreenFocusOut = _a.handleOffscreenFocusOut, handleOffscreenContentFocusIn = _a.handleOffscreenContentFocusIn, handleOffscreenContentFocusOut = _a.handleOffscreenContentFocusOut;
-            if (offscreenRef) {
-                offscreenRef.removeEventListener('focusin', handleOffscreenFocusIn);
-                offscreenRef.addEventListener('focusin', handleOffscreenFocusIn);
-                offscreenRef.removeEventListener('focusout', handleOffscreenFocusOut);
-                offscreenRef.addEventListener('focusout', handleOffscreenFocusOut);
-            }
-            // Manually handle offscreen content since it has a -1 tab index
-            if (offscreenContentRef) {
-                offscreenContentRef.removeEventListener('focusin', handleOffscreenContentFocusIn);
-                offscreenContentRef.addEventListener('focusin', handleOffscreenContentFocusIn);
-                offscreenContentRef.removeEventListener('focusout', handleOffscreenContentFocusOut);
-                offscreenContentRef.addEventListener('focusout', handleOffscreenContentFocusOut);
-            }
-        };
-        _this.handleOffscreenContentFocusIn = function (_a) {
-            var target = _a.target;
-            if (target === _this.offscreenContentRef) {
-                _this.setState({ offscreenContentFocus: true });
-            }
-        };
-        _this.handleOffscreenContentFocusOut = function (_a) {
-            var target = _a.target;
-            if (target === _this.offscreenContentRef) {
-                _this.setState({ offscreenContentFocus: false });
-            }
-        };
-        _this.handleOffscreenFocusIn = function (_a) {
-            var e_1, _b;
-            var target = _a.target;
-            var _c = _this, offscreenRef = _c.offscreenRef, visibleRef = _c.visibleRef, getFocusableElements = _c.getFocusableElements;
-            var offscreenFocusable = getFocusableElements(offscreenRef);
-            var visibleFocusable = getFocusableElements(visibleRef);
-            var elementIndex = offscreenFocusable.findIndex(function (element) { return element === target; });
-            if (elementIndex === -1 || !visibleFocusable[elementIndex]) {
-                return;
-            }
-            try {
-                // Tag focusable elements
-                for (var visibleFocusable_1 = tslib.__values(visibleFocusable), visibleFocusable_1_1 = visibleFocusable_1.next(); !visibleFocusable_1_1.done; visibleFocusable_1_1 = visibleFocusable_1.next()) {
-                    var element = visibleFocusable_1_1.value;
-                    element.setAttribute('data-focusable', 'true');
-                    element.setAttribute('tabindex', '-1');
-                }
-            }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
-            finally {
-                try {
-                    if (visibleFocusable_1_1 && !visibleFocusable_1_1.done && (_b = visibleFocusable_1.return)) _b.call(visibleFocusable_1);
-                }
-                finally { if (e_1) throw e_1.error; }
-            }
-            visibleFocusable[elementIndex].classList.add('Pointout--focus-active');
-        };
-        _this.handleOffscreenFocusOut = function (_a) {
-            var target = _a.target;
-            var _b = _this, offscreenRef = _b.offscreenRef, visibleRef = _b.visibleRef, getFocusableElements = _b.getFocusableElements;
-            var offscreenFocusable = getFocusableElements(offscreenRef);
-            var visibleFocusable = getFocusableElements(visibleRef);
-            var elementIndex = offscreenFocusable.findIndex(function (element) { return element === target; });
-            if (elementIndex === -1 || !visibleFocusable[elementIndex]) {
-                return;
-            }
-            visibleFocusable[elementIndex].classList.remove('Pointout--focus-active');
-        };
-        _this.positionRelativeToTarget = function () {
-            var _a = _this.props, target = _a.target, portal = _a.portal, arrowPosition = _a.arrowPosition, position = _a.position;
-            if (!target) {
-                return;
-            }
-            var targetNode = (target === null || target === void 0 ? void 0 : target.current) ||
-                target;
-            var portalNode = (portal === null || portal === void 0 ? void 0 : portal.current) ||
-                portal;
-            // eslint-disable-next-line prefer-const
-            var _b = targetNode.getBoundingClientRect(), top = _b.top, left = _b.left, width = _b.width, height = _b.height;
-            if (portalNode && portalNode !== document.body) {
-                // If the portal is not placed on document.body
-                // position the FTPO relative to the portal
-                var rect = portalNode.getBoundingClientRect();
-                top -= rect.top - portalNode.scrollTop;
-                left -= rect.left - portalNode.scrollLeft;
-            }
-            var _c = tslib.__read(arrowPosition.split('-'), 1), arrowBoxSide = _c[0];
-            var style;
-            switch (arrowBoxSide) {
-                case 'right':
-                    style = {
-                        left: "".concat(left, "px"),
-                        top: "".concat(position === 'center'
-                            ? top + height / 2
-                            : position === 'start'
-                                ? top
-                                : top + height, "px")
-                    };
-                    break;
-                case 'bottom':
-                    style = {
-                        top: "".concat(top, "px"),
-                        left: "".concat(position === 'center'
-                            ? left + width / 2
-                            : position === 'start'
-                                ? left
-                                : left + width, "px")
-                    };
-                    break;
-                case 'left':
-                    style = {
-                        left: "".concat(left + width, "px"),
-                        top: "".concat(position === 'center'
-                            ? top + height / 2
-                            : position === 'start'
-                                ? top
-                                : top + height, "px")
-                    };
-                    break;
-                case 'top':
-                default:
-                    style = {
-                        top: "".concat(top + height, "px"),
-                        left: "".concat(position === 'center'
-                            ? left + width / 2
-                            : position === 'start'
-                                ? left
-                                : left + width, "px")
-                    };
-                    break;
-            }
-            _this.setState({ style: style });
-        };
-        _this.state = { show: true, style: {} };
-        _this.onCloseClick = _this.onCloseClick.bind(_this);
-        return _this;
-    }
-    Pointout.prototype.getFocusableElements = function (root) {
-        return root
-            ? Array.from(root.querySelectorAll("".concat(focusable__default["default"], ", [data-focusable]")))
-            : [];
-    };
-    Pointout.prototype.componentDidMount = function () {
-        var _this = this;
-        var _a = this, positionRelativeToTarget = _a.positionRelativeToTarget, attachOffscreenListeners = _a.attachOffscreenListeners;
-        positionRelativeToTarget();
-        this.setState({ headingId: randomId() });
-        // debounce resize event to rAF
-        this.resizeDebounce = function () {
-            if (_this.resizeDebounceId) {
-                cancelAnimationFrame(_this.resizeDebounceId);
-            }
-            _this.resizeDebounceId = requestAnimationFrame(function () {
-                _this.positionRelativeToTarget();
-            });
-        };
-        window.addEventListener('resize', this.resizeDebounce);
-        attachOffscreenListeners();
-        // If the component mounts before fonts have finished loading, ensure that we
-        // reposition the element when all fonts are ready
-        if (document && document.fonts && document.fonts.ready) {
-            // experiemental apis aren't in typescript's lib file :(
-            // https://github.com/Microsoft/TypeScript/issues/30984
-            document.fonts.ready.then(function () { return _this.positionRelativeToTarget(); });
-        }
-    };
-    Pointout.prototype.forceUpdate = function () {
-        var _this = this;
-        _super.prototype.forceUpdate.call(this);
-        requestAnimationFrame(function () { return _this.positionRelativeToTarget(); });
-    };
-    Pointout.prototype.componentWillUnmount = function () {
-        var _a = this, resizeDebounce = _a.resizeDebounce, offscreenRef = _a.offscreenRef, offscreenContentRef = _a.offscreenContentRef, handleOffscreenFocusIn = _a.handleOffscreenFocusIn, handleOffscreenFocusOut = _a.handleOffscreenFocusOut, handleOffscreenContentFocusIn = _a.handleOffscreenContentFocusIn, handleOffscreenContentFocusOut = _a.handleOffscreenContentFocusOut;
-        if (resizeDebounce) {
-            window.removeEventListener('resize', resizeDebounce);
-        }
-        if (offscreenRef) {
-            offscreenRef.removeEventListener('focusin', handleOffscreenFocusIn);
-            offscreenRef.removeEventListener('focusout', handleOffscreenFocusOut);
-        }
-        if (offscreenContentRef) {
-            offscreenContentRef.removeEventListener('focusin', handleOffscreenContentFocusIn);
-            offscreenContentRef.removeEventListener('focusout', handleOffscreenContentFocusOut);
-        }
-    };
-    Pointout.prototype.componentDidUpdate = function (nextProps) {
-        var _a = this, props = _a.props, attachOffscreenListeners = _a.attachOffscreenListeners, positionRelativeToTarget = _a.positionRelativeToTarget;
-        if (props.arrowPosition !== nextProps.arrowPosition ||
-            props.portal !== nextProps.portal ||
-            props.target !== nextProps.target ||
-            props.disableOffscreenPointout !== nextProps.disableOffscreenPointout) {
-            attachOffscreenListeners();
-            positionRelativeToTarget();
-        }
-    };
-    Pointout.prototype.render = function () {
-        var _a, _b;
-        var _this = this;
-        var _c;
-        var _d = this.state, show = _d.show, style = _d.style, offscreenContentFocus = _d.offscreenContentFocus, headingId = _d.headingId;
-        var _e = this.props, heading = _e.heading, ftpoRef = _e.ftpoRef, children = _e.children, noArrow = _e.noArrow, dismissText = _e.dismissText, previousText = _e.previousText, nextText = _e.nextText, showNext = _e.showNext, showPrevious = _e.showPrevious, arrowPosition = _e.arrowPosition, position = _e.position, className = _e.className, target = _e.target, disableOffscreenPointout = _e.disableOffscreenPointout, previousButtonProps = _e.previousButtonProps, nextButtonProps = _e.nextButtonProps, closeButtonProps = _e.closeButtonProps;
-        if (!show || !isBrowser()) {
-            return null;
-        }
-        var portal = this.props.portal || document.body;
-        var FTPO = (React__default["default"].createElement("div", { className: classNames__default["default"](className, 'Pointout', (_a = {
-                    'Pointout--no-arrow': noArrow,
-                    'Pointout--auto': !!target
-                },
-                _a["Pointout__arrow--".concat(arrowPosition)] = !!arrowPosition && !noArrow,
-                _a["Pointout--".concat(position)] = !!target,
-                _a)), style: style, role: target ? undefined : 'region', "aria-labelledby": heading ? headingId : undefined, "aria-hidden": !!target && !disableOffscreenPointout, ref: function (el) { return (_this.visibleRef = el); } },
-            noArrow ? null : (React__default["default"].createElement("div", { className: classNames__default["default"]('Pointout__arrow', (_b = {},
-                    _b["Pointout__arrow--".concat(arrowPosition)] = !!arrowPosition && !noArrow,
-                    _b)) },
-                React__default["default"].createElement("div", { className: "Pointout__arrow-pointer" }))),
-            React__default["default"].createElement("div", { className: "Pointout__box" },
-                React__default["default"].createElement("button", tslib.__assign({ className: "Pointout__dismiss", type: "button", "aria-label": dismissText, onClick: this.onCloseClick, tabIndex: !!target && !disableOffscreenPointout ? -1 : 0 }, closeButtonProps),
-                    React__default["default"].createElement(Icon, { type: "close", "aria-hidden": "true" })),
-                React__default["default"].createElement("div", { className: classNames__default["default"]('Pointout__content', {
-                        'Pointout__content--focus-active': offscreenContentFocus
-                    }), tabIndex: !target ? -1 : undefined, ref: ftpoRef },
-                    heading &&
-                        React__default["default"].cloneElement(heading, {
-                            id: target ? null : headingId,
-                            className: classNames__default["default"]('Pointout__heading', (_c = heading.props) === null || _c === void 0 ? void 0 : _c.className)
-                        }),
-                    target ? recursivelyRemoveIds(children) : children),
-                showPrevious && (React__default["default"].createElement("button", tslib.__assign({ className: "Pointout__previous", type: "button", "aria-label": previousText, tabIndex: !!target && !disableOffscreenPointout ? -1 : 0 }, previousButtonProps),
-                    React__default["default"].createElement(Icon, { type: "arrow-left", "aria-hidden": "true" }))),
-                showNext && (React__default["default"].createElement("button", tslib.__assign({ className: "Pointout__next", type: "button", "aria-label": nextText, tabIndex: !!target && !disableOffscreenPointout ? -1 : 0 }, nextButtonProps),
-                    React__default["default"].createElement(Icon, { type: "arrow-right", "aria-hidden": "true" }))))));
-        if (target && portal && !disableOffscreenPointout) {
-            return (React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["default"].createElement("div", { className: "Offscreen", role: "region", "aria-labelledby": heading ? headingId : undefined, ref: function (el) { return (_this.offscreenRef = el); } },
-                    React__default["default"].createElement("button", tslib.__assign({ type: "button", "aria-label": dismissText, onClick: this.onCloseClick }, closeButtonProps)),
-                    React__default["default"].createElement("div", { className: "Pointout__content", tabIndex: -1, ref: function (el) { return (_this.offscreenContentRef = el); } },
-                        heading &&
-                            React__default["default"].cloneElement(heading, {
-                                id: headingId
-                            }),
-                        children),
-                    showPrevious && (React__default["default"].createElement("button", tslib.__assign({ type: "button", "aria-label": previousText }, previousButtonProps))),
-                    showNext && (React__default["default"].createElement("button", tslib.__assign({ type: "button", "aria-label": nextText }, nextButtonProps)))),
-                reactDom.createPortal(FTPO, portal)));
-        }
-        return target && portal ? reactDom.createPortal(FTPO, portal) : FTPO;
-    };
-    Pointout.prototype.onCloseClick = function () {
-        var _a;
-        this.setState({ show: false });
-        (_a = this.props) === null || _a === void 0 ? void 0 : _a.onClose();
-    };
-    Pointout.defaultProps = {
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        ftpoRef: function () { },
-        noArrow: false,
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        onClose: function () { },
-        dismissText: 'dismiss',
-        previousText: 'previous',
-        nextText: 'next',
-        arrowPosition: 'top-left',
-        position: 'center'
-    };
-    Pointout.propTypes = {
-        heading: PropTypes__default["default"].node,
-        children: PropTypes__default["default"].node.isRequired,
-        ftpRef: PropTypes__default["default"].oneOfType([
-            PropTypes__default["default"].func,
-            PropTypes__default["default"].shape({ current: PropTypes__default["default"].any })
-        ]),
-        noArrow: function (props, propName) {
-            if (props[propName] === true && typeof props['target'] !== 'undefined') {
-                return new Error('A "target" prop with "noArrow=true" is not currently supported.');
-            }
-        },
-        arrowPosition: PropTypes__default["default"].string,
-        onClose: PropTypes__default["default"].func,
-        dismissText: PropTypes__default["default"].string,
-        className: PropTypes__default["default"].string,
-        target: PropTypes__default["default"].oneOfType([
-            PropTypes__default["default"].func,
-            PropTypes__default["default"].shape({ current: PropTypes__default["default"].any })
-        ]),
-        disableOffscreenPointout: PropTypes__default["default"].bool,
-        portal: PropTypes__default["default"].any,
-        previousButtonProps: PropTypes__default["default"].any,
-        nextButtonProps: PropTypes__default["default"].any,
-        closeButtonProps: PropTypes__default["default"].any
-    };
-    return Pointout;
-}(React__default["default"].Component));
-
 /**
  * A querySelectorAll that returns a normal array rather than live node list.
  *
@@ -2514,27 +1960,6 @@ var Toast = /** @class */ (function (_super) {
         show: false,
         dismissible: true
     };
-    Toast.propTypes = {
-        // the ui to be added as the message of the toast
-        children: PropTypes__default["default"].node.isRequired,
-        // "confirmation", "caution", or "action-needed"
-        type: PropTypes__default["default"].string.isRequired,
-        // function to be exectued when toast is dismissed
-        onDismiss: PropTypes__default["default"].func,
-        // text to be added as the aria-label of the "x" dismiss button (default: "Dismiss")
-        dismissText: PropTypes__default["default"].string,
-        // an optional ref function to get a handle on the toast element
-        toastRef: PropTypes__default["default"].oneOfType([
-            PropTypes__default["default"].func,
-            PropTypes__default["default"].shape({ current: PropTypes__default["default"].any })
-        ]),
-        // whether or not to focus the toast
-        focus: PropTypes__default["default"].bool,
-        // whether or not to show the toast
-        show: PropTypes__default["default"].bool,
-        // whether or not the toast is dismissible
-        dismissible: PropTypes__default["default"].bool
-    };
     Toast.displayName = 'Toast';
     return Toast;
 }(React__default["default"].Component));
@@ -2548,20 +1973,10 @@ var Link = function (_a) {
             'Button--thin': thin
         }) }, other), children));
 };
-Link.propTypes = {
-    children: PropTypes__default["default"].node,
-    className: PropTypes__default["default"].string,
-    variant: PropTypes__default["default"].string,
-    thin: PropTypes__default["default"].bool,
-    linkRef: PropTypes__default["default"].oneOfType([
-        PropTypes__default["default"].func,
-        PropTypes__default["default"].shape({ current: PropTypes__default["default"].any })
-    ])
-};
 Link.displayName = 'Link';
 
 var Loader = React__default["default"].forwardRef(function (_a, ref) {
-    var className = _a.className, _b = _a.variant, variant = _b === void 0 ? 'small' : _b, label = _a.label, props = tslib.__rest(_a, ["className", "variant", "label"]);
+    var className = _a.className, label = _a.label, props = tslib.__rest(_a, ["className", "label"]);
     if (label === null || label === void 0 ? void 0 : label.length) {
         props['role'] = 'alert';
         props.children = React__default["default"].createElement(Offscreen, null, label);
@@ -2569,13 +1984,16 @@ var Loader = React__default["default"].forwardRef(function (_a, ref) {
     else {
         props['aria-hidden'] = true;
     }
-    return (React__default["default"].createElement("div", tslib.__assign({ ref: ref, className: classNames__default["default"]('Loader', className, variant === 'large' && 'Loader--large', variant === 'small' && 'Loader--small') }, props)));
+    return (React__default["default"].createElement("div", tslib.__assign({ ref: ref, className: classNames__default["default"]('Loader', className) }, props)));
 });
-Loader.propTypes = {
-    className: PropTypes__default["default"].string
-};
 Loader.displayName = 'Loader';
 
+var i = 0;
+var randomId = function () {
+    var num = Math.floor(Math.random() * 10000) + 1;
+    return "x_".concat(i++, "_").concat(num);
+};
+
 /**
  * Adds an id to a token list attribute if its not already present in the list
  */
@@ -2709,65 +2127,53 @@ var RadioGroup = React.forwardRef(function (_a, ref) {
     inputs.current = [];
     return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"](className, { 'Radio--inline': inline }), role: "radiogroup", ref: ref }, other), radioButtons));
 });
-RadioGroup.propTypes = {
-    name: PropTypes__default["default"].string,
-    radios: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
-        value: PropTypes__default["default"].string.isRequired,
-        id: PropTypes__default["default"].string.isRequired,
-        label: PropTypes__default["default"].string.isRequired,
-        labelDescription: PropTypes__default["default"].string
-    }).isRequired).isRequired,
-    hasLabel: function (props, _propName, componentName) {
-        if (!props['aria-label'] && !props['aria-labelledby']) {
-            return new Error("".concat(componentName, " must have an \"aria-label\" or \"aria-labelledby\" prop"));
-        }
-        return null;
-    },
-    className: PropTypes__default["default"].string,
-    defaultValue: PropTypes__default["default"].string,
-    onChange: PropTypes__default["default"].func
-};
 RadioGroup.displayName = 'RadioGroup';
 
-var Card = function (_a) {
-    var className = _a.className, variant = _a.variant, other = tslib.__rest(_a, ["className", "variant"]);
-    return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"](className, {
-            'Card--simple': variant === 'simple',
-            Card: !variant
-        }) }, other)));
-};
-Card.displayName = 'Card';
-Card.propTypes = {
-    className: PropTypes__default["default"].string,
-    variant: PropTypes__default["default"].string
-};
-
-var CardHeader = function (_a) {
-    var className = _a.className, other = tslib.__rest(_a, ["className"]);
-    return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('Card__header', className) }, other)));
-};
-CardHeader.displayName = 'CardHeader';
-CardHeader.propTypes = {
-    className: PropTypes__default["default"].string
-};
+var Panel = React.forwardRef(function (_a, ref) {
+    var _b;
+    var children = _a.children, collapsed = _a.collapsed, className = _a.className, heading = _a.heading, _c = _a.padding, padding = _c === void 0 ? true : _c, other = tslib.__rest(_a, ["children", "collapsed", "className", "heading", "padding"]);
+    var headingId = !heading
+        ? undefined
+        : typeof heading === 'object' && 'id' in heading
+            ? heading.id
+            : randomId();
+    var Heading = function () {
+        if (!headingId) {
+            return null;
+        }
+        var HeadingComponent = "h".concat(heading &&
+            typeof heading === 'object' &&
+            'level' in heading &&
+            !!heading.level
+            ? heading.level
+            : 2);
+        return (React__default["default"].createElement(HeadingComponent, { id: headingId, className: "Panel__Heading" }, heading && typeof heading === 'object' && 'text' in heading
+            ? heading.text
+            : heading));
+    };
+    return (React__default["default"].createElement("section", tslib.__assign({ "aria-labelledby": headingId, className: classNames__default["default"]('Panel', className, (_b = {},
+            _b['Panel--collapsed'] = collapsed,
+            _b['Panel--no-padding'] = !padding,
+            _b)), ref: ref }, other),
+        React__default["default"].createElement(Heading, null),
+        children));
+});
+Panel.displayName = 'Panel';
 
-var CardContent = function (_a) {
-    var className = _a.className, other = tslib.__rest(_a, ["className"]);
-    return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('Card__content', className) }, other)));
-};
-CardContent.displayName = 'CardContent';
-CardContent.propTypes = {
-    className: PropTypes__default["default"].string
-};
+var PanelContent = React.forwardRef(function (_a, ref) {
+    var _b;
+    var children = _a.children, className = _a.className, _c = _a.padding, padding = _c === void 0 ? true : _c, otherProps = tslib.__rest(_a, ["children", "className", "padding"]);
+    return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('Panel__Content', className, (_b = {},
+            _b['Panel__Content--no-padding'] = !padding,
+            _b)), ref: ref }, otherProps), children));
+});
+PanelContent.displayName = 'PanelContent';
 
-var CardFooter = function (_a) {
-    var className = _a.className, other = tslib.__rest(_a, ["className"]);
-    return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('Card__footer', className) }, other)));
-};
-CardFooter.displayName = 'CardFooter';
-CardFooter.propTypes = {
-    className: PropTypes__default["default"].string
-};
+var PanelHeader = React.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, otherProps = tslib.__rest(_a, ["children", "className"]);
+    return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('Panel__Header', className), ref: ref }, otherProps), children));
+});
+PanelHeader.displayName = 'PanelHeader';
 
 var RadioCardGroup = function (_a) {
     var name = _a.name, radios = _a.radios, defaultValue = _a.defaultValue, value = _a.value, 
@@ -2801,7 +2207,7 @@ var RadioCardGroup = function (_a) {
         var isChecked = currentValue === radioValue;
         var isFocused = focusIndex === index;
         return (React__default["default"].createElement("div", { className: classNames__default["default"]('RadioCard'), key: index },
-            React__default["default"].createElement(Card, { variant: "simple", className: classNames__default["default"]('RadioCardGroup__Card RadioCard__overlay', {
+            React__default["default"].createElement(Panel, { className: classNames__default["default"]('RadioCardGroup__Card RadioCard__overlay', {
                     'RadioCard__overlay--focused': isFocused,
                     'RadioCard__overlay--checked': isChecked,
                     'RadioCard__overlay--disabled': disabled
@@ -2816,7 +2222,7 @@ var RadioCardGroup = function (_a) {
                         handleChange(radioValue);
                         onChange(radio, (_a = inputs.current) === null || _a === void 0 ? void 0 : _a[index]);
                     }, disabled: disabled, checked: isChecked }, other)),
-                React__default["default"].createElement(CardContent, null,
+                React__default["default"].createElement(PanelContent, null,
                     React__default["default"].createElement("div", { className: classNames__default["default"]('RadioCardGroup__Checked') }, isChecked && (React__default["default"].createElement(Icon, { className: classNames__default["default"]('RadioCardGroup__Icon'), type: cardIcon }))),
                     React__default["default"].createElement("div", { className: classNames__default["default"]('RadioCardGroup__Base') },
                         React__default["default"].createElement("div", { className: classNames__default["default"]('RadioCardGroup__Image') }, cardImg),
@@ -2828,24 +2234,6 @@ var RadioCardGroup = function (_a) {
     inputs.current = [];
     return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('RadioCardGroup'), role: "radiogroup" }, other), radioButtons));
 };
-RadioCardGroup.propTypes = {
-    name: PropTypes__default["default"].string,
-    radios: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
-        value: PropTypes__default["default"].string.isRequired,
-        id: PropTypes__default["default"].string.isRequired,
-        label: PropTypes__default["default"].string.isRequired,
-        cardImg: PropTypes__default["default"].element.isRequired,
-        cardIcon: PropTypes__default["default"].string.isRequired
-    })).isRequired,
-    hasLabel: function (props, propName, componentName) {
-        if (!props['aria-label'] && !props['aria-labelledby']) {
-            return new Error("".concat(componentName, " must have an \"aria-label\" or \"aria-labelledby\" prop"));
-        }
-    },
-    className: PropTypes__default["default"].string,
-    defaultValue: PropTypes__default["default"].string,
-    onChange: PropTypes__default["default"].func
-};
 RadioCardGroup.displayName = 'RadioCardGroup';
 
 var Checkbox = React.forwardRef(function (_a, ref) {
@@ -3001,22 +2389,6 @@ var TextField = /** @class */ (function (_super) {
         requiredText: 'Required',
         multiline: false
     };
-    TextField.propTypes = {
-        label: PropTypes__default["default"].node.isRequired,
-        id: PropTypes__default["default"].string,
-        error: PropTypes__default["default"].node,
-        defaultValue: PropTypes__default["default"].string,
-        value: PropTypes__default["default"].string,
-        onChange: PropTypes__default["default"].func,
-        fieldRef: PropTypes__default["default"].oneOfType([
-            PropTypes__default["default"].func,
-            PropTypes__default["default"].shape({ current: PropTypes__default["default"].any })
-        ]),
-        required: PropTypes__default["default"].bool,
-        requiredText: PropTypes__default["default"].string,
-        multiline: PropTypes__default["default"].bool,
-        'aria-describedby': PropTypes__default["default"].string
-    };
     return TextField;
 }(React__default["default"].Component));
 
@@ -3058,13 +2430,6 @@ var Code = function (_a) {
         }), tabIndex: scrollableRegion ? 0 : undefined }), children));
 };
 Code.displayName = 'Code';
-Code.propTypes = {
-    children: PropTypes__default["default"].string.isRequired,
-    language: PropTypes__default["default"].oneOf(['javascript', 'css', 'html', 'yaml']),
-    className: PropTypes__default["default"].string,
-    tabIndex: PropTypes__default["default"].number,
-    scrollable: PropTypes__default["default"].bool
-};
 
 function AxeLoader() {
     return (React__default["default"].createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", x: "0", y: "0", viewBox: "0 0 800 800" },
@@ -3095,7 +2460,7 @@ function useSharedRef(ref) {
 }
 
 var LoaderOverlay = React.forwardRef(function (_a, ref) {
-    var className = _a.className, variant = _a.variant, label = _a.label, children = _a.children, focusOnInitialRender = _a.focusOnInitialRender, _b = _a.focusTrap, focusTrap = _b === void 0 ? false : _b, other = tslib.__rest(_a, ["className", "variant", "label", "children", "focusOnInitialRender", "focusTrap"]);
+    var className = _a.className, label = _a.label, children = _a.children, focusOnInitialRender = _a.focusOnInitialRender, _b = _a.focusTrap, focusTrap = _b === void 0 ? false : _b, other = tslib.__rest(_a, ["className", "label", "children", "focusOnInitialRender", "focusTrap"]);
     var overlayRef = useSharedRef(ref);
     React.useEffect(function () {
         var isolator = overlayRef.current
@@ -3126,33 +2491,19 @@ var LoaderOverlay = React.forwardRef(function (_a, ref) {
         }
         : {};
     return (React__default["default"].createElement(Wrapper, tslib.__assign({}, wrapperProps),
-        React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('Loader__overlay', className, variant === 'large'
-                ? 'Loader__overlay--large'
-                : variant === 'small'
-                    ? 'Loader__overlay--small'
-                    : ''), ref: overlayRef, tabIndex: -1 }, other),
+        React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('Loader__overlay', className), ref: overlayRef, tabIndex: -1 }, other),
             React__default["default"].createElement("div", { className: "Loader__overlay__loader" },
-                React__default["default"].createElement(Loader, { variant: variant }),
+                React__default["default"].createElement(Loader, null),
                 React__default["default"].createElement(AxeLoader, null)),
             label ? (React__default["default"].createElement("span", { className: "Loader__overlay__label" }, label)) : null,
             children)));
 });
-LoaderOverlay.propTypes = {
-    className: PropTypes__default["default"].string,
-    variant: PropTypes__default["default"].oneOf(['large', 'small']),
-    label: PropTypes__default["default"].string,
-    focusOnInitialRender: PropTypes__default["default"].bool,
-    children: PropTypes__default["default"].node
-};
 LoaderOverlay.displayName = 'LoaderOverlay';
 
 var Line = function (_a) {
     var className = _a.className, other = tslib.__rest(_a, ["className"]);
     return (React__default["default"].createElement("hr", tslib.__assign({ className: classNames__default["default"]('Line', className) }, other)));
 };
-Line.propTypes = {
-    className: PropTypes__default["default"].string
-};
 Line.displayName = 'Line';
 
 var TagLabel = function (_a) {
@@ -3160,19 +2511,11 @@ var TagLabel = function (_a) {
     return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('Tag__label', className) }, other), children));
 };
 TagLabel.displayName = 'TagLabel';
-TagLabel.propTypes = {
-    children: PropTypes__default["default"].node.isRequired,
-    className: PropTypes__default["default"].string
-};
 var Tag = function (_a) {
     var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
     return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('Tag', className) }, other), children));
 };
 Tag.displayName = 'Tag';
-Tag.propTypes = {
-    children: PropTypes__default["default"].node.isRequired,
-    className: PropTypes__default["default"].string
-};
 
 var TagButton = React__default["default"].forwardRef(function (_a, ref) {
     var label = _a.label, value = _a.value, icon = _a.icon, className = _a.className, rest = tslib.__rest(_a, ["label", "value", "icon", "className"]);
@@ -3188,41 +2531,24 @@ var Table = function (_a) {
     return (React__default["default"].createElement("table", tslib.__assign({ className: classNames__default["default"]('Table', variant === 'border' && 'Table--border', className) }, other), children));
 };
 Table.displayName = 'Table';
-Table.propTypes = {
-    children: PropTypes__default["default"].node.isRequired,
-    className: PropTypes__default["default"].string,
-    variant: PropTypes__default["default"].string
-};
 
 var TableBody = function (_a) {
     var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
     return (React__default["default"].createElement("tbody", tslib.__assign({ className: classNames__default["default"]('TableBody', className) }, other), children));
 };
 TableBody.displayName = 'TableBody';
-TableBody.propTypes = {
-    children: PropTypes__default["default"].node.isRequired,
-    className: PropTypes__default["default"].string
-};
 
 var TableCell = function (_a) {
     var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
     return (React__default["default"].createElement("td", tslib.__assign({ className: classNames__default["default"]('TableCell', className) }, other), children));
 };
 TableCell.displayName = 'TableCell';
-TableCell.propTypes = {
-    children: PropTypes__default["default"].node.isRequired,
-    className: PropTypes__default["default"].string
-};
 
 var TableHead = function (_a) {
     var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
     return (React__default["default"].createElement("thead", tslib.__assign({ className: classNames__default["default"]('TableHead', className) }, other), children));
 };
 TableHead.displayName = 'TableHead';
-TableHead.propTypes = {
-    children: PropTypes__default["default"].node.isRequired,
-    className: PropTypes__default["default"].string
-};
 
 var TableHeader = function (_a) {
     var children = _a.children, sortDirection = _a.sortDirection, onSort = _a.onSort, className = _a.className, _b = _a.sortAscendingAnnouncement, sortAscendingAnnouncement = _b === void 0 ? 'sorted ascending' : _b, _c = _a.sortDescendingAnnouncement, sortDescendingAnnouncement = _c === void 0 ? 'sorted descending' : _c, other = tslib.__rest(_a, ["children", "sortDirection", "onSort", "className", "sortAscendingAnnouncement", "sortDescendingAnnouncement"]);
@@ -3244,45 +2570,24 @@ var TableHeader = function (_a) {
             React__default["default"].createElement("span", { role: "status", "aria-live": "polite" }, announcement)))) : (children)));
 };
 TableHeader.displayName = 'TableHeader';
-TableHeader.propTypes = {
-    children: PropTypes__default["default"].node.isRequired,
-    sortDirection: PropTypes__default["default"].string,
-    onSort: PropTypes__default["default"].func,
-    className: PropTypes__default["default"].string,
-    sortAscendingAnnouncement: PropTypes__default["default"].string,
-    sortDescendingAnnouncement: PropTypes__default["default"].string
-};
 
 var TableRow = function (_a) {
     var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
     return (React__default["default"].createElement("tr", tslib.__assign({ className: classNames__default["default"]('TableRow', className) }, other), children));
 };
 TableRow.displayName = 'TableRow';
-TableRow.propTypes = {
-    children: PropTypes__default["default"].node.isRequired,
-    className: PropTypes__default["default"].string
-};
 
 var TableFooter = function (_a) {
     var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
     return (React__default["default"].createElement("tfoot", tslib.__assign({ className: classNames__default["default"]('TableFooter', className) }, other), children));
 };
 TableFooter.displayName = 'TableFooter';
-TableFooter.propTypes = {
-    children: PropTypes__default["default"].node.isRequired,
-    className: PropTypes__default["default"].string
-};
 
 var Tab = React__default["default"].forwardRef(function (_a, ref) {
     var children = _a.children, propId = _a.id; _a.target; var other = tslib.__rest(_a, ["children", "id", "target"]);
     return (React__default["default"].createElement("li", tslib.__assign({ id: propId, ref: ref, role: "tab" }, other), children));
 });
 Tab.displayName = 'Tab';
-Tab.propTypes = {
-    target: PropTypes__default["default"].any.isRequired,
-    id: PropTypes__default["default"].string,
-    children: PropTypes__default["default"].node
-};
 
 /**
  * Hook to be used similarly to the React.Component#componentDidMount.
@@ -3398,15 +2703,6 @@ var Tabs = function (_a) {
         React__default["default"].createElement("ul", tslib.__assign({ role: "tablist", className: "Tablist" }, labelProp, { onKeyDown: handleKeyDown }), tabComponents)));
 };
 Tabs.displayName = 'Tabs';
-Tabs.propTypes = {
-    children: PropTypes__default["default"].node.isRequired,
-    'aria-label': PropTypes__default["default"].string,
-    'aria-labelledby': PropTypes__default["default"].string,
-    initialActiveIndex: PropTypes__default["default"].number,
-    thin: PropTypes__default["default"].bool,
-    orientation: PropTypes__default["default"].string,
-    className: PropTypes__default["default"].string
-};
 
 var TabPanel = React.forwardRef(function (_a, ref) {
     var children = _a.children, propId = _a.id, className = _a.className, other = tslib.__rest(_a, ["children", "id", "className"]);
@@ -3414,16 +2710,7 @@ var TabPanel = React.forwardRef(function (_a, ref) {
     return (React__default["default"].createElement("div", tslib.__assign({ role: "tabpanel", className: classNames__default["default"]('TabPanel', className), id: id, ref: ref }, other), children));
 });
 TabPanel.displayName = 'TabPanel';
-TabPanel.propTypes = {
-    id: PropTypes__default["default"].string,
-    children: PropTypes__default["default"].node,
-    className: PropTypes__default["default"].string
-};
 
-var commonPropTypes = {
-    children: PropTypes__default["default"].node.isRequired,
-    className: PropTypes__default["default"].string
-};
 var DescriptionList = function (_a) {
     var children = _a.children, className = _a.className, _b = _a.collapsed, collapsed = _b === void 0 ? false : _b, other = tslib.__rest(_a, ["children", "className", "collapsed"]);
     return (React__default["default"].createElement("dl", tslib.__assign({ className: classNames__default["default"]('DescriptionList', className, {
@@ -3431,25 +2718,21 @@ var DescriptionList = function (_a) {
         }) }, other), children));
 };
 DescriptionList.displayName = 'DescriptionList';
-DescriptionList.propTypes = commonPropTypes;
 var DescriptionListItem = function (_a) {
     var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
     return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('DescriptionList__item', className) }, other), children));
 };
 DescriptionListItem.displayName = 'DescriptionListItem';
-DescriptionListItem.propTypes = commonPropTypes;
 var DescriptionTerm = function (_a) {
     var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
     return (React__default["default"].createElement("dt", tslib.__assign({ className: classNames__default["default"]('DescriptionList__term', className) }, other), children));
 };
 DescriptionTerm.displayName = 'DescriptionTerm';
-DescriptionTerm.propTypes = commonPropTypes;
 var DescriptionDetails = function (_a) {
     var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
     return (React__default["default"].createElement("dd", tslib.__assign({ className: classNames__default["default"]('DescriptionList__details', className) }, other), children));
 };
 DescriptionDetails.displayName = 'DescriptionDetails';
-DescriptionDetails.propTypes = commonPropTypes;
 
 var isTooltipProps = function (props) {
     return !!props.tooltip;
@@ -3481,98 +2764,11 @@ var Step = function (props) {
             children ? (React__default["default"].createElement("div", { className: "Stepper__step-label" }, children)) : null)))));
 };
 Step.displayName = 'Step';
-Step.propTypes = {
-    children: PropTypes__default["default"].node,
-    tooltip: PropTypes__default["default"].node,
-    tooltipText: PropTypes__default["default"].string,
-    className: PropTypes__default["default"].string
-};
 var Stepper = function (_a) {
     var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
     return (React__default["default"].createElement("ol", tslib.__assign({ className: classNames__default["default"]('Stepper', className) }, other), children));
 };
 Stepper.displayName = 'Stepper';
-Stepper.propTypes = {
-    children: PropTypes__default["default"].node.isRequired,
-    className: PropTypes__default["default"].string
-};
-
-var Panel = React.forwardRef(function (_a, ref) {
-    var _b;
-    var children = _a.children, collapsed = _a.collapsed, className = _a.className, heading = _a.heading, _c = _a.padding, padding = _c === void 0 ? true : _c, other = tslib.__rest(_a, ["children", "collapsed", "className", "heading", "padding"]);
-    var headingId = !heading
-        ? undefined
-        : typeof heading === 'object' && 'id' in heading
-            ? heading.id
-            : randomId();
-    var Heading = function () {
-        if (!headingId) {
-            return null;
-        }
-        var HeadingComponent = "h".concat(heading &&
-            typeof heading === 'object' &&
-            'level' in heading &&
-            !!heading.level
-            ? heading.level
-            : 2);
-        return (React__default["default"].createElement(HeadingComponent, { id: headingId, className: "Panel__Heading" }, heading && typeof heading === 'object' && 'text' in heading
-            ? heading.text
-            : heading));
-    };
-    return (React__default["default"].createElement("section", tslib.__assign({ "aria-labelledby": headingId, className: classNames__default["default"]('Panel', className, (_b = {},
-            _b['Panel--collapsed'] = collapsed,
-            _b['Panel--no-padding'] = !padding,
-            _b)), ref: ref }, other),
-        React__default["default"].createElement(Heading, null),
-        children));
-});
-Panel.displayName = 'Panel';
-Panel.propTypes = {
-    children: PropTypes__default["default"].node.isRequired,
-    // @ts-expect-error
-    heading: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].node]),
-    className: PropTypes__default["default"].string,
-    padding: PropTypes__default["default"].bool,
-    collapsed: PropTypes__default["default"].bool
-};
-
-var PanelContent = React.forwardRef(function (_a, ref) {
-    var _b;
-    var children = _a.children, className = _a.className, _c = _a.padding, padding = _c === void 0 ? true : _c, otherProps = tslib.__rest(_a, ["children", "className", "padding"]);
-    return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('Panel__Content', className, (_b = {},
-            _b['Panel__Content--no-padding'] = !padding,
-            _b)), ref: ref }, otherProps), children));
-});
-PanelContent.displayName = 'PanelContent';
-PanelContent.propTypes = {
-    children: PropTypes__default["default"].node.isRequired,
-    className: PropTypes__default["default"].string,
-    padding: PropTypes__default["default"].bool
-};
-
-var PanelHeader = React.forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, otherProps = tslib.__rest(_a, ["children", "className"]);
-    return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('Panel__Header', className), ref: ref }, otherProps), children));
-});
-PanelHeader.displayName = 'PanelHeader';
-PanelHeader.propTypes = {
-    children: PropTypes__default["default"].node.isRequired,
-    className: PropTypes__default["default"].string
-};
-
-var IssuePanel = function (_a) {
-    var className = _a.className, _b = _a.title, title = _b === void 0 ? '' : _b, actions = _a.actions, children = _a.children;
-    return (React__default["default"].createElement("div", { className: classNames__default["default"]('IssuePanel', className) },
-        React__default["default"].createElement("div", { className: "IssuePanel__Header" },
-            title && React__default["default"].createElement("div", { className: "IssuePanel__Header-title" }, title),
-            actions && (React__default["default"].createElement("div", { className: "IssuePanel__Header-actions" }, actions))),
-        React__default["default"].createElement("div", { className: "IssuePanel__Content" }, children)));
-};
-IssuePanel.displayName = 'IssuePanel';
-IssuePanel.propTypes = {
-    children: PropTypes__default["default"].node.isRequired,
-    className: PropTypes__default["default"].string
-};
 
 var ProgressBar = React.forwardRef(function (_a, ref) {
     var _b = _a.progress, progress = _b === void 0 ? 0 : _b, _c = _a.progressMax, progressMax = _c === void 0 ? 100 : _c, _d = _a.progressMin, progressMin = _d === void 0 ? 0 : _d, props = tslib.__rest(_a, ["progress", "progressMax", "progressMin"]);
@@ -3587,19 +2783,11 @@ var Address = function (_a) {
     return (React__default["default"].createElement("address", tslib.__assign({ className: classNames__default["default"]('Address', className) }, other), children));
 };
 Address.displayName = 'Address';
-Address.propTypes = {
-    children: PropTypes__default["default"].node.isRequired,
-    className: PropTypes__default["default"].string
-};
 var AddressLine = function (_a) {
     var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
     return children ? (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('Address__line', className) }, other), children)) : null;
 };
 AddressLine.displayName = 'AddressLine';
-AddressLine.propTypes = {
-    children: PropTypes__default["default"].node,
-    className: PropTypes__default["default"].string
-};
 var AddressCityStateZip = function (_a) {
     var city = _a.city, state = _a.state, zip = _a.zip, className = _a.className, other = tslib.__rest(_a, ["city", "state", "zip", "className"]);
     return city || state || zip ? (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('Address__city-state-zip', className) }, other), [[city, state].filter(Boolean).join(', '), zip]
@@ -3607,22 +2795,6 @@ var AddressCityStateZip = function (_a) {
         .join(' '))) : null;
 };
 AddressCityStateZip.displayName = 'AddressCityStateZip';
-AddressCityStateZip.propTypes = {
-    city: PropTypes__default["default"].node,
-    state: PropTypes__default["default"].node,
-    zip: PropTypes__default["default"].node,
-    className: PropTypes__default["default"].string
-};
-
-/**
- * This prop type is meant to ensure that a prop can actually be rendered as content.
- * It should match the ContentNode type in types.ts
- */
-var contentNode = PropTypes__default["default"].oneOfType([
-    PropTypes__default["default"].string,
-    PropTypes__default["default"].number,
-    PropTypes__default["default"].element
-]);
 
 var Pagination = React__default["default"].forwardRef(function (_a, ref) {
     var totalItems = _a.totalItems, _b = _a.itemsPerPage, itemsPerPage = _b === void 0 ? 10 : _b, _c = _a.currentPage, currentPage = _c === void 0 ? 1 : _c, statusLabel = _a.statusLabel, _d = _a.firstPageLabel, firstPageLabel = _d === void 0 ? 'First page' : _d, _e = _a.previousPageLabel, previousPageLabel = _e === void 0 ? 'Previous page' : _e, _f = _a.nextPageLabel, nextPageLabel = _f === void 0 ? 'Next page' : _f, _g = _a.lastPageLabel, lastPageLabel = _g === void 0 ? 'Last page' : _g, _h = _a.tooltipPlacement, tooltipPlacement = _h === void 0 ? 'bottom' : _h, onNextPageClick = _a.onNextPageClick, onPreviousPageClick = _a.onPreviousPageClick, onFirstPageClick = _a.onFirstPageClick, onLastPageClick = _a.onLastPageClick, className = _a.className, _j = _a.thin, thin = _j === void 0 ? false : _j, other = tslib.__rest(_a, ["totalItems", "itemsPerPage", "currentPage", "statusLabel", "firstPageLabel", "previousPageLabel", "nextPageLabel", "lastPageLabel", "tooltipPlacement", "onNextPageClick", "onPreviousPageClick", "onFirstPageClick", "onLastPageClick", "className", "thin"]);
@@ -3653,24 +2825,6 @@ var Pagination = React__default["default"].forwardRef(function (_a, ref) {
                 React__default["default"].createElement(IconButton, { icon: "chevron-double-right", tooltipPlacement: tooltipPlacement, label: lastPageLabel, "aria-disabled": isLastPage, onClick: isLastPage ? undefined : onLastPageClick })))));
 });
 Pagination.displayName = 'Pagination';
-Pagination.propTypes = {
-    totalItems: PropTypes__default["default"].number.isRequired,
-    itemsPerPage: PropTypes__default["default"].number,
-    currentPage: PropTypes__default["default"].number,
-    statusLabel: PropTypes__default["default"].element,
-    firstPageLabel: contentNode,
-    previousPageLabel: contentNode,
-    nextPageLabel: contentNode,
-    lastPageLabel: contentNode,
-    onNextPageClick: PropTypes__default["default"].func,
-    onPreviousPageClick: PropTypes__default["default"].func,
-    onFirstPageClick: PropTypes__default["default"].func,
-    onLastPageClick: PropTypes__default["default"].func,
-    // @ts-expect-error
-    tooltipPlacement: PropTypes__default["default"].string,
-    className: PropTypes__default["default"].string,
-    thin: PropTypes__default["default"].bool
-};
 
 var usePagination = function (_a) {
     var totalItems = _a.totalItems, _b = _a.initialPageSize, initialPageSize = _b === void 0 ? 10 : _b, _c = _a.initialPage, initialPage = _c === void 0 ? 1 : _c;
@@ -3706,11 +2860,6 @@ var FieldWrap = React__default["default"].forwardRef(function (_a, ref) {
     return (React__default["default"].createElement(Component, tslib.__assign({ ref: ref, className: classNames__default["default"]('Panel', className) }, props), children));
 });
 FieldWrap.displayName = 'FieldWrap';
-FieldWrap.propTypes = {
-    children: PropTypes__default["default"].node.isRequired,
-    className: PropTypes__default["default"].string,
-    as: PropTypes__default["default"].string
-};
 
 var Breadcrumb = React.forwardRef(function (_a, ref) {
     var _b = _a.separator, separator = _b === void 0 ? '/' : _b, className = _a.className, children = _a.children, props = tslib.__rest(_a, ["separator", "className", "children"]);
@@ -3736,9 +2885,6 @@ function (_a, ref) {
     var className = _a.className, children = _a.children, props = tslib.__rest(_a, ["className", "children"]);
     return (React__default["default"].createElement("span", tslib.__assign({ className: classNames__default["default"]('Breadcrumb__Item', className), ref: ref, "aria-current": "location" }, props), children));
 });
-BreadcrumbItem.propTypes = {
-    className: PropTypes__default["default"].string
-};
 
 var BreadcrumbLink = React.forwardRef(function (_a, ref) {
     var className = _a.className, _b = _a.as, ElementType = _b === void 0 ? 'a' : _b, children = _a.children, props = tslib.__rest(_a, ["className", "as", "children"]);
@@ -3917,27 +3063,18 @@ var ColumnHeader = React.forwardRef(function (_a, ref) {
     return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('TwoColumnPanel__Header', className) }, props, { ref: ref }), children));
 });
 ColumnHeader.displayName = 'ColumnHeader';
-ColumnHeader.propTypes = {
-    className: PropTypes__default["default"].string
-};
 
 var ColumnGroupHeader = React.forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, props = tslib.__rest(_a, ["className", "children"]);
     return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('TwoColumnPanel__GroupHeader', className) }, props, { ref: ref }), children));
 });
 ColumnGroupHeader.displayName = 'ColumnGroupHeader';
-ColumnGroupHeader.propTypes = {
-    className: PropTypes__default["default"].string
-};
 
 var ColumnList = React.forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, props = tslib.__rest(_a, ["className", "children"]);
     return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('TwoColumnPanel__List', className) }, props, { ref: ref }), children));
 });
 ColumnList.displayName = 'ColumnList';
-ColumnList.propTypes = {
-    className: PropTypes__default["default"].string
-};
 
 var iconTypeMap = {
     caution: 'caution',
@@ -3956,18 +3093,6 @@ var Notice = React.forwardRef(function (_a, ref) {
         children && React__default["default"].createElement("div", { className: "Notice__content" }, children)));
 });
 Notice.displayName = 'Notice';
-Notice.propTypes = {
-    children: PropTypes__default["default"].node,
-    type: PropTypes__default["default"].oneOf(['caution', 'info', 'danger']),
-    // @ts-expect-error
-    title: PropTypes__default["default"].oneOfType([
-        PropTypes__default["default"].string,
-        PropTypes__default["default"].number,
-        PropTypes__default["default"].element
-    ]),
-    // @ts-expect-error
-    icon: PropTypes__default["default"].string
-};
 
 /* istanbul ignore next */
 var ListboxContext = React.createContext({
@@ -4382,16 +3507,16 @@ var ComboboxNoResults = function (_a) {
     return (React__default["default"].createElement("div", { className: "ComboboxListbox__empty", role: "alert", "aria-live": "polite" }, children || 'No results found.'));
 };
 var Combobox = React.forwardRef(function (_a, ref) {
-    var propId = _a.id, className = _a.className, label = _a.label, children = _a.children, _b = _a.options, options = _b === void 0 ? [] : _b, propValue = _a.value, defaultValue = _a.defaultValue, _c = _a.requiredText, requiredText = _c === void 0 ? 'Required' : _c, error = _a.error, _d = _a.autocomplete, autocomplete = _d === void 0 ? 'manual' : _d, onSelectionChange = _a.onSelectionChange, onActiveChange = _a.onActiveChange, onChange = _a.onChange, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, name = _a.name, renderNoResults = _a.renderNoResults, portal = _a.portal, props = tslib.__rest(_a, ["id", "className", "label", "children", "options", "value", "defaultValue", "requiredText", "error", "autocomplete", "onSelectionChange", "onActiveChange", "onChange", "onKeyDown", "onFocus", "onBlur", "name", "renderNoResults", "portal"]);
-    var _e = tslib.__read(React.useState(defaultValue || propValue || ''), 2), value = _e[0], setValue = _e[1];
-    var _f = tslib.__read(React.useState(new Map()), 2), matchingOptions = _f[0], setMatchingOptions = _f[1];
-    var _g = tslib.__read(React.useState(value || ''), 2), selectedValue = _g[0], setSelectedValue = _g[1];
-    var _h = tslib.__read(React.useState(''), 2), formValue = _h[0], setFormValue = _h[1];
-    var _j = tslib.__read(React.useState(false), 2), open = _j[0], setOpen = _j[1];
-    var _k = tslib.__read(React.useState(null), 2), activeDescendant = _k[0], setActiveDescendant = _k[1];
-    var _l = tslib.__read(propId ? [propId] : nextId.useId(1, 'combobox'), 1), id = _l[0];
+    var propId = _a.id, className = _a.className, label = _a.label, children = _a.children, _b = _a.options, options = _b === void 0 ? [] : _b, propValue = _a.value, defaultValue = _a.defaultValue, _c = _a.requiredText, requiredText = _c === void 0 ? 'Required' : _c, error = _a.error, _d = _a.autocomplete, autocomplete = _d === void 0 ? 'manual' : _d, onSelectionChange = _a.onSelectionChange, onActiveChange = _a.onActiveChange, onChange = _a.onChange, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, name = _a.name, renderNoResults = _a.renderNoResults, portal = _a.portal, _e = _a.inputRef, propInputRef = _e === void 0 ? null : _e, ariaDescribedby = _a["aria-describedby"], props = tslib.__rest(_a, ["id", "className", "label", "children", "options", "value", "defaultValue", "requiredText", "error", "autocomplete", "onSelectionChange", "onActiveChange", "onChange", "onKeyDown", "onFocus", "onBlur", "name", "renderNoResults", "portal", "inputRef", 'aria-describedby']);
+    var _f = tslib.__read(React.useState(defaultValue || propValue || ''), 2), value = _f[0], setValue = _f[1];
+    var _g = tslib.__read(React.useState(new Map()), 2), matchingOptions = _g[0], setMatchingOptions = _g[1];
+    var _h = tslib.__read(React.useState(value || ''), 2), selectedValue = _h[0], setSelectedValue = _h[1];
+    var _j = tslib.__read(React.useState(''), 2), formValue = _j[0], setFormValue = _j[1];
+    var _k = tslib.__read(React.useState(false), 2), open = _k[0], setOpen = _k[1];
+    var _l = tslib.__read(React.useState(null), 2), activeDescendant = _l[0], setActiveDescendant = _l[1];
+    var _m = tslib.__read(propId ? [propId] : nextId.useId(1, 'combobox'), 1), id = _m[0];
     var comboboxRef = useSharedRef(ref);
-    var inputRef = React.useRef(null);
+    var inputRef = useSharedRef(propInputRef);
     var listboxRef = React.useRef(null);
     var isControlled = typeof propValue !== 'undefined';
     var isRequired = !!props.required;
@@ -4562,6 +3687,10 @@ var Combobox = React.forwardRef(function (_a, ref) {
         }), role: "listbox", "aria-labelledby": "".concat(id, "-label"), id: "".concat(id, "-listbox"), value: selectedValue, onMouseDown: handleComboboxOptionMouseDown, onClick: handleComboboxOptionClick, onSelectionChange: handleSelectionChange, onActiveChange: handleActiveChange, ref: listboxRef, tabIndex: undefined, "aria-activedescendant": undefined },
         comboboxOptions,
         noMatchingOptions));
+    var errorId = "".concat(id, "-error");
+    var inputProps = tslib.__assign(tslib.__assign({}, props), { 'aria-describedby': error
+            ? tokenList(errorId, ariaDescribedby)
+            : ariaDescribedby });
     return (React__default["default"].createElement("div", { id: id, className: classNames__default["default"]('Combobox', className), ref: comboboxRef },
         name && React__default["default"].createElement("input", { type: "hidden", name: name, value: formValue }),
         React__default["default"].createElement("label", { className: classNames__default["default"]('Field__label', {
@@ -4576,7 +3705,7 @@ var Combobox = React.forwardRef(function (_a, ref) {
             // We're handling click here to open the listbox when the wrapping element is clicked,
             // there's already keyboard handlers to open the listbox on the input element
             onClick: handleInputClick },
-            React__default["default"].createElement("input", tslib.__assign({ type: "text", id: "".concat(id, "-input"), ref: inputRef, value: value, role: "combobox", "aria-autocomplete": !isAutoComplete ? 'none' : 'list', "aria-controls": "".concat(id, "-listbox"), "aria-expanded": open, "aria-haspopup": "listbox", "aria-activedescendant": open && activeDescendant ? activeDescendant.element.id : undefined }, props, { onChange: handleChange, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur })),
+            React__default["default"].createElement("input", tslib.__assign({ type: "text", id: "".concat(id, "-input"), ref: inputRef, value: value, role: "combobox", "aria-autocomplete": !isAutoComplete ? 'none' : 'list', "aria-controls": "".concat(id, "-listbox"), "aria-expanded": open, "aria-haspopup": "listbox", "aria-activedescendant": open && activeDescendant ? activeDescendant.element.id : undefined }, inputProps, { onChange: handleChange, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur })),
             React__default["default"].createElement("span", { className: "Combobox__arrow" })),
         React__default["default"].createElement(ComboboxProvider, { autocomplete: autocomplete, inputValue: value, formValue: formValue, selectedValue: selectedValue, matches: !isAutoComplete || defaultAutoCompleteMatches, matchingOptions: matchingOptions, setMatchingOptions: setMatchingOptions, setFormValue: setFormValue }, portal
             ? reactDom.createPortal(comboboxListbox, portal instanceof HTMLElement
@@ -4584,7 +3713,7 @@ var Combobox = React.forwardRef(function (_a, ref) {
                 : portal.current ||
                     /* istanbul ignore next: default fallback value */ document.body)
             : comboboxListbox),
-        hasError && (React__default["default"].createElement("div", { className: "Error", id: "".concat(id, "-error") }, error))));
+        hasError && (React__default["default"].createElement("div", { className: "Error", id: errorId }, error))));
 });
 Combobox.displayName = 'Combobox';
 
@@ -4632,7 +3761,9 @@ var Popover = React.forwardRef(function (_a, ref) {
     var placement = (attributes.popper &&
         attributes.popper['data-popper-placement']) ||
         initialPlacement;
-    var additionalProps = variant === 'prompt' ? { 'aria-labelledby': "".concat(id, "-label") } : {};
+    var additionalProps = variant === 'prompt' && !props['aria-label']
+        ? { 'aria-labelledby': "".concat(id, "-label") }
+        : {};
     // Keep targetElement in sync with target prop
     React.useEffect(function () {
         var targetElement = target && 'current' in target ? target.current : target;
@@ -4724,7 +3855,7 @@ var Popover = React.forwardRef(function (_a, ref) {
             React__default["default"].createElement("div", tslib.__assign({ id: id, className: classNames__default["default"]('Popover', "Popover--".concat(placement), className, {
                     'Popover--hidden': !show,
                     'Popover--prompt': variant === 'prompt'
-                }), ref: popoverRef, role: "dialog", style: styles.popper }, attributes.popper, props, additionalProps),
+                }), ref: popoverRef, role: "dialog", style: styles.popper }, attributes.popper, additionalProps, props),
                 React__default["default"].createElement("div", { className: "Popover__popoverArrow", ref: setArrowElement, style: styles.arrow }),
                 React__default["default"].createElement("div", { className: "Popover__borderLeft" }),
                 variant === 'prompt' ? (React__default["default"].createElement(PromptPopoverContent, { applyButtonText: applyButtonText, onApply: onApply, closeButtonText: closeButtonText, infoText: infoText || '', onClose: handleClosePopover, infoTextId: "".concat(id, "-label") })) : (children)))), (portal && 'current' in portal ? portal.current : portal) || document.body);
@@ -4790,10 +3921,6 @@ var ThemeProvider = function (_a) {
 function useThemeContext() {
     return React.useContext(ThemeContext);
 }
-ThemeProvider.propTypes = {
-    children: PropTypes__default["default"].any,
-    initialTheme: PropTypes__default["default"].string
-};
 
 exports.Accordion = Accordion;
 exports.AccordionContent = AccordionContent;
@@ -4809,10 +3936,6 @@ exports.Breadcrumb = Breadcrumb;
 exports.BreadcrumbItem = BreadcrumbItem;
 exports.BreadcrumbLink = BreadcrumbLink;
 exports.Button = Button;
-exports.Card = Card;
-exports.CardContent = CardContent;
-exports.CardFooter = CardFooter;
-exports.CardHeader = CardHeader;
 exports.Checkbox = Checkbox;
 exports.ClickOutsideListener = ClickOutsideListener;
 exports.Code = Code;
@@ -4835,7 +3958,6 @@ exports.ExpandCollapsePanel = ExpandCollapsePanel;
 exports.FieldWrap = FieldWrap;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
-exports.IssuePanel = IssuePanel;
 exports.Layout = Layout;
 exports.Line = Line;
 exports.Link = Link;
@@ -4864,7 +3986,6 @@ exports.Panel = Panel;
 exports.PanelContent = PanelContent;
 exports.PanelHeader = PanelHeader;
 exports.PanelTrigger = PanelTrigger$1;
-exports.Pointout = Pointout;
 exports.Popover = Popover;
 exports.ProgressBar = ProgressBar;
 exports.RadioCardGroup = RadioCardGroup;