@vkzstudio/muza-ui 1.0.1 → 1.0.3

package/dist/components/ExpandableTable/ExpandableTable.js

@@ -1,13 +1,13 @@
-import { jsxs as n, jsx as a, Fragment as j } from "react/jsx-runtime";
-import { useState as z, useMemo as K, Fragment as M } from "react";
-import { cva as A } from "class-variance-authority";
-import { useIsMinSm as H, useIsMinMd as L, useIsMinLg as x } from "../../hooks/use-is-breakpoint.js";
-import { Table as C, TableHeader as O, TableRow as u, TableHead as V, TableBody as _, TableCell as v } from "./Table.js";
-import { Typography as p } from "../Typography/Typography.js";
+import { jsxs as m, jsx as t, Fragment as $ } from "react/jsx-runtime";
+import { useState as j, useMemo as N, Fragment as M } from "react";
+import { cva as z } from "class-variance-authority";
+import { useIsMinSm as A, useIsMinMd as C, useIsMinLg as H } from "../../hooks/use-is-breakpoint.js";
+import { Table as O, TableHeader as _, TableRow as k, TableHead as q, TableBody as G, TableCell as E } from "./Table.js";
+import { Typography as h } from "../Typography/Typography.js";
 import { Flex as B } from "../Flex/Flex.js";
