@patternfly/chatbot 2.2.1 → 6.3.0-prerelease.10

package/dist/cjs/MessageBar/MessageBar.d.ts

@@ -28,10 +28,14 @@ export interface MessageBarProps extends TextAreaProps {
     className?: string;
     /** Flag to always to show the send button. By default send button is shown when there is a message in the input field */
     alwayShowSendButton?: boolean;
+    /** Placeholder for message input */
+    placeholder?: string;
     /** Flag to disable/enable the Attach button  */
     hasAttachButton?: boolean;
     /** Flag to enable the Microphone button  */
     hasMicrophoneButton?: boolean;
+    /** Placeholder text when listening */
+    listeningText?: string;
     /** Flag to enable the Stop button, used for streaming content */
     hasStopButton?: boolean;
     /** Callback function for when stop button is clicked */
@@ -74,6 +78,7 @@ export interface MessageBarProps extends TextAreaProps {
     onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, value: string | number) => void;
     /** Display mode of chatbot, if you want to message bar to resize when the display mode changes */
     displayMode?: ChatbotDisplayMode;
+    isCompact?: boolean;
 }
 export declare const MessageBar: React.FunctionComponent<MessageBarProps>;
 export default MessageBar;

package/dist/cjs/MessageBar/MessageBar.js

@@ -24,7 +24,7 @@ const AttachButton_1 = require("./AttachButton");
 const AttachMenu_1 = __importDefault(require("../AttachMenu"));
 const StopButton_1 = __importDefault(require("./StopButton"));
 const MessageBar = (_a) => {
-    var { onSendMessage, className, alwayShowSendButton, hasAttachButton = true, hasMicrophoneButton, handleAttach, attachMenuProps, isSendButtonDisabled, handleStopButton, hasStopButton, buttonProps, onChange, displayMode, value } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "hasAttachButton", "hasMicrophoneButton", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode", "value"]);
+    var { onSendMessage, className, alwayShowSendButton, placeholder = 'Send a message...', hasAttachButton = true, hasMicrophoneButton, listeningText = 'Listening', handleAttach, attachMenuProps, isSendButtonDisabled, handleStopButton, hasStopButton, buttonProps, onChange, displayMode, value, isCompact = false } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "placeholder", "hasAttachButton", "hasMicrophoneButton", "listeningText", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode", "value", "isCompact"]);
     // Text Input
     // --------------------------------------------------------------------------
     const [message, setMessage] = react_1.default.useState(value !== null && value !== void 0 ? value : '');
@@ -32,11 +32,12 @@ const MessageBar = (_a) => {
     const [hasSentMessage, setHasSentMessage] = react_1.default.useState(false);
     const textareaRef = react_1.default.useRef(null);
     const attachButtonRef = react_1.default.useRef(null);
+    const topMargin = '1rem';
     const setInitialLineHeight = (field) => {
         field.style.setProperty('line-height', '1rem');
         const parent = field.parentElement;
         if (parent) {
-            parent.style.setProperty('margin-top', `1rem`);
+            parent.style.setProperty('margin-top', topMargin);
             parent.style.setProperty('margin-bottom', `0rem`);
             parent.style.setProperty('height', 'inherit');
             const grandparent = parent.parentElement;
@@ -58,8 +59,8 @@ const MessageBar = (_a) => {
                 parseInt(computed.getPropertyValue('border-bottom-width'));
             parent.style.setProperty('height', `${height}px`);
             if (height > 32 || window.innerWidth <= 507) {
-                parent.style.setProperty('margin-bottom', `1rem`);
-                parent.style.setProperty('margin-top', `1rem`);
+                parent.style.setProperty('margin-bottom', topMargin);
+                parent.style.setProperty('margin-top', topMargin);
             }
         }
     };
@@ -80,8 +81,8 @@ const MessageBar = (_a) => {
     const handleNewLine = (field) => {
         const parent = field.parentElement;
         if (parent) {
-            parent.style.setProperty('margin-bottom', `1rem`);
-            parent.style.setProperty('margin-top', `1rem`);
+            parent.style.setProperty('margin-bottom', topMargin);
+            parent.style.setProperty('margin-top', topMargin);
         }
     };
     react_1.default.useEffect(() => {
@@ -176,17 +177,17 @@ const MessageBar = (_a) => {
     const renderButtons = () => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         if (hasStopButton && handleStopButton) {
-            return (react_1.default.createElement(StopButton_1.default, Object.assign({ onClick: handleStopButton, tooltipContent: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _a === void 0 ? void 0 : _a.tooltipContent }, (_b = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _b === void 0 ? void 0 : _b.props)));
+            return (react_1.default.createElement(StopButton_1.default, Object.assign({ onClick: handleStopButton, tooltipContent: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _a === void 0 ? void 0 : _a.tooltipContent, isCompact: isCompact }, (_b = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _b === void 0 ? void 0 : _b.props)));
         }
         return (react_1.default.createElement(react_1.default.Fragment, null,
-            attachMenuProps && (react_1.default.createElement(AttachButton_1.AttachButton, Object.assign({ ref: attachButtonRef, onClick: handleAttachMenuToggle, isDisabled: isListeningMessage, tooltipContent: (_c = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _c === void 0 ? void 0 : _c.tooltipContent }, (_d = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _d === void 0 ? void 0 : _d.props))),
-            !attachMenuProps && hasAttachButton && (react_1.default.createElement(AttachButton_1.AttachButton, Object.assign({ onAttachAccepted: handleAttach, isDisabled: isListeningMessage, tooltipContent: (_e = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _e === void 0 ? void 0 : _e.tooltipContent, inputTestId: (_f = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _f === void 0 ? void 0 : _f.inputTestId }, (_g = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _g === void 0 ? void 0 : _g.props))),
-            hasMicrophoneButton && (react_1.default.createElement(MicrophoneButton_1.default, Object.assign({ isListening: isListeningMessage, onIsListeningChange: setIsListeningMessage, onSpeechRecognition: handleSpeechRecognition, tooltipContent: (_h = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _h === void 0 ? void 0 : _h.tooltipContent, language: (_j = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _j === void 0 ? void 0 : _j.language }, (_k = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _k === void 0 ? void 0 : _k.props))),
-            (alwayShowSendButton || message) && (react_1.default.createElement(SendButton_1.default, Object.assign({ value: message, onClick: () => handleSend(message), isDisabled: isSendButtonDisabled, tooltipContent: (_l = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _l === void 0 ? void 0 : _l.tooltipContent }, (_m = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _m === void 0 ? void 0 : _m.props)))));
+            attachMenuProps && (react_1.default.createElement(AttachButton_1.AttachButton, Object.assign({ ref: attachButtonRef, onClick: handleAttachMenuToggle, isDisabled: isListeningMessage, tooltipContent: (_c = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _c === void 0 ? void 0 : _c.tooltipContent, isCompact: isCompact }, (_d = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _d === void 0 ? void 0 : _d.props))),
+            !attachMenuProps && hasAttachButton && (react_1.default.createElement(AttachButton_1.AttachButton, Object.assign({ onAttachAccepted: handleAttach, isDisabled: isListeningMessage, tooltipContent: (_e = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _e === void 0 ? void 0 : _e.tooltipContent, inputTestId: (_f = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _f === void 0 ? void 0 : _f.inputTestId, isCompact: isCompact }, (_g = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _g === void 0 ? void 0 : _g.props))),
+            hasMicrophoneButton && (react_1.default.createElement(MicrophoneButton_1.default, Object.assign({ isListening: isListeningMessage, onIsListeningChange: setIsListeningMessage, onSpeechRecognition: handleSpeechRecognition, tooltipContent: (_h = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _h === void 0 ? void 0 : _h.tooltipContent, language: (_j = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _j === void 0 ? void 0 : _j.language, isCompact: isCompact }, (_k = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _k === void 0 ? void 0 : _k.props))),
+            (alwayShowSendButton || message) && (react_1.default.createElement(SendButton_1.default, Object.assign({ value: message, onClick: () => handleSend(message), isDisabled: isSendButtonDisabled, tooltipContent: (_l = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _l === void 0 ? void 0 : _l.tooltipContent, isCompact: isCompact }, (_m = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _m === void 0 ? void 0 : _m.props)))));
     };
     const messageBarContents = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "pf-chatbot__message-bar-input" },
-            react_1.default.createElement(react_core_1.TextArea, Object.assign({ className: "pf-chatbot__message-textarea", value: message, onChange: handleChange, "aria-label": isListeningMessage ? 'Listening' : 'Send a message...', placeholder: isListeningMessage ? 'Listening' : 'Send a message...', ref: textareaRef, onKeyDown: handleKeyDown }, props))),
+        react_1.default.createElement("div", { className: `pf-chatbot__message-bar-input ${isCompact ? 'pf-m-compact' : ''}` },
+            react_1.default.createElement(react_core_1.TextArea, Object.assign({ className: "pf-chatbot__message-textarea", value: message, onChange: handleChange, "aria-label": isListeningMessage ? listeningText : placeholder, placeholder: isListeningMessage ? listeningText : placeholder, ref: textareaRef, onKeyDown: handleKeyDown }, props))),
         react_1.default.createElement("div", { className: "pf-chatbot__message-bar-actions" }, renderButtons())));
     if (attachMenuProps) {
         return (react_1.default.createElement(AttachMenu_1.default, Object.assign({ toggle: (toggleRef) => (react_1.default.createElement("div", { ref: toggleRef, className: `pf-chatbot__message-bar ${className !== null && className !== void 0 ? className : ''}` }, messageBarContents)), filteredItems: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.attachMenuItems }, (attachMenuProps && { isOpen: attachMenuProps.isAttachMenuOpen }), { onOpenChange: (isAttachMenuOpen) => {

package/dist/cjs/MessageBar/MessageBar.test.js

@@ -76,6 +76,12 @@ describe('Message bar', () => {
         expect(spy).toHaveBeenCalledTimes(1);
         expect(spy).toHaveBeenCalledWith(expect.any(Object), 'A');
     }));
+    it('can use specified placeholder text', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, placeholder: "test placeholder" }));
+        const input = react_2.screen.getByRole('textbox', { name: /test placeholder/i });
+        yield user_event_1.default.type(input, 'Hello world');
+        expect(input).toHaveTextContent('Hello world');
+    }));
     // Send button
     // --------------------------------------------------------------------------
     it('shows send button when text is input', () => __awaiter(void 0, void 0, void 0, function* () {
@@ -229,6 +235,13 @@ describe('Message bar', () => {
         yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Microphone button' }));
         expect(react_2.screen.getByRole('tooltip', { name: 'Not currently listening' })).toBeTruthy();
     }));
+    it('can customize the listening placeholder', () => __awaiter(void 0, void 0, void 0, function* () {
+        mockSpeechRecognition();
+        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true, listeningText: "I am listening" }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Microphone button' }));
+        const input = react_2.screen.getByRole('textbox', { name: /I am listening/i });
+        expect(input).toBeTruthy();
+    }));
     it('can handle buttonProps props appropriately for microphone', () => __awaiter(void 0, void 0, void 0, function* () {
         mockSpeechRecognition();
         (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true, buttonProps: { microphone: { props: { 'aria-label': 'Test' } } } }));

package/dist/cjs/MessageBar/MicrophoneButton.d.ts

@@ -18,6 +18,7 @@ export interface MicrophoneButtonProps extends ButtonProps {
     };
     /** Locale code for language speech recognition is conducted in. This should be in the format 'en-US', a.k.a. the ISO 639-1 code, a dash, and the ISO_3166-1 code. */
     language?: string;
+    isCompact?: boolean;
 }
 export declare const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps>;
 export default MicrophoneButton;

package/dist/cjs/MessageBar/MicrophoneButton.js

@@ -24,7 +24,7 @@ const react_core_1 = require("@patternfly/react-core");
 // Import FontAwesome icons
 const microphone_icon_1 = require("@patternfly/react-icons/dist/esm/icons/microphone-icon");
 const MicrophoneButton = (_a) => {
-    var { isListening, onIsListeningChange, onSpeechRecognition, className, tooltipProps, tooltipContent = { active: 'Stop listening', inactive: 'Use microphone' }, language = 'en-US' } = _a, props = __rest(_a, ["isListening", "onIsListeningChange", "onSpeechRecognition", "className", "tooltipProps", "tooltipContent", "language"]);
+    var { isListening, onIsListeningChange, onSpeechRecognition, className, tooltipProps, tooltipContent = { active: 'Stop listening', inactive: 'Use microphone' }, language = 'en-US', isCompact } = _a, props = __rest(_a, ["isListening", "onIsListeningChange", "onSpeechRecognition", "className", "tooltipProps", "tooltipContent", "language", "isCompact"]);
     // Microphone
     // --------------------------------------------------------------------------
     const [speechRecognition, setSpeechRecognition] = react_1.default.useState();
@@ -64,13 +64,13 @@ const MicrophoneButton = (_a) => {
             };
             setSpeechRecognition(recognition);
         }
-    }, [onSpeechRecognition]);
+    }, [onSpeechRecognition, language, onIsListeningChange]);
     if (!speechRecognition) {
         return null;
     }
     return (react_1.default.createElement(react_core_1.Tooltip, Object.assign({ aria: "none", "aria-live": "polite", id: "pf-chatbot__tooltip--use-microphone", content: isListening ? tooltipContent.active : tooltipContent.inactive, position: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.position) || 'top', entryDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.entryDelay) || 0, exitDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.exitDelay) || 0, distance: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.distance) || 8, animationDuration: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.animationDuration) || 0 }, tooltipProps),
-        react_1.default.createElement(react_core_1.Button, Object.assign({ variant: "plain", className: `pf-chatbot__button--microphone ${isListening ? 'pf-chatbot__button--microphone--active' : ''} ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || 'Microphone button', onClick: isListening ? stopListening : startListening, icon: react_1.default.createElement(react_core_1.Icon, { iconSize: "xl", isInline: true },
-                react_1.default.createElement(microphone_icon_1.MicrophoneIcon, null)) }, props))));
+        react_1.default.createElement(react_core_1.Button, Object.assign({ variant: "plain", className: `pf-chatbot__button--microphone ${isListening ? 'pf-chatbot__button--microphone--active' : ''} ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || 'Microphone button', onClick: isListening ? stopListening : startListening, icon: react_1.default.createElement(react_core_1.Icon, { iconSize: isCompact ? 'lg' : 'xl', isInline: true },
+                react_1.default.createElement(microphone_icon_1.MicrophoneIcon, null)), size: isCompact ? 'sm' : undefined }, props))));
 };
 exports.MicrophoneButton = MicrophoneButton;
 exports.default = exports.MicrophoneButton;

package/dist/cjs/MessageBar/SendButton.d.ts

@@ -9,6 +9,7 @@ export interface SendButtonProps extends ButtonProps {
     tooltipProps?: Omit<TooltipProps, 'content'>;
     /** English text "Send" used in the tooltip */
     tooltipContent?: string;
+    isCompact?: boolean;
 }
 export declare const SendButton: React.FunctionComponent<SendButtonProps>;
 export default SendButton;

package/dist/cjs/MessageBar/SendButton.js

@@ -23,12 +23,12 @@ const react_1 = __importDefault(require("react"));
 const react_core_1 = require("@patternfly/react-core");
 const paper_plane_icon_1 = require("@patternfly/react-icons/dist/esm/icons/paper-plane-icon");
 const SendButton = (_a) => {
-    var { className, onClick, tooltipProps, tooltipContent = 'Send' } = _a, props = __rest(_a, ["className", "onClick", "tooltipProps", "tooltipContent"]);
+    var { className, onClick, tooltipProps, tooltipContent = 'Send', isCompact } = _a, props = __rest(_a, ["className", "onClick", "tooltipProps", "tooltipContent", "isCompact"]);
     return (react_1.default.createElement(react_core_1.Tooltip, Object.assign({ id: "pf-chatbot__tooltip--send", content: tooltipContent, position: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.position) || 'top', entryDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.entryDelay) || 0, exitDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.exitDelay) || 0, distance: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.distance) || 8, animationDuration: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.animationDuration) || 0, 
         // prevents VO announcements of both aria label and tooltip
         aria: "none" }, tooltipProps),
-        react_1.default.createElement(react_core_1.Button, Object.assign({ variant: "plain", className: `pf-chatbot__button--send ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || 'Send button', onClick: onClick, icon: react_1.default.createElement(react_core_1.Icon, { iconSize: "xl", isInline: true },
-                react_1.default.createElement(paper_plane_icon_1.PaperPlaneIcon, null)) }, props))));
+        react_1.default.createElement(react_core_1.Button, Object.assign({ variant: "plain", className: `pf-chatbot__button--send ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || 'Send button', onClick: onClick, icon: react_1.default.createElement(react_core_1.Icon, { iconSize: isCompact ? 'lg' : 'xl', isInline: true },
+                react_1.default.createElement(paper_plane_icon_1.PaperPlaneIcon, null)), size: isCompact ? 'sm' : undefined }, props))));
 };
 exports.SendButton = SendButton;
 exports.default = exports.SendButton;

package/dist/cjs/MessageBar/SendButton.test.js

@@ -51,4 +51,8 @@ describe('Send button', () => {
         yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Send button' }));
         expect(react_2.screen.getByRole('tooltip', { name: 'Send' })).toHaveAttribute('id', 'test');
     }));
+    it('should handle isCompact', () => {
+        renderSend({ 'data-testid': 'button', isCompact: true });
+        expect(react_2.screen.getByTestId('button')).toHaveClass('pf-m-compact');
+    });
 });

package/dist/cjs/MessageBar/StopButton.d.ts

@@ -9,6 +9,7 @@ export interface StopButtonProps extends ButtonProps {
     tooltipProps?: Omit<TooltipProps, 'content'>;
     /** English text "Stop" used in the tooltip */
     tooltipContent?: string;
+    isCompact?: boolean;
 }
 export declare const StopButton: React.FunctionComponent<StopButtonProps>;
 export default StopButton;

package/dist/cjs/MessageBar/StopButton.js

@@ -22,13 +22,13 @@ const react_1 = __importDefault(require("react"));
 // Import PatternFly components
 const react_core_1 = require("@patternfly/react-core");
 const StopButton = (_a) => {
-    var { className, onClick, tooltipProps, tooltipContent = 'Stop' } = _a, props = __rest(_a, ["className", "onClick", "tooltipProps", "tooltipContent"]);
+    var { className, onClick, tooltipProps, tooltipContent = 'Stop', isCompact } = _a, props = __rest(_a, ["className", "onClick", "tooltipProps", "tooltipContent", "isCompact"]);
     return (react_1.default.createElement(react_core_1.Tooltip, Object.assign({ id: "pf-chatbot__tooltip--stop", content: tooltipContent, position: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.position) || 'top', entryDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.entryDelay) || 0, exitDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.exitDelay) || 0, distance: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.distance) || 8, animationDuration: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.animationDuration) || 0, 
         // prevents VO announcements of both aria label and tooltip
         aria: "none" }, tooltipProps),
-        react_1.default.createElement(react_core_1.Button, Object.assign({ className: `pf-chatbot__button--stop ${className !== null && className !== void 0 ? className : ''}`, variant: "link", "aria-label": props['aria-label'] || 'Stop button', onClick: onClick, icon: react_1.default.createElement(react_core_1.Icon, { iconSize: "xl", isInline: true },
+        react_1.default.createElement(react_core_1.Button, Object.assign({ className: `pf-chatbot__button--stop ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}`, variant: "link", "aria-label": props['aria-label'] || 'Stop button', onClick: onClick, icon: react_1.default.createElement(react_core_1.Icon, { iconSize: isCompact ? 'lg' : 'xl', isInline: true },
                 react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-                    react_1.default.createElement("path", { d: "M0.5 3C0.5 1.62109 1.62109 0.5 3 0.5H13C14.3789 0.5 15.5 1.62109 15.5 3V13C15.5 14.3789 14.3789 15.5 13 15.5H3C1.62109 15.5 0.5 14.3789 0.5 13V3Z", fill: "currentColor" }))) }, props))));
+                    react_1.default.createElement("path", { d: "M0.5 3C0.5 1.62109 1.62109 0.5 3 0.5H13C14.3789 0.5 15.5 1.62109 15.5 3V13C15.5 14.3789 14.3789 15.5 13 15.5H3C1.62109 15.5 0.5 14.3789 0.5 13V3Z", fill: "currentColor" }))), size: isCompact ? 'sm' : undefined }, props))));
 };
 exports.StopButton = StopButton;
 exports.default = exports.StopButton;

