@arthurzakharov/ui-kit 2.4.1 → 2.5.2

package/dist/controls/primitives/choice/choice.component.js

@@ -1,16 +1,15 @@
 import { jsxs as i, jsx as t } from "react/jsx-runtime";
 import { Check as l } from "lucide-react";
-import n from "clsx";
-import { baseProps as d } from "../../../utils/functions/functions.util.js";
-import '../../../assets/choice-j496CvVc.css';const h = "_Choice_2ykst_1", x = "_Focused_2ykst_20", y = "_Disabled_2ykst_20", L = "_Hovered_2ykst_24", S = "_Idle_2ykst_24", m = "_Success_2ykst_36", C = "_Mark_2ykst_44", M = "_Radio_2ykst_59", b = "_Checked_2ykst_63", u = "_XXS_2ykst_77", D = "_XS_2ykst_82", f = "_SM_2ykst_87", v = "_MD_2ykst_92", F = "_LG_2ykst_97", G = "_XL_2ykst_102", H = "_XXL_2ykst_107", I = "_XXXL_2ykst_112", N = "_Checkbox_2ykst_124", s = {
+import { clsx as n, baseProps as d } from "../../../utils/functions/functions.util.js";
+import '../../../assets/choice-j496CvVc.css';const h = "_Choice_2ykst_1", x = "_Focused_2ykst_20", y = "_Disabled_2ykst_20", L = "_Hovered_2ykst_24", S = "_Idle_2ykst_24", C = "_Success_2ykst_36", m = "_Mark_2ykst_44", M = "_Radio_2ykst_59", b = "_Checked_2ykst_63", u = "_XXS_2ykst_77", D = "_XS_2ykst_82", f = "_SM_2ykst_87", v = "_MD_2ykst_92", F = "_LG_2ykst_97", G = "_XL_2ykst_102", H = "_XXL_2ykst_107", I = "_XXXL_2ykst_112", N = "_Checkbox_2ykst_124", s = {
   Choice: h,
   Focused: x,
   Disabled: y,
   Hovered: L,
   Idle: S,
-  Success: m,
+  Success: C,
   Error: "_Error_2ykst_40",
-  Mark: C,
+  Mark: m,
   Radio: M,
   Checked: b,
   XXS: u,
@@ -22,15 +21,15 @@ import '../../../assets/choice-j496CvVc.css';const h = "_Choice_2ykst_1", x = "_
   XXL: H,
   XXXL: I,
   Checkbox: N
-}, g = ({
+}, p = ({
   // Choice props
   type: o,
   checked: k,
   state: _ = "idle",
   size: c = "md",
   focused: X = !1,
-  hovered: r = !1,
-  disabled: a = !1,
+  hovered: a = !1,
+  disabled: r = !1,
   // Base props
   ...e
 }) => /* @__PURE__ */ i(
@@ -40,8 +39,8 @@ import '../../../assets/choice-j496CvVc.css';const h = "_Choice_2ykst_1", x = "_
     className: n(s.Choice, d(e, "className"), {
       [s.Checked]: k,
       [s.Focused]: X,
-      [s.Hovered]: r,
-      [s.Disabled]: a,
+      [s.Hovered]: a,
+      [s.Disabled]: r,
       [s.Radio]: o === "radio",
       [s.Checkbox]: o === "checkbox",
       [s.Idle]: _ === "idle",
@@ -63,5 +62,5 @@ import '../../../assets/choice-j496CvVc.css';const h = "_Choice_2ykst_1", x = "_
   }
 );
 export {
-  g as Choice
+  p as Choice
 };

package/dist/controls/primitives/error-message/error-message.component.js

@@ -1,10 +1,9 @@
 import { jsx as o } from "react/jsx-runtime";
-import t from "clsx";
+import { clsx as t, baseProps as s } from "../../../utils/functions/functions.util.js";
 import { Content as a } from "../../../utils/content/content.component.js";
-import { baseProps as s } from "../../../utils/functions/functions.util.js";
 import '../../../assets/error-message-CQHYhXbt.css';const m = "_ErrorMessage_dqn66_1", c = {
   ErrorMessage: m
-}, p = ({
+}, i = ({
   // ErrorMessage props
   text: e,
   // Base props
@@ -18,5 +17,5 @@ import '../../../assets/error-message-CQHYhXbt.css';const m = "_ErrorMessage_dqn
   }
 );
 export {
-  p as ErrorMessage
+  i as ErrorMessage
 };

package/dist/controls/primitives/hidden-input/hidden-input.component.js

@@ -1,38 +1,37 @@
-import { jsx as c } from "react/jsx-runtime";
-import l from "clsx";
-import { baseProps as d } from "../../../utils/functions/functions.util.js";
-import '../../../assets/hidden-input-DHJQHUKd.css';const f = "_HiddenInput_bej3d_1", v = {
-  HiddenInput: f
-}, g = ({
-  type: i,
-  id: a,
+import { jsx as m } from "react/jsx-runtime";
+import { clsx as l, baseProps as d } from "../../../utils/functions/functions.util.js";
+import '../../../assets/hidden-input-DHJQHUKd.css';const v = "_HiddenInput_bej3d_1", H = {
+  HiddenInput: v
+}, b = ({
+  type: a,
+  id: i,
   name: p,
-  value: r,
-  disabled: s,
+  value: s,
+  disabled: r,
   checked: o,
   onChange: n,
   onFocus: u,
-  onBlur: m,
+  onBlur: c,
   // Base props
   ...e
-}) => /* @__PURE__ */ c(
+}) => /* @__PURE__ */ m(
   "input",
   {
     "data-testid": d(e, "data-testid", "hidden-input"),
-    type: i,
-    id: a,
+    type: a,
+    id: i,
     name: p,
-    value: r,
+    value: s,
     checked: o,
-    disabled: s,
-    className: l(v.HiddenInput, d(e, "className")),
+    disabled: r,
+    className: l(H.HiddenInput, d(e, "className")),
     onChange: (t) => {
       t.preventDefault(), t.nativeEvent?.pageX || t.nativeEvent.pageY ? (t.currentTarget.blur(), n(t, "mouse")) : n(t, "keyboard");
     },
     onFocus: u,
-    onBlur: m
+    onBlur: c
   }
 );
 export {
-  g as HiddenInput
+  b as HiddenInput
 };

package/dist/controls/primitives/label/label.component.js

@@ -1,36 +1,35 @@
 import { jsx as a } from "react/jsx-runtime";
-import i from "clsx";
-import { Content as _ } from "../../../utils/content/content.component.js";
-import { baseProps as o } from "../../../utils/functions/functions.util.js";
-import '../../../assets/label-BKXQlPJi.css';const d = "_Label_85kr5_1", n = "_Idle_85kr5_7", m = "_Active_85kr5_12", p = "_Success_85kr5_21", e = {
+import { clsx as _, baseProps as t } from "../../../utils/functions/functions.util.js";
+import { Content as i } from "../../../utils/content/content.component.js";
+import '../../../assets/label-BKXQlPJi.css';const d = "_Label_85kr5_1", n = "_Idle_85kr5_7", m = "_Active_85kr5_12", b = "_Success_85kr5_21", e = {
   Label: d,
   Idle: n,
   Active: m,
   Error: "_Error_85kr5_17",
-  Success: p
-}, L = ({
+  Success: b
+}, v = ({
   // Label props
-  text: t,
-  state: r = "idle",
-  position: c = "idle",
+  text: o,
+  state: c = "idle",
+  position: r = "idle",
   // Base props
   ...s
 }) => /* @__PURE__ */ a(
-  _,
+  i,
   {
-    "data-testid": o(s, "data-testid", "label"),
-    className: i(e.Label, o(s, "className"), {
-      [e.Idle]: c === "idle",
-      [e.Active]: c === "active",
-      [e.Error]: r === "error",
-      [e.Success]: r === "success"
+    "data-testid": t(s, "data-testid", "label"),
+    className: _(e.Label, t(s, "className"), {
+      [e.Idle]: r === "idle",
+      [e.Active]: r === "active",
+      [e.Error]: c === "error",
+      [e.Success]: c === "success"
     }),
     onClick: (l) => {
       l.stopPropagation();
     },
-    children: t
+    children: o
   }
 );
 export {
-  L as Label
+  v as Label
 };

package/dist/controls/primitives/radio-label/radio-label.component.js

@@ -1,16 +1,15 @@
 import { jsx as b } from "react/jsx-runtime";
 import { useToggle as a } from "usehooks-ts";
-import g from "clsx";
-import { baseProps as l } from "../../../utils/functions/functions.util.js";
+import { clsx as g, baseProps as l } from "../../../utils/functions/functions.util.js";
 import '../../../assets/radio-label-CZHWBUUt.css';const p = "_RadioLabel_1q9rv_1", L = {
   RadioLabel: p
-}, F = ({
+}, x = ({
   // RadioLabel props
   id: d,
   value: e,
   choice: r,
-  choices: i = [],
-  state: n = "idle",
+  choices: n = [],
+  state: i = "idle",
   children: c,
   // Base props
   ...o
@@ -31,11 +30,11 @@ import '../../../assets/radio-label-CZHWBUUt.css';const p = "_RadioLabel_1q9rv_1
         hovered: m,
         checked: typeof e == "string" ? e === r.value : e.includes(r.value),
         state: (() => {
-          switch (n) {
+          switch (i) {
             case "success":
               return "idle";
             case "error":
-              return i.some((f) => f.value === e) ? e === r.value ? "error" : "idle" : "error";
+              return n.some((f) => f.value === e) ? e === r.value ? "error" : "idle" : "error";
             case "idle":
               return "idle";
           }
@@ -45,5 +44,5 @@ import '../../../assets/radio-label-CZHWBUUt.css';const p = "_RadioLabel_1q9rv_1
   );
 };
 export {
-  F as RadioLabel
+  x as RadioLabel
 };

package/dist/controls/primitives/status/status.component.js

@@ -1,16 +1,15 @@
 import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { Circle as o, X as a, Check as _ } from "lucide-react";
-import i from "clsx";
-import { baseProps as t } from "../../../utils/functions/functions.util.js";
-import '../../../assets/status-ZxxbM9u1.css';const m = "_Status_rlg1f_1", C = "_Idle_rlg1f_6", d = "_Circle_rlg1f_6", f = "_Success_rlg1f_12", u = "_Check_rlg1f_34", n = "_X_rlg1f_35", s = {
-  Status: m,
-  Idle: C,
-  Circle: d,
-  Success: f,
+import { Circle as a, X as _, Check as o } from "lucide-react";
+import { clsx as i, baseProps as t } from "../../../utils/functions/functions.util.js";
+import '../../../assets/status-ZxxbM9u1.css';const C = "_Status_rlg1f_1", d = "_Idle_rlg1f_6", m = "_Circle_rlg1f_6", u = "_Success_rlg1f_12", f = "_Check_rlg1f_34", n = "_X_rlg1f_35", s = {
+  Status: C,
+  Idle: d,
+  Circle: m,
+  Success: u,
   Error: "_Error_rlg1f_18",
-  Check: u,
+  Check: f,
   X: n
-}, p = ({
+}, k = ({
   // Status props
   state: c,
   // Base props
@@ -25,12 +24,12 @@ import '../../../assets/status-ZxxbM9u1.css';const m = "_Status_rlg1f_1", C = "_
       [s.Error]: c === "error"
     }),
     children: [
-      /* @__PURE__ */ r(o, { className: s.Circle }),
-      /* @__PURE__ */ r(a, { className: s.X }),
-      /* @__PURE__ */ r(_, { className: s.Check })
+      /* @__PURE__ */ r(a, { className: s.Circle }),
+      /* @__PURE__ */ r(_, { className: s.X }),
+      /* @__PURE__ */ r(o, { className: s.Check })
     ]
   }
 );
 export {
-  p as Status
+  k as Status
 };

package/dist/controls/utils/types.d.ts

@@ -23,7 +23,7 @@ export type ControlLabelPosition = 'idle' | 'active';
 export type ControlCaptionSize = Extract<FontSize, 'body-extra-small' | 'body-small' | 'body' | 'body-large'>;
 export type ControlCaptionColor = Extract<FontColor, 'text-primary' | 'text-secondary' | 'accent-primary' | 'accent-secondary'>;
 export type ControlButtonColor = 'primary' | 'secondary' | 'tertiary';
-export type ControlButtonTypeColor = Extract<FontColor, 'text-primary' | 'text-secondary' | 'accent-primary' | 'accent-secondary' | 'theme-primary' | 'theme-secondary' | 'link'>;
+export type ControlButtonTypeColor = Extract<FontColor, 'text-primary' | 'text-secondary' | 'accent-primary' | 'accent-secondary' | 'theme-primary' | 'theme-secondary' | 'link' | 'under-submit'>;
 export type ControlButtonSize = 'sm' | 'md' | 'lg';
 export type ControlButtonType = 'submit' | 'reset' | 'button';
 export type QuestionPath = string[];

package/dist/main.d.ts

@@ -49,3 +49,4 @@ export { Svg, type SvgProps } from './utils/svg/svg.component';
 export { Text, type TextProps } from './components/text';
 export { UserPanel } from './components/user-panel';
 export { Warranty, type WarrantyProps } from './components/warranty';
+export { clsx } from './utils/functions';

package/dist/main.js

@@ -49,6 +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 { clsx as Yo } from "./utils/functions/functions.util.js";
 import './assets/main-DZmlIs7j.css';export {
   Z as AccordionTable,
   $ as BottomBar,
@@ -99,5 +100,6 @@ import './assets/main-DZmlIs7j.css';export {
   w as TextArea,
   k as TextField,
   Oo as UserPanel,
-  Vo as Warranty
+  Vo as Warranty,
+  Yo as clsx
 };

package/dist/utils/functions/functions.util.d.ts

@@ -28,4 +28,13 @@ export declare const withControl: <E extends SyntheticEvent<HTMLElement>>(handle
  * A helper function to extract a specific prop from a Base object, with an optional default value.
  */
 export declare function baseProps(base: Base, key: keyof Base, or?: Base[keyof Base]): string | undefined;
+type ClsxClassDictionary = Record<string, unknown>;
+type ClsxClassArray = ClsxClassValue[];
+type ClsxClassValue = ClsxClassArray | ClsxClassDictionary | string | number | bigint | null | boolean | undefined;
+/**
+ * Conditional class-name joiner. Drop-in replacement for the `clsx` npm package.
+ * Accepts strings, numbers, bigints, arrays (recursively), and dictionaries (truthy values' keys are included).
+ * Falsy values (`null`, `undefined`, `false`, `0`, `0n`, `''`) are skipped.
+ */
+export declare const clsx: (...inputs: ClsxClassValue[]) => string;
 export {};

package/dist/utils/functions/functions.util.js

@@ -1,23 +1,43 @@
-function i(t) {
-  return typeof t == "string";
+function o(n) {
+  return typeof n == "string";
 }
-function e(t) {
-  const n = /<\/?[a-z][\s\S]*>/i, r = /&(?:[a-z][a-z0-9]+|#\d+|#x[\da-f]+);/i;
-  return n.test(t) || r.test(t);
+function e(n) {
+  const i = /<\/?[a-z][\s\S]*>/i, t = /&(?:[a-z][a-z0-9]+|#\d+|#x[\da-f]+);/i;
+  return i.test(n) || t.test(n);
 }
-function o(t) {
-  return i(t) && e(t);
+function f(n) {
+  return o(n) && e(n);
 }
-const s = (t, n) => (r) => {
-  n?.prevent && r.preventDefault(), n?.stop && r.stopPropagation(), n?.blur && r.currentTarget.blur(), n?.withEvent ? t(r) : t();
+const u = (n, i) => (t) => {
+  i?.prevent && t.preventDefault(), i?.stop && t.stopPropagation(), i?.blur && t.currentTarget.blur(), i?.withEvent ? n(t) : n();
 };
-function u(t, n, r) {
-  return t[n] ? t[n] : r;
+function c(n, i, t) {
+  return n[i] ? n[i] : t;
 }
+const s = (...n) => {
+  const i = [];
+  for (const t of n)
+    if (t) {
+      if (typeof t == "string" || typeof t == "number" || typeof t == "bigint") {
+        i.push(String(t));
+        continue;
+      }
+      if (Array.isArray(t)) {
+        const r = s(...t);
+        r && i.push(r);
+        continue;
+      }
+      if (typeof t == "object")
+        for (const r in t)
+          t[r] && i.push(r);
+    }
+  return i.join(" ");
+};
 export {
-  u as baseProps,
+  c as baseProps,
+  s as clsx,
   e as containsHtml,
-  o as isHtmlString,
-  i as isString,
-  s as withControl
+  f as isHtmlString,
+  o as isString,
+  u as withControl
 };

package/dist/utils/functions/index.js

@@ -1,8 +1,9 @@
-import { baseProps as o, containsHtml as r, isHtmlString as n, isString as s, withControl as l } from "./functions.util.js";
+import { baseProps as o, clsx as r, containsHtml as s, isHtmlString as n, isString as l, withControl as m } from "./functions.util.js";
 export {
   o as baseProps,
-  r as containsHtml,
+  r as clsx,
+  s as containsHtml,
   n as isHtmlString,
-  s as isString,
-  l as withControl
+  l as isString,
+  m as withControl
 };

package/dist/utils/svg/svg.component.js

@@ -1,5 +1,5 @@
 import { isValidElement as m, cloneElement as r } from "react";
-import t from "clsx";
+import { clsx as t } from "../functions/functions.util.js";
 const a = (e) => {
   const { icon: s = null, className: l = "", ...o } = e;
   return m(s) ? r(s, {

package/dist/utils/types.d.ts

@@ -6,7 +6,7 @@ export declare const FONT_WEIGHT: readonly ["light", "regular", "medium", "bold"
 export type FontWeight = (typeof FONT_WEIGHT)[number];
 export declare const FONT_SIZE: readonly ["body-extra-small", "body-small", "body", "body-large", "hl5", "hl4", "hl3", "hl2", "hl1"];
 export type FontSize = (typeof FONT_SIZE)[number];
-export declare const FONT_COLOR: readonly ["text-primary", "text-secondary", "accent-primary", "accent-secondary", "theme-primary", "theme-secondary", "error", "success", "focus", "link", "grey-950", "grey-900", "grey-800", "grey-700", "grey-600", "grey-500", "grey-400", "grey-300", "grey-200", "grey-100", "grey-50"];
+export declare const FONT_COLOR: readonly ["text-primary", "text-secondary", "accent-primary", "accent-secondary", "theme-primary", "theme-secondary", "error", "success", "focus", "link", "grey-950", "grey-900", "grey-800", "grey-700", "grey-600", "grey-500", "grey-400", "grey-300", "grey-200", "grey-100", "grey-50", "under-submit"];
 export type FontColor = (typeof FONT_COLOR)[number];
 export interface Base {
     className?: string;
@@ -14,4 +14,6 @@ export interface Base {
 }
 export declare const TEXT_PRESET: readonly ["page-info", "page-subtitle", "page-title", "sidebar-title", "step-title", "under-submit", "under-submit-light"];
 export type TextPreset = (typeof TEXT_PRESET)[number];
+export declare const BUTTON_TEXT_PRESET: readonly ["body-small-link", "body-link", "body-underline-link", "body-small-under-submit"];
+export type ButtonTextPreset = (typeof BUTTON_TEXT_PRESET)[number];
 export type TagNames = keyof HTMLElementTagNameMap;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arthurzakharov/ui-kit",
   "private": false,
-  "version": "2.4.1",
+  "version": "2.5.2",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -29,7 +29,6 @@
     "test-storybook:coverage": "vitest --project=storybook --coverage"
   },
   "peerDependencies": {
-    "clsx": "^2.1.1",
     "lucide-react": "^0.562.0",
     "motion": "^12.26.1",
     "react": "^18.3.1",
@@ -54,7 +53,6 @@
     "@vitejs/plugin-react": "^5.1.2",
     "@vitest/browser-playwright": "^4.0.16",
     "@vitest/coverage-v8": "^4.0.18",
-    "clsx": "^2.1.1",
     "es-toolkit": "^1.44.0",
     "eslint": "^9.39.2",
     "eslint-plugin-react-hooks": "^7.0.1",

package/dist/assets/button-text-NCcWZ-LB.css

@@ -1 +0,0 @@
-._ButtonText_ruqqq_1{display:inline-flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:var(--rm-ui-padding-xs);border-radius:var(--rm-ui-border-radius-sm)}._TextPrimary_ruqqq_10{color:var(--rm-ui-color-text-primary)}._TextSecondary_ruqqq_14{color:var(--rm-ui-color-text-secondary)}._AccentPrimary_ruqqq_18{color:var(--rm-ui-color-accent-primary)}._AccentSecondary_ruqqq_22{color:var(--rm-ui-color-accent-secondary)}._ThemePrimary_ruqqq_26{color:var(--rm-ui-color-theme-primary)}._ThemeSecondary_ruqqq_30{color:var(--rm-ui-color-theme-secondary)}._Link_ruqqq_34{color:var(--rm-ui-color-link)}._Left_ruqqq_38{flex-direction:row}._Right_ruqqq_42{flex-direction:row-reverse}._Icon_ruqqq_46{stroke-width:1.5}._SM_ruqqq_50 ._Icon_ruqqq_46{width:20px;height:20px}._MD_ruqqq_55 ._Icon_ruqqq_46{width:24px;height:24px}._LG_ruqqq_60 ._Icon_ruqqq_46{width:26px;height:26px}._SM_ruqqq_50 ._Content_ruqqq_65{font-size:var(--rm-ui-font-size-body-small);line-height:var(--rm-ui-line-height-body-small)}._SM_ruqqq_50._WithIcon_ruqqq_70 ._Content_ruqqq_65{line-height:calc(var(--rm-ui-line-height-body-small) - var(--rm-ui-padding-xxs) * 2)}._MD_ruqqq_55 ._Content_ruqqq_65{font-size:var(--rm-ui-font-size-body);line-height:var(--rm-ui-line-height-body)}._MD_ruqqq_55._WithIcon_ruqqq_70 ._Content_ruqqq_65{line-height:calc(var(--rm-ui-line-height-body) - var(--rm-ui-padding-xxs) * 2)}._LG_ruqqq_60 ._Content_ruqqq_65{font-size:var(--rm-ui-font-size-hl4);line-height:var(--rm-ui-line-height-hl4)}._LG_ruqqq_60._WithIcon_ruqqq_70 ._Content_ruqqq_65{line-height:calc(var(--rm-ui-line-height-hl4) - var(--rm-ui-padding-xxs) * 2)}._Content_ruqqq_65{text-decoration:none}._Light_ruqqq_96{font-weight:var(--rm-ui-font-weight-light)}._Regular_ruqqq_100{font-weight:var(--rm-ui-font-weight-regular)}._Medium_ruqqq_104{font-weight:var(--rm-ui-font-weight-medium)}._Bold_ruqqq_108{font-weight:var(--rm-ui-font-weight-bold)}._Underlined_ruqqq_112{text-decoration:underline}

package/dist/assets/text-DYEJSFKw.css

@@ -1 +0,0 @@
-._Lined_zitvv_1{text-decoration:underline}._Left_zitvv_7{text-align:left}._Center_zitvv_11{text-align:center}._Right_zitvv_15{text-align:right}._Light_zitvv_21{font-weight:var(--rm-ui-font-weight-light)}._Regular_zitvv_25{font-weight:var(--rm-ui-font-weight-regular)}._Medium_zitvv_29{font-weight:var(--rm-ui-font-weight-medium)}._Bold_zitvv_33{font-weight:var(--rm-ui-font-weight-bold)}._BodyExtraSmall_zitvv_39{font-size:var(--rm-ui-font-size-body-extra-small);line-height:var(--rm-ui-line-height-body-extra-small)}._BodySmall_zitvv_44{font-size:var(--rm-ui-font-size-body-small);line-height:var(--rm-ui-line-height-body-small)}._Body_zitvv_39{font-size:var(--rm-ui-font-size-body);line-height:var(--rm-ui-line-height-body)}._BodyLarge_zitvv_54{font-size:var(--rm-ui-font-size-body-large);line-height:var(--rm-ui-line-height-body-large)}._HL1_zitvv_59{font-size:var(--rm-ui-font-size-hl1);line-height:var(--rm-ui-line-height-hl1)}._HL2_zitvv_64{font-size:var(--rm-ui-font-size-hl2);line-height:var(--rm-ui-line-height-hl2)}._HL3_zitvv_69{font-size:var(--rm-ui-font-size-hl3);line-height:var(--rm-ui-line-height-hl3)}._HL4_zitvv_74{font-size:var(--rm-ui-font-size-hl4);line-height:var(--rm-ui-line-height-hl4)}._HL5_zitvv_79{font-size:var(--rm-ui-font-size-hl5);line-height:var(--rm-ui-line-height-hl5)}._TextPrimary_zitvv_86{color:var(--rm-ui-color-text-primary)}._TextSecondary_zitvv_90{color:var(--rm-ui-color-text-secondary)}._AccentPrimary_zitvv_94{color:var(--rm-ui-color-accent-primary)}._AccentSecondary_zitvv_98{color:var(--rm-ui-color-accent-secondary)}._ThemePrimary_zitvv_102{color:var(--rm-ui-color-theme-primary)}._ThemeSecondary_zitvv_106{color:var(--rm-ui-color-theme-secondary)}._Error_zitvv_110{color:var(--rm-ui-color-error)}._Success_zitvv_114{color:var(--rm-ui-color-success)}._Focus_zitvv_118{color:var(--rm-ui-color-focus)}._Link_zitvv_122{color:var(--rm-ui-color-link)}._Grey950_zitvv_126{color:var(--rm-ui-grey-950)}._Grey900_zitvv_130{color:var(--rm-ui-grey-900)}._Grey800_zitvv_134{color:var(--rm-ui-grey-800)}._Grey700_zitvv_138{color:var(--rm-ui-grey-700)}._Grey600_zitvv_142{color:var(--rm-ui-grey-600)}._Grey500_zitvv_146{color:var(--rm-ui-grey-500)}._Grey400_zitvv_150{color:var(--rm-ui-grey-400)}._Grey300_zitvv_154{color:var(--rm-ui-grey-300)}._Grey200_zitvv_158{color:var(--rm-ui-grey-200)}._Grey100_zitvv_162{color:var(--rm-ui-grey-100)}._Grey50_zitvv_146{color:var(--rm-ui-grey-50)}._UnderSubmit_zitvv_172,._UnderSubmitLight_zitvv_173{text-align:center}._UnderSubmit_zitvv_172 button,._UnderSubmit_zitvv_172 *[role=button]{color:var(--rm-ui-color-link);opacity:.7;outline-offset:2px}._UnderSubmit_zitvv_172 button:hover,._UnderSubmit_zitvv_172 *[role=button]:hover{text-decoration:underline}._UnderSubmit_zitvv_172 button:focus-visible,._UnderSubmit_zitvv_172 *[role=button]:focus-visible{outline-color:var(--rm-ui-color-focus)}._UnderSubmitLight_zitvv_173{color:var(--rm-ui-color-text-under-submit)}._UnderSubmitLight_zitvv_173 button,._UnderSubmitLight_zitvv_173 *[role=button]{color:var(--rm-ui-color-button-under-submit);opacity:.7;outline-offset:2px}._UnderSubmitLight_zitvv_173 button:hover,._UnderSubmitLight_zitvv_173 *[role=button]:hover{text-decoration:underline}._UnderSubmitLight_zitvv_173 button:focus-visible,._UnderSubmitLight_zitvv_173 *[role=button]:focus-visible{outline-color:var(--rm-ui-color-focus)}