@deque/cauldron-react 4.5.0-canary.7f1627ef → 4.5.0-canary.a80cb0bb

package/lib/components/Breadcrumb/Breadcrumb.d.ts

@@ -1,11 +1,7 @@
 import React from 'react';
-declare const Breadcrumb: React.ForwardRefExoticComponent<({
-    separator?: string | undefined;
-} & React.HTMLAttributes<HTMLElement> & {
-    'aria-label': string;
-} & React.RefAttributes<HTMLElement>) | ({
-    separator?: string | undefined;
-} & React.HTMLAttributes<HTMLElement> & {
-    'aria-labelledby': string;
-} & React.RefAttributes<HTMLElement>)>;
+import { Cauldron } from '../../types';
+declare type BreadcrumbProps = {
+    separator?: string;
+} & React.HTMLAttributes<HTMLElement> & Cauldron.LabelProps;
+declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLElement>>;
 export default Breadcrumb;

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import { SyntaxHighlighterProps } from 'react-syntax-highlighter';
 interface Props extends SyntaxHighlighterProps {
-    children: React.ReactNode;
+    children: string;
     language?: 'javascript' | 'css' | 'html' | 'yaml';
     className?: string;
     tabIndex?: number;
 }
-declare const Code: React.ComponentType<Props>;
+declare const Code: React.ComponentType<React.PropsWithChildren<Props>>;
 export default Code;

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

