@arthurzakharov/ui-kit 1.7.6 → 1.7.7

package/dist/assets/form-row-C_CTS-Xj.css

@@ -0,0 +1 @@
+._FormRow_v16lb_1{display:flex;flex-direction:column;align-items:stretch}._XXS_v16lb_7{gap:var(--rm-ui-padding-xxs)}._XS_v16lb_11{gap:var(--rm-ui-padding-xs)}._SM_v16lb_15{gap:var(--rm-ui-padding-sm)}._MD_v16lb_19{gap:var(--rm-ui-padding-md)}._LG_v16lb_23,._XL_v16lb_27{gap:var(--rm-ui-padding-xl)}._XXL_v16lb_31{gap:var(--rm-ui-padding-xxl)}._XXXL_v16lb_35{gap:var(--rm-ui-padding-xxxl)}._Child_v16lb_39{flex-grow:1}@media screen and (min-width:768px){._FormRow_v16lb_1{flex-direction:row}._Child_v16lb_39[data-children-quantity="1"]{width:100%}._Child_v16lb_39[data-children-quantity="2"]{width:50%}._Child_v16lb_39[data-children-quantity="3"]{width:calc(100% / 3)}._Child_v16lb_39[data-children-quantity="4"]{width:25%}}

package/dist/assets/info-panel-DT7lLHJR.css

@@ -0,0 +1 @@
+._InfoPanel_1xmmg_1{position:relative;padding:var(--rm-ui-padding-md) 0;background-color:var(--rm-ui-info-panel-bg);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)}._InfoPanel_1xmmg_1:before,._InfoPanel_1xmmg_1:after{content:"";display:block;position:absolute;top:0;z-index:1;height:100%;width:100vw;background-color:inherit}._InfoPanel_1xmmg_1:before{left:0}._InfoPanel_1xmmg_1:after{right:0}._List_1xmmg_30{position:relative;z-index:2;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:var(--rm-ui-padding-xs)}._Item_1xmmg_40{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--rm-ui-padding-xxs)}._Key_1xmmg_48{color:var(--rm-ui-color-text-secondary)}._Value_1xmmg_52{color:var(--rm-ui-color-text-primary)}@media screen and (min-width:480px){._Item_1xmmg_40{gap:var(--rm-ui-padding-xxs)}}

package/dist/components/form-row/form-row.component.js

@@ -1,35 +1,35 @@
-import { jsx as n } from "react/jsx-runtime";
-import { Children as t, isValidElement as x } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { Children as _, isValidElement as m } from "react";
 import c from "clsx";
