colibri-ui 0.7.63 → 0.7.65

package/Tooltip/Tooltip.module.css

@@ -0,0 +1,122 @@
+.root[data-popper-placement=bottom-start] {
+  padding-top: 4px;
+}
+.root[data-popper-placement=bottom-start]::before {
+  left: 6px;
+  top: 0;
+}
+.root[data-popper-placement=bottom-end] {
+  padding-top: 4px;
+}
+.root[data-popper-placement=bottom-end]::before {
+  right: 6px;
+  top: 0;
+}
+.root[data-popper-placement=bottom] {
+  padding-top: 4px;
+}
+.root[data-popper-placement=bottom]::before {
+  left: 50%;
+  top: 0;
+  transform: translate(-50%, 0);
+}
+.root[data-popper-placement=right] {
+  padding-left: 4px;
+}
+.root[data-popper-placement=right]::before {
+  left: -6px;
+  top: 50%;
+  transform: translate(0, -50%) rotate(-90deg);
+}
+.root[data-popper-placement=right-start] {
+  padding-left: 4px;
+}
+.root[data-popper-placement=right-start]::before {
+  left: -6px;
+  top: 6px;
+  transform: rotate(-90deg);
+}
+.root[data-popper-placement=right-end] {
+  padding-left: 4px;
+}
+.root[data-popper-placement=right-end]::before {
+  bottom: 6px;
+  left: -6px;
+  transform: rotate(-90deg);
+}
+.root[data-popper-placement=left] {
+  padding-right: 4px;
+}
+.root[data-popper-placement=left]::before {
+  right: -6px;
+  top: 50%;
+  transform: translate(0, -50%) rotate(90deg);
+}
+.root[data-popper-placement=left-start] {
+  padding-right: 4px;
+}
+.root[data-popper-placement=left-start]::before {
+  right: -6px;
+  top: 6px;
+  transform: rotate(90deg);
+}
+.root[data-popper-placement=left-end] {
+  padding-right: 4px;
+}
+.root[data-popper-placement=left-end]::before {
+  bottom: 6px;
+  right: -6px;
+  transform: rotate(90deg);
+}
+.root[data-popper-placement=top] {
+  padding-bottom: 4px;
+}
+.root[data-popper-placement=top]::before {
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, 0) rotate(180deg);
+}
+.root[data-popper-placement=top-start] {
+  padding-bottom: 4px;
+}
+.root[data-popper-placement=top-start]::before {
+  bottom: 0;
+  left: 6px;
+  transform: rotate(180deg);
+}
+.root[data-popper-placement=top-end] {
+  padding-bottom: 4px;
+}
+.root[data-popper-placement=top-end]::before {
+  bottom: 0;
+  right: 6px;
+  transform: rotate(180deg);
+}
+
+.tail {
+  position: relative;
+}
+.tail::before {
+  border-bottom: 5px solid var(--tooltip-background-color);
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  content: "";
+  height: 0;
+  position: absolute;
+  width: 0;
+  z-index: 3000;
+}
+
+.overlay {
+  background-color: var(--tooltip-background-color);
+  border-radius: var(--tooltip-border-radius);
+  color: var(--tooltip-color);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 18px;
+  max-width: 200px;
+  overflow: hidden;
+  padding: 4px 10px;
+  position: relative;
+}

package/Tooltip/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { ITooltipProps } from "./index.props";
+declare const Tooltip: React.FC<ITooltipProps>;
+export default Tooltip;

package/Tooltip/index.js

