react-gldn-kit 0.1.49 → 0.1.50

package/dist/lib/components/Modals/Alert/components/Auth/SignUpTypeTwo/index.js

@@ -98,6 +98,7 @@ var utils_1 = require("zustandStore/forms/signUp/utils");
 var validation_1 = require("service/validation");
 var ModalContext_1 = require("context/logic/ModalContext");
 var styles = __importStar(require("./SignUpTypeTwo.module.css"));
+var SocialButtons_1 = require("components/SocialButtons");
 var SignUpTypeTwo = function () {
     var _a, _b, _c;
     var useTransportControllers = (0, ModalContext_1.useHookProvider)().useTransportControllers;
@@ -117,7 +118,7 @@ var SignUpTypeTwo = function () {
     var _h = (0, react_1.useState)(constant_1.DEFAULT_INPUT_VALUE), email = _h[0], setEmail = _h[1];
     var titleRef = (0, react_1.useRef)(null);
     var _j = (0, react_1.useState)(0), titleHeight = _j[0], setTitleHeight = _j[1];
-    var _k = data.registrationTitle, registrationTitle = _k === void 0 ? 'signUpTwo.won' : _k, _l = data.bonusImagePath, bonusImagePath = _l === void 0 ? '' : _l, _m = data.registrationTheme, registrationTheme = _m === void 0 ? types_4.ESignUpTheme.Brown : _m, _o = data.buttonText, buttonText = _o === void 0 ? 'signUpTwo.joinNow' : _o;
+    var _k = data.registrationTitle, registrationTitle = _k === void 0 ? 'signUpTwo.won' : _k, _l = data.bonusImagePath, bonusImagePath = _l === void 0 ? '' : _l, _m = data.registrationTheme, registrationTheme = _m === void 0 ? types_4.ESignUpTheme.Brown : _m, _o = data.buttonText, buttonText = _o === void 0 ? 'signUpTwo.joinNow' : _o, _p = data.social, social = _p === void 0 ? [] : _p;
     var openSignIn = function () {
         setModal(types_2.EModalTypes.SignIn);
     };
@@ -222,9 +223,11 @@ var SignUpTypeTwo = function () {
             _a[styles.yellow] = registrationTheme === types_4.ESignUpTheme.Yellow,
             _a[styles.darkBrown] = registrationTheme === types_4.ESignUpTheme.DarkBrown,
             _a[styles.gray] = registrationTheme === types_4.ESignUpTheme.Gray,
+            _a[styles.pink] = registrationTheme === types_4.ESignUpTheme.Pink,
+            _a[styles.silver] = registrationTheme === types_4.ESignUpTheme.Silver,
             _a)) }, { children: [registrationTitle && ((0, jsx_runtime_1.jsx)("div", __assign({ className: styles.title, ref: titleRef }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: registrationTitle }) }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.contentArea, style: {
                     height: "calc(100% - ".concat(titleHeight, "px)"),
-                } }, { children: [isSelectedError && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.warning }, { children: [(0, jsx_runtime_1.jsx)(WarningSvg_1.WarningSvg, {}), (0, jsx_runtime_1.jsx)("div", __assign({ className: styles.warningText }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: "signUpTwo.notConfirm" }) }))] }))), bonusImagePath && ((0, jsx_runtime_1.jsx)("img", { src: bonusImagePath, className: (0, classnames_1.default)(styles.bonusImage, 'KIT_SignUpTypeTwo_wrapperSignUp_bonusImage') })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.content }, { children: [activeForm !== null && tabs.length !== 1 && ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs, { activeValue: activeForm, data: tabs, onChange: setActiveForm, classes: styles.tabs, type: "underline", tabClasses: styles.tab, activeTabClasses: styles.activeTab, indicatorClasses: styles.indicator })), (0, jsx_runtime_1.jsxs)("div", { children: [activeForm === types_3.ERegistrationForm.PhoneWithoutCode ? ((0, jsx_runtime_1.jsx)(PhoneBox_1.default, { onChange: setPhone })) : ((0, jsx_runtime_1.jsx)(InputBox_1.default, { leftImg: "/landings/assets-builder/signUpTwo/email.svg", rightImg: "", setInput: setEmail, validation: validation_1.validateEmailValue, input: email, label: "signUpTwo.tabEmail", classes: styles.emailInput })), (0, jsx_runtime_1.jsx)(PasswordBox_1.default, { onChange: setPassword }), (0, jsx_runtime_1.jsx)(CurrencyBox_1.default, {}), (0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)(styles.submitButton, (_b = {},
+                } }, { children: [isSelectedError && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.warning }, { children: [(0, jsx_runtime_1.jsx)(WarningSvg_1.WarningSvg, {}), (0, jsx_runtime_1.jsx)("div", __assign({ className: styles.warningText }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: "signUpTwo.notConfirm" }) }))] }))), bonusImagePath && ((0, jsx_runtime_1.jsx)("img", { src: bonusImagePath, className: (0, classnames_1.default)(styles.bonusImage, 'KIT_SignUpTypeTwo_wrapperSignUp_bonusImage') })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.content }, { children: [Boolean(social.length) && (0, jsx_runtime_1.jsx)(SocialButtons_1.SocialButtons, { social: social }), activeForm !== null && tabs.length !== 1 && ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs, { activeValue: activeForm, data: tabs, onChange: setActiveForm, classes: styles.tabs, type: "underline", tabClasses: styles.tab, activeTabClasses: styles.activeTab, indicatorClasses: styles.indicator })), (0, jsx_runtime_1.jsxs)("div", { children: [activeForm === types_3.ERegistrationForm.PhoneWithoutCode ? ((0, jsx_runtime_1.jsx)(PhoneBox_1.default, { onChange: setPhone })) : ((0, jsx_runtime_1.jsx)(InputBox_1.default, { leftImg: "/landings/assets-builder/signUpTwo/email.svg", rightImg: "", setInput: setEmail, validation: validation_1.validateEmailValue, input: email, label: "signUpTwo.tabEmail", classes: styles.emailInput })), (0, jsx_runtime_1.jsx)(PasswordBox_1.default, { onChange: setPassword }), (0, jsx_runtime_1.jsx)(CurrencyBox_1.default, {}), (0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)(styles.submitButton, (_b = {},
                                             _b[styles.disable] = !mainField.value ||
                                                 mainField.errorText ||
                                                 !password ||

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

@@ -4,5 +4,12 @@ export declare enum ESignUpTheme {
     Yellow = "yellow",
     Green = "green",
     DarkBrown = "dark-brown",
-    Gray = "gray"
+    Gray = "gray",
+    Pink = "pink",
+    Silver = "silver"
+}
+export declare enum ERegistrationSocial {
+    Unknown = "Unknown",
+    Telegram = "Telegram",
+    Google = "Google"
 }

package/dist/lib/components/Modals/Alert/components/Auth/SignUpTypeTwo/types.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ESignUpTheme = void 0;
+exports.ERegistrationSocial = exports.ESignUpTheme = void 0;
 var ESignUpTheme;
 (function (ESignUpTheme) {
     ESignUpTheme["Purple"] = "purple";
@@ -9,4 +9,12 @@ var ESignUpTheme;
     ESignUpTheme["Green"] = "green";
     ESignUpTheme["DarkBrown"] = "dark-brown";
     ESignUpTheme["Gray"] = "gray";
+    ESignUpTheme["Pink"] = "pink";
+    ESignUpTheme["Silver"] = "silver";
 })(ESignUpTheme = exports.ESignUpTheme || (exports.ESignUpTheme = {}));
+var ERegistrationSocial;
+(function (ERegistrationSocial) {
+    ERegistrationSocial["Unknown"] = "Unknown";
+    ERegistrationSocial["Telegram"] = "Telegram";
+    ERegistrationSocial["Google"] = "Google";
+})(ERegistrationSocial = exports.ERegistrationSocial || (exports.ERegistrationSocial = {}));

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

@@ -77,7 +77,7 @@ var CurrencyBox = function () {
         }
         setInputData(data);
     }, [currencyId]);
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ onClick: handleOpenList, className: styles.wrapperSelector }, { children: [inputData && ((0, jsx_runtime_1.jsx)(InputBox_1.default, { leftImg: inputData.currencyIcon, rightImg: "/landings/assets-builder/signUpTwo/arrow-down.svg", setInput: console.info, input: { value: getText(inputData.input), errorText: '' }, disabled: true, label: "signUpTwo.currency", classes: styles.input })), isOpen && ((0, jsx_runtime_1.jsx)(HOCOutsideClick_1.HOCOutsideClick, __assign({ classes: styles.wrapperItems, handleFunc: handleOpenList }, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: constants_1.INPUT_DATA.map(function (i) {
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ onClick: handleOpenList, className: styles.wrapperSelector }, { children: [inputData && ((0, jsx_runtime_1.jsx)(InputBox_1.default, { leftImg: inputData.currencyIcon, rightImg: "/landings/assets-builder/signUpTwo/arrow-down.svg", setInput: console.info, input: { value: getText(inputData.input), errorText: '' }, disabled: true, label: "signUpTwo.currency" })), isOpen && ((0, jsx_runtime_1.jsx)(HOCOutsideClick_1.HOCOutsideClick, __assign({ classes: styles.wrapperItems, handleFunc: handleOpenList }, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: constants_1.INPUT_DATA.map(function (i) {
                         var id = i.id, currencyIcon = i.currencyIcon, input = i.input;
                         return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.item, onClick: handleChangeInput(i) }, { children: [(0, jsx_runtime_1.jsx)("img", { src: currencyIcon }), (0, jsx_runtime_1.jsx)("div", __assign({ className: styles.name }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: input }) }))] }), id));
                     }) }) })))] })));

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

