@auth0/quantum-product 2.9.4 → 2.9.7

package/chip/chip.js

@@ -92,5 +92,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, analyticsId = props.analyticsId, chipProps = __rest(props, ["selected", "deleteIcon", "analyticsId"]);
-    return (React.createElement(Root, __assign({ ref: ref, deleteIcon: deleteIcon, ownerState: { selected: selected } }, (analyticsId && { 'data-analytics-id': analyticsId }), chipProps, { title: props === null || props === void 0 ? void 0 : props.label })));
+    return (React.createElement(Root, __assign({ ref: ref, deleteIcon: deleteIcon, ownerState: { selected: selected }, title: props === null || props === void 0 ? void 0 : props.label }, (analyticsId && { 'data-analytics-id': analyticsId }), chipProps)));
 });

package/date-picker/date-picker-popover.js

@@ -108,7 +108,9 @@ var Content = (0, styled_1.styled)(card_1.Card, { name: date_picker_classes_1.da
     var theme = _a.theme, ownerState = _a.ownerState;
     return ({
         maxHeight: 'calc(100% - 96px)',
-        minWidth: theme.typography.pxToRem(180),
+        minWidth: ownerState.currentView === 'options' && ownerState.inputWidth
+            ? "".concat(ownerState.inputWidth, "px")
+            : theme.typography.pxToRem(180),
         width: ownerState.currentView === 'options'
             ? ownerState.inputWidth
                 ? "".concat(ownerState.inputWidth, "px")
@@ -239,23 +241,36 @@ var ButtonContainer = (0, styled_1.styled)(box_1.Box, { name: date_picker_classe
     });
 });
 exports.DatePickerPopover = React.forwardRef(function (props, ref) {
-    var anchorEl = props.anchorEl, open = props.open, onClose = props.onClose, onDateSelect = props.onDateSelect, options = props.options, value = props.value, _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, PopoverProps = props.PopoverProps, _c = props.showTwoMonths, showTwoMonths = _c === void 0 ? false : _c, _d = props.isRangeSelection, isRangeSelection = _d === void 0 ? false : _d, _e = props.showTimeInput, showTimeInput = _e === void 0 ? false : _e, propClasses = props.classes, rootProps = __rest(props, ["anchorEl", "open", "onClose", "onDateSelect", "options", "value", "dateFormat", "timeFormat", "minDate", "maxDate", "PopoverProps", "showTwoMonths", "isRangeSelection", "showTimeInput", "classes"]);
+    var anchorEl = props.anchorEl, open = props.open, onClose = props.onClose, onDateSelect = props.onDateSelect, options = props.options, value = props.value, _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, PopoverProps = props.PopoverProps, _c = props.showTwoMonths, showTwoMonths = _c === void 0 ? false : _c, _d = props.isRangeSelection, isRangeSelection = _d === void 0 ? false : _d, _e = props.showTimeInput, showTimeInput = _e === void 0 ? false : _e, widthRef = props.widthRef, propClasses = props.classes, rootProps = __rest(props, ["anchorEl", "open", "onClose", "onDateSelect", "options", "value", "dateFormat", "timeFormat", "minDate", "maxDate", "PopoverProps", "showTwoMonths", "isRangeSelection", "showTimeInput", "widthRef", "classes"]);
     var classes = (0, classes_1.useMergedClasses)(date_picker_classes_1.datePickerPopoverClasses, date_picker_classes_1.getDatePickerPopoverUtilityClass, propClasses);
-    var _f = __read(React.useState(options ? 'options' : 'calendar'), 2), currentView = _f[0], setCurrentView = _f[1];
+    var isCustomValue = React.useMemo(function () {
+        if (!options || !value)
+            return false;
+        return !options.some(function (option) { return option.value !== 'custom' && option.value === value; });
+    }, [options, value]);
+    var getInitialView = React.useCallback(function () {
+        if (!options)
+            return 'calendar';
+        if (value && isCustomValue)
+            return 'calendar';
+        return 'options';
+    }, [options, value, isCustomValue]);
+    var _f = __read(React.useState(getInitialView()), 2), currentView = _f[0], setCurrentView = _f[1];
     var _g = __read(React.useState({}), 2), rangeSelection = _g[0], setRangeSelection = _g[1];
     var _h = __read(React.useState({ hours: '00', minutes: '00', seconds: '00' }), 2), startTime = _h[0], setStartTime = _h[1];
     var _j = __read(React.useState({ hours: '00', minutes: '00', seconds: '00' }), 2), endTime = _j[0], setEndTime = _j[1];
     var shouldAutoFocusTimeInput = React.useRef(false);
-    // Reset state when popover closes
     React.useEffect(function () {
         if (!open) {
             setRangeSelection({});
-            if (options) {
-                setCurrentView('options');
-            }
+            setCurrentView(getInitialView());
         }
-    }, [open, options]);
-    // Parse and set single date selection when value changes
+    }, [open, getInitialView]);
+    React.useEffect(function () {
+        if (open && options && value && isCustomValue) {
+            setCurrentView('calendar');
+        }
+    }, [open, options, value, isCustomValue]);
     React.useEffect(function () {
         if (!value || isRangeSelection || !open)
             return;
@@ -271,7 +286,7 @@ exports.DatePickerPopover = React.forwardRef(function (props, ref) {
     }, [open, value, isRangeSelection, dateFormat, timeFormat, showTimeInput]);
     // Parse and set range selection when value changes
     React.useEffect(function () {
-        if (!open || !value || !isRangeSelection || !value.includes('-'))
+        if (!open || !value || !isRangeSelection || !value.includes(date_picker_utils_1.DATE_RANGE_SEPARATOR))
             return;
         var _a = (0, date_picker_utils_1.parseDateRange)(value, dateFormat, showTimeInput ? timeFormat : undefined), from = _a.from, to = _a.to;
         if (from && to) {
@@ -307,7 +322,6 @@ exports.DatePickerPopover = React.forwardRef(function (props, ref) {
                     selectedDate = selection.to;
                 }
             }
-            // Apply the selected date if found
             if (selectedDate) {
                 if (showTimeInput) {
                     var newDate = (0, date_picker_utils_1.applyTimeToDate)(selectedDate, startTime);
@@ -320,7 +334,6 @@ exports.DatePickerPopover = React.forwardRef(function (props, ref) {
             }
             return;
         }
-        // Handle range selection mode - with early returns to reduce nesting
         if (!selection.from)
             return;
         if (!selection.to) {
@@ -418,11 +431,14 @@ exports.DatePickerPopover = React.forwardRef(function (props, ref) {
     var canApplyDate = isRangeSelection ? rangeSelection.from && rangeSelection.to : !!rangeSelection.from;
     var _k = __read(React.useState(null), 2), inputWidth = _k[0], setInputWidth = _k[1];
     React.useEffect(function () {
-        if (open && anchorEl) {
-            var width = anchorEl.getBoundingClientRect().width;
-            setInputWidth(width);
+        if (open) {
+            var elementToMeasure = (widthRef === null || widthRef === void 0 ? void 0 : widthRef.current) || anchorEl;
+            if (elementToMeasure) {
+                var width = elementToMeasure.getBoundingClientRect().width;
+                setInputWidth(width);
+            }
         }
-    }, [open, anchorEl]);
+    }, [open, anchorEl, widthRef]);
     var ownerState = {
         showTwoMonths: showTwoMonths,
         isRangeSelection: isRangeSelection,
@@ -433,7 +449,7 @@ exports.DatePickerPopover = React.forwardRef(function (props, ref) {
         }, transformOrigin: {
             vertical: 'top',
             horizontal: 'left',
-        }, marginThreshold: 0, style: { marginTop: '-24px' } }, PopoverProps, rootProps),
+        }, marginThreshold: 0 }, PopoverProps, rootProps),
         React.createElement(Content, { className: classes.content, ownerState: __assign(__assign({}, ownerState), { inputWidth: inputWidth, currentView: currentView }) }, currentView === 'options' && options ? (React.createElement(dropdown_menu_1.DropdownMenuList, null, options.map(function (option, index) { return (React.createElement(dropdown_menu_1.DropdownMenuListItem, { key: index, title: option.text, selected: option.value === value, onClick: function () { return handleOptionSelect(option.value); } })); }))) : (React.createElement(React.Fragment, null,
             React.createElement(CalendarWrapper, { className: classes.calendarWrapper },
                 React.createElement(react_day_picker_1.DayPicker, { mode: "range", selected: selectedValue, onSelect: handleCalendarSelect, showOutsideDays: true, numberOfMonths: showTwoMonths ? 2 : 1, pagedNavigation: showTwoMonths, disabled: __spreadArray(__spreadArray([], __read((minDate ? [{ before: new Date(minDate) }] : [])), false), __read((maxDate ? [{ after: new Date(maxDate) }] : [])), false) })),

package/date-picker/date-picker-state.d.ts

@@ -5,7 +5,7 @@ export interface IDatePickerTriggerProps {
     'aria-haspopup'?: 'dialog';
     'aria-expanded'?: boolean;
     id?: string;
-    onClick(event: React.MouseEvent<HTMLDivElement>): void;
+    onClick(event: React.MouseEvent<HTMLElement>): void;
 }
 export interface IDatePickerStateValue {
     triggerProps: IDatePickerTriggerProps;

package/date-picker/date-picker-types.d.ts

@@ -26,6 +26,7 @@ export interface IDatePickerBaseProps {
     showTimeInput?: boolean;
     allowTimestampPasting?: boolean;
     timestampUnit?: 'ms' | 's';
+    openOnIconOnly?: boolean;
     classes?: Partial<DatePickerClasses>;
 }
 export interface IDatePickerPopoverProps {
@@ -43,5 +44,6 @@ export interface IDatePickerPopoverProps {
     showTwoMonths?: boolean;
     isRangeSelection?: boolean;
     showTimeInput?: boolean;
+    widthRef?: React.RefObject<HTMLElement>;
     classes?: Partial<DatePickerPopoverClasses>;
 }

package/date-picker/date-picker-utils.d.ts

@@ -1,3 +1,4 @@
+export declare const DATE_RANGE_SEPARATOR = " - ";
 /**
  * Formats a date object using the specified format string
  */

package/date-picker/date-picker-utils.js

@@ -27,8 +27,9 @@ var __read = (this && this.__read) || function (o, n) {
     return ar;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.parseSmartDate = exports.applyTimeToDate = exports.extractTimeComponents = exports.formatDateRange = exports.parseDateRange = exports.parseTimestamp = exports.tryParseDate = exports.parseDate = exports.formatDate = void 0;
+exports.parseSmartDate = exports.applyTimeToDate = exports.extractTimeComponents = exports.formatDateRange = exports.parseDateRange = exports.parseTimestamp = exports.tryParseDate = exports.parseDate = exports.formatDate = exports.DATE_RANGE_SEPARATOR = void 0;
 var date_fns_1 = require("date-fns");
+exports.DATE_RANGE_SEPARATOR = ' - ';
 /**
  * Formats a date object using the specified format string
  */
@@ -93,10 +94,10 @@ exports.parseTimestamp = parseTimestamp;
  * Parses a date range string (format: "start - end")
  */
 var parseDateRange = function (rangeString, dateFormat, timeFormat) {
-    if (!rangeString.includes('-')) {
+    if (!rangeString.includes(exports.DATE_RANGE_SEPARATOR)) {
         return { from: null, to: null };
     }
-    var _a = __read(rangeString.split('-').map(function (s) { return s.trim(); }), 2), fromStr = _a[0], toStr = _a[1];
+    var _a = __read(rangeString.split(exports.DATE_RANGE_SEPARATOR).map(function (s) { return s.trim(); }), 2), fromStr = _a[0], toStr = _a[1];
     var fullFormat = timeFormat ? "".concat(dateFormat, " ").concat(timeFormat) : dateFormat;
     var from = (0, exports.parseDate)(fromStr, fullFormat);
     var to = (0, exports.parseDate)(toStr, fullFormat);
@@ -119,7 +120,7 @@ var formatDateRange = function (from, to, dateFormat, timeFormat) {
     if (!to) {
         return (0, exports.formatDate)(from, formatString);
     }
-    return "".concat((0, exports.formatDate)(from, formatString), " - ").concat((0, exports.formatDate)(to, formatString));
+    return "".concat((0, exports.formatDate)(from, formatString)).concat(exports.DATE_RANGE_SEPARATOR).concat((0, exports.formatDate)(to, formatString));
 };
 exports.formatDateRange = formatDateRange;
 /**

package/date-picker/date-picker.js

@@ -77,6 +77,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatePicker = void 0;
 var React = __importStar(require("react"));
 var icon_1 = require("../icon");
+var icon_button_1 = require("../icon-button");
 var styled_1 = require("../styled");
 var classes_1 = require("../styles/classes");
 var text_field_1 = require("../text-field");
@@ -91,12 +92,14 @@ var Root = (0, styled_1.styled)('div', { name: date_picker_classes_1.datePickerC
     width: '100%',
 });
 exports.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, 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 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.openOnIconOnly, openOnIconOnly = _q === void 0 ? false : _q, _r = props.TextFieldProps, TextFieldProps = _r === void 0 ? {} : _r, 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", "openOnIconOnly", "TextFieldProps", "classes", "state"]);
     var classes = (0, classes_1.useMergedClasses)(date_picker_classes_1.datePickerClasses, date_picker_classes_1.getDatePickerUtilityClass, propClasses);
     var internalState = (0, date_picker_state_1.useDatePickerState)();
-    var _r = externalState || internalState, triggerProps = _r.triggerProps, popoverProps = _r.popoverProps;
-    var _s = __read(React.useState(value || ''), 2), displayValue = _s[0], setDisplayValue = _s[1];
+    var _s = externalState || internalState, triggerProps = _s.triggerProps, popoverProps = _s.popoverProps;
+    var _t = __read(React.useState(value || ''), 2), displayValue = _t[0], setDisplayValue = _t[1];
     var inputRef = React.useRef(null);
+    var textFieldRef = React.useRef(null);
+    var _u = __read(React.useState(null), 2), anchorEl = _u[0], setAnchorEl = _u[1];
     React.useEffect(function () {
         setDisplayValue(value || '');
     }, [value]);
@@ -107,9 +110,14 @@ exports.DatePicker = React.forwardRef(function (props, ref) {
             onChange(newValue);
         }
         if (shouldClose) {
+            setAnchorEl(null);
             popoverProps.onClose();
         }
     };
+    var handlePopoverClose = function () {
+        setAnchorEl(null);
+        popoverProps.onClose();
+    };
     var handlePaste = function (event) {
         if (!allowTimestampPasting)
             return;
@@ -164,13 +172,31 @@ exports.DatePicker = React.forwardRef(function (props, ref) {
             showTimeInput: showTimeInput,
         } },
         React.createElement(Root, __assign({ ref: ref, className: (0, clsx_1.default)(classes.root), ownerState: ownerState }, rootProps),
-            React.createElement(text_field_1.TextField, __assign({ value: displayValue, onChange: handleInputChange, onPaste: handlePaste, placeholder: placeholder, disabled: disabled, fullWidth: fullWidth, size: size, readOnly: readOnly, required: required, error: error, helperText: helperText, inputRef: inputRef, endAdornment: React.createElement(icon_1.CalendarIcon, null), className: classes.input }, triggerProps, { onClick: function (e) {
-                    if (!disabled && !readOnly) {
+            React.createElement(text_field_1.TextField, __assign({ ref: textFieldRef, value: displayValue, onChange: handleInputChange, onPaste: handlePaste, placeholder: placeholder, disabled: disabled, fullWidth: fullWidth, size: size, readOnly: readOnly, required: required, error: error, helperText: helperText, inputRef: inputRef, endAdornment: openOnIconOnly ? (React.createElement(icon_button_1.IconButton, { label: "Open calendar", color: "inherit", size: "small", variant: "link", "aria-label": "Open calendar", disabled: disabled, sx: {
+                        padding: 0,
+                        marginRight: '-9px',
+                        borderRadius: 0.25,
+                        '&:focus': {
+                            outline: 'none',
+                            backgroundColor: function (theme) { return theme.tokens.color_bg_button_hover; },
+                        },
+                    }, onClick: function (e) {
+                        e.stopPropagation();
+                        if (!disabled && !readOnly && inputRef.current) {
+                            setAnchorEl(inputRef.current);
+                            triggerProps.onClick(e);
+                        }
+                    } },
+                    React.createElement(icon_1.CalendarIcon, { size: 16 }))) : (React.createElement(icon_1.CalendarIcon, { size: 16 })), className: classes.input }, triggerProps, { onClick: function (e) {
+                    if (!disabled && !readOnly && !openOnIconOnly) {
+                        if (inputRef.current) {
+                            setAnchorEl(inputRef.current);
+                        }
                         triggerProps.onClick(e);
                     }
                     if (TextFieldProps.onClick) {
                         TextFieldProps.onClick(e);
                     }
                 } }, TextFieldProps)),
-            React.createElement(date_picker_popover_1.DatePickerPopover, __assign({}, popoverProps, { onDateSelect: handleDateSelect, options: options, minDate: minDate, maxDate: maxDate, value: displayValue, dateFormat: dateFormat, timeFormat: timeFormat, showTwoMonths: showTwoMonths, isRangeSelection: isRangeSelection, showTimeInput: showTimeInput })))));
+            React.createElement(date_picker_popover_1.DatePickerPopover, __assign({}, popoverProps, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handlePopoverClose, onDateSelect: handleDateSelect, options: options, minDate: minDate, maxDate: maxDate, value: displayValue, dateFormat: dateFormat, timeFormat: timeFormat, showTwoMonths: showTwoMonths, isRangeSelection: isRangeSelection, showTimeInput: showTimeInput, widthRef: textFieldRef })))));
 });

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, analyticsId = props.analyticsId, chipProps = __rest(props, ["selected", "deleteIcon", "analyticsId"]);
-    return (React.createElement(Root, __assign({ ref: ref, deleteIcon: deleteIcon, ownerState: { selected: selected } }, (analyticsId && { 'data-analytics-id': analyticsId }), chipProps, { title: props === null || props === void 0 ? void 0 : props.label })));
+    return (React.createElement(Root, __assign({ ref: ref, deleteIcon: deleteIcon, ownerState: { selected: selected }, title: props === null || props === void 0 ? void 0 : props.label }, (analyticsId && { 'data-analytics-id': analyticsId }), chipProps)));
 });

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

@@ -58,7 +58,7 @@ import { useMergedClasses } from '../styles/classes';
 import clsx from '../utils/clsx';
 import { datePickerPopoverClasses, datePickerPopoverComponentName, getDatePickerPopoverUtilityClass, } from './date-picker-classes';
 import { DatePickerTimeInput } from './date-picker-time-input';
-import { applyTimeToDate, extractTimeComponents, formatDate, formatDateRange, parseDate, parseDateRange, } from './date-picker-utils';
+import { applyTimeToDate, DATE_RANGE_SEPARATOR, extractTimeComponents, formatDate, formatDateRange, parseDate, parseDateRange, } from './date-picker-utils';
 var Root = styled(Popover, { name: datePickerPopoverComponentName, slot: 'Root' })(function (_a) {
     var theme = _a.theme;
     return ({
@@ -69,7 +69,9 @@ var Content = styled(Card, { name: datePickerPopoverComponentName, slot: 'Conten
     var theme = _a.theme, ownerState = _a.ownerState;
     return ({
         maxHeight: 'calc(100% - 96px)',
-        minWidth: theme.typography.pxToRem(180),
+        minWidth: ownerState.currentView === 'options' && ownerState.inputWidth
+            ? "".concat(ownerState.inputWidth, "px")
+            : theme.typography.pxToRem(180),
         width: ownerState.currentView === 'options'
             ? ownerState.inputWidth
                 ? "".concat(ownerState.inputWidth, "px")
@@ -200,23 +202,36 @@ var ButtonContainer = styled(Box, { name: datePickerPopoverComponentName, slot:
     });
 });
 export var DatePickerPopover = React.forwardRef(function (props, ref) {
-    var anchorEl = props.anchorEl, open = props.open, onClose = props.onClose, onDateSelect = props.onDateSelect, options = props.options, value = props.value, _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, PopoverProps = props.PopoverProps, _c = props.showTwoMonths, showTwoMonths = _c === void 0 ? false : _c, _d = props.isRangeSelection, isRangeSelection = _d === void 0 ? false : _d, _e = props.showTimeInput, showTimeInput = _e === void 0 ? false : _e, propClasses = props.classes, rootProps = __rest(props, ["anchorEl", "open", "onClose", "onDateSelect", "options", "value", "dateFormat", "timeFormat", "minDate", "maxDate", "PopoverProps", "showTwoMonths", "isRangeSelection", "showTimeInput", "classes"]);
+    var anchorEl = props.anchorEl, open = props.open, onClose = props.onClose, onDateSelect = props.onDateSelect, options = props.options, value = props.value, _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, PopoverProps = props.PopoverProps, _c = props.showTwoMonths, showTwoMonths = _c === void 0 ? false : _c, _d = props.isRangeSelection, isRangeSelection = _d === void 0 ? false : _d, _e = props.showTimeInput, showTimeInput = _e === void 0 ? false : _e, widthRef = props.widthRef, propClasses = props.classes, rootProps = __rest(props, ["anchorEl", "open", "onClose", "onDateSelect", "options", "value", "dateFormat", "timeFormat", "minDate", "maxDate", "PopoverProps", "showTwoMonths", "isRangeSelection", "showTimeInput", "widthRef", "classes"]);
     var classes = useMergedClasses(datePickerPopoverClasses, getDatePickerPopoverUtilityClass, propClasses);
-    var _f = __read(React.useState(options ? 'options' : 'calendar'), 2), currentView = _f[0], setCurrentView = _f[1];
+    var isCustomValue = React.useMemo(function () {
+        if (!options || !value)
+            return false;
+        return !options.some(function (option) { return option.value !== 'custom' && option.value === value; });
+    }, [options, value]);
+    var getInitialView = React.useCallback(function () {
+        if (!options)
+            return 'calendar';
+        if (value && isCustomValue)
+            return 'calendar';
+        return 'options';
+    }, [options, value, isCustomValue]);
+    var _f = __read(React.useState(getInitialView()), 2), currentView = _f[0], setCurrentView = _f[1];
     var _g = __read(React.useState({}), 2), rangeSelection = _g[0], setRangeSelection = _g[1];
     var _h = __read(React.useState({ hours: '00', minutes: '00', seconds: '00' }), 2), startTime = _h[0], setStartTime = _h[1];
     var _j = __read(React.useState({ hours: '00', minutes: '00', seconds: '00' }), 2), endTime = _j[0], setEndTime = _j[1];
     var shouldAutoFocusTimeInput = React.useRef(false);
-    // Reset state when popover closes
     React.useEffect(function () {
         if (!open) {
             setRangeSelection({});
-            if (options) {
-                setCurrentView('options');
-            }
+            setCurrentView(getInitialView());
         }
-    }, [open, options]);
-    // Parse and set single date selection when value changes
+    }, [open, getInitialView]);
+    React.useEffect(function () {
+        if (open && options && value && isCustomValue) {
+            setCurrentView('calendar');
+        }
+    }, [open, options, value, isCustomValue]);
     React.useEffect(function () {
         if (!value || isRangeSelection || !open)
             return;
@@ -232,7 +247,7 @@ export var DatePickerPopover = React.forwardRef(function (props, ref) {
     }, [open, value, isRangeSelection, dateFormat, timeFormat, showTimeInput]);
     // Parse and set range selection when value changes
     React.useEffect(function () {
-        if (!open || !value || !isRangeSelection || !value.includes('-'))
+        if (!open || !value || !isRangeSelection || !value.includes(DATE_RANGE_SEPARATOR))
             return;
         var _a = parseDateRange(value, dateFormat, showTimeInput ? timeFormat : undefined), from = _a.from, to = _a.to;
         if (from && to) {
@@ -268,7 +283,6 @@ export var DatePickerPopover = React.forwardRef(function (props, ref) {
                     selectedDate = selection.to;
                 }
             }
-            // Apply the selected date if found
             if (selectedDate) {
                 if (showTimeInput) {
                     var newDate = applyTimeToDate(selectedDate, startTime);
@@ -281,7 +295,6 @@ export var DatePickerPopover = React.forwardRef(function (props, ref) {
             }
             return;
         }
-        // Handle range selection mode - with early returns to reduce nesting
         if (!selection.from)
             return;
         if (!selection.to) {
@@ -379,11 +392,14 @@ export var DatePickerPopover = React.forwardRef(function (props, ref) {
     var canApplyDate = isRangeSelection ? rangeSelection.from && rangeSelection.to : !!rangeSelection.from;
     var _k = __read(React.useState(null), 2), inputWidth = _k[0], setInputWidth = _k[1];
     React.useEffect(function () {
-        if (open && anchorEl) {
-            var width = anchorEl.getBoundingClientRect().width;
-            setInputWidth(width);
+        if (open) {
+            var elementToMeasure = (widthRef === null || widthRef === void 0 ? void 0 : widthRef.current) || anchorEl;
+            if (elementToMeasure) {
+                var width = elementToMeasure.getBoundingClientRect().width;
+                setInputWidth(width);
+            }
         }
-    }, [open, anchorEl]);
+    }, [open, anchorEl, widthRef]);
     var ownerState = {
         showTwoMonths: showTwoMonths,
         isRangeSelection: isRangeSelection,
@@ -394,7 +410,7 @@ export var DatePickerPopover = React.forwardRef(function (props, ref) {
         }, transformOrigin: {
             vertical: 'top',
             horizontal: 'left',
-        }, marginThreshold: 0, style: { marginTop: '-24px' } }, PopoverProps, rootProps),
+        }, marginThreshold: 0 }, PopoverProps, rootProps),
         React.createElement(Content, { className: classes.content, ownerState: __assign(__assign({}, ownerState), { inputWidth: inputWidth, currentView: currentView }) }, currentView === 'options' && options ? (React.createElement(DropdownMenuList, null, options.map(function (option, index) { return (React.createElement(DropdownMenuListItem, { key: index, title: option.text, selected: option.value === value, onClick: function () { return handleOptionSelect(option.value); } })); }))) : (React.createElement(React.Fragment, null,
             React.createElement(CalendarWrapper, { className: classes.calendarWrapper },
                 React.createElement(DayPicker, { mode: "range", selected: selectedValue, onSelect: handleCalendarSelect, showOutsideDays: true, numberOfMonths: showTwoMonths ? 2 : 1, pagedNavigation: showTwoMonths, disabled: __spreadArray(__spreadArray([], __read((minDate ? [{ before: new Date(minDate) }] : [])), false), __read((maxDate ? [{ after: new Date(maxDate) }] : [])), false) })),

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

@@ -26,6 +26,7 @@ var __read = (this && this.__read) || function (o, n) {
     return ar;
 };
 import { format, isValid, parse } from 'date-fns';
+export var DATE_RANGE_SEPARATOR = ' - ';
 /**
  * Formats a date object using the specified format string
  */
@@ -86,10 +87,10 @@ export var parseTimestamp = function (timestamp, unit) {
  * Parses a date range string (format: "start - end")
  */
 export var parseDateRange = function (rangeString, dateFormat, timeFormat) {
-    if (!rangeString.includes('-')) {
+    if (!rangeString.includes(DATE_RANGE_SEPARATOR)) {
         return { from: null, to: null };
     }
-    var _a = __read(rangeString.split('-').map(function (s) { return s.trim(); }), 2), fromStr = _a[0], toStr = _a[1];
+    var _a = __read(rangeString.split(DATE_RANGE_SEPARATOR).map(function (s) { return s.trim(); }), 2), fromStr = _a[0], toStr = _a[1];
     var fullFormat = timeFormat ? "".concat(dateFormat, " ").concat(timeFormat) : dateFormat;
     var from = parseDate(fromStr, fullFormat);
     var to = parseDate(toStr, fullFormat);
@@ -111,7 +112,7 @@ export var formatDateRange = function (from, to, dateFormat, timeFormat) {
     if (!to) {
         return formatDate(from, formatString);
     }
-    return "".concat(formatDate(from, formatString), " - ").concat(formatDate(to, formatString));
+    return "".concat(formatDate(from, formatString)).concat(DATE_RANGE_SEPARATOR).concat(formatDate(to, formatString));
 };
 /**
  * Extract time components from a date

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

@@ -38,6 +38,7 @@ var __read = (this && this.__read) || function (o, n) {
 };
 import * as React from 'react';
 import { CalendarIcon } from '../icon';
+import { IconButton } from '../icon-button';
 import { styled } from '../styled';
 import { useMergedClasses } from '../styles/classes';
 import { TextField } from '../text-field';
@@ -52,12 +53,14 @@ 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, 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 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.openOnIconOnly, openOnIconOnly = _q === void 0 ? false : _q, _r = props.TextFieldProps, TextFieldProps = _r === void 0 ? {} : _r, 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", "openOnIconOnly", "TextFieldProps", "classes", "state"]);
     var classes = useMergedClasses(datePickerClasses, getDatePickerUtilityClass, propClasses);
     var internalState = useDatePickerState();
-    var _r = externalState || internalState, triggerProps = _r.triggerProps, popoverProps = _r.popoverProps;
-    var _s = __read(React.useState(value || ''), 2), displayValue = _s[0], setDisplayValue = _s[1];
+    var _s = externalState || internalState, triggerProps = _s.triggerProps, popoverProps = _s.popoverProps;
+    var _t = __read(React.useState(value || ''), 2), displayValue = _t[0], setDisplayValue = _t[1];
     var inputRef = React.useRef(null);
+    var textFieldRef = React.useRef(null);
+    var _u = __read(React.useState(null), 2), anchorEl = _u[0], setAnchorEl = _u[1];
     React.useEffect(function () {
         setDisplayValue(value || '');
     }, [value]);
@@ -68,9 +71,14 @@ export var DatePicker = React.forwardRef(function (props, ref) {
             onChange(newValue);
         }
         if (shouldClose) {
+            setAnchorEl(null);
             popoverProps.onClose();
         }
     };
+    var handlePopoverClose = function () {
+        setAnchorEl(null);
+        popoverProps.onClose();
+    };
     var handlePaste = function (event) {
         if (!allowTimestampPasting)
             return;
@@ -125,13 +133,31 @@ export var DatePicker = React.forwardRef(function (props, ref) {
             showTimeInput: showTimeInput,
         } },
         React.createElement(Root, __assign({ ref: ref, className: clsx(classes.root), ownerState: ownerState }, rootProps),
-            React.createElement(TextField, __assign({ value: displayValue, onChange: handleInputChange, onPaste: handlePaste, placeholder: placeholder, disabled: disabled, fullWidth: fullWidth, size: size, readOnly: readOnly, required: required, error: error, helperText: helperText, inputRef: inputRef, endAdornment: React.createElement(CalendarIcon, null), className: classes.input }, triggerProps, { onClick: function (e) {
-                    if (!disabled && !readOnly) {
+            React.createElement(TextField, __assign({ ref: textFieldRef, value: displayValue, onChange: handleInputChange, onPaste: handlePaste, placeholder: placeholder, disabled: disabled, fullWidth: fullWidth, size: size, readOnly: readOnly, required: required, error: error, helperText: helperText, inputRef: inputRef, endAdornment: openOnIconOnly ? (React.createElement(IconButton, { label: "Open calendar", color: "inherit", size: "small", variant: "link", "aria-label": "Open calendar", disabled: disabled, sx: {
+                        padding: 0,
+                        marginRight: '-9px',
+                        borderRadius: 0.25,
+                        '&:focus': {
+                            outline: 'none',
+                            backgroundColor: function (theme) { return theme.tokens.color_bg_button_hover; },
+                        },
+                    }, onClick: function (e) {
+                        e.stopPropagation();
+                        if (!disabled && !readOnly && inputRef.current) {
+                            setAnchorEl(inputRef.current);
+                            triggerProps.onClick(e);
+                        }
+                    } },
+                    React.createElement(CalendarIcon, { size: 16 }))) : (React.createElement(CalendarIcon, { size: 16 })), className: classes.input }, triggerProps, { onClick: function (e) {
+                    if (!disabled && !readOnly && !openOnIconOnly) {
+                        if (inputRef.current) {
+                            setAnchorEl(inputRef.current);
+                        }
                         triggerProps.onClick(e);
                     }
                     if (TextFieldProps.onClick) {
                         TextFieldProps.onClick(e);
                     }
                 } }, TextFieldProps)),
-            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 })))));
+            React.createElement(DatePickerPopover, __assign({}, popoverProps, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handlePopoverClose, onDateSelect: handleDateSelect, options: options, minDate: minDate, maxDate: maxDate, value: displayValue, dateFormat: dateFormat, timeFormat: timeFormat, showTwoMonths: showTwoMonths, isRangeSelection: isRangeSelection, showTimeInput: showTimeInput, widthRef: textFieldRef })))));
 });

package/esm/icon/index.js

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { styled } from '../styled';
-import { Aa, Activity, Airplane, Airplay, AlertCircle, AlertDiamondFilled, AlertDiamond, AlertOctagon, AlertTriangleFilled, AlertTriangle, AlignCenter, AlignJustify, AlignLeft, AlignRight, Analytics, Anchor, Aperture, ApiServer, Apis, ApplicationPlus, Apps, Archive, ArrowDownCircle, ArrowDownLeft, ArrowDownRight, ArrowDown, ArrowLeftCircle, ArrowLeft, ArrowRightCircle, ArrowRight, ArrowUnsorted, ArrowUpCircle, ArrowUpLeft, ArrowUpRight, ArrowUp, ArrowsH, Asterisk, AtSign, Auth0Logo, Award, BarChart2, BarChart, BarChartAlt, Bars3, BatteryCharging, Battery, BellOff, Bell, Biometrics, Blocks, Bluetooth, Bold, BookOpen, Book, Bookmark, BorderPill, BorderRound, BorderSharp, Borders, Bot, Box, BreachedPassword, Briefcase, Browser, Bug, Building, Calendar, CameraOff, Camera, Card, CaretDown, Cash, Cast, CheckCircleFilled, CheckCircle, CheckSquare, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsDown, ChevronsLeft, ChevronsRight, ChevronsUp, Chrome, Circle, CircleFilled, Clients, ClipboardCheck, Clipboard, Clock, CloudDrizzle, CloudLightning, CloudOff, CloudRain, CloudSnow, Cloud, CodeSandbox, Code, Codepen, Coffee, CollapseLeft, CollapseRight, Color, Columns, Command, Compass, Connection, Copy, CornerDownLeft, CornerDownRight, CornerLeftDown, CornerLeftUp, CornerRightDown, CornerRightUp, CornerUpLeft, CornerUpRight, Cpu, CreditCard, Crop, Crosshair, Database, Delete, Devices, Directory, DirectoryPlus, Disc, DivideCircle, DivideSquare, Divide, DollarSign, DownloadCloud, Download, DragIndicator, Droplet, Edit, Enterprise, ExpandLeft, ExpandRight, ExternalLink, EyeOff, Eye, FastForward, Feather, Figma, FileMinus, FilePlus, FileText, File, Film, Filter, Flag, Flow, FolderCancel, FolderMinus, FolderPlus, Folder, Font, Fonts2, Frame, Framer, Frown, Gift, GitBranch, GitCommit, GitMerge, GitPullRequest, Github, Gitlab, Globe, Grid, HardDrive, Hash, Headphones, Heart, HelpCircle, Help, Hexagon, Home, Hooks, HostedPages, IdTag, Image, Inbox, InfoFilled, Info, Integration, Issuer, Italic, Key, Languages, Layers, LayoutBottom, LayoutCenter, LayoutLeft, LayoutRight, LayoutTop, Layout, LifeBuoy, Lightning, Link2, LinkTilted, Link, List, ListNumbered, Loader, Lock, LogIn, LogOut, Mail, MapPin, Map, Maximize2, Maximize, Medal, Megaphone, Meh, Menu, MessageCircle, MessageSquare, MicOff, Mic, Minimize2, Minimize, MinusCircle, MinusSquare, Minus, Monitor, Moon, MoreHorizontal, MoreVertical, MousePointer, Move, Music, Navigation2, Navigation, Octagon, Organization, Package, PageBackground, PaintBrush, Paint, Paperclip, PauseCircle, Pause, PenTool, Percent, PhoneCall, PhoneForwarded, PhoneIncoming, PhoneMissed, PhoneOff, PhoneOutgoing, PhoneStandard, Phone, PieChart, PlayCircle, Play, PlusCircle, PlusSquare, Plus, Power, Printer, Radio, RecoveryCode, RefreshCcw, RefreshCw, Repeat, Rewind, RichText, RotateCcw, RotateCw, Rss, Save, Scissors, Search, Security, Send, Server, Settings, Share2, Share, ShieldOff, Shield, ShoppingBag, ShoppingCart, Shuffle, Sidebar, SingleSignOn, SkipBack, SkipForward, Slash, Sliders, Smartphone, Smile, Sparkle, Sparkles, Speaker, Square, Star, StopCircle, Store2, Store, Sun, Sunrise, Sunset, Swatch, Table, Tablet, Tag, Target, Terminal, Thermometer, ThumbsDown, ThumbsUp, ToggleLeft, ToggleRight, Tool, Trash, TrendingDown, TrendingUp, Triangle, Truck, Tv, Type, Umbrella, Underline, Unlock, UploadCloud, Upload, UserCheck, UserMinus, UserPlus, UserX, User, Usergroup, Users, VideoOff, Video, Voicemail, Volume1, Volume2, VolumeX, Volume, Watch, WebAuthnPlatform, WebAuthn, Widget2, Widget, WifiOff, Wifi, Wind, XCircleFilled, XCircle, XOctagon, XSquare, X, XLarge, ZapOff, Zap, ZoomIn, ZoomOut, } from '@auth0/quantum-icons';
+import { Aa, Activity, Airplane, Airplay, AlertCircle, AlertDiamondFilled, AlertDiamond, AlertOctagon, AlertTriangleFilled, AlertTriangle, AlignCenter, AlignJustify, AlignLeft, AlignRight, Analytics, Anchor, Aperture, ApiServer, Apis, ApplicationPlus, Apps, Archive, ArrowDownCircle, ArrowDownLeft, ArrowDownRight, ArrowDown, ArrowLeftCircle, ArrowLeft, ArrowRightCircle, ArrowRight, ArrowUnsorted, ArrowUpCircle, ArrowUpLeft, ArrowUpRight, ArrowUp, ArrowsH, Asterisk, AtSign, Auth0Logo, Award, BarChart2, BarChart, BarChartAlt, Bars3, BatteryCharging, Battery, BellOff, Bell, Biometrics, Blocks, Bluetooth, Bold, BookOpen, Book, Bookmark, BorderPill, BorderRound, BorderSharp, Borders, Bot, Box, BreachedPassword, Briefcase, Browser, Bug, Building, Calendar, CameraOff, Camera, Card, CaretDown, Cash, Cast, CheckCircleFilled, CheckCircle, CheckSquare, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsDown, ChevronsLeft, ChevronsRight, ChevronsUp, Chrome, Circle, CircleFilled, Clients, ClipboardCheck, Clipboard, Clock, CloudDrizzle, CloudLightning, CloudOff, CloudRain, CloudSnow, Cloud, CodeSandbox, Code, CodeBracket, Codepen, Coffee, CollapseLeft, CollapseRight, Color, Columns, Command, Compass, Connection, Copy, CornerDownLeft, CornerDownRight, CornerLeftDown, CornerLeftUp, CornerRightDown, CornerRightUp, CornerUpLeft, CornerUpRight, Cpu, CreditCard, Crop, Crosshair, Database, Delete, Devices, Directory, DirectoryPlus, Disc, DivideCircle, DivideSquare, Divide, DollarSign, DownloadCloud, Download, DragIndicator, Droplet, Edit, Enterprise, ExpandLeft, ExpandRight, ExternalLink, EyeOff, Eye, FastForward, Feather, Figma, FileMinus, FilePlus, FileText, File, Film, Filter, Flag, Flow, FolderCancel, FolderMinus, FolderPlus, Folder, Font, Fonts2, Frame, Framer, Frown, Gift, GitBranch, GitCommit, GitMerge, GitPullRequest, Github, Gitlab, Globe, Grid, HardDrive, Hash, Headphones, Heart, HelpCircle, Help, Hexagon, Home, Hooks, HostedPages, IdTag, Image, Inbox, InfoFilled, Info, Integration, Issuer, Italic, Key, Languages, Layers, LayoutBottom, LayoutCenter, LayoutLeft, LayoutRight, LayoutTop, Layout, LifeBuoy, Lightning, Link2, LinkTilted, Link, List, ListNumbered, Loader, Lock, LogIn, LogOut, Mail, MapPin, Map, Maximize2, Maximize, Medal, Megaphone, Meh, Menu, MessageCircle, MessageSquare, MicOff, Mic, Minimize2, Minimize, MinusCircle, MinusSquare, Minus, Monitor, Moon, MoreHorizontal, MoreVertical, MousePointer, Move, Music, Navigation2, Navigation, Octagon, Organization, Package, PageBackground, PaintBrush, Paint, Paperclip, PauseCircle, Pause, PenTool, Percent, PhoneCall, PhoneForwarded, PhoneIncoming, PhoneMissed, PhoneOff, PhoneOutgoing, PhoneStandard, Phone, PieChart, PlayCircle, Play, PlusCircle, PlusSquare, Plus, Power, Printer, Radio, RecoveryCode, RefreshCcw, RefreshCw, Repeat, Rewind, RichText, RotateCcw, RotateCw, Rss, Save, Scissors, Search, Security, Send, Server, Settings, Share2, Share, ShieldOff, Shield, ShoppingBag, ShoppingCart, Shuffle, Sidebar, SingleSignOn, SkipBack, SkipForward, Slash, Sliders, Smartphone, Smile, Sparkle, Sparkles, Speaker, Square, Star, StopCircle, Store2, Store, Sun, Sunrise, Sunset, Swatch, Table, Tablet, Tag, Target, Terminal, Thermometer, ThumbsDown, ThumbsUp, ToggleLeft, ToggleRight, Tool, Trash, TrendingDown, TrendingUp, Triangle, Truck, Tv, Type, Umbrella, Underline, Unlock, UploadCloud, Upload, UserCheck, UserMinus, UserPlus, UserX, User, Usergroup, Users, VideoOff, Video, Voicemail, Volume1, Volume2, VolumeX, Volume, Watch, WebAuthnPlatform, WebAuthn, Widget2, Widget, WifiOff, Wifi, Wind, XCircleFilled, XCircle, XOctagon, XSquare, X, XLarge, ZapOff, Zap, ZoomIn, ZoomOut, } from '@auth0/quantum-icons';
 import * as React from 'react';
 export * from './types';
 function wrapIcon(QuantumIcon) {
@@ -127,6 +127,7 @@ export var CloudOffIcon = wrapIcon(CloudOff);
 export var CloudRainIcon = wrapIcon(CloudRain);
 export var CloudSnowIcon = wrapIcon(CloudSnow);
 export var CloudIcon = wrapIcon(Cloud);
+export var CodeBracketIcon = wrapIcon(CodeBracket);
 export var CodeSandboxIcon = wrapIcon(CodeSandbox);
 /** @deprecated */
 export var CodesandboxIcon = wrapIcon(CodeSandbox);

package/icon/index.d.ts

@@ -112,6 +112,7 @@ export declare const CloudOffIcon: React.ForwardRefExoticComponent<Omit<IIconPro
 export declare const CloudRainIcon: React.ForwardRefExoticComponent<Omit<IIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export declare const CloudSnowIcon: React.ForwardRefExoticComponent<Omit<IIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export declare const CloudIcon: React.ForwardRefExoticComponent<Omit<IIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export declare const CodeBracketIcon: React.ForwardRefExoticComponent<Omit<IIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export declare const CodeSandboxIcon: React.ForwardRefExoticComponent<Omit<IIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 /** @deprecated */
 export declare const CodesandboxIcon: React.ForwardRefExoticComponent<Omit<IIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;

package/icon/index.js

@@ -49,12 +49,12 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BlocksIcon = exports.BiometricsIcon = exports.BellIcon = exports.BellOffIcon = exports.BatteryIcon = exports.BatteryChargingIcon = exports.Bars3Icon = exports.BarChartAltIcon = exports.BarChartIcon = exports.BarChart2Icon = exports.AwardIcon = exports.Auth0LogoIcon = exports.AtSignIcon = exports.AsteriskIcon = exports.ArrowsHIcon = exports.ArrowUpIcon = exports.ArrowUpRightIcon = exports.ArrowUpLeftIcon = exports.ArrowUpCircleIcon = exports.ArrowUnsortedIcon = exports.ArrowRightIcon = exports.ArrowRightCircleIcon = exports.ArrowLeftIcon = exports.ArrowLeftCircleIcon = exports.ArrowDownIcon = exports.ArrowDownRightIcon = exports.ArrowDownLeftIcon = exports.ArrowDownCircleIcon = exports.ArchiveIcon = exports.AppsIcon = exports.ApplicationPlusIcon = exports.ApisIcon = exports.ApiServerIcon = exports.ApertureIcon = exports.AnchorIcon = exports.AnalyticsIcon = exports.AlignRightIcon = exports.AlignLeftIcon = exports.AlignJustifyIcon = exports.AlignCenterIcon = exports.AlertTriangleIcon = exports.AlertTriangleFilledIcon = exports.AlertOctagonIcon = exports.AlertDiamondIcon = exports.AlertDiamondFilledIcon = exports.AlertCircleIcon = exports.AirplayIcon = exports.AirplaneIcon = exports.AaIcon = exports.ActivityIcon = void 0;
 exports.CloudIcon = exports.CloudSnowIcon = exports.CloudRainIcon = exports.CloudOffIcon = exports.CloudLightningIcon = exports.CloudDrizzleIcon = exports.ClockIcon = exports.ClipboardIcon = exports.ClipboardCheckIcon = exports.ClientsIcon = exports.CircleFilledIcon = exports.CircleIcon = exports.ChromeIcon = exports.ChevronsUpIcon = exports.ChevronsRightIcon = exports.ChevronsLeftIcon = exports.ChevronsDownIcon = exports.ChevronUpIcon = exports.ChevronRightIcon = exports.ChevronLeftIcon = exports.ChevronDownIcon = exports.CheckIcon = exports.CheckSquareIcon = exports.CheckCircleIcon = exports.CheckCircleFilledIcon = exports.CastIcon = exports.CashIcon = exports.CaretDownIcon = exports.CardIcon = exports.CameraIcon = exports.CameraOffIcon = exports.CalendarIcon = exports.BuildingIcon = exports.BugIcon = exports.BrowsersIcon = exports.BrowserIcon = exports.BriefcaseIcon = exports.BreachedPasswordIcon = exports.BoxIcon = exports.BotIcon = exports.BordersIcon = exports.BorderSharpIcon = exports.BorderRoundedIcon = exports.BorderRoundIcon = exports.BorderPillIcon = exports.BookmarkIcon = exports.BookIcon = exports.BookOpenIcon = exports.BoldIcon = exports.BluetoothIcon = void 0;
-exports.FileMinusIcon = exports.FigmaIcon = exports.FeatherIcon = exports.FastForwardIcon = exports.EyeIcon = exports.EyeOffIcon = exports.ExternalLinkIcon = exports.ExpandRightIcon = exports.ExpandLeftIcon = exports.EnterpriseIcon = exports.EditIcon = exports.DropletIcon = exports.DragIndicatorIcon = exports.DownloadIcon = exports.DownloadCloudIcon = exports.DollarSignIcon = exports.DivideIcon = exports.DivideSquareIcon = exports.DivideCircleIcon = exports.DiscIcon = exports.DirectoryPlusIcon = exports.DirectoryIcon = exports.DevicesIcon = exports.DeleteIcon = exports.DatabaseIcon = exports.CrosshairIcon = exports.CropIcon = exports.CreditCardIcon = exports.CpuIcon = exports.CornerUpRightIcon = exports.CornerUpLeftIcon = exports.CornerRightUpIcon = exports.CornerRightDownIcon = exports.CornerLeftUpIcon = exports.CornerLeftDownIcon = exports.CornerDownRightIcon = exports.CornerDownLeftIcon = exports.CopyIcon = exports.ConnectionIcon = exports.CompassIcon = exports.CommandIcon = exports.ColumnsIcon = exports.ColorIcon = exports.CollapseRightIcon = exports.CollapseLeftIcon = exports.CoffeeIcon = exports.CodepenIcon = exports.CodeIcon = exports.CodesandboxIcon = exports.CodeSandboxIcon = void 0;
-exports.LayoutLeftIcon = exports.LayoutCenterIcon = exports.LayoutBottomIcon = exports.LayersIcon = exports.LanguagesIcon = exports.KeyIcon = exports.ItalicIcon = exports.IssuerIcon = exports.IntegrationIcon = exports.InfoIcon = exports.InfoFilledIcon = exports.InboxIcon = exports.ImageIcon = exports.IdTagIcon = exports.HostedPagesIcon = exports.HooksIcon = exports.HomeIcon = exports.HexagonIcon = exports.HelpIcon = exports.HelpCircleIcon = exports.HeartIcon = exports.HeadphonesIcon = exports.HashIcon = exports.HardDriveIcon = exports.GridIcon = exports.GlobeIcon = exports.GitlabIcon = exports.GitHubIcon = exports.GithubIcon = exports.GitPullRequestIcon = exports.GitMergeIcon = exports.GitCommitIcon = exports.GitBranchIcon = exports.GiftIcon = exports.FrownIcon = exports.FramerIcon = exports.FrameIcon = exports.Fonts2Icon = exports.FontIcon = exports.FolderIcon = exports.FolderPlusIcon = exports.FolderMinusIcon = exports.FolderCancelIcon = exports.FlowIcon = exports.FlagIcon = exports.FilterIcon = exports.FilmIcon = exports.FileIcon = exports.FileTextIcon = exports.FilePlusIcon = void 0;
-exports.PauseIcon = exports.PauseCircleIcon = exports.PaperclipIcon = exports.PaintIcon = exports.PaintBrushIcon = exports.PageBackgroundIcon = exports.PackageIcon = exports.OrganizationIcon = exports.OctagonIcon = exports.NavigationIcon = exports.Navigation2Icon = exports.MusicIcon = exports.MoveIcon = exports.MousePointerIcon = exports.MoreVerticalIcon = exports.MoreHorizontalIcon = exports.MoonIcon = exports.MonitorIcon = exports.MinusIcon = exports.MinusSquareIcon = exports.MinusCircleIcon = exports.MinimizeIcon = exports.Minimize2Icon = exports.MicIcon = exports.MicOffIcon = exports.MessageSquareIcon = exports.MessageCircleIcon = exports.MenuIcon = exports.MehIcon = exports.MegaphoneIcon = exports.MedalIcon = exports.MaximizeIcon = exports.Maximize2Icon = exports.MapIcon = exports.MapPinIcon = exports.MailIcon = exports.LogOutIcon = exports.LogInIcon = exports.LockIcon = exports.LoaderIcon = exports.ListNumberedIcon = exports.ListIcon = exports.LinkIcon = exports.LinkTiltedIcon = exports.Link2Icon = exports.LightningIcon = exports.LifeBuoyIcon = exports.LayoutIcon = exports.LayoutTopIcon = exports.LayoutRightIcon = void 0;
-exports.SmileIcon = exports.SmartphoneIcon = exports.SlidersIcon = exports.SlashIcon = exports.SkipForwardIcon = exports.SkipBackIcon = exports.SingleSignOnIcon = exports.SidebarIcon = exports.ShuffleIcon = exports.ShoppingCartIcon = exports.ShoppingBagIcon = exports.ShieldIcon = exports.ShieldOffIcon = exports.ShareIcon = exports.Share2Icon = exports.SettingsIcon = exports.ServerIcon = exports.SendIcon = exports.SecurityIcon = exports.SearchIcon = exports.ScissorsIcon = exports.SaveIcon = exports.RssIcon = exports.RotateCwIcon = exports.RotateCcwIcon = exports.RichTextIcon = exports.RewindIcon = exports.RepeatIcon = exports.RefreshCwIcon = exports.RefreshCcwIcon = exports.RecoveryCodeIcon = exports.RadioIcon = exports.PrinterIcon = exports.PowerIcon = exports.PlusIcon = exports.PlusSquareIcon = exports.PlusCircleIcon = exports.PlayIcon = exports.PlayCircleIcon = exports.PieChartIcon = exports.PhoneIcon = exports.PhoneStandardIcon = exports.PhoneOutgoingIcon = exports.PhoneOffIcon = exports.PhoneMissedIcon = exports.PhoneIncomingIcon = exports.PhoneForwardedIcon = exports.PhoneCallIcon = exports.PercentIcon = exports.PenToolIcon = void 0;
-exports.WatchIcon = exports.VolumeIcon = exports.VolumeXIcon = exports.Volume2Icon = exports.Volume1Icon = exports.VoicemailIcon = exports.VideoIcon = exports.VideoOffIcon = exports.UsersIcon = exports.UsergroupIcon = exports.UserIcon = exports.UserXIcon = exports.UserPlusIcon = exports.UserMinusIcon = exports.UserCheckIcon = exports.UploadIcon = exports.UploadCloudIcon = exports.UnlockIcon = exports.UnderlineIcon = exports.UmbrellaIcon = exports.TypeIcon = exports.TvIcon = exports.TruckIcon = exports.TriangleIcon = exports.TrendingUpIcon = exports.TrendingDownIcon = exports.TrashIcon = exports.ToolIcon = exports.ToggleRightIcon = exports.ToggleLeftIcon = exports.ThumbsUpIcon = exports.ThumbsDownIcon = exports.ThermometerIcon = exports.TerminalIcon = exports.TargetIcon = exports.TagIcon = exports.TabletIcon = exports.TableIcon = exports.SwatchIcon = exports.SunsetIcon = exports.SunriseIcon = exports.SunIcon = exports.StoreIcon = exports.Store2Icon = exports.StopCircleIcon = exports.StarIcon = exports.SquareIcon = exports.SpeakerIcon = exports.SparklesIcon = exports.SparkleIcon = void 0;
-exports.ZoomOutIcon = exports.ZoomInIcon = exports.ZapIcon = exports.ZapOffIcon = exports.XLargeIcon = exports.XIcon = exports.XSquareIcon = exports.XOctagonIcon = exports.XCircleIcon = exports.XCircleFilledIcon = exports.WindIcon = exports.WifiIcon = exports.WifiOffIcon = exports.WidgetIcon = exports.Widget2Icon = exports.WebAuthnIcon = exports.WebAuthnPlatformIcon = void 0;
+exports.FigmaIcon = exports.FeatherIcon = exports.FastForwardIcon = exports.EyeIcon = exports.EyeOffIcon = exports.ExternalLinkIcon = exports.ExpandRightIcon = exports.ExpandLeftIcon = exports.EnterpriseIcon = exports.EditIcon = exports.DropletIcon = exports.DragIndicatorIcon = exports.DownloadIcon = exports.DownloadCloudIcon = exports.DollarSignIcon = exports.DivideIcon = exports.DivideSquareIcon = exports.DivideCircleIcon = exports.DiscIcon = exports.DirectoryPlusIcon = exports.DirectoryIcon = exports.DevicesIcon = exports.DeleteIcon = exports.DatabaseIcon = exports.CrosshairIcon = exports.CropIcon = exports.CreditCardIcon = exports.CpuIcon = exports.CornerUpRightIcon = exports.CornerUpLeftIcon = exports.CornerRightUpIcon = exports.CornerRightDownIcon = exports.CornerLeftUpIcon = exports.CornerLeftDownIcon = exports.CornerDownRightIcon = exports.CornerDownLeftIcon = exports.CopyIcon = exports.ConnectionIcon = exports.CompassIcon = exports.CommandIcon = exports.ColumnsIcon = exports.ColorIcon = exports.CollapseRightIcon = exports.CollapseLeftIcon = exports.CoffeeIcon = exports.CodepenIcon = exports.CodeIcon = exports.CodesandboxIcon = exports.CodeSandboxIcon = exports.CodeBracketIcon = void 0;
+exports.LayoutCenterIcon = exports.LayoutBottomIcon = exports.LayersIcon = exports.LanguagesIcon = exports.KeyIcon = exports.ItalicIcon = exports.IssuerIcon = exports.IntegrationIcon = exports.InfoIcon = exports.InfoFilledIcon = exports.InboxIcon = exports.ImageIcon = exports.IdTagIcon = exports.HostedPagesIcon = exports.HooksIcon = exports.HomeIcon = exports.HexagonIcon = exports.HelpIcon = exports.HelpCircleIcon = exports.HeartIcon = exports.HeadphonesIcon = exports.HashIcon = exports.HardDriveIcon = exports.GridIcon = exports.GlobeIcon = exports.GitlabIcon = exports.GitHubIcon = exports.GithubIcon = exports.GitPullRequestIcon = exports.GitMergeIcon = exports.GitCommitIcon = exports.GitBranchIcon = exports.GiftIcon = exports.FrownIcon = exports.FramerIcon = exports.FrameIcon = exports.Fonts2Icon = exports.FontIcon = exports.FolderIcon = exports.FolderPlusIcon = exports.FolderMinusIcon = exports.FolderCancelIcon = exports.FlowIcon = exports.FlagIcon = exports.FilterIcon = exports.FilmIcon = exports.FileIcon = exports.FileTextIcon = exports.FilePlusIcon = exports.FileMinusIcon = void 0;
+exports.PauseCircleIcon = exports.PaperclipIcon = exports.PaintIcon = exports.PaintBrushIcon = exports.PageBackgroundIcon = exports.PackageIcon = exports.OrganizationIcon = exports.OctagonIcon = exports.NavigationIcon = exports.Navigation2Icon = exports.MusicIcon = exports.MoveIcon = exports.MousePointerIcon = exports.MoreVerticalIcon = exports.MoreHorizontalIcon = exports.MoonIcon = exports.MonitorIcon = exports.MinusIcon = exports.MinusSquareIcon = exports.MinusCircleIcon = exports.MinimizeIcon = exports.Minimize2Icon = exports.MicIcon = exports.MicOffIcon = exports.MessageSquareIcon = exports.MessageCircleIcon = exports.MenuIcon = exports.MehIcon = exports.MegaphoneIcon = exports.MedalIcon = exports.MaximizeIcon = exports.Maximize2Icon = exports.MapIcon = exports.MapPinIcon = exports.MailIcon = exports.LogOutIcon = exports.LogInIcon = exports.LockIcon = exports.LoaderIcon = exports.ListNumberedIcon = exports.ListIcon = exports.LinkIcon = exports.LinkTiltedIcon = exports.Link2Icon = exports.LightningIcon = exports.LifeBuoyIcon = exports.LayoutIcon = exports.LayoutTopIcon = exports.LayoutRightIcon = exports.LayoutLeftIcon = void 0;
+exports.SmartphoneIcon = exports.SlidersIcon = exports.SlashIcon = exports.SkipForwardIcon = exports.SkipBackIcon = exports.SingleSignOnIcon = exports.SidebarIcon = exports.ShuffleIcon = exports.ShoppingCartIcon = exports.ShoppingBagIcon = exports.ShieldIcon = exports.ShieldOffIcon = exports.ShareIcon = exports.Share2Icon = exports.SettingsIcon = exports.ServerIcon = exports.SendIcon = exports.SecurityIcon = exports.SearchIcon = exports.ScissorsIcon = exports.SaveIcon = exports.RssIcon = exports.RotateCwIcon = exports.RotateCcwIcon = exports.RichTextIcon = exports.RewindIcon = exports.RepeatIcon = exports.RefreshCwIcon = exports.RefreshCcwIcon = exports.RecoveryCodeIcon = exports.RadioIcon = exports.PrinterIcon = exports.PowerIcon = exports.PlusIcon = exports.PlusSquareIcon = exports.PlusCircleIcon = exports.PlayIcon = exports.PlayCircleIcon = exports.PieChartIcon = exports.PhoneIcon = exports.PhoneStandardIcon = exports.PhoneOutgoingIcon = exports.PhoneOffIcon = exports.PhoneMissedIcon = exports.PhoneIncomingIcon = exports.PhoneForwardedIcon = exports.PhoneCallIcon = exports.PercentIcon = exports.PenToolIcon = exports.PauseIcon = void 0;
+exports.VolumeIcon = exports.VolumeXIcon = exports.Volume2Icon = exports.Volume1Icon = exports.VoicemailIcon = exports.VideoIcon = exports.VideoOffIcon = exports.UsersIcon = exports.UsergroupIcon = exports.UserIcon = exports.UserXIcon = exports.UserPlusIcon = exports.UserMinusIcon = exports.UserCheckIcon = exports.UploadIcon = exports.UploadCloudIcon = exports.UnlockIcon = exports.UnderlineIcon = exports.UmbrellaIcon = exports.TypeIcon = exports.TvIcon = exports.TruckIcon = exports.TriangleIcon = exports.TrendingUpIcon = exports.TrendingDownIcon = exports.TrashIcon = exports.ToolIcon = exports.ToggleRightIcon = exports.ToggleLeftIcon = exports.ThumbsUpIcon = exports.ThumbsDownIcon = exports.ThermometerIcon = exports.TerminalIcon = exports.TargetIcon = exports.TagIcon = exports.TabletIcon = exports.TableIcon = exports.SwatchIcon = exports.SunsetIcon = exports.SunriseIcon = exports.SunIcon = exports.StoreIcon = exports.Store2Icon = exports.StopCircleIcon = exports.StarIcon = exports.SquareIcon = exports.SpeakerIcon = exports.SparklesIcon = exports.SparkleIcon = exports.SmileIcon = void 0;
+exports.ZoomOutIcon = exports.ZoomInIcon = exports.ZapIcon = exports.ZapOffIcon = exports.XLargeIcon = exports.XIcon = exports.XSquareIcon = exports.XOctagonIcon = exports.XCircleIcon = exports.XCircleFilledIcon = exports.WindIcon = exports.WifiIcon = exports.WifiOffIcon = exports.WidgetIcon = exports.Widget2Icon = exports.WebAuthnIcon = exports.WebAuthnPlatformIcon = exports.WatchIcon = void 0;
 var styled_1 = require("../styled");
 var quantum_icons_1 = require("@auth0/quantum-icons");
 var React = __importStar(require("react"));
@@ -173,6 +173,7 @@ exports.CloudOffIcon = wrapIcon(quantum_icons_1.CloudOff);
 exports.CloudRainIcon = wrapIcon(quantum_icons_1.CloudRain);
 exports.CloudSnowIcon = wrapIcon(quantum_icons_1.CloudSnow);
 exports.CloudIcon = wrapIcon(quantum_icons_1.Cloud);
+exports.CodeBracketIcon = wrapIcon(quantum_icons_1.CodeBracket);
 exports.CodeSandboxIcon = wrapIcon(quantum_icons_1.CodeSandbox);
 /** @deprecated */
 exports.CodesandboxIcon = wrapIcon(quantum_icons_1.CodeSandbox);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auth0/quantum-product",
-  "version": "2.9.4",
+  "version": "2.9.7",
   "sideEffects": false,
   "license": "Apache-2.0",
   "publishConfig": {
@@ -11,7 +11,7 @@
   "main": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {
-    "@auth0/quantum-icons": "^1.3.0",
+    "@auth0/quantum-icons": "^1.4.0",
     "@auth0/quantum-tokens": "^1.3.0",
     "@mui/material": "5.15.9",
     "@mui/system": "5.15.9",
@@ -25,7 +25,7 @@
     "react-dom": "*"
   },
   "scripts": {
-    "artifactory": "cd ./build && npm publish",
+    "artifactory": "cd ./build && npm publish --access public",
     "build-storybook": "storybook build",
     "build": "yarn clean && yarn build:cjs && yarn build:esm && yarn copy:files",
     "build:cjs": "node --max-old-space-size=8192 ../../node_modules/.bin/tsc --project ./tsconfig.publish.json",