@workday/canvas-kit-docs 5.3.0-next.11 → 5.3.0-next.18

package/dist/mdx/preview-react/text-input/examples/Placeholder.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <TextInput orientation='vertical'>
+      <TextInput.Label>Email</TextInput.Label>
+      <TextInput.Field onChange={handleChange} value={value} placeholder="user@email.com" />
+    </TextInput>
+  );
+};

package/dist/mdx/{labs-react → preview-react}/text-input/examples/RefForwarding.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
+import {changeFocus} from '@workday/canvas-kit-react/common';
 import {VStack} from '@workday/canvas-kit-labs-react/layout';
-import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
 
 export default () => {
   const [value, setValue] = React.useState('');
@@ -12,16 +13,16 @@ export default () => {
   };
 
   const handleClick = () => {
-    ref.current.focus();
+    changeFocus(ref.current)
   };
 
   return (
-    <VStack spacing="xxxs" alignItems="flex-start">
-      <TextInput>
+    <VStack spacing='xxxs' alignItems='flex-start'>
+      <TextInput orientation='vertical'>
         <TextInput.Label>Email</TextInput.Label>
         <TextInput.Field onChange={handleChange} value={value} ref={ref} />
       </TextInput>
-      <PrimaryButton onClick={handleClick}>Focus Text Input</PrimaryButton>
+      <SecondaryButton onClick={handleClick}>Focus Text Input</SecondaryButton>
     </VStack>
   );
 };

package/dist/mdx/preview-react/text-input/examples/Required.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <TextInput isRequired={true} orientation='vertical'>
+      <TextInput.Label>Email</TextInput.Label>
+      <TextInput.Field onChange={handleChange} value={value} />
+    </TextInput>
+  );
+};

package/dist/mdx/preview-react/text-input/examples/ThemedAlert.tsx

@@ -0,0 +1,46 @@
+/** @jsx jsx */
+import {jsx} from '@emotion/core';
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
+import {CanvasProvider, PartialEmotionCanvasTheme} from '@workday/canvas-kit-react/common';
+import {colors, space} from '@workday/canvas-kit-react/tokens';
+
+export default () => {
+  const theme: PartialEmotionCanvasTheme = {
+    canvas: {
+      palette: {
+        common: {
+          focusOutline: colors.grapeSoda300,
+        },
+        alert: {
+          main: colors.kiwi200,
+          darkest: colors.kiwi600,
+        },
+      },
+    },
+  };
+  return (
+    <CanvasProvider theme={theme}>
+      <AlertInput />
+    </CanvasProvider>
+  );
+};
+
+const AlertInput = () => {
+  const [value, setValue] = React.useState('invalid@email');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  const alertStyles = useThemedRing('alert');
+
+  return (
+    <TextInput orientation='vertical'>
+      <TextInput.Label>Email</TextInput.Label>
+      <TextInput.Field css={alertStyles} onChange={handleChange} value={value} />
+      <TextInput.Hint paddingTop={space.xxs}>Please enter a valid email.</TextInput.Hint>
+    </TextInput>
+  );
+};

package/dist/mdx/{labs-react → preview-react}/text-input/examples/ThemedError.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
-import {VStack} from '@workday/canvas-kit-labs-react/layout';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
 import {CanvasProvider, PartialEmotionCanvasTheme} from '@workday/canvas-kit-react/common';
 import {colors, space} from '@workday/canvas-kit-react/tokens';
 
@@ -26,15 +25,13 @@ export default () => {
 
   return (
     <CanvasProvider theme={theme}>
-      <VStack spacing="xxxs" alignItems="flex-start">
-        <TextInput hasError={!value} isRequired={true}>
-          <TextInput.Label>Email</TextInput.Label>
-          <TextInput.Field onChange={handleChange} value={value} />
-          <TextInput.Hint paddingTop={space.xxs}>
-            {!value && 'Please enter an email.'}
-          </TextInput.Hint>
-        </TextInput>
-      </VStack>
+      <TextInput hasError={!value} isRequired={true} orientation='vertical'>
+        <TextInput.Label>Email</TextInput.Label>
+        <TextInput.Field onChange={handleChange} value={value} />
+        <TextInput.Hint paddingTop={space.xxs}>
+          {!value && 'Please enter an email.'}
+        </TextInput.Hint>
+      </TextInput>
     </CanvasProvider>
   );
 };

