@cube-dev/ui-kit 0.0.0-canary-e9dc427 → 0.0.0-canary-5eba492

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @cube-dev/ui-kit
 
+## 0.98.5
+
+### Patch Changes
+
+- [#936](https://github.com/cube-js/cube-ui-kit/pull/936) [`6c6f0a42`](https://github.com/cube-js/cube-ui-kit/commit/6c6f0a422e48d1068930f2e7e436b79cd66268e5) Thanks [@tenphi](https://github.com/tenphi)! - Fix sub-element definition in Result component.
+
 ## 0.98.4
 
 ### Patch Changes

package/es/_internal/hooks/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-chained-callback.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-debounced-value.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-deprecation-warning.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-effect-once.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-event.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-is-first-render.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-sync-ref.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-timer/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-timer/timer.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-timer/use-timer.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-update-effect.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-warn.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/_internal/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/components/Block.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/components/CollectionItem.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/components/GlobalStyles.js

@@ -1,63 +1,34 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createGlobalStyle } from '../tasty';
+import { useMemo } from 'react';
+import { useGlobalStyles, useRawCSS } from '../tasty';
 import { TOKENS } from '../tokens';
+/**
+ * Body styles applied via useGlobalStyles.
+ * These use tasty syntax and get processed correctly.
+ */
 const BODY_STYLES = {
-    'overscroll-behavior-y': 'none',
-    'background-color': 'white !important',
-    'font-family': 'var(--font)',
-    '-webkit-font-smoothing': 'antialiased',
-    '-moz-osx-font-smoothing': 'grayscale',
-    margin: '0',
-    padding: '0',
-    color: 'var(--dark-02-color)',
-    'font-size': '14px',
-    'line-height': '20px',
-    'letter-spacing': '0.02em',
-    'font-weight': '400',
+    overscrollBehaviorY: 'none',
+    fill: '#white !important',
+    fontFamily: 'var(--font)',
+    WebkitFontSmoothing: 'antialiased',
+    MozOsxFontSmoothing: 'grayscale',
+    margin: 0,
+    padding: 0,
+    color: '#dark-02',
+    preset: 't3',
+    letterSpacing: '0.02em',
 };
