react-gldn-kit 0.1.60 → 0.1.62

package/dist/lib/components/Modals/Alert/components/Auth/SignUp/First/index.js

@@ -56,7 +56,7 @@ var useHookFabric_1 = require("hooks/useHookFabric");
 var styles = __importStar(require("./SignUp.module.css"));
 var ModalContext_1 = require("context/logic/ModalContext");
 var SignUp = function (props) {
-    var classes = props.classes, bonusText = props.bonusText, bonusSubText = props.bonusSubText, _a = props.withCongratulationText, withCongratulationText = _a === void 0 ? true : _a;
+    var classes = props.classes, bonusText = props.bonusText, bonusSubText = props.bonusSubText, _a = props.withCongratulationText, withCongratulationText = _a === void 0 ? true : _a, registrationSettings = props.registrationSettings;
     var _b = (0, ModalContext_1.useHookProvider)(), useTransportControllers = _b.useTransportControllers, useCurrencies = _b.useCurrencies, useCountryInfo = _b.useCountryInfo, sendRegistrationCommand = _b.sendRegistrationCommand;
     var sendCommand = useTransportControllers().sendCommand;
     var availableCurrencies = (0, useHookFabric_1.useHookFabric)({
@@ -70,7 +70,7 @@ var SignUp = function (props) {
     var setActiveForm = (0, store_2.useZustandRegistrationKitStore)(selectors_2.zustandRegistrationKitSelector.setActiveRegistrationFormAction);
     var setModal = (0, store_1.useZustandModalKitStore)(selectors_1.zustandModalKitSelector.closeAndOpenModalAction);
     var data = (0, store_1.useZustandModalKitStore)(selectors_1.zustandModalKitSelector.getModalAdditionalInfoSelector) || {};
-    var _c = data.bonusSignUp, bonusSignUp = _c === void 0 ? false : _c, _d = data.bonusText, modalBonusText = _d === void 0 ? '' : _d, _e = data.bonusSubText, modalBonusSubText = _e === void 0 ? '' : _e, _f = data.withCongratulationText, modalWithCongratulationText = _f === void 0 ? withCongratulationText : _f, _g = data.flow, flow = _g === void 0 ? types_2.ERegistrationFlow.Socket : _g;
+    var _c = data.bonusSignUp, bonusSignUp = _c === void 0 ? false : _c, _d = data.bonusText, modalBonusText = _d === void 0 ? '' : _d, _e = data.bonusSubText, modalBonusSubText = _e === void 0 ? '' : _e, _f = data.withCongratulationText, modalWithCongratulationText = _f === void 0 ? withCongratulationText : _f, _g = data.flow, flow = _g === void 0 ? registrationSettings.flow || types_2.ERegistrationFlow.Socket : _g;
     var isCongratulation = modalWithCongratulationText;
     var customBonusText = bonusText || modalBonusText;
     var customBonusSubText = bonusSubText || modalBonusSubText;

package/dist/lib/components/Modals/Alert/components/Auth/SignUp/First/types.d.ts

@@ -1,8 +1,12 @@
+import { ERegistrationFlow } from 'zustandStore/forms/signUp/types';
 export type SignUpProps = {
     classes?: string;
     bonusText?: string;
     bonusSubText?: string;
     withCongratulationText?: boolean;
+    registrationSettings?: {
+        flow?: ERegistrationFlow;
+    };
 };
 export declare enum ERegistrationType {
     First = 0,

package/dist/lib/components/SignUpTypeTwo/PhoneBox/components/Code/index.d.ts

@@ -5,6 +5,7 @@ type Props = {
     classes?: string;
     valueClasses?: string;
     isDrop?: boolean;
+    isError?: boolean;
 };
 declare const Code: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default Code;

package/dist/lib/components/SignUpTypeTwo/PhoneBox/components/Code/index.js

@@ -39,15 +39,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var classnames_1 = __importDefault(require("classnames"));
-var ArrowSvg_1 = require("components/ui/Icons/ArrowSvg");
+var FilledArrowSvg_1 = require("components/ui/Icons/FilledArrowSvg");
 var styles = __importStar(require("./Code.module.css"));
 var Code = function (props) {
     var _a;
-    var code = props.code, isArrow = props.isArrow, flag = props.flag, classes = props.classes, valueClasses = props.valueClasses, _b = props.isDrop, isDrop = _b === void 0 ? false : _b;
+    var code = props.code, isArrow = props.isArrow, flag = props.flag, classes = props.classes, valueClasses = props.valueClasses, _b = props.isDrop, isDrop = _b === void 0 ? false : _b, _c = props.isError, isError = _c === void 0 ? false : _c;
     return ((0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)(styles.drop, (_a = {},
             _a[styles.colorfulBorder] = isDrop,
+            _a[styles.errorBorder] = isError,
             _a), classes) }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.selection }, { children: [(0, jsx_runtime_1.jsx)("div", { className: styles.flag, style: {
                         background: "url(".concat(flag, ")"),
-                    } }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.code, valueClasses) }, { children: [" ", code] })), isArrow && (0, jsx_runtime_1.jsx)(ArrowSvg_1.ArrowSvg, { classes: styles.arrowSvg })] })) })));
+                    } }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.code, valueClasses) }, { children: [" ", code] })), isArrow && (0, jsx_runtime_1.jsx)(FilledArrowSvg_1.FilledArrowSvg, { classes: styles.arrowSvg })] })) })));
 };
 exports.default = Code;

