skillgrid 0.0.82 → 0.0.84

package/dist/assets/components/Tag/Tag.module-DN9gmOlu.css

@@ -0,0 +1 @@
+._tag_l7ebw_1{--tag-bg-color: var(--bg-secondary);--tag-label-color: var(--base-graphite-45);--tag-icon-wrapper-color: var(--base-graphite-45);display:flex;flex-direction:row;align-items:center;width:fit-content;text-overflow:ellipsis;background-color:var(--tag-bg-color)}._tag_l7ebw_1 ._label_l7ebw_16{color:var(--tag-label-color)}._tag_l7ebw_1 ._iconWrapper_l7ebw_20{width:1rem;height:1rem;color:var(--tag-icon-wrapper-color)}._tag_l7ebw_1._medium_l7ebw_27{gap:.25rem;padding:.25rem .5rem;border-radius:.5rem}._tag_l7ebw_1._large_l7ebw_33{gap:.125rem;padding:.375rem .625rem;border-radius:1.125rem}._tag_l7ebw_1._large_l7ebw_33 ._label_l7ebw_16{padding:.0625rem .125rem}._disabled_l7ebw_43{opacity:.48}._tag_l7ebw_1._neutral_l7ebw_47{--tag-bg-color: var(--bg-secondary);--tag-label-color: var(--base-graphite-45);--tag-icon-wrapper-color: var(--base-graphite-45)}._tag_l7ebw_1._positive_l7ebw_53{--tag-bg-color: var(--bg-positive-secondary);--tag-label-color: var(--base-green-55);--tag-icon-wrapper-color: var(--base-green-55)}._tag_l7ebw_1._negative_l7ebw_59{--tag-bg-color: var(--bg-negative-secondary);--tag-label-color: var(--base-red-55);--tag-icon-wrapper-color: var(--base-red-55)}._tag_l7ebw_1._warning_l7ebw_65{--tag-bg-color: var(--bg-warning-secondary);--tag-label-color: var(--base-orange-50);--tag-icon-wrapper-color: var(--base-orange-50)}._tag_l7ebw_1._vivid_l7ebw_71{--tag-bg-color: var(--bg-vivid-secondary);--tag-label-color: var(--base-yellow-50);--tag-icon-wrapper-color: var(--base-yellow-50)}._tag_l7ebw_1._special_l7ebw_77{--tag-bg-color: var(--bg-special-secondary);--tag-label-color: var(--base-violet-45);--tag-icon-wrapper-color: var(--base-violet-45)}._tag_l7ebw_1._accent_l7ebw_84{--tag-bg-color: var(--bg-accent-secondary);--tag-label-color: var(--text-accent);--tag-icon-wrapper-color: var(--text-accent)}._tag_l7ebw_1._blue_l7ebw_90{--tag-bg-color: var(--bg-blue-secondary);--tag-label-color: var(--base-blue-45);--tag-icon-wrapper-color: var(--base-blue-45)}._tag_l7ebw_1._lovely_l7ebw_96{--tag-bg-color: var(--bg-lovely-secondary);--tag-label-color: var(--base-pink-60);--tag-icon-wrapper-color: var(--base-pink-60)}._tag_l7ebw_1._dreamy_l7ebw_102{--tag-bg-color: var(--bg-dreamy-secondary);--tag-label-color: var(--base-sky-60);--tag-icon-wrapper-color: var(--base-sky-60)}._tag_l7ebw_1._custom_l7ebw_108{--tag-bg-color: inherit;--tag-label-color: currentcolor;--tag-icon-wrapper-color: currentcolor}[data-skillgridDarkTheme=true] ._tag_l7ebw_1._neutral_l7ebw_47{--tag-bg-color: var(--base-graphite-20);--tag-label-color: var(--base-graphite-80);--tag-icon-wrapper-color: var(--base-graphite-60)}[data-skillgridDarkTheme=true] ._tag_l7ebw_1._positive_l7ebw_53{--tag-bg-color: #0a3d1f;--tag-label-color: var(--base-green-80);--tag-icon-wrapper-color: var(--base-green-60)}[data-skillgridDarkTheme=true] ._tag_l7ebw_1._negative_l7ebw_59{--tag-bg-color: #4a1510;--tag-label-color: var(--base-red-80);--tag-icon-wrapper-color: var(--base-red-60)}[data-skillgridDarkTheme=true] ._tag_l7ebw_1._warning_l7ebw_65{--tag-bg-color: #4a2e08;--tag-label-color: var(--base-orange-80);--tag-icon-wrapper-color: var(--base-orange-60)}[data-skillgridDarkTheme=true] ._tag_l7ebw_1._vivid_l7ebw_71{--tag-bg-color: #4a3d0a;--tag-label-color: var(--base-yellow-80);--tag-icon-wrapper-color: var(--base-yellow-60)}[data-skillgridDarkTheme=true] ._tag_l7ebw_1._special_l7ebw_77{--tag-bg-color: #544765;--tag-label-color: var(--base-violet-80);--tag-icon-wrapper-color: var(--base-violet-60)}[data-skillgridDarkTheme=true] ._tag_l7ebw_1._accent_l7ebw_84{--tag-bg-color: #1a2d4a;--tag-label-color: var(--base-blue-80);--tag-icon-wrapper-color: var(--base-blue-60)}[data-skillgridDarkTheme=true] ._tag_l7ebw_1._blue_l7ebw_90{--tag-bg-color: #0c2347;--tag-label-color: var(--base-blue-80);--tag-icon-wrapper-color: var(--base-blue-60)}[data-skillgridDarkTheme=true] ._tag_l7ebw_1._lovely_l7ebw_96{--tag-bg-color: #4a1028;--tag-label-color: var(--base-pink-80);--tag-icon-wrapper-color: var(--base-pink-60)}[data-skillgridDarkTheme=true] ._tag_l7ebw_1._dreamy_l7ebw_102{--tag-bg-color: #0e2d3d;--tag-label-color: var(--base-sky-80);--tag-icon-wrapper-color: var(--base-sky-60)}

package/dist/components/Avatar/AvatarGroup/AvatarGroupRoot.js

@@ -1,8 +1,8 @@
 import { jsx as r } from "react/jsx-runtime";
 import d from "classnames";
-import { useBackgroundColor as g } from "../../../hooks/useBackgroundColor.js";
-import v from "./AvatarGroup.module.css.js";
-import { AvatarGroupProvider as B } from "./AvatarGroupProvider.js";
+import g from "./AvatarGroup.module.css.js";
+import { AvatarGroupProvider as v } from "./AvatarGroupProvider.js";
+import { useBackgroundColor as B } from "../../../hooks/useBackgroundColor.js";
 const G = (t) => {
   const {
     children: a,
@@ -12,12 +12,12 @@ const G = (t) => {
     cutoutBackground: u,
     className: m,
     style: n
-  } = t, { ref: p, bgColor: f } = g(), o = u || f || "#ffffff", l = d(v.avatarGroup, m), i = {
+  } = t, { ref: p, bgColor: f } = B(), o = u || f || "#ffffff", l = d(g.avatarGroup, m), i = {
     "--avatar-cutout-bg": o,
     ...n
   };
   return /* @__PURE__ */ r(
-    B,
+    v,
     {
       size: s,
       shape: c,

package/dist/components/FileUpload/FileUpload.js

@@ -2,11 +2,11 @@ import { jsxs as m, jsx as a } from "react/jsx-runtime";
 import { clsx as p } from "clsx";
 import Ge from "rc-upload";
 import { forwardRef as je, useContext as Fe, useState as W, useRef as se, useMemo as we, useLayoutEffect as He } from "react";
-import { useIsMobile as ze } from "../../hooks/useIsMobile.js";
 import { interpolate as de } from "../../locale/interpolate.js";
 import t from "./FileUpload.module.css.js";
 import { isMobileViewport as ve } from "../../utils/adaptive.js";
 import { useLocale as ue } from "../ConfigProvider/ConfigProvider.hook.js";
+import { useIsMobile as ze } from "../../hooks/useIsMobile.js";
 import { SnackbarContext as We } from "../Snackbar/lib/useSnackbar.js";
 import { Button as M } from "../Button/Button.js";
 import { Icon as h } from "../Icon/IconWithCategories.js";

package/dist/components/InputBase/Input.js

@@ -2,9 +2,9 @@ import { jsx as r, jsxs as W } from "react/jsx-runtime";
 import { forwardRef as z, useImperativeHandle as P } from "react";
 import { clsx as f } from "clsx";
 import e from "./InputBase.module.css.js";
-import { useCompatId as Q } from "../../hooks/useCompatId.js";
-import { useInputSync as Y } from "./lib/useInputSync.js";
-import { useTextareaResize as Z } from "./lib/useTextareaResize.js";
+import { useInputSync as Q } from "./lib/useInputSync.js";
+import { useTextareaResize as Y } from "./lib/useTextareaResize.js";
+import { useCompatId as Z } from "../../hooks/useCompatId.js";
 import { MAX_HINT_LENGTH as k } from "./lib/constants.js";
 import { useGripResize as U } from "./lib/useGripResize.js";
 import { GripIcon as E } from "./assets/GripIcon.js";
@@ -32,8 +32,8 @@ const K = z(
     resize: c,
     ...H
   }, R) => {
-    const { textareaRef: w, inputRef: j, currentRef: d } = Y(a, t);
-    if (Z(a, c, w), P(R, () => d.current, [d]), t === "textarea")
+    const { textareaRef: w, inputRef: j, currentRef: d } = Q(a, t);
+    if (Y(a, c, w), P(R, () => d.current, [d]), t === "textarea")
       return /* @__PURE__ */ r(
         "textarea",
         {
@@ -132,7 +132,7 @@ const K = z(
     showGrip: T = !1,
     ...L
   }, O) => {
-    const X = Q("input-wrapper"), S = D || X, _ = y && s && (d || p), q = s && s.length > k ? s.substring(0, k) + "..." : s, B = f(
+    const X = Z("input-wrapper"), S = D || X, _ = y && s && (d || p), q = s && s.length > k ? s.substring(0, k) + "..." : s, B = f(
       e.wrapper,
       e[`size-${m}`],
       a && e.error,

package/dist/components/Popover/lib/use-popover.js

@@ -1,7 +1,7 @@
 import { offset as G, flip as H, shift as V, inline as q, size as J, hide as K, useFloating as Q, autoUpdate as Z, useTransitionStyles as M, useClick as ee, useHover as te, useFocus as oe, useDismiss as ne, useRole as se, useInteractions as re } from "@floating-ui/react";
 import { useState as i, useMemo as v, useCallback as ce, useEffect as ae, useLayoutEffect as ie } from "react";
-import { useCompatId as S } from "../../../hooks/useCompatId.js";
 import { DEFAULT_FLOATING as le, hasMiddleware as fe } from "./utils.js";
+import { useCompatId as S } from "../../../hooks/useCompatId.js";
 const r = 8, ue = (c) => {
   switch (c.split("-")[0]) {
     case "top":

package/dist/components/SegmentedControl/SegmentedControl.js

@@ -4,16 +4,16 @@ import r from "./SegmentedControl.module.css.js";
 import u from "../../styles/typography.module.css.js";
 import { useState as b, useRef as w, useEffect as A, useLayoutEffect as J, Fragment as P } from "react";
 import { useCompatId as W } from "../../hooks/useCompatId.js";
-import { generateHash as B } from "../../lib/generate-hash.js";
+import { generateHash as $ } from "../../lib/generate-hash.js";
 const N = {
   s: u["typography-label-3-regular"],
   m: u["typography-label-2-regular"],
   l: u["typography-label-2-regular"]
-}, U = (C) => {
+}, T = (C) => {
   const {
     className: I,
     defaultValue: x,
-    value: a,
+    value: l,
     size: o = "m",
     segments: t,
     stretched: g,
@@ -23,8 +23,8 @@ const N = {
     ...k
   } = C, p = W("segmented-control"), [y, v] = b(x || t[0].value), [E, V] = b({ width: 0, left: 0, height: 0 }), s = w(null);
   A(() => {
-    a != null && v(a);
-  }, [a]), J(() => {
+    l != null && v(l);
+  }, [l]), J(() => {
     j();
   }, [y, t, o, g, h]);
   const j = () => {
@@ -59,13 +59,13 @@ const N = {
       ...k,
       children: [
         t == null ? void 0 : t.map(({ label: e, value: c, containerProps: F = {} }, H) => {
-          const { className: L, ...O } = F, q = () => z(c), l = JSON.stringify(c), d = y === c;
+          const { className: L, ...O } = F, q = () => z(c), a = JSON.stringify(c), d = y === c;
           return /* @__PURE__ */ S(P, { children: [
             /* @__PURE__ */ m(
               "input",
               {
-                id: p + l,
-                value: l,
+                id: p + a,
+                value: a,
                 type: "radio",
                 checked: d,
                 readOnly: !0
@@ -76,14 +76,14 @@ const N = {
               {
                 "data-is-active-segment": d,
                 className: f(r.segment, N[o], { [r.selected]: d }, L),
-                htmlFor: p + l,
-                "data-testid": "segmented-control-segment",
+                htmlFor: p + a,
+                "data-testid": `segmented-control-segment-label-${a}`,
                 onClick: q,
                 ...O,
                 children: e
               }
             )
-          ] }, B(l) + H);
+          ] }, $(a) + H);
         }),
         /* @__PURE__ */ m(
           "div",
@@ -98,5 +98,5 @@ const N = {
   );
 };
 export {
-  U as SegmentedControl
+  T as SegmentedControl
 };

package/dist/components/Tabs/ScrollWrapper.js

@@ -1,8 +1,8 @@
 import { jsxs as N, jsx as r } from "react/jsx-runtime";
 import { useRef as W, useState as g, useEffect as w } from "react";
-import { useBackgroundColor as M } from "../../hooks/useBackgroundColor.js";
 import { clsx as i } from "clsx";
 import e from "./ScrollWrapper.module.css.js";
+import { useBackgroundColor as M } from "../../hooks/useBackgroundColor.js";
 const B = "white", G = ({
   children: b,
   withControls: a = !0,

package/dist/components/Tabs/Tabs.js

@@ -1,10 +1,10 @@
 import { jsx as n, jsxs as V } from "react/jsx-runtime";
 import F, { useState as U, createContext as j, useContext as k } from "react";
 import { ScrollWrapper as G } from "./ScrollWrapper.js";
-import { useIsMobile as M } from "../../hooks/useIsMobile.js";
 import { clsx as d } from "clsx";
 import f from "../../styles/typography.module.css.js";
 import a from "./Tabs.module.css.js";
+import { useIsMobile as M } from "../../hooks/useIsMobile.js";
 import { Badge as O } from "../Badge/Badge.js";
 const W = "md", R = !1, Y = 8, Z = "top-right-inside", P = j(null), h = () => {
   const t = k(P);

package/dist/components/Tag/Tag.js

@@ -1,48 +1,49 @@
-import { jsxs as E, jsx as r } from "react/jsx-runtime";
+import { jsxs as C, jsx as r } from "react/jsx-runtime";
 import s from "./Tag.module.css.js";
 import p from "../../styles/typography.module.css.js";
-import { forwardRef as P } from "react";
+import { forwardRef as I } from "react";
 import { clsx as a } from "clsx";
-const T = P((m, n) => {
+const z = I((m, n) => {
   const {
-    className: d,
-    children: e,
-    componentStyle: c = "neutral",
-    size: t = "medium",
+    className: c,
+    children: t,
+    componentStyle: d = "neutral",
+    size: e = "medium",
     disabled: i = !1,
-    showLabel: N = !!e,
-    slotStart: o,
-    slotEnd: l,
-    slotStartWrapperProps: f = {},
-    slotEndWrapperProps: b = {},
-    "data-testid": g,
-    ...h
-  } = m, { className: u, ...y } = f, { className: S, ...x } = b;
-  return /* @__PURE__ */ E(
+    showLabel: N = !!t,
+    slotStart: l,
+    slotEnd: o,
+    slotStartWrapperProps: b = {},
+    slotEndWrapperProps: f = {},
+    labelWrapperProps: g = {},
+    "data-testid": h,
+    ...u
+  } = m, { className: P, ...y } = b, { className: S, ...W } = f, { className: x, ...E } = g;
+  return /* @__PURE__ */ C(
     "div",
     {
       className: a(
         s.tag,
-        s[t],
-        s[c],
+        s[e],
+        s[d],
         {
           [s.disabled]: i,
-          [p["typography-label-3-regular"]]: t === "medium",
-          [p["typography-subtitle-1-semibold"]]: t === "large"
+          [p["typography-label-3-regular"]]: e === "medium",
+          [p["typography-subtitle-1-semibold"]]: e === "large"
         },
-        d
+        c
       ),
-      "data-testid": g || "tag-component",
+      "data-testid": h || "tag-component",
       ref: n,
-      ...h,
+      ...u,
       children: [
-        o && /* @__PURE__ */ r("span", { className: a([s.iconWrapper, u]), ...y, children: o }),
-        N && /* @__PURE__ */ r("span", { className: a([s.label]), children: e }),
-        l && /* @__PURE__ */ r("span", { className: a([s.iconWrapper, S]), ...x, children: l })
+        l && /* @__PURE__ */ r("span", { className: a([s.iconWrapper, P]), ...y, children: l }),
+        N && /* @__PURE__ */ r("span", { className: a([s.label, x]), ...E, children: t }),
+        o && /* @__PURE__ */ r("span", { className: a([s.iconWrapper, S]), ...W, children: o })
       ]
     }
   );
 });
 export {
-  T as Tag
+  z as Tag
 };

package/dist/components/Tag/Tag.module.css.js

@@ -1,37 +1,39 @@
-import '../../assets/components/Tag/Tag.module-FHcOZDVu.css';const _ = "_tag_16i5f_1", i = "_label_16i5f_16", e = "_iconWrapper_16i5f_20", a = "_medium_16i5f_27", n = "_large_16i5f_33", t = "_disabled_16i5f_43", c = "_neutral_16i5f_47", l = "_positive_16i5f_53", s = "_negative_16i5f_59", o = "_warning_16i5f_65", r = "_vivid_16i5f_71", f = "_special_16i5f_77", d = "_accent_16i5f_84", v = "_blue_16i5f_90", p = "_lovely_16i5f_96", g = "_dreamy_16i5f_102", u = {
-  tag: _,
-  label: i,
-  iconWrapper: e,
-  medium: a,
+import '../../assets/components/Tag/Tag.module-DN9gmOlu.css';const e = "_tag_l7ebw_1", _ = "_label_l7ebw_16", l = "_iconWrapper_l7ebw_20", t = "_medium_l7ebw_27", n = "_large_l7ebw_33", a = "_disabled_l7ebw_43", c = "_neutral_l7ebw_47", s = "_positive_l7ebw_53", o = "_negative_l7ebw_59", i = "_warning_l7ebw_65", b = "_vivid_l7ebw_71", w = "_special_l7ebw_77", r = "_accent_l7ebw_84", d = "_blue_l7ebw_90", v = "_lovely_l7ebw_96", p = "_dreamy_l7ebw_102", u = "_custom_l7ebw_108", g = {
+  tag: e,
+  label: _,
+  iconWrapper: l,
+  medium: t,
   large: n,
-  disabled: t,
+  disabled: a,
   neutral: c,
-  positive: l,
-  negative: s,
-  warning: o,
-  vivid: r,
-  special: f,
-  accent: d,
-  blue: v,
-  lovely: p,
-  dreamy: g
+  positive: s,
+  negative: o,
+  warning: i,
+  vivid: b,
+  special: w,
+  accent: r,
+  blue: d,
+  lovely: v,
+  dreamy: p,
+  custom: u
 };
 export {
-  d as accent,
-  v as blue,
-  u as default,
-  t as disabled,
-  g as dreamy,
-  e as iconWrapper,
-  i as label,
+  r as accent,
+  d as blue,
+  u as custom,
+  g as default,
+  a as disabled,
+  p as dreamy,
+  l as iconWrapper,
+  _ as label,
   n as large,
-  p as lovely,
-  a as medium,
-  s as negative,
+  v as lovely,
+  t as medium,
+  o as negative,
   c as neutral,
-  l as positive,
-  f as special,
-  _ as tag,
-  r as vivid,
-  o as warning
+  s as positive,
+  w as special,
+  e as tag,
+  b as vivid,
+  i as warning
 };

package/dist/components/Tag/Tag.type.d.ts

@@ -10,7 +10,7 @@ export interface TagProps extends ComponentProps<'div'> {
     /** Цвет компонента
      * @default "neutral"
      */
-    componentStyle?: 'neutral' | 'positive' | 'negative' | 'warning' | 'vivid' | 'special' | 'accent' | 'blue' | 'lovely' | 'dreamy';
+    componentStyle?: 'neutral' | 'positive' | 'negative' | 'warning' | 'vivid' | 'special' | 'accent' | 'blue' | 'lovely' | 'dreamy' | 'custom';
     /** Задизейблен ли компонент
      * @default false
      */
@@ -31,6 +31,10 @@ export interface TagProps extends ComponentProps<'div'> {
     slotEndWrapperProps?: ComponentProps<'span'> & {
         'data-testid'?: string;
     };
+    /** Пропсы для контейнера текста */
+    labelWrapperProps?: ComponentProps<'span'> & {
+        'data-testid'?: string;
+    };
     /** Id для тестирования */
     'data-testid'?: string;
 }