venice-ui 1.1.5 → 1.3.0

package/dist/cjs/Theme/Theme.js

@@ -72,8 +72,10 @@ exports.mainTheme = {
     disabledText: exports.Theme.colors.gray_1,
     //icon
     iconColor: exports.Theme.colors.text,
+    iconHoverColor: exports.Theme.colors.primary,
+    iconBgColor: 'transparent',
     iconDisabledColor: exports.Theme.colors.gray_4,
-    iconHoverColor: exports.Theme.colors.primary_10,
+    iconBgHoverColor: exports.Theme.colors.primary_10,
     //text
     textColor: exports.Theme.colors.text,
     // input

package/dist/cjs/components/Chips/Chips.js

@@ -15,6 +15,6 @@ const Chips = ({ theme = Theme_1.mainTheme, label, handleClose, }) => {
         react_1.default.createElement(Chips_styles_1.ChipsElement, { onClick: () => handleClose() },
             react_1.default.createElement(Aligment_1.Aligment, { gap: 4 },
                 react_1.default.createElement(Chips_styles_1.ChipsLabel, null, label),
-                react_1.default.createElement(Icons_1.Icon, { name: 'close', color: theme.chipsNeutralTextColor, size: 14 })))));
+                react_1.default.createElement(Icons_1.Icon, { name: "close", iconColor: theme.chipsNeutralTextColor, iconHoverColor: theme.chipsNeutralTextColor, iconBgHoverColor: theme.iconBgColor, size: 14 })))));
 };
 exports.Chips = Chips;

package/dist/cjs/components/DropdownMenu/DropdownMenu.js

@@ -31,7 +31,7 @@ const Icons_1 = require("../Icons");
 const DropdownMenu_styles_1 = require("./DropdownMenu.styles");
 const Aligment_1 = require("../Aligment");
 const Typography_1 = require("../Typography");