@@ -56,6 +56,7 @@ var InputBox = function (props) {
     };
     return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.wrapperPasswordBox, (_a = {},
             _a[styles.error] = input.errorText,
+            _a[styles.colorfulBorder] = input.value,
             _a), classes) }, { children: [leftImg && (0, jsx_runtime_1.jsx)("img", { src: leftImg, className: styles.key }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.inputWrapper }, { children: [(0, jsx_runtime_1.jsx)("input", { value: input.value, disabled: disabled, type: type, onChange: onChangeField }), (0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)(styles.label, (_b = {}, _b[styles.up] = Boolean(input.value), _b)) }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: label }) }))] })), Boolean(input.errorText) && ((0, jsx_runtime_1.jsx)("div", __assign({ className: styles.errorText }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: input.errorText }) }))), rightImg && ((0, jsx_runtime_1.jsx)("img", { src: rightImg, className: styles.eye, onClick: handleRight }))] })));
 };
 exports.default = InputBox;

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

@@ -1,27 +1,4 @@
 "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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -31,7 +8,6 @@ var react_1 = require("react");
 var InputBox_1 = __importDefault(require("../InputBox"));
 var constant_1 = require("components/ui/Inputs/BaseInput/constant");
 var validation_1 = require("service/validation");
-var styles = __importStar(require("./PasswordBox.module.css"));
 var PasswordBox = function (_a) {
     var onChange = _a.onChange;
     var _b = (0, react_1.useState)(constant_1.DEFAULT_INPUT_VALUE), psw = _b[0], setPsw = _b[1];
@@ -61,6 +37,6 @@ var PasswordBox = function (_a) {
         }
         onChange('');
     };
