colibri-ui 0.7.140 → 0.7.142

package/ClickOutside/index.js

@@ -2,11 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _typeof = require('@babel/runtime/helpers/typeof');
 var React = require('react');
 var index = require('../hooks/useOnClickOutside/index.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
+var _typeof__default = /*#__PURE__*/_interopDefault(_typeof);
 var React__default = /*#__PURE__*/_interopDefault(React);
 
 var ClickOutside = function ClickOutside(_a) {
@@ -15,17 +17,20 @@ var ClickOutside = function ClickOutside(_a) {
   var childRef = React.useRef();
   index.default(childRef, onClick);
   if (! /*#__PURE__*/React__default.default.isValidElement(children)) return null;
-  return /*#__PURE__*/React__default.default.cloneElement(children, {
+  var combinedRef = function combinedRef(node) {
+    childRef.current = node;
     // @ts-expect-error expected
-    ref: function ref(node) {
-      childRef.current = node;
-      // @ts-expect-error expected
-      var ref = children.ref;
-      // @ts-expect-error expected
-      if (typeof children.ref === "function") {
+    var ref = children.ref;
+    if (ref) {
+      if (typeof ref === "function") {
         ref(node);
+      } else if (_typeof__default.default(ref) === "object" && ref !== null) {
+        ref.current = node;
       }
     }
+  };
+  return /*#__PURE__*/React.cloneElement(children, {
+    ref: combinedRef
   });
 };
 

package/Image/index.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { ImageProps } from "./index.props";
-declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLImageElement>>;
+declare const Image: ({ className, loading, src, fallbackSrc, onClick, srcSet, sizes, ariaLabel, sources, alt, width, height, ref, ...props }: ImageProps) => React.JSX.Element;
 export default Image;

package/Image/index.js

@@ -15,7 +15,7 @@ var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 var emptyImage = "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=";
-var Image = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+var Image = function Image(_a) {
   var className = _a.className,
     _b = _a.loading,
     loading = _b === void 0 ? "lazy" : _b,
@@ -31,7 +31,8 @@ var Image = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     alt = _d === void 0 ? src : _d,
     width = _a.width,
     height = _a.height,
-    props = tslib.__rest(_a, ["className", "loading", "src", "fallbackSrc", "onClick", "srcSet", "sizes", "ariaLabel", "sources", "alt", "width", "height"]);
+    ref = _a.ref,
+    props = tslib.__rest(_a, ["className", "loading", "src", "fallbackSrc", "onClick", "srcSet", "sizes", "ariaLabel", "sources", "alt", "width", "height", "ref"]);
   var _e = React.useState(false),
     isFailed = _e[0],
     setFailed = _e[1];
@@ -67,6 +68,6 @@ var Image = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     srcSet: imageSrcSet,
     sizes: sizes
   }, props)));
-});
+};
 
 exports.default = Image;

package/Image/index.props.d.ts

@@ -6,4 +6,5 @@ export interface BaseImageContainerProps {
     "data-testid"?: string;
 }
 export interface ImageProps extends BaseImageContainerProps, React.ImgHTMLAttributes<HTMLImageElement> {
+    ref?: React.Ref<HTMLImageElement>;
 }

package/Input/index.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { InputProps } from "./index.props";
-declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+declare const Input: ({ className, startIcon, endIcon, label, hint, error, required, onChange, inputRef, disabled, variant, size, ref, ...props }: InputProps) => React.JSX.Element;
 export default Input;

package/Input/index.js

@@ -14,7 +14,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 
-var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+var Input = function Input(_a) {
   var className = _a.className,
     startIcon = _a.startIcon,
     endIcon = _a.endIcon,
@@ -29,7 +29,8 @@ var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     variant = _b === void 0 ? "primary" : _b,
     _c = _a.size,
     size = _c === void 0 ? "m" : _c,
-    props = tslib.__rest(_a, ["className", "startIcon", "endIcon", "label", "hint", "error", "required", "onChange", "inputRef", "disabled", "variant", "size"]);
+    ref = _a.ref,
+    props = tslib.__rest(_a, ["className", "startIcon", "endIcon", "label", "hint", "error", "required", "onChange", "inputRef", "disabled", "variant", "size", "ref"]);
   return /*#__PURE__*/React__default.default.createElement(index.default, {
     className: classNames__default.default(className),
     label: label,
@@ -49,6 +50,6 @@ var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     onChange: onChange,
     type: "text"
   }, props))));
