@cube-dev/ui-kit 0.0.0-canary-0127833 → 0.0.0-canary-fa86c75

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

@@ -0,0 +1,375 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-fa86c75
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { useHover, useMove } from 'react-aria';
+import { useDebouncedValue } from '../../../_internal/hooks';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../../../tasty';
+import { mergeProps, useCombinedRefs } from '../../../utils/react';
+import { DisplayTransition } from '../../helpers/DisplayTransition/DisplayTransition';
+import { Dialog } from '../../overlays/Dialog';
+import { DialogContainer, } from '../../overlays/Dialog/DialogContainer';
+import { LayoutContextReset, useLayoutContext } from './LayoutContext';
+// Handler width that extends beyond panel for easier grabbing
+const HANDLER_WIDTH = 9;
+// How much of the handler extends outside the panel
+const HANDLER_OVERFLOW = 3;
+const PanelElement = tasty({
+    as: 'div',
+    qa: 'LayoutPanel',
+    styles: {
+        position: 'absolute',
+        zIndex: 10,
+        display: 'flex',
+        flow: 'column',
+        overflow: 'hidden',
+        // Position based on side prop
+        top: {
+            '': 0,
+            'side=bottom': 'initial',
+        },
+        right: {
+            '': 0,
+            'side=left': 'initial',
+        },
+        bottom: {
+            '': 0,
+            'side=top': 'initial',
+        },
+        left: {
+            '': 0,
+            'side=right': 'initial',
+        },
+        // Size handling
+        width: {
+            '': '$panel-size',
+            'side=top | side=bottom': '100%',
+        },
+        height: {
+            '': '100%',
+            'side=top | side=bottom': '$panel-size',
+        },
+        // Visual styling
+        border: {
+            'side=left': 'right',
+            'side=right': 'left',
+            'side=top': 'bottom',
+            'side=bottom': 'top',
+        },
+        fill: '#white',
+        // Transition styles - offscreen mod controls slide animation
+        transform: {
+            '': 'translateX(0) translateY(0)',
+            'offscreen & side=left': 'translateX(-100%)',
+            'offscreen & side=right': 'translateX(100%)',
+            'offscreen & side=top': 'translateY(-100%)',
+            'offscreen & side=bottom': 'translateY(100%)',
+        },
+        transition: {
+            '': 'none',
+            'has-transition': 'transform $transition ease-out',
+        },
+    },
+});
+// Handler is positioned as sibling to panel (in Fragment), relative to Layout
+const ResizeHandlerElement = tasty({
+    qa: 'PanelResizeHandler',
+    styles: {
+        position: 'absolute',
+        zIndex: 11, // Above panel (zIndex: 10)
+        // Handler size
+        width: {
+            '': '100%',
+            horizontal: `${HANDLER_WIDTH}px`,
+            'disabled & horizontal': '1bw',
+        },
+        height: {
+            '': `${HANDLER_WIDTH}px`,
+            horizontal: '100%',
+            'disabled & !horizontal': '1bw',
+        },
+        // Position at the panel's resize edge (relative to Layout)
+        top: {
+            '': 0,
+            'side=top': '$panel-size',
+            'side=bottom': 'initial',
+        },
+        bottom: {
+            '': 0,
+            'side=bottom': '$panel-size',
+            'side=top': 'initial',
+        },
+        left: {
+            '': 0,
+            'side=left': '$panel-size',
+            'side=right': 'initial',
+        },
+        right: {
+            '': 0,
+            'side=right': '$panel-size',
+            'side=left': 'initial',
+        },
+        // Center the handler on the edge
+        transform: {
+            'side=top': `translateY(-50%) translateY(-${HANDLER_OVERFLOW}px)`,
+            'side=bottom': `translateY(50%) translateY(${HANDLER_OVERFLOW}px)`,
+            'side=left': `translateX(-50%) translateX(-${HANDLER_OVERFLOW}px) translateX(4px)`,
+            'side=right': `translateX(50%) translateX(${HANDLER_OVERFLOW}px) translateX(-4px)`,
+            // Offscreen transforms - must match panel movement
+            'offscreen & side=left': `translateX(-50%) translateX(-${HANDLER_OVERFLOW}px) translateX(-$panel-size)`,
+            'offscreen & side=right': `translateX(50%) translateX(${HANDLER_OVERFLOW}px) translateX($panel-size)`,
+            'offscreen & side=top': `translateY(-50%) translateY(-${HANDLER_OVERFLOW}px) translateY(-$panel-size)`,
+            'offscreen & side=bottom': `translateY(50%) translateY(${HANDLER_OVERFLOW}px) translateY($panel-size)`,
+        },
+        cursor: {
+            '': 'row-resize',
+            horizontal: 'col-resize',
+            disabled: 'not-allowed',
+        },
+        padding: 0,
+        boxSizing: 'border-box',
+        // Transition must match panel for synchronized animation
+        transition: {
+            '': 'theme',
+            'has-transition': 'transform $transition ease-out, theme',
+        },
+        Track: {
+            width: {
+                '': 'initial',
+                horizontal: '3px',
+                'disabled & horizontal': '1px',
+            },
+            height: {
+                '': '3px',
+                horizontal: 'initial',
+                'disabled & !horizontal': '1px',
+            },
+            position: 'absolute',
+            inset: {
+                '': '3px 0',
+                horizontal: '0 3px',
+                disabled: '0 0',
+            },
+            fill: {
+                '': '#border-opaque',
+                '(hovered | drag) & !disabled': '#purple-03',
+            },
+            transition: 'theme',
+            outline: {
+                '': '1bw #purple-text.0',
+                drag: '1bw #purple-text',
+            },
+            outlineOffset: 1,
+        },
+        Drag: {
+            display: 'grid',
+            gap: '2bw',
+            flow: {
+                '': 'row',
+                horizontal: 'column',
+            },
+            gridColumns: {
+                '': '3px 3px 3px 3px 3px',
+                horizontal: 'auto',
+            },
+            gridRows: {
+                '': 'auto',
+                horizontal: '3px 3px 3px 3px 3px',
+            },
+            width: {
+                '': 'auto',
+                horizontal: '1px',
+            },
+            height: {
+                '': '1px',
+                horizontal: 'auto',
+            },
+            inset: {
+                '': '4px 50% auto auto',
+                horizontal: '50% 4px auto auto',
+            },
+            transform: {
+                '': 'translate(-50%, 0)',
+                horizontal: 'translate(0, -50%)',
+            },
+            position: 'absolute',
+            transition: 'theme',
+        },
+        DragPart: {
+            radius: true,
+            fill: {
+                '': '#dark-03',
+                'hovered | drag': '#dark-02',
+                disabled: '#dark-04',
+            },
+        },
+    },
+});
+function ResizeHandler(props) {
+    const { side, isDisabled, mods, moveProps, style } = props;
+    const { hoverProps, isHovered } = useHover({});
+    const isHorizontal = side === 'left' || side === 'right';
+    const localIsHovered = useDebouncedValue(isHovered, 150);
+    return (_jsxs(ResizeHandlerElement, { ...mergeProps(hoverProps, moveProps, {
+            mods: {
+                hovered: localIsHovered,
+                horizontal: isHorizontal,
+                disabled: isDisabled,
+                side,
+                ...mods,
+            },
+            style,
+        }), children: [_jsx("div", { "data-element": "Track" }), !isDisabled && (_jsxs("div", { "data-element": "Drag", children: [_jsx("div", { "data-element": "DragPart" }), _jsx("div", { "data-element": "DragPart" }), _jsx("div", { "data-element": "DragPart" }), _jsx("div", { "data-element": "DragPart" }), _jsx("div", { "data-element": "DragPart" })] }))] }));
+}
+function LayoutPanel(props, ref) {
+    const layoutContext = useLayoutContext();
+    if (!layoutContext) {
+        throw new Error('Layout.Panel must be a direct child of Layout component.');
+    }
+    const { side = 'left', size: providedSize, defaultSize = 280, minSize = 200, maxSize, isResizable = false, onSizeChange, isOpen: providedIsOpen, defaultIsOpen = true, onOpenChange, hasTransition = false, isDialog = false, isDialogOpen: providedIsDialogOpen, defaultIsDialogOpen = false, onDialogOpenChange, dialogProps, children, styles, mods, ...otherProps } = props;
+    const combinedRef = useCombinedRefs(ref);
+    const timerRef = useRef(null);
+    const isHorizontal = side === 'left' || side === 'right';
+    // Panel open state
+    const [internalIsOpen, setInternalIsOpen] = useState(defaultIsOpen);
+    const isOpen = providedIsOpen ?? internalIsOpen;
+    // Dialog open state
+    const [internalIsDialogOpen, setInternalIsDialogOpen] = useState(defaultIsDialogOpen);
+    const dialogOpen = providedIsDialogOpen ?? internalIsDialogOpen;
+    // Resize state
+    const [isDragging, setIsDragging] = useState(false);
+    const [size, setSize] = useState(() => {
+        if (typeof providedSize === 'number')
+            return providedSize;
+        if (typeof defaultSize === 'number')
+            return defaultSize;
+        return 280;
+    });
+    const extractedStyles = extractStyles(otherProps, CONTAINER_STYLES);
+    // Clamp size to min/max constraints
+    const clampSize = useCallback((value) => {
+        let result = value;
+        if (typeof maxSize === 'number') {
+            result = Math.min(maxSize, result);
+        }
+        if (typeof minSize === 'number') {
+            result = Math.max(minSize, result);
+        }
+        return Math.max(result, 0);
+    }, [minSize, maxSize]);
+    const setContextDragging = layoutContext.setDragging;
+    const { moveProps } = useMove({
+        onMoveStart() {
+            if (!isResizable)
+                return;
+            setIsDragging(true);
+            setContextDragging(true);
+        },
+        onMove(e) {
+            if (!isResizable)
+                return;
+            if (e.pointerType === 'keyboard')
+                return;
+            const delta = isHorizontal
+                ? e.deltaX * (side === 'right' ? -1 : 1)
+                : e.deltaY * (side === 'bottom' ? -1 : 1);
+            setSize((currentSize) => clampSize(currentSize + delta));
+        },
+        onMoveEnd() {
+            setIsDragging(false);
+            setContextDragging(false);
+            // Round to integer on release and notify parent
+            setSize((currentSize) => {
+                const finalSize = Math.round(clampSize(currentSize));
+                // Call onSizeChange synchronously to ensure parent state is updated
+                onSizeChange?.(finalSize);
+                return finalSize;
+            });
+        },
+    });
+    // Sync provided size with internal state (only when not dragging)
+    useEffect(() => {
+        if (typeof providedSize === 'number' && !isDragging) {
+            setSize(clampSize(providedSize));
+        }
+    }, [providedSize, isDragging, clampSize]);
+    // Register panel with layout context
+    // Include handler overflow in the effective size for proper content inset
+    const effectivePanelSize = isOpen && !isDialog ? size : 0;
+    const effectiveInsetSize = Math.round(effectivePanelSize +
+        (isResizable && effectivePanelSize > 0 ? HANDLER_OVERFLOW : 0));
+    const { registerPanel, unregisterPanel, updatePanelSize, isReady } = layoutContext;
+    // Track the last reported size to prevent unnecessary updates
+    const lastSizeRef = useRef(effectiveInsetSize);
+    // Register on mount, unregister on unmount
+    // Using useLayoutEffect ensures registration happens before browser paint
+    useLayoutEffect(() => {
+        registerPanel(side, lastSizeRef.current);
+        return () => {
+            unregisterPanel(side);
+        };
+    }, [side, registerPanel, unregisterPanel]);
+    // Update size when it changes (after initial mount)
+    // Using useLayoutEffect ensures size updates happen before browser paint
+    useLayoutEffect(() => {
+        if (lastSizeRef.current !== effectiveInsetSize) {
+            lastSizeRef.current = effectiveInsetSize;
+            updatePanelSize(side, effectiveInsetSize);
+        }
+    }, [side, effectiveInsetSize, updatePanelSize]);
+    const handleOpenChange = useCallback((newIsOpen) => {
+        setInternalIsOpen(newIsOpen);
+        onOpenChange?.(newIsOpen);
+    }, [onOpenChange]);
+    const handleDialogOpenChange = useCallback((newIsOpen) => {
+        setInternalIsDialogOpen(newIsOpen);
+        onDialogOpenChange?.(newIsOpen);
+    }, [onDialogOpenChange]);
+    const panelMods = useMemo(() => ({
+        side,
+        drag: isDragging,
+        horizontal: isHorizontal,
+        // Only enable transition after layout is ready to prevent initial animation
+        'has-transition': hasTransition && isReady,
+        ...mods,
+    }), [side, isDragging, isHorizontal, hasTransition, isReady, mods]);
+    const panelStyle = useMemo(() => ({
+        '--panel-size': `${size}px`,
+        '--min-size': typeof minSize === 'number' ? `${minSize}px` : minSize,
+        '--max-size': typeof maxSize === 'number' ? `${maxSize}px` : maxSize,
+    }), [size, minSize, maxSize]);
+    // Combine refs for panel element
+    const panelRefCallback = useCallback((node, transitionRef) => {
+        // Update the combined ref
+        combinedRef.current = node;
+        // Call transition ref if provided
+        transitionRef?.(node);
+    }, [combinedRef]);
+    const renderPanelContent = (offscreen = false, transitionRef) => (_jsxs(_Fragment, { children: [_jsx(PanelElement, { ref: (node) => panelRefCallback(node, transitionRef), ...filterBaseProps(otherProps, { eventProps: true }), mods: { ...panelMods, offscreen }, styles: { ...extractedStyles, ...styles }, style: panelStyle, "data-side": side, children: _jsx(LayoutContextReset, { children: children }) }), isResizable && (_jsx(ResizeHandler, { side: side, isDisabled: !isResizable, mods: {
+                    drag: isDragging,
+                    offscreen,
+                    'has-transition': hasTransition && isReady,
+                }, moveProps: moveProps, style: panelStyle }))] }));
+    // Dialog mode
+    if (isDialog) {
+        return (_jsx(DialogContainer, { isOpen: dialogOpen, type: "panel", onDismiss: () => handleDialogOpenChange(false), ...dialogProps, children: _jsx(Dialog, { isDismissable: false, children: children }) }));
+    }
+    // Panel with transition
+    if (hasTransition) {
+        return (_jsx(DisplayTransition, { isShown: isOpen, animateOnMount: false, children: ({ isShown, ref: transitionRef }) => renderPanelContent(!isShown, transitionRef) }));
+    }
+    // Simple panel (no transition)
+    if (!isOpen)
+        return null;
+    return renderPanelContent(false);
+}
+const _LayoutPanel = forwardRef(LayoutPanel);
+_LayoutPanel.displayName = 'Layout.Panel';
+export { _LayoutPanel as LayoutPanel };
+
+        

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