-const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', color = Theme_1.Theme.colors.text, header = false, headerTitle, headerSubtitle, footer = false, footerText, footerAction, options, right = false, left = false, iconInverseMode = false, iconHoverColor = Theme_1.Theme.colors.primary_10, targetID }) => {
+const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false, headerTitle, headerSubtitle, footer = false, footerText, footerAction, options, right = false, left = false, targetID, iconColor = Theme_1.mainTheme.iconColor, iconHoverColor = Theme_1.mainTheme.iconHoverColor, iconBgColor = Theme_1.mainTheme.iconBgColor, iconBgHoverColor = Theme_1.mainTheme.iconBgHoverColor, }) => {
     const [open, toogleOpen] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
     const close = () => {
@@ -57,7 +57,7 @@ const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', color = Theme_1
         };
     }, [open]);
     return (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuElement, null,
-        react_1.default.createElement(Icons_1.Icon, { name: iconName, onClick: () => toogleOpen(!open), color: color, hoverColor: iconHoverColor, size: (0, common_1.setIconSize)(size), active: open, right: right, left: left, inverseMode: iconInverseMode }),
+        react_1.default.createElement(Icons_1.Icon, { name: iconName, onClick: () => toogleOpen(!open), size: (0, common_1.setIconSize)(size), isActive: open, right: right, left: left, iconColor: iconColor, iconHoverColor: iconHoverColor, iconBgColor: iconBgColor, iconBgHoverColor: iconBgHoverColor }),
         open && (react_1.default.createElement(common_1.Panel, { ref: ref, size: size, position: "right" },
             react_1.default.createElement(Aligment_1.Aligment, { direction: "column" },
                 header && (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuHeader, null,

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

@@ -24,12 +24,12 @@ const ElementHeader = ({ title, actionLabel = '', handleClose, handleClick, hand
     };
     const rightSide = () => {
         if (handleClose) {
-            return (react_1.default.createElement(Icons_1.Icon, { onClick: () => handleClose(), name: "close", color: Theme_1.Theme.colors.text }));
+            return (react_1.default.createElement(Icons_1.Icon, { onClick: () => handleClose(), name: "close", iconColor: Theme_1.Theme.colors.text }));
         }
         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() }),
-                options && (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { options: options, right: true, color: iconColor, iconHoverColor: iconHoverColor, iconInverseMode: true }))));
+                options && (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { options: options, right: true, iconColor: iconColor }))));
         }
     };
     return (react_1.default.createElement(Aligment_1.Aligment, { justify: !title && !children ? 'flex-end' : 'space-between', vPadding: Theme_1.Theme.padding.m, hPadding: Theme_1.Theme.padding.l, backgroundColor: backgroundColor },

package/dist/cjs/components/Filters/Filters.js

@@ -177,7 +177,7 @@ const Filters = ({ theme = Theme_1.mainTheme, title = 'Select filters', labelCon
     };
     return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
         react_1.default.createElement(Filters_styles_1.FilterIconArea, null,
-            react_1.default.createElement(Icons_1.Icon, { name: "filters", onClick: toogleFilter, color: setIconColor() }),
+            react_1.default.createElement(Icons_1.Icon, { name: "filters", onClick: toogleFilter, iconColor: setIconColor() }),
             isAnyFilterActive() && (react_1.default.createElement(Chips_1.Chips, { label: labelClearAll, handleClose: resetAllFiltersAndSubmit }))),
         openFilters && (react_1.default.createElement(Modal_1.Modal, { title: title, handleConfirm: applyFilter, handleClose: toogleFilter, handleAdditional: resetAllFilters, labelConfirm: labelConfirm, labelClose: labelClose, labelAdditional: labelClearAll },
             react_1.default.createElement(Aligment_1.Aligment, { direction: "column", align: 'flex-end' },

package/dist/cjs/components/Form/Form.js

@@ -0,0 +1,60 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Form = void 0;
+const react_1 = __importDefault(require("react"));
+const Input_1 = require("../Input");
+const File_1 = require("../File");
+const FormElements_1 = require("./FormElements");
+const Form = ({ formData, size = 'medium', read }) => {
+    const onChangeHandler = (name, value) => {
+        formData.action(name, value);
+    };
+    const onIntChangeHandler = (name, value) => {
+        let valueString = value;
+        if (valueString.length > 0) {
+            const modify = valueString
+                .replaceAll(',', '.')
+                .replace(/[^\d.-]/g, '')
+                .split('.');
+            let digit = modify.shift();
+            if (modify.length > 0) {
+                digit = digit + '.' + modify.join('');
+            }
+            valueString = digit;
+        }
+        formData.action(name, valueString);
+    };
+    const onFileHandler = (event) => {
+        const fileList = event.currentTarget.files;
+        if (!fileList)
+            return;
+        if (event.currentTarget.files) {
+        }
+        formData.action(event.currentTarget.name, event.currentTarget.files ? event.currentTarget.files[0] : null);
+    };
+    const selectType = (item) => {
+        switch (item.type) {
+            case 'text':
+                return (react_1.default.createElement(Input_1.Input, { label: item.label, value: item.value, name: item.name, type: "text", size: size, handleChange: onChangeHandler }));
+            case 'number':
+                return (react_1.default.createElement(Input_1.Input, { label: item.label, value: item.value, name: item.name, type: "number", size: size, min: item.min, max: item.max, step: item.step, handleChange: onIntChangeHandler }));
+            case 'increase':
+                return (react_1.default.createElement(Input_1.Input, { type: "increase", label: item.label, value: item.value, name: item.name, size: size, handleChange: onIntChangeHandler, min: item.min, max: item.max, step: item.step }));
+            case 'file':
+                return (react_1.default.createElement(File_1.File, { label: item.label, fileValue: item.value, name: item.name, size: size, handleChange: onFileHandler }));
+        }
+    };
+    return (react_1.default.createElement(FormElements_1.FormWrapper, null, formData.data.map((item) => {
+        if ('row' in item) {
+            return (react_1.default.createElement(FormElements_1.FormRow, { key: `subRow-${item.row[0].name}` }, item.row.map((rowItem) => (react_1.default.createElement(FormElements_1.FormSubRow, { factor: item.row.length, key: rowItem.name }, selectType(rowItem))))));
+        }
+        else {
+            return react_1.default.createElement(FormElements_1.FormRow, { key: item.name }, selectType(item));
+        }
+    })));
+};
+exports.Form = Form;
+exports.default = exports.Form;

package/dist/cjs/components/Form/FormElements.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IntputWrapperBig = exports.FormSubRow = exports.FormRow = exports.FormWrapper = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.FormWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+exports.FormRow = styled_components_1.default.div `
+  width: 100%;
+  margin-bottom: 0.8rem;
+  display: flex;
+  justify-content: space-between;
+`;
+exports.FormSubRow = styled_components_1.default.div `
+  display: flex;
+  width: calc((100% - ((${(p) => p.factor} - 1) * 2rem)) / ${(p) => p.factor});
+`;
+exports.IntputWrapperBig = styled_components_1.default.div `
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1.6rem;
+`;

package/dist/cjs/components/Form/formHelper.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateForm = void 0;
+const updateForm = (state, updateState, field, value) => {
+    updateState({ ...state, [field]: value });
+};
+exports.updateForm = updateForm;

package/dist/cjs/components/Form/formTypes.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/components/Form/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("./Form"), exports);

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

@@ -8,14 +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, right = false, left = false, hoverColor = Theme_1.mainTheme.iconHoverColor, active = false, inverseMode = false, onClick, isDisabled = false, color = isDisabled ? Theme_1.mainTheme.iconDisabledColor : Theme_1.mainTheme.iconColor, }) => {
+const Icon = ({ size = 24, name = 'person', right = false, left = false, isActive = false, onClick, isDisabled = 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 handleClick = () => {
         if (!isDisabled && !!onClick) {
             onClick();
         }
     };
-    return (react_1.default.createElement(Icon_styles_1.IconElement, { onClick: handleClick, right: right, left: left, active: active, hoverColor: hoverColor, inverseMode: inverseMode, isDisabled: isDisabled },
+    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 },
         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: color }))));
+            react_1.default.createElement("path", { d: IconsPath_1.iconsPath[name], fill: isActive ? iconHoverColor : iconColor }))));
 };
 exports.Icon = Icon;

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

