@dss-kit/ui-kit 0.3.2 → 0.3.4

package/dist/components/builders/Table/Table.d.ts

@@ -1,7 +1,7 @@
 import { createColumnHelper } from '@tanstack/react-table';
 import { TableProps } from './Table.types';
 declare const Table: {
-    <TData>({ ref, data, columns, showBorders, enableSorting, enablePagination, enableRowSelection, enableMultiRowSelection, enableColumnPinning, columnPinning: controlledColumnPinning, onColumnPinningChange, sorting: controlledSorting, onSortingChange, manualSorting, columnFilters: controlledColumnFilters, onColumnFiltersChange, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, pagination: controlledPagination, onPaginationChange, rowSelection: controlledRowSelection, onRowSelectionChange, totalCount, loading, emptyLabels, loadingLabels, className, containerClassName, theadClassName, tbodyClassName, emptyStateClassName, emptyStateTitleClassName, emptyStateDescriptionClassName, paginationClassName, tableOptions, onRowClick, getRowId, headCellComponent: HeadCellComponent, bodyCellComponent: BodyCellComponent, headRowComponent: HeadRowComponent, bodyRowComponent: BodyRowComponent, onReset, paginationVariant, paginationLabels, renderPageSizeSelectorDropdownItem, renderPageSizeSelectorInputItem, }: TableProps<TData>): import("react/jsx-runtime").JSX.Element;
+    <TData>({ ref, data, columns, showBorders, enableSorting, enablePagination, enableRowSelection, enableMultiRowSelection, enableColumnPinning, columnPinning: controlledColumnPinning, onColumnPinningChange, sorting: controlledSorting, onSortingChange, manualSorting, columnFilters: controlledColumnFilters, onColumnFiltersChange, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, pagination: controlledPagination, onPaginationChange, rowSelection: controlledRowSelection, onRowSelectionChange, totalCount, loading, loadingRowCount, emptyLabels, className, containerClassName, theadClassName, tbodyClassName, emptyStateClassName, emptyStateTitleClassName, emptyStateDescriptionClassName, paginationClassName, tableOptions, onRowClick, getRowId, headCellComponent: HeadCellComponent, bodyCellComponent: BodyCellComponent, headRowComponent: HeadRowComponent, bodyRowComponent: BodyRowComponent, onReset, paginationVariant, paginationLabels, renderPageSizeSelectorDropdownItem, renderPageSizeSelectorInputItem, }: TableProps<TData>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
     HeadCellContent: import('react').ForwardRefExoticComponent<Omit<import('../Box').BoxProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
     BodyCellContent: import('react').ForwardRefExoticComponent<Omit<import('../Box').BoxProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/builders/Table/Table.js

@@ -1,231 +1,248 @@
-import { jsx as o, jsxs as H } from "react/jsx-runtime";
-import { cx as m, css as B } from "@emotion/css";
-import { useReactTable as Pe, getPaginationRowModel as Te, getSortedRowModel as He, getCoreRowModel as Me, flexRender as M, createColumnHelper as ve } from "@tanstack/react-table";
-import { useImperativeHandle as Ne } from "react";
-import Be from "../../../assets/svg/table/loading.svg.js";
+import { jsx as o, jsxs as P } from "react/jsx-runtime";
+import { cx as p, css as b } from "@emotion/css";
+import { useReactTable as He, getPaginationRowModel as ve, getSortedRowModel as Ne, getCoreRowModel as Me, flexRender as H, createColumnHelper as ke } from "@tanstack/react-table";
+import { useImperativeHandle as Ie } from "react";
 import ze from "../../../assets/svg/table/search.svg.js";
-import { styles as Ie } from "./styles.js";
-import { useControllableState as t } from "./Table.hooks.js";
-import { getColumnPinningStyles as v } from "./Table.utils.js";
-import { TablePlaceholder as N } from "./TablePlaceholder/TablePlaceholder.js";
-import { TableWrapper as Ve } from "./TableWrapper/TableWrapper.js";
-import { TableHeadRow as ke } from "./TableHeadRow/TableHeadRow.js";
-import { TablePagination as Fe } from "./TablePagination/TablePagination.js";
+import { styles as Ve } from "./styles.js";
+import { useControllableState as m } from "./Table.hooks.js";
+import { getColumnPinningStyles as f } from "./Table.utils.js";
+import { TablePlaceholder as Le } from "./TablePlaceholder/TablePlaceholder.js";
+import { TableWrapper as Ee } from "./TableWrapper/TableWrapper.js";
+import { TableHeadRow as Fe } from "./TableHeadRow/TableHeadRow.js";
+import { TablePagination as We } from "./TablePagination/TablePagination.js";
 import { TableHeadCell as je } from "./TableHeadCell/TableHeadCell.js";
-import { TableBodyCell as We } from "./TableBodyCell/TableBodyCell.js";
-import { TableBodyRow as Le } from "./TableBodyRow/TableBodyRow.js";
-import { TableHeadCellContent as De } from "./TableHeadCellContent/TableHeadCellContent.js";
-import { TableBodyCellContent as qe } from "./TableBodyCellContent/TableBodyCellContent.js";
-import { TableHeadCellContentSortable as Ae } from "./TableHeadCellContentSortable/TableHeadCellContentSortable.js";
-import { theme as Ee } from "../../../utils/theme/index.js";
-import { Box as Ge } from "../Box/Box.js";
-const { spacing: f, color: l } = Ee, Je = B({
+import { TableBodyCell as Be } from "./TableBodyCell/TableBodyCell.js";
+import { TableBodyRow as De } from "./TableBodyRow/TableBodyRow.js";
+import { TableBodyCellContent as M } from "./TableBodyCellContent/TableBodyCellContent.js";
+import { Skeleton as _e } from "../../shared/Skeleton/Skeleton.js";
+import { TableHeadCellContent as Ae } from "./TableHeadCellContent/TableHeadCellContent.js";
+import { TableHeadCellContentSortable as Ke } from "./TableHeadCellContentSortable/TableHeadCellContentSortable.js";
+import { theme as Oe } from "../../../utils/theme/index.js";
+import { Box as $e } from "../Box/Box.js";
+const { spacing: v, color: n } = Oe, qe = b({
   width: "100%",
   maxWidth: "100%",
   minWidth: "max-content",
   borderCollapse: "collapse",
   borderSpacing: 0,
-  backgroundColor: l.fill.bgPrimary
-}), Ke = B({
-  backgroundColor: l.fill.bgSecondary,
-  color: l.text.tertiary
-}), s = ({
-  ref: z,
-  data: c,
+  backgroundColor: n.fill.bgPrimary
+}), Ge = b({
+  backgroundColor: n.fill.bgSecondary,
+  color: n.text.tertiary
+}), Je = b({
+  pointerEvents: "none",
+  userSelect: "none"
+}), N = ["70%", "55%", "80%", "60%"], c = ({
+  ref: k,
+  data: h,
   columns: I,
-  showBorders: d = !0,
-  enableSorting: V = !1,
-  enablePagination: b = !1,
-  enableRowSelection: k = !1,
-  enableMultiRowSelection: F = !1,
-  enableColumnPinning: p = !1,
-  columnPinning: j,
-  onColumnPinningChange: W,
-  sorting: L,
-  onSortingChange: D,
-  manualSorting: q,
-  columnFilters: A,
-  onColumnFiltersChange: E,
-  columnVisibility: G,
-  onColumnVisibilityChange: J,
-  pagination: K,
-  onPaginationChange: O,
-  rowSelection: Q,
-  onRowSelectionChange: U,
-  totalCount: i,
-  loading: u = !1,
-  emptyLabels: X = {
+  showBorders: g = !0,
+  enableSorting: z = !1,
+  enablePagination: S = !1,
+  enableRowSelection: V = !1,
+  enableMultiRowSelection: L = !1,
+  enableColumnPinning: d = !1,
+  columnPinning: E,
+  onColumnPinningChange: F,
+  sorting: W,
+  onSortingChange: j,
+  manualSorting: B,
+  columnFilters: D,
+  onColumnFiltersChange: _,
+  columnVisibility: A,
+  onColumnVisibilityChange: K,
+  pagination: O,
+  onPaginationChange: $,
+  rowSelection: q,
+  onRowSelectionChange: G,
+  totalCount: s,
+  loading: i = !1,
+  loadingRowCount: J = 10,
+  emptyLabels: Q = {
     title: "Nothing found",
     description: "Try adjusting your search or filters",
     action: "Reset"
   },
-  loadingLabels: Y = {
-    title: "Loading...",
-    description: "Please wait or reset your promt",
-    action: "Reset"
-  },
-  className: Z,
-  containerClassName: C,
-  theadClassName: _,
-  tbodyClassName: $,
-  emptyStateClassName: S,
-  emptyStateTitleClassName: y,
-  emptyStateDescriptionClassName: w,
-  paginationClassName: ee,
-  tableOptions: oe = {},
-  onRowClick: R,
-  getRowId: le,
-  headCellComponent: ne = je,
-  bodyCellComponent: te = We,
-  headRowComponent: ie = ke,
-  bodyRowComponent: ae = Le,
-  onReset: x,
-  paginationVariant: re,
-  paginationLabels: me,
-  renderPageSizeSelectorDropdownItem: se,
+  className: U,
+  containerClassName: u,
+  theadClassName: X,
+  tbodyClassName: Y,
+  emptyStateClassName: Z,
+  emptyStateTitleClassName: ee,
+  emptyStateDescriptionClassName: oe,
+  paginationClassName: te,
+  tableOptions: le = {},
+  onRowClick: y,
+  getRowId: ne,
+  headCellComponent: ie = je,
+  bodyCellComponent: w = Be,
+  headRowComponent: ae = Fe,
+  bodyRowComponent: x = De,
+  onReset: re,
+  paginationVariant: me,
+  paginationLabels: se,
+  renderPageSizeSelectorDropdownItem: ce,
   renderPageSizeSelectorInputItem: ge
 }) => {
-  const [ce, de] = t(
-    L,
+  const [de, pe] = m(
+    W,
+    j,
+    []
+  ), [he, Ce] = m(
     D,
+    _,
     []
-  ), [pe, Ce] = t(
+  ), [fe, be] = m(
     A,
-    E,
-    []
-  ), [he, fe] = t(
-    G,
-    J,
-    {}
-  ), [n, h] = t(
     K,
+    {}
+  ), [a, C] = m(
     O,
+    $,
     { pageIndex: 0, pageSize: 10 }
-  ), [be, ue] = t(Q, U, {}), [Se, ye] = t(
-    j,
-    W,
+  ), [Se, ue] = m(q, G, {}), [ye, we] = m(
+    E,
+    F,
     { left: [], right: [] }
-  ), P = q ?? !!i, a = Pe({
-    data: c,
+  ), R = B ?? !!s, l = He({
+    data: h,
     columns: I,
     state: {
-      sorting: ce,
-      columnFilters: pe,
-      columnVisibility: he,
-      pagination: n,
-      rowSelection: be,
-      columnPinning: Se
+      sorting: de,
+      columnFilters: he,
+      columnVisibility: fe,
+      pagination: a,
+      rowSelection: Se,
+      columnPinning: ye
     },
-    onSortingChange: de,
+    onSortingChange: pe,
     onColumnFiltersChange: Ce,
-    onColumnVisibilityChange: fe,
-    onPaginationChange: h,
+    onColumnVisibilityChange: be,
+    onPaginationChange: C,
     onRowSelectionChange: ue,
-    onColumnPinningChange: ye,
+    onColumnPinningChange: we,
     getCoreRowModel: Me(),
-    getSortedRowModel: V && !P ? He() : void 0,
-    getPaginationRowModel: b ? Te() : void 0,
-    enableRowSelection: k,
-    enableMultiRowSelection: F,
-    enableColumnPinning: p,
-    getRowId: le,
-    manualSorting: P,
-    manualPagination: !!i,
-    pageCount: i ? Math.ceil(i / n.pageSize) : void 0,
-    ...oe
+    getSortedRowModel: z && !R ? Ne() : void 0,
+    getPaginationRowModel: S ? ve() : void 0,
+    enableRowSelection: V,
+    enableMultiRowSelection: L,
+    enableColumnPinning: d,
+    getRowId: ne,
+    manualSorting: R,
+    manualPagination: !!s,
+    pageCount: s ? Math.ceil(s / a.pageSize) : void 0,
+    ...le
   });
-  Ne(z, () => a);
-  const { rows: T } = a.getRowModel(), we = (e, r) => {
-    R && R(e.original, r);
+  Ie(k, () => l);
+  const { rows: T } = l.getRowModel(), xe = (e, t) => {
+    y && y(e.original, t);
   }, Re = (e) => /* @__PURE__ */ o(
-    ne,
+    ie,
     {
       style: {
         width: e.getSize(),
-        ...p && v(a, e.column, l.fill.bgSecondary)
+        ...d && f(l, e.column, n.fill.bgSecondary)
       },
-      onClick: e.column.getToggleSortingHandler(),
-      children: e.isPlaceholder ? null : M(e.column.columnDef.header, e.getContext())
+      onClick: i ? void 0 : e.column.getToggleSortingHandler(),
+      children: e.isPlaceholder ? null : H(e.column.columnDef.header, e.getContext())
     },
     e.id
-  ), xe = (e, r) => /* @__PURE__ */ o(
-    ae,
+  ), Te = (e, t) => /* @__PURE__ */ o(
+    x,
     {
-      showBorders: d,
+      showBorders: g,
       isSelected: e.getIsSelected(),
-      onClick: () => we(e, r),
-      children: e.getVisibleCells().map((g) => /* @__PURE__ */ o(
-        te,
+      onClick: () => xe(e, t),
+      children: e.getVisibleCells().map((r) => /* @__PURE__ */ o(
+        w,
         {
-          style: p ? v(a, g.column, l.fill.bgPrimary) : void 0,
-          children: M(g.column.columnDef.cell, g.getContext())
+          style: d ? f(l, r.column, n.fill.bgPrimary) : void 0,
+          children: H(r.column.columnDef.cell, r.getContext())
         },
-        g.id
+        r.id
       ))
     },
     e.id
+  ), Pe = (e) => /* @__PURE__ */ o(
+    x,
+    {
+      showBorders: g,
+      children: l.getVisibleLeafColumns().map((t, r) => /* @__PURE__ */ o(
+        w,
+        {
+          style: d ? f(l, t, n.fill.bgPrimary) : void 0,
+          children: /* @__PURE__ */ o(M, { children: /* @__PURE__ */ o(
+            _e,
+            {
+              variant: "text",
+              height: 16,
+              width: N[r % N.length]
+            }
+          ) })
+        },
+        t.id
+      ))
+    },
+    `skeleton-row-${e}`
   );
-  return u ? /* @__PURE__ */ o(
-    N,
+  return !i && !T.length ? /* @__PURE__ */ o(
+    Le,
     {
       icon: /* @__PURE__ */ o(
-        Be,
+        ze,
         {
-          width: 32,
-          height: 32,
-          style: { color: l.icon.tertiary, marginBottom: f.sm }
+          width: 24,
+          height: 24,
+          style: { color: n.icon.tertiary, marginBottom: v.sm }
         }
       ),
-      labels: Y,
-      onReset: x,
-      className: m(C, S),
-      titleClassName: y,
-      descriptionClassName: w
+      labels: Q,
+      onReset: re,
+      className: p(u, Z),
+      titleClassName: ee,
+      descriptionClassName: oe
     }
-  ) : T.length ? /* @__PURE__ */ H(Ge, { w: "full", gap: f.xl, className: m(C), children: [
-    /* @__PURE__ */ o(Ve, { data: c, showBorders: d, children: /* @__PURE__ */ H("table", { className: m(Je, Ie.table, Z), children: [
-      /* @__PURE__ */ o("thead", { className: m(Ke, _), children: a.getHeaderGroups().map((e) => /* @__PURE__ */ o(ie, { showBorders: d, children: e.headers.map(Re) }, e.id)) }),
-      /* @__PURE__ */ o("tbody", { className: $, children: T.map((e, r) => xe(e, r)) })
+  ) : /* @__PURE__ */ P($e, { w: "full", gap: v.xl, className: p(u), children: [
+    /* @__PURE__ */ o(Ee, { data: h, showBorders: g, children: /* @__PURE__ */ P("table", { className: p(qe, Ve.table, U), children: [
+      /* @__PURE__ */ o(
+        "thead",
+        {
+          className: p(
+            Ge,
+            { [Je]: i },
+            X
+          ),
+          "aria-busy": i,
+          children: l.getHeaderGroups().map((e) => /* @__PURE__ */ o(ae, { showBorders: g, children: e.headers.map(Re) }, e.id))
+        }
+      ),
+      /* @__PURE__ */ o("tbody", { className: Y, children: i ? Array.from(
+        { length: J },
+        (e, t) => Pe(t)
+      ) : T.map((e, t) => Te(e, t)) })
     ] }) }),
-    b && !u && /* @__PURE__ */ o(
-      Fe,
+    S && !i && /* @__PURE__ */ o(
+      We,
       {
-        pageIndex: n.pageIndex,
-        pageSize: n.pageSize,
-        totalCount: i || c.length,
-        variant: re,
-        labels: me,
-        renderPageSizeSelectorDropdownItem: se,
+        pageIndex: a.pageIndex,
+        pageSize: a.pageSize,
+        totalCount: s || h.length,
+        variant: me,
+        labels: se,
+        renderPageSizeSelectorDropdownItem: ce,
         renderPageSizeSelectorInputItem: ge,
-        onPageChange: (e) => h({ ...n, pageIndex: e }),
-        onPageSizeChange: (e) => h({ ...n, pageSize: e, pageIndex: 0 }),
-        className: ee
+        onPageChange: (e) => C({ ...a, pageIndex: e }),
+        onPageSizeChange: (e) => C({ ...a, pageSize: e, pageIndex: 0 }),
+        className: te
       }
     )
-  ] }) : /* @__PURE__ */ o(
-    N,
-    {
-      icon: /* @__PURE__ */ o(
-        ze,
-        {
-          width: 24,
-          height: 24,
-          style: { color: l.icon.tertiary, marginBottom: f.sm }
-        }
-      ),
-      labels: X,
-      onReset: x,
-      className: m(C, S),
-      titleClassName: y,
-      descriptionClassName: w
-    }
-  );
+  ] });
 };
-s.displayName = "Table";
-s.HeadCellContent = De;
-s.BodyCellContent = qe;
-s.HeadCellContentSortable = Ae;
-s.createColumnHelper = ve;
+c.displayName = "Table";
+c.HeadCellContent = Ae;
+c.BodyCellContent = M;
+c.HeadCellContentSortable = Ke;
+c.createColumnHelper = ke;
 export {
-  s as Table
+  c as Table
 };

package/dist/components/builders/Table/Table.types.d.ts

@@ -82,6 +82,11 @@ export interface TableProps<TData> {
     /** Загружается ли таблица */
     /** @default false */
     loading?: boolean;
+    /**
+     * Количество строк-скелетонов, отображаемых во время загрузки (`loading`).
+     * @default 10
+     */
+    loadingRowCount?: number;
     /** Сообщение при отсутствии данных */
     /** @default { title: "Nothing found", description: "Try adjusting your search or filters", action: "Reset" } */
     emptyLabels?: {
@@ -89,13 +94,6 @@ export interface TableProps<TData> {
         description: string;
         action: string | React.ReactNode;
     };
-    /** Сообщение при загрузке данных */
-    /** @default { title: "Loading...", description: "Please wait or reset your promt", action: "Reset" } */
-    loadingLabels?: {
-        title: string;
-        description: string;
-        action: string | React.ReactNode;
-    };
     /** Кастомный класс для таблицы */
     className?: string;
     /** Кастомный класс для контейнера таблицы */

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

@@ -8,10 +8,10 @@ import { MarkdownShortcutPlugin as U } from "@lexical/react/LexicalMarkdownShort
 import { OnChangePlugin as W } from "@lexical/react/LexicalOnChangePlugin";
 import { TablePlugin as H } from "@lexical/react/LexicalTablePlugin";
 import { useState as u, useMemo as a, useCallback as p } from "react";
-import { MARKDOWN_TOOLBAR_DEFAULT_ACTIONS as K } from "./MarkdownTextEditor.const.js";
-import { MarkdownTextEditorLocaleProvider as q } from "./MarkdownTextEditor.locale.js";
+import { getEditorConfig as K } from "./configs/editor.config.js";
+import { MARKDOWN_TOOLBAR_DEFAULT_ACTIONS as q } from "./MarkdownTextEditor.const.js";
+import { MarkdownTextEditorLocaleProvider as z } from "./MarkdownTextEditor.locale.js";
 import { EDITOR_TRANSFORMERS as g } from "./transformers/index.js";
-import { getEditorConfig as z } from "./configs/editor.config.js";
 import { EditorStateContext as G } from "./contexts/EditorStateContext/EditorStateContext.js";
 import { ToolbarContext as J } from "./contexts/ToolbarContext/ToolbarContext.js";
 import { EditorToolbar as Q } from "./components/EditorToolbar/EditorToolbar.js";
@@ -40,7 +40,7 @@ function No({
   fieldClassName: R,
   previewClassName: v
 }) {
-  const [d, A] = u(""), [i, N] = u(!1), { availableActions: s, onImagesUpload: O } = P || {}, I = a(() => z(), []), L = a(
+  const [d, A] = u(""), [i, N] = u(!1), { availableActions: s, onImagesUpload: O } = P || {}, I = a(() => K(), []), L = a(
     () => ({
       isEditable: !m,
       isPreviewMode: i,
@@ -49,7 +49,7 @@ function No({
     }),
     [m, i, d]
   ), F = a(() => ({
-    availableActions: s || K
+    availableActions: s || q
   }), [s]), f = p(
     (t) => {
       A(t), r.onMarkdownChange && r.onMarkdownChange(t);
@@ -64,7 +64,7 @@ function No({
     },
     [f, r]
   );
-  return /* @__PURE__ */ o(q, { locale: M, children: /* @__PURE__ */ o(D, { initialConfig: I, children: /* @__PURE__ */ o(G.Provider, { value: L, children: /* @__PURE__ */ c(J.Provider, { value: F, children: [
+  return /* @__PURE__ */ o(z, { locale: M, children: /* @__PURE__ */ o(D, { initialConfig: I, children: /* @__PURE__ */ o(G.Provider, { value: L, children: /* @__PURE__ */ c(J.Provider, { value: F, children: [
     /* @__PURE__ */ c(
       h,
       {

package/dist/components/shared/MarkdownText/MarkdownText.js

@@ -6,11 +6,11 @@ import { ContentEditable as f } from "@lexical/react/LexicalContentEditable";
 import { LexicalErrorBoundary as c } from "@lexical/react/LexicalErrorBoundary";
 import { RichTextPlugin as p } from "@lexical/react/LexicalRichTextPlugin";
 import { useMemo as s } from "react";
-import { EDITOR_TRANSFORMERS as u } from "../../controls/MarkdownTextEditor/transformers/index.js";
-import { markdownTextStyle as x } from "./MarkdownText.styles.js";
-import { Text as w } from "../../builders/Text/Text.js";
-import { EditorStateContext as E } from "../../controls/MarkdownTextEditor/contexts/EditorStateContext/EditorStateContext.js";
-import { getEditorConfig as k } from "../../controls/MarkdownTextEditor/configs/editor.config.js";
+import { getEditorConfig as u } from "../../controls/MarkdownTextEditor/configs/editor.config.js";
+import { EDITOR_TRANSFORMERS as x } from "../../controls/MarkdownTextEditor/transformers/index.js";
+import { markdownTextStyle as w } from "./MarkdownText.styles.js";
+import { Text as E } from "../../builders/Text/Text.js";
+import { EditorStateContext as k } from "../../controls/MarkdownTextEditor/contexts/EditorStateContext/EditorStateContext.js";
 function F({
   markdown: t,
   className: i,
@@ -27,15 +27,15 @@ function F({
     }),
     [r]
   );
-  return r ? /* @__PURE__ */ o(E.Provider, { value: a, children: /* @__PURE__ */ o(
+  return r ? /* @__PURE__ */ o(k.Provider, { value: a, children: /* @__PURE__ */ o(
     d,
     {
       initialConfig: {
-        ...k(),
+        ...u(),
         editable: !1,
         namespace: "ui-kit-markdown-text-viewer",
         editorState: () => {
-          l(r, u);
+          l(r, x);
         }
       },
       children: /* @__PURE__ */ o(
@@ -44,7 +44,7 @@ function F({
           contentEditable: /* @__PURE__ */ o(
             f,
             {
-              className: m(x, i),
+              className: m(w, i),
               "aria-placeholder": "markdown text",
               placeholder: () => null
             }
@@ -56,7 +56,7 @@ function F({
     },
     r
   ) }) : typeof e == "string" ? /* @__PURE__ */ o(
-    w,
+    E,
     {
       variant: "body-2",
       colorName: "tertiary",