colibri-ui 0.8.76 → 0.8.78

package/esm/Modal/Modal.module.css

@@ -6,19 +6,17 @@
   width: 100%;
   z-index: 1000;
 }
-
-.title-wrapper {
-  align-items: center;
-  border-bottom: var(--border-width-hairline) solid var(--component-modal-border);
-  display: flex;
-  justify-content: space-between;
-  padding: var(--space-4) var(--space-5);
+.root_contained {
+  left: 0;
+  position: absolute;
+  z-index: 2;
 }
 
 .close-wrapper {
   align-items: center;
   box-sizing: border-box;
   display: flex;
+  flex: none;
   justify-content: flex-end;
   min-height: var(--component-modal-close-min-height);
   padding: 0 var(--space-5);
@@ -32,6 +30,9 @@
   top: 0;
   width: 100%;
 }
+.root_contained .modal-overlay {
+  position: absolute;
+}
 
 .modal-wrapper {
   background-color: var(--component-modal-bg);
@@ -53,4 +54,10 @@
   max-height: calc(100vh - var(--component-modal-viewport-offset));
   max-width: calc(100vw - var(--component-modal-viewport-offset));
   min-width: var(--component-modal-desktop-min-width);
+}
+
+.modal-wrapper_contained.modal-wrapper_desktop {
+  max-height: calc(100% - var(--space-8));
+  max-width: calc(100% - var(--space-8));
+  min-width: 0;
 }

package/esm/Modal/components/Body/Body.module.css

@@ -0,0 +1,12 @@
+.root {
+  box-sizing: border-box;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+  overflow-y: auto;
+  padding: var(--space-4) var(--space-5);
+}
+.root_bleed {
+  padding: 0;
+}

package/esm/Modal/components/Body/index.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from "react";
+import type { BodyProps } from "./index.props";
+export declare const Body: FC<BodyProps>;

package/esm/Modal/components/Body/index.js

@@ -0,0 +1,18 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { __rest } from 'tslib';
+import React from 'react';
+import clsx from 'clsx';
+import styles from './Body.module.css';
+
+var Body = function Body(_a) {
+  var children = _a.children,
+    className = _a.className,
+    _a$bleed = _a.bleed,
+    bleed = _a$bleed === void 0 ? false : _a$bleed,
+    props = __rest(_a, ["children", "className", "bleed"]);
+  return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
+    className: clsx(styles.root, _defineProperty({}, styles.root_bleed, bleed), className)
+  }), children);
+};
+
+export { Body };

package/esm/Modal/components/Body/index.props.d.ts

@@ -0,0 +1 @@
+export type { ModalBodyProps as BodyProps } from "../../index.props";

package/esm/Modal/components/Close/index.js

@@ -1,16 +1,18 @@
 import React from 'react';
