@arthurzakharov/ui-kit 1.0.101 → 1.0.102

package/dist/assets/button-radio-BxBnV2gt.css

@@ -0,0 +1 @@
+._ButtonRadio_mm33y_1{--icon-size: 24px;--icon-gap: var(--rm-ui-padding-sm);padding:var(--rm-ui-padding-md);border-radius:var(--rm-ui-border-radius-md);border:1px solid var(--rm-ui-grey-300);outline-offset:-2px;outline:2px solid transparent;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:flex-start;justify-content:flex-start;transition:background-color var(--rm-ui-amimation-speed-secondary) var(--rm-ui-amimation-cubic-primary),border-color var(--rm-ui-amimation-speed-secondary) var(--rm-ui-amimation-cubic-primary),box-shadow var(--rm-ui-amimation-speed-secondary) var(--rm-ui-amimation-cubic-primary),outline-color var(--rm-ui-amimation-speed-secondary) var(--rm-ui-amimation-cubic-primary)}._ButtonRadio_mm33y_1:not(:disabled):hover{cursor:pointer;border-color:var(--rm-ui-next-btn-bg)}._ButtonRadio_mm33y_1:disabled ._ButtonRadioWrap_mm33y_26{opacity:.25}._ButtonRadio_mm33y_1:disabled:hover{cursor:not-allowed}._ButtonRadioFullWidth_mm33y_34{width:100%}._ButtonRadioActive_mm33y_38{outline-color:var(--rm-ui-next-btn-bg)}._ButtonRadioActive_mm33y_38 ._ButtonRadioIconDot_mm33y_42{stroke:var(--rm-ui-next-btn-bg);fill:var(--rm-ui-next-btn-bg)}._ButtonRadioActive_mm33y_38 ._ButtonRadioText_mm33y_47{font-weight:var(--rm-ui-font-weight-medium)}._ButtonRadioRow_mm33y_51{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:var(--rm-ui-padding-sm)}._ButtonRadioWrap_mm33y_26{display:flex;flex-direction:row;flex-wrap:wrap;flex-grow:1;align-items:flex-start;justify-content:flex-start;transition:opacity var(--rm-ui-amimation-speed-secondary) var(--rm-ui-amimation-cubic-primary)}._ButtonRadioContent_mm33y_70{margin-left:var(--icon-gap);flex-basis:calc(100% - var(--icon-size) - var(--icon-gap));display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:var(--rm-ui-padding-xxs)}._ButtonRadioText_mm33y_47{font-weight:var(--rm-ui-font-weight-regular);color:var(--rm-ui-color-text-primary);font-size:var(--rm-ui-font-size-body);line-height:var(--rm-ui-line-height-body);text-align:left}._ButtonRadioTextPrimary_mm33y_88{color:var(--rm-ui-color-accent-primary)}._ButtonRadioHint_mm33y_92{font-weight:var(--rm-ui-font-weight-regular);font-size:var(--rm-ui-font-size-body-small);line-height:var(--rm-ui-line-height-body-small);color:var(--rm-ui-color-text-secondary)}

package/dist/assets/data-protected-label-zRn9upL6.css

@@ -0,0 +1 @@
+._DataProtectedLabel_1gfl2_1{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:var(--rm-ui-padding-sm)}._DataProtectedLabelAlignLeft_1gfl2_9{justify-content:flex-start}._DataProtectedLabelAlignCenter_1gfl2_13{justify-content:center}._DataProtectedLabelAlignRight_1gfl2_17{justify-content:flex-end}._DataProtectedLabelIcon_1gfl2_21{width:24px;height:24px;color:var(--rm-ui-data-protected-label-icon)}._DataProtectedLabelText_1gfl2_27{font-weight:var(--rm-ui-font-weight-light);font-size:var(--rm-ui-font-size-body-small);line-height:var(--rm-ui-line-height-body-small);color:var(--rm-ui-data-protected-label-text)}

