@fluentui/react-text 9.0.0-rc.1 → 9.0.0-rc.10

package/dist/{react-text.d.ts → index.d.ts}

@@ -4,42 +4,42 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { FunctionComponent } from 'react';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
- * Text wrapper component for the Body typography variant
+ * Text wrapper component for the Body1 typography variant
  */
-declare const Body_2: FunctionComponent<TextWrapperProps>;
-export { Body_2 as Body }
+export declare const Body1: FunctionComponent<TextWrapperProps>;
 
-export declare const bodyClassName = "fui-Body";
+export declare const body1ClassNames: SlotClassNames<TextSlots>;
 
 /**
- * Text wrapper component for the Caption typography variant
+ * Text wrapper component for the Caption1 typography variant
  */
-export declare const Caption: FunctionComponent<TextWrapperProps>;
+export declare const Caption1: FunctionComponent<TextWrapperProps>;
 
-export declare const captionClassName = "fui-Caption";
+export declare const caption1ClassNames: SlotClassNames<TextSlots>;
 
 /**
- * Text wrapper component for the Display typography variant
+ * Text wrapper component for the Caption2 typography variant
  */
-export declare const Display: FunctionComponent<TextWrapperProps>;
+export declare const Caption2: FunctionComponent<TextWrapperProps>;
 
-export declare const displayClassName = "fui-Display";
+export declare const caption2ClassNames: SlotClassNames<TextSlots>;
 
 /**
- * Text wrapper component for the Headline typography variant
+ * Text wrapper component for the Display typography variant
  */
-export declare const Headline: FunctionComponent<TextWrapperProps>;
+export declare const Display: FunctionComponent<TextWrapperProps>;
 
-export declare const headlineClassName = "fui-Headline";
+export declare const displayClassNames: SlotClassNames<TextSlots>;
 
 /**
  * Text wrapper component for the Large Title typography variant
  */
 export declare const LargeTitle: FunctionComponent<TextWrapperProps>;
 
-export declare const largeTitleClassName = "fui-LargeTitle";
+export declare const largeTitleClassNames: SlotClassNames<TextSlots>;
 
 /**
  * Render the final JSX of Text
@@ -47,11 +47,18 @@ export declare const largeTitleClassName = "fui-LargeTitle";
 export declare const renderText_unstable: (state: TextState) => JSX.Element;
 
 /**
- * Text wrapper component for the Subheadline typography variant
+ * Text wrapper component for the Subtitle1 typography variant
+ */
+export declare const Subtitle1: FunctionComponent<TextWrapperProps>;
+
+export declare const subtitle1ClassNames: SlotClassNames<TextSlots>;
+
+/**
+ * Text wrapper component for the Subtitle2 typography variant
  */
-export declare const Subheadline: FunctionComponent<TextWrapperProps>;
+export declare const Subtitle2: FunctionComponent<TextWrapperProps>;
 