-    return ((0, jsx_runtime_1.jsx)(InputBox_1.default, { leftImg: "/landings/assets-builder/signUpTwo/key.svg", rightImg: "/landings/assets-builder/signUpTwo/eye".concat(type === 'password' ? '-closed' : '', ".svg"), setInput: handleChangePsw, input: psw, handleRight: toggleType, label: "signUpTwo.password", type: type, classes: styles.passwordInput }));
+    return ((0, jsx_runtime_1.jsx)(InputBox_1.default, { leftImg: "/landings/assets-builder/signUpTwo/key.svg", rightImg: "/landings/assets-builder/signUpTwo/eye".concat(type === 'password' ? '-closed' : '', ".svg"), setInput: handleChangePsw, input: psw, handleRight: toggleType, label: "signUpTwo.password", type: type }));
 };
 exports.default = PasswordBox;

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

@@ -4,6 +4,7 @@ type Props = {
     flag: string;
     classes?: string;
     valueClasses?: string;
+    isDrop?: 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

@@ -42,8 +42,11 @@ var classnames_1 = __importDefault(require("classnames"));
 var ArrowSvg_1 = require("components/ui/Icons/ArrowSvg");
 var styles = __importStar(require("./Code.module.css"));
 var Code = function (props) {
-    var code = props.code, isArrow = props.isArrow, flag = props.flag, classes = props.classes, valueClasses = props.valueClasses;
-    return ((0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)(styles.drop, classes) }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.selection }, { children: [(0, jsx_runtime_1.jsx)("div", { className: styles.flag, style: {
+    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;
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)(styles.drop, (_a = {},
+            _a[styles.colorfulBorder] = isDrop,
+            _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 })] })) })));
 };

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

