@auth0/quantum-product 2.5.9 → 2.6.0

package/breadcrumbs/breadcrumbs-item/breadcrumbs-item.js

@@ -95,9 +95,9 @@ var EndIcon = (0, styled_1.styled)('span', {
     });
 });
 exports.BreadcrumbsItem = React.forwardRef(function (props, ref) {
-    var label = props.label, startIcon = props.startIcon, endIcon = props.endIcon, className = props.className, isCurrent = props.isCurrent, children = props.children, propClasses = props.classes, rootProps = __rest(props, ["label", "startIcon", "endIcon", "className", "isCurrent", "children", "classes"]);
+    var label = props.label, startIcon = props.startIcon, endIcon = props.endIcon, className = props.className, isCurrent = props.isCurrent, children = props.children, propClasses = props.classes, analyticsId = props.analyticsId, rootProps = __rest(props, ["label", "startIcon", "endIcon", "className", "isCurrent", "children", "classes", "analyticsId"]);
     var classes = (0, classes_1.useMergedClasses)(breadcrumbs_item_classes_1.breadcrumbsItemClasses, breadcrumbs_item_classes_1.getBreadcrumbsItemUtilityClass, propClasses);
-    return (React.createElement(Root, __assign({ variant: "subtitle2", color: isCurrent ? 'textPrimary' : 'textSecondary', className: (0, clsx_1.default)(classes.root, isCurrent && classes.current, className), "aria-current": isCurrent ? 'page' : undefined, ref: ref }, rootProps),
+    return (React.createElement(Root, __assign({ variant: "subtitle2", color: isCurrent ? 'textPrimary' : 'textSecondary', className: (0, clsx_1.default)(classes.root, isCurrent && classes.current, className), "aria-current": isCurrent ? 'page' : undefined, ref: ref, analyticsId: analyticsId }, rootProps),
         !!startIcon && React.createElement(StartIcon, { className: (0, clsx_1.default)(classes.icon, classes.startIcon) }, startIcon),
         React.createElement("span", { className: classes.label }, label || children),
         !!endIcon && React.createElement(EndIcon, { className: (0, clsx_1.default)(classes.icon, classes.endIcon) }, endIcon)));

package/button/button.d.ts

@@ -14,6 +14,7 @@ export interface IButtonTypeMap<P = {}, D extends React.ElementType = 'button'>
         label?: React.ReactNode;
         SpinnerProps?: Partial<ISpinnerProps>;
         maxWidth?: string;
+        analyticsId?: string;
     };
     defaultComponent: D;
 }

package/button/button.js

@@ -86,14 +86,14 @@ var LabelSpan = (0, styled_1.styled)('span')(function (_a) {
     });
 });
 exports.Button = React.forwardRef(function (_a, ref) {
-    var isLoading = _a.isLoading, label = _a.label, children = _a.children, disabled = _a.disabled, _b = _a.SpinnerProps, SpinnerProps = _b === void 0 ? {} : _b, _c = _a.color, color = _c === void 0 ? 'default' : _c, variant = _a.variant, maxWidth = _a.maxWidth, rootProps = __rest(_a, ["isLoading", "label", "children", "disabled", "SpinnerProps", "color", "variant", "maxWidth"]);
+    var isLoading = _a.isLoading, label = _a.label, children = _a.children, disabled = _a.disabled, _b = _a.SpinnerProps, SpinnerProps = _b === void 0 ? {} : _b, _c = _a.color, color = _c === void 0 ? 'default' : _c, variant = _a.variant, maxWidth = _a.maxWidth, analyticsId = _a.analyticsId, rootProps = __rest(_a, ["isLoading", "label", "children", "disabled", "SpinnerProps", "color", "variant", "maxWidth", "analyticsId"]);
     var title = label ||
         (typeof children === 'string'
             ? children
             : React.Children.toArray(children)
                 .filter(function (child) { return typeof child === 'string'; })
                 .join(''));
-    return (React.createElement(Root, __assign({}, rootProps, { disabled: disabled || isLoading, ownerState: { isLoading: isLoading }, color: color, variant: variant, ref: ref, title: String(title) }),
+    return (React.createElement(Root, __assign({}, rootProps, { disabled: disabled || isLoading, ownerState: { isLoading: isLoading }, color: color, variant: variant, ref: ref, title: String(title) }, (analyticsId && { 'data-analytics-id': analyticsId })),
         React.createElement(LabelSpan, { style: { maxWidth: rootProps.fullWidth ? 'none' : maxWidth || '100%' } }, label || children),
         ' ',
         !!isLoading && React.createElement(ButtonSpinner, __assign({}, SpinnerProps))));

package/card/card.d.ts

@@ -17,6 +17,7 @@ export interface ICardTypeMap<P = {}, D extends React.ElementType = 'div'> {
          * @default outlined
          */
         variant?: PaperProps['variant'];
+        analyticsId?: string;
     };
     defaultComponent: D;
 }

package/card/card.js

@@ -121,7 +121,7 @@ var Root = (0, styled_1.styled)(Card_1.default, {
 exports.Card = React.forwardRef(function (props, ref) {
     var button = props.button, _a = props.component, component = _a === void 0 ? 'div' : _a, disabled = props.disabled, className = props.className, selected = props.selected, selectableButton = props.selectableButton, _b = props.size, size = _b === void 0 ? 'large' : _b, 
     // remove to prevent passing through to the root
-    propClasses = props.classes, rootProps = __rest(props, ["button", "component", "disabled", "className", "selected", "selectableButton", "size", "classes"]);
+    propClasses = props.classes, analyticsId = props.analyticsId, rootProps = __rest(props, ["button", "component", "disabled", "className", "selected", "selectableButton", "size", "classes", "analyticsId"]);
     return (React.createElement(card_context_1.CardContext.Provider, { value: { size: size } },
         React.createElement(Root, __assign({}, { component: component }, { ownerState: {
                 size: size,
@@ -129,5 +129,5 @@ exports.Card = React.forwardRef(function (props, ref) {
                 selectableButton: selectableButton,
                 button: button,
                 selected: selected,
-            } }, rootProps, { className: className, role: button ? 'button' : undefined, tabIndex: button && !disabled ? 0 : undefined, "aria-disabled": disabled, ref: ref }))));
+            } }, (analyticsId && { 'data-analytics-id': analyticsId }), rootProps, { className: className, role: button ? 'button' : undefined, tabIndex: button && !disabled ? 0 : undefined, "aria-disabled": disabled, ref: ref }))));
 });

package/chip/chip.d.ts

@@ -3,5 +3,6 @@ import { ChipProps } from '@mui/material/Chip';
 export declare const chipComponentName: "QuantumChip";
 export interface IChipProps extends Omit<ChipProps, 'color' | 'variant'> {
     selected?: boolean;
+    analyticsId?: string;
 }
 export declare const Chip: React.ForwardRefExoticComponent<Omit<IChipProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/chip/chip.js

@@ -81,6 +81,6 @@ var Root = (0, styled_1.styled)(Chip_1.default, { name: exports.chipComponentNam
         _b))));
 });
 exports.Chip = React.forwardRef(function (props, ref) {
-    var selected = props.selected, _a = props.deleteIcon, deleteIcon = _a === void 0 ? React.createElement(icon_1.XIcon, null) : _a, chipProps = __rest(props, ["selected", "deleteIcon"]);
-    return (React.createElement(Root, __assign({ ref: ref, deleteIcon: deleteIcon, ownerState: { selected: selected } }, chipProps, { title: props === null || props === void 0 ? void 0 : props.label })));
+    var selected = props.selected, _a = props.deleteIcon, deleteIcon = _a === void 0 ? React.createElement(icon_1.XIcon, null) : _a, analyticsId = props.analyticsId, chipProps = __rest(props, ["selected", "deleteIcon", "analyticsId"]);
+    return (React.createElement(Root, __assign({ ref: ref, deleteIcon: deleteIcon, ownerState: { selected: selected } }, (analyticsId && { 'data-analytics-id': analyticsId }), chipProps, { title: props === null || props === void 0 ? void 0 : props.label })));
 });

