@de-kit/st-ui 0.1.4 → 0.1.6

package/dist/components/textarea/textarea.js

@@ -1,24 +1,83 @@
 import { cn, when } from "../../lib/cn.js";
-import { forwardRef } from "react";
+import { useFieldControl } from "../field/field-context.js";
+import { forwardRef, useCallback, useEffect, useId, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import "./textarea.scss";
 // src/components/textarea/textarea.tsx
-const TextArea = forwardRef(function TextArea({ maxLength, value = "", recommended, error, hideCounter = false, className, ...props }, ref) {
+const assignRef = (ref, node) => {
+	if (typeof ref === "function") {
+		ref(node);
+		return;
+	}
+	if (ref) ref.current = node;
+};
+const TextArea = forwardRef(function TextArea({ maxLength, value, size = "md", recommended, error, counter = true, className, id, onChange, "aria-describedby": ariaDescribedBy, ...props }, ref) {
+	const autoId = useId();
+	const field = useFieldControl();
+	const reportValue = field?.reportValue;
+	const textareaId = field?.id ?? id ?? autoId;
+	const textareaRef = useRef(null);
+	const [length, setLength] = useState(0);
+	const withCounter = maxLength !== void 0 && counter;
+	const isInvalid = Boolean(error) || Boolean(field?.invalid);
+	const setRef = useCallback((node) => {
+		textareaRef.current = node;
+		assignRef(ref, node);
+	}, [ref]);
+	/**
+	* ponytail: длину счётчик читает из DOM — одинаково для `value` и `defaultValue`,
+	* включая автозаполнение. Потолок: reset формы в неконтролируемом режиме счётчик
+	* не слышит и догоняет на следующем вводе; апгрейд — слушать `reset`, как `Input`.
+	* Тот же проход отдаёт показанную строку в Field.
+	*/
+	useEffect(() => {
+		const node = textareaRef.current;
+		if (!node) return;
+		if (withCounter) setLength(node.value.length);
+		reportValue?.(node.value);
+	}, [
+		reportValue,
+		value,
+		withCounter
+	]);
+	const handleChange = (event) => {
+		if (withCounter) setLength(event.target.value.length);
+		if (value === void 0) reportValue?.(event.target.value);
+		onChange?.(event);
+	};
+	const counterId = withCounter ? `${textareaId}-counter` : void 0;
+	const describedBy = [
+		field?.describedBy,
+		counterId,
+		ariaDescribedBy
+	].filter((part) => Boolean(part)).join(" ");
 	return /* @__PURE__ */ jsxs("div", {
 		className: "textarea__wrap",
 		children: [/* @__PURE__ */ jsx("textarea", {
-			ref,
-			className: cn("textarea", className, when(recommended, "textarea--recommended"), when(error, "textarea--error")),
-			value,
+			...props,
+			ref: setRef,
+			id: textareaId,
+			className: cn("textarea", className, when(size !== "md", `textarea--${size}`), when(recommended, "textarea--recommended"), when(isInvalid, "textarea--error")),
+			...value !== void 0 ? { value } : {},
 			maxLength,
-			"aria-invalid": error || void 0,
-			...props
-		}), maxLength && !hideCounter ? /* @__PURE__ */ jsxs("span", {
+			onChange: handleChange,
+			...isInvalid ? { "aria-invalid": true } : {},
+			...field?.required ? {
+				"required": true,
+				"aria-required": true
+			} : {},
+			...describedBy ? { "aria-describedby": describedBy } : {},
+			...field?.errorId ? { "aria-errormessage": field.errorId } : {}
+		}), withCounter ? /* @__PURE__ */ jsxs("span", {
+			id: counterId,
 			className: "textarea__counter",
 			children: [
-				"Максимум ",
+				"Осталось ",
+				Math.max(0, (maxLength ?? 0) - length),
+				" из ",
 				maxLength,
-				" символов"
+				" ",
+				"символов"
 			]
 		}) : null]
 	});

package/dist/components/textarea/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","names":[],"sources":["../../../src/components/textarea/textarea.tsx"],"sourcesContent":["import { forwardRef, type TextareaHTMLAttributes } from 'react';\n\nimport { cn, when } from '../../lib/cn';\nimport './textarea.scss';\n\nexport interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {\n  recommended?: boolean;\n  error?: boolean;\n  /** В приложении проп называется `noMaxMoty`. */\n  hideCounter?: boolean;\n}\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextArea(\n    {\n      maxLength,\n      value = '',\n      recommended,\n      error,\n      hideCounter = false,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    return (\n      <div className=\"textarea__wrap\">\n        <textarea\n          ref={ref}\n          className={cn(\n            'textarea',\n            className,\n            when(recommended, 'textarea--recommended'),\n            when(error, 'textarea--error'),\n          )}\n          value={value}\n          maxLength={maxLength}\n          aria-invalid={error || undefined}\n          {...props}\n        />\n        {maxLength && !hideCounter ? (\n          <span className=\"textarea__counter\">\n            Максимум {maxLength} символов\n          </span>\n        ) : null}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;AAYA,MAAa,WAAW,WACtB,SAAS,SACP,EACE,WACA,QAAQ,IACR,aACA,OACA,cAAc,OACd,WACA,GAAG,SAEL,KACA;CACA,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,YAAD;GACO;GACL,WAAW,GACT,YACA,WACA,KAAK,aAAa,uBAAuB,GACzC,KAAK,OAAO,iBAAiB,CAC/B;GACO;GACI;GACX,gBAAc,SAAS,KAAA;GACvB,GAAI;EACL,CAAA,GACA,aAAa,CAAC,cACb,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA;IAAoC;IACxB;IAAU;GAChB;EACJ,CAAA,IAAA,IACD;;AAET,CACF"}
+{"version":3,"file":"textarea.js","names":[],"sources":["../../../src/components/textarea/textarea.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type Ref,\n  type TextareaHTMLAttributes,\n} from 'react';\n\nimport { useFieldControl } from '@/components/field/field-context';\nimport { cn, when } from '@/lib/cn';\nimport './textarea.scss';\n\nexport type TextAreaSize = 'sm' | 'md' | 'lg';\n\nexport interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {\n  size?: TextAreaSize;\n  recommended?: boolean;\n  error?: boolean;\n  /** Счётчик остатка при `maxLength`. `false` — то, что в приложении было `noMaxMoty`. */\n  counter?: boolean;\n}\n\nconst assignRef = (\n  ref: Ref<HTMLTextAreaElement> | undefined,\n  node: HTMLTextAreaElement | null,\n) => {\n  if (typeof ref === 'function') {\n    ref(node);\n    return;\n  }\n\n  if (ref) ref.current = node;\n};\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextArea(\n    {\n      maxLength,\n      value,\n      size = 'md',\n      recommended,\n      error,\n      counter = true,\n      className,\n      id,\n      onChange,\n      'aria-describedby': ariaDescribedBy,\n      ...props\n    },\n    ref,\n  ) {\n    const autoId = useId();\n    const field = useFieldControl();\n    const reportValue = field?.reportValue;\n    const textareaId = field?.id ?? id ?? autoId;\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\n    const [length, setLength] = useState(0);\n    const withCounter = maxLength !== undefined && counter;\n    const isInvalid = Boolean(error) || Boolean(field?.invalid);\n\n    const setRef = useCallback(\n      (node: HTMLTextAreaElement | null) => {\n        textareaRef.current = node;\n        assignRef(ref, node);\n      },\n      [ref],\n    );\n\n    /**\n     * ponytail: длину счётчик читает из DOM — одинаково для `value` и `defaultValue`,\n     * включая автозаполнение. Потолок: reset формы в неконтролируемом режиме счётчик\n     * не слышит и догоняет на следующем вводе; апгрейд — слушать `reset`, как `Input`.\n     * Тот же проход отдаёт показанную строку в Field.\n     */\n    useEffect(() => {\n      const node = textareaRef.current;\n      if (!node) return;\n\n      if (withCounter) setLength(node.value.length);\n      reportValue?.(node.value);\n    }, [reportValue, value, withCounter]);\n\n    const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {\n      if (withCounter) setLength(event.target.value.length);\n      if (value === undefined) reportValue?.(event.target.value);\n      onChange?.(event);\n    };\n\n    const counterId = withCounter ? `${textareaId}-counter` : undefined;\n    const describedBy = [field?.describedBy, counterId, ariaDescribedBy]\n      .filter(part => Boolean(part))\n      .join(' ');\n\n    return (\n      <div className=\"textarea__wrap\">\n        <textarea\n          {...props}\n          ref={setRef}\n          id={textareaId}\n          className={cn(\n            'textarea',\n            className,\n            when(size !== 'md', `textarea--${size}`),\n            when(recommended, 'textarea--recommended'),\n            when(isInvalid, 'textarea--error'),\n          )}\n          {...(value !== undefined ? { value } : {})}\n          maxLength={maxLength}\n          onChange={handleChange}\n          {...(isInvalid ? { 'aria-invalid': true } : {})}\n          {...(field?.required\n            ? { 'required': true, 'aria-required': true }\n            : {})}\n          {...(describedBy ? { 'aria-describedby': describedBy } : {})}\n          {...(field?.errorId ? { 'aria-errormessage': field.errorId } : {})}\n        />\n        {withCounter ? (\n          <span id={counterId} className=\"textarea__counter\">\n            Осталось {Math.max(0, (maxLength ?? 0) - length)} из {maxLength}{' '}\n            символов\n          </span>\n        ) : null}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;AA0BA,MAAM,aACJ,KACA,SACG;CACH,IAAI,OAAO,QAAQ,YAAY;EAC7B,IAAI,IAAI;EACR;CACF;CAEA,IAAI,KAAK,IAAI,UAAU;AACzB;AAEA,MAAa,WAAW,WACtB,SAAS,SACP,EACE,WACA,OACA,OAAO,MACP,aACA,OACA,UAAU,MACV,WACA,IACA,UACA,oBAAoB,iBACpB,GAAG,SAEL,KACA;CACA,MAAM,SAAS,MAAM;CACrB,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,cAAc,OAAO;CAC3B,MAAM,aAAa,OAAO,MAAM,MAAM;CACtC,MAAM,cAAc,OAA4B,IAAI;CACpD,MAAM,CAAC,QAAQ,aAAa,SAAS,CAAC;CACtC,MAAM,cAAc,cAAc,KAAA,KAAa;CAC/C,MAAM,YAAY,QAAQ,KAAK,KAAK,QAAQ,OAAO,OAAO;CAE1D,MAAM,SAAS,aACZ,SAAqC;EACpC,YAAY,UAAU;EACtB,UAAU,KAAK,IAAI;CACrB,GACA,CAAC,GAAG,CACN;;;;;;;CAQA,gBAAgB;EACd,MAAM,OAAO,YAAY;EACzB,IAAI,CAAC,MAAM;EAEX,IAAI,aAAa,UAAU,KAAK,MAAM,MAAM;EAC5C,cAAc,KAAK,KAAK;CAC1B,GAAG;EAAC;EAAa;EAAO;CAAW,CAAC;CAEpC,MAAM,gBAAgB,UAA4C;EAChE,IAAI,aAAa,UAAU,MAAM,OAAO,MAAM,MAAM;EACpD,IAAI,UAAU,KAAA,GAAW,cAAc,MAAM,OAAO,KAAK;EACzD,WAAW,KAAK;CAClB;CAEA,MAAM,YAAY,cAAc,GAAG,WAAW,YAAY,KAAA;CAC1D,MAAM,cAAc;EAAC,OAAO;EAAa;EAAW;CAAe,CAAC,CACjE,QAAO,SAAQ,QAAQ,IAAI,CAAC,CAAC,CAC7B,KAAK,GAAG;CAEX,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,YAAD;GACE,GAAI;GACJ,KAAK;GACL,IAAI;GACJ,WAAW,GACT,YACA,WACA,KAAK,SAAS,MAAM,aAAa,MAAM,GACvC,KAAK,aAAa,uBAAuB,GACzC,KAAK,WAAW,iBAAiB,CACnC;GACA,GAAK,UAAU,KAAA,IAAY,EAAE,MAAM,IAAI,CAAC;GAC7B;GACX,UAAU;GACV,GAAK,YAAY,EAAE,gBAAgB,KAAK,IAAI,CAAC;GAC7C,GAAK,OAAO,WACR;IAAE,YAAY;IAAM,iBAAiB;GAAK,IAC1C,CAAC;GACL,GAAK,cAAc,EAAE,oBAAoB,YAAY,IAAI,CAAC;GAC1D,GAAK,OAAO,UAAU,EAAE,qBAAqB,MAAM,QAAQ,IAAI,CAAC;EACjE,CAAA,GACA,cACC,qBAAC,QAAD;GAAM,IAAI;GAAW,WAAU;GAA/B,UAAA;IAAmD;IACvC,KAAK,IAAI,IAAI,aAAa,KAAK,MAAM;IAAE;IAAK;IAAW;IAAI;GAEjE;EACJ,CAAA,IAAA,IACD;;AAET,CACF"}

package/dist/components/textarea/textarea.scss

@@ -1,58 +1,85 @@
+@use '../../styles/mixins.scss' as mixins;
+
 .textarea__wrap {
   position: relative;
 }
 
 .textarea {
+  // Паддинги как у Input соответствующего размера, высота — 0.75 / 1 / 1.25 от md.
+  --textarea-padding-y: var(--space-2);
+  --textarea-padding-x: var(--space-3);
+  --textarea-min-height: 160px;
   box-sizing: border-box;
   width: 100%;
-  min-height: 160px;
-  display: flex;
-  align-items: center;
-  padding: 10px 15px;
-  font-size: 14px;
-  line-height: 20px;
+  min-height: var(--textarea-min-height);
+  padding: var(--textarea-padding-y) var(--textarea-padding-x);
+  font-size: var(--text-sm);
+  line-height: var(--text-sm--line-height);
   background-color: transparent;
-  color: var(--color-black);
+  color: var(--color-foreground);
   border-radius: var(--radius-sm);
-  resize: none;
+  resize: vertical;
   font-family: var(--font-sans);
   border: 1px solid var(--color-input);
-  outline: 1px solid transparent;
+  outline: var(--focus-ring-width) solid transparent;
   transition:
     background 0.3s,
     border-color 0.3s,
     box-shadow 0.2s;
 
   &:focus {
-    border-color: var(--color-black);
-    outline: 1px solid var(--color-black);
+    border-color: var(--color-ring);
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
   }
 
   &:disabled {
-    background-color: var(--color-neutral-200);
-    border-color: var(--color-neutral-200);
-    color: color-mix(in srgb, var(--color-black) 50%, transparent);
-    fill: var(--color-neutral-500);
+    background-color: var(--color-muted);
+    border-color: var(--color-muted);
+    color: var(--color-muted-foreground);
+    fill: var(--color-muted-foreground);
+    resize: none;
+  }
+
+  @include mixins.min-width(md) {
+    --textarea-min-height: 80px;
   }
 
-  @media (min-width: 680px) {
-    min-height: 80px;
+  // Медиазапрос базы стоит выше и при равной специфичности проиграет, поэтому у
+  // каждого размера своя пара значений.
+  &--sm {
+    --textarea-padding-y: 4px;
+    --textarea-padding-x: 12px;
+    --textarea-min-height: 120px;
+
+    @include mixins.min-width(md) {
+      --textarea-min-height: 60px;
+    }
+  }
+
+  &--lg {
+    --textarea-padding-y: var(--space-3);
+    --textarea-padding-x: 24px;
+    --textarea-min-height: 200px;
+
+    @include mixins.min-width(md) {
+      --textarea-min-height: 100px;
+    }
   }
 
   &--recommended {
-    background-color: color-mix(in srgb, var(--color-yellow) 10%, transparent);
+    background-color: var(--color-recommended);
   }
 
   &--error {
-    border-color: color-mix(in srgb, var(--color-red) 50%, transparent);
+    border-color: color-mix(in srgb, var(--color-destructive) 50%, transparent);
   }
 }
 
 .textarea__counter {
   display: block;
-  margin-top: 5px;
-  font-size: 11px;
-  line-height: 20px;
-  color: color-mix(in srgb, var(--color-black) 50%, transparent);
+  margin-top: var(--space-1);
+  font-size: var(--text-xs);
+  line-height: var(--text-sm--line-height);
+  color: var(--color-muted-foreground);
   text-align: left;
 }

package/dist/icons/icon-pause.cjs

@@ -0,0 +1,14 @@
+const require_svg = require("./svg.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/icons/icon-pause.tsx
+const IconPause = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_svg.Svg, {
+	viewBox: "0 0 20 20",
+	width: 20,
+	height: 20,
+	fill: "currentColor",
+	...props,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M7,16L7,16c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h0c0.6,0,1,0.4,1,1v10C8,15.6,7.6,16,7,16z M13,16L13,16c-0.6,0-1-0.4-1-1V5 c0-0.6,0.4-1,1-1h0c0.6,0,1,0.4,1,1v10C14,15.6,13.5,16,13,16z" })
+});
+exports.IconPause = IconPause;
+
+//# sourceMappingURL=icon-pause.cjs.map

package/dist/icons/icon-pause.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-pause.cjs","names":["Svg"],"sources":["../../src/icons/icon-pause.tsx"],"sourcesContent":["// Generated by scripts/build-icons.mjs. Do not edit.\nimport { Svg, type IconProps } from './svg';\n\nexport const IconPause = (props: IconProps) => (\n  <Svg\n    viewBox=\"0 0 20 20\"\n    width={20}\n    height={20}\n    fill=\"currentColor\"\n    {...props}\n  >\n    <path d=\"M7,16L7,16c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h0c0.6,0,1,0.4,1,1v10C8,15.6,7.6,16,7,16z M13,16L13,16c-0.6,0-1-0.4-1-1V5 c0-0.6,0.4-1,1-1h0c0.6,0,1,0.4,1,1v10C14,15.6,13.5,16,13,16z\" />\n  </Svg>\n);\n"],"mappings":";;;AAGA,MAAa,aAAa,UACxB,iBAAA,GAAA,kBAAA,IAAA,CAACA,YAAAA,KAAD;CACE,SAAQ;CACR,OAAO;CACP,QAAQ;CACR,MAAK;CACL,GAAI;CAEJ,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAM,GAAE,sLAAuL,CAAA;AAC5L,CAAA"}

package/dist/icons/icon-pause.d.cts

@@ -0,0 +1,3 @@
+import { IconProps } from "./svg.cjs";
+export declare const IconPause: (props: IconProps) => import("react").JSX.Element;
+//# sourceMappingURL=icon-pause.d.cts.map

package/dist/icons/icon-pause.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from "./svg.js";
+export declare const IconPause: (props: IconProps) => import("react").JSX.Element;
+//# sourceMappingURL=icon-pause.d.ts.map

package/dist/icons/icon-pause.js

@@ -0,0 +1,14 @@
+import { Svg } from "./svg.js";
+import { jsx } from "react/jsx-runtime";
+// src/icons/icon-pause.tsx
+const IconPause = (props) => /* @__PURE__ */ jsx(Svg, {
+	viewBox: "0 0 20 20",
+	width: 20,
+	height: 20,
+	fill: "currentColor",
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M7,16L7,16c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h0c0.6,0,1,0.4,1,1v10C8,15.6,7.6,16,7,16z M13,16L13,16c-0.6,0-1-0.4-1-1V5 c0-0.6,0.4-1,1-1h0c0.6,0,1,0.4,1,1v10C14,15.6,13.5,16,13,16z" })
+});
+export { IconPause };
+
+//# sourceMappingURL=icon-pause.js.map

package/dist/icons/icon-pause.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-pause.js","names":[],"sources":["../../src/icons/icon-pause.tsx"],"sourcesContent":["// Generated by scripts/build-icons.mjs. Do not edit.\nimport { Svg, type IconProps } from './svg';\n\nexport const IconPause = (props: IconProps) => (\n  <Svg\n    viewBox=\"0 0 20 20\"\n    width={20}\n    height={20}\n    fill=\"currentColor\"\n    {...props}\n  >\n    <path d=\"M7,16L7,16c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h0c0.6,0,1,0.4,1,1v10C8,15.6,7.6,16,7,16z M13,16L13,16c-0.6,0-1-0.4-1-1V5 c0-0.6,0.4-1,1-1h0c0.6,0,1,0.4,1,1v10C14,15.6,13.5,16,13,16z\" />\n  </Svg>\n);\n"],"mappings":";;;AAGA,MAAa,aAAa,UACxB,oBAAC,KAAD;CACE,SAAQ;CACR,OAAO;CACP,QAAQ;CACR,MAAK;CACL,GAAI;CAEJ,UAAA,oBAAC,QAAD,EAAM,GAAE,sLAAuL,CAAA;AAC5L,CAAA"}

package/dist/icons/index.cjs

@@ -1,4 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_icon_spinner = require("./icon-spinner.cjs");
+const require_icon_cross = require("./icon-cross.cjs");
 const require_control_mark_checkbox = require("./control-mark-checkbox.cjs");
 const require_control_mark_radiobutton = require("./control-mark-radiobutton.cjs");
 const require_icon_adult = require("./icon-adult.cjs");
@@ -26,7 +28,6 @@ const require_icon_conveyor = require("./icon-conveyor.cjs");
 const require_icon_copy = require("./icon-copy.cjs");
 const require_icon_correct = require("./icon-correct.cjs");
 const require_icon_crop = require("./icon-crop.cjs");
-const require_icon_cross = require("./icon-cross.cjs");
 const require_icon_cycle = require("./icon-cycle.cjs");
 const require_icon_divide = require("./icon-divide.cjs");
 const require_icon_download = require("./icon-download.cjs");
@@ -67,6 +68,7 @@ const require_icon_multiselect = require("./icon-multiselect.cjs");
 const require_icon_newwindow = require("./icon-newwindow.cjs");
 const require_icon_options = require("./icon-options.cjs");
 const require_icon_ozon = require("./icon-ozon.cjs");
+const require_icon_pause = require("./icon-pause.cjs");
 const require_icon_piechart = require("./icon-piechart.cjs");
 const require_icon_plus = require("./icon-plus.cjs");
 const require_icon_preview = require("./icon-preview.cjs");
@@ -78,7 +80,6 @@ const require_icon_search = require("./icon-search.cjs");
 const require_icon_shield = require("./icon-shield.cjs");
 const require_icon_sms_code = require("./icon-sms-code.cjs");
 const require_icon_sort = require("./icon-sort.cjs");
-const require_icon_spinner = require("./icon-spinner.cjs");
 const require_icon_star = require("./icon-star.cjs");
 const require_icon_switch_off = require("./icon-switch-off.cjs");
 const require_icon_switch_on = require("./icon-switch-on.cjs");
@@ -179,6 +180,7 @@ exports.IconMultiselect = require_icon_multiselect.IconMultiselect;
 exports.IconNewwindow = require_icon_newwindow.IconNewwindow;
 exports.IconOptions = require_icon_options.IconOptions;
 exports.IconOzon = require_icon_ozon.IconOzon;
+exports.IconPause = require_icon_pause.IconPause;
 exports.IconPiechart = require_icon_piechart.IconPiechart;
 exports.IconPlus = require_icon_plus.IconPlus;
 exports.IconPreview = require_icon_preview.IconPreview;

package/dist/icons/index.d.cts

@@ -67,6 +67,7 @@ import { IconMultiselect } from "./icon-multiselect.cjs";
 import { IconNewwindow } from "./icon-newwindow.cjs";
 import { IconOptions } from "./icon-options.cjs";
 import { IconOzon } from "./icon-ozon.cjs";
+import { IconPause } from "./icon-pause.cjs";
 import { IconPiechart } from "./icon-piechart.cjs";
 import { IconPlus } from "./icon-plus.cjs";
 import { IconPreview } from "./icon-preview.cjs";
@@ -111,4 +112,4 @@ import { LogoSplittest } from "./logo-splittest.cjs";
 import { LogoSplittestRu } from "./logo-splittest-ru.cjs";
 import { LogoUnionpay } from "./logo-unionpay.cjs";
 import { LogoVisa } from "./logo-visa.cjs";
-export { ControlMarkCheckbox, ControlMarkRadiobutton, IconAdult, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowUp, IconAudio, IconBarchart, IconBell, IconBox, IconBurger, IconCalendar, IconCamera, IconCard, IconCart, IconCharmap, IconClaim, IconClaimFull, IconClock, IconClose, IconCode, IconComment, IconConveyor, IconCopy, IconCorrect, IconCrop, IconCross, IconCycle, IconDivide, IconDownload, IconDrop, IconEdit, IconElama, IconEraser, IconFile, IconFolder, IconFunnel, IconGalleryNext, IconGalleryPrev, IconHeart, IconHeartFull, IconImage, IconIndicatorDonut, IconIndicatorDot, IconIndicatorDown, IconIndicatorProgress, IconIndicatorStar, IconIndicatorStarBig, IconIndicatorTick, IconIndicatorUp, IconInfo, IconInstagram, IconKey, IconLabelOzon, IconLabelWildberries, IconLabelYandex, IconLink, IconListOrdered, IconListUnordered, IconLock, IconMagic, IconMail, IconMinus, IconMultiselect, IconNewwindow, IconOptions, IconOzon, IconPiechart, IconPlus, IconPreview, type IconProps, IconRegulator, IconRotate90Ccw, IconScreenBig, IconScreenSmall, IconSearch, IconShield, IconSmsCode, IconSort, IconSpinner, IconStar, IconSwitchOff, IconSwitchOn, IconTable, IconTelegram, IconText, IconTrash, IconTypograph, IconUndo, IconUnite, IconUnlink, IconUpload, IconUser, IconVideo, IconVk, IconYoutube, IllustrationTestBest, IllustrationTestHeatmap, IllustrationTestMultiple, IllustrationTestOne, IllustrationTestOrder, IllustrationTestQuest, IllustrationTestQuestion, IllustrationTestStars, IllustrationTestTournament, LogoMastercard, LogoMir, LogoPaykeeper, LogoSplittest, LogoSplittestRu, LogoUnionpay, LogoVisa };
+export { ControlMarkCheckbox, ControlMarkRadiobutton, IconAdult, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowUp, IconAudio, IconBarchart, IconBell, IconBox, IconBurger, IconCalendar, IconCamera, IconCard, IconCart, IconCharmap, IconClaim, IconClaimFull, IconClock, IconClose, IconCode, IconComment, IconConveyor, IconCopy, IconCorrect, IconCrop, IconCross, IconCycle, IconDivide, IconDownload, IconDrop, IconEdit, IconElama, IconEraser, IconFile, IconFolder, IconFunnel, IconGalleryNext, IconGalleryPrev, IconHeart, IconHeartFull, IconImage, IconIndicatorDonut, IconIndicatorDot, IconIndicatorDown, IconIndicatorProgress, IconIndicatorStar, IconIndicatorStarBig, IconIndicatorTick, IconIndicatorUp, IconInfo, IconInstagram, IconKey, IconLabelOzon, IconLabelWildberries, IconLabelYandex, IconLink, IconListOrdered, IconListUnordered, IconLock, IconMagic, IconMail, IconMinus, IconMultiselect, IconNewwindow, IconOptions, IconOzon, IconPause, IconPiechart, IconPlus, IconPreview, type IconProps, IconRegulator, IconRotate90Ccw, IconScreenBig, IconScreenSmall, IconSearch, IconShield, IconSmsCode, IconSort, IconSpinner, IconStar, IconSwitchOff, IconSwitchOn, IconTable, IconTelegram, IconText, IconTrash, IconTypograph, IconUndo, IconUnite, IconUnlink, IconUpload, IconUser, IconVideo, IconVk, IconYoutube, IllustrationTestBest, IllustrationTestHeatmap, IllustrationTestMultiple, IllustrationTestOne, IllustrationTestOrder, IllustrationTestQuest, IllustrationTestQuestion, IllustrationTestStars, IllustrationTestTournament, LogoMastercard, LogoMir, LogoPaykeeper, LogoSplittest, LogoSplittestRu, LogoUnionpay, LogoVisa };

package/dist/icons/index.d.ts

@@ -67,6 +67,7 @@ import { IconMultiselect } from "./icon-multiselect.js";
 import { IconNewwindow } from "./icon-newwindow.js";
 import { IconOptions } from "./icon-options.js";
 import { IconOzon } from "./icon-ozon.js";
+import { IconPause } from "./icon-pause.js";
 import { IconPiechart } from "./icon-piechart.js";
 import { IconPlus } from "./icon-plus.js";
 import { IconPreview } from "./icon-preview.js";
@@ -111,4 +112,4 @@ import { LogoSplittest } from "./logo-splittest.js";
 import { LogoSplittestRu } from "./logo-splittest-ru.js";
 import { LogoUnionpay } from "./logo-unionpay.js";
 import { LogoVisa } from "./logo-visa.js";
-export { ControlMarkCheckbox, ControlMarkRadiobutton, IconAdult, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowUp, IconAudio, IconBarchart, IconBell, IconBox, IconBurger, IconCalendar, IconCamera, IconCard, IconCart, IconCharmap, IconClaim, IconClaimFull, IconClock, IconClose, IconCode, IconComment, IconConveyor, IconCopy, IconCorrect, IconCrop, IconCross, IconCycle, IconDivide, IconDownload, IconDrop, IconEdit, IconElama, IconEraser, IconFile, IconFolder, IconFunnel, IconGalleryNext, IconGalleryPrev, IconHeart, IconHeartFull, IconImage, IconIndicatorDonut, IconIndicatorDot, IconIndicatorDown, IconIndicatorProgress, IconIndicatorStar, IconIndicatorStarBig, IconIndicatorTick, IconIndicatorUp, IconInfo, IconInstagram, IconKey, IconLabelOzon, IconLabelWildberries, IconLabelYandex, IconLink, IconListOrdered, IconListUnordered, IconLock, IconMagic, IconMail, IconMinus, IconMultiselect, IconNewwindow, IconOptions, IconOzon, IconPiechart, IconPlus, IconPreview, type IconProps, IconRegulator, IconRotate90Ccw, IconScreenBig, IconScreenSmall, IconSearch, IconShield, IconSmsCode, IconSort, IconSpinner, IconStar, IconSwitchOff, IconSwitchOn, IconTable, IconTelegram, IconText, IconTrash, IconTypograph, IconUndo, IconUnite, IconUnlink, IconUpload, IconUser, IconVideo, IconVk, IconYoutube, IllustrationTestBest, IllustrationTestHeatmap, IllustrationTestMultiple, IllustrationTestOne, IllustrationTestOrder, IllustrationTestQuest, IllustrationTestQuestion, IllustrationTestStars, IllustrationTestTournament, LogoMastercard, LogoMir, LogoPaykeeper, LogoSplittest, LogoSplittestRu, LogoUnionpay, LogoVisa };
+export { ControlMarkCheckbox, ControlMarkRadiobutton, IconAdult, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowUp, IconAudio, IconBarchart, IconBell, IconBox, IconBurger, IconCalendar, IconCamera, IconCard, IconCart, IconCharmap, IconClaim, IconClaimFull, IconClock, IconClose, IconCode, IconComment, IconConveyor, IconCopy, IconCorrect, IconCrop, IconCross, IconCycle, IconDivide, IconDownload, IconDrop, IconEdit, IconElama, IconEraser, IconFile, IconFolder, IconFunnel, IconGalleryNext, IconGalleryPrev, IconHeart, IconHeartFull, IconImage, IconIndicatorDonut, IconIndicatorDot, IconIndicatorDown, IconIndicatorProgress, IconIndicatorStar, IconIndicatorStarBig, IconIndicatorTick, IconIndicatorUp, IconInfo, IconInstagram, IconKey, IconLabelOzon, IconLabelWildberries, IconLabelYandex, IconLink, IconListOrdered, IconListUnordered, IconLock, IconMagic, IconMail, IconMinus, IconMultiselect, IconNewwindow, IconOptions, IconOzon, IconPause, IconPiechart, IconPlus, IconPreview, type IconProps, IconRegulator, IconRotate90Ccw, IconScreenBig, IconScreenSmall, IconSearch, IconShield, IconSmsCode, IconSort, IconSpinner, IconStar, IconSwitchOff, IconSwitchOn, IconTable, IconTelegram, IconText, IconTrash, IconTypograph, IconUndo, IconUnite, IconUnlink, IconUpload, IconUser, IconVideo, IconVk, IconYoutube, IllustrationTestBest, IllustrationTestHeatmap, IllustrationTestMultiple, IllustrationTestOne, IllustrationTestOrder, IllustrationTestQuest, IllustrationTestQuestion, IllustrationTestStars, IllustrationTestTournament, LogoMastercard, LogoMir, LogoPaykeeper, LogoSplittest, LogoSplittestRu, LogoUnionpay, LogoVisa };

package/dist/icons/index.js

@@ -1,3 +1,5 @@
+import { IconSpinner } from "./icon-spinner.js";
+import { IconCross } from "./icon-cross.js";
 import { ControlMarkCheckbox } from "./control-mark-checkbox.js";
 import { ControlMarkRadiobutton } from "./control-mark-radiobutton.js";
 import { IconAdult } from "./icon-adult.js";
@@ -25,7 +27,6 @@ import { IconConveyor } from "./icon-conveyor.js";
 import { IconCopy } from "./icon-copy.js";
 import { IconCorrect } from "./icon-correct.js";
 import { IconCrop } from "./icon-crop.js";
-import { IconCross } from "./icon-cross.js";
 import { IconCycle } from "./icon-cycle.js";
 import { IconDivide } from "./icon-divide.js";
 import { IconDownload } from "./icon-download.js";
@@ -66,6 +67,7 @@ import { IconMultiselect } from "./icon-multiselect.js";
 import { IconNewwindow } from "./icon-newwindow.js";
 import { IconOptions } from "./icon-options.js";
 import { IconOzon } from "./icon-ozon.js";
+import { IconPause } from "./icon-pause.js";
 import { IconPiechart } from "./icon-piechart.js";
 import { IconPlus } from "./icon-plus.js";
 import { IconPreview } from "./icon-preview.js";
@@ -77,7 +79,6 @@ import { IconSearch } from "./icon-search.js";
 import { IconShield } from "./icon-shield.js";
 import { IconSmsCode } from "./icon-sms-code.js";
 import { IconSort } from "./icon-sort.js";
-import { IconSpinner } from "./icon-spinner.js";
 import { IconStar } from "./icon-star.js";
 import { IconSwitchOff } from "./icon-switch-off.js";
 import { IconSwitchOn } from "./icon-switch-on.js";
@@ -110,4 +111,4 @@ import { LogoSplittest } from "./logo-splittest.js";
 import { LogoSplittestRu } from "./logo-splittest-ru.js";
 import { LogoUnionpay } from "./logo-unionpay.js";
 import { LogoVisa } from "./logo-visa.js";
-export { ControlMarkCheckbox, ControlMarkRadiobutton, IconAdult, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowUp, IconAudio, IconBarchart, IconBell, IconBox, IconBurger, IconCalendar, IconCamera, IconCard, IconCart, IconCharmap, IconClaim, IconClaimFull, IconClock, IconClose, IconCode, IconComment, IconConveyor, IconCopy, IconCorrect, IconCrop, IconCross, IconCycle, IconDivide, IconDownload, IconDrop, IconEdit, IconElama, IconEraser, IconFile, IconFolder, IconFunnel, IconGalleryNext, IconGalleryPrev, IconHeart, IconHeartFull, IconImage, IconIndicatorDonut, IconIndicatorDot, IconIndicatorDown, IconIndicatorProgress, IconIndicatorStar, IconIndicatorStarBig, IconIndicatorTick, IconIndicatorUp, IconInfo, IconInstagram, IconKey, IconLabelOzon, IconLabelWildberries, IconLabelYandex, IconLink, IconListOrdered, IconListUnordered, IconLock, IconMagic, IconMail, IconMinus, IconMultiselect, IconNewwindow, IconOptions, IconOzon, IconPiechart, IconPlus, IconPreview, IconRegulator, IconRotate90Ccw, IconScreenBig, IconScreenSmall, IconSearch, IconShield, IconSmsCode, IconSort, IconSpinner, IconStar, IconSwitchOff, IconSwitchOn, IconTable, IconTelegram, IconText, IconTrash, IconTypograph, IconUndo, IconUnite, IconUnlink, IconUpload, IconUser, IconVideo, IconVk, IconYoutube, IllustrationTestBest, IllustrationTestHeatmap, IllustrationTestMultiple, IllustrationTestOne, IllustrationTestOrder, IllustrationTestQuest, IllustrationTestQuestion, IllustrationTestStars, IllustrationTestTournament, LogoMastercard, LogoMir, LogoPaykeeper, LogoSplittest, LogoSplittestRu, LogoUnionpay, LogoVisa };
+export { ControlMarkCheckbox, ControlMarkRadiobutton, IconAdult, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowUp, IconAudio, IconBarchart, IconBell, IconBox, IconBurger, IconCalendar, IconCamera, IconCard, IconCart, IconCharmap, IconClaim, IconClaimFull, IconClock, IconClose, IconCode, IconComment, IconConveyor, IconCopy, IconCorrect, IconCrop, IconCross, IconCycle, IconDivide, IconDownload, IconDrop, IconEdit, IconElama, IconEraser, IconFile, IconFolder, IconFunnel, IconGalleryNext, IconGalleryPrev, IconHeart, IconHeartFull, IconImage, IconIndicatorDonut, IconIndicatorDot, IconIndicatorDown, IconIndicatorProgress, IconIndicatorStar, IconIndicatorStarBig, IconIndicatorTick, IconIndicatorUp, IconInfo, IconInstagram, IconKey, IconLabelOzon, IconLabelWildberries, IconLabelYandex, IconLink, IconListOrdered, IconListUnordered, IconLock, IconMagic, IconMail, IconMinus, IconMultiselect, IconNewwindow, IconOptions, IconOzon, IconPause, IconPiechart, IconPlus, IconPreview, IconRegulator, IconRotate90Ccw, IconScreenBig, IconScreenSmall, IconSearch, IconShield, IconSmsCode, IconSort, IconSpinner, IconStar, IconSwitchOff, IconSwitchOn, IconTable, IconTelegram, IconText, IconTrash, IconTypograph, IconUndo, IconUnite, IconUnlink, IconUpload, IconUser, IconVideo, IconVk, IconYoutube, IllustrationTestBest, IllustrationTestHeatmap, IllustrationTestMultiple, IllustrationTestOne, IllustrationTestOrder, IllustrationTestQuest, IllustrationTestQuestion, IllustrationTestStars, IllustrationTestTournament, LogoMastercard, LogoMir, LogoPaykeeper, LogoSplittest, LogoSplittestRu, LogoUnionpay, LogoVisa };

package/dist/index.cjs

@@ -1,6 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_button = require("./components/button/button.cjs");
 const require_checkbox = require("./components/checkbox/checkbox.cjs");
+const require_field = require("./components/field/field.cjs");
 const require_input = require("./components/input/input.cjs");
 const require_radio = require("./components/radio/radio.cjs");
 const require_spinner = require("./components/spinner/spinner.cjs");
@@ -8,7 +9,9 @@ const require_textarea = require("./components/textarea/textarea.cjs");
 require("./styles/vars.scss");
 exports.Button = require_button.Button;
 exports.CheckboxInput = require_checkbox.CheckboxInput;
+exports.Field = require_field.Field;
 exports.Input = require_input.Input;
+exports.RadioGroup = require_radio.RadioGroup;
 exports.RadioInput = require_radio.RadioInput;
 exports.Spinner = require_spinner.Spinner;
 exports.TextArea = require_textarea.TextArea;

package/dist/index.d.cts

@@ -2,12 +2,14 @@ import { Button, ButtonComponentProps, ButtonLinkProps, ButtonProps, ButtonSize,
 import "./components/button/index.cjs";
 import { CheckboxInput, CheckboxInputProps } from "./components/checkbox/checkbox.cjs";
 import "./components/checkbox/index.cjs";
-import { Input, InputProps } from "./components/input/input.cjs";
+import { Field, FieldHintPlacement, FieldProps } from "./components/field/field.cjs";
+import "./components/field/index.cjs";
+import { Input, InputProps, InputSize } from "./components/input/input.cjs";
 import "./components/input/index.cjs";
-import { RadioInput, RadioInputProps } from "./components/radio/radio.cjs";
+import { RadioGroup, RadioGroupProps, RadioInput, RadioInputProps } from "./components/radio/radio.cjs";
 import "./components/radio/index.cjs";
 import { Spinner, SpinnerPosition, SpinnerProps } from "./components/spinner/spinner.cjs";
 import "./components/spinner/index.cjs";
-import { TextArea, TextAreaProps } from "./components/textarea/textarea.cjs";
+import { TextArea, TextAreaProps, TextAreaSize } from "./components/textarea/textarea.cjs";
 import "./components/textarea/index.cjs";
-export { Button, type ButtonComponentProps, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, CheckboxInput, type CheckboxInputProps, Input, type InputProps, RadioInput, type RadioInputProps, Spinner, type SpinnerPosition, type SpinnerProps, TextArea, type TextAreaProps };
+export { Button, type ButtonComponentProps, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, CheckboxInput, type CheckboxInputProps, Field, type FieldHintPlacement, type FieldProps, Input, type InputProps, type InputSize, RadioGroup, type RadioGroupProps, RadioInput, type RadioInputProps, Spinner, type SpinnerPosition, type SpinnerProps, TextArea, type TextAreaProps, type TextAreaSize };

package/dist/index.d.ts

@@ -2,12 +2,14 @@ import { Button, ButtonComponentProps, ButtonLinkProps, ButtonProps, ButtonSize,
 import "./components/button/index.js";
 import { CheckboxInput, CheckboxInputProps } from "./components/checkbox/checkbox.js";
 import "./components/checkbox/index.js";
-import { Input, InputProps } from "./components/input/input.js";
+import { Field, FieldHintPlacement, FieldProps } from "./components/field/field.js";
+import "./components/field/index.js";
+import { Input, InputProps, InputSize } from "./components/input/input.js";
 import "./components/input/index.js";
-import { RadioInput, RadioInputProps } from "./components/radio/radio.js";
+import { RadioGroup, RadioGroupProps, RadioInput, RadioInputProps } from "./components/radio/radio.js";
 import "./components/radio/index.js";
 import { Spinner, SpinnerPosition, SpinnerProps } from "./components/spinner/spinner.js";
 import "./components/spinner/index.js";
-import { TextArea, TextAreaProps } from "./components/textarea/textarea.js";
+import { TextArea, TextAreaProps, TextAreaSize } from "./components/textarea/textarea.js";
 import "./components/textarea/index.js";
-export { Button, type ButtonComponentProps, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, CheckboxInput, type CheckboxInputProps, Input, type InputProps, RadioInput, type RadioInputProps, Spinner, type SpinnerPosition, type SpinnerProps, TextArea, type TextAreaProps };
+export { Button, type ButtonComponentProps, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, CheckboxInput, type CheckboxInputProps, Field, type FieldHintPlacement, type FieldProps, Input, type InputProps, type InputSize, RadioGroup, type RadioGroupProps, RadioInput, type RadioInputProps, Spinner, type SpinnerPosition, type SpinnerProps, TextArea, type TextAreaProps, type TextAreaSize };

package/dist/index.js

@@ -1,8 +1,9 @@
 import { Button } from "./components/button/button.js";
 import { CheckboxInput } from "./components/checkbox/checkbox.js";
+import { Field } from "./components/field/field.js";
 import { Input } from "./components/input/input.js";
-import { RadioInput } from "./components/radio/radio.js";
+import { RadioGroup, RadioInput } from "./components/radio/radio.js";
 import { Spinner } from "./components/spinner/spinner.js";
 import { TextArea } from "./components/textarea/textarea.js";
 import "./styles/vars.scss";
-export { Button, CheckboxInput, Input, RadioInput, Spinner, TextArea };
+export { Button, CheckboxInput, Field, Input, RadioGroup, RadioInput, Spinner, TextArea };

package/dist/styles/global.scss

@@ -1,13 +1,12 @@
 // База приложения. Шрифт Inter подключает хост — файлы лежат в splittest-frontend/src/app/fonts.
 // Токены (`--color-*`) подключает вход пакета, этот файл их не эмитит.
+@use './mixins.scss' as mixins;
 
 :root {
-  --pink: #ff00ff;
-  --blue: #00aaff;
   --window-max-height: 100vh;
   --wrapper-padding: 20px;
 
-  @media (min-width: 680px) {
+  @include mixins.min-width(md) {
     --wrapper-padding: 30px;
   }
 }
@@ -35,16 +34,16 @@ body {
   font-family: var(--font-sans);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: var(--color-black);
-  background-color: var(--color-white);
+  color: var(--color-foreground);
+  background-color: var(--color-background);
   font-size: var(--text-sm);
-  line-height: 20px;
+  line-height: var(--text-sm--line-height);
   font-weight: 400;
 
   &::after {
     content: '';
     display: block;
-    background-color: color-mix(in srgb, var(--color-black) 30%, transparent);
+    background-color: var(--color-overlay);
     position: fixed;
     left: 0;
     top: 0;
@@ -91,11 +90,11 @@ body {
   padding-left: var(--wrapper-padding);
   padding-right: var(--wrapper-padding);
 
-  @media (min-width: 680px) {
+  @include mixins.min-width(md) {
     max-width: 680px;
   }
 
-  @media (min-width: 1000px) {
+  @include mixins.min-width(lg) {
     max-width: 1000px;
   }
 }
@@ -106,20 +105,27 @@ body {
   height: 8px;
 }
 
+// Ползунок — производная от текста, обводка — от фона: в тёмной теме
+// ползунок светлеет вместе с ней, как и остальные серые в этом файле.
 .scroll-block::-webkit-scrollbar-thumb {
   border-radius: 4px;
-  background-color: #c3c3c3;
-  box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
+  background-color: color-mix(
+    in srgb,
+    var(--color-foreground) 24%,
+    var(--color-background)
+  );
+  box-shadow: 0 0 1px
+    color-mix(in srgb, var(--color-background) 50%, transparent);
 }
 
 a {
   text-decoration: none;
   transition: color 0.3s ease;
-  color: var(--color-black);
+  color: var(--color-foreground);
 }
 
 button {
-  color: var(--color-black);
+  color: var(--color-foreground);
   font-size: var(--text-sm);
   font-family: var(--font-sans);
 
@@ -153,9 +159,9 @@ table {
   }
 
   th {
-    color: color-mix(in srgb, var(--color-black) 50%, transparent);
-    font-size: 11px;
-    line-height: 15px;
+    color: var(--color-muted-foreground);
+    font-size: var(--text-xs);
+    line-height: var(--text-xs--line-height);
     text-align: left;
     font-weight: normal;
     padding: 15px 0;
@@ -170,26 +176,26 @@ h3 {
 }
 
 h1 {
-  font-size: 28px;
-  line-height: 30px;
+  font-size: var(--text-2xl);
+  line-height: var(--text-2xl--line-height);
 
-  @media (min-width: 680px) {
-    font-size: 45px;
-    line-height: 50px;
+  @include mixins.min-width(md) {
+    font-size: var(--text-3xl);
+    line-height: var(--text-3xl--line-height);
   }
 }
 
 h2 {
-  font-size: 28px;
-  line-height: 30px;
+  font-size: var(--text-2xl);
+  line-height: var(--text-2xl--line-height);
 }
 
 h3 {
-  font-size: 18px;
-  line-height: 20px;
+  font-size: var(--text-lg);
+  line-height: var(--text-lg--line-height);
 }
 
 h4 {
-  font-size: 14px;
-  line-height: 20px;
+  font-size: var(--text-sm);
+  line-height: var(--text-sm--line-height);
 }