@epam/ai-dial-ui-kit 0.15.0-dev.5 → 0.15.0-dev.50

package/dist/components/SchemaRenderer/components/SchemaKeyValueEditor.js

@@ -1,184 +1,272 @@
-import { jsxs as y, jsx as a } from "react/jsx-runtime";
-import { useState as T } from "react";
-import { IconPlus as K } from "@tabler/icons-react";
-import { DialInput as A } from "../../Input/Input.js";
-import { DialErrorText as V } from "../../CaptionText/CaptionText.js";
-import { DialGhostButton as z } from "../../Button/ButtonWrappers.js";
-import { DialRemoveButton as H } from "../../RemoveButton/RemoveButton.js";
-import { ElementSize as q } from "../../../types/size.js";
-import { JsonSchemaType as L } from "../types.js";
-import { useSchemaContext as E } from "../context.js";
-import { resolveRef as G, isObjectType as J, buildSummary as M, validateRequired as U, extractDefaults as Y, getSchemaDefault as _ } from "../utils.js";
-import { SchemaPrimitiveField as $ } from "./SchemaPrimitiveField.js";
-import { SchemaSection as Q } from "./SchemaSection.js";
-import { SchemaFieldContent as W } from "./SchemaFieldContent.js";
-const R = (n, i) => ({
+import { jsxs as x, jsx as e } from "react/jsx-runtime";
+import { useState as R, useCallback as U, useMemo as M } from "react";
+import { IconPlus as V } from "@tabler/icons-react";
+import { DialInput as L } from "../../Input/Input.js";
+import { DialErrorText as ee } from "../../CaptionText/CaptionText.js";
+import { DialGhostButton as te } from "../../Button/ButtonWrappers.js";
+import { DialRemoveButton as oe } from "../../RemoveButton/RemoveButton.js";
+import { DialSelect as Y } from "../../Select/Select.js";
+import { DialTooltip as ne } from "../../Tooltip/Tooltip.js";
+import { ElementSize as re } from "../../../types/size.js";
+import { useSchemaContext as q } from "../context.js";
+import { resolveRef as le, isObjectType as ae, inferEntryType as ie, getEntryTypeDefault as se, ENTRY_TYPE_OPTIONS as ce, buildSummary as de, validateRequired as me, extractDefaults as pe, getSchemaDefault as ye } from "../../../utils/json-schema.js";
+import { SchemaPrimitiveField as ue } from "./SchemaPrimitiveField.js";
+import { SchemaSection as fe } from "./SchemaSection.js";
+import { SchemaFieldContent as he } from "./SchemaFieldContent.js";
+import { SchemaAdditionalPropertiesEditor as be } from "./SchemaAdditionalPropertiesEditor.js";
+import { JsonSchemaType as c } from "../../../types/json-schema.js";
+const _ = (l, d) => ({
   id: Math.random().toString(36).slice(2),
-  key: n,
-  value: i
-}), F = (n) => !!(n.oneOf || n.anyOf || n.type === L.Array || J(n)), X = ({
-  pairId: n,
-  pairKey: i,
-  pairValue: s,
-  valueSchema: c,
-  onKeyChange: k,
+  key: l,
+  value: d
+}), J = (l) => !!(l.oneOf || l.anyOf || l.type === c.Array || ae(l)), ve = {
+  [c.String]: "entryTypeString",
+  [c.Number]: "entryTypeNumber",
+  [c.Boolean]: "entryTypeBoolean",
+  [c.Null]: "entryTypeNull",
+  [c.Object]: "entryTypeObject",
+  [c.Array]: "entryTypeArray"
+}, xe = ({
+  pairId: l,
+  pairKey: d,
+  pairValue: i,
+  valueSchema: u,
+  isUnschematizedValue: f,
+  jsonEditorTheme: C,
+  onKeyChange: m,
   onValueChange: p,
-  onRemove: d,
-  keyInputPlaceholder: x,
-  removeFieldAriaLabel: C,
-  path: m,
-  level: h,
-  readonly: l = !1,
-  inputClassName: u
+  onRemove: P,
+  keyInputPlaceholder: O,
+  removeFieldAriaLabel: T,
+  path: h,
+  level: N,
+  readonly: s = !1,
+  inputClassName: b
 }) => {
   const {
-    rootSchema: f,
-    texts: g,
-    defaultExpanded: N = !0,
-    touchedPaths: S = /* @__PURE__ */ new Set(),
-    markTouched: b = () => {
+    rootSchema: v,
+    texts: y,
+    defaultExpanded: E = !0,
+    touchedPaths: j = /* @__PURE__ */ new Set(),
+    markTouched: w = () => {
     },
-    skipUntouched: P = !1
-  } = E(), [e, t] = T(i), o = F(c), r = [...m, n, "key"].join("."), w = (!P || S.has(r)) && i === "", j = /* @__PURE__ */ y("div", { className: "flex gap-2 items-start", children: [
-    /* @__PURE__ */ y("div", { className: o ? "flex-1 min-w-0" : "w-2/5 min-w-0", children: [
-      /* @__PURE__ */ a(
-        A,
+    skipUntouched: D = !1
+  } = q(), [t, o] = R(d), a = J(u), [n, g] = R(
+    () => ie(i)
+  ), B = f && (n === c.Object || n === c.Array), $ = f && n === c.Null, F = a || B, I = [...h, l, "key"].join("."), S = (!D || j.has(I)) && d === "", z = U(
+    (r) => {
+      p(se(r)), g(r);
+    },
+    [p]
+  ), G = M(
+    () => ce.map((r) => ({
+      value: r,
+      label: y[ve[r]]
+    })),
+    [y]
+  ), W = M(
+    () => [
+      { value: "true", label: y.booleanTrueOption },
+      { value: "false", label: y.booleanFalseOption }
+    ],
+    [y]
+  ), K = `${l}-key-error`, Q = f && n === c.Boolean, A = /* @__PURE__ */ x("div", { className: "flex gap-2 items-start", children: [
+    /* @__PURE__ */ x("div", { className: F ? "flex-1 min-w-0" : "w-2/5 min-w-0", children: [
+      /* @__PURE__ */ e(
+        L,
         {
-          value: e,
-          disabled: l,
-          invalid: w,
-          onChange: (I) => t(I ?? ""),
+          value: t,
+          disabled: s,
+          invalid: S,
+          "aria-describedby": S ? K : void 0,
+          onChange: (r) => o(r ?? ""),
           onBlur: () => {
-            b(r), e !== i && k(e);
+            w(I), t !== d && m(t);
           },
-          placeholder: x,
-          containerClassName: u
+          placeholder: O,
+          containerClassName: b
         }
       ),
-      /* @__PURE__ */ a(
-        V,
+      /* @__PURE__ */ e(
+        ee,
         {
-          text: w ? `${g.keyColumnHeader} is required` : void 0
+          id: K,
+          text: S ? `${y.keyColumnHeader} is required` : void 0
         }
       )
     ] }),
-    !o && /* @__PURE__ */ a("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ a(
-      $,
+    !a && !B && /* @__PURE__ */ e("div", { className: "flex-1 min-w-0", children: $ ? /* @__PURE__ */ e(
+      L,
+      {
+        value: "null",
+        disabled: !0,
+        onChange: void 0,
+        className: "opacity-60"
+      }
+    ) : Q ? /* @__PURE__ */ e(
+      Y,
       {
-        schema: c,
-        value: s,
+        options: W,
+        value: i ? "true" : "false",
+        disabled: s,
+        onChange: (r) => {
+          const k = typeof r == "string" ? r : r[0];
+          k && p(k === "true");
+        }
+      }
+    ) : /* @__PURE__ */ e(
+      ue,
+      {
+        schema: f ? { type: n } : u,
+        value: i,
         onChange: p
       }
     ) }),
-    !l && /* @__PURE__ */ a(
-      H,
+    f && /* @__PURE__ */ e("div", { className: "w-28 shrink-0", children: /* @__PURE__ */ e(
+      ne,
+      {
+        tooltip: y.entryTypeChangeWarning,
+        triggerClassName: "block",
+        children: /* @__PURE__ */ e(
+          Y,
+          {
+            options: G,
+            value: n,
+            disabled: s,
+            onChange: (r) => {
+              const k = typeof r == "string" ? r : r[0];
+              k && z(k);
+            }
+          }
+        )
+      }
+    ) }),
+    !s && /* @__PURE__ */ e(
+      oe,
       {
-        size: q.Small,
-        onClick: d,
-        "aria-label": C,
+        size: re.Small,
+        onClick: P,
+        "aria-label": T,
         className: "shrink-0 p-1"
       }
     )
   ] });
-  if (!o) return j;
-  const D = [...m, i], O = M(s, c, f), B = U(
-    s,
-    c,
-    f,
-    D.join(".")
+  if (!F) return A;
+  if (B)
+    return /* @__PURE__ */ x("div", { className: "flex flex-col gap-2", children: [
+      A,
+      /* @__PURE__ */ e(
+        be,
+        {
+          value: i,
+          onChange: p,
+          theme: C
+        },
+        n
+      )
+    ] });
+  const H = [...h, d], X = de(i, u, v), Z = me(
+    i,
+    u,
+    v,
+    H.join(".")
   );
-  return /* @__PURE__ */ y("div", { className: "flex flex-col gap-2", children: [
-    j,
-    /* @__PURE__ */ a(
-      Q,
+  return /* @__PURE__ */ x("div", { className: "flex flex-col gap-2", children: [
+    A,
+    /* @__PURE__ */ e(
+      fe,
       {
-        title: i,
-        level: h,
-        summary: O,
-        errorCount: B.length + (w ? 1 : 0),
-        defaultExpanded: N,
-        children: /* @__PURE__ */ a(
-          W,
+        title: d,
+        level: N,
+        summary: X,
+        errorCount: Z.length + (S ? 1 : 0),
+        defaultExpanded: E,
+        children: /* @__PURE__ */ e(
+          he,
           {
-            schema: c,
-            value: s,
+            schema: u,
+            value: i,
             onChange: p,
-            path: D,
-            level: h + 1
+            path: H,
+            level: N + 1
           }
         )
       }
     )
   ] });
-}, fe = ({
-  schema: n,
-  value: i,
-  onChange: s,
-  path: c,
-  level: k
+}, He = ({
+  schema: l,
+  value: d,
+  onChange: i,
+  path: u,
+  level: f
 }) => {
   const {
-    rootSchema: p,
-    texts: d,
-    readonly: x = !1,
-    inputClassName: C
-  } = E(), m = n.additionalProperties === !0 || n.additionalProperties == null ? { type: "string" } : typeof n.additionalProperties == "object" ? G(n.additionalProperties, p) : { type: "string" }, h = F(m), [l, u] = T(
-    () => Object.entries(i ?? {}).map(
-      ([e, t]) => R(e, t)
+    rootSchema: C,
+    texts: m,
+    readonly: p = !1,
+    inputClassName: P,
+    jsonEditorTheme: O
+  } = q(), T = l.additionalProperties === !0 || l.additionalProperties == null, h = T ? { type: "string" } : typeof l.additionalProperties == "object" ? le(l.additionalProperties, C) : { type: "string" }, N = J(h), [s, b] = R(
+    () => Object.entries(d ?? {}).map(
+      ([t, o]) => _(t, o)
     )
-  ), f = (e) => Object.fromEntries(
-    e.filter((t) => t.key !== "").map((t) => [t.key, t.value])
-  ), g = (e, t) => {
-    const o = l.map(
-      (r, v) => v === e ? { ...r, key: t } : r
+  ), v = (t) => Object.fromEntries(
+    t.filter((o) => o.key !== "").map((o) => [o.key, o.value])
+  ), y = (t, o) => {
+    const a = s.map(
+      (n, g) => g === t ? { ...n, key: o } : n
     );
-    u(o), s(f(o));
-  }, N = (e, t) => {
-    const o = l.map(
-      (r, v) => v === e ? { ...r, value: t } : r
+    b(a), i(v(a));
+  }, E = (t, o) => {
+    const a = s.map(
+      (n, g) => g === t ? { ...n, value: o } : n
     );
-    u(o), s(f(o));
-  }, S = () => h ? Y(m, p) ?? _(m) : "", b = () => {
-    u((e) => [...e, R("", S())]);
-  }, P = (e) => {
-    const t = l.filter((o, r) => r !== e);
-    u(t), s(f(t));
+    b(a), i(v(a));
+  }, j = () => N ? pe(h, C) ?? ye(h) : "", w = () => {
+    b((t) => [...t, _("", j())]);
+  }, D = (t) => {
+    const o = s.filter((a, n) => n !== t);
+    b(o), i(v(o));
   };
-  return /* @__PURE__ */ y("div", { className: "flex flex-col gap-2", children: [
-    l.length === 0 && /* @__PURE__ */ a("p", { className: "dial-tiny-text text-secondary italic", children: d.noFieldsYet }),
-    l.length > 0 && !h && /* @__PURE__ */ y("div", { className: "flex gap-2 mb-1 pr-7", children: [
-      /* @__PURE__ */ a("span", { className: "w-2/5 dial-tiny-text text-secondary font-medium", children: d.keyColumnHeader }),
-      /* @__PURE__ */ a("span", { className: "flex-1 dial-tiny-text text-secondary font-medium", children: d.valueColumnHeader })
+  return /* @__PURE__ */ x("div", { className: "flex flex-col gap-2", children: [
+    s.length === 0 && /* @__PURE__ */ e("p", { className: "dial-tiny-text text-secondary italic", children: m.noFieldsYet }),
+    s.length > 0 && !N && /* @__PURE__ */ x("div", { className: "flex gap-2 mb-1 pr-7", children: [
+      /* @__PURE__ */ e("span", { className: "w-2/5 dial-tiny-text text-secondary font-medium", children: m.keyColumnHeader }),
+      /* @__PURE__ */ e("span", { className: "flex-1 dial-tiny-text text-secondary font-medium", children: m.valueColumnHeader }),
+      T && /* @__PURE__ */ e("span", { className: "w-28 shrink-0 dial-tiny-text text-secondary font-medium", children: m.typeColumnHeader })
     ] }),
-    l.map((e, t) => /* @__PURE__ */ a(
-      X,
+    s.map((t, o) => /* @__PURE__ */ e(
+      xe,
       {
-        pairId: e.id,
-        pairKey: e.key,
-        pairValue: e.value,
-        valueSchema: m,
-        onKeyChange: (o) => g(t, o),
-        onValueChange: (o) => N(t, o),
-        onRemove: () => P(t),
-        keyInputPlaceholder: d.keyInputPlaceholder,
-        removeFieldAriaLabel: d.removeFieldAriaLabel,
-        path: c,
-        level: k,
-        readonly: x,
-        inputClassName: C
+        pairId: t.id,
+        pairKey: t.key,
+        pairValue: t.value,
+        valueSchema: h,
+        isUnschematizedValue: T,
+        jsonEditorTheme: O,
+        onKeyChange: (a) => y(o, a),
+        onValueChange: (a) => E(o, a),
+        onRemove: () => D(o),
+        keyInputPlaceholder: m.keyInputPlaceholder,
+        removeFieldAriaLabel: m.removeFieldAriaLabel,
+        path: u,
+        level: f,
+        readonly: p,
+        inputClassName: P
       },
-      e.id
+      t.id
     )),
-    !x && /* @__PURE__ */ a("div", { className: "pt-1", children: /* @__PURE__ */ a(
-      z,
+    !p && /* @__PURE__ */ e("div", { className: "pt-1", children: /* @__PURE__ */ e(
+      te,
       {
-        label: d.addField,
-        iconBefore: /* @__PURE__ */ a(K, { size: 16, stroke: 2 }),
-        onClick: b
+        label: m.addField,
+        iconBefore: /* @__PURE__ */ e(V, { size: 16, stroke: 2 }),
+        onClick: w
       }
     ) })
   ] });
 };
 export {
-  fe as SchemaKeyValueEditor
+  He as SchemaKeyValueEditor
 };

package/dist/components/SchemaRenderer/components/SchemaObjectEditor.js

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
 import { useSchemaContext as v } from "../context.js";
-import { resolveRef as i, sortByPropertyOrder as g, toFieldLabel as j } from "../utils.js";
+import { resolveRef as i, sortByPropertyOrder as g, toFieldLabel as j } from "../../../utils/json-schema.js";
 import { SchemaField as q } from "./SchemaField.js";
 const N = ({
   schema: c,

package/dist/components/SchemaRenderer/components/SchemaOneOfEditor.js

@@ -2,11 +2,11 @@ import { jsxs as v, jsx as o } from "react/jsx-runtime";
 import { useId as q } from "react";
 import { DialSelect as y } from "../../Select/Select.js";
 import { DialRadioButton as j } from "../../RadioButton/RadioButton.js";
-import { SchemaDisplayMode as P, SchemaOrientation as B } from "../types.js";
-import { useSchemaContext as G } from "../context.js";
-import { resolveRef as a, getOptionLabel as L, extractDefaults as _ } from "../utils.js";
+import { useSchemaContext as B } from "../context.js";
+import { resolveRef as a, getOptionLabel as G, extractDefaults as P } from "../../../utils/json-schema.js";
 import { SchemaObjectEditor as w } from "./SchemaObjectEditor.js";
-import { SchemaFieldContent as C } from "./SchemaFieldContent.js";
+import { SchemaFieldContent as _ } from "./SchemaFieldContent.js";
+import { SchemaDisplayMode as C, SchemaOrientation as L } from "../../../types/json-schema.js";
 const Z = ({
   schema: x,
   value: c,
@@ -14,17 +14,17 @@ const Z = ({
   path: u,
   level: S
 }) => {
-  const { rootSchema: i, texts: A, readonly: b = !1 } = G(), p = q(), O = x.discriminator;
+  const { rootSchema: i, texts: A, readonly: b = !1 } = B(), p = q(), O = x.discriminator;
   if (O) {
     const r = O.propertyName, e = O.mapping, n = Object.keys(e).map((s) => ({
       value: s,
       label: s
     })), l = typeof c == "object" && c !== null ? c[r] : void 0, g = l ? a({ $ref: e[l] }, i) : void 0, I = (s) => {
-      const m = a({ $ref: e[s] }, i), t = _(m, i) ?? {};
+      const m = a({ $ref: e[s] }, i), t = P(m, i) ?? {};
       d({ ...t, [r]: s });
     };
-    if (x.discriminatorDisplay === P.Radio) {
-      const s = x.discriminatorOrientation === B.Row, m = l ? (() => {
+    if (x.discriminatorDisplay === C.Radio) {
+      const s = x.discriminatorOrientation === L.Row, m = l ? (() => {
         const t = a(
           { $ref: e[l] },
           i
@@ -127,12 +127,12 @@ const Z = ({
     }
     return 0;
   })(), D = (r) => {
-    const e = a(f[r], i), n = _(e, i);
+    const e = a(f[r], i), n = P(e, i);
     d(n ?? null);
   }, R = f[$];
-  if (x.discriminatorDisplay === P.Radio)
+  if (x.discriminatorDisplay === C.Radio)
     return /* @__PURE__ */ o("div", { role: "radiogroup", className: "flex flex-col gap-2", children: f.map((r, e) => {
-      const n = a(r, i), l = L(r, i) ?? `Option ${e + 1}`, g = $ === e;
+      const n = a(r, i), l = G(r, i) ?? `Option ${e + 1}`, g = $ === e;
       return /* @__PURE__ */ v("div", { className: "flex flex-col", children: [
         /* @__PURE__ */ o(
           j,
@@ -147,7 +147,7 @@ const Z = ({
           }
         ),
         g && n && /* @__PURE__ */ o("div", { className: "ml-6 mt-2", children: /* @__PURE__ */ o(
-          C,
+          _,
           {
             schema: n,
             value: c,
@@ -176,7 +176,7 @@ const Z = ({
       }
     ) }),
     R && /* @__PURE__ */ o("div", { className: "pl-3 border-l-2 border-secondary", children: /* @__PURE__ */ o(
-      C,
+      _,
       {
         schema: R,
         value: c,

package/dist/components/SchemaRenderer/components/SchemaPrimitiveField.js

@@ -6,8 +6,8 @@ import { DialNumberInput as b } from "../../NumberInput/NumberInput.js";
 import { DialSwitch as C } from "../../Switch/Switch.js";
 import { DialSelect as y } from "../../Select/Select.js";
 import { DialRadioButton as P } from "../../RadioButton/RadioButton.js";
-import { JsonSchemaType as c, SchemaDisplayMode as w, SchemaOrientation as D } from "../types.js";
-import { useSchemaContext as x } from "../context.js";
+import { useSchemaContext as w } from "../context.js";
+import { JsonSchemaType as c, SchemaDisplayMode as D, SchemaOrientation as x } from "../../../types/json-schema.js";
 const E = ({
   schema: t,
   value: e,
@@ -19,7 +19,7 @@ const E = ({
     readonly: l = !1,
     inputClassName: p,
     acceptableResourceTypes: h
-  } = x(), N = t.const !== void 0, g = Array.isArray(t.enum) && t.enum.length > 0;
+  } = w(), N = t.const !== void 0, g = Array.isArray(t.enum) && t.enum.length > 0;
   if (t["dial:resource"] === !0 && Array.isArray(t.acceptableResourceTypes) && t.acceptableResourceTypes.length > 0 && (t.type === c.String || t.type === void 0)) {
     const r = (t.acceptableResourceTypes ?? []).flatMap(
       (o) => {
@@ -53,8 +53,8 @@ const E = ({
         className: "opacity-60"
       }
     );
-  if (g && t.enumDisplay === w.Radio) {
-    const r = t.enumOrientation === D.Row;
+  if (g && t.enumDisplay === D.Radio) {
+    const r = t.enumOrientation === x.Row;
     return /* @__PURE__ */ i(
       "div",
       {

package/dist/components/Skeleton/Skeleton.js

@@ -1,14 +1,15 @@
-import { jsx as t, Fragment as $, jsxs as k } from "react/jsx-runtime";
+import { jsx as t, Fragment as L, jsxs as k } from "react/jsx-runtime";
 import "react";
 import { mergeClasses as n } from "../../utils/merge-classes.js";
-import { SkeletonVariant as i, SkeletonAvatarShape as N } from "../../types/skeleton.js";
-import { getAvatarSize as F } from "./utils.js";
-const G = ({
-  active: j = !0,
+import { SkeletonVariant as i, SkeletonAvatarShape as S } from "../../types/skeleton.js";
+import { getAvatarSize as P } from "./utils.js";
+import { DIAL_KIT_CLASS as R } from "../../constants/public-class-names.js";
+const B = ({
+  active: A = !0,
   paragraph: u = !0,
   avatar: m = !1,
   showTitle: p = !0,
-  loading: S = !0,
+  loading: N = !0,
   children: g,
   variant: o = i.Default,
   width: l,
@@ -16,13 +17,13 @@ const G = ({
   overlay: s,
   color: e,
   className: h,
-  ...b
+  ...C
 }) => {
-  if (!S && g)
-    return /* @__PURE__ */ t($, { children: g });
+  if (!N && g)
+    return /* @__PURE__ */ t(L, { children: g });
   const d = n(
     "bg-layer-raised",
-    j && "animate-pulse",
+    A && "animate-pulse",
     h
   );
   if (o !== i.Default) {
@@ -33,21 +34,26 @@ const G = ({
       o === i.Text && "rounded",
       !!s && "relative"
     ), r = {};
-    return l && (r.width = typeof l == "number" ? `${l}px` : l), c && (r.height = typeof c == "number" ? `${c}px` : c), e && (r.backgroundColor = e), /* @__PURE__ */ t("div", { className: a, style: r, ...b, children: s && /* @__PURE__ */ t("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: s }) });
+    return l && (r.width = typeof l == "number" ? `${l}px` : l), c && (r.height = typeof c == "number" ? `${c}px` : c), e && (r.backgroundColor = e), /* @__PURE__ */ t("div", { className: a, style: r, ...C, children: s && /* @__PURE__ */ t("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: s }) });
   }
-  const A = !!m, w = !!p, z = !!u, x = typeof m == "object" ? m : {}, W = typeof p == "object" ? p : {}, C = typeof u == "object" ? u : {}, y = F(x.size), D = x.shape ?? N.Circle, P = W.width ?? "38%", v = C.rows ?? 3, f = C.width, R = (a) => f ? Array.isArray(f) ? f[a] ?? "100%" : f : a === v - 1 ? "61%" : "100%";
+  const j = !!m, w = !!p, z = !!u, b = typeof m == "object" ? m : {}, D = typeof p == "object" ? p : {}, x = typeof u == "object" ? u : {}, y = P(b.size), W = b.shape ?? S.Circle, _ = D.width ?? "38%", v = x.rows ?? 3, f = x.width, I = (a) => f ? Array.isArray(f) ? f[a] ?? "100%" : f : a === v - 1 ? "61%" : "100%";
   return /* @__PURE__ */ k(
     "div",
     {
-      ...b,
-      className: n("flex gap-4", !!s && "relative", h),
+      ...C,
+      className: n(
+        "flex gap-4",
+        !!s && "relative",
+        h,
+        R.skeleton
+      ),
       children: [
-        A && /* @__PURE__ */ t(
+        j && /* @__PURE__ */ t(
           "div",
           {
             className: n(
               d,
-              D === N.Circle ? "rounded-full" : "rounded",
+              W === S.Circle ? "rounded-full" : "rounded",
               "flex-shrink-0"
             ),
             style: {
@@ -63,7 +69,7 @@ const G = ({
             {
               className: n(d, "h-4 rounded"),
               style: {
-                width: P,
+                width: _,
                 ...e && { backgroundColor: e }
               }
             }
@@ -73,7 +79,7 @@ const G = ({
             {
               className: n(d, "h-4 rounded"),
               style: {
-                width: R(r),
+                width: I(r),
                 ...e && { backgroundColor: e }
               }
             },
@@ -86,5 +92,5 @@ const G = ({
   );
 };
 export {
-  G as Skeleton
+  B as Skeleton
 };

package/dist/components/Spinner/Spinner.js

@@ -1,6 +1,7 @@
 import { jsx as r } from "react/jsx-runtime";
-import { mergeClasses as a } from "../../utils/merge-classes.js";
-const o = ({
+import { mergeClasses as n } from "../../utils/merge-classes.js";
+import { DIAL_KIT_CLASS as o } from "../../constants/public-class-names.js";
+const d = ({
   size: e = 40,
   className: s,
   fullWidth: t = !1,
@@ -9,10 +10,11 @@ const o = ({
   "div",
   {
     role: "status",
-    className: a(
+    className: n(
       "flex items-center justify-center",
       { "size-full": t },
-      s
+      s,
+      o.spinner
     ),
     children: /* @__PURE__ */ r(
       "div",
@@ -26,5 +28,5 @@ const o = ({
   }
 );
 export {
-  o as Spinner
+  d as Spinner
 };