@patternfly/chatbot 6.3.0-prerelease.7 → 6.3.0-prerelease.8

package/dist/cjs/Chatbot/Chatbot.test.js

@@ -25,4 +25,8 @@ describe('Chatbot', () => {
         (0, react_2.render)(react_1.default.createElement(Chatbot_1.default, { isVisible: false }, "Chatbot Content"));
         expect(react_2.screen.queryByLabelText('Chatbot')).toBeFalsy();
     });
+    it('should handle isCompact', () => {
+        (0, react_2.render)(react_1.default.createElement(Chatbot_1.default, { "data-testid": "chatbot", isVisible: true, isCompact: true }, "Chatbot Content"));
+        expect(react_2.screen.getByTestId('chatbot')).toHaveClass('pf-m-compact');
+    });
 });

package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js

@@ -76,7 +76,7 @@ const ChatbotConversationHistoryNav = (_a) => {
             react_1.default.createElement(react_core_1.DrawerHead, Object.assign({}, drawerHeadProps),
                 react_1.default.createElement(react_core_1.DrawerActions, Object.assign({ "data-testid": drawerActionsTestId, className: reverseButtonOrder ? 'pf-v6-c-drawer__actions--reversed' : '' }, drawerActionsProps),
                     react_1.default.createElement(react_core_1.DrawerCloseButton, Object.assign({ onClick: onDrawerToggle }, drawerCloseButtonProps)),
-                    onNewChat && react_1.default.createElement(react_core_1.Button, { onClick: onNewChat }, newChatButtonText))),
+                    onNewChat && (react_1.default.createElement(react_core_1.Button, { size: isCompact ? 'sm' : undefined, onClick: onNewChat }, newChatButtonText)))),
             isLoading ? react_1.default.createElement(LoadingState_1.default, Object.assign({}, loadingState)) : renderDrawerContent()));
         return (react_1.default.createElement(react_core_1.DrawerPanelContent, Object.assign({ "aria-live": "polite", focusTrap: { enabled: true }, defaultSize: "384px" }, drawerPanelContentProps), drawer));
     };

package/dist/cjs/ChatbotFooter/ChatbotFooter.d.ts

@@ -4,6 +4,7 @@ export interface ChatbotFooterProps extends React.HTMLProps<HTMLDivElement> {
     children?: React.ReactNode;
     /** Custom classname for the Footer component */
     className?: string;
+    isCompact?: boolean;
 }
 export declare const ChatbotFooter: React.FunctionComponent<ChatbotFooterProps>;
 export default ChatbotFooter;

package/dist/cjs/ChatbotFooter/ChatbotFooter.js

