@fluentui/react-text 9.0.0-rc.5 → 9.0.0-rc.6

package/CHANGELOG.json

@@ -2,7 +2,66 @@
   "name": "@fluentui/react-text",
   "entries": [
     {
-      "date": "Fri, 04 Mar 2022 05:15:45 GMT",
+      "date": "Tue, 19 Apr 2022 19:14:11 GMT",
+      "tag": "@fluentui/react-text_v9.0.0-rc.6",
+      "version": "9.0.0-rc.6",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "seanmonahan@microsoft.com",
+            "package": "@fluentui/react-text",
+            "commit": "086a675fd0c648944ff4048450190a0a13467de3",
+            "comment": "Add static classnames to Text"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-text",
+            "commit": "e569d6e04d83cbcc6225e61db52ff81d2addd363",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-text",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.5",
+            "commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-text",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.6",
+            "commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-text",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4",
+            "commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
+          }
+        ],
+        "none": [
+          {
+            "author": "mgodbolt@microsoft.com",
+            "package": "@fluentui/react-text",
+            "commit": "905e46db07ada986fd7885531f72a71b7bbaabdc",
+            "comment": "create v9 api extractor config and set all v9 packags to use it, suppress forgotten export"
+          },
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-text",
+            "commit": "320b8bbba1e498c65d011f3fae09dee98e7a11bb",
+            "comment": "refactor: autofix no export star at index file for cxe-prg packages"
+          },
+          {
+            "author": "elcraig@microsoft.com",
+            "package": "@fluentui/react-text",
+            "commit": "b7f17e976f9e058f39c9fce4f0f9bb6eb4dfa577",
+            "comment": "Update React dev deps and hoist them to the repo root"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 04 Mar 2022 05:17:31 GMT",
       "tag": "@fluentui/react-text_v9.0.0-rc.5",
       "version": "9.0.0-rc.5",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,25 @@
 # Change Log - @fluentui/react-text
 
-This log was last generated on Fri, 04 Mar 2022 05:15:45 GMT and should not be manually modified.
+This log was last generated on Tue, 19 Apr 2022 19:14:11 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-rc.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-text_v9.0.0-rc.6)
+
+Tue, 19 Apr 2022 19:14:11 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-text_v9.0.0-rc.5..@fluentui/react-text_v9.0.0-rc.6)
+
+### Changes
+
+- Add static classnames to Text ([PR #21960](https://github.com/microsoft/fluentui/pull/21960) by seanmonahan@microsoft.com)
+- chore: Update Griffel to latest version ([PR #21976](https://github.com/microsoft/fluentui/pull/21976) by olfedias@microsoft.com)
+- Bump @fluentui/react-theme to v9.0.0-rc.5 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.6 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
+
 ## [9.0.0-rc.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-text_v9.0.0-rc.5)
 
-Fri, 04 Mar 2022 05:15:45 GMT 
+Fri, 04 Mar 2022 05:17:31 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-text_v9.0.0-rc.4..@fluentui/react-text_v9.0.0-rc.5)
 
 ### Changes

package/dist/react-text.d.ts

@@ -4,6 +4,7 @@ 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
@@ -11,36 +12,61 @@ import type { Slot } from '@fluentui/react-utilities';
 declare const Body_2: FunctionComponent<TextWrapperProps>;
 export { Body_2 as Body }
 
+/**
+ * @deprecated Use `bodyClassNames.root` instead.
+ */
 export declare const bodyClassName = "fui-Body";
 
+export declare const bodyClassNames: SlotClassNames<TextSlots>;
+
 /**
  * Text wrapper component for the Caption typography variant
  */
 export declare const Caption: FunctionComponent<TextWrapperProps>;
 
+/**
+ * @deprecated Use `captionClassNames.root` instead.
+ */
 export declare const captionClassName = "fui-Caption";
 
+export declare const captionClassNames: SlotClassNames<TextSlots>;
+
 /**
  * Text wrapper component for the Display typography variant
  */
 export declare const Display: FunctionComponent<TextWrapperProps>;
 
+/**
+ * @deprecated Use `displayClassNames.root` instead.
+ */
 export declare const displayClassName = "fui-Display";
 
+export declare const displayClassNames: SlotClassNames<TextSlots>;
+
 /**
  * Text wrapper component for the Headline typography variant
  */
 export declare const Headline: FunctionComponent<TextWrapperProps>;
 
+/**
+ * @deprecated Use `headlineClassNames.root` instead.
+ */
 export declare const headlineClassName = "fui-Headline";
 
+export declare const headlineClassNames: SlotClassNames<TextSlots>;
+
 /**
  * Text wrapper component for the Large Title typography variant
  */
 export declare const LargeTitle: FunctionComponent<TextWrapperProps>;
 
+/**
+ * @deprecated Use `largeTitleClassNames.root` instead.
+ */
 export declare const largeTitleClassName = "fui-LargeTitle";
 
+export declare const largeTitleClassNames: SlotClassNames<TextSlots>;
+
 /**
  * Render the final JSX of Text
  */
@@ -51,16 +77,26 @@ export declare const renderText_unstable: (state: TextState) => JSX.Element;
  */
 export declare const Subheadline: FunctionComponent<TextWrapperProps>;
 
+/**
+ * @deprecated Use `subheadlineClassNames.root` instead.
+ */
 export declare const subheadlineClassName = "fui-Subheadline";
 
+export declare const subheadlineClassNames: SlotClassNames<TextSlots>;
+
 /**
  * Typography and styling abstraction component used to ensure consistency of text.
  */
 declare const Text_2: ForwardRefComponent<TextProps>;
 export { Text_2 as Text }
 
+/**
+ * @deprecated Use `textClassNames.root` instead.
+ */
 export declare const textClassName = "fui-Text";
 
+export declare const textClassNames: SlotClassNames<TextSlots>;
+
 declare type TextCommons = {
     /**
      * Wraps the text content on white spaces.
@@ -148,22 +184,37 @@ declare type TextWrapperProps = Omit<TextProps, 'font' | 'size'>;
  */
 export declare const Title1: FunctionComponent<TextWrapperProps>;
 
+/**
+ * @deprecated Use `title1ClassNames.root` instead.
+ */
 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>;
 
+/**
+ * @deprecated Use `title2ClassNames.root` instead.
+ */
 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>;
 
+/**
+ * @deprecated Use `title3ClassNames.root` instead.
+ */
 export declare const title3ClassName = "fui-Title3";
 
+export declare const title3ClassNames: SlotClassNames<TextSlots>;
+
 /**
  * Create the state required to render Text.
  *

package/lib/components/Body/Body.d.ts

@@ -1,6 +1,12 @@
 import type { FunctionComponent } from 'react';
 import { TextWrapperProps } from '../wrapper';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import { TextSlots } from '../Text/Text.types';
+/**
+ * @deprecated Use `bodyClassNames.root` instead.
+ */
 export declare const bodyClassName = "fui-Body";
+export declare const bodyClassNames: SlotClassNames<TextSlots>;
 /**
  * Text wrapper component for the Body typography variant
  */

package/lib/components/Body/Body.js

@@ -1,7 +1,14 @@
 import { __styles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper } from '../wrapper';
+/**
+ * @deprecated Use `bodyClassNames.root` instead.
+ */
+
 export const bodyClassName = 'fui-Body';
+export const bodyClassNames = {
+  root: 'fui-Body'
+};
 /**
  * Styles for the root slot
  */
@@ -23,7 +30,7 @@ const useStyles = /*#__PURE__*/__styles({
 
 export const Body = /*#__PURE__*/createWrapper({
   useStyles,
-  className: bodyClassName,
+  className: bodyClassNames.root,
   displayName: 'Body'
 });
 //# sourceMappingURL=Body.js.map

package/lib/components/Body/Body.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Body/Body.tsx"],"names":[],"mappings":"AACA,yBAA2B,gBAA3B;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,aAAT,QAAgD,YAAhD;AAEA,OAAO,MAAM,aAAa,GAAG,UAAtB;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,MAAM,IAAI,gBAAwC,aAAa,CAAC;AACrE,EAAA,SADqE;AAErE,EAAA,SAAS,EAAE,aAF0D;AAGrE,EAAA,WAAW,EAAE;AAHwD,CAAD,CAA/D","sourcesContent":["import type { FunctionComponent } from 'react';\nimport { makeStyles } from '@griffel/react';\nimport { typographyStyles } from '../../typographyStyles/index';\nimport { createWrapper, TextWrapperProps } from '../wrapper';\n\nexport const bodyClassName = 'fui-Body';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: typographyStyles.body,\n});\n\n/**\n * Text wrapper component for the Body typography variant\n */\nexport const Body: FunctionComponent<TextWrapperProps> = createWrapper({\n  useStyles,\n  className: bodyClassName,\n  displayName: 'Body',\n});\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Body/Body.tsx"],"names":[],"mappings":"AACA,yBAA2B,gBAA3B;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,aAAT,QAAgD,YAAhD;AAIA;;AAEG;;AACH,OAAO,MAAM,aAAa,GAAG,UAAtB;AACP,OAAO,MAAM,cAAc,GAA8B;AACvD,EAAA,IAAI,EAAE;AADiD,CAAlD;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,MAAM,IAAI,gBAAwC,aAAa,CAAC;AACrE,EAAA,SADqE;AAErE,EAAA,SAAS,EAAE,cAAc,CAAC,IAF2C;AAGrE,EAAA,WAAW,EAAE;AAHwD,CAAD,CAA/D","sourcesContent":["import type { FunctionComponent } from 'react';\nimport { makeStyles } from '@griffel/react';\nimport { typographyStyles } from '../../typographyStyles/index';\nimport { createWrapper, TextWrapperProps } from '../wrapper';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { TextSlots } from '../Text/Text.types';\n\n/**\n * @deprecated Use `bodyClassNames.root` instead.\n */\nexport const bodyClassName = 'fui-Body';\nexport const bodyClassNames: SlotClassNames<TextSlots> = {\n  root: 'fui-Body',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: typographyStyles.body,\n});\n\n/**\n * Text wrapper component for the Body typography variant\n */\nexport const Body: FunctionComponent<TextWrapperProps> = createWrapper({\n  useStyles,\n  className: bodyClassNames.root,\n  displayName: 'Body',\n});\n"],"sourceRoot":"../src/"}

package/lib/components/Caption/Caption.d.ts

@@ -1,6 +1,12 @@
 import type { FunctionComponent } from 'react';
 import { TextWrapperProps } from '../wrapper';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import { TextSlots } from '../Text/Text.types';
+/**
+ * @deprecated Use `captionClassNames.root` instead.
+ */
 export declare const captionClassName = "fui-Caption";
+export declare const captionClassNames: SlotClassNames<TextSlots>;
 /**
  * Text wrapper component for the Caption typography variant
  */

package/lib/components/Caption/Caption.js

@@ -1,7 +1,14 @@
 import { __styles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper } from '../wrapper';
+/**
+ * @deprecated Use `captionClassNames.root` instead.
+ */
+
 export const captionClassName = 'fui-Caption';
+export const captionClassNames = {
+  root: 'fui-Caption'
+};
 /**
  * Styles for the root slot
  */
@@ -23,7 +30,7 @@ const useStyles = /*#__PURE__*/__styles({
 
 export const Caption = /*#__PURE__*/createWrapper({
   useStyles,
-  className: captionClassName,
+  className: captionClassNames.root,
   displayName: 'Caption'
 });
 //# sourceMappingURL=Caption.js.map

package/lib/components/Caption/Caption.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Caption/Caption.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","sourcesContent":["import type { FunctionComponent } from 'react';\nimport { makeStyles } from '@griffel/react';\nimport { typographyStyles } from '../../typographyStyles/index';\nimport { createWrapper, TextWrapperProps } from '../wrapper';\n\nexport const captionClassName = 'fui-Caption';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: typographyStyles.caption,\n});\n\n/**\n * Text wrapper component for the Caption typography variant\n */\nexport const Caption: FunctionComponent<TextWrapperProps> = createWrapper({\n  useStyles,\n  className: captionClassName,\n  displayName: 'Caption',\n});\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Caption/Caption.tsx"],"names":[],"mappings":"AACA,yBAA2B,gBAA3B;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,aAAT,QAAgD,YAAhD;AAIA;;AAEG;;AACH,OAAO,MAAM,gBAAgB,GAAG,aAAzB;AACP,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 { typographyStyles } from '../../typographyStyles/index';\nimport { createWrapper, TextWrapperProps } from '../wrapper';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { TextSlots } from '../Text/Text.types';\n\n/**\n * @deprecated Use `captionClassNames.root` instead.\n */\nexport const captionClassName = 'fui-Caption';\nexport const captionClassNames: SlotClassNames<TextSlots> = {\n  root: 'fui-Caption',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: typographyStyles.caption,\n});\n\n/**\n * Text wrapper component for the Caption typography variant\n */\nexport const Caption: FunctionComponent<TextWrapperProps> = createWrapper({\n  useStyles,\n  className: captionClassNames.root,\n  displayName: 'Caption',\n});\n"],"sourceRoot":"../src/"}

package/lib/components/Display/Display.d.ts

@@ -1,6 +1,12 @@
 import type { FunctionComponent } from 'react';
 import { TextWrapperProps } from '../wrapper';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import { TextSlots } from '../Text/Text.types';
+/**
+ * @deprecated Use `displayClassNames.root` instead.
+ */
 export declare const displayClassName = "fui-Display";
+export declare const displayClassNames: SlotClassNames<TextSlots>;
 /**
  * Text wrapper component for the Display typography variant
  */

package/lib/components/Display/Display.js

@@ -1,7 +1,14 @@
 import { __styles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper } from '../wrapper';
+/**
+ * @deprecated Use `displayClassNames.root` instead.
+ */
+
 export const displayClassName = 'fui-Display';
+export const displayClassNames = {
+  root: 'fui-Display'
+};
 /**
  * Styles for the root slot
  */
@@ -23,7 +30,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":["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","sourcesContent":["import type { FunctionComponent } from 'react';\nimport { makeStyles } from '@griffel/react';\nimport { typographyStyles } from '../../typographyStyles/index';\nimport { createWrapper, TextWrapperProps } from '../wrapper';\n\nexport const displayClassName = 'fui-Display';\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: displayClassName,\n  displayName: 'Display',\n});\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Display/Display.tsx"],"names":[],"mappings":"AACA,yBAA2B,gBAA3B;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,aAAT,QAAgD,YAAhD;AAIA;;AAEG;;AACH,OAAO,MAAM,gBAAgB,GAAG,aAAzB;AACP,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 { typographyStyles } from '../../typographyStyles/index';\nimport { createWrapper, TextWrapperProps } from '../wrapper';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { TextSlots } from '../Text/Text.types';\n\n/**\n * @deprecated Use `displayClassNames.root` instead.\n */\nexport const displayClassName = 'fui-Display';\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/Headline/Headline.d.ts

