@auth0/quantum-product 2.2.0 → 2.3.0

package/card/card-header/card-header.d.ts

@@ -75,7 +75,7 @@ export declare const CardHeader: React.ForwardRefExoticComponent<Partial<ICardCo
      * These props will be forwarded to the subheader
      * (as long as disableTypography is not `true`).
      */
-    subheaderTypographyProps?: ITextProps<any, {}> | undefined;
+    subheaderTypographyProps?: ITextProps<any> | undefined;
     /**
      * The content of the component.
      */
@@ -84,5 +84,5 @@ export declare const CardHeader: React.ForwardRefExoticComponent<Partial<ICardCo
      * These props will be forwarded to the title
      * (as long as disableTypography is not `true`).
      */
-    titleTypographyProps?: ITextProps<any, {}> | undefined;
+    titleTypographyProps?: ITextProps<any> | undefined;
 } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "title" | "ref" | "action" | "size" | "classes" | "avatar" | "disableTypography" | "subheader" | "subheaderTypographyProps" | "titleTypographyProps"> & import("../../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;

package/description-block/description-block.d.ts

@@ -20,8 +20,8 @@ export declare const DescriptionBlock: React.ForwardRefExoticComponent<IDescript
     description: React.ReactNode;
     code?: boolean | undefined;
     component?: any;
-    labelTypographyProps?: ITextProps<"span", {}> | undefined;
-    descriptionTypographyProps?: ITextProps<"span", {}> | undefined;
+    labelTypographyProps?: ITextProps<"span"> | undefined;
+    descriptionTypographyProps?: ITextProps<"span"> | undefined;
     onCopy?(event: React.MouseEvent<HTMLButtonElement>): void;
 } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "code" | "ref" | "onCopy" | "component" | "description" | "descriptionTypographyProps" | keyof IDescriptionBlockRootOwnerState | "labelTypographyProps"> & import("../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/empty-state/empty-state.d.ts

@@ -5,11 +5,33 @@ import { IRowLayoutProps } from '../row-layout';
 import { ITextProps } from '../text';
 import { EmptyStateClasses } from './empty-state-classes';
 export declare const StyledCard: import("styled-components").StyledComponent<import("../overridable-component").OverridableComponent<import("../card/card").ICardTypeMap<{}, "div">>, import("..").ITheme, import("@mui/system").MUIStyledCommonProps<import("..").ITheme>, never>;
-export declare const Subtitle: import("styled-components").StyledComponent<import("../overridable-component").OverridableComponent<import("@mui/material").TypographyTypeMap<{}, "span">>, import("..").ITheme, import("@mui/system").MUIStyledCommonProps<import("..").ITheme>, never>;
+export declare const Subtitle: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<Omit<import("@mui/material").TypographyOwnProps, "color" | "classes" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "component" | "as"> & {
+    align?: "center" | "inherit" | "left" | "right" | "justify" | undefined;
+    children?: React.ReactNode;
+    classes?: Partial<Record<"type_code_50" | "type_code_100" | "type_code_200" | "type_code_300" | "type_heading_100" | "type_heading_200" | "type_heading_300" | "type_heading_400" | "type_heading_500" | "type_heading_600" | "type_heading_700" | "type_heading_800" | "type_heading_900" | "type_heading_1000" | "type_body_50" | "type_body_100" | "type_body_200" | "type_body_300" | "type_body_400" | "type_body_500" | "type_body_50_emphasis" | "type_body_50_emphasis_paragraph" | "type_body_100_emphasis" | "type_body_100_emphasis_paragraph" | "type_body_200_emphasis" | "type_body_200_emphasis_paragraph" | "type_body_300_emphasis" | "type_body_300_emphasis_paragraph" | "type_body_400_emphasis" | "type_body_400_emphasis_paragraph" | "type_body_500_emphasis" | "type_preset_page_title" | "type_preset_page_title_compact" | "type_preset_section_title" | "type_preset_section_subtitle" | "type_preset_button" | "type_preset_form_label" | "type_preset_form_text" | "type_preset_caption" | "type_preset_caption_emphasis" | "type_preset_menu_item" | "type_preset_overline" | "root", string>> | undefined;
+    color?: import("../text/text").LiteralUnion<import("@auth0/quantum-tokens").ThemeColorFGTokenName> | undefined;
+    component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    sx?: import("../styled").SxProps | undefined;
+    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2" | "code1" | "code2" | import("@auth0/quantum-tokens").ThemeTypeTokenName | undefined;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "p" | "ref" | "border" | "color" | "left" | "right" | "bottom" | "top" | "flex" | "position" | "padding" | "alignContent" | "alignItems" | "alignSelf" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "width" | "zIndex" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "paddingBlock" | "paddingInline" | "classes" | "children" | "sx" | "variant" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping" | "component"> & React.RefAttributes<HTMLAnchorElement>>, import("..").ITheme, import("@mui/system").MUIStyledCommonProps<import("..").ITheme>, never>;
 export declare const Content: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("../utils/layouts").ILayoutComponentProps & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | keyof import("../utils/layouts").ILayoutComponentProps> & import("../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>, import("..").ITheme, import("@mui/system").MUIStyledCommonProps<import("..").ITheme>, never>;
 export declare const Actions: import("styled-components").StyledComponent<"div", import("..").ITheme, import("@mui/system").MUIStyledCommonProps<import("..").ITheme>, never>;
 export declare const Icon: import("styled-components").StyledComponent<"div", import("..").ITheme, import("@mui/system").MUIStyledCommonProps<import("..").ITheme>, never>;
-export declare const Message: import("styled-components").StyledComponent<import("../overridable-component").OverridableComponent<import("@mui/material").TypographyTypeMap<{}, "span">>, import("..").ITheme, import("@mui/system").MUIStyledCommonProps<import("..").ITheme>, never>;
+export declare const Message: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<Omit<import("@mui/material").TypographyOwnProps, "color" | "classes" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "component" | "as"> & {
+    align?: "center" | "inherit" | "left" | "right" | "justify" | undefined;
+    children?: React.ReactNode;
+    classes?: Partial<Record<"type_code_50" | "type_code_100" | "type_code_200" | "type_code_300" | "type_heading_100" | "type_heading_200" | "type_heading_300" | "type_heading_400" | "type_heading_500" | "type_heading_600" | "type_heading_700" | "type_heading_800" | "type_heading_900" | "type_heading_1000" | "type_body_50" | "type_body_100" | "type_body_200" | "type_body_300" | "type_body_400" | "type_body_500" | "type_body_50_emphasis" | "type_body_50_emphasis_paragraph" | "type_body_100_emphasis" | "type_body_100_emphasis_paragraph" | "type_body_200_emphasis" | "type_body_200_emphasis_paragraph" | "type_body_300_emphasis" | "type_body_300_emphasis_paragraph" | "type_body_400_emphasis" | "type_body_400_emphasis_paragraph" | "type_body_500_emphasis" | "type_preset_page_title" | "type_preset_page_title_compact" | "type_preset_section_title" | "type_preset_section_subtitle" | "type_preset_button" | "type_preset_form_label" | "type_preset_form_text" | "type_preset_caption" | "type_preset_caption_emphasis" | "type_preset_menu_item" | "type_preset_overline" | "root", string>> | undefined;
+    color?: import("../text/text").LiteralUnion<import("@auth0/quantum-tokens").ThemeColorFGTokenName> | undefined;
+    component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    sx?: import("../styled").SxProps | undefined;
+    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2" | "code1" | "code2" | import("@auth0/quantum-tokens").ThemeTypeTokenName | undefined;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "p" | "ref" | "border" | "color" | "left" | "right" | "bottom" | "top" | "flex" | "position" | "padding" | "alignContent" | "alignItems" | "alignSelf" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "width" | "zIndex" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "paddingBlock" | "paddingInline" | "classes" | "children" | "sx" | "variant" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping" | "component"> & React.RefAttributes<HTMLAnchorElement>>, import("..").ITheme, import("@mui/system").MUIStyledCommonProps<import("..").ITheme>, never>;
 export interface IEmptyStateProps extends Omit<IRowLayoutProps, 'title' | 'classes'> {
     /** Optional sibling breadcrumb content */
     breadcrumbs?: React.ReactNode;

package/esm/text/index.js

@@ -1,3 +1,2 @@
-import { default as MuiText, typographyClasses } from '@mui/material/Typography';
-export { typographyClasses };
-export var Text = MuiText;
+export { Text } from './text';
+export { textClasses, textComponentName } from './text-classes';

package/esm/text/text-classes.js

@@ -0,0 +1,50 @@
+import { generateUtilityClass, generateUtilityClasses } from '../styles/classes';
+export var textComponentName = 'QuantumText';
+export function getTextUtilityClass(slot) {
+    return generateUtilityClass(textComponentName, slot);
+}
+export var textClasses = generateUtilityClasses(textComponentName, [
+    'root',
+    'type_code_50',
+    'type_code_100',
+    'type_code_200',
+    'type_code_300',
+    'type_heading_100',
+    'type_heading_200',
+    'type_heading_300',
+    'type_heading_400',
+    'type_heading_500',
+    'type_heading_600',
+    'type_heading_700',
+    'type_heading_800',
+    'type_heading_900',
+    'type_heading_1000',
+    'type_body_50',
+    'type_body_100',
+    'type_body_200',
+    'type_body_300',
+    'type_body_400',
+    'type_body_500',
+    'type_body_50_emphasis',
+    'type_body_50_emphasis_paragraph',
+    'type_body_100_emphasis',
+    'type_body_100_emphasis_paragraph',
+    'type_body_200_emphasis',
+    'type_body_200_emphasis_paragraph',
+    'type_body_300_emphasis',
+    'type_body_300_emphasis_paragraph',
+    'type_body_400_emphasis',
+    'type_body_400_emphasis_paragraph',
+    'type_body_500_emphasis',
+    'type_preset_page_title',
+    'type_preset_page_title_compact',
+    'type_preset_section_title',
+    'type_preset_section_subtitle',
+    'type_preset_button',
+    'type_preset_form_label',
+    'type_preset_form_text',
+    'type_preset_caption',
+    'type_preset_caption_emphasis',
+    'type_preset_menu_item',
+    'type_preset_overline',
+]);

package/esm/text/text.js

@@ -0,0 +1,93 @@
+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 { styled } from '../styled';
+import { composeClasses } from '../styles/classes';
+import { getTextUtilityClass } from './text-classes';
+import Typography from '@mui/material/Typography';
+import clsx from '../utils/clsx';
+var useUtilityClasses = function (variant, classes) {
+    var slots = {
+        root: ['root', variant],
+    };
+    return composeClasses(slots, getTextUtilityClass, classes);
+};
+var Root = styled(Typography, { name: 'QuantumText', slot: 'Root' })(function (_a) {
+    var _b, _c;
+    var variant = _a.variant, theme = _a.theme, color = _a.color;
+    var typeStyles = variant ? theme.tokens[variant] || {} : {};
+    var colorValue = color ? theme.tokens[color] || undefined : undefined;
+    var isBodyVariant = variant && variant.includes('body_') && !variant.includes('emphasis');
+    return __assign(__assign(__assign({}, typeStyles), { color: colorValue }), (isBodyVariant && {
+        'strong, b': {
+            fontWeight: (_b = theme.tokens["".concat(variant, "_emphasis")]) === null || _b === void 0 ? void 0 : _b.fontWeight,
+        },
+        'p&': {
+            'strong, b': {
+                fontWeight: (_c = theme.tokens["".concat(variant, "_emphasis_paragraph")]) === null || _c === void 0 ? void 0 : _c.fontWeight,
+            },
+        },
+    }));
+});
+export var textVariantMapping = {
+    type_heading_100: 'h5',
+    type_heading_200: 'h4',
+    type_heading_300: 'h3',
+    type_heading_400: 'h2',
+    type_heading_500: 'h1',
+    type_heading_600: 'h1',
+    type_heading_700: 'h1',
+    type_heading_800: 'h1',
+    type_heading_900: 'h1',
+    type_heading_1000: 'h1',
+    type_preset_page_title: 'h1',
+    type_preset_page_title_compact: 'h1',
+    type_preset_section_title: 'h2',
+    type_preset_section_subtitle: 'h3',
+    type_preset_button: 'span',
+    type_preset_form_label: 'span',
+    type_preset_form_text: 'span',
+    type_preset_caption: 'p',
+    type_preset_caption_emphasis: 'p',
+    type_preset_menu_item: 'span',
+    type_preset_overline: 'span',
+};
+var getComponentForVariant = function (_a) {
+    var variant = _a.variant;
+    if (!variant) {
+        return undefined;
+    }
+    if (variant.includes('type_body')) {
+        return 'p';
+    }
+    if (variant.includes('type_code')) {
+        return 'span';
+    }
+    return textVariantMapping[variant];
+};
+export var Text = React.forwardRef(function (props, ref) {
+    var variant = props.variant, propClasses = props.classes, propComponent = props.component, className = props.className, rootProps = __rest(props, ["variant", "classes", "component", "className"]);
+    var classes = useUtilityClasses(variant, propClasses);
+    var component = propComponent || getComponentForVariant({ variant: variant });
+    return (React.createElement(Root, __assign({ ref: ref, variant: variant, className: clsx([classes.root, className]) }, { component: component }, rootProps)));
+});

package/expansion-panel/expansion-panel-header.d.ts

@@ -7,7 +7,7 @@ export declare const ExpansionPanelHeader: import("styled-components").StyledCom
     classes?: Partial<Record<"title" | "action" | "content" | "root" | "avatar" | "subheader", string>> | undefined;
     disableTypography?: boolean | undefined;
     subheader?: import("react").ReactNode;
-    subheaderTypographyProps?: import("..").ITextProps<any, {}> | undefined;
+    subheaderTypographyProps?: import("..").ITextProps<any> | undefined;
     title?: import("react").ReactNode;
-    titleTypographyProps?: import("..").ITextProps<any, {}> | undefined;
+    titleTypographyProps?: import("..").ITextProps<any> | undefined;
 } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "title" | "ref" | "action" | "size" | "classes" | "avatar" | "disableTypography" | "subheader" | "subheaderTypographyProps" | "titleTypographyProps"> & import("../styled").IStyledCommonProps & import("react").RefAttributes<HTMLDivElement>>, import("..").ITheme, import("@mui/system").MUIStyledCommonProps<import("..").ITheme>, never>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auth0/quantum-product",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "sideEffects": false,
   "license": "Apache-2.0",
   "publishConfig": {
@@ -12,7 +12,7 @@
   "types": "./index.d.ts",
   "dependencies": {
     "@auth0/quantum-icons": "^1.1.0",
-    "@auth0/quantum-tokens": "^1.2.0",
+    "@auth0/quantum-tokens": "^1.3.0",
     "@mui/material": "5.15.9",
     "@mui/system": "5.15.9",
     "@mui/utils": "5.15.9",

package/panel/panel-header/panel-header.d.ts

@@ -16,7 +16,7 @@ export type IPanelHeaderProps = IStyledComponentProps<{
 export declare const PanelHeader: React.ForwardRefExoticComponent<{
     title: React.ReactNode;
     titleComponent?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
-    titleTextProps?: Partial<ITextProps<"span", {}>> | undefined;
+    titleTextProps?: Partial<ITextProps<"span">> | undefined;
     endAdornment?: React.ReactNode;
     classes?: Partial<Record<"title" | "content" | "root" | "endAdornment", string>> | undefined;
 } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "title" | "ref" | "classes" | "endAdornment" | "titleComponent" | "titleTextProps"> & import("../../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;

package/region/region.d.ts

@@ -20,6 +20,6 @@ export declare const Region: React.ForwardRefExoticComponent<{
     size?: RegionSize | undefined;
     icon?: React.ReactNode;
     label?: React.ReactNode;
-    labelTypographyProps?: ITextProps<"span", {}> | undefined;
+    labelTypographyProps?: ITextProps<"span"> | undefined;
     classes?: Partial<Record<"label" | "root" | "flag", string>> | undefined;
 } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "label" | "ref" | "size" | "icon" | "classes" | "labelTypographyProps" | "locality"> & import("../styled").IStyledCommonProps & React.RefAttributes<HTMLElement>>;

package/styled.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import type { DefaultComponentProps, OverridableTypeMap } from './overridable-component';
 import { shouldForwardProp, SxProps as MUISxProps } from '@mui/system';
 import { ITheme } from './theme';
+export { DefaultComponentProps };
 export type SxProps = MUISxProps<ITheme>;
 export interface IStyledCommonProps {
     sx?: SxProps;

package/text/index.d.ts

@@ -1,6 +1,4 @@
-/// <reference types="react" />
-import { typographyClasses, TypographyTypeMap } from '@mui/material/Typography';
-import { OverridableComponent, OverrideProps } from '../overridable-component';
-export { typographyClasses };
-export type ITextProps<D extends React.ElementType = TypographyTypeMap['defaultComponent'], P = {}> = OverrideProps<TypographyTypeMap<P, D>, D>;
-export declare const Text: OverridableComponent<TypographyTypeMap<{}, "span">>;
+export { Text } from './text';
+export type { ITextProps } from './text';
+export { textClasses, textComponentName } from './text-classes';
+export type { TextClasses } from './text-classes';

package/text/index.js

@@ -1,29 +1,8 @@
 "use strict";
-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.Text = exports.typographyClasses = void 0;
-var Typography_1 = __importStar(require("@mui/material/Typography"));
-Object.defineProperty(exports, "typographyClasses", { enumerable: true, get: function () { return Typography_1.typographyClasses; } });
-exports.Text = Typography_1.default;
+exports.textComponentName = exports.textClasses = exports.Text = void 0;
+var text_1 = require("./text");
+Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return text_1.Text; } });
+var text_classes_1 = require("./text-classes");
+Object.defineProperty(exports, "textClasses", { enumerable: true, get: function () { return text_classes_1.textClasses; } });
+Object.defineProperty(exports, "textComponentName", { enumerable: true, get: function () { return text_classes_1.textComponentName; } });

package/text/text-classes.d.ts

@@ -0,0 +1,5 @@
+export declare const textComponentName: "QuantumText";
+export declare function getTextUtilityClass(slot: string): string;
+export declare const textClasses: Record<"type_code_50" | "type_code_100" | "type_code_200" | "type_code_300" | "type_heading_100" | "type_heading_200" | "type_heading_300" | "type_heading_400" | "type_heading_500" | "type_heading_600" | "type_heading_700" | "type_heading_800" | "type_heading_900" | "type_heading_1000" | "type_body_50" | "type_body_100" | "type_body_200" | "type_body_300" | "type_body_400" | "type_body_500" | "type_body_50_emphasis" | "type_body_50_emphasis_paragraph" | "type_body_100_emphasis" | "type_body_100_emphasis_paragraph" | "type_body_200_emphasis" | "type_body_200_emphasis_paragraph" | "type_body_300_emphasis" | "type_body_300_emphasis_paragraph" | "type_body_400_emphasis" | "type_body_400_emphasis_paragraph" | "type_body_500_emphasis" | "type_preset_page_title" | "type_preset_page_title_compact" | "type_preset_section_title" | "type_preset_section_subtitle" | "type_preset_button" | "type_preset_form_label" | "type_preset_form_text" | "type_preset_caption" | "type_preset_caption_emphasis" | "type_preset_menu_item" | "type_preset_overline" | "root", string>;
+export type TextClasses = typeof textClasses;
+export type TextClassKey = keyof TextClasses;

package/text/text-classes.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.textClasses = exports.getTextUtilityClass = exports.textComponentName = void 0;
+var classes_1 = require("../styles/classes");
+exports.textComponentName = 'QuantumText';
+function getTextUtilityClass(slot) {
+    return (0, classes_1.generateUtilityClass)(exports.textComponentName, slot);
+}
+exports.getTextUtilityClass = getTextUtilityClass;
+exports.textClasses = (0, classes_1.generateUtilityClasses)(exports.textComponentName, [
+    'root',
+    'type_code_50',
+    'type_code_100',
+    'type_code_200',
+    'type_code_300',
+    'type_heading_100',
+    'type_heading_200',
+    'type_heading_300',
+    'type_heading_400',
+    'type_heading_500',
+    'type_heading_600',
+    'type_heading_700',
+    'type_heading_800',
+    'type_heading_900',
+    'type_heading_1000',
+    'type_body_50',
+    'type_body_100',
+    'type_body_200',
+    'type_body_300',
+    'type_body_400',
+    'type_body_500',
+    'type_body_50_emphasis',
+    'type_body_50_emphasis_paragraph',
+    'type_body_100_emphasis',
+    'type_body_100_emphasis_paragraph',
+    'type_body_200_emphasis',
+    'type_body_200_emphasis_paragraph',
+    'type_body_300_emphasis',
+    'type_body_300_emphasis_paragraph',
+    'type_body_400_emphasis',
+    'type_body_400_emphasis_paragraph',
+    'type_body_500_emphasis',
+    'type_preset_page_title',
+    'type_preset_page_title_compact',
+    'type_preset_section_title',
+    'type_preset_section_subtitle',
+    'type_preset_button',
+    'type_preset_form_label',
+    'type_preset_form_text',
+    'type_preset_caption',
+    'type_preset_caption_emphasis',
+    'type_preset_menu_item',
+    'type_preset_overline',
+]);

package/text/text.d.ts

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { DefaultComponentProps, SxProps } from '../styled';
+import { ThemeColorFGTokenName, ThemeTypeTokenName } from '../theme/tokens';
+import { TextClasses } from './text-classes';
+import { TypographyOwnProps } from '@mui/material/Typography';
+export type LiteralUnion<LiteralType> = LiteralType | (string & Record<never, never>);
+export type ITextProps<RootComponent extends React.ElementType = 'span'> = DefaultComponentProps<{
+    props: Omit<TypographyOwnProps, 'as' | 'component' | 'sx' | 'variant' | 'color' | 'align' | 'classes' | 'gutterBottom' | 'noWrap' | 'paragraph'> & {
+        /**
+         * Set the text-align on the component.
+         * @default 'inherit'
+         */
+        align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
+        /**
+         * The content of the component.
+         */
+        children?: React.ReactNode;
+        /**
+         * Override or extend the styles applied to the component.
+         */
+        classes?: Partial<TextClasses>;
+        /**
+         * The color of the text. Only foreground tokens are supported.
+         */
+        color?: LiteralUnion<ThemeColorFGTokenName>;
+        /**
+         * The component used for the root node.
+         * Either a string to use a HTML element or a component.
+         */
+        component?: React.ElementType;
+        /**
+         * If `true`, the text will have a bottom margin.
+         * @default false
+         */
+        gutterBottom?: boolean;
+        /**
+         * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.
+         *
+         * Note that text overflow can only happen with block or inline-block level elements
+         * (the element needs to have a width in order to overflow).
+         * @default false
+         */
+        noWrap?: boolean;
+        /**
+         * If `true`, the element will be a paragraph element.
+         * @default false
+         */
+        paragraph?: boolean;
+        sx?: SxProps;
+        /**
+         * The color of the text. Only foreground tokens are supported.
+         */
+        variant?: ThemeTypeTokenName | TypographyOwnProps['variant'];
+    };
+    defaultComponent: RootComponent;
+}>;
+export declare const textVariantMapping: Partial<Record<ThemeTypeTokenName, React.ElementType>>;
+export declare const Text: React.ForwardRefExoticComponent<Omit<TypographyOwnProps, "color" | "classes" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "component" | "as"> & {
+    /**
+     * Set the text-align on the component.
+     * @default 'inherit'
+     */
+    align?: "center" | "inherit" | "left" | "right" | "justify" | undefined;
+    /**
+     * The content of the component.
+     */
+    children?: React.ReactNode;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<Record<"type_code_50" | "type_code_100" | "type_code_200" | "type_code_300" | "type_heading_100" | "type_heading_200" | "type_heading_300" | "type_heading_400" | "type_heading_500" | "type_heading_600" | "type_heading_700" | "type_heading_800" | "type_heading_900" | "type_heading_1000" | "type_body_50" | "type_body_100" | "type_body_200" | "type_body_300" | "type_body_400" | "type_body_500" | "type_body_50_emphasis" | "type_body_50_emphasis_paragraph" | "type_body_100_emphasis" | "type_body_100_emphasis_paragraph" | "type_body_200_emphasis" | "type_body_200_emphasis_paragraph" | "type_body_300_emphasis" | "type_body_300_emphasis_paragraph" | "type_body_400_emphasis" | "type_body_400_emphasis_paragraph" | "type_body_500_emphasis" | "type_preset_page_title" | "type_preset_page_title_compact" | "type_preset_section_title" | "type_preset_section_subtitle" | "type_preset_button" | "type_preset_form_label" | "type_preset_form_text" | "type_preset_caption" | "type_preset_caption_emphasis" | "type_preset_menu_item" | "type_preset_overline" | "root", string>> | undefined;
+    /**
+     * The color of the text. Only foreground tokens are supported.
+     */
+    color?: LiteralUnion<ThemeColorFGTokenName> | undefined;
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    /**
+     * If `true`, the text will have a bottom margin.
+     * @default false
+     */
+    gutterBottom?: boolean | undefined;
+    /**
+     * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.
+     *
+     * Note that text overflow can only happen with block or inline-block level elements
+     * (the element needs to have a width in order to overflow).
+     * @default false
+     */
+    noWrap?: boolean | undefined;
+    /**
+     * If `true`, the element will be a paragraph element.
+     * @default false
+     */
+    paragraph?: boolean | undefined;
+    sx?: SxProps | undefined;
+    /**
+     * The color of the text. Only foreground tokens are supported.
+     */
+    variant?: ThemeTypeTokenName | TypographyOwnProps['variant'];
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "p" | "ref" | "border" | "color" | "left" | "right" | "bottom" | "top" | "flex" | "position" | "padding" | "alignContent" | "alignItems" | "alignSelf" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "width" | "zIndex" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "paddingBlock" | "paddingInline" | "classes" | "children" | "sx" | "variant" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping" | "component"> & React.RefAttributes<HTMLAnchorElement>>;

package/text/text.js

@@ -0,0 +1,122 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Text = exports.textVariantMapping = void 0;
+var React = __importStar(require("react"));
+var styled_1 = require("../styled");
+var classes_1 = require("../styles/classes");
+var text_classes_1 = require("./text-classes");
+var Typography_1 = __importDefault(require("@mui/material/Typography"));
+var clsx_1 = __importDefault(require("../utils/clsx"));
+var useUtilityClasses = function (variant, classes) {
+    var slots = {
+        root: ['root', variant],
+    };
+    return (0, classes_1.composeClasses)(slots, text_classes_1.getTextUtilityClass, classes);
+};
+var Root = (0, styled_1.styled)(Typography_1.default, { name: 'QuantumText', slot: 'Root' })(function (_a) {
+    var _b, _c;
+    var variant = _a.variant, theme = _a.theme, color = _a.color;
+    var typeStyles = variant ? theme.tokens[variant] || {} : {};
+    var colorValue = color ? theme.tokens[color] || undefined : undefined;
+    var isBodyVariant = variant && variant.includes('body_') && !variant.includes('emphasis');
+    return __assign(__assign(__assign({}, typeStyles), { color: colorValue }), (isBodyVariant && {
+        'strong, b': {
+            fontWeight: (_b = theme.tokens["".concat(variant, "_emphasis")]) === null || _b === void 0 ? void 0 : _b.fontWeight,
+        },
+        'p&': {
+            'strong, b': {
+                fontWeight: (_c = theme.tokens["".concat(variant, "_emphasis_paragraph")]) === null || _c === void 0 ? void 0 : _c.fontWeight,
+            },
+        },
+    }));
+});
+exports.textVariantMapping = {
+    type_heading_100: 'h5',
+    type_heading_200: 'h4',
+    type_heading_300: 'h3',
+    type_heading_400: 'h2',
+    type_heading_500: 'h1',
+    type_heading_600: 'h1',
+    type_heading_700: 'h1',
+    type_heading_800: 'h1',
+    type_heading_900: 'h1',
+    type_heading_1000: 'h1',
+    type_preset_page_title: 'h1',
+    type_preset_page_title_compact: 'h1',
+    type_preset_section_title: 'h2',
+    type_preset_section_subtitle: 'h3',
+    type_preset_button: 'span',
+    type_preset_form_label: 'span',
+    type_preset_form_text: 'span',
+    type_preset_caption: 'p',
+    type_preset_caption_emphasis: 'p',
+    type_preset_menu_item: 'span',
+    type_preset_overline: 'span',
+};
+var getComponentForVariant = function (_a) {
+    var variant = _a.variant;
+    if (!variant) {
+        return undefined;
+    }
+    if (variant.includes('type_body')) {
+        return 'p';
+    }
+    if (variant.includes('type_code')) {
+        return 'span';
+    }
+    return exports.textVariantMapping[variant];
+};
+exports.Text = React.forwardRef(function (props, ref) {
+    var variant = props.variant, propClasses = props.classes, propComponent = props.component, className = props.className, rootProps = __rest(props, ["variant", "classes", "component", "className"]);
+    var classes = useUtilityClasses(variant, propClasses);
+    var component = propComponent || getComponentForVariant({ variant: variant });
+    return (React.createElement(Root, __assign({ ref: ref, variant: variant, className: (0, clsx_1.default)([classes.root, className]) }, { component: component }, rootProps)));
+});

package/theme/tokens.d.ts

@@ -1,17 +1,4 @@
 import { okta, auth0 } from '@auth0/quantum-tokens';
-type GlobalTokenPatten = `${string}_global_${string}`;
-type ColorTokenPattern = `color_${string}`;
-type TypeTokenPattern = `type_${string}`;
+export type { GlobalThemeTokenName, GlobalThemeTokens, ThemeColorBGTokenName, ThemeColorBGTokens, ThemeColorBorderTokenName, ThemeColorBorderTokens, ThemeColorFGTokenName, ThemeColorFGTokens, ThemeTypeTokenName, ThemeTypeTokens, ThemeColorTokenName, ThemeColorTokens, ThemeSizeTokenName, ThemeSizeTokens, SemanticThemeTokenName, SemanticThemeTokens, } from '@auth0/quantum-tokens';
 export type ThemeTokens = typeof okta.light | typeof auth0.light;
 export type ThemeTokenName = keyof ThemeTokens;
-type FilterGlobalTokens<TokenKey extends string> = TokenKey extends GlobalTokenPatten ? never : TokenKey;
-type PickTokenType<Pattern extends string, TokenKey extends string> = TokenKey extends Pattern ? TokenKey : never;
-export type GlobalThemeTokenName = PickTokenType<GlobalTokenPatten, ThemeTokenName>;
-export type GlobalThemeTokens = Pick<ThemeTokens, GlobalThemeTokenName>;
-export type SemanticThemeTokenName = FilterGlobalTokens<ThemeTokenName>;
-export type SemanticThemeTokens = Pick<ThemeTokens, SemanticThemeTokenName>;
-export type ThemeColorTokenName = FilterGlobalTokens<PickTokenType<ColorTokenPattern, ThemeTokenName>>;
-export type ThemeColorTokens = Pick<ThemeTokens, ThemeColorTokenName>;
-export type ThemeTypeTokenName = FilterGlobalTokens<PickTokenType<TypeTokenPattern, ThemeTokenName>>;
-export type ThemeTypeTokens = Pick<ThemeTokens, ThemeTypeTokenName>;
-export {};