@vention/machine-apps-components 1.30.27 → 1.31.0

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, List, ListItem, Dialog, DialogTitle, DialogContent, DialogActions, CircularProgress, Alert, LinearProgress } from '@mui/material';
-import { VentionSelect, VentionModalBase, VentionIcon, VentionTextInput, COLORS, VentionButton, VentionStatusIndicator, VentionSpinner, VentionAlert, VentionDropZone, VentionUploadFile, VentionIconButton } from '@vention/machine-ui';
+import { Box, useTheme, Typography, Button, InputAdornment, IconButton, Stack, TableContainer, Paper, Table, TableHead, TableRow, TableCell, TableBody, List, ListItem, Dialog, DialogTitle, DialogContent, DialogActions, CircularProgress, Alert, LinearProgress } from '@mui/material';
+import { VentionSelect, VentionModalBase, VentionIcon, VentionTextInput, COLORS, VentionButton, VentionStatusIndicator, VentionIconButton, VentionCounter, VentionStatusDot, VentionSpinner, VentionAlert, VentionDropZone, VentionUploadFile } from '@vention/machine-ui';
 import { tss } from 'tss-react/mui';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useMqttSubscription } from '@vention/machine-logic-ui-sdk';
@@ -1789,7 +1789,9 @@ var enTranslations = {
     },
     bar: {
       controlCenter: "Control Center",
-      support: "Support"
+      support: "Support",
+      settings: "Settings",
+      notifications: "Notifications"
     },
     modal: {
       exit: {
@@ -1966,7 +1968,9 @@ var frTranslations = {
     },
     bar: {
       controlCenter: "Centre de contrôle",
-      support: "Support"
+      support: "Support",
+      settings: "Paramètres",
+      notifications: "Notifications"
     },
     modal: {
       exit: {
@@ -2143,7 +2147,9 @@ var deTranslations = {
     },
     bar: {
       controlCenter: "Kontrollzentrum",
-      support: "Support"
+      support: "Support",
+      settings: "Einstellungen",
+      notifications: "Benachrichtigungen"
     },
     modal: {
       exit: {
@@ -2320,7 +2326,9 @@ var esTranslations = {
     },
     bar: {
       controlCenter: "Centro de control",
-      support: "Soporte"
+      support: "Soporte",
+      settings: "Configuración",
+      notifications: "Notificaciones"
     },
     modal: {
       exit: {
@@ -3193,7 +3201,7 @@ const I18nSettings = function I18nSettings({
   const {
     classes,
     cx
-  } = useStyles$k({
+  } = useStyles$m({
     layout
   });
   const {
@@ -3283,7 +3291,7 @@ const I18nSettings = function I18nSettings({
   });
 };
 I18nSettings.displayName = "I18nSettings";
-const useStyles$k = tss.withParams().create(({
+const useStyles$m = tss.withParams().create(({
   theme,
   layout
 }) => ({
@@ -5744,7 +5752,7 @@ const NavigationConfirmationModal = function NavigationConfirmationModal(props)
   } = props;
   const {
     classes
-  } = useStyles$j();
+  } = useStyles$l();
   const {
     t
   } = useI18n();
@@ -5807,7 +5815,7 @@ const NavigationConfirmationModal = function NavigationConfirmationModal(props)
     })
   });
 };
-const useStyles$j = tss.create(({
+const useStyles$l = tss.create(({
   theme
 }) => ({
   modalContent: {
@@ -5871,7 +5879,7 @@ const PasswordProtectionModal = function PasswordProtectionModal(props) {
   const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
   const {
     classes
-  } = useStyles$i();
+  } = useStyles$k();
   const {
     t
   } = useI18n();
@@ -5995,7 +6003,7 @@ const PasswordProtectionModal = function PasswordProtectionModal(props) {
     })]
   });
 };
-const useStyles$i = tss.create(({
+const useStyles$k = tss.create(({
   theme
 }) => ({
   modalContent: {
@@ -6067,7 +6075,7 @@ const NavigationBarItem = function NavigationBarItem(props) {
   const {
     classes,
     cx
-  } = useStyles$h();
+  } = useStyles$j();
   const {
     t
   } = useI18n();
@@ -6100,7 +6108,7 @@ const NavigationBarItem = function NavigationBarItem(props) {
     })]
   });
 };
-const useStyles$h = tss.create(({
+const useStyles$j = tss.create(({
   theme
 }) => ({
   tabButton: {
@@ -6171,7 +6179,7 @@ const NavigationBarRoot = function NavigationBarRoot(props) {
   const theme = useTheme();
   const {
     classes
-  } = useStyles$g({
+  } = useStyles$i({
     variant
   });
   const {
@@ -6312,7 +6320,7 @@ const NavigationBarRoot = function NavigationBarRoot(props) {
     })]
   });
 };
-const useStyles$g = tss.withParams().create(({
+const useStyles$i = tss.withParams().create(({
   theme,
   variant
 }) => ({
@@ -6467,7 +6475,7 @@ const StatusTopBarButton = function StatusTopBarButton(props) {
   } = props;
   const {
     classes
-  } = useStyles$f();
+  } = useStyles$h();
   if (!visible) return null;
   const getFadedColor = function getFadedColor(color, opacity = 1) {
     return `${color}${Math.round(opacity * 255).toString(16).padStart(2, "0")}`;
@@ -6513,7 +6521,7 @@ const StatusTopBarButton = function StatusTopBarButton(props) {
     })
   });
 };
-const useStyles$f = tss.create(({
+const useStyles$h = tss.create(({
   theme
 }) => ({
   actionButton: {
@@ -6549,7 +6557,7 @@ const StatusTopBarRoot = function StatusTopBarRoot(props) {
   } = props;
   const {
     classes
-  } = useStyles$e({
+  } = useStyles$g({
     variant
   });
   const visibleButtons = buttonConfigs.filter(config => config.visible !== false);
@@ -6576,7 +6584,7 @@ const StatusTopBarRoot = function StatusTopBarRoot(props) {
     })]
   });
 };
-const useStyles$e = tss.withParams().create(({
+const useStyles$g = tss.withParams().create(({
   theme,
   variant
 }) => ({
@@ -6619,6 +6627,297 @@ const useStyles$e = tss.withParams().create(({
 }));
 const StatusTopBar = StatusTopBarRoot;
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+/**
+ * A Stack whose padding tuple means [vertical, horizontal]. Use it for layout and keep colors in styles.
+ */
+const FlexContainer = function FlexContainer(props) {
+  const {
+      padding = 0
+    } = props,
+    stackProps = __rest(props, ["padding"]);
+  const [paddingY, paddingX] = Array.isArray(padding) ? padding : [padding, padding];
+  return jsx(Stack, Object.assign({
+    paddingY: paddingY,
+    paddingX: paddingX
+  }, stackProps));
+};
+
+const BottomNavBarItem = function BottomNavBarItem(props) {
+  const {
+    icon,
+    label,
+    onClick,
+    selected = false,
+    disabled = false
+  } = props;
+  const {
+    classes,
+    cx
+  } = useStyles$f();
+  const {
+    t
+  } = useI18n();
+  return jsxs(Button, {
+    disableRipple: true,
+    disabled: disabled,
+    onClick: onClick,
+    "aria-current": selected ? "page" : undefined,
+    className: cx(classes.tab, {
+      [classes.selected]: selected,
+      [classes.disabled]: disabled
+    }),
+    children: [jsx(FlexContainer, {
+      alignItems: "center",
+      justifyContent: "center",
+      width: 28,
+      height: 28,
+      children: icon
+    }), jsx(Typography, {
+      variant: "hmiText20SemiBold",
+      fontWeight: selected ? 600 : 500,
+      noWrap: true,
+      children: t(label, {
+        defaultValue: label
+      })
+    })]
+  });
+};
+const useStyles$f = tss.create(({
+  theme
+}) => ({
+  tab: {
+    gap: theme.spacing(2),
+    height: "100%",
+    padding: theme.spacing(0, 8),
+    borderRadius: 3,
+    color: theme.palette.text.primary,
+    textTransform: "none",
+    transition: "background-color 0.2s",
+    "&:hover": {
+      backgroundColor: theme.palette.background.surface2active
+    },
+    "&.Mui-disabled": {
+      color: theme.palette.text.primary
+    }
+  },
+  selected: {
+    backgroundColor: theme.palette.background.default,
+    boxShadow: "0px 1px 2px rgba(2, 6, 23, 0.05)",
+    "&:hover": {
+      backgroundColor: theme.palette.background.default
+    }
+  },
+  disabled: {
+    opacity: 0.5,
+    cursor: "not-allowed"
+  }
+}));
+
+const IconBadgeButton = function IconBadgeButton(props) {
+  const {
+    icon,
+    ariaLabel,
+    onClick,
+    count = 0,
+    disabled = false,
+    className,
+    "data-testid": dataTestId
+  } = props;
+  return jsxs(FlexContainer, {
+    position: "relative",
+    flexShrink: 0,
+    className: className,
+    children: [jsx(VentionIconButton, {
+      variant: "outline",
+      size: "xx-large",
+      "aria-label": ariaLabel,
+      onClick: onClick,
+      disabled: disabled,
+      "data-testid": dataTestId,
+      children: icon
+    }), count > 0 && jsx(Box, {
+      position: "absolute",
+      top: 16,
+      left: 48,
+      sx: {
+        pointerEvents: "none"
+      },
+      children: jsx(VentionCounter, {
+        color: "red",
+        variant: "filled",
+        size: "small",
+        value: count,
+        "data-testid": dataTestId && `${dataTestId}-counter`
+      })
+    })]
+  });
+};
+
+const actionIconSize = 40;
+const BottomNavBarRoot = function BottomNavBarRoot(props) {
+  const {
+    children,
+    status,
+    onSettingsClick,
+    onNotificationsClick,
+    notificationCount = 0,
+    settingsIcon,
+    notificationsIcon,
+    actions,
+    showSettingsButton = true,
+    showNotificationsButton = true,
+    settingsDisabled = false,
+    notificationsDisabled = false,
+    className
+  } = props;
+  const {
+    classes,
+    theme
+  } = useStyles$e();
+  const {
+    t
+  } = useI18n();
+  return (
+    // Transparent so the bar can sit on different surface colors
+    jsxs(FlexContainer, {
+      component: "footer",
+      direction: "row",
+      alignItems: "center",
+      gap: 11,
+      padding: [3, 5],
+      width: "100%",
+      flexShrink: 0,
+      boxSizing: "border-box",
+      className: className,
+      children: [jsxs(FlexContainer, {
+        direction: "row",
+        alignItems: "center",
+        gap: 4,
+        flex: "1 0 0",
+        minWidth: 0,
+        children: [showSettingsButton && jsx(IconBadgeButton, {
+          ariaLabel: t("navigation.bar.settings", {
+            defaultValue: "Settings"
+          }),
+          icon: settingsIcon !== null && settingsIcon !== void 0 ? settingsIcon : jsx(VentionIcon, {
+            type: "settings",
+            size: actionIconSize,
+            color: theme.palette.text.primary
+          }),
+          onClick: onSettingsClick,
+          disabled: settingsDisabled,
+          "data-testid": "bottom-nav-bar-settings"
+        }), showNotificationsButton && jsx(IconBadgeButton, {
+          ariaLabel: t("navigation.bar.notifications", {
+            defaultValue: "Notifications"
+          }),
+          icon: notificationsIcon !== null && notificationsIcon !== void 0 ? notificationsIcon : jsx(VentionIcon, {
+            type: "file-description",
+            size: actionIconSize,
+            color: theme.palette.text.primary
+          }),
+          onClick: onNotificationsClick,
+          count: notificationCount,
+          disabled: notificationsDisabled,
+          "data-testid": "bottom-nav-bar-notifications"
+        }), actions]
+      }), jsx(Box, {
+        component: "nav",
+        display: "grid",
+        gridAutoFlow: "column",
+        gridAutoColumns: "1fr",
+        gap: "1px",
+        flexShrink: 0,
+        className: classes.tabs,
+        children: children
+      }), jsx(FlexContainer, {
+        direction: "row",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        flex: "1 0 0",
+        minWidth: 0,
+        children: status &&
+        // The medium status dot has 6px of padding around the dot, so 10px + 6px gives the 16px design gap
+        jsxs(FlexContainer, {
+          direction: "row",
+          alignItems: "center",
+          gap: "10px",
+          padding: [0, 5],
+          height: theme.spacing(10),
+          "data-testid": "bottom-nav-bar-status",
+          children: [jsx(VentionStatusDot, {
+            dotColor: status.dotColor,
+            size: "medium"
+          }), jsx(Typography, {
+            variant: "heading18SemiBold",
+            color: "text.primary",
+            noWrap: true,
+            children: status.label
+          })]
+        })
+      })]
+    })
+  );
+};
+const useStyles$e = tss.create(({
+  theme
+}) => ({
+  tabs: {
+    height: theme.spacing(12),
+    padding: 2,
+    boxSizing: "border-box",
+    borderRadius: 6,
+    backgroundColor: theme.palette.background.surface2
+  }
+}));
+const BottomNavBar = Object.assign(BottomNavBarRoot, {
+  Item: BottomNavBarItem
+});
+
 const Sidebar = function Sidebar(props) {
   const {
     items,
@@ -7674,38 +7973,6 @@ exportWebAssemblyErrorCauseWrapper('RuntimeError', function (init) {
   return function RuntimeError(message) { return apply(init, this, arguments); };
 });
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
-
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
 const LogsPagination = /*#__PURE__*/memo(({
   currentPage,
   totalPages,
@@ -11811,4 +12078,4 @@ function getApiBaseUrl(options) {
   return getExecutionEngineHttpUrl(processName);
 }
 
-export { ActionButton, CalibrationEnvironmentPage, CalibrationFooter, CalibrationHandEyePage, ENVIRONMENT_PROGRESS_TOPIC, FileUploadPanel, HAND_EYE_PROGRESS_TOPIC, I18nProvider, I18nSettings, LogFilterForm, LogsPagination, LogsPanel, LogsTable, NavigationBar, NavigationConfirmationModal, PasswordProtectionModal, PressButton, ProductFormList, SettingsPage, Sidebar, StatusTopBar, StepProgressCircle, TimeLabel, UserLevel, Z_INDEX, closeCustomUi, formatDateToInput, getApiBaseUrl, getAvailableTimezones, getLanguageDisplayName, getSupportedLanguages, hasSufficientLevel, isOnEdge, isTouchScreenDevice, navigateControlCenter, parseLogDate, useAutoScrollInput, useI18n };
+export { ActionButton, BottomNavBar, CalibrationEnvironmentPage, CalibrationFooter, CalibrationHandEyePage, ENVIRONMENT_PROGRESS_TOPIC, FileUploadPanel, FlexContainer, HAND_EYE_PROGRESS_TOPIC, I18nProvider, I18nSettings, IconBadgeButton, LogFilterForm, LogsPagination, LogsPanel, LogsTable, NavigationBar, NavigationConfirmationModal, PasswordProtectionModal, PressButton, ProductFormList, SettingsPage, Sidebar, StatusTopBar, StepProgressCircle, TimeLabel, UserLevel, Z_INDEX, closeCustomUi, formatDateToInput, getApiBaseUrl, getAvailableTimezones, getLanguageDisplayName, getSupportedLanguages, hasSufficientLevel, isOnEdge, isTouchScreenDevice, navigateControlCenter, parseLogDate, useAutoScrollInput, useI18n };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vention/machine-apps-components",
-  "version": "1.30.27",
+  "version": "1.31.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/VentionCo/machine-cloud.git"

package/src/i18n/locales/de.d.ts

@@ -75,6 +75,8 @@ declare const _default: {
         bar: {
             controlCenter: string;
             support: string;
+            settings: string;
+            notifications: string;
         };
         modal: {
             exit: {

package/src/i18n/locales/en.d.ts

@@ -75,6 +75,8 @@ declare const _default: {
         bar: {
             controlCenter: string;
             support: string;
+            settings: string;
+            notifications: string;
         };
         modal: {
             exit: {

package/src/i18n/locales/es.d.ts

@@ -75,6 +75,8 @@ declare const _default: {
         bar: {
             controlCenter: string;
             support: string;
+            settings: string;
+            notifications: string;
         };
         modal: {
             exit: {

package/src/i18n/locales/fr.d.ts

@@ -75,6 +75,8 @@ declare const _default: {
         bar: {
             controlCenter: string;
             support: string;
+            settings: string;
+            notifications: string;
         };
         modal: {
             exit: {

package/src/index.d.ts

@@ -8,6 +8,10 @@ export * from "./lib/navigation-bar/navigation-confirmation-modal";
 export * from "./lib/navigation-bar/password-protection-modal";
 export * from "./lib/navigation-bar/time-label";
 export * from "./lib/status-top-bar/status-top-bar";
+export * from "./lib/bottom-nav-bar/bottom-nav-bar";
+export type { BottomNavBarItemProps } from "./lib/bottom-nav-bar/bottom-nav-bar-item";
+export * from "./lib/bottom-nav-bar/icon-badge-button";
+export * from "./lib/flex-container/flex-container";
 export * from "./lib/sidebar/sidebar";
 export type { SidebarItem, SidebarProps, SidebarVariant } from "./lib/sidebar/sidebar";
 export * from "./lib/logs/logs-table";

package/src/lib/bottom-nav-bar/bottom-nav-bar-item.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+export interface BottomNavBarItemProps {
+    label: string;
+    icon: ReactNode;
+    onClick: () => void;
+    /** Marks the item as the current page */
+    selected?: boolean;
+    disabled?: boolean;
+}
+export declare const BottomNavBarItem: (props: BottomNavBarItemProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/bottom-nav-bar/bottom-nav-bar.d.ts

@@ -0,0 +1,29 @@
+import { VentionStatusDotColors } from "@vention/machine-ui";
+import { ReactNode } from "react";
+export interface BottomNavBarStatus {
+    label: string;
+    dotColor: VentionStatusDotColors;
+}
+export interface BottomNavBarProps {
+    /** BottomNavBar.Item elements rendered as tabs in the center section */
+    children: ReactNode;
+    status?: BottomNavBarStatus;
+    onSettingsClick?: () => void;
+    onNotificationsClick?: () => void;
+    notificationCount?: number;
+    /** Replaces the default settings icon */
+    settingsIcon?: ReactNode;
+    /** Replaces the default notifications icon */
+    notificationsIcon?: ReactNode;
+    /** Extra buttons rendered after the settings and notifications buttons, e.g. IconBadgeButton elements */
+    actions?: ReactNode;
+    showSettingsButton?: boolean;
+    showNotificationsButton?: boolean;
+    settingsDisabled?: boolean;
+    notificationsDisabled?: boolean;
+    className?: string;
+}
+export declare const BottomNavBar: ((props: BottomNavBarProps) => import("react/jsx-runtime").JSX.Element) & {
+    Item: (props: import("./bottom-nav-bar-item").BottomNavBarItemProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default BottomNavBar;

package/src/lib/bottom-nav-bar/icon-badge-button.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+export interface IconBadgeButtonProps {
+    icon: ReactNode;
+    ariaLabel: string;
+    onClick?: () => void;
+    /** Shows a red counter on the icon when greater than 0 */
+    count?: number;
+    disabled?: boolean;
+    className?: string;
+    "data-testid"?: string;
+}
+export declare const IconBadgeButton: (props: IconBadgeButtonProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/flex-container/flex-container.d.ts

@@ -0,0 +1,9 @@
+import { StackProps } from "@mui/material";
+export type FlexContainerProps = Omit<StackProps, "padding" | "bgcolor" | "backgroundColor"> & {
+    /** Theme spacing index, or [vertical, horizontal] like the CSS shorthand */
+    padding?: number | [number, number];
+};
+/**
+ * A Stack whose padding tuple means [vertical, horizontal]. Use it for layout and keep colors in styles.
+ */
+export declare const FlexContainer: (props: FlexContainerProps) => import("react/jsx-runtime").JSX.Element;