@auth0/quantum-product 2.4.8 → 2.4.9

package/accordion/accordion-details.js

@@ -17,6 +17,6 @@ exports.AccordionDetails = (0, styled_1.styled)(AccordionDetails_1.default, {
         gridTemplateColumns: '40% repeat(4, 15%)',
         padding: "0px ".concat(theme.spacing(2)),
         borderBottom: "1px solid ".concat(theme.tokens.color_border_default),
-        height: theme.typography.pxToRem(72),
+        minHeight: theme.typography.pxToRem(72),
     };
 });

package/alert/alert.js

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

package/avatar-block/avatar-block.d.ts

@@ -10,6 +10,7 @@ export type IAvatarBlockProps = IStyledComponentProps<{
         TitleBlockProps?: Partial<ITitleBlockProps>;
         classes?: Partial<AvatarBlockClasses>;
         endAdornment?: React.ReactNode;
+        noWrap?: boolean;
     };
     defaultComponent: 'div';
 }>;
@@ -19,4 +20,5 @@ export declare const AvatarBlock: React.ForwardRefExoticComponent<Pick<ITitleBlo
     TitleBlockProps?: Partial<ITitleBlockProps> | undefined;
     classes?: Partial<Record<"root" | "avatar" | "endAdornment" | "titleBlock", string>> | undefined;
     endAdornment?: React.ReactNode;
-} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "title" | "ref" | "size" | "classes" | "avatar" | "titleTypographyProps" | "endAdornment" | "description" | "descriptionTypographyProps" | "TitleBlockProps"> & import("../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;
+    noWrap?: boolean | undefined;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "title" | "ref" | "size" | "classes" | "avatar" | "titleTypographyProps" | "noWrap" | "endAdornment" | "description" | "descriptionTypographyProps" | "TitleBlockProps"> & import("../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;

package/avatar-block/avatar-block.js

@@ -85,11 +85,12 @@ var titleVariantMap = {
     large: 'subtitle1',
 };
 exports.AvatarBlock = React.forwardRef(function (props, ref) {
-    var avatar = props.avatar, title = props.title, description = props.description, titleTypographyProps = props.titleTypographyProps, descriptionTypographyProps = props.descriptionTypographyProps, _a = props.TitleBlockProps, TitleBlockProps = _a === void 0 ? {} : _a, className = props.className, _b = props.size, size = _b === void 0 ? 'medium' : _b, endAdornment = props.endAdornment, rootProps = __rest(props, ["avatar", "title", "description", "titleTypographyProps", "descriptionTypographyProps", "TitleBlockProps", "className", "size", "endAdornment"]);
+    var avatar = props.avatar, title = props.title, description = props.description, titleTypographyProps = props.titleTypographyProps, descriptionTypographyProps = props.descriptionTypographyProps, _a = props.TitleBlockProps, TitleBlockProps = _a === void 0 ? {} : _a, className = props.className, _b = props.size, size = _b === void 0 ? 'medium' : _b, endAdornment = props.endAdornment, _c = props.noWrap, noWrap = _c === void 0 ? false : _c, // Default to false
+    rootProps = __rest(props, ["avatar", "title", "description", "titleTypographyProps", "descriptionTypographyProps", "TitleBlockProps", "className", "size", "endAdornment", "noWrap"]);
     var classes = (0, classes_1.useMergedClasses)(avatar_block_classes_1.avatarBlockClasses, avatar_block_classes_1.getAvatarBlockUtilityClass, props.classes);
     var titleVariant = titleVariantMap[size];
     return (React.createElement(Root, __assign({ ownerState: { description: description, size: size }, ref: ref, className: (0, clsx_1.default)(classes.root, className) }, rootProps),
         avatar && React.createElement(Avatar, { className: classes.avatar }, avatar),
-        React.createElement(title_block_1.TitleBlock, __assign({ className: classes.titleBlock, title: title, description: description, titleTypographyProps: __assign({ noWrap: true, component: 'p', variant: titleVariant }, titleTypographyProps), descriptionTypographyProps: descriptionTypographyProps, gutter: size === 'large' ? 0.5 : 0 }, TitleBlockProps, { sx: __assign({ flex: 1 }, TitleBlockProps.sx) })),
+        React.createElement(title_block_1.TitleBlock, __assign({ className: classes.titleBlock, title: title, description: description, titleTypographyProps: __assign({ component: 'p', variant: titleVariant, noWrap: noWrap, title: noWrap && typeof title === 'string' ? title : '' }, titleTypographyProps), descriptionTypographyProps: __assign({ noWrap: noWrap, title: noWrap && typeof description === 'string' ? description : '' }, descriptionTypographyProps), gutter: size === 'large' ? 0.5 : 0 }, TitleBlockProps, { sx: __assign({ flex: 1 }, TitleBlockProps.sx) })),
         !!endAdornment && React.createElement(EndAdornment, { className: classes.endAdornment }, endAdornment)));
 });

package/button/button.d.ts

@@ -13,6 +13,7 @@ export interface IButtonTypeMap<P = {}, D extends React.ElementType = 'button'>
         /** Alternative to using `props.children`. This is a convenience prop for other components using an `action` prop */
         label?: React.ReactNode;
         SpinnerProps?: Partial<ISpinnerProps>;
+        maxWidth?: string;
     };
     defaultComponent: D;
 }

