colibri-ui 0.7.85 → 0.7.86

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

package/esm/Theme/colors/theme_default.js

@@ -8,18 +8,18 @@ var Primary = {
   PRIMARY_DEFAULT_5: "#0066DC"
 };
 var Secondary = {
-  SECONDARY_DEFAULT_1: "#fff1db",
-  SECONDARY_DEFAULT_2: "#ffdaa3",
-  SECONDARY_DEFAULT_3: "#ffca79",
-  SECONDARY_DEFAULT_4: "#f4b968",
-  SECONDARY_DEFAULT_5: "#ffab0f"
+  SECONDARY_DEFAULT_1: "#FFF1DB",
+  SECONDARY_DEFAULT_2: "#FFDAA3",
+  SECONDARY_DEFAULT_3: "#FFCA79",
+  SECONDARY_DEFAULT_4: "#F4B968",
+  SECONDARY_DEFAULT_5: "#FFAB0F"
 };
 var Tretiary = {
   TRETIARY_DEFAULT_1: "#FFF5F0",
   TRETIARY_DEFAULT_2: "#FFEAE2",
   TRETIARY_DEFAULT_3: "#FFD8CA",
-  TRETIARY_DEFAULT_4: "#FFA384 ",
-  TRETIARY_DEFAULT_5: "#fc5200"
+  TRETIARY_DEFAULT_4: "#FFA384",
+  TRETIARY_DEFAULT_5: "#FC5200"
 };
 var Brand = {
   BRAND_DEFAULT_1: "#F393D2",

package/esm/Theme/index.d.ts

@@ -25,85 +25,93 @@ export declare const THEMES: {
         "typography-alert": string;
         "typography-success": string;
         "typography-secondary": string;
-        "button-border-radius": string;
         "button-primary-color": string;
-        "button-primary-background-color": string;
+        "button-primary-bg": string;
         "button-primary-border-color": string;
         "button-primary-color-hovered": string;
-        "button-primary-background-color-hovered": string;
+        "button-primary-bg-hovered": string;
         "button-primary-border-color-hovered": string;
         "button-primary-color-active": string;
-        "button-primary-background-color-active": string;
+        "button-primary-bg-active": string;
         "button-primary-border-color-active": string;
         "button-primary-color-disabled": string;
-        "button-primary-background-color-disabled": string;
+        "button-primary-bg-disabled": string;
         "button-primary-border-color-disabled": string;
         "button-secondary-color": string;
-        "button-secondary-background-color": string;
+        "button-secondary-bg": string;
         "button-secondary-border-color": string;
         "button-secondary-color-hovered": string;
-        "button-secondary-background-color-hovered": string;
+        "button-secondary-bg-hovered": string;
         "button-secondary-border-color-hovered": string;
         "button-secondary-color-active": string;
-        "button-secondary-background-color-active": string;
+        "button-secondary-bg-active": string;
         "button-secondary-border-color-active": string;
         "button-secondary-color-disabled": string;
-        "button-secondary-background-color-disabled": string;
+        "button-secondary-bg-disabled": string;
         "button-secondary-border-color-disabled": string;
         "button-pseudo-color": string;
-        "button-pseudo-background-color": string;
+        "button-pseudo-bg": string;
         "button-pseudo-border-color": string;
         "button-pseudo-color-hovered": string;
-        "button-pseudo-background-color-hovered": string;
+        "button-pseudo-bg-hovered": string;
         "button-pseudo-border-color-hovered": string;
         "button-pseudo-color-active": string;
-        "button-pseudo-background-color-active": string;
+        "button-pseudo-bg-active": string;
         "button-pseudo-border-color-active": string;
         "button-pseudo-color-disabled": string;
-        "button-pseudo-background-color-disabled": string;
+        "button-pseudo-bg-disabled": string;
         "button-pseudo-border-color-disabled": string;
         "button-outline-color": string;
-        "button-outline-background-color": string;
+        "button-outline-bg": string;
         "button-outline-border-color": string;
         "button-outline-color-hovered": string;
-        "button-outline-background-color-hovered": string;
+        "button-outline-bg-hovered": string;
         "button-outline-border-color-hovered": string;
         "button-outline-color-active": string;
-        "button-outline-background-color-active": string;
+        "button-outline-bg-active": string;
         "button-outline-border-color-active": string;
         "button-outline-color-disabled": string;
-        "button-outline-background-color-disabled": string;
+        "button-outline-bg-disabled": string;
         "button-outline-border-color-disabled": string;
         "button-clear-color": string;
         "button-clear-color-hovered": string;
         "button-clear-color-active": string;
         "button-clear-color-disabled": string;
-        "button-clear-background-color-disabled": string;
+        "button-clear-bg-disabled": string;
         "button-clear-border-color-disabled": string;
         "input-primary-border-color": string;
         "input-primary-plaseholder-color": string;
         "input-primary-border-color-error": string;
-        "input-primary-background-color-error": string;
+        "input-primary-bg-error": string;
         "input-primary-box-shadow-color-error": string;
-        "checkbox-background-color-checked": string;
-        "checkbox-background-color-hovered": string;
+        "checkbox-bg-checked": string;
+        "checkbox-bg-hovered": string;
         "checkbox-box-shadow-focused": string;
-        "checkbox-background-color-active": string;
+        "checkbox-bg-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;
+        "checkbox-bg-disabled": string;
+        "input-radio-bg-checked": string;
+        "input-radio-bg-hovered": string;
         "input-radio-box-shadow-focused": string;
-        "input-radio-background-color-focused": string;
+        "input-radio-bg-focused": string;
         "input-radio-border-color-focused": string;
-        "switch-background-color": string;
+        "switch-bg": string;
         "switch-border-color": string;
-        "switch-background-color-checked": string;
+        "switch-bg-checked": string;
         "switch-border-color-checked": string;
-        "tooltip-background-color": string;
+        "tooltip-bg": string;
         "tooltip-color": string;
-        "tooltip-border-radius": string;
+        "status-failure": string;
+        "status-failure-bg": string;
+        "status-success": string;
+        "status-success-bg": string;
+        "status-warning": string;
+        "status-warning-bg": string;
+        "status-info": string;
+        "status-info-bg": string;
+        "status-neutral": string;
+        "status-neutral-bg": string;
     };
     BA: {
         "palette-black": string;
@@ -131,84 +139,92 @@ export declare const THEMES: {
         "typography-alert": string;
         "typography-success": string;
         "typography-secondary": string;
-        "button-border-radius": string;
         "button-primary-color": string;
-        "button-primary-background-color": string;
+        "button-primary-bg": string;
         "button-primary-border-color": string;
         "button-primary-color-hovered": string;
-        "button-primary-background-color-hovered": string;
+        "button-primary-bg-hovered": string;
         "button-primary-border-color-hovered": string;
         "button-primary-color-active": string;
-        "button-primary-background-color-active": string;
+        "button-primary-bg-active": string;
         "button-primary-border-color-active": string;
         "button-primary-color-disabled": string;
-        "button-primary-background-color-disabled": string;
+        "button-primary-bg-disabled": string;
         "button-primary-border-color-disabled": string;
         "button-secondary-color": string;
-        "button-secondary-background-color": string;
+        "button-secondary-bg": string;
         "button-secondary-border-color": string;
         "button-secondary-color-hovered": string;
-        "button-secondary-background-color-hovered": string;
+        "button-secondary-bg-hovered": string;
         "button-secondary-border-color-hovered": string;
         "button-secondary-color-active": string;
-        "button-secondary-background-color-active": string;
+        "button-secondary-bg-active": string;
         "button-secondary-border-color-active": string;
         "button-secondary-color-disabled": string;
-        "button-secondary-background-color-disabled": string;
+        "button-secondary-bg-disabled": string;
         "button-secondary-border-color-disabled": string;
         "button-outline-color": string;
-        "button-outline-background-color": string;
+        "button-outline-bg": string;
         "button-outline-border-color": string;
         "button-outline-color-hovered": string;
-        "button-outline-background-color-hovered": string;
+        "button-outline-bg-hovered": string;
         "button-outline-border-color-hovered": string;
         "button-outline-color-active": string;
-        "button-outline-background-color-active": string;
+        "button-outline-bg-active": string;
         "button-outline-border-color-active": string;
         "button-outline-color-disabled": string;
-        "button-outline-background-color-disabled": string;
+        "button-outline-bg-disabled": string;
         "button-outline-border-color-disabled": string;
         "button-pseudo-color": string;
-        "button-pseudo-background-color": string;
+        "button-pseudo-bg": string;
         "button-pseudo-border-color": string;
         "button-pseudo-color-hovered": string;
-        "button-pseudo-background-color-hovered": string;
+        "button-pseudo-bg-hovered": string;
         "button-pseudo-border-color-hovered": string;
         "button-pseudo-color-active": string;
-        "button-pseudo-background-color-active": string;
+        "button-pseudo-bg-active": string;
         "button-pseudo-border-color-active": string;
         "button-pseudo-color-disabled": string;
-        "button-pseudo-background-color-disabled": string;
+        "button-pseudo-bg-disabled": string;
         "button-pseudo-border-color-disabled": string;
         "button-clear-color": string;
         "button-clear-color-hovered": string;
         "button-clear-color-active": string;
         "button-clear-color-disabled": string;
-        "button-clear-background-color-disabled": string;
+        "button-clear-bg-disabled": string;
         "button-clear-border-color-disabled": string;
         "input-primary-border-color": string;
         "input-primary-plaseholder-color": string;
         "input-primary-border-color-error": string;
-        "input-primary-background-color-error": string;
+        "input-primary-bg-error": string;
         "input-primary-box-shadow-color-error": string;
-        "checkbox-background-color-checked": string;
-        "checkbox-background-color-hovered": string;
+        "checkbox-bg-checked": string;
+        "checkbox-bg-hovered": string;
         "checkbox-box-shadow-focused": string;
-        "checkbox-background-color-active": string;
+        "checkbox-bg-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;
+        "checkbox-bg-disabled": string;
+        "input-radio-bg-checked": string;
+        "input-radio-bg-hovered": string;
         "input-radio-box-shadow-focused": string;
-        "input-radio-background-color-focused": string;
+        "input-radio-bg-focused": string;
         "input-radio-border-color-focused": string;
-        "switch-background-color": string;
+        "switch-bg": string;
         "switch-border-color": string;
-        "switch-background-color-checked": string;
+        "switch-bg-checked": string;
         "switch-border-color-checked": string;
-        "tooltip-background-color": string;
+        "tooltip-bg": string;
         "tooltip-color": string;
-        "tooltip-border-radius": string;
+        "status-failure": string;
+        "status-failure-bg": string;
+        "status-success": string;
+        "status-success-bg": string;
+        "status-warning": string;
+        "status-warning-bg": string;
+        "status-info": string;
+        "status-info-bg": string;
+        "status-neutral": string;
+        "status-neutral-bg": string;
     };
 };