@auth0/quantum-product 2.5.7 → 2.5.9

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

@@ -0,0 +1,135 @@
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import * as React from 'react';
+import { CalendarIcon } from '../icon';
+import { styled } from '../styled';
+import { useMergedClasses } from '../styles/classes';
+import { TextField } from '../text-field';
+import clsx from '../utils/clsx';
+import { datePickerClasses, datePickerComponentName, getDatePickerUtilityClass } from './date-picker-classes';
+import { DatePickerContext } from './date-picker-context';
+import { DatePickerPopover } from './date-picker-popover';
+import { useDatePickerState } from './date-picker-state';
+import { formatDate, parseDate, parseTimestamp } from './date-picker-utils';
+var Root = styled('div', { name: datePickerComponentName, slot: 'Root' })({
+    position: 'relative',
+    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 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 inputRef = React.useRef(null);
+    React.useEffect(function () {
+        setDisplayValue(value || '');
+    }, [value]);
+    var handleDateSelect = function (newValue, shouldClose) {
+        if (shouldClose === void 0) { shouldClose = true; }
+        setDisplayValue(newValue);
+        if (onChange) {
+            onChange(newValue);
+        }
+        if (shouldClose) {
+            popoverProps.onClose();
+        }
+    };
+    var handlePaste = function (event) {
+        if (!allowTimestampPasting)
+            return;
+        var pastedText = event.clipboardData.getData('text');
+        var timestamp = parseInt(pastedText, 10);
+        if (!isNaN(timestamp)) {
+            event.preventDefault();
+            var date = parseTimestamp(timestamp, timestampUnit);
+            if (date) {
+                var formatString = showTimeInput ? "".concat(dateFormat, " ").concat(timeFormat) : dateFormat;
+                var formattedDate = formatDate(date, formatString);
+                setDisplayValue(formattedDate);
+                if (onChange) {
+                    onChange(formattedDate);
+                }
+            }
+        }
+    };
+    var handleInputChange = function (event) {
+        var newValue = event.target.value;
+        setDisplayValue(newValue);
+        if (newValue === '') {
+            if (onChange) {
+                onChange('');
+            }
+            return;
+        }
+        if (isRangeSelection) {
+            return;
+        }
+        var formatString = showTimeInput ? "".concat(dateFormat, " ").concat(timeFormat) : dateFormat;
+        var date = parseDate(newValue, formatString);
+        if (date) {
+            var formattedDate = formatDate(date, formatString);
+            if (onChange) {
+                onChange(formattedDate);
+            }
+        }
+    };
+    var ownerState = {
+        size: size,
+        isRangeSelection: isRangeSelection,
+        showTimeInput: showTimeInput,
+    };
+    return (React.createElement(DatePickerContext.Provider, { value: {
+            dateFormat: dateFormat,
+            timeFormat: timeFormat,
+            onSelectDate: handleDateSelect,
+            isRangeSelection: isRangeSelection,
+            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) {
+                        triggerProps.onClick(e);
+                    }
+                    if (TextFieldProps.onClick) {
+                        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 })))));
+});

package/esm/date-picker/index.js

