@auth0/quantum-product 1.6.8 → 1.8.0

package/alert/alert.js

@@ -216,6 +216,6 @@ exports.Alert = React.forwardRef(function (props, ref) {
             !!title && React.createElement(AlertTitle, { className: classes.title }, title),
             React.createElement(AlertMessage, { className: classes.message }, message || children)),
         hasAction && (React.createElement(AlertAction, { className: classes.action }, action ||
-            (showCloseButton && (React.createElement(icon_button_1.IconButton, { color: "inherit", size: "small", variant: "link", "aria-label": closeText, onClick: onClose },
+            (showCloseButton && (React.createElement(icon_button_1.IconButton, { label: "close button", color: "inherit", size: "small", variant: "link", "aria-label": closeText, onClick: onClose },
                 React.createElement(icon_1.XIcon, null))))))));
 });

package/copy-button/copy-button.d.ts

@@ -4,7 +4,10 @@ export declare type ICopyButtonProps = IIconButtonProps;
 export declare const CopyButton: React.ForwardRefExoticComponent<{
     variant?: "link" | "outlined" | "contained" | undefined;
     shape?: "default" | "circular" | undefined;
+    tooltipPlacement?: "left" | "right" | "bottom" | "top" | "bottom-end" | "bottom-start" | "left-end" | "left-start" | "right-end" | "right-start" | "top-end" | "top-start" | undefined;
+    onTooltipClose?: ((event: Event | React.SyntheticEvent<Element, Event>) => void) | undefined;
     href?: string | undefined;
+    label: string;
     target?: string | undefined;
 } & {
     children?: React.ReactNode;
@@ -31,4 +34,4 @@ export declare const CopyButton: React.ForwardRefExoticComponent<{
     tabIndex?: number | undefined;
     TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
     touchRippleRef?: React.Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
-}, "classes"> & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref" | "color" | "action" | "disabled" | "size" | "classes" | "children" | "sx" | "variant" | "tabIndex" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "href" | "edge" | "target" | "shape"> & React.RefAttributes<HTMLButtonElement>>;
+}, "classes"> & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "ref" | "color" | "action" | "disabled" | "size" | "classes" | "children" | "sx" | "variant" | "tabIndex" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "href" | "edge" | "target" | "shape" | "tooltipPlacement" | "onTooltipClose"> & React.RefAttributes<HTMLButtonElement>>;

package/copy-button/copy-button.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -33,17 +22,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -65,9 +43,8 @@ exports.CopyButton = void 0;
 var React = __importStar(require("react"));
 var icon_1 = require("../icon");
 var icon_button_1 = require("../icon-button");