package/dist/lib/components/SignUpTypeTwo/PhoneBox/index.js

@@ -66,24 +66,25 @@ var PhoneBox = function (_a) {
             return;
         }
         var value = target.value;
-        var errorText = value.length !== validation_1.MIN_PHONE_LENGTH ? 'signUpTwo.phoneBox.errorText' : '';
-        if (!errorText) {
-            onChange("".concat(activePhoneBox.code).concat(value));
+        if (!value.length) {
+            setPhone({ value: value, errorText: 'signUpTwo.phoneBox.fillPassword' });
         }
-        else {
+        if (value.length && value.length !== validation_1.MIN_PHONE_LENGTH) {
+            setPhone({ value: value, errorText: 'signUpTwo.phoneBox.errorText' });
+        }
+        if (!value.length || value.length !== validation_1.MIN_PHONE_LENGTH) {
             onChange('');
+            return;
         }
-        setPhone({
-            value: value,
-            errorText: errorText,
-        });
+        setPhone({ value: value, errorText: '' });
+        onChange("".concat(activePhoneBox.code).concat(value));
     };
     var setNewPhoneBox = function (i) { return function () {
         setPhoneBox(i);
         setDropState(false);
         onChange('');
     }; };
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.wrapperPhoneBox }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleCode, style: { height: '100%' } }, { children: activePhoneBox && ((0, jsx_runtime_1.jsx)(Code_1.default, { code: activePhoneBox.code, isArrow: true, flag: activePhoneBox.flag, isDrop: isDrop })) })), isDrop && ((0, jsx_runtime_1.jsx)(HOCOutsideClick_1.HOCOutsideClick, __assign({ classes: styles.phoneWrapper, handleFunc: toggleCode }, { children: list.map(function (b) {
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.wrapperPhoneBox }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleCode, style: { height: '100%' } }, { children: activePhoneBox && ((0, jsx_runtime_1.jsx)(Code_1.default, { code: activePhoneBox.code, isArrow: true, flag: activePhoneBox.flag, isDrop: isDrop, isError: Boolean(phone.errorText) })) })), isDrop && ((0, jsx_runtime_1.jsx)(HOCOutsideClick_1.HOCOutsideClick, __assign({ classes: styles.phoneWrapper, handleFunc: toggleCode }, { children: list.map(function (b) {
                     var _a;
                     var code = b.code, flag = b.flag, name = b.name;
                     return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.row, (_a = {},
@@ -91,6 +92,7 @@ var PhoneBox = function (_a) {
                             _a)), onClick: setNewPhoneBox(b) }, { children: [(0, jsx_runtime_1.jsx)(Code_1.default, { code: code, flag: flag }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: name }) })] }), code));
                 }) }))), (0, jsx_runtime_1.jsx)("input", { className: (0, classnames_1.default)(styles.input, (_b = {},
                     _b[styles.colorfulBorder] = phone.value,
+                    _b[styles.errorBorder] = phone.errorText,
                     _b)), pattern: "[0-9]", type: "text", value: phone.value, onChange: setPhoneValue, placeholder: getText('signUpTwo.phoneBox.phone') }), !!phone.errorText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: styles.errorText }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: phone.errorText }) })))] })));
 };
 exports.default = PhoneBox;

