@xapp/chat-widget 1.77.0 → 1.78.1

package/dist/index.es.js

@@ -679,6 +679,12 @@ var CtaBubble = function (props) {
     var _e = useDimensions(), ref = _e[0], rect = _e[1];
     var animate = props.animate || false;
     var animation = animate && props.buttonAnimation === "bounce" ? "bounce" : "none";
+    var handleDismiss = function (e) {
+        e.stopPropagation();
+        if (props.onDismiss) {
+            props.onDismiss();
+        }
+    };
     return (React$1.createElement("div", { ref: ref, style: {
             border: props.borderStyle ? 'solid' : 'none',
             borderWidth: ((_a = props.borderStyle) === null || _a === void 0 ? void 0 : _a.width) || '0px',
@@ -686,11 +692,14 @@ var CtaBubble = function (props) {
             animation: "".concat(animation, " 1s infinite"),
         }, className: "cta-bubble", onClick: props.onClick },
         React$1.createElement(CtaBubbleTail, { width: (_c = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _c !== void 0 ? _c : 0, height: (_d = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _d !== void 0 ? _d : 0, direction: 60, angle: 45, length: 16 }),
-        React$1.createElement("div", { className: "cta-bubble__content" }, props.children)));
+        React$1.createElement("div", { className: "cta-bubble__content" }, props.children),
+        props.dismissible && (React$1.createElement("button", { className: "cta-bubble__dismiss", onClick: handleDismiss, "aria-label": "Dismiss" },
+            React$1.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                React$1.createElement("path", { d: "M11 1L1 11M1 1L11 11", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }))))));
 };
 
 var CtaBubbleContainer = function (props) {
-    var visible = props.visible, timeout = props.timeout, delay = props.delay, animate = props.animate, buttonAnimation = props.buttonAnimation, onClick = props.onClick, children = props.children;
+    var visible = props.visible, timeout = props.timeout, delay = props.delay, animate = props.animate, buttonAnimation = props.buttonAnimation, dismissible = props.dismissible, onClick = props.onClick, onDismiss = props.onDismiss, children = props.children;
     var startTime = useMemo(function () {
         return visible ? new Date().valueOf() : undefined;
     }, [visible]);
@@ -727,7 +736,13 @@ var CtaBubbleContainer = function (props) {
             isMounted.current = false;
         };
     }, [startTime, timeout, delay]);
-    return (React$1.createElement(React$1.Fragment, null, visible && showBubble && React$1.createElement(CtaBubble, { onClick: onClick, animate: animate, buttonAnimation: buttonAnimation }, children)));
+    var handleDismiss = function () {
+        setShowBubble(false);
+        if (onDismiss) {
+            onDismiss();
+        }
+    };
+    return (React$1.createElement(React$1.Fragment, null, visible && showBubble && (React$1.createElement(CtaBubble, { onClick: onClick, animate: animate, buttonAnimation: buttonAnimation, dismissible: dismissible, onDismiss: handleDismiss }, children))));
 };
 
 var ChatButton = function (_a) {
@@ -748,9 +763,12 @@ var ChatButton = function (_a) {
     };
     var configToApply = getConfigToApply();
     useEffect(function () {
+        var _a;
         var delayTimer;
         var timeoutTimer;
-        if (configToApply === null || configToApply === void 0 ? void 0 : configToApply.delay) {
+        // Use animationDelay if provided, otherwise fall back to delay for backwards compatibility
+        var animationDelayToUse = (_a = configToApply === null || configToApply === void 0 ? void 0 : configToApply.animationDelay) !== null && _a !== void 0 ? _a : configToApply === null || configToApply === void 0 ? void 0 : configToApply.delay;
+        if (animationDelayToUse) {
             // Set a delay for the animation to start
             delayTimer = setTimeout(function () {
                 setAnimate(true);
@@ -760,7 +778,7 @@ var ChatButton = function (_a) {
                         setAnimate(false);
                     }, configToApply.animationTimeout);
                 }
-            }, configToApply.delay);
+            }, animationDelayToUse);
         }
         else if (configToApply === null || configToApply === void 0 ? void 0 : configToApply.animationTimeout) {
             // Start animation immediately and set a timeout to stop it
@@ -781,18 +799,19 @@ var ChatButton = function (_a) {
                 clearTimeout(timeoutTimer);
         };
     }, [configToApply, setAnimate]);
