react-gldn-kit 0.0.1 → 0.0.2

package/dist/lib/components/Banners/components/BattleBanner/index.js

@@ -47,13 +47,13 @@ var Text_1 = require("components/Text");
 var styles = __importStar(require("./BattleBanner.module.css"));
 var BattleBanner = function (props) {
     var _a;
-    var imagePath = props.imagePath, name = props.name, endDate = props.endDate, names = props.names, countDownText = props.countDownText, isFinished = props.isFinished, buttonText = props.buttonText, handleClick = props.handleClick, handleClickPath = props.handleClickPath, prizePoolText = props.prizePoolText, amount = props.amount, path = props.path, subTitle = props.subTitle, classes = props.classes;
+    var imagePath = props.imagePath, name = props.name, endDate = props.endDate, names = props.names, countDownText = props.countDownText, isFinished = props.isFinished, buttonText = props.buttonText, handleClick = props.handleClick, handleClickPath = props.handleClickPath, prizePoolText = props.prizePoolText, amount = props.amount, path = props.path, subTitle = props.subTitle, classes = props.classes, titleClasses = props.titleClasses, subTitleClasses = props.subTitleClasses, prizePoolClasses = props.prizePoolClasses, nameClasses = props.nameClasses, buttonTextClasses = props.buttonTextClasses;
     return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.wrapperBattleBanner, classes), style: {
             backgroundImage: "url(".concat(imagePath, ")"),
             backgroundSize: 'cover',
             backgroundPosition: 'center',
-        } }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.top }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.path, onClick: handleClickPath }, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: path }) }), (0, jsx_runtime_1.jsx)(ArrowSvg_1.ArrowSvg, { classes: styles.arrowSvg }), (0, jsx_runtime_1.jsx)("div", __assign({ className: styles.name }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: name }) }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.time, (_a = {},
+        } }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.top }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.path, onClick: handleClickPath }, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: path }) }), (0, jsx_runtime_1.jsx)(ArrowSvg_1.ArrowSvg, { classes: styles.arrowSvg }), (0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)(styles.name, nameClasses) }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: name }) }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.time, (_a = {},
                             _a[styles.finished] = isFinished,
-                            _a)) }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: styles.countDownText }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: countDownText }) })), !isFinished && ((0, jsx_runtime_1.jsx)(CountDown_1.CountDown, { endTimestamp: endDate, names: names, type: "row" }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.content }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: styles.title }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: name }) })), subTitle && ((0, jsx_runtime_1.jsx)("div", __assign({ className: styles.subTitle }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: subTitle }) }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.prizePool }, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: prizePoolText }) }), (0, jsx_runtime_1.jsx)("div", __assign({ className: styles.prizeAmount }, { children: amount }))] }))] }))] })), handleClick && ((0, jsx_runtime_1.jsx)(Buttons_1.BaseButton, { text: buttonText, handleClick: handleClick, size: "--button-xxl", buttonHeight: "--button-height-xxl", color: "primary", centreText: true, classes: styles.button }))] })));
+                            _a)) }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: styles.countDownText }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: countDownText }) })), !isFinished && ((0, jsx_runtime_1.jsx)(CountDown_1.CountDown, { endTimestamp: endDate, names: names, type: "row" }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.content }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)(styles.title, titleClasses) }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: name }) })), subTitle && ((0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)(styles.subTitle, subTitleClasses) }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: subTitle }) }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.prizePool, prizePoolClasses) }, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: prizePoolText }) }), (0, jsx_runtime_1.jsx)("div", __assign({ className: styles.prizeAmount }, { children: amount }))] }))] }))] })), handleClick && ((0, jsx_runtime_1.jsx)(Buttons_1.BaseButton, { text: buttonText, handleClick: handleClick, size: "--button-xxl", buttonHeight: "--button-height-xxl", color: "primary", centreText: true, classes: styles.button, classesText: buttonTextClasses }))] })));
 };
 exports.BattleBanner = BattleBanner;

