@carbon/ibm-products 2.43.2-canary.3 → 2.43.2-canary.300

package/lib/components/UserAvatar/UserAvatar.js

@@ -7,11 +7,9 @@
 
 'use strict';
 
-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 = require('../../_virtual/index.js');
 var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
@@ -20,11 +18,6 @@ var icons = require('@carbon/react/icons');
 require('../../global/js/utils/props-helper.js');
 var TooltipTrigger = require('../TooltipTrigger/TooltipTrigger.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 var _excluded = ["backgroundColor", "className", "image", "imageDescription", "name", "renderIcon", "size", "tooltipText", "tooltipAlignment"];
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
@@ -35,42 +28,23 @@ var componentName = 'UserAvatar';
 
 // 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
-// const defaults = {
-//   /* TODO: add defaults for relevant props if needed */
-// };
-
 /**
  * TODO: A description of the component.
  */
 
-var defaults = {
-  size: 'md',
-  tooltipAlignment: 'bottom',
-  backgroundColor: 'order-1-cyan'
-};
-exports.UserAvatar = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+exports.UserAvatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$backgroundColor = _ref.backgroundColor,
-    backgroundColor = _ref$backgroundColor === void 0 ? defaults.backgroundColor : _ref$backgroundColor,
+    backgroundColor = _ref$backgroundColor === void 0 ? 'order-1-cyan' : _ref$backgroundColor,
     className = _ref.className,
     image = _ref.image,
     imageDescription = _ref.imageDescription,
     name = _ref.name,
     RenderIcon = _ref.renderIcon,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? defaults.size : _ref$size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
     tooltipText = _ref.tooltipText,
     _ref$tooltipAlignment = _ref.tooltipAlignment,
-    tooltipAlignment = _ref$tooltipAlignment === void 0 ? defaults.tooltipAlignment : _ref$tooltipAlignment,
+    tooltipAlignment = _ref$tooltipAlignment === void 0 ? 'bottom' : _ref$tooltipAlignment,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var carbonPrefix = react.usePrefix();
   var iconSize = {
@@ -81,7 +55,7 @@ exports.UserAvatar = /*#__PURE__*/React__default["default"].forwardRef(function
   };
   var formatInitials = function formatInitials() {
     var _ref2;
-    var parts = name.split(' ');
+    var parts = (name === null || name === void 0 ? void 0 : name.split(' ')) || [];
     var firstChar = parts[0].charAt(0).toUpperCase();
     var secondChar = parts[0].charAt(1).toUpperCase();
     if (parts.length === 1) {
@@ -99,23 +73,23 @@ exports.UserAvatar = /*#__PURE__*/React__default["default"].forwardRef(function
       size: iconSize[size]
     };
     if (image) {
-      return /*#__PURE__*/React__default["default"].createElement("img", {
+      return /*#__PURE__*/React.createElement("img", {
         alt: imageDescription,
         src: image,
         className: "".concat(blockClass, "__photo ").concat(blockClass, "__photo--").concat(size)
       });
     }
     if (RenderIcon) {
-      return /*#__PURE__*/React__default["default"].createElement(RenderIcon, iconProps);
+      return /*#__PURE__*/React.createElement(RenderIcon, iconProps);
     }
     if (name) {
       return formatInitials();
     }
-    return /*#__PURE__*/React__default["default"].createElement(icons.User, iconProps);
+    return /*#__PURE__*/React.createElement(icons.User, iconProps);
   };
   var Avatar = function Avatar() {
-    return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
-      className: cx__default["default"](blockClass,
+    return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
+      className: cx(blockClass,
       // Apply the block class to the main HTML element
       className, // Apply any supplied class names to the main HTML element.
       "".concat(blockClass, "--").concat(backgroundColor), "".concat(blockClass, "--").concat(size),
@@ -130,13 +104,13 @@ exports.UserAvatar = /*#__PURE__*/React__default["default"].forwardRef(function
     }, devtools.getDevtoolsProps(componentName)), getItem());
   };
   if (tooltipText) {
-    return /*#__PURE__*/React__default["default"].createElement(react.Tooltip, {
+    return /*#__PURE__*/React.createElement(react.Tooltip, {
       align: tooltipAlignment,
       label: tooltipText,
       className: "".concat(blockClass, "__tooltip ").concat(carbonPrefix, "--icon-tooltip")
-    }, /*#__PURE__*/React__default["default"].createElement(TooltipTrigger.TooltipTrigger, null, /*#__PURE__*/React__default["default"].createElement(Avatar, null)));
+    }, /*#__PURE__*/React.createElement(TooltipTrigger.TooltipTrigger, null, /*#__PURE__*/React.createElement(Avatar, null)));
   }
-  return /*#__PURE__*/React__default["default"].createElement(Avatar, null);
+  return /*#__PURE__*/React.createElement(Avatar, null);
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -153,41 +127,44 @@ exports.UserAvatar.propTypes = {
   /**
    * Provide the background color need to be set for UserAvatar.
    */
-  backgroundColor: index["default"].oneOf(['order-1-cyan', 'order-2-gray', 'order-3-green', 'order-4-magenta', 'order-5-purple', 'order-6-teal', 'order-7-cyan', 'order-8-gray', 'order-9-green', 'order-10-magenta', 'order-11-purple', 'order-12-teal']),
+  backgroundColor: index.default.oneOf(['order-1-cyan', 'order-2-gray', 'order-3-green', 'order-4-magenta', 'order-5-purple', 'order-6-teal', 'order-7-cyan', 'order-8-gray', 'order-9-green', 'order-10-magenta', 'order-11-purple', 'order-12-teal']),
   /**
    * Provide an optional class to be applied to the containing node.
    */
-  className: index["default"].string,
+  className: index.default.string,
   /**
    * When passing the image prop, supply a full path to the image to be displayed.
    */
-  image: index["default"].string,
+  /**@ts-ignore */
+  image: index.default.string,
   /**
    * When passing the image prop use the imageDescription prop to describe the image for screen reader.
    */
-  imageDescription: index["default"].string.isRequired.if(function (_ref3) {
+  /**@ts-ignore */
+  imageDescription: index.default.string.isRequired.if(function (_ref3) {
     var image = _ref3.image;
     return !!image;
   }),
   /**
    * When passing the name prop, either send the initials to be used or the user's full name. The first two capital letters of the user's name will be used as the name.
    */
-  name: index["default"].string,
+  name: index.default.string,
   /**
    * Provide a custom icon to use if you need to use an icon other than the default one
    */
-  renderIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
+  /**@ts-ignore */
+  renderIcon: index.default.oneOfType([index.default.func, index.default.object]),
   /**
    * Set the size of the avatar circle
    */
-  size: index["default"].oneOf(['xl', 'lg', 'md', 'sm']),
+  size: index.default.oneOf(['xl', 'lg', 'md', 'sm']),
   /**
    * Specify how the trigger should align with the tooltip
    */
-  tooltipAlignment: index["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
+  tooltipAlignment: index.default.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
   /**
    * Pass in the display name to have it shown on hover
    */
-  tooltipText: index["default"].string
+  tooltipText: index.default.string
   /* TODO: add types and DocGen for all props. */
 };

package/lib/components/UserProfileImage/UserProfileImage.d.ts

@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference path="../../../src/custom-typings/index.d.ts" />
-import React from 'react';
-import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
 import '../../global/js/utils/props-helper';
+import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
 import { IconButton } from '@carbon/react';
+import React from 'react';
 type imageProps = {
     /**
      * When passing the image prop, supply a full path to the image to be displayed.
@@ -25,7 +25,7 @@ type imageProps = {
 type UserProfileImageBaseProps = {
     /**
      * The background color passed should match one of the background colors in the library documentation:
-     * https://pages.github.ibm.com/cdai-design/pal/patterns/user-profile-images/
+     * https://pages.github.ibm.com/carbon/ibm-products/patterns/user-profile-images/
      */
     backgroundColor?: string;
     /**
@@ -61,7 +61,7 @@ type UserProfileImageBaseProps = {
      */
     tooltipText?: string;
 };
-type UserProfileImageProps = UserProfileImageBaseProps & imageProps;
+export type UserProfileImageProps = UserProfileImageBaseProps & imageProps;
 /**
  * The user profile avatar allows for an image of the user to be displayed by passing in the image prop. By default the component will display a user icon on a blue background.
  */

package/lib/components/UserProfileImage/UserProfileImage.js

@@ -7,25 +7,19 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+require('../../global/js/utils/props-helper.js');
+var icons = require('@carbon/react/icons');
+var react = require('@carbon/react');
+var index = require('../../_virtual/index.js');
 var React = require('react');
-var index = require('../../node_modules/prop-types/index.js');
 var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
-require('../../global/js/utils/props-helper.js');
 var settings = require('../../settings.js');
-var icons = require('@carbon/react/icons');
-var react = require('@carbon/react');
 var TooltipTrigger = require('../TooltipTrigger/TooltipTrigger.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 var _excluded = ["backgroundColor", "className", "kind", "icon", "initials", "image", "imageDescription", "size", "theme", "tooltipText", "tooltipAlignment"];
+
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--user-profile-image");
 var componentName = 'UserProfileImage';
@@ -39,7 +33,7 @@ var defaults = {
 /**
  * The user profile avatar allows for an image of the user to be displayed by passing in the image prop. By default the component will display a user icon on a blue background.
  */
-exports.UserProfileImage = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+exports.UserProfileImage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _FillItem;
   var backgroundColor = _ref.backgroundColor,
     className = _ref.className,
@@ -58,34 +52,34 @@ exports.UserProfileImage = /*#__PURE__*/React__default["default"].forwardRef(fun
   var icons$1 = {
     user: {
       md: function md(props) {
-        return /*#__PURE__*/React__default["default"].createElement(icons.User, _rollupPluginBabelHelpers["extends"]({
+        return /*#__PURE__*/React.createElement(icons.User, _rollupPluginBabelHelpers.extends({
           size: 20
         }, props));
       },
       lg: function lg(props) {
-        return /*#__PURE__*/React__default["default"].createElement(icons.User, _rollupPluginBabelHelpers["extends"]({
+        return /*#__PURE__*/React.createElement(icons.User, _rollupPluginBabelHelpers.extends({
           size: 24
         }, props));
       },
       xl: function xl(props) {
-        return /*#__PURE__*/React__default["default"].createElement(icons.User, _rollupPluginBabelHelpers["extends"]({
+        return /*#__PURE__*/React.createElement(icons.User, _rollupPluginBabelHelpers.extends({
           size: 32
         }, props));
       }
     },
     group: {
       md: function md(props) {
-        return /*#__PURE__*/React__default["default"].createElement(icons.Group, _rollupPluginBabelHelpers["extends"]({
+        return /*#__PURE__*/React.createElement(icons.Group, _rollupPluginBabelHelpers.extends({
           size: 20
         }, props));
       },
       lg: function lg(props) {
-        return /*#__PURE__*/React__default["default"].createElement(icons.Group, _rollupPluginBabelHelpers["extends"]({
+        return /*#__PURE__*/React.createElement(icons.Group, _rollupPluginBabelHelpers.extends({
           size: 24
         }, props));
       },
       xl: function xl(props) {
-        return /*#__PURE__*/React__default["default"].createElement(icons.Group, _rollupPluginBabelHelpers["extends"]({
+        return /*#__PURE__*/React.createElement(icons.Group, _rollupPluginBabelHelpers.extends({
           size: 32
         }, props));
       }
@@ -103,7 +97,7 @@ exports.UserProfileImage = /*#__PURE__*/React__default["default"].forwardRef(fun
   var getFillItem = function getFillItem() {
     if (image) {
       return function () {
-        return /*#__PURE__*/React__default["default"].createElement("img", {
+        return /*#__PURE__*/React.createElement("img", {
           alt: imageDescription,
           src: image,
           className: "".concat(blockClass, "__photo ").concat(blockClass, "__photo--").concat(size)
@@ -126,16 +120,16 @@ exports.UserProfileImage = /*#__PURE__*/React__default["default"].forwardRef(fun
   };
   var FillItem = getFillItem();
   var renderUserProfileImage = function renderUserProfileImage() {
-    return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
       ref: ref,
-      className: cx__default["default"]([blockClass, className, "".concat(blockClass, "--").concat(size), "".concat(blockClass, "--").concat(theme), "".concat(blockClass, "--").concat(backgroundColor || getRandomColor())])
-    }, devtools.getDevtoolsProps(componentName)), _FillItem || (_FillItem = /*#__PURE__*/React__default["default"].createElement(FillItem, null)));
+      className: cx([blockClass, className, "".concat(blockClass, "--").concat(size), "".concat(blockClass, "--").concat(theme), "".concat(blockClass, "--").concat(backgroundColor || getRandomColor())])
+    }, devtools.getDevtoolsProps(componentName)), _FillItem || (_FillItem = /*#__PURE__*/React.createElement(FillItem, null)));
   };
-  return FillItem && (tooltipText ? /*#__PURE__*/React__default["default"].createElement(react.Tooltip, {
+  return FillItem && (tooltipText ? /*#__PURE__*/React.createElement(react.Tooltip, {
     align: tooltipAlignment,
     label: tooltipText,
     className: "".concat(blockClass, "__tooltip ").concat(carbonPrefix, "--icon-tooltip")
-  }, /*#__PURE__*/React__default["default"].createElement(TooltipTrigger.TooltipTrigger, null, renderUserProfileImage())) : renderUserProfileImage());
+  }, /*#__PURE__*/React.createElement(TooltipTrigger.TooltipTrigger, null, renderUserProfileImage())) : renderUserProfileImage());
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -144,52 +138,52 @@ exports.UserProfileImage.displayName = componentName;
 exports.UserProfileImage.propTypes = {
   /**
    * The background color passed should match one of the background colors in the library documentation:
-   * https://pages.github.ibm.com/cdai-design/pal/patterns/user-profile-images/
+   * https://pages.github.ibm.com/carbon/ibm-products/patterns/user-profile-images/
    */
-  backgroundColor: index["default"].oneOf(['light-cyan', 'dark-cyan', 'light-gray', 'dark-gray', 'light-green', 'dark-green', 'light-magenta', 'dark-magenta', 'light-purple', 'dark-purple', 'light-teal', 'dark-teal']),
+  backgroundColor: index.default.oneOf(['light-cyan', 'dark-cyan', 'light-gray', 'dark-gray', 'light-green', 'dark-green', 'light-magenta', 'dark-magenta', 'light-purple', 'dark-purple', 'light-teal', 'dark-teal']),
   /**
    * Provide an optional class to be applied to the containing node.
    */
-  className: index["default"].string,
+  className: index.default.string,
   /**
    * Provide a custom icon to use if you need to use an icon other than the included ones
    */
-  icon: index["default"].func,
+  icon: index.default.func,
   /**
    * When passing the image prop, supply a full path to the image to be displayed.
    */
   /**@ts-ignore */
-  image: index["default"].string,
+  image: index.default.string,
   /**
    * When passing the image prop use the imageDescription prop to describe the image for screen reader.
    */
   /**@ts-ignore */
-  imageDescription: index["default"].string.isRequired.if(function (_ref2) {
+  imageDescription: index.default.string.isRequired.if(function (_ref2) {
     var image = _ref2.image;
     return !!image;
   }),
   /**
    * When passing the initials prop, either send the initials to be used or the user's display name. The first two capital letters of the display name will be used as the initials.
    */
-  initials: index["default"].string,
+  initials: index.default.string,
   /**
    * When passing the kind prop, use either "user" or "group". The values match up to the Carbon Library icons.
    */
-  kind: index["default"].oneOf(['user', 'group']),
+  kind: index.default.oneOf(['user', 'group']),
   /**
    * Set the size of the avatar circle
    */
-  size: index["default"].oneOf(['xl', 'lg', 'md']).isRequired,
+  size: index.default.oneOf(['xl', 'lg', 'md']).isRequired,
   /**
    * Set theme in which the component will be rendered
    */
-  theme: index["default"].oneOf(['light', 'dark']).isRequired,
+  theme: index.default.oneOf(['light', 'dark']).isRequired,
   /**
    * Specify how the trigger should align with the tooltip
    */
-  tooltipAlignment: index["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
+  tooltipAlignment: index.default.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
   /**
    * Pass in the display name to have it shown on hover
    */
-  tooltipText: index["default"].string
+  tooltipText: index.default.string
 };

package/lib/components/UserProfileImage/index.d.ts

@@ -1 +1,2 @@
-export { UserProfileImage } from "./UserProfileImage";
+export { UserProfileImage } from './UserProfileImage';
+export type { UserProfileImageProps } from './UserProfileImage';

package/lib/components/WebTerminal/WebTerminal.d.ts

@@ -5,18 +5,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference path="../../../src/custom-typings/index.d.ts" />
-import React, { PropsWithChildren, ReactNode } from 'react';
 import { OverflowMenuItem } from '@carbon/react';
+import React, { PropsWithChildren, ReactNode } from 'react';
 interface Action {
     renderIcon: () => void;
     onClick: () => void;
     iconDescription: string;
 }
-interface WebTerminalProps extends PropsWithChildren {
+export interface WebTerminalProps extends PropsWithChildren {
     /**
      * Provide your own terminal component as children to show up in the web terminal
      */
-    children: ReactNode | ReactNode[];
+    children: ReactNode;
     /**
      * An array of actions to be displayed in the web terminal header bar
      */
@@ -32,7 +32,7 @@ interface WebTerminalProps extends PropsWithChildren {
     /**
      * Array of objects for each documentation link. Each documentation link uses the prop types of OverflowMenuItems. See more: https://react.carbondesignsystem.com/?path=/docs/components-overflowmenu--default
      */
-    documentationLinks?: readonly OverflowMenuItem[];
+    documentationLinks?: readonly (typeof OverflowMenuItem)[];
     /**
      * Description for the documentation link overflow menu tooltip
      */

package/lib/components/WebTerminal/WebTerminal.js

@@ -7,23 +7,17 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var react = require('@carbon/react');
+var icons = require('@carbon/react/icons');
 var React = require('react');
-var index$1 = require('../../node_modules/prop-types/index.js');
+var index = require('../../_virtual/index.js');
 var cx = require('classnames');
-var settings = require('../../settings.js');
-var icons = require('@carbon/react/icons');
-var react = require('@carbon/react');
-var carbonMotion = require('@carbon/motion');
-var index = require('./hooks/index.js');
 var devtools = require('../../global/js/utils/devtools.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var carbonMotion = require('@carbon/motion');
+var settings = require('../../settings.js');
+var usePrefersReducedMotion = require('../../global/js/hooks/usePrefersReducedMotion.js');
+var index$1 = require('./hooks/index.js');
 
 var _excluded = ["actions", "children", "className", "closeIconDescription", "documentationLinks", "documentationLinksIconDescription", "isInitiallyOpen", "webTerminalAriaLabel"];
 
@@ -42,7 +36,7 @@ var defaults = {
 /**
  * The `WebTerminal` is prompted by the user and is persistent until dismissed. The purpose of a web terminal is to provide users with the ability to type commands manually instead of using the GUI.
  */
-exports.WebTerminal = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+exports.WebTerminal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$actions = _ref.actions,
     actions = _ref$actions === void 0 ? defaults.actions : _ref$actions,
     children = _ref.children,
@@ -57,7 +51,7 @@ exports.WebTerminal = /*#__PURE__*/React__default["default"].forwardRef(function
     _ref$webTerminalAriaL = _ref.webTerminalAriaLabel,
     webTerminalAriaLabel = _ref$webTerminalAriaL === void 0 ? defaults.webTerminalAriaLabel : _ref$webTerminalAriaL,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var _useWebTerminal = index.useWebTerminal(),
+  var _useWebTerminal = index$1.useWebTerminal(),
     open = _useWebTerminal.open,
     closeWebTerminal = _useWebTerminal.closeWebTerminal,
     openWebTerminal = _useWebTerminal.openWebTerminal;
@@ -65,10 +59,7 @@ exports.WebTerminal = /*#__PURE__*/React__default["default"].forwardRef(function
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     shouldRender = _useState2[0],
     setRender = _useState2[1];
-  var _ref2 = window && window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
-      matches: true
-    },
-    prefersReducedMotion = _ref2.matches;
+  var shouldReduceMotion = usePrefersReducedMotion.default();
   var webTerminalAnimationName = "".concat(open ? 'web-terminal-entrance' : 'web-terminal-exit forwards', " ").concat(carbonMotion.moderate02);
   var showDocumentationLinks = React.useMemo(function () {
     return documentationLinks.length > 0;
@@ -101,26 +92,26 @@ exports.WebTerminal = /*#__PURE__*/React__default["default"].forwardRef(function
       If the user prefers reduced motion, we have to manually set render to false
       because onAnimationEnd will never be called.
     */
-    if (prefersReducedMotion) {
+    if (shouldReduceMotion) {
       setRender(false);
     }
     closeWebTerminal === null || closeWebTerminal === void 0 || closeWebTerminal();
   };
-  return shouldRender ? /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), devtools.getDevtoolsProps(componentName)), {
+  return shouldRender ? /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), devtools.getDevtoolsProps(componentName)), {
     ref: ref,
-    className: cx__default["default"]([blockClass, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--open"), open), "".concat(blockClass, "--closed"), !open)]),
+    className: cx([blockClass, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--open"), open), "".concat(blockClass, "--closed"), !open)]),
     style: {
-      animation: !prefersReducedMotion ? webTerminalAnimationName : ''
+      animation: !shouldReduceMotion ? webTerminalAnimationName : ''
     },
     onAnimationEnd: onAnimationEnd
-  }), /*#__PURE__*/React__default["default"].createElement("header", {
+  }), /*#__PURE__*/React.createElement("header", {
     "aria-label": webTerminalAriaLabel,
     className: "".concat(blockClass, "__bar")
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__actions")
-  }, showDocumentationLinks && /*#__PURE__*/React__default["default"].createElement(react.OverflowMenu, {
+  }, showDocumentationLinks && /*#__PURE__*/React.createElement(react.OverflowMenu, {
     renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React__default["default"].createElement(icons.Help, _rollupPluginBabelHelpers["extends"]({
+      return /*#__PURE__*/React.createElement(icons.Help, _rollupPluginBabelHelpers.extends({
         size: 16
       }, props));
     },
@@ -128,16 +119,16 @@ exports.WebTerminal = /*#__PURE__*/React__default["default"].forwardRef(function
     "aria-label": documentationLinksIconDescription,
     menuOptionsClass: "".concat(blockClass, "__documentation-overflow"),
     size: "lg"
-  }, documentationLinks.map(function (_ref4, i) {
-    var rest = _rollupPluginBabelHelpers["extends"]({}, (_rollupPluginBabelHelpers.objectDestructuringEmpty(_ref4), _ref4));
-    return /*#__PURE__*/React__default["default"].createElement(react.OverflowMenuItem, _rollupPluginBabelHelpers["extends"]({
+  }, documentationLinks.map(function (_ref3, i) {
+    var rest = _rollupPluginBabelHelpers.extends({}, (_rollupPluginBabelHelpers.objectDestructuringEmpty(_ref3), _ref3));
+    return /*#__PURE__*/React.createElement(react.OverflowMenuItem, _rollupPluginBabelHelpers.extends({
       key: i
     }, rest));
-  })), actions.map(function (_ref5) {
-    var renderIcon = _ref5.renderIcon,
-      onClick = _ref5.onClick,
-      iconDescription = _ref5.iconDescription;
-    return /*#__PURE__*/React__default["default"].createElement(react.Button, {
+  })), actions.map(function (_ref4) {
+    var renderIcon = _ref4.renderIcon,
+      onClick = _ref4.onClick,
+      iconDescription = _ref4.iconDescription;
+    return /*#__PURE__*/React.createElement(react.Button, {
       key: iconDescription,
       hasIconOnly: true,
       renderIcon: renderIcon,
@@ -146,10 +137,10 @@ exports.WebTerminal = /*#__PURE__*/React__default["default"].forwardRef(function
       kind: "ghost",
       "aria-label": iconDescription
     });
-  })), /*#__PURE__*/React__default["default"].createElement(react.Button, {
+  })), /*#__PURE__*/React.createElement(react.Button, {
     hasIconOnly: true,
     renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React__default["default"].createElement(icons.Close, _rollupPluginBabelHelpers["extends"]({
+      return /*#__PURE__*/React.createElement(icons.Close, _rollupPluginBabelHelpers.extends({
         size: 16
       }, props));
     },
@@ -159,9 +150,9 @@ exports.WebTerminal = /*#__PURE__*/React__default["default"].forwardRef(function
     onAnimationEnd: function onAnimationEnd(event) {
       return event.stopPropagation();
     }
-  })), /*#__PURE__*/React__default["default"].createElement(react.Theme, {
+  })), /*#__PURE__*/React.createElement(react.Theme, {
     theme: "g100"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__body")
   }, children))) : null;
 });
@@ -181,37 +172,37 @@ exports.WebTerminal.propTypes = {
    * An array of actions to be displayed in the web terminal header bar
    */
   /**@ts-ignore */
-  actions: index$1["default"].arrayOf(index$1["default"].shape({
-    renderIcon: index$1["default"].func.isRequired,
-    onClick: index$1["default"].func.isRequired,
-    iconDescription: index$1["default"].string.isRequired
+  actions: index.default.arrayOf(index.default.shape({
+    renderIcon: index.default.func.isRequired,
+    onClick: index.default.func.isRequired,
+    iconDescription: index.default.string.isRequired
   })),
   /**
    * Provide your own terminal component as children to show up in the web terminal
    */
-  children: index$1["default"].oneOfType([index$1["default"].arrayOf(index$1["default"].node), index$1["default"].node]).isRequired,
+  children: index.default.oneOfType([index.default.arrayOf(index.default.node), index.default.node]).isRequired,
   /**
    * Custom classname for additional styling of the web terminal
    */
-  className: index$1["default"].string,
+  className: index.default.string,
   /**
    * Icon description for the close button
    */
-  closeIconDescription: index$1["default"].string.isRequired,
+  closeIconDescription: index.default.string.isRequired,
   /**
    * Array of objects for each documentation link. Each documentation link uses the prop types of OverflowMenuItems. See more: https://react.carbondesignsystem.com/?path=/docs/components-overflowmenu--default
    */
-  documentationLinks: index$1["default"].arrayOf(index$1["default"].shape(_rollupPluginBabelHelpers.objectSpread2({}, react.OverflowMenuItem.propTypes))),
+  documentationLinks: index.default.arrayOf(index.default.shape(_rollupPluginBabelHelpers.objectSpread2({}, react.OverflowMenuItem.propTypes))),
   /**
    * Description for the documentation link overflow menu tooltip
    */
-  documentationLinksIconDescription: index$1["default"].string,
+  documentationLinksIconDescription: index.default.string,
   /**
    * Optionally pass if the web terminal should be open by default
    */
-  isInitiallyOpen: index$1["default"].bool,
+  isInitiallyOpen: index.default.bool,
   /**
    * Specifies aria label for Web terminal
    */
-  webTerminalAriaLabel: index$1["default"].string
+  webTerminalAriaLabel: index.default.string
 };

package/lib/components/WebTerminal/WebTerminalContentWrapper.d.ts

@@ -5,11 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactNode } from 'react';
-interface WebTerminalContentWrapperProps {
+export interface WebTerminalContentWrapperProps {
     /**
      * Pass in content as children.
      */
-    children: ReactNode | ReactNode[];
+    children: ReactNode;
 }
 export declare let WebTerminalContentWrapper: React.ForwardRefExoticComponent<WebTerminalContentWrapperProps & React.RefAttributes<HTMLDivElement>>;
-export {};