-const GlobalStylesElement = createGlobalStyle `
-  body {
-    ${({ $applyLegacyTokens }) => {
-    return $applyLegacyTokens
-        ? Object.entries(TOKENS)
-            .map(([key, value]) => {
-            // `inherit` value in custom property is reserved for inheritance behavior
-            if (value === 'inherit') {
-                // so we should rewrite it to contain the actual `inherit` value.
-                value = `var(--non-existent-${key}, inherit)`;
-            }
-            return `--${key}: ${value};`;
-        })
-            .join('\n    ')
-        : '';
-}}
-    ${({ $bodyStyles }) => {
-    return Object.entries({ ...BODY_STYLES, ...$bodyStyles })
-        .map(([key, value]) => {
-        return `${key}: ${value};`;
-    })
-        .join('\n    ');
-}}
-  }
-
+// Static CSS that doesn't depend on props
+const STATIC_CSS = `
   @font-face {
     font-family: text-security-disc;
-    src: url(data:font/woff2;base64,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) format('woff2');
-  }
-
-  html {
-    overscroll-behavior-y: none;
-    --font: ${({ $font }) => $font
-    ? `${$font}, `
-    : ''}-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-    --monospace-font: ${({ $monospaceFont }) => `${$monospaceFont ? `${$monospaceFont}, ` : ''}Menlo, Monaco, Consolas, 'Courier New', monospace;`}
+    src: url(data:font/woff2;base64,d09GMgABAAAAAAjoAAsAAAAAMGgAAAidAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGVgDWYgpQdQE2AiQDCAsGAAQgBYUOBy4bvi8lYxtWw7BxAPB87x5FmeAMlf3/96RzDN74RcXUcjTKmrJ3T2VDSShiPhfiIJxxS7DiLkHFfQV33CM4427mAbed74pWur/J3dyVsKy7coREA8fzvPvpfUk+tB3R8YTCzE0SCLepejmJ2u1yqp+kC7W4Rc/tDTs3GpNJ8ttRPOSTPhsXlwbi4kVYWQmAcXmlrqYHMMsBwP/zHMz7fkF1gijOKuFQIxjwlGa2lkARhYaBxFHT54IOgBMQADi3LipIMAA3geO41EUkBTCO2gkxnOwnKYBx1E6p5WS+QUCMq50rNch6MwUCAAiAcdgttYVSIfPJ5kn6ApRFQ6I88BxLvvIC/maHUHS3TIoKiwLbbM8nEFWgE1oDz3woSxpagWbBXcQWhKtPeIlg6tK+7vX57QOszwU3sGUJrA7h2Mx1IWCNr9BKxsYo+pzS/OCO0OG9mwBkx337+lcuSxRdBcc+fJxlcAjK/zCfdgtBzuxQcTqfY4Yn6EB/Az3JS/RMu5f6B8wrn55S0IxdlLn+4Yb/ctIT+ocWYPcGAOvxSjEjpSiVMqSgFWVjzpCCXjAIRirTABpEQ2gYjaBRNIbG0QSaRFNoGs2gWTSH5tECWkRLaBmtoFW0htbRBtpEW2gb7aBdtIf20QE6REdFDlkZEh2jE3SKztA5ukCX6Apdoxt0i+7QPXpAj+gJPaMX9Ire0Dv6QJ/oC/qKvqHv6Af6iX6h3+gP+ov+of+I+ECMxETMiDmxIJbEilgTG2JL7Ig9cSCOxIk4ExfiStyIO/EgnsSLeBMf4kv8iD/taQANoiE0jEbQKBpD42gCTaIpNI1m0CyaQ/NoAS2iJbSMVtAqWkPraANtoi20jXbQLtpD++gAHaIjdIxO0Ck6Q+foAl2iK3SNbtAtukP36AE9oif0jF7QK3pD79B79AF9RJ/QZ/QFfUXf0Hf0A/1Ev9Bv9Af9Rf/Qf9DQABpEQ2gYjaBRNIbG0QSaRFNoGs2gWTSH5tECWkRLaBmtoFW0htbRBtpEW2gb7aBdtIf20QE6REfoGJ2gU3SGztEFukRX6BrdoFt0h+7RA3pET+gZvaBX9Aa9Re/Qe/QBfUSf0Gf0BX1F39B39AP9RL/Qb/QH/UX/0P8l9vq9gXwDIUCliyAhRAgTIoQoIUaIExKEJCFFSBMyhCwhR8gTCoQioUQoEyqEKqFGqBMahCahRWgTOoQuoUfoEwaEIWFEGBMmhClhRpgTFoQlYUVYEzaELWFH2BMOhGPCCeGUcEY4J1wQLglXhGvCDeGWcEe4JzwQHglPhGfCC+GV8EZ4J3wQPglfhG/CD+GX8Ef4p9sdgoQQIUyIEKKEGCFOSBCShBQhTcgQsoQcIU8oEIqEEqFMqBCqhBqhTmgkNBGaCS2EVkIboZ3QQegkdBG6CT2EXkIfoZ8wQBgkDBGGCSOEUcIYYZwwQZgkTBGmCTOEWcIcYZ6wQFgkLBGWCSuEVcIaYZ2wQdgkbBG2CTuEXcIeYZ9wQDgkHBGOCSeEU8IZ4ZxwQbgkXBGuCTeEW8Id4Z7wQHgkPBGeCS+EV8Ib4Z3wQfgkfBG+CT+EX8If4Z8AZpAQIoQJEUKUECPECQlCkpAipAkZQpaQI+QJBUKRUCKUCRVClVAj1AkNQpPQIrQJHUKX0CP0CQPCkDAijAkTwpQwI8wJC8KSsCKsCRvClrAj7AkHwpFwIpwJF8IV4ZpwQ7gl3BHuCQ+ER8IT4ZnwQnglvBHeCR+ET8IX4ZvwQ/gl/BH+lzv+AmMkTYAmSBOiCdNEaKI0MZo4TYImSZOiSdNkaLI0OZo8TYGmSFOiKdNUaKo0NZo6TYOmSdOiadN0aLo0PZo+zYBmSDOiGdNMaKY0M5o5zYJmSbOiWdNsaLY0O5o9zYHmmOaE5pTmjOac5oLmkuaK5prmhuaW5o7mnuaB5pHmieaZ5oXmleaN5p3mg+aT5ovmm+aH5pfmj2ZRAqCCoEKgwqAioKKgYqDioBKgkqBSoNKgMqCyoHKg8qAKoIqgSqDKoCqgqqBqoOqgGkE1gWoG1QKqFVQbqHZQHaA6QXWB6gbVA6oXVB+oflADoAZBDYH+uxaEWDBiIYiFIhaGWDhiEYhFIhaFWDRiMYjFIhaHWDxiCYglIpaEWDJiKYilIpaGWDpiGYhlIpaFWDZiOYjlIpaHWD5iBYgVIlaEWDFiJYiVIlaGWDliFYhVIlaFWDViNYjVIlaHWD1iDYg1ItaEWDNiLYi1ItaGWDtiHYh1ItaFWDdiPYj1ItaHWD9iA4gNIjaE2DBiI4iNIjaG2DhiE4hNIjaF2DRiM4jNIjaH2DxiC4gtIraE2DJiK4itIraG2DpiG4htIraF2DZiO4jtIraH2D5iB4gdInaE2DFiJ4idInaG2DliF4hdInaF2DViN4jdInaH2D1iD4g9IvaE2DNiL4i9IvaG2DvE3iP2AbGPiH1C7DNiXxD7itg3xL4j9gOxn4j9Quw3Yn8Q+4vYP8T+M6cIDBz9EXfeUHR1JyygPL/++I3R1cRvdDr+E12Jfh3Q0EN/fHn2mXptpJxUkIqu/Cs2egM33OjSLcT33I82+B9nP37X/c0W52623s45CYCo03QIBCVrAFAycnSYSqvO4YJt/NP73YqA/giNZhJ6sBbmql+0SQZaxNOZudJbc2nqxNvpM+veq7Sz2LUgFEu+VLs+Ay3yp7MVertp6i23v2Rmv5gmHDhSQ6t5GmTaqTsqhpWwmbOk3uKJrNOmwSSMC17jghqygilDOUU3KlLmHHNrajw3DVNVGWytGZDisM/cbkdRnvfIUJkaGJlgAYcoQ5bGptTmGc1R7pBC3XhFsLXnXR54qrMc+dGNBkqE4laBi4KmZYGom8vIy0lTyBkppBjLoTndMmrofIRORirsNlCbXzCgulmo36KztS2iV8rrNoRUL5VdkMSGoSXroC1KOQAA) format('woff2');
   }
 
   kbd {
@@ -123,10 +94,10 @@ const GlobalStylesElement = createGlobalStyle `
     margin-bottom: 8px;
     transform: translate(0, 0);
     transition: all 300ms ease-in;
+  }
 
-    & > * {
-      margin-bottom: 0px;
-    }
+  .cube-notification-enter-active > * {
+    margin-bottom: 0px;
   }
 
   .cube-notification-exit {
@@ -142,10 +113,10 @@ const GlobalStylesElement = createGlobalStyle `
     margin-bottom: 0px;
     transform: translate(100%, 0);
     transition: all 300ms ease-in;
+  }
 