package/esm/breadcrumbs/breadcrumbs-item/breadcrumbs-item.js

@@ -66,9 +66,9 @@ var EndIcon = styled('span', {
     });
 });
 export var BreadcrumbsItem = React.forwardRef(function (props, ref) {
-    var label = props.label, startIcon = props.startIcon, endIcon = props.endIcon, className = props.className, isCurrent = props.isCurrent, children = props.children, propClasses = props.classes, rootProps = __rest(props, ["label", "startIcon", "endIcon", "className", "isCurrent", "children", "classes"]);
+    var label = props.label, startIcon = props.startIcon, endIcon = props.endIcon, className = props.className, isCurrent = props.isCurrent, children = props.children, propClasses = props.classes, analyticsId = props.analyticsId, rootProps = __rest(props, ["label", "startIcon", "endIcon", "className", "isCurrent", "children", "classes", "analyticsId"]);
     var classes = useMergedClasses(breadcrumbsItemClasses, getBreadcrumbsItemUtilityClass, propClasses);
-    return (React.createElement(Root, __assign({ variant: "subtitle2", color: isCurrent ? 'textPrimary' : 'textSecondary', className: clsx(classes.root, isCurrent && classes.current, className), "aria-current": isCurrent ? 'page' : undefined, ref: ref }, rootProps),
+    return (React.createElement(Root, __assign({ variant: "subtitle2", color: isCurrent ? 'textPrimary' : 'textSecondary', className: clsx(classes.root, isCurrent && classes.current, className), "aria-current": isCurrent ? 'page' : undefined, ref: ref, analyticsId: analyticsId }, rootProps),
         !!startIcon && React.createElement(StartIcon, { className: clsx(classes.icon, classes.startIcon) }, startIcon),
         React.createElement("span", { className: classes.label }, label || children),
         !!endIcon && React.createElement(EndIcon, { className: clsx(classes.icon, classes.endIcon) }, endIcon)));

package/esm/button/button.js

@@ -60,14 +60,14 @@ var LabelSpan = styled('span')(function (_a) {
     });
 });
 export var Button = React.forwardRef(function (_a, ref) {
-    var isLoading = _a.isLoading, label = _a.label, children = _a.children, disabled = _a.disabled, _b = _a.SpinnerProps, SpinnerProps = _b === void 0 ? {} : _b, _c = _a.color, color = _c === void 0 ? 'default' : _c, variant = _a.variant, maxWidth = _a.maxWidth, rootProps = __rest(_a, ["isLoading", "label", "children", "disabled", "SpinnerProps", "color", "variant", "maxWidth"]);
+    var isLoading = _a.isLoading, label = _a.label, children = _a.children, disabled = _a.disabled, _b = _a.SpinnerProps, SpinnerProps = _b === void 0 ? {} : _b, _c = _a.color, color = _c === void 0 ? 'default' : _c, variant = _a.variant, maxWidth = _a.maxWidth, analyticsId = _a.analyticsId, rootProps = __rest(_a, ["isLoading", "label", "children", "disabled", "SpinnerProps", "color", "variant", "maxWidth", "analyticsId"]);
     var title = label ||
         (typeof children === 'string'
             ? children
             : React.Children.toArray(children)
                 .filter(function (child) { return typeof child === 'string'; })
                 .join(''));
-    return (React.createElement(Root, __assign({}, rootProps, { disabled: disabled || isLoading, ownerState: { isLoading: isLoading }, color: color, variant: variant, ref: ref, title: String(title) }),
+    return (React.createElement(Root, __assign({}, rootProps, { disabled: disabled || isLoading, ownerState: { isLoading: isLoading }, color: color, variant: variant, ref: ref, title: String(title) }, (analyticsId && { 'data-analytics-id': analyticsId })),
         React.createElement(LabelSpan, { style: { maxWidth: rootProps.fullWidth ? 'none' : maxWidth || '100%' } }, label || children),
         ' ',
         !!isLoading && React.createElement(ButtonSpinner, __assign({}, SpinnerProps))));

package/esm/card/card.js

@@ -92,7 +92,7 @@ var Root = styled(MuiCard, {
 export var Card = React.forwardRef(function (props, ref) {
     var button = props.button, _a = props.component, component = _a === void 0 ? 'div' : _a, disabled = props.disabled, className = props.className, selected = props.selected, selectableButton = props.selectableButton, _b = props.size, size = _b === void 0 ? 'large' : _b, 
     // remove to prevent passing through to the root
-    propClasses = props.classes, rootProps = __rest(props, ["button", "component", "disabled", "className", "selected", "selectableButton", "size", "classes"]);
+    propClasses = props.classes, analyticsId = props.analyticsId, rootProps = __rest(props, ["button", "component", "disabled", "className", "selected", "selectableButton", "size", "classes", "analyticsId"]);
     return (React.createElement(CardContext.Provider, { value: { size: size } },
         React.createElement(Root, __assign({}, { component: component }, { ownerState: {
                 size: size,
@@ -100,5 +100,5 @@ export var Card = React.forwardRef(function (props, ref) {
                 selectableButton: selectableButton,
                 button: button,
                 selected: selected,
-            } }, rootProps, { className: className, role: button ? 'button' : undefined, tabIndex: button && !disabled ? 0 : undefined, "aria-disabled": disabled, ref: ref }))));
+            } }, (analyticsId && { 'data-analytics-id': analyticsId }), rootProps, { className: className, role: button ? 'button' : undefined, tabIndex: button && !disabled ? 0 : undefined, "aria-disabled": disabled, ref: ref }))));
 });

package/esm/chip/chip.js

@@ -55,6 +55,6 @@ var Root = styled(MuiChip, { name: chipComponentName, slot: 'Root' })(function (
         _b))));
 });
 export var Chip = React.forwardRef(function (props, ref) {
-    var selected = props.selected, _a = props.deleteIcon, deleteIcon = _a === void 0 ? React.createElement(XIcon, null) : _a, chipProps = __rest(props, ["selected", "deleteIcon"]);
-    return (React.createElement(Root, __assign({ ref: ref, deleteIcon: deleteIcon, ownerState: { selected: selected } }, chipProps, { title: props === null || props === void 0 ? void 0 : props.label })));
+    var selected = props.selected, _a = props.deleteIcon, deleteIcon = _a === void 0 ? React.createElement(XIcon, null) : _a, analyticsId = props.analyticsId, chipProps = __rest(props, ["selected", "deleteIcon", "analyticsId"]);
+    return (React.createElement(Root, __assign({ ref: ref, deleteIcon: deleteIcon, ownerState: { selected: selected } }, (analyticsId && { 'data-analytics-id': analyticsId }), chipProps, { title: props === null || props === void 0 ? void 0 : props.label })));
 });

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

