@deque/cauldron-react 2.0.0-canary.d1e71e02 → 2.0.0-canary.e2891e89

package/lib/components/Card/Card.d.ts

@@ -1,12 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: 'simple';
 }
 declare const Card: {
-    ({ className, ...other }: CardProps): JSX.Element;
+    ({ className, variant, ...other }: CardProps): JSX.Element;
     displayName: string;
     propTypes: {
         className: PropTypes.Requireable<string>;
+        variant: PropTypes.Requireable<string>;
     };
 };
 export default Card;

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

@@ -1,7 +1,9 @@
 import React from 'react';
+import { IconType, iconTypes } from './types';
+export { IconType, iconTypes };
 export interface IconProps extends React.HTMLAttributes<HTMLDivElement> {
     label?: string;
-    type: string;
+    type: IconType;
 }
 declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLDivElement>>;
 export default Icon;

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

@@ -0,0 +1,7 @@
+/*!
+ * 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' | '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';
+/** iconTypes holds each valid icon type. */
+export declare const iconTypes: string[];

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

@@ -1,7 +1,8 @@
 import React from 'react';
+import { IconType } from '../Icon';
 import { TooltipProps } from '../Tooltip';
 export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    icon: string;
+    icon: IconType;
     label: string;
     tooltipPlacement?: TooltipProps['placement'];
     tooltipVariant?: TooltipProps['variant'];

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

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

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

@@ -0,0 +1,8 @@
+import React from 'react';
+interface TabProps extends React.HTMLAttributes<HTMLLIElement> {
+    target: React.RefObject<HTMLDivElement> | HTMLElement;
+    id?: string;
+    children?: React.ReactNode;
+}
+declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLLIElement>>;
+export default Tab;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    id?: string;
+    children?: React.ReactNode;
+    className?: string;
+}
+declare const TabPanel: React.ForwardRefExoticComponent<TabPanelProps & React.RefAttributes<HTMLDivElement>>;
+export default TabPanel;

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+declare type LabelProps = {
+    'aria-label': string;
+} | {
+    'aria-labelledby': string;
+};
+declare type TabsProps = {
+    children: React.ReactNode;
+    initialActiveIndex?: number;
+    thin?: boolean;
+    className?: string;
+} & LabelProps;
+declare const Tabs: {
+    ({ children, thin, initialActiveIndex, className, ...labelProp }: TabsProps): JSX.Element;
+    displayName: string;
+    propTypes: {
+        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        'aria-label': PropTypes.Requireable<string>;
+        'aria-labelledby': PropTypes.Requireable<string>;
+        initialActiveIndex: PropTypes.Requireable<number>;
+        thin: PropTypes.Requireable<boolean>;
+        className: PropTypes.Requireable<string>;
+    };
+};
+export default Tabs;

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

@@ -0,0 +1,3 @@
+export { default } from './Tabs';
+export { default as Tab } from './Tab';
+export { default as TabPanel } from './TabPanel';

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

@@ -42,7 +42,6 @@ export default class TextField extends React.Component<TextFieldProps, TextField
     private errorId;
     private input;
     constructor(props: TextFieldProps);
-    componentDidUpdate(prevProps: TextFieldProps): void;
     render(): JSX.Element;
     onChange(e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void;
 }

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

@@ -1,26 +1,13 @@
+import { IconType } from '../Icon';
+interface TypeMap {
+    [name: string]: {
+        className: string;
+        icon: IconType;
+    };
+}
 /**
  * Maps toast types to their classNames and icons
  */
-export declare const typeMap: {
-    confirmation: {
-        className: string;
-        icon: string;
-    };
-    caution: {
-        className: string;
-        icon: string;
-    };
-    'action-needed': {
-        className: string;
-        icon: string;
-    };
-    error: {
-        className: string;
-        icon: string;
-    };
-    info: {
-        className: string;
-        icon: string;
-    };
-};
+export declare const typeMap: TypeMap;
 export declare const tabIndexHandler: (reset: boolean, toast: HTMLElement | null) => any;
+export {};

package/lib/index.d.ts

