@deque/cauldron-react 3.0.1 → 4.0.0-canary.debe968f

package/lib/index.js

@@ -162,6 +162,7 @@ var iconTypes = [
     'kabob',
     'list',
     'lock',
+    'magnifying-glass',
     'menu',
     'new-releases',
     'new',
@@ -176,6 +177,7 @@ var iconTypes = [
     'run-again',
     'save',
     'share',
+    'sort-triangle',
     'sort',
     'star',
     'sun',
@@ -190,74 +192,80 @@ var iconTypes = [
 ];
 
 function __variableDynamicImportRuntime0__(path) {
-   switch (path) {
-     case './icons/add-user.svg': return Promise.resolve().then(function () { return require('./add-user-075c63a1.js'); });
-     case './icons/arrow-circle.svg': return Promise.resolve().then(function () { return require('./arrow-circle-7b95a2fd.js'); });
-     case './icons/arrow.svg': return Promise.resolve().then(function () { return require('./arrow-97011665.js'); });
-     case './icons/arrows-alt.svg': return Promise.resolve().then(function () { return require('./arrows-alt-b91e24b7.js'); });
-     case './icons/bolt.svg': return Promise.resolve().then(function () { return require('./bolt-e44406fd.js'); });
-     case './icons/caution.svg': return Promise.resolve().then(function () { return require('./caution-e048e1bf.js'); });
-     case './icons/check-circle.svg': return Promise.resolve().then(function () { return require('./check-circle-8b5069b4.js'); });
-     case './icons/check-shield.svg': return Promise.resolve().then(function () { return require('./check-shield-8fdb3641.js'); });
-     case './icons/check-solid.svg': return Promise.resolve().then(function () { return require('./check-solid-a0682f04.js'); });
-     case './icons/check.svg': return Promise.resolve().then(function () { return require('./check-c2912d5e.js'); });
-     case './icons/checkbox-checked.svg': return Promise.resolve().then(function () { return require('./checkbox-checked-a262e99c.js'); });
-     case './icons/checkbox-unchecked.svg': return Promise.resolve().then(function () { return require('./checkbox-unchecked-2ad5b4ae.js'); });
-     case './icons/chevron-double.svg': return Promise.resolve().then(function () { return require('./chevron-double-65975fca.js'); });
-     case './icons/chevron.svg': return Promise.resolve().then(function () { return require('./chevron-064d5f96.js'); });
-     case './icons/close.svg': return Promise.resolve().then(function () { return require('./close-31ce4dcf.js'); });
-     case './icons/code.svg': return Promise.resolve().then(function () { return require('./code-e3365341.js'); });
-     case './icons/copy.svg': return Promise.resolve().then(function () { return require('./copy-d2ade017.js'); });
-     case './icons/download.svg': return Promise.resolve().then(function () { return require('./download-2790e982.js'); });
-     case './icons/exchange.svg': return Promise.resolve().then(function () { return require('./exchange-1d290efb.js'); });
-     case './icons/external-link.svg': return Promise.resolve().then(function () { return require('./external-link-ef122c95.js'); });
-     case './icons/eye.svg': return Promise.resolve().then(function () { return require('./eye-a0d28243.js'); });
-     case './icons/filter.svg': return Promise.resolve().then(function () { return require('./filter-d2057f4c.js'); });
-     case './icons/flag.svg': return Promise.resolve().then(function () { return require('./flag-fb248a99.js'); });
-     case './icons/gears.svg': return Promise.resolve().then(function () { return require('./gears-b9ee1585.js'); });
-     case './icons/grid.svg': return Promise.resolve().then(function () { return require('./grid-ee446118.js'); });
-     case './icons/hamburger-menu.svg': return Promise.resolve().then(function () { return require('./hamburger-menu-0fc0e266.js'); });
-     case './icons/highlight.svg': return Promise.resolve().then(function () { return require('./highlight-81bfb759.js'); });
-     case './icons/info-circle-alt.svg': return Promise.resolve().then(function () { return require('./info-circle-alt-b1a696c7.js'); });
-     case './icons/info-circle.svg': return Promise.resolve().then(function () { return require('./info-circle-b43f7a9b.js'); });
-     case './icons/info-square.svg': return Promise.resolve().then(function () { return require('./info-square-f193e281.js'); });
-     case './icons/kabob.svg': return Promise.resolve().then(function () { return require('./kabob-692fdc00.js'); });
-     case './icons/list.svg': return Promise.resolve().then(function () { return require('./list-8fbd8209.js'); });
-     case './icons/lock.svg': return Promise.resolve().then(function () { return require('./lock-bd0122db.js'); });
-     case './icons/menu.svg': return Promise.resolve().then(function () { return require('./menu-2f2be7c2.js'); });
-     case './icons/new-releases.svg': return Promise.resolve().then(function () { return require('./new-releases-ac749bdd.js'); });
-     case './icons/new.svg': return Promise.resolve().then(function () { return require('./new-6c3ac7d7.js'); });
-     case './icons/no.svg': return Promise.resolve().then(function () { return require('./no-bb3aa565.js'); });
-     case './icons/pencil.svg': return Promise.resolve().then(function () { return require('./pencil-4843058f.js'); });
-     case './icons/plus.svg': return Promise.resolve().then(function () { return require('./plus-6589e613.js'); });
-     case './icons/question-circle.svg': return Promise.resolve().then(function () { return require('./question-circle-c3c634c4.js'); });
-     case './icons/radio-checked.svg': return Promise.resolve().then(function () { return require('./radio-checked-006112fe.js'); });
-     case './icons/radio-unchecked.svg': return Promise.resolve().then(function () { return require('./radio-unchecked-a76e2d66.js'); });
-     case './icons/recycle.svg': return Promise.resolve().then(function () { return require('./recycle-0198fb67.js'); });
-     case './icons/robot.svg': return Promise.resolve().then(function () { return require('./robot-22863b2b.js'); });
-     case './icons/run-again.svg': return Promise.resolve().then(function () { return require('./run-again-c9777075.js'); });
-     case './icons/save.svg': return Promise.resolve().then(function () { return require('./save-edf5fc68.js'); });
-     case './icons/share.svg': return Promise.resolve().then(function () { return require('./share-70e94257.js'); });
-     case './icons/sort.svg': return Promise.resolve().then(function () { return require('./sort-49ec1442.js'); });
-     case './icons/star.svg': return Promise.resolve().then(function () { return require('./star-a1af8d95.js'); });
-     case './icons/sun.svg': return Promise.resolve().then(function () { return require('./sun-408aecdc.js'); });
-     case './icons/tag.svg': return Promise.resolve().then(function () { return require('./tag-56c32f4f.js'); });
-     case './icons/target.svg': return Promise.resolve().then(function () { return require('./target-50f179e0.js'); });
-     case './icons/trash.svg': return Promise.resolve().then(function () { return require('./trash-896a3291.js'); });
-     case './icons/triangle.svg': return Promise.resolve().then(function () { return require('./triangle-51d7723a.js'); });
-     case './icons/upload.svg': return Promise.resolve().then(function () { return require('./upload-d71f0e44.js'); });
-     default: return Promise.reject(new Error("Unknown variable dynamic import: " + path));
+  switch (path) {
+    case './icons/add-user.svg': return Promise.resolve().then(function () { return require('./add-user.js'); });
+    case './icons/arrow-circle.svg': return Promise.resolve().then(function () { return require('./arrow-circle.js'); });
+    case './icons/arrow.svg': return Promise.resolve().then(function () { return require('./arrow.js'); });
+    case './icons/arrows-alt.svg': return Promise.resolve().then(function () { return require('./arrows-alt.js'); });
+    case './icons/bolt.svg': return Promise.resolve().then(function () { return require('./bolt.js'); });
+    case './icons/caution.svg': return Promise.resolve().then(function () { return require('./caution.js'); });
+    case './icons/check-circle.svg': return Promise.resolve().then(function () { return require('./check-circle.js'); });
+    case './icons/check-shield.svg': return Promise.resolve().then(function () { return require('./check-shield.js'); });
+    case './icons/check-solid.svg': return Promise.resolve().then(function () { return require('./check-solid.js'); });
+    case './icons/check.svg': return Promise.resolve().then(function () { return require('./check.js'); });
+    case './icons/checkbox-checked.svg': return Promise.resolve().then(function () { return require('./checkbox-checked.js'); });
+    case './icons/checkbox-unchecked.svg': return Promise.resolve().then(function () { return require('./checkbox-unchecked.js'); });
+    case './icons/chevron-double.svg': return Promise.resolve().then(function () { return require('./chevron-double.js'); });
+    case './icons/chevron.svg': return Promise.resolve().then(function () { return require('./chevron.js'); });
+    case './icons/close.svg': return Promise.resolve().then(function () { return require('./close.js'); });
+    case './icons/code.svg': return Promise.resolve().then(function () { return require('./code.js'); });
+    case './icons/copy.svg': return Promise.resolve().then(function () { return require('./copy.js'); });
+    case './icons/download.svg': return Promise.resolve().then(function () { return require('./download.js'); });
+    case './icons/exchange.svg': return Promise.resolve().then(function () { return require('./exchange.js'); });
+    case './icons/external-link.svg': return Promise.resolve().then(function () { return require('./external-link.js'); });
+    case './icons/eye.svg': return Promise.resolve().then(function () { return require('./eye.js'); });
+    case './icons/filter.svg': return Promise.resolve().then(function () { return require('./filter.js'); });
+    case './icons/flag.svg': return Promise.resolve().then(function () { return require('./flag.js'); });
+    case './icons/gears.svg': return Promise.resolve().then(function () { return require('./gears.js'); });
+    case './icons/grid.svg': return Promise.resolve().then(function () { return require('./grid.js'); });
+    case './icons/hamburger-menu.svg': return Promise.resolve().then(function () { return require('./hamburger-menu.js'); });
+    case './icons/highlight.svg': return Promise.resolve().then(function () { return require('./highlight.js'); });
+    case './icons/info-circle-alt.svg': return Promise.resolve().then(function () { return require('./info-circle-alt.js'); });
+    case './icons/info-circle.svg': return Promise.resolve().then(function () { return require('./info-circle.js'); });
+    case './icons/info-square.svg': return Promise.resolve().then(function () { return require('./info-square.js'); });
+    case './icons/kabob.svg': return Promise.resolve().then(function () { return require('./kabob.js'); });
+    case './icons/list.svg': return Promise.resolve().then(function () { return require('./list.js'); });
+    case './icons/lock.svg': return Promise.resolve().then(function () { return require('./lock.js'); });
+    case './icons/magnifying-glass.svg': return Promise.resolve().then(function () { return require('./magnifying-glass.js'); });
+    case './icons/menu.svg': return Promise.resolve().then(function () { return require('./menu.js'); });
+    case './icons/new-releases.svg': return Promise.resolve().then(function () { return require('./new-releases.js'); });
+    case './icons/new.svg': return Promise.resolve().then(function () { return require('./new.js'); });
+    case './icons/no.svg': return Promise.resolve().then(function () { return require('./no.js'); });
+    case './icons/pencil.svg': return Promise.resolve().then(function () { return require('./pencil.js'); });
+    case './icons/plus.svg': return Promise.resolve().then(function () { return require('./plus.js'); });
+    case './icons/question-circle.svg': return Promise.resolve().then(function () { return require('./question-circle.js'); });
+    case './icons/radio-checked.svg': return Promise.resolve().then(function () { return require('./radio-checked.js'); });
+    case './icons/radio-unchecked.svg': return Promise.resolve().then(function () { return require('./radio-unchecked.js'); });
+    case './icons/recycle.svg': return Promise.resolve().then(function () { return require('./recycle.js'); });
+    case './icons/robot.svg': return Promise.resolve().then(function () { return require('./robot.js'); });
+    case './icons/run-again.svg': return Promise.resolve().then(function () { return require('./run-again.js'); });
+    case './icons/save.svg': return Promise.resolve().then(function () { return require('./save.js'); });
+    case './icons/share.svg': return Promise.resolve().then(function () { return require('./share.js'); });
+    case './icons/sort-triangle.svg': return Promise.resolve().then(function () { return require('./sort-triangle.js'); });
+    case './icons/sort.svg': return Promise.resolve().then(function () { return require('./sort.js'); });
+    case './icons/star.svg': return Promise.resolve().then(function () { return require('./star.js'); });
+    case './icons/sun.svg': return Promise.resolve().then(function () { return require('./sun.js'); });
+    case './icons/tag.svg': return Promise.resolve().then(function () { return require('./tag.js'); });
+    case './icons/target.svg': return Promise.resolve().then(function () { return require('./target.js'); });
+    case './icons/trash.svg': return Promise.resolve().then(function () { return require('./trash.js'); });
+    case './icons/triangle.svg': return Promise.resolve().then(function () { return require('./triangle.js'); });
+    case './icons/upload.svg': return Promise.resolve().then(function () { return require('./upload.js'); });
+    default: return new Promise(function(resolve, reject) {
+      (typeof queueMicrotask === 'function' ? queueMicrotask : setTimeout)(
+        reject.bind(null, new Error("Unknown variable dynamic import: " + path))
+      );
+    })
    }
  }
 var Icon = React.forwardRef(function (_a, ref) {
     var _b;
     var label = _a.label, className = _a.className, type = _a.type, other = tslib.__rest(_a, ["label", "className", "type"]);
     var isMounted = React.useRef(true);
-    var _c = type.match(/(.*)-(right|left|up|down)$/) || [
+    var _c = tslib.__read(type.match(/(.*)-(right|left|up|down)$/) || [
         '',
         type
-    ], name = _c[1], direction = _c[2];
-    var _d = React.useState(null), IconSVG = _d[0], setIcon = _d[1];
+    ], 3), name = _c[1], direction = _c[2];
+    var _d = tslib.__read(React.useState(null), 2), IconSVG = _d[0], setIcon = _d[1];
     React.useEffect(function () {
         isMounted.current = true;
         // NOTE: we don't want to pollute test output with
@@ -473,9 +481,9 @@ var TopBar = /** @class */ (function (_super) {
                         args[_i] = arguments[_i];
                     }
                     // @ts-ignore we're just spreading the original args
-                    _this.onKeyDown.apply(_this, args);
+                    _this.onKeyDown.apply(_this, tslib.__spread(args));
                     if (child.props.onKeyDown) {
-                        (_a = child.props).onKeyDown.apply(_a, args);
+                        (_a = child.props).onKeyDown.apply(_a, tslib.__spread(args));
                     }
                 },
                 tabIndex: 0,
@@ -511,7 +519,7 @@ var TopBar = /** @class */ (function (_super) {
     };
     TopBar.prototype.onKeyDown = function (e) {
         var key = keyname(e.which);
-        var menuItems = tslib.__spreadArrays(this.menuItems);
+        var menuItems = tslib.__spread(this.menuItems);
         // account for hidden side bar trigger (hamburger)
         if (this.state.wide && this.props.hasTrigger) {
             menuItems.shift();
@@ -663,7 +671,7 @@ var ClickOutsideListener = /** @class */ (function (_super) {
     return ClickOutsideListener;
 }(React__default.Component));
 
-var _a = [38, 40, 9, 13, 32, 27], up = _a[0], down = _a[1], tab = _a[2], enter = _a[3], space = _a[4], esc = _a[5];
+var _a = tslib.__read([38, 40, 9, 13, 32, 27], 6), up = _a[0], down = _a[1], tab = _a[2], enter = _a[3], space = _a[4], esc = _a[5];
 var OptionsMenuList = /** @class */ (function (_super) {
     tslib.__extends(OptionsMenuList, _super);
     function OptionsMenuList(props) {
@@ -791,7 +799,7 @@ var OptionsMenuList = /** @class */ (function (_super) {
     return OptionsMenuList;
 }(React__default.Component));
 
-var down$1 = [40][0];
+var _a$1 = tslib.__read([40], 1), down$1 = _a$1[0];
 var OptionsMenu = /** @class */ (function (_super) {
     tslib.__extends(OptionsMenu, _super);
     function OptionsMenu(props) {
@@ -993,8 +1001,8 @@ var NavBar = function (_a) {
     var children = _a.children, className = _a.className, _b = _a.collapsed, collapsed = _b === void 0 ? false : _b, _c = _a.navTriggerLabel, navTriggerLabel = _c === void 0 ? 'MAIN MENU' : _c, propId = _a.propId;
     var navRef = React.useRef(null);
     var triggerRef = React.useRef(null);
-    var _d = React.useState(false), showDropdown = _d[0], setShowDropdown = _d[1];
-    var menuId = ([propId] || nextId.useId(1, 'navbar'))[0];
+    var _d = tslib.__read(React.useState(false), 2), showDropdown = _d[0], setShowDropdown = _d[1];
+    var _e = tslib.__read([propId] || nextId.useId(1, 'navbar'), 1), menuId = _e[0];
     var showNavItems = !collapsed || (collapsed && showDropdown);
     var handleOutSideEvent = function (e) {
         var _a;
@@ -1130,9 +1138,9 @@ var SideBar = /** @class */ (function (_super) {
     SideBar.prototype.animate = function () {
         var _this = this;
         var show = this.props.show;
-        var _a = show
+        var _a = tslib.__read(show
             ? ['SideBar--show', 'SideBar--show SideBar--active']
-            : ['SideBar--show', ''], first = _a[0], second = _a[1];
+            : ['SideBar--show', ''], 2), first = _a[0], second = _a[1];
         this.setState({ animateClass: first });
         // css3 animations require transition classes to be added on separate tics
         setTimeout(function () {
@@ -1148,11 +1156,11 @@ var SideBar = /** @class */ (function (_super) {
         var _a = this.state, animateClass = _a.animateClass, wide = _a.wide;
         // disabling no-unused-vars to prevent onDismiss from being passed through to dom element
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        var _b = this.props, children = _b.children, className = _b.className, show = _b.show, onDismiss = _b.onDismiss, other = tslib.__rest(_b, ["children", "className", "show", "onDismiss"]);
+        var _b = this.props, children = _b.children, className = _b.className, show = _b.show, onDismiss = _b.onDismiss, navProps = _b.navProps, other = tslib.__rest(_b, ["children", "className", "show", "onDismiss", "navProps"]);
         /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
         return (React__default.createElement(React.Fragment, null,
             React__default.createElement(ClickOutsideListener, { onClickOutside: this.handleClickOutside },
-                React__default.createElement("nav", null,
+                React__default.createElement("nav", tslib.__assign({}, navProps),
                     React__default.createElement("ul", tslib.__assign({ className: classNames('SideBar', className, animateClass) }, other, { ref: this.navList, onKeyDown: this.onKeyDown }), children))),
             React__default.createElement(Scrim, { show: !wide && show })));
         /* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
@@ -1465,15 +1473,15 @@ var fireCustomEvent = function (show, button) {
 };
 function Tooltip(_a) {
     var _this = this;
-    var propId = _a.id, _b = _a.placement, initialPlacement = _b === void 0 ? 'auto' : _b, children = _a.children, portal = _a.portal, target = _a.target, _c = _a.association, association = _c === void 0 ? 'aria-describedby' : _c, _d = _a.variant, variant = _d === void 0 ? 'text' : _d, _e = _a.show, showProp = _e === void 0 ? false : _e, _f = _a.hideElementOnHidden, hideElementOnHidden = _f === void 0 ? false : _f, props = tslib.__rest(_a, ["id", "placement", "children", "portal", "target", "association", "variant", "show", "hideElementOnHidden"]);
-    var id = (propId ? [propId] : nextId.useId(1, 'tooltip'))[0];
+    var propId = _a.id, _b = _a.placement, initialPlacement = _b === void 0 ? 'auto' : _b, children = _a.children, portal = _a.portal, target = _a.target, _c = _a.association, association = _c === void 0 ? 'aria-describedby' : _c, _d = _a.variant, variant = _d === void 0 ? 'text' : _d, _e = _a.show, showProp = _e === void 0 ? false : _e, _f = _a.hideElementOnHidden, hideElementOnHidden = _f === void 0 ? false : _f, className = _a.className, props = tslib.__rest(_a, ["id", "placement", "children", "portal", "target", "association", "variant", "show", "hideElementOnHidden", "className"]);
+    var _g = tslib.__read(propId ? [propId] : nextId.useId(1, 'tooltip'), 1), id = _g[0];
     var hovering = React.useRef(false);
-    var _g = React.useState(initialPlacement), placement = _g[0], setPlacement = _g[1];
-    var _h = React.useState(!!showProp), showTooltip = _h[0], setShowTooltip = _h[1];
-    var _j = React.useState(null), targetElement = _j[0], setTargetElement = _j[1];
-    var _k = React.useState(null), tooltipElement = _k[0], setTooltipElement = _k[1];
-    var _l = React.useState(null), arrowElement = _l[0], setArrowElement = _l[1];
-    var _m = reactPopper.usePopper(targetElement, tooltipElement, {
+    var _h = tslib.__read(React.useState(initialPlacement), 2), placement = _h[0], setPlacement = _h[1];
+    var _j = tslib.__read(React.useState(!!showProp), 2), showTooltip = _j[0], setShowTooltip = _j[1];
+    var _k = tslib.__read(React.useState(null), 2), targetElement = _k[0], setTargetElement = _k[1];
+    var _l = tslib.__read(React.useState(null), 2), tooltipElement = _l[0], setTooltipElement = _l[1];
+    var _m = tslib.__read(React.useState(null), 2), arrowElement = _m[0], setArrowElement = _m[1];
+    var _o = reactPopper.usePopper(targetElement, tooltipElement, {
         placement: initialPlacement,
         modifiers: [
             { name: 'preventOverflow', options: { padding: 8 } },
@@ -1481,7 +1489,7 @@ function Tooltip(_a) {
             { name: 'offset', options: { offset: [0, 8] } },
             { name: 'arrow', options: { padding: 5, element: arrowElement } }
         ]
-    }), styles = _m.styles, attributes = _m.attributes, update = _m.update;
+    }), styles = _o.styles, attributes = _o.attributes, update = _o.update;
     var show = function () { return tslib.__awaiter(_this, void 0, void 0, function () {
         return tslib.__generator(this, function (_a) {
             switch (_a.label) {
@@ -1554,9 +1562,9 @@ function Tooltip(_a) {
         return function () {
             targetElement.removeEventListener('keyup', handleEscape);
         };
-    }, [show]);
+    }, [showProp]);
     React.useEffect(function () {
-        if (typeof show !== undefined) {
+        if (typeof showProp !== undefined) {
             targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('mouseenter', handleTriggerMouseEnter);
             targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('mouseleave', handleTriggerMouseLeave);
             targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('focusin', show);
@@ -1568,7 +1576,7 @@ function Tooltip(_a) {
             targetElement === null || targetElement === void 0 ? void 0 : targetElement.removeEventListener('focusin', show);
             targetElement === null || targetElement === void 0 ? void 0 : targetElement.removeEventListener('focusout', hide);
         };
-    }, [targetElement, show]);
+    }, [targetElement, showProp]);
     React.useEffect(function () {
         if (tooltipElement) {
             tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.addEventListener('mouseenter', handleTipMouseEnter);
@@ -1586,7 +1594,7 @@ function Tooltip(_a) {
         }
     }, [targetElement, id]);
     return showTooltip || hideElementOnHidden
-        ? reactDom.createPortal(React__default.createElement("div", tslib.__assign({ id: id, className: classNames('Tooltip', "Tooltip--" + placement, {
+        ? reactDom.createPortal(React__default.createElement("div", tslib.__assign({ id: id, className: classNames('Tooltip', "Tooltip--" + placement, className, {
                 TooltipInfo: variant === 'info',
                 'Tooltip--hidden': !showTooltip && hideElementOnHidden,
                 'Tooltip--big': variant === 'big'
@@ -1615,21 +1623,52 @@ var TooltipContent = function (_a) {
     return (React__default.createElement("div", tslib.__assign({ className: classNames('TooltipContent', className) }, other)));
 };
 
+/**
+ * Unfortunately, eslint does not recognize that this Polymorphic component has a displayName set
+ *
+ * We might be able to remove this if we upgrade eslint and associated plugins
+ * See: https://github.com/dequelabs/cauldron/issues/451
+ */
+// eslint-disable-next-line react/display-name
 var IconButton = React.forwardRef(function (_a, ref) {
-    var icon = _a.icon, label = _a.label, _b = _a.tooltipPlacement, tooltipPlacement = _b === void 0 ? 'auto' : _b, tooltipVariant = _a.tooltipVariant, tooltipPortal = _a.tooltipPortal, className = _a.className, _c = _a.variant, variant = _c === void 0 ? 'secondary' : _c, disabled = _a.disabled, other = tslib.__rest(_a, ["icon", "label", "tooltipPlacement", "tooltipVariant", "tooltipPortal", "className", "variant", "disabled"]);
-    var buttonRef = React.useRef();
-    React.useImperativeHandle(ref, function () { return buttonRef.current; });
+    var _b = _a.as, Component = _b === void 0 ? 'button' : _b, icon = _a.icon, label = _a.label, _c = _a.tooltipPlacement, tooltipPlacement = _c === void 0 ? 'auto' : _c, tooltipVariant = _a.tooltipVariant, tooltipPortal = _a.tooltipPortal, className = _a.className, _d = _a.variant, variant = _d === void 0 ? 'secondary' : _d, disabled = _a.disabled, _e = _a.tabIndex, tabIndex = _e === void 0 ? 0 : _e, other = tslib.__rest(_a, ["as", "icon", "label", "tooltipPlacement", "tooltipVariant", "tooltipPortal", "className", "variant", "disabled", "tabIndex"]);
+    var internalRef = React.useRef();
+    React.useImperativeHandle(ref, function () { return internalRef.current; });
+    // Configure additional properties based on the type of the Component
+    // for accessibility
+    var accessibilityProps = {};
+    if (Component === 'button') {
+        accessibilityProps.type = 'button';
+    }
+    else {
+        // We don't need to set an anchor's role, since it would be redundant
+        if (Component !== 'a') {
+            accessibilityProps.role = other.href || other.to ? 'link' : 'button';
+        }
+        if (disabled) {
+            accessibilityProps['aria-disabled'] = disabled;
+        }
+    }
+    React.useEffect(function () {
+        var _a;
+        if (!disabled) {
+            return;
+        }
+        (_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-label', label);
+    }, [disabled]);
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("button", tslib.__assign({ type: 'button', className: classNames(className, {
+        React__default.createElement(Component, tslib.__assign({ className: classNames(className, {
                 IconButton: true,
                 'IconButton--primary': variant === 'primary',
                 'IconButton--secondary': variant === 'secondary',
                 'IconButton--error': variant === 'error'
-            }), ref: buttonRef, disabled: disabled }, other),
+            }), ref: internalRef, disabled: disabled, tabIndex: disabled ? -1 : tabIndex }, accessibilityProps, other),
             React__default.createElement(Icon, { type: icon })),
-        !disabled && (React__default.createElement(Tooltip, { target: buttonRef, placement: tooltipPlacement, variant: tooltipVariant, portal: tooltipPortal, association: "aria-labelledby", hideElementOnHidden: true }, label))));
+        !disabled && (React__default.createElement(Tooltip, { target: internalRef, placement: tooltipPlacement, variant: tooltipVariant, portal: tooltipPortal, association: "aria-labelledby", hideElementOnHidden: true }, label))));
 });
 IconButton.propTypes = {
+    // @ts-expect-error
+    as: PropTypes.elementType,
     // @ts-expect-error
     icon: PropTypes.string.isRequired,
     label: PropTypes.string.isRequired,
@@ -1703,19 +1742,29 @@ var Pointout = /** @class */ (function (_super) {
             }
         };
         _this.handleOffscreenFocusIn = function (_a) {
+            var e_1, _b;
             var target = _a.target;
-            var _b = _this, offscreenRef = _b.offscreenRef, visibleRef = _b.visibleRef, getFocusableElements = _b.getFocusableElements;
+            var _c = _this, offscreenRef = _c.offscreenRef, visibleRef = _c.visibleRef, getFocusableElements = _c.getFocusableElements;
             var offscreenFocusable = getFocusableElements(offscreenRef);
             var visibleFocusable = getFocusableElements(visibleRef);
             var elementIndex = offscreenFocusable.findIndex(function (element) { return element === target; });
             if (elementIndex === -1 || !visibleFocusable[elementIndex]) {
                 return;
             }
-            // Tag focusable elements
-            for (var _i = 0, visibleFocusable_1 = visibleFocusable; _i < visibleFocusable_1.length; _i++) {
-                var element = visibleFocusable_1[_i];
-                element.setAttribute('data-focusable', 'true');
-                element.setAttribute('tabindex', '-1');
+            try {
+                // Tag focusable elements
+                for (var visibleFocusable_1 = tslib.__values(visibleFocusable), visibleFocusable_1_1 = visibleFocusable_1.next(); !visibleFocusable_1_1.done; visibleFocusable_1_1 = visibleFocusable_1.next()) {
+                    var element = visibleFocusable_1_1.value;
+                    element.setAttribute('data-focusable', 'true');
+                    element.setAttribute('tabindex', '-1');
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (visibleFocusable_1_1 && !visibleFocusable_1_1.done && (_b = visibleFocusable_1["return"])) _b.call(visibleFocusable_1);
+                }
+                finally { if (e_1) throw e_1.error; }
             }
             visibleFocusable[elementIndex].classList.add('Pointout--focus-active');
         };
@@ -1748,7 +1797,7 @@ var Pointout = /** @class */ (function (_super) {
                 top -= rect.top - portalNode.scrollTop;
                 left -= rect.left - portalNode.scrollLeft;
             }
-            var arrowBoxSide = arrowPosition.split('-')[0];
+            var _e = tslib.__read(arrowPosition.split('-'), 1), arrowBoxSide = _e[0];
             var style;
             switch (arrowBoxSide) {
                 case 'right':
@@ -2160,22 +2209,21 @@ Link.propTypes = {
 Link.displayName = 'Link';
 
 function Loader(_a) {
-    var label = _a.label, className = _a.className, other = tslib.__rest(_a, ["label", "className"]);
-    var props = tslib.__assign(tslib.__assign({}, other), { className: classNames('Loader', className), 'aria-hidden': !label });
-    if (label) {
-        props.role = 'progressbar';
-        props['aria-valuetext'] = label;
-        props['aria-busy'] = true;
-        props['aria-valuemin'] = 0;
-        props['aria-valuemax'] = 100;
-        // According to the  ARIA 1.2 spec (https://www.w3.org/TR/wai-aria-1.2/#progressbar),
-        // the aria-valuenow attribute SHOULD be omitted because the "value" of our progress
-        // is "indeterminate".
+    var className = _a.className, _b = _a.variant, variant = _b === void 0 ? 'small' : _b, label = _a.label, props = tslib.__rest(_a, ["className", "variant", "label"]);
+    if (label === null || label === void 0 ? void 0 : label.length) {
+        props['role'] = 'alert';
+        props.children = React__default.createElement(Offscreen, null, label);
+    }
+    else {
+        props['aria-hidden'] = true;
     }
-    return React__default.createElement("div", tslib.__assign({}, props));
+    return (React__default.createElement("div", tslib.__assign({ className: classNames('Loader', className, variant === 'large'
+            ? 'Loader--large'
+            : variant === 'small'
+                ? 'Loader--small'
+                : '') }, props)));
 }
 Loader.propTypes = {
-    label: PropTypes.string,
     className: PropTypes.string
 };
 Loader.displayName = 'Loader';
@@ -2201,7 +2249,7 @@ var Select = React__default.forwardRef(function (_a, ref) {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     var onChangeEvent = onChange !== null && onChange !== void 0 ? onChange : (function () { });
     var isControlled = typeof value !== 'undefined';
-    var _c = React.useState(value || defaultValue || ''), currentValue = _c[0], setCurrentValue = _c[1];
+    var _c = tslib.__read(React.useState(value || defaultValue || ''), 2), currentValue = _c[0], setCurrentValue = _c[1];
     var handleChange = function (e) {
         onChangeEvent(e);
         if (isControlled) {
@@ -2247,7 +2295,7 @@ var Select = React__default.forwardRef(function (_a, ref) {
             })
                 : children),
             React__default.createElement("div", { className: "arrow-down" })),
-        React__default.createElement("div", { className: "Error", id: errorId }, error)));
+        error && (React__default.createElement("div", { id: errorId, className: "Error" }, error))));
     /* eslint-disable jsx-a11y/no-onchange */
 });
 Select.displayName = 'Select';
@@ -2258,8 +2306,8 @@ var RadioGroup = function (_a) {
     _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 = React.useState(value || defaultValue || null), currentValue = _c[0], setCurrentValue = _c[1];
-    var _d = React.useState(null), focusIndex = _d[0], setFocusIndex = _d[1];
+    var _c = tslib.__read(React.useState(value || defaultValue || null), 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); };
@@ -2294,13 +2342,13 @@ var RadioGroup = function (_a) {
                     handleChange(radioValue);
                     onChange(radio, (_a = inputs.current) === null || _a === void 0 ? void 0 : _a[index]);
                 }, disabled: disabled, checked: isChecked }, other)),
+            React__default.createElement("label", { htmlFor: id, className: classNames('Field__label', {
+                    'Field__label--disabled': disabled
+                }) }, label),
             React__default.createElement(Icon, { className: classNames('Radio__overlay', {
                     'Radio__overlay--focused': isFocused,
                     'Radio__overlay--disabled': disabled
-                }), type: isChecked ? 'radio-checked' : 'radio-unchecked', "aria-hidden": "true", onClick: function () { return onRadioClick(index); } }),
-            React__default.createElement("label", { htmlFor: id, className: classNames('Field__label', {
-                    'Field__label--disabled': disabled
-                }) }, label)));
+                }), type: isChecked ? 'radio-checked' : 'radio-unchecked', "aria-hidden": "true", onClick: function () { return onRadioClick(index); } })));
     });
     // reset the input refs array
     // refs get clobbered every re-render anyway and this supports "dynamic" radios
@@ -2328,8 +2376,8 @@ RadioGroup.displayName = 'RadioGroup';
 
 var Checkbox = React.forwardRef(function (_a, ref) {
     var id = _a.id, label = _a.label, 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", "error", "checkboxRef", "className", "onChange", 'aria-describedby', "disabled", "checked"]);
-    var _d = React.useState(checked), isChecked = _d[0], setIsChecked = _d[1];
-    var _e = React.useState(false), focused = _e[0], setFocused = _e[1];
+    var _d = tslib.__read(React.useState(checked), 2), isChecked = _d[0], setIsChecked = _d[1];
+    var _e = tslib.__read(React.useState(false), 2), focused = _e[0], setFocused = _e[1];
     var checkRef = React.useRef(null);
     React.useEffect(function () {
         setIsChecked(checked);
@@ -2350,6 +2398,9 @@ var Checkbox = React.forwardRef(function (_a, ref) {
                         onChange(e);
                     }
                 } }, other)),
+            React__default.createElement("label", { className: classNames('Field__label', {
+                    'Field__label--disabled': disabled
+                }), htmlFor: id }, label),
             React__default.createElement(Icon, { className: classNames('Checkbox__overlay', {
                     'Checkbox__overlay--disabled': disabled,
                     'Checkbox__overlay--focused': focused,
@@ -2362,11 +2413,8 @@ var Checkbox = React.forwardRef(function (_a, ref) {
                     else {
                         (_b = checkRef.current) === null || _b === void 0 ? void 0 : _b.click();
                     }
-                } }),
-            React__default.createElement("label", { className: classNames('Field__label', {
-                    'Field__label--disabled': disabled
-                }), htmlFor: id }, label)),
-        React__default.createElement("div", { id: errorId, className: "Error" }, error)));
+                } })),
+        error && (React__default.createElement("div", { id: errorId, className: "Error" }, error))));
 });
 Checkbox.displayName = 'Checkbox';
 
@@ -2473,7 +2521,7 @@ var TextField = /** @class */ (function (_super) {
                     _this.input = input;
                     setRef(fieldRef, input);
                 } }, other, inputProps)),
-            React__default.createElement("div", { className: "Error", id: this.errorId }, error)));
+            error && (React__default.createElement("div", { className: "Error", id: this.errorId }, error))));
     };
     TextField.prototype.onChange = function (e) {
         var _a, _b;
@@ -7913,12 +7961,29 @@ Code.propTypes = {
     className: PropTypes.string
 };
 
+function AxeLoader() {
+    return (React__default.createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", x: "0", y: "0", viewBox: "0 0 800 800" },
+        React__default.createElement("path", { fill: "currentColor", d: "M641.4 555.6c-27.2-12.1-59.1.2-71.2 27.3-.5 1-.8 2.1-1.2 3.2H160l227.6-394.3 170.1 292.8 32.4-18.8L387.5 117 95 623.6h474c4.9 13.1 14.8 24.4 28.6 30.5 7.1 3.2 14.5 4.7 21.8 4.7 20.7 0 40.4-11.9 49.3-32 12.1-27.1-.1-59.1-27.3-71.2zm1.6 59.8c-5.8 13-21.1 18.9-34 13.1-13-5.8-18.9-21.1-13.1-34 4.3-9.6 13.7-15.3 23.6-15.3 3.5 0 7.1.7 10.4 2.2 13.1 5.7 18.9 21 13.1 34z" }),
+        React__default.createElement("path", { fill: "currentColor", d: "M379 549.9h-27.6v-16.7c-7.4 13.5-22.8 20.2-39 20.2-37.1 0-58.9-28.9-58.9-61.6 0-36.5 26.4-61.4 58.9-61.4 21.1 0 34 11.2 39 20.5V434H379v115.9zm-97.8-57.4c0 14.3 10.3 35.2 35.2 35.2 15.4 0 25.5-8 30.8-18.6 2.7-5.1 4-10.5 4.4-16.2.2-5.5-.8-11.2-3.2-16.2-4.9-11-15.6-20.5-32.3-20.5-22.4 0-35 18.1-35 36.1v.2zM436.2 488.9l-39-54.8h33.3l22.6 35.6 22.6-35.6h32.9l-38.8 54.8 43.2 61h-34L453.1 510l-26.2 39.9h-33.5l42.8-61z" })));
+}
+
 var LoaderOverlay = React__default.forwardRef(function (_a, ref) {
-    var className = _a.className, other = tslib.__rest(_a, ["className"]);
-    return (React__default.createElement("div", tslib.__assign({ className: classNames('Loader__overlay', className), ref: ref }, other)));
+    var className = _a.className, variant = _a.variant, label = _a.label, other = tslib.__rest(_a, ["className", "variant", "label"]);
+    return (React__default.createElement("div", tslib.__assign({ className: classNames('Loader__overlay', className, variant === 'large'
+            ? 'Loader__overlay--large'
+            : variant === 'small'
+                ? 'Loader__overlay--small'
+                : ''), ref: ref }, other),
+        React__default.createElement("div", { className: "Loader__overlay__loader" },
+            React__default.createElement(Loader, { variant: variant }),
+            React__default.createElement(AxeLoader, null)),
+        label ? React__default.createElement("span", { className: "Loader__overlay__label" }, label) : null,
+        other.children));
 });
 LoaderOverlay.propTypes = {
-    className: PropTypes.string
+    className: PropTypes.string,
+    variant: PropTypes.oneOf(['large', 'small']),
+    label: PropTypes.string
 };
 LoaderOverlay.displayName = 'LoaderOverlay';
 