package/button/button.js

@@ -75,10 +75,26 @@ var ButtonSpinner = (0, styled_1.styled)(spinner_1.Spinner, {
 })({
     position: 'absolute',
 });
+var LabelSpan = (0, styled_1.styled)('span')(function (_a) {
+    var maxWidth = _a.maxWidth;
+    return ({
+        display: 'inline-block',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        maxWidth: maxWidth || '100%', // Adjust as needed for non-fullWidth buttons
+    });
+});
 exports.Button = React.forwardRef(function (_a, ref) {
-    var isLoading = _a.isLoading, label = _a.label, children = _a.children, disabled = _a.disabled, _b = _a.SpinnerProps, SpinnerProps = _b === void 0 ? {} : _b, _c = _a.color, color = _c === void 0 ? 'default' : _c, variant = _a.variant, rootProps = __rest(_a, ["isLoading", "label", "children", "disabled", "SpinnerProps", "color", "variant"]);
-    return (React.createElement(Root, __assign({}, rootProps, { disabled: disabled || isLoading, ownerState: { isLoading: isLoading }, color: color, variant: variant, ref: ref }),
-        label || children,
-        " ",
+    var isLoading = _a.isLoading, label = _a.label, children = _a.children, disabled = _a.disabled, _b = _a.SpinnerProps, SpinnerProps = _b === void 0 ? {} : _b, _c = _a.color, color = _c === void 0 ? 'default' : _c, variant = _a.variant, maxWidth = _a.maxWidth, rootProps = __rest(_a, ["isLoading", "label", "children", "disabled", "SpinnerProps", "color", "variant", "maxWidth"]);
+    var title = label ||
+        (typeof children === 'string'
+            ? children
+            : React.Children.toArray(children)
+                .filter(function (child) { return typeof child === 'string'; })
+                .join(''));
+    return (React.createElement(Root, __assign({}, rootProps, { disabled: disabled || isLoading, ownerState: { isLoading: isLoading }, color: color, variant: variant, ref: ref, title: String(title) }),
+        React.createElement(LabelSpan, { style: { maxWidth: rootProps.fullWidth ? 'none' : maxWidth || '100%' } }, label || children),
+        ' ',
         !!isLoading && React.createElement(ButtonSpinner, __assign({}, SpinnerProps))));
 });

package/card/card-header/card-header.d.ts

@@ -43,6 +43,14 @@ export type ICardHeaderProps = IStyledComponentProps<{
          * (as long as disableTypography is not `true`).
          */
         titleTypographyProps?: ITextProps<any>;
+        /**
+         * 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;
     };
     defaultComponent: 'div';
 }>;
@@ -85,4 +93,12 @@ export declare const CardHeader: React.ForwardRefExoticComponent<Partial<ICardCo
      * (as long as disableTypography is not `true`).
      */
     titleTypographyProps?: ITextProps<any> | undefined;
-} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "title" | "ref" | "action" | "size" | "classes" | "avatar" | "disableTypography" | "subheader" | "subheaderTypographyProps" | "titleTypographyProps"> & import("../../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * 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 | undefined;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "title" | "ref" | "action" | "size" | "classes" | "avatar" | "disableTypography" | "subheader" | "subheaderTypographyProps" | "titleTypographyProps" | "noWrap"> & import("../../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;

package/card/card-header/card-header.js

@@ -83,21 +83,35 @@ var titleVariantMap = {
 };
 exports.CardHeader = React.forwardRef(function (props, ref) {
     var sizeContext = (0, card_context_1.useCardContext)().size;
-    var sizeProp = props.size, _a = props.titleTypographyProps, titleTypographyProps = _a === void 0 ? {} : _a, _b = props.subheaderTypographyProps, subheaderTypographyProps = _b === void 0 ? {} : _b, title = props.title, subheader = props.subheader, propClasses = props.classes, cardProps = __rest(props, ["size", "titleTypographyProps", "subheaderTypographyProps", "title", "subheader", "classes"]);
+    var sizeProp = props.size, _a = props.titleTypographyProps, titleTypographyProps = _a === void 0 ? {} : _a, _b = props.subheaderTypographyProps, subheaderTypographyProps = _b === void 0 ? {} : _b, title = props.title, subheader = props.subheader, _c = props.noWrap, noWrap = _c === void 0 ? false : _c, propClasses = props.classes, cardProps = __rest(props, ["size", "titleTypographyProps", "subheaderTypographyProps", "title", "subheader", "noWrap", "classes"]);
     var classes = (0, classes_1.useMergedClasses)(card_header_classes_1.cardHeaderClasses, card_header_classes_1.getCardHeaderUtilityClass, propClasses);
     var size = sizeProp || sizeContext || card_context_1.defaultCardSize;
     var titleVariant = titleVariantMap[size];
+    var titleStyles = noWrap
+        ? {
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+        }
+        : {
+            whiteSpace: 'normal',
+            overflow: 'visible',
+            textOverflow: 'clip', // Don't apply ellipsis
+        }; // No additional styles when noWrap is false
+    var subheaderStyles = noWrap
+        ? {
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+        }
+        : {
+            whiteSpace: 'normal',
+            overflow: 'visible',
+            textOverflow: 'clip', // Don't apply ellipsis
+        };
     return (React.createElement(Root, __assign({ ref: ref, ownerState: { size: size }, classes: {
             action: classes.action,
             avatar: classes.avatar,
             content: classes.content,
-        }, title: React.createElement(Title, __assign({ variant: titleVariant, color: "textPrimary" }, { component: 'p' }, { role: "heading", display: "block" }, titleTypographyProps, { className: (0, clsx_1.default)(classes.title, titleTypographyProps.className), ownerState: { size: size }, noWrap: true, sx: {
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-            }, title: title }), title), subheader: subheader ? (React.createElement(text_1.Text, __assign({ variant: "body2", color: "textSecondary", component: "p", noWrap: true, sx: {
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-            }, title: subheader }, subheaderTypographyProps, { className: (0, clsx_1.default)(classes.subheader, subheaderTypographyProps.className) }), subheader)) : null }, cardProps, { disableTypography: true })));
+        }, title: React.createElement(Title, __assign({ variant: titleVariant, color: "textPrimary" }, { component: 'p' }, { role: "heading", display: "block" }, titleTypographyProps, { className: (0, clsx_1.default)(classes.title, titleTypographyProps.className), ownerState: { size: size }, noWrap: noWrap, sx: titleStyles, title: noWrap ? title : '' }), title), subheader: subheader ? (React.createElement(text_1.Text, __assign({ variant: "body2", color: "textSecondary", component: "p", noWrap: noWrap, sx: subheaderStyles, title: noWrap ? subheader : '' }, subheaderTypographyProps, { className: (0, clsx_1.default)(classes.subheader, subheaderTypographyProps.className) }), subheader)) : null }, cardProps, { disableTypography: true })));
 });