package/dist/lib/components/ui/Icons/FilledArrowSvg.d.ts

@@ -0,0 +1,5 @@
+import { EAppType } from 'types/ui';
+import { IconProps } from './types';
+export declare const FilledArrowSvg: (props: IconProps & {
+    appType?: EAppType;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/ui/Icons/FilledArrowSvg.js

@@ -0,0 +1,20 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilledArrowSvg = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var FilledArrowSvg = function (props) {
+    var _a = props.width, width = _a === void 0 ? '8' : _a, _b = props.height, height = _b === void 0 ? '7' : _b, _c = props.classes, classes = _c === void 0 ? '' : _c, handleClick = props.handleClick;
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: width, height: height, viewBox: "0 0 8 7", fill: "none", xmlns: "http://www.w3.org/2000/svg", onClick: handleClick, className: classes }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M7.83594 0.958493L0.165437 0.958492L4.00069 6.04199L7.83594 0.958493Z", fill: "var(--base-0)", "fill-opacity": "0.5" }) })));
+};
+exports.FilledArrowSvg = FilledArrowSvg;

package/dist/lib/components/ui/Inputs/BaseInput/BaseInputUi.js

@@ -48,7 +48,7 @@ var Text_1 = require("components/Text");
 var styles = __importStar(require("./BaseInputUi.module.css"));
 var BaseInputUi = function (props) {
     var _a, _b, _c;
-    var startIcon = props.startIcon, value = props.value, type = props.type, placeholder = props.placeholder, handleChange = props.handleChange, children = props.children, isHidePlaceholder = props.isHidePlaceholder, inputLabelType = props.inputLabelType, errorText = props.errorText, inputStyleType = props.inputStyleType, size = props.size, classes = props.classes, inputMode = props.inputMode, disabled = props.disabled, _d = props.bottomText, bottomText = _d === void 0 ? '' : _d, _e = props.withErrorSvg, withErrorSvg = _e === void 0 ? false : _e, onFocus = props.onFocus, _f = props.withClearValue, withClearValue = _f === void 0 ? false : _f, handleClearInputValue = props.handleClearInputValue, labelClasses = props.labelClasses;
+    var startIcon = props.startIcon, value = props.value, type = props.type, placeholder = props.placeholder, handleChange = props.handleChange, children = props.children, isHidePlaceholder = props.isHidePlaceholder, inputLabelType = props.inputLabelType, errorText = props.errorText, inputStyleType = props.inputStyleType, size = props.size, classes = props.classes, inputMode = props.inputMode, disabled = props.disabled, _d = props.bottomText, bottomText = _d === void 0 ? '' : _d, _e = props.withErrorSvg, withErrorSvg = _e === void 0 ? false : _e, onFocus = props.onFocus, _f = props.withClearValue, withClearValue = _f === void 0 ? false : _f, handleClearInputValue = props.handleClearInputValue, labelClasses = props.labelClasses, inputClasses = props.inputClasses;
     var isBorderColorful = inputStyleType === 'border-colorful';
     var sizeModifier = "inputWrapperSize-".concat(size);
     var _g = (0, react_1.useState)(false), isFocused = _g[0], setFocusState = _g[1];
@@ -65,7 +65,7 @@ var BaseInputUi = function (props) {
             _a[styles.borderColorfulRed] = errorText,
             _a)) }, { children: [startIcon, (0, jsx_runtime_1.jsx)("input", { onFocus: handleFocus, onBlur: handleBlur, inputMode: inputMode, className: (0, classnames_1.default)(styles.input, (_b = {},
                     _b[styles.disabled] = disabled,
-                    _b)), value: value, type: type, placeholder: placeholder, onChange: handleChange }), value && withClearValue && !errorText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)(styles.searchButton, styles.clearButton), onClick: handleClearInputValue }, { children: (0, jsx_runtime_1.jsx)(CrossSvg_1.CrossSvg, { classes: styles.crossSvg }) }))), value && withClearValue && errorText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: styles.searchButton }, { children: (0, jsx_runtime_1.jsx)(WarningSvg_1.WarningSvg, {}) }))), children && (0, jsx_runtime_1.jsx)("div", __assign({ className: styles.rowChildrenData }, { children: children })), errorText && withErrorSvg && ((0, jsx_runtime_1.jsx)("div", __assign({ className: styles.rowChildrenData }, { children: (0, jsx_runtime_1.jsx)(inputError_svg_1.ReactComponent, {}) }))), (0, jsx_runtime_1.jsx)("label", __assign({ className: (0, classnames_1.default)(styles.label, (_c = {},
+                    _b), inputClasses), value: value, type: type, placeholder: placeholder, onChange: handleChange }), value && withClearValue && !errorText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)(styles.searchButton, styles.clearButton), onClick: handleClearInputValue }, { children: (0, jsx_runtime_1.jsx)(CrossSvg_1.CrossSvg, { classes: styles.crossSvg }) }))), value && withClearValue && errorText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: styles.searchButton }, { children: (0, jsx_runtime_1.jsx)(WarningSvg_1.WarningSvg, {}) }))), children && (0, jsx_runtime_1.jsx)("div", __assign({ className: styles.rowChildrenData }, { children: children })), errorText && withErrorSvg && ((0, jsx_runtime_1.jsx)("div", __assign({ className: styles.rowChildrenData }, { children: (0, jsx_runtime_1.jsx)(inputError_svg_1.ReactComponent, {}) }))), (0, jsx_runtime_1.jsx)("label", __assign({ className: (0, classnames_1.default)(styles.label, (_c = {},
                     _c[styles.labelRight] = startIcon,
                     _c[styles.hideLabel] = isHidePlaceholder,
                     _c[styles.labelUp] = inputLabelType === 'labelUp',

package/dist/lib/components/ui/Inputs/BaseInput/types.d.ts

@@ -25,6 +25,7 @@ type InputBase = {
     withClearValue?: boolean;
     handleClearInputValue?: () => void;
     labelClasses?: string;
+    inputClasses?: string;
 };
 export type DefaultInputType = {
     value: string;

package/dist/lib/components/ui/Inputs/PhoneInput/components/PhoneView/index.d.ts

@@ -1,5 +1,5 @@
-import { DefaultInputType } from 'components/ui/Inputs/BaseInput/types';
 import React, { ReactElement } from 'react';
+import { DefaultInputType } from 'components/ui/Inputs/BaseInput/types';
 type Props = {
     phone: DefaultInputType;
     Flag: React.FC;
@@ -11,6 +11,7 @@ type Props = {
     mask?: string;
     placeholder: string;
     classes?: string;
+    name?: string;
 };
 declare const PhoneView: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default PhoneView;

package/dist/lib/components/ui/Inputs/PhoneInput/components/PhoneView/index.js

@@ -41,16 +41,21 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var classnames_1 = __importDefault(require("classnames"));
 var ArrowButton_1 = require("components/ui/Buttons/ArrowButton");
 var BaseInputUi_1 = require("components/ui/Inputs/BaseInput/BaseInputUi");
+var Text_1 = require("components/Text");
 var validation_1 = require("service/validation");
 var styles = __importStar(require("./PhoneView.module.css"));
 var PhoneView = function (props) {
-    var _a, _b;
-    var phone = props.phone, Flag = props.Flag, children = props.children, toggleValue = props.toggleValue, isOpened = props.isOpened, mask = props.mask, code = props.code, handleSetValue = props.handleSetValue, classes = props.classes, placeholder = props.placeholder;
+    var _a, _b, _c;
+    var phone = props.phone, Flag = props.Flag, children = props.children, toggleValue = props.toggleValue, isOpened = props.isOpened, mask = props.mask, code = props.code, handleSetValue = props.handleSetValue, classes = props.classes, placeholder = props.placeholder, name = props.name;
     var value = phone.value, errorText = phone.errorText;
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.row, classes, (_a = {},
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.row, (_a = {},
             _a[styles.opened] = isOpened,
-            _a)) }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: styles.code }, { children: (0, jsx_runtime_1.jsx)(Flag, {}) })), (0, jsx_runtime_1.jsx)(BaseInputUi_1.BaseInputUi, __assign({ size: "full", placeholder: placeholder, value: value, baseValue: code, defaultValue: code, handleChange: handleSetValue, patternFn: (0, validation_1.replaceValueByMask)(mask), classes: (0, classnames_1.default)(styles.input, (_b = {},
-                    _b[styles.errorBorder] = errorText,
-                    _b)) }, { children: children })), (0, jsx_runtime_1.jsx)("div", __assign({ className: styles.arrow }, { children: toggleValue && ((0, jsx_runtime_1.jsx)(ArrowButton_1.ArrowButton, { isOpened: isOpened, toggleState: toggleValue })) }))] })));
+            _a[styles.borderColorfulRed] = errorText,
+            _a[styles.mainInput] = toggleValue,
+            _a), classes) }, { children: [toggleValue && ((0, jsx_runtime_1.jsx)("div", __assign({ className: styles.phoneText }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: "registrations.inputs.phone" }) }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.content }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)(styles.codeWrapper, (_b = {},
+                            _b[styles.column] = toggleValue,
+                            _b)) }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.code }, { children: [(0, jsx_runtime_1.jsx)(Flag, {}), toggleValue && ((0, jsx_runtime_1.jsx)("div", __assign({ className: styles.arrow }, { children: (0, jsx_runtime_1.jsx)(ArrowButton_1.ArrowButton, { toggleState: toggleValue }) })))] })) })), name && (0, jsx_runtime_1.jsx)("div", __assign({ className: styles.name }, { children: name })), (0, jsx_runtime_1.jsx)(BaseInputUi_1.BaseInputUi, __assign({ size: "full", placeholder: "", value: value, baseValue: code, defaultValue: code, handleChange: handleSetValue, patternFn: (0, validation_1.replaceValueByMask)(mask), classes: (0, classnames_1.default)(styles.input, (_c = {},
+                            _c[styles.errorBorder] = errorText,
+                            _c)), inputClasses: styles.inputText }, { children: children }))] }))] })));
 };
 exports.default = PhoneView;

