venice-ui 2.1.16 → 2.1.18

package/dist/cjs/Theme/Theme.js

@@ -17,6 +17,7 @@ exports.Theme = {
         accent_light: (0, polished_1.lighten)(0.2, exports.pallete.accent),
         black: "#000000",
         text: '#333333',
+        darkGray: ' #222222',
         gray_1: '#979797',
         gray_2: "#b7b7b7",
         gray_3: "#e3e3e3",

package/dist/cjs/components/Button/Button.styles.js

@@ -38,13 +38,14 @@ exports.ButtonElement = styled_components_1.default.button `
     `background-color: transparent;
     border: none;
     color: ${p.theme.action};
-    ${p.errorVariant &&
-        `color:${p.theme.errorBackgroundColor};
-      border:none;`}
     &:disabled{
       color: ${p.theme.disabledText};
-      border: 1px solid ${p.theme.disabledText};
     }
+    ${p.errorVariant &&
+        `color:${p.theme.errorBackgroundColor};
+      border:none;`}
+
+    
     `}
 
   &:hover {

package/dist/cjs/components/Card/Card.js

@@ -8,9 +8,9 @@ const react_1 = __importDefault(require("react"));
 const Card_styles_1 = require("./Card.styles");
 const ElementHeader_1 = require("../ElementHeader");
 const Theme_1 = require("../../Theme");
-const Card = ({ children, title, actionLabel, theme = Theme_1.mainTheme, iconColor = theme.textColor, iconHoverColor = theme.action, handleClick, handleBack, height, options, shadow = true, headerDivader = false }) => {
+const Card = ({ children, title, actionLabel, theme = Theme_1.mainTheme, iconColor = theme.textColor, iconHoverColor = theme.action, handleClick, handleBack, height, options, shadow = true, headerDivader = false, actionDisabled = false, }) => {
     return (react_1.default.createElement(Card_styles_1.CardElement, { height: height, shadow: shadow },
-        (title || actionLabel) && (react_1.default.createElement(ElementHeader_1.ElementHeader, { title: title, actionLabel: actionLabel, handleClick: handleClick, handleBack: handleBack, options: options, theme: theme, iconColor: iconColor, iconHoverColor: iconHoverColor, bottomDivader: headerDivader })),
+        (title || actionLabel) && (react_1.default.createElement(ElementHeader_1.ElementHeader, { title: title, actionLabel: actionLabel, handleClick: handleClick, handleBack: handleBack, options: options, theme: theme, iconColor: iconColor, iconHoverColor: iconHoverColor, bottomDivader: headerDivader, actionDisabled: actionDisabled })),
         react_1.default.createElement(Card_styles_1.CardContent, { soloMode: !title && !actionLabel }, children)));
 };
 exports.Card = Card;

package/dist/cjs/components/ElementHeader/ElementHeader.js

@@ -12,7 +12,7 @@ const Theme_1 = require("../../Theme");
 const Button_1 = require("../Button");
 const DropdownMenu_1 = require("../DropdownMenu");
 const ElementHeader_styles_1 = require("./ElementHeader.styles");
-const ElementHeader = ({ title, actionLabel = '', handleClose, handleClick, handleBack, children, theme = Theme_1.mainTheme, backgroundColor = theme.contentBackground, iconColor = theme.textColor, iconHoverColor = theme.action, options, bottomDivader = false, }) => {
+const ElementHeader = ({ title, actionLabel = '', handleClose, handleClick, handleBack, children, theme = Theme_1.mainTheme, backgroundColor = theme.contentBackground, iconColor = theme.textColor, iconHoverColor = theme.action, options, bottomDivader = false, actionDisabled = false, }) => {
     const leftSide = () => {
         if (title) {
             return (react_1.default.createElement(ElementHeader_styles_1.TitleWrapper, null,
@@ -30,7 +30,7 @@ const ElementHeader = ({ title, actionLabel = '', handleClose, handleClick, hand
         }
         else if (!handleClose && handleClick && actionLabel) {
             return (react_1.default.createElement(Aligment_1.Aligment, { align: "center", width: "auto" },
-                react_1.default.createElement(Button_1.Button, { mode: "secondary", text: actionLabel, onClick: () => handleClick() }),
+                react_1.default.createElement(Button_1.Button, { mode: "secondary", text: actionLabel, onClick: () => handleClick(), disabled: actionDisabled }),
                 options && (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { options: options, right: true, iconColor: iconColor, position: 'right' }))));
         }
     };

package/dist/cjs/components/Icons/Icon.js

@@ -1,24 +1,64 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Icon = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const Theme_1 = require("../../Theme/Theme");
 const Icon_styles_1 = require("./Icon.styles");
 const IconsPath_1 = require("./IconsPath");
+const Tooltip_1 = require("../Tooltip/Tooltip");
 const Icon = ({ size = 24, name = 'person', right = false, left = false, isActive = false, onClick = undefined, isDisabled = false, noPadding = false, iconColor = isDisabled ? Theme_1.mainTheme.iconDisabledColor : Theme_1.mainTheme.iconColor, iconHoverColor = Theme_1.mainTheme.iconHoverColor, iconBgColor = Theme_1.mainTheme.iconBgColor, iconBgHoverColor = isDisabled
     ? Theme_1.mainTheme.iconBgColor
-    : Theme_1.mainTheme.iconBgHoverColor, }) => {
+    : Theme_1.mainTheme.iconBgHoverColor, tooltip, }) => {
     const haveAction = Boolean(onClick);
+    const iconRef = (0, react_1.useRef)(null);
+    const [showTooltip, setShowTooltip] = (0, react_1.useState)(false);
+    const [tooltipPos, setTooltipPos] = (0, react_1.useState)({ top: 0, left: 0 });
+    const [showBelow, setShowBelow] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (showTooltip && iconRef.current) {
+            const rect = iconRef.current.getBoundingClientRect();
+            const tooltipHeight = 28;
+            const spaceAbove = rect.top;
+            const spaceBelow = window.innerHeight - rect.bottom;
+            setShowBelow(spaceBelow < tooltipHeight && spaceAbove > tooltipHeight);
+            setTooltipPos({
+                top: showBelow ? rect.bottom : rect.top,
+                left: rect.left + rect.width / 2 - 16,
+            });
+        }
+    }, [showTooltip, showBelow]);
     const handleClick = () => {
         if (!isDisabled && !!onClick) {
             onClick();
         }
     };
-    return (react_1.default.createElement(Icon_styles_1.IconElement, { onClick: handleClick, haveAction: haveAction, right: right, left: left, isDisabled: isDisabled, iconColor: iconColor, iconHoverColor: iconHoverColor, iconBgColor: iconBgColor, iconBgHoverColor: iconBgHoverColor, isActive: isActive, noPadding: noPadding },
-        react_1.default.createElement("svg", { width: size, height: size, viewBox: '0 0 24 24', preserveAspectRatio: "xMidYMid meet", x: "0", y: "0", name: name },
-            react_1.default.createElement("path", { d: IconsPath_1.iconsPath[name], fill: isActive ? iconHoverColor : iconColor }))));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Icon_styles_1.IconElement, { ref: iconRef, onClick: handleClick, haveAction: haveAction, right: right, left: left, isDisabled: isDisabled, iconColor: iconColor, iconHoverColor: iconHoverColor, iconBgColor: iconBgColor, iconBgHoverColor: iconBgHoverColor, isActive: isActive, noPadding: noPadding, onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false) },
+            react_1.default.createElement("svg", { width: size, height: size, viewBox: '0 0 24 24', preserveAspectRatio: "xMidYMid meet", x: "0", y: "0", name: name },
+                react_1.default.createElement("path", { d: IconsPath_1.iconsPath[name], fill: isActive ? iconHoverColor : iconColor }))),
+        tooltip && showTooltip && (react_1.default.createElement(Tooltip_1.Tooltip, { text: tooltip, position: tooltipPos, showBelow: showBelow }))));
 };
 exports.Icon = Icon;

package/dist/cjs/components/Icons/Icon.styles.js

@@ -9,6 +9,7 @@ const Theme_1 = require("../../Theme/Theme");
 exports.IconElement = styled_components_1.default.div `
   transition: 300ms;
   box-sizing: border-box;
+  position: relative;
   width: auto;
   display: inline-flex;
   border-radius: ${Theme_1.Theme.borderRadius.m};

package/dist/cjs/components/Tooltip/Tooltip.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = void 0;
+const react_1 = __importDefault(require("react"));
+const react_dom_1 = require("react-dom");
+const Tooltip_styles_1 = require("./Tooltip.styles");
+const Tooltip = ({ text, position, showBelow }) => {
+    return (0, react_dom_1.createPortal)(react_1.default.createElement(Tooltip_styles_1.TooltipWrapper, { position: position, showBelow: showBelow },
+        text,
+        react_1.default.createElement(Tooltip_styles_1.TooltipPivot, { showBelow: showBelow })), document.body);
+};
+exports.Tooltip = Tooltip;

package/dist/cjs/components/Tooltip/Tooltip.styles.js

@@ -0,0 +1,63 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipPivot = exports.TooltipWrapper = void 0;
+const styled_components_1 = __importStar(require("styled-components"));
+const Theme_1 = require("../../Theme/Theme");
+exports.TooltipWrapper = styled_components_1.default.div `
+  position: absolute;
+  top: ${(p) => (p.showBelow ? p.position.top + 8 : p.position.top - 36)}px;
+  left: ${(p) => p.position.left}px;
+  background: ${Theme_1.Theme.colors.darkGray};
+  color: ${Theme_1.Theme.colors.white};
+  padding: ${Theme_1.Theme.padding.s} ${Theme_1.Theme.padding.m};
+  border-radius: ${Theme_1.Theme.borderRadius.m};
+  font-size: ${Theme_1.Theme.fontSize.s};
+  z-index: 9999;
+  white-space: nowrap;
+  box-shadow: 0 2px 8px ${Theme_1.Theme.colors.overlayer};
+  pointer-events: none;
+`;
+exports.TooltipPivot = styled_components_1.default.span `
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+
+  ${({ showBelow }) => showBelow
+    ? (0, styled_components_1.css) `
+          top: -7px;
+          border-bottom: 7px solid #222;
+          border-top: none;
+        `
+    : (0, styled_components_1.css) `
+          bottom: -7px;
+          border-top: 7px solid #222;
+          border-bottom: none;
+        `}
+`;

package/dist/cjs/components/Tooltip/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Tooltip"), exports);

package/dist/cjs/index.js

@@ -40,4 +40,5 @@ __exportStar(require("./components/Sort"), exports);
 __exportStar(require("./components/Table"), exports);
 __exportStar(require("./components/Tile"), exports);
 __exportStar(require("./components/Toogle"), exports);
+__exportStar(require("./components/Tooltip"), exports);
 __exportStar(require("./components/Typography"), exports);

package/dist/esm/Theme/Theme.js

@@ -14,6 +14,7 @@ export const Theme = {
         accent_light: lighten(0.2, pallete.accent),
         black: "#000000",
         text: '#333333',
+        darkGray: ' #222222',
         gray_1: '#979797',
         gray_2: "#b7b7b7",
         gray_3: "#e3e3e3",

package/dist/esm/components/Button/Button.styles.js

@@ -32,13 +32,14 @@ export const ButtonElement = styled.button `
     `background-color: transparent;
     border: none;
     color: ${p.theme.action};
-    ${p.errorVariant &&
-        `color:${p.theme.errorBackgroundColor};
-      border:none;`}
     &:disabled{
       color: ${p.theme.disabledText};
-      border: 1px solid ${p.theme.disabledText};
     }
+    ${p.errorVariant &&
+        `color:${p.theme.errorBackgroundColor};
+      border:none;`}
+
+    
     `}
 
   &:hover {

package/dist/esm/components/Card/Card.js

@@ -2,8 +2,8 @@ import React from 'react';
 import { CardContent, CardElement } from './Card.styles';
 import { ElementHeader } from '../ElementHeader';
 import { mainTheme } from '../../Theme';
-export const Card = ({ children, title, actionLabel, theme = mainTheme, iconColor = theme.textColor, iconHoverColor = theme.action, handleClick, handleBack, height, options, shadow = true, headerDivader = false }) => {
+export const Card = ({ children, title, actionLabel, theme = mainTheme, iconColor = theme.textColor, iconHoverColor = theme.action, handleClick, handleBack, height, options, shadow = true, headerDivader = false, actionDisabled = false, }) => {
     return (React.createElement(CardElement, { height: height, shadow: shadow },
-        (title || actionLabel) && (React.createElement(ElementHeader, { title: title, actionLabel: actionLabel, handleClick: handleClick, handleBack: handleBack, options: options, theme: theme, iconColor: iconColor, iconHoverColor: iconHoverColor, bottomDivader: headerDivader })),
+        (title || actionLabel) && (React.createElement(ElementHeader, { title: title, actionLabel: actionLabel, handleClick: handleClick, handleBack: handleBack, options: options, theme: theme, iconColor: iconColor, iconHoverColor: iconHoverColor, bottomDivader: headerDivader, actionDisabled: actionDisabled })),
         React.createElement(CardContent, { soloMode: !title && !actionLabel }, children)));
 };

package/dist/esm/components/ElementHeader/ElementHeader.js

@@ -6,7 +6,7 @@ import { Theme, mainTheme } from '../../Theme';
 import { Button } from '../Button';
 import { DropdownMenu } from '../DropdownMenu';
 import { ElementHeaderWrapper, TitleWrapper } from './ElementHeader.styles';
-export const ElementHeader = ({ title, actionLabel = '', handleClose, handleClick, handleBack, children, theme = mainTheme, backgroundColor = theme.contentBackground, iconColor = theme.textColor, iconHoverColor = theme.action, options, bottomDivader = false, }) => {
+export const ElementHeader = ({ title, actionLabel = '', handleClose, handleClick, handleBack, children, theme = mainTheme, backgroundColor = theme.contentBackground, iconColor = theme.textColor, iconHoverColor = theme.action, options, bottomDivader = false, actionDisabled = false, }) => {
     const leftSide = () => {
         if (title) {
             return (React.createElement(TitleWrapper, null,
@@ -24,7 +24,7 @@ export const ElementHeader = ({ title, actionLabel = '', handleClose, handleClic
         }
         else if (!handleClose && handleClick && actionLabel) {
             return (React.createElement(Aligment, { align: "center", width: "auto" },
-                React.createElement(Button, { mode: "secondary", text: actionLabel, onClick: () => handleClick() }),
+                React.createElement(Button, { mode: "secondary", text: actionLabel, onClick: () => handleClick(), disabled: actionDisabled }),
                 options && (React.createElement(DropdownMenu, { options: options, right: true, iconColor: iconColor, position: 'right' }))));
         }
     };

package/dist/esm/components/Icons/Icon.js

@@ -1,17 +1,37 @@
-import React from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { mainTheme } from '../../Theme/Theme';
 import { IconElement } from './Icon.styles';
 import { iconsPath } from './IconsPath';
+import { Tooltip } from '../Tooltip/Tooltip';
 export const Icon = ({ size = 24, name = 'person', right = false, left = false, isActive = false, onClick = undefined, isDisabled = false, noPadding = false, iconColor = isDisabled ? mainTheme.iconDisabledColor : mainTheme.iconColor, iconHoverColor = mainTheme.iconHoverColor, iconBgColor = mainTheme.iconBgColor, iconBgHoverColor = isDisabled
     ? mainTheme.iconBgColor
-    : mainTheme.iconBgHoverColor, }) => {
+    : mainTheme.iconBgHoverColor, tooltip, }) => {
     const haveAction = Boolean(onClick);
+    const iconRef = useRef(null);
+    const [showTooltip, setShowTooltip] = useState(false);
+    const [tooltipPos, setTooltipPos] = useState({ top: 0, left: 0 });
+    const [showBelow, setShowBelow] = useState(false);
+    useEffect(() => {
+        if (showTooltip && iconRef.current) {
+            const rect = iconRef.current.getBoundingClientRect();
+            const tooltipHeight = 28;
+            const spaceAbove = rect.top;
+            const spaceBelow = window.innerHeight - rect.bottom;
+            setShowBelow(spaceBelow < tooltipHeight && spaceAbove > tooltipHeight);
+            setTooltipPos({
+                top: showBelow ? rect.bottom : rect.top,
+                left: rect.left + rect.width / 2 - 16,
+            });
+        }
+    }, [showTooltip, showBelow]);
     const handleClick = () => {
         if (!isDisabled && !!onClick) {
             onClick();
         }
     };
-    return (React.createElement(IconElement, { onClick: handleClick, haveAction: haveAction, right: right, left: left, isDisabled: isDisabled, iconColor: iconColor, iconHoverColor: iconHoverColor, iconBgColor: iconBgColor, iconBgHoverColor: iconBgHoverColor, isActive: isActive, noPadding: noPadding },
-        React.createElement("svg", { width: size, height: size, viewBox: '0 0 24 24', preserveAspectRatio: "xMidYMid meet", x: "0", y: "0", name: name },
-            React.createElement("path", { d: iconsPath[name], fill: isActive ? iconHoverColor : iconColor }))));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(IconElement, { ref: iconRef, onClick: handleClick, haveAction: haveAction, right: right, left: left, isDisabled: isDisabled, iconColor: iconColor, iconHoverColor: iconHoverColor, iconBgColor: iconBgColor, iconBgHoverColor: iconBgHoverColor, isActive: isActive, noPadding: noPadding, onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false) },
+            React.createElement("svg", { width: size, height: size, viewBox: '0 0 24 24', preserveAspectRatio: "xMidYMid meet", x: "0", y: "0", name: name },
+                React.createElement("path", { d: iconsPath[name], fill: isActive ? iconHoverColor : iconColor }))),
+        tooltip && showTooltip && (React.createElement(Tooltip, { text: tooltip, position: tooltipPos, showBelow: showBelow }))));
 };

package/dist/esm/components/Icons/Icon.styles.js

@@ -3,6 +3,7 @@ import { Theme } from '../../Theme/Theme';
 export const IconElement = styled.div `
   transition: 300ms;
   box-sizing: border-box;
+  position: relative;
   width: auto;
   display: inline-flex;
   border-radius: ${Theme.borderRadius.m};

package/dist/esm/components/Tooltip/Tooltip.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { TooltipPivot, TooltipWrapper } from './Tooltip.styles';
+export const Tooltip = ({ text, position, showBelow }) => {
+    return createPortal(React.createElement(TooltipWrapper, { position: position, showBelow: showBelow },
+        text,
+        React.createElement(TooltipPivot, { showBelow: showBelow })), document.body);
+};

package/dist/esm/components/Tooltip/Tooltip.styles.js

@@ -0,0 +1,37 @@
+import styled, { css } from 'styled-components';
+import { Theme } from '../../Theme/Theme';
+export const TooltipWrapper = styled.div `
+  position: absolute;
+  top: ${(p) => (p.showBelow ? p.position.top + 8 : p.position.top - 36)}px;
+  left: ${(p) => p.position.left}px;
+  background: ${Theme.colors.darkGray};
+  color: ${Theme.colors.white};
+  padding: ${Theme.padding.s} ${Theme.padding.m};
+  border-radius: ${Theme.borderRadius.m};
+  font-size: ${Theme.fontSize.s};
+  z-index: 9999;
+  white-space: nowrap;
+  box-shadow: 0 2px 8px ${Theme.colors.overlayer};
+  pointer-events: none;
+`;
+export const TooltipPivot = styled.span `
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+
+  ${({ showBelow }) => showBelow
+    ? css `
+          top: -7px;
+          border-bottom: 7px solid #222;
+          border-top: none;
+        `
+    : css `
+          bottom: -7px;
+          border-top: 7px solid #222;
+          border-bottom: none;
+        `}
+`;

package/dist/esm/components/Tooltip/index.js

@@ -0,0 +1 @@
+export * from './Tooltip';

package/dist/esm/index.js

@@ -24,4 +24,5 @@ export * from './components/Sort';
 export * from './components/Table';
 export * from './components/Tile';
 export * from './components/Toogle';
+export * from './components/Tooltip';
 export * from './components/Typography';

package/dist/types/Theme/Theme.d.ts

@@ -13,6 +13,7 @@ export declare const Theme: {
         accent_light: string;
         black: string;
         text: string;
+        darkGray: string;
         gray_1: string;
         gray_2: string;
         gray_3: string;

package/dist/types/components/Card/Card.d.ts

@@ -13,6 +13,7 @@ interface ICardProps {
     iconHoverColor?: string;
     shadow?: boolean;
     headerDivader?: boolean;
+    actionDisabled?: boolean;
 }
 export declare const Card: FC<ICardProps>;
 export {};

package/dist/types/components/ElementHeader/ElementHeader.d.ts

@@ -13,6 +13,7 @@ interface IElementHeader {
     options?: IAction[];
     theme?: any;
     bottomDivader?: boolean;
+    actionDisabled?: boolean;
 }
 export declare const ElementHeader: FC<IElementHeader>;
 export {};

package/dist/types/components/Icons/Icon.d.ts

@@ -12,5 +12,6 @@ export interface IIconActionProps {
     isDisabled?: boolean;
     isActive?: boolean;
     noPadding?: boolean;
+    tooltip?: string;
 }
 export declare const Icon: FC<IIconActionProps>;

package/dist/types/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+interface ITooltipProps {
+    text: string;
+    position: {
+        top: number;
+        left: number;
+    };
+    showBelow: boolean;
+}
+export declare const Tooltip: FC<ITooltipProps>;
+export {};

package/dist/types/components/Tooltip/Tooltip.styles.d.ts

@@ -0,0 +1,13 @@
+interface ITooltipWrapperProps {
+    position: {
+        top: number;
+        left: number;
+    };
+    showBelow: boolean;
+}
+export declare const TooltipWrapper: import("styled-components").StyledComponent<"div", any, ITooltipWrapperProps, never>;
+interface ITooltipPivotProps {
+    showBelow: boolean;
+}
+export declare const TooltipPivot: import("styled-components").StyledComponent<"span", any, ITooltipPivotProps, never>;
+export {};

package/dist/types/components/Tooltip/index.d.ts

@@ -0,0 +1 @@
+export * from './Tooltip';

package/dist/types/index.d.ts

@@ -24,4 +24,5 @@ export * from './components/Sort';
 export * from './components/Table';
 export * from './components/Tile';
 export * from './components/Toogle';
+export * from './components/Tooltip';
 export * from './components/Typography';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "venice-ui",
-  "version": "2.1.16",
+  "version": "2.1.18",
   "description": "Component library",
   "main": "index.js",
   "module": "./dist/esm/index.js",