tcce-design-system 0.1.2 → 0.1.4

package/dist/tcce-design-system-components.js

@@ -1328,7 +1328,7 @@ const Sa = {
     ${({ size: t = 24 }) => Sa[t]}
     margin: 0;
     color: ${({ color: t }) => t || "var(--color-main-blue-primary)"};
-`, Yy = k.h2`
+`, Gy = k.h2`
     ${({ size: t = 24 }) => Yu[t]}
     margin: 0;
     color: ${({ color: t }) => t || "var(--color-main-blue-primary)"};
@@ -6293,7 +6293,7 @@ const Ap = {
     ${Sa[30]}
     color: var(--color-main-blue-primary);
     margin: 0;
-`, Xy = ({ message: t = "Loading...", color: e = "primary", variant: n = "rotate" }) => /* @__PURE__ */ R(Np, { role: "status", "aria-live": "polite", children: [
+`, qy = ({ message: t = "Loading...", color: e = "primary", variant: n = "rotate" }) => /* @__PURE__ */ R(Np, { role: "status", "aria-live": "polite", children: [
   /* @__PURE__ */ p(Lp, { children: /* @__PURE__ */ p(
     _i,
     {
@@ -6311,7 +6311,7 @@ const Ap = {
     align-items: center;
     justify-content: center;
     padding: 3rem 1rem;
-`, qy = ({ message: t, color: e = "primary", variant: n = "rotate" }) => /* @__PURE__ */ p(Op, { role: "status", "aria-live": "polite", children: /* @__PURE__ */ p(
+`, Zy = ({ message: t, color: e = "primary", variant: n = "rotate" }) => /* @__PURE__ */ p(Op, { role: "status", "aria-live": "polite", children: /* @__PURE__ */ p(
   _i,
   {
     size: "lg",
@@ -6695,8 +6695,7 @@ const vt = new tg(), eg = (t, e) => {
     ...e,
     id: n
   }), n;
-}, ng = (t) => t && typeof t == "object" && "ok" in t && typeof t.ok == "boolean" && "status" in t && typeof t.status == "number", rg = eg, ig = () => vt.toasts, og = () => vt.getActiveToasts();
-Object.assign(rg, {
+}, ng = (t) => t && typeof t == "object" && "ok" in t && typeof t.ok == "boolean" && "status" in t && typeof t.status == "number", rg = eg, ig = () => vt.toasts, og = () => vt.getActiveToasts(), Jy = Object.assign(rg, {
   success: vt.success,
   info: vt.info,
   warning: vt.warning,
@@ -7175,7 +7174,7 @@ const gg = /* @__PURE__ */ x.forwardRef(function(e, n) {
       });
     })) : null;
   }));
-}), Zy = () => /* @__PURE__ */ p(
+}), Qy = ({ spinnerColor: t = "orange", ...e }) => /* @__PURE__ */ p(
   gg,
   {
     position: "bottom-center",
@@ -7189,8 +7188,9 @@ const gg = /* @__PURE__ */ x.forwardRef(function(e, n) {
       className: "my-toast"
     },
     icons: {
-      loading: /* @__PURE__ */ p(jp, { color: "orange" })
-    }
+      loading: /* @__PURE__ */ p(jp, { color: t })
+    },
+    ...e
   }
 ), yg = {
   elevated: P`
@@ -7200,7 +7200,6 @@ const gg = /* @__PURE__ */ x.forwardRef(function(e, n) {
 
         &:hover {
             box-shadow: var(--shadow-hover-black-card);
-            background-color: var(--color-main-alternative-secondary);
         }
     `,
   flat: P`
@@ -7278,7 +7277,7 @@ const gg = /* @__PURE__ */ x.forwardRef(function(e, n) {
     ${({ $clickable: t }) => t && bg}
     ${({ $disabled: t }) => t && xg}
     ${({ $size: t }) => vg[t]}
-`, Jy = ({
+`, tv = ({
   variant: t = "elevated",
   size: e = "md",
   disabled: n = !1,
@@ -7311,14 +7310,14 @@ const gg = /* @__PURE__ */ x.forwardRef(function(e, n) {
     align-items: center;
     align-self: stretch;
     gap: 0.5rem;
-`, Qy = ({
+`, ev = ({
   children: t,
   ...e
 }) => /* @__PURE__ */ p(Sg, { ...e, children: t }), Tg = k.div`
     flex: 1;
     display: flex;
     flex-direction: column;
-`, tv = ({
+`, nv = ({
   children: t,
   ...e
 }) => /* @__PURE__ */ p(Tg, { ...e, children: t }), Cg = k.div`
@@ -7326,7 +7325,7 @@ const gg = /* @__PURE__ */ x.forwardRef(function(e, n) {
     align-items: center;
     align-self: stretch;
     gap: 0.5rem;
-`, ev = ({
+`, rv = ({
   children: t,
   ...e
 }) => /* @__PURE__ */ p(Cg, { ...e, children: t }), kg = {
@@ -7408,7 +7407,7 @@ const gg = /* @__PURE__ */ x.forwardRef(function(e, n) {
   "checkbox",
   "radio",
   "pin"
-], nv = (t) => t.map((e) => ({
+], iv = (t) => t.map((e) => ({
   name: e.name || "",
   label: e.label || "",
   type: $g.includes(e.type) ? e.type : "text",
@@ -7422,10 +7421,10 @@ const gg = /* @__PURE__ */ x.forwardRef(function(e, n) {
   pinLength: e.pinLength || 6,
   pinType: e.pinType || "number",
   rows: e.rows || 4
-})), rv = (t) => t.map((e) => ({
+})), ov = (t) => t.map((e) => ({
   value: e.value,
   label: e.label
-})), iv = {
+})), sv = {
   /**
    * Creates a text input field configuration
    */
@@ -7513,7 +7512,7 @@ const gg = /* @__PURE__ */ x.forwardRef(function(e, n) {
     },
     ...r
   })
-}, ov = (t, e, n, r, i, s, o, a) => {
+}, av = (t, e, n, r, i, s, o, a) => {
   const { field: l, ...u } = e, d = {
     ...l,
     ...u,
@@ -8508,7 +8507,7 @@ const S0 = (t, e, n, r, i, s, o = "text", a, l) => {
   i[f].current?.focus();
   const m = c.join("");
   c.every((y) => y !== "") && c.length >= d && l?.(m);
-}, k0 = (t) => Array(t).fill(null).map(() => x.createRef()), sv = (t, e, n = "text") => !(t.length !== e || n === "number" && !/^\d+$/.test(t)), P0 = k.div`
+}, k0 = (t) => Array(t).fill(null).map(() => x.createRef()), lv = (t, e, n = "text") => !(t.length !== e || n === "number" && !/^\d+$/.test(t)), P0 = k.div`
     display: flex;
     gap: 8px;
     align-items: center;
@@ -8571,6 +8570,7 @@ const A0 = k.div`
     cursor: pointer;
     opacity: 0;
     border: 2px solid transparent;
+    z-index: 10;
 
     &:disabled {
         cursor: not-allowed;
@@ -8596,10 +8596,6 @@ const A0 = k.div`
     outline: 2px solid transparent;
     outline-offset: 2px;
 
-    &:hover {
-        border-color: var(--color-main-orange-primary);
-    }
-
     ${({ $hasError: t }) => t && `
       border-color: var(--color-main-warning-state);
     `}
@@ -8724,7 +8720,7 @@ const Hs = k.div`
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
-`, av = ({
+`, cv = ({
   id: t,
   name: e,
   label: n,
@@ -9267,7 +9263,7 @@ const Hs = k.div`
     ...o,
     children: i
   }
-), lv = ({
+), uv = ({
   isOpen: t,
   onAccept: e,
   onCancel: n,
@@ -9521,12 +9517,7 @@ const Hs = k.div`
     display: flex;
     align-items: center;
     gap: 0.5rem;
-`, iy = k.img`
-    display: block;
-    height: 4.375rem;
-    width: auto;
-    object-fit: contain;
-`, oy = k.nav`
+`, iy = k.nav`
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
@@ -9534,7 +9525,7 @@ const Hs = k.div`
     flex: 1;
     overflow-y: auto;
     padding: 0.25rem 0;
-`, sy = k.button`
+`, oy = k.button`
     display: flex;
     align-items: center;
     justify-content: center;
@@ -9560,7 +9551,7 @@ const Hs = k.div`
     @media (max-width: 767px) {
         display: none;
     }
-`, ay = k.button`
+`, sy = k.button`
     position: fixed;
     top: 0.5rem;
     left: 1rem;
@@ -9577,8 +9568,8 @@ const Hs = k.div`
   onNavigate: n = () => {
   },
   activePath: r,
-  logoImgSrc: i,
-  logoImgCollapse: s
+  logoImgExpanded: i,
+  logoImgCollapsed: s
 }) => {
   const { isCollapsed: o, setIsCollapsed: a, isMobileOpen: l, setIsMobileOpen: u } = mc(), d = (c) => {
     n(c), typeof window < "u" && window.innerWidth < 768 && u(!1);
@@ -9587,16 +9578,9 @@ const Hs = k.div`
     /* @__PURE__ */ p(qn, { children: l && /* @__PURE__ */ p(ty, { ...hc, onClick: () => u(!1) }) }),
     /* @__PURE__ */ R(ey, { $collapsed: l ? !1 : o, $open: l, children: [
       /* @__PURE__ */ R(ny, { $collapsed: o, children: [
-        /* @__PURE__ */ p(ry, { children: /* @__PURE__ */ p(
-          iy,
-          {
-            $collapsed: o,
-            src: o ? s : i,
-            alt: "Total Civil Construction"
-          }
-        ) }),
+        /* @__PURE__ */ p(ry, { children: o ? s : i }),
         /* @__PURE__ */ p(
-          sy,
+          oy,
           {
             onClick: () => a(!o),
             "aria-label": "Toggle collapse",
@@ -9611,7 +9595,7 @@ const Hs = k.div`
           }
         )
       ] }),
-      /* @__PURE__ */ p(oy, { children: t.map((c) => /* @__PURE__ */ p(
+      /* @__PURE__ */ p(iy, { children: t.map((c) => /* @__PURE__ */ p(
         pc,
         {
           item: c,
@@ -9623,7 +9607,7 @@ const Hs = k.div`
       )) })
     ] }),
     /* @__PURE__ */ p(
-      ay,
+      sy,
       {
         onClick: () => {
           u(!0), a(!1);
@@ -9635,7 +9619,7 @@ const Hs = k.div`
   ] });
 };
 gc.displayName = "Sidebar";
-const ly = {
+const ay = {
   underlined: P`
         color: var(--color-main-orange-primary);
         text-decoration-thickness: 1px;
@@ -9698,7 +9682,7 @@ const ly = {
             text-underline-offset: 2px;
         }
     `
-}, cy = P`
+}, ly = P`
     color: var(--color-dark-200);
     cursor: not-allowed;
     pointer-events: none;
@@ -9716,7 +9700,7 @@ const ly = {
         text-decoration: none;
         transform: none;
     }
-`, uy = {
+`, cy = {
   sm: P`
         gap: 0.25rem;
         ${z[14]}
@@ -9729,7 +9713,7 @@ const ly = {
         gap: 0.75rem;
         ${z[20]}
     `
-}, dy = k.a`
+}, uy = k.a`
     display: inline-flex;
     align-items: center;
     border-radius: 0.25rem;
@@ -9741,10 +9725,10 @@ const ly = {
 
     cursor: pointer;
 
-    ${({ $size: t }) => uy[t]}
-    ${({ $variant: t }) => ly[t]}
-    ${({ $disabled: t }) => t && cy}
-`, hy = k.span`
+    ${({ $size: t }) => cy[t]}
+    ${({ $variant: t }) => ay[t]}
+    ${({ $disabled: t }) => t && ly}
+`, dy = k.span`
     flex: 1 1 auto;
     min-width: 0;
     max-width: 18ch;
@@ -9753,7 +9737,7 @@ const ly = {
             text-overflow: ellipsis;
             white-space: nowrap;
         `}
-`, fy = zt(
+`, hy = zt(
   ({
     id: t,
     size: e = "md",
@@ -9796,7 +9780,7 @@ const ly = {
       ...w
     };
     return /* @__PURE__ */ R(
-      dy,
+      uy,
       {
         id: t,
         $variant: n,
@@ -9807,7 +9791,7 @@ const ly = {
         ...T,
         children: [
           d && /* @__PURE__ */ p(q, { component: d, size: h, color: f }),
-          /* @__PURE__ */ p(hy, { $truncate: m, children: r }),
+          /* @__PURE__ */ p(dy, { $truncate: m, children: r }),
           /* @__PURE__ */ p(
             q,
             {
@@ -9821,15 +9805,23 @@ const ly = {
     );
   }
 );
-fy.displayName = "Link";
-const my = {
+hy.displayName = "Link";
+const fy = {
   default: P`
         thead tr:last-child th:first-child {
-            border-radius: var(--border-radius-article) 0 0 0;
+            border-top-left-radius: var(--border-radius-article);
         }
 
         thead tr:last-child th:last-child {
-            border-radius: 0 var(--border-radius-article) 0 0;
+            border-top-right-radius: var(--border-radius-article);
+        }
+
+        tbody tr:last-child td:first-child {
+            border-bottom-left-radius: var(--border-radius-article);
+        }
+
+        tbody tr:last-child td:last-child {
+            border-bottom-right-radius: var(--border-radius-article);
         }
     `,
   striped: P`
@@ -9849,12 +9841,20 @@ const my = {
         thead tr:last-child th:last-child {
             border-radius: 0 var(--border-radius-article) 0 0;
         }
+
+        tbody tr:last-child td:first-child {
+            border-bottom-left-radius: var(--border-radius-article);
+        }
+
+        tbody tr:last-child td:last-child {
+            border-bottom-right-radius: var(--border-radius-article);
+        }
     `
-}, py = P`
+}, my = P`
     tbody tr:hover td {
         background-color: var(--color-main-alternative-secondary);
     }
-`, gy = P`
+`, py = P`
     @media (max-width: 768px) {
         font-size: 0.875rem;
 
@@ -9886,7 +9886,7 @@ const my = {
     display: inline-flex;
     align-items: center;
     flex-shrink: 0;
-`, yy = {
+`, gy = {
   sm: P`
         ${De.sm}
         ${z[16]}
@@ -9899,20 +9899,13 @@ const my = {
         ${De.lg}
         ${z[24]}
     `
-}, vy = k.th`
+}, yy = k.th`
     background-color: var(--color-main-blue-primary);
-    ${({ $size: t }) => yy[t]}
+    ${({ $size: t }) => gy[t]}
     transition: background-color 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.3s ease-out;
     min-width: 8rem;
     width: ${({ $width: t }) => t ? typeof t == "number" ? `${t}px` : t : "fit-content"};
 
-    ${({ $sticky: t }) => t && P`
-            position: sticky;
-            top: 0;
-            z-index: 10;
-            box-shadow: var(--shadow-black-card);
-        `}
-
     &:hover {
         background-color: var(--color-purple-600);
     }
@@ -9920,10 +9913,10 @@ const my = {
     ${({ $active: t }) => t && P`
             background-color: var(--color-blue-400);
         `}
-`, by = k.div`
+`, vy = k.div`
     ${yc}
     justify-content: ${({ $align: t }) => t || "space-between"};
-`, xy = k.button`
+`, by = k.button`
     all: unset;
     display: inline-flex;
     align-items: center;
@@ -9942,7 +9935,7 @@ const my = {
         outline-color: var(--color-main-white);
         outline-offset: 2px;
     }
-`, wy = k.span`
+`, xy = k.span`
     transition: transform 0.3s ease-out;
     display: inline-flex;
     transform: ${({ $dir: t }) => t === "asc" ? "rotate(-180deg)" : "none"};
@@ -9955,7 +9948,7 @@ const my = {
     text-overflow: ellipsis;
     white-space: nowrap;
     flex-shrink: 1;
-`, Sy = k(si)`
+`, wy = k(si)`
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -9973,36 +9966,34 @@ const my = {
   rightIcon: s,
   iconSize: o = "sm",
   iconColor: a = "var(--color-main-white)",
-  sticky: l = !1,
-  align: u = "left",
-  width: d,
-  sortable: c,
-  className: h,
-  onSort: f,
-  ...m
+  align: l = "left",
+  width: u,
+  sortable: d,
+  className: c,
+  onSort: h,
+  ...f
 }) => {
-  const y = r === "asc" ? "desc" : "asc";
+  const m = r === "asc" ? "desc" : "asc";
   return /* @__PURE__ */ p(
-    vy,
+    yy,
     {
       $size: e,
       $active: n,
-      $width: d,
-      $sticky: l,
-      className: h,
+      $width: u,
+      className: c,
       scope: "col",
-      "aria-sort": f ? r === "none" ? "none" : r === "asc" ? "ascending" : "descending" : void 0,
-      ...m,
-      children: f || c ? /* @__PURE__ */ R(xy, { onClick: () => f?.(y), "aria-label": `Sort ${y}`, children: [
+      "aria-sort": h ? r === "none" ? "none" : r === "asc" ? "ascending" : "descending" : void 0,
+      ...f,
+      children: h || d ? /* @__PURE__ */ R(by, { onClick: () => h?.(m), "aria-label": `Sort ${m}`, children: [
         /* @__PURE__ */ R(Ws, { children: [
           i && /* @__PURE__ */ p(q, { component: i, size: o, color: a }),
-          /* @__PURE__ */ p(Sy, { size: e === "sm" ? 16 : e === "md" ? 20 : 24, children: t })
+          /* @__PURE__ */ p(wy, { size: e === "sm" ? 16 : e === "md" ? 20 : 24, children: t })
         ] }),
         /* @__PURE__ */ R(Ks, { children: [
-          /* @__PURE__ */ p(wy, { $dir: r, children: /* @__PURE__ */ p(q, { component: Ig, size: o, color: a }) }),
+          /* @__PURE__ */ p(xy, { $dir: r, children: /* @__PURE__ */ p(q, { component: Ig, size: o, color: a }) }),
           s && /* @__PURE__ */ p(q, { component: s, size: o, color: a })
         ] })
-      ] }) : /* @__PURE__ */ R(by, { $align: u, children: [
+      ] }) : /* @__PURE__ */ R(vy, { $align: l, children: [
         /* @__PURE__ */ R(Ws, { children: [
           i && /* @__PURE__ */ p(q, { component: i, size: o, color: a }),
           /* @__PURE__ */ p(
@@ -10026,7 +10017,7 @@ const my = {
   );
 };
 bc.displayName = "TableHeaderCell";
-const Ty = {
+const Sy = {
   sm: P`
         ${De.sm}
         ${z[14]}
@@ -10039,10 +10030,10 @@ const Ty = {
         ${De.lg}
         ${z[16]}
     `
-}, Cy = k.td`
+}, Ty = k.td`
     vertical-align: middle;
     color: var(--color-main-blue-primary);
-    ${({ $size: t }) => Ty[t]}
+    ${({ $size: t }) => Sy[t]}
     text-align: ${({ $align: t, $variant: e }) => t || (e === "numeric" ? "right" : "left")};
     border-left: 1px solid var(--color-main-light-borders);
     border-top: 1px solid var(--color-main-light-borders);
@@ -10060,10 +10051,10 @@ const Ty = {
             font-variant-numeric: tabular-nums;
             font-family: ui-monospace, monospace;
         `}
-`, ky = k.div`
+`, Cy = k.div`
     ${yc}
     justify-content: ${({ $align: t }) => t === "center" ? "center" : t === "right" ? "flex-end" : "flex-start"};
-`, Py = k(ai)`
+`, ky = k(ai)`
     flex: 1;
     min-width: 0;
 `, Ys = k.span`
@@ -10082,7 +10073,7 @@ const Ty = {
   iconColor: d = "var(--color-main-blue-primary)",
   ...c
 }) => /* @__PURE__ */ p(
-  Cy,
+  Ty,
   {
     $size: e,
     $align: n,
@@ -10091,86 +10082,106 @@ const Ty = {
     $variant: s,
     className: o,
     ...c,
-    children: a || l ? /* @__PURE__ */ R(ky, { $align: n, children: [
+    children: a || l ? /* @__PURE__ */ R(Cy, { $align: n, children: [
       a && /* @__PURE__ */ p(Ys, { children: /* @__PURE__ */ p(q, { component: a, size: u, color: d }) }),
-      /* @__PURE__ */ p(Py, { children: t }),
+      /* @__PURE__ */ p(ky, { children: t }),
       l && /* @__PURE__ */ p(Ys, { children: /* @__PURE__ */ p(q, { component: l, size: u, color: d }) })
     ] }) : t
   }
 );
 xc.displayName = "TableCell";
-const Ay = k.table`
-    width: fit-content;
+const Py = k.table`
+    width: 100%;
     table-layout: auto;
     border-collapse: separate;
     border-spacing: 0;
     overflow: visible;
-    box-shadow: var(--shadow-black-card);
     border-radius: var(--border-radius-article);
     border: 1px solid var(--color-main-light-borders);
 
-    ${({ $variant: t }) => my[t]}
-    ${gy}
+    ${({ $variant: t }) => fy[t]}
     ${py}
-`, Ey = ({
+    ${my}
+`, Ay = k.thead`
+    ${({ $sticky: t }) => t && P`
+            position: sticky;
+            top: 0;
+            z-index: 10;
+        `}
+`, Ey = k.div`
+    max-height: 37.5rem;
+    overflow: auto;
+    position: relative;
+    border-radius: var(--border-radius-article);
+    box-shadow: var(--shadow-black-card);
+
+    &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border-radius: 20px;
+        pointer-events: none;
+        z-index: 3;
+    }
+`, Dy = ({
   columns: t,
   rows: e,
   size: n = "md",
   variant: r = "default",
-  className: i,
-  stickyHeader: s = !1,
-  onSortChange: o
+  tableWrapperClassName: i,
+  tableClassName: s,
+  stickyHeader: o = !1,
+  onSortChange: a
 }) => {
-  const a = (l, u) => (d) => {
-    l.onSort?.(d), o?.({ columnId: l.id ?? String(u), direction: d });
+  const l = (u, d) => (c) => {
+    u.onSort?.(c), a?.({ columnId: u.id ?? String(d), direction: c });
   };
-  return /* @__PURE__ */ R(Ay, { $variant: r, className: i, children: [
-    /* @__PURE__ */ p("thead", { children: /* @__PURE__ */ p("tr", { children: t.map((l, u) => /* @__PURE__ */ p(
+  return /* @__PURE__ */ p(Ey, { className: i, children: /* @__PURE__ */ R(Py, { $variant: r, className: s, children: [
+    /* @__PURE__ */ p(Ay, { $sticky: o, children: /* @__PURE__ */ p("tr", { children: t.map((u, d) => /* @__PURE__ */ p(
       bc,
       {
         size: n,
-        leftIcon: l.leftIcon,
-        rightIcon: l.rightIcon,
-        iconSize: l.iconSize,
-        iconColor: l.iconColor,
-        sortDirection: l.sortDirection,
-        onSort: l.onSort ?? (o ? a(l, u) : void 0),
-        sticky: s || l.stickyHeader,
-        width: l.width,
-        align: l.align,
-        sortable: l.sortable || !!l.onSort || !!o,
-        className: l.className,
-        children: l.header
+        leftIcon: u.leftIcon,
+        rightIcon: u.rightIcon,
+        iconSize: u.iconSize,
+        iconColor: u.iconColor,
+        sortDirection: u.sortDirection,
+        onSort: u.onSort ?? (a ? l(u, d) : void 0),
+        width: u.width,
+        align: u.align,
+        sortable: u.sortable || !!u.onSort || !!a,
+        className: u.className,
+        children: u.header
       },
-      l.id || `col-${u}`
+      u.id || `col-${d}`
     )) }) }),
-    /* @__PURE__ */ p("tbody", { children: e.map((l, u) => {
-      const d = l.cells;
-      return !d || !Array.isArray(d) ? null : /* @__PURE__ */ p("tr", { children: d.map((c, h) => {
-        const f = t[h];
+    /* @__PURE__ */ p("tbody", { children: e.map((u, d) => {
+      const c = u.cells;
+      return !c || !Array.isArray(c) ? null : /* @__PURE__ */ p("tr", { children: c.map((h, f) => {
+        const m = t[f];
         return /* @__PURE__ */ p(
           xc,
           {
-            size: c.size || l.size || n,
-            align: c.align || l.align || f?.align,
-            width: c.width || l.width || f?.width,
-            truncate: c.truncate || l.truncate,
-            variant: c.variant || l.variant,
-            className: c.className || l.className || f?.className,
-            leftIcon: c.leftIcon,
-            rightIcon: c.rightIcon,
-            iconSize: c.iconSize,
-            iconColor: c.iconColor,
-            children: c.content
+            size: h.size || u.size || n,
+            align: h.align || u.align || m?.align,
+            width: h.width || u.width || m?.width,
+            truncate: h.truncate || u.truncate,
+            variant: h.variant || u.variant,
+            className: h.className || u.className || m?.className,
+            leftIcon: h.leftIcon,
+            rightIcon: h.rightIcon,
+            iconSize: h.iconSize,
+            iconColor: h.iconColor,
+            children: h.content
           },
-          `${l.id || u}-${h}`
+          `${u.id || d}-${f}`
         );
-      }) }, l.id || u);
+      }) }, u.id || d);
     }) })
-  ] });
+  ] }) });
 };
-Ey.displayName = "Table";
-const Dy = k.header`
+Dy.displayName = "Table";
+const $y = k.header`
     position: fixed;
     top: 0;
     left: 0;
@@ -10189,15 +10200,15 @@ const Dy = k.header`
     @media (min-width: 768px) {
         padding-left: ${({ $sidebarCollapsed: t }) => t ? "6rem" : "17rem"};
     }
-`, $y = k.div`
+`, My = k.div`
     display: flex;
     align-items: center;
     gap: 1rem;
-`, My = k.div`
+`, Vy = k.div`
     display: flex;
     align-items: center;
     gap: 1rem;
-`, Vy = k.button`
+`, Ry = k.button`
     position: relative;
     display: flex;
     align-items: center;
@@ -10221,7 +10232,7 @@ const Dy = k.header`
     &:active {
         transform: scale(0.92);
     }
-`, Ry = k.span`
+`, Iy = k.span`
     position: absolute;
     top: 0.35rem;
     right: 0.35rem;
@@ -10237,7 +10248,7 @@ const Dy = k.header`
     display: flex;
     align-items: center;
     justify-content: center;
-`, Iy = k.div`
+`, Ny = k.div`
     display: flex;
     align-items: center;
     gap: 0.75rem;
@@ -10254,7 +10265,7 @@ const Dy = k.header`
         outline: 2px solid var(--color-main-blue-primary);
         outline-offset: 2px;
     }
-`, Ny = k.div`
+`, Ly = k.div`
     width: 2rem;
     height: 2rem;
     border-radius: 50%;
@@ -10265,7 +10276,7 @@ const Dy = k.header`
     color: var(--color-main-white);
     font-weight: 600;
     font-size: 0.875rem;
-`, Ly = k.div`
+`, By = k.div`
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -10273,12 +10284,12 @@ const Dy = k.header`
     @media (max-width: 640px) {
         display: none;
     }
-`, By = k.span`
+`, Oy = k.span`
     font-weight: 600;
     font-size: 0.875rem;
     color: var(--color-main-dark-text);
     line-height: 1.2;
-`, Oy = k.span`
+`, jy = k.span`
     font-size: 0.75rem;
     color: var(--color-main-gray-text);
     line-height: 1.2;
@@ -10292,11 +10303,11 @@ const Dy = k.header`
   children: o
 }) => {
   const a = (h) => h.split(" ").map((f) => f[0]).join("").toUpperCase().slice(0, 2), l = (r ?? 0) > 0 || n, u = r && r > 0 ? r : void 0, d = u ? `${u} notification${u === 1 ? "" : "s"}` : l ? "New notifications" : "No notifications", c = `Notifications: ${d}`;
-  return /* @__PURE__ */ R(Dy, { $sidebarCollapsed: t, children: [
-    /* @__PURE__ */ p($y, { children: o }),
-    /* @__PURE__ */ R(My, { children: [
+  return /* @__PURE__ */ R($y, { $sidebarCollapsed: t, children: [
+    /* @__PURE__ */ p(My, { children: o }),
+    /* @__PURE__ */ R(Vy, { children: [
       /* @__PURE__ */ R(
-        Vy,
+        Ry,
         {
           onClick: i,
           "aria-label": c,
@@ -10311,12 +10322,12 @@ const Dy = k.header`
                 color: "var(--color-main-blue-primary)"
               }
             ),
-            l && /* @__PURE__ */ p(Ry, { $withCount: !!u, "aria-hidden": !!u, children: u && (u > 99 ? "99+" : u) })
+            l && /* @__PURE__ */ p(Iy, { $withCount: !!u, "aria-hidden": !!u, children: u && (u > 99 ? "99+" : u) })
           ]
         }
       ),
       e && /* @__PURE__ */ R(
-        Iy,
+        Ny,
         {
           onClick: s,
           role: "button",
@@ -10325,7 +10336,7 @@ const Dy = k.header`
             (h.key === "Enter" || h.key === " ") && (h.preventDefault(), s?.());
           },
           children: [
-            /* @__PURE__ */ p(Ny, { children: e.avatarUrl ? /* @__PURE__ */ p(
+            /* @__PURE__ */ p(Ly, { children: e.avatarUrl ? /* @__PURE__ */ p(
               "img",
               {
                 src: e.avatarUrl,
@@ -10333,9 +10344,9 @@ const Dy = k.header`
                 style: { width: "100%", height: "100%", borderRadius: "50%" }
               }
             ) : a(e.name) }),
-            /* @__PURE__ */ R(Ly, { children: [
-              /* @__PURE__ */ p(By, { children: e.name }),
-              /* @__PURE__ */ p(Oy, { children: e.role })
+            /* @__PURE__ */ R(By, { children: [
+              /* @__PURE__ */ p(Oy, { children: e.name }),
+              /* @__PURE__ */ p(jy, { children: e.role })
             ] })
           ]
         }
@@ -10344,12 +10355,12 @@ const Dy = k.header`
   ] });
 };
 wc.displayName = "Header";
-const jy = k.div`
+const Fy = k.div`
     display: flex;
     flex-direction: column;
     height: 100vh;
     overflow: hidden;
-`, Fy = k.main`
+`, zy = k.main`
     flex: 1;
     margin-top: 4rem;
     /* Mobile-first: no lateral offset so content occupies full width */
@@ -10365,7 +10376,7 @@ const jy = k.div`
     @media (min-width: 1200px) {
         margin-left: 5rem;
     }
-`, zy = ({
+`, _y = ({
   children: t,
   navigationConfig: e,
   userRoles: n = [],
@@ -10375,15 +10386,19 @@ const jy = k.div`
   onNavigate: o,
   onNotificationClick: a,
   onUserProfileClick: l,
-  contentClassName: u
-}) => /* @__PURE__ */ R(jy, { children: [
+  contentClassName: u,
+  logoImgCollapsed: d,
+  logoImgExpanded: c
+}) => /* @__PURE__ */ R(Fy, { children: [
   /* @__PURE__ */ p(
     gc,
     {
       navigationConfig: e,
       userRoles: n,
       onNavigate: o,
-      activePath: r
+      activePath: r,
+      logoImgCollapsed: d,
+      logoImgExpanded: c
     }
   ),
   /* @__PURE__ */ p(
@@ -10395,17 +10410,17 @@ const jy = k.div`
       onUserProfileClick: l
     }
   ),
-  /* @__PURE__ */ p(Fy, { className: u, children: t })
-] }), cv = (t) => /* @__PURE__ */ p(K0, { children: /* @__PURE__ */ p(zy, { ...t }) });
+  /* @__PURE__ */ p(zy, { className: u, children: t })
+] }), dv = (t) => /* @__PURE__ */ p(K0, { children: /* @__PURE__ */ p(_y, { ...t }) });
 export {
   $g as ALLOWED_INPUT_TYPES,
   nc as BaseInput,
   Bs as Button,
   jp as ButtonSpinner,
-  Jy as Card,
-  tv as CardBody,
-  ev as CardFooter,
-  Qy as CardHeader,
+  tv as Card,
+  nv as CardBody,
+  rv as CardFooter,
+  ev as CardHeader,
   Wi as Checkbox,
   sc as CheckboxInput,
   g0 as CheckboxLabel,
@@ -10414,16 +10429,16 @@ export {
   W0 as DialogFooter,
   z0 as DialogHeader,
   Fs as ErrorMessage,
-  av as FormField,
-  Xy as FullScreenSpinner,
+  cv as FormField,
+  qy as FullScreenSpinner,
   wc as Header,
   si as HeadingBold,
-  Yy as HeadingRegular,
+  Gy as HeadingRegular,
   q as Icon,
   er as IconWrapperStyles,
   Hi as Label,
-  cv as Layout,
-  fy as Link,
+  dv as Layout,
+  hy as Link,
   Kg as PasswordInput,
   ac as PinInput,
   lc as PinInputGroup,
@@ -10431,39 +10446,43 @@ export {
   cc as RadioInputDot,
   uc as RadioInputLabel,
   c0 as SearchInput,
-  qy as SectionSpinner,
+  Zy as SectionSpinner,
   ic as SelectInput,
   gc as Sidebar,
   fc as SidebarContext,
   K0 as SidebarProvider,
   _i as Spinner,
-  Ey as Table,
+  Dy as Table,
   xc as TableCell,
   bc as TableHeaderCell,
-  lv as TermsAndConditions,
+  uv as TermsAndConditions,
   ai as Text,
   oc as TextAreaInput,
-  Zy as ToastProvider,
+  Qy as ToastProvider,
   yc as baseContentTableStyles,
   Ue as baseFieldStyles,
   Ui as baseInputStyles,
   De as baseTableCellsSizes,
-  iv as createFieldConfig,
+  z as bodyTextStyles,
+  sv as createFieldConfig,
   k0 as createInputRefs,
   ye as disabledStyles,
   We as errorStyles,
   Mg as flushedStyles,
-  ov as getPropsForInputType,
+  av as getPropsForInputType,
   S0 as handleDigitChange,
   T0 as handleKeyDown,
   C0 as handlePaste,
   Us as hasPermission,
-  nv as normalizeFieldTypes,
-  rv as normalizeSelectOptions,
+  Sa as headingBoldStyles,
+  Yu as headingRegularStyles,
+  iv as normalizeFieldTypes,
+  ov as normalizeSelectOptions,
   tr as sizeStyles,
-  py as tableHoverMixin,
+  my as tableHoverMixin,
   vc as tableIconContainerStyles,
-  gy as tableResponsiveMixin,
-  my as tableVariants,
-  sv as validateCode
+  py as tableResponsiveMixin,
+  fy as tableVariants,
+  Jy as toast,
+  lv as validateCode
 };