@bwp-web/components 1.9.6 → 1.10.0

package/dist/index.js

@@ -154,8 +154,8 @@ var require_randomColor = __commonJS({
             return "hsl(" + hsl[0] + ", " + hsl[1] + "%, " + hsl[2] + "%)";
           case "hsla":
             var hslColor = HSVtoHSL(hsv);
-            var alpha5 = options.alpha || Math.random();
-            return "hsla(" + hslColor[0] + ", " + hslColor[1] + "%, " + hslColor[2] + "%, " + alpha5 + ")";
+            var alpha6 = options.alpha || Math.random();
+            return "hsla(" + hslColor[0] + ", " + hslColor[1] + "%, " + hslColor[2] + "%, " + alpha6 + ")";
           case "rgbArray":
             return HSVtoRGB(hsv);
           case "rgb":
@@ -163,8 +163,8 @@ var require_randomColor = __commonJS({
             return "rgb(" + rgb.join(", ") + ")";
           case "rgba":
             var rgbColor = HSVtoRGB(hsv);
-            var alpha5 = options.alpha || Math.random();
-            return "rgba(" + rgbColor.join(", ") + ", " + alpha5 + ")";
+            var alpha6 = options.alpha || Math.random();
+            return "rgba(" + rgbColor.join(", ") + ", " + alpha6 + ")";
           default:
             return HSVtoHex(hsv);
         }
@@ -1200,6 +1200,7 @@ function BiampGlobalSearch({
           freeSolo: true,
           filterOptions: (x) => x,
           getOptionLabel: (option) => typeof option === "string" ? option : option.title,
+          getOptionKey: (option) => typeof option === "string" ? option : option.id ?? option.title,
           noOptionsText: noResultsText,
           slots: { paper: BiampGlobalSearchPaper },
           slotProps: {
@@ -1421,7 +1422,7 @@ function BiampHeaderButton({
     }
   );
 }
-var POPOVER_MAX_WIDTH = 350;
+var APP_POPOVER_MAX_WIDTH = 350;
 function BiampAppPopover({
   children,
   open,
@@ -1433,7 +1434,7 @@ function BiampAppPopover({
     {
       open,
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
-      transformOrigin: { vertical: -8, horizontal: POPOVER_MAX_WIDTH - 4 },
+      transformOrigin: { vertical: -4, horizontal: APP_POPOVER_MAX_WIDTH },
       sx: { ...sx },
       slotProps: {
         paper: {
@@ -1444,7 +1445,7 @@ function BiampAppPopover({
             outlineStyle: "solid",
             outlineColor: ({ palette }) => palette.divider,
             boxShadow: ({ palette }) => `0px 4px 50px 0px ${alpha(palette.grey[900], 0.1)}`,
-            maxWidth: POPOVER_MAX_WIDTH,
+            maxWidth: APP_POPOVER_MAX_WIDTH,
             width: "100%",
             p: 2,
             display: "flex",
@@ -1725,10 +1726,228 @@ function BiampHeaderProfile({
   );
 }
 
+// src/BiampNotificationPopover/BiampNotificationPopover.tsx
+import {
+  alpha as alpha2,
+  Box as Box5,
+  Popover as Popover2,
+  Stack as Stack5
+} from "@mui/material";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var NOTIFICATION_POPOVER_MAX_WIDTH = 420;
+function BiampNotificationPopover({
+  children,
+  open,
+  sx,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(
+    Popover2,
+    {
+      open,
+      anchorOrigin: { vertical: "bottom", horizontal: "right" },
+      transformOrigin: {
+        vertical: -4,
+        horizontal: NOTIFICATION_POPOVER_MAX_WIDTH
+      },
+      sx: { ...sx },
+      slotProps: {
+        paper: {
+          sx: {
+            borderRadius: "12px",
+            backgroundImage: "none",
+            outlineWidth: "0.6px",
+            outlineStyle: "solid",
+            outlineColor: ({ palette }) => palette.divider,
+            boxShadow: ({ palette }) => `0px 4px 50px 0px ${alpha2(palette.grey[900], 0.1)}`,
+            maxWidth: NOTIFICATION_POPOVER_MAX_WIDTH,
+            maxHeight: "650px",
+            width: "100%",
+            display: "flex",
+            flexDirection: "column",
+            overflow: "hidden"
+          }
+        }
+      },
+      ...props,
+      children
+    }
+  );
+}
+function BiampNotificationPopoverHeader({
+  sx,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(
+    Stack5,
+    {
+      direction: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      sx: {
+        flexShrink: 0,
+        gap: 2,
+        px: 2,
+        pt: 2,
+        ...sx
+      },
+      ...props
+    }
+  );
+}
+function BiampNotificationPopoverBody({
+  sx,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(
+    Box5,
+    {
+      sx: {
+        flex: 1,
+        minHeight: 0,
+        overflowY: "auto",
+        overscrollBehavior: "none",
+        px: 2,
+        pb: 2,
+        ...sx
+      },
+      ...props
+    }
+  );
+}
+
+// src/BiampListPopover/BiampListPopover.tsx
+import {
+  alpha as alpha3,
+  Box as Box6,
+  List,
+  ListItem,
+  Popover as Popover3
+} from "@mui/material";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function BiampListPopover({
+  children,
+  slotProps,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(
+    Popover3,
+    {
+      slotProps: {
+        ...slotProps,
+        paper: {
+          sx: ({ palette }) => ({
+            borderRadius: "6px",
+            backgroundImage: "none",
+            border: `0.6px solid ${palette.dividers.secondary}`,
+            boxShadow: `0px 1px 1px 0px ${alpha3(palette.common.black, 0.05)}`,
+            minWidth: "150px"
+          }),
+          ...slotProps?.paper ?? {}
+        }
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx7(List, { dense: true, disablePadding: true, children })
+    }
+  );
+}
+var listItemSx = {
+  py: 0,
+  pr: 1.5,
+  pl: 0,
+  alignItems: "center",
+  cursor: "pointer",
+  "&:hover": {
+    backgroundColor: ({ palette }) => palette.mode === "dark" ? palette.grey[800] : palette.grey[100]
+  }
+};
+function BiampListPopoverItem({
+  sx,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(
+    ListItem,
+    {
+      dense: true,
+      sx: [listItemSx, ...Array.isArray(sx) ? sx : [sx]],
+      ...props
+    }
+  );
+}
+function BiampListPopoverScrollArea({
+  maxHeight = 340,
+  sx,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(
+    Box6,
+    {
+      sx: { maxHeight, overflow: "auto", overscrollBehavior: "none", ...sx },
+      ...props
+    }
+  );
+}
+
+// src/BiampCheckboxListPopover/BiampCheckboxListPopover.tsx
+import { Checkbox, Divider as Divider2, Typography as Typography4 } from "@mui/material";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function resolveAria(label, ariaLabel) {
+  if (ariaLabel) return ariaLabel;
+  return typeof label === "string" ? label : void 0;
+}
+function BiampCheckboxListPopover({
+  items,
+  onToggleItem,
+  showSelectAll = true,
+  selectAllLabel = "Show all",
+  onToggleAll,
+  maxHeight,
+  ...popoverProps
+}) {
+  const allChecked = items.length > 0 && items.every((item) => item.checked);
+  return /* @__PURE__ */ jsxs6(BiampListPopover, { ...popoverProps, children: [
+    showSelectAll && /* @__PURE__ */ jsxs6(Fragment2, { children: [
+      /* @__PURE__ */ jsxs6(BiampListPopoverItem, { onClick: () => onToggleAll?.(!allChecked), children: [
+        /* @__PURE__ */ jsx8(
+          Checkbox,
+          {
+            checked: allChecked,
+            slotProps: { input: { "aria-label": selectAllLabel } }
+          }
+        ),
+        /* @__PURE__ */ jsx8(Typography4, { variant: "caption", fontWeight: 600, children: selectAllLabel })
+      ] }),
+      /* @__PURE__ */ jsx8(Divider2, {})
+    ] }),
+    /* @__PURE__ */ jsx8(BiampListPopoverScrollArea, { maxHeight, children: items.map((item) => /* @__PURE__ */ jsxs6(
+      BiampListPopoverItem,
+      {
+        onClick: () => onToggleItem(item.id),
+        children: [
+          /* @__PURE__ */ jsx8(
+            Checkbox,
+            {
+              checked: item.checked,
+              sx: { py: 1 },
+              slotProps: {
+                input: {
+                  "aria-label": resolveAria(item.label, item.ariaLabel)
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx8(Typography4, { variant: "caption", children: item.label })
+        ]
+      },
+      item.id
+    )) })
+  ] });
+}
+
 // src/BiampTable/BiampTable.tsx
 import {
-  Box as Box8,
-  Checkbox as Checkbox2,
+  Box as Box10,
+  Checkbox as Checkbox3,
   Table as MuiTable,
   TableBody,
   TableCell as TableCell2,
@@ -1750,9 +1969,9 @@ import { useEffect as useEffect2, useRef as useRef3 } from "react";
 import { NoResultsIcon } from "@bwp-web/assets";
 
 // src/BiampTable/BiampTableStatusMessage.tsx
-import { Stack as Stack5, Typography as Typography4 } from "@mui/material";
+import { Stack as Stack6, Typography as Typography5 } from "@mui/material";
 import { cloneElement } from "react";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function BiampTableStatusMessage({
   icon,
   title,
@@ -1760,25 +1979,25 @@ function BiampTableStatusMessage({
   children,
   ...stackProps
 }) {
-  return /* @__PURE__ */ jsxs6(Stack5, { alignItems: "center", gap: 1.5, ...stackProps, children: [
+  return /* @__PURE__ */ jsxs7(Stack6, { alignItems: "center", gap: 1.5, ...stackProps, children: [
     cloneElement(icon, {
       "aria-hidden": true,
       sx: { width: 56, height: 56, ...icon.props.sx }
     }),
-    /* @__PURE__ */ jsx6(Typography4, { variant: "h2", children: title }),
-    description && /* @__PURE__ */ jsx6(Typography4, { variant: "body1", children: description }),
+    /* @__PURE__ */ jsx9(Typography5, { variant: "h2", children: title }),
+    description && /* @__PURE__ */ jsx9(Typography5, { variant: "body1", children: description }),
     children
   ] });
 }
 
 // src/BiampTable/BiampTableEmptyState.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function BiampTableEmptyState({
-  icon = /* @__PURE__ */ jsx7(NoResultsIcon, {}),
+  icon = /* @__PURE__ */ jsx10(NoResultsIcon, {}),
   title = "Nothing to show",
   ...rest
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx10(
     BiampTableStatusMessage,
     {
       role: "status",
@@ -1791,19 +2010,19 @@ function BiampTableEmptyState({
 
 // src/BiampTable/BiampTableErrorState.tsx
 import { ServiceNotReachableIcon } from "@bwp-web/assets";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function BiampTableErrorState({
-  icon = /* @__PURE__ */ jsx8(ServiceNotReachableIcon, {}),
+  icon = /* @__PURE__ */ jsx11(ServiceNotReachableIcon, {}),
   title = "Failed to load",
   ...rest
 }) {
-  return /* @__PURE__ */ jsx8(BiampTableStatusMessage, { role: "alert", icon, title, ...rest });
+  return /* @__PURE__ */ jsx11(BiampTableStatusMessage, { role: "alert", icon, title, ...rest });
 }
 
 // src/BiampTable/BiampTableRow.tsx
 import {
-  Box as Box7,
-  Checkbox,
+  Box as Box9,
+  Checkbox as Checkbox2,
   IconButton as IconButton2,
   TableCell,
   TableRow
@@ -1813,9 +2032,9 @@ import { flexRender } from "@tanstack/react-table";
 import React4 from "react";
 
 // src/BiampTable/BiampTableTruncatedCell.tsx
-import { Box as Box5, Tooltip as Tooltip2 } from "@mui/material";
+import { Box as Box7, Tooltip as Tooltip2 } from "@mui/material";
 import { useCallback, useRef as useRef2, useState as useState5 } from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function BiampTableTruncatedCell({
   children
 }) {
@@ -1830,7 +2049,7 @@ function BiampTableTruncatedCell({
   const handleMouseLeave = useCallback(() => {
     setOpen(false);
   }, []);
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx12(
     Tooltip2,
     {
       title: children,
@@ -1838,8 +2057,8 @@ function BiampTableTruncatedCell({
       arrow: true,
       placement: "top",
       disableInteractive: true,
-      children: /* @__PURE__ */ jsx9(
-        Box5,
+      children: /* @__PURE__ */ jsx12(
+        Box7,
         {
           "data-truncate": true,
           ref: textRef,
@@ -1896,8 +2115,8 @@ function cellSx(sticky, minWidth, zIndex) {
 }
 
 // src/BiampTable/BiampTableExpandGuidelines.tsx
-import { Box as Box6 } from "@mui/material";
-import { Fragment as Fragment2, jsx as jsx10 } from "react/jsx-runtime";
+import { Box as Box8 } from "@mui/material";
+import { Fragment as Fragment3, jsx as jsx13 } from "react/jsx-runtime";
 var guidelineIndent = 28;
 var guidelineCellPaddingLeft = 12;
 var guidelineLineOffsetFromParentText = 4;
@@ -1931,8 +2150,8 @@ function ExpandGuidelines({ row }) {
     const ancestor = getAncestorAtDepth(row, k);
     if (!ancestor || isLastChildOfParent(ancestor)) continue;
     lines.push(
-      /* @__PURE__ */ jsx10(
-        Box6,
+      /* @__PURE__ */ jsx13(
+        Box8,
         {
           "aria-hidden": true,
           sx: {
@@ -1954,8 +2173,8 @@ function ExpandGuidelines({ row }) {
   const rowIsFirst = isFirstChildOfParent(row);
   const elbowTopOffset = rowIsFirst ? -guidelineFirstChildTopExtension : 0;
   lines.push(
-    /* @__PURE__ */ jsx10(
-      Box6,
+    /* @__PURE__ */ jsx13(
+      Box8,
       {
         "aria-hidden": true,
         sx: {
@@ -1973,8 +2192,8 @@ function ExpandGuidelines({ row }) {
   );
   if (!rowIsLast) {
     lines.push(
-      /* @__PURE__ */ jsx10(
-        Box6,
+      /* @__PURE__ */ jsx13(
+        Box8,
         {
           "aria-hidden": true,
           sx: {
@@ -1992,8 +2211,8 @@ function ExpandGuidelines({ row }) {
     );
   }
   lines.push(
-    /* @__PURE__ */ jsx10(
-      Box6,
+    /* @__PURE__ */ jsx13(
+      Box8,
       {
         "aria-hidden": true,
         sx: {
@@ -2009,11 +2228,11 @@ function ExpandGuidelines({ row }) {
       "h-elbow"
     )
   );
-  return /* @__PURE__ */ jsx10(Fragment2, { children: lines });
+  return /* @__PURE__ */ jsx13(Fragment3, { children: lines });
 }
 
 // src/BiampTable/BiampTableRow.tsx
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 var rowCursorPointerSx = { cursor: "pointer" };
 var selectionCellSx = {
   position: "sticky",
@@ -2036,7 +2255,7 @@ function ExpandToggle({
   rowLabel
 }) {
   if (row.getCanExpand()) {
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx14(
       IconButton2,
       {
         variant: "none",
@@ -2046,13 +2265,13 @@ function ExpandToggle({
         },
         "aria-label": isExpanded ? `Collapse ${rowLabel}` : `Expand ${rowLabel}`,
         "aria-expanded": isExpanded,
-        children: isExpanded ? /* @__PURE__ */ jsx11(
+        children: isExpanded ? /* @__PURE__ */ jsx14(
           ChevronDownIcon,
           {
             variant: "xs",
             sx: { color: ({ palette }) => palette.text.secondary }
           }
-        ) : /* @__PURE__ */ jsx11(
+        ) : /* @__PURE__ */ jsx14(
           ChevronRightIcon,
           {
             variant: "xs",
@@ -2062,7 +2281,7 @@ function ExpandToggle({
       }
     );
   }
-  if (hasExpandableRows) return /* @__PURE__ */ jsx11(Box7, { sx: expandPlaceholderSx });
+  if (hasExpandableRows) return /* @__PURE__ */ jsx14(Box9, { sx: expandPlaceholderSx });
   return null;
 }
 function renderCellContent({
@@ -2078,18 +2297,18 @@ function renderCellContent({
   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__ */ jsx11(BiampTableTruncatedCell, { children: content }) : content;
+  const truncated = truncate ? /* @__PURE__ */ jsx14(BiampTableTruncatedCell, { children: content }) : content;
   if (!isExpandCell) return truncated;
   if (alwaysExpanded) {
-    return row.depth > 0 ? /* @__PURE__ */ jsx11(Box7, { sx: { pl: `${row.depth * 28}px` }, children: truncated }) : truncated;
+    return row.depth > 0 ? /* @__PURE__ */ jsx14(Box9, { sx: { pl: `${row.depth * 28}px` }, children: truncated }) : truncated;
   }
   const rowLabel = getRowLabel ? getRowLabel(row.original) : `row ${row.index + 1}`;
-  return /* @__PURE__ */ jsxs7(
-    Box7,
+  return /* @__PURE__ */ jsxs8(
+    Box9,
     {
       sx: row.depth > 0 ? { ...expandCellBaseSx, pl: `${row.depth * 12}px` } : expandCellBaseSx,
       children: [
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx14(
           ExpandToggle,
           {
             row,
@@ -2128,7 +2347,7 @@ function BiampTableRowInner({
     onKeyDown: userRowOnKeyDown,
     ...restRowProps
   } = resolvedRow ?? {};
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     TableRow,
     {
       ...restRowProps,
@@ -2153,7 +2372,7 @@ function BiampTableRowInner({
         userRowOnKeyDown?.(e);
       } : userRowOnKeyDown,
       children: [
-        enableRowSelection && /* @__PURE__ */ jsx11(
+        enableRowSelection && /* @__PURE__ */ jsx14(
           TableCell,
           {
             padding: "checkbox",
@@ -2161,8 +2380,8 @@ function BiampTableRowInner({
               selectionCellSx,
               customColor ? { backgroundColor: customColor } : void 0
             ),
-            children: /* @__PURE__ */ jsx11(
-              Checkbox,
+            children: /* @__PURE__ */ jsx14(
+              Checkbox2,
               {
                 checked: isSelected,
                 disabled: !row.getCanSelect(),
@@ -2186,7 +2405,7 @@ function BiampTableRowInner({
           const showGuidelinesOnCell = isExpandCell && showExpandGuidelines && alwaysExpanded && row.depth > 0;
           const resolvedCell = resolveSlot(cellSlotProps, { cell });
           const { sx: userCellSx, ...restCellProps } = resolvedCell ?? {};
-          return /* @__PURE__ */ jsxs7(
+          return /* @__PURE__ */ jsxs8(
             TableCell,
             {
               ...restCellProps,
@@ -2199,7 +2418,7 @@ function BiampTableRowInner({
                 userCellSx
               ),
               children: [
-                showGuidelinesOnCell && /* @__PURE__ */ jsx11(ExpandGuidelines, { row }),
+                showGuidelinesOnCell && /* @__PURE__ */ jsx14(ExpandGuidelines, { row }),
                 renderCellContent({
                   cell,
                   row,
@@ -2228,7 +2447,7 @@ var BiampTableRow = React4.memo(
 );
 
 // src/BiampTable/BiampTable.tsx
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 var overlaySx = {
   position: "absolute",
   top: 0,
@@ -2289,10 +2508,10 @@ function BiampTable({
   const hasExpandableRows = enableExpanding && rows.some((r) => r.getCanExpand());
   const showError = !!error && !loading;
   const showEmpty = !showError && !loading && rows.length === 0;
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     TableContainer,
     {
-      component: Box8,
+      component: Box10,
       ...boxProps,
       ref: containerRef,
       sx: {
@@ -2303,7 +2522,7 @@ function BiampTable({
         ...sx
       },
       children: [
-        /* @__PURE__ */ jsxs8(
+        /* @__PURE__ */ jsxs9(
           MuiTable,
           {
             "aria-busy": showLoading || void 0,
@@ -2313,14 +2532,14 @@ function BiampTable({
               userTableSx
             ),
             children: [
-              /* @__PURE__ */ jsx12(TableHead, { ...restHeadSlotProps, sx: mergeSx(userHeadSx), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs8(
+              /* @__PURE__ */ jsx15(TableHead, { ...restHeadSlotProps, sx: mergeSx(userHeadSx), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs9(
                 TableRow2,
                 {
                   ...restHeaderRowSlotProps,
                   sx: mergeSx(userHeaderRowSx),
                   children: [
-                    enableRowSelection && /* @__PURE__ */ jsx12(TableCell2, { padding: "checkbox", sx: headerSelectionCellSx, children: !hideSelectAll && /* @__PURE__ */ jsx12(
-                      Checkbox2,
+                    enableRowSelection && /* @__PURE__ */ jsx15(TableCell2, { padding: "checkbox", sx: headerSelectionCellSx, children: !hideSelectAll && /* @__PURE__ */ jsx15(
+                      Checkbox3,
                       {
                         checked: table.getIsAllPageRowsSelected(),
                         indeterminate: table.getIsSomePageRowsSelected(),
@@ -2335,7 +2554,7 @@ function BiampTable({
                         header
                       });
                       const { sx: userHeaderCellSx, ...restHeaderCellProps } = resolvedHeaderCell ?? {};
-                      return /* @__PURE__ */ jsx12(
+                      return /* @__PURE__ */ jsx15(
                         TableCell2,
                         {
                           ...restHeaderCellProps,
@@ -2348,7 +2567,7 @@ function BiampTable({
                             cellSx(sticky, header.column.columnDef.meta?.minWidth, 3),
                             userHeaderCellSx
                           ),
-                          children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsx12(
+                          children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsx15(
                             TableSortLabel,
                             {
                               active: !!header.column.getIsSorted(),
@@ -2374,12 +2593,12 @@ function BiampTable({
                 },
                 headerGroup.id
               )) }),
-              /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx15(
                 TableBody,
                 {
                   ...restBodySlotProps,
                   sx: mergeSx({ opacity: showLoading ? 0.3 : 1 }, userBodySx),
-                  children: !showError && rows.map((row) => /* @__PURE__ */ jsx12(
+                  children: !showError && rows.map((row) => /* @__PURE__ */ jsx15(
                     BiampTableRow,
                     {
                       row,
@@ -2406,22 +2625,22 @@ function BiampTable({
             ]
           }
         ),
-        showError && /* @__PURE__ */ jsx12(Box8, { sx: overlaySx, children: error === true ? /* @__PURE__ */ jsx12(BiampTableErrorState, { sx: { pointerEvents: "auto" } }) : error instanceof Error ? /* @__PURE__ */ jsx12(
+        showError && /* @__PURE__ */ jsx15(Box10, { sx: overlaySx, children: error === true ? /* @__PURE__ */ jsx15(BiampTableErrorState, { sx: { pointerEvents: "auto" } }) : error instanceof Error ? /* @__PURE__ */ jsx15(
           BiampTableErrorState,
           {
             description: error.message,
             sx: { pointerEvents: "auto" }
           }
         ) : error }),
-        showEmpty && /* @__PURE__ */ jsx12(Box8, { sx: overlaySx, children: empty && empty !== true ? empty : /* @__PURE__ */ jsx12(BiampTableEmptyState, { sx: { pointerEvents: "auto" } }) })
+        showEmpty && /* @__PURE__ */ jsx15(Box10, { sx: overlaySx, children: empty && empty !== true ? empty : /* @__PURE__ */ jsx15(BiampTableEmptyState, { sx: { pointerEvents: "auto" } }) })
       ]
     }
   );
 }
 
 // src/BiampTable/BiampTableContainer.tsx
-import { Stack as Stack6 } from "@mui/material";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { Stack as Stack7 } from "@mui/material";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function BiampTableContainer({
   withBorderTop = true,
   withBorderBottom = false,
@@ -2429,8 +2648,8 @@ function BiampTableContainer({
   sx,
   ...props
 }) {
-  return /* @__PURE__ */ jsx13(
-    Stack6,
+  return /* @__PURE__ */ jsx16(
+    Stack7,
     {
       direction: "column",
       width: "100%",
@@ -2448,9 +2667,9 @@ function BiampTableContainer({
 
 // src/BiampTable/BiampTableCellActionButton.tsx
 import { IconButton as IconButton3, Tooltip as Tooltip3 } from "@mui/material";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function BiampTableCellActionButton({ label, icon, ...props }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx17(
     Tooltip3,
     {
       title: label,
@@ -2458,23 +2677,13 @@ function BiampTableCellActionButton({ label, icon, ...props }) {
       enterDelay: 500,
       enterNextDelay: 500,
       disableInteractive: true,
-      children: /* @__PURE__ */ jsx14("span", { children: /* @__PURE__ */ jsx14(IconButton3, { "aria-label": label, ...props, children: icon }) })
+      children: /* @__PURE__ */ jsx17("span", { children: /* @__PURE__ */ jsx17(IconButton3, { "aria-label": label, ...props, children: icon }) })
     }
   );
 }
 
 // src/BiampTable/BiampTableColumnVisibility.tsx
-import {
-  alpha as alpha2,
-  Box as Box9,
-  Checkbox as Checkbox3,
-  Divider as Divider2,
-  List,
-  ListItem,
-  Popover as Popover2,
-  Typography as Typography5
-} from "@mui/material";
-import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function toVisibilityState(visibility) {
   return visibility;
 }
@@ -2497,16 +2706,6 @@ function getColumnVisibilityDirtyCount(table, defaultVisibility) {
   }
   return count;
 }
-var columnListItemSx = {
-  py: 0,
-  pr: 1.5,
-  pl: 0,
-  alignItems: "center",
-  cursor: "pointer",
-  "&:hover": {
-    backgroundColor: ({ palette }) => palette.mode === "dark" ? palette.grey[800] : palette.grey[100]
-  }
-};
 function BiampTableColumnVisibility({
   table,
   showAllLabel = "Show all",
@@ -2517,9 +2716,16 @@ function BiampTableColumnVisibility({
   ...popoverProps
 }) {
   const hideableColumns = table.getAllLeafColumns().filter((col) => col.getCanHide());
-  const allVisible = hideableColumns.every((col) => col.getIsVisible());
-  const toggleAllHideable = () => {
-    const next = !allVisible;
+  const items = hideableColumns.map((column) => {
+    const columnName = column.columnDef.meta?.columnLabel ?? (typeof column.columnDef.header === "string" ? column.columnDef.header : column.id);
+    return {
+      id: column.id,
+      label: columnName,
+      checked: column.getIsVisible(),
+      ariaLabel: `Show ${columnName}`
+    };
+  });
+  const setAllHideable = (next) => {
     table.setColumnVisibility((prev) => {
       const updated = { ...prev };
       for (const col of hideableColumns) {
@@ -2528,71 +2734,19 @@ function BiampTableColumnVisibility({
       return updated;
     });
   };
-  return /* @__PURE__ */ jsx15(
-    Popover2,
+  return /* @__PURE__ */ jsx18(
+    BiampCheckboxListPopover,
     {
       anchorEl,
       open: Boolean(anchorEl),
       anchorOrigin,
       transformOrigin,
-      slotProps: {
-        ...slotProps,
-        paper: {
-          sx: ({ palette }) => ({
-            borderRadius: "6px",
-            backgroundImage: "none",
-            border: `0.6px solid ${palette.dividers.secondary}`,
-            boxShadow: `0px 1px 1px 0px ${alpha2(palette.common.black, 0.05)}`,
-            minWidth: "150px"
-          }),
-          ...slotProps?.paper ?? {}
-        }
-      },
-      ...popoverProps,
-      children: /* @__PURE__ */ jsxs9(List, { dense: true, disablePadding: true, children: [
-        /* @__PURE__ */ jsxs9(ListItem, { dense: true, sx: columnListItemSx, onClick: toggleAllHideable, children: [
-          /* @__PURE__ */ jsx15(
-            Checkbox3,
-            {
-              checked: allVisible,
-              slotProps: { input: { "aria-label": `${showAllLabel} columns` } }
-            }
-          ),
-          /* @__PURE__ */ jsx15(Typography5, { variant: "caption", fontWeight: 600, children: showAllLabel })
-        ] }),
-        /* @__PURE__ */ jsx15(Divider2, {}),
-        /* @__PURE__ */ jsx15(
-          Box9,
-          {
-            sx: { maxHeight: 340, overflow: "auto", overscrollBehavior: "none" },
-            children: hideableColumns.map((column) => {
-              const columnName = column.columnDef.meta?.columnLabel ?? (typeof column.columnDef.header === "string" ? column.columnDef.header : column.id);
-              return /* @__PURE__ */ jsxs9(
-                ListItem,
-                {
-                  dense: true,
-                  sx: columnListItemSx,
-                  onClick: column.getToggleVisibilityHandler(),
-                  children: [
-                    /* @__PURE__ */ jsx15(
-                      Checkbox3,
-                      {
-                        checked: column.getIsVisible(),
-                        sx: { py: 1 },
-                        slotProps: {
-                          input: { "aria-label": `Show ${columnName}` }
-                        }
-                      }
-                    ),
-                    /* @__PURE__ */ jsx15(Typography5, { variant: "caption", children: columnName })
-                  ]
-                },
-                column.id
-              );
-            })
-          }
-        )
-      ] })
+      slotProps,
+      items,
+      onToggleItem: (id) => table.getColumn(id)?.toggleVisibility(),
+      selectAllLabel: showAllLabel,
+      onToggleAll: setAllHideable,
+      ...popoverProps
     }
   );
 }
@@ -2606,7 +2760,7 @@ import {
   Badge,
   IconButton as IconButton4
 } from "@mui/material";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function BiampTableToolbarActionButton({
   label,
   icon,
@@ -2614,12 +2768,12 @@ function BiampTableToolbarActionButton({
   ...props
 }) {
   const showBadge = badgeContent != null && badgeContent !== 0;
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx19(
     IconButton4,
     {
       "aria-label": showBadge ? `${label} (${badgeContent})` : label,
       ...props,
-      children: showBadge ? /* @__PURE__ */ jsx16(
+      children: showBadge ? /* @__PURE__ */ jsx19(
         Badge,
         {
           badgeContent,
@@ -2643,10 +2797,10 @@ function BiampTableToolbarActionButton({
 }
 
 // src/BiampTable/BiampTableToolbarColumnVisibility.tsx
-import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
 function BiampTableToolbarColumnVisibility({
   table,
-  icon = /* @__PURE__ */ jsx17(ColumnsIcon2, { variant: "xs" }),
+  icon = /* @__PURE__ */ jsx20(ColumnsIcon2, { variant: "xs" }),
   label = "Columns",
   defaultColumnVisibility,
   showAllLabel,
@@ -2655,8 +2809,8 @@ function BiampTableToolbarColumnVisibility({
   const [anchorEl, setAnchorEl] = useState6(null);
   const defaults = defaultColumnVisibility ?? getDefaultColumnVisibility(table);
   const dirtyCount = getColumnVisibilityDirtyCount(table, defaults);
-  return /* @__PURE__ */ jsxs10(Fragment3, { children: [
-    /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsxs10(Fragment4, { children: [
+    /* @__PURE__ */ jsx20(
       BiampTableToolbarActionButton,
       {
         label,
@@ -2666,7 +2820,7 @@ function BiampTableToolbarColumnVisibility({
         ...actionButtonProps
       }
     ),
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx20(
       BiampTableColumnVisibility,
       {
         table,
@@ -2681,7 +2835,7 @@ function BiampTableToolbarColumnVisibility({
 // src/BiampTable/BiampTablePagination.tsx
 import { useEffect as useEffect3, useRef as useRef4 } from "react";
 import { TablePagination } from "@mui/material";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var positionMap = {
   left: "flex-start",
   center: "center",
@@ -2710,7 +2864,7 @@ function BiampTablePagination({
     }
   }, [loading, pageIndex, maxPage, table]);
   if (autoHide && (!stableCount || stableCount <= pageSize)) return null;
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx21(
     TablePagination,
     {
       component: "div",
@@ -2742,15 +2896,15 @@ function BiampTablePagination({
 }
 
 // src/BiampTable/BiampTableToolbar.tsx
-import { Box as Box10 } from "@mui/material";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { Box as Box11 } from "@mui/material";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function BiampTableToolbar({
   children,
   sx,
   ...props
 }) {
-  return /* @__PURE__ */ jsx19(
-    Box10,
+  return /* @__PURE__ */ jsx22(
+    Box11,
     {
       role: "toolbar",
       display: "flex",
@@ -2767,14 +2921,14 @@ function BiampTableToolbar({
 }
 
 // src/BiampTable/BiampTableToolbarActions.tsx
-import { Box as Box11 } from "@mui/material";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { Box as Box12 } from "@mui/material";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function BiampTableToolbarActions({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx20(
-    Box11,
+  return /* @__PURE__ */ jsx23(
+    Box12,
     {
       display: "flex",
       alignItems: "center",
@@ -2790,15 +2944,15 @@ function BiampTableToolbarActions({
 // src/BiampTable/BiampTableToolbarExport.tsx
 import { Button as Button2 } from "@mui/material";
 import { DownloadIcon } from "@bwp-web/assets";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function BiampTableToolbarExport({
   onExport,
   loading,
-  icon = /* @__PURE__ */ jsx21(DownloadIcon, { variant: "xs" }),
+  icon = /* @__PURE__ */ jsx24(DownloadIcon, { variant: "xs" }),
   label = "Export",
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx24(
     BiampTableToolbarActionButton,
     {
       label,
@@ -2816,7 +2970,7 @@ function BiampTableToolbarExportTextButton({
   label = "Export",
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx24(
     Button2,
     {
       variant: "outlined",
@@ -2833,7 +2987,7 @@ function BiampTableToolbarExportTextButton({
 // src/BiampTable/BiampTableToolbarFilters.tsx
 import {
   Badge as Badge2,
-  Box as Box12,
+  Box as Box13,
   Button as Button3,
   Divider as Divider3,
   Drawer as Drawer2,
@@ -2843,13 +2997,13 @@ import {
 } from "@mui/material";
 import { CloseIcon as CloseIcon2, FilterIcon } from "@bwp-web/assets";
 import { useId, useState as useState7 } from "react";
-import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs11 } from "react/jsx-runtime";
 function BiampTableToolbarFilters({
   activeFilterCount,
   children,
   onReset,
   onApply,
-  icon = /* @__PURE__ */ jsx22(FilterIcon, { variant: "xs" }),
+  icon = /* @__PURE__ */ jsx25(FilterIcon, { variant: "xs" }),
   title = "Filters",
   resetLabel = "Clear filters",
   applyLabel = "Apply",
@@ -2864,8 +3018,8 @@ function BiampTableToolbarFilters({
     onApply?.();
     setOpen(false);
   }
-  return /* @__PURE__ */ jsxs11(Fragment4, { children: [
-    /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs11(Fragment5, { children: [
+    /* @__PURE__ */ jsx25(
       BiampTableToolbarActionButton,
       {
         label: buttonLabel,
@@ -2874,7 +3028,7 @@ function BiampTableToolbarFilters({
         onClick: () => setOpen(true)
       }
     ),
-    /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx25(
       Drawer2,
       {
         anchor: "right",
@@ -2887,16 +3041,16 @@ function BiampTableToolbarFilters({
           ...drawerProps?.PaperProps
         },
         children: /* @__PURE__ */ jsxs11(
-          Box12,
+          Box13,
           {
             height: "100%",
             display: "flex",
             flexDirection: "column",
             justifyContent: "space-between",
             children: [
-              /* @__PURE__ */ jsxs11(Box12, { children: [
+              /* @__PURE__ */ jsxs11(Box13, { children: [
                 /* @__PURE__ */ jsxs11(
-                  Box12,
+                  Box13,
                   {
                     display: "flex",
                     justifyContent: "space-between",
@@ -2906,7 +3060,7 @@ function BiampTableToolbarFilters({
                     children: [
                       /* @__PURE__ */ jsxs11(Typography6, { id: titleId, variant: "h2", children: [
                         title,
-                        /* @__PURE__ */ jsx22(
+                        /* @__PURE__ */ jsx25(
                           Badge2,
                           {
                             badgeContent: activeFilterCount,
@@ -2922,21 +3076,21 @@ function BiampTableToolbarFilters({
                           }
                         )
                       ] }),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx25(
                         IconButton5,
                         {
                           size: "medium",
                           onClick: handleClose,
                           "aria-label": closeLabel,
-                          children: /* @__PURE__ */ jsx22(CloseIcon2, {})
+                          children: /* @__PURE__ */ jsx25(CloseIcon2, {})
                         }
                       )
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx22(Divider3, {}),
-                /* @__PURE__ */ jsx22(
-                  Box12,
+                /* @__PURE__ */ jsx25(Divider3, {}),
+                /* @__PURE__ */ jsx25(
+                  Box13,
                   {
                     role: "group",
                     "aria-label": "Filter options",
@@ -2949,8 +3103,8 @@ function BiampTableToolbarFilters({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs11(Box12, { display: "flex", children: [
-                /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsxs11(Box13, { display: "flex", children: [
+                /* @__PURE__ */ jsx25(
                   Button3,
                   {
                     variant: "overlay",
@@ -2961,7 +3115,7 @@ function BiampTableToolbarFilters({
                     children: resetLabel
                   }
                 ),
-                /* @__PURE__ */ jsx22(
+                /* @__PURE__ */ jsx25(
                   Button3,
                   {
                     variant: "overlay",
@@ -2982,7 +3136,7 @@ function BiampTableToolbarFilters({
 
 // src/BiampTable/BiampTableToolbarSearch.tsx
 import {
-  Box as Box13,
+  Box as Box14,
   Collapse,
   IconButton as IconButton6,
   InputAdornment as InputAdornment2,
@@ -3018,7 +3172,7 @@ function useDebouncedCallback(callback, delay = BIAMP_TABLE_DEBOUNCE_DELAY) {
 }
 
 // src/BiampTable/BiampTableToolbarSearch.tsx
-import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
 var searchFieldSx = {
   "& .MuiInputBase-root": {
     height: "36px !important",
@@ -3062,7 +3216,7 @@ function BiampTableToolbarSearch({
       setIsExpanded(false);
     }
   };
-  const clearButton = inputValue ? /* @__PURE__ */ jsx23(
+  const clearButton = inputValue ? /* @__PURE__ */ jsx26(
     InputAdornment2,
     {
       position: "end",
@@ -3075,19 +3229,19 @@ function BiampTableToolbarSearch({
           height: 16
         }
       },
-      children: /* @__PURE__ */ jsx23(
+      children: /* @__PURE__ */ jsx26(
         IconButton6,
         {
           size: "small",
           onClick: handleClear,
           "aria-label": clearLabel,
           sx: { mr: 0.5 },
-          children: /* @__PURE__ */ jsx23(CloseIcon3, { variant: "xs" })
+          children: /* @__PURE__ */ jsx26(CloseIcon3, { variant: "xs" })
         }
       )
     }
   ) : null;
-  const textField = /* @__PURE__ */ jsx23(
+  const textField = /* @__PURE__ */ jsx26(
     TextField2,
     {
       name: "search",
@@ -3096,7 +3250,7 @@ function BiampTableToolbarSearch({
       slotProps: {
         htmlInput: { maxLength, "aria-label": placeholder },
         input: {
-          startAdornment: /* @__PURE__ */ jsx23(
+          startAdornment: /* @__PURE__ */ jsx26(
             InputAdornment2,
             {
               position: "start",
@@ -3107,7 +3261,7 @@ function BiampTableToolbarSearch({
                   height: 16
                 }
               },
-              children: /* @__PURE__ */ jsx23(SearchIcon2, { variant: "xs", color: "inherit" })
+              children: /* @__PURE__ */ jsx26(SearchIcon2, { variant: "xs", color: "inherit" })
             }
           ),
           endAdornment: clearButton
@@ -3128,9 +3282,9 @@ function BiampTableToolbarSearch({
     }
   );
   if (isMobile && enableMobileView) {
-    return /* @__PURE__ */ jsxs12(Box13, { display: "flex", alignItems: "center", width: "100%", pr: 1, gap: 1, children: [
-      /* @__PURE__ */ jsx23(SearchIcon2, { sx: { width: 16, height: 16 } }),
-      /* @__PURE__ */ jsx23(
+    return /* @__PURE__ */ jsxs12(Box14, { display: "flex", alignItems: "center", width: "100%", pr: 1, gap: 1, children: [
+      /* @__PURE__ */ jsx26(SearchIcon2, { sx: { width: 16, height: 16 } }),
+      /* @__PURE__ */ jsx26(
         InputBase,
         {
           name: "search",
@@ -3152,14 +3306,14 @@ function BiampTableToolbarSearch({
     ] });
   }
   if (expandable) {
-    return /* @__PURE__ */ jsxs12(Box13, { display: "flex", alignItems: "center", minWidth: 28, children: [
-      /* @__PURE__ */ jsx23(
+    return /* @__PURE__ */ jsxs12(Box14, { display: "flex", alignItems: "center", minWidth: 28, children: [
+      /* @__PURE__ */ jsx26(
         IconButton6,
         {
           "aria-label": expandLabel ?? placeholder,
           onClick: () => setIsExpanded(true),
           sx: { display: isExpanded || inputValue ? "none" : "flex" },
-          children: /* @__PURE__ */ jsx23(
+          children: /* @__PURE__ */ jsx26(
             SearchIcon2,
             {
               variant: "xs",
@@ -3169,7 +3323,7 @@ function BiampTableToolbarSearch({
           )
         }
       ),
-      /* @__PURE__ */ jsx23(
+      /* @__PURE__ */ jsx26(
         Collapse,
         {
           in: isExpanded || !!inputValue,
@@ -3415,7 +3569,7 @@ function downloadCsv(csvContent, filename) {
 
 // src/BiampBanner/BiampBanner.tsx
 import {
-  Box as Box14,
+  Box as Box15,
   Collapse as Collapse2,
   Typography as Typography7
 } from "@mui/material";
@@ -3425,10 +3579,10 @@ import {
   SuccessStatusIcon,
   WarningStatusIcon
 } from "@bwp-web/assets";
-import { Fragment as Fragment5, jsx as jsx24 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx27 } from "react/jsx-runtime";
 function BiampBanner({ show, children, severity }) {
-  return /* @__PURE__ */ jsx24(Collapse2, { in: show, unmountOnExit: true, component: "aside", children: /* @__PURE__ */ jsx24(
-    Box14,
+  return /* @__PURE__ */ jsx27(Collapse2, { in: show, unmountOnExit: true, component: "aside", children: /* @__PURE__ */ jsx27(
+    Box15,
     {
       bgcolor: ({ palette }) => palette.background[severity],
       display: "flex",
@@ -3446,25 +3600,25 @@ function BiampBanner({ show, children, severity }) {
   ) });
 }
 var iconMapping = {
-  error: /* @__PURE__ */ jsx24(ErrorStatusIcon, { color: "error", sx: { width: 14, height: 14 } }),
-  warning: /* @__PURE__ */ jsx24(WarningStatusIcon, { color: "warning", sx: { width: 16, height: 14 } }),
-  success: /* @__PURE__ */ jsx24(SuccessStatusIcon, { color: "success", sx: { width: 14, height: 14 } }),
-  info: /* @__PURE__ */ jsx24(InfoStatusIcon, { color: "info", sx: { width: 14, height: 14 } })
+  error: /* @__PURE__ */ jsx27(ErrorStatusIcon, { color: "error", sx: { width: 14, height: 14 } }),
+  warning: /* @__PURE__ */ jsx27(WarningStatusIcon, { color: "warning", sx: { width: 16, height: 14 } }),
+  success: /* @__PURE__ */ jsx27(SuccessStatusIcon, { color: "success", sx: { width: 14, height: 14 } }),
+  info: /* @__PURE__ */ jsx27(InfoStatusIcon, { color: "info", sx: { width: 14, height: 14 } })
 };
 function BiampBannerIcon({ severity, children }) {
-  return /* @__PURE__ */ jsx24(Fragment5, { children: severity ? iconMapping[severity] : children });
+  return /* @__PURE__ */ jsx27(Fragment6, { children: severity ? iconMapping[severity] : children });
 }
 function BiampBannerContent({ children, ...props }) {
-  return /* @__PURE__ */ jsx24(Typography7, { textAlign: "center", variant: "h3", ...props, children });
+  return /* @__PURE__ */ jsx27(Typography7, { textAlign: "center", variant: "h3", ...props, children });
 }
 function BiampBannerActions({ children, ...props }) {
-  return /* @__PURE__ */ jsx24(Box14, { display: "flex", gap: 1, alignItems: "center", ...props, children });
+  return /* @__PURE__ */ jsx27(Box15, { display: "flex", gap: 1, alignItems: "center", ...props, children });
 }
 
 // src/BiampSegmentedButton/SegmentedButton.tsx
 import { Button as Button4, useTheme as useTheme3 } from "@mui/material";
-import { alpha as alpha3 } from "@mui/material/styles";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { alpha as alpha4 } from "@mui/material/styles";
+import { jsx as jsx28 } from "react/jsx-runtime";
 function SegmentedButton({
   children,
   active,
@@ -3477,7 +3631,7 @@ function SegmentedButton({
   const backgroundColor = active ? isDarkMode ? theme.palette.grey[800] : theme.palette.common.white : "transparent";
   const textColor = active ? theme.palette.text.primary : theme.palette.text.secondary;
   const border = active ? "solid" : void 0;
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx28(
     Button4,
     {
       sx: {
@@ -3491,7 +3645,7 @@ function SegmentedButton({
         py: 0,
         height: small ? "22px" : "26px",
         ...small && { fontSize: "12px", letterSpacing: "-0.24px" },
-        boxShadow: active ? `0 1px 2px 0 ${alpha3(theme.palette.common.black, 0.05)} !important` : "none !important",
+        boxShadow: active ? `0 1px 2px 0 ${alpha4(theme.palette.common.black, 0.05)} !important` : "none !important",
         ...sx
       },
       ...props,
@@ -3501,13 +3655,13 @@ function SegmentedButton({
 }
 
 // src/BiampSegmentedButton/SegmentedButtonGroup.tsx
-import { Stack as Stack7, useTheme as useTheme4 } from "@mui/material";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { Stack as Stack8, useTheme as useTheme4 } from "@mui/material";
+import { jsx as jsx29 } from "react/jsx-runtime";
 function SegmentedButtonGroup({ children, sx, ...props }) {
   const theme = useTheme4();
   const isDarkMode = theme.palette.mode === "dark";
-  return /* @__PURE__ */ jsx26(
-    Stack7,
+  return /* @__PURE__ */ jsx29(
+    Stack8,
     {
       direction: "row",
       p: 0.5,
@@ -3525,33 +3679,33 @@ function SegmentedButtonGroup({ children, sx, ...props }) {
 
 // src/OrganizationSelector/OrganizationSelector.tsx
 import {
-  alpha as alpha4,
-  Box as Box15,
+  alpha as alpha5,
+  Box as Box16,
   ButtonBase,
   CircularProgress,
   Divider as Divider4,
   List as List2,
   ListItem as ListItem2,
   ListItemButton as ListItemButton3,
-  Popover as Popover3,
-  Stack as Stack8,
+  Popover as Popover4,
+  Stack as Stack9,
   Typography as Typography8
 } from "@mui/material";
-import { Children as Children2, Fragment as Fragment6, isValidElement } from "react";
+import { Children as Children2, Fragment as Fragment7, isValidElement } from "react";
 import {
   ChevronDownIcon as ChevronDownIcon2,
   ChevronRightIcon as ChevronRightIcon2,
   ChevronUpIcon
 } from "@bwp-web/assets";
-import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx30, jsxs as jsxs13 } from "react/jsx-runtime";
 function OrganizationSelector({
   loading,
   children,
   sx,
   ...props
 }) {
-  return /* @__PURE__ */ jsx27(
-    Stack8,
+  return /* @__PURE__ */ jsx30(
+    Stack9,
     {
       sx: {
         width: "min(370px, calc(100vw - 24px))",
@@ -3560,12 +3714,12 @@ function OrganizationSelector({
         backgroundColor: ({ palette }) => palette.mode === "dark" ? palette.grey[700] : palette.grey[100],
         borderRadius: 3,
         p: 1.5,
-        boxShadow: ({ palette }) => `0 4px 24px 0 ${alpha4(palette.common.black, 0.15)}`,
+        boxShadow: ({ palette }) => `0 4px 24px 0 ${alpha5(palette.common.black, 0.15)}`,
         overflow: "auto",
         ...sx
       },
       ...props,
-      children: loading ? /* @__PURE__ */ jsx27(CircularProgress, { size: 40, sx: { mx: "auto", my: "auto" } }) : children
+      children: loading ? /* @__PURE__ */ jsx30(CircularProgress, { size: 40, sx: { mx: "auto", my: "auto" } }) : children
     }
   );
 }
@@ -3576,14 +3730,14 @@ function OrganizationItemList({
   sx
 }) {
   const items = Children2.toArray(children).filter(isValidElement);
-  return /* @__PURE__ */ jsxs13(Fragment7, { children: [
-    /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsxs13(Fragment8, { children: [
+    /* @__PURE__ */ jsx30(
       List2,
       {
         disablePadding: true,
         sx: {
           border: 0.6,
-          borderColor: ({ palette }) => palette.mode === "dark" ? alpha4(palette.common.white, 0.12) : alpha4(palette.grey[900], 0.15),
+          borderColor: ({ palette }) => palette.mode === "dark" ? alpha5(palette.common.white, 0.12) : alpha5(palette.grey[900], 0.15),
           borderRadius: 2,
           ...maxHeight !== void 0 && {
             overflow: "auto",
@@ -3591,18 +3745,18 @@ function OrganizationItemList({
           },
           ...sx
         },
-        children: items.map((item, i) => /* @__PURE__ */ jsxs13(Fragment6, { children: [
+        children: items.map((item, i) => /* @__PURE__ */ jsxs13(Fragment7, { children: [
           item,
-          i !== items.length - 1 && /* @__PURE__ */ jsx27(Divider4, {})
+          i !== items.length - 1 && /* @__PURE__ */ jsx30(Divider4, {})
         ] }, item.key ?? i))
       }
     ),
-    label && /* @__PURE__ */ jsx27(Divider4, { sx: { py: 1, userSelect: "none" }, children: label })
+    label && /* @__PURE__ */ jsx30(Divider4, { sx: { py: 1, userSelect: "none" }, children: label })
   ] });
 }
 function renderText(value, defaults) {
   if (typeof value === "string" || typeof value === "number") {
-    return /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsx30(
       Typography8,
       {
         variant: defaults.variant,
@@ -3624,7 +3778,7 @@ function OrganizationItem({
   sx,
   ...props
 }) {
-  return /* @__PURE__ */ jsx27(ListItem2, { disablePadding: true, children: /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsx30(ListItem2, { disablePadding: true, children: /* @__PURE__ */ jsxs13(
     ListItemButton3,
     {
       disabled: isCurrent,
@@ -3638,8 +3792,8 @@ function OrganizationItem({
       },
       ...props,
       children: [
-        /* @__PURE__ */ jsx27(
-          Box15,
+        /* @__PURE__ */ jsx30(
+          Box16,
           {
             sx: {
               width: 40,
@@ -3655,8 +3809,8 @@ function OrganizationItem({
                 boxShadow: ({ palette }) => `0 0 0 2px ${palette.info.main}`
               }
             },
-            children: typeof logo === "string" ? /* @__PURE__ */ jsx27(
-              Box15,
+            children: typeof logo === "string" ? /* @__PURE__ */ jsx30(
+              Box16,
               {
                 component: "img",
                 src: logo,
@@ -3665,8 +3819,8 @@ function OrganizationItem({
             ) : logo
           }
         ),
-        /* @__PURE__ */ jsxs13(Stack8, { gap: 0.25, sx: { width: "100%", minWidth: 0 }, children: [
-          /* @__PURE__ */ jsxs13(Stack8, { direction: "row", justifyContent: "space-between", gap: 1, children: [
+        /* @__PURE__ */ jsxs13(Stack9, { gap: 0.25, sx: { width: "100%", minWidth: 0 }, children: [
+          /* @__PURE__ */ jsxs13(Stack9, { direction: "row", justifyContent: "space-between", gap: 1, children: [
             renderText(primaryText, {
               variant: "body2",
               fontWeight: 600,
@@ -3679,7 +3833,7 @@ function OrganizationItem({
             color: "text.secondary"
           })
         ] }),
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx30(
           ChevronRightIcon2,
           {
             variant: "xs",
@@ -3719,7 +3873,7 @@ function OrganizationSelectorButton({
       ...props,
       children: [
         icon,
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx30(
           Typography8,
           {
             variant: "caption",
@@ -3729,13 +3883,13 @@ function OrganizationSelectorButton({
             children: name
           }
         ),
-        open ? /* @__PURE__ */ jsx27(
+        open ? /* @__PURE__ */ jsx30(
           ChevronUpIcon,
           {
             variant: "xs",
             sx: { width: 16, height: 16, flexShrink: 0, color: "text.secondary" }
           }
-        ) : /* @__PURE__ */ jsx27(
+        ) : /* @__PURE__ */ jsx30(
           ChevronDownIcon2,
           {
             variant: "xs",
@@ -3753,8 +3907,8 @@ function OrganizationSelectorPopover({
   transformOrigin,
   ...props
 }) {
-  return /* @__PURE__ */ jsx27(
-    Popover3,
+  return /* @__PURE__ */ jsx30(
+    Popover4,
     {
       anchorOrigin: anchorOrigin ?? { vertical: "bottom", horizontal: "right" },
       transformOrigin: transformOrigin ?? { vertical: -8, horizontal: "right" },
@@ -3769,16 +3923,16 @@ function OrganizationSelectorPopover({
         }
       },
       ...props,
-      children: /* @__PURE__ */ jsx27(OrganizationSelector, { loading, children })
+      children: /* @__PURE__ */ jsx30(OrganizationSelector, { loading, children })
     }
   );
 }
 
 // src/UserInitialsIcon/UserInitialsIcon.tsx
 var import_randomcolor = __toESM(require_randomColor(), 1);
-import { Box as Box16, Typography as Typography9 } from "@mui/material";
+import { Box as Box17, Typography as Typography9 } from "@mui/material";
 import { darken } from "@mui/material/styles";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var DEFAULT_SIZE = 40;
 var DEFAULT_BORDER_RADIUS = 1.5;
 var TEXT_RATIO = 0.4;
@@ -3796,8 +3950,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__ */ jsx28(
-    Box16,
+  return /* @__PURE__ */ jsx31(
+    Box17,
     {
       minWidth: width,
       width,
@@ -3810,7 +3964,7 @@ function UserInitialsIcon({
       justifyContent: "center",
       sx: { ...sx },
       ...props,
-      children: /* @__PURE__ */ jsx28(
+      children: /* @__PURE__ */ jsx31(
         Typography9,
         {
           variant: "h3",
@@ -3833,9 +3987,9 @@ var getInitials = (name) => {
 };
 
 // src/DynamicSvgIcon/DynamicSvgIcon.tsx
-import { SvgIcon, Skeleton, Box as Box17 } from "@mui/material";
+import { SvgIcon, Skeleton, Box as Box18 } from "@mui/material";
 import { useEffect as useEffect6, useState as useState9 } from "react";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var svgCache = /* @__PURE__ */ new Map();
 function clearDynamicSvgIconCache() {
   svgCache.clear();
@@ -3937,7 +4091,7 @@ function DynamicSvgIcon({
     onError
   });
   if (loading) {
-    return /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsx32(
       Skeleton,
       {
         variant: skeletonVariant,
@@ -3947,8 +4101,8 @@ function DynamicSvgIcon({
     );
   }
   if (error || !svgContent) {
-    return /* @__PURE__ */ jsx29(
-      Box17,
+    return /* @__PURE__ */ jsx32(
+      Box18,
       {
         sx: {
           width,
@@ -3967,7 +4121,7 @@ function DynamicSvgIcon({
       }
     );
   }
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx32(
     SvgIcon,
     {
       ...svgIconProps,
@@ -3977,7 +4131,7 @@ function DynamicSvgIcon({
         width,
         height
       },
-      children: /* @__PURE__ */ jsx29("g", { dangerouslySetInnerHTML: { __html: svgContent } })
+      children: /* @__PURE__ */ jsx32("g", { dangerouslySetInnerHTML: { __html: svgContent } })
     }
   );
 }
@@ -3992,6 +4146,7 @@ export {
   BiampBannerIcon,
   BiampBuildAppContent,
   BiampBuildAppContentItem,
+  BiampCheckboxListPopover,
   BiampEndUserAppContent,
   BiampEndUserAppContentItem,
   BiampGlobalSearch,
@@ -4004,6 +4159,12 @@ export {
   BiampHeaderSearch,
   BiampHeaderTitle,
   BiampLayout,
+  BiampListPopover,
+  BiampListPopoverItem,
+  BiampListPopoverScrollArea,
+  BiampNotificationPopover,
+  BiampNotificationPopoverBody,
+  BiampNotificationPopoverHeader,
   BiampSidebar,
   BiampSidebarComponent,
   BiampSidebarIcon,