@dss-kit/ui-kit 0.3.9 → 1.0.0

package/dist/components/controls/MarkdownTextEditor/components/EditorToolbar/EditorToolbar.js

@@ -2,21 +2,21 @@ import { jsx as o, jsxs as w } from "react/jsx-runtime";
 import { INSERT_ORDERED_LIST_COMMAND as ie, INSERT_UNORDERED_LIST_COMMAND as se } from "@lexical/list";
 import { useLexicalComposerContext as ce } from "@lexical/react/LexicalComposerContext";
 import { INSERT_TABLE_COMMAND as le } from "@lexical/table";
-import { $getSelection as ae, $isRangeSelection as ue, $createTextNode as de, $insertNodes as me, FORMAT_ELEMENT_COMMAND as D, FORMAT_TEXT_COMMAND as x } from "lexical";
+import { $getSelection as ae, $isRangeSelection as ue, $createTextNode as de, $insertNodes as me, FORMAT_ELEMENT_COMMAND as P, FORMAT_TEXT_COMMAND as x } from "lexical";
 import pe from "lodash.debounce";
-import { useState as P, useRef as V, useMemo as p, useCallback as b, Fragment as fe, useEffect as he } from "react";
+import { useState as B, useRef as V, useMemo as p, useCallback as b, Fragment as fe, useEffect as he } from "react";
 import be from "../../../../../assets/svg/markdown/eye.svg.js";
 import { useMarkdownTextEditorLocale as ve } from "../../MarkdownTextEditor.locale.js";
 import { previewStyles as Ce } from "./EditorToolbar.styles.js";
 import { defaultOnImagesUpload as ge } from "./EditorToolbar.utils.js";
 import { TextSizeSelect as Ee } from "./TextSizeSelect/TextSizeSelect.js";
 import { useToolbarActions as Te } from "../../hooks/useToolbarActions/useToolbarActions.js";
-import { createCustomLinkNode as Ae } from "../../nodes/CustomLinkNode/CustomLinkNode.utils.js";
-import { createImageRowNode as Le } from "../../nodes/ImageRowNode/ImageRowNode.utils.js";
+import { createCustomLinkNode as Le } from "../../nodes/CustomLinkNode/CustomLinkNode.utils.js";
+import { createImageRowNode as Ne } from "../../nodes/ImageRowNode/ImageRowNode.utils.js";
 import { MarkdownToolbarAction as c } from "../../hooks/useToolbarActions/useToolbarActions.const.js";
 import { LinkPopoverContent as q } from "./LinkPopoverContent/LinkPopoverContent.js";
 import { TablePopoverContent as X } from "./TablePopoverContent/TablePopoverContent.js";
-import { ActionMenuButton as Ne } from "./ActionMenuButton/ActionMenuButton.js";
+import { ActionMenuButton as Ae } from "./ActionMenuButton/ActionMenuButton.js";
 import { useEditorStates as Me } from "../../contexts/EditorStateContext/EditorStateContext.hook.js";
 import { Popover as I } from "../../../../shared/Popover/Popover.js";
 import { IconButton as W } from "../../../IconButton/IconButton.js";