package/dist/lib/components/Banners/components/BattleBanner/types.d.ts

@@ -12,4 +12,9 @@ export type BattleBannerProps = {
     path: string;
     subTitle?: string;
     classes?: string;
+    titleClasses?: string;
+    subTitleClasses?: string;
+    prizePoolClasses?: string;
+    nameClasses?: string;
+    buttonTextClasses?: string;
 };

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

@@ -57,7 +57,7 @@ var BattlesCard = function (props) {
     return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.wrapperBattlesCard, classes) }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.imageWrapper }, { children: [(0, jsx_runtime_1.jsx)(HOCImageLoader_1.HOCImageLoader, __assign({ src: path.replace("[".concat(activeLanguage, "]"), activeLanguage), classes: styles.image }, { children: (0, jsx_runtime_1.jsx)("img", { src: imagePath || path.replace("[".concat(activeLanguage, "]"), 'en'), className: styles.image }) })), isInHouse && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.wrapperContent }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Logos_1.Logo, { appType: appType, isMobile: false }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.date }, { children: [new Date(startDate).toLocaleString('default', {
                                                 month: 'numeric',
                                                 day: 'numeric',
-                                            }), ' ', "-", ' ', new Date(endDate).toLocaleString('default', {
+                                            }), "-", new Date(endDate).toLocaleString('default', {
                                                 month: 'numeric',
                                                 day: 'numeric',
                                             })] }))] }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.prizeWrapper }, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { idT: "tournaments.prize", specValue: '' }), (0, jsx_runtime_1.jsx)("div", __assign({ className: styles.prize }, { children: prize }))] }))] })))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.textBox }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)(styles.providerName, (_a = {},

package/dist/lib/components/SignUp/DocsCheckBox/index.js

@@ -25,8 +25,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DocsCheckBox = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-// import { CheckBox } from 'decryption_component-kit';
-// import { useTranslate } from 'decryption_component-kit';
 var CheckBox_1 = require("components/ui/Inputs/CheckBox");
 var styles = __importStar(require("./Docs.module.css"));
 var DocsCheckBox = function (props) {

package/dist/lib/components/ui/CountDown/index.js

@@ -43,6 +43,7 @@ var react_1 = require("react");
 var classnames_1 = __importDefault(require("classnames"));
 var useCountDown_1 = require("hooks/useCountDown");
 var styles = __importStar(require("./CountDown.module.css"));
+var Text_1 = require("components/Text");
 var CountDown = function (props) {
     var wrapperClasses = props.wrapperClasses, timeBlockClasses = props.timeBlockClasses, timeClasses = props.timeClasses, callbackEndTime = props.callbackEndTime, type = props.type, names = props.names;
     var day = names.day, hours = names.hours, min = names.min, seconds = names.seconds, shortMM = names.shortMM, shortDay = names.shortDay, shortHH = names.shortHH, shortSec = names.shortSec;
@@ -55,11 +56,11 @@ var CountDown = function (props) {
     }, [time, callbackEndTime]);
     if (type === 'cards') {
         var formatTime = time.formatTime;
-        return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.wrapperCardCounters, wrapperClasses) }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.rowCounter }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: styles.timeCardBlock }, { children: formatTime[0][0] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: styles.timeCardBlock }, { children: formatTime[0][1] }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: styles.dayName }, { children: day }))] }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.dots }, { children: [(0, jsx_runtime_1.jsx)("div", { className: styles.itemDot }), (0, jsx_runtime_1.jsx)("div", { className: styles.itemDot })] })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.rowCounter }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: styles.timeCardBlock }, { children: formatTime[1][0] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: styles.timeCardBlock }, { children: formatTime[1][1] }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: styles.dayName }, { children: hours }))] }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.dots }, { children: [(0, jsx_runtime_1.jsx)("div", { className: styles.itemDot }), (0, jsx_runtime_1.jsx)("div", { className: styles.itemDot })] })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.rowCounter }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: styles.timeCardBlock }, { children: formatTime[2][0] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: styles.timeCardBlock }, { children: formatTime[2][1] }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: styles.dayName }, { children: min }))] })] })));
+        return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.wrapperCardCounters, wrapperClasses) }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.rowCounter }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: styles.timeCardBlock }, { children: formatTime[0][0] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: styles.timeCardBlock }, { children: formatTime[0][1] }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: styles.dayName }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: day }) }))] }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.dots }, { children: [(0, jsx_runtime_1.jsx)("div", { className: styles.itemDot }), (0, jsx_runtime_1.jsx)("div", { className: styles.itemDot })] })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.rowCounter }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: styles.timeCardBlock }, { children: formatTime[1][0] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: styles.timeCardBlock }, { children: formatTime[1][1] }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: styles.dayName }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: hours }) }))] }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.dots }, { children: [(0, jsx_runtime_1.jsx)("div", { className: styles.itemDot }), (0, jsx_runtime_1.jsx)("div", { className: styles.itemDot })] })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.rowCounter }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: styles.timeCardBlock }, { children: formatTime[2][0] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: styles.timeCardBlock }, { children: formatTime[2][1] }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: styles.dayName }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: min }) }))] })] })));
     }
     if (type === 'row') {
-        return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.wrapperCountDown, wrapperClasses) }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.row, timeBlockClasses) }, { children: [time.formatTime[0] || 0, shortDay[0]] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.row, timeBlockClasses) }, { children: [time.formatTime[1] || 0, shortHH[0]] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.row, timeBlockClasses) }, { children: [time.formatTime[2] || 0, shortMM[0]] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.row, timeBlockClasses) }, { children: [time.formatTime[3] || 0, shortSec[0]] }))] })));
+        return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.wrapperCountDown, wrapperClasses) }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.row, timeBlockClasses) }, { children: [time.formatTime[0] || 0, (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: shortDay[0] })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.row, timeBlockClasses) }, { children: [time.formatTime[1] || 0, (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: shortHH[0] })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.row, timeBlockClasses) }, { children: [time.formatTime[2] || 0, (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: shortMM[0] })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.row, timeBlockClasses) }, { children: [time.formatTime[3] || 0, (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: shortSec[0] })] }))] })));
     }
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.wrapperCountDown, wrapperClasses) }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.timeBlock, timeBlockClasses) }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)(styles.time, timeClasses) }, { children: time.formatTime[0] || 0 })), (0, jsx_runtime_1.jsx)("div", __assign({ className: styles.timeInfo }, { children: shortDay }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.timeBlock, timeBlockClasses) }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)(styles.time, timeClasses) }, { children: time.formatTime[1] || 0 })), (0, jsx_runtime_1.jsx)("div", __assign({ className: styles.timeInfo }, { children: shortHH }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.timeBlock, timeBlockClasses) }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)(styles.time, timeClasses) }, { children: time.formatTime[2] || 0 })), (0, jsx_runtime_1.jsx)("div", __assign({ className: styles.timeInfo }, { children: shortMM }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.timeBlock, timeBlockClasses) }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)(styles.time, timeClasses) }, { children: time.formatTime[3] || 0 })), (0, jsx_runtime_1.jsx)("div", __assign({ className: styles.timeInfo }, { children: shortSec }))] }))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.wrapperCountDown, wrapperClasses) }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.timeBlock, timeBlockClasses) }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)(styles.time, timeClasses) }, { children: time.formatTime[0] || 0 })), (0, jsx_runtime_1.jsx)("div", __assign({ className: styles.timeInfo }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: shortDay }) }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.timeBlock, timeBlockClasses) }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)(styles.time, timeClasses) }, { children: time.formatTime[1] || 0 })), (0, jsx_runtime_1.jsx)("div", __assign({ className: styles.timeInfo }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: shortHH }) }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.timeBlock, timeBlockClasses) }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)(styles.time, timeClasses) }, { children: time.formatTime[2] || 0 })), (0, jsx_runtime_1.jsx)("div", __assign({ className: styles.timeInfo }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: shortMM }) }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.timeBlock, timeBlockClasses) }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)(styles.time, timeClasses) }, { children: time.formatTime[3] || 0 })), (0, jsx_runtime_1.jsx)("div", __assign({ className: styles.timeInfo }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: shortSec }) }))] }))] })));
 };
 exports.CountDown = CountDown;

