@workday/canvas-kit-react 8.0.0-alpha.252-next.21 → 8.0.0-alpha.254-next.23

package/dist/commonjs/text/lib/LabelText.d.ts

@@ -4,5 +4,27 @@ export interface TypeLabelProps extends TextProps {
     cursor?: Property.Cursor;
     disabled?: boolean;
 }
+/**
+ * ## LabelText
+ * [View Docs](https://canvas.workday.com/components/text/label-text)
+ *
+ * ---
+ * This component is intended to be used for labeling input fields.
+ * It's built on top of the `Text` component, so it has access to all `TextProps`.
+ * By default, it renders a semantic `label` element.
+ *
+ * It also uses the `subtext.large` typeLevel by default:
+ * - font-size: 14px (0.875rem)
+ * - font-weight: regular (400)
+ *
+ * @example
+ * ```tsx
+ * import { LabelText } from '@workday/canvas-kit-react/text';
+ *
+ * const CustomLabelText = () => (
+ *   <LabelText>Input Label Text</LabelText>
+ * );
+ * ```
+ */
 export declare const LabelText: import("../../common").ElementComponent<"label", TypeLabelProps>;
 //# sourceMappingURL=LabelText.d.ts.map

package/dist/commonjs/text/lib/LabelText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LabelText.d.ts","sourceRoot":"","sources":["../../../../text/lib/LabelText.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEjC,OAAO,EAAO,SAAS,EAAC,MAAM,gCAAgC,CAAC;AAG/D,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,MAAM,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAUD,eAAO,MAAM,SAAS,kEAKpB,CAAC"}
+{"version":3,"file":"LabelText.d.ts","sourceRoot":"","sources":["../../../../text/lib/LabelText.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEjC,OAAO,EAAO,SAAS,EAAC,MAAM,gCAAgC,CAAC;AAG/D,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,MAAM,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAUD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,SAAS,kEAKpB,CAAC"}

package/dist/commonjs/text/lib/LabelText.js

@@ -43,6 +43,28 @@ var StyledLabel = common_1.styled(text_1.Text.as('label'))(function (_a) {
         opacity: disabled && variant === 'inverse' ? '.4' : '1',
     });
 });
