@datarobot/design-system 30.4.0 → 30.6.0

package/cjs/expandable-content/expandable-content.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import './expandable-content.less';
+export type ExpandableContentProps = {
+    /** Content to render */
+    children: React.ReactNode;
+    /** Maximum height in pixels. When content exceeds this height it is clipped and a Show more/Show less button appears */
+    maxHeight: number;
+    /** Additional CSS class applied to the wrapper */
+    className?: string;
+};
+/** Clips content to a maximum height and shows a Show more/Show less ghost button when the content overflows.
+ * @midnight-gray-supported
+ * @alpine-light-supported
+ */
+declare const ExpandableContent: React.FC<ExpandableContentProps>;
+export { ExpandableContent };

package/cjs/expandable-content/expandable-content.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExpandableContent = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _faChevronDown = require("@fortawesome/free-solid-svg-icons/faChevronDown");
+var _faChevronUp = require("@fortawesome/free-solid-svg-icons/faChevronUp");
+var _button = require("../button");
+var _useTranslation = require("../hooks/use-translation");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/** Clips content to a maximum height and shows a Show more/Show less ghost button when the content overflows.
+ * @midnight-gray-supported
+ * @alpine-light-supported
+ */
+const ExpandableContent = ({
+  children,
+  maxHeight,
+  className
+}) => {
+  const [isExpanded, setIsExpanded] = (0, _react.useState)(false);
+  const [isOverflowing, setIsOverflowing] = (0, _react.useState)(false);
+  const contentRef = (0, _react.useRef)(null);
+  const {
+    t
+  } = (0, _useTranslation.useTranslation)();
+  (0, _react.useLayoutEffect)(() => {
+    if (contentRef.current) {
+      setIsOverflowing(contentRef.current.scrollHeight > maxHeight);
+    }
+  }, [children, maxHeight]);
+  const isClipped = isOverflowing && !isExpanded;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)('expandable-content', className),
+    "test-id": "expandable-content",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: contentRef,
+      className: "expandable-content-body"
+      // eslint-disable-next-line react/forbid-dom-props
+      ,
+      style: isClipped ? {
+        maxHeight,
+        overflow: 'hidden'
+      } : undefined,
+      "test-id": "expandable-content-body",
+      children: children
+    }), isOverflowing && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+      accentType: _button.ACCENT_TYPES.GHOST,
+      onClick: () => setIsExpanded(prev => !prev),
+      className: "expandable-content-toggle",
+      rightIcon: isExpanded ? _faChevronUp.faChevronUp : _faChevronDown.faChevronDown,
+      testId: "expandable-content-toggle",
+      children: isExpanded ? t('Show less') : t('Show more')
+    })]
+  });
+};
+exports.ExpandableContent = ExpandableContent;

package/cjs/expandable-content/index.d.ts

@@ -0,0 +1,3 @@
+import { ExpandableContent, ExpandableContentProps } from './expandable-content';
+export type { ExpandableContentProps };
+export { ExpandableContent };

package/cjs/expandable-content/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ExpandableContent", {
+  enumerable: true,
+  get: function () {
+    return _expandableContent.ExpandableContent;
+  }
+});
+var _expandableContent = require("./expandable-content");

package/cjs/form-field/constants.d.ts