-var tooltip_1 = require("../tooltip");
 exports.CopyButton = React.forwardRef(function (_a, ref) {
-    var onClick = _a.onClick, iconButtonProps = __rest(_a, ["onClick"]);
+    var onClick = _a.onClick;
     var _b = __read(React.useState(false), 2), pressed = _b[0], setPressed = _b[1];
     React.useEffect(function () {
         if (!pressed) {
@@ -87,7 +64,6 @@ exports.CopyButton = React.forwardRef(function (_a, ref) {
     var handleClose = function () { return setPressed(false); };
     // use title as the key to force a mount/unmount of the tooltip. This drives the feedback transition.
     var title = pressed ? 'Copied!' : 'Copy';
-    return (React.createElement(tooltip_1.Tooltip, { key: title, title: title, placement: "top", onClose: handleClose },
-        React.createElement(icon_button_1.IconButton, __assign({ ref: ref, onClick: handleClick }, iconButtonProps),
-            React.createElement(icon_1.CopyIcon, null))));
+    return (React.createElement(icon_button_1.IconButton, { key: title, label: title, onTooltipClose: handleClose, ref: ref, tooltipPlacement: "top", onClick: handleClick },
+        React.createElement(icon_1.CopyIcon, null)));
 });

package/data-table/data-table-row.js

@@ -106,7 +106,7 @@ function DataTableRow(props) {
                 }
                 return hideHeader ? (React.createElement(table_1.TableCell, { width: column.width, key: colIndex, align: column.align, padding: column.padding }, content)) : (React.createElement(table_1.TableCell, { key: colIndex, align: column.align, padding: column.padding }, content));
             }),
-            !!renderItemDetails && (React.createElement(table_1.TableCell, { padding: "checkbox", align: "right" }, !!detailsContent && (React.createElement(icon_button_1.IconButton, { onClick: function () { return setIsExpanded(!isExpanded); }, variant: "link" }, isExpanded ? React.createElement(icon_1.ChevronUpIcon, null) : React.createElement(icon_1.ChevronDownIcon, null)))))),
+            !!renderItemDetails && (React.createElement(table_1.TableCell, { padding: "checkbox", align: "right" }, !!detailsContent && (React.createElement(icon_button_1.IconButton, { onClick: function () { return setIsExpanded(!isExpanded); }, variant: "link", label: isExpanded ? 'Chevron up button' : 'chevron down button' }, isExpanded ? React.createElement(icon_1.ChevronUpIcon, null) : React.createElement(icon_1.ChevronDownIcon, null)))))),
         !!detailsContent && (React.createElement(Row, { ownerState: { expanded: true } },
             React.createElement(table_1.TableCell, { padding: "none", colSpan: columns.length + 1 },
                 React.createElement(collapse_1.Collapse, { in: isExpanded, timeout: "auto", unmountOnExit: true },

package/description-block/description-block.js

@@ -93,5 +93,5 @@ exports.DescriptionBlock = React.forwardRef(function (props, ref) {
             !!label && inlinelayout && ':')),
         React.createElement(Content, null,
             code ? (React.createElement(code_1.Code, __assign({ title: typeof description === 'string' ? description : undefined, sx: { maxWidth: 300 }, variant: "code2", noWrap: true }, descriptionTypographyProps), description)) : (React.createElement(text_1.Text, __assign({ component: "span", variant: "body2" }, descriptionTypographyProps), description)),
-            !!onCopy && React.createElement(CopyAction, { size: "small", onClick: onCopy }))));
+            !!onCopy && React.createElement(CopyAction, { label: "copy", size: "small", onClick: onCopy }))));
 });

package/dialog/dialog-title/dialog-title.js

