@auth0/quantum-product 1.7.0 → 1.9.0

package/label/label.js

@@ -10,11 +10,64 @@ var __assign = (this && this.__assign) || function () {
     };
     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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Label = exports.labelComponentName = void 0;
+var React = __importStar(require("react"));
 var styled_1 = require("../styled");
 exports.labelComponentName = 'QuantumLabel';
-exports.Label = (0, styled_1.styled)('span', {
+var getReleaseStageLabelProps = function (productReleaseStage, productReleaseStageAbbr) {
+    var labelProps = {
+        color: 'default',
+        variant: 'default',
+    };
+    switch (productReleaseStage) {
+        case 'new':
+        case 'generalAvailability':
+            labelProps.variant = 'filled';
+            labelProps.children = 'New';
+            labelProps.color = 'primary';
+            break;
+        case 'beta':
+            labelProps.children = 'Beta';
+            labelProps.color = 'primary';
+            break;
+        case 'first':
+        case 'early':
+        case 'earlyAccess':
+            labelProps.color = 'primary';
+            productReleaseStageAbbr ? (labelProps.children = 'Early') : (labelProps.children = 'Early Access');
+            break;
+        case 'deprecated':
+            labelProps.color = 'warning';
+            labelProps.children = 'Deprecated';
+            break;
+    }
+    return labelProps;
+};
+var StyledLabel = (0, styled_1.styled)('span', {
     name: exports.labelComponentName,
     slot: 'Root',
     shouldForwardProp: function (prop) { return (0, styled_1.rootShouldForwardProp)(prop) && prop !== 'color' && prop !== 'variant'; },
@@ -70,3 +123,7 @@ exports.Label = (0, styled_1.styled)('span', {
         color: theme.tokens.color_fg_on_state_danger,
     })))));
 });