@@ -49,11 +49,12 @@ var usePhoneBox_1 = require("hooks/usePhoneBox");
 var useTranslate_1 = require("hooks/useTranslate");
 var styles = __importStar(require("./PhoneBox.module.css"));
 var PhoneBox = function (_a) {
+    var _b;
     var onChange = _a.onChange;
     var getText = (0, useTranslate_1.useTranslate)('', '').getText;
-    var _b = (0, usePhoneBox_1.usePhoneBox)(), activePhoneBox = _b[0], setPhoneBox = _b[1], list = _b[2];
-    var _c = (0, react_1.useState)(false), isDrop = _c[0], setDropState = _c[1];
-    var _d = (0, react_1.useState)(constant_1.DEFAULT_INPUT_VALUE), phone = _d[0], setPhone = _d[1];
+    var _c = (0, usePhoneBox_1.usePhoneBox)(), activePhoneBox = _c[0], setPhoneBox = _c[1], list = _c[2];
+    var _d = (0, react_1.useState)(false), isDrop = _d[0], setDropState = _d[1];
+    var _e = (0, react_1.useState)(constant_1.DEFAULT_INPUT_VALUE), phone = _e[0], setPhone = _e[1];
     var toggleCode = function (e) {
         e.stopPropagation();
         e.preventDefault();
@@ -65,9 +66,7 @@ var PhoneBox = function (_a) {
             return;
         }
         var value = target.value;
-        var errorText = value.length !== validation_1.MIN_PHONE_LENGTH
-            ? 'signUpTwo.phoneBox.errorText'
-            : '';
+        var errorText = value.length !== validation_1.MIN_PHONE_LENGTH ? 'signUpTwo.phoneBox.errorText' : '';
         if (!errorText) {
             onChange("".concat(activePhoneBox.code).concat(value));
         }
@@ -84,12 +83,14 @@ var PhoneBox = function (_a) {
         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 && ((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 })) })), 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 = {},
                             _a[styles.active] = b === activePhoneBox,
                             _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: styles.input, 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 }) })))] })));
+                }) }))), (0, jsx_runtime_1.jsx)("input", { className: (0, classnames_1.default)(styles.input, (_b = {},
+                    _b[styles.colorfulBorder] = phone.value,
+                    _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/SocialButtons/index.d.ts

@@ -0,0 +1,4 @@
+import { ERegistrationSocial } from 'components/Modals/Alert/components/Auth/SignUpTypeTwo/types';
+export declare const SocialButtons: ({ social, }: {
+    social: (keyof typeof ERegistrationSocial)[];
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/SocialButtons/index.js

@@ -0,0 +1,50 @@
+"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);
+};
+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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SocialButtons = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var SocialButton_1 = require("components/ui/Buttons/SocialButton");
+var Text_1 = require("components/Text");
+var socialButtons_1 = require("constants/socialButtons");
+var styles = __importStar(require("./SocialButtons.module.css"));
+var SocialButtons = function (_a) {
+    var social = _a.social;
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.wrapperSocialButtons }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: styles.socialButtons }, { children: social.map(function (socialKey, idx) {
+                    var _a = socialButtons_1.SOCIAL_BUTTONS[socialKey], title = _a.title, Icon = _a.Icon;
+                    return ((0, jsx_runtime_1.jsx)(SocialButton_1.SocialButton, { title: title, Icon: Icon, handleClick: console.info }, idx));
+                }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.row }, { children: [(0, jsx_runtime_1.jsx)("div", { className: styles.line }), (0, jsx_runtime_1.jsx)("div", __assign({ className: styles.or }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: "socialTabs.or" }) })), (0, jsx_runtime_1.jsx)("div", { className: styles.line })] }))] })));
+};
+exports.SocialButtons = SocialButtons;

package/dist/lib/components/ui/Buttons/SocialButton/index.d.ts

