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

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

@@ -1,7 +1,6 @@
 import React from 'react';
 export interface LoaderProps extends React.HTMLAttributes<HTMLDivElement> {
     label?: string;
-    variant?: 'large' | 'small';
 }
 declare const Loader: React.ForwardRefExoticComponent<LoaderProps & React.RefAttributes<HTMLDivElement>>;
 export default Loader;

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

@@ -1,6 +1,5 @@
 import React from 'react';
 export interface LoaderOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
-    variant?: 'large' | 'small';
     label?: string;
     focusOnInitialRender?: boolean;
     children?: React.ReactNode;

package/lib/index.d.ts

@@ -19,7 +19,6 @@ export { default as Modal, ModalContent, ModalFooter } from './components/Modal'
 export { default as SkipLink } from './components/SkipLink';
 export { default as Button } from './components/Button';
 export { default as IconButton } from './components/IconButton';
-export { default as Pointout } from './components/Pointout';
 export { default as Toast } from './components/Toast';
 export { default as Link } from './components/Link';
 export { default as Loader } from './components/Loader';
@@ -30,7 +29,6 @@ export { default as RadioCardGroup } from './components/RadioCardGroup';
 export { default as Checkbox } from './components/Checkbox';
 export { default as Tooltip, TooltipHead, TooltipContent } from './components/Tooltip';
 export { default as TooltipTabstop } from './components/TooltipTabstop';
-export { default as Card, CardHeader, CardContent, CardFooter } from './components/Card';
 export { default as TextField } from './components/TextField';
 export { default as ClickOutsideListener } from './components/ClickOutsideListener';
 export { default as ExpandCollapsePanel, PanelTrigger } from './components/ExpandCollapsePanel';
@@ -45,7 +43,6 @@ export { default as Tabs, Tab, TabPanel } from './components/Tabs';
 export { DescriptionList, DescriptionListItem, DescriptionTerm, DescriptionDetails } from './components/DescriptionList';
 export { default as Stepper, Step } from './components/Stepper';
 export { default as Panel, PanelHeader, PanelContent } from './components/Panel';
-export { default as IssuePanel } from './components/IssuePanel';
 export { default as ProgressBar } from './components/ProgressBar';
 export { Address, AddressLine, AddressCityStateZip } from './components/Address';
 export { default as Pagination, usePagination } from './components/Pagination';

package/lib/index.js

@@ -10,7 +10,6 @@ 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');
@@ -24,7 +23,6 @@ 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);
@@ -1789,303 +1787,6 @@ var IconButton = React.forwardRef(function (_a, ref) {
 });
 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'
-    };
-    return Pointout;
-}(React__default["default"].Component));
-
 /**
  * A querySelectorAll that returns a normal array rather than live node list.
  *
@@ -2275,7 +1976,7 @@ var Link = function (_a) {
 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);
@@ -2283,10 +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.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
  */
@@ -2422,32 +2129,51 @@ var RadioGroup = React.forwardRef(function (_a, ref) {
 });
 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';
-
-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';
+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';
+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';
+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, 
@@ -2481,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
@@ -2496,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),
@@ -2734,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
@@ -2765,13 +2491,9 @@ 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)));
@@ -3048,62 +2770,6 @@ var Stepper = function (_a) {
 };
 Stepper.displayName = 'Stepper';
 
-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 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 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 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';
-
 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"]);
     var className = props.className, otherProps = tslib.__rest(props, ["className"]);
@@ -4270,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;
@@ -4296,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;
@@ -4325,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "5.13.0-canary.301c546b",
+  "version": "5.13.0-canary.7b5349dc",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",

package/lib/components/Card/Card.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
-    variant?: 'simple';
-}
-declare const Card: {
-    ({ className, variant, ...other }: CardProps): React.JSX.Element;
-    displayName: string;
-};
-export default Card;

package/lib/components/Card/CardContent.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-export type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {
-    className?: string;
-};
-declare const CardContent: {
-    ({ className, ...other }: CardContentProps): React.JSX.Element;
-    displayName: string;
-};
-export default CardContent;

