@cube-dev/ui-kit 0.98.9 → 0.99.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @cube-dev/ui-kit
 
+## 0.99.0
+
+### Minor Changes
+
+- [#891](https://github.com/cube-js/cube-ui-kit/pull/891) [`c12660be`](https://github.com/cube-js/cube-ui-kit/commit/c12660be28c78b80bc462fbee4847da229063e94) Thanks [@tenphi](https://github.com/tenphi)! - Add `svgFill` style to tasty for setting the native CSS `fill` property on SVG elements. Supports the same color token syntax as `fill` (e.g., `#purple.10`, `#danger`). The existing `fill` style continues to output `background-color` for HTML elements.
+
+- [#891](https://github.com/cube-js/cube-ui-kit/pull/891) [`c12660be`](https://github.com/cube-js/cube-ui-kit/commit/c12660be28c78b80bc462fbee4847da229063e94) Thanks [@tenphi](https://github.com/tenphi)! - Add advanced states support with `@` prefix in tasty styles. State keys starting with `@` compile into CSS at-rules and contextual conditions, enabling media queries (`@media`), container queries (`@(...)`), root states (`@root`), sub-element own states (`@own`), and entry animations (`@starting`). Advanced states can be combined with logical operators (`&`, `|`, `!`, `^`) and used anywhere regular state keys are supported, including sub-elements. Define reusable state aliases globally via `configure({ states })` or locally per component.
+
+- [#891](https://github.com/cube-js/cube-ui-kit/pull/891) [`c12660be`](https://github.com/cube-js/cube-ui-kit/commit/c12660be28c78b80bc462fbee4847da229063e94) Thanks [@tenphi](https://github.com/tenphi)! - Add tastyStatic for zero runtime integration as well as babel plugin for it.
+
+- [#891](https://github.com/cube-js/cube-ui-kit/pull/891) [`c12660be`](https://github.com/cube-js/cube-ui-kit/commit/c12660be28c78b80bc462fbee4847da229063e94) Thanks [@tenphi](https://github.com/tenphi)! - Remove `createGlobalStyle` and replace it with a hook `useRawCSS`.
+
+- [#891](https://github.com/cube-js/cube-ui-kit/pull/891) [`c12660be`](https://github.com/cube-js/cube-ui-kit/commit/c12660be28c78b80bc462fbee4847da229063e94) Thanks [@tenphi](https://github.com/tenphi)! - Add okhsl-plugin to tasty to support OKHSL color space in tasty styles.
+
+- [#891](https://github.com/cube-js/cube-ui-kit/pull/891) [`c12660be`](https://github.com/cube-js/cube-ui-kit/commit/c12660be28c78b80bc462fbee4847da229063e94) Thanks [@tenphi](https://github.com/tenphi)! - Add `@keyframes` support in tasty styles. Define CSS animations directly within component styles using the `@keyframes` property, or configure global keyframes via `configure({ keyframes })`. Only animations referenced in styles are injected, with automatic deduplication and cleanup. Local keyframes override global ones with the same name.
+
+- [#891](https://github.com/cube-js/cube-ui-kit/pull/891) [`c12660be`](https://github.com/cube-js/cube-ui-kit/commit/c12660be28c78b80bc462fbee4847da229063e94) Thanks [@tenphi](https://github.com/tenphi)! - Implement style chunking optimization for improved CSS reuse and performance. Styles are now split into logical chunks (appearance, font, dimension, container, scrollbar, position, misc, and subcomponents), each with its own cache key and CSS class. This enables better CSS reuse across components and reduces CSS output size, especially for components with many variants like Button and Item. The optimization is fully backward compatible - elements still receive className(s) as before, but now with improved caching granularity.
+
+  **New exports:**
+
+  - `useStyles` hook - Generate CSS classes for element-scoped styles with chunking support
+  - `useGlobalStyles` hook - Inject global styles for a given selector
+  - Chunk utilities: `CHUNK_NAMES`, `STYLE_TO_CHUNK`, `categorizeStyleKeys` (for advanced use cases)
+
+- [#891](https://github.com/cube-js/cube-ui-kit/pull/891) [`c12660be`](https://github.com/cube-js/cube-ui-kit/commit/c12660be28c78b80bc462fbee4847da229063e94) Thanks [@tenphi](https://github.com/tenphi)! - Add `elements` to `tasty()` element definitions to declare compound sub-elements (e.g. `Component.Icon`) with `data-element` binding. Sub-elements support `qa`/`qaVal`, `mods`, `isDisabled`/`isHidden`/`isChecked`, and `tokens`.
+
+- [#891](https://github.com/cube-js/cube-ui-kit/pull/891) [`c12660be`](https://github.com/cube-js/cube-ui-kit/commit/c12660be28c78b80bc462fbee4847da229063e94) Thanks [@tenphi](https://github.com/tenphi)! - Remove tastyGlobal syntax. Add `useStyles` and `useGlobalStyles` hooks for handy style generation.
+
+### Patch Changes
+
+- [#891](https://github.com/cube-js/cube-ui-kit/pull/891) [`c12660be`](https://github.com/cube-js/cube-ui-kit/commit/c12660be28c78b80bc462fbee4847da229063e94) Thanks [@tenphi](https://github.com/tenphi)! - Add HSL to RGB conversion support for color token declarations. HSL color tokens (e.g., `'#primary': 'hsl(200 40% 50%)'`) now generate RGB triplets for `--name-color-rgb` variables, enabling opacity syntax support: `#name.3` → `rgb(var(--name-color-rgb) / .3)`.
+
+- [#891](https://github.com/cube-js/cube-ui-kit/pull/891) [`c12660be`](https://github.com/cube-js/cube-ui-kit/commit/c12660be28c78b80bc462fbee4847da229063e94) Thanks [@tenphi](https://github.com/tenphi)! - Optimize padding and margin style functions to return a single CSS property with optimized values (1, 2, or 4 values) instead of four separate properties, reducing CSS output size.
+
+- [#891](https://github.com/cube-js/cube-ui-kit/pull/891) [`c12660be`](https://github.com/cube-js/cube-ui-kit/commit/c12660be28c78b80bc462fbee4847da229063e94) Thanks [@tenphi](https://github.com/tenphi)! - Improve types of the tasty helper.
+
 ## 0.98.9
 
 ### Patch Changes

package/es/_internal/hooks/index.js

@@ -1,18 +1,18 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
-export * from './use-deprecation-warning';
-export * from './use-event';
-export * from './use-sync-ref';
-export * from './use-chained-callback';
-export * from './use-timer';
-export * from './use-effect-once';
-export * from './use-warn';
-export * from './use-is-first-render';
-export * from './use-debounced-value';
+export * from './use-deprecation-warning.js';
+export * from './use-event.js';
+export * from './use-sync-ref.js';
+export * from './use-chained-callback.js';
+export * from './use-timer/index.js';
+export * from './use-effect-once.js';
+export * from './use-warn.js';
+export * from './use-is-first-render.js';
+export * from './use-debounced-value.js';
 
         

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

@@ -1,11 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
-import { useEvent } from './use-event';
+import { useEvent } from './use-event.js';
 export function useChainedCallback(...callbacks) {
     return useEvent((...args) => {
         callbacks.forEach((callback) => {

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 

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

@@ -1,12 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
 import React, { useEffect } from 'react';
-import { deprecationWarning } from '../../utils/warnings';
+import { deprecationWarning } from '../../utils/warnings.js';
 export function useDeprecationWarning(...args) {
     const didWarn = React.useRef(false);
     useEffect(() => {

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 

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

@@ -1,12 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
 import { useCallback } from 'react';
-import { useSyncRef } from './use-sync-ref';
+import { useSyncRef } from './use-sync-ref.js';
 /**
  * useEvent shim from the latest React RFC.
  *

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 

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

@@ -1,12 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
 import { useRef } from 'react';
-import { useLayoutEffect } from '../../utils/react';
+import { useLayoutEffect } from '../../utils/react/index.js';
 export function useSyncRef(value) {
     const ref = useRef(value);
     useLayoutEffect(() => {

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

@@ -1,11 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
-export * from './timer';
-export * from './use-timer';
+export * from './timer.js';
+export * from './use-timer.js';
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 

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

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
 import { useEffect, useState } from 'react';
-import { useEvent } from '../use-event';
-import { Timer } from './timer';
+import { useEvent } from '../use-event.js';
+import { Timer } from './timer.js';
 export function useTimer(props = {}) {
     const { callback, delay, isDisabled, timer: propsTimer = null } = props;
     const callbackEvent = useEvent(() => callback?.());

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

@@ -1,12 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
 import { useEffect } from 'react';
-import { useIsFirstRender } from './use-is-first-render';
+import { useIsFirstRender } from './use-is-first-render.js';
 export function useUpdateEffect(effect, deps) {
     const isFirst = useIsFirstRender();
     useEffect(() => {

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

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
 import { useRef } from 'react';
-import { warn } from '../../utils/warnings';
-import { useEvent } from './use-event';
+import { warn } from '../../utils/warnings.js';
+import { useEvent } from './use-event.js';
 const GLOBAL_WARNED = new Set();
 export function useWarn(condition, params) {
     const { once = true, key, args } = params;

package/es/_internal/index.js

@@ -1,10 +1,10 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
-export * from './hooks';
+export * from './hooks/index.js';
 
         

package/es/components/Block.js

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../tasty';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../tasty/index.js';
 const BlockElement = tasty({
     styles: {
         display: 'block',

package/es/components/CollectionItem.js

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
 import { Item } from 'react-stately';
-import { ItemAction } from './actions/ItemAction';
-import { ItemBadge } from './content/ItemBadge';
+import { ItemAction } from './actions/ItemAction/index.js';
+import { ItemBadge } from './content/ItemBadge/index.js';
 /**
  * Service props that are used by react-stately or parent components
  * and should not be passed to the Item component.

package/es/components/GlobalStyles.js

@@ -1,65 +1,36 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createGlobalStyle } from '../tasty';
-import { TOKENS } from '../tokens';
+import { useMemo } from 'react';
+import { useGlobalStyles, useRawCSS } from '../tasty/index.js';
+import { TOKENS } from '../tokens/index.js';
+/**
+ * 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)',
+    overscrollBehaviorY: 'none',
+    fill: '#white',
+    fontFamily: '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',
+    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;`}
-  }
-
   kbd {
     font-family: var(--c2-font-family);
     font-weight: var(--c2-font-weight);
@@ -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,36 @@ 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
+        // Keys are passed through as-is (tasty handles both camelCase and kebab-case)
+        if (bodyStyles) {
+            Object.assign(styles, bodyStyles);
         }
-    });
-    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,14 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useState } from 'react';
-import { filterBaseProps, tasty } from '../tasty';
-import { useCombinedRefs } from '../utils/react';
+import { filterBaseProps, tasty } from '../tasty/index.js';
+import { useCombinedRefs } from '../utils/react/index.js';
 const GridElement = tasty({
     styles: {
         display: 'contents',
@@ -36,7 +36,7 @@ export const GridProvider = forwardRef(function GridProvider(props, outerRef) {
         if (!el)
             return;
         let sensor;
-        import('../utils/ResizeSensor')
+        import('../utils/ResizeSensor.js')
             .then((module) => module.ResizeSensor)
             .then((ResizeSensor) => {
             sensor = new ResizeSensor(el, resizeCallback);

package/es/components/HiddenInput.js

@@ -1,11 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
-import { tasty } from '../tasty';
+import { tasty } from '../tasty/index.js';
 export const HiddenInput = tasty({
     as: 'input',
     styles: {

package/es/components/OpenTrasition.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 

package/es/components/Root.js

@@ -1,91 +1,49 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { ModalProvider } from 'react-aria';
-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';
-import { AlertDialogApiProvider } from './overlays/AlertDialog';
-import { NotificationsProvider } from './overlays/NewNotifications/NotificationsContext/NotificationsProvider';
-import { PortalProvider } from './portal';
+import { Provider } from '../provider.js';
+import { TrackingProvider } from '../providers/TrackingProvider.js';
+import { BASE_STYLES, BLOCK_STYLES, extractStyles, filterBaseProps, tasty, } from '../tasty/index.js';
+import { EventBusProvider } from '../utils/react/useEventBus.js';
+import { VERSION } from '../version.js';
+import { GlobalStyles } from './GlobalStyles.js';
+import { AlertDialogApiProvider } from './overlays/AlertDialog/index.js';
+import { NotificationsProvider } from './overlays/NewNotifications/NotificationsContext/NotificationsProvider.js';
+import { PortalProvider } from './portal/index.js';
 const RootElement = tasty({
     id: 'cube-ui-kit-root',
+    styles: {
+        display: 'contents',
+        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',
-                        '--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 }) }) }) }) })] }) }) }) }));
+    const styles = extractStyles(props, STYLES);
+    return (_jsx(Provider, { navigation: navigation, root: rootRef, children: _jsx(TrackingProvider, { event: tracking?.event, 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,
+                }, 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 }) }) }) }) })] }) }) }));
 }