-export declare const subheadlineClassName = "fui-Subheadline";
+export declare const subtitle2ClassNames: SlotClassNames<TextSlots>;
 
 /**
  * Typography and styling abstraction component used to ensure consistency of text.
@@ -59,87 +66,85 @@ export declare const subheadlineClassName = "fui-Subheadline";
 declare const Text_2: ForwardRefComponent<TextProps>;
 export { Text_2 as Text }
 
-export declare const textClassName = "fui-Text";
+export declare const textClassNames: SlotClassNames<TextSlots>;
 
-declare type TextCommons = {
+/**
+ * Text Props
+ */
+export declare type TextProps = ComponentProps<TextSlots> & {
     /**
-     * Wraps the text content on white spaces.
+     * Aligns text based on the parent container.
      *
-     * @defaultValue true
+     * @default start
      */
-    wrap: boolean;
+    align?: 'start' | 'center' | 'end' | 'justify';
     /**
-     * Truncate overflowing text for block displays.
+     * Applies a block display for the content.
      *
-     * @defaultValue false
+     * @default false
      */
-    truncate: boolean;
+    block?: boolean;
     /**
-     * Applies a block display for the content.
+     * Applies the font family to the content.
      *
-     * @defaultValue false
+     * @default base
      */
-    block: boolean;
+    font?: 'base' | 'monospace' | 'numeric';
     /**
      * Applies the italic font style to the content.
      *
-     * @defaultValue false
+     * @default false
      */
-    italic: boolean;
+    italic?: boolean;
     /**
-     * Applies the underline text decoration to the content.
+     * Applies font size and line height based on the theme tokens.
      *
-     * @defaultValue false
+     * @default 300
      */
-    underline: boolean;
+    size?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000;
     /**
      * Applies the strikethrough text decoration to the content.
      *
-     * @defaultValue false
+     * @default false
      */
-    strikethrough: boolean;
+    strikethrough?: boolean;
     /**
-     * Applies font size and line height based on the theme tokens.
+     * Truncate overflowing text for block displays.
      *
-     * @defaultValue 300
+     * @default false
      */
-    size: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000;
+    truncate?: boolean;
     /**
-     * Applies the font family to the content.
+     * Applies the underline text decoration to the content.
      *
-     * @defaultValue base
+     * @default false
      */
-    font: 'base' | 'monospace' | 'numeric';
+    underline?: boolean;
     /**
      * Applies font weight to the content.
      *
-     * @defaultValue regular
+     * @default regular
      */
-    weight: 'regular' | 'medium' | 'semibold';
+    weight?: 'regular' | 'medium' | 'semibold';
     /**
-     * Aligns text based on the parent container.
+     * Wraps the text content on white spaces.
      *
-     * @defaultValue start
+     * @default true
      */
-    align: 'start' | 'center' | 'end' | 'justify';
+    wrap?: boolean;
 };
 
-/**
- * Text Props
- */
-export declare type TextProps = ComponentProps<TextSlots> & Partial<TextCommons>;
-
 /**
  * Text slots
  */
 export declare type TextSlots = {
-    root: Slot<'span', 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'pre'>;
+    root: Slot<'span', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'pre'>;
 };
 
 /**
  * State used in rendering Text
  */
-export declare type TextState = ComponentState<TextSlots> & TextCommons;
+export declare type TextState = ComponentState<TextSlots> & Required<Pick<TextProps, 'align' | 'block' | 'font' | 'italic' | 'size' | 'strikethrough' | 'truncate' | 'underline' | 'weight' | 'wrap'>>;
 
 declare type TextWrapperProps = Omit<TextProps, 'font' | 'size'>;
 
@@ -148,21 +153,21 @@ declare type TextWrapperProps = Omit<TextProps, 'font' | 'size'>;
  */
 export declare const Title1: FunctionComponent<TextWrapperProps>;
 
-export declare const title1ClassName = "fui-Title1";
+export declare const title1ClassNames: SlotClassNames<TextSlots>;
 
 /**
  * Text wrapper component for the Title 2 typography variant
  */
 export declare const Title2: FunctionComponent<TextWrapperProps>;
 
-export declare const title2ClassName = "fui-Title2";
+export declare const title2ClassNames: SlotClassNames<TextSlots>;
 
 /**
  * Text wrapper component for the Title 3 typography variant
  */
 export declare const Title3: FunctionComponent<TextWrapperProps>;
 