@@ -42,7 +42,7 @@ export default class Dialog extends React.Component<DialogProps, DialogState> {
     componentDidMount(): void;
     componentDidUpdate(prevProps: DialogProps): void;
     private attachIsolator;
-    render(): React.ReactPortal | null;
+    render(): JSX.Element | null;
     close(): void;
     handleClickOutside(): void;
     focusHeading(): void;

package/lib/components/ExpandCollapsePanel/PanelTrigger.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { IconType } from '../Icon';
-export interface PanelTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface PanelTriggerProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
     children?: ((props: {
         open: boolean;
     }) => React.ReactNode) | React.ReactNode;

package/lib/components/OptionsMenu/OptionsMenu.d.ts

@@ -17,6 +17,7 @@ export interface OptionsMenuProps extends OptionsMenuAlignmentProps {
     onSelect: (e: React.MouseEvent<HTMLElement>) => void;
     closeOnSelect?: boolean;
     show?: boolean;
+    children: React.ReactNode;
 }
 interface OptionsMenuState {
     show: boolean;

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

@@ -1,15 +1,9 @@
+import { Cauldron } from '../../types';
 import React from 'react';
-declare const ProgressBar: React.ForwardRefExoticComponent<({
+declare type ProgressBarProps = {
     progress: number;
-    progressMax?: number | undefined;
-    progressMin?: number | undefined;
-} & {
-    'aria-label': string;
-} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>) | ({
-    progress: number;
-    progressMax?: number | undefined;
-    progressMin?: number | undefined;
-} & {
-    'aria-labelledby': string;
-} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>)>;
+    progressMax?: number;
+    progressMin?: number;
+} & Cauldron.LabelProps & React.HTMLAttributes<HTMLDivElement>;
+declare const ProgressBar: React.ForwardRefExoticComponent<ProgressBarProps & React.RefAttributes<HTMLDivElement>>;
 export default ProgressBar;

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

@@ -15,5 +15,5 @@ export interface SelectProps extends Omit<React.HTMLProps<HTMLSelectElement>, 'c
     defaultValue?: any;
     onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
 }
-declare const Select: React.ForwardRefExoticComponent<Pick<SelectProps, "max" | "required" | "default" | "high" | "low" | "disabled" | "error" | "start" | "open" | "media" | "hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "defer" | "manifest" | "color" | "content" | "size" | "wrap" | "multiple" | "key" | "children" | "list" | "step" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "download" | "target" | "type" | "name" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "method" | "min" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "useMap" | "value" | "width" | "wmode" | "options" | "requiredText"> & React.RefAttributes<HTMLSelectElement>>;
+declare const Select: React.ForwardRefExoticComponent<Pick<SelectProps, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "form" | "list" | "step" | "cite" | "data" | "label" | "span" | "summary" | "pattern" | "type" | "key" | "download" | "target" | "name" | "error" | "disabled" | "open" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "useMap" | "value" | "width" | "wmode" | "wrap" | "options" | "requiredText"> & React.RefAttributes<HTMLSelectElement>>;
 export default Select;

package/lib/components/SideBar/SideBarItem.d.ts

@@ -3,5 +3,5 @@ export interface SideBarItemProps extends React.HTMLAttributes<HTMLLIElement> {
     children: React.ReactNode;
     autoClickLink?: boolean;
 }
-declare const SideBarItem: React.ComponentType<SideBarItemProps>;
+declare const SideBarItem: React.ComponentType<React.PropsWithChildren<SideBarItemProps>>;
 export default SideBarItem;

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

@@ -8,6 +8,7 @@ export interface ToastProps {
     toastRef: React.Ref<HTMLDivElement>;
     focus?: boolean;
     show?: boolean;
+    children: React.ReactNode;
 }
 interface ToastState {
     animationClass: string;

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

@@ -11,7 +11,7 @@ export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
     portal?: React.RefObject<HTMLElement> | HTMLElement;
     hideElementOnHidden?: boolean;
 }
-declare function Tooltip({ id: propId, placement: initialPlacement, children, portal, target, association, variant, show: initialShow, hideElementOnHidden, className, ...props }: TooltipProps): React.ReactPortal | null;
+declare function Tooltip({ id: propId, placement: initialPlacement, children, portal, target, association, variant, show: initialShow, hideElementOnHidden, className, ...props }: TooltipProps): JSX.Element;
 declare namespace Tooltip {
     var displayName: string;
     var propTypes: {

package/lib/components/TopBar/TopBarTrigger.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 interface TopBarTriggerProps extends React.HTMLAttributes<HTMLLIElement> {
     children: React.ReactNode;
 }
-declare const TopBarTrigger: React.ComponentType<TopBarTriggerProps>;
+declare const TopBarTrigger: React.ComponentType<React.PropsWithChildren<TopBarTriggerProps>>;
 export default TopBarTrigger;

package/lib/components/TwoColumnPanel/ColumnLeft.d.ts

@@ -1,7 +1,5 @@
 import React from 'react';
-declare const ColumnLeft: React.ForwardRefExoticComponent<(React.HTMLAttributes<HTMLDivElement> & {
-    'aria-label': string;
-} & React.RefAttributes<HTMLDivElement>) | (React.HTMLAttributes<HTMLDivElement> & {
-    'aria-labelledby': string;
-} & React.RefAttributes<HTMLDivElement>)>;
+import { Cauldron } from '../../types';
+declare type ColumnLeftProps = React.HTMLAttributes<HTMLDivElement> & Cauldron.LabelProps;
+declare const ColumnLeft: React.ForwardRefExoticComponent<ColumnLeftProps & React.RefAttributes<HTMLDivElement>>;
 export default ColumnLeft;

package/lib/components/TwoColumnPanel/ColumnRight.d.ts

@@ -1,7 +1,5 @@
 import React from 'react';
-declare const ColumnRight: React.ForwardRefExoticComponent<(React.HTMLAttributes<HTMLDivElement> & {
-    'aria-label': string;
-} & React.RefAttributes<HTMLDivElement>) | (React.HTMLAttributes<HTMLDivElement> & {
-    'aria-labelledby': string;
-} & React.RefAttributes<HTMLDivElement>)>;
+import { Cauldron } from '../../types';
+declare type ColumnRightProps = React.HTMLAttributes<HTMLDivElement> & Cauldron.LabelProps;
+declare const ColumnRight: React.ForwardRefExoticComponent<ColumnRightProps & React.RefAttributes<HTMLDivElement>>;
 export default ColumnRight;

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,
@@ -2499,7 +2503,7 @@ RadioCardGroup.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,
@@ -2729,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 });
@@ -2750,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 });
@@ -2918,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,
@@ -2975,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
@@ -3020,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) {
@@ -3059,7 +3045,7 @@ function createElement(_ref) {
     var props;
 
     if (!useInlineStyles) {
-      props = objectSpread({}, properties, {
+      props = _objectSpread(_objectSpread({}, properties), {}, {
         className: createClassNameString(properties.className)
       });
     } else {
@@ -3074,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);
   }
@@ -3092,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) {
@@ -3104,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
@@ -3117,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'),
@@ -3164,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;
 }
@@ -3190,7 +3181,7 @@ function createLineElement(_ref3) {
   }
 
   if (wrapLongLines & showLineNumbers) {
-    properties.style = objectSpread({}, properties.style, {
+    properties.style = _objectSpread$1(_objectSpread$1({}, properties.style), {}, {
       display: 'flex'
     });
   }
@@ -3217,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);
+      });
     }
   }
 
