@bwp-web/components 1.11.0 → 2.0.0-alpha.1

package/dist/index.js

@@ -395,36 +395,34 @@ var require_randomColor = __commonJS({
 import { Box, LinearProgress, Stack } from "@mui/material";
 
 // src/hooks/useLoadingDelay.ts
-import { useEffect, useRef, useState } from "react";
+import { useEffect, 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;
-    }
+  if (loading && status === "idle") {
+    setStatus("delaying");
+  } else if (!loading && (status === "delaying" || status === "ending")) {
+    setStatus("idle");
   }
   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, []);
+    if (status !== "delaying" && status !== "loading") return;
+    const timeout = setTimeout(
+      () => setStatus(status === "delaying" ? "loading" : "ending"),
+      status === "delaying" ? delay : minDuration
+    );
+    return () => clearTimeout(timeout);
+  }, [status, delay, minDuration]);
   return status === "loading" || status === "ending";
 }
 
+// src/slotProps.ts
+function resolveSlot(slot, ctx) {
+  if (!slot) return void 0;
+  return typeof slot === "function" ? slot(ctx) : slot;
+}
+function mergeSx(...inputs) {
+  return inputs.filter((v) => Boolean(v)).flatMap((v) => Array.isArray(v) ? v : [v]);
+}
+
 // src/BiampWrapper/BiampWrapper.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 function BiampWrapper({
