@fluentui/react-text 9.0.0-alpha.9 → 9.0.0-beta.4

package/lib/components/Text/useTextStyles.js

@@ -1,14 +1,15 @@
 import { __styles, mergeClasses } from '@fluentui/react-make-styles';
+export const textClassName = 'fui-Text';
 /**
  * Styles for the root slot
  */
 
-var useStyles = /*#__PURE__*/__styles({
+const useStyles = /*#__PURE__*/__styles({
   "root": {
-    "Bahqtrf": "f1kx028l",
-    "Be2twd7": "flcnb0",
-    "Bg96gwp": "f1syuwty",
-    "Bhrd7zp": "f1du0uop",
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "fkhj508",
+    "Bg96gwp": "f1i3iumi",
+    "Bhrd7zp": "figsok6",
     "fsow6f": "fpgzoln",
     "mc9l5x": "f1w7gpdv",
     "Huce71": "f6juhto",
@@ -38,52 +39,52 @@ var useStyles = /*#__PURE__*/__styles({
     "dwov6y": "f13legbo"
   },
   "base100": {
-    "Be2twd7": "f13f9tl5",
-    "Bg96gwp": "f1afc3pw"
+    "Be2twd7": "f13mqy1h",
+    "Bg96gwp": "fcpl73t"
   },
   "base200": {
-    "Be2twd7": "ft25vac",
-    "Bg96gwp": "f6u047o"
+    "Be2twd7": "fy9rknc",
+    "Bg96gwp": "fwrc4pm"
   },
   "base400": {
-    "Be2twd7": "f1y5x3qd",
-    "Bg96gwp": "f1r32vcg"
+    "Be2twd7": "fod5ikn",
+    "Bg96gwp": "faaz57k"
   },
   "base500": {
-    "Be2twd7": "fyhtp3d",
-    "Bg96gwp": "f5biviy"
+    "Be2twd7": "f1pp30po",
+    "Bg96gwp": "f106mvju"
   },
   "base600": {
-    "Be2twd7": "f4boefw",
-    "Bg96gwp": "f14n33p9"
+    "Be2twd7": "f1x0m3f5",
+    "Bg96gwp": "fb86gi6"
   },
   "hero700": {
-    "Be2twd7": "f1hydpcw",
-    "Bg96gwp": "fnqitsm"
+    "Be2twd7": "fojgt09",
+    "Bg96gwp": "fcen8rp"
   },
   "hero800": {
-    "Be2twd7": "fhm3ba7",
-    "Bg96gwp": "f171aabn"
+    "Be2twd7": "fccw675",
+    "Bg96gwp": "f1ebx5kk"
   },
   "hero900": {
-    "Be2twd7": "fsnqw2a",
-    "Bg96gwp": "f1iavbok"
+    "Be2twd7": "f15afnhw",
+    "Bg96gwp": "fr3w3wp"
   },
   "hero1000": {
-    "Be2twd7": "f9gixcf",
-    "Bg96gwp": "f123viq0"
+    "Be2twd7": "fpyltcb",
+    "Bg96gwp": "f1ivgwrt"
   },
   "monospace": {
-    "Bahqtrf": "fr87dsh"
+    "Bahqtrf": "f1fedwem"
   },
   "numeric": {
-    "Bahqtrf": "f1hn491d"
+    "Bahqtrf": "f1uq0ln5"
   },
   "weightMedium": {
-    "Bhrd7zp": "f1ac3mzv"
+    "Bhrd7zp": "fdj6btp"
   },
   "weightSemibold": {
-    "Bhrd7zp": "fss2gpl"
+    "Bhrd7zp": "fl43uef"
   },
   "alignCenter": {
     "fsow6f": "f17mccla"
@@ -95,16 +96,16 @@ var useStyles = /*#__PURE__*/__styles({
     "fsow6f": "f1j59e10"
   }
 }, {
-  "d": [".f1kx028l{font-family:var(--global-type-fontFamilies-base);}", ".flcnb0{font-size:var(--global-type-fontSizes-base-300);}", ".f1syuwty{line-height:var(--global-type-lineHeights-base-300);}", ".f1du0uop{font-weight:var(--global-type-fontWeights-regular);}", ".fpgzoln{text-align:start;}", ".f1w7gpdv{display:inline;}", ".f6juhto{white-space:normal;}", ".f1gl81tg{overflow:visible;}", ".f2jf649{text-overflow:clip;}", ".fz5stix{white-space:nowrap;}", ".f1a3p1vp{overflow:hidden;}", ".f1cmbuwj{text-overflow:ellipsis;}", ".ftgm304{display:block;}", ".f1j4dglz{font-style:italic;}", ".fctto54{-webkit-text-decoration:underline;text-decoration:underline;}", ".f1y2xhd0{-webkit-text-decoration:line-through;text-decoration:line-through;}", ".f13legbo{-webkit-text-decoration:line-through underline;text-decoration:line-through underline;}", ".f13f9tl5{font-size:var(--global-type-fontSizes-base-100);}", ".f1afc3pw{line-height:var(--global-type-lineHeights-base-100);}", ".ft25vac{font-size:var(--global-type-fontSizes-base-200);}", ".f6u047o{line-height:var(--global-type-lineHeights-base-200);}", ".f1y5x3qd{font-size:var(--global-type-fontSizes-base-400);}", ".f1r32vcg{line-height:var(--global-type-lineHeights-base-400);}", ".fyhtp3d{font-size:var(--global-type-fontSizes-base-500);}", ".f5biviy{line-height:var(--global-type-lineHeights-base-500);}", ".f4boefw{font-size:var(--global-type-fontSizes-base-600);}", ".f14n33p9{line-height:var(--global-type-lineHeights-base-600);}", ".f1hydpcw{font-size:var(--global-type-fontSizes-hero-700);}", ".fnqitsm{line-height:var(--global-type-lineHeights-hero-700);}", ".fhm3ba7{font-size:var(--global-type-fontSizes-hero-800);}", ".f171aabn{line-height:var(--global-type-lineHeights-hero-800);}", ".fsnqw2a{font-size:var(--global-type-fontSizes-hero-900);}", ".f1iavbok{line-height:var(--global-type-lineHeights-hero-900);}", ".f9gixcf{font-size:var(--global-type-fontSizes-hero-1000);}", ".f123viq0{line-height:var(--global-type-lineHeights-hero-1000);}", ".fr87dsh{font-family:var(--global-type-fontFamilies-monospace);}", ".f1hn491d{font-family:var(--global-type-fontFamilies-numeric);}", ".f1ac3mzv{font-weight:var(--global-type-fontWeights-medium);}", ".fss2gpl{font-weight:var(--global-type-fontWeights-semibold);}", ".f17mccla{text-align:center;}", ".f12ymhq5{text-align:end;}", ".f1j59e10{text-align:justify;}"]
+  "d": [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fpgzoln{text-align:start;}", ".f1w7gpdv{display:inline;}", ".f6juhto{white-space:normal;}", ".f1gl81tg{overflow:visible;}", ".f2jf649{text-overflow:clip;}", ".fz5stix{white-space:nowrap;}", ".f1a3p1vp{overflow:hidden;}", ".f1cmbuwj{text-overflow:ellipsis;}", ".ftgm304{display:block;}", ".f1j4dglz{font-style:italic;}", ".fctto54{-webkit-text-decoration:underline;text-decoration:underline;}", ".f1y2xhd0{-webkit-text-decoration:line-through;text-decoration:line-through;}", ".f13legbo{-webkit-text-decoration:line-through underline;text-decoration:line-through underline;}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".f1x0m3f5{font-size:var(--fontSizeBase600);}", ".fb86gi6{line-height:var(--lineHeightBase600);}", ".fojgt09{font-size:var(--fontSizeHero700);}", ".fcen8rp{line-height:var(--lineHeightHero700);}", ".fccw675{font-size:var(--fontSizeHero800);}", ".f1ebx5kk{line-height:var(--lineHeightHero800);}", ".f15afnhw{font-size:var(--fontSizeHero900);}", ".fr3w3wp{line-height:var(--lineHeightHero900);}", ".fpyltcb{font-size:var(--fontSizeHero1000);}", ".f1ivgwrt{line-height:var(--lineHeightHero1000);}", ".f1fedwem{font-family:var(--fontFamilyMonospace);}", ".f1uq0ln5{font-family:var(--fontFamilyNumeric);}", ".fdj6btp{font-weight:var(--fontWeightMedium);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f17mccla{text-align:center;}", ".f12ymhq5{text-align:end;}", ".f1j59e10{text-align:justify;}"]
 });
 /**
  * Apply styling to the Text slots based on the state
  */
 
 
-export var useTextStyles = function (state) {
-  var styles = useStyles();
-  state.className = mergeClasses(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.className);
+export const useTextStyles = 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;
 };
 //# sourceMappingURL=useTextStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Text/useTextStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,6BAAzC;AAGA;;AAEG;;AACH,IAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AA6FA;;AAEG;;;AACH,OAAO,IAAM,aAAa,GAAG,UAAC,KAAD,EAAiB;AAC5C,MAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,SAAN,GAAkB,YAAY,CAC5B,MAAM,CAAC,IADqB,EAE5B,KAAK,CAAC,IAAN,KAAe,KAAf,IAAwB,MAAM,CAAC,MAFH,EAG5B,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAHG,EAI5B,KAAK,CAAC,KAAN,IAAe,MAAM,CAAC,KAJM,EAK5B,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,MALK,EAM5B,KAAK,CAAC,SAAN,IAAmB,MAAM,CAAC,SANE,EAO5B,KAAK,CAAC,aAAN,IAAuB,MAAM,CAAC,aAPF,EAQ5B,KAAK,CAAC,SAAN,IAAmB,KAAK,CAAC,aAAzB,IAA0C,MAAM,CAAC,sBARrB,EAS5B,KAAK,CAAC,IAAN,KAAe,GAAf,IAAsB,MAAM,CAAC,OATD,EAU5B,KAAK,CAAC,IAAN,KAAe,GAAf,IAAsB,MAAM,CAAC,OAVD,EAW5B,KAAK,CAAC,IAAN,KAAe,GAAf,IAAsB,MAAM,CAAC,OAXD,EAY5B,KAAK,CAAC,IAAN,KAAe,GAAf,IAAsB,MAAM,CAAC,OAZD,EAa5B,KAAK,CAAC,IAAN,KAAe,GAAf,IAAsB,MAAM,CAAC,OAbD,EAc5B,KAAK,CAAC,IAAN,KAAe,GAAf,IAAsB,MAAM,CAAC,OAdD,EAe5B,KAAK,CAAC,IAAN,KAAe,GAAf,IAAsB,MAAM,CAAC,OAfD,EAgB5B,KAAK,CAAC,IAAN,KAAe,GAAf,IAAsB,MAAM,CAAC,OAhBD,EAiB5B,KAAK,CAAC,IAAN,KAAe,IAAf,IAAuB,MAAM,CAAC,QAjBF,EAkB5B,KAAK,CAAC,IAAN,KAAe,WAAf,IAA8B,MAAM,CAAC,SAlBT,EAmB5B,KAAK,CAAC,IAAN,KAAe,SAAf,IAA4B,MAAM,CAAC,OAnBP,EAoB5B,KAAK,CAAC,MAAN,KAAiB,QAAjB,IAA6B,MAAM,CAAC,YApBR,EAqB5B,KAAK,CAAC,MAAN,KAAiB,UAAjB,IAA+B,MAAM,CAAC,cArBV,EAsB5B,KAAK,CAAC,KAAN,KAAgB,QAAhB,IAA4B,MAAM,CAAC,WAtBP,EAuB5B,KAAK,CAAC,KAAN,KAAgB,KAAhB,IAAyB,MAAM,CAAC,QAvBJ,EAwB5B,KAAK,CAAC,KAAN,KAAgB,SAAhB,IAA6B,MAAM,CAAC,YAxBR,EAyB5B,KAAK,CAAC,SAzBsB,CAA9B;AA4BA,SAAO,KAAP;AACD,CA/BM","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport type { TextState } from './Text.types';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: theme => ({\n    fontFamily: theme.global.type.fontFamilies.base,\n    fontSize: theme.global.type.fontSizes.base[300],\n    lineHeight: theme.global.type.lineHeights.base[300],\n    fontWeight: theme.global.type.fontWeights.regular,\n    textAlign: 'start',\n    display: 'inline',\n    whiteSpace: 'normal',\n    overflow: 'visible',\n    textOverflow: 'clip',\n  }),\n  nowrap: {\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n  },\n  truncate: {\n    textOverflow: 'ellipsis',\n  },\n  block: {\n    display: 'block',\n  },\n  italic: {\n    fontStyle: 'italic',\n  },\n  underline: {\n    textDecoration: 'underline',\n  },\n  strikethrough: {\n    textDecoration: 'line-through',\n  },\n  strikethroughUnderline: {\n    textDecoration: 'line-through underline',\n  },\n  base100: theme => ({\n    fontSize: theme.global.type.fontSizes.base[100],\n    lineHeight: theme.global.type.lineHeights.base[100],\n  }),\n  base200: theme => ({\n    fontSize: theme.global.type.fontSizes.base[200],\n    lineHeight: theme.global.type.lineHeights.base[200],\n  }),\n  base400: theme => ({\n    fontSize: theme.global.type.fontSizes.base[400],\n    lineHeight: theme.global.type.lineHeights.base[400],\n  }),\n  base500: theme => ({\n    fontSize: theme.global.type.fontSizes.base[500],\n    lineHeight: theme.global.type.lineHeights.base[500],\n  }),\n  base600: theme => ({\n    fontSize: theme.global.type.fontSizes.base[600],\n    lineHeight: theme.global.type.lineHeights.base[600],\n  }),\n  hero700: theme => ({\n    fontSize: theme.global.type.fontSizes.hero[700],\n    lineHeight: theme.global.type.lineHeights.hero[700],\n  }),\n  hero800: theme => ({\n    fontSize: theme.global.type.fontSizes.hero[800],\n    lineHeight: theme.global.type.lineHeights.hero[800],\n  }),\n  hero900: theme => ({\n    fontSize: theme.global.type.fontSizes.hero[900],\n    lineHeight: theme.global.type.lineHeights.hero[900],\n  }),\n  hero1000: theme => ({\n    fontSize: theme.global.type.fontSizes.hero[1000],\n    lineHeight: theme.global.type.lineHeights.hero[1000],\n  }),\n  monospace: theme => ({\n    fontFamily: theme.global.type.fontFamilies.monospace,\n  }),\n  numeric: theme => ({\n    fontFamily: theme.global.type.fontFamilies.numeric,\n  }),\n  weightMedium: theme => ({\n    fontWeight: theme.global.type.fontWeights.medium,\n  }),\n  weightSemibold: theme => ({\n    fontWeight: theme.global.type.fontWeights.semibold,\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 = (state: TextState): TextState => {\n  const styles = useStyles();\n  state.className = mergeClasses(\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.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../src/components/Text/useTextStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,6BAAzC;AAGA,OAAO,MAAM,aAAa,GAAG,UAAtB;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AA6FA;;AAEG;;;AACH,OAAO,MAAM,aAAa,GAAI,KAAD,IAAgC;AAC3D,QAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,aADiC,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,IAAN,KAAe,KAAf,IAAwB,MAAM,CAAC,MAHE,EAIjC,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAJQ,EAKjC,KAAK,CAAC,KAAN,IAAe,MAAM,CAAC,KALW,EAMjC,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,MANU,EAOjC,KAAK,CAAC,SAAN,IAAmB,MAAM,CAAC,SAPO,EAQjC,KAAK,CAAC,aAAN,IAAuB,MAAM,CAAC,aARG,EASjC,KAAK,CAAC,SAAN,IAAmB,KAAK,CAAC,aAAzB,IAA0C,MAAM,CAAC,sBAThB,EAUjC,KAAK,CAAC,IAAN,KAAe,GAAf,IAAsB,MAAM,CAAC,OAVI,EAWjC,KAAK,CAAC,IAAN,KAAe,GAAf,IAAsB,MAAM,CAAC,OAXI,EAYjC,KAAK,CAAC,IAAN,KAAe,GAAf,IAAsB,MAAM,CAAC,OAZI,EAajC,KAAK,CAAC,IAAN,KAAe,GAAf,IAAsB,MAAM,CAAC,OAbI,EAcjC,KAAK,CAAC,IAAN,KAAe,GAAf,IAAsB,MAAM,CAAC,OAdI,EAejC,KAAK,CAAC,IAAN,KAAe,GAAf,IAAsB,MAAM,CAAC,OAfI,EAgBjC,KAAK,CAAC,IAAN,KAAe,GAAf,IAAsB,MAAM,CAAC,OAhBI,EAiBjC,KAAK,CAAC,IAAN,KAAe,GAAf,IAAsB,MAAM,CAAC,OAjBI,EAkBjC,KAAK,CAAC,IAAN,KAAe,IAAf,IAAuB,MAAM,CAAC,QAlBG,EAmBjC,KAAK,CAAC,IAAN,KAAe,WAAf,IAA8B,MAAM,CAAC,SAnBJ,EAoBjC,KAAK,CAAC,IAAN,KAAe,SAAf,IAA4B,MAAM,CAAC,OApBF,EAqBjC,KAAK,CAAC,MAAN,KAAiB,QAAjB,IAA6B,MAAM,CAAC,YArBH,EAsBjC,KAAK,CAAC,MAAN,KAAiB,UAAjB,IAA+B,MAAM,CAAC,cAtBL,EAuBjC,KAAK,CAAC,KAAN,KAAgB,QAAhB,IAA4B,MAAM,CAAC,WAvBF,EAwBjC,KAAK,CAAC,KAAN,KAAgB,KAAhB,IAAyB,MAAM,CAAC,QAxBC,EAyBjC,KAAK,CAAC,KAAN,KAAgB,SAAhB,IAA6B,MAAM,CAAC,YAzBH,EA0BjC,KAAK,CAAC,IAAN,CAAW,SA1BsB,CAAnC;AA6BA,SAAO,KAAP;AACD,CAjCM","sourceRoot":""}

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

@@ -1,4 +1,7 @@
+import type { FunctionComponent } from 'react';
+import { TextWrapperProps } from '../wrapper';
+export declare const title1ClassName = "fui-Title1";
 /**
  * Text wrapper component for the Title 1 typography variant
  */
-export declare const Title1: import("react").ForwardRefExoticComponent<import("../wrapper").Props & import("react").RefAttributes<HTMLElement>>;
+export declare const Title1: FunctionComponent<TextWrapperProps>;

package/lib/components/Title1/Title1.js

@@ -1,27 +1,29 @@
 import { __styles } from '@fluentui/react-make-styles';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper } from '../wrapper';
+export const title1ClassName = 'fui-Title1';
 /**
  * Styles for the root slot
  */
 
-var useStyles = /*#__PURE__*/__styles({
+const useStyles = /*#__PURE__*/__styles({
   "root": {
-    "Bahqtrf": "f1kx028l",
-    "Be2twd7": "fhm3ba7",
-    "Bg96gwp": "f171aabn",
-    "Bhrd7zp": "fss2gpl"
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "fccw675",
+    "Bg96gwp": "f1ebx5kk",
+    "Bhrd7zp": "fl43uef"
   }
 }, {
-  "d": [".f1kx028l{font-family:var(--global-type-fontFamilies-base);}", ".fhm3ba7{font-size:var(--global-type-fontSizes-hero-800);}", ".f171aabn{line-height:var(--global-type-lineHeights-hero-800);}", ".fss2gpl{font-weight:var(--global-type-fontWeights-semibold);}"]
+  "d": [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fccw675{font-size:var(--fontSizeHero800);}", ".f1ebx5kk{line-height:var(--lineHeightHero800);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}"]
 });
 /**
  * Text wrapper component for the Title 1 typography variant
  */
 
 
-export var Title1 = /*#__PURE__*/createWrapper({
-  useStyles: useStyles,
+export const Title1 = /*#__PURE__*/createWrapper({
+  useStyles,
+  className: title1ClassName,
   displayName: 'Title1'
 });
 //# sourceMappingURL=Title1.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Title1/Title1.tsx"],"names":[],"mappings":"AAAA,yBAA2B,6BAA3B;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,aAAT,QAA8B,YAA9B;AAEA;;AAEG;;AACH,IAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,IAAM,MAAM,gBAAG,aAAa,CAAC;AAAE,EAAA,SAAS,EAAA,SAAX;AAAa,EAAA,WAAW,EAAE;AAA1B,CAAD,CAA5B","sourcesContent":["import { makeStyles } from '@fluentui/react-make-styles';\nimport { typographyStyles } from '../../typographyStyles/index';\nimport { createWrapper } from '../wrapper';\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 = createWrapper({ useStyles, displayName: 'Title1' });\n"],"sourceRoot":"../src/"}
+{"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":""}

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

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

package/lib/components/Title2/Title2.d.ts

@@ -1,4 +1,7 @@
+import type { FunctionComponent } from 'react';
+import { TextWrapperProps } from '../wrapper';
+export declare const title2ClassName = "fui-Title2";
 /**
  * Text wrapper component for the Title 2 typography variant
  */
-export declare const Title2: import("react").ForwardRefExoticComponent<import("../wrapper").Props & import("react").RefAttributes<HTMLElement>>;
+export declare const Title2: FunctionComponent<TextWrapperProps>;

package/lib/components/Title2/Title2.js

@@ -1,27 +1,29 @@
 import { __styles } from '@fluentui/react-make-styles';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper } from '../wrapper';
+export const title2ClassName = 'fui-Title2';
 /**
  * Styles for the root slot
  */
 
-var useStyles = /*#__PURE__*/__styles({
+const useStyles = /*#__PURE__*/__styles({
   "root": {
-    "Bahqtrf": "f1kx028l",
-    "Be2twd7": "f1hydpcw",
-    "Bg96gwp": "fnqitsm",
-    "Bhrd7zp": "fss2gpl"
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "fojgt09",
+    "Bg96gwp": "fcen8rp",
+    "Bhrd7zp": "fl43uef"
   }
 }, {
-  "d": [".f1kx028l{font-family:var(--global-type-fontFamilies-base);}", ".f1hydpcw{font-size:var(--global-type-fontSizes-hero-700);}", ".fnqitsm{line-height:var(--global-type-lineHeights-hero-700);}", ".fss2gpl{font-weight:var(--global-type-fontWeights-semibold);}"]
+  "d": [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fojgt09{font-size:var(--fontSizeHero700);}", ".fcen8rp{line-height:var(--lineHeightHero700);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}"]
 });
 /**
  * Text wrapper component for the Title 2 typography variant
  */
 
 
-export var Title2 = /*#__PURE__*/createWrapper({
-  useStyles: useStyles,
+export const Title2 = /*#__PURE__*/createWrapper({
+  useStyles,
+  className: title2ClassName,
   displayName: 'Title2'
 });
 //# sourceMappingURL=Title2.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Title2/Title2.tsx"],"names":[],"mappings":"AAAA,yBAA2B,6BAA3B;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,aAAT,QAA8B,YAA9B;AAEA;;AAEG;;AACH,IAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,IAAM,MAAM,gBAAG,aAAa,CAAC;AAAE,EAAA,SAAS,EAAA,SAAX;AAAa,EAAA,WAAW,EAAE;AAA1B,CAAD,CAA5B","sourcesContent":["import { makeStyles } from '@fluentui/react-make-styles';\nimport { typographyStyles } from '../../typographyStyles/index';\nimport { createWrapper } from '../wrapper';\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 = createWrapper({ useStyles, displayName: 'Title2' });\n"],"sourceRoot":"../src/"}
+{"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":""}

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

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

package/lib/components/Title3/Title3.d.ts

@@ -1,4 +1,7 @@
+import type { FunctionComponent } from 'react';
+import { TextWrapperProps } from '../wrapper';
+export declare const title3ClassName = "fui-Title3";
 /**
  * Text wrapper component for the Title 3 typography variant
  */
-export declare const Title3: import("react").ForwardRefExoticComponent<import("../wrapper").Props & import("react").RefAttributes<HTMLElement>>;
+export declare const Title3: FunctionComponent<TextWrapperProps>;

package/lib/components/Title3/Title3.js

@@ -1,27 +1,29 @@
 import { __styles } from '@fluentui/react-make-styles';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper } from '../wrapper';
+export const title3ClassName = 'fui-Title3';
 /**
  * Styles for the root slot
  */
 
-var useStyles = /*#__PURE__*/__styles({
+const useStyles = /*#__PURE__*/__styles({
   "root": {
-    "Bahqtrf": "f1kx028l",
-    "Be2twd7": "f4boefw",
-    "Bg96gwp": "f14n33p9",
-    "Bhrd7zp": "fss2gpl"
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "f1x0m3f5",
+    "Bg96gwp": "fb86gi6",
+    "Bhrd7zp": "fl43uef"
   }
 }, {
-  "d": [".f1kx028l{font-family:var(--global-type-fontFamilies-base);}", ".f4boefw{font-size:var(--global-type-fontSizes-base-600);}", ".f14n33p9{line-height:var(--global-type-lineHeights-base-600);}", ".fss2gpl{font-weight:var(--global-type-fontWeights-semibold);}"]
+  "d": [".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1x0m3f5{font-size:var(--fontSizeBase600);}", ".fb86gi6{line-height:var(--lineHeightBase600);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}"]
 });
 /**
  * Text wrapper component for the Title 3 typography variant
  */
 
 
-export var Title3 = /*#__PURE__*/createWrapper({
-  useStyles: useStyles,
+export const Title3 = /*#__PURE__*/createWrapper({
+  useStyles,
+  className: title3ClassName,
   displayName: 'Title3'
 });
 //# sourceMappingURL=Title3.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Title3/Title3.tsx"],"names":[],"mappings":"AAAA,yBAA2B,6BAA3B;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,aAAT,QAA8B,YAA9B;AAEA;;AAEG;;AACH,IAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,IAAM,MAAM,gBAAG,aAAa,CAAC;AAAE,EAAA,SAAS,EAAA,SAAX;AAAa,EAAA,WAAW,EAAE;AAA1B,CAAD,CAA5B","sourcesContent":["import { makeStyles } from '@fluentui/react-make-styles';\nimport { typographyStyles } from '../../typographyStyles/index';\nimport { createWrapper } from '../wrapper';\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 = createWrapper({ useStyles, displayName: 'Title3' });\n"],"sourceRoot":"../src/"}
+{"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":""}

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

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

package/lib/components/wrapper.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import type { TextProps } from '../Text';
-export interface Props extends Omit<TextProps, 'font' | 'size'> {
-}
+export declare type TextWrapperProps = Omit<TextProps, 'font' | 'size'>;
 export declare function createWrapper(options: {
+    className: string;
     displayName: string;
     useStyles: () => Record<'root', string>;
-}): React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement>>;
+}): React.FunctionComponent<TextWrapperProps>;

package/lib/components/wrapper.js

@@ -2,13 +2,16 @@ import * as React from 'react';
 import { mergeClasses } from '@fluentui/react-make-styles';
 import { renderText, useText, useTextStyles } from '../Text';
 export function createWrapper(options) {
-  var useStyles = options.useStyles,
-      displayName = options.displayName;
-  var Wrapper = /*#__PURE__*/React.forwardRef(function (props, ref) {
-    var styles = useStyles();
-    var state = useText(props, ref);
+  const {
+    useStyles,
+    className,
+    displayName
+  } = options;
+  const Wrapper = /*#__PURE__*/React.forwardRef((props, ref) => {
+    const styles = useStyles();
+    const state = useText(props, ref);
     useTextStyles(state);
-    state.className = mergeClasses(state.className, styles.root, props.className);
+    state.root.className = mergeClasses(className, state.root.className, styles.root, props.className);
     return renderText(state);
   });
   Wrapper.displayName = displayName;

package/lib/components/wrapper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["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;AAKA,OAAM,SAAU,aAAV,CAAwB,OAAxB,EAAiG;AAC7F,MAAA,SAAS,GAAkB,OAAO,CAAzB,SAAT;AAAA,MAAW,WAAW,GAAK,OAAO,CAAZ,WAAtB;AACR,MAAM,OAAO,gBAAG,KAAK,CAAC,UAAN,CAAqC,UAAC,KAAD,EAAQ,GAAR,EAAW;AAC9D,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,QAAM,KAAK,GAAG,OAAO,CAAC,KAAD,EAAQ,GAAR,CAArB;AACA,IAAA,aAAa,CAAC,KAAD,CAAb;AAEA,IAAA,KAAK,CAAC,SAAN,GAAkB,YAAY,CAAC,KAAK,CAAC,SAAP,EAAkB,MAAM,CAAC,IAAzB,EAA+B,KAAK,CAAC,SAArC,CAA9B;AAEA,WAAO,UAAU,CAAC,KAAD,CAAjB;AACD,GARe,CAAhB;AASA,EAAA,OAAO,CAAC,WAAR,GAAsB,WAAtB;AAEA,SAAO,OAAP;AACD","sourcesContent":["import * as React from 'react';\nimport { mergeClasses } from '@fluentui/react-make-styles';\nimport { renderText, useText, useTextStyles } from '../Text';\nimport type { TextProps } from '../Text';\n\nexport interface Props extends Omit<TextProps, 'font' | 'size'> {}\n\nexport function createWrapper(options: { displayName: string; useStyles: () => Record<'root', string> }) {\n  const { useStyles, displayName } = options;\n  const Wrapper = React.forwardRef<HTMLElement, Props>((props, ref) => {\n    const styles = useStyles();\n    const state = useText(props, ref);\n    useTextStyles(state);\n\n    state.className = mergeClasses(state.className, styles.root, props.className);\n\n    return renderText(state);\n  });\n  Wrapper.displayName = displayName;\n\n  return Wrapper;\n}\n"],"sourceRoot":"../src/"}
+{"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":""}

package/lib/index.js.map

@@ -1 +1 @@
-{"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"]}
+{"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"}

package/lib/typographyStyles/index.js.map

@@ -1 +1 @@
-{"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"]}
+{"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"}

package/lib/typographyStyles/typographyStyles.js

@@ -1,76 +1,58 @@
 /**
  * Make-styles rules for the typography variants
  */
-export var caption = function (theme) {
-  return {
-    fontFamily: theme.global.type.fontFamilies.base,
-    fontSize: theme.global.type.fontSizes.base[200],
-    lineHeight: theme.global.type.lineHeights.base[200],
-    fontWeight: theme.global.type.fontWeights.regular
-  };
-};
-export var body = function (theme) {
-  return {
-    fontFamily: theme.global.type.fontFamilies.base,
-    fontSize: theme.global.type.fontSizes.base[300],
-    lineHeight: theme.global.type.lineHeights.base[300],
-    fontWeight: theme.global.type.fontWeights.regular
-  };
-};
-export var subheadline = function (theme) {
-  return {
-    fontFamily: theme.global.type.fontFamilies.base,
-    fontSize: theme.global.type.fontSizes.base[400],
-    lineHeight: theme.global.type.lineHeights.base[400],
-    fontWeight: theme.global.type.fontWeights.semibold
-  };
-};
-export var headline = function (theme) {
-  return {
-    fontFamily: theme.global.type.fontFamilies.base,
-    fontSize: theme.global.type.fontSizes.base[500],
-    lineHeight: theme.global.type.lineHeights.base[500],
-    fontWeight: theme.global.type.fontWeights.semibold
-  };
-};
-export var title3 = function (theme) {
-  return {
-    fontFamily: theme.global.type.fontFamilies.base,
-    fontSize: theme.global.type.fontSizes.base[600],
-    lineHeight: theme.global.type.lineHeights.base[600],
-    fontWeight: theme.global.type.fontWeights.semibold
-  };
-};
-export var title2 = function (theme) {
-  return {
-    fontFamily: theme.global.type.fontFamilies.base,
-    fontSize: theme.global.type.fontSizes.hero[700],
-    lineHeight: theme.global.type.lineHeights.hero[700],
-    fontWeight: theme.global.type.fontWeights.semibold
-  };
-};
-export var title1 = function (theme) {
-  return {
-    fontFamily: theme.global.type.fontFamilies.base,
-    fontSize: theme.global.type.fontSizes.hero[800],
-    lineHeight: theme.global.type.lineHeights.hero[800],
-    fontWeight: theme.global.type.fontWeights.semibold
-  };
-};
-export var largeTitle = function (theme) {
-  return {
-    fontFamily: theme.global.type.fontFamilies.base,
-    fontSize: theme.global.type.fontSizes.hero[900],
-    lineHeight: theme.global.type.lineHeights.hero[900],
-    fontWeight: theme.global.type.fontWeights.semibold
-  };
-};
-export var display = function (theme) {
-  return {
-    fontFamily: theme.global.type.fontFamilies.base,
-    fontSize: theme.global.type.fontSizes.hero[1000],
-    lineHeight: theme.global.type.lineHeights.hero[1000],
-    fontWeight: theme.global.type.fontWeights.semibold
-  };
-};
+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
+});
 //# sourceMappingURL=typographyStyles.js.map

package/lib/typographyStyles/typographyStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["typographyStyles/typographyStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { MakeStylesStyleFunctionRule } from '@fluentui/make-styles';\nimport type { Theme } from '@fluentui/react-theme';\n\n/**\n * Make-styles rules for the typography variants\n */\nexport const caption: MakeStylesStyleFunctionRule<Theme> = theme => ({\n  fontFamily: theme.global.type.fontFamilies.base,\n  fontSize: theme.global.type.fontSizes.base[200],\n  lineHeight: theme.global.type.lineHeights.base[200],\n  fontWeight: theme.global.type.fontWeights.regular,\n});\nexport const body: MakeStylesStyleFunctionRule<Theme> = theme => ({\n  fontFamily: theme.global.type.fontFamilies.base,\n  fontSize: theme.global.type.fontSizes.base[300],\n  lineHeight: theme.global.type.lineHeights.base[300],\n  fontWeight: theme.global.type.fontWeights.regular,\n});\nexport const subheadline: MakeStylesStyleFunctionRule<Theme> = theme => ({\n  fontFamily: theme.global.type.fontFamilies.base,\n  fontSize: theme.global.type.fontSizes.base[400],\n  lineHeight: theme.global.type.lineHeights.base[400],\n  fontWeight: theme.global.type.fontWeights.semibold,\n});\nexport const headline: MakeStylesStyleFunctionRule<Theme> = theme => ({\n  fontFamily: theme.global.type.fontFamilies.base,\n  fontSize: theme.global.type.fontSizes.base[500],\n  lineHeight: theme.global.type.lineHeights.base[500],\n  fontWeight: theme.global.type.fontWeights.semibold,\n});\nexport const title3: MakeStylesStyleFunctionRule<Theme> = theme => ({\n  fontFamily: theme.global.type.fontFamilies.base,\n  fontSize: theme.global.type.fontSizes.base[600],\n  lineHeight: theme.global.type.lineHeights.base[600],\n  fontWeight: theme.global.type.fontWeights.semibold,\n});\nexport const title2: MakeStylesStyleFunctionRule<Theme> = theme => ({\n  fontFamily: theme.global.type.fontFamilies.base,\n  fontSize: theme.global.type.fontSizes.hero[700],\n  lineHeight: theme.global.type.lineHeights.hero[700],\n  fontWeight: theme.global.type.fontWeights.semibold,\n});\nexport const title1: MakeStylesStyleFunctionRule<Theme> = theme => ({\n  fontFamily: theme.global.type.fontFamilies.base,\n  fontSize: theme.global.type.fontSizes.hero[800],\n  lineHeight: theme.global.type.lineHeights.hero[800],\n  fontWeight: theme.global.type.fontWeights.semibold,\n});\nexport const largeTitle: MakeStylesStyleFunctionRule<Theme> = theme => ({\n  fontFamily: theme.global.type.fontFamilies.base,\n  fontSize: theme.global.type.fontSizes.hero[900],\n  lineHeight: theme.global.type.lineHeights.hero[900],\n  fontWeight: theme.global.type.fontWeights.semibold,\n});\nexport const display: MakeStylesStyleFunctionRule<Theme> = theme => ({\n  fontFamily: theme.global.type.fontFamilies.base,\n  fontSize: theme.global.type.fontSizes.hero[1000],\n  lineHeight: theme.global.type.lineHeights.hero[1000],\n  fontWeight: theme.global.type.fontWeights.semibold,\n});\n"],"sourceRoot":"../src/"}
+{"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":""}

package/lib-commonjs/Body.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./components/Body/index"), exports);
 //# sourceMappingURL=Body.js.map

package/lib-commonjs/Body.js.map

@@ -1 +1 @@
-{"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/"}
+{"version":3,"sources":["../src/Body.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,yBAAA,CAAA,EAAA,OAAA","sourceRoot":""}

package/lib-commonjs/Caption.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./components/Caption/index"), exports);
 //# sourceMappingURL=Caption.js.map

package/lib-commonjs/Caption.js.map

@@ -1 +1 @@
-{"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/"}
+{"version":3,"sources":["../src/Caption.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA","sourceRoot":""}

package/lib-commonjs/Display.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./components/Display/index"), exports);
 //# sourceMappingURL=Display.js.map

package/lib-commonjs/Display.js.map

@@ -1 +1 @@
-{"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/"}
+{"version":3,"sources":["../src/Display.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA","sourceRoot":""}