@pylerai/design-system 2.2.1 → 2.3.1-rc.0

package/dist/components/ui/modal.js

@@ -1,12 +1,12 @@
 "use client";
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
 import { XIcon as z } from "../../lib/icons.js";
-import { useDialogA11y as p } from "../../lib/use-dialog-a11y.js";
-import { cn as g } from "../../lib/utils.js";
-import * as b from "react";
-import { createPortal as v } from "react-dom";
-import { Button as h } from "./button.js";
-function y({ onClick: l }) {
+import { useDialogA11y as g } from "../../lib/use-dialog-a11y.js";
+import { cn as v } from "../../lib/utils.js";
+import * as h from "react";
+import { createPortal as y } from "react-dom";
+import { Button as p } from "./button.js";
+function w({ onClick: l }) {
   return /* @__PURE__ */ e(
     "button",
     {
@@ -18,45 +18,46 @@ function y({ onClick: l }) {
     }
   );
 }
-function w({ children: l }) {
-  return /* @__PURE__ */ a("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-5", children: [
-    /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-ds-dim-default" }),
-    /* @__PURE__ */ e("div", { className: "relative z-10 flex items-center justify-center w-full h-full", children: l })
+function N({ dim: l = !0, children: s }) {
+  return /* @__PURE__ */ n("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-5", children: [
+    l && /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-ds-dim-default" }),
+    /* @__PURE__ */ e("div", { className: "relative z-10 flex items-center justify-center w-full h-full", children: s })
   ] });
 }
-const N = "bg-ds-background-default border border-ds-line-normal rounded-ds-lg p-5 flex flex-col gap-6 shadow-ds-modal focus:outline-none", k = "flex-1 min-w-0 text-body-2-sb text-ds-text-strong";
+const k = "bg-ds-background-default border border-ds-line-normal rounded-ds-lg p-5 flex flex-col gap-6 shadow-ds-modal focus:outline-none", $ = "flex-1 min-w-0 text-body-2-sb text-ds-text-strong";
 function S({
   open: l,
-  title: f,
-  description: i,
-  confirmLabel: o = "확인",
-  onConfirm: c,
-  onClose: s,
+  title: s,
+  description: t,
+  confirmLabel: c = "확인",
+  onConfirm: f,
+  onClose: r,
+  dim: o,
   className: d
 }) {
-  const t = b.useId(), n = p(l, s);
+  const i = h.useId(), m = g(l, r);
   if (!l) return null;
-  const r = () => {
-    c == null || c(), s();
+  const a = () => {
+    f?.(), r();
   };
-  return v(
-    /* @__PURE__ */ e(w, { children: /* @__PURE__ */ a(
+  return y(
+    /* @__PURE__ */ e(N, { dim: o, children: /* @__PURE__ */ n(
       "div",
       {
-        ref: n,
+        ref: m,
         role: "dialog",
         "aria-modal": "true",
-        "aria-labelledby": `${t}-title`,
-        "aria-describedby": i ? `${t}-description` : void 0,
+        "aria-labelledby": `${i}-title`,
+        "aria-describedby": t ? `${i}-description` : void 0,
         tabIndex: -1,
-        className: g(N, "w-[360px]", d),
+        className: v(k, "w-[360px]", d),
         children: [
-          /* @__PURE__ */ a("div", { className: "flex items-start justify-between w-full gap-2", children: [
-            /* @__PURE__ */ e("p", { id: `${t}-title`, className: k, children: f }),
-            /* @__PURE__ */ e(y, { onClick: s })
+          /* @__PURE__ */ n("div", { className: "flex items-start justify-between w-full gap-2", children: [
+            /* @__PURE__ */ e("p", { id: `${i}-title`, className: $, children: s }),
+            /* @__PURE__ */ e(w, { onClick: r })
           ] }),
-          i && /* @__PURE__ */ e("p", { id: `${t}-description`, className: "text-body-3-r text-ds-text-strong w-full", children: i }),
-          o && /* @__PURE__ */ e("div", { className: "flex items-center justify-end w-full", children: /* @__PURE__ */ e(h, { variant: "filled", color: "blue", size: "lg", onClick: r, children: o }) })
+          t && /* @__PURE__ */ e("p", { id: `${i}-description`, className: "text-body-3-r text-ds-text-strong w-full", children: t }),
+          c && /* @__PURE__ */ e("div", { className: "flex items-center justify-end w-full", children: /* @__PURE__ */ e(p, { variant: "filled", color: "blue", size: "lg", onClick: a, children: c }) })
         ]
       }
     ) }),
@@ -65,42 +66,43 @@ function S({
 }
 function X({
   open: l,
-  title: f,
-  description: i,
-  cancelLabel: o = "닫기",
-  confirmLabel: c = "확인",
-  onCancel: s,
-  onConfirm: d,
-  onClose: t,
-  className: n
+  title: s,
+  description: t,
+  cancelLabel: c = "닫기",
+  confirmLabel: f = "확인",
+  onCancel: r,
+  onConfirm: o,
+  onClose: d,
+  dim: i,
+  className: m
 }) {
-  const r = b.useId(), m = b.useCallback(() => {
-    s == null || s(), t();
-  }, [s, t]), u = p(l, m);
+  const a = h.useId(), x = h.useCallback(() => {
+    r?.(), d();
+  }, [r, d]), u = g(l, x);
   if (!l) return null;
-  const x = () => {
-    d == null || d(), t();
+  const b = () => {
+    o?.(), d();
   };
-  return v(
-    /* @__PURE__ */ e(w, { children: /* @__PURE__ */ a(
+  return y(
+    /* @__PURE__ */ e(N, { dim: i, children: /* @__PURE__ */ n(
       "div",
       {
         ref: u,
         role: "dialog",
         "aria-modal": "true",
-        "aria-labelledby": `${r}-title`,
-        "aria-describedby": i ? `${r}-description` : void 0,
+        "aria-labelledby": `${a}-title`,
+        "aria-describedby": t ? `${a}-description` : void 0,
         tabIndex: -1,
-        className: g(N, "w-[360px]", n),
+        className: v(k, "w-[360px]", m),
         children: [
-          /* @__PURE__ */ a("div", { className: "flex items-center justify-between w-full gap-2", children: [
-            /* @__PURE__ */ e("p", { id: `${r}-title`, className: k, children: f }),
-            /* @__PURE__ */ e(y, { onClick: m })
+          /* @__PURE__ */ n("div", { className: "flex items-center justify-between w-full gap-2", children: [
+            /* @__PURE__ */ e("p", { id: `${a}-title`, className: $, children: s }),
+            /* @__PURE__ */ e(w, { onClick: x })
           ] }),
-          i && /* @__PURE__ */ e("p", { id: `${r}-description`, className: "text-body-3-r text-ds-text-strong w-full", children: i }),
-          /* @__PURE__ */ a("div", { className: "flex items-center justify-end gap-2 w-full", children: [
-            /* @__PURE__ */ e(h, { variant: "outlined", color: "blue", size: "lg", onClick: m, children: o }),
-            /* @__PURE__ */ e(h, { variant: "filled", color: "blue", size: "lg", onClick: x, children: c })
+          t && /* @__PURE__ */ e("p", { id: `${a}-description`, className: "text-body-3-r text-ds-text-strong w-full", children: t }),
+          /* @__PURE__ */ n("div", { className: "flex items-center justify-end gap-2 w-full", children: [
+            /* @__PURE__ */ e(p, { variant: "outlined", color: "blue", size: "lg", onClick: x, children: c }),
+            /* @__PURE__ */ e(p, { variant: "filled", color: "blue", size: "lg", onClick: b, children: f })
           ] })
         ]
       }
@@ -115,47 +117,48 @@ const I = {
 };
 function q({
   open: l,
-  title: f,
-  description: i,
-  size: o = "sm",
-  cancelLabel: c = "닫기",
-  confirmLabel: s = "확인",
-  onCancel: d,
-  onConfirm: t,
-  onClose: n,
-  children: r,
-  className: m
+  title: s,
+  description: t,
+  size: c = "sm",
+  cancelLabel: f = "닫기",
+  confirmLabel: r = "확인",
+  onCancel: o,
+  onConfirm: d,
+  onClose: i,
+  children: m,
+  dim: a,
+  className: x
 }) {
-  const u = b.useId(), x = b.useCallback(() => {
-    d == null || d(), n();
-  }, [d, n]), $ = p(l, x);
+  const u = h.useId(), b = h.useCallback(() => {
+    o?.(), i();
+  }, [o, i]), j = g(l, b);
   if (!l) return null;
-  const j = () => {
-    t == null || t(), n();
+  const C = () => {
+    d?.(), i();
   };
-  return v(
-    /* @__PURE__ */ e(w, { children: /* @__PURE__ */ a(
+  return y(
+    /* @__PURE__ */ e(N, { dim: a, children: /* @__PURE__ */ n(
       "div",
       {
-        ref: $,
+        ref: j,
         role: "dialog",
         "aria-modal": "true",
         "aria-labelledby": `${u}-title`,
-        "aria-describedby": i ? `${u}-description` : void 0,
+        "aria-describedby": t ? `${u}-description` : void 0,
         tabIndex: -1,
-        className: g(N, I[o], m),
+        className: v(k, I[c], x),
         children: [
-          /* @__PURE__ */ a("div", { className: "flex flex-col gap-3 w-full shrink-0", children: [
-            /* @__PURE__ */ a("div", { className: "flex items-center justify-between w-full gap-2", children: [
-              /* @__PURE__ */ e("p", { id: `${u}-title`, className: k, children: f }),
-              /* @__PURE__ */ e(y, { onClick: x })
+          /* @__PURE__ */ n("div", { className: "flex flex-col gap-3 w-full shrink-0", children: [
+            /* @__PURE__ */ n("div", { className: "flex items-center justify-between w-full gap-2", children: [
+              /* @__PURE__ */ e("p", { id: `${u}-title`, className: $, children: s }),
+              /* @__PURE__ */ e(w, { onClick: b })
             ] }),
-            i && /* @__PURE__ */ e("p", { id: `${u}-description`, className: "text-body-3-r text-ds-text-strong w-full", children: i })
+            t && /* @__PURE__ */ e("p", { id: `${u}-description`, className: "text-body-3-r text-ds-text-strong w-full", children: t })
           ] }),
-          /* @__PURE__ */ e("div", { className: "flex-1 min-h-0 bg-ds-surface-normal rounded-ds-md w-full overflow-y-auto", children: r }),
-          /* @__PURE__ */ a("div", { className: "flex items-center justify-end gap-2 w-full shrink-0", children: [
-            /* @__PURE__ */ e(h, { variant: "outlined", color: "blue", size: "lg", onClick: x, children: c }),
-            /* @__PURE__ */ e(h, { variant: "filled", color: "blue", size: "lg", onClick: j, children: s })
+          /* @__PURE__ */ e("div", { className: "flex-1 min-h-0 bg-ds-surface-normal rounded-ds-md w-full overflow-y-auto", children: m }),
+          /* @__PURE__ */ n("div", { className: "flex items-center justify-end gap-2 w-full shrink-0", children: [
+            /* @__PURE__ */ e(p, { variant: "outlined", color: "blue", size: "lg", onClick: b, children: f }),
+            /* @__PURE__ */ e(p, { variant: "filled", color: "blue", size: "lg", onClick: C, children: r })
           ] })
         ]
       }

package/dist/components/ui/radio.js

@@ -1,18 +1,18 @@
 "use client";
 import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import { RadioCheckedDisabledIcon as p, RadioUncheckedDisabledIcon as f, RadioCheckedIcon as R, RadioUncheckedIcon as k } from "../../lib/icons.js";
-import { cn as x } from "../../lib/utils.js";
-import * as u from "react";
-const I = u.forwardRef(
-  ({ className: a, checked: o, disabled: r, onChange: i, value: c, children: s, ...n }, t) => {
-    const l = r ? o ? /* @__PURE__ */ e(p, {}) : /* @__PURE__ */ e(f, {}) : o ? /* @__PURE__ */ e(R, {}) : /* @__PURE__ */ e(k, {});
+import { RadioCheckedDisabledIcon as p, RadioUncheckedDisabledIcon as f, RadioCheckedIcon as R, RadioUncheckedIcon as h } from "../../lib/icons.js";
+import { cn as k } from "../../lib/utils.js";
+import * as x from "react";
+const g = x.forwardRef(
+  ({ className: a, checked: o, disabled: n, onChange: c, value: r, children: i, ...s }, t) => {
+    const l = n ? o ? /* @__PURE__ */ e(p, {}) : /* @__PURE__ */ e(f, {}) : o ? /* @__PURE__ */ e(R, {}) : /* @__PURE__ */ e(h, {});
     return /* @__PURE__ */ d(
       "label",
       {
-        className: x(
+        className: k(
           "relative inline-flex items-center gap-1",
-          s ? "" : "shrink-0",
-          r ? "cursor-not-allowed" : "cursor-pointer",
+          i ? "" : "shrink-0",
+          n ? "cursor-not-allowed" : "cursor-pointer",
           a
         ),
         children: [
@@ -22,21 +22,21 @@ const I = u.forwardRef(
               type: "radio",
               ref: t,
               checked: o,
-              disabled: r,
-              value: c,
-              onChange: (m) => m.target.checked && (i == null ? void 0 : i(String(c ?? ""))),
+              disabled: n,
+              value: r,
+              onChange: (m) => m.target.checked && c?.(String(r ?? "")),
               className: "sr-only",
-              ...n
+              ...s
             }
           ),
           /* @__PURE__ */ e("span", { className: "shrink-0 inline-flex", children: l }),
-          s
+          i
         ]
       }
     );
   }
 );
-I.displayName = "Radio";
+g.displayName = "Radio";
 export {
-  I as Radio
+  g as Radio
 };

package/dist/components/ui/table.js

@@ -1,94 +1,94 @@
 "use client";
-import { jsxs as x, jsx as i } from "react/jsx-runtime";
-import { InfoIcon as F, SortArrowIcon as P } from "../../lib/icons.js";
+import { jsxs as x, jsx as a } from "react/jsx-runtime";
+import { InfoIcon as B, SortArrowIcon as _ } from "../../lib/icons.js";
 import { cn as g } from "../../lib/utils.js";
-import * as h from "react";
-import { Checkbox as j } from "./checkbox.js";
-const L = {
+import * as f from "react";
+import { Checkbox as C } from "./checkbox.js";
+const S = {
   borderRight: "3px solid var(--ds-line-normal)"
-}, w = h.forwardRef(
-  ({ className: s, ...r }, a) => /* @__PURE__ */ i(
+}, j = f.forwardRef(
+  ({ className: l, ...r }, n) => /* @__PURE__ */ a(
     "div",
     {
-      ref: a,
+      ref: n,
       role: "table",
-      className: g("w-full overflow-x-auto", s),
+      className: g("w-full overflow-x-auto", l),
       ...r
     }
   )
 );
-w.displayName = "TableRoot";
-const E = h.forwardRef(
-  (s, r) => /* @__PURE__ */ i("div", { ref: r, role: "rowgroup", ...s })
+j.displayName = "TableRoot";
+const L = f.forwardRef(
+  (l, r) => /* @__PURE__ */ a("div", { ref: r, role: "rowgroup", ...l })
 );
-E.displayName = "TableHead";
-const H = h.forwardRef(
-  (s, r) => /* @__PURE__ */ i("div", { ref: r, role: "rowgroup", ...s })
+L.displayName = "TableHead";
+const R = f.forwardRef(
+  (l, r) => /* @__PURE__ */ a("div", { ref: r, role: "rowgroup", ...l })
 );
-H.displayName = "TableBody";
-const N = h.forwardRef(
-  ({ className: s, hoverable: r = !0, selected: a, ...n }, l) => /* @__PURE__ */ i(
+R.displayName = "TableBody";
+const N = f.forwardRef(
+  ({ className: l, hoverable: r = !0, selected: n, ...i }, s) => /* @__PURE__ */ a(
     "div",
     {
-      ref: l,
+      ref: s,
       role: "row",
-      "aria-selected": a,
+      "aria-selected": n,
       className: g(
         "flex items-stretch w-full",
         r && "hover:bg-ds-surface-strong",
-        a && "bg-ds-surface-normal",
-        s
+        n && "bg-ds-surface-normal",
+        l
       ),
-      ...n
+      ...i
     }
   )
 );
 N.displayName = "TableRow";
-const k = h.forwardRef(
+const k = f.forwardRef(
   ({
-    className: s,
+    className: l,
     children: r,
-    sortable: a,
-    sortDirection: n,
-    onSort: l,
+    sortable: n,
+    sortDirection: i,
+    onSort: s,
     info: d,
-    fixedLine: c,
-    align: f = "left",
+    fixedLine: m,
+    align: h = "left",
     width: p,
     style: b,
     ...y
-  }, m) => {
-    const v = a && n != null;
+  }, c) => {
+    const v = n && i != null;
     return /* @__PURE__ */ x(
       "div",
       {
-        ref: m,
+        ref: c,
         role: "columnheader",
-        tabIndex: a ? 0 : void 0,
-        "aria-sort": a ? n === "asc" ? "ascending" : n === "desc" ? "descending" : "none" : void 0,
+        tabIndex: n ? 0 : void 0,
+        "aria-sort": n ? i === "asc" ? "ascending" : i === "desc" ? "descending" : "none" : void 0,
         className: g(
           "flex h-10 items-center gap-1 border-t border-ds-line-normal bg-ds-surface-normal px-3 py-2.5",
           p ? "shrink-0" : "flex-1 min-w-0",
-          f === "right" && "justify-end",
-          a && "cursor-pointer select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ds-primary-blue-normal",
-          s
+          h === "right" && "justify-end",
+          n && "cursor-pointer select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ds-primary-blue-normal",
+          l
         ),
-        style: { width: p, ...c ? L : {}, ...b },
-        onClick: a ? l : void 0,
-        onKeyDown: a ? (u) => {
-          (u.key === "Enter" || u.key === " ") && (u.preventDefault(), l == null || l());
+        style: { width: p, ...m ? S : {}, ...b },
+        onClick: n ? s : void 0,
+        onKeyDown: n ? (u) => {
+          (u.key === "Enter" || u.key === " ") && (u.preventDefault(), s?.());
         } : void 0,
         ...y,
         children: [
-          /* @__PURE__ */ i("span", { className: "text-body-3-r text-ds-text-strong whitespace-nowrap", children: r }),
-          d && /* @__PURE__ */ i(F, { className: "shrink-0 text-ds-text-disabled" }),
-          a && /* @__PURE__ */ i(
-            P,
+          /* @__PURE__ */ a("span", { className: "text-body-3-r text-ds-text-strong whitespace-nowrap", children: r }),
+          d && /* @__PURE__ */ a(B, { className: "shrink-0 text-ds-text-disabled" }),
+          n && /* @__PURE__ */ a(
+            _,
             {
               className: g(
                 "shrink-0 transition-transform duration-150",
                 v ? "text-ds-text-strong" : "text-ds-text-disabled",
-                n === "asc" && "rotate-180"
+                i === "asc" && "rotate-180"
               )
             }
           )
@@ -98,59 +98,59 @@ const k = h.forwardRef(
   }
 );
 k.displayName = "TableHeaderCell";
-const T = h.forwardRef(
-  ({ className: s, align: r = "left", fixedLine: a, width: n, style: l, children: d, ...c }, f) => /* @__PURE__ */ i(
+const T = f.forwardRef(
+  ({ className: l, align: r = "left", fixedLine: n, width: i, style: s, children: d, ...m }, h) => /* @__PURE__ */ a(
     "div",
     {
-      ref: f,
+      ref: h,
       role: "cell",
       className: g(
         "flex items-center border-b border-ds-line-normal px-3 py-2",
-        n ? "shrink-0" : "flex-1 min-w-0",
+        i ? "shrink-0" : "flex-1 min-w-0",
         r === "right" && "justify-end",
-        s
+        l
       ),
-      style: { width: n, ...a ? L : {}, ...l },
-      ...c,
+      style: { width: i, ...n ? S : {}, ...s },
+      ...m,
       children: d
     }
   )
 );
 T.displayName = "TableCell";
-function q({
-  columns: s,
+function Y({
+  columns: l,
   data: r,
-  sortKey: a,
-  sortDirection: n,
-  onSort: l,
+  sortKey: n,
+  sortDirection: i,
+  onSort: s,
   selectedRows: d,
-  onRowSelect: c,
-  onSelectAll: f,
+  onRowSelect: m,
+  onSelectAll: h,
   getRowKey: p,
   onRowClick: b,
   className: y
 }) {
-  const m = d !== void 0, v = m && r.length > 0 && d.length === r.length, u = m && d.length > 0 && d.length < r.length, B = (e) => {
-    if (!l) return;
-    l(e, a === e && n === "asc" ? "desc" : "asc");
+  const c = d !== void 0, v = c && r.length > 0 && d.length === r.length, u = c && d.length > 0 && d.length < r.length, E = (e) => {
+    if (!s) return;
+    s(e, n === e && i === "asc" ? "desc" : "asc");
   };
-  return /* @__PURE__ */ x(w, { className: y, children: [
-    /* @__PURE__ */ i(E, { children: /* @__PURE__ */ x(N, { hoverable: !1, children: [
-      m && /* @__PURE__ */ i(k, { width: 40, className: "justify-center px-1.5", children: /* @__PURE__ */ i(
-        j,
+  return /* @__PURE__ */ x(j, { className: y, children: [
+    /* @__PURE__ */ a(L, { children: /* @__PURE__ */ x(N, { hoverable: !1, children: [
+      c && /* @__PURE__ */ a(k, { width: 40, className: "justify-center px-1.5", children: /* @__PURE__ */ a(
+        C,
         {
           "aria-label": "전체 선택",
           checked: v,
           indeterminate: u,
-          onChange: (e) => f == null ? void 0 : f(e)
+          onChange: (e) => h?.(e)
         }
       ) }),
-      s.map((e) => /* @__PURE__ */ i(
+      l.map((e) => /* @__PURE__ */ a(
         k,
         {
           sortable: e.sortable,
-          sortDirection: e.sortable && a === e.key ? n ?? null : null,
-          onSort: () => B(e.key),
+          sortDirection: e.sortable && n === e.key ? i ?? null : null,
+          onSort: () => E(e.key),
           info: e.info,
           fixedLine: e.fixedLine,
           align: e.align,
@@ -160,47 +160,47 @@ function q({
         e.key
       ))
     ] }) }),
-    /* @__PURE__ */ i(H, { children: r.map((e, o) => {
-      const _ = p ? p(e, o) : o, C = m && d.includes(o);
+    /* @__PURE__ */ a(R, { children: r.map((e, o) => {
+      const H = p ? p(e, o) : o, w = c && d.includes(o);
       return /* @__PURE__ */ x(
         N,
         {
-          selected: C,
+          selected: w,
           onClick: b ? () => b(e, o) : void 0,
           className: b ? "cursor-pointer" : void 0,
           children: [
-            m && /* @__PURE__ */ i(T, { width: 40, className: "justify-center px-1.5", children: /* @__PURE__ */ i(
-              j,
+            c && /* @__PURE__ */ a(T, { width: 40, className: "justify-center px-1.5", children: /* @__PURE__ */ a(
+              C,
               {
                 "aria-label": `${o + 1}번째 행 선택`,
-                checked: C,
-                onChange: (t) => c == null ? void 0 : c(o, t),
+                checked: w,
+                onChange: (t) => m?.(o, t),
                 onClick: (t) => t.stopPropagation()
               }
             ) }),
-            s.map((t) => /* @__PURE__ */ i(
+            l.map((t) => /* @__PURE__ */ a(
               T,
               {
                 align: t.align,
                 fixedLine: t.fixedLine,
                 width: t.width,
-                children: /* @__PURE__ */ i("span", { className: "text-body-3-r text-ds-text-strong w-full", children: t.cell ? t.cell(e, o) : String(e[t.key] ?? "") })
+                children: /* @__PURE__ */ a("span", { className: "text-body-3-r text-ds-text-strong w-full", children: t.cell ? t.cell(e, o) : String(e[t.key] ?? "") })
               },
               t.key
             ))
           ]
         },
-        _
+        H
       );
     }) })
   ] });
 }
 export {
-  q as Table,
-  H as TableBody,
+  Y as Table,
+  R as TableBody,
   T as TableCell,
-  E as TableHead,
+  L as TableHead,
   k as TableHeaderCell,
-  w as TableRoot,
+  j as TableRoot,
   N as TableRow
 };