@auth0/quantum-product 1.7.0 → 1.9.0

package/alert/alert.js

@@ -180,7 +180,7 @@ var AlertAction = (0, styled_1.styled)('div', {
 });
 var defaultIconMapping = {
     warning: React.createElement(icon_1.AlertTriangleIcon, null),
-    danger: React.createElement(icon_1.AlertCircleIcon, null),
+    danger: React.createElement(icon_1.AlertDiamondIcon, null),
     success: React.createElement(icon_1.CheckCircleIcon, null),
     info: React.createElement(icon_1.InfoIcon, null),
     default: React.createElement(icon_1.FileTextIcon, null),
@@ -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

@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { AlertCircleIcon, AlertTriangleIcon, CheckCircleIcon, FileTextIcon, InfoIcon, XIcon } from '../icon';
+import { AlertDiamondIcon, AlertTriangleIcon, CheckCircleIcon, FileTextIcon, InfoIcon, XIcon } from '../icon';
 import { IconButton, iconButtonClasses } from '../icon-button';
 import { buttonClasses } from '../button';
 import { composeClasses } from '../styles/classes';
@@ -151,7 +151,7 @@ var AlertAction = styled('div', {
 });
 var defaultIconMapping = {
     warning: React.createElement(AlertTriangleIcon, null),
-    danger: React.createElement(AlertCircleIcon, null),
+    danger: React.createElement(AlertDiamondIcon, null),
     success: React.createElement(CheckCircleIcon, null),
     info: React.createElement(InfoIcon, null),
     default: React.createElement(FileTextIcon, null),
@@ -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/field-set/field-set-classes.js

@@ -8,5 +8,6 @@ export var fieldSetClasses = generateUtilityClasses(fieldSetComponentName, [
     'labelContent',
     'labelText',
     'descriptionText',
+    'availabilityLabel',
     'contentWrapper',
 ]);

package/esm/field-set/field-set.js

@@ -22,7 +22,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import { useFormLayoutContext } from '../form';
+import { Label } from '../label';
 import { RowLayout } from '../row-layout';
+import { StackLayout } from '../stack-layout';
 import { styled } from '../styled';
 import { fieldSetClasses, fieldSetComponentName, getFieldSetUtilityClass } from './field-set-classes';
 import { Text } from '../text';
@@ -53,8 +55,14 @@ var LabelContent = styled(RowLayout, {
         display: 'none',
     },
 });
+var AvailabilityLabel = styled(Label, { name: fieldSetComponentName, slot: 'AvailabilityLabel' })(function (_a) {
+    var theme = _a.theme;
+    return ({
+        marginLeft: theme.spacing(1),
+    });
+});
 export var FieldSet = React.forwardRef(function (props, ref) {
-    var label = props.label, propLayout = props.layout, description = props.description, children = props.children, _a = props.margin, margin = _a === void 0 ? 'default' : _a, className = props.className, rootProps = __rest(props, ["label", "layout", "description", "children", "margin", "className"]);
+    var label = props.label, propLayout = props.layout, description = props.description, children = props.children, _a = props.margin, margin = _a === void 0 ? 'default' : _a, className = props.className, productReleaseStage = props.productReleaseStage, rootProps = __rest(props, ["label", "layout", "description", "children", "margin", "className", "productReleaseStage"]);
     var layoutContext = useFormLayoutContext().layout;
     var classes = useMergedClasses(fieldSetClasses, getFieldSetUtilityClass, props.classes);
     var layout = propLayout || layoutContext;
@@ -63,7 +71,9 @@ export var FieldSet = React.forwardRef(function (props, ref) {
     };
     return (React.createElement(Root, __assign({ ref: ref, ownerState: ownerState, className: clsx(classes.root, className) }, rootProps),
         React.createElement(LabelContent, { gutter: 0.5, className: classes.labelContent },
-            !!label && (React.createElement(Text, { variant: "subtitle1", color: "textPrimary", component: "legend", className: classes.labelText }, label)),
+            React.createElement(StackLayout, { gutter: 0 },
+                !!label && (React.createElement(Text, { variant: "subtitle1", color: "textPrimary", component: "legend", className: classes.labelText }, label)),
+                !!label && !!productReleaseStage && (React.createElement(AvailabilityLabel, { className: classes.availabilityLabel, productReleaseStage: productReleaseStage, productReleaseStageAbbr: false }))),
             !!description && (React.createElement(Text, { variant: "body2", color: "textSecondary", className: classes.descriptionText }, description))),
         React.createElement(RowLayout, { gutter: margin === 'dense' ? 2 : 3, className: classes.contentWrapper }, children)));
 });

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/foundations/token-tables.js

@@ -23,7 +23,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { Avatar, AvatarBlock, Code, DataTable } from '@auth0/quantum-product';
+import { Avatar, AvatarBlock, Code, DataTable, Box } from '@auth0/quantum-product';
 import * as React from 'react';
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 var tokensJSON = require('../../../quantum-tokens/old/json/tokens.json');
@@ -87,7 +87,7 @@ export var TypographyTokens = function (_a) {
                 title: 'Value',
                 render: function (_a) {
                     var item = _a.item;
-                    return (React.createElement("pre", { style: { width: '350px', whiteSpace: 'pre-wrap' } }, JSON.stringify(item.value, null, 2)));
+                    return (React.createElement(Box, { component: "pre", sx: { typography: 'code2', width: 350, whiteSpace: 'pre-wrap' } }, JSON.stringify(item.value, null, 2)));
                 },
             },
             { field: 'cssVariable', title: 'CSS Token', render: function (_a) {
@@ -115,7 +115,7 @@ export var TypographyGlobalTokens = function (_a) {
                 title: 'Value',
                 render: function (_a) {
                     var item = _a.item;
-                    return (React.createElement("pre", { style: { width: '350px', whiteSpace: 'pre-wrap' } }, JSON.stringify(item.value, null, 2)));
+                    return (React.createElement(Box, { component: "pre", sx: { typography: 'code2', width: 350, whiteSpace: 'pre-wrap' } }, JSON.stringify(item.value, null, 2)));
                 },
             },
             { field: 'cssVariable', title: 'CSS Token', render: function (_a) {