colibri-ui 0.7.79 → 0.7.81

package/Tooltip/index.props.d.ts

@@ -1,7 +1,6 @@
 import type { ReactNode } from "react";
 import type { PositioningStrategy } from "@popperjs/core";
 import type { Placement as PopperPlacement } from "@popperjs/core";
-export type Trigger = "hover";
 export type Placement = Extract<PopperPlacement, "bottom-start" | "bottom" | "bottom-end" | "top-start" | "top" | "top-end" | "right-start" | "right" | "right-end" | "left-start" | "left" | "left-end">;
 export interface ITooltipProps {
     children: ReactNode;

package/base/FormField/index.js

@@ -24,12 +24,12 @@ var FormField = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clx(styles__default.default.container, className),
     ref: ref
-  }, label && ( /*#__PURE__*/React__default.default.createElement(index.default, {
+  }, label && (/*#__PURE__*/React__default.default.createElement(index.default, {
     className: clx(styles__default.default.label, {
       label_required: !!required
     }),
     tag: "label"
-  }, label)), children, hint && ( /*#__PURE__*/React__default.default.createElement(index.default, {
+  }, label)), children, hint && (/*#__PURE__*/React__default.default.createElement(index.default, {
     variant: error ? "alert" : "secondary",
     tag: "span"
   }, hint)));

package/base/InputRoot/index.js

@@ -27,7 +27,7 @@ var InputRoot = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   return /*#__PURE__*/React__default.default.createElement("div", {
     ref: ref,
     className: clx(styles__default.default.root, (_b = {}, _b["variant_".concat(variant, "_disabled")] = disabled ? 1 : 0, _b["variant_".concat(variant, "_error")] = error ? 1 : 0, _b["size_".concat(size)] = !!size, _b["variant_".concat(variant)] = !!variant, _b), className)
-  }, startIcon && ( /*#__PURE__*/React__default.default.createElement("div", {
+  }, startIcon && (/*#__PURE__*/React__default.default.createElement("div", {
     className: clx(styles__default.default["base-icon"])
   }, startIcon)), children, endIcon && /*#__PURE__*/React__default.default.createElement("div", {
     className: clx(styles__default.default["base-icon"])

package/esm/Accordion/Accordion.module.css

@@ -0,0 +1,51 @@
+.root {
+  overflow: hidden;
+  padding: 14px;
+}
+
+.content {
+  block-size: 0;
+  overflow: hidden;
+  transition: block-size 0.2s ease-in-out;
+}
+
+.button {
+  align-items: center;
+  background: none;
+  border: none;
+  color: initial;
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  gap: 8px;
+  inline-size: 100%;
+  outline: none;
+  padding: 0;
+}
+.button svg {
+  flex: none;
+}
+
+.text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.header {
+  margin-block-end: 14px;
+}
+
+.chevron {
+  transition: transform 0.2s ease-in-out;
+}
+.chevron_open {
+  transform: rotate(180deg);
+}
+
+.line {
+  background-color: var(--palette-bg-3);
+  block-size: 1px;
+  flex: 1;
+  margin-inline-start: 8px;
+}

package/esm/Accordion/index.d.ts

@@ -0,0 +1,9 @@
+import type { FC, ReactNode, PropsWithChildren } from "react";
+type Props = {
+    title: ReactNode;
+    className?: string;
+    boldTitle?: boolean;
+    tabIndex?: number;
+};
+declare const Accordion: FC<PropsWithChildren<Props>>;
+export default Accordion;

package/esm/Accordion/index.js

@@ -0,0 +1,57 @@
+import React__default, { useState, useRef, useEffect } from 'react';
+import classNames from 'classnames/bind';
+import '../Icons/index.js';
+import Typography from '../Typography/index.js';
+import styles from './Accordion.module.css';
+import Chevron from '../Icons/Chevron.js';
+
+var clx = classNames.bind(styles);
+var Accordion = function Accordion(_a) {
+  var title = _a.title,
+    _b = _a.boldTitle,
+    boldTitle = _b === void 0 ? false : _b,
+    children = _a.children,
+    className = _a.className,
+    tabIndex = _a.tabIndex;
+  var _c = useState(false),
+    isOpen = _c[0],
+    setIsOpen = _c[1];
+  var contentRef = useRef(null);
+  var toggleAccordion = function toggleAccordion() {
+    return setIsOpen(!isOpen);
+  };
+  useEffect(function () {
+    if (contentRef.current) {
+      contentRef.current.style.blockSize = isOpen ? "".concat(contentRef.current.scrollHeight, "px") : "0px";
+    }
+  }, [isOpen]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: clx("root", className)
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: clx("header")
+  }, /*#__PURE__*/React__default.createElement("button", {
+    className: clx("button"),
+    onClick: toggleAccordion,
+    type: "button",
+    role: "button",
+    "aria-expanded": isOpen,
+    tabIndex: tabIndex,
+    "aria-label": "Toggle"
+  }, /*#__PURE__*/React__default.createElement(Chevron, {
+    className: clx("chevron", {
+      chevron_open: isOpen
+    }),
+    width: 20,
+    height: 20
+  }), /*#__PURE__*/React__default.createElement(Typography, {
+    className: clx("text"),
+    fontWeight: boldTitle ? "bold" : "normal"
+  }, title), /*#__PURE__*/React__default.createElement("div", {
+    className: clx("line")
+  }))), /*#__PURE__*/React__default.createElement("div", {
+    ref: contentRef,
+    className: clx("content")
+  }, children));
+};
+
+export { Accordion as default };

package/esm/Avatar/Avatar.module.css

@@ -1,11 +1,11 @@
 .avatar {
-  transition: border-color 0.15s ease;
   border-radius: 100%;
   box-sizing: border-box;
+  transition: border-color 0.15s ease;
 }
 .avatar_bordered {
-  border: 4px solid transparent;
   background-color: var(--palette-white);
+  border: 4px solid transparent;
 }
 .avatar_bordered:hover {
   border-color: rgba(95, 99, 104, 0.24);

package/esm/Avatar/index.d.ts

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

package/esm/Avatar/index.js

@@ -1,9 +1,9 @@
 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 orgCircleUrl from './assets/org-circle.svg.js';
 import styles from './Avatar.module.css';
-import classNames from 'classnames/bind';
 import { AccountType } from './index.props.js';
 
 var clx = classNames.bind(styles);
@@ -14,7 +14,7 @@ var Avatar = /*#__PURE__*/memo(function (props) {
     className = props.className,
     bordered = props.bordered,
     _b = props.title,
-    title = _b === void 0 ? '' : _b,
+    title = _b === void 0 ? "" : _b,
     _c = props.accountType,
     accountType = _c === void 0 ? AccountType.Organization : _c;
   var isOrg = accountType === AccountType.Organization;
@@ -25,7 +25,7 @@ var Avatar = /*#__PURE__*/memo(function (props) {
     width: size,
     height: size,
     className: clx(styles.avatar, {
-      'avatar_bordered': !!bordered
+      avatar_bordered: !!bordered
     }, [className])
   });
 });

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

@@ -1,4 +1,4 @@
-import { AvatarSizes } from "./constants";
+import type { AvatarSizes } from "./constants";
 export declare enum AccountType {
     Person = "person",
     Organization = "org"

package/esm/Badge/index.js

@@ -36,7 +36,7 @@ var Badge = function Badge(_a) {
     className: clx((_b = {
       root: true
     }, _b["root_direction_".concat(direction)] = !!direction, _b.root_invisible = invisible, _b), className),
-    "data-cy": "badge"
+    "data-testid": "badge"
   }, displayValue));
 };
 

package/esm/Button/Button.module.css

@@ -175,7 +175,7 @@
 }
 
 .text {
-  white-space: nowrap;
-  text-overflow: ellipsis;
   overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }

package/esm/Button/index.js

@@ -18,7 +18,8 @@ var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
     children = _a.children,
     disabled = _a.disabled,
     onClick = _a.onClick,
-    props = __rest(_a, ["className", "fullWidth", "variant", "iconStart", "iconEnd", "icon", "size", "children", "disabled", "onClick"]);
+    type = _a.type,
+    props = __rest(_a, ["className", "fullWidth", "variant", "iconStart", "iconEnd", "icon", "size", "children", "disabled", "onClick", "type"]);
   return /*#__PURE__*/React__default.createElement("button", __assign({
     onClick: onClick,
     ref: ref,
@@ -27,7 +28,9 @@ var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
       root_fullWidth: !!fullWidth
     }, _b["size_".concat(size)] = !!size, _b["variant_".concat(variant)] = !!variant, _b["variant_".concat(variant, "_disabled")] = !!disabled, _b), className),
     disabled: disabled,
-    "data-cy": "button"
+    "data-cy": "button",
+    type: type || "button",
+    role: "button"
   }, props), icon && /*#__PURE__*/React__default.createElement("span", {
     className: clx(styles.icon)
   }, icon), iconStart && /*#__PURE__*/React__default.createElement("span", {

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

@@ -9,4 +9,5 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     iconEnd?: ReactNode;
     size?: ButtonSize;
     disabled?: boolean;
+    type?: "submit" | "reset" | "button" | undefined;
 }

package/esm/Calendar/components/Month/Month.js

@@ -100,6 +100,8 @@ var Month = function Month(props) {
         style: {
           background: day.isSelected ? "var(--palette-bg-2)" : "transparent"
         },
+        role: "button",
+        type: "button",
         onClick: day.isActive ? function () {
           return props.onDayClick([year, month, leadingZeros(day.day, 2)].join("-"));
         } : undefined

package/esm/Calendar/index.js

@@ -142,7 +142,7 @@ var Calendar = function Calendar(_a) {
     className: clx(styles.root),
     "data-component": "Calendar",
     ref: $root
-  }, /*#__PURE__*/React__default.createElement("div", null, contentWidth ? ( /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", null, contentWidth ? (/*#__PURE__*/React__default.createElement("div", {
     "data-component": "Months",
     className: clx(styles.months),
     style: {
@@ -159,26 +159,32 @@ var Calendar = function Calendar(_a) {
     return /*#__PURE__*/React__default.createElement(Month, __assign({}, attrs, {
       key: "month-".concat(index)
     }));
-  }))) : ( /*#__PURE__*/React__default.createElement(Month, __assign({
+  }))) : (/*#__PURE__*/React__default.createElement(Month, __assign({
     today: today,
     startDate: getMonthStartDate(currentMonthOffset),
     offsetLeft: 0
   }, commonAttrs))), /*#__PURE__*/React__default.createElement("button", {
     className: clx(styles["month-control"], styles["month-control-prev"]),
     onClick: showPrevMonth,
-    disabled: currentMonthOffset <= 0
+    disabled: currentMonthOffset <= 0,
+    type: "button",
+    role: "button",
+    "aria-label": "Prev"
   }, /*#__PURE__*/React__default.createElement(ArrowNext, {
     className: clx(styles["month-control-prev-arrow"])
   })), /*#__PURE__*/React__default.createElement("button", {
     className: clx(styles["month-control"], styles["month-control-next"]),
     onClick: showNextMonth,
-    disabled: currentMonthOffset >= 11
+    disabled: currentMonthOffset >= 11,
+    type: "button",
+    role: "button",
+    "aria-label": "Next"
   }, /*#__PURE__*/React__default.createElement(ArrowNext, {
     className: clx(styles["month-control-next-arrow"])
-  }))), datePresets && ( /*#__PURE__*/React__default.createElement(Presets, {
+  }))), datePresets && (/*#__PURE__*/React__default.createElement(Presets, {
     presets: datePresets,
     onPresetSelect: handlePresetSelect
-  })), withContinueButton && ( /*#__PURE__*/React__default.createElement(ContinueButton, {
+  })), withContinueButton && (/*#__PURE__*/React__default.createElement(ContinueButton, {
     isChanged: selectedDate !== initialSelectedDate || selectedPeriod !== initialSelectedPeriod,
     selectedDate: selectedDate,
     selectedPeriod: selectedPeriod,

package/esm/Checkbox/index.js

@@ -42,7 +42,7 @@ var Checkbox = function Checkbox(_a) {
   }, label)));
   return /*#__PURE__*/React__default.createElement("div", {
     className: clx(styles.root)
-  }, control, hint && ( /*#__PURE__*/React__default.createElement(Typography, {
+  }, control, hint && (/*#__PURE__*/React__default.createElement(Typography, {
     variant: isError ? "alert" : "secondary",
     tag: "span"
   }, hint)));

package/esm/Chip/Chip.module.css

@@ -16,7 +16,7 @@
   transition-timing-function: ease;
 }
 .inner_active {
-  background: rgb(237, 237, 237);
+  background: var(--palette-bg-1);
 }
 .inner_inactive {
   background: var(--palette-white);
@@ -43,15 +43,18 @@
 }
 .inner[data-size=s] {
   border-radius: 32px;
-  height: 32px;
+  font-size: 15px;
+  line-height: 32px;
 }
 .inner[data-size=m] {
   border-radius: 36px;
-  height: 36px;
+  font-size: 16px;
+  line-height: 36px;
 }
 .inner[data-size=l] {
   border-radius: 44px;
-  height: 44px;
+  font-size: 18px;
+  line-height: 44px;
 }
 
 .content {

package/esm/Chip/index.d.ts

@@ -1,14 +1,4 @@
-import React from "react";
-import type { FC, ReactNode } from "react";
-type Size = "s" | "m" | "l";
-type Props = {
-    size?: Size;
-    testID?: string;
-    isActive?: boolean;
-    iconOnRight?: React.ReactNode;
-    onClick?: () => void;
-    onIconOnRightClick?: () => void;
-    children?: ReactNode;
-};
+import type { Props } from "./index.props";
+import type { FC } from "react";
 declare const Chip: FC<Props>;
 export default Chip;

package/esm/Chip/index.js

@@ -28,7 +28,7 @@ var Chip = function Chip(props) {
     onClick: onClick
   }, /*#__PURE__*/React__default.createElement("span", {
     className: clx("content-inner")
-  }, children)), iconOnRight && ( /*#__PURE__*/React__default.createElement("span", {
+  }, children)), iconOnRight && (/*#__PURE__*/React__default.createElement("span", {
     className: clx("icon-right"),
     onClick: onIconOnRightClick || onClick
   }, iconOnRight))));

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

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+type Size = "s" | "m" | "l";
+export type Props = {
+    size?: Size;
+    testID?: string;
+    isActive?: boolean;
+    iconOnRight?: React.ReactNode;
+    onClick?: () => void;
+    onIconOnRightClick?: () => void;
+    children?: ReactNode;
+};
+export {};

