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

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

@@ -1,86 +1,77 @@
-import * as React from 'react';
-import type { ComponentPropsCompat, ComponentStateCompat } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
 /**
- * Text Props
+ * Text slots
  */
-export interface TextProps extends ComponentPropsCompat, React.HTMLAttributes<HTMLElement> {
+export declare type TextSlots = {
+    root: IntrinsicShorthandProps<'span', 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'pre'>;
+};
+export declare type TextCommons = {
     /**
      * Wraps the text content on white spaces.
      *
      * @defaultValue true
      */
-    wrap?: boolean;
+    wrap: boolean;
     /**
      * Truncate overflowing text for block displays.
      *
      * @defaultValue false
      */
-    truncate?: boolean;
+    truncate: boolean;
     /**
      * Applies a block display for the content.
      *
      * @defaultValue false
      */
-    block?: boolean;
+    block: boolean;
     /**
      * Applies the italic font style to the content.
      *
      * @defaultValue false
      */
-    italic?: boolean;
+    italic: boolean;
     /**
      * Applies the underline text decoration to the content.
      *
      * @defaultValue false
      */
-    underline?: boolean;
+    underline: boolean;
     /**
      * Applies the strikethrough text decoration to the content.
      *
      * @defaultValue false
      */
-    strikethrough?: boolean;
+    strikethrough: boolean;
     /**
      * Applies font size and line height based on the theme tokens.
      *
      * @defaultValue 300
      */
-    size?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000;
+    size: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000;
     /**
      * Applies the font family to the content.
      *
      * @defaultValue base
      */
-    font?: 'base' | 'monospace' | 'numeric';
+    font: 'base' | 'monospace' | 'numeric';
     /**
      * Applies font weight to the content.
      *
      * @defaultValue regular
      */
-    weight?: 'regular' | 'medium' | 'semibold';
+    weight: 'regular' | 'medium' | 'semibold';
     /**
      * Aligns text based on the parent container.
      *
      * @defaultValue start
      */
-    align?: 'start' | 'center' | 'end' | 'justify';
-    /**
-     * Component to be rendered as.
-     *
-     * @defaultValue span
-     */
-    as?: 'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'pre';
-}
+    align: 'start' | 'center' | 'end' | 'justify';
+};
 /**
- * Names of TextProps that have a default value in useText
+ * Text Props
  */
-export declare type TextDefaultedProps = never;
+export declare type TextProps = ComponentProps<TextSlots> & Partial<TextCommons>;
 /**
  * State used in rendering Text
  */
-export interface TextState extends ComponentStateCompat<TextProps, TextDefaultedProps> {
-    /**
-     * Ref to the root element
-     */
-    ref: React.Ref<HTMLElement>;
-}
+export declare type TextState = ComponentState<TextSlots> & TextCommons;

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
+{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}

package/lib-commonjs/components/Text/index.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("./Text"), exports);
 

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Text/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,QAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Text';\nexport * from './Text.types';\nexport * from './renderText';\nexport * from './useText';\nexport * from './useTextStyles';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../src/components/Text/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,QAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA","sourceRoot":""}

package/lib-commonjs/components/Text/renderText.js

@@ -5,22 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.renderText = void 0;
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const React = /*#__PURE__*/require("react");
 
-var React = /*#__PURE__*/require("react");
-
-var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Render the final JSX of Text
  */
 
 