@@ -15,35 +15,12 @@ exports.IconElement = styled_components_1.default.div `
   margin-left: ${(p) => (p.right ? Theme_1.Theme.padding.m : '0')};
   margin-right: ${(p) => (p.left ? Theme_1.Theme.padding.m : '0')};
   padding: 4px;
-
-  ${(p) => p.onClick !== undefined &&
-    `
-    cursor: ${(p) => (!p.isDisabled ? 'pointer' : 'not-allowed')};
+  cursor: ${(p) => (!p.isDisabled ? 'pointer' : 'not-allowed')};
+  background-color: ${(p) => (p.isActive ? p.iconBgHoverColor : p.iconBgColor)};
+  :hover {
+    background-color: ${(p) => !p.isDisabled && p.iconBgHoverColor};
     path {
-      fill: ${(p) => (p.color ? p.color : Theme_1.Theme.colors.primary)};
+      fill: ${(p) => !p.isDisabled && p.iconHoverColor};
     }
-
-    ${!p.isDisabled &&
-        `
-      &:hover {
-        cursor: ${(!p.isDisabled ? 'pointer' : 'not-allowed')};
-        ${!p.inverseMode
-            ? `
-          background-color: ${p.hoverColor};  
-        `
-            : `
-          path {
-            fill: ${p.hoverColor};
-          }
-        `}
-      }
-    `}
-  `}
-
-  ${(p) => p.active &&
-    `
-    background-color: ${p.hoverColor};
-    path {
-    }
-  `}
+  }
 `;

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

@@ -34,10 +34,12 @@ exports.iconsPath = {
     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',
     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',
-    radio_checked: 'M10 15C11.3833 15 12.5625 14.5125 13.5375 13.5375C14.5125 12.5625 15 11.3833 15 10C15 8.61667 14.5125 7.4375 13.5375 6.4625C12.5625 5.4875 11.3833 5 10 5C8.61667 5 7.4375 5.4875 6.4625 6.4625C5.4875 7.4375 5 8.61667 5 10C5 11.3833 5.4875 12.5625 6.4625 13.5375C7.4375 14.5125 8.61667 15 10 15ZM10 20C8.61667 20 7.31667 19.7375 6.1 19.2125C4.88333 18.6875 3.825 17.975 2.925 17.075C2.025 16.175 1.3125 15.1167 0.7875 13.9C0.2625 12.6833 0 11.3833 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.3125 6.1 0.7875C7.31667 0.2625 8.61667 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3833 19.7375 12.6833 19.2125 13.9C18.6875 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20ZM10 18C12.2333 18 14.125 17.225 15.675 15.675C17.225 14.125 18 12.2333 18 10C18 7.76667 17.225 5.875 15.675 4.325C14.125 2.775 12.2333 2 10 2C7.76667 2 5.875 2.775 4.325 4.325C2.775 5.875 2 7.76667 2 10C2 12.2333 2.775 14.125 4.325 15.675C5.875 17.225 7.76667 18 10 18Z',
-    radio_unchecked: 'M10 20C8.61667 20 7.31667 19.7375 6.1 19.2125C4.88333 18.6875 3.825 17.975 2.925 17.075C2.025 16.175 1.3125 15.1167 0.7875 13.9C0.2625 12.6833 0 11.3833 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.3125 6.1 0.7875C7.31667 0.2625 8.61667 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3833 19.7375 12.6833 19.2125 13.9C18.6875 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20ZM10 18C12.2333 18 14.125 17.225 15.675 15.675C17.225 14.125 18 12.2333 18 10C18 7.76667 17.225 5.875 15.675 4.325C14.125 2.775 12.2333 2 10 2C7.76667 2 5.875 2.775 4.325 4.325C2.775 5.875 2 7.76667 2 10C2 12.2333 2.775 14.125 4.325 15.675C5.875 17.225 7.76667 18 10 18Z',
+    radio_checked: 'M12 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.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20ZM12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17Z',
+    radio_unchecked: 'M12 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.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z',
+    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',
-    triage: "M12 7.77L18.39 18H5.61L12 7.77ZM12 4L2 20H22L12 4Z",
+    triage: 'M12 7.77L18.39 18H5.61L12 7.77ZM12 4L2 20H22L12 4Z',
     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,27 +30,72 @@ 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, autoFocus, theme = Theme_1.mainTheme, }) => {
+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, }) => {
+    const calculateNumberValue = (numberValue) => {
+        return isNaN(parseFloat(numberValue))
+            ? numberValue
+            : parseFloat(numberValue);
+    };
     const onChange = (e) => {
-        handleChange(name, e.target.value);
+        let returnedValue = type === 'number' || type === 'increase'
+            ? calculateNumberValue(e.target.value)
+            : e.target.value.toString();
+        handleChange(name, returnedValue);
+    };
+    const onBlurValidation = () => {
+        if (type === 'number' || type === 'increase') {
+            let validateValue = value;
+            if (isNaN(parseFloat(validateValue.toString()))) {
+                validateValue = min !== undefined ? min : 0;
+            }
+            if (typeof value === 'number') {
+                if (min !== undefined && value < min) {
+                    validateValue = min;
+                }
+                else if (max !== undefined && value > max) {
+                    validateValue = max;
+                }
+            }
+            handleChange(name, validateValue);
+        }
     };
     const onKeyDown = (e) => {
         if (handleSubmit && e.key === 'Enter') {
             handleSubmit();
         }
     };
-    const [inputType] = (0, react_1.useState)(type);
+    const getFiledType = (filedType) => {
+        return filedType === 'increase' ? 'number' : filedType;
+    };
+    const [inputType] = (0, react_1.useState)(getFiledType(type));
     const [showPassword, setShowPassword] = (0, react_1.useState)(false);
     const tooglePassword = () => {
         setShowPassword(!showPassword);
     };
+    const increaseValue = (filedValue) => {
+        let newValue = parseFloat((filedValue + step).toFixed(2));
+        if (max !== undefined && newValue >= max) {
+            newValue = max;
+        }
+        handleChange(name, newValue);
+    };
+    const decreaseValue = (filedValue) => {
+        let newValue = parseFloat((filedValue - step).toFixed(2));
+        if (min !== undefined && newValue < min) {
+            newValue = min;
+        }
+        handleChange(name, newValue);
+    };
     return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
         react_1.default.createElement(Aligment_1.Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap' },
             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(Input_styles_1.InputTextElement, { autoFocus: autoFocus, inputSize: size, type: showPassword ? 'text' : inputType, disabled: disabled, name: name, value: value, onChange: onChange, onKeyDown: onKeyDown, 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 }),
                 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, color: theme.inputDefaultTextColor, inverseMode: true }))),
