@deque/cauldron-react 2.0.0 → 3.0.1-canary.0298c7b0

package/lib/index.js

@@ -10,10 +10,10 @@ var React__default = _interopDefault(React);
 var PropTypes = _interopDefault(require('prop-types'));
 var classNames = _interopDefault(require('classnames'));
 var keyname = _interopDefault(require('keyname'));
-var reactDom = require('react-dom');
-var FocusTrap = _interopDefault(require('focus-trap-react'));
 var nextId = require('react-id-generator');
 var nextId__default = _interopDefault(nextId);
+var reactDom = require('react-dom');
+var FocusTrap = _interopDefault(require('focus-trap-react'));
 var reactPopper = require('react-popper');
 var focusable = _interopDefault(require('focusable'));
 
@@ -112,11 +112,89 @@ var Workspace = /** @class */ (function (_super) {
 
 var Offscreen = function (props) { return (React__default.createElement("div", tslib.__assign({ className: "Offscreen" }, props))); };
 
+/*!
+ * GENERATED CODE. DO NOT EDIT DIRECTLY!
+ */
+/** iconTypes holds each valid icon type. */
+var iconTypes = [
+    'add-user',
+    'arrow-circle-up',
+    'arrow-circle-down',
+    'arrow-circle-left',
+    'arrow-circle-right',
+    'arrow-up',
+    'arrow-down',
+    'arrow-left',
+    'arrow-right',
+    'arrows-alt',
+    'bolt',
+    'caution',
+    'check-circle',
+    'check-shield',
+    'check-solid',
+    'check',
+    'checkbox-checked',
+    'checkbox-unchecked',
+    'chevron-double-up',
+    'chevron-double-down',
+    'chevron-double-left',
+    'chevron-double-right',
+    'chevron-up',
+    'chevron-down',
+    'chevron-left',
+    'chevron-right',
+    'close',
+    'code',
+    'copy',
+    'download',
+    'exchange',
+    'external-link',
+    'eye',
+    'filter',
+    'flag',
+    'gears',
+    'grid',
+    'hamburger-menu',
+    'highlight',
+    'info-circle-alt',
+    'info-circle',
+    'info-square',
+    'kabob',
+    'list',
+    'lock',
+    'magnifying-glass',
+    'menu',
+    'new-releases',
+    'new',
+    'no',
+    'pencil',
+    'plus',
+    'question-circle',
+    'radio-checked',
+    'radio-unchecked',
+    'recycle',
+    'robot',
+    'run-again',
+    'save',
+    'share',
+    'sort',
+    'star',
+    'sun',
+    'tag',
+    'target',
+    'trash',
+    'triangle-up',
+    'triangle-down',
+    'triangle-left',
+    'triangle-right',
+    'upload'
+];
+
 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/arrow-circle.svg': return Promise.resolve().then(function () { return require('./arrow-circle-858d89b5.js'); });
+     case './icons/arrow.svg': return Promise.resolve().then(function () { return require('./arrow-36f5cb02.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'); });
@@ -126,10 +204,11 @@ function __variableDynamicImportRuntime0__(path) {
      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-1b16b9ec.js'); });
+     case './icons/chevron-double.svg': return Promise.resolve().then(function () { return require('./chevron-double-42e4b50e.js'); });
+     case './icons/chevron.svg': return Promise.resolve().then(function () { return require('./chevron-cbfd92ec.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'); });
@@ -142,10 +221,12 @@ function __variableDynamicImportRuntime0__(path) {
      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-2bb052ac.js'); });
+     case './icons/magnifying-glass.svg': return Promise.resolve().then(function () { return require('./magnifying-glass-2907fb77.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'); });
@@ -154,6 +235,8 @@ function __variableDynamicImportRuntime0__(path) {
      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'); });
@@ -163,7 +246,7 @@ function __variableDynamicImportRuntime0__(path) {
      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/triangle.svg': return Promise.resolve().then(function () { return require('./triangle-42e0eece.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));
    }
@@ -205,6 +288,7 @@ var Icon = React.forwardRef(function (_a, ref) {
 Icon.propTypes = {
     label: PropTypes.string,
     className: PropTypes.string,
+    // @ts-expect-error
     type: PropTypes.string.isRequired
 };
 Icon.displayName = 'Icon';
@@ -907,6 +991,69 @@ var TopBarMenu = /** @class */ (function (_super) {
     return TopBarMenu;
 }(React__default.Component));
 
+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 showNavItems = !collapsed || (collapsed && showDropdown);
+    var handleOutSideEvent = function (e) {
+        var _a;
+        var target = e.target;
+        if (navRef.current && !((_a = navRef.current) === null || _a === void 0 ? void 0 : _a.contains(target))) {
+            setShowDropdown(false);
+        }
+    };
+    var handleKeyDown = function (e) {
+        var _a;
+        if (e.key !== 'Escape') {
+            return;
+        }
+        setShowDropdown(false);
+        (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    React.useEffect(function () {
+        if (collapsed && showDropdown) {
+            document.addEventListener('focusin', handleOutSideEvent);
+            return function () {
+                document.removeEventListener('focusin', handleOutSideEvent);
+            };
+        }
+    }, [collapsed, showDropdown]);
+    var handleTriggerClick = function () {
+        setShowDropdown(!showDropdown);
+    };
+    return (React__default.createElement("nav", { className: classNames('NavBar', className, {
+            'NavBar--collapsed': collapsed
+        }), ref: navRef },
+        collapsed && (React__default.createElement("button", { "aria-haspopup": "true", "aria-expanded": showDropdown, "aria-controls": menuId, ref: triggerRef, onClick: handleTriggerClick, className: classNames('NavBar__trigger', {
+                'NavBar__trigger--active': showDropdown
+            }) },
+            React__default.createElement(Icon, { type: showDropdown ? 'close' : 'hamburger-menu' }),
+            navTriggerLabel)),
+        showNavItems && (React__default.createElement("ul", { onKeyDown: handleKeyDown, id: menuId }, children))));
+};
+NavBar.displayName = 'NavBar';
+NavBar.propTypes = {
+    children: PropTypes.node.isRequired,
+    className: PropTypes.string,
+    collapsed: PropTypes.bool,
+    navTriggerLabel: PropTypes.string,
+    propId: PropTypes.string
+};
+
+var NavItem = function (_a) {
+    var children = _a.children, active = _a.active, other = tslib.__rest(_a, ["children", "active"]);
+    return (React__default.createElement("li", tslib.__assign({ className: classNames('NavItem', {
+            'NavItem--active': active
+        }) }, other), children));
+};
+NavItem.displayName = 'NavItem';
+NavItem.propTypes = {
+    children: PropTypes.node.isRequired
+};
+
 /**
  * Selector for NATURALLY focusable elements
  * @type {String}
@@ -1003,11 +1150,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 */
@@ -1320,7 +1467,7 @@ 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 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 id = (propId ? [propId] : nextId.useId(1, 'tooltip'))[0];
     var hovering = React.useRef(false);
     var _g = React.useState(initialPlacement), placement = _g[0], setPlacement = _g[1];
@@ -1441,7 +1588,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'
@@ -1470,29 +1617,61 @@ 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,
-    // @ts-ignore
+    // @ts-expect-error
     tooltipPlacement: PropTypes.string,
-    // @ts-ignore
+    // @ts-expect-error
     tooltipVariant: PropTypes.string,
     tooltipPortal: PropTypes.any,
-    // @ts-ignore
+    // @ts-expect-error
     variant: PropTypes.string
 };
 IconButton.displayName = 'IconButton';
@@ -2014,22 +2193,18 @@ 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, label = _a.label, other = tslib.__rest(_a, ["className", "label"]);
+    var props = tslib.__assign(tslib.__assign({}, other), { className: classNames('Loader', className) });
+    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));
 }
 Loader.propTypes = {
-    label: PropTypes.string,
     className: PropTypes.string
 };
 Loader.displayName = 'Loader';
@@ -2048,18 +2223,16 @@ var tokenList = function (id, currentVal) {
 };
 
 var Select = React__default.forwardRef(function (_a, ref) {
-    var options = _a.options, children = _a.children, disabled = _a.disabled, label = _a.label, id = _a.id, required = _a.required, _b = _a.requiredText, requiredText = _b === void 0 ? 'Required' : _b, error = _a.error, value = _a.value, ariaDescribedby = _a["aria-describedby"], defaultValue = _a.defaultValue, 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    _c = _a.onChange, 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onChange = _c === void 0 ? function () { } : _c, rest = tslib.__rest(_a, ["options", "children", "disabled", "label", "id", "required", "requiredText", "error", "value", 'aria-describedby', "defaultValue", "onChange"]);
+    var options = _a.options, children = _a.children, disabled = _a.disabled, label = _a.label, id = _a.id, required = _a.required, _b = _a.requiredText, requiredText = _b === void 0 ? 'Required' : _b, error = _a.error, value = _a.value, ariaDescribedby = _a["aria-describedby"], defaultValue = _a.defaultValue, onChange = _a.onChange, rest = tslib.__rest(_a, ["options", "children", "disabled", "label", "id", "required", "requiredText", "error", "value", 'aria-describedby', "defaultValue", "onChange"]);
     if (options && children) {
         console.error('The Select component only takes the options props or child option elements, not both.');
     }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    var onChangeEvent = onChange !== null && onChange !== void 0 ? onChange : (function () { });
     var isControlled = typeof value !== 'undefined';
-    var _d = React.useState(value || defaultValue || ''), currentValue = _d[0], setCurrentValue = _d[1];
+    var _c = React.useState(value || defaultValue || ''), currentValue = _c[0], setCurrentValue = _c[1];
     var handleChange = function (e) {
-        onChange(e);
+        onChangeEvent(e);
         if (isControlled) {
             return;
         }
@@ -2103,7 +2276,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';
@@ -2150,13 +2323,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
@@ -2206,6 +2379,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,
@@ -2218,11 +2394,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';
 
@@ -2242,12 +2415,16 @@ function TooltipTabstop(_a) {
 TooltipTabstop.displayName = 'TooltipTabstop';
 
 var Card = function (_a) {
-    var className = _a.className, other = tslib.__rest(_a, ["className"]);
-    return (React__default.createElement("div", tslib.__assign({ className: classNames('Card', className) }, other)));
+    var className = _a.className, variant = _a.variant, other = tslib.__rest(_a, ["className", "variant"]);
+    return (React__default.createElement("div", tslib.__assign({ className: classNames(className, {
+            'Card--simple': variant === 'simple',
+            Card: !variant
+        }) }, other)));
 };
 Card.displayName = 'Card';
 Card.propTypes = {
-    className: PropTypes.string
+    className: PropTypes.string,
+    variant: PropTypes.string
 };
 
 var CardHeader = function (_a) {
@@ -2291,21 +2468,12 @@ var TextField = /** @class */ (function (_super) {
         _this.onChange = _this.onChange.bind(_this);
         return _this;
     }
-    TextField.prototype.componentDidUpdate = function (prevProps) {
-        var value = this.props.value;
-        if (value === prevProps.value) {
-            return;
-        }
-        this.setState({ value: value });
-    };
     TextField.prototype.render = function () {
         var _this = this;
         var isRequired = !!this.props.required;
         // disabling `no-unused-vars` to prevent specific
         // props from being passed through to the input
-        var _a = this.props, label = _a.label, fieldRef = _a.fieldRef, 
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        value = _a.value, 
+        var _a = this.props, label = _a.label, fieldRef = _a.fieldRef, value = _a.value, 
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         onChange = _a.onChange, 
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -2330,11 +2498,11 @@ var TextField = /** @class */ (function (_super) {
                     'Field__text-input': !multiline,
                     Field__textarea: multiline,
                     'Field--has-error': error
-                }), id: this.inputId, value: this.state.value, onChange: this.onChange, "aria-invalid": !!error, ref: function (input) {
+                }), id: this.inputId, value: typeof value !== 'undefined' ? value : this.state.value, onChange: this.onChange, "aria-invalid": !!error, ref: function (input) {
                     _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;
@@ -2380,11 +2548,10 @@ var TextField = /** @class */ (function (_super) {
 }(React__default.Component));
 
 function PanelTrigger(_a) {
-    var children = _a.children, className = _a.className, open = _a.open, onClick = _a.onClick, other = tslib.__rest(_a, ["children", "className", "open", "onClick"]);
-    return (React__default.createElement("button", tslib.__assign({}, other, { className: classNames('ExpandCollapse__trigger', className), type: "button", "aria-expanded": open, onClick: onClick }),
-        typeof children === 'function' ? children({ open: !!open }) : children,
-        ' ',
-        React__default.createElement(Icon, { type: "chevron-" + (open ? 'down' : 'right') })));
+    var children = _a.children, className = _a.className, open = _a.open, fullWidth = _a.fullWidth, onClick = _a.onClick, other = tslib.__rest(_a, ["children", "className", "open", "fullWidth", "onClick"]);
+    return (React__default.createElement("button", tslib.__assign({}, other, { className: classNames('ExpandCollapse__trigger', fullWidth ? 'fullWidth' : '', className), type: "button", "aria-expanded": open, onClick: onClick }),
+        React__default.createElement("div", { className: "ExpandCollapse__trigger-title" }, typeof children === 'function' ? children({ open: !!open }) : children),
+        React__default.createElement(Icon, { type: open ? 'chevron-down' : 'chevron-right' })));
 }
 PanelTrigger.propTypes = {
     children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
@@ -2506,7 +2673,7 @@ var ExpandCollapsePanel = /** @class */ (function (_super) {
                     open: isOpen,
                     onClick: this.handleToggle
                 }),
-            React__default.createElement("div", tslib.__assign({}, other, { className: classNames(animationClass, className, {
+            React__default.createElement("div", tslib.__assign({}, other, { className: classNames('ExpandCollapse__panel', animationClass, className, {
                     'is--hidden': !isOpen && !isAnimating
                 }), ref: this.panel }), panelElements)));
     };
@@ -7872,6 +8039,116 @@ TableRow.propTypes = {
     className: PropTypes.string
 };
 
+var Tab = React__default.forwardRef(function (_a, ref) {
+    var children = _a.children, propId = _a.id, target = _a.target, other = tslib.__rest(_a, ["children", "id", "target"]);
+    return (React__default.createElement("li", tslib.__assign({ id: propId, ref: ref, role: "tab" }, other), children));
+});
+Tab.displayName = 'Tab';
+Tab.propTypes = {
+    target: PropTypes.any.isRequired,
+    id: PropTypes.string,
+    children: PropTypes.node
+};
+
+var Tabs = function (_a) {
+    var children = _a.children, thin = _a.thin, _b = _a.initialActiveIndex, initialActiveIndex = _b === void 0 ? 0 : _b, className = _a.className, onChange = _a.onChange, labelProp = tslib.__rest(_a, ["children", "thin", "initialActiveIndex", "className", "onChange"]);
+    var _c = React.useState(initialActiveIndex), activeIndex = _c[0], setActiveIndex = _c[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;
+    var handleClick = function (index) {
+        setActiveIndex(index);
+    };
+    var handleKeyDown = function (event) {
+        var key = event.key;
+        var newIndex = activeIndex;
+        switch (key) {
+            case 'ArrowLeft': {
+                newIndex = activeIndex - 1;
+                // circularity
+                if (newIndex === -1) {
+                    newIndex = tabCount - 1;
+                }
+                setActiveIndex(newIndex);
+                break;
+            }
+            case 'ArrowRight': {
+                newIndex = activeIndex + 1;
+                // circularity
+                if (newIndex === tabCount) {
+                    newIndex = 0;
+                }
+                setActiveIndex(newIndex);
+                break;
+            }
+            case 'Home': {
+                newIndex = 0;
+                setActiveIndex(newIndex);
+                break;
+            }
+            case 'End': {
+                event.preventDefault();
+                newIndex = tabCount - 1;
+                setActiveIndex(newIndex);
+                break;
+            }
+        }
+    };
+    var tabComponents = tabs.map(function (child, index) {
+        var _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];
+        React.useEffect(function () {
+            var _a;
+            (_a = target.current) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-labelledby', id);
+        }, [target]);
+        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');
+        }, [activeIndex]);
+        var config = tslib.__assign((_a = { id: id, className: classNames('Tab', {
+                    'Tab--active': selected
+                }), tabIndex: index === activeIndex ? 0 : -1 }, _a['aria-controls'] = (_b = target.current) === null || _b === void 0 ? void 0 : _b.id, _a['aria-selected'] = selected, _a.ref = index === activeIndex ? focusedTabRef : null, _a.onClick = function () { return handleClick(index); }, _a), other);
+        return React__default.cloneElement(child, config);
+    });
+    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
+        }), ref: tabsRef },
+        React__default.createElement("ul", tslib.__assign({ role: "tablist", className: "Tablist" }, labelProp, { onKeyDown: handleKeyDown }), tabComponents)));
+};
+Tabs.displayName = 'Tabs';
+Tabs.propTypes = {
+    children: PropTypes.node.isRequired,
+    'aria-label': PropTypes.string,
+    'aria-labelledby': PropTypes.string,
+    initialActiveIndex: PropTypes.number,
+    thin: PropTypes.bool,
+    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];
+    return (React__default.createElement("div", tslib.__assign({ role: "tabpanel", className: classNames('TabPanel', className), id: id, ref: ref }, other), children));
+});
+TabPanel.displayName = 'TabPanel';
+TabPanel.propTypes = {
+    id: PropTypes.string,
+    children: PropTypes.node,
+    className: PropTypes.string
+};
+
 var commonPropTypes = {
     children: PropTypes.node.isRequired,
     className: PropTypes.string
@@ -7916,7 +8193,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)))))));
@@ -7925,6 +8202,7 @@ Step.displayName = 'Step';
 Step.propTypes = {
     children: PropTypes.node,
     tooltip: PropTypes.node,
+    tooltipText: PropTypes.string,
     className: PropTypes.string
 };
 var Stepper = function (_a) {
@@ -7937,6 +8215,79 @@ Stepper.propTypes = {
     className: PropTypes.string
 };
 
+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)));
+};
+Panel.displayName = 'Panel';
+Panel.propTypes = {
+    children: PropTypes.node.isRequired,
+    className: PropTypes.string
+};
+
+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) + "%" } })));
+});
+ProgressBar.displayName = 'ProgressBar';
+
+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
+};
+
+/**
+ * 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 LIGHT_THEME_CLASS = 'cauldron--theme-light';
 var DARK_THEME_CLASS = 'cauldron--theme-dark';
 var ThemeContext = React.createContext({});
@@ -7986,6 +8337,9 @@ ThemeProvider.propTypes = {
     initialTheme: PropTypes.string
 };
 
+exports.Address = Address;
+exports.AddressCityStateZip = AddressCityStateZip;
+exports.AddressLine = AddressLine;
 exports.Alert = Alert;
 exports.AlertActions = AlertActions;
 exports.AlertContent = AlertContent;
@@ -8019,14 +8373,18 @@ exports.MenuItem = MenuItem;
 exports.Modal = Modal;
 exports.ModalContent = ModalContent;
 exports.ModalFooter = ModalFooter;
+exports.NavBar = NavBar;
+exports.NavItem = NavItem;
 exports.Offscreen = Offscreen;
 exports.OptionsMenu = OptionsMenu;
 exports.OptionsMenuItem = OptionsMenuItem;
 exports.OptionsMenuList = OptionsMenuList;
 exports.OptionsMenuTrigger = OptionsMenuTrigger;
 exports.OptionsMenuWrapper = OptionsMenuWrapper;
+exports.Panel = Panel;
 exports.PanelTrigger = PanelTrigger$1;
 exports.Pointout = Pointout;
+exports.ProgressBar = ProgressBar;
 exports.RadioGroup = RadioGroup;
 exports.Scrim = Scrim;
 exports.Select = Select;
@@ -8036,12 +8394,15 @@ exports.Sidebar = SideBar;
 exports.SkipLink = SkipLink;
 exports.Step = Step;
 exports.Stepper = Stepper;
+exports.Tab = Tab;
+exports.TabPanel = TabPanel;
 exports.Table = Table;
 exports.TableBody = TableBody;
 exports.TableCell = TableCell;
 exports.TableHead = TableHead;
 exports.TableHeader = TableHeader;
 exports.TableRow = TableRow;
+exports.Tabs = Tabs;
 exports.Tag = Tag;
 exports.TagLabel = TagLabel;
 exports.TextField = TextField;
@@ -8058,4 +8419,6 @@ exports.TopBarMenu = TopBarMenu;
 exports.TopBarTrigger = TopBarTrigger;
 exports.Workspace = Workspace;
 exports.focusableSelector = focusableSelector;
+exports.iconTypes = iconTypes;
+exports.useDidUpdate = useDidUpdate;
 exports.useThemeContext = useThemeContext;