@patternfly/chatbot 6.3.0-prerelease.9 → 6.4.0-prerelease.2

package/dist/cjs/Message/MessageInput.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent, Ref } from 'react';
 import { FormProps } from '@patternfly/react-core';
 export interface MessageInputProps extends FormProps {
     /** Placeholder for edit input */
@@ -11,8 +11,10 @@ export interface MessageInputProps extends FormProps {
     onEditUpdate?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, value: string) => void;
     /** Callback functionf or when edit cancel update button is clicked */
     onEditCancel?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /** Ref applied to editable message input */
+    inputRef?: Ref<HTMLTextAreaElement>;
     /** Message text */
     content?: string;
 }
-declare const MessageInput: React.FunctionComponent<MessageInputProps>;
+declare const MessageInput: FunctionComponent<MessageInputProps>;
 export default MessageInput;

package/dist/cjs/Message/MessageInput.js

@@ -1,7 +1,4 @@
 "use strict";
-// ============================================================================
-// Chatbot Main - Message Input
-// ============================================================================
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -13,22 +10,16 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const react_core_1 = require("@patternfly/react-core");
 const MessageInput = (_a) => {
-    var { editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, content } = _a, props = __rest(_a, ["editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "content"]);
-    const [messageText, setMessageText] = react_1.default.useState(content !== null && content !== void 0 ? content : '');
-    const onChange = (event, value) => {
+    var { editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, inputRef, content } = _a, props = __rest(_a, ["editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "inputRef", "content"]);
+    const [messageText, setMessageText] = (0, react_1.useState)(content !== null && content !== void 0 ? content : '');
+    const onChange = (_event, value) => {
         setMessageText(value);
     };
-    return (react_1.default.createElement(react_core_1.Form, Object.assign({}, props),
-        react_1.default.createElement(react_core_1.TextArea, { placeholder: editPlaceholder, value: messageText, onChange: onChange, "aria-label": editPlaceholder, autoResize: true }),
-        react_1.default.createElement(react_core_1.ActionGroup, { className: "pf-chatbot__message-edit-buttons" },
-            react_1.default.createElement(react_core_1.Button, { variant: "primary", onClick: (event) => onEditUpdate && onEditUpdate(event, messageText) }, updateWord),
-            react_1.default.createElement(react_core_1.Button, { variant: "secondary", onClick: onEditCancel }, cancelWord))));
+    return ((0, jsx_runtime_1.jsxs)(react_core_1.Form, Object.assign({}, props, { children: [(0, jsx_runtime_1.jsx)(react_core_1.TextArea, { placeholder: editPlaceholder, value: messageText, onChange: onChange, "aria-label": editPlaceholder, autoResize: true, ref: inputRef }), (0, jsx_runtime_1.jsxs)(react_core_1.ActionGroup, { className: "pf-chatbot__message-edit-buttons", children: [(0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: "primary", onClick: (event) => onEditUpdate && onEditUpdate(event, messageText), children: updateWord }), (0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: "secondary", onClick: onEditCancel, children: cancelWord })] })] })));
 };
 exports.default = MessageInput;

package/dist/cjs/Message/MessageLoading.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
 declare const MessageLoading: ({ loadingWord }: {
     loadingWord: any;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default MessageLoading;

package/dist/cjs/Message/MessageLoading.js

@@ -1,13 +1,8 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
 // ============================================================================
 // Chatbot Main - Message - Processing
 // ============================================================================
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const MessageLoading = ({ loadingWord }) => (react_1.default.createElement("div", { className: "pf-chatbot__message-loading" },
-    react_1.default.createElement("span", { className: "pf-chatbot__message-loading-dots" },
-        react_1.default.createElement("span", { className: "pf-v6-screen-reader" }, loadingWord))));
+const MessageLoading = ({ loadingWord }) => ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-loading", children: (0, jsx_runtime_1.jsx)("span", { className: "pf-chatbot__message-loading-dots", children: (0, jsx_runtime_1.jsx)("span", { className: "pf-v6-screen-reader", children: loadingWord }) }) }));
 exports.default = MessageLoading;

package/dist/cjs/Message/Plugins/index.d.ts

@@ -0,0 +1 @@
+export { rehypeCodeBlockToggle } from './rehypeCodeBlockToggle';

package/dist/cjs/Message/Plugins/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rehypeCodeBlockToggle = void 0;
+var rehypeCodeBlockToggle_1 = require("./rehypeCodeBlockToggle");
+Object.defineProperty(exports, "rehypeCodeBlockToggle", { enumerable: true, get: function () { return rehypeCodeBlockToggle_1.rehypeCodeBlockToggle; } });

package/dist/cjs/Message/Plugins/rehypeCodeBlockToggle.d.ts

@@ -0,0 +1,2 @@
+import { Node } from 'unist';
+export declare const rehypeCodeBlockToggle: () => (tree: Node) => void;

package/dist/cjs/Message/Plugins/rehypeCodeBlockToggle.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rehypeCodeBlockToggle = void 0;
+const unist_util_visit_1 = require("unist-util-visit");
+// Rehype plugin to add language information to code block props
+// Per Eric, Ideally any toggle buttons that can be navigated to would have unique accessible names
+// For the purposes of our examples this should suffice, but in a real-world use case they may need to be more unique
+const rehypeCodeBlockToggle = () => (tree) => {
+    (0, unist_util_visit_1.visit)(tree, 'element', (node) => {
+        var _a;
+        if (node.tagName === 'code' && ((_a = node.properties) === null || _a === void 0 ? void 0 : _a.className)) {
+            const className = node.properties.className;
+            const languageMatch = className.find((cls) => cls.startsWith('language-'));
+            if (languageMatch) {
+                const language = languageMatch.replace('language-', '').toUpperCase();
+                // Add the language and toggle text as data attributes
+                node.properties['data-language'] = language;
+                node.properties['data-expanded-text'] = `Show less ${language} code`;
+                node.properties['data-collapsed-text'] = `Show more ${language} code`;
+            }
+        }
+    });
+};
+exports.rehypeCodeBlockToggle = rehypeCodeBlockToggle;

package/dist/cjs/Message/Plugins/rehypeMoveImagesOutOfParagraphs.d.ts

@@ -0,0 +1,2 @@
+import { Node } from 'unist';
+export declare const rehypeMoveImagesOutOfParagraphs: () => (tree: Node) => void;

package/dist/cjs/Message/Plugins/rehypeMoveImagesOutOfParagraphs.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rehypeMoveImagesOutOfParagraphs = void 0;
+const unist_util_visit_1 = require("unist-util-visit");
+// Rehype plugin to remove images from within p tags and put them as separate block-level elements.
+// This allows us to avoid having a blue background on images - this is something Kayla requested.
+const rehypeMoveImagesOutOfParagraphs = () => (tree) => {
+    const nodesToRemove = [];
+    (0, unist_util_visit_1.visit)(tree, 'element', (node, index, parent) => {
+        if (node.tagName === 'p' && node.children) {
+            const imagesInParagraph = [];
+            node.children.forEach((child, childIndex) => {
+                if (child.type === 'element' && child.tagName === 'img') {
+                    imagesInParagraph.push({ node: child, index: childIndex });
+                }
+            });
+            if (imagesInParagraph.length > 0 && parent && index !== null) {
+                imagesInParagraph.forEach(({ node: imgNode, index: imgIndex }) => {
+                    nodesToRemove.push({ parent: node, index: imgIndex, node: imgNode });
+                });
+                // To avoid issues with index shifting during removal, we process in reverse
+                for (let i = nodesToRemove.length - 1; i >= 0; i--) {
+                    const { parent: pTag, index: imgIndexToRemove } = nodesToRemove[i];
+                    if (pTag.children) {
+                        pTag.children.splice(imgIndexToRemove, 1);
+                    }
+                }
+                // Insert the removed images after the paragraph
+                const paragraphIndexInParent = parent.children.indexOf(node);
+                if (paragraphIndexInParent !== -1) {
+                    imagesInParagraph.forEach(({ node: imgNode }) => {
+                        parent.children.splice(paragraphIndexInParent + 1, 0, imgNode);
+                    });
+                }
+                // Remove paragraph if it's now empty after image removal
+                if (node.children.length === 0) {
+                    const paragraphIndexInParent = parent.children.indexOf(node);
+                    if (paragraphIndexInParent !== -1) {
+                        parent.children.splice(paragraphIndexInParent, 1);
+                    }
+                }
+                nodesToRemove.length = 0;
+            }
+        }
+    });
+};
+exports.rehypeMoveImagesOutOfParagraphs = rehypeMoveImagesOutOfParagraphs;

package/dist/cjs/Message/QuickResponse/QuickResponse.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 import { LabelGroupProps, LabelProps } from '@patternfly/react-core';
 export interface QuickResponse extends Omit<LabelProps, 'children'> {
     content: string;
@@ -15,5 +15,5 @@ export interface QuickResponseProps {
     /** Sets the quick responses to compact styling */
     isCompact?: boolean;
 }
-export declare const QuickResponse: React.FunctionComponent<QuickResponseProps>;
+export declare const QuickResponse: FunctionComponent<QuickResponseProps>;
 export default QuickResponse;

package/dist/cjs/Message/QuickResponse/QuickResponse.js

@@ -10,25 +10,23 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.QuickResponse = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const react_core_1 = require("@patternfly/react-core");
 const react_icons_1 = require("@patternfly/react-icons");
 const QuickResponse = ({ quickResponses, quickResponseContainerProps = { numLabels: 5 }, onSelect, isCompact }) => {
-    const [selectedQuickResponse, setSelectedQuickResponse] = react_1.default.useState();
+    const [selectedQuickResponse, setSelectedQuickResponse] = (0, react_1.useState)();
     const handleQuickResponseClick = (id, onClick) => {
         setSelectedQuickResponse(id);
         onClick && onClick();
         onSelect && onSelect(id);
     };
-    return (react_1.default.createElement(react_core_1.LabelGroup, Object.assign({ className: `pf-chatbot__message-quick-response ${(quickResponseContainerProps === null || quickResponseContainerProps === void 0 ? void 0 : quickResponseContainerProps.className) ? quickResponseContainerProps === null || quickResponseContainerProps === void 0 ? void 0 : quickResponseContainerProps.className : ''}` }, quickResponseContainerProps), quickResponses.map((_a) => {
-        var { id, onClick, content, className } = _a, props = __rest(_a, ["id", "onClick", "content", "className"]);
-        return (react_1.default.createElement(react_core_1.Label, Object.assign({ variant: id === selectedQuickResponse ? undefined : 'outline', icon: id === selectedQuickResponse ? react_1.default.createElement(react_icons_1.CheckIcon, null) : undefined, color: "blue", key: id, onClick: () => handleQuickResponseClick(id, onClick), className: `${id === selectedQuickResponse ? 'pf-chatbot__message-quick-response--selected' : ''} ${className ? className : ''}`, isCompact: isCompact }, props), content));
-    })));
+    return ((0, jsx_runtime_1.jsx)(react_core_1.LabelGroup, Object.assign({ className: `pf-chatbot__message-quick-response ${(quickResponseContainerProps === null || quickResponseContainerProps === void 0 ? void 0 : quickResponseContainerProps.className) ? quickResponseContainerProps === null || quickResponseContainerProps === void 0 ? void 0 : quickResponseContainerProps.className : ''}` }, quickResponseContainerProps, { children: quickResponses.map((_a) => {
+            var { id, onClick, content, className } = _a, props = __rest(_a, ["id", "onClick", "content", "className"]);
+            return ((0, jsx_runtime_1.jsx)(react_core_1.Label, Object.assign({ variant: id === selectedQuickResponse ? undefined : 'outline', icon: id === selectedQuickResponse ? (0, jsx_runtime_1.jsx)(react_icons_1.CheckIcon, {}) : undefined, color: "blue", onClick: () => handleQuickResponseClick(id, onClick), className: `${id === selectedQuickResponse ? 'pf-chatbot__message-quick-response--selected' : ''} ${className ? className : ''}`, isCompact: isCompact }, props, { children: content }), id));
+        }) })));
 };
 exports.QuickResponse = QuickResponse;
 exports.default = exports.QuickResponse;

package/dist/cjs/Message/QuickStarts/FallbackImg.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type { FC } from 'react';
 interface FallbackImgProps {
     /** Image source */
     src: string;
@@ -9,5 +9,5 @@ interface FallbackImgProps {
     /** Fallback */
     fallback?: React.ReactNode;
 }
-declare const FallbackImg: React.FC<FallbackImgProps>;
+declare const FallbackImg: FC<FallbackImgProps>;
 export default FallbackImg;

package/dist/cjs/Message/QuickStarts/FallbackImg.js

@@ -1,34 +1,12 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const FallbackImg = ({ src, alt, className, fallback }) => {
-    const [isSrcValid, setIsSrcValid] = React.useState(true);
+    const [isSrcValid, setIsSrcValid] = (0, react_1.useState)(true);
     if (src && isSrcValid) {
-        return React.createElement("img", { className: className, src: src, alt: alt, onError: () => setIsSrcValid(false) });
+        return (0, jsx_runtime_1.jsx)("img", { className: className, src: src, alt: alt, onError: () => setIsSrcValid(false) });
     }
-    return React.createElement(React.Fragment, null, fallback);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: fallback });
 };
 exports.default = FallbackImg;

package/dist/cjs/Message/QuickStarts/QuickStartTile.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type { FC } from 'react';
 import { QuickStart, QuickstartAction } from './types';
 export declare const camelize: (str: string) => string;
 export interface QuickStartTileProps {
@@ -25,5 +25,5 @@ export interface QuickStartTileProps {
     /** Sets the tile to compact styling */
     isCompact?: boolean;
 }
-declare const QuickStartTile: React.FC<QuickStartTileProps>;
+declare const QuickStartTile: FC<QuickStartTileProps>;
 export default QuickStartTile;

package/dist/cjs/Message/QuickStarts/QuickStartTile.js

@@ -1,33 +1,10 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.camelize = void 0;
-const React = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const rocket_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/rocket-icon"));
 const outlined_bookmark_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/outlined-bookmark-icon"));
 const react_core_1 = require("@patternfly/react-core");
@@ -46,11 +23,10 @@ const QuickStartTile = ({ className, quickStart, onClick, onSelectQuickStart, mi
     const { metadata: { name: id }, spec: { icon, displayName, description, durationMinutes, prerequisites, link, type } } = quickStart;
     let quickStartIcon;
     if (typeof icon === 'object') {
-        quickStartIcon = React.createElement(react_core_1.Icon, { size: "2xl" }, icon);
+        quickStartIcon = (0, jsx_runtime_1.jsx)(react_core_1.Icon, { size: "2xl", children: icon });
     }
     else {
-        quickStartIcon = (React.createElement(react_core_1.Icon, { size: "2xl" },
-            React.createElement(FallbackImg_1.default, { src: icon, alt: "", className: "pfext-catalog-item-icon__img", fallback: React.createElement(rocket_icon_1.default, null) })));
+        quickStartIcon = ((0, jsx_runtime_1.jsx)(react_core_1.Icon, { size: "2xl", children: (0, jsx_runtime_1.jsx)(FallbackImg_1.default, { src: icon, alt: "", className: "pfext-catalog-item-icon__img", fallback: (0, jsx_runtime_1.jsx)(rocket_icon_1.default, {}) }) }));
     }
     const onSelect = () => {
         if (!link) {
@@ -62,21 +38,9 @@ const QuickStartTile = ({ className, quickStart, onClick, onSelectQuickStart, mi
         onClick && onClick();
     };
     const ActionIcon = (action === null || action === void 0 ? void 0 : action.icon) || outlined_bookmark_icon_1.default;
-    const additionalAction = action ? (React.createElement(react_core_1.Button, Object.assign({ "aria-label": action['aria-label'], icon: React.createElement(ActionIcon, null), variant: "plain", onClick: action.onClick }, action.buttonProps))) : undefined;
-    return (React.createElement(react_core_1.Card, { className: `pf-chatbot__quickstarts-tile ${className ? className : ''}`, id: `${id}-chatbot-qs-tile`, style: { height: '100%' }, "data-testid": `chatbot-qs-card-${(0, exports.camelize)(displayName)}`, isCompact: isCompact },
-        React.createElement(react_core_1.CardHeader, Object.assign({}, (action && {
-            actions: { actions: additionalAction }
-        })), quickStartIcon),
-        React.createElement(react_core_1.CardTitle, null,
-            React.createElement(QuickStartTileHeader_1.default, { name: displayName, onSelect: onSelect, quickStartId: id })),
-        React.createElement(react_core_1.CardBody, null,
-            React.createElement(react_core_1.Stack, { hasGutter: true },
-                React.createElement(react_core_1.Flex, { spaceItems: { default: 'spaceItemsSm' } },
-                    type && React.createElement(react_core_1.Label, { color: type.color }, type.text),
-                    durationMinutes && (React.createElement(react_core_1.Label, { variant: "outline", "data-test": "duration", icon: React.createElement(outlined_clock_icon_1.default, null) }, (0, react_core_1.pluralize)(durationMinutes, minuteWord, minuteWordPlural)))),
-                React.createElement(QuickStartTileDescription_1.default, { description: description, prerequisites: prerequisites, prerequisiteWord: prerequisiteWord, prerequisiteWordPlural: prerequisiteWordPlural, quickStartButtonAriaLabel: quickStartButtonAriaLabel }))),
-        React.createElement(react_core_1.CardFooter, null,
-            React.createElement(react_core_1.Button, { variant: "link", isInline: true, onClick: onSelect },
-                React.createElement("span", { className: "pf-v6-c-button__text" }, "Start")))));
+    const additionalAction = action ? ((0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ "aria-label": action['aria-label'], icon: (0, jsx_runtime_1.jsx)(ActionIcon, {}), variant: "plain", onClick: action.onClick }, action.buttonProps))) : undefined;
+    return ((0, jsx_runtime_1.jsxs)(react_core_1.Card, { className: `pf-chatbot__quickstarts-tile ${className ? className : ''}`, id: `${id}-chatbot-qs-tile`, style: { height: '100%' }, "data-testid": `chatbot-qs-card-${(0, exports.camelize)(displayName)}`, isCompact: isCompact, children: [(0, jsx_runtime_1.jsx)(react_core_1.CardHeader, Object.assign({}, (action && {
+                actions: { actions: additionalAction }
+            }), { children: quickStartIcon })), (0, jsx_runtime_1.jsx)(react_core_1.CardTitle, { children: (0, jsx_runtime_1.jsx)(QuickStartTileHeader_1.default, { name: displayName, onSelect: onSelect, quickStartId: id }) }), (0, jsx_runtime_1.jsx)(react_core_1.CardBody, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Stack, { hasGutter: true, children: [(0, jsx_runtime_1.jsxs)(react_core_1.Flex, { spaceItems: { default: 'spaceItemsSm' }, children: [type && (0, jsx_runtime_1.jsx)(react_core_1.Label, { color: type.color, children: type.text }), durationMinutes && ((0, jsx_runtime_1.jsx)(react_core_1.Label, { variant: "outline", "data-test": "duration", icon: (0, jsx_runtime_1.jsx)(outlined_clock_icon_1.default, {}), children: (0, react_core_1.pluralize)(durationMinutes, minuteWord, minuteWordPlural) }))] }), (0, jsx_runtime_1.jsx)(QuickStartTileDescription_1.default, { description: description, prerequisites: prerequisites, prerequisiteWord: prerequisiteWord, prerequisiteWordPlural: prerequisiteWordPlural, quickStartButtonAriaLabel: quickStartButtonAriaLabel })] }) }), (0, jsx_runtime_1.jsx)(react_core_1.CardFooter, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: "link", isInline: true, onClick: onSelect, children: (0, jsx_runtime_1.jsx)("span", { className: "pf-v6-c-button__text", children: "Start" }) }) })] }));
 };
 exports.default = QuickStartTile;

package/dist/cjs/Message/QuickStarts/QuickStartTileDescription.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type { FC } from 'react';
 interface QuickStartTileDescriptionProps {
     /** QuickStart description */
     description: string;
@@ -19,5 +19,5 @@ interface QuickStartTileDescriptionProps {
  *                 Defaults to adding an 's'.
  */
 export declare function pluralizeWord(i: number, singular: string, plural?: string): string;
-declare const QuickStartTileDescription: React.FC<QuickStartTileDescriptionProps>;
+declare const QuickStartTileDescription: FC<QuickStartTileDescriptionProps>;
 export default QuickStartTileDescription;

package/dist/cjs/Message/QuickStarts/QuickStartTileDescription.js

@@ -1,33 +1,11 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.pluralizeWord = pluralizeWord;
-const React = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const react_core_1 = require("@patternfly/react-core");
 const info_circle_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/info-circle-icon"));
 /** This function is a helper for pluralizing strings stolen from React.
@@ -45,20 +23,13 @@ function pluralizeWord(i, singular, plural) {
 }
 const QuickStartTileDescription = ({ description, prerequisites, prerequisiteWord = 'Prerequisite', prerequisiteWordPlural = 'Prerequisites', quickStartButtonAriaLabel = 'Show prerequisites' }) => {
     const prereqs = prerequisites === null || prerequisites === void 0 ? void 0 : prerequisites.filter((p) => p);
-    const buttonRef = React.useRef(null);
+    const buttonRef = (0, react_1.useRef)(null);
     const pluralizedPrereq = pluralizeWord((prereqs === null || prereqs === void 0 ? void 0 : prereqs.length) || 0, prerequisiteWord, prerequisiteWordPlural);
-    return (React.createElement(React.Fragment, null,
-        description,
-        prereqs && prereqs.length > 0 && (React.createElement(react_core_1.Flex, { spaceItems: { default: 'spaceItemsSm' } },
-            React.createElement("h5", null, (0, react_core_1.pluralize)(prereqs.length, prerequisiteWord, prerequisiteWordPlural)),
-            React.createElement(react_core_1.Button, { variant: "link", isInline: true, "data-testid": "qs-card-prereqs", ref: buttonRef, onClick: (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                }, "aria-label": quickStartButtonAriaLabel },
-                React.createElement(info_circle_icon_1.default, null)),
-            React.createElement(react_core_1.Popover, { "aria-label": pluralizedPrereq, headerContent: pluralizedPrereq, triggerRef: buttonRef, bodyContent: React.createElement("div", null,
-                    React.createElement("ul", { "aria-label": pluralizedPrereq }, prereqs.map((prerequisite, index) => (
-                    // eslint-disable-next-line react/no-array-index-key
-                    React.createElement("li", { key: index }, prerequisite))))) })))));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [description, prereqs && prereqs.length > 0 && ((0, jsx_runtime_1.jsxs)(react_core_1.Flex, { spaceItems: { default: 'spaceItemsSm' }, children: [(0, jsx_runtime_1.jsx)("h5", { children: (0, react_core_1.pluralize)(prereqs.length, prerequisiteWord, prerequisiteWordPlural) }), (0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: "link", isInline: true, "data-testid": "qs-card-prereqs", ref: buttonRef, onClick: (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                        }, "aria-label": quickStartButtonAriaLabel, children: (0, jsx_runtime_1.jsx)(info_circle_icon_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_core_1.Popover, { "aria-label": pluralizedPrereq, headerContent: pluralizedPrereq, triggerRef: buttonRef, bodyContent: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("ul", { "aria-label": pluralizedPrereq, children: prereqs.map((prerequisite, index) => (
+                                // eslint-disable-next-line react/no-array-index-key
+                                (0, jsx_runtime_1.jsx)("li", { children: prerequisite }, index))) }) }) })] }))] }));
 };
 exports.default = QuickStartTileDescription;

package/dist/cjs/Message/QuickStarts/QuickStartTileDescription.test.js

@@ -35,8 +35,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@testing-library/react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
 require("@testing-library/jest-dom");
 const user_event_1 = __importDefault(require("@testing-library/user-event"));
 const monitor_sampleapp_quickstart_1 = require("./monitor-sampleapp-quickstart");
@@ -48,29 +48,29 @@ describe('pluralizeWord function', () => {
 });
 describe('QuickStart tile description', () => {
     it('should render no prereqs correctly', () => {
-        (0, react_2.render)(react_1.default.createElement(QuickStartTileDescription_1.default, { description: monitor_sampleapp_quickstart_1.monitorSampleAppQuickStart.spec.description }));
-        expect(react_2.screen.queryByRole('heading')).toBeFalsy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(QuickStartTileDescription_1.default, { description: monitor_sampleapp_quickstart_1.monitorSampleAppQuickStart.spec.description }));
+        expect(react_1.screen.queryByRole('heading')).toBeFalsy();
     });
     it('should render singular prereq correctly', () => {
-        (0, react_2.render)(react_1.default.createElement(QuickStartTileDescription_1.default, { description: monitor_sampleapp_quickstart_1.monitorSampleAppQuickStart.spec.description, prerequisites: [`You completed the "Getting started with a sample" quick start.`] }));
-        expect(react_2.screen.getByRole('heading', { name: /1 Prerequisite/i })).toBeTruthy();
-        expect(react_2.screen.getByRole('button', { name: /Show prerequisite/i })).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(QuickStartTileDescription_1.default, { description: monitor_sampleapp_quickstart_1.monitorSampleAppQuickStart.spec.description, prerequisites: [`You completed the "Getting started with a sample" quick start.`] }));
+        expect(react_1.screen.getByRole('heading', { name: /1 Prerequisite/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('button', { name: /Show prerequisite/i })).toBeTruthy();
     });
     it('should render plural prereq correctly', () => {
-        (0, react_2.render)(react_1.default.createElement(QuickStartTileDescription_1.default, { description: monitor_sampleapp_quickstart_1.monitorSampleAppQuickStart.spec.description, prerequisites: [
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(QuickStartTileDescription_1.default, { description: monitor_sampleapp_quickstart_1.monitorSampleAppQuickStart.spec.description, prerequisites: [
                 `You completed the "Getting started with a sample" quick start.`,
                 `You completed the app quick start`
             ] }));
-        expect(react_2.screen.getByRole('heading', { name: /2 Prerequisites/i })).toBeTruthy();
-        expect(react_2.screen.getByRole('button', { name: /Show prerequisites/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('heading', { name: /2 Prerequisites/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('button', { name: /Show prerequisites/i })).toBeTruthy();
     });
     it('should be able to click prereqs link', () => __awaiter(void 0, void 0, void 0, function* () {
-        (0, react_2.render)(react_1.default.createElement(QuickStartTileDescription_1.default, { description: monitor_sampleapp_quickstart_1.monitorSampleAppQuickStart.spec.description, prerequisites: [`You completed the "Getting started with a sample" quick start.`] }));
-        const button = react_2.screen.getByRole('button', { name: /Show prerequisites/i });
-        expect(react_2.screen.queryByRole('dialog', { name: /Prerequisite/i })).toBeFalsy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(QuickStartTileDescription_1.default, { description: monitor_sampleapp_quickstart_1.monitorSampleAppQuickStart.spec.description, prerequisites: [`You completed the "Getting started with a sample" quick start.`] }));
+        const button = react_1.screen.getByRole('button', { name: /Show prerequisites/i });
+        expect(react_1.screen.queryByRole('dialog', { name: /Prerequisite/i })).toBeFalsy();
         yield user_event_1.default.click(button);
-        expect(react_2.screen.getByRole('dialog', { name: /Prerequisite/i })).toBeTruthy();
-        expect(react_2.screen.getByRole('button', { name: /Close/i })).toBeTruthy();
-        expect(react_2.screen.getByText(/You completed the "Getting started with a sample" quick start./i)).toBeTruthy();
+        expect(react_1.screen.getByRole('dialog', { name: /Prerequisite/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('button', { name: /Close/i })).toBeTruthy();
+        expect(react_1.screen.getByText(/You completed the "Getting started with a sample" quick start./i)).toBeTruthy();
     }));
 });

package/dist/cjs/Message/QuickStarts/QuickStartTileHeader.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type { FunctionComponent } from 'react';
 interface QuickStartTileHeaderProps {
     /** Name for the header */
     name: string;
@@ -7,5 +7,5 @@ interface QuickStartTileHeaderProps {
     /** Callback for when the name of the QuickStart is clicked */
     onSelect: (e: React.FormEvent<HTMLInputElement> | React.MouseEvent<Element, MouseEvent>) => void;
 }
-declare const QuickStartTileHeader: React.FC<QuickStartTileHeaderProps>;
+declare const QuickStartTileHeader: FunctionComponent<QuickStartTileHeaderProps>;
 export default QuickStartTileHeader;

package/dist/cjs/Message/QuickStarts/QuickStartTileHeader.js

@@ -1,30 +1,6 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_core_1 = require("@patternfly/react-core");
-const QuickStartTileHeader = ({ name, quickStartId, onSelect }) => (React.createElement(react_core_1.Flex, { flexWrap: { default: 'nowrap' } },
-    React.createElement(react_core_1.Button, { "data-test": "title", id: quickStartId, variant: "link", isInline: true, onClick: onSelect }, name)));
+const QuickStartTileHeader = ({ name, quickStartId, onSelect }) => ((0, jsx_runtime_1.jsx)(react_core_1.Flex, { flexWrap: { default: 'nowrap' }, children: (0, jsx_runtime_1.jsx)(react_core_1.Button, { "data-test": "title", id: quickStartId, variant: "link", isInline: true, onClick: onSelect, children: name }) }));
 exports.default = QuickStartTileHeader;

package/dist/cjs/Message/QuickStarts/types.d.ts

@@ -1,4 +1,5 @@
 import { ButtonProps } from '@patternfly/react-core';
+import type { ComponentType, ReactNode, SyntheticEvent } from 'react';
 export interface AccessReviewResourceAttributes {
     group?: string;
     resource?: string;
@@ -66,9 +67,9 @@ export interface QuickstartAction {
     /** Screen reader aria label. */
     'aria-label': string;
     /** Icon to be rendered as a plain button, by default Bookmark outlined will be used. */
-    icon?: React.ComponentType<unknown>;
+    icon?: ComponentType<unknown>;
     /** Callback with synthetic event parameter. */
-    onClick?: (e: React.SyntheticEvent) => void;
+    onClick?: (e: SyntheticEvent) => void;
     /** Additional button props to be rendered as extra props. */
     buttonProps?: ButtonProps;
 }
@@ -82,7 +83,7 @@ export interface QuickStartSpec {
     version?: number;
     displayName: string;
     durationMinutes?: number;
-    icon: React.ReactNode;
+    icon: ReactNode;
     description: string;
     prerequisites?: string[];
     introduction?: string;

package/dist/cjs/Message/TableMessage/TableMessage.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ExtraProps } from 'react-markdown';
 import { TableProps } from '@patternfly/react-table';
 interface Properties {
@@ -16,5 +15,5 @@ export interface TableNode {
     tagName: string;
     type: string;
 }
-declare const TableMessage: ({ children, ...props }: TableProps & ExtraProps) => React.JSX.Element;
+declare const TableMessage: ({ children, ...props }: Omit<TableProps, "ref"> & ExtraProps) => import("react/jsx-runtime").JSX.Element;
 export default TableMessage;