@@ -0,0 +1,2 @@
+import { SocialButtonProps } from './types';
+export declare const SocialButton: (props: SocialButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/ui/Buttons/SocialButton/index.js

@@ -0,0 +1,45 @@
+"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);
+};
+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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SocialButton = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Text_1 = require("components/Text");
+var styles = __importStar(require("./SocialButton.module.css"));
+var SocialButton = function (props) {
+    var title = props.title, Icon = props.Icon, handleClick = props.handleClick;
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.wrapperSocialButton, onClick: handleClick }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: styles.iconBox }, { children: Icon })), (0, jsx_runtime_1.jsx)("div", __assign({ className: styles.title }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: title }) }))] })));
+};
+exports.SocialButton = SocialButton;

package/dist/lib/components/ui/Buttons/SocialButton/types.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export type SocialButtonProps = {
+    title: string;
+    Icon: React.ReactElement;
+    handleClick: () => void;
+};

package/dist/lib/components/ui/Buttons/SocialButton/types.js

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

package/dist/lib/constants/socialButtons.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ERegistrationSocial } from 'components/Modals/Alert/components/Auth/SignUpTypeTwo/types';
+export declare const SOCIAL_BUTTONS: {
+    [key in ERegistrationSocial]: {
+        title: string;
+        Icon: JSX.Element;
+    };
+};

package/dist/lib/constants/socialButtons.js

@@ -0,0 +1,22 @@
+"use strict";
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SOCIAL_BUTTONS = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var types_1 = require("components/Modals/Alert/components/Auth/SignUpTypeTwo/types");
+var GoogleSvg_1 = require("components/ui/Icons/Base/GoogleSvg");
+var TelegramSvg_1 = require("components/ui/Icons/SocialMedia/TelegramSvg");
+exports.SOCIAL_BUTTONS = (_a = {},
+    _a[types_1.ERegistrationSocial.Unknown] = {
+        title: '',
+        Icon: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
+    },
+    _a[types_1.ERegistrationSocial.Telegram] = {
+        title: 'socialTabs.Telegram',
+        Icon: (0, jsx_runtime_1.jsx)(TelegramSvg_1.TelegramSvg, { width: "28", height: "28" }),
+    },
+    _a[types_1.ERegistrationSocial.Google] = {
+        title: 'socialTabs.Google',
+        Icon: (0, jsx_runtime_1.jsx)(GoogleSvg_1.GoogleSvg, { width: "28", height: "29" }),
+    },
+    _a);

package/dist/main.css

@@ -1450,6 +1450,10 @@
   border-radius: var(--border-xs);
 }
 