-export declare const title3ClassName = "fui-Title3";
+export declare const title3ClassNames: SlotClassNames<TextSlots>;
 
 /**
  * Create the state required to render Text.

package/lib/Body1.js

@@ -0,0 +1,2 @@
+export * from './components/Body1/index';
+//# sourceMappingURL=Body1.js.map

package/lib/Body1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Body1.js","sourceRoot":"../src/","sources":["Body1.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC","sourcesContent":["export * from './components/Body1/index';\n"]}

package/lib/Caption1.js

@@ -0,0 +1,2 @@
+export * from './components/Caption1/index';
+//# sourceMappingURL=Caption1.js.map

package/lib/Caption1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Caption1.js","sourceRoot":"../src/","sources":["Caption1.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './components/Caption1/index';\n"]}

package/lib/Caption2.js

@@ -0,0 +1,2 @@
+export * from './components/Caption2/index';
+//# sourceMappingURL=Caption2.js.map

package/lib/Caption2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Caption2.js","sourceRoot":"../src/","sources":["Caption2.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './components/Caption2/index';\n"]}

package/lib/Display.js.map

@@ -1 +1 @@
-{"version":3,"file":"Display.js","sourceRoot":"","sources":["../src/Display.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}
+{"version":3,"file":"Display.js","sourceRoot":"../src/","sources":["Display.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './components/Display/index';\n"]}

package/lib/LargeTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"LargeTitle.js","sourceRoot":"","sources":["../src/LargeTitle.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC"}
+{"version":3,"file":"LargeTitle.js","sourceRoot":"../src/","sources":["LargeTitle.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC","sourcesContent":["export * from './components/LargeTitle/index';\n"]}

package/lib/Subtitle1.js

@@ -0,0 +1,2 @@
+export * from './components/Subtitle1/index';
+//# sourceMappingURL=Subtitle1.js.map

package/lib/Subtitle1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Subtitle1.js","sourceRoot":"../src/","sources":["Subtitle1.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC","sourcesContent":["export * from './components/Subtitle1/index';\n"]}

package/lib/Subtitle2.js

@@ -0,0 +1,2 @@
+export * from './components/Subtitle2/index';
+//# sourceMappingURL=Subtitle2.js.map

package/lib/Subtitle2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Subtitle2.js","sourceRoot":"../src/","sources":["Subtitle2.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC","sourcesContent":["export * from './components/Subtitle2/index';\n"]}

package/lib/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sourceRoot":"","sources":["../src/Text.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"Text.js","sourceRoot":"../src/","sources":["Text.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC","sourcesContent":["export * from './components/Text/index';\n"]}

package/lib/Title1.js.map

@@ -1 +1 @@
-{"version":3,"file":"Title1.js","sourceRoot":"","sources":["../src/Title1.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"Title1.js","sourceRoot":"../src/","sources":["Title1.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC","sourcesContent":["export * from './components/Title1/index';\n"]}

package/lib/Title2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Title2.js","sourceRoot":"","sources":["../src/Title2.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"Title2.js","sourceRoot":"../src/","sources":["Title2.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC","sourcesContent":["export * from './components/Title2/index';\n"]}

package/lib/Title3.js.map

@@ -1 +1 @@
-{"version":3,"file":"Title3.js","sourceRoot":"","sources":["../src/Title3.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"Title3.js","sourceRoot":"../src/","sources":["Title3.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC","sourcesContent":["export * from './components/Title3/index';\n"]}

package/lib/components/Body1/Body1.js

@@ -0,0 +1,31 @@
+import { __styles } from '@griffel/react';
+import { createWrapper } from '../wrapper';
+import { typographyStyles } from '@fluentui/react-theme';
+export const body1ClassNames = {
+  root: 'fui-Body1'
+};
+/**
+ * Styles for the root slot
+ */
+
+const useStyles = /*#__PURE__*/__styles({
+  "root": {
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "fkhj508",
+    "Bhrd7zp": "figsok6",
+    "Bg96gwp": "f1i3iumi"
+  }
+}, {
+  "d": [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}"]
+});
+/**
+ * Text wrapper component for the Body1 typography variant
+ */
+
+
+export const Body1 = /*#__PURE__*/createWrapper({
+  useStyles,
+  className: body1ClassNames.root,
+  displayName: 'Body1'
+});
+//# sourceMappingURL=Body1.js.map

