@bwp-web/components 1.4.2 → 1.5.1

package/dist/index.js

@@ -392,16 +392,56 @@ var require_randomColor = __commonJS({
 });
 
 // src/BiampWrapper/BiampWrapper.tsx
-import { Stack } from "@mui/material";
-import { jsx } from "react/jsx-runtime";
-function BiampWrapper({ children, sx, ...props }) {
-  return /* @__PURE__ */ jsx(
+import { Box, LinearProgress, Stack } from "@mui/material";
+
+// src/hooks/useLoadingDelay.ts
+import { useEffect, useRef, useState } from "react";
+function useLoadingDelay(loading, { delay = 150, minDuration = 500 } = {}) {
+  const [status, setStatus] = useState("idle");
+  const timeoutRef = useRef(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/BiampWrapper/BiampWrapper.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function BiampWrapper({
+  loading = false,
+  children,
+  sx,
+  ...props
+}) {
+  const showLoading = useLoadingDelay(loading);
+  return /* @__PURE__ */ jsxs(
     Stack,
     {
       direction: "column",
       padding: "16px",
       alignItems: "flex-start",
       sx: {
+        position: "relative",
         flex: 1,
         height: "100%",
         width: "100%",
@@ -412,21 +452,36 @@ function BiampWrapper({ children, sx, ...props }) {
         ...sx
       },
       ...props,
-      children
+      children: [
+        showLoading && /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: ({ zIndex }) => ({
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              zIndex: zIndex.appBar + 1
+            }),
+            children: /* @__PURE__ */ jsx(LinearProgress, {})
+          }
+        ),
+        children
+      ]
     }
   );
 }
 
 // src/BiampSidebar/BiampSidebar.tsx
 import {
-  Box,
+  Box as Box2,
   ListItemButton,
   Stack as Stack2,
   Typography
 } from "@mui/material";
 import { BiampLogoIcon, SquareRoundedArrowRightIcon } from "@bwp-web/assets";
-import { createContext, useContext, useState } from "react";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useState as useState2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var BiampSidebarContext = createContext({
   expanded: false
 });
@@ -441,7 +496,7 @@ function BiampSidebar({
   sx,
   ...props
 }) {
-  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+  const [internalExpanded, setInternalExpanded] = useState2(defaultExpanded);
   const isControlled = expandedProp !== void 0;
   const expanded = isControlled ? expandedProp : internalExpanded;
   const toggleExpanded = () => {
@@ -450,7 +505,7 @@ function BiampSidebar({
     onExpandedChange?.(next);
   };
   const width = expanded ? "240px" : "48px";
-  return /* @__PURE__ */ jsx2(BiampSidebarContext.Provider, { value: { expanded }, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx2(BiampSidebarContext.Provider, { value: { expanded }, children: /* @__PURE__ */ jsxs2(
     Stack2,
     {
       sx: {
@@ -484,7 +539,7 @@ function BiampSidebar({
             onClick: toggleExpanded
           }
         ),
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxs2(
           Stack2,
           {
             direction: "row",
@@ -503,7 +558,7 @@ function BiampSidebar({
                 {
                   variant: "caption",
                   fontWeight: 500,
-                  color: "sidebar.main",
+                  color: "text.secondary",
                   noWrap: true,
                   sx: {
                     opacity: expanded ? 1 : 0,
@@ -534,6 +589,7 @@ function BiampSidebarIconList({
         minHeight: 0,
         gap: "4px",
         overflowY: "auto",
+        overscrollBehavior: "none",
         ...sx
       },
       ...props,
@@ -551,7 +607,7 @@ function BiampSidebarIcon({
 }) {
   const { expanded } = useContext(BiampSidebarContext);
   const displayedSelectedIcon = selectedIcon ?? icon;
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     ListItemButton,
     {
       selected,
@@ -572,7 +628,7 @@ function BiampSidebarIcon({
       ...props,
       children: [
         /* @__PURE__ */ jsx2(
-          Box,
+          Box2,
           {
             sx: {
               width: "48px",
@@ -612,7 +668,7 @@ function BiampSidebarComponent({
   ...props
 }) {
   return /* @__PURE__ */ jsx2(
-    Box,
+    Box2,
     {
       sx: {
         minWidth: "48px",
@@ -635,7 +691,7 @@ function BiampSidebarComponent({
 // src/BiampHeader/BiampHeader.tsx
 import {
   alpha,
-  Box as Box2,
+  Box as Box3,
   InputAdornment,
   ListItemButton as ListItemButton2,
   Popover,
@@ -645,7 +701,7 @@ import {
 } 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";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function BiampHeader({ children, sx, ...props }) {
   return /* @__PURE__ */ jsx3(
     Stack3,
@@ -665,14 +721,14 @@ function BiampHeaderTitle({
   sx,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs2(
-    Box2,
+  return /* @__PURE__ */ jsxs3(
+    Box3,
     {
       sx: { pr: 3, display: "flex", alignItems: "center", gap: "12px", ...sx },
       ...props,
       children: [
         icon ? /* @__PURE__ */ jsx3(
-          Box2,
+          Box3,
           {
             sx: {
               width: 24,
@@ -684,7 +740,7 @@ function BiampHeaderTitle({
             children: icon
           }
         ) : /* @__PURE__ */ jsx3(
-          Box2,
+          Box3,
           {
             component: "img",
             src: BiampRedLogo,
@@ -692,7 +748,7 @@ function BiampHeaderTitle({
             sx: { width: 24, height: 24 }
           }
         ),
-        /* @__PURE__ */ jsxs2(Stack3, { direction: "row", gap: 0.5, children: [
+        /* @__PURE__ */ jsxs3(Stack3, { direction: "row", gap: 0.5, children: [
           title && /* @__PURE__ */ jsx3(Typography2, { variant: "h4", children: title }),
           subtitle && /* @__PURE__ */ jsx3(Typography2, { variant: "h4", color: "text.secondary", children: subtitle })
         ] })
@@ -737,7 +793,7 @@ function BiampHeaderActions({
   ...props
 }) {
   return /* @__PURE__ */ jsx3(
-    Box2,
+    Box3,
     {
       sx: {
         pl: 3,
@@ -757,7 +813,7 @@ function BiampHeaderButtonList({
   ...props
 }) {
   return /* @__PURE__ */ jsx3(
-    Box2,
+    Box3,
     {
       sx: { display: "flex", alignItems: "center", gap: 0.5, ...sx },
       ...props,
@@ -837,7 +893,7 @@ function BiampBuildAppContent({
   ...props
 }) {
   return /* @__PURE__ */ jsx3(
-    Box2,
+    Box3,
     {
       sx: {
         display: "grid",
@@ -858,7 +914,7 @@ function BiampBuildAppContentItem({
   sx,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     Stack3,
     {
       direction: "column",
@@ -873,10 +929,10 @@ function BiampBuildAppContentItem({
       },
       ...props,
       children: [
-        /* @__PURE__ */ jsx3(Box2, { sx: { width: 54, height: 54 }, mb: 0.5, children: image }),
+        /* @__PURE__ */ jsx3(Box3, { sx: { width: 54, height: 54 }, mb: 0.5, children: image }),
         /* @__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 })
+        button && /* @__PURE__ */ jsx3(Box3, { position: "absolute", top: "12px", right: "12px", children: button })
       ]
     }
   );
@@ -913,7 +969,7 @@ function BiampEndUserAppContentItem({
   sx,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     Stack3,
     {
       component: href ? "a" : "div",
@@ -935,8 +991,8 @@ function BiampEndUserAppContentItem({
       },
       ...props,
       children: [
-        /* @__PURE__ */ jsx3(Box2, { sx: { width: 32, height: 32 }, children: image }),
-        /* @__PURE__ */ jsxs2(Stack3, { direction: "column", children: [
+        /* @__PURE__ */ jsx3(Box3, { sx: { width: 32, height: 32 }, children: image }),
+        /* @__PURE__ */ jsxs3(Stack3, { direction: "column", children: [
           /* @__PURE__ */ jsx3(Typography2, { variant: "caption", fontWeight: 600, children: name }),
           /* @__PURE__ */ jsx3(Typography2, { variant: "caption", color: "text.secondary", children: description })
         ] }),
@@ -970,7 +1026,7 @@ function BiampHeaderProfile({
       },
       ...props,
       children: image ? /* @__PURE__ */ jsx3(
-        Box2,
+        Box3,
         {
           component: "img",
           src: image,
@@ -989,7 +1045,7 @@ function BiampHeaderProfile({
 
 // src/BiampLayout/BiampLayout.tsx
 import { Stack as Stack4 } from "@mui/material";
-import { jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsxs as jsxs4 } from "react/jsx-runtime";
 function BiampLayout({
   header,
   sidebar,
@@ -997,7 +1053,7 @@ function BiampLayout({
   sx,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     Stack4,
     {
       direction: "column",
@@ -1009,7 +1065,7 @@ function BiampLayout({
       ...props,
       children: [
         header,
-        /* @__PURE__ */ jsxs3(
+        /* @__PURE__ */ jsxs4(
           Stack4,
           {
             direction: "row",
@@ -1032,7 +1088,7 @@ function BiampLayout({
 
 // src/BiampTable/BiampTable.tsx
 import {
-  Box as Box6,
+  Box as Box7,
   Checkbox as Checkbox2,
   Table as MuiTable,
   TableBody,
@@ -1057,7 +1113,7 @@ import { NoResultsIcon } from "@bwp-web/assets";
 // src/BiampTable/BiampTableStatusMessage.tsx
 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";
+import { jsx as jsx4, jsxs as jsxs5 } from "react/jsx-runtime";
 function BiampTableStatusMessage({
   icon,
   title,
@@ -1065,7 +1121,7 @@ function BiampTableStatusMessage({
   children,
   ...stackProps
 }) {
-  return /* @__PURE__ */ jsxs4(Stack5, { alignItems: "center", gap: 1.5, ...stackProps, children: [
+  return /* @__PURE__ */ jsxs5(Stack5, { alignItems: "center", gap: 1.5, ...stackProps, children: [
     cloneElement(icon, {
       "aria-hidden": true,
       sx: { width: 56, height: 56, ...icon.props.sx }
@@ -1107,7 +1163,7 @@ function BiampTableErrorState({
 
 // src/BiampTable/BiampTableRow.tsx
 import {
-  Box as Box5,
+  Box as Box6,
   Checkbox,
   IconButton,
   TableCell,
@@ -1118,14 +1174,14 @@ 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 as useState2 } from "react";
+import { Box as Box4, Tooltip } from "@mui/material";
+import { useCallback, useRef as useRef2, useState as useState3 } from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
 function BiampTableTruncatedCell({
   children
 }) {
-  const textRef = useRef(null);
-  const [open, setOpen] = useState2(false);
+  const textRef = useRef2(null);
+  const [open, setOpen] = useState3(false);
   const handleMouseEnter = useCallback(() => {
     const el = textRef.current;
     if (el && el.scrollWidth > el.clientWidth) {
@@ -1144,7 +1200,7 @@ function BiampTableTruncatedCell({
       placement: "top",
       disableInteractive: true,
       children: /* @__PURE__ */ jsx7(
-        Box3,
+        Box4,
         {
           "data-truncate": true,
           ref: textRef,
@@ -1200,7 +1256,7 @@ function cellSx(sticky, minWidth, zIndex) {
 }
 
 // src/BiampTable/BiampTableExpandGuidelines.tsx
-import { Box as Box4 } from "@mui/material";
+import { Box as Box5 } from "@mui/material";
 import { Fragment, jsx as jsx8 } from "react/jsx-runtime";
 var guidelineIndent = 28;
 var guidelineCellPaddingLeft = 12;
@@ -1236,7 +1292,7 @@ function ExpandGuidelines({ row }) {
     if (!ancestor || isLastChildOfParent(ancestor)) continue;
     lines.push(
       /* @__PURE__ */ jsx8(
-        Box4,
+        Box5,
         {
           "aria-hidden": true,
           sx: {
@@ -1259,7 +1315,7 @@ function ExpandGuidelines({ row }) {
   const elbowTopOffset = rowIsFirst ? -guidelineFirstChildTopExtension : 0;
   lines.push(
     /* @__PURE__ */ jsx8(
-      Box4,
+      Box5,
       {
         "aria-hidden": true,
         sx: {
@@ -1278,7 +1334,7 @@ function ExpandGuidelines({ row }) {
   if (!rowIsLast) {
     lines.push(
       /* @__PURE__ */ jsx8(
-        Box4,
+        Box5,
         {
           "aria-hidden": true,
           sx: {
@@ -1297,7 +1353,7 @@ function ExpandGuidelines({ row }) {
   }
   lines.push(
     /* @__PURE__ */ jsx8(
-      Box4,
+      Box5,
       {
         "aria-hidden": true,
         sx: {
@@ -1317,7 +1373,7 @@ function ExpandGuidelines({ row }) {
 }
 
 // src/BiampTable/BiampTableRow.tsx
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var rowCursorPointerSx = { cursor: "pointer" };
 var selectionCellSx = {
   position: "sticky",
@@ -1366,7 +1422,7 @@ function ExpandToggle({
       }
     );
   }
-  if (hasExpandableRows) return /* @__PURE__ */ jsx9(Box5, { sx: expandPlaceholderSx });
+  if (hasExpandableRows) return /* @__PURE__ */ jsx9(Box6, { sx: expandPlaceholderSx });
   return null;
 }
 function renderCellContent({
@@ -1385,11 +1441,11 @@ function renderCellContent({
   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;
+    return row.depth > 0 ? /* @__PURE__ */ jsx9(Box6, { sx: { pl: `${row.depth * 28}px` }, children: truncated }) : truncated;
   }
   const rowLabel = getRowLabel ? getRowLabel(row.original) : `row ${row.index + 1}`;
-  return /* @__PURE__ */ jsxs5(
-    Box5,
+  return /* @__PURE__ */ jsxs6(
+    Box6,
     {
       sx: row.depth > 0 ? { ...expandCellBaseSx, pl: `${row.depth * 12}px` } : expandCellBaseSx,
       children: [
@@ -1432,7 +1488,7 @@ function BiampTableRowInner({
     onKeyDown: userRowOnKeyDown,
     ...restRowProps
   } = resolvedRow ?? {};
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     TableRow,
     {
       ...restRowProps,
@@ -1490,7 +1546,7 @@ function BiampTableRowInner({
           const showGuidelinesOnCell = isExpandCell && showExpandGuidelines && alwaysExpanded && row.depth > 0;
           const resolvedCell = resolveSlot(cellSlotProps, { cell });
           const { sx: userCellSx, ...restCellProps } = resolvedCell ?? {};
-          return /* @__PURE__ */ jsxs5(
+          return /* @__PURE__ */ jsxs6(
             TableCell,
             {
               ...restCellProps,
@@ -1531,39 +1587,8 @@ var BiampTableRow = React2.memo(
   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";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var overlaySx = {
   position: "absolute",
   top: 0,
@@ -1623,10 +1648,10 @@ function BiampTable({
   const hasExpandableRows = enableExpanding && rows.some((r) => r.getCanExpand());
   const showError = !!error && !loading;
   const showEmpty = !showError && !loading && rows.length === 0;
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     TableContainer,
     {
-      component: Box6,
+      component: Box7,
       ...boxProps,
       ref: containerRef,
       sx: {
@@ -1637,7 +1662,7 @@ function BiampTable({
         ...sx
       },
       children: [
-        /* @__PURE__ */ jsxs6(
+        /* @__PURE__ */ jsxs7(
           MuiTable,
           {
             "aria-busy": showLoading || void 0,
@@ -1647,7 +1672,7 @@ function BiampTable({
               userTableSx
             ),
             children: [
-              /* @__PURE__ */ jsx10(TableHead, { ...restHeadSlotProps, sx: mergeSx(userHeadSx), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs6(
+              /* @__PURE__ */ jsx10(TableHead, { ...restHeadSlotProps, sx: mergeSx(userHeadSx), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs7(
                 TableRow2,
                 {
                   ...restHeaderRowSlotProps,
@@ -1739,14 +1764,14 @@ function BiampTable({
             ]
           }
         ),
-        showError && /* @__PURE__ */ jsx10(Box6, { sx: overlaySx, children: error === true ? /* @__PURE__ */ jsx10(BiampTableErrorState, { sx: { pointerEvents: "auto" } }) : error instanceof Error ? /* @__PURE__ */ jsx10(
+        showError && /* @__PURE__ */ jsx10(Box7, { 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__ */ jsx10(Box6, { sx: overlaySx, children: empty && empty !== true ? empty : /* @__PURE__ */ jsx10(BiampTableEmptyState, { sx: { pointerEvents: "auto" } }) })
+        showEmpty && /* @__PURE__ */ jsx10(Box7, { sx: overlaySx, children: empty && empty !== true ? empty : /* @__PURE__ */ jsx10(BiampTableEmptyState, { sx: { pointerEvents: "auto" } }) })
       ]
     }
   );
@@ -1766,9 +1791,9 @@ function BiampTableContainer({
     Stack6,
     {
       direction: "column",
+      width: "100%",
       height: "100%",
       overflow: "hidden",
-      px: { xs: 2, sm: 3, xl: 12.5 },
       py: { xs: 0, md: 1.5 },
       gap: { xs: 0, md: 1 },
       borderTop: withBorderTop ? ({ palette }) => `0.6px solid ${palette.divider}` : void 0,
@@ -1800,7 +1825,7 @@ function BiampTableCellActionButton({ label, icon, ...props }) {
 // src/BiampTable/BiampTableColumnVisibility.tsx
 import {
   alpha as alpha2,
-  Box as Box7,
+  Box as Box8,
   Checkbox as Checkbox3,
   Divider,
   List,
@@ -1808,7 +1833,7 @@ import {
   Popover as Popover2,
   Typography as Typography4
 } from "@mui/material";
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 function toVisibilityState(visibility) {
   return visibility;
 }
@@ -1872,8 +1897,8 @@ function BiampTableColumnVisibility({
         }
       },
       ...popoverProps,
-      children: /* @__PURE__ */ jsxs7(List, { dense: true, disablePadding: true, children: [
-        /* @__PURE__ */ jsxs7(
+      children: /* @__PURE__ */ jsxs8(List, { dense: true, disablePadding: true, children: [
+        /* @__PURE__ */ jsxs8(
           ListItem,
           {
             dense: true,
@@ -1893,12 +1918,12 @@ function BiampTableColumnVisibility({
         ),
         /* @__PURE__ */ jsx13(Divider, {}),
         /* @__PURE__ */ jsx13(
-          Box7,
+          Box8,
           {
             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__ */ jsxs7(
+              return /* @__PURE__ */ jsxs8(
                 ListItem,
                 {
                   dense: true,
@@ -1974,7 +1999,7 @@ function BiampTableToolbarActionButton({
 }
 
 // src/BiampTable/BiampTableToolbarColumnVisibility.tsx
-import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 function BiampTableToolbarColumnVisibility({
   table,
   icon = /* @__PURE__ */ jsx15(ColumnsIcon, { variant: "xs" }),
@@ -1986,7 +2011,7 @@ function BiampTableToolbarColumnVisibility({
   const [anchorEl, setAnchorEl] = useState4(null);
   const defaults = defaultColumnVisibility ?? getDefaultColumnVisibility(table);
   const dirtyCount = getColumnVisibilityDirtyCount(table, defaults);
-  return /* @__PURE__ */ jsxs8(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs9(Fragment2, { children: [
     /* @__PURE__ */ jsx15(
       BiampTableToolbarActionButton,
       {
@@ -2073,7 +2098,7 @@ function BiampTablePagination({
 }
 
 // src/BiampTable/BiampTableToolbar.tsx
-import { Box as Box8 } from "@mui/material";
+import { Box as Box9 } from "@mui/material";
 import { jsx as jsx17 } from "react/jsx-runtime";
 function BiampTableToolbar({
   children,
@@ -2081,16 +2106,15 @@ function BiampTableToolbar({
   ...props
 }) {
   return /* @__PURE__ */ jsx17(
-    Box8,
+    Box9,
     {
       role: "toolbar",
       display: "flex",
       justifyContent: "space-between",
       alignItems: "center",
       gap: { xs: 0, md: 1 },
+      width: "100%",
       minHeight: 44,
-      pl: { xs: 2, sm: 3, xl: 12.5 },
-      pr: { xs: 0, md: 3, xl: 12.5 },
       sx: { ...sx },
       ...props,
       children
@@ -2099,14 +2123,14 @@ function BiampTableToolbar({
 }
 
 // src/BiampTable/BiampTableToolbarActions.tsx
-import { Box as Box9 } from "@mui/material";
+import { Box as Box10 } from "@mui/material";
 import { jsx as jsx18 } from "react/jsx-runtime";
 function BiampTableToolbarActions({
   children,
   ...props
 }) {
   return /* @__PURE__ */ jsx18(
-    Box9,
+    Box10,
     {
       display: "flex",
       alignItems: "center",
@@ -2145,7 +2169,7 @@ function BiampTableToolbarExport({
 // src/BiampTable/BiampTableToolbarFilters.tsx
 import {
   Badge as Badge2,
-  Box as Box10,
+  Box as Box11,
   Button,
   Divider as Divider2,
   Drawer,
@@ -2154,7 +2178,7 @@ import {
 } from "@mui/material";
 import { CloseIcon, FilterIcon } from "@bwp-web/assets";
 import { useId, useState as useState5 } from "react";
-import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
 function BiampTableToolbarFilters({
   activeFilterCount,
   children,
@@ -2174,7 +2198,7 @@ function BiampTableToolbarFilters({
     onApply?.();
     setOpen(false);
   }
-  return /* @__PURE__ */ jsxs9(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs10(Fragment3, { children: [
     /* @__PURE__ */ jsx20(
       BiampTableToolbarActionButton,
       {
@@ -2196,17 +2220,17 @@ function BiampTableToolbarFilters({
           sx: { width: { xs: "100%", sm: 480 } },
           ...drawerProps?.PaperProps
         },
-        children: /* @__PURE__ */ jsxs9(
-          Box10,
+        children: /* @__PURE__ */ jsxs10(
+          Box11,
           {
             height: "100%",
             display: "flex",
             flexDirection: "column",
             justifyContent: "space-between",
             children: [
-              /* @__PURE__ */ jsxs9(Box10, { children: [
-                /* @__PURE__ */ jsxs9(
-                  Box10,
+              /* @__PURE__ */ jsxs10(Box11, { children: [
+                /* @__PURE__ */ jsxs10(
+                  Box11,
                   {
                     display: "flex",
                     justifyContent: "space-between",
@@ -2214,7 +2238,7 @@ function BiampTableToolbarFilters({
                     px: 3.5,
                     py: 2.5,
                     children: [
-                      /* @__PURE__ */ jsxs9(Typography5, { id: titleId, variant: "h2", children: [
+                      /* @__PURE__ */ jsxs10(Typography5, { id: titleId, variant: "h2", children: [
                         title,
                         /* @__PURE__ */ jsx20(
                           Badge2,
@@ -2239,7 +2263,7 @@ function BiampTableToolbarFilters({
                 ),
                 /* @__PURE__ */ jsx20(Divider2, {}),
                 /* @__PURE__ */ jsx20(
-                  Box10,
+                  Box11,
                   {
                     role: "group",
                     "aria-label": "Filter options",
@@ -2252,7 +2276,7 @@ function BiampTableToolbarFilters({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs9(Box10, { display: "flex", children: [
+              /* @__PURE__ */ jsxs10(Box11, { display: "flex", children: [
                 /* @__PURE__ */ jsx20(
                   Button,
                   {
@@ -2285,7 +2309,7 @@ function BiampTableToolbarFilters({
 
 // src/BiampTable/BiampTableToolbarSearch.tsx
 import {
-  Box as Box11,
+  Box as Box12,
   Collapse,
   IconButton as IconButton5,
   InputAdornment as InputAdornment2,
@@ -2321,7 +2345,7 @@ function useDebouncedCallback(callback, delay = BIAMP_TABLE_DEBOUNCE_DELAY) {
 }
 
 // src/BiampTable/BiampTableToolbarSearch.tsx
-import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
 var searchFieldSx = {
   "& .MuiInputBase-root": {
     height: "36px !important",
@@ -2410,7 +2434,7 @@ function BiampTableToolbarSearch({
     }
   );
   if (isMobile && enableMobileView) {
-    return /* @__PURE__ */ jsxs10(Box11, { display: "flex", alignItems: "center", width: "100%", pr: 1, gap: 1, children: [
+    return /* @__PURE__ */ jsxs11(Box12, { display: "flex", alignItems: "center", width: "100%", pr: 1, gap: 1, children: [
       /* @__PURE__ */ jsx21(SearchIcon2, { sx: { width: 16, height: 16 } }),
       /* @__PURE__ */ jsx21(
         InputBase,
@@ -2434,7 +2458,7 @@ function BiampTableToolbarSearch({
     ] });
   }
   if (expandable) {
-    return /* @__PURE__ */ jsxs10(Box11, { display: "flex", alignItems: "center", minWidth: 28, children: [
+    return /* @__PURE__ */ jsxs11(Box12, { display: "flex", alignItems: "center", minWidth: 28, children: [
       /* @__PURE__ */ jsx21(
         IconButton5,
         {
@@ -2677,7 +2701,7 @@ function downloadCsv(csvContent, filename) {
 
 // src/BiampBanner/BiampBanner.tsx
 import {
-  Box as Box12,
+  Box as Box13,
   Collapse as Collapse2,
   Typography as Typography6
 } from "@mui/material";
@@ -2690,7 +2714,7 @@ import {
 import { Fragment as Fragment4, jsx as jsx22 } from "react/jsx-runtime";
 function BiampBanner({ show, children, severity }) {
   return /* @__PURE__ */ jsx22(Collapse2, { in: show, unmountOnExit: true, component: "aside", children: /* @__PURE__ */ jsx22(
-    Box12,
+    Box13,
     {
       bgcolor: ({ palette }) => palette.background[severity],
       display: "flex",
@@ -2720,7 +2744,7 @@ function BiampBannerContent({ children, ...props }) {
   return /* @__PURE__ */ jsx22(Typography6, { textAlign: "center", variant: "h3", ...props, children });
 }
 function BiampBannerActions({ children, ...props }) {
-  return /* @__PURE__ */ jsx22(Box12, { display: "flex", gap: 1, alignItems: "center", ...props, children });
+  return /* @__PURE__ */ jsx22(Box13, { display: "flex", gap: 1, alignItems: "center", ...props, children });
 }
 
 // src/BiampSegmentedButton/SegmentedButton.tsx
@@ -2789,7 +2813,7 @@ function SegmentedButtonGroup({ children, sx, ...props }) {
 import { createContext as createContext2, forwardRef, useContext as useContext2 } from "react";
 import {
   Autocomplete,
-  Box as Box13,
+  Box as Box14,
   Chip,
   InputAdornment as InputAdornment3,
   Paper,
@@ -2797,7 +2821,7 @@ import {
   Typography as Typography7
 } from "@mui/material";
 import { KeyArrowDownIcon, KeyArrowUpIcon, SearchIcon as SearchIcon3 } from "@bwp-web/assets";
-import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
 var SearchContext = createContext2({
   hasOptions: true,
   loading: false,
@@ -2809,7 +2833,7 @@ function KeyCap({
   variant = "icon"
 }) {
   return /* @__PURE__ */ jsx25(
-    Box13,
+    Box14,
     {
       component: "kbd",
       sx: {
@@ -2836,7 +2860,7 @@ function KeyCap({
 var BiampGlobalSearchPaper = forwardRef(
   function BiampGlobalSearchPaper2({ children, ...props }, ref) {
     const { hasOptions, loading, noResultsText } = useContext2(SearchContext);
-    return /* @__PURE__ */ jsxs11(Paper, { ref, ...props, children: [
+    return /* @__PURE__ */ jsxs12(Paper, { ref, ...props, children: [
       hasOptions || loading ? children : /* @__PURE__ */ jsx25(
         Typography7,
         {
@@ -2846,8 +2870,8 @@ var BiampGlobalSearchPaper = forwardRef(
           children: noResultsText
         }
       ),
-      hasOptions && /* @__PURE__ */ jsxs11(
-        Box13,
+      hasOptions && /* @__PURE__ */ jsxs12(
+        Box14,
         {
           sx: {
             borderTop: ({ palette }) => `0.6px solid ${palette.dividers.secondary}`,
@@ -2857,8 +2881,8 @@ var BiampGlobalSearchPaper = forwardRef(
             p: 1.5
           },
           children: [
-            /* @__PURE__ */ jsxs11(Box13, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-              /* @__PURE__ */ jsxs11(Box13, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+            /* @__PURE__ */ jsxs12(Box14, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+              /* @__PURE__ */ jsxs12(Box14, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
                 /* @__PURE__ */ jsx25(KeyCap, { children: /* @__PURE__ */ jsx25(KeyArrowDownIcon, {}) }),
                 /* @__PURE__ */ jsx25(KeyCap, { children: /* @__PURE__ */ jsx25(KeyArrowUpIcon, {}) })
               ] }),
@@ -2872,7 +2896,7 @@ var BiampGlobalSearchPaper = forwardRef(
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs11(Box13, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+            /* @__PURE__ */ jsxs12(Box14, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
               /* @__PURE__ */ jsx25(KeyCap, { variant: "text", children: "Enter" }),
               /* @__PURE__ */ jsx25(
                 Typography7,
@@ -2897,10 +2921,10 @@ function HighlightText({ text, query }) {
   const before = text.slice(0, index);
   const match = text.slice(index, index + query.length);
   const after = text.slice(index + query.length);
-  return /* @__PURE__ */ jsxs11(Fragment5, { children: [
+  return /* @__PURE__ */ jsxs12(Fragment5, { children: [
     before,
     /* @__PURE__ */ jsx25(
-      Box13,
+      Box14,
       {
         component: "span",
         sx: {
@@ -2925,7 +2949,7 @@ function BiampGlobalSearchListItem({
   const maxChips = 3;
   const chips = option.associatedItems?.slice(0, maxChips) ?? [];
   const overflow = (option.associatedItems?.length ?? 0) - maxChips;
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     "li",
     {
       ...rest,
@@ -2938,7 +2962,7 @@ function BiampGlobalSearchListItem({
       },
       children: [
         option.icon && /* @__PURE__ */ jsx25(
-          Box13,
+          Box14,
           {
             sx: {
               width: 24,
@@ -2963,8 +2987,8 @@ function BiampGlobalSearchListItem({
             children: option.subtitle
           }
         ),
-        chips.length > 0 && /* @__PURE__ */ jsxs11(
-          Box13,
+        chips.length > 0 && /* @__PURE__ */ jsxs12(
+          Box14,
           {
             className: "hoverContent",
             sx: {
@@ -3015,7 +3039,7 @@ function BiampGlobalSearchListItem({
           }
         ),
         option.endIcon && /* @__PURE__ */ jsx25(
-          Box13,
+          Box14,
           {
             className: "endIcon",
             sx: {
@@ -3119,7 +3143,7 @@ function BiampGlobalSearch({
               slotProps: {
                 input: {
                   ...params.InputProps,
-                  startAdornment: /* @__PURE__ */ jsxs11(Fragment5, { children: [
+                  startAdornment: /* @__PURE__ */ jsxs12(Fragment5, { children: [
                     /* @__PURE__ */ jsx25(InputAdornment3, { position: "start", children: /* @__PURE__ */ jsx25(SearchIcon3, {}) }),
                     params.InputProps.startAdornment
                   ] })
@@ -3144,7 +3168,7 @@ function BiampGlobalSearch({
 
 // src/UserInitialsIcon/UserInitialsIcon.tsx
 var import_randomcolor = __toESM(require_randomColor(), 1);
-import { Box as Box14, Typography as Typography8 } from "@mui/material";
+import { Box as Box15, Typography as Typography8 } from "@mui/material";
 import { darken } from "@mui/material/styles";
 import { jsx as jsx26 } from "react/jsx-runtime";
 var DEFAULT_SIZE = 40;
@@ -3165,7 +3189,7 @@ function UserInitialsIcon({
   const size = typeof width === "number" ? width : DEFAULT_SIZE;
   const fontSize = size * TEXT_RATIO;
   return /* @__PURE__ */ jsx26(
-    Box14,
+    Box15,
     {
       minWidth: width,
       width,
@@ -3201,7 +3225,7 @@ var getInitials = (name) => {
 };
 
 // src/DynamicSvgIcon/DynamicSvgIcon.tsx
-import { SvgIcon, Skeleton, Box as Box15 } from "@mui/material";
+import { SvgIcon, Skeleton, Box as Box16 } 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();
@@ -3316,7 +3340,7 @@ function DynamicSvgIcon({
   }
   if (error || !svgContent) {
     return /* @__PURE__ */ jsx27(
-      Box15,
+      Box16,
       {
         sx: {
           width,