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

package/lib/{arrow-97011665.js → arrow-36f5cb02.js}

@@ -8,19 +8,17 @@ var React__default = _interopDefault(React);
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 var _ref = /*#__PURE__*/React.createElement("path", {
-  d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z",
-  vectorEffect: "non-scaling-stroke",
-  fill: "currentColor"
+  d: "M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z",
+  fill: "currentColor",
+  vectorEffect: "non-scaling-stroke"
 });
 
 function SvgArrow(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     overflow: "visible",
     preserveAspectRatio: "none",
-    viewBox: "0 0 24 24",
-    width: 28,
-    height: 28,
-    transform: "rotate(180)"
+    width: 24,
+    height: 24
   }, props), _ref);
 }
 

package/lib/{arrow-circle-7b95a2fd.js → arrow-circle-858d89b5.js}

@@ -8,19 +8,17 @@ var React__default = _interopDefault(React);
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 var _ref = /*#__PURE__*/React.createElement("path", {
-  d: "M17.33 12.67c-.01.37-.3.66-.67.67h-5.22l2 2c.25.26.25.68 0 .94l-.95.95c-.26.25-.68.25-.94 0L6.8 12.47a.683.683 0 010-.94l4.72-4.72c.26-.25.68-.25.94 0l.95.95c.26.25.27.66.02.92l-.02.02-2 2h5.23c.37.01.66.3.67.67v1.33l.02-.03zM18.92 8A8.016 8.016 0 0016 5.08 7.798 7.798 0 0012 4c-1.41-.01-2.79.37-4 1.08-1.21.7-2.22 1.71-2.92 2.92A7.798 7.798 0 004 12c-.01 1.41.36 2.79 1.07 4 .7 1.21 1.71 2.22 2.93 2.92 1.21.71 2.59 1.09 4 1.08 1.41.01 2.79-.36 4-1.07 1.21-.7 2.22-1.71 2.92-2.93A7.798 7.798 0 0020 12c.01-1.41-.37-2.79-1.08-4z",
-  vectorEffect: "non-scaling-stroke",
-  fill: "currentColor"
+  d: "M17.37 12c0 .18-.06.35-.19.47l-4.71 4.73c-.26.25-.68.25-.94 0l-4.71-4.72a.683.683 0 010-.94l.95-.95c.25-.26.66-.27.92-.02l.02.02 2 2V7.34c.01-.37.3-.66.67-.67h1.33c.37.01.66.3.67.67v5.23l2-2c.26-.25.68-.25.94 0l.95.95c.13.12.19.29.19.47l-.09.01zm1.55-4A8.016 8.016 0 0016 5.08 7.798 7.798 0 0012 4c-1.41-.01-2.79.37-4 1.08-1.21.7-2.22 1.71-2.92 2.92A7.798 7.798 0 004 12c-.01 1.41.36 2.79 1.07 4 .7 1.21 1.71 2.22 2.93 2.92 1.21.71 2.59 1.09 4 1.08 1.41.01 2.79-.36 4-1.07 1.21-.7 2.22-1.71 2.92-2.93A7.798 7.798 0 0020 12c.01-1.41-.37-2.79-1.08-4z",
+  fill: "currentColor",
+  vectorEffect: "non-scaling-stroke"
 });
 
 function SvgArrowCircle(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     overflow: "visible",
     preserveAspectRatio: "none",
-    viewBox: "0 0 24 24",
-    width: 17,
-    height: 17,
-    transform: "rotate(180)"
+    width: 24,
+    height: 24
   }, props), _ref);
 }
 

package/lib/cauldron.css

@@ -48,19 +48,19 @@ a.Button--primary {
   display: block;
 }
 
-/* Icon--right is the default orientation */
+/* Icon--down is the default orientation */
 
-.Icon__right {
-}
-
-.Icon__left {
-  transform: scaleX(-1);
+.Icon__down {
 }
 
 .Icon__up {
-  transform: rotate(-90deg);
+  transform: scaleY(-1);
 }
 
-.Icon__down {
+.Icon__left {
   transform: rotate(90deg);
 }
+
+.Icon__right {
+  transform: rotate(-90deg);
+}

package/lib/{chevron-064d5f96.js → chevron-cbfd92ec.js}

@@ -8,18 +8,17 @@ var React__default = _interopDefault(React);
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 var _ref = /*#__PURE__*/React.createElement("path", {
-  d: "M15.02 12a.35.35 0 00-.1-.24l-4.83-4.85a.332.332 0 00-.47-.01l-.01.01-.52.52c-.14.13-.14.33-.02.47l.01.01 4.1 4.09-4.1 4.09c-.13.13-.14.33-.01.47l.01.01.52.52c.13.13.33.14.47.01l.01-.01 4.85-4.85c.06-.07.09-.15.09-.24z",
-  vectorEffect: "non-scaling-stroke",
-  fill: "currentColor"
+  d: "M17.2 9.84a.35.35 0 00-.1-.24l-.52-.52a.332.332 0 00-.47-.01l-.01.01-4.1 4.1-4.09-4.1a.333.333 0 00-.47-.02l-.01.01-.52.53c-.13.13-.14.33-.01.47l.01.01 4.85 4.85c.13.13.33.14.47.01l.01-.01 4.85-4.85c.06-.06.1-.15.1-.24h.01z",
+  fill: "currentColor",
+  vectorEffect: "non-scaling-stroke"
 });
 
 function SvgChevron(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     overflow: "visible",
     preserveAspectRatio: "none",
-    viewBox: "0 0 24 24",
-    width: 25,
-    height: 25
+    width: 24,
+    height: 24
   }, props), _ref);
 }
 

