colibri-ui 0.8.47 → 0.8.51

package/Avatar/index.js

@@ -23,8 +23,8 @@ var clx = classNames__default.default.bind(styles__default.default);
 var getStubImage = function getStubImage(type) {
   return type === index_props.AccountType.Organization ? orgCircle.default : userCircle.default;
 };
-var SIZE_CLASSES = _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, constants.AvatarSize.S, styles__default.default['size-s']), constants.AvatarSize.M, styles__default.default['size-m']), constants.AvatarSize.L, styles__default.default['size-l']), constants.AvatarSize.XL, styles__default.default['size-xl']), constants.AvatarSize.XXL, styles__default.default['size-xxl']), constants.AvatarSize.XXXL, styles__default.default['size-xxxl']);
-var TEXT_CLASSES = _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, constants.AvatarSize.S, styles__default.default['text-s']), constants.AvatarSize.M, styles__default.default['text-m']), constants.AvatarSize.L, styles__default.default['text-l']), constants.AvatarSize.XL, styles__default.default['text-xl']), constants.AvatarSize.XXL, styles__default.default['text-xxl']), constants.AvatarSize.XXXL, styles__default.default['text-xxxl']);
+var SIZE_CLASSES = _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, constants.AvatarSize.S, styles__default.default["size-s"]), constants.AvatarSize.M, styles__default.default["size-m"]), constants.AvatarSize.L, styles__default.default["size-l"]), constants.AvatarSize.XL, styles__default.default["size-xl"]), constants.AvatarSize.XXL, styles__default.default["size-xxl"]), constants.AvatarSize.XXXL, styles__default.default["size-xxxl"]);
+var TEXT_CLASSES = _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, constants.AvatarSize.S, styles__default.default["text-s"]), constants.AvatarSize.M, styles__default.default["text-m"]), constants.AvatarSize.L, styles__default.default["text-l"]), constants.AvatarSize.XL, styles__default.default["text-xl"]), constants.AvatarSize.XXL, styles__default.default["text-xxl"]), constants.AvatarSize.XXXL, styles__default.default["text-xxxl"]);
 var Avatar = /*#__PURE__*/React.memo(function (props) {
   var src = props.src,
     _props$size = props.size,
@@ -63,7 +63,7 @@ var Avatar = /*#__PURE__*/React.memo(function (props) {
     "data-testid": "avatar",
     alt: alt,
     src: finalSrc,
-    className: clx('avatar', {
+    className: clx("avatar", {
       avatarBordered: !!bordered
     }, SIZE_CLASSES[size], className)
   }, rest)))) : (
@@ -75,12 +75,12 @@ var Avatar = /*#__PURE__*/React.memo(function (props) {
     role: "button",
     "aria-label": ariaLabel || "Avatar",
     onClick: onClick,
-    className: clx('avatarInitials', {
+    className: clx("avatarInitials", {
       avatarBordered: !!bordered,
       loading: !!loading
     }, SIZE_CLASSES[size], className)
   }, rest), /*#__PURE__*/React__default.default.createElement("span", {
-    className: clx('initialsText', TEXT_CLASSES[size])
+    className: clx("initialsText", TEXT_CLASSES[size])
   }, (initials === null || initials === void 0 ? void 0 : initials.trim().slice(0, 2)) || "")));
 });
 

package/ClickOutside/index.d.ts

@@ -1,5 +1,6 @@
 import type { FC, PropsWithChildren } from "react";
-declare const ClickOutside: FC<PropsWithChildren<{
+type ClickOutsideProps = {
     onClick: (e: MouseEvent | TouchEvent) => void;
-}>>;
+};
+declare const ClickOutside: FC<PropsWithChildren<ClickOutsideProps>>;
 export default ClickOutside;

package/ClickOutside/index.js