@@ -4,7 +4,7 @@
 export { default as Workspace } from './components/Workspace';
 export { default as Main } from './components/Main';
 export { default as Layout } from './components/Layout';
-export { default as Icon } from './components/Icon';
+export { default as Icon, IconType, iconTypes } from './components/Icon';
 export { default as Offscreen } from './components/Offscreen';
 export { default as Scrim } from './components/Scrim';
 export { default as MenuItem } from './components/MenuItem';
@@ -37,6 +37,7 @@ export { default as LoaderOverlay } from './components/LoaderOverlay';
 export { default as Line } from './components/Line';
 export { default as Tag, TagLabel } from './components/Tag';
 export { default as Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './components/Table';
+export { default as Tabs, Tab, TabPanel } from './components/Tabs';
 export { DescriptionList, DescriptionListItem, DescriptionTerm, DescriptionDetails } from './components/DescriptionList';
 export { default as Stepper, Step } from './components/Stepper';
 export { default as Panel } from './components/Panel';
@@ -45,6 +46,7 @@ export { default as Panel } from './components/Panel';
  */
 export { default as AriaIsolate } from './utils/aria-isolate';
 export { default as focusableSelector } from './utils/focusable-selector';
+export { default as useDidUpdate } from './utils/use-did-update';
 /**
  * Contexts
  */

package/lib/index.js

@@ -112,6 +112,82 @@ 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',
+    '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'
+];
+
 function __variableDynamicImportRuntime0__(path) {
    switch (path) {
      case './icons/add-user.svg': return Promise.resolve().then(function () { return require('./add-user-075c63a1.js'); });
@@ -142,10 +218,11 @@ 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/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 +231,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'); });
@@ -205,6 +284,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';
@@ -1485,14 +1565,15 @@ var IconButton = React.forwardRef(function (_a, ref) {
         !disabled && (React__default.createElement(Tooltip, { target: buttonRef, placement: tooltipPlacement, variant: tooltipVariant, portal: tooltipPortal, association: "aria-labelledby", hideElementOnHidden: true }, label))));
 });
 IconButton.propTypes = {
+    // @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';
@@ -2242,12 +2323,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 +2376,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,7 +2406,7 @@ 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)),
@@ -2383,7 +2459,7 @@ function PanelTrigger(_a) {
     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: "chevron-" + (open ? 'down' : 'right') })));
+        React__default.createElement(Icon, { type: open ? 'chevron-down' : 'chevron-right' })));
 }
 PanelTrigger.propTypes = {
     children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
@@ -7871,6 +7947,112 @@ 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, labelProp = tslib.__rest(_a, ["children", "thin", "initialActiveIndex", "className"]);
+    var _c = React.useState(initialActiveIndex), activeIndex = _c[0], setActiveIndex = _c[1];
+    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();
+    }, [activeIndex]);
+    return (React__default.createElement("div", { className: classNames('Tabs', className, {
+            'Tabs--thin': thin
+        }) },
+        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
@@ -7950,6 +8132,25 @@ Panel.propTypes = {
     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({});
@@ -8050,12 +8251,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;
@@ -8072,4 +8276,6 @@ exports.TopBarMenu = TopBarMenu;
 exports.TopBarTrigger = TopBarTrigger;
 exports.Workspace = Workspace;
 exports.focusableSelector = focusableSelector;
+exports.iconTypes = iconTypes;
+exports.useDidUpdate = useDidUpdate;
 exports.useThemeContext = useThemeContext;

package/lib/info-square-f193e281.js

@@ -0,0 +1,25 @@
+'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: "M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 9h-2V5h2v6zm0 4h-2v-2h2v2z",
+  vectorEffect: "non-scaling-stroke",
+  fill: "currentColor"
+});
+
+function SvgInfoSquare(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    overflow: "visible",
+    preserveAspectRatio: "none",
+    width: 24,
+    height: 24
+  }, props), _ref);
+}
+
+exports.default = SvgInfoSquare;

package/lib/{menu-2bb052ac.js → menu-2f2be7c2.js}

