@auth0/quantum-product 2.4.2 → 2.4.4

package/alert/alert.js

@@ -57,13 +57,6 @@ var classes_1 = require("../styles/classes");
 var styled_1 = require("../styled");
 var clsx_1 = __importDefault(require("../utils/clsx"));
 var alert_classes_1 = require("./alert-classes");
-var severityBorderShade = {
-    default: 'color_bg_state_neutral',
-    danger: 'color_bg_state_danger',
-    warning: 'color_bg_state_caution',
-    info: 'color_bg_state_info',
-    success: 'color_bg_state_success',
-};
 var severityIconShade = {
     default: 'color_fg_state_neutral',
     danger: 'color_fg_state_danger',
@@ -91,11 +84,12 @@ var AlertRoot = (0, styled_1.styled)('div', {
 })(function (_a) {
     var _b, _c;
     var theme = _a.theme, ownerState = _a.ownerState;
-    return __assign(__assign({ display: 'flex', alignItems: 'flex-start', borderRadius: theme.shape.borderRadius, padding: theme.spacing(1.25, 2), boxShadow: ownerState.elevation ? theme.shadows[ownerState.elevation] : 'none', borderLeft: "".concat(theme.typography.pxToRem(8), " solid ").concat(theme.tokens[severityBorderShade[ownerState.severity]]) }, (ownerState.variant === 'outlined' && (_b = {
+    return __assign(__assign({ display: 'flex', alignItems: 'flex-start', borderRadius: 8, padding: theme.spacing(1.25, 2), boxShadow: ownerState.elevation ? theme.shadows[ownerState.elevation] : 'none' }, (ownerState.variant === 'outlined' && (_b = {
             backgroundColor: theme.tokens.color_bg_layer,
             borderTop: "1px solid ".concat(theme.tokens.color_border_bold),
             borderRight: "1px solid ".concat(theme.tokens.color_border_bold),
-            borderBottom: "1px solid ".concat(theme.tokens.color_border_bold)
+            borderBottom: "1px solid ".concat(theme.tokens.color_border_bold),
+            borderLeft: "1px solid ".concat(theme.tokens.color_border_bold)
         },
         _b["& .".concat(alert_classes_1.alertClasses.icon)] = {
             color: theme.tokens[severityIconShade[ownerState.severity]],
@@ -178,13 +172,6 @@ var AlertAction = (0, styled_1.styled)('div', {
         },
         _b);
 });
-var defaultIconMapping = {
-    warning: React.createElement(icon_1.AlertTriangleIcon, null),
-    danger: React.createElement(icon_1.AlertDiamondIcon, null),
-    success: React.createElement(icon_1.CheckCircleIcon, null),
-    info: React.createElement(icon_1.InfoIcon, null),
-    default: React.createElement(icon_1.FileTextIcon, null),
-};
 var useUtilityClasses = function (_a) {
     var classes = _a.classes;
     var slots = {
@@ -200,6 +187,21 @@ var useUtilityClasses = function (_a) {
 exports.Alert = React.forwardRef(function (props, ref) {
     // const props = useThemeProps({ props: inProps, name: alertComponentName });
     var classes = useUtilityClasses(props);
+    var defaultIconMapping = props.variant === 'outlined'
+        ? {
+            warning: React.createElement(icon_1.AlertTriangleFilledIcon, null),
+            danger: React.createElement(icon_1.AlertDiamondFilledIcon, null),
+            success: React.createElement(icon_1.CheckCircleFilledIcon, null),
+            info: React.createElement(icon_1.InfoFilledIcon, null),
+            default: React.createElement(icon_1.FileTextIcon, null),
+        }
+        : {
+            warning: React.createElement(icon_1.AlertTriangleIcon, null),
+            danger: React.createElement(icon_1.AlertDiamondIcon, null),
+            success: React.createElement(icon_1.CheckCircleIcon, null),
+            info: React.createElement(icon_1.InfoIcon, null),
+            default: React.createElement(icon_1.FileTextIcon, null),
+        };
     var action = props.action, children = props.children, className = props.className, _a = props.closeText, closeText = _a === void 0 ? 'Dismiss' : _a, iconProp = props.icon, _b = props.iconMapping, iconMapping = _b === void 0 ? defaultIconMapping : _b, message = props.message, onCloseProp = props.onClose, onDismiss = props.onDismiss, _c = props.role, role = _c === void 0 ? 'alert' : _c, _d = props.severity, severity = _d === void 0 ? 'default' : _d, title = props.title, _e = props.variant, variant = _e === void 0 ? 'standard' : _e, elevation = props.elevation, dismissible = props.dismissible, rootProps = __rest(props, ["action", "children", "className", "closeText", "icon", "iconMapping", "message", "onClose", "onDismiss", "role", "severity", "title", "variant", "elevation", "dismissible"]);
     var ownerState = {
         severity: severity,

package/esm/alert/alert.js

@@ -21,20 +21,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { AlertDiamondIcon, AlertTriangleIcon, CheckCircleIcon, FileTextIcon, InfoIcon, XIcon } from '../icon';
+import { AlertDiamondIcon, AlertDiamondFilledIcon, AlertTriangleIcon, AlertTriangleFilledIcon, CheckCircleIcon, CheckCircleFilledIcon, FileTextIcon, InfoIcon, InfoFilledIcon, XIcon, } from '../icon';
 import { IconButton, iconButtonClasses } from '../icon-button';
 import { buttonClasses } from '../button';
 import { composeClasses } from '../styles/classes';
 import { styled } from '../styled';
 import clsx from '../utils/clsx';
 import { alertClasses, alertComponentName, getAlertUtilityClass } from './alert-classes';
-var severityBorderShade = {
-    default: 'color_bg_state_neutral',
-    danger: 'color_bg_state_danger',
-    warning: 'color_bg_state_caution',
-    info: 'color_bg_state_info',
-    success: 'color_bg_state_success',
-};
 var severityIconShade = {
     default: 'color_fg_state_neutral',
     danger: 'color_fg_state_danger',
@@ -62,11 +55,12 @@ var AlertRoot = styled('div', {
 })(function (_a) {
     var _b, _c;
     var theme = _a.theme, ownerState = _a.ownerState;
-    return __assign(__assign({ display: 'flex', alignItems: 'flex-start', borderRadius: theme.shape.borderRadius, padding: theme.spacing(1.25, 2), boxShadow: ownerState.elevation ? theme.shadows[ownerState.elevation] : 'none', borderLeft: "".concat(theme.typography.pxToRem(8), " solid ").concat(theme.tokens[severityBorderShade[ownerState.severity]]) }, (ownerState.variant === 'outlined' && (_b = {
+    return __assign(__assign({ display: 'flex', alignItems: 'flex-start', borderRadius: 8, padding: theme.spacing(1.25, 2), boxShadow: ownerState.elevation ? theme.shadows[ownerState.elevation] : 'none' }, (ownerState.variant === 'outlined' && (_b = {
             backgroundColor: theme.tokens.color_bg_layer,
             borderTop: "1px solid ".concat(theme.tokens.color_border_bold),
             borderRight: "1px solid ".concat(theme.tokens.color_border_bold),
-            borderBottom: "1px solid ".concat(theme.tokens.color_border_bold)
+            borderBottom: "1px solid ".concat(theme.tokens.color_border_bold),
+            borderLeft: "1px solid ".concat(theme.tokens.color_border_bold)
         },
         _b["& .".concat(alertClasses.icon)] = {
             color: theme.tokens[severityIconShade[ownerState.severity]],
@@ -149,13 +143,6 @@ var AlertAction = styled('div', {
         },
         _b);
 });
-var defaultIconMapping = {
-    warning: React.createElement(AlertTriangleIcon, null),
-    danger: React.createElement(AlertDiamondIcon, null),
-    success: React.createElement(CheckCircleIcon, null),
-    info: React.createElement(InfoIcon, null),
-    default: React.createElement(FileTextIcon, null),
-};
 var useUtilityClasses = function (_a) {
     var classes = _a.classes;
     var slots = {
@@ -171,6 +158,21 @@ var useUtilityClasses = function (_a) {
 export var Alert = React.forwardRef(function (props, ref) {
     // const props = useThemeProps({ props: inProps, name: alertComponentName });
     var classes = useUtilityClasses(props);
+    var defaultIconMapping = props.variant === 'outlined'
+        ? {
+            warning: React.createElement(AlertTriangleFilledIcon, null),
+            danger: React.createElement(AlertDiamondFilledIcon, null),
+            success: React.createElement(CheckCircleFilledIcon, null),
+            info: React.createElement(InfoFilledIcon, null),
+            default: React.createElement(FileTextIcon, null),
+        }
+        : {
+            warning: React.createElement(AlertTriangleIcon, null),
+            danger: React.createElement(AlertDiamondIcon, null),
+            success: React.createElement(CheckCircleIcon, null),
+            info: React.createElement(InfoIcon, null),
+            default: React.createElement(FileTextIcon, null),
+        };
     var action = props.action, children = props.children, className = props.className, _a = props.closeText, closeText = _a === void 0 ? 'Dismiss' : _a, iconProp = props.icon, _b = props.iconMapping, iconMapping = _b === void 0 ? defaultIconMapping : _b, message = props.message, onCloseProp = props.onClose, onDismiss = props.onDismiss, _c = props.role, role = _c === void 0 ? 'alert' : _c, _d = props.severity, severity = _d === void 0 ? 'default' : _d, title = props.title, _e = props.variant, variant = _e === void 0 ? 'standard' : _e, elevation = props.elevation, dismissible = props.dismissible, rootProps = __rest(props, ["action", "children", "className", "closeText", "icon", "iconMapping", "message", "onClose", "onDismiss", "role", "severity", "title", "variant", "elevation", "dismissible"]);
     var ownerState = {
         severity: severity,

package/esm/illustrations/components/index.js

@@ -4,6 +4,7 @@ To update this output make changes to `scripts/svgr/illustration-index-template.
 */
 export { IllustrationExperiencedUser } from './experienced-user';
 export { IllustrationNewAuth0UserA } from './new-auth0-user-a';
+export { IllustrationNoContent } from './no-content';
 export { IllustrationNotifications } from './notifications';
 export { IllustrationRoles } from './roles';
 export { IllustrationSingleSignOn } from './single-sign-on';

package/esm/illustrations/components/no-content.js

@@ -0,0 +1,80 @@
+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;
+};
+/*
+    This file is generated with the "illustrations" script.
+    To update this output make changes to `scripts/svgr/illustration-icon-template.js
+    */
+import * as React from 'react';
+import { illustrationComponentName } from '../common';
+import { styled } from '../../styled';
+export var IllustrationNoContent = styled(function (_a) {
+    var props = __rest(_a, []);
+    return (React.createElement("svg", __assign({ width: "1em", height: "1em", viewBox: "0 0 250 250", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React.createElement("g", { clipPath: "url(#no-content_svg__clip0_3554_6896)", stroke: "#000", strokeWidth: 0.4 },
+            React.createElement("path", { d: "M232.75 216.1l-33.4-33.4H50.65l-33.4 33.4h215.5z", fill: "#BDC4CF", strokeMiterlimit: 10 }),
+            React.createElement("path", { d: "M50.65 182.7v33.4M199.25 182.7v33.4", strokeMiterlimit: 10 }),
+            React.createElement("path", { d: "M182.45 197.3H67.25V42.9h77l38.2 38.2v116.2z", fill: "url(#no-content_svg__paint0_linear_3554_6896)", strokeMiterlimit: 10 }),
+            React.createElement("path", { d: "M182.45 194.3H67.25V39.9h77l38.2 38.2v116.2z", fill: "url(#no-content_svg__paint1_linear_3554_6896)", strokeMiterlimit: 10 }),
+            React.createElement("path", { d: "M182.45 191.3H67.25V36.9h77l38.2 38.2v116.2z", fill: "url(#no-content_svg__paint2_linear_3554_6896)", strokeMiterlimit: 10 }),
+            React.createElement("path", { d: "M182.45 188.3H67.25V33.9h77l38.2 38.2v116.2z", fill: "url(#no-content_svg__paint3_linear_3554_6896)", strokeMiterlimit: 10 }),
+            React.createElement("path", { d: "M182.45 72.1h-38.2V33.9l38.2 38.2z", fill: "url(#no-content_svg__paint4_linear_3554_6896)", strokeLinejoin: "bevel" }),
+            React.createElement("path", { d: "M108.05 44.6h-29v28.99h29V44.6z", fill: "url(#no-content_svg__paint5_linear_3554_6896)", strokeLinejoin: "round" }),
+            React.createElement("path", { d: "M104.25 50.5l-2.4-2.3-8.5 8.5-8.5-8.5-2.3 2.3 8.5 8.5-8.5 8.5 2.3 2.4 8.5-8.5 8.5 8.5 2.4-2.4-8.5-8.5 8.5-8.5z", fill: "url(#no-content_svg__paint6_linear_3554_6896)", strokeMiterlimit: 10 }),
+            React.createElement("path", { d: "M170.65 82.4h-91.6v94.2h91.6V82.4z", fill: "url(#no-content_svg__paint7_linear_3554_6896)", strokeLinejoin: "round" }),
+            React.createElement("path", { d: "M85.65 88.9l78.5 81.2M164.15 88.9l-78.5 81.2", strokeMiterlimit: 10 }),
+            React.createElement("path", { d: "M79.05 102.3h-22.4a24.602 24.602 0 01-23.032-24.55A24.6 24.6 0 0156.65 53.2h10.7v11.6h-10.7a13 13 0 000 25.9h22.4v11.6z", fill: "url(#no-content_svg__paint8_linear_3554_6896)", strokeMiterlimit: 10 }),
+            React.createElement("path", { d: "M79.05 87.3h-8.2v18.42h8.2V87.3z", fill: "#000", strokeMiterlimit: 10 }),
+            React.createElement("path", { d: "M70.75 88.9h-8.2v15.28h8.2V88.9z", fill: "#BDC4CF", strokeMiterlimit: 10 })),
+        React.createElement("defs", null,
+            React.createElement("linearGradient", { id: "no-content_svg__paint0_linear_3554_6896", x1: 67.28, y1: 120.11, x2: 182.46, y2: 120.11, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#E8EBED" }),
+                React.createElement("stop", { offset: 1, stopColor: "#fff" })),
+            React.createElement("linearGradient", { id: "no-content_svg__paint1_linear_3554_6896", x1: 5888.31, y1: 12915.3, x2: 19157, y2: 12915.3, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#E8EBED" }),
+                React.createElement("stop", { offset: 1, stopColor: "#fff" })),
+            React.createElement("linearGradient", { id: "no-content_svg__paint2_linear_3554_6896", x1: 5888.31, y1: 12453.7, x2: 19157, y2: 12453.7, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#E8EBED" }),
+                React.createElement("stop", { offset: 1, stopColor: "#fff" })),
+            React.createElement("linearGradient", { id: "no-content_svg__paint3_linear_3554_6896", x1: 5888.31, y1: 11982.9, x2: 19157, y2: 11982.9, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#E8EBED" }),
+                React.createElement("stop", { offset: 1, stopColor: "#fff" })),
+            React.createElement("linearGradient", { id: "no-content_svg__paint4_linear_3554_6896", x1: 5015.9, y1: 770.778, x2: 6474.37, y2: 770.778, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#E8EBED" }),
+                React.createElement("stop", { offset: 1, stopColor: "#fff" })),
+            React.createElement("linearGradient", { id: "no-content_svg__paint5_linear_3554_6896", x1: 79.054, y1: 59.094, x2: 108.054, y2: 59.094, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#635DFF" }),
+                React.createElement("stop", { offset: 1, stopColor: "#3885FF" })),
+            React.createElement("linearGradient", { id: "no-content_svg__paint6_linear_3554_6896", x1: 1509.32, y1: 597.644, x2: 1980.87, y2: 597.644, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#E8EBED" }),
+                React.createElement("stop", { offset: 1, stopColor: "#fff" })),
+            React.createElement("linearGradient", { id: "no-content_svg__paint7_linear_3554_6896", x1: 79.046, y1: 129.498, x2: 170.645, y2: 129.498, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#FF4F40" }),
+                React.createElement("stop", { offset: 1, stopColor: "#F4D" })),
+            React.createElement("linearGradient", { id: "no-content_svg__paint8_linear_3554_6896", x1: 26.877, y1: 55.072, x2: 59.794, y2: 115.027, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#3EC6EB" }),
+                React.createElement("stop", { offset: 0.999, stopColor: "#1BC99F" })),
+            React.createElement("clipPath", { id: "no-content_svg__clip0_3554_6896" },
+                React.createElement("path", { fill: "#fff", transform: "translate(16.75 33.7)", d: "M0 0h216.5v182.6H0z" })))));
+}, {
+    name: illustrationComponentName,
+})({});

package/esm/pagination/pagination.js

@@ -27,8 +27,8 @@ import { styled } from '../styled';
 import { useMergedClasses } from '../styles/classes';
 import { Text } from '../text';
 import clsx from '../utils/clsx';
-import { paginationComponentName, paginationClasses, getPaginationUtilityClass, } from './pagination-classes';
 import { Pager } from './pager';
+import { getPaginationUtilityClass, paginationClasses, paginationComponentName, } from './pagination-classes';
 var Root = styled('fieldset', { name: paginationComponentName, slot: 'Root' })(function (_a) {
     var ownerState = _a.ownerState;
     return (__assign({ justifyContent: 'space-between', display: 'flex', alignItems: 'center', margin: 0, padding: 0, border: 'none' }, (ownerState.disabled && {
@@ -61,7 +61,7 @@ var changePageIfAppropriate = function (_a) {
     }
 };
 export var Pagination = React.forwardRef(function (props, ref) {
-    var children = props.children, className = props.className, page = props.page, perPage = props.perPage, items = props.items, onPageChanged = props.onPageChanged, disabled = props.disabled, propClasses = props.classes, _a = props.PagerProps, PagerProps = _a === void 0 ? {} : _a, rootProps = __rest(props, ["children", "className", "page", "perPage", "items", "onPageChanged", "disabled", "classes", "PagerProps"]);
+    var children = props.children, className = props.className, page = props.page, perPage = props.perPage, items = props.items, _a = props.showPageSelection, showPageSelection = _a === void 0 ? false : _a, onPageChanged = props.onPageChanged, disabled = props.disabled, propClasses = props.classes, _b = props.PagerProps, PagerProps = _b === void 0 ? {} : _b, rootProps = __rest(props, ["children", "className", "page", "perPage", "items", "showPageSelection", "onPageChanged", "disabled", "classes", "PagerProps"]);
     var classes = useMergedClasses(paginationClasses, getPaginationUtilityClass, propClasses);
     var pages = pagesFromItems(items, perPage);
     var pageOptions = React.useMemo(function () {
@@ -96,5 +96,15 @@ export var Pagination = React.forwardRef(function (props, ref) {
                 React.createElement(Text, { className: classes.pageLabelText, variant: "body2" },
                     "of ",
                     pages))),
-        React.createElement(Pager, __assign({ page: page, className: classes.pager, onPageChange: function (nextPage) { return changePageIfAppropriate({ nextPage: nextPage, total: items, perPage: perPage, onPageChanged: onPageChanged }); }, totalPages: pages, disabled: disabled }, PagerProps))))));
+        React.createElement(StackLayout, null,
+            showPageSelection && (React.createElement(StackLayoutItem, null,
+                React.createElement(Text, null,
+                    "Showing ",
+                    page * perPage - perPage + 1,
+                    " to ",
+                    page * perPage,
+                    " of ",
+                    items))),
+            React.createElement(StackLayoutItem, null,
+                React.createElement(Pager, __assign({ page: page, className: classes.pager, onPageChange: function (nextPage) { return changePageIfAppropriate({ nextPage: nextPage, total: items, perPage: perPage, onPageChanged: onPageChanged }); }, totalPages: pages, disabled: disabled }, PagerProps))))))));
 });

package/esm/status/status-dot/status-dot.js

@@ -49,6 +49,16 @@ var Dot = styled('span', { name: statusDotComponentName, slot: 'Dot' })(function
         },
     }[color]));
 });
+var Label = styled('span')(function (_a) {
+    var width = _a.width, maxWidth = _a.maxWidth;
+    return ({
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+        width: width,
+        maxWidth: maxWidth,
+    });
+});
 var DetailsIcon = styled('div', { name: statusDotComponentName, slot: 'DetailsIcon' })(function (_a) {
     var theme = _a.theme;
     return ({
@@ -58,14 +68,16 @@ var DetailsIcon = styled('div', { name: statusDotComponentName, slot: 'DetailsIc
 });
 export var StatusDot = React.forwardRef(function (props, ref) {
     var _a = props.color, color = _a === void 0 ? 'default' : _a, textColor = props.textColor, _b = props.textVariant, textVariant = _b === void 0 ? 'body2' : _b, className = props.className, children = props.children, label = props.label, details = props.details, // remove to prevent passing through to the root
-    propClasses = props.classes, rootProps = __rest(props, ["color", "textColor", "textVariant", "className", "children", "label", "details", "classes"]);
+    propClasses = props.classes, _c = props.sx, sx = _c === void 0 ? {} : _c, rootProps = __rest(props, ["color", "textColor", "textVariant", "className", "children", "label", "details", "classes", "sx"]);
+    var _d = sx, width = _d.width, maxWidth = _d.maxWidth;
     var classes = useMergedClasses(statusDotClasses, getStatusDotUtilityClass, propClasses);
     var ownerState = {
         color: color,
     };
     return (React.createElement(Root, __assign({ ref: ref, component: "span", variant: textVariant, color: textColor, className: clsx(classes.root, className) }, rootProps),
         React.createElement(Dot, { role: "img", ownerState: ownerState, className: classes.dot }),
-        label,
+        !!label && (React.createElement(Tooltip, { title: label },
+            React.createElement(Label, { width: width, maxWidth: maxWidth }, label))),
         !!details && (React.createElement(Tooltip, { title: details },
             React.createElement(DetailsIcon, null,
                 React.createElement(HelpCircleIcon, { size: "1em" }))))));

package/illustrations/components/index.d.ts

@@ -1,5 +1,6 @@
 export { IllustrationExperiencedUser } from './experienced-user';
 export { IllustrationNewAuth0UserA } from './new-auth0-user-a';
+export { IllustrationNoContent } from './no-content';
 export { IllustrationNotifications } from './notifications';
 export { IllustrationRoles } from './roles';
 export { IllustrationSingleSignOn } from './single-sign-on';

package/illustrations/components/index.js

@@ -4,11 +4,13 @@ This file is generated. Any changes made to this file will be lost.
 To update this output make changes to `scripts/svgr/illustration-index-template.js`
 */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IllustrationUsers = exports.IllustrationStreamsLogs = exports.IllustrationSingleSignOn = exports.IllustrationRoles = exports.IllustrationNotifications = exports.IllustrationNewAuth0UserA = exports.IllustrationExperiencedUser = void 0;
+exports.IllustrationUsers = exports.IllustrationStreamsLogs = exports.IllustrationSingleSignOn = exports.IllustrationRoles = exports.IllustrationNotifications = exports.IllustrationNoContent = exports.IllustrationNewAuth0UserA = exports.IllustrationExperiencedUser = void 0;
 var experienced_user_1 = require("./experienced-user");
 Object.defineProperty(exports, "IllustrationExperiencedUser", { enumerable: true, get: function () { return experienced_user_1.IllustrationExperiencedUser; } });
 var new_auth0_user_a_1 = require("./new-auth0-user-a");
 Object.defineProperty(exports, "IllustrationNewAuth0UserA", { enumerable: true, get: function () { return new_auth0_user_a_1.IllustrationNewAuth0UserA; } });
+var no_content_1 = require("./no-content");
+Object.defineProperty(exports, "IllustrationNoContent", { enumerable: true, get: function () { return no_content_1.IllustrationNoContent; } });
 var notifications_1 = require("./notifications");
 Object.defineProperty(exports, "IllustrationNotifications", { enumerable: true, get: function () { return notifications_1.IllustrationNotifications; } });
 var roles_1 = require("./roles");

package/illustrations/components/no-content.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IIllustrationProps } from '../common';
+export declare const IllustrationNoContent: import("styled-components").StyledComponent<({ ...props }: IIllustrationProps) => React.JSX.Element, import("../..").ITheme, import("@mui/system").MUIStyledCommonProps<import("../..").ITheme>, never>;

package/illustrations/components/no-content.js

@@ -0,0 +1,106 @@
+"use strict";
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IllustrationNoContent = void 0;
+/*
+    This file is generated with the "illustrations" script.
+    To update this output make changes to `scripts/svgr/illustration-icon-template.js
+    */
+var React = __importStar(require("react"));
+var common_1 = require("../common");
+var styled_1 = require("../../styled");
+exports.IllustrationNoContent = (0, styled_1.styled)(function (_a) {
+    var props = __rest(_a, []);
+    return (React.createElement("svg", __assign({ width: "1em", height: "1em", viewBox: "0 0 250 250", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React.createElement("g", { clipPath: "url(#no-content_svg__clip0_3554_6896)", stroke: "#000", strokeWidth: 0.4 },
+            React.createElement("path", { d: "M232.75 216.1l-33.4-33.4H50.65l-33.4 33.4h215.5z", fill: "#BDC4CF", strokeMiterlimit: 10 }),
+            React.createElement("path", { d: "M50.65 182.7v33.4M199.25 182.7v33.4", strokeMiterlimit: 10 }),
+            React.createElement("path", { d: "M182.45 197.3H67.25V42.9h77l38.2 38.2v116.2z", fill: "url(#no-content_svg__paint0_linear_3554_6896)", strokeMiterlimit: 10 }),
+            React.createElement("path", { d: "M182.45 194.3H67.25V39.9h77l38.2 38.2v116.2z", fill: "url(#no-content_svg__paint1_linear_3554_6896)", strokeMiterlimit: 10 }),
+            React.createElement("path", { d: "M182.45 191.3H67.25V36.9h77l38.2 38.2v116.2z", fill: "url(#no-content_svg__paint2_linear_3554_6896)", strokeMiterlimit: 10 }),
+            React.createElement("path", { d: "M182.45 188.3H67.25V33.9h77l38.2 38.2v116.2z", fill: "url(#no-content_svg__paint3_linear_3554_6896)", strokeMiterlimit: 10 }),
+            React.createElement("path", { d: "M182.45 72.1h-38.2V33.9l38.2 38.2z", fill: "url(#no-content_svg__paint4_linear_3554_6896)", strokeLinejoin: "bevel" }),
+            React.createElement("path", { d: "M108.05 44.6h-29v28.99h29V44.6z", fill: "url(#no-content_svg__paint5_linear_3554_6896)", strokeLinejoin: "round" }),
+            React.createElement("path", { d: "M104.25 50.5l-2.4-2.3-8.5 8.5-8.5-8.5-2.3 2.3 8.5 8.5-8.5 8.5 2.3 2.4 8.5-8.5 8.5 8.5 2.4-2.4-8.5-8.5 8.5-8.5z", fill: "url(#no-content_svg__paint6_linear_3554_6896)", strokeMiterlimit: 10 }),
+            React.createElement("path", { d: "M170.65 82.4h-91.6v94.2h91.6V82.4z", fill: "url(#no-content_svg__paint7_linear_3554_6896)", strokeLinejoin: "round" }),
+            React.createElement("path", { d: "M85.65 88.9l78.5 81.2M164.15 88.9l-78.5 81.2", strokeMiterlimit: 10 }),
+            React.createElement("path", { d: "M79.05 102.3h-22.4a24.602 24.602 0 01-23.032-24.55A24.6 24.6 0 0156.65 53.2h10.7v11.6h-10.7a13 13 0 000 25.9h22.4v11.6z", fill: "url(#no-content_svg__paint8_linear_3554_6896)", strokeMiterlimit: 10 }),
+            React.createElement("path", { d: "M79.05 87.3h-8.2v18.42h8.2V87.3z", fill: "#000", strokeMiterlimit: 10 }),
+            React.createElement("path", { d: "M70.75 88.9h-8.2v15.28h8.2V88.9z", fill: "#BDC4CF", strokeMiterlimit: 10 })),
+        React.createElement("defs", null,
+            React.createElement("linearGradient", { id: "no-content_svg__paint0_linear_3554_6896", x1: 67.28, y1: 120.11, x2: 182.46, y2: 120.11, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#E8EBED" }),
+                React.createElement("stop", { offset: 1, stopColor: "#fff" })),
+            React.createElement("linearGradient", { id: "no-content_svg__paint1_linear_3554_6896", x1: 5888.31, y1: 12915.3, x2: 19157, y2: 12915.3, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#E8EBED" }),
+                React.createElement("stop", { offset: 1, stopColor: "#fff" })),
+            React.createElement("linearGradient", { id: "no-content_svg__paint2_linear_3554_6896", x1: 5888.31, y1: 12453.7, x2: 19157, y2: 12453.7, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#E8EBED" }),
+                React.createElement("stop", { offset: 1, stopColor: "#fff" })),
+            React.createElement("linearGradient", { id: "no-content_svg__paint3_linear_3554_6896", x1: 5888.31, y1: 11982.9, x2: 19157, y2: 11982.9, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#E8EBED" }),
+                React.createElement("stop", { offset: 1, stopColor: "#fff" })),
+            React.createElement("linearGradient", { id: "no-content_svg__paint4_linear_3554_6896", x1: 5015.9, y1: 770.778, x2: 6474.37, y2: 770.778, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#E8EBED" }),
+                React.createElement("stop", { offset: 1, stopColor: "#fff" })),
+            React.createElement("linearGradient", { id: "no-content_svg__paint5_linear_3554_6896", x1: 79.054, y1: 59.094, x2: 108.054, y2: 59.094, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#635DFF" }),
+                React.createElement("stop", { offset: 1, stopColor: "#3885FF" })),
+            React.createElement("linearGradient", { id: "no-content_svg__paint6_linear_3554_6896", x1: 1509.32, y1: 597.644, x2: 1980.87, y2: 597.644, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#E8EBED" }),
+                React.createElement("stop", { offset: 1, stopColor: "#fff" })),
+            React.createElement("linearGradient", { id: "no-content_svg__paint7_linear_3554_6896", x1: 79.046, y1: 129.498, x2: 170.645, y2: 129.498, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#FF4F40" }),
+                React.createElement("stop", { offset: 1, stopColor: "#F4D" })),
+            React.createElement("linearGradient", { id: "no-content_svg__paint8_linear_3554_6896", x1: 26.877, y1: 55.072, x2: 59.794, y2: 115.027, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#3EC6EB" }),
+                React.createElement("stop", { offset: 0.999, stopColor: "#1BC99F" })),
+            React.createElement("clipPath", { id: "no-content_svg__clip0_3554_6896" },
+                React.createElement("path", { fill: "#fff", transform: "translate(16.75 33.7)", d: "M0 0h216.5v182.6H0z" })))));
+}, {
+    name: common_1.illustrationComponentName,
+})({});

package/package.json

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

package/pagination/pagination.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { IStyledComponentProps } from '../styled';
-import { PaginationClasses } from './pagination-classes';
 import { IPagerProps } from './pager';
+import { PaginationClasses } from './pagination-classes';
 export type IPaginationProps = IStyledComponentProps<{
     props: {
         items: number;
+        showPageSelection?: boolean;
         page: number;
         perPage: number;
         disabled?: boolean;
@@ -16,10 +17,11 @@ export type IPaginationProps = IStyledComponentProps<{
 }>;
 export declare const Pagination: React.ForwardRefExoticComponent<{
     items: number;
+    showPageSelection?: boolean | undefined;
     page: number;
     perPage: number;
     disabled?: boolean | undefined;
     onPageChanged(page: number): void;
     PagerProps?: Partial<IPagerProps> | undefined;
     classes?: Partial<Record<"root" | "pageSelect" | "pageLabelText" | "pager", string>> | undefined;
-} & Omit<React.DetailedHTMLProps<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref" | "disabled" | "page" | "classes" | "items" | "perPage" | "onPageChanged" | "PagerProps"> & import("../styled").IStyledCommonProps & React.RefAttributes<HTMLFieldSetElement>>;
+} & Omit<React.DetailedHTMLProps<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref" | "disabled" | "page" | "classes" | "items" | "showPageSelection" | "perPage" | "onPageChanged" | "PagerProps"> & import("../styled").IStyledCommonProps & React.RefAttributes<HTMLFieldSetElement>>;

package/pagination/pagination.js

@@ -56,8 +56,8 @@ var styled_1 = require("../styled");
 var classes_1 = require("../styles/classes");
 var text_1 = require("../text");
 var clsx_1 = __importDefault(require("../utils/clsx"));
-var pagination_classes_1 = require("./pagination-classes");
 var pager_1 = require("./pager");
+var pagination_classes_1 = require("./pagination-classes");
 var Root = (0, styled_1.styled)('fieldset', { name: pagination_classes_1.paginationComponentName, slot: 'Root' })(function (_a) {
     var ownerState = _a.ownerState;
     return (__assign({ justifyContent: 'space-between', display: 'flex', alignItems: 'center', margin: 0, padding: 0, border: 'none' }, (ownerState.disabled && {
@@ -90,7 +90,7 @@ var changePageIfAppropriate = function (_a) {
     }
 };
 exports.Pagination = React.forwardRef(function (props, ref) {
-    var children = props.children, className = props.className, page = props.page, perPage = props.perPage, items = props.items, onPageChanged = props.onPageChanged, disabled = props.disabled, propClasses = props.classes, _a = props.PagerProps, PagerProps = _a === void 0 ? {} : _a, rootProps = __rest(props, ["children", "className", "page", "perPage", "items", "onPageChanged", "disabled", "classes", "PagerProps"]);
+    var children = props.children, className = props.className, page = props.page, perPage = props.perPage, items = props.items, _a = props.showPageSelection, showPageSelection = _a === void 0 ? false : _a, onPageChanged = props.onPageChanged, disabled = props.disabled, propClasses = props.classes, _b = props.PagerProps, PagerProps = _b === void 0 ? {} : _b, rootProps = __rest(props, ["children", "className", "page", "perPage", "items", "showPageSelection", "onPageChanged", "disabled", "classes", "PagerProps"]);
     var classes = (0, classes_1.useMergedClasses)(pagination_classes_1.paginationClasses, pagination_classes_1.getPaginationUtilityClass, propClasses);
     var pages = pagesFromItems(items, perPage);
     var pageOptions = React.useMemo(function () {
@@ -125,5 +125,15 @@ exports.Pagination = React.forwardRef(function (props, ref) {
                 React.createElement(text_1.Text, { className: classes.pageLabelText, variant: "body2" },
                     "of ",
                     pages))),
-        React.createElement(pager_1.Pager, __assign({ page: page, className: classes.pager, onPageChange: function (nextPage) { return changePageIfAppropriate({ nextPage: nextPage, total: items, perPage: perPage, onPageChanged: onPageChanged }); }, totalPages: pages, disabled: disabled }, PagerProps))))));
+        React.createElement(stack_layout_1.StackLayout, null,
+            showPageSelection && (React.createElement(stack_layout_1.StackLayoutItem, null,
+                React.createElement(text_1.Text, null,
+                    "Showing ",
+                    page * perPage - perPage + 1,
+                    " to ",
+                    page * perPage,
+                    " of ",
+                    items))),
+            React.createElement(stack_layout_1.StackLayoutItem, null,
+                React.createElement(pager_1.Pager, __assign({ page: page, className: classes.pager, onPageChange: function (nextPage) { return changePageIfAppropriate({ nextPage: nextPage, total: items, perPage: perPage, onPageChanged: onPageChanged }); }, totalPages: pages, disabled: disabled }, PagerProps))))))));
 });

package/status/status-dot/status-dot.js

@@ -78,6 +78,16 @@ var Dot = (0, styled_1.styled)('span', { name: status_dot_classes_1.statusDotCom
         },
     }[color]));
 });
+var Label = (0, styled_1.styled)('span')(function (_a) {
+    var width = _a.width, maxWidth = _a.maxWidth;
+    return ({
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+        width: width,
+        maxWidth: maxWidth,
+    });
+});
 var DetailsIcon = (0, styled_1.styled)('div', { name: status_dot_classes_1.statusDotComponentName, slot: 'DetailsIcon' })(function (_a) {
     var theme = _a.theme;
     return ({
@@ -87,14 +97,16 @@ var DetailsIcon = (0, styled_1.styled)('div', { name: status_dot_classes_1.statu
 });
 exports.StatusDot = React.forwardRef(function (props, ref) {
     var _a = props.color, color = _a === void 0 ? 'default' : _a, textColor = props.textColor, _b = props.textVariant, textVariant = _b === void 0 ? 'body2' : _b, className = props.className, children = props.children, label = props.label, details = props.details, // remove to prevent passing through to the root
-    propClasses = props.classes, rootProps = __rest(props, ["color", "textColor", "textVariant", "className", "children", "label", "details", "classes"]);
+    propClasses = props.classes, _c = props.sx, sx = _c === void 0 ? {} : _c, rootProps = __rest(props, ["color", "textColor", "textVariant", "className", "children", "label", "details", "classes", "sx"]);
+    var _d = sx, width = _d.width, maxWidth = _d.maxWidth;
     var classes = (0, classes_1.useMergedClasses)(status_dot_classes_1.statusDotClasses, status_dot_classes_1.getStatusDotUtilityClass, propClasses);
     var ownerState = {
         color: color,
     };
     return (React.createElement(Root, __assign({ ref: ref, component: "span", variant: textVariant, color: textColor, className: (0, clsx_1.default)(classes.root, className) }, rootProps),
         React.createElement(Dot, { role: "img", ownerState: ownerState, className: classes.dot }),
-        label,
+        !!label && (React.createElement(tooltip_1.Tooltip, { title: label },
+            React.createElement(Label, { width: width, maxWidth: maxWidth }, label))),
         !!details && (React.createElement(tooltip_1.Tooltip, { title: details },
             React.createElement(DetailsIcon, null,
                 React.createElement(icon_1.HelpCircleIcon, { size: "1em" }))))));