@auth0/quantum-product 2.11.0 → 2.13.0

package/esm/switch/switch.js

@@ -20,25 +20,68 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 import * as React from 'react';
 import { formControlLabelClasses, FormControlLabel as BaseFormControlLabel, } from '../form';
 import MuiSwitch from '@mui/material/Switch';
-import { styled } from '../styled';
+import { rootShouldForwardProp, styled } from '../styled';
 import clsx from '../utils/clsx';
 import { switchComponentName, switchClasses, getSwitchUtilityClass } from './switch-classes';
 import { useMergedClasses } from '../styles/classes';
-var SwitchHeight = 24;
+var SWITCH_HEIGHT_BY_SIZE = {
+    medium: 24,
+    small: 20,
+};
 var SwitchLineHeight = 18;
+var StatusLabel = styled('span', {
+    name: switchComponentName,
+    slot: 'StatusLabel',
+})(function () { return ({
+    display: 'inline-block',
+    '@keyframes fadeInFromLeft': {
+        '0%': {
+            opacity: 0,
+            filter: 'blur(4px)',
+            transform: 'translateX(-12px)',
+        },
+        '100%': {
+            opacity: 1,
+            filter: 'blur(0)',
+            transform: 'translateX(0)',
+        },
+    },
+    animation: "fadeInFromLeft 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards",
+    '@media (prefers-reduced-motion: reduce)': {
+        animation: 'none',
+    },
+}); });
 var StyledFormControlLabel = styled(BaseFormControlLabel, {
     name: switchComponentName,
     slot: 'FormControlLabel',
+    shouldForwardProp: function (prop) { return rootShouldForwardProp(prop) && prop !== 'switchSize' && prop !== 'switchDisabled'; },
 })(function (_a) {
     var _b, _c;
-    var theme = _a.theme, noWrap = _a.noWrap, labelPlacement = _a.labelPlacement;
-    return __assign((_b = { paddingLeft: 0, paddingTop: 0, paddingBottom: 0, marginLeft: 0 }, _b["& .".concat(formControlLabelClasses.container)] = {
-        lineHeight: theme.typography.pxToRem(SwitchHeight),
+    var theme = _a.theme, noWrap = _a.noWrap, labelPlacement = _a.labelPlacement, switchSize = _a.switchSize, switchDisabled = _a.switchDisabled;
+    return __assign((_b = { paddingLeft: 0, paddingTop: 0, paddingBottom: 0, marginLeft: 0, cursor: switchDisabled ? 'not-allowed' : undefined }, _b["& .".concat(formControlLabelClasses.container)] = {
+        lineHeight: theme.typography.pxToRem(SWITCH_HEIGHT_BY_SIZE[switchSize]),
         minWidth: noWrap ? 0 : undefined, // prevents overflow of parent flex container
         marginLeft: theme.spacing(2),
+        cursor: switchDisabled ? 'not-allowed' : undefined,
         '& > *:first-of-type': {
             marginLeft: 0,
         },
@@ -50,12 +93,63 @@ var StyledFormControlLabel = styled(BaseFormControlLabel, {
         _c)));
 });
 export var Switch = React.forwardRef(function (props, ref) {
-    var children = props.children, noWrap = props.noWrap, labelPlacement = props.labelPlacement, labels = props.labels, checked = props.checked, disabled = props.disabled, readOnly = props.readOnly, defaultChecked = props.defaultChecked, className = props.className, onValueChange = props.onValueChange, onChange = props.onChange, helperText = props.helperText, _a = props.HelperTextProps, HelperTextProps = _a === void 0 ? {} : _a, decoration = props.decoration, propClasses = props.classes, switchProps = __rest(props, ["children", "noWrap", "labelPlacement", "labels", "checked", "disabled", "readOnly", "defaultChecked", "className", "onValueChange", "onChange", "helperText", "HelperTextProps", "decoration", "classes"]);
+    var _a;
+    var children = props.children, noWrap = props.noWrap, labelPlacement = props.labelPlacement, labels = props.labels, checked = props.checked, disabled = props.disabled, readOnly = props.readOnly, _b = props.size, size = _b === void 0 ? 'medium' : _b, defaultChecked = props.defaultChecked, className = props.className, onMouseDown = props.onMouseDown, onMouseUp = props.onMouseUp, onKeyDown = props.onKeyDown, onKeyUp = props.onKeyUp, onValueChange = props.onValueChange, onChange = props.onChange, helperText = props.helperText, _c = props.HelperTextProps, HelperTextProps = _c === void 0 ? {} : _c, decoration = props.decoration, propClasses = props.classes, switchProps = __rest(props, ["children", "noWrap", "labelPlacement", "labels", "checked", "disabled", "readOnly", "size", "defaultChecked", "className", "onMouseDown", "onMouseUp", "onKeyDown", "onKeyUp", "onValueChange", "onChange", "helperText", "HelperTextProps", "decoration", "classes"]);
     var classes = useMergedClasses(switchClasses, getSwitchUtilityClass, propClasses);
-    var valueLabel = labels && labels.length === 2 ? labels[checked || defaultChecked ? 0 : 1] : '';
-    var label = children || valueLabel;
+    var isDisabled = readOnly || disabled;
+    var _d = __read(React.useState(false), 2), isPressing = _d[0], setIsPressing = _d[1];
+    var handleMouseDown = React.useCallback(function () {
+        if (!isDisabled) {
+            setIsPressing(true);
+        }
+    }, [isDisabled]);
+    var handleMouseUp = React.useCallback(function () { return setIsPressing(false); }, []);
+    var handleSwitchMouseDown = React.useCallback(function (event) {
+        onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
+        if (!isDisabled) {
+            handleMouseDown();
+        }
+    }, [handleMouseDown, isDisabled, onMouseDown]);
+    var handleSwitchMouseUp = React.useCallback(function (event) {
+        onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(event);
+        handleMouseUp();
+    }, [handleMouseUp, onMouseUp]);
+    var handleSwitchKeyDown = React.useCallback(function (event) {
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        if (event.key === ' ' && !isDisabled) {
+            setIsPressing(true);
+        }
+    }, [isDisabled, onKeyDown]);
+    var handleSwitchKeyUp = React.useCallback(function (event) {
+        onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp(event);
+        if (event.key === ' ') {
+            setIsPressing(false);
+        }
+    }, [onKeyUp]);
+    React.useEffect(function () {
+        if (isPressing) {
+            var release_1 = function () { return setIsPressing(false); };
+            window.addEventListener('mouseup', release_1);
+            return function () { return window.removeEventListener('mouseup', release_1); };
+        }
+        return undefined;
+    }, [isPressing]);
+    React.useEffect(function () {
+        if (isDisabled && isPressing) {
+            setIsPressing(false);
+        }
+    }, [isDisabled, isPressing]);
+    var _e = __read(React.useState((_a = checked !== null && checked !== void 0 ? checked : defaultChecked) !== null && _a !== void 0 ? _a : false), 2), uncontrolledChecked = _e[0], setUncontrolledChecked = _e[1];
+    var isChecked = checked !== null && checked !== void 0 ? checked : uncontrolledChecked;
+    var hasStatusLabels = labels && labels.length === 2;
+    var valueLabel = hasStatusLabels ? labels[isChecked ? 0 : 1] : '';
+    var animatedValueLabel = hasStatusLabels ? React.createElement(StatusLabel, { key: valueLabel }, valueLabel) : '';
+    var label = children || animatedValueLabel;
     var hasLabelOrHelperText = !!helperText || !!label;
     var handleChange = function (event) {
+        if (checked === undefined) {
+            setUncontrolledChecked(event.target.checked);
+        }
         if (onChange) {
             onChange(event, event.target.checked);
         }
@@ -63,9 +157,9 @@ export var Switch = React.forwardRef(function (props, ref) {
             onValueChange(event.target.checked);
         }
     };
-    var switchButton = (React.createElement(MuiSwitch, __assign({ checked: checked, disabled: readOnly || disabled, defaultChecked: defaultChecked, className: !hasLabelOrHelperText ? className : classes.switch, onChange: onChange || onValueChange ? handleChange : undefined }, switchProps, { ref: ref })));
+    var switchButton = (React.createElement(MuiSwitch, __assign({ checked: checked, disabled: isDisabled, defaultChecked: defaultChecked, size: size, className: clsx(!hasLabelOrHelperText ? className : classes.switch, isPressing && classes.pressing), onMouseDown: handleSwitchMouseDown, onMouseUp: handleSwitchMouseUp, onKeyDown: handleSwitchKeyDown, onKeyUp: handleSwitchKeyUp, onChange: onChange || onValueChange || hasStatusLabels ? handleChange : undefined }, switchProps, { ref: ref })));
     if (hasLabelOrHelperText) {
-        return (React.createElement(StyledFormControlLabel, { className: clsx(classes.formControlLabel, className), height: SwitchLineHeight, label: label, labelPlacement: labelPlacement, helperText: helperText, HelperTextProps: HelperTextProps, decoration: decoration, noWrap: noWrap, disabled: readOnly || disabled, control: switchButton, ref: ref }));
+        return (React.createElement(StyledFormControlLabel, { className: clsx(classes.formControlLabel, className, isPressing && classes.pressing), height: SwitchLineHeight, switchSize: size, switchDisabled: isDisabled, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, label: label, labelPlacement: labelPlacement, helperText: helperText, HelperTextProps: HelperTextProps, decoration: decoration, noWrap: noWrap, disabled: isDisabled, control: switchButton, ref: ref }));
     }
     return switchButton;
 });

package/illustrations/components/generic.d.ts

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

package/illustrations/components/generic.js

@@ -0,0 +1,176 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IllustrationGeneric = void 0;
+/*
+    This file is generated with the "illustrations" script.
+    To update this output make changes to `scripts/svgr/illustration-icon-template.js`
+    */
+var React = __importStar(require("react"));
+var common_1 = require("../common");
+var styled_1 = require("../../styled");
+exports.IllustrationGeneric = (0, styled_1.styled)(function (_a) {
+    var props = __rest(_a, []);
+    return (React.createElement("svg", __assign({ width: "1em", height: "1em", viewBox: "0 0 250 250", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React.createElement("path", { d: "M163.733 100.396a3.236 3.236 0 003.117-3.233V59.412a3.115 3.115 0 00-3.117-3.117h-61.072V34.937h61.072a24.475 24.475 0 0124.475 24.475v37.636a24.475 24.475 0 01-24.475 24.474", fill: "url(#generic_svg__paint0_linear_3554_6648)" }),
+        React.createElement("path", { d: "M163.733 100.396a3.236 3.236 0 003.117-3.233V59.412a3.116 3.116 0 00-3.117-3.117h-61.072V34.937h61.072a24.475 24.475 0 0124.475 24.475v37.636a24.475 24.475 0 01-24.475 24.474", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M193.634 65.3H51.172a5.888 5.888 0 00-5.888 5.887v111.869a5.888 5.888 0 005.888 5.888h142.462a5.888 5.888 0 005.888-5.888V71.187a5.888 5.888 0 00-5.888-5.888z", fill: "url(#generic_svg__paint1_linear_3554_6648)", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M156.575 108.708H88.23v48.857h68.345v-48.857z", fill: "url(#generic_svg__paint2_linear_3554_6648)", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M51.172 65.3h142.462a5.886 5.886 0 015.888 5.887v11.66H45.284v-11.66a5.888 5.888 0 015.888-5.888z", fill: "#000", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M164.541 103.859H80.149v59.444h84.392v-59.444z", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M176.432 96.932H68.373v75.18h108.059v-75.18z", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M187.515 90.236H57.175v90.015h130.34V90.236z", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M156.575 108.708H88.23v48.846h68.345v-48.846zM45.284 82.732h154.238M156.575 108.708l42.947-25.976M156.575 157.657l40.522 29.786M88.23 108.708L45.284 82.732M88.23 157.657l-41.215 30.017", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M98.043 108.708H88.23v9.767h9.813v-9.767z", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M107.741 108.708h-9.813v9.767h9.813v-9.767zM117.554 108.708h-9.813v9.767h9.813v-9.767zM127.367 108.708h-9.813v9.767h9.813v-9.767z", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M137.065 108.708h-9.813v9.767h9.813v-9.767zM146.878 108.708h-9.813v9.767h9.813v-9.767z", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M156.575 108.708h-9.813v9.767h9.813v-9.767zM98.043 118.521H88.23v9.767h9.813v-9.767z", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M107.741 118.521h-9.813v9.767h9.813v-9.767zM117.554 118.521h-9.813v9.767h9.813v-9.767zM127.367 118.521h-9.813v9.767h9.813v-9.767z", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M137.065 118.521h-9.813v9.767h9.813v-9.767zM146.878 118.521h-9.813v9.767h9.813v-9.767z", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M156.575 118.521h-9.813v9.767h9.813v-9.767zM98.043 128.334H88.23v9.767h9.813v-9.767z", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M107.741 128.334h-9.813v9.767h9.813v-9.767zM117.554 128.334h-9.813v9.767h9.813v-9.767zM127.367 128.334h-9.813v9.767h9.813v-9.767z", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M137.065 128.334h-9.813v9.767h9.813v-9.767zM146.878 128.334h-9.813v9.767h9.813v-9.767z", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M156.575 128.334h-9.813v9.767h9.813v-9.767zM98.043 138.031H88.23v9.767h9.813v-9.767z", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M107.741 138.031h-9.813v9.767h9.813v-9.767zM117.554 138.031h-9.813v9.767h9.813v-9.767zM127.367 138.031h-9.813v9.767h9.813v-9.767z", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M137.065 138.031h-9.813v9.767h9.813v-9.767zM146.878 138.031h-9.813v9.767h9.813v-9.767z", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M156.575 138.031h-9.813v9.767h9.813v-9.767zM98.043 147.844H88.23v9.767h9.813v-9.767z", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M107.741 147.844h-9.813v9.767h9.813v-9.767zM117.554 147.844h-9.813v9.767h9.813v-9.767zM127.367 147.844h-9.813v9.767h9.813v-9.767z", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M137.065 147.844h-9.813v9.767h9.813v-9.767zM146.878 147.844h-9.813v9.767h9.813v-9.767z", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M156.575 147.844h-9.813v9.767h9.813v-9.767zM156.575 118.521l42.947-14.662M156.575 128.334l42.947-3.233M156.575 147.844l42.947 19.857M156.575 138.031l42.947 8.428M88.23 118.521l-42.946-14.662M88.23 128.334l-42.946-3.233M88.23 147.844l-42.946 19.857M88.23 138.031l-42.946 8.428M67.45 82.732l30.478 25.976M89.5 82.732l18.241 25.976M111.435 82.732l6.119 25.976M133.37 82.732l-6.118 25.976M155.305 82.732l-18.24 25.976M177.24 82.732l-30.478 25.976M67.334 188.944l30.594-31.287M89.385 188.944l18.356-31.287M111.435 188.944l6.119-31.287M133.37 188.944l-6.118-31.287M155.421 188.944l-18.356-31.287M177.471 188.944l-30.709-31.287", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M165.003 80.654a6.234 6.234 0 100-12.468 6.234 6.234 0 000 12.468z", fill: "url(#generic_svg__paint3_linear_3554_6648)", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M183.496 76.053a6.234 6.234 0 10-12.14-2.846 6.234 6.234 0 0012.14 2.846z", fill: "url(#generic_svg__paint4_linear_3554_6648)", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M192.176 80.203a6.234 6.234 0 10-4.832-11.495 6.234 6.234 0 004.832 11.495z", fill: "#BDC4CF", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M183.475 74.189a7.037 7.037 0 016.234-3.233 7.27 7.27 0 016.118 3.233v0a7.501 7.501 0 01-12.352 0z", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M191.132 77.002a3.233 3.233 0 10-2.494-5.964 3.233 3.233 0 002.494 5.964zM180.704 70.495h-4.849v7.065h4.849v-7.066z", fill: "#E9ECEE", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M178.857 71.418h-4.849v7.066h4.849v-7.066z", fill: "#E9ECEE", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M165.003 71.072v6.696M161.54 74.42h6.811", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M105.317 45.558c0 5.888-1.155 10.737-2.656 10.737-1.501 0-2.54-4.85-2.54-10.737 0-5.888 1.155-10.621 2.54-10.621 1.386 0 2.656 4.733 2.656 10.62z", fill: "#0A0A0A", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M38.357 90.12H51.98a6.35 6.35 0 016.35 6.35v15.701H32.007v-15.7a6.35 6.35 0 016.35-6.35z", fill: "url(#generic_svg__paint5_linear_3554_6648)", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M32.007 109.054H58.33M32.007 105.937H58.33M32.007 102.705H58.33M32.007 99.588H58.33M32.007 96.47H58.33M32.816 93.238H57.52", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M45.284 112.171H32.007v.462a6.35 6.35 0 01-2.424 4.964 24.94 24.94 0 00-9.582 19.857 25.284 25.284 0 0025.283 25.168", fill: "url(#generic_svg__paint6_linear_3554_6648)" }),
+        React.createElement("path", { d: "M45.284 112.171H32.007v.462a6.35 6.35 0 01-2.424 4.964 24.94 24.94 0 00-9.582 19.857 25.284 25.284 0 0025.283 25.168", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M45.284 162.622a25.285 25.285 0 0015.47-45.025 6.35 6.35 0 01-2.424-4.964v-.462H45.169", fill: "#fff" }),
+        React.createElement("path", { d: "M45.284 162.622a25.285 25.285 0 0015.47-45.025 6.35 6.35 0 01-2.424-4.964v-.462H45.169M45.169 112.171v50.451", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M102.084 40.594c.693 0 1.27 2.193 1.27 4.964 0 2.77-.577 5.08-1.27 5.08H79.918a9.928 9.928 0 017.504 9.582 9.929 9.929 0 01-9.928 9.928H52.442a2.195 2.195 0 00-2.31 2.194V90.12H40.09V70.033a10.044 10.044 0 018.427-9.813 9.929 9.929 0 01-8.427-9.698 10.16 10.16 0 0110.16-9.928h51.835z", fill: "url(#generic_svg__paint7_linear_3554_6648)", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M80.034 50.638H50.133M78.417 60.22H48.632", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M141.452 116.212v7.735a25.143 25.143 0 001.399 10.141 25.153 25.153 0 0013.687 14.647 25.159 25.159 0 0028.412-5.902 25.149 25.149 0 005.322-8.745 25.143 25.143 0 001.399-10.141v-5.542", fill: "#000" }),
+        React.createElement("path", { d: "M141.452 116.212v7.735a25.143 25.143 0 001.399 10.141 25.153 25.153 0 0013.687 14.647 25.159 25.159 0 0028.412-5.902 25.149 25.149 0 005.322-8.745 25.143 25.143 0 001.399-10.141v-5.542", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M191.671 190.098v-7.042a31.287 31.287 0 100-62.573v-7.042a38.329 38.329 0 110 76.657z", fill: "url(#generic_svg__paint8_linear_3554_6648)", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M191.094 111.94a25.05 25.05 0 00-43.127-11.708 25.055 25.055 0 000 33.576 25.054 25.054 0 0043.127-11.708 2.773 2.773 0 002.54-2.656v-4.964a2.54 2.54 0 00-2.54-2.54z", fill: "url(#generic_svg__paint9_linear_3554_6648)", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M141.452 184.557v7.042a25.17 25.17 0 0025.11 23.464 25.17 25.17 0 0025.109-23.464v-7.042", fill: "#000" }),
+        React.createElement("path", { d: "M141.452 184.557v7.042a25.17 25.17 0 0025.11 23.464 25.17 25.17 0 0025.109-23.464v-7.042", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M191.441 181.44a25.051 25.051 0 10-.809 10.159h.809c.581 0 1.139-.231 1.551-.642.411-.412.642-.97.642-1.551v-5.773a2.193 2.193 0 00-2.193-2.193z", fill: "url(#generic_svg__paint10_linear_3554_6648)", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M184.796 120.147c1.673-9.999-5.076-19.461-15.075-21.134-9.999-1.673-19.461 5.076-21.134 15.075-1.673 9.999 5.076 19.461 15.075 21.134 9.999 1.673 19.461-5.076 21.134-15.075z", fill: "url(#generic_svg__paint11_linear_3554_6648)", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M184.678 187.632c1.673-9.998-5.076-19.46-15.075-21.134-9.999-1.673-19.461 5.076-21.134 15.075-1.673 9.999 5.076 19.461 15.075 21.134 9.999 1.673 19.461-5.076 21.134-15.075z", fill: "url(#generic_svg__paint12_linear_3554_6648)", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M184.842 117.013c-3.513-5.62-10.313-9.437-18.133-9.437-7.827 0-14.633 3.817-18.139 9.45l.007.014c3.513 5.613 10.312 9.417 18.119 9.417 7.827 0 14.64-3.804 18.146-9.444z", fill: "url(#generic_svg__paint13_linear_3554_6648)", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M157.279 117.02a9.444 9.444 0 109.444-9.444c-5.216.007-9.444 4.235-9.444 9.444z", fill: "#000", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M184.842 184.596c-3.513-5.62-10.312-9.437-18.133-9.437-7.827 0-14.633 3.817-18.139 9.451l.007.013c3.513 5.613 10.312 9.417 18.119 9.417 7.827 0 14.64-3.804 18.146-9.444z", fill: "url(#generic_svg__paint14_linear_3554_6648)", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M157.279 184.603a9.444 9.444 0 1018.887 0c0-5.216-4.228-9.444-9.443-9.444-5.216.007-9.444 4.235-9.444 9.444z", fill: "#000", stroke: "#000", strokeWidth: 0.462, strokeMiterlimit: 10 }),
+        React.createElement("path", { d: "M44.938 147.608c-5.266-.123-9.497-4.427-9.497-9.721 0-5.295 4.232-9.599 9.497-9.722v19.443z", fill: "#000", stroke: "#000", strokeWidth: 0.462 }),
+        React.createElement("path", { d: "M45.089 128.167c5.265.122 9.496 4.426 9.496 9.72 0 5.295-4.231 9.599-9.496 9.722v-19.442z", fill: "url(#generic_svg__paint15_linear_3554_6648)", stroke: "#000", strokeWidth: 0.462 }),
+        React.createElement("defs", null,
+            React.createElement("linearGradient", { id: "generic_svg__paint0_linear_3554_6648", x1: 102.673, y1: 78.228, x2: 188.219, y2: 78.228, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#635DFF" }),
+                React.createElement("stop", { offset: 1, stopColor: "#3885FF" })),
+            React.createElement("linearGradient", { id: "generic_svg__paint1_linear_3554_6648", x1: 45.277, y1: 127.119, x2: 199.513, y2: 127.119, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#FF4F40" }),
+                React.createElement("stop", { offset: 1, stopColor: "#F4D" })),
+            React.createElement("linearGradient", { id: "generic_svg__paint2_linear_3554_6648", x1: 122.391, y1: 210.175, x2: 122.391, y2: 77.179, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#BBC2CD" }),
+                React.createElement("stop", { offset: 0.97, stopColor: "#fff" })),
+            React.createElement("linearGradient", { id: "generic_svg__paint3_linear_3554_6648", x1: 158.768, y1: 74.42, x2: 171.236, y2: 74.42, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#FF4F40" }),
+                React.createElement("stop", { offset: 1, stopColor: "#F4D" })),
+            React.createElement("linearGradient", { id: "generic_svg__paint4_linear_3554_6648", x1: 2228.13, y1: 1072.35, x2: 2361.79, y2: 1072.35, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#3885FF" }),
+                React.createElement("stop", { offset: 1, stopColor: "#635DFF" })),
+            React.createElement("linearGradient", { id: "generic_svg__paint5_linear_3554_6648", x1: 611.882, y1: 1834.54, x2: 611.882, y2: 496.291, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#BBC2CD" }),
+                React.createElement("stop", { offset: 0.97, stopColor: "#fff" })),
+            React.createElement("linearGradient", { id: "generic_svg__paint6_linear_3554_6648", x1: 20.004, y1: 137.396, x2: 45.287, y2: 137.396, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#635DFF" }),
+                React.createElement("stop", { offset: 1, stopColor: "#3885FF" })),
+            React.createElement("linearGradient", { id: "generic_svg__paint7_linear_3554_6648", x1: 40.123, y1: 65.357, x2: 103.331, y2: 65.357, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#E9ECEE" }),
+                React.createElement("stop", { offset: 1, stopColor: "#fff" })),
+            React.createElement("linearGradient", { id: "generic_svg__paint8_linear_3554_6648", x1: 191.677, y1: 151.768, x2: 230.005, y2: 151.768, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#635DFF" }),
+                React.createElement("stop", { offset: 1, stopColor: "#3885FF" })),
+            React.createElement("linearGradient", { id: "generic_svg__paint9_linear_3554_6648", x1: 141.518, y1: 117.019, x2: 193.641, y2: 117.019, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#635DFF" }),
+                React.createElement("stop", { offset: 1, stopColor: "#3885FF" })),
+            React.createElement("linearGradient", { id: "generic_svg__paint10_linear_3554_6648", x1: 141.541, y1: 184.573, x2: 193.641, y2: 184.573, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#635DFF" }),
+                React.createElement("stop", { offset: 1, stopColor: "#3885FF" })),
+            React.createElement("linearGradient", { id: "generic_svg__paint11_linear_3554_6648", x1: 6060.47, y1: 5552.28, x2: 6060.47, y2: 2494.51, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#E9ECEE" }),
+                React.createElement("stop", { offset: 1, stopColor: "#fff" })),
+            React.createElement("linearGradient", { id: "generic_svg__paint12_linear_3554_6648", x1: 6060.42, y1: 7991.02, x2: 6060.42, y2: 4571.63, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#E9ECEE" }),
+                React.createElement("stop", { offset: 1, stopColor: "#fff" })),
+            React.createElement("linearGradient", { id: "generic_svg__paint13_linear_3554_6648", x1: 148.57, y1: 117.016, x2: 160.599, y2: 134.093, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#3EC6EB" }),
+                React.createElement("stop", { offset: 1, stopColor: "#1BC99F" })),
+            React.createElement("linearGradient", { id: "generic_svg__paint14_linear_3554_6648", x1: 148.57, y1: 184.6, x2: 160.599, y2: 201.676, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#3EC6EB" }),
+                React.createElement("stop", { offset: 0.999, stopColor: "#1BC99F" })),
+            React.createElement("linearGradient", { id: "generic_svg__paint15_linear_3554_6648", x1: 54.816, y1: 137.887, x2: 44.859, y2: 137.887, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#FF4F40" }),
+                React.createElement("stop", { offset: 1, stopColor: "#F4D" })))));
+}, {
+    name: common_1.illustrationComponentName,
+})({});

package/illustrations/components/index.d.ts

@@ -2,10 +2,12 @@ export { IllustrationDevelopers } from './developers';
 export { IllustrationEnterpriseConnection } from './enterprise-connection';
 export { IllustrationErrorPage } from './error-page';
 export { IllustrationExperiencedUser } from './experienced-user';
+export { IllustrationGeneric } from './generic';
 export { IllustrationNewAuth0UserA } from './new-auth0-user-a';
 export { IllustrationNoContent } from './no-content';
 export { IllustrationNotifications } from './notifications';
 export { IllustrationRoles } from './roles';
 export { IllustrationSingleSignOn } from './single-sign-on';
 export { IllustrationStreamsLogs } from './streams-logs';
+export { IllustrationTeams } from './teams';
 export { IllustrationUsers } from './users';

package/illustrations/components/index.js

@@ -4,7 +4,7 @@ This file is generated. Any changes made to this file will be lost.
 To update this output make changes to `scripts/svgr/illustration-index-template.js`
 */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IllustrationUsers = exports.IllustrationStreamsLogs = exports.IllustrationSingleSignOn = exports.IllustrationRoles = exports.IllustrationNotifications = exports.IllustrationNoContent = exports.IllustrationNewAuth0UserA = exports.IllustrationExperiencedUser = exports.IllustrationErrorPage = exports.IllustrationEnterpriseConnection = exports.IllustrationDevelopers = void 0;
+exports.IllustrationUsers = exports.IllustrationTeams = exports.IllustrationStreamsLogs = exports.IllustrationSingleSignOn = exports.IllustrationRoles = exports.IllustrationNotifications = exports.IllustrationNoContent = exports.IllustrationNewAuth0UserA = exports.IllustrationGeneric = exports.IllustrationExperiencedUser = exports.IllustrationErrorPage = exports.IllustrationEnterpriseConnection = exports.IllustrationDevelopers = void 0;
 var developers_1 = require("./developers");
 Object.defineProperty(exports, "IllustrationDevelopers", { enumerable: true, get: function () { return developers_1.IllustrationDevelopers; } });
 var enterprise_connection_1 = require("./enterprise-connection");
@@ -13,6 +13,8 @@ var error_page_1 = require("./error-page");
 Object.defineProperty(exports, "IllustrationErrorPage", { enumerable: true, get: function () { return error_page_1.IllustrationErrorPage; } });
 var experienced_user_1 = require("./experienced-user");
 Object.defineProperty(exports, "IllustrationExperiencedUser", { enumerable: true, get: function () { return experienced_user_1.IllustrationExperiencedUser; } });
+var generic_1 = require("./generic");
+Object.defineProperty(exports, "IllustrationGeneric", { enumerable: true, get: function () { return generic_1.IllustrationGeneric; } });
 var new_auth0_user_a_1 = require("./new-auth0-user-a");
 Object.defineProperty(exports, "IllustrationNewAuth0UserA", { enumerable: true, get: function () { return new_auth0_user_a_1.IllustrationNewAuth0UserA; } });
 var no_content_1 = require("./no-content");
@@ -25,5 +27,7 @@ var single_sign_on_1 = require("./single-sign-on");
 Object.defineProperty(exports, "IllustrationSingleSignOn", { enumerable: true, get: function () { return single_sign_on_1.IllustrationSingleSignOn; } });
 var streams_logs_1 = require("./streams-logs");
 Object.defineProperty(exports, "IllustrationStreamsLogs", { enumerable: true, get: function () { return streams_logs_1.IllustrationStreamsLogs; } });
+var teams_1 = require("./teams");
+Object.defineProperty(exports, "IllustrationTeams", { enumerable: true, get: function () { return teams_1.IllustrationTeams; } });
 var users_1 = require("./users");
 Object.defineProperty(exports, "IllustrationUsers", { enumerable: true, get: function () { return users_1.IllustrationUsers; } });

package/illustrations/components/teams.d.ts

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

package/illustrations/components/teams.js

@@ -0,0 +1,121 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IllustrationTeams = void 0;
+/*
+    This file is generated with the "illustrations" script.
+    To update this output make changes to `scripts/svgr/illustration-icon-template.js`
+    */
+var React = __importStar(require("react"));
+var common_1 = require("../common");
+var styled_1 = require("../../styled");
+exports.IllustrationTeams = (0, styled_1.styled)(function (_a) {
+    var props = __rest(_a, []);
+    return (React.createElement("svg", __assign({ width: "1em", height: "1em", viewBox: "0 0 250 250", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React.createElement("g", { clipPath: "url(#teams_svg__clip0_2124_2918)" },
+            React.createElement("path", { d: "M138.274 163.679H67.481a5.329 5.329 0 00-5.329 5.329v40.725a5.328 5.328 0 005.329 5.328h70.793a5.327 5.327 0 005.328-5.328v-40.725a5.328 5.328 0 00-5.328-5.329z", fill: "#fff", stroke: "#000", strokeWidth: 0.4, strokeLinejoin: "round", strokeDasharray: "1.07 1.07" }),
+            React.createElement("path", { d: "M129.52 168.627H58.727a5.329 5.329 0 00-5.329 5.328v40.725a5.329 5.329 0 005.329 5.329h70.793a5.328 5.328 0 005.328-5.329v-40.725a5.328 5.328 0 00-5.328-5.328z", fill: "#fff", stroke: "#000", strokeWidth: 0.4, strokeLinejoin: "round", strokeDasharray: "1.07 1.07" }),
+            React.createElement("path", { d: "M124.572 173.575H53.779a5.329 5.329 0 00-5.329 5.329v40.725a5.328 5.328 0 005.329 5.328h70.793a5.327 5.327 0 005.328-5.328v-40.725a5.328 5.328 0 00-5.328-5.329z", fill: "#fff", stroke: "#000", strokeWidth: 0.4, strokeLinejoin: "round", strokeDasharray: "1.07 1.07" }),
+            React.createElement("path", { d: "M119.719 178.523H48.926a5.329 5.329 0 00-5.328 5.328v40.725a5.329 5.329 0 005.328 5.329h70.793a5.33 5.33 0 005.329-5.329v-40.725a5.329 5.329 0 00-5.329-5.328z", fill: "url(#teams_svg__paint0_linear_2124_2918)", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
+            React.createElement("path", { d: "M47.88 229.81c-.19 0-.19-.286-.19-.286v-14.938c0-4.187 4.852-7.708 11.513-8.754v-6.946a4.471 4.471 0 014.472-4.377 4.375 4.375 0 014.187 4.377v.57l1.427 3.045h-1.427v3.235c6.946 1.047 11.989 4.568 11.989 8.85v15.319H47.88v-.095zM88.7 230v-15.415c0-4.186 4.852-7.707 11.608-8.754v-6.946a4.281 4.281 0 018.563 0v.571l1.523 3.045h-1.523v3.235c6.947 1.047 12.085 4.568 12.085 8.849v15.32L88.699 230z", fill: "#fff", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
+            React.createElement("path", { d: "M84.228 178.523V230", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
+            React.createElement("path", { d: "M49.877 185.374a1.427 1.427 0 100-2.854 1.427 1.427 0 000 2.854zM54.92 185.374a1.427 1.427 0 10.001-2.854 1.427 1.427 0 000 2.854zM59.964 185.374a1.427 1.427 0 100-2.855 1.427 1.427 0 000 2.855z", fill: "#fff", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
+            React.createElement("path", { d: "M162.062 20H32.179a3.33 3.33 0 00-3.33 3.33v86.255a3.33 3.33 0 003.33 3.331h129.883a3.33 3.33 0 003.33-3.331V23.33a3.33 3.33 0 00-3.33-3.33z", fill: "#fff" }),
+            React.createElement("path", { d: "M162.062 20H32.179a3.33 3.33 0 00-3.33 3.33v86.255a3.33 3.33 0 003.33 3.331h129.883a3.33 3.33 0 003.33-3.331V23.33a3.33 3.33 0 00-3.33-3.33z", stroke: "#000", strokeWidth: 0.4, strokeLinejoin: "round", strokeDasharray: "1.07 1.07" }),
+            React.createElement("path", { d: "M168.532 26.565H38.65a3.33 3.33 0 00-3.33 3.33v86.256a3.33 3.33 0 003.33 3.33h129.882a3.33 3.33 0 003.331-3.33V29.896a3.33 3.33 0 00-3.331-3.33z", fill: "#fff" }),
+            React.createElement("path", { d: "M168.532 26.565H38.65a3.33 3.33 0 00-3.33 3.33v86.256a3.33 3.33 0 003.33 3.33h129.882a3.33 3.33 0 003.331-3.33V29.896a3.33 3.33 0 00-3.331-3.33z", stroke: "#000", strokeWidth: 0.4, strokeLinejoin: "round", strokeDasharray: "1.07 1.07" }),
+            React.createElement("path", { d: "M175.954 33.036H46.072a3.33 3.33 0 00-3.33 3.33v86.255a3.33 3.33 0 003.33 3.33h129.882a3.33 3.33 0 003.33-3.33V36.366a3.33 3.33 0 00-3.33-3.33z", fill: "#fff" }),
+            React.createElement("path", { d: "M175.954 33.036H46.072a3.33 3.33 0 00-3.33 3.33v86.255a3.33 3.33 0 003.33 3.33h129.882a3.33 3.33 0 003.33-3.33V36.366a3.33 3.33 0 00-3.33-3.33z", stroke: "#000", strokeWidth: 0.4, strokeLinejoin: "round", strokeDasharray: "1.07 1.07" }),
+            React.createElement("path", { d: "M182.805 39.41H52.922a3.33 3.33 0 00-3.33 3.331v86.255a3.33 3.33 0 003.33 3.331h129.883a3.33 3.33 0 003.33-3.331V42.741a3.33 3.33 0 00-3.33-3.33z", fill: "url(#teams_svg__paint1_linear_2124_2918)", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
+            React.createElement("path", { d: "M54.445 85.845V68.908c0-4.567 5.424-8.564 12.845-9.8V51.4a4.852 4.852 0 014.853-4.853 4.852 4.852 0 014.663 4.758v.761l1.617 3.33h-1.617v3.616c7.707 1.142 13.32 5.138 13.32 9.8v17.033H54.446zM54.445 132.279v-16.746c0-4.663 5.424-8.564 12.845-9.801v-7.707a4.852 4.852 0 014.853-4.853 4.757 4.757 0 014.663 4.758v.76l1.617 3.236h-1.617v3.711c7.707 1.142 13.32 5.138 13.32 9.896v16.746H54.446zM99.927 85.845V68.908c0-4.567 5.424-8.564 12.846-9.8V51.4a4.853 4.853 0 014.853-4.853 4.853 4.853 0 014.662 4.758v.761l1.618 3.33h-1.618v3.616c7.707 1.142 13.321 5.138 13.321 9.8v17.033H99.927zM99.927 132.279v-16.746c0-4.663 5.424-8.564 12.846-9.801v-7.707a4.853 4.853 0 014.853-4.853 4.755 4.755 0 014.662 4.758v.76l1.618 3.236h-1.618v3.711c7.707 1.142 13.321 5.138 13.321 9.896v16.746H99.927z", fill: "#fff", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
+            React.createElement("path", { d: "M145.41 86.035V68.908c0-4.567 5.424-8.564 12.846-9.8V51.4a4.852 4.852 0 019.61-.095v.761l1.618 3.33h-1.618v3.616c7.612 1.142 13.321 5.138 13.321 9.8V85.94", fill: "#fff" }),
+            React.createElement("path", { d: "M145.41 86.035V68.908c0-4.567 5.424-8.564 12.846-9.8V51.4a4.852 4.852 0 019.61-.095v.761l1.618 3.33h-1.618v3.616c7.612 1.142 13.321 5.138 13.321 9.8V85.94", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
+            React.createElement("path", { d: "M145.41 132.279v-16.746c0-4.663 5.424-8.564 12.846-9.801v-7.707a4.851 4.851 0 019.61-.096v.762l1.618 3.235h-1.618v3.711c7.612 1.142 13.321 5.138 13.321 9.896v16.746H145.41z", fill: "#fff", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
+            React.createElement("path", { d: "M49.592 85.845H186.04M140.272 39.41v92.964M94.885 39.41v92.964", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
+            React.createElement("path", { d: "M204.024 72.143h-69.176a4.948 4.948 0 00-4.948 4.948v117.246a4.948 4.948 0 004.948 4.948h69.176a4.947 4.947 0 004.947-4.948V77.091a4.948 4.948 0 00-4.947-4.948z", fill: "#fff", stroke: "#000", strokeWidth: 0.4, strokeLinejoin: "round", strokeDasharray: "1.07 1.07" }),
+            React.createElement("path", { d: "M198.695 77.281H129.52a4.948 4.948 0 00-4.948 4.948v117.246a4.948 4.948 0 004.948 4.948h69.175a4.948 4.948 0 004.948-4.948V82.229a4.948 4.948 0 00-4.948-4.948z", fill: "#fff", stroke: "#000", strokeWidth: 0.4, strokeLinejoin: "round", strokeDasharray: "1.07 1.07" }),
+            React.createElement("path", { d: "M192.606 82.8H123.43a4.948 4.948 0 00-4.948 4.948v117.246a4.948 4.948 0 004.948 4.948h69.176a4.947 4.947 0 004.947-4.948V87.748a4.948 4.948 0 00-4.947-4.948z", fill: "#fff", stroke: "#000", strokeWidth: 0.4, strokeLinejoin: "round", strokeDasharray: "1.07 1.07" }),
+            React.createElement("path", { d: "M186.421 88.7h-69.176a4.948 4.948 0 00-4.948 4.947v117.247a4.947 4.947 0 004.948 4.947h69.176a4.947 4.947 0 004.947-4.947V93.647a4.948 4.948 0 00-4.947-4.948z", fill: "url(#teams_svg__paint2_linear_2124_2918)", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
+            React.createElement("path", { d: "M125.904 152.071v-24.74c0-6.756 7.898-12.37 18.65-14.178v-11.228A6.955 6.955 0 01146.555 97a6.934 6.934 0 014.897-2.068 6.945 6.945 0 016.994 6.898v1.047l2.284 4.758h-2.284v5.328c11.038 1.618 19.316 7.422 19.316 14.273v24.739l-51.858.096zM125.904 215.823v-24.74c0-6.661 7.898-12.37 18.65-14.178v-11.132a7.041 7.041 0 017.041-7.042 6.848 6.848 0 016.851 6.851v1.047l2.284 4.853h-2.284v5.328c11.038 1.713 19.316 7.422 19.316 14.273v24.74h-51.858z", fill: "#fff", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
+            React.createElement("path", { d: "M191.368 152.071h-79.071", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
+            React.createElement("path", { d: "M118.101 96.312a1.427 1.427 0 10.001-2.855 1.427 1.427 0 00-.001 2.855zM123.145 96.312a1.427 1.427 0 100-2.855 1.427 1.427 0 000 2.855zM128.188 96.312a1.427 1.427 0 100-2.855 1.427 1.427 0 000 2.855zM54.54 45.596a1.427 1.427 0 100-2.855 1.427 1.427 0 000 2.855zM59.583 45.596a1.427 1.427 0 100-2.855 1.427 1.427 0 000 2.855zM64.626 45.596a1.427 1.427 0 100-2.855 1.427 1.427 0 000 2.855z", fill: "#000", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
+            React.createElement("path", { d: "M210.399 120.48h-19.03v-15.224h19.03a4 4 0 003.72-2.533 3.995 3.995 0 00.276-1.559v-34.35a3.615 3.615 0 00-3.711-3.71H186.04V47.879h24.644a18.937 18.937 0 0118.936 18.936v34.349a19.314 19.314 0 01-19.221 19.316z", fill: "url(#teams_svg__paint3_linear_2124_2918)", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
+            React.createElement("path", { d: "M186.04 65.483h9.896V45.996h-9.896v19.487zM191.368 122.469h9.896v-19.487h-9.896v19.487z", fill: "#BAC0CB", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
+            React.createElement("path", { d: "M81.754 176.049H66.529V154.64a1.715 1.715 0 00-1.617-1.618H41.029a20.641 20.641 0 01-14.635-6.081 20.654 20.654 0 01-6.013-14.662V80.897a20.743 20.743 0 0120.648-20.743h8.468v15.224H41.03a5.519 5.519 0 00-5.424 5.519v51.382a5.519 5.519 0 005.424 5.519h23.883a16.937 16.937 0 0116.842 16.842v21.409z", fill: "url(#teams_svg__paint4_linear_2124_2918)", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
+            React.createElement("path", { d: "M83.905 178.523v-7.459H64.418v7.459h19.487z", fill: "#000", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
+            React.createElement("path", { d: "M82.818 171.064v-4.017H65.504v4.017h17.314zM44.548 77.281h5.044V57.794h-5.044v19.487z", fill: "#BAC0CB", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 })),
+        React.createElement("defs", null,
+            React.createElement("linearGradient", { id: "teams_svg__paint0_linear_2124_2918", x1: 43.609, y1: 204.213, x2: 125.058, y2: 204.213, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#635DFF" }),
+                React.createElement("stop", { offset: 1, stopColor: "#3885FF" })),
+            React.createElement("linearGradient", { id: "teams_svg__paint1_linear_2124_2918", x1: 4263.31, y1: 6492.41, x2: 23851.8, y2: 6492.41, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#E8EBED" }),
+                React.createElement("stop", { offset: 1, stopColor: "#fff" })),
+            React.createElement("linearGradient", { id: "teams_svg__paint2_linear_2124_2918", x1: 100.566, y1: 93.548, x2: 199.557, y2: 214.733, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#3EC6EB" }),
+                React.createElement("stop", { offset: 0.999, stopColor: "#1BC99F" })),
+            React.createElement("linearGradient", { id: "teams_svg__paint3_linear_2124_2918", x1: 194.443, y1: 120.48, x2: 234.389, y2: 62.097, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#FF4F40" }),
+                React.createElement("stop", { offset: 1, stopColor: "#F4D" })),
+            React.createElement("linearGradient", { id: "teams_svg__paint4_linear_2124_2918", x1: 20.38, y1: 86.044, x2: 97.52, y2: 174.098, gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: "#F4D" }),
+                React.createElement("stop", { offset: 1, stopColor: "#EBCA40" })),
+            React.createElement("clipPath", { id: "teams_svg__clip0_2124_2918" },
+                React.createElement("path", { fill: "#fff", d: "M0 0h250v250H0z" })))));
+}, {
+    name: common_1.illustrationComponentName,
+})({});

package/label/label.d.ts

@@ -7,9 +7,9 @@ export interface ILabelComponentProps {
     /**
      * Availability of the feature. Displays as a label after the title.
      */
-    productReleaseStage?: 'beta' | 'earlyAccess' | 'generalAvailability' | 'deprecated';
+    productReleaseStage?: 'developerPreview' | 'beta' | 'earlyAccess' | 'generalAvailability' | 'deprecated';
     /**
-     * If true will abbreviate the "Early Access" label to "Early"
+     * If true will abbreviate the "Early Access" label to "Early" and the "Developer Preview" label to "Preview"
      * @default true
      */
     productReleaseStageAbbr?: boolean;

package/label/label.js

@@ -71,6 +71,12 @@ var getReleaseStageLabelProps = function (productReleaseStage, productReleaseSta
             labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'New';
             labelProps.color = 'primary';
             break;
+        case 'developerPreview':
+            labelProps.color = 'primary';
+            productReleaseStageAbbr
+                ? (labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'Preview')
+                : (labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'Developer Preview');
+            break;
         case 'beta':
             labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'Beta';
             labelProps.color = 'primary';

package/package.json

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

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

@@ -22,6 +22,6 @@ export interface IPageHeaderProps extends Omit<IRowLayoutProps, 'title'>, Pick<I
     fullWidth?: boolean;
     compact?: boolean;
     startActions?: React.ReactNode;
-    productReleaseStage?: 'beta' | 'generalAvailability' | 'earlyAccess' | 'deprecated';
+    productReleaseStage?: 'developerPreview' | 'beta' | 'generalAvailability' | 'earlyAccess' | 'deprecated';
 }
 export declare const PageHeader: React.ForwardRefExoticComponent<IPageHeaderProps & React.RefAttributes<HTMLDivElement>>;

package/switch/switch-classes.d.ts

@@ -1,5 +1,5 @@
 export declare const switchComponentName: "QuantumSwitch";
 export declare function getSwitchUtilityClass(slot: string): string;
-export declare const switchClasses: Record<"switch" | "formControlLabel", string>;
+export declare const switchClasses: Record<"switch" | "formControlLabel" | "pressing", string>;
 export type SwitchClasses = typeof switchClasses;
 export type SwitchClassKey = keyof SwitchClasses;

package/switch/switch-classes.js

@@ -7,4 +7,4 @@ exports.switchComponentName = 'QuantumSwitch';
 function getSwitchUtilityClass(slot) {
     return (0, classes_1.generateUtilityClass)(exports.switchComponentName, slot);
 }
-exports.switchClasses = (0, classes_1.generateUtilityClasses)(exports.switchComponentName, ['switch', 'formControlLabel']);
+exports.switchClasses = (0, classes_1.generateUtilityClasses)(exports.switchComponentName, ['switch', 'formControlLabel', 'pressing']);