@@ -8,6 +8,7 @@ export declare const VALIDATION_RULE_TYPES: {
     readonly IN_PROGRESS: "in-progress";
     readonly EXPIRED: "expired";
     readonly DISABLED: "disabled";
+    readonly THINKING: "thinking";
 };
 export type ValidationRuleTypes = ValueOf<typeof VALIDATION_RULE_TYPES>;
 export declare const MESSAGE_DISPLAY_LOCATION: {
@@ -30,6 +31,7 @@ export type VALIDATION_VALUES = {
     [VALIDATION_RULE_TYPES.IN_PROGRESS]?: string;
     [VALIDATION_RULE_TYPES.EXPIRED]?: string;
     [VALIDATION_RULE_TYPES.DISABLED]?: string;
+    [VALIDATION_RULE_TYPES.THINKING]?: string;
 };
 export declare const useDefaultValidationValues: () => VALIDATION_VALUES;
 export declare const INPUT_TYPES: {

package/cjs/form-field/constants.js

@@ -15,7 +15,8 @@ const VALIDATION_RULE_TYPES = exports.VALIDATION_RULE_TYPES = {
   SUCCESS_INFO: 'success-info',
   IN_PROGRESS: 'in-progress',
   EXPIRED: 'expired',
-  DISABLED: 'disabled'
+  DISABLED: 'disabled',
+  THINKING: 'thinking'
 };
 const MESSAGE_DISPLAY_LOCATION = exports.MESSAGE_DISPLAY_LOCATION = {
   INLINE: 'inline',

package/cjs/index.d.ts

@@ -33,6 +33,7 @@ export * from './editable-text';
 export * from './embedded-steps';
 export * from './empty-state';
 export * from './error-boundary';
+export * from './expandable-content';
 export * from './export-button';
 export * from './file-tree';
 export * from './file-upload';

package/cjs/index.js

@@ -388,6 +388,17 @@ Object.keys(_errorBoundary).forEach(function (key) {
     }
   });
 });
+var _expandableContent = require("./expandable-content");
+Object.keys(_expandableContent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _expandableContent[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _expandableContent[key];
+    }
+  });
+});
 var _exportButton = require("./export-button");
 Object.keys(_exportButton).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/cjs/markdown/markdown.d.ts

@@ -3,6 +3,12 @@ import './markdown.less';
 type Props = {
     className?: string;
     children?: React.ReactNode;
+    /** If set, content will be clipped to this height and a Show more/Show less button will appear */
+    maxHeight?: number;
 };
+/** Renders markdown content as HTML with support for GFM, math, and syntax highlighting.
+ * @midnight-gray-supported
+ * @alpine-light-supported
+ */
 declare const Markdown: React.FC<Props>;
 export { Markdown };

package/cjs/markdown/markdown.js

@@ -7,14 +7,20 @@ exports.Markdown = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _message = require("../message");
+var _expandableContent = require("../expandable-content");
 var _markdownUtils = require("./markdown-utils");
 var _useTranslation = require("../hooks/use-translation");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/** Renders markdown content as HTML with support for GFM, math, and syntax highlighting.
+ * @midnight-gray-supported
+ * @alpine-light-supported
+ */
 const Markdown = ({
   children,
-  className
+  className,
+  maxHeight
 }) => {
   const [html, setHtml] = (0, _react.useState)('');
   const [error, setError] = (0, _react.useState)('');
@@ -74,11 +80,18 @@ const Markdown = ({
   if (!html) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: (0, _classnames.default)('markdown', className),
     dangerouslySetInnerHTML: {
       __html: String(html)
     }
   });
+  if (maxHeight !== undefined) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_expandableContent.ExpandableContent, {
+      maxHeight: maxHeight,
+      children: content
+    });
+  }
+  return content;
 };
 exports.Markdown = Markdown;

package/cjs/message/message.d.ts

