venice-ui 2.4.13 → 3.0.1

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

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+export const FormRoot = styled.div `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+export const FormRow = styled.div `
+  width: 100%;
+  margin-bottom: ${({ theme, config }) => config.size.marginBottom}px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+`;
+export const FormSubRow = styled.div `
+  display: flex;
+  width: calc(
+    (100% - ((${(p) => p.factor} - 1) * ${(p) => p.config.size.gap}px)) /
+      ${(p) => p.factor}
+  );
+`;

package/dist/esm/components/Header/Header.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { HeaderRoot, HeaderWrapper } from './Header.styles';
+import { resolveThemeWithComponentsConfig } from '../../config';
+import { Aligment } from '../Aligment';
+import { Icon } from '../Icon';
+import { Button } from '../Button';
+import { DropdownMenu } from '../DropdownMenu';
+import { ThemeProvider } from 'styled-components';
+export const Header = ({ title, actionLabel, header, options, bottomDivader, actionDisabled, handleClose, handleClick, handleBack, theme, themeVariant = 'default', }) => {
+    const resolvedThemeData = resolveThemeWithComponentsConfig({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const headerConfig = componentsConfig.header;
+    const leftSide = () => {
+        if (title) {
+            return (React.createElement(Aligment, { align: "center", direction: "row", width: "auto", gap: headerConfig.size.gap },
+                handleBack && (React.createElement(Icon, { name: "back_arrow", onClick: () => handleBack(), size: headerConfig.size.iconSize })),
+                title));
+        }
+        else if (!title && header) {
+            return header;
+        }
+    };
+    const rightSide = () => {
+        if (handleClose) {
+            return (React.createElement(Icon, { onClick: () => handleClose(), name: "close", size: headerConfig.size.iconSize }));
+        }
+        else if (!handleClose && handleClick && actionLabel) {
+            return (React.createElement(Aligment, { align: "center", width: "auto" },
+                React.createElement(Button, { mode: "ghost", text: actionLabel, onClick: () => handleClick(), isDisabled: actionDisabled }),
+                options && React.createElement(DropdownMenu, { options: options, size: "lg" })));
+        }
+    };
+    return (React.createElement(ThemeProvider, { theme: resolvedTheme },
+        React.createElement(HeaderRoot, { theme: resolvedTheme, config: headerConfig, bottomDivader: bottomDivader },
+            React.createElement(HeaderWrapper, { theme: resolvedTheme, config: headerConfig, single: !title && !header },
+                leftSide(),
+                rightSide()))));
+};

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

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+export const HeaderRoot = styled.div `
+  box-sizing: border-box;
+  width: 100%;
+  height: ${(p) => p.config.size.height}px;
+  gap: ${(p) => p.config.size.gap}px;
+  background-color: ${(p) => p.config.color.background};
+  border-bottom: 1px solid transparent;
+  ${(p) => p.bottomDivader &&
+    `
+    border-bottom: 1px solid ${p.config.color.bottomBorder};
+    `}
+`;
+export const HeaderWrapper = styled.div `
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: ${(p) => (p.single ? 'flex-end' : 'space-between')};
+  height: 100%;
+  padding: 0 ${(p) => p.config.size.paddingX}px;
+  gap: ${(p) => p.config.size.gap}px;
+  font-size: ${(p) => p.config.size.fontSize}px;
+  line-height: ${(p) => p.config.size.lineHeight}px;
+  font-weight: 300;
+  gap: ${(p) => p.config.size.gap}px;
+`;

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

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

package/dist/esm/components/HelperText/HelperText.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Helper } from './HelperText.styles';
+import { resolveThemeWithComponentsConfig } from '../../config';
+export const HelperText = ({ helperText, mode, theme, themeVariant, disabled, }) => {
+    const { resolvedTheme, componentsConfig } = resolveThemeWithComponentsConfig({
+        theme,
+        themeVariant,
+    });
+    const inputConfig = componentsConfig.helperText;
+    return (React.createElement(Helper, { mode: mode, theme: resolvedTheme, helperTextConfig: inputConfig, disabled: disabled }, helperText));
+};

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

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+export const Helper = styled.div `
+  font-weight: 400;
+  letter-spacing: -0.01em;
+  transition: color 160ms ease;
+  user-select: none;
+  font-size: ${({ helperTextConfig }) => helperTextConfig.size.fontSize}px;
+  line-height: ${({ helperTextConfig }) => helperTextConfig.size.lineHeight}px;
+  color: ${({ theme, helperTextConfig, mode }) => helperTextConfig.color[mode].text};
+  ${({ disabled, theme, helperTextConfig }) => disabled &&
+    `
+     color: ${helperTextConfig.color.disabled.text};
+     `}
+`;

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

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

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

@@ -0,0 +1,37 @@
+import React, { useRef } from 'react';
+import { ThemeProvider } from 'styled-components';
+import { IconElement } from './Icon.styles';
+import { iconsPath } from './IconsPath';
+import { resolveThemeWithComponentsConfig } from '../../config';
+export const Icon = ({ name = 'person', size = 'lg', isDisabled = false, isActive = false, isError = false, onClick, tooltip, color, background, hoverColor, hoverBackground, theme, themeVariant = 'default', }) => {
+    const iconRef = useRef(null);
+    // const [showTooltip, setShowTooltip] = useState(false)
+    const { resolvedTheme, componentsConfig } = resolveThemeWithComponentsConfig({
+        theme,
+        themeVariant,
+    });
+    const iconConfig = componentsConfig.icon;
+    const resolvedSize = typeof size === 'number'
+        ? { svg: size, wrapper: size, padding: 0 }
+        : iconConfig.size[size] ?? iconConfig.size.md;
+    const handleClick = (event) => {
+        if (!isDisabled && !!onClick) {
+            onClick(event);
+        }
+    };
+    return (React.createElement(ThemeProvider, { theme: resolvedTheme },
+        React.createElement(React.Fragment, null,
+            React.createElement(IconElement, { ref: iconRef, config: componentsConfig, onClick: handleClick, isDisabled: isDisabled, isError: isError, isActive: isActive, color: color, background: background, hoverColor: hoverColor, hoverBackground: hoverBackground, resolvedSize: resolvedSize, 
+                // onMouseEnter={() => setShowTooltip(true)}
+                // onMouseLeave={() => setShowTooltip(false)}
+                isInteraction: typeof onClick === 'function' },
+                React.createElement("svg", { width: resolvedSize.svg, height: resolvedSize.svg, viewBox: '0 0 24 24', preserveAspectRatio: "xMidYMid meet", x: "0", y: "0", name: name },
+                    React.createElement("path", { d: iconsPath[name], fill: color ??
+                            (isDisabled
+                                ? iconConfig.color.disabled
+                                : isError
+                                    ? iconConfig.color.error
+                                    : isActive
+                                        ? iconConfig.color.active
+                                        : iconConfig.color.default) }))))));
+};

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

@@ -0,0 +1,57 @@
+import styled from 'styled-components';
+export const IconElement = styled.div `
+  transition: 300ms;
+  box-sizing: border-box;
+  position: relative;
+  width: auto;
+  display: flex;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: center;
+  align-items: center;
+  height: ${(p) => p.resolvedSize.wrapper}px;
+  padding: ${(p) => p.resolvedSize.padding}px;
+  width: ${(p) => p.resolvedSize.wrapper}px;
+  border-radius: ${(p) => p.config.icon.radius.default}px;
+  cursor: ${(p) => (p.isDisabled ? 'not-allowed' : p.isInteraction ? 'pointer' : 'default')};
+  background: ${(p) => p.background ??
+    (p.isDisabled
+        ? p.config.icon.background.disabled
+        : p.isError
+            ? p.config.icon.background.error
+            : p.isActive
+                ? p.config.icon.background.active
+                : p.config.icon.background.default)};
+
+  path {
+    transition: 300ms;
+    fill: ${(p) => p.color ??
+    (p.isDisabled
+        ? p.config.icon.color.disabled
+        : p.isError
+            ? p.config.icon.color.error
+            : p.isActive
+                ? p.config.icon.color.active
+                : p.config.icon.color.default)};
+  }
+
+  &:hover {
+    background: ${(p) => p.isDisabled
+    ? p.background ?? p.config.icon.background.disabled
+    : p.isError
+        ? p.background ?? p.config.icon.background.error
+        : p.isActive
+            ? p.background ?? p.config.icon.background.hoverActive
+            : p.hoverBackground ?? p.config.icon.background.hover};
+
+    path {
+      fill: ${(p) => p.isDisabled
+    ? p.color ?? p.config.icon.color.disabled
+    : p.isError
+        ? p.color ?? p.config.icon.color.error
+        : p.isActive
+            ? p.color ?? p.config.icon.color.hoverActive
+            : p.hoverColor ?? p.config.icon.color.hover};
+    }
+  }
+`;

package/dist/esm/components/{Icons → Icon}/IconsPath.js

@@ -11,6 +11,8 @@ export const iconsPath = {
     back_arrow: 'm12 20-8-8 8-8 1.425 1.4-5.6 5.6H20v2H7.825l5.6 5.6Z',
     bookmark: 'M5 21V5q0-.825.588-1.413Q6.175 3 7 3h10q.825 0 1.413.587Q19 4.175 19 5v16l-7-3Zm2-3.05 5-2.15 5 2.15V5H7ZM7 5h10-5Z',
     calendar: 'M5 22q-.825 0-1.413-.587Q3 20.825 3 20V6q0-.825.587-1.412Q4.175 4 5 4h1V2h2v2h8V2h2v2h1q.825 0 1.413.588Q21 5.175 21 6v14q0 .825-.587 1.413Q19.825 22 19 22Zm0-2h14V10H5v10ZM5 8h14V6H5Zm0 0V6v2Zm7 6q-.425 0-.712-.288Q11 13.425 11 13t.288-.713Q11.575 12 12 12t.713.287Q13 12.575 13 13t-.287.712Q12.425 14 12 14Zm-4 0q-.425 0-.713-.288Q7 13.425 7 13t.287-.713Q7.575 12 8 12t.713.287Q9 12.575 9 13t-.287.712Q8.425 14 8 14Zm8 0q-.425 0-.712-.288Q15 13.425 15 13t.288-.713Q15.575 12 16 12t.712.287Q17 12.575 17 13t-.288.712Q16.425 14 16 14Zm-4 4q-.425 0-.712-.288Q11 17.425 11 17t.288-.712Q11.575 16 12 16t.713.288Q13 16.575 13 17t-.287.712Q12.425 18 12 18Zm-4 0q-.425 0-.713-.288Q7 17.425 7 17t.287-.712Q7.575 16 8 16t.713.288Q9 16.575 9 17t-.287.712Q8.425 18 8 18Zm8 0q-.425 0-.712-.288Q15 17.425 15 17t.288-.712Q15.575 16 16 16t.712.288Q17 16.575 17 17t-.288.712Q16.425 18 16 18Z',
+    chevron_down: 'M12 15.4L6 9.4L7.4 8L12 12.6L16.6 8L18 9.4L12 15.4Z',
+    chevron_up: "M12 10.8L7.4 15.4L6 14L12 8L18 14L16.6 15.4L12 10.8Z",
     check_circle: 'm10.6 16.6 7.05-7.05-1.4-1.4-5.65 5.65-2.85-2.85-1.4 1.4ZM12 22q-2.075 0-3.9-.788-1.825-.787-3.175-2.137-1.35-1.35-2.137-3.175Q2 14.075 2 12t.788-3.9q.787-1.825 2.137-3.175 1.35-1.35 3.175-2.138Q9.925 2 12 2t3.9.787q1.825.788 3.175 2.138 1.35 1.35 2.137 3.175Q22 9.925 22 12t-.788 3.9q-.787 1.825-2.137 3.175-1.35 1.35-3.175 2.137Q14.075 22 12 22Zm0-2q3.35 0 5.675-2.325Q20 15.35 20 12q0-3.35-2.325-5.675Q15.35 4 12 4 8.65 4 6.325 6.325 4 8.65 4 12q0 3.35 2.325 5.675Q8.65 20 12 20Zm0-8Z',
     check_box: 'm10.6 16.2 7.05-7.05-1.4-1.4-5.65 5.65-2.85-2.85-1.4 1.4ZM5 21q-.825 0-1.413-.587Q3 19.825 3 19V5q0-.825.587-1.413Q4.175 3 5 3h14q.825 0 1.413.587Q21 4.175 21 5v14q0 .825-.587 1.413Q19.825 21 19 21Zm0-2h14V5H5v14ZM5 5v14V5Z',
     check: 'm9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z',
@@ -25,6 +27,7 @@ export const iconsPath = {
     edit: 'M5 19h1.4l8.625-8.625-1.4-1.4L5 17.6ZM19.3 8.925l-4.25-4.2 1.4-1.4q.575-.575 1.413-.575.837 0 1.412.575l1.4 1.4q.575.575.6 1.388.025.812-.55 1.387ZM17.85 10.4 7.25 21H3v-4.25l10.6-10.6Zm-3.525-.725-.7-.7 1.4 1.4Z',
     error: 'M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16C13 15.7167 12.9042 15.4792 12.7125 15.2875C12.5208 15.0958 12.2833 15 12 15C11.7167 15 11.4792 15.0958 11.2875 15.2875C11.0958 15.4792 11 15.7167 11 16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM11 13H13V7H11V13ZM12 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',
     filters: 'M10 18v-2h4v2Zm-4-5v-2h12v2ZM3 8V6h18v2Z',
+    file: "M17.673 15.6443C17.673 17.2686 17.1079 18.6506 15.9777 19.7902C14.8477 20.9301 13.4738 21.5 11.8558 21.5C10.2314 21.5 8.85258 20.9301 7.71925 19.7902C6.58592 18.6506 6.01925 17.2686 6.01925 15.6443V6.65375C6.01925 5.49992 6.41992 4.51917 7.22125 3.7115C8.02242 2.90383 8.99992 2.5 10.1537 2.5C11.3076 2.5 12.2852 2.90383 13.0865 3.7115C13.8878 4.51917 14.2885 5.49992 14.2885 6.65375V15.1635C14.2885 15.8403 14.0523 16.4182 13.5798 16.897C13.1074 17.3758 12.5328 17.6152 11.8558 17.6152C11.1789 17.6152 10.6011 17.3775 10.1223 16.902C9.64342 16.4263 9.404 15.8468 9.404 15.1635V6.38475H10.9037V15.1635C10.9037 15.4315 10.9938 15.6572 11.174 15.8405C11.3542 16.0238 11.5782 16.1155 11.8462 16.1155C12.1141 16.1155 12.3381 16.0238 12.5183 15.8405C12.6984 15.6572 12.7885 15.4315 12.7885 15.1635V6.64425C12.7782 5.90575 12.5211 5.28042 12.0173 4.76825C11.5134 4.25608 10.8922 4 10.1537 4C9.41542 4 8.79175 4.25767 8.28275 4.773C7.77375 5.2885 7.51925 5.91542 7.51925 6.65375V15.6443C7.50892 16.8533 7.92683 17.8814 8.773 18.7288C9.61917 19.5763 10.6468 20 11.8558 20C13.0481 20 14.0606 19.5763 14.8932 18.7288C15.7259 17.8814 16.1525 16.8533 16.173 15.6443V6.38475H17.673V15.6443Z",
     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',

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

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

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

@@ -1,89 +1,63 @@
-import React, { useEffect, useState } from 'react';
-import { ThemeProvider } from 'styled-components';
-import { Aligment } from '../Aligment';
-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 = false, errorMsg, placeholder, min, max, step = 0.1, autoFocus, theme = mainTheme, readOnly = false, prefix, handleFieldFocus, handleFieldBlur, }) => {
-    const [inputValue, setInputValue] = useState(value);
-    useEffect(() => {
-        setInputValue(value);
-    }, [value]);
-    const calculateNumberValue = (numberValue) => {
-        return isNaN(parseFloat(numberValue))
-            ? numberValue
-            : parseFloat(numberValue);
-    };
+import React, { useState } from 'react';
+import { resolveThemeWithComponentsConfig } from '../../config';
+import { InputElement, PrefixWrapper } from './Input.styles';
+import { Icon } from '../Icon';
+import { ComponentRoot } from '../ComponentRoot';
+export const Input = ({ theme, themeVariant = 'default', label, labelPosition = 'top', value, type = 'text', name, disabled = false, size = 'md', handleChange, handleSubmit, width, error = false, helperText, placeholder, autoFocus, readOnly = false, prefix, suffix, handleFieldFocus, handleFieldBlur, prefixIcon, suffixIcon, withClear = false, suffixIconAction, prefixIconAction, required = false, optional = false, optionalLabel, componentWidth = '100%', }) => {
+    const resolvedThemeData = resolveThemeWithComponentsConfig({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const inputConfig = componentsConfig.input;
+    const [inputValue, setInputValue] = useState(value || '');
+    const [inputType] = useState(type);
+    const [showPassword, setShowPassword] = useState(false);
     const onChange = (e) => {
-        let returnedValue = type === 'number' || type === 'increase'
-            ? calculateNumberValue(e.target.value)
-            : e.target.value.toString();
+        let returnedValue = e.target.value.toString();
         setInputValue(returnedValue);
         handleChange(name, returnedValue);
     };
-    const onBlurValidation = () => {
-        if (type === 'number' || type === 'increase') {
-            let validateValue = inputValue;
-            if (isNaN(parseFloat(validateValue.toString()))) {
-                validateValue = min !== undefined ? min : 0;
-            }
-            if (typeof inputValue === 'number') {
-                if (min !== undefined && inputValue < min) {
-                    validateValue = min;
-                }
-                else if (max !== undefined && inputValue > max) {
-                    validateValue = max;
-                }
-            }
-            handleFieldBlur && handleFieldBlur();
-            handleChange(name, validateValue);
-        }
+    const onBlurValidation = (e) => {
+        let returnedValue = e.target.value.toString();
+        handleFieldBlur && handleFieldBlur();
+        handleChange(name, returnedValue);
     };
     const onFocus = () => {
         handleFieldFocus && handleFieldFocus(name);
     };
     const onKeyDown = async (e) => {
         if (handleSubmit && e.key === 'Enter') {
-            const currentValue = type === 'number' || type === 'increase'
-                ? calculateNumberValue(e.currentTarget.value)
-                : e.currentTarget.value.toString();
+            const currentValue = e.currentTarget.value.toString();
             handleChange(name, currentValue);
             handleSubmit();
         }
     };
-    const getFiledType = (filedType) => {
-        return filedType === 'increase' ? 'number' : filedType;
-    };
-    const [inputType] = useState(getFiledType(type));
-    const [showPassword, setShowPassword] = useState(false);
-    const tooglePassword = () => {
-        setShowPassword(!showPassword);
-    };
-    const increaseValue = (filedValue) => {
-        let newValue = parseFloat((filedValue + step).toFixed(2));
-        if (max !== undefined && newValue >= max) {
-            newValue = max;
+    const onSuffixIconClick = () => {
+        if (suffixIconAction && !disabled && !readOnly) {
+            suffixIconAction(name);
         }
-        handleChange(name, newValue);
     };
-    const decreaseValue = (filedValue) => {
-        let newValue = parseFloat((filedValue - step).toFixed(2));
-        if (min !== undefined && newValue < min) {
-            newValue = min;
+    const onPrefixIconClick = () => {
+        if (prefixIconAction && !disabled && !readOnly) {
+            prefixIconAction(name);
         }
-        handleChange(name, newValue);
     };
-    return (React.createElement(ThemeProvider, { theme: theme },
-        React.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap' },
-            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: inputValue, onChange: onChange, onKeyDown: onKeyDown, onBlur: onBlurValidation, onFocus: onFocus, 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,
-                        React.createElement(Icon, { name: "add", size: size === 'small' ? 16 : 24, onClick: () => increaseValue(inputValue), iconColor: theme.inputDefaultTextColor }),
-                        React.createElement(Icon, { name: "remove", size: size === 'small' ? 16 : 24, onClick: () => decreaseValue(inputValue), iconColor: theme.inputDefaultTextColor }))),
-                    error && errorMsg && React.createElement(InputErrorMsg, null, errorMsg))))))));
+    const tooglePassword = () => {
+        setShowPassword(!showPassword);
+    };
+    const clearValue = () => {
+        setInputValue('');
+        handleChange(name, '');
+    };
+    return (React.createElement(ComponentRoot, { labelPosition: labelPosition, size: size, width: width, disabled: disabled, error: error, readOnly: readOnly, required: required, optional: optional, optionalLabel: optionalLabel, helperText: helperText, themeVariant: themeVariant, theme: resolvedTheme, componentConfig: inputConfig, label: label, componentWidth: componentWidth },
+        React.createElement(React.Fragment, null,
+            prefixIcon && !readOnly && (React.createElement(Icon, { name: prefixIcon, size: inputConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: onPrefixIconClick })),
+            prefix && !readOnly && (React.createElement(PrefixWrapper, { inputSize: size, theme: resolvedTheme, inputConfig: inputConfig, error: error, disabled: disabled, readOnly: readOnly }, prefix)),
+            React.createElement(InputElement, { inputSize: size, theme: resolvedTheme, inputConfig: inputConfig, type: showPassword ? 'text' : inputType, error: error, isDisabled: disabled, readOnly: readOnly, placeholder: !readOnly ? placeholder : undefined, name: name, onChange: onChange, onKeyDown: onKeyDown, onBlur: onBlurValidation, onFocus: onFocus, value: inputValue }),
+            inputType === 'password' && !readOnly && (React.createElement(Icon, { name: showPassword ? 'visability_off' : 'visibility', size: inputConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: tooglePassword })),
+            suffixIcon && !readOnly && (React.createElement(Icon, { name: suffixIcon, size: inputConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: onSuffixIconClick })),
+            withClear && inputValue.length > 0 && !readOnly && (React.createElement(Icon, { name: "close", size: inputConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: () => clearValue() })),
+            suffix && !readOnly && (React.createElement(PrefixWrapper, { inputSize: size, theme: resolvedTheme, inputConfig: inputConfig, error: error, disabled: disabled, readOnly: readOnly }, suffix)))));
 };

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

@@ -1,98 +1,47 @@
-import { setSize, setEyeTopPosition, setHeight, setSizeWithPrefix, } from '../common';
 import styled from 'styled-components';
-import { TextLabel } from '../Typography';
-import { Theme } from '../../Theme';
-export const InputTextElement = styled.input `
-  position: relative;
-  box-sizing: border-box;
-  background-color: ${(p) => p.theme.inputDefaultBackground};
-  border: 1px solid ${(p) => p.theme.inputDefaultBorder};
-  border-radius: ${Theme.borderRadius.m};
-  width: 100%;
-  font-family: 'Lato', sans-serif;
-  outline: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  ${(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;`}
-  :focus {
-    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};
-    cursor: not-allowed;
-  }
-  ${(p) => p.error &&
+export const PrefixWrapper = styled.div `
+    display: flex;
+    height: ${({ inputConfig, inputSize }) => inputConfig.size[inputSize].height}px;
+    align-items: center;
+    padding: 0 ${({ inputConfig, inputSize }) => inputConfig.size[inputSize].paddingX}px};
+    color: ${({ theme, inputConfig }) => inputConfig.color.default.text};
+    background-color: ${({ theme, inputConfig }) => inputConfig.color.default.sufixBackground};
+    font-size: ${({ inputConfig, inputSize }) => inputConfig.size[inputSize].fontSize}px;
+  line-height: ${({ inputConfig, inputSize }) => inputConfig.size[inputSize].lineHeight}px;
+  ${({ disabled, theme, inputConfig }) => disabled &&
+    `
+    background: ${inputConfig.color.disabled.bg};
+    border-color: ${inputConfig.color.disabled.bg};  
+    color: ${inputConfig.color.disabled.text};
+    `}
+    ${({ readOnly, theme, inputConfig }) => readOnly &&
     `
-  background-color: ${p.theme.inputErrorBackground};
-  border-color: ${p.theme.inputErrorBorder};
-  color:${p.theme.inputErrorTextColor};
-  `}
+    background: ${inputConfig.color.readonly.bg};
+    color: ${inputConfig.color.readonly.text};
+    `}
+    -webkit-text-size-adjust: 100%;
+    white-space: nowrap;
+`;
+export const InputElement = styled.input `
+  width: 100%;
+  border: none;
   ::-webkit-outer-spin-button,
   ::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0;
+  }
+    &::placeholder {
+    color: ${({ theme, inputConfig }) => inputConfig.color.default.placeholder};
+    opacity: 1;
   }
   -moz-appearance: textfield;
   appearance: textfield;
-`;
-export const InputReadOnlyElement = styled.div `
-  position: relative;
-  box-sizing: border-box;
-  background-color: ${(p) => p.theme.inputDefaultBackground};
-  border: 1px solid transparent;
-  font-family: 'Lato', sans-serif;
-  outline: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  ${(p) => setSize(p.inputSize)}
-  ${(p) => setHeight(p.inputSize)}
-  color: ${(p) => p.theme.inputDefaultTextColor};
-  width: ${(p) => (p.width ? p.width : '100%')};
-  padding-left: 0;
-  border-bottom: 1px solid #dddddd;
-`;
-export const InputLabelElement = styled(TextLabel) `
-  ${(p) => p.labelPosition === 'top' && `margin-bottom: ${Theme.padding.s};`}
-  ${(p) => p.labelPosition === 'left' && `margin-left: ${Theme.padding.s};`}
-  ${(p) => p.labelPosition === 'left' && `margin-right: ${Theme.padding.s};`}
-  white-space: ${(p) => (p.wrapLabel ? 'normal' : 'nowrap')};
-`;
-export const InputWrapper = styled.div `
-  display: flex;
-  position: relative;
-  width: ${(p) => (p.width ? p.width : '100%')};
-`;
-export const InputErrorMsg = styled.div `
-  color: ${(p) => p.theme.inputErrorTextColor};
-  font-size: ${Theme.fontSize.s};
-  position: absolute;
-  bottom: -20px;
-`;
-export const EyeIconWrapper = styled.div `
-  position: absolute;
-  right: 2px;
-  ${(p) => setEyeTopPosition(p.size)}
-`;
-export const IconsWrapper = styled.div `
-  display: flex;
-  align-items: center;
-`;
-export const Prefix = styled.div `
-  position: absolute;
-  display: flex;
-  left: 0px;
-  top: 1px;
-  width: 24px;
-  align-items: center;
-  color: ${Theme.colors.gray_1};
-  ${(p) => setSize(p.inputSize)}
+  outline: none;
+  height: ${({ inputConfig, inputSize }) => inputConfig.size[inputSize].height}px;
+  font-size: ${({ inputConfig, inputSize }) => inputConfig.size[inputSize].fontSize}px;
+  line-height: ${({ inputConfig, inputSize }) => inputConfig.size[inputSize].lineHeight}px;
+  padding: 0 ${({ inputConfig, inputSize }) => inputConfig.size[inputSize].paddingX}px};
+  color: ${({ theme, inputConfig, isDisabled }) => isDisabled
+    ? inputConfig.color.disabled.text
+    : inputConfig.color.default.text};
 `;

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

@@ -1,2 +1 @@
-export * from "./Input";
-export * from './Input.styles';
+export * from './Input';

package/dist/esm/components/Label/Label.js

@@ -0,0 +1,17 @@
+import { resolveThemeWithComponentsConfig } from '../../config';
+import React from 'react';
+import { LabelElement, OptionalIndicator, RequiredIndicator, } from './Label.styles';
+import { wordbook } from '../../config';
+import { ThemeProvider } from 'styled-components';
+export const Label = ({ text, position, theme, themeVariant, size, required = false, optional = false, optionalLabel = wordbook.label.optional, smallSize = false, noBreakLabel = true }) => {
+    const { resolvedTheme, componentsConfig } = resolveThemeWithComponentsConfig({
+        theme,
+        themeVariant,
+    });
+    const labelConfig = componentsConfig.label;
+    return (React.createElement(ThemeProvider, { theme: resolvedTheme },
+        React.createElement(LabelElement, { size: size, labelConfig: labelConfig, theme: resolvedTheme, position: position, smallSize: smallSize, noBreakLabel: noBreakLabel },
+            text,
+            required && (React.createElement(RequiredIndicator, { theme: resolvedTheme, labelConfig: labelConfig }, "*")),
+            optional && (React.createElement(OptionalIndicator, { theme: resolvedTheme, labelConfig: labelConfig }, optionalLabel)))));
+};

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

@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+export const LabelElement = styled.div `
+  font-weight: 500;
+  letter-spacing: -0.01em;
+    white-space: ${({ noBreakLabel }) => (noBreakLabel ? 'nowrap' : 'normal')};
+  ${({ position, labelConfig, size, smallSize }) => position !== 'top' &&
+    `
+      min-height: ${smallSize
+        ? labelConfig.size[size].smallHeight
+        : labelConfig.size[size].height}px;
+    `}
+  font-size: ${({ labelConfig, size }) => labelConfig.size[size].fontSize}px;
+  line-height: ${({ labelConfig, size }) => labelConfig.size[size].lineHeight}px;
+  color: ${({ labelConfig }) => labelConfig.color.left.text};
+  display: flex;
+  align-items: center;
+  ${({ position, labelConfig }) => position === 'top' &&
+    `
+        font-size: ${labelConfig.size.top.fontSize}px;
+        line-height: ${labelConfig.size.top.lineHeight}px;
+        color: ${labelConfig.color.top.text};
+        `}
+`;
+export const RequiredIndicator = styled.span `
+  color: ${({ labelConfig }) => labelConfig.color.required.text};
+  padding: 0 4px;
+`;
+export const OptionalIndicator = styled.span `
+  color: ${({ labelConfig }) => labelConfig.color.top.text};
+  font-size: ${({ labelConfig }) => labelConfig.size.top.fontSize}px;
+  margin-left: 4px;
+`;

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

@@ -0,0 +1 @@
+export { Label } from './Label';