-var renderText = function (state) {
-  var _a = react_utilities_1.getSlotsCompat(state),
-      slots = _a.slots,
-      slotProps = _a.slotProps;
-
-  return React.createElement(slots.root, tslib_1.__assign({}, slotProps.root), state.children);
+const renderText = state => {
+  const {
+    slots,
+    slotProps
+  } = react_utilities_1.getSlots(state);
+  return React.createElement(slots.root, Object.assign({}, slotProps.root));
 };
 
 exports.renderText = renderText;

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Text/renderText.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,IAAM,UAAU,GAAG,UAAC,KAAD,EAAiB;AACnC,MAAA,EAAA,GAAuB,iBAAA,CAAA,cAAA,CAAe,KAAf,CAAvB;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,SAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EAAiC,KAAK,CAAC,QAAvC,CAAP;AACD,CAJM;;AAAM,OAAA,CAAA,UAAA,GAAU,UAAV","sourcesContent":["import * as React from 'react';\nimport { getSlotsCompat } from '@fluentui/react-utilities';\nimport type { TextState } from './Text.types';\n\n/**\n * Render the final JSX of Text\n */\nexport const renderText = (state: TextState) => {\n  const { slots, slotProps } = getSlotsCompat(state);\n\n  return <slots.root {...slotProps.root}>{state.children}</slots.root>;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../src/components/Text/renderText.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,UAAU,GAAI,KAAD,IAAqB;AAC7C,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAoB,KAApB,CAA7B;AAEA,SAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAAP;AACD,CAJM;;AAAM,OAAA,CAAA,UAAA,GAAU,UAAV","sourceRoot":""}

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

@@ -8,6 +8,5 @@ import type { TextProps, TextState } from './Text.types';
  *
  * @param props - props from this instance of Text
  * @param ref - reference to root HTMLElement of Text
- * @param defaultProps - (optional) default prop values provided by the implementing type
  */
-export declare const useText: (props: TextProps, ref: React.Ref<HTMLElement>, defaultProps?: TextProps | undefined) => TextState;
+export declare const useText: (props: TextProps, ref: React.Ref<HTMLElement>) => TextState;

package/lib-commonjs/components/Text/useText.js

@@ -5,9 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useText = void 0;
 
-var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
-var mergeProps = /*#__PURE__*/react_utilities_1.makeMergeProps();
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Create the state required to render Text.
  *
@@ -16,14 +14,45 @@ var mergeProps = /*#__PURE__*/react_utilities_1.makeMergeProps();
  *
  * @param props - props from this instance of Text
  * @param ref - reference to root HTMLElement of Text
- * @param defaultProps - (optional) default prop values provided by the implementing type
  */
 
-var useText = function (props, ref, defaultProps) {
-  var state = mergeProps({
-    ref: ref,
-    as: 'span'
-  }, defaultProps, props);
+
+const useText = (props, ref) => {
+  var _a;
+
+  const {
+    wrap,
+    truncate,
+    block,
+    italic,
+    underline,
+    strikethrough,
+    size,
+    font,
+    weight,
+    align
+  } = props;
+  const as = (_a = props.as) !== null && _a !== void 0 ? _a : 'span';
+  const state = {
+    wrap: wrap !== null && wrap !== void 0 ? wrap : true,
+    truncate: truncate !== null && truncate !== void 0 ? truncate : false,
+    block: block !== null && block !== void 0 ? block : false,
+    italic: italic !== null && italic !== void 0 ? italic : false,
+    underline: underline !== null && underline !== void 0 ? underline : false,
+    strikethrough: strikethrough !== null && strikethrough !== void 0 ? strikethrough : false,
+    size: size !== null && size !== void 0 ? size : 300,
+    font: font !== null && font !== void 0 ? font : 'base',
+    weight: weight !== null && weight !== void 0 ? weight : 'regular',
+    align: align !== null && align !== void 0 ? align : 'start',
+    components: {
+      root: 'span'
+    },
+    root: react_utilities_1.getNativeElementProps(as, {
+      ref,
+      ...props,
+      as
+    })
+  };
   return state;
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Text/useText.ts"],"names":[],"mappings":";;;;;;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAGA,IAAM,UAAU,gBAAG,iBAAA,CAAA,cAAA,EAAnB;AAEA;;;;;;;;;AASG;;AACI,IAAM,OAAO,GAAG,UAAC,KAAD,EAAmB,GAAnB,EAAgD,YAAhD,EAAwE;AAC7F,MAAM,KAAK,GAAG,UAAU,CACtB;AACE,IAAA,GAAG,EAAA,GADL;AAEE,IAAA,EAAE,EAAE;AAFN,GADsB,EAKtB,YALsB,EAMtB,KANsB,CAAxB;AASA,SAAO,KAAP;AACD,CAXM;;AAAM,OAAA,CAAA,OAAA,GAAO,OAAP","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps } from '@fluentui/react-utilities';\nimport type { TextProps, TextState } from './Text.types';\n\nconst mergeProps = makeMergeProps<TextState>();\n\n/**\n * Create the state required to render Text.\n *\n * The returned state can be modified with hooks such as useTextStyles,\n * before being passed to renderText.\n *\n * @param props - props from this instance of Text\n * @param ref - reference to root HTMLElement of Text\n * @param defaultProps - (optional) default prop values provided by the implementing type\n */\nexport const useText = (props: TextProps, ref: React.Ref<HTMLElement>, defaultProps?: TextProps): TextState => {\n  const state = mergeProps(\n    {\n      ref,\n      as: 'span',\n    },\n    defaultProps,\n    props,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../src/components/Text/useText.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,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,GAAA,CAAA,EAAA,GAAG,KAAK,CAAC,EAAT,MAAW,IAAX,IAAW,EAAA,KAAA,KAAA,CAAX,GAAW,EAAX,GAAe,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,iBAAA,CAAA,qBAAA,CAAsB,EAAtB,EAA0B;AAC9B,MAAA,GAD8B;AAE9B,SAAG,KAF2B;AAG9B,MAAA;AAH8B,KAA1B;AAdiB,GAAzB;AAqBA,SAAO,KAAP;AACD,CA1BM;;AAAM,OAAA,CAAA,OAAA,GAAO,OAAP","sourceRoot":""}

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

@@ -1,4 +1,5 @@
 import type { TextState } from './Text.types';
+export declare const textClassName = "fui-Text";
 /**
  * Apply styling to the Text slots based on the state
  */

package/lib-commonjs/components/Text/useTextStyles.js

@@ -3,20 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useTextStyles = void 0;
+exports.useTextStyles = exports.textClassName = void 0;
 
-var react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+const react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+
+exports.textClassName = 'fui-Text';
 /**
  * Styles for the root slot
  */
 
-
-var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
   "root": {
-    "Bahqtrf": "f1kx028l",
-    "Be2twd7": "flcnb0",
-    "Bg96gwp": "f1syuwty",
-    "Bhrd7zp": "f1du0uop",
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "fkhj508",
+    "Bg96gwp": "f1i3iumi",
+    "Bhrd7zp": "figsok6",
     "fsow6f": "fpgzoln",
     "mc9l5x": "f1w7gpdv",
     "Huce71": "f6juhto",
@@ -46,52 +47,52 @@ var useStyles = /*#__PURE__*/react_make_styles_1.__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"
@@ -103,16 +104,16 @@ var useStyles = /*#__PURE__*/react_make_styles_1.__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
  */
 
 
-var useTextStyles = function (state) {
-  var styles = useStyles();
-  state.className = react_make_styles_1.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);
+const useTextStyles = state => {
+  const styles = useStyles();
+  state.root.className = react_make_styles_1.mergeClasses(exports.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-commonjs/components/Text/useTextStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Text/useTextStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;AAGA;;AAEG;;;AACH,IAAM,SAAS,gBAAG,mBAAA,SAAA;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;;;AACI,IAAM,aAAa,GAAG,UAAC,KAAD,EAAiB;AAC5C,MAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,SAAN,GAAkB,mBAAA,CAAA,YAAA,CAChB,MAAM,CAAC,IADS,EAEhB,KAAK,CAAC,IAAN,KAAe,KAAf,IAAwB,MAAM,CAAC,MAFf,EAGhB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAHT,EAIhB,KAAK,CAAC,KAAN,IAAe,MAAM,CAAC,KAJN,EAKhB,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,MALP,EAMhB,KAAK,CAAC,SAAN,IAAmB,MAAM,CAAC,SANV,EAOhB,KAAK,CAAC,aAAN,IAAuB,MAAM,CAAC,aAPd,EAQhB,KAAK,CAAC,SAAN,IAAmB,KAAK,CAAC,aAAzB,IAA0C,MAAM,CAAC,sBARjC,EAShB,KAAK,CAAC,IAAN,KAAe,GAAf,IAAsB,MAAM,CAAC,OATb,EAUhB,KAAK,CAAC,IAAN,KAAe,GAAf,IAAsB,MAAM,CAAC,OAVb,EAWhB,KAAK,CAAC,IAAN,KAAe,GAAf,IAAsB,MAAM,CAAC,OAXb,EAYhB,KAAK,CAAC,IAAN,KAAe,GAAf,IAAsB,MAAM,CAAC,OAZb,EAahB,KAAK,CAAC,IAAN,KAAe,GAAf,IAAsB,MAAM,CAAC,OAbb,EAchB,KAAK,CAAC,IAAN,KAAe,GAAf,IAAsB,MAAM,CAAC,OAdb,EAehB,KAAK,CAAC,IAAN,KAAe,GAAf,IAAsB,MAAM,CAAC,OAfb,EAgBhB,KAAK,CAAC,IAAN,KAAe,GAAf,IAAsB,MAAM,CAAC,OAhBb,EAiBhB,KAAK,CAAC,IAAN,KAAe,IAAf,IAAuB,MAAM,CAAC,QAjBd,EAkBhB,KAAK,CAAC,IAAN,KAAe,WAAf,IAA8B,MAAM,CAAC,SAlBrB,EAmBhB,KAAK,CAAC,IAAN,KAAe,SAAf,IAA4B,MAAM,CAAC,OAnBnB,EAoBhB,KAAK,CAAC,MAAN,KAAiB,QAAjB,IAA6B,MAAM,CAAC,YApBpB,EAqBhB,KAAK,CAAC,MAAN,KAAiB,UAAjB,IAA+B,MAAM,CAAC,cArBtB,EAsBhB,KAAK,CAAC,KAAN,KAAgB,QAAhB,IAA4B,MAAM,CAAC,WAtBnB,EAuBhB,KAAK,CAAC,KAAN,KAAgB,KAAhB,IAAyB,MAAM,CAAC,QAvBhB,EAwBhB,KAAK,CAAC,KAAN,KAAgB,SAAhB,IAA6B,MAAM,CAAC,YAxBpB,EAyBhB,KAAK,CAAC,SAzBU,CAAlB;AA4BA,SAAO,KAAP;AACD,CA/BM;;AAAM,OAAA,CAAA,aAAA,GAAa,aAAb","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":"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","sourceRoot":""}

package/lib-commonjs/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-commonjs/components/Title1/Title1.js

@@ -3,19 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Title1 = void 0;
+exports.Title1 = exports.title1ClassName = void 0;
 
-var react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+const react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
 
-var index_1 = /*#__PURE__*/require("../../typographyStyles/index");
+const index_1 = /*#__PURE__*/require("../../typographyStyles/index");
 
-var wrapper_1 = /*#__PURE__*/require("../wrapper");
+const wrapper_1 = /*#__PURE__*/require("../wrapper");
+
+exports.title1ClassName = 'fui-Title1';
 /**
  * Styles for the root slot
  */
 
-
-var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
   "root": {}
 }, {});
 /**
@@ -24,7 +25,8 @@ var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
 
 
 exports.Title1 = /*#__PURE__*/wrapper_1.createWrapper({
-  useStyles: useStyles,
+  useStyles,
+  className: exports.title1ClassName,
   displayName: 'Title1'
 });
 //# sourceMappingURL=Title1.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Title1/Title1.tsx"],"names":[],"mappings":";;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,IAAA,OAAA,gBAAA,OAAA,CAAA,8BAAA,CAAA;;AACA,IAAA,SAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;AAEA;;AAEG;;;AACH,IAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA,MAAlB;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAAS,SAAA,CAAA,aAAA,CAAc;AAAE,EAAA,SAAS,EAAA,SAAX;AAAa,EAAA,WAAW,EAAE;AAA1B,CAAd,CAAT","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,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,8BAAA,CAAA;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AAEa,OAAA,CAAA,eAAA,GAAkB,YAAlB;AAEb;;AAEG;;AACH,MAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA,MAAlB;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAA8C,SAAA,CAAA,aAAA,CAAc;AACvE,EAAA,SADuE;AAEvE,EAAA,SAAS,EAAE,OAAA,CAAA,eAF4D;AAGvE,EAAA,WAAW,EAAE;AAH0D,CAAd,CAA9C","sourceRoot":""}

package/lib-commonjs/components/Title1/index.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("./Title1"), exports);
 //# sourceMappingURL=index.js.map

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

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

package/lib-commonjs/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-commonjs/components/Title2/Title2.js

@@ -3,19 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Title2 = void 0;
+exports.Title2 = exports.title2ClassName = void 0;
 
-var react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+const react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
 
-var index_1 = /*#__PURE__*/require("../../typographyStyles/index");
+const index_1 = /*#__PURE__*/require("../../typographyStyles/index");
 
-var wrapper_1 = /*#__PURE__*/require("../wrapper");
+const wrapper_1 = /*#__PURE__*/require("../wrapper");
+
+exports.title2ClassName = 'fui-Title2';
 /**
  * Styles for the root slot
  */
 
-
-var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
   "root": {}
 }, {});
 /**
@@ -24,7 +25,8 @@ var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
 
 
 exports.Title2 = /*#__PURE__*/wrapper_1.createWrapper({
-  useStyles: useStyles,
+  useStyles,
+  className: exports.title2ClassName,
   displayName: 'Title2'
 });
 //# sourceMappingURL=Title2.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Title2/Title2.tsx"],"names":[],"mappings":";;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,IAAA,OAAA,gBAAA,OAAA,CAAA,8BAAA,CAAA;;AACA,IAAA,SAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;AAEA;;AAEG;;;AACH,IAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA,MAAlB;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAAS,SAAA,CAAA,aAAA,CAAc;AAAE,EAAA,SAAS,EAAA,SAAX;AAAa,EAAA,WAAW,EAAE;AAA1B,CAAd,CAAT","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,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,8BAAA,CAAA;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AAEa,OAAA,CAAA,eAAA,GAAkB,YAAlB;AAEb;;AAEG;;AACH,MAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA,MAAlB;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAA8C,SAAA,CAAA,aAAA,CAAc;AACvE,EAAA,SADuE;AAEvE,EAAA,SAAS,EAAE,OAAA,CAAA,eAF4D;AAGvE,EAAA,WAAW,EAAE;AAH0D,CAAd,CAA9C","sourceRoot":""}

package/lib-commonjs/components/Title2/index.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("./Title2"), exports);
 //# sourceMappingURL=index.js.map

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

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

package/lib-commonjs/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-commonjs/components/Title3/Title3.js

@@ -3,19 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Title3 = void 0;
+exports.Title3 = exports.title3ClassName = void 0;
 
-var react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+const react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
 
-var index_1 = /*#__PURE__*/require("../../typographyStyles/index");
+const index_1 = /*#__PURE__*/require("../../typographyStyles/index");
 
-var wrapper_1 = /*#__PURE__*/require("../wrapper");
+const wrapper_1 = /*#__PURE__*/require("../wrapper");
+
+exports.title3ClassName = 'fui-Title3';
 /**
  * Styles for the root slot
  */
 
-
-var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
   "root": {}
 }, {});
 /**
@@ -24,7 +25,8 @@ var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
 
 
 exports.Title3 = /*#__PURE__*/wrapper_1.createWrapper({
-  useStyles: useStyles,
+  useStyles,
+  className: exports.title3ClassName,
   displayName: 'Title3'
 });
 //# sourceMappingURL=Title3.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Title3/Title3.tsx"],"names":[],"mappings":";;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,IAAA,OAAA,gBAAA,OAAA,CAAA,8BAAA,CAAA;;AACA,IAAA,SAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;AAEA;;AAEG;;;AACH,IAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA,MAAlB;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAAS,SAAA,CAAA,aAAA,CAAc;AAAE,EAAA,SAAS,EAAA,SAAX;AAAa,EAAA,WAAW,EAAE;AAA1B,CAAd,CAAT","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,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,8BAAA,CAAA;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AAEa,OAAA,CAAA,eAAA,GAAkB,YAAlB;AAEb;;AAEG;;AACH,MAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA,MAAlB;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAA8C,SAAA,CAAA,aAAA,CAAc;AACvE,EAAA,SADuE;AAEvE,EAAA,SAAS,EAAE,OAAA,CAAA,eAF4D;AAGvE,EAAA,WAAW,EAAE;AAH0D,CAAd,CAA9C","sourceRoot":""}

package/lib-commonjs/components/Title3/index.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("./Title3"), exports);
 //# sourceMappingURL=index.js.map