@bwp-web/components 1.1.2 → 1.2.0

package/dist/index.js

@@ -509,7 +509,7 @@ import {
   TextField,
   Typography
 } from "@mui/material";
-import { BiampRedLogo, SearchIcon } from "@bwp-web/assets";
+import { BiampRedLogo, ExternalLinkIcon, SearchIcon } from "@bwp-web/assets";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function BiampHeader({ children, sx, ...props }) {
   return /* @__PURE__ */ jsx3(
@@ -659,6 +659,7 @@ function BiampHeaderButton({
     }
   );
 }
+var POPOVER_MAX_WIDTH = 530;
 function BiampAppPopover({
   children,
   open,
@@ -669,9 +670,9 @@ function BiampAppPopover({
     Popover,
     {
       open,
-      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      anchorOrigin: { vertical: "bottom", horizontal: "right" },
+      transformOrigin: { vertical: -8, horizontal: POPOVER_MAX_WIDTH - 4 },
       sx: { ...sx },
-      transformOrigin: { vertical: -4, horizontal: 150 },
       slotProps: {
         paper: {
           sx: {
@@ -680,7 +681,13 @@ function BiampAppPopover({
             outlineWidth: "0.6px",
             outlineStyle: "solid",
             outlineColor: ({ palette }) => palette.divider,
-            boxShadow: ({ palette }) => `0px 4px 24px 0px ${alpha(palette.common.black, 0.15)};`
+            boxShadow: ({ palette }) => `0px 4px 24px 0px ${alpha(palette.common.black, 0.15)};`,
+            maxWidth: POPOVER_MAX_WIDTH,
+            width: "100%",
+            p: 2,
+            display: "flex",
+            flexDirection: "column",
+            gap: 2
           }
         }
       },
@@ -689,7 +696,7 @@ function BiampAppPopover({
     }
   );
 }
-function BiampAppDialog({
+function BiampBuildAppContent({
   children,
   sx,
   ...props
@@ -698,13 +705,9 @@ function BiampAppDialog({
     Box2,
     {
       sx: {
-        p: 2,
-        display: "inline-flex",
-        flexWrap: "wrap",
+        display: "grid",
+        gridTemplateColumns: "1fr 1fr",
         gap: 1.5,
-        maxWidth: "284px",
-        borderRadius: "16px",
-        backgroundColor: ({ palette }) => palette.mode === "dark" ? palette.grey[800] : palette.common.white,
         ...sx
       },
       ...props,
@@ -712,64 +715,92 @@ function BiampAppDialog({
     }
   );
 }
-function BiampAppDialogItem({
+function BiampBuildAppContentItem({
+  image,
+  name,
+  description,
+  button,
+  sx,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs2(
+    Stack3,
+    {
+      direction: "column",
+      position: "relative",
+      sx: {
+        p: 1.5,
+        borderRadius: 1.5,
+        outlineWidth: "1px",
+        outlineStyle: "solid",
+        outlineColor: ({ palette }) => palette.divider,
+        ...sx
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx3(Box2, { sx: { width: 54, height: 54 }, mb: 0.5, children: image }),
+        /* @__PURE__ */ jsx3(Typography, { variant: "caption", fontWeight: 600, mb: 0.5, children: name }),
+        /* @__PURE__ */ jsx3(Typography, { variant: "caption", color: "text.secondary", children: description }),
+        button && /* @__PURE__ */ jsx3(Box2, { position: "absolute", top: "12px", right: "12px", children: button })
+      ]
+    }
+  );
+}
+function BiampEndUserAppContent({
   children,
+  sx,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    Stack3,
+    {
+      direction: "column",
+      sx: {
+        gap: 1.5,
+        ...sx
+      },
+      ...props,
+      children
+    }
+  );
+}
+function BiampEndUserAppContentItem({
+  image,
   name,
+  description,
+  href,
+  target,
   sx,
   ...props
 }) {
   return /* @__PURE__ */ jsxs2(
-    Box2,
+    Stack3,
     {
+      component: href ? "a" : "div",
+      href,
+      target,
+      direction: "row",
+      alignItems: "center",
       sx: {
-        width: "76px",
-        height: "89px",
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        cursor: "pointer",
-        justifyContent: "center",
-        gap: "4px",
-        borderRadius: "12px",
-        border: "0.6px solid transparent",
-        transition: "background-color 0.2s ease, border-color 0.2s ease",
-        ":hover": {
-          backgroundColor: ({ palette }) => alpha(palette.info.main, 0.1),
-          borderColor: ({ palette }) => palette.info.main
-        },
+        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__ */ jsx3(
-          Box2,
-          {
-            sx: {
-              mt: "8px",
-              width: "54px",
-              height: "54px",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center"
-            },
-            children
-          }
-        ),
-        /* @__PURE__ */ jsx3(
-          Typography,
-          {
-            variant: "caption",
-            fontWeight: 600,
-            sx: {
-              textAlign: "center",
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
-              maxWidth: "100%"
-            },
-            children: name
-          }
-        )
+        /* @__PURE__ */ jsx3(Box2, { sx: { width: 32, height: 32 }, children: image }),
+        /* @__PURE__ */ jsxs2(Stack3, { direction: "column", children: [
+          /* @__PURE__ */ jsx3(Typography, { variant: "caption", fontWeight: 600, children: name }),
+          /* @__PURE__ */ jsx3(Typography, { variant: "caption", color: "text.secondary", children: description })
+        ] }),
+        /* @__PURE__ */ jsx3(ExternalLinkIcon, { sx: { width: 16, height: 16, ml: "auto" } })
       ]
     }
   );
@@ -2922,13 +2953,15 @@ function DynamicSvgIcon({
 }
 export {
   BIAMP_TABLE_DEBOUNCE_DELAY,
-  BiampAppDialog,
-  BiampAppDialogItem,
   BiampAppPopover,
   BiampBanner,
   BiampBannerActions,
   BiampBannerContent,
   BiampBannerIcon,
+  BiampBuildAppContent,
+  BiampBuildAppContentItem,
+  BiampEndUserAppContent,
+  BiampEndUserAppContentItem,
   BiampGlobalSearch,
   BiampHeader,
   BiampHeaderActions,