-    & > * {
-      margin-bottom: 0px;
-    }
+  .cube-notification-exit-active > * {
+    margin-bottom: 0px;
   }
 
   b, strong {
@@ -160,9 +131,7 @@ const GlobalStylesElement = createGlobalStyle `
     font-family: var(--monospace-font);
   }
 
-  
-
-  // Prism Code
+  /* Prism Code */
   code[class*="language-"],
   pre[class*="language-"] {
     color: var(--dark-color);
@@ -235,7 +204,7 @@ const GlobalStylesElement = createGlobalStyle `
 
   .token.deleted-sign {
     background-color: #ffeef0;
-    color: (--danger-color);
+    color: var(--danger-color);
   }
 
   .token.deleted {
@@ -320,14 +289,39 @@ const GlobalStylesElement = createGlobalStyle `
     cursor: help;
   }
 `;
-export const GlobalStyles = (props) => {
-    const newProps = {};
-    Object.entries(props).forEach(([key, value]) => {
-        if (value !== undefined) {
-            newProps[`$${key}`] = value;
+export function GlobalStyles(props) {
+    const { bodyStyles, font, monospaceFont } = props;
+    // Merge token styles with body styles
+    const bodyTokenStyles = useMemo(() => {
+        // Start with design tokens
+        const styles = { ...TOKENS };
+        // Add base body styles
+        Object.assign(styles, BODY_STYLES);
+        // Override with custom body styles if provided
+        if (bodyStyles) {
+            for (const [key, value] of Object.entries(bodyStyles)) {
+                // Convert kebab-case to camelCase for tasty
+                const camelKey = key.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+                styles[camelKey] = value;
+            }
         }
-    });
-    return _jsx(GlobalStylesElement, { ...newProps });
-};
+        return styles;
+    }, [bodyStyles]);
+    // Apply tokens and body styles via useGlobalStyles
+    useGlobalStyles('body', bodyTokenStyles);
+    // Apply static CSS and font definitions via useRawCSS
+    useRawCSS(() => {
+        const fontValue = font ? `${font}, ` : '';
+        const monospaceFontValue = monospaceFont ? `${monospaceFont}, ` : '';
+        return `
+  html {
+    overscroll-behavior-y: none;
+    --font: ${fontValue}-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+    --monospace-font: ${monospaceFontValue}Menlo, Monaco, Consolas, 'Courier New', monospace;
+  }
+${STATIC_CSS}`;
+    }, [font, monospaceFont]);
+    return null;
+}
 
         

package/es/components/GridProvider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/components/HiddenInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/components/OpenTrasition.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/components/Root.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 
@@ -12,8 +12,6 @@ import { StyleSheetManager } from 'styled-components';
 import { Provider } from '../provider';
 import { TrackingProvider } from '../providers/TrackingProvider';
 import { BASE_STYLES, BLOCK_STYLES, extractStyles, filterBaseProps, tasty, } from '../tasty';
-import { TOKENS } from '../tokens';
-import { useViewportSize } from '../utils/react';
 import { EventBusProvider } from '../utils/react/useEventBus';
 import { VERSION } from '../version';
 import { GlobalStyles } from './GlobalStyles';
@@ -22,70 +20,32 @@ import { NotificationsProvider } from './overlays/NewNotifications/Notifications
 import { PortalProvider } from './portal';
 const RootElement = tasty({
     id: 'cube-ui-kit-root',
+    styles: {
+        container: 'root / inline-size',
+        display: 'block',
+        color: '#dark-02',
+        preset: 't3',
+    },
 });
-const DEFAULT_STYLES = {
-    display: 'block',
-    preset: 't3',
-    ...Object.keys(TOKENS).reduce((map, key) => {
-        map[`$${key}`] = TOKENS[key];
-        return map;
-    }, {}),
-};
 const STYLES = [...BASE_STYLES, ...BLOCK_STYLES];
-const IS_DVH_SUPPORTED = typeof CSS !== 'undefined' && typeof CSS?.supports === 'function'
-    ? CSS.supports('height: 100dvh')
-    : false;
 export function Root(allProps) {
     let { children, 
     /** Raw css styles for body element */
-    bodyStyles, breakpoints = [980], fontDisplay = 'swap', fonts, publicUrl, navigation, font, monospaceFont, applyLegacyTokens, tracking, cursorStrategy = 'web', style, ...props } = allProps;
+    bodyStyles, fontDisplay = 'swap', fonts, publicUrl, navigation, font, monospaceFont, applyLegacyTokens: _applyLegacyTokens, // deprecated, ignored
+    tracking, cursorStrategy = 'web', style, tokens, ...props } = allProps;
     const ref = useRef(null);
     const [rootRef, setRootRef] = useState();
-    // We need to measure the window's height in JS rather than using percentages in CSS
-    // so that contents (e.g. menu) can inherit the max-height properly. Using percentages
-    // does not work properly because there is nothing to base the percentage on.
-    // We cannot use vh units because mobile browsers adjust the window height dynamically
-    // when the address bar/bottom toolbars show and hide on scroll and vh units are fixed.
-    // Also, the visual viewport is smaller than the layout viewport when the virtual keyboard
-    // is up, so use the VisualViewport API to ensure the tray is displayed above the keyboard.
-    let viewport = useViewportSize({ isDisabled: IS_DVH_SUPPORTED });
-    let [height, setHeight] = useState(IS_DVH_SUPPORTED ? undefined : viewport.height);
-    let timeoutRef = useRef(null);
-    useEffect(() => {
-        if (IS_DVH_SUPPORTED && typeof window !== 'undefined') {
-            return;
-        }
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-        }
-        // When the height is decreasing, and the keyboard is visible
-        // (visual viewport smaller than layout viewport), delay setting
-        // the new max height until after the animation is complete
-        // so that there isn't an empty space under the tray briefly.
-        if (viewport.height < (height || 0) &&
-            viewport.height < window.innerHeight) {
-            timeoutRef.current = setTimeout(() => {
-                setHeight(viewport.height);
-            }, 500);
-        }
-        else {
-            setHeight(viewport.height);
-        }
-    }, [height, viewport.height]);
     useEffect(() => {
         if (!rootRef) {
             // @ts-ignore
             setRootRef(ref?.current);
         }
     }, []);
-    const styles = extractStyles(props, STYLES, DEFAULT_STYLES);
-    return (_jsx(Provider, { navigation: navigation, root: rootRef, breakpoints: breakpoints, children: _jsx(TrackingProvider, { event: tracking?.event, children: _jsx(StyleSheetManager, { children: _jsxs(RootElement, { ref: ref, "data-tasty": VERSION, "data-font-display": fontDisplay, ...filterBaseProps(props, { eventProps: true }), styles: styles, style: {
-                        '--cube-dynamic-viewport-height': height
-                            ? height + 'px'
-                            : '100dvh',
+    const styles = extractStyles(props, STYLES);
+    return (_jsx(Provider, { navigation: navigation, root: rootRef, children: _jsx(TrackingProvider, { event: tracking?.event, children: _jsx(StyleSheetManager, { children: _jsxs(RootElement, { ref: ref, "data-tasty": VERSION, "data-font-display": fontDisplay, ...filterBaseProps(props, { eventProps: true }), styles: styles, style: {
                         '--pointer': cursorStrategy === 'web' ? 'pointer' : 'default',
                         ...style,
-                    }, children: [_jsx(GlobalStyles, { bodyStyles: bodyStyles, applyLegacyTokens: applyLegacyTokens, publicUrl: publicUrl, fonts: fonts, font: font, monospaceFont: monospaceFont, fontDisplay: fontDisplay }), _jsx(ModalProvider, { children: _jsx(PortalProvider, { value: ref, children: _jsx(EventBusProvider, { children: _jsx(NotificationsProvider, { rootRef: ref, children: _jsx(AlertDialogApiProvider, { children: children }) }) }) }) })] }) }) }) }));
+                    }, tokens: tokens, children: [_jsx(GlobalStyles, { bodyStyles: bodyStyles, publicUrl: publicUrl, fonts: fonts, font: font, monospaceFont: monospaceFont, fontDisplay: fontDisplay }), _jsx(ModalProvider, { children: _jsx(PortalProvider, { value: ref, children: _jsx(EventBusProvider, { children: _jsx(NotificationsProvider, { rootRef: ref, children: _jsx(AlertDialogApiProvider, { children: children }) }) }) }) })] }) }) }) }));
 }
 
         

package/es/components/actions/Action/Action.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/components/actions/Button/Button.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 
@@ -155,7 +155,7 @@ export const DEFAULT_BUTTON_STYLES = {
         whiteSpace: 'nowrap',
         overflow: 'hidden',
         textOverflow: 'ellipsis',
-        maxWidth: '100%',
+        width: '0 100%',
         textAlign: 'center',
         transition: 'theme, padding',
         padding: {

package/es/components/actions/Button/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/components/actions/ButtonGroup/ButtonGroup.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/components/actions/CommandMenu/CommandMenu.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/components/actions/CommandMenu/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/components/actions/CommandMenu/styled.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/components/actions/ItemAction/ItemAction.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/components/actions/ItemAction/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/components/actions/ItemActionContext.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/components/actions/ItemButton/ItemButton.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/components/actions/ItemButton/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/components/actions/Link/Link.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/components/actions/Menu/Menu.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */
 

package/es/components/actions/Menu/MenuItem.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9dc427
+ * @cube-dev/ui-kit v0.0.0-canary-5eba492
  * Released under the MIT license.
  */