react-gldn-kit 0.1.121 → 0.1.122

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

@@ -15,6 +15,6 @@ exports.CloseThirdSvg = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var CloseThirdSvg = function (props) {
     var _a = props.width, width = _a === void 0 ? '16' : _a, _b = props.height, height = _b === void 0 ? '16' : _b, classes = props.classes, handleClick = props.handleClick;
-    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: width, height: height, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: classes, onClick: handleClick }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M12.6665 3.33337L3.33325 12.6667M3.33321 3.33334L12.6665 12.6666", stroke: "var(--semi-blue-gray)", strokeWidth: "1.5", strokeLinecap: "round" }) })));
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: width, height: height, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: classes, onClick: handleClick }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M12.6665 3.33337L3.33325 12.6667M3.33321 3.33334L12.6665 12.6666", stroke: "rgb(var(--semi-blue-gray))", strokeWidth: "1.5", strokeLinecap: "round" }) })));
 };
 exports.CloseThirdSvg = CloseThirdSvg;

package/dist/main.css

@@ -721,7 +721,7 @@
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  color: var(--input-label-text-color);
+  color: var(--third-input-label-text-color, var(--input-label-text-color));
   z-index: 1;
   font-weight: 500;
   transition: 0.5s;
@@ -970,7 +970,7 @@
   justify-content: space-between;
   align-items: center;
   padding: var(--indent-m);
-  color: var(--input-label-text-color);
+  color: var(--third-input-label-text-color, var(--input-label-text-color));
   width: 100%;
   overflow: hidden;
   white-space: nowrap;
@@ -1027,7 +1027,7 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: var(--selector-overflow-color);
+  color: var(--selector-item-color, var(--selector-overflow-color));
 }
 
 .KIT__Selector-module__column___lV8W1 {
@@ -1250,7 +1250,10 @@
 }
 
 .KIT__CheckBox-module__checkbox___eH2PT.KIT__CheckBox-module__checked___zbGvO {
-  background-color: var(--checkbox-checked-background-color);
+  background-color: var(
+    --third-checkbox-checked-background-color,
+    var(--checkbox-checked-background-color)
+  );
   border-color: var(--checkbox-checked-border-color);
 }
 
@@ -1276,9 +1279,11 @@
   align-items: center;
   padding: 1px;
 }
+
 .KIT__Tabs-module__wrapperTabs___rFoBY.KIT__Tabs-module__bg___y6G1J {
     background-color: var(--tabs-background);
   }
+
 .KIT__Tabs-module__wrapperTabs___rFoBY .KIT__Tabs-module__tab___NBVtA {
     text-align: center;
     color: var(--tab-text-color);
@@ -1296,12 +1301,14 @@
     gap: var(--indent-s);
     font-size: var(--font-size-s);
   }
+
 .KIT__Tabs-module__wrapperTabs___rFoBY .KIT__Tabs-module__tab___NBVtA.KIT__Tabs-module__buttonTab___Tpphz {
       padding: var(--indent-s);
       border-radius: var(--border-s);
       border: 2px solid transparent;
       width: 100%;
     }
+
 .KIT__Tabs-module__wrapperTabs___rFoBY .KIT__Tabs-module__tab___NBVtA.KIT__Tabs-module__buttonTabActive___hoiNu {
       display: flex;
       justify-content: center;
@@ -1311,12 +1318,15 @@
       box-shadow: var(--tab-button-active-shadow, initial);
       height: 100%;
     }
+
 .KIT__Tabs-module__wrapperTabs___rFoBY .KIT__Tabs-module__tab___NBVtA.KIT__Tabs-module__buttonTabActive___hoiNu::after {
         border-color: transparent;
       }
+
 .KIT__Tabs-module__wrapperTabs___rFoBY .KIT__Tabs-module__tab___NBVtA.KIT__Tabs-module__underlineActiveTab___YstNX {
-      color: var(--sign-in-active-tab-color, var(--tab-text-color));
+      color: var(--third-sign-in-active-tab-color, var(--tab-text-color));
     }
