@cube-dev/ui-kit 0.95.0 → 0.97.0

package/es/components/actions/use-anchored-menu.js

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

package/es/components/actions/use-context-menu.js

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

package/es/components/content/ActiveZone/ActiveZone.js

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

package/es/components/content/Alert/Alert.js

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

package/es/components/content/Alert/index.js

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

package/es/components/content/Alert/types.js

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

package/es/components/content/Alert/use-alert.js

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

package/es/components/content/Avatar/Avatar.js

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

package/es/components/content/Badge/Badge.js

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

package/es/components/content/Card/Card.js

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

package/es/components/content/Content.js

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

package/es/components/content/CopyPasteBlock/CopyPasteBlock.js

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

package/es/components/content/CopyPasteBlock/index.js

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

package/es/components/content/CopySnippet/CopySnippet.js

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

package/es/components/content/CopySnippet/index.js

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

package/es/components/content/Disclosure/Disclosure.js

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

package/es/components/content/Disclosure/index.js

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

package/es/components/content/Divider.js

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

package/es/components/content/Footer.js

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

package/es/components/content/Header.js

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

package/es/components/content/HotKeys/HotKeys.js

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

package/es/components/content/HotKeys/index.js

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

package/es/components/content/Item/Item.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.95.0
+ * @cube-dev/ui-kit v0.97.0
  * Released under the MIT license.
  */
 
@@ -15,6 +15,7 @@ import { CONTAINER_STYLES, tasty, } from '../../../tasty';
 import { mergeProps } from '../../../utils/react';
 import { ItemAction } from '../../actions/ItemAction';
 import { ItemActionProvider } from '../../actions/ItemActionContext';
+import { highlightText } from '../highlightText';
 import { HotKeys } from '../HotKeys';
 import { ItemBadge } from '../ItemBadge';
 import { useAutoTooltip } from '../use-auto-tooltip';
