@trilogy-ds/react 0.0.1-beta-148 → 0.0.1-beta-sc-2

package/lib/components/tabs/TabsPropsDefaults.js

@@ -13,6 +13,14 @@ export default {
       "ReactPortal"
     ]
   },
+  "disabled": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
   "activeIndex": {
     "type": "string",
     "values": [
@@ -28,6 +36,21 @@ export default {
       "true"
     ]
   },
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "marginless": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
   "inverted": {
     "type": "boolean",
     "values": [
@@ -37,58 +60,73 @@ export default {
     ]
   },
   "align": {
-    "type": "enum",
+    "type": "string",
     "values": [
       "undefined",
-      "ALIGNED_CENTER",
-      "ALIGNED_START",
-      "ALIGNED_END",
-      "ALIGNED_CENTER",
-      "ALIGNED_START",
-      "ALIGNED_END"
+      "center",
+      "left",
+      "right"
     ]
   },
-  "verticalAlign": {
+  "shadowless": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "textAlign": {
     "type": "enum",
     "values": [
       "undefined",
-      "ALIGNED_CENTER",
-      "ALIGNED_START",
-      "ALIGNED_END",
-      "ALIGNED_CENTER",
-      "ALIGNED_START",
-      "ALIGNED_END"
+      "has-text-centered",
+      "has-text-justified",
+      "has-text-left",
+      "has-text-right",
+      "has-text-centered",
+      "has-text-justified",
+      "has-text-left",
+      "has-text-right"
     ]
   },
-  "onClick": {
-    "type": "function",
+  "centered": {
+    "type": "boolean",
     "values": [
       "undefined",
-      "ClickEvent"
+      "false",
+      "true"
     ]
   },
-  "accessibilityLabel": {
-    "type": "string",
+  "justify": {
+    "type": "enum",
     "values": [
       "undefined",
-      "string"
+      "justified-center",
+      "justified-start",
+      "justified-end",
+      "space-between",
+      "JUSTIFIED_CENTER",
+      "JUSTIFIED_START",
+      "JUSTIFIED_END",
+      "SPACE_BETWEEN"
     ]
   },
-  "testId": {
-    "type": "string",
+  "onClick": {
+    "type": "function",
     "values": [
       "undefined",
-      "string"
+      "ClickEvent"
     ]
   },
-  "id": {
+  "accessibilityLabel": {
     "type": "string",
     "values": [
       "undefined",
       "string"
     ]
   },
-  "className": {
+  "testId": {
     "type": "string",
     "values": [
       "undefined",

package/lib/components/tabs/hook/useTabs.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ClickEvent } from '../../../events/OnClickEvent';
+interface IParams {
+    currentIndex?: number;
+    onClick?: ClickEvent;
+    disabled?: boolean;
+}
+export declare const useTabs: ({ currentIndex, onClick, disabled }: IParams) => {
+    isActive: (index: number, childPropsActive: React.ReactNode) => string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined;
+    handleClick: (e: React.MouseEvent, index: number, child: React.ReactElement) => void;
+} | {
+    isActive: (index: number, childPropsActive: React.ReactNode) => string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined;
+    handleClick: undefined;
+};
+export {};

package/lib/components/tabs/hook/useTabs.js

@@ -0,0 +1,46 @@
+import { __read } from "tslib";
+import React from 'react';
+export var useTabs = function (_a) {
+    var currentIndex = _a.currentIndex, onClick = _a.onClick, disabled = _a.disabled;
+    try {
+        var _b = __read(React.useState(currentIndex || 0), 2), activateIndex_1 = _b[0], setActivateIndex_1 = _b[1];
+        var isActive = React.useCallback(function (index, childPropsActive) {
+            if (typeof childPropsActive !== 'undefined' && !activateIndex_1)
+                return childPropsActive;
+            if (index === activateIndex_1)
+                return true;
+        }, [activateIndex_1]);
+        var toggleActive_1 = React.useCallback(function (e, index) {
+            if (disabled)
+                return false;
+            setActivateIndex_1(index);
+            if (onClick)
+                onClick(e);
+        }, [disabled]);
+        var handleClick = React.useCallback(function (e, index, child) {
+            var _a;
+            toggleActive_1(e, index);
+            if ((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.onClick)
+                child.props.onClick(e);
+        }, []);
+        React.useEffect(function () {
+            setActivateIndex_1(activateIndex_1);
+        }, [currentIndex]);
+        return {
+            isActive: isActive,
+            handleClick: handleClick,
+        };
+    }
+    catch (_c) {
+        return {
+            isActive: function (index, childPropsActive) {
+                if (typeof childPropsActive !== 'undefined' && !currentIndex)
+                    return childPropsActive;
+                if (index === currentIndex)
+                    return true;
+            },
+            handleClick: undefined,
+        };
+    }
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlVGFicy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvdGFicy9ob29rL3VzZVRhYnMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFVekIsTUFBTSxDQUFDLElBQU0sT0FBTyxHQUFHLFVBQUMsRUFBNEM7UUFBMUMsWUFBWSxrQkFBQSxFQUFFLE9BQU8sYUFBQSxFQUFFLFFBQVEsY0FBQTtJQUN2RCxJQUFJO1FBQ0ksSUFBQSxLQUFBLE9BQW9DLEtBQUssQ0FBQyxRQUFRLENBQVMsWUFBWSxJQUFJLENBQUMsQ0FBQyxJQUFBLEVBQTVFLGVBQWEsUUFBQSxFQUFFLGtCQUFnQixRQUE2QyxDQUFBO1FBRW5GLElBQU0sUUFBUSxHQUFHLEtBQUssQ0FBQyxXQUFXLENBQ2hDLFVBQUMsS0FBYSxFQUFFLGdCQUFpQztZQUMvQyxJQUFJLE9BQU8sZ0JBQWdCLEtBQUssV0FBVyxJQUFJLENBQUMsZUFBYTtnQkFBRSxPQUFPLGdCQUFnQixDQUFBO1lBQ3RGLElBQUksS0FBSyxLQUFLLGVBQWE7Z0JBQUUsT0FBTyxJQUFJLENBQUE7UUFDMUMsQ0FBQyxFQUNELENBQUMsZUFBYSxDQUFDLENBQ2hCLENBQUE7UUFFRCxJQUFNLGNBQVksR0FBRyxLQUFLLENBQUMsV0FBVyxDQUNwQyxVQUFDLENBQW1CLEVBQUUsS0FBYTtZQUNqQyxJQUFJLFFBQVE7Z0JBQUUsT0FBTyxLQUFLLENBQUE7WUFDMUIsa0JBQWdCLENBQUMsS0FBSyxDQUFDLENBQUE7WUFDdkIsSUFBSSxPQUFPO2dCQUFFLE9BQU8sQ0FBQyxDQUFDLENBQUMsQ0FBQTtRQUN6QixDQUFDLEVBQ0QsQ0FBQyxRQUFRLENBQUMsQ0FDWCxDQUFBO1FBRUQsSUFBTSxXQUFXLEdBQUcsS0FBSyxDQUFDLFdBQVcsQ0FBQyxVQUFDLENBQW1CLEVBQUUsS0FBYSxFQUFFLEtBQXlCOztZQUNsRyxjQUFZLENBQUMsQ0FBQyxFQUFFLEtBQUssQ0FBQyxDQUFBO1lBQ3RCLElBQUksTUFBQSxLQUFLLGFBQUwsS0FBSyx1QkFBTCxLQUFLLENBQUUsS0FBSywwQ0FBRSxPQUFPO2dCQUFFLEtBQUssQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFBO1FBQ25ELENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQTtRQUVOLEtBQUssQ0FBQyxTQUFTLENBQUM7WUFDZCxrQkFBZ0IsQ0FBQyxlQUFhLENBQUMsQ0FBQTtRQUNqQyxDQUFDLEVBQUUsQ0FBQyxZQUFZLENBQUMsQ0FBQyxDQUFBO1FBRWxCLE9BQU87WUFDTCxRQUFRLFVBQUE7WUFDUixXQUFXLGFBQUE7U0FDWixDQUFBO0tBQ0Y7SUFBQyxXQUFNO1FBQ04sT0FBTztZQUNMLFFBQVEsRUFBRSxVQUFDLEtBQWEsRUFBRSxnQkFBaUM7Z0JBQ3pELElBQUksT0FBTyxnQkFBZ0IsS0FBSyxXQUFXLElBQUksQ0FBQyxZQUFZO29CQUFFLE9BQU8sZ0JBQWdCLENBQUE7Z0JBQ3JGLElBQUksS0FBSyxLQUFLLFlBQVk7b0JBQUUsT0FBTyxJQUFJLENBQUE7WUFDekMsQ0FBQztZQUNELFdBQVcsRUFBRSxTQUFTO1NBQ3ZCLENBQUE7S0FDRjtBQUNILENBQUMsQ0FBQSJ9

package/lib/components/tabs/index.d.ts

@@ -1,6 +1,2 @@
-import Tabs from './Tabs';
-import TabPanels from './tab-panels/TabPanels';
-import TabPanel from './tab-panels/tab-panel/TabPanel';
-import TabList from './tab-list/TabList';
-import Tab from './tab-list/tab/Tab';
-export { Tabs, TabPanel, TabPanels, TabList, Tab };
+export { default as TabsItem } from '../../components/tabs/item/TabsItem';
+export { default as Tabs } from '../../components/tabs/Tabs';

package/lib/components/tabs/index.js

@@ -1,7 +1,3 @@
-import Tabs from './Tabs';
-import TabPanels from './tab-panels/TabPanels';
-import TabPanel from './tab-panels/tab-panel/TabPanel';
-import TabList from './tab-list/TabList';
-import Tab from './tab-list/tab/Tab';
-export { Tabs, TabPanel, TabPanels, TabList, Tab };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3RhYnMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxJQUFJLE1BQU0sUUFBUSxDQUFBO0FBQ3pCLE9BQU8sU0FBUyxNQUFNLHdCQUF3QixDQUFBO0FBQzlDLE9BQU8sUUFBUSxNQUFNLGlDQUFpQyxDQUFBO0FBQ3RELE9BQU8sT0FBTyxNQUFNLG9CQUFvQixDQUFBO0FBQ3hDLE9BQU8sR0FBRyxNQUFNLG9CQUFvQixDQUFBO0FBRXBDLE9BQU8sRUFBRSxJQUFJLEVBQUUsUUFBUSxFQUFFLFNBQVMsRUFBRSxPQUFPLEVBQUUsR0FBRyxFQUFFLENBQUEifQ==
+export { default as TabsItem } from '../../components/tabs/item/TabsItem';
+export { default as Tabs } from '../../components/tabs/Tabs';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3RhYnMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLE9BQU8sSUFBSSxRQUFRLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQTtBQUNyRSxPQUFPLEVBQUUsT0FBTyxJQUFJLElBQUksRUFBRSxNQUFNLHdCQUF3QixDQUFBIn0=

package/lib/components/tabs/{tab-list/tab/Tab.d.ts → item/TabsItem.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TabProps } from './TabProps';
+import { TabsItemProps } from '../../../components/tabs/item/TabsItemProps';
 /**
  * Tabs Item Component
  * @param active {boolean} active tab item
@@ -14,5 +14,5 @@ import { TabProps } from './TabProps';
  * @param href {string} <a />
  * @param routerLink Custom Router Link as props
  */
-declare const Tab: ({ active, className, onClick, to, href, routerLink, iconName, label, disabled, testId, ...others }: TabProps) => React.JSX.Element;
-export default Tab;
+declare const TabsItem: React.ForwardRefExoticComponent<TabsItemProps & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
+export default TabsItem;

package/lib/components/tabs/item/TabsItem.js

@@ -0,0 +1,45 @@
+import { __assign, __rest } from "tslib";
+import clsx from 'clsx';
+import React from 'react';
+import { ComponentName } from '../../../components/enumsComponentsName';
+import { Icon } from '../../../components/icon';
+import { useTabsItem } from '../../../components/tabs/item/hook/useTabsItem';
+import { hashClass } from '../../../helpers/hashClassesHelpers';
+/**
+ * Tabs Item Component
+ * @param active {boolean} active tab item
+ * @param children {ReactChild} React Child Element
+ * @param onClick onClick Event
+ * @param iconName {IconNameValues | IconName} add icon name
+ * @param disabled {boolean} disable tab item
+ * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param className {string} Additionnal CSS Classes
+ * @param testId {string} Test Id for Test Integration
+ * @param to {string} Link
+ * @param href {string} <a />
+ * @param routerLink Custom Router Link as props
+ */
+var TabsItem = React.forwardRef(function (_a, ref) {
+    var active = _a.active, children = _a.children, className = _a.className, onClick = _a.onClick, to = _a.to, href = _a.href, routerLink = _a.routerLink, iconName = _a.iconName, disabled = _a.disabled, testId = _a.testId, others = __rest(_a, ["active", "children", "className", "onClick", "to", "href", "routerLink", "iconName", "disabled", "testId"]);
+    var _b = useTabsItem({ disabled: disabled, active: active, onClick: onClick }), activeItem = _b.activeItem, handleClick = _b.handleClick;
+    var classes = hashClass(clsx('tab', className, { 'is-active': activeItem }));
+    // accessibility
+    var a11y = {
+        a: {
+            'aria-selected': activeItem,
+            'data-tab-navigation': '',
+        },
+    };
+    if (routerLink && (to || href)) {
+        var RouterLink = (routerLink ? routerLink : 'a');
+        return (React.createElement(RouterLink, __assign({ ref: ref, "data-testid": testId, tabIndex: 0, to: to, href: href, className: classes, onClick: handleClick }, a11y.a, others),
+            React.createElement("div", { className: 'tab-icon' }, iconName && React.createElement(Icon, { align: 'ALIGNED_CENTER', size: 'small', name: iconName })),
+            children));
+    }
+    return (React.createElement("button", __assign({ ref: ref, "aria-disabled": disabled, disabled: disabled, className: classes, role: 'tab', "data-testid": testId }, a11y.a, others, { onClick: handleClick }),
+        React.createElement("div", { className: 'tab-icon' }, iconName && React.createElement(Icon, { align: 'ALIGNED_CENTER', size: 'small', name: iconName })),
+        children));
+});
+TabsItem.displayName = ComponentName.TabsItem;
+export default TabsItem;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFic0l0ZW0uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3RhYnMvaXRlbS9UYWJzSXRlbS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFFekIsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUV4QyxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0seUNBQXlDLENBQUE7QUFDckUsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBRXhEOzs7Ozs7Ozs7Ozs7O0dBYUc7QUFDSCxJQUFNLFFBQVEsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUMvQixVQUNFLEVBWWdCLEVBQ2hCLEdBQStDO0lBWjdDLElBQUEsTUFBTSxZQUFBLEVBQ04sUUFBUSxjQUFBLEVBQ1IsU0FBUyxlQUFBLEVBQ1QsT0FBTyxhQUFBLEVBQ1AsRUFBRSxRQUFBLEVBQ0YsSUFBSSxVQUFBLEVBQ0osVUFBVSxnQkFBQSxFQUNWLFFBQVEsY0FBQSxFQUNSLFFBQVEsY0FBQSxFQUNSLE1BQU0sWUFBQSxFQUNILE1BQU0sY0FYWCw0R0FZQyxDQURVO0lBSUwsSUFBQSxLQUE4QixXQUFXLENBQUMsRUFBRSxRQUFRLFVBQUEsRUFBRSxNQUFNLFFBQUEsRUFBRSxPQUFPLFNBQUEsRUFBRSxDQUFDLEVBQXRFLFVBQVUsZ0JBQUEsRUFBRSxXQUFXLGlCQUErQyxDQUFBO0lBQzlFLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLFNBQVMsRUFBRSxFQUFFLFdBQVcsRUFBRSxVQUFVLEVBQUUsQ0FBQyxDQUFDLENBQUE7SUFFOUUsZ0JBQWdCO0lBQ2hCLElBQU0sSUFBSSxHQUFHO1FBQ1gsQ0FBQyxFQUFFO1lBQ0QsZUFBZSxFQUFFLFVBQVU7WUFDM0IscUJBQXFCLEVBQUUsRUFBRTtTQUMxQjtLQUNGLENBQUE7SUFFRCxJQUFJLFVBQVUsSUFBSSxDQUFDLEVBQUUsSUFBSSxJQUFJLENBQUMsRUFBRTtRQUM5QixJQUFNLFVBQVUsR0FBRyxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQXNCLENBQUE7UUFDdkUsT0FBTyxDQUNMLG9CQUFDLFVBQVUsYUFDVCxHQUFHLEVBQUUsR0FBRyxpQkFDSyxNQUFNLEVBQ25CLFFBQVEsRUFBRSxDQUFDLEVBQ1gsRUFBRSxFQUFFLEVBQUUsRUFDTixJQUFJLEVBQUUsSUFBSSxFQUNWLFNBQVMsRUFBRSxPQUFPLEVBQ2xCLE9BQU8sRUFBRSxXQUFXLElBQ2hCLElBQUksQ0FBQyxDQUFDLEVBQ04sTUFBTTtZQUVWLDZCQUFLLFNBQVMsRUFBQyxVQUFVLElBQUUsUUFBUSxJQUFJLG9CQUFDLElBQUksSUFBQyxLQUFLLEVBQUMsZ0JBQWdCLEVBQUMsSUFBSSxFQUFDLE9BQU8sRUFBQyxJQUFJLEVBQUUsUUFBUSxHQUFJLENBQU87WUFDekcsUUFBUSxDQUNFLENBQ2QsQ0FBQTtLQUNGO0lBRUQsT0FBTyxDQUNMLHlDQUNFLEdBQUcsRUFBRSxHQUFtQyxtQkFDekIsUUFBUSxFQUN2QixRQUFRLEVBQUUsUUFBUSxFQUNsQixTQUFTLEVBQUUsT0FBTyxFQUNsQixJQUFJLEVBQUMsS0FBSyxpQkFDRyxNQUFNLElBQ2YsSUFBSSxDQUFDLENBQUMsRUFDTixNQUFNLElBQ1YsT0FBTyxFQUFFLFdBQVc7UUFFcEIsNkJBQUssU0FBUyxFQUFDLFVBQVUsSUFBRSxRQUFRLElBQUksb0JBQUMsSUFBSSxJQUFDLEtBQUssRUFBQyxnQkFBZ0IsRUFBQyxJQUFJLEVBQUMsT0FBTyxFQUFDLElBQUksRUFBRSxRQUFRLEdBQUksQ0FBTztRQUN6RyxRQUFRLENBQ0YsQ0FDVixDQUFBO0FBQ0gsQ0FBQyxDQUNGLENBQUE7QUFFRCxRQUFRLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxRQUFRLENBQUE7QUFDN0MsZUFBZSxRQUFRLENBQUEifQ==

package/lib/components/tabs/item/TabsItem.native.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import { TabsItemProps } from '../../../components/tabs/item/TabsItemProps';
+/**
+ * Tabs Item Component
+ * @param active {boolean} active tab item
+ * @param children {ReactChild} React Child Element
+ * @param onClick onClick Event
+ * @param iconName {IconNameValues | IconName} add icon name
+ * @param disabled {boolean} disable tab item
+ */
+declare const TabsItem: React.ForwardRefExoticComponent<TabsItemProps & React.RefAttributes<TouchableOpacity>>;
+export default TabsItem;

package/lib/components/tabs/item/TabsItem.native.js

@@ -0,0 +1,87 @@
+import { __assign, __read, __rest } from "tslib";
+import React, { useEffect, useState } from 'react';
+import { Animated, StyleSheet, TouchableOpacity, View } from 'react-native';
+import { ComponentName } from '../../../components/enumsComponentsName';
+import { Icon } from '../../../components/icon';
+import { Text, TextLevels } from '../../../components/text';
+import { getColorStyle, TrilogyColor } from '../../../objects/facets/Color';
+/**
+ * Tabs Item Component
+ * @param active {boolean} active tab item
+ * @param children {ReactChild} React Child Element
+ * @param onClick onClick Event
+ * @param iconName {IconNameValues | IconName} add icon name
+ * @param disabled {boolean} disable tab item
+ */
+var TabsItem = React.forwardRef(function (_a, ref) {
+    var active = _a.active, children = _a.children, onClick = _a.onClick, iconName = _a.iconName, inverted = _a.inverted, disabled = _a.disabled, others = __rest(_a, ["active", "children", "onClick", "iconName", "inverted", "disabled"]);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    var _b = __read(useState(active || false), 2), setActiveItem = _b[1];
+    var _c = __read(useState(false), 2), setInPressIn = _c[1];
+    var animatedBorderStyle = {
+        borderBottomWidth: (active && 2) || 0,
+    };
+    var getIconColor = React.useMemo(function () {
+        if (inverted) {
+            if (disabled)
+                return TrilogyColor.NEUTRAL_FADE;
+            return TrilogyColor.BACKGROUND;
+        }
+        if (disabled)
+            return TrilogyColor.DISABLED;
+        if (active)
+            return TrilogyColor.MAIN;
+        return TrilogyColor.MAIN;
+    }, [inverted, disabled, active]);
+    var getBorderColor = React.useMemo(function () {
+        if (disabled)
+            return 'transparent';
+        if (inverted) {
+            if (active)
+                return getColorStyle(TrilogyColor.BACKGROUND);
+        }
+        if (active)
+            return getColorStyle(TrilogyColor.MAIN);
+        return 'transparent';
+    }, [inverted, disabled, active]);
+    var styles = StyleSheet.create({
+        tabsItem: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            paddingVertical: 6,
+            paddingHorizontal: 14,
+            position: 'relative',
+            height: iconName ? 60 : 44,
+        },
+        text: {
+            color: getColorStyle(getIconColor),
+            textAlign: 'center',
+        },
+        border: {
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            borderBottomColor: getBorderColor,
+        },
+    });
+    useEffect(function () {
+        setActiveItem(active || false);
+    }, [active]);
+    return (React.createElement(TouchableOpacity, __assign({ activeOpacity: 1, onPressIn: function () { return setInPressIn(true); }, onPressOut: function () { return setInPressIn(false); }, style: [styles.tabsItem], onPress: function (e) {
+            if (!disabled) {
+                setActiveItem(active || false);
+                if (onClick) {
+                    onClick(e);
+                }
+            }
+        }, ref: ref }, others),
+        iconName && (React.createElement(View, null,
+            React.createElement(Icon, { color: getIconColor, size: 'small', name: iconName }))),
+        children &&
+            (typeof children.valueOf() === 'string' ? (React.createElement(Text, { style: styles.text, level: TextLevels.TWO }, String(children))) : (children)),
+        React.createElement(Animated.View, { style: [styles.border, animatedBorderStyle] })));
+});
+TabsItem.displayName = ComponentName.TabsItem;
+export default TabsItem;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFic0l0ZW0ubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy90YWJzL2l0ZW0vVGFic0l0ZW0ubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEVBQUUsRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBQ2xELE9BQU8sRUFBRSxRQUFRLEVBQUUsVUFBVSxFQUFFLGdCQUFnQixFQUFFLElBQUksRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUUzRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBRXhDLE9BQU8sRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDcEQsT0FBTyxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUVwRTs7Ozs7OztHQU9HO0FBQ0gsSUFBTSxRQUFRLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FDL0IsVUFDRSxFQUFxRixFQUNyRixHQUFnQztJQUQ5QixJQUFBLE1BQU0sWUFBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLE9BQU8sYUFBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLFFBQVEsY0FBQSxFQUFLLE1BQU0sY0FBcEUscUVBQXNFLENBQUY7SUFHcEUsNkRBQTZEO0lBQ3ZELElBQUEsS0FBQSxPQUFvQixRQUFRLENBQVUsTUFBTSxJQUFJLEtBQUssQ0FBQyxJQUFBLEVBQW5ELGFBQWEsUUFBc0MsQ0FBQTtJQUN0RCxJQUFBLEtBQUEsT0FBbUIsUUFBUSxDQUFVLEtBQUssQ0FBQyxJQUFBLEVBQXhDLFlBQVksUUFBNEIsQ0FBQTtJQUVqRCxJQUFNLG1CQUFtQixHQUFHO1FBQzFCLGlCQUFpQixFQUFFLENBQUMsTUFBTSxJQUFJLENBQUMs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

package/lib/components/tabs/item/TabsItemProps.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { IconName, IconNameValues } from '../../../components/icon';
+import { Accessibility } from '../../../objects/facets/Accessibility';
+import { Clickable } from '../../../objects/facets/Clickable';
+import { Dev } from '../../../objects/facets/Dev';
+/**
+ * Tabs Item Interface
+ */
+export interface TabsItemProps extends Clickable, Accessibility, Dev {
+    children: React.ReactChild;
+    active?: boolean;
+    className?: string;
+    id?: string;
+    tabIndex?: number;
+    to?: string;
+    href?: string;
+    routerLink?: React.ElementType;
+    iconName?: IconNameValues | IconName;
+    disabled?: boolean;
+    inverted?: boolean;
+}

package/lib/components/tabs/item/TabsItemProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFic0l0ZW1Qcm9wcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvdGFicy9pdGVtL1RhYnNJdGVtUHJvcHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiJ9

package/lib/components/tabs/{tab-list/tab/TabPropsDefaults.js → item/TabsItemPropsDefaults.js}

@@ -1,4 +1,12 @@
 export default {
+  "children": {
+    "type": "react",
+    "values": [
+      "string",
+      "number",
+      "JSXElementConstructor<any>>"
+    ]
+  },
   "active": {
     "type": "boolean",
     "values": [
@@ -7,6 +15,27 @@ export default {
       "true"
     ]
   },
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "id": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "tabIndex": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "number"
+    ]
+  },
   "to": {
     "type": "string",
     "values": [
@@ -259,14 +288,15 @@ export default {
       "tri-picto-payment-visa"
     ]
   },
-  "label": {
-    "type": "string",
+  "disabled": {
+    "type": "boolean",
     "values": [
       "undefined",
-      "string"
+      "false",
+      "true"
     ]
   },
-  "disabled": {
+  "inverted": {
     "type": "boolean",
     "values": [
       "undefined",
@@ -294,19 +324,5 @@ export default {
       "undefined",
       "string"
     ]
-  },
-  "id": {
-    "type": "string",
-    "values": [
-      "undefined",
-      "string"
-    ]
-  },
-  "className": {
-    "type": "string",
-    "values": [
-      "undefined",
-      "string"
-    ]
   }
 };

package/lib/components/tabs/item/hook/useTabsItem.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ClickEvent } from '../../../../events/OnClickEvent';
+interface IParams {
+    disabled?: boolean;
+    active?: boolean;
+    onClick?: ClickEvent;
+}
+export declare const useTabsItem: ({ disabled, active, onClick }: IParams) => {
+    activeItem: boolean;
+    handleClick: (e: React.MouseEvent) => void;
+} | {
+    activeItem: boolean | undefined;
+    handleClick: undefined;
+};
+export {};

package/lib/components/tabs/item/hook/useTabsItem.js

@@ -0,0 +1,29 @@
+import { __read } from "tslib";
+import React from 'react';
+export var useTabsItem = function (_a) {
+    var disabled = _a.disabled, active = _a.active, onClick = _a.onClick;
+    try {
+        var _b = __read(React.useState(active || false), 2), activeItem = _b[0], setActiveItem_1 = _b[1];
+        var handleClick = React.useCallback(function (e) {
+            if (!disabled) {
+                var target = e.target;
+                setActiveItem_1(active || false);
+                target.active = active;
+                if (onClick) {
+                    onClick(e);
+                }
+            }
+        }, []);
+        React.useEffect(function () {
+            setActiveItem_1(active || false);
+        }, [active]);
+        return { activeItem: activeItem, handleClick: handleClick };
+    }
+    catch (_c) {
+        return {
+            activeItem: active,
+            handleClick: undefined,
+        };
+    }
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlVGFic0l0ZW0uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9jb21wb25lbnRzL3RhYnMvaXRlbS9ob29rL3VzZVRhYnNJdGVtLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBVXpCLE1BQU0sQ0FBQyxJQUFNLFdBQVcsR0FBRyxVQUFDLEVBQXNDO1FBQXBDLFFBQVEsY0FBQSxFQUFFLE1BQU0sWUFBQSxFQUFFLE9BQU8sYUFBQTtJQUNyRCxJQUFJO1FBQ0ksSUFBQSxLQUFBLE9BQThCLEtBQUssQ0FBQyxRQUFRLENBQVUsTUFBTSxJQUFJLEtBQUssQ0FBQyxJQUFBLEVBQXJFLFVBQVUsUUFBQSxFQUFFLGVBQWEsUUFBNEMsQ0FBQTtRQUU1RSxJQUFNLFdBQVcsR0FBRyxLQUFLLENBQUMsV0FBVyxDQUFDLFVBQUMsQ0FBbUI7WUFDeEQsSUFBSSxDQUFDLFFBQVEsRUFBRTtnQkFDYixJQUFNLE1BQU0sR0FBRyxDQUFDLENBQUMsTUFBeUIsQ0FBQTtnQkFDMUMsZUFBYSxDQUFDLE1BQU0sSUFBSSxLQUFLLENBQUMsQ0FBQTtnQkFDOUIsTUFBTSxDQUFDLE1BQU0sR0FBRyxNQUFNLENBQUE7Z0JBQ3RCLElBQUksT0FBTyxFQUFFO29CQUNYLE9BQU8sQ0FBQyxDQUFDLENBQUMsQ0FBQTtpQkFDWDthQUNGO1FBQ0gsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFBO1FBRU4sS0FBSyxDQUFDLFNBQVMsQ0FBQztZQUNkLGVBQWEsQ0FBQyxNQUFNLElBQUksS0FBSyxDQUFDLENBQUE7UUFDaEMsQ0FBQyxFQUFFLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQTtRQUVaLE9BQU8sRUFBRSxVQUFVLFlBQUEsRUFBRSxXQUFXLGFBQUEsRUFBRSxDQUFBO0tBQ25DO0lBQUMsV0FBTTtRQUNOLE9BQU87WUFDTCxVQUFVLEVBQUUsTUFBTTtZQUNsQixXQUFXLEVBQUUsU0FBUztTQUN2QixDQUFBO0tBQ0Y7QUFDSCxDQUFDLENBQUEifQ==

package/lib/components/tabs/item/index.d.ts

@@ -0,0 +1,2 @@
+import TabItem from '../../../components/tabs/item/TabsItem';
+export default TabItem;

package/lib/components/tabs/item/index.js

@@ -0,0 +1,3 @@
+import TabItem from '../../../components/tabs/item/TabsItem';
+export default TabItem;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3RhYnMvaXRlbS9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLE9BQU8sTUFBTSxpQ0FBaUMsQ0FBQTtBQUNyRCxlQUFlLE9BQU8sQ0FBQSJ9

package/lib/components/tag/Tag.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { TagProps } from './TagProps';
+import React from 'react';
+import { TagProps } from '../../components/tag/TagProps';
 /**
  * Tag Component
  * @param children {ReactNode} Add childrens for tag
@@ -11,5 +11,5 @@ import { TagProps } from './TagProps';
  * - -------------------------- WEB PROPERTIES -------------------------------
  * @param className {string} Additionnal CSS Classes
  **/
-declare const Tag: ({ label, className, id, variant, inverted, small, iconName, ...others }: TagProps) => JSX.Element;
+declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLSpanElement>>;
 export default Tag;

package/lib/components/tag/Tag.js

@@ -1,11 +1,11 @@
 import { __assign, __rest } from "tslib";
-import { useTrilogyContext } from '../../context';
-import { hashClass } from '../../helpers';
-import { getColorClassName } from '../../objects/facets/Color';
-import { is } from '../../services/classify';
 import clsx from 'clsx';
 import React from 'react';
-import { Icon } from '../icon';
+import { ComponentName } from '../../components/enumsComponentsName';
+import { Icon } from '../../components/icon';
+import { hashClass } from '../../helpers/hashClassesHelpers';
+import { getColorClassName } from '../../objects/facets/Color';
+import { is } from '../../services/classify';
 /**
  * Tag Component
  * @param children {ReactNode} Add childrens for tag
@@ -17,14 +17,14 @@ import { Icon } from '../icon';
  * - -------------------------- WEB PROPERTIES -------------------------------
  * @param className {string} Additionnal CSS Classes
  **/
-var Tag = function (_a) {
-    var label = _a.label, className = _a.className, id = _a.id, variant = _a.variant, inverted = _a.inverted, small = _a.small, iconName = _a.iconName, others = __rest(_a, ["label", "className", "id", "variant", "inverted", "small", "iconName"]);
-    var styled = useTrilogyContext().styled;
-    var tagClassNames = hashClass(styled, clsx('tag', variant && is(getColorClassName(variant)), inverted && is('inverted'), small && is('small'), className));
-    var tagIconClassNames = hashClass(styled, clsx(variant && is(getColorClassName(variant))));
-    return (React.createElement("span", __assign({ id: id, className: tagClassNames }, others),
+var Tag = React.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, variant = _a.variant, inverted = _a.inverted, small = _a.small, iconName = _a.iconName, testId = _a.testId, others = __rest(_a, ["children", "className", "variant", "inverted", "small", "iconName", "testId"]);
+    var tagClassNames = hashClass(clsx('tag', variant && is(getColorClassName(variant)), inverted && is('inverted'), small && is('small'), className));
+    var tagIconClassNames = hashClass(clsx(variant && is(getColorClassName(variant))));
+    return (React.createElement("span", __assign({ "data-testid": testId, className: tagClassNames }, others, { ref: ref }),
         iconName && React.createElement(Icon, { className: tagIconClassNames, name: iconName }),
-        label));
-};
+        children));
+});
+Tag.displayName = ComponentName.Tag;
 export default Tag;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFnLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy90YWcvVGFnLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxFQUFFLGlCQUFpQixFQUFvQyxNQUFNLHdCQUF3QixDQUFBO0FBQzVGLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQTtBQUN4QyxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQ3pCLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxTQUFTLENBQUE7QUFHOUI7Ozs7Ozs7Ozs7SUFVSTtBQUNKLElBQU0sR0FBRyxHQUFHLFVBQUMsRUFBaUY7SUFBL0UsSUFBQSxLQUFLLFdBQUEsRUFBRSxTQUFTLGVBQUEsRUFBRSxFQUFFLFFBQUEsRUFBRSxPQUFPLGFBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxLQUFLLFdBQUEsRUFBRSxRQUFRLGNBQUEsRUFBSyxNQUFNLGNBQXJFLHdFQUF1RSxDQUFGO0lBQ3hFLElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBRXRDLElBQU0sYUFBYSxHQUFHLFNBQVMsQ0FDN0IsTUFBTSxFQUNOLElBQUksQ0FDRixLQUFLLEVBQ0wsT0FBTyxJQUFJLEVBQUUsQ0FBQyxpQkFBaUIsQ0FBQyxPQUE0QyxDQUFDLENBQUMsRUFDOUUsUUFBUSxJQUFJLEVBQUUsQ0FBQyxVQUFVLENBQUMsRUFDMUIsS0FBSyxJQUFJLEVBQUUsQ0FBQyxPQUFPLENBQUMsRUFDcEIsU0FBUyxDQUNWLENBQ0YsQ0FBQTtJQUVELElBQU0saUJBQWlCLEdBQUcsU0FBUyxDQUNqQyxNQUFNLEVBQ04sSUFBSSxDQUFDLE9BQU8sSUFBSSxFQUFFLENBQUMsaUJBQWlCLENBQUMsT0FBNEMsQ0FBQyxDQUFDLENBQUMsQ0FDckYsQ0FBQTtJQUVELE9BQU8sQ0FDTCx1Q0FBTSxFQUFFLEVBQUUsRUFBRSxFQUFFLFNBQVMsRUFBRSxhQUFhLElBQU0sTUFBTTtRQUMvQyxRQUFRLElBQUksb0JBQUMsSUFBSSxJQUFDLFNBQVMsRUFBRSxpQkFBaUIsRUFBRSxJQUFJLEVBQUUsUUFBUSxHQUFJO1FBQ2xFLEtBQUssQ0FDRCxDQUNSLENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxlQUFlLEdBQUcsQ0FBQSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFnLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy90YWcvVGFnLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUV6QixPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBRXhDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQTtBQUN4RCxPQUFPLEVBQUUsaUJBQWlCLEVBQW9DLE1BQU0sd0JBQXdCLENBQUE7QUFDNUYsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBRXhDOzs7Ozs7Ozs7O0lBVUk7QUFDSixJQUFNLEdBQUcsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUMxQixVQUNFLEVBQXdGLEVBQ3hGLEdBQStCO0lBRDdCLElBQUEsUUFBUSxjQUFBLEVBQUUsU0FBUyxlQUFBLEVBQUUsT0FBTyxhQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUUsS0FBSyxXQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUUsTUFBTSxZQUFBLEVBQUssTUFBTSxjQUE1RSwrRUFBOEUsQ0FBRjtJQUc1RSxJQUFNLGFBQWEsR0FBRyxTQUFTLENBQzdCLElBQUksQ0FDRixLQUFLLEVBQ0wsT0FBTyxJQUFJLEVBQUUsQ0FBQyxpQkFBaUIsQ0FBQyxPQUE0QyxDQUFDLENBQUMsRUFDOUUsUUFBUSxJQUFJLEVBQUUsQ0FBQyxVQUFVLENBQUMsRUFDMUIsS0FBSyxJQUFJLEVBQUUsQ0FBQyxPQUFPLENBQUMsRUFDcEIsU0FBUyxDQUNWLENBQ0YsQ0FBQTtJQUVELElBQU0saUJBQWlCLEdBQUcsU0FBUyxDQUNqQyxJQUFJLENBQUMsT0FBTyxJQUFJLEVBQUUsQ0FBQyxpQkFBaUIsQ0FBQyxPQUE0QyxDQUFDLENBQUMsQ0FBQyxDQUNyRixDQUFBO0lBRUQsT0FBTyxDQUNMLHNEQUFtQixNQUFNLEVBQUUsU0FBUyxFQUFFLGFBQWEsSUFBTSxNQUFNLElBQUUsR0FBRyxFQUFFLEdBQUc7UUFDdEUsUUFBUSxJQUFJLG9CQUFDLElBQUksSUFBQyxTQUFTLEVBQUUsaUJBQWlCLEVBQUUsSUFBSSxFQUFFLFFBQVEsR0FBSTtRQUNsRSxRQUFRLENBQ0osQ0FDUixDQUFBO0FBQ0gsQ0FBQyxDQUNGLENBQUE7QUFFRCxHQUFHLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxHQUFHLENBQUE7QUFDbkMsZUFBZSxHQUFHLENBQUEifQ==

package/lib/components/tag/Tag.native.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-import { ComponentName } from '../../components/enumsComponentsName';
-import { TagProps } from './TagProps';
+import React from 'react';
+import { View } from 'react-native';
+import { TagProps } from '../../components/tag/TagProps';
 /**
  * Tag Component
  * @param children {ReactNode} Add childrens for tag
@@ -10,8 +10,5 @@ import { TagProps } from './TagProps';
  * @param iconName {IconName} display icon
  * @param testId {string} Test Id for Test Integration
  **/
-declare const Tag: {
-    ({ label, variant, inverted, iconName, small, testId, ...others }: TagProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<View>>;
 export default Tag;