venice-ui 2.0.29 → 2.0.31

package/dist/cjs/components/Dropdown/Dropdown.js

@@ -31,7 +31,9 @@ const DropdownElements_1 = require("./DropdownElements");
 const Input_1 = require("../Input");
 const common_1 = require("../common");
 const react_dom_1 = require("react-dom");
-const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, width, options, value, placeholder = 'Please select', name, handleSelect, position = 'left', zIndex, readOnly = false, }) => {
+const Icons_1 = require("../Icons");
+const Theme_1 = require("../../Theme");
+const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, width, options, value, placeholder = 'Please select', name, handleSelect, position = 'left', zIndex, readOnly = false, theme = Theme_1.mainTheme, }) => {
     const [open, toogleOpen] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
     const sourceRef = (0, react_1.useRef)(null);
@@ -80,6 +82,8 @@ const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = fa
         label && (react_1.default.createElement(Input_1.InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
         readOnly ? (react_1.default.createElement(Input_1.InputReadOnlyElement, { inputSize: size }, value)) : (react_1.default.createElement(Dropdown_styles_1.DropdownElement, { onClick: () => handleOpen(), ref: sourceRef },
             react_1.default.createElement(DropdownElements_1.Field, { inputSize: size, disabled: disabled, width: width, active: open, error: error }, value ? getLabelForValue(value) : placeholder),
+            react_1.default.createElement(Input_1.EyeIconWrapper, { size: size },
+                react_1.default.createElement(Icons_1.Icon, { name: open ? 'arrow_drop_up' : 'arrow_drop_down', size: 24, iconColor: theme.inputDefaultTextColor, iconHoverColor: theme.inputDefaultTextColor, iconBgHoverColor: "transparent" })),
             open &&
                 (0, react_dom_1.createPortal)(react_1.default.createElement(common_1.Panel, { style: dropdownStyles, ref: ref, size: size, fullWidth: true, zIndex: zIndex }, options &&
                     options.map((option) => (react_1.default.createElement(common_1.PanelOption, { key: option.value, active: option.value === value, onClick: (e) => selectOption(e, option.value) }, option.label)))), document.body),

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

@@ -15,9 +15,10 @@ 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 leftSide = () => {
         if (title) {
-            return (react_1.default.createElement(Aligment_1.Aligment, { align: "center", direction: "row", width: "auto" },
-                handleBack && (react_1.default.createElement(Icons_1.Icon, { name: "back_arrow", onClick: () => handleBack(), left: true })),
-                react_1.default.createElement(Typography_1.TextHeader, null, title)));
+            return (react_1.default.createElement(ElementHeader_styles_1.TitleWrapper, null,
+                react_1.default.createElement(Aligment_1.Aligment, { align: "center", direction: "row", width: "auto" },
+                    handleBack && (react_1.default.createElement(Icons_1.Icon, { name: "back_arrow", onClick: () => handleBack(), left: true })),
+                    react_1.default.createElement(Typography_1.TextHeader, null, title))));
         }
         else if (!title && children) {
             return children;

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

@@ -3,16 +3,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ElementHeaderWrapper = void 0;
+exports.TitleWrapper = exports.ElementHeaderWrapper = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 const Aligment_1 = require("../Aligment");
 const Theme_1 = require("../../Theme/Theme");
 exports.ElementHeaderWrapper = (0, styled_components_1.default)(Aligment_1.Aligment) `
   width: 100%;
-  border-top-left-radius:${Theme_1.Theme.borderRadius.m};
-  border-top-right-radius:${Theme_1.Theme.borderRadius.m};
+  border-top-left-radius: ${Theme_1.Theme.borderRadius.m};
+  border-top-right-radius: ${Theme_1.Theme.borderRadius.m};
   ${(p) => p.bottomDivader &&
     `
     border-bottom: 1px solid rgba(0, 0, 0, 0.14);
     `}
 `;
+exports.TitleWrapper = styled_components_1.default.div `
+  height: 36px;
+  box-sizing: border-box;
+  display: flex;
+`;

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

@@ -8,15 +8,16 @@ const react_1 = __importDefault(require("react"));
 const Theme_1 = require("../../Theme/Theme");
 const Icon_styles_1 = require("./Icon.styles");
 const IconsPath_1 = require("./IconsPath");
-const Icon = ({ size = 24, name = 'person', right = false, left = false, isActive = false, onClick, 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
+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, }) => {
+    const haveAction = Boolean(onClick);
     const handleClick = () => {
         if (!isDisabled && !!onClick) {
             onClick();
         }
     };
-    return (react_1.default.createElement(Icon_styles_1.IconElement, { onClick: handleClick, right: right, left: left, isDisabled: isDisabled, iconColor: iconColor, iconHoverColor: iconHoverColor, iconBgColor: iconBgColor, iconBgHoverColor: iconBgHoverColor, isActive: isActive, noPadding: noPadding },
+    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 }))));
 };

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

@@ -14,13 +14,18 @@ exports.IconElement = styled_components_1.default.div `
   border-radius: ${Theme_1.Theme.borderRadius.m};
   margin-left: ${(p) => (p.right ? Theme_1.Theme.padding.m : '0')};
   margin-right: ${(p) => (p.left ? Theme_1.Theme.padding.m : '0')};
-  padding: ${p => p.noPadding ? '0' : '4px'};
-  cursor: ${(p) => (!p.isDisabled ? 'pointer' : 'not-allowed')};
+  padding: ${(p) => (p.noPadding ? '0' : '4px')};
+  cursor: ${(p) => p.isDisabled ? 'not-allowed' : 'normal'};
   background-color: ${(p) => (p.isActive ? p.iconBgHoverColor : p.iconBgColor)};
-  :hover {
-    background-color: ${(p) => !p.isDisabled && p.iconBgHoverColor};
-    path {
-      fill: ${(p) => !p.isDisabled && p.iconHoverColor};
+  ${(p) => p.haveAction &&
+    `
+    cursor:pointer;
+    :hover {
+      background-color: ${!p.isDisabled && p.iconBgHoverColor};
+      path {
+        fill: ${!p.isDisabled && p.iconHoverColor};
+      }
     }
-  }
+    
+    `}
 `;

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

@@ -25,10 +25,10 @@ exports.iconsPath = {
     filters: 'M10 18v-2h4v2Zm-4-5v-2h12v2ZM3 8V6h18v2Z',
     fit_to_screen: 'M20 9V6H17V4H20C20.55 4 21.0208 4.19583 21.4125 4.5875C21.8042 4.97917 22 5.45 22 6V9H20ZM2 9V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H7V6H4V9H2ZM17 20V18H20V15H22V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H17ZM4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V15H4V18H7V20H4ZM6 16V8H18V16H6ZM8 14H16V10H8V14Z',
     forward: 'M8.025 22 6.25 20.225 14.475 12 6.25 3.775 8.025 2l10 10Z',
+    info: 'M11 17H13V11H11V17ZM12 9C12.2833 9 12.5208 8.90417 12.7125 8.7125C12.9042 8.52083 13 8.28333 13 8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8C11 8.28333 11.0958 8.52083 11.2875 8.7125C11.4792 8.90417 11.7167 9 12 9ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z',
     home: 'M4 21V9l8-6 8 6v12h-6v-7h-4v7Zm2-2h2v-7h8v7h2v-9l-6-4.5L6 10Zm6-6.75Z',
-    orginal_size: 'M5 19V14H7V17H10V19H5ZM5 10V5H10V7H7V10H5ZM14 19V17H17V14H19V19H14ZM17 10V7H14V5H19V10H17Z',
-    search: 'm19.6 21-6.3-6.3q-.75.6-1.725.95Q10.6 16 9.5 16q-2.725 0-4.612-1.887Q3 12.225 3 9.5q0-2.725 1.888-4.613Q6.775 3 9.5 3t4.613 1.887Q16 6.775 16 9.5q0 1.1-.35 2.075-.35.975-.95 1.725l6.3 6.3ZM9.5 14q1.875 0 3.188-1.312Q14 11.375 14 9.5q0-1.875-1.312-3.188Q11.375 5 9.5 5 7.625 5 6.312 6.312 5 7.625 5 9.5q0 1.875 1.312 3.188Q7.625 14 9.5 14Z',
-    search_explore: 'M12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C14.4333 2 16.5625 2.7625 18.3875 4.2875C20.2125 5.8125 21.35 7.725 21.8 10.025H19.75C19.4333 8.80833 18.8625 7.72083 18.0375 6.7625C17.2125 5.80417 16.2 5.08333 15 4.6V5C15 5.55 14.8042 6.02083 14.4125 6.4125C14.0208 6.80417 13.55 7 13 7H11V9C11 9.28333 10.9042 9.52083 10.7125 9.7125C10.5208 9.90417 10.2833 10 10 10H8V12H10V15H9L4.2 10.2C4.15 10.5 4.10417 10.8 4.0625 11.1C4.02083 11.4 4 11.7 4 12C4 14.1833 4.76667 16.0583 6.3 17.625C7.83333 19.1917 9.73333 19.9833 12 20V22ZM21.1 21.5L17.9 18.3C17.55 18.5 17.175 18.6667 16.775 18.8C16.375 18.9333 15.95 19 15.5 19C14.25 19 13.1875 18.5625 12.3125 17.6875C11.4375 16.8125 11 15.75 11 14.5C11 13.25 11.4375 12.1875 12.3125 11.3125C13.1875 10.4375 14.25 10 15.5 10C16.75 10 17.8125 10.4375 18.6875 11.3125C19.5625 12.1875 20 13.25 20 14.5C20 14.95 19.9333 15.375 19.8 15.775C19.6667 16.175 19.5 16.55 19.3 16.9L22.5 20.1L21.1 21.5ZM15.5 17C16.2 17 16.7917 16.7583 17.275 16.275C17.7583 15.7917 18 15.2 18 14.5C18 13.8 17.7583 13.2083 17.275 12.725C16.7917 12.2417 16.2 12 15.5 12C14.8 12 14.2083 12.2417 13.725 12.725C13.2417 13.2083 13 13.8 13 14.5C13 15.2 13.2417 15.7917 13.725 16.275C14.2083 16.7583 14.8 17 15.5 17Z',
+    list: 'M8 17C8.28333 17 8.52083 16.9042 8.7125 16.7125C8.90417 16.5208 9 16.2833 9 16C9 15.7167 8.90417 15.4792 8.7125 15.2875C8.52083 15.0958 8.28333 15 8 15C7.71667 15 7.47917 15.0958 7.2875 15.2875C7.09583 15.4792 7 15.7167 7 16C7 16.2833 7.09583 16.5208 7.2875 16.7125C7.47917 16.9042 7.71667 17 8 17ZM8 13C8.28333 13 8.52083 12.9042 8.7125 12.7125C8.90417 12.5208 9 12.2833 9 12C9 11.7167 8.90417 11.4792 8.7125 11.2875C8.52083 11.0958 8.28333 11 8 11C7.71667 11 7.47917 11.0958 7.2875 11.2875C7.09583 11.4792 7 11.7167 7 12C7 12.2833 7.09583 12.5208 7.2875 12.7125C7.47917 12.9042 7.71667 13 8 13ZM8 9C8.28333 9 8.52083 8.90417 8.7125 8.7125C8.90417 8.52083 9 8.28333 9 8C9 7.71667 8.90417 7.47917 8.7125 7.2875C8.52083 7.09583 8.28333 7 8 7C7.71667 7 7.47917 7.09583 7.2875 7.2875C7.09583 7.47917 7 7.71667 7 8C7 8.28333 7.09583 8.52083 7.2875 8.7125C7.47917 8.90417 7.71667 9 8 9ZM11 17H17V15H11V17ZM11 13H17V11H11V13ZM11 9H17V7H11V9ZM5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19Z',
+    lock: 'M6 22q-.825 0-1.412-.587Q4 20.825 4 20V10q0-.825.588-1.413Q5.175 8 6 8h1V6q0-2.075 1.463-3.538Q9.925 1 12 1t3.538 1.462Q17 3.925 17 6v2h1q.825 0 1.413.587Q20 9.175 20 10v10q0 .825-.587 1.413Q18.825 22 18 22Zm0-2h12V10H6v10Zm6-3q.825 0 1.413-.587Q14 15.825 14 15q0-.825-.587-1.413Q12.825 13 12 13q-.825 0-1.412.587Q10 14.175 10 15q0 .825.588 1.413Q11.175 17 12 17ZM9 8h6V6q0-1.25-.875-2.125T12 3q-1.25 0-2.125.875T9 6ZM6 20V10v10Z',
     more_vert: 'M12 20q-.825 0-1.412-.587Q10 18.825 10 18q0-.825.588-1.413Q11.175 16 12 16t1.413.587Q14 17.175 14 18q0 .825-.587 1.413Q12.825 20 12 20Zm0-6q-.825 0-1.412-.588Q10 12.825 10 12t.588-1.413Q11.175 10 12 10t1.413.587Q14 11.175 14 12q0 .825-.587 1.412Q12.825 14 12 14Zm0-6q-.825 0-1.412-.588Q10 6.825 10 6t.588-1.412Q11.175 4 12 4t1.413.588Q14 5.175 14 6t-.587 1.412Q12.825 8 12 8Z',
     more_horiz: 'M6 14C5.45 14 4.97917 13.8042 4.5875 13.4125C4.19583 13.0208 4 12.55 4 12C4 11.45 4.19583 10.9792 4.5875 10.5875C4.97917 10.1958 5.45 10 6 10C6.55 10 7.02083 10.1958 7.4125 10.5875C7.80417 10.9792 8 11.45 8 12C8 12.55 7.80417 13.0208 7.4125 13.4125C7.02083 13.8042 6.55 14 6 14ZM12 14C11.45 14 10.9792 13.8042 10.5875 13.4125C10.1958 13.0208 10 12.55 10 12C10 11.45 10.1958 10.9792 10.5875 10.5875C10.9792 10.1958 11.45 10 12 10C12.55 10 13.0208 10.1958 13.4125 10.5875C13.8042 10.9792 14 11.45 14 12C14 12.55 13.8042 13.0208 13.4125 13.4125C13.0208 13.8042 12.55 14 12 14ZM18 14C17.45 14 16.9792 13.8042 16.5875 13.4125C16.1958 13.0208 16 12.55 16 12C16 11.45 16.1958 10.9792 16.5875 10.5875C16.9792 10.1958 17.45 10 18 10C18.55 10 19.0208 10.1958 19.4125 10.5875C19.8042 10.9792 20 11.45 20 12C20 12.55 19.8042 13.0208 19.4125 13.4125C19.0208 13.8042 18.55 14 18 14Z',
     move: 'M15 3L17.3 5.3L14.41 8.17L15.83 9.59L18.7 6.7L21 9V3H15ZM3 9L5.3 6.7L8.17 9.59L9.59 8.17L6.7 5.3L9 3H3V9ZM9 21L6.7 18.7L9.59 15.83L8.17 14.41L5.3 17.3L3 15V21H9ZM21 15L18.7 17.3L15.83 14.41L14.41 15.83L17.3 18.7L15 21H21V15Z',
@@ -37,8 +37,7 @@ exports.iconsPath = {
     move_se: 'M19 9H17V15.59L5.41 4L4 5.41L15.59 17H9V19H19V9Z',
     move_sw: 'M15 19V17H8.41L20 5.41L18.59 4L7 15.59V9H5V19H15Z',
     menu: 'M3 18v-2h18v2Zm0-5v-2h18v2Zm0-5V6h18v2Z',
-    unlock: 'M6 8h9V6q0-1.25-.875-2.125T12 3q-1.25 0-2.125.875T9 6H7q0-2.075 1.463-3.538Q9.925 1 12 1t3.538 1.462Q17 3.925 17 6v2h1q.825 0 1.413.587Q20 9.175 20 10v10q0 .825-.587 1.413Q18.825 22 18 22H6q-.825 0-1.412-.587Q4 20.825 4 20V10q0-.825.588-1.413Q5.175 8 6 8Zm0 12h12V10H6v10Zm6-3q.825 0 1.413-.587Q14 15.825 14 15q0-.825-.587-1.413Q12.825 13 12 13q-.825 0-1.412.587Q10 14.175 10 15q0 .825.588 1.413Q11.175 17 12 17Zm-6 3V10v10Z',
-    lock: 'M6 22q-.825 0-1.412-.587Q4 20.825 4 20V10q0-.825.588-1.413Q5.175 8 6 8h1V6q0-2.075 1.463-3.538Q9.925 1 12 1t3.538 1.462Q17 3.925 17 6v2h1q.825 0 1.413.587Q20 9.175 20 10v10q0 .825-.587 1.413Q18.825 22 18 22Zm0-2h12V10H6v10Zm6-3q.825 0 1.413-.587Q14 15.825 14 15q0-.825-.587-1.413Q12.825 13 12 13q-.825 0-1.412.587Q10 14.175 10 15q0 .825.588 1.413Q11.175 17 12 17ZM9 8h6V6q0-1.25-.875-2.125T12 3q-1.25 0-2.125.875T9 6ZM6 20V10v10Z',
+    orginal_size: 'M5 19V14H7V17H10V19H5ZM5 10V5H10V7H7V10H5ZM14 19V17H17V14H19V19H14ZM17 10V7H14V5H19V10H17Z',
     person: 'M12 12q-1.65 0-2.825-1.175Q8 9.65 8 8q0-1.65 1.175-2.825Q10.35 4 12 4q1.65 0 2.825 1.175Q16 6.35 16 8q0 1.65-1.175 2.825Q13.65 12 12 12Zm-8 8v-2.8q0-.85.438-1.563.437-.712 1.162-1.087 1.55-.775 3.15-1.163Q10.35 13 12 13t3.25.387q1.6.388 3.15 1.163.725.375 1.162 1.087Q20 16.35 20 17.2V20Zm2-2h12v-.8q0-.275-.137-.5-.138-.225-.363-.35-1.35-.675-2.725-1.013Q13.4 15 12 15t-2.775.337Q7.85 15.675 6.5 16.35q-.225.125-.362.35-.138.225-.138.5Zm6-8q.825 0 1.413-.588Q14 8.825 14 8t-.587-1.412Q12.825 6 12 6q-.825 0-1.412.588Q10 7.175 10 8t.588 1.412Q11.175 10 12 10Zm0-2Zm0 10Z',
     point_here: 'M5.54 8.46L2 12L5.54 15.54L7.3 13.77L5.54 12L7.3 10.23L5.54 8.46ZM12 18.46L10.23 16.7L8.46 18.46L12 22L15.54 18.46L13.77 16.7L12 18.46ZM18.46 8.46L16.7 10.23L18.46 12L16.7 13.77L18.46 15.54L22 12L18.46 8.46ZM8.46 5.54L10.23 7.3L12 5.54L13.77 7.3L15.54 5.54L12 2L8.46 5.54Z M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z',
     point_dot: 'M12 8C9.79 8 8 9.79 8 12C8 14.21 9.79 16 12 16C14.21 16 16 14.21 16 12C16 9.79 14.21 8 12 8ZM20.94 11C20.48 6.83 17.17 3.52 13 3.06V1H11V3.06C6.83 3.52 3.52 6.83 3.06 11H1V13H3.06C3.52 17.17 6.83 20.48 11 20.94V23H13V20.94C17.17 20.48 20.48 17.17 20.94 13H23V11H20.94ZM12 19C8.13 19 5 15.87 5 12C5 8.13 8.13 5 12 5C15.87 5 19 8.13 19 12C19 15.87 15.87 19 12 19Z',
@@ -47,9 +46,12 @@ exports.iconsPath = {
     remove: 'M19 13H5V11H19V13Z',
     remove_circle: 'M7 11V13H17V11H7ZM12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z',
     new_tab: 'M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H12V5H5V19H19V12H21V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM9.7 15.7L8.3 14.3L17.6 5H14V3H21V10H19V6.4L9.7 15.7Z',
+    search: 'm19.6 21-6.3-6.3q-.75.6-1.725.95Q10.6 16 9.5 16q-2.725 0-4.612-1.887Q3 12.225 3 9.5q0-2.725 1.888-4.613Q6.775 3 9.5 3t4.613 1.887Q16 6.775 16 9.5q0 1.1-.35 2.075-.35.975-.95 1.725l6.3 6.3ZM9.5 14q1.875 0 3.188-1.312Q14 11.375 14 9.5q0-1.875-1.312-3.188Q11.375 5 9.5 5 7.625 5 6.312 6.312 5 7.625 5 9.5q0 1.875 1.312 3.188Q7.625 14 9.5 14Z',
+    search_explore: 'M12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C14.4333 2 16.5625 2.7625 18.3875 4.2875C20.2125 5.8125 21.35 7.725 21.8 10.025H19.75C19.4333 8.80833 18.8625 7.72083 18.0375 6.7625C17.2125 5.80417 16.2 5.08333 15 4.6V5C15 5.55 14.8042 6.02083 14.4125 6.4125C14.0208 6.80417 13.55 7 13 7H11V9C11 9.28333 10.9042 9.52083 10.7125 9.7125C10.5208 9.90417 10.2833 10 10 10H8V12H10V15H9L4.2 10.2C4.15 10.5 4.10417 10.8 4.0625 11.1C4.02083 11.4 4 11.7 4 12C4 14.1833 4.76667 16.0583 6.3 17.625C7.83333 19.1917 9.73333 19.9833 12 20V22ZM21.1 21.5L17.9 18.3C17.55 18.5 17.175 18.6667 16.775 18.8C16.375 18.9333 15.95 19 15.5 19C14.25 19 13.1875 18.5625 12.3125 17.6875C11.4375 16.8125 11 15.75 11 14.5C11 13.25 11.4375 12.1875 12.3125 11.3125C13.1875 10.4375 14.25 10 15.5 10C16.75 10 17.8125 10.4375 18.6875 11.3125C19.5625 12.1875 20 13.25 20 14.5C20 14.95 19.9333 15.375 19.8 15.775C19.6667 16.175 19.5 16.55 19.3 16.9L22.5 20.1L21.1 21.5ZM15.5 17C16.2 17 16.7917 16.7583 17.275 16.275C17.7583 15.7917 18 15.2 18 14.5C18 13.8 17.7583 13.2083 17.275 12.725C16.7917 12.2417 16.2 12 15.5 12C14.8 12 14.2083 12.2417 13.725 12.725C13.2417 13.2083 13 13.8 13 14.5C13 15.2 13.2417 15.7917 13.725 16.275C14.2083 16.7583 14.8 17 15.5 17Z',
     sort_up: 'M12 13.1178L5.06674 20L4 18.9411L12 11L20 18.9411L18.9333 20L12 13.1178Z',
     sort_down: 'M12 13.0667L4 5.06674L5.06674 4L12 10.9333L18.9333 4L20 5.06674L12 13.0667Z',
     triage: 'M12 7.77L18.39 18H5.61L12 7.77ZM12 4L2 20H22L12 4Z',
+    unlock: 'M6 8h9V6q0-1.25-.875-2.125T12 3q-1.25 0-2.125.875T9 6H7q0-2.075 1.463-3.538Q9.925 1 12 1t3.538 1.462Q17 3.925 17 6v2h1q.825 0 1.413.587Q20 9.175 20 10v10q0 .825-.587 1.413Q18.825 22 18 22H6q-.825 0-1.412-.587Q4 20.825 4 20V10q0-.825.588-1.413Q5.175 8 6 8Zm0 12h12V10H6v10Zm6-3q.825 0 1.413-.587Q14 15.825 14 15q0-.825-.587-1.413Q12.825 13 12 13q-.825 0-1.412.587Q10 14.175 10 15q0 .825.588 1.413Q11.175 17 12 17Zm-6 3V10v10Z',
     upgrade: 'M8.6 22.5L6.7 19.3L3.1 18.5L3.45 14.8L1 12L3.45 9.2L3.1 5.5L6.7 4.7L8.6 1.5L12 2.95L15.4 1.5L17.3 4.7L20.9 5.5L20.55 9.2L23 12L20.55 14.8L20.9 18.5L17.3 19.3L15.4 22.5L12 21.05L8.6 22.5ZM9.45 19.95L12 18.85L14.6 19.95L16 17.55L18.75 16.9L18.5 14.1L20.35 12L18.5 9.85L18.75 7.05L16 6.45L14.55 4.05L12 5.15L9.4 4.05L8 6.45L5.25 7.05L5.5 9.85L3.65 12L5.5 14.1L5.25 16.95L8 17.55L9.45 19.95ZM10.95 15.55L16.6 9.9L15.2 8.45L10.95 12.7L8.8 10.6L7.4 12L10.95 15.55Z',
     visibility: 'M12 16q1.875 0 3.188-1.312Q16.5 13.375 16.5 11.5q0-1.875-1.312-3.188Q13.875 7 12 7q-1.875 0-3.188 1.312Q7.5 9.625 7.5 11.5q0 1.875 1.312 3.188Q10.125 16 12 16Zm0-1.8q-1.125 0-1.912-.788Q9.3 12.625 9.3 11.5t.788-1.913Q10.875 8.8 12 8.8t1.913.787q.787.788.787 1.913t-.787 1.912q-.788.788-1.913.788Zm0 4.8q-3.65 0-6.65-2.038-3-2.037-4.35-5.462 1.35-3.425 4.35-5.463Q8.35 4 12 4q3.65 0 6.65 2.037 3 2.038 4.35 5.463-1.35 3.425-4.35 5.462Q15.65 19 12 19Zm0-7.5Zm0 5.5q2.825 0 5.188-1.488Q19.55 14.025 20.8 11.5q-1.25-2.525-3.612-4.013Q14.825 6 12 6 9.175 6 6.812 7.487 4.45 8.975 3.2 11.5q1.25 2.525 3.612 4.012Q9.175 17 12 17Z',
     visability_off: 'M16.1 13.3L14.65 11.85C14.8 11.0667 14.575 10.3333 13.975 9.65C13.375 8.96667 12.6 8.7 11.65 8.85L10.2 7.4C10.4833 7.26667 10.7708 7.16667 11.0625 7.1C11.3542 7.03333 11.6667 7 12 7C13.25 7 14.3125 7.4375 15.1875 8.3125C16.0625 9.1875 16.5 10.25 16.5 11.5C16.5 11.8333 16.4667 12.1458 16.4 12.4375C16.3333 12.7292 16.2333 13.0167 16.1 13.3ZM19.3 16.45L17.85 15.05C18.4833 14.5667 19.0458 14.0375 19.5375 13.4625C20.0292 12.8875 20.45 12.2333 20.8 11.5C19.9667 9.81667 18.7708 8.47917 17.2125 7.4875C15.6542 6.49583 13.9167 6 12 6C11.5167 6 11.0417 6.03333 10.575 6.1C10.1083 6.16667 9.65 6.26667 9.2 6.4L7.65 4.85C8.33333 4.56667 9.03333 4.35417 9.75 4.2125C10.4667 4.07083 11.2167 4 12 4C14.5167 4 16.7583 4.69583 18.725 6.0875C20.6917 7.47917 22.1167 9.28333 23 11.5C22.6167 12.4833 22.1125 13.3958 21.4875 14.2375C20.8625 15.0792 20.1333 15.8167 19.3 16.45ZM19.8 22.6L15.6 18.45C15.0167 18.6333 14.4292 18.7708 13.8375 18.8625C13.2458 18.9542 12.6333 19 12 19C9.48333 19 7.24167 18.3042 5.275 16.9125C3.30833 15.5208 1.88333 13.7167 1 11.5C1.35 10.6167 1.79167 9.79583 2.325 9.0375C2.85833 8.27917 3.46667 7.6 4.15 7L1.4 4.2L2.8 2.8L21.2 21.2L19.8 22.6ZM5.55 8.4C5.06667 8.83333 4.625 9.30833 4.225 9.825C3.825 10.3417 3.48333 10.9 3.2 11.5C4.03333 13.1833 5.22917 14.5208 6.7875 15.5125C8.34583 16.5042 10.0833 17 12 17C12.3333 17 12.6583 16.9792 12.975 16.9375C13.2917 16.8958 13.6167 16.85 13.95 16.8L13.05 15.85C12.8667 15.9 12.6917 15.9375 12.525 15.9625C12.3583 15.9875 12.1833 16 12 16C10.75 16 9.6875 15.5625 8.8125 14.6875C7.9375 13.8125 7.5 12.75 7.5 11.5C7.5 11.3167 7.5125 11.1417 7.5375 10.975C7.5625 10.8083 7.6 10.6333 7.65 10.45L5.55 8.4Z',

package/dist/cjs/components/Input/Input.js

@@ -30,7 +30,7 @@ const Aligment_1 = require("../Aligment");
 const Input_styles_1 = require("./Input.styles");
 const Icons_1 = require("../Icons");
 const Theme_1 = require("../../Theme");
-const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disabled = false, size = 'medium', handleChange, handleSubmit, width, error, placeholder, min, max, step = 0.1, autoFocus, theme = Theme_1.mainTheme, readOnly = false, }) => {
+const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disabled = false, size = 'medium', handleChange, handleSubmit, width, error, placeholder, min, max, step = 0.1, autoFocus, theme = Theme_1.mainTheme, readOnly = false, prefix, }) => {
     const calculateNumberValue = (numberValue) => {
         return isNaN(parseFloat(numberValue))
             ? numberValue
@@ -92,7 +92,8 @@ const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disab
             label && (react_1.default.createElement(Input_styles_1.InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
             react_1.default.createElement(Input_styles_1.InputWrapper, { width: width },
                 react_1.default.createElement(react_1.default.Fragment, null, readOnly ? (react_1.default.createElement(Input_styles_1.InputReadOnlyElement, { inputSize: size }, inputType === 'password' ? '******' : value)) : (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(Input_styles_1.InputTextElement, { autoFocus: autoFocus, inputSize: size, type: showPassword ? 'text' : inputType, disabled: disabled, name: name, value: value, onChange: onChange, onKeyDown: onKeyDown, onBlur: onBlurValidation, error: error, placeholder: placeholder, min: min, max: max, step: step }),
+                    react_1.default.createElement(Input_styles_1.InputTextElement, { autoFocus: autoFocus, inputSize: size, type: showPassword ? 'text' : inputType, disabled: disabled, name: name, value: value, onChange: onChange, onKeyDown: onKeyDown, onBlur: onBlurValidation, error: error, placeholder: placeholder, min: min, max: max, step: step, prefix: prefix }),
+                    prefix && react_1.default.createElement(Input_styles_1.Prefix, { inputSize: size }, prefix),
                     inputType === 'password' && (react_1.default.createElement(Input_styles_1.EyeIconWrapper, { size: size },
                         react_1.default.createElement(Icons_1.Icon, { name: showPassword ? 'visability_off' : 'visibility', size: 24, onClick: tooglePassword, iconColor: theme.inputDefaultTextColor, iconBgHoverColor: "transparent" }))),
                     type === 'increase' && (react_1.default.createElement(Input_styles_1.IconsWrapper, null,

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

@@ -3,11 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconsWrapper = exports.EyeIconWrapper = exports.InputErrorMsg = exports.InputWrapper = exports.InputLabelElement = exports.InputReadOnlyElement = exports.InputTextElement = void 0;
+exports.Prefix = exports.IconsWrapper = exports.EyeIconWrapper = exports.InputErrorMsg = exports.InputWrapper = exports.InputLabelElement = exports.InputReadOnlyElement = exports.InputTextElement = void 0;
 const common_1 = require("../common");
 const styled_components_1 = __importDefault(require("styled-components"));
-const Theme_1 = require("../../Theme");
 const Typography_1 = require("../Typography");
+const Theme_1 = require("../../Theme");
 exports.InputTextElement = styled_components_1.default.input `
   position: relative;
   box-sizing: border-box;
@@ -20,7 +20,7 @@ exports.InputTextElement = styled_components_1.default.input `
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  ${(p) => (0, common_1.setSize)(p.inputSize)}
+  ${(p) => (p.prefix ? (0, common_1.setSizeWithPrefix)(p.inputSize) : (0, common_1.setSize)(p.inputSize))}
   color: ${(p) => p.theme.inputDefaultTextColor};
   width: ${(p) => (p.width ? p.width : '100%')};
   ${(p) => p.type === 'password' && `padding-right:32px;`}
@@ -63,8 +63,8 @@ exports.InputReadOnlyElement = styled_components_1.default.div `
   ${(p) => (0, common_1.setHeight)(p.inputSize)}
   color: ${(p) => p.theme.inputDefaultTextColor};
   width: ${(p) => (p.width ? p.width : '100%')};
-  padding-left:0;
-  border-bottom:1px solid #dddddd;
+  padding-left: 0;
+  border-bottom: 1px solid #dddddd;
 `;
 exports.InputLabelElement = (0, styled_components_1.default)(Typography_1.TextLabel) `
   ${(p) => p.labelPosition === 'top' && `margin-bottom: ${Theme_1.Theme.padding.s};`}
@@ -90,3 +90,13 @@ exports.IconsWrapper = styled_components_1.default.div `
   display: flex;
   align-items: center;
 `;
+exports.Prefix = styled_components_1.default.div `
+  position: absolute;
+  dispaly: flex;
+  left: 0px;
+  top: 1px;
+  width: 24px;
+  align-items: center;
+  color: ${Theme_1.Theme.colors.gray_1};
+  ${(p) => (0, common_1.setSize)(p.inputSize)}
+`;

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

@@ -11,9 +11,11 @@ exports.Text = styled_components_1.default.div `
   font-size: ${Theme_1.Theme.fontSize.m};
   line-height: ${Theme_1.Theme.lineHeight.m};
   font-weight: normal;
-  color: ${(p) => (p.color ? p.color : Theme_1.Theme.colors.text)};
-  cursor: ${(p) => (p.action ? 'pointer' : 'default')};
-  ${p => p.action && `
+  color: ${(p) => p.isDisabled ? Theme_1.Theme.colors.gray_3 : p.color ? p.color : Theme_1.Theme.colors.text};
+  cursor: ${(p) => p.isDisabled ? 'not-allowed' : p.action ? 'pointer' : 'default'};
+  ${(p) => p.action &&
+    !p.isDisabled &&
+    `
     :hover{
     color:${Theme_1.Theme.colors.primary};
     }
@@ -43,9 +45,9 @@ exports.TextSubHeader = styled_components_1.default.div `
 exports.TextAccent = styled_components_1.default.div `
   font-size: ${Theme_1.Theme.fontSize.xs};
   line-height: ${Theme_1.Theme.lineHeight.xs};
-  text-transform:uppercase;
+  text-transform: uppercase;
   color: ${(p) => (p.color ? p.color : Theme_1.Theme.colors.text)};
-  cursor:${(p) => (p.action ? 'pointer' : 'default')};
+  cursor: ${(p) => (p.action ? 'pointer' : 'default')};
 `;
 exports.TextLabel = styled_components_1.default.div `
   font-weight: ${(p) => (p.labelPosition === 'left' ? 'normal' : 'bold')};

package/dist/cjs/components/common/inputStyles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setAnimationParams = exports.animationParams = exports.setFieldHeight = exports.fieldHeight = exports.setPanelTop = exports.panelTop = exports.setIconSize = exports.iconSize = exports.setLabelFontSize = exports.lableFontSize = exports.inputColorSchema = exports.setEyeTopPosition = exports.setButtonLoaderSize = exports.setToogleSize = exports.setButtonSize = exports.setHeight = exports.setSize = exports.eyeTopPosition = exports.buttonLoaderHeight = exports.buttonLoaderPadding = exports.buttonPadding = exports.inputPadding = exports.toogleSize = exports.height = exports.sizes = exports.defaultStyles = void 0;
+exports.setAnimationParams = exports.animationParams = exports.setFieldHeight = exports.fieldHeight = exports.setPanelTop = exports.panelTop = exports.setIconSize = exports.iconSize = exports.setLabelFontSize = exports.lableFontSize = exports.inputColorSchema = exports.setEyeTopPosition = exports.setButtonLoaderSize = exports.setToogleSize = exports.setButtonSize = exports.setHeight = exports.setSizeWithPrefix = exports.setSize = exports.eyeTopPosition = exports.buttonLoaderHeight = exports.buttonLoaderPadding = exports.buttonPadding = exports.inputPaddingWithPrefix = exports.inputPadding = exports.toogleSize = exports.height = exports.sizes = exports.defaultStyles = void 0;
 const polished_1 = require("polished");
 const Theme_1 = require("../../Theme");
 exports.defaultStyles = `
@@ -64,6 +64,20 @@ exports.inputPadding = {
   padding: ${Theme_1.Theme.padding.m};
   `,
 };
+exports.inputPaddingWithPrefix = {
+    small: `
+  padding: ${Theme_1.Theme.padding.s};
+  padding-left: calc(2* ${Theme_1.Theme.padding.s} + 24px);
+  `,
+    medium: `
+  padding: ${Theme_1.Theme.padding.m};
+  padding-left: calc(2* ${Theme_1.Theme.padding.m} + 24px);
+  `,
+    large: `
+  padding: ${Theme_1.Theme.padding.m};
+  padding-left: calc(2* ${Theme_1.Theme.padding.m} + 24px);
+  `,
+};
 //TODO refactor this
 exports.buttonPadding = {
     small: `
@@ -102,6 +116,10 @@ const setSize = (size) => {
     return exports.sizes[size] + exports.inputPadding[size];
 };
 exports.setSize = setSize;
+const setSizeWithPrefix = (size) => {
+    return exports.sizes[size] + exports.inputPaddingWithPrefix[size];
+};
+exports.setSizeWithPrefix = setSizeWithPrefix;
 const setHeight = (size) => {
     return exports.height[size];
 };

package/dist/esm/components/Dropdown/Dropdown.js

@@ -2,10 +2,12 @@ import React, { useState, useEffect, useRef } from 'react';
 import { Aligment } from '../Aligment';
 import { DropdownElement } from './Dropdown.styles';
 import { Field } from './DropdownElements';
-import { InputErrorMsg, InputLabelElement, InputReadOnlyElement, } from '../Input';
+import { EyeIconWrapper, InputErrorMsg, InputLabelElement, InputReadOnlyElement, } from '../Input';
 import { Panel, PanelOption } from '../common';
 import { createPortal } from 'react-dom';
-export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, width, options, value, placeholder = 'Please select', name, handleSelect, position = 'left', zIndex, readOnly = false, }) => {
+import { Icon } from '../Icons';
+import { mainTheme } from '../../Theme';
+export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, width, options, value, placeholder = 'Please select', name, handleSelect, position = 'left', zIndex, readOnly = false, theme = mainTheme, }) => {
     const [open, toogleOpen] = useState(false);
     const ref = useRef(null);
     const sourceRef = useRef(null);
@@ -54,6 +56,8 @@ export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabl
         label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
         readOnly ? (React.createElement(InputReadOnlyElement, { inputSize: size }, value)) : (React.createElement(DropdownElement, { onClick: () => handleOpen(), ref: sourceRef },
             React.createElement(Field, { inputSize: size, disabled: disabled, width: width, active: open, error: error }, value ? getLabelForValue(value) : placeholder),
+            React.createElement(EyeIconWrapper, { size: size },
+                React.createElement(Icon, { name: open ? 'arrow_drop_up' : 'arrow_drop_down', size: 24, iconColor: theme.inputDefaultTextColor, iconHoverColor: theme.inputDefaultTextColor, iconBgHoverColor: "transparent" })),
             open &&
                 createPortal(React.createElement(Panel, { style: dropdownStyles, ref: ref, size: size, fullWidth: true, zIndex: zIndex }, options &&
                     options.map((option) => (React.createElement(PanelOption, { key: option.value, active: option.value === value, onClick: (e) => selectOption(e, option.value) }, option.label)))), document.body),

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

@@ -5,13 +5,14 @@ import { TextHeader } from '../Typography';
 import { Theme, mainTheme } from '../../Theme';
 import { Button } from '../Button';
 import { DropdownMenu } from '../DropdownMenu';
-import { ElementHeaderWrapper } from './ElementHeader.styles';
+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, }) => {
     const leftSide = () => {
         if (title) {
-            return (React.createElement(Aligment, { align: "center", direction: "row", width: "auto" },
-                handleBack && (React.createElement(Icon, { name: "back_arrow", onClick: () => handleBack(), left: true })),
-                React.createElement(TextHeader, null, title)));
+            return (React.createElement(TitleWrapper, null,
+                React.createElement(Aligment, { align: "center", direction: "row", width: "auto" },
+                    handleBack && (React.createElement(Icon, { name: "back_arrow", onClick: () => handleBack(), left: true })),
+                    React.createElement(TextHeader, null, title))));
         }
         else if (!title && children) {
             return children;

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

@@ -3,10 +3,15 @@ import { Aligment } from '../Aligment';
 import { Theme } from '../../Theme/Theme';
 export const ElementHeaderWrapper = styled(Aligment) `
   width: 100%;
-  border-top-left-radius:${Theme.borderRadius.m};
-  border-top-right-radius:${Theme.borderRadius.m};
+  border-top-left-radius: ${Theme.borderRadius.m};
+  border-top-right-radius: ${Theme.borderRadius.m};
   ${(p) => p.bottomDivader &&
     `
     border-bottom: 1px solid rgba(0, 0, 0, 0.14);
     `}
 `;
+export const TitleWrapper = styled.div `
+  height: 36px;
+  box-sizing: border-box;
+  display: flex;
+`;

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

@@ -2,15 +2,16 @@ import React from 'react';
 import { mainTheme } from '../../Theme/Theme';
 import { IconElement } from './Icon.styles';
 import { iconsPath } from './IconsPath';
-export const Icon = ({ size = 24, name = 'person', right = false, left = false, isActive = false, onClick, isDisabled = false, noPadding = false, iconColor = isDisabled ? mainTheme.iconDisabledColor : mainTheme.iconColor, iconHoverColor = mainTheme.iconHoverColor, iconBgColor = mainTheme.iconBgColor, iconBgHoverColor = isDisabled
+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, }) => {
+    const haveAction = Boolean(onClick);
     const handleClick = () => {
         if (!isDisabled && !!onClick) {
             onClick();
         }
     };
-    return (React.createElement(IconElement, { onClick: handleClick, right: right, left: left, isDisabled: isDisabled, iconColor: iconColor, iconHoverColor: iconHoverColor, iconBgColor: iconBgColor, iconBgHoverColor: iconBgHoverColor, isActive: isActive, noPadding: noPadding },
+    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 }))));
 };

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

@@ -8,13 +8,18 @@ export const IconElement = styled.div `
   border-radius: ${Theme.borderRadius.m};
   margin-left: ${(p) => (p.right ? Theme.padding.m : '0')};
   margin-right: ${(p) => (p.left ? Theme.padding.m : '0')};
-  padding: ${p => p.noPadding ? '0' : '4px'};
-  cursor: ${(p) => (!p.isDisabled ? 'pointer' : 'not-allowed')};
+  padding: ${(p) => (p.noPadding ? '0' : '4px')};
+  cursor: ${(p) => p.isDisabled ? 'not-allowed' : 'normal'};
   background-color: ${(p) => (p.isActive ? p.iconBgHoverColor : p.iconBgColor)};
-  :hover {
-    background-color: ${(p) => !p.isDisabled && p.iconBgHoverColor};
-    path {
-      fill: ${(p) => !p.isDisabled && p.iconHoverColor};
+  ${(p) => p.haveAction &&
+    `
+    cursor:pointer;
+    :hover {
+      background-color: ${!p.isDisabled && p.iconBgHoverColor};
+      path {
+        fill: ${!p.isDisabled && p.iconHoverColor};
+      }
     }
-  }
+    
+    `}
 `;

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

@@ -22,10 +22,10 @@ export const iconsPath = {
     filters: 'M10 18v-2h4v2Zm-4-5v-2h12v2ZM3 8V6h18v2Z',
     fit_to_screen: 'M20 9V6H17V4H20C20.55 4 21.0208 4.19583 21.4125 4.5875C21.8042 4.97917 22 5.45 22 6V9H20ZM2 9V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H7V6H4V9H2ZM17 20V18H20V15H22V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H17ZM4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V15H4V18H7V20H4ZM6 16V8H18V16H6ZM8 14H16V10H8V14Z',
     forward: 'M8.025 22 6.25 20.225 14.475 12 6.25 3.775 8.025 2l10 10Z',
+    info: 'M11 17H13V11H11V17ZM12 9C12.2833 9 12.5208 8.90417 12.7125 8.7125C12.9042 8.52083 13 8.28333 13 8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8C11 8.28333 11.0958 8.52083 11.2875 8.7125C11.4792 8.90417 11.7167 9 12 9ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z',
     home: 'M4 21V9l8-6 8 6v12h-6v-7h-4v7Zm2-2h2v-7h8v7h2v-9l-6-4.5L6 10Zm6-6.75Z',
-    orginal_size: 'M5 19V14H7V17H10V19H5ZM5 10V5H10V7H7V10H5ZM14 19V17H17V14H19V19H14ZM17 10V7H14V5H19V10H17Z',
-    search: 'm19.6 21-6.3-6.3q-.75.6-1.725.95Q10.6 16 9.5 16q-2.725 0-4.612-1.887Q3 12.225 3 9.5q0-2.725 1.888-4.613Q6.775 3 9.5 3t4.613 1.887Q16 6.775 16 9.5q0 1.1-.35 2.075-.35.975-.95 1.725l6.3 6.3ZM9.5 14q1.875 0 3.188-1.312Q14 11.375 14 9.5q0-1.875-1.312-3.188Q11.375 5 9.5 5 7.625 5 6.312 6.312 5 7.625 5 9.5q0 1.875 1.312 3.188Q7.625 14 9.5 14Z',
-    search_explore: 'M12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C14.4333 2 16.5625 2.7625 18.3875 4.2875C20.2125 5.8125 21.35 7.725 21.8 10.025H19.75C19.4333 8.80833 18.8625 7.72083 18.0375 6.7625C17.2125 5.80417 16.2 5.08333 15 4.6V5C15 5.55 14.8042 6.02083 14.4125 6.4125C14.0208 6.80417 13.55 7 13 7H11V9C11 9.28333 10.9042 9.52083 10.7125 9.7125C10.5208 9.90417 10.2833 10 10 10H8V12H10V15H9L4.2 10.2C4.15 10.5 4.10417 10.8 4.0625 11.1C4.02083 11.4 4 11.7 4 12C4 14.1833 4.76667 16.0583 6.3 17.625C7.83333 19.1917 9.73333 19.9833 12 20V22ZM21.1 21.5L17.9 18.3C17.55 18.5 17.175 18.6667 16.775 18.8C16.375 18.9333 15.95 19 15.5 19C14.25 19 13.1875 18.5625 12.3125 17.6875C11.4375 16.8125 11 15.75 11 14.5C11 13.25 11.4375 12.1875 12.3125 11.3125C13.1875 10.4375 14.25 10 15.5 10C16.75 10 17.8125 10.4375 18.6875 11.3125C19.5625 12.1875 20 13.25 20 14.5C20 14.95 19.9333 15.375 19.8 15.775C19.6667 16.175 19.5 16.55 19.3 16.9L22.5 20.1L21.1 21.5ZM15.5 17C16.2 17 16.7917 16.7583 17.275 16.275C17.7583 15.7917 18 15.2 18 14.5C18 13.8 17.7583 13.2083 17.275 12.725C16.7917 12.2417 16.2 12 15.5 12C14.8 12 14.2083 12.2417 13.725 12.725C13.2417 13.2083 13 13.8 13 14.5C13 15.2 13.2417 15.7917 13.725 16.275C14.2083 16.7583 14.8 17 15.5 17Z',
+    list: 'M8 17C8.28333 17 8.52083 16.9042 8.7125 16.7125C8.90417 16.5208 9 16.2833 9 16C9 15.7167 8.90417 15.4792 8.7125 15.2875C8.52083 15.0958 8.28333 15 8 15C7.71667 15 7.47917 15.0958 7.2875 15.2875C7.09583 15.4792 7 15.7167 7 16C7 16.2833 7.09583 16.5208 7.2875 16.7125C7.47917 16.9042 7.71667 17 8 17ZM8 13C8.28333 13 8.52083 12.9042 8.7125 12.7125C8.90417 12.5208 9 12.2833 9 12C9 11.7167 8.90417 11.4792 8.7125 11.2875C8.52083 11.0958 8.28333 11 8 11C7.71667 11 7.47917 11.0958 7.2875 11.2875C7.09583 11.4792 7 11.7167 7 12C7 12.2833 7.09583 12.5208 7.2875 12.7125C7.47917 12.9042 7.71667 13 8 13ZM8 9C8.28333 9 8.52083 8.90417 8.7125 8.7125C8.90417 8.52083 9 8.28333 9 8C9 7.71667 8.90417 7.47917 8.7125 7.2875C8.52083 7.09583 8.28333 7 8 7C7.71667 7 7.47917 7.09583 7.2875 7.2875C7.09583 7.47917 7 7.71667 7 8C7 8.28333 7.09583 8.52083 7.2875 8.7125C7.47917 8.90417 7.71667 9 8 9ZM11 17H17V15H11V17ZM11 13H17V11H11V13ZM11 9H17V7H11V9ZM5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19Z',
+    lock: 'M6 22q-.825 0-1.412-.587Q4 20.825 4 20V10q0-.825.588-1.413Q5.175 8 6 8h1V6q0-2.075 1.463-3.538Q9.925 1 12 1t3.538 1.462Q17 3.925 17 6v2h1q.825 0 1.413.587Q20 9.175 20 10v10q0 .825-.587 1.413Q18.825 22 18 22Zm0-2h12V10H6v10Zm6-3q.825 0 1.413-.587Q14 15.825 14 15q0-.825-.587-1.413Q12.825 13 12 13q-.825 0-1.412.587Q10 14.175 10 15q0 .825.588 1.413Q11.175 17 12 17ZM9 8h6V6q0-1.25-.875-2.125T12 3q-1.25 0-2.125.875T9 6ZM6 20V10v10Z',
     more_vert: 'M12 20q-.825 0-1.412-.587Q10 18.825 10 18q0-.825.588-1.413Q11.175 16 12 16t1.413.587Q14 17.175 14 18q0 .825-.587 1.413Q12.825 20 12 20Zm0-6q-.825 0-1.412-.588Q10 12.825 10 12t.588-1.413Q11.175 10 12 10t1.413.587Q14 11.175 14 12q0 .825-.587 1.412Q12.825 14 12 14Zm0-6q-.825 0-1.412-.588Q10 6.825 10 6t.588-1.412Q11.175 4 12 4t1.413.588Q14 5.175 14 6t-.587 1.412Q12.825 8 12 8Z',
     more_horiz: 'M6 14C5.45 14 4.97917 13.8042 4.5875 13.4125C4.19583 13.0208 4 12.55 4 12C4 11.45 4.19583 10.9792 4.5875 10.5875C4.97917 10.1958 5.45 10 6 10C6.55 10 7.02083 10.1958 7.4125 10.5875C7.80417 10.9792 8 11.45 8 12C8 12.55 7.80417 13.0208 7.4125 13.4125C7.02083 13.8042 6.55 14 6 14ZM12 14C11.45 14 10.9792 13.8042 10.5875 13.4125C10.1958 13.0208 10 12.55 10 12C10 11.45 10.1958 10.9792 10.5875 10.5875C10.9792 10.1958 11.45 10 12 10C12.55 10 13.0208 10.1958 13.4125 10.5875C13.8042 10.9792 14 11.45 14 12C14 12.55 13.8042 13.0208 13.4125 13.4125C13.0208 13.8042 12.55 14 12 14ZM18 14C17.45 14 16.9792 13.8042 16.5875 13.4125C16.1958 13.0208 16 12.55 16 12C16 11.45 16.1958 10.9792 16.5875 10.5875C16.9792 10.1958 17.45 10 18 10C18.55 10 19.0208 10.1958 19.4125 10.5875C19.8042 10.9792 20 11.45 20 12C20 12.55 19.8042 13.0208 19.4125 13.4125C19.0208 13.8042 18.55 14 18 14Z',
     move: 'M15 3L17.3 5.3L14.41 8.17L15.83 9.59L18.7 6.7L21 9V3H15ZM3 9L5.3 6.7L8.17 9.59L9.59 8.17L6.7 5.3L9 3H3V9ZM9 21L6.7 18.7L9.59 15.83L8.17 14.41L5.3 17.3L3 15V21H9ZM21 15L18.7 17.3L15.83 14.41L14.41 15.83L17.3 18.7L15 21H21V15Z',
@@ -34,8 +34,7 @@ export const iconsPath = {
     move_se: 'M19 9H17V15.59L5.41 4L4 5.41L15.59 17H9V19H19V9Z',
     move_sw: 'M15 19V17H8.41L20 5.41L18.59 4L7 15.59V9H5V19H15Z',
     menu: 'M3 18v-2h18v2Zm0-5v-2h18v2Zm0-5V6h18v2Z',
-    unlock: 'M6 8h9V6q0-1.25-.875-2.125T12 3q-1.25 0-2.125.875T9 6H7q0-2.075 1.463-3.538Q9.925 1 12 1t3.538 1.462Q17 3.925 17 6v2h1q.825 0 1.413.587Q20 9.175 20 10v10q0 .825-.587 1.413Q18.825 22 18 22H6q-.825 0-1.412-.587Q4 20.825 4 20V10q0-.825.588-1.413Q5.175 8 6 8Zm0 12h12V10H6v10Zm6-3q.825 0 1.413-.587Q14 15.825 14 15q0-.825-.587-1.413Q12.825 13 12 13q-.825 0-1.412.587Q10 14.175 10 15q0 .825.588 1.413Q11.175 17 12 17Zm-6 3V10v10Z',
-    lock: 'M6 22q-.825 0-1.412-.587Q4 20.825 4 20V10q0-.825.588-1.413Q5.175 8 6 8h1V6q0-2.075 1.463-3.538Q9.925 1 12 1t3.538 1.462Q17 3.925 17 6v2h1q.825 0 1.413.587Q20 9.175 20 10v10q0 .825-.587 1.413Q18.825 22 18 22Zm0-2h12V10H6v10Zm6-3q.825 0 1.413-.587Q14 15.825 14 15q0-.825-.587-1.413Q12.825 13 12 13q-.825 0-1.412.587Q10 14.175 10 15q0 .825.588 1.413Q11.175 17 12 17ZM9 8h6V6q0-1.25-.875-2.125T12 3q-1.25 0-2.125.875T9 6ZM6 20V10v10Z',
+    orginal_size: 'M5 19V14H7V17H10V19H5ZM5 10V5H10V7H7V10H5ZM14 19V17H17V14H19V19H14ZM17 10V7H14V5H19V10H17Z',
     person: 'M12 12q-1.65 0-2.825-1.175Q8 9.65 8 8q0-1.65 1.175-2.825Q10.35 4 12 4q1.65 0 2.825 1.175Q16 6.35 16 8q0 1.65-1.175 2.825Q13.65 12 12 12Zm-8 8v-2.8q0-.85.438-1.563.437-.712 1.162-1.087 1.55-.775 3.15-1.163Q10.35 13 12 13t3.25.387q1.6.388 3.15 1.163.725.375 1.162 1.087Q20 16.35 20 17.2V20Zm2-2h12v-.8q0-.275-.137-.5-.138-.225-.363-.35-1.35-.675-2.725-1.013Q13.4 15 12 15t-2.775.337Q7.85 15.675 6.5 16.35q-.225.125-.362.35-.138.225-.138.5Zm6-8q.825 0 1.413-.588Q14 8.825 14 8t-.587-1.412Q12.825 6 12 6q-.825 0-1.412.588Q10 7.175 10 8t.588 1.412Q11.175 10 12 10Zm0-2Zm0 10Z',
     point_here: 'M5.54 8.46L2 12L5.54 15.54L7.3 13.77L5.54 12L7.3 10.23L5.54 8.46ZM12 18.46L10.23 16.7L8.46 18.46L12 22L15.54 18.46L13.77 16.7L12 18.46ZM18.46 8.46L16.7 10.23L18.46 12L16.7 13.77L18.46 15.54L22 12L18.46 8.46ZM8.46 5.54L10.23 7.3L12 5.54L13.77 7.3L15.54 5.54L12 2L8.46 5.54Z M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z',
     point_dot: 'M12 8C9.79 8 8 9.79 8 12C8 14.21 9.79 16 12 16C14.21 16 16 14.21 16 12C16 9.79 14.21 8 12 8ZM20.94 11C20.48 6.83 17.17 3.52 13 3.06V1H11V3.06C6.83 3.52 3.52 6.83 3.06 11H1V13H3.06C3.52 17.17 6.83 20.48 11 20.94V23H13V20.94C17.17 20.48 20.48 17.17 20.94 13H23V11H20.94ZM12 19C8.13 19 5 15.87 5 12C5 8.13 8.13 5 12 5C15.87 5 19 8.13 19 12C19 15.87 15.87 19 12 19Z',
@@ -44,9 +43,12 @@ export const iconsPath = {
     remove: 'M19 13H5V11H19V13Z',
     remove_circle: 'M7 11V13H17V11H7ZM12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z',
     new_tab: 'M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H12V5H5V19H19V12H21V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM9.7 15.7L8.3 14.3L17.6 5H14V3H21V10H19V6.4L9.7 15.7Z',
+    search: 'm19.6 21-6.3-6.3q-.75.6-1.725.95Q10.6 16 9.5 16q-2.725 0-4.612-1.887Q3 12.225 3 9.5q0-2.725 1.888-4.613Q6.775 3 9.5 3t4.613 1.887Q16 6.775 16 9.5q0 1.1-.35 2.075-.35.975-.95 1.725l6.3 6.3ZM9.5 14q1.875 0 3.188-1.312Q14 11.375 14 9.5q0-1.875-1.312-3.188Q11.375 5 9.5 5 7.625 5 6.312 6.312 5 7.625 5 9.5q0 1.875 1.312 3.188Q7.625 14 9.5 14Z',
+    search_explore: 'M12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C14.4333 2 16.5625 2.7625 18.3875 4.2875C20.2125 5.8125 21.35 7.725 21.8 10.025H19.75C19.4333 8.80833 18.8625 7.72083 18.0375 6.7625C17.2125 5.80417 16.2 5.08333 15 4.6V5C15 5.55 14.8042 6.02083 14.4125 6.4125C14.0208 6.80417 13.55 7 13 7H11V9C11 9.28333 10.9042 9.52083 10.7125 9.7125C10.5208 9.90417 10.2833 10 10 10H8V12H10V15H9L4.2 10.2C4.15 10.5 4.10417 10.8 4.0625 11.1C4.02083 11.4 4 11.7 4 12C4 14.1833 4.76667 16.0583 6.3 17.625C7.83333 19.1917 9.73333 19.9833 12 20V22ZM21.1 21.5L17.9 18.3C17.55 18.5 17.175 18.6667 16.775 18.8C16.375 18.9333 15.95 19 15.5 19C14.25 19 13.1875 18.5625 12.3125 17.6875C11.4375 16.8125 11 15.75 11 14.5C11 13.25 11.4375 12.1875 12.3125 11.3125C13.1875 10.4375 14.25 10 15.5 10C16.75 10 17.8125 10.4375 18.6875 11.3125C19.5625 12.1875 20 13.25 20 14.5C20 14.95 19.9333 15.375 19.8 15.775C19.6667 16.175 19.5 16.55 19.3 16.9L22.5 20.1L21.1 21.5ZM15.5 17C16.2 17 16.7917 16.7583 17.275 16.275C17.7583 15.7917 18 15.2 18 14.5C18 13.8 17.7583 13.2083 17.275 12.725C16.7917 12.2417 16.2 12 15.5 12C14.8 12 14.2083 12.2417 13.725 12.725C13.2417 13.2083 13 13.8 13 14.5C13 15.2 13.2417 15.7917 13.725 16.275C14.2083 16.7583 14.8 17 15.5 17Z',
     sort_up: 'M12 13.1178L5.06674 20L4 18.9411L12 11L20 18.9411L18.9333 20L12 13.1178Z',
     sort_down: 'M12 13.0667L4 5.06674L5.06674 4L12 10.9333L18.9333 4L20 5.06674L12 13.0667Z',
     triage: 'M12 7.77L18.39 18H5.61L12 7.77ZM12 4L2 20H22L12 4Z',
+    unlock: 'M6 8h9V6q0-1.25-.875-2.125T12 3q-1.25 0-2.125.875T9 6H7q0-2.075 1.463-3.538Q9.925 1 12 1t3.538 1.462Q17 3.925 17 6v2h1q.825 0 1.413.587Q20 9.175 20 10v10q0 .825-.587 1.413Q18.825 22 18 22H6q-.825 0-1.412-.587Q4 20.825 4 20V10q0-.825.588-1.413Q5.175 8 6 8Zm0 12h12V10H6v10Zm6-3q.825 0 1.413-.587Q14 15.825 14 15q0-.825-.587-1.413Q12.825 13 12 13q-.825 0-1.412.587Q10 14.175 10 15q0 .825.588 1.413Q11.175 17 12 17Zm-6 3V10v10Z',
     upgrade: 'M8.6 22.5L6.7 19.3L3.1 18.5L3.45 14.8L1 12L3.45 9.2L3.1 5.5L6.7 4.7L8.6 1.5L12 2.95L15.4 1.5L17.3 4.7L20.9 5.5L20.55 9.2L23 12L20.55 14.8L20.9 18.5L17.3 19.3L15.4 22.5L12 21.05L8.6 22.5ZM9.45 19.95L12 18.85L14.6 19.95L16 17.55L18.75 16.9L18.5 14.1L20.35 12L18.5 9.85L18.75 7.05L16 6.45L14.55 4.05L12 5.15L9.4 4.05L8 6.45L5.25 7.05L5.5 9.85L3.65 12L5.5 14.1L5.25 16.95L8 17.55L9.45 19.95ZM10.95 15.55L16.6 9.9L15.2 8.45L10.95 12.7L8.8 10.6L7.4 12L10.95 15.55Z',
     visibility: 'M12 16q1.875 0 3.188-1.312Q16.5 13.375 16.5 11.5q0-1.875-1.312-3.188Q13.875 7 12 7q-1.875 0-3.188 1.312Q7.5 9.625 7.5 11.5q0 1.875 1.312 3.188Q10.125 16 12 16Zm0-1.8q-1.125 0-1.912-.788Q9.3 12.625 9.3 11.5t.788-1.913Q10.875 8.8 12 8.8t1.913.787q.787.788.787 1.913t-.787 1.912q-.788.788-1.913.788Zm0 4.8q-3.65 0-6.65-2.038-3-2.037-4.35-5.462 1.35-3.425 4.35-5.463Q8.35 4 12 4q3.65 0 6.65 2.037 3 2.038 4.35 5.463-1.35 3.425-4.35 5.462Q15.65 19 12 19Zm0-7.5Zm0 5.5q2.825 0 5.188-1.488Q19.55 14.025 20.8 11.5q-1.25-2.525-3.612-4.013Q14.825 6 12 6 9.175 6 6.812 7.487 4.45 8.975 3.2 11.5q1.25 2.525 3.612 4.012Q9.175 17 12 17Z',
     visability_off: 'M16.1 13.3L14.65 11.85C14.8 11.0667 14.575 10.3333 13.975 9.65C13.375 8.96667 12.6 8.7 11.65 8.85L10.2 7.4C10.4833 7.26667 10.7708 7.16667 11.0625 7.1C11.3542 7.03333 11.6667 7 12 7C13.25 7 14.3125 7.4375 15.1875 8.3125C16.0625 9.1875 16.5 10.25 16.5 11.5C16.5 11.8333 16.4667 12.1458 16.4 12.4375C16.3333 12.7292 16.2333 13.0167 16.1 13.3ZM19.3 16.45L17.85 15.05C18.4833 14.5667 19.0458 14.0375 19.5375 13.4625C20.0292 12.8875 20.45 12.2333 20.8 11.5C19.9667 9.81667 18.7708 8.47917 17.2125 7.4875C15.6542 6.49583 13.9167 6 12 6C11.5167 6 11.0417 6.03333 10.575 6.1C10.1083 6.16667 9.65 6.26667 9.2 6.4L7.65 4.85C8.33333 4.56667 9.03333 4.35417 9.75 4.2125C10.4667 4.07083 11.2167 4 12 4C14.5167 4 16.7583 4.69583 18.725 6.0875C20.6917 7.47917 22.1167 9.28333 23 11.5C22.6167 12.4833 22.1125 13.3958 21.4875 14.2375C20.8625 15.0792 20.1333 15.8167 19.3 16.45ZM19.8 22.6L15.6 18.45C15.0167 18.6333 14.4292 18.7708 13.8375 18.8625C13.2458 18.9542 12.6333 19 12 19C9.48333 19 7.24167 18.3042 5.275 16.9125C3.30833 15.5208 1.88333 13.7167 1 11.5C1.35 10.6167 1.79167 9.79583 2.325 9.0375C2.85833 8.27917 3.46667 7.6 4.15 7L1.4 4.2L2.8 2.8L21.2 21.2L19.8 22.6ZM5.55 8.4C5.06667 8.83333 4.625 9.30833 4.225 9.825C3.825 10.3417 3.48333 10.9 3.2 11.5C4.03333 13.1833 5.22917 14.5208 6.7875 15.5125C8.34583 16.5042 10.0833 17 12 17C12.3333 17 12.6583 16.9792 12.975 16.9375C13.2917 16.8958 13.6167 16.85 13.95 16.8L13.05 15.85C12.8667 15.9 12.6917 15.9375 12.525 15.9625C12.3583 15.9875 12.1833 16 12 16C10.75 16 9.6875 15.5625 8.8125 14.6875C7.9375 13.8125 7.5 12.75 7.5 11.5C7.5 11.3167 7.5125 11.1417 7.5375 10.975C7.5625 10.8083 7.6 10.6333 7.65 10.45L5.55 8.4Z',

package/dist/esm/components/Input/Input.js

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 import { ThemeProvider } from 'styled-components';
 import { Aligment } from '../Aligment';
-import { InputTextElement, InputLabelElement, InputErrorMsg, InputWrapper, EyeIconWrapper, IconsWrapper, InputReadOnlyElement, } from './Input.styles';
+import { InputTextElement, InputLabelElement, InputErrorMsg, InputWrapper, EyeIconWrapper, IconsWrapper, InputReadOnlyElement, Prefix, } from './Input.styles';
 import { Icon } from '../Icons';
 import { mainTheme } from '../../Theme';
-export const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disabled = false, size = 'medium', handleChange, handleSubmit, width, error, placeholder, min, max, step = 0.1, autoFocus, theme = mainTheme, readOnly = false, }) => {
+export const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disabled = false, size = 'medium', handleChange, handleSubmit, width, error, placeholder, min, max, step = 0.1, autoFocus, theme = mainTheme, readOnly = false, prefix, }) => {
     const calculateNumberValue = (numberValue) => {
         return isNaN(parseFloat(numberValue))
             ? numberValue
@@ -66,7 +66,8 @@ export const Input = ({ label, labelPosition = 'top', value, type = 'text', name
             label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
             React.createElement(InputWrapper, { width: width },
                 React.createElement(React.Fragment, null, readOnly ? (React.createElement(InputReadOnlyElement, { inputSize: size }, inputType === 'password' ? '******' : value)) : (React.createElement(React.Fragment, null,
-                    React.createElement(InputTextElement, { autoFocus: autoFocus, inputSize: size, type: showPassword ? 'text' : inputType, disabled: disabled, name: name, value: value, onChange: onChange, onKeyDown: onKeyDown, onBlur: onBlurValidation, error: error, placeholder: placeholder, min: min, max: max, step: step }),
+                    React.createElement(InputTextElement, { autoFocus: autoFocus, inputSize: size, type: showPassword ? 'text' : inputType, disabled: disabled, name: name, value: value, onChange: onChange, onKeyDown: onKeyDown, onBlur: onBlurValidation, error: error, placeholder: placeholder, min: min, max: max, step: step, prefix: prefix }),
+                    prefix && React.createElement(Prefix, { inputSize: size }, prefix),
                     inputType === 'password' && (React.createElement(EyeIconWrapper, { size: size },
                         React.createElement(Icon, { name: showPassword ? 'visability_off' : 'visibility', size: 24, onClick: tooglePassword, iconColor: theme.inputDefaultTextColor, iconBgHoverColor: "transparent" }))),
                     type === 'increase' && (React.createElement(IconsWrapper, null,

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

@@ -1,7 +1,7 @@
-import { setSize, setEyeTopPosition, setHeight } from '../common';
+import { setSize, setEyeTopPosition, setHeight, setSizeWithPrefix, } from '../common';
 import styled from 'styled-components';
-import { Theme } from '../../Theme';
 import { TextLabel } from '../Typography';
+import { Theme } from '../../Theme';
 export const InputTextElement = styled.input `
   position: relative;
   box-sizing: border-box;
@@ -14,7 +14,7 @@ export const InputTextElement = styled.input `
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  ${(p) => setSize(p.inputSize)}
+  ${(p) => (p.prefix ? setSizeWithPrefix(p.inputSize) : setSize(p.inputSize))}
   color: ${(p) => p.theme.inputDefaultTextColor};
   width: ${(p) => (p.width ? p.width : '100%')};
   ${(p) => p.type === 'password' && `padding-right:32px;`}
@@ -57,8 +57,8 @@ export const InputReadOnlyElement = styled.div `
   ${(p) => setHeight(p.inputSize)}
   color: ${(p) => p.theme.inputDefaultTextColor};
   width: ${(p) => (p.width ? p.width : '100%')};
-  padding-left:0;
-  border-bottom:1px solid #dddddd;
+  padding-left: 0;
+  border-bottom: 1px solid #dddddd;
 `;
 export const InputLabelElement = styled(TextLabel) `
   ${(p) => p.labelPosition === 'top' && `margin-bottom: ${Theme.padding.s};`}
@@ -84,3 +84,13 @@ export const IconsWrapper = styled.div `
   display: flex;
   align-items: center;
 `;
+export const Prefix = styled.div `
+  position: absolute;
+  dispaly: flex;
+  left: 0px;
+  top: 1px;
+  width: 24px;
+  align-items: center;
+  color: ${Theme.colors.gray_1};
+  ${(p) => setSize(p.inputSize)}
+`;

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

@@ -5,9 +5,11 @@ export const Text = styled.div `
   font-size: ${Theme.fontSize.m};
   line-height: ${Theme.lineHeight.m};
   font-weight: normal;
-  color: ${(p) => (p.color ? p.color : Theme.colors.text)};
-  cursor: ${(p) => (p.action ? 'pointer' : 'default')};
-  ${p => p.action && `
+  color: ${(p) => p.isDisabled ? Theme.colors.gray_3 : p.color ? p.color : Theme.colors.text};
+  cursor: ${(p) => p.isDisabled ? 'not-allowed' : p.action ? 'pointer' : 'default'};
+  ${(p) => p.action &&
+    !p.isDisabled &&
+    `
     :hover{
     color:${Theme.colors.primary};
     }
@@ -37,9 +39,9 @@ export const TextSubHeader = styled.div `
 export const TextAccent = styled.div `
   font-size: ${Theme.fontSize.xs};
   line-height: ${Theme.lineHeight.xs};
-  text-transform:uppercase;
+  text-transform: uppercase;
   color: ${(p) => (p.color ? p.color : Theme.colors.text)};
-  cursor:${(p) => (p.action ? 'pointer' : 'default')};
+  cursor: ${(p) => (p.action ? 'pointer' : 'default')};
 `;
 export const TextLabel = styled.div `
   font-weight: ${(p) => (p.labelPosition === 'left' ? 'normal' : 'bold')};

package/dist/esm/components/common/inputStyles.js

@@ -61,6 +61,20 @@ export const inputPadding = {
   padding: ${Theme.padding.m};
   `,
 };
+export const inputPaddingWithPrefix = {
+    small: `
+  padding: ${Theme.padding.s};
+  padding-left: calc(2* ${Theme.padding.s} + 24px);
+  `,
+    medium: `
+  padding: ${Theme.padding.m};
+  padding-left: calc(2* ${Theme.padding.m} + 24px);
+  `,
+    large: `
+  padding: ${Theme.padding.m};
+  padding-left: calc(2* ${Theme.padding.m} + 24px);
+  `,
+};
 //TODO refactor this
 export const buttonPadding = {
     small: `
@@ -98,6 +112,9 @@ export const eyeTopPosition = {
 export const setSize = (size) => {
     return sizes[size] + inputPadding[size];
 };
+export const setSizeWithPrefix = (size) => {
+    return sizes[size] + inputPaddingWithPrefix[size];
+};
 export const setHeight = (size) => {
     return height[size];
 };

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

@@ -5,6 +5,7 @@ export interface IDropdownProps extends IFormElement {
     handleSelect: (name: string, value: string | number) => void;
     position?: string;
     zIndex?: number;
+    theme?: any;
 }
 export interface IPositionStyle {
     top: number;

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

@@ -3,4 +3,5 @@ interface IElementHeaderWrapperProps extends IAligmentProps {
     bottomDivader: boolean;
 }
 export declare const ElementHeaderWrapper: import("styled-components").StyledComponent<"div", any, IAligmentProps & IElementHeaderWrapperProps, never>;
+export declare const TitleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

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

@@ -1,5 +1,5 @@
 interface IIconElementProps {
-    onClick?: () => void;
+    haveAction: boolean;
     right: boolean;
     left: boolean;
     isDisabled: boolean;

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

@@ -22,10 +22,10 @@ export declare const iconsPath: {
     filters: string;
     fit_to_screen: string;
     forward: string;
+    info: string;
     home: string;
-    orginal_size: string;
-    search: string;
-    search_explore: string;
+    list: string;
+    lock: string;
     more_vert: string;
     more_horiz: string;
     move: string;
@@ -34,8 +34,7 @@ export declare const iconsPath: {
     move_se: string;
     move_sw: string;
     menu: string;
-    unlock: string;
-    lock: string;
+    orginal_size: string;
     person: string;
     point_here: string;
     point_dot: string;
@@ -44,9 +43,12 @@ export declare const iconsPath: {
     remove: string;
     remove_circle: string;
     new_tab: string;
+    search: string;
+    search_explore: string;
     sort_up: string;
     sort_down: string;
     triage: string;
+    unlock: string;
     upgrade: string;
     visibility: string;
     visability_off: string;

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

@@ -10,5 +10,6 @@ export interface IInputProps extends IFormElement {
     autoFocus?: boolean;
     theme?: any;
     handleSubmit?: () => void;
+    prefix?: string;
 }
 export declare const Input: FC<IInputProps>;

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

@@ -28,4 +28,8 @@ interface IEyeIconWrapperProps {
 }
 export declare const EyeIconWrapper: import("styled-components").StyledComponent<"div", any, IEyeIconWrapperProps, never>;
 export declare const IconsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface IPrefixProps {
+    inputSize: InputSize;
+}
+export declare const Prefix: import("styled-components").StyledComponent<"div", any, IPrefixProps, never>;
 export {};

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

@@ -1,5 +1,6 @@
 import { InputSize, LabelPosition } from '../../types';
 interface ITextStyle {
+    isDisabled?: boolean;
     color?: string;
     action?: boolean;
 }

package/dist/types/components/common/inputStyles.d.ts

@@ -20,6 +20,11 @@ export declare const inputPadding: {
     medium: string;
     large: string;
 };
+export declare const inputPaddingWithPrefix: {
+    small: string;
+    medium: string;
+    large: string;
+};
 export declare const buttonPadding: {
     small: string;
     medium: string;
@@ -41,6 +46,7 @@ export declare const eyeTopPosition: {
     large: string;
 };
 export declare const setSize: (size: InputSize) => string;
+export declare const setSizeWithPrefix: (size: InputSize) => string;
 export declare const setHeight: (size: InputSize) => string;
 export declare const setButtonSize: (size: InputSize, loader: boolean) => string;
 export declare const setToogleSize: (size: InputSize) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "venice-ui",
-  "version": "2.0.29",
+  "version": "2.0.31",
   "description": "Component library",
   "main": "index.js",
   "module": "./dist/esm/index.js",
@@ -68,8 +68,8 @@
     "react-dom": "^18.2.0"
   },
   "engines": {
-    "node": "16.17.1",
-    "npm": "6.14.7"
+    "node": "18.20.4",
+    "npm": "10.7.0"
   },
   "dependencies": {
     "@storybook/addon-a11y": "^7.0.12",