@carbon/ibm-products 2.38.0-alpha.5 → 2.39.0

package/lib/components/Checklist/ChecklistChart.js

@@ -11,11 +11,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index = require('../../node_modules/prop-types/index.js');
+var index$1 = require('../../node_modules/prop-types/index.js');
 var cx = require('classnames');
+var clamp = require('lodash/clamp');
+var index = require('../../node_modules/@carbon/colors/es/index.js');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
-var clamp = require('lodash/clamp');
+var Checklist_types = require('./Checklist.types.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -24,43 +26,28 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var clamp__default = /*#__PURE__*/_interopDefaultLegacy(clamp);
 
 var _excluded = ["className", "value", "theme"];
-
-// Carbon and package components we use.
-/* TODO: @import(s) of carbon components and other package components. */
-
-// The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--checklist__chart");
 var componentName = 'ChecklistChart';
-
-// NOTE: the component SCSS is not imported here: it is rolled up separately.
-
-// Default values can be included here and then assigned to the prop params,
-// e.g. prop = defaults.prop,
-// This gathers default values together neatly and ensures non-primitive
-// values are initialized early to avoid react making unnecessary re-renders.
-// Note that default values are not required for props that are 'required',
-// nor for props where the component can apply undefined values reasonably.
-// Default values should be provided when the component needs to make a choice
-// or assumption when a prop is not supplied.
-
-// Default values for props
 var defaults = {
-  theme: 'light'
+  theme: Checklist_types.Themes.light
 };
 
 /**
- * TODO: A description of the component.
+ * Custom chart component used within Checklist PLG component
+ */
+var ChecklistChart = /*#__PURE__*/React__default["default"].forwardRef(
+/**
+ * @param {{className?: string, value: number, theme?: import('./Checklist.types').Theme}} props type description
  */
-var ChecklistChart = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+function (_ref, ref) {
   var className = _ref.className,
     value = _ref.value,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var numDegrees = clamp__default["default"](value * 360, 0, 360);
-  var circleColor = theme === 'light' ? '#e0e0e0' : '#525252'; // $ui-03 (-ish)
-  var progressColor = theme === 'light' ? '#a56eff' : '#a56eff'; // $purple-50
-
+  var circleColor = theme === Checklist_types.Themes.light ? index.gray20 : index.gray70; // $ui-03 (-ish)
+  var progressColor = index.purple50;
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: cx__default["default"](blockClass, className),
     style: {
@@ -71,13 +58,7 @@ var ChecklistChart = /*#__PURE__*/React__default["default"].forwardRef(function
     role: "img"
   }, devtools.getDevtoolsProps(componentName)));
 });
-
-// Return a placeholder if not released and not enabled by feature flag
-// ChecklistChart = pkg.checkComponentEnabled(ChecklistChart, componentName);
-
-// The display name of the component, used by React. Note that displayName
-// is used in preference to relying on function.name.
-// ChecklistChart.displayName = componentName;
+ChecklistChart.displayName = componentName;
 
 // The types and DocGen commentary for the component props,
 // in alphabetical order (for consistency).
@@ -86,15 +67,15 @@ ChecklistChart.propTypes = {
   /**
    * Optional class name for this component.
    */
-  className: index["default"].string,
+  className: index$1["default"].string,
   /**
    * Determines the theme of the component.
    */
-  theme: index["default"].oneOf(['light', 'dark']),
+  theme: index$1["default"].oneOf([Checklist_types.Themes.light, Checklist_types.Themes.dark]),
   /**
    * Number between 0 and 1.
    */
-  value: index["default"].number.isRequired
+  value: index$1["default"].number.isRequired
 };
 
 exports.ChecklistChart = ChecklistChart;

package/lib/components/Checklist/ChecklistIcon.d.ts

@@ -1,5 +1,9 @@
 /**
  * TODO: A description of the component.
  */
