@deque/cauldron-react 4.6.0 → 4.7.0-canary.942ce561

package/lib/clipboard.js

@@ -0,0 +1,24 @@
+'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);
+
+var _path;
+
+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); }
+
+const SvgClipboard = props => /*#__PURE__*/React.createElement("svg", _extends({
+  overflow: "visible",
+  preserveAspectRatio: "none",
+  viewBox: "0 0 24 24",
+  height: 24,
+  width: 24
+}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  d: "M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z",
+  fill: "currentColor",
+  vectorEffect: "non-scaling-stroke"
+})));
+
+exports.default = SvgClipboard;

package/lib/components/Accordion/Accordion.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { ExpandCollapsePanelProps } from '../ExpandCollapsePanel';
 import PropTypes from 'prop-types';
 export interface AccordionTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {
-    children: React.ReactElement;
+    children: React.ReactNode;
     heading?: React.ReactElement | {
         level: string | undefined;
     };
@@ -12,7 +12,9 @@ declare const AccordionTrigger: {
     displayName: string;
     propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        heading: PropTypes.Requireable<string | undefined>;
+        heading: PropTypes.Requireable<PropTypes.InferProps<{
+            level: PropTypes.Requireable<number>;
+        }>>;
     };
 };
 interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -31,7 +33,7 @@ interface AccordionProps extends ExpandCollapsePanelProps {
     children: React.ReactNode;
 }
 declare const Accordion: {
-    ({ children }: AccordionProps): JSX.Element | null;
+    ({ children, open, onToggle, animationTiming, ...props }: AccordionProps): JSX.Element | null;
     displayName: string;
     propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;

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

@@ -4,7 +4,7 @@ export interface ExpandCollapsePanelProps extends React.HTMLAttributes<HTMLDivEl
     open?: boolean;
     children: React.ReactNode;
     animationTiming?: number | boolean;
-    onToggle: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onToggle?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 interface ExpandCollapsePanelState {
     controlled: boolean;

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

@@ -21,7 +21,9 @@ declare const _default: React.MemoExoticComponent<{
         open: PropTypes.Requireable<boolean>;
         iconExpanded: PropTypes.Requireable<string>;
         iconCollapsed: PropTypes.Requireable<string>;
-        heading: PropTypes.Requireable<number>;
+        heading: PropTypes.Requireable<PropTypes.InferProps<{
+            level: PropTypes.Requireable<number>;
+        }>>;
     };
     displayName: string;
 }>;

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' | 'dropper' | 'exchange' | 'external-link' | 'eye' | 'filter-solid' | 'filter' | 'flag' | 'gears' | 'grid' | 'hamburger-menu' | 'highlight' | 'info-circle-alt' | 'info-circle' | 'info-square' | 'kabob' | 'list' | 'lock' | 'magnifying-glass' | 'menu' | 'minus' | 'new-releases' | 'new' | 'no' | 'pencil' | 'play' | 'plus' | 'question-circle' | 'radio-checked' | 'radio-unchecked' | 'recycle-square' | 'recycle' | 'resend' | 'robot' | 'run-again' | 'save' | 'share' | 'sort-triangle' | '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' | 'clipboard' | 'close' | 'code' | 'copy' | 'download' | 'dropper' | 'exchange' | 'export-solid' | 'external-link' | 'eye' | 'filter-solid' | 'filter' | 'flag' | 'gears' | 'grid' | 'hamburger-menu' | 'highlight' | 'info-circle-alt' | 'info-circle' | 'info-square' | 'kabob' | 'list' | 'lock' | 'magnifying-glass' | 'menu' | 'minus' | 'new-releases' | 'new' | 'no' | 'pencil' | 'play' | 'plus' | 'question-circle-alt' | 'question-circle' | 'radio-checked' | 'radio-unchecked' | 'recycle-square' | 'recycle' | 'resend' | 'robot' | 'run-again' | 'save' | 'share' | 'sort-triangle' | '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/Pagination/Pagination.d.ts

@@ -9,11 +9,12 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
     previousPageLabel?: string;
     nextPageLabel?: string;
     lastPageLabel?: string;
-    onNextPageClick?: () => void;
-    onPreviousPageClick?: () => void;
-    onFirstPageClick?: () => void;
-    onLastPageClick?: () => void;
+    onNextPageClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onPreviousPageClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onFirstPageClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onLastPageClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     tooltipPlacement?: Placement;
+    thin?: boolean;
     className?: string;
 }
 declare const Pagination: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;