+/**
+ * ## LabelText
+ * [View Docs](https://canvas.workday.com/components/text/label-text)
+ *
+ * ---
+ * This component is intended to be used for labeling input fields.
+ * It's built on top of the `Text` component, so it has access to all `TextProps`.
+ * By default, it renders a semantic `label` element.
+ *
+ * It also uses the `subtext.large` typeLevel by default:
+ * - font-size: 14px (0.875rem)
+ * - font-weight: regular (400)
+ *
+ * @example
+ * ```tsx
+ * import { LabelText } from '@workday/canvas-kit-react/text';
+ *
+ * const CustomLabelText = () => (
+ *   <LabelText>Input Label Text</LabelText>
+ * );
+ * ```
+ */
 exports.LabelText = common_1.createComponent('label')({
     displayName: 'Label',
     Component: function (elemProps, ref, Element) {

package/dist/commonjs/text/lib/Text.d.ts

@@ -3,12 +3,56 @@ import { BoxProps } from '@workday/canvas-kit-react/layout';
 export interface TextProps extends BoxProps {
     /**
      * Type token as string with level and size separated by dot.
-     */
+     * These values map to our [Canvas type levels](https://canvas.workday.com/tokens/type#type-styles).
+     *
+     * @example
+     * ```tsx
+     * <Text typeLevel="body.small">Small body text</Text>
+     * ```
+    */
     typeLevel?: `${keyof CanvasTypeHierarchy}.${'large' | 'medium' | 'small'}`;
     /**
      * Type variant token names: `error`, `hint` or `inverse`.
-     */
+     *
+     * @example
+     * ```tsx
+     * <Text variant="error" typeLevel="subtext.large">Error text</Text>
+     * ```
+    */
     variant?: keyof CanvasTypeVariants;
 }
+/**
+ * ## Text
+ * [View Docs](https://canvas.workday.com/components/text/text)
+ *
+ * ---
+ * This is a generic base component intended to render any text.
+ * It's built on top of the `Box` component, so it has access to all [BoxProps](https://canvas.workday.com/components/layout/box/#props).
+ * It also has `typeLevel` and `variant` style props that simplify navigating our type hierarchy and using [Canvas type tokens](https://canvas.workday.com/tokens/type#type-styles).
+ * By default, it renders a semantic `span` element, but you can adjust this as needed with the `as` prop.
+ *
+ * The type hierarchy is organized into four levels, which correspond to our [Canvas type levels](https://canvas.workday.com/tokens/type#type-styles).
+ *
+ * - `title`: Intended to be used for large page titles.
+ * - `heading`: Intended to be used for headings and large text.
+ * - `body`: Intended to be used for standard body text.
+ * - `subtext`: Intended to be used for small subtext content or in tight spaces.
+ *
+ * Each level has three sizes: `large`, `medium`, and `small`.
+ *
+ * You can provide any level and size to the `typeLevel` prop, and it will apply the correct styles accordingly.
+ * In the example below we're providing the `subtext` level and `small` size to the component with the value `subtext.small`.
+ *
+ * @example
+ * ```tsx
+ * import { Text } from '@workday/canvas-kit-react/text';
+ *
+ * const CustomErrorText = () => (
+ *   <Text typeLevel="subtext.small" variant="error">
+ *     Error Text
+ *   </Text>
+ * );
+ * ```
+*/
 export declare const Text: import("../../common").ElementComponent<"span", TextProps>;
 //# sourceMappingURL=Text.d.ts.map

package/dist/commonjs/text/lib/Text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../text/lib/Text.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,mBAAmB,EAAE,kBAAkB,EAAC,MAAM,kCAAkC,CAAC;AAC/F,OAAO,EAAM,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAE/D,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;OAEG;IACF,SAAS,CAAC,EAAE,GAAG,MAAM,mBAAmB,IAAI,OAAO,GAAC,QAAQ,GAAC,OAAO,EAAE,CAAC;IACxE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,kBAAkB,CAAC;CACpC;AA2CD,eAAO,MAAM,IAAI,4DAOf,CAAC"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../text/lib/Text.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,mBAAmB,EAAE,kBAAkB,EAAC,MAAM,kCAAkC,CAAC;AAC/F,OAAO,EAAM,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAE/D,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;;;;;;;MAQE;IACF,SAAS,CAAC,EAAE,GAAG,MAAM,mBAAmB,IAAI,OAAO,GAAC,QAAQ,GAAC,OAAO,EAAE,CAAC;IACvE;;;;;;;MAOE;IACF,OAAO,CAAC,EAAE,MAAM,kBAAkB,CAAC;CACpC;AA2CD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCE;AACF,eAAO,MAAM,IAAI,4DAOf,CAAC"}

package/dist/commonjs/text/lib/Text.js

@@ -49,7 +49,7 @@ var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var layout_1 = require("@workday/canvas-kit-react/layout");
 /**
  * Function returns updated props by token and variant values
- */
+*/
 var validateProps = function (_a) {
     var typeLevel = _a.typeLevel, variant = _a.variant, props = __rest(_a, ["typeLevel", "variant"]);
     var updatedProps = props;
@@ -81,6 +81,39 @@ var validateProps = function (_a) {
     }
     return updatedProps;
 };
+/**
+ * ## Text
+ * [View Docs](https://canvas.workday.com/components/text/text)
+ *
+ * ---
+ * This is a generic base component intended to render any text.
+ * It's built on top of the `Box` component, so it has access to all [BoxProps](https://canvas.workday.com/components/layout/box/#props).
+ * It also has `typeLevel` and `variant` style props that simplify navigating our type hierarchy and using [Canvas type tokens](https://canvas.workday.com/tokens/type#type-styles).
+ * By default, it renders a semantic `span` element, but you can adjust this as needed with the `as` prop.
+ *
+ * The type hierarchy is organized into four levels, which correspond to our [Canvas type levels](https://canvas.workday.com/tokens/type#type-styles).
+ *
+ * - `title`: Intended to be used for large page titles.
+ * - `heading`: Intended to be used for headings and large text.
+ * - `body`: Intended to be used for standard body text.
+ * - `subtext`: Intended to be used for small subtext content or in tight spaces.
+ *
+ * Each level has three sizes: `large`, `medium`, and `small`.
+ *
+ * You can provide any level and size to the `typeLevel` prop, and it will apply the correct styles accordingly.
+ * In the example below we're providing the `subtext` level and `small` size to the component with the value `subtext.small`.
+ *
+ * @example
+ * ```tsx
+ * import { Text } from '@workday/canvas-kit-react/text';
+ *
+ * const CustomErrorText = () => (
+ *   <Text typeLevel="subtext.small" variant="error">
+ *     Error Text
+ *   </Text>
+ * );
+ * ```
+*/
 exports.Text = common_1.createComponent('span')({
     displayName: 'Text',
     Component: function (_a, ref, Element) {

package/dist/commonjs/text/lib/TypeLevelComponents.d.ts

@@ -1,13 +1,132 @@
 import { TextProps } from '@workday/canvas-kit-react/text';
 /**
- * Props interface for type level specific component:
+ * Prop interface for type level specific components:
  * Title, Heading, BodyText, Subtext.
  */
 export interface TypeLevelProps extends Omit<TextProps, 'typeLevel'> {
+    /**
+     * Each type level has three sizes: `large`, `medium`, and `small`.
+     */
     size: 'large' | 'medium' | 'small';
 }
+/**
+ * ## Subtext
+ * [View Docs](https://canvas.workday.com/components/text/subtext)
+ *
+ * ---
+ * This component is intended to be used for small subtext content or in tight spaces.
+ * By default, it renders a semantic `p` element, but you can adjust this as needed with the `as` prop.
+ * It has three sizes: large, medium, and small.
+ * Here's a quick reference for font-sizes and weights:
+ *
+ * - `large`
+ *   - font-size: 14px (0.875rem)
+ *   - font-weight: regular (400)
+ * - `medium`
+ *   - font-size: 12px (0.75rem)
+ *   - font-weight: regular (400)
+ * - `small`
+ *   - font-size: 10px (0.625rem)
+ *   - font-weight: regular (400)
+ *
+ * @example
+ * ```tsx
+ * import { Subtext } from '@workday/canvas-kit-react/text';
+ *
+ * const CustomSubtext = () => (
+ *   <Subtext size="small">Subtext</Subtext>
+ * );
+ * ```
+ */
 export declare const Subtext: import("../../common").ElementComponent<"p", TypeLevelProps>;
+/**
+ * ## BodyText
+ * [View Docs](https://canvas.workday.com/components/text/body-text)
+ *
+ * ---
+ * This component is intended to be used for standard body text.
+ * By default, it renders a semantic `p` element, but you can adjust this as needed with the `as` prop.
+ * It has three sizes: large, medium, and small.
+ * Here's a quick reference for font-sizes and weights:
+ *
+ * - `large`
+ *   - font-size: 20px (1.25rem)
+ *   - font-weight: regular (400)
+ * - `medium`
+ *   - font-size: 18px (1.125rem)
+ *   - font-weight: regular (400)
+ * - `small`
+ *   - font-size: 16px (1rem)
+ *   - font-weight: regular (400)
+ *
+ * @example
+ * ```tsx
+ * import { BodyText } from '@workday/canvas-kit-react/text';
+ *
+ * const CustomBodyText = () => (
+ *   <BodyText size="small">Body Text</BodyText>
+ * );
+ * ```
+ */
 export declare const BodyText: import("../../common").ElementComponent<"p", TypeLevelProps>;
+/**
+ * ## Heading
+ * [View Docs](https://canvas.workday.com/components/text/heading)
+ *
+ * ---
+ * This component is intended to be used for headings and large text.
+ * By default, it renders a semantic `h2` element, but you can adjust this as needed with the `as` prop.
+ * It has three sizes: large, medium, and small.
+ * Here's a quick reference for font-sizes and weights:
+ *
+ * - `large`
+ *   - font-size: 32px (2rem)
+ *   - font-weight: bold (700)
+ * - `medium`
+ *   - font-size: 28px (1.75rem)
+ *   - font-weight: bold (700)
+ * - `small`
+ *   - font-size: 24px (1.5rem)
+ *   - font-weight: bold (700)
+ *
+ * @example
+ * ```tsx
+ * import { Heading } from '@workday/canvas-kit-react/text';
+ *
+ * const CustomHeading = () => (
+ *   <Heading size="small">Heading Text</Heading>
+ * );
+ * ```
+ */
 export declare const Heading: import("../../common").ElementComponent<"h2", TypeLevelProps>;
+/**
+ * ## Title
+ * [View Docs](https://canvas.workday.com/components/text/title)
+ *
+ * ---
+ * This component is intended to be used large page titles.
+ * By default, it renders a semantic `h1` element, but you can adjust this as needed with the `as` prop.
+ * It has three sizes: large, medium, and small.
+ * Here's a quick reference for font-sizes and weights:
+ *
+ * - `large`
+ *   - font-size: 56px (3/5rem)
+ *   - font-weight: bold (700)
+ * - `medium`
+ *   - font-size: 48px (3rem)
+ *   - font-weight: bold (700)
+ * - `small`
+ *   - font-size: 40px (2.5rem)
+ *   - font-weight: bold (700)
+ *
+ * @example
+ * ```tsx
+ * import { Title } from '@workday/canvas-kit-react/text';
+ *
+ * const CustomTitle = () => (
+ *   <Title size="small">Title Text</Title>
+ * );
+ * ```
+ */
 export declare const Title: import("../../common").ElementComponent<"h1", TypeLevelProps>;
 //# sourceMappingURL=TypeLevelComponents.d.ts.map

package/dist/commonjs/text/lib/TypeLevelComponents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TypeLevelComponents.d.ts","sourceRoot":"","sources":["../../../../text/lib/TypeLevelComponents.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,SAAS,EAAC,MAAM,gCAAgC,CAAC;AAE/D;;;GAGG;AACH,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,WAAW,CAAC;IAClE,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACpC;AAED,eAAO,MAAM,OAAO,8DAMlB,CAAC;AAEH,eAAO,MAAM,QAAQ,8DAMnB,CAAC;AAEH,eAAO,MAAM,OAAO,+DAMlB,CAAC;AAEH,eAAO,MAAM,KAAK,+DAMhB,CAAC"}
+{"version":3,"file":"TypeLevelComponents.d.ts","sourceRoot":"","sources":["../../../../text/lib/TypeLevelComponents.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,SAAS,EAAC,MAAM,gCAAgC,CAAC;AAE/D;;;GAGG;AACH,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,WAAW,CAAC;IAClE;;OAEG;IACH,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACpC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,OAAO,8DAMlB,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,QAAQ,8DAQnB,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,OAAO,+DAMlB,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,KAAK,+DAMhB,CAAC"}

package/dist/commonjs/text/lib/TypeLevelComponents.js

@@ -45,6 +45,35 @@ exports.Title = exports.Heading = exports.BodyText = exports.Subtext = void 0;
 var React = __importStar(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
 var text_1 = require("@workday/canvas-kit-react/text");
+/**
+ * ## Subtext
+ * [View Docs](https://canvas.workday.com/components/text/subtext)
+ *
+ * ---
+ * This component is intended to be used for small subtext content or in tight spaces.
+ * By default, it renders a semantic `p` element, but you can adjust this as needed with the `as` prop.
+ * It has three sizes: large, medium, and small.
+ * Here's a quick reference for font-sizes and weights:
+ *
+ * - `large`
+ *   - font-size: 14px (0.875rem)
+ *   - font-weight: regular (400)
+ * - `medium`
+ *   - font-size: 12px (0.75rem)
+ *   - font-weight: regular (400)
+ * - `small`
+ *   - font-size: 10px (0.625rem)
+ *   - font-weight: regular (400)
+ *
+ * @example
+ * ```tsx
+ * import { Subtext } from '@workday/canvas-kit-react/text';
+ *
+ * const CustomSubtext = () => (
+ *   <Subtext size="small">Subtext</Subtext>
+ * );
+ * ```
+ */
 exports.Subtext = common_1.createComponent('p')({
     displayName: 'Subtext',
     Component: function (_a, ref, Element) {
@@ -53,14 +82,72 @@ exports.Subtext = common_1.createComponent('p')({
         return React.createElement(text_1.Text, __assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
     },
 });
+/**
+ * ## BodyText
+ * [View Docs](https://canvas.workday.com/components/text/body-text)
+ *
+ * ---
+ * This component is intended to be used for standard body text.
+ * By default, it renders a semantic `p` element, but you can adjust this as needed with the `as` prop.
+ * It has three sizes: large, medium, and small.
+ * Here's a quick reference for font-sizes and weights:
+ *
+ * - `large`
+ *   - font-size: 20px (1.25rem)
+ *   - font-weight: regular (400)
+ * - `medium`
+ *   - font-size: 18px (1.125rem)
+ *   - font-weight: regular (400)
+ * - `small`
+ *   - font-size: 16px (1rem)
+ *   - font-weight: regular (400)
+ *
+ * @example
+ * ```tsx
+ * import { BodyText } from '@workday/canvas-kit-react/text';
+ *
+ * const CustomBodyText = () => (
+ *   <BodyText size="small">Body Text</BodyText>
+ * );
+ * ```
+ */
 exports.BodyText = common_1.createComponent('p')({
     displayName: 'BodyText',
     Component: function (_a, ref, Element) {
         var size = _a.size, elemProps = __rest(_a, ["size"]);
         var typeLevel = "body." + size;
-        return React.createElement(text_1.Text, __assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
+        return (React.createElement(text_1.Text, __assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps)));
     },
 });
+/**
+ * ## Heading
+ * [View Docs](https://canvas.workday.com/components/text/heading)
+ *
+ * ---
+ * This component is intended to be used for headings and large text.
+ * By default, it renders a semantic `h2` element, but you can adjust this as needed with the `as` prop.
+ * It has three sizes: large, medium, and small.
+ * Here's a quick reference for font-sizes and weights:
+ *
+ * - `large`
+ *   - font-size: 32px (2rem)
+ *   - font-weight: bold (700)
+ * - `medium`
+ *   - font-size: 28px (1.75rem)
+ *   - font-weight: bold (700)
+ * - `small`
+ *   - font-size: 24px (1.5rem)
+ *   - font-weight: bold (700)
+ *
+ * @example
+ * ```tsx
+ * import { Heading } from '@workday/canvas-kit-react/text';
+ *
+ * const CustomHeading = () => (
+ *   <Heading size="small">Heading Text</Heading>
+ * );
+ * ```
+ */
 exports.Heading = common_1.createComponent('h2')({
     displayName: 'Heading',
     Component: function (_a, ref, Element) {
@@ -69,6 +156,35 @@ exports.Heading = common_1.createComponent('h2')({
         return React.createElement(text_1.Text, __assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
     },
 });
+/**
+ * ## Title
+ * [View Docs](https://canvas.workday.com/components/text/title)
+ *
+ * ---
+ * This component is intended to be used large page titles.
+ * By default, it renders a semantic `h1` element, but you can adjust this as needed with the `as` prop.
+ * It has three sizes: large, medium, and small.
+ * Here's a quick reference for font-sizes and weights:
+ *
+ * - `large`
+ *   - font-size: 56px (3/5rem)
+ *   - font-weight: bold (700)
+ * - `medium`
+ *   - font-size: 48px (3rem)
+ *   - font-weight: bold (700)
+ * - `small`
+ *   - font-size: 40px (2.5rem)
+ *   - font-weight: bold (700)
+ *
+ * @example
+ * ```tsx
+ * import { Title } from '@workday/canvas-kit-react/text';
+ *
+ * const CustomTitle = () => (
+ *   <Title size="small">Title Text</Title>
+ * );
+ * ```
+ */
 exports.Title = common_1.createComponent('h1')({
     displayName: 'Title',
     Component: function (_a, ref, Element) {

package/dist/es6/text/lib/LabelText.d.ts

@@ -4,5 +4,27 @@ export interface TypeLabelProps extends TextProps {
     cursor?: Property.Cursor;
     disabled?: boolean;
 }
+/**
+ * ## LabelText
+ * [View Docs](https://canvas.workday.com/components/text/label-text)
+ *
+ * ---
+ * This component is intended to be used for labeling input fields.
+ * It's built on top of the `Text` component, so it has access to all `TextProps`.
+ * By default, it renders a semantic `label` element.
+ *
+ * It also uses the `subtext.large` typeLevel by default:
+ * - font-size: 14px (0.875rem)
+ * - font-weight: regular (400)
+ *
+ * @example
+ * ```tsx
+ * import { LabelText } from '@workday/canvas-kit-react/text';
+ *
+ * const CustomLabelText = () => (
+ *   <LabelText>Input Label Text</LabelText>
+ * );
+ * ```
+ */
 export declare const LabelText: import("../../common").ElementComponent<"label", TypeLabelProps>;
 //# sourceMappingURL=LabelText.d.ts.map

package/dist/es6/text/lib/LabelText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LabelText.d.ts","sourceRoot":"","sources":["../../../../text/lib/LabelText.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEjC,OAAO,EAAO,SAAS,EAAC,MAAM,gCAAgC,CAAC;AAG/D,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,MAAM,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAUD,eAAO,MAAM,SAAS,kEAKpB,CAAC"}
+{"version":3,"file":"LabelText.d.ts","sourceRoot":"","sources":["../../../../text/lib/LabelText.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEjC,OAAO,EAAO,SAAS,EAAC,MAAM,gCAAgC,CAAC;AAG/D,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,MAAM,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAUD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,SAAS,kEAKpB,CAAC"}

package/dist/es6/text/lib/LabelText.js

@@ -21,6 +21,28 @@ var StyledLabel = styled(Text.as('label'))(function (_a) {
         opacity: disabled && variant === 'inverse' ? '.4' : '1',
     });
 });
+/**
+ * ## LabelText
+ * [View Docs](https://canvas.workday.com/components/text/label-text)
+ *
+ * ---
+ * This component is intended to be used for labeling input fields.
+ * It's built on top of the `Text` component, so it has access to all `TextProps`.
+ * By default, it renders a semantic `label` element.
+ *
+ * It also uses the `subtext.large` typeLevel by default:
+ * - font-size: 14px (0.875rem)
+ * - font-weight: regular (400)
+ *
+ * @example
+ * ```tsx
+ * import { LabelText } from '@workday/canvas-kit-react/text';
+ *
+ * const CustomLabelText = () => (
+ *   <LabelText>Input Label Text</LabelText>
+ * );
+ * ```
+ */
 export var LabelText = createComponent('label')({
     displayName: 'Label',
     Component: function (elemProps, ref, Element) {

package/dist/es6/text/lib/Text.d.ts

@@ -3,12 +3,56 @@ import { BoxProps } from '@workday/canvas-kit-react/layout';
 export interface TextProps extends BoxProps {
     /**
      * Type token as string with level and size separated by dot.
-     */
+     * These values map to our [Canvas type levels](https://canvas.workday.com/tokens/type#type-styles).
+     *
+     * @example
+     * ```tsx
+     * <Text typeLevel="body.small">Small body text</Text>
+     * ```
+    */
     typeLevel?: `${keyof CanvasTypeHierarchy}.${'large' | 'medium' | 'small'}`;
     /**
      * Type variant token names: `error`, `hint` or `inverse`.
-     */
+     *
+     * @example
+     * ```tsx
+     * <Text variant="error" typeLevel="subtext.large">Error text</Text>
+     * ```
+    */
     variant?: keyof CanvasTypeVariants;
 }
+/**
+ * ## Text
+ * [View Docs](https://canvas.workday.com/components/text/text)
+ *
+ * ---
+ * This is a generic base component intended to render any text.
+ * It's built on top of the `Box` component, so it has access to all [BoxProps](https://canvas.workday.com/components/layout/box/#props).
+ * It also has `typeLevel` and `variant` style props that simplify navigating our type hierarchy and using [Canvas type tokens](https://canvas.workday.com/tokens/type#type-styles).
+ * By default, it renders a semantic `span` element, but you can adjust this as needed with the `as` prop.
+ *
+ * The type hierarchy is organized into four levels, which correspond to our [Canvas type levels](https://canvas.workday.com/tokens/type#type-styles).
+ *
+ * - `title`: Intended to be used for large page titles.
+ * - `heading`: Intended to be used for headings and large text.
+ * - `body`: Intended to be used for standard body text.
+ * - `subtext`: Intended to be used for small subtext content or in tight spaces.
+ *
+ * Each level has three sizes: `large`, `medium`, and `small`.
+ *
+ * You can provide any level and size to the `typeLevel` prop, and it will apply the correct styles accordingly.
+ * In the example below we're providing the `subtext` level and `small` size to the component with the value `subtext.small`.
+ *
+ * @example
+ * ```tsx
+ * import { Text } from '@workday/canvas-kit-react/text';
+ *
+ * const CustomErrorText = () => (
+ *   <Text typeLevel="subtext.small" variant="error">
+ *     Error Text
+ *   </Text>
+ * );
+ * ```
+*/
 export declare const Text: import("../../common").ElementComponent<"span", TextProps>;
 //# sourceMappingURL=Text.d.ts.map

package/dist/es6/text/lib/Text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../text/lib/Text.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,mBAAmB,EAAE,kBAAkB,EAAC,MAAM,kCAAkC,CAAC;AAC/F,OAAO,EAAM,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAE/D,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;OAEG;IACF,SAAS,CAAC,EAAE,GAAG,MAAM,mBAAmB,IAAI,OAAO,GAAC,QAAQ,GAAC,OAAO,EAAE,CAAC;IACxE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,kBAAkB,CAAC;CACpC;AA2CD,eAAO,MAAM,IAAI,4DAOf,CAAC"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../text/lib/Text.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,mBAAmB,EAAE,kBAAkB,EAAC,MAAM,kCAAkC,CAAC;AAC/F,OAAO,EAAM,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAE/D,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;;;;;;;MAQE;IACF,SAAS,CAAC,EAAE,GAAG,MAAM,mBAAmB,IAAI,OAAO,GAAC,QAAQ,GAAC,OAAO,EAAE,CAAC;IACvE;;;;;;;MAOE;IACF,OAAO,CAAC,EAAE,MAAM,kBAAkB,CAAC;CACpC;AA2CD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCE;AACF,eAAO,MAAM,IAAI,4DAOf,CAAC"}

package/dist/es6/text/lib/Text.js

@@ -27,7 +27,7 @@ import { type } from '@workday/canvas-kit-react/tokens';
 import { Box } from '@workday/canvas-kit-react/layout';
 /**
  * Function returns updated props by token and variant values
- */
+*/
 var validateProps = function (_a) {
     var typeLevel = _a.typeLevel, variant = _a.variant, props = __rest(_a, ["typeLevel", "variant"]);
     var updatedProps = props;
@@ -59,6 +59,39 @@ var validateProps = function (_a) {
     }
     return updatedProps;
 };
+/**
+ * ## Text
+ * [View Docs](https://canvas.workday.com/components/text/text)
+ *
+ * ---
+ * This is a generic base component intended to render any text.
+ * It's built on top of the `Box` component, so it has access to all [BoxProps](https://canvas.workday.com/components/layout/box/#props).
+ * It also has `typeLevel` and `variant` style props that simplify navigating our type hierarchy and using [Canvas type tokens](https://canvas.workday.com/tokens/type#type-styles).
+ * By default, it renders a semantic `span` element, but you can adjust this as needed with the `as` prop.
+ *
+ * The type hierarchy is organized into four levels, which correspond to our [Canvas type levels](https://canvas.workday.com/tokens/type#type-styles).
+ *
+ * - `title`: Intended to be used for large page titles.
+ * - `heading`: Intended to be used for headings and large text.
+ * - `body`: Intended to be used for standard body text.
+ * - `subtext`: Intended to be used for small subtext content or in tight spaces.
+ *
+ * Each level has three sizes: `large`, `medium`, and `small`.
+ *
+ * You can provide any level and size to the `typeLevel` prop, and it will apply the correct styles accordingly.
+ * In the example below we're providing the `subtext` level and `small` size to the component with the value `subtext.small`.
+ *
+ * @example
+ * ```tsx
+ * import { Text } from '@workday/canvas-kit-react/text';
+ *
+ * const CustomErrorText = () => (
+ *   <Text typeLevel="subtext.small" variant="error">
+ *     Error Text
+ *   </Text>
+ * );
+ * ```
+*/
 export var Text = createComponent('span')({
     displayName: 'Text',
     Component: function (_a, ref, Element) {

package/dist/es6/text/lib/TypeLevelComponents.d.ts

@@ -1,13 +1,132 @@
 import { TextProps } from '@workday/canvas-kit-react/text';
 /**
- * Props interface for type level specific component:
+ * Prop interface for type level specific components:
  * Title, Heading, BodyText, Subtext.
  */
 export interface TypeLevelProps extends Omit<TextProps, 'typeLevel'> {
+    /**
+     * Each type level has three sizes: `large`, `medium`, and `small`.
+     */
     size: 'large' | 'medium' | 'small';
 }
+/**
+ * ## Subtext
+ * [View Docs](https://canvas.workday.com/components/text/subtext)
+ *
+ * ---
+ * This component is intended to be used for small subtext content or in tight spaces.
+ * By default, it renders a semantic `p` element, but you can adjust this as needed with the `as` prop.
+ * It has three sizes: large, medium, and small.
+ * Here's a quick reference for font-sizes and weights:
+ *
+ * - `large`
+ *   - font-size: 14px (0.875rem)
+ *   - font-weight: regular (400)
+ * - `medium`
+ *   - font-size: 12px (0.75rem)
+ *   - font-weight: regular (400)
+ * - `small`
+ *   - font-size: 10px (0.625rem)
+ *   - font-weight: regular (400)
+ *
+ * @example
+ * ```tsx
+ * import { Subtext } from '@workday/canvas-kit-react/text';
+ *
+ * const CustomSubtext = () => (
+ *   <Subtext size="small">Subtext</Subtext>
+ * );
+ * ```
+ */
 export declare const Subtext: import("../../common").ElementComponent<"p", TypeLevelProps>;
+/**
+ * ## BodyText
+ * [View Docs](https://canvas.workday.com/components/text/body-text)
+ *
+ * ---
+ * This component is intended to be used for standard body text.
+ * By default, it renders a semantic `p` element, but you can adjust this as needed with the `as` prop.
+ * It has three sizes: large, medium, and small.
+ * Here's a quick reference for font-sizes and weights:
+ *
+ * - `large`
+ *   - font-size: 20px (1.25rem)
+ *   - font-weight: regular (400)
+ * - `medium`
+ *   - font-size: 18px (1.125rem)
+ *   - font-weight: regular (400)
+ * - `small`
+ *   - font-size: 16px (1rem)
+ *   - font-weight: regular (400)
+ *
+ * @example
+ * ```tsx
+ * import { BodyText } from '@workday/canvas-kit-react/text';
+ *
+ * const CustomBodyText = () => (
+ *   <BodyText size="small">Body Text</BodyText>
+ * );
+ * ```
+ */
 export declare const BodyText: import("../../common").ElementComponent<"p", TypeLevelProps>;
+/**
+ * ## Heading
+ * [View Docs](https://canvas.workday.com/components/text/heading)
+ *
+ * ---
+ * This component is intended to be used for headings and large text.
+ * By default, it renders a semantic `h2` element, but you can adjust this as needed with the `as` prop.
+ * It has three sizes: large, medium, and small.
+ * Here's a quick reference for font-sizes and weights:
+ *
+ * - `large`
+ *   - font-size: 32px (2rem)
+ *   - font-weight: bold (700)
+ * - `medium`
+ *   - font-size: 28px (1.75rem)
+ *   - font-weight: bold (700)
+ * - `small`
+ *   - font-size: 24px (1.5rem)
+ *   - font-weight: bold (700)
+ *
+ * @example
+ * ```tsx
+ * import { Heading } from '@workday/canvas-kit-react/text';
+ *
+ * const CustomHeading = () => (
+ *   <Heading size="small">Heading Text</Heading>
+ * );
+ * ```
+ */
 export declare const Heading: import("../../common").ElementComponent<"h2", TypeLevelProps>;
+/**
+ * ## Title
+ * [View Docs](https://canvas.workday.com/components/text/title)
+ *
+ * ---
+ * This component is intended to be used large page titles.
+ * By default, it renders a semantic `h1` element, but you can adjust this as needed with the `as` prop.
+ * It has three sizes: large, medium, and small.
+ * Here's a quick reference for font-sizes and weights:
+ *
+ * - `large`
+ *   - font-size: 56px (3/5rem)
+ *   - font-weight: bold (700)
+ * - `medium`
+ *   - font-size: 48px (3rem)
+ *   - font-weight: bold (700)
+ * - `small`
+ *   - font-size: 40px (2.5rem)
+ *   - font-weight: bold (700)
+ *
+ * @example
+ * ```tsx
+ * import { Title } from '@workday/canvas-kit-react/text';
+ *
+ * const CustomTitle = () => (
+ *   <Title size="small">Title Text</Title>
+ * );
+ * ```
+ */
 export declare const Title: import("../../common").ElementComponent<"h1", TypeLevelProps>;
 //# sourceMappingURL=TypeLevelComponents.d.ts.map

package/dist/es6/text/lib/TypeLevelComponents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TypeLevelComponents.d.ts","sourceRoot":"","sources":["../../../../text/lib/TypeLevelComponents.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,SAAS,EAAC,MAAM,gCAAgC,CAAC;AAE/D;;;GAGG;AACH,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,WAAW,CAAC;IAClE,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACpC;AAED,eAAO,MAAM,OAAO,8DAMlB,CAAC;AAEH,eAAO,MAAM,QAAQ,8DAMnB,CAAC;AAEH,eAAO,MAAM,OAAO,+DAMlB,CAAC;AAEH,eAAO,MAAM,KAAK,+DAMhB,CAAC"}
+{"version":3,"file":"TypeLevelComponents.d.ts","sourceRoot":"","sources":["../../../../text/lib/TypeLevelComponents.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,SAAS,EAAC,MAAM,gCAAgC,CAAC;AAE/D;;;GAGG;AACH,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,WAAW,CAAC;IAClE;;OAEG;IACH,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACpC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,OAAO,8DAMlB,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,QAAQ,8DAQnB,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,OAAO,+DAMlB,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,KAAK,+DAMhB,CAAC"}

package/dist/es6/text/lib/TypeLevelComponents.js

@@ -23,6 +23,35 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { Text } from '@workday/canvas-kit-react/text';
+/**
+ * ## Subtext
+ * [View Docs](https://canvas.workday.com/components/text/subtext)
+ *
+ * ---
+ * This component is intended to be used for small subtext content or in tight spaces.
+ * By default, it renders a semantic `p` element, but you can adjust this as needed with the `as` prop.
+ * It has three sizes: large, medium, and small.
+ * Here's a quick reference for font-sizes and weights:
+ *
+ * - `large`
+ *   - font-size: 14px (0.875rem)
+ *   - font-weight: regular (400)
+ * - `medium`
+ *   - font-size: 12px (0.75rem)
+ *   - font-weight: regular (400)
+ * - `small`
+ *   - font-size: 10px (0.625rem)
+ *   - font-weight: regular (400)
+ *
+ * @example
+ * ```tsx
+ * import { Subtext } from '@workday/canvas-kit-react/text';
+ *
+ * const CustomSubtext = () => (
+ *   <Subtext size="small">Subtext</Subtext>
+ * );
+ * ```
+ */
 export var Subtext = createComponent('p')({
     displayName: 'Subtext',
     Component: function (_a, ref, Element) {
@@ -31,14 +60,72 @@ export var Subtext = createComponent('p')({
         return React.createElement(Text, __assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
     },
 });
+/**
+ * ## BodyText
+ * [View Docs](https://canvas.workday.com/components/text/body-text)
+ *
+ * ---
+ * This component is intended to be used for standard body text.
+ * By default, it renders a semantic `p` element, but you can adjust this as needed with the `as` prop.
+ * It has three sizes: large, medium, and small.
+ * Here's a quick reference for font-sizes and weights:
+ *
+ * - `large`
+ *   - font-size: 20px (1.25rem)
+ *   - font-weight: regular (400)
+ * - `medium`
+ *   - font-size: 18px (1.125rem)
+ *   - font-weight: regular (400)
+ * - `small`
+ *   - font-size: 16px (1rem)
+ *   - font-weight: regular (400)
+ *
+ * @example
+ * ```tsx
+ * import { BodyText } from '@workday/canvas-kit-react/text';
+ *
+ * const CustomBodyText = () => (
+ *   <BodyText size="small">Body Text</BodyText>
+ * );
+ * ```
+ */
 export var BodyText = createComponent('p')({
     displayName: 'BodyText',
     Component: function (_a, ref, Element) {
         var size = _a.size, elemProps = __rest(_a, ["size"]);
         var typeLevel = "body." + size;
-        return React.createElement(Text, __assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
+        return (React.createElement(Text, __assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps)));
     },
 });
+/**
+ * ## Heading
+ * [View Docs](https://canvas.workday.com/components/text/heading)
+ *
+ * ---
+ * This component is intended to be used for headings and large text.
+ * By default, it renders a semantic `h2` element, but you can adjust this as needed with the `as` prop.
+ * It has three sizes: large, medium, and small.
+ * Here's a quick reference for font-sizes and weights:
+ *
+ * - `large`
+ *   - font-size: 32px (2rem)
+ *   - font-weight: bold (700)
+ * - `medium`
+ *   - font-size: 28px (1.75rem)
+ *   - font-weight: bold (700)
+ * - `small`
+ *   - font-size: 24px (1.5rem)
+ *   - font-weight: bold (700)
+ *
+ * @example
+ * ```tsx
+ * import { Heading } from '@workday/canvas-kit-react/text';
+ *
+ * const CustomHeading = () => (
+ *   <Heading size="small">Heading Text</Heading>
+ * );
+ * ```
+ */
 export var Heading = createComponent('h2')({
     displayName: 'Heading',
     Component: function (_a, ref, Element) {
@@ -47,6 +134,35 @@ export var Heading = createComponent('h2')({
         return React.createElement(Text, __assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
     },
 });
+/**
+ * ## Title
+ * [View Docs](https://canvas.workday.com/components/text/title)
+ *
+ * ---
+ * This component is intended to be used large page titles.
+ * By default, it renders a semantic `h1` element, but you can adjust this as needed with the `as` prop.
+ * It has three sizes: large, medium, and small.
+ * Here's a quick reference for font-sizes and weights:
+ *
+ * - `large`
+ *   - font-size: 56px (3/5rem)
+ *   - font-weight: bold (700)
+ * - `medium`
+ *   - font-size: 48px (3rem)
+ *   - font-weight: bold (700)
+ * - `small`
+ *   - font-size: 40px (2.5rem)
+ *   - font-weight: bold (700)
+ *
+ * @example
+ * ```tsx
+ * import { Title } from '@workday/canvas-kit-react/text';
+ *
+ * const CustomTitle = () => (
+ *   <Title size="small">Title Text</Title>
+ * );
+ * ```
+ */
 export var Title = createComponent('h1')({
     displayName: 'Title',
     Component: function (_a, ref, Element) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "8.0.0-alpha.252-next.21+0ce754ca",
+  "version": "8.0.0-alpha.254-next.23+2fa69377",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,7 +49,7 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^8.0.0-alpha.252-next.21+0ce754ca",
+    "@workday/canvas-kit-popup-stack": "^8.0.0-alpha.254-next.23+2fa69377",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
@@ -67,5 +67,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "0ce754caca6bcdb3876ccb8e012cfecddaffb882"
+  "gitHead": "2fa69377808c5dd76337d1b34dbd4ede07c7e1c4"
 }

package/text/lib/LabelText.tsx

@@ -17,6 +17,28 @@ const StyledLabel = styled(Text.as('label'))<StyledType & TypeLabelProps>(
   })
 );
 
+/**
+ * ## LabelText
+ * [View Docs](https://canvas.workday.com/components/text/label-text)
+ *
+ * ---
+ * This component is intended to be used for labeling input fields.
+ * It's built on top of the `Text` component, so it has access to all `TextProps`.
+ * By default, it renders a semantic `label` element.
+ *
+ * It also uses the `subtext.large` typeLevel by default:
+ * - font-size: 14px (0.875rem)
+ * - font-weight: regular (400)
+ *
+ * @example
+ * ```tsx
+ * import { LabelText } from '@workday/canvas-kit-react/text';
+ *
+ * const CustomLabelText = () => (
+ *   <LabelText>Input Label Text</LabelText>
+ * );
+ * ```
+ */
 export const LabelText = createComponent('label')({
   displayName: 'Label',
   Component: (elemProps: TypeLabelProps, ref, Element) => {

package/text/lib/Text.tsx

@@ -7,17 +7,28 @@ import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
 export interface TextProps extends BoxProps {
   /**
    * Type token as string with level and size separated by dot.
-   */
-   typeLevel?: `${keyof CanvasTypeHierarchy}.${'large'|'medium'|'small'}`;
+   * These values map to our [Canvas type levels](https://canvas.workday.com/tokens/type#type-styles).
+   * 
+   * @example
+   * ```tsx
+   * <Text typeLevel="body.small">Small body text</Text>
+   * ```
+  */
+  typeLevel?: `${keyof CanvasTypeHierarchy}.${'large'|'medium'|'small'}`;
   /**
    * Type variant token names: `error`, `hint` or `inverse`.
-   */
+   * 
+   * @example
+   * ```tsx
+   * <Text variant="error" typeLevel="subtext.large">Error text</Text>
+   * ```
+  */
   variant?: keyof CanvasTypeVariants;
 }
 
 /**
  * Function returns updated props by token and variant values
- */
+*/
 const validateProps = ({typeLevel, variant, ...props}: TextProps) => {
   let updatedProps: any = props;
   const tokenPropNames = [
@@ -56,6 +67,39 @@ const validateProps = ({typeLevel, variant, ...props}: TextProps) => {
   return updatedProps;
 };
 
+/**
+ * ## Text
+ * [View Docs](https://canvas.workday.com/components/text/text)
+ * 
+ * ---
+ * This is a generic base component intended to render any text.
+ * It's built on top of the `Box` component, so it has access to all [BoxProps](https://canvas.workday.com/components/layout/box/#props).
+ * It also has `typeLevel` and `variant` style props that simplify navigating our type hierarchy and using [Canvas type tokens](https://canvas.workday.com/tokens/type#type-styles).
+ * By default, it renders a semantic `span` element, but you can adjust this as needed with the `as` prop.
+ * 
+ * The type hierarchy is organized into four levels, which correspond to our [Canvas type levels](https://canvas.workday.com/tokens/type#type-styles).
+ *
+ * - `title`: Intended to be used for large page titles.
+ * - `heading`: Intended to be used for headings and large text.
+ * - `body`: Intended to be used for standard body text.
+ * - `subtext`: Intended to be used for small subtext content or in tight spaces.
+ *
+ * Each level has three sizes: `large`, `medium`, and `small`.
+ * 
+ * You can provide any level and size to the `typeLevel` prop, and it will apply the correct styles accordingly.
+ * In the example below we're providing the `subtext` level and `small` size to the component with the value `subtext.small`.
+ * 
+ * @example
+ * ```tsx
+ * import { Text } from '@workday/canvas-kit-react/text';
+ * 
+ * const CustomErrorText = () => (
+ *   <Text typeLevel="subtext.small" variant="error">
+ *     Error Text
+ *   </Text>
+ * );
+ * ```
+*/
 export const Text = createComponent('span')({
   displayName: 'Text',
   Component: ({children, ...elemProps}: TextProps, ref, Element) => (

package/text/lib/TypeLevelComponents.tsx

@@ -3,13 +3,45 @@ import {createComponent} from '@workday/canvas-kit-react/common';
 import {Text, TextProps} from '@workday/canvas-kit-react/text';
 
 /**
- * Props interface for type level specific component:
+ * Prop interface for type level specific components:
  * Title, Heading, BodyText, Subtext.
  */
 export interface TypeLevelProps extends Omit<TextProps, 'typeLevel'> {
+  /**
+   * Each type level has three sizes: `large`, `medium`, and `small`.
+   */
   size: 'large' | 'medium' | 'small';
 }
 
+/**
+ * ## Subtext
+ * [View Docs](https://canvas.workday.com/components/text/subtext)
+ *
+ * ---
+ * This component is intended to be used for small subtext content or in tight spaces.
+ * By default, it renders a semantic `p` element, but you can adjust this as needed with the `as` prop.
+ * It has three sizes: large, medium, and small.
+ * Here's a quick reference for font-sizes and weights:
+ *
+ * - `large`
+ *   - font-size: 14px (0.875rem)
+ *   - font-weight: regular (400)
+ * - `medium`
+ *   - font-size: 12px (0.75rem)
+ *   - font-weight: regular (400)
+ * - `small`
+ *   - font-size: 10px (0.625rem)
+ *   - font-weight: regular (400)
+ *
+ * @example
+ * ```tsx
+ * import { Subtext } from '@workday/canvas-kit-react/text';
+ *
+ * const CustomSubtext = () => (
+ *   <Subtext size="small">Subtext</Subtext>
+ * );
+ * ```
+ */
 export const Subtext = createComponent('p')({
   displayName: 'Subtext',
   Component: ({size, ...elemProps}: TypeLevelProps, ref, Element) => {
@@ -18,14 +50,74 @@ export const Subtext = createComponent('p')({
   },
 });
 
+/**
+ * ## BodyText
+ * [View Docs](https://canvas.workday.com/components/text/body-text)
+ *
+ * ---
+ * This component is intended to be used for standard body text.
+ * By default, it renders a semantic `p` element, but you can adjust this as needed with the `as` prop.
+ * It has three sizes: large, medium, and small.
+ * Here's a quick reference for font-sizes and weights:
+ *
+ * - `large`
+ *   - font-size: 20px (1.25rem)
+ *   - font-weight: regular (400)
+ * - `medium`
+ *   - font-size: 18px (1.125rem)
+ *   - font-weight: regular (400)
+ * - `small`
+ *   - font-size: 16px (1rem)
+ *   - font-weight: regular (400)
+ *
+ * @example
+ * ```tsx
+ * import { BodyText } from '@workday/canvas-kit-react/text';
+ *
+ * const CustomBodyText = () => (
+ *   <BodyText size="small">Body Text</BodyText>
+ * );
+ * ```
+ */
 export const BodyText = createComponent('p')({
   displayName: 'BodyText',
   Component: ({size, ...elemProps}: TypeLevelProps, ref, Element) => {
     const typeLevel = `body.${size}` as TextProps['typeLevel'];
-    return <Text ref={ref} as={Element} typeLevel={typeLevel} {...elemProps} />;
+    return (
+      <Text ref={ref} as={Element} typeLevel={typeLevel} {...elemProps} />
+    );
   },
 });
 
+/**
+ * ## Heading
+ * [View Docs](https://canvas.workday.com/components/text/heading)
+ *
+ * ---
+ * This component is intended to be used for headings and large text.
+ * By default, it renders a semantic `h2` element, but you can adjust this as needed with the `as` prop.
+ * It has three sizes: large, medium, and small.
+ * Here's a quick reference for font-sizes and weights:
+ *
+ * - `large`
+ *   - font-size: 32px (2rem)
+ *   - font-weight: bold (700)
+ * - `medium`
+ *   - font-size: 28px (1.75rem)
+ *   - font-weight: bold (700)
+ * - `small`
+ *   - font-size: 24px (1.5rem)
+ *   - font-weight: bold (700)
+ *
+ * @example
+ * ```tsx
+ * import { Heading } from '@workday/canvas-kit-react/text';
+ *
+ * const CustomHeading = () => (
+ *   <Heading size="small">Heading Text</Heading>
+ * );
+ * ```
+ */
 export const Heading = createComponent('h2')({
   displayName: 'Heading',
   Component: ({size, ...elemProps}: TypeLevelProps, ref, Element) => {
@@ -34,6 +126,35 @@ export const Heading = createComponent('h2')({
   },
 });
 
+/**
+ * ## Title
+ * [View Docs](https://canvas.workday.com/components/text/title)
+ *
+ * ---
+ * This component is intended to be used large page titles.
+ * By default, it renders a semantic `h1` element, but you can adjust this as needed with the `as` prop.
+ * It has three sizes: large, medium, and small.
+ * Here's a quick reference for font-sizes and weights:
+ *
+ * - `large`
+ *   - font-size: 56px (3/5rem)
+ *   - font-weight: bold (700)
+ * - `medium`
+ *   - font-size: 48px (3rem)
+ *   - font-weight: bold (700)
+ * - `small`
+ *   - font-size: 40px (2.5rem)
+ *   - font-weight: bold (700)
+ *
+ * @example
+ * ```tsx
+ * import { Title } from '@workday/canvas-kit-react/text';
+ *
+ * const CustomTitle = () => (
+ *   <Title size="small">Title Text</Title>
+ * );
+ * ```
+ */
 export const Title = createComponent('h1')({
   displayName: 'Title',
   Component: ({size, ...elemProps}: TypeLevelProps, ref, Element) => {