-import { cn as h } from "../../utils/cn.js";
-import { AltArrowDownOutline as q } from "@solar-icons/react-perf";
-const b = A("", {
+import { cn as v } from "../../utils/cn.js";
+import { AltArrowDownOutline as J } from "@solar-icons/react-perf";
+const F = z("", {
   variants: {
     responsive: {
       xs: "",
@@ -22,89 +22,95 @@ const b = A("", {
       lg: "lg:hidden"
     }
   }
-}), S = ({
-  data: F,
-  columns: d,
+}), Q = (o, a, s, n) => !o || o === "xs" ? !0 : o === "sm" ? a : o === "md" ? s : o === "lg" ? n : !0, w = ({
+  data: o,
+  columns: a,
   expandableRowSections: s
 }) => {
-  const [t, P] = z(/* @__PURE__ */ new Set()), y = (e) => {
-    P((r) => {
-      const l = new Set(r);
-      return l.has(e) ? l.delete(e) : l.add(e), l;
+  const [n, L] = j(/* @__PURE__ */ new Set()), T = (e) => {
+    L((i) => {
+      const d = new Set(i);
+      return d.has(e) ? d.delete(e) : d.add(e), d;
     });
-  }, m = K(() => {
-    const e = d.filter((r) => r.responsive).map((r) => r.responsive);
+  }, p = N(() => {
+    const e = a.filter((i) => i.responsive).map((i) => i.responsive);
     return e.includes("lg") ? "lg" : e.includes("md") ? "md" : e.includes("sm") ? "sm" : e.includes("xs") ? "xs" : null;
-  }, [d]), N = H(), k = L(), T = x(), E = K(() => m ? m === "lg" ? T : m === "md" ? k : m === "sm" ? N : !1 : !1, [m, N, k, T]), c = !s && !!m && !E;
-  return /* @__PURE__ */ n(C, { children: [
-    /* @__PURE__ */ a(O, { children: /* @__PURE__ */ a(u, { className: "after:hidden", children: d.map((e, r) => /* @__PURE__ */ a(
-      V,
+  }, [a]), g = A(), u = C(), b = H(), K = N(() => p ? p === "lg" ? b : p === "md" ? u : p === "sm" ? g : !1 : !1, [p, g, u, b]), { firstVisibleIndex: V, lastVisibleIndex: P } = N(() => {
+    let e = -1, i = -1;
+    return a.forEach((d, r) => {
+      Q(d.responsive, g, u, b) && (e === -1 && (e = r), i = r);
+    }), { firstVisibleIndex: e, lastVisibleIndex: i };
+  }, [a, g, u, b]), c = !s && !!p && !K;
+  return /* @__PURE__ */ m(O, { children: [
+    /* @__PURE__ */ t(_, { children: /* @__PURE__ */ t(k, { className: "[&>th]:border-0 [&>th]:bg-transparent", children: a.map((e, i) => /* @__PURE__ */ t(
+      q,
       {
-        className: h(
+        className: v(
           e.className,
-          b({ responsive: e.responsive })
+          F({ responsive: e.responsive })
         ),
         children: e.title
       },
-      r
+      i
     )) }) }),
-    /* @__PURE__ */ a(_, { children: F.map((e, r) => {
-      var l;
-      return /* @__PURE__ */ n(M, { children: [
-        /* @__PURE__ */ n(
-          u,
+    /* @__PURE__ */ t(G, { children: o.map((e, i) => {
+      var d;
+      return /* @__PURE__ */ m(M, { children: [
+        /* @__PURE__ */ m(
+          k,
           {
-            hideBottomSpacing: t.has(r) || c,
-            isExpanded: t.has(r) || c,
-            colNumber: d.length + 1,
-            expandablePosition: s && t.has(r) || c ? "top" : "none",
-            className: h("focus-visible-default", {
+            hideBottomSpacing: n.has(i) || c,
+            isExpanded: n.has(i) || c,
+            colNumber: a.length + 1,
+            expandablePosition: s && n.has(i) || c ? "top" : "none",
+            className: v("group focus-visible-default", {
               "cursor-pointer": s,
-              "hover:after:bg-surface-base-primary": !s
+              "[&>td]:hover:bg-surface-base-primary": !s
             }),
-            onClick: s ? () => y(r) : void 0,
-            onKeyDown: s ? (i) => {
-              (i.key === "Enter" || i.key === " ") && (i.preventDefault(), y(r));
+            onClick: s ? () => T(i) : void 0,
+            onKeyDown: s ? (r) => {
+              (r.key === "Enter" || r.key === " ") && (r.preventDefault(), T(i));
             } : void 0,
             tabIndex: s ? 0 : void 0,
             role: s ? "button" : void 0,
-            "aria-expanded": s ? t.has(r) : void 0,
+            "aria-expanded": s ? n.has(i) : void 0,
             children: [
-              d.map((i, o) => /* @__PURE__ */ a(
-                v,
+              a.map((r, l) => /* @__PURE__ */ t(
+                E,
                 {
-                  expandablePosition: s && t.has(r) ? "top" : "none",
-                  className: h(
-                    i.className,
-                    b({ responsive: i.responsive })
+                  isFirst: l === V,
+                  isLast: l === P && !s,
+                  expandablePosition: s && n.has(i) ? "top" : "none",
+                  className: v(
+                    r.className,
+                    F({ responsive: r.responsive })
                   ),
-                  children: i.render ? i.render(e[i.dataKey], e) : /* @__PURE__ */ a(
-                    p,
+                  children: r.render ? r.render(e[r.dataKey], e) : /* @__PURE__ */ t(
+                    h,
                     {
                       variant: "body",
                       size: "base",
                       weight: "medium",
                       component: "span",
-                      children: e[i.dataKey]
+                      children: e[r.dataKey]
                     }
                   )
                 },
-                o
+                l
               )),
-              s && /* @__PURE__ */ a(
-                v,
+              s && /* @__PURE__ */ t(
+                E,
                 {
                   className: "w-[68px]",
-                  expandablePosition: t.has(r) ? "top" : "none",
-                  children: /* @__PURE__ */ a(
-                    q,
+                  isFirst: !1,
+                  isLast: !0,
+                  expandablePosition: n.has(i) ? "top" : "none",
+                  children: /* @__PURE__ */ t(
+                    J,
                     {
-                      className: h(
-                        "text-text-brand-def transition-transform duration-200",
-                        {
-                          "rotate-180": t.has(r)
-                        }
-                      )
+                      className: v("text-text-brand-def", {
+                        "rotate-180": n.has(i)
+                      })
                     }
                   )
                 }
@@ -112,120 +118,119 @@ const b = A("", {
             ]
           }
         ),
-        /* @__PURE__ */ a(
-          u,
+        (n.has(i) || c) && /* @__PURE__ */ t(
+          k,
           {
-            hideBottomSpacing: s && !t.has(r) || !s && !c,
+            hideBottomSpacing: s && !n.has(i) || !s && !c,
             expandablePosition: "bottom",
-            className: h("hover:after:bg-surface-base-secondary", {
-              collapse: s && !t.has(r) || !s && !c
-            }),
-            children: /* @__PURE__ */ a(
-              v,
+            children: /* @__PURE__ */ t(
+              E,
               {
-                colSpan: d.length + 1,
+                colSpan: a.length + 1,
                 padding: "none",
+                isFirst: !0,
+                isLast: !0,
                 expandablePosition: "bottom",
-                children: /* @__PURE__ */ n(
-                  "div",
-                  {
-                    id: "test-id",
-                    className: h(
-                      "grid grid-cols-1 gap-2xl overflow-hidden px-comp-table-p py-2xl md:grid-cols-[auto_1fr]",
-                      t.has(r) ? "animate-expandable-row-down" : "animate-expandable-row-up"
-                    ),
-                    children: [
-                      !E && /* @__PURE__ */ n(j, { children: [
-                        /* @__PURE__ */ a(
+                children: /* @__PURE__ */ m("div", { className: "grid grid-cols-1 gap-2xl overflow-hidden px-comp-table-p py-2xl md:grid-cols-[auto_1fr]", children: [
+                  !K && /* @__PURE__ */ m($, { children: [
+                    /* @__PURE__ */ t(
+                      B,
+                      {
+                        gap: "md",
+                        direction: "column",
+                        className: "col-span-full",
+                        children: a.map((r, l) => /* @__PURE__ */ m(
                           B,
                           {
-                            gap: "md",
-                            direction: "column",
-                            className: "col-span-full",
-                            children: d.map((i, o) => /* @__PURE__ */ n(
-                              B,
-                              {
-                                align: "center",
-                                justify: "between",
-                                direction: "row",
-                                className: b({
-                                  reverse: i.responsive
-                                }),
-                                children: [
-                                  /* @__PURE__ */ a(p, { variant: "body", component: "span", children: i.title }),
-                                  i.render ? i.render(e[i.dataKey], e) : /* @__PURE__ */ a(
-                                    p,
-                                    {
-                                      variant: "body",
-                                      weight: "medium",
-                                      size: "base",
-                                      component: "span",
-                                      children: e[i.dataKey]
-                                    }
-                                  )
-                                ]
-                              },
-                              o
-                            ))
-                          }
-                        ),
-                        s && /* @__PURE__ */ a("hr", { className: "col-span-full text-stroke-base-secondary md:col-span-2" })
-                      ] }),
-                      (l = typeof s == "function" ? s(e) : s) == null ? void 0 : l.map((i, o) => {
-                        if (!s) return null;
-                        const $ = typeof s == "function" ? s(e).length : s.length;
-                        return /* @__PURE__ */ n(M, { children: [
-                          /* @__PURE__ */ n("div", { className: "col-span-full grid grid-cols-1 gap-y-xl md:col-span-2 md:grid-cols-subgrid", children: [
-                            i.title && /* @__PURE__ */ a(
-                              p,
-                              {
-                                variant: "body",
-                                uppercase: !0,
-                                size: "sm",
-                                weight: "medium",
-                                component: "p",
-                                className: "text-text-brand-def md:col-span-2",
-                                children: i.title
-                              }
-                            ),
-                            /* @__PURE__ */ a("div", { className: "col-span-full grid grid-cols-1 gap-x-3xl md:col-span-2 md:grid-cols-subgrid md:gap-y-md", children: i.cells.flatMap((f, g) => [
-                              /* @__PURE__ */ a(
-                                p,
-                                {
-                                  component: "span",
-                                  variant: "body",
-                                  className: "mb-xs text-text-dark-primary-def md:mb-0",
-                                  children: f.title
-                                },
-                                `${g}-label`
-                              ),
-                              f.render ? /* @__PURE__ */ a("div", { children: f.render(e[f.dataKey], e) }, `${g}-value`) : /* @__PURE__ */ a(
-                                p,
+                            align: "center",
+                            justify: "between",
+                            direction: "row",
+                            className: F({
+                              reverse: r.responsive
+                            }),
+                            children: [
+                              /* @__PURE__ */ t(h, { variant: "body", component: "span", children: r.title }),
+                              r.render ? r.render(e[r.dataKey], e) : /* @__PURE__ */ t(
+                                h,
                                 {
                                   variant: "body",
                                   weight: "medium",
+                                  size: "base",
                                   component: "span",
-                                  className: "mb-md last-of-type:mb-0 md:mb-0",
-                                  children: e[f.dataKey]
-                                },
-                                `${g}-value`
+                                  children: e[r.dataKey]
+                                }
                               )
-                            ]) })
-                          ] }),
-                          o < $ - 1 && /* @__PURE__ */ a("hr", { className: "col-span-full text-stroke-base-secondary md:col-span-2" })
-                        ] }, o);
-                      })
-                    ]
-                  }
-                )
+                            ]
+                          },
+                          l
+                        ))
+                      }
+                    ),
+                    s && /* @__PURE__ */ t("hr", { className: "col-span-full text-stroke-base-secondary md:col-span-2" })
+                  ] }),
+                  (d = typeof s == "function" ? s(e) : s) == null ? void 0 : d.map((r, l) => {
+                    if (!s) return null;
+                    const x = typeof s == "function" ? s(e).length : s.length;
+                    return /* @__PURE__ */ m(M, { children: [
+                      /* @__PURE__ */ m("div", { className: "col-span-full grid grid-cols-1 gap-y-xl md:col-span-2 md:grid-cols-subgrid", children: [
+                        r.title && /* @__PURE__ */ t(
+                          h,
+                          {
+                            variant: "body",
+                            uppercase: !0,
+                            size: "sm",
+                            weight: "medium",
+                            component: "p",
+                            className: "text-text-brand-def md:col-span-2",
+                            children: r.title
+                          }
+                        ),
+                        /* @__PURE__ */ t("div", { className: "col-span-full grid grid-cols-1 gap-x-3xl md:col-span-2 md:grid-cols-subgrid md:gap-y-md", children: r.cells.flatMap((f, y) => [
+                          /* @__PURE__ */ t(
+                            h,
+                            {
+                              component: "span",
+                              variant: "body",
+                              className: "mb-xs text-text-dark-primary-def md:mb-0",
+                              children: f.title
+                            },
+                            `${y}-label`
+                          ),
+                          f.render ? /* @__PURE__ */ t(
+                            "div",
+                            {
+                              className: "mb-md block last-of-type:mb-0 md:mb-0",
+                              children: f.render(
+                                e[f.dataKey],
+                                e
+                              )
+                            },
+                            `${y}-value`
+                          ) : /* @__PURE__ */ t(
+                            h,
+                            {
+                              variant: "body",
+                              weight: "medium",
+                              component: "span",
+                              className: "mb-md block last-of-type:mb-0 md:mb-0",
+                              children: e[f.dataKey]
+                            },
+                            `${y}-value`
+                          )
+                        ]) })
+                      ] }),
+                      l < x - 1 && /* @__PURE__ */ t("hr", { className: "col-span-full text-stroke-base-secondary md:col-span-2" })
+                    ] }, l);
+                  })
+                ] })
               }
             )
           }
         )
-      ] }, r);
+      ] }, i);
     }) })
   ] });
 };
 export {
-  S as ExpandableTable
+  w as ExpandableTable
 };

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

@@ -13,6 +13,9 @@ declare const TableHead: import('react').ForwardRefExoticComponent<import('react
 declare const TableCell: import('react').ForwardRefExoticComponent<import('react').TdHTMLAttributes<HTMLTableCellElement> & VariantProps<(props?: ({
     padding?: "none" | "default" | null | undefined;
     expandablePosition?: "none" | "bottom" | "top" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string> & import('react').RefAttributes<HTMLTableCellElement>>;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string> & {
+    isFirst?: boolean;
+    isLast?: boolean;
+} & import('react').RefAttributes<HTMLTableCellElement>>;
 export { Table, TableHeader, TableBody, TableHead, TableRow, TableCell };
 //# sourceMappingURL=Table.d.ts.map

package/dist/components/ExpandableTable/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandableTable/Table.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,KAAK,+IAST,CAAA;AAGF,QAAA,MAAM,WAAW,6JAKf,CAAA;AAGF,QAAA,MAAM,SAAS,6JAKb,CAAA;AAoBF,QAAA,MAAM,QAAQ;;;wBAIY,OAAO;gBACf,MAAM;iBACL,OAAO;uDAoCzB,CAAA;AAGD,QAAA,MAAM,SAAS,yJAkBb,CAAA;AAqBF,QAAA,MAAM,SAAS;;;sIAab,CAAA;AAGF,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAA"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandableTable/Table.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,KAAK,+IAST,CAAA;AAGF,QAAA,MAAM,WAAW,6JAKf,CAAA;AAGF,QAAA,MAAM,SAAS,6JAKb,CAAA;AAgBF,QAAA,MAAM,QAAQ;;;wBAIY,OAAO;gBACf,MAAM;iBACL,OAAO;uDAkCzB,CAAA;AAGD,QAAA,MAAM,SAAS,yJAkBb,CAAA;AAwBF,QAAA,MAAM,SAAS;;;;cAIC,OAAO;aACR,OAAO;wDA6BrB,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAA"}

package/dist/components/ExpandableTable/Table.js

@@ -1,77 +1,68 @@
-import { jsx as t, jsxs as p, Fragment as c } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-import { cva as s } from "class-variance-authority";
-import { typographyVariants as f } from "../Typography/Typography.js";
-import { cn as o } from "../../utils/cn.js";
-const m = n(({ className: a, ...r }, e) => /* @__PURE__ */ t(
+import { jsx as o, jsxs as p, Fragment as m } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+import { cva as c } from "class-variance-authority";
+import { typographyVariants as i } from "../Typography/Typography.js";
+import { cn as d } from "../../utils/cn.js";
+const u = t(({ className: a, ...r }, e) => /* @__PURE__ */ o(
   "table",
   {
     ref: e,
-    className: o("w-full border-separate border-spacing-0", a),
+    className: d("w-full border-separate border-spacing-0", a),
     ...r
   }
 ));
-m.displayName = "Table";
-const u = n(({ className: a, ...r }, e) => /* @__PURE__ */ t("thead", { ref: e, className: a, ...r }));
-u.displayName = "TableHeader";
-const x = n(({ className: a, ...r }, e) => /* @__PURE__ */ t("tbody", { ref: e, className: a, ...r }));
-x.displayName = "TableBody";
-const y = s(
-  "relative isolate after:pointer-events-none after:absolute after:inset-0 after:z-[-1] after:border-1 after:border-stroke-base-secondary after:bg-surface-base-secondary after:transition-all",
-  {
-    variants: {
-      expandablePosition: {
-        none: "after:rounded-xl",
-        top: "after:rounded-tl-xl after:rounded-tr-xl after:rounded-br-none after:rounded-bl-none after:border-b-0",
-        bottom: "after:rounded-tl-none after:rounded-tr-none after:rounded-br-xl after:rounded-bl-xl after:border-t-0"
-      }
-    },
-    defaultVariants: {
-      expandablePosition: "none"
+u.displayName = "Table";
+const y = t(({ className: a, ...r }, e) => /* @__PURE__ */ o("thead", { ref: e, className: a, ...r }));
+y.displayName = "TableHeader";
+const f = t(({ className: a, ...r }, e) => /* @__PURE__ */ o("tbody", { ref: e, className: a, ...r }));
+f.displayName = "TableBody";
+const h = c("", {
+  variants: {
+    expandablePosition: {
+      none: "",
+      top: "",
+      bottom: ""
     }
+  },
+  defaultVariants: {
+    expandablePosition: "none"
   }
-), N = n(
+}), x = t(
   ({
     className: a,
     hideBottomSpacing: r,
     colNumber: e,
-    expandablePosition: d,
-    isExpanded: l,
-    ...b
-  }, i) => /* @__PURE__ */ p(c, { children: [
-    /* @__PURE__ */ t(
+    expandablePosition: l,
+    isExpanded: n,
+    ...s
+  }, b) => /* @__PURE__ */ p(m, { children: [
+    /* @__PURE__ */ o(
       "tr",
       {
-        ref: i,
-        className: o(y({ expandablePosition: d }), a),
-        ...b
+        ref: b,
+        className: d(h({ expandablePosition: l }), a),
+        ...s
       }
     ),
-    /* @__PURE__ */ t(
+    /* @__PURE__ */ o("tr", { className: d("h-md bg-transparent", { hidden: r }), children: /* @__PURE__ */ o("td", { colSpan: e }) }),
+    /* @__PURE__ */ o(
       "tr",
       {
-        className: o("h-md bg-transparent", { collapse: r }),
-        children: /* @__PURE__ */ t("td", { colSpan: e })
-      }
-    ),
-    /* @__PURE__ */ t(
-      "tr",
-      {
-        className: o("bg-surface-base-secondary", {
-          collapse: !l
+        className: d("bg-surface-base-secondary", {
+          collapse: !n
         }),
-        children: /* @__PURE__ */ t("td", { colSpan: e, className: "h-0 px-comp-table-p", children: /* @__PURE__ */ t("div", { className: "border-t-1 border-stroke-base-secondary" }) })
+        children: /* @__PURE__ */ o("td", { colSpan: e, className: "h-0 px-comp-table-p", children: /* @__PURE__ */ o("div", { className: "border-t-1 border-stroke-base-secondary" }) })
       }
     )
   ] })
 );
-N.displayName = "TableRow";
-const h = n(({ className: a, ...r }, e) => /* @__PURE__ */ t(
+x.displayName = "TableRow";
+const N = t(({ className: a, ...r }, e) => /* @__PURE__ */ o(
   "th",
   {
     ref: e,
-    className: o(
-      f({
+    className: d(
+      i({
         size: "sm",
         uppercase: !0,
         variant: "body",
@@ -83,40 +74,53 @@ const h = n(({ className: a, ...r }, e) => /* @__PURE__ */ t(
     ...r
   }
 ));
-h.displayName = "TableHead";
-const T = s("h-comp-table-h transition-colors", {
-  variants: {
-    padding: {
-      default: "px-comp-table-p",
-      none: "p-0"
+N.displayName = "TableHead";
+const T = c(
+  "h-comp-table-h border-y-1 border-stroke-base-secondary bg-surface-base-secondary transition-colors",
+  {
+    variants: {
+      padding: {
+        default: "px-comp-table-p",
+        none: "p-0"
+      },
+      expandablePosition: {
+        none: "",
+        top: "border-b-0",
+        bottom: "border-t-0"
+      }
     },
-    expandablePosition: {
-      none: "",
-      top: "rounded-tl-none rounded-tr-none rounded-br-none rounded-bl-none",
-      bottom: "rounded-tl-none rounded-tr-none rounded-br-xl rounded-bl-xl"
+    defaultVariants: {
+      padding: "default",
+      expandablePosition: "none"
     }
-  },
-  defaultVariants: {
-    padding: "default",
-    expandablePosition: "none"
   }
-}), g = n(({ className: a, padding: r, expandablePosition: e, ...d }, l) => /* @__PURE__ */ t(
-  "td",
-  {
-    ref: l,
-    className: o(
-      T({ padding: r, expandablePosition: e }),
-      a
-    ),
-    ...d
-  }
-));
+), g = t(
+  ({ className: a, padding: r, expandablePosition: e, isFirst: l, isLast: n, ...s }, b) => /* @__PURE__ */ o(
+    "td",
+    {
+      ref: b,
+      className: d(
+        T({ padding: r, expandablePosition: e }),
+        {
+          "rounded-l-xl border-l-1": l && e === "none",
+          "rounded-tl-xl rounded-bl-none border-l-1": l && e === "top",
+          "rounded-tl-none rounded-bl-xl border-l-1": l && e === "bottom",
+          "rounded-r-xl border-r-1": n && e === "none",
+          "rounded-tr-xl rounded-br-none border-r-1": n && e === "top",
+          "rounded-tr-none rounded-br-xl border-r-1": n && e === "bottom"
+        },
+        a
+      ),
+      ...s
+    }
+  )
+);
 g.displayName = "TableCell";
 export {
-  m as Table,
-  x as TableBody,
+  u as Table,
+  f as TableBody,
   g as TableCell,
-  h as TableHead,
-  u as TableHeader,
-  N as TableRow
+  N as TableHead,
+  y as TableHeader,
+  x as TableRow
 };

package/dist/components/Loader/Loader.js

@@ -1,5 +1,5 @@
-import { jsxs as e, jsx as C } from "react/jsx-runtime";
-const i = ({ ...t }) => /* @__PURE__ */ e(
+import { jsxs as t, jsx as C } from "react/jsx-runtime";
+const a = ({ ...r }) => /* @__PURE__ */ t(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -7,20 +7,20 @@ const i = ({ ...t }) => /* @__PURE__ */ e(
     height: "64",
     viewBox: "0 0 64 64",
     fill: "none",
-    ...t,
+    ...r,
     children: [
       /* @__PURE__ */ C(
         "path",
         {
           d: "M60 32C60 47.464 47.464 60 32 60C16.536 60 4 47.464 4 32C4 16.536 16.536 4 32 4C47.464 4 60 16.536 60 32ZM7.92 32C7.92 45.299 18.701 56.08 32 56.08C45.299 56.08 56.08 45.299 56.08 32C56.08 18.701 45.299 7.92 32 7.92C18.701 7.92 7.92 18.701 7.92 32Z",
-          fill: "#F1E9F8"
+          className: "fill-surface-brand-brand-tertiary"
         }
       ),
       /* @__PURE__ */ C(
         "path",
         {
           d: "M58.04 32C59.1225 32 60.0071 32.8786 59.9314 33.9585C59.6537 37.9197 58.5358 41.7845 56.6436 45.2927C54.4405 49.3769 51.2569 52.8496 47.379 55.3985C43.501 57.9473 39.0504 59.4923 34.4273 59.8946C29.8042 60.2969 25.1536 59.5438 20.8937 57.7031C16.6338 55.8624 12.8982 52.9918 10.0228 49.3495C7.14743 45.7071 5.2224 41.4072 4.42085 36.8364C3.6193 32.2655 3.96636 27.5672 5.43083 23.1637C6.68871 19.3815 8.73708 15.9188 11.4314 13.0017C12.1659 12.2065 13.412 12.2486 14.1539 13.0369C14.8958 13.8252 14.8514 15.0606 14.126 15.8641C11.9 18.3299 10.2033 21.2352 9.15052 24.4008C7.89107 28.1878 7.5926 32.2284 8.28193 36.1593C8.97126 40.0902 10.6268 43.7881 13.0996 46.9205C15.5725 50.053 18.7851 52.5217 22.4486 54.1047C26.1121 55.6877 30.1116 56.3353 34.0875 55.9893C38.0634 55.6434 41.8909 54.3147 45.2259 52.1227C48.5609 49.9307 51.2988 46.9442 53.1935 43.4317C54.7772 40.4955 55.7302 37.2688 56.0003 33.9579C56.0883 32.879 56.9575 32 58.04 32Z",
-          fill: "#5F1EB4",
+          className: "fill-surface-brand-primary",
           children: /* @__PURE__ */ C(
             "animateTransform",
             {
@@ -39,5 +39,5 @@ const i = ({ ...t }) => /* @__PURE__ */ e(
   }
 );
 export {
-  i as Loader
+  a as Loader
 };