@auth0/quantum-product 2.4.8 → 2.4.10

package/esm/color-text-field/color-text-field.js

@@ -41,30 +41,7 @@ import { InputAdornment } from '../input';
 import { styled } from '../styled';
 import { TextField } from '../text-field';
 var colorTextFieldComponentName = 'QuantumColorTextField';
-var Root = styled(TextField, { name: colorTextFieldComponentName, slot: 'Root' })(function (_a) {
-    var size = _a.size;
-    return ({
-        'input::placeholder': {
-            textTransform: 'uppercase',
-        },
-        '& > div:first-of-type': {
-            paddingLeft: size === 'small' ? '9px' : '12px',
-        },
-        '& input[type="color"]': {
-            cursor: 'pointer',
-            width: size === 'small' ? '16px' : '20px',
-            height: size === 'small' ? '16px' : '20px',
-            '&::-webkit-color-swatch, &::-webkit-color-swatch-wrapper': {
-                borderRadius: '2px',
-                padding: 0,
-            },
-            '&::-moz-color-swatch': {
-                borderRadius: '2px',
-                padding: 0,
-            },
-        },
-    });
-});
+var Root = styled(TextField, { name: colorTextFieldComponentName, slot: 'Root' })({});
 var ColorPicker = styled('input', { name: colorTextFieldComponentName, slot: 'ColorPicker' })(function (_a) {
     var theme = _a.theme;
     return ({
@@ -78,82 +55,39 @@ var ColorPicker = styled('input', { name: colorTextFieldComponentName, slot: 'Co
         '&:focus': __assign({ outline: 'none' }, theme.mixins.focusRing()),
     });
 });
-// Normalizes HEX color values to valid 7char HEX color values
 var normalizeHex = function (hex) {
-    if (hex.startsWith('#')) {
-        hex = hex.slice(1);
+    if (hex.length === 4 && /^#[0-9A-F]{3}$/i.test(hex)) {
+        return "#".concat(hex[1]).concat(hex[1]).concat(hex[2]).concat(hex[2]).concat(hex[3]).concat(hex[3]);
     }
-    var upperHex = hex.toUpperCase();
-    switch (upperHex.length) {
-        case 0:
-            return '';
-        case 1:
-            return "#".concat(upperHex.repeat(6));
-        case 2:
-            return "#".concat(upperHex.repeat(3));
-        case 3:
-        case 4:
-        case 5:
-            return "#".concat(upperHex[0].repeat(2)).concat(upperHex[1].repeat(2)).concat(upperHex[2].repeat(2));
-        default:
-            return "#".concat(upperHex.padEnd(6, upperHex).slice(0, 6));
-    }
-};
-var validateHex = function (hex) {
-    var hexRegex = /^(#?[0-9a-fA-F]{1,6})$/;
-    return hexRegex.test(hex);
+    return hex;
 };
 export var ColorTextField = React.forwardRef(function (props, ref) {
     var inputAdornmentProps = props.inputAdornmentProps, value = props.value, defaultValue = props.defaultValue, placeholder = props.placeholder, rootProps = __rest(props, ["inputAdornmentProps", "value", "defaultValue", "placeholder"]);
-    var getInitialColor = function () { return value || placeholder || defaultValue || ''; };
-    var normalizedInitialColor = normalizeHex(getInitialColor());
-    var _a = __read(React.useState(value || defaultValue), 2), inputColor = _a[0], setInputColor = _a[1];
-    var _b = __read(React.useState(null), 2), error = _b[0], setError = _b[1];
-    //Derived state from inputColor (textfield value)
-    var colorPicker = React.useMemo(function () {
-        if (inputColor) {
-            return normalizeHex(inputColor);
+    var _a = __read(React.useState(normalizeHex(value || placeholder || defaultValue || '#000000')), 2), color = _a[0], setColor = _a[1];
+    var handleColorChange = function (event) {
+        var value = event.target.value;
+        if (value.length === 4 && /^#[0-9A-F]{3}$/i.test(value)) {
+            var normalizedValue = normalizeHex(value);
+            if (props.onChange) {
+                props.onChange(__assign(__assign({}, event), { target: __assign(__assign({}, event.target), { value: normalizedValue }) }));
+            }
         }
-        return normalizeHex(getInitialColor());
-    }, [inputColor, value, placeholder, defaultValue]);
-    var handleTextfieldChange = function (event) {
-        var newValue = event.target.value;
-        setInputColor(newValue);
-    };
-    var handleTextfieldBlur = function (event) {
-        var _a, _b;
-        if (!validateHex(event.target.value)) {
-            setError('Color is invalid');
-            return;
-        }
-        setError(null);
-        var newValue = normalizeHex(event.target.value);
-        setInputColor(newValue);
-        var updatedEvent = __assign(__assign({}, event), { target: __assign(__assign({}, event.target), { value: newValue || normalizedInitialColor }) });
-        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, updatedEvent);
-        (_b = props.onBlur) === null || _b === void 0 ? void 0 : _b.call(props, updatedEvent);
-    };
-    var handleColorPickerChange = function (event) {
-        var _a, _b;
-        if (!validateHex(event.target.value)) {
-            setError('Color is invalid');
-            return;
+        else {
+            if (props.onChange) {
+                props.onChange(event);
+            }
         }
-        setError(null);
-        var newValue = (_a = event.target.value) === null || _a === void 0 ? void 0 : _a.toUpperCase();
-        setInputColor(newValue);
-        (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, __assign(__assign({}, event), { target: __assign(__assign({}, event.target), { value: newValue }) }));
     };
-    // Rerender to avoid memoized value on defaultValue change
     React.useEffect(function () {
-        setInputColor(defaultValue);
-    }, [defaultValue]);
-    return (React.createElement(Root, __assign({ ref: ref, error: error }, rootProps, { InputProps: {
+        var newColor = value || placeholder || defaultValue || '#000000';
+        if (newColor) {
+            setColor(normalizeHex(newColor));
+        }
+    }, [value, defaultValue, placeholder]);
+    return (React.createElement(Root, __assign({ ref: ref }, rootProps, { InputProps: {
             startAdornment: (React.createElement(InputAdornment, __assign({ position: "start" }, inputAdornmentProps),
-                React.createElement(ColorPicker, { id: props.id ? "".concat(props.id, "-color-input") : undefined, name: props.name, type: "color", disabled: props.disabled, readOnly: props.readOnly, value: colorPicker, onChange: handleColorPickerChange }))),
-            value: inputColor,
+                React.createElement(ColorPicker, { id: props.id ? "".concat(props.id, "-color-input") : undefined, name: props.name, type: "color", disabled: props.disabled, readOnly: props.readOnly, value: color, onChange: handleColorChange }))),
+            value: value,
             placeholder: placeholder,
-            onBlur: handleTextfieldBlur,
-            onChange: handleTextfieldChange,
         } })));
 });

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

@@ -40,8 +40,8 @@ import * as React from 'react';
 import { CopyIcon } from '../icon';
 import { IconButton } from '../icon-button';
 export var CopyButton = React.forwardRef(function (_a, ref) {
-    var onClick = _a.onClick, label = _a.label, rootProps = __rest(_a, ["onClick", "label"]);
-    var _b = __read(React.useState(false), 2), pressed = _b[0], setPressed = _b[1];
+    var onClick = _a.onClick, label = _a.label, _b = _a.copiedLabel, copiedLabel = _b === void 0 ? 'Copied!' : _b, rootProps = __rest(_a, ["onClick", "label", "copiedLabel"]);
+    var _c = __read(React.useState(false), 2), pressed = _c[0], setPressed = _c[1];
     React.useEffect(function () {
         if (!pressed) {
             return undefined;
@@ -59,7 +59,7 @@ 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!' : label;
+    var title = pressed ? copiedLabel : label;
     return (React.createElement(IconButton, __assign({}, rootProps, { key: title, label: title, onTooltipClose: handleClose, ref: ref, tooltipPlacement: "top", onClick: handleClick }),
         React.createElement(CopyIcon, null)));
 });

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

@@ -39,10 +39,10 @@ var Root = styled(MuiDialogTitle, {
     justifyContent: 'space-between',
 });
 export var DialogTitle = React.forwardRef(function (props, ref) {
-    var children = props.children, onClose = props.onClose, _a = props.disableTypography, disableTypography = _a === void 0 ? false : _a, id = props.id, className = props.className, propClasses = props.classes, dialogTitleProps = __rest(props, ["children", "onClose", "disableTypography", "id", "className", "classes"]);
+    var children = props.children, onClose = props.onClose, closeButtonLabel = props.closeButtonLabel, _a = props.disableTypography, disableTypography = _a === void 0 ? false : _a, id = props.id, className = props.className, propClasses = props.classes, dialogTitleProps = __rest(props, ["children", "onClose", "closeButtonLabel", "disableTypography", "id", "className", "classes"]);
     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'); }, label: "Close" },
+        !!onClose && (React.createElement(IconButton, { shape: "circular", variant: "contained", "aria-label": "Close", size: "small", className: classes.closeButton, onClick: function (event) { return onClose(event, 'closeClick'); }, label: closeButtonLabel || 'Close' },
             React.createElement(XIcon, null)))));
 });

package/esm/dialog/dialog.js

@@ -42,7 +42,7 @@ var Root = styled(MuiDialog, {
         _b);
 });
 export var Dialog = React.forwardRef(function (props, ref) {
-    var title = props.title, actions = props.actions, children = props.children, onClose = props.onClose, idProp = props.id, disableBackdropClick = props.disableBackdropClick, _a = props.disableContentWrap, disableContentWrap = _a === void 0 ? false : _a, dialogProps = __rest(props, ["title", "actions", "children", "onClose", "id", "disableBackdropClick", "disableContentWrap"]);
+    var title = props.title, actions = props.actions, children = props.children, onClose = props.onClose, closeButtonLabel = props.closeButtonLabel, idProp = props.id, disableBackdropClick = props.disableBackdropClick, _a = props.disableContentWrap, disableContentWrap = _a === void 0 ? false : _a, dialogProps = __rest(props, ["title", "actions", "children", "onClose", "closeButtonLabel", "id", "disableBackdropClick", "disableContentWrap"]);
     var id = useId(props.id);
     var titleId = !!title && !!id ? "".concat(id, "-title") : undefined;
     var handleClose = function (event, reason) {
@@ -54,7 +54,7 @@ export var Dialog = React.forwardRef(function (props, ref) {
         }
     };
     return (React.createElement(Root, __assign({ PaperProps: { elevation: 4 } }, dialogProps, { id: id, ref: ref, onClose: onClose ? handleClose : undefined, "aria-labelledby": titleId }),
-        !!title && (React.createElement(DialogTitle, { id: titleId, onClose: onClose }, title)),
+        !!title && (React.createElement(DialogTitle, { id: titleId, onClose: onClose, closeButtonLabel: closeButtonLabel }, title)),
         disableContentWrap ? children : React.createElement(DialogContent, null, children),
         !!actions && React.createElement(DialogActions, null, actions)));
 });

package/esm/label/label.js

@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import { rootShouldForwardProp, styled } from '../styled';
 export var labelComponentName = 'QuantumLabel';
-var getReleaseStageLabelProps = function (productReleaseStage, productReleaseStageAbbr) {
+var getReleaseStageLabelProps = function (productReleaseStage, productReleaseStageAbbr, productReleaseStageLabel) {
     var labelProps = {
         color: 'default',
         variant: 'default',
@@ -32,23 +32,27 @@ var getReleaseStageLabelProps = function (productReleaseStage, productReleaseSta
         case 'new':
         case 'generalAvailability':
             labelProps.variant = 'filled';
-            labelProps.children = 'New';
+            labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'New';
             labelProps.color = 'primary';
             break;
         case 'beta':
-            labelProps.children = 'Beta';
+            labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'Beta';
             labelProps.color = 'primary';
             break;
         case 'first':
         case 'early':
         case 'earlyAccess':
             labelProps.color = 'primary';
-            productReleaseStageAbbr ? (labelProps.children = 'Early') : (labelProps.children = 'Early Access');
+            productReleaseStageAbbr
+                ? (labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'Early')
+                : (labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'Early Access');
             break;
         case 'deprecated':
             labelProps.color = 'warning';
-            labelProps.children = 'Deprecated';
+            labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'Deprecated';
             break;
+        default:
+            labelProps.children = productReleaseStage;
     }
     return labelProps;
 };
@@ -109,9 +113,9 @@ var StyledLabel = styled('span', {
     })))));
 });
 export var Label = React.forwardRef(function (props, ref) {
-    var productReleaseStage = props.productReleaseStage, _a = props.productReleaseStageAbbr, productReleaseStageAbbr = _a === void 0 ? true : _a, children = props.children, color = props.color, variant = props.variant, rootProps = __rest(props, ["productReleaseStage", "productReleaseStageAbbr", "children", "color", "variant"]);
+    var productReleaseStage = props.productReleaseStage, _a = props.productReleaseStageAbbr, productReleaseStageAbbr = _a === void 0 ? true : _a, children = props.children, color = props.color, variant = props.variant, productReleaseStageLabel = props.productReleaseStageLabel, rootProps = __rest(props, ["productReleaseStage", "productReleaseStageAbbr", "children", "color", "variant", "productReleaseStageLabel"]);
     var ownerState = productReleaseStage
-        ? getReleaseStageLabelProps(productReleaseStage, productReleaseStageAbbr)
+        ? getReleaseStageLabelProps(productReleaseStage, productReleaseStageAbbr, productReleaseStageLabel)
         : {
             color: color,
             variant: variant,

package/esm/page/page-header/page-header.js

@@ -84,7 +84,7 @@ export var PageHeader = React.forwardRef(function (props, ref) {
                 React.createElement(AvatarBlock, { size: compact ? 'medium' : 'large', classes: {
                         root: classes.avatarBlock,
                         avatar: classes.avatar,
-                    }, avatar: avatar && React.createElement(AvatarContext.Provider, { value: { size: 'large' } }, avatar), titleTypographyProps: __assign({ variant: compact ? 'h5' : 'h3', component: 'h1', className: classes.title }, titleTypographyProps), title: React.createElement(React.Fragment, null,
+                    }, avatar: avatar && React.createElement(AvatarContext.Provider, { value: { size: 'large' } }, avatar), titleTypographyProps: __assign({ variant: compact ? 'h5' : 'h3', component: 'h1', className: classes.title, noWrap: true }, titleTypographyProps), title: React.createElement(React.Fragment, null,
                         title,
                         !!productReleaseStage && (React.createElement(AvailabilityLabel, { className: classes.availabilityLabel, productReleaseStageAbbr: false, productReleaseStage: productReleaseStage }))), description: metadata, descriptionTypographyProps: __assign({ component: 'div', className: classes.metadata }, metadataTypographyProps), TitleBlockProps: { gutter: 0.5 }, endAdornment: !!actions && (React.createElement(Actions, { className: classes.actions, sx: { flex: 'none' } }, actions)) }))),
         !!description && (React.createElement(Text, __assign({ variant: "body2", color: "textSecondary", component: "p", className: classes.description }, descriptionTypographyProps), description))));

package/esm/pagination/pager/pager.js

@@ -28,13 +28,13 @@ import { getPagerUtilityClass, pagerClasses } from './pager-classes';
 import { clsx } from '../../utils';
 import { ChevronLeftIcon, ChevronRightIcon } from '../../icon';
 export var Pager = React.forwardRef(function (props, ref) {
-    var page = props.page, propClasses = props.classes, className = props.className, disabled = props.disabled, nextDisabled = props.nextDisabled, _a = props.nextIconButtonProps, nextIconButtonProps = _a === void 0 ? {} : _a, onPageChange = props.onPageChange, previousDisabled = props.previousDisabled, _b = props.previousIconButtonProps, previousIconButtonProps = _b === void 0 ? {} : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c, _d = props.sx, sx = _d === void 0 ? {} : _d, totalPages = props.totalPages, rootProps = __rest(props, ["page", "classes", "className", "disabled", "nextDisabled", "nextIconButtonProps", "onPageChange", "previousDisabled", "previousIconButtonProps", "size", "sx", "totalPages"]);
+    var page = props.page, propClasses = props.classes, className = props.className, disabled = props.disabled, nextDisabled = props.nextDisabled, _a = props.nextIconButtonProps, nextIconButtonProps = _a === void 0 ? {} : _a, onPageChange = props.onPageChange, previousDisabled = props.previousDisabled, _b = props.previousIconButtonProps, previousIconButtonProps = _b === void 0 ? {} : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c, _d = props.sx, sx = _d === void 0 ? {} : _d, totalPages = props.totalPages, _e = props.previousButtonLabel, previousButtonLabel = _e === void 0 ? 'Previous Page' : _e, _f = props.nextButtonLabel, nextButtonLabel = _f === void 0 ? 'Next Page' : _f, rootProps = __rest(props, ["page", "classes", "className", "disabled", "nextDisabled", "nextIconButtonProps", "onPageChange", "previousDisabled", "previousIconButtonProps", "size", "sx", "totalPages", "previousButtonLabel", "nextButtonLabel"]);
     var classes = useMergedClasses(pagerClasses, getPagerUtilityClass, propClasses);
     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, 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: previousButtonLabel }, 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, 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: nextButtonLabel }, previousIconButtonProps),
             React.createElement(ChevronRightIcon, null))));
 });