+
 .KIT__Tabs-module__wrapperTabs___rFoBY .KIT__Tabs-module__activeBlockIndicator___B35H_ {
     position: absolute;
     height: 2px;
@@ -1325,6 +1335,7 @@
     bottom: 1px;
     z-index: calc(var(--layout-lvl-1) + 1);
   }
+
 .KIT__Tabs-module__wrapperTabs___rFoBY .KIT__Tabs-module__buttonActiveIndicator___l6_IM {
     height: 100%;
     border-radius: var(--border-s);
@@ -1332,10 +1343,12 @@
     background: var(--primary-gradient);
     z-index: var(--layout-lvl-1);
   }
+
 .KIT__Tabs-module__wrapperTabs___rFoBY::-webkit-scrollbar {
     width: 0;
     height: 0;
   }
+
 .KIT__Tabs-module__border___IJHnH {
   border-bottom: var(--tab-border-bottom-default);
 }
@@ -2758,47 +2771,46 @@
 }
 
 .KIT__SignUpTypeThree-module__wrapperSignUpModal___ESx6s {
-  --semi-dark-gray: rgb(46, 58, 76);
-  --semi-blue-gray: rgb(97, 113, 158);
-  --light-blue-var: rgb(var(--light-blue));
-  --third-primary-color: var(--light-blue-var,rgb(252, 212, 53));
-  --third-submit-button-background: var(--third-primary-color);
-  --third-submit-button-color: var(--semi-dark-gray);
-  --tab-text-color: var(--sign-in-tab-color, var(--semi-dark-gray));
+  --third-modal-layout-background-color: var(--base-0);
+  --semi-blue-gray: 97, 113, 158;
   --input-background: var(--sign-in-input-background-color, rgb(244, 247, 250));
-  --input-base-autofill-background-color: rgb(244, 247, 250);
-  --input-border: none;
   --input-text-color: var(--input-color, rgb(65, 82, 106));
-  --input-label-text-color: var(--input-label-color, rgb(65, 82, 106));
   --selector-item-background: var(
     --email-input-background-color,
     rgb(244, 247, 250)
   );
-  --selector-border: none;
+  --third-sign-in-active-tab-color: var(
+    --sign-in-active-tab-color,
+    var(--base-1000)
+  );
+  --third-input-label-text-color: var(--input-label-color, rgb(65, 82, 106));
   --sign-up-modal-checkbox-color: var(
     --email-checkbox-text-color,
-    var(--semi-dark-gray)
+    var(--third-semi-dark-gray)
+  );
+  --tab-border-bottom-default: transparent;
+  --tab-text-color: var(--sign-in-tab-color, rgb(129, 141, 177));
+  --selector-main-bg-opened: var(
+    --email-input-background-color,
+    rgb(244, 247, 250)
   );
   --selector-main-bg-opened: var(
     --email-input-background-color,
     rgb(244, 247, 250)
   );
   --selector-color: var(--selector-item-color, rgb(65, 82, 106));
+  --phone-input-item-hover-background-color: var(--selector-item-background);
+  --kit-world-svg-path-fill: var(--world-svg-path-fill, rgb(46, 58, 76));
+  --kit-phone-view-name-color: var(--phone-view-name-color, --base-1000);
   --selector-drop-down-bg: rgb(244, 247, 250);
-  --checkbox-border-color: rgb(166, 181, 201);
-  --checkbox-checked-background-color: var(--third-primary-color);
-  --checkbox-checked-border-color: var(--third-primary-color);
-  --sign-up-modal-checkbox-terms-color: var(--third-primary-color);
-  --PhoneInputCountrySelectArrow-color: rgb(179, 190, 205);
+  --add-circle-svg-path-fill: var(--third-primary-color);
+  --third-checkbox-checked-background-color: var(--third-primary-color);
+  --third-submit-button-background: var(--third-primary-color);
   --tab-indicator-bg: var(--third-primary-color);
-  --tab-border-bottom-default: transparent;
+  --sign-up-modal-checkbox-terms-color: var(--third-primary-color);
   --input-height: 40px;
-  --kit-phone-view-name-color: var(--phone-view-name-color, rgb(46, 58, 76));
-  --kit-world-svg-path-fill: var(--world-svg-path-fill, rgb(46, 58, 76));
-  --add-circle-svg-path-fill: var(--third-primary-color);
 
   padding: var(--indent-xs);
-
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -2811,11 +2823,14 @@
 
 .KIT__SignUpTypeThree-module__wrapperSignUpModal___ESx6s.KIT__SignUpTypeThree-module__lightBlue___CoeJ2 {
   --third-primary-color: rgb(102, 231, 248);
-  --semi-blue-gray: rgb(113, 161, 168);
+  --semi-blue-gray: 113, 161, 168;
 }
 
 .KIT__SignUpTypeThree-module__wrapperSignUpModal___ESx6s.KIT__SignUpTypeThree-module__page___ytbMW {
-  background: var(--modal-content-background, var(--third-modal-layout-background-color));
+  background: var(
+    --modal-layout-background-color,
+    var(--third-modal-layout-background-color)
+  );
   padding: var(--indent-m);
 }
 
@@ -2837,7 +2852,7 @@
   font-size: var(--font-size-m);
   width: var(--full);
   font-weight: 700;
-  color: var(--sign-in-title-color, var(--semi-dark-gray));
+  color: var(--sign-in-title-color, var(--third-semi-dark-gray));
 
   display: flex;
   align-items: center;
@@ -2866,7 +2881,7 @@
 }
 
 .KIT__SignUpTypeThree-module__activeTab___Rmom3 {
-  color: var(--semi-dark-gray);
+  color: var(--third-semi-dark-gray);
   border-bottom: 2px solid var(--third-primary-color);
 }
 