package/dist/mdx/react/action-bar/ActionBar.mdx

@@ -51,6 +51,6 @@ At 575px, responsive styles will take effect:
 
 ## Props
 
-Undocumented props are spread to the underlying container `div` element.
+Undocumented props are spread to the underlying container `<div>` element.
 
 <ArgsTable of={ActionBar} />

package/dist/mdx/react/button/button/Button.mdx

@@ -7,8 +7,11 @@ import {
 import {Specifications} from '@workday/canvas-kit-docs';
 
 import Primary from './examples/Primary';
+import PrimaryInverse from './examples/PrimaryInverse';
 import Secondary from './examples/Secondary';
+import SecondaryInverse from './examples/SecondaryInverse';
 import Tertiary from './examples/Tertiary';
+import TertiaryInverse from './examples/TertiaryInverse';
 import Delete from './examples/Delete';
 
 
@@ -35,11 +38,20 @@ Primary Buttons are high emphasis. Use once per screen to draw attention to the
 action. Multiple primary buttons make it confusing for the user to understand what action they
 should take. Not all screens require a Primary Button.
 
+Primary Buttons have four sizes: `extraSmall`, `small`, `medium`, and `large`. Icons are supported
+for every size and can be positioned to the `left` or `right` with the `iconPosition` prop.
+
 <ExampleCodeBlock code={Primary} />
 
+Primary Buttons also have an `inverse` variant. While it looks similar to the default Secondary
+Button, the default outline as well as the hover and focus states are different. Use this variant
+when you need to place a Primary Button on a dark or colorful background such as `blueberry400`.
+
+<ExampleCodeBlock code={PrimaryInverse} />
+
 #### Props
 
-Undocumented props are spread to the underlying `button` element.
+Undocumented props are spread to the underlying `<button>` element.
 
 <ArgsTable of={PrimaryButton} />
 
@@ -49,13 +61,19 @@ Secondary Buttons have a medium level of emphasis. Use them for non-critical act
 Buttons can be used on most pages without restrictions and work well for multiple actions of equal
 weight. They can be used in conjunction with a Primary Button or independently.
 
-Use the `inverse` variants on dark or colorful backgrounds.
+Secondary Buttons have four sizes: `extraSmall`, `small`, `medium`, and `large`. Icons are supported
+for every size and can be positioned to the `left` or `right` with the `iconPosition` prop.
 
 <ExampleCodeBlock code={Secondary} />
 
+Secondary Buttons also have an `inverse` variant. Use this when you need to place a Secondary Button on
+a dark or colorful background such as `blueberry400`.
+
+<ExampleCodeBlock code={SecondaryInverse} />
+
 #### Props
 
-Undocumented props are spread to the underlying `button` element.
+Undocumented props are spread to the underlying `<button>` element.
 
 <ArgsTable of={SecondaryButton} />
 
@@ -66,13 +84,20 @@ the user may not often be looking to do. Tertiary Buttons have lower prominence
 not visible until it is interacted with. Use Tertiary Buttons for supplemental actions such as “View
 More”, “Read More” or “Select a File”. Tertiary Buttons are frequently used on Cards.
 
-Use the `inverse` variants on dark or colorful backgrounds.
+Tertiary Buttons have three sizes: `extraSmall`, `small`, and `medium`. Icons are supported
+for every size and can be positioned to the `left` or `right` with the `iconPosition` prop.
 
 <ExampleCodeBlock code={Tertiary} />
 
+Tertiary Buttons also have an `inverse` variant. Use this when you need to place a Tertiary Button on
+a dark or colorful background such as `blueberry400`.
+
+<ExampleCodeBlock code={TertiaryInverse} />
+
+
 #### Props
 
-Undocumented props are spread to the underlying `button` element.
+Undocumented props are spread to the underlying `<button>` element.
 
 <ArgsTable of={TertiaryButton} />
 
@@ -86,16 +111,16 @@ before deleting.
 
 #### Props
 
-Undocumented props are spread to the underlying `button` element.
+Undocumented props are spread to the underlying `<button>` element.
 
 <ArgsTable of={DeleteButton} />
 
 ### Accessible Use of the `as` Prop
 
 Like many of our components, Buttons accept an `as` prop, which lets you change the underlying
-semantic element - usually an `a` (anchor), or a `button`. This should be done with caution to
-ensure the best accessibility. Generally, `button` elements should be used for actions, and `a`
-(anchor) elements should be used for navigation.
+semantic element - usually an `<a>`, or a `<button>`. This should be done with caution to ensure the
+best accessibility. Generally, `<button>` elements should be used for actions, and `<a>` elements
+should be used for navigation.
 
 ## Specifications
 

package/dist/mdx/react/button/button/examples/Primary.tsx

@@ -1,5 +1,14 @@
 import React from 'react';
 
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {HStack} from '@workday/canvas-kit-labs-react/layout';
+import {plusIcon} from '@workday/canvas-system-icons-web';
 
-export default () => <PrimaryButton>Click Me</PrimaryButton>;
+export default () => (
+  <HStack spacing="s" padding="s">
+    <PrimaryButton>Primary</PrimaryButton>
+    <PrimaryButton icon={plusIcon} iconPosition="right">
+      Primary
+    </PrimaryButton>
+  </HStack>
+);

package/dist/mdx/react/button/button/examples/PrimaryInverse.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {HStack} from '@workday/canvas-kit-labs-react/layout';
+import {plusIcon} from '@workday/canvas-system-icons-web';
+
+export default () => (
+  <HStack spacing="s" backgroundColor="blueberry400" padding="s">
+    <PrimaryButton variant="inverse">Primary</PrimaryButton>
+    <PrimaryButton icon={plusIcon} iconPosition="right" variant="inverse">
+      Primary
+    </PrimaryButton>
+  </HStack>
+);

package/dist/mdx/react/button/button/examples/Secondary.tsx

@@ -1,5 +1,14 @@
 import React from 'react';
 
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {HStack} from '@workday/canvas-kit-labs-react/layout';
+import {plusIcon} from '@workday/canvas-system-icons-web';
 
-export default () => <SecondaryButton>Click Me</SecondaryButton>;
+export default () => (
+  <HStack spacing="s" padding="s">
+    <SecondaryButton>Secondary</SecondaryButton>
+    <SecondaryButton icon={plusIcon} iconPosition="right">
+      Secondary
+    </SecondaryButton>
+  </HStack>
+);

package/dist/mdx/react/button/button/examples/SecondaryInverse.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {HStack} from '@workday/canvas-kit-labs-react/layout';
+import {plusIcon} from '@workday/canvas-system-icons-web';
+
+export default () => (
+  <HStack spacing="s" backgroundColor="blueberry400" padding="s">
+    <SecondaryButton variant="inverse">Secondary</SecondaryButton>
+    <SecondaryButton icon={plusIcon} iconPosition="right" variant="inverse">
+      Secondary
+    </SecondaryButton>
+  </HStack>
+);

package/dist/mdx/react/button/button/examples/Tertiary.tsx

@@ -1,5 +1,14 @@
 import React from 'react';
 
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
+import {HStack} from '@workday/canvas-kit-labs-react/layout';
+import {plusIcon} from '@workday/canvas-system-icons-web';
 
-export default () => <TertiaryButton>Click Me</TertiaryButton>;
+export default () => (
+  <HStack spacing="s" padding="s">
+    <TertiaryButton>Tertiary</TertiaryButton>
+    <TertiaryButton icon={plusIcon} iconPosition="right">
+      Tertiary
+    </TertiaryButton>
+  </HStack>
+);

package/dist/mdx/react/button/button/examples/TertiaryInverse.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import {TertiaryButton} from '@workday/canvas-kit-react/button';
+import {HStack} from '@workday/canvas-kit-labs-react/layout';
+import {plusIcon} from '@workday/canvas-system-icons-web';
+
+export default () => (
+  <HStack spacing="s" backgroundColor="blueberry400" padding="s">
+    <TertiaryButton variant="inverse">Tertiary</TertiaryButton>
+    <TertiaryButton icon={plusIcon} iconPosition="right" variant="inverse">
+      Tertiary
+    </TertiaryButton>
+  </HStack>
+);

package/dist/mdx/react/button/icon-button/IconButton.mdx

@@ -98,6 +98,6 @@ The `toggle` prop can be used to make icon buttons toggleable.
 
 ## Props
 
-Undocumented props are spread to the underlying `button` element.
+Undocumented props are spread to the underlying `<button>` element.
 
 <ArgsTable of={IconButton} />

package/dist/mdx/react/pagination/pagination.mdx

@@ -20,8 +20,10 @@ import {
 # Canvas Kit Pagination
 
 `Pagination` is a
-[compound component](/getting-started/for-developers/resources/compound-components/) for handling
-navigation between pages in a range.
+[compound component](/getting-started/for-developers/resources/compound-components/) that allows
+users to navigate between pages in a range.
+
+[> Workday Design Reference](https://design.workday.com/components/navigation/pagination)
 
 ## Installation
 
@@ -78,7 +80,7 @@ the range.
 
 ### Right-to-Left (RTL)
 
-This example shows how the component supports right-to-left languages.
+`Pagination` supports right-to-left languages when specified in the `CanvasProvider` `theme`.
 
 <ExampleCodeBlock code={RTL} />
 

package/dist/mdx/react/popup/Popup.mdx

@@ -52,7 +52,7 @@ The `Popup` component is a generic
 [Compound Component](/getting-started/for-developers/resources/compound-components/) that is used to
 build popup UIs that are not already covered by Canvas Kit.
 
-### Basic
+### Basic Example
 
 The Popup has no pre-defined behaviors built in, therefore the `usePopupModel` must always be used
 to create a new `model`. This `model` is then used by all behavior hooks to apply additional popup
@@ -63,7 +63,7 @@ popup behaviors. For accessibility, these behaviors should be included most of t
 
 <ExampleCodeBlock code={Basic} />
 
-### Initial focus
+### Initial Focus
 
 If you want focus to move to a specific element when the popup is opened, set the `initialFocusRef`
 of the model. Check with accessibility before doing this. The following example sets the focus on
@@ -153,7 +153,7 @@ The Popup component automatically handles right-to-left rendering.
 
 ## Components
 
-## Popper
+### Popper
 
 A thin wrapper component around the Popper.js positioning engine. For reference:
 https://popper.js.org/. `Popper` also automatically works with the `PopupStack` system. `Popper` has
@@ -169,7 +169,7 @@ PopupModel or any associate popup [hooks](#hooks).
 > element was rendered and that's where extra props were spread to. In v5+, you can provide your own
 > element if you wish.
 
-## Popup
+### Popup
 
 This component is a container component that has no semantic element. It provides a React Context
 model for all Popup subcomponents. If you manually pass a `model` to all subcomponents, this
@@ -189,7 +189,7 @@ container component isn't needed.
 
 <ArgsTable of={Popup} />
 
-## Popup.Target
+### Popup.Target
 
 A `Popup.Target` is any element that is meant to show the Popup. The default component rendered by
 this component is a `SecondaryButton` element. You can override this by passing the desired
@@ -217,7 +217,7 @@ used, which is `SecondaryButton`. If you don't want any styling, you can do the
 To add your own styling, you could either add a `css` prop, or make a styled button and pass that
 styled component via the `as` prop.
 
-## Popup.Popper
+### Popup.Popper
 
 A `Popup.Popper` is a [Popper](#popper) component that is hooked up to the `PopupModel`
 automatically. The behavior hook used is called `usePopupPopper`.
@@ -229,7 +229,7 @@ automatically. The behavior hook used is called `usePopupPopper`.
 
 <ArgsTable of={Popup.Popper} />
 
-## Popup.Card
+### Popup.Card
 
 A `Popup.Card` is a wrapper around the `Card` component, but hooked up to a `PopupModel`. By
 default, this element has a `role=dialog` and an `aria-labelledby`. The behavior hook used is called
@@ -237,7 +237,7 @@ default, this element has a `role=dialog` and an `aria-labelledby`. The behavior
 
 <ArgsTable of={Popup.Card} />
 
-## Popup.CloseButton
+### Popup.CloseButton
 
 A `Popup.CloseButton` is a button that will hide a popup. By default, this is a `SecondaryButton`
 component, but `as` can be used to render any button element (i.e `<DeleteButton>` or
@@ -245,14 +245,14 @@ component, but `as` can be used to render any button element (i.e `<DeleteButton
 
 <ArgsTable of={Popup.CloseButton} />
 
-## Popup.CloseIcon
+### Popup.CloseIcon
 
 A `Popup.CloseIcon` is an icon button that is the `X` in the top of a popup. It will hide a popup
 when clicked. The behavior hook used is called `usePopupCloseButton`.
 
 <ArgsTable of={Popup.CloseIcon} />
 
-## Popup.Heading
+### Popup.Heading
 
 A `Popup.Heading` is a wrapper around `Card.Heading` that connect the heading to a `PopupModel`. It
 will add an `id` to the element that match the `aria-labelledby` that is applied to the `Popup.Card`
@@ -260,29 +260,29 @@ element for accessibility. The behavior hook used is called `usePopupHeading`.
 
 <ArgsTable of={Popup.Heading} />
 
-## Popup.Body
+### Popup.Body
 
 A `Popup.Body` is a thin wrapper around `Card.Body` and doesn't actually take a model. It adds
 `body` styling and nothing else.
 
 <ArgsTable of={Popup.Body} />
 
-## Popup Model
+## Model
 
 The PopupModel contains all state and events needed for Popup behaviors and components. It composes
 a `DisclosureModel` for showing and hiding content.
 
-### Popup Model State
+### Config
 
-<ArgsTable of={PopupStateComponent} />
+<ArgsTable of={PopupModelConfigComponent} />
 
-### Popup Model Events
+### State
 
-<ArgsTable of={PopupEventsComponent} />
+<ArgsTable of={PopupStateComponent} />
 
-### Popup Model Config
+### Events
 
-<ArgsTable of={PopupModelConfigComponent} />
+<ArgsTable of={PopupEventsComponent} />
 
 ## Hooks
 
@@ -325,7 +325,7 @@ return (
 );
 ```
 
-## useAssistiveHideSiblings
+### useAssistiveHideSiblings
 
 ```ts
 useAssistiveHideSiblings(model: PopupModel): {}
@@ -341,7 +341,7 @@ VoiceOver for example.
 
 This should be used on popup elements that need to hide content (i.e. Modals).
 
-## useBringToTopOnClick
+### useBringToTopOnClick
 
 ```ts
 useBringToTopOnClick(model: PopupModel): {}
@@ -355,7 +355,7 @@ like a Modal.
 
 This should be used on popup elements that are meant to persist (i.e. Windows).
 
-## useCloseOnEscape
+### useCloseOnEscape
 
 ```ts
 useCloseOnEscape(model: PopupModel): {}
@@ -367,7 +367,7 @@ 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.
 
-## useCloseOnOutsideClick
+### useCloseOnOutsideClick
 
 ```ts
 useCloseOnOutsideClick(model: PopupModel): {}
@@ -382,7 +382,7 @@ This should be used with popup elements that are dismissible like Modals, non-mo
 dropdown menus, etc. Tooltips and hierarchical menus should use `useAlwaysCloseOnClickOutside`
 instead.
 
-## useAlwaysCloseOnOutsideClick
+### useAlwaysCloseOnOutsideClick
 
 ```ts
 useAlwaysCloseOnOutsideClick(model: PopupModel): {}
@@ -396,7 +396,7 @@ stack. This is useful for Tooltips or hierarchical menus. Adds a
 This should be used with popup elements that should close no matter their position in the stack
 (i.e. Tooltips).
 
-## useDisableBodyScroll
+### useDisableBodyScroll
 
 ```ts
 useDisableBodyScroll(model: PopupModel): {}
@@ -408,7 +408,7 @@ page scrolling while the popup is visible.
 This should be used with popup elements that hide all other content and force the user to accept or
 dismiss the popup before continuing (i.e. Modals).
 
-## useFocusRedirect
+### useFocusRedirect
 
 ```ts
 useFocusRedirect(model: PopupModel): {}
@@ -426,7 +426,7 @@ hook does no provide `aria-owns` and this must be provided yourself. Requires
 
 This should be used with non-modal dialogs.
 
-## useFocusTrap
+### useFocusTrap
 
 ```ts
 useFocusTrap(model: PopupModel): {}
@@ -440,7 +440,7 @@ with [useInitialFocus](#useinitialfocus) and [useReturnFocus](#usereturnfocus).
 
 This should be used on popup elements that need to hide content (i.e. Modals).
 
-## useInitialFocus
+### useInitialFocus
 
 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](#usefocusredirect) or
@@ -449,7 +449,7 @@ reader users alike. This should be used with [useFocusRedirect](#usefocusredirec
 This should be used for popups that have focusable elements inside, like Modals, non-modal dialogs,
 menus, etc.
 
-## useReturnFocus
+### useReturnFocus
 
 Returns focus to the target element when the popup is hidden. This works well with
 [useInitialFocus](#useinitialfocus). This should be used with [useFocusRedirect](#usefocusredirect)
@@ -457,7 +457,7 @@ or [useFocusTrap](#usefocustrap) for a complete focus management solution.
 
 This should ble used on popup elements that use [useInitialFocus](#useinitialfocus).
 
-## usePopupPopper
+### usePopupPopper
 
 ```ts
 usePopupPopper(model: PopupModel, elemProps: {}, ref: React.Ref<any>): {}
@@ -466,7 +466,7 @@ usePopupPopper(model: PopupModel, elemProps: {}, ref: React.Ref<any>): {}
 Adds the necessary props to a `Popper` component. Used by the [Popup.Popper](#popuppopper)
 subcomponent.
 
-## usePopupCard
+### usePopupCard
 
 ```ts
 usePopupCard(model: PopupModel, elemProps: {}, ref: React.Ref<any>): {}
@@ -474,7 +474,7 @@ usePopupCard(model: PopupModel, elemProps: {}, ref: React.Ref<any>): {}
 
 Adds the necessary props to a `Card` component. Used by the [Popup.Card](#popupcard) subcomponent.
 
-## usePopupCloseButton
+### usePopupCloseButton
 
 ```ts
 usePopupCloseButton(model: PopupModel, elemProps: {}, ref: React.Ref<any>): {}
@@ -484,18 +484,16 @@ Adds the necessary props to a close button component. Used by the
 [Popup.CloseButton](#popupclosebutton) subcomponent and [Popup.CloseIcon](#popupcloseicon)
 subcomponent.
 
-````
-
-## usePopupHeading
+### usePopupHeading
 
 ```ts
 usePopupHeading(model: PopupModel, elemProps: {}, ref: React.Ref<any>): {}
-````
+```
 
 Adds the necessary props to a `Heading` component. Used by the [Popup.Heading](#popupheading)
 subcomponent.
 
-## usePopupTarget
+### usePopupTarget
 
 ```ts
 usePopupTarget(model: PopupModel, elemProps: {}, ref: React.Ref<any>): {}

package/dist/mdx/react/radio/examples/Alert.tsx

@@ -14,13 +14,13 @@ export default () => {
       error={FormField.ErrorType.Alert}
       hintId="hint-alert"
       hintText="Deep Dish is no longer available. Please select a different crust."
-      label="Choose your pizza crust"
+      label="Choose Your Pizza Crust"
       useFieldset={true}
     >
       <RadioGroup name="crust" onChange={handleChange} value={value}>
-        <Radio disabled={true} label="Deep Dish (Sold Out)" value="deep-dish" />
+        <Radio disabled={true} label="Deep dish (sold out)" value="deep-dish" />
         <Radio label="Thin" value="thin" />
-        <Radio label="Gluten Free" value="gluten-free" />
+        <Radio label="Gluten free" value="gluten-free" />
         <Radio label="Cauliflower" value="cauliflower" />
       </RadioGroup>
     </FormField>