@geotab/zenith 3.11.1 → 3.12.0-beta.0

package/esm/icons/iconCornerLeftDown.js

@@ -1,10 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useIsRTL } from "../utils/localization/useIsRTL";
 export const IconCornerLeftDown = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = useId();
-    const isRTL = useIsRTL();
-    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 25", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconCornerLeftDown", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M21 4.87a1 1 0 01-1 1H9v12.585l2.293-2.292a1 1 0 011.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.415L7 18.456V4.87a1 1 0 011-1h12a1 1 0 011 1z" })] }));
 };

package/esm/icons/iconCornerLeftUp.js

@@ -1,10 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useIsRTL } from "../utils/localization/useIsRTL";
 export const IconCornerLeftUp = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = useId();
-    const isRTL = useIsRTL();
-    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 25", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconCornerLeftUp", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.293 4.163a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L9 7.284V19.87h11a1 1 0 110 2H8a1 1 0 01-1-1V7.284L4.707 9.577a1 1 0 01-1.414-1.414l4-4z" })] }));
 };

package/esm/icons/iconCornerRightDown.js

@@ -1,10 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useIsRTL } from "../utils/localization/useIsRTL";
 export const IconCornerRightDown = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = useId();
-    const isRTL = useIsRTL();
-    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 25", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconCornerRightDown", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3 4.87a1 1 0 001 1h11v12.585l-2.293-2.292a1 1 0 00-1.414 1.414l4 4a1 1 0 001.414 0l4-4a1 1 0 00-1.414-1.415L17 18.456V4.87a1 1 0 00-1-1H4a1 1 0 00-1 1z" })] }));
 };

package/esm/icons/iconCornerRightUp.js

@@ -1,10 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useIsRTL } from "../utils/localization/useIsRTL";
 export const IconCornerRightUp = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = useId();
-    const isRTL = useIsRTL();
-    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 25", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconCornerRightUp", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.293 4.163a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L17 7.284V20.87a1 1 0 01-1 1H4a1 1 0 110-2h11V7.284l-2.293 2.293a1 1 0 11-1.414-1.414l4-4z" })] }));
 };

package/esm/icons/iconCornerUpLeft.js

@@ -1,10 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useIsRTL } from "../utils/localization/useIsRTL";
 export const IconCornerUpLeft = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = useId();
-    const isRTL = useIsRTL();
-    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconCornerUpLeft", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", d: "M20 20a1 1 0 0 1-1-1v-9H6.414l2.293 2.293a1 1 0 1 1-1.414 1.414l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 0 1 1.414 1.414L6.414 8H20a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1", clipRule: "evenodd" })] }));
 };

package/esm/icons/iconCornerUpRight.js

@@ -1,10 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useIsRTL } from "../utils/localization/useIsRTL";
 export const IconCornerUpRight = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = useId();
-    const isRTL = useIsRTL();
-    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 25", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconCornerUpRight", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4 20.87a1 1 0 001-1v-9h12.586l-2.293 2.293a1 1 0 001.414 1.414l4-4a1 1 0 000-1.414l-4-4a1 1 0 10-1.414 1.414l2.293 2.293H4a1 1 0 00-1 1v10a1 1 0 001 1z" })] }));
 };

package/esm/index.d.ts

@@ -144,6 +144,7 @@ export { OneColumnGrid } from "./formLayout/components/oneColumnGrid";
 export { TwoColumnsGrid } from "./formLayout/components/twoColumnsGrid";
 export { FormLayout } from "./formLayout/formLayout";
 export { useColumns } from "./formLayout/hooks/useColumns";
+export { type IUseErrorSummaryConfig, useErrorSummary } from "./formLayout/hooks/useErrorSummary";
 export { type IUseFormButtonsProps, useFormButtons } from "./formLayout/hooks/useFormButtons";
 export { useLayoutColumns } from "./formLayout/hooks/useLayoutColumns";
 export { type TFormLayoutColumns, type TFormLayoutMode, type IFormLayout, type IFormLayoutWithStepper, type TFormLayout, type IDefaultColumns } from "./formLayout/types";

package/esm/index.js

@@ -137,6 +137,7 @@ export { OneColumnGrid } from "./formLayout/components/oneColumnGrid";
 export { TwoColumnsGrid } from "./formLayout/components/twoColumnsGrid";
 export { FormLayout } from "./formLayout/formLayout";
 export { useColumns } from "./formLayout/hooks/useColumns";
+export { useErrorSummary } from "./formLayout/hooks/useErrorSummary";
 export { useFormButtons } from "./formLayout/hooks/useFormButtons";
 export { useLayoutColumns } from "./formLayout/hooks/useLayoutColumns";
 export { applyFirstColumn } from "./formLayout/utils/applyGridPropsTwoColumns/applyFirstColumn";

package/esm/lineChartMini/lineChartMini.js

@@ -18,6 +18,7 @@ import { getDefaultDatasetStyle } from "../lineChart/utils";
 import { useDrive } from "../utils/theme/useDrive";
 import { useMobile } from "../commonHelpers/hooks/useMobile";
 import { themeContext } from "../utils/theme/themeContext";
