@fluentui/react-text 9.0.0-nightly.d730088d7f.0 → 9.0.0-rc.10

package/dist/index.d.ts

@@ -0,0 +1,188 @@
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+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 Body1 typography variant
+ */
+export declare const Body1: FunctionComponent<TextWrapperProps>;
+
+export declare const body1ClassNames: SlotClassNames<TextSlots>;
+
+/**
+ * Text wrapper component for the Caption1 typography variant
+ */
+export declare const Caption1: FunctionComponent<TextWrapperProps>;
+
+export declare const caption1ClassNames: SlotClassNames<TextSlots>;
+
+/**
+ * Text wrapper component for the Caption2 typography variant
+ */
+export declare const Caption2: FunctionComponent<TextWrapperProps>;
+
+export declare const caption2ClassNames: SlotClassNames<TextSlots>;
+
+/**
+ * Text wrapper component for the Display typography variant
+ */
+export declare const Display: FunctionComponent<TextWrapperProps>;
+
+export declare const displayClassNames: SlotClassNames<TextSlots>;
+
+/**
+ * Text wrapper component for the Large Title typography variant
+ */
+export declare const LargeTitle: FunctionComponent<TextWrapperProps>;
+
+export declare const largeTitleClassNames: SlotClassNames<TextSlots>;
+
+/**
+ * Render the final JSX of Text
+ */
+export declare const renderText_unstable: (state: TextState) => JSX.Element;
+
+/**
+ * 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 Subtitle2: FunctionComponent<TextWrapperProps>;
+
+export declare const subtitle2ClassNames: SlotClassNames<TextSlots>;
+
+/**
+ * Typography and styling abstraction component used to ensure consistency of text.
+ */
+declare const Text_2: ForwardRefComponent<TextProps>;
+export { Text_2 as Text }
+
+export declare const textClassNames: SlotClassNames<TextSlots>;
+
+/**
+ * Text Props
+ */
+export declare type TextProps = ComponentProps<TextSlots> & {
+    /**
+     * Aligns text based on the parent container.
+     *
+     * @default start
+     */
+    align?: 'start' | 'center' | 'end' | 'justify';
+    /**
+     * Applies a block display for the content.
+     *
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Applies the font family to the content.
+     *
+     * @default base
+     */
+    font?: 'base' | 'monospace' | 'numeric';
+    /**
+     * Applies the italic font style to the content.
+     *
+     * @default false
+     */
+    italic?: boolean;
+    /**
+     * Applies font size and line height based on the theme tokens.
+     *
+     * @default 300
+     */
+    size?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000;
+    /**
+     * Applies the strikethrough text decoration to the content.
+     *
+     * @default false
+     */
+    strikethrough?: boolean;
+    /**
+     * Truncate overflowing text for block displays.
+     *
+     * @default false
+     */
+    truncate?: boolean;
+    /**
+     * Applies the underline text decoration to the content.
+     *
+     * @default false
+     */
+    underline?: boolean;
+    /**
+     * Applies font weight to the content.
+     *
+     * @default regular
+     */
+    weight?: 'regular' | 'medium' | 'semibold';
+    /**
+     * Wraps the text content on white spaces.
+     *
+     * @default true
+     */
+    wrap?: boolean;
+};
+
+/**
+ * Text slots
+ */
+export declare type TextSlots = {
+    root: Slot<'span', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'pre'>;
+};
+
+/**
+ * State used in rendering Text
+ */
+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'>;
+
+/**
+ * Text wrapper component for the Title 1 typography variant
+ */
+export declare const Title1: FunctionComponent<TextWrapperProps>;
+
+export declare const title1ClassNames: SlotClassNames<TextSlots>;
+
+/**
+ * Text wrapper component for the Title 2 typography variant
+ */
+export declare const Title2: FunctionComponent<TextWrapperProps>;
+
+export declare const title2ClassNames: SlotClassNames<TextSlots>;
+
+/**
+ * Text wrapper component for the Title 3 typography variant
+ */
+export declare const Title3: FunctionComponent<TextWrapperProps>;
+
+export declare const title3ClassNames: SlotClassNames<TextSlots>;
+
+/**
+ * Create the state required to render Text.
+ *
+ * The returned state can be modified with hooks such as useTextStyles_unstable,
+ * before being passed to renderText_unstable.
+ *
+ * @param props - props from this instance of Text
+ * @param ref - reference to root HTMLElement of Text
+ */
+export declare const useText_unstable: (props: TextProps, ref: React_2.Ref<HTMLElement>) => TextState;
+
+/**
+ * Apply styling to the Text slots based on the state
+ */
+export declare const useTextStyles_unstable: (state: TextState) => TextState;
+
+export { }

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,27 +1,31 @@
-import { __styles } from '@fluentui/react-make-styles';
-import { typographyStyles } from '../../typographyStyles/index';
+import { __styles } from '@griffel/react';
 import { createWrapper } from '../wrapper';
