@arthurzakharov/ui-kit 2.2.1 → 2.4.1

package/dist/assets/button-BMjMeK04.css

@@ -0,0 +1 @@
+._Button_14or2_1{position:relative;box-sizing:border-box;border:none;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:border-color var(--rm-ui-amimation-speed-primary) var(--rm-ui-amimation-cubic-primary),background-color var(--rm-ui-amimation-speed-primary) var(--rm-ui-amimation-cubic-primary)}._Button_14or2_1:disabled{cursor:not-allowed;opacity:.33}._Button_14or2_1._SM_14or2_19{border-radius:var(--rm-ui-border-radius-sm);padding:var(--rm-ui-padding-xs) var(--rm-ui-padding-sm)}._Button_14or2_1._LG_14or2_24._Tertiary_14or2_24{padding:calc(var(--rm-ui-padding-xs) - 1px) calc(var(--rm-ui-padding-sm) - 1px)}._Button_14or2_1._SM_14or2_19 ._Text_14or2_28{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)}._Button_14or2_1._MD_14or2_34{border-radius:var(--rm-ui-border-radius-md);padding:var(--rm-ui-padding-sm) var(--rm-ui-padding-lg)}._Button_14or2_1._MD_14or2_34._Tertiary_14or2_24{padding:calc(var(--rm-ui-padding-sm) - 1px) calc(var(--rm-ui-padding-lg) - 1px)}._Button_14or2_1._LG_14or2_24{border-radius:var(--rm-ui-border-radius-md);padding:var(--rm-ui-padding-sm) var(--rm-ui-padding-lg)}._Button_14or2_1._LG_14or2_24._Tertiary_14or2_24{padding:calc(var(--rm-ui-padding-sm) - 1px) calc(var(--rm-ui-padding-lg) - 1px)}._Button_14or2_1._MD_14or2_34 ._Text_14or2_28{font-size:var(--rm-ui-font-size-body);line-height:var(--rm-ui-line-height-body)}._Button_14or2_1._LG_14or2_24 ._Text_14or2_28{font-size:var(--rm-ui-font-size-body-large);line-height:1.2}._Button_14or2_1._Primary_14or2_62{background-color:var(--rm-ui-next-btn-bg)}._Button_14or2_1._Primary_14or2_62:hover{background-color:var(--rm-ui-next-btn-bg-hover)}._Button_14or2_1._Primary_14or2_62 ._Text_14or2_28,._Button_14or2_1._Primary_14or2_62 ._Info_14or2_71{color:#fff}._Button_14or2_1._Secondary_14or2_75{border:1px solid transparent;background-color:transparent}._Button_14or2_1._Secondary_14or2_75:hover{border-color:var(--rm-ui-grey-400)}._Button_14or2_1._Secondary_14or2_75:hover ._Text_14or2_28{color:var(--rm-ui-grey-400);border-color:var(--rm-ui-grey-400)}._Button_14or2_1._Secondary_14or2_75 ._Text_14or2_28,._Button_14or2_1._Secondary_14or2_75 ._Info_14or2_71{color:var(--rm-ui-color-text-secondary)}._Button_14or2_1._Tertiary_14or2_24{border:1px solid var(--rm-ui-grey-300);background-color:transparent}._Button_14or2_1._Tertiary_14or2_24:hover{border-color:var(--rm-ui-grey-200)}._Button_14or2_1._Tertiary_14or2_24:hover ._Text_14or2_28{color:var(--rm-ui-grey-700)}._Button_14or2_1._Tertiary_14or2_24 ._Text_14or2_28,._Button_14or2_1._Tertiary_14or2_24 ._Info_14or2_71{color:var(--rm-ui-color-text-primary)}._Button_14or2_1:not(._Loading_14or2_111):not(:disabled):hover{cursor:pointer}._Button_14or2_1:focus{outline-color:var(--rm-ui-color-focus)}._Button_14or2_1._FullWidth_14or2_119,._Button_14or2_1._FullWidthUntil768_14or2_123,._Button_14or2_1._FullWidthUntil1024_14or2_124,._Button_14or2_1._FullWidthUntil1200_14or2_125{width:100%}@media(min-width:768px){._Button_14or2_1._FullWidthUntil768_14or2_123{width:auto}}@media(min-width:1024px){._Button_14or2_1._FullWidthUntil1024_14or2_124{width:auto}}@media(min-width:1200px){._Button_14or2_1._FullWidthUntil1200_14or2_125{width:auto}}._Button_14or2_1._FullWidthFrom768_14or2_147,._Button_14or2_1._FullWidthFrom1024_14or2_148,._Button_14or2_1._FullWidthFrom1200_14or2_149{width:auto}@media(min-width:768px){._Button_14or2_1._FullWidthFrom768_14or2_147{width:100%}}@media(min-width:1024px){._Button_14or2_1._FullWidthFrom1024_14or2_148{width:100%}}@media(min-width:1200px){._Button_14or2_1._FullWidthFrom1200_14or2_149{width:100%}}._Content_14or2_171{display:flex;flex-direction:column}._Info_14or2_71{flex-basis:100%;font-weight:var(--rm-ui-font-weight-regular)}._Info_14or2_71._SM_14or2_19{font-size:var(--rm-ui-font-size-body-small);line-height:1.2}._Info_14or2_71._MD_14or2_34{font-size:var(--rm-ui-font-size-body);line-height:1.2}._Info_14or2_71._LG_14or2_24{font-size:var(--rm-ui-font-size-body-large);line-height:1.2}._Text_14or2_28{font-weight:var(--rm-ui-font-weight-medium);transition:color var(--rm-ui-amimation-speed-primary) var(--rm-ui-amimation-cubic-primary)}._Loader_14or2_202{position:absolute}

package/dist/assets/message-ByzpMD6r.css

@@ -0,0 +1 @@
+._Message_1591m_1{--message-icon-size: 24px;border-radius:var(--rm-ui-border-radius-md);padding:var(--rm-ui-padding-md);display:flex;flex-direction:row;flex-wrap:nowrap;align-items:flex-start;justify-content:flex-start;gap:var(--rm-ui-padding-xs);font-size:var(--rm-ui-font-size-body);line-height:var(--rm-ui-line-height-body)}._Success_1591m_15{background-color:var(--rm-ui-message-success-secondary)}._Success_1591m_15 ._Icon_1591m_19{stroke:var(--rm-ui-message-success-primary)}._Question_1591m_23{background-color:var(--rm-ui-message-question-secondary)}._Question_1591m_23 ._Icon_1591m_19{stroke:var(--rm-ui-message-question-primary)}._Error_1591m_31{background-color:var(--rm-ui-message-error-secondary)}._Error_1591m_31 ._Icon_1591m_19{stroke:var(--rm-ui-message-error-primary)}._Info_1591m_39{background-color:var(--rm-ui-message-info-secondary)}._Info_1591m_39 ._Icon_1591m_19{stroke:var(--rm-ui-message-info-primary)}._Icon_1591m_19{width:var(--message-icon-size);height:var(--message-icon-size)}._Content_1591m_52{flex-basis:calc(100% - var(--message-icon-size) - var(--rm-ui-padding-xs));display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;gap:var(--rm-ui-padding-xxs)}._ContentFull_1591m_61{flex-basis:100%}._AlignLeft_1591m_65{align-items:flex-start}._AlignRight_1591m_69{align-items:flex-end}._AlignCenter_1591m_73{align-items:center}._Title_1591m_77{font-weight:var(--rm-ui-font-weight-medium)}._Text_1591m_81{font-weight:var(--rm-ui-font-weight-regular)}

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

@@ -1,13 +1,13 @@
 import { ReactNode } from 'react';
 import { Base } from '../../utils/types';
 type MessageType = 'success' | 'question' | 'error' | 'info';
+type MessageAlign = 'left' | 'right' | 'center';
 export interface MessageProps extends Base {
     type: MessageType;
     title: ReactNode;
     text: ReactNode;
+    withoutIcon?: boolean;
+    align?: MessageAlign;
 }
-/**
- * Displays a message with an icon, title, and text content based on the message type (`success`, `question`, `error`, or `info`).
- */
-export declare const Message: ({ type, title, text, ...base }: MessageProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Message: ({ type, title, text, withoutIcon, align, ...base }: MessageProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/message/message.component.js

@@ -1,40 +1,55 @@
-import { jsxs as o, jsx as t } from "react/jsx-runtime";
-import { Check as l, CircleQuestionMark as _, X as d, CircleAlert as m } from "lucide-react";
-import f from "clsx";
-import { baseProps as n } from "../../utils/functions/functions.util.js";
-import { Content as a } from "../../utils/content/content.component.js";
-import '../../assets/message-CgGyIv5e.css';const u = "_Message_fkc6l_1", k = "_Success_fkc6l_15", I = "_Icon_fkc6l_19", x = "_Question_fkc6l_23", C = "_Info_fkc6l_39", N = "_Content_fkc6l_52", g = "_Title_fkc6l_62", T = "_Text_fkc6l_66", s = {
-  Message: u,
-  Success: k,
-  Icon: I,
-  Question: x,
-  Error: "_Error_fkc6l_31",
-  Info: C,
-  Content: N,
-  Title: g,
-  Text: T
-}, E = ({ type: e, title: i, text: r, ...c }) => /* @__PURE__ */ o(
+import { jsxs as _, jsx as n } from "react/jsx-runtime";
+import { Check as g, CircleQuestionMark as d, X as f, CircleAlert as C } from "lucide-react";
+import l from "clsx";
+import { baseProps as a } from "../../utils/functions/functions.util.js";
+import { Content as u } from "../../utils/content/content.component.js";
+import '../../assets/message-ByzpMD6r.css';const A = "_Message_1591m_1", x = "_Success_1591m_15", T = "_Icon_1591m_19", I = "_Question_1591m_23", N = "_Info_1591m_39", M = "_Content_1591m_52", h = "_ContentFull_1591m_61", F = "_AlignLeft_1591m_65", Q = "_AlignRight_1591m_69", L = "_AlignCenter_1591m_73", R = "_Title_1591m_77", S = "_Text_1591m_81", e = {
+  Message: A,
+  Success: x,
+  Icon: T,
+  Question: I,
+  Error: "_Error_1591m_31",
+  Info: N,
+  Content: M,
+  ContentFull: h,
+  AlignLeft: F,
+  AlignRight: Q,
+  AlignCenter: L,
+  Title: R,
+  Text: S
+}, m = (t, o, c) => typeof t == "string" ? /* @__PURE__ */ n(u, { "data-testid": o, className: c, children: t }) : t, p = ({ type: t, title: o, text: c, withoutIcon: s, align: i = "left", ...r }) => /* @__PURE__ */ _(
   "div",
   {
-    "data-testid": n(c, "data-testid", "message"),
-    className: f(s.Message, n(c, "className"), {
-      [s.Success]: e === "success",
-      [s.Question]: e === "question",
-      [s.Error]: e === "error",
-      [s.Info]: e === "info"
+    "data-testid": a(r, "data-testid", "message"),
+    className: l(e.Message, a(r, "className"), {
+      [e.Success]: t === "success",
+      [e.Question]: t === "question",
+      [e.Error]: t === "error",
+      [e.Info]: t === "info"
     }),
     children: [
-      e === "success" && /* @__PURE__ */ t(l, { "data-testid": "success-icon", className: s.Icon }),
-      e === "question" && /* @__PURE__ */ t(_, { "data-testid": "question-icon", className: s.Icon }),
-      e === "error" && /* @__PURE__ */ t(d, { "data-testid": "error-icon", className: s.Icon }),
-      e === "info" && /* @__PURE__ */ t(m, { "data-testid": "info-icon", className: s.Icon }),
-      /* @__PURE__ */ o("div", { className: s.Content, children: [
-        /* @__PURE__ */ t(a, { "data-testid": "message-title", className: s.Title, children: i }),
-        /* @__PURE__ */ t(a, { "data-testid": "message-text", className: s.Text, children: r })
-      ] })
+      !s && t === "success" && /* @__PURE__ */ n(g, { "data-testid": "success-icon", className: e.Icon }),
+      !s && t === "question" && /* @__PURE__ */ n(d, { "data-testid": "question-icon", className: e.Icon }),
+      !s && t === "error" && /* @__PURE__ */ n(f, { "data-testid": "error-icon", className: e.Icon }),
+      !s && t === "info" && /* @__PURE__ */ n(C, { "data-testid": "info-icon", className: e.Icon }),
+      /* @__PURE__ */ _(
+        "div",
+        {
+          className: l(e.Content, {
+            [e.ContentFull]: s,
+            [e.AlignLeft]: i === "left",
+            [e.AlignRight]: i === "right",
+            [e.AlignCenter]: i === "center"
+          }),
+          children: [
+            m(o, "message-title", e.Title),
+            m(c, "message-text", e.Text)
+          ]
+        }
+      )
     ]
   }
 );
 export {
-  E as Message
+  p as Message
 };

package/dist/components/text/text.component.js

@@ -49,93 +49,95 @@ import '../../assets/text-DYEJSFKw.css';const x = "_Lined_zitvv_1", b = "_Left_z
   "page-title": { tag: "h1", weight: "bold", size: "hl1", color: "text-primary" },
   "sidebar-title": { tag: "h3", weight: "bold", size: "hl3", color: "text-primary" },
   "step-title": { tag: "h2", weight: "bold", size: "hl4", color: "text-primary" },
-  "under-submit": { tag: "p", weight: "light", size: "body-small", color: "text-secondary" },
+  "under-submit": { tag: "p", weight: "regular", size: "body-small", color: "text-secondary" },
   "under-submit-light": { tag: "p", weight: "light", size: "body-small", color: "text-secondary" }
-}, _e = G(({
-  children: v,
-  className: m,
-  preset: o,
-  lined: g = !1,
-  align: y = "left",
-  tag: c = "p",
-  weight: _ = "regular",
-  size: s = "body",
-  color: a = "text-primary",
-  ...l
-}, h) => {
-  let d = c, n = _, r = s, t = a;
-  if (o) {
-    const i = ce[o];
-    c !== "p" && c !== i.tag && console.warn(
-      `Text component: 'tag' prop will be overridden by 'preset="${o}"'. Remove explicit 'tag' prop if not intended.`
-    ), _ !== "regular" && _ !== i.weight && console.warn(
-      `Text component: 'weight' prop will be overridden by 'preset="${o}"'. Remove explicit 'weight' prop if not intended.`
-    ), s !== "body" && s !== i.size && console.warn(
-      `Text component: 'size' prop will be overridden by 'preset="${o}"'. Remove explicit 'size' prop if not intended.`
-    ), a !== "text-primary" && a !== i.color && console.warn(
-      `Text component: 'color' prop will be overridden by 'preset="${o}"'. Remove explicit 'color' prop if not intended.`
-    ), d = i.tag, n = i.weight, r = i.size, t = i.color;
-  }
-  const z = L(m, {
-    [e.Lined]: g,
-    // ALIGNMENTS
-    [e.Left]: y === "left",
-    [e.Center]: y === "center",
-    [e.Right]: y === "right",
-    // FONT WEIGHTS
-    [e.Light]: n === "light",
-    [e.Regular]: n === "regular",
-    [e.Medium]: n === "medium",
-    [e.Bold]: n === "bold",
-    // FONT SIZES
-    [e.BodyExtraSmall]: r === "body-extra-small",
-    [e.BodySmall]: r === "body-small",
-    [e.Body]: r === "body",
-    [e.BodyLarge]: r === "body-large",
-    [e.HL1]: r === "hl1",
-    [e.HL2]: r === "hl2",
-    [e.HL3]: r === "hl3",
-    [e.HL4]: r === "hl4",
-    [e.HL5]: r === "hl5",
-    // COLORS
-    [e.TextPrimary]: t === "text-primary",
-    [e.TextSecondary]: t === "text-secondary",
-    [e.AccentPrimary]: t === "accent-primary",
-    [e.AccentSecondary]: t === "accent-secondary",
-    [e.ThemePrimary]: t === "theme-primary",
-    [e.ThemeSecondary]: t === "theme-secondary",
-    [e.Error]: t === "error",
-    [e.Success]: t === "success",
-    [e.Focus]: t === "focus",
-    [e.Link]: t === "link",
-    [e.Grey950]: t === "grey-950",
-    [e.Grey900]: t === "grey-900",
-    [e.Grey800]: t === "grey-800",
-    [e.Grey700]: t === "grey-700",
-    [e.Grey600]: t === "grey-600",
-    [e.Grey500]: t === "grey-500",
-    [e.Grey400]: t === "grey-400",
-    [e.Grey300]: t === "grey-300",
-    [e.Grey200]: t === "grey-200",
-    [e.Grey100]: t === "grey-100",
-    [e.Grey50]: t === "grey-50",
-    // PRESETS
-    [e.UnderSubmit]: o === "under-submit",
-    [e.UnderSubmitLight]: o === "under-submit-light"
-  });
-  return /* @__PURE__ */ p(
-    u,
-    {
-      ref: h,
-      "data-testid": l["data-testid"] || "content",
-      tag: d,
-      alwaysRender: !1,
-      className: z,
-      ...l,
-      children: v
+}, _e = G(
+  ({
+    children: v,
+    className: m,
+    preset: o,
+    lined: g = !1,
+    align: y = "left",
+    tag: c = "p",
+    weight: _ = "regular",
+    size: s = "body",
+    color: a = "text-primary",
+    ...l
+  }, h) => {
+    let d = c, n = _, r = s, t = a;
+    if (o) {
+      const i = ce[o];
+      c !== "p" && c !== i.tag && console.warn(
+        `Text component: 'tag' prop will be overridden by 'preset="${o}"'. Remove explicit 'tag' prop if not intended.`
+      ), _ !== "regular" && _ !== i.weight && console.warn(
+        `Text component: 'weight' prop will be overridden by 'preset="${o}"'. Remove explicit 'weight' prop if not intended.`
+      ), s !== "body" && s !== i.size && console.warn(
+        `Text component: 'size' prop will be overridden by 'preset="${o}"'. Remove explicit 'size' prop if not intended.`
+      ), a !== "text-primary" && a !== i.color && console.warn(
+        `Text component: 'color' prop will be overridden by 'preset="${o}"'. Remove explicit 'color' prop if not intended.`
+      ), d = i.tag, n = i.weight, r = i.size, t = i.color;
     }
-  );
-});
+    const z = L(m, {
+      [e.Lined]: g,
+      // ALIGNMENTS
+      [e.Left]: y === "left",
+      [e.Center]: y === "center",
+      [e.Right]: y === "right",
+      // FONT WEIGHTS
+      [e.Light]: n === "light",
+      [e.Regular]: n === "regular",
+      [e.Medium]: n === "medium",
+      [e.Bold]: n === "bold",
+      // FONT SIZES
+      [e.BodyExtraSmall]: r === "body-extra-small",
+      [e.BodySmall]: r === "body-small",
+      [e.Body]: r === "body",
+      [e.BodyLarge]: r === "body-large",
+      [e.HL1]: r === "hl1",
+      [e.HL2]: r === "hl2",
+      [e.HL3]: r === "hl3",
+      [e.HL4]: r === "hl4",
+      [e.HL5]: r === "hl5",
+      // COLORS
+      [e.TextPrimary]: t === "text-primary",
+      [e.TextSecondary]: t === "text-secondary",
+      [e.AccentPrimary]: t === "accent-primary",
+      [e.AccentSecondary]: t === "accent-secondary",
+      [e.ThemePrimary]: t === "theme-primary",
+      [e.ThemeSecondary]: t === "theme-secondary",
+      [e.Error]: t === "error",
+      [e.Success]: t === "success",
+      [e.Focus]: t === "focus",
+      [e.Link]: t === "link",
+      [e.Grey950]: t === "grey-950",
+      [e.Grey900]: t === "grey-900",
+      [e.Grey800]: t === "grey-800",
+      [e.Grey700]: t === "grey-700",
+      [e.Grey600]: t === "grey-600",
+      [e.Grey500]: t === "grey-500",
+      [e.Grey400]: t === "grey-400",
+      [e.Grey300]: t === "grey-300",
+      [e.Grey200]: t === "grey-200",
+      [e.Grey100]: t === "grey-100",
+      [e.Grey50]: t === "grey-50",
+      // PRESETS
+      [e.UnderSubmit]: o === "under-submit",
+      [e.UnderSubmitLight]: o === "under-submit-light"
+    });
+    return /* @__PURE__ */ p(
+      u,
+      {
+        ref: h,
+        "data-testid": l["data-testid"] || "content",
+        tag: d,
+        alwaysRender: !1,
+        className: z,
+        ...l,
+        children: v
+      }
+    );
+  }
+);
 _e.displayName = "Text";
 export {
   _e as Text

package/dist/controls/buttons/button/button.component.d.ts

@@ -10,6 +10,8 @@ export interface ButtonProps extends Base {
     disabled?: boolean;
     info?: ReactNode;
     fullWidth?: boolean;
+    fullWidthUntil?: 768 | 1024 | 1200;
+    fullWidthFrom?: 768 | 1024 | 1200;
     loading?: boolean;
     preventDefault?: boolean;
     blurAfterClick?: boolean;
@@ -17,4 +19,4 @@ export interface ButtonProps extends Base {
     onFocus?: () => void;
     onBlur?: () => void;
 }
-export declare const Button: ({ text, color, textSize, infoSize, type, disabled, info, fullWidth, loading, preventDefault, blurAfterClick, onClick, onFocus, onBlur, ...base }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: ({ text, color, textSize, infoSize, type, disabled, info, fullWidth, fullWidthUntil, fullWidthFrom, loading, preventDefault, blurAfterClick, onClick, onFocus, onBlur, ...base }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/controls/buttons/button/button.component.js

@@ -1,94 +1,124 @@
-import { jsxs as c, jsx as n } from "react/jsx-runtime";
-import _ from "clsx";
-import { FadeScale as x } from "../../../animations/fade-scale/fade-scale.component.js";
-import { Loader as C } from "../../../components/loader/loader.component.js";
-import { Content as T } from "../../../utils/content/content.component.js";
-import { withControl as B, baseProps as d } from "../../../utils/functions/functions.util.js";
-import '../../../assets/button-CE_Bd7VQ.css';const F = "_Button_esa05_1", N = "_SM_esa05_19", S = "_LG_esa05_24", b = "_Tertiary_esa05_24", D = "_Text_esa05_28", G = "_MD_esa05_34", P = "_Primary_esa05_62", I = "_Info_esa05_71", W = "_Secondary_esa05_75", g = "_Loading_esa05_111", w = "_FullWidth_esa05_119", $ = "_Content_esa05_123", j = "_Loader_esa05_154", t = {
-  Button: F,
-  SM: N,
+import { jsxs as d, jsx as _ } from "react/jsx-runtime";
+import { useEffect as x } from "react";
+import u from "clsx";
+import { FadeScale as U } from "../../../animations/fade-scale/fade-scale.component.js";
+import { Loader as b } from "../../../components/loader/loader.component.js";
+import { Content as w } from "../../../utils/content/content.component.js";
+import { withControl as v, baseProps as m } from "../../../utils/functions/functions.util.js";
+import '../../../assets/button-BMjMeK04.css';const C = "_Button_14or2_1", T = "_SM_14or2_19", S = "_LG_14or2_24", k = "_Tertiary_14or2_24", N = "_Text_14or2_28", D = "_MD_14or2_34", G = "_Primary_14or2_62", P = "_Info_14or2_71", I = "_Secondary_14or2_75", g = "_Loading_14or2_111", $ = "_FullWidth_14or2_119", j = "_FullWidthUntil768_14or2_123", E = "_FullWidthUntil1024_14or2_124", q = "_FullWidthUntil1200_14or2_125", A = "_FullWidthFrom768_14or2_147", H = "_FullWidthFrom1024_14or2_148", J = "_FullWidthFrom1200_14or2_149", K = "_Content_14or2_171", O = "_Loader_14or2_202", t = {
+  Button: C,
+  SM: T,
   LG: S,
-  Tertiary: b,
-  Text: D,
-  MD: G,
-  Primary: P,
-  Info: I,
-  Secondary: W,
+  Tertiary: k,
+  Text: N,
+  MD: D,
+  Primary: G,
+  Info: P,
+  Secondary: I,
   Loading: g,
-  FullWidth: w,
-  Content: $,
-  Loader: j
-}, J = ({
-  text: i,
-  color: e = "primary",
-  textSize: s = "md",
-  infoSize: r = "sm",
-  type: m = "button",
-  disabled: l = !1,
-  info: y = "",
-  fullWidth: u = !1,
-  loading: a = !1,
-  preventDefault: p = !1,
+  FullWidth: $,
+  FullWidthUntil768: j,
+  FullWidthUntil1024: E,
+  FullWidthUntil1200: q,
+  FullWidthFrom768: A,
+  FullWidthFrom1024: H,
+  FullWidthFrom1200: J,
+  Content: K,
+  Loader: O
+}, tt = ({
+  text: F,
+  color: i = "primary",
+  textSize: l = "md",
+  infoSize: a = "sm",
+  type: h = "button",
+  disabled: y = !1,
+  info: p = "",
+  fullWidth: o = !1,
+  fullWidthUntil: n,
+  fullWidthFrom: e,
+  loading: s = !1,
+  preventDefault: W = !1,
   blurAfterClick: L = !1,
   onClick: f = () => {
   },
-  onFocus: h,
+  onFocus: B,
   onBlur: M,
-  ...o
-}) => /* @__PURE__ */ c(
-  "button",
-  {
-    "data-testid": d(o, "data-testid", "button"),
-    type: m,
-    disabled: l || a,
-    className: _(t.Button, d(o, "className"), {
-      [t.SM]: s === "sm",
-      [t.MD]: s === "md",
-      [t.LG]: s === "lg",
-      [t.Primary]: e === "primary",
-      [t.Secondary]: e === "secondary",
-      [t.Tertiary]: e === "tertiary",
-      [t.FullWidth]: u,
-      [t.Loading]: a
-    }),
-    onClick: B(f, { prevent: p, blur: L }),
-    onFocus: () => h?.(),
-    onBlur: () => M?.(),
-    children: [
-      a && /* @__PURE__ */ n(
-        C,
-        {
-          size: "xs",
-          color: (() => {
-            switch (e) {
-              case "primary":
-                return "white";
-              case "secondary":
-                return "text-secondary";
-              case "tertiary":
-                return "text-primary";
-            }
-          })(),
-          className: t.Loader
-        }
-      ),
-      /* @__PURE__ */ c(x, { name: "content", keepMount: !0, condition: !a, className: t.Content, children: [
-        /* @__PURE__ */ n("span", { className: t.Text, children: i }),
-        /* @__PURE__ */ n(
-          T,
+  ...c
+}) => {
+  const r = n !== void 0 && e !== void 0;
+  return x(() => {
+    if (r) {
+      console.warn(
+        "[ui-kit] Button: `fullWidthUntil` and `fullWidthFrom` are mutually exclusive. Both are set — neither will be applied. Use only one."
+      );
+      return;
+    }
+    n !== void 0 && !o && console.warn(
+      "[ui-kit] Button: `fullWidthUntil` is set but `fullWidth` is not true. `fullWidthUntil` has no effect without `fullWidth`."
+    ), e !== void 0 && !o && console.warn(
+      "[ui-kit] Button: `fullWidthFrom` is set but `fullWidth` is not true. `fullWidthFrom` has no effect without `fullWidth`."
+    );
+  }, [o, n, e, r]), /* @__PURE__ */ d(
+    "button",
+    {
+      "data-testid": m(c, "data-testid", "button"),
+      type: h,
+      disabled: y || s,
+      className: u(t.Button, m(c, "className"), {
+        [t.SM]: l === "sm",
+        [t.MD]: l === "md",
+        [t.LG]: l === "lg",
+        [t.Primary]: i === "primary",
+        [t.Secondary]: i === "secondary",
+        [t.Tertiary]: i === "tertiary",
+        [t.FullWidth]: o && n === void 0 && e === void 0,
+        [t.FullWidthUntil768]: o && !r && n === 768,
+        [t.FullWidthUntil1024]: o && !r && n === 1024,
+        [t.FullWidthUntil1200]: o && !r && n === 1200,
+        [t.FullWidthFrom768]: o && !r && e === 768,
+        [t.FullWidthFrom1024]: o && !r && e === 1024,
+        [t.FullWidthFrom1200]: o && !r && e === 1200,
+        [t.Loading]: s
+      }),
+      onClick: v(f, { prevent: W, blur: L }),
+      onFocus: () => B?.(),
+      onBlur: () => M?.(),
+      children: [
+        s && /* @__PURE__ */ _(
+          b,
           {
-            className: _(t.Info, {
-              [t.SM]: r === "sm",
-              [t.MD]: r === "md",
-              [t.LG]: r === "lg"
-            }),
-            children: y
+            size: "xs",
+            color: (() => {
+              switch (i) {
+                case "primary":
+                  return "white";
+                case "secondary":
+                  return "text-secondary";
+                case "tertiary":
+                  return "text-primary";
+              }
+            })(),
+            className: t.Loader
           }
-        )
-      ] })
-    ]
-  }
-);
+        ),
+        /* @__PURE__ */ d(U, { name: "content", keepMount: !0, condition: !s, className: t.Content, children: [
+          /* @__PURE__ */ _("span", { className: t.Text, children: F }),
+          /* @__PURE__ */ _(
+            w,
+            {
+              className: u(t.Info, {
+                [t.SM]: a === "sm",
+                [t.MD]: a === "md",
+                [t.LG]: a === "lg"
+              }),
+              children: p
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
 export {
-  J as Button
+  tt as Button
 };

package/package.json

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

package/dist/assets/button-CE_Bd7VQ.css

@@ -1 +0,0 @@
-._Button_esa05_1{position:relative;box-sizing:border-box;border:none;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:border-color var(--rm-ui-amimation-speed-primary) var(--rm-ui-amimation-cubic-primary),background-color var(--rm-ui-amimation-speed-primary) var(--rm-ui-amimation-cubic-primary)}._Button_esa05_1:disabled{cursor:not-allowed;opacity:.33}._Button_esa05_1._SM_esa05_19{border-radius:var(--rm-ui-border-radius-sm);padding:var(--rm-ui-padding-xs) var(--rm-ui-padding-sm)}._Button_esa05_1._LG_esa05_24._Tertiary_esa05_24{padding:calc(var(--rm-ui-padding-xs) - 1px) calc(var(--rm-ui-padding-sm) - 1px)}._Button_esa05_1._SM_esa05_19 ._Text_esa05_28{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)}._Button_esa05_1._MD_esa05_34{border-radius:var(--rm-ui-border-radius-md);padding:var(--rm-ui-padding-sm) var(--rm-ui-padding-lg)}._Button_esa05_1._MD_esa05_34._Tertiary_esa05_24{padding:calc(var(--rm-ui-padding-sm) - 1px) calc(var(--rm-ui-padding-lg) - 1px)}._Button_esa05_1._LG_esa05_24{border-radius:var(--rm-ui-border-radius-md);padding:var(--rm-ui-padding-sm) var(--rm-ui-padding-lg)}._Button_esa05_1._LG_esa05_24._Tertiary_esa05_24{padding:calc(var(--rm-ui-padding-sm) - 1px) calc(var(--rm-ui-padding-lg) - 1px)}._Button_esa05_1._MD_esa05_34 ._Text_esa05_28{font-size:var(--rm-ui-font-size-body);line-height:var(--rm-ui-line-height-body)}._Button_esa05_1._LG_esa05_24 ._Text_esa05_28{font-size:var(--rm-ui-font-size-body-large);line-height:1.2}._Button_esa05_1._Primary_esa05_62{background-color:var(--rm-ui-next-btn-bg)}._Button_esa05_1._Primary_esa05_62:hover{background-color:var(--rm-ui-next-btn-bg-hover)}._Button_esa05_1._Primary_esa05_62 ._Text_esa05_28,._Button_esa05_1._Primary_esa05_62 ._Info_esa05_71{color:#fff}._Button_esa05_1._Secondary_esa05_75{border:1px solid transparent;background-color:transparent}._Button_esa05_1._Secondary_esa05_75:hover{border-color:var(--rm-ui-grey-400)}._Button_esa05_1._Secondary_esa05_75:hover ._Text_esa05_28{color:var(--rm-ui-grey-400);border-color:var(--rm-ui-grey-400)}._Button_esa05_1._Secondary_esa05_75 ._Text_esa05_28,._Button_esa05_1._Secondary_esa05_75 ._Info_esa05_71{color:var(--rm-ui-color-text-secondary)}._Button_esa05_1._Tertiary_esa05_24{border:1px solid var(--rm-ui-grey-300);background-color:transparent}._Button_esa05_1._Tertiary_esa05_24:hover{border-color:var(--rm-ui-grey-200)}._Button_esa05_1._Tertiary_esa05_24:hover ._Text_esa05_28{color:var(--rm-ui-grey-700)}._Button_esa05_1._Tertiary_esa05_24 ._Text_esa05_28,._Button_esa05_1._Tertiary_esa05_24 ._Info_esa05_71{color:var(--rm-ui-color-text-primary)}._Button_esa05_1:not(._Loading_esa05_111):not(:disabled):hover{cursor:pointer}._Button_esa05_1:focus{outline-color:var(--rm-ui-color-focus)}._Button_esa05_1._FullWidth_esa05_119{width:100%}._Content_esa05_123{display:flex;flex-direction:column}._Info_esa05_71{flex-basis:100%;font-weight:var(--rm-ui-font-weight-regular)}._Info_esa05_71._SM_esa05_19{font-size:var(--rm-ui-font-size-body-small);line-height:1.2}._Info_esa05_71._MD_esa05_34{font-size:var(--rm-ui-font-size-body);line-height:1.2}._Info_esa05_71._LG_esa05_24{font-size:var(--rm-ui-font-size-body-large);line-height:1.2}._Text_esa05_28{font-weight:var(--rm-ui-font-weight-medium);transition:color var(--rm-ui-amimation-speed-primary) var(--rm-ui-amimation-cubic-primary)}._Loader_esa05_154{position:absolute}

package/dist/assets/message-CgGyIv5e.css

@@ -1 +0,0 @@
-._Message_fkc6l_1{--message-icon-size: 24px;border-radius:var(--rm-ui-border-radius-md);padding:var(--rm-ui-padding-md);display:flex;flex-direction:row;flex-wrap:nowrap;align-items:flex-start;justify-content:flex-start;gap:var(--rm-ui-padding-xs);font-size:var(--rm-ui-font-size-body);line-height:var(--rm-ui-line-height-body)}._Success_fkc6l_15{background-color:var(--rm-ui-message-success-secondary)}._Success_fkc6l_15 ._Icon_fkc6l_19{stroke:var(--rm-ui-message-success-primary)}._Question_fkc6l_23{background-color:var(--rm-ui-message-question-secondary)}._Question_fkc6l_23 ._Icon_fkc6l_19{stroke:var(--rm-ui-message-question-primary)}._Error_fkc6l_31{background-color:var(--rm-ui-message-error-secondary)}._Error_fkc6l_31 ._Icon_fkc6l_19{stroke:var(--rm-ui-message-error-primary)}._Info_fkc6l_39{background-color:var(--rm-ui-message-info-secondary)}._Info_fkc6l_39 ._Icon_fkc6l_19{stroke:var(--rm-ui-message-info-primary)}._Icon_fkc6l_19{width:var(--message-icon-size);height:var(--message-icon-size)}._Content_fkc6l_52{flex-basis:calc(100% - var(--message-icon-size) - var(--rm-ui-padding-xs));display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:var(--rm-ui-padding-xxs)}._Title_fkc6l_62{font-weight:var(--rm-ui-font-weight-medium)}._Text_fkc6l_66{font-weight:var(--rm-ui-font-weight-regular)}