@bwp-web/components 1.3.1 → 1.4.0

package/dist/index.js

@@ -421,37 +421,138 @@ function BiampWrapper({ children, sx, ...props }) {
 import {
   Box,
   ListItemButton,
-  Stack as Stack2
+  Stack as Stack2,
+  Typography
 } from "@mui/material";
-import { BiampLogoIcon } from "@bwp-web/assets";
+import { BiampLogoIcon, SquareRoundedArrowRightIcon } from "@bwp-web/assets";
+import { createContext, useContext, useState } from "react";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var BiampSidebarContext = createContext({
+  expanded: false
+});
 function BiampSidebar({
   children,
   bottomLogoIcon,
+  bottomLogoText,
+  expandable = true,
+  expanded: expandedProp,
+  defaultExpanded = false,
+  onExpandedChange,
   sx,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(Stack2, { width: "48px", height: "100%", sx: { ...sx }, ...props, children: [
-    /* @__PURE__ */ jsx2(Stack2, { height: "100%", children }),
-    bottomLogoIcon ?? /* @__PURE__ */ jsx2(BiampLogoIcon, { sx: { width: "48px", height: "15px" } })
-  ] });
+  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+  const isControlled = expandedProp !== void 0;
+  const expanded = isControlled ? expandedProp : internalExpanded;
+  const toggleExpanded = () => {
+    const next = !expanded;
+    if (!isControlled) setInternalExpanded(next);
+    onExpandedChange?.(next);
+  };
+  const width = expanded ? "240px" : "48px";
+  return /* @__PURE__ */ jsx2(BiampSidebarContext.Provider, { value: { expanded }, children: /* @__PURE__ */ jsxs(
+    Stack2,
+    {
+      sx: {
+        width,
+        minWidth: width,
+        height: "100%",
+        overflowX: "hidden",
+        transition: ({ transitions }) => transitions.create(["width", "min-width"], {
+          easing: transitions.easing.sharp,
+          duration: expanded ? transitions.duration.enteringScreen : transitions.duration.leavingScreen
+        }),
+        ...sx
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx2(Stack2, { sx: { flex: 1, minHeight: 0 }, children }),
+        expandable && /* @__PURE__ */ jsx2(
+          BiampSidebarIcon,
+          {
+            icon: /* @__PURE__ */ jsx2(
+              SquareRoundedArrowRightIcon,
+              {
+                sx: {
+                  transform: expanded ? "rotate(180deg)" : "none",
+                  transition: ({ transitions }) => transitions.create("transform", {
+                    duration: transitions.duration.shorter
+                  })
+                }
+              }
+            ),
+            name: "Collapse menu",
+            onClick: toggleExpanded
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Stack2,
+          {
+            direction: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+            sx: { mt: 2, overflow: "hidden" },
+            children: [
+              bottomLogoIcon ?? /* @__PURE__ */ jsx2(
+                BiampLogoIcon,
+                {
+                  sx: { width: "48px", height: "15px", flexShrink: 0 }
+                }
+              ),
+              bottomLogoText && /* @__PURE__ */ jsx2(
+                Typography,
+                {
+                  variant: "caption",
+                  fontWeight: 500,
+                  color: "sidebar.main",
+                  noWrap: true,
+                  sx: {
+                    opacity: expanded ? 1 : 0,
+                    transition: ({ transitions }) => transitions.create("opacity", {
+                      duration: expanded ? transitions.duration.enteringScreen : transitions.duration.leavingScreen
+                    })
+                  },
+                  children: `\xA9 ${(/* @__PURE__ */ new Date()).getFullYear()} ${bottomLogoText}`
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  ) });
 }
 function BiampSidebarIconList({
   children,
   sx,
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(Stack2, { height: "100%", sx: { gap: "4px", ...sx }, ...props, children });
+  return /* @__PURE__ */ jsx2(
+    Stack2,
+    {
+      sx: {
+        flex: 1,
+        minHeight: 0,
+        gap: "4px",
+        overflowY: "auto",
+        ...sx
+      },
+      ...props,
+      children
+    }
+  );
 }
 function BiampSidebarIcon({
   selected,
   icon,
   selectedIcon,
+  name,
   sx,
   ...props
 }) {
+  const { expanded } = useContext(BiampSidebarContext);
   const displayedSelectedIcon = selectedIcon ?? icon;
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsxs(
     ListItemButton,
     {
       selected,
@@ -459,16 +560,50 @@ function BiampSidebarIcon({
       disableRipple: true,
       sx: {
         minWidth: "48px",
-        maxWidth: "48px",
         minHeight: "48px",
         maxHeight: "48px",
         borderRadius: "8px",
-        justifyContent: "center",
+        justifyContent: "flex-start",
         alignItems: "center",
+        padding: 0,
+        overflow: "hidden",
+        color: "text.secondary",
         ...sx
       },
       ...props,
-      children: selected ? displayedSelectedIcon : icon
+      children: [
+        /* @__PURE__ */ jsx2(
+          Box,
+          {
+            sx: {
+              width: "48px",
+              height: "48px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0
+            },
+            children: selected ? displayedSelectedIcon : icon
+          }
+        ),
+        name && /* @__PURE__ */ jsx2(
+          Typography,
+          {
+            variant: "body1",
+            fontWeight: 600,
+            color: "inherit",
+            noWrap: true,
+            sx: {
+              pr: 2,
+              opacity: expanded ? 1 : 0,
+              transition: ({ transitions }) => transitions.create("opacity", {
+                duration: expanded ? transitions.duration.enteringScreen : transitions.duration.leavingScreen
+              })
+            },
+            children: name
+          }
+        )
+      ]
     }
   );
 }
@@ -507,8 +642,9 @@ import {
   Popover,
   Stack as Stack3,
   TextField,
-  Typography
+  Typography as Typography2
 } from "@mui/material";
+import { Children } from "react";
 import { BiampRedLogo, ExternalLinkIcon, SearchIcon } from "@bwp-web/assets";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function BiampHeader({ children, sx, ...props }) {
@@ -558,8 +694,8 @@ function BiampHeaderTitle({
           }
         ),
         /* @__PURE__ */ jsxs2(Stack3, { direction: "row", gap: 0.5, children: [
-          title && /* @__PURE__ */ jsx3(Typography, { variant: "h4", children: title }),
-          subtitle && /* @__PURE__ */ jsx3(Typography, { variant: "h4", color: "text.secondary", children: subtitle })
+          title && /* @__PURE__ */ jsx3(Typography2, { variant: "h4", children: title }),
+          subtitle && /* @__PURE__ */ jsx3(Typography2, { variant: "h4", color: "text.secondary", children: subtitle })
         ] })
       ]
     }
@@ -739,8 +875,8 @@ function BiampBuildAppContentItem({
       ...props,
       children: [
         /* @__PURE__ */ jsx3(Box2, { sx: { width: 54, height: 54 }, mb: 0.5, children: image }),
-        /* @__PURE__ */ jsx3(Typography, { variant: "caption", fontWeight: 600, mb: 0.5, children: name }),
-        /* @__PURE__ */ jsx3(Typography, { variant: "caption", color: "text.secondary", children: description }),
+        /* @__PURE__ */ jsx3(Typography2, { variant: "caption", fontWeight: 600, mb: 0.5, children: name }),
+        /* @__PURE__ */ jsx3(Typography2, { variant: "caption", color: "text.secondary", children: description }),
         button && /* @__PURE__ */ jsx3(Box2, { position: "absolute", top: "12px", right: "12px", children: button })
       ]
     }
@@ -751,12 +887,17 @@ function BiampEndUserAppContent({
   sx,
   ...props
 }) {
+  const isGrid = Children.count(children) > 1;
   return /* @__PURE__ */ jsx3(
     Stack3,
     {
       direction: "column",
       sx: {
         gap: 1.5,
+        ...isGrid && {
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr"
+        },
         ...sx
       },
       ...props,
@@ -797,8 +938,8 @@ function BiampEndUserAppContentItem({
       children: [
         /* @__PURE__ */ jsx3(Box2, { sx: { width: 32, height: 32 }, children: image }),
         /* @__PURE__ */ jsxs2(Stack3, { direction: "column", children: [
-          /* @__PURE__ */ jsx3(Typography, { variant: "caption", fontWeight: 600, children: name }),
-          /* @__PURE__ */ jsx3(Typography, { variant: "caption", color: "text.secondary", children: description })
+          /* @__PURE__ */ jsx3(Typography2, { variant: "caption", fontWeight: 600, children: name }),
+          /* @__PURE__ */ jsx3(Typography2, { variant: "caption", color: "text.secondary", children: description })
         ] }),
         /* @__PURE__ */ jsx3(ExternalLinkIcon, { sx: { width: 16, height: 16, ml: "auto" } })
       ]
@@ -892,33 +1033,30 @@ 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";
 
 // src/BiampTable/BiampTableStatusMessage.tsx
-import { Stack as Stack5, Typography as Typography2 } from "@mui/material";
+import { Stack as Stack5, Typography as Typography3 } from "@mui/material";
 import { cloneElement } from "react";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function BiampTableStatusMessage({
@@ -933,8 +1071,8 @@ function BiampTableStatusMessage({
       "aria-hidden": true,
       sx: { width: 56, height: 56, ...icon.props.sx }
     }),
-    /* @__PURE__ */ jsx4(Typography2, { variant: "h2", children: title }),
-    description && /* @__PURE__ */ jsx4(Typography2, { variant: "body1", children: description }),
+    /* @__PURE__ */ jsx4(Typography3, { variant: "h2", children: title }),
+    description && /* @__PURE__ */ jsx4(Typography3, { variant: "body1", children: description }),
     children
   ] });
 }
@@ -968,15 +1106,27 @@ 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";
+import { useCallback, useRef, useState as useState2 } from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
 function BiampTableTruncatedCell({
   children
 }) {
   const textRef = useRef(null);
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState2(false);
   const handleMouseEnter = useCallback(() => {
     const el = textRef.current;
     if (el && el.scrollWidth > el.clientWidth) {
@@ -1014,37 +1164,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 +1173,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 +1199,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 +1334,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,7 +1416,9 @@ function BiampTableRowInner({
   isRowClickable,
   enableRowSelection,
   enableExpanding,
+  alwaysExpanded,
   selectChildrenWithParent,
+  showExpandGuidelines,
   getRowLabel,
   hasExpandableRows,
   customColor,
@@ -1162,7 +1458,7 @@ function BiampTableRowInner({
         userRowOnKeyDown?.(e);
       } : userRowOnKeyDown,
       children: [
-        enableRowSelection && /* @__PURE__ */ jsx8(
+        enableRowSelection && /* @__PURE__ */ jsx9(
           TableCell,
           {
             padding: "checkbox",
@@ -1170,7 +1466,7 @@ function BiampTableRowInner({
               selectionCellSx,
               customColor ? { backgroundColor: customColor } : void 0
             ),
-            children: /* @__PURE__ */ jsx8(
+            children: /* @__PURE__ */ jsx9(
               Checkbox,
               {
                 checked: isSelected,
@@ -1192,68 +1488,33 @@ function BiampTableRowInner({
         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
           );
@@ -1264,12 +1525,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.customColor === next.customColor && 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 useState3 } from "react";
+function useLoadingDelay(loading, { delay = 150, minDuration = 500 } = {}) {
+  const [status, setStatus] = useState3("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,
@@ -1279,8 +1592,10 @@ function BiampTable({
   empty,
   enableRowSelection = false,
   enableExpanding = false,
+  alwaysExpanded = false,
   hideSelectAll,
   selectChildrenWithParent = false,
+  showExpandGuidelines = false,
   getRowLabel,
   setRowColor,
   slotProps,
@@ -1299,15 +1614,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: {
@@ -1318,7 +1638,7 @@ function BiampTable({
         ...sx
       },
       children: [
-        /* @__PURE__ */ jsxs5(
+        /* @__PURE__ */ jsxs6(
           MuiTable,
           {
             "aria-busy": showLoading || void 0,
@@ -1328,14 +1648,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(),
@@ -1350,8 +1670,8 @@ function BiampTable({
                         header
                       });
                       const { sx: userHeaderCellSx, ...restHeaderCellProps } = resolvedHeaderCell ?? {};
-                      return /* @__PURE__ */ jsx8(
-                        TableCell,
+                      return /* @__PURE__ */ jsx10(
+                        TableCell2,
                         {
                           ...restHeaderCellProps,
                           "data-sticky": sticky || void 0,
@@ -1363,7 +1683,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(),
@@ -1372,12 +1692,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()
                           )
@@ -1389,12 +1709,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,
@@ -1404,7 +1724,9 @@ function BiampTable({
                       isRowClickable,
                       enableRowSelection,
                       enableExpanding,
+                      alwaysExpanded,
                       selectChildrenWithParent,
+                      showExpandGuidelines,
                       getRowLabel,
                       hasExpandableRows,
                       customColor: setRowColor?.(row.original),
@@ -1418,14 +1740,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" } }) })
       ]
     }
   );
@@ -1433,7 +1755,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,
@@ -1441,7 +1763,7 @@ function BiampTableContainer({
   sx,
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx11(
     Stack6,
     {
       direction: "column",
@@ -1461,9 +1783,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,
@@ -1471,7 +1793,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 }) })
     }
   );
 }
@@ -1479,15 +1801,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
+  Typography as Typography4
 } 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;
 }
@@ -1530,7 +1852,7 @@ function BiampTableColumnVisibility({
   ...popoverProps
 }) {
   const allVisible = table.getAllLeafColumns().every((col) => col.getIsVisible());
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx13(
     Popover2,
     {
       anchorEl,
@@ -1551,41 +1873,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(Typography4, { 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 },
@@ -1594,7 +1916,7 @@ function BiampTableColumnVisibility({
                         }
                       }
                     ),
-                    /* @__PURE__ */ jsx11(Typography3, { variant: "caption", children: columnName })
+                    /* @__PURE__ */ jsx13(Typography4, { variant: "caption", children: columnName })
                   ]
                 },
                 column.id
@@ -1609,14 +1931,14 @@ function BiampTableColumnVisibility({
 
 // src/BiampTable/BiampTableToolbarColumnVisibility.tsx
 import { ColumnsIcon } from "@bwp-web/assets";
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 
 // src/BiampTable/BiampTableToolbarActionButton.tsx
 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,
@@ -1624,12 +1946,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,
@@ -1653,20 +1975,20 @@ 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,
   ...actionButtonProps
 }) {
-  const [anchorEl, setAnchorEl] = useState3(null);
+  const [anchorEl, setAnchorEl] = useState4(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,
@@ -1676,7 +1998,7 @@ function BiampTableToolbarColumnVisibility({
         ...actionButtonProps
       }
     ),
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx15(
       BiampTableColumnVisibility,
       {
         table,
@@ -1689,9 +2011,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",
@@ -1714,13 +2036,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",
@@ -1752,15 +2074,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",
@@ -1778,14 +2100,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",
@@ -1801,19 +2123,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
@@ -1824,22 +2146,22 @@ function BiampTableToolbarExport({
 // src/BiampTable/BiampTableToolbarFilters.tsx
 import {
   Badge as Badge2,
-  Box as Box8,
+  Box as Box10,
   Button,
   Divider as Divider2,
   Drawer,
   IconButton as IconButton4,
-  Typography as Typography4
+  Typography as Typography5
 } 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 { useId, useState as useState5 } from "react";
+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",
@@ -1847,14 +2169,14 @@ function BiampTableToolbarFilters({
   buttonLabel = "Filters",
   DrawerProps: drawerProps
 }) {
-  const [open, setOpen] = useState4(false);
+  const [open, setOpen] = useState5(false);
   const titleId = useId();
   function handleClose() {
     onApply?.();
     setOpen(false);
   }
-  return /* @__PURE__ */ jsxs8(Fragment2, { children: [
-    /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsxs9(Fragment3, { children: [
+    /* @__PURE__ */ jsx20(
       BiampTableToolbarActionButton,
       {
         label: buttonLabel,
@@ -1863,7 +2185,7 @@ function BiampTableToolbarFilters({
         onClick: () => setOpen(true)
       }
     ),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx20(
       Drawer,
       {
         anchor: "right",
@@ -1875,17 +2197,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",
@@ -1893,9 +2215,9 @@ function BiampTableToolbarFilters({
                     px: 3.5,
                     py: 2.5,
                     children: [
-                      /* @__PURE__ */ jsxs8(Typography4, { id: titleId, variant: "h2", children: [
+                      /* @__PURE__ */ jsxs9(Typography5, { id: titleId, variant: "h2", children: [
                         title,
-                        /* @__PURE__ */ jsx18(
+                        /* @__PURE__ */ jsx20(
                           Badge2,
                           {
                             badgeContent: activeFilterCount,
@@ -1904,21 +2226,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",
@@ -1931,8 +2253,8 @@ function BiampTableToolbarFilters({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs8(Box8, { display: "flex", children: [
-                /* @__PURE__ */ jsx18(
+              /* @__PURE__ */ jsxs9(Box10, { display: "flex", children: [
+                /* @__PURE__ */ jsx20(
                   Button,
                   {
                     variant: "overlay",
@@ -1943,7 +2265,7 @@ function BiampTableToolbarFilters({
                     children: resetLabel
                   }
                 ),
-                /* @__PURE__ */ jsx18(
+                /* @__PURE__ */ jsx20(
                   Button,
                   {
                     variant: "overlay",
@@ -1964,7 +2286,7 @@ function BiampTableToolbarFilters({
 
 // src/BiampTable/BiampTableToolbarSearch.tsx
 import {
-  Box as Box9,
+  Box as Box11,
   Collapse,
   IconButton as IconButton5,
   InputAdornment as InputAdornment2,
@@ -1973,16 +2295,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 useState6 } 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);
     };
@@ -2000,7 +2322,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",
@@ -2025,10 +2347,10 @@ function BiampTableToolbarSearch({
   ...textFieldProps
 }) {
   const isMobile = useMediaQuery((t) => t.breakpoints.down("md"));
-  const [inputValue, setInputValue] = useState5(defaultValue);
-  const [isExpanded, setIsExpanded] = useState5(false);
+  const [inputValue, setInputValue] = useState6(defaultValue);
+  const [isExpanded, setIsExpanded] = useState6(false);
   const debouncedOnChange = useDebouncedCallback(onChange, debounceDelay);
-  useEffect4(() => {
+  useEffect5(() => {
     setInputValue(defaultValue);
   }, [defaultValue]);
   const handleChange = (e) => {
@@ -2044,17 +2366,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",
@@ -2063,7 +2385,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",
@@ -2089,9 +2411,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",
@@ -2113,14 +2435,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",
@@ -2130,7 +2452,7 @@ function BiampTableToolbarSearch({
           )
         }
       ),
-      /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsx21(
         Collapse,
         {
           in: isExpanded || !!inputValue,
@@ -2356,9 +2678,9 @@ function downloadCsv(csvContent, filename) {
 
 // src/BiampBanner/BiampBanner.tsx
 import {
-  Box as Box10,
+  Box as Box12,
   Collapse as Collapse2,
-  Typography as Typography5
+  Typography as Typography6
 } from "@mui/material";
 import {
   ErrorStatusIcon,
@@ -2366,10 +2688,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",
@@ -2387,25 +2709,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(Typography6, { 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,
@@ -2418,7 +2740,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: {
@@ -2443,11 +2765,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",
@@ -2465,19 +2787,19 @@ function SegmentedButtonGroup({ children, sx, ...props }) {
 }
 
 // src/BiampGlobalSearch/BiampGlobalSearch.tsx
-import { createContext, forwardRef, useContext } from "react";
+import { createContext as createContext2, forwardRef, useContext as useContext2 } from "react";
 import {
   Autocomplete,
-  Box as Box11,
+  Box as Box13,
   Chip,
   InputAdornment as InputAdornment3,
   Paper,
   TextField as TextField3,
-  Typography as Typography6
+  Typography as Typography7
 } 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";
-var SearchContext = createContext({
+import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs11 } from "react/jsx-runtime";
+var SearchContext = createContext2({
   hasOptions: true,
   loading: false,
   noResultsText: "No results found",
@@ -2487,8 +2809,8 @@ function KeyCap({
   children,
   variant = "icon"
 }) {
-  return /* @__PURE__ */ jsx23(
-    Box11,
+  return /* @__PURE__ */ jsx25(
+    Box13,
     {
       component: "kbd",
       sx: {
@@ -2514,10 +2836,10 @@ 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(
-        Typography6,
+    const { hasOptions, loading, noResultsText } = useContext2(SearchContext);
+    return /* @__PURE__ */ jsxs11(Paper, { ref, ...props, children: [
+      hasOptions || loading ? children : /* @__PURE__ */ jsx25(
+        Typography7,
         {
           variant: "body2",
           color: "text.secondary",
@@ -2525,8 +2847,8 @@ var BiampGlobalSearchPaper = forwardRef(
           children: noResultsText
         }
       ),
-      hasOptions && /* @__PURE__ */ jsxs10(
-        Box11,
+      hasOptions && /* @__PURE__ */ jsxs11(
+        Box13,
         {
           sx: {
             borderTop: ({ palette }) => `0.6px solid ${palette.dividers.secondary}`,
@@ -2536,13 +2858,13 @@ 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(
-                Typography6,
+              /* @__PURE__ */ jsx25(
+                Typography7,
                 {
                   variant: "caption",
                   fontWeight: (theme) => theme.typography.fontWeightMedium,
@@ -2551,10 +2873,10 @@ var BiampGlobalSearchPaper = forwardRef(
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs10(Box11, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-              /* @__PURE__ */ jsx23(KeyCap, { variant: "text", children: "Enter" }),
-              /* @__PURE__ */ jsx23(
-                Typography6,
+            /* @__PURE__ */ jsxs11(Box13, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+              /* @__PURE__ */ jsx25(KeyCap, { variant: "text", children: "Enter" }),
+              /* @__PURE__ */ jsx25(
+                Typography7,
                 {
                   variant: "caption",
                   fontWeight: (theme) => theme.typography.fontWeightMedium,
@@ -2570,16 +2892,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: {
@@ -2599,12 +2921,12 @@ function BiampGlobalSearchListItem({
   option,
   props: liProps
 }) {
-  const { query } = useContext(SearchContext);
+  const { query } = useContext2(SearchContext);
   const { key, ...rest } = liProps;
   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,
@@ -2616,8 +2938,8 @@ function BiampGlobalSearchListItem({
         ...rest.style
       },
       children: [
-        option.icon && /* @__PURE__ */ jsx23(
-          Box11,
+        option.icon && /* @__PURE__ */ jsx25(
+          Box13,
           {
             sx: {
               width: 24,
@@ -2630,9 +2952,9 @@ 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(
-          Typography6,
+        /* @__PURE__ */ jsx25(Typography7, { variant: "body2", noWrap: true, sx: { flexShrink: 0 }, children: /* @__PURE__ */ jsx25(HighlightText, { text: option.title, query }) }),
+        option.subtitle && /* @__PURE__ */ jsx25(
+          Typography7,
           {
             className: "hoverContent",
             variant: "body2",
@@ -2642,8 +2964,8 @@ function BiampGlobalSearchListItem({
             children: option.subtitle
           }
         ),
-        chips.length > 0 && /* @__PURE__ */ jsxs10(
-          Box11,
+        chips.length > 0 && /* @__PURE__ */ jsxs11(
+          Box13,
           {
             className: "hoverContent",
             sx: {
@@ -2655,7 +2977,7 @@ function BiampGlobalSearchListItem({
               px: 2
             },
             children: [
-              chips.map((item, i) => /* @__PURE__ */ jsx23(
+              chips.map((item, i) => /* @__PURE__ */ jsx25(
                 Chip,
                 {
                   size: "small",
@@ -2673,7 +2995,7 @@ function BiampGlobalSearchListItem({
                 },
                 i
               )),
-              overflow > 0 && /* @__PURE__ */ jsx23(
+              overflow > 0 && /* @__PURE__ */ jsx25(
                 Chip,
                 {
                   size: "small",
@@ -2693,8 +3015,8 @@ function BiampGlobalSearchListItem({
             ]
           }
         ),
-        option.endIcon && /* @__PURE__ */ jsx23(
-          Box11,
+        option.endIcon && /* @__PURE__ */ jsx25(
+          Box13,
           {
             className: "endIcon",
             sx: {
@@ -2741,7 +3063,7 @@ function BiampGlobalSearch({
     }
     onInputChange?.(event, value, reason);
   };
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx25(
     SearchContext.Provider,
     {
       value: {
@@ -2750,7 +3072,7 @@ function BiampGlobalSearch({
         noResultsText,
         query: inputValueProp ?? ""
       },
-      children: /* @__PURE__ */ jsx23(
+      children: /* @__PURE__ */ jsx25(
         Autocomplete,
         {
           options,
@@ -2758,7 +3080,7 @@ function BiampGlobalSearch({
           loading,
           onChange: handleChange,
           onInputChange: handleInputChange,
-          loadingText: /* @__PURE__ */ jsx23(Typography6, { variant: "body2", color: "text.secondary", children: "Loading\u2026" }),
+          loadingText: /* @__PURE__ */ jsx25(Typography7, { variant: "body2", color: "text.secondary", children: "Loading\u2026" }),
           freeSolo: true,
           filterOptions: (x) => x,
           getOptionLabel: (option) => typeof option === "string" ? option : option.title,
@@ -2782,7 +3104,7 @@ function BiampGlobalSearch({
               }
             }
           },
-          renderInput: (params) => /* @__PURE__ */ jsx23(
+          renderInput: (params) => /* @__PURE__ */ jsx25(
             TextField3,
             {
               ...params,
@@ -2798,15 +3120,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,
@@ -2823,9 +3145,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 Typography8 } 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;
@@ -2843,8 +3165,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,
@@ -2857,8 +3179,8 @@ function UserInitialsIcon({
       justifyContent: "center",
       sx: { ...sx },
       ...props,
-      children: /* @__PURE__ */ jsx24(
-        Typography7,
+      children: /* @__PURE__ */ jsx26(
+        Typography8,
         {
           variant: "h3",
           color: textColor,
@@ -2880,9 +3202,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 useState7 } from "react";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var svgCache = /* @__PURE__ */ new Map();
 function clearDynamicSvgIconCache() {
   svgCache.clear();
@@ -2893,17 +3215,17 @@ function applyCurrentColor(svg) {
 function useDynamicSvgIcon(url, options = {}) {
   const { replaceColors = false, onLoad, onError } = options;
   const transform = replaceColors ? applyCurrentColor : (s) => s;
-  const [svgContent, setSvgContent] = useState6(() => {
+  const [svgContent, setSvgContent] = useState7(() => {
     const cached = svgCache.get(url);
     return cached ? transform(cached.innerContent) : null;
   });
-  const [svgViewBox, setSvgViewBox] = useState6(() => {
+  const [svgViewBox, setSvgViewBox] = useState7(() => {
     const cached = svgCache.get(url);
     return cached?.viewBox ?? null;
   });
-  const [loading, setLoading] = useState6(() => !svgCache.has(url));
-  const [error, setError] = useState6(null);
-  useEffect5(() => {
+  const [loading, setLoading] = useState7(() => !svgCache.has(url));
+  const [error, setError] = useState7(null);
+  useEffect6(() => {
     if (!url) {
       setLoading(false);
       setError("No URL provided");
@@ -2984,7 +3306,7 @@ function DynamicSvgIcon({
     onError
   });
   if (loading) {
-    return /* @__PURE__ */ jsx25(
+    return /* @__PURE__ */ jsx27(
       Skeleton,
       {
         variant: skeletonVariant,
@@ -2994,8 +3316,8 @@ function DynamicSvgIcon({
     );
   }
   if (error || !svgContent) {
-    return /* @__PURE__ */ jsx25(
-      Box13,
+    return /* @__PURE__ */ jsx27(
+      Box15,
       {
         sx: {
           width,
@@ -3014,7 +3336,7 @@ function DynamicSvgIcon({
       }
     );
   }
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx27(
     SvgIcon,
     {
       ...svgIconProps,
@@ -3024,7 +3346,7 @@ function DynamicSvgIcon({
         width,
         height
       },
-      children: /* @__PURE__ */ jsx25("g", { dangerouslySetInnerHTML: { __html: svgContent } })
+      children: /* @__PURE__ */ jsx27("g", { dangerouslySetInnerHTML: { __html: svgContent } })
     }
   );
 }