+                    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,
+                    react_1.default.createElement(Icons_1.Icon, { name: "add", size: size === 'small' ? 16 : 24, onClick: () => increaseValue(value), iconColor: theme.inputDefaultTextColor }),
+                    react_1.default.createElement(Icons_1.Icon, { name: "remove", size: size === 'small' ? 16 : 24, onClick: () => decreaseValue(value), iconColor: theme.inputDefaultTextColor }))),
                 error && react_1.default.createElement(Input_styles_1.InputErrorMsg, null, error)))));
 };
 exports.Input = Input;

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

@@ -3,62 +3,74 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EyeIconWrapper = exports.InputErrorMsg = exports.InputWrapper = exports.InputLabelElement = exports.InputTextElement = void 0;
+exports.IconsWrapper = exports.EyeIconWrapper = exports.InputErrorMsg = exports.InputWrapper = exports.InputLabelElement = 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");
 exports.InputTextElement = styled_components_1.default.input `
-  position:relative;
+  position: relative;
   box-sizing: border-box;
-  background-color: ${p => p.theme.inputDefaultBackground};
-  border: 1px solid ${p => p.theme.inputDefaultBorder};
+  background-color: ${(p) => p.theme.inputDefaultBackground};
+  border: 1px solid ${(p) => p.theme.inputDefaultBorder};
   border-radius: ${Theme_1.Theme.borderRadius.m};
   width: 100%;
-  font-family: "Lato", sans-serif;
+  font-family: 'Lato', sans-serif;
   outline: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-
   ${(p) => (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;`}