package/lib/components/Pagination/usePagination.d.ts

@@ -16,6 +16,7 @@ interface PageStatus {
     currentPage: number;
     pageStart: number;
     pageEnd: number;
+    setCurrentPage: (page: number) => void;
 }
 export declare const usePagination: ({ totalItems, initialPageSize, initialPage }: Options) => {
     pagination: PaginationResults;

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

@@ -8,6 +8,7 @@ export interface ToastProps {
     toastRef: React.Ref<HTMLDivElement>;
     focus?: boolean;
     show?: boolean;
+    dismissible?: boolean;
     children: React.ReactNode;
 }
 interface ToastState {
@@ -24,6 +25,7 @@ export default class Toast extends React.Component<ToastProps, ToastState> {
         toastRef: () => void;
         focus: boolean;
         show: boolean;
+        dismissible: boolean;
     };
     static propTypes: {
         children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
@@ -35,6 +37,7 @@ export default class Toast extends React.Component<ToastProps, ToastState> {
         }>>;
         focus: PropTypes.Requireable<boolean>;
         show: PropTypes.Requireable<boolean>;
+        dismissible: PropTypes.Requireable<boolean>;
     };
     static displayName: string;
     private el;

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

@@ -5,6 +5,7 @@ interface TwoColumnPanelProps extends React.HTMLAttributes<HTMLDivElement> {
     showCollapsedPanelLabel?: string;
     hideCollapsedPanelLabel?: string;
     skipLink?: SkipLink;
+    collapsedMediaQuery?: string;
 }
 declare const TwoColumnPanel: React.ForwardRefExoticComponent<TwoColumnPanelProps & React.RefAttributes<HTMLDivElement>>;
 export default TwoColumnPanel;

package/lib/export-solid.js

@@ -0,0 +1,24 @@
+'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);
+
+var _path;
+
+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); }
+
+const SvgExportSolid = props => /*#__PURE__*/React.createElement("svg", _extends({
+  overflow: "visible",
+  preserveAspectRatio: "none",
+  viewBox: "0 0 24 24",
+  height: 24,
+  width: 24
+}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  d: "M16.47 18.47c-.26.25-.67.24-.92-.02a.649.649 0 0 1 .02-.92.649.649 0 0 1 1.1.47c0 .18-.08.35-.2.47zm2.66 0c-.26.25-.67.24-.92-.02a.649.649 0 0 1 .02-.92.649.649 0 0 1 1.1.47c0 .18-.07.35-.2.47zm1.54-2.8c0-.55-.45-1-1-1h-4.84l-1.42 1.42c-.78.78-2.05.78-2.83 0l-1.4-1.42H4.34c-.55 0-1 .45-1 1V19c0 .55.45 1 1 1h15.32c.55 0 1-.45 1-1v-3.34l.01.01zm-4-6.33H14V4.67a.692.692 0 0 0-.68-.67h-2.66a.69.69 0 0 0-.67.67v4.66H7.34a.628.628 0 0 0-.62.41c-.13.25-.06.55.15.73l4.66 4.66c.25.26.66.27.92.02l.02-.02 4.66-4.66c.21-.18.28-.48.15-.73a.62.62 0 0 0-.63-.41l.02.01z",
+  fill: "currentColor",
+  vectorEffect: "non-scaling-stroke"
+})));
+
+exports.default = SvgExportSolid;

package/lib/index.js