+.KIT__Code-module__drop____Xnq2.KIT__Code-module__colorfulBorder___ThrJY {
+  border-color: var(--input-focus-border-color);
+}
+
 .KIT__Code-module__selection___XSk3l {
   height: 100%;
   align-items: center;
@@ -1519,7 +1523,7 @@
 .KIT__PhoneBox-module__input___cViDI {
   height: 100%;
   background: var(--phone-box-background);
-  border: 1px solid var(--phone-box-border-color);
+  border: 1px solid var(--input-default-border-color);
   color: var(--base-0);
   font-size: var(--font-size-m);
   font-weight: 400;
@@ -1530,8 +1534,13 @@
 
 .KIT__PhoneBox-module__input___cViDI:focus {
     background: rgba(255, 255, 255, 0.1);
+    border-color: var(--input-focus-border-color);
   }
 
+.KIT__PhoneBox-module__input___cViDI.KIT__PhoneBox-module__colorfulBorder___gnfjW {
+  border-color: var(--input-filled-border-color);
+}
+
 .KIT__PhoneBox-module__input___cViDI::-moz-placeholder {
   color: rgba(255, 255, 255, 0.5);
 }
@@ -1556,11 +1565,19 @@
   align-items: center;
   justify-content: space-between;
   padding: 0 var(--indent-m);
-  border: 1px solid rgba(255, 255, 255, 0.141);
+  border: 1px solid var(--input-default-border-color);
   border-radius: var(--border-xs);
   position: relative;
+}
+
+.KIT__InputBox-module__wrapperPasswordBox___AyUW_:has(input:focus) {
+  border-color: var(--input-focus-border-color);
+}
 
+.KIT__InputBox-module__wrapperPasswordBox___AyUW_.KIT__InputBox-module__colorfulBorder___mIlPa {
+  border-color: var(--input-filled-border-color);
 }
+
 .KIT__InputBox-module__key___MnZDq {
   padding-right: var(--indent-m);
   width: 24px;
@@ -1580,8 +1597,8 @@
   display: flex;
   height: inherit;
   position: relative;
-
 }
+
 .KIT__InputBox-module__inputWrapper___sTOJU input {
   width: 100%;
   line-height: 24px;
@@ -1592,6 +1609,7 @@
   border: none;
   border-radius: 0;
 }
+
 .KIT__InputBox-module__inputWrapper___sTOJU input:focus ~ .KIT__InputBox-module__label___EFq1u {
     max-width: 133%;
     transform: translateY(-40%) scale(0.75);
@@ -1643,10 +1661,6 @@
   left: 0;
 }
 
-.KIT__PasswordBox-module__passwordInput____X2Sj {
-  border: 1px solid var(--password-box-border-color);
-}
-
 .KIT__CurrencyBox-module__wrapperSelector___JATKR {
   position: relative;
   border-radius: var(--border-xs);
@@ -1677,10 +1691,6 @@
   background: var(--track-background);
 }
 
-.KIT__CurrencyBox-module__input___UN8Sd {
-  border-color: var(--currency-box-border-color);
-}
-
 .KIT__CurrencyBox-module__item___aofYd {
   display: flex;
   align-items: center;
@@ -1707,10 +1717,9 @@
   --active-tab-color: var(--base-0);
   --submit-button-color: var(--base-1000);
   --submit-button-font-size: var(--font-size-m);
-  --currency-box-border-color: rgba(255, 255, 255, 0.1);
-  --password-box-border-color: rgba(255, 255, 255, 0.1);
-  --email-box-border-color: rgba(255, 255, 255, 0.1);
-  --phone-box-border-color: rgba(255, 255, 255, 0.1);
+  --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);
   --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);