-});
+};
 
 exports.default = Input;

package/Input/index.props.d.ts

@@ -12,4 +12,5 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     error?: boolean;
     required?: boolean;
     inputRef?: ForwardedRef<HTMLInputElement>;
+    ref?: React.Ref<HTMLInputElement>;
 }

package/Menu/index.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { Props } from "./index.props";
-declare const Menu: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLUListElement>>;
+declare const Menu: ({ selected, variant, className, onClick, children, ref, }: Props) => React.JSX.Element;
 export default Menu;

package/Menu/index.js

@@ -13,12 +13,13 @@ var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 var clx = classNames__default.default.bind(styles__default.default);
-var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+var Menu = function Menu(_a) {
   var selected = _a.selected,
     variant = _a.variant,
     className = _a.className,
     onClick = _a.onClick,
-    children = _a.children;
+    children = _a.children,
+    ref = _a.ref;
   var renderChild = React.useMemo(function () {
     return React.Children.map(children, function (child) {
       if (/*#__PURE__*/React.isValidElement(child)) {
@@ -40,6 +41,6 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     ref: ref,
     className: clx("menu", className)
   }, renderChild);
-});
+};
 
 exports.default = Menu;

package/Menu/index.props.d.ts

@@ -7,4 +7,5 @@ export type Props = {
     className?: string;
     onClick?: (key: string, e: MouseEvent) => void;
     children?: ReactElement<MenuItemProps> | ReactElement<MenuItemProps>[];
+    ref?: React.Ref<HTMLUListElement>;
 };

package/MultiSelect/components/MenuOverlayItem/index.d.ts

@@ -7,8 +7,7 @@ type SelectItemProps = {
         disabled?: boolean;
     };
     onClick?: () => void;
+    ref?: React.Ref<HTMLLIElement>;
 };
-declare const _default: React.ForwardRefExoticComponent<SelectItemProps & {
-    children?: React.ReactNode | undefined;
-} & React.RefAttributes<HTMLLIElement>>;
-export default _default;
+declare const SelectItem: ({ option, onClick, ref }: SelectItemProps) => React.JSX.Element;
+export default SelectItem;

package/MultiSelect/components/MenuOverlayItem/index.js

@@ -10,9 +10,10 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-var SelectItem = function SelectItem(_a, ref) {
+var SelectItem = function SelectItem(_a) {
   var option = _a.option,
-    onClick = _a.onClick;
+    onClick = _a.onClick,
+    ref = _a.ref;
   return /*#__PURE__*/React__default.default.createElement(index.default, {
     ref: ref,
     onClick: onClick,
@@ -23,6 +24,5 @@ var SelectItem = function SelectItem(_a, ref) {
     height: 16
   }));
 };
-var SelectItem$1 = /*#__PURE__*/React.forwardRef(SelectItem);
 
-exports.default = SelectItem$1;
+exports.default = SelectItem;

package/Switch/index.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { SwitchProps } from "./index.props";
-declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
+declare const Switch: ({ disabled, className, variant, ref, ...props }: SwitchProps) => React.JSX.Element;
 export default Switch;

package/Switch/index.js

@@ -14,13 +14,14 @@ var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 var clx = classNames__default.default.bind(styles__default.default);
-var Switch = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+var Switch = function Switch(_a) {
   var _b;
   var disabled = _a.disabled,
     className = _a.className,
     _c = _a.variant,
     variant = _c === void 0 ? "primary" : _c,
-    props = tslib.__rest(_a, ["disabled", "className", "variant"]);
+    ref = _a.ref,
+    props = tslib.__rest(_a, ["disabled", "className", "variant", "ref"]);
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clx(styles__default.default.root, {
       root_disabled: disabled ? 1 : 0
@@ -34,6 +35,6 @@ var Switch = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: clx(styles__default.default["base-switch"])
   })));
-});
+};
 
 exports.default = Switch;

package/Switch/index.props.d.ts

