@alif-ui-test/core 1.11.0 → 2.0.0-alpha.5

package/dist/components/Input/Input.js

@@ -1,43 +1,15 @@
-import { jsxs as u, jsx as t } from "react/jsx-runtime";
-import e from "./Input.module.css.js";
-import { Field as N } from "../Field/Field.js";
-import { Hinter as b } from "../Hinter/Hinter.js";
-import { classNames as h } from "../../utils/class-names.js";
-const y = ({
-  isFilled: i,
-  hintText: m,
-  isHintAlwaysShown: a,
-  showCorrectHintIcon: l,
-  showLengthHint: d,
-  filledLength: c,
-  maxLength: s,
-  style: n,
-  fullWidth: o = !0,
-  ...r
-}) => {
-  const f = h(
-    e.root,
-    o && e.fullWidth,
-    r.className
-  );
-  return /* @__PURE__ */ u("div", { className: f, style: n, children: [
-    /* @__PURE__ */ t(N, { ...r, maxLength: s, fullWidth: o }),
-    /* @__PURE__ */ t(
-      b,
-      {
-        isFilled: i,
-        hintText: m,
-        disabled: r.disabled,
-        hasError: r.hasError,
-        isHintAlwaysShown: a,
-        showCorrectHintIcon: l,
-        showLengthHint: d,
-        filledLength: c,
-        maxLength: s
-      }
-    )
-  ] });
-};
-export {
-  y as Input
-};
+import { classNames as e } from "../../utils/class-names.js";
+import { Field as t } from "../Field/Field.js";
+import n from "./Input.module.js";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/Input/Input.tsx
+var i = ({ style: i, className: a, fullWidth: o = !0, ...s }) => /* @__PURE__ */ r("div", {
+	style: i,
+	className: e(n.root, o && "uiFullWidth", a),
+	children: /* @__PURE__ */ r(t, {
+		...s,
+		fullWidth: o
+	})
+});
+//#endregion
+export { i as Input };

package/dist/components/Input/Input.module.js

@@ -0,0 +1,3 @@
+var e = { root: "_root_977nw_1" };
+//#endregion
+export { e as default };

package/dist/components/InputOtp/InputOtp.js