package/dist/cjs/MessageBar/StopButton.test.js

@@ -51,4 +51,8 @@ describe('Stop button', () => {
         yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Stop button' }));
         expect(react_2.screen.getByRole('tooltip', { name: 'Stop' })).toHaveAttribute('id', 'test');
     }));
+    it('should handle isCompact', () => {
+        renderStop({ 'data-testid': 'button', isCompact: true });
+        expect(react_2.screen.getByTestId('button')).toHaveClass('pf-m-compact');
+    });
 });

package/dist/cjs/MessageBox/MessageBox.d.ts

@@ -12,6 +12,10 @@ export interface MessageBoxProps extends React.HTMLProps<HTMLDivElement> {
     innerRef?: React.Ref<HTMLDivElement>;
     /** Modifier that controls how content in MessageBox is positioned within the container */
     position?: 'top' | 'bottom';
+    /** Click handler for additional logic for when scroll to top jump button is clicked */
+    onScrollToTopClick?: () => void;
+    /** Click handler for additional logic for when scroll to bottom jump button is clicked */
+    onScrollToBottomClick?: () => void;
 }
 export declare const MessageBox: React.ForwardRefExoticComponent<Omit<MessageBoxProps, "ref"> & React.RefAttributes<any>>;
 export default MessageBox;