-export let ChecklistIcon: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+export let ChecklistIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    kind?: import("./Checklist.types").Kind | undefined;
+    theme?: import("./Checklist.types").Theme | undefined;
+} & React.RefAttributes<any>>;
 import React from 'react';

package/lib/components/Checklist/ChecklistIcon.js

@@ -16,6 +16,7 @@ var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 var icons = require('@carbon/react/icons');
+var Checklist_types = require('./Checklist.types.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -41,13 +42,17 @@ var componentName = 'ChecklistIcon';
 
 // Default values for props
 var defaults = {
-  theme: 'light'
+  theme: Checklist_types.Themes.light
 };
 
 /**
  * TODO: A description of the component.
  */
-var ChecklistIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+var ChecklistIcon = /*#__PURE__*/React__default["default"].forwardRef(
+/**
+ * @param {{className?: string, kind?: import('./Checklist.types').Kind, theme?: import('./Checklist.types').Theme}} props type description
+ */
+function (_ref, ref) {
   var className = _ref.className,
     kind = _ref.kind,
     _ref$theme = _ref.theme,
@@ -95,11 +100,11 @@ ChecklistIcon.propTypes = {
   /**
    * The icon to be displayed.
    */
-  kind: index["default"].oneOf(['unchecked', 'indeterminate', 'checked', 'disabled', 'error']),
+  kind: index["default"].oneOf([Checklist_types.Kinds.unchecked, Checklist_types.Kinds.indeterminate, Checklist_types.Kinds.checked, Checklist_types.Kinds.disabled, Checklist_types.Kinds.error]),
   /**
    * Determines the theme of the component.
    */
-  theme: index["default"].oneOf(['light', 'dark'])
+  theme: index["default"].oneOf([Checklist_types.Themes.light, Checklist_types.Themes.dark])
 };
 
 exports.ChecklistIcon = ChecklistIcon;

package/lib/components/Coachmark/Coachmark.d.ts

@@ -1,7 +1,70 @@
+/**
+ * Copyright IBM Corp. 2023, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { MutableRefObject, ReactNode } from 'react';
+interface CoachmarkProps {
+    /**
+     * Where to render the Coachmark relative to its target.
+     * Applies only to Floating and Tooltip Coachmarks.
+     * @see COACHMARK_ALIGNMENT
+     */
+    align?: 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-top' | 'left-bottom' | 'right' | 'right-top' | 'right-bottom' | 'top' | 'top-left' | 'top-right';
+    /**
+     * Coachmark should use a single CoachmarkOverlayElements component as a child.
+     * @see CoachmarkOverlayElements
+     */
+    children: ReactNode;
+    /**
+     * Optional class name for this component.
+     */
+    className?: string;
+    /**
+     * Function to call when the Coachmark closes.
+     */
+    onClose?: () => void;
+    /**
+     * Optional class name for the Coachmark Overlay component.
+     */
+    overlayClassName?: string;
+    /**
+     * What kind or style of Coachmark to render.
+     */
+    overlayKind?: 'tooltip' | 'floating' | 'stacked';
+    overlayRef?: MutableRefObject<HTMLElement | null>;
+    /**
+     * 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?: string;
+    /**
+     * Fine tune the position of the target in pixels. Applies only to Beacons.
+     */
+    positionTune?: {
+        x: number;
+        y: number;
+    } | object;
+    /**
+     * The optional button or beacon that the user will click to show the Coachmark.
+     */
+    target: React.ReactNode;
+    /**
+     * Determines the theme of the component.
+     */
+    theme?: 'light' | 'dark';
+}
 /**
  * Coachmarks are used to call out specific functionality or concepts
  * within the UI that may not be intuitive but are important for the
  * user to gain understanding of the product's main value and discover new use cases.
  */
-export let Coachmark: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let Coachmark: React.ForwardRefExoticComponent<CoachmarkProps & React.RefAttributes<HTMLElement>>;
+export {};

package/lib/components/Coachmark/Coachmark.js

@@ -38,7 +38,6 @@ var defaults = {
   overlayKind: 'tooltip',
   theme: 'light'
 };
-
 /**
  * Coachmarks are used to call out specific functionality or concepts
  * within the UI that may not be intuitive but are important for the
@@ -186,7 +185,9 @@ exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onClose: handleClose,
     theme: theme,
     className: cx__default["default"](overlayClassName, "".concat(overlayBlockClass, "--is-visible"))
-  }, children), portalNode)));
+  }, children),
+  // Default to `document.body` when `portalNode` is `null`
+  portalNode || document.body)));
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -227,13 +228,9 @@ exports.Coachmark.propTypes = {
    * What kind or style of Coachmark to render.
    */
   overlayKind: index["default"].oneOf(['tooltip', 'floating', 'stacked']),
-  overlayRef: index["default"].oneOfType([
-  // Either a function
-  index["default"].func,
-  // Or the instance of a DOM native element (see the note about SSR)
-  index["default"].shape({
-    current: index["default"].instanceOf(index.propTypesExports.Component)
-  })]),
+  overlayRef: index["default"].shape({
+    current: index["default"].instanceOf(HTMLElement)
+  }),
   /**
    * 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

package/lib/components/Coachmark/CoachmarkDragbar.d.ts

@@ -1,6 +1,44 @@
+/**
+ * Copyright IBM Corp. 2023, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+interface CoachmarkDragbarProps {
+    /**
+     * Handler to manage keyboard interactions with the dragbar.
+     */
+    a11yKeyboardHandler: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+    /**
+     * Tooltip text and aria label for the Close button icon.
+     */
+    closeIconDescription?: string;
+    /**
+     * Function to call when the close button is clicked.
+     */
+    onClose?: () => void;
+    /**
+     * Function to call when the user clicks and drags the Coachmark.
+     * For internal use only by the parent CoachmarkOverlay.
+     */
+    onDrag?: (movementX: number, movementY: number) => void;
+    /**
+     * Show/hide the "X" close button.
+     */
+    showCloseButton?: boolean;
+    /**
+     * Determines the theme of the component.
+     */
+    theme?: 'light' | 'dark';
+    /**
+     * Additional props passed to the component.
+     */
+    [key: string]: any;
+}
 /**
  * DO NOT USE. This component is for the exclusive use
  * of other Novice to Pro components.
  */
-export let CoachmarkDragbar: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let CoachmarkDragbar: React.ForwardRefExoticComponent<Omit<CoachmarkDragbarProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export {};

package/lib/components/Coachmark/CoachmarkDragbar.js

@@ -40,7 +40,6 @@ var defaults = {
   showCloseButton: true,
   theme: 'light'
 };
-
 /**
  * DO NOT USE. This component is for the exclusive use
  * of other Novice to Pro components.
@@ -100,6 +99,9 @@ exports.CoachmarkDragbar = /*#__PURE__*/React__default["default"].forwardRef(fun
     className: "".concat(overlayBlockClass, "__handle"),
     onMouseDown: handleDragStart,
     onKeyDown: a11yKeyboardHandler
+    // TODO: i18n
+    ,
+    title: "Drag Handle"
   }, _Draggable || (_Draggable = /*#__PURE__*/React__default["default"].createElement(icons.Draggable, {
     size: "16"
   }))), showCloseButton && /*#__PURE__*/React__default["default"].createElement(react.Button, {

package/lib/components/Coachmark/CoachmarkHeader.d.ts

@@ -1,6 +1,31 @@
+/**
+ * Copyright IBM Corp. 2023, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+interface CoachmarkHeaderProps {
+    /**
+     * Tooltip text and aria label for the Close button icon.
+     */
+    closeIconDescription?: string;
+    /**
+     * Function to call when the close button is clicked.
+     */
+    onClose?: () => void;
+    /**
+     * Show/hide the "X" close button.
+     */
+    showCloseButton?: boolean;
+    /**
+     * Determines the theme of the component.
+     */
+    theme?: 'light' | 'dark';
+}
 /**
  * DO NOT USE. This component is for the exclusive use
  * of other Novice to Pro components.
  */
-export let CoachmarkHeader: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let CoachmarkHeader: React.ForwardRefExoticComponent<CoachmarkHeaderProps & React.RefAttributes<HTMLElement>>;
+export {};

package/lib/components/Coachmark/CoachmarkHeader.js

@@ -35,7 +35,6 @@ var defaults = {
   showCloseButton: true,
   theme: 'light'
 };
-
 /**
  * DO NOT USE. This component is for the exclusive use
  * of other Novice to Pro components.

package/lib/components/Coachmark/CoachmarkOverlay.d.ts

@@ -1,6 +1,46 @@
+/**
+ * Copyright IBM Corp. 2023, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { ReactNode } from 'react';
+import { COACHMARK_OVERLAY_KIND } from './utils/enums';
+interface CoachmarkOverlayProps {
+    /**
+     * The CoachmarkOverlayElements child components.
+     * Validation is handled in the parent Coachmark component.
+     */
+    children: ReactNode;
+    /**
+     * Optional class name for this component.
+     */
+    className?: string;
+    /**
+     * The visibility of CoachmarkOverlay is
+     * managed in the parent Coachmark component.
+     */
+    fixedIsVisible: boolean;
+    /**
+     * What kind or style of Coachmark to render.
+     */
+    kind?: COACHMARK_OVERLAY_KIND;
+    /**
+     * Function to call when the Coachmark closes.
+     */
+    onClose: () => void;
+    /**
+     * Determines the theme of the component.
+     */
+    theme?: 'light' | 'dark';
+    /**
+     * Additional props passed to the component.
+     */
+    [key: string]: any;
+}
 /**
  * DO NOT USE. This component is for the exclusive use
  * of other Novice to Pro components.
  */