@@ -26,8 +26,8 @@ exports.ChatbotFooter = void 0;
 const react_1 = __importDefault(require("react"));
 const react_core_1 = require("@patternfly/react-core");
 const ChatbotFooter = (_a) => {
-    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
-    return (react_1.default.createElement("div", Object.assign({ className: `pf-chatbot__footer ${className !== null && className !== void 0 ? className : ''}` }, props),
+    var { children, className, isCompact } = _a, props = __rest(_a, ["children", "className", "isCompact"]);
+    return (react_1.default.createElement("div", Object.assign({ className: `pf-chatbot__footer ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}` }, props),
         react_1.default.createElement(react_core_1.Divider, null),
         react_1.default.createElement("div", { className: "pf-chatbot__footer-container" }, children)));
 };

package/dist/cjs/ChatbotFooter/ChatbotFooter.test.d.ts

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

package/dist/cjs/ChatbotFooter/ChatbotFooter.test.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@testing-library/react");
 const ChatbotFooter_1 = __importDefault(require("./ChatbotFooter"));
+require("@testing-library/jest-dom");
 describe('ChatbotFooter', () => {
     it('should render ChatbotFooter with children', () => {
         (0, react_2.render)(react_1.default.createElement(ChatbotFooter_1.default, null, "Chatbot Content"));
@@ -15,4 +16,8 @@ describe('ChatbotFooter', () => {
         const { container } = (0, react_2.render)(react_1.default.createElement(ChatbotFooter_1.default, { className: "custom-class" }, "Chatbot Content"));
         expect(container.querySelector('.custom-class')).toBeTruthy();
     });
+    it('should handle isCompact', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotFooter_1.default, { className: "custom-class", isCompact: true, "data-testid": "footer" }, "Chatbot Content"));
+        expect(react_2.screen.getByTestId('footer')).toHaveClass('pf-m-compact');
+    });
 });

package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { TooltipProps } from '@patternfly/react-core';
-export interface ChatbotHeaderMenuProps {
+import { ButtonProps, TooltipProps } from '@patternfly/react-core';
+export interface ChatbotHeaderMenuProps extends ButtonProps {
     /** Callback function to attach to menu toggle on top right of chatbot header. */
     onMenuToggle: () => void;
     /** Custom classname for the header component */
@@ -13,5 +13,6 @@ export interface ChatbotHeaderMenuProps {
     innerRef?: React.Ref<HTMLButtonElement>;
     /** Content used in tooltip */
     tooltipContent?: string;
+    isCompact?: boolean;
 }
 export declare const ChatbotHeaderMenu: React.ForwardRefExoticComponent<ChatbotHeaderMenuProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.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 };
 };
@@ -7,10 +18,13 @@ exports.ChatbotHeaderMenu = void 0;
 const react_1 = __importDefault(require("react"));
 const react_core_1 = require("@patternfly/react-core");
 const bars_icon_1 = __importDefault(require("@patternfly/react-icons/dist/esm/icons/bars-icon"));
-const ChatbotHeaderMenuBase = ({ className, onMenuToggle, tooltipProps, menuAriaLabel = 'Toggle menu', innerRef, tooltipContent = 'Menu' }) => (react_1.default.createElement("div", { className: `pf-chatbot__menu ${className}` },
-    react_1.default.createElement(react_core_1.Tooltip, Object.assign({ content: tooltipContent, position: "bottom", 
-        // prevents VO announcements of both aria label and tooltip
-        aria: "none" }, tooltipProps),
-        react_1.default.createElement(react_core_1.Button, { className: "pf-chatbot__button--toggle-menu", variant: "plain", onClick: onMenuToggle, "aria-label": menuAriaLabel, ref: innerRef, icon: react_1.default.createElement(react_core_1.Icon, { size: "xl", isInline: true },
-                react_1.default.createElement(bars_icon_1.default, null)) }))));
+const ChatbotHeaderMenuBase = (_a) => {
+    var { className, onMenuToggle, tooltipProps, menuAriaLabel = 'Toggle menu', innerRef, tooltipContent = 'Menu', isCompact } = _a, props = __rest(_a, ["className", "onMenuToggle", "tooltipProps", "menuAriaLabel", "innerRef", "tooltipContent", "isCompact"]);
+    return (react_1.default.createElement("div", { className: `pf-chatbot__menu ${className}` },
+        react_1.default.createElement(react_core_1.Tooltip, Object.assign({ content: tooltipContent, position: "bottom", 
+            // 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--toggle-menu ${isCompact ? 'pf-m-compact' : ''}`, variant: "plain", onClick: onMenuToggle, "aria-label": menuAriaLabel, ref: innerRef, icon: react_1.default.createElement(react_core_1.Icon, { size: isCompact ? 'lg' : 'xl', isInline: true },
+                    react_1.default.createElement(bars_icon_1.default, null)), size: isCompact ? 'sm' : undefined }, props)))));
+};
 exports.ChatbotHeaderMenu = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(ChatbotHeaderMenuBase, Object.assign({ innerRef: ref }, props))));

package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.test.d.ts

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

package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.test.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@testing-library/react");
 const ChatbotHeaderMenu_1 = require("./ChatbotHeaderMenu");
+require("@testing-library/jest-dom");
 describe('ChatbotHeaderMenu', () => {
     it('should render ChatbotHeaderMenu with custom class', () => {
         const { container } = (0, react_2.render)(react_1.default.createElement(ChatbotHeaderMenu_1.ChatbotHeaderMenu, { className: "custom-header-menu", onMenuToggle: jest.fn() }));
@@ -17,4 +18,8 @@ describe('ChatbotHeaderMenu', () => {
         react_2.fireEvent.click(react_2.screen.getByRole('button', { name: 'Toggle menu' }));
         expect(onMenuToggle).toHaveBeenCalled();
     });
+    it('should handle isCompact', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotHeaderMenu_1.ChatbotHeaderMenu, { className: "custom-header-menu", onMenuToggle: jest.fn(), isCompact: true, "data-testid": "button" }));
+        expect(react_2.screen.getByTestId('button')).toHaveClass('pf-m-compact');
+    });
 });

