@auth0/quantum-product 2.1.5 → 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/icon/index.js

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { styled } from '../styled';
-import { Activity, Airplane, Airplay, AlertCircle, AlertDiamondFilled, AlertDiamond, AlertOctagon, AlertTriangleFilled, AlertTriangle, AlignCenter, AlignJustify, AlignLeft, AlignRight, Anchor, Aperture, Apis, ApplicationPlus, Apps, Archive, ArrowDownCircle, ArrowDownLeft, ArrowDownRight, ArrowDown, ArrowLeftCircle, ArrowLeft, ArrowRightCircle, ArrowRight, ArrowUnsorted, ArrowUpCircle, ArrowUpLeft, ArrowUpRight, ArrowUp, ArrowsH, AtSign, Auth0Logo, Award, BarChart2, BarChart, BatteryCharging, Battery, BellOff, Bell, Biometrics, Bluetooth, Bold, BookOpen, Book, Bookmark, BorderPill, BorderRound, BorderSharp, Borders, Bot, Box, BreachedPassword, Briefcase, Browser, Bug, Building, Calendar, CameraOff, Camera, Card, CaretDown, Cash, Cast, CheckCircleFilled, CheckCircle, CheckSquare, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsDown, ChevronsLeft, ChevronsRight, ChevronsUp, Chrome, Circle, ClipboardCheck, Clipboard, Clock, CloudDrizzle, CloudLightning, CloudOff, CloudRain, CloudSnow, Cloud, CodeSandbox, Code, Codepen, Coffee, CollapseLeft, CollapseRight, Color, Columns, Command, Compass, Copy, CornerDownLeft, CornerDownRight, CornerLeftDown, CornerLeftUp, CornerRightDown, CornerRightUp, CornerUpLeft, CornerUpRight, Cpu, CreditCard, Crop, Crosshair, Database, Delete, Devices, Directory, Disc, DivideCircle, DivideSquare, Divide, DollarSign, DownloadCloud, Download, DragIndicator, Droplet, Edit, Enterprise, ExpandLeft, ExpandRight, ExternalLink, EyeOff, Eye, FastForward, Feather, Figma, FileMinus, FilePlus, FileText, File, Film, Filter, Flag, Flow, FolderCancel, FolderMinus, FolderPlus, Folder, Font, Fonts2, Framer, Frown, Gift, GitBranch, GitCommit, GitMerge, GitPullRequest, Github, Gitlab, Globe, Grid, HardDrive, Hash, Headphones, Heart, HelpCircle, Help, Hexagon, Home, Hooks, HostedPages, IdTag, Image, Inbox, InfoFilled, Info, Integration, Issuer, Italic, Key, Layers, LayoutBottom, LayoutCenter, LayoutLeft, LayoutRight, LayoutTop, Layout, LifeBuoy, Link2, Link, List, Loader, Lock, LogIn, LogOut, Mail, MapPin, Map, Maximize2, Maximize, Megaphone, Meh, Menu, MessageCircle, MessageSquare, MicOff, Mic, Minimize2, Minimize, MinusCircle, MinusSquare, Minus, Monitor, Moon, MoreHorizontal, MoreVertical, MousePointer, Move, Music, Navigation2, Navigation, Octagon, Package, PageBackground, PaintBrush, Paint, Paperclip, PauseCircle, Pause, PenTool, Percent, PhoneCall, PhoneForwarded, PhoneIncoming, PhoneMissed, PhoneOff, PhoneOutgoing, Phone, PieChart, PlayCircle, Play, PlusCircle, PlusSquare, Plus, Power, Printer, Radio, RecoveryCode, RefreshCcw, RefreshCw, Repeat, Rewind, RichText, RotateCcw, RotateCw, Rss, Save, Scissors, Search, Send, Server, Settings, Share2, Share, ShieldOff, Shield, ShoppingBag, ShoppingCart, Shuffle, Sidebar, SingleSignOn, SkipBack, SkipForward, Slash, Sliders, Smartphone, Smile, Sparkle, Speaker, Square, Star, StopCircle, Store2, Store, Sun, Sunrise, Sunset, Table, Tablet, Tag, Target, Terminal, Thermometer, ThumbsDown, ThumbsUp, ToggleLeft, ToggleRight, Tool, Trash, TrendingDown, TrendingUp, Triangle, Truck, Tv, Type, Umbrella, Underline, Unlock, UploadCloud, Upload, UserCheck, UserMinus, UserPlus, UserX, User, Users, VideoOff, Video, Voicemail, Volume1, Volume2, VolumeX, Volume, Watch, WebAuthnPlatform, WebAuthn, Widget2, Widget, WifiOff, Wifi, Wind, XCircleFilled, XCircle, XOctagon, XSquare, X, ZapOff, Zap, ZoomIn, ZoomOut, } from '@auth0/quantum-icons';
+import { Activity, Airplane, Airplay, AlertCircle, AlertDiamondFilled, AlertDiamond, AlertOctagon, AlertTriangleFilled, AlertTriangle, AlignCenter, AlignJustify, AlignLeft, AlignRight, Anchor, Aperture, Apis, ApplicationPlus, Apps, Archive, ArrowDownCircle, ArrowDownLeft, ArrowDownRight, ArrowDown, ArrowLeftCircle, ArrowLeft, ArrowRightCircle, ArrowRight, ArrowUnsorted, ArrowUpCircle, ArrowUpLeft, ArrowUpRight, ArrowUp, ArrowsH, AtSign, Auth0Logo, Award, BarChart2, BarChart, BatteryCharging, Battery, BellOff, Bell, Biometrics, Bluetooth, Bold, BookOpen, Book, Bookmark, BorderPill, BorderRound, BorderSharp, Borders, Bot, Box, BreachedPassword, Briefcase, Browser, Bug, Building, Calendar, CameraOff, Camera, Card, CaretDown, Cash, Cast, CheckCircleFilled, CheckCircle, CheckSquare, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsDown, ChevronsLeft, ChevronsRight, ChevronsUp, Chrome, Circle, ClipboardCheck, Clipboard, Clock, CloudDrizzle, CloudLightning, CloudOff, CloudRain, CloudSnow, Cloud, CodeSandbox, Code, Codepen, Coffee, CollapseLeft, CollapseRight, Color, Columns, Command, Compass, Copy, CornerDownLeft, CornerDownRight, CornerLeftDown, CornerLeftUp, CornerRightDown, CornerRightUp, CornerUpLeft, CornerUpRight, Cpu, CreditCard, Crop, Crosshair, Database, Delete, Devices, Directory, Disc, DivideCircle, DivideSquare, Divide, DollarSign, DownloadCloud, Download, DragIndicator, Droplet, Edit, Enterprise, ExpandLeft, ExpandRight, ExternalLink, EyeOff, Eye, FastForward, Feather, Figma, FileMinus, FilePlus, FileText, File, Film, Filter, Flag, Flow, FolderCancel, FolderMinus, FolderPlus, Folder, Font, Fonts2, Framer, Frown, Gift, GitBranch, GitCommit, GitMerge, GitPullRequest, Github, Gitlab, Globe, Grid, HardDrive, Hash, Headphones, Heart, HelpCircle, Help, Hexagon, Home, Hooks, HostedPages, IdTag, Image, Inbox, InfoFilled, Info, Integration, Issuer, Italic, Key, Layers, LayoutBottom, LayoutCenter, LayoutLeft, LayoutRight, LayoutTop, Layout, LifeBuoy, Link2, Link, List, ListNumbered, Loader, Lock, LogIn, LogOut, Mail, MapPin, Map, Maximize2, Maximize, Megaphone, Meh, Menu, MessageCircle, MessageSquare, MicOff, Mic, Minimize2, Minimize, MinusCircle, MinusSquare, Minus, Monitor, Moon, MoreHorizontal, MoreVertical, MousePointer, Move, Music, Navigation2, Navigation, Octagon, Package, PageBackground, PaintBrush, Paint, Paperclip, PauseCircle, Pause, PenTool, Percent, PhoneCall, PhoneForwarded, PhoneIncoming, PhoneMissed, PhoneOff, PhoneOutgoing, Phone, PieChart, PlayCircle, Play, PlusCircle, PlusSquare, Plus, Power, Printer, Radio, RecoveryCode, RefreshCcw, RefreshCw, Repeat, Rewind, RichText, RotateCcw, RotateCw, Rss, Save, Scissors, Search, Send, Server, Settings, Share2, Share, ShieldOff, Shield, ShoppingBag, ShoppingCart, Shuffle, Sidebar, SingleSignOn, SkipBack, SkipForward, Slash, Sliders, Smartphone, Smile, Sparkle, Speaker, Square, Star, StopCircle, Store2, Store, Sun, Sunrise, Sunset, Table, Tablet, Tag, Target, Terminal, Thermometer, ThumbsDown, ThumbsUp, ToggleLeft, ToggleRight, Tool, Trash, TrendingDown, TrendingUp, Triangle, Truck, Tv, Type, Umbrella, Underline, Unlock, UploadCloud, Upload, UserCheck, UserMinus, UserPlus, UserX, User, Users, VideoOff, Video, Voicemail, Volume1, Volume2, VolumeX, Volume, Watch, WebAuthnPlatform, WebAuthn, Widget2, Widget, WifiOff, Wifi, Wind, XCircleFilled, XCircle, XOctagon, XSquare, X, XLarge, ZapOff, Zap, ZoomIn, ZoomOut, } from '@auth0/quantum-icons';
 import * as React from 'react';
 export * from './types';
 function wrapIcon(QuantumIcon) {
@@ -227,6 +227,7 @@ export var LifeBuoyIcon = wrapIcon(LifeBuoy);
 export var Link2Icon = wrapIcon(Link2);
 export var LinkIcon = wrapIcon(Link);
 export var ListIcon = wrapIcon(List);
+export var ListNumberedIcon = wrapIcon(ListNumbered);
 export var LoaderIcon = wrapIcon(Loader);
 export var LockIcon = wrapIcon(Lock);
 export var LogInIcon = wrapIcon(LogIn);
@@ -376,6 +377,7 @@ export var XCircleIcon = wrapIcon(XCircle);
 export var XOctagonIcon = wrapIcon(XOctagon);
 export var XSquareIcon = wrapIcon(XSquare);
 export var XIcon = wrapIcon(X);
+export var XLargeIcon = wrapIcon(XLarge);
 export var ZapOffIcon = wrapIcon(ZapOff);
 export var ZapIcon = wrapIcon(Zap);
 export var ZoomInIcon = wrapIcon(ZoomIn);

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/icon/index.d.ts

@@ -212,6 +212,7 @@ export declare const LifeBuoyIcon: React.ForwardRefExoticComponent<Omit<IIconPro
 export declare const Link2Icon: React.ForwardRefExoticComponent<Omit<IIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export declare const LinkIcon: React.ForwardRefExoticComponent<Omit<IIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export declare const ListIcon: React.ForwardRefExoticComponent<Omit<IIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export declare const ListNumberedIcon: React.ForwardRefExoticComponent<Omit<IIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export declare const LoaderIcon: React.ForwardRefExoticComponent<Omit<IIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export declare const LockIcon: React.ForwardRefExoticComponent<Omit<IIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export declare const LogInIcon: React.ForwardRefExoticComponent<Omit<IIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
@@ -361,6 +362,7 @@ export declare const XCircleIcon: React.ForwardRefExoticComponent<Omit<IIconProp
 export declare const XOctagonIcon: React.ForwardRefExoticComponent<Omit<IIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export declare const XSquareIcon: React.ForwardRefExoticComponent<Omit<IIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export declare const XIcon: React.ForwardRefExoticComponent<Omit<IIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export declare const XLargeIcon: React.ForwardRefExoticComponent<Omit<IIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export declare const ZapOffIcon: React.ForwardRefExoticComponent<Omit<IIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export declare const ZapIcon: React.ForwardRefExoticComponent<Omit<IIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export declare const ZoomInIcon: React.ForwardRefExoticComponent<Omit<IIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;

package/icon/index.js

@@ -40,10 +40,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BorderRoundIcon = exports.BorderPillIcon = exports.BookmarkIcon = exports.BookIcon = exports.BookOpenIcon = exports.BoldIcon = exports.BluetoothIcon = exports.BiometricsIcon = exports.BellIcon = exports.BellOffIcon = exports.BatteryIcon = exports.BatteryChargingIcon = exports.BarChartIcon = exports.BarChart2Icon = exports.AwardIcon = exports.Auth0LogoIcon = exports.AtSignIcon = exports.ArrowsHIcon = exports.ArrowUpIcon = exports.ArrowUpRightIcon = exports.ArrowUpLeftIcon = exports.ArrowUpCircleIcon = exports.ArrowUnsortedIcon = exports.ArrowRightIcon = exports.ArrowRightCircleIcon = exports.ArrowLeftIcon = exports.ArrowLeftCircleIcon = exports.ArrowDownIcon = exports.ArrowDownRightIcon = exports.ArrowDownLeftIcon = exports.ArrowDownCircleIcon = exports.ArchiveIcon = exports.AppsIcon = exports.ApplicationPlusIcon = exports.ApisIcon = exports.ApertureIcon = exports.AnchorIcon = exports.AlignRightIcon = exports.AlignLeftIcon = exports.AlignJustifyIcon = exports.AlignCenterIcon = exports.AlertTriangleIcon = exports.AlertTriangleFilledIcon = exports.AlertOctagonIcon = exports.AlertDiamondIcon = exports.AlertDiamondFilledIcon = exports.AlertCircleIcon = exports.AirplayIcon = exports.AirplaneIcon = exports.ActivityIcon = void 0;
 exports.ColumnsIcon = exports.ColorIcon = exports.CollapseRightIcon = exports.CollapseLeftIcon = exports.CoffeeIcon = exports.CodepenIcon = exports.CodeIcon = exports.CodesandboxIcon = exports.CodeSandboxIcon = exports.CloudIcon = exports.CloudSnowIcon = exports.CloudRainIcon = exports.CloudOffIcon = exports.CloudLightningIcon = exports.CloudDrizzleIcon = exports.ClockIcon = exports.ClipboardIcon = exports.ClipboardCheckIcon = exports.CircleIcon = exports.ChromeIcon = exports.ChevronsUpIcon = exports.ChevronsRightIcon = exports.ChevronsLeftIcon = exports.ChevronsDownIcon = exports.ChevronUpIcon = exports.ChevronRightIcon = exports.ChevronLeftIcon = exports.ChevronDownIcon = exports.CheckIcon = exports.CheckSquareIcon = exports.CheckCircleIcon = exports.CheckCircleFilledIcon = exports.CastIcon = exports.CashIcon = exports.CaretDownIcon = exports.CardIcon = exports.CameraIcon = exports.CameraOffIcon = exports.CalendarIcon = exports.BuildingIcon = exports.BugIcon = exports.BrowsersIcon = exports.BrowserIcon = exports.BriefcaseIcon = exports.BreachedPasswordIcon = exports.BoxIcon = exports.BotIcon = exports.BordersIcon = exports.BorderSharpIcon = exports.BorderRoundedIcon = void 0;
 exports.FolderIcon = exports.FolderPlusIcon = exports.FolderMinusIcon = exports.FolderCancelIcon = exports.FlowIcon = exports.FlagIcon = exports.FilterIcon = exports.FilmIcon = exports.FileIcon = exports.FileTextIcon = exports.FilePlusIcon = exports.FileMinusIcon = exports.FigmaIcon = exports.FeatherIcon = exports.FastForwardIcon = exports.EyeIcon = exports.EyeOffIcon = exports.ExternalLinkIcon = exports.ExpandRightIcon = exports.ExpandLeftIcon = exports.EnterpriseIcon = exports.EditIcon = exports.DropletIcon = exports.DragIndicatorIcon = exports.DownloadIcon = exports.DownloadCloudIcon = exports.DollarSignIcon = exports.DivideIcon = exports.DivideSquareIcon = exports.DivideCircleIcon = exports.DiscIcon = exports.DirectoryIcon = exports.DevicesIcon = exports.DeleteIcon = exports.DatabaseIcon = exports.CrosshairIcon = exports.CropIcon = exports.CreditCardIcon = exports.CpuIcon = exports.CornerUpRightIcon = exports.CornerUpLeftIcon = exports.CornerRightUpIcon = exports.CornerRightDownIcon = exports.CornerLeftUpIcon = exports.CornerLeftDownIcon = exports.CornerDownRightIcon = exports.CornerDownLeftIcon = exports.CopyIcon = exports.CompassIcon = exports.CommandIcon = void 0;
-exports.MapPinIcon = exports.MailIcon = exports.LogOutIcon = exports.LogInIcon = exports.LockIcon = exports.LoaderIcon = exports.ListIcon = exports.LinkIcon = exports.Link2Icon = exports.LifeBuoyIcon = exports.LayoutIcon = exports.LayoutTopIcon = exports.LayoutRightIcon = exports.LayoutLeftIcon = exports.LayoutCenterIcon = exports.LayoutBottomIcon = exports.LayersIcon = exports.KeyIcon = exports.ItalicIcon = exports.IssuerIcon = exports.IntegrationIcon = exports.InfoIcon = exports.InfoFilledIcon = exports.InboxIcon = exports.ImageIcon = exports.IdTagIcon = exports.HostedPagesIcon = exports.HooksIcon = exports.HomeIcon = exports.HexagonIcon = exports.HelpIcon = exports.HelpCircleIcon = exports.HeartIcon = exports.HeadphonesIcon = exports.HashIcon = exports.HardDriveIcon = exports.GridIcon = exports.GlobeIcon = exports.GitlabIcon = exports.GitHubIcon = exports.GithubIcon = exports.GitPullRequestIcon = exports.GitMergeIcon = exports.GitCommitIcon = exports.GitBranchIcon = exports.GiftIcon = exports.FrownIcon = exports.FramerIcon = exports.Fonts2Icon = exports.FontIcon = void 0;
-exports.RadioIcon = exports.PrinterIcon = exports.PowerIcon = exports.PlusIcon = exports.PlusSquareIcon = exports.PlusCircleIcon = exports.PlayIcon = exports.PlayCircleIcon = exports.PieChartIcon = exports.PhoneIcon = exports.PhoneOutgoingIcon = exports.PhoneOffIcon = exports.PhoneMissedIcon = exports.PhoneIncomingIcon = exports.PhoneForwardedIcon = exports.PhoneCallIcon = exports.PercentIcon = exports.PenToolIcon = exports.PauseIcon = exports.PauseCircleIcon = exports.PaperclipIcon = exports.PaintIcon = exports.PaintBrushIcon = exports.PageBackgroundIcon = exports.PackageIcon = exports.OctagonIcon = exports.NavigationIcon = exports.Navigation2Icon = exports.MusicIcon = exports.MoveIcon = exports.MousePointerIcon = exports.MoreVerticalIcon = exports.MoreHorizontalIcon = exports.MoonIcon = exports.MonitorIcon = exports.MinusIcon = exports.MinusSquareIcon = exports.MinusCircleIcon = exports.MinimizeIcon = exports.Minimize2Icon = exports.MicIcon = exports.MicOffIcon = exports.MessageSquareIcon = exports.MessageCircleIcon = exports.MenuIcon = exports.MehIcon = exports.MegaphoneIcon = exports.MaximizeIcon = exports.Maximize2Icon = exports.MapIcon = void 0;
-exports.ToggleRightIcon = exports.ToggleLeftIcon = exports.ThumbsUpIcon = exports.ThumbsDownIcon = exports.ThermometerIcon = exports.TerminalIcon = exports.TargetIcon = exports.TagIcon = exports.TabletIcon = exports.TableIcon = exports.SunsetIcon = exports.SunriseIcon = exports.SunIcon = exports.StoreIcon = exports.Store2Icon = exports.StopCircleIcon = exports.StarIcon = exports.SquareIcon = exports.SpeakerIcon = exports.SparkleIcon = exports.SmileIcon = exports.SmartphoneIcon = exports.SlidersIcon = exports.SlashIcon = exports.SkipForwardIcon = exports.SkipBackIcon = exports.SingleSignOnIcon = exports.SidebarIcon = exports.ShuffleIcon = exports.ShoppingCartIcon = exports.ShoppingBagIcon = exports.ShieldIcon = exports.ShieldOffIcon = exports.ShareIcon = exports.Share2Icon = exports.SettingsIcon = exports.ServerIcon = exports.SendIcon = exports.SearchIcon = exports.ScissorsIcon = exports.SaveIcon = exports.RssIcon = exports.RotateCwIcon = exports.RotateCcwIcon = exports.RichTextIcon = exports.RewindIcon = exports.RepeatIcon = exports.RefreshCwIcon = exports.RefreshCcwIcon = exports.RecoveryCodeIcon = void 0;
-exports.ZoomOutIcon = exports.ZoomInIcon = exports.ZapIcon = exports.ZapOffIcon = exports.XIcon = exports.XSquareIcon = exports.XOctagonIcon = exports.XCircleIcon = exports.XCircleFilledIcon = exports.WindIcon = exports.WifiIcon = exports.WifiOffIcon = exports.WidgetIcon = exports.Widget2Icon = exports.WebAuthnIcon = exports.WebAuthnPlatformIcon = exports.WatchIcon = exports.VolumeIcon = exports.VolumeXIcon = exports.Volume2Icon = exports.Volume1Icon = exports.VoicemailIcon = exports.VideoIcon = exports.VideoOffIcon = exports.UsersIcon = exports.UserIcon = exports.UserXIcon = exports.UserPlusIcon = exports.UserMinusIcon = exports.UserCheckIcon = exports.UploadIcon = exports.UploadCloudIcon = exports.UnlockIcon = exports.UnderlineIcon = exports.UmbrellaIcon = exports.TypeIcon = exports.TvIcon = exports.TruckIcon = exports.TriangleIcon = exports.TrendingUpIcon = exports.TrendingDownIcon = exports.TrashIcon = exports.ToolIcon = void 0;
+exports.MailIcon = exports.LogOutIcon = exports.LogInIcon = exports.LockIcon = exports.LoaderIcon = exports.ListNumberedIcon = exports.ListIcon = exports.LinkIcon = exports.Link2Icon = exports.LifeBuoyIcon = exports.LayoutIcon = exports.LayoutTopIcon = exports.LayoutRightIcon = exports.LayoutLeftIcon = exports.LayoutCenterIcon = exports.LayoutBottomIcon = exports.LayersIcon = exports.KeyIcon = exports.ItalicIcon = exports.IssuerIcon = exports.IntegrationIcon = exports.InfoIcon = exports.InfoFilledIcon = exports.InboxIcon = exports.ImageIcon = exports.IdTagIcon = exports.HostedPagesIcon = exports.HooksIcon = exports.HomeIcon = exports.HexagonIcon = exports.HelpIcon = exports.HelpCircleIcon = exports.HeartIcon = exports.HeadphonesIcon = exports.HashIcon = exports.HardDriveIcon = exports.GridIcon = exports.GlobeIcon = exports.GitlabIcon = exports.GitHubIcon = exports.GithubIcon = exports.GitPullRequestIcon = exports.GitMergeIcon = exports.GitCommitIcon = exports.GitBranchIcon = exports.GiftIcon = exports.FrownIcon = exports.FramerIcon = exports.Fonts2Icon = exports.FontIcon = void 0;
+exports.PrinterIcon = exports.PowerIcon = exports.PlusIcon = exports.PlusSquareIcon = exports.PlusCircleIcon = exports.PlayIcon = exports.PlayCircleIcon = exports.PieChartIcon = exports.PhoneIcon = exports.PhoneOutgoingIcon = exports.PhoneOffIcon = exports.PhoneMissedIcon = exports.PhoneIncomingIcon = exports.PhoneForwardedIcon = exports.PhoneCallIcon = exports.PercentIcon = exports.PenToolIcon = exports.PauseIcon = exports.PauseCircleIcon = exports.PaperclipIcon = exports.PaintIcon = exports.PaintBrushIcon = exports.PageBackgroundIcon = exports.PackageIcon = exports.OctagonIcon = exports.NavigationIcon = exports.Navigation2Icon = exports.MusicIcon = exports.MoveIcon = exports.MousePointerIcon = exports.MoreVerticalIcon = exports.MoreHorizontalIcon = exports.MoonIcon = exports.MonitorIcon = exports.MinusIcon = exports.MinusSquareIcon = exports.MinusCircleIcon = exports.MinimizeIcon = exports.Minimize2Icon = exports.MicIcon = exports.MicOffIcon = exports.MessageSquareIcon = exports.MessageCircleIcon = exports.MenuIcon = exports.MehIcon = exports.MegaphoneIcon = exports.MaximizeIcon = exports.Maximize2Icon = exports.MapIcon = exports.MapPinIcon = void 0;
+exports.ToggleLeftIcon = exports.ThumbsUpIcon = exports.ThumbsDownIcon = exports.ThermometerIcon = exports.TerminalIcon = exports.TargetIcon = exports.TagIcon = exports.TabletIcon = exports.TableIcon = exports.SunsetIcon = exports.SunriseIcon = exports.SunIcon = exports.StoreIcon = exports.Store2Icon = exports.StopCircleIcon = exports.StarIcon = exports.SquareIcon = exports.SpeakerIcon = exports.SparkleIcon = exports.SmileIcon = exports.SmartphoneIcon = exports.SlidersIcon = exports.SlashIcon = exports.SkipForwardIcon = exports.SkipBackIcon = exports.SingleSignOnIcon = exports.SidebarIcon = exports.ShuffleIcon = exports.ShoppingCartIcon = exports.ShoppingBagIcon = exports.ShieldIcon = exports.ShieldOffIcon = exports.ShareIcon = exports.Share2Icon = exports.SettingsIcon = exports.ServerIcon = exports.SendIcon = exports.SearchIcon = exports.ScissorsIcon = exports.SaveIcon = exports.RssIcon = exports.RotateCwIcon = exports.RotateCcwIcon = exports.RichTextIcon = exports.RewindIcon = exports.RepeatIcon = exports.RefreshCwIcon = exports.RefreshCcwIcon = exports.RecoveryCodeIcon = exports.RadioIcon = void 0;
+exports.ZoomOutIcon = exports.ZoomInIcon = exports.ZapIcon = exports.ZapOffIcon = exports.XLargeIcon = exports.XIcon = exports.XSquareIcon = exports.XOctagonIcon = exports.XCircleIcon = exports.XCircleFilledIcon = exports.WindIcon = exports.WifiIcon = exports.WifiOffIcon = exports.WidgetIcon = exports.Widget2Icon = exports.WebAuthnIcon = exports.WebAuthnPlatformIcon = exports.WatchIcon = exports.VolumeIcon = exports.VolumeXIcon = exports.Volume2Icon = exports.Volume1Icon = exports.VoicemailIcon = exports.VideoIcon = exports.VideoOffIcon = exports.UsersIcon = exports.UserIcon = exports.UserXIcon = exports.UserPlusIcon = exports.UserMinusIcon = exports.UserCheckIcon = exports.UploadIcon = exports.UploadCloudIcon = exports.UnlockIcon = exports.UnderlineIcon = exports.UmbrellaIcon = exports.TypeIcon = exports.TvIcon = exports.TruckIcon = exports.TriangleIcon = exports.TrendingUpIcon = exports.TrendingDownIcon = exports.TrashIcon = exports.ToolIcon = exports.ToggleRightIcon = void 0;
 var styled_1 = require("../styled");
 var quantum_icons_1 = require("@auth0/quantum-icons");
 var React = __importStar(require("react"));
@@ -262,6 +262,7 @@ exports.LifeBuoyIcon = wrapIcon(quantum_icons_1.LifeBuoy);
 exports.Link2Icon = wrapIcon(quantum_icons_1.Link2);
 exports.LinkIcon = wrapIcon(quantum_icons_1.Link);
 exports.ListIcon = wrapIcon(quantum_icons_1.List);
+exports.ListNumberedIcon = wrapIcon(quantum_icons_1.ListNumbered);
 exports.LoaderIcon = wrapIcon(quantum_icons_1.Loader);
 exports.LockIcon = wrapIcon(quantum_icons_1.Lock);
 exports.LogInIcon = wrapIcon(quantum_icons_1.LogIn);
@@ -411,6 +412,7 @@ exports.XCircleIcon = wrapIcon(quantum_icons_1.XCircle);
 exports.XOctagonIcon = wrapIcon(quantum_icons_1.XOctagon);
 exports.XSquareIcon = wrapIcon(quantum_icons_1.XSquare);
 exports.XIcon = wrapIcon(quantum_icons_1.X);
+exports.XLargeIcon = wrapIcon(quantum_icons_1.XLarge);
 exports.ZapOffIcon = wrapIcon(quantum_icons_1.ZapOff);
 exports.ZapIcon = wrapIcon(quantum_icons_1.Zap);
 exports.ZoomInIcon = wrapIcon(quantum_icons_1.ZoomIn);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auth0/quantum-product",
-  "version": "2.1.5",
+  "version": "2.3.0",
   "sideEffects": false,
   "license": "Apache-2.0",
   "publishConfig": {
@@ -11,8 +11,8 @@
   "main": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {
-    "@auth0/quantum-icons": "^1.0.0",
-    "@auth0/quantum-tokens": "^1.2.0",
+    "@auth0/quantum-icons": "^1.1.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 {};