@auth0/quantum-product 2.6.0 → 2.7.1

package/esm/date-picker/date-picker-time-input.js

@@ -0,0 +1,336 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import { styled } from '../styled';
+import { TextField } from '../text-field';
+import { datePickerPopoverComponentName } from './date-picker-classes';
+var TimeInputContainer = styled('div', { name: datePickerPopoverComponentName, slot: 'TimeInput' })(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        justifyContent: 'flex-start',
+        gap: theme.spacing(0.5),
+        padding: theme.spacing(1),
+        alignItems: 'center',
+        borderTop: "1px solid ".concat(theme.tokens.color_border_default),
+    });
+});
+var EndTimeInputContainer = styled('div', { name: datePickerPopoverComponentName, slot: 'EndTimeInput' })(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        justifyContent: 'flex-start',
+        gap: theme.spacing(0.5),
+        alignItems: 'center',
+        marginLeft: theme.spacing(2),
+    });
+});
+var TimeInput = styled(TextField, { name: datePickerPopoverComponentName, slot: 'TimeInputField' })({
+    minWidth: '3rem',
+    width: '3rem',
+    '& .MuiOutlinedInput-input': {
+        textAlign: 'center',
+    },
+});
+var TimeInputLabel = styled('span', { name: datePickerPopoverComponentName, slot: 'TimeInputLabel' })(function (_a) {
+    var theme = _a.theme;
+    return ({
+        color: theme.tokens.color_fg_default,
+        fontSize: theme.typography.caption.fontSize,
+    });
+});
+export var DatePickerTimeInput = React.forwardRef(function (props, ref) {
+    var startTime = props.startTime, endTime = props.endTime, _a = props.isRangeSelection, isRangeSelection = _a === void 0 ? false : _a, onStartTimeChange = props.onStartTimeChange, onEndTimeChange = props.onEndTimeChange, onClear = props.onClear;
+    // Refs for time input navigation
+    var hoursRef = React.useRef(null);
+    var minutesRef = React.useRef(null);
+    var secondsRef = React.useRef(null);
+    var endHoursRef = React.useRef(null);
+    var endMinutesRef = React.useRef(null);
+    var endSecondsRef = React.useRef(null);
+    var handleTimeChange = function (value, timeType, field, max) {
+        var _a, _b;
+        var numValue = value.replace(/\D/g, '');
+        var parsed = parseInt(numValue, 10);
+        var newValue = '00';
+        if (!isNaN(parsed) && parsed >= 0 && parsed <= max) {
+            newValue = parsed.toString().padStart(2, '0');
+        }
+        else if (value === '') {
+            newValue = '00';
+        }
+        if (timeType === 'start') {
+            var newTime = __assign(__assign({}, startTime), (_a = {}, _a[field] = newValue, _a));
+            onStartTimeChange(newTime);
+        }
+        else if (timeType === 'end' && endTime && onEndTimeChange) {
+            var newTime = __assign(__assign({}, endTime), (_b = {}, _b[field] = newValue, _b));
+            onEndTimeChange(newTime);
+        }
+    };
+    var clearAllTimeInputs = React.useCallback(function () {
+        var clearedTime = { hours: '00', minutes: '00', seconds: '00' };
+        onStartTimeChange(clearedTime);
+        if (isRangeSelection && onEndTimeChange) {
+            onEndTimeChange(clearedTime);
+        }
+        onClear === null || onClear === void 0 ? void 0 : onClear();
+        setTimeout(function () {
+            var _a, _b;
+            (_a = hoursRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            (_b = hoursRef.current) === null || _b === void 0 ? void 0 : _b.setSelectionRange(0, 0);
+        }, 0);
+    }, [onStartTimeChange, onEndTimeChange, onClear, isRangeSelection]);
+    var handleArrowKeys = function (e, config, target, isAtStart, isAtEnd) {
+        var _a, _b;
+        switch (e.key) {
+            case 'ArrowUp': {
+                e.preventDefault();
+                var upValue = parseInt(config.currentValue, 10) || 0;
+                var newUpValue = upValue === config.max ? 0 : upValue + 1;
+                var newValueStr = newUpValue.toString().padStart(2, '0');
+                handleTimeChange(newValueStr, config.timeType, config.field, config.max);
+                break;
+            }
+            case 'ArrowDown': {
+                e.preventDefault();
+                var downValue = parseInt(config.currentValue, 10) || 0;
+                var newDownValue = downValue === 0 ? config.max : downValue - 1;
+                var newValueStr = newDownValue.toString().padStart(2, '0');
+                handleTimeChange(newValueStr, config.timeType, config.field, config.max);
+                break;
+            }
+            case 'ArrowRight':
+                if (isAtEnd && ((_a = config.nextRef) === null || _a === void 0 ? void 0 : _a.current)) {
+                    e.preventDefault();
+                    config.nextRef.current.focus();
+                    config.nextRef.current.setSelectionRange(0, 0);
+                }
+                break;
+            case 'ArrowLeft':
+                if (isAtStart && ((_b = config.prevRef) === null || _b === void 0 ? void 0 : _b.current)) {
+                    e.preventDefault();
+                    config.prevRef.current.focus();
+                    config.prevRef.current.setSelectionRange(2, 2);
+                }
+                break;
+        }
+    };
+    var handleEditKeys = function (e, config, target, startPos, endPos, isAtStart) {
+        var _a;
+        switch (e.key) {
+            case 'Backspace':
+                if (isAtStart && ((_a = config.prevRef) === null || _a === void 0 ? void 0 : _a.current)) {
+                    e.preventDefault();
+                    config.prevRef.current.focus();
+                    config.prevRef.current.setSelectionRange(2, 2);
+                }
+                else if (startPos === endPos) {
+                    e.preventDefault();
+                    var newPos_1 = Math.max(0, startPos - 1);
+                    var newValue = target.value.substring(0, newPos_1) + '0' + target.value.substring(startPos);
+                    var parsed = parseInt(newValue, 10) || 0;
+                    if (parsed <= config.max) {
+                        handleTimeChange(newValue, config.timeType, config.field, config.max);
+                        setTimeout(function () { return target.setSelectionRange(newPos_1, newPos_1); }, 0);
+                    }
+                }
+                break;
+            case 'Delete':
+                if (startPos === endPos) {
+                    e.preventDefault();
+                    var newValue = target.value.substring(0, startPos) + '0' + target.value.substring(startPos + 1);
+                    var parsed = parseInt(newValue, 10) || 0;
+                    if (parsed <= config.max) {
+                        handleTimeChange(newValue, config.timeType, config.field, config.max);
+                        setTimeout(function () { return target.setSelectionRange(startPos, startPos); }, 0);
+                    }
+                }
+                break;
+        }
+    };
+    var handleNumberInput = function (e, config, target, startPos, endPos) {
+        if (!/^[0-9]$/.test(e.key))
+            return;
+        e.preventDefault();
+        var newValue = target.value;
+        if (startPos === endPos) {
+            if (target.value.length < 2) {
+                newValue = target.value + e.key;
+            }
+            else {
+                newValue = target.value.substring(0, startPos) + e.key + target.value.substring(startPos + 1);
+            }
+        }
+        else {
+            newValue = target.value.substring(0, startPos) + e.key + target.value.substring(endPos);
+        }
+        var parsed = parseInt(newValue, 10) || 0;
+        if (parsed <= config.max) {
+            handleTimeChange(newValue, config.timeType, config.field, config.max);
+            var newPos_2 = Math.min(startPos + 1, 2);
+            setTimeout(function () {
+                var _a;
+                target.setSelectionRange(newPos_2, newPos_2);
+                if (newValue.length === 2 && startPos === 1 && ((_a = config.nextRef) === null || _a === void 0 ? void 0 : _a.current)) {
+                    config.nextRef.current.focus();
+                    config.nextRef.current.setSelectionRange(0, 0);
+                }
+            }, 0);
+        }
+    };
+    var handleTimeKeyDown = function (e, currentValue, timeType, field, max, nextRef, prevRef) {
+        var target = e.target;
+        var selectionStart = target.selectionStart, selectionEnd = target.selectionEnd;
+        var startPos = selectionStart !== null && selectionStart !== void 0 ? selectionStart : 0;
+        var endPos = selectionEnd !== null && selectionEnd !== void 0 ? selectionEnd : 0;
+        var isAtStart = startPos === 0;
+        var isAtEnd = startPos === target.value.length;
+        var config = {
+            currentValue: currentValue,
+            timeType: timeType,
+            field: field,
+            max: max,
+            nextRef: nextRef,
+            prevRef: prevRef,
+        };
+        // Clear all inputs with Cmd/Ctrl + Backspace
+        if (e.key === 'Backspace' && (e.metaKey || e.ctrlKey)) {
+            e.preventDefault();
+            clearAllTimeInputs();
+            return;
+        }
+        if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
+            handleArrowKeys(e, config, target, isAtStart, isAtEnd);
+        }
+        else if (['Backspace', 'Delete'].includes(e.key)) {
+            handleEditKeys(e, config, target, startPos, endPos, isAtStart);
+        }
+        else {
+            handleNumberInput(e, config, target, startPos, endPos);
+        }
+    };
+    var parseTimeFromDigits = function (digitsOnly) {
+        var hours = '00';
+        var minutes = '00';
+        var seconds = '00';
+        if (digitsOnly.length === 6) {
+            hours = Math.min(parseInt(digitsOnly.substring(0, 2), 10), 23)
+                .toString()
+                .padStart(2, '0');
+            minutes = Math.min(parseInt(digitsOnly.substring(2, 4), 10), 59)
+                .toString()
+                .padStart(2, '0');
+            seconds = Math.min(parseInt(digitsOnly.substring(4, 6), 10), 59)
+                .toString()
+                .padStart(2, '0');
+        }
+        else if (digitsOnly.length === 4) {
+            hours = Math.min(parseInt(digitsOnly.substring(0, 2), 10), 23)
+                .toString()
+                .padStart(2, '0');
+            minutes = Math.min(parseInt(digitsOnly.substring(2, 4), 10), 59)
+                .toString()
+                .padStart(2, '0');
+        }
+        else if (digitsOnly.length <= 2) {
+            hours = Math.min(parseInt(digitsOnly, 10), 23).toString().padStart(2, '0');
+        }
+        else {
+            var paddedDigits = digitsOnly.padStart(4, '0');
+            hours = Math.min(parseInt(paddedDigits.substring(0, 2), 10), 23)
+                .toString()
+                .padStart(2, '0');
+            minutes = Math.min(parseInt(paddedDigits.substring(2, 4), 10), 59)
+                .toString()
+                .padStart(2, '0');
+        }
+        return { hours: hours, minutes: minutes, seconds: seconds };
+    };
+    var getFocusTargetAfterPaste = function (digitsOnly, timeType) {
+        var isStart = timeType === 'start';
+        if (digitsOnly.length === 6) {
+            return isStart ? secondsRef : endSecondsRef;
+        }
+        else if (digitsOnly.length === 4) {
+            return isStart ? minutesRef : endMinutesRef;
+        }
+        else if (digitsOnly.length <= 2) {
+            return isStart ? hoursRef : endHoursRef;
+        }
+        else {
+            return isStart ? minutesRef : endMinutesRef;
+        }
+    };
+    var handleTimePaste = function (e, timeType) {
+        e.preventDefault();
+        var pastedText = e.clipboardData.getData('text').trim();
+        var digitsOnly = pastedText.replace(/\D/g, '').substring(0, 6);
+        if (digitsOnly.length === 0)
+            return;
+        var newTime = parseTimeFromDigits(digitsOnly);
+        var focusTargetRef = getFocusTargetAfterPaste(digitsOnly, timeType);
+        if (timeType === 'start') {
+            onStartTimeChange(newTime);
+        }
+        else if (timeType === 'end' && onEndTimeChange) {
+            onEndTimeChange(newTime);
+        }
+        setTimeout(function () {
+            var _a, _b;
+            (_a = focusTargetRef === null || focusTargetRef === void 0 ? void 0 : focusTargetRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            (_b = focusTargetRef === null || focusTargetRef === void 0 ? void 0 : focusTargetRef.current) === null || _b === void 0 ? void 0 : _b.setSelectionRange(2, 2);
+        }, 0);
+    };
+    var getAccessibilityProps = function (timeType, field, value) {
+        var max = field === 'hours' ? 23 : 59;
+        var fieldLabel = field === 'hours' ? 'Hours' : field === 'minutes' ? 'Minutes' : 'Seconds';
+        var typeLabel = isRangeSelection ? (timeType === 'start' ? 'Start time' : 'End time') : 'Time';
+        return {
+            'aria-label': "".concat(typeLabel, " ").concat(fieldLabel.toLowerCase()),
+            'aria-describedby': 'time-input-help',
+            role: 'spinbutton',
+            'aria-valuemin': 0,
+            'aria-valuemax': max,
+            'aria-valuenow': parseInt(value, 10) || 0,
+        };
+    };
+    return (React.createElement(TimeInputContainer, { ref: ref },
+        React.createElement(TimeInputLabel, null, "Time:"),
+        React.createElement(TimeInput, { size: "small", value: startTime.hours, onChange: function (e) { return handleTimeChange(e.target.value, 'start', 'hours', 23); }, inputRef: hoursRef, placeholder: "HH", InputProps: {
+                onKeyDown: function (e) { return handleTimeKeyDown(e, startTime.hours, 'start', 'hours', 23, minutesRef, null); },
+            }, inputProps: __assign({ onPaste: function (e) { return handleTimePaste(e, 'start'); } }, getAccessibilityProps('start', 'hours', startTime.hours)) }),
+        React.createElement("span", null, ":"),
+        React.createElement(TimeInput, { size: "small", value: startTime.minutes, onChange: function (e) { return handleTimeChange(e.target.value, 'start', 'minutes', 59); }, inputRef: minutesRef, placeholder: "MM", InputProps: {
+                onKeyDown: function (e) { return handleTimeKeyDown(e, startTime.minutes, 'start', 'minutes', 59, secondsRef, hoursRef); },
+            }, inputProps: __assign({ onPaste: function (e) { return handleTimePaste(e, 'start'); } }, getAccessibilityProps('start', 'minutes', startTime.minutes)) }),
+        React.createElement("span", null, ":"),
+        React.createElement(TimeInput, { size: "small", value: startTime.seconds, onChange: function (e) { return handleTimeChange(e.target.value, 'start', 'seconds', 59); }, inputRef: secondsRef, placeholder: "SS", InputProps: {
+                onKeyDown: function (e) {
+                    return handleTimeKeyDown(e, startTime.seconds, 'start', 'seconds', 59, isRangeSelection ? endHoursRef : null, minutesRef);
+                },
+            }, inputProps: __assign({ onPaste: function (e) { return handleTimePaste(e, 'start'); } }, getAccessibilityProps('start', 'seconds', startTime.seconds)) }),
+        isRangeSelection && endTime && onEndTimeChange && (React.createElement(EndTimeInputContainer, null,
+            React.createElement(TimeInputLabel, null, "End Time:"),
+            React.createElement(TimeInput, { size: "small", value: endTime.hours, onChange: function (e) { return handleTimeChange(e.target.value, 'end', 'hours', 23); }, inputRef: endHoursRef, placeholder: "HH", InputProps: {
+                    onKeyDown: function (e) { return handleTimeKeyDown(e, endTime.hours, 'end', 'hours', 23, endMinutesRef, secondsRef); },
+                }, inputProps: __assign({ onPaste: function (e) { return handleTimePaste(e, 'end'); } }, getAccessibilityProps('end', 'hours', endTime.hours)) }),
+            React.createElement("span", null, ":"),
+            React.createElement(TimeInput, { size: "small", value: endTime.minutes, onChange: function (e) { return handleTimeChange(e.target.value, 'end', 'minutes', 59); }, inputRef: endMinutesRef, placeholder: "MM", InputProps: {
+                    onKeyDown: function (e) { return handleTimeKeyDown(e, endTime.minutes, 'end', 'minutes', 59, endSecondsRef, endHoursRef); },
+                }, inputProps: __assign({ onPaste: function (e) { return handleTimePaste(e, 'end'); } }, getAccessibilityProps('end', 'minutes', endTime.minutes)) }),
+            React.createElement("span", null, ":"),
+            React.createElement(TimeInput, { size: "small", value: endTime.seconds, onChange: function (e) { return handleTimeChange(e.target.value, 'end', 'seconds', 59); }, inputRef: endSecondsRef, placeholder: "SS", InputProps: {
+                    onKeyDown: function (e) { return handleTimeKeyDown(e, endTime.seconds, 'end', 'seconds', 59, null, endMinutesRef); },
+                }, inputProps: __assign({ onPaste: function (e) { return handleTimePaste(e, 'end'); } }, getAccessibilityProps('end', 'seconds', endTime.seconds)) })))));
+});
+DatePickerTimeInput.displayName = 'DatePickerTimeInput';

package/esm/date-picker/date-picker.js

@@ -52,7 +52,7 @@ var Root = styled('div', { name: datePickerComponentName, slot: 'Root' })({
     width: '100%',
 });
 export var DatePicker = React.forwardRef(function (props, ref) {
-    var value = props.value, onChange = props.onChange, _a = props.dateFormat, dateFormat = _a === void 0 ? 'MM/dd/yyyy' : _a, _b = props.timeFormat, timeFormat = _b === void 0 ? 'HH:mm:ss' : _b, _c = props.placeholder, placeholder = _c === void 0 ? dateFormat + (props.showTimeInput ? ' ' + timeFormat : '') : _c, _d = props.disabled, disabled = _d === void 0 ? false : _d, _e = props.fullWidth, fullWidth = _e === void 0 ? false : _e, _f = props.size, size = _f === void 0 ? 'medium' : _f, _g = props.readOnly, readOnly = _g === void 0 ? false : _g, _h = props.required, required = _h === void 0 ? false : _h, _j = props.error, error = _j === void 0 ? false : _j, helperText = props.helperText, options = props.options, _k = props.isRangeSelection, isRangeSelection = _k === void 0 ? false : _k, _l = props.showTwoMonths, showTwoMonths = _l === void 0 ? false : _l, _m = props.showTimeInput, showTimeInput = _m === void 0 ? false : _m, _o = props.allowTimestampPasting, allowTimestampPasting = _o === void 0 ? false : _o, _p = props.timestampUnit, timestampUnit = _p === void 0 ? 'ms' : _p, _q = props.TextFieldProps, TextFieldProps = _q === void 0 ? {} : _q, propClasses = props.classes, externalState = props.state, rootProps = __rest(props, ["value", "onChange", "dateFormat", "timeFormat", "placeholder", "disabled", "fullWidth", "size", "readOnly", "required", "error", "helperText", "options", "isRangeSelection", "showTwoMonths", "showTimeInput", "allowTimestampPasting", "timestampUnit", "TextFieldProps", "classes", "state"]);
+    var value = props.value, onChange = props.onChange, _a = props.dateFormat, dateFormat = _a === void 0 ? 'MM/dd/yyyy' : _a, _b = props.timeFormat, timeFormat = _b === void 0 ? 'HH:mm:ss' : _b, minDate = props.minDate, maxDate = props.maxDate, _c = props.placeholder, placeholder = _c === void 0 ? dateFormat + (props.showTimeInput ? ' ' + timeFormat : '') : _c, _d = props.disabled, disabled = _d === void 0 ? false : _d, _e = props.fullWidth, fullWidth = _e === void 0 ? false : _e, _f = props.size, size = _f === void 0 ? 'medium' : _f, _g = props.readOnly, readOnly = _g === void 0 ? false : _g, _h = props.required, required = _h === void 0 ? false : _h, _j = props.error, error = _j === void 0 ? false : _j, helperText = props.helperText, options = props.options, _k = props.isRangeSelection, isRangeSelection = _k === void 0 ? false : _k, _l = props.showTwoMonths, showTwoMonths = _l === void 0 ? false : _l, _m = props.showTimeInput, showTimeInput = _m === void 0 ? false : _m, _o = props.allowTimestampPasting, allowTimestampPasting = _o === void 0 ? false : _o, _p = props.timestampUnit, timestampUnit = _p === void 0 ? 'ms' : _p, _q = props.TextFieldProps, TextFieldProps = _q === void 0 ? {} : _q, propClasses = props.classes, externalState = props.state, rootProps = __rest(props, ["value", "onChange", "dateFormat", "timeFormat", "minDate", "maxDate", "placeholder", "disabled", "fullWidth", "size", "readOnly", "required", "error", "helperText", "options", "isRangeSelection", "showTwoMonths", "showTimeInput", "allowTimestampPasting", "timestampUnit", "TextFieldProps", "classes", "state"]);
     var classes = useMergedClasses(datePickerClasses, getDatePickerUtilityClass, propClasses);
     var internalState = useDatePickerState();
     var _r = externalState || internalState, triggerProps = _r.triggerProps, popoverProps = _r.popoverProps;
@@ -118,6 +118,8 @@ export var DatePicker = React.forwardRef(function (props, ref) {
     return (React.createElement(DatePickerContext.Provider, { value: {
             dateFormat: dateFormat,
             timeFormat: timeFormat,
+            minDate: minDate,
+            maxDate: maxDate,
             onSelectDate: handleDateSelect,
             isRangeSelection: isRangeSelection,
             showTimeInput: showTimeInput,
@@ -131,5 +133,5 @@ export var DatePicker = React.forwardRef(function (props, ref) {
                         TextFieldProps.onClick(e);
                     }
                 } }, TextFieldProps)),
-            React.createElement(DatePickerPopover, __assign({}, popoverProps, { onDateSelect: handleDateSelect, options: options, value: displayValue, dateFormat: dateFormat, timeFormat: timeFormat, showTwoMonths: showTwoMonths, isRangeSelection: isRangeSelection, showTimeInput: showTimeInput })))));
+            React.createElement(DatePickerPopover, __assign({}, popoverProps, { onDateSelect: handleDateSelect, options: options, minDate: minDate, maxDate: maxDate, value: displayValue, dateFormat: dateFormat, timeFormat: timeFormat, showTwoMonths: showTwoMonths, isRangeSelection: isRangeSelection, showTimeInput: showTimeInput })))));
 });