package/dist/cjs/MessageBox/MessageBox.js

@@ -1,4 +1,15 @@
 "use strict";
+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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -9,7 +20,8 @@ exports.MessageBox = void 0;
 // ============================================================================
 const react_1 = __importDefault(require("react"));
 const JumpButton_1 = __importDefault(require("./JumpButton"));
-const MessageBoxBase = ({ announcement, ariaLabel = 'Scrollable message log', children, innerRef, className, position = 'top' }) => {
+const MessageBoxBase = (_a) => {
+    var { announcement, ariaLabel = 'Scrollable message log', children, innerRef, className, position = 'top', onScrollToTopClick, onScrollToBottomClick } = _a, props = __rest(_a, ["announcement", "ariaLabel", "children", "innerRef", "className", "position", "onScrollToTopClick", "onScrollToBottomClick"]);
     const [atTop, setAtTop] = react_1.default.useState(false);
     const [atBottom, setAtBottom] = react_1.default.useState(true);
     const [isOverflowing, setIsOverflowing] = react_1.default.useState(false);
@@ -29,26 +41,28 @@ const MessageBoxBase = ({ announcement, ariaLabel = 'Scrollable message log', ch
             setAtTop(scrollTop === 0);
             setAtBottom(Math.round(scrollTop) + Math.round(clientHeight) >= Math.round(scrollHeight) - 1); // rounding means it could be within a pixel of the bottom
         }
-    }, []);
+    }, [messageBoxRef]);
     const checkOverflow = react_1.default.useCallback(() => {
         const element = messageBoxRef.current;
         if (element) {
             const { scrollHeight, clientHeight } = element;
             setIsOverflowing(scrollHeight >= clientHeight);
         }
-    }, []);
+    }, [messageBoxRef]);
     const scrollToTop = react_1.default.useCallback(() => {
         const element = messageBoxRef.current;
         if (element) {
             element.scrollTo({ top: 0, behavior: 'smooth' });
         }
-    }, []);
+        onScrollToTopClick && onScrollToTopClick();
+    }, [messageBoxRef]);
     const scrollToBottom = react_1.default.useCallback(() => {
         const element = messageBoxRef.current;
         if (element) {
             element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' });
         }
-    }, []);
+        onScrollToBottomClick && onScrollToBottomClick();
+    }, [messageBoxRef]);
     // Detect scroll position
     react_1.default.useEffect(() => {
         const element = messageBoxRef.current;
@@ -62,10 +76,10 @@ const MessageBoxBase = ({ announcement, ariaLabel = 'Scrollable message log', ch
                 element.removeEventListener('scroll', handleScroll);
             };
         }
-    }, [checkOverflow, handleScroll]);
+    }, [checkOverflow, handleScroll, messageBoxRef]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(JumpButton_1.default, { position: "top", isHidden: isOverflowing && atTop, onClick: scrollToTop }),
-        react_1.default.createElement("div", { role: "region", tabIndex: 0, "aria-label": ariaLabel, className: `pf-chatbot__messagebox ${position === 'bottom' && 'pf-chatbot__messagebox--bottom'} ${className !== null && className !== void 0 ? className : ''}`, ref: innerRef !== null && innerRef !== void 0 ? innerRef : messageBoxRef },
+        react_1.default.createElement("div", Object.assign({ role: "region", tabIndex: 0, "aria-label": ariaLabel, className: `pf-chatbot__messagebox ${position === 'bottom' && 'pf-chatbot__messagebox--bottom'} ${className !== null && className !== void 0 ? className : ''}`, ref: innerRef !== null && innerRef !== void 0 ? innerRef : messageBoxRef }, props),
             children,
             react_1.default.createElement("div", { className: "pf-chatbot__messagebox-announcement", "aria-live": "polite" }, announcement)),
         react_1.default.createElement(JumpButton_1.default, { position: "bottom", isHidden: isOverflowing && atBottom, onClick: scrollToBottom })));