-export let CoachmarkOverlay: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let CoachmarkOverlay: React.ForwardRefExoticComponent<Omit<CoachmarkOverlayProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/Coachmark/CoachmarkOverlay.js

@@ -39,7 +39,6 @@ var defaults = {
   kind: enums.COACHMARK_OVERLAY_KIND.FLOATING,
   theme: 'light'
 };
-
 /**
  * DO NOT USE. This component is for the exclusive use
  * of other Novice to Pro components.
@@ -61,7 +60,7 @@ exports.CoachmarkOverlay = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     a11yDragMode = _useState2[0],
     setA11yDragMode = _useState2[1];
-  var overlayRef = React.useRef();
+  var overlayRef = React.useRef(null);
   var coachmark = context.useCoachmark();
   var isBeacon = kind === enums.COACHMARK_OVERLAY_KIND.TOOLTIP;
   var isDraggable = kind === enums.COACHMARK_OVERLAY_KIND.FLOATING;
@@ -94,20 +93,21 @@ exports.CoachmarkOverlay = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var styledTune = {};
   if (isBeacon || isDraggable) {
     if (coachmark.targetRect) {
-      styledTune = {
-        left: coachmark.targetRect.x + window.scrollX,
-        top: coachmark.targetRect.y + window.scrollY
-      };
+      styledTune.left = coachmark.targetRect.x + window.scrollX;
+      styledTune.top = coachmark.targetRect.y + window.scrollY;
     }
-    if (isBeacon) {
-      // Compensate for radius of beacon
-      styledTune.left += 16;
-      styledTune.top += 16;
-    } else if (isDraggable) {
-      // Compensate for width and height of target element
-      var offsetTune = constants.getOffsetTune(coachmark, kind);
-      styledTune.left += offsetTune.left;
-      styledTune.top += offsetTune.top;
+    if (styledTune.left && styledTune.top) {
+      if (isBeacon) {
+        // Compensate for radius of beacon
+        styledTune.left += 16;
+        styledTune.top += 16;
+      }
+      if (isDraggable) {
+        // Compensate for width and height of target element
+        var offsetTune = constants.getOffsetTune(coachmark, kind);
+        styledTune.left += offsetTune.left;
+        styledTune.top += offsetTune.top;
+      }
     }
   }
   function handleDragBounds(x, y) {
@@ -132,6 +132,9 @@ exports.CoachmarkOverlay = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }
   function handleDrag(movementX, movementY) {
     var overlay = overlayRef.current;
+    if (!overlay) {
+      return;
+    }
     var _overlay$getBoundingC = overlay.getBoundingClientRect(),
       x = _overlay$getBoundingC.x,
       y = _overlay$getBoundingC.y;

package/lib/components/Coachmark/CoachmarkTagline.d.ts

@@ -1,6 +1,31 @@
+/**
+ * Copyright IBM Corp. 2023, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+interface CoachmarkTaglineProps {
+    /**
+     * Tooltip text and aria label for the Close button icon.
+     */
+    closeIconDescription?: string;
+    /**
+     * Function to call when the close button is clicked.
+     */
+    onClose?: () => void;
+    /**
+     * Determines the theme of the component.
+     */
+    theme?: 'light' | 'dark';
+    /**
+     * The title of the tagline.
+     */
+    title: string;
+}
 /**
  * DO NOT USE. This component is for the exclusive use
  * of other Novice to Pro components.
  */