@@ -28,12 +28,12 @@ function eo({
   onImagesUpload: U = ge,
   className: J
 }) {
-  const [d, Q] = P(11), [v, T] = P(null), [C, A] = P(
+  const [d, Q] = B(11), [v, T] = B(null), [C, L] = B(
     null
-  ), L = V(null), { toolbar: Y } = ve(), S = Y.preview, [r] = ce(), { isEditable: F, isPreviewMode: f, setPreviewMode: Z } = Me(), { availableActionGroups: N } = Te(), k = V(null), m = p(() => !F || f, [F, f]), ee = p(() => f ? S.hide : S.show, [f, S]), { toolbarGroups: y, menuGroups: $ } = p(() => {
+  ), N = V(null), { toolbar: Y } = ve(), _ = Y.preview, [r] = ce(), { isEditable: F, isPreviewMode: f, setPreviewMode: Z } = Me(), { availableActionGroups: A } = Te(), S = V(null), m = p(() => !F || f, [F, f]), ee = p(() => f ? _.hide : _.show, [f, _]), { toolbarGroups: k, menuGroups: $ } = p(() => {
     const e = [], t = [];
     let s = 0;
-    for (const i of N) {
+    for (const i of A) {
       const l = [], n = [];
       for (const a of i)
         s += 1, s <= d ? l.push(a) : n.push(a);
@@ -43,13 +43,13 @@ function eo({
       toolbarGroups: e,
       menuGroups: t
     };
-  }, [N, d]), oe = p(() => typeof v == "number" && v > d - 1, [v, d]), te = p(() => typeof C == "number" && C > d - 1, [C, d]), G = b(
+  }, [A, d]), oe = p(() => typeof v == "number" && v > d - 1, [v, d]), te = p(() => typeof C == "number" && C > d - 1, [C, d]), y = b(
     (e) => {
       const { text: t, url: s } = e;
       r.update(() => {
         const i = ae();
         if (ue(i)) {
-          const l = Ae({
+          const l = Le({
             text: t,
             url: s
           });
@@ -60,17 +60,17 @@ function eo({
       }), T(null);
     },
     [r]
-  ), _ = b(
+  ), G = b(
     (e) => {
       const { rows: t, columns: s } = e;
       r.dispatchCommand(le, {
         rows: t,
         columns: s
-      }), A(null);
+      }), L(null);
     },
     [r]
   ), j = b(() => {
-    k.current && k.current.click();
+    S.current && S.current.click();
   }, []), ne = b(
     async (e) => {
       try {
@@ -79,7 +79,7 @@ function eo({
           return;
         const s = await U(t);
         r.update(() => {
-          const i = Le(s);
+          const i = Ne(s);
           i && me([i]);
         });
       } catch (t) {
@@ -105,13 +105,13 @@ function eo({
           r.dispatchCommand(x, "strikethrough");
         },
         [c.ALIGN_LEFT]: () => {
-          r.dispatchCommand(D, "left");
+          r.dispatchCommand(P, "left");
         },
         [c.ALIGN_CENTER]: () => {
-          r.dispatchCommand(D, "center");
+          r.dispatchCommand(P, "center");
         },
         [c.ALIGN_RIGHT]: () => {
-          r.dispatchCommand(D, "right");
+          r.dispatchCommand(P, "right");
         },
         [c.LINK]: () => {
           T(t);
@@ -120,7 +120,7 @@ function eo({
           j();
         },
         [c.TABLE]: () => {
-          A(t);
+          L(t);
         },
         [c.BULLET_LIST]: () => {
           r.dispatchCommand(se, void 0);
@@ -131,8 +131,8 @@ function eo({
       })[e]();
     },
     [j, r]
-  ), re = p(() => y.map((e, t) => {
-    const s = y.slice(0, t).reduce((n, a) => n + a.length, 0);
+  ), re = p(() => k.map((e, t) => {
+    const s = k.slice(0, t).reduce((n, a) => n + a.length, 0);
     if (!e.length)
       return null;
     const i = e.map(
@@ -141,11 +141,11 @@ function eo({
         return u === c.LINK ? /* @__PURE__ */ o(
           I,
           {
-            content: /* @__PURE__ */ o(q, { onSave: G }),
+            content: /* @__PURE__ */ o(q, { onSave: y }),
             placement: "bottom",
             open: v === h,
-            onChange: (B) => {
-              T(B ? h : null);
+            onChange: (D) => {
+              T(D ? h : null);
             },
             children: /* @__PURE__ */ o(W, { size: "xs", color: "no-bg", disabled: m, children: /* @__PURE__ */ o(n, {}) })
           },
@@ -153,11 +153,11 @@ function eo({
         ) : u === c.TABLE ? /* @__PURE__ */ o(
           I,
           {
-            content: /* @__PURE__ */ o(X, { onSave: _ }),
+            content: /* @__PURE__ */ o(X, { onSave: G }),
             placement: "bottom",
             open: C === h,
-            onChange: (B) => {
-              A(B ? h : null);
+            onChange: (D) => {
+              L(D ? h : null);
             },
             children: /* @__PURE__ */ o(
               W,
@@ -190,25 +190,25 @@ function eo({
         {
           w: 1,
           h: 32,
-          backgroundColor: E.border.neutralAlphaBasic
+          backgroundColor: E.border.neutral_alpha_basic
         }
       )
     ] }, e.flatMap((n) => n.id).join("-"));
   }), [
-    y,
+    k,
     O,
     v,
     m,
     C,
-    G,
-    _
+    y,
+    G
   ]), H = b(() => {
-    const e = L.current;
+    const e = N.current;
     if (!e)
       return;
     const t = e.clientWidth, s = 40, i = 4, l = 1, n = i + l + i + s + i;
     let a = t - n, u = 0;
-    for (const M of N)
+    for (const M of A)
       if (M.length) {
         for (const h of M) {
           const g = s + i;
@@ -220,19 +220,19 @@ function eo({
         a -= l + i;
       }
     Q(u);
-  }, [N]), K = p(() => pe(H, 20, {}), [H]);
+  }, [A]), K = p(() => pe(H, 20, {}), [H]);
   return he(() => {
-    if (!L.current)
+    if (!N.current)
       return;
     const e = new ResizeObserver(() => {
       K();
     });
-    return e.observe(L.current), () => e.disconnect();
+    return e.observe(N.current), () => e.disconnect();
   }, [K]), /* @__PURE__ */ w(
     R,
     {
-      backgroundColor: E.fill.neutralPrimary,
-      border: `1px solid ${E.border.neutralAlphaBasic}`,
+      backgroundColor: E.fill.neutral_primary,
+      border: `1px solid ${E.border.neutral_alpha_basic}`,
       borderRadius: Ie.md,
       flex: !0,
       row: !0,
@@ -245,7 +245,7 @@ function eo({
           /* @__PURE__ */ o(
             "input",
             {
-              ref: k,
+              ref: S,
               type: "file",
               accept: "image/*",
               hidden: !0,
@@ -258,7 +258,7 @@ function eo({
           /* @__PURE__ */ o(
             I,
             {
-              content: /* @__PURE__ */ o(q, { onSave: G }),
+              content: /* @__PURE__ */ o(q, { onSave: y }),
               placement: "bottom",
               open: oe,
               onChange: (e) => {
@@ -270,11 +270,11 @@ function eo({
           /* @__PURE__ */ o(
             I,
             {
-              content: /* @__PURE__ */ o(X, { onSave: _ }),
+              content: /* @__PURE__ */ o(X, { onSave: G }),
               placement: "bottom",
               open: te,
               onChange: (e) => {
-                e || A(null);
+                e || L(null);
               },
               children: /* @__PURE__ */ o("div", {})
             }
@@ -289,11 +289,11 @@ function eo({
               w: "full",
               ml: z.xs,
               overflow: "hidden",
-              ref: L,
+              ref: N,
               children: [
                 re,
                 $.length ? /* @__PURE__ */ o(
-                  Ne,
+                  Ae,
                   {
                     disabled: m,
                     onAction: O,

package/dist/components/controls/MarkdownTextEditor/nodes/CustomLinkNode/parts/CustomLinkNodeComponent/CustomLinkNodeComponent.styles.js

@@ -8,7 +8,7 @@ const { color: o, cornerRadius: r, spacing: n, transition: c } = t, a = e({
 }), l = e({
   color: o.text.accent,
   ":hover": {
-    color: o.text.accentHover
+    color: o.text.accent_hover
   }
 }), p = e({
   width: "16px",
@@ -17,10 +17,10 @@ const { color: o, cornerRadius: r, spacing: n, transition: c } = t, a = e({
   cursor: "pointer",
   transition: c.general,
   ":hover": {
-    color: o.icon.negativeHover
+    color: o.icon.negative_hover
   }
 }), x = e({
-  boxShadow: `0 2px 10px 4px ${o.effect.shadowL}`,
+  boxShadow: `0 2px 10px 4px ${o.effect.shadow_l}`,
   borderRadius: r.md,
   padding: n.sm
 });

package/dist/components/controls/MarkdownTextEditor/nodes/ImageRowNode/parts/ImageRowNodeComponent/ImageRowNodeComponent.styles.js

@@ -12,10 +12,10 @@ const { color: o, cornerRadius: t, spacing: i, transition: s } = r, p = e({
   cursor: "pointer",
   transition: s.general,
   ":hover": {
-    color: o.icon.negativeHover
+    color: o.icon.negative_hover
   }
 }), d = e({
-  boxShadow: `0 2px 10px 4px ${o.effect.shadowL}`,
+  boxShadow: `0 2px 10px 4px ${o.effect.shadow_l}`,
   borderRadius: t.xs,
   padding: i.xs
 });

package/dist/components/controls/MarkdownTextEditor/themes/editor.theme.js

@@ -5,7 +5,7 @@ const { color: o, spacing: r } = l, n = t({
   borderSpacing: "0",
   borderCollapse: "separate"
 }), i = t({
-  border: `1px solid ${o.border.neutralPrimary}`,
+  border: `1px solid ${o.border.neutral_primary}`,
   padding: `${r.sm} ${r.sm}`
 }), a = t({
   color: o.text.accent

package/dist/components/controls/OtpInput/styles.js

@@ -1,7 +1,7 @@
 import { css as o } from "@emotion/css";
 import { typography as e } from "../../../styles/utils/typography.js";
 import { theme as i } from "../../../utils/theme/index.js";
-const { color: r } = i, l = {
+const { color: r } = i, s = {
   input: o({
     ...e.common,
     ...e.body1,
@@ -9,7 +9,7 @@ const { color: r } = i, l = {
     height: 48,
     textAlign: "center",
     borderRadius: 12,
-    border: `1px solid ${r.border.neutralAlphaBasic}`,
+    border: `1px solid ${r.border.neutral_alpha_basic}`,
     color: r.text.primary,
     outline: "none",
     transition: "border-color 0.5s ease, background-color 0.5s ease, box-shadow 0.5s ease",
@@ -17,11 +17,11 @@ const { color: r } = i, l = {
       color: r.text.tertiary
     },
     "&:focus-visible": {
-      borderColor: r.border.accentPrimary,
-      boxShadow: `0 0 0 1px ${r.border.accentPrimary}`
+      borderColor: r.border.accent_primary,
+      boxShadow: `0 0 0 1px ${r.border.accent_primary}`
     },
     "&:not(.disabled):hover": {
-      backgroundColor: r.fill.neutralPrimaryHover
+      backgroundColor: r.fill.neutral_primary_hover
     },
     "&:disabled": {
       opacity: 0.6,
@@ -29,20 +29,20 @@ const { color: r } = i, l = {
     }
   }),
   error: o({
-    borderColor: r.border.negativePrimary
+    borderColor: r.border.negative_primary
   }),
   success: o({
-    borderColor: r.border.positivePrimary
+    borderColor: r.border.positive_primary
   }),
   disabled: o({
     pointerEvents: "none",
     opacity: 0.5
   }),
   white: o({
-    background: r.fill.bgPrimary
+    background: r.fill.bg_primary
   }),
   gray: o({
-    background: r.fill.bgSecondary
+    background: r.fill.bg_secondary
   }),
   glow: o({
     position: "absolute",
@@ -51,9 +51,9 @@ const { color: r } = i, l = {
     pointerEvents: "none",
     opacity: 0,
     transformOrigin: "center",
-    background: r.fill.accentPrimary
+    background: r.fill.accent_primary
   })
 };
 export {
-  l as styles
+  s as styles
 };

package/dist/components/controls/RadioGroup/Radio.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { Size } from '../../../types';
+import { AccentType, NeutralType, Size } from '../../../types';
 /**
  * Radio — доступная реализация визуального радио-переключателя.
  *
@@ -44,6 +44,15 @@ export type RadioProps = {
      * @default "left"
      */
     side?: "left" | "right";
+    /**
+     * Цветовая схема радиокнопки в выбранном (checked) состоянии.
+     * - `accent`  — заливка индикатора акцентным цветом (стандартное поведение).
+     * - `neutral` — индикатор остаётся незалитым: видимая нейтральная рамка
+     *   (`border/neutral-primary`) и точка нейтрального цвета (`icon/secondary`)
+     *   вместо заливки. Не влияет на состояние ошибки — `error` всегда приоритетнее.
+     * @default "accent"
+     */
+    color?: AccentType | NeutralType;
     /**
      * Делает конкретное Radio доступной только для чтения.
      * - Изменение выбранного значения запрещено.

package/dist/components/controls/RadioGroup/Radio.js

@@ -1,113 +1,118 @@
-import { jsxs as h, jsx as n } from "react/jsx-runtime";
-import { cx as E } from "@emotion/css";
-import { forwardRef as F } from "react";
-import { useRadioGroupContext as H } from "./context.js";
-import { styles as t } from "./styles.js";
-import { useControlled as J } from "../../../utils/hooks/useControlled.js";
-import { theme as K } from "../../../utils/theme/index.js";
-import { Box as c } from "../../builders/Box/Box.js";
-import { Text as g } from "../../builders/Text/Text.js";
-const { color: o, cornerRadius: x } = K, R = {
+import { jsxs as _, jsx as l } from "react/jsx-runtime";
+import { cx as K } from "@emotion/css";
+import { forwardRef as L } from "react";
+import { useRadioGroupContext as P } from "./context.js";
+import { styles as n } from "./styles.js";
+import { useControlled as Q } from "../../../utils/hooks/useControlled.js";
+import { theme as X } from "../../../utils/theme/index.js";
+import { Box as u } from "../../builders/Box/Box.js";
+import { Text as x } from "../../builders/Text/Text.js";
+const { color: r, cornerRadius: R } = X, m = {
   sm: {
     inner: 12,
+    // neutral: точка вдвое меньше, чем у accent (см. md — подтверждено в Figma)
+    neutralInner: 6,
     outer: 20
   },
   md: {
     inner: 16,
+    // neutral: 8px точка в 24px внешнем круге — Figma node 8677:5697, состояние Selected
+    neutralInner: 8,
     outer: 24
   }
-}, Q = F(
+}, Y = L(
   ({
-    value: i,
-    children: v,
-    checked: s,
-    defaultChecked: C,
-    onChange: N,
+    value: s,
+    children: N,
+    checked: d,
+    defaultChecked: v,
+    onChange: C,
     disabled: k,
-    className: S,
-    description: m,
-    size: w,
-    side: z,
-    readOnly: B,
+    className: B,
+    description: f,
+    size: I,
+    side: w,
+    readOnly: z,
     error: O,
-    outerCircleClassName: T,
-    innerCircleClassName: V,
-    labelContainerClassName: j,
-    labelClassName: G,
-    descriptionClassName: I
-  }, P) => {
-    const r = H(), u = !!r, f = s !== void 0, [A, D] = J(
-      s,
-      C
-    ), e = u ? r.value === i : f ? s : A, d = r?.disabled || k, l = w ?? r?.size ?? "md", L = z ?? r?.side ?? "left", b = B ?? r?.readOnly ?? !1, a = O ?? r?.error ?? !1, p = R[l].outer, y = R[l].inner, M = () => {
-      d || b || (u ? r.setValue?.(i) : (f || D(!e), N?.(!e)));
-    }, U = e && a ? o.fill.negativeTint : e ? o.fill.accentTint : o.fill.bgSecondary, W = e && a ? o.fill.negativePrimary : e ? o.fill.accentPrimary : void 0, q = e && a || a && !e ? o.border.negativeSecondary : o.border.neutralAlphaLow;
+    color: V = "accent",
+    outerCircleClassName: j,
+    innerCircleClassName: G,
+    labelContainerClassName: S,
+    labelClassName: T,
+    descriptionClassName: W
+  }, D) => {
+    const o = P(), b = !!o, p = d !== void 0, [M, U] = Q(
+      d,
+      v
+    ), e = b ? o.value === s : p ? d : M, c = o?.disabled || k, a = I ?? o?.size ?? "md", q = w ?? o?.side ?? "left", y = z ?? o?.readOnly ?? !1, i = O ?? o?.error ?? !1, t = V === "neutral", h = m[a].outer, g = t ? m[a].neutralInner : m[a].inner, A = () => {
+      c || y || (b ? o.setValue?.(s) : (p || U(!e), C?.(!e)));
+    }, E = i ? e ? r.fill.negative_tint : r.fill.bg_secondary : e ? t ? r.fill.neutral_primary : r.fill.accent_tint : r.fill.bg_secondary, F = e ? i ? r.fill.negative_primary : t ? r.icon.secondary : r.fill.accent_primary : void 0, H = i ? r.border.negative_secondary : e && t ? r.border.neutral_primary : r.border.neutral_alpha_low, J = e && (!t || i) ? 0 : 1;
     return (
       // biome-ignore lint/a11y/useSemanticElements: <нарочное допущение тк с button проще работать чем с input>
-      /* @__PURE__ */ h(
+      /* @__PURE__ */ _(
         "button",
         {
-          ref: P,
+          ref: D,
           role: "radio",
           type: "button",
-          "data-value": i,
+          "data-value": s,
           "aria-checked": e,
-          "aria-disabled": d || void 0,
+          "aria-disabled": c || void 0,
           tabIndex: e ? 0 : -1,
-          className: E([
-            t.radio,
-            e && t.checked,
-            d && t.disabled,
-            L === "right" && t.sideRight,
-            b && t.readOnly,
-            S
+          className: K([
+            n.radio,
+            e && n.checked,
+            c && n.disabled,
+            q === "right" && n.sideRight,
+            y && n.readOnly,
+            B
           ]),
-          onClick: M,
+          onClick: A,
           children: [
-            /* @__PURE__ */ n(
-              c,
+            /* @__PURE__ */ l(
+              u,
               {
-                w: p,
-                h: p,
-                backgroundColor: U,
-                borderWidth: e ? 0 : 1,
-                borderColor: q,
+                w: h,
+                h,
+                backgroundColor: E,
+                borderWidth: J,
+                borderColor: H,
                 borderStyle: "solid",
                 center: !0,
-                borderRadius: x.fullRound,
-                className: T,
-                children: /* @__PURE__ */ n(
-                  c,
+                borderRadius: R.fullRound,
+                className: j,
+                children: /* @__PURE__ */ l(
+                  u,
                   {
-                    w: y,
-                    h: y,
-                    backgroundColor: W,
-                    borderRadius: x.fullRound,
+                    w: g,
+                    h: g,
+                    backgroundColor: F,
+                    borderRadius: R.fullRound,
                     "aria-hidden": !0,
-                    className: V
+                    className: G
                   }
                 )
               }
             ),
-            /* @__PURE__ */ h(c, { alignItems: "flex-start", className: j, children: [
-              /* @__PURE__ */ n(
-                g,
+            /* @__PURE__ */ _(u, { alignItems: "flex-start", className: S, children: [
+              /* @__PURE__ */ l(
+                x,
                 {
-                  variant: l === "sm" ? "body-2" : "body-1",
+                  variant: a === "sm" ? "body-2" : "body-1",
                   tag: "span",
                   left: !0,
-                  className: G,
-                  children: v
+                  className: T,
+                  children: N
                 }
               ),
-              m && /* @__PURE__ */ n(
-                g,
+              f && /* @__PURE__ */ l(
+                x,
                 {
                   tag: "span",
                   variant: "body-2",
                   colorName: "secondary",
-                  className: I,
-                  children: m
+                  className: W,
+                  children: f
                 }
               )
             ] })
@@ -117,7 +122,7 @@ const { color: o, cornerRadius: x } = K, R = {
     );
   }
 );
-Q.displayName = "Radio";
+Y.displayName = "Radio";
 export {
-  Q as Radio
+  Y as Radio
 };

package/dist/components/controls/SegmentControl/SegmentControl.js

@@ -1,13 +1,13 @@
 import { jsx as t, jsxs as c } from "react/jsx-runtime";
 import { cx as l } from "@emotion/css";
-import C from "react";
+import _ from "react";
 import { styles as e } from "./styles.js";
 import { Box as i } from "../../builders/Box/Box.js";
-import { theme as R } from "../../../utils/theme/index.js";
-import { Text as j } from "../../builders/Text/Text.js";
-import { Ripple as k } from "../../builders/Ripple/Ripple.js";
-const { color: m, cornerRadius: T, spacing: d } = R;
-function P({
+import { theme as C } from "../../../utils/theme/index.js";
+import { Text as R } from "../../builders/Text/Text.js";
+import { Ripple as j } from "../../builders/Ripple/Ripple.js";
+const { color: m, cornerRadius: k, spacing: d } = C;
+function q({
   value: u,
   onChange: f,
   options: b,
@@ -26,13 +26,13 @@ function P({
     {
       row: !0,
       alignItems: "center",
-      borderRadius: T.md,
+      borderRadius: k.md,
       p: d.xs,
       gap: d.md,
       className: l(e[n], s && e["full-width"], p),
       children: b.map((r) => {
         const a = r.value === u, o = r.disabled, w = r.separatorAfter ?? !1;
-        return /* @__PURE__ */ c(C.Fragment, { children: [
+        return /* @__PURE__ */ c(_.Fragment, { children: [
           /* @__PURE__ */ c(
             "button",
             {
@@ -60,14 +60,14 @@ function P({
                   }
                 ),
                 r.label && /* @__PURE__ */ t(
-                  j,
+                  R,
                   {
                     colorName: a ? "primary" : "tertiary",
                     className: N,
                     children: r.label
                   }
                 ),
-                !o && /* @__PURE__ */ t(k, { color: m.fill.bgOverlayPrimary })
+                !o && /* @__PURE__ */ t(j, { color: m.fill.bg_overlay_primary })
               ]
             }
           ),
@@ -76,7 +76,7 @@ function P({
             {
               w: 1,
               h: 24,
-              backgroundColor: m.fill.bgTertiary,
+              backgroundColor: m.fill.bg_tertiary,
               className: v
             }
           )
@@ -86,5 +86,5 @@ function P({
   );
 }
 export {
-  P as SegmentControl
+  q as SegmentControl
 };