@@ -2880,12 +2895,13 @@
 .KIT__SignUpTypeThree-module__subTitle___oAr_a {
   font-size: 0.75rem;
   font-weight: 700;
-  color: var(--sign-up-sub-title-color, var(--semi-dark-gray));
+  color: var(--sign-up-sub-title-color, var(--third-semi-dark-gray));
   margin-bottom: var(--indent-m);
 }
 
 .KIT__SignUpTypeThree-module__subTitle___oAr_a span {
   color: var(--third-primary-color);
+  cursor: pointer;
 }
 
 .KIT__SignUpTypeThree-module__close___m4khX {
@@ -3340,45 +3356,37 @@
 }
 
 .KIT__SignInThird-module__wrapperReferralCopyContent___dmwrE {
-  --semi-dark-gray: rgb(46, 58, 76);
-  --light-blue-var: rgb(var(--light-blue));
-  --third-primary-color: var(--light-blue-var,rgb(252, 212, 53));
-  --third-submit-button-background: var(--third-primary-color);
-  --third-submit-button-color: var(--semi-dark-gray);
-  --tab-text-color: var(--sign-in-tab-color, var(--semi-dark-gray));
+  --third-modal-layout-background-color: var(--base-0);
+  --register-color: var(--third-primary-color);
   --input-background: var(--sign-in-input-background-color, rgb(244, 247, 250));
-  --input-base-autofill-background-color: rgb(244, 247, 250);
-  --input-border: none;
   --input-text-color: var(--input-color, rgb(65, 82, 106));
-  --input-label-text-color: var(--input-label-color, rgb(65, 82, 106));
-  --selector-item-background: rgb(244, 247, 250);
-  --selector-border: none;
-  --selector-main-bg-opened: var(
+  --selector-item-background: var(
     --email-input-background-color,
     rgb(244, 247, 250)
   );
-  --selector-color: var(--selector-item-color, rgb(65, 82, 106));
-  --selector-drop-down-bg: rgb(244, 247, 250);
-  --checkbox-border-color: rgb(166, 181, 201);
-  --checkbox-checked-background-color: var(--third-primary-color);
-  --checkbox-checked-border-color: var(--third-primary-color);
+  --third-sign-in-active-tab-color: var(--sign-in-active-tab-color, var(--base-1000));
+  --input-label-text-color: var(--input-label-color, rgb(65, 82, 106));
   --sign-up-modal-checkbox-color: var(
     --email-checkbox-text-color,
-    var(--semi-dark-gray)
+    var(--third-semi-dark-gray)
   );
-  --sign-up-modal-checkbox-terms-color: var(--third-primary-color);
-  --PhoneInputCountrySelectArrow-color: rgb(179, 190, 205);
-  --tab-indicator-bg: var(--third-primary-color);
-  --sign-in-modal-lost-password-color: var(--third-primary-color);
-  --register-color: var(--third-primary-color);
-  --no-account-color: var(--sign-in-register-color, rgb(38, 61, 64));
   --tab-border-bottom-default: transparent;
-  --kit-phone-view-name-color: var(--phone-view-name-color, rgb(46, 58, 76));
+  --tab-text-color: var(--sign-in-tab-color, rgb(129, 141, 177));
+  --selector-main-bg-opened: var(
+    --email-input-background-color,
+    rgb(244, 247, 250)
+  );
+  --selector-color: var(--selector-item-color, rgb(65, 82, 106));
+  --phone-input-item-hover-background-color: var(--selector-item-background);
   --kit-world-svg-path-fill: var(--world-svg-path-fill, rgb(46, 58, 76));
-  --arrow-button-svg-path-fill: rgb(179, 190, 205);
+  --kit-phone-view-name-color: var(--phone-view-name-color, --base-1000);
+  --selector-drop-down-bg: rgb(244, 247, 250);
+  --third-checkbox-checked-background-color: var(--third-primary-color);
+  --third-submit-button-background: var(--third-primary-color);
+  --tab-indicator-bg: var(--third-primary-color);
+  --input-height: 40px;
 
   padding: var(--indent-xs);
-
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -3395,7 +3403,7 @@
 
 .KIT__SignInThird-module__wrapperReferralCopyContent___dmwrE.KIT__SignInThird-module__page___exmBC {
   background: var(
-    --modal-content-background,
+    --modal-layout-background-color,
     var(--third-modal-layout-background-color)
   );
   padding: var(--indent-m);
@@ -3422,7 +3430,7 @@
   font-size: var(--font-size-m);
   width: var(--full);
   font-weight: 700;
-  color: var(--sign-in-title-color, var(--semi-dark-gray));
+  color: var(--sign-in-title-color, var(--third-semi-dark-gray));
 
   display: flex;
   align-items: center;
@@ -3490,7 +3498,7 @@
   text-align: right;
   color: var(
     --sign-in-lost-psw-color,
-    var(--sign-in-modal-lost-password-color)
+    var(--third-primary-color)
   );
   font-weight: 400;
   font-size: 12px;
@@ -3540,7 +3548,7 @@
 }
 
 .KIT__SignInThird-module__noAccount___t4H66 {
-  color: var(--no-account-color);
+  color: var(--third-no-account-color);
   font-weight: 700;
 }
 
@@ -3548,6 +3556,7 @@
   color: var(--register-color);
   -webkit-text-decoration: underline;
   text-decoration: underline;
+  cursor: pointer;
 }
 
 .KIT__SignInThird-module__row___e20lB {
@@ -3565,6 +3574,7 @@
 
 .KIT__SignInThird-module__tab___aT9BA {
   font-size: var(--font-size-xs);
+  font-weight: 700;
 }
 
 @media screen and (min-width: 768px) {
@@ -3732,10 +3742,11 @@
   }
 
 .KIT__ModalLayout-module__wrapperModalLayout___A4nBX {
+  background-color: rgb(27, 29, 41);
   background-color: var(
     --modal-layout-background-color,
-    var(--modal-content-background, var(--third-modal-layout-background-color))
-   );
+    var(--third-modal-layout-background-color,rgb(27, 29, 41))
+  );
   border-radius: var(--border-xl) var(--border-xl) 0 0;
 
   display: flex;
@@ -4354,18 +4365,20 @@
   --kit-lost-password-phone-info-main-color: var(--lost-password-phone-info-main-color, rgb(38, 61, 64));
   --input-label-text-color: var(--input-label-color, rgb(65, 82, 106));
   --button-color-primary-text: rgb(46, 58, 76);
+  --third-sign-in-active-tab-color: var(--lost-password-active-tab-color, var(--base-1000));
+  --button-color-primary: var(--third-primary-color);
 }
 
 .KIT__LostPassword-module__whiteYellow____6a5B {
-  --button-color-primary: rgb(252, 212, 53);
+  --third-primary-color: rgb(252, 212, 53);
 }
 
 .KIT__LostPassword-module__whitePurple___n_7hB {
-  --button-color-primary: rgb(136, 103, 255);
+  --third-primary-color: rgb(136, 103, 255);
 }
 
 .KIT__LostPassword-module__whiteBlue___Iaz79 {
-  --button-color-primary: rgb(102, 231, 248);
+  --third-primary-color: rgb(102, 231, 248);
 }
 
 .KIT__LostPassword-module__secondaryGreen___GtqUQ {
@@ -4503,8 +4516,8 @@
   border-radius: var(--border-m);
   font-weight: 500;
   line-height: 1.2;
-  color: var(--input-code-color, var(--base-0));
-  background: var(--input-code-background, var(--base-800));
+  color: var(--kit-input-code-color, var(--base-0));
+  background: var(--kit-input-code-background, var(--base-800));
   text-align: center;
 }
 
@@ -5276,7 +5289,7 @@
   }
 
 .KIT__Alert-module__thirdTheme___lITjl {
-  --modal-layout-background-color: var(--modal-content-background, var(--base-0));
+  --third-modal-layout-background-color: var(--modal-layout-background-color, var(--base-0));
 }
 
 @media screen and (max-width: 768px) {
@@ -8044,7 +8057,8 @@
   --tab-border-bottom-color: var(--green-100, red);
   --tab-button-active-shadow: 0 0px 9px var(--green-100),
     inset 0 8px 1px color-mix(in oklab, var(--green-100) 10%, transparent 90%);
-    --tab-border-bottom-default: 2px solid var(--tabs-border-color, var(--base-700));
+  --tab-border-bottom-default: 2px solid
+    var(--tabs-border-color, var(--base-700));
 }
 
 :root {
@@ -8060,14 +8074,10 @@
   --x-reg-color: var(--base-400);
 
   /* Second */
-
-  /* Third */
-  --third-primary-color: rgb(252,212,53);
-  --third-modal-layout-background-color: var(--base-0);
 }
 
 :root {
-  --selector-border: var(--input-border);
+  --selector-border: var(--third-selector-border, var(--input-border));
   --selector-border-radius: var(--input-border-radius);
   --selector-item-background: var(--input-background);
   --selector-main-bg-opened: var(--base-800, initial);
@@ -8080,10 +8090,38 @@
   --sign-in-modal-lost-password-color: white;
 }
 :root {
-    --kit-world-svg-path-fill: var(--base-0);
+    --kit-world-svg-path-fill: var(--world-svg-path-fill, var(--base-0));
     --check-svg-path-fill: var(--base-0);
 }
 