@@ -0,0 +1,42 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-fa86c75
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback } from 'react';
+import { CloseIcon } from '../../../icons/CloseIcon';
+import { tasty } from '../../../tasty';
+import { ItemAction } from '../../actions/ItemAction';
+import { useDialogContext } from '../../overlays/Dialog/context';
+import { Item } from '../Item/Item';
+const PanelHeaderElement = tasty(Item, {
+    qa: 'PanelHeader',
+    styles: {
+        border: 'bottom',
+        radius: 0,
+    },
+});
+function LayoutPanelHeader(props, ref) {
+    const { title, level = 2, isClosable, onClose, actions, children, ...otherProps } = props;
+    // Access dialog context if in dialog mode
+    const dialogContext = useDialogContext();
+    // Close handler that works for both panel and dialog modes
+    const handleClose = useCallback(() => {
+        onClose?.();
+        // If in dialog mode, also close the dialog
+        dialogContext?.onClose?.();
+    }, [onClose, dialogContext]);
+    const closeAction = isClosable ? (_jsx(ItemAction, { icon: _jsx(CloseIcon, {}), "aria-label": "Close panel", onPress: handleClose })) : null;
+    const finalActions = actions ?? closeAction;
+    // Use heading tag based on level for semantics
+    const Tag = `h${level}`;
+    return (_jsx(PanelHeaderElement, { ref: ref, as: Tag, size: "large", actions: finalActions, ...otherProps, children: title ?? children }));
+}
+const _LayoutPanelHeader = forwardRef(LayoutPanelHeader);
+_LayoutPanelHeader.displayName = 'Layout.PanelHeader';
+export { _LayoutPanelHeader as LayoutPanelHeader };
+
+        

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