+import clsx from 'clsx';
 import 'tslib';
 import { Close as Close$1 } from '../../../Icons/Close.js';
 import styles from './Close.module.css';
 
 var Close = function Close(_ref) {
-  var onClick = _ref.onClick,
+  var className = _ref.className,
+    onClick = _ref.onClick,
     ariaLabel = _ref["aria-label"];
   return /*#__PURE__*/React.createElement("button", {
     type: "button",
     onClick: onClick,
     "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Close",
-    className: styles["close-button"]
+    className: clsx(styles["close-button"], className)
   }, /*#__PURE__*/React.createElement(Close$1, {
     width: 18,
     height: 18

package/esm/Modal/components/Close/index.props.d.ts

@@ -1,4 +1,5 @@
 export type CloseButtonProps = {
+    className?: string;
     onClick?: () => void;
     "aria-label"?: string;
 };

package/esm/Modal/components/Footer/Footer.module.css

@@ -0,0 +1,10 @@
+.root {
+  align-items: center;
+  border-top: var(--border-width-hairline) solid var(--component-modal-border);
+  box-sizing: border-box;
+  display: flex;
+  flex: none;
+  gap: var(--space-3);
+  justify-content: flex-end;
+  padding: var(--space-4) var(--space-5);
+}

package/esm/Modal/components/Footer/index.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from "react";
+import type { FooterProps } from "./index.props";
+export declare const Footer: FC<FooterProps>;

package/esm/Modal/components/Footer/index.js

@@ -0,0 +1,15 @@
+import { __rest } from 'tslib';
+import React from 'react';
+import clsx from 'clsx';
+import styles from './Footer.module.css';
+
+var Footer = function Footer(_a) {
+  var children = _a.children,
+    className = _a.className,
+    props = __rest(_a, ["children", "className"]);
+  return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
+    className: clsx(styles.root, className)
+  }), children);
+};
+
+export { Footer };

package/esm/Modal/components/Footer/index.props.d.ts

@@ -0,0 +1 @@
+export type { ModalFooterProps as FooterProps } from "../../index.props";

package/esm/Modal/components/Header/Header.module.css

@@ -0,0 +1,32 @@
+.root {
+  align-items: center;
+  border-bottom: var(--border-width-hairline) solid var(--component-modal-border);
+  box-sizing: border-box;
+  display: flex;
+  flex: none;
+  gap: var(--space-3);
+  padding: var(--space-4) var(--space-5);
+}
+.root_overlay {
+  align-items: flex-start;
+  background: transparent;
+  border-bottom: none;
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1;
+}
+.root_overlay > * {
+  pointer-events: auto;
+}
+
+.close {
+  margin-left: auto;
+}
+.root_overlay .close {
+  background-color: var(--component-modal-bg);
+  border-radius: var(--component-modal-radius);
+  box-shadow: var(--shadow-raised);
+}

package/esm/Modal/components/Header/index.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from "react";
+import type { HeaderProps } from "./index.props";
+export declare const Header: FC<HeaderProps>;

package/esm/Modal/components/Header/index.js

@@ -0,0 +1,28 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { __rest } from 'tslib';
+import React from 'react';
+import clsx from 'clsx';
+import { useModalContext } from '../../context.js';
+import { Close } from '../Close/index.js';
+import styles from './Header.module.css';
+
+var Header = function Header(_a) {
+  var children = _a.children,
+    className = _a.className,
+    _a$overlay = _a.overlay,
+    overlay = _a$overlay === void 0 ? false : _a$overlay,
+    _a$closeAriaLabel = _a.closeAriaLabel,
+    closeAriaLabel = _a$closeAriaLabel === void 0 ? "Close modal" : _a$closeAriaLabel,
+    props = __rest(_a, ["children", "className", "overlay", "closeAriaLabel"]);
+  var _useModalContext = useModalContext(),
+    onClose = _useModalContext.onClose;
+  return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
+    className: clsx(styles.root, _defineProperty({}, styles.root_overlay, overlay), className)
+  }), children, /*#__PURE__*/React.createElement(Close, {
+    className: styles.close,
+    onClick: onClose,
+    "aria-label": closeAriaLabel
+  }));
+};
+
+export { Header };

package/esm/Modal/components/Header/index.props.d.ts

@@ -0,0 +1 @@
+export type { ModalHeaderProps as HeaderProps } from "../../index.props";

package/esm/Modal/components/Title/index.js

@@ -1,16 +1,28 @@
-import React from 'react';
+import { __rest } from 'tslib';
+import React, { useEffect } from 'react';
+import clsx from 'clsx';
 import { Typography } from '../../../Typography/index.js';
+import { useModalContext } from '../../context.js';
 import styles from './Title.module.css';
 
-var Title = function Title(_ref) {
-  var children = _ref.children;
+var Title = function Title(_a) {
+  var children = _a.children,
+    className = _a.className,
+    props = __rest(_a, ["children", "className"]);
+  var _useModalContext = useModalContext(),
+    titleId = _useModalContext.titleId,
+    registerTitle = _useModalContext.registerTitle;
+  useEffect(function () {
+    return registerTitle();
+  }, [registerTitle]);
   return /*#__PURE__*/React.createElement(Typography, {
-    tag: "h3",
-    size: "h3",
+    tag: "h4",
+    size: "h4",
     className: styles.title
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.wrapper
-  }, children));
+  }, /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
+    id: titleId,
+    className: clsx(styles.wrapper, className)
+  }), children));
 };
 
 export { Title };