package/dist/cjs/MessageBox/MessageBox.test.js

@@ -1,4 +1,13 @@
 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -6,6 +15,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@testing-library/react");
 const MessageBox_1 = require("./MessageBox");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
 describe('MessageBox', () => {
     it('should render Message box', () => {
         (0, react_2.render)(react_1.default.createElement(MessageBox_1.MessageBox, null,
@@ -19,4 +29,37 @@ describe('MessageBox', () => {
         expect(ref.current).not.toBeNull();
         expect(ref.current).toBeInstanceOf(HTMLDivElement);
     });
+    it('should call onScrollToBottomClick when scroll to top button is clicked', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(MessageBox_1.MessageBox, { onScrollToBottomClick: spy },
+            react_1.default.createElement("div", null, "Test message content")));
+        // this forces button to show
+        const region = react_2.screen.getByRole('region');
+        Object.defineProperty(region, 'scrollHeight', { configurable: true, value: 1000 });
+        Object.defineProperty(region, 'clientHeight', { configurable: true, value: 500 });
+        Object.defineProperty(region, 'scrollTop', { configurable: true, value: 0 });
+        region.dispatchEvent(new Event('scroll'));
+        yield (0, react_2.waitFor)(() => {
+            user_event_1.default.click(react_2.screen.getByRole('button', { name: /Jump bottom button/i }));
+            expect(spy).toHaveBeenCalled();
+        });
+    }));
+    it('should call onScrollToTopClick when scroll to top button is clicked', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(MessageBox_1.MessageBox, { onScrollToTopClick: spy },
+            react_1.default.createElement("div", null, "Test message content")));
+        // this forces button to show
+        const region = react_2.screen.getByRole('region');
+        Object.defineProperty(region, 'scrollHeight', { configurable: true, value: 1000 });
+        Object.defineProperty(region, 'clientHeight', { configurable: true, value: 500 });
+        Object.defineProperty(region, 'scrollTop', {
+            configurable: true,
+            value: 500
+        });
+        region.dispatchEvent(new Event('scroll'));
+        yield (0, react_2.waitFor)(() => {
+            user_event_1.default.click(react_2.screen.getByRole('button', { name: /Jump top button/i }));
+            expect(spy).toHaveBeenCalled();
+        });
+    }));
 });

