@arthurzakharov/ui-kit 1.9.1 → 1.9.2

package/dist/assets/info-BIfD2zWQ.css

@@ -0,0 +1 @@
+._Info_1ul36_1{--circle-size: 20px;border-radius:var(--rm-ui-border-radius-md);padding:var(--rm-ui-padding-lg);display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:var(--rm-ui-padding-lg);background-color:var(--rm-ui-payment-info-bg)}._Title_1ul36_14{font-weight:var(--rm-ui-font-weight-medium);color:var(--rm-ui-color-accent-primary);font-size:11px;line-height:var(--rm-ui-line-height-body-extra-small);letter-spacing:1px;text-transform:uppercase}._List_1ul36_23{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:var(--rm-ui-padding-sm)}._Item_1ul36_32{display:flex;align-items:flex-start;justify-content:flex-start;gap:var(--rm-ui-padding-sm)}._Content_1ul36_39{width:calc(100% - var(--circle-size) - var(--rm-ui-padding-sm));font-size:var(--rm-ui-font-size-body-small);line-height:var(--rm-ui-line-height-body-small)}._Circle_1ul36_45{width:var(--circle-size);height:var(--circle-size);border-radius:100%;padding:var(--rm-ui-padding-xxs);display:flex;align-items:center;justify-content:center}._CircleCheck_1ul36_55{background-color:var(--rm-ui-color-accent-primary)}._CircleArrow_1ul36_59{background-color:var(--rm-ui-color-accent-tertiary)}._Icon_1ul36_63{stroke:#fff;stroke-width:3px}

package/dist/assets/{main-iE1J4wcX.css → main-BS096FVm.css}

@@ -1 +1 @@
-*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--rm-ui-body-bg)}body,input,textarea{font-family:Lato,sans-serif;font-weight:var(--rm-ui-font-weight-regular);font-size:16px;line-height:24px;-webkit-hyphens:manual;hyphens:manual;white-space:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}ul,ol{list-style:none;margin:0;padding:0}h1,h2,h3,h4,h5,h6,b,strong{font-weight:var(--rm-ui-font-weight-medium)}h1{font-size:var(--rm-ui-font-size-hl1);line-height:var(--rm-ui-line-height-hl1)}h2{font-size:var(--rm-ui-font-size-hl2);line-height:var(--rm-ui-line-height-hl2)}h3{font-size:var(--rm-ui-font-size-hl3);line-height:var(--rm-ui-line-height-hl3)}h4{font-size:var(--rm-ui-font-size-hl4);line-height:var(--rm-ui-line-height-hl4)}h5,h6{font-size:var(--rm-ui-font-size-hl5);line-height:var(--rm-ui-line-height-hl5)}a{text-decoration:none;color:inherit;border-radius:var(--rm-ui-border-radius-sm);outline:2px solid transparent}button,*[role=button]{border:none;border-radius:0;background-color:transparent;font-family:inherit;font-weight:inherit;font-size:inherit;line-height:inherit;color:inherit;-webkit-hyphens:inherit;hyphens:inherit;white-space:inherit;outline-offset:-2px;outline:2px solid transparent}a:hover,button:hover,*[role=button]:hover{cursor:pointer}a:active,button:active,*[role=button]:active{outline:none}a:focus-visible,button:focus-visible,*[role=button]:focus-visible{outline-color:var(--rm-ui-color-focus);outline-offset:-2px;transition:outline-color var(--rm-ui-amimation-speed-primary) ease-in-out;transition-delay:calc(var(--rm-ui-amimation-speed-primary) / 2)}.text-primary{color:var(--rm-ui-color-text-primary)}.text-secondary{color:var(--rm-ui-color-text-secondary)}.fw-light{font-weight:var(--rm-ui-font-weight-light)}.fw-regular{font-weight:var(--rm-ui-font-weight-regular)}.fw-medium{font-weight:var(--rm-ui-font-weight-medium)}.fw-bold{font-weight:var(--rm-ui-font-weight-bold)}:root{--rm-ui-padding-xxs: 4px;--rm-ui-padding-xs: 8px;--rm-ui-padding-sm: 12px;--rm-ui-padding-md: 16px;--rm-ui-padding-lg: 24px;--rm-ui-padding-xl: 32px;--rm-ui-padding-xxl: 40px;--rm-ui-padding-xxxl: 48px;--rm-ui-border-radius-sm: 8px;--rm-ui-border-radius-md: 12px;--rm-ui-border-radius-lg: 16px;--rm-ui-border-radius-xl: 24px;--rm-ui-font-size-body-extra-small: 12px;--rm-ui-line-height-body-extra-small: 16px;--rm-ui-font-size-body-small: 14px;--rm-ui-line-height-body-small: 20px;--rm-ui-font-size-body: 16px;--rm-ui-line-height-body: 24px;--rm-ui-font-size-body-large: 20px;--rm-ui-line-height-body-large: 30px;--rm-ui-font-size-hl5: 14px;--rm-ui-line-height-hl5: 22px;--rm-ui-font-size-hl4: 18px;--rm-ui-line-height-hl4: 24px;--rm-ui-font-size-hl3: 20px;--rm-ui-line-height-hl3: 30px;--rm-ui-font-size-hl2: 24px;--rm-ui-line-height-hl2: 32px;--rm-ui-font-size-hl1: 28px;--rm-ui-line-height-hl1: 36px;--rm-ui-font-weight-light: 300;--rm-ui-font-weight-regular: 400;--rm-ui-font-weight-medium: 700;--rm-ui-font-weight-bold: 900;--rm-ui-grey-950: #0a0a0a;--rm-ui-grey-900: #171717;--rm-ui-grey-800: #262626;--rm-ui-grey-700: #404040;--rm-ui-grey-600: #525252;--rm-ui-grey-500: #737373;--rm-ui-grey-400: #a3a3a3;--rm-ui-grey-300: #d4d4d4;--rm-ui-grey-200: #e5e5e5;--rm-ui-grey-100: #f5f5f5;--rm-ui-grey-50: #fafafa;--rm-ui-color-text-primary: var(--rm-ui-grey-800);--rm-ui-color-text-secondary: var(--rm-ui-grey-500);--rm-ui-color-accent-primary: #23bf96;--rm-ui-color-accent-secondary: #ff9900;--rm-ui-color-theme-primary: #302677;--rm-ui-color-theme-secondary: #302677;--rm-ui-color-action: #006cff;--rm-ui-color-inverted: #ffffff;--rm-ui-color-error: #dc2626;--rm-ui-color-success: #00b649;--rm-ui-color-focus: #ff8d02;--rm-ui-color-link: #ff8206;--rm-ui-body-color: #f0faff;--rm-ui-box-border-radius: 10px;--rm-ui-header-logo-height: 30px;--rm-ui-header-phone: #ff9900;--rm-ui-header-phone-size: 22px;--rm-ui-header-text: var(--rm-ui-color-text-primary);--rm-ui-header-check-icon: var(--rm-ui-color-text-primary);--rm-ui-certifications-color: #b1b4c7;--rm-ui-certifications-size: 20px;--rm-ui-message-success-primary: #29c667;--rm-ui-message-success-secondary: #f1fdf4;--rm-ui-message-question-primary: #a76000;--rm-ui-message-question-secondary: #fefce8;--rm-ui-message-error-primary: var(--rm-ui-color-error);--rm-ui-message-error-secondary: #fef3f3;--rm-ui-message-info-primary: #3289c4;--rm-ui-message-info-secondary: #f3f7fe;--rm-ui-payment-sidebar-bg: #f8fcff;--rm-ui-payment-text-blocks-gap: var(--rm-ui-padding-lg);--rm-ui-data-protected-label-icon: var(--rm-ui-next-btn-bg);--rm-ui-data-protected-label-text: var(--rm-ui-color-text-primary);--rm-ui-status-idle-color: #82868f;--rm-ui-status-success-color: var(--rm-ui-color-accent-primary);--rm-ui-status-error-color: var(--rm-ui-color-error);--rm-ui-not-found-color: var(--rm-ui-color-text-primary);--rm-ui-not-found-border: var(--rm-ui-grey-300);--rm-ui-card-background: #ffffff;--rm-ui-next-btn-bg: rgba(35, 191, 150, 1);--rm-ui-next-btn-bg-hover: rgba(35, 191, 150, .9);--rm-ui-info-panel-bg: var(--rm-ui-body-color);--rm-ui-sidebar-bg: #f6f6f6;--rm-ui-sidebar-line-color: var(--rm-ui-grey-200);--rm-ui-loading-screen-height: 400px;--rm-ui-body-bg: #f9fcff;--rm-ui-content-bg: #ffffff;--rm-ui-amimation-speed-primary: .15s;--rm-ui-amimation-speed-secondary: .3s;--rm-ui-amimation-speed-tertiary: .45s;--rm-ui-amimation-cubic-primary: cubic-bezier(.3, 0, 0, 1);--rm-ui-amimation-cubic-secondary: cubic-bezier(.65, 0, .35, 1);--rm-ui-amimation-cubic-tertiary: cubic-bezier(.68, -.6, .32, 1.6);--rm-ui-warranty-bg: #f9fcff}
+*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--rm-ui-body-bg)}body,input,textarea{font-family:Lato,sans-serif;font-weight:var(--rm-ui-font-weight-regular);font-size:16px;line-height:24px;-webkit-hyphens:manual;hyphens:manual;white-space:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}ul,ol{list-style:none;margin:0;padding:0}h1,h2,h3,h4,h5,h6,b,strong{font-weight:var(--rm-ui-font-weight-medium)}h1{font-size:var(--rm-ui-font-size-hl1);line-height:var(--rm-ui-line-height-hl1)}h2{font-size:var(--rm-ui-font-size-hl2);line-height:var(--rm-ui-line-height-hl2)}h3{font-size:var(--rm-ui-font-size-hl3);line-height:var(--rm-ui-line-height-hl3)}h4{font-size:var(--rm-ui-font-size-hl4);line-height:var(--rm-ui-line-height-hl4)}h5,h6{font-size:var(--rm-ui-font-size-hl5);line-height:var(--rm-ui-line-height-hl5)}a{text-decoration:none;color:inherit;border-radius:var(--rm-ui-border-radius-sm);outline:2px solid transparent}button,*[role=button]{border:none;border-radius:0;background-color:transparent;font-family:inherit;font-weight:inherit;font-size:inherit;line-height:inherit;color:inherit;-webkit-hyphens:inherit;hyphens:inherit;white-space:inherit;outline-offset:-2px;outline:2px solid transparent}a:hover,button:hover,*[role=button]:hover{cursor:pointer}a:active,button:active,*[role=button]:active{outline:none}a:focus-visible,button:focus-visible,*[role=button]:focus-visible{outline-color:var(--rm-ui-color-focus);outline-offset:-2px;transition:outline-color var(--rm-ui-amimation-speed-primary) ease-in-out;transition-delay:calc(var(--rm-ui-amimation-speed-primary) / 2)}.text-primary{color:var(--rm-ui-color-text-primary)}.text-secondary{color:var(--rm-ui-color-text-secondary)}.fw-light{font-weight:var(--rm-ui-font-weight-light)}.fw-regular{font-weight:var(--rm-ui-font-weight-regular)}.fw-medium{font-weight:var(--rm-ui-font-weight-medium)}.fw-bold{font-weight:var(--rm-ui-font-weight-bold)}:root{--rm-ui-padding-xxs: 4px;--rm-ui-padding-xs: 8px;--rm-ui-padding-sm: 12px;--rm-ui-padding-md: 16px;--rm-ui-padding-lg: 24px;--rm-ui-padding-xl: 32px;--rm-ui-padding-xxl: 40px;--rm-ui-padding-xxxl: 48px;--rm-ui-border-radius-sm: 8px;--rm-ui-border-radius-md: 12px;--rm-ui-border-radius-lg: 16px;--rm-ui-border-radius-xl: 24px;--rm-ui-font-size-body-extra-small: 12px;--rm-ui-line-height-body-extra-small: 16px;--rm-ui-font-size-body-small: 14px;--rm-ui-line-height-body-small: 20px;--rm-ui-font-size-body: 16px;--rm-ui-line-height-body: 24px;--rm-ui-font-size-body-large: 20px;--rm-ui-line-height-body-large: 30px;--rm-ui-font-size-hl5: 14px;--rm-ui-line-height-hl5: 22px;--rm-ui-font-size-hl4: 18px;--rm-ui-line-height-hl4: 24px;--rm-ui-font-size-hl3: 20px;--rm-ui-line-height-hl3: 30px;--rm-ui-font-size-hl2: 24px;--rm-ui-line-height-hl2: 32px;--rm-ui-font-size-hl1: 28px;--rm-ui-line-height-hl1: 36px;--rm-ui-font-weight-light: 300;--rm-ui-font-weight-regular: 400;--rm-ui-font-weight-medium: 700;--rm-ui-font-weight-bold: 900;--rm-ui-grey-950: #0a0a0a;--rm-ui-grey-900: #171717;--rm-ui-grey-800: #262626;--rm-ui-grey-700: #404040;--rm-ui-grey-600: #525252;--rm-ui-grey-500: #737373;--rm-ui-grey-400: #a3a3a3;--rm-ui-grey-300: #d4d4d4;--rm-ui-grey-200: #e5e5e5;--rm-ui-grey-100: #f5f5f5;--rm-ui-grey-50: #fafafa;--rm-ui-color-text-primary: var(--rm-ui-grey-800);--rm-ui-color-text-secondary: var(--rm-ui-grey-500);--rm-ui-color-accent-primary: #23bf96;--rm-ui-color-accent-secondary: #ff9900;--rm-ui-color-accent-tertiary: #f5a623;--rm-ui-color-theme-primary: #302677;--rm-ui-color-theme-secondary: #302677;--rm-ui-color-action: #006cff;--rm-ui-color-inverted: #ffffff;--rm-ui-color-error: #dc2626;--rm-ui-color-success: #00b649;--rm-ui-color-focus: #ff8d02;--rm-ui-color-link: #ff8206;--rm-ui-body-color: #f0faff;--rm-ui-box-border-radius: 10px;--rm-ui-header-logo-height: 30px;--rm-ui-header-phone: #ff9900;--rm-ui-header-phone-size: 22px;--rm-ui-header-text: var(--rm-ui-color-text-primary);--rm-ui-header-check-icon: var(--rm-ui-color-text-primary);--rm-ui-certifications-color: #b1b4c7;--rm-ui-certifications-size: 20px;--rm-ui-message-success-primary: #29c667;--rm-ui-message-success-secondary: #f1fdf4;--rm-ui-message-question-primary: #a76000;--rm-ui-message-question-secondary: #fefce8;--rm-ui-message-error-primary: var(--rm-ui-color-error);--rm-ui-message-error-secondary: #fef3f3;--rm-ui-message-info-primary: #3289c4;--rm-ui-message-info-secondary: #f3f7fe;--rm-ui-payment-info-bg: #edf9f6;--rm-ui-payment-sidebar-bg: #f8fcff;--rm-ui-payment-text-blocks-gap: var(--rm-ui-padding-lg);--rm-ui-data-protected-label-icon: var(--rm-ui-next-btn-bg);--rm-ui-data-protected-label-text: var(--rm-ui-color-text-primary);--rm-ui-status-idle-color: #82868f;--rm-ui-status-success-color: var(--rm-ui-color-accent-primary);--rm-ui-status-error-color: var(--rm-ui-color-error);--rm-ui-not-found-color: var(--rm-ui-color-text-primary);--rm-ui-not-found-border: var(--rm-ui-grey-300);--rm-ui-card-background: #ffffff;--rm-ui-next-btn-bg: rgba(35, 191, 150, 1);--rm-ui-next-btn-bg-hover: rgba(35, 191, 150, .9);--rm-ui-info-panel-bg: var(--rm-ui-body-color);--rm-ui-sidebar-bg: #f6f6f6;--rm-ui-sidebar-line-color: var(--rm-ui-grey-200);--rm-ui-loading-screen-height: 400px;--rm-ui-body-bg: #f9fcff;--rm-ui-content-bg: #ffffff;--rm-ui-amimation-speed-primary: .15s;--rm-ui-amimation-speed-secondary: .3s;--rm-ui-amimation-speed-tertiary: .45s;--rm-ui-amimation-cubic-primary: cubic-bezier(.3, 0, 0, 1);--rm-ui-amimation-cubic-secondary: cubic-bezier(.65, 0, .35, 1);--rm-ui-amimation-cubic-tertiary: cubic-bezier(.68, -.6, .32, 1.6);--rm-ui-warranty-bg: #f9fcff}

package/dist/components/payment/components/info/info.component.d.ts

@@ -0,0 +1,12 @@
+import { Base } from '../../../../utils/types';
+type InfoListType = 'check' | 'arrow';
+type InfoListItem = {
+    type: InfoListType;
+    text: string;
+};
+export interface PaymentInfoProps extends Base {
+    title: string;
+    list: InfoListItem[];
+}
+export declare const Info: ({ title, list, ...base }: PaymentInfoProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/payment/components/info/info.component.js

@@ -0,0 +1,44 @@
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import l from "clsx";
+import { Check as _, ArrowRight as C } from "lucide-react";
+import { Content as m } from "../../../../utils/content/content.component.js";
+import { baseProps as s } from "../../../../utils/functions/functions.util.js";
+import '../../../../assets/info-BIfD2zWQ.css';const h = "_Info_1ul36_1", p = "_Title_1ul36_14", I = "_List_1ul36_23", d = "_Item_1ul36_32", f = "_Content_1ul36_39", u = "_Circle_1ul36_45", N = "_CircleCheck_1ul36_55", k = "_CircleArrow_1ul36_59", w = "_Icon_1ul36_63", c = {
+  Info: h,
+  Title: p,
+  List: I,
+  Item: d,
+  Content: f,
+  Circle: u,
+  CircleCheck: N,
+  CircleArrow: k,
+  Icon: w
+}, j = ({ title: r, list: i, ...n }) => /* @__PURE__ */ o(
+  "div",
+  {
+    "data-testid": s(n, "data-testid", "payment-info"),
+    className: l(c.Info, s(n, "className")),
+    children: [
+      r && /* @__PURE__ */ t("h6", { className: c.Title, children: r }),
+      /* @__PURE__ */ t("ul", { className: c.List, children: i.map((e, a) => /* @__PURE__ */ o("li", { className: c.Item, children: [
+        /* @__PURE__ */ o(
+          "span",
+          {
+            className: l(c.Circle, {
+              [c.CircleCheck]: e.type === "check",
+              [c.CircleArrow]: e.type === "arrow"
+            }),
+            children: [
+              e.type === "check" && /* @__PURE__ */ t(_, { className: c.Icon }),
+              e.type === "arrow" && /* @__PURE__ */ t(C, { className: c.Icon })
+            ]
+          }
+        ),
+        /* @__PURE__ */ t(m, { className: c.Content, children: e.text })
+      ] }, a)) })
+    ]
+  }
+);
+export {
+  j as Info
+};

package/dist/components/payment/payment.component.d.ts

@@ -1,10 +1,12 @@
 export type { PaymentBlockProps } from './components/block/block.component';
 export type { PaymentGlassProps } from './components/glass/glass.component';
+export type { PaymentInfoProps } from './components/info/info.component';
 export type { PaymentSidebarProps } from './components/sidebar/sidebar.component';
-export type { PaymentTextBlocksProps, PaymentTextBlockItem, } from './components/text-blocks/text-blocks.component';
+export type { PaymentTextBlocksProps, PaymentTextBlockItem } from './components/text-blocks/text-blocks.component';
 export declare const Payment: {
-    Block: ({ children, title }: import('./components/block/block.component').PaymentBlockProps) => import("react/jsx-runtime").JSX.Element;
-    Glass: ({ children, on, withLoader, ...base }: import('./components/glass/glass.component').PaymentGlassProps) => import("react/jsx-runtime").JSX.Element;
-    Sidebar: (props: import('./components/sidebar/sidebar.component').PaymentSidebarProps) => import("react/jsx-runtime").JSX.Element;
-    TextBlocks: (props: import('./components/text-blocks/text-blocks.component').PaymentTextBlocksProps) => import("react/jsx-runtime").JSX.Element;
+    Block: ({ children, title }: import('./payment.component').PaymentBlockProps) => import("react/jsx-runtime").JSX.Element;
+    Glass: ({ children, on, withLoader, ...base }: import('./payment.component').PaymentGlassProps) => import("react/jsx-runtime").JSX.Element;
+    Info: ({ title, list, ...base }: import('./payment.component').PaymentInfoProps) => import("react/jsx-runtime").JSX.Element;
+    Sidebar: (props: import('./payment.component').PaymentSidebarProps) => import("react/jsx-runtime").JSX.Element;
+    TextBlocks: (props: import('./payment.component').PaymentTextBlocksProps) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/components/payment/payment.component.js

@@ -1,13 +1,15 @@
 import { Block as o } from "./components/block/block.component.js";
 import { Glass as r } from "./components/glass/glass.component.js";
-import { Sidebar as m } from "./components/sidebar/sidebar.component.js";
-import { TextBlocks as t } from "./components/text-blocks/text-blocks.component.js";
-const s = {
+import { Info as m } from "./components/info/info.component.js";
+import { Sidebar as t } from "./components/sidebar/sidebar.component.js";
+import { TextBlocks as f } from "./components/text-blocks/text-blocks.component.js";
+const c = {
   Block: o,
   Glass: r,
-  Sidebar: m,
-  TextBlocks: t
+  Info: m,
+  Sidebar: t,
+  TextBlocks: f
 };
 export {
-  s as Payment
+  c as Payment
 };

package/dist/main.d.ts

@@ -42,7 +42,7 @@ export { MainAttachment, type MainAttachmentProps } from './components/main-atta
 export { Message, type MessageProps } from './components/message';
 export { MessageBlock, type MessageBlockProps } from './components/message-block';
 export { NotFound, type NotFoundProps } from './components/not-found';
-export { Payment, type PaymentBlockProps, type PaymentGlassProps, type PaymentSidebarProps, type PaymentTextBlocksProps, type PaymentTextBlockItem, } from './components/payment/payment.component';
+export { Payment, type PaymentBlockProps, type PaymentGlassProps, type PaymentInfoProps, type PaymentSidebarProps, type PaymentTextBlocksProps, type PaymentTextBlockItem, } from './components/payment/payment.component';
 export { Sidebar, type SidebarProps } from './components/sidebar';
 export { Signature } from './components/signature';
 export { Svg, type SvgProps } from './utils/svg/svg.component';

package/dist/main.js

@@ -49,7 +49,7 @@ import { Svg as qo } from "./utils/svg/svg.component.js";
 import { Text as Jo } from "./components/text/text.component.js";
 import { UserPanel as Oo } from "./components/user-panel/user-panel.component.js";
 import { Warranty as Vo } from "./components/warranty/warranty.component.js";
-import './assets/main-iE1J4wcX.css';export {
+import './assets/main-BS096FVm.css';export {
   Z as AccordionTable,
   $ as BottomBar,
   H as Box,

package/dist/utils/story/size-box/size-box.component.d.ts

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
 interface SizeBox extends PropsWithChildren {
-    size: number;
+    size: number[];
 }
 export declare const SizeBox: ({ children, size }: SizeBox) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/utils/story/size-box/size-box.component.js

@@ -1,5 +1,5 @@
-import { jsx as i } from "react/jsx-runtime";
-const h = ({ children: o, size: t }) => /* @__PURE__ */ i("div", { style: { width: t, height: t }, children: o });
+import { jsx as o } from "react/jsx-runtime";
+const h = ({ children: t, size: i = [] }) => /* @__PURE__ */ o("div", { style: { width: i[0] || "initial", height: i[1] || "initial" }, children: t });
 export {
   h as SizeBox
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arthurzakharov/ui-kit",
   "private": false,
-  "version": "1.9.1",
+  "version": "1.9.2",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",