package/lib/components/Body1/Body1.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Body1/Body1.tsx"],"names":[],"mappings":"AACA,yBAA2B,gBAA3B;AACA,SAAS,aAAT,QAAgD,YAAhD;AAGA,SAAS,gBAAT,QAAiC,uBAAjC;AAEA,OAAO,MAAM,eAAe,GAA8B;AACxD,EAAA,IAAI,EAAE;AADkD,CAAnD;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,MAAM,KAAK,gBAAwC,aAAa,CAAC;AACtE,EAAA,SADsE;AAEtE,EAAA,SAAS,EAAE,eAAe,CAAC,IAF2C;AAGtE,EAAA,WAAW,EAAE;AAHyD,CAAD,CAAhE","sourcesContent":["import type { FunctionComponent } from 'react';\nimport { makeStyles } from '@griffel/react';\nimport { createWrapper, TextWrapperProps } from '../wrapper';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { TextSlots } from '../Text/Text.types';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const body1ClassNames: SlotClassNames<TextSlots> = {\n  root: 'fui-Body1',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: typographyStyles.body1,\n});\n\n/**\n * Text wrapper component for the Body1 typography variant\n */\nexport const Body1: FunctionComponent<TextWrapperProps> = createWrapper({\n  useStyles,\n  className: body1ClassNames.root,\n  displayName: 'Body1',\n});\n"],"sourceRoot":"../src/"}

package/lib/components/Body1/index.js

@@ -0,0 +1,2 @@
+export * from './Body1';
+//# sourceMappingURL=index.js.map

package/lib/components/Body1/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Body1/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC","sourcesContent":["export * from './Body1';\n"]}

package/lib/components/Caption1/Caption1.js

@@ -0,0 +1,31 @@
+import { __styles } from '@griffel/react';
+import { createWrapper } from '../wrapper';
+import { typographyStyles } from '@fluentui/react-theme';
+export const caption1ClassNames = {
+  root: 'fui-Caption1'
+};
+/**
+ * Styles for the root slot
+ */
+
+const useStyles = /*#__PURE__*/__styles({
+  "root": {
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "fy9rknc",
+    "Bhrd7zp": "figsok6",
+    "Bg96gwp": "fwrc4pm"
+  }
+}, {
+  "d": [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}"]
+});
+/**
+ * Text wrapper component for the Caption1 typography variant
+ */
+
+
+export const Caption1 = /*#__PURE__*/createWrapper({
+  useStyles,
+  className: caption1ClassNames.root,
+  displayName: 'Caption1'
+});
+//# sourceMappingURL=Caption1.js.map

package/lib/components/Caption1/Caption1.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Caption1/Caption1.tsx"],"names":[],"mappings":"AACA,yBAA2B,gBAA3B;AACA,SAAS,aAAT,QAAgD,YAAhD;AAGA,SAAS,gBAAT,QAAiC,uBAAjC;AAEA,OAAO,MAAM,kBAAkB,GAA8B;AAC3D,EAAA,IAAI,EAAE;AADqD,CAAtD;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,MAAM,QAAQ,gBAAwC,aAAa,CAAC;AACzE,EAAA,SADyE;AAEzE,EAAA,SAAS,EAAE,kBAAkB,CAAC,IAF2C;AAGzE,EAAA,WAAW,EAAE;AAH4D,CAAD,CAAnE","sourcesContent":["import type { FunctionComponent } from 'react';\nimport { makeStyles } from '@griffel/react';\nimport { createWrapper, TextWrapperProps } from '../wrapper';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { TextSlots } from '../Text/Text.types';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const caption1ClassNames: SlotClassNames<TextSlots> = {\n  root: 'fui-Caption1',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: typographyStyles.caption1,\n});\n\n/**\n * Text wrapper component for the Caption1 typography variant\n */\nexport const Caption1: FunctionComponent<TextWrapperProps> = createWrapper({\n  useStyles,\n  className: caption1ClassNames.root,\n  displayName: 'Caption1',\n});\n"],"sourceRoot":"../src/"}

package/lib/components/Caption1/index.js

@@ -0,0 +1,2 @@
+export * from './Caption1';
+//# sourceMappingURL=index.js.map

package/lib/components/Caption1/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Caption1/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC","sourcesContent":["export * from './Caption1';\n"]}