@@ -1,6 +1,12 @@
 import type { FunctionComponent } from 'react';
 import { TextWrapperProps } from '../wrapper';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import { TextSlots } from '../Text/Text.types';
+/**
+ * @deprecated Use `headlineClassNames.root` instead.
+ */
 export declare const headlineClassName = "fui-Headline";
+export declare const headlineClassNames: SlotClassNames<TextSlots>;
 /**
  * Text wrapper component for the Headline typography variant
  */

package/lib/components/Headline/Headline.js

@@ -1,7 +1,14 @@
 import { __styles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper } from '../wrapper';
+/**
+ * @deprecated Use `headlineClassNames.root` instead.
+ */
+
 export const headlineClassName = 'fui-Headline';
+export const headlineClassNames = {
+  root: 'fui-Headline'
+};
 /**
  * Styles for the root slot
  */
@@ -23,7 +30,7 @@ const useStyles = /*#__PURE__*/__styles({
 
 export const Headline = /*#__PURE__*/createWrapper({
   useStyles,
-  className: headlineClassName,
+  className: headlineClassNames.root,
   displayName: 'Headline'
 });
 //# sourceMappingURL=Headline.js.map

package/lib/components/Headline/Headline.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Headline/Headline.tsx"],"names":[],"mappings":"AACA,yBAA2B,gBAA3B;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,aAAT,QAAgD,YAAhD;AAEA,OAAO,MAAM,iBAAiB,GAAG,cAA1B;AAEP;;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,iBAF8D;AAGzE,EAAA,WAAW,EAAE;AAH4D,CAAD,CAAnE","sourcesContent":["import type { FunctionComponent } from 'react';\nimport { makeStyles } from '@griffel/react';\nimport { typographyStyles } from '../../typographyStyles/index';\nimport { createWrapper, TextWrapperProps } from '../wrapper';\n\nexport const headlineClassName = 'fui-Headline';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: typographyStyles.headline,\n});\n\n/**\n * Text wrapper component for the Headline typography variant\n */\nexport const Headline: FunctionComponent<TextWrapperProps> = createWrapper({\n  useStyles,\n  className: headlineClassName,\n  displayName: 'Headline',\n});\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Headline/Headline.tsx"],"names":[],"mappings":"AACA,yBAA2B,gBAA3B;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,aAAT,QAAgD,YAAhD;AAIA;;AAEG;;AACH,OAAO,MAAM,iBAAiB,GAAG,cAA1B;AACP,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 { typographyStyles } from '../../typographyStyles/index';\nimport { createWrapper, TextWrapperProps } from '../wrapper';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { TextSlots } from '../Text/Text.types';\n\n/**\n * @deprecated Use `headlineClassNames.root` instead.\n */\nexport const headlineClassName = 'fui-Headline';\nexport const headlineClassNames: SlotClassNames<TextSlots> = {\n  root: 'fui-Headline',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: typographyStyles.headline,\n});\n\n/**\n * Text wrapper component for the Headline typography variant\n */\nexport const Headline: FunctionComponent<TextWrapperProps> = createWrapper({\n  useStyles,\n  className: headlineClassNames.root,\n  displayName: 'Headline',\n});\n"],"sourceRoot":"../src/"}