-export let CoachmarkTagline: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let CoachmarkTagline: React.ForwardRefExoticComponent<CoachmarkTaglineProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/Coachmark/CoachmarkTagline.js

@@ -35,7 +35,6 @@ var defaults = {
   onClose: function onClose() {},
   theme: 'light'
 };
-
 /**
  * DO NOT USE. This component is for the exclusive use
  * of other Novice to Pro components.

package/lib/components/Coachmark/utils/enums.d.ts

@@ -11,27 +11,27 @@ export declare enum BEACON_KIND {
  * @param FIXED is fixed to the bottom-right of the viewport.
  * @param STACKED is fixed to the bottom-right of the viewport, includes links to show more, stackable Coachmarks if included.
  */
-export declare const COACHMARK_OVERLAY_KIND: {
-    TOOLTIP: string;
-    FLOATING: string;
-    FIXED: string;
-    STACKED: string;
-};
+export declare enum COACHMARK_OVERLAY_KIND {
+    TOOLTIP = "tooltip",
+    FLOATING = "floating",
+    FIXED = "fixed",
+    STACKED = "stacked"
+}
 /**
  * Where to render the Coachmark relative to its target.
  * Applies only to Floating and Tooltip Coachmarks.
  */
-export declare const COACHMARK_ALIGNMENT: {
-    BOTTOM: string;
-    BOTTOM_LEFT: string;
-    BOTTOM_RIGHT: string;
-    LEFT: string;
-    LEFT_TOP: string;
-    LEFT_BOTTOM: string;
-    RIGHT: string;
-    RIGHT_TOP: string;
-    RIGHT_BOTTOM: string;
-    TOP: string;
-    TOP_LEFT: string;
-    TOP_RIGHT: string;
-};
+export declare enum COACHMARK_ALIGNMENT {
+    BOTTOM = "bottom",
+    BOTTOM_LEFT = "bottom-left",
+    BOTTOM_RIGHT = "bottom-right",
+    LEFT = "left",
+    LEFT_TOP = "left-top",
+    LEFT_BOTTOM = "left-bottom",
+    RIGHT = "right",
+    RIGHT_TOP = "right-top",
+    RIGHT_BOTTOM = "right-bottom",
+    TOP = "top",
+    TOP_LEFT = "top-left",
+    TOP_RIGHT = "top-right"
+}