package/dist/main.css

@@ -2423,7 +2423,7 @@
 }
 
 .KIT__Pagination-module__stepButton___q1Yn5 {
-  background-color: rgb(var(--dark), 0.5);
+  background-color: var(--pagination-step-button-background);
   height: 100%;
   border-radius: var(--border-12);
   max-width: var(--button-xxl);
@@ -2446,7 +2446,7 @@
 .KIT__Pagination-module__stepButton___q1Yn5,
 .KIT__Pagination-module__startPage___CfFGF,
 .KIT__Pagination-module__slash___bckao {
-  color: rgb(var(--semi-gray));
+  color: var(--pagination-button-text-color);
 }
 
 .KIT__Pagination-module__startPage___CfFGF,
@@ -2461,7 +2461,7 @@
 .KIT__Pagination-module__lastPage___JACZN,
 .KIT__Pagination-module__page___BM78i,
 .KIT__Pagination-module__ellipsis___sTeYv {
-  color: rgb(var(--gray));
+  color: var(--pagination-button-second-text-color);
 }
 
 .KIT__Pagination-module__stepButton___q1Yn5.KIT__Pagination-module__desk___H7s8O {
@@ -2511,14 +2511,14 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: rgb(var(--semi-dark-gray));
-    border: 2px solid rgb(var(--border-color-gray));
+    background-color: var(--pagination-button-background);
+    border: var(--pagination-button-border);
     cursor: pointer;
   }
 
   .KIT__Pagination-module__page___BM78i.KIT__Pagination-module__active___YIzUU {
-    border-color: rgb(var(--soft-gray));
-    background-color: rgb(var(--soft-gray));
+    border-color: var(--pagination-active-button-border-color);
+    background-color: var(--pagination-active-button-background);
   }
 }
 