@@ -1,70 +1,52 @@
-import { jsx as i } from "react/jsx-runtime";
-import { useRef as B, useEffect as L } from "react";
-import c from "./InputOtp.module.css.js";
-import { normalizeOtpValue as M, getInputOtpStyles as S, keepOnlyDigits as m } from "./InputOtp.utils.js";
-import { classNames as h } from "../../utils/class-names.js";
-const T = ({
-  value: y,
-  onChange: D,
-  onPaste: g,
-  onComplete: v,
-  length: o = 4,
-  size: w = "m",
-  variant: C = "outline",
-  hasError: N,
-  disabled: n,
-  className: V,
-  inputClassName: j,
-  mask: k,
-  inputStyle: I,
-  integerOnly: p,
-  autoFocus: l,
-  placeholder: O
-}) => {
-  const u = M(y, o), a = B([]), f = (s) => {
-    const t = s.join("");
-    D(t), t.length === o && !s.includes("") && v?.(t);
-  }, E = (s, t) => {
-    let e = s;
-    p && (e = m(e));
-    const r = [...u];
-    r[t] = e.slice(-1), f(r), e && t < o - 1 && a.current[t + 1]?.focus();
-  }, K = (s, t) => {
-    s.key === "Backspace" && !u[t] && t > 0 && a.current[t - 1]?.focus();
-  }, P = (s) => {
-    s.preventDefault();
-    let t = s.clipboardData.getData("text").slice(0, o);
-    p && (t = m(t));
-    const e = t.split(""), r = Array(o).fill("");
-    e.forEach((z, A) => r[A] = z), f(r), a.current[Math.min(e.length, o - 1)]?.focus(), g?.(s);
-  }, R = h(
-    c.otpInput,
-    j,
-    N && c.error,
-    n && c.disabled
-  );
-  return L(() => {
-    l && !n && a.current[0]?.focus();
-  }, [l, n]), /* @__PURE__ */ i("div", { className: h(c.root, V), children: u.map((s, t) => /* @__PURE__ */ i(
-    "input",
-    {
-      type: k ? "password" : "text",
-      maxLength: 1,
-      disabled: n,
-      value: s,
-      ref: (e) => {
-        a.current[t] = e;
-      },
-      onChange: (e) => E(e.target.value, t),
-      onKeyDown: (e) => K(e, t),
-      onPaste: P,
-      style: { ...S(C, w), ...I },
-      className: R,
-      placeholder: O
-    },
-    t
-  )) });
-};
-export {
-  T as InputOtp
+import { classNames as e } from "../../utils/class-names.js";
+import t from "./InputOtp.module.js";
+import { getInputOtpStyles as n, isFilled as r, keepOnlyDigits as i, normalizeOtpValue as a } from "./InputOtp.utils.js";
+import { useEffect as o, useRef as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/InputOtp/InputOtp.tsx
+var u = ({ name: u, value: d, onChange: f, onPaste: p, onComplete: m, length: h = 4, size: g = "m", variant: _ = "main", hasError: v, disabled: y, className: b, style: x, inputClassName: S, mask: C, inputStyle: w, integerOnly: T, autoFocus: E, placeholder: D }) => {
+	let O = a(d, h), k = s([]), A = (e) => {
+		let t = e.join("");
+		f(t), r(e, h) && m?.(t);
+	}, j = (e) => k.current[e]?.focus(), M = (e, t) => {
+		let n = T ? i(e) : e, r = [...O];
+		r[t] = n.slice(-1), A(r), n && t < h - 1 && j(t + 1);
+	}, N = (e) => {
+		e.preventDefault();
+		let t = e.clipboardData.getData("text").slice(0, h);
+		T && (t = i(t)), A(Array.from({ length: h }, (e, n) => t[n] ?? "")), j(Math.min(t.length, h - 1)), p?.(e);
+	}, P = e(t.otpInput, "uiFont", S, v && t.error, y && t.disabled), F = {
+		...n(_, g),
+		...w
+	};
+	return o(() => {
+		E && !y && j(0);
+	}, [E, y]), /* @__PURE__ */ l("div", {
+		className: e(t.root, b),
+		style: x,
+		children: [O.map((e, t) => /* @__PURE__ */ c("input", {
+			id: `otp-${t}`,
+			ref: (e) => {
+				k.current[t] = e;
+			},
+			type: C ? "password" : "text",
+			inputMode: T ? "numeric" : void 0,
+			maxLength: 1,
+			value: e,
+			disabled: y,
+			placeholder: D,
+			autoComplete: "one-time-code",
+			className: P,
+			style: F,
+			onChange: (e) => M(e.target.value, t),
+			onPaste: N,
+			onKeyDown: (e) => e.key === "Backspace" && !O[t] && t > 0 && j(t - 1)
+		}, t)), /* @__PURE__ */ c("input", {
+			type: "hidden",
+			name: u,
+			value: d
+		})]
+	});
 };
+//#endregion
+export { u as InputOtp };

package/dist/components/InputOtp/InputOtp.module.js

@@ -0,0 +1,8 @@
+var e = {
+	root: "_root_99noy_1",
+	otpInput: "_otpInput_99noy_49",
+	disabled: "_disabled_99noy_62",
+	error: "_error_99noy_69"
+};
+//#endregion
+export { e as default };

package/dist/components/InputOtp/InputOtp.utils.js

@@ -1,38 +1,29 @@
-import { resolveTypography as e } from "../../utils/typography.js";
-import { getSize as p } from "../../utils/get-size.js";
-const n = {
-  l: e("heading", "h1"),
-  m: e("heading", "h1"),
-  s: e("heading", "h4")
-}, b = (o, t) => {
-  const r = n[t], l = o === "solid" ? "transparent" : `var(--inputotp-border-color-${o}-error)`, i = o === "solid" ? "transparent" : `var(--inputotp-border-color-${o}-default)`;
-  return {
-    "--inputotp-bg-color-default": `var(--inputotp-bg-color-${o}-default)`,
-    "--inputotp-bg-color-hover": `var(--inputotp-bg-color-${o}-hover)`,
-    "--inputotp-bg-color-active": `var(--inputotp-bg-color-${o}-active)`,
-    "--inputotp-bg-color-error": `var(--inputotp-bg-color-${o}-error)`,
-    "--inputotp-bg-color-disabled": `var(--inputotp-bg-color-${o}-disabled)`,
-    "--inputotp-label-color": `var(--inputotp-label-color-${o}-filled)`,
-    "--inputotp-label-color-error": `var(--inputotp-label-color-${o}-error)`,
-    "--inputotp-label-color-disabled": `var(--inputotp-label-color-${o}-disabled-filled)`,
-    "--inputotp-border-color-default": i,
-    "--inputotp-border-color-hover": `var(--inputotp-border-color-${o}-hover)`,
-    "--inputotp-border-color-active": `var(--inputotp-border-color-${o}-active)`,
-    "--inputotp-border-color-disabled": `var(--inputotp-border-color-${o}-disabled)`,
-    "--inputotp-border-color-error": l,
-    "--inputotp-border-radius": p(t, "inputotp-border-radius"),
-    "--inputotp-border-width": p(t, "inputotp-border-width"),
-    "--inputotp-width": p(t, "inputotp-width"),
-    "--inputotp-height": p(t, "inputotp-height"),
-    "--inputotp-label-font-family": r.fontFamily,
-    "--inputotp-label-font-weight": r.fontWeight,
-    "--inputotp-label-font-size": r.fontSize,
-    "--inputotp-label-line-height": r.lineHeight,
-    "--inputotp-label-letter-spacing": r.letterSpacing
-  };
-}, c = (o, t) => o.split("").concat(Array(t).fill("")).slice(0, t), a = (o) => o.replace(/\D/g, "");
-export {
-  b as getInputOtpStyles,
-  a as keepOnlyDigits,
-  c as normalizeOtpValue
-};
+import { getSize as e } from "../../utils/get-size.js";
+import { resolveTypography as t } from "../../utils/typography.js";
+//#region src/components/InputOtp/InputOtp.utils.ts
+var n = (e) => ({
+	l: t("heading", "h1", "bold"),
+	m: t("heading", "h1", "bold"),
+	s: t("heading", "h4", "bold")
+})[e], r = (t, r) => ({
+	"--input-otp-bg-color-default": `var(--input-otp-${t}-bg-color-default)`,
+	"--input-otp-bg-color-hover": `var(--input-otp-${t}-bg-color-hover)`,
+	"--input-otp-bg-color-active": `var(--input-otp-${t}-bg-color-active)`,
+	"--input-otp-bg-color-error": `var(--input-otp-${t}-bg-color-error)`,
+	"--input-otp-bg-color-disabled": `var(--input-otp-${t}-bg-color-disabled)`,
+	"--input-otp-label-color-default": `var(--input-otp-${t}-label-color-default)`,
+	"--input-otp-label-color-error": `var(--input-otp-${t}-label-color-error)`,
+	"--input-otp-label-color-disabled": `var(--input-otp-${t}-label-color-disabled)`,
+	"--input-otp-border-color-default": t === "filled" ? "transparent" : `var(--input-otp-${t}-border-color-default)`,
+	"--input-otp-border-color-hover": `var(--input-otp-${t}-border-color-hover)`,
+	"--input-otp-border-color-active": `var(--input-otp-${t}-border-color-active)`,
+	"--input-otp-border-color-disabled": `var(--input-otp-${t}-border-color-disabled)`,
+	"--input-otp-border-color-error": t === "filled" ? "transparent" : `var(--input-otp-${t}-border-color-error)`,
+	"--input-otp-border-radius": e(r, "input-otp-border-radius"),
+	"--input-otp-border-width": e(r, "input-otp-border-width"),
+	"--input-otp-width": e(r, "input-otp-width"),
+	"--input-otp-height": e(r, "input-otp-height"),
+	...n(r)
+}), i = (e, t) => e.split("").concat(Array(t).fill("")).slice(0, t), a = (e) => e.replace(/\D/g, ""), o = (e, t) => e.join("").length === t && !e.includes("");
+//#endregion
+export { r as getInputOtpStyles, o as isFilled, a as keepOnlyDigits, i as normalizeOtpValue };

package/dist/components/List/List.constants.js

@@ -0,0 +1,17 @@
+//#region src/components/List/List.constants.ts
+var e = {
+	ru: {
+		noOptions: "Нет данных",
+		searchPlaceholder: "Поиск..."
+	},
+	en: {
+		noOptions: "No data",
+		searchPlaceholder: "Search..."
+	},
+	tj: {
+		noOptions: "Маълумот нест",
+		searchPlaceholder: "Ҷустуҷӯ..."
+	}
+};
+//#endregion
+export { e as LIST_LOCALES };

package/dist/components/List/List.context.js

@@ -0,0 +1,5 @@
+import { createSafeContext as e } from "../../utils/create-safe-context/create-safe-context.js";
+//#region src/components/List/List.context.ts
+var [t, n] = e("List component was not found in the tree");
+//#endregion
+export { t as ListContextProvider, n as useListContext };

package/dist/components/List/List.js

@@ -0,0 +1,33 @@
+import { classNames as e } from "../../utils/class-names.js";
+import { useLocale as t } from "../../providers/hooks/useLocale/useLocale.js";
+import n from "./List.module.js";
+import { getListStyles as r } from "./List.utils.js";
+import { ListContextProvider as i } from "./List.context.js";
+import { LIST_LOCALES as a } from "./List.constants.js";
+import { ListItem as o } from "./ListItem/ListItem.js";
+import { ListGroup as s } from "./ListGroup/ListGroup.js";
+import { ListSkeleton as c } from "./ListSkeleton/ListSkeleton.js";
+import { jsx as l } from "react/jsx-runtime";
+//#region src/components/List/List.tsx
+var u = ({ children: o, size: s = "m", loading: u = !1, skeletonCount: d = 2, fullWidth: f = !1, width: p, customEmptyText: m, className: h, style: g, ..._ }) => {
+	let { locale: v } = t(), y = o && (Array.isArray(o) ? o.length > 0 : !0), b = () => u ? /* @__PURE__ */ l(c, { count: d }) : y ? o : /* @__PURE__ */ l("li", {
+		className: n.noOptions,
+		children: m || a[v].noOptions
+	});
+	return /* @__PURE__ */ l(i, {
+		value: { size: s },
+		children: /* @__PURE__ */ l("div", {
+			style: r(s, p, g),
+			className: e(n.root, f && "uiFullWidth", h),
+			..._,
+			children: /* @__PURE__ */ l("ul", {
+				className: n.list,
+				onMouseDown: (e) => e.preventDefault(),
+				children: b()
+			})
+		})
+	});
+};
+u.Item = o, u.Group = s;
+//#endregion
+export { u as List };

package/dist/components/List/List.module.js

@@ -0,0 +1,7 @@
+var e = {
+	root: "_root_2lbh9_1",
+	list: "_list_2lbh9_47",
+	noOptions: "_noOptions_2lbh9_57"
+};
+//#endregion
+export { e as default };

package/dist/components/List/List.utils.js

@@ -0,0 +1,14 @@
+import { getSize as e } from "../../utils/get-size.js";
+//#region src/components/List/List.utils.ts
+var t = (t, n, r) => ({
+	"--list-spacing-between": e(t, "list-spacing-between"),
+	"--list-spacing-horizontal": e(t, "list-spacing-horizontal"),
+	"--list-spacing-vertical": e(t, "list-spacing-vertical"),
+	"--list-border-radius": e(t, "list-border-radius"),
+	"--list-item-icon-size": e(t, "list-item-icon-size"),
+	"--list-item-border-radius": e(t, "list-item-border-radius"),
+	...n && { width: typeof n == "number" ? `${n}px` : n },
+	...r
+});
+//#endregion
+export { t as getListStyles };

package/dist/components/List/ListGroup/ListGroup.js

@@ -0,0 +1,29 @@
+import { resolveTypography as e } from "../../../utils/typography.js";
+import { classNames as t } from "../../../utils/class-names.js";
+import { Collapse as n } from "../../Collapse/Collapse.js";
+import r from "./ListGroup.module.js";
+import { useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { SolidNavigationChevronDown as s } from "@alif-ui-test/icons";
+//#region src/components/List/ListGroup/ListGroup.tsx
+var c = ({ className: c, children: l, title: u, collapsible: d = !1, defaultOpen: f = !0, ...p }) => {
+	let [m, h] = i(f);
+	return /* @__PURE__ */ o("div", {
+		className: t(r.group, c),
+		...p,
+		children: [/* @__PURE__ */ o("div", {
+			style: e("body", "s"),
+			onClick: () => d && h(!m),
+			className: t(r.groupTitle, d && r.collapsible, "uiFont"),
+			children: [u, d && /* @__PURE__ */ a(s, {
+				"aria-hidden": "true",
+				className: t(r.chevron, m && r.chevronOpen)
+			})]
+		}), d ? /* @__PURE__ */ a(n, {
+			isOpen: m,
+			children: l
+		}) : l]
+	});
+};
+//#endregion
+export { c as ListGroup };

package/dist/components/List/ListGroup/ListGroup.module.js

@@ -0,0 +1,9 @@
+var e = {
+	group: "_group_4gpjr_1",
+	groupTitle: "_groupTitle_4gpjr_6",
+	collapsible: "_collapsible_4gpjr_17",
+	chevron: "_chevron_4gpjr_25",
+	chevronOpen: "_chevronOpen_4gpjr_37"
+};
+//#endregion
+export { e as default };

package/dist/components/List/ListItem/ListItem.js

@@ -0,0 +1,55 @@
+import { classNames as e } from "../../../utils/class-names.js";
+import { activateOnKey as t } from "../../../utils/keyboard-activation.js";
+import { useListContext as n } from "../List.context.js";
+import r from "./ListItem.module.js";
+import { resolveTypographyDescription as i, resolveTypographyLabel as a } from "./ListItem.utils.js";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { OutlineSystemCheck as l } from "@alif-ui-test/icons";
+//#region src/components/List/ListItem/ListItem.tsx
+var u = ({ className: u, children: d, value: f, label: p, secondaryText: m, leftSection: h, rightSection: g, selected: _ = !1, disabled: v = !1, alignItemCenter: y = !1, onClick: b, ...x }) => {
+	let { size: S } = n(), C = e(r.listItem, _ && r.selected, v && r.disabled, y && r.centered, u), w = () => {
+		v || !b || f === void 0 || b(f, {
+			value: f,
+			label: p || "",
+			secondaryText: m,
+			disabled: v
+		});
+	};
+	return /* @__PURE__ */ c("li", {
+		className: C,
+		onClick: w,
+		onKeyDown: (e) => t(e, w),
+		"aria-disabled": v,
+		tabIndex: v ? -1 : 0,
+		...x,
+		children: [
+			h && /* @__PURE__ */ s("div", {
+				className: r.aside,
+				children: h
+			}),
+			/* @__PURE__ */ s("div", {
+				className: r.labelContainer,
+				children: d || /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("span", {
+					style: a(S),
+					className: e(r.label, "uiFont"),
+					children: p
+				}), m && /* @__PURE__ */ s("span", {
+					style: i(S),
+					className: e(r.secondaryText, "uiFont"),
+					children: m
+				})] })
+			}),
+			g && /* @__PURE__ */ s("div", {
+				className: r.aside,
+				children: g
+			}),
+			_ && /* @__PURE__ */ s("span", {
+				className: r.checkIcon,
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ s(l, {})
+			})
+		]
+	});
+};
+//#endregion
+export { u as ListItem };