+  color: ${(p) => p.theme.inputDefaultTextColor};
+  width: ${(p) => (p.width ? p.width : '100%')};
+  ${(p) => p.type === 'password' && `padding-right:32px;`}
   :focus {
-    border-color: ${p => p.theme.inputFocusBorder};
-    background-color: ${p => p.theme.inputFocusBackground};
-    color:${p => p.theme.inputFocusTextColor};
+    border-color: ${(p) => p.theme.inputFocusBorder};
+    background-color: ${(p) => p.theme.inputFocusBackground};
+    color: ${(p) => p.theme.inputFocusTextColor};
   }
-  :disabled{
-    background-color: ${p => p.theme.inputDisabledBackground};
-    border-color: ${p => p.theme.inputDisabledBorder};
-    color:${p => p.theme.inputDisabledTextColor};
+  :disabled {
+    background-color: ${(p) => p.theme.inputDisabledBackground};
+    border-color: ${(p) => p.theme.inputDisabledBorder};
+    color: ${(p) => p.theme.inputDisabledTextColor};
     cursor: not-allowed;
   }
-  ${p => p.error && `
+  ${(p) => p.error &&
+    `
   background-color: ${p.theme.inputErrorBackground};
   border-color: ${p.theme.inputErrorBorder};
   color:${p.theme.inputErrorTextColor};
   `}
+  ::-webkit-outer-spin-button,
+  ::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  -moz-appearance: textfield;
+  appearance: textfield;
 `;
 exports.InputLabelElement = (0, styled_components_1.default)(Typography_1.TextLabel) `
-  ${p => p.labelPosition === 'top' && `margin-bottom: ${Theme_1.Theme.padding.s};`}
-  ${p => p.labelPosition === 'left' && `margin-right: ${Theme_1.Theme.padding.s};`}
+  ${(p) => p.labelPosition === 'top' && `margin-bottom: ${Theme_1.Theme.padding.s};`}
+  ${(p) => p.labelPosition === 'left' && `margin-right: ${Theme_1.Theme.padding.s};`}
 `;
 exports.InputWrapper = styled_components_1.default.div `
-  display:flex;
-  position:relative;
-  width: ${p => p.width ? p.width : '100%'};
+  display: flex;
+  position: relative;
+  width: ${(p) => (p.width ? p.width : '100%')};
 `;
 exports.InputErrorMsg = styled_components_1.default.div `
-  color: ${p => p.theme.inputErrorTextColor};
+  color: ${(p) => p.theme.inputErrorTextColor};
   font-size: ${Theme_1.Theme.fontSize.s};
   position: absolute;
   bottom: -20px;
 `;
 exports.EyeIconWrapper = styled_components_1.default.div `
-position: absolute;
-right: 2px;
-${(p) => (0, common_1.setEyeTopPosition)(p.size)}
+  position: absolute;
+  right: 2px;
+  ${(p) => (0, common_1.setEyeTopPosition)(p.size)}
+`;
+exports.IconsWrapper = styled_components_1.default.div `
+  display:flex;
+  align-items: center;
+
 `;

package/dist/cjs/components/Section/Section.js

@@ -8,10 +8,12 @@ const Typography_1 = require("../Typography");
 const react_1 = __importDefault(require("react"));
 const Section_styles_1 = require("./Section.styles");
 const Theme_1 = require("../../Theme");
-const Section = ({ title, children, titlePosition = "left", noPadding = false, theme = Theme_1.mainTheme, backgroundColor = theme.contentBackground, }) => {
+const Button_1 = require("../Button");
+const Section = ({ title, children, titlePosition = 'left', noPadding = false, theme = Theme_1.mainTheme, backgroundColor = theme.contentBackground, action, actionLabel = 'action', }) => {
     return (react_1.default.createElement(Section_styles_1.SectionElement, { backgroundColor: backgroundColor },
-        title && (react_1.default.createElement(Section_styles_1.SectionTitle, { titlePosition: titlePosition, noPadding: noPadding },
-            react_1.default.createElement(Typography_1.TextSubHeader, null, title))),
+        title && (react_1.default.createElement(Section_styles_1.SectionTitle, { titlePosition: titlePosition, noPadding: noPadding, withAction: titlePosition === 'left' && !!action },
+            react_1.default.createElement(Typography_1.TextSubHeader, null, title),
+            titlePosition === 'left' && !!action && (react_1.default.createElement(Button_1.Button, { text: actionLabel, onClick: action, size: "small", mode: "inverse" })))),
         react_1.default.createElement(Section_styles_1.SectionContent, { noPadding: noPadding }, children)));
 };
 exports.Section = Section;

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

@@ -7,21 +7,27 @@ exports.SectionContent = exports.SectionTitle = exports.SectionElement = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 const Theme_1 = require("../../Theme");
 exports.SectionElement = styled_components_1.default.div `
-  width:100%;
-  box-sizing:border-box;
-  overflow:auto;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: auto;
   padding: ${Theme_1.Theme.padding.l} 0;
   background-color: ${(p) => p.backgroundColor};
 `;
 exports.SectionTitle = styled_components_1.default.div `
-  width:100%;
-  padding:0 ${p => p.noPadding ? 0 : Theme_1.Theme.padding.l} ${Theme_1.Theme.padding.l} ${p => p.noPadding ? 0 : Theme_1.Theme.padding.l} ;
-  text-align:${p => p.titlePosition};
-  box-sizing:border-box;
+  width: 100%;
+  padding: 0 ${(p) => (p.noPadding ? 0 : Theme_1.Theme.padding.l)} ${Theme_1.Theme.padding.l}
+    ${(p) => (p.noPadding ? 0 : Theme_1.Theme.padding.l)};
+  text-align: ${(p) => p.titlePosition};
+  box-sizing: border-box;
+  ${(p) => p.withAction &&
+    `display:flex;
+  align-items: center;
+  justify-content: space-between;
+  `};
 `;
 exports.SectionContent = styled_components_1.default.div `
-  box-sizing:border-box;
-  width:100%;
-  display:flex;
-  padding: 0 ${p => p.noPadding ? 0 : Theme_1.Theme.padding.l};
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  padding: 0 ${(p) => (p.noPadding ? 0 : Theme_1.Theme.padding.l)};
 `;

package/dist/cjs/components/Table/Table.js

@@ -126,10 +126,10 @@ hover = true, selectable = true, sortable = true, filtrable = false, sort = {
                         tableProps.sort.order != 'none' && (react_1.default.createElement(Table_styles_1.TableHeaderSortIcon, null,
                         react_1.default.createElement(Icons_1.Icon, { name: tableProps.sort.order === 'asc'
                                 ? 'arrow_drop_down'
-                                : 'arrow_drop_up', color: theme.tableCellSortIcon, size: 20 })))))))))),
+                                : 'arrow_drop_up', iconColor: theme.tableCellSortIcon, size: 20 })))))))))),
             react_1.default.createElement("tbody", null, tableProps.elements.map((item) => (react_1.default.createElement(Table_styles_1.TableRow, { key: item.id, hover: hover, active: selectedRow === item.id, selectable: selectable, onClick: () => handleRowClick(item.id) }, tableProps.headers.map((header) => (react_1.default.createElement(react_1.default.Fragment, null, header.action ? (react_1.default.createElement(Table_styles_1.OptionTableCell, null,
                 react_1.default.createElement(Table_styles_1.OptionTableCellWrapper, { onClick: (e) => e.stopPropagation() },
-                    react_1.default.createElement(DropdownMenu_1.DropdownMenu, { options: moreActions, targetID: item.id, iconName: "more_vert", color: theme.tableMoreIconColor, iconInverseMode: true })))) : (react_1.default.createElement(Table_styles_1.TableCell, { key: `${item.id}-${header.name}` }, header.date
+                    react_1.default.createElement(DropdownMenu_1.DropdownMenu, { options: moreActions, targetID: item.id, iconName: "more_vert", iconColor: theme.tableMoreIconColor })))) : (react_1.default.createElement(Table_styles_1.TableCell, { key: `${item.id}-${header.name}` }, header.date
                 ? (0, date_fns_1.format)(item[header.valueSource], 'dd-MM-yyyy')
                 : item[header.valueSource]))))))))))));
 };

