@auth0/quantum-product 2.4.3 → 2.4.5

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/card/card.js

@@ -85,7 +85,7 @@ var Root = (0, styled_1.styled)(Card_1.default, {
         },
     };
     var defaultBorderStyle = {
-        '&:hover': theme.palette.mode === 'dark' && {
+        '&:hover': {
             borderColor: theme.tokens.color_border_bold,
         },
     };
@@ -98,6 +98,7 @@ var Root = (0, styled_1.styled)(Card_1.default, {
         '&:hover': theme.palette.mode === 'light'
             ? {
                 boxShadow: theme.palette.mode === 'light' ? theme.shadows[1] : theme.shadows[2],
+                borderColor: theme.tokens.color_border_bold,
             }
             : {
                 backgroundColor: (0, color_manipulator_1.fade)(theme.palette.action.hoverBackground, 0.1),

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

@@ -72,6 +72,6 @@ exports.DialogTitle = React.forwardRef(function (props, ref) {
     var classes = (0, classes_1.useMergedClasses)(dialog_title_classes_1.dialogTitleClasses, dialog_title_classes_1.getDialogTitleUtilityClass, propClasses);
     return (React.createElement(Root, __assign({}, dialogTitleProps, { className: (0, clsx_1.default)(classes.root, className), ref: ref }),
         disableTypography ? (children) : (React.createElement(text_1.Text, { id: id, className: classes.title, variant: "h5", color: "textPrimary" }, children)),
-        !!onClose && (React.createElement(icon_button_1.IconButton, { shape: "circular", variant: "contained", "aria-label": "Close", size: "small", className: classes.closeButton, onClick: function (event) { return onClose(event, 'closeClick'); }, label: "close button" },
+        !!onClose && (React.createElement(icon_button_1.IconButton, { shape: "circular", variant: "contained", "aria-label": "Close", size: "small", className: classes.closeButton, onClick: function (event) { return onClose(event, 'closeClick'); }, label: "Close" },
             React.createElement(icon_1.XIcon, null)))));
 });

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/card/card.js

@@ -56,7 +56,7 @@ var Root = styled(MuiCard, {
         },
     };
     var defaultBorderStyle = {
-        '&:hover': theme.palette.mode === 'dark' && {
+        '&:hover': {
             borderColor: theme.tokens.color_border_bold,
         },
     };
@@ -69,6 +69,7 @@ var Root = styled(MuiCard, {
         '&:hover': theme.palette.mode === 'light'
             ? {
                 boxShadow: theme.palette.mode === 'light' ? theme.shadows[1] : theme.shadows[2],
+                borderColor: theme.tokens.color_border_bold,
             }
             : {
                 backgroundColor: fade(theme.palette.action.hoverBackground, 0.1),

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

@@ -43,6 +43,6 @@ export var DialogTitle = React.forwardRef(function (props, ref) {
     var classes = useMergedClasses(dialogTitleClasses, getDialogTitleUtilityClass, propClasses);
     return (React.createElement(Root, __assign({}, dialogTitleProps, { className: clsx(classes.root, className), ref: ref }),
         disableTypography ? (children) : (React.createElement(Text, { id: id, className: classes.title, variant: "h5", color: "textPrimary" }, children)),
-        !!onClose && (React.createElement(IconButton, { shape: "circular", variant: "contained", "aria-label": "Close", size: "small", className: classes.closeButton, onClick: function (event) { return onClose(event, 'closeClick'); }, label: "close button" },
+        !!onClose && (React.createElement(IconButton, { shape: "circular", variant: "contained", "aria-label": "Close", size: "small", className: classes.closeButton, onClick: function (event) { return onClose(event, 'closeClick'); }, label: "Close" },
             React.createElement(XIcon, null)))));
 });

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/promo-banner/promo-banner.js

@@ -94,15 +94,21 @@ var PrimaryActionButton = styled(Button, { name: promoBannerComponentName, slot:
         background: theme.tokens.color_bg_button_inverse_static,
     };
     var showWhiteButtonBackground = ownerState.color !== 'dark' && ownerState.color !== 'default' && whiteButtonBackground;
-    return __assign(__assign({}, showWhiteButtonBackground), { color: buttonColor, '&:hover': __assign({}, showWhiteButtonBackground), '&:focus': __assign({}, theme.mixins.focusRing({ color: theme.tokens.color_fg_inverse_static })) });
+    return __assign(__assign({}, showWhiteButtonBackground), { color: buttonColor, '&:hover': __assign({}, showWhiteButtonBackground), '&:focus': __assign({}, theme.mixins.focusRing({
+            color: showWhiteButtonBackground ? theme.tokens.color_fg_inverse_static : theme.tokens.color_border_focus,
+        })) });
 });
 var SecondaryActionButton = styled(Button, { name: promoBannerComponentName, slot: 'SecondaryAction' })(function (_a) {
     var theme = _a.theme, ownerState = _a.ownerState;
+    var shouldShowWhiteFocusRing = ownerState.color !== 'dark' && ownerState.color !== 'default';
     return {
         color: ownerState.color !== 'default' ? theme.tokens.color_fg_on_button_primary : theme.tokens.color_fg_link_primary,
         '&:hover': {
             backgroundColor: theme.tokens.color_bg_link_inverse_static_hover,
         },
+        '&:focus': __assign({}, theme.mixins.focusRing({
+            color: shouldShowWhiteFocusRing ? theme.tokens.color_fg_inverse_static : theme.tokens.color_border_focus,
+        })),
     };
 });
 var ImageContainer = styled('div', { name: promoBannerComponentName, slot: 'ImageContainer' })(function (_a) {

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,15 @@ 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(Label, { width: width, maxWidth: maxWidth, title: label }, label)),
         !!details && (React.createElement(Tooltip, { title: details },
             React.createElement(DetailsIcon, null,
                 React.createElement(HelpCircleIcon, { size: "1em" }))))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auth0/quantum-product",
-  "version": "2.4.3",
+  "version": "2.4.5",
   "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/promo-banner/promo-banner.js

@@ -123,15 +123,21 @@ var PrimaryActionButton = (0, styled_1.styled)(button_1.Button, { name: promo_ba
         background: theme.tokens.color_bg_button_inverse_static,
     };
     var showWhiteButtonBackground = ownerState.color !== 'dark' && ownerState.color !== 'default' && whiteButtonBackground;
-    return __assign(__assign({}, showWhiteButtonBackground), { color: buttonColor, '&:hover': __assign({}, showWhiteButtonBackground), '&:focus': __assign({}, theme.mixins.focusRing({ color: theme.tokens.color_fg_inverse_static })) });
+    return __assign(__assign({}, showWhiteButtonBackground), { color: buttonColor, '&:hover': __assign({}, showWhiteButtonBackground), '&:focus': __assign({}, theme.mixins.focusRing({
+            color: showWhiteButtonBackground ? theme.tokens.color_fg_inverse_static : theme.tokens.color_border_focus,
+        })) });
 });
 var SecondaryActionButton = (0, styled_1.styled)(button_1.Button, { name: promo_banner_classes_1.promoBannerComponentName, slot: 'SecondaryAction' })(function (_a) {
     var theme = _a.theme, ownerState = _a.ownerState;
+    var shouldShowWhiteFocusRing = ownerState.color !== 'dark' && ownerState.color !== 'default';
     return {
         color: ownerState.color !== 'default' ? theme.tokens.color_fg_on_button_primary : theme.tokens.color_fg_link_primary,
         '&:hover': {
             backgroundColor: theme.tokens.color_bg_link_inverse_static_hover,
         },
+        '&:focus': __assign({}, theme.mixins.focusRing({
+            color: shouldShowWhiteFocusRing ? theme.tokens.color_fg_inverse_static : theme.tokens.color_border_focus,
+        })),
     };
 });
 var ImageContainer = (0, styled_1.styled)('div', { name: promo_banner_classes_1.promoBannerComponentName, slot: 'ImageContainer' })(function (_a) {

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,15 @@ 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(Label, { width: width, maxWidth: maxWidth, title: label }, label)),
         !!details && (React.createElement(tooltip_1.Tooltip, { title: details },
             React.createElement(DetailsIcon, null,
                 React.createElement(icon_1.HelpCircleIcon, { size: "1em" }))))));