package/esm/pagination/pagination.js

@@ -61,7 +61,7 @@ var changePageIfAppropriate = function (_a) {
     }
 };
 export var Pagination = React.forwardRef(function (props, ref) {
-    var children = props.children, className = props.className, page = props.page, perPage = props.perPage, items = props.items, _a = props.showPageSelection, showPageSelection = _a === void 0 ? false : _a, onPageChanged = props.onPageChanged, disabled = props.disabled, propClasses = props.classes, _b = props.PagerProps, PagerProps = _b === void 0 ? {} : _b, rootProps = __rest(props, ["children", "className", "page", "perPage", "items", "showPageSelection", "onPageChanged", "disabled", "classes", "PagerProps"]);
+    var children = props.children, className = props.className, page = props.page, perPage = props.perPage, items = props.items, _a = props.showPageSelection, showPageSelection = _a === void 0 ? false : _a, onPageChanged = props.onPageChanged, disabled = props.disabled, propClasses = props.classes, _b = props.nextButtonLabel, nextButtonLabel = _b === void 0 ? 'Next Page' : _b, _c = props.previousButtonLabel, previousButtonLabel = _c === void 0 ? 'Previous Page' : _c, _d = props.PagerProps, PagerProps = _d === void 0 ? {} : _d, rootProps = __rest(props, ["children", "className", "page", "perPage", "items", "showPageSelection", "onPageChanged", "disabled", "classes", "nextButtonLabel", "previousButtonLabel", "PagerProps"]);
     var classes = useMergedClasses(paginationClasses, getPaginationUtilityClass, propClasses);
     var pages = pagesFromItems(items, perPage);
     var pageOptions = React.useMemo(function () {
@@ -106,5 +106,5 @@ export var Pagination = React.forwardRef(function (props, ref) {
                     " of ",
                     items))),
             React.createElement(StackLayoutItem, null,
-                React.createElement(Pager, __assign({ page: page, className: classes.pager, onPageChange: function (nextPage) { return changePageIfAppropriate({ nextPage: nextPage, total: items, perPage: perPage, onPageChanged: onPageChanged }); }, totalPages: pages, disabled: disabled }, PagerProps))))))));
+                React.createElement(Pager, __assign({ page: page, className: classes.pager, onPageChange: function (nextPage) { return changePageIfAppropriate({ nextPage: nextPage, total: items, perPage: perPage, onPageChanged: onPageChanged }); }, totalPages: pages, disabled: disabled }, PagerProps, { previousButtonLabel: previousButtonLabel, nextButtonLabel: nextButtonLabel }))))))));
 });