@@ -7991,12 +8056,19 @@ TableHead.propTypes = {
 };
 
 var TableHeader = function (_a) {
-    var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
-    return (React__default.createElement("th", tslib.__assign({ className: classNames('TableHeader', className) }, other), children));
+    var children = _a.children, sortDirection = _a.sortDirection, onSort = _a.onSort, className = _a.className, other = tslib.__rest(_a, ["children", "sortDirection", "onSort", "className"]);
+    return (React__default.createElement("th", tslib.__assign({ "aria-sort": sortDirection, className: classNames('TableHeader', className, {
+            'TableHeader--sort-ascending': sortDirection === 'ascending',
+            'TableHeader--sort-descending': sortDirection === 'descending'
+        }) }, other), !!onSort && !!sortDirection ? (React__default.createElement("button", { onClick: onSort, className: "TableHeader__sort-button", type: "button" },
+        children,
+        React__default.createElement("span", { "aria-hidden": "true" }, sortDirection === 'none' ? (React__default.createElement(Icon, { type: "sort-triangle" })) : sortDirection === 'ascending' ? (React__default.createElement(Icon, { type: "triangle-up" })) : (React__default.createElement(Icon, { type: "triangle-down" }))))) : (children)));
 };
 TableHeader.displayName = 'TableHeader';
 TableHeader.propTypes = {
     children: PropTypes.node.isRequired,
+    sortDirection: PropTypes.string,
+    onSort: PropTypes.func,
     className: PropTypes.string
 };
 