-import { baseProps as m } from "../../utils/functions/functions.util.js";
-import '../../assets/form-row-Dx21oHae.css';const l = "_FormRow_ax4us_1", u = "_XXS_ax4us_7", a = "_XS_ax4us_11", i = "_SM_ax4us_15", L = "_MD_ax4us_19", d = "_LG_ax4us_23", e = "_XL_ax4us_27", S = "_XXL_ax4us_31", M = "_XXXL_ax4us_35", f = "_Child_ax4us_39", s = {
-  FormRow: l,
-  XXS: u,
-  XS: a,
-  SM: i,
-  MD: L,
-  LG: d,
-  XL: e,
-  XXL: S,
-  XXXL: M,
-  Child: f
-}, R = ({ children: X, gap: o = "sm", ..._ }) => t.count(X) === 0 ? null : /* @__PURE__ */ n(
+import { baseProps as n } from "../../utils/functions/functions.util.js";
+import '../../assets/form-row-C_CTS-Xj.css';const i = "_FormRow_v16lb_1", L = "_XXS_v16lb_7", d = "_XS_v16lb_11", e = "_SM_v16lb_15", v = "_MD_v16lb_19", x = "_LG_v16lb_23", S = "_XL_v16lb_27", b = "_XXL_v16lb_31", u = "_XXXL_v16lb_35", a = "_Child_v16lb_39", o = {
+  FormRow: i,
+  XXS: L,
+  XS: d,
+  SM: e,
+  MD: v,
+  LG: x,
+  XL: S,
+  XXL: b,
+  XXXL: u,
+  Child: a
+}, C = ({ children: t, gap: X = "sm", ...l }) => _.count(t) === 0 ? null : /* @__PURE__ */ r(
   "div",
   {
-    "data-testid": m(_, "data-testid", "form-row"),
-    className: c(s.FormRow, m(_, "className"), {
-      [s.XXS]: o === "xxs",
-      [s.XS]: o === "xs",
-      [s.SM]: o === "sm",
-      [s.MD]: o === "md",
-      [s.LG]: o === "lg",
-      [s.XL]: o === "xl",
-      [s.XXL]: o === "xxl",
-      [s.XXXL]: o === "xxxl"
+    "data-testid": n(l, "data-testid", "form-row"),
+    className: c(o.FormRow, n(l, "className"), {
+      [o.XXS]: X === "xxs",
+      [o.XS]: X === "xs",
+      [o.SM]: X === "sm",
+      [o.MD]: X === "md",
+      [o.LG]: X === "lg",
+      [o.XL]: X === "xl",
+      [o.XXL]: X === "xxl",
+      [o.XXXL]: X === "xxxl"
     }),
-    children: t.map(X, (r) => x(r) ? /* @__PURE__ */ n("div", { "data-children-quantity": t.count(X), className: s.Child, children: r }) : null)
+    children: _.map(t, (s) => m(s) ? /* @__PURE__ */ r("div", { "data-children-quantity": _.count(t), className: o.Child, children: s }) : null)
   }
 );
 export {
-  R as FormRow
+  C as FormRow
 };

package/dist/components/info-panel/info-panel.component.js

@@ -1,23 +1,23 @@
-import { jsx as e, jsxs as o } from "react/jsx-runtime";
-import c from "clsx";
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import o from "clsx";
 import { baseProps as n } from "../../utils/functions/functions.util.js";
-import '../../assets/info-panel-BJPuE65n.css';const r = "_InfoPanel_1u1r0_1", m = "_List_1u1r0_30", d = "_Item_1u1r0_40", _ = "_Key_1u1r0_48", f = "_Value_1u1r0_52", a = {
-  InfoPanel: r,
-  List: m,
-  Item: d,
-  Key: _,
+import '../../assets/info-panel-DT7lLHJR.css';const c = "_InfoPanel_1xmmg_1", d = "_List_1xmmg_30", _ = "_Item_1xmmg_40", r = "_Key_1xmmg_48", f = "_Value_1xmmg_52", a = {
+  InfoPanel: c,
+  List: d,
+  Item: _,
+  Key: r,
   Value: f
-}, N = ({ data: l, ...s }) => /* @__PURE__ */ e(
+}, u = ({ data: l, ...s }) => /* @__PURE__ */ e(
   "div",
   {
     "data-testid": n(s, "data-testid", "info-panel"),
-    className: c(a.InfoPanel, n(s, "className")),
-    children: /* @__PURE__ */ e("ul", { "data-testid": "info-panel-list", className: a.List, children: l.map(([t, i]) => /* @__PURE__ */ o("li", { className: a.Item, children: [
+    className: o(a.InfoPanel, n(s, "className")),
+    children: /* @__PURE__ */ e("ul", { "data-testid": "info-panel-list", className: a.List, children: l.map(([t, m]) => /* @__PURE__ */ i("li", { className: a.Item, children: [
       /* @__PURE__ */ e("span", { "data-testid": "info-panel-key", className: a.Key, children: t }),
-      /* @__PURE__ */ e("span", { "data-testid": "info-panel-value", className: a.Value, children: i })
+      /* @__PURE__ */ e("span", { "data-testid": "info-panel-value", className: a.Value, children: m })
     ] }, t)) })
   }
 );
 export {
-  N as InfoPanel
+  u as InfoPanel
 };

package/dist/controls/interactives/input/input.component.d.ts

@@ -1,9 +1,11 @@
+import { RefObject } from 'react';
 import { Interactive } from '../../utils';
 import { Base } from '../../../utils/types';
 export interface InputProps extends Base, Interactive<string> {
+    ref?: RefObject<HTMLInputElement>;
     mask?: string;
     maxLength?: number;
     onAnimationStart?: (id: string) => void;
     onAnimationEnd?: (id: string) => void;
 }
-export declare const Input: ({ id, value, disabled, onChange, onFocus, onBlur, maxLength, mask, onAnimationStart, onAnimationEnd, ...base }: InputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Input: ({ id, value, disabled, onChange, onFocus, onBlur, ref, maxLength, mask, onAnimationStart, onAnimationEnd, ...base }: InputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/controls/interactives/input/input.component.js

@@ -1,13 +1,13 @@
 import { jsx as M } from "react/jsx-runtime";
-import { useRef as d, useState as O, useLayoutEffect as Q, useCallback as R, useEffect as W } from "react";
+import { useRef as d, useState as Q, useLayoutEffect as W, useCallback as R, useEffect as X } from "react";
 import K from "clsx";
-import { compareStrings as X, isDigit as Y, getFirstNotEnteredCharIndex as v, replaceCharByIndex as b, getNextChar as T, isSeparator as P, getPreviousChar as Z, applyMask as k } from "./input.utils.js";
-import { useControlInteraction as tt } from "../../utils/hooks/use-control-interaction/use-control-interaction.hook.js";
+import { compareStrings as Y, isDigit as Z, getFirstNotEnteredCharIndex as v, replaceCharByIndex as b, getNextChar as T, isSeparator as P, getPreviousChar as k, applyMask as tt } from "./input.utils.js";
+import { useControlInteraction as et } from "../../utils/hooks/use-control-interaction/use-control-interaction.hook.js";
 import { baseProps as h } from "../../../utils/functions/functions.util.js";
-import '../../../assets/input-D66hMzHc.css';const et = "_Input_gfvsr_1", nt = "_Placeholder_gfvsr_45", w = {
-  Input: et,
-  Placeholder: nt
-}, it = ({
+import '../../../assets/input-D66hMzHc.css';const nt = "_Input_gfvsr_1", rt = "_Placeholder_gfvsr_45", w = {
+  Input: nt,
+  Placeholder: rt
+}, lt = ({
   // Interactive props
   id: u,
   value: y = "",
@@ -16,26 +16,27 @@ import '../../../assets/input-D66hMzHc.css';const et = "_Input_gfvsr_1", nt = "_
   onFocus: L,
   onBlur: j,
   // Input props
-  maxLength: U,
+  ref: U,
+  maxLength: q,
   mask: n = "",
-  onAnimationStart: q,
-  onAnimationEnd: z,
+  onAnimationStart: z,
+  onAnimationEnd: G,
   // Base props
   ...s
 }) => {
-  const { emitChange: C, handleFocus: S, handleBlur: E } = tt({
+  const { emitChange: C, handleFocus: S, handleBlur: E } = et({
     id: u,
     disabled: g,
     onChange: $,
     onFocus: L,
     onBlur: j
-  }), o = d(null), D = d(!1), a = d(null), N = d(!0), [r, I] = O(y || n), i = (t) => {
+  }), o = U || d(null), D = d(!1), a = d(null), N = d(!0), [r, I] = Q(y || n), i = (t) => {
     const c = Math.max(0, t);
     if (a.current = c, !o.current) return;
     const e = Math.min(c, o.current.value.length);
     o.current.setSelectionRange(e, e);
   };
-  Q(() => {
+  W(() => {
     if (!n || !o.current || a.current === null) return;
     const t = Math.min(a.current, o.current.value.length);
     o.current.setSelectionRange(t, t), a.current = null;
@@ -43,16 +44,16 @@ import '../../../assets/input-D66hMzHc.css';const et = "_Input_gfvsr_1", nt = "_
   const F = () => {
     const t = o.current?.value || "", c = v(t, n);
     c !== t.length && i(c);
-  }, G = R(() => {
-    const t = o.current?.value || "", c = X(r, t);
-    if (!Y(c)) return;
+  }, H = R(() => {
+    const t = o.current?.value || "", c = Y(r, t);
+    if (!Z(c)) return;
     const e = o.current?.selectionEnd || 0, m = v(t, n) === t.length, l = b(r, e - 1, c), f = v(l, n);
     if (m) {
-      const p = t.slice(0, e - 1), x = t.slice(e - 1, e), B = t.slice(e), J = b(p + B, e - 1, x), _ = T(p + B, e) || "";
-      I(J), i(P(_, n) && _ ? e + 1 : e);
+      const p = t.slice(0, e - 1), x = t.slice(e - 1, e), B = t.slice(e), O = b(p + B, e - 1, x), _ = T(p + B, e) || "";
+      I(O), i(P(_, n) && _ ? e + 1 : e);
     } else
       I(l), i(f);
-  }, [r, n]), H = R(
+  }, [r, n]), J = R(
     (t) => {
       if ([
         "Digit1",
@@ -73,14 +74,14 @@ import '../../../assets/input-D66hMzHc.css';const et = "_Input_gfvsr_1", nt = "_
         t.preventDefault();
         const e = o.current?.selectionEnd || 0;
         if (e) {
-          const A = Z(r, e), m = T(r, e - 1), l = P(A, n), f = P(m, n), p = e - (l || f ? 2 : 1), x = k(r, n, e - (f ? 2 : 1));
+          const A = k(r, e), m = T(r, e - 1), l = P(A, n), f = P(m, n), p = e - (l || f ? 2 : 1), x = tt(r, n, e - (f ? 2 : 1));
           I(x), i(p);
         }
       }
     },
     [r, n]
   );
-  W(() => {
+  X(() => {
     if (n) {
       if (N.current) {
         N.current = !1;
@@ -90,7 +91,7 @@ import '../../../assets/input-D66hMzHc.css';const et = "_Input_gfvsr_1", nt = "_
     }
   }, [r, n, C]);
   const V = (t) => {
-    t.includes("autofill-start") && q?.(u), t.includes("autofill-end") && z?.(u);
+    t.includes("autofill-start") && z?.(u), t.includes("autofill-end") && G?.(u);
   };
   return n ? /* @__PURE__ */ M(
     "input",
@@ -105,8 +106,8 @@ import '../../../assets/input-D66hMzHc.css';const et = "_Input_gfvsr_1", nt = "_
       value: r,
       className: K(w.Input, h(s, "className"), { [w.Placeholder]: r === n }),
       onAnimationStart: (t) => V(t.animationName),
-      onKeyDown: H,
-      onChange: G,
+      onKeyDown: J,
+      onChange: H,
       onPointerDown: (t) => {
         t.preventDefault(), D.current = !0, t.currentTarget.focus(), F();
       },
@@ -125,7 +126,7 @@ import '../../../assets/input-D66hMzHc.css';const et = "_Input_gfvsr_1", nt = "_
       "data-testid": h(s, "data-testid", "input"),
       "aria-label": `${u}-text-input`,
       disabled: g,
-      maxLength: U,
+      maxLength: q,
       type: "text",
       id: u,
       name: u,
@@ -139,5 +140,5 @@ import '../../../assets/input-D66hMzHc.css';const et = "_Input_gfvsr_1", nt = "_
   );
 };
 export {
-  it as Input
+  lt as Input
 };

package/dist/controls/interactives/text-field/text-field.component.js

@@ -1,102 +1,103 @@
 import { jsxs as p, jsx as t } from "react/jsx-runtime";
-import n from "clsx";
-import { useBoolean as f } from "usehooks-ts";
-import { FadeScale as k } from "../../../animations/fade-scale/fade-scale.component.js";
-import { FadeSlide as B } from "../../../animations/fade-slide/fade-slide.component.js";
-import { Box as C } from "../../primitives/box/box.component.js";
-import "react";
-import { baseProps as x } from "../../../utils/functions/functions.util.js";
+import { useRef as B } from "react";
+import i from "clsx";
+import { useBoolean as x } from "usehooks-ts";
+import { FadeScale as C } from "../../../animations/fade-scale/fade-scale.component.js";
+import { FadeSlide as $ } from "../../../animations/fade-slide/fade-slide.component.js";
+import { Box as w } from "../../primitives/box/box.component.js";
+import { baseProps as h } from "../../../utils/functions/functions.util.js";
 import "lucide-react";
-import { ErrorMessage as $ } from "../../primitives/error-message/error-message.component.js";
-import { Label as w } from "../../primitives/label/label.component.js";
-import { Input as j } from "../input/input.component.js";
-import '../../../assets/text-field-5nNgGQnX.css';const D = "_TextField_l5ui0_1", O = "_Content_l5ui0_10", q = "_Label_l5ui0_26", y = "_Idle_l5ui0_32", z = "_Active_l5ui0_37", G = "_Placeholder_l5ui0_42", H = "_PlaceholderText_l5ui0_49", J = "_ErrorMessage_l5ui0_57", K = "_Input_l5ui0_61", Q = "_MaskStart_l5ui0_65", e = {
-  TextField: D,
-  Content: O,
-  Label: q,
-  Idle: y,
-  Active: z,
-  Placeholder: G,
-  PlaceholderText: H,
-  ErrorMessage: J,
-  Input: K,
-  MaskStart: Q
-}, se = ({
+import { ErrorMessage as j } from "../../primitives/error-message/error-message.component.js";
+import { Label as D } from "../../primitives/label/label.component.js";
+import { Input as O } from "../input/input.component.js";
+import '../../../assets/text-field-5nNgGQnX.css';const R = "_TextField_l5ui0_1", q = "_Content_l5ui0_10", y = "_Label_l5ui0_26", z = "_Idle_l5ui0_32", G = "_Active_l5ui0_37", H = "_Placeholder_l5ui0_42", J = "_PlaceholderText_l5ui0_49", K = "_ErrorMessage_l5ui0_57", Q = "_Input_l5ui0_61", U = "_MaskStart_l5ui0_65", e = {
+  TextField: R,
+  Content: q,
+  Label: y,
+  Idle: z,
+  Active: G,
+  Placeholder: H,
+  PlaceholderText: J,
+  ErrorMessage: K,
+  Input: Q,
+  MaskStart: U
+}, ne = ({
   // Interactive props
   id: c,
   value: l = "",
-  disabled: h = !1,
+  disabled: I = !1,
   state: a = "idle",
-  onChange: I,
-  onFocus: F,
-  onBlur: M,
+  onChange: F,
+  onFocus: M,
+  onBlur: P,
   // Text props
-  mask: i,
-  maxLength: P = -1,
-  label: T = "",
+  mask: n,
+  maxLength: T = -1,
+  label: A = "",
   message: d = "",
-  placeholder: m = "",
+  placeholder: u = "",
   // Base props
-  ...u
+  ...m
 }) => {
-  const { value: _, setTrue: A, setFalse: S } = f(!1), { value: r, setTrue: b, setFalse: g } = f(!1), s = r || !!l || _, E = !i && !!m && r && !l && !_, N = !!d && a === "error", v = (o) => {
-    b(), F?.(o);
-  }, L = (o) => {
+  const { value: _, setTrue: S, setFalse: b } = x(!1), { value: r, setTrue: g, setFalse: E } = x(!1), f = B(null), s = r || !!l || _, N = !n && !!u && r && !l && !_, v = !!d && a === "error", L = (o) => {
     g(), M?.(o);
+  }, k = (o) => {
+    E(), P?.(o);
   };
   return /* @__PURE__ */ p(
     "div",
     {
-      "data-testid": x(u, "data-testid", "text-field"),
-      className: n(e.TextField, x(u, "className")),
+      "data-testid": h(m, "data-testid", "text-field"),
+      className: i(e.TextField, h(m, "className")),
       children: [
-        /* @__PURE__ */ t(C, { state: a, focused: r, children: /* @__PURE__ */ p(
+        /* @__PURE__ */ t(w, { state: a, focused: r, children: /* @__PURE__ */ p(
           "label",
           {
             htmlFor: c,
             className: e.Content,
             onPointerDown: (o) => {
-              r && o.preventDefault();
+              r && o.preventDefault(), f.current?.click();
             },
             children: [
               /* @__PURE__ */ t(
-                w,
+                D,
                 {
                   "data-testid": "text-label",
-                  text: T,
+                  text: A,
                   position: s ? "active" : "idle",
                   state: s ? a : "idle",
-                  className: n(e.Label, s ? e.Active : e.Idle)
+                  className: i(e.Label, s ? e.Active : e.Idle)
                 }
               ),
-              /* @__PURE__ */ t(k, { name: "text-placeholder", condition: E, className: e.Placeholder, children: /* @__PURE__ */ t("span", { "data-testid": "text-placeholder", className: e.PlaceholderText, children: m }) }),
+              /* @__PURE__ */ t(C, { name: "text-placeholder", condition: N, className: e.Placeholder, children: /* @__PURE__ */ t("span", { "data-testid": "text-placeholder", className: e.PlaceholderText, children: u }) }),
               /* @__PURE__ */ t(
-                j,
+                O,
                 {
                   "data-testid": "text-input",
-                  mask: i,
-                  maxLength: P,
-                  disabled: h,
+                  mask: n,
+                  maxLength: T,
+                  disabled: I,
                   id: c,
+                  ref: f,
                   value: l,
-                  className: n(e.Input, {
-                    [e.MaskStart]: i && l === "" && !s
+                  className: i(e.Input, {
+                    [e.MaskStart]: n && l === "" && !s
                   }),
-                  onAnimationStart: A,
-                  onAnimationEnd: S,
-                  onChange: I,
-                  onFocus: v,
-                  onBlur: L
+                  onAnimationStart: S,
+                  onAnimationEnd: b,
+                  onChange: F,
+                  onFocus: L,
+                  onBlur: k
                 }
               )
             ]
           }
         ) }),
-        /* @__PURE__ */ t(B, { name: "text-message", direction: "ltr", condition: N, children: /* @__PURE__ */ t($, { "data-testid": "text-error-message", text: d, className: e.ErrorMessage }) })
+        /* @__PURE__ */ t($, { name: "text-message", direction: "ltr", condition: v, children: /* @__PURE__ */ t(j, { "data-testid": "text-error-message", text: d, className: e.ErrorMessage }) })
       ]
     }
   );
 };
 export {
-  se as TextField
+  ne as TextField
 };

package/package.json

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

package/dist/assets/form-row-Dx21oHae.css

@@ -1 +0,0 @@
-._FormRow_ax4us_1{display:flex;flex-direction:column;align-items:stretch}._XXS_ax4us_7{gap:var(--rm-ui-padding-xxs)}._XS_ax4us_11{gap:var(--rm-ui-padding-xs)}._SM_ax4us_15{gap:var(--rm-ui-padding-sm)}._MD_ax4us_19{gap:var(--rm-ui-padding-md)}._LG_ax4us_23,._XL_ax4us_27{gap:var(--rm-ui-padding-xl)}._XXL_ax4us_31{gap:var(--rm-ui-padding-xxl)}._XXXL_ax4us_35{gap:var(--rm-ui-padding-xxxl)}._Child_ax4us_39{flex-grow:1}._Child_ax4us_39[data-children-quantity="1"]{width:100%}._Child_ax4us_39[data-children-quantity="2"]{width:50%}._Child_ax4us_39[data-children-quantity="3"]{width:calc(100% / 3)}._Child_ax4us_39[data-children-quantity="4"]{width:25%}@media screen and (min-width:768px){._FormRow_ax4us_1{flex-direction:row}}

package/dist/assets/info-panel-BJPuE65n.css

@@ -1 +0,0 @@
-._InfoPanel_1u1r0_1{position:relative;padding:var(--rm-ui-padding-md) 0;background-color:var(--rm-ui-info-panel-bg);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)}._InfoPanel_1u1r0_1:before,._InfoPanel_1u1r0_1:after{content:"";display:block;position:absolute;top:0;z-index:1;height:100%;width:100vw;background-color:inherit}._InfoPanel_1u1r0_1:before{left:0}._InfoPanel_1u1r0_1:after{right:0}._List_1u1r0_30{position:relative;z-index:2;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:var(--rm-ui-padding-xs)}._Item_1u1r0_40{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--rm-ui-padding-xxs)}._Key_1u1r0_48{color:var(--rm-ui-color-text-secondary)}._Value_1u1r0_52{color:var(--rm-ui-color-text-primary)}@media screen and (min-width:480px){._Item_1u1r0_40{justify-content:flex-start;gap:var(--rm-ui-padding-xxs)}}