@deque/cauldron-react 4.5.0-canary.0c764a21 → 4.5.0-canary.16adb900

package/lib/index.js

@@ -279,19 +279,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),
@@ -364,7 +364,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 +498,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 +536,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 +592,7 @@ var TopBarTrigger = function (_a) {
 };
 TopBarTrigger.displayName = 'TopBarTrigger';
 TopBarTrigger.propTypes = {
+    // @ts-expect-error
     children: PropTypes.node.isRequired,
     className: PropTypes.string
 };
@@ -787,7 +788,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 +1168,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 +1218,7 @@ SideBarItem.defaultProps = {
     autoClickLink: true
 };
 SideBarItem.propTypes = {
+    // @ts-expect-error
     children: PropTypes.node.isRequired,
     autoClickLink: PropTypes.bool
 };
@@ -1305,7 +1308,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 +1467,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,
@@ -1609,8 +1612,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 +1621,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 +1684,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 +1699,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 +1794,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 +1810,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 +1863,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 +1933,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 +2118,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';
@@ -2301,9 +2304,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))));
@@ -2352,7 +2356,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),
@@ -2360,7 +2364,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))));
     });
@@ -2380,7 +2384,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,
@@ -2389,6 +2393,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];
@@ -2458,46 +2581,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) {
@@ -2650,7 +2733,7 @@ var ExpandCollapsePanel = /** @class */ (function (_super) {
             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    ");
+            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 });
@@ -2671,7 +2754,7 @@ var ExpandCollapsePanel = /** @class */ (function (_super) {
             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    ");
+            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 });
@@ -2839,27 +2922,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,
@@ -2896,6 +2958,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
@@ -2941,7 +3006,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) {
@@ -2980,7 +3045,7 @@ function createElement(_ref) {
     var props;
 
     if (!useInlineStyles) {
-      props = objectSpread({}, properties, {
+      props = _objectSpread(_objectSpread({}, properties), {}, {
         className: createClassNameString(properties.className)
       });
     } else {
@@ -2995,14 +3060,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);
   }
@@ -3013,6 +3078,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) {
@@ -3025,7 +3095,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
@@ -3038,13 +3108,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'),
@@ -3085,7 +3155,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;
 }
@@ -3111,7 +3181,7 @@ function createLineElement(_ref3) {
   }
 
   if (wrapLongLines & showLineNumbers) {
-    properties.style = objectSpread({}, properties.style, {
+    properties.style = _objectSpread$1(_objectSpread$1({}, properties.style), {}, {
       display: 'flex'
     });
   }
@@ -3138,7 +3208,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);
+      });
     }
   }
 
@@ -3207,19 +3279,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);
 
@@ -3325,7 +3397,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,
@@ -3349,12 +3421,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,
@@ -3372,8 +3444,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
@@ -3401,18 +3483,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
@@ -7977,15 +8048,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() {
@@ -8064,6 +8139,7 @@ LoaderOverlay.propTypes = {
     variant: PropTypes.oneOf(['large', 'small']),
     label: PropTypes.string,
     focusOnInitialRender: PropTypes.bool,
+    // @ts-expect-error
     children: PropTypes.node
 };
 LoaderOverlay.displayName = 'LoaderOverlay';
@@ -8183,6 +8259,7 @@ Tab.displayName = 'Tab';
 Tab.propTypes = {
     target: PropTypes.any.isRequired,
     id: PropTypes.string,
+    // @ts-expect-error
     children: PropTypes.node
 };
 
@@ -8277,7 +8354,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
@@ -8317,6 +8395,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
 };
@@ -8363,12 +8442,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
@@ -8410,7 +8489,7 @@ var Panel = React.forwardRef(function (_a, ref) {
         if (!headingId) {
             return null;
         }
-        var HeadingComponent = "h" + (heading &&
+        var HeadingComponent = "h".concat(heading &&
             typeof heading === 'object' &&
             'level' in heading &&
             !!heading.level
@@ -8428,7 +8507,9 @@ var Panel = React.forwardRef(function (_a, ref) {
 });
 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
 };
@@ -8438,7 +8519,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';
@@ -8451,7 +8532,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';
 
@@ -8532,12 +8613,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
@@ -8558,7 +8668,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';
 
@@ -8589,6 +8699,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);
@@ -8606,11 +8721,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
@@ -8625,11 +8735,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; });
@@ -8640,11 +8750,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 () {
@@ -8709,15 +8819,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';
 
@@ -8857,6 +8968,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;
@@ -8894,4 +9006,5 @@ exports.Workspace = Workspace;
 exports.focusableSelector = focusableSelector;
 exports.iconTypes = iconTypes;
 exports.useDidUpdate = useDidUpdate;
+exports.usePagination = usePagination;
 exports.useThemeContext = useThemeContext;