@bwp-web/components 1.3.0 → 1.3.2

package/dist/index.js

@@ -892,27 +892,24 @@ function BiampLayout({
 
 // src/BiampTable/BiampTable.tsx
 import {
-  Box as Box4,
-  Checkbox,
-  IconButton,
+  Box as Box6,
+  Checkbox as Checkbox2,
   Table as MuiTable,
   TableBody,
-  TableCell,
+  TableCell as TableCell2,
   TableContainer,
   TableHead,
-  TableRow,
+  TableRow as TableRow2,
   TableSortLabel
 } from "@mui/material";
 import {
-  ChevronDownIcon,
-  ChevronRightIcon,
   DropdownChevronDownIcon,
   DropdownChevronUpIcon
 } from "@bwp-web/assets";
 import {
-  flexRender
+  flexRender as flexRender2
 } from "@tanstack/react-table";
-import React2, { useRef as useRef3 } from "react";
+import { useEffect as useEffect2, useRef as useRef3 } from "react";
 
 // src/BiampTable/BiampTableEmptyState.tsx
 import { NoResultsIcon } from "@bwp-web/assets";
@@ -968,6 +965,18 @@ function BiampTableErrorState({
   return /* @__PURE__ */ jsx6(BiampTableStatusMessage, { role: "alert", icon, title, ...rest });
 }
 
+// src/BiampTable/BiampTableRow.tsx
+import {
+  Box as Box5,
+  Checkbox,
+  IconButton,
+  TableCell,
+  TableRow
+} from "@mui/material";
+import { ChevronDownIcon, ChevronRightIcon } from "@bwp-web/assets";
+import { flexRender } from "@tanstack/react-table";
+import React2 from "react";
+
 // src/BiampTable/BiampTableTruncatedCell.tsx
 import { Box as Box3, Tooltip } from "@mui/material";
 import { useCallback, useRef, useState } from "react";
@@ -1014,37 +1023,6 @@ function BiampTableTruncatedCell({
   );
 }
 
-// src/BiampTable/useLoadingDelay.ts
-import { useEffect, useRef as useRef2, useState as useState2 } from "react";
-function useLoadingDelay(loading, { delay = 150, minDuration = 500 } = {}) {
-  const [status, setStatus] = useState2("idle");
-  const timeoutRef = useRef2(null);
-  function clearPending() {
-    if (timeoutRef.current !== null) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
-    }
-  }
-  useEffect(() => {
-    if (loading && status === "idle") {
-      clearPending();
-      timeoutRef.current = setTimeout(() => {
-        timeoutRef.current = setTimeout(() => {
-          setStatus("ending");
-        }, minDuration);
-        setStatus("loading");
-      }, delay);
-      setStatus("delaying");
-    }
-    if (!loading && status !== "loading") {
-      clearPending();
-      setStatus("idle");
-    }
-  }, [loading, delay, minDuration, status]);
-  useEffect(() => clearPending, []);
-  return status === "loading" || status === "ending";
-}
-
 // src/BiampTable/slotProps.ts
 function resolveSlot(slot, ctx) {
   if (!slot) return void 0;
@@ -1054,19 +1032,7 @@ function mergeSx(...inputs) {
   return inputs.filter((v) => Boolean(v)).flatMap((v) => Array.isArray(v) ? v : [v]);
 }
 
-// src/BiampTable/BiampTable.tsx
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
-var overlaySx = {
-  position: "absolute",
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  pointerEvents: "none"
-};
+// src/BiampTable/cellSx.ts
 var stickyHoverBg = {
   ".MuiTableRow-hover:hover > &, .Mui-selected > &": {
     bgcolor: ({ palette }) => palette.mode === "dark" ? palette.grey[800] : palette.grey[100]
@@ -1092,6 +1058,126 @@ function cellSx(sticky, minWidth, zIndex) {
     "&:has([data-truncate])": { maxWidth: mw, whiteSpace: "normal" }
   };
 }
+
+// src/BiampTable/BiampTableExpandGuidelines.tsx
+import { Box as Box4 } from "@mui/material";
+import { Fragment, jsx as jsx8 } from "react/jsx-runtime";
+var guidelineIndent = 28;
+var guidelineCellPaddingLeft = 12;
+var guidelineLineOffsetFromParentText = 4;
+var guidelineElbowGapToChildText = 12;
+var guidelineFirstChildTopExtension = 12;
+var guidelineColor = ({ palette }) => palette.dividers.secondary;
+var guidelineStroke = "0.6px";
+function isLastChildOfParent(row) {
+  const parent = row.getParentRow();
+  if (!parent) return false;
+  const siblings = parent.subRows;
+  return siblings[siblings.length - 1]?.id === row.id;
+}
+function isFirstChildOfParent(row) {
+  const parent = row.getParentRow();
+  if (!parent) return false;
+  return parent.subRows[0]?.id === row.id;
+}
+function getAncestorAtDepth(row, targetDepth) {
+  let current = row;
+  while (current && current.depth > targetDepth) {
+    current = current.getParentRow();
+  }
+  return current && current.depth === targetDepth ? current : void 0;
+}
+function ExpandGuidelines({ row }) {
+  const verticalX = (k) => guidelineCellPaddingLeft + (k - 1) * guidelineIndent + guidelineLineOffsetFromParentText;
+  const elbowEnd = guidelineCellPaddingLeft + row.depth * guidelineIndent - guidelineElbowGapToChildText;
+  const lines = [];
+  for (let k = 1; k < row.depth; k++) {
+    const ancestor = getAncestorAtDepth(row, k);
+    if (!ancestor || isLastChildOfParent(ancestor)) continue;
+    lines.push(
+      /* @__PURE__ */ jsx8(
+        Box4,
+        {
+          "aria-hidden": true,
+          sx: {
+            position: "absolute",
+            left: `${verticalX(k)}px`,
+            top: 0,
+            bottom: 0,
+            width: guidelineStroke,
+            bgcolor: guidelineColor,
+            pointerEvents: "none"
+          }
+        },
+        `v-${k}`
+      )
+    );
+  }
+  const elbowX = verticalX(row.depth);
+  const rowIsLast = isLastChildOfParent(row);
+  const rowIsFirst = isFirstChildOfParent(row);
+  const elbowTopOffset = rowIsFirst ? -guidelineFirstChildTopExtension : 0;
+  lines.push(
+    /* @__PURE__ */ jsx8(
+      Box4,
+      {
+        "aria-hidden": true,
+        sx: {
+          position: "absolute",
+          left: `${elbowX}px`,
+          top: `${elbowTopOffset}px`,
+          height: `calc(50% - ${elbowTopOffset}px)`,
+          width: guidelineStroke,
+          bgcolor: guidelineColor,
+          pointerEvents: "none"
+        }
+      },
+      "v-elbow-top"
+    )
+  );
+  if (!rowIsLast) {
+    lines.push(
+      /* @__PURE__ */ jsx8(
+        Box4,
+        {
+          "aria-hidden": true,
+          sx: {
+            position: "absolute",
+            left: `${elbowX}px`,
+            top: "50%",
+            bottom: 0,
+            width: guidelineStroke,
+            bgcolor: guidelineColor,
+            pointerEvents: "none"
+          }
+        },
+        "v-elbow-bottom"
+      )
+    );
+  }
+  lines.push(
+    /* @__PURE__ */ jsx8(
+      Box4,
+      {
+        "aria-hidden": true,
+        sx: {
+          position: "absolute",
+          left: `${elbowX}px`,
+          top: "50%",
+          width: `${elbowEnd - elbowX}px`,
+          height: guidelineStroke,
+          bgcolor: guidelineColor,
+          pointerEvents: "none"
+        }
+      },
+      "h-elbow"
+    )
+  );
+  return /* @__PURE__ */ jsx8(Fragment, { children: lines });
+}
+
+// src/BiampTable/BiampTableRow.tsx
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var rowCursorPointerSx = { cursor: "pointer" };
 var selectionCellSx = {
   position: "sticky",
@@ -1107,13 +1193,80 @@ var expandCellBaseSx = {
   gap: "2px"
 };
 var expandPlaceholderSx = { width: 28 };
-var headerSelectionCellSx = {
-  position: "sticky",
-  left: 0,
-  zIndex: 3,
-  bgcolor: "background.paper"
-};
-var checkboxHiddenHeaderSx = { visibility: "hidden" };
+function ExpandToggle({
+  row,
+  isExpanded,
+  hasExpandableRows,
+  rowLabel
+}) {
+  if (row.getCanExpand()) {
+    return /* @__PURE__ */ jsx9(
+      IconButton,
+      {
+        variant: "none",
+        onClick: (e) => {
+          e.stopPropagation();
+          row.toggleExpanded();
+        },
+        "aria-label": isExpanded ? `Collapse ${rowLabel}` : `Expand ${rowLabel}`,
+        "aria-expanded": isExpanded,
+        children: isExpanded ? /* @__PURE__ */ jsx9(
+          ChevronDownIcon,
+          {
+            variant: "xs",
+            sx: { color: ({ palette }) => palette.text.secondary }
+          }
+        ) : /* @__PURE__ */ jsx9(
+          ChevronRightIcon,
+          {
+            variant: "xs",
+            sx: { color: ({ palette }) => palette.text.secondary }
+          }
+        )
+      }
+    );
+  }
+  if (hasExpandableRows) return /* @__PURE__ */ jsx9(Box5, { sx: expandPlaceholderSx });
+  return null;
+}
+function renderCellContent({
+  cell,
+  row,
+  isExpandCell,
+  alwaysExpanded,
+  isExpanded,
+  hasExpandableRows,
+  getRowLabel
+}) {
+  const sticky = cell.column.columnDef.meta?.sticky;
+  const content = flexRender(cell.column.columnDef.cell, cell.getContext());
+  if (sticky) return content;
+  const truncate = cell.column.columnDef.meta?.truncate ?? true;
+  const truncated = truncate ? /* @__PURE__ */ jsx9(BiampTableTruncatedCell, { children: content }) : content;
+  if (!isExpandCell) return truncated;
+  if (alwaysExpanded) {
+    return row.depth > 0 ? /* @__PURE__ */ jsx9(Box5, { sx: { pl: `${row.depth * 28}px` }, children: truncated }) : truncated;
+  }
+  const rowLabel = getRowLabel ? getRowLabel(row.original) : `row ${row.index + 1}`;
+  return /* @__PURE__ */ jsxs5(
+    Box5,
+    {
+      sx: row.depth > 0 ? { ...expandCellBaseSx, pl: `${row.depth * 12}px` } : expandCellBaseSx,
+      children: [
+        /* @__PURE__ */ jsx9(
+          ExpandToggle,
+          {
+            row,
+            isExpanded,
+            hasExpandableRows,
+            rowLabel
+          }
+        ),
+        truncated
+      ]
+    }
+  );
+}
 function BiampTableRowInner({
   row,
   isExpanded,
@@ -1122,9 +1275,12 @@ function BiampTableRowInner({
   isRowClickable,
   enableRowSelection,
   enableExpanding,
+  alwaysExpanded,
   selectChildrenWithParent,
+  showExpandGuidelines,
   getRowLabel,
   hasExpandableRows,
+  customColor,
   rowSlotProps,
   cellSlotProps
 }) {
@@ -1144,7 +1300,11 @@ function BiampTableRowInner({
       selected: enableRowSelection ? isSelected : void 0,
       role: clickable ? "button" : void 0,
       tabIndex: clickable ? 0 : void 0,
-      sx: mergeSx(clickable && rowCursorPointerSx, userRowSx),
+      sx: mergeSx(
+        clickable && rowCursorPointerSx,
+        customColor ? { backgroundColor: customColor } : void 0,
+        userRowSx
+      ),
       onClick: clickable && onRowClick ? (e) => {
         onRowClick(row.original);
         userRowOnClick?.(e);
@@ -1157,87 +1317,63 @@ function BiampTableRowInner({
         userRowOnKeyDown?.(e);
       } : userRowOnKeyDown,
       children: [
-        enableRowSelection && /* @__PURE__ */ jsx8(TableCell, { padding: "checkbox", sx: selectionCellSx, children: /* @__PURE__ */ jsx8(
-          Checkbox,
+        enableRowSelection && /* @__PURE__ */ jsx9(
+          TableCell,
           {
-            checked: isSelected,
-            disabled: !row.getCanSelect(),
-            onChange: (e) => row.toggleSelected(e.target.checked, {
-              selectChildren: selectChildrenWithParent
-            }),
-            onClick: (e) => e.stopPropagation(),
-            sx: !row.getCanSelect() ? checkboxHiddenSx : void 0,
-            slotProps: {
-              input: {
-                "aria-label": getRowLabel ? `Select ${getRowLabel(row.original)}` : `Select row ${row.index + 1}`
+            padding: "checkbox",
+            sx: mergeSx(
+              selectionCellSx,
+              customColor ? { backgroundColor: customColor } : void 0
+            ),
+            children: /* @__PURE__ */ jsx9(
+              Checkbox,
+              {
+                checked: isSelected,
+                disabled: !row.getCanSelect(),
+                onChange: (e) => row.toggleSelected(e.target.checked, {
+                  selectChildren: selectChildrenWithParent
+                }),
+                onClick: (e) => e.stopPropagation(),
+                sx: !row.getCanSelect() ? checkboxHiddenSx : void 0,
+                slotProps: {
+                  input: {
+                    "aria-label": getRowLabel ? `Select ${getRowLabel(row.original)}` : `Select row ${row.index + 1}`
+                  }
+                }
               }
-            }
+            )
           }
-        ) }),
+        ),
         row.getVisibleCells().map((cell, cellIndex, cells) => {
           const sticky = cell.column.columnDef.meta?.sticky;
           const isExpandCell = enableExpanding && !sticky && cellIndex === cells.findIndex((c) => !c.column.columnDef.meta?.sticky);
-          const content = flexRender(
-            cell.column.columnDef.cell,
-            cell.getContext()
-          );
+          const showGuidelinesOnCell = isExpandCell && showExpandGuidelines && alwaysExpanded && row.depth > 0;
           const resolvedCell = resolveSlot(cellSlotProps, { cell });
           const { sx: userCellSx, ...restCellProps } = resolvedCell ?? {};
-          return /* @__PURE__ */ jsx8(
+          return /* @__PURE__ */ jsxs5(
             TableCell,
             {
               ...restCellProps,
               "data-sticky": sticky || void 0,
               sx: mergeSx(
                 cellSx(sticky, cell.column.columnDef.meta?.minWidth, 2),
-                { pl: isExpandCell ? "6px" : "12px" },
+                { pl: isExpandCell && !alwaysExpanded ? "6px" : "12px" },
+                showGuidelinesOnCell ? { position: "relative" } : void 0,
+                sticky && customColor ? { backgroundColor: customColor } : void 0,
                 userCellSx
               ),
-              children: (() => {
-                if (sticky) return content;
-                const truncate = cell.column.columnDef.meta?.truncate ?? true;
-                const truncated = truncate ? /* @__PURE__ */ jsx8(BiampTableTruncatedCell, { children: content }) : content;
-                if (!isExpandCell) return truncated;
-                const rowLabel = getRowLabel ? getRowLabel(row.original) : `row ${row.index + 1}`;
-                return /* @__PURE__ */ jsxs5(
-                  Box4,
-                  {
-                    sx: row.depth > 0 ? { ...expandCellBaseSx, pl: `${row.depth * 12}px` } : expandCellBaseSx,
-                    children: [
-                      row.getCanExpand() ? /* @__PURE__ */ jsx8(
-                        IconButton,
-                        {
-                          variant: "none",
-                          onClick: (e) => {
-                            e.stopPropagation();
-                            row.toggleExpanded();
-                          },
-                          "aria-label": isExpanded ? `Collapse ${rowLabel}` : `Expand ${rowLabel}`,
-                          "aria-expanded": isExpanded,
-                          children: isExpanded ? /* @__PURE__ */ jsx8(
-                            ChevronDownIcon,
-                            {
-                              variant: "xs",
-                              sx: {
-                                color: ({ palette }) => palette.text.secondary
-                              }
-                            }
-                          ) : /* @__PURE__ */ jsx8(
-                            ChevronRightIcon,
-                            {
-                              variant: "xs",
-                              sx: {
-                                color: ({ palette }) => palette.text.secondary
-                              }
-                            }
-                          )
-                        }
-                      ) : hasExpandableRows ? /* @__PURE__ */ jsx8(Box4, { sx: expandPlaceholderSx }) : null,
-                      truncated
-                    ]
-                  }
-                );
-              })()
+              children: [
+                showGuidelinesOnCell && /* @__PURE__ */ jsx9(ExpandGuidelines, { row }),
+                renderCellContent({
+                  cell,
+                  row,
+                  isExpandCell,
+                  alwaysExpanded,
+                  isExpanded,
+                  hasExpandableRows,
+                  getRowLabel
+                })
+              ]
             },
             cell.id
           );
@@ -1248,12 +1384,64 @@ function BiampTableRowInner({
   );
 }
 function biampTableRowPropsAreEqual(prev, next) {
-  return prev.row.id === next.row.id && prev.row.original === next.row.original && prev.isSelected === next.isSelected && prev.isExpanded === next.isExpanded && prev.row.getVisibleCells().length === next.row.getVisibleCells().length && prev.enableRowSelection === next.enableRowSelection && prev.enableExpanding === next.enableExpanding && prev.hasExpandableRows === next.hasExpandableRows && prev.selectChildrenWithParent === next.selectChildrenWithParent && prev.onRowClick === next.onRowClick && prev.isRowClickable === next.isRowClickable && prev.getRowLabel === next.getRowLabel && prev.rowSlotProps === next.rowSlotProps && prev.cellSlotProps === next.cellSlotProps;
+  return prev.row.id === next.row.id && prev.row.original === next.row.original && prev.isSelected === next.isSelected && prev.isExpanded === next.isExpanded && prev.row.getVisibleCells().length === next.row.getVisibleCells().length && prev.enableRowSelection === next.enableRowSelection && prev.enableExpanding === next.enableExpanding && prev.alwaysExpanded === next.alwaysExpanded && prev.hasExpandableRows === next.hasExpandableRows && prev.selectChildrenWithParent === next.selectChildrenWithParent && prev.showExpandGuidelines === next.showExpandGuidelines && prev.onRowClick === next.onRowClick && prev.isRowClickable === next.isRowClickable && prev.getRowLabel === next.getRowLabel && prev.customColor === next.customColor && prev.rowSlotProps === next.rowSlotProps && prev.cellSlotProps === next.cellSlotProps;
 }
 var BiampTableRow = React2.memo(
   BiampTableRowInner,
   biampTableRowPropsAreEqual
 );
+
+// src/BiampTable/useLoadingDelay.ts
+import { useEffect, useRef as useRef2, useState as useState2 } from "react";
+function useLoadingDelay(loading, { delay = 150, minDuration = 500 } = {}) {
+  const [status, setStatus] = useState2("idle");
+  const timeoutRef = useRef2(null);
+  function clearPending() {
+    if (timeoutRef.current !== null) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }
+  useEffect(() => {
+    if (loading && status === "idle") {
+      clearPending();
+      timeoutRef.current = setTimeout(() => {
+        timeoutRef.current = setTimeout(() => {
+          setStatus("ending");
+        }, minDuration);
+        setStatus("loading");
+      }, delay);
+      setStatus("delaying");
+    }
+    if (!loading && status !== "loading") {
+      clearPending();
+      setStatus("idle");
+    }
+  }, [loading, delay, minDuration, status]);
+  useEffect(() => clearPending, []);
+  return status === "loading" || status === "ending";
+}
+
+// src/BiampTable/BiampTable.tsx
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var overlaySx = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  pointerEvents: "none"
+};
+var headerSelectionCellSx = {
+  position: "sticky",
+  left: 0,
+  zIndex: 3,
+  bgcolor: "background.paper"
+};
+var checkboxHiddenHeaderSx = { visibility: "hidden" };
 function BiampTable({
   table,
   onRowClick,
@@ -1263,9 +1451,12 @@ function BiampTable({
   empty,
   enableRowSelection = false,
   enableExpanding = false,
+  alwaysExpanded = false,
   hideSelectAll,
   selectChildrenWithParent = false,
+  showExpandGuidelines = false,
   getRowLabel,
+  setRowColor,
   slotProps,
   sx,
   ...boxProps
@@ -1282,15 +1473,20 @@ function BiampTable({
     enableRowSelection ? 48 : 0
   );
   const containerRef = useRef3(null);
+  useEffect2(() => {
+    if (enableExpanding && alwaysExpanded) {
+      table.toggleAllRowsExpanded(true);
+    }
+  }, [enableExpanding, alwaysExpanded, table]);
   const showLoading = useLoadingDelay(!!loading);
   const rows = table.getRowModel().rows;
   const hasExpandableRows = enableExpanding && rows.some((r) => r.getCanExpand());
   const showError = !!error && !loading;
   const showEmpty = !showError && !loading && rows.length === 0;
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     TableContainer,
     {
-      component: Box4,
+      component: Box6,
       ...boxProps,
       ref: containerRef,
       sx: {
@@ -1301,7 +1497,7 @@ function BiampTable({
         ...sx
       },
       children: [
-        /* @__PURE__ */ jsxs5(
+        /* @__PURE__ */ jsxs6(
           MuiTable,
           {
             "aria-busy": showLoading || void 0,
@@ -1311,14 +1507,14 @@ function BiampTable({
               userTableSx
             ),
             children: [
-              /* @__PURE__ */ jsx8(TableHead, { ...restHeadSlotProps, sx: mergeSx(userHeadSx), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs5(
-                TableRow,
+              /* @__PURE__ */ jsx10(TableHead, { ...restHeadSlotProps, sx: mergeSx(userHeadSx), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs6(
+                TableRow2,
                 {
                   ...restHeaderRowSlotProps,
                   sx: mergeSx(userHeaderRowSx),
                   children: [
-                    enableRowSelection && /* @__PURE__ */ jsx8(TableCell, { padding: "checkbox", sx: headerSelectionCellSx, children: !hideSelectAll && /* @__PURE__ */ jsx8(
-                      Checkbox,
+                    enableRowSelection && /* @__PURE__ */ jsx10(TableCell2, { padding: "checkbox", sx: headerSelectionCellSx, children: !hideSelectAll && /* @__PURE__ */ jsx10(
+                      Checkbox2,
                       {
                         checked: table.getIsAllPageRowsSelected(),
                         indeterminate: table.getIsSomePageRowsSelected(),
@@ -1333,8 +1529,8 @@ function BiampTable({
                         header
                       });
                       const { sx: userHeaderCellSx, ...restHeaderCellProps } = resolvedHeaderCell ?? {};
-                      return /* @__PURE__ */ jsx8(
-                        TableCell,
+                      return /* @__PURE__ */ jsx10(
+                        TableCell2,
                         {
                           ...restHeaderCellProps,
                           "data-sticky": sticky || void 0,
@@ -1346,7 +1542,7 @@ function BiampTable({
                             cellSx(sticky, header.column.columnDef.meta?.minWidth, 3),
                             userHeaderCellSx
                           ),
-                          children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsx8(
+                          children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsx10(
                             TableSortLabel,
                             {
                               active: !!header.column.getIsSorted(),
@@ -1355,12 +1551,12 @@ function BiampTable({
                               ...header.column.getIsSorted() && {
                                 IconComponent: header.column.getIsSorted() === "asc" ? DropdownChevronUpIcon : DropdownChevronDownIcon
                               },
-                              children: flexRender(
+                              children: flexRender2(
                                 header.column.columnDef.header,
                                 header.getContext()
                               )
                             }
-                          ) : flexRender(
+                          ) : flexRender2(
                             header.column.columnDef.header,
                             header.getContext()
                           )
@@ -1372,12 +1568,12 @@ function BiampTable({
                 },
                 headerGroup.id
               )) }),
-              /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx10(
                 TableBody,
                 {
                   ...restBodySlotProps,
                   sx: mergeSx({ opacity: showLoading ? 0.3 : 1 }, userBodySx),
-                  children: !showError && rows.map((row) => /* @__PURE__ */ jsx8(
+                  children: !showError && rows.map((row) => /* @__PURE__ */ jsx10(
                     BiampTableRow,
                     {
                       row,
@@ -1387,9 +1583,12 @@ function BiampTable({
                       isRowClickable,
                       enableRowSelection,
                       enableExpanding,
+                      alwaysExpanded,
                       selectChildrenWithParent,
+                      showExpandGuidelines,
                       getRowLabel,
                       hasExpandableRows,
+                      customColor: setRowColor?.(row.original),
                       rowSlotProps: slotProps?.row,
                       cellSlotProps: slotProps?.cell
                     },
@@ -1400,14 +1599,14 @@ function BiampTable({
             ]
           }
         ),
-        showError && /* @__PURE__ */ jsx8(Box4, { sx: overlaySx, children: error === true ? /* @__PURE__ */ jsx8(BiampTableErrorState, { sx: { pointerEvents: "auto" } }) : error instanceof Error ? /* @__PURE__ */ jsx8(
+        showError && /* @__PURE__ */ jsx10(Box6, { sx: overlaySx, children: error === true ? /* @__PURE__ */ jsx10(BiampTableErrorState, { sx: { pointerEvents: "auto" } }) : error instanceof Error ? /* @__PURE__ */ jsx10(
           BiampTableErrorState,
           {
             description: error.message,
             sx: { pointerEvents: "auto" }
           }
         ) : error }),
-        showEmpty && /* @__PURE__ */ jsx8(Box4, { sx: overlaySx, children: empty && empty !== true ? empty : /* @__PURE__ */ jsx8(BiampTableEmptyState, { sx: { pointerEvents: "auto" } }) })
+        showEmpty && /* @__PURE__ */ jsx10(Box6, { sx: overlaySx, children: empty && empty !== true ? empty : /* @__PURE__ */ jsx10(BiampTableEmptyState, { sx: { pointerEvents: "auto" } }) })
       ]
     }
   );
@@ -1415,7 +1614,7 @@ function BiampTable({
 
 // src/BiampTable/BiampTableContainer.tsx
 import { Stack as Stack6 } from "@mui/material";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function BiampTableContainer({
   withBorderTop = true,
   withBorderBottom = false,
@@ -1423,7 +1622,7 @@ function BiampTableContainer({
   sx,
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx11(
     Stack6,
     {
       direction: "column",
@@ -1443,9 +1642,9 @@ function BiampTableContainer({
 
 // src/BiampTable/BiampTableCellActionButton.tsx
 import { IconButton as IconButton2, Tooltip as Tooltip2 } from "@mui/material";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function BiampTableCellActionButton({ label, icon, ...props }) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx12(
     Tooltip2,
     {
       title: label,
@@ -1453,7 +1652,7 @@ function BiampTableCellActionButton({ label, icon, ...props }) {
       enterDelay: 500,
       enterNextDelay: 500,
       disableInteractive: true,
-      children: /* @__PURE__ */ jsx10("span", { children: /* @__PURE__ */ jsx10(IconButton2, { "aria-label": label, ...props, children: icon }) })
+      children: /* @__PURE__ */ jsx12("span", { children: /* @__PURE__ */ jsx12(IconButton2, { "aria-label": label, ...props, children: icon }) })
     }
   );
 }
@@ -1461,15 +1660,15 @@ function BiampTableCellActionButton({ label, icon, ...props }) {
 // src/BiampTable/BiampTableColumnVisibility.tsx
 import {
   alpha as alpha2,
-  Box as Box5,
-  Checkbox as Checkbox2,
+  Box as Box7,
+  Checkbox as Checkbox3,
   Divider,
   List,
   ListItem,
   Popover as Popover2,
   Typography as Typography3
 } from "@mui/material";
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 function toVisibilityState(visibility) {
   return visibility;
 }
@@ -1512,7 +1711,7 @@ function BiampTableColumnVisibility({
   ...popoverProps
 }) {
   const allVisible = table.getAllLeafColumns().every((col) => col.getIsVisible());
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx13(
     Popover2,
     {
       anchorEl,
@@ -1533,41 +1732,41 @@ function BiampTableColumnVisibility({
         }
       },
       ...popoverProps,
-      children: /* @__PURE__ */ jsxs6(List, { dense: true, disablePadding: true, children: [
-        /* @__PURE__ */ jsxs6(
+      children: /* @__PURE__ */ jsxs7(List, { dense: true, disablePadding: true, children: [
+        /* @__PURE__ */ jsxs7(
           ListItem,
           {
             dense: true,
             sx: columnListItemSx,
             onClick: () => table.toggleAllColumnsVisible(!allVisible),
             children: [
-              /* @__PURE__ */ jsx11(
-                Checkbox2,
+              /* @__PURE__ */ jsx13(
+                Checkbox3,
                 {
                   checked: allVisible,
                   slotProps: { input: { "aria-label": `${showAllLabel} columns` } }
                 }
               ),
-              /* @__PURE__ */ jsx11(Typography3, { variant: "caption", fontWeight: 600, children: showAllLabel })
+              /* @__PURE__ */ jsx13(Typography3, { variant: "caption", fontWeight: 600, children: showAllLabel })
             ]
           }
         ),
-        /* @__PURE__ */ jsx11(Divider, {}),
-        /* @__PURE__ */ jsx11(
-          Box5,
+        /* @__PURE__ */ jsx13(Divider, {}),
+        /* @__PURE__ */ jsx13(
+          Box7,
           {
             sx: { maxHeight: 340, overflow: "auto", overscrollBehavior: "none" },
             children: table.getAllLeafColumns().map((column) => {
               const columnName = column.columnDef.meta?.columnLabel ?? (typeof column.columnDef.header === "string" ? column.columnDef.header : column.id);
-              return /* @__PURE__ */ jsxs6(
+              return /* @__PURE__ */ jsxs7(
                 ListItem,
                 {
                   dense: true,
                   sx: columnListItemSx,
                   onClick: column.getToggleVisibilityHandler(),
                   children: [
-                    /* @__PURE__ */ jsx11(
-                      Checkbox2,
+                    /* @__PURE__ */ jsx13(
+                      Checkbox3,
                       {
                         checked: column.getIsVisible(),
                         sx: { py: 1 },
@@ -1576,7 +1775,7 @@ function BiampTableColumnVisibility({
                         }
                       }
                     ),
-                    /* @__PURE__ */ jsx11(Typography3, { variant: "caption", children: columnName })
+                    /* @__PURE__ */ jsx13(Typography3, { variant: "caption", children: columnName })
                   ]
                 },
                 column.id
@@ -1598,7 +1797,7 @@ import {
   Badge,
   IconButton as IconButton3
 } from "@mui/material";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function BiampTableToolbarActionButton({
   label,
   icon,
@@ -1606,12 +1805,12 @@ function BiampTableToolbarActionButton({
   ...props
 }) {
   const showBadge = badgeContent != null && badgeContent !== 0;
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx14(
     IconButton3,
     {
       "aria-label": showBadge ? `${label} (${badgeContent})` : label,
       ...props,
-      children: showBadge ? /* @__PURE__ */ jsx12(
+      children: showBadge ? /* @__PURE__ */ jsx14(
         Badge,
         {
           badgeContent,
@@ -1635,10 +1834,10 @@ function BiampTableToolbarActionButton({
 }
 
 // src/BiampTable/BiampTableToolbarColumnVisibility.tsx
-import { Fragment, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
 function BiampTableToolbarColumnVisibility({
   table,
-  icon = /* @__PURE__ */ jsx13(ColumnsIcon, { variant: "xs" }),
+  icon = /* @__PURE__ */ jsx15(ColumnsIcon, { variant: "xs" }),
   label = "Columns",
   defaultColumnVisibility,
   showAllLabel,
@@ -1647,8 +1846,8 @@ function BiampTableToolbarColumnVisibility({
   const [anchorEl, setAnchorEl] = useState3(null);
   const defaults = defaultColumnVisibility ?? getDefaultColumnVisibility(table);
   const dirtyCount = getColumnVisibilityDirtyCount(table, defaults);
-  return /* @__PURE__ */ jsxs7(Fragment, { children: [
-    /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    /* @__PURE__ */ jsx15(
       BiampTableToolbarActionButton,
       {
         label,
@@ -1658,7 +1857,7 @@ function BiampTableToolbarColumnVisibility({
         ...actionButtonProps
       }
     ),
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx15(
       BiampTableColumnVisibility,
       {
         table,
@@ -1671,9 +1870,9 @@ function BiampTableToolbarColumnVisibility({
 }
 
 // src/BiampTable/BiampTablePagination.tsx
-import { useEffect as useEffect2, useRef as useRef4 } from "react";
+import { useEffect as useEffect3, useRef as useRef4 } from "react";
 import { TablePagination } from "@mui/material";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var positionMap = {
   left: "flex-start",
   center: "center",
@@ -1696,13 +1895,13 @@ function BiampTablePagination({
   const stableCount = loading ? lastRowCountRef.current : rowCount;
   const { pageSize, pageIndex } = table.getState().pagination;
   const maxPage = Math.max(0, Math.ceil(stableCount / pageSize) - 1);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!loading && pageIndex > maxPage) {
       table.setPageIndex(maxPage);
     }
   }, [loading, pageIndex, maxPage, table]);
   if (autoHide && (!stableCount || stableCount <= pageSize)) return null;
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx16(
     TablePagination,
     {
       component: "div",
@@ -1734,15 +1933,15 @@ function BiampTablePagination({
 }
 
 // src/BiampTable/BiampTableToolbar.tsx
-import { Box as Box6 } from "@mui/material";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { Box as Box8 } from "@mui/material";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function BiampTableToolbar({
   children,
   sx,
   ...props
 }) {
-  return /* @__PURE__ */ jsx15(
-    Box6,
+  return /* @__PURE__ */ jsx17(
+    Box8,
     {
       role: "toolbar",
       display: "flex",
@@ -1760,14 +1959,14 @@ function BiampTableToolbar({
 }
 
 // src/BiampTable/BiampTableToolbarActions.tsx
-import { Box as Box7 } from "@mui/material";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { Box as Box9 } from "@mui/material";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function BiampTableToolbarActions({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx16(
-    Box7,
+  return /* @__PURE__ */ jsx18(
+    Box9,
     {
       display: "flex",
       alignItems: "center",
@@ -1783,19 +1982,19 @@ function BiampTableToolbarActions({
 // src/BiampTable/BiampTableToolbarExport.tsx
 import { CircularProgress } from "@mui/material";
 import { DownloadIcon } from "@bwp-web/assets";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function BiampTableToolbarExport({
   onExport,
   loading,
-  icon = /* @__PURE__ */ jsx17(DownloadIcon, { variant: "xs" }),
+  icon = /* @__PURE__ */ jsx19(DownloadIcon, { variant: "xs" }),
   label = "Export",
   ...props
 }) {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx19(
     BiampTableToolbarActionButton,
     {
       label: loading ? `${label}, loading` : label,
-      icon: loading ? /* @__PURE__ */ jsx17(CircularProgress, { size: 20, color: "inherit" }) : icon,
+      icon: loading ? /* @__PURE__ */ jsx19(CircularProgress, { size: 20, color: "inherit" }) : icon,
       disabled: loading,
       onClick: onExport,
       ...props
@@ -1806,7 +2005,7 @@ function BiampTableToolbarExport({
 // src/BiampTable/BiampTableToolbarFilters.tsx
 import {
   Badge as Badge2,
-  Box as Box8,
+  Box as Box10,
   Button,
   Divider as Divider2,
   Drawer,
@@ -1815,13 +2014,13 @@ import {
 } from "@mui/material";
 import { CloseIcon, FilterIcon } from "@bwp-web/assets";
 import { useId, useState as useState4 } from "react";
-import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
 function BiampTableToolbarFilters({
   activeFilterCount,
   children,
   onReset,
   onApply,
-  icon = /* @__PURE__ */ jsx18(FilterIcon, { variant: "xs" }),
+  icon = /* @__PURE__ */ jsx20(FilterIcon, { variant: "xs" }),
   title = "Filters",
   resetLabel = "Clear filters",
   applyLabel = "Apply",
@@ -1835,8 +2034,8 @@ function BiampTableToolbarFilters({
     onApply?.();
     setOpen(false);
   }
-  return /* @__PURE__ */ jsxs8(Fragment2, { children: [
-    /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsxs9(Fragment3, { children: [
+    /* @__PURE__ */ jsx20(
       BiampTableToolbarActionButton,
       {
         label: buttonLabel,
@@ -1845,7 +2044,7 @@ function BiampTableToolbarFilters({
         onClick: () => setOpen(true)
       }
     ),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx20(
       Drawer,
       {
         anchor: "right",
@@ -1857,17 +2056,17 @@ function BiampTableToolbarFilters({
           sx: { width: { xs: "100%", sm: 480 } },
           ...drawerProps?.PaperProps
         },
-        children: /* @__PURE__ */ jsxs8(
-          Box8,
+        children: /* @__PURE__ */ jsxs9(
+          Box10,
           {
             height: "100%",
             display: "flex",
             flexDirection: "column",
             justifyContent: "space-between",
             children: [
-              /* @__PURE__ */ jsxs8(Box8, { children: [
-                /* @__PURE__ */ jsxs8(
-                  Box8,
+              /* @__PURE__ */ jsxs9(Box10, { children: [
+                /* @__PURE__ */ jsxs9(
+                  Box10,
                   {
                     display: "flex",
                     justifyContent: "space-between",
@@ -1875,9 +2074,9 @@ function BiampTableToolbarFilters({
                     px: 3.5,
                     py: 2.5,
                     children: [
-                      /* @__PURE__ */ jsxs8(Typography4, { id: titleId, variant: "h2", children: [
+                      /* @__PURE__ */ jsxs9(Typography4, { id: titleId, variant: "h2", children: [
                         title,
-                        /* @__PURE__ */ jsx18(
+                        /* @__PURE__ */ jsx20(
                           Badge2,
                           {
                             badgeContent: activeFilterCount,
@@ -1886,21 +2085,21 @@ function BiampTableToolbarFilters({
                           }
                         )
                       ] }),
-                      /* @__PURE__ */ jsx18(
+                      /* @__PURE__ */ jsx20(
                         IconButton4,
                         {
                           size: "medium",
                           onClick: handleClose,
                           "aria-label": closeLabel,
-                          children: /* @__PURE__ */ jsx18(CloseIcon, {})
+                          children: /* @__PURE__ */ jsx20(CloseIcon, {})
                         }
                       )
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx18(Divider2, {}),
-                /* @__PURE__ */ jsx18(
-                  Box8,
+                /* @__PURE__ */ jsx20(Divider2, {}),
+                /* @__PURE__ */ jsx20(
+                  Box10,
                   {
                     role: "group",
                     "aria-label": "Filter options",
@@ -1913,8 +2112,8 @@ function BiampTableToolbarFilters({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs8(Box8, { display: "flex", children: [
-                /* @__PURE__ */ jsx18(
+              /* @__PURE__ */ jsxs9(Box10, { display: "flex", children: [
+                /* @__PURE__ */ jsx20(
                   Button,
                   {
                     variant: "overlay",
@@ -1925,7 +2124,7 @@ function BiampTableToolbarFilters({
                     children: resetLabel
                   }
                 ),
-                /* @__PURE__ */ jsx18(
+                /* @__PURE__ */ jsx20(
                   Button,
                   {
                     variant: "overlay",
@@ -1946,7 +2145,7 @@ function BiampTableToolbarFilters({
 
 // src/BiampTable/BiampTableToolbarSearch.tsx
 import {
-  Box as Box9,
+  Box as Box11,
   Collapse,
   IconButton as IconButton5,
   InputAdornment as InputAdornment2,
@@ -1955,16 +2154,16 @@ import {
   useMediaQuery
 } from "@mui/material";
 import { CloseIcon as CloseIcon2, SearchIcon as SearchIcon2 } from "@bwp-web/assets";
-import { useEffect as useEffect4, useState as useState5 } from "react";
+import { useEffect as useEffect5, useState as useState5 } from "react";
 
 // src/BiampTable/useDebouncedCallback.ts
-import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef5 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect4, useRef as useRef5 } from "react";
 var BIAMP_TABLE_DEBOUNCE_DELAY = 300;
 function useDebouncedCallback(callback, delay = BIAMP_TABLE_DEBOUNCE_DELAY) {
   const timeoutRef = useRef5(null);
   const callbackRef = useRef5(callback);
   callbackRef.current = callback;
-  useEffect3(() => {
+  useEffect4(() => {
     return () => {
       if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);
     };
@@ -1982,7 +2181,7 @@ function useDebouncedCallback(callback, delay = BIAMP_TABLE_DEBOUNCE_DELAY) {
 }
 
 // src/BiampTable/BiampTableToolbarSearch.tsx
-import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
 var searchFieldSx = {
   "& .MuiInputBase-root": {
     height: "36px !important",
@@ -2010,7 +2209,7 @@ function BiampTableToolbarSearch({
   const [inputValue, setInputValue] = useState5(defaultValue);
   const [isExpanded, setIsExpanded] = useState5(false);
   const debouncedOnChange = useDebouncedCallback(onChange, debounceDelay);
-  useEffect4(() => {
+  useEffect5(() => {
     setInputValue(defaultValue);
   }, [defaultValue]);
   const handleChange = (e) => {
@@ -2026,17 +2225,17 @@ function BiampTableToolbarSearch({
       setIsExpanded(false);
     }
   };
-  const clearButton = inputValue ? /* @__PURE__ */ jsx19(InputAdornment2, { position: "end", children: /* @__PURE__ */ jsx19(
+  const clearButton = inputValue ? /* @__PURE__ */ jsx21(InputAdornment2, { position: "end", children: /* @__PURE__ */ jsx21(
     IconButton5,
     {
       size: "small",
       onClick: handleClear,
       "aria-label": clearLabel,
       sx: { mr: 0.5 },
-      children: /* @__PURE__ */ jsx19(CloseIcon2, { variant: "xs", sx: { width: 20, height: 20 } })
+      children: /* @__PURE__ */ jsx21(CloseIcon2, { variant: "xs", sx: { width: 20, height: 20 } })
     }
   ) }) : null;
-  const textField = /* @__PURE__ */ jsx19(
+  const textField = /* @__PURE__ */ jsx21(
     TextField2,
     {
       name: "search",
@@ -2045,7 +2244,7 @@ function BiampTableToolbarSearch({
       slotProps: {
         htmlInput: { maxLength, "aria-label": placeholder },
         input: {
-          startAdornment: /* @__PURE__ */ jsx19(InputAdornment2, { position: "start", sx: { ml: 1 }, children: /* @__PURE__ */ jsx19(
+          startAdornment: /* @__PURE__ */ jsx21(InputAdornment2, { position: "start", sx: { ml: 1 }, children: /* @__PURE__ */ jsx21(
             SearchIcon2,
             {
               variant: "xs",
@@ -2071,9 +2270,9 @@ function BiampTableToolbarSearch({
     }
   );
   if (isMobile && enableMobileView) {
-    return /* @__PURE__ */ jsxs9(Box9, { display: "flex", alignItems: "center", width: "100%", pr: 1, gap: 1, children: [
-      /* @__PURE__ */ jsx19(SearchIcon2, { sx: { width: 16, height: 16 } }),
-      /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsxs10(Box11, { display: "flex", alignItems: "center", width: "100%", pr: 1, gap: 1, children: [
+      /* @__PURE__ */ jsx21(SearchIcon2, { sx: { width: 16, height: 16 } }),
+      /* @__PURE__ */ jsx21(
         InputBase,
         {
           name: "search",
@@ -2095,14 +2294,14 @@ function BiampTableToolbarSearch({
     ] });
   }
   if (expandable) {
-    return /* @__PURE__ */ jsxs9(Box9, { display: "flex", alignItems: "center", minWidth: 28, children: [
-      /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsxs10(Box11, { display: "flex", alignItems: "center", minWidth: 28, children: [
+      /* @__PURE__ */ jsx21(
         IconButton5,
         {
           "aria-label": expandLabel ?? placeholder,
           onClick: () => setIsExpanded(true),
           sx: { display: isExpanded || inputValue ? "none" : "flex" },
-          children: /* @__PURE__ */ jsx19(
+          children: /* @__PURE__ */ jsx21(
             SearchIcon2,
             {
               variant: "xs",
@@ -2112,7 +2311,7 @@ function BiampTableToolbarSearch({
           )
         }
       ),
-      /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsx21(
         Collapse,
         {
           in: isExpanded || !!inputValue,
@@ -2338,7 +2537,7 @@ function downloadCsv(csvContent, filename) {
 
 // src/BiampBanner/BiampBanner.tsx
 import {
-  Box as Box10,
+  Box as Box12,
   Collapse as Collapse2,
   Typography as Typography5
 } from "@mui/material";
@@ -2348,10 +2547,10 @@ import {
   SuccessStatusIcon,
   WarningStatusIcon
 } from "@bwp-web/assets";
-import { Fragment as Fragment3, jsx as jsx20 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx22 } from "react/jsx-runtime";
 function BiampBanner({ show, children, severity }) {
-  return /* @__PURE__ */ jsx20(Collapse2, { in: show, unmountOnExit: true, component: "aside", children: /* @__PURE__ */ jsx20(
-    Box10,
+  return /* @__PURE__ */ jsx22(Collapse2, { in: show, unmountOnExit: true, component: "aside", children: /* @__PURE__ */ jsx22(
+    Box12,
     {
       bgcolor: ({ palette }) => palette.background[severity],
       display: "flex",
@@ -2369,25 +2568,25 @@ function BiampBanner({ show, children, severity }) {
   ) });
 }
 var iconMapping = {
-  error: /* @__PURE__ */ jsx20(ErrorStatusIcon, { color: "error", sx: { width: 14, height: 14 } }),
-  warning: /* @__PURE__ */ jsx20(WarningStatusIcon, { color: "warning", sx: { width: 16, height: 14 } }),
-  success: /* @__PURE__ */ jsx20(SuccessStatusIcon, { color: "success", sx: { width: 14, height: 14 } }),
-  info: /* @__PURE__ */ jsx20(InfoStatusIcon, { color: "info", sx: { width: 14, height: 14 } })
+  error: /* @__PURE__ */ jsx22(ErrorStatusIcon, { color: "error", sx: { width: 14, height: 14 } }),
+  warning: /* @__PURE__ */ jsx22(WarningStatusIcon, { color: "warning", sx: { width: 16, height: 14 } }),
+  success: /* @__PURE__ */ jsx22(SuccessStatusIcon, { color: "success", sx: { width: 14, height: 14 } }),
+  info: /* @__PURE__ */ jsx22(InfoStatusIcon, { color: "info", sx: { width: 14, height: 14 } })
 };
 function BiampBannerIcon({ severity, children }) {
-  return /* @__PURE__ */ jsx20(Fragment3, { children: severity ? iconMapping[severity] : children });
+  return /* @__PURE__ */ jsx22(Fragment4, { children: severity ? iconMapping[severity] : children });
 }
 function BiampBannerContent({ children, ...props }) {
-  return /* @__PURE__ */ jsx20(Typography5, { textAlign: "center", variant: "h3", ...props, children });
+  return /* @__PURE__ */ jsx22(Typography5, { textAlign: "center", variant: "h3", ...props, children });
 }
 function BiampBannerActions({ children, ...props }) {
-  return /* @__PURE__ */ jsx20(Box10, { display: "flex", gap: 1, alignItems: "center", ...props, children });
+  return /* @__PURE__ */ jsx22(Box12, { display: "flex", gap: 1, alignItems: "center", ...props, children });
 }
 
 // src/BiampSegmentedButton/SegmentedButton.tsx
 import { Button as Button2, useTheme } from "@mui/material";
 import { alpha as alpha3 } from "@mui/material/styles";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function SegmentedButton({
   children,
   active,
@@ -2400,7 +2599,7 @@ function SegmentedButton({
   const backgroundColor = active ? isDarkMode ? theme.palette.grey[900] : theme.palette.common.white : "transparent";
   const textColor = active ? theme.palette.text.primary : theme.palette.text.secondary;
   const border = active ? "solid" : void 0;
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx23(
     Button2,
     {
       sx: {
@@ -2425,11 +2624,11 @@ function SegmentedButton({
 
 // src/BiampSegmentedButton/SegmentedButtonGroup.tsx
 import { Stack as Stack7, useTheme as useTheme2 } from "@mui/material";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function SegmentedButtonGroup({ children, sx, ...props }) {
   const theme = useTheme2();
   const isDarkMode = theme.palette.mode === "dark";
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx24(
     Stack7,
     {
       direction: "row",
@@ -2450,7 +2649,7 @@ function SegmentedButtonGroup({ children, sx, ...props }) {
 import { createContext, forwardRef, useContext } from "react";
 import {
   Autocomplete,
-  Box as Box11,
+  Box as Box13,
   Chip,
   InputAdornment as InputAdornment3,
   Paper,
@@ -2458,7 +2657,7 @@ import {
   Typography as Typography6
 } from "@mui/material";
 import { KeyArrowDownIcon, KeyArrowUpIcon, SearchIcon as SearchIcon3 } from "@bwp-web/assets";
-import { Fragment as Fragment4, jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs11 } from "react/jsx-runtime";
 var SearchContext = createContext({
   hasOptions: true,
   loading: false,
@@ -2469,8 +2668,8 @@ function KeyCap({
   children,
   variant = "icon"
 }) {
-  return /* @__PURE__ */ jsx23(
-    Box11,
+  return /* @__PURE__ */ jsx25(
+    Box13,
     {
       component: "kbd",
       sx: {
@@ -2497,8 +2696,8 @@ function KeyCap({
 var BiampGlobalSearchPaper = forwardRef(
   function BiampGlobalSearchPaper2({ children, ...props }, ref) {
     const { hasOptions, loading, noResultsText } = useContext(SearchContext);
-    return /* @__PURE__ */ jsxs10(Paper, { ref, ...props, children: [
-      hasOptions || loading ? children : /* @__PURE__ */ jsx23(
+    return /* @__PURE__ */ jsxs11(Paper, { ref, ...props, children: [
+      hasOptions || loading ? children : /* @__PURE__ */ jsx25(
         Typography6,
         {
           variant: "body2",
@@ -2507,8 +2706,8 @@ var BiampGlobalSearchPaper = forwardRef(
           children: noResultsText
         }
       ),
-      hasOptions && /* @__PURE__ */ jsxs10(
-        Box11,
+      hasOptions && /* @__PURE__ */ jsxs11(
+        Box13,
         {
           sx: {
             borderTop: ({ palette }) => `0.6px solid ${palette.dividers.secondary}`,
@@ -2518,12 +2717,12 @@ var BiampGlobalSearchPaper = forwardRef(
             p: 1.5
           },
           children: [
-            /* @__PURE__ */ jsxs10(Box11, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-              /* @__PURE__ */ jsxs10(Box11, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
-                /* @__PURE__ */ jsx23(KeyCap, { children: /* @__PURE__ */ jsx23(KeyArrowDownIcon, {}) }),
-                /* @__PURE__ */ jsx23(KeyCap, { children: /* @__PURE__ */ jsx23(KeyArrowUpIcon, {}) })
+            /* @__PURE__ */ jsxs11(Box13, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+              /* @__PURE__ */ jsxs11(Box13, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+                /* @__PURE__ */ jsx25(KeyCap, { children: /* @__PURE__ */ jsx25(KeyArrowDownIcon, {}) }),
+                /* @__PURE__ */ jsx25(KeyCap, { children: /* @__PURE__ */ jsx25(KeyArrowUpIcon, {}) })
               ] }),
-              /* @__PURE__ */ jsx23(
+              /* @__PURE__ */ jsx25(
                 Typography6,
                 {
                   variant: "caption",
@@ -2533,9 +2732,9 @@ var BiampGlobalSearchPaper = forwardRef(
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs10(Box11, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-              /* @__PURE__ */ jsx23(KeyCap, { variant: "text", children: "Enter" }),
-              /* @__PURE__ */ jsx23(
+            /* @__PURE__ */ jsxs11(Box13, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+              /* @__PURE__ */ jsx25(KeyCap, { variant: "text", children: "Enter" }),
+              /* @__PURE__ */ jsx25(
                 Typography6,
                 {
                   variant: "caption",
@@ -2552,16 +2751,16 @@ var BiampGlobalSearchPaper = forwardRef(
   }
 );
 function HighlightText({ text, query }) {
-  if (!query) return /* @__PURE__ */ jsx23(Fragment4, { children: text });
+  if (!query) return /* @__PURE__ */ jsx25(Fragment5, { children: text });
   const index = text.toLowerCase().indexOf(query.toLowerCase());
-  if (index === -1) return /* @__PURE__ */ jsx23(Fragment4, { children: text });
+  if (index === -1) return /* @__PURE__ */ jsx25(Fragment5, { children: text });
   const before = text.slice(0, index);
   const match = text.slice(index, index + query.length);
   const after = text.slice(index + query.length);
-  return /* @__PURE__ */ jsxs10(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs11(Fragment5, { children: [
     before,
-    /* @__PURE__ */ jsx23(
-      Box11,
+    /* @__PURE__ */ jsx25(
+      Box13,
       {
         component: "span",
         sx: {
@@ -2586,7 +2785,7 @@ function BiampGlobalSearchListItem({
   const maxChips = 3;
   const chips = option.associatedItems?.slice(0, maxChips) ?? [];
   const overflow = (option.associatedItems?.length ?? 0) - maxChips;
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "li",
     {
       ...rest,
@@ -2598,8 +2797,8 @@ function BiampGlobalSearchListItem({
         ...rest.style
       },
       children: [
-        option.icon && /* @__PURE__ */ jsx23(
-          Box11,
+        option.icon && /* @__PURE__ */ jsx25(
+          Box13,
           {
             sx: {
               width: 24,
@@ -2612,8 +2811,8 @@ function BiampGlobalSearchListItem({
             children: option.icon
           }
         ),
-        /* @__PURE__ */ jsx23(Typography6, { variant: "body2", noWrap: true, sx: { flexShrink: 0 }, children: /* @__PURE__ */ jsx23(HighlightText, { text: option.title, query }) }),
-        option.subtitle && /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx25(Typography6, { variant: "body2", noWrap: true, sx: { flexShrink: 0 }, children: /* @__PURE__ */ jsx25(HighlightText, { text: option.title, query }) }),
+        option.subtitle && /* @__PURE__ */ jsx25(
           Typography6,
           {
             className: "hoverContent",
@@ -2624,8 +2823,8 @@ function BiampGlobalSearchListItem({
             children: option.subtitle
           }
         ),
-        chips.length > 0 && /* @__PURE__ */ jsxs10(
-          Box11,
+        chips.length > 0 && /* @__PURE__ */ jsxs11(
+          Box13,
           {
             className: "hoverContent",
             sx: {
@@ -2637,7 +2836,7 @@ function BiampGlobalSearchListItem({
               px: 2
             },
             children: [
-              chips.map((item, i) => /* @__PURE__ */ jsx23(
+              chips.map((item, i) => /* @__PURE__ */ jsx25(
                 Chip,
                 {
                   size: "small",
@@ -2655,7 +2854,7 @@ function BiampGlobalSearchListItem({
                 },
                 i
               )),
-              overflow > 0 && /* @__PURE__ */ jsx23(
+              overflow > 0 && /* @__PURE__ */ jsx25(
                 Chip,
                 {
                   size: "small",
@@ -2675,8 +2874,8 @@ function BiampGlobalSearchListItem({
             ]
           }
         ),
-        option.endIcon && /* @__PURE__ */ jsx23(
-          Box11,
+        option.endIcon && /* @__PURE__ */ jsx25(
+          Box13,
           {
             className: "endIcon",
             sx: {
@@ -2723,7 +2922,7 @@ function BiampGlobalSearch({
     }
     onInputChange?.(event, value, reason);
   };
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx25(
     SearchContext.Provider,
     {
       value: {
@@ -2732,7 +2931,7 @@ function BiampGlobalSearch({
         noResultsText,
         query: inputValueProp ?? ""
       },
-      children: /* @__PURE__ */ jsx23(
+      children: /* @__PURE__ */ jsx25(
         Autocomplete,
         {
           options,
@@ -2740,7 +2939,7 @@ function BiampGlobalSearch({
           loading,
           onChange: handleChange,
           onInputChange: handleInputChange,
-          loadingText: /* @__PURE__ */ jsx23(Typography6, { variant: "body2", color: "text.secondary", children: "Loading\u2026" }),
+          loadingText: /* @__PURE__ */ jsx25(Typography6, { variant: "body2", color: "text.secondary", children: "Loading\u2026" }),
           freeSolo: true,
           filterOptions: (x) => x,
           getOptionLabel: (option) => typeof option === "string" ? option : option.title,
@@ -2764,7 +2963,7 @@ function BiampGlobalSearch({
               }
             }
           },
-          renderInput: (params) => /* @__PURE__ */ jsx23(
+          renderInput: (params) => /* @__PURE__ */ jsx25(
             TextField3,
             {
               ...params,
@@ -2780,15 +2979,15 @@ function BiampGlobalSearch({
               slotProps: {
                 input: {
                   ...params.InputProps,
-                  startAdornment: /* @__PURE__ */ jsxs10(Fragment4, { children: [
-                    /* @__PURE__ */ jsx23(InputAdornment3, { position: "start", children: /* @__PURE__ */ jsx23(SearchIcon3, {}) }),
+                  startAdornment: /* @__PURE__ */ jsxs11(Fragment5, { children: [
+                    /* @__PURE__ */ jsx25(InputAdornment3, { position: "start", children: /* @__PURE__ */ jsx25(SearchIcon3, {}) }),
                     params.InputProps.startAdornment
                   ] })
                 }
               }
             }
           ),
-          renderOption: (optionProps, option) => /* @__PURE__ */ jsx23(
+          renderOption: (optionProps, option) => /* @__PURE__ */ jsx25(
             BiampGlobalSearchListItem,
             {
               option,
@@ -2805,9 +3004,9 @@ function BiampGlobalSearch({
 
 // src/UserInitialsIcon/UserInitialsIcon.tsx
 var import_randomcolor = __toESM(require_randomColor(), 1);
-import { Box as Box12, Typography as Typography7 } from "@mui/material";
+import { Box as Box14, Typography as Typography7 } from "@mui/material";
 import { darken } from "@mui/material/styles";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var DEFAULT_SIZE = 40;
 var DEFAULT_BORDER_RADIUS = 1.5;
 var TEXT_RATIO = 0.4;
@@ -2825,8 +3024,8 @@ function UserInitialsIcon({
   const textColor = darken((0, import_randomcolor.default)({ luminosity: "dark", seed: id }), 0.3);
   const size = typeof width === "number" ? width : DEFAULT_SIZE;
   const fontSize = size * TEXT_RATIO;
-  return /* @__PURE__ */ jsx24(
-    Box12,
+  return /* @__PURE__ */ jsx26(
+    Box14,
     {
       minWidth: width,
       width,
@@ -2839,7 +3038,7 @@ function UserInitialsIcon({
       justifyContent: "center",
       sx: { ...sx },
       ...props,
-      children: /* @__PURE__ */ jsx24(
+      children: /* @__PURE__ */ jsx26(
         Typography7,
         {
           variant: "h3",
@@ -2862,9 +3061,9 @@ var getInitials = (name) => {
 };
 
 // src/DynamicSvgIcon/DynamicSvgIcon.tsx
-import { SvgIcon, Skeleton, Box as Box13 } from "@mui/material";
-import { useEffect as useEffect5, useState as useState6 } from "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { SvgIcon, Skeleton, Box as Box15 } from "@mui/material";
+import { useEffect as useEffect6, useState as useState6 } from "react";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var svgCache = /* @__PURE__ */ new Map();
 function clearDynamicSvgIconCache() {
   svgCache.clear();
@@ -2885,7 +3084,7 @@ function useDynamicSvgIcon(url, options = {}) {
   });
   const [loading, setLoading] = useState6(() => !svgCache.has(url));
   const [error, setError] = useState6(null);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!url) {
       setLoading(false);
       setError("No URL provided");
@@ -2966,7 +3165,7 @@ function DynamicSvgIcon({
     onError
   });
   if (loading) {
-    return /* @__PURE__ */ jsx25(
+    return /* @__PURE__ */ jsx27(
       Skeleton,
       {
         variant: skeletonVariant,
@@ -2976,8 +3175,8 @@ function DynamicSvgIcon({
     );
   }
   if (error || !svgContent) {
-    return /* @__PURE__ */ jsx25(
-      Box13,
+    return /* @__PURE__ */ jsx27(
+      Box15,
       {
         sx: {
           width,
@@ -2996,7 +3195,7 @@ function DynamicSvgIcon({
       }
     );
   }
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx27(
     SvgIcon,
     {
       ...svgIconProps,
@@ -3006,7 +3205,7 @@ function DynamicSvgIcon({
         width,
         height
       },
-      children: /* @__PURE__ */ jsx25("g", { dangerouslySetInnerHTML: { __html: svgContent } })
+      children: /* @__PURE__ */ jsx27("g", { dangerouslySetInnerHTML: { __html: svgContent } })
     }
   );
 }