@@ -11,6 +11,7 @@ export declare const MESSAGE_TYPES: {
     readonly SUCCESS_INFO: "success-info";
     readonly IN_PROGRESS: "in-progress";
     readonly EXPIRED: "expired";
+    readonly THINKING: "thinking";
 };
 export declare const MESSAGE_ICON_PLACEMENT: {
     readonly LEFT: "left";
@@ -37,7 +38,7 @@ type Icons = {
     [key: string]: IconLookup;
 };
 export type MessageProps = {
-    children: ReactNode;
+    children?: ReactNode;
     className?: string;
     testId?: string;
     /** Identifies the type of the message */

package/cjs/message/message.js

@@ -14,6 +14,7 @@ var _faCircleXmark = require("@fortawesome/free-solid-svg-icons/faCircleXmark");
 var _faCircleCheck = require("@fortawesome/free-solid-svg-icons/faCircleCheck");
 var _faCircleNotch = require("@fortawesome/free-solid-svg-icons/faCircleNotch");
 var _fontAwesomeIcon = require("../font-awesome-icon");
+var _thinkingIcon = require("./thinking-icon");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const MESSAGE_TYPES = exports.MESSAGE_TYPES = {
@@ -24,7 +25,8 @@ const MESSAGE_TYPES = exports.MESSAGE_TYPES = {
   SUCCESS: 'success',
   SUCCESS_INFO: 'success-info',
   IN_PROGRESS: 'in-progress',
-  EXPIRED: 'expired'
+  EXPIRED: 'expired',
+  THINKING: 'thinking'
 };
 const MESSAGE_ICON_PLACEMENT = exports.MESSAGE_ICON_PLACEMENT = {
   LEFT: 'left',
@@ -88,6 +90,10 @@ function getMessageConfig(icons, type) {
         icon,
         className: 'expired'
       };
+    case MESSAGE_TYPES.THINKING:
+      return {
+        className: 'thinking'
+      };
     default:
       return {
         icon,
@@ -113,23 +119,33 @@ function Message({
   icons = MESSAGE_ICONS
 }) {
   const messageConfig = getMessageConfig(icons, type);
-  const icon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
-    icon: messageConfig.icon,
-    spin: type === MESSAGE_TYPES.IN_PROGRESS
-  });
+  const renderIcon = () => {
+    if (type === MESSAGE_TYPES.THINKING) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_thinkingIcon.ThinkingIcon, {
+        size: size
+      });
+    }
+    if (messageConfig.icon) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
+        icon: messageConfig.icon,
+        spin: type === MESSAGE_TYPES.IN_PROGRESS
+      });
+    }
+    return null;
+  };
+  const icon = renderIcon();
+  const resolvedChildren = type === MESSAGE_TYPES.THINKING ? children ?? 'Thinking' : children;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
     className: (0, _classnames.default)('message-component', isStatus && 'status', messageConfig.className, {
       'center-status': isCentered,
       sm: size === MESSAGE_SIZES.SM
-    },
-    // global styles for now, should be moved into the components styles, once we message css usages to React
-    className, `with-${iconPlacement}-icon`),
+    }, className, `with-${iconPlacement}-icon`),
     "test-id": testId,
     id: id,
     "aria-live": "polite",
     role: messageConfig?.role,
     children: [iconPlacement === MESSAGE_ICON_PLACEMENT.LEFT && icon, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      children: children
+      children: resolvedChildren
     }), iconPlacement === MESSAGE_ICON_PLACEMENT.RIGHT && icon]
   });
 }

package/cjs/message/thinking-icon.d.ts

@@ -0,0 +1,12 @@
+import { ValueOf } from '../types';
+import './thinking-icon.less';
+export declare const THINKING_ICON_SIZES: {
+    readonly SM: "sm";
+    readonly MD: "md";
+};
+export type ThinkingIconSize = ValueOf<typeof THINKING_ICON_SIZES>;
+type ThinkingIconProps = {
+    size?: ThinkingIconSize;
+};
+export declare function ThinkingIcon({ size, }: ThinkingIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/cjs/message/thinking-icon.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.THINKING_ICON_SIZES = void 0;
+exports.ThinkingIcon = ThinkingIcon;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const THINKING_ICON_SIZES = exports.THINKING_ICON_SIZES = {
+  SM: 'sm',
+  MD: 'md'
+};
+// Bar geometry in natural SVG coordinates (viewBox 0 0 18.667 18).
+const BARS = [{
+  top: 0,
+  left: 0,
+  width: 9.334
+}, {
+  top: 2,
+  left: 9.334,
+  width: 4.661
+}, {
+  top: 4,
+  left: 0,
+  width: 9.334
+}, {
+  top: 6,
+  left: 14,
+  width: 4.667
+}, {
+  top: 8,
+  left: 0,
+  width: 14
+}, {
+  top: 10,
+  left: 14,
+  width: 4.667
+}, {
+  top: 12,
+  left: 0,
+  width: 9.334
+}, {
+  top: 14,
+  left: 9.334,
+  width: 4.661
+}, {
+  top: 16,
+  left: 0,
+  width: 9.334
+}];
+const BAR_HEIGHT = 2;
+
+// Staggered cascade: left backbone bars enter first, right accent bars follow.
+// Entry order: r1 → r7 → r3 → r9 → r5 → r8 → r2 → r4 → r6
+const DELAYS = [0.0, 0.62, 0.22, 0.7, 0.44, 0.76, 0.12, 0.54, 0.32];
+function ThinkingIcon({
+  size = THINKING_ICON_SIZES.MD
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+    className: (0, _classnames.default)('thinking-icon', size),
+    viewBox: "0 0 18.667 18",
+    "aria-hidden": "true",
+    children: BARS.map((bar, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+      className: "bar",
+      x: bar.left,
+      y: bar.top,
+      width: bar.width,
+      height: BAR_HEIGHT
+      // eslint-disable-next-line react/forbid-dom-props
+      ,
+      style: {
+        animationDelay: `${DELAYS[i]}s`
+      }
+    }, i))
+  });
+}