package/chip/chip.js

@@ -82,5 +82,5 @@ var Root = (0, styled_1.styled)(Chip_1.default, { name: exports.chipComponentNam
 });
 exports.Chip = React.forwardRef(function (props, ref) {
     var selected = props.selected, _a = props.deleteIcon, deleteIcon = _a === void 0 ? React.createElement(icon_1.XIcon, null) : _a, chipProps = __rest(props, ["selected", "deleteIcon"]);
-    return React.createElement(Root, __assign({ ref: ref, deleteIcon: deleteIcon, ownerState: { selected: selected } }, chipProps));
+    return (React.createElement(Root, __assign({ ref: ref, deleteIcon: deleteIcon, ownerState: { selected: selected } }, chipProps, { title: props === null || props === void 0 ? void 0 : props.label })));
 });

package/code/code.js

@@ -51,16 +51,17 @@ var styled_1 = require("../styled");
 var text_1 = require("../text");
 exports.CodeComponentName = 'QuantumCode';
 var Root = (0, styled_1.styled)(text_1.Text, { name: exports.CodeComponentName, slot: 'Root' })(function (_a) {
-    var theme = _a.theme;
+    var theme = _a.theme, noWrap = _a.noWrap;
     return ({
         display: 'inline',
         padding: theme.spacing(0.25, 0.75),
         color: theme.tokens.color_fg_default,
         backgroundColor: theme.tokens.color_bg_layer_alternate_bold,
         borderRadius: theme.shape.borderRadius,
+        whiteSpace: noWrap ? 'nowrap' : 'pre-wrap', // Conditionally apply white-space
     });
 });
 exports.Code = React.forwardRef(function (props, ref) {
-    var children = props.children, _a = props.variant, variant = _a === void 0 ? 'code2' : _a, textProps = __rest(props, ["children", "variant"]);
-    return (React.createElement(Root, __assign({ ref: ref }, { component: 'span' }, { color: "textSecondary", variant: variant }, textProps), children));
+    var children = props.children, _a = props.variant, variant = _a === void 0 ? 'code2' : _a, _b = props.noWrap, noWrap = _b === void 0 ? true : _b, textProps = __rest(props, ["children", "variant", "noWrap"]);
+    return (React.createElement(Root, __assign({ ref: ref }, { component: 'span' }, { color: "textSecondary", variant: variant, noWrap: noWrap }, textProps), children));
 });

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

