@workday/canvas-kit-react 9.0.0-alpha.338-next.5 → 9.0.0-alpha.348-next.3

package/popup/lib/hooks/useBringToTopOnClick.ts

@@ -6,10 +6,10 @@ import {usePopupModel} from './usePopupModel';
 
 /**
  * This hook will bring an element to the top of the stack when any element inside the provided
- * PopupModel's `state.stackRef` element is clicked. If `Popup.Popper` was used or `PopupStack.add`
- * provided an `owner`, all "child" popups will also be brought to the top. A "child" popup is a
- * Popup that was opened from another Popup. Usually this is a Tooltip or Select component inside
- * something like a Modal.
+ * {@link PopupModel}'s `state.stackRef` element is clicked. If {@link PopupPopper Popup.Popper} was
+ * used or `PopupStack.add` provided an `owner`, all "child" popups will also be brought to the top.
+ * A "child" popup is a Popup that was opened from another Popup. Usually this is a Tooltip or
+ * Select component inside something like a Modal.
  *
  * This should be used on popup elements that are meant to persist (i.e. Windows).
  */

package/popup/lib/hooks/useCloseOnEscape.ts

@@ -6,8 +6,8 @@ import {createElemPropsHook} from '@workday/canvas-kit-react/common';
 import {usePopupModel} from './usePopupModel';
 
 /**
- * Registers global detection of the Escape key. It will only call the PopupModel's `hide` event if the
- * provided model's `state.stackRef` element is the topmost in the stack.
+ * Registers global detection of the Escape key. It will only call the {@link PopupModel}'s `hide`
+ * event if the provided model's `state.stackRef` element is the topmost in the stack.
  *
  * This should be used with popup elements that are dismissible like Tooltips, Modals, non-modal
  * dialogs, dropdown menus, etc.

package/popup/lib/hooks/useCloseOnOutsideClick.ts

@@ -6,14 +6,14 @@ import {createElemPropsHook} from '@workday/canvas-kit-react/common';
 import {usePopupModel} from './usePopupModel';
 
 /**
- * Registers global listener for all clicks. It will only call the PopupModel's `hide` event if the
- * click happened outside the PopupModel's `state.stackRef` element and its children _and_ the
- * provided `stackRef` element is the topmost element with this behavior applied in the stack. Adds
- * a `data-behavior-click-outside-close="topmost"` attribute to ensure proper functionality.
+ * Registers global listener for all clicks. It will only call the {@link PopupModel}'s `hide` event
+ * if the click happened outside the PopupModel's `state.stackRef` element and its children _and_
+ * the provided `stackRef` element is the topmost element with this behavior applied in the stack.
+ * Adds a `data-behavior-click-outside-close="topmost"` attribute to ensure proper functionality.
  *
  * This should be used with popup elements that are dismissible like Modals, non-modal dialogs,
- * dropdown menus, etc. Tooltips and hierarchical menus should use `useAlwaysCloseOnClickOutside`
- * instead.
+ * dropdown menus, etc. Tooltips and hierarchical menus should use
+ * {@link useAlwaysCloseOnClickOutside} instead.
  */
 export const useCloseOnOutsideClick = createElemPropsHook(usePopupModel)(model => {
   const onClick = React.useCallback(

package/popup/lib/hooks/useInitialFocus.tsx

@@ -11,8 +11,8 @@ import {usePopupModel} from './usePopupModel';
 
 /**
  * Moves focus within the popup when the popup becomes visible. This is useful for keyboard and
- * screen reader users alike. This should be used with `useFocusRedirect` or `useFocusTrap` for a
- * complete focus management solution.
+ * screen reader users alike. This should be used with {@link useFocusRedirect} or
+ * {@link useFocusTrap} for a complete focus management solution.
  *
  * This should be used for popups that have focusable elements inside, like Modals, non-modal
  * dialogs, menus, etc.

package/popup/lib/hooks/usePopupCard.ts

@@ -3,7 +3,7 @@ import {createElemPropsHook} from '@workday/canvas-kit-react/common';
 import {usePopupModel} from './usePopupModel';
 
 /**
- * Adds the necessary props to a `Card` component. Used by the `Popup.Card` subcomponent.
+ * Adds the necessary props to a {@link PopupCard Popup.Card} subcomponent.
  */
 export const usePopupCard = createElemPropsHook(usePopupModel)(({state}) => {
   return {

package/popup/lib/hooks/usePopupCloseButton.ts

@@ -2,8 +2,9 @@ import {createElemPropsHook} from '@workday/canvas-kit-react/common';
 import {usePopupModel} from './usePopupModel';
 
 /**
- * Adds the necessary props to a close button component. Used by the `Popup.CloseButton`
- * subcomponent and `Popup.CloseIcon` subcomponent.
+ * Adds the necessary props to a close button component. Used by the
+ * {@link PopupCloseButton Popup.CloseButton} subcomponent and
+ * {@link PopupCloseIcon Popup.CloseIcon} subcomponent.
  */
 export const usePopupCloseButton = createElemPropsHook(usePopupModel)(({events}) => {
   return {

package/popup/lib/hooks/usePopupHeading.ts

@@ -2,7 +2,7 @@ import {createElemPropsHook} from '@workday/canvas-kit-react/common';
 import {usePopupModel} from './usePopupModel';
 
 /**
- * Adds the necessary props to the `Heading` component. Used by the `Popup.Heading` subcomponent.
+ * Adds the necessary props to the {@link PopupHeading Popup.Heading} subcomponent.
  */
 export const usePopupHeading = createElemPropsHook(usePopupModel)(({state}) => {
   return {

package/popup/lib/hooks/usePopupPopper.ts

@@ -4,7 +4,8 @@ import React from 'react';
 import {Placement} from '../Popper';
 
 /**
- * Hooks a Popper up to a PopupModel
+ * Adds the necessary props to a {@link Popper} component. Used by the
+ * {@link PopupPopper Popup.Popper} subcomponent.
  */
 export const usePopupPopper = createElemPropsHook(usePopupModel)(({state, events}, ref) => {
   const elementRef = useForkRef(ref, state.stackRef);

package/popup/lib/hooks/usePopupStack.ts

@@ -4,38 +4,46 @@ import {PopupStack} from '@workday/canvas-kit-popup-stack';
 import {useLocalRef, useIsRTL} from '@workday/canvas-kit-react/common';
 
 /**
- * This hook should not be used directly. Use the `Popper` component instead.
+ * **Note:** If you're using {@link Popper}, you do not need to use this hook directly.
  *
- * This hook will add the `stackRef` element to the Popup stack on mount and remove on unmount. If
- * you use `Popper`, the popper `stackRef` is automatically added/removed from the Popup stack. The
- * Popup stack is required for proper z-index values to ensure Popups are rendered correct. It is
+ * This hook will add the `stackRef` element to the {@link PopupStack} on mount and remove on unmount. If
+ * you use `Popper`, the popper `stackRef` is automatically added/removed from the `PopupStack`. The
+ * `PopupStack` is required for proper z-index values to ensure Popups are rendered correct. It is
  * also required for global listeners like click outside or escape key closing a popup. Without the
- * Popup stack, all popups will close rather than only the topmost one.
+ * `PopupStack`, all popups will close rather than only the topmost one.
  *
- * If `forwardRef` is provided, it will be the same as `stackRef`. If `forwardRef` is not provided`,
+ * If `ref` is provided, it will be the same as `stackRef`. If `ref` is not provided`,
  * this hook will create one and return it.
  *
  * This hook should be used by all stacked UIs unless using the `Popper` component.
  *
- * @param forwardRef This ref will be managed by the PopupStack and should not be managed by React. Do
+ * ```tsx
+ * const model = usePopupModel();
+ * usePopupStack(model.state.stackRef, model.state.targetRef);
+ *
+ * // add some popup functionality
+ * useCloseOnOutsideClick(model);
+ * useCloseOnEscape(model);
+ *
+ * return (
+ *   <>
+ *     <button ref={model.state.targetRef}>Open Popup</button>
+ *     {model.state.visibility !== 'hidden'
+ *       ? ReactDOM.createPortal(<div>Popup Contents</div>, model.state.stackRef.current)
+ *       : null}
+ *   </>
+ * );
+ * ```
+ *
+ * @param ref This ref will be managed by the PopupStack and should not be managed by React. Do
  * not apply this stackRef to a React element. Doing so will result in an error. Instead, use this
  * `stackRef` directly with `ReactDOM.createPortal(<YourComponent>, stackRef.current!)`. This is
  * definitely strange for React code, but is necessary for the PopupStack to remain framework
- * agnostic and flexible to integrate with existing popup stack systems. If not provided, this hook
+ * agnostic and flexible to integrate with existing `PopupStack` systems. If not provided, this hook
  * will create one and return that `stackRef` instead.
- *
  * @param target Usually the trigger of a popup. This will fix `bringToTop` and should be provided
  * by all ephemeral-type popups (like Tooltips, Select menus, etc). It will also add in clickOutside
  * detection.
- *
- * @example
- * // must be part of a component life-cycle. Use `Popup.Popper` otherwise.
- * const model = usePopupModel({visibility: 'visible'})
- * usePopupStack(model.state.stackRef)
- *
- * // add some popup functionality
- * useCloseOnOutsideClick(model)
- * useCloseOnEscape(model)
  */
 export const usePopupStack = <E extends HTMLElement>(
   ref?: React.Ref<E>,

package/popup/lib/hooks/usePopupTarget.ts

@@ -2,7 +2,7 @@ import {createElemPropsHook, useForkRef} from '@workday/canvas-kit-react/common'
 import {usePopupModel} from './usePopupModel';
 
 /**
- * Adds the necessary props to a `Target` component. Used by the Popup.Target subcomponent.
+ * Adds the necessary props to a {@link PopupTarget Popup.Target} subcomponent.
  */
 export const usePopupTarget = createElemPropsHook(usePopupModel)(({events, state}, ref) => {
   const elementRef = useForkRef(ref, state.targetRef);

package/popup/lib/hooks/useReturnFocus.tsx

@@ -33,8 +33,8 @@ function getFocusableElement(element: Element | null): Element | null {
 
 /**
  * Returns focus to the target element when the popup is hidden. This works well with
- * `useInitialFocus`. This should be used with `useFocusRedirect` or `useFocusTrap` for a complete
- * focus management solution.
+ * {@link useInitialFocus}. This should be used with {@link useFocusRedirect} or
+ * {@link useFocusTrap} for a complete focus management solution.
  *
  * This should be used on popup elements that use `useInitialFocus`.
  */

package/radio/lib/RadioGroup.tsx

@@ -67,7 +67,7 @@ const Container = styled('div')<Pick<RadioGroupProps, 'error' | 'grow' | 'theme'
   }
 );
 
-class RadioGroup extends React.Component<RadioGroupProps> {
+export class RadioGroup extends React.Component<RadioGroupProps> {
   static ErrorType = ErrorType;
 
   render(): React.ReactNode {
@@ -120,5 +120,3 @@ class RadioGroup extends React.Component<RadioGroupProps> {
 }
 
 RadioGroup.ErrorType = ErrorType;
-
-export {RadioGroup};

package/select/lib/Select.tsx

@@ -118,22 +118,9 @@ const SelectWrapper = styled('div')<Pick<SelectProps, 'grow' | 'disabled'>>(
 
 export const Select = createComponent('select')({
   displayName: 'Select',
-  Component: (
-    {disabled = false, error, grow, children, value, onChange, ...elemProps}: SelectProps,
-    ref,
-    Element
-  ) => (
+  Component: ({disabled = false, grow, children, ...elemProps}: SelectProps, ref, Element) => (
     <SelectWrapper grow={grow} disabled={disabled}>
-      <StyledSelect
-        as={Element}
-        disabled={disabled}
-        grow={grow}
-        error={error}
-        ref={ref}
-        value={value}
-        onChange={onChange}
-        {...elemProps}
-      >
+      <StyledSelect as={Element} disabled={disabled} grow={grow} ref={ref} {...elemProps}>
         {children}
       </StyledSelect>
       <SelectDropdownIcon

package/skeleton/lib/skeleton.tsx

@@ -39,6 +39,19 @@ const SkeletonAnimator = styled('div')<SkeletonProps & StyledType>({
   position: 'relative',
 });
 
+/**
+ * Skeleton subcomponents **must** be wrapped by the `Skeleton` container component.
+ *
+ * ```tsx
+ * <Skeleton>
+ *   <Skeleton.Header />
+ *   <Skeleton.Text />
+ * </Skeleton>
+ * ```
+ *
+ * `Skeleton` places its children in a container element with `aria-hidden` set to `true` and
+ * announces itself using a visually hidden element.
+ */
 export const Skeleton = createComponent('div')({
   displayName: 'Skeleton',
   Component: (
@@ -53,8 +66,21 @@ export const Skeleton = createComponent('div')({
     </SkeletonAnimator>
   ),
   subComponents: {
+    /**
+     * `Skeleton.Header` renders a placeholder for header content such as headings.
+     */
     Header: SkeletonHeader,
-    Shape: SkeletonShape,
+    /**
+     * `Skeleton.Text` renders a placeholder for text content such as paragraphs. Each placeholder
+     * line has a width of `100%` and a fixed height of `21px`, with the last line having a width of
+     * `60%` if there are multiple lines.
+     */
     Text: SkeletonText,
+    /**
+     * `Skeleton.Shape` renders a placeholder for graphic elements such as icons, avatars and small
+     * images. Set the `height`, `width`, and `borderRadius` props of the `Skeleton.Shape` to create
+     * various rectangular and circular shapes.
+     */
+    Shape: SkeletonShape,
   },
 });

package/tabs/lib/Tabs.tsx

@@ -19,29 +19,121 @@ export interface TabsProps {
   children: React.ReactNode;
 }
 
+/**
+ * `Tabs` is a container component that is responsible for creating a {@link TabsModel} and sharing
+ * it with its subcomponents using React context. It does not represent a real element.
+ *
+ * ```tsx
+ * <Tabs onSelect={data => console.log('Selected tab', data.id)}>
+ *   {child components}
+ * </Tabs>
+ * ```
+ *
+ * Alternatively, you may pass in a model using the hoisted model pattern.
+ *
+ * ```tsx
+ * const model = useTabsModel({
+ *   onSelect(data) {
+ *     console.log('Activated Tab', data.id);
+ *   },
+ * });
+ *
+ * <Tabs model={model}>{child components}</Tabs>
+ * ```
+ *
+ * See [Configuring a
+ * Model](/getting-started/for-developers/resources/compound-components/#configuring-a-model) for
+ * more information on model configuration.
+ */
 export const Tabs = createContainer()({
   displayName: 'Tabs',
   modelHook: useTabsModel,
   subComponents: {
+    /**
+     * `Tabs.List` is a `<div role="tablist">` element. It is a container for {@link TabsItem Tabs.Item}
+     * subcomponents.
+     *
+     * ```tsx
+     * <Tabs.List>{Tabs.Items}</Tabs.List>
+     * ```
+     */
     List: TabsList,
+    /**
+     * `Tabs.Item` is a `<button role="tab">` element. Each `Tabs.Item` is associated with a
+     * `Tabs.Panel` either by a `data-id` attribute or by the position in the list. If a `data-id`
+     * is provided, it must match the `data-id` passed to the corresponding `Tabs.Panel` component.
+     *
+     * ```tsx
+     * <Tabs.Item data-id="first">First Tab</Tabs.Item>
+     * ```
+     */
     Item: TabsItem,
+    /**
+     * `Tabs.Panel` is a `<div role="tabpanel">` element. It is focusable by default. Each
+     * `Tabs.Panel` is controlled by a `Tabs.Item` either by a `data-id` attribute or by the
+     * position in the list. If a `data-id` is provided, it must match the `data-id` passed to the
+     * corresponding `Tabs.Item` component.
+     *
+     * ```tsx
+     * <Tabs.Panel data-id="first">
+     *   {contents of tab panel}
+     * </Tabs.Panel>
+     * ```
+     */
     Panel: TabsPanel,
+    /**
+     * Optional subcomponent of tabs that makes dealing with dynamic tabs easier. `Tabs.Panels` only
+     * works if the model is given an array of items.
+     *
+     * ```tsx
+     * const items = [{ id: '1', name: 'first' }]
+     * <Tabs items={items}>
+     *   {tab list}
+     *   <Tabs.Panels>
+     *     {item => <Tabs.Panel>Contents of {item.name}</Tabs.Panel>}
+     *   </Tabs.Panels>
+     * </Tabs>
+     * ```
+     */
     Panels: TabsPanels,
+    /**
+     * The overflow button of a `Tabs.List`. When a tab list overflows, this overflow button is
+     * rendered. Overflow only works when the model is given an array of `items`.
+     *
+     * ```tsx
+     * <Tabs items={items}>
+     *   <Tabs.List overflowButton={
+     *     <Tabs.OverflowButton>More</Tabs.OverflowButton>
+     *   }>
+     *     {dynamic tab items}
+     *   </Tabs.List>
+     * </Tabs>
+     * ```
+     */
     OverflowButton: TabsOverflowButton,
+    /**
+     * @deprecated Use `Tabs.Menu.Popper` instead
+     */
     MenuPopper: TabsMenuPopper,
     /**
      * The overflow menu of the Tabs component. If there isn't enough room to render all the tab
      * items, the extra tabs that don't fit will be overflowed into this menu.
-     * @example
+     *
+     * ```tsx
      * <Tabs.Menu.Popper>
      *   <Tabs.Menu.Card>
      *     <Tabs.Menu.List>
-     *       {(item: MyTabItem) => <Tabs.Menu.Item data-id={item.id}>{item.text}</Tabs.Menu.Item>}
+     *       {(item: MyTabItem) => <Tabs.Menu.Item data-id={item.id}>
+     *         {item.text}
+     *       </Tabs.Menu.Item>}
      *     </Tabs.Menu.List>
      *   </Tabs.Menu.Card>
      * </Tabs.Menu.Popper>
+     * ```
      */
-    Menu,
+    // We don't use shorthand here for documentation. The shorthand will give the `Tabs.Menu` the
+    // JSDoc of `Menu` instead of `Tabs.Menu`
+    Menu: Menu,
   },
 })<TabsProps>(({children}, _, model) => {
   return <Menu model={model.menu}>{children}</Menu>;

package/tabs/lib/TabsItem.tsx

@@ -177,8 +177,8 @@ export const useTabsItem = composeHooks(
       const selected = !!elemProps['data-id'] && isSelected(name, state);
 
       return {
-        type: 'button',
-        role: 'tab',
+        type: 'button' as const,
+        role: 'tab' as const,
         id: `${state.id}-${name}`,
         'aria-selected': selected,
         'aria-controls': `tabpanel-${state.id}-${name}`,

package/tabs/lib/TabsList.tsx

@@ -36,7 +36,10 @@ export interface TabListProps<T = any> extends Omit<ExtractProps<typeof Flex, ne
 export const useTabsList = composeHooks(
   createElemPropsHook(useTabsModel)(() => {
     const modality = useModalityType();
-    return {role: 'tablist', overflowX: modality === 'touch' ? 'auto' : undefined};
+    return {
+      role: 'tablist',
+      overflowX: modality === 'touch' ? 'auto' : undefined,
+    } as const;
   }),
   useOverflowListMeasure,
   useListResetCursorOnBlur

package/tabs/lib/TabsOverflowButton.tsx

@@ -4,7 +4,7 @@ import {chevronDownSmallIcon} from '@workday/canvas-system-icons-web';
 import {
   createElemPropsHook,
   composeHooks,
-  subModelHook,
+  createSubModelElemPropsHook,
   createSubcomponent,
 } from '@workday/canvas-kit-react/common';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
@@ -25,10 +25,10 @@ export const useTabsOverflowButton = composeHooks(
   createElemPropsHook(useTabsModel)(() => {
     return {
       'aria-haspopup': true,
-    };
+    } as const;
   }),
   useOverflowListTarget,
-  subModelHook((m: ReturnType<typeof useTabsModel>) => m.menu, useMenuTarget)
+  createSubModelElemPropsHook(useTabsModel)(m => m.menu, useMenuTarget)
 );
 
 export const TabsOverflowButton = createSubcomponent('button')({

package/tabs/lib/TabsPanel.tsx

@@ -57,11 +57,11 @@ export const useTabsPanel = createElemPropsHook(useTabsModel)(
     });
 
     return {
-      role: 'tabpanel',
+      role: 'tabpanel' as const,
       'aria-labelledby': `${state.id}-${localId}`,
       hidden: !!localId && localId !== state.selectedIds[0],
       id: `tabpanel-${state.id}-${localId}`,
-      tabIndex: 0,
+      tabIndex: 0 as const,
     };
   }
 );

package/tabs/lib/useTabsModel.tsx

@@ -8,6 +8,22 @@ import {
 
 import {useMenuModel} from '@workday/canvas-kit-react/menu';
 
+/**
+ * The TabsModel extends the [Collection
+ * System](/getting-started/for-developers/resources/collection-api/). Tabs have tab items and
+ * panels. Tabs can be overflowed if there isn't enough room to render and will overflow to a
+ * {@link MenuModel} sub-model.
+ *
+ * ```tsx
+ * const model = useTabsModel({
+ *   onSelect(data) {
+ *     console.log('Selected Tab', data)
+ *   }
+ * })
+ *
+ * <Tabs model={model}>{Tabs child components}</Tabs>
+ * ```
+ */
 export const useTabsModel = createModelHook({
   defaultConfig: {
     ...useOverflowListModel.defaultConfig,

package/text/lib/LabelText.tsx

@@ -10,19 +10,14 @@ export interface TypeLabelProps extends TextProps {
 }
 
 /**
- * ## 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.
+ * This component is intended to be used for labeling input fields. It's built on top of the
+ * {@link 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';
  *

package/text/lib/Text.tsx

@@ -8,8 +8,7 @@ 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>
    * ```
@@ -17,8 +16,7 @@ export interface TextProps extends BoxProps {
   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>
    * ```
@@ -42,7 +40,7 @@ const validateProps = ({typeLevel, variant, ...props}: TextProps) => {
 
   /*
   If token provided it updates undefined values of token styles:
-  `fontFamily`, `fontSize`, `lineHeight`, `fontWeight`, `color` 
+  `fontFamily`, `fontSize`, `lineHeight`, `fontWeight`, `color`
   by replacing them by token value
   */
   if (typeLevel) {
@@ -68,16 +66,14 @@ const validateProps = ({typeLevel, variant, ...props}: TextProps) => {
 };
 
 /**
- * ## 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).
+ * This is a generic base component intended to render any text. It's built on top of the
+ * {@link Box} component. 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.
@@ -85,14 +81,14 @@ const validateProps = ({typeLevel, variant, ...props}: TextProps) => {
  * - `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
+ *
+ * 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`.
+ *
  * ```tsx
  * import { Text } from '@workday/canvas-kit-react/text';
- * 
+ *
  * const CustomErrorText = () => (
  *   <Text typeLevel="subtext.small" variant="error">
  *     Error Text