package/dist/components/List/ListItem/ListItem.module.js

@@ -0,0 +1,13 @@
+var e = {
+	listItem: "_listItem_1fgqd_1",
+	disabled: "_disabled_1fgqd_9",
+	centered: "_centered_1fgqd_24",
+	selected: "_selected_1fgqd_28",
+	checkIcon: "_checkIcon_1fgqd_28",
+	aside: "_aside_1fgqd_38",
+	labelContainer: "_labelContainer_1fgqd_58",
+	label: "_label_1fgqd_58",
+	secondaryText: "_secondaryText_1fgqd_66"
+};
+//#endregion
+export { e as default };

package/dist/components/List/ListItem/ListItem.utils.js

@@ -0,0 +1,15 @@
+import { resolveTypography as e } from "../../../utils/typography.js";
+//#region src/components/List/ListItem/ListItem.utils.ts
+var t = (t) => {
+	switch (t) {
+		case "l": return e("body", "m");
+		case "m": return e("body", "s");
+	}
+}, n = (t) => {
+	switch (t) {
+		case "l": return e("body", "s");
+		case "m": return e("description", "l");
+	}
+};
+//#endregion
+export { n as resolveTypographyDescription, t as resolveTypographyLabel };

package/dist/components/List/ListSkeleton/ListSkeleton.js