package/dist/cjs/ChatbotHeader/ChatbotHeaderOptionsDropdown.d.ts

@@ -9,6 +9,7 @@ export interface ChatbotHeaderOptionsDropdownProps extends Omit<DropdownProps, '
     tooltipProps?: TooltipProps;
     /** Aria label for menu toggle */
     menuToggleAriaLabel?: string;
+    isCompact?: boolean;
 }
 export declare const ChatbotHeaderOptionsDropdown: React.FunctionComponent<ChatbotHeaderOptionsDropdownProps>;
 export default ChatbotHeaderOptionsDropdown;

package/dist/cjs/ChatbotHeader/ChatbotHeaderOptionsDropdown.js

@@ -19,13 +19,13 @@ const react_1 = __importDefault(require("react"));
 const react_core_1 = require("@patternfly/react-core");
 const ellipsis_v_icon_1 = __importDefault(require("@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon"));
 const ChatbotHeaderOptionsDropdown = (_a) => {
-    var { className, children, onSelect, tooltipProps, menuToggleAriaLabel = 'Chatbot options' } = _a, props = __rest(_a, ["className", "children", "onSelect", "tooltipProps", "menuToggleAriaLabel"]);
+    var { className, children, onSelect, tooltipProps, menuToggleAriaLabel = 'Chatbot options', isCompact } = _a, props = __rest(_a, ["className", "children", "onSelect", "tooltipProps", "menuToggleAriaLabel", "isCompact"]);
     const [isOptionsMenuOpen, setIsOptionsMenuOpen] = react_1.default.useState(false);
     const toggle = (toggleRef) => (react_1.default.createElement(react_core_1.Tooltip, Object.assign({ className: "pf-chatbot__tooltip", content: "Chatbot options", position: "bottom", 
         // prevents VO announcements of both aria label and tooltip
         aria: "none" }, tooltipProps),
-        react_1.default.createElement(react_core_1.MenuToggle, { className: "pf-chatbot__button--toggle-options", variant: "plain", "aria-label": menuToggleAriaLabel, ref: toggleRef, icon: react_1.default.createElement(react_core_1.Icon, { iconSize: "xl", isInline: true },
-                react_1.default.createElement(ellipsis_v_icon_1.default, null)), isExpanded: isOptionsMenuOpen, onClick: () => setIsOptionsMenuOpen(!isOptionsMenuOpen) })));
+        react_1.default.createElement(react_core_1.MenuToggle, { className: `pf-chatbot__button--toggle-options ${isCompact ? 'pf-m-compact' : ''}`, variant: "plain", "aria-label": menuToggleAriaLabel, ref: toggleRef, icon: react_1.default.createElement(react_core_1.Icon, { size: isCompact ? 'lg' : 'xl', isInline: true },
+                react_1.default.createElement(ellipsis_v_icon_1.default, null)), isExpanded: isOptionsMenuOpen, onClick: () => setIsOptionsMenuOpen(!isOptionsMenuOpen), size: isCompact ? 'sm' : undefined })));
     return (react_1.default.createElement(react_core_1.Dropdown, Object.assign({ className: `pf-chatbot__options ${className !== null && className !== void 0 ? className : ''}`, isOpen: isOptionsMenuOpen, onSelect: (e, value) => {
             onSelect && onSelect(e, value);
             setIsOptionsMenuOpen(false);

package/dist/cjs/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.d.ts

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

package/dist/cjs/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.js

@@ -16,6 +16,7 @@ const react_1 = __importDefault(require("react"));
 const react_core_1 = require("@patternfly/react-core");
 const react_2 = require("@testing-library/react");
 const ChatbotHeaderOptionsDropdown_1 = require("./ChatbotHeaderOptionsDropdown");
+require("@testing-library/jest-dom");
 describe('ChatbotHeaderOptionsDropdown', () => {
     const dropdownItems = (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(react_core_1.DropdownItem, null, "Option 1"),
@@ -40,4 +41,8 @@ describe('ChatbotHeaderOptionsDropdown', () => {
             expect(onSelect).toHaveBeenCalled();
         });
     }));
+    it('should handle isCompact', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotHeaderOptionsDropdown_1.ChatbotHeaderOptionsDropdown, { isCompact: true }, dropdownItems));
+        expect(react_2.screen.getByRole('button', { name: 'Chatbot options' })).toHaveClass('pf-m-compact');
+    });
 });