package/esm/Modal/components/Title/index.props.d.ts

@@ -1,2 +1 @@
-import type { PropsWithChildren } from "react";
-export type TitleProps = PropsWithChildren;
+export type { ModalTitleProps as TitleProps } from "../../index.props";

package/esm/Modal/context.d.ts

@@ -0,0 +1,9 @@
+type ModalContextValue = {
+    onClose: () => void;
+    titleId: string;
+    registerTitle: () => () => void;
+    container: HTMLDivElement | null;
+};
+export declare const ModalContext: import("react").Context<ModalContextValue | null>;
+export declare const useModalContext: () => ModalContextValue;
+export {};

package/esm/Modal/context.js

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+
+var ModalContext = /*#__PURE__*/createContext(null);
+var useModalContext = function useModalContext() {
+  var context = useContext(ModalContext);
+  if (!context) {
+    throw new Error("Modal compound components must be used inside <Modal>");
+  }
+  return context;
+};
+
+export { ModalContext, useModalContext };

package/esm/Modal/index.d.ts

@@ -1,3 +1,13 @@
-import type { FC, PropsWithChildren } from "react";
+import React from "react";
+import { Body } from "./components/Body";
+import { Footer } from "./components/Footer";
+import { Header } from "./components/Header";
+import { Title } from "./components/Title";
 import type { ModalProps } from "./index.props";
-export declare const Modal: FC<PropsWithChildren<ModalProps>>;
+export declare const Modal: React.FC<React.PropsWithChildren<ModalProps>> & {
+    Header: React.FC<import("./index.props").ModalHeaderProps>;
+    Title: React.FC<import("./index.props").ModalTitleProps>;
+    Body: React.FC<import("./index.props").ModalBodyProps>;
+    Footer: React.FC<import("./index.props").ModalFooterProps>;
+};
+export { Header as ModalHeader, Title as ModalTitle, Body as ModalBody, Footer as ModalFooter, };

package/esm/Modal/index.js

@@ -1,29 +1,81 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import React, { useRef, useCallback, useEffect } from 'react';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import React, { useRef, useState, useContext, useId, useCallback, useMemo, useEffect, Children, isValidElement } from 'react';
 import clsx from 'clsx';
 import { useScrollLock } from '../hooks/useScrollLock/index.js';
 import { useTrapFocus } from '../hooks/useTrapFocus/index.js';
 import { Portal } from '../Portal/index.js';
 import { useMediaSizes } from '../hooks/useMediaSizes/index.js';
-import { Content } from './components/Content/index.js';
+import { Body } from './components/Body/index.js';
 import { Close } from './components/Close/index.js';
+import { Content } from './components/Content/index.js';
+import { Footer } from './components/Footer/index.js';
+import { Header } from './components/Header/index.js';
 import { Title } from './components/Title/index.js';
+import { ModalContext } from './context.js';
+import { useModalStack } from './useModalStack.js';
 import styles from './Modal.module.css';
 