-    var animation = animate ? ((configToApply === null || configToApply === void 0 ? void 0 : configToApply.animation) || "wiggle") : "none";
+    var animation = animate ? (configToApply === null || configToApply === void 0 ? void 0 : configToApply.animation) || "wiggle" : "none";
     useEffect(function () {
         var handleResize = function () {
             var screenWidth = window.innerWidth;
-            var newButtonWidth = screenWidth < (parseInt(mobileWidth, 10))
-                ? defaultMobileWidgetButtonWidth : defaultWidgetButtonWidth;
+            var newButtonWidth = screenWidth < parseInt(mobileWidth, 10)
+                ? defaultMobileWidgetButtonWidth
+                : defaultWidgetButtonWidth;
             setButtonWidth(newButtonWidth);
         };
         handleResize();
-        window.addEventListener('resize', handleResize);
+        window.addEventListener("resize", handleResize);
         return function () {
-            window.removeEventListener('resize', handleResize);
+            window.removeEventListener("resize", handleResize);
         };
     }, [mobileWidth]);
     var maxSvgSize = 22;
@@ -802,18 +821,18 @@ var ChatButton = function (_a) {
                 width: "".concat(buttonWidth, "px"),
                 height: "".concat(buttonWidth, "px"),
                 borderRadius: "".concat(+buttonWidth / 2, "px"),
-                border: borderStyle && borderStyle.width ? 'solid' : 'none',
-                borderWidth: (borderStyle === null || borderStyle === void 0 ? void 0 : borderStyle.width) || '0px',
-                borderColor: (borderStyle === null || borderStyle === void 0 ? void 0 : borderStyle.color) || 'transparent',
+                border: borderStyle && borderStyle.width ? "solid" : "none",
+                borderWidth: (borderStyle === null || borderStyle === void 0 ? void 0 : borderStyle.width) || "0px",
+                borderColor: (borderStyle === null || borderStyle === void 0 ? void 0 : borderStyle.color) || "transparent",
                 animation: "".concat(animation, " 1s infinite"),
             } }, imageUrl ? (
         // Display image from URL
-        React$1.createElement("img", { src: imageUrl, alt: "Chat Icon", width: "22", height: "22" })) : (
+        React$1.createElement("img", { src: imageUrl, alt: "Chat Icon" })) : (
         // Fallback to default SVG
         React$1.createElement("svg", { width: svgSize, height: svgSize, viewBox: "0 0 22 22" },
             React$1.createElement("path", { d: "M13 22l-4-6H2c-1.11-.043-2-.935-2-2V2C0 .89.89 0 2 0h18c1.11 0 2 .892 2 2v12c0 1.067-.89 1.957-2 2h-3l-4 6zm3-8h4c-.005.3-.01-12 0-12-.01.004-18 .006-18 0 .005.006 0 12 0 12h8l3 5 3-5z", fill: "#FFF", fillRule: "evenodd" })))),
         configToApply && configToApply.message && (React$1.createElement("div", { className: "xapp-chat-button__cta" },
-            React$1.createElement(CtaBubbleContainer, { timeout: configToApply === null || configToApply === void 0 ? void 0 : configToApply.timeout, delay: configToApply === null || configToApply === void 0 ? void 0 : configToApply.delay, animate: animate, buttonAnimation: animation, visible: !visible /** Why is this !visible */ }, configToApply === null || configToApply === void 0 ? void 0 : configToApply.message)))));
+            React$1.createElement(CtaBubbleContainer, { timeout: configToApply === null || configToApply === void 0 ? void 0 : configToApply.timeout, delay: configToApply === null || configToApply === void 0 ? void 0 : configToApply.delay, animate: animate, buttonAnimation: animation, dismissible: configToApply === null || configToApply === void 0 ? void 0 : configToApply.dismissible, visible: !visible /** Why is this !visible */ }, configToApply === null || configToApply === void 0 ? void 0 : configToApply.message)))));
 };
 
 var ChatCard = function (props) {
@@ -7703,6 +7722,11 @@ var ChatChipsContainer = function (_) {
         React$1.createElement(ChatChips, { options: chips, onOptionClick: optionOnChange })));
 };
 
+var ButtonGroup = function (_a) {
+    var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b;
+    return (React$1.createElement("div", { className: "button-group ".concat(className) }, children));
+};
+
 var CancelButton = function (props) {
     return (React$1.createElement("div", { id: "xapp-widget-close", "aria-label": "close widget", "aria-hidden": false, tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, className: "cancel-button", onClick: props.onClick }));
 };