@@ -0,0 +1,38 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-fa86c75
+ * 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 { LayoutContextReset } from './LayoutContext';
+const ToolbarElement = tasty({
+    as: 'div',
+    qa: 'Toolbar',
+    role: 'toolbar',
+    styles: {
+        display: 'flex',
+        flow: 'row nowrap',
+        placeContent: 'center space-between',
+        placeItems: 'center stretch',
+        gap: '1x',
+        padding: '1x 2x',
+        width: '100%',
+        height: 'min 5x',
+        overflow: 'hidden',
+        boxSizing: 'border-box',
+    },
+});
+function LayoutToolbar(props, ref) {
+    const { children, ...otherProps } = props;
+    const styles = extractStyles(otherProps, CONTAINER_STYLES);
+    return (_jsx(ToolbarElement, { ref: ref, ...filterBaseProps(otherProps, { eventProps: true }), styles: styles, children: _jsx(LayoutContextReset, { children: children }) }));
+}
+const _LayoutToolbar = forwardRef(LayoutToolbar);
+_LayoutToolbar.displayName = 'Layout.Toolbar';
+export { _LayoutToolbar as LayoutToolbar };
+
+        

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

@@ -0,0 +1,110 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-fa86c75
+ * Released under the MIT license.
+ */
+
+import { useCallback, useEffect, useState, } from 'react';
+const MIN_HANDLE_SIZE = 20;
+export function useTinyScrollbar(ref, enabled) {
+    const [scrollState, setScrollState] = useState({
+        hasOverflowY: false,
+        hasOverflowX: false,
+        scrollTop: 0,
+        scrollLeft: 0,
+        scrollHeight: 0,
+        scrollWidth: 0,
+        clientHeight: 0,
+        clientWidth: 0,
+    });
+    const updateScrollState = useCallback(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth, } = element;
+        setScrollState({
+            hasOverflowY: scrollHeight > clientHeight,
+            hasOverflowX: scrollWidth > clientWidth,
+            scrollTop,
+            scrollLeft,
+            scrollHeight,
+            scrollWidth,
+            clientHeight,
+            clientWidth,
+        });
+    }, [ref]);
+    useEffect(() => {
+        if (!enabled)
+            return;
+        const element = ref.current;
+        if (!element)
+            return;
+        // Initial update
+        updateScrollState();
+        // Listen for scroll events
+        const handleScroll = () => updateScrollState();
+        element.addEventListener('scroll', handleScroll, { passive: true });
+        // ResizeObserver for content size changes
+        const resizeObserver = new ResizeObserver(() => {
+            updateScrollState();
+        });
+        resizeObserver.observe(element);
+        // Observe children for size changes
+        Array.from(element.children).forEach((child) => {
+            resizeObserver.observe(child);
+        });
+        return () => {
+            element.removeEventListener('scroll', handleScroll);
+            resizeObserver.disconnect();
+        };
+    }, [enabled, ref, updateScrollState]);
+    // Calculate vertical handle position and size
+    const calculateVHandle = useCallback(() => {
+        const { scrollHeight, clientHeight, scrollTop, hasOverflowY } = scrollState;
+        if (!hasOverflowY || !enabled) {
+            return { top: 0, height: 0 };
+        }
+        const trackHeight = clientHeight - 2; // 1px padding on each end
+        const ratio = clientHeight / scrollHeight;
+        let handleHeight = Math.max(MIN_HANDLE_SIZE, Math.round(trackHeight * ratio));
+        const availableTrack = trackHeight - handleHeight;
+        const scrollRatio = scrollHeight - clientHeight > 0
+            ? scrollTop / (scrollHeight - clientHeight)
+            : 0;
+        const handleTop = 1 + Math.round(availableTrack * scrollRatio);
+        return { top: handleTop, height: handleHeight };
+    }, [scrollState, enabled]);
+    // Calculate horizontal handle position and size
+    const calculateHHandle = useCallback(() => {
+        const { scrollWidth, clientWidth, scrollLeft, hasOverflowX } = scrollState;
+        if (!hasOverflowX || !enabled) {
+            return { left: 0, width: 0 };
+        }
+        const trackWidth = clientWidth - 2; // 1px padding on each end
+        const ratio = clientWidth / scrollWidth;
+        let handleWidth = Math.max(MIN_HANDLE_SIZE, Math.round(trackWidth * ratio));
+        const availableTrack = trackWidth - handleWidth;
+        const scrollRatio = scrollWidth - clientWidth > 0
+            ? scrollLeft / (scrollWidth - clientWidth)
+            : 0;
+        const handleLeft = 1 + Math.round(availableTrack * scrollRatio);
+        return { left: handleLeft, width: handleWidth };
+    }, [scrollState, enabled]);
+    const vHandle = calculateVHandle();
+    const hHandle = calculateHHandle();
+    return {
+        handleVStyle: {
+            '--scrollbar-v-top': `${vHandle.top}px`,
+            '--scrollbar-v-height': `${vHandle.height}px`,
+        },
+        handleHStyle: {
+            '--scrollbar-h-left': `${hHandle.left}px`,
+            '--scrollbar-h-width': `${hHandle.width}px`,
+        },
+        hasOverflowY: scrollState.hasOverflowY,
+        hasOverflowX: scrollState.hasOverflowX,
+    };
+}
+
+        

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