package/lib/{chevron-double-65975fca.js → chevron-double-42e4b50e.js}

@@ -8,18 +8,17 @@ var React__default = _interopDefault(React);
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 var _ref = /*#__PURE__*/React.createElement("path", {
-  d: "M13.02 12a.35.35 0 00-.1-.24L8.09 6.91a.332.332 0 00-.47-.01l-.01.01-.52.52c-.14.13-.14.33-.02.47l.01.01 4.1 4.09-4.08 4.09c-.13.13-.14.33-.01.47l.01.01.52.52c.13.13.33.14.47.01l.01-.01 4.85-4.85c.05-.07.07-.15.07-.24zm4 0a.35.35 0 00-.1-.24l-4.83-4.85a.332.332 0 00-.47-.01l-.01.01-.52.52c-.13.13-.14.33-.01.47l.01.01 4.1 4.09-4.09 4.09c-.13.13-.14.33-.01.47l.01.01.52.52c.13.13.33.14.47.01l.01-.01 4.85-4.85c.05-.07.07-.15.07-.24z",
-  vectorEffect: "non-scaling-stroke",
-  fill: "currentColor"
+  d: "M17.2 11.84a.35.35 0 00-.1-.24l-.52-.52a.332.332 0 00-.47-.01l-.01.01-4.1 4.1-4.09-4.1a.332.332 0 00-.47-.01l-.01.01-.52.52c-.13.13-.14.33-.01.47l.01.01 4.85 4.85c.13.13.33.14.47.01l.01-.01 4.85-4.85c.06-.06.1-.15.1-.24h.01zm0-4a.35.35 0 00-.1-.24l-.52-.52a.332.332 0 00-.47-.01l-.01.01-4.1 4.1-4.09-4.09a.333.333 0 00-.47-.02l-.01.01-.52.53a.32.32 0 00-.02.46l.01.01 4.85 4.85c.13.13.33.14.47.01l.01-.01 4.85-4.85c.06-.06.1-.15.1-.24h.02z",
+  fill: "currentColor",
+  vectorEffect: "non-scaling-stroke"
 });
 
 function SvgChevronDouble(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     overflow: "visible",
     preserveAspectRatio: "none",
-    viewBox: "0 0 24 24",
-    width: 25,
-    height: 25
+    width: 24,
+    height: 24
   }, props), _ref);
 }
 

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+interface AddressProps extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+}
+export declare const Address: {
+    ({ children, className, ...other }: AddressProps): JSX.Element;
+    displayName: string;
+    propTypes: {
+        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        className: PropTypes.Requireable<string>;
+    };
+};
+declare type AddressLineProps = React.HTMLAttributes<HTMLElement>;
+export declare const AddressLine: {
+    ({ children, className, ...other }: AddressLineProps): JSX.Element | null;
+    displayName: string;
+    propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+    };
+};
+interface AddressCityStateZipProps extends React.HTMLAttributes<HTMLElement> {
+    city: React.ReactNode;
+    state: React.ReactNode;
+    zip: React.ReactNode;
+}
+export declare const AddressCityStateZip: {
+    ({ city, state, zip, className, ...other }: AddressCityStateZipProps): JSX.Element | null;
+    displayName: string;
+    propTypes: {
+        city: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        state: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        zip: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+    };
+};
+export {};

package/lib/components/Icon/types.d.ts

@@ -2,6 +2,6 @@
  * GENERATED CODE. DO NOT EDIT DIRECTLY!
  */
 /** IconType represents each valid icon type. */
-export declare type IconType = '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' | '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';
+export declare type IconType = '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';
 /** iconTypes holds each valid icon type. */
 export declare const iconTypes: string[];

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

@@ -1,7 +1,7 @@
-import React from 'react';
+import * as Polymorphic from '../../utils/polymorphic-type';
 import { IconType } from '../Icon';
 import { TooltipProps } from '../Tooltip';