@@ -7842,6 +7866,10 @@ var DrawerBars = function (props) {
     return (React$1.createElement("button", { className: "drawer-bars", tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, "aria-label": "open menu", "aria-hidden": false, onClick: props.onToggle }, getBars()));
 };
 
+var MenuButton = function (props) {
+    return (React$1.createElement("div", { id: "xapp-widget-menu", "aria-label": "open menu", "aria-hidden": false, tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, className: "menu-button", onClick: props.onClick }));
+};
+
 var MinimizeButton = function (props) {
     return (React$1.createElement("div", { id: "xapp-widget-minimize", "aria-label": "minimize widget", "aria-hidden": false, tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, className: "minimize-button ".concat(props.showInRight ? "positionRight" : ""), onClick: props.onClick }));
 };
@@ -7878,16 +7906,19 @@ var ChatHeader = function (props) {
     var menuConfig = props.menuConfig, onSubmit = props.onSubmit;
     var _s = useState(false), drawerOpen = _s[0], setDrawerState = _s[1]; // false initially
     var menuPosition = (menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.menuButtonLocation) || "FOOTER";
-    var showMenu = menuPosition === "HEADER_LEFT";
-    var menuItemsRaw = menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.items; // useWidgetEnv()?.menu?.items;
-    var menuItemsTabIndex = menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.itemsTabIndex; // useWidgetEnv()?.menu?.itemsTabIndex;
-    var menuButtonTabIndex = (_a = menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.button) === null || _a === void 0 ? void 0 : _a.tabIndex; // useWidgetEnv()?.menu?.button?.tabIndex;
-    var menuItems = useMemo(function () { return menuItemsRaw ? menuItemsRaw : []; }, [menuItemsRaw]);
+    var showMenuLeft = menuPosition === "HEADER_LEFT";
+    var showMenuRight = menuPosition === "HEADER_RIGHT";
+    var menuItemsRaw = menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.items;
+    var menuItemsTabIndex = menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.itemsTabIndex;
+    var menuButtonTabIndex = (_a = menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.button) === null || _a === void 0 ? void 0 : _a.tabIndex;
+    var menuItems = useMemo(function () { return (menuItemsRaw ? menuItemsRaw : []); }, [menuItemsRaw]);
+    // Check if we have a right-side menu
+    var hasRightMenu = showMenuRight && menuItems.length > 0;
     function toggleDrawer() {
         var newDrawer = !drawerOpen;
         setDrawerState(newDrawer);
         innerDispatch(setVisualStatus({
-            drawer: newDrawer
+            drawer: newDrawer,
         }));
     }
     function handleMenuItem(label) {
@@ -7907,20 +7938,27 @@ var ChatHeader = function (props) {
     }
     return (React$1.createElement(React$1.Fragment, null,
         React$1.createElement("div", { className: "status-container background-header", "aria-label": ariaLabel, "aria-hidden": false },
-            showMenu && menuItems.length ? (React$1.createElement(React$1.Fragment, null,
+            showMenuLeft && menuItems.length ? (React$1.createElement(React$1.Fragment, null,
                 React$1.createElement("div", { className: "chat-footer__menu-icon" },
-                    React$1.createElement(DrawerBars, { bars: 3, tabIndex: menuButtonTabIndex, onToggle: toggleDrawer })))) : React$1.createElement(React$1.Fragment, null),
-            ((_b = props === null || props === void 0 ? void 0 : props.agent) === null || _b === void 0 ? void 0 : _b.avatarPath) === undefined ? React$1.createElement("div", null) :
-                React$1.createElement("div", { className: "status-container__avatar" },
-                    React$1.createElement(Avatar, { entity: props.agent })),
-            React$1.createElement("div", { className: "\n                        ".concat("status-text", "\n                        ").concat(((_c = props === null || props === void 0 ? void 0 : props.agent) === null || _c === void 0 ? void 0 : _c.avatarPath) === undefined ? "status-text-positionLeftNoAvatar" : "status-text-positionLeft", "\n                        ").concat(((_d = props.config) === null || _d === void 0 ? void 0 : _d.alignTextCenter) ? "status-text-positionCenter" : "status-text-positionLeft", "                     \n                        ") },
+                    React$1.createElement(DrawerBars, { bars: 3, tabIndex: menuButtonTabIndex, onToggle: toggleDrawer })))) : (React$1.createElement(React$1.Fragment, null)),
+            ((_b = props === null || props === void 0 ? void 0 : props.agent) === null || _b === void 0 ? void 0 : _b.avatarPath) === undefined ? (React$1.createElement("div", null)) : (React$1.createElement("div", { className: "status-container__avatar" },
+                React$1.createElement(Avatar, { entity: props.agent }))),
+            React$1.createElement("div", { className: "\n                        ".concat("status-text", "\n                        ").concat(showMenuLeft && menuItems.length
+                    ? "status-text-positionWithMenu"
+                    : ((_c = props === null || props === void 0 ? void 0 : props.agent) === null || _c === void 0 ? void 0 : _c.avatarPath) === undefined
+                        ? "status-text-positionLeftNoAvatar"
+                        : "status-text-positionLeft", "\n                        ").concat(((_d = props.config) === null || _d === void 0 ? void 0 : _d.alignTextCenter)
+                    ? "status-text-positionCenter"
+                    : "", "                     \n                        ") },
                 React$1.createElement("span", { className: "status-text-title" }, getStatusText(props.accountStatus, (_e = props.config) === null || _e === void 0 ? void 0 : _e.status)),
                 ((_g = (_f = props.config) === null || _f === void 0 ? void 0 : _f.subtitle) === null || _g === void 0 ? void 0 : _g.enabled) && (React$1.createElement("span", { className: "status-text-subtitle" }, (_k = (_j = (_h = props.config) === null || _h === void 0 ? void 0 : _h.subtitle) === null || _j === void 0 ? void 0 : _j.text) !== null && _k !== void 0 ? _k : ""))),
-            props.canRefresh && (React$1.createElement(RefreshButton, { onClick: props.refreshOnClick, tabIndex: (_m = (_l = props.config) === null || _l === void 0 ? void 0 : _l.actions) === null || _m === void 0 ? void 0 : _m.refreshTabIndex, showInLeft: props.canMinimize && props.canCancel, showInRight: !props.canMinimize && !props.canCancel })),
-            props.canMinimize && (React$1.createElement(MinimizeButton, { onClick: props.minimizeOnClick, tabIndex: (_p = (_o = props.config) === null || _o === void 0 ? void 0 : _o.actions) === null || _p === void 0 ? void 0 : _p.minimizeTabIndex, showInRight: !props.canCancel })),
-            props.canCancel && (React$1.createElement(CancelButton, { onClick: props.cancelOnClick, tabIndex: (_r = (_q = props.config) === null || _q === void 0 ? void 0 : _q.actions) === null || _r === void 0 ? void 0 : _r.cancelTabIndex }))),
+            React$1.createElement(ButtonGroup, null,
+                hasRightMenu && (React$1.createElement(MenuButton, { onClick: toggleDrawer, tabIndex: menuButtonTabIndex })),
+                props.canRefresh && (React$1.createElement(RefreshButton, { onClick: props.refreshOnClick, tabIndex: (_m = (_l = props.config) === null || _l === void 0 ? void 0 : _l.actions) === null || _m === void 0 ? void 0 : _m.refreshTabIndex, showInLeft: false, showInRight: false })),
+                props.canMinimize && (React$1.createElement(MinimizeButton, { onClick: props.minimizeOnClick, tabIndex: (_p = (_o = props.config) === null || _o === void 0 ? void 0 : _o.actions) === null || _p === void 0 ? void 0 : _p.minimizeTabIndex, showInRight: false })),
+                props.canCancel && (React$1.createElement(CancelButton, { onClick: props.cancelOnClick, tabIndex: (_r = (_q = props.config) === null || _q === void 0 ? void 0 : _q.actions) === null || _r === void 0 ? void 0 : _r.cancelTabIndex })))),
         drawerOpen ? (React$1.createElement("div", { className: "xa-chat-menu-container" },
-            React$1.createElement(ChatMenu, { openFrom: "left", opened: drawerOpen, tabIndex: menuItemsTabIndex, onItemClick: handleMenuItem, items: menuItems }))) : React$1.createElement(React$1.Fragment, null)));
+            React$1.createElement(ChatMenu, { openFrom: showMenuRight ? "right" : "left", opened: drawerOpen, tabIndex: menuItemsTabIndex, onItemClick: handleMenuItem, items: menuItems }))) : (React$1.createElement(React$1.Fragment, null))));
 };
 
 var UnknownMessage = function () { return React$1.createElement(React$1.Fragment, null); };