@@ -0,0 +1,111 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var reactPopper = require('react-popper');
+var classNames = require('classnames/bind');
+var index = require('../Portal/index.js');
+var on = require('../helpers/on.js');
+var index$1 = require('../ClickOutside/index.js');
+var styles = require('./Tooltip.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+var clx = classNames__default.default.bind(styles__default.default);
+var Tooltip = function Tooltip(_a) {
+  var children = _a.children,
+    zIndex = _a.zIndex,
+    content = _a.content,
+    _b = _a.withTail,
+    withTail = _b === void 0 ? false : _b,
+    _c = _a.placement,
+    placement = _c === void 0 ? "bottom" : _c,
+    _d = _a.strategy,
+    strategy = _d === void 0 ? "absolute" : _d;
+  var _e = React.useState(null),
+    controlElement = _e[0],
+    setControlElement = _e[1];
+  var _f = React.useState(null),
+    popperElement = _f[0],
+    setPopperElement = _f[1];
+  var _g = React.useState(false),
+    visible = _g[0],
+    setVisible = _g[1];
+  var _h = reactPopper.usePopper(controlElement, popperElement, {
+      placement: placement,
+      strategy: strategy,
+      modifiers: [{
+        name: "flip",
+        enabled: true
+      }, {
+        name: "preventOverflow",
+        enabled: true
+      }]
+    }),
+    styles = _h.styles,
+    attributes = _h.attributes,
+    update = _h.update;
+  var isNotComponent = typeof children === "string";
+  var reference = React.useMemo(function () {
+    return React.Children.only(isNotComponent ? /*#__PURE__*/React__default.default.createElement("button", null, children) : children);
+  }, [children, isNotComponent]);
+  var onToggle = React.useCallback(function (e) {
+    e.stopPropagation();
+    setVisible(function (state) {
+      return !state;
+    });
+  }, [setVisible]);
+  var onShow = React.useCallback(function () {
+    setVisible(true);
+  }, [setVisible]);
+  var onHide = React.useCallback(function () {
+    setVisible(false);
+  }, [setVisible]);
+  var onClickOutside = React.useCallback(function (e) {
+    if (controlElement === null || controlElement === void 0 ? void 0 : controlElement.contains(e.target)) return;
+    onHide();
+  }, [onHide, controlElement]);
+  var onClickOverlay = React.useCallback(function (e) {
+    e.stopPropagation();
+    onHide();
+  }, [onHide]);
+  React.useEffect(function () {
+    var unsubscribes = [];
+    unsubscribes.push(on.on(controlElement, "mouseenter", onShow, false));
+    unsubscribes.push(on.on(controlElement, "mouseleave", onHide, false));
+    unsubscribes.push(on.on(popperElement, "mouseenter", onShow, false));
+    unsubscribes.push(on.on(popperElement, "mouseleave", onHide, false));
+    return function () {
+      return unsubscribes.forEach(function (un) {
+        return un();
+      });
+    };
+  }, [controlElement, popperElement, onToggle, onShow, onHide]);
+  React.useEffect(function () {
+    if (update) update();
+  }, [update, visible]);
+  return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement(reference.type, tslib.__assign({
+    ref: setControlElement
+  }, reference.props)), visible && ( /*#__PURE__*/React__default.default.createElement(index.default, null, /*#__PURE__*/React__default.default.createElement(index$1.default, {
+    onClick: onClickOutside
+  }, /*#__PURE__*/React__default.default.createElement("div", tslib.__assign({
+    className: clx("root", {
+      tail: !!withTail
+    }),
+    ref: setPopperElement,
+    style: tslib.__assign(tslib.__assign({}, styles.popper), {
+      zIndex: zIndex
+    })
+  }, attributes.popper), /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx("overlay"),
+    onClick: onClickOverlay
+  }, content))))));
+};
+
+exports.default = Tooltip;

package/Tooltip/index.props.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+import type { PositioningStrategy } from "@popperjs/core";
+import type { Placement as PopperPlacement } from "@popperjs/core";
+export type Trigger = "hover";
+export type Placement = Extract<PopperPlacement, "bottom-start" | "bottom" | "bottom-end" | "top-start" | "top" | "top-end" | "right-start" | "right" | "right-end" | "left-start" | "left" | "left-end">;
+export interface ITooltipProps {
+    children: ReactNode;
+    content: ReactNode;
+    zIndex?: number;
+    placement?: Placement;
+    strategy?: PositioningStrategy;
+    withTail?: boolean;
+}

package/Tooltip/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/Tooltip/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/Typography/index.d.ts

@@ -1,4 +1,4 @@
-import { FC } from "react";
 import { type Props } from "./index.props";
+import type { FC } from "react";
 declare const Typography: FC<Props>;
 export default Typography;

package/esm/Checkbox/Checkbox.module.css