@@ -439,19 +437,21 @@ function BiampWrapper({
     Stack,
     {
       direction: "column",
-      padding: "16px",
-      sx: {
-        position: "relative",
-        flex: 1,
-        height: "100%",
-        width: "100%",
-        borderRadius: "8px",
-        overflow: "auto",
-        overscrollBehavior: "none",
-        backgroundColor: ({ palette }) => palette.mode === "dark" ? palette.grey[800] : palette.common.white,
-        ...sx
-      },
       ...props,
+      sx: mergeSx(
+        {
+          padding: "16px",
+          position: "relative",
+          flex: 1,
+          height: "100%",
+          width: "100%",
+          borderRadius: "8px",
+          overflow: "auto",
+          overscrollBehavior: "none",
+          backgroundColor: ({ palette }) => palette.mode === "dark" ? palette.grey[800] : palette.common.white
+        },
+        sx
+      ),
       children: [
         showLoading && /* @__PURE__ */ jsx(
           Box,
@@ -538,24 +538,28 @@ function BiampLayout({
     Stack2,
     {
       direction: "column",
-      height: "100vh",
-      sx: {
-        backgroundColor: ({ palette }) => palette.mode === "dark" ? palette.grey[900] : palette.grey[100],
-        ...sx
-      },
       ...props,
+      sx: mergeSx(
+        {
+          height: "100vh",
+          backgroundColor: ({ palette }) => palette.mode === "dark" ? palette.grey[900] : palette.grey[100]
+        },
+        sx
+      ),
       children: [
         header,
         /* @__PURE__ */ jsxs2(
           Stack2,
           {
             direction: "row",
-            flex: 1,
-            minHeight: 0,
-            gap: { xs: 1.5, md: 2.5 },
-            px: { xs: 1.5, md: 2.5 },
-            pb: { xs: 1.5, md: 2.5 },
-            pt: { xs: header ? 0 : 1.5, md: header ? 0 : 2.5 },
+            sx: {
+              flex: 1,
+              minHeight: 0,
+              gap: { xs: 1.5, md: 2.5 },
+              px: { xs: 1.5, md: 2.5 },
+              pb: { xs: 1.5, md: 2.5 },
+              pt: { xs: header ? 0 : 1.5, md: header ? 0 : 2.5 }
+            },
             children: [
               !isDrawer && !(responsive && mobileSidebarOnly) && sidebar,
               children
@@ -583,9 +587,13 @@ function BiampLayout({
                 Stack2,
                 {
                   direction: "row",
-                  alignItems: "center",
-                  gap: 1,
-                  sx: { height: 40, mb: 1.5, flexShrink: 0 },
+                  sx: {
+                    alignItems: "center",
+                    gap: 1,
+                    height: 40,
+                    mb: 1.5,
+                    flexShrink: 0
+                  },
                   children: [
                     /* @__PURE__ */ jsx2(
                       IconButton,
@@ -647,16 +655,18 @@ function BiampSidebar({
   return /* @__PURE__ */ jsx3(BiampSidebarContext.Provider, { value: { expanded }, children: /* @__PURE__ */ jsxs3(
     Stack3,
     {
-      sx: {
-        width,
-        minWidth: width,
-        height: "100%",
-        transition: ({ transitions }) => transitions.create(["width", "min-width"], {
-          easing: transitions.easing.sharp,
-          duration: expanded ? transitions.duration.enteringScreen : transitions.duration.leavingScreen
-        }),
-        ...sx
-      },
+      sx: mergeSx(
+        {
+          width,
+          minWidth: width,
+          height: "100%",
+          transition: ({ transitions }) => transitions.create(["width", "min-width"], {
+            easing: transitions.easing.sharp,
+            duration: expanded ? transitions.duration.enteringScreen : transitions.duration.leavingScreen
+          })
+        },
+        sx
+      ),
       ...props,
       children: [
         /* @__PURE__ */ jsx3(Stack3, { sx: { flex: 1, minHeight: 0 }, children }),
@@ -682,9 +692,12 @@ function BiampSidebar({
           Stack3,
           {
             direction: "row",
-            alignItems: "center",
-            justifyContent: "space-between",
-            sx: { mt: 2, overflow: "hidden" },
+            sx: {
+              alignItems: "center",
+              justifyContent: "space-between",
+              mt: 2,
+              overflow: "hidden"
+            },
             children: [
               bottomLogoIcon ?? /* @__PURE__ */ jsx3(
                 BiampLogoIcon,
@@ -696,10 +709,10 @@ function BiampSidebar({
                 Typography,
                 {
                   variant: "caption",
-                  fontWeight: 500,
-                  color: "text.secondary",
                   noWrap: true,
                   sx: {
+                    fontWeight: 500,
+                    color: "text.secondary",
                     opacity: expanded ? 1 : 0,
                     transition: ({ transitions }) => transitions.create("opacity", {
                       duration: expanded ? transitions.duration.enteringScreen : transitions.duration.leavingScreen
@@ -723,14 +736,16 @@ function BiampSidebarIconList({
   return /* @__PURE__ */ jsx3(
     Stack3,
     {
-      sx: {
-        flex: 1,
-        minHeight: 0,
-        gap: "4px",
-        overflowY: "auto",
-        overscrollBehavior: "none",
-        ...sx
-      },
+      sx: mergeSx(
+        {
+          flex: 1,
+          minHeight: 0,
+          gap: "4px",
+          overflowY: "auto",
+          overscrollBehavior: "none"
+        },
+        sx
+      ),
       ...props,
       children
     }
@@ -761,21 +776,23 @@ function BiampSidebarIcon({
           layoutDrawer.setOpen(false);
         }
       },
-      sx: {
-        minWidth: "48px",
-        minHeight: "48px",
-        maxHeight: "48px",
-        borderRadius: "8px",
-        justifyContent: "flex-start",
-        alignItems: "center",
-        padding: 0,
-        overflow: "hidden",
-        color: "text.secondary",
-        "&.Mui-selected": {
-          color: "primary.main"
+      sx: mergeSx(
+        {
+          minWidth: "48px",
+          minHeight: "48px",
+          maxHeight: "48px",
+          borderRadius: "8px",
+          justifyContent: "flex-start",
+          alignItems: "center",
+          padding: 0,
+          overflow: "hidden",
+          color: "text.secondary",
+          "&.Mui-selected": {
+            color: "primary.main"
+          }
         },
-        ...sx
-      },
+        sx
+      ),
       ...props,
       children: [
         /* @__PURE__ */ jsx3(
@@ -805,10 +822,10 @@ function BiampSidebarIcon({
           Typography,
           {
             variant: "body1",
-            fontWeight: 600,
-            color: "inherit",
             noWrap: true,
             sx: {
+              fontWeight: 600,
+              color: "inherit",
               pr: 2,
               opacity: expanded ? 1 : 0,
               transition: ({ transitions }) => transitions.create("opacity", {
@@ -830,18 +847,20 @@ function BiampSidebarComponent({
   return /* @__PURE__ */ jsx3(
     Box2,
     {
-      sx: {
-        minWidth: "48px",
-        maxWidth: "48px",
-        minHeight: "48px",
-        maxHeight: "48px",
-        borderRadius: "8px",
-        overflow: "hidden",
-        justifyContent: "center",
-        alignItems: "center",
-        border: ({ palette }) => `0.6px solid ${palette.divider}`,
-        ...sx
-      },
+      sx: mergeSx(
+        {
+          minWidth: "48px",
+          maxWidth: "48px",
+          minHeight: "48px",
+          maxHeight: "48px",
+          borderRadius: "8px",
+          overflow: "hidden",
+          justifyContent: "center",
+          alignItems: "center",
+          border: ({ palette }) => `0.6px solid ${palette.divider}`
+        },
+        sx
+      ),
       ...props,
       children
     }
@@ -859,7 +878,6 @@ import {
   Stack as Stack4,
   Typography as Typography3
 } from "@mui/material";
-import { Children } from "react";
 import { BiampRedLogo, ColumnsIcon, ExternalLinkIcon } from "@bwp-web/assets";
 
 // src/BiampGlobalSearch/BiampGlobalSearch.tsx
@@ -874,6 +892,7 @@ import {
   Typography as Typography2,
   useMediaQuery as useMediaQuery2
 } from "@mui/material";
+import { mergeSlotProps } from "@mui/material/utils";
 import { KeyArrowDownIcon, KeyArrowUpIcon, SearchIcon } from "@bwp-web/assets";
 import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var SearchContext = createContext3({
@@ -919,8 +938,11 @@ var BiampGlobalSearchPaper = forwardRef(
         Typography2,
         {
           variant: "body2",
-          color: "text.secondary",
-          sx: { px: 2, py: 1.5 },
+          sx: {
+            color: "text.secondary",
+            px: 2,
+            py: 1.5
+          },
           children: noResultsText
         }
       ),
@@ -944,8 +966,10 @@ var BiampGlobalSearchPaper = forwardRef(
                 Typography2,
                 {
                   variant: "caption",
-                  fontWeight: (theme) => theme.typography.fontWeightMedium,
-                  color: "text.secondary",
+                  sx: {
+                    fontWeight: (theme) => theme.typography.fontWeightMedium,
+                    color: "text.secondary"
+                  },
                   children: "Select"
                 }
               )
@@ -956,8 +980,10 @@ var BiampGlobalSearchPaper = forwardRef(
                 Typography2,
                 {
                   variant: "caption",
-                  fontWeight: (theme) => theme.typography.fontWeightMedium,
-                  color: "text.secondary",
+                  sx: {
+                    fontWeight: (theme) => theme.typography.fontWeightMedium,
+                    color: "text.secondary"
+                  },
                   children: "Open"
                 }
               )
@@ -1043,9 +1069,13 @@ function BiampGlobalSearchListItem({
           {
             className: "hoverContent",
             variant: "body2",
-            color: "text.secondary",
             noWrap: true,
-            sx: { flexShrink: 1, minWidth: 0, display: "none" },
+            sx: {
+              color: "text.secondary",
+              flexShrink: 1,
+              minWidth: 0,
+              display: "none"
+            },
             children: option.subtitle
           }
         ),
@@ -1138,6 +1168,7 @@ function BiampGlobalSearch({
   onChange,
   onInputChange,
   sx,
+  slotProps,
   ...props
 }) {
   const hasOptions = options.length > 0;
@@ -1178,25 +1209,36 @@ function BiampGlobalSearch({
           inputValue,
           loading,
           fullWidth,
-          sx: {
-            px: 1.5,
-            "& .MuiOutlinedInput-root": {
-              height: "40px !important",
-              minHeight: "40px"
-            },
-            "& .MuiOutlinedInput-input": {
-              height: "40px !important"
-            },
-            "& .MuiOutlinedInput-notchedOutline": {
-              height: "40px !important",
-              border: "none",
-              boxShadow: "none"
+          sx: mergeSx(
+            {
+              px: 1.5,
+              "& .MuiOutlinedInput-root": {
+                height: "40px !important",
+                minHeight: "40px"
+              },
+              "& .MuiOutlinedInput-input": {
+                height: "40px !important"
+              },
+              "& .MuiOutlinedInput-notchedOutline": {
+                height: "40px !important",
+                border: "none",
+                boxShadow: "none"
+              }
             },
-            ...sx
-          },
+            sx
+          ),
           onChange: handleChange,
           onInputChange: handleInputChange,
-          loadingText: /* @__PURE__ */ jsx4(Typography2, { variant: "body2", color: "text.secondary", children: "Loading\u2026" }),
+          loadingText: /* @__PURE__ */ jsx4(
+            Typography2,
+            {
+              variant: "body2",
+              sx: {
+                color: "text.secondary"
+              },
+              children: "Loading\u2026"
+            }
+          ),
           freeSolo: true,
           filterOptions: (x) => x,
           getOptionLabel: (option) => typeof option === "string" ? option : option.title,
@@ -1204,7 +1246,14 @@ function BiampGlobalSearch({
           noOptionsText: noResultsText,
           slots: { paper: BiampGlobalSearchPaper },
           slotProps: {
-            listbox: {
+            ...slotProps,
+            // In freeSolo mode MUI 9 skips the Popper when there are no options
+            // (unless `keepMounted`), so the Paper's `noResultsText` would never
+            // show. A closed, kept-mounted Popper is `display: none`.
+            popper: mergeSlotProps(slotProps?.popper, {
+              keepMounted: !hasOptions
+            }),
+            listbox: mergeSlotProps(slotProps?.listbox, {
               sx: {
                 "& .MuiAutocomplete-option": {
                   paddingRight: "0px !important"
@@ -1219,7 +1268,7 @@ function BiampGlobalSearch({
                   visibility: "visible"
                 }
               }
-            }
+            })
           },
           renderInput: (params) => /* @__PURE__ */ jsx4(
             TextField,
@@ -1232,11 +1281,12 @@ function BiampGlobalSearch({
                 "& .MuiInputBase-input": { paddingLeft: "8px !important" }
               },
               slotProps: {
+                ...params.slotProps,
                 input: {
-                  ...params.InputProps,
+                  ...params.slotProps.input,
                   startAdornment: /* @__PURE__ */ jsxs4(Fragment, { children: [
                     /* @__PURE__ */ jsx4(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx4(SearchIcon, {}) }),
-                    params.InputProps.startAdornment
+                    params.slotProps.input.startAdornment
                   ] })
                 }
               }
@@ -1264,10 +1314,16 @@ function BiampHeader({ children, sx, ...props }) {
     Stack4,
     {
       direction: "row",
-      alignItems: "center",
-      gap: { xs: 0.5, md: 3 },
-      sx: { px: 2.5, py: 1.5, ...sx },
       ...props,
+      sx: mergeSx(
+        {
+          alignItems: "center",
+          gap: { xs: 0.5, md: 3 },
+          px: 2.5,
+          py: 1.5
+        },
+        sx
+      ),
       children
     }
   );
@@ -1282,12 +1338,7 @@ function BiampHeaderTitle({
   return /* @__PURE__ */ jsxs5(
     Box4,
     {
-      sx: {
-        display: "flex",
-        alignItems: "center",
-        gap: "12px",
-        ...sx
-      },
+      sx: mergeSx({ display: "flex", alignItems: "center", gap: "12px" }, sx),
       ...props,
       children: [
         icon ? /* @__PURE__ */ jsx5(
@@ -1311,10 +1362,28 @@ function BiampHeaderTitle({
             sx: { width: 24, height: 24 }
           }
         ),
-        /* @__PURE__ */ jsxs5(Stack4, { direction: "row", gap: 0.5, children: [
-          title && /* @__PURE__ */ jsx5(Typography3, { variant: "h4", children: title }),
-          subtitle && /* @__PURE__ */ jsx5(Typography3, { variant: "h4", color: "text.secondary", children: subtitle })
-        ] })
+        /* @__PURE__ */ jsxs5(
+          Stack4,
+          {
+            direction: "row",
+            sx: {
+              gap: 0.5
+            },
+            children: [
+              title && /* @__PURE__ */ jsx5(Typography3, { variant: "h4", children: title }),
+              subtitle && /* @__PURE__ */ jsx5(
+                Typography3,
+                {
+                  variant: "h4",
+                  sx: {
+                    color: "text.secondary"
+                  },
+                  children: subtitle
+                }
+              )
+            ]
+          }
+        )
       ]
     }
   );
@@ -1333,13 +1402,15 @@ function BiampHeaderActions({
   return /* @__PURE__ */ jsx5(
     Box4,
     {
-      sx: {
-        ml: "auto",
-        gap: { xs: 1, md: 2 },
-        display: "flex",
-        alignItems: "center",
-        ...sx
-      },
+      sx: mergeSx(
+        {
+          ml: "auto",
+          gap: { xs: 1, md: 2 },
+          display: "flex",
+          alignItems: "center"
+        },
+        sx
+      ),
       ...props,
       children
     }
@@ -1353,12 +1424,10 @@ function BiampHeaderButtonList({
   return /* @__PURE__ */ jsx5(
     Box4,
     {
-      sx: {
-        display: "flex",
-        alignItems: "center",
-        gap: { xs: 0, md: 0.5 },
-        ...sx
-      },
+      sx: mergeSx(
+        { display: "flex", alignItems: "center", gap: { xs: 0, md: 0.5 } },
+        sx
+      ),
       ...props,
       children
     }
@@ -1407,16 +1476,18 @@ function BiampHeaderButton({
       selected,
       disableGutters: true,
       disableRipple: true,
-      sx: {
-        minWidth: "40px",
-        maxWidth: "40px",
-        minHeight: "40px",
-        maxHeight: "40px",
-        borderRadius: "4px",
-        justifyContent: "center",
-        alignItems: "center",
-        ...sx
-      },
+      sx: mergeSx(
+        {
+          minWidth: "40px",
+          maxWidth: "40px",
+          minHeight: "40px",
+          maxHeight: "40px",
+          borderRadius: "4px",
+          justifyContent: "center",
+          alignItems: "center"
+        },
+        sx
+      ),
       ...props,
       children: selected ? displayedSelectedIcon : icon
     }
@@ -1435,7 +1506,7 @@ function BiampAppPopover({
       open,
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
       transformOrigin: { vertical: -4, horizontal: APP_POPOVER_MAX_WIDTH },
-      sx: { ...sx },
+      sx,
       slotProps: {
         paper: {
           sx: {
@@ -1459,120 +1530,6 @@ function BiampAppPopover({
     }
   );
 }
-function BiampBuildAppContent({
-  children,
-  sx,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx5(
-    Box4,
-    {
-      sx: {
-        display: "grid",
-        gridTemplateColumns: "1fr 1fr",
-        gap: 1.5,
-        ...sx
-      },
-      ...props,
-      children
-    }
-  );
-}
-function BiampBuildAppContentItem({
-  image,
-  name,
-  description,
-  button,
-  sx,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs5(
-    Stack4,
-    {
-      direction: "column",
-      position: "relative",
-      sx: {
-        p: 1.5,
-        borderRadius: 1.5,
-        outlineWidth: "1px",
-        outlineStyle: "solid",
-        outlineColor: ({ palette }) => palette.dividers,
-        ...sx
-      },
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx5(Box4, { sx: { width: 54, height: 54 }, mb: 0.5, children: image }),
-        /* @__PURE__ */ jsx5(Typography3, { variant: "caption", fontWeight: 600, mb: 0.5, children: name }),
-        /* @__PURE__ */ jsx5(Typography3, { variant: "caption", color: "text.secondary", children: description }),
-        button && /* @__PURE__ */ jsx5(Box4, { position: "absolute", top: "12px", right: "12px", children: button })
-      ]
-    }
-  );
-}
-function BiampEndUserAppContent({
-  children,
-  sx,
-  ...props
-}) {
-  const isGrid = Children.count(children) > 1;
-  return /* @__PURE__ */ jsx5(
-    Stack4,
-    {
-      direction: "column",
-      sx: {
-        gap: 1.5,
-        ...isGrid && {
-          display: "grid",
-          gridTemplateColumns: "1fr 1fr"
-        },
-        ...sx
-      },
-      ...props,
-      children
-    }
-  );
-}
-function BiampEndUserAppContentItem({
-  image,
-  name,
-  description,
-  href,
-  target,
-  sx,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs5(
-    Stack4,
-    {
-      component: href ? "a" : "div",
-      href,
-      target,
-      direction: "row",
-      alignItems: "center",
-      sx: {
-        gap: 1.5,
-        p: 1.5,
-        borderRadius: 1.5,
-        outlineWidth: "1px",
-        outlineStyle: "solid",
-        outlineColor: ({ palette }) => palette.divider,
-        textDecoration: "none",
-        color: "inherit",
-        cursor: href ? "pointer" : void 0,
-        ...sx
-      },
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx5(Box4, { sx: { width: 32, height: 32 }, children: image }),
-        /* @__PURE__ */ jsxs5(Stack4, { direction: "column", children: [
-          /* @__PURE__ */ jsx5(Typography3, { variant: "caption", fontWeight: 600, children: name }),
-          /* @__PURE__ */ jsx5(Typography3, { variant: "caption", color: "text.secondary", children: description })
-        ] }),
-        /* @__PURE__ */ jsx5(ExternalLinkIcon, { sx: { width: 16, height: 16, ml: "auto" } })
-      ]
-    }
-  );
-}
 function BiampAppListContent({
   children,
   sx,
@@ -1588,12 +1545,14 @@ function BiampAppListContent({
           sx: { borderColor: ({ palette }) => palette.dividers.secondary }
         }
       ),
-      sx: {
-        borderRadius: 2,
-        border: ({ palette }) => `1px solid ${palette.dividers.secondary}`,
-        overflow: "hidden",
-        ...sx
-      },
+      sx: mergeSx(
+        {
+          borderRadius: 2,
+          border: ({ palette }) => `1px solid ${palette.dividers.secondary}`,
+          overflow: "hidden"
+        },
+        sx
+      ),
       ...props,
       children
     }
@@ -1612,12 +1571,29 @@ function BiampAppListItem({
     Stack4,
     {
       direction: "row",
-      alignItems: "center",
-      sx: { gap: 1.5, py: 1.5, px: 2, ...sx },
       ...props,
+      sx: mergeSx(
+        {
+          alignItems: "center",
+          gap: 1.5,
+          py: 1.5,
+          px: 2
+        },
+        sx
+      ),
       children: [
         /* @__PURE__ */ jsx5(Box4, { sx: { width: 40, height: 40, flexShrink: 0 }, children: image }),
-        /* @__PURE__ */ jsx5(Typography3, { variant: "body2", fontWeight: 600, sx: { flex: 1 }, children: name }),
+        /* @__PURE__ */ jsx5(
+          Typography3,
+          {
+            variant: "body2",
+            sx: {
+              fontWeight: 600,
+              flex: 1
+            },
+            children: name
+          }
+        ),
         hasActions && /* @__PURE__ */ jsxs5(
           Stack4,
           {
@@ -1697,16 +1673,18 @@ function BiampHeaderProfile({
       selected,
       disableGutters: true,
       disableRipple: true,
-      sx: {
-        minWidth: "36px",
-        maxWidth: "36px",
-        minHeight: "36px",
-        maxHeight: "36px",
-        borderRadius: "6px",
-        justifyContent: "center",
-        alignItems: "center",
-        ...sx
-      },
+      sx: mergeSx(
+        {
+          minWidth: "36px",
+          maxWidth: "36px",
+          minHeight: "36px",
+          maxHeight: "36px",
+          borderRadius: "6px",
+          justifyContent: "center",
+          alignItems: "center"
+        },
+        sx
+      ),
       ...props,
       children: image ? /* @__PURE__ */ jsx5(
         Box4,
@@ -1750,7 +1728,7 @@ function BiampNotificationPopover({
         vertical: -4,
         horizontal: NOTIFICATION_POPOVER_MAX_WIDTH
       },
-      sx: { ...sx },
+      sx,
       slotProps: {
         paper: {
           sx: {
@@ -1782,16 +1760,18 @@ function BiampNotificationPopoverHeader({
     Stack5,
     {
       direction: "row",
-      alignItems: "center",
-      justifyContent: "space-between",
-      sx: {
-        flexShrink: 0,
-        gap: 2,
-        px: 2,
-        pt: 2,
-        ...sx
-      },
-      ...props
+      ...props,
+      sx: mergeSx(
+        {
+          alignItems: "center",
+          justifyContent: "space-between",
+          flexShrink: 0,
+          gap: 2,
+          px: 2,
+          pt: 2
+        },
+        sx
+      )
     }
   );
 }
@@ -1802,15 +1782,17 @@ function BiampNotificationPopoverBody({
   return /* @__PURE__ */ jsx6(
     Box5,
     {
-      sx: {
-        flex: 1,
-        minHeight: 0,
-        overflowY: "auto",
-        overscrollBehavior: "none",
-        px: 2,
-        pb: 2,
-        ...sx
-      },
+      sx: mergeSx(
+        {
+          flex: 1,
+          minHeight: 0,
+          overflowY: "auto",
+          overscrollBehavior: "none",
+          px: 2,
+          pb: 2
+        },
+        sx
+      ),
       ...props
     }
   );
@@ -1865,14 +1847,7 @@ function BiampListPopoverItem({
   sx,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
-    ListItem,
-    {
-      dense: true,
-      sx: [listItemSx, ...Array.isArray(sx) ? sx : [sx]],
-      ...props
-    }
-  );
+  return /* @__PURE__ */ jsx7(ListItem, { dense: true, sx: mergeSx(listItemSx, sx), ...props });
 }
 function BiampListPopoverScrollArea({
   maxHeight = 340,
@@ -1882,7 +1857,10 @@ function BiampListPopoverScrollArea({
   return /* @__PURE__ */ jsx7(
     Box6,
     {
-      sx: { maxHeight, overflow: "auto", overscrollBehavior: "none", ...sx },
+      sx: mergeSx(
+        { maxHeight, overflow: "auto", overscrollBehavior: "none" },
+        sx
+      ),
       ...props
     }
   );
@@ -1915,7 +1893,16 @@ function BiampCheckboxListPopover({
             slotProps: { input: { "aria-label": selectAllLabel } }
           }
         ),
-        /* @__PURE__ */ jsx8(Typography4, { variant: "caption", fontWeight: 600, children: selectAllLabel })
+        /* @__PURE__ */ jsx8(
+          Typography4,
+          {
+            variant: "caption",
+            sx: {
+              fontWeight: 600
+            },
+            children: selectAllLabel
+          }
+        )
       ] }),
       /* @__PURE__ */ jsx8(Divider2, {})
     ] }),
@@ -1952,6 +1939,7 @@ import {
   TableBody,
   TableCell as TableCell2,
   TableContainer,
+  TableFooter,
   TableHead,
   TableRow as TableRow2,
   TableSortLabel
@@ -1963,7 +1951,7 @@ import {
 import {
   flexRender as flexRender2
 } from "@tanstack/react-table";
-import { useEffect as useEffect2, useRef as useRef3 } from "react";
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
 
 // src/BiampTable/BiampTableEmptyState.tsx
 import { NoResultsIcon } from "@bwp-web/assets";
@@ -1979,15 +1967,28 @@ function BiampTableStatusMessage({
   children,
   ...stackProps
 }) {
-  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__ */ jsx9(Typography5, { variant: "h2", children: title }),
-    description && /* @__PURE__ */ jsx9(Typography5, { variant: "body1", children: description }),
-    children
-  ] });
+  return /* @__PURE__ */ jsxs7(
+    Stack6,
+    {
+      ...stackProps,
+      sx: mergeSx(
+        {
+          alignItems: "center",
+          gap: 1.5
+        },
+        stackProps.sx
+      ),
+      children: [
+        cloneElement(icon, {
+          "aria-hidden": true,
+          sx: mergeSx({ width: 56, height: 56 }, icon.props.sx)
+        }),
+        /* @__PURE__ */ jsx9(Typography5, { variant: "h2", children: title }),
+        description && /* @__PURE__ */ jsx9(Typography5, { variant: "body1", children: description }),
+        children
+      ]
+    }
+  );
 }
 
 // src/BiampTable/BiampTableEmptyState.tsx
@@ -2033,12 +2034,12 @@ import React4 from "react";
 
 // src/BiampTable/BiampTableTruncatedCell.tsx
 import { Box as Box7, Tooltip as Tooltip2 } from "@mui/material";
-import { useCallback, useRef as useRef2, useState as useState5 } from "react";
+import { useCallback, useRef, useState as useState5 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
 function BiampTableTruncatedCell({
   children
 }) {
-  const textRef = useRef2(null);
+  const textRef = useRef(null);
   const [open, setOpen] = useState5(false);
   const handleMouseEnter = useCallback(() => {
     const el = textRef.current;
@@ -2077,21 +2078,6 @@ function BiampTableTruncatedCell({
   );
 }
 
-// src/slotProps.ts
-function resolveSlot(slot, ctx) {
-  if (!slot) return void 0;
-  return typeof slot === "function" ? slot(ctx) : slot;
-}
-function mergeSx(...inputs) {
-  return inputs.filter((v) => Boolean(v)).flatMap((v) => Array.isArray(v) ? v : [v]);
-}
-function mergeSlotProps(ownProps, userProps) {
-  return typeof userProps === "function" ? (ownerState) => ({
-    ...ownProps,
-    ...userProps(ownerState)
-  }) : { ...ownProps, ...userProps };
-}
-
 // src/BiampTable/cellSx.ts
 var stickyHoverBg = {
   ".MuiTableRow-hover:hover > &, .Mui-selected > &": {
@@ -2472,6 +2458,33 @@ var headerSelectionCellSx = {
   bgcolor: ({ palette }) => palette.mode === "dark" ? palette.grey[900] : palette.background.paper
 };
 var checkboxHiddenHeaderSx = { visibility: "hidden" };
+var footerBg = ({ palette }) => palette.mode === "dark" ? palette.grey[900] : palette.grey[100];
+var footerRowSx = { bgcolor: footerBg };
+var footerCellSx = {
+  height: 44,
+  color: "text.primary",
+  fontSize: 14,
+  fontWeight: 600,
+  lineHeight: 1.5,
+  borderTop: ({ palette }) => `0.6px solid ${palette.divider}`,
+  borderBottom: "none"
+};
+var footerPinnedCellSx = { bgcolor: footerBg };
+var stickyFooterSx = {
+  position: "sticky",
+  bottom: 0,
+  zIndex: 2,
+  filter: "drop-shadow(0px -1px 3.5px rgba(0, 0, 0, 0.05))"
+};
+var fillerRowSx = { height: "100%" };
+var fitHeightBodySx = {
+  "& > tr:nth-last-of-type(2) > td": { borderBottom: "none" }
+};
+var fillerCellSx = {
+  height: "auto",
+  p: 0,
+  border: "none"
+};
 function BiampTable({
   table,
   onRowClick,
@@ -2488,6 +2501,8 @@ function BiampTable({
   getRowLabel,
   setRowColor,
   slotProps,
+  stickyFooter = false,
+  fitHeight = false,
   sx,
   ...boxProps
 }) {
@@ -2503,7 +2518,7 @@ function BiampTable({
     enableRowSelection ? 48 : 0
   );
   const visibleColumnsKey = table.getVisibleLeafColumns().map((col) => col.id).join(",");
-  const containerRef = useRef3(null);
+  const containerRef = useRef2(null);
   useEffect2(() => {
     if (enableExpanding && alwaysExpanded) {
       table.toggleAllRowsExpanded(true);
@@ -2514,19 +2529,25 @@ function BiampTable({
   const hasExpandableRows = enableExpanding && rows.some((r) => r.getCanExpand());
   const showError = !!error && !loading;
   const showEmpty = !showError && !loading && rows.length === 0;
+  const footerGroup = table.getFooterGroups()[0];
+  const hasFooter = table.getVisibleLeafColumns().some((col) => col.columnDef.footer !== void 0);
+  const { sx: userFooterSx, ...restFooterSlotProps } = slotProps?.footer ?? {};
+  const { sx: userFooterRowSx, ...restFooterRowSlotProps } = slotProps?.footerRow ?? {};
   return /* @__PURE__ */ jsxs9(
     TableContainer,
     {
       component: Box10,
       ...boxProps,
       ref: containerRef,
-      sx: {
-        display: "flex",
-        flexDirection: "column",
-        height: "100%",
-        position: "relative",
-        ...sx
-      },
+      sx: mergeSx(
+        {
+          display: "flex",
+          flexDirection: "column",
+          height: "100%",
+          position: "relative"
+        },
+        sx
+      ),
       children: [
         /* @__PURE__ */ jsxs9(
           MuiTable,
@@ -2534,7 +2555,11 @@ function BiampTable({
             "aria-busy": showLoading || void 0,
             ...restTableSlotProps,
             sx: mergeSx(
-              { minWidth: tableMinWidth, tableLayout: "auto" },
+              {
+                minWidth: tableMinWidth,
+                tableLayout: "auto",
+                ...fitHeight && { height: "100%" }
+              },
               userTableSx
             ),
             children: [
@@ -2599,33 +2624,102 @@ function BiampTable({
                 },
                 headerGroup.id
               )) }),
-              /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsxs9(
                 TableBody,
                 {
                   ...restBodySlotProps,
-                  sx: mergeSx({ opacity: showLoading ? 0.3 : 1 }, userBodySx),
-                  children: !showError && rows.map((row) => /* @__PURE__ */ jsx15(
-                    BiampTableRow,
+                  sx: mergeSx(
+                    { opacity: showLoading ? 0.3 : 1 },
+                    fitHeight && !showError ? fitHeightBodySx : void 0,
+                    userBodySx
+                  ),
+                  children: [
+                    !showError && rows.map((row) => /* @__PURE__ */ jsx15(
+                      BiampTableRow,
+                      {
+                        row,
+                        visibleColumnsKey,
+                        isExpanded: row.getIsExpanded(),
+                        isSelected: row.getIsSelected(),
+                        onRowClick,
+                        isRowClickable,
+                        enableRowSelection,
+                        enableExpanding,
+                        alwaysExpanded,
+                        selectChildrenWithParent,
+                        showExpandGuidelines,
+                        getRowLabel,
+                        hasExpandableRows,
+                        customColor: setRowColor?.(row.original),
+                        rowSlotProps: slotProps?.row,
+                        cellSlotProps: slotProps?.cell
+                      },
+                      row.id
+                    )),
+                    fitHeight && !showError && /* @__PURE__ */ jsx15(TableRow2, { "aria-hidden": true, sx: fillerRowSx, children: /* @__PURE__ */ jsx15(
+                      TableCell2,
+                      {
+                        colSpan: table.getVisibleLeafColumns().length + (enableRowSelection ? 1 : 0),
+                        sx: fillerCellSx
+                      }
+                    ) })
+                  ]
+                }
+              ),
+              hasFooter && footerGroup && !showError && /* @__PURE__ */ jsx15(
+                TableFooter,
+                {
+                  ...restFooterSlotProps,
+                  sx: mergeSx(
+                    stickyFooter ? stickyFooterSx : void 0,
+                    userFooterSx
+                  ),
+                  children: /* @__PURE__ */ jsxs9(
+                    TableRow2,
                     {
-                      row,
-                      visibleColumnsKey,
-                      isExpanded: row.getIsExpanded(),
-                      isSelected: row.getIsSelected(),
-                      onRowClick,
-                      isRowClickable,
-                      enableRowSelection,
-                      enableExpanding,
-                      alwaysExpanded,
-                      selectChildrenWithParent,
-                      showExpandGuidelines,
-                      getRowLabel,
-                      hasExpandableRows,
-                      customColor: setRowColor?.(row.original),
-                      rowSlotProps: slotProps?.row,
-                      cellSlotProps: slotProps?.cell
-                    },
-                    row.id
-                  ))
+                      ...restFooterRowSlotProps,
+                      sx: mergeSx(footerRowSx, userFooterRowSx),
+                      children: [
+                        enableRowSelection && /* @__PURE__ */ jsx15(
+                          TableCell2,
+                          {
+                            padding: "checkbox",
+                            sx: mergeSx(footerCellSx, footerPinnedCellSx, {
+                              position: "sticky",
+                              left: 0,
+                              zIndex: 1
+                            })
+                          }
+                        ),
+                        footerGroup.headers.map((header) => {
+                          const sticky = header.column.columnDef.meta?.sticky;
+                          const resolvedFooterCell = resolveSlot(slotProps?.footerCell, {
+                            header
+                          });
+                          const { sx: userFooterCellSx, ...restFooterCellProps } = resolvedFooterCell ?? {};
+                          return /* @__PURE__ */ jsx15(
+                            TableCell2,
+                            {
+                              ...restFooterCellProps,
+                              "data-sticky": sticky || void 0,
+                              sx: mergeSx(
+                                cellSx(sticky, header.column.columnDef.meta?.minWidth, 3),
+                                footerCellSx,
+                                sticky ? footerPinnedCellSx : void 0,
+                                sticky ? { zIndex: 1 } : void 0,
+                                userFooterCellSx
+                              ),
+                              children: header.isPlaceholder ? null : flexRender2(
+                                header.column.columnDef.footer,
+                                header.getContext()
+                              )
+                            },
+                            header.id
+                          );
+                        })
+                      ]
+                    }
+                  )
                 }
               )
             ]
@@ -2658,14 +2752,18 @@ function BiampTableContainer({
     Stack7,
     {
       direction: "column",
-      width: "100%",
-      height: "100%",
-      overflow: "hidden",
-      pt: { xs: 0, md: 1.5 },
-      borderTop: withBorderTop ? ({ palette }) => `0.6px solid ${palette.divider}` : void 0,
-      borderBottom: withBorderBottom ? ({ palette }) => `0.6px solid ${palette.divider}` : void 0,
-      sx: { ...sx },
       ...props,
+      sx: mergeSx(
+        {
+          width: "100%",
+          height: "100%",
+          overflow: "hidden",
+          pt: { xs: 0, md: 1.5 },
+          borderTop: withBorderTop ? ({ palette }) => `0.6px solid ${palette.divider}` : void 0,
+          borderBottom: withBorderBottom ? ({ palette }) => `0.6px solid ${palette.divider}` : void 0
+        },
+        sx
+      ),
       children
     }
   );
@@ -2839,7 +2937,7 @@ function BiampTableToolbarColumnVisibility({
 }
 
 // src/BiampTable/BiampTablePagination.tsx
-import { useEffect as useEffect3, useRef as useRef4 } from "react";
+import { useEffect as useEffect3, useState as useState7 } from "react";
 import { TablePagination } from "@mui/material";
 import { jsx as jsx21 } from "react/jsx-runtime";
 var positionMap = {
@@ -2857,11 +2955,11 @@ function BiampTablePagination({
   ...paginationProps
 }) {
   const rowCount = table.getRowCount();
-  const lastRowCountRef = useRef4(rowCount);
-  if (!loading && rowCount >= 0) {
-    lastRowCountRef.current = rowCount;
+  const [lastRowCount, setLastRowCount] = useState7(rowCount);
+  if (!loading && rowCount >= 0 && rowCount !== lastRowCount) {
+    setLastRowCount(rowCount);
   }
-  const stableCount = loading ? lastRowCountRef.current : rowCount;
+  const stableCount = loading ? lastRowCount : rowCount;
   const { pageSize, pageIndex } = table.getState().pagination;
   const maxPage = Math.max(0, Math.ceil(stableCount / pageSize) - 1);
   useEffect3(() => {
@@ -2885,17 +2983,19 @@ function BiampTablePagination({
       rowsPerPageOptions: rowsPerPageOptions ?? [],
       showFirstButton: true,
       showLastButton: true,
-      sx: {
-        display: "flex",
-        justifyContent: positionMap[position],
-        height: 40,
-        minHeight: 40,
-        "& .MuiToolbar-root": {
+      sx: mergeSx(
+        {
+          display: "flex",
+          justifyContent: positionMap[position],
+          height: 40,
           minHeight: 40,
-          px: 0
+          "& .MuiToolbar-root": {
+            minHeight: 40,
+            px: 0
+          }
         },
-        ...sx
-      },
+        sx
+      ),
       ...paginationProps
     }
   );
@@ -2913,14 +3013,18 @@ function BiampTableToolbar({
     Box11,
     {
       role: "toolbar",
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      gap: { xs: 0, md: 1 },
-      width: "100%",
-      minHeight: 44,
-      sx: { ...sx },
       ...props,
+      sx: mergeSx(
+        {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          gap: { xs: 0, md: 1 },
+          width: "100%",
+          minHeight: 44
+        },
+        sx
+      ),
       children
     }
   );
@@ -2936,12 +3040,17 @@ function BiampTableToolbarActions({
   return /* @__PURE__ */ jsx23(
     Box12,
     {
-      display: "flex",
-      alignItems: "center",
-      ml: "auto",
-      gap: { xs: 0, md: 1 },
-      mr: { xs: 1, md: 0 },
       ...props,
+      sx: mergeSx(
+        {
+          display: "flex",
+          alignItems: "center",
+          ml: "auto",
+          gap: { xs: 0, md: 1 },
+          mr: { xs: 1, md: 0 }
+        },
+        props.sx
+      ),
       children
     }
   );
@@ -3002,7 +3111,8 @@ import {
   useTheme as useTheme2
 } from "@mui/material";
 import { CloseIcon as CloseIcon2, FilterIcon } from "@bwp-web/assets";
-import { useId, useState as useState7 } from "react";
+import { useId, useState as useState8 } from "react";
+import { mergeSlotProps as mergeSlotProps2 } from "@mui/material/utils";
 import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs11 } from "react/jsx-runtime";
 function BiampTableToolbarFilters({
   activeFilterCount,
@@ -3017,7 +3127,7 @@ function BiampTableToolbarFilters({
   buttonLabel = "Filters",
   DrawerProps: drawerProps
 }) {
-  const [open, setOpen] = useState7(false);
+  const [open, setOpen] = useState8(false);
   const titleId = useId();
   const theme = useTheme2();
   function handleClose() {
@@ -3042,27 +3152,33 @@ function BiampTableToolbarFilters({
         onClose: handleClose,
         "aria-labelledby": titleId,
         ...drawerProps,
-        PaperProps: {
-          sx: { width: { xs: "100%", sm: 480 } },
-          ...drawerProps?.PaperProps
+        slotProps: {
+          ...drawerProps?.slotProps,
+          paper: mergeSlotProps2(drawerProps?.slotProps?.paper, {
+            sx: { width: { xs: "100%", sm: 480 } }
+          })
         },
         children: /* @__PURE__ */ jsxs11(
           Box13,
           {
-            height: "100%",
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "space-between",
+            sx: {
+              height: "100%",
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "space-between"
+            },
             children: [
               /* @__PURE__ */ jsxs11(Box13, { children: [
                 /* @__PURE__ */ jsxs11(
                   Box13,
                   {
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "center",
-                    px: 3.5,
-                    py: 2.5,
+                    sx: {
+                      display: "flex",
+                      justifyContent: "space-between",
+                      alignItems: "center",
+                      px: 3.5,
+                      py: 2.5
+                    },
                     children: [
                       /* @__PURE__ */ jsxs11(Typography6, { id: titleId, variant: "h2", children: [
                         title,
@@ -3100,38 +3216,48 @@ function BiampTableToolbarFilters({
                   {
                     role: "group",
                     "aria-label": "Filter options",
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: 2,
-                    p: 3.5,
-                    overflow: "auto",
+                    sx: {
+                      display: "flex",
+                      flexDirection: "column",
+                      gap: 2,
+                      p: 3.5,
+                      overflow: "auto"
+                    },
                     children
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs11(Box13, { display: "flex", children: [
-                /* @__PURE__ */ jsx25(
-                  Button3,
-                  {
-                    variant: "overlay",
-                    color: "secondary",
-                    fullWidth: true,
-                    onClick: onReset,
-                    disabled: activeFilterCount === 0,
-                    children: resetLabel
-                  }
-                ),
-                /* @__PURE__ */ jsx25(
-                  Button3,
-                  {
-                    variant: "overlay",
-                    color: "primary",
-                    fullWidth: true,
-                    onClick: handleClose,
-                    children: applyLabel
-                  }
-                )
-              ] })
+              /* @__PURE__ */ jsxs11(
+                Box13,
+                {
+                  sx: {
+                    display: "flex"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx25(
+                      Button3,
+                      {
+                        variant: "overlay",
+                        color: "secondary",
+                        fullWidth: true,
+                        onClick: onReset,
+                        disabled: activeFilterCount === 0,
+                        children: resetLabel
+                      }
+                    ),
+                    /* @__PURE__ */ jsx25(
+                      Button3,
+                      {
+                        variant: "overlay",
+                        color: "primary",
+                        fullWidth: true,
+                        onClick: handleClose,
+                        children: applyLabel
+                      }
+                    )
+                  ]
+                }
+              )
             ]
           }
         )
@@ -3151,15 +3277,17 @@ import {
   useMediaQuery as useMediaQuery3
 } from "@mui/material";
 import { CloseIcon as CloseIcon3, SearchIcon as SearchIcon2 } from "@bwp-web/assets";
-import { useEffect as useEffect5, useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 
 // src/BiampTable/useDebouncedCallback.ts
-import { useCallback as useCallback2, useEffect as useEffect4, useRef as useRef5 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect4, useRef as useRef3 } from "react";
 var BIAMP_TABLE_DEBOUNCE_DELAY = 300;
 function useDebouncedCallback(callback, delay = BIAMP_TABLE_DEBOUNCE_DELAY) {
-  const timeoutRef = useRef5(null);
-  const callbackRef = useRef5(callback);
-  callbackRef.current = callback;
+  const timeoutRef = useRef3(null);
+  const callbackRef = useRef3(callback);
+  useEffect4(() => {
+    callbackRef.current = callback;
+  });
   useEffect4(() => {
     return () => {
       if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);
@@ -3203,12 +3331,14 @@ function BiampTableToolbarSearch({
   ...textFieldProps
 }) {
   const isMobile = useMediaQuery3((t) => t.breakpoints.down("md"));
-  const [inputValue, setInputValue] = useState8(defaultValue);
-  const [isExpanded, setIsExpanded] = useState8(false);
+  const [inputValue, setInputValue] = useState9(defaultValue);
+  const [isExpanded, setIsExpanded] = useState9(false);
   const debouncedOnChange = useDebouncedCallback(onChange, debounceDelay);
-  useEffect5(() => {
+  const [prevDefaultValue, setPrevDefaultValue] = useState9(defaultValue);
+  if (defaultValue !== prevDefaultValue) {
+    setPrevDefaultValue(defaultValue);
     setInputValue(defaultValue);
-  }, [defaultValue]);
+  }
   const handleChange = (e) => {
     setInputValue(e.target.value);
     debouncedOnChange(e.target.value);
@@ -3274,11 +3404,11 @@ function BiampTableToolbarSearch({
         }
       },
       fullWidth: true,
-      sx: [
+      sx: mergeSx(
         searchFieldSx,
         expandable ? { width: 170 } : { maxWidth },
-        ...Array.isArray(sx) ? sx : sx ? [sx] : []
-      ],
+        sx
+      ),
       variant: "outlined",
       value: inputValue,
       onChange: handleChange,
@@ -3288,57 +3418,79 @@ function BiampTableToolbarSearch({
     }
   );
   if (isMobile && enableMobileView) {
-    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",
-          type: "text",
-          placeholder,
-          inputProps: { maxLength, "aria-label": "Search" },
-          fullWidth: true,
-          value: inputValue,
-          sx: {
-            paddingLeft: 1,
-            height: "36px !important",
-            minHeight: "36px !important",
-            fontSize: (t) => t.typography.body2.fontSize
-          },
-          onChange: handleChange,
-          endAdornment: clearButton
-        }
-      )
-    ] });
+    return /* @__PURE__ */ jsxs12(
+      Box14,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          width: "100%",
+          pr: 1,
+          gap: 1
+        },
+        children: [
+          /* @__PURE__ */ jsx26(SearchIcon2, { sx: { width: 16, height: 16 } }),
+          /* @__PURE__ */ jsx26(
+            InputBase,
+            {
+              name: "search",
+              type: "text",
+              placeholder,
+              slotProps: { input: { maxLength, "aria-label": "Search" } },
+              fullWidth: true,
+              value: inputValue,
+              sx: {
+                paddingLeft: 1,
+                height: "36px !important",
+                minHeight: "36px !important",
+                fontSize: (t) => t.typography.body2.fontSize
+              },
+              onChange: handleChange,
+              endAdornment: clearButton
+            }
+          )
+        ]
+      }
+    );
   }
   if (expandable) {
-    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__ */ jsx26(
-            SearchIcon2,
+    return /* @__PURE__ */ jsxs12(
+      Box14,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          minWidth: 28
+        },
+        children: [
+          /* @__PURE__ */ jsx26(
+            IconButton6,
             {
-              variant: "xs",
-              color: "inherit",
-              sx: { width: 16, height: 16 }
+              "aria-label": expandLabel ?? placeholder,
+              onClick: () => setIsExpanded(true),
+              sx: { display: isExpanded || inputValue ? "none" : "flex" },
+              children: /* @__PURE__ */ jsx26(
+                SearchIcon2,
+                {
+                  variant: "xs",
+                  color: "inherit",
+                  sx: { width: 16, height: 16 }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx26(
+            Collapse,
+            {
+              in: isExpanded || !!inputValue,
+              orientation: "horizontal",
+              unmountOnExit: true,
+              children: textField
             }
           )
-        }
-      ),
-      /* @__PURE__ */ jsx26(
-        Collapse,
-        {
-          in: isExpanded || !!inputValue,
-          orientation: "horizontal",
-          unmountOnExit: true,
-          children: textField
-        }
-      )
-    ] });
+        ]
+      }
+    );
   }
   return textField;
 }
@@ -3590,15 +3742,15 @@ function BiampBanner({ show, children, severity }) {
   return /* @__PURE__ */ jsx27(Collapse2, { in: show, unmountOnExit: true, component: "aside", children: /* @__PURE__ */ jsx27(
     Box15,
     {
-      bgcolor: ({ palette }) => palette.background[severity],
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "space-between",
-      gap: 1,
-      px: { xs: 2, sm: 2.5 },
-      minHeight: 48,
       sx: {
+        bgcolor: ({ palette }) => palette.background[severity],
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 1,
+        px: { xs: 2, sm: 2.5 },
+        minHeight: 48,
         borderBottom: ({ palette }) => `0.6px solid ${palette[severity].main}`
       },
       children
@@ -3615,10 +3767,37 @@ function BiampBannerIcon({ severity, children }) {
   return /* @__PURE__ */ jsx27(Fragment6, { children: severity ? iconMapping[severity] : children });
 }
 function BiampBannerContent({ children, ...props }) {
-  return /* @__PURE__ */ jsx27(Typography7, { textAlign: "center", variant: "h3", ...props, children });
+  return /* @__PURE__ */ jsx27(
+    Typography7,
+    {
+      variant: "h3",
+      ...props,
+      sx: mergeSx(
+        {
+          textAlign: "center"
+        },
+        props.sx
+      ),
+      children
+    }
+  );
 }
 function BiampBannerActions({ children, ...props }) {
-  return /* @__PURE__ */ jsx27(Box15, { display: "flex", gap: 1, alignItems: "center", ...props, children });
+  return /* @__PURE__ */ jsx27(
+    Box15,
+    {
+      ...props,
+      sx: mergeSx(
+        {
+          display: "flex",
+          gap: 1,
+          alignItems: "center"
+        },
+        props.sx
+      ),
+      children
+    }
+  );
 }
 
 // src/BiampSegmentedButton/SegmentedButton.tsx
@@ -3640,20 +3819,22 @@ function SegmentedButton({
   return /* @__PURE__ */ jsx28(
     Button4,
     {
-      sx: {
-        backgroundColor,
-        color: textColor,
-        borderRadius: "4px",
-        border,
-        borderColor: "divider",
-        lineHeight: 1.5,
-        px: 1.5,
-        py: 0,
-        height: small ? "22px" : "26px",
-        ...small && { fontSize: "12px", letterSpacing: "-0.24px" },
-        boxShadow: active ? `0 1px 2px 0 ${alpha4(theme.palette.common.black, 0.05)} !important` : "none !important",
-        ...sx
-      },
+      sx: mergeSx(
+        {
+          backgroundColor,
+          color: textColor,
+          borderRadius: "4px",
+          border,
+          borderColor: "divider",
+          lineHeight: 1.5,
+          px: 1.5,
+          py: 0,
+          height: small ? "22px" : "26px",
+          ...small && { fontSize: "12px", letterSpacing: "-0.24px" },
+          boxShadow: active ? `0 1px 2px 0 ${alpha4(theme.palette.common.black, 0.05)} !important` : "none !important"
+        },
+        sx
+      ),
       ...props,
       children
     }
@@ -3670,14 +3851,16 @@ function SegmentedButtonGroup({ children, sx, ...props }) {
     Stack8,
     {
       direction: "row",
-      p: 0.5,
-      borderRadius: "6px",
-      gap: 1,
-      sx: {
-        backgroundColor: isDarkMode ? theme.palette.grey[900] : theme.palette.grey[100],
-        ...sx
-      },
       ...props,
+      sx: mergeSx(
+        {
+          p: 0.5,
+          borderRadius: "6px",
+          gap: 1,
+          backgroundColor: isDarkMode ? theme.palette.grey[900] : theme.palette.grey[100]
+        },
+        sx
+      ),
       children
     }
   );
@@ -3697,7 +3880,7 @@ import {
   Stack as Stack9,
   Typography as Typography8
 } from "@mui/material";
-import { Children as Children2, Fragment as Fragment7, isValidElement } from "react";
+import { Children, Fragment as Fragment7, isValidElement } from "react";
 import {
   ChevronDownIcon as ChevronDownIcon2,
   ChevronRightIcon as ChevronRightIcon2,
@@ -3713,17 +3896,19 @@ function OrganizationSelector({
   return /* @__PURE__ */ jsx30(
     Stack9,
     {
-      sx: {
-        width: "min(370px, calc(100vw - 24px))",
-        minHeight: 64,
-        maxHeight: "min(700px, 90vh)",
-        backgroundColor: ({ palette }) => palette.mode === "dark" ? palette.grey[700] : palette.grey[100],
-        borderRadius: 3,
-        p: 1.5,
-        boxShadow: ({ palette }) => `0 4px 24px 0 ${alpha5(palette.common.black, 0.15)}`,
-        overflow: "auto",
-        ...sx
-      },
+      sx: mergeSx(
+        {
+          width: "min(370px, calc(100vw - 24px))",
+          minHeight: 64,
+          maxHeight: "min(700px, 90vh)",
+          backgroundColor: ({ palette }) => palette.mode === "dark" ? palette.grey[700] : palette.grey[100],
+          borderRadius: 3,
+          p: 1.5,
+          boxShadow: ({ palette }) => `0 4px 24px 0 ${alpha5(palette.common.black, 0.15)}`,
+          overflow: "auto"
+        },
+        sx
+      ),
       ...props,
       children: loading ? /* @__PURE__ */ jsx30(CircularProgress, { size: 40, sx: { mx: "auto", my: "auto" } }) : children
     }
@@ -3735,22 +3920,24 @@ function OrganizationItemList({
   maxHeight,
   sx
 }) {
-  const items = Children2.toArray(children).filter(isValidElement);
+  const items = Children.toArray(children).filter(isValidElement);
   return /* @__PURE__ */ jsxs13(Fragment8, { children: [
     /* @__PURE__ */ jsx30(
       List2,
       {
         disablePadding: true,
-        sx: {
-          border: 0.6,
-          borderColor: ({ palette }) => palette.mode === "dark" ? alpha5(palette.common.white, 0.12) : alpha5(palette.grey[900], 0.15),
-          borderRadius: 2,
-          ...maxHeight !== void 0 && {
-            overflow: "auto",
-            maxHeight
+        sx: mergeSx(
+          {
+            border: 0.6,
+            borderColor: ({ palette }) => palette.mode === "dark" ? alpha5(palette.common.white, 0.12) : alpha5(palette.grey[900], 0.15),
+            borderRadius: 2,
+            ...maxHeight !== void 0 && {
+              overflow: "auto",
+              maxHeight
+            }
           },
-          ...sx
-        },
+          sx
+        ),
         children: items.map((item, i) => /* @__PURE__ */ jsxs13(Fragment7, { children: [
           item,
           i !== items.length - 1 && /* @__PURE__ */ jsx30(Divider4, {})
@@ -3766,9 +3953,11 @@ function renderText(value, defaults) {
       Typography8,
       {
         variant: defaults.variant,
-        fontWeight: defaults.fontWeight,
-        color: defaults.color,
         noWrap: true,
+        sx: {
+          fontWeight: defaults.fontWeight,
+          color: defaults.color
+        },
         children: value
       }
     );
@@ -3791,13 +3980,10 @@ function OrganizationItem({
     {
       disabled: disabled ?? isCurrent,
       disableRipple: true,
-      sx: {
-        p: 1,
-        pr: 1.5,
-        gap: 1.5,
-        "&.Mui-disabled": { opacity: 1 },
-        ...sx
-      },
+      sx: mergeSx(
+        { p: 1, pr: 1.5, gap: 1.5, "&.Mui-disabled": { opacity: 1 } },
+        sx
+      ),
       ...props,
       children: [
         /* @__PURE__ */ jsx30(
@@ -3827,20 +4013,40 @@ function OrganizationItem({
             ) : logo
           }
         ),
-        /* @__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,
-              color: "primary"
-            }),
-            meta && renderText(meta, { variant: "body2", color: "text.secondary" })
-          ] }),
-          secondaryText && renderText(secondaryText, {
-            variant: "caption",
-            color: "text.secondary"
-          })
-        ] }),
+        /* @__PURE__ */ jsxs13(
+          Stack9,
+          {
+            sx: {
+              gap: 0.25,
+              width: "100%",
+              minWidth: 0
+            },
+            children: [
+              /* @__PURE__ */ jsxs13(
+                Stack9,
+                {
+                  direction: "row",
+                  sx: {
+                    justifyContent: "space-between",
+                    gap: 1
+                  },
+                  children: [
+                    renderText(primaryText, {
+                      variant: "body2",
+                      fontWeight: 600,
+                      color: "primary.main"
+                    }),
+                    meta && renderText(meta, { variant: "body2", color: "text.secondary" })
+                  ]
+                }
+              ),
+              secondaryText && renderText(secondaryText, {
+                variant: "caption",
+                color: "text.secondary"
+              })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx30(
           ChevronRightIcon2,
           {
@@ -3869,15 +4075,17 @@ function OrganizationSelectorButton({
     ButtonBase,
     {
       disableRipple: true,
-      sx: {
-        display: "flex",
-        alignItems: "center",
-        gap: 1,
-        borderRadius: 1,
-        p: 0.75,
-        border: ({ palette }) => `0.6px solid ${palette.dividers.secondary}`,
-        ...sx
-      },
+      sx: mergeSx(
+        {
+          display: "flex",
+          alignItems: "center",
+          gap: 1,
+          borderRadius: 1,
+          p: 0.75,
+          border: ({ palette }) => `0.6px solid ${palette.dividers.secondary}`
+        },
+        sx
+      ),
       ...props,
       children: [
         icon,
@@ -3885,9 +4093,11 @@ function OrganizationSelectorButton({
           Typography8,
           {
             variant: "caption",
-            fontWeight: 600,
             noWrap: true,
-            sx: { flexShrink: 0 },
+            sx: {
+              fontWeight: 600,
+              flexShrink: 0
+            },
             children: name
           }
         ),
@@ -3945,6 +4155,7 @@ import {
   Typography as Typography9
 } from "@mui/material";
 import { useId as useId2 } from "react";
+import { mergeSlotProps as mergeSlotProps3 } from "@mui/material/utils";
 import { jsx as jsx31, jsxs as jsxs14 } from "react/jsx-runtime";
 function LandingFormPanel({
   children,
@@ -3964,20 +4175,20 @@ function LandingFormPanel({
       component: "form",
       onSubmit: handleSubmit,
       noValidate,
-      gap: 2,
-      p: 1.5,
-      borderRadius: 4,
-      width,
-      maxWidth: "100%",
+      ...stackProps,
       sx: mergeSx(
         {
+          gap: 2,
+          p: 1.5,
+          borderRadius: 4,
+          width,
+          maxWidth: "100%",
           // Figma's `background_default` (#F5F5F5) is `grey[100]` here, not
           // `palette.background.default` — that token is #FFFFFF in light mode.
           backgroundColor: ({ palette }) => palette.mode === "dark" ? palette.grey[700] : palette.grey[100]
         },
         sx
       ),
-      ...stackProps,
       children
     }
   );
@@ -4007,43 +4218,62 @@ function LandingFormField({
   const generatedId = useId2();
   const fieldId = id ?? generatedId;
   const labelId = labelSlotProps?.id ?? `${fieldId}-label`;
-  return /* @__PURE__ */ jsxs14(Stack10, { gap: 0.5, width: "100%", ...containerSlotProps, children: [
-    /* @__PURE__ */ jsx31(
-      Typography9,
-      {
-        component: "label",
-        id: labelId,
-        htmlFor: fieldId,
-        fontSize: 12,
-        fontWeight: 600,
-        color: "text.primary",
-        ...labelSlotProps,
-        children: label
-      }
-    ),
-    /* @__PURE__ */ jsx31(
-      TextField3,
-      {
-        id: fieldId,
-        fullWidth: true,
-        variant: "outlined",
-        slotProps: {
-          ...fieldSlotProps,
-          // `select` renders a `div[role="combobox"]`, which `<label for>`
-          // cannot name — and MUI points its `aria-labelledby` at the div
-          // itself, so the name would come out as the selected value. Naming
-          // the label explicitly is what MUI's own floating label does.
-          // Inert on a text field: `slotProps.select` only reaches a `Select`.
-          select: mergeSlotProps({ labelId }, fieldSlotProps.select)
-        },
-        sx: mergeSx(fieldSx, sx),
-        ...textFieldProps
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs14(
+    Stack10,
+    {
+      ...containerSlotProps,
+      sx: mergeSx({ gap: 0.5, width: "100%" }, containerSlotProps?.sx),
+      children: [
+        /* @__PURE__ */ jsx31(
+          Typography9,
+          {
+            component: "label",
+            id: labelId,
+            htmlFor: fieldId,
+            color: "textPrimary",
+            ...labelSlotProps,
+            sx: mergeSx({ fontSize: 12, fontWeight: 600 }, labelSlotProps?.sx),
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx31(
+          TextField3,
+          {
+            id: fieldId,
+            fullWidth: true,
+            variant: "outlined",
+            slotProps: {
+              ...fieldSlotProps,
+              // `select` renders a `div[role="combobox"]`, which `<label for>`
+              // cannot name — and MUI points its `aria-labelledby` at the div
+              // itself, so the name would come out as the selected value. Naming
+              // the label explicitly is what MUI's own floating label does.
+              // Inert on a text field: `slotProps.select` only reaches a `Select`.
+              select: mergeSlotProps3(fieldSlotProps.select, { labelId })
+            },
+            sx: mergeSx(fieldSx, sx),
+            ...textFieldProps
+          }
+        )
+      ]
+    }
+  );
 }
 function LandingFormActions(props) {
-  return /* @__PURE__ */ jsx31(Stack10, { direction: "row", gap: 1, width: "100%", ...props });
+  return /* @__PURE__ */ jsx31(
+    Stack10,
+    {
+      direction: "row",
+      ...props,
+      sx: mergeSx(
+        {
+          gap: 1,
+          width: "100%"
+        },
+        props.sx
+      )
+    }
+  );
 }
 function LandingFormCheckbox({
   label,
@@ -4065,10 +4295,9 @@ function LandingFormCheckbox({
       label,
       slotProps: {
         ...labelSlotProps,
-        typography: mergeSlotProps(
-          { variant: "body2" },
-          labelSlotProps.typography
-        )
+        typography: mergeSlotProps3(labelSlotProps.typography, {
+          variant: "body2"
+        })
       },
       ...formControlLabelProps,
       sx: mergeSx({ m: 0, gap: 1, alignItems: "center" }, sx)
@@ -4088,12 +4317,13 @@ import {
   Typography as Typography10
 } from "@mui/material";
 import {
-  Children as Children3,
+  Children as Children2,
   cloneElement as cloneElement2,
   Fragment as Fragment9,
   isValidElement as isValidElement2
 } from "react";
 import { ChevronRightIcon as ChevronRightIcon3, SearchIcon as SearchIcon3 } from "@bwp-web/assets";
+import { mergeSlotProps as mergeSlotProps4 } from "@mui/material/utils";
 import { Fragment as Fragment10, jsx as jsx32, jsxs as jsxs15 } from "react/jsx-runtime";
 function OrganizationRow({
   primaryText,
@@ -4156,12 +4386,24 @@ function OrganizationRow({
             {
               noWrap: true,
               variant: "body2",
-              fontWeight: 600,
-              color: disabled ? "text.secondary" : "text.primary",
+              sx: {
+                fontWeight: 600,
+                color: disabled ? "text.secondary" : "text.primary"
+              },
               children: primaryText
             }
           ),
-          secondaryText && /* @__PURE__ */ jsx32(Typography10, { noWrap: true, variant: "caption", color: "text.secondary", children: secondaryText })
+          secondaryText && /* @__PURE__ */ jsx32(
+            Typography10,
+            {
+              noWrap: true,
+              variant: "caption",
+              sx: {
+                color: "text.secondary"
+              },
+              children: secondaryText
+            }
+          )
         ] }),
         !disabled && /* @__PURE__ */ jsx32(
           ChevronRightIcon3,
@@ -4191,7 +4433,7 @@ function OrganizationRowGroup({
   sx,
   ...boxProps
 }) {
-  const items = Children3.toArray(children).filter(isValidElement2);
+  const items = Children2.toArray(children).filter(isValidElement2);
   return /* @__PURE__ */ jsx32(
     Box17,
     {
@@ -4242,34 +4484,53 @@ function OrganizationsEmptyState({
     Stack11,
     {
       role: "status",
-      alignItems: "center",
-      gap: 0.5,
-      width: "100%",
-      py: 2,
-      px: 2,
       ...stackProps,
+      sx: mergeSx(
+        {
+          alignItems: "center",
+          gap: 0.5,
+          width: "100%",
+          py: 2,
+          px: 2
+        },
+        stackProps.sx
+      ),
       children: [
         cloneElement2(icon, {
           "aria-hidden": true,
-          sx: {
-            width: 24,
-            height: 24,
-            mb: 0.5,
-            color: "text.secondary",
-            ...icon.props.sx
-          }
+          sx: mergeSx(
+            {
+              width: 24,
+              height: 24,
+              mb: 0.5,
+              color: "text.secondary"
+            },
+            icon.props.sx
+          )
         }),
         /* @__PURE__ */ jsx32(
           Typography10,
           {
             variant: "body2",
-            fontWeight: 600,
-            color: "text.primary",
-            textAlign: "center",
+            sx: {
+              fontWeight: 600,
+              color: "text.primary",
+              textAlign: "center"
+            },
             children: title
           }
         ),
-        description && /* @__PURE__ */ jsx32(Typography10, { variant: "caption", color: "text.secondary", textAlign: "center", children: description })
+        description && /* @__PURE__ */ jsx32(
+          Typography10,
+          {
+            variant: "caption",
+            sx: {
+              color: "text.secondary",
+              textAlign: "center"
+            },
+            children: description
+          }
+        )
       ]
     }
   );
@@ -4298,22 +4559,22 @@ function OrganizationsPanel({
   return /* @__PURE__ */ jsxs15(
     Stack11,
     {
-      gap: 2,
-      alignItems: "center",
-      justifyContent: "center",
-      p: 1.5,
-      borderRadius: 4,
-      width,
-      maxWidth: "100%",
+      ...stackProps,
       sx: mergeSx(
         {
+          gap: 2,
+          alignItems: "center",
+          justifyContent: "center",
+          p: 1.5,
+          borderRadius: 4,
+          width,
+          maxWidth: "100%",
           // Figma's `background_default` (#F5F5F5) is `grey[100]` here, not
           // `palette.background.default` — that token is #FFFFFF in light mode.
           backgroundColor: ({ palette }) => palette.mode === "dark" ? palette.grey[700] : palette.grey[100]
         },
         sx
       ),
-      ...stackProps,
       children: [
         search && /* @__PURE__ */ jsx32(
           TextField4,
@@ -4336,16 +4597,12 @@ function OrganizationsPanel({
             ),
             slotProps: {
               ...searchFieldSlotProps,
-              input: mergeSlotProps(
-                {
-                  startAdornment: /* @__PURE__ */ jsx32(InputAdornment3, { position: "start", children: /* @__PURE__ */ jsx32(SearchIcon3, { sx: { ml: 1 } }) })
-                },
-                searchFieldSlotProps?.input
-              ),
-              htmlInput: mergeSlotProps(
-                { "aria-label": search.placeholder },
-                searchFieldSlotProps?.htmlInput
-              )
+              input: mergeSlotProps4(searchFieldSlotProps?.input, {
+                startAdornment: /* @__PURE__ */ jsx32(InputAdornment3, { position: "start", children: /* @__PURE__ */ jsx32(SearchIcon3, { sx: { ml: 1 } }) })
+              }),
+              htmlInput: mergeSlotProps4(searchFieldSlotProps?.htmlInput, {
+                "aria-label": search.placeholder
+              })
             },
             ...searchSlotProps
           }
@@ -4363,10 +4620,17 @@ function OrganizationsPanel({
           )
         ] }),
         empty ? empty === true ? /* @__PURE__ */ jsx32(OrganizationsEmptyState, {}) : empty : orLabel && /* @__PURE__ */ jsx32(TextDivider, { ...slotProps?.orLabel, children: orLabel }),
-        (joinAction || createAction) && /* @__PURE__ */ jsxs15(Stack11, { gap: 1, width: "100%", ...slotProps?.actions, children: [
-          joinAction && /* @__PURE__ */ jsx32(OrganizationRowGroup, { ...slotProps?.joinGroup, children: joinAction }),
-          createAction && /* @__PURE__ */ jsx32(OrganizationRowGroup, { ...slotProps?.createGroup, children: createAction })
-        ] })
+        (joinAction || createAction) && /* @__PURE__ */ jsxs15(
+          Stack11,
+          {
+            ...slotProps?.actions,
+            sx: mergeSx({ gap: 1, width: "100%" }, slotProps?.actions?.sx),
+            children: [
+              joinAction && /* @__PURE__ */ jsx32(OrganizationRowGroup, { ...slotProps?.joinGroup, children: joinAction }),
+              createAction && /* @__PURE__ */ jsx32(OrganizationRowGroup, { ...slotProps?.createGroup, children: createAction })
+            ]
+          }
+        )
       ]
     }
   );
@@ -4397,23 +4661,27 @@ function UserInitialsIcon({
   return /* @__PURE__ */ jsx33(
     Box18,
     {
-      minWidth: width,
-      width,
-      minHeight: height,
-      height,
-      borderRadius,
-      bgcolor: bgColor,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      sx: { ...sx },
       ...props,
+      sx: mergeSx(
+        {
+          minWidth: width,
+          width,
+          minHeight: height,
+          height,
+          borderRadius,
+          bgcolor: bgColor,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        sx
+      ),
       children: /* @__PURE__ */ jsx33(
         Typography11,
         {
           variant: "h3",
-          color: textColor,
           sx: {
+            color: textColor,
             userSelect: "none",
             fontSize: size !== DEFAULT_SIZE ? `${fontSize}px` : void 0
           },
@@ -4432,9 +4700,19 @@ var getInitials = (name) => {
 
 // src/DynamicSvgIcon/DynamicSvgIcon.tsx
 import { SvgIcon, Skeleton, Box as Box19 } from "@mui/material";
-import { useEffect as useEffect6, useState as useState9 } from "react";
+import { useEffect as useEffect5, useState as useState10 } from "react";
 import { jsx as jsx34 } from "react/jsx-runtime";
 var svgCache = /* @__PURE__ */ new Map();
+function iconStateFor(url, transform) {
+  const cached = url ? svgCache.get(url) : void 0;
+  return {
+    url,
+    svgContent: cached ? transform(cached.innerContent) : null,
+    svgViewBox: cached?.viewBox ?? null,
+    loading: !!url && !cached,
+    error: url ? null : "No URL provided"
+  };
+}
 function clearDynamicSvgIconCache() {
   svgCache.clear();
 }
@@ -4444,67 +4722,57 @@ function applyCurrentColor(svg) {
 function useDynamicSvgIcon(url, options = {}) {
   const { replaceColors = false, onLoad, onError } = options;
   const transform = replaceColors ? applyCurrentColor : (s) => s;
-  const [svgContent, setSvgContent] = useState9(() => {
-    const cached = svgCache.get(url);
-    return cached ? transform(cached.innerContent) : null;
-  });
-  const [svgViewBox, setSvgViewBox] = useState9(() => {
-    const cached = svgCache.get(url);
-    return cached?.viewBox ?? null;
-  });
-  const [loading, setLoading] = useState9(() => !svgCache.has(url));
-  const [error, setError] = useState9(null);
-  useEffect6(() => {
-    if (!url) {
-      setLoading(false);
-      setError("No URL provided");
-      setSvgContent(null);
-      setSvgViewBox(null);
-      return;
-    }
-    let cancelled = false;
-    const cached = svgCache.get(url);
-    if (cached) {
-      setSvgContent(transform(cached.innerContent));
-      setSvgViewBox(cached.viewBox);
-      setLoading(false);
-      setError(null);
+  const [state, setState] = useState10(() => iconStateFor(url, transform));
+  if (state.url !== url) {
+    setState(iconStateFor(url, transform));
+  }
+  useEffect5(() => {
+    if (!url) return;
+    if (!state.loading) {
       onLoad?.();
       return;
     }
-    setLoading(true);
-    setError(null);
-    setSvgContent(null);
-    setSvgViewBox(null);
+    let cancelled = false;
     (async () => {
       try {
-        const response = await fetch(url);
-        if (!response.ok) {
-          throw new Error(
-            `Failed to fetch SVG: ${response.status} ${response.statusText}`
-          );
-        }
-        const contentType = response.headers.get("content-type") ?? "";
-        const text = await response.text();
-        if (!text.includes("<svg") && !contentType.includes("svg")) {
-          throw new Error("Response is not an SVG");
+        let entry = svgCache.get(url);
+        if (!entry) {
+          const response = await fetch(url);
+          if (!response.ok) {
+            throw new Error(
+              `Failed to fetch SVG: ${response.status} ${response.statusText}`
+            );
+          }
+          const contentType = response.headers.get("content-type") ?? "";
+          const text = await response.text();
+          if (!text.includes("<svg") && !contentType.includes("svg")) {
+            throw new Error("Response is not an SVG");
+          }
+          const viewBoxMatch = text.match(/viewBox="([^"]*)"/);
+          const viewBox = viewBoxMatch ? viewBoxMatch[1] : null;
+          const svgMatch = text.match(/<svg[^>]*>([\s\S]*?)<\/svg>/);
+          const innerContent = svgMatch ? svgMatch[1] : text;
+          entry = { innerContent, viewBox };
+          svgCache.set(url, entry);
         }
-        const viewBoxMatch = text.match(/viewBox="([^"]*)"/);
-        const viewBox = viewBoxMatch ? viewBoxMatch[1] : null;
-        const svgMatch = text.match(/<svg[^>]*>([\s\S]*?)<\/svg>/);
-        const innerContent = svgMatch ? svgMatch[1] : text;
-        svgCache.set(url, { innerContent, viewBox });
         if (!cancelled) {
-          setSvgContent(transform(innerContent));
-          setSvgViewBox(viewBox);
-          setLoading(false);
+          const { innerContent, viewBox } = entry;
+          setState(
+            (prev) => prev.url === url ? {
+              ...prev,
+              svgContent: transform(innerContent),
+              svgViewBox: viewBox,
+              loading: false
+            } : prev
+          );
           onLoad?.();
         }
       } catch (err) {
         if (!cancelled) {
           const message = err instanceof Error ? err.message : "Failed to load SVG";
-          setError(message);
-          setLoading(false);
+          setState(
+            (prev) => prev.url === url ? { ...prev, error: message, loading: false } : prev
+          );
           onError?.(message);
         }
       }
@@ -4513,6 +4781,7 @@ function useDynamicSvgIcon(url, options = {}) {
       cancelled = true;
     };
   }, [url]);
+  const { loading, error, svgContent, svgViewBox } = state;
   return { loading, error, svgContent, svgViewBox };
 }
 var DEFAULT_SIZE2 = 24;
@@ -4570,11 +4839,7 @@ function DynamicSvgIcon({
     {
       ...svgIconProps,
       ...svgViewBox && { viewBox: svgViewBox },
-      sx: {
-        ...typeof sx === "object" && sx !== null && !Array.isArray(sx) ? sx : void 0,
-        width,
-        height
-      },
+      sx: mergeSx(sx, { width, height }),
       children: /* @__PURE__ */ jsx34("g", { dangerouslySetInnerHTML: { __html: svgContent } })
     }
   );
@@ -4588,11 +4853,7 @@ export {
   BiampBannerActions,
   BiampBannerContent,
   BiampBannerIcon,
-  BiampBuildAppContent,
-  BiampBuildAppContentItem,
   BiampCheckboxListPopover,
-  BiampEndUserAppContent,
-  BiampEndUserAppContentItem,
   BiampGlobalSearch,
   BiampHeader,
   BiampHeaderActions,