+:root {
+  /* Third */
+  --third-semi-dark-gray: rgb(46, 58, 76);
+  --light-blue-var: rgb(var(--light-blue));
+  --third-primary-color: var(--light-blue-var, rgb(252, 212, 53));
+  --third-submit-button-color: var(--third-semi-dark-gray);
+  --third-input-background: var(--sign-in-input-background-color, rgb(244, 247, 250));
+  --third-input-base-autofill-background-color: rgb(244, 247, 250);
+  --third-input-border: none;
+  --third-input-text-color: var(--input-color, rgb(65, 82, 106));
+  --third-selector-item-background: var(
+    --email-input-background-color,
+    rgb(244, 247, 250)
+  );
+  --third-selector-border: none;
+
+  --third-checkbox-border-color: rgb(166, 181, 201);
+  --third-checkbox-checked-border-color: var(--third-primary-color);
+  --third-sign-up-modal-checkbox-terms-color: var(--third-primary-color);
+  --PhoneInputCountrySelectArrow-color: rgb(179, 190, 205);
+  --third-input-height: 40px;
+  --third-sign-in-modal-lost-password-color: var(--third-primary-color);
+  --third-no-account-color: var(--sign-in-register-color, rgb(38, 61, 64));
+  --third-tab-border-bottom-default: transparent;
+  --third--phone-view-name-color: var(--phone-view-name-color, rgb(46, 58, 76));
+  --arrow-button-svg-path-fill: rgb(179, 190, 205);
+}
+
 :root {
   --base-1000: rgba(0, 0, 0, 1);
   --base-900: rgba(23, 25, 36, 1);

package/package.json

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