@cube-dev/ui-kit 0.0.0-canary-9ea74e0 → 0.0.0-canary-41a2924

package/es/components/navigation/LegacyTabs/LegacyTabs.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
+ * @cube-dev/ui-kit v0.0.0-canary-41a2924
  * Released under the MIT license.
  */
 
@@ -11,47 +11,59 @@ import { Block } from '../../Block';
 import { Space } from '../../layout/Space';
 import { Flex } from '../../layout/Flex';
 import { Button } from '../../actions';
+import { tasty } from '../../../tasty';
+import styled from 'styled-components';
+import { Flow } from '../../layout/Flow';
 const LegacyTabsContext = createContext({
     addTab() { },
     removeTab() { },
     setTab() { },
     changeTab() { },
 });
-const TAB_STYLES = {
-    color: {
-        '': '#dark',
-        'selected, hovered': '#purple-text',
-        disabled: '#dark.50',
+const TabElement = tasty(Button, {
+    type: 'tab',
+    styles: {
+        color: {
+            '': '#dark',
+            'selected, hovered': '#purple-text',
+            disabled: '#dark.50',
+        },
+        fill: '#purple.0',
+        textAlign: 'center',
+        fontWeight: 600,
+        padding: '(1x - 1px) (1x - 1px)',
+        radius: '1r 1r 0 0',
+        border: 0,
     },
-    fill: '#purple.0',
-    textAlign: 'center',
-    fontWeight: 600,
-    padding: '(1x - 1px) (1x - 1px)',
-    radius: '1r 1r 0 0',
-    border: 0,
-};
-const TAB_CSS = `
-&::before {
-  --outline-size: 0px;
-  content: '';
-  display: block;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  box-shadow: inset 0 calc(-1 * var(--outline-size)) 0 var(--purple-color);
-  pointer-events: none;
-  transition: opacity linear .2s, box-shadow linear .2s;
-}
-&[data-is-selected]::before {
-  --outline-size: 2px;
-}
-&:not([data-is-selected]):not([disabled])[data-is-hovered]::before {
-  --outline-size: 1px;
-}
+});
+const StyledTabElement = styled(TabElement) `
+  &::before {
+    --outline-size: 0px;
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    box-shadow: inset 0 calc(-1 * var(--outline-size)) 0 var(--purple-color);
+    pointer-events: none;
+    transition: opacity linear 0.2s, box-shadow linear 0.2s;
+  }
+  &[data-is-selected]::before {
+    --outline-size: 2px;
+  }
+  &:not([data-is-selected]):not([disabled])[data-is-hovered]::before {
+    --outline-size: 1px;
+  }
 `;
-const TABS_PANEL_CSS = `
+const TabsPanelElement = tasty(Space, {
+    styles: {
+        gap: '1x',
+        flexShrink: 0,
+    },
+});
+const StyledTabsPanelElement = styled(TabsPanelElement) `
   position: relative;
   overflow: auto hidden;
   top: 1px;
@@ -76,7 +88,14 @@ const TABS_PANEL_CSS = `
     height: 3px;
   }
 `;
-const TABS_CONTAINER_CSS = `
+const TabsContainerElement = tasty(Flow, {
+    styles: {
+        flow: 'column',
+        height: 'max 100%',
+        width: 'max 100%',
+    },
+});
+const StyledTabsContainerElement = styled(TabsContainerElement) `
   position: relative;
 
   &::before {
@@ -89,7 +108,7 @@ const TABS_CONTAINER_CSS = `
     pointer-events: none;
     width: 32px;
     height: 37px;
-    transition: all .15s linear;
+    transition: all 0.15s linear;
     background-image: linear-gradient(
       to left,
       rgba(255, 255, 255, 0),
@@ -108,7 +127,7 @@ const TABS_CONTAINER_CSS = `
     width: 32px;
     height: 37px;
     pointer-events: none;
-    transition: all .15s linear;
+    transition: all 0.15s linear;
     background-image: linear-gradient(
       to right,
       rgba(255, 255, 255, 0),
@@ -117,12 +136,13 @@ const TABS_CONTAINER_CSS = `
     z-index: 10;
   }
 
-  &[data-is-left-fade]::before, &[data-is-right-fade]::after {
+  &[data-is-left-fade]::before,
+  &[data-is-right-fade]::after {
     opacity: 1;
   }
 `;
 const Tab = ({ isSelected, isHidden, onClose, ...props }) => {
-    return (_jsx(Button, { type: "tab", styles: TAB_STYLES, css: TAB_CSS, isSelected: isSelected, isHidden: isHidden, ...props }, void 0));
+    return (_jsx(StyledTabElement, { isSelected: isSelected, isHidden: isHidden, ...props }, void 0));
 };
 export function LegacyTabs({ defaultActiveKey, activeKey: activeKeyProp, onTabClick, onTabClose, paneStyles, extra, children, ...props }) {
     const tabsRef = useRef(null);
@@ -210,13 +230,13 @@ export function LegacyTabs({ defaultActiveKey, activeKey: activeKeyProp, onTabCl
         onTabClick && onTabClick(tab.id);
         setTab(tab.id);
     }
-    return (_jsx(Flex, { flow: "column", height: "max 100%", width: "max 100%", "data-is-left-fade": leftFade || null, "data-is-right-fade": rightFade || null, css: TABS_CONTAINER_CSS, ...props, children: _jsxs(LegacyTabsContext.Provider, { value: {
+    return (_jsx(StyledTabsContainerElement, { "data-is-left-fade": leftFade || null, "data-is-right-fade": rightFade || null, ...props, children: _jsxs(LegacyTabsContext.Provider, { value: {
                 addTab,
                 setTab,
                 removeTab,
                 changeTab,
                 currentTab: activeKey,
-            }, children: [_jsxs(Space, { gap: ".5x", placeContent: "center space-between", children: [_jsx(Space, { ref: tabsRef, gap: "1x", flexShrink: 0, css: TABS_PANEL_CSS, children: tabs.map((tab) => {
+            }, children: [_jsxs(Space, { gap: ".5x", placeContent: "center space-between", children: [_jsx(StyledTabsPanelElement, { ref: tabsRef, children: tabs.map((tab) => {
                                 return (_jsx(Tab, { "data-qa": tab.qa, onPress: () => onPress(tab), isSelected: tab.id === activeKey || false, isDisabled: tab.isDisabled, isHidden: tab.isHidden, children: tab.title }, tab.id));
                             }) }, void 0), extra] }, void 0), _jsx(Flex, { flexGrow: 1, border: "top rgb(227, 227, 233)", ...(paneStyles || {}), children: children }, void 0)] }, void 0) }, void 0));
 }

package/es/components/navigation/Link/Link.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
+ * @cube-dev/ui-kit v0.0.0-canary-41a2924
  * Released under the MIT license.
  */
 

package/es/components/organisms/FileTabs/FileTabs.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
+ * @cube-dev/ui-kit v0.0.0-canary-41a2924
  * Released under the MIT license.
  */
 
@@ -13,13 +13,21 @@ import { Action } from '../../actions/Action';
 import { Space } from '../../layout/Space';
 import { Flex } from '../../layout/Flex';
 import { tasty } from '../../../tasty';
+import styled from 'styled-components';
+import { Flow } from '../../layout/Flow';
 const FileTabsContext = createContext({
     addTab() { },
     removeTab() { },
     setTab() { },
     setDirtyTab() { },
 });
-const TABS_PANEL_CSS = `
+const TabsPanelElement = tasty(Space, {
+    styles: {
+        gap: '.5x',
+        flexShrink: 0,
+    },
+});
+const StyledTabsPanelElement = styled(TabsPanelElement) `
   position: relative;
   overflow: auto hidden;
   top: 1px;
@@ -44,7 +52,14 @@ const TABS_PANEL_CSS = `
     height: 3px;
   }
 `;
-const TABS_CONTAINER_CSS = `
+const TabsContainerElement = tasty(Flow, {
+    styles: {
+        flow: 'column',
+        height: 'max 100%',
+        width: 'max 100%',
+    },
+});
+const StyledTabsContainerElement = styled(TabsContainerElement) `
   position: relative;
 
   &::before {
@@ -57,7 +72,7 @@ const TABS_CONTAINER_CSS = `
     pointer-events: none;
     width: 32px;
     height: 37px;
-    transition: all .15s linear;
+    transition: all 0.15s linear;
     background-image: linear-gradient(
       to left,
       rgba(255, 255, 255, 0),
@@ -76,7 +91,7 @@ const TABS_CONTAINER_CSS = `
     width: 32px;
     height: 37px;
     pointer-events: none;
-    transition: all .15s linear;
+    transition: all 0.15s linear;
     background-image: linear-gradient(
       to right,
       rgba(255, 255, 255, 0),
@@ -85,7 +100,8 @@ const TABS_CONTAINER_CSS = `
     z-index: 10;
   }
 
-  &[data-is-left-fade]::before, &[data-is-right-fade]::after {
+  &[data-is-left-fade]::before,
+  &[data-is-right-fade]::after {
     opacity: 1;
   }
 `;
@@ -102,50 +118,40 @@ const DirtyBadge = tasty({
         radius: 'round',
     },
 });
-const TAB_STYLES = {
-    radius: '1r 1r 0 0',
-    padding: '1x 1.5x',
-    border: {
-        '': 'left top right #clear',
-        disabled: 'left top right rgb(227, 227, 233)',
-    },
-    fill: {
-        '': '#dark.04',
-        hovered: '#dark.08',
-        'disabled, disabled & hover': '#white',
-    },
-    color: {
-        '': '#dark.75',
-        'disabled, hovered, hovered & disabled': '#dark',
-    },
-    cursor: {
-        '': 'pointer',
-        disabled: 'default',
-    },
-    fontWeight: 500,
-    opacity: 1,
-    preset: 'default',
-    outline: {
-        '': 'inset #purple-03.0',
-        'focused & focus-visible': 'inset #purple-03',
-    },
-};
-const CLOSE_STYLES = {
-    color: {
-        '': '#dark.50',
-        hovered: '#dark',
-    },
-    padding: '0 .25x',
-    outline: {
-        '': '#purple-03.0',
-        'focused & focus-visible': '#purple-03',
+const TabElement = tasty(Action, {
+    styles: {
+        radius: '1r 1r 0 0',
+        padding: '1x 1.5x',
+        border: {
+            '': 'left top right #clear',
+            disabled: 'left top right rgb(227, 227, 233)',
+        },
+        fill: {
+            '': '#dark.04',
+            hovered: '#dark.08',
+            'disabled, disabled & hover': '#white',
+        },
+        color: {
+            '': '#dark.75',
+            'disabled, hovered, hovered & disabled': '#dark',
+        },
+        cursor: {
+            '': 'pointer',
+            disabled: 'default',
+        },
+        fontWeight: 500,
+        opacity: 1,
+        preset: 'default',
+        outline: {
+            '': 'inset #purple-03.0',
+            'focused & focus-visible': 'inset #purple-03',
+        },
     },
-    radius: '1r',
-};
-const TAB_CSS = `
+});
+const StyledTabElement = styled(TabElement) `
   margin-bottom: var(--border-width);
   transform: translate(0, 0);
-  transition: color .2s linear, background-color .2s linear;
+  transition: color 0.2s linear, background-color 0.2s linear;
 
   &[disabled] {
     transform: translate(0, var(--border-width));
@@ -174,8 +180,22 @@ const TAB_CSS = `
     }
   }
 `;
+const CloseButton = tasty({
+    styles: {
+        color: {
+            '': '#dark.50',
+            hovered: '#dark',
+        },
+        padding: '0 .25x',
+        outline: {
+            '': '#purple-03.0',
+            'focused & focus-visible': '#purple-03',
+        },
+        radius: '1r',
+    },
+});
 const Tab = ({ isDirty, isDisabled, children, isClosable, onClose, ...props }) => {
-    return (_jsx(Action, { className: isDirty ? 'file-tab--dirty' : '', css: TAB_CSS, styles: TAB_STYLES, isDisabled: isDisabled, ...props, children: _jsxs(Space, { gap: ".75x", children: [_jsx(Block, { children: children }, void 0), (isClosable || isDirty) && (_jsxs(Flex, { placeItems: "center", style: { position: 'relative' }, children: [isClosable ? (_jsx(Action, { onPress: onClose, className: "file-tab-close", styles: CLOSE_STYLES, children: _jsx(CloseOutlined, {}, void 0) }, void 0)) : (_jsx("div", {}, void 0)), isDirty ? _jsx(DirtyBadge, { className: "file-tab-dirty-badge" }, void 0) : null] }, void 0))] }, void 0) }, void 0));
+    return (_jsx(TabElement, { className: isDirty ? 'file-tab--dirty' : '', isDisabled: isDisabled, ...props, children: _jsxs(Space, { gap: ".75x", children: [_jsx(Block, { children: children }, void 0), (isClosable || isDirty) && (_jsxs(Flex, { placeItems: "center", style: { position: 'relative' }, children: [isClosable ? (_jsx(CloseButton, { onPress: onClose, className: "file-tab-close", children: _jsx(CloseOutlined, {}, void 0) }, void 0)) : (_jsx("div", {}, void 0)), isDirty ? _jsx(DirtyBadge, { className: "file-tab-dirty-badge" }, void 0) : null] }, void 0))] }, void 0) }, void 0));
 };
 export function FileTabs({ defaultActiveKey, activeKey: activeKeyProp, onTabClick, onTabClose, paneStyles, isClosable = true, children, ...props }) {
     const tabsRef = useRef(null);
@@ -269,13 +289,13 @@ export function FileTabs({ defaultActiveKey, activeKey: activeKeyProp, onTabClic
         setTab(tab.id);
         onTabClick && onTabClick(tab.id);
     }
-    return (_jsx(Flex, { flow: "column", height: "max 100%", width: "max 100%", "data-is-left-fade": leftFade || null, "data-is-right-fade": rightFade || null, css: TABS_CONTAINER_CSS, ...props, children: _jsxs(FileTabsContext.Provider, { value: {
+    return (_jsx(StyledTabsContainerElement, { "data-is-left-fade": leftFade || null, "data-is-right-fade": rightFade || null, ...props, children: _jsxs(FileTabsContext.Provider, { value: {
                 addTab,
                 setTab,
                 removeTab,
                 setDirtyTab,
                 currentTab: activeKey,
-            }, children: [_jsx(Space, { ref: tabsRef, gap: ".5x", flexShrink: 0, css: TABS_PANEL_CSS, children: tabs.map((tab) => {
+            }, children: [_jsx(StyledTabsPanelElement, { ref: tabsRef, children: tabs.map((tab) => {
                         return (_jsx(Tab, { onPress: () => onPress(tab), onClose: () => isClosable && handleClose(tab), isClosable: isClosable, isDisabled: tab.id === activeKey || false, isDirty: tab.isDirty, children: tab.title }, tab.id));
                     }) }, void 0), _jsx(Flex, { flexGrow: 1, border: "top rgb(227, 227, 233)", ...(paneStyles || {}), children: children }, void 0)] }, void 0) }, void 0));
 }

package/es/components/organisms/Modal/Modal.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
+ * @cube-dev/ui-kit v0.0.0-canary-41a2924
  * Released under the MIT license.
  */
 

package/es/components/organisms/StatsCard/StatsCard.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
+ * @cube-dev/ui-kit v0.0.0-canary-41a2924
  * Released under the MIT license.
  */
 

package/es/components/other/Base64Upload/Base64Upload.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
+ * @cube-dev/ui-kit v0.0.0-canary-41a2924
  * Released under the MIT license.
  */
 

package/es/components/other/CloudLogo/CloudLogo.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
+ * @cube-dev/ui-kit v0.0.0-canary-41a2924
  * Released under the MIT license.
  */
 

package/es/components/overlays/AlertDialog/AlertDialog.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
+ * @cube-dev/ui-kit v0.0.0-canary-41a2924
  * Released under the MIT license.
  */
 

package/es/components/overlays/AlertDialog/AlertDialogApiProvider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
+ * @cube-dev/ui-kit v0.0.0-canary-41a2924
  * Released under the MIT license.
  */
 

package/es/components/overlays/AlertDialog/AlertDialogZone.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
+ * @cube-dev/ui-kit v0.0.0-canary-41a2924
  * Released under the MIT license.
  */
 

package/es/components/overlays/AlertDialog/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
+ * @cube-dev/ui-kit v0.0.0-canary-41a2924
  * Released under the MIT license.
  */
 

package/es/components/overlays/AlertDialog/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
+ * @cube-dev/ui-kit v0.0.0-canary-41a2924
  * Released under the MIT license.
  */
 

package/es/components/overlays/Dialog/Dialog.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
+ * @cube-dev/ui-kit v0.0.0-canary-41a2924
  * Released under the MIT license.
  */
 

package/es/components/overlays/Dialog/DialogContainer.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
+ * @cube-dev/ui-kit v0.0.0-canary-41a2924
  * Released under the MIT license.
  */
 

package/es/components/overlays/Dialog/DialogForm.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
+ * @cube-dev/ui-kit v0.0.0-canary-41a2924
  * Released under the MIT license.
  */
 

package/es/components/overlays/Dialog/DialogTrigger.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
+ * @cube-dev/ui-kit v0.0.0-canary-41a2924
  * Released under the MIT license.
  */
 

package/es/components/overlays/Dialog/context.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
+ * @cube-dev/ui-kit v0.0.0-canary-41a2924
  * Released under the MIT license.
  */
 

package/es/components/overlays/Dialog/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
+ * @cube-dev/ui-kit v0.0.0-canary-41a2924
  * Released under the MIT license.
  */
 

package/es/components/overlays/Modal/Modal.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
+ * @cube-dev/ui-kit v0.0.0-canary-41a2924
  * Released under the MIT license.
  */
 

package/es/components/overlays/Modal/OpenTransition.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
+ * @cube-dev/ui-kit v0.0.0-canary-41a2924
  * Released under the MIT license.
  */
 

package/es/components/overlays/Modal/Overlay.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
+ * @cube-dev/ui-kit v0.0.0-canary-41a2924
  * Released under the MIT license.
  */
 

package/es/components/overlays/Modal/Popover.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
+ * @cube-dev/ui-kit v0.0.0-canary-41a2924
  * Released under the MIT license.
  */
 

package/es/components/overlays/Modal/Tray.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
+ * @cube-dev/ui-kit v0.0.0-canary-41a2924
  * Released under the MIT license.
  */
 

package/es/components/overlays/Modal/Underlay.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
+ * @cube-dev/ui-kit v0.0.0-canary-41a2924
  * Released under the MIT license.
  */
 

package/es/components/overlays/Modal/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
+ * @cube-dev/ui-kit v0.0.0-canary-41a2924
  * Released under the MIT license.
  */
 

package/es/components/overlays/Notification/Notification.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
+ * @cube-dev/ui-kit v0.0.0-canary-41a2924
  * Released under the MIT license.
  */
 

package/es/components/overlays/OverlayWrapper.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
+ * @cube-dev/ui-kit v0.0.0-canary-41a2924
  * Released under the MIT license.
  */
 

package/es/components/overlays/Tooltip/Tooltip.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
+ * @cube-dev/ui-kit v0.0.0-canary-41a2924
  * Released under the MIT license.
  */
 
@@ -13,6 +13,7 @@ import { TooltipContext } from './context';
 import { useTooltip } from '@react-aria/tooltip';
 import { CONTAINER_STYLES, extractStyles, tasty, } from '../../../tasty';
 import { getOverlayTransitionCSS } from '../../../utils/transitions';
+import styled from 'styled-components';
 const TooltipElement = tasty({
     styles: {
         display: 'block',
@@ -64,6 +65,15 @@ const TooltipTipElement = tasty({
         },
     },
 });
+const StyledTooltipElement = styled(TooltipElement) `
+  ${(props) => {
+    return getOverlayTransitionCSS({
+        placement: props === null || props === void 0 ? void 0 : props['data-position'],
+        minOffset: props === null || props === void 0 ? void 0 : props['data-min-offset'],
+        minScale: props === null || props === void 0 ? void 0 : props['data-min-scale'],
+    });
+}}
+`;
 function Tooltip(props, ref) {
     let { ref: overlayRef, arrowProps, state, overlayProps, minOffset, minScale, ...tooltipProviderProps } = useContext(TooltipContext);
     let defaultRef = useRef(null);
@@ -80,10 +90,10 @@ function Tooltip(props, ref) {
     if (typeof minScale === 'number') {
         minScale = String(minScale);
     }
-    return (_jsxs(TooltipElement, { ...tooltipProps, ...overlayProps, css: getOverlayTransitionCSS({ placement, minOffset, minScale }), styles: styles, mods: {
+    return (_jsxs(StyledTooltipElement, { ...tooltipProps, ...overlayProps, styles: styles, mods: {
             open: isOpen,
             material: isMaterial,
-        }, "data-placement": placement, ref: overlayRef, children: [props.children, _jsx(TooltipTipElement, { "data-placement": placement, styles: tipStyles, ...arrowProps }, void 0)] }, void 0));
+        }, "data-min-offset": minOffset, "data-min-slale": minScale, "data-placement": placement, ref: overlayRef, children: [props.children, _jsx(TooltipTipElement, { "data-placement": placement, styles: tipStyles, ...arrowProps }, void 0)] }, void 0));
 }
 /**
  * Display container for Tooltip content. Has a directional arrow dependent on its placement.