@@ -2,4 +2,5 @@ import type { InputHTMLAttributes } from "react";
 export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
     variant?: "primary";
     disabled?: boolean;
+    ref?: React.Ref<HTMLInputElement>;
 }

package/TextArea/index.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { ITextAreaProps } from "./index.props";
-declare const TextArea: React.ForwardRefExoticComponent<ITextAreaProps & React.RefAttributes<HTMLDivElement>>;
+declare const TextArea: ({ className, value, minRows, maxRows, onChange, label, required, error, hint, disabled, inputRef, ref, ...props }: ITextAreaProps) => React.JSX.Element;
 export default TextArea;

package/TextArea/index.js

@@ -18,7 +18,7 @@ var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 var clx = classNames__default.default.bind(styles__default.default);
-var TextArea = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+var TextArea = function TextArea(_a) {
   var className = _a.className,
     _b = _a.value,
     value = _b === void 0 ? "" : _b,
@@ -33,7 +33,8 @@ var TextArea = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     hint = _a.hint,
     disabled = _a.disabled,
     inputRef = _a.inputRef,
-    props = tslib.__rest(_a, ["className", "value", "minRows", "maxRows", "onChange", "label", "required", "error", "hint", "disabled", "inputRef"]);
+    ref = _a.ref,
+    props = tslib.__rest(_a, ["className", "value", "minRows", "maxRows", "onChange", "label", "required", "error", "hint", "disabled", "inputRef", "ref"]);
   var onChangeHandler = function onChangeHandler(event) {
     if (onChange) onChange(event.target.value, event);
   };
@@ -56,6 +57,6 @@ var TextArea = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     className: clx(styles__default.default.textarea, className),
     onChange: onChangeHandler
   }, props))));
-});
+};
 
 exports.default = TextArea;

package/TextArea/index.props.d.ts

@@ -9,4 +9,5 @@ export interface ITextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextArea
     required?: boolean;
     onChange?: (value: string, e: ChangeEvent<HTMLTextAreaElement>) => void;
     inputRef?: ForwardedRef<HTMLTextAreaElement>;
+    ref?: React.Ref<HTMLDivElement>;
 }

package/Theme/colors/index.d.ts

@@ -17,6 +17,14 @@ declare const _default: {
     BRAND_DEFAULT_1: string;
     BRAND_DEFAULT_2: string;
     BRAND_DEFAULT_3: string;
+    PROMO_SILVER: string;
+    PROMO_GOLD: string;
+    PROMO_ASPHALT: string;
+    PROMO_TOMATO: string;
+    PROMO_COPPER: string;
+    PROMO_MINT: string;
+    PROMO_SKY: string;
+    PROMO_NEON: string;
     TRETIARY_BA_1: string;
     TRETIARY_BA_2: string;
     TRETIARY_BA_3: string;

package/Theme/colors/theme_buenos_aires.d.ts

@@ -26,7 +26,25 @@ export declare const BrandBA: {
     BRAND_BA_4: string;
     BRAND_BA_5: string;
 };
+export declare const PromoBA: {
+    PROMO_SILVER: string;
+    PROMO_GOLD: string;
+    PROMO_ASPHALT: string;
+    PROMO_TOMATO: string;
+    PROMO_COPPER: string;
+    PROMO_MINT: string;
+    PROMO_SKY: string;
+    PROMO_NEON: string;
+};
 export declare const Color: {
+    PROMO_SILVER: string;
+    PROMO_GOLD: string;
+    PROMO_ASPHALT: string;
+    PROMO_TOMATO: string;
+    PROMO_COPPER: string;
+    PROMO_MINT: string;
+    PROMO_SKY: string;
+    PROMO_NEON: string;
     TRETIARY_BA_1: string;
     TRETIARY_BA_2: string;
     TRETIARY_BA_3: string;

package/Theme/colors/theme_buenos_aires.js

@@ -32,11 +32,22 @@ var BrandBA = {
   BRAND_BA_4: "#EF6975",
   BRAND_BA_5: "#E61428"
 };
-var Color = tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({}, BrandBA), PrimaryBA), SecondaryBA), TretiaryBA);
+var PromoBA = {
+  PROMO_SILVER: "#EDF2F7",
+  PROMO_GOLD: "#FFF1B8",
+  PROMO_ASPHALT: "#EAEBEB",
+  PROMO_TOMATO: "#FFDEDE",
+  PROMO_COPPER: "#FFE6C4",
+  PROMO_MINT: "#CCF0D2",
+  PROMO_SKY: "#D6E9FD",
+  PROMO_NEON: "#ECE2FC"
+};
+var Color = tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({}, BrandBA), PrimaryBA), SecondaryBA), TretiaryBA), PromoBA);
 
 exports.BrandBA = BrandBA;
 exports.Color = Color;
 exports.PrimaryBA = PrimaryBA;