package/esm/dropdown-menu/dropdown-menu-list-item/dropdown-menu-list-item.js

@@ -130,7 +130,7 @@ var SelectedIcon = styled('div', { name: dropdownMenuListItemComponentName, slot
     });
 });
 export var DropdownMenuListItem = React.forwardRef(function (props, ref) {
-    var _a = props.component, component = _a === void 0 ? 'button' : _a, title = props.title, children = props.children, description = props.description, startIcon = props.startIcon, endIcon = props.endIcon, className = props.className, selected = props.selected, color = props.color, disabled = props.disabled, propClasses = props.classes, rootProps = __rest(props, ["component", "title", "children", "description", "startIcon", "endIcon", "className", "selected", "color", "disabled", "classes"]);
+    var _a = props.component, component = _a === void 0 ? 'button' : _a, title = props.title, children = props.children, description = props.description, startIcon = props.startIcon, endIcon = props.endIcon, className = props.className, selected = props.selected, color = props.color, disabled = props.disabled, propClasses = props.classes, analyticsId = props.analyticsId, rootProps = __rest(props, ["component", "title", "children", "description", "startIcon", "endIcon", "className", "selected", "color", "disabled", "classes", "analyticsId"]);
     var classes = useMergedClasses(dropdownMenuListItemClasses, getDropdownMenuListItemUtilityClass, propClasses);
     var _b = useDropdownMenuContext(), size = _b.size, onSelectItem = _b.onSelectItem;
     var isDetailed = !!description;
@@ -163,7 +163,7 @@ export var DropdownMenuListItem = React.forwardRef(function (props, ref) {
         color: color,
         disabled: disabled,
     };
-    return (React.createElement(Root, __assign({ selected: selected, onClick: handleItemClick, ownerState: ownerState, className: clsx(classes.root, isDetailed && classes.detailed, className), component: ComponentProp, disabled: disabled, ref: ref, title: typeof titleContent === 'string' ? titleContent : undefined }, rootProps, buttonProps),
+    return (React.createElement(Root, __assign({ selected: selected, onClick: handleItemClick, ownerState: ownerState, className: clsx(classes.root, isDetailed && classes.detailed, className), component: ComponentProp, disabled: disabled, ref: ref, title: typeof titleContent === 'string' ? titleContent : undefined }, rootProps, buttonProps, (analyticsId && { 'data-analytics-id': analyticsId })),
         !!startIcon && React.createElement(StartIcon, { className: clsx(classes.icon, classes.startIcon) }, startIcon),
         React.createElement(Content, { className: classes.content },
             React.createElement(Title, { ownerState: { isDetailed: isDetailed }, className: classes.title }, titleContent),

package/esm/panel/panel/panel-classes.js

@@ -12,6 +12,7 @@ export var panelClasses = generateUtilityClasses(panelComponentName, [
     'sizeSmall',
     'sizeMedium',
     'sizeLarge',
+    'sizeXLarge',
     'placementStart',
     'placementEnd',
     'closeButton',

package/esm/panel/panel/panel.js

@@ -33,6 +33,7 @@ var widthBySize = {
     small: 320,
     medium: 360,
     large: 440,
+    xlarge: 540,
 };
 var Root = styled('div', {
     name: panelComponentName,

package/package.json

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

package/panel/panel/panel-classes.d.ts

@@ -1,5 +1,5 @@
 export declare const panelComponentName: "QuantumPanel";
 export declare function getPanelUtilityClass(slot: string): string;
-export declare const panelClasses: Record<"fixed" | "content" | "open" | "root" | "sizeSmall" | "sizeMedium" | "sizeLarge" | "closeButton" | "variantFloating" | "variantPersistent" | "variantPermanent" | "placementStart" | "placementEnd", string>;
+export declare const panelClasses: Record<"fixed" | "content" | "open" | "root" | "sizeSmall" | "sizeMedium" | "sizeLarge" | "closeButton" | "variantFloating" | "variantPersistent" | "variantPermanent" | "sizeXLarge" | "placementStart" | "placementEnd", string>;
 export type PanelClasses = typeof panelClasses;
 export type PanelClassKey = keyof PanelClasses;

package/panel/panel/panel-classes.js

@@ -16,6 +16,7 @@ exports.panelClasses = (0, classes_1.generateUtilityClasses)(exports.panelCompon
     'sizeSmall',
     'sizeMedium',
     'sizeLarge',
+    'sizeXLarge',
     'placementStart',
     'placementEnd',
     'closeButton',

package/panel/panel/panel.d.ts

@@ -33,7 +33,7 @@ export declare const Panel: React.ForwardRefExoticComponent<Partial<IPanelOwnerS
     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;
+    classes?: Partial<Record<"fixed" | "content" | "open" | "root" | "sizeSmall" | "sizeMedium" | "sizeLarge" | "closeButton" | "variantFloating" | "variantPersistent" | "variantPermanent" | "sizeXLarge" | "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" | "closeButtonLabel" | "isOpen" | "isFixed" | "closeIconButtonProps" | "PanelHeaderProps"> & import("../../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;

package/panel/panel/panel.js

@@ -59,6 +59,7 @@ var widthBySize = {
     small: 320,
     medium: 360,
     large: 440,
+    xlarge: 540,
 };
 var Root = (0, styled_1.styled)('div', {
     name: panel_classes_1.panelComponentName,

package/panel/panel-context.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export type PanelSize = 'small' | 'medium' | 'large';
+export type PanelSize = 'small' | 'medium' | 'large' | 'xlarge';
 export type PanelVariant = 'floating' | 'persistent' | 'permanent';
 export type PanelPlacement = 'start' | 'end';
 export interface IPanelContextValue {