@@ -35,7 +35,7 @@
 }
 
 .checked {
-  background-color: var(--checkbox-primary-background-color-checked);
+  background-color: var(--checkbox-background-color-checked);
   border: 0;
 }
 .checked::after {
@@ -73,17 +73,17 @@
   border-color: var(--palette-bg-3);
 }
 .control_variant_primary:focus:not(:disabled) + .fake-checkbox {
-  box-shadow: 0 0 0 2px var(--checkbox-primary-box-shadow-focused);
+  box-shadow: 0 0 0 2px var(--checkbox-box-shadow-focused);
 }
 .control_variant_primary:hover:not(:disabled) + .fake-checkbox {
-  background-color: var(--checkbox-primary-background-color-hovered);
+  background-color: var(--checkbox-background-color-hovered);
 }
 .control_variant_primary:active:not(:disabled) + .fake-checkbox {
-  background-color: var(--checkbox-primary-background-color-active);
-  border-color: var(--checkbox-primary-border-color-active);
-  box-shadow: var(--checkbox-primary-box-shadow-active);
+  background-color: var(--checkbox-background-color-active);
+  border-color: var(--checkbox-border-color-active);
+  box-shadow: var(--checkbox-box-shadow-active);
 }
 .control_variant_primary:disabled + .fake-checkbox {
-  background-color: var(--checkbox-primary-background-color-disabled);
+  background-color: var(--checkbox-background-color-disabled);
   z-index: 1;
 }

package/esm/Icons/Exit.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { Props } from "./index.props";
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<SVGSVGElement>>;
+export default _default;

package/esm/Icons/Exit.js

@@ -0,0 +1,27 @@
+import { __rest, __assign } from 'tslib';
+import React__default, { forwardRef } from 'react';
+
+var Exit = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _b = _a.fill,
+    fill = _b === void 0 ? "currentColor" : _b,
+    _c = _a.width,
+    width = _c === void 0 ? 24 : _c,
+    _d = _a.height,
+    height = _d === void 0 ? 24 : _d,
+    props = __rest(_a, ["fill", "width", "height"]);
+  return /*#__PURE__*/React__default.createElement("svg", __assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    ref: ref
+  }, props, {
+    fill: "none"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: fill,
+    fillRule: "evenodd",
+    d: "M22.17 11.205a1.125 1.125 0 0 1 0 1.59l-3.75 3.75a1.126 1.126 0 1 1-1.59-1.59l1.83-1.83H7.125a1.125 1.125 0 1 1 0-2.25H18.66l-1.83-1.83a1.125 1.125 0 0 1 1.59-1.59zm-7.92-4.83a1.125 1.125 0 1 1-2.25 0V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25h3.75A2.25 2.25 0 0 0 12 18v-.375a1.125 1.125 0 1 1 2.25 0V18a4.5 4.5 0 0 1-4.5 4.5H6A4.5 4.5 0 0 1 1.5 18V6A4.5 4.5 0 0 1 6 1.5h3.75a4.5 4.5 0 0 1 4.5 4.5z",
+    clipRule: "evenodd"
+  }));
+});
+
+export { Exit as default };

package/esm/Icons/Plus.js

@@ -11,20 +11,17 @@ var PlusIcon = /*#__PURE__*/forwardRef(function (_a, ref) {
     props = __rest(_a, ["fill", "width", "height"]);
   return /*#__PURE__*/React__default.createElement("svg", __assign({
     xmlns: "http://www.w3.org/2000/svg",
-    fill: fill,
     width: width,
     height: height,
     ref: ref
   }, props, {
-    viewBox: "0 0 24 24"
-  }), /*#__PURE__*/React__default.createElement("g", {
-    fill: fill,
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React__default.createElement("path", {
-    d: "M4 13h16v-2H4z"
+    fill: "none"
   }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M11 4v16h2V4z"
-  })));
+    fill: fill,
+    fillRule: "evenodd",
+    d: "M12.5 1a1.26 1.26 0 0 1 1.26 1.26v7.98h7.98a1.26 1.26 0 1 1 0 2.52h-7.98v7.98a1.26 1.26 0 0 1-2.52 0v-7.98H3.26a1.26 1.26 0 0 1 0-2.52h7.98V2.26A1.26 1.26 0 0 1 12.5 1",
+    clipRule: "evenodd"
+  }));
 });
 
 export { PlusIcon as default };

package/esm/Icons/Setting.js

@@ -0,0 +1,34 @@
+import { __rest, __assign } from 'tslib';
+import React__default, { forwardRef } from 'react';
+
+var Setting = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _b = _a.fill,
+    fill = _b === void 0 ? "currentColor" : _b,
+    _c = _a.width,
+    width = _c === void 0 ? 24 : _c,
+    _d = _a.height,
+    height = _d === void 0 ? 24 : _d,
+    props = __rest(_a, ["fill", "width", "height"]);
+  return /*#__PURE__*/React__default.createElement("svg", __assign({}, props, {
+    ref: ref,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24",
+    strokeWidth: "1.5",
+    stroke: fill,
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    stroke: "none",
+    d: "M0 0h24v24H0z",
+    fill: "none"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"
+  }));
+});
+
+export { Setting as default };