+exports.PromoBA = PromoBA;
 exports.SecondaryBA = SecondaryBA;
 exports.TretiaryBA = TretiaryBA;
 exports.default = Color;

package/Theme/index.d.ts

@@ -236,5 +236,13 @@ export declare const THEMES: {
         "status-info-bg": string;
         "status-neutral": string;
         "status-neutral-bg": string;
+        "promo-silver": string;
+        "promo-gold": string;
+        "promo-asphalt": string;
+        "promo-tomato": string;
+        "promo-copper": string;
+        "promo-mint": string;
+        "promo-sky": string;
+        "promo-neon": string;
     };
 };

package/Theme/themes/buenos_aires.d.ts

@@ -116,5 +116,13 @@ declare const _default: {
     "status-info-bg": string;
     "status-neutral": string;
     "status-neutral-bg": string;
+    "promo-silver": string;
+    "promo-gold": string;
+    "promo-asphalt": string;
+    "promo-tomato": string;
+    "promo-copper": string;
+    "promo-mint": string;
+    "promo-sky": string;
+    "promo-neon": string;
 };
 export default _default;

package/Theme/themes/buenos_aires.js

@@ -121,7 +121,15 @@ var THEME_BA = {
   "status-info": "#70b6f6",
   "status-info-bg": "rgba(112, 182, 246, .12)",
   "status-neutral": index.default.BG_5,
-  "status-neutral-bg": index.default.BG_1
+  "status-neutral-bg": index.default.BG_1,
+  "promo-silver": index.default.PROMO_SILVER,
+  "promo-gold": index.default.PROMO_GOLD,
+  "promo-asphalt": index.default.PROMO_ASPHALT,
+  "promo-tomato": index.default.PROMO_TOMATO,
+  "promo-copper": index.default.PROMO_COPPER,
+  "promo-mint": index.default.PROMO_MINT,
+  "promo-sky": index.default.PROMO_SKY,
+  "promo-neon": index.default.PROMO_NEON
 };
 
 exports.default = THEME_BA;

package/esm/ClickOutside/index.js