-var Modal = function Modal(_ref) {
+var compoundParts = [Header, Body, Footer];
+var isCompoundPart = function isCompoundPart(child) {
+  return /*#__PURE__*/isValidElement(child) && compoundParts.includes(child.type);
+};
+var hasHeader = function hasHeader(children) {
+  return Children.toArray(children).some(function (child) {
+    return /*#__PURE__*/isValidElement(child) && child.type === Header;
+  });
+};
+var ModalRoot = function ModalRoot(_ref) {
   var children = _ref.children,
     className = _ref.className,
     onClose = _ref.onClose,
-    title = _ref.title;
+    title = _ref.title,
+    _ref$withinParent = _ref.withinParent,
+    withinParent = _ref$withinParent === void 0 ? false : _ref$withinParent;
   var modalRef = useRef(null);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    container = _useState2[0],
+    setContainer = _useState2[1];
+  var parentModal = useContext(ModalContext);
+  var parentContainer = withinParent ? parentModal === null || parentModal === void 0 ? void 0 : parentModal.container : undefined;
+  var isContained = Boolean(parentContainer);
   var isDesktop = useMediaSizes(function (bp) {
-    return bp.up("md");
+    return bp.up("lg");
   });
+  var titleId = useId();
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    titleCount = _useState4[0],
+    setTitleCount = _useState4[1];
+  var isTopmost = useModalStack(titleId);
   useScrollLock();
-  useTrapFocus(modalRef);
+  useTrapFocus(modalRef, isTopmost);
   var handleClose = useCallback(function () {
     onClose === null || onClose === void 0 ? void 0 : onClose();
   }, [onClose]);
+  var registerTitle = useCallback(function () {
+    setTitleCount(function (count) {
+      return count + 1;
+    });
+    return function () {
+      return setTitleCount(function (count) {
+        return count - 1;
+      });
+    };
+  }, []);
+  var setWrapperRef = useCallback(function (node) {
+    modalRef.current = node;
+    setContainer(node);
+  }, []);
+  var contextValue = useMemo(function () {
+    return {
+      onClose: handleClose,
+      titleId: titleId,
+      registerTitle: registerTitle,
+      container: container
+    };
+  }, [handleClose, titleId, registerTitle, container]);
   var handleOverlayClick = useCallback(function (event) {
     if (event.target === event.currentTarget) {
       handleClose();
@@ -31,7 +83,7 @@ var Modal = function Modal(_ref) {
   }, [handleClose]);
   useEffect(function () {
     var handleEscape = function handleEscape(event) {
-      if (event.key === "Escape") {
+      if (event.key === "Escape" && isTopmost()) {
         handleClose();
       }
     };
@@ -39,30 +91,45 @@ var Modal = function Modal(_ref) {
     return function () {
       return document.removeEventListener("keydown", handleEscape);
     };
-  }, [handleClose]);
-  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement("div", {
-    className: styles.root,
+  }, [handleClose, isTopmost]);
+  var isCompound = Children.toArray(children).some(isCompoundPart);
+  var standaloneClose = /*#__PURE__*/React.createElement("div", {
+    className: styles["close-wrapper"]
+  }, /*#__PURE__*/React.createElement(Close, {
+    onClick: handleClose,
+    "aria-label": "Close modal"
+  }));
+  var content;
+  if (isCompound) {
+    content = /*#__PURE__*/React.createElement(React.Fragment, null, !hasHeader(children) && standaloneClose, children);
+  } else {
+    content = /*#__PURE__*/React.createElement(React.Fragment, null, title ? (/*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(Title, null, title))) : standaloneClose, /*#__PURE__*/React.createElement(Content, null, children));
+  }
+  // Wait for the parent window node instead of flashing in document.body.
+  if (withinParent && parentModal && !parentContainer) return null;
+  return /*#__PURE__*/React.createElement(Portal, {
+    node: parentContainer
+  }, /*#__PURE__*/React.createElement(ModalContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement("div", {
+    className: clsx(styles.root, _defineProperty({}, styles.root_contained, isContained)),
     role: "dialog",
     "aria-modal": "true",
-    "aria-labelledby": title ? "modal-title" : undefined
+    "aria-labelledby": titleCount > 0 ? titleId : undefined
   }, /*#__PURE__*/React.createElement("div", {
     className: styles["modal-overlay"],
     onClick: handleOverlayClick,
     "aria-hidden": "true"
   }), /*#__PURE__*/React.createElement("div", {
-    className: clsx(styles["modal-wrapper"], _defineProperty(_defineProperty({}, styles["modal-wrapper_desktop"], isDesktop), styles["modal-wrapper_mobile"], !isDesktop), className),
-    ref: modalRef
-  }, title ? (/*#__PURE__*/React.createElement("div", {
-    className: styles["title-wrapper"]
-  }, /*#__PURE__*/React.createElement(Title, null, title), /*#__PURE__*/React.createElement(Close, {
-    onClick: handleClose,
-    "aria-label": "Close modal"
-  }))) : (/*#__PURE__*/React.createElement("div", {
-    className: styles["close-wrapper"]
-  }, /*#__PURE__*/React.createElement(Close, {
-    onClick: handleClose,
-    "aria-label": "Close modal"
-  }))), /*#__PURE__*/React.createElement(Content, null, children))));
+    className: clsx(styles["modal-wrapper"], _defineProperty(_defineProperty(_defineProperty({}, styles["modal-wrapper_desktop"], isDesktop), styles["modal-wrapper_mobile"], !isDesktop), styles["modal-wrapper_contained"], isContained), className),
+    ref: setWrapperRef
+  }, content))));
 };
+var Modal = Object.assign(ModalRoot, {
+  Header: Header,
+  Title: Title,
+  Body: Body,
+  Footer: Footer
+});
 
-export { Modal };
+export { Modal, Body as ModalBody, Footer as ModalFooter, Header as ModalHeader, Title as ModalTitle };

package/esm/Modal/index.props.d.ts

@@ -1,5 +1,30 @@
+import type { HTMLAttributes } from "react";
 export type ModalProps = {
     className?: string;
     onClose?: () => void;
+    /**
+     * Legacy shorthand. Used only when children do not contain
+     * `Modal.Header`, `Modal.Body` or `Modal.Footer`.
+     */
     title?: string;
+    /**
+     * Renders the modal inside the parent modal window: the overlay covers
+     * only the parent, not the whole viewport. Works when the modal is
+     * rendered inside another `Modal`.
+     */
+    withinParent?: boolean;
 };
+export interface ModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Places the header above the body instead of before it.
+     * The header becomes transparent and the body takes the whole modal.
+     */
+    overlay?: boolean;
+    closeAriaLabel?: string;
+}
+export type ModalTitleProps = HTMLAttributes<HTMLDivElement>;
+export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
+    /** Removes the body padding so content goes edge to edge. */
+    bleed?: boolean;
+}
+export type ModalFooterProps = HTMLAttributes<HTMLDivElement>;