package/dist/cjs/index.js

@@ -23,6 +23,7 @@ __exportStar(require("./components/Dropdown"), exports);
 __exportStar(require("./components/DropdownMenu"), exports);
 __exportStar(require("./components/ElementHeader"), exports);
 __exportStar(require("./components/DropdownMenu"), exports);
+__exportStar(require("./components/Form"), exports);
 __exportStar(require("./components/File"), exports);
 __exportStar(require("./components/Filters"), exports);
 __exportStar(require("./components/Icons"), exports);

package/dist/esm/Theme/Theme.js

@@ -69,8 +69,10 @@ export const mainTheme = {
     disabledText: Theme.colors.gray_1,
     //icon
     iconColor: Theme.colors.text,
+    iconHoverColor: Theme.colors.primary,
+    iconBgColor: 'transparent',
     iconDisabledColor: Theme.colors.gray_4,
-    iconHoverColor: Theme.colors.primary_10,
+    iconBgHoverColor: Theme.colors.primary_10,
     //text
     textColor: Theme.colors.text,
     // input

package/dist/esm/components/Chips/Chips.js

@@ -9,5 +9,5 @@ export const Chips = ({ theme = mainTheme, label, handleClose, }) => {
         React.createElement(ChipsElement, { onClick: () => handleClose() },
             React.createElement(Aligment, { gap: 4 },
                 React.createElement(ChipsLabel, null, label),
-                React.createElement(Icon, { name: 'close', color: theme.chipsNeutralTextColor, size: 14 })))));
+                React.createElement(Icon, { name: "close", iconColor: theme.chipsNeutralTextColor, iconHoverColor: theme.chipsNeutralTextColor, iconBgHoverColor: theme.iconBgColor, size: 14 })))));
 };