@@ -0,0 +1,27 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-fa86c75
+ * Released under the MIT license.
+ */
+
+import { Layout as LayoutBase } from './Layout';
+import { LayoutContent } from './LayoutContent';
+import { LayoutFooter } from './LayoutFooter';
+import { LayoutHeader } from './LayoutHeader';
+import { LayoutPanel } from './LayoutPanel';
+import { LayoutPanelHeader } from './LayoutPanelHeader';
+import { LayoutToolbar } from './LayoutToolbar';
+export { GridLayout } from './GridLayout';
+export { LayoutContext, useLayoutContext } from './LayoutContext';
+const Layout = Object.assign(LayoutBase, {
+    Toolbar: LayoutToolbar,
+    Header: LayoutHeader,
+    Footer: LayoutFooter,
+    Content: LayoutContent,
+    Panel: LayoutPanel,
+    PanelHeader: LayoutPanelHeader,
+});
+export { Layout };
+
+        

package/es/components/content/List/SectionHeading.js

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

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

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

package/es/components/content/Paragraph.js

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

package/es/components/content/Placeholder/Placeholder.js

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

package/es/components/content/PrismCode/PrismCode.js

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

package/es/components/content/PrismCode/prismSetup.js

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

package/es/components/content/PrismDiffCode/PrismDiffCode.js

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

package/es/components/content/Result/Result.js

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