@@ -130,18 +130,18 @@ var validateHex = function (hex) {
     return hexRegex.test(hex);
 };
 exports.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 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(null), 2), error = _b[0], setError = _b[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);
         }
         return normalizeHex(getInitialColor());
-    }, [inputColor, value, placeholder, defaultValue]);
+    }, [inputColor, getInitialColor]);
     var handleTextfieldChange = function (event) {
         var newValue = event.target.value;
         setInputColor(newValue);
@@ -149,10 +149,10 @@ exports.ColorTextField = React.forwardRef(function (props, ref) {
     var handleTextfieldBlur = function (event) {
         var _a, _b;
         if (!validateHex(event.target.value)) {
-            setError('Color is invalid');
+            setInvalidError('Color is invalid');
             return;
         }
-        setError(null);
+        setInvalidError('');
         var newValue = normalizeHex(event.target.value);
         setInputColor(newValue);
         var updatedEvent = __assign(__assign({}, event), { target: __assign(__assign({}, event.target), { value: newValue || normalizedInitialColor }) });
@@ -162,10 +162,10 @@ exports.ColorTextField = React.forwardRef(function (props, ref) {
     var handleColorPickerChange = function (event) {
         var _a, _b;
         if (!validateHex(event.target.value)) {
-            setError('Color is invalid');
+            setInvalidError('Color is invalid');
             return;
         }
-        setError(null);
+        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 }) }));
@@ -174,7 +174,7 @@ exports.ColorTextField = React.forwardRef(function (props, ref) {
     React.useEffect(function () {
         setInputColor(defaultValue);
     }, [defaultValue]);
-    return (React.createElement(Root, __assign({ ref: ref, error: error }, rootProps, { InputProps: {
+    return (React.createElement(Root, __assign({ ref: ref, error: props.error || invalidError }, rootProps, { InputProps: {
             startAdornment: (React.createElement(input_1.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,

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

@@ -1,12 +1,11 @@
 import * as React from 'react';
 import { IIconButtonProps } from '../icon-button';
-export type ICopyButtonProps = IIconButtonProps;
-export declare const CopyButton: React.ForwardRefExoticComponent<{
-    variant?: "link" | "outlined" | "contained" | undefined;
-    shape?: "default" | "circular" | undefined;
-    tooltipPlacement?: "left" | "right" | "bottom" | "top" | "bottom-end" | "bottom-start" | "left-end" | "left-start" | "right-end" | "right-start" | "top-end" | "top-start" | undefined;
-    onTooltipClose?: ((event: Event | React.SyntheticEvent<Element, Event>) => void) | undefined;
-    href?: string | undefined;
-    label: string;
-    target?: string | undefined;
-} & import("@mui/material").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "ref" | "action" | "variant" | "tabIndex" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "href" | keyof import("@mui/material").IconButtonOwnProps | "target" | "shape" | "tooltipPlacement" | "onTooltipClose"> & React.RefAttributes<HTMLButtonElement>>;
+export interface ICopyButtonProps extends IIconButtonProps {
+    /**
+     * Custom label to display on the button after content is copied to the clipboard.
+     *
+     * @default 'Copied!'
+     */
+    copiedLabel?: string;
+}
+export declare const CopyButton: React.ForwardRefExoticComponent<ICopyButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/copy-button/copy-button.js

@@ -66,8 +66,8 @@ var React = __importStar(require("react"));
 var icon_1 = require("../icon");
 var icon_button_1 = require("../icon-button");
 exports.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;
@@ -85,7 +85,7 @@ exports.CopyButton = React.forwardRef(function (_a, ref) {
     };
     var handleClose = function () { return setPressed(false); };
     // use title as the key to force a mount/unmount of the tooltip. This drives the feedback transition.
-    var title = pressed ? 'Copied!' : label;
+    var title = pressed ? copiedLabel : label;
     return (React.createElement(icon_button_1.IconButton, __assign({}, rootProps, { key: title, label: title, onTooltipClose: handleClose, ref: ref, tooltipPlacement: "top", onClick: handleClick }),
         React.createElement(icon_1.CopyIcon, null)));
 });

package/dialog/dialog-title/dialog-title.d.ts

@@ -4,6 +4,7 @@ import { DialogTitleClasses } from './dialog-title-classes';
 export interface IDialogTitleProps extends Omit<DialogTitleProps, 'classes'> {
     disableTypography?: boolean;
     onClose?(event: {}, reason: 'closeClick'): void;
+    closeButtonLabel?: string;
     classes?: Partial<DialogTitleClasses>;
 }
 export declare const DialogTitle: React.ForwardRefExoticComponent<Omit<IDialogTitleProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -68,10 +68,10 @@ var Root = (0, styled_1.styled)(DialogTitle_1.default, {
     justifyContent: 'space-between',
 });
 exports.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 = (0, classes_1.useMergedClasses)(dialog_title_classes_1.dialogTitleClasses, dialog_title_classes_1.getDialogTitleUtilityClass, propClasses);
     return (React.createElement(Root, __assign({}, dialogTitleProps, { className: (0, clsx_1.default)(classes.root, className), ref: ref }),
         disableTypography ? (children) : (React.createElement(text_1.Text, { id: id, className: classes.title, variant: "h5", color: "textPrimary" }, children)),
-        !!onClose && (React.createElement(icon_button_1.IconButton, { shape: "circular", variant: "contained", "aria-label": "Close", size: "small", className: classes.closeButton, onClick: function (event) { return onClose(event, 'closeClick'); }, label: "Close" },
+        !!onClose && (React.createElement(icon_button_1.IconButton, { shape: "circular", variant: "contained", "aria-label": "Close", size: "small", className: classes.closeButton, onClick: function (event) { return onClose(event, 'closeClick'); }, label: closeButtonLabel || 'Close' },
             React.createElement(icon_1.XIcon, null)))));
 });

package/dialog/dialog.d.ts

@@ -10,6 +10,8 @@ export interface IDialogProps extends Omit<DialogProps, 'title' | 'onClose'> {
     disableContentWrap?: boolean;
     /** callback for when the dialog is closed. The reason is given as the second argument */
     onClose?(event: {}, reason: 'backdropClick' | 'escapeKeyDown' | 'closeClick'): void;
+    /** convenience prop for rendering the label for close button with a DialogTitle component */
+    closeButtonLabel?: string;
 }
 export declare const dialogComponentName = "QuantumDialog";
 export declare const Dialog: React.ForwardRefExoticComponent<Omit<IDialogProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dialog/dialog.js

@@ -71,7 +71,7 @@ var Root = (0, styled_1.styled)(Dialog_1.default, {
         _b);
 });
 exports.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 = (0, use_id_1.useId)(props.id);
     var titleId = !!title && !!id ? "".concat(id, "-title") : undefined;
     var handleClose = function (event, reason) {
@@ -83,7 +83,7 @@ exports.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(dialog_title_1.DialogTitle, { id: titleId, onClose: onClose }, title)),
+        !!title && (React.createElement(dialog_title_1.DialogTitle, { id: titleId, onClose: onClose, closeButtonLabel: closeButtonLabel }, title)),
         disableContentWrap ? children : React.createElement(dialog_content_1.DialogContent, null, children),
         !!actions && React.createElement(dialog_actions_1.DialogActions, null, actions)));
 });

package/esm/accordion/accordion-details.js

@@ -11,6 +11,6 @@ export var AccordionDetails = styled(MuiAccordionDetails, {
         gridTemplateColumns: '40% repeat(4, 15%)',
         padding: "0px ".concat(theme.spacing(2)),
         borderBottom: "1px solid ".concat(theme.tokens.color_border_default),
-        height: theme.typography.pxToRem(72),
+        minHeight: theme.typography.pxToRem(72),
     };
 });

package/esm/alert/alert.js

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

package/esm/avatar-block/avatar-block.js

@@ -56,11 +56,12 @@ var titleVariantMap = {
     large: 'subtitle1',
 };
 export var AvatarBlock = React.forwardRef(function (props, ref) {
-    var avatar = props.avatar, title = props.title, description = props.description, titleTypographyProps = props.titleTypographyProps, descriptionTypographyProps = props.descriptionTypographyProps, _a = props.TitleBlockProps, TitleBlockProps = _a === void 0 ? {} : _a, className = props.className, _b = props.size, size = _b === void 0 ? 'medium' : _b, endAdornment = props.endAdornment, rootProps = __rest(props, ["avatar", "title", "description", "titleTypographyProps", "descriptionTypographyProps", "TitleBlockProps", "className", "size", "endAdornment"]);
+    var avatar = props.avatar, title = props.title, description = props.description, titleTypographyProps = props.titleTypographyProps, descriptionTypographyProps = props.descriptionTypographyProps, _a = props.TitleBlockProps, TitleBlockProps = _a === void 0 ? {} : _a, className = props.className, _b = props.size, size = _b === void 0 ? 'medium' : _b, endAdornment = props.endAdornment, _c = props.noWrap, noWrap = _c === void 0 ? false : _c, // Default to false
+    rootProps = __rest(props, ["avatar", "title", "description", "titleTypographyProps", "descriptionTypographyProps", "TitleBlockProps", "className", "size", "endAdornment", "noWrap"]);
     var classes = useMergedClasses(avatarBlockClasses, getAvatarBlockUtilityClass, props.classes);
     var titleVariant = titleVariantMap[size];
     return (React.createElement(Root, __assign({ ownerState: { description: description, size: size }, ref: ref, className: clsx(classes.root, className) }, rootProps),
         avatar && React.createElement(Avatar, { className: classes.avatar }, avatar),
-        React.createElement(TitleBlock, __assign({ className: classes.titleBlock, title: title, description: description, titleTypographyProps: __assign({ noWrap: true, component: 'p', variant: titleVariant }, titleTypographyProps), descriptionTypographyProps: descriptionTypographyProps, gutter: size === 'large' ? 0.5 : 0 }, TitleBlockProps, { sx: __assign({ flex: 1 }, TitleBlockProps.sx) })),
+        React.createElement(TitleBlock, __assign({ className: classes.titleBlock, title: title, description: description, titleTypographyProps: __assign({ component: 'p', variant: titleVariant, noWrap: noWrap, title: noWrap && typeof title === 'string' ? title : '' }, titleTypographyProps), descriptionTypographyProps: __assign({ noWrap: noWrap, title: noWrap && typeof description === 'string' ? description : '' }, descriptionTypographyProps), gutter: size === 'large' ? 0.5 : 0 }, TitleBlockProps, { sx: __assign({ flex: 1 }, TitleBlockProps.sx) })),
         !!endAdornment && React.createElement(EndAdornment, { className: classes.endAdornment }, endAdornment)));
 });

package/esm/button/button.js

@@ -49,10 +49,26 @@ var ButtonSpinner = styled(Spinner, {
 })({
     position: 'absolute',
 });
+var LabelSpan = styled('span')(function (_a) {
+    var maxWidth = _a.maxWidth;
+    return ({
+        display: 'inline-block',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        maxWidth: maxWidth || '100%', // Adjust as needed for non-fullWidth buttons
+    });
+});
 export var Button = React.forwardRef(function (_a, ref) {
-    var isLoading = _a.isLoading, label = _a.label, children = _a.children, disabled = _a.disabled, _b = _a.SpinnerProps, SpinnerProps = _b === void 0 ? {} : _b, _c = _a.color, color = _c === void 0 ? 'default' : _c, variant = _a.variant, rootProps = __rest(_a, ["isLoading", "label", "children", "disabled", "SpinnerProps", "color", "variant"]);
-    return (React.createElement(Root, __assign({}, rootProps, { disabled: disabled || isLoading, ownerState: { isLoading: isLoading }, color: color, variant: variant, ref: ref }),
-        label || children,
-        " ",
+    var isLoading = _a.isLoading, label = _a.label, children = _a.children, disabled = _a.disabled, _b = _a.SpinnerProps, SpinnerProps = _b === void 0 ? {} : _b, _c = _a.color, color = _c === void 0 ? 'default' : _c, variant = _a.variant, maxWidth = _a.maxWidth, rootProps = __rest(_a, ["isLoading", "label", "children", "disabled", "SpinnerProps", "color", "variant", "maxWidth"]);
+    var title = label ||
+        (typeof children === 'string'
+            ? children
+            : React.Children.toArray(children)
+                .filter(function (child) { return typeof child === 'string'; })
+                .join(''));
+    return (React.createElement(Root, __assign({}, rootProps, { disabled: disabled || isLoading, ownerState: { isLoading: isLoading }, color: color, variant: variant, ref: ref, title: String(title) }),
+        React.createElement(LabelSpan, { style: { maxWidth: rootProps.fullWidth ? 'none' : maxWidth || '100%' } }, label || children),
+        ' ',
         !!isLoading && React.createElement(ButtonSpinner, __assign({}, SpinnerProps))));
 });

package/esm/card/card-header/card-header.js

@@ -54,21 +54,35 @@ var titleVariantMap = {
 };
 export var CardHeader = React.forwardRef(function (props, ref) {
     var sizeContext = useCardContext().size;
-    var sizeProp = props.size, _a = props.titleTypographyProps, titleTypographyProps = _a === void 0 ? {} : _a, _b = props.subheaderTypographyProps, subheaderTypographyProps = _b === void 0 ? {} : _b, title = props.title, subheader = props.subheader, propClasses = props.classes, cardProps = __rest(props, ["size", "titleTypographyProps", "subheaderTypographyProps", "title", "subheader", "classes"]);
+    var sizeProp = props.size, _a = props.titleTypographyProps, titleTypographyProps = _a === void 0 ? {} : _a, _b = props.subheaderTypographyProps, subheaderTypographyProps = _b === void 0 ? {} : _b, title = props.title, subheader = props.subheader, _c = props.noWrap, noWrap = _c === void 0 ? false : _c, propClasses = props.classes, cardProps = __rest(props, ["size", "titleTypographyProps", "subheaderTypographyProps", "title", "subheader", "noWrap", "classes"]);
     var classes = useMergedClasses(cardHeaderClasses, getCardHeaderUtilityClass, propClasses);
     var size = sizeProp || sizeContext || defaultCardSize;
     var titleVariant = titleVariantMap[size];
+    var titleStyles = noWrap
+        ? {
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+        }
+        : {
+            whiteSpace: 'normal',
+            overflow: 'visible',
+            textOverflow: 'clip', // Don't apply ellipsis
+        }; // No additional styles when noWrap is false
+    var subheaderStyles = noWrap
+        ? {
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+        }
+        : {
+            whiteSpace: 'normal',
+            overflow: 'visible',
+            textOverflow: 'clip', // Don't apply ellipsis
+        };
     return (React.createElement(Root, __assign({ ref: ref, ownerState: { size: size }, classes: {
             action: classes.action,
             avatar: classes.avatar,
             content: classes.content,
-        }, title: React.createElement(Title, __assign({ variant: titleVariant, color: "textPrimary" }, { component: 'p' }, { role: "heading", display: "block" }, titleTypographyProps, { className: clsx(classes.title, titleTypographyProps.className), ownerState: { size: size }, noWrap: true, sx: {
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-            }, title: title }), title), subheader: subheader ? (React.createElement(Text, __assign({ variant: "body2", color: "textSecondary", component: "p", noWrap: true, sx: {
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-            }, title: subheader }, subheaderTypographyProps, { className: clsx(classes.subheader, subheaderTypographyProps.className) }), subheader)) : null }, cardProps, { disableTypography: true })));
+        }, title: React.createElement(Title, __assign({ variant: titleVariant, color: "textPrimary" }, { component: 'p' }, { role: "heading", display: "block" }, titleTypographyProps, { className: clsx(classes.title, titleTypographyProps.className), ownerState: { size: size }, noWrap: noWrap, sx: titleStyles, title: noWrap ? title : '' }), title), subheader: subheader ? (React.createElement(Text, __assign({ variant: "body2", color: "textSecondary", component: "p", noWrap: noWrap, sx: subheaderStyles, title: noWrap ? subheader : '' }, subheaderTypographyProps, { className: clsx(classes.subheader, subheaderTypographyProps.className) }), subheader)) : null }, cardProps, { disableTypography: true })));
 });

package/esm/chip/chip.js

@@ -56,5 +56,5 @@ var Root = styled(MuiChip, { name: chipComponentName, slot: 'Root' })(function (
 });
 export var Chip = React.forwardRef(function (props, ref) {
     var selected = props.selected, _a = props.deleteIcon, deleteIcon = _a === void 0 ? React.createElement(XIcon, null) : _a, chipProps = __rest(props, ["selected", "deleteIcon"]);
-    return React.createElement(Root, __assign({ ref: ref, deleteIcon: deleteIcon, ownerState: { selected: selected } }, chipProps));
+    return (React.createElement(Root, __assign({ ref: ref, deleteIcon: deleteIcon, ownerState: { selected: selected } }, chipProps, { title: props === null || props === void 0 ? void 0 : props.label })));
 });

package/esm/code/code.js

@@ -25,16 +25,17 @@ import { styled } from '../styled';
 import { Text } from '../text';
 export var CodeComponentName = 'QuantumCode';
 var Root = styled(Text, { name: CodeComponentName, slot: 'Root' })(function (_a) {
-    var theme = _a.theme;
+    var theme = _a.theme, noWrap = _a.noWrap;
     return ({
         display: 'inline',
         padding: theme.spacing(0.25, 0.75),
         color: theme.tokens.color_fg_default,
         backgroundColor: theme.tokens.color_bg_layer_alternate_bold,
         borderRadius: theme.shape.borderRadius,
+        whiteSpace: noWrap ? 'nowrap' : 'pre-wrap', // Conditionally apply white-space
     });
 });
 export var Code = React.forwardRef(function (props, ref) {
-    var children = props.children, _a = props.variant, variant = _a === void 0 ? 'code2' : _a, textProps = __rest(props, ["children", "variant"]);
-    return (React.createElement(Root, __assign({ ref: ref }, { component: 'span' }, { color: "textSecondary", variant: variant }, textProps), children));
+    var children = props.children, _a = props.variant, variant = _a === void 0 ? 'code2' : _a, _b = props.noWrap, noWrap = _b === void 0 ? true : _b, textProps = __rest(props, ["children", "variant", "noWrap"]);
+    return (React.createElement(Root, __assign({ ref: ref }, { component: 'span' }, { color: "textSecondary", variant: variant, noWrap: noWrap }, textProps), children));
 });

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

@@ -104,18 +104,18 @@ var validateHex = function (hex) {
     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 getInitialColor = function () { return value || placeholder || defaultValue || ''; };
+    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(null), 2), error = _b[0], setError = _b[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);
         }
         return normalizeHex(getInitialColor());
-    }, [inputColor, value, placeholder, defaultValue]);
+    }, [inputColor, getInitialColor]);
     var handleTextfieldChange = function (event) {
         var newValue = event.target.value;
         setInputColor(newValue);
@@ -123,10 +123,10 @@ export var ColorTextField = React.forwardRef(function (props, ref) {
     var handleTextfieldBlur = function (event) {
         var _a, _b;
         if (!validateHex(event.target.value)) {
-            setError('Color is invalid');
+            setInvalidError('Color is invalid');
             return;
         }
-        setError(null);
+        setInvalidError('');
         var newValue = normalizeHex(event.target.value);
         setInputColor(newValue);
         var updatedEvent = __assign(__assign({}, event), { target: __assign(__assign({}, event.target), { value: newValue || normalizedInitialColor }) });
@@ -136,10 +136,10 @@ export var ColorTextField = React.forwardRef(function (props, ref) {
     var handleColorPickerChange = function (event) {
         var _a, _b;
         if (!validateHex(event.target.value)) {
-            setError('Color is invalid');
+            setInvalidError('Color is invalid');
             return;
         }
-        setError(null);
+        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 }) }));
@@ -148,7 +148,7 @@ export var ColorTextField = React.forwardRef(function (props, ref) {
     React.useEffect(function () {
         setInputColor(defaultValue);
     }, [defaultValue]);
-    return (React.createElement(Root, __assign({ ref: ref, error: error }, rootProps, { InputProps: {
+    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: colorPicker, onChange: handleColorPickerChange }))),
             value: inputColor,

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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auth0/quantum-product",
-  "version": "2.4.8",
+  "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/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: title }), title),
-        !!description && (React.createElement(text_1.Text, __assign({ variant: "body2", color: "textSecondary", className: title_block_classes_1.titleBlockClasses.description }, descriptionTypographyProps, { title: description }), 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))));
 });