@veracity/vui 2.17.2-beta.0 → 2.17.2-beta.1

package/dist/cjs/footer/footer.js

@@ -70,7 +70,7 @@ exports.Footer = (0, core_1.vui)((props, ref) => {
     });
     const downMd = (0, core_1.useDown)('md');
     const downLg = (0, core_1.useDown)('lg');
-    return ((0, jsx_runtime_1.jsx)(context_1.FooterProvider, { value: context, children: (0, jsx_runtime_1.jsxs)(exports.FooterBase, Object.assign({ className: (0, utils_1.cs)('vui-footer', isApplication ? 'vui-footer-app' : '', className), px: isApplication ? '40px' : 3, py: isSlim ? (downMd ? '16px' : '9px') : 5, role: "contentinfo" }, styles.container, { ref: ref }, rest, { children: [isApplication && ((0, jsx_runtime_1.jsx)(footerContent_1.default, { alignContent: "center", alignItems: "center", maxW: "100%", children: (0, jsx_runtime_1.jsxs)(footerRow_1.default, { alignContent: "space-between", w: 1, children: [(0, jsx_runtime_1.jsx)(box_1.Box, { alignItems: "self-start", columnGap: 3, flex: { xs: '0 0 100%', sm: '0 0 100%', md: '0 0 100%', lg: '0 0 50%' }, py: { xs: 1, sm: 1, md: 1.25, lg: 1.5 }, wrap: true, children: applicationLinks === null || applicationLinks === void 0 ? void 0 : applicationLinks.map((link, index) => ((0, jsx_runtime_1.jsxs)(box_1.Box, { flex: { xs: '0 0 50%', sm: '0 0 auto' }, children: [link.items && ((0, jsx_runtime_1.jsxs)(menu_1.default, Object.assign({ isLazy: false, offset: [-16, 9], placement: "top-start", size: "lg" }, rest, { children: [(0, jsx_runtime_1.jsx)(menu_1.default.Button, Object.assign({ as: link_1.Link, className: "vui-footerLink-trigger", pt: "3px", role: "button", text: link.text, title: link.text }, styles.link, rest)), (0, jsx_runtime_1.jsx)(menu_1.default.List, Object.assign({ maxH: 400, right: 0, w: 320 }, styles.list, { children: link.items.map(({ text, url }, index) => ((0, jsx_runtime_1.jsx)(menu_1.default.Item, Object.assign({ isTruncated: true, linkProps: { href: url }, text: text, title: text }, styles.item), index))) }))] }))), !link.items && (0, jsx_runtime_1.jsx)(footerLink_1.default, Object.assign({}, link, { href: link.url }))] }, index))) }), downLg && (0, jsx_runtime_1.jsx)(divider_1.Divider, { borderColor: "sandstone.main", mb: 0.5, mt: 1, w: 1 }), (0, jsx_runtime_1.jsxs)(box_1.Box, { centerV: true, columnGap: 3, flex: { xs: '0 0 100%', sm: '0 0 100%', md: '0 0 100%', lg: '0 0 50%' }, justifyContent: { sm: 'center', lg: 'flex-end' }, py: { xs: 1, sm: 1, md: 1.25, lg: 1.5 }, wrap: true, children: [applicationStaticItems === null || applicationStaticItems === void 0 ? void 0 : applicationStaticItems.map((text, index) => ((0, jsx_runtime_1.jsx)(box_1.Box, { children: (0, jsx_runtime_1.jsx)(t_1.T, { size: "sm", children: text }) }, index))), isDNV ? ((0, jsx_runtime_1.jsx)(box_1.Box, { children: (0, jsx_runtime_1.jsx)(t_1.T, { size: "sm", children: "@ DNV AS 2021" }) })) : ((0, jsx_runtime_1.jsx)(box_1.Box, { children: (0, jsx_runtime_1.jsxs)(t_1.T, { size: "sm", children: [(0, jsx_runtime_1.jsx)(t_1.T, { weight: "demi", children: "Veracity by DNV" }), ", DNV AS"] }) })), (0, jsx_runtime_1.jsxs)(box_1.Box, { children: [applicationSocialLinks === null || applicationSocialLinks === void 0 ? void 0 : applicationSocialLinks.map((link, index) => ((0, jsx_runtime_1.jsx)(link_1.Link, Object.assign({ "aria-label": link.text, fontWeight: "demi", href: link.url, iconLeft: (0, jsx_runtime_1.jsx)(link_1.Link.Icon, { name: `cubCircle${link.text}`, radius: "50%", size: "xs" }), isExternal: true, mr: 1, size: { _: 'sm', md: 'md' } }, styles.link), index))), (0, jsx_runtime_1.jsx)(link_1.Link, Object.assign({ fontWeight: "demi", href: linkedIn !== null && linkedIn !== void 0 ? linkedIn : footerTrademark_1.defaultLinkedInUrl, isExternal: true, size: { _: 'sm', md: 'md' } }, styles.link, { children: (0, jsx_runtime_1.jsx)(footerHeading_1.default, { fontSize: "16px", mb: 0, text: "Follow us" }) }))] })] })] }) })), !isApplication && isSlim && ((0, jsx_runtime_1.jsx)(footerContent_1.default, { alignContent: "center", alignItems: "center", maxW: { xs: 343, sm: 305, md: 720, lg: 975 }, children: (0, jsx_runtime_1.jsxs)(footerRow_1.default, { children: [slimLinks.map((link, index) => {
+    return ((0, jsx_runtime_1.jsx)(context_1.FooterProvider, { value: context, children: (0, jsx_runtime_1.jsxs)(exports.FooterBase, Object.assign({ className: (0, utils_1.cs)('vui-footer', isApplication ? 'vui-footer-app' : '', className), px: isApplication ? '40px' : 3, py: isSlim ? (downMd ? '16px' : '9px') : 5, role: "contentinfo" }, styles.container, { ref: ref }, rest, { children: [isApplication && ((0, jsx_runtime_1.jsx)(footerContent_1.default, { alignContent: "center", alignItems: "center", maxW: "100%", children: (0, jsx_runtime_1.jsxs)(footerRow_1.default, { alignContent: "space-between", w: 1, children: [(0, jsx_runtime_1.jsx)(box_1.Box, { alignItems: "self-start", columnGap: 3, flex: { xs: '0 0 100%', sm: '0 0 100%', md: '0 0 100%', lg: '0 0 50%' }, py: { xs: 1, sm: 1, md: 1.25, lg: 1.5 }, wrap: true, children: applicationLinks === null || applicationLinks === void 0 ? void 0 : applicationLinks.map((link, index) => ((0, jsx_runtime_1.jsxs)(box_1.Box, { flex: { xs: '0 0 50%', sm: '0 0 auto' }, children: [link.items && ((0, jsx_runtime_1.jsxs)(menu_1.default, Object.assign({ isLazy: false, offset: [-16, 9], placement: "top-start", size: "lg" }, rest, { children: [(0, jsx_runtime_1.jsx)(menu_1.default.Button, Object.assign({ as: link_1.Link, className: "vui-footerLink-trigger", pt: "3px", role: "button", text: link.text, title: link.text }, styles.link, rest)), (0, jsx_runtime_1.jsx)(menu_1.default.List, Object.assign({ maxH: 400, right: 0, w: 320 }, styles.list, { children: link.items.map(({ text, url }, index) => ((0, jsx_runtime_1.jsx)(menu_1.default.Item, Object.assign({ isTruncated: true, linkProps: { href: url }, text: text, title: text }, styles.item), index))) }))] }))), !link.items && (0, jsx_runtime_1.jsx)(footerLink_1.default, Object.assign({}, link, { href: link.url }))] }, index))) }), downLg && (0, jsx_runtime_1.jsx)(divider_1.Divider, { borderColor: "sandstone.main", mb: 0.5, mt: 1, w: 1 }), (0, jsx_runtime_1.jsxs)(box_1.Box, { centerV: true, columnGap: 3, flex: { xs: '0 0 100%', sm: '0 0 100%', md: '0 0 100%', lg: '0 0 50%' }, justifyContent: { sm: 'center', lg: 'flex-end' }, py: { xs: 1, sm: 1, md: 1.25, lg: 1.5 }, wrap: true, children: [applicationStaticItems === null || applicationStaticItems === void 0 ? void 0 : applicationStaticItems.map((text, index) => ((0, jsx_runtime_1.jsx)(box_1.Box, { children: (0, jsx_runtime_1.jsx)(t_1.T, { size: "sm", children: text }) }, index))), isDNV ? ((0, jsx_runtime_1.jsx)(box_1.Box, { children: (0, jsx_runtime_1.jsx)(t_1.T, { size: "sm", children: "\u00A9 DNV AS 2021" }) })) : ((0, jsx_runtime_1.jsx)(box_1.Box, { children: (0, jsx_runtime_1.jsxs)(t_1.T, { size: "sm", children: [(0, jsx_runtime_1.jsx)(t_1.T, { weight: "demi", children: "Veracity by DNV" }), ", DNV AS"] }) })), (0, jsx_runtime_1.jsxs)(box_1.Box, { children: [applicationSocialLinks === null || applicationSocialLinks === void 0 ? void 0 : applicationSocialLinks.map((link, index) => ((0, jsx_runtime_1.jsx)(link_1.Link, Object.assign({ "aria-label": link.text, fontWeight: "demi", href: link.url, iconLeft: (0, jsx_runtime_1.jsx)(link_1.Link.Icon, { name: `cubCircle${link.text}`, radius: "50%", size: "xs" }), isExternal: true, mr: 1, size: { _: 'sm', md: 'md' } }, styles.link), index))), (0, jsx_runtime_1.jsx)(link_1.Link, Object.assign({ fontWeight: "demi", href: linkedIn !== null && linkedIn !== void 0 ? linkedIn : footerTrademark_1.defaultLinkedInUrl, isExternal: true, size: { _: 'sm', md: 'md' } }, styles.link, { children: (0, jsx_runtime_1.jsx)(footerHeading_1.default, { fontSize: "16px", mb: 0, text: "Follow us" }) }))] })] })] }) })), !isApplication && isSlim && ((0, jsx_runtime_1.jsx)(footerContent_1.default, { alignContent: "center", alignItems: "center", maxW: { xs: 343, sm: 305, md: 720, lg: 975 }, children: (0, jsx_runtime_1.jsxs)(footerRow_1.default, { children: [slimLinks.map((link, index) => {
                                 /** if the screen is small drop one specific link */
                                 if (downLg && (link === null || link === void 0 ? void 0 : link.id) === 'support')
                                     return;

package/dist/cjs/tabs/tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../src/tabs/tab.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAEvC,eAAO,MAAM,OAAO,+HAEnB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,GAAG,iDAId,CAAA;AAIF,eAAe,GAAG,CAAA"}
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../src/tabs/tab.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAEvC,eAAO,MAAM,OAAO,+HAEnB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,GAAG,iDAId,CAAA;AAIF,eAAe,GAAG,CAAA"}

package/dist/cjs/tabs/tabs.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-import { TabsProps } from './tabs.types';
+import { TabId, TabsProps } from './tabs.types';
 export declare const TabsBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").AnimationProps & import("..").BackgroundColorProps & import("..").BorderProps & import("..").BorderTopProps & import("..").BorderRightProps & import("..").BorderBottomProps & import("..").BorderLeftProps & import("..").BorderColorProps & import("..").BorderTopColorProps & import("..").BorderRightColorProps & import("..").BorderBottomColorProps & import("..").BorderLeftColorProps & import("..").BorderWidthProps & import("..").BorderTopWidthProps & import("..").BorderRightWidthProps & import("..").BorderBottomWidthProps & import("..").BorderLeftWidthProps & import("..").BorderStyleProps & import("..").BorderRadiusProps & import("..").OutlineProps & import("..").OutlineColorProps & import("..").OutlineWidthProps & import("..").OutlineStyleProps & import("..").DivideXProps & import("..").DivideYProps & import("..").DivideXReverseProps & import("..").DivideYReverseProps & import("..").DivideColorProps & import("..").DivideStyleProps & import("..").RingProps & import("..").RingColorProps & import("..").OpacityProps & import("..").BoxShadowProps & import("..").TextShadowProps & import("..").DisplayProps & import("..").AlignItemsProps & import("..").AlignContentProps & import("..").JustifyContentProps & import("..").JustifyItemsProps & import("..").FlexWrapProps & import("..").FlexGrowProps & import("..").FlexShrinkProps & import("..").FlexBasisProps & import("..").FlexDirectionProps & import("..").FlexProps & import("..").JustifySelfProps & import("..").AlignSelfProps & import("..").OrderProps & import("../system/flexboxGrids").RowProps & import("../system/flexboxGrids").ColProps & import("../system/grids").GapProps & import("../system/grids").ColumnGapProps & import("../system/grids").RowGapProps & import("../system/grids").GridColumnProps & import("../system/grids").GridRowProps & import("../system/grids").GridAutoFlowProps & import("../system/grids").GridAutoColumnsProps & import("../system/grids").GridAutoRowsProps & import("../system/grids").GridTemplateColumnsProps & import("../system/grids").GridTemplateRowsProps & import("../system/grids").GridTemplateAreasProps & import("../system/grids").GridAreaProps & import("..").AppearanceProps & import("..").CursorProps & import("..").PointerEventsProps & import("..").ResizeProps & import("..").UserSelectProps & import("..").IsTruncatedProps & import("..").FloatProps & import("..").BoxSizingProps & import("..").OverflowProps & import("..").OverflowXProps & import("..").OverflowYProps & import("..").PositionProps & import("..").ZIndexProps & import("..").TopProps & import("..").RightProps & import("..").BottomProps & import("..").LeftProps & import("..").VisibilityProps & import("..").OverscrollBehaviorProps & import("..").ObjectFitProps & import("..").MaxLinesProps & import("..").WidthProps & import("..").HeightProps & import("..").MaxWidthProps & import("..").MaxHeightProps & import("..").MinWidthProps & import("..").MinHeightProps & import("..").MarginProps & import("..").MarginTopProps & import("..").MarginRightProps & import("..").MarginBottomProps & import("..").MarginLeftProps & import("..").MarginXProps & import("..").MarginYProps & import("..").PaddingProps & import("..").PaddingTopProps & import("..").PaddingRightProps & import("..").PaddingBottomProps & import("..").PaddingLeftProps & import("..").PaddingXProps & import("..").PaddingYProps & import("..").SpaceXProps & import("..").SpaceYProps & import("..").SpaceXReverseProps & import("..").SpaceYReverseProps & import("../system/tables").BorderCollapseProps & import("../system/tables").TableLayoutProps & import("..").TransformProps & import("..").TransformOriginProps & import("..").TranslateXProps & import("..").TranslateYProps & import("..").RotateProps & import("..").SkewXProps & import("..").SkewYProps & import("..").ScaleProps & import("..").ScaleXProps & import("..").ScaleYProps & import("..").TransitionProps & import("..").TransitionPropertyProps & import("..").TransitionDurationProps & import("..").TransitionTimingFunctionProps & import("..").TransitionDelayProps & import("..").FontFamilyProps & import("..").FontSizeProps & import("..").FontStyleProps & import("..").FontWeightProps & import("..").LineHeightProps & import("..").ColorProps & import("..").TextTransformProps & import("..").TextDecorationProps & import("..").TextAlignProps & import("..").VerticalAlignProps & import("..").LetterSpacingProps & import("..").WhiteSpaceProps & import("..").TextOverflowProps & import("..").ListStyleTypeProps & import("..").ListStylePositionProps & import("..").WordBreakProps & import("..").ThemingProps<"Tabs"> & import("../core").ChildrenProp & {
     actions?: React.ReactNode;
-    activeTabId?: number | undefined;
+    activeTabId?: TabId | undefined;
     showBorder?: boolean | undefined;
-    onTabClick?: ((id: number) => void) | undefined;
+    onTabClick?: ((tabId: TabId) => void) | undefined;
 }, never>;
 /**
  * Implements Tabs navigation to switch between views. Implements Tabs navigation to switch between views. **Do not use as a top menu in a page!**

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAA;AAMhE,OAAO,EAAY,SAAS,EAAE,MAAM,cAAc,CAAA;AAIlD,eAAO,MAAM,QAAQ;;;;;SAEpB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,kDAgEf,CAAA;AAIF,eAAe,IAAI,CAAA"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAA;AAMhE,OAAO,EAAE,KAAK,EAA2B,SAAS,EAAE,MAAM,cAAc,CAAA;AAIxE,eAAO,MAAM,QAAQ;;;;;SAEpB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,kDAmEf,CAAA;AAIF,eAAe,IAAI,CAAA"}

package/dist/cjs/tabs/tabs.js

@@ -32,18 +32,20 @@ exports.TabsBase = core_1.styled.divBox `
 exports.Tabs = (0, core_1.vui)((props, ref) => {
     const { actions, activeTabId, showBorder = true, children, className, size, onTabClick } = props, rest = __rest(props, ["actions", "activeTabId", "showBorder", "children", "className", "size", "onTabClick"]);
     const styles = (0, core_1.useStyleConfig)('Tabs', props);
-    const { tabs, setTabs, activeTabIndex, setActiveTabIndex, animationDirection, setAnimationDirection } = (0, useTabsState_1.useTabsState)('fadeIn', activeTabId);
+    const { tabs, setTabs, activeTabIndex, setActiveTabIndex, animationDirection, setAnimationDirection } = (0, useTabsState_1.useTabsState)('fadeIn', 0);
     (0, react_1.useEffect)(() => {
-        const t = [];
+        const _tabs = [];
         if (children) {
             ;
             react_1.Children.toArray(children).forEach((child, index) => {
                 var _a;
                 if ((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.title)
-                    t.push({
-                        id: index,
+                    _tabs.push({
+                        id: child.props.id,
+                        index: index,
                         title: child.props.title,
                         icon: child.props.icon,
+                        className: child.props.className,
                         children: child.props.children,
                         disabled: child.props.disabled,
                         onClick: child.props.onClick,
@@ -51,23 +53,25 @@ exports.Tabs = (0, core_1.vui)((props, ref) => {
                     });
             });
         }
-        setTabs(t);
-        if (activeTabId !== undefined && (tabs === null || tabs === void 0 ? void 0 : tabs[activeTabId])) {
-            setActiveTabIndex(activeTabId);
+        setTabs(_tabs);
+        if (activeTabId !== undefined) {
+            const tab = _tabs.find((t) => (t === null || t === void 0 ? void 0 : t.id) === activeTabId || (t === null || t === void 0 ? void 0 : t.index) === activeTabId);
+            if (tab === null || tab === void 0 ? void 0 : tab.index)
+                setActiveTabIndex(tab.index);
         }
     }, [children, activeTabId]);
-    const onNavItemClick = (id, e) => {
+    const onNavItemClick = (tabIndex, e) => {
         var _a;
-        const tab = tabs.find(t => t.id === id);
-        if ((tab === null || tab === void 0 ? void 0 : tab.children) !== undefined) {
-            setAnimationDirection(id < activeTabIndex ? 'fadeLeft' : 'fadeRight');
-            setActiveTabIndex(id);
-            onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(id);
+        const tab = tabs.find(t => t.index === tabIndex);
+        if ((tab === null || tab === void 0 ? void 0 : tab.children) !== undefined && (tab === null || tab === void 0 ? void 0 : tab.index) !== undefined) {
+            setAnimationDirection(tab.index < activeTabIndex ? 'fadeLeft' : 'fadeRight');
+            setActiveTabIndex(tab.index);
+            onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(tab.id || tab.index);
         }
         (_a = tab === null || tab === void 0 ? void 0 : tab.onClick) === null || _a === void 0 ? void 0 : _a.call(tab, e);
     };
     const activeTab = tabs === null || tabs === void 0 ? void 0 : tabs[activeTabIndex];
-    return ((0, jsx_runtime_1.jsxs)(exports.TabsBase, Object.assign({ className: (0, utils_1.cs)('vui-tabs', className), ref: ref }, styles.container, rest, { children: [!!(tabs === null || tabs === void 0 ? void 0 : tabs.length) && ((0, jsx_runtime_1.jsx)(tabsNavBar_1.default, { actions: actions, activeNavItem: activeTabIndex, animationDirection: animationDirection, onNavItemClick: (id, e) => onNavItemClick(id, e), showBorder: showBorder, size: size, tabs: tabs })), (tabs === null || tabs === void 0 ? void 0 : tabs.length) ? ((0, jsx_runtime_1.jsx)(tab_1.default, { onClick: activeTab === null || activeTab === void 0 ? void 0 : activeTab.onClick, title: activeTab === null || activeTab === void 0 ? void 0 : activeTab.title, children: !(activeTab === null || activeTab === void 0 ? void 0 : activeTab.disabled) && (activeTab === null || activeTab === void 0 ? void 0 : activeTab.children) })) : ((0, jsx_runtime_1.jsx)(p_1.P, { p: 2, children: "Please specify Tabs." }))] })));
+    return ((0, jsx_runtime_1.jsxs)(exports.TabsBase, Object.assign({ className: (0, utils_1.cs)('vui-tabs', className), ref: ref }, styles.container, rest, { children: [!!(tabs === null || tabs === void 0 ? void 0 : tabs.length) && ((0, jsx_runtime_1.jsx)(tabsNavBar_1.default, { actions: actions, activeNavItem: activeTabIndex, animationDirection: animationDirection, onNavItemClick: (tabIndex, e) => onNavItemClick(tabIndex, e), showBorder: showBorder, size: size, tabs: tabs })), (tabs === null || tabs === void 0 ? void 0 : tabs.length) ? ((0, jsx_runtime_1.jsx)(tab_1.default, { onClick: activeTab === null || activeTab === void 0 ? void 0 : activeTab.onClick, title: activeTab === null || activeTab === void 0 ? void 0 : activeTab.title, children: !(activeTab === null || activeTab === void 0 ? void 0 : activeTab.disabled) && (activeTab === null || activeTab === void 0 ? void 0 : activeTab.children) })) : ((0, jsx_runtime_1.jsx)(p_1.P, { p: 2, children: "Please specify Tabs." }))] })));
 });
 exports.Tabs.displayName = 'Tabs';
 exports.default = exports.Tabs;

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

@@ -4,17 +4,18 @@ import { IconProp } from '../icon';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 export type AnimationDirection = 'fadeLeft' | 'fadeRight' | 'fadeIn';
+export type TabId = string | number;
 export type TabsSize = 'md' | 'sm' | 'lg' | 'xl' | 'xxl';
 export type NavBarIconSize = 'md' | 'xs' | 'sm' | 'lg' | 'xl' | undefined;
 export type TabsProps = SystemProps & ThemingProps<'Tabs'> & ChildrenProp & {
     actions?: ReactNode;
-    activeTabId?: number;
+    activeTabId?: TabId;
     showBorder?: boolean;
-    onTabClick?: (id: number) => void;
+    onTabClick?: (tabId: TabId) => void;
 };
 export type TabProps = SystemProps & ChildrenProp & {
     icon?: IconProp;
-    id?: number;
+    id?: TabId;
     title: ReactNode;
     disabled?: boolean;
     className?: string;
@@ -22,11 +23,14 @@ export type TabProps = SystemProps & ChildrenProp & {
     /** If provided, displays a remove button with this function as onClick. */
     onDelete?: (nativeEvent?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 };
+export type TabIndexProps = TabProps & {
+    index?: number;
+};
 export type TabNavBarProps = {
     actions?: ReactNode;
-    tabs: TabProps[];
-    onNavItemClick: (id: number, e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
-    activeNavItem?: number;
+    tabs: TabIndexProps[];
+    onNavItemClick: (tabIndex: number, e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
+    activeNavItem?: TabId;
     animationDirection?: AnimationDirection;
     showBorder?: boolean;
     size?: TabsSize;

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.types.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,CAAA;AAEpE,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAA;AACxD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;AAEzE,MAAM,MAAM,SAAS,GAAG,WAAW,GACjC,YAAY,CAAC,MAAM,CAAC,GACpB,YAAY,GAAG;IACb,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAEH,MAAM,MAAM,QAAQ,GAAG,WAAW,GAChC,YAAY,GAAG;IACb,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;IAC7E,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;CACnF,CAAA;AAEH,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;IACpF,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,CAAA"}
+{"version":3,"file":"tabs.types.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,CAAA;AACpE,MAAM,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAA;AACnC,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAA;AACxD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;AAEzE,MAAM,MAAM,SAAS,GAAG,WAAW,GACjC,YAAY,CAAC,MAAM,CAAC,GACpB,YAAY,GAAG;IACb,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,WAAW,CAAC,EAAE,KAAK,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACpC,CAAA;AAEH,MAAM,MAAM,QAAQ,GAAG,WAAW,GAChC,YAAY,GAAG;IACb,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,EAAE,CAAC,EAAE,KAAK,CAAA;IACV,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;IAC7E,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;CACnF,CAAA;AAEH,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,IAAI,EAAE,aAAa,EAAE,CAAA;IACrB,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;IAC1F,aAAa,CAAC,EAAE,KAAK,CAAA;IACrB,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,CAAA"}

package/dist/cjs/tabs/tabsNavBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabsNavBar.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabsNavBar.tsx"],"names":[],"mappings":"AASA,OAAO,EAAkB,cAAc,EAAY,MAAM,cAAc,CAAA;AAKvE,eAAO,MAAM,UAAU,uDAgFrB,CAAA;AAIF,eAAe,UAAU,CAAA"}
+{"version":3,"file":"tabsNavBar.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabsNavBar.tsx"],"names":[],"mappings":"AASA,OAAO,EAAiC,cAAc,EAAE,MAAM,cAAc,CAAA;AAK5E,eAAO,MAAM,UAAU,uDAgFrB,CAAA;AAIF,eAAe,UAAU,CAAA"}

package/dist/cjs/tabs/tabsNavBar.js

@@ -24,8 +24,8 @@ exports.TabsNavBar = (0, core_1.vui)((props, ref) => {
     const borderWidth = sizes[size !== null && size !== void 0 ? size : 'md'].tabsNavBar.borderWidth;
     const py = sizes[size !== null && size !== void 0 ? size : 'md'].tabsNavBar.py;
     const iconMarginRight = size === 'xxl' ? '16px' : '8px';
-    const isActive = (tab) => !tab.disabled && tab.id === activeNavItem;
-    return ((0, jsx_runtime_1.jsxs)(list_1.List, { alignItems: "end", borderBottom: showBorder ? `1px solid ${border}` : 'none', className: (0, utils_1.cs)('vui-tabsNavBar'), display: "flex", isInteractive: true, mb: "20px", ref: ref, w: 1, children: [(_b = tabs === null || tabs === void 0 ? void 0 : tabs.map) === null || _b === void 0 ? void 0 : _b.call(tabs, tab => ((0, jsx_runtime_1.jsxs)(list_1.ListItem, { activeBg: tab.disabled ? undefined : activeBg, bg: "white", className: `vui-tabsNavBarItem vui-tabsNavBarItem-${tab === null || tab === void 0 ? void 0 : tab.id}`, color: isActive(tab) ? main : color, disabled: tab.disabled, display: "inline-flex", fontSize: fontSize, fontWeight: 500, h: h, hoverBg: tab.disabled ? undefined : hover, onClick: e => onNavItemClick === null || onNavItemClick === void 0 ? void 0 : onNavItemClick(tab.id || 0, e), position: "relative", px: "16px", py: py, children: [(0, jsx_runtime_1.jsxs)(box_1.default, { alignItems: "center", children: [!!tab.icon && (0, jsx_runtime_1.jsx)(icon_1.Icon, { mr: iconMarginRight, name: tab.icon, size: iconSize }), tab.title] }), !!tab.onDelete && ((0, jsx_runtime_1.jsx)(tag_1.TagButton, { disabled: tab.disabled, hoverBg: "skyBlue.80", hoverColor: "seaBlue.main", isRound: false, ml: 1, onClick: e => { var _a; return (_a = tab === null || tab === void 0 ? void 0 : tab.onDelete) === null || _a === void 0 ? void 0 : _a.call(tab, e); }, title: "Delete" })), isActive(tab) && ((0, jsx_runtime_1.jsx)(box_1.default, { animation: animationDirection, bg: main, bottom: "-1px", h: borderWidth, left: 0, position: "absolute", w: 1, children: "\u00A0" }))] }, tab.id))), !!actions && ((0, jsx_runtime_1.jsx)(box_1.default, { ml: "auto", pb: 0.5, pr: 0.5, children: actions }))] }));
+    const isActive = (tab) => !tab.disabled && (tab === null || tab === void 0 ? void 0 : tab.index) === activeNavItem;
+    return ((0, jsx_runtime_1.jsxs)(list_1.List, { alignItems: "end", borderBottom: showBorder ? `1px solid ${border}` : 'none', className: (0, utils_1.cs)('vui-tabsNavBar'), display: "flex", isInteractive: true, mb: "20px", ref: ref, w: 1, children: [(_b = tabs === null || tabs === void 0 ? void 0 : tabs.map) === null || _b === void 0 ? void 0 : _b.call(tabs, tab => ((0, jsx_runtime_1.jsxs)(list_1.ListItem, { activeBg: tab.disabled ? undefined : activeBg, bg: "white", className: `vui-tabsNavBarItem vui-tabsNavBarItem-${tab === null || tab === void 0 ? void 0 : tab.id}`, color: isActive(tab) ? main : color, disabled: tab.disabled, display: "inline-flex", fontSize: fontSize, fontWeight: 500, h: h, hoverBg: tab.disabled ? undefined : hover, onClick: e => onNavItemClick === null || onNavItemClick === void 0 ? void 0 : onNavItemClick(tab.index || 0, e), position: "relative", px: "16px", py: py, children: [(0, jsx_runtime_1.jsxs)(box_1.default, { alignItems: "center", children: [!!tab.icon && (0, jsx_runtime_1.jsx)(icon_1.Icon, { mr: iconMarginRight, name: tab.icon, size: iconSize }), tab.title] }), !!tab.onDelete && ((0, jsx_runtime_1.jsx)(tag_1.TagButton, { disabled: tab.disabled, hoverBg: "skyBlue.80", hoverColor: "seaBlue.main", isRound: false, ml: 1, onClick: e => { var _a; return (_a = tab === null || tab === void 0 ? void 0 : tab.onDelete) === null || _a === void 0 ? void 0 : _a.call(tab, e); }, title: "Delete" })), isActive(tab) && ((0, jsx_runtime_1.jsx)(box_1.default, { animation: animationDirection, bg: main, bottom: "-1px", h: borderWidth, left: 0, position: "absolute", w: 1, children: "\u00A0" }))] }, tab.index))), !!actions && ((0, jsx_runtime_1.jsx)(box_1.default, { ml: "auto", px: 0.75, py: 0.5, children: actions }))] }));
 });
 exports.TabsNavBar.displayName = 'TabsNavBar';
 exports.default = exports.TabsNavBar;

package/dist/cjs/tabs/useTabsState.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { AnimationDirection, TabProps } from './tabs.types';
-export declare const useTabsState: (initialAnimation: AnimationDirection, activeTabId?: number) => {
-    tabs: TabProps[];
-    setTabs: import("react").Dispatch<import("react").SetStateAction<TabProps[]>>;
+import { AnimationDirection, TabIndexProps } from './tabs.types';
+export declare const useTabsState: (initialAnimation: AnimationDirection, tabIndex?: number) => {
+    tabs: TabIndexProps[];
+    setTabs: import("react").Dispatch<import("react").SetStateAction<TabIndexProps[]>>;
     activeTabIndex: number;
     setActiveTabIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
     animationDirection: AnimationDirection;

package/dist/cjs/tabs/useTabsState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTabsState.d.ts","sourceRoot":"","sources":["../../../src/tabs/useTabsState.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAE3D,eAAO,MAAM,YAAY,qBAAsB,kBAAkB,gBAAgB,MAAM;;;;;;;CAMtF,CAAA"}
+{"version":3,"file":"useTabsState.d.ts","sourceRoot":"","sources":["../../../src/tabs/useTabsState.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAEhE,eAAO,MAAM,YAAY,qBAAsB,kBAAkB,aAAa,MAAM;;;;;;;CAMnF,CAAA"}

package/dist/cjs/tabs/useTabsState.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTabsState = void 0;
 const react_1 = require("react");
-const useTabsState = (initialAnimation, activeTabId) => {
+const useTabsState = (initialAnimation, tabIndex) => {
     const [tabs, setTabs] = (0, react_1.useState)([]);
-    const [activeTabIndex, setActiveTabIndex] = (0, react_1.useState)(activeTabId !== null && activeTabId !== void 0 ? activeTabId : 0);
+    const [activeTabIndex, setActiveTabIndex] = (0, react_1.useState)(tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0);
     const [animationDirection, setAnimationDirection] = (0, react_1.useState)(initialAnimation);
     return { tabs, setTabs, activeTabIndex, setActiveTabIndex, animationDirection, setAnimationDirection };
 };

package/dist/esm/footer/footer.js

@@ -52,7 +52,7 @@ export const Footer = vui((props, ref) => {
     });
     const downMd = useDown('md');
     const downLg = useDown('lg');
-    return (_jsx(FooterProvider, { value: context, children: _jsxs(FooterBase, { className: cs('vui-footer', isApplication ? 'vui-footer-app' : '', className), px: isApplication ? '40px' : 3, py: isSlim ? (downMd ? '16px' : '9px') : 5, role: "contentinfo", ...styles.container, ref: ref, ...rest, children: [isApplication && (_jsx(FooterContent, { alignContent: "center", alignItems: "center", maxW: "100%", children: _jsxs(FooterRow, { alignContent: "space-between", w: 1, children: [_jsx(Box, { alignItems: "self-start", columnGap: 3, flex: { xs: '0 0 100%', sm: '0 0 100%', md: '0 0 100%', lg: '0 0 50%' }, py: { xs: 1, sm: 1, md: 1.25, lg: 1.5 }, wrap: true, children: applicationLinks?.map((link, index) => (_jsxs(Box, { flex: { xs: '0 0 50%', sm: '0 0 auto' }, children: [link.items && (_jsxs(Menu, { isLazy: false, offset: [-16, 9], placement: "top-start", size: "lg", ...rest, children: [_jsx(Menu.Button, { as: Link, className: "vui-footerLink-trigger", pt: "3px", role: "button", text: link.text, title: link.text, ...styles.link, ...rest }), _jsx(Menu.List, { maxH: 400, right: 0, w: 320, ...styles.list, children: link.items.map(({ text, url }, index) => (_jsx(Menu.Item, { isTruncated: true, linkProps: { href: url }, text: text, title: text, ...styles.item }, index))) })] })), !link.items && _jsx(FooterLink, { ...link, href: link.url })] }, index))) }), downLg && _jsx(Divider, { borderColor: "sandstone.main", mb: 0.5, mt: 1, w: 1 }), _jsxs(Box, { centerV: true, columnGap: 3, flex: { xs: '0 0 100%', sm: '0 0 100%', md: '0 0 100%', lg: '0 0 50%' }, justifyContent: { sm: 'center', lg: 'flex-end' }, py: { xs: 1, sm: 1, md: 1.25, lg: 1.5 }, wrap: true, children: [applicationStaticItems?.map((text, index) => (_jsx(Box, { children: _jsx(T, { size: "sm", children: text }) }, index))), isDNV ? (_jsx(Box, { children: _jsx(T, { size: "sm", children: "@ DNV AS 2021" }) })) : (_jsx(Box, { children: _jsxs(T, { size: "sm", children: [_jsx(T, { weight: "demi", children: "Veracity by DNV" }), ", DNV AS"] }) })), _jsxs(Box, { children: [applicationSocialLinks?.map((link, index) => (_jsx(Link, { "aria-label": link.text, fontWeight: "demi", href: link.url, iconLeft: _jsx(Link.Icon, { name: `cubCircle${link.text}`, radius: "50%", size: "xs" }), isExternal: true, mr: 1, size: { _: 'sm', md: 'md' }, ...styles.link }, index))), _jsx(Link, { fontWeight: "demi", href: linkedIn ?? defaultLinkedInUrl, isExternal: true, size: { _: 'sm', md: 'md' }, ...styles.link, children: _jsx(FooterHeading, { fontSize: "16px", mb: 0, text: "Follow us" }) })] })] })] }) })), !isApplication && isSlim && (_jsx(FooterContent, { alignContent: "center", alignItems: "center", maxW: { xs: 343, sm: 305, md: 720, lg: 975 }, children: _jsxs(FooterRow, { children: [slimLinks.map((link, index) => {
+    return (_jsx(FooterProvider, { value: context, children: _jsxs(FooterBase, { className: cs('vui-footer', isApplication ? 'vui-footer-app' : '', className), px: isApplication ? '40px' : 3, py: isSlim ? (downMd ? '16px' : '9px') : 5, role: "contentinfo", ...styles.container, ref: ref, ...rest, children: [isApplication && (_jsx(FooterContent, { alignContent: "center", alignItems: "center", maxW: "100%", children: _jsxs(FooterRow, { alignContent: "space-between", w: 1, children: [_jsx(Box, { alignItems: "self-start", columnGap: 3, flex: { xs: '0 0 100%', sm: '0 0 100%', md: '0 0 100%', lg: '0 0 50%' }, py: { xs: 1, sm: 1, md: 1.25, lg: 1.5 }, wrap: true, children: applicationLinks?.map((link, index) => (_jsxs(Box, { flex: { xs: '0 0 50%', sm: '0 0 auto' }, children: [link.items && (_jsxs(Menu, { isLazy: false, offset: [-16, 9], placement: "top-start", size: "lg", ...rest, children: [_jsx(Menu.Button, { as: Link, className: "vui-footerLink-trigger", pt: "3px", role: "button", text: link.text, title: link.text, ...styles.link, ...rest }), _jsx(Menu.List, { maxH: 400, right: 0, w: 320, ...styles.list, children: link.items.map(({ text, url }, index) => (_jsx(Menu.Item, { isTruncated: true, linkProps: { href: url }, text: text, title: text, ...styles.item }, index))) })] })), !link.items && _jsx(FooterLink, { ...link, href: link.url })] }, index))) }), downLg && _jsx(Divider, { borderColor: "sandstone.main", mb: 0.5, mt: 1, w: 1 }), _jsxs(Box, { centerV: true, columnGap: 3, flex: { xs: '0 0 100%', sm: '0 0 100%', md: '0 0 100%', lg: '0 0 50%' }, justifyContent: { sm: 'center', lg: 'flex-end' }, py: { xs: 1, sm: 1, md: 1.25, lg: 1.5 }, wrap: true, children: [applicationStaticItems?.map((text, index) => (_jsx(Box, { children: _jsx(T, { size: "sm", children: text }) }, index))), isDNV ? (_jsx(Box, { children: _jsx(T, { size: "sm", children: "\u00A9 DNV AS 2021" }) })) : (_jsx(Box, { children: _jsxs(T, { size: "sm", children: [_jsx(T, { weight: "demi", children: "Veracity by DNV" }), ", DNV AS"] }) })), _jsxs(Box, { children: [applicationSocialLinks?.map((link, index) => (_jsx(Link, { "aria-label": link.text, fontWeight: "demi", href: link.url, iconLeft: _jsx(Link.Icon, { name: `cubCircle${link.text}`, radius: "50%", size: "xs" }), isExternal: true, mr: 1, size: { _: 'sm', md: 'md' }, ...styles.link }, index))), _jsx(Link, { fontWeight: "demi", href: linkedIn ?? defaultLinkedInUrl, isExternal: true, size: { _: 'sm', md: 'md' }, ...styles.link, children: _jsx(FooterHeading, { fontSize: "16px", mb: 0, text: "Follow us" }) })] })] })] }) })), !isApplication && isSlim && (_jsx(FooterContent, { alignContent: "center", alignItems: "center", maxW: { xs: 343, sm: 305, md: 720, lg: 975 }, children: _jsxs(FooterRow, { children: [slimLinks.map((link, index) => {
                                 /** if the screen is small drop one specific link */
                                 if (downLg && link?.id === 'support')
                                     return;

package/dist/esm/tabs/tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../src/tabs/tab.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAEvC,eAAO,MAAM,OAAO,+HAEnB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,GAAG,iDAId,CAAA;AAIF,eAAe,GAAG,CAAA"}
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../src/tabs/tab.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAEvC,eAAO,MAAM,OAAO,+HAEnB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,GAAG,iDAId,CAAA;AAIF,eAAe,GAAG,CAAA"}

package/dist/esm/tabs/tabs.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-import { TabsProps } from './tabs.types';
+import { TabId, TabsProps } from './tabs.types';
 export declare const TabsBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").AnimationProps & import("..").BackgroundColorProps & import("..").BorderProps & import("..").BorderTopProps & import("..").BorderRightProps & import("..").BorderBottomProps & import("..").BorderLeftProps & import("..").BorderColorProps & import("..").BorderTopColorProps & import("..").BorderRightColorProps & import("..").BorderBottomColorProps & import("..").BorderLeftColorProps & import("..").BorderWidthProps & import("..").BorderTopWidthProps & import("..").BorderRightWidthProps & import("..").BorderBottomWidthProps & import("..").BorderLeftWidthProps & import("..").BorderStyleProps & import("..").BorderRadiusProps & import("..").OutlineProps & import("..").OutlineColorProps & import("..").OutlineWidthProps & import("..").OutlineStyleProps & import("..").DivideXProps & import("..").DivideYProps & import("..").DivideXReverseProps & import("..").DivideYReverseProps & import("..").DivideColorProps & import("..").DivideStyleProps & import("..").RingProps & import("..").RingColorProps & import("..").OpacityProps & import("..").BoxShadowProps & import("..").TextShadowProps & import("..").DisplayProps & import("..").AlignItemsProps & import("..").AlignContentProps & import("..").JustifyContentProps & import("..").JustifyItemsProps & import("..").FlexWrapProps & import("..").FlexGrowProps & import("..").FlexShrinkProps & import("..").FlexBasisProps & import("..").FlexDirectionProps & import("..").FlexProps & import("..").JustifySelfProps & import("..").AlignSelfProps & import("..").OrderProps & import("../system/flexboxGrids").RowProps & import("../system/flexboxGrids").ColProps & import("../system/grids").GapProps & import("../system/grids").ColumnGapProps & import("../system/grids").RowGapProps & import("../system/grids").GridColumnProps & import("../system/grids").GridRowProps & import("../system/grids").GridAutoFlowProps & import("../system/grids").GridAutoColumnsProps & import("../system/grids").GridAutoRowsProps & import("../system/grids").GridTemplateColumnsProps & import("../system/grids").GridTemplateRowsProps & import("../system/grids").GridTemplateAreasProps & import("../system/grids").GridAreaProps & import("..").AppearanceProps & import("..").CursorProps & import("..").PointerEventsProps & import("..").ResizeProps & import("..").UserSelectProps & import("..").IsTruncatedProps & import("..").FloatProps & import("..").BoxSizingProps & import("..").OverflowProps & import("..").OverflowXProps & import("..").OverflowYProps & import("..").PositionProps & import("..").ZIndexProps & import("..").TopProps & import("..").RightProps & import("..").BottomProps & import("..").LeftProps & import("..").VisibilityProps & import("..").OverscrollBehaviorProps & import("..").ObjectFitProps & import("..").MaxLinesProps & import("..").WidthProps & import("..").HeightProps & import("..").MaxWidthProps & import("..").MaxHeightProps & import("..").MinWidthProps & import("..").MinHeightProps & import("..").MarginProps & import("..").MarginTopProps & import("..").MarginRightProps & import("..").MarginBottomProps & import("..").MarginLeftProps & import("..").MarginXProps & import("..").MarginYProps & import("..").PaddingProps & import("..").PaddingTopProps & import("..").PaddingRightProps & import("..").PaddingBottomProps & import("..").PaddingLeftProps & import("..").PaddingXProps & import("..").PaddingYProps & import("..").SpaceXProps & import("..").SpaceYProps & import("..").SpaceXReverseProps & import("..").SpaceYReverseProps & import("../system/tables").BorderCollapseProps & import("../system/tables").TableLayoutProps & import("..").TransformProps & import("..").TransformOriginProps & import("..").TranslateXProps & import("..").TranslateYProps & import("..").RotateProps & import("..").SkewXProps & import("..").SkewYProps & import("..").ScaleProps & import("..").ScaleXProps & import("..").ScaleYProps & import("..").TransitionProps & import("..").TransitionPropertyProps & import("..").TransitionDurationProps & import("..").TransitionTimingFunctionProps & import("..").TransitionDelayProps & import("..").FontFamilyProps & import("..").FontSizeProps & import("..").FontStyleProps & import("..").FontWeightProps & import("..").LineHeightProps & import("..").ColorProps & import("..").TextTransformProps & import("..").TextDecorationProps & import("..").TextAlignProps & import("..").VerticalAlignProps & import("..").LetterSpacingProps & import("..").WhiteSpaceProps & import("..").TextOverflowProps & import("..").ListStyleTypeProps & import("..").ListStylePositionProps & import("..").WordBreakProps & import("..").ThemingProps<"Tabs"> & import("../core").ChildrenProp & {
     actions?: React.ReactNode;
-    activeTabId?: number | undefined;
+    activeTabId?: TabId | undefined;
     showBorder?: boolean | undefined;
-    onTabClick?: ((id: number) => void) | undefined;
+    onTabClick?: ((tabId: TabId) => void) | undefined;
 }, never>;
 /**
  * Implements Tabs navigation to switch between views. Implements Tabs navigation to switch between views. **Do not use as a top menu in a page!**

package/dist/esm/tabs/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAA;AAMhE,OAAO,EAAY,SAAS,EAAE,MAAM,cAAc,CAAA;AAIlD,eAAO,MAAM,QAAQ;;;;;SAEpB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,kDAgEf,CAAA;AAIF,eAAe,IAAI,CAAA"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAA;AAMhE,OAAO,EAAE,KAAK,EAA2B,SAAS,EAAE,MAAM,cAAc,CAAA;AAIxE,eAAO,MAAM,QAAQ;;;;;SAEpB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,kDAmEf,CAAA;AAIF,eAAe,IAAI,CAAA"}

package/dist/esm/tabs/tabs.js

@@ -15,17 +15,19 @@ export const TabsBase = styled.divBox `
 export const Tabs = vui((props, ref) => {
     const { actions, activeTabId, showBorder = true, children, className, size, onTabClick, ...rest } = props;
     const styles = useStyleConfig('Tabs', props);
-    const { tabs, setTabs, activeTabIndex, setActiveTabIndex, animationDirection, setAnimationDirection } = useTabsState('fadeIn', activeTabId);
+    const { tabs, setTabs, activeTabIndex, setActiveTabIndex, animationDirection, setAnimationDirection } = useTabsState('fadeIn', 0);
     useEffect(() => {
-        const t = [];
+        const _tabs = [];
         if (children) {
             ;
             Children.toArray(children).forEach((child, index) => {
                 if (child?.props?.title)
-                    t.push({
-                        id: index,
+                    _tabs.push({
+                        id: child.props.id,
+                        index: index,
                         title: child.props.title,
                         icon: child.props.icon,
+                        className: child.props.className,
                         children: child.props.children,
                         disabled: child.props.disabled,
                         onClick: child.props.onClick,
@@ -33,22 +35,24 @@ export const Tabs = vui((props, ref) => {
                     });
             });
         }
-        setTabs(t);
-        if (activeTabId !== undefined && tabs?.[activeTabId]) {
-            setActiveTabIndex(activeTabId);
+        setTabs(_tabs);
+        if (activeTabId !== undefined) {
+            const tab = _tabs.find((t) => t?.id === activeTabId || t?.index === activeTabId);
+            if (tab?.index)
+                setActiveTabIndex(tab.index);
         }
     }, [children, activeTabId]);
-    const onNavItemClick = (id, e) => {
-        const tab = tabs.find(t => t.id === id);
-        if (tab?.children !== undefined) {
-            setAnimationDirection(id < activeTabIndex ? 'fadeLeft' : 'fadeRight');
-            setActiveTabIndex(id);
-            onTabClick?.(id);
+    const onNavItemClick = (tabIndex, e) => {
+        const tab = tabs.find(t => t.index === tabIndex);
+        if (tab?.children !== undefined && tab?.index !== undefined) {
+            setAnimationDirection(tab.index < activeTabIndex ? 'fadeLeft' : 'fadeRight');
+            setActiveTabIndex(tab.index);
+            onTabClick?.(tab.id || tab.index);
         }
         tab?.onClick?.(e);
     };
     const activeTab = tabs?.[activeTabIndex];
-    return (_jsxs(TabsBase, { className: cs('vui-tabs', className), ref: ref, ...styles.container, ...rest, children: [!!tabs?.length && (_jsx(TabsNavBar, { actions: actions, activeNavItem: activeTabIndex, animationDirection: animationDirection, onNavItemClick: (id, e) => onNavItemClick(id, e), showBorder: showBorder, size: size, tabs: tabs })), tabs?.length ? (_jsx(Tab, { onClick: activeTab?.onClick, title: activeTab?.title, children: !activeTab?.disabled && activeTab?.children })) : (_jsx(P, { p: 2, children: "Please specify Tabs." }))] }));
+    return (_jsxs(TabsBase, { className: cs('vui-tabs', className), ref: ref, ...styles.container, ...rest, children: [!!tabs?.length && (_jsx(TabsNavBar, { actions: actions, activeNavItem: activeTabIndex, animationDirection: animationDirection, onNavItemClick: (tabIndex, e) => onNavItemClick(tabIndex, e), showBorder: showBorder, size: size, tabs: tabs })), tabs?.length ? (_jsx(Tab, { onClick: activeTab?.onClick, title: activeTab?.title, children: !activeTab?.disabled && activeTab?.children })) : (_jsx(P, { p: 2, children: "Please specify Tabs." }))] }));
 });
 Tabs.displayName = 'Tabs';
 export default Tabs;

package/dist/esm/tabs/tabs.types.d.ts

@@ -4,17 +4,18 @@ import { IconProp } from '../icon';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 export type AnimationDirection = 'fadeLeft' | 'fadeRight' | 'fadeIn';
+export type TabId = string | number;
 export type TabsSize = 'md' | 'sm' | 'lg' | 'xl' | 'xxl';
 export type NavBarIconSize = 'md' | 'xs' | 'sm' | 'lg' | 'xl' | undefined;
 export type TabsProps = SystemProps & ThemingProps<'Tabs'> & ChildrenProp & {
     actions?: ReactNode;
-    activeTabId?: number;
+    activeTabId?: TabId;
     showBorder?: boolean;
-    onTabClick?: (id: number) => void;
+    onTabClick?: (tabId: TabId) => void;
 };
 export type TabProps = SystemProps & ChildrenProp & {
     icon?: IconProp;
-    id?: number;
+    id?: TabId;
     title: ReactNode;
     disabled?: boolean;
     className?: string;
@@ -22,11 +23,14 @@ export type TabProps = SystemProps & ChildrenProp & {
     /** If provided, displays a remove button with this function as onClick. */
     onDelete?: (nativeEvent?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 };
+export type TabIndexProps = TabProps & {
+    index?: number;
+};
 export type TabNavBarProps = {
     actions?: ReactNode;
-    tabs: TabProps[];
-    onNavItemClick: (id: number, e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
-    activeNavItem?: number;
+    tabs: TabIndexProps[];
+    onNavItemClick: (tabIndex: number, e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
+    activeNavItem?: TabId;
     animationDirection?: AnimationDirection;
     showBorder?: boolean;
     size?: TabsSize;

package/dist/esm/tabs/tabs.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.types.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,CAAA;AAEpE,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAA;AACxD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;AAEzE,MAAM,MAAM,SAAS,GAAG,WAAW,GACjC,YAAY,CAAC,MAAM,CAAC,GACpB,YAAY,GAAG;IACb,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAEH,MAAM,MAAM,QAAQ,GAAG,WAAW,GAChC,YAAY,GAAG;IACb,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;IAC7E,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;CACnF,CAAA;AAEH,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;IACpF,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,CAAA"}
+{"version":3,"file":"tabs.types.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,CAAA;AACpE,MAAM,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAA;AACnC,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAA;AACxD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;AAEzE,MAAM,MAAM,SAAS,GAAG,WAAW,GACjC,YAAY,CAAC,MAAM,CAAC,GACpB,YAAY,GAAG;IACb,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,WAAW,CAAC,EAAE,KAAK,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACpC,CAAA;AAEH,MAAM,MAAM,QAAQ,GAAG,WAAW,GAChC,YAAY,GAAG;IACb,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,EAAE,CAAC,EAAE,KAAK,CAAA;IACV,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;IAC7E,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;CACnF,CAAA;AAEH,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,IAAI,EAAE,aAAa,EAAE,CAAA;IACrB,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;IAC1F,aAAa,CAAC,EAAE,KAAK,CAAA;IACrB,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,CAAA"}

package/dist/esm/tabs/tabsNavBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabsNavBar.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabsNavBar.tsx"],"names":[],"mappings":"AASA,OAAO,EAAkB,cAAc,EAAY,MAAM,cAAc,CAAA;AAKvE,eAAO,MAAM,UAAU,uDAgFrB,CAAA;AAIF,eAAe,UAAU,CAAA"}
+{"version":3,"file":"tabsNavBar.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabsNavBar.tsx"],"names":[],"mappings":"AASA,OAAO,EAAiC,cAAc,EAAE,MAAM,cAAc,CAAA;AAK5E,eAAO,MAAM,UAAU,uDAgFrB,CAAA;AAIF,eAAe,UAAU,CAAA"}

package/dist/esm/tabs/tabsNavBar.js

@@ -17,8 +17,8 @@ export const TabsNavBar = vui((props, ref) => {
     const borderWidth = sizes[size ?? 'md'].tabsNavBar.borderWidth;
     const py = sizes[size ?? 'md'].tabsNavBar.py;
     const iconMarginRight = size === 'xxl' ? '16px' : '8px';
-    const isActive = (tab) => !tab.disabled && tab.id === activeNavItem;
-    return (_jsxs(List, { alignItems: "end", borderBottom: showBorder ? `1px solid ${border}` : 'none', className: cs('vui-tabsNavBar'), display: "flex", isInteractive: true, mb: "20px", ref: ref, w: 1, children: [tabs?.map?.(tab => (_jsxs(ListItem, { activeBg: tab.disabled ? undefined : activeBg, bg: "white", className: `vui-tabsNavBarItem vui-tabsNavBarItem-${tab?.id}`, color: isActive(tab) ? main : color, disabled: tab.disabled, display: "inline-flex", fontSize: fontSize, fontWeight: 500, h: h, hoverBg: tab.disabled ? undefined : hover, onClick: e => onNavItemClick?.(tab.id || 0, e), position: "relative", px: "16px", py: py, children: [_jsxs(Box, { alignItems: "center", children: [!!tab.icon && _jsx(Icon, { mr: iconMarginRight, name: tab.icon, size: iconSize }), tab.title] }), !!tab.onDelete && (_jsx(TagButton, { disabled: tab.disabled, hoverBg: "skyBlue.80", hoverColor: "seaBlue.main", isRound: false, ml: 1, onClick: e => tab?.onDelete?.(e), title: "Delete" })), isActive(tab) && (_jsx(Box, { animation: animationDirection, bg: main, bottom: "-1px", h: borderWidth, left: 0, position: "absolute", w: 1, children: "\u00A0" }))] }, tab.id))), !!actions && (_jsx(Box, { ml: "auto", pb: 0.5, pr: 0.5, children: actions }))] }));
+    const isActive = (tab) => !tab.disabled && tab?.index === activeNavItem;
+    return (_jsxs(List, { alignItems: "end", borderBottom: showBorder ? `1px solid ${border}` : 'none', className: cs('vui-tabsNavBar'), display: "flex", isInteractive: true, mb: "20px", ref: ref, w: 1, children: [tabs?.map?.(tab => (_jsxs(ListItem, { activeBg: tab.disabled ? undefined : activeBg, bg: "white", className: `vui-tabsNavBarItem vui-tabsNavBarItem-${tab?.id}`, color: isActive(tab) ? main : color, disabled: tab.disabled, display: "inline-flex", fontSize: fontSize, fontWeight: 500, h: h, hoverBg: tab.disabled ? undefined : hover, onClick: e => onNavItemClick?.(tab.index || 0, e), position: "relative", px: "16px", py: py, children: [_jsxs(Box, { alignItems: "center", children: [!!tab.icon && _jsx(Icon, { mr: iconMarginRight, name: tab.icon, size: iconSize }), tab.title] }), !!tab.onDelete && (_jsx(TagButton, { disabled: tab.disabled, hoverBg: "skyBlue.80", hoverColor: "seaBlue.main", isRound: false, ml: 1, onClick: e => tab?.onDelete?.(e), title: "Delete" })), isActive(tab) && (_jsx(Box, { animation: animationDirection, bg: main, bottom: "-1px", h: borderWidth, left: 0, position: "absolute", w: 1, children: "\u00A0" }))] }, tab.index))), !!actions && (_jsx(Box, { ml: "auto", px: 0.75, py: 0.5, children: actions }))] }));
 });
 TabsNavBar.displayName = 'TabsNavBar';
 export default TabsNavBar;

package/dist/esm/tabs/useTabsState.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { AnimationDirection, TabProps } from './tabs.types';
-export declare const useTabsState: (initialAnimation: AnimationDirection, activeTabId?: number) => {
-    tabs: TabProps[];
-    setTabs: import("react").Dispatch<import("react").SetStateAction<TabProps[]>>;
+import { AnimationDirection, TabIndexProps } from './tabs.types';
+export declare const useTabsState: (initialAnimation: AnimationDirection, tabIndex?: number) => {
+    tabs: TabIndexProps[];
+    setTabs: import("react").Dispatch<import("react").SetStateAction<TabIndexProps[]>>;
     activeTabIndex: number;
     setActiveTabIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
     animationDirection: AnimationDirection;

package/dist/esm/tabs/useTabsState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTabsState.d.ts","sourceRoot":"","sources":["../../../src/tabs/useTabsState.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAE3D,eAAO,MAAM,YAAY,qBAAsB,kBAAkB,gBAAgB,MAAM;;;;;;;CAMtF,CAAA"}
+{"version":3,"file":"useTabsState.d.ts","sourceRoot":"","sources":["../../../src/tabs/useTabsState.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAEhE,eAAO,MAAM,YAAY,qBAAsB,kBAAkB,aAAa,MAAM;;;;;;;CAMnF,CAAA"}

package/dist/esm/tabs/useTabsState.js

@@ -1,7 +1,7 @@
 import { useState } from 'react';
-export const useTabsState = (initialAnimation, activeTabId) => {
+export const useTabsState = (initialAnimation, tabIndex) => {
     const [tabs, setTabs] = useState([]);
-    const [activeTabIndex, setActiveTabIndex] = useState(activeTabId ?? 0);
+    const [activeTabIndex, setActiveTabIndex] = useState(tabIndex ?? 0);
     const [animationDirection, setAnimationDirection] = useState(initialAnimation);
     return { tabs, setTabs, activeTabIndex, setActiveTabIndex, animationDirection, setAnimationDirection };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.17.2-beta.0",
+  "version": "2.17.2-beta.1",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/footer/footer.tsx

@@ -149,7 +149,7 @@ export const Footer = vui<'div', FooterProps>((props, ref) => {
 
                 {isDNV ? (
                   <Box>
-                    <T size="sm">@ DNV AS 2021</T>
+                    <T size="sm">&copy; DNV AS 2021</T>
                   </Box>
                 ) : (
                   <Box>

package/src/tabs/tab.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { styled, vui } from '../core'
 import { cs } from '../utils'
 import { TabProps } from './tabs.types'

package/src/tabs/tabs.tsx

@@ -4,7 +4,7 @@ import { styled, useStyleConfig, vui } from '../core'
 import { P } from '../p'
 import { cs } from '../utils'
 import Tab from './tab'
-import { TabProps, TabsProps } from './tabs.types'
+import { TabId, TabIndexProps, TabProps, TabsProps } from './tabs.types'
 import TabsNavBar from './tabsNavBar'
 import { useTabsState } from './useTabsState'
 
@@ -20,18 +20,20 @@ export const Tabs = vui<'div', TabsProps>((props, ref) => {
   const styles = useStyleConfig('Tabs', props)
   const { tabs, setTabs, activeTabIndex, setActiveTabIndex, animationDirection, setAnimationDirection } = useTabsState(
     'fadeIn',
-    activeTabId
+    0
   )
 
   useEffect(() => {
-    const t: TabProps[] = []
+    const _tabs: TabIndexProps[] = []
     if (children) {
       ;(Children.toArray(children) as ReactElement[]).forEach((child: ReactElement<TabProps>, index: number) => {
         if (child?.props?.title)
-          t.push({
-            id: index,
+          _tabs.push({
+            id: child.props.id,
+            index: index,
             title: child.props.title,
             icon: child.props.icon,
+            className: child.props.className,
             children: child.props.children,
             disabled: child.props.disabled,
             onClick: child.props.onClick,
@@ -39,18 +41,19 @@ export const Tabs = vui<'div', TabsProps>((props, ref) => {
           })
       })
     }
-    setTabs(t)
-    if (activeTabId !== undefined && tabs?.[activeTabId]) {
-      setActiveTabIndex(activeTabId)
+    setTabs(_tabs)
+    if (activeTabId !== undefined) {
+      const tab = _tabs.find((t: TabIndexProps) => t?.id === activeTabId || t?.index === activeTabId)
+      if (tab?.index) setActiveTabIndex(tab.index)
     }
   }, [children, activeTabId])
 
-  const onNavItemClick = (id: number, e: React.MouseEvent<HTMLLIElement, MouseEvent>) => {
-    const tab = tabs.find(t => t.id === id)
-    if (tab?.children !== undefined) {
-      setAnimationDirection(id < activeTabIndex ? 'fadeLeft' : 'fadeRight')
-      setActiveTabIndex(id)
-      onTabClick?.(id)
+  const onNavItemClick = (tabIndex: number, e: React.MouseEvent<HTMLLIElement, MouseEvent>) => {
+    const tab = tabs.find(t => t.index === tabIndex)
+    if (tab?.children !== undefined && tab?.index !== undefined) {
+      setAnimationDirection(tab.index < activeTabIndex ? 'fadeLeft' : 'fadeRight')
+      setActiveTabIndex(tab.index)
+      onTabClick?.(tab.id || tab.index)
     }
     tab?.onClick?.(e)
   }
@@ -64,7 +67,7 @@ export const Tabs = vui<'div', TabsProps>((props, ref) => {
           actions={actions}
           activeNavItem={activeTabIndex}
           animationDirection={animationDirection}
-          onNavItemClick={(id, e) => onNavItemClick(id, e)}
+          onNavItemClick={(tabIndex, e) => onNavItemClick(tabIndex, e)}
           showBorder={showBorder}
           size={size}
           tabs={tabs}

package/src/tabs/tabs.types.ts

@@ -6,7 +6,7 @@ import { SystemProps } from '../system'
 import { ThemingProps } from '../theme'
 
 export type AnimationDirection = 'fadeLeft' | 'fadeRight' | 'fadeIn'
-
+export type TabId = string | number
 export type TabsSize = 'md' | 'sm' | 'lg' | 'xl' | 'xxl'
 export type NavBarIconSize = 'md' | 'xs' | 'sm' | 'lg' | 'xl' | undefined
 
@@ -14,15 +14,15 @@ export type TabsProps = SystemProps &
   ThemingProps<'Tabs'> &
   ChildrenProp & {
     actions?: ReactNode
-    activeTabId?: number
+    activeTabId?: TabId
     showBorder?: boolean
-    onTabClick?: (id: number) => void
+    onTabClick?: (tabId: TabId) => void
   }
 
 export type TabProps = SystemProps &
   ChildrenProp & {
     icon?: IconProp
-    id?: number
+    id?: TabId
     title: ReactNode
     disabled?: boolean
     className?: string
@@ -31,11 +31,15 @@ export type TabProps = SystemProps &
     onDelete?: (nativeEvent?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
   }
 
+export type TabIndexProps = TabProps & {
+  index?: number
+}
+
 export type TabNavBarProps = {
   actions?: ReactNode
-  tabs: TabProps[]
-  onNavItemClick: (id: number, e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void
-  activeNavItem?: number
+  tabs: TabIndexProps[]
+  onNavItemClick: (tabIndex: number, e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void
+  activeNavItem?: TabId
   animationDirection?: AnimationDirection
   showBorder?: boolean
   size?: TabsSize

package/src/tabs/tabsNavBar.tsx

@@ -7,7 +7,7 @@ import { List, ListItem } from '../list'
 import { TagButton } from '../tag'
 import { cs, Dict } from '../utils'
 import { colors, iconSizeMapper } from './consts'
-import { NavBarIconSize, TabNavBarProps, TabProps } from './tabs.types'
+import { NavBarIconSize, TabIndexProps, TabNavBarProps } from './tabs.types'
 import theme from './theme'
 
 const { activeBg, border, color, hover, main } = colors
@@ -24,7 +24,7 @@ export const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {
   const py = sizes[size ?? 'md'].tabsNavBar.py
   const iconMarginRight = size === 'xxl' ? '16px' : '8px'
 
-  const isActive = (tab: TabProps) => !tab.disabled && tab.id === activeNavItem
+  const isActive = (tab: TabIndexProps) => !tab.disabled && tab?.index === activeNavItem
 
   return (
     <List
@@ -49,8 +49,8 @@ export const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {
           fontWeight={500}
           h={h}
           hoverBg={tab.disabled ? undefined : hover}
-          key={tab.id}
-          onClick={e => onNavItemClick?.(tab.id || 0, e)}
+          key={tab.index}
+          onClick={e => onNavItemClick?.(tab.index || 0, e)}
           position="relative"
           px="16px"
           py={py}
@@ -86,7 +86,7 @@ export const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {
         </ListItem>
       ))}
       {!!actions && (
-        <Box ml="auto" pb={0.5} pr={0.5}>
+        <Box ml="auto" px={0.75} py={0.5}>
           {actions}
         </Box>
       )}

package/src/tabs/useTabsState.ts

@@ -1,10 +1,10 @@
 import { useState } from 'react'
 
-import { AnimationDirection, TabProps } from './tabs.types'
+import { AnimationDirection, TabIndexProps } from './tabs.types'
 
-export const useTabsState = (initialAnimation: AnimationDirection, activeTabId?: number) => {
-  const [tabs, setTabs] = useState<TabProps[]>([])
-  const [activeTabIndex, setActiveTabIndex] = useState<number>(activeTabId ?? 0)
+export const useTabsState = (initialAnimation: AnimationDirection, tabIndex?: number) => {
+  const [tabs, setTabs] = useState<TabIndexProps[]>([])
+  const [activeTabIndex, setActiveTabIndex] = useState<number>(tabIndex ?? 0)
   const [animationDirection, setAnimationDirection] = useState<AnimationDirection>(initialAnimation)
 
   return { tabs, setTabs, activeTabIndex, setActiveTabIndex, animationDirection, setAnimationDirection }