@@ -8021,9 +8093,29 @@ Tab.propTypes = {
     children: PropTypes.node
 };
 
+/**
+ * Hook to be used similarly to the React.Component#componentDidMount.
+ * Executes the provided `effect` when `dependencies` change but does not
+ * execute the effect initially (on mount) - only on update.
+ *
+ * @param effect {Function} function to be executed when dependencies update
+ * @param dependencies {Any} any valid dependency argument to React.useEffect
+ */
+var useDidUpdate = function (effect, dependencies) {
+    var mounted = React__default.useRef(false);
+    React__default.useEffect(function () {
+        if (!mounted.current) {
+            mounted.current = true;
+            return;
+        }
+        effect();
+    }, dependencies);
+};
+
 var Tabs = function (_a) {
-    var children = _a.children, thin = _a.thin, _b = _a.initialActiveIndex, initialActiveIndex = _b === void 0 ? 0 : _b, className = _a.className, labelProp = tslib.__rest(_a, ["children", "thin", "initialActiveIndex", "className"]);
-    var _c = React.useState(initialActiveIndex), activeIndex = _c[0], setActiveIndex = _c[1];
+    var children = _a.children, thin = _a.thin, _b = _a.orientation, orientation = _b === void 0 ? 'horizontal' : _b, _c = _a.initialActiveIndex, initialActiveIndex = _c === void 0 ? 0 : _c, className = _a.className, onChange = _a.onChange, labelProp = tslib.__rest(_a, ["children", "thin", "orientation", "initialActiveIndex", "className", "onChange"]);
+    var _d = tslib.__read(React.useState(initialActiveIndex), 2), activeIndex = _d[0], setActiveIndex = _d[1];
+    var tabsRef = React.useRef(null);
     var focusedTabRef = React.useRef(null);
     var tabs = React__default.Children.toArray(children).filter(function (child) { return child.type === Tab; });
     var tabCount = tabs.length;
@@ -8033,34 +8125,48 @@ var Tabs = function (_a) {
     var handleKeyDown = function (event) {
         var key = event.key;
         var newIndex = activeIndex;
+        var forward;
+        var backward;
+        if (orientation === 'horizontal') {
+            forward = 'ArrowRight';
+            backward = 'ArrowLeft';
+        }
+        else {
+            forward = 'ArrowDown';
+            backward = 'ArrowUp';
+        }
         switch (key) {
-            case 'ArrowLeft': {
+            case backward: {
                 newIndex = activeIndex - 1;
                 // circularity
                 if (newIndex === -1) {
                     newIndex = tabCount - 1;
                 }
                 setActiveIndex(newIndex);
+                event.preventDefault();
                 break;
             }
-            case 'ArrowRight': {
+            case forward: {
                 newIndex = activeIndex + 1;
                 // circularity
                 if (newIndex === tabCount) {
                     newIndex = 0;
                 }
                 setActiveIndex(newIndex);
+                event.preventDefault();
                 break;
             }
             case 'Home': {
                 newIndex = 0;
                 setActiveIndex(newIndex);
+                event.preventDefault();
                 break;
             }
             case 'End': {
                 event.preventDefault();
                 newIndex = tabCount - 1;
                 setActiveIndex(newIndex);
+                event.preventDefault();
                 break;
             }
         }
@@ -8070,7 +8176,7 @@ var Tabs = function (_a) {
         var _b;
         var _c = child.props, target = _c.target, propId = _c.id, other = tslib.__rest(_c, ["target", "id"]);
         var selected = index === activeIndex;
-        var id = (propId ? [propId] : nextId.useId(1, 'tab'))[0];
+        var _d = tslib.__read(propId ? [propId] : nextId.useId(1, 'tab'), 1), id = _d[0];
         React.useEffect(function () {
             var _a;
             (_a = target.current) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-labelledby', id);
@@ -8088,10 +8194,15 @@ var Tabs = function (_a) {
     useDidUpdate(function () {
         var _a;
         (_a = focusedTabRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        if (typeof onChange === 'function') {
+            onChange({ activeTabIndex: activeIndex, target: focusedTabRef.current });
+        }
     }, [activeIndex]);
     return (React__default.createElement("div", { className: classNames('Tabs', className, {
-            'Tabs--thin': thin
-        }) },
+            'Tabs--thin': thin,
+            'Tabs--vertical': orientation === 'vertical',
+            'Tabs--horizontal': orientation === 'horizontal'
+        }), ref: tabsRef },
         React__default.createElement("ul", tslib.__assign({ role: "tablist", className: "Tablist" }, labelProp, { onKeyDown: handleKeyDown }), tabComponents)));
 };
 Tabs.displayName = 'Tabs';
@@ -8101,12 +8212,13 @@ Tabs.propTypes = {
     'aria-labelledby': PropTypes.string,
     initialActiveIndex: PropTypes.number,
     thin: PropTypes.bool,
+    orientation: PropTypes.string,
     className: PropTypes.string
 };
 
 var TabPanel = React.forwardRef(function (_a, ref) {
     var children = _a.children, propId = _a.id, className = _a.className, other = tslib.__rest(_a, ["children", "id", "className"]);
-    var id = (propId ? [propId] : nextId.useId(1, 'tabpanel'))[0];
+    var _b = tslib.__read(propId ? [propId] : nextId.useId(1, 'tabpanel'), 1), id = _b[0];
     return (React__default.createElement("div", tslib.__assign({ role: "tabpanel", className: classNames('TabPanel', className), id: id, ref: ref }, other), children));
 });
 TabPanel.displayName = 'TabPanel';
@@ -8160,7 +8272,7 @@ var Step = function (props) {
             // list items, therefore it is safe to clobber
             // it with the contents of the tooltip in the
             // tab stop's accessible name.
-            association: "aria-labelledby" },
+            association: "aria-labelledby", "aria-label": isTooltip(props) ? props.tooltipText : undefined },
             React__default.createElement("div", { className: "Stepper__step-indicator" }))) : (React__default.createElement(React__default.Fragment, null,
             React__default.createElement("div", { className: "Stepper__step-indicator" }),
             'children' in props && (React__default.createElement("div", { className: "Stepper__step-label" }, props.children)))))));