package/esm/panel/panel/panel.js

@@ -84,7 +84,7 @@ var CloseButton = styled(IconButton, {
     right: 24,
 });
 export var Panel = React.forwardRef(function (props, ref) {
-    var title = props.title, isOpen = props.isOpen, _a = props.placement, placement = _a === void 0 ? 'end' : _a, _b = props.variant, variant = _b === void 0 ? 'permanent' : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c, onClose = props.onClose, className = props.className, propClasses = props.classes, isFixed = props.isFixed, propOffsetTop = props.offsetTop, children = props.children, _d = props.closeIconButtonProps, closeIconButtonProps = _d === void 0 ? {} : _d, _e = props.PanelHeaderProps, PanelHeaderProps = _e === void 0 ? {} : _e, rootProps = __rest(props, ["title", "isOpen", "placement", "variant", "size", "onClose", "className", "classes", "isFixed", "offsetTop", "children", "closeIconButtonProps", "PanelHeaderProps"]);
+    var title = props.title, isOpen = props.isOpen, _a = props.placement, placement = _a === void 0 ? 'end' : _a, _b = props.variant, variant = _b === void 0 ? 'permanent' : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c, onClose = props.onClose, closeButtonLabel = props.closeButtonLabel, className = props.className, propClasses = props.classes, isFixed = props.isFixed, propOffsetTop = props.offsetTop, children = props.children, _d = props.closeIconButtonProps, closeIconButtonProps = _d === void 0 ? {} : _d, _e = props.PanelHeaderProps, PanelHeaderProps = _e === void 0 ? {} : _e, rootProps = __rest(props, ["title", "isOpen", "placement", "variant", "size", "onClose", "closeButtonLabel", "className", "classes", "isFixed", "offsetTop", "children", "closeIconButtonProps", "PanelHeaderProps"]);
     var classes = useMergedClasses(panelClasses, getPanelUtilityClass, propClasses);
     var offsetTop = propOffsetTop != null ? propOffsetTop : isFixed ? 'appbar' : 0;
     var ownerState = {
@@ -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({ 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: closeButtonLabel || '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/panel/panel-header/panel-header.js

@@ -51,11 +51,22 @@ var EndAdornment = styled('div')(function (_a) {
     });
 });
 export var PanelHeader = React.forwardRef(function (props, ref) {
-    var title = props.title, className = props.className, propClasses = props.classes, endAdornment = props.endAdornment, titleTextProps = props.titleTextProps, titleComponent = props.titleComponent, rootProps = __rest(props, ["title", "className", "classes", "endAdornment", "titleTextProps", "titleComponent"]);
+    var title = props.title, className = props.className, propClasses = props.classes, endAdornment = props.endAdornment, titleTextProps = props.titleTextProps, titleComponent = props.titleComponent, titleNoWrap = props.titleNoWrap, rootProps = __rest(props, ["title", "className", "classes", "endAdornment", "titleTextProps", "titleComponent", "titleNoWrap"]);
     var classes = useMergedClasses(panelHeaderClasses, getPanelHeaderUtilityClass, propClasses);
     var panelContext = usePanelContext();
+    var textStyles = titleNoWrap
+        ? {
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+        }
+        : {
+            whiteSpace: 'normal',
+            overflow: 'visible',
+            textOverflow: 'clip', // Don't apply ellipsis
+        };
     return (React.createElement(Root, __assign({ className: clsx(classes.root, className), ownerState: { isCloseButtonVisible: panelContext.isCloseButtonVisible }, ref: ref }, rootProps),
-        React.createElement(Content, { className: classes.content },
-            React.createElement(Text, __assign({ className: classes.title, component: titleComponent, variant: "h5" }, titleTextProps), title)),
+        React.createElement(Content, { className: classes.content, sx: textStyles },
+            React.createElement(Text, __assign({ className: classes.title, component: titleComponent, variant: "h5" }, titleTextProps, { title: titleNoWrap ? title : '', sx: textStyles }), title)),
         !!endAdornment && React.createElement(EndAdornment, { className: classes.endAdornment }, endAdornment)));
 });

package/esm/selectable-card/selectable-card.js

@@ -49,9 +49,12 @@ var ControlRadio = createControl(Radio, 'ControlRadio');
 var ControlCheckbox = createControl(Checkbox, 'ControlCheckbox');
 var Content = styled('div', { name: selectableCardComponentName, slot: 'Content' })({
     flex: 1,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
 });
 export var SelectableCard = React.forwardRef(function (props, ref) {
-    var avatar = props.avatar, label = props.label, propTitle = props.title, propDescription = props.description, helperText = props.helperText, value = props.value, disabled = props.disabled, name = props.name, onChange = props.onChange, checkedProp = props.checked, RadioProps = props.RadioProps, CheckboxProps = props.CheckboxProps, _a = props.controlPlacement, controlPlacement = _a === void 0 ? 'start' : _a, _b = props.size, size = _b === void 0 ? 'medium' : _b, type = props.type, _c = props.hideControl, hideControl = _c === void 0 ? false : _c, children = props.children, className = props.className, propClasses = props.classes, rootProps = __rest(props, ["avatar", "label", "title", "description", "helperText", "value", "disabled", "name", "onChange", "checked", "RadioProps", "CheckboxProps", "controlPlacement", "size", "type", "hideControl", "children", "className", "classes"]);
+    var avatar = props.avatar, label = props.label, propTitle = props.title, propDescription = props.description, helperText = props.helperText, value = props.value, disabled = props.disabled, name = props.name, onChange = props.onChange, checkedProp = props.checked, RadioProps = props.RadioProps, CheckboxProps = props.CheckboxProps, _a = props.controlPlacement, controlPlacement = _a === void 0 ? 'start' : _a, _b = props.size, size = _b === void 0 ? 'medium' : _b, type = props.type, _c = props.hideControl, hideControl = _c === void 0 ? false : _c, children = props.children, className = props.className, _d = props.noWrap, noWrap = _d === void 0 ? false : _d, propClasses = props.classes, rootProps = __rest(props, ["avatar", "label", "title", "description", "helperText", "value", "disabled", "name", "onChange", "checked", "RadioProps", "CheckboxProps", "controlPlacement", "size", "type", "hideControl", "children", "className", "noWrap", "classes"]);
     var inputRef = React.createRef();
     var radioGroup = useRadioGroup();
     var classes = useMergedClasses(selectableCardClasses, getSelectableCardUtilityClass, propClasses);
@@ -61,7 +64,7 @@ export var SelectableCard = React.forwardRef(function (props, ref) {
     if (radioGroup && checked == null) {
         checked = radioGroup.value === value;
     }
-    var content = children || React.createElement(CardHeader, { avatar: avatar, title: title, subheader: description });
+    var content = children || React.createElement(CardHeader, { avatar: avatar, title: title, subheader: description, noWrap: noWrap });
     var Control = type === 'radio' ? ControlRadio : ControlCheckbox;
     var control = (React.createElement(Control, __assign({ value: value, inputRef: inputRef, onChange: onChange, disabled: disabled, className: type === 'radio' ? classes.controlRadio : classes.controlCheckbox, ownerState: { hidden: hideControl }, checked: checked }, (type === 'radio' ? RadioProps : CheckboxProps))));
     return (React.createElement(Root, __assign({}, { ref: ref }, { size: size, selected: checked, disabled: disabled, button: true, className: clsx(classes.root, className), component: "label" }, rootProps),

package/esm/text/text.js

@@ -86,8 +86,8 @@ var getComponentForVariant = function (_a) {
     return textVariantMapping[variant];
 };
 export var Text = React.forwardRef(function (props, ref) {
-    var variant = props.variant, propClasses = props.classes, propComponent = props.component, className = props.className, rootProps = __rest(props, ["variant", "classes", "component", "className"]);
+    var variant = props.variant, propClasses = props.classes, propComponent = props.component, className = props.className, sx = props.sx, rootProps = __rest(props, ["variant", "classes", "component", "className", "sx"]);
     var classes = useUtilityClasses(variant, propClasses);
     var component = propComponent || getComponentForVariant({ variant: variant });
-    return (React.createElement(Root, __assign({ ref: ref, variant: variant, className: clsx([classes.root, className]) }, { component: component }, rootProps)));
+    return (React.createElement(Root, __assign({ ref: ref, variant: variant, className: clsx([classes.root, className]) }, { component: component }, { sx: sx }, rootProps)));
 });

package/esm/title-block/title-block.js

@@ -28,6 +28,6 @@ import { titleBlockClasses } from './title-block-classes';
 export var TitleBlock = React.forwardRef(function (_a, ref) {
     var title = _a.title, _b = _a.titleTypographyProps, titleTypographyProps = _b === void 0 ? {} : _b, description = _a.description, _c = _a.descriptionTypographyProps, descriptionTypographyProps = _c === void 0 ? {} : _c, className = _a.className, rootProps = __rest(_a, ["title", "titleTypographyProps", "description", "descriptionTypographyProps", "className"]);
     return (React.createElement(RowLayout, __assign({ gutter: 0, className: clsx(titleBlockClasses.root, className) }, rootProps, { ref: ref }),
-        React.createElement(Text, __assign({ className: titleBlockClasses.title, variant: "subtitle2", color: "inherit" }, titleTypographyProps, { title: title }), title),
-        !!description && (React.createElement(Text, __assign({ variant: "body2", color: "textSecondary", className: titleBlockClasses.description }, descriptionTypographyProps, { title: description }), description))));
+        React.createElement(Text, __assign({ className: titleBlockClasses.title, variant: "subtitle2", color: "inherit" }, titleTypographyProps, { title: (titleTypographyProps === null || titleTypographyProps === void 0 ? void 0 : titleTypographyProps.noWrap) && typeof title === 'string' ? title : '' }), title),
+        !!description && (React.createElement(Text, __assign({ variant: "body2", color: "textSecondary", className: titleBlockClasses.description }, descriptionTypographyProps, { title: (descriptionTypographyProps === null || descriptionTypographyProps === void 0 ? void 0 : descriptionTypographyProps.noWrap) && typeof title === 'string' ? description : '' }), description))));
 });

package/expansion-panel/expansion-panel-header.d.ts

@@ -10,4 +10,5 @@ export declare const ExpansionPanelHeader: import("styled-components").StyledCom
     subheaderTypographyProps?: import("..").ITextProps<any> | undefined;
     title?: import("react").ReactNode;
     titleTypographyProps?: import("..").ITextProps<any> | undefined;
-} & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "title" | "ref" | "action" | "size" | "classes" | "avatar" | "disableTypography" | "subheader" | "subheaderTypographyProps" | "titleTypographyProps"> & import("../styled").IStyledCommonProps & import("react").RefAttributes<HTMLDivElement>>, import("..").ITheme, import("@mui/system").MUIStyledCommonProps<import("..").ITheme>, never>;
+    noWrap?: boolean | undefined;
+} & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "title" | "ref" | "action" | "size" | "classes" | "avatar" | "disableTypography" | "subheader" | "subheaderTypographyProps" | "titleTypographyProps" | "noWrap"> & import("../styled").IStyledCommonProps & import("react").RefAttributes<HTMLDivElement>>, import("..").ITheme, import("@mui/system").MUIStyledCommonProps<import("..").ITheme>, never>;

package/label/label.d.ts

@@ -13,6 +13,7 @@ export interface ILabelComponentProps {
      * @default true
      */
     productReleaseStageAbbr?: boolean;
+    productReleaseStageLabel?: string;
 }
 export type ILabelProps = IStyledComponentProps<{
     props: ILabelComponentProps;

package/label/label.js

@@ -49,7 +49,7 @@ exports.Label = exports.labelComponentName = void 0;
 var React = __importStar(require("react"));
 var styled_1 = require("../styled");
 exports.labelComponentName = 'QuantumLabel';
-var getReleaseStageLabelProps = function (productReleaseStage, productReleaseStageAbbr) {
+var getReleaseStageLabelProps = function (productReleaseStage, productReleaseStageAbbr, productReleaseStageLabel) {
     var labelProps = {
         color: 'default',
         variant: 'default',
@@ -58,23 +58,27 @@ var getReleaseStageLabelProps = function (productReleaseStage, productReleaseSta
         case 'new':
         case 'generalAvailability':
             labelProps.variant = 'filled';
-            labelProps.children = 'New';
+            labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'New';
             labelProps.color = 'primary';
             break;
         case 'beta':
-            labelProps.children = 'Beta';
+            labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'Beta';
             labelProps.color = 'primary';
             break;
         case 'first':
         case 'early':
         case 'earlyAccess':
             labelProps.color = 'primary';
-            productReleaseStageAbbr ? (labelProps.children = 'Early') : (labelProps.children = 'Early Access');
+            productReleaseStageAbbr
+                ? (labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'Early')
+                : (labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'Early Access');
             break;
         case 'deprecated':
             labelProps.color = 'warning';
-            labelProps.children = 'Deprecated';
+            labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'Deprecated';
             break;
+        default:
+            labelProps.children = productReleaseStage;
     }
     return labelProps;
 };
@@ -135,9 +139,9 @@ var StyledLabel = (0, styled_1.styled)('span', {
     })))));
 });
 exports.Label = React.forwardRef(function (props, ref) {
-    var productReleaseStage = props.productReleaseStage, _a = props.productReleaseStageAbbr, productReleaseStageAbbr = _a === void 0 ? true : _a, children = props.children, color = props.color, variant = props.variant, rootProps = __rest(props, ["productReleaseStage", "productReleaseStageAbbr", "children", "color", "variant"]);
+    var productReleaseStage = props.productReleaseStage, _a = props.productReleaseStageAbbr, productReleaseStageAbbr = _a === void 0 ? true : _a, children = props.children, color = props.color, variant = props.variant, productReleaseStageLabel = props.productReleaseStageLabel, rootProps = __rest(props, ["productReleaseStage", "productReleaseStageAbbr", "children", "color", "variant", "productReleaseStageLabel"]);
     var ownerState = productReleaseStage
-        ? getReleaseStageLabelProps(productReleaseStage, productReleaseStageAbbr)
+        ? getReleaseStageLabelProps(productReleaseStage, productReleaseStageAbbr, productReleaseStageLabel)
         : {
             color: color,
             variant: variant,

package/package.json

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

package/page/page-header/page-header.js

@@ -113,7 +113,7 @@ exports.PageHeader = React.forwardRef(function (props, ref) {
                 React.createElement(avatar_block_1.AvatarBlock, { size: compact ? 'medium' : 'large', classes: {
                         root: classes.avatarBlock,
                         avatar: classes.avatar,
-                    }, avatar: avatar && React.createElement(avatar_1.AvatarContext.Provider, { value: { size: 'large' } }, avatar), titleTypographyProps: __assign({ variant: compact ? 'h5' : 'h3', component: 'h1', className: classes.title }, titleTypographyProps), title: React.createElement(React.Fragment, null,
+                    }, avatar: avatar && React.createElement(avatar_1.AvatarContext.Provider, { value: { size: 'large' } }, avatar), titleTypographyProps: __assign({ variant: compact ? 'h5' : 'h3', component: 'h1', className: classes.title, noWrap: true }, titleTypographyProps), title: React.createElement(React.Fragment, null,
                         title,
                         !!productReleaseStage && (React.createElement(AvailabilityLabel, { className: classes.availabilityLabel, productReleaseStageAbbr: false, productReleaseStage: productReleaseStage }))), description: metadata, descriptionTypographyProps: __assign({ component: 'div', className: classes.metadata }, metadataTypographyProps), TitleBlockProps: { gutter: 0.5 }, endAdornment: !!actions && (React.createElement(exports.Actions, { className: classes.actions, sx: { flex: 'none' } }, actions)) }))),
         !!description && (React.createElement(text_1.Text, __assign({ variant: "body2", color: "textSecondary", component: "p", className: classes.description }, descriptionTypographyProps), description))));

package/pagination/pager/pager.d.ts

@@ -13,5 +13,7 @@ export interface IPagerProps extends IStackLayoutProps {
     previousIconButtonProps?: IIconButtonProps;
     size?: IIconButtonProps['size'];
     totalPages?: number;
+    previousButtonLabel?: string;
+    nextButtonLabel?: string;
 }
 export declare const Pager: React.ForwardRefExoticComponent<IPagerProps & React.RefAttributes<HTMLDivElement>>;

package/pagination/pager/pager.js

@@ -54,13 +54,13 @@ var pager_classes_1 = require("./pager-classes");
 var utils_1 = require("../../utils");
 var icon_1 = require("../../icon");
 exports.Pager = React.forwardRef(function (props, ref) {
-    var page = props.page, propClasses = props.classes, className = props.className, disabled = props.disabled, nextDisabled = props.nextDisabled, _a = props.nextIconButtonProps, nextIconButtonProps = _a === void 0 ? {} : _a, onPageChange = props.onPageChange, previousDisabled = props.previousDisabled, _b = props.previousIconButtonProps, previousIconButtonProps = _b === void 0 ? {} : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c, _d = props.sx, sx = _d === void 0 ? {} : _d, totalPages = props.totalPages, rootProps = __rest(props, ["page", "classes", "className", "disabled", "nextDisabled", "nextIconButtonProps", "onPageChange", "previousDisabled", "previousIconButtonProps", "size", "sx", "totalPages"]);
+    var page = props.page, propClasses = props.classes, className = props.className, disabled = props.disabled, nextDisabled = props.nextDisabled, _a = props.nextIconButtonProps, nextIconButtonProps = _a === void 0 ? {} : _a, onPageChange = props.onPageChange, previousDisabled = props.previousDisabled, _b = props.previousIconButtonProps, previousIconButtonProps = _b === void 0 ? {} : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c, _d = props.sx, sx = _d === void 0 ? {} : _d, totalPages = props.totalPages, _e = props.previousButtonLabel, previousButtonLabel = _e === void 0 ? 'Previous Page' : _e, _f = props.nextButtonLabel, nextButtonLabel = _f === void 0 ? 'Next Page' : _f, rootProps = __rest(props, ["page", "classes", "className", "disabled", "nextDisabled", "nextIconButtonProps", "onPageChange", "previousDisabled", "previousIconButtonProps", "size", "sx", "totalPages", "previousButtonLabel", "nextButtonLabel"]);
     var classes = (0, classes_1.useMergedClasses)(pager_classes_1.pagerClasses, pager_classes_1.getPagerUtilityClass, propClasses);
     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, 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: previousButtonLabel }, 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, 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: nextButtonLabel }, previousIconButtonProps),
             React.createElement(icon_1.ChevronRightIcon, null))));
 });

