@livetiles/reach-plugin-types 0.5.0-preview.941 → 0.5.0-preview.943

package/lib/index.d.ts

@@ -3042,8 +3042,381 @@ declare module "libs/reach/util/common/src/theme/ColorGenerator" {
         trim: (value: string) => string;
     }
 }
+declare module "libs/reach/util/common/src/theme/theme2/colors" {
+    export const backgroundColors: {
+        avatarPrimary: "#EBE9E8";
+        inverted: "#0F0E0E";
+        interaction: {
+            disabled: "#EBE9E8";
+            hover: "#EBE9E8";
+            pressed: "#D7D2D1";
+            primary: "#FFFFFF";
+        };
+        primary: "#EBE9E8";
+        secondary: "#FFFFFF";
+        tertiary: "#F5F4F3";
+    };
+    export const feedbackColors: {
+        error: {
+            background: "#BF2B30";
+            foreground: "#FCE5E3";
+        };
+        info: {
+            background: "#0F6EA9";
+            foreground: "#E2EDF6";
+        };
+        success: {
+            background: "#287B44";
+            foreground: "#ECF3EE";
+        };
+        warning: {
+            background: "#E2BC30";
+            foreground: "#7C671A";
+        };
+    };
+    export const foregroundColors: {
+        avatar: "#F5F4F3";
+        button: "#0F0E0E";
+        buttonDisabled: "#C2BCB9";
+        disabled: "#C2BCB9";
+        icon: "#0F0E0E";
+        iconDisabled: "#C2BCB9";
+        iconInverted: "#FFFFFF";
+        inverted: "#FFFFFF";
+        primary: "#0F0E0E";
+        secondary: "#3E3938";
+        tertiary: "#5C5653";
+    };
+    export const strokeColors: {
+        avatar: "#FFFFFF";
+        border: {
+            disabled: "#C2BCB9";
+            focus: "#0F0E0E";
+            primary: "#0F0E0E";
+        };
+        divider: {
+            disabled: "#C2BCB9";
+            primary: "#5C5653";
+            secondary: "#D7D2D1";
+            tabs: "#0F0E0E";
+            tertiary: "#EBE9E8";
+        };
+        input: {
+            default: "#C2BCB9";
+            error: "#BF2B30";
+        };
+        selection: {
+            hover: "#AEA5A2";
+            pressed: "#9A8F8B";
+        };
+    };
+    export const themeColors: {
+        disabled: "#FFE4DC";
+        hover: "#FF7A50";
+        interactionSelected: "#FFE4DC";
+        inverted: {
+            hover: "#FFE4DC";
+            pressed: "#FFCAB9";
+            active: "#FFAF96";
+        };
+        pressed: "#CC6240";
+        primary: "#FF9573";
+    };
+}
+declare module "libs/reach/util/common/src/theme/theme2/shadows" {
+    const shadows: {
+        drag: {
+            boxShadow: string;
+        };
+        focusButton: {
+            boxShadow: string;
+        };
+        hardFloat: {
+            boxShadow: string;
+        };
+        sharp: {
+            boxShadow: string;
+        };
+        sharpFloat: {
+            boxShadow: string;
+        };
+        softFloat: {
+            boxShadow: string;
+        };
+    };
+    export default shadows;
+}
+declare module "libs/reach/util/common/src/theme/theme2/spacing" {
+    const spacing: {
+        readonly 4: 4;
+        readonly 8: 8;
+        readonly 12: 12;
+        readonly 16: 16;
+        readonly 20: 20;
+        readonly 24: 24;
+        readonly 32: 32;
+        readonly 40: 40;
+        readonly 48: 48;
+        readonly 56: 56;
+        readonly 68: 68;
+        readonly 80: 80;
+    };
+    export default spacing;
+}
+declare module "libs/reach/util/common/src/theme/theme2/typography" {
+    const typography: {
+        readonly body1: {
+            readonly fontFamily: "Mulish, Arial, sans-serif !important";
+            readonly fontSize: "16px";
+            readonly lineHeight: "26px";
+        };
+        readonly body2: {
+            readonly fontFamily: "Mulish, Arial, sans-serif !important";
+            readonly fontSize: "14px";
+            readonly lineHeight: "23px";
+        };
+        readonly buttonLabel1: {
+            readonly fontFamily: "Mulish, Arial, sans-serif !important";
+            readonly fontSize: "16px";
+            readonly lineHeight: "16px";
+        };
+        readonly buttonLabel2: {
+            readonly fontFamily: "Mulish, Arial, sans-serif !important";
+            readonly fontSize: "14px";
+            readonly lineHeight: "14px";
+        };
+        readonly caption: {
+            readonly fontFamily: "Mulish, Arial, sans-serif !important";
+            readonly fontSize: "12px";
+            readonly letterSpacing: "0.18px";
+            readonly lineHeight: "14px";
+        };
+        readonly h1: {
+            readonly fontFamily: "Anybody, Arial, sans-serif !important";
+            readonly fontSize: "32px";
+            readonly fontWeight: 700;
+            readonly lineHeight: "38px";
+        };
+        readonly h2: {
+            readonly fontFamily: "Anybody, Arial, sans-serif !important";
+            readonly fontSize: "28px";
+            readonly fontWeight: 700;
+            readonly lineHeight: "34px";
+        };
+        readonly h3: {
+            readonly fontFamily: "Anybody, Arial, sans-serif !important";
+            readonly fontSize: "24px";
+            readonly fontWeight: 700;
+            readonly lineHeight: "29px";
+        };
+        readonly h4: {
+            readonly fontFamily: "Anybody, Arial, sans-serif !important";
+            readonly fontSize: "20px";
+            readonly fontWeight: 700;
+            readonly lineHeight: "24px";
+        };
+        readonly subtitle1: {
+            readonly fontFamily: "Mulish, Arial, sans-serif !important";
+            readonly fontSize: "20px";
+            readonly fontWeight: 700;
+            readonly lineHeight: "24px";
+        };
+        readonly subtitle2: {
+            readonly fontFamily: "Mulish, Arial, sans-serif !important";
+            readonly fontSize: "16px";
+            readonly fontWeight: 700;
+            readonly lineHeight: "19px";
+        };
+    };
+    export default typography;
+}
+declare module "libs/reach/util/common/src/theme/theme2/index" {
+    export const reach2Theme: {
+        colors: {
+            background: {
+                avatarPrimary: "#EBE9E8";
+                inverted: "#0F0E0E";
+                interaction: {
+                    disabled: "#EBE9E8";
+                    hover: "#EBE9E8";
+                    pressed: "#D7D2D1";
+                    primary: "#FFFFFF";
+                };
+                primary: "#EBE9E8";
+                secondary: "#FFFFFF";
+                tertiary: "#F5F4F3";
+            };
+            feedback: {
+                error: {
+                    background: "#BF2B30";
+                    foreground: "#FCE5E3";
+                };
+                info: {
+                    background: "#0F6EA9";
+                    foreground: "#E2EDF6";
+                };
+                success: {
+                    background: "#287B44";
+                    foreground: "#ECF3EE";
+                };
+                warning: {
+                    background: "#E2BC30";
+                    foreground: "#7C671A";
+                };
+            };
+            foreground: {
+                avatar: "#F5F4F3";
+                button: "#0F0E0E";
+                buttonDisabled: "#C2BCB9";
+                disabled: "#C2BCB9";
+                icon: "#0F0E0E";
+                iconDisabled: "#C2BCB9";
+                iconInverted: "#FFFFFF";
+                inverted: "#FFFFFF";
+                primary: "#0F0E0E";
+                secondary: "#3E3938";
+                tertiary: "#5C5653";
+            };
+            stroke: {
+                avatar: "#FFFFFF";
+                border: {
+                    disabled: "#C2BCB9";
+                    focus: "#0F0E0E";
+                    primary: "#0F0E0E";
+                };
+                divider: {
+                    disabled: "#C2BCB9";
+                    primary: "#5C5653";
+                    secondary: "#D7D2D1";
+                    tabs: "#0F0E0E";
+                    tertiary: "#EBE9E8";
+                };
+                input: {
+                    default: "#C2BCB9";
+                    error: "#BF2B30";
+                };
+                selection: {
+                    hover: "#AEA5A2";
+                    pressed: "#9A8F8B";
+                };
+            };
+            theme: {
+                disabled: "#FFE4DC";
+                hover: "#FF7A50";
+                interactionSelected: "#FFE4DC";
+                inverted: {
+                    hover: "#FFE4DC";
+                    pressed: "#FFCAB9";
+                    active: "#FFAF96";
+                };
+                pressed: "#CC6240";
+                primary: "#FF9573";
+            };
+        };
+        shadows: {
+            drag: {
+                boxShadow: string;
+            };
+            focusButton: {
+                boxShadow: string;
+            };
+            hardFloat: {
+                boxShadow: string;
+            };
+            sharp: {
+                boxShadow: string;
+            };
+            sharpFloat: {
+                boxShadow: string;
+            };
+            softFloat: {
+                boxShadow: string;
+            };
+        };
+        spacing: {
+            readonly 4: 4;
+            readonly 8: 8;
+            readonly 12: 12;
+            readonly 16: 16;
+            readonly 20: 20;
+            readonly 24: 24;
+            readonly 32: 32;
+            readonly 40: 40;
+            readonly 48: 48;
+            readonly 56: 56;
+            readonly 68: 68;
+            readonly 80: 80;
+        };
+        typography: {
+            readonly body1: {
+                readonly fontFamily: "Mulish, Arial, sans-serif !important";
+                readonly fontSize: "16px";
+                readonly lineHeight: "26px";
+            };
+            readonly body2: {
+                readonly fontFamily: "Mulish, Arial, sans-serif !important";
+                readonly fontSize: "14px";
+                readonly lineHeight: "23px";
+            };
+            readonly buttonLabel1: {
+                readonly fontFamily: "Mulish, Arial, sans-serif !important";
+                readonly fontSize: "16px";
+                readonly lineHeight: "16px";
+            };
+            readonly buttonLabel2: {
+                readonly fontFamily: "Mulish, Arial, sans-serif !important";
+                readonly fontSize: "14px";
+                readonly lineHeight: "14px";
+            };
+            readonly caption: {
+                readonly fontFamily: "Mulish, Arial, sans-serif !important";
+                readonly fontSize: "12px";
+                readonly letterSpacing: "0.18px";
+                readonly lineHeight: "14px";
+            };
+            readonly h1: {
+                readonly fontFamily: "Anybody, Arial, sans-serif !important";
+                readonly fontSize: "32px";
+                readonly fontWeight: 700;
+                readonly lineHeight: "38px";
+            };
+            readonly h2: {
+                readonly fontFamily: "Anybody, Arial, sans-serif !important";
+                readonly fontSize: "28px";
+                readonly fontWeight: 700;
+                readonly lineHeight: "34px";
+            };
+            readonly h3: {
+                readonly fontFamily: "Anybody, Arial, sans-serif !important";
+                readonly fontSize: "24px";
+                readonly fontWeight: 700;
+                readonly lineHeight: "29px";
+            };
+            readonly h4: {
+                readonly fontFamily: "Anybody, Arial, sans-serif !important";
+                readonly fontSize: "20px";
+                readonly fontWeight: 700;
+                readonly lineHeight: "24px";
+            };
+            readonly subtitle1: {
+                readonly fontFamily: "Mulish, Arial, sans-serif !important";
+                readonly fontSize: "20px";
+                readonly fontWeight: 700;
+                readonly lineHeight: "24px";
+            };
+            readonly subtitle2: {
+                readonly fontFamily: "Mulish, Arial, sans-serif !important";
+                readonly fontSize: "16px";
+                readonly fontWeight: 700;
+                readonly lineHeight: "19px";
+            };
+        };
+    };
+    export type IReach2Theme = typeof reach2Theme;
+}
 declare module "libs/reach/util/common/src/theme/ThemeService" {
     import { IPartialTheme } from 'office-ui-fabric-react';
+    import { IReach2Theme } from "libs/reach/util/common/src/theme/theme2/index";
     import { Theme } from "libs/reach/util/common/src/user/Subscription";
     export const defaultThemeColors: Theme;
     export const defaultPageBackgroundColor: string;
@@ -3059,6 +3432,187 @@ declare module "libs/reach/util/common/src/theme/ThemeService" {
      * Use SubscriptionService.updateTheme() to persist a custom theme against the User's Subscription
      */
     export function applyTheme(theme: Theme, disableUiFabricThemeOverwrite: boolean): {
+        reach2Theme: {
+            colors: {
+                background: {
+                    avatarPrimary: "#EBE9E8";
+                    inverted: "#0F0E0E";
+                    interaction: {
+                        disabled: "#EBE9E8";
+                        hover: "#EBE9E8";
+                        pressed: "#D7D2D1";
+                        primary: "#FFFFFF";
+                    };
+                    primary: "#EBE9E8";
+                    secondary: "#FFFFFF";
+                    tertiary: "#F5F4F3";
+                };
+                feedback: {
+                    error: {
+                        background: "#BF2B30";
+                        foreground: "#FCE5E3";
+                    };
+                    info: {
+                        background: "#0F6EA9";
+                        foreground: "#E2EDF6";
+                    };
+                    success: {
+                        background: "#287B44";
+                        foreground: "#ECF3EE";
+                    };
+                    warning: {
+                        background: "#E2BC30";
+                        foreground: "#7C671A";
+                    };
+                };
+                foreground: {
+                    avatar: "#F5F4F3";
+                    button: "#0F0E0E";
+                    buttonDisabled: "#C2BCB9";
+                    disabled: "#C2BCB9";
+                    icon: "#0F0E0E";
+                    iconDisabled: "#C2BCB9";
+                    iconInverted: "#FFFFFF";
+                    inverted: "#FFFFFF";
+                    primary: "#0F0E0E";
+                    secondary: "#3E3938";
+                    tertiary: "#5C5653";
+                };
+                stroke: {
+                    avatar: "#FFFFFF";
+                    border: {
+                        disabled: "#C2BCB9";
+                        focus: "#0F0E0E";
+                        primary: "#0F0E0E";
+                    };
+                    divider: {
+                        disabled: "#C2BCB9";
+                        primary: "#5C5653";
+                        secondary: "#D7D2D1";
+                        tabs: "#0F0E0E";
+                        tertiary: "#EBE9E8";
+                    };
+                    input: {
+                        default: "#C2BCB9";
+                        error: "#BF2B30";
+                    };
+                    selection: {
+                        hover: "#AEA5A2";
+                        pressed: "#9A8F8B";
+                    };
+                };
+                theme: {
+                    disabled: "#FFE4DC";
+                    hover: "#FF7A50";
+                    interactionSelected: "#FFE4DC";
+                    inverted: {
+                        hover: "#FFE4DC";
+                        pressed: "#FFCAB9";
+                        active: "#FFAF96";
+                    };
+                    pressed: "#CC6240";
+                    primary: "#FF9573";
+                };
+            };
+            shadows: {
+                drag: {
+                    boxShadow: string;
+                };
+                focusButton: {
+                    boxShadow: string;
+                };
+                hardFloat: {
+                    boxShadow: string;
+                };
+                sharp: {
+                    boxShadow: string;
+                };
+                sharpFloat: {
+                    boxShadow: string;
+                };
+                softFloat: {
+                    boxShadow: string;
+                };
+            };
+            spacing: {
+                readonly 4: 4;
+                readonly 8: 8;
+                readonly 12: 12;
+                readonly 16: 16;
+                readonly 20: 20;
+                readonly 24: 24;
+                readonly 32: 32;
+                readonly 40: 40;
+                readonly 48: 48;
+                readonly 56: 56;
+                readonly 68: 68;
+                readonly 80: 80;
+            };
+            typography: {
+                readonly body1: {
+                    readonly fontFamily: "Mulish, Arial, sans-serif !important";
+                    readonly fontSize: "16px";
+                    readonly lineHeight: "26px";
+                };
+                readonly body2: {
+                    readonly fontFamily: "Mulish, Arial, sans-serif !important";
+                    readonly fontSize: "14px";
+                    readonly lineHeight: "23px";
+                };
+                readonly buttonLabel1: {
+                    readonly fontFamily: "Mulish, Arial, sans-serif !important";
+                    readonly fontSize: "16px";
+                    readonly lineHeight: "16px";
+                };
+                readonly buttonLabel2: {
+                    readonly fontFamily: "Mulish, Arial, sans-serif !important";
+                    readonly fontSize: "14px";
+                    readonly lineHeight: "14px";
+                };
+                readonly caption: {
+                    readonly fontFamily: "Mulish, Arial, sans-serif !important";
+                    readonly fontSize: "12px";
+                    readonly letterSpacing: "0.18px";
+                    readonly lineHeight: "14px";
+                };
+                readonly h1: {
+                    readonly fontFamily: "Anybody, Arial, sans-serif !important";
+                    readonly fontSize: "32px";
+                    readonly fontWeight: 700;
+                    readonly lineHeight: "38px";
+                };
+                readonly h2: {
+                    readonly fontFamily: "Anybody, Arial, sans-serif !important";
+                    readonly fontSize: "28px";
+                    readonly fontWeight: 700;
+                    readonly lineHeight: "34px";
+                };
+                readonly h3: {
+                    readonly fontFamily: "Anybody, Arial, sans-serif !important";
+                    readonly fontSize: "24px";
+                    readonly fontWeight: 700;
+                    readonly lineHeight: "29px";
+                };
+                readonly h4: {
+                    readonly fontFamily: "Anybody, Arial, sans-serif !important";
+                    readonly fontSize: "20px";
+                    readonly fontWeight: 700;
+                    readonly lineHeight: "24px";
+                };
+                readonly subtitle1: {
+                    readonly fontFamily: "Mulish, Arial, sans-serif !important";
+                    readonly fontSize: "20px";
+                    readonly fontWeight: 700;
+                    readonly lineHeight: "24px";
+                };
+                readonly subtitle2: {
+                    readonly fontFamily: "Mulish, Arial, sans-serif !important";
+                    readonly fontSize: "16px";
+                    readonly fontWeight: 700;
+                    readonly lineHeight: "19px";
+                };
+            };
+        };
         palette: {
             themeDarker: string;
             themeDark: string;
@@ -3077,11 +3631,6 @@ declare module "libs/reach/util/common/src/theme/ThemeService" {
             neutralTertiary: string;
             neutralTertiaryAlt: string;
             neutralQuaternary: string;
-            /**
-             * Theme Service applies custom themes.
-             * Accommodates overriding the custom UI Fabric default styles which
-             * are not automatically applied (e.g. ms-bgColor-themePrimary) via load-themed-styles
-             */
             neutralQuaternaryAlt: string;
             neutralLight: string;
             neutralLighter: string;
@@ -3135,7 +3684,12 @@ declare module "libs/reach/util/common/src/theme/ThemeService" {
             onSecondary: string;
         };
     };
+    /**
+     * Have IReach2Theme inside IReachTheme because styled-components only supports
+     * customizing one theme (`DefaultTheme`). This way no legacy types will break
+     */
     export type IReachTheme = IPartialTheme & {
+        reach2Theme?: IReach2Theme;
         textColors?: Partial<ITextColors>;
     };
     interface ITextColors {
@@ -3169,9 +3723,10 @@ declare module "libs/reach/util/common/src/theme/LegacyThemeContext" {
     export function useTheme(): IReachTheme;
 }
 declare module "libs/reach/util/common/src/theme/index" {
+    export * from "libs/reach/util/common/src/theme/ColorGenerator";
     export * from "libs/reach/util/common/src/theme/LegacyThemeContext";
     export * from "libs/reach/util/common/src/theme/ThemeService";
-    export * from "libs/reach/util/common/src/theme/ColorGenerator";
+    export * from "libs/reach/util/common/src/theme/theme2/index";
 }
 declare module "libs/reach/util/common/src/plugins/Plugin" {
     import { FC } from 'react';
@@ -3421,6 +3976,15 @@ declare module "libs/reach/util/common/src/skip-links/index" {
     export * from "libs/reach/util/common/src/skip-links/useAddSkipLinks";
     export * from "libs/reach/util/common/src/skip-links/skipLinksUtils";
 }
+declare module "libs/reach/util/common/src/reach-2/FocusStyles" {
+    export const FocusStyles: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
+}
+declare module "libs/reach/util/common/src/reach-2/GlobalStyles" {
+    import { FC } from 'react';
+    export const GlobalApp2Styles: FC;
+    export const BorderStyles: import("styled-components").FlattenSimpleInterpolation;
+    export const EditorScrollbarStyles: (hideWhenNotHovered?: boolean, showBackground?: boolean) => import("styled-components").FlattenSimpleInterpolation;
+}
 declare module "libs/reach/util/common/src/reach-2/useNewExperienceStorage" {
     export function useNewUserExperienceStorage(): {
         getUseNewUserExperience: () => Promise<boolean>;
@@ -3445,16 +4009,6 @@ declare module "libs/reach/util/common/src/reach-2/NewUserExperienceContext" {
     }>;
     export const NewUserExperienceContextProvider: FC;
 }
-declare module "libs/reach/util/common/src/reach-2/GlobalStyles" {
-    import { FC } from 'react';
-    export const GlobalApp2Styles: FC;
-    export const BorderStyles: import("styled-components").FlattenSimpleInterpolation;
-    export const EditorScrollbarStyles: (hideWhenNotHovered?: boolean, showBackground?: boolean) => import("styled-components").FlattenSimpleInterpolation;
-}
-declare module "libs/reach/util/common/src/reach-2/usePageScrollDirectionForTogglingControls" {
-    export function usePageScrollDirectionForTogglingControls(disableOnLargeScreen?: boolean, maximumAllowedScreenWidth?: number, upThreshold?: number, downThreshold?: number): boolean;
-    export function useDirectionAwarePageScrollListener(onScrollDown: () => void, onScrollUp: () => void, shouldDisable?: (containerWidth: number) => boolean, upThreshold?: number, downThreshold?: number): void;
-}
 declare module "libs/reach/util/common/src/reach-2/resources/languages/da.async" {
     import '@formatjs/intl-pluralrules/dist/locale-data/da';
     import '@formatjs/intl-relativetimeformat/dist/locale-data/da';
@@ -3539,17 +4093,18 @@ declare module "libs/reach/util/common/src/reach-2/ThemeContext" {
         children: ReactNode;
     }>;
 }
-declare module "libs/reach/util/common/src/reach-2/FocusStyles" {
-    export const FocusStyles: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
+declare module "libs/reach/util/common/src/reach-2/usePageScrollDirectionForTogglingControls" {
+    export function usePageScrollDirectionForTogglingControls(disableOnLargeScreen?: boolean, maximumAllowedScreenWidth?: number, upThreshold?: number, downThreshold?: number): boolean;
+    export function useDirectionAwarePageScrollListener(onScrollDown: () => void, onScrollUp: () => void, shouldDisable?: (containerWidth: number) => boolean, upThreshold?: number, downThreshold?: number): void;
 }
 declare module "libs/reach/util/common/src/reach-2/index" {
-    export * from "libs/reach/util/common/src/reach-2/NewUserExperienceContext";
-    export * from "libs/reach/util/common/src/reach-2/useNewExperienceStorage";
+    export * from "libs/reach/util/common/src/reach-2/FocusStyles";
     export * from "libs/reach/util/common/src/reach-2/GlobalStyles";
-    export * from "libs/reach/util/common/src/reach-2/usePageScrollDirectionForTogglingControls";
+    export * from "libs/reach/util/common/src/reach-2/NewUserExperienceContext";
     export * from "libs/reach/util/common/src/reach-2/resources/index";
     export * from "libs/reach/util/common/src/reach-2/ThemeContext";
-    export * from "libs/reach/util/common/src/reach-2/FocusStyles";
+    export * from "libs/reach/util/common/src/reach-2/useNewExperienceStorage";
+    export * from "libs/reach/util/common/src/reach-2/usePageScrollDirectionForTogglingControls";
 }
 declare module "libs/reach/util/common/src/useReachClassNames" {
     export function useReachClassNames(): string;
@@ -5748,6 +6303,66 @@ declare module "libs/reach/ui/common/src/reach-2/TextField" {
     const TextField: FC<ITextFieldProps>;
     export default TextField;
 }
+declare module "libs/reach/ui/common/src/reach-2/typography/Typography" {
+    import { ComponentPropsWithoutRef, ElementType, PropsWithChildren } from 'react';
+    const variantMapping: {
+        readonly body1: "span";
+        readonly body2: "span";
+        readonly buttonLabel1: "span";
+        readonly buttonLabel2: "span";
+        readonly caption: "span";
+        readonly h1: "h1";
+        readonly h2: "h2";
+        readonly h3: "h3";
+        readonly h4: "h4";
+        readonly inherit: "span";
+        readonly subtitle1: "span";
+        readonly subtitle2: "span";
+    };
+    export interface ITypographyProps<T extends ElementType = typeof variantMapping['body1']> {
+        /**
+         * Set the text alignment.
+         * @default 'inherit'
+         */
+        align?: 'center' | 'justify' | 'left' | 'right';
+        /**
+         * The HTML element to use as the container for the text (overrides the variant default HTML element).
+         * @default undefined
+         */
+        as?: T;
+        /**
+         * Set the font decoration/style.
+         * @default undefined
+         */
+        decoration?: 'line-through' | 'underline';
+        /**
+         * Whether text should be italic
+         * @default false
+         */
+        italic?: 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;
+        /**
+         * Set the typography variant.
+         * @default 'body1'
+         */
+        variant?: keyof typeof variantMapping;
+        /**
+         * Set the font weight.
+         * @default 'normal'
+         */
+        weight?: 'bold' | 'normal' | 'semibold';
+    }
+    type TTypographyOverridenProps<T extends ElementType> = PropsWithChildren<ITypographyProps<T>> & Omit<ComponentPropsWithoutRef<T>, keyof ITypographyProps<T>>;
+    const Typography: <T extends ElementType<any> = "span">(props: TTypographyOverridenProps<T>) => JSX.Element;
+    export default Typography;
+}
 declare module "libs/reach/ui/common/src/reach-2/utils" {
     export function getNormalizedPercentageBasedOnDeviceHeight(heightToConvert: number, safeArea?: number, fullyExpandThreshold?: number): number;
     export function useNormalizedBreakpointValuesBasedOnDeviceHeight(heightToConvert: number, safeArea?: number, fullyExpandThreshold?: number): {
@@ -5769,6 +6384,7 @@ declare module "libs/reach/ui/common/src/reach-2/index" {
     export * from "libs/reach/ui/common/src/reach-2/surfaces/index";
     export { default as Card } from "libs/reach/ui/common/src/reach-2/surfaces/Card";
     export { default as TextField } from "libs/reach/ui/common/src/reach-2/TextField";
+    export * from "libs/reach/ui/common/src/reach-2/typography/Typography";
     export * from "libs/reach/ui/common/src/reach-2/utils";
 }
 declare module "libs/reach/ui/common/src/index" {

package/package.json

@@ -4,6 +4,6 @@
   "main": "",
   "types": "./index.d.ts",
   "license": "ISC",
-  "version": "0.5.0-preview.941",
+  "version": "0.5.0-preview.943",
   "dependencies": {}
 }