package/dist/assets/{main-DORvkSZL.css → main-DyrTSsPp.css}

@@ -1 +1 @@
-*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--rm-ui-body-bg);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}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: #23bf96;--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-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-card-background: #ffffff;--rm-ui-next-btn-bg: #23bf96;--rm-ui-next-btn-bg-hover: #3adbb1;--rm-ui-info-panel-bg: var(--rm-ui-body-color);--rm-ui-step-idle-color: #82868f;--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: #ffffff;--rm-ui-content-bg: #ffffff;--rm-ui-amimation-speed-primary: .15s;--rm-ui-amimation-speed-secondary: .3s;--rm-ui-amimation-speed-tertiary: .4s;--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);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}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: #23bf96;--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-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-card-background: #ffffff;--rm-ui-next-btn-bg: #23bf96;--rm-ui-next-btn-bg-hover: #3adbb1;--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: #ffffff;--rm-ui-content-bg: #ffffff;--rm-ui-amimation-speed-primary: .15s;--rm-ui-amimation-speed-secondary: .3s;--rm-ui-amimation-speed-tertiary: .4s;--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/assets/status-6MH80dkz.css

@@ -0,0 +1 @@
+._Status_5dqaf_1{position:relative;display:inline-flex}._StatusCircle_5dqaf_6{stroke-width:2px;transition:stroke var(--rm-ui-amimation-cubic-primary) var(--rm-ui-amimation-speed-primary),fill var(--rm-ui-amimation-cubic-primary) var(--rm-ui-amimation-speed-primary),fill-opacity var(--rm-ui-amimation-cubic-primary) var(--rm-ui-amimation-speed-primary)}._StatusCircleIdle_5dqaf_14{stroke:var(--rm-ui-status-idle-color);fill:var(--rm-ui-status-idle-color);fill-opacity:.1}._StatusCircleSuccess_5dqaf_20{stroke:var(--rm-ui-status-success-color);fill:var(--rm-ui-status-success-color);fill-opacity:1}._StatusCircleError_5dqaf_26{stroke:var(--rm-ui-status-error-color);fill:var(--rm-ui-status-error-color);fill-opacity:1}._StatusIconContent_5dqaf_32{position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%)}._StatusIconAnimate_5dqaf_40{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:center}._StatusCheck_5dqaf_48,._StatusX_5dqaf_49{stroke-width:2.5;stroke:#fff}

package/dist/assets/step-Bq2nontX.css

@@ -0,0 +1 @@
+._Step_9bp6g_1{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--rm-ui-padding-xs)}._StepText_9bp6g_9{font-weight:var(--rm-ui-font-weight-medium);font-size:var(--rm-ui-font-size-body-small);line-height:var(--rm-ui-line-height-body-small)}._StepTextIdle_9bp6g_15{color:var(--rm-ui-color-text-secondary)}._StepTextActive_9bp6g_19{color:var(--rm-ui-color-text-primary)}

package/dist/components/animation/fade-scale/fade-scale.component.js

@@ -13,7 +13,7 @@ import '../../../assets/fade-scale-B23oZuuD.css';const _ = "_Flex_1t96l_1", h =
     ease: i = "easeInOut",
     type: l = "tween",
     className: t = "",
-    duration: c = 0.125,
+    duration: c = 0.15,
     delay: m = 0,
     animateOnStart: f = !1
   } = n, a = p(f);

package/dist/components/control/components/button-radio/button-radio.component.d.ts