@@ -8169,6 +8281,7 @@ Step.displayName = 'Step';
 Step.propTypes = {
     children: PropTypes.node,
     tooltip: PropTypes.node,
+    tooltipText: PropTypes.string,
     className: PropTypes.string
 };
 var Stepper = function (_a) {
@@ -8182,15 +8295,37 @@ Stepper.propTypes = {
 };
 
 var Panel = function (_a) {
-    var className = _a.className, _b = _a.title, title = _b === void 0 ? '' : _b, actions = _a.actions, children = _a.children;
-    return (React__default.createElement("div", { className: classNames('Panel', className) },
-        React__default.createElement("div", { className: "Panel__Header" },
-            title && React__default.createElement("div", { className: "Panel__Header-title" }, title),
-            actions && React__default.createElement("div", { className: "Panel__Header-actions" }, actions)),
-        React__default.createElement("div", { className: "Panel__Content" }, children)));
+    var _b;
+    var children = _a.children, collapsed = _a.collapsed, className = _a.className, heading = _a.heading, other = tslib.__rest(_a, ["children", "collapsed", "className", "heading"]);
+    var Heading = "h" + (typeof heading === 'object' && 'level' in heading && !!heading.level
+        ? heading.level
+        : 2);
+    var headingId = typeof heading === 'object' && 'id' in heading ? heading.id : randomId();
+    return (React__default.createElement("section", tslib.__assign({ "aria-labelledby": headingId, className: classNames('Panel', className, (_b = {},
+            _b['Panel--collapsed'] = collapsed,
+            _b)) }, other),
+        React__default.createElement(Heading, { id: headingId, className: "Panel__Heading" }, typeof heading === 'object' && 'text' in heading
+            ? heading.text
+            : heading),
+        children));
 };
 Panel.displayName = 'Panel';
 Panel.propTypes = {
+    children: PropTypes.node.isRequired,
+    heading: PropTypes.oneOfType([PropTypes.object, PropTypes.node]).isRequired,
+    className: PropTypes.string
+};
+
+var IssuePanel = function (_a) {
+    var className = _a.className, _b = _a.title, title = _b === void 0 ? '' : _b, actions = _a.actions, children = _a.children;
+    return (React__default.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)),
+        React__default.createElement("div", { className: "IssuePanel__Content" }, children)));
+};
+IssuePanel.displayName = 'IssuePanel';
+IssuePanel.propTypes = {
     children: PropTypes.node.isRequired,
     className: PropTypes.string
 };