package/lib/components/Caption2/Caption2.js

@@ -0,0 +1,31 @@
+import { __styles } from '@griffel/react';
+import { createWrapper } from '../wrapper';
+import { typographyStyles } from '@fluentui/react-theme';
+export const caption2ClassNames = {
+  root: 'fui-Caption2'
+};
+/**
+ * Styles for the root slot
+ */
+
+const useStyles = /*#__PURE__*/__styles({
+  "root": {
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "f13mqy1h",
+    "Bhrd7zp": "figsok6",
+    "Bg96gwp": "fcpl73t"
+  }
+}, {
+  "d": [".fk6fouc{font-family:var(--fontFamilyBase);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fcpl73t{line-height:var(--lineHeightBase100);}"]
+});
+/**
+ * Text wrapper component for the Caption2 typography variant
+ */
+
+
+export const Caption2 = /*#__PURE__*/createWrapper({
+  useStyles,
+  className: caption2ClassNames.root,
+  displayName: 'Caption2'
+});
+//# sourceMappingURL=Caption2.js.map

package/lib/components/Caption2/Caption2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Caption2/Caption2.tsx"],"names":[],"mappings":"AACA,yBAA2B,gBAA3B;AACA,SAAS,aAAT,QAAgD,YAAhD;AAGA,SAAS,gBAAT,QAAiC,uBAAjC;AAEA,OAAO,MAAM,kBAAkB,GAA8B;AAC3D,EAAA,IAAI,EAAE;AADqD,CAAtD;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,MAAM,QAAQ,gBAAwC,aAAa,CAAC;AACzE,EAAA,SADyE;AAEzE,EAAA,SAAS,EAAE,kBAAkB,CAAC,IAF2C;AAGzE,EAAA,WAAW,EAAE;AAH4D,CAAD,CAAnE","sourcesContent":["import type { FunctionComponent } from 'react';\nimport { makeStyles } from '@griffel/react';\nimport { createWrapper, TextWrapperProps } from '../wrapper';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { TextSlots } from '../Text/Text.types';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const caption2ClassNames: SlotClassNames<TextSlots> = {\n  root: 'fui-Caption2',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: typographyStyles.caption2,\n});\n\n/**\n * Text wrapper component for the Caption2 typography variant\n */\nexport const Caption2: FunctionComponent<TextWrapperProps> = createWrapper({\n  useStyles,\n  className: caption2ClassNames.root,\n  displayName: 'Caption2',\n});\n"],"sourceRoot":"../src/"}

package/lib/components/Caption2/index.js

@@ -0,0 +1,2 @@
+export * from './Caption2';
+//# sourceMappingURL=index.js.map

package/lib/components/Caption2/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Caption2/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC","sourcesContent":["export * from './Caption2';\n"]}

package/lib/components/Display/Display.js

@@ -1,7 +1,9 @@
 import { __styles } from '@griffel/react';
-import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper } from '../wrapper';
-export const displayClassName = 'fui-Display';
+import { typographyStyles } from '@fluentui/react-theme';
+export const displayClassNames = {
+  root: 'fui-Display'
+};
 /**
  * Styles for the root slot
  */