package/dist/lib/components/ui/Inputs/PhoneInput/index.js

@@ -155,9 +155,9 @@ var PhoneInput = function (props) {
         onChange('');
     }, [phone, onChange]);
     var Flag = (countryPhoneSettings || {}).Flag;
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.wrapper, classesWrapper) }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.list }, { children: [(0, jsx_runtime_1.jsx)(PhoneView_1.default, __assign({ placeholder: (countryPhoneSettings === null || countryPhoneSettings === void 0 ? void 0 : countryPhoneSettings.name) || '', phone: phone, Flag: Flag || WorldSvg_1.WorldSvg, code: (countryPhoneSettings === null || countryPhoneSettings === void 0 ? void 0 : countryPhoneSettings.code) || '+', handleSetValue: handleSetValue, toggleValue: toggleValue, isOpened: isOpened, mask: countryPhoneSettings === null || countryPhoneSettings === void 0 ? void 0 : countryPhoneSettings.mask }, { children: children })), isOpened && ((0, jsx_runtime_1.jsx)("div", __assign({ className: styles.items }, { children: Object.values(constants_1.PHONE_MASK).map(function (p) {
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.wrapper, classesWrapper) }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.list }, { children: [(0, jsx_runtime_1.jsx)(PhoneView_1.default, __assign({ placeholder: (countryPhoneSettings === null || countryPhoneSettings === void 0 ? void 0 : countryPhoneSettings.name) || '', phone: phone, Flag: Flag || WorldSvg_1.WorldSvg, code: (countryPhoneSettings === null || countryPhoneSettings === void 0 ? void 0 : countryPhoneSettings.code) || '+', handleSetValue: handleSetValue, toggleValue: toggleValue, isOpened: isOpened, mask: countryPhoneSettings === null || countryPhoneSettings === void 0 ? void 0 : countryPhoneSettings.mask, classes: styles.disabledBorder }, { children: children })), isOpened && ((0, jsx_runtime_1.jsx)("div", __assign({ className: styles.items }, { children: Object.values(constants_1.PHONE_MASK).map(function (p) {
                             var CountryFlag = p.Flag;
-                            return ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: handleChooseSettings(p) }, { children: (0, jsx_runtime_1.jsx)(PhoneView_1.default, { placeholder: "", phone: { value: p.code, errorText: '' }, Flag: CountryFlag, code: p.code, handleSetValue: console.info, mask: p.mask, classes: styles.disabledBorder }) }), p.code));
+                            return ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: handleChooseSettings(p), className: styles.item }, { children: (0, jsx_runtime_1.jsx)(PhoneView_1.default, { placeholder: "", phone: { value: p.code, errorText: '' }, Flag: CountryFlag, code: p.code, handleSetValue: console.info, mask: p.mask, name: p.name, classes: styles.disabledBorder }) }), p.code));
                         }) })))] })), phone.errorText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: styles.error }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: phone.errorText }) }))), withConfirm && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isRequestedCode ? ((0, jsx_runtime_1.jsx)(Timer_1.default, { handleRequestCode: handleRequestCode })) : ((0, jsx_runtime_1.jsx)(BaseButton_1.BaseButton, { text: "getCodeBtn", disabled: !isValidPhone, color: "primary", handleClick: showTimer, size: "--button-full", centreText: true, buttonHeight: "--button-height-full", classes: buttonClasses })) }))] })));
 };
 exports.PhoneInput = PhoneInput;