@@ -8203,31 +8338,129 @@ var ProgressBar = React.forwardRef(function (_a, ref) {
 });
 ProgressBar.displayName = 'ProgressBar';
 
-/**
- * Hook to be used similarly to the React.Component#componentDidMount.
- * Executes the provided `effect` when `dependencies` change but does not
- * execute the effect initially (on mount) - only on update.
- *
- * @param effect {Function} function to be executed when dependencies update
- * @param dependencies {Any} any valid dependency argument to React.useEffect
- */
-var useDidUpdate = function (effect, dependencies) {
-    var mounted = React__default.useRef(false);
-    React__default.useEffect(function () {
-        if (!mounted.current) {
-            mounted.current = true;
-            return;
-        }
-        effect();
-    }, dependencies);
+var Address = function (_a) {
+    var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
+    return (React__default.createElement("address", tslib.__assign({ className: classNames('Address', className) }, other), children));
+};
+Address.displayName = 'Address';
+Address.propTypes = {
+    children: PropTypes.node.isRequired,
+    className: PropTypes.string
+};
+var AddressLine = function (_a) {
+    var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
+    return children ? (React__default.createElement("div", tslib.__assign({ className: classNames('Address__line', className) }, other), children)) : null;
+};
+AddressLine.displayName = 'AddressLine';
+AddressLine.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string
+};
+var AddressCityStateZip = function (_a) {
+    var city = _a.city, state = _a.state, zip = _a.zip, className = _a.className, other = tslib.__rest(_a, ["city", "state", "zip", "className"]);
+    return city || state || zip ? (React__default.createElement("div", tslib.__assign({ className: classNames('Address__city-state-zip', className) }, other), [[city, state].filter(Boolean).join(', '), zip]
+        .filter(Boolean)
+        .join(' '))) : null;
+};
+AddressCityStateZip.displayName = 'AddressCityStateZip';
+AddressCityStateZip.propTypes = {
+    city: PropTypes.node,
+    state: PropTypes.node,
+    zip: PropTypes.node,
+    className: PropTypes.string
+};
+
+var Pagination = React__default.forwardRef(function (_a, ref) {
+    var totalItems = _a.totalItems, _b = _a.itemsPerPage, itemsPerPage = _b === void 0 ? 10 : _b, _c = _a.currentPage, currentPage = _c === void 0 ? 1 : _c, statusLabel = _a.statusLabel, _d = _a.firstPageLabel, firstPageLabel = _d === void 0 ? 'First page' : _d, _e = _a.previousPageLabel, previousPageLabel = _e === void 0 ? 'Previous page' : _e, _f = _a.nextPageLabel, nextPageLabel = _f === void 0 ? 'Next page' : _f, _g = _a.lastPageLabel, lastPageLabel = _g === void 0 ? 'Last page' : _g, _h = _a.tooltipPlacement, tooltipPlacement = _h === void 0 ? 'bottom' : _h, onNextPageClick = _a.onNextPageClick, onPreviousPageClick = _a.onPreviousPageClick, onFirstPageClick = _a.onFirstPageClick, onLastPageClick = _a.onLastPageClick, className = _a.className, other = tslib.__rest(_a, ["totalItems", "itemsPerPage", "currentPage", "statusLabel", "firstPageLabel", "previousPageLabel", "nextPageLabel", "lastPageLabel", "tooltipPlacement", "onNextPageClick", "onPreviousPageClick", "onFirstPageClick", "onLastPageClick", "className"]);
+    var itemStart = currentPage * itemsPerPage - itemsPerPage + 1;
+    var itemEnd = Math.min(itemStart + itemsPerPage - 1, totalItems);
+    var isLastPage = itemEnd === totalItems;
+    var isFirstPage = currentPage === 1;
+    return (React__default.createElement("div", tslib.__assign({ ref: ref, className: classNames('Pagination', className) }, other),
+        React__default.createElement("ul", null,
+            React__default.createElement("li", null, isFirstPage ? (React__default.createElement(TooltipTabstop, { hideElementOnHidden: true, association: "aria-labelledby", tooltip: firstPageLabel, placement: tooltipPlacement },
+                React__default.createElement(Icon, { type: "chevron-double-left" }))) : (React__default.createElement(IconButton, { icon: "chevron-double-left", tooltipPlacement: tooltipPlacement, label: firstPageLabel, onClick: onFirstPageClick }))),
+            React__default.createElement("li", null, isFirstPage ? (React__default.createElement(TooltipTabstop, { hideElementOnHidden: true, association: "aria-labelledby", tooltip: previousPageLabel, placement: tooltipPlacement },
+                React__default.createElement(Icon, { type: "chevron-left" }))) : (React__default.createElement(IconButton, { icon: "chevron-left", tooltipPlacement: tooltipPlacement, label: previousPageLabel, onClick: onPreviousPageClick }))),
+            React__default.createElement("li", null,
+                React__default.createElement("span", { role: "log", "aria-atomic": "true" }, statusLabel || (React__default.createElement("span", null,
+                    "Showing ",
+                    React__default.createElement("strong", null, itemStart),
+                    " of",
+                    ' ',
+                    React__default.createElement("strong", null, itemEnd),
+                    " of ",
+                    React__default.createElement("strong", null, totalItems))))),
+            React__default.createElement("li", null, isLastPage ? (React__default.createElement(TooltipTabstop, { hideElementOnHidden: true, association: "aria-labelledby", tooltip: nextPageLabel, placement: tooltipPlacement },
+                React__default.createElement(Icon, { type: "chevron-right" }))) : (React__default.createElement(IconButton, { icon: "chevron-right", tooltipPlacement: tooltipPlacement, label: nextPageLabel, onClick: onNextPageClick }))),
+            React__default.createElement("li", null, isLastPage ? (React__default.createElement(TooltipTabstop, { hideElementOnHidden: true, association: "aria-labelledby", tooltip: lastPageLabel, placement: tooltipPlacement },
+                React__default.createElement(Icon, { type: "chevron-double-right" }))) : (React__default.createElement(IconButton, { icon: "chevron-double-right", tooltipPlacement: tooltipPlacement, label: lastPageLabel, onClick: onLastPageClick }))))));
+});
+Pagination.displayName = 'Pagination';
+Pagination.propTypes = {
+    totalItems: PropTypes.number.isRequired,
+    itemsPerPage: PropTypes.number,
+    currentPage: PropTypes.number,
+    statusLabel: PropTypes.element,
+    firstPageLabel: PropTypes.string,
+    previousPageLabel: PropTypes.string,
+    nextPageLabel: PropTypes.string,
+    lastPageLabel: PropTypes.string,
+    onNextPageClick: PropTypes.func,
+    onPreviousPageClick: PropTypes.func,
+    onFirstPageClick: PropTypes.func,
+    onLastPageClick: PropTypes.func,
+    // @ts-expect-error
+    tooltipPlacement: PropTypes.string,
+    className: PropTypes.string
 };
 