@@ -3286,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);
 
@@ -3404,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,
@@ -3428,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,
@@ -3451,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
@@ -3480,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
@@ -8056,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() {
@@ -8143,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';
@@ -8262,6 +8259,7 @@ Tab.displayName = 'Tab';
 Tab.propTypes = {
     target: PropTypes.any.isRequired,
     id: PropTypes.string,
+    // @ts-expect-error
     children: PropTypes.node
 };
 
@@ -8356,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
@@ -8396,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
 };
@@ -8442,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
@@ -8489,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
@@ -8507,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
 };
@@ -8517,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';
@@ -8530,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';
 
@@ -8645,6 +8647,7 @@ var FieldWrap = React__default.forwardRef(function (_a, ref) {
 });
 FieldWrap.displayName = 'FieldWrap';
 FieldWrap.propTypes = {
+    // @ts-expect-error
     children: PropTypes.node.isRequired,
     className: PropTypes.string,
     as: PropTypes.string
@@ -8665,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';
 
@@ -8696,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);
@@ -8713,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
@@ -8732,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; });
@@ -8747,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 () {
@@ -8816,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';
 

package/lib/utils/remove-ids/index.d.ts

@@ -1,2 +1,2 @@
-declare function recursivelyRemoveIds(element: React.ReactNode): import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, string | any | (new (props: any) => import("react").Component<any, any, any>)> | null) | (new (props: any) => import("react").Component<any, any, any>)> | import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, string | any | (new (props: any) => import("react").Component<any, any, any>)> | null) | (new (props: any) => import("react").Component<any, any, any>)>[] | null | undefined;
+declare function recursivelyRemoveIds(element: React.ReactNode): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>[] | null | undefined;
 export default recursivelyRemoveIds;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "4.5.0-canary.7f1627ef",
+  "version": "4.5.0-canary.a80cb0bb",
   "description": "Fully accessible react components library for Deque Cauldron",
   "publishConfig": {
     "access": "public"
@@ -23,14 +23,14 @@
   "dependencies": {
     "@popperjs/core": "^2.5.4",
     "classnames": "^2.2.6",
-    "focus-trap-react": "^8.9.0",
+    "focus-trap-react": "8",
     "focusable": "^2.3.0",
     "keyname": "^0.1.0",
     "prop-types": "^15.6.0",
     "react-id-generator": "^3.0.1",
     "react-popper": "^2.2.4",
-    "react-syntax-highlighter": "^15.4.3",
-    "tslib": "^2.0.0"
+    "react-syntax-highlighter": "^15.5.0",
+    "tslib": "^2.4.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",
@@ -47,10 +47,11 @@
     "@rollup/plugin-typescript": "^5.0.2",
     "@svgr/rollup": "^6.1.2",
     "@types/classnames": "^2.2.10",
+    "@types/node": "^17.0.42",
     "@types/prop-types": "^15.7.3",
-    "@types/react": "^16.9.34",
-    "@types/react-dom": "^16.9.7",
-    "@types/react-syntax-highlighter": "^13.5.2",
+    "@types/react": "^18.0.12",
+    "@types/react-dom": "^18.0.5",
+    "@types/react-syntax-highlighter": "^15.5.2",
     "autoprefixer": "^9.7.6",
     "babel-plugin-module-resolver": "^4.0.0",
     "babel-plugin-transform-export-extensions": "^6.22.0",
@@ -79,16 +80,16 @@
     "react-router-dom": "^5.1.2",
     "rollup": "^2.23.0",
     "sinon": "^10.0.0",
-    "ts-node": "^8.9.1",
-    "typescript": "^3.9.7"
+    "ts-node": "^10.8.1",
+    "typescript": "^4.7.3"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/dequelabs/cauldron-react.git"
   },
   "peerDependencies": {
-    "react": "^16.6.0",
-    "react-dom": "^16.6.0"
+    "react": ">=16.6 <= 18",
+    "react-dom": ">=16.6 <= 18"
   },
   "nyc": {
     "checkCoverage": true,