package/dist/cjs/ChatbotHeader/ChatbotHeaderSelectorDropdown.d.ts

@@ -13,6 +13,7 @@ export interface ChatbotHeaderSelectorDropdownProps extends Omit<DropdownProps,
     menuToggleAriaLabel?: string;
     /** Text displayed in Tooltip wrapping the display mode dropdown */
     tooltipContent?: string;
+    isCompact?: boolean;
 }
 export declare const ChatbotHeaderSelectorDropdown: React.FunctionComponent<ChatbotHeaderSelectorDropdownProps>;
 export default ChatbotHeaderSelectorDropdown;

package/dist/cjs/ChatbotHeader/ChatbotHeaderSelectorDropdown.js

@@ -18,13 +18,13 @@ exports.ChatbotHeaderSelectorDropdown = void 0;
 const react_1 = __importDefault(require("react"));
 const react_core_1 = require("@patternfly/react-core");
 const ChatbotHeaderSelectorDropdown = (_a) => {
-    var { value, className, children, onSelect, tooltipProps, tooltipContent = 'Select model', menuToggleAriaLabel } = _a, props = __rest(_a, ["value", "className", "children", "onSelect", "tooltipProps", "tooltipContent", "menuToggleAriaLabel"]);
+    var { value, className, children, onSelect, tooltipProps, tooltipContent = 'Select model', menuToggleAriaLabel, isCompact } = _a, props = __rest(_a, ["value", "className", "children", "onSelect", "tooltipProps", "tooltipContent", "menuToggleAriaLabel", "isCompact"]);
     const [isOptionsMenuOpen, setIsOptionsMenuOpen] = react_1.default.useState(false);
     const [defaultAriaLabel, setDefaultAriaLabel] = react_1.default.useState('Select model');
     const toggle = (toggleRef) => (react_1.default.createElement(react_core_1.Tooltip, Object.assign({ className: "pf-chatbot__tooltip", content: tooltipContent, position: "bottom", 
         // prevents VO announcements of both aria label and tooltip
         aria: "none" }, tooltipProps),
-        react_1.default.createElement(react_core_1.MenuToggle, { variant: "secondary", "aria-label": menuToggleAriaLabel !== null && menuToggleAriaLabel !== void 0 ? menuToggleAriaLabel : defaultAriaLabel, ref: toggleRef, isExpanded: isOptionsMenuOpen, onClick: () => setIsOptionsMenuOpen(!isOptionsMenuOpen) }, value)));
+        react_1.default.createElement(react_core_1.MenuToggle, { variant: "secondary", "aria-label": menuToggleAriaLabel !== null && menuToggleAriaLabel !== void 0 ? menuToggleAriaLabel : defaultAriaLabel, ref: toggleRef, isExpanded: isOptionsMenuOpen, onClick: () => setIsOptionsMenuOpen(!isOptionsMenuOpen), size: isCompact ? 'sm' : undefined, className: `${isCompact ? 'pf-m-compact' : ''}` }, value)));
     return (react_1.default.createElement(react_core_1.Dropdown, Object.assign({ className: `pf-chatbot__selections ${className !== null && className !== void 0 ? className : ''}`, isOpen: isOptionsMenuOpen, onSelect: (e, value) => {
             onSelect && onSelect(e, value);
             setDefaultAriaLabel(`Select model: ${value}`);

package/dist/cjs/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.d.ts

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

package/dist/cjs/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.js

@@ -16,6 +16,7 @@ const react_1 = __importDefault(require("react"));
 const react_core_1 = require("@patternfly/react-core");
 const react_2 = require("@testing-library/react");
 const ChatbotHeaderSelectorDropdown_1 = require("./ChatbotHeaderSelectorDropdown");
+require("@testing-library/jest-dom");
 describe('ChatbotHeaderSelectorDropdown', () => {
     const dropdownItems = (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(react_core_1.DropdownItem, null, "Option 1"),
@@ -38,4 +39,8 @@ describe('ChatbotHeaderSelectorDropdown', () => {
             expect(onSelect).toHaveBeenCalled();
         });
     }));
+    it('should handle isCompact', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotHeaderSelectorDropdown_1.ChatbotHeaderSelectorDropdown, { value: "Option 1", isCompact: true }, dropdownItems));
+        expect(react_2.screen.getByRole('button', { name: /Select model/i })).toHaveClass('pf-m-compact');
+    });
 });

