@fluentui/react-text 0.0.0-nightly050f89bf0020211102.1

package/README.md

@@ -0,0 +1,99 @@
+# @fluentui/react-text
+
+> WIP 🚧 - These are not production-ready components as we are still in a Beta phase.
+
+<!-- TODO: Add link to the new website -->
+
+The Text component exists to ensure consistency in your application's content by setting fixed sizes and other styles.
+This package also exports wrappers which ensure your text follows the Fluent design standards of typography.
+
+## Usage
+
+To use the Text components in your application, you can start by installing the main package of Fluent UI components:
+
+<!-- TODO: Validate if FluentProvider works without theme. If not, which theme should we refer to -->
+
+```sh
+npm install @fluentui/react-components
+```
+
+```jsx
+import { FluentProvider, Text } from '@fluentui/react-components';
+
+const App = () => (
+  <FluentProvider>
+    <Text>Fluent UI Text!</Text>
+  </FluentProvider>
+);
+```
+
+Or by installing only the `@fluentui/react-text` package. Keep in mind you'll need to install the FluentProvider package as well:
+
+```sh
+npm install @fluentui/react-text
+npm install @fluentui/react-provider
+```
+
+```jsx
+import { FluentProvider } from '@fluentui/react-provider';
+import { Text } from '@fluentui/react-text';
+
+const App = () => (
+  <FluentProvider>
+    <Text>Fluent UI Text!</Text>
+  </FluentProvider>
+);
+```
+
+## Typography wrappers
+
+![List of typography variants by sorted descending by size](./assets/typography-examples.gif 'Typography wrapper list')
+
+Wrappers offer an easy way to use text according to the Fluent Design System while also providing semantic code readability.
+
+Below is an example of the Display wrapper vs using the Text component:
+
+```tsx
+import { Text, Display } from '@fluentui/react-text';
+
+const Example = () => (
+  <>
+    <Text size={1000} weight="semibold">
+      This text is styled like a Display variant.
+    </Text>
+    <Display>This text is also styled like a Display variant.</Display>
+  </>
+);
+```
+
+As you can see, using the `Display` wrapper is a lot easier to read and provides a clearer visual of the page's layout.
+
+## Semantic elements
+
+By default, Text and all the typography wrappers render a `<span>` element. You should use the `as` property to ensure your page has proper semantic elements such as heading or paragraph elements.
+
+```html
+<div>
+  <Headline as="h1">Headline</Headline>
+  <Subheadline as="h2">Subheadline</Subheadline>
+  <Text as="p">This is simple example</Text>
+</div>
+```
+
+This will result in the following DOM structure:
+
+```html
+<div>
+  <h1>Headline</h1>
+  <h2>Subheadline</h2>
+  <p>This is simple example</p>
+</div>
+```
+
+## API
+
+For more information about the components, please refer to the [API documentation](https://aka.ms/fluentui-storybook).
+
+## Migration
+
+For migration information, have a look at the [migration guide](./MIGRATION.md).

package/Spec.md

@@ -0,0 +1,162 @@
+# @fluentui/react-text Spec
+
+## Background
+
+Text is a typography and styling abstraction component that can be used to ensure the consistency of all text across your application.
+
+Fabric used the `variant` prop to set any styling/format to the Text component, while also providing other utilities like `nowrap` and `block`.
+
+```jsx
+<Text>This is a Text component</Text>
+
+<Text variant="medium">Text</Text>
+
+<Text block>Text</Text>
+
+<Text nowrap>Text with ellipsis</Text>
+```
+
+Stardust's approach provides a more open API, allowing the user to customize `Text` to their own specific needs.
+
+```jsx
+<Text weight="light" content="This text is light." />
+
+<Text color="green" content="Green text" />
+
+<Text align="end" content="Text aligned to end" />
+
+<Text error content="There has been an error." />
+
+<Text disabled content="This feature has been disabled." />
+```
+
+## Prior Art
+
+- [Open UI research](https://github.com/openui/open-ui/pull/351)
+- [Convergence epic](https://github.com/microsoft/fluentui/issues/16847)
+
+## Comparison of [Fabric Text](https://developer.microsoft.com/en-us/fluentui#/controls/web/text) and [Stardust Text](https://fluentsite.z22.web.core.windows.net/0.56.0/components/text/definition)
+
+| Purpose                                                                                                          | Fabric  | Northstar     | Matching             |
+| ---------------------------------------------------------------------------------------------------------------- | ------- | ------------- | -------------------- |
+| An element type to render as (string or component).                                                              | as      | as            | Matching             |
+| Truncates text as needed                                                                                         | nowrap  | truncated     | Matching             |
+| Set font size for text                                                                                           | variant | size          | Matching             |
+| Renders Text as a block element                                                                                  | block   |               | Missing in Northstar |
+| Accessibility behavior if overridden by the user.                                                                |         | accessibility | Missing in Fabric    |
+| Align text content.                                                                                              |         | align         | Missing in Fabric    |
+| At mentions can be formatted to draw users' attention. Mentions for "me" can be formatted to appear differently. |         | atMention     | Missing in Fabric    |
+| A component can have a color.                                                                                    |         | color         | Missing in Fabric    |
+| Shorthand for primary content.                                                                                   |         | content       | Missing in Fabric    |
+| Set as disabled Text component                                                                                   |         | disabled      | Missing in Fabric    |
+| Set as error Text component                                                                                      |         | error         | Missing in Fabric    |
+| The text can appear more important and draw user's attention                                                     |         | important     | Missing in Fabric    |
+| Set as success Text component                                                                                    |         | success       | Missing in Fabric    |
+| The text can signify a temporary state                                                                           |         | temporary     | Missing in Fabric    |
+| Set as timestamp Text component                                                                                  |         | timestamp     | Missing in Fabric    |
+| Override for theme site variables to allow modifications of component styling via themes.                        |         | variables     | Missing in Fabric    |
+| The weight for the Text component                                                                                |         | weight        | Missing in Fabric    |
+| Additional CSS class name(s) to apply.                                                                           |         | className     | Missing in Fabric    |
+| Additional CSS styles to apply to the component instance.                                                        |         | styles        | Missing in Fabric    |
+| -                                                                                                                |         | design        | Missing in Fabric    |
+
+## API Proposal
+
+The new Text will provide props to customize text according to the standards defined by Fluent design. The component will not be tied down to specific application usage, like Stardust did, for example, with `mention` and `timestamp` props, and will allow a bigger degree of freedom when customizing, unlike we did in Fabric.
+We're also introducing a new concept of wrappers for the main design variants (i.e. 'Title', 'Subtitle', 'Caption') to improve readability and semantics of the code. The wrappers are expected to have fixed styles in terms of size and font family, but flexible for the other supported props in Text.
+These wrappers follow the Fluent UI language so for any deviation, regarding the fixed styles mentioned above, should use the Text component instead, given that this is fully customizable.
+
+| Property      | Type                                                                   | Default value | Comments |
+| ------------- | ---------------------------------------------------------------------- | ------------- | -------- |
+| as            | "span" \| "p" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "pre" | "span"        |          |
+| wrap          | boolean                                                                | true          |          |
+| truncate      | boolean                                                                | false         |          |
+| block         | boolean                                                                | false         |          |
+| italic        | boolean                                                                | false         |          |
+| underline     | boolean                                                                | false         |          |
+| strikethrough | boolean                                                                | false         |          |
+| size          | number - 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000             | 300           |          |
+| font          | string - "base" \| "monospace" \| "numeric"                            | "base"        |          |
+| weight        | string - "regular" \| "medium" \| "semibold"                           | "regular"     |          |
+| align         | string - "start" \| "center" \| "end" \| "justify"                     | "start"       |          |
+
+### make-styles rules
+
+Finally, we're also making available the styling used internally in Text for a lightweight styling solution if you want to avoid using Text or the added JavaScript layers of Text/wrappers.
+This is achieved with the `make-styles` rules being available to the user so that they can follow the Fluent design standards for Typography.
+
+## Sample Code
+
+### Using Text
+
+```jsx
+<Text weight="semibold" size={1000}>This text is semibold and huge.</Text>
+
+<Text align="end" italic>Text aligned to the end</Text>
+
+<Text strikethrough>This text has a strikethrough.</Text>
+```
+
+### Using the wrappers
+
+```jsx
+<Display bold>This text is huge.</Display>
+<LargeTitle>This is a large title.</LargeTitle>
+<Title as="h1">Title</Title>
+<Subtitle as="h2">Sub title</Subtitle>
+<Caption>Captioned</Caption>
+```
+
+### Using styles directly
+
+```jsx
+import { typographyStyles } from '@fluentui/react-text';
+
+const useStyles = makeStyles({
+  root: typographyStyles.title,
+  caption: typographyStyles.caption,
+});
+
+const Test = () => {
+  const styles = useStyles();
+
+  return (
+    <>
+      <p className={styles.root}>
+        <span>I am styled like a title</span>
+        <span className={styles.caption}>I am styled like a caption</span>
+      </p>
+    </>
+  );
+};
+```
+
+## Behaviours
+
+### Screen readers
+
+#### Truncate
+
+When using a screen reader, truncated text will be read completely, as truncation is used strictly to prevent text overflow.
+
+Sample:
+
+```jsx
+<Text truncate>This is a very long text that will be truncated.</Text>
+```
+
+Visual result:
+
+```
+This is a very long text...
+```
+
+Screen reader:
+
+```
+This is a very long text that will be truncated.
+```
+
+## Accesibility
+
+Accessibility is included in the entirety of the spec and there are no specific themes to address here.

package/dist/react-text.d.ts

@@ -0,0 +1,163 @@
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { FunctionComponent } from 'react';
+import type { IntrinsicShorthandProps } from '@fluentui/react-utilities';
+import * as React_2 from 'react';
+
+/**
+ * Text wrapper component for the Body typography variant
+ */
+declare const Body_2: FunctionComponent<TextWrapperProps>;
+export { Body_2 as Body }
+
+/**
+ * Text wrapper component for the Caption typography variant
+ */
+export declare const Caption: FunctionComponent<TextWrapperProps>;
+
+/**
+ * Text wrapper component for the Display typography variant
+ */
+export declare const Display: FunctionComponent<TextWrapperProps>;
+
+/**
+ * Text wrapper component for the Headline typography variant
+ */
+export declare const Headline: FunctionComponent<TextWrapperProps>;
+
+/**
+ * Text wrapper component for the Large Title typography variant
+ */
+export declare const LargeTitle: FunctionComponent<TextWrapperProps>;
+
+/**
+ * Render the final JSX of Text
+ */
+export declare const renderText: (state: TextState) => JSX.Element;
+
+/**
+ * Text wrapper component for the Subheadline typography variant
+ */
+export declare const Subheadline: FunctionComponent<TextWrapperProps>;
+
+/**
+ * Typography and styling abstraction component used to ensure consistency of text.
+ */
+declare const Text_2: ForwardRefComponent<TextProps>;
+export { Text_2 as Text }
+
+export declare type TextCommons = {
+    /**
+     * Wraps the text content on white spaces.
+     *
+     * @defaultValue true
+     */
+    wrap: boolean;
+    /**
+     * Truncate overflowing text for block displays.
+     *
+     * @defaultValue false
+     */
+    truncate: boolean;
+    /**
+     * Applies a block display for the content.
+     *
+     * @defaultValue false
+     */
+    block: boolean;
+    /**
+     * Applies the italic font style to the content.
+     *
+     * @defaultValue false
+     */
+    italic: boolean;
+    /**
+     * Applies the underline text decoration to the content.
+     *
+     * @defaultValue false
+     */
+    underline: boolean;
+    /**
+     * Applies the strikethrough text decoration to the content.
+     *
+     * @defaultValue false
+     */
+    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;
+    /**
+     * Applies the font family to the content.
+     *
+     * @defaultValue base
+     */
+    font: 'base' | 'monospace' | 'numeric';
+    /**
+     * Applies font weight to the content.
+     *
+     * @defaultValue regular
+     */
+    weight: 'regular' | 'medium' | 'semibold';
+    /**
+     * Aligns text based on the parent container.
+     *
+     * @defaultValue start
+     */
+    align: 'start' | 'center' | 'end' | 'justify';
+};
+
+/**
+ * Text Props
+ */
+export declare type TextProps = ComponentProps<TextSlots> & Partial<TextCommons>;
+
+/**
+ * Text slots
+ */
+export declare type TextSlots = {
+    root: IntrinsicShorthandProps<'span', 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'pre'>;
+};
+
+/**
+ * State used in rendering Text
+ */
+export declare type TextState = ComponentState<TextSlots> & TextCommons;
+
+declare type TextWrapperProps = Omit<TextProps, 'font' | 'size'>;
+
+/**
+ * Text wrapper component for the Title 1 typography variant
+ */
+export declare const Title1: FunctionComponent<TextWrapperProps>;
+
+/**
+ * Text wrapper component for the Title 2 typography variant
+ */
+export declare const Title2: FunctionComponent<TextWrapperProps>;
+
+/**
+ * Text wrapper component for the Title 3 typography variant
+ */
+export declare const Title3: FunctionComponent<TextWrapperProps>;
+
+/**
+ * Create the state required to render Text.
+ *
+ * The returned state can be modified with hooks such as useTextStyles,
+ * before being passed to renderText.
+ *
+ * @param props - props from this instance of Text
+ * @param ref - reference to root HTMLElement of Text
+ */
+export declare const useText: (props: TextProps, ref: React_2.Ref<HTMLElement>) => TextState;
+
+/**
+ * Apply styling to the Text slots based on the state
+ */
+export declare const useTextStyles: (state: TextState) => TextState;
+
+export { }

package/lib/Body.d.ts

@@ -0,0 +1 @@
+export * from './components/Body/index';

package/lib/Body.js

@@ -0,0 +1,2 @@
+export * from './components/Body/index';
+//# sourceMappingURL=Body.js.map

package/lib/Body.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Body.js","sourceRoot":"","sources":["../src/Body.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC"}

package/lib/Caption.d.ts

@@ -0,0 +1 @@
+export * from './components/Caption/index';

package/lib/Caption.js

@@ -0,0 +1,2 @@
+export * from './components/Caption/index';
+//# sourceMappingURL=Caption.js.map

package/lib/Caption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Caption.js","sourceRoot":"","sources":["../src/Caption.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}

package/lib/Display.d.ts

@@ -0,0 +1 @@
+export * from './components/Display/index';

package/lib/Display.js

@@ -0,0 +1,2 @@
+export * from './components/Display/index';
+//# sourceMappingURL=Display.js.map

package/lib/Display.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Display.js","sourceRoot":"","sources":["../src/Display.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}

package/lib/Headline.d.ts

@@ -0,0 +1 @@
+export * from './components/Headline/index';

package/lib/Headline.js

@@ -0,0 +1,2 @@
+export * from './components/Headline/index';
+//# sourceMappingURL=Headline.js.map

package/lib/Headline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Headline.js","sourceRoot":"","sources":["../src/Headline.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC"}

package/lib/LargeTitle.d.ts

@@ -0,0 +1 @@
+export * from './components/LargeTitle/index';

package/lib/LargeTitle.js

@@ -0,0 +1,2 @@
+export * from './components/LargeTitle/index';
+//# sourceMappingURL=LargeTitle.js.map

package/lib/LargeTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LargeTitle.js","sourceRoot":"","sources":["../src/LargeTitle.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC"}

package/lib/Subheadline.d.ts

@@ -0,0 +1 @@
+export * from './components/Subheadline/index';

package/lib/Subheadline.js

@@ -0,0 +1,2 @@
+export * from './components/Subheadline/index';
+//# sourceMappingURL=Subheadline.js.map

package/lib/Subheadline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Subheadline.js","sourceRoot":"","sources":["../src/Subheadline.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC"}

package/lib/Text.d.ts

@@ -0,0 +1 @@
+export * from './components/Text/index';

package/lib/Text.js

@@ -0,0 +1,2 @@
+export * from './components/Text/index';
+//# sourceMappingURL=Text.js.map

package/lib/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","sourceRoot":"","sources":["../src/Text.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC"}

package/lib/Title1.d.ts

@@ -0,0 +1 @@
+export * from './components/Title1/index';

package/lib/Title1.js

@@ -0,0 +1,2 @@
+export * from './components/Title1/index';
+//# sourceMappingURL=Title1.js.map

package/lib/Title1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Title1.js","sourceRoot":"","sources":["../src/Title1.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC"}

package/lib/Title2.d.ts

@@ -0,0 +1 @@
+export * from './components/Title2/index';

package/lib/Title2.js

@@ -0,0 +1,2 @@
+export * from './components/Title2/index';
+//# sourceMappingURL=Title2.js.map

package/lib/Title2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Title2.js","sourceRoot":"","sources":["../src/Title2.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC"}

package/lib/Title3.d.ts

@@ -0,0 +1 @@
+export * from './components/Title3/index';

package/lib/Title3.js

@@ -0,0 +1,2 @@
+export * from './components/Title3/index';
+//# sourceMappingURL=Title3.js.map

package/lib/Title3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Title3.js","sourceRoot":"","sources":["../src/Title3.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC"}

package/lib/common/isConformant.d.ts

@@ -0,0 +1,4 @@
+import type { IsConformantOptions } from '@fluentui/react-conformance';
+export declare function isConformant<TProps = {}>(testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & {
+    componentPath?: string;
+}): void;

package/lib/common/isConformant.js

@@ -0,0 +1,16 @@
+import { isConformant as baseIsConformant } from '@fluentui/react-conformance';
+import makeStylesTests from '@fluentui/react-conformance-make-styles';
+export function isConformant(testInfo) {
+  var defaultOptions = {
+    asPropHandlesRef: true,
+    componentPath: module.parent.filename.replace('.test', ''),
+    extraTests: makeStylesTests,
+    testOptions: {
+      'make-styles-overrides-win': {
+        callCount: 2
+      }
+    }
+  };
+  baseIsConformant(defaultOptions, testInfo);
+}
+//# sourceMappingURL=isConformant.js.map

package/lib/common/isConformant.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/common/isConformant.ts"],"names":[],"mappings":"AAAA,SAAS,YAAY,IAAI,gBAAzB,QAAiD,6BAAjD;AAEA,OAAO,eAAP,MAA4B,yCAA5B;AAEA,OAAM,SAAU,YAAV,CACJ,QADI,EACqF;AAEzF,MAAM,cAAc,GAAyC;AAC3D,IAAA,gBAAgB,EAAE,IADyC;AAE3D,IAAA,aAAa,EAAE,MAAO,CAAC,MAAR,CAAgB,QAAhB,CAAyB,OAAzB,CAAiC,OAAjC,EAA0C,EAA1C,CAF4C;AAG3D,IAAA,UAAU,EAAE,eAH+C;AAI3D,IAAA,WAAW,EAAE;AACX,mCAA6B;AAC3B,QAAA,SAAS,EAAE;AADgB;AADlB;AAJ8C,GAA7D;AAaA,EAAA,gBAAgB,CAAC,cAAD,EAAiB,QAAjB,CAAhB;AACD","sourceRoot":""}

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

@@ -0,0 +1,6 @@
+import type { FunctionComponent } from 'react';
+import { TextWrapperProps } from '../wrapper';
+/**
+ * Text wrapper component for the Body typography variant
+ */
+export declare const Body: FunctionComponent<TextWrapperProps>;

package/lib/components/Body/Body.js

@@ -0,0 +1,27 @@
+import { __styles } from '@fluentui/react-make-styles';
+import { typographyStyles } from '../../typographyStyles/index';
+import { createWrapper } from '../wrapper';
+/**
+ * Styles for the root slot
+ */
+
+var useStyles = /*#__PURE__*/__styles({
+  "root": {
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "fkhj508",
+    "Bg96gwp": "f1i3iumi",
+    "Bhrd7zp": "figsok6"
+  }
+}, {
+  "d": [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}"]
+});
+/**
+ * Text wrapper component for the Body typography variant
+ */
+
+
+export var Body = /*#__PURE__*/createWrapper({
+  useStyles: useStyles,
+  displayName: 'Body'
+});
+//# sourceMappingURL=Body.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Body/Body.tsx"],"names":[],"mappings":"AACA,yBAA2B,6BAA3B;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,aAAT,QAAgD,YAAhD;AAEA;;AAEG;;AACH,IAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,IAAM,IAAI,gBAAwC,aAAa,CAAC;AAAE,EAAA,SAAS,EAAA,SAAX;AAAa,EAAA,WAAW,EAAE;AAA1B,CAAD,CAA/D","sourceRoot":""}

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

@@ -0,0 +1 @@
+export * from './Body';

package/lib/components/Body/index.js

@@ -0,0 +1,2 @@
+export * from './Body';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Body/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

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

@@ -0,0 +1,6 @@
+import type { FunctionComponent } from 'react';
+import { TextWrapperProps } from '../wrapper';
+/**
+ * Text wrapper component for the Caption typography variant
+ */
+export declare const Caption: FunctionComponent<TextWrapperProps>;

package/lib/components/Caption/Caption.js

@@ -0,0 +1,27 @@
+import { __styles } from '@fluentui/react-make-styles';
+import { typographyStyles } from '../../typographyStyles/index';
+import { createWrapper } from '../wrapper';
+/**
+ * Styles for the root slot
+ */
+
+var useStyles = /*#__PURE__*/__styles({
+  "root": {
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "fy9rknc",
+    "Bg96gwp": "fwrc4pm",
+    "Bhrd7zp": "figsok6"
+  }
+}, {
+  "d": [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}"]
+});
+/**
+ * Text wrapper component for the Caption typography variant
+ */
+
+
+export var Caption = /*#__PURE__*/createWrapper({
+  useStyles: useStyles,
+  displayName: 'Caption'
+});
+//# sourceMappingURL=Caption.js.map