@auth0/quantum-product 2.4.7 → 2.4.9

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

@@ -41,7 +41,30 @@ import { InputAdornment } from '../input';
 import { styled } from '../styled';
 import { TextField } from '../text-field';
 var colorTextFieldComponentName = 'QuantumColorTextField';
-var Root = styled(TextField, { name: colorTextFieldComponentName, slot: 'Root' })({});
+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 ColorPicker = styled('input', { name: colorTextFieldComponentName, slot: 'ColorPicker' })(function (_a) {
     var theme = _a.theme;
     return ({
@@ -55,39 +78,82 @@ 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.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]);
+    if (hex.startsWith('#')) {
+        hex = hex.slice(1);
     }
-    return hex;
+    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);
 };
 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 _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 }) }));
-            }
+    var inputAdornmentProps = props.inputAdornmentProps, value = props.value, defaultValue = props.defaultValue, error = props.error, placeholder = props.placeholder, rootProps = __rest(props, ["inputAdornmentProps", "value", "defaultValue", "error", "placeholder"]);
+    var getInitialColor = React.useCallback(function () { return value || placeholder || defaultValue || ''; }, [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(error || ''), 2), invalidError = _b[0], setInvalidError = _b[1];
+    //Derived state from inputColor (textfield value)
+    var colorPicker = React.useMemo(function () {
+        if (inputColor) {
+            return normalizeHex(inputColor);
         }
-        else {
-            if (props.onChange) {
-                props.onChange(event);
-            }
+        return normalizeHex(getInitialColor());
+    }, [inputColor, getInitialColor]);
+    var handleTextfieldChange = function (event) {
+        var newValue = event.target.value;
+        setInputColor(newValue);
+    };
+    var handleTextfieldBlur = function (event) {
+        var _a, _b;
+        if (!validateHex(event.target.value)) {
+            setInvalidError('Color is invalid');
+            return;
         }
+        setInvalidError('');
+        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);
     };
-    React.useEffect(function () {
-        var newColor = value || placeholder || defaultValue || '#000000';
-        if (newColor) {
-            setColor(normalizeHex(newColor));
+    var handleColorPickerChange = function (event) {
+        var _a, _b;
+        if (!validateHex(event.target.value)) {
+            setInvalidError('Color is invalid');
+            return;
         }
-    }, [value, defaultValue, placeholder]);
-    return (React.createElement(Root, __assign({ ref: ref }, rootProps, { InputProps: {
+        setInvalidError('');
+        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: props.error || invalidError }, 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: color, onChange: handleColorChange }))),
-            value: value,
+                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,
             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

@@ -58,7 +58,7 @@ var StyledLabel = styled('span', {
     shouldForwardProp: function (prop) { return rootShouldForwardProp(prop) && prop !== 'color' && prop !== 'variant'; },
 })(function (_a) {
     var theme = _a.theme, _b = _a.ownerState, _c = _b.color, color = _c === void 0 ? 'default' : _c, _d = _b.variant, variant = _d === void 0 ? 'default' : _d;
-    return (__assign(__assign(__assign(__assign(__assign({}, theme.typography.overline), { padding: theme.spacing(0.25, 0.75), borderRadius: 4, display: 'inline-block', verticalAlign: 'middle' }), (variant === 'default' && __assign(__assign(__assign(__assign(__assign(__assign({}, (color === 'default' && {
+    return (__assign(__assign(__assign(__assign(__assign({}, theme.typography.overline), { padding: theme.spacing(0.25, 0.75), borderRadius: 4, display: 'inline-block', verticalAlign: 'middle', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }), (variant === 'default' && __assign(__assign(__assign(__assign(__assign(__assign({}, (color === 'default' && {
         background: theme.tokens.color_bg_state_neutral_subtle,
         color: theme.tokens.color_fg_on_state_neutral_subtle,
     })), (color === 'primary' && {
@@ -117,5 +117,5 @@ export var Label = React.forwardRef(function (props, ref) {
             variant: variant,
             children: children,
         };
-    return (React.createElement(StyledLabel, __assign({ ref: ref, ownerState: ownerState }, rootProps), ownerState.children));
+    return (React.createElement(StyledLabel, __assign({ title: ownerState.children, ref: ref, ownerState: ownerState }, rootProps), ownerState.children));
 });

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/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/tabs/tab/tab.js

@@ -32,10 +32,20 @@ var AvailabilityLabel = styled(Label)(function (_a) {
         marginLeft: theme.spacing(1),
     });
 });
+var LabelContainer = styled('div')(function (_a) {
+    var width = _a.width, maxWidth = _a.maxWidth;
+    return ({
+        width: width || 'auto',
+        maxWidth: maxWidth || 'none',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+    });
+});
 export var Tab = React.forwardRef(function (_a, ref) {
-    var value = _a.value, productReleaseStage = _a.productReleaseStage, label = _a.label, tabProps = __rest(_a, ["value", "productReleaseStage", "label"]);
-    var _b = useTabsContext(), getTabProps = _b.getTabProps, fullWidth = _b.fullWidth;
+    var value = _a.value, productReleaseStage = _a.productReleaseStage, label = _a.label, _b = _a.sx, sx = _b === void 0 ? {} : _b, tabProps = __rest(_a, ["value", "productReleaseStage", "label", "sx"]);
+    var _c = useTabsContext(), getTabProps = _c.getTabProps, fullWidth = _c.fullWidth;
     return (React.createElement(MuiTab, __assign({ ref: ref }, getTabProps(value), { value: value, label: React.createElement(StackLayout, { gutter: 0 },
-            label,
+            React.createElement(LabelContainer, { width: sx === null || sx === void 0 ? void 0 : sx.width, maxWidth: sx === null || sx === void 0 ? void 0 : sx.maxWidth, title: label }, label),
             productReleaseStage && React.createElement(AvailabilityLabel, { productReleaseStage: productReleaseStage })) }, tabProps, { fullWidth: fullWidth })));
 });

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),
-        !!description && (React.createElement(Text, __assign({ variant: "body2", color: "textSecondary", className: titleBlockClasses.description }, descriptionTypographyProps), 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.js

@@ -84,7 +84,7 @@ var StyledLabel = (0, styled_1.styled)('span', {
     shouldForwardProp: function (prop) { return (0, styled_1.rootShouldForwardProp)(prop) && prop !== 'color' && prop !== 'variant'; },
 })(function (_a) {
     var theme = _a.theme, _b = _a.ownerState, _c = _b.color, color = _c === void 0 ? 'default' : _c, _d = _b.variant, variant = _d === void 0 ? 'default' : _d;
-    return (__assign(__assign(__assign(__assign(__assign({}, theme.typography.overline), { padding: theme.spacing(0.25, 0.75), borderRadius: 4, display: 'inline-block', verticalAlign: 'middle' }), (variant === 'default' && __assign(__assign(__assign(__assign(__assign(__assign({}, (color === 'default' && {
+    return (__assign(__assign(__assign(__assign(__assign({}, theme.typography.overline), { padding: theme.spacing(0.25, 0.75), borderRadius: 4, display: 'inline-block', verticalAlign: 'middle', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }), (variant === 'default' && __assign(__assign(__assign(__assign(__assign(__assign({}, (color === 'default' && {
         background: theme.tokens.color_bg_state_neutral_subtle,
         color: theme.tokens.color_fg_on_state_neutral_subtle,
     })), (color === 'primary' && {
@@ -143,5 +143,5 @@ exports.Label = React.forwardRef(function (props, ref) {
             variant: variant,
             children: children,
         };
-    return (React.createElement(StyledLabel, __assign({ ref: ref, ownerState: ownerState }, rootProps), ownerState.children));
+    return (React.createElement(StyledLabel, __assign({ title: ownerState.children, ref: ref, ownerState: ownerState }, rootProps), ownerState.children));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auth0/quantum-product",
-  "version": "2.4.7",
+  "version": "2.4.9",
   "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/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>>;

package/panel/panel/panel.js

@@ -110,7 +110,7 @@ var CloseButton = (0, styled_1.styled)(icon_button_1.IconButton, {
     right: 24,
 });
 exports.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 = (0, classes_1.useMergedClasses)(panel_classes_1.panelClasses, panel_classes_1.getPanelUtilityClass, propClasses);
     var offsetTop = propOffsetTop != null ? propOffsetTop : isFixed ? 'appbar' : 0;
     var ownerState = {
@@ -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({ 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(icon_1.XIcon, null))),
                 !!title && React.createElement(panel_header_1.PanelHeader, __assign({ title: title }, PanelHeaderProps)),
                 children))));

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

@@ -10,6 +10,7 @@ export type IPanelHeaderProps = IStyledComponentProps<{
         titleTextProps?: Partial<ITextProps>;
         endAdornment?: React.ReactNode;
         classes?: Partial<PanelHeaderClasses>;
+        titleNoWrap?: boolean;
     };
     defaultComponent: 'div';
 }>;
@@ -19,4 +20,5 @@ export declare const PanelHeader: React.ForwardRefExoticComponent<{
     titleTextProps?: Partial<ITextProps<"span">> | undefined;
     endAdornment?: React.ReactNode;
     classes?: Partial<Record<"title" | "content" | "root" | "endAdornment", string>> | undefined;
-} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "title" | "ref" | "classes" | "endAdornment" | "titleComponent" | "titleTextProps"> & import("../../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;
+    titleNoWrap?: boolean | undefined;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "title" | "ref" | "classes" | "endAdornment" | "titleComponent" | "titleTextProps" | "titleNoWrap"> & import("../../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;

package/panel/panel-header/panel-header.js

@@ -77,11 +77,22 @@ var EndAdornment = (0, styled_1.styled)('div')(function (_a) {
     });
 });
 exports.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 = (0, classes_1.useMergedClasses)(panel_header_classes_1.panelHeaderClasses, panel_header_classes_1.getPanelHeaderUtilityClass, propClasses);
     var panelContext = (0, panel_context_1.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: (0, utils_1.clsx)(classes.root, className), ownerState: { isCloseButtonVisible: panelContext.isCloseButtonVisible }, ref: ref }, rootProps),
-        React.createElement(Content, { className: classes.content },
-            React.createElement(text_1.Text, __assign({ className: classes.title, component: titleComponent, variant: "h5" }, titleTextProps), title)),
+        React.createElement(Content, { className: classes.content, sx: textStyles },
+            React.createElement(text_1.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/selectable-card/selectable-card.d.ts

@@ -49,6 +49,14 @@ export interface ISelectableCardProps extends Omit<ICardProps, SelectableControl
      * value. Mainly used for radio control type
      */
     value?: string;
+    /**
+     * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.
+     *
+     * Note that text overflow can only happen with block or inline-block level elements
+     * (the element needs to have a width in order to overflow).
+     * @default false
+     */
+    noWrap?: boolean;
 }
 export declare const SelectableCard: React.ForwardRefExoticComponent<ISelectableCardProps & React.RefAttributes<HTMLLabelElement>>;
 export {};

package/selectable-card/selectable-card.js

@@ -78,9 +78,12 @@ var ControlRadio = createControl(radio_1.Radio, 'ControlRadio');
 var ControlCheckbox = createControl(checkbox_1.Checkbox, 'ControlCheckbox');
 var Content = (0, styled_1.styled)('div', { name: selectable_card_classes_1.selectableCardComponentName, slot: 'Content' })({
     flex: 1,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
 });
 exports.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 = (0, radio_1.useRadioGroup)();
     var classes = (0, classes_1.useMergedClasses)(selectable_card_classes_1.selectableCardClasses, selectable_card_classes_1.getSelectableCardUtilityClass, propClasses);
@@ -90,7 +93,7 @@ exports.SelectableCard = React.forwardRef(function (props, ref) {
     if (radioGroup && checked == null) {
         checked = radioGroup.value === value;
     }
-    var content = children || React.createElement(card_1.CardHeader, { avatar: avatar, title: title, subheader: description });
+    var content = children || React.createElement(card_1.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: (0, clsx_1.default)(classes.root, className), component: "label" }, rootProps),

package/tabs/tab/tab.js

@@ -61,10 +61,20 @@ var AvailabilityLabel = (0, styled_1.styled)(label_1.Label)(function (_a) {
         marginLeft: theme.spacing(1),
     });
 });
+var LabelContainer = (0, styled_1.styled)('div')(function (_a) {
+    var width = _a.width, maxWidth = _a.maxWidth;
+    return ({
+        width: width || 'auto',
+        maxWidth: maxWidth || 'none',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+    });
+});
 exports.Tab = React.forwardRef(function (_a, ref) {
-    var value = _a.value, productReleaseStage = _a.productReleaseStage, label = _a.label, tabProps = __rest(_a, ["value", "productReleaseStage", "label"]);
-    var _b = (0, tabs_context_1.useTabsContext)(), getTabProps = _b.getTabProps, fullWidth = _b.fullWidth;
+    var value = _a.value, productReleaseStage = _a.productReleaseStage, label = _a.label, _b = _a.sx, sx = _b === void 0 ? {} : _b, tabProps = __rest(_a, ["value", "productReleaseStage", "label", "sx"]);
+    var _c = (0, tabs_context_1.useTabsContext)(), getTabProps = _c.getTabProps, fullWidth = _c.fullWidth;
     return (React.createElement(Tab_1.default, __assign({ ref: ref }, getTabProps(value), { value: value, label: React.createElement(stack_layout_1.StackLayout, { gutter: 0 },
-            label,
+            React.createElement(LabelContainer, { width: sx === null || sx === void 0 ? void 0 : sx.width, maxWidth: sx === null || sx === void 0 ? void 0 : sx.maxWidth, title: label }, label),
             productReleaseStage && React.createElement(AvailabilityLabel, { productReleaseStage: productReleaseStage })) }, tabProps, { fullWidth: fullWidth })));
 });

package/text/text.js

@@ -115,8 +115,8 @@ var getComponentForVariant = function (_a) {
     return exports.textVariantMapping[variant];
 };
 exports.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: (0, clsx_1.default)([classes.root, className]) }, { component: component }, rootProps)));
+    return (React.createElement(Root, __assign({ ref: ref, variant: variant, className: (0, clsx_1.default)([classes.root, className]) }, { component: component }, { sx: sx }, rootProps)));
 });

package/title-block/title-block.js

@@ -57,6 +57,6 @@ var title_block_classes_1 = require("./title-block-classes");
 exports.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(row_layout_1.RowLayout, __assign({ gutter: 0, className: (0, clsx_1.default)(title_block_classes_1.titleBlockClasses.root, className) }, rootProps, { ref: ref }),
-        React.createElement(text_1.Text, __assign({ className: title_block_classes_1.titleBlockClasses.title, variant: "subtitle2", color: "inherit" }, titleTypographyProps), title),
-        !!description && (React.createElement(text_1.Text, __assign({ variant: "body2", color: "textSecondary", className: title_block_classes_1.titleBlockClasses.description }, descriptionTypographyProps), description))));
+        React.createElement(text_1.Text, __assign({ className: title_block_classes_1.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_1.Text, __assign({ variant: "body2", color: "textSecondary", className: title_block_classes_1.titleBlockClasses.description }, descriptionTypographyProps, { title: (descriptionTypographyProps === null || descriptionTypographyProps === void 0 ? void 0 : descriptionTypographyProps.noWrap) && typeof title === 'string' ? description : '' }), description))));
 });