@@ -0,0 +1,20 @@
+import e from "./ListSkeleton.module.js";
+import { Skeleton as t } from "../../Skeleton/Skeleton.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/List/ListSkeleton/ListSkeleton.tsx
+var i = ({ count: i }) => /* @__PURE__ */ n("li", {
+	className: e.root,
+	children: Array.from({ length: Math.max(1, i) }, (i, a) => /* @__PURE__ */ r("div", {
+		className: e.item,
+		children: [/* @__PURE__ */ n(t, {
+			height: "var(--list-item-skeleton-height-item-text)",
+			radius: "var(--list-item-skeleton-border-radius)"
+		}), /* @__PURE__ */ n(t, {
+			width: "80%",
+			height: "var(--list-item-skeleton-height-secondary-text)",
+			radius: "var(--list-item-skeleton-border-radius)"
+		})]
+	}, a))
+});
+//#endregion
+export { i as ListSkeleton };

package/dist/components/List/ListSkeleton/ListSkeleton.module.js

@@ -0,0 +1,6 @@
+var e = {
+	root: "_root_1uvyq_1",
+	item: "_item_1uvyq_6"
+};
+//#endregion
+export { e as default };

package/dist/components/Loader/Loader.js

@@ -1,7 +1,28 @@
-import { jsx as t } from "react/jsx-runtime";
-import e from "./Loader.module.css.js";
-import { getLoaderStyles as m } from "./Loader.utils.js";
-const p = ({ variant: r = "primary", size: o = "m" }) => /* @__PURE__ */ t("div", { className: e.root, style: m(r, o) });
-export {
-  p as Loader
-};
+import e from "./Loader.module.js";
+import { getLoaderStyles as t } from "./Loader.utils.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/Loader/Loader.tsx
+var i = ({ color: i = "primary", size: a = "m" }) => /* @__PURE__ */ n("span", {
+	className: e.root,
+	style: t(i, a),
+	children: /* @__PURE__ */ r("svg", {
+		width: "var(--loader-size)",
+		height: "var(--loader-size)",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		children: [/* @__PURE__ */ n("path", {
+			opacity: "var(--loader-opacity)",
+			fillRule: "evenodd",
+			clipRule: "evenodd",
+			d: "M8 0C9.05058 1.37766e-07 10.0909 0.207337 11.0615 0.609375C12.0321 1.01141 12.9144 1.59995 13.6572 2.34277C14.4 3.08559 14.9886 3.96795 15.3906 4.93848C15.7927 5.90908 16 6.94943 16 8L15.9902 8.39355C15.9451 9.30968 15.7424 10.2123 15.3906 11.0615C14.9886 12.0321 14.4 12.9144 13.6572 13.6572C12.9144 14.4 12.0321 14.9886 11.0615 15.3906C10.0909 15.7927 9.05058 16 8 16C6.94942 16 5.90908 15.7927 4.93848 15.3906C3.96795 14.9886 3.08559 14.4 2.34277 13.6572C1.59995 12.9144 1.01141 12.0321 0.609375 11.0615C0.207338 10.0909 0 9.05058 0 8C9.18442e-08 6.94942 0.207337 5.90908 0.609375 4.93848C1.01141 3.96795 1.59995 3.08559 2.34277 2.34277C3.08559 1.59995 3.96795 1.01141 4.93848 0.609375C5.90908 0.207338 6.94943 0 8 0ZM8 2C7.21209 2 6.43204 2.15552 5.7041 2.45703C4.97615 2.75856 4.31496 3.20066 3.75781 3.75781C3.20066 4.31496 2.75856 4.97615 2.45703 5.7041C2.15552 6.43204 2 7.21209 2 8C2 8.78791 2.15552 9.56796 2.45703 10.2959C2.75856 11.0239 3.20066 11.685 3.75781 12.2422C4.31496 12.7993 4.97615 13.2414 5.7041 13.543C6.43204 13.8445 7.21209 14 8 14C8.78791 14 9.56796 13.8445 10.2959 13.543C11.0239 13.2414 11.685 12.7993 12.2422 12.2422C12.7993 11.685 13.2414 11.0239 13.543 10.2959C13.8445 9.56796 14 8.78791 14 8L13.9932 7.70508C13.9593 7.01792 13.8068 6.34108 13.543 5.7041C13.2414 4.97615 12.7993 4.31496 12.2422 3.75781C11.685 3.20066 11.0239 2.75856 10.2959 2.45703C9.56796 2.15552 8.78791 2 8 2Z",
+			fill: "var(--loader-track-color)"
+		}), /* @__PURE__ */ n("path", {
+			className: e.indicator,
+			d: "M8 0C9.05057 0 10.0909 0.207337 11.0615 0.609375C12.0321 1.01141 12.9144 1.59995 13.6572 2.34277C14.4 3.08559 14.9886 3.96795 15.3906 4.93848C15.7927 5.90908 16 6.94942 16 8H14C14 7.21209 13.8445 6.43204 13.543 5.7041C13.2414 4.97615 12.7993 4.31496 12.2422 3.75781C11.685 3.20066 11.0239 2.75856 10.2959 2.45703C9.56796 2.15552 8.78791 2 8 2V0Z",
+			fill: "var(--loader-indicator-color)"
+		})]
+	})
+});
+//#endregion
+export { i as Loader };

