colibri-ui 0.7.85 → 0.7.87

package/esm/Theme/themes/default.js

@@ -26,85 +26,93 @@ var THEME_DEFAULT = {
   "typography-alert": Color.ALERT,
   "typography-success": Color.SUCCESS,
   "typography-secondary": Color.BG_3,
-  "button-border-radius": "18px",
   "button-primary-color": Color.WHITE,
-  "button-primary-background-color": Color.PRIMARY_DEFAULT_4,
+  "button-primary-bg": Color.PRIMARY_DEFAULT_4,
   "button-primary-border-color": Color.PRIMARY_DEFAULT_4,
   "button-primary-color-hovered": Color.WHITE,
-  "button-primary-background-color-hovered": Color.PRIMARY_DEFAULT_5,
+  "button-primary-bg-hovered": Color.PRIMARY_DEFAULT_5,
   "button-primary-border-color-hovered": Color.PRIMARY_DEFAULT_5,
   "button-primary-color-active": Color.WHITE,
-  "button-primary-background-color-active": Color.PRIMARY_DEFAULT_5,
+  "button-primary-bg-active": Color.PRIMARY_DEFAULT_5,
   "button-primary-border-color-active": Color.PRIMARY_DEFAULT_5,
   "button-primary-color-disabled": Color.BG_4,
-  "button-primary-background-color-disabled": Color.PRIMARY_DEFAULT_1,
+  "button-primary-bg-disabled": Color.PRIMARY_DEFAULT_1,
   "button-primary-border-color-disabled": Color.PRIMARY_DEFAULT_1,
   "button-secondary-color": Color.WHITE,
-  "button-secondary-background-color": Color.SECONDARY_DEFAULT_4,
+  "button-secondary-bg": Color.SECONDARY_DEFAULT_4,
   "button-secondary-border-color": Color.SECONDARY_DEFAULT_4,
   "button-secondary-color-hovered": Color.WHITE,
-  "button-secondary-background-color-hovered": Color.SECONDARY_DEFAULT_5,
+  "button-secondary-bg-hovered": Color.SECONDARY_DEFAULT_5,
   "button-secondary-border-color-hovered": Color.SECONDARY_DEFAULT_5,
   "button-secondary-color-active": Color.WHITE,
-  "button-secondary-background-color-active": Color.SECONDARY_DEFAULT_5,
+  "button-secondary-bg-active": Color.SECONDARY_DEFAULT_5,
   "button-secondary-border-color-active": Color.SECONDARY_DEFAULT_5,
   "button-secondary-color-disabled": Color.BG_4,
-  "button-secondary-background-color-disabled": Color.SECONDARY_DEFAULT_1,
+  "button-secondary-bg-disabled": Color.SECONDARY_DEFAULT_1,
   "button-secondary-border-color-disabled": Color.SECONDARY_DEFAULT_1,
   "button-pseudo-color": Color.BLACK,
-  "button-pseudo-background-color": Color.TRETIARY_DEFAULT_1,
+  "button-pseudo-bg": Color.TRETIARY_DEFAULT_1,
   "button-pseudo-border-color": Color.TRETIARY_DEFAULT_1,
   "button-pseudo-color-hovered": Color.BLACK,
-  "button-pseudo-background-color-hovered": Color.TRETIARY_DEFAULT_1,
+  "button-pseudo-bg-hovered": Color.TRETIARY_DEFAULT_1,
   "button-pseudo-border-color-hovered": Color.TRETIARY_DEFAULT_1,
   "button-pseudo-color-active": Color.BLACK,
-  "button-pseudo-background-color-active": Color.TRETIARY_DEFAULT_2,
+  "button-pseudo-bg-active": Color.TRETIARY_DEFAULT_2,
   "button-pseudo-border-color-active": Color.TRETIARY_DEFAULT_2,
   "button-pseudo-color-disabled": Color.BG_4,
-  "button-pseudo-background-color-disabled": Color.TRETIARY_DEFAULT_1,
+  "button-pseudo-bg-disabled": Color.TRETIARY_DEFAULT_1,
   "button-pseudo-border-color-disabled": Color.TRETIARY_DEFAULT_1,
   "button-outline-color": Color.BLACK,
-  "button-outline-background-color": Color.WHITE,
+  "button-outline-bg": Color.WHITE,
   "button-outline-border-color": Color.BG_3,
   "button-outline-color-hovered": Color.BLACK,
-  "button-outline-background-color-hovered": Color.BG_1,
+  "button-outline-bg-hovered": Color.BG_1,
   "button-outline-border-color-hovered": Color.BG_3,
   "button-outline-color-active": Color.BLACK,
-  "button-outline-background-color-active": Color.BG_2,
+  "button-outline-bg-active": Color.BG_2,
   "button-outline-border-color-active": Color.BG_3,
   "button-outline-color-disabled": Color.BG_4,
-  "button-outline-background-color-disabled": Color.WHITE,
+  "button-outline-bg-disabled": Color.WHITE,
   "button-outline-border-color-disabled": Color.BG_2,
   "button-clear-color": Color.PRIMARY_DEFAULT_4,
   "button-clear-color-hovered": Color.PRIMARY_DEFAULT_4,
   "button-clear-color-active": Color.PRIMARY_DEFAULT_5,
   "button-clear-color-disabled": Color.BG_4,
-  "button-clear-background-color-disabled": Color.WHITE,
+  "button-clear-bg-disabled": Color.WHITE,
   "button-clear-border-color-disabled": Color.WHITE,
   "input-primary-border-color": Color.BG_3,
   "input-primary-plaseholder-color": Color.BG_2,
   "input-primary-border-color-error": Color.ALERT,
-  "input-primary-background-color-error": Color.TRETIARY_DEFAULT_2,
+  "input-primary-bg-error": Color.TRETIARY_DEFAULT_2,
   "input-primary-box-shadow-color-error": Color.TRETIARY_DEFAULT_2,
-  "checkbox-background-color-checked": Color.PRIMARY_DEFAULT_4,
-  "checkbox-background-color-hovered": Color.PRIMARY_DEFAULT_4,
+  "checkbox-bg-checked": Color.PRIMARY_DEFAULT_4,
+  "checkbox-bg-hovered": Color.PRIMARY_DEFAULT_4,
   "checkbox-box-shadow-focused": Color.PRIMARY_DEFAULT_1,
-  "checkbox-background-color-active": Color.PRIMARY_DEFAULT_4,
+  "checkbox-bg-active": Color.PRIMARY_DEFAULT_4,
   "checkbox-border-color-active": Color.PRIMARY_DEFAULT_4,
   "checkbox-box-shadow-active": Color.PRIMARY_DEFAULT_4,
-  "checkbox-background-color-disabled": Color.PRIMARY_DEFAULT_1,
-  "input-radio-background-color-checked": Color.PRIMARY_DEFAULT_4,
-  "input-radio-background-color-hovered": Color.PRIMARY_DEFAULT_4,
+  "checkbox-bg-disabled": Color.PRIMARY_DEFAULT_1,
+  "input-radio-bg-checked": Color.PRIMARY_DEFAULT_4,
+  "input-radio-bg-hovered": Color.PRIMARY_DEFAULT_4,
   "input-radio-box-shadow-focused": Color.PRIMARY_DEFAULT_1,
-  "input-radio-background-color-focused": Color.PRIMARY_DEFAULT_1,
+  "input-radio-bg-focused": Color.PRIMARY_DEFAULT_1,
   "input-radio-border-color-focused": Color.PRIMARY_DEFAULT_1,
-  "switch-background-color": Color.BG_2,
+  "switch-bg": Color.BG_2,
   "switch-border-color": Color.BG_2,
-  "switch-background-color-checked": Color.PRIMARY_DEFAULT_5,
+  "switch-bg-checked": Color.PRIMARY_DEFAULT_5,
   "switch-border-color-checked": Color.PRIMARY_DEFAULT_5,
-  "tooltip-background-color": Color.BLACK,
+  "tooltip-bg": Color.BLACK,
   "tooltip-color": Color.WHITE,
-  "tooltip-border-radius": "4px"
+  "status-failure": Color.ALERT,
+  "status-failure-bg": "rgba(244, 87, 37, .12)",
+  "status-success": Color.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": Color.BG_5,
+  "status-neutral-bg": Color.BG_1
 };
 
 export { THEME_DEFAULT as default };

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

