@veracity/vui 2.7.0 → 2.8.0-rc.1

package/dist/cjs/theme/defaultTheme.d.ts

@@ -828,19 +828,81 @@ declare const defaultTheme: {
             baseStyle: {};
             defaultProps: {
                 size: string;
+                variant: string;
             };
             sizes: {
+                xs: {
+                    item: {
+                        fontSize: number;
+                        lineHeight: string;
+                    };
+                    separator: {
+                        size: string;
+                    };
+                };
                 sm: {
-                    item: {};
+                    item: {
+                        fontSize: number;
+                        lineHeight: string;
+                    };
+                    separator: {
+                        size: string;
+                    };
                 };
                 md: {
-                    item: {};
+                    item: {
+                        fontSize: number;
+                        lineHeight: string;
+                    };
+                    separator: {
+                        size: string;
+                    };
                 };
                 lg: {
-                    item: {};
+                    item: {
+                        fontSize: number;
+                        lineHeight: string;
+                    };
+                    separator: {
+                        size: string;
+                    };
+                };
+            };
+            variants: {
+                dark: {
+                    item: {
+                        color: string;
+                    };
+                    main: {
+                        bg: string;
+                    };
+                    separator: {
+                        pathFill: string;
+                    };
+                };
+                white: {
+                    item: {
+                        color: string;
+                    };
+                    main: {
+                        bg: string;
+                    };
+                    separator: {
+                        pathFill: string;
+                    };
+                };
+                light: {
+                    item: {
+                        color: string;
+                    };
+                    main: {
+                        bg: string;
+                    };
+                    separator: {
+                        pathFill: string;
+                    };
                 };
             };
-            variants: {};
         };
         Button: {
             baseStyle: {};
@@ -2751,52 +2813,64 @@ declare const defaultTheme: {
             };
             parts: string[];
             sizes: {
-                sm: {
-                    icon: {
-                        size: string;
-                    };
+                xl: {
                     item: {
                         fontSize: string;
-                        h: number;
+                        height: number;
+                        lineHeight: string;
                         py: string;
                     };
-                };
-                md: {
                     icon: {
-                        size: string;
+                        height: number;
+                        width: number;
+                    };
+                };
+            };
+            variants: {
+                default: {
+                    container: {
+                        bg: string;
+                    };
+                    firstLevelItem: {
+                        bg: string;
+                        color: string;
+                        activeColor: string;
+                        activeBg: string;
+                        hoverBg: string;
                     };
                     item: {
-                        fontSize: string;
-                        h: number;
-                        py: string;
+                        bg: string;
+                        color: string;
+                        activeColor: string;
+                        activeBg: string;
+                        hoverBg: string;
+                        selectedBg: string;
+                        px: number;
                     };
                 };
-                lg: {
-                    item: {
-                        fontSize: string;
-                        h: number;
-                        py: string;
+                dark: {
+                    container: {
+                        bg: string;
+                        color: string;
                     };
-                    icon: {
-                        size: string;
+                    firstLevelItem: {
+                        bg: string;
+                        color: string;
+                        activeBg: string;
+                        activeColor: string;
+                        hoverBg: string;
+                        hoverColor: string;
                     };
-                };
-                xl: {
                     item: {
-                        fontSize: string;
-                        h: number;
-                        py: string;
-                    };
-                    icon: {
-                        scale: number;
+                        bg: string;
+                        color: string;
+                        activeBg: string;
+                        activeColor: string;
+                        hoverBg: string;
+                        hoverColor: string;
                     };
                 };
             };
-            variants: {
-                default: (props: import("..").Dict<any>) => {
-                    item: import("..").Dict<any>;
-                };
-            };
         };
     };
 };

package/dist/cjs/theme/defaultTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGjB,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGjB,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/cjs/tree/theme.d.ts

@@ -1,7 +1,3 @@
-import { Dict } from '../utils';
-declare function variantDefault(props: Dict): {
-    item: Dict<any>;
-};
 declare const _default: {
     baseStyle: {};
     defaultProps: {
@@ -10,50 +6,64 @@ declare const _default: {
     };
     parts: string[];
     sizes: {
-        sm: {
-            icon: {
-                size: string;
-            };
+        xl: {
             item: {
                 fontSize: string;
-                h: number;
+                height: number;
+                lineHeight: string;
                 py: string;
             };
-        };
-        md: {
             icon: {
-                size: string;
+                height: number;
+                width: number;
+            };
+        };
+    };
+    variants: {
+        default: {
+            container: {
+                bg: string;
+            };
+            firstLevelItem: {
+                bg: string;
+                color: string;
+                activeColor: string;
+                activeBg: string;
+                hoverBg: string;
             };
             item: {
-                fontSize: string;
-                h: number;
-                py: string;
+                bg: string;
+                color: string;
+                activeColor: string;
+                activeBg: string;
+                hoverBg: string;
+                selectedBg: string;
+                px: number;
             };
         };
-        lg: {
-            item: {
-                fontSize: string;
-                h: number;
-                py: string;
+        dark: {
+            container: {
+                bg: string;
+                color: string;
             };
-            icon: {
-                size: string;
+            firstLevelItem: {
+                bg: string;
+                color: string;
+                activeBg: string;
+                activeColor: string;
+                hoverBg: string;
+                hoverColor: string;
             };
-        };
-        xl: {
             item: {
-                fontSize: string;
-                h: number;
-                py: string;
-            };
-            icon: {
-                scale: number;
+                bg: string;
+                color: string;
+                activeBg: string;
+                activeColor: string;
+                hoverBg: string;
+                hoverColor: string;
             };
         };
     };
-    variants: {
-        default: typeof variantDefault;
-    };
 };
 export default _default;
 //# sourceMappingURL=theme.d.ts.map

package/dist/cjs/tree/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/tree/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,iBAAS,cAAc,CAAC,KAAK,EAAE,IAAI;;EASlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DD,wBAMC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/tree/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEA,wBAMC"}

package/dist/cjs/tree/theme.js

@@ -1,65 +1,70 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-function variantDefault(props) {
-    const item = {
-        activeBg: 'skyBlue.30',
-        hoverBg: 'skyBlue.20',
-        selectedBg: 'skyBlue.10',
-        px: 2
-    };
-    return { item };
-}
 const baseStyle = {};
 const defaultProps = {
-    size: 'md',
+    size: 'xl',
     variant: 'default'
 };
-const parts = ['container', 'icon', 'item', 'text'];
+const parts = ['container', 'icon', 'firstLevelItem', 'item', 'text'];
 const sizes = {
-    sm: {
-        icon: {
-            size: 'xs'
-        },
+    xl: {
         item: {
             fontSize: 'md',
-            h: 32,
-            py: '3px'
-        }
-    },
-    md: {
+            height: 48,
+            lineHeight: '24px',
+            py: '12px'
+        },
         icon: {
-            size: 'sm'
+            height: 18,
+            width: 18
+        }
+    }
+};
+const variants = {
+    default: {
+        container: {
+            bg: 'white'
+        },
+        firstLevelItem: {
+            bg: 'white',
+            color: 'seaBlue.main',
+            activeColor: 'seaBlue.main',
+            activeBg: 'skyBlue.85',
+            hoverBg: 'skyBlue.80' // '#A6DEF2'
         },
         item: {
-            fontSize: 'md',
-            h: 40,
-            py: '5px'
+            bg: 'white',
+            color: 'seaBlue.main',
+            activeColor: 'seaBlue.main',
+            activeBg: 'skyBlue.85',
+            hoverBg: 'skyBlue.80',
+            selectedBg: 'skyBlue.10',
+            px: 2
         }
     },
-    lg: {
-        item: {
-            fontSize: 'md',
-            h: 48,
-            py: '7px'
+    dark: {
+        container: {
+            bg: 'darkBlue.main',
+            color: 'white'
         },
-        icon: {
-            size: 'md'
-        }
-    },
-    xl: {
-        item: {
-            fontSize: 'lg',
-            h: 56,
-            py: '9px'
+        firstLevelItem: {
+            bg: 'darkBlue.main',
+            color: 'white',
+            activeBg: 'darkBlue.25',
+            activeColor: 'seaBlue.main',
+            hoverBg: 'darkBlue.25',
+            hoverColor: 'white'
         },
-        icon: {
-            scale: 2
+        item: {
+            bg: 'skyBlue.97',
+            color: 'seaBlue.main',
+            activeBg: 'skyBlue.85',
+            activeColor: 'seaBlue.main',
+            hoverBg: 'skyBlue.80',
+            hoverColor: 'seaBlue.main'
         }
     }
 };
-const variants = {
-    default: variantDefault
-};
 exports.default = {
     baseStyle,
     defaultProps,

package/dist/cjs/tree/tree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["../../../src/tree/tree.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAGnE,OAAO,EAA6B,SAAS,EAAE,MAAM,cAAc,CAAA;AACnE,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,QAAQ,MAAM,YAAY,CAAA;AAGjC,eAAO,MAAM,QAAQ,+HAKpB,CAAA;AAED,+GAA+G;AAC/G,eAAO,MAAM,IAAI;UA4FT,eAAe;UACf,eAAe;UACf,eAAe;CACtB,CAAA;AAMD,eAAe,IAAI,CAAA"}
+{"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["../../../src/tree/tree.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAGnE,OAAO,EAA6B,SAAS,EAAE,MAAM,cAAc,CAAA;AACnE,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,QAAQ,MAAM,YAAY,CAAA;AAGjC,eAAO,MAAM,QAAQ,+HAKpB,CAAA;AAED,+GAA+G;AAC/G,eAAO,MAAM,IAAI;UAsFT,eAAe;UACf,eAAe;UACf,eAAe;CACtB,CAAA;AAMD,eAAe,IAAI,CAAA"}

package/dist/cjs/tree/tree.js

@@ -54,10 +54,12 @@ exports.TreeBase = core_1.styled.divBox `
 `;
 /** Displays a tree of tree link items and optional heading. Exposes some props to the children via context. */
 exports.Tree = (0, core_1.vui)((props, ref) => {
-    const { activeItemId, children, className, iconCollapse = 'falMinus', iconExpand = 'falPlus', items, onClickItem, size, variant } = props, rest = __rest(props, ["activeItemId", "children", "className", "iconCollapse", "iconExpand", "items", "onClickItem", "size", "variant"]);
+    const { activeItemId, children, className, iconCollapse, iconExpand, items, onClickItem, size, variant } = props, rest = __rest(props, ["activeItemId", "children", "className", "iconCollapse", "iconExpand", "items", "onClickItem", "size", "variant"]);
     const styles = (0, core_1.useStyleConfig)('Tree', props);
     const { itemsInternal, setItemsInternal, activeItemIndex, setActiveItemIndex } = (0, useTreeState_1.useTreeState)(activeItemId);
     const context = (0, react_1.useMemo)(() => (0, utils_1.filterUndefined)({ size, variant }), [size, variant]);
+    const iconCollapseInternal = iconCollapse ? iconCollapse : variant === 'default' ? 'falAngleRight' : 'falMinus';
+    const iconExpandInternal = iconExpand ? iconExpand : variant === 'default' ? 'falAngleDown' : 'falPlus';
     const transformChildrenToItems = (children) => {
         const t = [];
         if (children) {
@@ -107,7 +109,7 @@ exports.Tree = (0, core_1.vui)((props, ref) => {
     return (react_1.default.createElement(context_1.TreeProvider, { value: context },
         react_1.default.createElement(exports.TreeBase, Object.assign({ className: (0, utils_1.cs)('vui-tree', className), ref: ref }, styles.container, rest), itemsInternal === null || itemsInternal === void 0 ? void 0 : itemsInternal.map((_a, index) => {
             var { id, isActive } = _a, props = __rest(_a, ["id", "isActive"]);
-            return (react_1.default.createElement(treeItem_1.default, Object.assign({ activeItemIndex: activeItemIndex, iconCollapse: iconCollapse, iconExpand: iconExpand, id: id, isActive: activeItemIndex ? activeItemIndex === id : false, key: id !== null && id !== void 0 ? id : index, onClickTreeItem: onClickTreeItem }, props)));
+            return (react_1.default.createElement(treeItem_1.default, Object.assign({ activeItemIndex: activeItemIndex, iconCollapse: iconCollapseInternal, iconExpand: iconExpandInternal, id: id, isActive: isActive ? isActive : activeItemIndex ? activeItemIndex === id : false, isFirstLevel: true, key: id !== null && id !== void 0 ? id : index, onClickTreeItem: onClickTreeItem }, props)));
         }))));
 });
 exports.Tree.Icon = treeIcon_1.default;

package/dist/cjs/tree/tree.types.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode, ReactText } from 'react';
 import { IconProp } from '../icon';
 import { LinkProps } from '../link';
+import { ListItemProps } from '../list';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 import { PropsOf } from '../utils';
@@ -12,7 +13,7 @@ export declare type TreeProps = SystemProps & ThemingProps<'Tree'> & {
     /** Socket defining the expand icon on the left. */
     iconExpand?: IconProp;
     /** Socket displaying a tree of items. */
-    items?: PropsOf<'div', TreeItemProps>[] | JSX.Element;
+    items?: PropsOf<'li', TreeItemProps>[] | JSX.Element;
     /** Socket defining the size of the tree. */
     onClickItem?: (id: TreeItemId) => void;
 };
@@ -22,7 +23,7 @@ export declare type TreeOnToggleEvent = {
     id: TreeItemId;
     collapsed: boolean;
 };
-export declare type TreeItemProps = SystemProps & ThemingProps<'Tree'> & {
+export declare type TreeItemProps = ListItemProps & ThemingProps<'Tree'> & {
     activeItemId?: TreeItemId;
     /** internal, not exposed */
     activeItemIndex?: TreeItemId;
@@ -39,16 +40,22 @@ export declare type TreeItemProps = SystemProps & ThemingProps<'Tree'> & {
     /** Socket defining the expand icon on the left. */
     iconExpand?: IconProp;
     /** The children of this tree item. */
-    items?: PropsOf<'div', TreeItemProps>[];
+    items?: PropsOf<'li', TreeItemProps>[];
     children?: ReactNode;
     /** Collapsed state */
     isCollapsed?: boolean;
+    /** indicates if the item is first-level; if yes it can be styled differently */
+    isFirstLevel?: boolean;
     /** Displays item and its content in disabled state with appropriate styling. */
     disabled?: boolean;
     /** Displays item in selected state with appropriate styling. */
     isActive?: boolean;
     /** If provided, content is wrapper with a link and the props are provided to the element. */
     linkProps?: TreeItemLinkProps;
+    /** internal, padding left; if provided it will accumulate function of levels. */
+    propagatedPL?: number;
+    /** Socket defining the size of the padding increment. */
+    plUnit?: number;
     /** Socket displaying text within the item. */
     text: ReactText | JSX.Element;
     /** Collapse change state */

package/dist/cjs/tree/tree.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree.types.d.ts","sourceRoot":"","sources":["../../../src/tree/tree.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE5C,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAElC,oBAAY,SAAS,GAAG,WAAW,GACjC,YAAY,CAAC,MAAM,CAAC,GAAG;IACrB,gCAAgC;IAChC,YAAY,CAAC,EAAE,UAAU,CAAA;IACzB,qDAAqD;IACrD,YAAY,CAAC,EAAE,QAAQ,CAAA;IACvB,mDAAmD;IACnD,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,yCAAyC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,aAAa,CAAC,EAAE,GAAG,GAAG,CAAC,OAAO,CAAA;IACrD,4CAA4C;IAC5C,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,UAAU,KAAK,IAAI,CAAA;CACvC,CAAA;AAEH,oBAAY,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE,SAAS,CAAC,GAAG,MAAM,CAAA;AAEhE,oBAAY,UAAU,GAAG,MAAM,GAAG,MAAM,CAAA;AAExC,oBAAY,iBAAiB,GAAG;IAC9B,EAAE,EAAE,UAAU,CAAA;IACd,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,oBAAY,aAAa,GAAG,WAAW,GACrC,YAAY,CAAC,MAAM,CAAC,GAAG;IACrB,YAAY,CAAC,EAAE,UAAU,CAAA;IACzB,4BAA4B;IAC5B,eAAe,CAAC,EAAE,UAAU,CAAA;IAC5B,gBAAgB;IAChB,EAAE,EAAE,UAAU,CAAA;IACd,mEAAmE;IACnE,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,oDAAoD;IACpD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,kDAAkD;IAClD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,qDAAqD;IACrD,YAAY,CAAC,EAAE,QAAQ,CAAA;IACvB,mDAAmD;IACnD,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,sCAAsC;IACtC,KAAK,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,aAAa,CAAC,EAAE,CAAA;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,sBAAsB;IACtB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6FAA6F;IAC7F,SAAS,CAAC,EAAE,iBAAiB,CAAA;IAC7B,8CAA8C;IAC9C,IAAI,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAAA;IAC7B,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAC7C,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,UAAU,KAAK,IAAI,CAAA;CAC3C,CAAA"}
+{"version":3,"file":"tree.types.d.ts","sourceRoot":"","sources":["../../../src/tree/tree.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE5C,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AACnC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAElC,oBAAY,SAAS,GAAG,WAAW,GACjC,YAAY,CAAC,MAAM,CAAC,GAAG;IACrB,gCAAgC;IAChC,YAAY,CAAC,EAAE,UAAU,CAAA;IACzB,qDAAqD;IACrD,YAAY,CAAC,EAAE,QAAQ,CAAA;IACvB,mDAAmD;IACnD,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,yCAAyC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC,IAAI,EAAE,aAAa,CAAC,EAAE,GAAG,GAAG,CAAC,OAAO,CAAA;IACpD,4CAA4C;IAC5C,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,UAAU,KAAK,IAAI,CAAA;CACvC,CAAA;AAEH,oBAAY,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE,SAAS,CAAC,GAAG,MAAM,CAAA;AAEhE,oBAAY,UAAU,GAAG,MAAM,GAAG,MAAM,CAAA;AAExC,oBAAY,iBAAiB,GAAG;IAC9B,EAAE,EAAE,UAAU,CAAA;IACd,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,oBAAY,aAAa,GAAG,aAAa,GACvC,YAAY,CAAC,MAAM,CAAC,GAAG;IACrB,YAAY,CAAC,EAAE,UAAU,CAAA;IACzB,4BAA4B;IAC5B,eAAe,CAAC,EAAE,UAAU,CAAA;IAC5B,gBAAgB;IAChB,EAAE,EAAE,UAAU,CAAA;IACd,mEAAmE;IACnE,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,oDAAoD;IACpD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,kDAAkD;IAClD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,qDAAqD;IACrD,YAAY,CAAC,EAAE,QAAQ,CAAA;IACvB,mDAAmD;IACnD,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,sCAAsC;IACtC,KAAK,CAAC,EAAE,OAAO,CAAC,IAAI,EAAE,aAAa,CAAC,EAAE,CAAA;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,sBAAsB;IACtB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,gFAAgF;IAChF,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6FAA6F;IAC7F,SAAS,CAAC,EAAE,iBAAiB,CAAA;IAC7B,iFAAiF;IACjF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,8CAA8C;IAC9C,IAAI,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAAA;IAC7B,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAC7C,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,UAAU,KAAK,IAAI,CAAA;CAC3C,CAAA"}

package/dist/cjs/tree/treeItem.d.ts

@@ -1,8 +1,8 @@
 import { TreeItemProps } from './tree.types';
-export declare const TreeItemBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+export declare const TreeItemBase: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
 /**
  * Displays a tree item with text and optional icons. Can be shown as selected.
  */
-export declare const TreeItem: import("../core").VuiComponent<"div", TreeItemProps>;
+export declare const TreeItem: import("../core").VuiComponent<"li", TreeItemProps>;
 export default TreeItem;
 //# sourceMappingURL=treeItem.d.ts.map

package/dist/cjs/tree/treeItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"treeItem.d.ts","sourceRoot":"","sources":["../../../src/tree/treeItem.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAI5C,eAAO,MAAM,YAAY,+HAcxB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,sDAiJnB,CAAA;AAEF,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"treeItem.d.ts","sourceRoot":"","sources":["../../../src/tree/treeItem.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAK5C,eAAO,MAAM,YAAY,8HAKxB,CAAA;AAGD;;GAEG;AACH,eAAO,MAAM,QAAQ,qDAmLnB,CAAA;AAEF,eAAe,QAAQ,CAAA"}