@@ -3311,8 +3311,6 @@
       font-weight: 700;
       padding: 12px;
       padding-bottom: 20px;
-
-
     }
 .KIT__BattlesCard-module__wrapperBattlesCard___Lj8jQ .KIT__BattlesCard-module__wrapperContent___hUZyt .KIT__BattlesCard-module__prizeWrapper___Tx_6u .KIT__BattlesCard-module__prize___zCwmd {
         font-size: 32px;
@@ -3321,7 +3319,18 @@
         line-height: 100%;
 
         text-transform: uppercase;
-        background: linear-gradient(178deg, #F6B200 16.97%, #FFCE04 23.75%, #FFFB68 36.76%, #F0A300 47.43%, #C57700 53.21%, #BA6C00 58.56%, #EC9F00 66.97%, #F6AB00 68.88%, #FFE11D 84.16%);
+        background: linear-gradient(
+          178deg,
+          #f6b200 16.97%,
+          #ffce04 23.75%,
+          #fffb68 36.76%,
+          #f0a300 47.43%,
+          #c57700 53.21%,
+          #ba6c00 58.56%,
+          #ec9f00 66.97%,
+          #f6ab00 68.88%,
+          #ffe11d 84.16%
+        );
         background-clip: text;
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
@@ -3353,7 +3362,7 @@
     padding: 0 var(--indent-s);
   }
 .KIT__BattlesCard-module__wrapperBattlesCard___Lj8jQ .KIT__BattlesCard-module__textBox___r4AK3 .KIT__BattlesCard-module__providerName___hP5is {
-      border: 1px solid rgba(77, 33, 255, 1);
+      border: var(--battles-provider-name-border);
       border-radius: var(--border-m);
       padding: var(--indent-xs) var(--indent-m);
       color: rgb(var(--white));
@@ -3364,7 +3373,7 @@
       text-transform: uppercase;
     }
 .KIT__BattlesCard-module__wrapperBattlesCard___Lj8jQ .KIT__BattlesCard-module__textBox___r4AK3 .KIT__BattlesCard-module__providerName___hP5is.KIT__BattlesCard-module__full___jmdya {
-        background: rgba(77, 33, 255, 1);
+        background: var(--battles-provider-name-background);
       }
 .KIT__BattlesCard-module__wrapperBattlesCard___Lj8jQ .KIT__BattlesCard-module__textBox___r4AK3 .KIT__BattlesCard-module__name___DJXDf {
       color: rgb(var(--white));
@@ -3375,7 +3384,7 @@
 .KIT__BattlesCard-module__wrapperBattlesCard___Lj8jQ .KIT__BattlesCard-module__textBox___r4AK3 .KIT__BattlesCard-module__details___Yh7o_ {
       display: flex;
       align-items: center;
-      color: rgb(var(--primary));
+      color: var(--battles-details-color);
       /*вынести в colors*/
       gap: var(--indent-m);
       cursor: pointer;
@@ -3384,7 +3393,7 @@
         transform: rotate(90deg);
       }
 .KIT__BattlesCard-module__wrapperBattlesCard___Lj8jQ .KIT__BattlesCard-module__textBox___r4AK3 .KIT__BattlesCard-module__details___Yh7o_ .KIT__BattlesCard-module__arrowSvg___RwUg1 path {
-          fill: rgb(var(--primary));
+          fill: var(--battles-details-arrow-path);
         }
 .KIT__BattlesCard-module__wrapperBattlesCard___Lj8jQ .KIT__BattlesCard-module__textBox___r4AK3 .KIT__BattlesCard-module__details___Yh7o_.KIT__BattlesCard-module__dark___SRv2F {
         color: rgb(var(--semi-gray));
@@ -3393,6 +3402,7 @@
           fill: rgb(var(--semi-gray));
         }
 
+
   .KIT__Step-module__wrapperStep___wBtLk .KIT__Step-module__img___YsqV2 {
     width: 100%;
     border-radius: var(--border-m);
@@ -3401,7 +3411,7 @@
     font-weight: 700;
     font-size: var(--font-size-l);
     font-style: italic;
-    color: rgb(var(--primary));
+    color: var(--step-title-color);
     text-transform: uppercase;
   }
 @media screen and (min-width: 768px) {
@@ -3461,38 +3471,12 @@
       transform: rotate(90deg);
     }
 
-.KIT__BattleBanner-module__wrapperBattleBanner___kvoNM .KIT__BattleBanner-module__path___DguJU .KIT__BattleBanner-module__name___lPY6l {
-      color: rgb(var(--white));
-    }
-
 .KIT__BattleBanner-module__wrapperBattleBanner___kvoNM .KIT__BattleBanner-module__content___Nm5hb {
     display: flex;
     flex-direction: column;
     gap: var(--indent-xl);
   }
 
-.KIT__BattleBanner-module__wrapperBattleBanner___kvoNM .KIT__BattleBanner-module__content___Nm5hb .KIT__BattleBanner-module__title___oBHat {
-      font-size: clamp(var(--font-size-xxl), -0.107rem + 4.286vw, 60px);
-      text-transform: uppercase;
-      color: rgb(var(--white));
-    }
-
-.KIT__BattleBanner-module__wrapperBattleBanner___kvoNM .KIT__BattleBanner-module__content___Nm5hb .KIT__BattleBanner-module__subTitle___nK3G2 {
-      color: rgb(var(--semi-gray));
-      font-size: clamp(var(--font-size-s),
-          0.429rem + 1.19vw,
-          var(--font-size-xxl));
-      max-width: 50%;
-    }
-
-.KIT__BattleBanner-module__wrapperBattleBanner___kvoNM .KIT__BattleBanner-module__content___Nm5hb .KIT__BattleBanner-module__prizePool___DAQ74 {
-      text-transform: uppercase;
-      color: rgb(var(--white));
-      font-size: clamp(var(--font-size-s),
-          0.429rem + 1.19vw,
-          var(--font-size-xxl));
-    }
-
 .KIT__BattleBanner-module__wrapperBattleBanner___kvoNM .KIT__BattleBanner-module__content___Nm5hb .KIT__BattleBanner-module__prizeAmount___yWw4j {
       font-size: clamp(var(--font-size-xxl), -0.107rem + 4.286vw, 60px);
       background-clip: text;
@@ -3502,44 +3486,6 @@
       font-weight: 700;
     }
 
-.KIT__BattleBanner-module__wrapperBattleBanner___kvoNM .KIT__BattleBanner-module__time___oaNuD {
-    background-color: rgba(77, 33, 255, 1);
-    border-top-right-radius: var(--border-s);
-    border-bottom-right-radius: var(--border-s);
-    display: flex;
-    gap: var(--indent-xs);
-    padding: var(--indent-xs) var(--indent-m);
-    width: 90%;
-  }
-
-@media screen and (max-width: 768px) {
-
-.KIT__BattleBanner-module__wrapperBattleBanner___kvoNM .KIT__BattleBanner-module__time___oaNuD {
-      transform: translateX(calc(-1 * var(--indent-m)));
-  }
-    }
-
-.KIT__BattleBanner-module__wrapperBattleBanner___kvoNM .KIT__BattleBanner-module__time___oaNuD.KIT__BattleBanner-module__finished___frmmh {
-      background-color: rgba(230, 166, 0, 1);
-    }
-
-.KIT__BattleBanner-module__wrapperBattleBanner___kvoNM .KIT__BattleBanner-module__time___oaNuD .KIT__BattleBanner-module__countDownText___Bcsrt {
-      color: rgb(var(--white));
-      font-size: var(--font-size-m);
-      font-size: 600;
-    }
-
-.KIT__BattleBanner-module__wrapperBattleBanner___kvoNM .KIT__BattleBanner-module__time___oaNuD .KIT__BattleBanner-module__countDown___pr8hY {
-      background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
-      background: initial;
-      border: medium none currentcolor;
-      border: initial;
-    }
-
-.KIT__BattleBanner-module__wrapperBattleBanner___kvoNM .KIT__BattleBanner-module__time___oaNuD .KIT__BattleBanner-module__timeBlock___Ym7lT {
-      flex-direction: row;
-    }
-
 .KIT__BattleBanner-module__wrapperBattleBanner___kvoNM .KIT__BattleBanner-module__button___yjczx {
     text-transform: uppercase;
     --width: full;
@@ -3552,6 +3498,70 @@
     max-width: var(--width);
   }
 
+.KIT__BattleBanner-module__time___oaNuD {
+  background-color: var(--battles-time-background);
+  border-top-right-radius: var(--border-s);
+  border-bottom-right-radius: var(--border-s);
+  display: flex;
+  gap: var(--indent-xs);
+  padding: var(--indent-xs) var(--indent-m);
+  width: 90%;
+}
+
+@media screen and (max-width: 768px) {
+
+.KIT__BattleBanner-module__time___oaNuD {
+    transform: translateX(calc(-1 * var(--indent-m)));
+}
+  }
+
+.KIT__BattleBanner-module__time___oaNuD.KIT__BattleBanner-module__finished___frmmh {
+    background-color: rgba(230, 166, 0, 1);
+  }
+
+.KIT__BattleBanner-module__time___oaNuD .KIT__BattleBanner-module__countDownText___Bcsrt {
+    color: rgb(var(--white));
+    font-size: var(--font-size-m);
+    font-size: 600;
+  }
+
+.KIT__BattleBanner-module__time___oaNuD .KIT__BattleBanner-module__countDown___pr8hY {
+    background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
+    background: initial;
+    border: medium none currentcolor;
+    border: initial;
+  }
+
+.KIT__BattleBanner-module__time___oaNuD .KIT__BattleBanner-module__timeBlock___Ym7lT {
+    flex-direction: row;
+  }
+
+.KIT__BattleBanner-module__name___lPY6l {
+  color: rgb(var(--white));
+}
+
+.KIT__BattleBanner-module__title___oBHat {
+  font-size: clamp(var(--font-size-xxl), -0.107rem + 4.286vw, 60px);
+  text-transform: uppercase;
+  color: rgb(var(--white));
+}
+
+.KIT__BattleBanner-module__subTitle___nK3G2 {
+  color: rgb(var(--semi-gray));
+  font-size: clamp(var(--font-size-s),
+      0.429rem + 1.19vw,
+      var(--font-size-xxl));
+  max-width: 50%;
+}
+
+.KIT__BattleBanner-module__prizePool___DAQ74 {
+  text-transform: uppercase;
+  color: rgb(var(--white));
+  font-size: clamp(var(--font-size-s),
+      0.429rem + 1.19vw,
+      var(--font-size-xxl));
+}
+
 @media screen and (min-width: 768px) {
 
   .KIT__BattleBanner-module__wrapperBattleBanner___kvoNM {
@@ -3593,7 +3603,7 @@
   gap: var(--indent-m);
   border-radius: var(--border-m);
   padding: var(--indent-l);
-  background: linear-gradient(90deg, #000000 49.5%, #191821 100%);
+  background: var(--leaderboard-user-background);
 }
 
 @media screen and (min-width: 768px) {
@@ -3712,7 +3722,7 @@
       align-items: center;
       justify-content: center;
       border-radius: var(--border-circle);
-      border: 2px solid rgb(var(--soft-gray));
+      border: var(--leaderboard-user-icon-border);
     }
 
 .KIT__User-module__wrapperUser___N3jg2 .KIT__User-module__description___f1AMN .KIT__User-module__icon___UpfJt .KIT__User-module__svg___Buyp8 {
@@ -3723,6 +3733,14 @@
         height: var(--size);
       }
 
+.KIT__User-module__wrapperUser___N3jg2 .KIT__User-module__description___f1AMN .KIT__User-module__icon___UpfJt .KIT__User-module__svg___Buyp8 path:first-child {
+            fill: var(--leaderboard-user-icon-first-path);
+          }
+
+.KIT__User-module__wrapperUser___N3jg2 .KIT__User-module__description___f1AMN .KIT__User-module__icon___UpfJt .KIT__User-module__svg___Buyp8 path:nth-child(2) {
+            fill: var(--leaderboard-user-icon-second-path);
+          }
+
 @media screen and (min-width: 768px) {
 
   .KIT__User-module__wrapperUser___N3jg2 .KIT__User-module__description___f1AMN .KIT__User-module__icon___UpfJt {
@@ -3735,7 +3753,7 @@
       }
 
 .KIT__User-module__wrapperUser___N3jg2 .KIT__User-module__description___f1AMN .KIT__User-module__id___n98Z1 {
-      color: rgb(var(--white));
+      color: var(--leaderboard-user-id-color);
       font-size: clamp(
         var(--font-size-xs),
         0.214rem + 1.429vw,
@@ -3750,7 +3768,7 @@
       var(--font-size-xxl)
     );
     font-weight: 700;
-    color: rgb(var(--white));
+    color: var(--leaderboard-user-wager-color);
   }
 
 .KIT__Leaderboard-module__wrapperLeaderboard___a7Igz {

package/package.json

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