@@ -1764,7 +1773,6 @@
      border-image: linear-gradient(181.3deg, #b1ff53 -1.04%, #286509 93.8%) 1;
   --tab-border-bottom: 2px solid rgba(252, 216, 32, 0.2);
   --currency-box-shadow: 1px 1px 8.6px 3px rgba(253,249,255,0.50196);
-  --currency-box-border-color: rgba(252, 216, 32, 0.502);
   --tab-indicator-background: rgba(252, 216, 32, 1);
   --submit-button-color: var(--base-0);
   --submit-button-background: linear-gradient(
@@ -1775,6 +1783,8 @@
   --submit-button-font-size: var(--font-size-l);
   --track-background: var(--base-1000);
   --thumb-background: rgba(5, 74, 18, 1);
+  --input-filled-border-color: rgba(252, 216, 32, 0.5);
+  --input-focus-border-color: rgba(252, 216, 32, 1);
 }
 
 .KIT__SignUpTypeTwo-module__yellow___fSYHc {
@@ -1810,8 +1820,8 @@
 .KIT__SignUpTypeTwo-module__gray___ix0Zs {
   --background: rgba(25, 33, 44, 1);
   --border: 4px solid;
-  -o-border-image: linear-gradient(180deg, #DCB692 20.52%, #4E3621 113.24%) 1;
-     border-image: linear-gradient(180deg, #DCB692 20.52%, #4E3621 113.24%) 1;
+  -o-border-image: linear-gradient(180deg, #dcb692 20.52%, #4e3621 113.24%) 1;
+     border-image: linear-gradient(180deg, #dcb692 20.52%, #4e3621 113.24%) 1;
   --tab-indicator-background: rgba(213, 163, 101, 1);
   --tab-border-bottom: 2px solid rgba(213, 163, 101, 0.2);
   --currency-box-border-color: rgba(213, 163, 101, 0.5);
@@ -1819,16 +1829,47 @@
   --currency-box-shadow: 1px 1px 8.6px 3px rgba(253, 249, 255, 0.5);
   --phone-wrapper-background: rgba(14, 19, 25, 1);
   --submit-button-background: rgba(255, 10, 10, 1);
-  --password-box-border-color: rgba(213, 163, 101, 0.5);
   --submit-button-color: var(--base-0);
   --track-background: var(--base-1000);
   --thumb-background: rgba(162, 26, 75, 1);
+  --input-filled-border-color: rgba(213, 163, 101, 0.5);
+  --input-focus-border-color: rgba(213, 163, 101, 1);
 }
 
 .KIT__SignUpTypeTwo-module__gray___ix0Zs .KIT__SignUpTypeTwo-module__submitButton___aPLn7 {
   font-size: var(--font-size-l);
 }
 
+.KIT__SignUpTypeTwo-module__pink___T1c13 {
+  --background: linear-gradient(181.81deg, #a21a4b -0.66%, #350717 98.3%);
+  border: 4px solid;
+
+  -o-border-image: linear-gradient(181.3deg, #ff6489 -1.04%, #ba405d 93.8%) 1;
+
+     border-image: linear-gradient(181.3deg, #ff6489 -1.04%, #ba405d 93.8%) 1;
+  --currency-box-background: rgba(53, 7, 23, 1);
+  --currency-box-shadow: 1px 1px 8.6px 3px rgba(253, 249, 255, 0.5);
+  --phone-wrapper-background: rgba(53, 7, 23, 1);
+  --track-background: var(--base-1000);
+  --thumb-background: rgba(162, 26, 75, 1);
+  --submit-button-background: rgba(41, 188, 89, 1);
+  --submit-button-color: var(--base-0);
+  --input-filled-border-color: rgba(226, 171, 0, 0.5);
+  --input-focus-border-color: rgba(226, 171, 0, 1);
+  --phone-box-background: rgb(255, 255, 255, 0.1);
+}
+
+.KIT__SignUpTypeTwo-module__silver___TF63d {
+  --background: linear-gradient(183.6deg, #67615e 0.64%, #2b2b2b 97.12%);
+  --input-filled-border-color: rgba(255, 161, 0, 0.5);
+  --input-focus-border-color: rgba(255, 161, 0, 1);
+  --track-background: var(--base-1000);
+  --thumb-background: rgba(255, 161, 0, 1);
+  --phone-wrapper-background: rgba(43, 43, 43, 1);
+  --currency-box-background: rgba(43, 43, 43, 1);
+  --currency-box-shadow: 1px 1px 8.6px 3px rgba(253, 249, 255, 0.5);
+}
+
 .KIT__SignUpTypeTwo-module__contentArea___fA84v {
   overflow-y: auto;
   width: 100%;
@@ -1870,10 +1911,6 @@
   line-height: 32px;
 }
 
-.KIT__SignUpTypeTwo-module__emailInput___EVI_Y {
-  border: 1px solid var(--email-box-border-color);
-}
-
 .KIT__SignUpTypeTwo-module__bonusImage___b5O68 {
   width: 100%;
   height: auto;
@@ -2000,6 +2037,65 @@
   color: var(--red-1000);
 }
 
+.KIT__SocialButton-module__wrapperSocialButton___zzRye {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--indent-xs);
+  cursor: pointer;
+}
+
+.KIT__SocialButton-module__iconBox___SBfYf {
+  --height: 44px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: var(--border-m);
+  height: 44px;
+  height: var(--height);
+  width: 100%;
+}
+
+.KIT__SocialButton-module__title___XGj0M {
+  color: var(--base-0);
+  font-size: var(--font-size-xs);
+}
+
+.KIT__SocialButtons-module__wrapperSocialButtons___NZOfm {
+  display: flex;
+  flex-direction: column;
+  gap: var(--indent-m);
+  margin-bottom: var(--indent-m);
+}
+
+.KIT__SocialButtons-module__socialButtons___ZWpE0 {
+  display: grid;
+  width: 100%;
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  grid-gap: var(--indent-m);
+  gap: var(--indent-m);
+}
+
+.KIT__SocialButtons-module__row___DA7Ns {
+  display: flex;
+  align-items: center;
+  gap: var(--indent-s);
+}
+
+.KIT__SocialButtons-module__line___feDyO {
+  height: 1px;
+  background-color: rgba(255, 255, 255, 0.1);
+  flex: 1;
+}
+
+.KIT__SocialButtons-module__or___pGdGi {
+  color: rgba(161, 166, 178, 1);
+  font-size: var(--font-size-m);
+}
+
 .KIT__SignIn-module__content___fTb1F {
   width: 100%;
   display: flex;

package/package.json

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