package/esm/Icons/index.d.ts

@@ -2,6 +2,7 @@ export { default as ArrowNext } from "./ArrowNext";
 export { default as Cart } from "./Cart";
 export { default as Chevron } from "./Chevron";
 export { default as Close } from "./Close";
+export { default as Exit } from "./Exit";
 export { default as EyeOpen } from "./EyeOpen";
 export { default as EyeClosed } from "./EyeClosed";
 export { default as Help } from "./Help";
@@ -9,5 +10,6 @@ export { default as Info } from "./Info";
 export { default as Minus } from "./Minus";
 export { default as More } from "./More";
 export { default as Plus } from "./Plus";
+export { default as Setting } from "./Setting";
 export { default as Trash } from "./Trash";
 export { default as User } from "./User";

package/esm/Icons/index.js

@@ -2,6 +2,7 @@ export { default as ArrowNext } from './ArrowNext.js';
 export { default as Cart } from './Cart.js';
 export { default as Chevron } from './Chevron.js';
 export { default as Close } from './Close.js';
+export { default as Exit } from './Exit.js';
 export { default as EyeOpen } from './EyeOpen.js';
 export { default as EyeClosed } from './EyeClosed.js';
 export { default as Help } from './Help.js';
@@ -9,5 +10,6 @@ export { default as Info } from './Info.js';
 export { default as Minus } from './Minus.js';
 export { default as More } from './More.js';
 export { default as Plus } from './Plus.js';
+export { default as Setting } from './Setting.js';
 export { default as Trash } from './Trash.js';
 export { default as User } from './User.js';

package/esm/InputRadio/InputRadio.module.css