package/esm/Modal/useModalStack.d.ts

@@ -0,0 +1,2 @@
+/** Tracks open modals so only the topmost one reacts to Escape and Tab. */
+export declare const useModalStack: (id: string) => () => boolean;

package/esm/Modal/useModalStack.js

@@ -0,0 +1,18 @@
+import { useEffect, useCallback } from 'react';
+
+var stack = [];
+/** Tracks open modals so only the topmost one reacts to Escape and Tab. */
+var useModalStack = function useModalStack(id) {
+  useEffect(function () {
+    stack.push(id);
+    return function () {
+      var index = stack.lastIndexOf(id);
+      if (index !== -1) stack.splice(index, 1);
+    };
+  }, [id]);
+  return useCallback(function () {
+    return stack[stack.length - 1] === id;
+  }, [id]);
+};
+
+export { useModalStack };

package/esm/Theme/breakpoints.d.ts

@@ -1,18 +1,22 @@
-export type Breakpoints = {
-    hd: number;
-    xl: number;
-    lg: number;
-    md: number;
-    sm: number;
-    xs: number;
+/**
+ * Breakpoints shared with the apps that use the kit.
+ * The values match the Tailwind CSS defaults on purpose; Tailwind is not a dependency.
+ */
+export declare const BREAKPOINTS: {
+    readonly sm: "40rem";
+    readonly md: "48rem";
+    readonly lg: "64rem";
+    readonly xl: "80rem";
+    readonly "2xl": "96rem";
 };
-export type BreakpointName = keyof Breakpoints;
-export type BreakpointsTheme = {
-    values: Breakpoints;
-    up: (breakpoint: BreakpointName, isMedial?: boolean) => string;
-    under: (breakpoint: BreakpointName, isMedial?: boolean) => string;
-    between: ([from, to]: [BreakpointName, BreakpointName], isMedial?: boolean) => string;
+export type BreakpointName = keyof typeof BREAKPOINTS;
+export type Media = {
+    /** `(width >= <name>)` */
+    up: (name: BreakpointName) => string;
+    /** `(width < <name>)` */
+    down: (name: BreakpointName) => string;
+    /** `(<from> <= width < <to>)` */
+    between: (from: BreakpointName, to: BreakpointName) => string;
 };
-export type BreakpointMap<T = number> = Map<BreakpointName, T>;
-declare const Breakpoints: BreakpointsTheme;
-export default Breakpoints;
+/** Bare media queries, usable in `window.matchMedia`. Prefix with `@media ` in CSS-in-JS. */
+export declare const media: Media;

package/esm/Theme/breakpoints.js

@@ -1,31 +1,25 @@
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-
-var Breakpoints = {
-  values: {
-    hd: 2560,
-    xl: 1920,
-    lg: 1450,
-    md: 1075,
-    sm: 680,
-    xs: 320
-  },
-  up: function up(breakpoint) {
-    var isMedia = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    return "".concat(isMedia ? "@media " : "", "(min-width: ").concat(this.values[breakpoint], "px)");
+/**
+ * Breakpoints shared with the apps that use the kit.
+ * The values match the Tailwind CSS defaults on purpose; Tailwind is not a dependency.
+ */
+var BREAKPOINTS = {
+  sm: "40rem",
+  md: "48rem",
+  lg: "64rem",
+  xl: "80rem",
+  "2xl": "96rem"
+};
+/** Bare media queries, usable in `window.matchMedia`. Prefix with `@media ` in CSS-in-JS. */
+var media = {
+  up: function up(name) {
+    return "(width >= ".concat(BREAKPOINTS[name], ")");
   },
-  under: function under(breakpoint) {
-    var isMedia = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    return "".concat(isMedia ? "@media " : "", "(max-width: ").concat(this.values[breakpoint] - 1, "px)");
+  down: function down(name) {
+    return "(width < ".concat(BREAKPOINTS[name], ")");
   },
-  between: function between(_ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-      min = _ref2[0],
-      max = _ref2[1];
-    var isMedia = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    var from = this.values[min];
-    var to = this.values[max] - 1;
-    return "".concat(isMedia ? "@media " : "", "(min-width: ").concat(from, "px) and (max-width: ").concat(to, "px)");
+  between: function between(from, to) {
+    return "(".concat(BREAKPOINTS[from], " <= width < ").concat(BREAKPOINTS[to], ")");
   }
 };
 
-export { Breakpoints as default };
+export { BREAKPOINTS, media };

package/esm/Theme/colors/index.d.ts

@@ -24,10 +24,12 @@ declare const _default: {
     PROMO_NEON: string;
     STATUS_JP_SUCCESS: string;
     STATUS_JP_SUCCESS_BG: string;
+    STATUS_JP_SUCCESS_BG_HOVER: string;
     STATUS_JP_WARNING: string;
     STATUS_JP_WARNING_BG: string;
     STATUS_JP_ERROR_ACCENT: string;
     STATUS_JP_ERROR: string;
+    STATUS_JP_ERROR_HOVER: string;
     STATUS_JP_ERROR_BG: string;
     STATUS_JP_INFO: string;
     STATUS_JP_INFO_BG: string;
@@ -127,10 +129,12 @@ declare const _default: {
     PRIMARY_BA_5: string;
     STATUS_BA_SUCCESS: string;
     STATUS_BA_SUCCESS_BG: string;
+    STATUS_BA_SUCCESS_BG_HOVER: string;
     STATUS_BA_WARNING: string;
     STATUS_BA_WARNING_BG: string;
     STATUS_BA_ERROR_ACCENT: string;
     STATUS_BA_ERROR: string;
+    STATUS_BA_ERROR_HOVER: string;
     STATUS_BA_ERROR_BG: string;
     STATUS_BA_INFO: string;
     STATUS_BA_INFO_BG: string;