@@ -9,23 +9,20 @@ 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(_ref) {
   var children = _ref.children,
     onClick = _ref.onClick;
-  var childRef = React.useRef();
+  var childRef = React.useRef(null);
   index.default(childRef, onClick);
-  if (! /*#__PURE__*/React__default.default.isValidElement(children)) return null;
+  if (! /*#__PURE__*/React.isValidElement(children)) return null;
   var combinedRef = function combinedRef(node) {
     childRef.current = node;
-    if (/*#__PURE__*/React__default.default.isValidElement(children) && "ref" in children.props) {
-      var childRefProp = children.props.ref;
-      if (typeof childRefProp === "function") {
-        childRefProp(node);
-      } else if (childRefProp && _typeof__default.default(childRefProp) === "object") {
-        childRefProp.current = node;
-      }
+    var childRefProp = children.ref;
+    if (typeof childRefProp === "function") {
+      childRefProp(node);
+    } else if (childRefProp && _typeof__default.default(childRefProp) === "object" && "current" in childRefProp) {
+      childRefProp.current = node;
     }
   };
   return /*#__PURE__*/React.cloneElement(children, {

package/Dropdown/Dropdown.module.css

@@ -4,6 +4,14 @@
   z-index: 1001;
 }
 
+.popper-container.placement-top {
+  transform-origin: bottom center;
+}
+
+.popper-container.placement-bottom {
+  transform-origin: top center;
+}
+
 .overlay-container {
   background-color: var(--palette-white);
   border-color: var(--palette-bg-2);

package/Dropdown/index.d.ts

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

package/Dropdown/index.js

@@ -2,17 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
 var classNames = require('classnames/bind');
-var reactPopper = require('react-popper');
-var index = require('../Portal/index.js');
-var on = require('../helpers/on.js');
-var index$1 = require('../ClickOutside/index.js');
+var react = require('@floating-ui/react');
+var index = require('../ClickOutside/index.js');
 var styles = require('./Dropdown.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
+var _toConsumableArray__default = /*#__PURE__*/_interopDefault(_toConsumableArray);
 var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
@@ -27,7 +27,7 @@ var Dropdown = function Dropdown(_ref) {
     onVisibleChange = _ref.onVisibleChange,
     overlay = _ref.overlay,
     _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? "bottom-start" : _ref$placement,
+    placement = _ref$placement === void 0 ? "bottom-center" : _ref$placement,
     _ref$strategy = _ref.strategy,
     strategy = _ref$strategy === void 0 ? "absolute" : _ref$strategy,
     _ref$trigger = _ref.trigger,
@@ -39,102 +39,55 @@ var Dropdown = function Dropdown(_ref) {
     _ref$preventAutoClose = _ref.preventAutoClose,
     preventAutoClose = _ref$preventAutoClose === void 0 ? false : _ref$preventAutoClose,
     _ref$flip = _ref.flip,
-    flip = _ref$flip === void 0 ? true : _ref$flip,
+    flipEnabled = _ref$flip === void 0 ? true : _ref$flip,
     _ref$samewidth = _ref.samewidth,
     samewidth = _ref$samewidth === void 0 ? false : _ref$samewidth;
-  var _useState = React.useState(null),
+  var _a;
+  var _useState = React.useState(false),
     _useState2 = _slicedToArray__default.default(_useState, 2),
-    controlElement = _useState2[0],
-    setControlElement = _useState2[1];
-  var _useState3 = React.useState(null),
-    _useState4 = _slicedToArray__default.default(_useState3, 2),
-    popperElement = _useState4[0],
-    setPopperElement = _useState4[1];
-  var _useState5 = React.useState(false),
-    _useState6 = _slicedToArray__default.default(_useState5, 2),
-    visible = _useState6[0],
-    setVisible = _useState6[1];
+    visible = _useState2[0],
+    setVisible = _useState2[1];
   var isVisible = visibleProp && visible && !disabled;
-  var _usePopper = reactPopper.usePopper(controlElement, popperElement, {
+  var _useFloating = react.useFloating({
+      open: isVisible,
+      onOpenChange: setVisible,
       placement: placement,
       strategy: strategy,
-      modifiers: [{
-        name: "flip",
-        enabled: flip,
-        options: {
-          fallbackPlacements: ["top"]
-        }
-      }, {
-        name: "preventOverflow",
-        enabled: preventOverflow
-      }]
+      whileElementsMounted: react.autoUpdate,
+      middleware: [react.offset(6)].concat(_toConsumableArray__default.default(flipEnabled ? [react.flip()] : []), _toConsumableArray__default.default(preventOverflow ? [react.shift()] : []))
     }),
-    popperStyles = _usePopper.styles,
-    attributes = _usePopper.attributes,
-    update = _usePopper.update;
+    refs = _useFloating.refs,
+    floatingStyles = _useFloating.floatingStyles,
+    context = _useFloating.context,
+    update = _useFloating.update,
+    finalPlacement = _useFloating.placement;
+  var hover = react.useHover(context, {
+    enabled: trigger.includes("hover")
+  });
+  var click = react.useClick(context, {
+    enabled: trigger.includes("click")
+  });
+  var focus = react.useFocus(context, {
+    enabled: trigger.includes("focus")
+  });
+  var dismiss = react.useDismiss(context);
+  var role = react.useRole(context, {
+    role: "menu"
+  });
+  var _useInteractions = react.useInteractions([hover, click, focus, dismiss, role]),
+    getReferenceProps = _useInteractions.getReferenceProps,
+    getFloatingProps = _useInteractions.getFloatingProps;
   var isNotComponent = typeof children === "string";
   var reference = React.useMemo(function () {
     if (!children) return null;
     return React.Children.only(isNotComponent ? /*#__PURE__*/React__default.default.createElement("button", null, children) : children);
   }, [children, isNotComponent]);
-  var onToggle = function onToggle(event) {
-    var _a;
-    if ((_a = event.target) === null || _a === void 0 ? void 0 : _a.closest('[data-ignore-click="true"]')) {
-      return;
-    }
-    setVisible(function (state) {
-      return !state;
-    });
-  };
-  var handleShow = function handleShow() {
-    return setVisible(true);
-  };
-  var handleHide = React.useCallback(function () {
-    setVisible(false);
-  }, []);
-  var onClickOutside = React.useCallback(function (event) {
-    if (controlElement === null || controlElement === void 0 ? void 0 : controlElement.contains(event.target)) return;
-    handleHide();
-  }, [handleHide, controlElement]);
   var onClickOverlay = React.useCallback(function (event) {
     event.stopPropagation();
     if (!preventAutoClose) {
-      handleHide();
-    }
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [handleHide]);
-  React.useEffect(function () {
-    var unsubscribes = [];
-    if (trigger.includes("click")) {
-      unsubscribes.push(on.on(controlElement, "click", onToggle, false));
+      setVisible(false);
     }
-    if (trigger.includes("hover")) {
-      unsubscribes.push(on.on(controlElement, "mouseenter", handleShow, false));
-      unsubscribes.push(on.on(controlElement, "mouseleave", handleHide, false));
-      unsubscribes.push(on.on(popperElement, "mouseenter", handleShow, false));
-      unsubscribes.push(on.on(popperElement, "mouseleave", handleHide, false));
-    }
-    if (trigger.includes("focus")) {
-      var onFocusOut = function onFocusOut() {
-        requestAnimationFrame(function () {
-          if (controlElement === null || controlElement === void 0 ? void 0 : controlElement.contains(document.activeElement)) return;
-          if (popperElement === null || popperElement === void 0 ? void 0 : popperElement.contains(document.activeElement)) return;
-          handleHide();
-        });
-      };
-      unsubscribes.push(on.on(controlElement, "focusin", handleShow, false));
-      unsubscribes.push(on.on(controlElement, "focusout", onFocusOut, false));
-      unsubscribes.push(on.on(popperElement, "focusin", handleShow, false));
-      unsubscribes.push(on.on(popperElement, "focusout", onFocusOut, false));
-    }
-    return function () {
-      return unsubscribes.forEach(function (un) {
-        return un();
-      });
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [controlElement, popperElement, onToggle, handleShow, handleHide]);
+  }, [preventAutoClose]);
   React.useEffect(function () {
     if (onVisibleChange) onVisibleChange(visible);
   }, [onVisibleChange, visible]);
@@ -142,24 +95,23 @@ var Dropdown = function Dropdown(_ref) {
     if (update) update();
   }, [update, visible]);
   return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, reference && (/*#__PURE__*/React__default.default.createElement(reference.type, Object.assign({
-    ref: setControlElement,
+    ref: refs.setReference,
     tabIndex: 0
-  }, reference.props))), isVisible && (/*#__PURE__*/React__default.default.createElement(index.default, null, /*#__PURE__*/React__default.default.createElement(index$1.default, {
-    onClick: onClickOutside
+  }, getReferenceProps(reference.props)))), isVisible && (/*#__PURE__*/React__default.default.createElement(react.FloatingPortal, null, /*#__PURE__*/React__default.default.createElement(index.default, {
+    onClick: function onClick() {
+      return setVisible(false);
+    }
   }, /*#__PURE__*/React__default.default.createElement("div", Object.assign({
-    ref: setPopperElement,
+    ref: refs.setFloating,
     "data-testid": "popper-container",
-    className: clx("popper-container"),
-    style: Object.assign(Object.assign(Object.assign(Object.assign({}, popperStyles.popper), {
+    className: clx("popper-container", "placement-".concat(finalPlacement)),
+    style: Object.assign(Object.assign({}, floatingStyles), {
       zIndex: zIndex,
-      minWidth: controlElement === null || controlElement === void 0 ? void 0 : controlElement.offsetWidth
-    }), samewidth && {
-      maxWidth: controlElement === null || controlElement === void 0 ? void 0 : controlElement.offsetWidth
-    }), {
+      minWidth: samewidth ? "".concat((_a = refs.reference.current) === null || _a === void 0 ? void 0 : _a.offsetWidth, "px") : undefined,
       fontSize: "".concat(fontSize, "px")
     }),
     tabIndex: 0
-  }, attributes.popper), /*#__PURE__*/React__default.default.createElement("div", {
+  }, getFloatingProps()), /*#__PURE__*/React__default.default.createElement("div", {
     "data-testid": "overlay-container",
     className: clx("overlay-container"),
     onClick: onClickOverlay

package/Dropdown/index.props.d.ts

@@ -1,7 +1,5 @@
 import type { ReactNode } from "react";
-import type { PositioningStrategy } from "@popperjs/core";
-import type { Placement as PopperPlacement } from "@popperjs/core";
-export type Placement = Extract<PopperPlacement, "bottom-start" | "bottom" | "bottom-end">;
+import type { Placement, Strategy } from "@floating-ui/react";
 export type Trigger = "click" | "hover" | "focus";
 export type DropdownProps = {
     zIndex?: number;
@@ -10,7 +8,7 @@ export type DropdownProps = {
     onVisibleChange?: (visible: boolean) => void;
     overlay: ReactNode;
     placement?: Placement;
-    strategy?: PositioningStrategy;
+    strategy?: Strategy;
     trigger?: [Trigger, ...Trigger[]];
     visible?: boolean;
     preventOverflow?: boolean;

package/Menu/components/MenuItem/index.js

@@ -28,7 +28,7 @@ var MenuItem = function MenuItem(_a) {
     ref = _a.ref,
     props = tslib.__rest(_a, ["className", "isSelected", "variant", "disabled", "onClick", "children", "onMouseEnter", "ref"]);
   var handleKeyDown = function handleKeyDown(event) {
-    if (!disabled && (event.key === 'Enter' || event.key === ' ')) {
+    if (!disabled && (event.key === "Enter" || event.key === " ")) {
       event.preventDefault();
       onClick === null || onClick === void 0 ? void 0 : onClick(event);
     }
@@ -40,8 +40,8 @@ var MenuItem = function MenuItem(_a) {
     "data-testid": "menuitem",
     "aria-disabled": disabled || undefined,
     className: clx("item", _defineProperty__default.default({
-      'item_disabled': disabled,
-      'item_selected': isSelected
+      item_disabled: disabled,
+      item_selected: isSelected
     }, "item_variant_".concat(variant), true), className),
     onClick: !disabled ? onClick : undefined,
     onKeyDown: handleKeyDown,

package/Menu/index.js

@@ -39,7 +39,7 @@ var Menu = function Menu(_ref) {
   }, [children, selected, onClick, variant]);
   return /*#__PURE__*/React__default.default.createElement("ul", {
     ref: ref,
-    className: clx('menu', className),
+    className: clx("menu", className),
     role: "menu"
   }, renderChild);
 };

package/MultiSelect/components/MenuOverlay/index.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
-var classNames = require('classnames/bind');
 var index$2 = require('../../../Menu/index.js');
 var index$3 = require('../MenuOverlayItem/index.js');
 var index = require('../../../Typography/index.js');
@@ -16,10 +15,8 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
 var React__default = /*#__PURE__*/_interopDefault(React);
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-var clx = classNames__default.default.bind(styles__default.default);
 var OFFSET_ITEMS_COUNT = 2;
 var MenuOverlay = function MenuOverlay(_ref) {
   var groups = _ref.groups,
@@ -76,12 +73,12 @@ var MenuOverlay = function MenuOverlay(_ref) {
   }, []);
   return /*#__PURE__*/React__default.default.createElement("div", {
     ref: rootRef,
-    className: clx(styles__default.default.root)
+    className: styles__default.default.root
   }, groups.map(function (group, index$5) {
     return /*#__PURE__*/React__default.default.createElement("div", {
       key: "item-".concat(index$5)
     }, /*#__PURE__*/React__default.default.createElement("div", {
-      className: clx(styles__default.default.title)
+      className: styles__default.default.title
     }, /*#__PURE__*/React__default.default.createElement(index.default, {
       style: {
         color: "var(--typography-secondary)"

package/MultiSelect/index.js

@@ -129,16 +129,19 @@ var MultiSelect = function MultiSelect(_ref2) {
       onChange: handleChange
     }),
     samewidth: true
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    tabIndex: 0,
+    role: "button"
   }, /*#__PURE__*/React__default.default.createElement(index$4.default, {
     hasError: hasError,
     size: size,
     style: style,
-    className: clx(styles__default.default.root, {
+    className: clx("root", {
       root_auto: preparedLabel.length
     }),
     endIcon: /*#__PURE__*/React__default.default.createElement(Chevron.default, {
-      className: clx(styles__default.default.icon, {
-        icon_isOpen: isOpen
+      className: clx("icon", {
+        icon_isOpen: isOpen && Boolean(!disabled)
       })
     }),
     disabled: Boolean(disabled)
@@ -165,7 +168,7 @@ var MultiSelect = function MultiSelect(_ref2) {
     name: name,
     tabIndex: -1,
     value: internalSelectedKeys.join(",") || ""
-  }))));
+  })))));
 };
 
 exports.default = MultiSelect;

package/MultiSelect/index.module.css

@@ -1,7 +1,6 @@
 .root {
   cursor: pointer;
 }
-
 .root_auto {
   height: auto;
   min-height: 36px;

package/Select/components/MenuOverlay/index.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
-var classNames = require('classnames/bind');
 var index = require('../../../Menu/index.js');
 var index$1 = require('../MenuOverlayItem/index.js');
 var styles = require('./index.module.css');
@@ -13,10 +12,8 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
 var React__default = /*#__PURE__*/_interopDefault(React);
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-var clx = classNames__default.default.bind(styles__default.default);
 var OFFSET_ITEMS_COUNT = 2;
 var MenuOverlay = function MenuOverlay(_ref) {
   var options = _ref.options,
@@ -50,7 +47,7 @@ var MenuOverlay = function MenuOverlay(_ref) {
   }, [scrollView, rootRef]);
   return /*#__PURE__*/React__default.default.createElement("div", {
     ref: rootRef,
-    className: clx(styles__default.default.root)
+    className: styles__default.default.root
   }, /*#__PURE__*/React__default.default.createElement(index.default, {
     ref: listRef,
     selected: selected

package/Select/index.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import type { JSX } from "react";
 import type { SelectProps } from "./index.props";
-declare const Select: <T extends string>({ options, value, name, zIndex, fontSize, label, hint, hasError, required, placeholder, disabled, size, fullWidth, customInputRoot, className, onChange, }: SelectProps<T>) => React.JSX.Element;
+declare const Select: <T extends string>({ options, value, name, zIndex, fontSize, label, hint, hasError, required, placeholder, disabled, size, fullWidth, customInputRoot, className, onChange, }: SelectProps<T>) => JSX.Element;
 export default Select;

package/Select/index.js

@@ -57,7 +57,7 @@ var Select = function Select(_ref) {
       };
     });
   }, [value, options]);
-  var prepraredLabel = React.useMemo(function () {
+  var preparedLabel = React.useMemo(function () {
     var _a;
     return (_a = preparedOptions.find(function (_ref3) {
       var selected = _ref3.selected;
@@ -79,33 +79,36 @@ var Select = function Select(_ref) {
     trigger: ["click"],
     zIndex: zIndex,
     fontSize: fontSize,
-    disabled: !!disabled,
+    disabled: Boolean(disabled),
     overlay: /*#__PURE__*/React__default.default.createElement(index$2.default, {
       options: preparedOptions,
       onChange: onChange
     }),
     samewidth: true
-  }, customInputRoot ? customInputRoot : (/*#__PURE__*/React__default.default.createElement(index$3.default, {
+  }, customInputRoot ? customInputRoot : (/*#__PURE__*/React__default.default.createElement("div", {
+    tabIndex: 0,
+    role: "button"
+  }, /*#__PURE__*/React__default.default.createElement(index$3.default, {
     hasError: hasError,
     size: size,
     className: clx(styles__default.default.root),
     endIcon: /*#__PURE__*/React__default.default.createElement(Chevron.default, {
       className: clx(styles__default.default.icon, {
-        icon_isOpen: isOpen ? 1 : 0
+        icon_isOpen: isOpen && Boolean(!disabled)
       })
     }),
-    disabled: !!disabled
+    disabled: Boolean(disabled)
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: clx(styles__default.default["base-input"]),
     "data-testid": "base-input"
-  }, prepraredLabel !== null && prepraredLabel !== void 0 ? prepraredLabel : (/*#__PURE__*/React__default.default.createElement("span", {
+  }, preparedLabel !== null && preparedLabel !== void 0 ? preparedLabel : (/*#__PURE__*/React__default.default.createElement("span", {
     className: clx(styles__default.default.placeholder)
   }, placeholder))), /*#__PURE__*/React__default.default.createElement("input", {
     type: "hidden",
     name: name,
     tabIndex: -1,
     value: value || ""
-  })))));
+  }))))));
 };
 
 exports.default = Select;

package/Tooltip/Tooltip.module.css

@@ -1,122 +1,28 @@
-.root[data-popper-placement=bottom-start] {
-  padding-top: 4px;
-}
-.root[data-popper-placement=bottom-start]::before {
-  left: 6px;
-  top: 0;
-}
-.root[data-popper-placement=bottom-end] {
-  padding-top: 4px;
-}
-.root[data-popper-placement=bottom-end]::before {
-  right: 6px;
-  top: 0;
-}
-.root[data-popper-placement=bottom] {
-  padding-top: 4px;
-}
-.root[data-popper-placement=bottom]::before {
-  left: 50%;
-  top: 0;
-  transform: translate(-50%, 0);
-}
-.root[data-popper-placement=right] {
-  padding-left: 4px;
-}
-.root[data-popper-placement=right]::before {
-  left: -6px;
-  top: 50%;
-  transform: translate(0, -50%) rotate(-90deg);
-}
-.root[data-popper-placement=right-start] {
-  padding-left: 4px;
-}
-.root[data-popper-placement=right-start]::before {
-  left: -6px;
-  top: 6px;
-  transform: rotate(-90deg);
-}
-.root[data-popper-placement=right-end] {
-  padding-left: 4px;
-}
-.root[data-popper-placement=right-end]::before {
-  bottom: 6px;
-  left: -6px;
-  transform: rotate(-90deg);
-}
-.root[data-popper-placement=left] {
-  padding-right: 4px;
-}
-.root[data-popper-placement=left]::before {
-  right: -6px;
-  top: 50%;
-  transform: translate(0, -50%) rotate(90deg);
-}
-.root[data-popper-placement=left-start] {
-  padding-right: 4px;
-}
-.root[data-popper-placement=left-start]::before {
-  right: -6px;
-  top: 6px;
-  transform: rotate(90deg);
-}
-.root[data-popper-placement=left-end] {
-  padding-right: 4px;
-}
-.root[data-popper-placement=left-end]::before {
-  bottom: 6px;
-  right: -6px;
-  transform: rotate(90deg);
-}
-.root[data-popper-placement=top] {
-  padding-bottom: 4px;
-}
-.root[data-popper-placement=top]::before {
-  bottom: 0;
-  left: 50%;
-  transform: translate(-50%, 0) rotate(180deg);
-}
-.root[data-popper-placement=top-start] {
-  padding-bottom: 4px;
-}
-.root[data-popper-placement=top-start]::before {
-  bottom: 0;
-  left: 6px;
-  transform: rotate(180deg);
-}
-.root[data-popper-placement=top-end] {
-  padding-bottom: 4px;
-}
-.root[data-popper-placement=top-end]::before {
-  bottom: 0;
-  right: 6px;
-  transform: rotate(180deg);
-}
-
-.tail {
-  position: relative;
-}
-.tail::before {
-  border-bottom: 5px solid var(--tooltip-bg);
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  content: "";
-  height: 0;
-  position: absolute;
-  width: 0;
-  z-index: 3000;
-}
-
-.overlay {
+.tooltip {
   background-color: var(--tooltip-bg);
   border-radius: 0.35rem;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
   color: var(--tooltip-color);
+  display: inline-block;
   font-size: 14px;
-  font-style: normal;
   font-weight: 400;
   line-height: 18px;
   max-width: 200px;
-  overflow: hidden;
   padding: 4px 10px;
   position: relative;
+  z-index: 1000;
+}
+
+.content {
+  background-color: inherit;
+  border-radius: inherit;
+  color: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  max-width: inherit;
+  overflow: hidden;
+  padding: inherit;
+  position: relative;
 }