package/dist/esm/components/DropdownMenu/DropdownMenu.js

@@ -1,11 +1,11 @@
 import { Panel, setIconSize } from '../common';
 import React, { useState, useRef, useEffect } from 'react';
-import { Theme } from '../../Theme';
+import { Theme, mainTheme } from '../../Theme';
 import { Icon } from '../Icons';
 import { DropdownMenuOption, DropdownMenuElement, DropdownMenuContent, DropdownMenuFooter, DropdownMenuHeader, } from './DropdownMenu.styles';
 import { Aligment } from '../Aligment';
 import { TextAccent, TextLabel, Text } from '../Typography';
-export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', color = Theme.colors.text, header = false, headerTitle, headerSubtitle, footer = false, footerText, footerAction, options, right = false, left = false, iconInverseMode = false, iconHoverColor = Theme.colors.primary_10, targetID }) => {
+export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false, headerTitle, headerSubtitle, footer = false, footerText, footerAction, options, right = false, left = false, targetID, iconColor = mainTheme.iconColor, iconHoverColor = mainTheme.iconHoverColor, iconBgColor = mainTheme.iconBgColor, iconBgHoverColor = mainTheme.iconBgHoverColor, }) => {
     const [open, toogleOpen] = useState(false);
     const ref = useRef(null);
     const close = () => {
@@ -31,7 +31,7 @@ export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', color =
         };
     }, [open]);
     return (React.createElement(DropdownMenuElement, null,
-        React.createElement(Icon, { name: iconName, onClick: () => toogleOpen(!open), color: color, hoverColor: iconHoverColor, size: setIconSize(size), active: open, right: right, left: left, inverseMode: iconInverseMode }),
+        React.createElement(Icon, { name: iconName, onClick: () => toogleOpen(!open), size: setIconSize(size), isActive: open, right: right, left: left, iconColor: iconColor, iconHoverColor: iconHoverColor, iconBgColor: iconBgColor, iconBgHoverColor: iconBgHoverColor }),
         open && (React.createElement(Panel, { ref: ref, size: size, position: "right" },
             React.createElement(Aligment, { direction: "column" },
                 header && (React.createElement(DropdownMenuHeader, null,

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

@@ -18,12 +18,12 @@ export const ElementHeader = ({ title, actionLabel = '', handleClose, handleClic
     };
     const rightSide = () => {
         if (handleClose) {
-            return (React.createElement(Icon, { onClick: () => handleClose(), name: "close", color: Theme.colors.text }));
+            return (React.createElement(Icon, { onClick: () => handleClose(), name: "close", iconColor: Theme.colors.text }));
         }
         else if (!handleClose && handleClick && actionLabel) {
             return (React.createElement(Aligment, { align: "center", width: "auto" },
                 React.createElement(Button, { mode: "secondary", text: actionLabel, onClick: () => handleClick() }),
-                options && (React.createElement(DropdownMenu, { options: options, right: true, color: iconColor, iconHoverColor: iconHoverColor, iconInverseMode: true }))));
+                options && (React.createElement(DropdownMenu, { options: options, right: true, iconColor: iconColor }))));
         }
     };
     return (React.createElement(Aligment, { justify: !title && !children ? 'flex-end' : 'space-between', vPadding: Theme.padding.m, hPadding: Theme.padding.l, backgroundColor: backgroundColor },