@redneckz/wildless-cms-uni-blocks 0.2.76 → 0.2.77

package/dist/components/CreditCalculator/CreditCalculator.d.ts

@@ -0,0 +1,4 @@
+import { UniBlockProps } from '../../types';
+export interface CreditCalculatorProps extends UniBlockProps {
+}
+export declare const CreditCalculator: (props: import("@redneckz/uni-jsx").PropsWithChildren<CreditCalculatorProps, any>, context?: any) => any;

package/dist/components/CreditCalculator/CreditCalculator.js

@@ -0,0 +1,29 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CreditCalculator = void 0;
+const jsx_runtime_1 = require("@redneckz/uni-jsx/jsx-runtime");
+const uni_jsx_1 = require("@redneckz/uni-jsx");
+const Button_1 = require("../../ui-kit/Button/Button");
+const Checkbox_1 = require("../../ui-kit/Checkbox/Checkbox");
+const InputRange_1 = require("../../ui-kit/InputRange/InputRange");
+const clamp_1 = require("../../utils/clamp");
+const borderStyle = 'border-solid border-3 border-primary-main rounded-md';
+const MIN_MONEY = 50000;
+const MAX_MONEY = 3000000;
+const STEP_MONEY = 1000;
+const CREDIT_TERM_YEARS = [2, 3, 4, 5, 6, 7];
+const MIN_MONTHS = 1;
+const MAX_MONTHS = 84;
+const STEP_MONTHS = 1;
+const MONTHS_IN_YEAR = 12;
+exports.CreditCalculator = (0, uni_jsx_1.JSX)(({ context, className }) => {
+    const [moneyValue, setMoneyValue] = context.useState(350000);
+    const [monthsValue, setMonthsValue] = context.useState(12);
+    const [isAnnuityChecked, setIsAnnuityChecked] = context.useState(true);
+    const [isInsuranceChecked, setIsInsuranceChecked] = context.useState(true);
+    const handleButtonClick = (value) => {
+        setMonthsValue((0, clamp_1.clamp)(value * MONTHS_IN_YEAR, MIN_MONTHS, MAX_MONTHS));
+    };
+    return ((0, jsx_runtime_1.jsx)("section", { className: `font-sans text-primary-text bg-white p-4 ${className}`, children: (0, jsx_runtime_1.jsxs)("div", { className: `box-border p-12 flex flex-col justify-between ${borderStyle}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "grow mr-11", children: [(0, jsx_runtime_1.jsx)(InputRange_1.InputRange, { title: "\u0416\u0435\u043B\u0430\u0435\u043C\u0430\u044F \u0441\u0443\u043C\u043C\u0430 \u043A\u0440\u0435\u0434\u0438\u0442\u0430, \u20BD", items: ['От 50 000 рублей', 'До 3 000 000 рублей'], min: MIN_MONEY, max: MAX_MONEY, step: STEP_MONEY, value: moneyValue, onChange: setMoneyValue }), (0, jsx_runtime_1.jsx)(InputRange_1.InputRange, { title: "\u0421\u0440\u043E\u043A \u043A\u0440\u0435\u0434\u0438\u0442\u0430, \u043C\u0435\u0441\u044F\u0446\u0435\u0432", items: ['Или выберите из предложенных вариантов ниже'], min: MIN_MONTHS, max: MAX_MONTHS, step: STEP_MONTHS, value: monthsValue, onChange: setMonthsValue }), (0, jsx_runtime_1.jsx)("div", { className: "flex mb-7", children: CREDIT_TERM_YEARS.map((number, i) => renderButton(number, i, handleButtonClick)) }), (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "\u041F\u043E\u043B\u0443\u0447\u0430\u044E \u043F\u0435\u043D\u0441\u0438\u044E \u043D\u0430 \u043A\u0430\u0440\u0442\u0443 \u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u0430", checked: isAnnuityChecked, onChange: setIsAnnuityChecked }), (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { className: "mb-4", text: "\u041A\u043E\u043C\u043F\u043B\u0435\u043A\u0441\u043D\u0430\u044F \u0441\u0442\u0440\u0430\u0445\u043E\u0432\u0430\u044F \u0437\u0430\u0449\u0438\u0442\u0430", checked: isInsuranceChecked, onChange: setIsInsuranceChecked })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-9 bg-primary-main rounded-md text-white", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-base mb-5", children: "\u041D\u0430\u0448\u0435 \u043F\u0440\u0435\u0434\u043B\u043E\u0436\u0435\u043D\u0438\u0435" }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm opacity-60", children: "\u0415\u0436\u0435\u043C\u0435\u0441\u044F\u0447\u043D\u044B\u0439 \u043F\u043B\u0430\u0442\u0451\u0436" }), (0, jsx_runtime_1.jsx)("div", { className: "text-lg mb-3", children: "26 827 \u20BD" }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm opacity-60", children: "\u0421\u0442\u0430\u0432\u043A\u0430" }), (0, jsx_runtime_1.jsx)("div", { className: "text-lg", children: "16,9 %" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { className: "mr-3", text: "\u041E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C \u0437\u0430\u044F\u0432\u043A\u0443", version: "primary", href: "#" }), (0, jsx_runtime_1.jsx)("div", { className: "w-80 text-xxs leading-4 text-secondary-text", "aria-label": "\u0421\u043E\u0433\u043B\u0430\u0448\u0435\u043D\u0438\u0435 \u043D\u0430 \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0443 \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445", children: "\u041E\u0442\u043F\u0440\u0430\u0432\u043B\u044F\u044F \u0437\u0430\u044F\u0432\u043A\u0443, \u0432\u044B \u0441\u043E\u0433\u043B\u0430\u0448\u0430\u0435\u0442\u0435\u0441\u044C \u043D\u0430 \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0443 \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445 \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043D\u043D\u043E \u0442\u0440\u0435\u0431\u043E\u0432\u0430\u043D\u0438\u044F\u043C \u0424\u0417\u00A0\u00AB\u041E\u00A0\u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445\u00BB" })] })] }) }));
+});
+const renderButton = (number, i, handleClick) => ((0, jsx_runtime_1.jsx)("div", { className: "bg-secondary-light rounded-3xl h-10 w-[75px] box-border mr-2 flex items-center justify-center cursor-pointer", role: "button", onClick: () => handleClick(number), children: (0, jsx_runtime_1.jsxs)("span", { className: "font-medium text-sm", children: [number, " ", number > 4 ? 'лет' : 'года'] }) }, String(i)));
+//# sourceMappingURL=CreditCalculator.js.map

package/dist/components/CreditCalculator/CreditCalculator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreditCalculator.js","sourceRoot":"","sources":["../../../src/components/CreditCalculator/CreditCalculator.tsx"],"names":[],"mappings":"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"}

package/dist/ui-kit/Checkbox/Checkbox.d.ts

@@ -0,0 +1,2 @@
+import type { CheckboxProps } from './CheckboxProps';
+export declare const Checkbox: (props: import("@redneckz/uni-jsx").PropsWithChildren<CheckboxProps, any>, context?: any) => any;

package/dist/ui-kit/Checkbox/Checkbox.js

@@ -0,0 +1,17 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+const jsx_runtime_1 = require("@redneckz/uni-jsx/jsx-runtime");
+const uni_jsx_1 = require("@redneckz/uni-jsx");
+const SVG_1 = require("../SVG");
+const CHECK_PATHS = [
+    {
+        d: 'M10.207.793a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414 0l-2.5-2.5a1 1 0 0 1 1.414-1.414L3.5 6.086 8.793.793a1 1 0 0 1 1.414 0Z',
+        fillRule: 'evenodd',
+        clipRule: 'evenodd',
+        fill: 'white',
+    },
+];
+exports.Checkbox = (0, uni_jsx_1.JSX)(({ text, checked, onChange, className }) => ((0, jsx_runtime_1.jsx)("div", { className: className, children: (0, jsx_runtime_1.jsxs)("label", { className: "flex items-center cursor-pointer relative", children: [(0, jsx_runtime_1.jsx)("input", { className: `peer appearance-none w-5 h-5 border-solid border rounded border-black checked:bg-primary-main checked:border-primary-main`, type: "checkbox", onChange: (e) => {
+                    onChange(e.target.checked);
+                }, checked: checked }), (0, jsx_runtime_1.jsx)(SVG_1.SVG, { paths: CHECK_PATHS, className: "hidden absolute left-2 ml-px peer-checked:block", width: "11", height: "9", fill: "white", viewBox: "0 0 11 9" }), text ? (0, jsx_runtime_1.jsx)("span", { className: "font-sans ml-2 text-sm cursor-pointer", children: text }) : null] }) })));
+//# sourceMappingURL=Checkbox.js.map

package/dist/ui-kit/Checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/ui-kit/Checkbox/Checkbox.tsx"],"names":[],"mappings":";;;AAAA,+CAAwC;AAExC,gCAA6B;AAE7B,MAAM,WAAW,GAAG;IAClB;QACE,CAAC,EAAE,4HAA4H;QAC/H,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,SAAS;QACnB,IAAI,EAAE,OAAO;KACd;CACF,CAAC;AAEW,QAAA,QAAQ,GAAG,IAAA,aAAG,EAAgB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CACrF,gCAAK,SAAS,EAAE,SAAS,YACvB,mCAAO,SAAS,EAAC,2CAA2C,aAC1D,kCACE,SAAS,EAAE,2HAA2H,EACtI,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;oBACd,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;gBAC7B,CAAC,EACD,OAAO,EAAE,OAAO,GAChB,EACF,uBAAC,SAAG,IACF,KAAK,EAAE,WAAW,EAClB,SAAS,EAAC,iDAAiD,EAC3D,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,GAAG,EACV,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,GAClB,EACD,IAAI,CAAC,CAAC,CAAC,iCAAM,SAAS,EAAC,uCAAuC,YAAE,IAAI,GAAQ,CAAC,CAAC,CAAC,IAAI,IAC9E,GACJ,CACP,CAAC,CAAC"}

package/dist/ui-kit/Checkbox/CheckboxProps.d.ts

@@ -0,0 +1,6 @@
+export interface CheckboxProps {
+    text?: string;
+    checked: boolean;
+    onChange: (value: boolean) => void;
+    className?: string;
+}

package/dist/ui-kit/Checkbox/CheckboxProps.js

@@ -0,0 +1,2 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=CheckboxProps.js.map

package/dist/ui-kit/Checkbox/CheckboxProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxProps.js","sourceRoot":"","sources":["../../../src/ui-kit/Checkbox/CheckboxProps.ts"],"names":[],"mappings":""}

package/dist/ui-kit/InputRange/InputRange.d.ts

@@ -0,0 +1,2 @@
+import type { InputRangeProps } from './InputRangeProps';
+export declare const InputRange: (props: import("@redneckz/uni-jsx").PropsWithChildren<InputRangeProps, any>, context?: any) => any;

package/dist/ui-kit/InputRange/InputRange.js

@@ -0,0 +1,25 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputRange = void 0;
+const jsx_runtime_1 = require("@redneckz/uni-jsx/jsx-runtime");
+const uni_jsx_1 = require("@redneckz/uni-jsx");
+exports.InputRange = (0, uni_jsx_1.JSX)(({ className, title, items = [], min = 1, max = 100, step = 1, value = min, onChange }) => {
+    const handleChange = (value) => {
+        if (!onChange)
+            return;
+        const sanitizedValue = Number(value.replace(/\D/g, ''));
+        onChange(sanitizedValue);
+    };
+    const inputStyle = {
+        backgroundSize: `${(value * 100) / max - 1}% 100%`,
+    };
+    const handleBlur = () => {
+        if (!onChange)
+            return;
+        if (value < min)
+            onChange(min);
+        if (value > max)
+            onChange(max);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: className, children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [title ? ((0, jsx_runtime_1.jsx)("span", { className: "absolute text-xs text-secondary-text top-1 mt-0.5 pl-4 ml-0.5", children: title })) : null, (0, jsx_runtime_1.jsx)("input", { className: `m-0 font-sans text-sm w-full h-12 border-2 border-solid border-main-divider rounded-md outline-none p-0 pl-4 m-0 box-border text-primary-text ${title ? 'pt-4' : ''}`, value: String(value).replace(/\B(?=(\d{3})+(?!\d))/g, ' '), onChange: (e) => handleChange(e.target.value), onBlur: handleBlur }), (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-x-0 mt-0.5 top-8 px-4", children: (0, jsx_runtime_1.jsx)("input", { className: "box-border w-full m-0 cursor-pointer slider", type: "range", min: min, max: max, step: step, value: value, onChange: (e) => handleChange(e.target.value), style: inputStyle }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-between mt-3 mb-4", children: items.map((item, i) => ((0, jsx_runtime_1.jsx)("span", { className: "text-xs text-secondary-text pl-4", children: item }, String(i)))) })] }));
+});
+//# sourceMappingURL=InputRange.js.map

package/dist/ui-kit/InputRange/InputRange.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputRange.js","sourceRoot":"","sources":["../../../src/ui-kit/InputRange/InputRange.tsx"],"names":[],"mappings":";;;AAAA,+CAAwC;AAG3B,QAAA,UAAU,GAAG,IAAA,aAAG,EAC3B,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,GAAG,EAAE,EAAE,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,GAAG,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,GAAG,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE;IACxF,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE;QACrC,IAAI,CAAC,QAAQ;YAAE,OAAO;QAEtB,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC;QACxD,QAAQ,CAAC,cAAc,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG;QACjB,cAAc,EAAE,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,QAAQ;KACnD,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,CAAC,QAAQ;YAAE,OAAO;QAEtB,IAAI,KAAK,GAAG,GAAG;YAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC/B,IAAI,KAAK,GAAG,GAAG;YAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IACjC,CAAC,CAAC;IAEF,OAAO,CACL,iCAAK,SAAS,EAAE,SAAS,aACvB,iCAAK,SAAS,EAAC,UAAU,aACtB,KAAK,CAAC,CAAC,CAAC,CACP,iCAAM,SAAS,EAAC,+DAA+D,YAC5E,KAAK,GACD,CACR,CAAC,CAAC,CAAC,IAAI,EACR,kCACE,SAAS,EAAE,iJACT,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EACnB,EAAE,EACF,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,uBAAuB,EAAE,GAAG,CAAC,EAC1D,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC7C,MAAM,EAAE,UAAU,GAClB,EACF,gCAAK,SAAS,EAAC,sCAAsC,YACnD,kCACE,SAAS,EAAC,6CAA6C,EACvD,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC7C,KAAK,EAAE,UAAU,GACjB,GACE,IACF,EACN,gCAAK,SAAS,EAAC,gCAAgC,YAC5C,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CACtB,iCAAsB,SAAS,EAAC,kCAAkC,YAC/D,IAAI,IADI,MAAM,CAAC,CAAC,CAAC,CAEb,CACR,CAAC,GACE,IACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}

package/dist/ui-kit/InputRange/InputRangeProps.d.ts

@@ -0,0 +1,10 @@
+export interface InputRangeProps {
+    className?: string;
+    items?: string[];
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number;
+    title?: string;
+    onChange?: (value: number) => void;
+}

package/dist/ui-kit/InputRange/InputRangeProps.js

@@ -0,0 +1,2 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=InputRangeProps.js.map

package/dist/ui-kit/InputRange/InputRangeProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputRangeProps.js","sourceRoot":"","sources":["../../../src/ui-kit/InputRange/InputRangeProps.ts"],"names":[],"mappings":""}

package/dist/utils/clamp.d.ts

@@ -0,0 +1 @@
+export declare const clamp: (value: number, min: number, max: number) => number;

package/dist/utils/clamp.js

@@ -0,0 +1,5 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.clamp = void 0;
+const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
+exports.clamp = clamp;
+//# sourceMappingURL=clamp.js.map

package/dist/utils/clamp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clamp.js","sourceRoot":"","sources":["../../src/utils/clamp.ts"],"names":[],"mappings":";;AAAO,MAAM,KAAK,GAAG,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW,EAAE,EAAE,CAC/D,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC;AADzB,QAAA,KAAK,SACoB"}

package/lib/common.css

@@ -1 +1 @@
-@import "../fonts/ubuntu/ubuntu.css";[data-theme=pc]{--color-primary-main:66,171,68;--color-primary-hover:36,131,65;--color-primary-active:36,95,52;--color-secondary-hover:216,242,217;--color-secondary-active:197,226,198;--color-gradient-from:141,189,76;--color-gradient-to:69,172,69}[data-theme=bc]{--color-primary-main:131,184,62;--color-primary-hover:92,146,29;--color-primary-active:60,94,16;--color-secondary-hover:232,244,217;--color-secondary-active:216,227,202;--color-gradient-from:141,189,76;--color-gradient-to:69,172,69}[data-theme=eo]{--color-primary-main:221,182,61;--color-primary-hover:187,151,39;--color-primary-active:126,99,12;--color-secondary-hover:241,236,221;--color-secondary-active:229,222,199;--color-gradient-from:141,189,76;--color-gradient-to:69,172,69}[data-theme=eo2]{--color-primary-main:255,204,0;--color-primary-hover:187,151,39;--color-primary-active:126,99,12;--color-secondary-hover:241,236,221;--color-secondary-active:229,222,199;--color-gradient-from:141,189,76;--color-gradient-to:69,172,69}[data-theme=eo3]{--color-primary-main:225,186,30;--color-primary-hover:187,151,39;--color-primary-active:126,99,12;--color-secondary-hover:241,236,221;--color-secondary-active:229,222,199;--color-gradient-from:141,189,76;--color-gradient-to:69,172,69}[data-theme=eo4]{--color-primary-main:233,191,23;--color-primary-hover:187,151,39;--color-primary-active:126,99,12;--color-secondary-hover:241,236,221;--color-secondary-active:229,222,199;--color-gradient-from:141,189,76;--color-gradient-to:69,172,69}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.absolute{position:absolute}.relative{position:relative}.sticky{position:-webkit-sticky;position:sticky}.top-1{top:.25rem}.right-1{right:.25rem}.top-7{top:1.75rem}.right-7{right:1.75rem}.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.top-4{top:1rem}.right-4{right:1rem}.top-1\/2{top:50%}.left-8{left:2rem}.left-0{left:0}.-bottom-2{bottom:-.5rem}.z-10{z-index:10}.col-span-12{grid-column:span 12/span 12}.col-span-8{grid-column:span 8/span 8}.col-span-4{grid-column:span 4/span 4}.col-span-6{grid-column:span 6/span 6}.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.mx-7{margin-left:1.75rem;margin-right:1.75rem}.-mx-20{margin-left:-5rem;margin-right:-5rem}.my-4{margin-bottom:1rem;margin-top:1rem}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-3{margin-left:.75rem;margin-right:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mt-9{margin-top:2.25rem}.mt-auto{margin-top:auto}.ml-7{margin-left:1.75rem}.mt-2\.5{margin-top:.625rem}.mt-2{margin-top:.5rem}.mb-9{margin-bottom:2.25rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mr-6{margin-right:1.5rem}.ml-2{margin-left:.5rem}.mb-8{margin-bottom:2rem}.mt-3{margin-top:.75rem}.mb-6{margin-bottom:1.5rem}.mt-6{margin-top:1.5rem}.mr-8{margin-right:2rem}.ml-auto{margin-left:auto}.mr-5{margin-right:1.25rem}.mr-7{margin-right:1.75rem}.ml-4{margin-left:1rem}.mb-3\.5{margin-bottom:.875rem}.mb-3{margin-bottom:.75rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.ml-2\.5{margin-left:.625rem}.box-border{box-sizing:border-box}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-full{height:100%}.h-\[24px\]{height:24px}.h-\[70px\]{height:70px}.h-\[63px\]{height:63px}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[1px\]{height:1px}.h-\[90px\]{height:90px}.h-4{height:1rem}.h-\[50px\]{height:50px}.h-\[3px\]{height:3px}.h-0\.5{height:.125rem}.h-0{height:0}.h-\[100px\]{height:100px}.h-\[8px\]{height:8px}.h-12{height:3rem}.h-\[2px\]{height:2px}.max-h-12{max-height:3rem}.min-h-\[70px\]{min-height:70px}.min-h-\[63px\]{min-height:63px}.min-h-\[32px\]{min-height:32px}.min-h-\[90px\]{min-height:90px}.min-h-\[50px\]{min-height:50px}.min-h-\[100px\]{min-height:100px}.min-h-\[320px\]{min-height:320px}.min-h-\[8px\]{min-height:8px}.min-h-12{min-height:3rem}.w-\[24px\]{width:24px}.w-full{width:100%}.w-\[70px\]{width:70px}.w-\[1280px\]{width:1280px}.w-\[84px\]{width:84px}.w-80{width:20rem}.w-\[63px\]{width:63px}.w-\[200px\]{width:200px}.w-8{width:2rem}.w-\[280px\]{width:280px}.w-\[235px\]{width:235px}.w-9{width:2.25rem}.w-\[364px\]{width:364px}.w-\[260px\]{width:260px}.w-\[125px\]{width:125px}.w-\[90px\]{width:90px}.w-\[50px\]{width:50px}.w-\[100px\]{width:100px}.w-\[276px\]{width:276px}.w-4{width:1rem}.w-\[8px\]{width:8px}.w-12{width:3rem}.w-\[36px\]{width:36px}.w-10{width:2.5rem}.min-w-\[70px\]{min-width:70px}.min-w-\[63px\]{min-width:63px}.min-w-\[364px\]{min-width:364px}.min-w-\[260px\]{min-width:260px}.min-w-\[32px\]{min-width:32px}.min-w-\[90px\]{min-width:90px}.min-w-\[600px\]{min-width:600px}.min-w-\[50px\]{min-width:50px}.min-w-\[100px\]{min-width:100px}.min-w-\[8px\]{min-width:8px}.min-w-12{min-width:3rem}.max-w-\[170px\]{max-width:170px}.max-w-\[600px\]{max-width:600px}.max-w-\[47rem\]{max-width:47rem}.max-w-\[580px\]{max-width:580px}.max-w-\[292px\]{max-width:292px}.max-w-\[308px\]{max-width:308px}.max-w-min{max-width:-webkit-min-content;max-width:-moz-min-content;max-width:min-content}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.grow-0{flex-grow:0}.basis-full{flex-basis:100%}.basis-0{flex-basis:0px}.-translate-x-full{--tw-translate-x:-100%}.-translate-x-full,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate:180deg}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@-webkit-keyframes progress{0%{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes progress{0%{transform:translateX(-100%)}to{transform:translateX(0)}}.animate-slide{-webkit-animation:progress linear;animation:progress linear}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize{resize:both}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-3\.5{gap:.875rem}.gap-3{gap:.75rem}.gap-5{gap:1.25rem}.gap-4{gap:1rem}.gap-1{gap:.25rem}.gap-32{gap:8rem}.gap-11{gap:2.75rem}.gap-\[14px\]{gap:14px}.gap-2{gap:.5rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-24{-moz-column-gap:6rem;column-gap:6rem}.self-start{align-self:flex-start}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-t-md{border-top-left-radius:.375rem;border-top-right-radius:.375rem}.rounded-b-md{border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem}.rounded-tl-lg{border-top-left-radius:.5rem}.rounded-bl-3xl{border-bottom-left-radius:1.5rem}.rounded-br-3xl{border-bottom-right-radius:1.5rem}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-y-0{border-bottom-width:0;border-top-width:0}.border-x-0{border-left-width:0;border-right-width:0}.border-y{border-bottom-width:1px;border-top-width:1px}.border-b-0{border-bottom-width:0}.border-t-0{border-top-width:0}.border-t{border-top-width:1px}.border-r{border-right-width:1px}.border-solid{border-style:solid}.border-none{border-style:none}.border-main-divider{--tw-border-opacity:1;border-color:rgba(235,237,240,var(--tw-border-opacity))}.border-main-stroke{--tw-border-opacity:1;border-color:rgba(201,202,204,var(--tw-border-opacity))}.border-main{--tw-border-opacity:1;border-color:rgba(240,244,240,var(--tw-border-opacity))}.border-primary-main{--tw-border-opacity:1;border-color:rgba(var(--color-primary-main),var(--tw-border-opacity))}.border-transparent{border-color:transparent}.border-y-main-divider{--tw-border-opacity:1;border-bottom-color:rgba(235,237,240,var(--tw-border-opacity));border-top-color:rgba(235,237,240,var(--tw-border-opacity))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-main{--tw-bg-opacity:1;background-color:rgba(240,244,240,var(--tw-bg-opacity))}.bg-secondary-text{--tw-bg-opacity:1;background-color:rgba(125,126,127,var(--tw-bg-opacity))}.bg-secondary-light{--tw-bg-opacity:1;background-color:rgba(245,247,249,var(--tw-bg-opacity))}.bg-main-divider{--tw-bg-opacity:1;background-color:rgba(235,237,240,var(--tw-bg-opacity))}.bg-inherit{background-color:inherit}.bg-primary-main{--tw-bg-opacity:1;background-color:rgba(var(--color-primary-main),var(--tw-bg-opacity))}.bg-primary-main\/10{background-color:rgba(var(--color-primary-main),.1)}.bg-secondary-dark{--tw-bg-opacity:1;background-color:rgba(226,228,229,var(--tw-bg-opacity))}.bg-opacity-to-white{background-image:linear-gradient(270deg,#fff 34.89%,hsla(0,0%,100%,0) 92.52%);}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-main-gradient-start{--tw-gradient-from:rgba(var(--color-gradient-from),1);--tw-gradient-to:rgba(var(--color-gradient-from),0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-main-gradient-end{--tw-gradient-to:rgba(var(--color-gradient-to),1)}.p-12{padding:3rem}.p-10{padding:2.5rem}.p-20{padding:5rem}.p-4{padding:1rem}.p-7{padding:1.75rem}.p-0{padding:0}.p-2{padding:.5rem}.p-\[10px\]{padding:10px}.p-\[26px\]{padding:26px}.p-9{padding:2.25rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-\[50px\]{padding-bottom:50px;padding-top:50px}.py-\[11px\]{padding-bottom:11px;padding-top:11px}.px-7{padding-left:1.75rem;padding-right:1.75rem}.py-7{padding-bottom:1.75rem;padding-top:1.75rem}.px-9{padding-left:2.25rem;padding-right:2.25rem}.py-10{padding-bottom:2.5rem;padding-top:2.5rem}.py-5{padding-bottom:1.25rem;padding-top:1.25rem}.px-20{padding-left:5rem;padding-right:5rem}.px-0{padding-left:0;padding-right:0}.py-4{padding-bottom:1rem;padding-top:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-12{padding-left:3rem;padding-right:3rem}.py-12{padding-bottom:3rem;padding-top:3rem}.px-\[88px\]{padding-left:88px;padding-right:88px}.px-3{padding-left:.75rem;padding-right:.75rem}.py-0\.5{padding-bottom:.125rem;padding-top:.125rem}.py-0{padding-bottom:0;padding-top:0}.px-8{padding-left:2rem;padding-right:2rem}.py-\[13px\]{padding-bottom:13px;padding-top:13px}.px-4{padding-right:1rem}.pl-4,.px-4{padding-left:1rem}.pl-12{padding-left:3rem}.pr-\[6\%\]{padding-right:6%}.pb-2{padding-bottom:.5rem}.pl-\[50px\]{padding-left:50px}.pr-\[50px\]{padding-right:50px}.pt-7{padding-top:1.75rem}.pb-12{padding-bottom:3rem}.pt-6{padding-top:1.5rem}.pt-0{padding-top:0}.pl-11{padding-left:2.75rem}.pt-4{padding-top:1rem}.pb-8{padding-bottom:2rem}.pt-\[3px\]{padding-top:3px}.pt-\[30px\]{padding-top:30px}.pb-7{padding-bottom:1.75rem}.pt-5{padding-top:1.25rem}.pb-\[5px\]{padding-bottom:5px}.pt-\[5px\]{padding-top:5px}.pt-10{padding-top:2.5rem}.pb-\[50px\]{padding-bottom:50px}.pr-\[7\.5rem\]{padding-right:7.5rem}.pl-2\.5{padding-left:.625rem}.pt-2\.5{padding-top:.625rem}.pb-1\.5{padding-bottom:.375rem}.pr-\[6\.25rem\]{padding-right:6.25rem}.pl-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-1{padding-bottom:.25rem}.pt-1{padding-top:.25rem}.pt-1\.5{padding-top:.375rem}.pr-4{padding-right:1rem}.pt-0\.5{padding-top:.125rem}.pr-3{padding-right:.75rem}.pr-28{padding-right:7rem}.pr-9{padding-right:2.25rem}.pr-\[4\.75rem\]{padding-right:4.75rem}.pr-\[9\.4rem\]{padding-right:9.4rem}.text-left{text-align:left}.text-center{text-align:center}.font-sans{font-family:Ubuntu,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:.875rem;line-height:1.375rem}.text-title{font-size:2rem;line-height:2.5rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1.125rem}.text-title-sm{font-size:1.75rem;line-height:2.5rem}.text-xxs{font-size:.625rem;line-height:.625rem}.text-title-lg{font-size:2.5rem;line-height:3rem}.text-title-xs{font-size:1.5rem;line-height:1.875rem}.font-normal{font-weight:400}.font-medium{font-weight:500}.text-secondary-text{--tw-text-opacity:1;color:rgba(125,126,127,var(--tw-text-opacity))}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-primary-main{--tw-text-opacity:1;color:rgba(var(--color-primary-main),var(--tw-text-opacity))}.text-primary-text{--tw-text-opacity:1;color:rgba(28,28,28,var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-secondary-light{--tw-text-opacity:1;color:rgba(245,247,249,var(--tw-text-opacity))}.no-underline{-webkit-text-decoration-line:none;text-decoration-line:none}.opacity-80{opacity:.8}.shadow-\[0_8px_32px_0px_\#00000014\]{--tw-shadow:0 8px 32px 0px #00000014;--tw-shadow-colored:0 8px 32px 0px var(--tw-shadow-color)}.shadow-\[0_4px_25px_rgba\(0\2c 0\2c 0\2c 0\.07\)\],.shadow-\[0_8px_32px_0px_\#00000014\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_4px_25px_rgba\(0\2c 0\2c 0\2c 0\.07\)\]{--tw-shadow:0 4px 25px rgba(0,0,0,.07);--tw-shadow-colored:0 4px 25px var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.duration-1000{transition-duration:1s}.rotate-180{transform:rotate(180deg)}.-translate-x-full{transform:translateX(-100%)}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.horizontal-list{-webkit-overflow-scrolling:touch;display:flex;overflow-x:scroll;overscroll-behavior:contain;scroll-snap-type:x mandatory;touch-action:pan-x}.horizontal-list-item{flex-shrink:0;scroll-snap-align:start;scroll-snap-stop:always;width:100%}.first\:pt-7:first-child{padding-top:1.75rem}.last\:pb-7:last-child{padding-bottom:1.75rem}.visited\:text-secondary-text:visited{color:rgba(125,126,127,var(--tw-text-opacity))}.hover\:border-primary-main:hover{--tw-border-opacity:1;border-color:rgba(var(--color-primary-main),var(--tw-border-opacity))}.hover\:bg-primary-hover:hover{--tw-bg-opacity:1;background-color:rgba(var(--color-primary-hover),var(--tw-bg-opacity))}.hover\:bg-secondary-hover:hover{--tw-bg-opacity:1;background-color:rgba(var(--color-secondary-hover),var(--tw-bg-opacity))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.hover\:text-primary-main:hover{--tw-text-opacity:1;color:rgba(var(--color-primary-main),var(--tw-text-opacity))}.hover\:text-primary-text:hover{--tw-text-opacity:1;color:rgba(28,28,28,var(--tw-text-opacity))}.hover\:text-secondary-active:hover{--tw-text-opacity:1;color:rgba(var(--color-secondary-active),var(--tw-text-opacity))}.active\:bg-primary-active:active{--tw-bg-opacity:1;background-color:rgba(var(--color-primary-active),var(--tw-bg-opacity))}.active\:bg-secondary-active:active{--tw-bg-opacity:1;background-color:rgba(var(--color-secondary-active),var(--tw-bg-opacity))}.group:hover .group-hover\:text-primary-text{--tw-text-opacity:1;color:rgba(28,28,28,var(--tw-text-opacity))}@media (min-width:1280px) and (max-width:1535px){.xl\:w-\[220px\]{width:220px}.xl\:gap-8{gap:2rem}.xl\:gap-5{gap:1.25rem}}
+@import "../fonts/ubuntu/ubuntu.css";[data-theme=pc]{--color-primary-main:66,171,68;--color-primary-hover:36,131,65;--color-primary-active:36,95,52;--color-secondary-hover:216,242,217;--color-secondary-active:197,226,198;--color-gradient-from:141,189,76;--color-gradient-to:69,172,69}[data-theme=bc]{--color-primary-main:131,184,62;--color-primary-hover:92,146,29;--color-primary-active:60,94,16;--color-secondary-hover:232,244,217;--color-secondary-active:216,227,202;--color-gradient-from:141,189,76;--color-gradient-to:69,172,69}[data-theme=eo]{--color-primary-main:221,182,61;--color-primary-hover:187,151,39;--color-primary-active:126,99,12;--color-secondary-hover:241,236,221;--color-secondary-active:229,222,199;--color-gradient-from:141,189,76;--color-gradient-to:69,172,69}[data-theme=eo2]{--color-primary-main:255,204,0;--color-primary-hover:187,151,39;--color-primary-active:126,99,12;--color-secondary-hover:241,236,221;--color-secondary-active:229,222,199;--color-gradient-from:141,189,76;--color-gradient-to:69,172,69}[data-theme=eo3]{--color-primary-main:225,186,30;--color-primary-hover:187,151,39;--color-primary-active:126,99,12;--color-secondary-hover:241,236,221;--color-secondary-active:229,222,199;--color-gradient-from:141,189,76;--color-gradient-to:69,172,69}[data-theme=eo4]{--color-primary-main:233,191,23;--color-primary-hover:187,151,39;--color-primary-active:126,99,12;--color-secondary-hover:241,236,221;--color-secondary-active:229,222,199;--color-gradient-from:141,189,76;--color-gradient-to:69,172,69}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.absolute{position:absolute}.relative{position:relative}.sticky{position:-webkit-sticky;position:sticky}.inset-x-0{left:0;right:0}.top-1{top:.25rem}.right-1{right:.25rem}.top-7{top:1.75rem}.right-7{right:1.75rem}.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.top-4{top:1rem}.right-4{right:1rem}.top-1\/2{top:50%}.left-8{left:2rem}.left-0{left:0}.left-2{left:.5rem}.-bottom-2{bottom:-.5rem}.top-8{top:2rem}.z-10{z-index:10}.col-span-12{grid-column:span 12/span 12}.col-span-8{grid-column:span 8/span 8}.col-span-4{grid-column:span 4/span 4}.col-span-6{grid-column:span 6/span 6}.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.mx-7{margin-left:1.75rem;margin-right:1.75rem}.-mx-20{margin-left:-5rem;margin-right:-5rem}.my-4{margin-bottom:1rem;margin-top:1rem}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-3{margin-left:.75rem;margin-right:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mt-9{margin-top:2.25rem}.mt-auto{margin-top:auto}.ml-7{margin-left:1.75rem}.mt-2\.5{margin-top:.625rem}.mt-2{margin-top:.5rem}.mb-9{margin-bottom:2.25rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mr-6{margin-right:1.5rem}.mr-11{margin-right:2.75rem}.mb-7{margin-bottom:1.75rem}.mb-3{margin-bottom:.75rem}.mr-3{margin-right:.75rem}.mr-2{margin-right:.5rem}.ml-2{margin-left:.5rem}.mb-8{margin-bottom:2rem}.mt-3{margin-top:.75rem}.mb-6{margin-bottom:1.5rem}.mt-6{margin-top:1.5rem}.mr-8{margin-right:2rem}.ml-auto{margin-left:auto}.mr-5{margin-right:1.25rem}.mr-7{margin-right:1.75rem}.ml-4{margin-left:1rem}.mb-3\.5{margin-bottom:.875rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.ml-px{margin-left:1px}.mt-0\.5{margin-top:.125rem}.ml-0\.5{margin-left:.125rem}.mt-0{margin-top:0}.ml-0{margin-left:0}.ml-2\.5{margin-left:.625rem}.box-border{box-sizing:border-box}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-full{height:100%}.h-\[24px\]{height:24px}.h-\[70px\]{height:70px}.h-\[63px\]{height:63px}.h-8{height:2rem}.h-10{height:2.5rem}.h-9{height:2.25rem}.h-\[1px\]{height:1px}.h-\[90px\]{height:90px}.h-4{height:1rem}.h-\[50px\]{height:50px}.h-\[3px\]{height:3px}.h-0\.5{height:.125rem}.h-0{height:0}.h-\[100px\]{height:100px}.h-\[8px\]{height:8px}.h-12{height:3rem}.h-5{height:1.25rem}.h-\[2px\]{height:2px}.max-h-12{max-height:3rem}.min-h-\[70px\]{min-height:70px}.min-h-\[63px\]{min-height:63px}.min-h-\[32px\]{min-height:32px}.min-h-\[90px\]{min-height:90px}.min-h-\[50px\]{min-height:50px}.min-h-\[100px\]{min-height:100px}.min-h-\[320px\]{min-height:320px}.min-h-\[8px\]{min-height:8px}.min-h-12{min-height:3rem}.w-\[24px\]{width:24px}.w-full{width:100%}.w-\[70px\]{width:70px}.w-\[1280px\]{width:1280px}.w-\[84px\]{width:84px}.w-80{width:20rem}.w-\[63px\]{width:63px}.w-\[200px\]{width:200px}.w-8{width:2rem}.w-\[75px\]{width:75px}.w-\[280px\]{width:280px}.w-\[235px\]{width:235px}.w-9{width:2.25rem}.w-\[364px\]{width:364px}.w-\[260px\]{width:260px}.w-\[125px\]{width:125px}.w-\[90px\]{width:90px}.w-\[50px\]{width:50px}.w-\[100px\]{width:100px}.w-\[276px\]{width:276px}.w-4{width:1rem}.w-\[8px\]{width:8px}.w-12{width:3rem}.w-\[36px\]{width:36px}.w-5{width:1.25rem}.w-10{width:2.5rem}.min-w-\[70px\]{min-width:70px}.min-w-\[63px\]{min-width:63px}.min-w-\[364px\]{min-width:364px}.min-w-\[260px\]{min-width:260px}.min-w-\[32px\]{min-width:32px}.min-w-\[90px\]{min-width:90px}.min-w-\[600px\]{min-width:600px}.min-w-\[50px\]{min-width:50px}.min-w-\[100px\]{min-width:100px}.min-w-\[8px\]{min-width:8px}.min-w-12{min-width:3rem}.max-w-\[170px\]{max-width:170px}.max-w-\[600px\]{max-width:600px}.max-w-\[47rem\]{max-width:47rem}.max-w-\[580px\]{max-width:580px}.max-w-\[292px\]{max-width:292px}.max-w-\[308px\]{max-width:308px}.max-w-min{max-width:-webkit-min-content;max-width:-moz-min-content;max-width:min-content}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.grow-0{flex-grow:0}.basis-full{flex-basis:100%}.basis-0{flex-basis:0px}.-translate-x-full{--tw-translate-x:-100%}.-translate-x-full,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate:180deg}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@-webkit-keyframes progress{0%{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes progress{0%{transform:translateX(-100%)}to{transform:translateX(0)}}.animate-slide{-webkit-animation:progress linear;animation:progress linear}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize{resize:both}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-3\.5{gap:.875rem}.gap-3{gap:.75rem}.gap-5{gap:1.25rem}.gap-4{gap:1rem}.gap-1{gap:.25rem}.gap-32{gap:8rem}.gap-11{gap:2.75rem}.gap-\[14px\]{gap:14px}.gap-2{gap:.5rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-24{-moz-column-gap:6rem;column-gap:6rem}.self-start{align-self:flex-start}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-3xl{border-radius:1.5rem}.rounded-t-md{border-top-left-radius:.375rem;border-top-right-radius:.375rem}.rounded-b-md{border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem}.rounded-tl-lg{border-top-left-radius:.5rem}.rounded-bl-3xl{border-bottom-left-radius:1.5rem}.rounded-br-3xl{border-bottom-right-radius:1.5rem}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-y-0{border-bottom-width:0;border-top-width:0}.border-x-0{border-left-width:0;border-right-width:0}.border-y{border-bottom-width:1px;border-top-width:1px}.border-b-0{border-bottom-width:0}.border-t-0{border-top-width:0}.border-t{border-top-width:1px}.border-r{border-right-width:1px}.border-solid{border-style:solid}.border-none{border-style:none}.border-main-divider{--tw-border-opacity:1;border-color:rgba(235,237,240,var(--tw-border-opacity))}.border-main-stroke{--tw-border-opacity:1;border-color:rgba(201,202,204,var(--tw-border-opacity))}.border-primary-main{--tw-border-opacity:1;border-color:rgba(var(--color-primary-main),var(--tw-border-opacity))}.border-main{--tw-border-opacity:1;border-color:rgba(240,244,240,var(--tw-border-opacity))}.border-black{--tw-border-opacity:1;border-color:rgb(0 0 0/var(--tw-border-opacity))}.border-transparent{border-color:transparent}.border-y-main-divider{--tw-border-opacity:1;border-bottom-color:rgba(235,237,240,var(--tw-border-opacity));border-top-color:rgba(235,237,240,var(--tw-border-opacity))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-main{--tw-bg-opacity:1;background-color:rgba(240,244,240,var(--tw-bg-opacity))}.bg-secondary-text{--tw-bg-opacity:1;background-color:rgba(125,126,127,var(--tw-bg-opacity))}.bg-secondary-light{--tw-bg-opacity:1;background-color:rgba(245,247,249,var(--tw-bg-opacity))}.bg-primary-main{--tw-bg-opacity:1;background-color:rgba(var(--color-primary-main),var(--tw-bg-opacity))}.bg-main-divider{--tw-bg-opacity:1;background-color:rgba(235,237,240,var(--tw-bg-opacity))}.bg-inherit{background-color:inherit}.bg-primary-main\/10{background-color:rgba(var(--color-primary-main),.1)}.bg-secondary-dark{--tw-bg-opacity:1;background-color:rgba(226,228,229,var(--tw-bg-opacity))}.bg-opacity-to-white{background-image:linear-gradient(270deg,#fff 34.89%,hsla(0,0%,100%,0) 92.52%);}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-main-gradient-start{--tw-gradient-from:rgba(var(--color-gradient-from),1);--tw-gradient-to:rgba(var(--color-gradient-from),0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-main-gradient-end{--tw-gradient-to:rgba(var(--color-gradient-to),1)}.p-12{padding:3rem}.p-10{padding:2.5rem}.p-20{padding:5rem}.p-4{padding:1rem}.p-9{padding:2.25rem}.p-7{padding:1.75rem}.p-0{padding:0}.p-2{padding:.5rem}.p-\[10px\]{padding:10px}.p-\[26px\]{padding:26px}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-\[50px\]{padding-bottom:50px;padding-top:50px}.py-\[11px\]{padding-bottom:11px;padding-top:11px}.px-7{padding-left:1.75rem;padding-right:1.75rem}.py-7{padding-bottom:1.75rem;padding-top:1.75rem}.px-9{padding-left:2.25rem;padding-right:2.25rem}.py-10{padding-bottom:2.5rem;padding-top:2.5rem}.py-5{padding-bottom:1.25rem;padding-top:1.25rem}.px-20{padding-left:5rem;padding-right:5rem}.px-0{padding-left:0;padding-right:0}.py-4{padding-bottom:1rem;padding-top:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-12{padding-left:3rem;padding-right:3rem}.py-12{padding-bottom:3rem;padding-top:3rem}.px-\[88px\]{padding-left:88px;padding-right:88px}.px-3{padding-left:.75rem;padding-right:.75rem}.py-0\.5{padding-bottom:.125rem;padding-top:.125rem}.py-0{padding-bottom:0;padding-top:0}.px-8{padding-left:2rem;padding-right:2rem}.py-\[13px\]{padding-bottom:13px;padding-top:13px}.px-4{padding-right:1rem}.pl-4,.px-4{padding-left:1rem}.pl-12{padding-left:3rem}.pr-\[6\%\]{padding-right:6%}.pb-2{padding-bottom:.5rem}.pl-\[50px\]{padding-left:50px}.pr-\[50px\]{padding-right:50px}.pt-7{padding-top:1.75rem}.pb-12{padding-bottom:3rem}.pt-6{padding-top:1.5rem}.pt-0{padding-top:0}.pl-11{padding-left:2.75rem}.pt-4{padding-top:1rem}.pb-8{padding-bottom:2rem}.pt-\[3px\]{padding-top:3px}.pt-\[30px\]{padding-top:30px}.pb-7{padding-bottom:1.75rem}.pt-5{padding-top:1.25rem}.pb-\[5px\]{padding-bottom:5px}.pt-\[5px\]{padding-top:5px}.pt-10{padding-top:2.5rem}.pb-\[50px\]{padding-bottom:50px}.pr-\[7\.5rem\]{padding-right:7.5rem}.pl-2\.5{padding-left:.625rem}.pt-2\.5{padding-top:.625rem}.pb-1\.5{padding-bottom:.375rem}.pr-\[6\.25rem\]{padding-right:6.25rem}.pl-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-1{padding-bottom:.25rem}.pt-1{padding-top:.25rem}.pt-1\.5{padding-top:.375rem}.pr-4{padding-right:1rem}.pt-0\.5{padding-top:.125rem}.pr-3{padding-right:.75rem}.pr-28{padding-right:7rem}.pr-9{padding-right:2.25rem}.pr-\[4\.75rem\]{padding-right:4.75rem}.pr-\[9\.4rem\]{padding-right:9.4rem}.text-left{text-align:left}.text-center{text-align:center}.font-sans{font-family:Ubuntu,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:.875rem;line-height:1.375rem}.text-title{font-size:2rem;line-height:2.5rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1.125rem}.text-lg{font-size:2.188rem;line-height:3rem}.text-xxs{font-size:.625rem;line-height:.625rem}.text-title-sm{font-size:1.75rem;line-height:2.5rem}.text-title-lg{font-size:2.5rem;line-height:3rem}.text-title-xs{font-size:1.5rem;line-height:1.875rem}.font-normal{font-weight:400}.font-medium{font-weight:500}.leading-4{line-height:1rem}.text-secondary-text{--tw-text-opacity:1;color:rgba(125,126,127,var(--tw-text-opacity))}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-primary-main{--tw-text-opacity:1;color:rgba(var(--color-primary-main),var(--tw-text-opacity))}.text-primary-text{--tw-text-opacity:1;color:rgba(28,28,28,var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-secondary-light{--tw-text-opacity:1;color:rgba(245,247,249,var(--tw-text-opacity))}.no-underline{-webkit-text-decoration-line:none;text-decoration-line:none}.opacity-80{opacity:.8}.opacity-60{opacity:.6}.shadow-\[0_8px_32px_0px_\#00000014\]{--tw-shadow:0 8px 32px 0px #00000014;--tw-shadow-colored:0 8px 32px 0px var(--tw-shadow-color)}.shadow-\[0_4px_25px_rgba\(0\2c 0\2c 0\2c 0\.07\)\],.shadow-\[0_8px_32px_0px_\#00000014\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_4px_25px_rgba\(0\2c 0\2c 0\2c 0\.07\)\]{--tw-shadow:0 4px 25px rgba(0,0,0,.07);--tw-shadow-colored:0 4px 25px var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.duration-1000{transition-duration:1s}.rotate-180{transform:rotate(180deg)}.-translate-x-full{transform:translateX(-100%)}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.horizontal-list{-webkit-overflow-scrolling:touch;display:flex;overflow-x:scroll;overscroll-behavior:contain;scroll-snap-type:x mandatory;touch-action:pan-x}.horizontal-list-item{flex-shrink:0;scroll-snap-align:start;scroll-snap-stop:always;width:100%}input[type=range].slider{-webkit-appearance:none;background:transparent;background-image:linear-gradient(#42ab44,#42ab44);background-repeat:no-repeat;border-radius:5px;height:4px}input[type=range].slider::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;border:3px solid #42ab44;border-radius:50%;box-shadow:none;cursor:pointer;height:18px;width:18px}input[type=range].slider::-moz-range-thumb{background:#fff;border:3px solid #42ab44;border-radius:50%;box-shadow:none;cursor:pointer;height:12px;width:12px}input[type=range].slider::-ms-thumb{background:#fff;border:3px solid #42ab44;border-radius:50%;box-shadow:none;cursor:pointer;height:18px;width:18px}.first\:pt-7:first-child{padding-top:1.75rem}.last\:pb-7:last-child{padding-bottom:1.75rem}.visited\:text-secondary-text:visited{color:rgba(125,126,127,var(--tw-text-opacity))}.checked\:border-primary-main:checked{--tw-border-opacity:1;border-color:rgba(var(--color-primary-main),var(--tw-border-opacity))}.checked\:bg-primary-main:checked{--tw-bg-opacity:1;background-color:rgba(var(--color-primary-main),var(--tw-bg-opacity))}.hover\:border-primary-main:hover{--tw-border-opacity:1;border-color:rgba(var(--color-primary-main),var(--tw-border-opacity))}.hover\:bg-primary-hover:hover{--tw-bg-opacity:1;background-color:rgba(var(--color-primary-hover),var(--tw-bg-opacity))}.hover\:bg-secondary-hover:hover{--tw-bg-opacity:1;background-color:rgba(var(--color-secondary-hover),var(--tw-bg-opacity))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.hover\:text-primary-main:hover{--tw-text-opacity:1;color:rgba(var(--color-primary-main),var(--tw-text-opacity))}.hover\:text-primary-text:hover{--tw-text-opacity:1;color:rgba(28,28,28,var(--tw-text-opacity))}.hover\:text-secondary-active:hover{--tw-text-opacity:1;color:rgba(var(--color-secondary-active),var(--tw-text-opacity))}.active\:bg-primary-active:active{--tw-bg-opacity:1;background-color:rgba(var(--color-primary-active),var(--tw-bg-opacity))}.active\:bg-secondary-active:active{--tw-bg-opacity:1;background-color:rgba(var(--color-secondary-active),var(--tw-bg-opacity))}.group:hover .group-hover\:text-primary-text{--tw-text-opacity:1;color:rgba(28,28,28,var(--tw-text-opacity))}.peer:checked~.peer-checked\:block{display:block}@media (min-width:1280px) and (max-width:1535px){.xl\:w-\[220px\]{width:220px}.xl\:gap-8{gap:2rem}.xl\:gap-5{gap:1.25rem}}

package/lib/components/CreditCalculator/CreditCalculator.d.ts

@@ -0,0 +1,4 @@
+import { UniBlockProps } from '../../types';
+export interface CreditCalculatorProps extends UniBlockProps {
+}
+export declare const CreditCalculator: (props: import("@redneckz/uni-jsx").PropsWithChildren<CreditCalculatorProps, any>, context?: any) => any;

package/lib/components/CreditCalculator/CreditCalculator.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
+import { JSX } from '@redneckz/uni-jsx';
+import { Button } from '../../ui-kit/Button/Button.js';
+import { Checkbox } from '../../ui-kit/Checkbox/Checkbox.js';
+import { InputRange } from '../../ui-kit/InputRange/InputRange.js';
+import { clamp } from '../../utils/clamp.js';
+const borderStyle = 'border-solid border-3 border-primary-main rounded-md';
+const MIN_MONEY = 50000;
+const MAX_MONEY = 3000000;
+const STEP_MONEY = 1000;
+const CREDIT_TERM_YEARS = [2, 3, 4, 5, 6, 7];
+const MIN_MONTHS = 1;
+const MAX_MONTHS = 84;
+const STEP_MONTHS = 1;
+const MONTHS_IN_YEAR = 12;
+export const CreditCalculator = JSX(({ context, className }) => {
+    const [moneyValue, setMoneyValue] = context.useState(350000);
+    const [monthsValue, setMonthsValue] = context.useState(12);
+    const [isAnnuityChecked, setIsAnnuityChecked] = context.useState(true);
+    const [isInsuranceChecked, setIsInsuranceChecked] = context.useState(true);
+    const handleButtonClick = (value) => {
+        setMonthsValue(clamp(value * MONTHS_IN_YEAR, MIN_MONTHS, MAX_MONTHS));
+    };
+    return (_jsx("section", { className: `font-sans text-primary-text bg-white p-4 ${className}`, children: _jsxs("div", { className: `box-border p-12 flex flex-col justify-between ${borderStyle}`, children: [_jsxs("div", { className: "flex justify-between", children: [_jsxs("div", { className: "grow mr-11", children: [_jsx(InputRange, { title: "\u0416\u0435\u043B\u0430\u0435\u043C\u0430\u044F \u0441\u0443\u043C\u043C\u0430 \u043A\u0440\u0435\u0434\u0438\u0442\u0430, \u20BD", items: ['От 50 000 рублей', 'До 3 000 000 рублей'], min: MIN_MONEY, max: MAX_MONEY, step: STEP_MONEY, value: moneyValue, onChange: setMoneyValue }), _jsx(InputRange, { title: "\u0421\u0440\u043E\u043A \u043A\u0440\u0435\u0434\u0438\u0442\u0430, \u043C\u0435\u0441\u044F\u0446\u0435\u0432", items: ['Или выберите из предложенных вариантов ниже'], min: MIN_MONTHS, max: MAX_MONTHS, step: STEP_MONTHS, value: monthsValue, onChange: setMonthsValue }), _jsx("div", { className: "flex mb-7", children: CREDIT_TERM_YEARS.map((number, i) => renderButton(number, i, handleButtonClick)) }), _jsx(Checkbox, { text: "\u041F\u043E\u043B\u0443\u0447\u0430\u044E \u043F\u0435\u043D\u0441\u0438\u044E \u043D\u0430 \u043A\u0430\u0440\u0442\u0443 \u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u0430", checked: isAnnuityChecked, onChange: setIsAnnuityChecked }), _jsx(Checkbox, { className: "mb-4", text: "\u041A\u043E\u043C\u043F\u043B\u0435\u043A\u0441\u043D\u0430\u044F \u0441\u0442\u0440\u0430\u0445\u043E\u0432\u0430\u044F \u0437\u0430\u0449\u0438\u0442\u0430", checked: isInsuranceChecked, onChange: setIsInsuranceChecked })] }), _jsxs("div", { className: "p-9 bg-primary-main rounded-md text-white", children: [_jsx("div", { className: "text-base mb-5", children: "\u041D\u0430\u0448\u0435 \u043F\u0440\u0435\u0434\u043B\u043E\u0436\u0435\u043D\u0438\u0435" }), _jsx("div", { className: "text-sm opacity-60", children: "\u0415\u0436\u0435\u043C\u0435\u0441\u044F\u0447\u043D\u044B\u0439 \u043F\u043B\u0430\u0442\u0451\u0436" }), _jsx("div", { className: "text-lg mb-3", children: "26 827 \u20BD" }), _jsx("div", { className: "text-sm opacity-60", children: "\u0421\u0442\u0430\u0432\u043A\u0430" }), _jsx("div", { className: "text-lg", children: "16,9 %" })] })] }), _jsxs("div", { className: "flex items-center", children: [_jsx(Button, { className: "mr-3", text: "\u041E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C \u0437\u0430\u044F\u0432\u043A\u0443", version: "primary", href: "#" }), _jsx("div", { className: "w-80 text-xxs leading-4 text-secondary-text", "aria-label": "\u0421\u043E\u0433\u043B\u0430\u0448\u0435\u043D\u0438\u0435 \u043D\u0430 \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0443 \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445", children: "\u041E\u0442\u043F\u0440\u0430\u0432\u043B\u044F\u044F \u0437\u0430\u044F\u0432\u043A\u0443, \u0432\u044B \u0441\u043E\u0433\u043B\u0430\u0448\u0430\u0435\u0442\u0435\u0441\u044C \u043D\u0430 \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0443 \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445 \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043D\u043D\u043E \u0442\u0440\u0435\u0431\u043E\u0432\u0430\u043D\u0438\u044F\u043C \u0424\u0417\u00A0\u00AB\u041E\u00A0\u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445\u00BB" })] })] }) }));
+});
+const renderButton = (number, i, handleClick) => (_jsx("div", { className: "bg-secondary-light rounded-3xl h-10 w-[75px] box-border mr-2 flex items-center justify-center cursor-pointer", role: "button", onClick: () => handleClick(number), children: _jsxs("span", { className: "font-medium text-sm", children: [number, " ", number > 4 ? 'лет' : 'года'] }) }, String(i)));
+//# sourceMappingURL=CreditCalculator.js.map

package/lib/components/CreditCalculator/CreditCalculator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreditCalculator.js","sourceRoot":"","sources":["../../../src/components/CreditCalculator/CreditCalculator.tsx"],"names":[],"mappings":"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"}

package/lib/ui-kit/Checkbox/Checkbox.d.ts

@@ -0,0 +1,2 @@
+import type { CheckboxProps } from './CheckboxProps';
+export declare const Checkbox: (props: import("@redneckz/uni-jsx").PropsWithChildren<CheckboxProps, any>, context?: any) => any;

package/lib/ui-kit/Checkbox/Checkbox.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
+import { JSX } from '@redneckz/uni-jsx';
+import { SVG } from '../SVG.js';
+const CHECK_PATHS = [
+    {
+        d: 'M10.207.793a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414 0l-2.5-2.5a1 1 0 0 1 1.414-1.414L3.5 6.086 8.793.793a1 1 0 0 1 1.414 0Z',
+        fillRule: 'evenodd',
+        clipRule: 'evenodd',
+        fill: 'white',
+    },
+];
+export const Checkbox = JSX(({ text, checked, onChange, className }) => (_jsx("div", { className: className, children: _jsxs("label", { className: "flex items-center cursor-pointer relative", children: [_jsx("input", { className: `peer appearance-none w-5 h-5 border-solid border rounded border-black checked:bg-primary-main checked:border-primary-main`, type: "checkbox", onChange: (e) => {
+                    onChange(e.target.checked);
+                }, checked: checked }), _jsx(SVG, { paths: CHECK_PATHS, className: "hidden absolute left-2 ml-px peer-checked:block", width: "11", height: "9", fill: "white", viewBox: "0 0 11 9" }), text ? _jsx("span", { className: "font-sans ml-2 text-sm cursor-pointer", children: text }) : null] }) })));
+//# sourceMappingURL=Checkbox.js.map

package/lib/ui-kit/Checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/ui-kit/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAExC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAE7B,MAAM,WAAW,GAAG;IAClB;QACE,CAAC,EAAE,4HAA4H;QAC/H,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,SAAS;QACnB,IAAI,EAAE,OAAO;KACd;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,CAAgB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CACrF,cAAK,SAAS,EAAE,SAAS,YACvB,iBAAO,SAAS,EAAC,2CAA2C,aAC1D,gBACE,SAAS,EAAE,2HAA2H,EACtI,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;oBACd,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;gBAC7B,CAAC,EACD,OAAO,EAAE,OAAO,GAChB,EACF,KAAC,GAAG,IACF,KAAK,EAAE,WAAW,EAClB,SAAS,EAAC,iDAAiD,EAC3D,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,GAAG,EACV,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,GAClB,EACD,IAAI,CAAC,CAAC,CAAC,eAAM,SAAS,EAAC,uCAAuC,YAAE,IAAI,GAAQ,CAAC,CAAC,CAAC,IAAI,IAC9E,GACJ,CACP,CAAC,CAAC"}

package/lib/ui-kit/Checkbox/CheckboxProps.d.ts

@@ -0,0 +1,6 @@
+export interface CheckboxProps {
+    text?: string;
+    checked: boolean;
+    onChange: (value: boolean) => void;
+    className?: string;
+}

package/lib/ui-kit/Checkbox/CheckboxProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=CheckboxProps.js.map

package/lib/ui-kit/Checkbox/CheckboxProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxProps.js","sourceRoot":"","sources":["../../../src/ui-kit/Checkbox/CheckboxProps.ts"],"names":[],"mappings":""}

package/lib/ui-kit/InputRange/InputRange.d.ts

@@ -0,0 +1,2 @@
+import type { InputRangeProps } from './InputRangeProps';
+export declare const InputRange: (props: import("@redneckz/uni-jsx").PropsWithChildren<InputRangeProps, any>, context?: any) => any;

package/lib/ui-kit/InputRange/InputRange.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
+import { JSX } from '@redneckz/uni-jsx';
+export const InputRange = JSX(({ className, title, items = [], min = 1, max = 100, step = 1, value = min, onChange }) => {
+    const handleChange = (value) => {
+        if (!onChange)
+            return;
+        const sanitizedValue = Number(value.replace(/\D/g, ''));
+        onChange(sanitizedValue);
+    };
+    const inputStyle = {
+        backgroundSize: `${(value * 100) / max - 1}% 100%`,
+    };
+    const handleBlur = () => {
+        if (!onChange)
+            return;
+        if (value < min)
+            onChange(min);
+        if (value > max)
+            onChange(max);
+    };
+    return (_jsxs("div", { className: className, children: [_jsxs("div", { className: "relative", children: [title ? (_jsx("span", { className: "absolute text-xs text-secondary-text top-1 mt-0.5 pl-4 ml-0.5", children: title })) : null, _jsx("input", { className: `m-0 font-sans text-sm w-full h-12 border-2 border-solid border-main-divider rounded-md outline-none p-0 pl-4 m-0 box-border text-primary-text ${title ? 'pt-4' : ''}`, value: String(value).replace(/\B(?=(\d{3})+(?!\d))/g, ' '), onChange: (e) => handleChange(e.target.value), onBlur: handleBlur }), _jsx("div", { className: "absolute inset-x-0 mt-0.5 top-8 px-4", children: _jsx("input", { className: "box-border w-full m-0 cursor-pointer slider", type: "range", min: min, max: max, step: step, value: value, onChange: (e) => handleChange(e.target.value), style: inputStyle }) })] }), _jsx("div", { className: "flex justify-between mt-3 mb-4", children: items.map((item, i) => (_jsx("span", { className: "text-xs text-secondary-text pl-4", children: item }, String(i)))) })] }));
+});
+//# sourceMappingURL=InputRange.js.map

package/lib/ui-kit/InputRange/InputRange.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputRange.js","sourceRoot":"","sources":["../../../src/ui-kit/InputRange/InputRange.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGxC,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAC3B,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,GAAG,EAAE,EAAE,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,GAAG,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,GAAG,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE;IACxF,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE;QACrC,IAAI,CAAC,QAAQ;YAAE,OAAO;QAEtB,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC;QACxD,QAAQ,CAAC,cAAc,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG;QACjB,cAAc,EAAE,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,QAAQ;KACnD,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,CAAC,QAAQ;YAAE,OAAO;QAEtB,IAAI,KAAK,GAAG,GAAG;YAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC/B,IAAI,KAAK,GAAG,GAAG;YAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IACjC,CAAC,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAE,SAAS,aACvB,eAAK,SAAS,EAAC,UAAU,aACtB,KAAK,CAAC,CAAC,CAAC,CACP,eAAM,SAAS,EAAC,+DAA+D,YAC5E,KAAK,GACD,CACR,CAAC,CAAC,CAAC,IAAI,EACR,gBACE,SAAS,EAAE,iJACT,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EACnB,EAAE,EACF,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,uBAAuB,EAAE,GAAG,CAAC,EAC1D,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC7C,MAAM,EAAE,UAAU,GAClB,EACF,cAAK,SAAS,EAAC,sCAAsC,YACnD,gBACE,SAAS,EAAC,6CAA6C,EACvD,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC7C,KAAK,EAAE,UAAU,GACjB,GACE,IACF,EACN,cAAK,SAAS,EAAC,gCAAgC,YAC5C,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CACtB,eAAsB,SAAS,EAAC,kCAAkC,YAC/D,IAAI,IADI,MAAM,CAAC,CAAC,CAAC,CAEb,CACR,CAAC,GACE,IACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}

package/lib/ui-kit/InputRange/InputRangeProps.d.ts

@@ -0,0 +1,10 @@
+export interface InputRangeProps {
+    className?: string;
+    items?: string[];
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number;
+    title?: string;
+    onChange?: (value: number) => void;
+}

package/lib/ui-kit/InputRange/InputRangeProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=InputRangeProps.js.map

package/lib/ui-kit/InputRange/InputRangeProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputRangeProps.js","sourceRoot":"","sources":["../../../src/ui-kit/InputRange/InputRangeProps.ts"],"names":[],"mappings":""}

package/lib/utils/clamp.d.ts

@@ -0,0 +1 @@
+export declare const clamp: (value: number, min: number, max: number) => number;

package/lib/utils/clamp.js

@@ -0,0 +1,2 @@
+export const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
+//# sourceMappingURL=clamp.js.map

package/lib/utils/clamp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clamp.js","sourceRoot":"","sources":["../../src/utils/clamp.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW,EAAE,EAAE,CAC/D,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.2.76",
+  "version": "0.2.77",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",

package/src/common.css

@@ -98,4 +98,44 @@
     scroll-snap-stop: always;
     width: 100%;
   }
+
+  input[type='range'].slider {
+    -webkit-appearance: none;
+    height: 4px;
+    background: transparent;
+    border-radius: 5px;
+    background-image: linear-gradient(#42ab44, #42ab44);
+    background-repeat: no-repeat;
+  }
+
+  input[type='range'].slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: 18px;
+    width: 18px;
+    border-radius: 50%;
+    background: #fff;
+    cursor: pointer;
+    box-shadow: none;
+    border: 3px solid #42ab44;
+  }
+
+  input[type='range'].slider::-moz-range-thumb {
+    height: 12px;
+    width: 12px;
+    border-radius: 50%;
+    background: #fff;
+    cursor: pointer;
+    box-shadow: none;
+    border: 3px solid #42ab44;
+  }
+
+  input[type='range'].slider::-ms-thumb {
+    height: 18px;
+    width: 18px;
+    border-radius: 50%;
+    background: #fff;
+    cursor: pointer;
+    box-shadow: none;
+    border: 3px solid #42ab44;
+  }
 }

package/src/components/CreditCalculator/CreditCalculator.fixture.tsx

@@ -0,0 +1,4 @@
+import { CreditCalculator } from './CreditCalculator';
+import { context } from '../../setup-fixture';
+
+export default <CreditCalculator context={context} />;

package/src/components/CreditCalculator/CreditCalculator.tsx

@@ -0,0 +1,106 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { UniBlockProps } from '../../types';
+import { Button } from '../../ui-kit/Button/Button';
+import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { InputRange } from '../../ui-kit/InputRange/InputRange';
+import { clamp } from '../../utils/clamp';
+
+export interface CreditCalculatorProps extends UniBlockProps {}
+
+const borderStyle = 'border-solid border-3 border-primary-main rounded-md';
+
+const MIN_MONEY = 50000;
+const MAX_MONEY = 3000000;
+const STEP_MONEY = 1000;
+
+const CREDIT_TERM_YEARS = [2, 3, 4, 5, 6, 7];
+
+const MIN_MONTHS = 1;
+const MAX_MONTHS = 84;
+const STEP_MONTHS = 1;
+
+const MONTHS_IN_YEAR = 12;
+
+export const CreditCalculator = JSX<CreditCalculatorProps>(({ context, className }) => {
+  const [moneyValue, setMoneyValue] = context.useState(350000);
+  const [monthsValue, setMonthsValue] = context.useState(12);
+  const [isAnnuityChecked, setIsAnnuityChecked] = context.useState(true);
+  const [isInsuranceChecked, setIsInsuranceChecked] = context.useState(true);
+
+  const handleButtonClick = (value: number) => {
+    setMonthsValue(clamp(value * MONTHS_IN_YEAR, MIN_MONTHS, MAX_MONTHS));
+  };
+
+  return (
+    <section className={`font-sans text-primary-text bg-white p-4 ${className}`}>
+      <div className={`box-border p-12 flex flex-col justify-between ${borderStyle}`}>
+        <div className="flex justify-between">
+          <div className="grow mr-11">
+            <InputRange
+              title="Желаемая сумма кредита, ₽"
+              items={['От 50 000 рублей', 'До 3 000 000 рублей']}
+              min={MIN_MONEY}
+              max={MAX_MONEY}
+              step={STEP_MONEY}
+              value={moneyValue}
+              onChange={setMoneyValue}
+            />
+            <InputRange
+              title="Срок кредита, месяцев"
+              items={['Или выберите из предложенных вариантов ниже']}
+              min={MIN_MONTHS}
+              max={MAX_MONTHS}
+              step={STEP_MONTHS}
+              value={monthsValue}
+              onChange={setMonthsValue}
+            />
+            <div className="flex mb-7">
+              {CREDIT_TERM_YEARS.map((number, i) => renderButton(number, i, handleButtonClick))}
+            </div>
+            <Checkbox
+              text="Получаю пенсию на карту Россельхозбанка"
+              checked={isAnnuityChecked}
+              onChange={setIsAnnuityChecked}
+            />
+            <Checkbox
+              className="mb-4"
+              text="Комплексная страховая защита"
+              checked={isInsuranceChecked}
+              onChange={setIsInsuranceChecked}
+            />
+          </div>
+          <div className="p-9 bg-primary-main rounded-md text-white">
+            <div className="text-base mb-5">Наше предложение</div>
+            <div className="text-sm opacity-60">Ежемесячный платёж</div>
+            <div className="text-lg mb-3">26 827 ₽</div>
+            <div className="text-sm opacity-60">Ставка</div>
+            <div className="text-lg">16,9 %</div>
+          </div>
+        </div>
+        <div className="flex items-center">
+          <Button className="mr-3" text="Отправить заявку" version="primary" href="#" />
+          <div
+            className="w-80 text-xxs leading-4 text-secondary-text"
+            aria-label="Соглашение на обработку персональных данных"
+          >
+            Отправляя заявку, вы соглашаетесь на обработку персональных данных соответственно
+            требованиям ФЗ «О персональных данных»
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+});
+
+const renderButton = (number: number, i: number, handleClick: (number: number) => void) => (
+  <div
+    key={String(i)}
+    className="bg-secondary-light rounded-3xl h-10 w-[75px] box-border mr-2 flex items-center justify-center cursor-pointer"
+    role="button"
+    onClick={() => handleClick(number)}
+  >
+    <span className="font-medium text-sm">
+      {number} {number > 4 ? 'лет' : 'года'}
+    </span>
+  </div>
+);

package/src/ui-kit/Checkbox/Checkbox.tsx

@@ -0,0 +1,36 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { CheckboxProps } from './CheckboxProps';
+import { SVG } from '../SVG';
+
+const CHECK_PATHS = [
+  {
+    d: 'M10.207.793a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414 0l-2.5-2.5a1 1 0 0 1 1.414-1.414L3.5 6.086 8.793.793a1 1 0 0 1 1.414 0Z',
+    fillRule: 'evenodd',
+    clipRule: 'evenodd',
+    fill: 'white',
+  },
+];
+
+export const Checkbox = JSX<CheckboxProps>(({ text, checked, onChange, className }) => (
+  <div className={className}>
+    <label className="flex items-center cursor-pointer relative">
+      <input
+        className={`peer appearance-none w-5 h-5 border-solid border rounded border-black checked:bg-primary-main checked:border-primary-main`}
+        type="checkbox"
+        onChange={(e) => {
+          onChange(e.target.checked);
+        }}
+        checked={checked}
+      />
+      <SVG
+        paths={CHECK_PATHS}
+        className="hidden absolute left-2 ml-px peer-checked:block"
+        width="11"
+        height="9"
+        fill="white"
+        viewBox="0 0 11 9"
+      />
+      {text ? <span className="font-sans ml-2 text-sm cursor-pointer">{text}</span> : null}
+    </label>
+  </div>
+));

package/src/ui-kit/Checkbox/CheckboxProps.ts

@@ -0,0 +1,6 @@
+export interface CheckboxProps {
+  text?: string;
+  checked: boolean;
+  onChange: (value: boolean) => void;
+  className?: string;
+}

package/src/ui-kit/InputRange/InputRange.tsx

@@ -0,0 +1,63 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { InputRangeProps } from './InputRangeProps';
+
+export const InputRange = JSX<InputRangeProps>(
+  ({ className, title, items = [], min = 1, max = 100, step = 1, value = min, onChange }) => {
+    const handleChange = (value: string) => {
+      if (!onChange) return;
+
+      const sanitizedValue = Number(value.replace(/\D/g, ''));
+      onChange(sanitizedValue);
+    };
+
+    const inputStyle = {
+      backgroundSize: `${(value * 100) / max - 1}% 100%`,
+    };
+
+    const handleBlur = () => {
+      if (!onChange) return;
+
+      if (value < min) onChange(min);
+      if (value > max) onChange(max);
+    };
+
+    return (
+      <div className={className}>
+        <div className="relative">
+          {title ? (
+            <span className="absolute text-xs text-secondary-text top-1 mt-0.5 pl-4 ml-0.5">
+              {title}
+            </span>
+          ) : null}
+          <input
+            className={`m-0 font-sans text-sm w-full h-12 border-2 border-solid border-main-divider rounded-md outline-none p-0 pl-4 m-0 box-border text-primary-text ${
+              title ? 'pt-4' : ''
+            }`}
+            value={String(value).replace(/\B(?=(\d{3})+(?!\d))/g, ' ')}
+            onChange={(e) => handleChange(e.target.value)}
+            onBlur={handleBlur}
+          />
+          <div className="absolute inset-x-0 mt-0.5 top-8 px-4">
+            <input
+              className="box-border w-full m-0 cursor-pointer slider"
+              type="range"
+              min={min}
+              max={max}
+              step={step}
+              value={value}
+              onChange={(e) => handleChange(e.target.value)}
+              style={inputStyle}
+            />
+          </div>
+        </div>
+        <div className="flex justify-between mt-3 mb-4">
+          {items.map((item, i) => (
+            <span key={String(i)} className="text-xs text-secondary-text pl-4">
+              {item}
+            </span>
+          ))}
+        </div>
+      </div>
+    );
+  },
+);

package/src/ui-kit/InputRange/InputRangeProps.ts

@@ -0,0 +1,10 @@
+export interface InputRangeProps {
+  className?: string;
+  items?: string[];
+  min?: number;
+  max?: number;
+  step?: number;
+  value?: number;
+  title?: string;
+  onChange?: (value: number) => void;
+}

package/src/utils/clamp.ts

@@ -0,0 +1,2 @@
+export const clamp = (value: number, min: number, max: number) =>
+  Math.max(min, Math.min(value, max));