package/dist/components/Loader/Loader.module.js

@@ -0,0 +1,7 @@
+var e = {
+	root: "_root_7296k_1",
+	indicator: "_indicator_7296k_21",
+	spin: "_spin_7296k_1"
+};
+//#endregion
+export { e as default };

package/dist/components/Loader/Loader.utils.js

@@ -1,14 +1,16 @@
-const a = {
-  contrast: "var(--loader-bg-color-track-contrast)",
-  risk: "var(--loader-bg-color-track-risk)",
-  default: "var(--loader-bg-color-track)"
-}, l = (o, r) => ({
-  "--loader-bg-color-indicator": `var(--loader-bg-color-indicator-${o})`,
-  "--loader-track-bg-color": a[o] || a.default,
-  "--loader-width": `var(--loader-width-${r})`,
-  "--loader-height": `var(--loader-height-${r})`,
-  "--loader-border": `var(--loader-border-${r})`
-});
-export {
-  l as getLoaderStyles
+//#region src/components/Loader/Loader.utils.ts
+var e = {
+	contrast: "var(--loader-track-bg-color-contrast)",
+	primary: "var(--loader-track-bg-color)",
+	secondary: "var(--loader-track-bg-color)"
+}, t = (t, n) => {
+	let r = t;
+	return {
+		"--loader-indicator-color": r in e ? `var(--loader-indicator-bg-color-${r})` : r,
+		"--loader-track-color": e[r] || r,
+		"--loader-opacity": r in e ? "unset" : "var(--loader-track-opacity)",
+		"--loader-size": `var(--loader-size-${n})`
+	};
 };
+//#endregion
+export { t as getLoaderStyles };