@megafon/ui-core 4.7.0 → 4.8.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.8.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.7.0...@megafon/ui-core@4.8.0) (2022-11-14)
+
+
+### Bug Fixes
+
+* **search:** fix scrollbar styles ([c8df5df](https://github.com/MegafonWebLab/megafon-ui/commit/c8df5df9787984a5eb9556b786ab8a6bee75dcb7))
+* **select:** fix scrollbar styles ([15fdd41](https://github.com/MegafonWebLab/megafon-ui/commit/15fdd4170b600b8dad5f6144dadb86ae1d1e7cc0))
+* **tabs:** update resize ([710895f](https://github.com/MegafonWebLab/megafon-ui/commit/710895f4c2f0899fb41ac08e7dde7b1636c24ed9))
+* **textfield:** fix scrollbar styles ([8205a34](https://github.com/MegafonWebLab/megafon-ui/commit/8205a345dfe254a8f46fe4b1023f18761a5a9d29))
+
+
+### Features
+
+* **tooltip:** add props and update design ([3bb935a](https://github.com/MegafonWebLab/megafon-ui/commit/3bb935ae0b8f302f4dd9a9ef58496e9f19e3cd2f))
+
+
+
+
+
 # [4.7.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.6.0...@megafon/ui-core@4.7.0) (2022-11-07)
 
 

package/dist/es/components/Accordion/Accordion.css

@@ -14,6 +14,7 @@
   position: relative;
   padding: 24px 44px 24px 16px;
   border-radius: 12px;
+  outline: none;
   cursor: pointer;
   -webkit-transition: background-color 0.3s;
   transition: background-color 0.3s;

package/dist/es/components/Button/Button.d.ts

@@ -37,6 +37,8 @@ export interface IButtonProps {
         content?: Record<string, string>;
         inner?: Record<string, string>;
         loader?: Record<string, string>;
+        text?: Record<string, string>;
+        arrow?: Record<string, string>;
     };
     /** Тема компонента */
     theme?: ButtonThemesType;

package/dist/es/components/Button/Button.js

@@ -130,14 +130,14 @@ var Button = function Button(_ref) {
       }, contentClassName)
     }), icon && /*#__PURE__*/React.createElement("div", {
       className: cn('icon')
-    }, icon), children && /*#__PURE__*/React.createElement("span", {
+    }, icon), children && /*#__PURE__*/React.createElement("span", _extends({
       className: cn('text', {
         ellipsis: ellipsis
       })
-    }, children), !icon && showArrow && /*#__PURE__*/React.createElement(Arrow, {
+    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text)), children), !icon && showArrow && /*#__PURE__*/React.createElement(Arrow, _extends({
       className: cn('icon-arrow')
-    }));
-  }, [children, icon, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content, contentClassName, showArrow, ellipsis]);
+    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow))));
+  }, [children, icon, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow, ellipsis, contentClassName, showArrow]);
   var contentType = React.useMemo(function () {
     switch (true) {
       case icon && !children:
@@ -222,7 +222,9 @@ Button.propTypes = {
     root: PropTypes.objectOf(PropTypes.string.isRequired),
     content: PropTypes.objectOf(PropTypes.string.isRequired),
     inner: PropTypes.objectOf(PropTypes.string.isRequired),
-    loader: PropTypes.objectOf(PropTypes.string.isRequired)
+    loader: PropTypes.objectOf(PropTypes.string.isRequired),
+    text: PropTypes.objectOf(PropTypes.string.isRequired),
+    arrow: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   theme: PropTypes.oneOf(Object.values(ButtonThemes)),
   type: PropTypes.oneOf(Object.values(ButtonTypes)),

package/dist/es/components/Notification/Notification.d.ts

@@ -9,9 +9,13 @@ export declare const NotificationTypes: {
 declare type NotificationType = typeof NotificationTypes[keyof typeof NotificationTypes];
 export declare const ShadowTypes: {
     readonly ZERO: "zero";
+    /**  @deprecated TODO: нужно удалить значение при выпуске мажорной версии */
     readonly LOW: "low";
+    /**  @deprecated TODO: нужно удалить значение при выпуске мажорной версии */
     readonly HIGH: "high";
     readonly HOVER: "hover";
+    readonly PRESSED: "pressed";
+    readonly DEFAULT: "default";
 };
 declare type ShadowType = typeof ShadowTypes[keyof typeof ShadowTypes];
 export interface INotificationProps {

package/dist/es/components/Notification/Notification.js

@@ -92,9 +92,15 @@ export var NotificationTypes = {
 };
 export var ShadowTypes = {
   ZERO: 'zero',
+
+  /**  @deprecated TODO: нужно удалить значение при выпуске мажорной версии */
   LOW: 'low',
+
+  /**  @deprecated TODO: нужно удалить значение при выпуске мажорной версии */
   HIGH: 'high',
-  HOVER: 'hover'
+  HOVER: 'hover',
+  PRESSED: 'pressed',
+  DEFAULT: 'default'
 };
 var cn = cnCreate('mfui-notification');
 

package/dist/es/components/Search/Search.css

@@ -231,6 +231,20 @@
   max-height: 368px;
   padding: 16px;
   overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--spbSky2) transparent;
+}
+.mfui-search__list-inner::-webkit-scrollbar {
+  width: 16px;
+}
+.mfui-search__list-inner::-webkit-scrollbar-thumb {
+  border: 6px solid transparent;
+  border-radius: 16px;
+  background-color: #D8D8D8;
+  background-clip: padding-box;
+}
+.mfui-search__list-inner::-webkit-scrollbar-thumb:hover {
+  background-color: #999999;
 }
 .mfui-search__list-item {
   font-family: inherit;

package/dist/es/components/Select/Select.css

@@ -177,6 +177,8 @@
   max-height: 368px;
   padding: 16px;
   overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--spbSky2) transparent;
 }
 .mfui-select__list-inner_short {
   max-height: 235px;

package/dist/es/components/Tabs/Tabs.js

@@ -396,7 +396,8 @@ var Tabs = function Tabs(_ref) {
     onSwiper: handleSwiper,
     onReachBeginning: handleReachBeginning,
     onReachEnd: handleReachEnd,
-    onFromEdge: handleFromEdge
+    onFromEdge: handleFromEdge,
+    observer: true
   }), renderTabs(), /*#__PURE__*/React.createElement("div", {
     className: cn('underline'),
     slot: "wrapper-start",

package/dist/es/components/TextField/TextField.css

@@ -161,6 +161,10 @@
   font-size: 15px;
   line-height: 24px;
 }
+.mfui-text-field__field_textarea {
+  scrollbar-width: thin;
+  scrollbar-color: var(--spbSky2) transparent;
+}
 .mfui-text-field__field_textarea ~ .mfui-text-field__label {
   top: 16px;
 }

package/dist/es/components/Tile/Tile.css

@@ -3,7 +3,7 @@
   background-color: var(--base);
 }
 .mfui-tile_radius_rounded {
-  border-radius: 8px;
+  border-radius: 12px;
 }
 .mfui-tile_pointer {
   cursor: pointer;
@@ -16,11 +16,6 @@
   -webkit-box-shadow: 0 2px 9px rgba(0, 0, 0, 0.15);
           box-shadow: 0 2px 9px rgba(0, 0, 0, 0.15);
 }
-.mfui-tile_theme_light.mfui-tile_shadow_hover,
-.mfui-tile_theme_light.mfui-tile_interactive:hover {
-  -webkit-box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
-          box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
-}
 .mfui-tile_theme_dark.mfui-tile_shadow_low {
   -webkit-box-shadow: 0 0.25px 3px rgba(0, 0, 0, 0.45);
           box-shadow: 0 0.25px 3px rgba(0, 0, 0, 0.45);
@@ -29,6 +24,27 @@
   -webkit-box-shadow: 0 2px 9px rgba(0, 0, 0, 0.25);
           box-shadow: 0 2px 9px rgba(0, 0, 0, 0.25);
 }
+.mfui-tile_theme_light.mfui-tile_shadow_default {
+  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+.mfui-tile_theme_light.mfui-tile_shadow_pressed {
+  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
+}
+.mfui-tile_theme_light.mfui-tile_shadow_hover,
+.mfui-tile_theme_light.mfui-tile_interactive:hover {
+  -webkit-box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
+}
+.mfui-tile_theme_dark.mfui-tile_shadow_default {
+  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
+          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
+}
+.mfui-tile_theme_dark.mfui-tile_shadow_pressed {
+  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
 .mfui-tile_theme_dark.mfui-tile_shadow_hover,
 .mfui-tile_theme_dark.mfui-tile_interactive:hover {
   -webkit-box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);

package/dist/es/components/Tile/Tile.d.ts

@@ -10,13 +10,17 @@ export declare const Radius: {
     readonly ROUNDED: "rounded";
 };
 declare type RadiusType = typeof Radius[keyof typeof Radius];
-export declare const Shadow: {
+export declare const ShadowLevel: {
     readonly ZERO: "zero";
-    readonly LOW: "low";
-    readonly HIGH: "high";
+    readonly DEFAULT: "default";
     readonly HOVER: "hover";
+    readonly PRESSED: "pressed";
+    /**  @deprecated TODO: нужно удалить значение при выпуске мажорной версии */
+    readonly HIGH: "high";
+    /**  @deprecated TODO: нужно удалить значение при выпуске мажорной версии */
+    readonly LOW: "low";
 };
-declare type ShadowType = typeof Shadow[keyof typeof Shadow];
+declare type ShadowLevelType = typeof ShadowLevel[keyof typeof ShadowLevel];
 export interface ITileProps {
     /** Ссылка */
     href?: string;
@@ -27,7 +31,7 @@ export interface ITileProps {
     /** Радиус границы */
     radius?: RadiusType;
     /** Уровень тени */
-    shadowLevel?: ShadowType;
+    shadowLevel?: ShadowLevelType;
     /** Включить тень при наведении */
     isInteractive?: boolean;
     /** Дополнительный класс корневого элемента */

package/dist/es/components/Tile/Tile.js

@@ -12,11 +12,17 @@ export var Radius = {
   DEFAULT: 'default',
   ROUNDED: 'rounded'
 };
-export var Shadow = {
+export var ShadowLevel = {
   ZERO: 'zero',
-  LOW: 'low',
+  DEFAULT: 'default',
+  HOVER: 'hover',
+  PRESSED: 'pressed',
+
+  /**  @deprecated TODO: нужно удалить значение при выпуске мажорной версии */
   HIGH: 'high',
-  HOVER: 'hover'
+
+  /**  @deprecated TODO: нужно удалить значение при выпуске мажорной версии */
+  LOW: 'low'
 };
 var cn = cnCreate('mfui-tile');
 
@@ -44,6 +50,7 @@ var Tile = function Tile(_ref) {
   var isPointer = !!href || isInteractive;
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cn({
+      // TODO: переименовать в shadowColor
       theme: theme,
       radius: radius,
       shadow: shadowLevel,
@@ -62,7 +69,7 @@ Tile.propTypes = {
   href: PropTypes.string,
   theme: PropTypes.oneOf(Object.values(Theme)),
   radius: PropTypes.oneOf(Object.values(Radius)),
-  shadowLevel: PropTypes.oneOf(Object.values(Shadow)),
+  shadowLevel: PropTypes.oneOf(Object.values(ShadowLevel)),
   className: PropTypes.string,
   isInteractive: PropTypes.bool,
   onClick: PropTypes.func,

package/dist/es/components/Tooltip/Tooltip.css

@@ -6,6 +6,8 @@
           transition-duration: 0.3s;
   -webkit-transition-property: opacity, visibility;
   transition-property: opacity, visibility;
+  font-size: 12px;
+  line-height: 18px;
   pointer-events: none;
 }
 .mfui-tooltip_open {
@@ -14,7 +16,7 @@
   pointer-events: all;
 }
 .mfui-tooltip_paddings_small .mfui-tooltip__content {
-  padding: 8px 16px;
+  padding: 16px;
 }
 .mfui-tooltip_paddings_medium .mfui-tooltip__content {
   padding: 24px;
@@ -22,102 +24,271 @@
 .mfui-tooltip__content {
   position: relative;
   z-index: 1;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  gap: 8px;
 }
 .mfui-tooltip__content-shadow {
   position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   z-index: -1;
 }
-.mfui-tooltip__arrow {
-  width: 12px;
-  height: 12px;
+.mfui-tooltip__arrow-container {
   position: absolute;
 }
-.mfui-tooltip__arrow:before {
-  width: 12px;
+.mfui-tooltip__arrow-wrap {
+  width: 42px;
   height: 12px;
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  -webkit-transform: rotate(45deg);
-          transform: rotate(45deg);
-  background-color: var(--base);
 }
-.mfui-tooltip__arrow-shadow {
-  width: 12px;
+.mfui-tooltip__arrow {
+  width: 42px;
   height: 12px;
   position: absolute;
-  z-index: -1;
 }
-.mfui-tooltip__arrow-shadow:before {
-  width: 12px;
-  height: 12px;
-  content: '';
+.mfui-tooltip__arrow-inner {
+  -webkit-filter: drop-shadow(0 2px 9px rgba(0, 0, 0, 0.15));
+          filter: drop-shadow(0 2px 9px rgba(0, 0, 0, 0.15));
+  fill: var(--base);
+}
+.mfui-tooltip__text {
+  font-size: 12px;
+  line-height: 18px;
+}
+.mfui-tooltip__button,
+.mfui-tooltip__close-button {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  padding: 0;
+  border: none;
+  cursor: pointer;
+}
+.mfui-tooltip__button {
+  font-family: inherit;
+  color: var(--brandGreen);
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 14px;
+  background-color: transparent;
+  -webkit-transition: 300ms;
+  transition: 300ms;
+}
+.mfui-tooltip__button:hover {
+  color: var(--buttonHoverGreen);
+}
+.mfui-tooltip__button:hover .mfui-tooltip__button-arrow {
+  fill: var(--buttonHoverGreen);
+}
+.mfui-tooltip__button:active {
+  color: var(--buttonDown);
+}
+.mfui-tooltip__button:active .mfui-tooltip__button-arrow {
+  fill: var(--buttonDown);
+}
+.mfui-tooltip__close-button {
   position: absolute;
-  top: 0;
-  left: 0;
-  -webkit-transform: rotate(45deg);
-          transform: rotate(45deg);
-  -webkit-box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.15);
-          box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.15);
+  top: 10px;
+  right: 10px;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-left: 24px;
+  border-radius: 12px;
+  background-color: var(--spbSky0);
+  -webkit-transition: 300ms;
+  transition: 300ms;
 }
-.mfui-tooltip[data-popper-placement='right'] .mfui-tooltip__arrow,
-.mfui-tooltip[data-popper-placement='right'] .mfui-tooltip__arrow-shadow {
-  right: calc(100% - 20px);
+.mfui-tooltip__close-button:hover {
+  background-color: var(--spbSky1);
 }
-.mfui-tooltip[data-popper-placement='right'] .mfui-tooltip__content {
-  -webkit-transform: translateX(14px);
-          transform: translateX(14px);
+.mfui-tooltip__close-button:active {
+  background-color: var(--spbSky2);
 }
-.mfui-tooltip[data-popper-placement='right'] .mfui-tooltip__content-shadow {
-  top: 0;
-  right: -14px;
-  bottom: 0;
-  left: 14px;
+.mfui-tooltip__close-icon {
+  display: block;
+  width: 20px;
+  height: 20px;
+  opacity: 0.5;
+  fill: var(--content);
 }
-.mfui-tooltip[data-popper-placement='left'] .mfui-tooltip__arrow,
-.mfui-tooltip[data-popper-placement='left'] .mfui-tooltip__arrow-shadow {
-  left: calc(100% - 20px);
+.mfui-tooltip__button-arrow {
+  width: 20px;
+  min-width: 20px;
+  height: 20px;
+  margin-bottom: -2px;
+  -webkit-transition: 300ms;
+  transition: 300ms;
+  fill: var(--brandGreen);
 }
-.mfui-tooltip[data-popper-placement='left'] .mfui-tooltip__content {
-  -webkit-transform: translateX(-14px);
-          transform: translateX(-14px);
+.mfui-tooltip_small .mfui-tooltip__content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  gap: 18px;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
-.mfui-tooltip[data-popper-placement='left'] .mfui-tooltip__content-shadow {
-  top: 0;
-  right: 14px;
-  bottom: 0;
-  left: -14px;
+.mfui-tooltip_small .mfui-tooltip__text {
+  font-weight: 500;
 }
-.mfui-tooltip[data-popper-placement='top'] .mfui-tooltip__arrow,
-.mfui-tooltip[data-popper-placement='top'] .mfui-tooltip__arrow-shadow {
-  top: calc(100% - 20px);
+.mfui-tooltip_small .mfui-tooltip__close-button {
+  position: static;
+  margin-left: 0;
 }
-.mfui-tooltip[data-popper-placement='top'] .mfui-tooltip__content {
-  -webkit-transform: translateY(-14px);
-          transform: translateY(-14px);
+.mfui-tooltip_theme_red .mfui-tooltip__content,
+.mfui-tooltip_theme_blue .mfui-tooltip__content,
+.mfui-tooltip_theme_red .mfui-tooltip__arrow:before,
+.mfui-tooltip_theme_blue .mfui-tooltip__arrow:before,
+.mfui-tooltip_theme_red .mfui-tooltip__title,
+.mfui-tooltip_theme_blue .mfui-tooltip__title,
+.mfui-tooltip_theme_red .mfui-tooltip__button,
+.mfui-tooltip_theme_blue .mfui-tooltip__button {
+  color: var(--stcWhite);
 }
-.mfui-tooltip[data-popper-placement='top'] .mfui-tooltip__content-shadow {
-  top: -14px;
-  right: 0;
-  bottom: 14px;
-  left: 0;
+.mfui-tooltip_theme_red .mfui-tooltip__button-arrow,
+.mfui-tooltip_theme_blue .mfui-tooltip__button-arrow {
+  fill: var(--stcWhite);
 }
-.mfui-tooltip[data-popper-placement='bottom'] .mfui-tooltip__arrow,
-.mfui-tooltip[data-popper-placement='bottom'] .mfui-tooltip__arrow-shadow {
-  bottom: calc(100% - 20px);
+.mfui-tooltip_theme_red .mfui-tooltip__button:hover,
+.mfui-tooltip_theme_blue .mfui-tooltip__button:hover {
+  color: var(--buttonHoverGrey);
 }
-.mfui-tooltip[data-popper-placement='bottom'] .mfui-tooltip__content {
-  -webkit-transform: translateY(14px);
-          transform: translateY(14px);
+.mfui-tooltip_theme_red .mfui-tooltip__button:hover .mfui-tooltip__button-arrow,
+.mfui-tooltip_theme_blue .mfui-tooltip__button:hover .mfui-tooltip__button-arrow {
+  fill: var(--buttonHoverGrey);
 }
-.mfui-tooltip[data-popper-placement='bottom'] .mfui-tooltip__content-shadow {
-  top: 14px;
-  right: 0;
-  bottom: -14px;
-  left: 0;
+.mfui-tooltip_theme_red .mfui-tooltip__button:active,
+.mfui-tooltip_theme_blue .mfui-tooltip__button:active {
+  color: var(--buttonDown);
+}
+.mfui-tooltip_theme_red .mfui-tooltip__button:active .mfui-tooltip__button-arrow,
+.mfui-tooltip_theme_blue .mfui-tooltip__button:active .mfui-tooltip__button-arrow {
+  fill: var(--buttonDown);
+}
+.mfui-tooltip_theme_red .mfui-tooltip__close-button,
+.mfui-tooltip_theme_blue .mfui-tooltip__close-button {
+  background-color: var(--stcWhite10);
+}
+.mfui-tooltip_theme_red .mfui-tooltip__close-button:hover,
+.mfui-tooltip_theme_blue .mfui-tooltip__close-button:hover {
+  background-color: var(--stcWhite20);
+}
+.mfui-tooltip_theme_red .mfui-tooltip__close-button:active,
+.mfui-tooltip_theme_blue .mfui-tooltip__close-button:active {
+  background-color: var(--stcWhite50);
+}
+.mfui-tooltip_theme_red .mfui-tooltip__close-icon,
+.mfui-tooltip_theme_blue .mfui-tooltip__close-icon {
+  opacity: 1;
+  fill: var(--stcWhite);
+}
+.mfui-tooltip_theme_red .mfui-tooltip__content,
+.mfui-tooltip_theme_red .mfui-tooltip__content-shadow,
+.mfui-tooltip_theme_red .mfui-tooltip__arrow:before {
+  background-color: var(--fury80);
+}
+.mfui-tooltip_theme_red .mfui-tooltip__arrow-inner {
+  fill: var(--fury80);
+}
+.mfui-tooltip_theme_blue .mfui-tooltip__content,
+.mfui-tooltip_theme_blue .mfui-tooltip__content-shadow,
+.mfui-tooltip_theme_blue .mfui-tooltip__arrow:before {
+  background-color: var(--reflexBlue80);
+}
+.mfui-tooltip_theme_blue .mfui-tooltip__arrow-inner {
+  fill: var(--reflexBlue80);
+}
+.mfui-tooltip[data-popper-placement='right'] .mfui-tooltip__arrow-container,
+.mfui-tooltip[data-popper-placement='right-start'] .mfui-tooltip__arrow-container,
+.mfui-tooltip[data-popper-placement='right-end'] .mfui-tooltip__arrow-container {
+  left: -12px;
+  width: 12px;
+  height: 100%;
+}
+.mfui-tooltip[data-popper-placement='right'] .mfui-tooltip__arrow-wrap,
+.mfui-tooltip[data-popper-placement='right-start'] .mfui-tooltip__arrow-wrap,
+.mfui-tooltip[data-popper-placement='right-end'] .mfui-tooltip__arrow-wrap {
+  left: -15px;
+}
+.mfui-tooltip[data-popper-placement='right'] .mfui-tooltip__arrow,
+.mfui-tooltip[data-popper-placement='right-start'] .mfui-tooltip__arrow,
+.mfui-tooltip[data-popper-placement='right-end'] .mfui-tooltip__arrow,
+.mfui-tooltip[data-popper-placement='right'] .mfui-tooltip__arrow-shadow,
+.mfui-tooltip[data-popper-placement='right-start'] .mfui-tooltip__arrow-shadow,
+.mfui-tooltip[data-popper-placement='right-end'] .mfui-tooltip__arrow-shadow {
+  -webkit-transform: rotate(-90deg);
+          transform: rotate(-90deg);
+}
+.mfui-tooltip[data-popper-placement='left'] .mfui-tooltip__arrow-container,
+.mfui-tooltip[data-popper-placement='left-start'] .mfui-tooltip__arrow-container,
+.mfui-tooltip[data-popper-placement='left-end'] .mfui-tooltip__arrow-container {
+  right: -12px;
+  width: 12px;
+  height: 100%;
+}
+.mfui-tooltip[data-popper-placement='left'] .mfui-tooltip__arrow-wrap,
+.mfui-tooltip[data-popper-placement='left-start'] .mfui-tooltip__arrow-wrap,
+.mfui-tooltip[data-popper-placement='left-end'] .mfui-tooltip__arrow-wrap {
+  right: -15px;
+}
+.mfui-tooltip[data-popper-placement='left'] .mfui-tooltip__arrow,
+.mfui-tooltip[data-popper-placement='left-start'] .mfui-tooltip__arrow,
+.mfui-tooltip[data-popper-placement='left-end'] .mfui-tooltip__arrow,
+.mfui-tooltip[data-popper-placement='left'] .mfui-tooltip__arrow-shadow,
+.mfui-tooltip[data-popper-placement='left-start'] .mfui-tooltip__arrow-shadow,
+.mfui-tooltip[data-popper-placement='left-end'] .mfui-tooltip__arrow-shadow {
+  -webkit-transform: rotate(90deg);
+          transform: rotate(90deg);
+}
+.mfui-tooltip[data-popper-placement='top'] .mfui-tooltip__arrow-container,
+.mfui-tooltip[data-popper-placement='top-start'] .mfui-tooltip__arrow-container,
+.mfui-tooltip[data-popper-placement='top-end'] .mfui-tooltip__arrow-container {
+  bottom: -12px;
+  width: 100%;
+  height: 12px;
+}
+.mfui-tooltip[data-popper-placement='top'] .mfui-tooltip__arrow-wrap,
+.mfui-tooltip[data-popper-placement='top-start'] .mfui-tooltip__arrow-wrap,
+.mfui-tooltip[data-popper-placement='top-end'] .mfui-tooltip__arrow-wrap {
+  top: 0;
+}
+.mfui-tooltip[data-popper-placement='top'] .mfui-tooltip__arrow,
+.mfui-tooltip[data-popper-placement='top-start'] .mfui-tooltip__arrow,
+.mfui-tooltip[data-popper-placement='top-end'] .mfui-tooltip__arrow,
+.mfui-tooltip[data-popper-placement='top'] .mfui-tooltip__arrow-shadow,
+.mfui-tooltip[data-popper-placement='top-start'] .mfui-tooltip__arrow-shadow,
+.mfui-tooltip[data-popper-placement='top-end'] .mfui-tooltip__arrow-shadow {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+.mfui-tooltip[data-popper-placement='bottom'] .mfui-tooltip__arrow-container,
+.mfui-tooltip[data-popper-placement='bottom-start'] .mfui-tooltip__arrow-container,
+.mfui-tooltip[data-popper-placement='bottom-end'] .mfui-tooltip__arrow-container {
+  top: -12px;
+  width: 100%;
+  height: 12px;
 }
-.mfui-tooltip[data-popper-escaped='true'] {
+.mfui-tooltip[data-popper-escaped='true'].mfui-tooltip_has-escape {
   visibility: hidden;
   pointer-events: none;
 }