package/pagination/pagination.d.ts

@@ -12,6 +12,8 @@ export type IPaginationProps = IStyledComponentProps<{
         onPageChanged(page: number): void;
         PagerProps?: Partial<IPagerProps>;
         classes?: Partial<PaginationClasses>;
+        nextButtonLabel?: string;
+        previousButtonLabel?: string;
     };
     defaultComponent: 'fieldset';
 }>;
@@ -24,4 +26,6 @@ export declare const Pagination: React.ForwardRefExoticComponent<{
     onPageChanged(page: number): void;
     PagerProps?: Partial<IPagerProps> | undefined;
     classes?: Partial<Record<"root" | "pageSelect" | "pageLabelText" | "pager", string>> | undefined;
-} & Omit<React.DetailedHTMLProps<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref" | "disabled" | "page" | "classes" | "items" | "showPageSelection" | "perPage" | "onPageChanged" | "PagerProps"> & import("../styled").IStyledCommonProps & React.RefAttributes<HTMLFieldSetElement>>;
+    nextButtonLabel?: string | undefined;
+    previousButtonLabel?: string | undefined;
+} & Omit<React.DetailedHTMLProps<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref" | "disabled" | "page" | "classes" | "items" | "previousButtonLabel" | "nextButtonLabel" | "showPageSelection" | "perPage" | "onPageChanged" | "PagerProps"> & import("../styled").IStyledCommonProps & React.RefAttributes<HTMLFieldSetElement>>;

