@typeolymp/ui-components 1.19.17 → 1.19.18

package/build/components/atoms/Input/index.d.ts

@@ -9,6 +9,7 @@ export declare type PropsType = {
     autoComplete?: string;
     autoFocus?: boolean;
     disabled?: boolean;
+    size?: "small" | "medium";
     onChange?(value: string): void;
     onBlur?(): void;
 };

package/build/index.es.js

@@ -4290,14 +4290,50 @@ var StyledParagraph = styled.p(templateObject_1$P || (templateObject_1$P = __mak
 var templateObject_1$P;
 
 var Container$q = styled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject$1(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
-var InputIconWrapper = styled.div(templateObject_2$B || (templateObject_2$B = __makeTemplateObject$1(["\n  position: relative;\n  width: 100%;\n\n  input {\n    padding-right: 43px;\n  }\n\n  input[type=\"date\"] {\n    color: ", ";\n  }\n\n  div {\n    position: absolute;\n    height: 24px;\n    right: 12px;\n    top: 14px;\n  }\n\n  svg {\n    cursor: ", ";\n  }\n"], ["\n  position: relative;\n  width: 100%;\n\n  input {\n    padding-right: 43px;\n  }\n\n  input[type=\"date\"] {\n    color: ", ";\n  }\n\n  div {\n    position: absolute;\n    height: 24px;\n    right: 12px;\n    top: 14px;\n  }\n\n  svg {\n    cursor: ", ";\n  }\n"])), function (_a) {
+var InputIconWrapper = styled.div(templateObject_2$B || (templateObject_2$B = __makeTemplateObject$1(["\n  position: relative;\n  width: 100%;\n\n  input {\n    padding-right: 43px;\n  }\n\n  input[type=\"date\"] {\n    color: ", ";\n  }\n\n  div {\n    position: absolute;\n    height: 24px;\n    right: ", ";\n    top: ", ";\n  }\n\n  svg {\n    cursor: ", ";\n    width: ", ";\n  }\n"], ["\n  position: relative;\n  width: 100%;\n\n  input {\n    padding-right: 43px;\n  }\n\n  input[type=\"date\"] {\n    color: ", ";\n  }\n\n  div {\n    position: absolute;\n    height: 24px;\n    right: ", ";\n    top: ", ";\n  }\n\n  svg {\n    cursor: ", ";\n    width: ", ";\n  }\n"])), function (_a) {
     var isChanged = _a.isChanged;
     return !isChanged ? theme.colors.lightGray.darker : "";
+}, function (_a) {
+    var size = _a.size;
+    switch (size) {
+        case "small":
+            return "7px";
+        default:
+        case "medium":
+            return "12px";
+    }
+}, function (_a) {
+    var size = _a.size;
+    switch (size) {
+        case "small":
+            return "10px";
+        default:
+        case "medium":
+            return "14px";
+    }
 }, function (_a) {
     var disabled = _a.disabled;
     return (disabled ? "not-allowed" : "pointer");
+}, function (_a) {
+    var size = _a.size;
+    switch (size) {
+        case "small":
+            return "20px";
+        default:
+        case "medium":
+            return "24px";
+    }
 });
-var StyledInput = styled.input(templateObject_3$d || (templateObject_3$d = __makeTemplateObject$1(["\n  width: 100%;\n  min-width: 228px;\n  height: 50px;\n  background-color: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  padding: 13px 15px;\n  cursor: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  font-style: normal;\n  line-height: ", ";\n  color: ", ";\n\n  ::placeholder {\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: 500;\n    font-style: normal;\n    line-height: ", ";\n    color: ", ";\n  }\n\n  ::-webkit-calendar-picker-indicator {\n    display: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"], ["\n  width: 100%;\n  min-width: 228px;\n  height: 50px;\n  background-color: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  padding: 13px 15px;\n  cursor: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  font-style: normal;\n  line-height: ", ";\n  color: ", ";\n\n  ::placeholder {\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: 500;\n    font-style: normal;\n    line-height: ", ";\n    color: ", ";\n  }\n\n  ::-webkit-calendar-picker-indicator {\n    display: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"])), function (_a) {
+var StyledInput = styled.input(templateObject_3$d || (templateObject_3$d = __makeTemplateObject$1(["\n  width: 100%;\n  min-width: 228px;\n  height: ", ";\n  background-color: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  padding: 13px 15px;\n  cursor: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  font-style: normal;\n  line-height: ", ";\n  color: ", ";\n\n  ::placeholder {\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: 500;\n    font-style: normal;\n    line-height: ", ";\n    color: ", ";\n  }\n\n  ::-webkit-calendar-picker-indicator {\n    display: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"], ["\n  width: 100%;\n  min-width: 228px;\n  height: ", ";\n  background-color: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  padding: 13px 15px;\n  cursor: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  font-style: normal;\n  line-height: ", ";\n  color: ", ";\n\n  ::placeholder {\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: 500;\n    font-style: normal;\n    line-height: ", ";\n    color: ", ";\n  }\n\n  ::-webkit-calendar-picker-indicator {\n    display: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"])), function (_a) {
+    var size = _a.size;
+    switch (size) {
+        case "small":
+            return "40px";
+        default:
+        case "medium":
+            return "50px";
+    }
+}, function (_a) {
     var disabled = _a.disabled;
     return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
 }, function (_a) {
@@ -4479,7 +4515,7 @@ var PasswordInput = function (props) {
         if (props.onKeyPress)
             props.onKeyPress(e);
     };
-    return (jsxs(Container$q, { children: [jsxs(InputIconWrapper, __assign$2({ disabled: props.disabled }, { children: [jsx$1(Icon, { type: isVisible ? "eyeInvisible" : "eye", color: "gray", size: "small", onClick: toggle }), jsx$1(StyledInput, __assign$2({ type: isVisible ? "text" : "password" }, props, { onChange: onChange, onKeyPress: onKeyPress }))] })), props.helperLocale && value.length ? (jsxs(HelperContainer, { children: [jsxs(Helper, __assign$2({ isOk: expressions.hasCapitalLetter(value) }, { children: ["\u2022 ", translations[props.helperLocale]["At least 1 capital letter"]] })), jsxs(Helper, __assign$2({ isOk: expressions.hasNumber(value) }, { children: ["\u2022 ", translations[props.helperLocale]["At least 1 number"]] })), jsxs(Helper, __assign$2({ isOk: expressions.hasSpecialCharacter(value) }, { children: ["\u2022 ", translations[props.helperLocale]["At least 1 special character"]] })), jsxs(Helper, __assign$2({ isOk: value.length >= 8 }, { children: ["\u2022 ", translations[props.helperLocale]["At least 8 characters"]] }))] })) : null] }));
+    return (jsxs(Container$q, { children: [jsxs(InputIconWrapper, __assign$2({ disabled: props.disabled, size: props.size }, { children: [jsx$1(Icon, { type: isVisible ? "eyeInvisible" : "eye", color: "gray", size: "small", onClick: toggle }), jsx$1(StyledInput, __assign$2({ type: isVisible ? "text" : "password" }, props, { onChange: onChange, onKeyPress: onKeyPress }))] })), props.helperLocale && value.length ? (jsxs(HelperContainer, { children: [jsxs(Helper, __assign$2({ isOk: expressions.hasCapitalLetter(value) }, { children: ["\u2022 ", translations[props.helperLocale]["At least 1 capital letter"]] })), jsxs(Helper, __assign$2({ isOk: expressions.hasNumber(value) }, { children: ["\u2022 ", translations[props.helperLocale]["At least 1 number"]] })), jsxs(Helper, __assign$2({ isOk: expressions.hasSpecialCharacter(value) }, { children: ["\u2022 ", translations[props.helperLocale]["At least 1 special character"]] })), jsxs(Helper, __assign$2({ isOk: value.length >= 8 }, { children: ["\u2022 ", translations[props.helperLocale]["At least 8 characters"]] }))] })) : null] }));
 };
 
 function toInteger$2(dirtyNumber) {
@@ -7956,7 +7992,7 @@ var DateInput = function (props) {
         if (isBefore(new Date(inputRef.current.value), new Date(props.min)))
             inputRef.current.value = props.min;
     };
-    return (jsxs(InputIconWrapper, __assign$2({ disabled: props.disabled, isChanged: isChanged }, { children: [jsx$1(Icon, { type: "calendar", color: "gray", size: "small", onClick: showPicker }), jsx$1(StyledInput, __assign$2({ type: "date" }, props, { onChange: onChange, onBlur: onBlur, onKeyPress: onKeyPress, ref: inputRef }))] })));
+    return (jsxs(InputIconWrapper, __assign$2({ disabled: props.disabled, size: props.size, isChanged: isChanged }, { children: [jsx$1(Icon, { type: "calendar", color: "gray", size: "small", onClick: showPicker }), jsx$1(StyledInput, __assign$2({ type: "date" }, props, { onChange: onChange, onBlur: onBlur, onKeyPress: onKeyPress, ref: inputRef }))] })));
 };
 
 var SearchInput = function (props) {
@@ -7966,11 +8002,15 @@ var SearchInput = function (props) {
         if (!props.disabled && !!props.onChange)
             props.onChange(e.target.value);
     };
+    var onKeyPress = function (e) {
+        if (e.key === "Enter")
+            onSearch();
+    };
     var onSearch = function () {
         if (props.onSearch)
             props.onSearch(value);
     };
-    return (jsx$1(Container$q, { children: jsxs(InputIconWrapper, __assign$2({ disabled: props.disabled }, { children: [jsx$1(Icon, { type: "search", color: "gray", size: "small", onClick: onSearch }), jsx$1(StyledInput, __assign$2({ type: "text" }, props, { onChange: onChange }))] })) }));
+    return (jsx$1(Container$q, { children: jsxs(InputIconWrapper, __assign$2({ disabled: props.disabled, size: props.size }, { children: [jsx$1(Icon, { type: "search", color: "gray", size: "small", onClick: onSearch }), jsx$1(StyledInput, __assign$2({ type: "text" }, props, { onChange: onChange, onKeyPress: onKeyPress }))] })) }));
 };
 
 var Input = function (props) {