package/lib/components/LargeTitle/LargeTitle.d.ts

@@ -1,6 +1,12 @@
 import type { FunctionComponent } from 'react';
 import { TextWrapperProps } from '../wrapper';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import { TextSlots } from '../Text/Text.types';
+/**
+ * @deprecated Use `largeTitleClassNames.root` instead.
+ */
 export declare const largeTitleClassName = "fui-LargeTitle";
+export declare const largeTitleClassNames: SlotClassNames<TextSlots>;
 /**
  * Text wrapper component for the Large Title typography variant
  */

package/lib/components/LargeTitle/LargeTitle.js

@@ -1,7 +1,14 @@
 import { __styles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper } from '../wrapper';
+/**
+ * @deprecated Use `largeTitleClassNames.root` instead.
+ */
+
 export const largeTitleClassName = 'fui-LargeTitle';
+export const largeTitleClassNames = {
+  root: 'fui-LargeTitle'
+};
 /**
  * Styles for the root slot
  */
@@ -23,7 +30,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":["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","sourcesContent":["import type { FunctionComponent } from 'react';\nimport { makeStyles } from '@griffel/react';\nimport { typographyStyles } from '../../typographyStyles/index';\nimport { createWrapper, TextWrapperProps } from '../wrapper';\n\nexport const largeTitleClassName = 'fui-LargeTitle';\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: largeTitleClassName,\n  displayName: 'LargeTitle',\n});\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/LargeTitle/LargeTitle.tsx"],"names":[],"mappings":"AACA,yBAA2B,gBAA3B;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,aAAT,QAAgD,YAAhD;AAIA;;AAEG;;AACH,OAAO,MAAM,mBAAmB,GAAG,gBAA5B;AACP,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 { typographyStyles } from '../../typographyStyles/index';\nimport { createWrapper, TextWrapperProps } from '../wrapper';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { TextSlots } from '../Text/Text.types';\n\n/**\n * @deprecated Use `largeTitleClassNames.root` instead.\n */\nexport const largeTitleClassName = 'fui-LargeTitle';\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/Subheadline/Subheadline.d.ts