-export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface IconButtonOwnProps {
     icon: IconType;
     label: string;
     tooltipPlacement?: TooltipProps['placement'];
@@ -9,5 +9,12 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
     tooltipPortal?: TooltipProps['portal'];
     variant?: 'primary' | 'secondary' | 'error';
 }
-declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+declare type PolymorphicIconButton = Polymorphic.ForwardRefComponent<'button', IconButtonOwnProps>;
+/**
+ * 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
+ */
+declare const IconButton: PolymorphicIconButton;
 export default IconButton;

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

@@ -1,12 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 export interface LoaderProps extends React.HTMLAttributes<HTMLDivElement> {
-    label: string;
+    label?: string;
 }
-declare function Loader({ label, className, ...other }: LoaderProps): JSX.Element;
+declare function Loader({ className, label, ...other }: LoaderProps): JSX.Element;
 declare namespace Loader {
     var propTypes: {
-        label: PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;
     };
     var displayName: string;

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

@@ -5,7 +5,7 @@ declare const Panel: {
     ({ className, title, actions, children }: {
         className?: string | undefined;
         title?: string | undefined;
-        actions?: React.ForwardRefExoticComponent<import("../IconButton").IconButtonProps & React.RefAttributes<HTMLButtonElement>>[] | undefined;
+        actions?: import("../../utils/polymorphic-type").ForwardRefComponent<"button", import("../IconButton").IconButtonOwnProps>[] | undefined;
         children: React.ReactNode;
     }): JSX.Element;
     displayName: string;

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

@@ -5,6 +5,7 @@ export interface SideBarProps extends React.HTMLAttributes<HTMLUListElement> {
     onDismiss: () => void;
     className?: string;
     show: boolean;
+    navProps: React.HTMLAttributes<HTMLElement>;
 }
 interface SideBarState {
     wide: boolean;

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

@@ -9,6 +9,7 @@ interface StepWithChildren extends BaseStepProps {
 }
 interface StepWithTooltip extends BaseStepProps {
     tooltip: React.ReactNode;
+    tooltipText: string;
 }
 declare type StepProps = StepWithChildren | StepWithTooltip;
 export declare const Step: {
@@ -17,6 +18,7 @@ export declare const Step: {
     propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         tooltip: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        tooltipText: PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;
     };
 };

package/lib/components/Table/TableCell.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { TdHTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
-interface TableCellProps {
+interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
     children: React.ReactNode;
     className?: string;
 }

package/lib/components/Table/TableHeader.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { ThHTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
-interface TableHeaderProps {
+interface TableHeaderProps extends ThHTMLAttributes<HTMLTableCellElement> {
     children: React.ReactNode;
     className?: string;
 }

package/lib/components/Tabs/Tabs.d.ts

@@ -1,3 +1,4 @@
+import { Cauldron } from '../../types';
 import React from 'react';
 import PropTypes from 'prop-types';
 declare type TabsProps = {
@@ -5,9 +6,13 @@ declare type TabsProps = {
     initialActiveIndex?: number;
     thin?: boolean;
     className?: string;
+    onChange?: ({ activeTabIndex, target }: {
+        activeTabIndex: number;
+        target: HTMLLIElement | null;
+    }) => void;
 } & Cauldron.LabelProps;
 declare const Tabs: {
-    ({ children, thin, initialActiveIndex, className, ...labelProp }: TabsProps): JSX.Element;
+    ({ children, thin, initialActiveIndex, className, onChange, ...labelProp }: TabsProps): JSX.Element;
     displayName: string;
     propTypes: {
         children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;

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

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

package/lib/index.d.ts

@@ -43,6 +43,7 @@ export { DescriptionList, DescriptionListItem, DescriptionTerm, DescriptionDetai
 export { default as Stepper, Step } from './components/Stepper';
 export { default as Panel } from './components/Panel';
 export { default as ProgressBar } from './components/ProgressBar';
+export { Address, AddressLine, AddressCityStateZip } from './components/Address';
 /**
  * Helpers / Utils
  */

package/lib/index.js

@@ -162,6 +162,7 @@ var iconTypes = [
     'kabob',
     'list',
     'lock',
+    'magnifying-glass',
     'menu',
     'new-releases',
     'new',
@@ -192,8 +193,8 @@ 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/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'); });
@@ -203,8 +204,8 @@ 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/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'); });
@@ -224,6 +225,7 @@ function __variableDynamicImportRuntime0__(path) {
      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/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'); });
@@ -244,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));
    }
@@ -1148,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 */
@@ -1465,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];
@@ -1586,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'
@@ -1615,21 +1617,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,
@@ -2160,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';
@@ -2247,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';
@@ -2294,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
@@ -2350,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,
@@ -2362,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';
 
@@ -2473,7 +2502,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;
@@ -8022,8 +8051,9 @@ Tab.propTypes = {
 };
 
 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 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;
@@ -8088,10 +8118,13 @@ 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
-        }) },
+        }), ref: tabsRef },
         React__default.createElement("ul", tslib.__assign({ role: "tablist", className: "Tablist" }, labelProp, { onKeyDown: handleKeyDown }), tabComponents)));
 };
 Tabs.displayName = 'Tabs';