@@ -10,11 +12,11 @@ const useStyles = /*#__PURE__*/__styles({
   "root": {
     "Bahqtrf": "fk6fouc",
     "Be2twd7": "fpyltcb",
-    "Bg96gwp": "f1ivgwrt",
-    "Bhrd7zp": "fl43uef"
+    "Bhrd7zp": "fl43uef",
+    "Bg96gwp": "f1ivgwrt"
   }
 }, {
-  "d": [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fpyltcb{font-size:var(--fontSizeHero1000);}", ".f1ivgwrt{line-height:var(--lineHeightHero1000);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}"]
+  "d": [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fpyltcb{font-size:var(--fontSizeHero1000);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f1ivgwrt{line-height:var(--lineHeightHero1000);}"]
 });
 /**
  * Text wrapper component for the Display typography variant
@@ -23,7 +25,7 @@ const useStyles = /*#__PURE__*/__styles({
 
 export const Display = /*#__PURE__*/createWrapper({
   useStyles,
-  className: displayClassName,
+  className: displayClassNames.root,
   displayName: 'Display'
 });
 //# sourceMappingURL=Display.js.map

package/lib/components/Display/Display.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Display/Display.tsx"],"names":[],"mappings":"AACA,yBAA2B,gBAA3B;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,aAAT,QAAgD,YAAhD;AAEA,OAAO,MAAM,gBAAgB,GAAG,aAAzB;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,MAAM,OAAO,gBAAwC,aAAa,CAAC;AACxE,EAAA,SADwE;AAExE,EAAA,SAAS,EAAE,gBAF6D;AAGxE,EAAA,WAAW,EAAE;AAH2D,CAAD,CAAlE","sourceRoot":""}
+{"version":3,"sources":["components/Display/Display.tsx"],"names":[],"mappings":"AACA,yBAA2B,gBAA3B;AACA,SAAS,aAAT,QAAgD,YAAhD;AAGA,SAAS,gBAAT,QAAiC,uBAAjC;AAEA,OAAO,MAAM,iBAAiB,GAA8B;AAC1D,EAAA,IAAI,EAAE;AADoD,CAArD;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,MAAM,OAAO,gBAAwC,aAAa,CAAC;AACxE,EAAA,SADwE;AAExE,EAAA,SAAS,EAAE,iBAAiB,CAAC,IAF2C;AAGxE,EAAA,WAAW,EAAE;AAH2D,CAAD,CAAlE","sourcesContent":["import type { FunctionComponent } from 'react';\nimport { makeStyles } from '@griffel/react';\nimport { createWrapper, TextWrapperProps } from '../wrapper';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { TextSlots } from '../Text/Text.types';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const displayClassNames: SlotClassNames<TextSlots> = {\n  root: 'fui-Display',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: typographyStyles.display,\n});\n\n/**\n * Text wrapper component for the Display typography variant\n */\nexport const Display: FunctionComponent<TextWrapperProps> = createWrapper({\n  useStyles,\n  className: displayClassNames.root,\n  displayName: 'Display',\n});\n"],"sourceRoot":"../src/"}

package/lib/components/Display/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Display/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Display/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC","sourcesContent":["export * from './Display';\n"]}

package/lib/components/LargeTitle/LargeTitle.js

@@ -1,7 +1,9 @@
 import { __styles } from '@griffel/react';
-import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper } from '../wrapper';
-export const largeTitleClassName = 'fui-LargeTitle';
+import { typographyStyles } from '@fluentui/react-theme';
+export const largeTitleClassNames = {
+  root: 'fui-LargeTitle'
+};
 /**
  * Styles for the root slot
  */
@@ -10,11 +12,11 @@ const useStyles = /*#__PURE__*/__styles({
   "root": {
     "Bahqtrf": "fk6fouc",
     "Be2twd7": "f15afnhw",
-    "Bg96gwp": "fr3w3wp",
-    "Bhrd7zp": "fl43uef"
+    "Bhrd7zp": "fl43uef",
+    "Bg96gwp": "fr3w3wp"
   }
 }, {
-  "d": [".fk6fouc{font-family:var(--fontFamilyBase);}", ".f15afnhw{font-size:var(--fontSizeHero900);}", ".fr3w3wp{line-height:var(--lineHeightHero900);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}"]
+  "d": [".fk6fouc{font-family:var(--fontFamilyBase);}", ".f15afnhw{font-size:var(--fontSizeHero900);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fr3w3wp{line-height:var(--lineHeightHero900);}"]
 });
 /**
  * Text wrapper component for the Large Title typography variant
@@ -23,7 +25,7 @@ const useStyles = /*#__PURE__*/__styles({
 
 export const LargeTitle = /*#__PURE__*/createWrapper({
   useStyles,
-  className: largeTitleClassName,
+  className: largeTitleClassNames.root,
   displayName: 'LargeTitle'
 });
 //# sourceMappingURL=LargeTitle.js.map

package/lib/components/LargeTitle/LargeTitle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/LargeTitle/LargeTitle.tsx"],"names":[],"mappings":"AACA,yBAA2B,gBAA3B;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,aAAT,QAAgD,YAAhD;AAEA,OAAO,MAAM,mBAAmB,GAAG,gBAA5B;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,MAAM,UAAU,gBAAwC,aAAa,CAAC;AAC3E,EAAA,SAD2E;AAE3E,EAAA,SAAS,EAAE,mBAFgE;AAG3E,EAAA,WAAW,EAAE;AAH8D,CAAD,CAArE","sourceRoot":""}
+{"version":3,"sources":["components/LargeTitle/LargeTitle.tsx"],"names":[],"mappings":"AACA,yBAA2B,gBAA3B;AACA,SAAS,aAAT,QAAgD,YAAhD;AAGA,SAAS,gBAAT,QAAiC,uBAAjC;AAEA,OAAO,MAAM,oBAAoB,GAA8B;AAC7D,EAAA,IAAI,EAAE;AADuD,CAAxD;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,MAAM,UAAU,gBAAwC,aAAa,CAAC;AAC3E,EAAA,SAD2E;AAE3E,EAAA,SAAS,EAAE,oBAAoB,CAAC,IAF2C;AAG3E,EAAA,WAAW,EAAE;AAH8D,CAAD,CAArE","sourcesContent":["import type { FunctionComponent } from 'react';\nimport { makeStyles } from '@griffel/react';\nimport { createWrapper, TextWrapperProps } from '../wrapper';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { TextSlots } from '../Text/Text.types';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const largeTitleClassNames: SlotClassNames<TextSlots> = {\n  root: 'fui-LargeTitle',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: typographyStyles.largeTitle,\n});\n\n/**\n * Text wrapper component for the Large Title typography variant\n */\nexport const LargeTitle: FunctionComponent<TextWrapperProps> = createWrapper({\n  useStyles,\n  className: largeTitleClassNames.root,\n  displayName: 'LargeTitle',\n});\n"],"sourceRoot":"../src/"}

package/lib/components/LargeTitle/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/LargeTitle/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/LargeTitle/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC","sourcesContent":["export * from './LargeTitle';\n"]}

package/lib/components/Subtitle1/Subtitle1.js

@@ -0,0 +1,31 @@
+import { __styles } from '@griffel/react';
+import { createWrapper } from '../wrapper';
+import { typographyStyles } from '@fluentui/react-theme';
+export const subtitle1ClassNames = {
+  root: 'fui-Subtitle1'
+};
+/**
+ * Styles for the root slot
+ */
+
+const useStyles = /*#__PURE__*/__styles({
+  "root": {
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "f1pp30po",
+    "Bhrd7zp": "fl43uef",
+    "Bg96gwp": "f106mvju"
+  }
+}, {
+  "d": [".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f106mvju{line-height:var(--lineHeightBase500);}"]
+});
+/**
+ * Text wrapper component for the Subtitle1 typography variant
+ */
+
+
+export const Subtitle1 = /*#__PURE__*/createWrapper({
+  useStyles,
+  className: subtitle1ClassNames.root,
+  displayName: 'Subtitle1'
+});
+//# sourceMappingURL=Subtitle1.js.map

package/lib/components/Subtitle1/Subtitle1.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Subtitle1/Subtitle1.tsx"],"names":[],"mappings":"AACA,yBAA2B,gBAA3B;AACA,SAAS,aAAT,QAAgD,YAAhD;AAGA,SAAS,gBAAT,QAAiC,uBAAjC;AAEA,OAAO,MAAM,mBAAmB,GAA8B;AAC5D,EAAA,IAAI,EAAE;AADsD,CAAvD;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,MAAM,SAAS,gBAAwC,aAAa,CAAC;AAC1E,EAAA,SAD0E;AAE1E,EAAA,SAAS,EAAE,mBAAmB,CAAC,IAF2C;AAG1E,EAAA,WAAW,EAAE;AAH6D,CAAD,CAApE","sourcesContent":["import type { FunctionComponent } from 'react';\nimport { makeStyles } from '@griffel/react';\nimport { createWrapper, TextWrapperProps } from '../wrapper';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { TextSlots } from '../Text/Text.types';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const subtitle1ClassNames: SlotClassNames<TextSlots> = {\n  root: 'fui-Subtitle1',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: typographyStyles.subtitle1,\n});\n\n/**\n * Text wrapper component for the Subtitle1 typography variant\n */\nexport const Subtitle1: FunctionComponent<TextWrapperProps> = createWrapper({\n  useStyles,\n  className: subtitle1ClassNames.root,\n  displayName: 'Subtitle1',\n});\n"],"sourceRoot":"../src/"}

package/lib/components/Subtitle1/index.js

@@ -0,0 +1,2 @@
+export * from './Subtitle1';
+//# sourceMappingURL=index.js.map

package/lib/components/Subtitle1/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Subtitle1/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC","sourcesContent":["export * from './Subtitle1';\n"]}

package/lib/components/Subtitle2/Subtitle2.js

@@ -0,0 +1,31 @@
+import { __styles } from '@griffel/react';
+import { createWrapper } from '../wrapper';
+import { typographyStyles } from '@fluentui/react-theme';
+export const subtitle2ClassNames = {
+  root: 'fui-Subtitle2'
+};
+/**
+ * Styles for the root slot
+ */
+
+const useStyles = /*#__PURE__*/__styles({
+  "root": {
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "fod5ikn",
+    "Bhrd7zp": "fl43uef",
+    "Bg96gwp": "faaz57k"
+  }
+}, {
+  "d": [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".faaz57k{line-height:var(--lineHeightBase400);}"]
+});
+/**
+ * Text wrapper component for the Subtitle2 typography variant
+ */
+
+
+export const Subtitle2 = /*#__PURE__*/createWrapper({
+  useStyles,
+  className: subtitle2ClassNames.root,
+  displayName: 'Subtitle2'
+});
+//# sourceMappingURL=Subtitle2.js.map

package/lib/components/Subtitle2/Subtitle2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Subtitle2/Subtitle2.tsx"],"names":[],"mappings":"AACA,yBAA2B,gBAA3B;AACA,SAAS,aAAT,QAAgD,YAAhD;AAGA,SAAS,gBAAT,QAAiC,uBAAjC;AAEA,OAAO,MAAM,mBAAmB,GAA8B;AAC5D,EAAA,IAAI,EAAE;AADsD,CAAvD;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,MAAM,SAAS,gBAAwC,aAAa,CAAC;AAC1E,EAAA,SAD0E;AAE1E,EAAA,SAAS,EAAE,mBAAmB,CAAC,IAF2C;AAG1E,EAAA,WAAW,EAAE;AAH6D,CAAD,CAApE","sourcesContent":["import type { FunctionComponent } from 'react';\nimport { makeStyles } from '@griffel/react';\nimport { createWrapper, TextWrapperProps } from '../wrapper';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { TextSlots } from '../Text/Text.types';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const subtitle2ClassNames: SlotClassNames<TextSlots> = {\n  root: 'fui-Subtitle2',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: typographyStyles.subtitle2,\n});\n\n/**\n * Text wrapper component for the Subtitle2 typography variant\n */\nexport const Subtitle2: FunctionComponent<TextWrapperProps> = createWrapper({\n  useStyles,\n  className: subtitle2ClassNames.root,\n  displayName: 'Subtitle2',\n});\n"],"sourceRoot":"../src/"}

package/lib/components/Subtitle2/index.js

@@ -0,0 +1,2 @@
+export * from './Subtitle2';
+//# sourceMappingURL=index.js.map

package/lib/components/Subtitle2/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Subtitle2/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC","sourcesContent":["export * from './Subtitle2';\n"]}