@@ -85,6 +86,7 @@ const ItemElement = tasty({
         },
         width: {
             '': 'min $size',
+            'has-icon & has-right-icon': 'min ($size * 2)',
             'size=inline': 'min (1lh + 2bw)',
         },
         border: '#clear',
@@ -279,7 +281,7 @@ const ItemElement = tasty({
     styleProps: CONTAINER_STYLES,
 });
 const Item = (props, ref) => {
-    let { children, size = 'medium', type = 'item', theme = 'default', mods, icon, rightIcon, prefix, suffix, description, descriptionPlacement = 'inline', labelProps, descriptionProps, keyboardShortcutProps, styles, htmlType, isSelected, hotkeys, tooltip = true, isDisabled, style, loadingSlot = 'auto', isLoading = false, isCard = false, actions, showActionsOnHover = false, disableActionsFocus = false, isButton = false, shape = 'button', defaultTooltipPlacement = 'top', ...rest } = props;
+    let { children, size = 'medium', type = 'item', theme = 'default', mods, icon, rightIcon, prefix, suffix, description, descriptionPlacement = 'inline', labelProps, descriptionProps, keyboardShortcutProps, styles, htmlType, isSelected, hotkeys, tooltip = true, isDisabled, style, loadingSlot = 'auto', isLoading = false, isCard = false, actions, showActionsOnHover = false, disableActionsFocus = false, isButton = false, shape = 'button', defaultTooltipPlacement = 'top', highlight, highlightCaseSensitive = false, highlightStyles, ...rest } = props;
     // Loading state makes the component disabled
     const finalIsDisabled = isDisabled === true || (isLoading && isDisabled !== false);
     // Determine if we should show checkbox instead of icon
@@ -373,6 +375,13 @@ const Item = (props, ref) => {
         labelProps,
         isDynamicLabel: !!actions,
     });
+    // Process children with highlight if applicable
+    const processedChildren = useMemo(() => {
+        if (typeof children === 'string' && highlight) {
+            return highlightText(children, highlight, highlightCaseSensitive, highlightStyles);
+        }
+        return children;
+    }, [children, highlight, highlightCaseSensitive, highlightStyles]);
     // Render function that creates the item element
     const renderItemElement = (tooltipTriggerProps, tooltipRef) => {
         // Use callback ref to merge multiple refs without calling hooks
@@ -393,7 +402,7 @@ const Item = (props, ref) => {
         const finalStyle = typeof size === 'number'
             ? { ...style, '--size': `${size}px` }
             : style;
-        return (_jsxs(ItemElement, { ref: handleRef, variant: theme && type ? `${theme}.${type}` : undefined, disabled: finalIsDisabled, "aria-disabled": finalIsDisabled, "aria-selected": isSelected, mods: mods, styles: styles, type: htmlType, ...mergeProps(rest, tooltipTriggerProps || {}), style: finalStyle, children: [finalIcon && (_jsx("div", { "data-element": "Icon", children: hasCheckbox ? _jsx(CheckIcon, {}) : finalIcon })), finalPrefix && _jsx("div", { "data-element": "Prefix", children: finalPrefix }), children || labelProps ? (_jsx("div", { "data-element": "Label", ...finalLabelProps, ref: labelRef, children: children })) : null, showDescription ? (_jsx("div", { "data-element": "Description", ...descriptionProps, children: description })) : null, finalSuffix && _jsx("div", { "data-element": "Suffix", children: finalSuffix }), finalRightIcon && _jsx("div", { "data-element": "RightIcon", children: finalRightIcon }), actions && (_jsx("div", { "data-element": "Actions", ...ACTIONS_EVENT_HANDLERS, children: actions !== true ? (_jsx(ItemActionProvider, { type: type, theme: theme, disableActionsFocus: disableActionsFocus, children: actions })) : null }))] }));
+        return (_jsxs(ItemElement, { ref: handleRef, variant: theme && type ? `${theme}.${type}` : undefined, disabled: finalIsDisabled, "aria-disabled": finalIsDisabled, "aria-selected": isSelected, mods: mods, styles: styles, type: htmlType, ...mergeProps(rest, tooltipTriggerProps || {}), style: finalStyle, children: [finalIcon && (_jsx("div", { "data-element": "Icon", children: hasCheckbox ? _jsx(CheckIcon, {}) : finalIcon })), finalPrefix && _jsx("div", { "data-element": "Prefix", children: finalPrefix }), children || labelProps ? (_jsx("div", { "data-element": "Label", ...finalLabelProps, ref: labelRef, children: processedChildren })) : null, showDescription ? (_jsx("div", { "data-element": "Description", ...descriptionProps, children: description })) : null, finalSuffix && _jsx("div", { "data-element": "Suffix", children: finalSuffix }), finalRightIcon && _jsx("div", { "data-element": "RightIcon", children: finalRightIcon }), actions && (_jsx("div", { "data-element": "Actions", ...ACTIONS_EVENT_HANDLERS, children: actions !== true ? (_jsx(ItemActionProvider, { type: type, theme: theme, disableActionsFocus: disableActionsFocus, children: actions })) : null }))] }));
     };
     return renderWithTooltip(renderItemElement, defaultTooltipPlacement);
 };

package/es/components/content/Item/index.js

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

package/es/components/content/ItemBadge/ItemBadge.js

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

package/es/components/content/ItemBadge/index.js

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

package/es/components/content/Layout/GridLayout.js

@@ -0,0 +1,50 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.97.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, } from 'react';
+import { tasty } from '../../../tasty';
+import { Layout } from './Layout';
+import { LayoutBlock } from './LayoutBlock';
+import { LayoutContent } from './LayoutContent';
+import { LayoutFlex } from './LayoutFlex';
+import { LayoutFooter } from './LayoutFooter';
+import { LayoutGrid } from './LayoutGrid';
+import { LayoutHeader } from './LayoutHeader';
+import { LayoutPane } from './LayoutPane';
+import { LayoutPanel } from './LayoutPanel';
+import { LayoutPanelHeader } from './LayoutPanelHeader';
+import { LayoutToolbar } from './LayoutToolbar';
+const GridLayoutElement = tasty(Layout, {
+    qa: 'GridLayout',
+    styles: {
+        Inner: {
+            display: 'grid',
+        },
+    },
+});
+function GridLayoutBase(props, ref) {
+    const { columns, rows, template, ...otherProps } = props;
+    return (_jsx(GridLayoutElement, { ref: ref, isGrid: true, gridColumns: columns, gridRows: rows, gridTemplate: template, ...otherProps }));
+}
+const _GridLayout = forwardRef(GridLayoutBase);
+_GridLayout.displayName = 'GridLayout';
+const GridLayout = Object.assign(_GridLayout, {
+    Toolbar: LayoutToolbar,
+    Header: LayoutHeader,
+    Footer: LayoutFooter,
+    Content: LayoutContent,
+    Block: LayoutBlock,
+    Flex: LayoutFlex,
+    Grid: LayoutGrid,
+    Pane: LayoutPane,
+    Panel: LayoutPanel,
+    PanelHeader: LayoutPanelHeader,
+});
+export { GridLayout };
+
+        