@@ -7,7 +7,7 @@ var clx = classNames.bind(styles);
 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,
@@ -15,7 +15,7 @@ var Typography = function Typography(_a) {
     fontWeight = _a.fontWeight,
     className = _a.className,
     props = __rest(_a, ["tag", "children", "variant", "size", "style", "fontWeight", "className"]);
-  return /*#__PURE__*/React__default.createElement(Element, __assign({}, props, {
+  return /*#__PURE__*/React__default.createElement(Component, __assign({}, props, {
     style: style,
     className: clx((_b = {
       root: true

package/esm/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/index.d.ts

@@ -20,6 +20,7 @@ export { default as RadioGroup } from "./RadioGroup";
 export { default as Select } from "./Select";
 export { default as Separator } from "./Separator";
 export { SkeletonText, SkeletonRect } from "./Skeleton";
+export { default as Status } from "./Status";
 export { default as Switch } from "./Switch";
 export { default as TabsMenu } from "./TabsMenu";
 export { default as TabsPanes } from "./TabsPanes";

package/esm/index.js

@@ -20,6 +20,7 @@ export { default as RadioGroup } from './RadioGroup/index.js';
 export { default as Select } from './Select/index.js';
 export { default as Separator } from './Separator/index.js';
 export { SkeletonRect, SkeletonText } from './Skeleton/index.js';
+export { default as Status } from './Status/index.js';
 export { default as Switch } from './Switch/index.js';
 export { default as TabsMenu } from './TabsMenu/index.js';
 export { default as TabsPanes } from './TabsPanes/index.js';

package/esm/theme_ba_variables.css

@@ -1,106 +1,114 @@
 .theme {
 --palette-black: #000;
---palette-white: #fff;
+--palette-white: #FFF;
 --palette-bg-1: #ECEEF2;
 --palette-bg-2: #E4E6EA;
 --palette-bg-3: #D6D9E0;
 --palette-bg-4: #C9CDD6;
 --palette-bg-5: #BCC1CC;
---palette-brand-default-1: #fcdfe2;
---palette-brand-default-2: #facdd2;
---palette-brand-default-3: #F59fa7;
---palette-primary-1: #ffe695;
---palette-primary-2: #ffe07b;
---palette-primary-3: #ffd85a;
---palette-primary-4: #ffce31;
---palette-primary-5: #ffc818;
+--palette-brand-default-1: #FCDFE2;
+--palette-brand-default-2: #FACDD2;
+--palette-brand-default-3: #F59FA7;
+--palette-primary-1: #FFE695;
+--palette-primary-2: #FFE07B;
+--palette-primary-3: #FFD85A;
+--palette-primary-4: #FFCE31;
+--palette-primary-5: #FFC818;
 --palette-tretiary-1: #DFE7FA;
 --palette-tretiary-2: #C0CFF8;
 --palette-tretiary-3: #AFC3F5;
 --palette-tretiary-4: #80A0ED;
---palette-tretiary-5: #6088ea;
---palette-alert: #ff564e;
---palette-success: #28bc00;
---typography-alert: #ff564e;
---typography-success: #28bc00;
+--palette-tretiary-5: #6088EA;
+--palette-alert: #FF564E;
+--palette-success: #4AC99B;
+--typography-alert: #FF564E;
+--typography-success: #4AC99B;
 --typography-secondary: #D6D9E0;
---button-border-radius: 18px;
 --button-primary-color: #000;
---button-primary-background-color: #ffce31;
---button-primary-border-color: #ffce31;
+--button-primary-bg: #FFCE31;
+--button-primary-border-color: #FFCE31;
 --button-primary-color-hovered: #000;
---button-primary-background-color-hovered: #ffce31;
---button-primary-border-color-hovered: #ffce31;
+--button-primary-bg-hovered: #FFCE31;
+--button-primary-border-color-hovered: #FFCE31;
 --button-primary-color-active: #000;
---button-primary-background-color-active: #ffc818;
---button-primary-border-color-active: #ffc818;
+--button-primary-bg-active: #FFC818;
+--button-primary-border-color-active: #FFC818;
 --button-primary-color-disabled: #C9CDD6;
---button-primary-background-color-disabled: #ffe695;
---button-primary-border-color-disabled: #ffe695;
---button-secondary-color: #fff;
---button-secondary-background-color: #1f1f1f;
---button-secondary-border-color: #1f1f1f;
---button-secondary-color-hovered: #fff;
---button-secondary-background-color-hovered: #1f1f1f;
---button-secondary-border-color-hovered: #1f1f1f;
---button-secondary-color-active: #fff;
---button-secondary-background-color-active: #000;
+--button-primary-bg-disabled: #FFE695;
+--button-primary-border-color-disabled: #FFE695;
+--button-secondary-color: #FFF;
+--button-secondary-bg: #1F1F1F;
+--button-secondary-border-color: #1F1F1F;
+--button-secondary-color-hovered: #FFF;
+--button-secondary-bg-hovered: #1F1F1F;
+--button-secondary-border-color-hovered: #1F1F1F;
+--button-secondary-color-active: #FFF;
+--button-secondary-bg-active: #000;
 --button-secondary-border-color-active: #000;
 --button-secondary-color-disabled: #C9CDD6;
---button-secondary-background-color-disabled: #ECEEF2;
+--button-secondary-bg-disabled: #ECEEF2;
 --button-secondary-border-color-disabled: #ECEEF2;
 --button-outline-color: #000;
---button-outline-background-color: #fff;
---button-outline-border-color: #1f1f1f;
+--button-outline-bg: #FFF;
+--button-outline-border-color: #1F1F1F;
 --button-outline-color-hovered: #000;
---button-outline-background-color-hovered: #ECEEF2;
---button-outline-border-color-hovered: #1f1f1f;
+--button-outline-bg-hovered: #ECEEF2;
+--button-outline-border-color-hovered: #1F1F1F;
 --button-outline-color-active: #000;
---button-outline-background-color-active: #E4E6EA;
---button-outline-border-color-active: #1f1f1f;
+--button-outline-bg-active: #E4E6EA;
+--button-outline-border-color-active: #1F1F1F;
 --button-outline-color-disabled: #C9CDD6;
---button-outline-background-color-disabled: #fff;
+--button-outline-bg-disabled: #FFF;
 --button-outline-border-color-disabled: #E4E6EA;
 --button-pseudo-color: #000;
---button-pseudo-background-color: #DFE7FA;
+--button-pseudo-bg: #DFE7FA;
 --button-pseudo-border-color: #DFE7FA;
 --button-pseudo-color-hovered: #000;
---button-pseudo-background-color-hovered: #DFE7FA;
+--button-pseudo-bg-hovered: #DFE7FA;
 --button-pseudo-border-color-hovered: #DFE7FA;
 --button-pseudo-color-active: #000;
---button-pseudo-background-color-active: #C0CFF8;
+--button-pseudo-bg-active: #C0CFF8;
 --button-pseudo-border-color-active: #C0CFF8;
 --button-pseudo-color-disabled: #C9CDD6;
---button-pseudo-background-color-disabled: #DFE7FA;
+--button-pseudo-bg-disabled: #DFE7FA;
 --button-pseudo-border-color-disabled: #DFE7FA;
---button-clear-color: #1f1f1f;
---button-clear-color-hovered: #1f1f1f;
+--button-clear-color: #1F1F1F;
+--button-clear-color-hovered: #1F1F1F;
 --button-clear-color-active: #000;
 --button-clear-color-disabled: #C9CDD6;
---button-clear-background-color-disabled: #fff;
---button-clear-border-color-disabled: #fff;
+--button-clear-bg-disabled: #FFF;
+--button-clear-border-color-disabled: #FFF;
 --input-primary-border-color: #D6D9E0;
 --input-primary-plaseholder-color: #E4E6EA;
---input-primary-border-color-error: #ff564e;
---input-primary-background-color-error: #FFEAE2;
+--input-primary-border-color-error: #FF564E;
+--input-primary-bg-error: #FFEAE2;
 --input-primary-box-shadow-color-error: #FFEAE2;
---checkbox-background-color-checked: #ffce31;
---checkbox-background-color-hovered: #ffce31;
---checkbox-box-shadow-focused: #ffe695;
---checkbox-background-color-active: #ffce31;
---checkbox-border-color-active: #ffce31;
---checkbox-box-shadow-active: #ffce31;
---checkbox-background-color-disabled: #ffe695;
---input-radio-background-color-checked: #ffce31;
---input-radio-background-color-hovered: #ffce31;
---input-radio-box-shadow-focused: #ffe695;
---input-radio-background-color-focused: #ffe695;
---input-radio-border-color-focused: #ffe695;
---switch-background-color: #E4E6EA;
+--checkbox-bg-checked: #FFCE31;
+--checkbox-bg-hovered: #FFCE31;
+--checkbox-box-shadow-focused: #FFE695;
+--checkbox-bg-active: #FFCE31;
+--checkbox-border-color-active: #FFCE31;
+--checkbox-box-shadow-active: #FFCE31;
+--checkbox-bg-disabled: #FFE695;
+--input-radio-bg-checked: #FFCE31;
+--input-radio-bg-hovered: #FFCE31;
+--input-radio-box-shadow-focused: #FFE695;
+--input-radio-bg-focused: #FFE695;
+--input-radio-border-color-focused: #FFE695;
+--switch-bg: #E4E6EA;
 --switch-border-color: #E4E6EA;
---switch-background-color-checked: #ffc818;
---switch-border-color-checked: #ffc818;
---tooltip-background-color: #333;
---tooltip-color: #fff;
---tooltip-border-radius: 4px;
+--switch-bg-checked: #FFC818;
+--switch-border-color-checked: #FFC818;
+--tooltip-bg: #333;
+--tooltip-color: #FFF;
+--status-failure: #FF564E;
+--status-failure-bg: rgba(244, 87, 37, .12);
+--status-success: #4AC99B;
+--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: #BCC1CC;
+--status-neutral-bg: #ECEEF2;
 }

package/esm/theme_default_variables.css

@@ -1,6 +1,6 @@
 .theme {
 --palette-black: #000;
---palette-white: #fff;
+--palette-white: #FFF;
 --palette-bg-1: #ECEEF2;
 --palette-bg-2: #E4E6EA;
 --palette-bg-3: #D6D9E0;
@@ -17,90 +17,98 @@
 --palette-tretiary-1: #FFF5F0;
 --palette-tretiary-2: #FFEAE2;
 --palette-tretiary-3: #FFD8CA;
---palette-tretiary-4: #FFA384 ;
---palette-tretiary-5: #fc5200;
---palette-alert: #ff564e;
---palette-success: #28bc00;
---typography-alert: #ff564e;
---typography-success: #28bc00;
+--palette-tretiary-4: #FFA384;
+--palette-tretiary-5: #FC5200;
+--palette-alert: #FF564E;
+--palette-success: #4AC99B;
+--typography-alert: #FF564E;
+--typography-success: #4AC99B;
 --typography-secondary: #D6D9E0;
---button-border-radius: 18px;
---button-primary-color: #fff;
---button-primary-background-color: #067AFF;
+--button-primary-color: #FFF;
+--button-primary-bg: #067AFF;
 --button-primary-border-color: #067AFF;
---button-primary-color-hovered: #fff;
---button-primary-background-color-hovered: #0066DC;
+--button-primary-color-hovered: #FFF;
+--button-primary-bg-hovered: #0066DC;
 --button-primary-border-color-hovered: #0066DC;
---button-primary-color-active: #fff;
---button-primary-background-color-active: #0066DC;
+--button-primary-color-active: #FFF;
+--button-primary-bg-active: #0066DC;
 --button-primary-border-color-active: #0066DC;
 --button-primary-color-disabled: #C9CDD6;
---button-primary-background-color-disabled: #E8F0FE;
+--button-primary-bg-disabled: #E8F0FE;
 --button-primary-border-color-disabled: #E8F0FE;
---button-secondary-color: #fff;
---button-secondary-background-color: #f4b968;
---button-secondary-border-color: #f4b968;
---button-secondary-color-hovered: #fff;
---button-secondary-background-color-hovered: #ffab0f;
---button-secondary-border-color-hovered: #ffab0f;
---button-secondary-color-active: #fff;
---button-secondary-background-color-active: #ffab0f;
---button-secondary-border-color-active: #ffab0f;
+--button-secondary-color: #FFF;
+--button-secondary-bg: #F4B968;
+--button-secondary-border-color: #F4B968;
+--button-secondary-color-hovered: #FFF;
+--button-secondary-bg-hovered: #FFAB0F;
+--button-secondary-border-color-hovered: #FFAB0F;
+--button-secondary-color-active: #FFF;
+--button-secondary-bg-active: #FFAB0F;
+--button-secondary-border-color-active: #FFAB0F;
 --button-secondary-color-disabled: #C9CDD6;
---button-secondary-background-color-disabled: #fff1db;
---button-secondary-border-color-disabled: #fff1db;
+--button-secondary-bg-disabled: #FFF1DB;
+--button-secondary-border-color-disabled: #FFF1DB;
 --button-pseudo-color: #000;
---button-pseudo-background-color: #FFF5F0;
+--button-pseudo-bg: #FFF5F0;
 --button-pseudo-border-color: #FFF5F0;
 --button-pseudo-color-hovered: #000;
---button-pseudo-background-color-hovered: #FFF5F0;
+--button-pseudo-bg-hovered: #FFF5F0;
 --button-pseudo-border-color-hovered: #FFF5F0;
 --button-pseudo-color-active: #000;
---button-pseudo-background-color-active: #FFEAE2;
+--button-pseudo-bg-active: #FFEAE2;
 --button-pseudo-border-color-active: #FFEAE2;
 --button-pseudo-color-disabled: #C9CDD6;
---button-pseudo-background-color-disabled: #FFF5F0;
+--button-pseudo-bg-disabled: #FFF5F0;
 --button-pseudo-border-color-disabled: #FFF5F0;
 --button-outline-color: #000;
---button-outline-background-color: #fff;
+--button-outline-bg: #FFF;
 --button-outline-border-color: #D6D9E0;
 --button-outline-color-hovered: #000;
---button-outline-background-color-hovered: #ECEEF2;
+--button-outline-bg-hovered: #ECEEF2;
 --button-outline-border-color-hovered: #D6D9E0;
 --button-outline-color-active: #000;
---button-outline-background-color-active: #E4E6EA;
+--button-outline-bg-active: #E4E6EA;
 --button-outline-border-color-active: #D6D9E0;
 --button-outline-color-disabled: #C9CDD6;
---button-outline-background-color-disabled: #fff;
+--button-outline-bg-disabled: #FFF;
 --button-outline-border-color-disabled: #E4E6EA;
 --button-clear-color: #067AFF;
 --button-clear-color-hovered: #067AFF;
 --button-clear-color-active: #0066DC;
 --button-clear-color-disabled: #C9CDD6;
---button-clear-background-color-disabled: #fff;
---button-clear-border-color-disabled: #fff;
+--button-clear-bg-disabled: #FFF;
+--button-clear-border-color-disabled: #FFF;
 --input-primary-border-color: #D6D9E0;
 --input-primary-plaseholder-color: #E4E6EA;
---input-primary-border-color-error: #ff564e;
---input-primary-background-color-error: #FFEAE2;
+--input-primary-border-color-error: #FF564E;
+--input-primary-bg-error: #FFEAE2;
 --input-primary-box-shadow-color-error: #FFEAE2;
---checkbox-background-color-checked: #067AFF;
---checkbox-background-color-hovered: #067AFF;
+--checkbox-bg-checked: #067AFF;
+--checkbox-bg-hovered: #067AFF;
 --checkbox-box-shadow-focused: #E8F0FE;
---checkbox-background-color-active: #067AFF;
+--checkbox-bg-active: #067AFF;
 --checkbox-border-color-active: #067AFF;
 --checkbox-box-shadow-active: #067AFF;
---checkbox-background-color-disabled: #E8F0FE;
---input-radio-background-color-checked: #067AFF;
---input-radio-background-color-hovered: #067AFF;
+--checkbox-bg-disabled: #E8F0FE;
+--input-radio-bg-checked: #067AFF;
+--input-radio-bg-hovered: #067AFF;
 --input-radio-box-shadow-focused: #E8F0FE;
---input-radio-background-color-focused: #E8F0FE;
+--input-radio-bg-focused: #E8F0FE;
 --input-radio-border-color-focused: #E8F0FE;
---switch-background-color: #E4E6EA;
+--switch-bg: #E4E6EA;
 --switch-border-color: #E4E6EA;
---switch-background-color-checked: #0066DC;
+--switch-bg-checked: #0066DC;
 --switch-border-color-checked: #0066DC;
---tooltip-background-color: #000;
---tooltip-color: #fff;
---tooltip-border-radius: 4px;
+--tooltip-bg: #000;
+--tooltip-color: #FFF;
+--status-failure: #FF564E;
+--status-failure-bg: rgba(244, 87, 37, .12);
+--status-success: #4AC99B;
+--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: #BCC1CC;
+--status-neutral-bg: #ECEEF2;
 }

package/index.d.ts

@@ -20,6 +20,7 @@ export { default as RadioGroup } from "./RadioGroup";
 export { default as Select } from "./Select";
 export { default as Separator } from "./Separator";
 export { SkeletonText, SkeletonRect } from "./Skeleton";
+export { default as Status } from "./Status";
 export { default as Switch } from "./Switch";
 export { default as TabsMenu } from "./TabsMenu";
 export { default as TabsPanes } from "./TabsPanes";

package/index.js

@@ -22,16 +22,17 @@ var index$i = require('./RadioGroup/index.js');
 var index$j = require('./Select/index.js');
 var index$k = require('./Separator/index.js');
 var index$l = require('./Skeleton/index.js');
-var index$m = require('./Switch/index.js');
-var index$n = require('./TabsMenu/index.js');
-var index$o = require('./TabsPanes/index.js');
-var index$p = require('./Theme/index.js');
-var index$q = require('./Tooltip/index.js');
-var index$r = require('./TimeSelect/index.js');
-var index$s = require('./Typography/index.js');
-var index$t = require('./hooks/useMediaSizes/index.js');
-var index$u = require('./hooks/useOnClickOutside/index.js');
-var index$v = require('./hooks/useScrollLock/index.js');
+var index$m = require('./Status/index.js');
+var index$n = require('./Switch/index.js');
+var index$o = require('./TabsMenu/index.js');
+var index$p = require('./TabsPanes/index.js');
+var index$q = require('./Theme/index.js');
+var index$r = require('./Tooltip/index.js');
+var index$s = require('./TimeSelect/index.js');
+var index$t = require('./Typography/index.js');
+var index$u = require('./hooks/useMediaSizes/index.js');
+var index$v = require('./hooks/useOnClickOutside/index.js');
+var index$w = require('./hooks/useScrollLock/index.js');
 require('./Icons/index.js');
 var ArrowNext = require('./Icons/ArrowNext.js');
 var Cart = require('./Icons/Cart.js');
@@ -74,16 +75,17 @@ exports.Select = index$j.default;
 exports.Separator = index$k.default;
 exports.SkeletonRect = index$l.SkeletonRect;
 exports.SkeletonText = index$l.SkeletonText;
-exports.Switch = index$m.default;
-exports.TabsMenu = index$n.default;
-exports.TabsPanes = index$o.default;
-exports.THEMES = index$p.THEMES;
-exports.Tooltip = index$q.default;
-exports.TimeSelect = index$r.default;
-exports.Typography = index$s.default;
-exports.useMediaSizes = index$t.default;
-exports.useOnClickOutside = index$u.default;
-exports.useScrollLock = index$v.default;
+exports.Status = index$m.default;
+exports.Switch = index$n.default;
+exports.TabsMenu = index$o.default;
+exports.TabsPanes = index$p.default;
+exports.THEMES = index$q.THEMES;
+exports.Tooltip = index$r.default;
+exports.TimeSelect = index$s.default;
+exports.Typography = index$t.default;
+exports.useMediaSizes = index$u.default;
+exports.useOnClickOutside = index$v.default;
+exports.useScrollLock = index$w.default;
 exports.ArrowNext = ArrowNext.default;
 exports.Cart = Cart.default;
 exports.Chevron = Chevron.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colibri-ui",
-  "version": "0.7.85",
+  "version": "0.7.87",
   "description": "React UI components library",
   "main": "index.js",
   "scripts": {},