@vention/machine-apps-components 0.4.0 → 0.4.2

package/index.esm.js

@@ -10,8 +10,8 @@ import 'dayjs/locale/en';
 import 'dayjs/locale/fr';
 import 'dayjs/locale/de';
 import 'dayjs/locale/es';
-import { Box, useTheme, Typography, Button, InputAdornment, IconButton, TableContainer, Paper, Table, TableHead, TableRow, TableCell, TableBody } from '@mui/material';
-import { VentionSelect, COLORS, VentionModalBase, VentionIcon, VentionTextInput, VentionButton, VentionStatusIndicator, VentionSpinner, VentionAlert, VentionDropZone, VentionUploadFile, VentionIconButton } from '@vention/machine-ui';
+import { Box, useTheme, Typography, Button, InputAdornment, IconButton, TableContainer, Paper, Table, TableHead, TableRow, TableCell, TableBody, List, ListItem, Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
+import { VentionSelect, VentionModalBase, VentionIcon, VentionTextInput, COLORS, VentionButton, VentionStatusIndicator, VentionSpinner, VentionAlert, VentionDropZone, VentionUploadFile, VentionIconButton } from '@vention/machine-ui';
 import { tss } from 'tss-react/mui';
 import { useLocation, useNavigate } from 'react-router-dom';
 
@@ -130,8 +130,21 @@ var enTranslations = {
       inprogress: "In Progress",
       complete: "Complete",
       loading: "Loading",
-      waiting: "Waiting"
+      waiting: "Waiting",
+      warning: "Warning",
+      error: "Error"
     }
+  },
+  productFormList: {
+    add: "Add",
+    cancel: "Cancel",
+    save: "Save",
+    create: "Create",
+    modify: "Edit",
+    new: "New",
+    delete: "Delete",
+    deleteConfirmation: "Are you sure you want to delete this item?",
+    emptyState: "No items yet. Click Add to create one."
   }
 };
 
@@ -248,8 +261,21 @@ var frTranslations = {
       inprogress: "En cours",
       complete: "Terminé",
       loading: "Chargement",
-      waiting: "En attente"
+      waiting: "En attente",
+      warning: "Avertissement",
+      error: "Erreur"
     }
+  },
+  productFormList: {
+    add: "Ajouter",
+    cancel: "Annuler",
+    save: "Sauvegarder",
+    create: "Créer",
+    modify: "Modifier",
+    new: "Nouveau",
+    delete: "Supprimer",
+    deleteConfirmation: "Êtes-vous sûr de vouloir supprimer cet élément?",
+    emptyState: "Aucun élément. Cliquez sur Ajouter pour en créer un."
   }
 };
 
@@ -366,8 +392,21 @@ var deTranslations = {
       inprogress: "In Bearbeitung",
       complete: "Abgeschlossen",
       loading: "Laden",
-      waiting: "Warten"
+      waiting: "Warten",
+      warning: "Warnung",
+      error: "Fehler"
     }
+  },
+  productFormList: {
+    add: "Hinzufügen",
+    cancel: "Abbrechen",
+    save: "Speichern",
+    create: "Erstellen",
+    modify: "Bearbeiten",
+    new: "Neu",
+    delete: "Löschen",
+    deleteConfirmation: "Sind Sie sicher, dass Sie dieses Element löschen möchten?",
+    emptyState: "Noch keine Elemente. Klicken Sie auf Hinzufügen, um eines zu erstellen."
   }
 };
 
@@ -484,8 +523,21 @@ var esTranslations = {
       inprogress: "En progreso",
       complete: "Completo",
       loading: "Cargando",
-      waiting: "Esperando"
+      waiting: "Esperando",
+      warning: "Advertencia",
+      error: "Error"
     }
+  },
+  productFormList: {
+    add: "Agregar",
+    cancel: "Cancelar",
+    save: "Guardar",
+    create: "Crear",
+    modify: "Editar",
+    new: "Nuevo",
+    delete: "Eliminar",
+    deleteConfirmation: "¿Está seguro de que desea eliminar este elemento?",
+    emptyState: "Aún no hay elementos. Haz clic en Agregar para crear uno."
   }
 };
 
