@fluentui/react-text 0.0.0-nightlyf1be0a972820211214.1 → 0.0.0-nightlyf3017f159620220222.1

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

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

package/lib/components/Display/Display.js

@@ -1,4 +1,4 @@
-import { __styles } from '@fluentui/react-make-styles';
+import { __styles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper } from '../wrapper';
 export const displayClassName = 'fui-Display';

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,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,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/"}

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/Headline/Headline.js

@@ -1,4 +1,4 @@
-import { __styles } from '@fluentui/react-make-styles';
+import { __styles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper } from '../wrapper';
 export const headlineClassName = 'fui-Headline';

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Headline/Headline.tsx"],"names":[],"mappings":"AACA,yBAA2B,6BAA3B;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","sourceRoot":""}
+{"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/"}

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

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

package/lib/components/LargeTitle/LargeTitle.js

@@ -1,4 +1,4 @@
-import { __styles } from '@fluentui/react-make-styles';
+import { __styles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper } from '../wrapper';
 export const largeTitleClassName = 'fui-LargeTitle';

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,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,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/"}

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/Subheadline/Subheadline.js

@@ -1,4 +1,4 @@
-import { __styles } from '@fluentui/react-make-styles';
+import { __styles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper } from '../wrapper';
 export const subheadlineClassName = 'fui-Subheadline';

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Subheadline/Subheadline.tsx"],"names":[],"mappings":"AACA,yBAA2B,6BAA3B;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","sourceRoot":""}
+{"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/"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Subheadline/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Subheadline/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC","sourcesContent":["export * from './Subheadline';\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 const Text = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useText(props, ref);
-  useTextStyles(state);
-  return renderText(state); // Work around some small mismatches in inferred types which don't matter in practice
+  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,MAAM,IAAI,gBAAmC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAClF,QAAM,KAAK,GAAG,OAAO,CAAC,KAAD,EAAQ,GAAR,CAArB;AAEA,EAAA,aAAa,CAAC,KAAD,CAAb;AAEA,SAAO,UAAU,CAAC,KAAD,CAAjB,CALkF,CAMlF;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/"}

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

@@ -1,11 +1,11 @@
-import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 /**
  * Text slots
  */
 export declare type TextSlots = {
-    root: IntrinsicShorthandProps<'span', 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'pre'>;
+    root: Slot<'span', 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'pre'>;
 };
-export declare type TextCommons = {
+declare type TextCommons = {
     /**
      * Wraps the text content on white spaces.
      *
@@ -75,3 +75,4 @@ export declare type TextProps = ComponentProps<TextSlots> & Partial<TextCommons>
  * State used in rendering Text
  */
 export declare type TextState = ComponentState<TextSlots> & TextCommons;
+export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Text.types.js","sourceRoot":"","sources":["../../../src/components/Text/Text.types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"Text.types.js","sourceRoot":"../src/","sources":["components/Text/Text.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Text slots\n */\nexport type TextSlots = {\n  root: Slot<'span', 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'pre'>;\n};\n\ntype TextCommons = {\n  /**\n   * Wraps the text content on white spaces.\n   *\n   * @defaultValue true\n   */\n  wrap: boolean;\n\n  /**\n   * Truncate overflowing text for block displays.\n   *\n   * @defaultValue false\n   */\n  truncate: boolean;\n\n  /**\n   * Applies a block display for the content.\n   *\n   * @defaultValue false\n   */\n  block: boolean;\n\n  /**\n   * Applies the italic font style to the content.\n   *\n   * @defaultValue false\n   */\n  italic: boolean;\n\n  /**\n   * Applies the underline text decoration to the content.\n   *\n   * @defaultValue false\n   */\n  underline: boolean;\n\n  /**\n   * Applies the strikethrough text decoration to the content.\n   *\n   * @defaultValue false\n   */\n  strikethrough: boolean;\n\n  /**\n   * Applies font size and line height based on the theme tokens.\n   *\n   * @defaultValue 300\n   */\n  size: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000;\n\n  /**\n   * Applies the font family to the content.\n   *\n   * @defaultValue base\n   */\n  font: 'base' | 'monospace' | 'numeric';\n\n  /**\n   * Applies font weight to the content.\n   *\n   * @defaultValue regular\n   */\n  weight: 'regular' | 'medium' | 'semibold';\n\n  /**\n   * Aligns text based on the parent container.\n   *\n   * @defaultValue start\n   */\n  align: 'start' | 'center' | 'end' | 'justify';\n};\n\n/**\n * Text Props\n */\nexport type TextProps = ComponentProps<TextSlots> & Partial<TextCommons>;\n\n/**\n * State used in rendering Text\n */\nexport type TextState = ComponentState<TextSlots> & TextCommons;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Text/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Text/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC","sourcesContent":["export * from './Text';\nexport * from './Text.types';\nexport * from './renderText';\nexport * from './useText';\nexport * from './useTextStyles';\n"]}

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

@@ -2,4 +2,4 @@ import type { TextState } from './Text.types';
 /**
  * Render the final JSX of Text
  */
-export declare const renderText: (state: TextState) => JSX.Element;
+export declare const renderText_unstable: (state: TextState) => JSX.Element;

package/lib/components/Text/renderText.js

@@ -4,7 +4,7 @@ import { getSlots } from '@fluentui/react-utilities';
  * Render the final JSX of Text
  */
 
-export const renderText = state => {
+export const renderText_unstable = state => {
   const {
     slots,
     slotProps

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Text/renderText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,UAAU,GAAI,KAAD,IAAqB;AAC7C,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAY,KAAZ,CAArC;AAEA,sBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAAP;AACD,CAJM","sourceRoot":""}
+{"version":3,"sources":["components/Text/renderText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,mBAAmB,GAAI,KAAD,IAAqB;AACtD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAY,KAAZ,CAArC;AAEA,sBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAAP;AACD,CAJM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TextSlots, TextState } from './Text.types';\n\n/**\n * Render the final JSX of Text\n */\nexport const renderText_unstable = (state: TextState) => {\n  const { slots, slotProps } = getSlots<TextSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}

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

@@ -3,10 +3,10 @@ import type { TextProps, TextState } from './Text.types';
 /**
  * Create the state required to render Text.
  *
- * The returned state can be modified with hooks such as useTextStyles,
- * before being passed to renderText.
+ * 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: (props: TextProps, ref: React.Ref<HTMLElement>) => TextState;
+export declare const useText_unstable: (props: TextProps, ref: React.Ref<HTMLElement>) => TextState;

package/lib/components/Text/useText.js

@@ -2,14 +2,14 @@ import { getNativeElementProps } from '@fluentui/react-utilities';
 /**
  * Create the state required to render Text.
  *
- * The returned state can be modified with hooks such as useTextStyles,
- * before being passed to renderText.
+ * 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 const useText = (props, ref) => {
+export const useText_unstable = (props, ref) => {
   var _a;
 
   const {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Text/useText.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,OAAO,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAA6D;;;AAClF,QAAM;AAAE,IAAA,IAAF;AAAQ,IAAA,QAAR;AAAkB,IAAA,KAAlB;AAAyB,IAAA,MAAzB;AAAiC,IAAA,SAAjC;AAA4C,IAAA,aAA5C;AAA2D,IAAA,IAA3D;AAAiE,IAAA,IAAjE;AAAuE,IAAA,MAAvE;AAA+E,IAAA;AAA/E,MAAyF,KAA/F;AACA,QAAM,EAAE,GAAG,CAAA,EAAA,GAAA,KAAK,CAAC,EAAN,MAAQ,IAAR,IAAQ,EAAA,KAAA,KAAA,CAAR,GAAQ,EAAR,GAAY,MAAvB;AAEA,QAAM,KAAK,GAAc;AACvB,IAAA,IAAI,EAAE,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAA,IAAA,GAAQ,IADS;AAEvB,IAAA,QAAQ,EAAE,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAA,QAAA,GAAY,KAFC;AAGvB,IAAA,KAAK,EAAE,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAA,KAAA,GAAS,KAHO;AAIvB,IAAA,MAAM,EAAE,MAAM,KAAA,IAAN,IAAA,MAAM,KAAA,KAAA,CAAN,GAAA,MAAA,GAAU,KAJK;AAKvB,IAAA,SAAS,EAAE,SAAS,KAAA,IAAT,IAAA,SAAS,KAAA,KAAA,CAAT,GAAA,SAAA,GAAa,KALD;AAMvB,IAAA,aAAa,EAAE,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAA,aAAA,GAAiB,KANT;AAOvB,IAAA,IAAI,EAAE,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAA,IAAA,GAAQ,GAPS;AAQvB,IAAA,IAAI,EAAE,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAA,IAAA,GAAQ,MARS;AASvB,IAAA,MAAM,EAAE,MAAM,KAAA,IAAN,IAAA,MAAM,KAAA,KAAA,CAAN,GAAA,MAAA,GAAU,SATK;AAUvB,IAAA,KAAK,EAAE,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAA,KAAA,GAAS,OAVO;AAYvB,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE;AAAR,KAZW;AAcvB,IAAA,IAAI,EAAE,qBAAqB,CAAC,EAAD,EAAK;AAC9B,MAAA,GAD8B;AAE9B,SAAG,KAF2B;AAG9B,MAAA;AAH8B,KAAL;AAdJ,GAAzB;AAqBA,SAAO,KAAP;AACD,CA1BM","sourceRoot":""}
+{"version":3,"sources":["components/Text/useText.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,gBAAgB,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAA6D;;;AAC3F,QAAM;AAAE,IAAA,IAAF;AAAQ,IAAA,QAAR;AAAkB,IAAA,KAAlB;AAAyB,IAAA,MAAzB;AAAiC,IAAA,SAAjC;AAA4C,IAAA,aAA5C;AAA2D,IAAA,IAA3D;AAAiE,IAAA,IAAjE;AAAuE,IAAA,MAAvE;AAA+E,IAAA;AAA/E,MAAyF,KAA/F;AACA,QAAM,EAAE,GAAG,CAAA,EAAA,GAAA,KAAK,CAAC,EAAN,MAAQ,IAAR,IAAQ,EAAA,KAAA,KAAA,CAAR,GAAQ,EAAR,GAAY,MAAvB;AAEA,QAAM,KAAK,GAAc;AACvB,IAAA,IAAI,EAAE,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAA,IAAA,GAAQ,IADS;AAEvB,IAAA,QAAQ,EAAE,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAA,QAAA,GAAY,KAFC;AAGvB,IAAA,KAAK,EAAE,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAA,KAAA,GAAS,KAHO;AAIvB,IAAA,MAAM,EAAE,MAAM,KAAA,IAAN,IAAA,MAAM,KAAA,KAAA,CAAN,GAAA,MAAA,GAAU,KAJK;AAKvB,IAAA,SAAS,EAAE,SAAS,KAAA,IAAT,IAAA,SAAS,KAAA,KAAA,CAAT,GAAA,SAAA,GAAa,KALD;AAMvB,IAAA,aAAa,EAAE,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAA,aAAA,GAAiB,KANT;AAOvB,IAAA,IAAI,EAAE,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAA,IAAA,GAAQ,GAPS;AAQvB,IAAA,IAAI,EAAE,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAA,IAAA,GAAQ,MARS;AASvB,IAAA,MAAM,EAAE,MAAM,KAAA,IAAN,IAAA,MAAM,KAAA,KAAA,CAAN,GAAA,MAAA,GAAU,SATK;AAUvB,IAAA,KAAK,EAAE,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAA,KAAA,GAAS,OAVO;AAYvB,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE;AAAR,KAZW;AAcvB,IAAA,IAAI,EAAE,qBAAqB,CAAC,EAAD,EAAK;AAC9B,MAAA,GAD8B;AAE9B,SAAG,KAF2B;AAG9B,MAAA;AAH8B,KAAL;AAdJ,GAAzB;AAqBA,SAAO,KAAP;AACD,CA1BM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { TextProps, TextState } from './Text.types';\n\n/**\n * Create the state required to render Text.\n *\n * The returned state can be modified with hooks such as useTextStyles_unstable,\n * before being passed to renderText_unstable.\n *\n * @param props - props from this instance of Text\n * @param ref - reference to root HTMLElement of Text\n */\nexport const useText_unstable = (props: TextProps, ref: React.Ref<HTMLElement>): TextState => {\n  const { wrap, truncate, block, italic, underline, strikethrough, size, font, weight, align } = props;\n  const as = props.as ?? 'span';\n\n  const state: TextState = {\n    wrap: wrap ?? true,\n    truncate: truncate ?? false,\n    block: block ?? false,\n    italic: italic ?? false,\n    underline: underline ?? false,\n    strikethrough: strikethrough ?? false,\n    size: size ?? 300,\n    font: font ?? 'base',\n    weight: weight ?? 'regular',\n    align: align ?? 'start',\n\n    components: { root: 'span' },\n\n    root: getNativeElementProps(as, {\n      ref,\n      ...props,\n      as,\n    }),\n  };\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -3,4 +3,4 @@ export declare const textClassName = "fui-Text";
 /**
  * Apply styling to the Text slots based on the state
  */
-export declare const useTextStyles: (state: TextState) => TextState;
+export declare const useTextStyles_unstable: (state: TextState) => TextState;

package/lib/components/Text/useTextStyles.js

@@ -1,4 +1,5 @@
-import { __styles, mergeClasses, shorthands } from '@fluentui/react-make-styles';
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
 export const textClassName = 'fui-Text';
 /**
  * Styles for the root slot
@@ -105,7 +106,7 @@ const useStyles = /*#__PURE__*/__styles({
  */
 
 
-export const useTextStyles = state => {
+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);
   return state;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Text/useTextStyles.ts"],"names":[],"mappings":"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","sourceRoot":""}
+{"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/"}

package/lib/components/Title1/Title1.js

@@ -1,4 +1,4 @@
-import { __styles } from '@fluentui/react-make-styles';
+import { __styles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper } from '../wrapper';
 export const title1ClassName = 'fui-Title1';

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Title1/Title1.tsx"],"names":[],"mappings":"AACA,yBAA2B,6BAA3B;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","sourceRoot":""}
+{"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/"}

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

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

package/lib/components/Title2/Title2.js

@@ -1,4 +1,4 @@
-import { __styles } from '@fluentui/react-make-styles';
+import { __styles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper } from '../wrapper';
 export const title2ClassName = 'fui-Title2';

package/lib/components/Title2/Title2.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Title2/Title2.tsx"],"names":[],"mappings":"AACA,yBAA2B,6BAA3B;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","sourceRoot":""}
+{"version":3,"sources":["components/Title2/Title2.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 title2ClassName = 'fui-Title2';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: typographyStyles.title2,\n});\n\n/**\n * Text wrapper component for the Title 2 typography variant\n */\nexport const Title2: FunctionComponent<TextWrapperProps> = createWrapper({\n  useStyles,\n  className: title2ClassName,\n  displayName: 'Title2',\n});\n"],"sourceRoot":"../src/"}

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

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

package/lib/components/Title3/Title3.js

@@ -1,4 +1,4 @@
-import { __styles } from '@fluentui/react-make-styles';
+import { __styles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper } from '../wrapper';
 export const title3ClassName = 'fui-Title3';

package/lib/components/Title3/Title3.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Title3/Title3.tsx"],"names":[],"mappings":"AACA,yBAA2B,6BAA3B;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","sourceRoot":""}
+{"version":3,"sources":["components/Title3/Title3.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 title3ClassName = 'fui-Title3';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: typographyStyles.title3,\n});\n\n/**\n * Text wrapper component for the Title 3 typography variant\n */\nexport const Title3: FunctionComponent<TextWrapperProps> = createWrapper({\n  useStyles,\n  className: title3ClassName,\n  displayName: 'Title3',\n});\n"],"sourceRoot":"../src/"}

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

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

package/lib/components/wrapper.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { mergeClasses } from '@fluentui/react-make-styles';
-import { renderText, useText, useTextStyles } from '../Text';
+import { mergeClasses } from '@griffel/react';
+import { renderText_unstable, useText_unstable, useTextStyles_unstable } from '../Text';
 export function createWrapper(options) {
   const {
     useStyles,
@@ -9,10 +9,10 @@ export function createWrapper(options) {
   } = options;
   const Wrapper = /*#__PURE__*/React.forwardRef((props, ref) => {
     const styles = useStyles();
-    const state = useText(props, ref);
-    useTextStyles(state);
+    const state = useText_unstable(props, ref);
+    useTextStyles_unstable(state);
     state.root.className = mergeClasses(className, state.root.className, styles.root, props.className);
-    return renderText(state);
+    return renderText_unstable(state);
   });
   Wrapper.displayName = displayName;
   return Wrapper;

package/lib/components/wrapper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/wrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,YAAT,QAA6B,6BAA7B;AACA,SAAS,UAAT,EAAqB,OAArB,EAA8B,aAA9B,QAAmD,SAAnD;AAMA,OAAM,SAAU,aAAV,CAAwB,OAAxB,EAIL;AACC,QAAM;AAAE,IAAA,SAAF;AAAa,IAAA,SAAb;AAAwB,IAAA;AAAxB,MAAwC,OAA9C;AACA,QAAM,OAAO,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACrF,UAAM,MAAM,GAAG,SAAS,EAAxB;AACA,UAAM,KAAK,GAAG,OAAO,CAAC,KAAD,EAAqB,GAArB,CAArB;AAEA,IAAA,aAAa,CAAC,KAAD,CAAb;AAEA,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,SAAD,EAAY,KAAK,CAAC,IAAN,CAAW,SAAvB,EAAkC,MAAM,CAAC,IAAzC,EAA+C,KAAK,CAAC,SAArD,CAAnC;AAEA,WAAO,UAAU,CAAC,KAAD,CAAjB;AACD,GATsD,CAAvD;AAUA,EAAA,OAAO,CAAC,WAAR,GAAsB,WAAtB;AAEA,SAAO,OAAP;AACD","sourceRoot":""}
+{"version":3,"sources":["components/wrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,YAAT,QAA6B,gBAA7B;AACA,SAAS,mBAAT,EAA8B,gBAA9B,EAAgD,sBAAhD,QAA8E,SAA9E;AAMA,OAAM,SAAU,aAAV,CAAwB,OAAxB,EAIL;AACC,QAAM;AAAE,IAAA,SAAF;AAAa,IAAA,SAAb;AAAwB,IAAA;AAAxB,MAAwC,OAA9C;AACA,QAAM,OAAO,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACrF,UAAM,MAAM,GAAG,SAAS,EAAxB;AACA,UAAM,KAAK,GAAG,gBAAgB,CAAC,KAAD,EAAqB,GAArB,CAA9B;AAEA,IAAA,sBAAsB,CAAC,KAAD,CAAtB;AAEA,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,SAAD,EAAY,KAAK,CAAC,IAAN,CAAW,SAAvB,EAAkC,MAAM,CAAC,IAAzC,EAA+C,KAAK,CAAC,SAArD,CAAnC;AAEA,WAAO,mBAAmB,CAAC,KAAD,CAA1B;AACD,GATsD,CAAvD;AAUA,EAAA,OAAO,CAAC,WAAR,GAAsB,WAAtB;AAEA,SAAO,OAAP;AACD","sourcesContent":["import * as React from 'react';\nimport { mergeClasses } from '@griffel/react';\nimport { renderText_unstable, useText_unstable, useTextStyles_unstable } from '../Text';\nimport type { TextProps } from '../Text';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nexport type TextWrapperProps = Omit<TextProps, 'font' | 'size'>;\n\nexport function createWrapper(options: {\n  className: string;\n  displayName: string;\n  useStyles: () => Record<'root', string>;\n}): React.FunctionComponent<TextWrapperProps> {\n  const { useStyles, className, displayName } = options;\n  const Wrapper: ForwardRefComponent<TextWrapperProps> = React.forwardRef((props, ref) => {\n    const styles = useStyles();\n    const state = useText_unstable(props as TextProps, ref);\n\n    useTextStyles_unstable(state);\n\n    state.root.className = mergeClasses(className, state.root.className, styles.root, props.className);\n\n    return renderText_unstable(state);\n  });\n  Wrapper.displayName = displayName;\n\n  return Wrapper;\n}\n"],"sourceRoot":"../src/"}

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC","sourcesContent":["export * from './Text';\nexport * from './Display';\nexport * from './LargeTitle';\nexport * from './Title1';\nexport * from './Title2';\nexport * from './Title3';\nexport * from './Headline';\nexport * from './Subheadline';\nexport * from './Body';\nexport * from './Caption';\n"]}

package/lib/typographyStyles/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/typographyStyles/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,gBAAgB,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["typographyStyles/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,gBAAgB,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,CAAC","sourcesContent":["import * as typographyStyles from './typographyStyles';\nexport { typographyStyles };\n"]}

package/lib/typographyStyles/typographyStyles.d.ts

@@ -1,14 +1,13 @@
-import type { MakeStylesStyleFunctionRule } from '@fluentui/react-make-styles';
-import type { Theme } from '@fluentui/react-theme';
+import type { GriffelStyle } from '@griffel/react';
 /**
  * Make-styles rules for the typography variants
  */
-export declare const caption: MakeStylesStyleFunctionRule<Theme>;
-export declare const body: MakeStylesStyleFunctionRule<Theme>;
-export declare const subheadline: MakeStylesStyleFunctionRule<Theme>;
-export declare const headline: MakeStylesStyleFunctionRule<Theme>;
-export declare const title3: MakeStylesStyleFunctionRule<Theme>;
-export declare const title2: MakeStylesStyleFunctionRule<Theme>;
-export declare const title1: MakeStylesStyleFunctionRule<Theme>;
-export declare const largeTitle: MakeStylesStyleFunctionRule<Theme>;
-export declare const display: MakeStylesStyleFunctionRule<Theme>;
+export declare const caption: GriffelStyle;
+export declare const body: GriffelStyle;
+export declare const subheadline: GriffelStyle;
+export declare const headline: GriffelStyle;
+export declare const title3: GriffelStyle;
+export declare const title2: GriffelStyle;
+export declare const title1: GriffelStyle;
+export declare const largeTitle: GriffelStyle;
+export declare const display: GriffelStyle;

package/lib/typographyStyles/typographyStyles.js

@@ -1,58 +1,60 @@
+import { tokens } from '@fluentui/react-theme';
 /**
  * Make-styles rules for the typography variants
  */
-export const caption = theme => ({
-  fontFamily: theme.fontFamilyBase,
-  fontSize: theme.fontSizeBase200,
-  lineHeight: theme.lineHeightBase200,
-  fontWeight: theme.fontWeightRegular
-});
-export const body = theme => ({
-  fontFamily: theme.fontFamilyBase,
-  fontSize: theme.fontSizeBase300,
-  lineHeight: theme.lineHeightBase300,
-  fontWeight: theme.fontWeightRegular
-});
-export const subheadline = theme => ({
-  fontFamily: theme.fontFamilyBase,
-  fontSize: theme.fontSizeBase400,
-  lineHeight: theme.lineHeightBase400,
-  fontWeight: theme.fontWeightSemibold
-});
-export const headline = theme => ({
-  fontFamily: theme.fontFamilyBase,
-  fontSize: theme.fontSizeBase500,
-  lineHeight: theme.lineHeightBase500,
-  fontWeight: theme.fontWeightSemibold
-});
-export const title3 = theme => ({
-  fontFamily: theme.fontFamilyBase,
-  fontSize: theme.fontSizeBase600,
-  lineHeight: theme.lineHeightBase600,
-  fontWeight: theme.fontWeightSemibold
-});
-export const title2 = theme => ({
-  fontFamily: theme.fontFamilyBase,
-  fontSize: theme.fontSizeHero700,
-  lineHeight: theme.lineHeightHero700,
-  fontWeight: theme.fontWeightSemibold
-});
-export const title1 = theme => ({
-  fontFamily: theme.fontFamilyBase,
-  fontSize: theme.fontSizeHero800,
-  lineHeight: theme.lineHeightHero800,
-  fontWeight: theme.fontWeightSemibold
-});
-export const largeTitle = theme => ({
-  fontFamily: theme.fontFamilyBase,
-  fontSize: theme.fontSizeHero900,
-  lineHeight: theme.lineHeightHero900,
-  fontWeight: theme.fontWeightSemibold
-});
-export const display = theme => ({
-  fontFamily: theme.fontFamilyBase,
-  fontSize: theme.fontSizeHero1000,
-  lineHeight: theme.lineHeightHero1000,
-  fontWeight: theme.fontWeightSemibold
-});
+
+export const caption = {
+  fontFamily: tokens.fontFamilyBase,
+  fontSize: tokens.fontSizeBase200,
+  lineHeight: tokens.lineHeightBase200,
+  fontWeight: tokens.fontWeightRegular
+};
+export const body = {
+  fontFamily: tokens.fontFamilyBase,
+  fontSize: tokens.fontSizeBase300,
+  lineHeight: tokens.lineHeightBase300,
+  fontWeight: tokens.fontWeightRegular
+};
+export const subheadline = {
+  fontFamily: tokens.fontFamilyBase,
+  fontSize: tokens.fontSizeBase400,
+  lineHeight: tokens.lineHeightBase400,
+  fontWeight: tokens.fontWeightSemibold
+};
+export const headline = {
+  fontFamily: tokens.fontFamilyBase,
+  fontSize: tokens.fontSizeBase500,
+  lineHeight: tokens.lineHeightBase500,
+  fontWeight: tokens.fontWeightSemibold
+};
+export const title3 = {
+  fontFamily: tokens.fontFamilyBase,
+  fontSize: tokens.fontSizeBase600,
+  lineHeight: tokens.lineHeightBase600,
+  fontWeight: tokens.fontWeightSemibold
+};
+export const title2 = {
+  fontFamily: tokens.fontFamilyBase,
+  fontSize: tokens.fontSizeHero700,
+  lineHeight: tokens.lineHeightHero700,
+  fontWeight: tokens.fontWeightSemibold
+};
+export const title1 = {
+  fontFamily: tokens.fontFamilyBase,
+  fontSize: tokens.fontSizeHero800,
+  lineHeight: tokens.lineHeightHero800,
+  fontWeight: tokens.fontWeightSemibold
+};
+export const largeTitle = {
+  fontFamily: tokens.fontFamilyBase,
+  fontSize: tokens.fontSizeHero900,
+  lineHeight: tokens.lineHeightHero900,
+  fontWeight: tokens.fontWeightSemibold
+};
+export const display = {
+  fontFamily: tokens.fontFamilyBase,
+  fontSize: tokens.fontSizeHero1000,
+  lineHeight: tokens.lineHeightHero1000,
+  fontWeight: tokens.fontWeightSemibold
+};
 //# sourceMappingURL=typographyStyles.js.map

package/lib/typographyStyles/typographyStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/typographyStyles/typographyStyles.ts"],"names":[],"mappings":"AAGA;;AAEG;AACH,OAAO,MAAM,OAAO,GAAuC,KAAK,KAAK;AACnE,EAAA,UAAU,EAAE,KAAK,CAAC,cADiD;AAEnE,EAAA,QAAQ,EAAE,KAAK,CAAC,eAFmD;AAGnE,EAAA,UAAU,EAAE,KAAK,CAAC,iBAHiD;AAInE,EAAA,UAAU,EAAE,KAAK,CAAC;AAJiD,CAAL,CAAzD;AAMP,OAAO,MAAM,IAAI,GAAuC,KAAK,KAAK;AAChE,EAAA,UAAU,EAAE,KAAK,CAAC,cAD8C;AAEhE,EAAA,QAAQ,EAAE,KAAK,CAAC,eAFgD;AAGhE,EAAA,UAAU,EAAE,KAAK,CAAC,iBAH8C;AAIhE,EAAA,UAAU,EAAE,KAAK,CAAC;AAJ8C,CAAL,CAAtD;AAMP,OAAO,MAAM,WAAW,GAAuC,KAAK,KAAK;AACvE,EAAA,UAAU,EAAE,KAAK,CAAC,cADqD;AAEvE,EAAA,QAAQ,EAAE,KAAK,CAAC,eAFuD;AAGvE,EAAA,UAAU,EAAE,KAAK,CAAC,iBAHqD;AAIvE,EAAA,UAAU,EAAE,KAAK,CAAC;AAJqD,CAAL,CAA7D;AAMP,OAAO,MAAM,QAAQ,GAAuC,KAAK,KAAK;AACpE,EAAA,UAAU,EAAE,KAAK,CAAC,cADkD;AAEpE,EAAA,QAAQ,EAAE,KAAK,CAAC,eAFoD;AAGpE,EAAA,UAAU,EAAE,KAAK,CAAC,iBAHkD;AAIpE,EAAA,UAAU,EAAE,KAAK,CAAC;AAJkD,CAAL,CAA1D;AAMP,OAAO,MAAM,MAAM,GAAuC,KAAK,KAAK;AAClE,EAAA,UAAU,EAAE,KAAK,CAAC,cADgD;AAElE,EAAA,QAAQ,EAAE,KAAK,CAAC,eAFkD;AAGlE,EAAA,UAAU,EAAE,KAAK,CAAC,iBAHgD;AAIlE,EAAA,UAAU,EAAE,KAAK,CAAC;AAJgD,CAAL,CAAxD;AAMP,OAAO,MAAM,MAAM,GAAuC,KAAK,KAAK;AAClE,EAAA,UAAU,EAAE,KAAK,CAAC,cADgD;AAElE,EAAA,QAAQ,EAAE,KAAK,CAAC,eAFkD;AAGlE,EAAA,UAAU,EAAE,KAAK,CAAC,iBAHgD;AAIlE,EAAA,UAAU,EAAE,KAAK,CAAC;AAJgD,CAAL,CAAxD;AAMP,OAAO,MAAM,MAAM,GAAuC,KAAK,KAAK;AAClE,EAAA,UAAU,EAAE,KAAK,CAAC,cADgD;AAElE,EAAA,QAAQ,EAAE,KAAK,CAAC,eAFkD;AAGlE,EAAA,UAAU,EAAE,KAAK,CAAC,iBAHgD;AAIlE,EAAA,UAAU,EAAE,KAAK,CAAC;AAJgD,CAAL,CAAxD;AAMP,OAAO,MAAM,UAAU,GAAuC,KAAK,KAAK;AACtE,EAAA,UAAU,EAAE,KAAK,CAAC,cADoD;AAEtE,EAAA,QAAQ,EAAE,KAAK,CAAC,eAFsD;AAGtE,EAAA,UAAU,EAAE,KAAK,CAAC,iBAHoD;AAItE,EAAA,UAAU,EAAE,KAAK,CAAC;AAJoD,CAAL,CAA5D;AAMP,OAAO,MAAM,OAAO,GAAuC,KAAK,KAAK;AACnE,EAAA,UAAU,EAAE,KAAK,CAAC,cADiD;AAEnE,EAAA,QAAQ,EAAE,KAAK,CAAC,gBAFmD;AAGnE,EAAA,UAAU,EAAE,KAAK,CAAC,kBAHiD;AAInE,EAAA,UAAU,EAAE,KAAK,CAAC;AAJiD,CAAL,CAAzD","sourceRoot":""}
+{"version":3,"sources":["typographyStyles/typographyStyles.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,QAAuB,uBAAvB;AAGA;;AAEG;;AACH,OAAO,MAAM,OAAO,GAAiB;AACnC,EAAA,UAAU,EAAE,MAAM,CAAC,cADgB;AAEnC,EAAA,QAAQ,EAAE,MAAM,CAAC,eAFkB;AAGnC,EAAA,UAAU,EAAE,MAAM,CAAC,iBAHgB;AAInC,EAAA,UAAU,EAAE,MAAM,CAAC;AAJgB,CAA9B;AAMP,OAAO,MAAM,IAAI,GAAiB;AAChC,EAAA,UAAU,EAAE,MAAM,CAAC,cADa;AAEhC,EAAA,QAAQ,EAAE,MAAM,CAAC,eAFe;AAGhC,EAAA,UAAU,EAAE,MAAM,CAAC,iBAHa;AAIhC,EAAA,UAAU,EAAE,MAAM,CAAC;AAJa,CAA3B;AAMP,OAAO,MAAM,WAAW,GAAiB;AACvC,EAAA,UAAU,EAAE,MAAM,CAAC,cADoB;AAEvC,EAAA,QAAQ,EAAE,MAAM,CAAC,eAFsB;AAGvC,EAAA,UAAU,EAAE,MAAM,CAAC,iBAHoB;AAIvC,EAAA,UAAU,EAAE,MAAM,CAAC;AAJoB,CAAlC;AAMP,OAAO,MAAM,QAAQ,GAAiB;AACpC,EAAA,UAAU,EAAE,MAAM,CAAC,cADiB;AAEpC,EAAA,QAAQ,EAAE,MAAM,CAAC,eAFmB;AAGpC,EAAA,UAAU,EAAE,MAAM,CAAC,iBAHiB;AAIpC,EAAA,UAAU,EAAE,MAAM,CAAC;AAJiB,CAA/B;AAMP,OAAO,MAAM,MAAM,GAAiB;AAClC,EAAA,UAAU,EAAE,MAAM,CAAC,cADe;AAElC,EAAA,QAAQ,EAAE,MAAM,CAAC,eAFiB;AAGlC,EAAA,UAAU,EAAE,MAAM,CAAC,iBAHe;AAIlC,EAAA,UAAU,EAAE,MAAM,CAAC;AAJe,CAA7B;AAMP,OAAO,MAAM,MAAM,GAAiB;AAClC,EAAA,UAAU,EAAE,MAAM,CAAC,cADe;AAElC,EAAA,QAAQ,EAAE,MAAM,CAAC,eAFiB;AAGlC,EAAA,UAAU,EAAE,MAAM,CAAC,iBAHe;AAIlC,EAAA,UAAU,EAAE,MAAM,CAAC;AAJe,CAA7B;AAMP,OAAO,MAAM,MAAM,GAAiB;AAClC,EAAA,UAAU,EAAE,MAAM,CAAC,cADe;AAElC,EAAA,QAAQ,EAAE,MAAM,CAAC,eAFiB;AAGlC,EAAA,UAAU,EAAE,MAAM,CAAC,iBAHe;AAIlC,EAAA,UAAU,EAAE,MAAM,CAAC;AAJe,CAA7B;AAMP,OAAO,MAAM,UAAU,GAAiB;AACtC,EAAA,UAAU,EAAE,MAAM,CAAC,cADmB;AAEtC,EAAA,QAAQ,EAAE,MAAM,CAAC,eAFqB;AAGtC,EAAA,UAAU,EAAE,MAAM,CAAC,iBAHmB;AAItC,EAAA,UAAU,EAAE,MAAM,CAAC;AAJmB,CAAjC;AAMP,OAAO,MAAM,OAAO,GAAiB;AACnC,EAAA,UAAU,EAAE,MAAM,CAAC,cADgB;AAEnC,EAAA,QAAQ,EAAE,MAAM,CAAC,gBAFkB;AAGnC,EAAA,UAAU,EAAE,MAAM,CAAC,kBAHgB;AAInC,EAAA,UAAU,EAAE,MAAM,CAAC;AAJgB,CAA9B","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport type { GriffelStyle } from '@griffel/react';\n\n/**\n * Make-styles rules for the typography variants\n */\nexport const caption: GriffelStyle = {\n  fontFamily: tokens.fontFamilyBase,\n  fontSize: tokens.fontSizeBase200,\n  lineHeight: tokens.lineHeightBase200,\n  fontWeight: tokens.fontWeightRegular,\n};\nexport const body: GriffelStyle = {\n  fontFamily: tokens.fontFamilyBase,\n  fontSize: tokens.fontSizeBase300,\n  lineHeight: tokens.lineHeightBase300,\n  fontWeight: tokens.fontWeightRegular,\n};\nexport const subheadline: GriffelStyle = {\n  fontFamily: tokens.fontFamilyBase,\n  fontSize: tokens.fontSizeBase400,\n  lineHeight: tokens.lineHeightBase400,\n  fontWeight: tokens.fontWeightSemibold,\n};\nexport const headline: GriffelStyle = {\n  fontFamily: tokens.fontFamilyBase,\n  fontSize: tokens.fontSizeBase500,\n  lineHeight: tokens.lineHeightBase500,\n  fontWeight: tokens.fontWeightSemibold,\n};\nexport const title3: GriffelStyle = {\n  fontFamily: tokens.fontFamilyBase,\n  fontSize: tokens.fontSizeBase600,\n  lineHeight: tokens.lineHeightBase600,\n  fontWeight: tokens.fontWeightSemibold,\n};\nexport const title2: GriffelStyle = {\n  fontFamily: tokens.fontFamilyBase,\n  fontSize: tokens.fontSizeHero700,\n  lineHeight: tokens.lineHeightHero700,\n  fontWeight: tokens.fontWeightSemibold,\n};\nexport const title1: GriffelStyle = {\n  fontFamily: tokens.fontFamilyBase,\n  fontSize: tokens.fontSizeHero800,\n  lineHeight: tokens.lineHeightHero800,\n  fontWeight: tokens.fontWeightSemibold,\n};\nexport const largeTitle: GriffelStyle = {\n  fontFamily: tokens.fontFamilyBase,\n  fontSize: tokens.fontSizeHero900,\n  lineHeight: tokens.lineHeightHero900,\n  fontWeight: tokens.fontWeightSemibold,\n};\nexport const display: GriffelStyle = {\n  fontFamily: tokens.fontFamilyBase,\n  fontSize: tokens.fontSizeHero1000,\n  lineHeight: tokens.lineHeightHero1000,\n  fontWeight: tokens.fontWeightSemibold,\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/Body.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Body.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,yBAAA,CAAA,EAAA,OAAA","sourceRoot":""}
+{"version":3,"sources":["Body.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,yBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Body/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/Caption.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Caption.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA","sourceRoot":""}
+{"version":3,"sources":["Caption.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Caption/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/Display.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Display.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA","sourceRoot":""}
+{"version":3,"sources":["Display.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Display/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/Headline.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Headline.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,6BAAA,CAAA,EAAA,OAAA","sourceRoot":""}
+{"version":3,"sources":["Headline.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,6BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Headline/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/LargeTitle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/LargeTitle.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,+BAAA,CAAA,EAAA,OAAA","sourceRoot":""}
+{"version":3,"sources":["LargeTitle.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,+BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/LargeTitle/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/Subheadline.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Subheadline.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gCAAA,CAAA,EAAA,OAAA","sourceRoot":""}
+{"version":3,"sources":["Subheadline.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Subheadline/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/Text.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Text.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,yBAAA,CAAA,EAAA,OAAA","sourceRoot":""}
+{"version":3,"sources":["Text.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,yBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Text/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/Title1.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Title1.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA","sourceRoot":""}
+{"version":3,"sources":["Title1.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Title1/index';\n"],"sourceRoot":"../src/"}