+import { typographyStyles } from '@fluentui/react-theme';
+export const displayClassNames = {
+  root: 'fui-Display'
+};
 /**
  * Styles for the root slot
  */
 
-var useStyles = /*#__PURE__*/__styles({
+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
  */
 
 
-export var Display = /*#__PURE__*/createWrapper({
-  useStyles: useStyles,
+export const Display = /*#__PURE__*/createWrapper({
+  useStyles,
+  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,6BAA3B;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,aAAT,QAAgD,YAAhD;AAEA;;AAEG;;AACH,IAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,IAAM,OAAO,gBAAwC,aAAa,CAAC;AAAE,EAAA,SAAS,EAAA,SAAX;AAAa,EAAA,WAAW,EAAE;AAA1B,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,27 +1,31 @@
-import { __styles } from '@fluentui/react-make-styles';
-import { typographyStyles } from '../../typographyStyles/index';
+import { __styles } from '@griffel/react';
 import { createWrapper } from '../wrapper';
+import { typographyStyles } from '@fluentui/react-theme';
+export const largeTitleClassNames = {
+  root: 'fui-LargeTitle'
+};
 /**
  * Styles for the root slot
  */
 
-var useStyles = /*#__PURE__*/__styles({
+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
  */
 
 
-export var LargeTitle = /*#__PURE__*/createWrapper({
-  useStyles: useStyles,
+export const LargeTitle = /*#__PURE__*/createWrapper({
+  useStyles,
+  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,6BAA3B;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,aAAT,QAAgD,YAAhD;AAEA;;AAEG;;AACH,IAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,IAAM,UAAU,gBAAwC,aAAa,CAAC;AAC3E,EAAA,SAAS,EAAA,SADkE;AAE3E,EAAA,WAAW,EAAE;AAF8D,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"]}

package/lib/components/Text/Text.js

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { useText } from './useText';
-import { renderText } from './renderText';
-import { useTextStyles } from './useTextStyles';
+import { useText_unstable } from './useText';
+import { renderText_unstable } from './renderText';
+import { useTextStyles_unstable } from './useTextStyles';
 /**
  * Typography and styling abstraction component used to ensure consistency of text.
  */
 
-export var Text = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var state = useText(props, ref);
-  useTextStyles(state);
-  return renderText(state); // Work around some small mismatches in inferred types which don't matter in practice
+export const Text = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useText_unstable(props, ref);
+  useTextStyles_unstable(state);
+  return renderText_unstable(state); // Work around some small mismatches in inferred types which don't matter in practice
 });
 Text.displayName = 'Text';
 //# sourceMappingURL=Text.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,OAAT,QAAwB,WAAxB;AACA,SAAS,UAAT,QAA2B,cAA3B;AACA,SAAS,aAAT,QAA8B,iBAA9B;AAIA;;AAEG;;AACH,OAAO,IAAM,IAAI,gBAAmC,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAC9E,MAAM,KAAK,GAAG,OAAO,CAAC,KAAD,EAAQ,GAAR,CAArB;AAEA,EAAA,aAAa,CAAC,KAAD,CAAb;AAEA,SAAO,UAAU,CAAC,KAAD,CAAjB,CAL8E,CAM9E;AACD,CAPmD,CAA7C;AASP,IAAI,CAAC,WAAL,GAAmB,MAAnB","sourceRoot":""}
+{"version":3,"sources":["components/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,QAAiC,WAAjC;AACA,SAAS,mBAAT,QAAoC,cAApC;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AAIA;;AAEG;;AACH,OAAO,MAAM,IAAI,gBAAmC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAClF,QAAM,KAAK,GAAG,gBAAgB,CAAC,KAAD,EAAQ,GAAR,CAA9B;AAEA,EAAA,sBAAsB,CAAC,KAAD,CAAtB;AAEA,SAAO,mBAAmB,CAAC,KAAD,CAA1B,CALkF,CAMlF;AACD,CAPmD,CAA7C;AASP,IAAI,CAAC,WAAL,GAAmB,MAAnB","sourcesContent":["import * as React from 'react';\nimport { useText_unstable } from './useText';\nimport { renderText_unstable } from './renderText';\nimport { useTextStyles_unstable } from './useTextStyles';\nimport type { TextProps } from './Text.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Typography and styling abstraction component used to ensure consistency of text.\n */\nexport const Text: ForwardRefComponent<TextProps> = React.forwardRef((props, ref) => {\n  const state = useText_unstable(props, ref);\n\n  useTextStyles_unstable(state);\n\n  return renderText_unstable(state);\n  // Work around some small mismatches in inferred types which don't matter in practice\n}) as ForwardRefComponent<TextProps>;\n\nText.displayName = 'Text';\n"],"sourceRoot":"../src/"}