@@ -1,6 +1,12 @@
 import type { FunctionComponent } from 'react';
 import { TextWrapperProps } from '../wrapper';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import { TextSlots } from '../Text/Text.types';
+/**
+ * @deprecated Use `subheadlineClassNames.root` instead.
+ */
 export declare const subheadlineClassName = "fui-Subheadline";
+export declare const subheadlineClassNames: SlotClassNames<TextSlots>;
 /**
  * Text wrapper component for the Subheadline typography variant
  */

package/lib/components/Subheadline/Subheadline.js

@@ -1,7 +1,14 @@
 import { __styles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper } from '../wrapper';
+/**
+ * @deprecated Use `subheadlineClassNames.root` instead.
+ */
+
 export const subheadlineClassName = 'fui-Subheadline';
+export const subheadlineClassNames = {
+  root: 'fui-Subheadline'
+};
 /**
  * Styles for the root slot
  */
@@ -23,7 +30,7 @@ const useStyles = /*#__PURE__*/__styles({
 
 export const Subheadline = /*#__PURE__*/createWrapper({
   useStyles,
-  className: subheadlineClassName,
+  className: subheadlineClassNames.root,
   displayName: 'Subheadline'
 });
 //# sourceMappingURL=Subheadline.js.map

package/lib/components/Subheadline/Subheadline.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Subheadline/Subheadline.tsx"],"names":[],"mappings":"AACA,yBAA2B,gBAA3B;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,aAAT,QAAgD,YAAhD;AAEA,OAAO,MAAM,oBAAoB,GAAG,iBAA7B;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,MAAM,WAAW,gBAAwC,aAAa,CAAC;AAC5E,EAAA,SAD4E;AAE5E,EAAA,SAAS,EAAE,oBAFiE;AAG5E,EAAA,WAAW,EAAE;AAH+D,CAAD,CAAtE","sourcesContent":["import type { FunctionComponent } from 'react';\nimport { makeStyles } from '@griffel/react';\nimport { typographyStyles } from '../../typographyStyles/index';\nimport { createWrapper, TextWrapperProps } from '../wrapper';\n\nexport const subheadlineClassName = 'fui-Subheadline';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: typographyStyles.subheadline,\n});\n\n/**\n * Text wrapper component for the Subheadline typography variant\n */\nexport const Subheadline: FunctionComponent<TextWrapperProps> = createWrapper({\n  useStyles,\n  className: subheadlineClassName,\n  displayName: 'Subheadline',\n});\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Subheadline/Subheadline.tsx"],"names":[],"mappings":"AACA,yBAA2B,gBAA3B;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,aAAT,QAAgD,YAAhD;AAIA;;AAEG;;AACH,OAAO,MAAM,oBAAoB,GAAG,iBAA7B;AACP,OAAO,MAAM,qBAAqB,GAA8B;AAC9D,EAAA,IAAI,EAAE;AADwD,CAAzD;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,MAAM,WAAW,gBAAwC,aAAa,CAAC;AAC5E,EAAA,SAD4E;AAE5E,EAAA,SAAS,EAAE,qBAAqB,CAAC,IAF2C;AAG5E,EAAA,WAAW,EAAE;AAH+D,CAAD,CAAtE","sourcesContent":["import type { FunctionComponent } from 'react';\nimport { makeStyles } from '@griffel/react';\nimport { typographyStyles } from '../../typographyStyles/index';\nimport { createWrapper, TextWrapperProps } from '../wrapper';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { TextSlots } from '../Text/Text.types';\n\n/**\n * @deprecated Use `subheadlineClassNames.root` instead.\n */\nexport const subheadlineClassName = 'fui-Subheadline';\nexport const subheadlineClassNames: SlotClassNames<TextSlots> = {\n  root: 'fui-Subheadline',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: typographyStyles.subheadline,\n});\n\n/**\n * Text wrapper component for the Subheadline typography variant\n */\nexport const Subheadline: FunctionComponent<TextWrapperProps> = createWrapper({\n  useStyles,\n  className: subheadlineClassNames.root,\n  displayName: 'Subheadline',\n});\n"],"sourceRoot":"../src/"}