@@ -7,24 +7,7 @@ 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("defs", null, /*#__PURE__*/React.createElement("path", {
-  d: "M0 0h24v24H0V0z",
-  id: "menu_svg__a",
-  vectorEffect: "non-scaling-stroke",
-  fill: "currentColor"
-}));
-
-var _ref2 = /*#__PURE__*/React.createElement("clipPath", {
-  xmlnsXlink: "http://www.w3.org/1999/xlink",
-  id: "menu_svg__b",
-  vectorEffect: "non-scaling-stroke"
-}, /*#__PURE__*/React.createElement("use", {
-  xlinkHref: "#menu_svg__a",
-  vectorEffect: "non-scaling-stroke"
-}));
-
-var _ref3 = /*#__PURE__*/React.createElement("path", {
-  clipPath: "url(#menu_svg__b)",
+var _ref = /*#__PURE__*/React.createElement("path", {
   d: "M20 9H4v2h16V9zM4 15h16v-2H4v2z",
   vectorEffect: "non-scaling-stroke",
   fill: "currentColor"
@@ -37,7 +20,7 @@ function SvgMenu(props) {
     viewBox: "0 0 24 24",
     width: 19,
     height: 19
-  }, props), _ref, _ref2, _ref3);
+  }, props), _ref);
 }
 
 exports.default = SvgMenu;

package/lib/recycle-0198fb67.js

@@ -0,0 +1,25 @@
+'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: "M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8A5.87 5.87 0 016 12c0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z",
+  vectorEffect: "non-scaling-stroke",
+  fill: "currentColor"
+});
+
+function SvgRecycle(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    overflow: "visible",
+    preserveAspectRatio: "none",
+    width: 24,
+    height: 24
+  }, props), _ref);
+}
+
+exports.default = SvgRecycle;

package/lib/robot-22863b2b.js

@@ -0,0 +1,29 @@
+'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("circle", {
+  cx: 14.5,
+  cy: 14.5,
+  r: 13.5,
+  fill: "currentColor"
+});
+
+var _ref2 = /*#__PURE__*/React.createElement("path", {
+  d: "M6.23 12.58h.92v5.51h-.92a.91.91 0 01-.92-.91V13.5a.92.92 0 01.92-.92zm14.7-1.38V19a1.84 1.84 0 01-1.84 1.84H9.91A1.84 1.84 0 018.07 19v-7.8a2.29 2.29 0 012.29-2.29h3.22V7.07a.92.92 0 011.84 0v1.84h3.22a2.29 2.29 0 012.29 2.29zm-8 2.3a1.15 1.15 0 10-1.15 1.15 1.15 1.15 0 001.15-1.15zm-.23 3.68h-1.88v.91h1.84zm2.76 0h-1.88v.91h1.84zm3-3.68a1.15 1.15 0 10-1.15 1.15 1.16 1.16 0 001.15-1.15zm-.23 3.68h-1.89v.91h1.84zm5.51-3.68v3.68a.92.92 0 01-.92.91h-.92v-5.51h.92a.92.92 0 01.92.92z",
+  fill: "currentColor"
+});
+
+function SvgRobot(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 29,
+    height: 29
+  }, props), _ref, _ref2);
+}
+
+exports.default = SvgRobot;

package/lib/utils/use-did-update/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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
+ */
+declare const useDidUpdate: (effect: () => void, dependencies: unknown[]) => void;
+export default useDidUpdate;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "2.0.0-canary.d1e71e02",
+  "version": "2.0.0-canary.e2891e89",
   "description": "Fully accessible react components library for Deque Cauldron",
   "publishConfig": {
     "access": "public"
@@ -13,6 +13,7 @@
   ],
   "scripts": {
     "build": "yarn build:lib && yarn build:css",
+    "prebuild:lib": "node scripts/buildIconTypes.js",
     "build:lib": "rollup -c && tsc --declaration --emitDeclarationOnly --outDir lib",
     "build:css": "postcss --output=lib/cauldron.css src/index.css",
     "dev": "concurrently 'yarn build:css --watch' 'rollup -c --watch'",