package/lib/components/Coachmark/utils/enums.js

@@ -18,30 +18,32 @@ Object.defineProperty(exports, '__esModule', { value: true });
  * @param FIXED is fixed to the bottom-right of the viewport.
  * @param STACKED is fixed to the bottom-right of the viewport, includes links to show more, stackable Coachmarks if included.
  */
-var COACHMARK_OVERLAY_KIND = {
-  TOOLTIP: 'tooltip',
-  FLOATING: 'floating',
-  FIXED: 'fixed',
-  STACKED: 'stacked'
-};
+var COACHMARK_OVERLAY_KIND = /*#__PURE__*/function (COACHMARK_OVERLAY_KIND) {
+  COACHMARK_OVERLAY_KIND["TOOLTIP"] = "tooltip";
+  COACHMARK_OVERLAY_KIND["FLOATING"] = "floating";
+  COACHMARK_OVERLAY_KIND["FIXED"] = "fixed";
+  COACHMARK_OVERLAY_KIND["STACKED"] = "stacked";
+  return COACHMARK_OVERLAY_KIND;
+}({});
 /**
  * Where to render the Coachmark relative to its target.
  * Applies only to Floating and Tooltip Coachmarks.
  */
-var COACHMARK_ALIGNMENT = {
-  BOTTOM: 'bottom',
-  BOTTOM_LEFT: 'bottom-left',
-  BOTTOM_RIGHT: 'bottom-right',
-  LEFT: 'left',
-  LEFT_TOP: 'left-top',
-  LEFT_BOTTOM: 'left-bottom',
-  RIGHT: 'right',
-  RIGHT_TOP: 'right-top',
-  RIGHT_BOTTOM: 'right-bottom',
-  TOP: 'top',
-  TOP_LEFT: 'top-left',
-  TOP_RIGHT: 'top-right'
-};
+var COACHMARK_ALIGNMENT = /*#__PURE__*/function (COACHMARK_ALIGNMENT) {
+  COACHMARK_ALIGNMENT["BOTTOM"] = "bottom";
+  COACHMARK_ALIGNMENT["BOTTOM_LEFT"] = "bottom-left";
+  COACHMARK_ALIGNMENT["BOTTOM_RIGHT"] = "bottom-right";
+  COACHMARK_ALIGNMENT["LEFT"] = "left";
+  COACHMARK_ALIGNMENT["LEFT_TOP"] = "left-top";
+  COACHMARK_ALIGNMENT["LEFT_BOTTOM"] = "left-bottom";
+  COACHMARK_ALIGNMENT["RIGHT"] = "right";
+  COACHMARK_ALIGNMENT["RIGHT_TOP"] = "right-top";
+  COACHMARK_ALIGNMENT["RIGHT_BOTTOM"] = "right-bottom";
+  COACHMARK_ALIGNMENT["TOP"] = "top";
+  COACHMARK_ALIGNMENT["TOP_LEFT"] = "top-left";
+  COACHMARK_ALIGNMENT["TOP_RIGHT"] = "top-right";
+  return COACHMARK_ALIGNMENT;
+}({});
 
 exports.COACHMARK_ALIGNMENT = COACHMARK_ALIGNMENT;
 exports.COACHMARK_OVERLAY_KIND = COACHMARK_OVERLAY_KIND;

package/lib/components/CoachmarkButton/CoachmarkButton.d.ts

@@ -1,5 +1,22 @@
 /**
- * Use CoachmarkButton for the target prop of a Coachmark component.
+ * Copyright IBM Corp. 2023, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
  */
-export let CoachmarkButton: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';
+interface CoachmarkButtonProps {
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * The aria label.
+     */
+    label: string;
+}
+/**
+ * Use CoachmarkButton for the target prop of a Coachmark component.
+ */
+export declare let CoachmarkButton: React.ForwardRefExoticComponent<CoachmarkButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export {};