colibri-ui 0.7.84 → 0.7.86

package/Theme/themes/default.js

@@ -30,85 +30,93 @@ var THEME_DEFAULT = {
   "typography-alert": index.default.ALERT,
   "typography-success": index.default.SUCCESS,
   "typography-secondary": index.default.BG_3,
-  "button-border-radius": "18px",
   "button-primary-color": index.default.WHITE,
-  "button-primary-background-color": index.default.PRIMARY_DEFAULT_4,
+  "button-primary-bg": index.default.PRIMARY_DEFAULT_4,
   "button-primary-border-color": index.default.PRIMARY_DEFAULT_4,
   "button-primary-color-hovered": index.default.WHITE,
-  "button-primary-background-color-hovered": index.default.PRIMARY_DEFAULT_5,
+  "button-primary-bg-hovered": index.default.PRIMARY_DEFAULT_5,
   "button-primary-border-color-hovered": index.default.PRIMARY_DEFAULT_5,
   "button-primary-color-active": index.default.WHITE,
-  "button-primary-background-color-active": index.default.PRIMARY_DEFAULT_5,
+  "button-primary-bg-active": index.default.PRIMARY_DEFAULT_5,
   "button-primary-border-color-active": index.default.PRIMARY_DEFAULT_5,
   "button-primary-color-disabled": index.default.BG_4,
-  "button-primary-background-color-disabled": index.default.PRIMARY_DEFAULT_1,
+  "button-primary-bg-disabled": index.default.PRIMARY_DEFAULT_1,
   "button-primary-border-color-disabled": index.default.PRIMARY_DEFAULT_1,
   "button-secondary-color": index.default.WHITE,
-  "button-secondary-background-color": index.default.SECONDARY_DEFAULT_4,
+  "button-secondary-bg": index.default.SECONDARY_DEFAULT_4,
   "button-secondary-border-color": index.default.SECONDARY_DEFAULT_4,
   "button-secondary-color-hovered": index.default.WHITE,
-  "button-secondary-background-color-hovered": index.default.SECONDARY_DEFAULT_5,
+  "button-secondary-bg-hovered": index.default.SECONDARY_DEFAULT_5,
   "button-secondary-border-color-hovered": index.default.SECONDARY_DEFAULT_5,
   "button-secondary-color-active": index.default.WHITE,
-  "button-secondary-background-color-active": index.default.SECONDARY_DEFAULT_5,
+  "button-secondary-bg-active": index.default.SECONDARY_DEFAULT_5,
   "button-secondary-border-color-active": index.default.SECONDARY_DEFAULT_5,
   "button-secondary-color-disabled": index.default.BG_4,
-  "button-secondary-background-color-disabled": index.default.SECONDARY_DEFAULT_1,
+  "button-secondary-bg-disabled": index.default.SECONDARY_DEFAULT_1,
   "button-secondary-border-color-disabled": index.default.SECONDARY_DEFAULT_1,
   "button-pseudo-color": index.default.BLACK,
-  "button-pseudo-background-color": index.default.TRETIARY_DEFAULT_1,
+  "button-pseudo-bg": index.default.TRETIARY_DEFAULT_1,
   "button-pseudo-border-color": index.default.TRETIARY_DEFAULT_1,
   "button-pseudo-color-hovered": index.default.BLACK,
-  "button-pseudo-background-color-hovered": index.default.TRETIARY_DEFAULT_1,
+  "button-pseudo-bg-hovered": index.default.TRETIARY_DEFAULT_1,
   "button-pseudo-border-color-hovered": index.default.TRETIARY_DEFAULT_1,
   "button-pseudo-color-active": index.default.BLACK,
-  "button-pseudo-background-color-active": index.default.TRETIARY_DEFAULT_2,
+  "button-pseudo-bg-active": index.default.TRETIARY_DEFAULT_2,
   "button-pseudo-border-color-active": index.default.TRETIARY_DEFAULT_2,
   "button-pseudo-color-disabled": index.default.BG_4,
-  "button-pseudo-background-color-disabled": index.default.TRETIARY_DEFAULT_1,
+  "button-pseudo-bg-disabled": index.default.TRETIARY_DEFAULT_1,
   "button-pseudo-border-color-disabled": index.default.TRETIARY_DEFAULT_1,
   "button-outline-color": index.default.BLACK,
-  "button-outline-background-color": index.default.WHITE,
+  "button-outline-bg": index.default.WHITE,
   "button-outline-border-color": index.default.BG_3,
   "button-outline-color-hovered": index.default.BLACK,
-  "button-outline-background-color-hovered": index.default.BG_1,
+  "button-outline-bg-hovered": index.default.BG_1,
   "button-outline-border-color-hovered": index.default.BG_3,
   "button-outline-color-active": index.default.BLACK,
-  "button-outline-background-color-active": index.default.BG_2,
+  "button-outline-bg-active": index.default.BG_2,
   "button-outline-border-color-active": index.default.BG_3,
   "button-outline-color-disabled": index.default.BG_4,
-  "button-outline-background-color-disabled": index.default.WHITE,
+  "button-outline-bg-disabled": index.default.WHITE,
   "button-outline-border-color-disabled": index.default.BG_2,
   "button-clear-color": index.default.PRIMARY_DEFAULT_4,
   "button-clear-color-hovered": index.default.PRIMARY_DEFAULT_4,
   "button-clear-color-active": index.default.PRIMARY_DEFAULT_5,
   "button-clear-color-disabled": index.default.BG_4,
-  "button-clear-background-color-disabled": index.default.WHITE,
+  "button-clear-bg-disabled": index.default.WHITE,
   "button-clear-border-color-disabled": index.default.WHITE,
   "input-primary-border-color": index.default.BG_3,
   "input-primary-plaseholder-color": index.default.BG_2,
   "input-primary-border-color-error": index.default.ALERT,
-  "input-primary-background-color-error": index.default.TRETIARY_DEFAULT_2,
+  "input-primary-bg-error": index.default.TRETIARY_DEFAULT_2,
   "input-primary-box-shadow-color-error": index.default.TRETIARY_DEFAULT_2,
-  "checkbox-background-color-checked": index.default.PRIMARY_DEFAULT_4,
-  "checkbox-background-color-hovered": index.default.PRIMARY_DEFAULT_4,
+  "checkbox-bg-checked": index.default.PRIMARY_DEFAULT_4,
+  "checkbox-bg-hovered": index.default.PRIMARY_DEFAULT_4,
   "checkbox-box-shadow-focused": index.default.PRIMARY_DEFAULT_1,
-  "checkbox-background-color-active": index.default.PRIMARY_DEFAULT_4,
+  "checkbox-bg-active": index.default.PRIMARY_DEFAULT_4,
   "checkbox-border-color-active": index.default.PRIMARY_DEFAULT_4,
   "checkbox-box-shadow-active": index.default.PRIMARY_DEFAULT_4,
-  "checkbox-background-color-disabled": index.default.PRIMARY_DEFAULT_1,
-  "input-radio-background-color-checked": index.default.PRIMARY_DEFAULT_4,
-  "input-radio-background-color-hovered": index.default.PRIMARY_DEFAULT_4,
+  "checkbox-bg-disabled": index.default.PRIMARY_DEFAULT_1,
+  "input-radio-bg-checked": index.default.PRIMARY_DEFAULT_4,
+  "input-radio-bg-hovered": index.default.PRIMARY_DEFAULT_4,
   "input-radio-box-shadow-focused": index.default.PRIMARY_DEFAULT_1,
-  "input-radio-background-color-focused": index.default.PRIMARY_DEFAULT_1,
+  "input-radio-bg-focused": index.default.PRIMARY_DEFAULT_1,
   "input-radio-border-color-focused": index.default.PRIMARY_DEFAULT_1,
-  "switch-background-color": index.default.BG_2,
+  "switch-bg": index.default.BG_2,
   "switch-border-color": index.default.BG_2,
-  "switch-background-color-checked": index.default.PRIMARY_DEFAULT_5,
+  "switch-bg-checked": index.default.PRIMARY_DEFAULT_5,
   "switch-border-color-checked": index.default.PRIMARY_DEFAULT_5,
-  "tooltip-background-color": index.default.BLACK,
+  "tooltip-bg": index.default.BLACK,
   "tooltip-color": index.default.WHITE,
-  "tooltip-border-radius": "4px"
+  "status-failure": index.default.ALERT,
+  "status-failure-bg": "rgba(244, 87, 37, .12)",
+  "status-success": index.default.SUCCESS,
+  "status-success-bg": "rgba(74, 201, 155, .12)",
+  "status-warning": "#ffc700",
+  "status-warning-bg": "rgba(255, 199, 0, .12)",
+  "status-info": "#70b6f6",
+  "status-info-bg": "rgba(112, 182, 246, .12)",
+  "status-neutral": index.default.BG_5,
+  "status-neutral-bg": index.default.BG_1
 };
 
 exports.default = THEME_DEFAULT;