@@ -1,4 +1,5 @@
-import React__default, { useRef } from 'react';
+import _typeof from '@babel/runtime/helpers/typeof';
+import React__default, { useRef, cloneElement } from 'react';
 import useOnClickOutside from '../hooks/useOnClickOutside/index.js';
 
 var ClickOutside = function ClickOutside(_a) {
@@ -7,17 +8,20 @@ var ClickOutside = function ClickOutside(_a) {
   var childRef = useRef();
   useOnClickOutside(childRef, onClick);
   if (! /*#__PURE__*/React__default.isValidElement(children)) return null;
-  return /*#__PURE__*/React__default.cloneElement(children, {
+  var combinedRef = function combinedRef(node) {
+    childRef.current = node;
     // @ts-expect-error expected
-    ref: function ref(node) {
-      childRef.current = node;
-      // @ts-expect-error expected
-      var ref = children.ref;
-      // @ts-expect-error expected
-      if (typeof children.ref === "function") {
+    var ref = children.ref;
+    if (ref) {
+      if (typeof ref === "function") {
         ref(node);
+      } else if (_typeof(ref) === "object" && ref !== null) {
+        ref.current = node;
       }
     }
+  };
+  return /*#__PURE__*/cloneElement(children, {
+    ref: combinedRef
   });
 };
 

package/esm/Image/index.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { ImageProps } from "./index.props";
-declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLImageElement>>;
+declare const Image: ({ className, loading, src, fallbackSrc, onClick, srcSet, sizes, ariaLabel, sources, alt, width, height, ref, ...props }: ImageProps) => React.JSX.Element;
 export default Image;

package/esm/Image/index.js

@@ -1,11 +1,11 @@
 import { __rest, __assign } from 'tslib';
-import React__default, { forwardRef, useState, useCallback } from 'react';
+import React__default, { useState, useCallback } from 'react';
 import classNames from 'classnames';
 import generateUniqID from '../helpers/generateUniqID.js';
 import styles from './Image.module.css';
 
 var emptyImage = "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=";
-var Image = /*#__PURE__*/forwardRef(function (_a, ref) {
+var Image = function Image(_a) {
   var className = _a.className,
     _b = _a.loading,
     loading = _b === void 0 ? "lazy" : _b,
@@ -21,7 +21,8 @@ var Image = /*#__PURE__*/forwardRef(function (_a, ref) {
     alt = _d === void 0 ? src : _d,
     width = _a.width,
     height = _a.height,
-    props = __rest(_a, ["className", "loading", "src", "fallbackSrc", "onClick", "srcSet", "sizes", "ariaLabel", "sources", "alt", "width", "height"]);
+    ref = _a.ref,
+    props = __rest(_a, ["className", "loading", "src", "fallbackSrc", "onClick", "srcSet", "sizes", "ariaLabel", "sources", "alt", "width", "height", "ref"]);
   var _e = useState(false),
     isFailed = _e[0],
     setFailed = _e[1];
@@ -57,6 +58,6 @@ var Image = /*#__PURE__*/forwardRef(function (_a, ref) {
     srcSet: imageSrcSet,
     sizes: sizes
   }, props)));
-});
+};
 
 export { Image as default };

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

@@ -6,4 +6,5 @@ export interface BaseImageContainerProps {
     "data-testid"?: string;
 }
 export interface ImageProps extends BaseImageContainerProps, React.ImgHTMLAttributes<HTMLImageElement> {
+    ref?: React.Ref<HTMLImageElement>;
 }

package/esm/Input/index.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { InputProps } from "./index.props";
-declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+declare const Input: ({ className, startIcon, endIcon, label, hint, error, required, onChange, inputRef, disabled, variant, size, ref, ...props }: InputProps) => React.JSX.Element;
 export default Input;

package/esm/Input/index.js

@@ -1,11 +1,11 @@
 import { __rest, __assign } from 'tslib';
-import React__default, { forwardRef } from 'react';
+import React__default from 'react';
 import classNames from 'classnames';
 import FormField from '../base/FormField/index.js';
 import InputRoot from '../base/InputRoot/index.js';
 import BaseInput from '../base/BaseInput/index.js';
 
-var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
+var Input = function Input(_a) {
   var className = _a.className,
     startIcon = _a.startIcon,
     endIcon = _a.endIcon,
@@ -20,7 +20,8 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
     variant = _b === void 0 ? "primary" : _b,
     _c = _a.size,
     size = _c === void 0 ? "m" : _c,
-    props = __rest(_a, ["className", "startIcon", "endIcon", "label", "hint", "error", "required", "onChange", "inputRef", "disabled", "variant", "size"]);
+    ref = _a.ref,
+    props = __rest(_a, ["className", "startIcon", "endIcon", "label", "hint", "error", "required", "onChange", "inputRef", "disabled", "variant", "size", "ref"]);
   return /*#__PURE__*/React__default.createElement(FormField, {
     className: classNames(className),
     label: label,
@@ -40,6 +41,6 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
     onChange: onChange,
     type: "text"
   }, props))));
-});
+};
 
 export { Input as default };

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

@@ -12,4 +12,5 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     error?: boolean;
     required?: boolean;
     inputRef?: ForwardedRef<HTMLInputElement>;
+    ref?: React.Ref<HTMLInputElement>;
 }

package/esm/Menu/index.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { Props } from "./index.props";
-declare const Menu: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLUListElement>>;
+declare const Menu: ({ selected, variant, className, onClick, children, ref, }: Props) => React.JSX.Element;
 export default Menu;

package/esm/Menu/index.js