package/es/components/content/Layout/Layout.js

@@ -0,0 +1,214 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.97.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Children, forwardRef, isValidElement, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { extractStyles, filterBaseProps, INNER_STYLES, mergeStyles, OUTER_STYLES, tasty, } from '../../../tasty';
+import { isDevEnv } from '../../../tasty/utils/isDevEnv';
+import { Alert } from '../Alert';
+import { LayoutProvider, useLayoutContext } from './LayoutContext';
+const LayoutElement = tasty({
+    as: 'div',
+    qa: 'Layout',
+    styles: {
+        position: 'relative',
+        display: 'block',
+        overflow: 'hidden',
+        flexGrow: 1,
+        placeSelf: 'stretch',
+        height: {
+            '': 'auto',
+            'auto-height': 'fixed 100%',
+            collapsed: '6x',
+        },
+        '$content-padding': '1x',
+        Inner: {
+            // Direct child selector required for nested layouts
+            $: '>',
+            position: 'absolute',
+            inset: '$inset-top $inset-right $inset-bottom $inset-left',
+            display: 'flex',
+            flow: 'column',
+            overflow: 'hidden',
+            // Disable transition during panel resize for snappy feedback
+            // Also disable transition when not ready to prevent initial animation
+            // Only animate when has-transition is enabled (and not dragging/not-ready)
+            transition: {
+                '': 'none',
+                'has-transition': 'inset $transition ease-out',
+                'dragging | not-ready': 'none',
+            },
+        },
+    },
+});
+// Check if a child is a Layout.Panel
+function isPanelElement(child) {
+    return (isValidElement(child) &&
+        typeof child.type !== 'string' &&
+        child.type.displayName === 'Layout.Panel');
+}
+function LayoutInner(props) {
+    const layoutContext = useLayoutContext();
+    const localRef = useRef(null);
+    const [isAutoHeight, setIsAutoHeight] = useState(false);
+    const [isCollapsed, setIsCollapsed] = useState(false);
+    const { isGrid, columns, rows, template, contentPadding, hasTransition = false, styles, children, style, forwardedRef, _forceShowDevWarning, ...otherProps } = props;
+    // Separate panels from other children
+    const { panels, content } = useMemo(() => {
+        const panelElements = [];
+        const contentElements = [];
+        Children.forEach(children, (child) => {
+            if (isPanelElement(child)) {
+                panelElements.push(child);
+            }
+            else {
+                contentElements.push(child);
+            }
+        });
+        return { panels: panelElements, content: contentElements };
+    }, [children]);
+    // Extract outer wrapper styles and inner content styles
+    const outerStyles = extractStyles(otherProps, OUTER_STYLES);
+    const innerStyles = extractStyles(otherProps, INNER_STYLES);
+    // Merge styles using the same pattern as LayoutPane
+    const finalStyles = useMemo(() => {
+        // Handle grid mode and grid properties
+        const gridStyles = {};
+        if (isGrid) {
+            gridStyles.display = 'grid';
+        }
+        if (columns) {
+            gridStyles.gridColumns = columns;
+        }
+        if (rows) {
+            gridStyles.gridRows = rows;
+        }
+        if (template) {
+            gridStyles.gridTemplate = template;
+        }
+        return mergeStyles(outerStyles, contentPadding != null ? { '$content-padding': contentPadding } : null, styles, { Inner: mergeStyles(innerStyles, gridStyles, styles?.Inner) });
+    }, [
+        outerStyles,
+        innerStyles,
+        contentPadding,
+        styles,
+        isGrid,
+        columns,
+        rows,
+        template,
+    ]);
+    // Calculate inset values from panel sizes
+    const panelSizes = layoutContext?.panelSizes ?? {
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0,
+    };
+    const isDragging = layoutContext?.isDragging ?? false;
+    const isReady = layoutContext?.isReady ?? true;
+    const markReady = layoutContext?.markReady;
+    const dismissOverlayPanels = layoutContext?.dismissOverlayPanels;
+    const hasOverlayPanels = layoutContext?.hasOverlayPanels ?? false;
+    // Mark layout as ready after first paint
+    // Using useEffect + requestAnimationFrame ensures:
+    // 1. Panels register in useLayoutEffect → correct insets before first paint
+    // 2. First paint with not-ready=true (transition disabled)
+    // 3. After paint completes → enables transitions for subsequent changes
+    useEffect(() => {
+        const frameId = requestAnimationFrame(() => {
+            markReady?.();
+        });
+        return () => cancelAnimationFrame(frameId);
+    }, [markReady]);
+    // Auto-height detection: if layout collapses to 0 height after initialization,
+    // automatically set height to 100% to prevent invisible layout
+    useEffect(() => {
+        if (isReady && localRef.current && localRef.current.offsetHeight === 0) {
+            setIsAutoHeight(true);
+        }
+    }, [isReady]);
+    // Second check: if still 0 height after auto-height was applied,
+    // show collapsed state with warning
+    useEffect(() => {
+        if (isAutoHeight && localRef.current) {
+            // Use requestAnimationFrame to check after styles have been applied
+            const frameId = requestAnimationFrame(() => {
+                if (localRef.current && localRef.current.offsetHeight === 0) {
+                    setIsCollapsed(true);
+                }
+            });
+            return () => cancelAnimationFrame(frameId);
+        }
+    }, [isAutoHeight]);
+    const insetStyle = useMemo(() => {
+        const baseStyle = {
+            '--inset-top': `${panelSizes.top}px`,
+            '--inset-right': `${panelSizes.right}px`,
+            '--inset-bottom': `${panelSizes.bottom}px`,
+            '--inset-left': `${panelSizes.left}px`,
+        };
+        if (style) {
+            return { ...baseStyle, ...style };
+        }
+        return baseStyle;
+    }, [panelSizes, style]);
+    const mods = useMemo(() => ({
+        dragging: isDragging,
+        'not-ready': !isReady,
+        'has-transition': hasTransition,
+        'auto-height': isAutoHeight && !isCollapsed,
+        collapsed: isCollapsed,
+    }), [isDragging, isReady, hasTransition, isAutoHeight, isCollapsed]);
+    // Combine local ref with forwarded ref
+    const setRefs = (element) => {
+        localRef.current = element;
+        if (typeof forwardedRef === 'function') {
+            forwardedRef(element);
+        }
+        else if (forwardedRef) {
+            forwardedRef.current = element;
+        }
+    };
+    // Show dev warning when collapsed and in dev mode (or forced for stories)
+    const showDevWarning = isCollapsed && (_forceShowDevWarning || isDevEnv());
+    // Handle focus entering the Inner element - dismiss overlay panels
+    const handleInnerFocus = useCallback((e) => {
+        // Only dismiss if there are overlay panels
+        if (!hasOverlayPanels)
+            return;
+        // Check if focus is coming from outside the Inner element
+        const inner = e.currentTarget;
+        const relatedTarget = e.relatedTarget;
+        // If relatedTarget is null or not inside the Inner element,
+        // focus is entering from outside - dismiss overlay panels
+        if (!relatedTarget || !inner.contains(relatedTarget)) {
+            dismissOverlayPanels?.();
+        }
+    }, [hasOverlayPanels, dismissOverlayPanels]);
+    // Handle Escape key anywhere in the Layout - dismiss overlay panels
+    const handleKeyDown = useCallback((e) => {
+        if (hasOverlayPanels && e.key === 'Escape') {
+            e.preventDefault();
+            e.stopPropagation();
+            dismissOverlayPanels?.();
+        }
+    }, [hasOverlayPanels, dismissOverlayPanels]);
+    return (_jsx(LayoutElement, { ref: setRefs, ...filterBaseProps(otherProps, { eventProps: true }), mods: mods, styles: finalStyles, style: insetStyle, onKeyDown: hasOverlayPanels ? handleKeyDown : undefined, children: showDevWarning ? (_jsxs(Alert, { theme: "danger", children: [_jsx("b", { children: "UIKit:" }), " ", _jsx("b", { children: "<Layout/>" }), " has collapsed to ", _jsx("b", { children: "0" }), " height. Ensure the parent container has a defined height or use the", ' ', _jsx("b", { children: "height" }), " prop on ", _jsx("b", { children: "<Layout/>" }), "."] })) : (_jsxs(_Fragment, { children: [panels, _jsx("div", { "data-element": "Inner", onFocus: handleInnerFocus, children: content })] })) }));
+}
+/**
+ * Layout component provides a vertical flex layout with overflow-safe content.
+ * Uses a two-element architecture (wrapper + content) to ensure content never overflows.
+ */
+function Layout(props, ref) {
+    const { hasTransition } = props;
+    return (_jsx(LayoutProvider, { hasTransition: hasTransition, children: _jsx(LayoutInner, { ...props, forwardedRef: ref }) }));
+}
+const _Layout = forwardRef(Layout);
+_Layout.displayName = 'Layout';
+export { _Layout as Layout };
+
+        