package/cjs/text-editor/text-editor-content.js

@@ -170,9 +170,7 @@ function TextEditorContent({
     useSlate
   } = slateReact;
   const editor = useSlate();
-  /* eslint-disable-next-line testing-library/render-result-naming-convention */
   const ElementNode = elementRender;
-  /* eslint-disable-next-line testing-library/render-result-naming-convention */
   const LeafNode = leafRender;
 
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment

package/esm/expandable-content/expandable-content.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import './expandable-content.less';
+export type ExpandableContentProps = {
+    /** Content to render */
+    children: React.ReactNode;
+    /** Maximum height in pixels. When content exceeds this height it is clipped and a Show more/Show less button appears */
+    maxHeight: number;
+    /** Additional CSS class applied to the wrapper */
+    className?: string;
+};
+/** Clips content to a maximum height and shows a Show more/Show less ghost button when the content overflows.
+ * @midnight-gray-supported
+ * @alpine-light-supported
+ */
+declare const ExpandableContent: React.FC<ExpandableContentProps>;
+export { ExpandableContent };

package/esm/expandable-content/expandable-content.js

@@ -0,0 +1,53 @@
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
+import { faChevronUp } from '@fortawesome/free-solid-svg-icons/faChevronUp';
+import { Button, ACCENT_TYPES } from '../button';
+import { useTranslation } from '../hooks/use-translation';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Clips content to a maximum height and shows a Show more/Show less ghost button when the content overflows.
+ * @midnight-gray-supported
+ * @alpine-light-supported
+ */
+const ExpandableContent = ({
+  children,
+  maxHeight,
+  className
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const contentRef = useRef(null);
+  const {
+    t
+  } = useTranslation();
+  useLayoutEffect(() => {
+    if (contentRef.current) {
+      setIsOverflowing(contentRef.current.scrollHeight > maxHeight);
+    }
+  }, [children, maxHeight]);
+  const isClipped = isOverflowing && !isExpanded;
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames('expandable-content', className),
+    "test-id": "expandable-content",
+    children: [/*#__PURE__*/_jsx("div", {
+      ref: contentRef,
+      className: "expandable-content-body"
+      // eslint-disable-next-line react/forbid-dom-props
+      ,
+      style: isClipped ? {
+        maxHeight,
+        overflow: 'hidden'
+      } : undefined,
+      "test-id": "expandable-content-body",
+      children: children
+    }), isOverflowing && /*#__PURE__*/_jsx(Button, {
+      accentType: ACCENT_TYPES.GHOST,
+      onClick: () => setIsExpanded(prev => !prev),
+      className: "expandable-content-toggle",
+      rightIcon: isExpanded ? faChevronUp : faChevronDown,
+      testId: "expandable-content-toggle",
+      children: isExpanded ? t('Show less') : t('Show more')
+    })]
+  });
+};
+export { ExpandableContent };

package/esm/expandable-content/index.d.ts

@@ -0,0 +1,3 @@
+import { ExpandableContent, ExpandableContentProps } from './expandable-content';
+export type { ExpandableContentProps };
+export { ExpandableContent };

package/esm/expandable-content/index.js

@@ -0,0 +1,2 @@
+import { ExpandableContent } from './expandable-content';
+export { ExpandableContent };

package/esm/form-field/constants.d.ts

