tcce-design-system-test 0.3.1 → 0.3.2

package/dist/tcce-design-system-components.d.ts

@@ -830,8 +830,8 @@ export declare interface SidebarProps {
     userRoles?: string[];
     onNavigate?: (path: string) => void;
     activePath?: string;
-    logoImgSrc?: default_2.ReactNode;
-    logoImgCollapse?: default_2.ReactNode;
+    logoImgExpanded?: default_2.ReactNode;
+    logoImgCollapsed?: default_2.ReactNode;
 }
 
 export declare const SidebarProvider: ({ children }: PropsWithChildren) => JSX.Element;
@@ -935,7 +935,6 @@ export declare interface TableHeaderCellProps extends default_2.HTMLAttributes<H
     align?: 'left' | 'center' | 'right';
     width?: string | number;
     active?: boolean;
-    sticky?: boolean;
     fixed?: 'left' | 'right';
     onSort?: (direction: SortDirection) => void;
 }

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)"};
-`, Ky = 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;
-`, Gy = ({ 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;
-`, Xy = ({ 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",
@@ -7175,7 +7175,7 @@ const gg = /* @__PURE__ */ x.forwardRef(function(e, n) {
       });
     })) : null;
   }));
-}), qy = () => /* @__PURE__ */ p(
+}), Jy = () => /* @__PURE__ */ p(
   gg,
   {
     position: "bottom-center",
@@ -7277,7 +7277,7 @@ const gg = /* @__PURE__ */ x.forwardRef(function(e, n) {
     ${({ $clickable: t }) => t && bg}
     ${({ $disabled: t }) => t && xg}
     ${({ $size: t }) => vg[t]}
-`, Zy = ({
+`, Qy = ({
   variant: t = "elevated",
   size: e = "md",
   disabled: n = !1,
@@ -7310,14 +7310,14 @@ const gg = /* @__PURE__ */ x.forwardRef(function(e, n) {
     align-items: center;
     align-self: stretch;
     gap: 0.5rem;
-`, Jy = ({
+`, tv = ({
   children: t,
   ...e
 }) => /* @__PURE__ */ p(Sg, { ...e, children: t }), Tg = k.div`
     flex: 1;
     display: flex;
     flex-direction: column;
-`, Qy = ({
+`, ev = ({
   children: t,
   ...e
 }) => /* @__PURE__ */ p(Tg, { ...e, children: t }), Cg = k.div`
@@ -7325,7 +7325,7 @@ const gg = /* @__PURE__ */ x.forwardRef(function(e, n) {
     align-items: center;
     align-self: stretch;
     gap: 0.5rem;
-`, tv = ({
+`, nv = ({
   children: t,
   ...e
 }) => /* @__PURE__ */ p(Cg, { ...e, children: t }), kg = {
@@ -7407,7 +7407,7 @@ const gg = /* @__PURE__ */ x.forwardRef(function(e, n) {
   "checkbox",
   "radio",
   "pin"
-], ev = (t) => t.map((e) => ({
+], rv = (t) => t.map((e) => ({
   name: e.name || "",
   label: e.label || "",
   type: $g.includes(e.type) ? e.type : "text",
@@ -7421,10 +7421,10 @@ const gg = /* @__PURE__ */ x.forwardRef(function(e, n) {
   pinLength: e.pinLength || 6,
   pinType: e.pinType || "number",
   rows: e.rows || 4
-})), nv = (t) => t.map((e) => ({
+})), iv = (t) => t.map((e) => ({
   value: e.value,
   label: e.label
-})), rv = {
+})), ov = {
   /**
    * Creates a text input field configuration
    */
@@ -7512,7 +7512,7 @@ const gg = /* @__PURE__ */ x.forwardRef(function(e, n) {
     },
     ...r
   })
-}, iv = (t, e, n, r, i, s, o, a) => {
+}, sv = (t, e, n, r, i, s, o, a) => {
   const { field: l, ...u } = e, d = {
     ...l,
     ...u,
@@ -8507,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()), ov = (t, e, n = "text") => !(t.length !== e || n === "number" && !/^\d+$/.test(t)), P0 = k.div`
+}, k0 = (t) => Array(t).fill(null).map(() => x.createRef()), av = (t, e, n = "text") => !(t.length !== e || n === "number" && !/^\d+$/.test(t)), P0 = k.div`
     display: flex;
     gap: 8px;
     align-items: center;
@@ -8570,6 +8570,7 @@ const A0 = k.div`
     cursor: pointer;
     opacity: 0;
     border: 2px solid transparent;
+    z-index: 10;
 
     &:disabled {
         cursor: not-allowed;
@@ -8595,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);
     `}
@@ -8723,7 +8720,7 @@ const Hs = k.div`
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
-`, sv = ({
+`, lv = ({
   id: t,
   name: e,
   label: n,
@@ -9266,7 +9263,7 @@ const Hs = k.div`
     ...o,
     children: i
   }
-), av = ({
+), cv = ({
   isOpen: t,
   onAccept: e,
   onCancel: n,
@@ -9571,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);
@@ -9812,11 +9809,19 @@ 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`
@@ -9836,6 +9841,14 @@ const fy = {
         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);
+        }
     `
 }, my = P`
     tbody tr:hover td {
@@ -9893,13 +9906,6 @@ const fy = {
     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);
     }
@@ -9960,27 +9966,25 @@ const fy = {
   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(
     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(by, { 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(wy, { size: e === "sm" ? 16 : e === "md" ? 20 : 24, children: t })
@@ -9989,7 +9993,7 @@ const fy = {
           /* @__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(vy, { $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(
@@ -10092,14 +10096,34 @@ const Py = k.table`
     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 }) => fy[t]}
     ${py}
     ${my}
-`, Ay = ({
+`, 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",
@@ -10111,8 +10135,8 @@ const Py = k.table`
   const a = (l, u) => (d) => {
     l.onSort?.(d), o?.({ columnId: l.id ?? String(u), direction: d });
   };
-  return /* @__PURE__ */ R(Py, { $variant: r, className: i, children: [
-    /* @__PURE__ */ p("thead", { children: /* @__PURE__ */ p("tr", { children: t.map((l, u) => /* @__PURE__ */ p(
+  return /* @__PURE__ */ p(Ey, { children: /* @__PURE__ */ R(Py, { $variant: r, className: i, children: [
+    /* @__PURE__ */ p(Ay, { $sticky: s, children: /* @__PURE__ */ p("tr", { children: t.map((l, u) => /* @__PURE__ */ p(
       bc,
       {
         size: n,
@@ -10122,7 +10146,6 @@ const Py = k.table`
         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,
@@ -10154,10 +10177,10 @@ const Py = k.table`
         );
       }) }, l.id || u);
     }) })
-  ] });
+  ] }) });
 };
-Ay.displayName = "Table";
-const Ey = k.header`
+Dy.displayName = "Table";
+const $y = k.header`
     position: fixed;
     top: 0;
     left: 0;
@@ -10176,15 +10199,15 @@ const Ey = k.header`
     @media (min-width: 768px) {
         padding-left: ${({ $sidebarCollapsed: t }) => t ? "6rem" : "17rem"};
     }
-`, Dy = k.div`
+`, My = k.div`
     display: flex;
     align-items: center;
     gap: 1rem;
-`, $y = k.div`
+`, Vy = k.div`
     display: flex;
     align-items: center;
     gap: 1rem;
-`, My = k.button`
+`, Ry = k.button`
     position: relative;
     display: flex;
     align-items: center;
@@ -10208,7 +10231,7 @@ const Ey = k.header`
     &:active {
         transform: scale(0.92);
     }
-`, Vy = k.span`
+`, Iy = k.span`
     position: absolute;
     top: 0.35rem;
     right: 0.35rem;
@@ -10224,7 +10247,7 @@ const Ey = k.header`
     display: flex;
     align-items: center;
     justify-content: center;
-`, Ry = k.div`
+`, Ny = k.div`
     display: flex;
     align-items: center;
     gap: 0.75rem;
@@ -10241,7 +10264,7 @@ const Ey = k.header`
         outline: 2px solid var(--color-main-blue-primary);
         outline-offset: 2px;
     }
-`, Iy = k.div`
+`, Ly = k.div`
     width: 2rem;
     height: 2rem;
     border-radius: 50%;
@@ -10252,7 +10275,7 @@ const Ey = k.header`
     color: var(--color-main-white);
     font-weight: 600;
     font-size: 0.875rem;
-`, Ny = k.div`
+`, By = k.div`
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -10260,12 +10283,12 @@ const Ey = k.header`
     @media (max-width: 640px) {
         display: none;
     }
-`, Ly = k.span`
+`, Oy = k.span`
     font-weight: 600;
     font-size: 0.875rem;
     color: var(--color-main-dark-text);
     line-height: 1.2;
-`, By = k.span`
+`, jy = k.span`
     font-size: 0.75rem;
     color: var(--color-main-gray-text);
     line-height: 1.2;
@@ -10279,11 +10302,11 @@ const Ey = 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(Ey, { $sidebarCollapsed: t, children: [
-    /* @__PURE__ */ p(Dy, { children: o }),
-    /* @__PURE__ */ R($y, { children: [
+  return /* @__PURE__ */ R($y, { $sidebarCollapsed: t, children: [
+    /* @__PURE__ */ p(My, { children: o }),
+    /* @__PURE__ */ R(Vy, { children: [
       /* @__PURE__ */ R(
-        My,
+        Ry,
         {
           onClick: i,
           "aria-label": c,
@@ -10298,12 +10321,12 @@ const Ey = k.header`
                 color: "var(--color-main-blue-primary)"
               }
             ),
-            l && /* @__PURE__ */ p(Vy, { $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(
-        Ry,
+        Ny,
         {
           onClick: s,
           role: "button",
@@ -10312,7 +10335,7 @@ const Ey = k.header`
             (h.key === "Enter" || h.key === " ") && (h.preventDefault(), s?.());
           },
           children: [
-            /* @__PURE__ */ p(Iy, { children: e.avatarUrl ? /* @__PURE__ */ p(
+            /* @__PURE__ */ p(Ly, { children: e.avatarUrl ? /* @__PURE__ */ p(
               "img",
               {
                 src: e.avatarUrl,
@@ -10320,9 +10343,9 @@ const Ey = k.header`
                 style: { width: "100%", height: "100%", borderRadius: "50%" }
               }
             ) : a(e.name) }),
-            /* @__PURE__ */ R(Ny, { children: [
-              /* @__PURE__ */ p(Ly, { children: e.name }),
-              /* @__PURE__ */ p(By, { children: e.role })
+            /* @__PURE__ */ R(By, { children: [
+              /* @__PURE__ */ p(Oy, { children: e.name }),
+              /* @__PURE__ */ p(jy, { children: e.role })
             ] })
           ]
         }
@@ -10331,12 +10354,12 @@ const Ey = k.header`
   ] });
 };
 wc.displayName = "Header";
-const Oy = k.div`
+const Fy = k.div`
     display: flex;
     flex-direction: column;
     height: 100vh;
     overflow: hidden;
-`, jy = k.main`
+`, zy = k.main`
     flex: 1;
     margin-top: 4rem;
     /* Mobile-first: no lateral offset so content occupies full width */
@@ -10352,7 +10375,7 @@ const Oy = k.div`
     @media (min-width: 1200px) {
         margin-left: 5rem;
     }
-`, Fy = ({
+`, _y = ({
   children: t,
   navigationConfig: e,
   userRoles: n = [],
@@ -10363,9 +10386,9 @@ const Oy = k.div`
   onNotificationClick: a,
   onUserProfileClick: l,
   contentClassName: u,
-  logoImgCollapse: d,
-  logoImgSrc: c
-}) => /* @__PURE__ */ R(Oy, { children: [
+  logoImgCollapsed: d,
+  logoImgExpanded: c
+}) => /* @__PURE__ */ R(Fy, { children: [
   /* @__PURE__ */ p(
     gc,
     {
@@ -10373,8 +10396,8 @@ const Oy = k.div`
       userRoles: n,
       onNavigate: o,
       activePath: r,
-      logoImgCollapse: d,
-      logoImgSrc: c
+      logoImgCollapsed: d,
+      logoImgExpanded: c
     }
   ),
   /* @__PURE__ */ p(
@@ -10386,17 +10409,17 @@ const Oy = k.div`
       onUserProfileClick: l
     }
   ),
-  /* @__PURE__ */ p(jy, { className: u, children: t })
-] }), lv = (t) => /* @__PURE__ */ p(K0, { children: /* @__PURE__ */ p(Fy, { ...t }) });
+  /* @__PURE__ */ p(zy, { className: u, children: t })
+] }), uv = (t) => /* @__PURE__ */ p(K0, { children: /* @__PURE__ */ p(_y, { ...t }) });
 export {
   $g as ALLOWED_INPUT_TYPES,
   nc as BaseInput,
   Bs as Button,
   jp as ButtonSpinner,
-  Zy as Card,
-  Qy as CardBody,
-  tv as CardFooter,
-  Jy as CardHeader,
+  Qy as Card,
+  ev as CardBody,
+  nv as CardFooter,
+  tv as CardHeader,
   Wi as Checkbox,
   sc as CheckboxInput,
   g0 as CheckboxLabel,
@@ -10405,15 +10428,15 @@ export {
   W0 as DialogFooter,
   z0 as DialogHeader,
   Fs as ErrorMessage,
-  sv as FormField,
-  Gy as FullScreenSpinner,
+  lv as FormField,
+  qy as FullScreenSpinner,
   wc as Header,
   si as HeadingBold,
-  Ky as HeadingRegular,
+  Gy as HeadingRegular,
   q as Icon,
   er as IconWrapperStyles,
   Hi as Label,
-  lv as Layout,
+  uv as Layout,
   hy as Link,
   Kg as PasswordInput,
   ac as PinInput,
@@ -10422,39 +10445,39 @@ export {
   cc as RadioInputDot,
   uc as RadioInputLabel,
   c0 as SearchInput,
-  Xy as SectionSpinner,
+  Zy as SectionSpinner,
   ic as SelectInput,
   gc as Sidebar,
   fc as SidebarContext,
   K0 as SidebarProvider,
   _i as Spinner,
-  Ay as Table,
+  Dy as Table,
   xc as TableCell,
   bc as TableHeaderCell,
-  av as TermsAndConditions,
+  cv as TermsAndConditions,
   ai as Text,
   oc as TextAreaInput,
-  qy as ToastProvider,
+  Jy as ToastProvider,
   yc as baseContentTableStyles,
   Ue as baseFieldStyles,
   Ui as baseInputStyles,
   De as baseTableCellsSizes,
-  rv as createFieldConfig,
+  ov as createFieldConfig,
   k0 as createInputRefs,
   ye as disabledStyles,
   We as errorStyles,
   Mg as flushedStyles,
-  iv as getPropsForInputType,
+  sv as getPropsForInputType,
   S0 as handleDigitChange,
   T0 as handleKeyDown,
   C0 as handlePaste,
   Us as hasPermission,
-  ev as normalizeFieldTypes,
-  nv as normalizeSelectOptions,
+  rv as normalizeFieldTypes,
+  iv as normalizeSelectOptions,
   tr as sizeStyles,
   my as tableHoverMixin,
   vc as tableIconContainerStyles,
   py as tableResponsiveMixin,
   fy as tableVariants,
-  ov as validateCode
+  av as validateCode
 };