@@ -1,14 +1,15 @@
-import React__default, { forwardRef, useMemo, Children, isValidElement, cloneElement } from 'react';
+import React__default, { useMemo, Children, isValidElement, cloneElement } from 'react';
 import classNames from 'classnames/bind';
 import styles from './Menu.module.css';
 
 var clx = classNames.bind(styles);
-var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
+var Menu = function Menu(_a) {
   var selected = _a.selected,
     variant = _a.variant,
     className = _a.className,
     onClick = _a.onClick,
-    children = _a.children;
+    children = _a.children,
+    ref = _a.ref;
   var renderChild = useMemo(function () {
     return Children.map(children, function (child) {
       if (/*#__PURE__*/isValidElement(child)) {
@@ -30,6 +31,6 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
     ref: ref,
     className: clx("menu", className)
   }, renderChild);
-});
+};
 
 export { Menu as default };

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

@@ -7,4 +7,5 @@ export type Props = {
     className?: string;
     onClick?: (key: string, e: MouseEvent) => void;
     children?: ReactElement<MenuItemProps> | ReactElement<MenuItemProps>[];
+    ref?: React.Ref<HTMLUListElement>;
 };

package/esm/MultiSelect/components/MenuOverlayItem/index.d.ts

@@ -7,8 +7,7 @@ type SelectItemProps = {
         disabled?: boolean;
     };
     onClick?: () => void;
+    ref?: React.Ref<HTMLLIElement>;
 };
-declare const _default: React.ForwardRefExoticComponent<SelectItemProps & {
-    children?: React.ReactNode | undefined;
-} & React.RefAttributes<HTMLLIElement>>;
-export default _default;
+declare const SelectItem: ({ option, onClick, ref }: SelectItemProps) => React.JSX.Element;
+export default SelectItem;

package/esm/MultiSelect/components/MenuOverlayItem/index.js

@@ -1,10 +1,11 @@
-import React__default, { forwardRef } from 'react';
+import React__default from 'react';
 import MenuItem from '../../../Menu/components/MenuItem/index.js';
 import Check from '../../../Icons/Check.js';
 