+import { useIsRTL } from "../utils/localization/useIsRTL";
 import { AccessibleChart } from "../chart/accessibleChart/accessibleChart";
 ChartJS.defaults.font = {
     family: "Roboto",
@@ -30,17 +31,26 @@ const defaultGridStyle = {
 const defaultGridBorderStyle = {
     display: false
 };
-const defaultOptions = {
+const getDefaultOptions = (isRtl) => ({
     responsive: true,
     maintainAspectRatio: false,
+    layout: {
+        padding: {
+            left: isRtl ? 16 : 0,
+            right: isRtl ? 0 : 16
+        }
+    },
     scales: {
         x: {
             grid: defaultGridStyle,
-            border: defaultGridBorderStyle
+            border: defaultGridBorderStyle,
+            reverse: isRtl,
+            offset: false
         },
         y: {
             grid: defaultGridStyle,
             border: defaultGridBorderStyle,
+            position: isRtl ? "right" : "left",
             ticks: {
                 display: false
             }
@@ -54,7 +64,7 @@ const defaultOptions = {
             enabled: false
         }
     }
-};
+});
 export const LineChartMini = (_a) => {
     var _b, _c;
     var { data, options = {} } = _a, rest = __rest(_a, ["data", "options"]);
@@ -62,6 +72,7 @@ export const LineChartMini = (_a) => {
     const isMobile = useMobile();
     const memoizedFontSize = useMemo(() => (isDrive ? (isMobile ? 14 : 16) : 12), [isDrive, isMobile]);
     const { dark } = useContext(themeContext);
+    const isRtl = useIsRTL();
     useEffect(() => {
         ChartJS.defaults.font = {
             family: "Roboto",
@@ -70,6 +81,7 @@ export const LineChartMini = (_a) => {
         ChartJS.defaults.color = dark ? "#FFFFFF" : "#1F2833";
     }, [memoizedFontSize, dark]);
     const adaptedData = Object.assign({}, data);
+    const defaultOptions = useMemo(() => getDefaultOptions(isRtl), [isRtl]);
     const adaptedOptions = deepMerge(defaultOptions, options);
     if (((_b = adaptedData.labels) === null || _b === void 0 ? void 0 : _b.length) === 2) {
         const maxLabelsCount = Math.max(...data.datasets.map(ds => ds.data.length));

package/esm/list/itemData/itemDataInternal.js

@@ -6,6 +6,8 @@ import { useLanguage } from "../../utils/localization/useLanguage";
 import { Button } from "../../button/button";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { IconChevronRight } from "../../icons/iconChevronRight";
+import { IconChevronLeft } from "../../icons/iconChevronLeft";
+import { useDirectionalIcon } from "../../utils/localization/useDirectionalIcon";
 import { IconDotVertical } from "../../icons/iconDotVertical";
 import { Menu } from "../../menu/menu";
 import { isActiveElement } from "../utils/isActiveElement";
@@ -37,7 +39,7 @@ injectString("tr", "More", "Di\u011Fer");
 injectString("zh-Hans", "More", "\u66F4\u591A");
 injectString("zh-TW", "More", "\u66F4\u591A");
 injectString("ro-RO", "More", "Mai multe");
-injectString("ar-SA", "More", "\u0627\u0644\u0645\u0632\u064A\u062F");
+injectString("ar", "More", "\u0627\u0644\u0645\u0632\u064A\u062F");
 injectString("cs", "Open", "Otev\u0159\xEDt");
 injectString("da-DK", "Open", "\xC5bn");
 injectString("de", "Open", "Offen");
@@ -64,7 +66,7 @@ injectString("tr", "Open", "A\xE7");
 injectString("zh-Hans", "Open", "\u6253\u5F00");
 injectString("zh-TW", "Open", "\u958B\u555F");
 injectString("ro-RO", "Open", "Deschis");
-injectString("ar-SA", "Open", "\u0641\u062A\u062D");
+injectString("ar", "Open", "\u0641\u062A\u062D");
 const ItemDataInternalInner = ({
   id,
   visible,
@@ -87,6 +89,7 @@ const ItemDataInternalInner = ({
   const {
     translate
   } = useLanguage();
+  const ChevronIcon = useDirectionalIcon(IconChevronRight, IconChevronLeft);
   const driveClassName = useMemo(() => isDrive ? isMobile ? "zen-item-data-drive" : "zen-item-data-drive-tablet" : "", [isDrive, isMobile]);
   const mobileClassName = useMobileClassName("zen-item-data");
   const aceClassName = useMemo(() => isTall ? "zen-item-data--tall" : "", [isTall]);
@@ -194,7 +197,7 @@ const ItemDataInternalInner = ({
           onClick: onClick,
           title: translate("Open"),
           "aria-label": translate("Open"),
-          children: _jsx(IconChevronRight, {
+          children: _jsx(ChevronIcon, {
             size: "large",
             className: "zen-item-data__click-icon"
           })

package/esm/list/listItem/listItem.js

@@ -12,6 +12,8 @@ import { useDriveClassName } from "../../utils/theme/useDriveClassName";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { useIconSize } from "../../utils/theme/useIconSize";
 import { IconChevronRight } from "../../icons/iconChevronRight";
+import { IconChevronLeft } from "../../icons/iconChevronLeft";
+import { useDirectionalIcon } from "../../utils/localization/useDirectionalIcon";
 import { isActiveElement } from "../utils/isActiveElement";
 import { useMobileClassName } from "../../utils/theme/useMobileClassName";
 injectString("cs", "More", "V\xEDce");
@@ -40,7 +42,7 @@ injectString("tr", "More", "Di\u011Fer");
 injectString("zh-Hans", "More", "\u66F4\u591A");
 injectString("zh-TW", "More", "\u66F4\u591A");
 injectString("ro-RO", "More", "Mai multe");
-injectString("ar-SA", "More", "\u0627\u0644\u0645\u0632\u064A\u062F");
+injectString("ar", "More", "\u0627\u0644\u0645\u0632\u064A\u062F");
 injectString("cs", "View details", "Zobrazit podrobnosti");
 injectString("da-DK", "View details", "Se detaljer");
 injectString("de", "View details", "Details anzeigen");
@@ -67,7 +69,7 @@ injectString("tr", "View details", "Ayr\u0131nt\u0131lar\u0131 g\xF6r\xFCnt\xFCl
 injectString("zh-Hans", "View details", "\u67E5\u770B\u8BE6\u7EC6\u4FE1\u606F");
 injectString("zh-TW", "View details", "\u6AA2\u8996\u8A73\u7D30\u8CC7\u8A0A");
 injectString("ro-RO", "View details", "Afi\u0219a\u021Bi detaliile");
-injectString("ar-SA", "View details", "\u0639\u0631\u0636 \u0627\u0644\u062A\u0641\u0627\u0635\u064A\u0644");
+injectString("ar", "View details", "\u0639\u0631\u0636 \u0627\u0644\u062A\u0641\u0627\u0635\u064A\u0644");
 export const ListItem = ({
   id,
   className,
@@ -89,6 +91,7 @@ export const ListItem = ({
     translate
   } = useLanguage();
   const itemRef = useRef(null);
+  const ChevronIcon = useDirectionalIcon(IconChevronRight, IconChevronLeft);
   const renderActions = useCallback(() => {
     if (!actions || actions.length === 0) {
       return null;
@@ -201,7 +204,7 @@ export const ListItem = ({
       link: link,
       target: target,
       title: translate("View details"),
-      children: _jsx(IconChevronRight, {
+      children: _jsx(ChevronIcon, {
         size: isMobile ? "huge" : "large",
         className: "zen-list-item__click-icon"
       })

package/esm/menu/components/controlledMenuList/controlledMenuList.js

@@ -11,6 +11,8 @@ import { useLastValidSheet } from "../../utils/useLastValidSheet";
 import { useMenuListKeyboardNav } from "../../utils/useMenuListKeyboardNav";
 import { MenuButton } from "../menuButton";
 import { IconArrowLeft } from "../../../icons/iconArrowLeft";
+import { IconArrowRight } from "../../../icons/iconArrowRight";
+import { useDirectionalIcon } from "../../../utils/localization/useDirectionalIcon";
 import { DeviceType } from "../../../commonHelpers/hooks/deviceType";
 import { useDeviceType } from "../../../commonHelpers/hooks/useDeviceType";
 import { generateId } from "../../../commonHelpers/generateId";
@@ -20,6 +22,7 @@ import { isSeparator, MenuSeparator } from "../menuSeparator";
 const ControlledMenuListBase = forwardRef(({ children, setIsOpen, isOpen, className = "", listClassName = "", ariaLabel, defaultTooltipAlignment, defaultAlignment, direction = "vertical" }, ref) => {
     const [deviceType, setDeviceType] = useState(DeviceType.Desktop);
     const isMobile = deviceType === DeviceType.Mobile;
+    const BackArrowIcon = useDirectionalIcon(IconArrowLeft, IconArrowRight);
     useDeviceType(setDeviceType);
     // True when mounted inside ControlledMenu, which injects setIsOpen and isOpen.
     // Standalone usage leaves both undefined.
@@ -110,7 +113,7 @@ const ControlledMenuListBase = forwardRef(({ children, setIsOpen, isOpen, classN
                 className,
                 listClassName,
                 applyDirection && direction === "horizontal" ? "zen-menu-item--horizontal" : ""
-            ]), children: [backParent ? (_jsx(MenuButton, { id: "root", name: getItemLabel(backParent), icon: IconArrowLeft, onClick: closeBranch, hasChildren: false, disabled: false }, "root")) : null, listContent] }) }));
+            ]), children: [backParent ? (_jsx(MenuButton, { id: "root", name: getItemLabel(backParent), icon: BackArrowIcon, onClick: closeBranch, hasChildren: false, disabled: false }, "root")) : null, listContent] }) }));
     const { sheetContent, sheetParent, sheetPathLength, sheetParentName } = useLastValidSheet(nestedContent, nestedParent, path, children);
     return (_jsxs(PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, navigatedViaKeyboardRef: navigatedViaKeyboardRef, keyboardActiveRef: keyboardActiveRef, children: [renderList(content, parent, divRefCallback), !isEmbedded && isMobile && (_jsxs(MobileSheet, { label: sheetParentName, isOpen: path.length > 0, triggerRef: internalRef, onHidePanel: closeAll, onCloseClick: closeAll, children: [_jsx(MobileSheet.Title, { children: sheetParentName }), _jsx(MobileSheet.Content, { children: renderList(sheetContent, sheetPathLength > 1 ? sheetParent : null, undefined, false, onKeyDownVertical) })] }))] }));
 });

package/esm/menu/components/menuButton.d.ts

@@ -16,6 +16,7 @@ export interface IMenuButton extends IZenIdComponentProps {
     onClick?: (id: string, e: React.MouseEvent) => void;
     active?: boolean | null;
     ref?: RefObject<HTMLButtonElement | null>;
+    dataAnalyticsId?: string;
 }
-export declare const MenuButton: ({ id, onClick, hasChildren, disabled, icon, name, link, target, rel, className, active, ref }: IMenuButton & IMenuButtonInternal) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuButton: ({ id, onClick, hasChildren, disabled, icon, name, link, target, rel, className, active, ref, dataAnalyticsId }: IMenuButton & IMenuButtonInternal) => import("react/jsx-runtime").JSX.Element;
 export {};

package/esm/menu/components/menuButton.js

@@ -2,15 +2,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement, useCallback, useMemo } from "react";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { IconChevronRight } from "../../icons/iconChevronRight";
+import { IconChevronLeft } from "../../icons/iconChevronLeft";
+import { useDirectionalIcon } from "../../utils/localization/useDirectionalIcon";
 import { useDriveClassName } from "../../utils/theme/useDriveClassName";
 import { useDrive } from "../../utils/theme/useDrive";
 import { getMenuButtonState } from "../utils/getMenuButtonState";
 import { isSafeHref } from "../utils/isSafeHref";
 import { getSafeRel } from "../utils/getSafeRel";
-export const MenuButton = ({ id, onClick, hasChildren, disabled, icon, name, link, target, rel, className = "", active = null, ref }) => {
+export const MenuButton = ({ id, onClick, hasChildren, disabled, icon, name, link, target, rel, className = "", active = null, ref, dataAnalyticsId }) => {
     const { hasState, isActive } = getMenuButtonState(active, disabled);
     const driveMenuButtonActionClasses = useDriveClassName("zen-menu-button__action");
     const isDrive = useDrive();
+    const ChevronIcon = useDirectionalIcon(IconChevronRight, IconChevronLeft);
     const linkEvents = useMemo(() => ({
         onKeyDown: e => {
             if (e.key === " ") {
@@ -42,17 +45,17 @@ export const MenuButton = ({ id, onClick, hasChildren, disabled, icon, name, lin
             hasChildren ? "zen-menu-button__action--has-children" : "",
             hasState && isActive ? "zen-menu-button__action--active" : "",
             driveMenuButtonActionClasses || ""
-        ]), role: hasState ? "menuitemcheckbox" : "menuitem", onClick: onClickHandler, "aria-checked": hasState ? isActive : undefined, children: [!!icon &&
+        ]), role: hasState ? "menuitemcheckbox" : "menuitem", onClick: onClickHandler, "aria-checked": hasState ? isActive : undefined, "data-analytics-id": dataAnalyticsId, children: [!!icon &&
                 createElement(icon, {
                     size: isDrive ? "huge" : "large",
                     className: classNames(["zen-caption__pre-content", "zen-menu-button__icon"])
-                }), _jsx("span", { className: "zen-menu-button__action-text", children: name }), !!hasChildren && (_jsx(IconChevronRight, { size: isDrive ? "huge" : "large", className: classNames(["zen-caption__pre-content", "zen-menu-button__more-icon"]) }))] }));
+                }), _jsx("span", { className: "zen-menu-button__action-text", children: name }), !!hasChildren && (_jsx(ChevronIcon, { size: isDrive ? "huge" : "large", className: classNames(["zen-caption__pre-content", "zen-menu-button__more-icon"]) }))] }));
     const linkTemplate = (_jsxs("a", Object.assign({ "data-id": id, role: "menuitem", className: classNames([
             "zen-menu-button__action",
             "zen-caption",
             disabled ? "zen-menu-button__action--disabled" : "",
             driveMenuButtonActionClasses || ""
-        ]), href: disabled || !isSafeHref(link) ? undefined : link, "aria-disabled": disabled, onClick: onClickHandler, target: target, rel: getSafeRel(rel, target) }, linkEvents, { children: [!!icon &&
+        ]), href: disabled || !isSafeHref(link) ? undefined : link, "aria-disabled": disabled, onClick: onClickHandler, target: target, rel: getSafeRel(rel, target), "data-analytics-id": dataAnalyticsId }, linkEvents, { children: [!!icon &&
                 createElement(icon, {
                     size: isDrive ? "huge" : "large",
                     className: "zen-caption__pre-content"

package/esm/menu/components/menuErrorItem.js

@@ -29,7 +29,7 @@ injectString("tr", "Error with loading", "Error with loading");
 injectString("zh-Hans", "Error with loading", "Error with loading");
 injectString("zh-TW", "Error with loading", "Error with loading");
 injectString("ro-RO", "Error with loading", "Eroare la \xEEnc\u0103rcare");
-injectString("ar-SA", "Error with loading", "\u062E\u0637\u0623 \u0641\u064A \u0627\u0644\u062A\u062D\u0645\u064A\u0644");
+injectString("ar", "Error with loading", "\u062E\u0637\u0623 \u0641\u064A \u0627\u0644\u062A\u062D\u0645\u064A\u0644");
 injectString("cs", "Click to refresh", "Click to refresh");
 injectString("da-DK", "Click to refresh", "Click to refresh");
 injectString("de", "Click to refresh", "Click to refresh");
@@ -56,7 +56,7 @@ injectString("tr", "Click to refresh", "Click to refresh");
 injectString("zh-Hans", "Click to refresh", "Click to refresh");
 injectString("zh-TW", "Click to refresh", "Click to refresh");
 injectString("ro-RO", "Click to refresh", "Face\u021Bi clic pentru a re\xEEnc\u0103rca");
-injectString("ar-SA", "Click to refresh", "\u0627\u0646\u0642\u0631 \u0644\u0644\u062A\u062D\u062F\u064A\u062B");
+injectString("ar", "Click to refresh", "\u0627\u0646\u0642\u0631 \u0644\u0644\u062A\u062D\u062F\u064A\u062B");
 export const MenuErrorItem = ({
   id,
   onClick

package/esm/menu/components/menuItem.js

@@ -6,7 +6,7 @@ import { ControlledPopup } from "../../controlledPopup/controlledPopup";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { useMenuItemCore } from "../utils/useMenuItemCore";
 export { isMenuItem } from "../utils/isMenuItem";
-export const MenuItem = ({ id, children, name, icon, disabled, onClick, link, target, rel, isMobile = false, setIsOpen, trigger, className, active, alignment }) => {
+export const MenuItem = ({ id, children, name, icon, disabled, onClick, link, target, rel, isMobile = false, setIsOpen, trigger, className, active, alignment, dataAnalyticsId }) => {
     const { ref, isOpen, hasChildren, content, openedViaKeyboard, contentAlignment, path, onOpenBranch, handleOpenChange } = useMenuItemCore({
         id,
         children,
@@ -40,10 +40,10 @@ export const MenuItem = ({ id, children, name, icon, disabled, onClick, link, ta
         onClick === null || onClick === void 0 ? void 0 : onClick(id, e);
     }, [onClick, onOpenBranch, id, trigger]);
     if (!hasChildren) {
-        return (_jsx(MenuButton, { id: id, name: name, icon: icon, disabled: disabled, link: link, target: target, rel: rel, onClick: memoizedDesktopActionOnClick, className: className, active: active, hasChildren: false }, id));
+        return (_jsx(MenuButton, { id: id, name: name, icon: icon, disabled: disabled, link: link, target: target, rel: rel, onClick: memoizedDesktopActionOnClick, className: className, active: active, hasChildren: false, dataAnalyticsId: dataAnalyticsId }, id));
     }
     if (isMobile) {
-        return (_jsx(MenuButton, { id: id, name: name, icon: icon, disabled: disabled, link: link, target: target, rel: rel, onClick: memoizedMobileActionOnClick, active: active, hasChildren: true }, id));
+        return (_jsx(MenuButton, { id: id, name: name, icon: icon, disabled: disabled, link: link, target: target, rel: rel, onClick: memoizedMobileActionOnClick, active: active, hasChildren: true, dataAnalyticsId: dataAnalyticsId }, id));
     }
     let popupTrigger;
     if (trigger) {
@@ -53,7 +53,7 @@ export const MenuItem = ({ id, children, name, icon, disabled, onClick, link, ta
         });
     }
     else {
-        popupTrigger = (_jsx(MenuButton, { id: id, ref: ref, name: name, icon: icon, disabled: disabled, hasChildren: true, onClick: memoizedTriggerOnClick, active: active }, id));
+        popupTrigger = (_jsx(MenuButton, { id: id, ref: ref, name: name, icon: icon, disabled: disabled, hasChildren: true, onClick: memoizedTriggerOnClick, active: active, dataAnalyticsId: dataAnalyticsId }, id));
     }
     return (_jsxs(Fragment, { children: [popupTrigger, _jsx(ControlledPopup, { className: classNames([`zen-controlled-menu-submenu--${path.length}`]), useTrapFocusWithTrigger: openedViaKeyboard ? "on" : "withTrigger", alignment: contentAlignment, triggerRef: ref, isOpen: isOpen, onOpenChange: handleOpenChange, ariaLabel: popupTrigger.props.name, recalculateOnScroll: true, children: _jsx("ul", { role: "menu", className: "zen-menu-item", children: content }) })] }, id));
 };

package/esm/menu/utils/useMenuItemCore.js

@@ -3,15 +3,16 @@ import { PathContext } from "../contexts/pathContext";
 import { MenuAlignmentContext } from "../../header/headerContext";
 import { buildMenuContent } from "./buildMenuContent";
 import { useMenuItemKeyboardNav } from "./useMenuItemKeyboardNav";
-import { useRTLAlignment } from "../../utils/localization/useRTLAlignment";
+import { directionContext } from "../../utils/localization/directionContext";
 /**
  * Core menu item logic shared between MenuItem and createMenuItem.
  * Consolidates context access, state computation, and callback memoization.
  */
 export const useMenuItemCore = ({ id, children, className, alignment, isMobile = false, setIsOpen, onClick, onOpenChange }) => {
     const alignmentContext = useContext(MenuAlignmentContext);
-    const rawAlignment = alignment || alignmentContext.alignment || "right-top";
-    const contentAlignment = useRTLAlignment(rawAlignment);
+    const direction = useContext(directionContext);
+    const defaultAlignment = direction === "rtl" ? "left-top" : "right-top";
+    const contentAlignment = alignment || alignmentContext.alignment || defaultAlignment;
     const { path, onOpenBranch, closeBranch, navigatedViaKeyboardRef } = useContext(PathContext);
     const ref = useRef(null);
     const content = useMemo(() => buildMenuContent(children, isMobile, setIsOpen, className), [children, isMobile, setIsOpen, className]);

package/esm/miniTabs/miniTabs.d.ts

@@ -5,6 +5,7 @@ export interface IMiniTabElement {
     name: string;
     content: ReactNode;
     id: string;
+    dataAnalyticsId?: string;
 }
 export declare enum MiniTabsSize {
     Small = "small",

package/esm/miniTabs/miniTabs.js

@@ -33,5 +33,5 @@ export const MiniTabs = ({ activeTabId, onTabChange, children, size = MiniTabsSi
         var _a;
         (_a = activeButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, [activeTabId]);
-    return (_jsx("div", { className: classNames(["zen-mini-tabs", `zen-mini-tabs--${size}`, className ? className : ""]), children: tabs.length ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "zen-mini-tabs__header", role: "tablist", onKeyDown: keyDownHandler, ref: tabsRef, children: tabs.map(tab => (_jsx(MiniTabsHeaderItem, { id: tab.id, isActive: activeTabId === tab.id, handleClick: handleTabItemClick, buttonRef: tab.id === activeTabId ? activeButtonRef : undefined, children: tab.name }, tab.id))) }), _jsx("div", { className: "zen-mini-tabs__content", children: tabs.map((props) => (_createElement(MiniTabsItem, Object.assign({}, props, { key: props.id, activeId: activeTabId })))) })] })) : null }));
+    return (_jsx("div", { className: classNames(["zen-mini-tabs", `zen-mini-tabs--${size}`, className ? className : ""]), children: tabs.length ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "zen-mini-tabs__header", role: "tablist", onKeyDown: keyDownHandler, ref: tabsRef, children: tabs.map(tab => (_jsx(MiniTabsHeaderItem, { id: tab.id, isActive: activeTabId === tab.id, handleClick: handleTabItemClick, buttonRef: tab.id === activeTabId ? activeButtonRef : undefined, dataAnalyticsId: tab.dataAnalyticsId, children: tab.name }, tab.id))) }), _jsx("div", { className: "zen-mini-tabs__content", children: tabs.map((props) => (_createElement(MiniTabsItem, Object.assign({}, props, { key: props.id, activeId: activeTabId })))) })] })) : null }));
 };

package/esm/miniTabs/miniTabsHeaderItem.d.ts

@@ -6,5 +6,6 @@ export interface IMiniTabsHeaderItem extends IZenComponentProps {
     handleClick: (e: React.MouseEvent<HTMLElement>) => void;
     children: string;
     buttonRef?: RefObject<HTMLButtonElement | null>;
+    dataAnalyticsId?: string;
 }
-export declare const MiniTabsHeaderItem: ({ id, isActive, handleClick, children, buttonRef }: IMiniTabsHeaderItem) => import("react/jsx-runtime").JSX.Element;
+export declare const MiniTabsHeaderItem: ({ id, isActive, handleClick, children, buttonRef, dataAnalyticsId }: IMiniTabsHeaderItem) => import("react/jsx-runtime").JSX.Element;

package/esm/miniTabs/miniTabsHeaderItem.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "../commonHelpers/classNames/classNames";
-export const MiniTabsHeaderItem = ({ id, isActive, handleClick, children, buttonRef }) => (_jsx("button", { id: id, className: classNames(["zen-mini-tabs__header-item", isActive ? "zen-mini-tabs__header-item--active" : "", "zen-ellipsis", "label-01"]), role: "tab", type: "button", "aria-controls": `panel-${id}`, "aria-selected": isActive ? "true" : "false", title: children, tabIndex: isActive ? 0 : -1, ref: buttonRef, onClick: handleClick, children: children }));
+export const MiniTabsHeaderItem = ({ id, isActive, handleClick, children, buttonRef, dataAnalyticsId }) => (_jsx("button", { id: id, className: classNames(["zen-mini-tabs__header-item", isActive ? "zen-mini-tabs__header-item--active" : "", "zen-ellipsis", "label-01"]), role: "tab", type: "button", "aria-controls": `panel-${id}`, "aria-selected": isActive ? "true" : "false", title: children, tabIndex: isActive ? 0 : -1, ref: buttonRef, onClick: handleClick, "data-analytics-id": dataAnalyticsId, children: children }));

package/esm/miniTabs/miniTabsItem.d.ts

@@ -3,5 +3,6 @@ export interface IMiniTabsItem extends IZenComponentProps {
     id: string;
     name: string;
     activeId?: string;
+    dataAnalyticsId?: string;
 }
 export declare const MiniTabsItem: ({ id, children, activeId }: IMiniTabsItem) => import("react/jsx-runtime").JSX.Element;

package/esm/mobileSheet/mobileSheet.js

@@ -45,7 +45,7 @@ injectString("tr", "Back", "Geri");
 injectString("zh-Hans", "Back", "\u8FD4\u56DE");
 injectString("zh-TW", "Back", "\u8FD4\u56DE");
 injectString("ro-RO", "Back", "\xCEnapoi");
-injectString("ar-SA", "Back", "\u0631\u062C\u0648\u0639");
+injectString("ar", "Back", "\u0631\u062C\u0648\u0639");
 injectString("cs", "Close", "Zav\u0159\xEDt");
 injectString("da-DK", "Close", "Luk");
 injectString("de", "Close", "Schlie\xDFen");
@@ -72,7 +72,7 @@ injectString("tr", "Close", "Kapat");
 injectString("zh-Hans", "Close", "\u5173\u95ED");
 injectString("zh-TW", "Close", "\u95DC\u9589");
 injectString("ro-RO", "Close", "\xCEnchide");
-injectString("ar-SA", "Close", "\u0625\u063A\u0644\u0627\u0642");
+injectString("ar", "Close", "\u0625\u063A\u0644\u0627\u0642");
 export const MobileSheet = ({
   /* eslint-enable @typescript-eslint/naming-convention */
   triggerRef,

package/esm/modal/modal.js

@@ -48,7 +48,7 @@ injectString("tr", "Close", "Kapat");
 injectString("zh-Hans", "Close", "\u5173\u95ED");
 injectString("zh-TW", "Close", "\u95DC\u9589");
 injectString("ro-RO", "Close", "\xCEnchide");
-injectString("ar-SA", "Close", "\u0625\u063A\u0644\u0627\u0642");
+injectString("ar", "Close", "\u0625\u063A\u0644\u0627\u0642");
 export const Modal = ({
   isOpen,
   children,

package/esm/nav/navFooter/navEditFooter/navEditFooter.js

@@ -32,7 +32,7 @@ injectString("tr", "Save", "Kaydet");
 injectString("zh-Hans", "Save", "\u4FDD\u5B58");
 injectString("zh-TW", "Save", "\u5132\u5B58");
 injectString("ro-RO", "Save", "Salva\u021Bi");
-injectString("ar-SA", "Save", "\u062D\u0641\u0638");
+injectString("ar", "Save", "\u062D\u0641\u0638");
 injectString("cs", "Cancel", "Zru\u0161it");
 injectString("da-DK", "Cancel", "Annuller");
 injectString("de", "Cancel", "Abbrechen");
@@ -59,7 +59,7 @@ injectString("tr", "Cancel", "\u0130ptal");
 injectString("zh-Hans", "Cancel", "\u53D6\u6D88");
 injectString("zh-TW", "Cancel", "\u53D6\u6D88");
 injectString("ro-RO", "Cancel", "Anula\u021Bi");
-injectString("ar-SA", "Cancel", "\u0625\u0644\u063A\u0627\u0621");
+injectString("ar", "Cancel", "\u0625\u0644\u063A\u0627\u0621");
 export const NavEditFooter = ({
   className,
   handleSaveClick,

package/esm/nav/navFooter/navFooter.js

@@ -34,7 +34,7 @@ injectString("tr", "Edit Navigation", "Edit Navigation");
 injectString("zh-Hans", "Edit Navigation", "Edit Navigation");
 injectString("zh-TW", "Edit Navigation", "Edit Navigation");
 injectString("ro-RO", "Edit Navigation", "Edita\u021Bi navigarea");
-injectString("ar-SA", "Edit Navigation", "\u062A\u0639\u062F\u064A\u0644 \u0627\u0644\u062A\u0646\u0642\u0644");
+injectString("ar", "Edit Navigation", "\u062A\u0639\u062F\u064A\u0644 \u0627\u0644\u062A\u0646\u0642\u0644");
 const NavFooterComponent = ({
   className,
   children

package/esm/nav/navFooter/navFooterAction/navFooterAction.js

@@ -32,7 +32,7 @@ injectString("tr", "Configure", "Yap\u0131land\u0131r");
 injectString("zh-Hans", "Configure", "\u914D\u7F6E");
 injectString("zh-TW", "Configure", "\u914D\u7F6E");
 injectString("ro-RO", "Configure", "Configura\u021Bi");
-injectString("ar-SA", "Configure", "\u062A\u0643\u0648\u064A\u0646");
+injectString("ar", "Configure", "\u062A\u0643\u0648\u064A\u0646");
 export const NavFooterAction = ({
   children
 }) => {

package/esm/nav/navHeader/navHeader.js

@@ -36,7 +36,7 @@ injectString("tr", "Expand Navigation", "Expand Navigation");
 injectString("zh-Hans", "Expand Navigation", "Expand Navigation");
 injectString("zh-TW", "Expand Navigation", "Expand Navigation");
 injectString("ro-RO", "Expand Navigation", "Extinde\u021Bi navigarea");
-injectString("ar-SA", "Expand Navigation", "\u062A\u0648\u0633\u064A\u0639 \u0627\u0644\u062A\u0646\u0642\u0644");
+injectString("ar", "Expand Navigation", "\u062A\u0648\u0633\u064A\u0639 \u0627\u0644\u062A\u0646\u0642\u0644");
 injectString("cs", "Collapse Navigation", "Collapse Navigation");
 injectString("da-DK", "Collapse Navigation", "Collapse Navigation");
 injectString("de", "Collapse Navigation", "Collapse Navigation");
@@ -63,7 +63,7 @@ injectString("tr", "Collapse Navigation", "Collapse Navigation");
 injectString("zh-Hans", "Collapse Navigation", "Collapse Navigation");
 injectString("zh-TW", "Collapse Navigation", "Collapse Navigation");
 injectString("ro-RO", "Collapse Navigation", "Restr\xE2nge\u021Bi navigarea");
-injectString("ar-SA", "Collapse Navigation", "\u0637\u064A \u0627\u0644\u062A\u0646\u0642\u0644");
+injectString("ar", "Collapse Navigation", "\u0637\u064A \u0627\u0644\u062A\u0646\u0642\u0644");
 const NavHeaderToggler = ({
   className
 }) => {

package/esm/nav/navHeader/navHeaderSearch/navHeaderSearch.js

@@ -38,7 +38,7 @@ injectString("tr", "Search", "Ara");
 injectString("zh-Hans", "Search", "\u641C\u7D22");
 injectString("zh-TW", "Search", "\u641C\u5C0B");
 injectString("ro-RO", "Search", "C\u0103uta\u021Bi");
-injectString("ar-SA", "Search", "\u0628\u062D\u062B");
+injectString("ar", "Search", "\u0628\u062D\u062B");
 injectString("cs", "Close search", "Close search");
 injectString("da-DK", "Close search", "Close search");
 injectString("de", "Close search", "Close search");
@@ -65,7 +65,7 @@ injectString("tr", "Close search", "Close search");
 injectString("zh-Hans", "Close search", "Close search");
 injectString("zh-TW", "Close search", "Close search");
 injectString("ro-RO", "Close search", "Close search");
-injectString("ar-SA", "Close search", "\u0625\u063A\u0644\u0627\u0642 \u0627\u0644\u0628\u062D\u062B");
+injectString("ar", "Close search", "\u0625\u063A\u0644\u0627\u0642 \u0627\u0644\u0628\u062D\u062B");
 export const NavHeaderSearch = ({
   className,
   onSearch

package/esm/nav/navItem/navItem.js

@@ -14,7 +14,9 @@ import { classNames } from "../../commonHelpers/classNames/classNames";
 import { useRef, useState, useEffect, Children, cloneElement, createContext, useContext, useId } from "react";
 import { IconBeta } from "../../icons/iconBeta";
 import { IconChevronRight } from "../../icons/iconChevronRight";
+import { IconChevronLeft } from "../../icons/iconChevronLeft";
 import { IconOpen2 } from "../../icons/iconOpen2";
+import { useDirectionalIcon } from "../../utils/localization/useDirectionalIcon";
 import { Tooltip } from "../../tooltip/tooltip";
 import { ControlledMenu } from "../../menu/controlledMenu";
 import { useNavContext } from "../context/nav.context";
@@ -26,11 +28,12 @@ const defaultTooltipAlignment = "right";
 const isLinkNavItem = (item) => !!item.link;
 const NavItemContent = ({ primaryIcon, secondaryIcon, isBeta, counter, collapsed, hasSubmenu, iconClass, level = 1, children }) => {
     const primaryIconRef = useRef(null);
+    const ChevronIcon = useDirectionalIcon(IconChevronRight, IconChevronLeft);
     const PrimaryIconComponent = typeof primaryIcon === "function" ? primaryIcon : null;
     const SecondaryIconComponent = secondaryIcon;
     const iconSize = level > 1 ? SUBMENU_ICON_SIZE : ICON_SIZE;
     const primaryIconComponent = primaryIcon ? (_jsx("span", { ref: primaryIconRef, className: classNames(["zen-nav-item__icon", counter ? "zen-nav-item__icon--with-counter" : "", iconClass || ""]), children: PrimaryIconComponent ? _jsx(PrimaryIconComponent, { size: iconSize }) : primaryIcon })) : null;
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "zen-nav-item__content-left", children: [isBeta && !collapsed ? (_jsx("span", { className: "zen-nav-item__beta", children: _jsx(IconBeta, { size: "big" }) })) : null, primaryIconComponent, SecondaryIconComponent && !collapsed ? (_jsx("span", { className: "zen-nav-item__icon", children: _jsx(SecondaryIconComponent, { size: iconSize }) })) : null, !collapsed ? _jsx("span", { className: "zen-nav-item__title", children: children }) : null] }), !collapsed && (counter || hasSubmenu) ? (_jsxs("div", { className: "zen-nav-item__content-right", children: [counter ? _jsx("div", { className: "zen-nav-item__counter", children: counter }) : null, hasSubmenu ? _jsx(IconChevronRight, { className: "zen-nav-item__title-icon", size: iconSize }) : null] })) : null] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "zen-nav-item__content-left", children: [isBeta && !collapsed ? (_jsx("span", { className: "zen-nav-item__beta", children: _jsx(IconBeta, { size: "big" }) })) : null, primaryIconComponent, SecondaryIconComponent && !collapsed ? (_jsx("span", { className: "zen-nav-item__icon", children: _jsx(SecondaryIconComponent, { size: iconSize }) })) : null, !collapsed ? _jsx("span", { className: "zen-nav-item__title", children: children }) : null] }), !collapsed && (counter || hasSubmenu) ? (_jsxs("div", { className: "zen-nav-item__content-right", children: [counter ? _jsx("div", { className: "zen-nav-item__counter", children: counter }) : null, hasSubmenu ? _jsx(ChevronIcon, { className: "zen-nav-item__title-icon", size: iconSize }) : null] })) : null] }));
 };
 const NavItemAction = ({ actionIcon, actionIconTitle = "", onActionIconClick, collapsed, isMenuItem, level = 1 }) => {
     const ActionIconComponent = actionIcon;

package/esm/nav/navMobileBar/navMobileBar.js

@@ -36,7 +36,7 @@ injectString("tr", "More", "Di\u011Fer");
 injectString("zh-Hans", "More", "\u66F4\u591A");
 injectString("zh-TW", "More", "\u66F4\u591A");
 injectString("ro-RO", "More", "Mai multe");
-injectString("ar-SA", "More", "\u0627\u0644\u0645\u0632\u064A\u062F");
+injectString("ar", "More", "\u0627\u0644\u0645\u0632\u064A\u062F");
 export const NavMobileBar = ({
   className,
   children,