+exports.Label = React.forwardRef(function (props, ref) {
+    var productReleaseStage = props.productReleaseStage, _a = props.productReleaseStageAbbr, productReleaseStageAbbr = _a === void 0 ? true : _a;
+    return (React.createElement(StyledLabel, __assign({ ref: ref }, getReleaseStageLabelProps(productReleaseStage, productReleaseStageAbbr), props)));
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auth0/quantum-product",
-  "version": "1.7.0",
+  "version": "1.9.0",
   "sideEffects": false,
   "license": "Apache-2.0",
   "publishConfig": {
@@ -11,14 +11,14 @@
   "main": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {
+    "@auth0/quantum-icons": "^1.0.0",
     "@auth0/quantum-tokens": "^1.1.5",
     "@mui/material": "5.8.7",
     "@mui/styles": "5.8.7",
     "@mui/system": "5.8.7",
     "@mui/utils": "5.8.6",
     "clsx": "^1.2.1",
-    "md5": "^2.3.0",
-    "react-feather": "^2.0.10"
+    "md5": "^2.3.0"
   },
   "peerDependencies": {
     "react": "*",

package/page/page-header/page-header-classes.d.ts

@@ -1,5 +1,5 @@
 export declare const pageHeaderComponentName: "QuantumPageHeader";
 export declare function getPageHeaderUtilityClass(slot: string): string;
-export declare const pageHeaderClasses: Record<"title" | "metadata" | "content" | "root" | "avatar" | "actions" | "description" | "avatarBlock", string>;
+export declare const pageHeaderClasses: Record<"title" | "metadata" | "content" | "root" | "avatar" | "availabilityLabel" | "actions" | "description" | "avatarBlock", string>;
 export declare type PageHeaderClasses = typeof pageHeaderClasses;
 export declare type PageHeaderClassKey = keyof PageHeaderClasses;

package/page/page-header/page-header-classes.js

@@ -16,4 +16,5 @@ exports.pageHeaderClasses = (0, classes_1.generateUtilityClasses)(exports.pageHe
     'metadata',
     'description',
     'content',
+    'availabilityLabel',
 ]);

package/page/page-header/page-header.d.ts

@@ -2,11 +2,12 @@ import * as React from 'react';
 import { IAvatarBlockProps } from '../../avatar-block';
 import { IPageContextValue } from '../page-context';
 import { IRowLayoutProps } from '../../row-layout';
+import { ILabelProps } from '../../label';
 import { ITextProps } from '../../text';
 import { PageHeaderClasses } from './page-header-classes';
 export declare type IPageHeaderOwnerState = Partial<IPageContextValue>;
 export declare const Actions: import("styled-components").StyledComponent<"div", import("../..").ITheme, import("@mui/system").MUIStyledCommonProps<import("../..").ITheme>, never>;
-export interface IPageHeaderProps extends Omit<IRowLayoutProps, 'title'>, Pick<IAvatarBlockProps, 'titleTypographyProps' | 'descriptionTypographyProps'> {
+export interface IPageHeaderProps extends Omit<IRowLayoutProps, 'title'>, Pick<IAvatarBlockProps, 'titleTypographyProps' | 'descriptionTypographyProps'>, Pick<ILabelProps, 'productReleaseStage' | 'productReleaseStageAbbr'> {
     title: React.ReactNode;
     metadata?: React.ReactNode;
     metadataTypographyProps?: Partial<ITextProps> & {
@@ -21,5 +22,6 @@ export interface IPageHeaderProps extends Omit<IRowLayoutProps, 'title'>, Pick<I
     fullWidth?: boolean;
     compact?: boolean;
     startActions?: React.ReactNode;
+    productReleaseStage?: 'beta' | 'generalAvailability' | 'earlyAccess' | 'deprecated';
 }
 export declare const PageHeader: React.ForwardRefExoticComponent<IPageHeaderProps & React.RefAttributes<HTMLDivElement>>;

package/page/page-header/page-header.js

@@ -55,6 +55,7 @@ var avatar_block_1 = require("../../avatar-block");
 var page_context_1 = require("../page-context");
 var row_layout_1 = require("../../row-layout");
 var styled_1 = require("../../styled");
+var label_1 = require("../../label");
 var classes_1 = require("../../styles/classes");
 var text_1 = require("../../text");
 var stack_layout_1 = require("../../stack-layout");
@@ -85,6 +86,12 @@ exports.Actions = (0, styled_1.styled)('div', {
         gap: theme.spacing(2),
     });
 });
+var AvailabilityLabel = (0, styled_1.styled)(label_1.Label, { name: page_header_classes_1.pageHeaderComponentName, slot: 'AvailabilityLabel' })(function (_a) {
+    var theme = _a.theme;
+    return ({
+        marginLeft: theme.spacing(1),
+    });
+});
 var StyledStackLayout = (0, styled_1.styled)(stack_layout_1.StackLayout, { name: page_header_classes_1.pageHeaderComponentName, slot: 'StackLayout' })(function (_a) {
     var theme = _a.theme, ownerState = _a.ownerState;
     return ({
@@ -94,7 +101,7 @@ var StyledStackLayout = (0, styled_1.styled)(stack_layout_1.StackLayout, { name:
 });
 exports.PageHeader = React.forwardRef(function (props, ref) {
     var _a = (0, page_context_1.usePageContext)(), fullWidthContext = _a.fullWidth, compactContext = _a.compact;
-    var breadcrumbs = props.breadcrumbs, startActions = props.startActions, className = props.className, fullWidthProp = props.fullWidth, compactProp = props.compact, title = props.title, _b = props.titleTypographyProps, titleTypographyProps = _b === void 0 ? {} : _b, description = props.description, _c = props.descriptionTypographyProps, descriptionTypographyProps = _c === void 0 ? {} : _c, metadata = props.metadata, _d = props.metadataTypographyProps, metadataTypographyProps = _d === void 0 ? {} : _d, actions = props.actions, avatar = props.avatar, children = props.children, rootProps = __rest(props, ["breadcrumbs", "startActions", "className", "fullWidth", "compact", "title", "titleTypographyProps", "description", "descriptionTypographyProps", "metadata", "metadataTypographyProps", "actions", "avatar", "children"]);
+    var breadcrumbs = props.breadcrumbs, startActions = props.startActions, className = props.className, fullWidthProp = props.fullWidth, compactProp = props.compact, title = props.title, _b = props.titleTypographyProps, titleTypographyProps = _b === void 0 ? {} : _b, description = props.description, _c = props.descriptionTypographyProps, descriptionTypographyProps = _c === void 0 ? {} : _c, metadata = props.metadata, _d = props.metadataTypographyProps, metadataTypographyProps = _d === void 0 ? {} : _d, actions = props.actions, avatar = props.avatar, children = props.children, productReleaseStage = props.productReleaseStage, productReleaseStageAbbr = props.productReleaseStageAbbr, rootProps = __rest(props, ["breadcrumbs", "startActions", "className", "fullWidth", "compact", "title", "titleTypographyProps", "description", "descriptionTypographyProps", "metadata", "metadataTypographyProps", "actions", "avatar", "children", "productReleaseStage", "productReleaseStageAbbr"]);
     var classes = (0, classes_1.useMergedClasses)(page_header_classes_1.pageHeaderClasses, page_header_classes_1.getPageHeaderUtilityClass, props.classes);
     var fullWidth = fullWidthProp || fullWidthContext;
     var compact = compactProp || compactContext;
@@ -106,6 +113,8 @@ exports.PageHeader = React.forwardRef(function (props, ref) {
                 React.createElement(avatar_block_1.AvatarBlock, { size: compact ? 'medium' : 'large', classes: {
                         root: classes.avatarBlock,
                         avatar: classes.avatar,
-                    }, avatar: avatar && React.createElement(avatar_1.AvatarContext.Provider, { value: { size: 'large' } }, avatar), titleTypographyProps: __assign({ variant: compact ? 'h5' : 'h3', component: 'h1', className: classes.title }, titleTypographyProps), title: title, description: metadata, descriptionTypographyProps: __assign({ component: 'div', className: classes.metadata }, metadataTypographyProps), TitleBlockProps: { gutter: 0.5 }, endAdornment: !!actions && (React.createElement(exports.Actions, { className: classes.actions, sx: { flex: 'none' } }, actions)) }))),
+                    }, avatar: avatar && React.createElement(avatar_1.AvatarContext.Provider, { value: { size: 'large' } }, avatar), titleTypographyProps: __assign({ variant: compact ? 'h5' : 'h3', component: 'h1', className: classes.title }, titleTypographyProps), title: React.createElement(React.Fragment, null,
+                        title,
+                        !!productReleaseStage && (React.createElement(AvailabilityLabel, { className: classes.availabilityLabel, productReleaseStageAbbr: false, productReleaseStage: productReleaseStage }))), description: metadata, descriptionTypographyProps: __assign({ component: 'div', className: classes.metadata }, metadataTypographyProps), TitleBlockProps: { gutter: 0.5 }, endAdornment: !!actions && (React.createElement(exports.Actions, { className: classes.actions, sx: { flex: 'none' } }, actions)) }))),
         !!description && (React.createElement(text_1.Text, __assign({ variant: "body2", color: "textSecondary", component: "p", className: classes.description }, descriptionTypographyProps), description))));
 });