-var SelectItem = function SelectItem(_a, ref) {
+var SelectItem = function SelectItem(_a) {
   var option = _a.option,
-    onClick = _a.onClick;
+    onClick = _a.onClick,
+    ref = _a.ref;
   return /*#__PURE__*/React__default.createElement(MenuItem, {
     ref: ref,
     onClick: onClick,
@@ -15,6 +16,5 @@ var SelectItem = function SelectItem(_a, ref) {
     height: 16
   }));
 };
-var SelectItem$1 = /*#__PURE__*/forwardRef(SelectItem);
 
-export { SelectItem$1 as default };
+export { SelectItem as default };

package/esm/Switch/index.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { SwitchProps } from "./index.props";
-declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
+declare const Switch: ({ disabled, className, variant, ref, ...props }: SwitchProps) => React.JSX.Element;
 export default Switch;

package/esm/Switch/index.js

@@ -1,16 +1,17 @@
 import { __rest, __assign } from 'tslib';
-import React__default, { forwardRef } from 'react';
+import React__default from 'react';
 import classNames from 'classnames/bind';
 import styles from './Switch.module.css';
 
 var clx = classNames.bind(styles);
-var Switch = /*#__PURE__*/forwardRef(function (_a, ref) {
+var Switch = function Switch(_a) {
   var _b;
   var disabled = _a.disabled,
     className = _a.className,
     _c = _a.variant,
     variant = _c === void 0 ? "primary" : _c,
-    props = __rest(_a, ["disabled", "className", "variant"]);
+    ref = _a.ref,
+    props = __rest(_a, ["disabled", "className", "variant", "ref"]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: clx(styles.root, {
       root_disabled: disabled ? 1 : 0
@@ -24,6 +25,6 @@ var Switch = /*#__PURE__*/forwardRef(function (_a, ref) {
   }, /*#__PURE__*/React__default.createElement("div", {
     className: clx(styles["base-switch"])
   })));
-});
+};
 
 export { Switch as default };

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

@@ -2,4 +2,5 @@ import type { InputHTMLAttributes } from "react";
 export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
     variant?: "primary";
     disabled?: boolean;
+    ref?: React.Ref<HTMLInputElement>;
 }

package/esm/TextArea/index.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { ITextAreaProps } from "./index.props";
-declare const TextArea: React.ForwardRefExoticComponent<ITextAreaProps & React.RefAttributes<HTMLDivElement>>;
+declare const TextArea: ({ className, value, minRows, maxRows, onChange, label, required, error, hint, disabled, inputRef, ref, ...props }: ITextAreaProps) => React.JSX.Element;
 export default TextArea;

package/esm/TextArea/index.js

@@ -1,5 +1,5 @@
 import { __rest, __assign } from 'tslib';
-import React__default, { forwardRef } from 'react';
+import React__default from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
 import classNames from 'classnames/bind';
 import FormField from '../base/FormField/index.js';
@@ -7,7 +7,7 @@ import InputRoot from '../base/InputRoot/index.js';
 import styles from './TextArea.module.css';
 
 var clx = classNames.bind(styles);
-var TextArea = /*#__PURE__*/forwardRef(function (_a, ref) {
+var TextArea = function TextArea(_a) {
   var className = _a.className,
     _b = _a.value,
     value = _b === void 0 ? "" : _b,
@@ -22,7 +22,8 @@ var TextArea = /*#__PURE__*/forwardRef(function (_a, ref) {
     hint = _a.hint,
     disabled = _a.disabled,
     inputRef = _a.inputRef,
-    props = __rest(_a, ["className", "value", "minRows", "maxRows", "onChange", "label", "required", "error", "hint", "disabled", "inputRef"]);
+    ref = _a.ref,
+    props = __rest(_a, ["className", "value", "minRows", "maxRows", "onChange", "label", "required", "error", "hint", "disabled", "inputRef", "ref"]);
   var onChangeHandler = function onChangeHandler(event) {
     if (onChange) onChange(event.target.value, event);
   };
@@ -45,6 +46,6 @@ var TextArea = /*#__PURE__*/forwardRef(function (_a, ref) {
     className: clx(styles.textarea, className),
     onChange: onChangeHandler
   }, props))));
-});
+};
 
 export { TextArea as default };

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

@@ -9,4 +9,5 @@ export interface ITextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextArea
     required?: boolean;
     onChange?: (value: string, e: ChangeEvent<HTMLTextAreaElement>) => void;
     inputRef?: ForwardedRef<HTMLTextAreaElement>;
+    ref?: React.Ref<HTMLDivElement>;
 }

package/esm/Theme/colors/index.d.ts