package/Tooltip/Tooltip.module.css

@@ -97,7 +97,7 @@
   position: relative;
 }
 .tail::before {
-  border-bottom: 5px solid var(--tooltip-background-color);
+  border-bottom: 5px solid var(--tooltip-bg);
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
   content: "";
@@ -108,8 +108,8 @@
 }
 
 .overlay {
-  background-color: var(--tooltip-background-color);
-  border-radius: var(--tooltip-border-radius);
+  background-color: var(--tooltip-bg);
+  border-radius: 0.35rem;
   color: var(--tooltip-color);
   font-size: 14px;
   font-style: normal;

package/Typography/index.js

@@ -17,7 +17,7 @@ var clx = classNames__default.default.bind(styles__default.default);
 var Typography = function Typography(_a) {
   var _b;
   var _c = _a.tag,
-    Element = _c === void 0 ? "span" : _c,
+    Component = _c === void 0 ? "span" : _c,
     children = _a.children,
     variant = _a.variant,
     size = _a.size,
@@ -25,7 +25,7 @@ var Typography = function Typography(_a) {
     fontWeight = _a.fontWeight,
     className = _a.className,
     props = tslib.__rest(_a, ["tag", "children", "variant", "size", "style", "fontWeight", "className"]);
-  return /*#__PURE__*/React__default.default.createElement(Element, tslib.__assign({}, props, {
+  return /*#__PURE__*/React__default.default.createElement(Component, tslib.__assign({}, props, {
     style: style,
     className: clx((_b = {
       root: true

package/base/InputRoot/InputRoot.module.css

@@ -52,7 +52,7 @@
   pointer-events: none;
 }
 .variant_primary_error {
-  background-color: var(--input-primary-background-color-error);
+  background-color: var(--input-primary-bg-error);
   border-color: var(--input-primary-border-color-error);
 }
 .variant_primary_error:hover {

package/esm/Avatar/assets/user-circle.svg.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+var _g, _defs;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var SvgUserCircle = function SvgUserCircle(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 42,
+    height: 42,
+    fill: "none"
+  }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#user-circle_svg__a)"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#ECEEF2",
+    d: "M21.266 41.475C32.717 41.475 42 32.194 42 20.745S32.717.013 21.266.013C9.816.014.532 9.295.532 20.744s9.283 20.731 20.734 20.731"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#000",
+    d: "M11.949 19.867a1.866 1.866 0 1 0 0-3.732 1.866 1.866 0 0 0 0 3.732M26.044 30.49c.29 1.953-.396 3.77-1.887 4.53-1.49.76-3.364.246-4.772-1.136 1.01-.185 2.208-.558 3.559-1.247 1.35-.688 2.356-1.437 3.1-2.147M26.048 19.867a1.866 1.866 0 1 0 0-3.732 1.866 1.866 0 0 0 0 3.732M20.765 15.72l2.955 7.878h-5.91z"
+  }))), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "user-circle_svg__a"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    d: "M0 0h42v41.475H0z"
+  })))));
+};
+var userCircleUrl = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2242%22%20height%3D%2242%22%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url%28%23a%29%22%3E%3Cpath%20fill%3D%22%23ECEEF2%22%20d%3D%22M21.266%2041.475C32.717%2041.475%2042%2032.194%2042%2020.745S32.717.013%2021.266.013C9.816.014.532%209.295.532%2020.744s9.283%2020.731%2020.734%2020.731%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M11.949%2019.867a1.866%201.866%200%201%200%200-3.732%201.866%201.866%200%200%200%200%203.732%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20fillRule%3D%22evenodd%22%20d%3D%22M26.044%2030.49c.29%201.953-.396%203.77-1.887%204.53-1.49.76-3.364.246-4.772-1.136%201.01-.185%202.208-.558%203.559-1.247%201.35-.688%202.356-1.437%203.1-2.147%22%20clipRule%3D%22evenodd%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M26.048%2019.867a1.866%201.866%200%201%200%200-3.732%201.866%201.866%200%200%200%200%203.732%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20fillRule%3D%22evenodd%22%20d%3D%22m20.765%2015.72%202.955%207.878h-5.91z%22%20clipRule%3D%22evenodd%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22a%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%200h42v41.475H0z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E";
+
+export { SvgUserCircle as ReactComponent, userCircleUrl as default };

package/esm/Avatar/index.js

@@ -1,7 +1,7 @@
 import React__default, { memo } from 'react';
 import classNames from 'classnames/bind';
 import { AvatarSizes } from './constants.js';
-import maleCircleUrl from './assets/male-circle.svg.js';
+import userCircleUrl from './assets/user-circle.svg.js';
 import orgCircleUrl from './assets/org-circle.svg.js';
 import styles from './Avatar.module.css';
 import { AccountType } from './index.props.js';
@@ -18,7 +18,7 @@ var Avatar = /*#__PURE__*/memo(function (props) {
     _c = props.accountType,
     accountType = _c === void 0 ? AccountType.Organization : _c;
   var isOrg = accountType === AccountType.Organization;
-  var stubImageURL = isOrg ? orgCircleUrl : maleCircleUrl;
+  var stubImageURL = isOrg ? orgCircleUrl : userCircleUrl;
   return /*#__PURE__*/React__default.createElement("img", {
     alt: title,
     src: avatarURL || stubImageURL,

package/esm/Button/Button.module.css

@@ -1,7 +1,7 @@
 .root {
   align-items: center;
   border: 1px solid;
-  border-radius: var(--button-border-radius);
+  border-radius: 1.125rem;
   box-sizing: border-box;
   color: 0.15s linear;
   cursor: pointer;
@@ -68,88 +68,88 @@
 }
 
 .variant_primary {
-  background-color: var(--button-primary-background-color);
+  background-color: var(--button-primary-bg);
   border-color: var(--button-primary-border-color);
   color: var(--button-primary-color);
 }
 .variant_primary:hover {
-  background-color: var(--button-primary-background-color-hovered);
+  background-color: var(--button-primary-bg-hovered);
   border-color: var(--button-primary-border-color-hovered);
   color: var(--button-primary-color-hovered);
 }
 .variant_primary:active {
-  background-color: var(--button-primary-background-color-active);
+  background-color: var(--button-primary-bg-active);
   border-color: var(--button-primary-border-color-active);
   color: var(--button-primary-color-active);
 }
 .variant_primary_disabled {
-  background-color: var(--button-primary-background-color-disabled);
+  background-color: var(--button-primary-bg-disabled);
   border-color: var(--button-primary-border-color-disabled);
   color: var(--button-primary-color-disabled);
   cursor: not-allowed;
   pointer-events: none;
 }
 .variant_secondary {
-  background-color: var(--button-secondary-background-color);
+  background-color: var(--button-secondary-bg);
   border-color: var(--button-secondary-border-color);
   color: var(--button-secondary-color);
 }
 .variant_secondary:hover {
-  background-color: var(--button-secondary-background-color-hovered);
+  background-color: var(--button-secondary-bg-hovered);
   border-color: var(--button-secondary-border-color-hovered);
   color: var(--button-secondary-color-hovered);
 }
 .variant_secondary:active {
-  background-color: var(--button-secondary-background-color-active);
+  background-color: var(--button-secondary-bg-active);
   border-color: var(--button-secondary-border-color-active);
   color: var(--button-secondary-color-active);
 }
 .variant_secondary_disabled {
-  background-color: var(--button-secondary-background-color-disabled);
+  background-color: var(--button-secondary-bg-disabled);
   border-color: var(--button-secondary-border-color-disabled);
   color: var(--button-secondary-color-disabled);
   cursor: not-allowed;
   pointer-events: none;
 }
 .variant_pseudo {
-  background-color: var(--button-pseudo-background-color);
+  background-color: var(--button-pseudo-bg);
   border-color: var(--button-pseudo-border-color);
   color: var(--button-pseudo-color);
 }
 .variant_pseudo:hover {
-  background-color: var(--button-pseudo-background-color-hovered);
+  background-color: var(--button-pseudo-bg-hovered);
   border-color: var(--button-pseudo-border-color-hovered);
   color: var(--button-pseudo-color-hovered);
 }
 .variant_pseudo:active {
-  background-color: var(--button-pseudo-background-color-active);
+  background-color: var(--button-pseudo-bg-active);
   border-color: var(--button-pseudo-border-color-active);
   color: var(--button-pseudo-color-active);
 }
 .variant_pseudo_disabled {
-  background-color: var(--button-pseudo-background-color-disabled);
+  background-color: var(--button-pseudo-bg-disabled);
   border-color: var(--button-pseudo-border-color-disabled);
   color: var(--button-pseudo-color-disabled);
   cursor: not-allowed;
   pointer-events: none;
 }
 .variant_outline {
-  background-color: var(--button-outline-background-color);
+  background-color: var(--button-outline-bg);
   border-color: var(--button-outline-border-color);
   color: var(--button-outline-color);
 }
 .variant_outline:hover {
-  background-color: var(--button-outline-background-color-hovered);
+  background-color: var(--button-outline-bg-hovered);
   border-color: var(--button-outline-border-color-hovered);
   color: var(--button-outline-color-hovered);
 }
 .variant_outline:active {
-  background-color: var(--button-outline-background-color-active);
+  background-color: var(--button-outline-bg-active);
   border-color: var(--button-outline-border-color-active);
   color: var(--button-outline-color-active);
 }
 .variant_outline_disabled {
-  background-color: var(--button-outline-background-color-disabled);
+  background-color: var(--button-outline-bg-disabled);
   border-color: var(--button-outline-border-color-disabled);
   color: var(--button-outline-color-disabled);
   cursor: not-allowed;
@@ -167,7 +167,7 @@
   color: var(--button-clear-color-active);
 }
 .variant_clear_disabled {
-  background-color: var(--button-clear-background-color-disabled);
+  background-color: var(--button-clear-bg-disabled);
   border-color: var(--button-clear-border-color-disabled);
   color: var(--button-clear-color-disabled);
   cursor: not-allowed;

package/esm/Checkbox/Checkbox.module.css

@@ -35,7 +35,7 @@
 }
 
 .checked {
-  background-color: var(--checkbox-background-color-checked);
+  background-color: var(--checkbox-bg-checked);
   border: 0;
 }
 .checked::after {
@@ -76,14 +76,14 @@
   box-shadow: 0 0 0 2px var(--checkbox-box-shadow-focused);
 }
 .control_variant_primary:hover:not(:disabled) + .fake-checkbox {
-  background-color: var(--checkbox-background-color-hovered);
+  background-color: var(--checkbox-bg-hovered);
 }
 .control_variant_primary:active:not(:disabled) + .fake-checkbox {
-  background-color: var(--checkbox-background-color-active);
+  background-color: var(--checkbox-bg-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-background-color-disabled);
+  background-color: var(--checkbox-bg-disabled);
   z-index: 1;
 }

package/esm/Chip/Chip.module.css

@@ -6,9 +6,7 @@
 .inner {
   box-sizing: border-box;
   display: flex;
-  font-family: Roboto, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  font: inherit;
   min-width: 0;
   place-items: stretch flex-start;
   transition-duration: 0.3s;

package/esm/InputRadio/InputRadio.module.css

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

package/esm/Menu/components/MenuItem/index.js

@@ -16,7 +16,7 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
     ref: ref,
     "data-component": "menu-item",
     style: {
-      backgroundColor: isSelected ? "var(--palette-primary-1, rgb(232, 240, 254))" : "transparent"
+      backgroundColor: isSelected ? "var(--palette-primary-1, rgb(232, 240, 254))" : ""
     },
     "data-testid": "menuitem",
     className: clx("item", (_b = {

package/esm/Status/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { StatusProps } from "./index.props";
+declare const Status: ({ className, tag: Component, children, type, }: StatusProps) => React.JSX.Element;
+export default Status;

package/esm/Status/index.js

@@ -0,0 +1,18 @@
+import React__default from 'react';
+import classNames from 'classnames/bind';
+import styles from './index.module.css';
+
+var clx = classNames.bind(styles);
+var Status = function Status(_a) {
+  var _b;
+  var className = _a.className,
+    _c = _a.tag,
+    Component = _c === void 0 ? "span" : _c,
+    children = _a.children,
+    type = _a.type;
+  return /*#__PURE__*/React__default.createElement(Component, {
+    className: clx(styles.root, (_b = {}, _b["root_".concat(type)] = !!type, _b), className)
+  }, children);
+};
+
+export { Status as default };

package/esm/Status/index.module.css

@@ -0,0 +1,45 @@
+.root {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  background-color: var(--status-neutral-bg);
+  line-height: 1.5rem;
+  padding: 0 0.5rem;
+  border-radius: 6rem;
+  inline-size: fit-content;
+  box-sizing: border-box;
+  white-space: nowrap;
+  overflow: hidden;
+  vertical-align: middle;
+}
+.root::before {
+  background-color: var(--status-neutral);
+  content: "";
+  inline-size: 0.4rem;
+  block-size: 0.4rem;
+  border-radius: 100%;
+}
+.root_success {
+  background-color: var(--status-success-bg);
+}
+.root_success::before {
+  background-color: var(--status-success);
+}
+.root_info {
+  background-color: var(--status-info-bg);
+}
+.root_info::before {
+  background-color: var(--status-info);
+}
+.root_failure {
+  background-color: var(--status-failure-bg);
+}
+.root_failure::before {
+  background-color: var(--status-failure);
+}
+.root_warning {
+  background-color: var(--status-warning-bg);
+}
+.root_warning::before {
+  background-color: var(--status-warning);
+}

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

@@ -0,0 +1,13 @@
+export type StatusTag = "span" | "div";
+export declare enum STATUS_TYPE {
+    SUCCESS = "success",
+    FAILURE = "failure",
+    INFO = "info",
+    WARNING = "warning"
+}
+export type StatusProps = {
+    className?: string;
+    tag?: StatusTag;
+    children?: string;
+    type?: STATUS_TYPE;
+};

package/esm/Switch/Switch.module.css

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

package/esm/TabsMenu/Tab/Tab.props.d.ts

@@ -9,7 +9,6 @@ export type TabProps = {
     onClick?: MouseEventHandler<HTMLLIElement>;
     innerRef?: RefObject<HTMLLIElement>;
     className?: string;
-    role?: string;
     tabIndex?: number;
     onKeyDown?: KeyboardEventHandler<HTMLElement>;
     size?: Size;

package/esm/TabsMenu/index.js

@@ -14,9 +14,8 @@ var TabsMenu = function TabsMenu(_a) {
     tabs = _a.tabs,
     _b = _a.size,
     size = _b === void 0 ? "m" : _b,
-    externalTabsRefs = _a.tabsRefs,
-    props = __rest(_a, ["activeTab", "onChange", "className", "innerRef", "tabs", "size", "tabsRefs"]);
-  var tabsRefs = externalTabsRefs || useMemo(function () {
+    props = __rest(_a, ["activeTab", "onChange", "className", "innerRef", "tabs", "size"]);
+  var tabsRefs = useMemo(function () {
     return tabs.map(function () {
       return /*#__PURE__*/createRef();
     });

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

@@ -5,7 +5,6 @@ export type TabsMenuProps = {
     activeTab?: string;
     onChange?: (tabId: string) => void;
     tabs: TabProps[];
-    tabsRefs?: RefObject<HTMLLIElement>[];
     innerRef?: RefObject<HTMLUListElement>;
     className?: string;
     size?: Size;

package/esm/Theme/colors/common.js

@@ -1,7 +1,7 @@
 import { __assign } from 'tslib';
 
 var Common = {
-  WHITE: "#fff",
+  WHITE: "#FFF",
   BLACK: "#000"
 };
 var Backgrounds = {
@@ -12,8 +12,8 @@ var Backgrounds = {
   BG_5: "#BCC1CC"
 };
 var Accents = {
-  ALERT: "#ff564e",
-  SUCCESS: "#28bc00"
+  ALERT: "#FF564E",
+  SUCCESS: "#4AC99B"
 };
 var Color = __assign(__assign(__assign({}, Common), Accents), Backgrounds);
 

package/esm/Theme/colors/theme_buenos_aires.js

@@ -1,17 +1,17 @@
 import { __assign } from 'tslib';
 
 var PrimaryBA = {
-  PRIMARY_BA_1: "#ffe695",
-  PRIMARY_BA_2: "#ffe07b",
-  PRIMARY_BA_3: "#ffd85a",
-  PRIMARY_BA_4: "#ffce31",
-  PRIMARY_BA_5: "#ffc818"
+  PRIMARY_BA_1: "#FFE695",
+  PRIMARY_BA_2: "#FFE07B",
+  PRIMARY_BA_3: "#FFD85A",
+  PRIMARY_BA_4: "#FFCE31",
+  PRIMARY_BA_5: "#FFC818"
 };
 var SecondaryBA = {
-  SECONDARY_BA_1: "#7d7d7d",
-  SECONDARY_BA_2: "#5c5c5c",
+  SECONDARY_BA_1: "#7D7D7D",
+  SECONDARY_BA_2: "#5C5C5C",
   SECONDARY_BA_3: "#333",
-  SECONDARY_BA_4: "#1f1f1f",
+  SECONDARY_BA_4: "#1F1F1F",
   SECONDARY_BA_5: "#000"
 };
 var TretiaryBA = {
@@ -19,13 +19,13 @@ var TretiaryBA = {
   TRETIARY_BA_2: "#C0CFF8",
   TRETIARY_BA_3: "#AFC3F5",
   TRETIARY_BA_4: "#80A0ED",
-  TRETIARY_BA_5: "#6088ea"
+  TRETIARY_BA_5: "#6088EA"
 };
 var BrandBA = {
-  BRAND_BA_1: "#fcdfe2",
-  BRAND_BA_2: "#facdd2",
-  BRAND_BA_3: "#F59fa7",
-  BRAND_BA_4: "#ef6975",
+  BRAND_BA_1: "#FCDFE2",
+  BRAND_BA_2: "#FACDD2",
+  BRAND_BA_3: "#F59FA7",
+  BRAND_BA_4: "#EF6975",
   BRAND_BA_5: "#E61428"
 };
 var Color = __assign(__assign(__assign(__assign({}, BrandBA), PrimaryBA), SecondaryBA), TretiaryBA);