package/pagination/pagination.js

@@ -90,7 +90,7 @@ var changePageIfAppropriate = function (_a) {
     }
 };
 exports.Pagination = React.forwardRef(function (props, ref) {
-    var children = props.children, className = props.className, page = props.page, perPage = props.perPage, items = props.items, _a = props.showPageSelection, showPageSelection = _a === void 0 ? false : _a, onPageChanged = props.onPageChanged, disabled = props.disabled, propClasses = props.classes, _b = props.PagerProps, PagerProps = _b === void 0 ? {} : _b, rootProps = __rest(props, ["children", "className", "page", "perPage", "items", "showPageSelection", "onPageChanged", "disabled", "classes", "PagerProps"]);
+    var children = props.children, className = props.className, page = props.page, perPage = props.perPage, items = props.items, _a = props.showPageSelection, showPageSelection = _a === void 0 ? false : _a, onPageChanged = props.onPageChanged, disabled = props.disabled, propClasses = props.classes, _b = props.nextButtonLabel, nextButtonLabel = _b === void 0 ? 'Next Page' : _b, _c = props.previousButtonLabel, previousButtonLabel = _c === void 0 ? 'Previous Page' : _c, _d = props.PagerProps, PagerProps = _d === void 0 ? {} : _d, rootProps = __rest(props, ["children", "className", "page", "perPage", "items", "showPageSelection", "onPageChanged", "disabled", "classes", "nextButtonLabel", "previousButtonLabel", "PagerProps"]);
     var classes = (0, classes_1.useMergedClasses)(pagination_classes_1.paginationClasses, pagination_classes_1.getPaginationUtilityClass, propClasses);
     var pages = pagesFromItems(items, perPage);
     var pageOptions = React.useMemo(function () {
@@ -135,5 +135,5 @@ exports.Pagination = React.forwardRef(function (props, ref) {
                     " of ",
                     items))),
             React.createElement(stack_layout_1.StackLayoutItem, null,
-                React.createElement(pager_1.Pager, __assign({ page: page, className: classes.pager, onPageChange: function (nextPage) { return changePageIfAppropriate({ nextPage: nextPage, total: items, perPage: perPage, onPageChanged: onPageChanged }); }, totalPages: pages, disabled: disabled }, PagerProps))))))));
+                React.createElement(pager_1.Pager, __assign({ page: page, className: classes.pager, onPageChange: function (nextPage) { return changePageIfAppropriate({ nextPage: nextPage, total: items, perPage: perPage, onPageChanged: onPageChanged }); }, totalPages: pages, disabled: disabled }, PagerProps, { previousButtonLabel: previousButtonLabel, nextButtonLabel: nextButtonLabel }))))))));
 });

