@deque/cauldron-react 4.4.0 → 4.5.0-canary.21294bb6

package/lib/index.js

@@ -9,9 +9,9 @@ var React = require('react');
 var React__default = _interopDefault(React);
 var PropTypes = _interopDefault(require('prop-types'));
 var classNames = _interopDefault(require('classnames'));
-var keyname = _interopDefault(require('keyname'));
 var nextId = require('react-id-generator');
 var nextId__default = _interopDefault(nextId);
+var keyname = _interopDefault(require('keyname'));
 var reactDom = require('react-dom');
 var FocusTrap = _interopDefault(require('focus-trap-react'));
 var reactPopper = require('react-popper');
@@ -151,6 +151,7 @@ var iconTypes = [
     'exchange',
     'external-link',
     'eye',
+    'filter-solid',
     'filter',
     'flag',
     'gears',
@@ -170,10 +171,12 @@ var iconTypes = [
     'new',
     'no',
     'pencil',
+    'play',
     'plus',
     'question-circle',
     'radio-checked',
     'radio-unchecked',
+    'recycle-square',
     'recycle',
     'resend',
     'robot',
@@ -218,6 +221,7 @@ function __variableDynamicImportRuntime0__(path) {
     case './icons/exchange.svg': return Promise.resolve().then(function () { return require('./exchange.js'); });
     case './icons/external-link.svg': return Promise.resolve().then(function () { return require('./external-link.js'); });
     case './icons/eye.svg': return Promise.resolve().then(function () { return require('./eye.js'); });
+    case './icons/filter-solid.svg': return Promise.resolve().then(function () { return require('./filter-solid.js'); });
     case './icons/filter.svg': return Promise.resolve().then(function () { return require('./filter.js'); });
     case './icons/flag.svg': return Promise.resolve().then(function () { return require('./flag.js'); });
     case './icons/gears.svg': return Promise.resolve().then(function () { return require('./gears.js'); });
@@ -237,10 +241,12 @@ function __variableDynamicImportRuntime0__(path) {
     case './icons/new.svg': return Promise.resolve().then(function () { return require('./new.js'); });
     case './icons/no.svg': return Promise.resolve().then(function () { return require('./no.js'); });
     case './icons/pencil.svg': return Promise.resolve().then(function () { return require('./pencil.js'); });
+    case './icons/play.svg': return Promise.resolve().then(function () { return require('./play.js'); });
     case './icons/plus.svg': return Promise.resolve().then(function () { return require('./plus.js'); });
     case './icons/question-circle.svg': return Promise.resolve().then(function () { return require('./question-circle.js'); });
     case './icons/radio-checked.svg': return Promise.resolve().then(function () { return require('./radio-checked.js'); });
     case './icons/radio-unchecked.svg': return Promise.resolve().then(function () { return require('./radio-unchecked.js'); });
+    case './icons/recycle-square.svg': return Promise.resolve().then(function () { return require('./recycle-square.js'); });
     case './icons/recycle.svg': return Promise.resolve().then(function () { return require('./recycle.js'); });
     case './icons/resend.svg': return Promise.resolve().then(function () { return require('./resend.js'); });
     case './icons/robot.svg': return Promise.resolve().then(function () { return require('./robot.js'); });
@@ -279,19 +285,19 @@ var Icon = React.forwardRef(function (_a, ref) {
         if (process.env.NODE_ENV === 'test') {
             return;
         }
-        __variableDynamicImportRuntime0__("./icons/" + name + ".svg")
+        __variableDynamicImportRuntime0__("./icons/".concat(name, ".svg"))
             .then(function (icon) {
             isMounted.current && setIcon(function () { return icon["default"]; });
         })["catch"](function () {
-            console.error("Could not find icon type \"" + type + "\".");
+            console.error("Could not find icon type \"".concat(type, "\"."));
             isMounted.current && setIcon(null);
         });
         return function () {
             isMounted.current = false;
         };
     }, [type]);
-    var data = tslib.__assign(tslib.__assign({}, other), { 'aria-hidden': !label, className: classNames('Icon', "Icon--" + type, className, (_b = {},
-            _b["Icon__" + direction] = !!direction,
+    var data = tslib.__assign(tslib.__assign({}, other), { 'aria-hidden': !label, className: classNames('Icon', "Icon--".concat(type), className, (_b = {},
+            _b["Icon__".concat(direction)] = !!direction,
             _b)) });
     return (React__default.createElement("div", tslib.__assign({ ref: ref }, data),
         label && React__default.createElement(Offscreen, null, label),
@@ -305,6 +311,207 @@ Icon.propTypes = {
 };
 Icon.displayName = 'Icon';
 
+var PanelTrigger = function (_a) {
+    var children = _a.children, className = _a.className, open = _a.open, fullWidth = _a.fullWidth, onClick = _a.onClick, _b = _a.iconExpanded, iconExpanded = _b === void 0 ? 'chevron-down' : _b, _c = _a.iconCollapsed, iconCollapsed = _c === void 0 ? 'chevron-right' : _c, heading = _a.heading, otherProps = tslib.__rest(_a, ["children", "className", "open", "fullWidth", "onClick", "iconExpanded", "iconCollapsed", "heading"]);
+    var Header = typeof heading === 'object' && 'level' in heading && !!heading.level
+        ? "h".concat(heading.level)
+        : React__default.Fragment;
+    return (React__default.createElement(Header, null,
+        React__default.createElement("button", tslib.__assign({ className: classNames(className, 'ExpandCollapse__trigger', {
+                fullWidth: fullWidth
+            }), type: "button", "aria-expanded": open, onClick: onClick }, otherProps),
+            React__default.createElement("div", { className: "ExpandCollapse__trigger-title" }, typeof children === 'function'
+                ? children({ open: !!open })
+                : children),
+            React__default.createElement(Icon, { type: open ? iconExpanded : iconCollapsed }))));
+};
+PanelTrigger.propTypes = {
+    children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+    open: PropTypes.bool,
+    iconExpanded: PropTypes.string,
+    iconCollapsed: PropTypes.string,
+    heading: PropTypes.number
+};
+PanelTrigger.displayName = 'PanelTrigger';
+var PanelTrigger$1 = React__default.memo(PanelTrigger);
+
+var injectStyleTag = function () {
+    var style = document.createElement('style');
+    document.head.appendChild(style);
+    return style;
+};
+var setStyle = function (tag, cssString) {
+    tag.textContent = cssString;
+};
+var removeStyleTag = function (tag) {
+    document.head.removeChild(tag);
+};
+
+var ExpandCollapsePanel = /** @class */ (function (_super) {
+    tslib.__extends(ExpandCollapsePanel, _super);
+    function ExpandCollapsePanel() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            controlled: typeof _this.props.open !== 'undefined',
+            isOpen: typeof _this.props.open !== 'undefined' ? _this.props.open : false
+        };
+        _this.panel = React__default.createRef();
+        _this.handleToggle = function (e) {
+            var onToggle = _this.props.onToggle;
+            var _a = _this.state, isOpen = _a.isOpen, controlled = _a.controlled;
+            onToggle(e);
+            if (!controlled) {
+                _this.setState({ isOpen: !isOpen, isAnimating: true });
+            }
+        };
+        _this.animateOpen = function () {
+            var panel = _this.panel.current;
+            var animationTiming = _this.props.animationTiming;
+            if (!animationTiming) {
+                _this.setState({ isAnimating: false });
+                return;
+            }
+            var rect = panel === null || panel === void 0 ? void 0 : panel.getBoundingClientRect();
+            if (!rect) {
+                return;
+            }
+            if (!_this.styleTag) {
+                _this.styleTag = injectStyleTag();
+            }
+            setStyle(_this.styleTag, "\n      @keyframes expandOpenAnimation {\n        0% { opacity: 0; height: 0; }\n        100% { opacity: 1; height: ".concat(rect.height, "px; }\n      }\n\n      .cauldron-expand-open {\n        will-change: opacity, height;\n        overflow: hidden;\n        animation: expandOpenAnimation ease-in-out ").concat(animationTiming, "ms forwards;\n      }\n    "));
+            _this.setState({ animationClass: 'cauldron-expand-open' }, function () {
+                setTimeout(function () {
+                    _this.setState({ animationClass: '', isAnimating: false });
+                    setStyle(_this.styleTag, '');
+                }, animationTiming);
+            });
+        };
+        _this.animateClose = function () {
+            var panel = _this.panel.current;
+            var animationTiming = _this.props.animationTiming;
+            if (!animationTiming) {
+                _this.setState({ isAnimating: false });
+                return;
+            }
+            if (!_this.styleTag) {
+                _this.styleTag = injectStyleTag();
+            }
+            var rect = panel === null || panel === void 0 ? void 0 : panel.getBoundingClientRect();
+            if (!rect)
+                return;
+            setStyle(_this.styleTag, "\n      @keyframes collapseCloseAnimation {\n        0% { opacity: 1; height: ".concat(rect.height, "px; }\n        100% { opacity: 0; height: 0; }\n      }\n\n      .cauldron-collapse-close {\n        will-change: opacity, height;\n        overflow: hidden;\n        animation: collapseCloseAnimation ease-in-out ").concat(animationTiming, "ms forwards;\n      }\n    "));
+            _this.setState({ animationClass: 'cauldron-collapse-close' }, function () {
+                setTimeout(function () {
+                    _this.setState({ animationClass: '', isAnimating: false });
+                    setStyle(_this.styleTag, '');
+                }, animationTiming);
+            });
+        };
+        return _this;
+    }
+    ExpandCollapsePanel.prototype.componentWillUnmount = function () {
+        var styleTag = this.styleTag;
+        if (styleTag) {
+            removeStyleTag(styleTag);
+        }
+    };
+    ExpandCollapsePanel.prototype.componentDidUpdate = function (prevProps, prevState) {
+        var _a = this.state, openState = _a.isOpen, controlled = _a.controlled;
+        var openProp = this.props.open;
+        if (controlled && openState !== openProp) {
+            this.setState({ isOpen: !!openProp, isAnimating: true });
+        }
+        if (typeof openProp !== typeof prevProps.open) {
+            this.setState({ controlled: typeof openProp !== 'undefined' });
+        }
+        if (prevState.isOpen !== openState && openState) {
+            this.animateOpen();
+        }
+        else if (prevState.isOpen !== openState && !openState) {
+            this.animateClose();
+        }
+    };
+    ExpandCollapsePanel.prototype.render = function () {
+        var _a = this.props, children = _a.children, animationTiming = _a.animationTiming, className = _a.className, onToggle = _a.onToggle, open = _a.open, otherProps = tslib.__rest(_a, ["children", "animationTiming", "className", "onToggle", "open"]);
+        var _b = this.state, isOpen = _b.isOpen, isAnimating = _b.isAnimating, animationClass = _b.animationClass;
+        var trigger = React__default.Children.toArray(children).find(function (child) { return child.type === PanelTrigger$1; });
+        var panelElements = React__default.Children.toArray(children).filter(function (child) {
+            return typeof child === 'string' ||
+                child.type !== PanelTrigger$1;
+        });
+        return (React__default.createElement(React__default.Fragment, null,
+            trigger &&
+                React__default.cloneElement(trigger, {
+                    open: isOpen,
+                    onClick: this.handleToggle
+                }),
+            React__default.createElement("div", tslib.__assign({ className: classNames(className, 'ExpandCollapse__panel', animationClass, {
+                    'is--hidden': !isOpen && !isAnimating
+                }), ref: this.panel }, otherProps), panelElements)));
+    };
+    ExpandCollapsePanel.defaultProps = {
+        animationTiming: 250,
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        onToggle: function () { }
+    };
+    ExpandCollapsePanel.propTypes = {
+        open: PropTypes.bool,
+        children: PropTypes.node.isRequired,
+        className: PropTypes.string,
+        animationTiming: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
+        onToggle: PropTypes.func
+    };
+    return ExpandCollapsePanel;
+}(React__default.Component));
+
+var AccordionTrigger = function (_a) {
+    var children = _a.children, triggerProps = tslib.__rest(_a, ["children"]);
+    return React__default.createElement(React__default.Fragment, null, children);
+};
+var AccordionContent = function (_a) {
+    var children = _a.children, className = _a.className, otherProps = tslib.__rest(_a, ["children", "className"]);
+    return (React__default.createElement("div", tslib.__assign({ className: classNames('Accordion__panel', className) }, otherProps), children));
+};
+var Accordion = function (_a) {
+    var children = _a.children;
+    var childrenArray = React__default.Children.toArray(children);
+    var trigger = childrenArray.find(function (child) { return child.type === AccordionTrigger; });
+    var panelElement = childrenArray.find(function (child) {
+        return typeof child === 'string' ||
+            child.type === AccordionContent;
+    });
+    var isValid = !!(React__default.isValidElement(trigger) && React__default.isValidElement(panelElement));
+    if (!isValid) {
+        console.warn('Must provide <AccordionTrigger /> and <AccordionContent /> element(s). You provided:', {
+            trigger: trigger,
+            panelElement: panelElement,
+            isValid: isValid
+        });
+        return null;
+    }
+    var _b = trigger.props, triggerClassName = _b.className, triggerProps = tslib.__rest(_b, ["className"]);
+    var elementId = nextId.useId();
+    return (React__default.createElement("div", { className: "Accordion" },
+        React__default.createElement(ExpandCollapsePanel, tslib.__assign({ id: panelElement.props.id || "".concat(elementId, "-panel") }, panelElement.props),
+            React__default.createElement(PanelTrigger$1, tslib.__assign({ iconCollapsed: "triangle-right", iconExpanded: "triangle-down", className: classNames('Accordion__trigger', trigger.props.className), "aria-controls": panelElement.props.id || "".concat(elementId, "-panel"), heading: trigger.props.heading }, trigger.props), trigger),
+            panelElement)));
+};
+Accordion.displayName = 'Accordion';
+AccordionContent.displayName = 'AccordionContent';
+AccordionTrigger.displayName = 'AccordionTrigger';
+Accordion.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string
+};
+AccordionTrigger.propTypes = {
+    children: PropTypes.node,
+    heading: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', undefined])
+};
+AccordionContent.propTypes = {
+    children: PropTypes.node.isRequired,
+    className: PropTypes.string
+};
+
 var Scrim = /** @class */ (function (_super) {
     tslib.__extends(Scrim, _super);
     function Scrim(props) {
@@ -364,7 +571,7 @@ var Scrim = /** @class */ (function (_super) {
         if (destroy) {
             return null;
         }
-        return (React__default.createElement("div", { ref: function (el) { return (_this.el = el); }, className: "Scrim " + animationClass }));
+        return (React__default.createElement("div", { ref: function (el) { return (_this.el = el); }, className: "Scrim ".concat(animationClass) }));
     };
     Scrim.propTypes = {
         show: PropTypes.bool.isRequired
@@ -498,9 +705,9 @@ var TopBar = /** @class */ (function (_super) {
                         args[_i] = arguments[_i];
                     }
                     // @ts-ignore we're just spreading the original args
-                    _this.onKeyDown.apply(_this, tslib.__spread(args));
+                    _this.onKeyDown.apply(_this, tslib.__spreadArray([], tslib.__read(args), false));
                     if (child.props.onKeyDown) {
-                        (_a = child.props).onKeyDown.apply(_a, tslib.__spread(args));
+                        (_a = child.props).onKeyDown.apply(_a, tslib.__spreadArray([], tslib.__read(args), false));
                     }
                 },
                 tabIndex: 0,
@@ -536,7 +743,7 @@ var TopBar = /** @class */ (function (_super) {
     };
     TopBar.prototype.onKeyDown = function (e) {
         var key = keyname(e.which);
-        var menuItems = tslib.__spread(this.menuItems);
+        var menuItems = tslib.__spreadArray([], tslib.__read(this.menuItems), false);
         // account for hidden side bar trigger (hamburger)
         if (this.state.wide && this.props.hasTrigger) {
             menuItems.shift();
@@ -592,6 +799,7 @@ var TopBarTrigger = function (_a) {
 };
 TopBarTrigger.displayName = 'TopBarTrigger';
 TopBarTrigger.propTypes = {
+    // @ts-expect-error
     children: PropTypes.node.isRequired,
     className: PropTypes.string
 };
@@ -787,7 +995,7 @@ var OptionsMenuList = /** @class */ (function (_super) {
         /* eslint-enable @typescript-eslint/no-unused-vars */
         var items = React__default.Children.toArray(children).map(function (child, i) {
             var _a = child.props, className = _a.className, other = tslib.__rest(_a, ["className"]);
-            return React__default.cloneElement(child, tslib.__assign({ key: "list-item-" + i, className: classNames('OptionsMenu__list-item', className), tabIndex: -1, role: 'menuitem', ref: function (el) { return (_this.itemRefs[i] = el); } }, other));
+            return React__default.cloneElement(child, tslib.__assign({ key: "list-item-".concat(i), className: classNames('OptionsMenu__list-item', className), tabIndex: -1, role: 'menuitem', ref: function (el) { return (_this.itemRefs[i] = el); } }, other));
         });
         // Key event is being handled in componentDidMount
         /* eslint-disable jsx-a11y/click-events-have-key-events */
@@ -1167,7 +1375,8 @@ var SideBar = /** @class */ (function (_super) {
         setTimeout(function () {
             var _a, _b;
             _this.setState({ animateClass: second });
-            var firstFocusable = show && ((_b = (_a = _this.navList) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.querySelector(focusableSelector));
+            var firstFocusable = show &&
+                ((_b = (_a = _this.navList) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.querySelector(focusableSelector));
             if (firstFocusable) {
                 firstFocusable.focus();
             }
@@ -1216,6 +1425,7 @@ SideBarItem.defaultProps = {
     autoClickLink: true
 };
 SideBarItem.propTypes = {
+    // @ts-expect-error
     children: PropTypes.node.isRequired,
     autoClickLink: PropTypes.bool
 };
@@ -1305,7 +1515,7 @@ var Dialog = /** @class */ (function (_super) {
         var close = !forceAction ? (React__default.createElement("button", { className: "Dialog__close", type: "button", onClick: this.close },
             React__default.createElement(Icon, { type: "close", "aria-hidden": "true" }),
             React__default.createElement(Offscreen, null, closeButtonText))) : null;
-        var Heading = "h" + (typeof heading === 'object' && 'level' in heading && !!heading.level
+        var Heading = "h".concat(typeof heading === 'object' && 'level' in heading && !!heading.level
             ? heading.level
             : 2);
         var Dialog = (React__default.createElement(FocusTrap, { focusTrapOptions: {
@@ -1464,7 +1674,7 @@ var SkipLink = /** @class */ (function (_super) {
         target: function (props, propName, componentName) {
             var value = props[propName];
             if (!value || typeof value !== 'string' || value[0] !== '#') {
-                return new Error("Invalid prop " + propName + " supplied to " + componentName + " (must be string starting with \"#\")");
+                return new Error("Invalid prop ".concat(propName, " supplied to ").concat(componentName, " (must be string starting with \"#\")"));
             }
         },
         skipText: PropTypes.string,
@@ -1480,6 +1690,8 @@ var Button = React.forwardRef(function (_a, ref) {
             'Button--secondary': variant === 'secondary',
             'Button--error': variant === 'error',
             Link: variant === 'link',
+            Tag: variant === 'tag',
+            'Button--tag': variant === 'tag',
             'Button--thin': thin
         }), ref: ref || buttonRef }, other), children));
 });
@@ -1609,8 +1821,8 @@ function Tooltip(_a) {
             targetElement === null || targetElement === void 0 ? void 0 : targetElement.setAttribute(association, [id, attrText].filter(Boolean).join(' '));
         }
     }, [targetElement, id]);
-    return (showTooltip || hideElementOnHidden) && isBrowser()
-        ? reactDom.createPortal(React__default.createElement("div", tslib.__assign({ id: id, className: classNames('Tooltip', "Tooltip--" + placement, className, {
+    return (React__default.createElement(React__default.Fragment, null, (showTooltip || hideElementOnHidden) && isBrowser()
+        ? reactDom.createPortal(React__default.createElement("div", tslib.__assign({ id: id, className: classNames('Tooltip', "Tooltip--".concat(placement), className, {
                 TooltipInfo: variant === 'info',
                 'Tooltip--hidden': !showTooltip && hideElementOnHidden,
                 'Tooltip--big': variant === 'big'
@@ -1618,7 +1830,7 @@ function Tooltip(_a) {
             variant !== 'big' && (React__default.createElement("div", { className: "TooltipArrow", ref: setArrowElement, style: styles.arrow })),
             children), (portal && 'current' in portal ? portal.current : portal) ||
             document.body)
-        : null;
+        : null));
 }
 Tooltip.displayName = 'Tooltip';
 Tooltip.propTypes = {
@@ -1681,6 +1893,7 @@ IconButton.propTypes = {
     as: PropTypes.elementType,
     // @ts-expect-error
     icon: PropTypes.string.isRequired,
+    // @ts-expect-error
     label: PropTypes.node.isRequired,
     // @ts-expect-error
     tooltipPlacement: PropTypes.string,
@@ -1695,7 +1908,7 @@ IconButton.displayName = 'IconButton';
 var i = 0;
 var randomId = function () {
     var num = Math.floor(Math.random() * 10000) + 1;
-    return "x_" + i++ + "_" + num;
+    return "x_".concat(i++, "_").concat(num);
 };
 
 /*
@@ -1790,16 +2003,15 @@ var Pointout = /** @class */ (function (_super) {
             visibleFocusable[elementIndex].classList.remove('Pointout--focus-active');
         };
         _this.positionRelativeToTarget = function () {
-            var _a, _b;
-            var _c = _this.props, target = _c.target, portal = _c.portal, arrowPosition = _c.arrowPosition, position = _c.position;
+            var _a = _this.props, target = _a.target, portal = _a.portal, arrowPosition = _a.arrowPosition, position = _a.position;
             if (!target) {
                 return;
             }
-            var targetNode = ((_a = target) === null || _a === void 0 ? void 0 : _a.current) ||
+            var targetNode = (target === null || target === void 0 ? void 0 : target.current) ||
                 target;
-            var portalNode = ((_b = portal) === null || _b === void 0 ? void 0 : _b.current) ||
+            var portalNode = (portal === null || portal === void 0 ? void 0 : portal.current) ||
                 portal;
-            var _d = targetNode.getBoundingClientRect(), top = _d.top, left = _d.left, width = _d.width, height = _d.height;
+            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
@@ -1807,48 +2019,48 @@ var Pointout = /** @class */ (function (_super) {
                 top -= rect.top - portalNode.scrollTop;
                 left -= rect.left - portalNode.scrollLeft;
             }
-            var _e = tslib.__read(arrowPosition.split('-'), 1), arrowBoxSide = _e[0];
+            var _c = tslib.__read(arrowPosition.split('-'), 1), arrowBoxSide = _c[0];
             var style;
             switch (arrowBoxSide) {
                 case 'right':
                     style = {
-                        left: left + "px",
-                        top: (position === 'center'
+                        left: "".concat(left, "px"),
+                        top: "".concat(position === 'center'
                             ? top + height / 2
                             : position === 'start'
                                 ? top
-                                : top + height) + "px"
+                                : top + height, "px")
                     };
                     break;
                 case 'bottom':
                     style = {
-                        top: top + "px",
-                        left: (position === 'center'
+                        top: "".concat(top, "px"),
+                        left: "".concat(position === 'center'
                             ? left + width / 2
                             : position === 'start'
                                 ? left
-                                : left + width) + "px"
+                                : left + width, "px")
                     };
                     break;
                 case 'left':
                     style = {
-                        left: left + width + "px",
-                        top: (position === 'center'
+                        left: "".concat(left + width, "px"),
+                        top: "".concat(position === 'center'
                             ? top + height / 2
                             : position === 'start'
                                 ? top
-                                : top + height) + "px"
+                                : top + height, "px")
                     };
                     break;
                 case 'top':
                 default:
                     style = {
-                        top: top + height + "px",
-                        left: (position === 'center'
+                        top: "".concat(top + height, "px"),
+                        left: "".concat(position === 'center'
                             ? left + width / 2
                             : position === 'start'
                                 ? left
-                                : left + width) + "px"
+                                : left + width, "px")
                     };
                     break;
             }
@@ -1860,7 +2072,7 @@ var Pointout = /** @class */ (function (_super) {
     }
     Pointout.prototype.getFocusableElements = function (root) {
         return root
-            ? Array.from(root.querySelectorAll(focusable + ", [data-focusable]"))
+            ? Array.from(root.querySelectorAll("".concat(focusable, ", [data-focusable]")))
             : [];
     };
     Pointout.prototype.componentDidMount = function () {
@@ -1930,11 +2142,11 @@ var Pointout = /** @class */ (function (_super) {
                     'Pointout--no-arrow': noArrow,
                     'Pointout--auto': !!target
                 },
-                _a["Pointout__arrow--" + arrowPosition] = !!arrowPosition && !noArrow,
-                _a["Pointout--" + position] = !!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.createElement("div", { className: classNames('Pointout__arrow', (_b = {},
-                    _b["Pointout__arrow--" + arrowPosition] = !!arrowPosition && !noArrow,
+                    _b["Pointout__arrow--".concat(arrowPosition)] = !!arrowPosition && !noArrow,
                     _b)) },
                 React__default.createElement("div", { className: "Pointout__arrow-pointer" }))),
             React__default.createElement("div", { className: "Pointout__box" },
@@ -2115,7 +2327,7 @@ var Toast = /** @class */ (function (_super) {
         var scrim = type === 'action-needed' && show ? (React__default.createElement("div", { className: "Scrim--light Scrim--show Scrim--fade-in" })) : null;
         var defaultProps = {
             tabIndex: -1,
-            className: "Toast Toast--" + typeMap[type].className + " " + animationClass
+            className: "Toast Toast--".concat(typeMap[type].className, " ").concat(animationClass)
         };
         if (!focus) {
             defaultProps.role = 'alert';
@@ -2223,7 +2435,7 @@ Link.propTypes = {
 };
 Link.displayName = 'Link';
 
-function Loader(_a) {
+var Loader = React__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"]);
     if (label === null || label === void 0 ? void 0 : label.length) {
         props['role'] = 'alert';
@@ -2232,12 +2444,8 @@ function Loader(_a) {
     else {
         props['aria-hidden'] = true;
     }
-    return (React__default.createElement("div", tslib.__assign({ className: classNames('Loader', className, variant === 'large'
-            ? 'Loader--large'
-            : variant === 'small'
-                ? 'Loader--small'
-                : '') }, props)));
-}
+    return (React__default.createElement("div", tslib.__assign({ ref: ref, className: classNames('Loader', className, variant === 'large' && 'Loader--large', variant === 'small' && 'Loader--small') }, props)));
+});
 Loader.propTypes = {
     className: PropTypes.string
 };
@@ -2305,9 +2513,10 @@ var Select = React__default.forwardRef(function (_a, ref) {
                 'Field__select--disabled': disabled,
                 'Field--has-error': !!error
             }) },
-            React__default.createElement("select", tslib.__assign({ ref: ref, id: selectId, disabled: disabled, required: required, onChange: handleChange }, dynamicProps, rest), (options === null || options === void 0 ? void 0 : options.length) ? options.map(function (option) {
-                return (React__default.createElement("option", { className: "Field__option", key: option.key, value: option.value, disabled: option.disabled }, option.label || option.value));
-            })
+            React__default.createElement("select", tslib.__assign({ ref: ref, id: selectId, disabled: disabled, required: required, onChange: handleChange }, dynamicProps, rest), (options === null || options === void 0 ? void 0 : options.length)
+                ? options.map(function (option) {
+                    return (React__default.createElement("option", { className: "Field__option", key: option.key, value: option.value, disabled: option.disabled }, option.label || option.value));
+                })
                 : children),
             React__default.createElement("div", { className: "arrow-down" })),
         error && (React__default.createElement("div", { id: errorId, className: "Error" }, error))));
@@ -2356,7 +2565,7 @@ var RadioGroup = function (_a) {
                     var _a;
                     handleChange(radioValue);
                     onChange(radio, (_a = inputs.current) === null || _a === void 0 ? void 0 : _a[index]);
-                }, disabled: disabled, checked: isChecked, "aria-describedby": labelDescription ? id + "Desc" : undefined }, other)),
+                }, disabled: disabled, checked: isChecked, "aria-describedby": labelDescription ? "".concat(id, "Desc") : undefined }, other)),
             React__default.createElement("label", { htmlFor: id, className: classNames('Field__label', {
                     'Field__label--disabled': disabled
                 }) }, label),
@@ -2364,7 +2573,7 @@ var RadioGroup = function (_a) {
                     'Radio__overlay--focused': isFocused,
                     'Radio__overlay--disabled': disabled
                 }), type: isChecked ? 'radio-checked' : 'radio-unchecked', "aria-hidden": "true", onClick: function () { return onRadioClick(index); } }),
-            labelDescription && (React__default.createElement("span", { id: id + "Desc", className: classNames('Field__labelDescription', {
+            labelDescription && (React__default.createElement("span", { id: "".concat(id, "Desc"), className: classNames('Field__labelDescription', {
                     'Field__labelDescription--disabled': disabled
                 }) }, labelDescription))));
     });
@@ -2384,7 +2593,7 @@ RadioGroup.propTypes = {
     })).isRequired,
     hasLabel: function (props, propName, componentName) {
         if (!props['aria-label'] && !props['aria-labelledby']) {
-            return new Error(componentName + " must have an \"aria-label\" or \"aria-labelledby\" prop");
+            return new Error("".concat(componentName, " must have an \"aria-label\" or \"aria-labelledby\" prop"));
         }
     },
     className: PropTypes.string,
@@ -2393,6 +2602,125 @@ RadioGroup.propTypes = {
 };
 RadioGroup.displayName = 'RadioGroup';
 
+var Card = function (_a) {
+    var className = _a.className, variant = _a.variant, other = tslib.__rest(_a, ["className", "variant"]);
+    return (React__default.createElement("div", tslib.__assign({ className: classNames(className, {
+            'Card--simple': variant === 'simple',
+            Card: !variant
+        }) }, other)));
+};
+Card.displayName = 'Card';
+Card.propTypes = {
+    className: PropTypes.string,
+    variant: PropTypes.string
+};
+
+var CardHeader = function (_a) {
+    var className = _a.className, other = tslib.__rest(_a, ["className"]);
+    return (React__default.createElement("div", tslib.__assign({ className: classNames('Card__header', className) }, other)));
+};
+CardHeader.displayName = 'CardHeader';
+CardHeader.propTypes = {
+    className: PropTypes.string
+};
+
+var CardContent = function (_a) {
+    var className = _a.className, other = tslib.__rest(_a, ["className"]);
+    return (React__default.createElement("div", tslib.__assign({ className: classNames('Card__content', className) }, other)));
+};
+CardContent.displayName = 'CardContent';
+CardContent.propTypes = {
+    className: PropTypes.string
+};
+
+var CardFooter = function (_a) {
+    var className = _a.className, other = tslib.__rest(_a, ["className"]);
+    return (React__default.createElement("div", tslib.__assign({ className: classNames('Card__footer', className) }, other)));
+};
+CardFooter.displayName = 'CardFooter';
+CardFooter.propTypes = {
+    className: PropTypes.string
+};
+
+var RadioCardGroup = function (_a) {
+    var name = _a.name, radios = _a.radios, defaultValue = _a.defaultValue, value = _a.value, 
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    _b = _a.onChange, 
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onChange = _b === void 0 ? function () { } : _b, className = _a.className, other = tslib.__rest(_a, ["name", "radios", "defaultValue", "value", "onChange", "className"]);
+    var _c = tslib.__read(React.useState(value !== null && value !== void 0 ? value : defaultValue), 2), currentValue = _c[0], setCurrentValue = _c[1];
+    var _d = tslib.__read(React.useState(null), 2), focusIndex = _d[0], setFocusIndex = _d[1];
+    var inputs = React.useRef([]);
+    var handleChange = function (value) { return setCurrentValue(value); };
+    var onRadioFocus = function (index) { return setFocusIndex(index); };
+    var onRadioBlur = function () { return setFocusIndex(null); };
+    var onRadioClick = function (index) {
+        var _a;
+        var radio = (_a = inputs.current) === null || _a === void 0 ? void 0 : _a[index];
+        if (!radio) {
+            return;
+        }
+        radio.click();
+        radio.focus();
+    };
+    React.useEffect(function () {
+        if (typeof value === 'undefined') {
+            return;
+        }
+        setCurrentValue(value);
+    }, [value]);
+    var radioButtons = radios.map(function (radio, index) {
+        var label = radio.label, disabled = radio.disabled, radioValue = radio.value, cardImg = radio.cardImg, cardIcon = radio.cardIcon, id = radio.id, className = radio.className, other = tslib.__rest(radio, ["label", "disabled", "value", "cardImg", "cardIcon", "id", "className"]);
+        var isChecked = currentValue === radioValue;
+        var isFocused = focusIndex === index;
+        return (React__default.createElement("div", { className: classNames('RadioCard'), key: index },
+            React__default.createElement(Card, { variant: "simple", className: classNames('RadioCardGroup__Card RadioCard__overlay', {
+                    'RadioCard__overlay--focused': isFocused,
+                    'RadioCard__overlay--checked': isChecked,
+                    'RadioCard__overlay--disabled': disabled
+                }), onClick: function () { return onRadioClick(index); } },
+                React__default.createElement("input", tslib.__assign({ type: "radio", name: name, value: radioValue, id: id, ref: function (input) {
+                        if (!input) {
+                            return;
+                        }
+                        inputs.current.push(input);
+                    }, onFocus: function () { return onRadioFocus(index); }, onBlur: function () { return onRadioBlur(); }, onChange: function () {
+                        var _a;
+                        handleChange(radioValue);
+                        onChange(radio, (_a = inputs.current) === null || _a === void 0 ? void 0 : _a[index]);
+                    }, disabled: disabled, checked: isChecked }, other)),
+                React__default.createElement(CardContent, null,
+                    React__default.createElement("div", { className: classNames('RadioCardGroup__Checked') }, isChecked && (React__default.createElement(Icon, { className: classNames('RadioCardGroup__Icon'), type: cardIcon }))),
+                    React__default.createElement("div", { className: classNames('RadioCardGroup__Base') },
+                        React__default.createElement("div", { className: classNames('RadioCardGroup__Image') }, cardImg),
+                        React__default.createElement("label", { htmlFor: id, className: classNames('RadioCardGroup__Label') }, label))))));
+    });
+    // reset the input refs array
+    // refs get clobbered every re-render anyway and this supports "dynamic" radios
+    // (changing the number of radio buttons for example)
+    inputs.current = [];
+    return (React__default.createElement("div", tslib.__assign({ className: classNames('RadioCardGroup'), role: "radiogroup" }, other), radioButtons));
+};
+RadioCardGroup.propTypes = {
+    name: PropTypes.string,
+    radios: PropTypes.arrayOf(PropTypes.shape({
+        value: PropTypes.string.isRequired,
+        id: PropTypes.string.isRequired,
+        label: PropTypes.string.isRequired,
+        cardImg: PropTypes.element.isRequired,
+        cardIcon: PropTypes.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.string,
+    defaultValue: PropTypes.string,
+    onChange: PropTypes.func
+};
+RadioCardGroup.displayName = 'RadioCardGroup';
+
 var Checkbox = React.forwardRef(function (_a, ref) {
     var id = _a.id, label = _a.label, labelDescription = _a.labelDescription, error = _a.error, checkboxRef = _a.checkboxRef, className = _a.className, onChange = _a.onChange, ariaDescribedby = _a["aria-describedby"], _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, other = tslib.__rest(_a, ["id", "label", "labelDescription", "error", "checkboxRef", "className", "onChange", 'aria-describedby', "disabled", "checked"]);
     var _d = tslib.__read(React.useState(checked), 2), isChecked = _d[0], setIsChecked = _d[1];
@@ -2462,46 +2790,6 @@ function TooltipTabstop(_a) {
 }
 TooltipTabstop.displayName = 'TooltipTabstop';
 
-var Card = function (_a) {
-    var className = _a.className, variant = _a.variant, other = tslib.__rest(_a, ["className", "variant"]);
-    return (React__default.createElement("div", tslib.__assign({ className: classNames(className, {
-            'Card--simple': variant === 'simple',
-            Card: !variant
-        }) }, other)));
-};
-Card.displayName = 'Card';
-Card.propTypes = {
-    className: PropTypes.string,
-    variant: PropTypes.string
-};
-
-var CardHeader = function (_a) {
-    var className = _a.className, other = tslib.__rest(_a, ["className"]);
-    return (React__default.createElement("div", tslib.__assign({ className: classNames('Card__header', className) }, other)));
-};
-CardHeader.displayName = 'CardHeader';
-CardHeader.propTypes = {
-    className: PropTypes.string
-};
-
-var CardContent = function (_a) {
-    var className = _a.className, other = tslib.__rest(_a, ["className"]);
-    return (React__default.createElement("div", tslib.__assign({ className: classNames('Card__content', className) }, other)));
-};
-CardContent.displayName = 'CardContent';
-CardContent.propTypes = {
-    className: PropTypes.string
-};
-
-var CardFooter = function (_a) {
-    var className = _a.className, other = tslib.__rest(_a, ["className"]);
-    return (React__default.createElement("div", tslib.__assign({ className: classNames('Card__footer', className) }, other)));
-};
-CardFooter.displayName = 'CardFooter';
-CardFooter.propTypes = {
-    className: PropTypes.string
-};
-
 var TextField = /** @class */ (function (_super) {
     tslib.__extends(TextField, _super);
     function TextField(props) {
@@ -2595,152 +2883,6 @@ var TextField = /** @class */ (function (_super) {
     return TextField;
 }(React__default.Component));
 
-function PanelTrigger(_a) {
-    var children = _a.children, className = _a.className, open = _a.open, fullWidth = _a.fullWidth, onClick = _a.onClick, _b = _a.iconExpanded, iconExpanded = _b === void 0 ? 'chevron-down' : _b, _c = _a.iconCollapsed, iconCollapsed = _c === void 0 ? 'chevron-right' : _c, other = tslib.__rest(_a, ["children", "className", "open", "fullWidth", "onClick", "iconExpanded", "iconCollapsed"]);
-    return (React__default.createElement("button", tslib.__assign({}, other, { className: classNames('ExpandCollapse__trigger', fullWidth ? 'fullWidth' : '', className), type: "button", "aria-expanded": open, onClick: onClick }),
-        React__default.createElement("div", { className: "ExpandCollapse__trigger-title" }, typeof children === 'function' ? children({ open: !!open }) : children),
-        React__default.createElement(Icon, { type: open ? iconExpanded : iconCollapsed })));
-}
-PanelTrigger.propTypes = {
-    children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-    open: PropTypes.bool,
-    onClick: PropTypes.func,
-    className: PropTypes.string,
-    iconExpanded: PropTypes.string,
-    iconCollapsed: PropTypes.string
-};
-var PanelTrigger$1 = React__default.memo(PanelTrigger);
-
-var injectStyleTag = function () {
-    var style = document.createElement('style');
-    document.head.appendChild(style);
-    return style;
-};
-var setStyle = function (tag, cssString) {
-    tag.textContent = cssString;
-};
-var removeStyleTag = function (tag) {
-    document.head.removeChild(tag);
-};
-
-var ExpandCollapsePanel = /** @class */ (function (_super) {
-    tslib.__extends(ExpandCollapsePanel, _super);
-    function ExpandCollapsePanel() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.state = {
-            controlled: typeof _this.props.open !== 'undefined',
-            isOpen: typeof _this.props.open !== 'undefined' ? _this.props.open : false
-        };
-        _this.panel = React__default.createRef();
-        _this.handleToggle = function (e) {
-            var onToggle = _this.props.onToggle;
-            var _a = _this.state, isOpen = _a.isOpen, controlled = _a.controlled;
-            onToggle(e);
-            if (!controlled) {
-                _this.setState({ isOpen: !isOpen, isAnimating: true });
-            }
-        };
-        _this.animateOpen = function () {
-            var panel = _this.panel.current;
-            var animationTiming = _this.props.animationTiming;
-            if (!animationTiming) {
-                _this.setState({ isAnimating: false });
-                return;
-            }
-            var rect = panel === null || panel === void 0 ? void 0 : panel.getBoundingClientRect();
-            if (!rect) {
-                return;
-            }
-            if (!_this.styleTag) {
-                _this.styleTag = injectStyleTag();
-            }
-            setStyle(_this.styleTag, "\n      @keyframes expandOpenAnimation {\n        0% { opacity: 0; height: 0; }\n        100% { opacity: 1; height: " + rect.height + "px; }\n      }\n\n      .cauldron-expand-open {\n        will-change: opacity, height;\n        overflow: hidden;\n        animation: expandOpenAnimation ease-in-out " + animationTiming + "ms forwards;\n      }\n    ");
-            _this.setState({ animationClass: 'cauldron-expand-open' }, function () {
-                setTimeout(function () {
-                    _this.setState({ animationClass: '', isAnimating: false });
-                    setStyle(_this.styleTag, '');
-                }, animationTiming);
-            });
-        };
-        _this.animateClose = function () {
-            var panel = _this.panel.current;
-            var animationTiming = _this.props.animationTiming;
-            if (!animationTiming) {
-                _this.setState({ isAnimating: false });
-                return;
-            }
-            if (!_this.styleTag) {
-                _this.styleTag = injectStyleTag();
-            }
-            var rect = panel === null || panel === void 0 ? void 0 : panel.getBoundingClientRect();
-            if (!rect)
-                return;
-            setStyle(_this.styleTag, "\n      @keyframes collapseCloseAnimation {\n        0% { opacity: 1; height: " + rect.height + "px; }\n        100% { opacity: 0; height: 0; }\n      }\n\n      .cauldron-collapse-close {\n        will-change: opacity, height;\n        overflow: hidden;\n        animation: collapseCloseAnimation ease-in-out " + animationTiming + "ms forwards;\n      }\n    ");
-            _this.setState({ animationClass: 'cauldron-collapse-close' }, function () {
-                setTimeout(function () {
-                    _this.setState({ animationClass: '', isAnimating: false });
-                    setStyle(_this.styleTag, '');
-                }, animationTiming);
-            });
-        };
-        return _this;
-    }
-    ExpandCollapsePanel.prototype.componentWillUnmount = function () {
-        var styleTag = this.styleTag;
-        if (styleTag) {
-            removeStyleTag(styleTag);
-        }
-    };
-    ExpandCollapsePanel.prototype.componentDidUpdate = function (prevProps, prevState) {
-        var _a = this.state, openState = _a.isOpen, controlled = _a.controlled;
-        var openProp = this.props.open;
-        if (controlled && openState !== openProp) {
-            this.setState({ isOpen: !!openProp, isAnimating: true });
-        }
-        if (typeof openProp !== typeof prevProps.open) {
-            this.setState({ controlled: typeof openProp !== 'undefined' });
-        }
-        if (prevState.isOpen !== openState && openState) {
-            this.animateOpen();
-        }
-        else if (prevState.isOpen !== openState && !openState) {
-            this.animateClose();
-        }
-    };
-    ExpandCollapsePanel.prototype.render = function () {
-        /* eslint-disable no-unused-vars */
-        var _a = this.props, children = _a.children, animationTiming = _a.animationTiming, className = _a.className, onToggle = _a.onToggle, open = _a.open, other = tslib.__rest(_a, ["children", "animationTiming", "className", "onToggle", "open"]);
-        /* eslint-enable no-unused-vars */
-        var _b = this.state, isOpen = _b.isOpen, isAnimating = _b.isAnimating, animationClass = _b.animationClass;
-        var trigger = React__default.Children.toArray(children).find(function (child) { return child.type === PanelTrigger$1; });
-        var panelElements = React__default.Children.toArray(children).filter(function (child) {
-            return typeof child === 'string' ||
-                child.type !== PanelTrigger$1;
-        });
-        return (React__default.createElement(React__default.Fragment, null,
-            trigger &&
-                React__default.cloneElement(trigger, {
-                    open: isOpen,
-                    onClick: this.handleToggle
-                }),
-            React__default.createElement("div", tslib.__assign({}, other, { className: classNames('ExpandCollapse__panel', animationClass, className, {
-                    'is--hidden': !isOpen && !isAnimating
-                }), ref: this.panel }), panelElements)));
-    };
-    ExpandCollapsePanel.defaultProps = {
-        animationTiming: 250,
-        onToggle: function () { }
-    };
-    ExpandCollapsePanel.propTypes = {
-        open: PropTypes.bool,
-        children: PropTypes.node.isRequired,
-        className: PropTypes.string,
-        animationTiming: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
-        onToggle: PropTypes.func
-    };
-    return ExpandCollapsePanel;
-}(React__default.Component));
-
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -2843,27 +2985,6 @@ function _defineProperty(obj, key, value) {
 
 var defineProperty = _defineProperty;
 
-function _objectSpread(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? Object(arguments[i]) : {};
-    var ownKeys = Object.keys(source);
-
-    if (typeof Object.getOwnPropertySymbols === 'function') {
-      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-      }));
-    }
-
-    ownKeys.forEach(function (key) {
-      defineProperty(target, key, source[key]);
-    });
-  }
-
-  return target;
-}
-
-var objectSpread = _objectSpread;
-
 function createCommonjsModule(fn, basedir, module) {
 	return module = {
 	  path: basedir,
@@ -2900,6 +3021,9 @@ function _extends() {
 module.exports = _extends;
 });
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 //
 // Super simple, non-algorithmic solution since the
 // number of class names will not be greater than 4
@@ -2945,7 +3069,7 @@ function createStyleObject(classNames) {
   });
   var classNamesCombinations = getClassNameCombinations(nonTokenClassNames);
   return classNamesCombinations.reduce(function (styleObject, className) {
-    return objectSpread({}, styleObject, stylesheet[className]);
+    return _objectSpread(_objectSpread({}, styleObject), stylesheet[className]);
   }, elementStyle);
 }
 function createClassNameString(classNames) {
@@ -2984,7 +3108,7 @@ function createElement(_ref) {
     var props;
 
     if (!useInlineStyles) {
-      props = objectSpread({}, properties, {
+      props = _objectSpread(_objectSpread({}, properties), {}, {
         className: createClassNameString(properties.className)
       });
     } else {
@@ -2999,14 +3123,14 @@ function createElement(_ref) {
       var className = properties.className && startingClassName.concat(properties.className.filter(function (className) {
         return !allStylesheetSelectors.includes(className);
       }));
-      props = objectSpread({}, properties, {
+      props = _objectSpread(_objectSpread({}, properties), {}, {
         className: createClassNameString(className) || undefined,
         style: createStyleObject(properties.className, Object.assign({}, properties.style, style), stylesheet)
       });
     }
 
     var children = childrenCreator(node.children);
-    return React__default.createElement(TagName, _extends_1({
+    return /*#__PURE__*/React__default.createElement(TagName, _extends_1({
       key: key
     }, props), children);
   }
@@ -3017,6 +3141,11 @@ var checkForListedLanguage = (function (astGenerator, language) {
   return langs.indexOf(language) !== -1;
 });
 
+var _excluded = ["language", "children", "style", "customStyle", "codeTagProps", "useInlineStyles", "showLineNumbers", "showInlineLineNumbers", "startingLineNumber", "lineNumberContainerStyle", "lineNumberStyle", "wrapLines", "wrapLongLines", "lineProps", "renderer", "PreTag", "CodeTag", "code", "astGenerator"];
+
+function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var newLineRegex = /\n/g;
 
 function getNewLines(str) {
@@ -3029,7 +3158,7 @@ function getAllLineNumbers(_ref) {
       style = _ref.style;
   return lines.map(function (_, i) {
     var number = i + startingLineNumber;
-    return React__default.createElement("span", {
+    return /*#__PURE__*/React__default.createElement("span", {
       key: "line-".concat(i),
       className: "react-syntax-highlighter-line-number",
       style: typeof style === 'function' ? style(number) : style
@@ -3042,13 +3171,13 @@ function AllLineNumbers(_ref2) {
       codeStyle = _ref2.codeStyle,
       _ref2$containerStyle = _ref2.containerStyle,
       containerStyle = _ref2$containerStyle === void 0 ? {
-    float: 'left',
+    "float": 'left',
     paddingRight: '10px'
   } : _ref2$containerStyle,
       _ref2$numberStyle = _ref2.numberStyle,
       numberStyle = _ref2$numberStyle === void 0 ? {} : _ref2$numberStyle,
       startingLineNumber = _ref2.startingLineNumber;
-  return React__default.createElement("code", {
+  return /*#__PURE__*/React__default.createElement("code", {
     style: Object.assign({}, codeStyle, containerStyle)
   }, getAllLineNumbers({
     lines: codeString.replace(/\n$/, '').split('\n'),
@@ -3089,7 +3218,7 @@ function assembleLineNumberStyles(lineNumberStyle, lineNumber, largestLineNumber
 
   var customLineNumberStyle = typeof lineNumberStyle === 'function' ? lineNumberStyle(lineNumber) : lineNumberStyle; // combine
 
-  var assembledStyle = objectSpread({}, defaultLineNumberStyle, customLineNumberStyle);
+  var assembledStyle = _objectSpread$1(_objectSpread$1({}, defaultLineNumberStyle), customLineNumberStyle);
 
   return assembledStyle;
 }
@@ -3115,7 +3244,7 @@ function createLineElement(_ref3) {
   }
 
   if (wrapLongLines & showLineNumbers) {
-    properties.style = objectSpread({}, properties.style, {
+    properties.style = _objectSpread$1(_objectSpread$1({}, properties.style), {}, {
       display: 'flex'
     });
   }
@@ -3142,7 +3271,9 @@ function flattenCodeTree(tree) {
       }));
     } else if (node.children) {
       var classNames = className.concat(node.properties.className);
-      newTree = newTree.concat(flattenCodeTree(node.children, classNames));
+      flattenCodeTree(node.children, classNames).forEach(function (i) {
+        return newTree.push(i);
+      });
     }
   }
 
@@ -3211,19 +3342,19 @@ function processLines(codeTree, wrapLines, lineProps, showLineNumbers, showInlin
           newTree.push(_line); // if it's the last line
         } else if (i === splitValue.length - 1) {
           var stringChild = tree[index + 1] && tree[index + 1].children && tree[index + 1].children[0];
+          var lastLineInPreviousSpan = {
+            type: 'text',
+            value: "".concat(text)
+          };
 
           if (stringChild) {
-            var lastLineInPreviousSpan = {
-              type: 'text',
-              value: "".concat(text)
-            };
             var newElem = createLineElement({
               children: [lastLineInPreviousSpan],
               className: node.properties.className
             });
             tree.splice(index + 1, 0, newElem);
           } else {
-            var _children2 = [newChild];
+            var _children2 = [lastLineInPreviousSpan];
 
             var _line2 = createLine(_children2, lineNumber, node.properties.className);
 
@@ -3329,7 +3460,7 @@ function highlight (defaultAstGenerator, defaultStyle) {
         _ref7$codeTagProps = _ref7.codeTagProps,
         codeTagProps = _ref7$codeTagProps === void 0 ? {
       className: language ? "language-".concat(language) : undefined,
-      style: objectSpread({}, style['code[class*="language-"]'], style["code[class*=\"language-".concat(language, "\"]")])
+      style: _objectSpread$1(_objectSpread$1({}, style['code[class*="language-"]']), style["code[class*=\"language-".concat(language, "\"]")])
     } : _ref7$codeTagProps,
         _ref7$useInlineStyles = _ref7.useInlineStyles,
         useInlineStyles = _ref7$useInlineStyles === void 0 ? true : _ref7$useInlineStyles,
@@ -3353,12 +3484,12 @@ function highlight (defaultAstGenerator, defaultStyle) {
         _ref7$CodeTag = _ref7.CodeTag,
         CodeTag = _ref7$CodeTag === void 0 ? 'code' : _ref7$CodeTag,
         _ref7$code = _ref7.code,
-        code = _ref7$code === void 0 ? Array.isArray(children) ? children[0] : children : _ref7$code,
+        code = _ref7$code === void 0 ? (Array.isArray(children) ? children[0] : children) || '' : _ref7$code,
         astGenerator = _ref7.astGenerator,
-        rest = objectWithoutProperties(_ref7, ["language", "children", "style", "customStyle", "codeTagProps", "useInlineStyles", "showLineNumbers", "showInlineLineNumbers", "startingLineNumber", "lineNumberContainerStyle", "lineNumberStyle", "wrapLines", "wrapLongLines", "lineProps", "renderer", "PreTag", "CodeTag", "code", "astGenerator"]);
+        rest = objectWithoutProperties(_ref7, _excluded);
 
     astGenerator = astGenerator || defaultAstGenerator;
-    var allLineNumbers = showLineNumbers ? React__default.createElement(AllLineNumbers, {
+    var allLineNumbers = showLineNumbers ? /*#__PURE__*/React__default.createElement(AllLineNumbers, {
       containerStyle: lineNumberContainerStyle,
       codeStyle: codeTagProps.style || {},
       numberStyle: lineNumberStyle,
@@ -3376,8 +3507,18 @@ function highlight (defaultAstGenerator, defaultStyle) {
       style: Object.assign({}, customStyle)
     });
 
+    if (wrapLongLines) {
+      codeTagProps.style = _objectSpread$1(_objectSpread$1({}, codeTagProps.style), {}, {
+        whiteSpace: 'pre-wrap'
+      });
+    } else {
+      codeTagProps.style = _objectSpread$1(_objectSpread$1({}, codeTagProps.style), {}, {
+        whiteSpace: 'pre'
+      });
+    }
+
     if (!astGenerator) {
-      return React__default.createElement(PreTag, preProps, allLineNumbers, React__default.createElement(CodeTag, codeTagProps, code));
+      return /*#__PURE__*/React__default.createElement(PreTag, preProps, allLineNumbers, /*#__PURE__*/React__default.createElement(CodeTag, codeTagProps, code));
     }
     /*
      * Some custom renderers rely on individual row elements so we need to turn wrapLines on
@@ -3405,18 +3546,7 @@ function highlight (defaultAstGenerator, defaultStyle) {
 
     var largestLineNumber = codeTree.value.length + startingLineNumber;
     var rows = processLines(codeTree, wrapLines, lineProps, showLineNumbers, showInlineLineNumbers, startingLineNumber, largestLineNumber, lineNumberStyle, wrapLongLines);
-
-    if (wrapLongLines) {
-      codeTagProps.style = objectSpread({}, codeTagProps.style, {
-        whiteSpace: 'pre-wrap'
-      });
-    } else {
-      codeTagProps.style = objectSpread({}, codeTagProps.style, {
-        whiteSpace: 'pre'
-      });
-    }
-
-    return React__default.createElement(PreTag, preProps, React__default.createElement(CodeTag, codeTagProps, !showInlineLineNumbers && allLineNumbers, renderer({
+    return /*#__PURE__*/React__default.createElement(PreTag, preProps, /*#__PURE__*/React__default.createElement(CodeTag, codeTagProps, !showInlineLineNumbers && allLineNumbers, renderer({
       rows: rows,
       stylesheet: style,
       useInlineStyles: useInlineStyles
@@ -7981,15 +8111,19 @@ SyntaxHighlighter.registerLanguage('javascript', javascript_1);
 SyntaxHighlighter.registerLanguage('css', css_1);
 SyntaxHighlighter.registerLanguage('html', xml_1);
 SyntaxHighlighter.registerLanguage('yaml', yaml_1);
+// HACK: This is a workaround for a bug in react-syntax-highlighter's types.
+var Highlighter = SyntaxHighlighter;
 var Code = function (_a) {
     var children = _a.children, className = _a.className, tabIndex = _a.tabIndex, props = tslib.__rest(_a, ["children", "className", "tabIndex"]);
-    return (React__default.createElement(SyntaxHighlighter, tslib.__assign({}, props, { useInlineStyles: false, className: classNames('Code', className), tabIndex: tabIndex }), children));
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Highlighter, tslib.__assign({}, props, { useInlineStyles: false, className: classNames('Code', className), tabIndex: tabIndex }), children)));
 };
 Code.displayName = 'Code';
 Code.propTypes = {
     children: PropTypes.string.isRequired,
     language: PropTypes.oneOf(['javascript', 'css', 'html', 'yaml']),
-    className: PropTypes.string
+    className: PropTypes.string,
+    tabIndex: PropTypes.number
 };
 
 function AxeLoader() {
@@ -8023,6 +8157,17 @@ 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 overlayRef = useSharedRef(ref);
+    React.useEffect(function () {
+        var isolator = overlayRef.current
+            ? new AriaIsolate(overlayRef.current)
+            : null;
+        if (isolator) {
+            focusTrap ? isolator.activate() : isolator.deactivate();
+        }
+        return function () {
+            isolator === null || isolator === void 0 ? void 0 : isolator.deactivate();
+        };
+    }, [focusTrap, overlayRef.current]);
     React.useEffect(function () {
         if (!!focusOnInitialRender && overlayRef.current) {
             setTimeout(function () {
@@ -8057,6 +8202,7 @@ LoaderOverlay.propTypes = {
     variant: PropTypes.oneOf(['large', 'small']),
     label: PropTypes.string,
     focusOnInitialRender: PropTypes.bool,
+    // @ts-expect-error
     children: PropTypes.node
 };
 LoaderOverlay.displayName = 'LoaderOverlay';
@@ -8176,6 +8322,7 @@ Tab.displayName = 'Tab';
 Tab.propTypes = {
     target: PropTypes.any.isRequired,
     id: PropTypes.string,
+    // @ts-expect-error
     children: PropTypes.node
 };
 
@@ -8270,7 +8417,8 @@ var Tabs = function (_a) {
         React.useEffect(function () {
             var _a, _b;
             index === activeIndex
-                ? (_a = target.current) === null || _a === void 0 ? void 0 : _a.classList.remove('TabPanel--hidden') : (_b = target.current) === null || _b === void 0 ? void 0 : _b.classList.add('TabPanel--hidden');
+                ? (_a = target.current) === null || _a === void 0 ? void 0 : _a.classList.remove('TabPanel--hidden')
+                : (_b = target.current) === null || _b === void 0 ? void 0 : _b.classList.add('TabPanel--hidden');
         }, [activeIndex]);
         var config = tslib.__assign((_a = { id: id, className: classNames('Tab', {
                     'Tab--active': selected
@@ -8310,6 +8458,7 @@ var TabPanel = React.forwardRef(function (_a, ref) {
 TabPanel.displayName = 'TabPanel';
 TabPanel.propTypes = {
     id: PropTypes.string,
+    // @ts-expect-error
     children: PropTypes.node,
     className: PropTypes.string
 };
@@ -8356,12 +8505,12 @@ var Step = function (props) {
     var liProps;
     var isTooltip = isTooltipProps(other);
     if (isTooltip) {
-        (_a = other, (tooltip = _a.tooltip, tooltipText = _a.tooltipText, _a), liProps = tslib.__rest(_a, ["tooltip", "tooltipText"]));
+        (_a = other, (tooltip = _a.tooltip, tooltipText = _a.tooltipText), liProps = tslib.__rest(_a, ["tooltip", "tooltipText"]));
     }
     else {
         liProps = other;
     }
-    return (React__default.createElement("li", tslib.__assign({ className: classNames('Stepper__step', "Stepper__step--" + status, className), "aria-current": status === 'current' ? 'step' : 'false' }, liProps),
+    return (React__default.createElement("li", tslib.__assign({ className: classNames('Stepper__step', "Stepper__step--".concat(status), className), "aria-current": status === 'current' ? 'step' : 'false' }, liProps),
         React__default.createElement("div", { className: "Stepper__step-line" }),
         React__default.createElement("div", { className: "Stepper__step-content" }, isTooltip ? (React__default.createElement(TooltipTabstop, { placement: "bottom", tooltip: tooltip, 
             // the pseudo content (ex: "1") is conveyed
@@ -8391,7 +8540,7 @@ Stepper.propTypes = {
     className: PropTypes.string
 };
 
-var Panel = function (_a) {
+var Panel = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, collapsed = _a.collapsed, className = _a.className, heading = _a.heading, other = tslib.__rest(_a, ["children", "collapsed", "className", "heading"]);
     var headingId = !heading
@@ -8403,22 +8552,27 @@ var Panel = function (_a) {
         if (!headingId) {
             return null;
         }
-        var HeadingComponent = "h" + (typeof heading === 'object' && 'level' in heading && !!heading.level
+        var HeadingComponent = "h".concat(heading &&
+            typeof heading === 'object' &&
+            'level' in heading &&
+            !!heading.level
             ? heading.level
             : 2);
-        return (React__default.createElement(HeadingComponent, { id: headingId, className: "Panel__Heading" }, typeof heading === 'object' && 'text' in heading
+        return (React__default.createElement(HeadingComponent, { id: headingId, className: "Panel__Heading" }, heading && typeof heading === 'object' && 'text' in heading
             ? heading.text
             : heading));
     };
     return (React__default.createElement("section", tslib.__assign({ "aria-labelledby": headingId, className: classNames('Panel', className, (_b = {},
             _b['Panel--collapsed'] = collapsed,
-            _b)) }, other),
+            _b)), ref: ref }, other),
         React__default.createElement(Heading, null),
         children));
-};
+});
 Panel.displayName = 'Panel';
 Panel.propTypes = {
+    // @ts-expect-error
     children: PropTypes.node.isRequired,
+    // @ts-expect-error
     heading: PropTypes.oneOfType([PropTypes.object, PropTypes.node]),
     className: PropTypes.string
 };
@@ -8428,7 +8582,7 @@ var IssuePanel = function (_a) {
     return (React__default.createElement("div", { className: classNames('IssuePanel', className) },
         React__default.createElement("div", { className: "IssuePanel__Header" },
             title && React__default.createElement("div", { className: "IssuePanel__Header-title" }, title),
-            actions && React__default.createElement("div", { className: "IssuePanel__Header-actions" }, actions)),
+            actions && (React__default.createElement("div", { className: "IssuePanel__Header-actions" }, actions))),
         React__default.createElement("div", { className: "IssuePanel__Content" }, children)));
 };
 IssuePanel.displayName = 'IssuePanel';
@@ -8441,7 +8595,7 @@ 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"]);
     return (React__default.createElement("div", tslib.__assign({ className: classNames('ProgressBar', className), role: "progressbar", "aria-valuemin": progressMin, "aria-valuemax": progressMax, "aria-valuenow": progress, ref: ref }, otherProps),
-        React__default.createElement("div", { className: "ProgressBar--fill", style: { width: Math.min((progress / progressMax) * 100, 100) + "%" } })));
+        React__default.createElement("div", { className: "ProgressBar--fill", style: { width: "".concat(Math.min((progress / progressMax) * 100, 100), "%") } })));
 });
 ProgressBar.displayName = 'ProgressBar';
 
@@ -8522,12 +8676,41 @@ Pagination.propTypes = {
     className: PropTypes.string
 };
 
+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;
+    var _d = tslib.__read(React.useState(initialPage), 2), currentPage = _d[0], setCurrentPage = _d[1];
+    var pageStart = currentPage * initialPageSize - initialPageSize + 1;
+    var pageEnd = Math.min(pageStart + initialPageSize - 1, totalItems);
+    var onFirstPageClick = function () { return setCurrentPage(1); };
+    var onPreviousPageClick = function () { return setCurrentPage(currentPage - 1); };
+    var onNextPageClick = function () { return setCurrentPage(currentPage + 1); };
+    var onLastPageClick = function () {
+        return setCurrentPage(Math.ceil(totalItems / initialPageSize));
+    };
+    var pagination = {
+        totalItems: totalItems,
+        currentPage: currentPage,
+        itemsPerPage: initialPageSize,
+        onFirstPageClick: onFirstPageClick,
+        onPreviousPageClick: onPreviousPageClick,
+        onNextPageClick: onNextPageClick,
+        onLastPageClick: onLastPageClick
+    };
+    var pageStatus = {
+        currentPage: currentPage,
+        pageStart: pageStart,
+        pageEnd: pageEnd
+    };
+    return { pagination: pagination, pageStatus: pageStatus };
+};
+
 var FieldWrap = React__default.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, _b = _a.as, Component = _b === void 0 ? 'div' : _b, props = tslib.__rest(_a, ["children", "className", "as"]);
     return (React__default.createElement(Component, tslib.__assign({ ref: ref, className: classNames('Panel', className) }, props), children));
 });
 FieldWrap.displayName = 'FieldWrap';
 FieldWrap.propTypes = {
+    // @ts-expect-error
     children: PropTypes.node.isRequired,
     className: PropTypes.string,
     as: PropTypes.string
@@ -8548,7 +8731,7 @@ var Breadcrumb = React.forwardRef(function (_a, ref) {
         }
     });
     return (React__default.createElement("nav", tslib.__assign({ className: classNames('Breadcrumb', className), ref: ref }, props),
-        React__default.createElement("ol", null, childrenWithSeparators.map(function (child, index) { return (React__default.createElement("li", { className: "Breadcrumb__Item", key: "breadcrumb-" + index }, child)); }))));
+        React__default.createElement("ol", null, childrenWithSeparators.map(function (child, index) { return (React__default.createElement("li", { className: "Breadcrumb__Item", key: "breadcrumb-".concat(index) }, child)); }))));
 });
 Breadcrumb.displayName = 'Breadcrumb';
 
@@ -8561,6 +8744,7 @@ 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"]);
     return (React__default.createElement(ElementType, tslib.__assign({ className: classNames('Link', 'Breadcrumb__Link', className), ref: ref }, props), children));
 });
+BreadcrumbLink.displayName = 'BreadcrumbLink';
 
 var ColumnLeft = React.forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, props = tslib.__rest(_a, ["className", "children"]);
@@ -8579,6 +8763,11 @@ var TwoColumnPanel = React.forwardRef(function (_a, ref) {
     var _f = tslib.__read(React.useState(initialCollapsed), 2), isCollapsed = _f[0], setCollapsed = _f[1];
     var _g = tslib.__read(React.useState(false), 2), isFocusTrap = _g[0], setIsFocusTrap = _g[1];
     var _h = tslib.__read(React.useState(!initialCollapsed), 2), showPanel = _h[0], setShowPanel = _h[1];
+    var toggleButtonRef = React.useRef(null);
+    var closeButtonRef = React.useRef(null);
+    var columnLeftRef = React.useRef(null);
+    var columnRightRef = React.useRef(null);
+    var columnLeft = React__default.Children.toArray(children).find(function (child) { return child.type === ColumnLeft; });
     var togglePanel = function () {
         if (isCollapsed) {
             setShowPanel(true);
@@ -8596,11 +8785,6 @@ var TwoColumnPanel = React.forwardRef(function (_a, ref) {
             }
         });
     };
-    var toggleButtonRef = React.useRef(null);
-    var closeButtonRef = React.useRef(null);
-    var columnLeftRef = React.useRef(null);
-    var columnRightRef = React.useRef(null);
-    var columnLeft = React__default.Children.toArray(children).find(function (child) { return child.type === ColumnLeft; });
     // The ColumnLeftComponent will end up being a focus trap when < 720px
     // This component also gets unmounted when not visible meaning that any
     // aria relationships cannot be set to items inside the component since
@@ -8615,11 +8799,11 @@ var TwoColumnPanel = React.forwardRef(function (_a, ref) {
             React__default.createElement("button", { type: "button", onClick: togglePanel, ref: closeButtonRef, "aria-label": hideCollapsedPanelLabel },
                 React__default.createElement(Icon, { type: "close" })),
             React__default.createElement(Tooltip, { target: closeButtonRef, association: "aria-labelledby", hideElementOnHidden: true }, hideCollapsedPanelLabel)));
-        var children_1 = tslib.__spread([
+        var children_1 = tslib.__spreadArray([
             CloseButton
-        ], React__default.Children.toArray(columnLeft.props.children));
+        ], tslib.__read(React__default.Children.toArray(columnLeft.props.children)), false);
         ColumnLeftComponent = React.cloneElement(columnLeft, { id: id, ref: ref_1, tabIndex: -1 }, children_1.map(function (child, index) {
-            return React.cloneElement(child, { key: "left-" + index });
+            return React.cloneElement(child, { key: "left-".concat(index) });
         }));
     }
     var columnRight = React__default.Children.toArray(children).find(function (child) { return child.type === ColumnRight; });
@@ -8630,11 +8814,11 @@ var TwoColumnPanel = React.forwardRef(function (_a, ref) {
             React__default.createElement("button", { type: "button", onClick: togglePanel, ref: toggleButtonRef, "aria-label": !isCollapsed ? hideCollapsedPanelLabel : showCollapsedPanelLabel, "aria-expanded": !isCollapsed, "aria-controls": columnLeftId },
                 React__default.createElement(Icon, { type: !isCollapsed ? 'chevron-double-left' : 'chevron-double-right' })),
             React__default.createElement(Tooltip, { target: toggleButtonRef, association: "aria-labelledby", hideElementOnHidden: true }, !isCollapsed ? hideCollapsedPanelLabel : showCollapsedPanelLabel)));
-        var children_2 = tslib.__spread([
+        var children_2 = tslib.__spreadArray([
             ToggleButton
-        ], React__default.Children.toArray(columnRight.props.children));
+        ], tslib.__read(React__default.Children.toArray(columnRight.props.children)), false);
         ColumnRightComponent = React.cloneElement(columnRight, { ref: ref_2, tabIndex: -1 }, children_2.map(function (child, index) {
-            return React.cloneElement(child, { key: "right-" + index });
+            return React.cloneElement(child, { key: "right-".concat(index) });
         }));
     }
     React.useLayoutEffect(function () {
@@ -8699,15 +8883,16 @@ var TwoColumnPanel = React.forwardRef(function (_a, ref) {
             'TwoColumnPanel--show': !isCollapsed,
             'TwoColumnPanel--hide': isCollapsed
         }) }, props, { ref: ref }),
-        React__default.createElement(FocusTrap, { active: !isCollapsed && isFocusTrap, focusTrapOptions: {
-                escapeDeactivates: true,
-                allowOutsideClick: true,
-                fallbackFocus: columnLeftRef.current
-            }, containerElements: [columnLeftRef.current] }),
-        React__default.createElement(ClickOutsideListener, { onClickOutside: handleClickOutside, target: columnLeftRef.current }),
-        isCollapsed ? null : skipLink,
-        showPanel ? ColumnLeftComponent : null,
-        ColumnRightComponent));
+        React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(FocusTrap, { active: !isCollapsed && isFocusTrap, focusTrapOptions: {
+                    escapeDeactivates: true,
+                    allowOutsideClick: true,
+                    fallbackFocus: columnLeftRef.current
+                }, containerElements: [columnLeftRef.current] }),
+            React__default.createElement(ClickOutsideListener, { onClickOutside: handleClickOutside, target: columnLeftRef.current }),
+            isCollapsed ? null : skipLink,
+            showPanel ? ColumnLeftComponent : null,
+            ColumnRightComponent)));
 });
 TwoColumnPanel.displayName = 'TwoColumnPanel';
 
@@ -8788,6 +8973,9 @@ ThemeProvider.propTypes = {
     initialTheme: PropTypes.string
 };
 
+exports.Accordion = Accordion;
+exports.AccordionContent = AccordionContent;
+exports.AccordionTrigger = AccordionTrigger;
 exports.Address = Address;
 exports.AddressCityStateZip = AddressCityStateZip;
 exports.AddressLine = AddressLine;
@@ -8847,6 +9035,7 @@ exports.Panel = Panel;
 exports.PanelTrigger = PanelTrigger$1;
 exports.Pointout = Pointout;
 exports.ProgressBar = ProgressBar;
+exports.RadioCardGroup = RadioCardGroup;
 exports.RadioGroup = RadioGroup;
 exports.Scrim = Scrim;
 exports.Select = Select;
@@ -8884,4 +9073,5 @@ exports.Workspace = Workspace;
 exports.focusableSelector = focusableSelector;
 exports.iconTypes = iconTypes;
 exports.useDidUpdate = useDidUpdate;
+exports.usePagination = usePagination;
 exports.useThemeContext = useThemeContext;