package/es/components/content/Layout/LayoutBlock.js

@@ -0,0 +1,30 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.97.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { tasty } from '../../../tasty';
+import { LayoutContent } from './LayoutContent';
+const BlockElement = tasty(LayoutContent, {
+    qa: 'LayoutBlock',
+    styles: {
+        flexShrink: 0,
+        flexGrow: 0,
+        Inner: {
+            display: 'block',
+        },
+    },
+});
+function LayoutBlock(props, ref) {
+    const { children, scrollbar = 'tiny', ...otherProps } = props;
+    return (_jsx(BlockElement, { ...otherProps, ref: ref, scrollbar: scrollbar, children: children }));
+}
+const _LayoutBlock = forwardRef(LayoutBlock);
+_LayoutBlock.displayName = 'Layout.Block';
+export { _LayoutBlock as LayoutBlock };
+
+        

package/es/components/content/Layout/LayoutCenter.js

@@ -0,0 +1,31 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.97.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { tasty } from '../../../tasty';
+import { LayoutContainer } from './LayoutContainer';
+const CenterElement = tasty(LayoutContainer, {
+    qa: 'LayoutCenter',
+    styles: {
+        placeItems: 'center',
+        placeContent: 'center',
+        Inner: {
+            textAlign: 'center',
+            placeItems: 'center',
+        },
+    },
+});
+function LayoutCenter(props, ref) {
+    const { children, ...otherProps } = props;
+    return (_jsx(CenterElement, { ...otherProps, ref: ref, children: children }));
+}
+const _LayoutCenter = forwardRef(LayoutCenter);
+_LayoutCenter.displayName = 'Layout.Center';
+export { _LayoutCenter as LayoutCenter };
+
+