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

package/dist/index.cjs

@@ -408,11 +408,7 @@ __export(index_exports, {
   BiampBannerActions: () => BiampBannerActions,
   BiampBannerContent: () => BiampBannerContent,
   BiampBannerIcon: () => BiampBannerIcon,
-  BiampBuildAppContent: () => BiampBuildAppContent,
-  BiampBuildAppContentItem: () => BiampBuildAppContentItem,
   BiampCheckboxListPopover: () => BiampCheckboxListPopover,
-  BiampEndUserAppContent: () => BiampEndUserAppContent,
-  BiampEndUserAppContentItem: () => BiampEndUserAppContentItem,
   BiampGlobalSearch: () => BiampGlobalSearch,
   BiampHeader: () => BiampHeader,
   BiampHeaderActions: () => BiampHeaderActions,
@@ -496,33 +492,31 @@ var import_material = require("@mui/material");
 var import_react = require("react");
 function useLoadingDelay(loading, { delay = 150, minDuration = 500 } = {}) {
   const [status, setStatus] = (0, import_react.useState)("idle");
-  const timeoutRef = (0, import_react.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");
   }
   (0, import_react.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]);
-  (0, import_react.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
 var import_jsx_runtime = require("react/jsx-runtime");
 function BiampWrapper({
@@ -537,19 +531,21 @@ function BiampWrapper({
     import_material.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__ */ (0, import_jsx_runtime.jsx)(
           import_material.Box,
@@ -624,24 +620,28 @@ function BiampLayout({
     import_material2.Stack,
     {
       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__ */ (0, import_jsx_runtime2.jsxs)(
           import_material2.Stack,
           {
             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
@@ -669,9 +669,13 @@ function BiampLayout({
                 import_material2.Stack,
                 {
                   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__ */ (0, import_jsx_runtime2.jsx)(
                       import_material2.IconButton,
@@ -733,16 +737,18 @@ function BiampSidebar({
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BiampSidebarContext.Provider, { value: { expanded }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     import_material3.Stack,
     {
-      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__ */ (0, import_jsx_runtime3.jsx)(import_material3.Stack, { sx: { flex: 1, minHeight: 0 }, children }),
@@ -768,9 +774,12 @@ function BiampSidebar({
           import_material3.Stack,
           {
             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__ */ (0, import_jsx_runtime3.jsx)(
                 import_assets2.BiampLogoIcon,
@@ -782,10 +791,10 @@ function BiampSidebar({
                 import_material3.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
@@ -809,14 +818,16 @@ function BiampSidebarIconList({
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     import_material3.Stack,
     {
-      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
     }
@@ -847,21 +858,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__ */ (0, import_jsx_runtime3.jsx)(
@@ -891,10 +904,10 @@ function BiampSidebarIcon({
           import_material3.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", {
@@ -916,18 +929,20 @@ function BiampSidebarComponent({
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     import_material3.Box,
     {
-      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
     }
@@ -936,12 +951,12 @@ function BiampSidebarComponent({
 
 // src/BiampHeader/BiampHeader.tsx
 var import_material5 = require("@mui/material");
-var import_react5 = require("react");
 var import_assets4 = require("@bwp-web/assets");
 
 // src/BiampGlobalSearch/BiampGlobalSearch.tsx
 var import_react4 = require("react");
 var import_material4 = require("@mui/material");
+var import_utils = require("@mui/material/utils");
 var import_assets3 = require("@bwp-web/assets");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var SearchContext = (0, import_react4.createContext)({
@@ -987,8 +1002,11 @@ var BiampGlobalSearchPaper = (0, import_react4.forwardRef)(
         import_material4.Typography,
         {
           variant: "body2",
-          color: "text.secondary",
-          sx: { px: 2, py: 1.5 },
+          sx: {
+            color: "text.secondary",
+            px: 2,
+            py: 1.5
+          },
           children: noResultsText
         }
       ),
@@ -1012,8 +1030,10 @@ var BiampGlobalSearchPaper = (0, import_react4.forwardRef)(
                 import_material4.Typography,
                 {
                   variant: "caption",
-                  fontWeight: (theme) => theme.typography.fontWeightMedium,
-                  color: "text.secondary",
+                  sx: {
+                    fontWeight: (theme) => theme.typography.fontWeightMedium,
+                    color: "text.secondary"
+                  },
                   children: "Select"
                 }
               )
@@ -1024,8 +1044,10 @@ var BiampGlobalSearchPaper = (0, import_react4.forwardRef)(
                 import_material4.Typography,
                 {
                   variant: "caption",
-                  fontWeight: (theme) => theme.typography.fontWeightMedium,
-                  color: "text.secondary",
+                  sx: {
+                    fontWeight: (theme) => theme.typography.fontWeightMedium,
+                    color: "text.secondary"
+                  },
                   children: "Open"
                 }
               )
@@ -1111,9 +1133,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
           }
         ),
@@ -1206,6 +1232,7 @@ function BiampGlobalSearch({
   onChange,
   onInputChange,
   sx,
+  slotProps,
   ...props
 }) {
   const hasOptions = options.length > 0;
@@ -1246,25 +1273,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__ */ (0, import_jsx_runtime4.jsx)(import_material4.Typography, { variant: "body2", color: "text.secondary", children: "Loading\u2026" }),
+          loadingText: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            import_material4.Typography,
+            {
+              variant: "body2",
+              sx: {
+                color: "text.secondary"
+              },
+              children: "Loading\u2026"
+            }
+          ),
           freeSolo: true,
           filterOptions: (x) => x,
           getOptionLabel: (option) => typeof option === "string" ? option : option.title,
@@ -1272,7 +1310,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: (0, import_utils.mergeSlotProps)(slotProps?.popper, {
+              keepMounted: !hasOptions
+            }),
+            listbox: (0, import_utils.mergeSlotProps)(slotProps?.listbox, {
               sx: {
                 "& .MuiAutocomplete-option": {
                   paddingRight: "0px !important"
@@ -1287,7 +1332,7 @@ function BiampGlobalSearch({
                   visibility: "visible"
                 }
               }
-            }
+            })
           },
           renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             import_material4.TextField,
@@ -1300,11 +1345,12 @@ function BiampGlobalSearch({
                 "& .MuiInputBase-input": { paddingLeft: "8px !important" }
               },
               slotProps: {
+                ...params.slotProps,
                 input: {
-                  ...params.InputProps,
+                  ...params.slotProps.input,
                   startAdornment: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
                     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material4.InputAdornment, { position: "start", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_assets3.SearchIcon, {}) }),
-                    params.InputProps.startAdornment
+                    params.slotProps.input.startAdornment
                   ] })
                 }
               }
@@ -1332,10 +1378,16 @@ function BiampHeader({ children, sx, ...props }) {
     import_material5.Stack,
     {
       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
     }
   );
@@ -1350,12 +1402,7 @@ function BiampHeaderTitle({
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     import_material5.Box,
     {
-      sx: {
-        display: "flex",
-        alignItems: "center",
-        gap: "12px",
-        ...sx
-      },
+      sx: mergeSx({ display: "flex", alignItems: "center", gap: "12px" }, sx),
       ...props,
       children: [
         icon ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -1379,10 +1426,28 @@ function BiampHeaderTitle({
             sx: { width: 24, height: 24 }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material5.Stack, { direction: "row", gap: 0.5, children: [
-          title && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.Typography, { variant: "h4", children: title }),
-          subtitle && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.Typography, { variant: "h4", color: "text.secondary", children: subtitle })
-        ] })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          import_material5.Stack,
+          {
+            direction: "row",
+            sx: {
+              gap: 0.5
+            },
+            children: [
+              title && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.Typography, { variant: "h4", children: title }),
+              subtitle && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                import_material5.Typography,
+                {
+                  variant: "h4",
+                  sx: {
+                    color: "text.secondary"
+                  },
+                  children: subtitle
+                }
+              )
+            ]
+          }
+        )
       ]
     }
   );
@@ -1401,13 +1466,15 @@ function BiampHeaderActions({
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_material5.Box,
     {
-      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
     }
@@ -1421,12 +1488,10 @@ function BiampHeaderButtonList({
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_material5.Box,
     {
-      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
     }
@@ -1475,16 +1540,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
     }
@@ -1503,7 +1570,7 @@ function BiampAppPopover({
       open,
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
       transformOrigin: { vertical: -4, horizontal: APP_POPOVER_MAX_WIDTH },
-      sx: { ...sx },
+      sx,
       slotProps: {
         paper: {
           sx: {
@@ -1527,120 +1594,6 @@ function BiampAppPopover({
     }
   );
 }
-function BiampBuildAppContent({
-  children,
-  sx,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    import_material5.Box,
-    {
-      sx: {
-        display: "grid",
-        gridTemplateColumns: "1fr 1fr",
-        gap: 1.5,
-        ...sx
-      },
-      ...props,
-      children
-    }
-  );
-}
-function BiampBuildAppContentItem({
-  image,
-  name,
-  description,
-  button,
-  sx,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-    import_material5.Stack,
-    {
-      direction: "column",
-      position: "relative",
-      sx: {
-        p: 1.5,
-        borderRadius: 1.5,
-        outlineWidth: "1px",
-        outlineStyle: "solid",
-        outlineColor: ({ palette }) => palette.dividers,
-        ...sx
-      },
-      ...props,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.Box, { sx: { width: 54, height: 54 }, mb: 0.5, children: image }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.Typography, { variant: "caption", fontWeight: 600, mb: 0.5, children: name }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.Typography, { variant: "caption", color: "text.secondary", children: description }),
-        button && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.Box, { position: "absolute", top: "12px", right: "12px", children: button })
-      ]
-    }
-  );
-}
-function BiampEndUserAppContent({
-  children,
-  sx,
-  ...props
-}) {
-  const isGrid = import_react5.Children.count(children) > 1;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    import_material5.Stack,
-    {
-      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__ */ (0, import_jsx_runtime5.jsxs)(
-    import_material5.Stack,
-    {
-      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__ */ (0, import_jsx_runtime5.jsx)(import_material5.Box, { sx: { width: 32, height: 32 }, children: image }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material5.Stack, { direction: "column", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.Typography, { variant: "caption", fontWeight: 600, children: name }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.Typography, { variant: "caption", color: "text.secondary", children: description })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_assets4.ExternalLinkIcon, { sx: { width: 16, height: 16, ml: "auto" } })
-      ]
-    }
-  );
-}
 function BiampAppListContent({
   children,
   sx,
@@ -1656,12 +1609,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
     }
@@ -1680,12 +1635,29 @@ function BiampAppListItem({
     import_material5.Stack,
     {
       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__ */ (0, import_jsx_runtime5.jsx)(import_material5.Box, { sx: { width: 40, height: 40, flexShrink: 0 }, children: image }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.Typography, { variant: "body2", fontWeight: 600, sx: { flex: 1 }, children: name }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_material5.Typography,
+          {
+            variant: "body2",
+            sx: {
+              fontWeight: 600,
+              flex: 1
+            },
+            children: name
+          }
+        ),
         hasActions && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
           import_material5.Stack,
           {
@@ -1765,16 +1737,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__ */ (0, import_jsx_runtime5.jsx)(
         import_material5.Box,
@@ -1813,7 +1787,7 @@ function BiampNotificationPopover({
         vertical: -4,
         horizontal: NOTIFICATION_POPOVER_MAX_WIDTH
       },
-      sx: { ...sx },
+      sx,
       slotProps: {
         paper: {
           sx: {
@@ -1845,16 +1819,18 @@ function BiampNotificationPopoverHeader({
     import_material6.Stack,
     {
       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
+      )
     }
   );
 }
@@ -1865,15 +1841,17 @@ function BiampNotificationPopoverBody({
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     import_material6.Box,
     {
-      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
     }
   );
@@ -1922,14 +1900,7 @@ function BiampListPopoverItem({
   sx,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    import_material7.ListItem,
-    {
-      dense: true,
-      sx: [listItemSx, ...Array.isArray(sx) ? sx : [sx]],
-      ...props
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.ListItem, { dense: true, sx: mergeSx(listItemSx, sx), ...props });
 }
 function BiampListPopoverScrollArea({
   maxHeight = 340,
@@ -1939,7 +1910,10 @@ function BiampListPopoverScrollArea({
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     import_material7.Box,
     {
-      sx: { maxHeight, overflow: "auto", overscrollBehavior: "none", ...sx },
+      sx: mergeSx(
+        { maxHeight, overflow: "auto", overscrollBehavior: "none" },
+        sx
+      ),
       ...props
     }
   );
@@ -1972,7 +1946,16 @@ function BiampCheckboxListPopover({
             slotProps: { input: { "aria-label": selectAllLabel } }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material8.Typography, { variant: "caption", fontWeight: 600, children: selectAllLabel })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          import_material8.Typography,
+          {
+            variant: "caption",
+            sx: {
+              fontWeight: 600
+            },
+            children: selectAllLabel
+          }
+        )
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material8.Divider, {})
     ] }),
@@ -2005,14 +1988,14 @@ function BiampCheckboxListPopover({
 var import_material13 = require("@mui/material");
 var import_assets8 = require("@bwp-web/assets");
 var import_react_table2 = require("@tanstack/react-table");
-var import_react9 = require("react");
+var import_react8 = require("react");
 
 // src/BiampTable/BiampTableEmptyState.tsx
 var import_assets5 = require("@bwp-web/assets");
 
 // src/BiampTable/BiampTableStatusMessage.tsx
 var import_material9 = require("@mui/material");
-var import_react6 = require("react");
+var import_react5 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function BiampTableStatusMessage({
   icon,
@@ -2021,15 +2004,28 @@ function BiampTableStatusMessage({
   children,
   ...stackProps
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_material9.Stack, { alignItems: "center", gap: 1.5, ...stackProps, children: [
-    (0, import_react6.cloneElement)(icon, {
-      "aria-hidden": true,
-      sx: { width: 56, height: 56, ...icon.props.sx }
-    }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material9.Typography, { variant: "h2", children: title }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material9.Typography, { variant: "body1", children: description }),
-    children
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    import_material9.Stack,
+    {
+      ...stackProps,
+      sx: mergeSx(
+        {
+          alignItems: "center",
+          gap: 1.5
+        },
+        stackProps.sx
+      ),
+      children: [
+        (0, import_react5.cloneElement)(icon, {
+          "aria-hidden": true,
+          sx: mergeSx({ width: 56, height: 56 }, icon.props.sx)
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material9.Typography, { variant: "h2", children: title }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material9.Typography, { variant: "body1", children: description }),
+        children
+      ]
+    }
+  );
 }
 
 // src/BiampTable/BiampTableEmptyState.tsx
@@ -2065,24 +2061,24 @@ function BiampTableErrorState({
 var import_material12 = require("@mui/material");
 var import_assets7 = require("@bwp-web/assets");
 var import_react_table = require("@tanstack/react-table");
-var import_react8 = __toESM(require("react"), 1);
+var import_react7 = __toESM(require("react"), 1);
 
 // src/BiampTable/BiampTableTruncatedCell.tsx
 var import_material10 = require("@mui/material");
-var import_react7 = require("react");
+var import_react6 = require("react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function BiampTableTruncatedCell({
   children
 }) {
-  const textRef = (0, import_react7.useRef)(null);
-  const [open, setOpen] = (0, import_react7.useState)(false);
-  const handleMouseEnter = (0, import_react7.useCallback)(() => {
+  const textRef = (0, import_react6.useRef)(null);
+  const [open, setOpen] = (0, import_react6.useState)(false);
+  const handleMouseEnter = (0, import_react6.useCallback)(() => {
     const el = textRef.current;
     if (el && el.scrollWidth > el.clientWidth) {
       setOpen(true);
     }
   }, []);
-  const handleMouseLeave = (0, import_react7.useCallback)(() => {
+  const handleMouseLeave = (0, import_react6.useCallback)(() => {
     setOpen(false);
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -2113,21 +2109,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 > &": {
@@ -2483,7 +2464,7 @@ function BiampTableRowInner({
 function biampTableRowPropsAreEqual(prev, next) {
   return prev.row.id === next.row.id && prev.row.original === next.row.original && prev.isSelected === next.isSelected && prev.isExpanded === next.isExpanded && prev.visibleColumnsKey === next.visibleColumnsKey && prev.enableRowSelection === next.enableRowSelection && prev.enableExpanding === next.enableExpanding && prev.alwaysExpanded === next.alwaysExpanded && prev.hasExpandableRows === next.hasExpandableRows && prev.selectChildrenWithParent === next.selectChildrenWithParent && prev.showExpandGuidelines === next.showExpandGuidelines && prev.onRowClick === next.onRowClick && prev.isRowClickable === next.isRowClickable && prev.getRowLabel === next.getRowLabel && prev.customColor === next.customColor && prev.rowSlotProps === next.rowSlotProps && prev.cellSlotProps === next.cellSlotProps;
 }
-var BiampTableRow = import_react8.default.memo(
+var BiampTableRow = import_react7.default.memo(
   BiampTableRowInner,
   biampTableRowPropsAreEqual
 );
@@ -2539,8 +2520,8 @@ function BiampTable({
     enableRowSelection ? 48 : 0
   );
   const visibleColumnsKey = table.getVisibleLeafColumns().map((col) => col.id).join(",");
-  const containerRef = (0, import_react9.useRef)(null);
-  (0, import_react9.useEffect)(() => {
+  const containerRef = (0, import_react8.useRef)(null);
+  (0, import_react8.useEffect)(() => {
     if (enableExpanding && alwaysExpanded) {
       table.toggleAllRowsExpanded(true);
     }
@@ -2556,13 +2537,15 @@ function BiampTable({
       component: import_material13.Box,
       ...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__ */ (0, import_jsx_runtime15.jsxs)(
           import_material13.Table,
@@ -2694,14 +2677,18 @@ function BiampTableContainer({
     import_material14.Stack,
     {
       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
     }
   );
@@ -2795,7 +2782,7 @@ function BiampTableColumnVisibility({
 
 // src/BiampTable/BiampTableToolbarColumnVisibility.tsx
 var import_assets9 = require("@bwp-web/assets");
-var import_react10 = require("react");
+var import_react9 = require("react");
 
 // src/BiampTable/BiampTableToolbarActionButton.tsx
 var import_material16 = require("@mui/material");
@@ -2845,7 +2832,7 @@ function BiampTableToolbarColumnVisibility({
   showAllLabel,
   ...actionButtonProps
 }) {
-  const [anchorEl, setAnchorEl] = (0, import_react10.useState)(null);
+  const [anchorEl, setAnchorEl] = (0, import_react9.useState)(null);
   const defaults = defaultColumnVisibility ?? getDefaultColumnVisibility(table);
   const dirtyCount = getColumnVisibilityDirtyCount(table, defaults);
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
@@ -2872,7 +2859,7 @@ function BiampTableToolbarColumnVisibility({
 }
 
 // src/BiampTable/BiampTablePagination.tsx
-var import_react11 = require("react");
+var import_react10 = require("react");
 var import_material17 = require("@mui/material");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var positionMap = {
@@ -2890,14 +2877,14 @@ function BiampTablePagination({
   ...paginationProps
 }) {
   const rowCount = table.getRowCount();
-  const lastRowCountRef = (0, import_react11.useRef)(rowCount);
-  if (!loading && rowCount >= 0) {
-    lastRowCountRef.current = rowCount;
+  const [lastRowCount, setLastRowCount] = (0, import_react10.useState)(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);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!loading && pageIndex > maxPage) {
       table.setPageIndex(maxPage);
     }
@@ -2918,17 +2905,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
     }
   );
@@ -2946,14 +2935,18 @@ function BiampTableToolbar({
     import_material18.Box,
     {
       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
     }
   );
@@ -2969,12 +2962,17 @@ function BiampTableToolbarActions({
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     import_material19.Box,
     {
-      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
     }
   );
@@ -3026,7 +3024,8 @@ function BiampTableToolbarExportTextButton({
 // src/BiampTable/BiampTableToolbarFilters.tsx
 var import_material21 = require("@mui/material");
 var import_assets11 = require("@bwp-web/assets");
-var import_react12 = require("react");
+var import_react11 = require("react");
+var import_utils2 = require("@mui/material/utils");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 function BiampTableToolbarFilters({
   activeFilterCount,
@@ -3041,8 +3040,8 @@ function BiampTableToolbarFilters({
   buttonLabel = "Filters",
   DrawerProps: drawerProps
 }) {
-  const [open, setOpen] = (0, import_react12.useState)(false);
-  const titleId = (0, import_react12.useId)();
+  const [open, setOpen] = (0, import_react11.useState)(false);
+  const titleId = (0, import_react11.useId)();
   const theme = (0, import_material21.useTheme)();
   function handleClose() {
     onApply?.();
@@ -3066,27 +3065,33 @@ function BiampTableToolbarFilters({
         onClose: handleClose,
         "aria-labelledby": titleId,
         ...drawerProps,
-        PaperProps: {
-          sx: { width: { xs: "100%", sm: 480 } },
-          ...drawerProps?.PaperProps
+        slotProps: {
+          ...drawerProps?.slotProps,
+          paper: (0, import_utils2.mergeSlotProps)(drawerProps?.slotProps?.paper, {
+            sx: { width: { xs: "100%", sm: 480 } }
+          })
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
           import_material21.Box,
           {
-            height: "100%",
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "space-between",
+            sx: {
+              height: "100%",
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "space-between"
+            },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_material21.Box, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
                   import_material21.Box,
                   {
-                    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__ */ (0, import_jsx_runtime25.jsxs)(import_material21.Typography, { id: titleId, variant: "h2", children: [
                         title,
@@ -3124,38 +3129,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__ */ (0, import_jsx_runtime25.jsxs)(import_material21.Box, { display: "flex", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-                  import_material21.Button,
-                  {
-                    variant: "overlay",
-                    color: "secondary",
-                    fullWidth: true,
-                    onClick: onReset,
-                    disabled: activeFilterCount === 0,
-                    children: resetLabel
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-                  import_material21.Button,
-                  {
-                    variant: "overlay",
-                    color: "primary",
-                    fullWidth: true,
-                    onClick: handleClose,
-                    children: applyLabel
-                  }
-                )
-              ] })
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+                import_material21.Box,
+                {
+                  sx: {
+                    display: "flex"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                      import_material21.Button,
+                      {
+                        variant: "overlay",
+                        color: "secondary",
+                        fullWidth: true,
+                        onClick: onReset,
+                        disabled: activeFilterCount === 0,
+                        children: resetLabel
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                      import_material21.Button,
+                      {
+                        variant: "overlay",
+                        color: "primary",
+                        fullWidth: true,
+                        onClick: handleClose,
+                        children: applyLabel
+                      }
+                    )
+                  ]
+                }
+              )
             ]
           }
         )
@@ -3167,21 +3182,23 @@ function BiampTableToolbarFilters({
 // src/BiampTable/BiampTableToolbarSearch.tsx
 var import_material22 = require("@mui/material");
 var import_assets12 = require("@bwp-web/assets");
-var import_react14 = require("react");
+var import_react13 = require("react");
 
 // src/BiampTable/useDebouncedCallback.ts
-var import_react13 = require("react");
+var import_react12 = require("react");
 var BIAMP_TABLE_DEBOUNCE_DELAY = 300;
 function useDebouncedCallback(callback, delay = BIAMP_TABLE_DEBOUNCE_DELAY) {
-  const timeoutRef = (0, import_react13.useRef)(null);
-  const callbackRef = (0, import_react13.useRef)(callback);
-  callbackRef.current = callback;
-  (0, import_react13.useEffect)(() => {
+  const timeoutRef = (0, import_react12.useRef)(null);
+  const callbackRef = (0, import_react12.useRef)(callback);
+  (0, import_react12.useEffect)(() => {
+    callbackRef.current = callback;
+  });
+  (0, import_react12.useEffect)(() => {
     return () => {
       if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);
     };
   }, []);
-  return (0, import_react13.useCallback)(
+  return (0, import_react12.useCallback)(
     (...args) => {
       if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);
       timeoutRef.current = setTimeout(
@@ -3219,12 +3236,14 @@ function BiampTableToolbarSearch({
   ...textFieldProps
 }) {
   const isMobile = (0, import_material22.useMediaQuery)((t) => t.breakpoints.down("md"));
-  const [inputValue, setInputValue] = (0, import_react14.useState)(defaultValue);
-  const [isExpanded, setIsExpanded] = (0, import_react14.useState)(false);
+  const [inputValue, setInputValue] = (0, import_react13.useState)(defaultValue);
+  const [isExpanded, setIsExpanded] = (0, import_react13.useState)(false);
   const debouncedOnChange = useDebouncedCallback(onChange, debounceDelay);
-  (0, import_react14.useEffect)(() => {
+  const [prevDefaultValue, setPrevDefaultValue] = (0, import_react13.useState)(defaultValue);
+  if (defaultValue !== prevDefaultValue) {
+    setPrevDefaultValue(defaultValue);
     setInputValue(defaultValue);
-  }, [defaultValue]);
+  }
   const handleChange = (e) => {
     setInputValue(e.target.value);
     debouncedOnChange(e.target.value);
@@ -3290,11 +3309,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,
@@ -3304,64 +3323,86 @@ function BiampTableToolbarSearch({
     }
   );
   if (isMobile && enableMobileView) {
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material22.Box, { display: "flex", alignItems: "center", width: "100%", pr: 1, gap: 1, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_assets12.SearchIcon, { sx: { width: 16, height: 16 } }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-        import_material22.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__ */ (0, import_jsx_runtime26.jsxs)(
+      import_material22.Box,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          width: "100%",
+          pr: 1,
+          gap: 1
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_assets12.SearchIcon, { sx: { width: 16, height: 16 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            import_material22.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__ */ (0, import_jsx_runtime26.jsxs)(import_material22.Box, { display: "flex", alignItems: "center", minWidth: 28, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-        import_material22.IconButton,
-        {
-          "aria-label": expandLabel ?? placeholder,
-          onClick: () => setIsExpanded(true),
-          sx: { display: isExpanded || inputValue ? "none" : "flex" },
-          children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-            import_assets12.SearchIcon,
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+      import_material22.Box,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          minWidth: 28
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            import_material22.IconButton,
             {
-              variant: "xs",
-              color: "inherit",
-              sx: { width: 16, height: 16 }
+              "aria-label": expandLabel ?? placeholder,
+              onClick: () => setIsExpanded(true),
+              sx: { display: isExpanded || inputValue ? "none" : "flex" },
+              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                import_assets12.SearchIcon,
+                {
+                  variant: "xs",
+                  color: "inherit",
+                  sx: { width: 16, height: 16 }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            import_material22.Collapse,
+            {
+              in: isExpanded || !!inputValue,
+              orientation: "horizontal",
+              unmountOnExit: true,
+              children: textField
             }
           )
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-        import_material22.Collapse,
-        {
-          in: isExpanded || !!inputValue,
-          orientation: "horizontal",
-          unmountOnExit: true,
-          children: textField
-        }
-      )
-    ] });
+        ]
+      }
+    );
   }
   return textField;
 }
 
 // src/BiampTable/useBiampServerSideTable.ts
 var import_react_table3 = require("@tanstack/react-table");
-var import_react15 = require("react");
+var import_react14 = require("react");
 
 // src/BiampTable/serverSideTableUtils.ts
 function orderToSorting(order, fieldToColumnId) {
@@ -3453,7 +3494,7 @@ function useBiampServerSideTable({
     nonHideableColumnIds,
     columnIdToField,
     fieldToColumnId
-  } = (0, import_react15.useMemo)(
+  } = (0, import_react14.useMemo)(
     () => ({
       defaultColumnVisibility: getDefaultColumnVisibilityFromDefs(columns),
       nonHideableColumnIds: getNonHideableColumnIds(columns),
@@ -3461,21 +3502,21 @@ function useBiampServerSideTable({
     }),
     [columns]
   );
-  const sorting = (0, import_react15.useMemo)(
+  const sorting = (0, import_react14.useMemo)(
     () => orderToSorting(order, fieldToColumnId),
     [order, fieldToColumnId]
   );
   const hasPagination = page != null && rowsPerPage != null;
-  const pagination = (0, import_react15.useMemo)(
+  const pagination = (0, import_react14.useMemo)(
     () => hasPagination ? { pageIndex: page, pageSize: rowsPerPage } : void 0,
     [hasPagination, page, rowsPerPage]
   );
   const hasSelection = selectedRowIds != null;
-  const rowSelection = (0, import_react15.useMemo)(
+  const rowSelection = (0, import_react14.useMemo)(
     () => hasSelection ? selectedIdsToRowSelection(selectedRowIds) : void 0,
     [hasSelection, selectedRowIds]
   );
-  const mergedVisibility = (0, import_react15.useMemo)(() => {
+  const mergedVisibility = (0, import_react14.useMemo)(() => {
     const merged = {
       ...defaultColumnVisibility,
       ...columnVisibility
@@ -3593,15 +3634,15 @@ function BiampBanner({ show, children, severity }) {
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material23.Collapse, { in: show, unmountOnExit: true, component: "aside", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     import_material23.Box,
     {
-      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
@@ -3618,10 +3659,37 @@ function BiampBannerIcon({ severity, children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_jsx_runtime27.Fragment, { children: severity ? iconMapping[severity] : children });
 }
 function BiampBannerContent({ children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material23.Typography, { textAlign: "center", variant: "h3", ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    import_material23.Typography,
+    {
+      variant: "h3",
+      ...props,
+      sx: mergeSx(
+        {
+          textAlign: "center"
+        },
+        props.sx
+      ),
+      children
+    }
+  );
 }
 function BiampBannerActions({ children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material23.Box, { display: "flex", gap: 1, alignItems: "center", ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    import_material23.Box,
+    {
+      ...props,
+      sx: mergeSx(
+        {
+          display: "flex",
+          gap: 1,
+          alignItems: "center"
+        },
+        props.sx
+      ),
+      children
+    }
+  );
 }
 
 // src/BiampSegmentedButton/SegmentedButton.tsx
@@ -3643,20 +3711,22 @@ function SegmentedButton({
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     import_material24.Button,
     {
-      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 ${(0, import_styles.alpha)(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 ${(0, import_styles.alpha)(theme.palette.common.black, 0.05)} !important` : "none !important"
+        },
+        sx
+      ),
       ...props,
       children
     }
@@ -3673,14 +3743,16 @@ function SegmentedButtonGroup({ children, sx, ...props }) {
     import_material25.Stack,
     {
       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
     }
   );
@@ -3688,7 +3760,7 @@ function SegmentedButtonGroup({ children, sx, ...props }) {
 
 // src/OrganizationSelector/OrganizationSelector.tsx
 var import_material26 = require("@mui/material");
-var import_react16 = require("react");
+var import_react15 = require("react");
 var import_assets14 = require("@bwp-web/assets");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 function OrganizationSelector({
@@ -3700,17 +3772,19 @@ function OrganizationSelector({
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     import_material26.Stack,
     {
-      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 ${(0, import_material26.alpha)(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 ${(0, import_material26.alpha)(palette.common.black, 0.15)}`,
+          overflow: "auto"
+        },
+        sx
+      ),
       ...props,
       children: loading ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material26.CircularProgress, { size: 40, sx: { mx: "auto", my: "auto" } }) : children
     }
@@ -3722,23 +3796,25 @@ function OrganizationItemList({
   maxHeight,
   sx
 }) {
-  const items = import_react16.Children.toArray(children).filter(import_react16.isValidElement);
+  const items = import_react15.Children.toArray(children).filter(import_react15.isValidElement);
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       import_material26.List,
       {
         disablePadding: true,
-        sx: {
-          border: 0.6,
-          borderColor: ({ palette }) => palette.mode === "dark" ? (0, import_material26.alpha)(palette.common.white, 0.12) : (0, import_material26.alpha)(palette.grey[900], 0.15),
-          borderRadius: 2,
-          ...maxHeight !== void 0 && {
-            overflow: "auto",
-            maxHeight
+        sx: mergeSx(
+          {
+            border: 0.6,
+            borderColor: ({ palette }) => palette.mode === "dark" ? (0, import_material26.alpha)(palette.common.white, 0.12) : (0, import_material26.alpha)(palette.grey[900], 0.15),
+            borderRadius: 2,
+            ...maxHeight !== void 0 && {
+              overflow: "auto",
+              maxHeight
+            }
           },
-          ...sx
-        },
-        children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react16.Fragment, { children: [
+          sx
+        ),
+        children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react15.Fragment, { children: [
           item,
           i !== items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material26.Divider, {})
         ] }, item.key ?? i))
@@ -3753,9 +3829,11 @@ function renderText(value, defaults) {
       import_material26.Typography,
       {
         variant: defaults.variant,
-        fontWeight: defaults.fontWeight,
-        color: defaults.color,
         noWrap: true,
+        sx: {
+          fontWeight: defaults.fontWeight,
+          color: defaults.color
+        },
         children: value
       }
     );
@@ -3778,13 +3856,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__ */ (0, import_jsx_runtime30.jsx)(
@@ -3814,20 +3889,40 @@ function OrganizationItem({
             ) : logo
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material26.Stack, { gap: 0.25, sx: { width: "100%", minWidth: 0 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_material26.Stack, { 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__ */ (0, import_jsx_runtime30.jsxs)(
+          import_material26.Stack,
+          {
+            sx: {
+              gap: 0.25,
+              width: "100%",
+              minWidth: 0
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+                import_material26.Stack,
+                {
+                  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__ */ (0, import_jsx_runtime30.jsx)(
           import_assets14.ChevronRightIcon,
           {
@@ -3856,15 +3951,17 @@ function OrganizationSelectorButton({
     import_material26.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,
@@ -3872,9 +3969,11 @@ function OrganizationSelectorButton({
           import_material26.Typography,
           {
             variant: "caption",
-            fontWeight: 600,
             noWrap: true,
-            sx: { flexShrink: 0 },
+            sx: {
+              fontWeight: 600,
+              flexShrink: 0
+            },
             children: name
           }
         ),
@@ -3925,7 +4024,8 @@ function OrganizationSelectorPopover({
 
 // src/LandingPage/LandingFormPanel.tsx
 var import_material27 = require("@mui/material");
-var import_react17 = require("react");
+var import_react16 = require("react");
+var import_utils3 = require("@mui/material/utils");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 function LandingFormPanel({
   children,
@@ -3945,20 +4045,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
     }
   );
@@ -3985,46 +4085,65 @@ function LandingFormField({
     label: labelSlotProps,
     ...fieldSlotProps
   } = slotProps ?? {};
-  const generatedId = (0, import_react17.useId)();
+  const generatedId = (0, import_react16.useId)();
   const fieldId = id ?? generatedId;
   const labelId = labelSlotProps?.id ?? `${fieldId}-label`;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_material27.Stack, { gap: 0.5, width: "100%", ...containerSlotProps, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-      import_material27.Typography,
-      {
-        component: "label",
-        id: labelId,
-        htmlFor: fieldId,
-        fontSize: 12,
-        fontWeight: 600,
-        color: "text.primary",
-        ...labelSlotProps,
-        children: label
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-      import_material27.TextField,
-      {
-        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__ */ (0, import_jsx_runtime31.jsxs)(
+    import_material27.Stack,
+    {
+      ...containerSlotProps,
+      sx: mergeSx({ gap: 0.5, width: "100%" }, containerSlotProps?.sx),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          import_material27.Typography,
+          {
+            component: "label",
+            id: labelId,
+            htmlFor: fieldId,
+            color: "textPrimary",
+            ...labelSlotProps,
+            sx: mergeSx({ fontSize: 12, fontWeight: 600 }, labelSlotProps?.sx),
+            children: label
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          import_material27.TextField,
+          {
+            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: (0, import_utils3.mergeSlotProps)(fieldSlotProps.select, { labelId })
+            },
+            sx: mergeSx(fieldSx, sx),
+            ...textFieldProps
+          }
+        )
+      ]
+    }
+  );
 }
 function LandingFormActions(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material27.Stack, { direction: "row", gap: 1, width: "100%", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    import_material27.Stack,
+    {
+      direction: "row",
+      ...props,
+      sx: mergeSx(
+        {
+          gap: 1,
+          width: "100%"
+        },
+        props.sx
+      )
+    }
+  );
 }
 function LandingFormCheckbox({
   label,
@@ -4046,10 +4165,9 @@ function LandingFormCheckbox({
       label,
       slotProps: {
         ...labelSlotProps,
-        typography: mergeSlotProps(
-          { variant: "body2" },
-          labelSlotProps.typography
-        )
+        typography: (0, import_utils3.mergeSlotProps)(labelSlotProps.typography, {
+          variant: "body2"
+        })
       },
       ...formControlLabelProps,
       sx: mergeSx({ m: 0, gap: 1, alignItems: "center" }, sx)
@@ -4059,8 +4177,9 @@ function LandingFormCheckbox({
 
 // src/LandingPage/OrganizationsPanel.tsx
 var import_material28 = require("@mui/material");
-var import_react18 = require("react");
+var import_react17 = require("react");
 var import_assets15 = require("@bwp-web/assets");
+var import_utils4 = require("@mui/material/utils");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 function OrganizationRow({
   primaryText,
@@ -4123,12 +4242,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__ */ (0, import_jsx_runtime32.jsx)(import_material28.Typography, { noWrap: true, variant: "caption", color: "text.secondary", children: secondaryText })
+          secondaryText && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            import_material28.Typography,
+            {
+              noWrap: true,
+              variant: "caption",
+              sx: {
+                color: "text.secondary"
+              },
+              children: secondaryText
+            }
+          )
         ] }),
         !disabled && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           import_assets15.ChevronRightIcon,
@@ -4158,7 +4289,7 @@ function OrganizationRowGroup({
   sx,
   ...boxProps
 }) {
-  const items = import_react18.Children.toArray(children).filter(import_react18.isValidElement);
+  const items = import_react17.Children.toArray(children).filter(import_react17.isValidElement);
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     import_material28.Box,
     {
@@ -4173,7 +4304,7 @@ function OrganizationRowGroup({
         sx
       ),
       ...boxProps,
-      children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react18.Fragment, { children: [
+      children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react17.Fragment, { children: [
         item,
         i !== items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_material28.Divider, {})
       ] }, item.key ?? i))
@@ -4209,34 +4340,53 @@ function OrganizationsEmptyState({
     import_material28.Stack,
     {
       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: [
-        (0, import_react18.cloneElement)(icon, {
+        (0, import_react17.cloneElement)(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__ */ (0, import_jsx_runtime32.jsx)(
           import_material28.Typography,
           {
             variant: "body2",
-            fontWeight: 600,
-            color: "text.primary",
-            textAlign: "center",
+            sx: {
+              fontWeight: 600,
+              color: "text.primary",
+              textAlign: "center"
+            },
             children: title
           }
         ),
-        description && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_material28.Typography, { variant: "caption", color: "text.secondary", textAlign: "center", children: description })
+        description && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          import_material28.Typography,
+          {
+            variant: "caption",
+            sx: {
+              color: "text.secondary",
+              textAlign: "center"
+            },
+            children: description
+          }
+        )
       ]
     }
   );
@@ -4265,22 +4415,22 @@ function OrganizationsPanel({
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     import_material28.Stack,
     {
-      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__ */ (0, import_jsx_runtime32.jsx)(
           import_material28.TextField,
@@ -4303,16 +4453,12 @@ function OrganizationsPanel({
             ),
             slotProps: {
               ...searchFieldSlotProps,
-              input: mergeSlotProps(
-                {
-                  startAdornment: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_material28.InputAdornment, { position: "start", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_assets15.SearchIcon, { sx: { ml: 1 } }) })
-                },
-                searchFieldSlotProps?.input
-              ),
-              htmlInput: mergeSlotProps(
-                { "aria-label": search.placeholder },
-                searchFieldSlotProps?.htmlInput
-              )
+              input: (0, import_utils4.mergeSlotProps)(searchFieldSlotProps?.input, {
+                startAdornment: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_material28.InputAdornment, { position: "start", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_assets15.SearchIcon, { sx: { ml: 1 } }) })
+              }),
+              htmlInput: (0, import_utils4.mergeSlotProps)(searchFieldSlotProps?.htmlInput, {
+                "aria-label": search.placeholder
+              })
             },
             ...searchSlotProps
           }
@@ -4330,10 +4476,17 @@ function OrganizationsPanel({
           )
         ] }),
         empty ? empty === true ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(OrganizationsEmptyState, {}) : empty : orLabel && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TextDivider, { ...slotProps?.orLabel, children: orLabel }),
-        (joinAction || createAction) && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_material28.Stack, { gap: 1, width: "100%", ...slotProps?.actions, children: [
-          joinAction && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(OrganizationRowGroup, { ...slotProps?.joinGroup, children: joinAction }),
-          createAction && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(OrganizationRowGroup, { ...slotProps?.createGroup, children: createAction })
-        ] })
+        (joinAction || createAction) && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+          import_material28.Stack,
+          {
+            ...slotProps?.actions,
+            sx: mergeSx({ gap: 1, width: "100%" }, slotProps?.actions?.sx),
+            children: [
+              joinAction && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(OrganizationRowGroup, { ...slotProps?.joinGroup, children: joinAction }),
+              createAction && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(OrganizationRowGroup, { ...slotProps?.createGroup, children: createAction })
+            ]
+          }
+        )
       ]
     }
   );
@@ -4364,23 +4517,27 @@ function UserInitialsIcon({
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     import_material29.Box,
     {
-      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__ */ (0, import_jsx_runtime33.jsx)(
         import_material29.Typography,
         {
           variant: "h3",
-          color: textColor,
           sx: {
+            color: textColor,
             userSelect: "none",
             fontSize: size !== DEFAULT_SIZE ? `${fontSize}px` : void 0
           },
@@ -4399,9 +4556,19 @@ var getInitials = (name) => {
 
 // src/DynamicSvgIcon/DynamicSvgIcon.tsx
 var import_material30 = require("@mui/material");
-var import_react19 = require("react");
+var import_react18 = require("react");
 var import_jsx_runtime34 = require("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();
 }
@@ -4411,67 +4578,57 @@ function applyCurrentColor(svg) {
 function useDynamicSvgIcon(url, options = {}) {
   const { replaceColors = false, onLoad, onError } = options;
   const transform = replaceColors ? applyCurrentColor : (s) => s;
-  const [svgContent, setSvgContent] = (0, import_react19.useState)(() => {
-    const cached = svgCache.get(url);
-    return cached ? transform(cached.innerContent) : null;
-  });
-  const [svgViewBox, setSvgViewBox] = (0, import_react19.useState)(() => {
-    const cached = svgCache.get(url);
-    return cached?.viewBox ?? null;
-  });
-  const [loading, setLoading] = (0, import_react19.useState)(() => !svgCache.has(url));
-  const [error, setError] = (0, import_react19.useState)(null);
-  (0, import_react19.useEffect)(() => {
-    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] = (0, import_react18.useState)(() => iconStateFor(url, transform));
+  if (state.url !== url) {
+    setState(iconStateFor(url, transform));
+  }
+  (0, import_react18.useEffect)(() => {
+    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);
         }
       }
@@ -4480,6 +4637,7 @@ function useDynamicSvgIcon(url, options = {}) {
       cancelled = true;
     };
   }, [url]);
+  const { loading, error, svgContent, svgViewBox } = state;
   return { loading, error, svgContent, svgViewBox };
 }
 var DEFAULT_SIZE2 = 24;
@@ -4537,11 +4695,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__ */ (0, import_jsx_runtime34.jsx)("g", { dangerouslySetInnerHTML: { __html: svgContent } })
     }
   );
@@ -4556,11 +4710,7 @@ function DynamicSvgIcon({
   BiampBannerActions,
   BiampBannerContent,
   BiampBannerIcon,
-  BiampBuildAppContent,
-  BiampBuildAppContentItem,
   BiampCheckboxListPopover,
-  BiampEndUserAppContent,
-  BiampEndUserAppContentItem,
   BiampGlobalSearch,
   BiampHeader,
   BiampHeaderActions,