@@ -17,6 +17,14 @@ declare const _default: {
     BRAND_DEFAULT_1: string;
     BRAND_DEFAULT_2: string;
     BRAND_DEFAULT_3: string;
+    PROMO_SILVER: string;
+    PROMO_GOLD: string;
+    PROMO_ASPHALT: string;
+    PROMO_TOMATO: string;
+    PROMO_COPPER: string;
+    PROMO_MINT: string;
+    PROMO_SKY: string;
+    PROMO_NEON: string;
     TRETIARY_BA_1: string;
     TRETIARY_BA_2: string;
     TRETIARY_BA_3: string;

package/esm/Theme/colors/theme_buenos_aires.d.ts

@@ -26,7 +26,25 @@ export declare const BrandBA: {
     BRAND_BA_4: string;
     BRAND_BA_5: string;
 };
+export declare const PromoBA: {
+    PROMO_SILVER: string;
+    PROMO_GOLD: string;
+    PROMO_ASPHALT: string;
+    PROMO_TOMATO: string;
+    PROMO_COPPER: string;
+    PROMO_MINT: string;
+    PROMO_SKY: string;
+    PROMO_NEON: string;
+};
 export declare const Color: {
+    PROMO_SILVER: string;
+    PROMO_GOLD: string;
+    PROMO_ASPHALT: string;
+    PROMO_TOMATO: string;
+    PROMO_COPPER: string;
+    PROMO_MINT: string;
+    PROMO_SKY: string;
+    PROMO_NEON: string;
     TRETIARY_BA_1: string;
     TRETIARY_BA_2: string;
     TRETIARY_BA_3: string;

package/esm/Theme/colors/theme_buenos_aires.js

@@ -28,6 +28,16 @@ var BrandBA = {
   BRAND_BA_4: "#EF6975",
   BRAND_BA_5: "#E61428"
 };
-var Color = __assign(__assign(__assign(__assign({}, BrandBA), PrimaryBA), SecondaryBA), TretiaryBA);
+var PromoBA = {
+  PROMO_SILVER: "#EDF2F7",
+  PROMO_GOLD: "#FFF1B8",
+  PROMO_ASPHALT: "#EAEBEB",
+  PROMO_TOMATO: "#FFDEDE",
+  PROMO_COPPER: "#FFE6C4",
+  PROMO_MINT: "#CCF0D2",
+  PROMO_SKY: "#D6E9FD",
+  PROMO_NEON: "#ECE2FC"
+};
+var Color = __assign(__assign(__assign(__assign(__assign({}, BrandBA), PrimaryBA), SecondaryBA), TretiaryBA), PromoBA);
 
-export { BrandBA, Color, PrimaryBA, SecondaryBA, TretiaryBA, Color as default };
+export { BrandBA, Color, PrimaryBA, PromoBA, SecondaryBA, TretiaryBA, Color as default };

package/esm/Theme/index.d.ts

@@ -236,5 +236,13 @@ export declare const THEMES: {
         "status-info-bg": string;
         "status-neutral": string;
         "status-neutral-bg": string;
+        "promo-silver": string;
+        "promo-gold": string;
+        "promo-asphalt": string;
+        "promo-tomato": string;
+        "promo-copper": string;
+        "promo-mint": string;
+        "promo-sky": string;
+        "promo-neon": string;
     };
 };

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

@@ -116,5 +116,13 @@ declare const _default: {
     "status-info-bg": string;
     "status-neutral": string;
     "status-neutral-bg": string;
+    "promo-silver": string;
+    "promo-gold": string;
+    "promo-asphalt": string;
+    "promo-tomato": string;
+    "promo-copper": string;
+    "promo-mint": string;
+    "promo-sky": string;
+    "promo-neon": string;
 };
 export default _default;

package/esm/Theme/themes/buenos_aires.js

@@ -117,7 +117,15 @@ var THEME_BA = {
   "status-info": "#70b6f6",
   "status-info-bg": "rgba(112, 182, 246, .12)",
   "status-neutral": Color.BG_5,
-  "status-neutral-bg": Color.BG_1
+  "status-neutral-bg": Color.BG_1,
+  "promo-silver": Color.PROMO_SILVER,
+  "promo-gold": Color.PROMO_GOLD,
+  "promo-asphalt": Color.PROMO_ASPHALT,
+  "promo-tomato": Color.PROMO_TOMATO,
+  "promo-copper": Color.PROMO_COPPER,
+  "promo-mint": Color.PROMO_MINT,
+  "promo-sky": Color.PROMO_SKY,
+  "promo-neon": Color.PROMO_NEON
 };
 
 export { THEME_BA as default };

package/esm/theme_ba_variables.css

@@ -116,4 +116,12 @@
 --status-info-bg: rgba(112, 182, 246, .12);
 --status-neutral: #BCC1CC;
 --status-neutral-bg: #ECEEF2;
+--promo-silver: #EDF2F7;
+--promo-gold: #FFF1B8;
+--promo-asphalt: #EAEBEB;
+--promo-tomato: #FFDEDE;
+--promo-copper: #FFE6C4;
+--promo-mint: #CCF0D2;
+--promo-sky: #D6E9FD;
+--promo-neon: #ECE2FC;
 }

package/package.json

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

package/theme_ba_variables.css

@@ -116,4 +116,12 @@
 --status-info-bg: rgba(112, 182, 246, .12);
 --status-neutral: #BCC1CC;
 --status-neutral-bg: #ECEEF2;
+--promo-silver: #EDF2F7;
+--promo-gold: #FFF1B8;
+--promo-asphalt: #EAEBEB;
+--promo-tomato: #FFDEDE;
+--promo-copper: #FFE6C4;
+--promo-mint: #CCF0D2;
+--promo-sky: #D6E9FD;
+--promo-neon: #ECE2FC;
 }