+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 = {
+    children: PropTypes.node.isRequired,
+    className: PropTypes.string,
+    as: PropTypes.string
+};
+
+var Breadcrumb = React.forwardRef(function (_a, ref) {
+    var _b = _a.separator, separator = _b === void 0 ? '/' : _b, className = _a.className, children = _a.children, props = tslib.__rest(_a, ["separator", "className", "children"]);
+    var items = React__default.Children.toArray(children);
+    var childrenWithSeparators = [];
+    items.forEach(function (child, index) {
+        if (index !== items.length - 1) {
+            childrenWithSeparators.push(React__default.createElement(React__default.Fragment, null,
+                child,
+                React__default.createElement("span", { className: "Breadcrumb__Separator", "aria-hidden": "true" }, separator)));
+        }
+        else {
+            childrenWithSeparators.push(child);
+        }
+    });
+    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)); }))));
+});
+Breadcrumb.displayName = 'Breadcrumb';
+
+var BreadcrumbItem = React.forwardRef(function (_a, ref) {
+    var className = _a.className, children = _a.children, props = tslib.__rest(_a, ["className", "children"]);
+    return (React__default.createElement("span", tslib.__assign({ className: classNames('Breadcrumb__Item', className), ref: ref, "aria-current": "location" }, props), children));
+});
+
+var BreadcrumbLink = React.forwardRef(function (_a, ref) {
+    var className = _a.className, _b = _a.as, ElementType = _b === void 0 ? 'a' : _b, children = _a.children, props = tslib.__rest(_a, ["className", "as", "children"]);
+    return (React__default.createElement(ElementType, tslib.__assign({ className: classNames('Link', 'Breadcrumb__Link', className), ref: ref }, props), children));
+});
+
 var LIGHT_THEME_CLASS = 'cauldron--theme-light';
 var DARK_THEME_CLASS = 'cauldron--theme-dark';
 var ThemeContext = React.createContext({});
 var ThemeProvider = function (_a) {
     var children = _a.children, _b = _a.context, context = _b === void 0 ? document.body : _b, _c = _a.initialTheme, initialTheme = _c === void 0 ? 'light' : _c;
-    var _d = React.useState(initialTheme), theme = _d[0], setTheme = _d[1];
+    var _d = tslib.__read(React.useState(initialTheme), 2), theme = _d[0], setTheme = _d[1];
     var getThemeFromContext = function () {
         return context.classList.contains(DARK_THEME_CLASS) ? 'dark' : 'light';
     };
@@ -8240,12 +8473,22 @@ var ThemeProvider = function (_a) {
     }, [context, theme]);
     // Use a MutationObserver to track changes to the classes outside of the context of React
     var handleMutation = function (mutationList) {
-        for (var _i = 0, mutationList_1 = mutationList; _i < mutationList_1.length; _i++) {
-            var mutation = mutationList_1[_i];
-            if (mutation.type === 'attributes' &&
-                mutation.attributeName === 'class') {
-                setTheme(getThemeFromContext());
+        var e_1, _a;
+        try {
+            for (var mutationList_1 = tslib.__values(mutationList), mutationList_1_1 = mutationList_1.next(); !mutationList_1_1.done; mutationList_1_1 = mutationList_1.next()) {
+                var mutation = mutationList_1_1.value;
+                if (mutation.type === 'attributes' &&
+                    mutation.attributeName === 'class') {
+                    setTheme(getThemeFromContext());
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (mutationList_1_1 && !mutationList_1_1.done && (_a = mutationList_1["return"])) _a.call(mutationList_1);
             }
+            finally { if (e_1) throw e_1.error; }
         }
     };
     React.useEffect(function () {
@@ -8271,10 +8514,16 @@ ThemeProvider.propTypes = {
     initialTheme: PropTypes.string
 };
 
+exports.Address = Address;
+exports.AddressCityStateZip = AddressCityStateZip;
+exports.AddressLine = AddressLine;
 exports.Alert = Alert;
 exports.AlertActions = AlertActions;
 exports.AlertContent = AlertContent;
 exports.AriaIsolate = AriaIsolate;
+exports.Breadcrumb = Breadcrumb;
+exports.BreadcrumbItem = BreadcrumbItem;
+exports.BreadcrumbLink = BreadcrumbLink;
 exports.Button = Button;
 exports.Card = Card;
 exports.CardContent = CardContent;
@@ -8291,8 +8540,10 @@ exports.Dialog = Dialog;
 exports.DialogContent = DialogContent;
 exports.DialogFooter = DialogFooter;
 exports.ExpandCollapsePanel = ExpandCollapsePanel;
+exports.FieldWrap = FieldWrap;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
+exports.IssuePanel = IssuePanel;
 exports.Layout = Layout;
 exports.Line = Line;
 exports.Link = Link;
@@ -8312,6 +8563,7 @@ exports.OptionsMenuItem = OptionsMenuItem;
 exports.OptionsMenuList = OptionsMenuList;
 exports.OptionsMenuTrigger = OptionsMenuTrigger;
 exports.OptionsMenuWrapper = OptionsMenuWrapper;
+exports.Pagination = Pagination;
 exports.Panel = Panel;
 exports.PanelTrigger = PanelTrigger$1;
 exports.Pointout = Pointout;