colibri-ui 0.8.76 → 0.8.77

package/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/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/Modal/components/Body/index.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var tslib = require('tslib');
+var React = require('react');
+var clsx = require('clsx');
+var styles = require('./Body.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
+var React__default = /*#__PURE__*/_interopDefault(React);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+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 = tslib.__rest(_a, ["children", "className", "bleed"]);
+  return /*#__PURE__*/React__default.default.createElement("div", Object.assign({}, props, {
+    className: clsx__default.default(styles__default.default.root, _defineProperty__default.default({}, styles__default.default.root_bleed, bleed), className)
+  }), children);
+};
+
+exports.Body = Body;

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

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

package/Modal/components/Close/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var React = require('react');
+var clsx = require('clsx');
 require('../../../Icons/index.js');
 var styles = require('./Close.module.css');
 var Close$1 = require('../../../Icons/Close.js');
@@ -8,16 +9,18 @@ var Close$1 = require('../../../Icons/Close.js');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 var Close = function Close(_ref) {
-  var onClick = _ref.onClick,
+  var className = _ref.className,
+    onClick = _ref.onClick,
     ariaLabel = _ref["aria-label"];
   return /*#__PURE__*/React__default.default.createElement("button", {
     type: "button",
     onClick: onClick,
     "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Close",
-    className: styles__default.default["close-button"]
+    className: clsx__default.default(styles__default.default["close-button"], className)
   }, /*#__PURE__*/React__default.default.createElement(Close$1.Close, {
     width: 18,
     height: 18

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

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

package/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/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/Modal/components/Footer/index.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var clsx = require('clsx');
+var styles = require('./Footer.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+var Footer = function Footer(_a) {
+  var children = _a.children,
+    className = _a.className,
+    props = tslib.__rest(_a, ["children", "className"]);
+  return /*#__PURE__*/React__default.default.createElement("div", Object.assign({}, props, {
+    className: clsx__default.default(styles__default.default.root, className)
+  }), children);
+};
+
+exports.Footer = Footer;

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

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

package/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/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/Modal/components/Header/index.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var tslib = require('tslib');
+var React = require('react');
+var clsx = require('clsx');
+var context = require('../../context.js');
+var index = require('../Close/index.js');
+var styles = require('./Header.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
+var React__default = /*#__PURE__*/_interopDefault(React);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+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 = tslib.__rest(_a, ["children", "className", "overlay", "closeAriaLabel"]);
+  var _useModalContext = context.useModalContext(),
+    onClose = _useModalContext.onClose;
+  return /*#__PURE__*/React__default.default.createElement("div", Object.assign({}, props, {
+    className: clsx__default.default(styles__default.default.root, _defineProperty__default.default({}, styles__default.default.root_overlay, overlay), className)
+  }), children, /*#__PURE__*/React__default.default.createElement(index.Close, {
+    className: styles__default.default.close,
+    onClick: onClose,
+    "aria-label": closeAriaLabel
+  }));
+};
+
+exports.Header = Header;

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

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

package/Modal/components/Title/index.js

@@ -1,23 +1,36 @@
 'use strict';
 
+var tslib = require('tslib');
 var React = require('react');
+var clsx = require('clsx');
 var index = require('../../../Typography/index.js');
+var context = require('../../context.js');
 var styles = require('./Title.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-var Title = function Title(_ref) {
-  var children = _ref.children;
+var Title = function Title(_a) {
+  var children = _a.children,
+    className = _a.className,
+    props = tslib.__rest(_a, ["children", "className"]);
+  var _useModalContext = context.useModalContext(),
+    titleId = _useModalContext.titleId,
+    registerTitle = _useModalContext.registerTitle;
+  React.useEffect(function () {
+    return registerTitle();
+  }, [registerTitle]);
   return /*#__PURE__*/React__default.default.createElement(index.Typography, {
-    tag: "h3",
-    size: "h3",
+    tag: "h4",
+    size: "h4",
     className: styles__default.default.title
-  }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: styles__default.default.wrapper
-  }, children));
+  }, /*#__PURE__*/React__default.default.createElement("div", Object.assign({}, props, {
+    id: titleId,
+    className: clsx__default.default(styles__default.default.wrapper, className)
+  }), children));
 };
 
 exports.Title = Title;

package/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/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/Modal/context.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var React = require('react');
+
+var ModalContext = /*#__PURE__*/React.createContext(null);
+var useModalContext = function useModalContext() {
+  var context = React.useContext(ModalContext);
+  if (!context) {
+    throw new Error("Modal compound components must be used inside <Modal>");
+  }
+  return context;
+};
+
+exports.ModalContext = ModalContext;
+exports.useModalContext = useModalContext;

package/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/Modal/index.js

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

package/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/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/Modal/useModalStack.js

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

package/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;

package/Theme/colors/theme_buenos_aires.d.ts

@@ -95,10 +95,12 @@ export declare const PurpleBA: {
 export declare const StatusBA: {
     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;
@@ -160,10 +162,12 @@ declare const Color: {
     PROMO_NEON: 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;

package/Theme/colors/theme_buenos_aires.js

@@ -99,10 +99,12 @@ var PurpleBA = {
 var StatusBA = {
   STATUS_BA_SUCCESS: "#244F18",
   STATUS_BA_SUCCESS_BG: "#E4FFD2",
+  STATUS_BA_SUCCESS_BG_HOVER: LimeBA.LIME_BA_200,
   STATUS_BA_WARNING: "#59470C",
   STATUS_BA_WARNING_BG: "#FFF4BD",
   STATUS_BA_ERROR_ACCENT: "#E5484D",
   STATUS_BA_ERROR: "#7A1D21",
+  STATUS_BA_ERROR_HOVER: "#5F1519",
   STATUS_BA_ERROR_BG: "#FFE8E5",
   STATUS_BA_INFO: "#123B40",
   STATUS_BA_INFO_BG: "#DDF7F7"

package/Theme/colors/theme_jaipur.d.ts

@@ -96,10 +96,12 @@ export declare const YellowJP: {
 export declare const StatusJP: {
     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;
@@ -161,10 +163,12 @@ declare const Color: {
     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;

package/Theme/colors/theme_jaipur.js

@@ -100,10 +100,12 @@ var YellowJP = {
 var StatusJP = {
   STATUS_JP_SUCCESS: "#46591B",
   STATUS_JP_SUCCESS_BG: "#E6FFA9",
+  STATUS_JP_SUCCESS_BG_HOVER: LimeJP.LIME_JP_200,
   STATUS_JP_WARNING: "#624D15",
   STATUS_JP_WARNING_BG: "#FFF0AD",
   STATUS_JP_ERROR_ACCENT: "#D94B69",
   STATUS_JP_ERROR: "#7A263C",
+  STATUS_JP_ERROR_HOVER: PinkJP.PINK_JP_600,
   STATUS_JP_ERROR_BG: "#FFE5EB",
   STATUS_JP_INFO: "#303F6C",
   STATUS_JP_INFO_BG: "#E4EDFF"