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

package/action-bar/lib/ActionBar.tsx

@@ -13,11 +13,55 @@ export interface ActionBarProps {
   children: React.ReactNode;
 }
 
+/**
+ * `ActionBar` is a container component that is responsible for creating an {@link ActionBarModel}
+ * and sharing it with its subcomponents using React context. It does not represent a real element.
+ *
+ * ```tsx
+ * <ActionBar items={[]}>{Child components}</ActionBar>
+ * ```
+ *
+ * Alternatively, you may pass in a model using the hoisted model pattern.
+ *
+ * ```tsx
+ * const model = useActionBarModel({
+ *   items: [],
+ * });
+ *
+ * <ActionBar model={model}>{Child components}</ActionBar>;
+ * ```
+ */
 export const ActionBar = createContainer()({
   displayName: 'ActionBar',
   modelHook: useActionBarModel,
   subComponents: {
+    /**
+     * `ActionBar.List` is a {@link Flex} element. It is a container for
+     * {@link ActionBarItem ActionBar.Item} subcomponents. To render an overflow button for
+     * ActionBar with overflow behavior `overflowButton` prop with overflow button component as a
+     * value should be passed.
+     *
+     * ```tsx
+     * // without overflow
+     * <ActionBar.List>{ActionBar.Items}</ActionBar.List>
+     *
+     * // with overflow
+     * <ActionBar.List overflowButton={<ActionBar.OverflowButton aria-label="More actions"/>}>
+     *   {ActionBar.Items}
+     * </ActionBar.List>
+     * ```
+     */
     List: ActionBarList,
+    /**
+     * `ActionBar.Item` is a `button` element, by default it's a `SecondaryButton` unless an `as`
+     * prop is passed.
+     *
+     * ```tsx
+     * <ActionBar.Item as={PrimaryButton} onClick={() => console.log('first action')}>
+     *   First Action
+     * </ActionBar.Item>
+     * ```
+     */
     Item: ActionBarItem,
     OverflowButton: ActionBarOverflowButton,
     /**

package/action-bar/lib/ActionBarOverflowButton.tsx

@@ -5,9 +5,9 @@ import {relatedActionsIcon} from '@workday/canvas-system-icons-web';
 import {
   createElemPropsHook,
   composeHooks,
-  subModelHook,
   createSubcomponent,
   StyledType,
+  createSubModelElemPropsHook,
 } from '@workday/canvas-kit-react/common';
 import {useOverflowListTarget} from '@workday/canvas-kit-react/collection';
 
@@ -28,7 +28,7 @@ export const useActionBarOverflowButton = composeHooks(
     'aria-haspopup': true,
   })),
   useOverflowListTarget,
-  subModelHook((m: ReturnType<typeof useActionBarModel>) => m.menu, useMenuTarget)
+  createSubModelElemPropsHook(useActionBarModel)(m => m.menu, useMenuTarget)
 );
 
 export const ActionBarOverflowButton = createSubcomponent('button')({

package/banner/lib/Banner.tsx

@@ -36,13 +36,69 @@ const styles: CSSProperties = {
   ...hideMouseFocus,
 };
 
+/**
+ * `Banner` is a container component rendered as a `<button>` element that is responsible for creating
+ * a `BannerModel` and sharing it with its subcomponents using React context.
+ *
+ * ```tsx
+ * <Banner
+ * 	isSticky={true}
+ * 	hasError={true}
+ * 	id='custom-banner-id'
+ * 	onClick={() => console.log('clicked banner')}
+ * >
+ *   {Child components}
+ * </Banner>
+ * ```
+ *
+ * Alternatively, you may pass in a model using the hoisted model pattern.
+ *
+ * ```tsx
+ * const model = useBannerModel({
+ *   isSticky: true,
+ *   hasError: true,
+ *   id: 'custom-banner-id',
+ * });
+ *
+ * return (
+ *   <Banner onClick={() => console.log('clicked banner')} model={model}>
+ *     {Child components}
+ *   </Banner>
+ * );
+ * ```
+ */
 export const Banner = createContainer('button')({
   displayName: 'Banner',
   modelHook: useBannerModel,
   elemPropsHook: useBanner,
   subComponents: {
+    /**
+     * `Banner.Icon` is a styled {@link SystemIcon}. The icon defaults to exclamationTriangleIcon or
+     * exclamationCircleIcon when the model's hasError is true.
+     *
+     * ```tsx
+     * <Banner.Icon />
+     * ```
+     */
     Icon: BannerIcon,
+    /**
+     * `Banner.Label` is a styled {@link Flex}. This component will get an id that will be used for
+     * the aria-describedby on the top level `<button>`.
+     *
+     * ```tsx
+     * <Banner.Label>3 Warnings</Banner.Label>
+     * ```
+     */
     Label: BannerLabel,
+    /**
+     * `Banner.ActionText` is a styled {@link Box}. This component will get an id that will be used
+     * for the aria-labelledby on the top level `<button>`. This component will be visually hidden
+     * when the model's `isSticky` prop is set to true.
+     *
+     * ```tsx
+     * <Banner.ActionText>Custom call to action</Banner.ActionText>
+     * ```
+     */
     ActionText: BannerActionText,
   },
 })<BannerProps>(({children, ...elemProps}, Element, model) => {

package/banner/lib/BannerIcon.tsx

@@ -14,7 +14,6 @@ import {useBannerIcon, useBannerModel} from './hooks';
 export interface BannerIconProps extends Omit<ExtractProps<typeof SystemIcon, never>, 'icon'> {
   /**
    * Icon to show next to label
-   * @default exclamationTriangleIcon or exclamationCircleIcon when hasError is true
    */
   icon?: CanvasSystemIcon;
 }

package/breadcrumbs/lib/Breadcrumbs.tsx

@@ -23,14 +23,10 @@ export interface BreadcrumbsProps {
 }
 
 /**
- * ## Breadcrumbs
- * ---
- * [View Developer Docs](https://canvas.workdaydesign.com/components/navigation/breadcrumbs#examples)
+ * `Breadcrumbs` is a container component that is responsible for creating a
+ * {@link BreadcrumbsModel} and sharing it with its subcomponents using React context. It also
+ * renders `nav` element, and `aria-label` attribute must be provided for this element.
  *
- * A compound component that allows users to keep track and maintain awareness
- * of their location as they navigate through pages, folders, files, etc.
- *
- * @example
  * ```tsx
  * <Breadcrumbs aria-label="Breadcrumbs">
  *   <Breadcrumbs.List>
@@ -46,29 +42,65 @@ export interface BreadcrumbsProps {
  *   <Breadcrumbs.List>
  * </Breadcrumbs>
  * ```
+ *
+ * You may pass {@link BreadcrumbsModelConfig} directly to the `Breadcrumbs` component.
+ *
+ * ```tsx
+ * <Breadcrumbs items={[]} aria-label="Breadcrumbs">
+ *   {Child components}
+ * </Breadcrumbs>
+ * ```
+ *
+ * Alternatively, you may pass in a model using the hoisted model pattern.
+ *
+ * ```tsx
+ * const model = useBreadcrumbsModel({
+ *   items: [],
+ * });
+ *
+ * <Breadcrumbs model={model} aria-label="Breadcrumbs">
+ *   {Child components}
+ * </Breadcrumbs>;
+ * ```
+ *
+ * Note that if you pass in a `model` configured with {@link useBreadcrumbsModel}, configuration
+ * props passed to `Breadcrumbs` will be ignored. `aria-label` attribute must be provided for `nav`
+ * element.
  */
 export const Breadcrumbs = createContainer('nav')({
   displayName: 'Breadcrumbs',
   modelHook: useBreadcrumbsModel,
   subComponents: {
     /**
-     * ### Breadcrumbs List
-     * ---
-     * [View Developer Docs](https://canvas.workdaydesign.com/components/navigation/breadcrumbs/#breadcrumbslist)
+     * `Breadcrumbs.List` is a `Flex` component rendered as a `<ul>` element. It is a container for
+     * `Breadcrumbs.Item` subcomponents. It also renders overflow button if `overflowButton` prop
+     * has been passed;
+     *
+     * ```tsx
+     * // without overflow
+     * <Breadcrumbs.List>{Breadcrumbs.Items}</Breadcrumbs.List>
+     * ```
      *
-     * The nav list containing `Breadcrumbs.Item` components and overflow button.
+     * ```tsx
+     * // with overflow
+     * <Breadcrumbs.List overflowButton={<Breadcrumbs.OverflowButton aria-label="More links" />}>
+     *   {Breadcrumbs.Items}
+     * </Breadcrumbs.List>
+     * ```
+     *
+     * `Breadcrumbs.List` accepts a `overflowButton` prop allowing to pass specific overflow button.
+     * Breadcrumbs.List with overflow behavior should contain `overflowButton` component with
+     * `aria-label` to render overflow button.
      */
     List: BreadcrumbsList,
     /**
-     * ### Breadcrumbs Item
-     * ---
-     * [View Developer Docs](https://canvas.workdaydesign.com/components/navigation/breadcrumbs/#breadcrumbsitem)
+     * `Breadcrumbs.Item` is a {@link Flex} component rendered as an `<li>` element. It is a
+     * container for the `Breadcrumbs.Link` subcomponent which provides correct overflow behavior
+     * across all items.
      *
-     * List items in `Breadcrumbs.List`.
-     * By default, this item is truncated with a tooltip at `350px`,
-     * but that can be customized with the `maxWidth` prop.
+     * List items in {@link BreadcrumbsList Breadcrumbs.List}. By default, this item is truncated
+     * with a tooltip at `350px`, but that can be customized with the `maxWidth` prop.
      *
-     * @example
      * ```tsx
      * <Breadcrumbs.Item maxWidth={200}>
      *   <Breadcrumbs.Link href="/docs">Docs</Breadcrumbs.Link>
@@ -77,36 +109,17 @@ export const Breadcrumbs = createContainer('nav')({
      */
     Item: BreadcrumbsItem,
     /**
-     * ### Breadcrumbs Overflow Button
-     * ---
-     * [View Developer Docs](https://canvas.workdaydesign.com/components/navigation/breadcrumbs/#breadcrumbsoverflowbutton)
-     *
-     * The toggle button for the Breadcrumbs Menu.
-     * This button is rendered in the `Breadcrumbs.List` when `overflowButtonProps` passed
-     * and becomes visible when the list overflows. `overflowButtonProps must contain at least `aria-label`.
-     * If you need to pass other props to it, you can do so by adding it to `overflowButtonProps` passed to the List.
-     *
-     * @example
-     * ```tsx
-     * <Breadcrumbs.List
-     *   overflowButtonProps={{
-     *     'aria-label': 'More links',
-     *     onClick={handleOverflowButtonClick}
-     *   }}
-     * >
-     * ```
+     * `Breadcrumbs.Link` is a styled `<a>` element that also renders a tooltip if the text is
+     * truncated. The built-in truncation and tooltip functionality provides an easy-to-use,
+     * accessible feature for managing the length of link text. The `maxWidth` is set to `350px` by
+     * default and can be adjusted as needed. Note that tooltips will only render when text is
+     * truncated
      */
-    OverflowButton: BreadcrumbsOverflowButton,
+    Link: BreadcrumbsLink,
     /**
-     * ### Breadcrumbs Current Item
-     * ---
-     * [View Developer Docs](https://canvas.workdaydesign.com/components/navigation/breadcrumbs/#breadcrumbscurrentitem)
-     *
-     * The last element in the list of `Breadcrumbs.Item`s.
-     * By default, this item is truncated with a tooltip at `350px`,
-     * But that can be customized with the `maxWidth` prop.
+     * The last element in the list of `Breadcrumbs.Item`s. By default, this item is truncated with
+     * a tooltip at `350px`, But that can be customized with the `maxWidth` prop.
      *
-     * @example
      * ```tsx
      * <Breadcrumbs.CurrentItem maxWidth={200}>
      *   Current Item Text
@@ -115,21 +128,28 @@ export const Breadcrumbs = createContainer('nav')({
      */
     CurrentItem: BreadcrumbsCurrentItem,
     /**
-     * ### Breadcrumbs Link
-     * ---
-     * [View Developer Docs](https://canvas.workdaydesign.com/components/navigation/breadcrumbs/#breadcrumbslink)
+     * The toggle button for the Breadcrumbs Menu. This button is rendered in the
+     * {@link BreadcrumbsList Breadcrumbs.List} when `overflowButtonProps` passed and becomes
+     * visible when the list overflows. `overflowButtonProps must contain at least `aria-label`. If
+     * you need to pass other props to it, you can do so by adding it to `overflowButtonProps`
+     * passed to the List.
      *
-     * The hyperlink element in each `Breadcrumbs.Item`.
+     * ```tsx
+     * <Breadcrumbs.List
+     *   overflowButtonProps={{
+     *     'aria-label': 'More links',
+     *     onClick={handleOverflowButtonClick}
+     *   }}
+     * >
+     * ```
      */
-    Link: BreadcrumbsLink,
+    OverflowButton: BreadcrumbsOverflowButton,
     /**
-     * ### Breadcrumbs Menu
-     * ---
-     * [View Developer Docs](https://canvas.workdaydesign.com/components/navigation/breadcrumbs/#breadcrumbsmenu)
+     * The `Breadcrumbs.Menu` uses the {@link Menu} component under the hood. The overflow menu for
+     * Breadcrumbs. If there isn't enough room to render all links, it will automatically overflow
+     * items into this menu.
      *
-     * The overflow menu for Breadcrumbs. If there isn't enough room to render all links,
-     * it will automatically overflow items into this menu.
-     * @example
+     * ```tsx
      * <Breadcrumbs.Menu.Popper>
      *   <Breadcrumbs.Menu.Card>
      *     <Breadcrumbs.Menu.List>
@@ -137,6 +157,7 @@ export const Breadcrumbs = createContainer('nav')({
      *     </Breadcrumbs.Menu.List>
      *   </Breadcrumbs.Menu.Card>
      * </Breadcrumbs.Menu.Popper>
+     * ```
      */
     Menu: BreadcrumbsMenu,
   },

package/breadcrumbs/lib/BreadcrumbsItem.tsx

@@ -35,7 +35,6 @@ export interface BreadcrumbsItemProps extends FlexProps {
 
 export const useBreadcrumbsItem = composeHooks(
   useOverflowListItemMeasure,
-  useListItemRegister,
   createElemPropsHook(useBreadcrumbsModel)(
     (
       {state},
@@ -52,7 +51,8 @@ export const useBreadcrumbsItem = composeHooks(
         disabled: undefined,
       };
     }
-  )
+  ),
+  useListItemRegister
 );
 
 export const BreadcrumbsItem = createSubcomponent('li')({

package/button/lib/BaseButton.tsx

@@ -21,12 +21,13 @@ import {CSSObject} from '@emotion/styled';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
 
 export interface ButtonContainerProps extends BoxProps, GrowthBehavior {
+  /**
+   * Override default colors of a button. The default will depend on the button type
+   */
   colors?: ButtonColors;
   /**
    * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
    * If no size is provided, it will default to `medium`.
-   *
-   * @default 'medium'
    */
   size?: ButtonSizes;
   /**

package/button/lib/DeleteButton.tsx

@@ -12,7 +12,6 @@ import {
 export interface DeleteButtonProps extends Themeable, GrowthBehavior, BaseButtonProps {
   /**
    * The size of the Button.
-   * @default 'medium'
    */
   size?: 'small' | 'medium' | 'large';
   children?: React.ReactNode;
@@ -42,6 +41,11 @@ const getDeleteButtonColors = ({
   },
 });
 
+/**
+ * Use sparingly for destructive actions that will result in data loss, can’t be undone, or will
+ * have significant consequences. They commonly appear in confirmation dialogs as the final
+ * confirmation before deleting.
+ */
 export const DeleteButton = createComponent('button')({
   displayName: 'DeleteButton',
   Component: (

package/button/lib/ExternalHyperlink.tsx

@@ -34,18 +34,17 @@ const StyledSystemIcon = styled(SystemIcon)<StyledType>({
   marginLeft: '2px',
 });
 
+/**
+ * `ExternalHyperlink`s also have an `inverse` variant. Use this variant when you need to place the
+ * link on a dark or colorful background such as `blueberry400`.
+ */
 export const ExternalHyperlink = createComponent('a')({
   displayName: 'ExternalHyperlink',
   Component: (
-    {
-      children,
-      variant,
-      iconLabel = 'Opens link in new window',
-      ...elemProps
-    }: ExternalHyperlinkProps,
+    {children, iconLabel = 'Opens link in new window', ...elemProps}: ExternalHyperlinkProps,
     ref
   ) => (
-    <Anchor ref={ref} target="_blank" rel="noreferrer" variant={variant} {...elemProps}>
+    <Anchor ref={ref} target="_blank" rel="noreferrer" {...elemProps}>
       <span>{children}</span>
       <StyledSystemIcon
         icon={extLinkIcon}

package/button/lib/Hyperlink.tsx

@@ -66,10 +66,14 @@ const Anchor = styled('a')<HyperlinkProps & StyledType>(
   anchorVariants
 );
 
+/**
+ * `Hyperlink`s should be used when you want to navigate away from the current page or to an anchor
+ * on the current page.
+ */
 export const Hyperlink = createComponent('a')({
   displayName: 'Hyperlink',
-  Component: ({variant, href, children, ...elemProps}: HyperlinkProps, ref, Element) => (
-    <Anchor ref={ref} as={Element} variant={variant} href={href} {...elemProps}>
+  Component: ({children, ...elemProps}: HyperlinkProps, ref, Element) => (
+    <Anchor ref={ref} as={Element} {...elemProps}>
       {children}
     </Anchor>
   ),

package/button/lib/PrimaryButton.tsx

@@ -88,14 +88,11 @@ const getPrimaryButtonColors = (variant: 'inverse' | undefined, theme: EmotionCa
 export interface PrimaryButtonProps extends Themeable, GrowthBehavior, BaseButtonProps {
   /**
    * The variant of the PrimaryButton.
-   * @default undefined
    */
   variant?: 'inverse';
   /**
    * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
    * If no size is provided, it will default to `medium`.
-   *
-   * @default 'medium'
    */
   size?: ButtonSizes;
   /**
@@ -106,17 +103,24 @@ export interface PrimaryButtonProps extends Themeable, GrowthBehavior, BaseButto
   /**
    * Button icon positions can either be `start` or `end`.
    * If no value is provided, it defaults to `start`.
-   * @default 'start'
    */
   iconPosition?: IconPositions;
   /**
    * If set to `true`, transform the icon's x-axis to mirror the graphic
-   * @default false
    */
   shouldMirrorIcon?: boolean;
   children?: React.ReactNode;
 }
 
+/**
+ * Primary Buttons are high emphasis. Use once per screen to draw attention to the highest priority
+ * 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 at the `start` or `end` with the `iconPosition`
+ * prop.
+ */
 export const PrimaryButton = createComponent('button')({
   displayName: 'PrimaryButton',
   Component: (

package/button/lib/SecondaryButton.tsx

@@ -45,6 +45,15 @@ export interface SecondaryButtonProps extends Themeable, GrowthBehavior, BaseBut
   children?: React.ReactNode;
 }
 
+/**
+ * Secondary Buttons have a medium level of emphasis. Use them for non-critical actions. Secondary
+ * 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.
+ *
+ * Secondary Buttons have four sizes: `extraSmall`, `small`, `medium`, and `large`. Icons are
+ * supported for every size and can be positioned at the `start` or `end` with the `iconPosition`
+ * prop.
+ */
 export const SecondaryButton = createComponent('button')({
   displayName: 'SecondaryButton',
   Component: (

package/button/lib/TertiaryButton.tsx

@@ -16,20 +16,16 @@ import {BaseButton, BaseButtonProps} from './BaseButton';
 export interface TertiaryButtonProps extends Themeable, BaseButtonProps {
   /**
    * The variant of the TertiaryButton.
-   * @default undefined
    */
   variant?: 'inverse' | undefined;
   /**
    * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
    * If no size is provided, it will default to `medium`.
-   *
-   * @default 'medium'
    */
   size?: ButtonSizes;
   /**
    * Button icon positions can either be `start` or `end`.
    * If no value is provided, it defaults to `start`.
-   * @default 'start'
    */
   iconPosition?: IconPositions;
   /**
@@ -41,18 +37,15 @@ export interface TertiaryButtonProps extends Themeable, BaseButtonProps {
    */
   /**
    * If set to `true`, transform the icon's x-axis to mirror the graphic
-   * @default false
    */
   shouldMirrorIcon?: boolean;
   /**
    * If set to `true`, transform text to all letters uppercase
-   * @default undefined
    */
   allCaps?: boolean;
   children?: React.ReactNode;
   /**
    * If set to `true`, make icon button available to use theme colors instead of default
-   * @default false
    */
   isThemeable?: boolean;
 }
@@ -200,6 +193,16 @@ const getMinWidthStyles = (children: React.ReactNode, size: ButtonSizes): string
   return children ? 'auto' : minWidthNum;
 };
 
+/**
+ * Tertiary Buttons have the lowest emphasis. Use for less important actions that the user may not
+ * often be looking to do. Tertiary Buttons have lower prominence as its container is 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.
+ *
+ * Tertiary Buttons have four sizes: `extraSmall`, `small`, `medium` and `large`. Icons are
+ * supported for every size and can be positioned at the `start` or `end` with the `iconPosition`
+ * prop.
+ */
 export const TertiaryButton = createComponent('button')({
   displayName: 'TertiaryButton',
   Component: (
@@ -211,7 +214,6 @@ export const TertiaryButton = createComponent('button')({
       children,
       icon,
       shouldMirrorIcon = false,
-      allCaps,
       ...elemProps
     }: TertiaryButtonProps,
     ref,
@@ -224,7 +226,6 @@ export const TertiaryButton = createComponent('button')({
       <StyledTertiaryButtonContainer
         ref={ref}
         as={Element}
-        allCaps={allCaps}
         colors={getTertiaryButtonColors(variant, theme, hasThemeStyles)}
         size={size}
         padding={getPaddingStyles(icon, iconPosition, children, size)}

package/card/lib/Card.tsx

@@ -14,6 +14,18 @@ export interface CardProps extends BoxProps {
   children?: React.ReactNode;
 }
 
+/**
+ * `Card` is a container component that holds a {@link CardBody Card.Body} and an optional
+ * {@link CardHeading Card.Heading}. `Card` wraps a non-semantic `div` element. The element can be
+ * replaced using the `as` prop, or a `role` or other `aria-*` attributes can be added to give
+ * `Card` semantic meaning.
+ *
+ * **Note**: Changing the `Card` container to certain semantic elements will put accessibility at
+ * risk. For example, using the `as` prop to change the cards to buttons will flatten the content in
+ * the card. Headings, calls to action, etc. will not function as expected for users with
+ * disabilities. Semantic container elements like `<section>`, or using `<li>` grouped together in a
+ * common `<ul>` can be a useful way to elevate the accessibility of your design.
+ */
 export const Card = createComponent('div')({
   displayName: 'Card',
   Component: ({children, ...elemProps}: CardProps, ref, Element) => {
@@ -33,7 +45,31 @@ export const Card = createComponent('div')({
     );
   },
   subComponents: {
+    /**
+     * `Card.Heading` is an optional subcomponent that is meant to describe the Card. Since `Card`
+     * is a non-semantic presentational component, `Card.Heading` does not automatically have any
+     * semantic meaning. If your use case requires the Heading to label the Card, you must do so
+     * manually.
+     *
+     * For example, {@link Modal} (which uses a `Card`) adds an `aria-labelledby` and a `role` to
+     * the `Card`, as well as an `id` to the `Card.Heading`.
+     *
+     * ```tsx
+     * <Card role="dialog" aria-labelledby="card-heading">
+     *   <Card.Heading id="card-heading">Card Title</Card.Heading>
+     *   <Card.Body>Card Contents</Card.Body>
+     * </Card>
+     * ```
+     *
+     * `Card.Heading` defaults to an `<h3>` element, but it can be changed using the `as` prop.
+     */
     Heading: CardHeading,
+    /**
+     * `Card.Body` is a non-semantic subcomponent that contains the body of the card. Attributes may
+     * be added to give `Card.Body` semantic meaning. If `Card.Body` is brief (like in a short
+     * dialog), it may be helpful to add an `aria-describedby` referencing the `id` of the
+     * `Card.Body` to the `Card` container.
+     */
     Body: CardBody,
   },
 });

package/checkbox/lib/Checkbox.tsx

@@ -29,7 +29,7 @@ export interface CheckboxProps extends Themeable {
   disabled?: boolean;
   /**
    * The HTML `id` of the underlying checkbox input element. This is required if `label` is defined as a non-empty string.
-   * @default A uniquely generated id
+   * @default {useUniqueId}
    */
   id?: string;
   /**
@@ -314,9 +314,6 @@ export const Checkbox = createComponent('input')({
       theme = useTheme(),
       id,
       disabled,
-      onChange,
-      value,
-      error,
       indeterminate,
       variant,
       ...elemProps
@@ -334,10 +331,7 @@ export const Checkbox = createComponent('input')({
             disabled={disabled}
             id={inputId}
             ref={ref}
-            onChange={onChange}
             type="checkbox"
-            value={value}
-            error={error}
             variant={variant}
             aria-checked={indeterminate ? 'mixed' : checked}
             {...elemProps}