@@ -779,7 +831,7 @@ const I18nSettings = function I18nSettings({
   const {
     classes,
     cx
-  } = useStyles$f({
+  } = useStyles$g({
     layout
   });
   const {
@@ -834,35 +886,41 @@ const I18nSettings = function I18nSettings({
   };
   return jsxs(Box, {
     className: cx(classes.container, className),
-    children: [jsx(VentionSelect, {
+    children: [jsx(Box, {
       className: classes.settingItem,
-      size: "xx-large",
-      variant: "outlined",
-      labelText: t("common.settings.unitSystem"),
-      value: unitSystem,
-      onChange: handleUnitSystemChange,
-      menuItems: unitSystemOptions
-    }), jsx(VentionSelect, {
+      children: jsx(VentionSelect, {
+        size: "xx-large",
+        variant: "outlined",
+        labelText: t("common.settings.unitSystem"),
+        value: unitSystem,
+        onChange: handleUnitSystemChange,
+        menuItems: unitSystemOptions
+      })
+    }), jsx(Box, {
       className: classes.settingItem,
-      size: "xx-large",
-      variant: "outlined",
-      labelText: t("common.settings.timezone"),
-      value: timezone,
-      onChange: handleTimezoneChange,
-      menuItems: timezoneOptions
-    }), supportedLanguages.length > 1 && jsx(VentionSelect, {
+      children: jsx(VentionSelect, {
+        size: "xx-large",
+        variant: "outlined",
+        labelText: t("common.settings.timezone"),
+        value: timezone,
+        onChange: handleTimezoneChange,
+        menuItems: timezoneOptions
+      })
+    }), supportedLanguages.length > 1 && jsx(Box, {
       className: classes.settingItem,
-      size: "xx-large",
-      variant: "outlined",
-      labelText: t("common.settings.locale"),
-      value: locale,
-      onChange: handleLocaleChange,
-      menuItems: localeOptions
+      children: jsx(VentionSelect, {
+        size: "xx-large",
+        variant: "outlined",
+        labelText: t("common.settings.locale"),
+        value: locale,
+        onChange: handleLocaleChange,
+        menuItems: localeOptions
+      })
     })]
   });
 };
 I18nSettings.displayName = "I18nSettings";
-const useStyles$f = tss.withParams().create(({
+const useStyles$g = tss.withParams().create(({
   theme,
   layout
 }) => ({
@@ -870,14 +928,16 @@ const useStyles$f = tss.withParams().create(({
     display: "flex",
     flexDirection: layout === "horizontal" ? "row" : "column",
     flexWrap: layout === "horizontal" ? "wrap" : "nowrap",
-    gap: theme.spacing(4),
-    width: "100%",
-    maxWidth: layout === "horizontal" ? "none" : "500px"
+    gap: theme.spacing(3),
+    width: "100%"
   },
   settingItem: layout === "horizontal" ? {
-    flex: "1 1 200px",
-    maxWidth: "300px"
-  } : {}
+    flex: "1 1 250px",
+    maxWidth: "350px"
+  } : {
+    width: "100%",
+    maxWidth: "400px"
+  }
 }));
 
 function TimeLabel({
@@ -962,7 +1022,7 @@ const NavigationConfirmationModal = function NavigationConfirmationModal(props)
   } = props;
   const {
     classes
-  } = useStyles$e();
+  } = useStyles$f();
   const {
     t
   } = useI18n();
@@ -1025,7 +1085,7 @@ const NavigationConfirmationModal = function NavigationConfirmationModal(props)
     })
   });
 };
-const useStyles$e = tss.create(({
+const useStyles$f = tss.create(({
   theme
 }) => ({
   modalContent: {
@@ -1051,11 +1111,14 @@ const useStyles$e = tss.create(({
     width: "auto",
     maxWidth: "100%",
     height: "80px",
-    backgroundColor: COLORS.slate[800],
+    backgroundColor: theme.palette.button.filled,
     borderRadius: "4px",
     padding: "8px 16px",
     boxSizing: "border-box",
-    marginTop: "auto"
+    marginTop: "auto",
+    "&:hover": {
+      backgroundColor: theme.palette.button.filledHover
+    }
   },
   buttonLabel: {
     display: "flex",
@@ -1086,7 +1149,7 @@ const PasswordProtectionModal = function PasswordProtectionModal(props) {
   const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
   const {
     classes
-  } = useStyles$d();
+  } = useStyles$e();
   const {
     t
   } = useI18n();
@@ -1185,7 +1248,7 @@ const PasswordProtectionModal = function PasswordProtectionModal(props) {
                   children: jsx(VentionIcon, {
                     type: showPassword ? "eye-closed" : "eye",
                     size: 28,
-                    color: COLORS.slate[900]
+                    color: "#0f172a"
                   })
                 })
               })
@@ -1210,7 +1273,7 @@ const PasswordProtectionModal = function PasswordProtectionModal(props) {
     })]
   });
 };
-const useStyles$d = tss.create(({
+const useStyles$e = tss.create(({
   theme
 }) => ({
   modalContent: {
@@ -1228,7 +1291,7 @@ const useStyles$d = tss.create(({
     fontWeight: 700,
     lineHeight: "48px",
     textAlign: "center",
-    color: COLORS.slate[900]
+    color: theme.palette.text.primary
   },
   inputContainer: {
     width: "499px",
@@ -1239,12 +1302,12 @@ const useStyles$d = tss.create(({
   button: {
     width: "250px",
     height: "64px",
-    backgroundColor: COLORS.slate[800],
+    backgroundColor: theme.palette.button.filled,
     borderRadius: "4px",
     padding: "8px",
     boxSizing: "border-box",
     "&:hover": {
-      backgroundColor: COLORS.slate[700]
+      backgroundColor: theme.palette.button.filledHover
     }
   },
   buttonLabel: {
@@ -1282,7 +1345,7 @@ const NavigationBarItem = function NavigationBarItem(props) {
   const {
     classes,
     cx
-  } = useStyles$c();
+  } = useStyles$d();
   const {
     t
   } = useI18n();
@@ -1315,7 +1378,7 @@ const NavigationBarItem = function NavigationBarItem(props) {
     })]
   });
 };
-const useStyles$c = tss.create(({
+const useStyles$d = tss.create(({
   theme
 }) => ({
   tabButton: {
@@ -1330,7 +1393,7 @@ const useStyles$c = tss.create(({
     backgroundColor: "transparent",
     transition: "background-color 0.2s",
     "&:hover": {
-      backgroundColor: COLORS.slate[700]
+      backgroundColor: theme.palette.button.filledHover
     },
     color: theme.palette.common.white,
     "&.Mui-disabled": {
@@ -1338,7 +1401,7 @@ const useStyles$c = tss.create(({
     }
   },
   active: {
-    backgroundColor: COLORS.slate[600]
+    backgroundColor: theme.palette.button.filledPressed
   },
   disabled: {
     opacity: 0.5,
@@ -1378,14 +1441,17 @@ const NavigationBarRoot = function NavigationBarRoot(props) {
     isControlCenterDisabled = false,
     isSupportDisabled = false,
     showControlCenterButton = true,
-    showSupportButton = true
+    showSupportButton = true,
+    variant = "fixed"
   } = props;
   const location = useLocation();
   const navigate = useNavigate();
   const theme = useTheme();
   const {
     classes
-  } = useStyles$b();
+  } = useStyles$c({
+    variant
+  });
   const {
     t
   } = useI18n();
@@ -1470,8 +1536,8 @@ const NavigationBarRoot = function NavigationBarRoot(props) {
             disabled: isControlCenterDisabled,
             className: classes.sideButton,
             style: {
-              backgroundColor: isControlCenterDisabled ? getFadedColor(COLORS.slate[800]) : COLORS.slate[800],
-              borderColor: isControlCenterDisabled ? getFadedColor(COLORS.slate[600]) : COLORS.slate[600],
+              backgroundColor: isControlCenterDisabled ? getFadedColor(theme.palette.background.brand) : theme.palette.background.brand,
+              borderColor: isControlCenterDisabled ? getFadedColor(theme.palette.border.onColor) : theme.palette.border.onColor,
               opacity: isControlCenterDisabled ? 0.5 : 1,
               cursor: isControlCenterDisabled ? "not-allowed" : "pointer"
             },
@@ -1496,8 +1562,8 @@ const NavigationBarRoot = function NavigationBarRoot(props) {
             disabled: isSupportDisabled,
             className: classes.sideButton,
             style: {
-              backgroundColor: isSupportDisabled ? getFadedColor(COLORS.slate[800]) : COLORS.slate[800],
-              borderColor: isSupportDisabled ? getFadedColor(COLORS.slate[600]) : COLORS.slate[600],
+              backgroundColor: isSupportDisabled ? getFadedColor(theme.palette.background.brand) : theme.palette.background.brand,
+              borderColor: isSupportDisabled ? getFadedColor(theme.palette.border.onColor) : theme.palette.border.onColor,
               opacity: isSupportDisabled ? 0.5 : 1,
               cursor: isSupportDisabled ? "not-allowed" : "pointer"
             },
@@ -1524,16 +1590,18 @@ const NavigationBarRoot = function NavigationBarRoot(props) {
     })]
   });
 };
-const useStyles$b = tss.create(({
-  theme
+const useStyles$c = tss.withParams().create(({
+  theme,
+  variant
 }) => ({
-  root: {
+  root: Object.assign({
     boxSizing: "border-box",
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
     height: "120px",
-    padding: theme.spacing(2, 6),
+    padding: theme.spacing(2, 6)
+  }, variant === "fixed" ? {
     backgroundColor: COLORS.slate[900],
     position: "fixed",
     left: 0,
@@ -1541,7 +1609,13 @@ const useStyles$b = tss.create(({
     bottom: 0,
     borderTop: `1px solid ${COLORS.slate[800]}`,
     zIndex: Z_INDEX.NAVIGATION
-  },
+  } : {
+    backgroundColor: theme.palette.background.defaultInverse,
+    position: "relative",
+    width: "100%",
+    borderTop: `1px solid ${theme.palette.border.inverse}`,
+    flexShrink: 0
+  }),
   container: {
     display: "flex",
     alignItems: "center",
@@ -1568,14 +1642,14 @@ const useStyles$b = tss.create(({
     justifyContent: "center",
     height: theme.spacing(11),
     padding: theme.spacing(2, 4),
-    backgroundColor: COLORS.slate[800],
+    backgroundColor: theme.palette.background.brand,
     borderRadius: 4,
-    border: `2px solid ${COLORS.slate[600]}`,
+    border: `2px solid ${theme.palette.border.onColor}`,
     color: theme.palette.common.white,
     textTransform: "none",
     minWidth: 0,
     "&:hover": {
-      backgroundColor: COLORS.slate[700]
+      backgroundColor: theme.palette.button.filledHover
     },
     "&.Mui-disabled": {
       color: theme.palette.common.white
@@ -1626,7 +1700,7 @@ const StatusTopBarButton = function StatusTopBarButton(props) {
   } = props;
   const {
     classes
-  } = useStyles$a();
+  } = useStyles$b();
   if (!visible) return null;
   const getFadedColor = function getFadedColor(color, opacity = 1) {
     return `${color}${Math.round(opacity * 255).toString(16).padStart(2, "0")}`;
@@ -1672,7 +1746,7 @@ const StatusTopBarButton = function StatusTopBarButton(props) {
     })
   });
 };
-const useStyles$a = tss.create(({
+const useStyles$b = tss.create(({
   theme
 }) => ({
   actionButton: {
@@ -1703,11 +1777,14 @@ const useStyles$a = tss.create(({
 const StatusTopBarRoot = function StatusTopBarRoot(props) {
   const {
     status,
-    buttonConfigs = []
+    buttonConfigs = [],
+    variant = "light"
   } = props;
   const {
     classes
-  } = useStyles$9();
+  } = useStyles$a({
+    variant
+  });
   const visibleButtons = buttonConfigs.filter(config => config.visible !== false);
   const hasVisibleButtons = visibleButtons.length > 0;
   return jsxs("header", {
@@ -1732,18 +1809,17 @@ const StatusTopBarRoot = function StatusTopBarRoot(props) {
     })]
   });
 };
-const useStyles$9 = tss.create(({
-  theme
+const useStyles$a = tss.withParams().create(({
+  theme,
+  variant
 }) => ({
   root: {
     boxSizing: "border-box",
-    position: "fixed",
-    top: 0,
-    right: 0,
-    left: 0,
-    backgroundColor: theme.palette.common.white,
-    height: "128px",
-    zIndex: Z_INDEX.NAVIGATION
+    position: "relative",
+    width: "100%",
+    backgroundColor: variant === "dark" ? theme.palette.background.defaultInverse : theme.palette.common.white,
+    height: "120px",
+    flexShrink: 0
   },
   content: {
     display: "flex",
@@ -1753,7 +1829,10 @@ const useStyles$9 = tss.create(({
   },
   leftArea: {
     display: "flex",
-    alignItems: "center"
+    alignItems: "center",
+    "& .MuiTypography-root": {
+      color: variant === "dark" ? theme.palette.common.white : theme.palette.text.primary
+    }
   },
   rightArea: {
     display: "flex",
@@ -1773,25 +1852,34 @@ const useStyles$9 = tss.create(({
 const StatusTopBar = StatusTopBarRoot;
 
 const Sidebar = function Sidebar(props) {
+  const {
+    items,
+    variant = "card"
+  } = props;
   const {
     classes
-  } = useStyles$8();
+  } = useStyles$9({
+    variant
+  });
   return jsx(Box, {
     className: classes.container,
-    children: props.items.map(item => jsx(SidebarItemComponent, {
-      item: item
+    children: items.map(item => jsx(SidebarItemComponent, {
+      item: item,
+      variant: variant
     }, item.id))
   });
 };
 const ICON_SIZE = 32;
 const SidebarItemComponent = function SidebarItemComponent(props) {
   const {
-    item
+    item,
+    variant
   } = props;
   const {
     classes
   } = useSidebarItemStyles({
-    state: item.state
+    state: item.state,
+    variant
   });
   const isDisabled = item.state === "disabled";
   return jsx(Button, {
@@ -1806,7 +1894,10 @@ const SidebarItemComponent = function SidebarItemComponent(props) {
       className: classes.content,
       children: [jsxs(Box, {
         className: classes.leftSection,
-        children: [item.icon ? item.icon : jsx(Box, {
+        children: [item.icon ? jsx(Box, {
+          className: classes.iconWrapper,
+          children: item.icon
+        }) : jsx(Box, {
           className: classes.iconPlaceholder
         }), jsxs(Box, {
           className: classes.textContainer,
@@ -1831,42 +1922,65 @@ const SidebarItemComponent = function SidebarItemComponent(props) {
     })
   });
 };
-const useStyles$8 = tss.create(({
-  theme
+const useStyles$9 = tss.withParams().create(({
+  theme,
+  variant
 }) => ({
-  container: {
+  container: Object.assign({
     display: "flex",
     flexDirection: "column",
-    width: "100%",
+    width: "100%"
+  }, variant === "card" ? {
     padding: theme.spacing(2),
     gap: theme.spacing(1)
-  }
+  } : {
+    padding: 0,
+    gap: 0
+  })
 }));
 const useSidebarItemStyles = tss.withParams().create(function createSidebarItemStyles({
   theme,
-  state
+  state,
+  variant
 }) {
   const isActive = state === "active";
   const isDisabled = state === "disabled";
-  return {
-    button: {
+  const isAccentVariant = variant === "accent";
+  const getButtonStyles = () => {
+    const baseStyles = {
       width: "100%",
       minHeight: theme.spacing(14),
       padding: theme.spacing(3, 4),
       textAlign: "left",
       textTransform: "none",
-      borderRadius: theme.spacing(2),
-      backgroundColor: isActive ? theme.palette.background.surface1active : theme.palette.background.paper,
-      border: `1px solid ${isActive ? theme.palette.border.main : theme.palette.divider}`,
       display: "flex",
       alignItems: "center",
       justifyContent: "flex-start",
-      transition: "all 0.2s ease",
+      transition: "all 0.2s ease"
+    };
+    if (isAccentVariant) {
+      return Object.assign(Object.assign({}, baseStyles), {
+        borderRadius: 0,
+        backgroundColor: isActive ? theme.palette.background.surface1active : "transparent",
+        border: "none",
+        borderBottom: `1px solid ${theme.palette.divider}`,
+        "&:hover": {
+          backgroundColor: isDisabled ? "transparent" : isActive ? theme.palette.background.surface1active : theme.palette.action.hover
+        }
+      });
+    }
+    return Object.assign(Object.assign({}, baseStyles), {
+      borderRadius: theme.spacing(2),
+      backgroundColor: isActive ? theme.palette.background.surface1active : theme.palette.background.paper,
+      border: `1px solid ${isActive ? theme.palette.border.main : theme.palette.divider}`,
       "&:hover": {
         backgroundColor: isDisabled ? theme.palette.background.paper : isActive ? theme.palette.background.surface1active : theme.palette.action.hover,
         borderColor: isDisabled ? theme.palette.divider : theme.palette.border.main
       }
-    },
+    });
+  };
+  return {
+    button: getButtonStyles(),
     content: {
       display: "flex",
       alignItems: "center",
@@ -1880,6 +1994,15 @@ const useSidebarItemStyles = tss.withParams().create(function createSidebarItemS
       gap: theme.spacing(3),
       flex: 1
     },
+    iconWrapper: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      color: isActive ? theme.palette.background.defaultInverse : theme.palette.icon.tertiary,
+      "& svg": {
+        color: isActive ? theme.palette.background.defaultInverse : theme.palette.icon.tertiary
+      }
+    },
     iconPlaceholder: {
       width: theme.spacing(4)
     },
@@ -1924,7 +2047,7 @@ const LogsTable = memo(({
   const {
     classes,
     cx
-  } = useStyles$7({
+  } = useStyles$8({
     tableHeight
   });
   const theme = useTheme();
@@ -2189,7 +2312,7 @@ const LogsTable = memo(({
   });
 });
 LogsTable.displayName = "LogsTable";
-const useStyles$7 = tss.withParams().create(({
+const useStyles$8 = tss.withParams().create(({
   theme,
   tableHeight
 }) => ({
@@ -2303,7 +2426,7 @@ const LogFilterForm = memo(({
   var _a, _b, _c, _d;
   const {
     classes
-  } = useStyles$6();
+  } = useStyles$7();
   const {
     t
   } = useI18n();
@@ -2440,7 +2563,7 @@ const LogFilterForm = memo(({
   });
 });
 LogFilterForm.displayName = "LogFilterForm";
-const useStyles$6 = tss.create(({
+const useStyles$7 = tss.create(({
   theme
 }) => ({
   filterSection: {
@@ -2504,7 +2627,7 @@ const LogsPagination = memo(({
 }) => {
   const {
     classes
-  } = useStyles$5();
+  } = useStyles$6();
   const {
     t
   } = useI18n();
@@ -2543,7 +2666,7 @@ const LogsPagination = memo(({
   });
 });
 LogsPagination.displayName = "LogsPagination";
-const useStyles$5 = tss.create(({
+const useStyles$6 = tss.create(({
   theme
 }) => ({
   paginationSection: {
@@ -2593,7 +2716,7 @@ const LogsPanel = forwardRef((props, ref) => {
   const {
     classes,
     cx
-  } = useStyles$4();
+  } = useStyles$5();
   const [logs, setLogs] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -2728,7 +2851,7 @@ const LogsPanel = forwardRef((props, ref) => {
   });
 });
 LogsPanel.displayName = "LogsPanel";
-const useStyles$4 = tss.create(({
+const useStyles$5 = tss.create(({
   theme
 }) => ({
   root: {
@@ -2746,7 +2869,7 @@ const SettingsPage = function SettingsPage({
 }) {
   const {
     classes
-  } = useStyles$3({
+  } = useStyles$4({
     sidebarWidth
   });
   return jsxs(Box, {
@@ -2763,7 +2886,7 @@ const SettingsPage = function SettingsPage({
   });
 };
 SettingsPage.displayName = "SettingsPage";
-const useStyles$3 = tss.withParams().create(({
+const useStyles$4 = tss.withParams().create(({
   theme,
   sidebarWidth
 }) => ({
@@ -2805,7 +2928,7 @@ function FileUploadPanel({
 }) {
   const {
     classes
-  } = useStyles$2({
+  } = useStyles$3({
     maxHeight
   });
   const {
@@ -2857,7 +2980,7 @@ function FileUploadPanel({
   });
 }
 FileUploadPanel.displayName = "FileUploadPanel";
-const useStyles$2 = tss.withParams().create(({
+const useStyles$3 = tss.withParams().create(({
   theme,
   maxHeight
 }) => ({
@@ -2875,10 +2998,19 @@ const useStyles$2 = tss.withParams().create(({
     flexDirection: "column",
     gap: theme.spacing(1),
     maxHeight: maxHeight !== null && maxHeight !== void 0 ? maxHeight : "auto",
-    overflowY: maxHeight ? "auto" : "visible"
+    overflowY: maxHeight ? "auto" : "visible",
+    "& .MuiGrid-container": {
+      width: "100%"
+    },
+    "& .MuiGrid-root:nth-of-type(2)": {
+      flex: "1 1 0",
+      minWidth: 0
+    }
   }
 }));
 
+/** Padding between the circle edge and the SVG boundary */
+const CIRCLE_PADDING = 10;
 function StepProgressCircle({
   currentStep,
   totalSteps,
@@ -2894,7 +3026,7 @@ function StepProgressCircle({
   } = useTranslation();
   const {
     classes
-  } = useStyles$1({
+  } = useStyles$2({
     size,
     strokeWidth,
     variant
@@ -2904,7 +3036,7 @@ function StepProgressCircle({
     defaultValue: title !== null && title !== void 0 ? title : "Progress"
   });
   const percentage = totalSteps > 0 ? Math.round(currentStep / totalSteps * 100) : 0;
-  const radius = (size - strokeWidth) / 2 - 10;
+  const radius = (size - strokeWidth) / 2 - CIRCLE_PADDING;
   const circumference = 2 * Math.PI * radius;
   const strokeDashoffset = circumference - percentage / 100 * circumference;
   const center = size / 2;
@@ -2951,7 +3083,7 @@ function StepProgressCircle({
   });
 }
 StepProgressCircle.displayName = "StepProgressCircle";
-const useStyles$1 = tss.withParams().create(({
+const useStyles$2 = tss.withParams().create(({
   theme,
   size,
   strokeWidth,
@@ -3017,7 +3149,7 @@ const ActionButton = function ActionButton({
 }) {
   const {
     classes
-  } = useStyles({
+  } = useStyles$1({
     size
   });
   const {
@@ -3048,7 +3180,7 @@ const ActionButton = function ActionButton({
   });
 };
 ActionButton.displayName = "ActionButton";
-const useStyles = tss.withParams().create(({
+const useStyles$1 = tss.withParams().create(({
   theme,
   size
 }) => ({
@@ -3075,6 +3207,388 @@ const useStyles = tss.withParams().create(({
   }
 }));
 
+function useAutoScrollInput(enabled, options = {}) {
+  const {
+    targetPositionPercent = 25,
+    scrollableContainerSelector = '[role="dialog"] .MuiDialogContent-root',
+    scrollBehavior = "smooth"
+  } = options;
+  useEffect(() => {
+    if (!enabled) return;
+    function findScrollableParent(element) {
+      let parent = element.parentElement;
+      while (parent) {
+        const style = window.getComputedStyle(parent);
+        const hasOverflow = style.overflow === "auto" || style.overflow === "scroll" || style.overflowY === "auto" || style.overflowY === "scroll";
+        if (hasOverflow) {
+          return parent;
+        }
+        if (parent === document.body || parent === document.documentElement) {
+          break;
+        }
+        parent = parent.parentElement;
+      }
+      return null;
+    }
+    function handleFocus(event) {
+      const target = event.target;
+      if (!target || !(target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement)) {
+        return;
+      }
+      const targetRect = target.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+      const targetY = viewportHeight * (targetPositionPercent / 100);
+      const currentY = targetRect.top;
+      const scrollNeeded = currentY - targetY;
+      let scrollableContainer = null;
+      if (scrollableContainerSelector) {
+        const selectors = scrollableContainerSelector.split(",").map(selector => selector.trim());
+        for (const selector of selectors) {
+          const found = document.querySelector(selector);
+          if (found) {
+            scrollableContainer = found;
+            break;
+          }
+        }
+      }
+      if (!scrollableContainer) {
+        scrollableContainer = findScrollableParent(target);
+      }
+      if (scrollableContainer) {
+        const currentScrollTop = scrollableContainer.scrollTop;
+        const newScrollTop = currentScrollTop + scrollNeeded;
+        scrollableContainer.scrollTo({
+          top: newScrollTop,
+          behavior: scrollBehavior
+        });
+      }
+    }
+    document.addEventListener("focusin", handleFocus);
+    return () => {
+      document.removeEventListener("focusin", handleFocus);
+    };
+  }, [enabled, targetPositionPercent, scrollableContainerSelector, scrollBehavior]);
+}
+
+function ProductFormListComponent({
+  title = "Products",
+  items,
+  onDelete,
+  onSubmit,
+  getItemId,
+  fields,
+  maxHeight = 600
+}) {
+  const [editDialogOpen, setEditDialogOpen] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [deleteId, setDeleteId] = useState(null);
+  const [formData, setFormData] = useState({});
+  const {
+    t
+  } = useTranslation();
+  const {
+    classes
+  } = useStyles({
+    maxHeight
+  });
+  useAutoScrollInput(editDialogOpen);
+  function handleEditClick(item) {
+    setFormData(item);
+    setEditDialogOpen(true);
+  }
+  function handleEditClose() {
+    setEditDialogOpen(false);
+    setFormData({});
+  }
+  function handleDeleteClick(id) {
+    setDeleteId(id);
+    setDeleteDialogOpen(true);
+  }
+  function handleDeleteConfirm() {
+    return __awaiter(this, void 0, void 0, function* () {
+      if (deleteId) {
+        yield onDelete(deleteId);
+        setDeleteDialogOpen(false);
+        setDeleteId(null);
+      }
+    });
+  }
+  function handleDeleteCancel() {
+    setDeleteDialogOpen(false);
+    setDeleteId(null);
+  }
+  function handleFieldChange(name, value) {
+    setFormData(prev => Object.assign(Object.assign({}, prev), {
+      [name]: value
+    }));
+  }
+  function getFieldDisplayValue(field, value) {
+    var _a, _b;
+    if (field.type === "select") {
+      return ((_b = (_a = field.options) === null || _a === void 0 ? void 0 : _a.find(opt => opt.value === value)) === null || _b === void 0 ? void 0 : _b.label) || String(value);
+    }
+    return (value === null || value === void 0 ? void 0 : value.toString()) || "";
+  }
+  function renderItemContent(item) {
+    const mainField = fields[0];
+    const secondaryFields = fields.slice(1);
+    return jsxs(Box, {
+      className: classes.itemContent,
+      children: [jsx(Typography, {
+        variant: "heading18SemiBold",
+        className: classes.itemTitle,
+        children: getFieldDisplayValue(mainField, item[mainField.name])
+      }), jsx(Typography, {
+        variant: "uiText14Regular",
+        color: "textSecondary",
+        className: classes.itemSubtitle,
+        children: secondaryFields.map(field => `${field.label}: ${getFieldDisplayValue(field, item[field.name])}`).join(" | ")
+      })]
+    });
+  }
+  function renderField(field) {
+    var _a;
+    const fieldValue = formData[field.name];
+    if (field.type === "select") {
+      const menuItems = ((_a = field.options) === null || _a === void 0 ? void 0 : _a.map(opt => ({
+        value: opt.value,
+        displayText: opt.label
+      }))) || [];
+      return jsx(VentionSelect, {
+        labelText: field.label,
+        value: fieldValue || "",
+        onChange: event => {
+          handleFieldChange(field.name, event.target.value);
+        },
+        menuItems: menuItems,
+        size: "large",
+        variant: "outlined"
+      }, field.name);
+    }
+    return jsx(VentionTextInput, {
+      label: field.label,
+      value: fieldValue !== null && fieldValue !== void 0 ? fieldValue : "",
+      onChange: event => {
+        handleFieldChange(field.name, field.type === "number" ? Number(event.target.value) : event.target.value);
+      },
+      type: field.type === "number" ? "number" : "text",
+      fullWidth: true,
+      size: "large",
+      inputProps: field.type === "number" ? {
+        min: field.min,
+        max: field.max
+      } : undefined
+    }, field.name);
+  }
+  const isEditing = Object.keys(formData).length > 0 && "id" in formData;
+  return jsxs(Box, {
+    className: classes.container,
+    children: [jsxs(Box, {
+      className: classes.header,
+      children: [jsx(Typography, {
+        variant: "heading24SemiBold",
+        children: title
+      }), jsx(VentionButton, {
+        onClick: () => {
+          setFormData({});
+          setEditDialogOpen(true);
+        },
+        size: "large",
+        variant: "filled",
+        startIcon: jsx(VentionIcon, {
+          type: "plus",
+          size: 24,
+          color: "white"
+        }),
+        children: t("productFormList.add")
+      })]
+    }), jsx(Box, {
+      className: classes.listContainer,
+      children: items.length === 0 ? jsx(Box, {
+        className: classes.emptyState,
+        children: jsx(Typography, {
+          variant: "uiText14Regular",
+          color: "textSecondary",
+          children: t("productFormList.emptyState", {
+            defaultValue: "No items yet. Click Add to create one."
+          })
+        })
+      }) : jsx(List, {
+        children: items.map(item => jsxs(ListItem, {
+          className: classes.listItem,
+          children: [renderItemContent(item), jsxs(Box, {
+            className: classes.actions,
+            children: [jsx(IconButton, {
+              onClick: () => handleEditClick(item),
+              size: "medium",
+              children: jsx(VentionIcon, {
+                type: "edit",
+                size: 24
+              })
+            }), jsx(IconButton, {
+              onClick: () => handleDeleteClick(getItemId(item)),
+              size: "medium",
+              children: jsx(VentionIcon, {
+                type: "trash",
+                size: 24
+              })
+            })]
+          })]
+        }, getItemId(item)))
+      })
+    }), jsxs(Dialog, {
+      open: editDialogOpen,
+      onClose: handleEditClose,
+      maxWidth: "sm",
+      fullWidth: true,
+      children: [jsx(DialogTitle, {
+        children: jsx(Typography, {
+          variant: "heading18SemiBold",
+          textAlign: "center",
+          children: isEditing ? t("productFormList.modify") : t("productFormList.new")
+        })
+      }), jsx(DialogContent, {
+        className: classes.dialogContent,
+        children: jsx(Box, {
+          className: classes.dialogForm,
+          children: fields.map(field => renderField(field))
+        })
+      }), jsxs(DialogActions, {
+        className: classes.dialogActions,
+        children: [jsx(VentionButton, {
+          onClick: handleEditClose,
+          variant: "outline",
+          size: "large",
+          children: t("productFormList.cancel")
+        }), jsx(VentionButton, {
+          onClick: () => __awaiter(this, void 0, void 0, function* () {
+            if (yield onSubmit(formData)) {
+              handleEditClose();
+            }
+          }),
+          variant: "filled",
+          size: "large",
+          children: isEditing ? t("productFormList.save") : t("productFormList.create")
+        })]
+      })]
+    }), jsxs(Dialog, {
+      open: deleteDialogOpen,
+      onClose: handleDeleteCancel,
+      maxWidth: "xs",
+      fullWidth: true,
+      children: [jsx(DialogTitle, {
+        children: jsx(Typography, {
+          variant: "heading18SemiBold",
+          textAlign: "center",
+          children: t("productFormList.delete")
+        })
+      }), jsx(DialogContent, {
+        children: jsx(Typography, {
+          variant: "uiText14Regular",
+          className: classes.deleteMessage,
+          children: t("productFormList.deleteConfirmation")
+        })
+      }), jsxs(DialogActions, {
+        className: classes.dialogActions,
+        children: [jsx(VentionButton, {
+          onClick: handleDeleteCancel,
+          variant: "outline",
+          size: "large",
+          children: t("productFormList.cancel")
+        }), jsx(VentionButton, {
+          onClick: handleDeleteConfirm,
+          variant: "destructive",
+          size: "large",
+          children: t("productFormList.delete")
+        })]
+      })]
+    })]
+  });
+}
+ProductFormListComponent.displayName = "ProductFormList";
+const ProductFormList = memo(ProductFormListComponent);
+const useStyles = tss.withParams().create(({
+  theme,
+  maxHeight
+}) => ({
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    flex: 1,
+    minWidth: 0
+  },
+  header: {
+    flexShrink: 0,
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: theme.spacing(3)
+  },
+  listContainer: {
+    flexGrow: 1,
+    overflowY: "auto",
+    maxHeight
+  },
+  listItem: {
+    backgroundColor: theme.palette.background.paper,
+    borderRadius: theme.shape.borderRadius,
+    marginBottom: theme.spacing(2),
+    alignItems: "center",
+    overflow: "hidden",
+    display: "flex",
+    width: "100%"
+  },
+  itemContent: {
+    minWidth: 0,
+    flex: 1,
+    overflow: "hidden",
+    paddingRight: theme.spacing(2)
+  },
+  itemTitle: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    width: "100%"
+  },
+  itemSubtitle: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    width: "100%"
+  },
+  actions: {
+    display: "flex",
+    alignItems: "center",
+    flexShrink: 0,
+    gap: theme.spacing(1)
+  },
+  emptyState: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: theme.spacing(4),
+    flex: 1
+  },
+  dialogContent: {
+    borderTop: `1px solid ${theme.palette.divider}`,
+    borderBottom: `1px solid ${theme.palette.divider}`
+  },
+  dialogForm: {
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(3),
+    paddingTop: theme.spacing(2)
+  },
+  dialogActions: {
+    padding: theme.spacing(2),
+    gap: theme.spacing(2)
+  },
+  deleteMessage: {
+    paddingTop: theme.spacing(1)
+  }
+}));
+
 var UserLevel;
 (function (UserLevel) {
   UserLevel[UserLevel["Operator"] = 1] = "Operator";
@@ -3141,4 +3655,4 @@ function getApiBaseUrl(options) {
   return getExecutionEngineHttpUrl(processName);
 }
 
-export { ActionButton, FileUploadPanel, I18nProvider, I18nSettings, LogFilterForm, LogsPagination, LogsPanel, LogsTable, NavigationBar, NavigationConfirmationModal, PasswordProtectionModal, SettingsPage, Sidebar, StatusTopBar, StepProgressCircle, TimeLabel, UserLevel, Z_INDEX, closeCustomUi, formatDateToInput, getApiBaseUrl, getAvailableTimezones, getLanguageDisplayName, getSupportedLanguages, hasSufficientLevel, isOnEdge, isTouchScreenDevice, navigateControlCenter, parseLogDate, useI18n };
+export { ActionButton, FileUploadPanel, I18nProvider, I18nSettings, LogFilterForm, LogsPagination, LogsPanel, LogsTable, NavigationBar, NavigationConfirmationModal, PasswordProtectionModal, ProductFormList, SettingsPage, Sidebar, StatusTopBar, StepProgressCircle, TimeLabel, UserLevel, Z_INDEX, closeCustomUi, formatDateToInput, getApiBaseUrl, getAvailableTimezones, getLanguageDisplayName, getSupportedLanguages, hasSufficientLevel, isOnEdge, isTouchScreenDevice, navigateControlCenter, parseLogDate, useAutoScrollInput, useI18n };