@@ -8160,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)))))));
@@ -8169,6 +8202,7 @@ Step.displayName = 'Step';
 Step.propTypes = {
     children: PropTypes.node,
     tooltip: PropTypes.node,
+    tooltipText: PropTypes.string,
     className: PropTypes.string
 };
 var Stepper = function (_a) {
@@ -8203,6 +8237,38 @@ var ProgressBar = React.forwardRef(function (_a, ref) {
 });
 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
@@ -8271,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;

package/lib/magnifying-glass-2907fb77.js

@@ -0,0 +1,23 @@
+'use strict';
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var React = require('react');
+var React__default = _interopDefault(React);
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var _ref = /*#__PURE__*/React.createElement("path", {
+  d: "M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z",
+  fill: "currentColor"
+});
+
+function SvgMagnifyingGlass(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 24 24",
+    width: 19,
+    height: 19
+  }, props), _ref);
+}
+
+exports.default = SvgMagnifyingGlass;

package/lib/{triangle-51d7723a.js → triangle-42e0eece.js}

@@ -9,18 +9,16 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 var _ref = /*#__PURE__*/React.createElement("path", {
   d: "M7 10l5 5 5-5z",
-  vectorEffect: "non-scaling-stroke",
-  fill: "currentColor"
+  fill: "currentColor",
+  vectorEffect: "non-scaling-stroke"
 });
 
 function SvgTriangle(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     overflow: "visible",
     preserveAspectRatio: "none",
-    viewBox: "0 0 24 24",
-    width: 32,
-    height: 32,
-    transform: "rotate(270)"
+    width: 24,
+    height: 24
   }, props), _ref);
 }
 

package/lib/types.d.ts

@@ -0,0 +1,7 @@
+export declare namespace Cauldron {
+    type LabelProps = {
+        'aria-label': string;
+    } | {
+        'aria-labelledby': string;
+    };
+}

package/lib/utils/polymorphic-type/index.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Based on @radix-ui/polymorphic:
+ * https://github.com/radix-ui/primitives/blob/main/packages/react/polymorphic/src/polymorphic.ts
+ */
+import * as React from 'react';
+declare type Merge<P1 = {}, P2 = {}> = Omit<P1, keyof P2> & P2;
+/**
+ * Infers the OwnProps if E is a ForwardRefExoticComponentWithAs
+ */
+declare type OwnProps<E> = E extends ForwardRefComponent<any, infer P> ? P : {};
+/**
+ * Infers the JSX.IntrinsicElement if E is a ForwardRefExoticComponentWithAs
+ */
+declare type IntrinsicElement<E> = E extends ForwardRefComponent<infer I, any> ? I : never;
+declare type ForwardRefExoticComponent<E, OwnProps> = React.ForwardRefExoticComponent<Merge<E extends React.ElementType ? React.ComponentPropsWithRef<E> : never, OwnProps & {
+    as?: E;
+}>>;
+interface ForwardRefComponent<IntrinsicElementString, OwnProps = {}
+/**
+ * Extends original type to ensure built in React types play nice
+ * with polymorphic components still e.g. `React.ElementRef` etc.
+ */
+> extends ForwardRefExoticComponent<IntrinsicElementString, OwnProps> {
+    /**
+     * When `as` prop is passed, use this overload.
+     * Merges original own props (without DOM props) and the inferred props
+     * from `as` element with the own props taking precendence.
+     *
+     * We explicitly avoid `React.ElementType` and manually narrow the prop types
+     * so that events are typed when using JSX.IntrinsicElements.
+     */
+    <As = IntrinsicElementString>(props: As extends '' ? {
+        as: keyof JSX.IntrinsicElements;
+    } : As extends React.ComponentType<infer P> ? Merge<P, OwnProps & {
+        as: As;
+    }> : As extends keyof JSX.IntrinsicElements ? Merge<JSX.IntrinsicElements[As], OwnProps & {
+        as: As;
+    }> : never): React.ReactElement | null;
+}
+export { ForwardRefComponent, OwnProps, IntrinsicElement, Merge };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "3.0.0",
+  "version": "3.0.1-canary.0298c7b0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "publishConfig": {
     "access": "public"
@@ -124,4 +124,4 @@
       "\\.svg$": "<rootDir>/__tests__/svgMock.js"
     }
   }
-}
+}