@@ -51,26 +51,26 @@
   position: absolute;
 }
 .input:not(.input_disabled, .input_error):hover + .icon {
-  border-color: var(--inputradio-primary-background-color-hovered);
+  border-color: var(--input-radio-background-color-hovered);
 }
 .input:not(.input_disabled, .input_error):focus + .icon {
-  box-shadow: 0 0 0 2px var(--inputradio-primary-box-shadow-focused);
+  box-shadow: 0 0 0 2px var(--input-radio-box-shadow-focused);
 }
 .input:not(.input_disabled, .input_error):active + .icon {
-  background-color: var(--inputradio-primary-background-color-focused);
-  border-color: var(--inputradio-primary-border-color-focused);
-  box-shadow: 0 0 0 2px var(--inputradio-primary-box-shadow-focused);
+  background-color: var(--input-radio-background-color-focused);
+  border-color: var(--input-radio-border-color-focused);
+  box-shadow: 0 0 0 2px var(--input-radio-box-shadow-focused);
 }
 .input:not(.input_disabled, .input_error) .input_checked:hover + .icon {
-  border-color: var(--inputradio-primary-background-color-hovered);
+  border-color: var(--input-radio-background-color-hovered);
 }
 .input:not(.input_disabled, .input_error) .input_checked:active + .icon {
   background-color: var(--palette-white);
-  border: 4px solid var(--inputradio-primary-background-color-checked);
+  border: 4px solid var(--input-radio-background-color-checked);
 }
 .input_checked + .icon {
   background-color: var(--palette-white);
-  border: 4px solid var(--inputradio-primary-background-color-checked);
+  border: 4px solid var(--input-radio-background-color-checked);
 }
 .input_disabled + .icon {
   border-radius: 50%;

package/esm/Switch/Switch.module.css

@@ -18,8 +18,8 @@
   width: 40px;
 }
 .wrapper_variant_primary {
-  background-color: var(--switch-primary-background-color);
-  border-color: var(--switch-primary-border-color);
+  background-color: var(--switch-background-color);
+  border-color: var(--switch-border-color);
 }
 
 .base-switch {
@@ -48,8 +48,8 @@
   z-index: 1;
 }
 .checkbox:checked + .wrapper {
-  background-color: var(--switch-primary-background-color-checked);
-  border-color: var(--switch-primary-border-color-checked);
+  background-color: var(--switch-background-color-checked);
+  border-color: var(--switch-border-color-checked);
 }
 .checkbox:checked + .wrapper .base-switch {
   transform: translateX(18px);

package/esm/Theme/index.d.ts

@@ -84,22 +84,25 @@ export declare const THEMES: {
         "input-primary-border-color-error": string;
         "input-primary-background-color-error": string;
         "input-primary-box-shadow-color-error": string;
-        "checkbox-primary-background-color-checked": string;
-        "checkbox-primary-background-color-hovered": string;
-        "checkbox-primary-box-shadow-focused": string;
-        "checkbox-primary-background-color-active": string;
-        "checkbox-primary-border-color-active": string;
-        "checkbox-primary-box-shadow-active": string;
-        "checkbox-primary-background-color-disabled": string;
-        "inputradio-primary-background-color-checked": string;
-        "inputradio-primary-background-color-hovered": string;
-        "inputradio-primary-box-shadow-focused": string;
-        "inputradio-primary-background-color-focused": string;
-        "inputradio-primary-border-color-focused": string;
-        "switch-primary-background-color": string;
-        "switch-primary-border-color": string;
-        "switch-primary-background-color-checked": string;
-        "switch-primary-border-color-checked": string;
+        "checkbox-background-color-checked": string;
+        "checkbox-background-color-hovered": string;
+        "checkbox-box-shadow-focused": string;
+        "checkbox-background-color-active": string;
+        "checkbox-border-color-active": string;
+        "checkbox-box-shadow-active": string;
+        "checkbox-background-color-disabled": string;
+        "input-radio-background-color-checked": string;
+        "input-radio-background-color-hovered": string;
+        "input-radio-box-shadow-focused": string;
+        "input-radio-background-color-focused": string;
+        "input-radio-border-color-focused": string;
+        "switch-background-color": string;
+        "switch-border-color": string;
+        "switch-background-color-checked": string;
+        "switch-border-color-checked": string;
+        "tooltip-background-color": string;
+        "tooltip-color": string;
+        "tooltip-border-radius": string;
     };
     BA: {
         "palette-black": string;
@@ -183,21 +186,24 @@ export declare const THEMES: {
         "input-primary-border-color-error": string;
         "input-primary-background-color-error": string;
         "input-primary-box-shadow-color-error": string;
-        "checkbox-primary-background-color-checked": string;
-        "checkbox-primary-background-color-hovered": string;
-        "checkbox-primary-box-shadow-focused": string;
-        "checkbox-primary-background-color-active": string;
-        "checkbox-primary-border-color-active": string;
-        "checkbox-primary-box-shadow-active": string;
-        "checkbox-primary-background-color-disabled": string;
-        "inputradio-primary-background-color-checked": string;
-        "inputradio-primary-background-color-hovered": string;
-        "inputradio-primary-box-shadow-focused": string;
-        "inputradio-primary-background-color-focused": string;
-        "inputradio-primary-border-color-focused": string;
-        "switch-primary-background-color": string;
-        "switch-primary-border-color": string;
-        "switch-primary-background-color-checked": string;
-        "switch-primary-border-color-checked": string;
+        "checkbox-background-color-checked": string;
+        "checkbox-background-color-hovered": string;
+        "checkbox-box-shadow-focused": string;
+        "checkbox-background-color-active": string;
+        "checkbox-border-color-active": string;
+        "checkbox-box-shadow-active": string;
+        "checkbox-background-color-disabled": string;
+        "input-radio-background-color-checked": string;
+        "input-radio-background-color-hovered": string;
+        "input-radio-box-shadow-focused": string;
+        "input-radio-background-color-focused": string;
+        "input-radio-border-color-focused": string;
+        "switch-background-color": string;
+        "switch-border-color": string;
+        "switch-background-color-checked": string;
+        "switch-border-color-checked": string;
+        "tooltip-background-color": string;
+        "tooltip-color": string;
+        "tooltip-border-radius": string;
     };
 };

package/esm/Theme/themes/buenos_aires.d.ts

@@ -80,21 +80,24 @@ declare const _default: {
     "input-primary-border-color-error": string;
     "input-primary-background-color-error": string;
     "input-primary-box-shadow-color-error": string;
-    "checkbox-primary-background-color-checked": string;
-    "checkbox-primary-background-color-hovered": string;
-    "checkbox-primary-box-shadow-focused": string;
-    "checkbox-primary-background-color-active": string;
-    "checkbox-primary-border-color-active": string;
-    "checkbox-primary-box-shadow-active": string;
-    "checkbox-primary-background-color-disabled": string;
-    "inputradio-primary-background-color-checked": string;
-    "inputradio-primary-background-color-hovered": string;
-    "inputradio-primary-box-shadow-focused": string;
-    "inputradio-primary-background-color-focused": string;
-    "inputradio-primary-border-color-focused": string;
-    "switch-primary-background-color": string;
-    "switch-primary-border-color": string;
-    "switch-primary-background-color-checked": string;
-    "switch-primary-border-color-checked": string;
+    "checkbox-background-color-checked": string;
+    "checkbox-background-color-hovered": string;
+    "checkbox-box-shadow-focused": string;
+    "checkbox-background-color-active": string;
+    "checkbox-border-color-active": string;
+    "checkbox-box-shadow-active": string;
+    "checkbox-background-color-disabled": string;
+    "input-radio-background-color-checked": string;
+    "input-radio-background-color-hovered": string;
+    "input-radio-box-shadow-focused": string;
+    "input-radio-background-color-focused": string;
+    "input-radio-border-color-focused": string;
+    "switch-background-color": string;
+    "switch-border-color": string;
+    "switch-background-color-checked": string;
+    "switch-border-color-checked": string;
+    "tooltip-background-color": string;
+    "tooltip-color": string;
+    "tooltip-border-radius": string;
 };
 export default _default;

package/esm/Theme/themes/buenos_aires.js

@@ -82,22 +82,25 @@ var THEME_BA = {
   "input-primary-border-color-error": Color.ALERT,
   "input-primary-background-color-error": Color.TRETIARY_DEFAULT_2,
   "input-primary-box-shadow-color-error": Color.TRETIARY_DEFAULT_2,
-  "checkbox-primary-background-color-checked": Color.PRIMARY_BA_4,
-  "checkbox-primary-background-color-hovered": Color.PRIMARY_BA_4,
-  "checkbox-primary-box-shadow-focused": Color.PRIMARY_BA_1,
-  "checkbox-primary-background-color-active": Color.PRIMARY_BA_4,
-  "checkbox-primary-border-color-active": Color.PRIMARY_BA_4,
-  "checkbox-primary-box-shadow-active": Color.PRIMARY_BA_4,
-  "checkbox-primary-background-color-disabled": Color.PRIMARY_BA_1,
-  "inputradio-primary-background-color-checked": Color.PRIMARY_BA_4,
-  "inputradio-primary-background-color-hovered": Color.PRIMARY_BA_4,
-  "inputradio-primary-box-shadow-focused": Color.PRIMARY_BA_1,
-  "inputradio-primary-background-color-focused": Color.PRIMARY_BA_1,
-  "inputradio-primary-border-color-focused": Color.PRIMARY_BA_1,
-  "switch-primary-background-color": Color.BG_2,
-  "switch-primary-border-color": Color.BG_2,
-  "switch-primary-background-color-checked": Color.PRIMARY_BA_5,
-  "switch-primary-border-color-checked": Color.PRIMARY_BA_5
+  "checkbox-background-color-checked": Color.PRIMARY_BA_4,
+  "checkbox-background-color-hovered": Color.PRIMARY_BA_4,
+  "checkbox-box-shadow-focused": Color.PRIMARY_BA_1,
+  "checkbox-background-color-active": Color.PRIMARY_BA_4,
+  "checkbox-border-color-active": Color.PRIMARY_BA_4,
+  "checkbox-box-shadow-active": Color.PRIMARY_BA_4,
+  "checkbox-background-color-disabled": Color.PRIMARY_BA_1,
+  "input-radio-background-color-checked": Color.PRIMARY_BA_4,
+  "input-radio-background-color-hovered": Color.PRIMARY_BA_4,
+  "input-radio-box-shadow-focused": Color.PRIMARY_BA_1,
+  "input-radio-background-color-focused": Color.PRIMARY_BA_1,
+  "input-radio-border-color-focused": Color.PRIMARY_BA_1,
+  "switch-background-color": Color.BG_2,
+  "switch-border-color": Color.BG_2,
+  "switch-background-color-checked": Color.PRIMARY_BA_5,
+  "switch-border-color-checked": Color.PRIMARY_BA_5,
+  "tooltip-background-color": Color.SECONDARY_BA_3,
+  "tooltip-color": Color.WHITE,
+  "tooltip-border-radius": "4px"
 };
 
 export { THEME_BA as default };