@@ -73,9 +73,9 @@ var DisabledWrapper = styled('span', {
 });
 export var IconButton = React.forwardRef(function (props, ref) {
     var iconButtonContext = useIconButtonContext();
-    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 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, analyticsId = props.analyticsId, iconButtonProps = __rest(props, ["isLoading", "SpinnerProps", "children", "label", "color", "variant", "size", "disabled", "edge", "shape", "tooltipPlacement", "onTooltipClose", "analyticsId"]);
     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 || 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)));
+    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 }, (analyticsId && { 'data-analytics-id': analyticsId }), 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/link/link.js

@@ -124,14 +124,14 @@ var EndIcon = styled('span', { name: linkComponentName, slot: 'EndIcon' })(funct
 export var Link = React.forwardRef(function (props, ref) {
     var className = props.className, children = props.children, startIcon = props.startIcon, endIcon = props.endIcon, _a = props.color, color = _a === void 0 ? 'primary' : _a, _b = props.component, component = _b === void 0 ? 'a' : _b, _c = props.underline, underline = _c === void 0 ? 'none' : _c, _d = props.variant, variant = _d === void 0 ? 'inherit' : _d, 
     // remove to avoid forwarding
-    propClasses = props.classes, rootProps = __rest(props, ["className", "children", "startIcon", "endIcon", "color", "component", "underline", "variant", "classes"]);
+    propClasses = props.classes, analyticsId = props.analyticsId, rootProps = __rest(props, ["className", "children", "startIcon", "endIcon", "color", "component", "underline", "variant", "classes", "analyticsId"]);
     var classes = useMergedClasses(linkClasses, getLinkUtilityClass, propClasses);
     var ownerState = {
         color: color,
         component: component,
         underline: underline,
     };
-    return (React.createElement(Root, __assign({ color: color === 'inherit' ? color : undefined, component: component, className: clsx([classes.root, className]), ref: ref, ownerState: ownerState, variant: variant }, rootProps),
+    return (React.createElement(Root, __assign({ color: color === 'inherit' ? color : undefined, component: component, className: clsx([classes.root, className]), ref: ref, ownerState: ownerState, variant: variant }, (analyticsId && { 'data-analytics-id': analyticsId }), rootProps),
         !!startIcon && (React.createElement(StartIcon, { className: clsx(classes.icon, classes.startIcon, classes.startIcon) }, startIcon)),
         children,
         !!endIcon && React.createElement(EndIcon, { className: clsx(classes.icon, classes.endIcon) }, endIcon)));

package/esm/tabs/tab/tab.js

@@ -43,9 +43,9 @@ var LabelContainer = styled('div')(function (_a) {
     });
 });
 export var Tab = React.forwardRef(function (_a, ref) {
-    var value = _a.value, productReleaseStage = _a.productReleaseStage, label = _a.label, _b = _a.sx, sx = _b === void 0 ? {} : _b, tabProps = __rest(_a, ["value", "productReleaseStage", "label", "sx"]);
+    var value = _a.value, productReleaseStage = _a.productReleaseStage, label = _a.label, _b = _a.sx, sx = _b === void 0 ? {} : _b, analyticsId = _a.analyticsId, tabProps = __rest(_a, ["value", "productReleaseStage", "label", "sx", "analyticsId"]);
     var _c = useTabsContext(), getTabProps = _c.getTabProps, fullWidth = _c.fullWidth;
     return (React.createElement(MuiTab, __assign({ ref: ref }, getTabProps(value), { value: value, label: React.createElement(StackLayout, { gutter: 0 },
             React.createElement(LabelContainer, { width: sx === null || sx === void 0 ? void 0 : sx.width, maxWidth: sx === null || sx === void 0 ? void 0 : sx.maxWidth, title: label }, label),
-            productReleaseStage && React.createElement(AvailabilityLabel, { productReleaseStage: productReleaseStage })) }, tabProps, { fullWidth: fullWidth })));
+            productReleaseStage && React.createElement(AvailabilityLabel, { productReleaseStage: productReleaseStage })) }, (analyticsId && { 'data-analytics-id': analyticsId }), tabProps, { fullWidth: fullWidth })));
 });

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