package/lib/components/Text/useTextStyles.d.ts

@@ -1,5 +1,10 @@
-import type { TextState } from './Text.types';
+import type { TextSlots, TextState } from './Text.types';
+import { SlotClassNames } from '@fluentui/react-utilities';
+/**
+ * @deprecated Use `textClassNames.root` instead.
+ */
 export declare const textClassName = "fui-Text";
+export declare const textClassNames: SlotClassNames<TextSlots>;
 /**
  * Apply styling to the Text slots based on the state
  */

package/lib/components/Text/useTextStyles.js

@@ -1,6 +1,13 @@
 import { __styles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
+/**
+ * @deprecated Use `textClassNames.root` instead.
+ */
+
 export const textClassName = 'fui-Text';
+export const textClassNames = {
+  root: 'fui-Text'
+};
 /**
  * Styles for the root slot
  */
@@ -108,7 +115,7 @@ const useStyles = /*#__PURE__*/__styles({
 
 export const useTextStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = mergeClasses(textClassName, styles.root, state.wrap === false && styles.nowrap, state.truncate && styles.truncate, state.block && styles.block, state.italic && styles.italic, state.underline && styles.underline, state.strikethrough && styles.strikethrough, state.underline && state.strikethrough && styles.strikethroughUnderline, state.size === 100 && styles.base100, state.size === 200 && styles.base200, state.size === 400 && styles.base400, state.size === 500 && styles.base500, state.size === 600 && styles.base600, state.size === 700 && styles.hero700, state.size === 800 && styles.hero800, state.size === 900 && styles.hero900, state.size === 1000 && styles.hero1000, state.font === 'monospace' && styles.monospace, state.font === 'numeric' && styles.numeric, state.weight === 'medium' && styles.weightMedium, state.weight === 'semibold' && styles.weightSemibold, state.align === 'center' && styles.alignCenter, state.align === 'end' && styles.alignEnd, state.align === 'justify' && styles.alignJustify, state.root.className);
+  state.root.className = mergeClasses(textClassNames.root, styles.root, state.wrap === false && styles.nowrap, state.truncate && styles.truncate, state.block && styles.block, state.italic && styles.italic, state.underline && styles.underline, state.strikethrough && styles.strikethrough, state.underline && state.strikethrough && styles.strikethroughUnderline, state.size === 100 && styles.base100, state.size === 200 && styles.base200, state.size === 400 && styles.base400, state.size === 500 && styles.base500, state.size === 600 && styles.base600, state.size === 700 && styles.hero700, state.size === 800 && styles.hero800, state.size === 900 && styles.hero900, state.size === 1000 && styles.hero1000, state.font === 'monospace' && styles.monospace, state.font === 'numeric' && styles.numeric, state.weight === 'medium' && styles.weightMedium, state.weight === 'semibold' && styles.weightSemibold, state.align === 'center' && styles.alignCenter, state.align === 'end' && styles.alignEnd, state.align === 'justify' && styles.alignJustify, state.root.className);
   return state;
 };
 //# sourceMappingURL=useTextStyles.js.map

package/lib/components/Text/useTextStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Text/useTextStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TextState } from './Text.types';\n\nexport const textClassName = 'fui-Text';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    fontFamily: tokens.fontFamilyBase,\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n    fontWeight: tokens.fontWeightRegular,\n    textAlign: 'start',\n    display: 'inline',\n    whiteSpace: 'normal',\n    ...shorthands.overflow('visible'),\n    textOverflow: 'clip',\n  },\n  nowrap: {\n    whiteSpace: 'nowrap',\n    ...shorthands.overflow('hidden'),\n  },\n  truncate: {\n    textOverflow: 'ellipsis',\n  },\n  block: {\n    display: 'block',\n  },\n  italic: {\n    fontStyle: 'italic',\n  },\n  underline: {\n    textDecorationLine: 'underline',\n  },\n  strikethrough: {\n    textDecorationLine: 'line-through',\n  },\n  strikethroughUnderline: {\n    textDecorationLine: 'line-through underline',\n  },\n  base100: {\n    fontSize: tokens.fontSizeBase100,\n    lineHeight: tokens.lineHeightBase100,\n  },\n  base200: {\n    fontSize: tokens.fontSizeBase200,\n    lineHeight: tokens.lineHeightBase200,\n  },\n  base400: {\n    fontSize: tokens.fontSizeBase400,\n    lineHeight: tokens.lineHeightBase400,\n  },\n  base500: {\n    fontSize: tokens.fontSizeBase500,\n    lineHeight: tokens.lineHeightBase500,\n  },\n  base600: {\n    fontSize: tokens.fontSizeBase600,\n    lineHeight: tokens.lineHeightBase600,\n  },\n  hero700: {\n    fontSize: tokens.fontSizeHero700,\n    lineHeight: tokens.lineHeightHero700,\n  },\n  hero800: {\n    fontSize: tokens.fontSizeHero800,\n    lineHeight: tokens.lineHeightHero800,\n  },\n  hero900: {\n    fontSize: tokens.fontSizeHero900,\n    lineHeight: tokens.lineHeightHero900,\n  },\n  hero1000: {\n    fontSize: tokens.fontSizeHero1000,\n    lineHeight: tokens.lineHeightHero1000,\n  },\n  monospace: {\n    fontFamily: tokens.fontFamilyMonospace,\n  },\n  numeric: {\n    fontFamily: tokens.fontFamilyNumeric,\n  },\n  weightMedium: {\n    fontWeight: tokens.fontWeightMedium,\n  },\n  weightSemibold: {\n    fontWeight: tokens.fontWeightSemibold,\n  },\n  alignCenter: {\n    textAlign: 'center',\n  },\n  alignEnd: {\n    textAlign: 'end',\n  },\n  alignJustify: {\n    textAlign: 'justify',\n  },\n});\n\n/**\n * Apply styling to the Text slots based on the state\n */\nexport const useTextStyles_unstable = (state: TextState): TextState => {\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(\n    textClassName,\n    styles.root,\n    state.wrap === false && styles.nowrap,\n    state.truncate && styles.truncate,\n    state.block && styles.block,\n    state.italic && styles.italic,\n    state.underline && styles.underline,\n    state.strikethrough && styles.strikethrough,\n    state.underline && state.strikethrough && styles.strikethroughUnderline,\n    state.size === 100 && styles.base100,\n    state.size === 200 && styles.base200,\n    state.size === 400 && styles.base400,\n    state.size === 500 && styles.base500,\n    state.size === 600 && styles.base600,\n    state.size === 700 && styles.hero700,\n    state.size === 800 && styles.hero800,\n    state.size === 900 && styles.hero900,\n    state.size === 1000 && styles.hero1000,\n    state.font === 'monospace' && styles.monospace,\n    state.font === 'numeric' && styles.numeric,\n    state.weight === 'medium' && styles.weightMedium,\n    state.weight === 'semibold' && styles.weightSemibold,\n    state.align === 'center' && styles.alignCenter,\n    state.align === 'end' && styles.alignEnd,\n    state.align === 'justify' && styles.alignJustify,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Text/useTextStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TextSlots, TextState } from './Text.types';\nimport { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `textClassNames.root` instead.\n */\nexport const textClassName = 'fui-Text';\nexport const textClassNames: SlotClassNames<TextSlots> = {\n  root: 'fui-Text',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    fontFamily: tokens.fontFamilyBase,\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n    fontWeight: tokens.fontWeightRegular,\n    textAlign: 'start',\n    display: 'inline',\n    whiteSpace: 'normal',\n    ...shorthands.overflow('visible'),\n    textOverflow: 'clip',\n  },\n  nowrap: {\n    whiteSpace: 'nowrap',\n    ...shorthands.overflow('hidden'),\n  },\n  truncate: {\n    textOverflow: 'ellipsis',\n  },\n  block: {\n    display: 'block',\n  },\n  italic: {\n    fontStyle: 'italic',\n  },\n  underline: {\n    textDecorationLine: 'underline',\n  },\n  strikethrough: {\n    textDecorationLine: 'line-through',\n  },\n  strikethroughUnderline: {\n    textDecorationLine: 'line-through underline',\n  },\n  base100: {\n    fontSize: tokens.fontSizeBase100,\n    lineHeight: tokens.lineHeightBase100,\n  },\n  base200: {\n    fontSize: tokens.fontSizeBase200,\n    lineHeight: tokens.lineHeightBase200,\n  },\n  base400: {\n    fontSize: tokens.fontSizeBase400,\n    lineHeight: tokens.lineHeightBase400,\n  },\n  base500: {\n    fontSize: tokens.fontSizeBase500,\n    lineHeight: tokens.lineHeightBase500,\n  },\n  base600: {\n    fontSize: tokens.fontSizeBase600,\n    lineHeight: tokens.lineHeightBase600,\n  },\n  hero700: {\n    fontSize: tokens.fontSizeHero700,\n    lineHeight: tokens.lineHeightHero700,\n  },\n  hero800: {\n    fontSize: tokens.fontSizeHero800,\n    lineHeight: tokens.lineHeightHero800,\n  },\n  hero900: {\n    fontSize: tokens.fontSizeHero900,\n    lineHeight: tokens.lineHeightHero900,\n  },\n  hero1000: {\n    fontSize: tokens.fontSizeHero1000,\n    lineHeight: tokens.lineHeightHero1000,\n  },\n  monospace: {\n    fontFamily: tokens.fontFamilyMonospace,\n  },\n  numeric: {\n    fontFamily: tokens.fontFamilyNumeric,\n  },\n  weightMedium: {\n    fontWeight: tokens.fontWeightMedium,\n  },\n  weightSemibold: {\n    fontWeight: tokens.fontWeightSemibold,\n  },\n  alignCenter: {\n    textAlign: 'center',\n  },\n  alignEnd: {\n    textAlign: 'end',\n  },\n  alignJustify: {\n    textAlign: 'justify',\n  },\n});\n\n/**\n * Apply styling to the Text slots based on the state\n */\nexport const useTextStyles_unstable = (state: TextState): TextState => {\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(\n    textClassNames.root,\n    styles.root,\n    state.wrap === false && styles.nowrap,\n    state.truncate && styles.truncate,\n    state.block && styles.block,\n    state.italic && styles.italic,\n    state.underline && styles.underline,\n    state.strikethrough && styles.strikethrough,\n    state.underline && state.strikethrough && styles.strikethroughUnderline,\n    state.size === 100 && styles.base100,\n    state.size === 200 && styles.base200,\n    state.size === 400 && styles.base400,\n    state.size === 500 && styles.base500,\n    state.size === 600 && styles.base600,\n    state.size === 700 && styles.hero700,\n    state.size === 800 && styles.hero800,\n    state.size === 900 && styles.hero900,\n    state.size === 1000 && styles.hero1000,\n    state.font === 'monospace' && styles.monospace,\n    state.font === 'numeric' && styles.numeric,\n    state.weight === 'medium' && styles.weightMedium,\n    state.weight === 'semibold' && styles.weightSemibold,\n    state.align === 'center' && styles.alignCenter,\n    state.align === 'end' && styles.alignEnd,\n    state.align === 'justify' && styles.alignJustify,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Title1/Title1.d.ts

@@ -1,6 +1,12 @@
 import type { FunctionComponent } from 'react';
 import { TextWrapperProps } from '../wrapper';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import { TextSlots } from '../Text/Text.types';
+/**
+ * @deprecated Use `title1ClassNames.root` instead.
+ */
 export declare const title1ClassName = "fui-Title1";
+export declare const title1ClassNames: SlotClassNames<TextSlots>;
 /**
  * Text wrapper component for the Title 1 typography variant
  */

package/lib/components/Title1/Title1.js

@@ -1,7 +1,14 @@
 import { __styles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper } from '../wrapper';
+/**
+ * @deprecated Use `title1ClassNames.root` instead.
+ */
+
 export const title1ClassName = 'fui-Title1';
+export const title1ClassNames = {
+  root: 'fui-Title1'
+};
 /**
  * Styles for the root slot
  */
@@ -23,7 +30,7 @@ const useStyles = /*#__PURE__*/__styles({
 
 export const Title1 = /*#__PURE__*/createWrapper({
   useStyles,
-  className: title1ClassName,
+  className: title1ClassNames.root,
   displayName: 'Title1'
 });
 //# sourceMappingURL=Title1.js.map

package/lib/components/Title1/Title1.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Title1/Title1.tsx"],"names":[],"mappings":"AACA,yBAA2B,gBAA3B;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,aAAT,QAAgD,YAAhD;AAEA,OAAO,MAAM,eAAe,GAAG,YAAxB;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,MAAM,MAAM,gBAAwC,aAAa,CAAC;AACvE,EAAA,SADuE;AAEvE,EAAA,SAAS,EAAE,eAF4D;AAGvE,EAAA,WAAW,EAAE;AAH0D,CAAD,CAAjE","sourcesContent":["import type { FunctionComponent } from 'react';\nimport { makeStyles } from '@griffel/react';\nimport { typographyStyles } from '../../typographyStyles/index';\nimport { createWrapper, TextWrapperProps } from '../wrapper';\n\nexport const title1ClassName = 'fui-Title1';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: typographyStyles.title1,\n});\n\n/**\n * Text wrapper component for the Title 1 typography variant\n */\nexport const Title1: FunctionComponent<TextWrapperProps> = createWrapper({\n  useStyles,\n  className: title1ClassName,\n  displayName: 'Title1',\n});\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Title1/Title1.tsx"],"names":[],"mappings":"AACA,yBAA2B,gBAA3B;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,aAAT,QAAgD,YAAhD;AAIA;;AAEG;;AACH,OAAO,MAAM,eAAe,GAAG,YAAxB;AACP,OAAO,MAAM,gBAAgB,GAA8B;AACzD,EAAA,IAAI,EAAE;AADmD,CAApD;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,MAAM,MAAM,gBAAwC,aAAa,CAAC;AACvE,EAAA,SADuE;AAEvE,EAAA,SAAS,EAAE,gBAAgB,CAAC,IAF2C;AAGvE,EAAA,WAAW,EAAE;AAH0D,CAAD,CAAjE","sourcesContent":["import type { FunctionComponent } from 'react';\nimport { makeStyles } from '@griffel/react';\nimport { typographyStyles } from '../../typographyStyles/index';\nimport { createWrapper, TextWrapperProps } from '../wrapper';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { TextSlots } from '../Text/Text.types';\n\n/**\n * @deprecated Use `title1ClassNames.root` instead.\n */\nexport const title1ClassName = 'fui-Title1';\nexport const title1ClassNames: SlotClassNames<TextSlots> = {\n  root: 'fui-Title1',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: typographyStyles.title1,\n});\n\n/**\n * Text wrapper component for the Title 1 typography variant\n */\nexport const Title1: FunctionComponent<TextWrapperProps> = createWrapper({\n  useStyles,\n  className: title1ClassNames.root,\n  displayName: 'Title1',\n});\n"],"sourceRoot":"../src/"}