@carbon/ibm-products 2.89.0 → 2.90.0

package/es/components/Card/CardFooter.js

@@ -12,7 +12,6 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Button } from "@carbon/react";
 import { Error } from "@carbon/react/icons";
-
 //#region src/components/Card/CardFooter.tsx
 var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
 const componentName = "CardFooter";
@@ -67,6 +66,5 @@ CardFooter.propTypes = {
 };
 /**@ts-ignore */
 CardFooter.displayName = componentName;
-
 //#endregion
-export { CardFooter };
+export { CardFooter };

package/es/components/Card/CardHeader.js

@@ -11,7 +11,6 @@ import { pkg } from "../../settings.js";
 import React from "react";
 import PropTypes from "prop-types";
 import { Button, Heading, usePrefix } from "@carbon/react";
-
 //#region src/components/Card/CardHeader.tsx
 var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
 const componentName = "CardHeader";
@@ -78,6 +77,9 @@ const CardHeader = ({ actions, decorator, noActionIcons, onPrimaryButtonClick, o
 /**@ts-ignore */
 CardHeader.propTypes = {
 	actions: PropTypes.oneOfType([PropTypes.array, PropTypes.node]),
+	/**
+	* Optional prop that allows you to pass any component.
+	*/
 	decorator: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
 	description: PropTypes.oneOfType([
 		PropTypes.string,
@@ -85,6 +87,9 @@ CardHeader.propTypes = {
 		PropTypes.node
 	]),
 	hasActions: PropTypes.bool,
+	/**
+	* is the host card clickable
+	*/
 	inClickableCard: PropTypes.bool,
 	label: PropTypes.string,
 	noActionIcons: PropTypes.bool,
@@ -100,6 +105,11 @@ CardHeader.propTypes = {
 	secondaryButtonKind: PropTypes.oneOf(["secondary", "ghost"]),
 	secondaryButtonPlacement: PropTypes.oneOf(["top", "bottom"]),
 	secondaryButtonText: PropTypes.string,
+	/**
+	* **Experimental:** For all cases a `Slug` component can be provided.
+	* Clickable tiles only accept a boolean value of true and display a hollow slug.
+	* @deprecated please use the `decorator` prop
+	*/
 	slug: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
 	title: PropTypes.oneOfType([
 		PropTypes.string,
@@ -110,6 +120,5 @@ CardHeader.propTypes = {
 };
 /**@ts-ignore */
 CardHeader.displayName = componentName;
-
 //#endregion
-export { CardHeader };
+export { CardHeader };

package/es/components/Carousel/Carousel.js

@@ -14,7 +14,6 @@ import { CarouselItem } from "./CarouselItem.js";
 import React, { useCallback, useEffect, useImperativeHandle, useRef } from "react";
 import PropTypes from "prop-types";
 import { usePrefix } from "@carbon/react";
-
 //#region src/components/Carousel/Carousel.tsx
 /**
 * Copyright IBM Corp. 2023, 2023
@@ -230,17 +229,48 @@ const Carousel = React.forwardRef((props, ref) => {
 });
 Carousel.displayName = componentName;
 Carousel.propTypes = {
+	/**
+	* Provide the contents of the Carousel.
+	*/
 	children: PropTypes.node.isRequired,
+	/**
+	* Provide an optional class to be applied to the containing node.
+	*/
 	className: PropTypes.string,
+	/**
+	* Disables the ability of the Carousel to scroll
+	* use a keyboard's left and right arrow keys.
+	*/
 	disableArrowScroll: PropTypes.bool,
+	/**
+	* Enables the edges of the component to have faded styling.
+	*
+	* Pass a single string (`$color`) to specify the same color for left and right.
+	*
+	* Or pass an object (`{ left: $color1, right: $color2 }`) to specify different colors.
+	*/
+	/**@ts-ignore*/
 	fadedEdgeColor: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
 		left: PropTypes.string,
 		right: PropTypes.string
 	})]),
+	/**
+	* enable scroll mode when only scroll functionality is required, more than one items will be visible at a time
+	* when isScrollMode is false, component behaves like a carousal and on item will be active at a time
+	* and other items will be hidden and inactive.
+	*/
 	isScrollMode: PropTypes.bool,
+	/**
+	* An optional callback function that returns `true`
+	* when the carousel has enough content to be scrollable,
+	* and `false` when there is not enough content.
+	*/
 	onChangeIsScrollable: PropTypes.func,
+	/**
+	* An optional callback function that returns the scroll position as
+	* a value between 0 and 1.
+	*/
 	onScroll: PropTypes.func
 };
-
 //#endregion
-export { Carousel };
+export { Carousel };

package/es/components/Carousel/CarouselItem.js

@@ -11,7 +11,6 @@ import { pkg } from "../../settings.js";
 import { getDevtoolsProps } from "../../global/js/utils/devtools.js";
 import React from "react";
 import PropTypes from "prop-types";
-
 //#region src/components/Carousel/CarouselItem.tsx
 /**
 * Copyright IBM Corp. 2023, 2023
@@ -35,9 +34,14 @@ const CarouselItem = React.forwardRef(({ children, className, ...rest }, ref) =>
 });
 CarouselItem.displayName = componentName;
 CarouselItem.propTypes = {
+	/**
+	* Provide the contents of the CarouselItem.
+	*/
 	children: PropTypes.node.isRequired,
+	/**
+	* Provide an optional class to be applied to the containing node.
+	*/
 	className: PropTypes.string
 };
-
 //#endregion
-export { CarouselItem };
+export { CarouselItem };

package/es/components/Cascade/Cascade.js

@@ -12,7 +12,6 @@ import { getDevtoolsProps } from "../../global/js/utils/devtools.js";
 import React, { forwardRef } from "react";
 import PropTypes from "prop-types";
 import { Grid } from "@carbon/react";
-
 //#region src/components/Cascade/Cascade.tsx
 var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
 const blockClass = `${pkg.prefix}--cascade`;
@@ -63,10 +62,20 @@ const Cascade = forwardRef((props, ref) => {
 });
 Cascade.displayName = componentName;
 Cascade.propTypes = {
+	/**
+	* Main content that is shown.
+	*/
 	children: PropTypes.node,
+	/**
+	* Optional class name.
+	*/
 	className: PropTypes.string,
+	/**
+	* Specifies whether or not to wrap the child content in a `<Grid />`.
+	* If this is set to true it's important that the children are being wrapped in rows in columns.
+	* Check the documentation for additional clarification.
+	*/
 	grid: PropTypes.bool
 };
-
 //#endregion
-export { Cascade };
+export { Cascade };

package/es/components/Checklist/Checklist.js

@@ -10,14 +10,12 @@ import { require_classnames } from "../../node_modules/classnames/index.js";
 import { pkg } from "../../settings.js";
 import { getDevtoolsProps } from "../../global/js/utils/devtools.js";
 import uuidv4 from "../../global/js/utils/uuidv4.js";
-import { Kinds, Themes } from "./Checklist.types.js";
 import { ChecklistChart } from "./ChecklistChart.js";
 import { ChecklistIcon } from "./ChecklistIcon.js";
 import React, { useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { Button, Heading, IconButton, Section } from "@carbon/react";
 import { ChevronUp } from "@carbon/react/icons";
-
 //#region src/components/Checklist/Checklist.tsx
 /**
 * Copyright IBM Corp. 2023, 2024
@@ -42,7 +40,7 @@ const defaults = {
 	open: true,
 	enableToggle: true,
 	taskLists: [],
-	theme: Themes.light,
+	theme: "light",
 	toggleLabel: "Toggle"
 };
 /**
@@ -132,32 +130,86 @@ const Checklist = React.forwardRef(({ chartValue, chartLabel, checklistAriaLabel
 });
 Checklist.displayName = componentName;
 Checklist.propTypes = {
+	/**
+	* Define both `chartLabel` and `chartValue` to show the chart and its label together.
+	*/
 	chartLabel: PropTypes.node,
+	/**
+	* A number between 0 and 1.
+	*
+	* Define both `chartLabel` and `chartValue` to show the chart and its label together.
+	*/
 	chartValue: PropTypes.number,
+	/**
+	* Aria-label for the Checklist component.
+	*/
 	checklistAriaLabel: PropTypes.string,
+	/**
+	* Aria-label for the Checklist's toggle component.
+	*/
 	checklistToggleAriaLabel: PropTypes.string,
+	/**
+	* Provide an optional class to be applied to the containing node.
+	*/
 	className: PropTypes.string,
+	/**
+	* Whether or not to show the open/close toggle.
+	*/
 	enableToggle: PropTypes.bool,
+	/**
+	* Callback for the "View all" button. See also `viewAllLabel`.
+	*/
 	onClickViewAll: PropTypes.func,
+	/**
+	* Optional callback for when the list is opened/closed.
+	*/
 	onToggle: PropTypes.func,
+	/**
+	* Specifies whether the component is opened or closed.
+	* This can be set during initialization, or changed after being rendered.
+	*/
 	open: PropTypes.bool,
+	/**
+	* The task list can be broken down into sub-lists.
+	*
+	* Each sub-list can include an optional `title`.
+	*
+	* Each task must specify the appropriate icon (`kind`) and `label`.
+	*
+	* If any task has an `onClick` callback function defined,
+	* then the `label` will be rendered as a button,
+	* else the `label` will be rendered as plain text.
+	*/
+	/**@ts-ignore */
 	taskLists: PropTypes.arrayOf(PropTypes.shape({
 		title: PropTypes.string,
 		tasks: PropTypes.arrayOf(PropTypes.shape({
 			kind: PropTypes.oneOf([
-				Kinds.unchecked,
-				Kinds.indeterminate,
-				Kinds.checked,
-				Kinds.disabled,
-				Kinds.error
+				"unchecked",
+				"indeterminate",
+				"checked",
+				"disabled",
+				"error"
 			]).isRequired,
 			label: PropTypes.string.isRequired,
 			onClick: PropTypes.func
 		})).isRequired
 	})).isRequired,
-	theme: PropTypes.oneOf([Themes.light, Themes.dark]),
+	/**
+	* Determines the theme of the component.
+	*/
+	theme: PropTypes.oneOf(["light", "dark"]),
+	/**
+	* The title of the component.
+	*/
 	title: PropTypes.node,
+	/**
+	* The label for the toggle's tooltip.
+	*/
 	toggleLabel: PropTypes.string,
+	/**
+	* The alignment of the toggle's tooltip.
+	*/
 	toggleLabelAlign: PropTypes.oneOf([
 		"top",
 		"top-left",
@@ -168,8 +220,10 @@ Checklist.propTypes = {
 		"left",
 		"right"
 	]),
+	/**
+	* If defined, will show and enable the "View all (#)" button at the bottom of the list.
+	*/
 	viewAllLabel: PropTypes.string
 };
-
 //#endregion
-export { Checklist };
+export { Checklist };

package/es/components/Checklist/ChecklistChart.js

@@ -9,12 +9,10 @@ import { __toESM } from "../../_virtual/_rolldown/runtime.js";
 import { require_classnames } from "../../node_modules/classnames/index.js";
 import { pkg } from "../../settings.js";
 import { getDevtoolsProps } from "../../global/js/utils/devtools.js";
-import { Themes } from "./Checklist.types.js";
 import { gray20, gray70, purple50 } from "../../node_modules/@carbon/colors/es/index.js";
 import { clamp } from "../../global/js/utils/clamp.js";
 import React, { useEffect } from "react";
 import PropTypes from "prop-types";
-
 //#region src/components/Checklist/ChecklistChart.jsx
 /**
 * Copyright IBM Corp. 2023, 2024
@@ -25,7 +23,7 @@ import PropTypes from "prop-types";
 var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
 const blockClass = `${pkg.prefix}--checklist__chart`;
 const componentName = "ChecklistChart";
-const defaults = { theme: Themes.light };
+const defaults = { theme: "light" };
 /**
 * Custom chart component used within Checklist PLG component
 */
@@ -35,7 +33,7 @@ let ChecklistChart = React.forwardRef(
 	*/
 	({ className, value, theme = defaults.theme, ...rest }, ref) => {
 		const numDegrees = clamp(value * 360, 0, 360);
-		const circleColor = theme === Themes.light ? gray20 : gray70;
+		const circleColor = theme === "light" ? gray20 : gray70;
 		const progressColor = purple50;
 		useEffect(() => {
 			const ele = document.getElementsByClassName(`${blockClass}`);
@@ -57,10 +55,18 @@ let ChecklistChart = React.forwardRef(
 );
 ChecklistChart.displayName = componentName;
 ChecklistChart.propTypes = {
+	/**
+	* Optional class name for this component.
+	*/
 	className: PropTypes.string,
-	theme: PropTypes.oneOf([Themes.light, Themes.dark]),
+	/**
+	* Determines the theme of the component.
+	*/
+	theme: PropTypes.oneOf(["light", "dark"]),
+	/**
+	* Number between 0 and 1.
+	*/
 	value: PropTypes.number.isRequired
 };
-
 //#endregion
-export { ChecklistChart };
+export { ChecklistChart };

package/es/components/Checklist/ChecklistIcon.js

@@ -9,11 +9,9 @@ import { __toESM } from "../../_virtual/_rolldown/runtime.js";
 import { require_classnames } from "../../node_modules/classnames/index.js";
 import { pkg } from "../../settings.js";
 import { getDevtoolsProps } from "../../global/js/utils/devtools.js";
-import { Kinds, Themes } from "./Checklist.types.js";
 import React from "react";
 import PropTypes from "prop-types";
 import { CheckmarkOutline, CircleDash, Incomplete, Warning } from "@carbon/react/icons";
-
 //#region src/components/Checklist/ChecklistIcon.jsx
 /**
 * Copyright IBM Corp. 2023, 2024
@@ -30,7 +28,7 @@ import { CheckmarkOutline, CircleDash, Incomplete, Warning } from "@carbon/react
 var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
 const blockClass = `${pkg.prefix}--checklist__icon`;
 const componentName = "ChecklistIcon";
-const defaults = { theme: Themes.light };
+const defaults = { theme: "light" };
 /**
 * TODO: A description of the component.
 */
@@ -63,16 +61,24 @@ let ChecklistIcon = React.forwardRef(
 	}
 );
 ChecklistIcon.propTypes = {
+	/**
+	* Provide an optional class to be applied to the containing node.
+	*/
 	className: PropTypes.string,
+	/**
+	* The icon to be displayed.
+	*/
 	kind: PropTypes.oneOf([
-		Kinds.unchecked,
-		Kinds.indeterminate,
-		Kinds.checked,
-		Kinds.disabled,
-		Kinds.error
+		"unchecked",
+		"indeterminate",
+		"checked",
+		"disabled",
+		"error"
 	]),
-	theme: PropTypes.oneOf([Themes.light, Themes.dark])
+	/**
+	* Determines the theme of the component.
+	*/
+	theme: PropTypes.oneOf(["light", "dark"])
 };
-
 //#endregion
-export { ChecklistIcon };
+export { ChecklistIcon };

package/es/components/Coachmark/Coachmark.js

@@ -10,7 +10,7 @@ import { require_classnames } from "../../node_modules/classnames/index.js";
 import { pkg } from "../../settings.js";
 import { useIsomorphicEffect } from "../../global/js/hooks/useIsomorphicEffect.js";
 import { getDevtoolsProps } from "../../global/js/utils/devtools.js";
-import { COACHMARK_OVERLAY_KIND } from "./utils/enums.js";
+import "./utils/enums.js";
 import { useClickOutsideElement, useWindowEvent } from "./utils/hooks.js";
 import { CoachmarkContext } from "./utils/context.js";
 import { CoachmarkOverlay } from "./CoachmarkOverlay.js";
@@ -19,7 +19,6 @@ import React, { forwardRef, useCallback, useEffect, useRef, useState } from "rea
 import PropTypes from "prop-types";
 import { Popover, PopoverContent } from "@carbon/react";
 import { createPortal } from "react-dom";
-
 //#region src/components/Coachmark/Coachmark.tsx
 /**
 * Copyright IBM Corp. 2023, 2025
@@ -46,8 +45,8 @@ const defaults = {
 * @deprecated This component is deprecated.
 */
 const Coachmark = forwardRef(({ align = defaults.align, autoAlign, children, className, onClose = defaults.onClose, overlayClassName, overlayKind = defaults.overlayKind, overlayRef, positionTune, portalTarget, target, theme = defaults.theme, isOpenByDefault = defaults.isOpenByDefault, closeIconDescription = defaults.closeIconDescription, ...rest }, ref) => {
-	const isBeacon = overlayKind === COACHMARK_OVERLAY_KIND.TOOLTIP;
-	const isStacked = overlayKind === COACHMARK_OVERLAY_KIND.STACKED;
+	const isBeacon = overlayKind === "tooltip";
+	const isStacked = overlayKind === "stacked";
 	const [isOpen, setIsOpen] = useState(isStacked || isOpenByDefault);
 	const [shouldResetPosition, setShouldResetPosition] = useState(false);
 	const [targetRect, setTargetRect] = useState();
@@ -175,18 +174,50 @@ Coachmark.deprecated = {
 };
 Coachmark.displayName = componentName;
 const deprecatedProps = {
+	/**
+	* **Deprecated**
+	* Optional class name for the Coachmark Overlay component.
+	*/
 	overlayClassName: PropTypes.string,
+	/**
+	* **Deprecated**
+	* What kind or style of Coachmark to render.
+	*/
 	overlayKind: PropTypes.oneOf([
 		"tooltip",
 		"floating",
 		"stacked"
 	]),
 	overlayRef: PropTypes.shape({ current: overlayRefType }),
+	/**
+	* **Deprecated**
+	* By default, the Coachmark will be appended to the end of `document.body`.
+	* The Coachmark will remain persistent as the user navigates the app until
+	* the user closes the Coachmark.
+	*
+	* Alternatively, the app developer can tightly couple the Coachmark to a DOM
+	* element or other component by specifying a CSS selector. The Coachmark will
+	* remain visible as long as that element remains visible or mounted. When the
+	* element is hidden or component is unmounted, the Coachmark will disappear.
+	*/
 	portalTarget: PropTypes.string,
+	/**
+	* **Deprecated**
+	* The optional button or beacon that the user will click to show the Coachmark.
+	*/
 	target: PropTypes.node,
+	/**
+	* **Deprecated**
+	* Determines the theme of the component.
+	*/
 	theme: PropTypes.oneOf(["light", "dark"])
 };
 Coachmark.propTypes = {
+	/**
+	* Where to render the Coachmark relative to its target.
+	* Applies only to Floating and Tooltip Coachmarks.
+	* @see COACHMARK_ALIGNMENT
+	*/
 	align: PropTypes.oneOf([
 		"bottom",
 		"bottom-left",
@@ -201,18 +232,41 @@ Coachmark.propTypes = {
 		"top-left",
 		"top-right"
 	]),
+	/**
+	* Auto aligns the coachmark based on screen boundaries
+	* Applies only to Tooltip Coachmarks.
+	*/
 	autoAlign: PropTypes.bool,
+	/**
+	* Coachmark should use a single CoachmarkOverlayElements component as a child.
+	* @see CoachmarkOverlayElements
+	*/
 	children: PropTypes.node.isRequired,
+	/**
+	* Optional class name for this component.
+	*/
 	className: PropTypes.string,
+	/**
+	* Tooltip text and aria label for the Close button icon.
+	*/
 	closeIconDescription: PropTypes.string,
+	/**
+	* Determines if the coachmark is open by default.
+	* Does nothing if `overlayKind=stacked`.
+	*/
 	isOpenByDefault: PropTypes.bool,
+	/**
+	* Function to call when the Coachmark closes.
+	*/
 	onClose: PropTypes.func,
+	/**
+	* Fine tune the position of the target in pixels. Applies only to Beacons.
+	*/
 	positionTune: PropTypes.shape({
 		x: PropTypes.number,
 		y: PropTypes.number
 	}),
 	...deprecatedProps
 };
-
 //#endregion
-export { Coachmark };
+export { Coachmark };

package/es/components/Coachmark/CoachmarkDragbar.js

@@ -14,7 +14,6 @@ import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { Button } from "@carbon/react";
 import { Close, Draggable } from "@carbon/react/icons";
-
 //#region src/components/Coachmark/CoachmarkDragbar.tsx
 /**
 * Copyright IBM Corp. 2023, 2025
@@ -85,12 +84,27 @@ CoachmarkDragbar.deprecated = {
 };
 CoachmarkDragbar.displayName = componentName;
 CoachmarkDragbar.propTypes = {
+	/**
+	* Handler to manage keyboard interactions with the dragbar.
+	*/
 	a11yKeyboardHandler: PropTypes.func.isRequired,
+	/**
+	* Function to call when the close button is clicked.
+	*/
 	onClose: PropTypes.func,
+	/**
+	* Function to call when the user clicks and drags the Coachmark.
+	* For internal use only by the parent CoachmarkOverlay.
+	*/
 	onDrag: PropTypes.func,
+	/**
+	* Show/hide the "X" close button.
+	*/
 	showCloseButton: PropTypes.bool,
+	/**
+	* Determines the theme of the component.
+	*/
 	theme: PropTypes.oneOf(["light", "dark"])
 };
-
 //#endregion
-export { CoachmarkDragbar };
+export { CoachmarkDragbar };

package/es/components/Coachmark/CoachmarkHeader.js

@@ -14,7 +14,6 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Button } from "@carbon/react";
 import { Close } from "@carbon/react/icons";
-
 //#region src/components/Coachmark/CoachmarkHeader.tsx
 /**
 * Copyright IBM Corp. 2023, 2025
@@ -60,11 +59,22 @@ CoachmarkHeader.deprecated = {
 };
 CoachmarkHeader.displayName = componentName;
 CoachmarkHeader.propTypes = {
+	/**
+	* Tooltip text and aria label for the Close button icon.
+	*/
 	closeIconDescription: PropTypes.string,
+	/**
+	* Function to call when the close button is clicked.
+	*/
 	onClose: PropTypes.func,
+	/**
+	* Show/hide the "X" close button.
+	*/
 	showCloseButton: PropTypes.bool,
+	/**
+	* Determines the theme of the component.
+	*/
 	theme: PropTypes.oneOf(["light", "dark"])
 };
-
 //#endregion
-export { CoachmarkHeader };
+export { CoachmarkHeader };

package/es/components/Coachmark/CoachmarkOverlay.js

@@ -18,7 +18,6 @@ import { CoachmarkHeader } from "./CoachmarkHeader.js";
 import { getOffsetTune } from "./utils/constants.js";
 import React, { forwardRef, useEffect, useMemo, useRef, useState } from "react";
 import PropTypes from "prop-types";
-
 //#region src/components/Coachmark/CoachmarkOverlay.tsx
 /**
 * Copyright IBM Corp. 2023, 2025
@@ -30,7 +29,7 @@ var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
 const blockClass = `${pkg.prefix}--coachmark-overlay`;
 const componentName = "CoachmarkOverlay";
 const defaults = {
-	kind: COACHMARK_OVERLAY_KIND.FLOATING,
+	kind: "floating",
 	theme: "light"
 };
 /**
@@ -44,8 +43,8 @@ const CoachmarkOverlay = forwardRef((props, ref) => {
 	const [a11yDragMode, setA11yDragMode] = useState(false);
 	const overlayRef = useRef(null);
 	const coachmark = useCoachmark();
-	const isBeacon = kind === COACHMARK_OVERLAY_KIND.TOOLTIP;
-	const isDraggable = kind === COACHMARK_OVERLAY_KIND.FLOATING;
+	const isBeacon = kind === "tooltip";
+	const isDraggable = kind === "floating";
 	const isVisible = className?.includes("is-visible");
 	const handleKeyPress = (event) => {
 		const { shiftKey, key } = event;
@@ -179,13 +178,32 @@ CoachmarkOverlay.deprecated = {
 };
 CoachmarkOverlay.displayName = componentName;
 CoachmarkOverlay.propTypes = {
+	/**
+	* The CoachmarkOverlayElements child components.
+	* Validation is handled in the parent Coachmark component.
+	*/
 	children: PropTypes.node.isRequired,
+	/**
+	* Optional class name for this component.
+	*/
 	className: PropTypes.string,
+	/**
+	* The visibility of CoachmarkOverlay is
+	* managed in the parent Coachmark component.
+	*/
 	fixedIsVisible: PropTypes.bool.isRequired,
+	/**
+	* What kind or style of Coachmark to render.
+	*/
 	kind: PropTypes.oneOf(Object.values(COACHMARK_OVERLAY_KIND)),
+	/**
+	* Function to call when the Coachmark closes.
+	*/
 	onClose: PropTypes.func.isRequired,
+	/**
+	* Determines the theme of the component.
+	*/
 	theme: PropTypes.oneOf(["light", "dark"])
 };
-
 //#endregion
-export { CoachmarkOverlay };
+export { CoachmarkOverlay };