@@ -31088,7 +31126,7 @@ function buildStyleContent(theme) {
 function WidgetStylesheet(props) {
     var theme = props.theme;
     var stylesContent = buildStyleContent(theme);
-    return (React$1.createElement("style", null, stylesContent));
+    return React$1.createElement("style", null, stylesContent);
 }
 function buildVariables(gen) {
     var result = gen.next();
@@ -31160,16 +31198,14 @@ function single(key, value) {
         }
     });
 }
-function empty() {
-    return __generator$1(this, function (_a) {
-        return [2 /*return*/];
-    });
-}
+function empty() { return __generator$1(this, function (_a) {
+    return [2 /*return*/];
+}); }
 function getChatButtonStyle(style) {
     if (!style) {
         return empty();
     }
-    return withPrefix("chat-button-", union(getMargins(style.margin), getBackgroundStyle(style.background)));
+    return withPrefix("chat-button-", union(getMargins(style.margin), getBackgroundStyle(style.background), withPrefix("image-", getSize(style.imageSize)), getAnimationStyle(style.animation)));
 }
 function getMessagesStyle(style) {
     if (!style) {
@@ -31178,27 +31214,69 @@ function getMessagesStyle(style) {
     return union(withPrefix("mine-", getMessageStyle(style.mine)), withPrefix("others-", getMessageStyle(style.others)), getPaddings(style === null || style === void 0 ? void 0 : style.padding), single("max-width", style === null || style === void 0 ? void 0 : style.maxWidth));
 }
 function getMessageStyle(style) {
-    return union(single('bubble-color', style === null || style === void 0 ? void 0 : style.bubbleColor), getTextStyle(style === null || style === void 0 ? void 0 : style.text));
+    return union(single("bubble-color", style === null || style === void 0 ? void 0 : style.bubbleColor), getTextStyle(style === null || style === void 0 ? void 0 : style.text));
 }
 function getSize(style) {
     return __generator$1(this, function (_a) {
         switch (_a.label) {
-            case 0: return [4 /*yield*/, ['width', style === null || style === void 0 ? void 0 : style.width]];
+            case 0: return [4 /*yield*/, ["width", style === null || style === void 0 ? void 0 : style.width]];
             case 1:
                 _a.sent();
-                return [4 /*yield*/, ['height', style === null || style === void 0 ? void 0 : style.height]];
+                return [4 /*yield*/, ["height", style === null || style === void 0 ? void 0 : style.height]];
             case 2:
                 _a.sent();
                 return [2 /*return*/];
         }
     });
 }
+function getAnimationStyle(style) {
+    var primaryColor, secondaryColor, opacity, intenseBackground, lessIntenseBackground;
+    return __generator$1(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                if (!style) {
+                    return [2 /*return*/];
+                }
+                primaryColor = style.primaryColor || "0, 117, 170";
+                secondaryColor = style.secondaryColor || "110, 178, 209";
+                opacity = style.opacity || 0.75;
+                // Generate CSS variables that can be used by any animation type
+                return [4 /*yield*/, ["animation-primary-color", "".concat(primaryColor)]];
+            case 1:
+                // Generate CSS variables that can be used by any animation type
+                _a.sent();
+                return [4 /*yield*/, ["animation-secondary-color", "".concat(secondaryColor)]];
+            case 2:
+                _a.sent();
+                return [4 /*yield*/, ["animation-opacity", "".concat(opacity)]];
+            case 3:
+                _a.sent();
+                // Generate colors for box-shadow halo effects
+                return [4 /*yield*/, ["animation-primary-rgba", "rgba(".concat(primaryColor, ", ").concat(opacity, ")")]];
+            case 4:
+                // Generate colors for box-shadow halo effects
+                _a.sent();
+                return [4 /*yield*/, ["animation-secondary-rgba", "rgba(".concat(secondaryColor, ", ").concat(opacity, ")")]];
+            case 5:
+                _a.sent();
+                intenseBackground = "radial-gradient(40.83% 40.83% at 47.92% 52.5%, rgba(".concat(primaryColor, ", ").concat(opacity, ") 78.85%, rgba(").concat(secondaryColor, ", ").concat(opacity, ") 92.07%)");
+                lessIntenseBackground = "radial-gradient(40.83% 40.83% at 47.92% 52.5%, rgba(".concat(primaryColor, ", ").concat(opacity, ") 20.46%, rgba(").concat(secondaryColor, ", ").concat(opacity, ") 92.07%)");
+                return [4 /*yield*/, ["animation-pulse-intense", intenseBackground]];
+            case 6:
+                _a.sent();
+                return [4 /*yield*/, ["animation-pulse-less-intense", lessIntenseBackground]];
+            case 7:
+                _a.sent();
+                return [2 /*return*/];
+        }
+    });
+}
 function getZIndex(style) {
     return __generator$1(this, function (_a) {
         switch (_a.label) {
             case 0:
                 if (!style) return [3 /*break*/, 2];
-                return [4 /*yield*/, ['z-index', style]];
+                return [4 /*yield*/, ["z-index", style]];
             case 1:
                 _a.sent();
                 _a.label = 2;
@@ -31255,19 +31333,19 @@ function getTextStyle(style) {
         switch (_a.label) {
             case 0:
                 if (!style) return [3 /*break*/, 6];
-                return [4 /*yield*/, ['text-color', style.color]];
+                return [4 /*yield*/, ["text-color", style.color]];
             case 1:
                 _a.sent();
-                return [4 /*yield*/, ['font-size', style.fontSize]];
+                return [4 /*yield*/, ["font-size", style.fontSize]];
             case 2:
                 _a.sent();
-                return [4 /*yield*/, ['font-family', style.fontFamily]];
+                return [4 /*yield*/, ["font-family", style.fontFamily]];
             case 3:
                 _a.sent();
-                return [4 /*yield*/, ['font-weight', style.fontWeight]];
+                return [4 /*yield*/, ["font-weight", style.fontWeight]];
             case 4:
                 _a.sent();
-                return [4 /*yield*/, ['font-style', style.fontStyle]];
+                return [4 /*yield*/, ["font-style", style.fontStyle]];
             case 5:
                 _a.sent();
                 _a.label = 6;
@@ -31288,11 +31366,17 @@ function getBackgroundStyle(style) {
 function getButtonStyle(style) {
     return __generator$1(this, function (_a) {
         switch (_a.label) {
-            case 0: return [4 /*yield*/, ['button-color', style === null || style === void 0 ? void 0 : style.color]];
+            case 0: return [4 /*yield*/, ["button-color", style === null || style === void 0 ? void 0 : style.color]];
             case 1:
                 _a.sent();
-                return [4 /*yield*/, ['button-width', style === null || style === void 0 ? void 0 : style.width]];
+                return [4 /*yield*/, ["button-width", style === null || style === void 0 ? void 0 : style.width]];
             case 2:
+                _a.sent();
+                return [4 /*yield*/, ["button-bg", style === null || style === void 0 ? void 0 : style.background]];
+            case 3:
+                _a.sent();
+                return [4 /*yield*/, ["button-hover-bg", style === null || style === void 0 ? void 0 : style.hoverBackground]];
+            case 4:
                 _a.sent();
                 return [2 /*return*/];
         }
@@ -31309,13 +31393,13 @@ function getBorderStyle(style) {
         switch (_a.label) {
             case 0:
                 if (!style) return [3 /*break*/, 4];
-                return [4 /*yield*/, ['border-color', style.color]];
+                return [4 /*yield*/, ["border-color", style.color]];
             case 1:
                 _a.sent();
-                return [4 /*yield*/, ['border-width', style.width]];
+                return [4 /*yield*/, ["border-width", style.width]];
             case 2:
                 _a.sent();
-                return [4 /*yield*/, ['border-radius', style.radius]];
+                return [4 /*yield*/, ["border-radius", style.radius]];
             case 3:
                 _a.sent();
                 _a.label = 4;
@@ -31327,7 +31411,7 @@ function getHeaderStyle(style) {
     if (!style) {
         return empty();
     }
-    return union(getBackgroundStyle(style.background), getTextStyle(style.text), withPrefix("subtitle-", getTextStyle(style.subtitle)), getBorderStyle(style.border));
+    return union(getBackgroundStyle(style.background), getTextStyle(style.text), withPrefix("subtitle-", getTextStyle(style.subtitle)), getBorderStyle(style.border), getPaddings(style.padding), single("avatar-background", style.avatarBackground));
 }
 function getFooterStyle(style) {
     var _a;