@cube-dev/ui-kit 0.0.0-canary-b916e8d → 0.0.0-canary-5cc6499

package/es/components/forms/TextInput/TextInputBase.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
@@ -12,7 +12,8 @@ import { cloneElement, forwardRef, useImperativeHandle, useRef, useState, } from
 import { useFormProps } from '../Form/Form';
 import { useHover } from '@react-aria/interactions';
 import { useProviderProps } from '../../../provider';
-import { BLOCK_STYLES, DIMENSION_STYLES, extractStyles, POSITION_STYLES, tasty, } from '../../../tasty';
+import { Base } from '../../Base';
+import { extractStyles, BLOCK_STYLES, DIMENSION_STYLES, POSITION_STYLES, } from '../../../tasty';
 import { useFocus } from '../../../utils/react/interactions';
 import { Prefix } from '../../layout/Prefix';
 import { Suffix } from '../../layout/Suffix';
@@ -20,21 +21,11 @@ import { FieldWrapper } from '../FieldWrapper';
 import { Space } from '../../layout/Space';
 import { Block } from '../../Block';
 import { mergeProps } from '../../../utils/react';
-const InputWrapperElement = tasty({
-    styles: {
-        display: 'grid',
-        position: 'relative',
-        Prefix: {
-            padding: {
-                '': '0 1x 0 1.5x',
-                'text-prefix': '0 1x 0 2.5x',
-            },
-        },
-        Suffix: {
-            padding: '.5x left',
-        },
-    },
-});
+import { useContextStyles } from '../../../providers/StyleProvider';
+const WRAPPER_STYLES = {
+    display: 'grid',
+    position: 'relative',
+};
 const STYLE_LIST = [...POSITION_STYLES, ...DIMENSION_STYLES];
 const INPUT_STYLE_PROPS_LIST = [...BLOCK_STYLES, 'resize'];
 export const DEFAULT_INPUT_STYLES = {
@@ -78,9 +69,6 @@ export const DEFAULT_INPUT_STYLES = {
     margin: 0,
     resize: 'none',
 };
-const InputElement = tasty({
-    styles: DEFAULT_INPUT_STYLES,
-});
 function TextInputBase(props, ref) {
     props = useProviderProps(props);
     props = useFormProps(props);
@@ -89,7 +77,16 @@ function TextInputBase(props, ref) {
     let [prefixWidth, setPrefixWidth] = useState(0);
     let styles = extractStyles(otherProps, STYLE_LIST);
     let type = otherProps.type;
-    inputStyles = extractStyles(otherProps, INPUT_STYLE_PROPS_LIST, inputStyles);
+    let contextStyles = useContextStyles('Input', otherProps);
+    inputStyles = extractStyles(otherProps, INPUT_STYLE_PROPS_LIST, {
+        ...DEFAULT_INPUT_STYLES,
+        ...contextStyles,
+        ...inputStyles,
+    });
+    wrapperStyles = {
+        ...WRAPPER_STYLES,
+        ...wrapperStyles,
+    };
     if (prefix) {
         inputStyles.paddingLeft = `${prefixWidth}px`;
     }
@@ -126,13 +123,12 @@ function TextInputBase(props, ref) {
         }
         inputProps.placeholder = ' ';
     }
-    let textField = (_jsxs(InputWrapperElement, { ref: wrapperRef, qa: qa || 'TextInput', mods: {
+    let textField = (_jsxs(Base, { ref: wrapperRef, qa: `${qa || 'TextInput'}Wrapper`, mods: {
             invalid: isInvalid,
             valid: validationState === 'valid',
             loadable: !!loadingIndicator,
             multiline: multiLine,
-            'text-prefix': prefix === 'string',
-        }, "data-size": size, styles: wrapperStyles, ...wrapperProps, children: [_jsx(InputElement, { qa: "Input", as: ElementType, ...mergeProps(inputProps, focusProps, hoverProps), ref: inputRef, rows: multiLine ? rows : undefined, mods: {
+        }, "data-size": size, styles: wrapperStyles, ...wrapperProps, children: [_jsx(Base, { qa: qa || 'TextInput', as: ElementType, ...mergeProps(inputProps, focusProps, hoverProps), ref: inputRef, rows: multiLine ? rows : undefined, mods: {
                     invalid: isInvalid,
                     valid: validationState === 'valid',
                     disabled: isDisabled,
@@ -140,7 +136,7 @@ function TextInputBase(props, ref) {
                     focused: isFocused,
                 }, style: {
                     WebkitTextSecurity: multiLine && type === 'password' ? 'disc' : 'initial',
-                }, autoFocus: autoFocus, "data-size": size, styles: inputStyles }, void 0), _jsx(Prefix, { onWidthChange: setPrefixWidth, opacity: isDisabled ? '@disabled-opacity' : false, placeItems: "center", children: prefix }, void 0), _jsxs(Suffix, { onWidthChange: setSuffixWidth, opacity: isDisabled ? '@disabled-opacity' : false, children: [suffixPosition === 'before' ? suffix : null, (validationState && !isLoading) || isLoading ? (_jsxs(Space, { gap: false, padding: `0 ${suffix ? '1x' : '1.5x'} 0 0`, children: [validationState && !isLoading ? validation : null, isLoading && _jsx(LoadingOutlined, {}, void 0)] }, void 0)) : null, suffixPosition === 'after' ? suffix : null] }, void 0)] }, void 0));
+                }, autoFocus: autoFocus, "data-size": size, styles: inputStyles }, void 0), _jsx(Prefix, { padding: "0 1x 0 1.5x", onWidthChange: setPrefixWidth, opacity: isDisabled ? '@disabled-opacity' : false, placeItems: "center", children: typeof prefix === 'string' ? (_jsx(Block, { padding: "1x left", children: prefix }, void 0)) : (prefix) }, void 0), _jsxs(Suffix, { padding: ".5x left", onWidthChange: setSuffixWidth, opacity: isDisabled ? '@disabled-opacity' : false, children: [suffixPosition === 'before' ? suffix : null, (validationState && !isLoading) || isLoading ? (_jsxs(Space, { gap: false, padding: `0 ${suffix ? '1x' : '1.5x'} 0 0`, children: [validationState && !isLoading ? validation : null, isLoading && _jsx(LoadingOutlined, {}, void 0)] }, void 0)) : null, suffixPosition === 'after' ? suffix : null] }, void 0)] }, void 0));
     return (_jsx(FieldWrapper, { ...{
             labelPosition,
             label,

package/es/components/forms/index.js

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

package/es/components/layout/Flex.js

@@ -1,22 +1,21 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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';
-const FlexElement = tasty({
-    styles: {
-        display: 'flex',
-        flow: 'row',
-    },
-});
+import { Base } from '../Base';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, } from '../../tasty';
+const DEFAULT_STYLES = {
+    display: 'flex',
+    flow: 'row',
+};
 export const Flex = forwardRef((props, ref) => {
-    const styles = extractStyles(props, CONTAINER_STYLES);
-    return (_jsx(FlexElement, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    const styles = extractStyles(props, CONTAINER_STYLES, DEFAULT_STYLES);
+    return (_jsx(Base, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
 });
 
         

package/es/components/layout/Flow.js

@@ -1,23 +1,22 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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';
-const FlowElement = tasty({
-    styles: {
-        display: 'block',
-        flow: 'column',
-    },
-});
+import { Base } from '../Base';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, } from '../../tasty';
+const DEFAULT_STYLES = {
+    display: 'block',
+    flow: 'column',
+};
 const STYLE_PROPS = CONTAINER_STYLES;
 export const Flow = forwardRef((props, ref) => {
-    const styles = extractStyles(props, STYLE_PROPS);
-    return (_jsx(FlowElement, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    const styles = extractStyles(props, STYLE_PROPS, DEFAULT_STYLES);
+    return (_jsx(Base, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
 });
 
         

package/es/components/layout/Grid.js

@@ -1,19 +1,19 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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';
-const GridElement = tasty({
-    styles: {
-        display: 'grid',
-        flow: 'row',
-    },
-});
+import { Base } from '../Base';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, } from '../../tasty';
+const DEFAULT_STYLES = {
+    display: 'grid',
+    flow: 'row',
+    gap: '@(column-gap, 0)',
+};
 const PROP_MAP = {
     template: 'gridTemplate',
     columns: 'gridColumns',
@@ -21,8 +21,8 @@ const PROP_MAP = {
     areas: 'gridAreas',
 };
 export const Grid = forwardRef((props, ref) => {
-    const styles = extractStyles(props, CONTAINER_STYLES, undefined, PROP_MAP);
-    return (_jsx(GridElement, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    const styles = extractStyles(props, CONTAINER_STYLES, DEFAULT_STYLES, PROP_MAP);
+    return (_jsx(Base, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
 });
 
         

package/es/components/layout/Prefix.js

@@ -1,40 +1,38 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useEffect } from 'react';
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, parseStyle, tasty, } from '../../tasty';
+import { Base } from '../Base';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, parseStyle, } from '../../tasty';
 import { useCombinedRefs } from '../../utils/react';
-const PrefixElement = tasty({
-    element: 'Prefix',
-    styles: {
-        position: 'absolute',
-        display: 'grid',
-        placeContent: 'stretch',
-        placeItems: 'center',
-        flow: 'column',
-        gap: 0,
-        left: '@prefix-gap',
-        top: '@prefix-gap',
-        bottom: '@prefix-gap',
-        color: '#dark.75',
-        height: '(100% - (2 * @prefix-gap))',
-    },
-});
+const DEFAULT_STYLES = {
+    position: 'absolute',
+    display: 'grid',
+    placeContent: 'stretch',
+    placeItems: 'center',
+    flow: 'column',
+    gap: 0,
+    left: '@prefix-gap',
+    top: '@prefix-gap',
+    bottom: '@prefix-gap',
+    color: '#dark.75',
+    height: '(100% - (2 * @prefix-gap))',
+};
 export const Prefix = forwardRef((allProps, outerRef) => {
     let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;
-    const styles = extractStyles(props, CONTAINER_STYLES);
+    const styles = extractStyles(props, CONTAINER_STYLES, DEFAULT_STYLES);
     const ref = useCombinedRefs(outerRef);
     useEffect(() => {
         if ((ref === null || ref === void 0 ? void 0 : ref.current) && onWidthChange) {
             onWidthChange(ref.current.offsetWidth);
         }
     }, [children, ref, onWidthChange]);
-    return (_jsx(PrefixElement, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref, style: {
+    return (_jsx(Base, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref, style: {
             // @ts-ignore
             '--prefix-gap': parseStyle(outerGap).value,
         }, children: children }, void 0));

package/es/components/layout/Space.js

@@ -1,34 +1,30 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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';
-const SpaceElement = tasty({
-    styles: {
-        display: 'flex',
-        gap: true,
-        flow: {
-            '': 'row',
-            vertical: 'column',
-        },
-        alignItems: {
-            '': 'center',
-            vertical: 'stretch',
-        },
-    },
-});
+import { Base } from '../Base';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, } from '../../tasty';
+const DEFAULT_STYLES = {
+    display: 'flex',
+    gap: true,
+};
 export const Space = forwardRef(function Space(props, ref) {
-    const { mods, direction, ...otherProps } = props;
-    const styles = extractStyles(otherProps, CONTAINER_STYLES);
-    return (_jsx(SpaceElement, { ...filterBaseProps(otherProps, { eventProps: true }), mods: {
-            vertical: direction === 'vertical',
-            ...mods,
-        }, styles: styles, ref: ref }, void 0));
+    const flow = props.direction
+        ? props.direction === 'vertical'
+            ? 'column'
+            : 'row'
+        : props.flow || 'row';
+    const styles = extractStyles(props, CONTAINER_STYLES, {
+        ...DEFAULT_STYLES,
+        flow,
+        alignItems: flow === 'row' ? 'center' : 'stretch',
+    });
+    return (_jsx(Base, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
 });
 
         

package/es/components/layout/Suffix.js

@@ -1,40 +1,38 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useEffect } from 'react';
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, parseStyle, tasty, } from '../../tasty';
+import { Base } from '../Base';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, parseStyle, } from '../../tasty';
 import { useCombinedRefs } from '../../utils/react';
-const SuffixElement = tasty({
-    element: 'Suffix',
-    styles: {
-        position: 'absolute',
-        display: 'grid',
-        placeContent: 'stretch',
-        placeItems: 'center',
-        flow: 'column',
-        gap: 0,
-        right: '@suffix-gap',
-        top: '@suffix-gap',
-        bottom: '@suffix-gap',
-        color: '#dark.75',
-        height: '(100% - (2 * @suffix-gap))',
-    },
-});
+const DEFAULT_STYLES = {
+    position: 'absolute',
+    display: 'grid',
+    placeContent: 'stretch',
+    placeItems: 'center',
+    flow: 'column',
+    gap: 0,
+    right: '@suffix-gap',
+    top: '@suffix-gap',
+    bottom: '@suffix-gap',
+    color: '#dark.75',
+    height: '(100% - (2 * @suffix-gap))',
+};
 export const Suffix = forwardRef((allProps, outerRef) => {
     let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;
-    const styles = extractStyles(props, CONTAINER_STYLES);
+    const styles = extractStyles(props, CONTAINER_STYLES, DEFAULT_STYLES);
     const ref = useCombinedRefs(outerRef);
     useEffect(() => {
         if (ref && ref.current && onWidthChange) {
             onWidthChange(ref.current.offsetWidth);
         }
     }, [children, ref, onWidthChange]);
-    return (_jsx(SuffixElement, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref, style: {
+    return (_jsx(Base, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref, style: {
             '--suffix-gap': parseStyle(outerGap).value,
         }, children: children }, void 0));
 });

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

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

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

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