package/dist/cjs/ChatbotPopover/ChatbotPopover.js

@@ -23,7 +23,7 @@ const react_1 = __importDefault(require("react"));
 const react_core_1 = require("@patternfly/react-core");
 const ChatbotPopover = (_a) => {
     var { children, className } = _a, props = __rest(_a, ["children", "className"]);
-    return (react_1.default.createElement(react_core_1.Popover, Object.assign({ className: `pf-chatbot__popover ${className !== null && className !== void 0 ? className : ''}`, showClose: false }, props), children));
+    return (react_1.default.createElement(react_core_1.Popover, Object.assign({ className: `pf-chatbot__popover  ${className !== null && className !== void 0 ? className : ''}`, showClose: false }, props), children));
 };
 exports.ChatbotPopover = ChatbotPopover;
 exports.default = exports.ChatbotPopover;

package/dist/cjs/ChatbotWelcomePrompt/ChatbotWelcomePrompt.d.ts

@@ -10,6 +10,7 @@ export interface ChatbotWelcomePromptProps extends React.HTMLProps<HTMLDivElemen
     className?: string;
     /** Custom test id for the WelcomePrompt component */
     testId?: string;
+    isCompact?: boolean;
 }
 export interface WelcomePrompt {
     /** Message for the welcome prompt */

package/dist/cjs/ChatbotWelcomePrompt/ChatbotWelcomePrompt.js

@@ -21,13 +21,13 @@ exports.ChatbotWelcomePrompt = void 0;
 const react_1 = __importDefault(require("react"));
 const react_core_1 = require("@patternfly/react-core");
 const ChatbotWelcomePrompt = (_a) => {
-    var { title, description, prompts, className, testId } = _a, props = __rest(_a, ["title", "description", "prompts", "className", "testId"]);
-    return (react_1.default.createElement("div", Object.assign({ "data-testid": testId, className: `pf-chatbot--layout--welcome ${className !== null && className !== void 0 ? className : ''}` }, props),
+    var { title, description, prompts, className, testId, isCompact = false } = _a, props = __rest(_a, ["title", "description", "prompts", "className", "testId", "isCompact"]);
+    return (react_1.default.createElement("div", Object.assign({ "data-testid": testId, className: `pf-chatbot--layout--welcome ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}` }, props),
         react_1.default.createElement(react_core_1.Content, { component: react_core_1.ContentVariants.h1 },
             react_1.default.createElement("span", { className: "pf-chatbot__hello" }, title),
             react_1.default.createElement("br", null),
             react_1.default.createElement("span", { className: "pf-chatbot__question" }, description)),
-        prompts && (react_1.default.createElement("div", { className: "pf-chatbot__prompt-suggestions" }, prompts === null || prompts === void 0 ? void 0 : prompts.map((prompt, index) => (react_1.default.createElement(react_core_1.Card, { key: `welcome-prompt-${index}`, className: "pf-chatbot__prompt-suggestion", isClickable: true },
+        prompts && (react_1.default.createElement("div", { className: "pf-chatbot__prompt-suggestions" }, prompts === null || prompts === void 0 ? void 0 : prompts.map((prompt, index) => (react_1.default.createElement(react_core_1.Card, { key: `welcome-prompt-${index}`, className: "pf-chatbot__prompt-suggestion", isClickable: true, isCompact: isCompact },
             react_1.default.createElement(react_core_1.CardHeader, { selectableActions: {
                     onClickAction: prompt.onClick,
                     selectableActionId: `welcome-prompt-input-${index}`,

package/dist/cjs/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.js

@@ -54,4 +54,8 @@ describe('ChatbotWelcomePrompt', () => {
         const element = react_2.screen.getByTestId('welcome-prompt');
         expect(element).toHaveClass('test');
     });
+    it('should handle isCompact', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotWelcomePrompt_1.default, { title: "Hi, ChatBot User!", description: "How can I help you today?", className: "test", testId: "welcome-prompt", isCompact: true }));
+        expect(react_2.screen.getByTestId('welcome-prompt')).toHaveClass('pf-m-compact');
+    });
 });

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

@@ -17,5 +17,6 @@ export interface AttachButtonProps extends ButtonProps {
     tooltipContent?: string;
     /** Test id applied to input */
     inputTestId?: string;
+    isCompact?: boolean;
 }
 export declare const AttachButton: React.ForwardRefExoticComponent<AttachButtonProps & React.RefAttributes<any>>;

package/dist/cjs/MessageBar/AttachButton.js

@@ -24,7 +24,7 @@ const react_core_1 = require("@patternfly/react-core");
 const react_dropzone_1 = require("react-dropzone");
 const paperclip_icon_1 = require("@patternfly/react-icons/dist/esm/icons/paperclip-icon");
 const AttachButtonBase = (_a) => {
-    var { onAttachAccepted, onClick, isDisabled, className, tooltipProps, innerRef, tooltipContent = 'Attach', inputTestId } = _a, props = __rest(_a, ["onAttachAccepted", "onClick", "isDisabled", "className", "tooltipProps", "innerRef", "tooltipContent", "inputTestId"]);
+    var { onAttachAccepted, onClick, isDisabled, className, tooltipProps, innerRef, tooltipContent = 'Attach', inputTestId, isCompact } = _a, props = __rest(_a, ["onAttachAccepted", "onClick", "isDisabled", "className", "tooltipProps", "innerRef", "tooltipContent", "inputTestId", "isCompact"]);
     const { open, getInputProps } = (0, react_dropzone_1.useDropzone)({
         multiple: true,
         onDropAccepted: onAttachAccepted
@@ -34,7 +34,7 @@ const AttachButtonBase = (_a) => {
         react_1.default.createElement(react_core_1.Tooltip, Object.assign({ id: "pf-chatbot__tooltip--attach", content: tooltipContent, 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", ref: innerRef, className: `pf-chatbot__button--attach ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || 'Attach button', isDisabled: isDisabled, onClick: onClick !== null && onClick !== void 0 ? onClick : open, icon: react_1.default.createElement(react_core_1.Icon, { iconSize: "xl", isInline: true },
-                    react_1.default.createElement(paperclip_icon_1.PaperclipIcon, null)) }, props)))));
+            react_1.default.createElement(react_core_1.Button, Object.assign({ variant: "plain", ref: innerRef, className: `pf-chatbot__button--attach ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || 'Attach button', isDisabled: isDisabled, onClick: onClick !== null && onClick !== void 0 ? onClick : open, icon: react_1.default.createElement(react_core_1.Icon, { iconSize: isCompact ? 'lg' : 'xl', isInline: true },
+                    react_1.default.createElement(paperclip_icon_1.PaperclipIcon, null)), size: isCompact ? 'sm' : undefined }, props)))));
 };
 exports.AttachButton = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(AttachButtonBase, Object.assign({ innerRef: ref }, props))));

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

@@ -63,4 +63,8 @@ describe('Attach button', () => {
         expect(input.files).toHaveLength(1);
         expect(spy).toHaveBeenCalledTimes(1);
     }));
+    it('should handle isCompact', () => {
+        (0, react_2.render)(react_1.default.createElement(AttachButton_1.AttachButton, { isCompact: true, "data-testid": "button" }));
+        expect(react_2.screen.getByTestId('button')).toHaveClass('pf-m-compact');
+    });
 });

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

@@ -78,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, placeholder = 'Send a message...', hasAttachButton = true, hasMicrophoneButton, listeningText = 'Listening', handleAttach, attachMenuProps, isSendButtonDisabled, handleStopButton, hasStopButton, buttonProps, onChange, displayMode, value } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "placeholder", "hasAttachButton", "hasMicrophoneButton", "listeningText", "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,16 +177,16 @@ 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("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) {

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();
@@ -69,8 +69,8 @@ const MicrophoneButton = (_a) => {
         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');
+    });
 });