@@ -0,0 +1,5 @@
+export { DatePicker } from './date-picker';
+export { DatePickerPopover } from './date-picker-popover';
+export { DatePickerContext, useDatePickerContext } from './date-picker-context';
+export { DatePickerStateProvider, useDatePickerState, useDatePickerStateContext } from './date-picker-state';
+export { datePickerClasses, datePickerPopoverClasses } from './date-picker-classes';

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 { Activity, Airplane, Airplay, AlertCircle, AlertDiamondFilled, AlertDiamond, AlertOctagon, AlertTriangleFilled, AlertTriangle, AlignCenter, AlignJustify, AlignLeft, AlignRight, Anchor, Aperture, Apis, ApplicationPlus, Apps, Archive, ArrowDownCircle, ArrowDownLeft, ArrowDownRight, ArrowDown, ArrowLeftCircle, ArrowLeft, ArrowRightCircle, ArrowRight, ArrowUnsorted, ArrowUpCircle, ArrowUpLeft, ArrowUpRight, ArrowUp, ArrowsH, AtSign, Auth0Logo, Award, BarChart2, BarChart, BatteryCharging, Battery, BellOff, Bell, Biometrics, 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, ClipboardCheck, Clipboard, Clock, CloudDrizzle, CloudLightning, CloudOff, CloudRain, CloudSnow, Cloud, CodeSandbox, Code, Codepen, Coffee, CollapseLeft, CollapseRight, Color, Columns, Command, Compass, Copy, CornerDownLeft, CornerDownRight, CornerLeftDown, CornerLeftUp, CornerRightDown, CornerRightUp, CornerUpLeft, CornerUpRight, Cpu, CreditCard, Crop, Crosshair, Database, Delete, Devices, Directory, 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, 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, Layers, LayoutBottom, LayoutCenter, LayoutLeft, LayoutRight, LayoutTop, Layout, LifeBuoy, Link2, Link, List, ListNumbered, Loader, Lock, LogIn, LogOut, Mail, MapPin, Map, Maximize2, Maximize, Megaphone, Meh, Menu, MessageCircle, MessageSquare, MicOff, Mic, Minimize2, Minimize, MinusCircle, MinusSquare, Minus, Monitor, Moon, MoreHorizontal, MoreVertical, MousePointer, Move, Music, Navigation2, Navigation, Octagon, Package, PageBackground, PaintBrush, Paint, Paperclip, PauseCircle, Pause, PenTool, Percent, PhoneCall, PhoneForwarded, PhoneIncoming, PhoneMissed, PhoneOff, PhoneOutgoing, Phone, PieChart, PlayCircle, Play, PlusCircle, PlusSquare, Plus, Power, Printer, Radio, RecoveryCode, RefreshCcw, RefreshCw, Repeat, Rewind, RichText, RotateCcw, RotateCw, Rss, Save, Scissors, Search, Send, Server, Settings, Share2, Share, ShieldOff, Shield, ShoppingBag, ShoppingCart, Shuffle, Sidebar, SingleSignOn, SkipBack, SkipForward, Slash, Sliders, Smartphone, Smile, Sparkle, Speaker, Square, Star, StopCircle, Store2, Store, Sun, Sunrise, Sunset, 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, 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 { Activity, Airplane, Airplay, AlertCircle, AlertDiamondFilled, AlertDiamond, AlertOctagon, AlertTriangleFilled, AlertTriangle, AlignCenter, AlignJustify, AlignLeft, AlignRight, Anchor, Aperture, Apis, ApplicationPlus, Apps, Archive, ArrowDownCircle, ArrowDownLeft, ArrowDownRight, ArrowDown, ArrowLeftCircle, ArrowLeft, ArrowRightCircle, ArrowRight, ArrowUnsorted, ArrowUpCircle, ArrowUpLeft, ArrowUpRight, ArrowUp, ArrowsH, AtSign, Auth0Logo, Award, BarChart2, BarChart, BatteryCharging, Battery, BellOff, Bell, Biometrics, 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, ClipboardCheck, Clipboard, Clock, CloudDrizzle, CloudLightning, CloudOff, CloudRain, CloudSnow, Cloud, CodeSandbox, Code, Codepen, Coffee, CollapseLeft, CollapseRight, Color, Columns, Command, Compass, Copy, CornerDownLeft, CornerDownRight, CornerLeftDown, CornerLeftUp, CornerRightDown, CornerRightUp, CornerUpLeft, CornerUpRight, Cpu, CreditCard, Crop, Crosshair, Database, Delete, Devices, Directory, 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, 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, Link2, Link, List, ListNumbered, Loader, Lock, LogIn, LogOut, Mail, MapPin, Map, Maximize2, Maximize, Megaphone, Meh, Menu, MessageCircle, MessageSquare, MicOff, Mic, Minimize2, Minimize, MinusCircle, MinusSquare, Minus, Monitor, Moon, MoreHorizontal, MoreVertical, MousePointer, Move, Music, Navigation2, Navigation, Octagon, Package, PageBackground, PaintBrush, Paint, Paperclip, PauseCircle, Pause, PenTool, Percent, PhoneCall, PhoneForwarded, PhoneIncoming, PhoneMissed, PhoneOff, PhoneOutgoing, Phone, PieChart, PlayCircle, Play, PlusCircle, PlusSquare, Plus, Power, Printer, Radio, RecoveryCode, RefreshCcw, RefreshCw, Repeat, Rewind, RichText, RotateCcw, RotateCw, Rss, Save, Scissors, Search, Send, Server, Settings, Share2, Share, ShieldOff, Shield, ShoppingBag, ShoppingCart, Shuffle, Sidebar, SingleSignOn, SkipBack, SkipForward, Slash, Sliders, Smartphone, Smile, Sparkle, Speaker, Square, Star, StopCircle, Store2, Store, Sun, Sunrise, Sunset, 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, 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) {
@@ -109,6 +109,7 @@ export var ChevronsRightIcon = wrapIcon(ChevronsRight);
 export var ChevronsUpIcon = wrapIcon(ChevronsUp);
 export var ChromeIcon = wrapIcon(Chrome);
 export var CircleIcon = wrapIcon(Circle);
+export var CircleFilledIcon = wrapIcon(CircleFilled);
 export var ClipboardCheckIcon = wrapIcon(ClipboardCheck);
 export var ClipboardIcon = wrapIcon(Clipboard);
 export var ClockIcon = wrapIcon(Clock);
@@ -215,6 +216,7 @@ export var IntegrationIcon = wrapIcon(Integration);
 export var IssuerIcon = wrapIcon(Issuer);
 export var ItalicIcon = wrapIcon(Italic);
 export var KeyIcon = wrapIcon(Key);
+export var LanguagesIcon = wrapIcon(Languages);
 export var LayersIcon = wrapIcon(Layers);
 export var LayoutBottomIcon = wrapIcon(LayoutBottom);
 export var LayoutCenterIcon = wrapIcon(LayoutCenter);

package/esm/icon-button/icon-button.js

@@ -22,6 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import { capitalize } from '@mui/material';
+import { Spinner } from '../spinner';
 import MuiIconButton, { iconButtonClasses } from '@mui/material/IconButton';
 import { styled } from '../styled';
 import { useIconButtonContext } from './icon-button-context';
@@ -29,6 +30,13 @@ import { Tooltip } from '../tooltip';
 export var IconButtonComponentName = 'QuantumIconButton';
 export { iconButtonClasses };
 var Root = styled(Tooltip, { name: IconButtonComponentName, slot: 'Tooltip' })({});
+var ButtonSpinner = styled(Spinner, {
+    name: IconButtonComponentName,
+    slot: 'Spinner',
+})({
+    position: 'inherit',
+    left: '-0.5rem',
+});
 // using any here to work arround TS perf issues with OverrideableComponent and styled
 var StyledIconButton = styled(MuiIconButton, {
     name: IconButtonComponentName,
@@ -36,7 +44,7 @@ var StyledIconButton = styled(MuiIconButton, {
 })(function (_a) {
     var _b;
     var theme = _a.theme, edge = _a.edge, ownerState = _a.ownerState, color = _a.color;
-    return (__assign(__assign(__assign({}, (edge === 'end' && __assign({ marginRight: -11 }))), (_b = { '&:focus,&.Mui-focusVisible': color === 'danger'
+    return (__assign(__assign(__assign(__assign({}, (edge === 'end' && __assign({ marginRight: -11 }))), (_b = { '&:focus,&.Mui-focusVisible': color === 'danger'
                 ? theme.mixins.focusRing({ color: theme.tokens.color_border_focus_state_danger })
                 : theme.mixins.focusRing(), padding: 0, borderRadius: '4px', transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
                 duration: theme.transitions.duration.short,
@@ -48,6 +56,9 @@ var StyledIconButton = styled(MuiIconButton, {
         width: '1em',
     }, _b)), (ownerState.shape === 'circular' && {
         borderRadius: '50%',
+    })), (ownerState.isLoading && {
+        color: theme.tokens.color_fg_default,
+        backgroundColor: theme.palette.action.disabledBackground,
     })));
 });
 var DisabledWrapper = styled('span', {
@@ -62,9 +73,9 @@ var DisabledWrapper = styled('span', {
 });
 export var IconButton = React.forwardRef(function (props, ref) {
     var iconButtonContext = useIconButtonContext();
-    var children = props.children, label = props.label, _a = props.color, color = _a === void 0 ? 'default' : _a, _b = props.variant, variant = _b === void 0 ? 'link' : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c, disabled = props.disabled, edgeProp = props.edge, _d = props.shape, shape = _d === void 0 ? 'default' : _d, tooltipPlacement = props.tooltipPlacement, onTooltipClose = props.onTooltipClose, iconButtonProps = __rest(props, ["children", "label", "color", "variant", "size", "disabled", "edge", "shape", "tooltipPlacement", "onTooltipClose"]);
+    var isLoading = props.isLoading, _a = props.SpinnerProps, SpinnerProps = _a === void 0 ? {} : _a, children = props.children, label = props.label, _b = props.color, color = _b === void 0 ? 'default' : _b, _c = props.variant, variant = _c === void 0 ? 'link' : _c, _d = props.size, size = _d === void 0 ? 'medium' : _d, disabled = props.disabled, edgeProp = props.edge, _e = props.shape, shape = _e === void 0 ? 'default' : _e, tooltipPlacement = props.tooltipPlacement, onTooltipClose = props.onTooltipClose, iconButtonProps = __rest(props, ["isLoading", "SpinnerProps", "children", "label", "color", "variant", "size", "disabled", "edge", "shape", "tooltipPlacement", "onTooltipClose"]);
     var edge = edgeProp != null ? edgeProp : iconButtonContext.edge;
     var captizedLable = label ? capitalize(label) : null;
-    var button = (React.createElement(StyledIconButton, __assign({ color: color, ref: ref, edge: edge, disabled: disabled, size: size, variant: variant, ownerState: { shape: shape }, "aria-label": captizedLable }, iconButtonProps), children));
+    var button = (React.createElement(StyledIconButton, __assign({ color: color, ref: ref, edge: edge, disabled: disabled || isLoading, size: size, variant: variant, ownerState: { shape: shape, isLoading: isLoading }, "aria-label": captizedLable }, iconButtonProps), isLoading ? React.createElement(ButtonSpinner, __assign({}, SpinnerProps)) : React.createElement(React.Fragment, null, children)));
     return (React.createElement(Root, { title: captizedLable, placement: tooltipPlacement, onClose: onTooltipClose }, disabled ? React.createElement(DisabledWrapper, null, button) : button));
 });

package/esm/index.js

@@ -25,6 +25,7 @@ export * from './copy-button';
 export * from './css-baseline';
 export * from './danger-zone';
 export * from './data-table';
+export * from './date-picker';
 export * from './description-block';
 export * from './dialog';
 export * from './divider';

package/esm/stepper/step-label/step-label.js

@@ -11,11 +11,27 @@ var __assign = (this && this.__assign) || function () {
 };
 import * as React from 'react';
 import MuiStepLabel from '@mui/material/StepLabel';
-import { StatusIcon } from '../../status';
-import { CheckIcon } from '../../icon';
+import { useTheme } from '@auth0/quantum-product';
+import { CircleIcon, CircleFilledIcon, CheckCircleFilledIcon } from '../../icon';
 var CustomStepIcon = function (_a) {
     var active = _a.active, completed = _a.completed;
-    return (React.createElement(StatusIcon, { icon: CheckIcon, variant: active || completed ? 'filled' : 'default', color: completed ? 'success' : 'default' }));
+    var theme = useTheme();
+    var stateMap = {
+        active: {
+            Icon: CircleIcon,
+            color: theme.tokens.color_fg_selected,
+        },
+        completed: {
+            Icon: CheckCircleFilledIcon,
+            color: theme.tokens.color_fg_selected,
+        },
+        default: {
+            Icon: CircleFilledIcon,
+            color: theme.tokens.color_bg_layer_alternate_bold,
+        },
+    };
+    var _b = active ? stateMap.active : completed ? stateMap.completed : stateMap.default, Icon = _b.Icon, color = _b.color;
+    return React.createElement(Icon, { size: "1.5em", sx: { color: color } });
 };
 export var StepLabel = React.forwardRef(function (props, ref) {
     return React.createElement(MuiStepLabel, __assign({ StepIconComponent: CustomStepIcon }, props, { ref: ref }));

package/icon/index.d.ts

@@ -94,6 +94,7 @@ export declare const ChevronsRightIcon: React.ForwardRefExoticComponent<Omit<IIc
 export declare const ChevronsUpIcon: React.ForwardRefExoticComponent<Omit<IIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export declare const ChromeIcon: React.ForwardRefExoticComponent<Omit<IIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export declare const CircleIcon: React.ForwardRefExoticComponent<Omit<IIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export declare const CircleFilledIcon: React.ForwardRefExoticComponent<Omit<IIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export declare const ClipboardCheckIcon: React.ForwardRefExoticComponent<Omit<IIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export declare const ClipboardIcon: React.ForwardRefExoticComponent<Omit<IIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export declare const ClockIcon: React.ForwardRefExoticComponent<Omit<IIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
@@ -200,6 +201,7 @@ export declare const IntegrationIcon: React.ForwardRefExoticComponent<Omit<IIcon
 export declare const IssuerIcon: React.ForwardRefExoticComponent<Omit<IIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export declare const ItalicIcon: React.ForwardRefExoticComponent<Omit<IIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export declare const KeyIcon: React.ForwardRefExoticComponent<Omit<IIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export declare const LanguagesIcon: React.ForwardRefExoticComponent<Omit<IIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export declare const LayersIcon: React.ForwardRefExoticComponent<Omit<IIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export declare const LayoutBottomIcon: React.ForwardRefExoticComponent<Omit<IIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export declare const LayoutCenterIcon: React.ForwardRefExoticComponent<Omit<IIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;

package/icon/index.js

@@ -38,12 +38,12 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BorderRoundIcon = exports.BorderPillIcon = exports.BookmarkIcon = exports.BookIcon = exports.BookOpenIcon = exports.BoldIcon = exports.BluetoothIcon = exports.BiometricsIcon = exports.BellIcon = exports.BellOffIcon = exports.BatteryIcon = exports.BatteryChargingIcon = exports.BarChartIcon = exports.BarChart2Icon = exports.AwardIcon = exports.Auth0LogoIcon = exports.AtSignIcon = 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.ApertureIcon = exports.AnchorIcon = 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.ActivityIcon = void 0;
-exports.ColumnsIcon = exports.ColorIcon = exports.CollapseRightIcon = exports.CollapseLeftIcon = exports.CoffeeIcon = exports.CodepenIcon = exports.CodeIcon = exports.CodesandboxIcon = exports.CodeSandboxIcon = exports.CloudIcon = exports.CloudSnowIcon = exports.CloudRainIcon = exports.CloudOffIcon = exports.CloudLightningIcon = exports.CloudDrizzleIcon = exports.ClockIcon = exports.ClipboardIcon = exports.ClipboardCheckIcon = 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 = void 0;
-exports.FolderIcon = exports.FolderPlusIcon = exports.FolderMinusIcon = exports.FolderCancelIcon = exports.FlowIcon = exports.FlagIcon = exports.FilterIcon = exports.FilmIcon = exports.FileIcon = exports.FileTextIcon = exports.FilePlusIcon = 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.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.CompassIcon = exports.CommandIcon = void 0;
-exports.MailIcon = exports.LogOutIcon = exports.LogInIcon = exports.LockIcon = exports.LoaderIcon = exports.ListNumberedIcon = exports.ListIcon = exports.LinkIcon = exports.Link2Icon = exports.LifeBuoyIcon = exports.LayoutIcon = exports.LayoutTopIcon = exports.LayoutRightIcon = exports.LayoutLeftIcon = exports.LayoutCenterIcon = exports.LayoutBottomIcon = exports.LayersIcon = 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.Fonts2Icon = exports.FontIcon = void 0;
-exports.PrinterIcon = exports.PowerIcon = exports.PlusIcon = exports.PlusSquareIcon = exports.PlusCircleIcon = exports.PlayIcon = exports.PlayCircleIcon = exports.PieChartIcon = exports.PhoneIcon = exports.PhoneOutgoingIcon = exports.PhoneOffIcon = exports.PhoneMissedIcon = exports.PhoneIncomingIcon = exports.PhoneForwardedIcon = exports.PhoneCallIcon = exports.PercentIcon = exports.PenToolIcon = exports.PauseIcon = exports.PauseCircleIcon = exports.PaperclipIcon = exports.PaintIcon = exports.PaintBrushIcon = exports.PageBackgroundIcon = exports.PackageIcon = 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.MaximizeIcon = exports.Maximize2Icon = exports.MapIcon = exports.MapPinIcon = void 0;
-exports.ToggleLeftIcon = exports.ThumbsUpIcon = exports.ThumbsDownIcon = exports.ThermometerIcon = exports.TerminalIcon = exports.TargetIcon = exports.TagIcon = exports.TabletIcon = exports.TableIcon = exports.SunsetIcon = exports.SunriseIcon = exports.SunIcon = exports.StoreIcon = exports.Store2Icon = exports.StopCircleIcon = exports.StarIcon = exports.SquareIcon = exports.SpeakerIcon = exports.SparkleIcon = 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.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 = 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 = exports.VolumeIcon = exports.VolumeXIcon = exports.Volume2Icon = exports.Volume1Icon = exports.VoicemailIcon = exports.VideoIcon = exports.VideoOffIcon = exports.UsersIcon = 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 = void 0;
+exports.ColorIcon = exports.CollapseRightIcon = exports.CollapseLeftIcon = exports.CoffeeIcon = exports.CodepenIcon = exports.CodeIcon = exports.CodesandboxIcon = exports.CodeSandboxIcon = exports.CloudIcon = exports.CloudSnowIcon = exports.CloudRainIcon = exports.CloudOffIcon = exports.CloudLightningIcon = exports.CloudDrizzleIcon = exports.ClockIcon = exports.ClipboardIcon = exports.ClipboardCheckIcon = 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 = void 0;
+exports.FolderPlusIcon = exports.FolderMinusIcon = exports.FolderCancelIcon = exports.FlowIcon = exports.FlagIcon = exports.FilterIcon = exports.FilmIcon = exports.FileIcon = exports.FileTextIcon = exports.FilePlusIcon = 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.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.CompassIcon = exports.CommandIcon = exports.ColumnsIcon = void 0;
+exports.LogInIcon = exports.LockIcon = exports.LoaderIcon = exports.ListNumberedIcon = exports.ListIcon = exports.LinkIcon = exports.Link2Icon = exports.LifeBuoyIcon = exports.LayoutIcon = exports.LayoutTopIcon = exports.LayoutRightIcon = 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.Fonts2Icon = exports.FontIcon = exports.FolderIcon = void 0;
+exports.PlusIcon = exports.PlusSquareIcon = exports.PlusCircleIcon = exports.PlayIcon = exports.PlayCircleIcon = exports.PieChartIcon = exports.PhoneIcon = exports.PhoneOutgoingIcon = exports.PhoneOffIcon = exports.PhoneMissedIcon = exports.PhoneIncomingIcon = exports.PhoneForwardedIcon = exports.PhoneCallIcon = exports.PercentIcon = exports.PenToolIcon = exports.PauseIcon = exports.PauseCircleIcon = exports.PaperclipIcon = exports.PaintIcon = exports.PaintBrushIcon = exports.PageBackgroundIcon = exports.PackageIcon = 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.MaximizeIcon = exports.Maximize2Icon = exports.MapIcon = exports.MapPinIcon = exports.MailIcon = exports.LogOutIcon = void 0;
+exports.ThumbsDownIcon = exports.ThermometerIcon = exports.TerminalIcon = exports.TargetIcon = exports.TagIcon = exports.TabletIcon = exports.TableIcon = exports.SunsetIcon = exports.SunriseIcon = exports.SunIcon = exports.StoreIcon = exports.Store2Icon = exports.StopCircleIcon = exports.StarIcon = exports.SquareIcon = exports.SpeakerIcon = exports.SparkleIcon = 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.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 = 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 = exports.VolumeIcon = exports.VolumeXIcon = exports.Volume2Icon = exports.Volume1Icon = exports.VoicemailIcon = exports.VideoIcon = exports.VideoOffIcon = exports.UsersIcon = 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 = void 0;
 var styled_1 = require("../styled");
 var quantum_icons_1 = require("@auth0/quantum-icons");
 var React = __importStar(require("react"));
@@ -144,6 +144,7 @@ exports.ChevronsRightIcon = wrapIcon(quantum_icons_1.ChevronsRight);
 exports.ChevronsUpIcon = wrapIcon(quantum_icons_1.ChevronsUp);
 exports.ChromeIcon = wrapIcon(quantum_icons_1.Chrome);
 exports.CircleIcon = wrapIcon(quantum_icons_1.Circle);
+exports.CircleFilledIcon = wrapIcon(quantum_icons_1.CircleFilled);
 exports.ClipboardCheckIcon = wrapIcon(quantum_icons_1.ClipboardCheck);
 exports.ClipboardIcon = wrapIcon(quantum_icons_1.Clipboard);
 exports.ClockIcon = wrapIcon(quantum_icons_1.Clock);
@@ -250,6 +251,7 @@ exports.IntegrationIcon = wrapIcon(quantum_icons_1.Integration);
 exports.IssuerIcon = wrapIcon(quantum_icons_1.Issuer);
 exports.ItalicIcon = wrapIcon(quantum_icons_1.Italic);
 exports.KeyIcon = wrapIcon(quantum_icons_1.Key);
+exports.LanguagesIcon = wrapIcon(quantum_icons_1.Languages);
 exports.LayersIcon = wrapIcon(quantum_icons_1.Layers);
 exports.LayoutBottomIcon = wrapIcon(quantum_icons_1.LayoutBottom);
 exports.LayoutCenterIcon = wrapIcon(quantum_icons_1.LayoutCenter);

package/icon-button/icon-button.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { ISpinnerProps } from '../spinner';
 import { iconButtonClasses, IconButtonTypeMap } from '@mui/material/IconButton';
 import { OverridableComponent, OverrideProps, OverridableTypeMap } from '../overridable-component';
 import { ITooltipProps } from '../tooltip';
@@ -15,6 +16,8 @@ export type IIconButtonTypeMap<ExtraPropsType = {}, DefaultElementType extends R
     href?: string;
     label: string;
     target?: string;
+    isLoading?: boolean;
+    SpinnerProps?: Partial<ISpinnerProps>;
 }, DefaultElementType>;
 export interface IExtendIconButtonTypeMap<M extends OverridableTypeMap> {
     props: M['props'] & (M['props'] extends {

package/icon-button/icon-button.js

@@ -48,6 +48,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.IconButton = exports.iconButtonClasses = exports.IconButtonComponentName = void 0;
 var React = __importStar(require("react"));
 var material_1 = require("@mui/material");
+var spinner_1 = require("../spinner");
 var IconButton_1 = __importStar(require("@mui/material/IconButton"));
 Object.defineProperty(exports, "iconButtonClasses", { enumerable: true, get: function () { return IconButton_1.iconButtonClasses; } });
 var styled_1 = require("../styled");
@@ -55,6 +56,13 @@ var icon_button_context_1 = require("./icon-button-context");
 var tooltip_1 = require("../tooltip");
 exports.IconButtonComponentName = 'QuantumIconButton';
 var Root = (0, styled_1.styled)(tooltip_1.Tooltip, { name: exports.IconButtonComponentName, slot: 'Tooltip' })({});
+var ButtonSpinner = (0, styled_1.styled)(spinner_1.Spinner, {
+    name: exports.IconButtonComponentName,
+    slot: 'Spinner',
+})({
+    position: 'inherit',
+    left: '-0.5rem',
+});
 // using any here to work arround TS perf issues with OverrideableComponent and styled
 var StyledIconButton = (0, styled_1.styled)(IconButton_1.default, {
     name: exports.IconButtonComponentName,
@@ -62,7 +70,7 @@ var StyledIconButton = (0, styled_1.styled)(IconButton_1.default, {
 })(function (_a) {
     var _b;
     var theme = _a.theme, edge = _a.edge, ownerState = _a.ownerState, color = _a.color;
-    return (__assign(__assign(__assign({}, (edge === 'end' && __assign({ marginRight: -11 }))), (_b = { '&:focus,&.Mui-focusVisible': color === 'danger'
+    return (__assign(__assign(__assign(__assign({}, (edge === 'end' && __assign({ marginRight: -11 }))), (_b = { '&:focus,&.Mui-focusVisible': color === 'danger'
                 ? theme.mixins.focusRing({ color: theme.tokens.color_border_focus_state_danger })
                 : theme.mixins.focusRing(), padding: 0, borderRadius: '4px', transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
                 duration: theme.transitions.duration.short,
@@ -74,6 +82,9 @@ var StyledIconButton = (0, styled_1.styled)(IconButton_1.default, {
         width: '1em',
     }, _b)), (ownerState.shape === 'circular' && {
         borderRadius: '50%',
+    })), (ownerState.isLoading && {
+        color: theme.tokens.color_fg_default,
+        backgroundColor: theme.palette.action.disabledBackground,
     })));
 });
 var DisabledWrapper = (0, styled_1.styled)('span', {
@@ -88,9 +99,9 @@ var DisabledWrapper = (0, styled_1.styled)('span', {
 });
 exports.IconButton = React.forwardRef(function (props, ref) {
     var iconButtonContext = (0, icon_button_context_1.useIconButtonContext)();
-    var children = props.children, label = props.label, _a = props.color, color = _a === void 0 ? 'default' : _a, _b = props.variant, variant = _b === void 0 ? 'link' : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c, disabled = props.disabled, edgeProp = props.edge, _d = props.shape, shape = _d === void 0 ? 'default' : _d, tooltipPlacement = props.tooltipPlacement, onTooltipClose = props.onTooltipClose, iconButtonProps = __rest(props, ["children", "label", "color", "variant", "size", "disabled", "edge", "shape", "tooltipPlacement", "onTooltipClose"]);
+    var isLoading = props.isLoading, _a = props.SpinnerProps, SpinnerProps = _a === void 0 ? {} : _a, children = props.children, label = props.label, _b = props.color, color = _b === void 0 ? 'default' : _b, _c = props.variant, variant = _c === void 0 ? 'link' : _c, _d = props.size, size = _d === void 0 ? 'medium' : _d, disabled = props.disabled, edgeProp = props.edge, _e = props.shape, shape = _e === void 0 ? 'default' : _e, tooltipPlacement = props.tooltipPlacement, onTooltipClose = props.onTooltipClose, iconButtonProps = __rest(props, ["isLoading", "SpinnerProps", "children", "label", "color", "variant", "size", "disabled", "edge", "shape", "tooltipPlacement", "onTooltipClose"]);
     var edge = edgeProp != null ? edgeProp : iconButtonContext.edge;
     var captizedLable = label ? (0, material_1.capitalize)(label) : null;
-    var button = (React.createElement(StyledIconButton, __assign({ color: color, ref: ref, edge: edge, disabled: disabled, size: size, variant: variant, ownerState: { shape: shape }, "aria-label": captizedLable }, iconButtonProps), children));
+    var button = (React.createElement(StyledIconButton, __assign({ color: color, ref: ref, edge: edge, disabled: disabled || isLoading, size: size, variant: variant, ownerState: { shape: shape, isLoading: isLoading }, "aria-label": captizedLable }, iconButtonProps), isLoading ? React.createElement(ButtonSpinner, __assign({}, SpinnerProps)) : React.createElement(React.Fragment, null, children)));
     return (React.createElement(Root, { title: captizedLable, placement: tooltipPlacement, onClose: onTooltipClose }, disabled ? React.createElement(DisabledWrapper, null, button) : button));
 });

package/index.d.ts

@@ -25,6 +25,7 @@ export * from './copy-button';
 export * from './css-baseline';
 export * from './danger-zone';
 export * from './data-table';
+export * from './date-picker';
 export * from './description-block';
 export * from './dialog';
 export * from './divider';

package/index.js

@@ -41,6 +41,7 @@ __exportStar(require("./copy-button"), exports);
 __exportStar(require("./css-baseline"), exports);
 __exportStar(require("./danger-zone"), exports);
 __exportStar(require("./data-table"), exports);
+__exportStar(require("./date-picker"), exports);
 __exportStar(require("./description-block"), exports);
 __exportStar(require("./dialog"), exports);
 __exportStar(require("./divider"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auth0/quantum-product",
-  "version": "2.5.7",
+  "version": "2.5.9",
   "sideEffects": false,
   "license": "Apache-2.0",
   "publishConfig": {
@@ -17,7 +17,8 @@
     "@mui/system": "5.15.9",
     "@mui/utils": "5.15.9",
     "clsx": "^1.2.1",
-    "md5": "^2.3.0"
+    "md5": "^2.3.0",
+    "react-day-picker": "^9.6.7"
   },
   "peerDependencies": {
     "react": "*",

package/stepper/step-label/step-label.js

@@ -40,11 +40,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StepLabel = void 0;
 var React = __importStar(require("react"));
 var StepLabel_1 = __importDefault(require("@mui/material/StepLabel"));
-var status_1 = require("../../status");
+var quantum_product_1 = require("@auth0/quantum-product");
 var icon_1 = require("../../icon");
 var CustomStepIcon = function (_a) {
     var active = _a.active, completed = _a.completed;
-    return (React.createElement(status_1.StatusIcon, { icon: icon_1.CheckIcon, variant: active || completed ? 'filled' : 'default', color: completed ? 'success' : 'default' }));
+    var theme = (0, quantum_product_1.useTheme)();
+    var stateMap = {
+        active: {
+            Icon: icon_1.CircleIcon,
+            color: theme.tokens.color_fg_selected,
+        },
+        completed: {
+            Icon: icon_1.CheckCircleFilledIcon,
+            color: theme.tokens.color_fg_selected,
+        },
+        default: {
+            Icon: icon_1.CircleFilledIcon,
+            color: theme.tokens.color_bg_layer_alternate_bold,
+        },
+    };
+    var _b = active ? stateMap.active : completed ? stateMap.completed : stateMap.default, Icon = _b.Icon, color = _b.color;
+    return React.createElement(Icon, { size: "1.5em", sx: { color: color } });
 };
 exports.StepLabel = React.forwardRef(function (props, ref) {
     return React.createElement(StepLabel_1.default, __assign({ StepIconComponent: CustomStepIcon }, props, { ref: ref }));