package/esm/Dropdown/index.js

@@ -1,12 +1,13 @@
 import { __assign } from 'tslib';
 import React__default, { useState, useMemo, Children, useCallback, useEffect } from 'react';
+import classNames from 'classnames/bind';
 import { usePopper } from 'react-popper';
-import classNames from 'classnames';
 import Portal from '../Portal/index.js';
 import { on } from '../helpers/on.js';
 import ClickOutside from '../ClickOutside/index.js';
-import dropDownStyles from './Dropdown.module.css';
+import styles from './Dropdown.module.css';
 
+var clx = classNames.bind(styles);
 var Dropdown = function Dropdown(_a) {
   var children = _a.children,
     zIndex = _a.zIndex,
@@ -112,12 +113,12 @@ var Dropdown = function Dropdown(_a) {
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(reference.type, __assign({
     ref: setControlElement,
     tabIndex: 0
-  }, reference.props)), isVisible && ( /*#__PURE__*/React__default.createElement(Portal, null, /*#__PURE__*/React__default.createElement(ClickOutside, {
+  }, reference.props)), isVisible && (/*#__PURE__*/React__default.createElement(Portal, null, /*#__PURE__*/React__default.createElement(ClickOutside, {
     onClick: onClickOutside
   }, /*#__PURE__*/React__default.createElement("div", __assign({
     ref: setPopperElement,
-    "data-component": "popper-container",
-    className: classNames(dropDownStyles["popper-container"]),
+    "data-testid": "popper-container",
+    className: clx("popper-container"),
     style: __assign(__assign(__assign({}, styles.popper), {
       zIndex: zIndex,
       minWidth: controlElement === null || controlElement === void 0 ? void 0 : controlElement.offsetWidth
@@ -126,7 +127,8 @@ var Dropdown = function Dropdown(_a) {
     }),
     tabIndex: 0
   }, attributes.popper), /*#__PURE__*/React__default.createElement("div", {
-    className: classNames(dropDownStyles["overlay-container"]),
+    "data-testid": "overlay-container",
+    className: clx("overlay-container"),
     onClick: onClickOverlay
   }, overlay))))));
 };

package/esm/InputRadio/index.js

@@ -56,7 +56,7 @@ var InputRadio = /*#__PURE__*/memo(function (_a) {
     className: clx(styles.icon)
   }), /*#__PURE__*/React__default.createElement("span", {
     className: clx(styles.text)
-  }, !children && text, !text && children)), !!note && ( /*#__PURE__*/React__default.createElement(Typography, {
+  }, !children && text, !text && children)), !!note && (/*#__PURE__*/React__default.createElement(Typography, {
     tag: "p",
     size: "s",
     className: clx(styles.note)

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

@@ -16,8 +16,9 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
     ref: ref,
     "data-component": "menu-item",
     style: {
-      backgroundColor: isSelected ? "var(--palette-primary-1)" : ""
+      backgroundColor: isSelected ? "var(--palette-primary-1, rgb(232, 240, 254))" : "transparent"
     },
+    "data-testid": "menuitem",
     className: clx("item", (_b = {
       item_disabled: !!disabled
     }, _b["item_variant_".concat(variant)] = !!variant, _b), className),

package/esm/Menu/index.js

@@ -11,7 +11,7 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
     children = _a.children;
   var renderChild = useMemo(function () {
     return Children.map(children, function (child) {
-      if ( /*#__PURE__*/isValidElement(child)) {
+      if (/*#__PURE__*/isValidElement(child)) {
         var isSelected = selected ? selected.includes(String(child.key)) : undefined;
         var onClickHandler = function onClickHandler(e) {
           if (child.props.onClick) child.props.onClick(e);

package/esm/Modal/index.js

@@ -47,11 +47,11 @@ var Modal = function Modal(_a) {
       "modal-wrapper_mobile": !isDesktop ? 1 : 0
     }, className),
     ref: modalRef
-  }, title ? ( /*#__PURE__*/React__default.createElement("div", {
+  }, title ? (/*#__PURE__*/React__default.createElement("div", {
     className: clx("title-wrapper")
   }, /*#__PURE__*/React__default.createElement(Title, null, title), /*#__PURE__*/React__default.createElement(Close, {
     onClick: onCloseHandler
-  }))) : ( /*#__PURE__*/React__default.createElement("div", {
+  }))) : (/*#__PURE__*/React__default.createElement("div", {
     className: clx("close-wrapper")
   }, /*#__PURE__*/React__default.createElement(Close, {
     onClick: onCloseHandler

package/esm/Select/components/MenuOverlay/index.js

@@ -29,9 +29,11 @@ var MenuOverlay = function MenuOverlay(_a) {
     if (!rootRef || !rootRef.current) {
       return;
     }
-    rootRef.current.scrollTo({
-      top: scrollView.top - OFFSET_ITEMS_COUNT * scrollView.height
-    });
+    if (typeof rootRef.current.scrollTo === "function") {
+      rootRef.current.scrollTo({
+        top: scrollView.top - OFFSET_ITEMS_COUNT * scrollView.height
+      });
+    }
   }, [scrollView, rootRef]);
   return /*#__PURE__*/React__default.createElement("div", {
     ref: rootRef,

package/esm/Select/index.js

@@ -73,8 +73,8 @@ var Select = function Select(_a) {
     disabled: !!disabled
   }, /*#__PURE__*/React__default.createElement("div", {
     className: clx(styles["base-input"]),
-    "data-component": "base-input"
-  }, prepraredLabel !== null && prepraredLabel !== void 0 ? prepraredLabel : ( /*#__PURE__*/React__default.createElement("span", {
+    "data-testid": "base-input"
+  }, prepraredLabel !== null && prepraredLabel !== void 0 ? prepraredLabel : (/*#__PURE__*/React__default.createElement("span", {
     className: clx(styles.placeholder)
   }, placeholder))), /*#__PURE__*/React__default.createElement("input", {
     type: "hidden",

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

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

package/esm/TabsMenu/Tab/Tab.module.css

@@ -0,0 +1,61 @@
+.tab {
+  cursor: pointer;
+  display: inline-block;
+  margin-left: 16px;
+  padding: 0 20px;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  transition-duration: 0.3s;
+  transition-property: background, box-shadow, transform;
+  transition-timing-function: ease;
+  user-select: none;
+  white-space: nowrap;
+}
+.tab[data-size=s] {
+  border-radius: 32px;
+  font-size: 15px;
+  line-height: 32px;
+}
+.tab[data-size=m] {
+  border-radius: 36px;
+  font-size: 16px;
+  line-height: 36px;
+}
+.tab[data-size=l] {
+  border-radius: 44px;
+  font-size: 18px;
+  line-height: 44px;
+}
+.tab_active {
+  background: var(--palette-bg-1);
+}
+.tab_inactive {
+  background: var(--palette-white);
+  box-shadow: rgba(193, 193, 193, 0.4) 0 5px 20px;
+}
+.tab_inactive:hover {
+  box-shadow: rgba(193, 193, 193, 0.4) 0 5px 20px;
+}
+.tab_inactive:active {
+  background: rgba(0, 0, 0, 0.02);
+  box-shadow: rgba(193, 193, 193, 0.4) 0 1px 3px;
+  outline: 0;
+  transition-duration: 0.15s;
+}
+@media (hover: none) {
+  .tab_inactive:hover {
+    box-shadow: rgba(193, 193, 193, 0.4) 0 5px 20px;
+  }
+  .tab_inactive:active {
+    box-shadow: rgba(193, 193, 193, 0.4) 0 1px 3px;
+  }
+}
+.tab_first {
+  margin-left: 0;
+}
+.tab_disabled {
+  background: #f7f8f9;
+  box-shadow: none;
+  color: var(--palette-bg-3);
+  cursor: not-allowed;
+  pointer-events: none;
+}

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

@@ -0,0 +1,16 @@
+import type { Size } from "../index.props";
+import type { KeyboardEventHandler, MouseEventHandler, ReactNode, RefObject } from "react";
+export type TabProps = {
+    id?: string;
+    active?: boolean;
+    disabled?: boolean;
+    first?: boolean;
+    content?: ReactNode;
+    onClick?: MouseEventHandler<HTMLLIElement>;
+    innerRef?: RefObject<HTMLLIElement>;
+    className?: string;
+    role?: string;
+    tabIndex?: number;
+    onKeyDown?: KeyboardEventHandler<HTMLElement>;
+    size?: Size;
+};

package/esm/TabsMenu/TabsMenu.module.css

@@ -0,0 +1,4 @@
+.root {
+  margin: 0;
+  padding: 0;
+}

package/esm/TabsMenu/index.d.ts

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

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

@@ -0,0 +1,12 @@
+import type { RefObject } from "react";
+import type { TabProps } from "./Tab/Tab.props";
+export type Size = "s" | "m" | "l";
+export type TabsMenuProps = {
+    activeTab?: string;
+    onChange?: (tabId: string) => void;
+    tabs: TabProps[];
+    tabsRefs?: RefObject<HTMLLIElement>[];
+    innerRef?: RefObject<HTMLUListElement>;
+    className?: string;
+    size?: Size;
+};

package/esm/Tooltip/index.js

@@ -82,7 +82,7 @@ var Tooltip = function Tooltip(_a) {
   }, [update, visible]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(reference.type, __assign({
     ref: setControlElement
-  }, reference.props)), visible && ( /*#__PURE__*/React__default.createElement(Portal, null, /*#__PURE__*/React__default.createElement(ClickOutside, {
+  }, reference.props)), visible && (/*#__PURE__*/React__default.createElement(Portal, null, /*#__PURE__*/React__default.createElement(ClickOutside, {
     onClick: onClickOutside
   }, /*#__PURE__*/React__default.createElement("div", __assign({
     className: clx("root", {