@@ -18,6 +18,7 @@ export type IIconButtonTypeMap<ExtraPropsType = {}, DefaultElementType extends R
     target?: string;
     isLoading?: boolean;
     SpinnerProps?: Partial<ISpinnerProps>;
+    analyticsId?: string;
 }, DefaultElementType>;
 export interface IExtendIconButtonTypeMap<M extends OverridableTypeMap> {
     props: M['props'] & (M['props'] extends {

package/icon-button/icon-button.js

@@ -99,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 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 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, analyticsId = props.analyticsId, iconButtonProps = __rest(props, ["isLoading", "SpinnerProps", "children", "label", "color", "variant", "size", "disabled", "edge", "shape", "tooltipPlacement", "onTooltipClose", "analyticsId"]);
     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 || 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)));
+    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 }, (analyticsId && { 'data-analytics-id': analyticsId }), 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/link/link.d.ts

@@ -44,6 +44,10 @@ export interface ILinkTypeMap<P = {}, D extends React.ElementType = 'a'> {
          * @default 'none'
          */
         underline?: 'none' | 'hover';
+        /**
+         * Analytics ID
+         */
+        analyticsId?: string;
     };
     defaultComponent: D;
 }

package/link/link.js

@@ -153,14 +153,14 @@ var EndIcon = (0, styled_1.styled)('span', { name: link_classes_1.linkComponentN
 exports.Link = React.forwardRef(function (props, ref) {
     var className = props.className, children = props.children, startIcon = props.startIcon, endIcon = props.endIcon, _a = props.color, color = _a === void 0 ? 'primary' : _a, _b = props.component, component = _b === void 0 ? 'a' : _b, _c = props.underline, underline = _c === void 0 ? 'none' : _c, _d = props.variant, variant = _d === void 0 ? 'inherit' : _d, 
     // remove to avoid forwarding
-    propClasses = props.classes, rootProps = __rest(props, ["className", "children", "startIcon", "endIcon", "color", "component", "underline", "variant", "classes"]);
+    propClasses = props.classes, analyticsId = props.analyticsId, rootProps = __rest(props, ["className", "children", "startIcon", "endIcon", "color", "component", "underline", "variant", "classes", "analyticsId"]);
     var classes = (0, classes_1.useMergedClasses)(link_classes_1.linkClasses, link_classes_1.getLinkUtilityClass, propClasses);
     var ownerState = {
         color: color,
         component: component,
         underline: underline,
     };
-    return (React.createElement(Root, __assign({ color: color === 'inherit' ? color : undefined, component: component, className: (0, clsx_1.default)([classes.root, className]), ref: ref, ownerState: ownerState, variant: variant }, rootProps),
+    return (React.createElement(Root, __assign({ color: color === 'inherit' ? color : undefined, component: component, className: (0, clsx_1.default)([classes.root, className]), ref: ref, ownerState: ownerState, variant: variant }, (analyticsId && { 'data-analytics-id': analyticsId }), rootProps),
         !!startIcon && (React.createElement(StartIcon, { className: (0, clsx_1.default)(classes.icon, classes.startIcon, classes.startIcon) }, startIcon)),
         children,
         !!endIcon && React.createElement(EndIcon, { className: (0, clsx_1.default)(classes.icon, classes.endIcon) }, endIcon)));

package/package.json

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

package/tabs/tab/tab.d.ts

@@ -3,6 +3,7 @@ import { OverridableComponent, OverrideProps } from '../../overridable-component
 import { TabTypeMap } from '@mui/material/Tab';
 type ITabTypeMap<ExtraPropsType = {}, DefaultElementType extends React.ElementType = TabTypeMap['defaultComponent']> = TabTypeMap<ExtraPropsType & {
     productReleaseStage?: 'beta' | 'earlyAccess' | 'generalAvailability';
+    analyticsId?: string;
 }, DefaultElementType>;
 export type ITabProps<D extends React.ElementType = ITabTypeMap['defaultComponent'], P = {}> = OverrideProps<ITabTypeMap<P, D>, D>;
 export declare const Tab: OverridableComponent<ITabTypeMap<{}, "div">>;

package/tabs/tab/tab.js

@@ -72,9 +72,9 @@ var LabelContainer = (0, styled_1.styled)('div')(function (_a) {
     });
 });
 exports.Tab = React.forwardRef(function (_a, ref) {
-    var value = _a.value, productReleaseStage = _a.productReleaseStage, label = _a.label, _b = _a.sx, sx = _b === void 0 ? {} : _b, tabProps = __rest(_a, ["value", "productReleaseStage", "label", "sx"]);
+    var value = _a.value, productReleaseStage = _a.productReleaseStage, label = _a.label, _b = _a.sx, sx = _b === void 0 ? {} : _b, analyticsId = _a.analyticsId, tabProps = __rest(_a, ["value", "productReleaseStage", "label", "sx", "analyticsId"]);
     var _c = (0, tabs_context_1.useTabsContext)(), getTabProps = _c.getTabProps, fullWidth = _c.fullWidth;
     return (React.createElement(Tab_1.default, __assign({ ref: ref }, getTabProps(value), { value: value, label: React.createElement(stack_layout_1.StackLayout, { gutter: 0 },
             React.createElement(LabelContainer, { width: sx === null || sx === void 0 ? void 0 : sx.width, maxWidth: sx === null || sx === void 0 ? void 0 : sx.maxWidth, title: label }, label),
-            productReleaseStage && React.createElement(AvailabilityLabel, { productReleaseStage: productReleaseStage })) }, tabProps, { fullWidth: fullWidth })));
+            productReleaseStage && React.createElement(AvailabilityLabel, { productReleaseStage: productReleaseStage })) }, (analyticsId && { 'data-analytics-id': analyticsId }), tabProps, { fullWidth: fullWidth })));
 });