package/dist/cjs/PreviewAttachment/PreviewAttachment.d.ts

@@ -17,6 +17,8 @@ export interface PreviewAttachmentProps {
     title?: string;
     /** Display mode for the Chatbot parent; this influences the styles applied */
     displayMode?: ChatbotDisplayMode;
+    /** Sets modal to compact styling. */
+    isCompact?: boolean;
 }
 export declare const PreviewAttachment: React.FunctionComponent<PreviewAttachmentProps>;
 export default PreviewAttachment;

package/dist/cjs/PreviewAttachment/PreviewAttachment.js

@@ -10,7 +10,7 @@ exports.PreviewAttachment = void 0;
 const react_1 = __importDefault(require("react"));
 const CodeModal_1 = __importDefault(require("../CodeModal"));
 const Chatbot_1 = require("../Chatbot");
-const PreviewAttachment = ({ fileName, code, handleModalToggle, isModalOpen, onDismiss = undefined, onEdit, title = 'Preview attachment', displayMode = Chatbot_1.ChatbotDisplayMode.default }) => {
+const PreviewAttachment = ({ fileName, code, handleModalToggle, isModalOpen, onDismiss = undefined, onEdit, title = 'Preview attachment', displayMode = Chatbot_1.ChatbotDisplayMode.default, isCompact }) => {
     const handleEdit = (_event) => {
         handleModalToggle(_event);
         onEdit(_event);
@@ -19,7 +19,7 @@ const PreviewAttachment = ({ fileName, code, handleModalToggle, isModalOpen, onD
         handleModalToggle(_event);
         onDismiss && onDismiss(_event);
     };
-    return (react_1.default.createElement(CodeModal_1.default, { codeEditorControlClassName: "pf-chatbot__code-modal--controls", code: code, fileName: fileName, handleModalToggle: handleModalToggle, isCopyEnabled: true, isLineNumbersVisible: false, isModalOpen: isModalOpen, onPrimaryAction: handleEdit, onSecondaryAction: handleDismiss, primaryActionBtn: "Edit", secondaryActionBtn: "Dismiss", title: title, isReadOnly: true, displayMode: displayMode }));
+    return (react_1.default.createElement(CodeModal_1.default, { codeEditorControlClassName: "pf-chatbot__code-modal--controls", code: code, fileName: fileName, handleModalToggle: handleModalToggle, isCopyEnabled: true, isLineNumbersVisible: false, isModalOpen: isModalOpen, onPrimaryAction: handleEdit, onSecondaryAction: handleDismiss, primaryActionBtn: "Edit", secondaryActionBtn: "Dismiss", title: title, isReadOnly: true, displayMode: displayMode, isCompact: isCompact }));
 };
 exports.PreviewAttachment = PreviewAttachment;
 exports.default = exports.PreviewAttachment;

package/dist/cjs/Settings/SettingsForm.d.ts

@@ -8,6 +8,8 @@ export interface SettingsFormProps {
         label: string;
         field: React.ReactElement;
     }[];
+    /** Sets form to compact styling. */
+    isCompact?: boolean;
 }
 export declare const SettingsForm: React.FunctionComponent<SettingsFormProps>;
 export default SettingsForm;

package/dist/cjs/Settings/SettingsForm.js

@@ -17,8 +17,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SettingsForm = void 0;
 const react_1 = __importDefault(require("react"));
 const SettingsForm = (_a) => {
-    var { className, fields = [] } = _a, props = __rest(_a, ["className", "fields"]);
-    return (react_1.default.createElement("div", Object.assign({ className: `pf-chatbot__settings-form-container ${className}` }, props),
+    var { className, fields = [], isCompact } = _a, props = __rest(_a, ["className", "fields", "isCompact"]);
+    return (react_1.default.createElement("div", Object.assign({ className: `pf-chatbot__settings-form-container ${isCompact ? 'pf-m-compact' : ''} ${className ? ` ${className}` : ''}` }, props),
         react_1.default.createElement("form", { className: "pf-chatbot__settings-form" }, fields.map((field) => (react_1.default.createElement("div", { className: "pf-chatbot__settings-form-row", key: field.label },
             react_1.default.createElement("label", { className: "pf-chatbot__settings-label", htmlFor: field.id }, field.label),
             field.field))))));

package/dist/cjs/Settings/SettingsForm.test.d.ts

@@ -1 +1 @@
-export {};
+import '@testing-library/jest-dom';

package/dist/cjs/Settings/SettingsForm.test.js

@@ -7,6 +7,7 @@ const react_1 = __importDefault(require("react"));
 const react_core_1 = require("@patternfly/react-core");
 const react_2 = require("@testing-library/react");
 const SettingsForm_1 = require("./SettingsForm");
+require("@testing-library/jest-dom");
 describe('SettingsForm', () => {
     it('should render settingsForm with custom classname', () => {
         const { container } = (0, react_2.render)(react_1.default.createElement(SettingsForm_1.SettingsForm, { className: "custom-settings" }));
@@ -23,4 +24,15 @@ describe('SettingsForm', () => {
         (0, react_2.render)(react_1.default.createElement(SettingsForm_1.SettingsForm, { fields: fields }));
         expect(react_2.screen.getByRole('button', { name: 'Archive chat' })).toBeTruthy();
     });
+    it('should render settingsForm with isCompact', () => {
+        const fields = [
+            {
+                id: 'archived-chat',
+                label: 'Archive chat',
+                field: (react_1.default.createElement(react_core_1.Button, { id: "archived-chat", variant: "secondary" }, "Archive chat"))
+            }
+        ];
+        (0, react_2.render)(react_1.default.createElement(SettingsForm_1.SettingsForm, { "data-testid": "settings-form", fields: fields, isCompact: true }));
+        expect(react_2.screen.getByTestId('settings-form')).toHaveClass('pf-m-compact');
+    });
 });

package/dist/cjs/SourcesCard/SourcesCard.d.ts

@@ -5,7 +5,7 @@ export interface SourcesCardProps extends CardProps {
     className?: string;
     /** Flag indicating if the pagination is disabled. */
     isDisabled?: boolean;
-    /** Label for the English word "of". */
+    /** @deprecated ofWord has been deprecated. Label for the English word "of." */
     ofWord?: string;
     /** Accessible label for the pagination component. */
     paginationAriaLabel?: string;
@@ -14,6 +14,8 @@ export interface SourcesCardProps extends CardProps {
         title?: string;
         link: string;
         body?: React.ReactNode | string;
+        isExternal?: boolean;
+        hasShowMore?: boolean;
     }[];
     /** Label for the English word "source" */
     sourceWord?: string;
@@ -29,6 +31,10 @@ export interface SourcesCardProps extends CardProps {
     onPreviousClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
     /** Function called when page is changed. */
     onSetPage?: (event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => void;
+    /** Label for English words "show more" */
+    showMoreWords?: string;
+    /** Label for English words "show less" */
+    showLessWords?: string;
 }
 declare const SourcesCard: React.FunctionComponent<SourcesCardProps>;
 export default SourcesCard;

package/dist/cjs/SourcesCard/SourcesCard.js

@@ -20,9 +20,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 // Import PatternFly components
 const react_core_1 = require("@patternfly/react-core");
+const react_icons_1 = require("@patternfly/react-icons");
 const SourcesCard = (_a) => {
-    var { className, isDisabled, ofWord = 'of', paginationAriaLabel = 'Pagination', sources, sourceWord = 'source', sourceWordPlural = 'sources', toNextPageAriaLabel = 'Go to next page', toPreviousPageAriaLabel = 'Go to previous page', onNextClick, onPreviousClick, onSetPage } = _a, props = __rest(_a, ["className", "isDisabled", "ofWord", "paginationAriaLabel", "sources", "sourceWord", "sourceWordPlural", "toNextPageAriaLabel", "toPreviousPageAriaLabel", "onNextClick", "onPreviousClick", "onSetPage"]);
+    var { className, isDisabled, paginationAriaLabel = 'Pagination', sources, sourceWord = 'source', sourceWordPlural = 'sources', toNextPageAriaLabel = 'Go to next page', toPreviousPageAriaLabel = 'Go to previous page', onNextClick, onPreviousClick, onSetPage, showMoreWords = 'show more', showLessWords = 'show less', isCompact } = _a, props = __rest(_a, ["className", "isDisabled", "paginationAriaLabel", "sources", "sourceWord", "sourceWordPlural", "toNextPageAriaLabel", "toPreviousPageAriaLabel", "onNextClick", "onPreviousClick", "onSetPage", "showMoreWords", "showLessWords", "isCompact"]);
     const [page, setPage] = react_1.default.useState(1);
+    const [isExpanded, setIsExpanded] = react_1.default.useState(false);
+    const onToggle = (_event, isExpanded) => {
+        setIsExpanded(isExpanded);
+    };
     const handleNewPage = (_evt, newPage) => {
         setPage(newPage);
         onSetPage && onSetPage(_evt, newPage);
@@ -35,10 +40,13 @@ const SourcesCard = (_a) => {
     };
     return (react_1.default.createElement("div", { className: "pf-chatbot__source" },
         react_1.default.createElement("span", null, (0, react_core_1.pluralize)(sources.length, sourceWord, sourceWordPlural)),
-        react_1.default.createElement(react_core_1.Card, Object.assign({ className: "pf-chatbot__sources-card" }, props),
+        react_1.default.createElement(react_core_1.Card, Object.assign({ isCompact: isCompact, className: "pf-chatbot__sources-card" }, props),
             react_1.default.createElement(react_core_1.CardTitle, { className: "pf-chatbot__sources-card-title" },
-                react_1.default.createElement("a", { href: sources[page - 1].link }, renderTitle(sources[page - 1].title))),
-            sources[page - 1].body && (react_1.default.createElement(react_core_1.CardBody, { className: `pf-chatbot__sources-card-body ${sources.length === 1 && 'pf-chatbot__sources-card-no-footer'}` }, sources[page - 1].body)),
+                react_1.default.createElement(react_core_1.Button, { component: "a", variant: react_core_1.ButtonVariant.link, href: sources[page - 1].link, icon: sources[page - 1].isExternal ? react_1.default.createElement(react_icons_1.ExternalLinkSquareAltIcon, null) : undefined, iconPosition: "end", isInline: true, rel: sources[page - 1].isExternal ? 'noreferrer' : undefined, target: sources[page - 1].isExternal ? '_blank' : undefined }, renderTitle(sources[page - 1].title))),
+            sources[page - 1].body && (react_1.default.createElement(react_core_1.CardBody, { className: `pf-chatbot__sources-card-body` }, sources[page - 1].hasShowMore ? (
+            // prevents extra VO announcements of button text - parent Message has aria-live
+            react_1.default.createElement("div", { "aria-live": "off" },
+                react_1.default.createElement(react_core_1.ExpandableSection, { variant: react_core_1.ExpandableSectionVariant.truncate, toggleText: isExpanded ? showLessWords : showMoreWords, onToggle: onToggle, isExpanded: isExpanded, truncateMaxLines: 2 }, sources[page - 1].body))) : (react_1.default.createElement("div", { className: "pf-chatbot__sources-card-body-text" }, sources[page - 1].body)))),
             sources.length > 1 && (react_1.default.createElement(react_core_1.CardFooter, { className: "pf-chatbot__sources-card-footer-container" },
                 react_1.default.createElement("div", { className: "pf-chatbot__sources-card-footer" },
                     react_1.default.createElement("nav", { className: `pf-chatbot__sources-card-footer-buttons ${className}`, "aria-label": paginationAriaLabel },
@@ -50,6 +58,10 @@ const SourcesCard = (_a) => {
                             react_1.default.createElement(react_core_1.Icon, { iconSize: "lg" },
                                 react_1.default.createElement("svg", { className: "pf-v6-svg", viewBox: "0 0 280 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em" },
                                     react_1.default.createElement("path", { d: "M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z" })))),
+                        react_1.default.createElement("span", { "aria-hidden": "true" },
+                            page,
+                            "/",
+                            sources.length),
                         react_1.default.createElement(react_core_1.Button, { variant: react_core_1.ButtonVariant.plain, isDisabled: isDisabled || page === sources.length, "aria-label": toNextPageAriaLabel, "data-action": "next", onClick: (event) => {
                                 const newPage = page + 1 <= sources.length ? page + 1 : sources.length;
                                 onNextClick && onNextClick(event, newPage);
@@ -57,12 +69,6 @@ const SourcesCard = (_a) => {
                             } },
                             react_1.default.createElement(react_core_1.Icon, { isInline: true, iconSize: "lg" },
                                 react_1.default.createElement("svg", { className: "pf-v6-svg", viewBox: "0 0 180 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em" },
-                                    react_1.default.createElement("path", { d: "M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" }))))),
-                    react_1.default.createElement("span", { "aria-hidden": "true" },
-                        page,
-                        " ",
-                        ofWord,
-                        " ",
-                        sources.length)))))));
+                                    react_1.default.createElement("path", { d: "M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" })))))))))));
 };
 exports.default = SourcesCard;