package/dist/lib/zustandStore/forms/signUp/types.d.ts

@@ -27,7 +27,8 @@ export declare enum ERegistrationForm {
 }
 export declare enum ERegistrationFlow {
     Socket = 0,
-    Rest = 1
+    Rest = 1,
+    Redirect = 2
 }
 export type Currency = {
     code: number;

package/dist/lib/zustandStore/forms/signUp/types.js

@@ -12,6 +12,7 @@ var ERegistrationFlow;
 (function (ERegistrationFlow) {
     ERegistrationFlow[ERegistrationFlow["Socket"] = 0] = "Socket";
     ERegistrationFlow[ERegistrationFlow["Rest"] = 1] = "Rest";
+    ERegistrationFlow[ERegistrationFlow["Redirect"] = 2] = "Redirect";
 })(ERegistrationFlow = exports.ERegistrationFlow || (exports.ERegistrationFlow = {}));
 var ESignUpTheme;
 (function (ESignUpTheme) {

package/dist/main.css

@@ -1442,7 +1442,7 @@
 
 .KIT__PhoneInput-module__error___mgsEO {
   position: absolute;
-  top: 40px;
+  top: 100%;
   max-width: 100%;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -1480,74 +1480,122 @@
 
 .KIT__PhoneInput-module__list___GgLkp .KIT__PhoneInput-module__items___UoSJS {
     position: absolute;
-    top: 100%;
+    top: calc(100% + var(--indent-xs));
     width: 100%;
     left: 0;
     border: var(--input-border);
     background-color: var(--input-background);
     z-index: 3;
-    border-radius: 0 0 10px 10px;
+    border-radius: var(--border-s);
+    overflow: hidden;
   }
 
-.KIT__PhoneInput-module__list___GgLkp .KIT__PhoneInput-module__items___UoSJS .KIT__PhoneInput-module__disabledBorder___UYdKe * {
-        border: none;
-        background: #1F222F;
-        border-radius: 0;
-      }
+.KIT__PhoneInput-module__list___GgLkp .KIT__PhoneInput-module__items___UoSJS .KIT__PhoneInput-module__disabledBorder___UYdKe {
+      border: none;
+      background: #1f222f;
+      border-radius: 0;
+    }
+
+.KIT__PhoneInput-module__list___GgLkp .KIT__PhoneInput-module__items___UoSJS .KIT__PhoneInput-module__disabledBorder___UYdKe:active {
+      background: var(--base-700);
+    }
+
+.KIT__PhoneInput-module__list___GgLkp .KIT__PhoneInput-module__items___UoSJS .KIT__PhoneInput-module__disabledBorder___UYdKe:hover {
+      background: var(--base-700);
+    }
+
 .KIT__PhoneView-module__row___EVJyb {
   display: flex;
+  background-color: var(--input-background);
+  border-radius: var(--border-s);
+  border: 2px solid transparent;
+  border: 2px solid var(--base-700, transparent);
 }
 
-.KIT__PhoneView-module__row___EVJyb .KIT__PhoneView-module__code___y3pYW {
-    border-radius: 10px 0 0 10px;
-    display: flex;
-    align-items: center;
-    flex-wrap: nowrap;
-    border: 2px solid transparent;
-    border: 2px solid var(--base-700, transparent);
-    border-right: 0;
-    padding-left: var(--indent-s);
-    padding-right: var(--indent-xs);
-    background-color: var(--input-background);
+.KIT__PhoneView-module__codeWrapper___pUMRn {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  padding-left: var(--indent-s);
+}
 
-  }
+.KIT__PhoneView-module__column___bl_cw {
+  flex-direction: column;
+}
 
-.KIT__PhoneView-module__row___EVJyb .KIT__PhoneView-module__arrow___Qw7Mg {
-    border-radius: 0 10px 10px 0;
-    display: flex;
-    width: 45px;
-    border: 2px solid transparent;
-    border: 2px solid var(--base-700, transparent);
-    border-left: 0;
-    align-items: center;
-    justify-content: center;
+.KIT__PhoneView-module__mainInput___qB1oB {
+  height: 50px;
+  flex-direction: column;
+}
 
-    background-color: var(--input-background);
-  }
+.KIT__PhoneView-module__content___Dnmvr {
+  display: flex;
+  align-items: center;
+}
 
-.KIT__PhoneView-module__row___EVJyb .KIT__PhoneView-module__arrow___Qw7Mg svg {
-      transform: rotate(180deg);
-      width: 15px;
-      height: 10px;
-    }
+.KIT__PhoneView-module__phoneText___rHzpz {
+  font-size: var(--font-size-xs);
+  font-weight: 500;
+  color: var(--base-400);
+  padding-left: var(--indent-s);
+}
 
-.KIT__PhoneView-module__row___EVJyb.KIT__PhoneView-module__opened___cbAQs * {
-      border-bottom: 0;
-    }
+.KIT__PhoneView-module__code___y3pYW {
+  display: flex;
+}
 
-.KIT__PhoneView-module__row___EVJyb.KIT__PhoneView-module__opened___cbAQs .KIT__PhoneView-module__arrow___Qw7Mg {
-      border-radius: 0 10px 0 0;
-    }
+.KIT__PhoneView-module__arrow___Qw7Mg {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  cursor: pointer;
+}
 
-.KIT__PhoneView-module__row___EVJyb.KIT__PhoneView-module__opened___cbAQs .KIT__PhoneView-module__code___y3pYW {
-      border-radius: 10px 0 0 0;
-    }
+.KIT__PhoneView-module__arrow___Qw7Mg svg {
+    transition: all 0.5s;
+    transform: rotate(180deg);
+  }
+
+.KIT__PhoneView-module__opened___cbAQs .KIT__PhoneView-module__arrow___Qw7Mg svg {
+    transform: none;
+    transform: initial;
+  }
 
 .KIT__PhoneView-module__input___gRvqf {
-  border-right: 0;
-  border-left: 0;
-  border-radius: 0;
+  padding: 0;
+  padding-left: var(--indent-s);
+  border: none;
+  background: transparent;
+}
+
+.KIT__PhoneView-module__mainInput___qB1oB .KIT__PhoneView-module__input___gRvqf {
+  height: auto;
+}
+
+.KIT__PhoneView-module__inputText___MRtU0 {
+  font-weight: 400;
+  padding: 0;
+}
+
+.KIT__PhoneView-module__name___glkXr {
+  color: var(--base-0);
+  font-size: var(--font-size-s);
+      display: flex;
+    align-items: center;
+   padding-left: var(--indent-s);
 }
+
+.KIT__PhoneView-module__borderColorfulRed___j2jR2 {
+  border: 1px solid var(--input-border-red);
+  border-radius: var(--input-border-radius);
+}
+
+.KIT__PhoneView-module__borderColorfulRed___j2jR2 .KIT__PhoneView-module__codeWrapper___pUMRn,
+.KIT__PhoneView-module__borderColorfulRed___j2jR2 .KIT__PhoneView-module__input___gRvqf {
+  border: none;
+}
+
 .KIT__Code-module__drop____Xnq2 {
   height: 100%;
   border-radius: var(--radius-1);
@@ -1585,8 +1633,8 @@
   margin-right: var(--indent-m);
 }
 
-.KIT__Code-module__arrowSvg___ULGJ2 {
-  transform: rotate(180deg);
+.KIT__Code-module__drop____Xnq2.KIT__Code-module__errorBorder___MtET4 {
+  border-color: var(--input-error-border-color);
 }
 
 .KIT__PhoneBox-module__wrapperPhoneBox___alsb0 {
@@ -1652,6 +1700,10 @@
   border-color: var(--input-filled-border-color);
 }
 
+.KIT__PhoneBox-module__input___cViDI.KIT__PhoneBox-module__errorBorder___dpINa {
+  border-color: var(--input-error-border-color);
+}
+
 .KIT__PhoneBox-module__input___cViDI::-moz-placeholder {
   color: rgba(255, 255, 255, 0.5);
 }
@@ -1831,6 +1883,7 @@
   --input-default-border-color: rgba(255, 255, 255, 0.1);
   --input-filled-border-color: rgba(255, 255, 255, 0.3);
   --input-focus-border-color: rgba(255, 255, 255, 0.3);
+  --input-error-border-color: var(--red-1000);
   --phone-box-background: rgba(255, 255, 255, 0.1);
   --submit-button-background: rgb(246, 169, 19);
   --tab-border-bottom: 2px solid rgba(252, 216, 32, 0.2);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-gldn-kit",
-  "version": "0.1.60",
+  "version": "0.1.62",
   "description": "",
   "main": "./dist/index.js",
   "keywords": [],