package/panel/panel/panel.d.ts

@@ -16,6 +16,8 @@ export type IPanelProps = IStyledComponentProps<{
         children?: React.ReactNode;
         /** Event fired when panel tries to close. */
         onClose?(event: React.MouseEvent<HTMLButtonElement>, reason: 'closeButtonClick'): void;
+        /** convenience prop for rendering the label for close button with a Panel component */
+        closeButtonLabel?: string;
         classes?: Partial<PanelClasses>;
         closeIconButtonProps?: Partial<IIconButtonProps>;
         PanelHeaderProps?: Partial<IPanelHeaderProps>;
@@ -29,7 +31,9 @@ export declare const Panel: React.ForwardRefExoticComponent<Partial<IPanelOwnerS
     children?: React.ReactNode;
     /** Event fired when panel tries to close. */
     onClose?(event: React.MouseEvent<HTMLButtonElement>, reason: 'closeButtonClick'): void;
+    /** convenience prop for rendering the label for close button with a Panel component */
+    closeButtonLabel?: string | undefined;
     classes?: Partial<Record<"fixed" | "content" | "open" | "root" | "sizeSmall" | "sizeMedium" | "sizeLarge" | "closeButton" | "variantFloating" | "variantPersistent" | "variantPermanent" | "placementStart" | "placementEnd", string>> | undefined;
     closeIconButtonProps?: Partial<IIconButtonProps<"button", {}>> | undefined;
     PanelHeaderProps?: Partial<IPanelHeaderProps> | undefined;
-} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "title" | "ref" | "size" | "classes" | "children" | "variant" | "onClose" | "placement" | "offsetTop" | "isOpen" | "isFixed" | "closeIconButtonProps" | "PanelHeaderProps"> & import("../../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "title" | "ref" | "size" | "classes" | "children" | "variant" | "onClose" | "placement" | "offsetTop" | "closeButtonLabel" | "isOpen" | "isFixed" | "closeIconButtonProps" | "PanelHeaderProps"> & import("../../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;