@@ -0,0 +1,18 @@
+import { PropsWithChildren } from 'react';
+export interface ButtonRadioInfo {
+    text: string;
+    hintLeft?: string;
+    hintRight?: string;
+}
+export interface ButtonRadioProps extends PropsWithChildren {
+    active?: boolean;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    preventDefault?: boolean;
+    blurAfterCLick?: boolean;
+    info?: ButtonRadioInfo;
+    onClick?: () => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+}
+export declare const ButtonRadio: (props: ButtonRadioProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/control/components/button-radio/button-radio.component.js

@@ -0,0 +1,59 @@
+import { jsx as o, jsxs as i } from "react/jsx-runtime";
+import d from "clsx";
+import { Status as h } from "../status/status.component.js";
+import '../../../../assets/button-radio-BxBnV2gt.css';const f = "_ButtonRadio_mm33y_1", p = "_ButtonRadioWrap_mm33y_26", x = "_ButtonRadioFullWidth_mm33y_34", y = "_ButtonRadioActive_mm33y_38", v = "_ButtonRadioText_mm33y_47", T = "_ButtonRadioRow_mm33y_51", N = "_ButtonRadioContent_mm33y_70", W = "_ButtonRadioTextPrimary_mm33y_88", C = "_ButtonRadioHint_mm33y_92", t = {
+  ButtonRadio: f,
+  ButtonRadioWrap: p,
+  ButtonRadioFullWidth: x,
+  ButtonRadioActive: y,
+  ButtonRadioText: v,
+  ButtonRadioRow: T,
+  ButtonRadioContent: N,
+  ButtonRadioTextPrimary: W,
+  ButtonRadioHint: C
+}, A = (e) => {
+  const {
+    children: l,
+    info: n,
+    onClick: s,
+    onFocus: c,
+    onBlur: R,
+    active: a = !1,
+    disabled: B = !1,
+    fullWidth: r = !1,
+    preventDefault: m = !1,
+    blurAfterCLick: _ = !1
+  } = e;
+  return /* @__PURE__ */ o(
+    "button",
+    {
+      type: "button",
+      disabled: B,
+      className: d(t.ButtonRadio, {
+        [t.ButtonRadioActive]: a,
+        [t.ButtonRadioFullWidth]: r
+      }),
+      onClick: (u) => {
+        m && u.preventDefault(), _ && u.currentTarget.blur(), s?.call(null);
+      },
+      onFocus: () => c?.call(null),
+      onBlur: () => R?.call(null),
+      children: /* @__PURE__ */ i("div", { className: t.ButtonRadioWrap, children: [
+        /* @__PURE__ */ o(h, { state: a ? "success" : "idle" }),
+        /* @__PURE__ */ i("div", { className: t.ButtonRadioContent, children: [
+          /* @__PURE__ */ i("div", { className: t.ButtonRadioRow, children: [
+            /* @__PURE__ */ o("span", { className: t.ButtonRadioText, children: l }),
+            n ? /* @__PURE__ */ o("span", { className: d(t.ButtonRadioText, t.ButtonRadioTextPrimary), children: n.text }) : null
+          ] }),
+          n && /* @__PURE__ */ i("div", { className: t.ButtonRadioRow, children: [
+            /* @__PURE__ */ o("span", { className: t.ButtonRadioHint, children: n.hintLeft }),
+            /* @__PURE__ */ o("span", { className: t.ButtonRadioHint, children: n.hintRight })
+          ] })
+        ] })
+      ] })
+    }
+  );
+};
+export {
+  A as ButtonRadio
+};

package/dist/components/control/components/status/status.component.d.ts

@@ -0,0 +1,6 @@
+import { State } from '../../types';
+export interface StatusProps {
+    state: State;
+    className?: string;
+}
+export declare const Status: (props: StatusProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/control/components/status/status.component.js

@@ -0,0 +1,37 @@
+import { jsxs as a, jsx as c } from "react/jsx-runtime";
+import { Circle as i, X as u, Check as S } from "lucide-react";
+import { Animation as e } from "../../../animation/animation.component.js";
+import n from "clsx";
+import '../../../../assets/status-6MH80dkz.css';const l = "_Status_5dqaf_1", _ = "_StatusCircle_5dqaf_6", C = "_StatusCircleIdle_5dqaf_14", d = "_StatusCircleSuccess_5dqaf_20", m = "_StatusCircleError_5dqaf_26", f = "_StatusIconContent_5dqaf_32", I = "_StatusIconAnimate_5dqaf_40", h = "_StatusCheck_5dqaf_48", q = "_StatusX_5dqaf_49", t = {
+  Status: l,
+  StatusCircle: _,
+  StatusCircleIdle: C,
+  StatusCircleSuccess: d,
+  StatusCircleError: m,
+  StatusIconContent: f,
+  StatusIconAnimate: I,
+  StatusCheck: h,
+  StatusX: q
+}, x = (r) => {
+  const { className: o, state: s = "idle" } = r;
+  return /* @__PURE__ */ a("div", { className: n(t.Status, o), children: [
+    /* @__PURE__ */ c(
+      i,
+      {
+        size: 24,
+        className: n(t.StatusCircle, {
+          [t.StatusCircleIdle]: s === "idle",
+          [t.StatusCircleSuccess]: s === "success",
+          [t.StatusCircleError]: s === "error"
+        })
+      }
+    ),
+    /* @__PURE__ */ a("div", { className: t.StatusIconContent, children: [
+      /* @__PURE__ */ c(e.FadeScale, { name: "icon-x", condition: s === "error", className: t.StatusIconAnimate, children: /* @__PURE__ */ c(u, { size: 14, className: t.StatusX }) }),
+      /* @__PURE__ */ c(e.FadeScale, { name: "icon-check", condition: s === "success", className: t.StatusIconAnimate, children: /* @__PURE__ */ c(S, { size: 14, className: t.StatusCheck }) })
+    ] })
+  ] });
+};
+export {
+  x as Status
+};

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

@@ -1,6 +1,7 @@
 export declare const Control: {
     Box: import('react').ForwardRefExoticComponent<import('./components/box/box.component').BoxProps & import('react').RefAttributes<HTMLDivElement>>;
     Button: (props: import('./components/button/button.component').ButtonProps) => import("react/jsx-runtime").JSX.Element;
+    ButtonRadio: (props: import('./components/button-radio/button-radio.component').ButtonRadioProps) => import("react/jsx-runtime").JSX.Element;
     ButtonText: (props: import('./components/button-text/button-text.component').ButtonTextProps) => import("react/jsx-runtime").JSX.Element;
     CardImage: (props: import('./components/card-image/card-image.component').CardImageProps) => import("react/jsx-runtime").JSX.Element;
     CardText: (props: import('./components/card-text/card-text.component').CardTextProps) => import("react/jsx-runtime").JSX.Element;
@@ -13,6 +14,7 @@ export declare const Control: {
     Radio: (props: import('./components/radio/radio.component').RadioProps) => import("react/jsx-runtime").JSX.Element;
     RadioLabel: <T extends import('./types').ChoiceValue>(props: import('./components/radio-label/radio-label.component').RadioLabelProps<T>) => import("react/jsx-runtime").JSX.Element;
     RadioText: (props: import('./components/radio-text/radio-text.component').RadioTextProps) => import("react/jsx-runtime").JSX.Element;
+    Status: (props: import('./components/status/status.component').StatusProps) => import("react/jsx-runtime").JSX.Element;
     Text: (props: import('./components/text/text.component').TextProps) => import("react/jsx-runtime").JSX.Element;
     Textarea: (props: import('./components/textarea/textarea.component').TextareaProps) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/components/control/control.component.js

@@ -1,37 +1,41 @@
 import { Box as o } from "./components/box/box.component.js";
 import { Button as r } from "./components/button/button.component.js";
-import { ButtonText as m } from "./components/button-text/button-text.component.js";
-import { CardImage as t } from "./components/card-image/card-image.component.js";
-import { CardText as i } from "./components/card-text/card-text.component.js";
-import { Checkbox as p } from "./components/checkbox/checkbox.component.js";
-import { Choice as f } from "./components/choice/choice.component.js";
-import { Dropdown as e } from "./components/dropdown/dropdown.component.js";
-import { HiddenInput as a } from "./components/hidden-input/hidden-input.component.js";
-import { Input as d } from "./components/input/input.component.js";
-import { Label as n } from "./components/label/label.component.js";
-import { Radio as x } from "./components/radio/radio.component.js";
+import { ButtonRadio as m } from "./components/button-radio/button-radio.component.js";
+import { ButtonText as t } from "./components/button-text/button-text.component.js";
+import { CardImage as i } from "./components/card-image/card-image.component.js";
+import { CardText as p } from "./components/card-text/card-text.component.js";
+import { Checkbox as f } from "./components/checkbox/checkbox.component.js";
+import { Choice as e } from "./components/choice/choice.component.js";
+import { Dropdown as a } from "./components/dropdown/dropdown.component.js";
+import { HiddenInput as d } from "./components/hidden-input/hidden-input.component.js";
+import { Input as n } from "./components/input/input.component.js";
+import { Label as x } from "./components/label/label.component.js";
+import { Radio as u } from "./components/radio/radio.component.js";
 import { RadioLabel as C } from "./components/radio-label/radio-label.component.js";
 import { RadioText as T } from "./components/radio-text/radio-text.component.js";
-import { Text as u } from "./components/text/text.component.js";
+import { Status as B } from "./components/status/status.component.js";
+import { Text as R } from "./components/text/text.component.js";
 import { Textarea as b } from "./components/textarea/textarea.component.js";
-const y = {
+const E = {
   Box: o,
   Button: r,
-  ButtonText: m,
-  CardImage: t,
-  CardText: i,
-  Checkbox: p,
-  Choice: f,
-  Dropdown: e,
-  HiddenInput: a,
-  Input: d,
-  Label: n,
-  Radio: x,
+  ButtonRadio: m,
+  ButtonText: t,
+  CardImage: i,
+  CardText: p,
+  Checkbox: f,
+  Choice: e,
+  Dropdown: a,
+  HiddenInput: d,
+  Input: n,
+  Label: x,
+  Radio: u,
   RadioLabel: C,
   RadioText: T,
-  Text: u,
+  Status: B,
+  Text: R,
   Textarea: b
 };
 export {
-  y as Control
+  E as Control
 };

package/dist/components/data-protected-label/data-protected-label.component.js

@@ -1,30 +1,30 @@
-import { jsxs as l, jsx as a } from "react/jsx-runtime";
+import { jsxs as o, jsx as a } from "react/jsx-runtime";
 import { LockKeyhole as r } from "lucide-react";
 import n from "clsx";
-import '../../assets/data-protected-label-7q4XjAcN.css';const L = "_DataProtectedLabel_ceqv9_1", d = "_DataProtectedLabelAlignLeft_ceqv9_9", i = "_DataProtectedLabelAlignCenter_ceqv9_13", D = "_DataProtectedLabelAlignRight_ceqv9_17", b = "_DataProtectedLabelIcon_ceqv9_21", P = "_DataProtectedLabelText_ceqv9_27", e = {
+import '../../assets/data-protected-label-zRn9upL6.css';const L = "_DataProtectedLabel_1gfl2_1", d = "_DataProtectedLabelAlignLeft_1gfl2_9", i = "_DataProtectedLabelAlignCenter_1gfl2_13", D = "_DataProtectedLabelAlignRight_1gfl2_17", b = "_DataProtectedLabelIcon_1gfl2_21", P = "_DataProtectedLabelText_1gfl2_27", t = {
   DataProtectedLabel: L,
   DataProtectedLabelAlignLeft: d,
   DataProtectedLabelAlignCenter: i,
   DataProtectedLabelAlignRight: D,
   DataProtectedLabelIcon: b,
   DataProtectedLabelText: P
-}, A = (c) => {
-  const { text: o = "Höchste Datensicherheit", align: t = "center" } = c;
-  return /* @__PURE__ */ l(
+}, f = (l) => {
+  const { text: c = "Höchste Datensicherheit", align: e = "center" } = l;
+  return /* @__PURE__ */ o(
     "div",
     {
-      className: n(e.DataProtectedLabel, {
-        [e.DataProtectedLabelAlignLeft]: t === "left",
-        [e.DataProtectedLabelAlignCenter]: t === "center",
-        [e.DataProtectedLabelAlignRight]: t === "right"
+      className: n(t.DataProtectedLabel, {
+        [t.DataProtectedLabelAlignLeft]: e === "left",
+        [t.DataProtectedLabelAlignCenter]: e === "center",
+        [t.DataProtectedLabelAlignRight]: e === "right"
       }),
       children: [
-        /* @__PURE__ */ a(r, { className: e.DataProtectedLabelIcon }),
-        /* @__PURE__ */ a("span", { className: e.DataProtectedLabelText, children: o })
+        /* @__PURE__ */ a(r, { className: t.DataProtectedLabelIcon }),
+        /* @__PURE__ */ a("span", { className: t.DataProtectedLabelText, children: c })
       ]
     }
   );
 };
 export {
-  A as DataProtectedLabel
+  f as DataProtectedLabel
 };

package/dist/components/sidebar/components/step/step.component.js

@@ -1,73 +1,27 @@
-import { jsxs as n, jsx as c } from "react/jsx-runtime";
-import { Animation as s } from "../../../animation/animation.component.js";
-import { Circle as r, X as i, Check as l } from "lucide-react";
-import S from "clsx";
-import '../../../../assets/step-CqA1H4j2.css';const _ = "_Step_121yt_1", a = "_StepIcon_121yt_10", d = "_StepCircle_121yt_15", m = "_StepCircleIdle_121yt_20", C = "_StepCircleSuccess_121yt_26", I = "_StepCircleError_121yt_32", x = "_StepIconContent_121yt_38", y = "_StepIconAnimate_121yt_46", T = "_StepCheck_121yt_54", h = "_StepX_121yt_55", u = "_StepText_121yt_60", A = "_StepTextIdle_121yt_66", N = "_StepTextActive_121yt_70", e = {
-  Step: _,
-  StepIcon: a,
-  StepCircle: d,
-  StepCircleIdle: m,
-  StepCircleSuccess: C,
-  StepCircleError: I,
-  StepIconContent: x,
-  StepIconAnimate: y,
-  StepCheck: T,
-  StepX: h,
-  StepText: u,
-  StepTextIdle: A,
-  StepTextActive: N
-}, E = (p) => {
-  const { state: t = "idle", text: o = "" } = p;
-  return /* @__PURE__ */ n("div", { className: e.Step, children: [
-    /* @__PURE__ */ n("div", { className: e.StepIcon, children: [
-      /* @__PURE__ */ c(
-        r,
-        {
-          size: 24,
-          className: S(e.StepCircle, {
-            [e.StepCircleIdle]: t === "idle",
-            [e.StepCircleSuccess]: t === "success",
-            [e.StepCircleError]: t === "error"
-          })
-        }
-      ),
-      /* @__PURE__ */ n("div", { className: e.StepIconContent, children: [
-        /* @__PURE__ */ c(
-          s.FadeScale,
-          {
-            name: "icon-x",
-            condition: t === "error",
-            duration: 0.2,
-            delay: 0.2,
-            className: e.StepIconAnimate,
-            children: /* @__PURE__ */ c(i, { size: 14, className: e.StepX })
-          }
-        ),
-        /* @__PURE__ */ c(
-          s.FadeScale,
-          {
-            name: "icon-check",
-            condition: t === "success",
-            duration: 0.2,
-            delay: 0.2,
-            className: e.StepIconAnimate,
-            children: /* @__PURE__ */ c(l, { size: 14, className: e.StepCheck })
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ c(
+import { jsxs as c, jsx as p } from "react/jsx-runtime";
+import { Control as o } from "../../../control/control.component.js";
+import x from "clsx";
+import '../../../../assets/step-Bq2nontX.css';const r = "_Step_9bp6g_1", n = "_StepText_9bp6g_9", _ = "_StepTextIdle_9bp6g_15", l = "_StepTextActive_9bp6g_19", e = {
+  Step: r,
+  StepText: n,
+  StepTextIdle: _,
+  StepTextActive: l
+}, m = (s) => {
+  const { state: t = "idle", text: S = "" } = s;
+  return /* @__PURE__ */ c("div", { className: e.Step, children: [
+    /* @__PURE__ */ p(o.Status, { state: t }),
+    /* @__PURE__ */ p(
       "span",
       {
-        className: S(e.StepText, {
+        className: x(e.StepText, {
           [e.StepTextIdle]: t === "idle",
           [e.StepTextActive]: t === "success" || t === "error"
         }),
-        dangerouslySetInnerHTML: { __html: o }
+        dangerouslySetInnerHTML: { __html: S }
       }
     )
   ] });
 };
 export {
-  E as Step
+  m as Step
 };

package/dist/main.js

@@ -21,7 +21,7 @@ import { Sidebar as w } from "./components/sidebar/sidebar.component.js";
 import { Text as G } from "./components/text/text.component.js";
 import { UserPanel as K } from "./components/user-panel/user-panel.component.js";
 import { Warranty as Q } from "./components/warranty/warranty.component.js";
-import './assets/main-DORvkSZL.css';export {
+import './assets/main-DyrTSsPp.css';export {
   e as Animation,
   m as Certifications,
   x as Control,

package/package.json

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

package/dist/assets/data-protected-label-7q4XjAcN.css

@@ -1 +0,0 @@
-._DataProtectedLabel_ceqv9_1{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:var(--rm-ui-padding-sm)}._DataProtectedLabelAlignLeft_ceqv9_9,._DataProtectedLabelAlignCenter_ceqv9_13{justify-content:flex-start}._DataProtectedLabelAlignRight_ceqv9_17{justify-content:flex-end}._DataProtectedLabelIcon_ceqv9_21{width:24px;height:24px;color:var(--rm-ui-data-protected-label-icon)}._DataProtectedLabelText_ceqv9_27{font-weight:var(--rm-ui-font-weight-light);font-size:var(--rm-ui-font-size-body-small);line-height:var(--rm-ui-line-height-body-small);color:var(--rm-ui-data-protected-label-text)}

package/dist/assets/step-CqA1H4j2.css

@@ -1 +0,0 @@
-._Step_121yt_1{--step-animation: .2s;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--rm-ui-padding-xs)}._StepIcon_121yt_10{position:relative;display:inline-flex}._StepCircle_121yt_15{stroke-width:2px;transition:stroke var(--step-animation) ease-in-out,fill var(--step-animation) ease-in-out,fill-opacity var(--step-animation) ease-in-out}._StepCircleIdle_121yt_20{stroke:var(--rm-ui-step-idle-color);fill:var(--rm-ui-step-idle-color);fill-opacity:.1}._StepCircleSuccess_121yt_26{stroke:var(--rm-ui-color-accent-primary);fill:var(--rm-ui-color-accent-primary);fill-opacity:1}._StepCircleError_121yt_32{stroke:var(--rm-ui-color-error);fill:var(--rm-ui-color-error);fill-opacity:1}._StepIconContent_121yt_38{position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%)}._StepIconAnimate_121yt_46{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:center}._StepCheck_121yt_54,._StepX_121yt_55{stroke-width:2.5;stroke:#fff}._StepText_121yt_60{font-weight:var(--rm-ui-font-weight-medium);font-size:var(--rm-ui-font-size-body-small);line-height:var(--rm-ui-line-height-body-small)}._StepTextIdle_121yt_66{color:var(--rm-ui-color-text-secondary)}._StepTextActive_121yt_70{color:var(--rm-ui-color-text-primary)}