package/lib/components/Card/CardFooter.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-export type CardFooterProps = React.HTMLAttributes<HTMLDivElement> & {
-    className?: string;
-};
-declare const CardFooter: {
-    ({ className, ...other }: CardFooterProps): React.JSX.Element;
-    displayName: string;
-};
-export default CardFooter;

package/lib/components/Card/CardHeader.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-export type CardHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
-    className?: string;
-};
-declare const CardHeader: {
-    ({ className, ...other }: CardHeaderProps): React.JSX.Element;
-    displayName: string;
-};
-export default CardHeader;

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

@@ -1,4 +0,0 @@
-export { default } from './Card';
-export { default as CardHeader } from './CardHeader';
-export { default as CardContent } from './CardContent';
-export { default as CardFooter } from './CardFooter';

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

@@ -1,12 +0,0 @@
-import React from 'react';
-import IconButton from '../IconButton';
-declare const IssuePanel: {
-    ({ className, title, actions, children }: {
-        className?: string | undefined;
-        title?: string | undefined;
-        actions?: import("../../utils/polymorphic-type").ForwardRefComponent<"button", import("../IconButton").IconButtonOwnProps>[] | undefined;
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-};
-export default IssuePanel;

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

@@ -1,61 +0,0 @@
-import React, { ButtonHTMLAttributes } from 'react';
-export interface PointoutProps {
-    arrowPosition: 'top-left' | 'top-right' | 'right-top' | 'right-bottom' | 'bottom-right' | 'bottom-left' | 'left-bottom' | 'left-top';
-    position: 'start' | 'center' | 'end';
-    heading?: React.ReactNode;
-    className?: string;
-    headerId: string;
-    children: React.ReactNode;
-    ftpoRef: React.Ref<HTMLDivElement>;
-    noArrow?: boolean;
-    onClose: () => void;
-    dismissText?: string;
-    nextText?: string;
-    previousText?: string;
-    showNext?: boolean;
-    showPrevious?: boolean;
-    disableOffscreenPointout?: boolean;
-    target?: React.RefObject<HTMLElement> | HTMLElement;
-    portal?: React.RefObject<HTMLElement> | HTMLElement;
-    previousButtonProps?: ButtonHTMLAttributes<HTMLButtonElement>;
-    nextButtonProps?: ButtonHTMLAttributes<HTMLButtonElement>;
-    closeButtonProps?: ButtonHTMLAttributes<HTMLButtonElement>;
-}
-interface PointoutState {
-    show: boolean;
-    style: React.CSSProperties;
-    headingId?: string;
-    offscreenContentFocus?: boolean;
-}
-export default class Pointout extends React.Component<PointoutProps, PointoutState> {
-    static defaultProps: {
-        ftpoRef: () => void;
-        noArrow: boolean;
-        onClose: () => void;
-        dismissText: string;
-        previousText: string;
-        nextText: string;
-        arrowPosition: string;
-        position: string;
-    };
-    private resizeDebounceId;
-    private resizeDebounce;
-    private offscreenRef;
-    private offscreenContentRef;
-    private visibleRef;
-    constructor(props: PointoutProps);
-    getFocusableElements(root: HTMLElement | null): Element[];
-    componentDidMount(): void;
-    forceUpdate(): void;
-    componentWillUnmount(): void;
-    attachOffscreenListeners: () => void;
-    handleOffscreenContentFocusIn: ({ target }: FocusEvent) => void;
-    handleOffscreenContentFocusOut: ({ target }: FocusEvent) => void;
-    handleOffscreenFocusIn: ({ target }: FocusEvent) => void;
-    handleOffscreenFocusOut: ({ target }: FocusEvent) => void;
-    positionRelativeToTarget: () => void;
-    componentDidUpdate(nextProps: PointoutProps): void;
-    render(): React.JSX.Element | null;
-    onCloseClick(): void;
-}
-export {};