package/pagination/pager/pager.js

@@ -59,8 +59,8 @@ exports.Pager = React.forwardRef(function (props, ref) {
     var isPrevDisabled = disabled || previousDisabled || page <= 1;
     var isNextDisabled = disabled || nextDisabled || (totalPages != null && page >= totalPages);
     return (React.createElement(stack_layout_1.StackLayout, __assign({ ref: ref, gutter: 1, className: (0, utils_1.clsx)(classes.root, className), sx: __assign({ justifyContent: 'flex-end' }, sx) }, rootProps),
-        React.createElement(icon_button_1.IconButton, __assign({ variant: "outlined", size: size, className: classes.previousPageButton, onClick: function () { return onPageChange && onPageChange(page - 1); }, disabled: isPrevDisabled, "aria-label": "Previous page" }, nextIconButtonProps),
+        React.createElement(icon_button_1.IconButton, __assign({ variant: "outlined", size: size, className: classes.previousPageButton, onClick: function () { return onPageChange && onPageChange(page - 1); }, disabled: isPrevDisabled, label: "Previous page" }, nextIconButtonProps),
             React.createElement(icon_1.ChevronLeftIcon, null)),
-        React.createElement(icon_button_1.IconButton, __assign({ variant: "outlined", size: size, className: classes.nextPageButton, onClick: function () { return onPageChange && onPageChange(page + 1); }, disabled: isNextDisabled, "aria-label": "Next page" }, previousIconButtonProps),
+        React.createElement(icon_button_1.IconButton, __assign({ variant: "outlined", size: size, className: classes.nextPageButton, onClick: function () { return onPageChange && onPageChange(page + 1); }, disabled: isNextDisabled, label: "Next page" }, previousIconButtonProps),
             React.createElement(icon_1.ChevronRightIcon, null))));
 });

package/panel/panel/panel.js

@@ -125,7 +125,7 @@ exports.Panel = React.forwardRef(function (props, ref) {
     return (React.createElement(Root, __assign({ ref: ref, ownerState: ownerState, className: (0, utils_1.clsx)(classes.root, classes["size".concat((0, utils_1.capitalize)(size))], classes["variant".concat((0, utils_1.capitalize)(variant))], classes["placement".concat((0, utils_1.capitalize)(placement))], isFixed && classes.fixed, isOpen && classes.open, className) }, rootProps),
         React.createElement(panel_context_1.PanelContext.Provider, { value: __assign(__assign({}, ownerState), { isCloseButtonVisible: showCloseButton }) },
             React.createElement(Content, { className: classes.content, ownerState: ownerState },
-                showCloseButton && (React.createElement(CloseButton, __assign({ "aria-label": "Close", className: classes.closeButton, onClick: function (e) { return onClose(e, 'closeButtonClick'); }, variant: "outlined", size: "small", shape: "circular" }, closeIconButtonProps),
+                showCloseButton && (React.createElement(CloseButton, __assign({ label: "close", className: classes.closeButton, onClick: function (e) { return onClose(e, 'closeButtonClick'); }, variant: "outlined", size: "small", shape: "circular" }, closeIconButtonProps),
                     React.createElement(icon_1.XIcon, null))),
                 !!title && React.createElement(panel_header_1.PanelHeader, __assign({ title: title }, PanelHeaderProps)),
                 children))));

package/panel/panel-header/panel-header.js

@@ -58,13 +58,16 @@ var Root = (0, styled_1.styled)('div')(function (_a) {
     var theme = _a.theme, ownerState = _a.ownerState;
     return ({
         display: 'flex',
+        alignItems: 'flex-start',
         padding: theme.spacing(3, ownerState.isCloseButtonVisible ? 9 : 3, 2, 3),
         gap: theme.spacing(2),
         flexGrow: 0,
         flexShrink: 0,
     });
 });
-var Content = (0, styled_1.styled)('div')({});
+var Content = (0, styled_1.styled)('div')({
+    flex: 1,
+});
 var EndAdornment = (0, styled_1.styled)('div')(function (_a) {
     var theme = _a.theme;
     return ({

package/select/select.js

@@ -92,7 +92,7 @@ exports.Select = React.forwardRef(function (props, ref) {
     return (React.createElement(Root, __assign({ ref: ref, ownerState: { adornedEnd: hasClearButton, selectionDisabled: disabledOptionSelected, size: size }, value: value, defaultValue: defaultValue, multiple: multiple, size: size, className: (0, clsx_1.default)(classes.root, className), classes: {
             select: classes.select,
         }, endAdornment: hasClearButton && (React.createElement(ClearInputAdornment, { position: "end", className: classes.clearInputAdornment },
-            React.createElement(icon_button_1.IconButton, { edge: "end", size: size, onClick: onClear, className: classes.clearButton },
+            React.createElement(icon_button_1.IconButton, { edge: "end", size: size, onClick: onClear, className: classes.clearButton, label: "close button" },
                 React.createElement(icon_1.XCircleIcon, null)))), startAdornment: !!prefix && (React.createElement(input_1.InputAdornment, { position: "start", className: classes.prefixInputAdornment },
             React.createElement(text_1.Text, { component: "span", variant: "body2", className: classes.prefixText }, prefix))), MenuProps: useCustomMenu
             ? __assign({ anchorOrigin: {

package/sidebar/sidebar-link/sidebar-link.d.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { OverridableComponent, OverrideProps } from '../../overridable-component';
+import { ILabelProps } from '../../label';
 import { IStyledCommonProps } from '../../styled';
 import { SidebarLinkClasses } from './sidebar-link-classes';
 export interface ISidebarLinkTypeMap<AdditionalProps = {}, DefaultComponent extends React.ElementType = 'a'> {
-    props: AdditionalProps & IStyledCommonProps & {
+    props: AdditionalProps & Pick<ILabelProps, 'productReleaseStage'> & IStyledCommonProps & {
         /**
          * Override or extend the styles applied to the component.
          */
@@ -24,10 +25,12 @@ export interface ISidebarLinkTypeMap<AdditionalProps = {}, DefaultComponent exte
          * Icon displayed at the end of the link
          */
         endIcon?: React.ReactNode;
+        /** @deprecated  use productReleaseStage instead  */
+        featureAvailability?: 'default' | 'beta' | 'first' | 'new' | 'early';
         /**
          * Availability of the feature. Displays as a label after the title.
          */
-        featureAvailability?: 'default' | 'beta' | 'first' | 'new' | 'early';
+        productReleaseStage?: Exclude<ILabelProps['productReleaseStage'], 'deprecated'>;
         /**
          * Link Variant
          * @default "primary"

package/sidebar/sidebar-link/sidebar-link.js

@@ -131,33 +131,26 @@ var Decoration = (0, styled_1.styled)('span', { name: sidebar_link_classes_1.sid
         marginLeft: theme.spacing(1),
     });
 });
-var getFeatureAvailabilityLabelProps = function (featureAvailability) {
-    var labelProps = {
-        color: 'primary',
-        variant: 'default',
-    };
-    switch (featureAvailability) {
-        case 'beta':
-            labelProps.children = 'Beta';
-            break;
-        // First Availability has been replaced by Early Access
-        case 'first':
-        case 'early':
-            labelProps.children = 'Early';
-            break;
-        case 'new':
-            labelProps.variant = 'filled';
-            labelProps.children = 'New';
-            break;
-    }
-    return labelProps;
-};
 exports.SidebarLink = React.forwardRef(function (props, ref) {
-    var title = props.title, startIcon = props.startIcon, endIcon = props.endIcon, featureAvailability = props.featureAvailability, className = props.className, decoration = props.decoration, titleId = props.titleId, _a = props.isActive, isActive = _a === void 0 ? false : _a, _b = props.variant, variant = _b === void 0 ? 'primary' : _b, _c = props.component, LinkComponent = _c === void 0 ? 'a' : _c, propClasses = props.classes, children = props.children, sx = props.sx, propOnClick = props.onClick, _d = props.shouldCollapseSidebarOnClick, shouldCollapseSidebarOnClick = _d === void 0 ? true : _d, linkProps = __rest(props, ["title", "startIcon", "endIcon", "featureAvailability", "className", "decoration", "titleId", "isActive", "variant", "component", "classes", "children", "sx", "onClick", "shouldCollapseSidebarOnClick"]);
+    var title = props.title, startIcon = props.startIcon, endIcon = props.endIcon, featureAvailability = props.featureAvailability, productReleaseStage = props.productReleaseStage, className = props.className, decoration = props.decoration, titleId = props.titleId, _a = props.isActive, isActive = _a === void 0 ? false : _a, _b = props.variant, variant = _b === void 0 ? 'primary' : _b, _c = props.component, LinkComponent = _c === void 0 ? 'a' : _c, propClasses = props.classes, children = props.children, sx = props.sx, propOnClick = props.onClick, _d = props.shouldCollapseSidebarOnClick, shouldCollapseSidebarOnClick = _d === void 0 ? true : _d, linkProps = __rest(props, ["title", "startIcon", "endIcon", "featureAvailability", "productReleaseStage", "className", "decoration", "titleId", "isActive", "variant", "component", "classes", "children", "sx", "onClick", "shouldCollapseSidebarOnClick"]);
     var theme = (0, use_theme_1.useTheme)();
     var isLargeScreen = (0, use_media_query_1.useMediaQuery)(theme.breakpoints.up('lg'));
     var sidebarCtx = (0, sidebar_context_1.useSidebarContext)();
     var classes = (0, classes_1.useMergedClasses)(sidebar_link_classes_1.sidebarLinkClasses, sidebar_link_classes_1.getSidebarLinkUtilityClass, propClasses);
+    var mapReleaseStageProps = function (prop) {
+        switch (prop) {
+            case 'early':
+            case 'first':
+                return 'earlyAccess';
+            case 'new':
+                return 'generalAvailability';
+            case 'default':
+                return '';
+            default:
+                return prop;
+        }
+    };
+    var releaseProp = featureAvailability ? mapReleaseStageProps(featureAvailability) : productReleaseStage;
     var handleClick = function (event) {
         if (propOnClick) {
             propOnClick(event);
@@ -170,7 +163,7 @@ exports.SidebarLink = React.forwardRef(function (props, ref) {
         React.createElement(Link, __assign({ ref: ref, as: LinkComponent, title: typeof title === 'string' ? title : undefined, ownerState: { isActive: isActive, variant: variant }, className: classes.link, "aria-current": isActive ? 'page' : undefined, onClick: handleClick }, linkProps),
             React.createElement(StartIcon, { className: (0, clsx_1.default)(classes.icon, classes.startIcon) }, startIcon),
             React.createElement(Title, { id: titleId, className: sidebar_link_classes_1.sidebarLinkClasses.title }, title),
-            !!featureAvailability && (React.createElement(AvailabilityLabel, __assign({ className: classes.availabilityLabel }, getFeatureAvailabilityLabelProps(featureAvailability)))),
+            !!releaseProp && React.createElement(AvailabilityLabel, { className: classes.availabilityLabel, productReleaseStage: releaseProp }),
             !!decoration && React.createElement(Decoration, { className: classes.decoration }, decoration),
             !!endIcon && React.createElement(EndIcon, { className: (0, clsx_1.default)(classes.icon, classes.endIcon) }, endIcon)),
         children));

package/tabs/tab/tab.d.ts

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

package/tabs/tab/tab.js

@@ -51,9 +51,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tab = void 0;
 var React = __importStar(require("react"));
 var Tab_1 = __importDefault(require("@mui/material/Tab"));
+var label_1 = require("../../label");
+var stack_layout_1 = require("../../stack-layout");
+var styled_1 = require("../../styled");
 var tabs_context_1 = require("../tabs-context");
+var AvailabilityLabel = (0, styled_1.styled)(label_1.Label)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        marginLeft: theme.spacing(1),
+    });
+});
 exports.Tab = React.forwardRef(function (_a, ref) {
-    var value = _a.value, tabProps = __rest(_a, ["value"]);
+    var value = _a.value, productReleaseStage = _a.productReleaseStage, label = _a.label, tabProps = __rest(_a, ["value", "productReleaseStage", "label"]);
     var _b = (0, tabs_context_1.useTabsContext)(), getTabProps = _b.getTabProps, fullWidth = _b.fullWidth;
-    return React.createElement(Tab_1.default, __assign({ ref: ref }, getTabProps(value), { value: value }, tabProps, { fullWidth: fullWidth }));
+    return (React.createElement(Tab_1.default, __assign({ ref: ref }, getTabProps(value), { value: value, label: React.createElement(stack_layout_1.StackLayout, { gutter: 0 },
+            label,
+            productReleaseStage && React.createElement(AvailabilityLabel, { productReleaseStage: productReleaseStage })) }, tabProps, { fullWidth: fullWidth })));
 });

package/esm/icon/apis.js

@@ -1,34 +0,0 @@
-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;
-};
-import * as React from 'react';
-import { SvgIcon } from '../svg-icon';
-export var ApisIcon = function (_a) {
-    var _b = _a.color, color = _b === void 0 ? 'currentColor' : _b, rootProps = __rest(_a, ["color"]);
-    return (React.createElement(SvgIcon, __assign({ viewBox: "0 0 18 18", fill: "none" }, rootProps),
-        React.createElement("rect", { x: "2", y: "11.3333", width: "4.66667", height: "4.66667", stroke: color, strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }),
-        React.createElement("rect", { x: "2", y: "6.66672", width: "4.66667", height: "4.66667", stroke: color, strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }),
-        React.createElement("rect", { x: "2", y: "2", width: "4.66667", height: "4.66667", stroke: color, strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }),
-        React.createElement("rect", { x: "6.66669", y: "11.3333", width: "4.66667", height: "4.66667", stroke: color, strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }),
-        React.createElement("rect", { x: "6.66669", y: "6.66672", width: "4.66667", height: "4.66667", stroke: color, strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }),
-        React.createElement("rect", { x: "11.3333", y: "11.3333", width: "4.66667", height: "4.66667", stroke: color, strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" })));
-};

package/esm/icon/application-plus.js

@@ -1,30 +0,0 @@
-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;
-};
-import * as React from 'react';
-import { SvgIcon } from '../svg-icon';
-export var ApplicationPlusIcon = function (_a) {
-    var _b = _a.color, color = _b === void 0 ? 'currentColor' : _b, rootProps = __rest(_a, ["color"]);
-    return (React.createElement(SvgIcon, __assign({ viewBox: "0 0 20 20" }, rootProps),
-        React.createElement("g", { stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd" },
-            React.createElement("path", { d: "M17.8483347,18.6541567 L2.30511499,18.6541567 C1.99869151,18.6541567 1.75,18.405728 1.75,18.0990089 L1.75,2.55514781 C1.75,2.24870622 1.99869151,2 2.30511499,2 L17.8483347,2 C18.1547581,2 18.4034496,2.24870622 18.4034496,2.55514781 L18.4034496,18.0990089 C18.4034496,18.4060056 18.1547581,18.6541567 17.8483347,18.6541567 L17.8483347,18.6541567 Z M17.2932197,3.665721 C17.2932197,3.35872426 17.0445282,3.10974047 16.7381047,3.10974047 L3.41534496,3.10974047 C3.10892149,3.10974047 2.86022998,3.35844669 2.86022998,3.665721 L2.86022998,6.44173761 L17.2932197,6.44173761 L17.2932197,3.665721 L17.2932197,3.665721 Z M17.2932197,7.55147808 L2.86022998,7.55147808 L2.86022998,16.9884357 C2.86022998,17.2954324 3.10892149,17.5446938 3.41534496,17.5446938 L16.7381047,17.5446938 C17.0445282,17.5446938 17.2932197,17.29571 17.2932197,16.9884357 L17.2932197,7.55147808 L17.2932197,7.55147808 Z M10.6315623,15.3229923 L9.52133228,15.3229923 L9.52133228,13.1029562 L7.30087232,13.1029562 L7.30087232,11.9926606 L9.52133228,11.9926606 L9.52133228,9.77206932 L10.6315623,9.77206932 L10.6315623,11.9926606 L12.8520222,11.9926606 L12.8520222,13.1029562 L10.6315623,13.1029562 L10.6315623,15.3229923 L10.6315623,15.3229923 Z M5.08041237,5.33088685 L3.97018239,5.33088685 L3.97018239,4.22059123 L5.08041237,4.22059123 L5.08041237,5.33088685 L5.08041237,5.33088685 Z M7.30087232,5.33088685 L6.19064235,5.33088685 L6.19064235,4.22059123 L7.30087232,4.22059123 L7.30087232,5.33088685 L7.30087232,5.33088685 Z M9.52160983,5.33088685 L8.41137986,5.33088685 L8.41137986,4.22059123 L9.52160983,4.22059123 L9.52160983,5.33088685 L9.52160983,5.33088685 Z", fill: color }))));
-};

package/esm/icon/arrows-h.js

@@ -1,31 +0,0 @@
-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;
-};
-import * as React from 'react';
-import { SvgIcon } from '../svg-icon';
-export var ArrowsHIcon = function (_a) {
-    var _b = _a.color, color = _b === void 0 ? 'currentColor' : _b, rootProps = __rest(_a, ["color"]);
-    return (React.createElement(SvgIcon, __assign({ viewBox: "0 0 20 20" }, rootProps),
-        React.createElement("path", { d: "M4.16666 7.5L1.66666 10L4.16666 12.5", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
-        React.createElement("path", { d: "M15.8333 7.5L18.3333 10L15.8333 12.5", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
-        React.createElement("path", { d: "M1.66666 10H18.3333", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })));
-};

package/esm/icon/border-pill.js

@@ -1,29 +0,0 @@
-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;
-};
-import * as React from 'react';
-import { SvgIcon } from '../svg-icon';
-export var BorderPillIcon = function (_a) {
-    var _b = _a.color, color = _b === void 0 ? 'currentColor' : _b, rootProps = __rest(_a, ["color"]);
-    return (React.createElement(SvgIcon, __assign({ viewBox: "0 0 14 14" }, rootProps),
-        React.createElement("path", { fillRule: "evenodd", d: "M7 0.25C3.27208 0.25 0.25 3.27208 0.25 7C0.25 10.7279 3.27208 13.75 7 13.75H13C13.4142 13.75 13.75 13.4142 13.75 13V11.5C13.75 11.0858 13.4142 10.75 13 10.75C12.5858 10.75 12.25 11.0858 12.25 11.5V12.25H7C4.10051 12.25 1.75 9.8995 1.75 7C1.75 4.10051 4.10051 1.75 7 1.75H12.25V2.5C12.25 2.91421 12.5858 3.25 13 3.25C13.4142 3.25 13.75 2.91421 13.75 2.5V1C13.75 0.585786 13.4142 0.25 13 0.25H7ZM13.75 5.5C13.75 5.08579 13.4142 4.75 13 4.75C12.5858 4.75 12.25 5.08579 12.25 5.5V8.5C12.25 8.91421 12.5858 9.25 13 9.25C13.4142 9.25 13.75 8.91421 13.75 8.5V5.5Z", fill: color })));
-};

package/esm/icon/border-rounded.js

@@ -1,29 +0,0 @@
-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;
-};
-import * as React from 'react';
-import { SvgIcon } from '../svg-icon';
-export var BorderRoundedIcon = function (_a) {
-    var _b = _a.color, color = _b === void 0 ? 'currentColor' : _b, rootProps = __rest(_a, ["color"]);
-    return (React.createElement(SvgIcon, __assign({ viewBox: "0 0 14 14" }, rootProps),
-        React.createElement("path", { fillRule: "evenodd", d: "M4 0.25C1.92893 0.25 0.25 1.92893 0.25 4V10C0.25 12.0711 1.92893 13.75 4 13.75H13C13.4142 13.75 13.75 13.4142 13.75 13V11.5C13.75 11.0858 13.4142 10.75 13 10.75C12.5858 10.75 12.25 11.0858 12.25 11.5V12.25H4C2.75736 12.25 1.75 11.2426 1.75 10V4C1.75 2.75736 2.75736 1.75 4 1.75H12.25V2.5C12.25 2.91421 12.5858 3.25 13 3.25C13.4142 3.25 13.75 2.91421 13.75 2.5V1C13.75 0.585786 13.4142 0.25 13 0.25H4ZM13.75 5.5C13.75 5.08579 13.4142 4.75 13 4.75C12.5858 4.75 12.25 5.08579 12.25 5.5V8.5C12.25 8.91421 12.5858 9.25 13 9.25C13.4142 9.25 13.75 8.91421 13.75 8.5V5.5Z", fill: color })));
-};

package/esm/icon/border-sharp.js

@@ -1,29 +0,0 @@
-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;
-};
-import * as React from 'react';
-import { SvgIcon } from '../svg-icon';
-export var BorderSharpIcon = function (_a) {
-    var _b = _a.color, color = _b === void 0 ? 'currentColor' : _b, rootProps = __rest(_a, ["color"]);
-    return (React.createElement(SvgIcon, __assign({ viewBox: "0 0 14 14" }, rootProps),
-        React.createElement("path", { fillRule: "evenodd", d: "M1 0.25C0.585786 0.25 0.25 0.585786 0.25 1V13C0.25 13.4142 0.585786 13.75 1 13.75H13C13.4142 13.75 13.75 13.4142 13.75 13V11.5C13.75 11.0858 13.4142 10.75 13 10.75C12.5858 10.75 12.25 11.0858 12.25 11.5V12.25H1.75V1.75H12.25V2.5C12.25 2.91421 12.5858 3.25 13 3.25C13.4142 3.25 13.75 2.91421 13.75 2.5V1C13.75 0.585786 13.4142 0.25 13 0.25H1ZM13.75 5.5C13.75 5.08579 13.4142 4.75 13 4.75C12.5858 4.75 12.25 5.08579 12.25 5.5V8.5C12.25 8.91421 12.5858 9.25 13 9.25C13.4142 9.25 13.75 8.91421 13.75 8.5V5.5Z", fill: color })));
-};

package/esm/icon/bot.js

@@ -1,33 +0,0 @@
-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;
-};
-import * as React from 'react';
-import { SvgIcon } from '../svg-icon';
-export var BotIcon = function (_a) {
-    var _b = _a.color, color = _b === void 0 ? 'currentColor' : _b, rootProps = __rest(_a, ["color"]);
-    return (React.createElement(SvgIcon, __assign({ viewBox: "0 0 18 18", fill: "none" }, rootProps),
-        React.createElement("rect", { x: "2.25", y: "8.25", width: "13.5", height: "7.5", rx: "1.5", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
-        React.createElement("circle", { cx: "9", cy: "3.75", r: "1.5", stroke: color, strokeWidth: "1.5" }),
-        React.createElement("path", { d: "M9 5.25V8.25", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
-        React.createElement("circle", { cx: "6.1875", cy: "12.1875", r: "0.9375", stroke: color }),
-        React.createElement("circle", { cx: "12.1875", cy: "12.1875", r: "0.9375", stroke: color })));
-};

package/esm/icon/browsers.js

@@ -1,32 +0,0 @@
-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;
-};
-import * as React from 'react';
-import { SvgIcon } from '../svg-icon';
-export var BrowsersIcon = function (_a) {
-    var _b = _a.color, color = _b === void 0 ? 'currentColor' : _b, rootProps = __rest(_a, ["color"]);
-    return (React.createElement(SvgIcon, __assign({ viewBox: "0 0 18 18", fill: "none" }, rootProps),
-        React.createElement("line", { x1: "3.75", y1: "7.25", x2: "8.25", y2: "7.25", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
-        React.createElement("line", { x1: "10.75", y1: "7.25", x2: "11.25", y2: "7.25", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
-        React.createElement("rect", { x: "1", y: "4", width: "13", height: "12", rx: "2", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
-        React.createElement("path", { d: "M5 1H13C15.2091 1 17 2.79086 17 5V12", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })));
-};