@@ -8,6 +8,7 @@ export declare const VALIDATION_RULE_TYPES: {
     readonly IN_PROGRESS: "in-progress";
     readonly EXPIRED: "expired";
     readonly DISABLED: "disabled";
+    readonly THINKING: "thinking";
 };
 export type ValidationRuleTypes = ValueOf<typeof VALIDATION_RULE_TYPES>;
 export declare const MESSAGE_DISPLAY_LOCATION: {
@@ -30,6 +31,7 @@ export type VALIDATION_VALUES = {
     [VALIDATION_RULE_TYPES.IN_PROGRESS]?: string;
     [VALIDATION_RULE_TYPES.EXPIRED]?: string;
     [VALIDATION_RULE_TYPES.DISABLED]?: string;
+    [VALIDATION_RULE_TYPES.THINKING]?: string;
 };
 export declare const useDefaultValidationValues: () => VALIDATION_VALUES;
 export declare const INPUT_TYPES: {

package/esm/form-field/constants.js

@@ -9,7 +9,8 @@ export const VALIDATION_RULE_TYPES = {
   SUCCESS_INFO: 'success-info',
   IN_PROGRESS: 'in-progress',
   EXPIRED: 'expired',
-  DISABLED: 'disabled'
+  DISABLED: 'disabled',
+  THINKING: 'thinking'
 };
 export const MESSAGE_DISPLAY_LOCATION = {
   INLINE: 'inline',

package/esm/index.d.ts

@@ -33,6 +33,7 @@ export * from './editable-text';
 export * from './embedded-steps';
 export * from './empty-state';
 export * from './error-boundary';
+export * from './expandable-content';
 export * from './export-button';
 export * from './file-tree';
 export * from './file-upload';

package/esm/index.js

@@ -33,6 +33,7 @@ export * from './editable-text';
 export * from './embedded-steps';
 export * from './empty-state';
 export * from './error-boundary';
+export * from './expandable-content';
 export * from './export-button';
 export * from './file-tree';
 export * from './file-upload';

package/esm/markdown/markdown.d.ts

@@ -3,6 +3,12 @@ import './markdown.less';
 type Props = {
     className?: string;
     children?: React.ReactNode;
+    /** If set, content will be clipped to this height and a Show more/Show less button will appear */
+    maxHeight?: number;
 };
+/** Renders markdown content as HTML with support for GFM, math, and syntax highlighting.
+ * @midnight-gray-supported
+ * @alpine-light-supported
+ */
 declare const Markdown: React.FC<Props>;
 export { Markdown };

package/esm/markdown/markdown.js

@@ -1,12 +1,18 @@
 import React, { useEffect, useState } from 'react';
 import classNames from 'classnames';
 import { Message, MESSAGE_TYPES } from '../message';
+import { ExpandableContent } from '../expandable-content';
 import { datarobotCSSClasses } from './markdown-utils';
 import { useTranslation } from '../hooks/use-translation';
 import { jsx as _jsx } from "react/jsx-runtime";
+/** Renders markdown content as HTML with support for GFM, math, and syntax highlighting.
+ * @midnight-gray-supported
+ * @alpine-light-supported
+ */
 const Markdown = ({
   children,
-  className
+  className,
+  maxHeight
 }) => {
   const [html, setHtml] = useState('');
   const [error, setError] = useState('');
@@ -66,11 +72,18 @@ const Markdown = ({
   if (!html) {
     return null;
   }
-  return /*#__PURE__*/_jsx("div", {
+  const content = /*#__PURE__*/_jsx("div", {
     className: classNames('markdown', className),
     dangerouslySetInnerHTML: {
       __html: String(html)
     }
   });
+  if (maxHeight !== undefined) {
+    return /*#__PURE__*/_jsx(ExpandableContent, {
+      maxHeight: maxHeight,
+      children: content
+    });
+  }
+  return content;
 };
 export { Markdown };

package/esm/message/message.d.ts

@@ -11,6 +11,7 @@ export declare const MESSAGE_TYPES: {
     readonly SUCCESS_INFO: "success-info";
     readonly IN_PROGRESS: "in-progress";
     readonly EXPIRED: "expired";
+    readonly THINKING: "thinking";
 };
 export declare const MESSAGE_ICON_PLACEMENT: {
     readonly LEFT: "left";
@@ -37,7 +38,7 @@ type Icons = {
     [key: string]: IconLookup;
 };
 export type MessageProps = {
-    children: ReactNode;
+    children?: ReactNode;
     className?: string;
     testId?: string;
     /** Identifies the type of the message */