@@ -143,12 +143,14 @@ var iconTypes = [
     'chevron-down',
     'chevron-left',
     'chevron-right',
+    'clipboard',
     'close',
     'code',
     'copy',
     'download',
     'dropper',
     'exchange',
+    'export-solid',
     'external-link',
     'eye',
     'filter-solid',
@@ -173,6 +175,7 @@ var iconTypes = [
     'pencil',
     'play',
     'plus',
+    'question-circle-alt',
     'question-circle',
     'radio-checked',
     'radio-unchecked',
@@ -213,12 +216,14 @@ function __variableDynamicImportRuntime0__(path) {
     case './icons/checkbox-unchecked.svg': return Promise.resolve().then(function () { return require('./checkbox-unchecked.js'); });
     case './icons/chevron-double.svg': return Promise.resolve().then(function () { return require('./chevron-double.js'); });
     case './icons/chevron.svg': return Promise.resolve().then(function () { return require('./chevron.js'); });
+    case './icons/clipboard.svg': return Promise.resolve().then(function () { return require('./clipboard.js'); });
     case './icons/close.svg': return Promise.resolve().then(function () { return require('./close.js'); });
     case './icons/code.svg': return Promise.resolve().then(function () { return require('./code.js'); });
     case './icons/copy.svg': return Promise.resolve().then(function () { return require('./copy.js'); });
     case './icons/download.svg': return Promise.resolve().then(function () { return require('./download.js'); });
     case './icons/dropper.svg': return Promise.resolve().then(function () { return require('./dropper.js'); });
     case './icons/exchange.svg': return Promise.resolve().then(function () { return require('./exchange.js'); });
+    case './icons/export-solid.svg': return Promise.resolve().then(function () { return require('./export-solid.js'); });
     case './icons/external-link.svg': return Promise.resolve().then(function () { return require('./external-link.js'); });
     case './icons/eye.svg': return Promise.resolve().then(function () { return require('./eye.js'); });
     case './icons/filter-solid.svg': return Promise.resolve().then(function () { return require('./filter-solid.js'); });
@@ -243,6 +248,7 @@ function __variableDynamicImportRuntime0__(path) {
     case './icons/pencil.svg': return Promise.resolve().then(function () { return require('./pencil.js'); });
     case './icons/play.svg': return Promise.resolve().then(function () { return require('./play.js'); });
     case './icons/plus.svg': return Promise.resolve().then(function () { return require('./plus.js'); });
+    case './icons/question-circle-alt.svg': return Promise.resolve().then(function () { return require('./question-circle-alt.js'); });
     case './icons/question-circle.svg': return Promise.resolve().then(function () { return require('./question-circle.js'); });
     case './icons/radio-checked.svg': return Promise.resolve().then(function () { return require('./radio-checked.js'); });
     case './icons/radio-unchecked.svg': return Promise.resolve().then(function () { return require('./radio-unchecked.js'); });
@@ -330,7 +336,9 @@ PanelTrigger.propTypes = {
     open: PropTypes.bool,
     iconExpanded: PropTypes.string,
     iconCollapsed: PropTypes.string,
-    heading: PropTypes.number
+    heading: PropTypes.shape({
+        level: PropTypes.number
+    })
 };
 PanelTrigger.displayName = 'PanelTrigger';
 var PanelTrigger$1 = React__default.memo(PanelTrigger);
@@ -357,8 +365,8 @@ var ExpandCollapsePanel = /** @class */ (function (_super) {
         };
         _this.panel = React__default.createRef();
         _this.handleToggle = function (e) {
-            var onToggle = _this.props.onToggle;
-            var _a = _this.state, isOpen = _a.isOpen, controlled = _a.controlled;
+            var _a = _this.props.onToggle, onToggle = _a === void 0 ? function () { } : _a;
+            var _b = _this.state, isOpen = _b.isOpen, controlled = _b.controlled;
             onToggle(e);
             if (!controlled) {
                 _this.setState({ isOpen: !isOpen, isAnimating: true });
@@ -473,9 +481,12 @@ var AccordionContent = function (_a) {
     return (React__default.createElement("div", tslib.__assign({ className: classNames('Accordion__panel', className) }, otherProps), children));
 };
 var Accordion = function (_a) {
-    var children = _a.children;
+    var children = _a.children, open = _a.open, onToggle = _a.onToggle, animationTiming = _a.animationTiming, props = tslib.__rest(_a, ["children", "open", "onToggle", "animationTiming"]);
     var childrenArray = React__default.Children.toArray(children);
-    var trigger = childrenArray.find(function (child) { return child.type === AccordionTrigger; });
+    var trigger = childrenArray.find(function (child) {
+        return typeof child === 'string' ||
+            child.type === AccordionTrigger;
+    });
     var panelElement = childrenArray.find(function (child) {
         return typeof child === 'string' ||
             child.type === AccordionContent;
@@ -491,8 +502,8 @@ var Accordion = function (_a) {
     }
     var _b = trigger.props, triggerClassName = _b.className, triggerProps = tslib.__rest(_b, ["className"]);
     var elementId = nextId.useId();
-    return (React__default.createElement("div", { className: "Accordion" },
-        React__default.createElement(ExpandCollapsePanel, tslib.__assign({ id: panelElement.props.id || "".concat(elementId, "-panel") }, panelElement.props),
+    return (React__default.createElement("div", tslib.__assign({ className: "Accordion" }, props),
+        React__default.createElement(ExpandCollapsePanel, tslib.__assign({ id: panelElement.props.id || "".concat(elementId, "-panel"), open: open, onToggle: onToggle, animationTiming: animationTiming }, panelElement.props),
             React__default.createElement(PanelTrigger$1, tslib.__assign({ iconCollapsed: "triangle-right", iconExpanded: "triangle-down", className: classNames('Accordion__trigger', trigger.props.className), "aria-controls": panelElement.props.id || "".concat(elementId, "-panel"), heading: trigger.props.heading }, trigger.props), trigger),
             panelElement)));
 };
@@ -505,7 +516,9 @@ Accordion.propTypes = {
 };
 AccordionTrigger.propTypes = {
     children: PropTypes.node,
-    heading: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', undefined])
+    heading: PropTypes.shape({
+        level: PropTypes.number
+    })
 };
 AccordionContent.propTypes = {
     children: PropTypes.node.isRequired,
@@ -2326,7 +2339,7 @@ var Toast = /** @class */ (function (_super) {
         var _a = this.props, type = _a.type, children = _a.children, 
         // prevent `onDismiss` from being passed-through to DOM
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        onDismiss = _a.onDismiss, dismissText = _a.dismissText, toastRef = _a.toastRef, focus = _a.focus, show = _a.show, otherProps = tslib.__rest(_a, ["type", "children", "onDismiss", "dismissText", "toastRef", "focus", "show"]);
+        onDismiss = _a.onDismiss, dismissText = _a.dismissText, toastRef = _a.toastRef, focus = _a.focus, show = _a.show, dismissible = _a.dismissible, otherProps = tslib.__rest(_a, ["type", "children", "onDismiss", "dismissText", "toastRef", "focus", "show", "dismissible"]);
         var scrim = type === 'action-needed' && show ? (React__default.createElement("div", { className: "Scrim--light Scrim--show Scrim--fade-in" })) : null;
         var defaultProps = {
             tabIndex: -1,
@@ -2343,7 +2356,7 @@ var Toast = /** @class */ (function (_super) {
                 React__default.createElement("div", { className: "Toast__message" },
                     React__default.createElement(Icon, { type: typeMap[type].icon }),
                     React__default.createElement("div", { className: "Toast__message-content" }, children)),
-                type !== 'action-needed' && (React__default.createElement("button", { type: "button", className: 'Toast__dismiss', "aria-label": dismissText, onClick: this.dismissToast },
+                type !== 'action-needed' && dismissible && (React__default.createElement("button", { type: "button", className: 'Toast__dismiss', "aria-label": dismissText, onClick: this.dismissToast },
                     React__default.createElement(Icon, { type: "close" })))),
             scrim));
     };
@@ -2394,7 +2407,8 @@ var Toast = /** @class */ (function (_super) {
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         toastRef: function () { },
         focus: true,
-        show: false
+        show: false,
+        dismissible: true
     };
     Toast.propTypes = {
         // the ui to be added as the message of the toast
@@ -2413,7 +2427,9 @@ var Toast = /** @class */ (function (_super) {
         // whether or not to focus the toast
         focus: PropTypes.bool,
         // whether or not to show the toast
-        show: PropTypes.bool
+        show: PropTypes.bool,
+        // whether or not the toast is dismissible
+        dismissible: PropTypes.bool
     };
     Toast.displayName = 'Toast';
     return Toast;
@@ -8352,7 +8368,6 @@ var Tabs = function (_a) {
     var children = _a.children, thin = _a.thin, _b = _a.orientation, orientation = _b === void 0 ? 'horizontal' : _b, _c = _a.initialActiveIndex, initialActiveIndex = _c === void 0 ? 0 : _c, className = _a.className, onChange = _a.onChange, labelProp = tslib.__rest(_a, ["children", "thin", "orientation", "initialActiveIndex", "className", "onChange"]);
     var _d = tslib.__read(React.useState(initialActiveIndex), 2), activeIndex = _d[0], setActiveIndex = _d[1];
     var tabsRef = React.useRef(null);
-    var focusedTabRef = React.useRef(null);
     var tabs = React__default.Children.toArray(children).filter(function (child) { return child.type === Tab; });
     var tabCount = tabs.length;
     var handleClick = function (index) {
@@ -8425,14 +8440,15 @@ var Tabs = function (_a) {
         }, [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);
+                }), tabIndex: index === activeIndex ? 0 : -1 }, _a['aria-controls'] = (_b = target.current) === null || _b === void 0 ? void 0 : _b.id, _a['aria-selected'] = selected, _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();
+        var activeTab = (_a = tabsRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(':scope > [role="tablist"] > [aria-selected="true"]');
+        activeTab === null || activeTab === void 0 ? void 0 : activeTab.focus();
         if (typeof onChange === 'function') {
-            onChange({ activeTabIndex: activeIndex, target: focusedTabRef.current });
+            onChange({ activeTabIndex: activeIndex, target: activeTab });
         }
     }, [activeIndex]);
     return (React__default.createElement("div", { className: classNames('Tabs', className, {
@@ -8635,16 +8651,18 @@ AddressCityStateZip.propTypes = {
 };
 
 var Pagination = React__default.forwardRef(function (_a, ref) {
-    var totalItems = _a.totalItems, _b = _a.itemsPerPage, itemsPerPage = _b === void 0 ? 10 : _b, _c = _a.currentPage, currentPage = _c === void 0 ? 1 : _c, statusLabel = _a.statusLabel, _d = _a.firstPageLabel, firstPageLabel = _d === void 0 ? 'First page' : _d, _e = _a.previousPageLabel, previousPageLabel = _e === void 0 ? 'Previous page' : _e, _f = _a.nextPageLabel, nextPageLabel = _f === void 0 ? 'Next page' : _f, _g = _a.lastPageLabel, lastPageLabel = _g === void 0 ? 'Last page' : _g, _h = _a.tooltipPlacement, tooltipPlacement = _h === void 0 ? 'bottom' : _h, onNextPageClick = _a.onNextPageClick, onPreviousPageClick = _a.onPreviousPageClick, onFirstPageClick = _a.onFirstPageClick, onLastPageClick = _a.onLastPageClick, className = _a.className, other = tslib.__rest(_a, ["totalItems", "itemsPerPage", "currentPage", "statusLabel", "firstPageLabel", "previousPageLabel", "nextPageLabel", "lastPageLabel", "tooltipPlacement", "onNextPageClick", "onPreviousPageClick", "onFirstPageClick", "onLastPageClick", "className"]);
+    var totalItems = _a.totalItems, _b = _a.itemsPerPage, itemsPerPage = _b === void 0 ? 10 : _b, _c = _a.currentPage, currentPage = _c === void 0 ? 1 : _c, statusLabel = _a.statusLabel, _d = _a.firstPageLabel, firstPageLabel = _d === void 0 ? 'First page' : _d, _e = _a.previousPageLabel, previousPageLabel = _e === void 0 ? 'Previous page' : _e, _f = _a.nextPageLabel, nextPageLabel = _f === void 0 ? 'Next page' : _f, _g = _a.lastPageLabel, lastPageLabel = _g === void 0 ? 'Last page' : _g, _h = _a.tooltipPlacement, tooltipPlacement = _h === void 0 ? 'bottom' : _h, onNextPageClick = _a.onNextPageClick, onPreviousPageClick = _a.onPreviousPageClick, onFirstPageClick = _a.onFirstPageClick, onLastPageClick = _a.onLastPageClick, className = _a.className, _j = _a.thin, thin = _j === void 0 ? false : _j, other = tslib.__rest(_a, ["totalItems", "itemsPerPage", "currentPage", "statusLabel", "firstPageLabel", "previousPageLabel", "nextPageLabel", "lastPageLabel", "tooltipPlacement", "onNextPageClick", "onPreviousPageClick", "onFirstPageClick", "onLastPageClick", "className", "thin"]);
     var itemStart = currentPage * itemsPerPage - itemsPerPage + 1;
     var itemEnd = Math.min(itemStart + itemsPerPage - 1, totalItems);
     var isLastPage = itemEnd === totalItems;
     var isFirstPage = currentPage === 1;
-    return (React__default.createElement("div", tslib.__assign({ ref: ref, className: classNames('Pagination', className) }, other),
+    return (React__default.createElement("div", tslib.__assign({ ref: ref, className: classNames('Pagination', className, {
+            'Pagination--thin': thin
+        }) }, other),
         React__default.createElement("ul", null,
-            React__default.createElement("li", null, isFirstPage ? (React__default.createElement(TooltipTabstop, { hideElementOnHidden: true, association: "aria-labelledby", tooltip: firstPageLabel, placement: tooltipPlacement },
+            React__default.createElement("li", null, isFirstPage ? (React__default.createElement(TooltipTabstop, { className: "IconButton", hideElementOnHidden: true, association: "aria-labelledby", tooltip: firstPageLabel, placement: tooltipPlacement },
                 React__default.createElement(Icon, { type: "chevron-double-left" }))) : (React__default.createElement(IconButton, { icon: "chevron-double-left", tooltipPlacement: tooltipPlacement, label: firstPageLabel, onClick: onFirstPageClick }))),
-            React__default.createElement("li", null, isFirstPage ? (React__default.createElement(TooltipTabstop, { hideElementOnHidden: true, association: "aria-labelledby", tooltip: previousPageLabel, placement: tooltipPlacement },
+            React__default.createElement("li", null, isFirstPage ? (React__default.createElement(TooltipTabstop, { className: "IconButton", hideElementOnHidden: true, association: "aria-labelledby", tooltip: previousPageLabel, placement: tooltipPlacement },
                 React__default.createElement(Icon, { type: "chevron-left" }))) : (React__default.createElement(IconButton, { icon: "chevron-left", tooltipPlacement: tooltipPlacement, label: previousPageLabel, onClick: onPreviousPageClick }))),
             React__default.createElement("li", null,
                 React__default.createElement("span", { role: "log", "aria-atomic": "true" }, statusLabel || (React__default.createElement("span", null,
@@ -8655,9 +8673,9 @@ var Pagination = React__default.forwardRef(function (_a, ref) {
                     React__default.createElement("strong", null, itemEnd),
                     " of ",
                     React__default.createElement("strong", null, totalItems))))),
-            React__default.createElement("li", null, isLastPage ? (React__default.createElement(TooltipTabstop, { hideElementOnHidden: true, association: "aria-labelledby", tooltip: nextPageLabel, placement: tooltipPlacement },
+            React__default.createElement("li", null, isLastPage ? (React__default.createElement(TooltipTabstop, { className: "IconButton", hideElementOnHidden: true, association: "aria-labelledby", tooltip: nextPageLabel, placement: tooltipPlacement },
                 React__default.createElement(Icon, { type: "chevron-right" }))) : (React__default.createElement(IconButton, { icon: "chevron-right", tooltipPlacement: tooltipPlacement, label: nextPageLabel, onClick: onNextPageClick }))),
-            React__default.createElement("li", null, isLastPage ? (React__default.createElement(TooltipTabstop, { hideElementOnHidden: true, association: "aria-labelledby", tooltip: lastPageLabel, placement: tooltipPlacement },
+            React__default.createElement("li", null, isLastPage ? (React__default.createElement(TooltipTabstop, { className: "IconButton", hideElementOnHidden: true, association: "aria-labelledby", tooltip: lastPageLabel, placement: tooltipPlacement },
                 React__default.createElement(Icon, { type: "chevron-double-right" }))) : (React__default.createElement(IconButton, { icon: "chevron-double-right", tooltipPlacement: tooltipPlacement, label: lastPageLabel, onClick: onLastPageClick }))))));
 });
 Pagination.displayName = 'Pagination';
@@ -8702,7 +8720,8 @@ var usePagination = function (_a) {
     var pageStatus = {
         currentPage: currentPage,
         pageStart: pageStart,
-        pageEnd: pageEnd
+        pageEnd: pageEnd,
+        setCurrentPage: setCurrentPage
     };
     return { pagination: pagination, pageStatus: pageStatus };
 };
@@ -8762,10 +8781,10 @@ var ColumnRight = React.forwardRef(function (_a, ref) {
 ColumnRight.displayName = 'ColumnRight';
 
 var TwoColumnPanel = React.forwardRef(function (_a, ref) {
-    var className = _a.className, children = _a.children, _b = _a.initialCollapsed, initialCollapsed = _b === void 0 ? false : _b, _c = _a.showCollapsedPanelLabel, showCollapsedPanelLabel = _c === void 0 ? 'Show Panel' : _c, _d = _a.hideCollapsedPanelLabel, hideCollapsedPanelLabel = _d === void 0 ? 'Hide Panel' : _d, _e = _a.skipLink, skipLink = _e === void 0 ? null : _e, props = tslib.__rest(_a, ["className", "children", "initialCollapsed", "showCollapsedPanelLabel", "hideCollapsedPanelLabel", "skipLink"]);
-    var _f = tslib.__read(React.useState(initialCollapsed), 2), isCollapsed = _f[0], setCollapsed = _f[1];
-    var _g = tslib.__read(React.useState(false), 2), isFocusTrap = _g[0], setIsFocusTrap = _g[1];
-    var _h = tslib.__read(React.useState(!initialCollapsed), 2), showPanel = _h[0], setShowPanel = _h[1];
+    var className = _a.className, children = _a.children, _b = _a.initialCollapsed, initialCollapsed = _b === void 0 ? false : _b, _c = _a.showCollapsedPanelLabel, showCollapsedPanelLabel = _c === void 0 ? 'Show Panel' : _c, _d = _a.hideCollapsedPanelLabel, hideCollapsedPanelLabel = _d === void 0 ? 'Hide Panel' : _d, _e = _a.skipLink, skipLink = _e === void 0 ? null : _e, _f = _a.collapsedMediaQuery, collapsedMediaQuery = _f === void 0 ? '(max-width: 45rem)' : _f, props = tslib.__rest(_a, ["className", "children", "initialCollapsed", "showCollapsedPanelLabel", "hideCollapsedPanelLabel", "skipLink", "collapsedMediaQuery"]);
+    var _g = tslib.__read(React.useState(initialCollapsed), 2), isCollapsed = _g[0], setCollapsed = _g[1];
+    var _h = tslib.__read(React.useState(false), 2), isFocusTrap = _h[0], setIsFocusTrap = _h[1];
+    var _j = tslib.__read(React.useState(!initialCollapsed), 2), showPanel = _j[0], setShowPanel = _j[1];
     var toggleButtonRef = React.useRef(null);
     var closeButtonRef = React.useRef(null);
     var columnLeftRef = React.useRef(null);
@@ -8839,7 +8858,7 @@ var TwoColumnPanel = React.forwardRef(function (_a, ref) {
     }, [columnLeftRef.current, isCollapsed]);
     // When the collapsable panel starts to overlay content, it needs to become a focus trap and collapsed by default
     React.useLayoutEffect(function () {
-        var mediaQueryList = matchMedia('(max-width: 45rem)');
+        var mediaQueryList = matchMedia(collapsedMediaQuery);
         var handleMatch = function (matches) {
             setIsFocusTrap(matches);
             var collapsed = matches ? true : isCollapsed;

package/lib/question-circle-alt.js

@@ -0,0 +1,24 @@
+'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);
+
+var _path;
+
+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); }
+
+const SvgQuestionCircleAlt = props => /*#__PURE__*/React.createElement("svg", _extends({
+  overflow: "visible",
+  preserveAspectRatio: "none",
+  viewBox: "0 0 24 24",
+  height: 24,
+  width: 24
+}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  d: "M13.07 14.93a.34.34 0 0 0-.24-.09h-1.66c-.18-.01-.32.13-.33.31v1.69c-.01.18.13.32.31.33h1.69c.18.01.32-.13.33-.31v-1.69a.31.31 0 0 0-.1-.24zM15.83 10c-.01-.88-.43-1.71-1.14-2.23-.69-.59-1.57-.92-2.48-.93-1.48-.05-2.88.72-3.63 2-.05.07-.07.16-.05.24.01.08.05.16.12.21l1.12.85c.06.04.13.06.2.06.1 0 .2-.04.26-.12.24-.32.52-.61.83-.86.3-.2.65-.29 1-.28.36 0 .71.11 1 .31.27.15.44.43.45.74.01.2-.08.39-.23.51-.24.18-.5.33-.78.45l-.5.21c-.15.08-.29.17-.43.27-.16.1-.29.23-.41.37-.11.15-.19.32-.25.49-.07.22-.11.44-.11.67v.71c-.01.18.13.32.31.33h1.69c.18.01.32-.13.33-.31V13.33c0-.11.05-.22.12-.3.08-.1.17-.18.27-.25l.48-.29c.27-.15.47-.27.62-.37.19-.14.37-.29.54-.46.21-.2.37-.45.47-.72.12-.3.19-.62.2-.94zm-1.24-4.13a6.57 6.57 0 0 1 3.55 3.55 6.54 6.54 0 0 1 0 5.17 6.57 6.57 0 0 1-3.55 3.55 6.54 6.54 0 0 1-5.17 0 6.57 6.57 0 0 1-3.55-3.55 6.54 6.54 0 0 1 0-5.17c.66-1.6 1.94-2.88 3.54-3.55 1.65-.71 3.53-.71 5.18 0zM18.92 8A8.016 8.016 0 0 0 16 5.08 7.798 7.798 0 0 0 12 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 0 0 4 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 0 0 20 12c.01-1.41-.37-2.79-1.08-4z",
+  fill: "currentColor",
+  vectorEffect: "non-scaling-stroke"
+})));
+
+exports.default = SvgQuestionCircleAlt;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "4.6.0",
+  "version": "4.7.0-canary.942ce561",
   "description": "Fully accessible react components library for Deque Cauldron",
   "publishConfig": {
     "access": "public"
@@ -80,7 +80,7 @@
     "react-router-dom": "^5.1.2",
     "rollup": "^2.23.0",
     "sinon": "^10.0.0",
-    "ts-node": "^10.8.1",
+    "ts-node": "^10.9.1",
     "typescript": "^4.7.3"
   },
   "repository": {
@@ -125,4 +125,4 @@
       "\\.svg$": "<rootDir>/__tests__/svgMock.js"
     }
   }
-}
+}