@@ -72,6 +72,6 @@ exports.DialogTitle = React.forwardRef(function (props, ref) {
     var classes = (0, classes_1.useMergedClasses)(dialog_title_classes_1.dialogTitleClasses, dialog_title_classes_1.getDialogTitleUtilityClass, propClasses);
     return (React.createElement(exports.Root, __assign({}, dialogTitleProps, { className: (0, clsx_1.default)(classes.root, className), ref: ref }),
         disableTypography ? (children) : (React.createElement(text_1.Text, { id: id, className: classes.title, variant: "h5", color: "textPrimary" }, children)),
-        !!onClose && (React.createElement(icon_button_1.IconButton, { shape: "circular", variant: "contained", "aria-label": "Close", size: "small", className: classes.closeButton, onClick: function (event) { return onClose(event, 'closeClick'); } },
+        !!onClose && (React.createElement(icon_button_1.IconButton, { shape: "circular", variant: "contained", "aria-label": "Close", size: "small", className: classes.closeButton, onClick: function (event) { return onClose(event, 'closeClick'); }, label: "close button" },
             React.createElement(icon_1.XIcon, null)))));
 });

package/esm/alert/alert.js

@@ -187,6 +187,6 @@ export var Alert = React.forwardRef(function (props, ref) {
             !!title && React.createElement(AlertTitle, { className: classes.title }, title),
             React.createElement(AlertMessage, { className: classes.message }, message || children)),
         hasAction && (React.createElement(AlertAction, { className: classes.action }, action ||
-            (showCloseButton && (React.createElement(IconButton, { color: "inherit", size: "small", variant: "link", "aria-label": closeText, onClick: onClose },
+            (showCloseButton && (React.createElement(IconButton, { label: "close button", color: "inherit", size: "small", variant: "link", "aria-label": closeText, onClick: onClose },
                 React.createElement(XIcon, null))))))));
 });

package/esm/copy-button/copy-button.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -39,9 +17,8 @@ var __read = (this && this.__read) || function (o, n) {
 import * as React from 'react';
 import { CopyIcon } from '../icon';
 import { IconButton } from '../icon-button';
-import { Tooltip } from '../tooltip';
 export var CopyButton = React.forwardRef(function (_a, ref) {
-    var onClick = _a.onClick, iconButtonProps = __rest(_a, ["onClick"]);
+    var onClick = _a.onClick;
     var _b = __read(React.useState(false), 2), pressed = _b[0], setPressed = _b[1];
     React.useEffect(function () {
         if (!pressed) {
@@ -61,7 +38,6 @@ export var CopyButton = React.forwardRef(function (_a, ref) {
     var handleClose = function () { return setPressed(false); };
     // use title as the key to force a mount/unmount of the tooltip. This drives the feedback transition.
     var title = pressed ? 'Copied!' : 'Copy';
-    return (React.createElement(Tooltip, { key: title, title: title, placement: "top", onClose: handleClose },
-        React.createElement(IconButton, __assign({ ref: ref, onClick: handleClick }, iconButtonProps),
-            React.createElement(CopyIcon, null))));
+    return (React.createElement(IconButton, { key: title, label: title, onTooltipClose: handleClose, ref: ref, tooltipPlacement: "top", onClick: handleClick },
+        React.createElement(CopyIcon, null)));
 });

package/esm/data-table/data-table-row.js

@@ -79,7 +79,7 @@ export function DataTableRow(props) {
                 }
                 return hideHeader ? (React.createElement(TableCell, { width: column.width, key: colIndex, align: column.align, padding: column.padding }, content)) : (React.createElement(TableCell, { key: colIndex, align: column.align, padding: column.padding }, content));
             }),
-            !!renderItemDetails && (React.createElement(TableCell, { padding: "checkbox", align: "right" }, !!detailsContent && (React.createElement(IconButton, { onClick: function () { return setIsExpanded(!isExpanded); }, variant: "link" }, isExpanded ? React.createElement(ChevronUpIcon, null) : React.createElement(ChevronDownIcon, null)))))),
+            !!renderItemDetails && (React.createElement(TableCell, { padding: "checkbox", align: "right" }, !!detailsContent && (React.createElement(IconButton, { onClick: function () { return setIsExpanded(!isExpanded); }, variant: "link", label: isExpanded ? 'Chevron up button' : 'chevron down button' }, isExpanded ? React.createElement(ChevronUpIcon, null) : React.createElement(ChevronDownIcon, null)))))),
         !!detailsContent && (React.createElement(Row, { ownerState: { expanded: true } },
             React.createElement(TableCell, { padding: "none", colSpan: columns.length + 1 },
                 React.createElement(Collapse, { in: isExpanded, timeout: "auto", unmountOnExit: true },

package/esm/description-block/description-block.js

@@ -67,5 +67,5 @@ export var DescriptionBlock = React.forwardRef(function (props, ref) {
             !!label && inlinelayout && ':')),
         React.createElement(Content, null,
             code ? (React.createElement(Code, __assign({ title: typeof description === 'string' ? description : undefined, sx: { maxWidth: 300 }, variant: "code2", noWrap: true }, descriptionTypographyProps), description)) : (React.createElement(Text, __assign({ component: "span", variant: "body2" }, descriptionTypographyProps), description)),
-            !!onCopy && React.createElement(CopyAction, { size: "small", onClick: onCopy }))));
+            !!onCopy && React.createElement(CopyAction, { label: "copy", size: "small", onClick: onCopy }))));
 });

package/esm/dialog/dialog-title/dialog-title.js

@@ -43,6 +43,6 @@ export var DialogTitle = React.forwardRef(function (props, ref) {
     var classes = useMergedClasses(dialogTitleClasses, getDialogTitleUtilityClass, propClasses);
     return (React.createElement(Root, __assign({}, dialogTitleProps, { className: clsx(classes.root, className), ref: ref }),
         disableTypography ? (children) : (React.createElement(Text, { id: id, className: classes.title, variant: "h5", color: "textPrimary" }, children)),
-        !!onClose && (React.createElement(IconButton, { shape: "circular", variant: "contained", "aria-label": "Close", size: "small", className: classes.closeButton, onClick: function (event) { return onClose(event, 'closeClick'); } },
+        !!onClose && (React.createElement(IconButton, { shape: "circular", variant: "contained", "aria-label": "Close", size: "small", className: classes.closeButton, onClick: function (event) { return onClose(event, 'closeClick'); }, label: "close button" },
             React.createElement(XIcon, null)))));
 });

package/esm/floating-panel/floating-panel.js

@@ -29,7 +29,7 @@ import { paperClasses } from '../paper';
 export var floatingPanelComponentName = 'QuantumFloatingPanel';
 var CloseButton = function (_a) {
     var onCloseButtonClick = _a.onCloseButtonClick;
-    return (React.createElement(StyledIconButton, { variant: "outlined", shape: "circular", size: "small", onClick: onCloseButtonClick },
+    return (React.createElement(StyledIconButton, { label: "close", variant: "outlined", shape: "circular", size: "small", onClick: onCloseButtonClick },
         React.createElement(XIcon, null)));
 };
 var StyledIconButton = styled(IconButton, { name: floatingPanelComponentName, slot: 'CloseButton' })(function (_a) {

package/esm/icon-button/icon-button.js

@@ -24,12 +24,15 @@ import * as React from 'react';
 import MuiIconButton, { iconButtonClasses } from '@mui/material/IconButton';
 import { styled } from '../styled';
 import { useIconButtonContext } from './icon-button-context';
+import { Tooltip } from '../tooltip';
 export var IconButtonComponentName = 'QuantumIconButton';
+export var IconButtonTooltipComponentName = 'QuantumIconTooltip';
 export { iconButtonClasses };
+var Root = styled(Tooltip, { name: IconButtonTooltipComponentName, slot: 'Root' })({});
 // using any here to work arround TS perf issues with OverrideableComponent and styled
-var Root = styled(MuiIconButton, {
+var StyledIconButton = styled(MuiIconButton, {
     name: IconButtonComponentName,
-    slot: 'Root',
+    slot: 'IconButton',
 })(function (_a) {
     var _b;
     var theme = _a.theme, edge = _a.edge, ownerState = _a.ownerState, color = _a.color;
@@ -49,7 +52,8 @@ var Root = styled(MuiIconButton, {
 });
 export var IconButton = React.forwardRef(function (props, ref) {
     var iconButtonContext = useIconButtonContext();
-    var children = props.children, _a = props.color, color = _a === void 0 ? 'default' : _a, _b = props.variant, variant = _b === void 0 ? 'link' : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c, disabled = props.disabled, edgeProp = props.edge, _d = props.shape, shape = _d === void 0 ? 'default' : _d, iconButtonProps = __rest(props, ["children", "color", "variant", "size", "disabled", "edge", "shape"]);
+    var children = props.children, _a = props.color, color = _a === void 0 ? 'default' : _a, _b = props.variant, variant = _b === void 0 ? 'link' : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c, disabled = props.disabled, edgeProp = props.edge, _d = props.shape, shape = _d === void 0 ? 'default' : _d, _e = props.label, label = _e === void 0 ? 'icon button' : _e, tooltipPlacement = props.tooltipPlacement, onTooltipClose = props.onTooltipClose, iconButtonProps = __rest(props, ["children", "color", "variant", "size", "disabled", "edge", "shape", "label", "tooltipPlacement", "onTooltipClose"]);
     var edge = edgeProp != null ? edgeProp : iconButtonContext.edge;
-    return (React.createElement(Root, __assign({ color: color, ref: ref, edge: edge, disabled: disabled, size: size, variant: variant, ownerState: { shape: shape } }, iconButtonProps), children));
+    return (React.createElement(Root, { title: label, placement: tooltipPlacement, onClose: onTooltipClose },
+        React.createElement(StyledIconButton, __assign({ color: color, ref: ref, edge: edge, disabled: disabled, size: size, variant: variant, ownerState: { shape: shape }, ariaLabel: label }, iconButtonProps), children)));
 });

package/esm/pagination/pager/pager.js

@@ -33,8 +33,8 @@ export var Pager = React.forwardRef(function (props, ref) {
     var isPrevDisabled = disabled || previousDisabled || page <= 1;
     var isNextDisabled = disabled || nextDisabled || (totalPages != null && page >= totalPages);
     return (React.createElement(StackLayout, __assign({ ref: ref, gutter: 1, className: clsx(classes.root, className), sx: __assign({ justifyContent: 'flex-end' }, sx) }, rootProps),
-        React.createElement(IconButton, __assign({ variant: "outlined", size: size, className: classes.previousPageButton, onClick: function () { return onPageChange && onPageChange(page - 1); }, disabled: isPrevDisabled, "aria-label": "Previous page" }, nextIconButtonProps),
+        React.createElement(IconButton, __assign({ variant: "outlined", size: size, className: classes.previousPageButton, onClick: function () { return onPageChange && onPageChange(page - 1); }, disabled: isPrevDisabled, label: "Previous page" }, nextIconButtonProps),
             React.createElement(ChevronLeftIcon, null)),
-        React.createElement(IconButton, __assign({ variant: "outlined", size: size, className: classes.nextPageButton, onClick: function () { return onPageChange && onPageChange(page + 1); }, disabled: isNextDisabled, "aria-label": "Next page" }, previousIconButtonProps),
+        React.createElement(IconButton, __assign({ variant: "outlined", size: size, className: classes.nextPageButton, onClick: function () { return onPageChange && onPageChange(page + 1); }, disabled: isNextDisabled, label: "Next page" }, previousIconButtonProps),
             React.createElement(ChevronRightIcon, null))));
 });

package/esm/panel/panel/panel.js

@@ -99,7 +99,7 @@ export var Panel = React.forwardRef(function (props, ref) {
     return (React.createElement(Root, __assign({ ref: ref, ownerState: ownerState, className: clsx(classes.root, classes["size".concat(capitalize(size))], classes["variant".concat(capitalize(variant))], classes["placement".concat(capitalize(placement))], isFixed && classes.fixed, isOpen && classes.open, className) }, rootProps),
         React.createElement(PanelContext.Provider, { value: __assign(__assign({}, ownerState), { isCloseButtonVisible: showCloseButton }) },
             React.createElement(Content, { className: classes.content, ownerState: ownerState },
-                showCloseButton && (React.createElement(CloseButton, __assign({ "aria-label": "Close", className: classes.closeButton, onClick: function (e) { return onClose(e, 'closeButtonClick'); }, variant: "outlined", size: "small", shape: "circular" }, closeIconButtonProps),
+                showCloseButton && (React.createElement(CloseButton, __assign({ label: "close", className: classes.closeButton, onClick: function (e) { return onClose(e, 'closeButtonClick'); }, variant: "outlined", size: "small", shape: "circular" }, closeIconButtonProps),
                     React.createElement(XIcon, null))),
                 !!title && React.createElement(PanelHeader, __assign({ title: title }, PanelHeaderProps)),
                 children))));

package/esm/select/select.js

@@ -63,7 +63,7 @@ export var Select = React.forwardRef(function (props, ref) {
     return (React.createElement(Root, __assign({ ref: ref, ownerState: { adornedEnd: hasClearButton, selectionDisabled: disabledOptionSelected, size: size }, value: value, defaultValue: defaultValue, multiple: multiple, size: size, className: clsx(classes.root, className), classes: {
             select: classes.select,
         }, endAdornment: hasClearButton && (React.createElement(ClearInputAdornment, { position: "end", className: classes.clearInputAdornment },
-            React.createElement(IconButton, { edge: "end", size: size, onClick: onClear, className: classes.clearButton },
+            React.createElement(IconButton, { edge: "end", size: size, onClick: onClear, className: classes.clearButton, label: "close button" },
                 React.createElement(XCircleIcon, null)))), startAdornment: !!prefix && (React.createElement(InputAdornment, { position: "start", className: classes.prefixInputAdornment },
             React.createElement(Text, { component: "span", variant: "body2", className: classes.prefixText }, prefix))), MenuProps: useCustomMenu
             ? __assign({ anchorOrigin: {

package/esm/theme/create-theme.js

@@ -52,8 +52,8 @@ import { createComponents } from './create-components';
 import { createMixins } from './create-mixins';
 import { createPalette } from './create-palette';
 import { createTypography } from './create-typography';
-import { auth0 } from '@auth0/quantum-tokens';
-var defaultThemeTokens = auth0;
+import { okta } from '@auth0/quantum-tokens';
+var defaultThemeTokens = okta;
 export var createTheme = function (_a) {
     if (_a === void 0) { _a = {}; }
     var layoutOptions = _a.layout, componentsOptions = _a.components, paletteOptions = _a.palette, typographyOptions = _a.typography, _b = _a.breakpoints, breakpointsOptions = _b === void 0 ? {} : _b, tokens = _a.tokens, options = __rest(_a, ["layout", "components", "palette", "typography", "breakpoints", "tokens"]);

package/esm/theme/default-theme.js

@@ -1,7 +1,7 @@
-import { auth0 } from '@auth0/quantum-tokens';
+import { okta } from '@auth0/quantum-tokens';
 import { createQuantumTheme } from './create-quantum-theme';
 import { createTheme } from './create-theme';
 export var defaultTheme = createTheme();
 export var defaultQuantumTheme = createQuantumTheme({
-    tokens: auth0,
+    tokens: okta,
 });

package/floating-panel/floating-panel.js

@@ -55,7 +55,7 @@ var paper_1 = require("../paper");
 exports.floatingPanelComponentName = 'QuantumFloatingPanel';
 var CloseButton = function (_a) {
     var onCloseButtonClick = _a.onCloseButtonClick;
-    return (React.createElement(StyledIconButton, { variant: "outlined", shape: "circular", size: "small", onClick: onCloseButtonClick },
+    return (React.createElement(StyledIconButton, { label: "close", variant: "outlined", shape: "circular", size: "small", onClick: onCloseButtonClick },
         React.createElement(icon_1.XIcon, null)));
 };
 var StyledIconButton = (0, styled_1.styled)(icon_button_1.IconButton, { name: exports.floatingPanelComponentName, slot: 'CloseButton' })(function (_a) {

package/icon-button/icon-button.d.ts

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import { iconButtonClasses, IconButtonTypeMap } from '@mui/material/IconButton';
 import { OverridableComponent, OverrideProps, OverridableTypeMap } from '../overridable-component';
+import { ITooltipProps } from '../tooltip';
 export declare const IconButtonComponentName: "QuantumIconButton";
+export declare const IconButtonTooltipComponentName: "QuantumIconTooltip";
 export { iconButtonClasses };
 export declare type IIconButtonTypeMap<ExtraPropsType = {}, DefaultElementType extends React.ElementType = IconButtonTypeMap['defaultComponent']> = IconButtonTypeMap<ExtraPropsType & {
     /**
@@ -9,7 +11,10 @@ export declare type IIconButtonTypeMap<ExtraPropsType = {}, DefaultElementType e
      */
     variant?: 'link' | 'outlined' | 'contained';
     shape?: 'circular' | 'default';
+    tooltipPlacement?: ITooltipProps['placement'];
+    onTooltipClose?: ITooltipProps['onClose'];
     href?: string;
+    label: string;
     target?: string;
 }, DefaultElementType>;
 export interface IExtendIconButtonTypeMap<M extends OverridableTypeMap> {

package/icon-button/icon-button.js

@@ -45,17 +45,20 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconButton = exports.iconButtonClasses = exports.IconButtonComponentName = void 0;
+exports.IconButton = exports.iconButtonClasses = exports.IconButtonTooltipComponentName = exports.IconButtonComponentName = void 0;
 var React = __importStar(require("react"));
 var IconButton_1 = __importStar(require("@mui/material/IconButton"));
 Object.defineProperty(exports, "iconButtonClasses", { enumerable: true, get: function () { return IconButton_1.iconButtonClasses; } });
 var styled_1 = require("../styled");
 var icon_button_context_1 = require("./icon-button-context");
+var tooltip_1 = require("../tooltip");
 exports.IconButtonComponentName = 'QuantumIconButton';
+exports.IconButtonTooltipComponentName = 'QuantumIconTooltip';
+var Root = (0, styled_1.styled)(tooltip_1.Tooltip, { name: exports.IconButtonTooltipComponentName, slot: 'Root' })({});
 // using any here to work arround TS perf issues with OverrideableComponent and styled
-var Root = (0, styled_1.styled)(IconButton_1.default, {
+var StyledIconButton = (0, styled_1.styled)(IconButton_1.default, {
     name: exports.IconButtonComponentName,
-    slot: 'Root',
+    slot: 'IconButton',
 })(function (_a) {
     var _b;
     var theme = _a.theme, edge = _a.edge, ownerState = _a.ownerState, color = _a.color;
@@ -75,7 +78,8 @@ var Root = (0, styled_1.styled)(IconButton_1.default, {
 });
 exports.IconButton = React.forwardRef(function (props, ref) {
     var iconButtonContext = (0, icon_button_context_1.useIconButtonContext)();
-    var children = props.children, _a = props.color, color = _a === void 0 ? 'default' : _a, _b = props.variant, variant = _b === void 0 ? 'link' : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c, disabled = props.disabled, edgeProp = props.edge, _d = props.shape, shape = _d === void 0 ? 'default' : _d, iconButtonProps = __rest(props, ["children", "color", "variant", "size", "disabled", "edge", "shape"]);
+    var children = props.children, _a = props.color, color = _a === void 0 ? 'default' : _a, _b = props.variant, variant = _b === void 0 ? 'link' : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c, disabled = props.disabled, edgeProp = props.edge, _d = props.shape, shape = _d === void 0 ? 'default' : _d, _e = props.label, label = _e === void 0 ? 'icon button' : _e, tooltipPlacement = props.tooltipPlacement, onTooltipClose = props.onTooltipClose, iconButtonProps = __rest(props, ["children", "color", "variant", "size", "disabled", "edge", "shape", "label", "tooltipPlacement", "onTooltipClose"]);
     var edge = edgeProp != null ? edgeProp : iconButtonContext.edge;
-    return (React.createElement(Root, __assign({ color: color, ref: ref, edge: edge, disabled: disabled, size: size, variant: variant, ownerState: { shape: shape } }, iconButtonProps), children));
+    return (React.createElement(Root, { title: label, placement: tooltipPlacement, onClose: onTooltipClose },
+        React.createElement(StyledIconButton, __assign({ color: color, ref: ref, edge: edge, disabled: disabled, size: size, variant: variant, ownerState: { shape: shape }, ariaLabel: label }, iconButtonProps), children)));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auth0/quantum-product",
-  "version": "1.6.8",
+  "version": "1.8.0",
   "sideEffects": false,
   "license": "Apache-2.0",
   "publishConfig": {

package/pagination/pager/pager.js

@@ -59,8 +59,8 @@ exports.Pager = React.forwardRef(function (props, ref) {
     var isPrevDisabled = disabled || previousDisabled || page <= 1;
     var isNextDisabled = disabled || nextDisabled || (totalPages != null && page >= totalPages);
     return (React.createElement(stack_layout_1.StackLayout, __assign({ ref: ref, gutter: 1, className: (0, utils_1.clsx)(classes.root, className), sx: __assign({ justifyContent: 'flex-end' }, sx) }, rootProps),
-        React.createElement(icon_button_1.IconButton, __assign({ variant: "outlined", size: size, className: classes.previousPageButton, onClick: function () { return onPageChange && onPageChange(page - 1); }, disabled: isPrevDisabled, "aria-label": "Previous page" }, nextIconButtonProps),
+        React.createElement(icon_button_1.IconButton, __assign({ variant: "outlined", size: size, className: classes.previousPageButton, onClick: function () { return onPageChange && onPageChange(page - 1); }, disabled: isPrevDisabled, label: "Previous page" }, nextIconButtonProps),
             React.createElement(icon_1.ChevronLeftIcon, null)),
-        React.createElement(icon_button_1.IconButton, __assign({ variant: "outlined", size: size, className: classes.nextPageButton, onClick: function () { return onPageChange && onPageChange(page + 1); }, disabled: isNextDisabled, "aria-label": "Next page" }, previousIconButtonProps),
+        React.createElement(icon_button_1.IconButton, __assign({ variant: "outlined", size: size, className: classes.nextPageButton, onClick: function () { return onPageChange && onPageChange(page + 1); }, disabled: isNextDisabled, label: "Next page" }, previousIconButtonProps),
             React.createElement(icon_1.ChevronRightIcon, null))));
 });

package/panel/panel/panel.js

@@ -125,7 +125,7 @@ exports.Panel = React.forwardRef(function (props, ref) {
     return (React.createElement(Root, __assign({ ref: ref, ownerState: ownerState, className: (0, utils_1.clsx)(classes.root, classes["size".concat((0, utils_1.capitalize)(size))], classes["variant".concat((0, utils_1.capitalize)(variant))], classes["placement".concat((0, utils_1.capitalize)(placement))], isFixed && classes.fixed, isOpen && classes.open, className) }, rootProps),
         React.createElement(panel_context_1.PanelContext.Provider, { value: __assign(__assign({}, ownerState), { isCloseButtonVisible: showCloseButton }) },
             React.createElement(Content, { className: classes.content, ownerState: ownerState },
-                showCloseButton && (React.createElement(CloseButton, __assign({ "aria-label": "Close", className: classes.closeButton, onClick: function (e) { return onClose(e, 'closeButtonClick'); }, variant: "outlined", size: "small", shape: "circular" }, closeIconButtonProps),
+                showCloseButton && (React.createElement(CloseButton, __assign({ label: "close", className: classes.closeButton, onClick: function (e) { return onClose(e, 'closeButtonClick'); }, variant: "outlined", size: "small", shape: "circular" }, closeIconButtonProps),
                     React.createElement(icon_1.XIcon, null))),
                 !!title && React.createElement(panel_header_1.PanelHeader, __assign({ title: title }, PanelHeaderProps)),
                 children))));

package/select/select.js

@@ -92,7 +92,7 @@ exports.Select = React.forwardRef(function (props, ref) {
     return (React.createElement(Root, __assign({ ref: ref, ownerState: { adornedEnd: hasClearButton, selectionDisabled: disabledOptionSelected, size: size }, value: value, defaultValue: defaultValue, multiple: multiple, size: size, className: (0, clsx_1.default)(classes.root, className), classes: {
             select: classes.select,
         }, endAdornment: hasClearButton && (React.createElement(ClearInputAdornment, { position: "end", className: classes.clearInputAdornment },
-            React.createElement(icon_button_1.IconButton, { edge: "end", size: size, onClick: onClear, className: classes.clearButton },
+            React.createElement(icon_button_1.IconButton, { edge: "end", size: size, onClick: onClear, className: classes.clearButton, label: "close button" },
                 React.createElement(icon_1.XCircleIcon, null)))), startAdornment: !!prefix && (React.createElement(input_1.InputAdornment, { position: "start", className: classes.prefixInputAdornment },
             React.createElement(text_1.Text, { component: "span", variant: "body2", className: classes.prefixText }, prefix))), MenuProps: useCustomMenu
             ? __assign({ anchorOrigin: {

package/theme/create-theme.js

@@ -56,7 +56,7 @@ var create_mixins_1 = require("./create-mixins");
 var create_palette_1 = require("./create-palette");
 var create_typography_1 = require("./create-typography");
 var quantum_tokens_1 = require("@auth0/quantum-tokens");
-var defaultThemeTokens = quantum_tokens_1.auth0;
+var defaultThemeTokens = quantum_tokens_1.okta;
 var createTheme = function (_a) {
     if (_a === void 0) { _a = {}; }
     var layoutOptions = _a.layout, componentsOptions = _a.components, paletteOptions = _a.palette, typographyOptions = _a.typography, _b = _a.breakpoints, breakpointsOptions = _b === void 0 ? {} : _b, tokens = _a.tokens, options = __rest(_a, ["layout", "components", "palette", "typography", "breakpoints", "tokens"]);

package/theme/default-theme.js

@@ -6,5 +6,5 @@ var create_quantum_theme_1 = require("./create-quantum-theme");
 var create_theme_1 = require("./create-theme");
 exports.defaultTheme = (0, create_theme_1.createTheme)();
 exports.defaultQuantumTheme = (0, create_quantum_theme_1.createQuantumTheme)({
-    tokens: quantum_tokens_1.auth0,
+    tokens: quantum_tokens_1.okta,
 });