@geotab/zenith 3.7.0 → 3.8.0-beta.0

package/esm/formSection/hooks/useLoading.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Card } from "../../card/card";
 import { Skeleton } from "../../skeleton/skeleton";
-export const useLoading = (props) => {
+export const useLoading = props => {
     if (!props.isLoading) {
         return {
             loadingContent: null
@@ -9,10 +9,10 @@ export const useLoading = (props) => {
     }
     if (props.type === "card") {
         return {
-            loadingContent: _jsxs(Card.Content, { children: [_jsx(Skeleton, { height: 32 }), _jsx(Skeleton, { height: 32 }), _jsx(Skeleton, { height: 32 })] })
+            loadingContent: (_jsxs(Card.Content, { children: [_jsx(Skeleton, { height: 32 }), _jsx(Skeleton, { height: 32 }), _jsx(Skeleton, { height: 32 })] }))
         };
     }
     return {
-        loadingContent: _jsxs(_Fragment, { children: [_jsx(Skeleton, { height: 32 }), _jsx(Skeleton, { height: 32 }), _jsx(Skeleton, { height: 32 })] })
+        loadingContent: (_jsxs(_Fragment, { children: [_jsx(Skeleton, { height: 32 }), _jsx(Skeleton, { height: 32 }), _jsx(Skeleton, { height: 32 })] }))
     };
 };

package/esm/formSection/utils/formSectionProvider.js

@@ -6,4 +6,4 @@ export const FormSectionContext = createContext({
     type: undefined,
     isFormSection: false
 });
-export const FormSectionProvider = ({ children, labelAlign = "left", mode = undefined, type = "card" }) => _jsx(FormSectionContext.Provider, { value: { labelAlign, mode, type, isFormSection: true }, children: children });
+export const FormSectionProvider = ({ children, labelAlign = "left", mode = undefined, type = "card" }) => (_jsx(FormSectionContext.Provider, { value: { labelAlign, mode, type, isFormSection: true }, children: children }));

package/esm/formSection/utils/isFormSection.js

@@ -1 +1,4 @@
-export const isFormSection = (element) => !!(element && typeof element === "object" && "type" in element && element.type.displayName === "FORM_SECTION");
+export const isFormSection = (element) => !!(element &&
+    typeof element === "object" &&
+    "type" in element &&
+    element.type.displayName === "FORM_SECTION");

package/esm/formSection/utils/isModalSection.js

@@ -1,4 +1 @@
-export const isModalSection = (props) => (typeof props === "object" &&
-    props !== null &&
-    "type" in props &&
-    props.type === "modal");
+export const isModalSection = (props) => typeof props === "object" && props !== null && "type" in props && props.type === "modal";

package/esm/formStepper/components/formStep.js

@@ -30,6 +30,7 @@ injectString("tr", "Optional", "\u0130ste\u011Fe ba\u011Fl\u0131");
 injectString("zh-Hans", "Optional", "\u53EF\u9009");
 injectString("zh-TW", "Optional", "\u9078\u586B");
 injectString("ro-RO", "Optional", "Op\u021Bional");
+injectString("ar-SA", "Optional", "\u0627\u062E\u062A\u064A\u0627\u0631\u064A");
 export const FormStep = ({
   isFirst,
   value,

package/esm/formStepper/components/formStepRaw.js

@@ -7,7 +7,16 @@ import { classNames } from "../../commonHelpers/classNames/classNames";
 export const FormStepRaw = ({ type, isFirst, isCompact, onClick, content, label, labelSecondary, id }) => {
     const isNonClickable = onClick === false;
     if (isCompact) {
-        return _jsxs(_Fragment, { children: [!isFirst && _jsx("div", { className: `zen-form-step__connector zen-form-step__connector--mobile zen-form-step__connector--${type}` }), _jsx("button", { tabIndex: getTabIndex(type, onClick), id: id, "aria-label": getAriaLabelMobile(label, labelSecondary), "aria-selected": isAreaSelected(type), role: "tab", onClick: getOnClick(type, onClick), className: classNames(["zen-form-step__item", "zen-form-step__item--mobile"]), children: _jsx("div", { className: classNames(["zen-form-step__marker", `zen-form-step__marker--${type}`, "zen-form-step__marker--mobile", isNonClickable ? "zen-form-step__marker--non-clickable" : ""]) }) })] });
+        return (_jsxs(_Fragment, { children: [!isFirst && _jsx("div", { className: `zen-form-step__connector zen-form-step__connector--mobile zen-form-step__connector--${type}` }), _jsx("button", { tabIndex: getTabIndex(type, onClick), id: id, "aria-label": getAriaLabelMobile(label, labelSecondary), "aria-selected": isAreaSelected(type), role: "tab", onClick: getOnClick(type, onClick), className: classNames(["zen-form-step__item", "zen-form-step__item--mobile"]), children: _jsx("div", { className: classNames([
+                            "zen-form-step__marker",
+                            `zen-form-step__marker--${type}`,
+                            "zen-form-step__marker--mobile",
+                            isNonClickable ? "zen-form-step__marker--non-clickable" : ""
+                        ]) }) })] }));
     }
-    return _jsxs(_Fragment, { children: [!isFirst && _jsx("div", { className: `zen-form-step__connector zen-form-step__connector--${type}` }), _jsxs("div", { className: "zen-form-step__item", children: [_jsx("button", { onClick: getOnClick(type, onClick), tabIndex: getTabIndex(type, onClick), id: id, "aria-selected": isAreaSelected(type), role: "tab", className: classNames([`zen-form-step__marker`, `zen-form-step__marker--${type}`, isNonClickable ? "zen-form-step__marker--non-clickable" : ""]), children: (type === "current" || type === "error") ? (_jsx("div", { className: "zen-form-step__marker--inner", children: content })) : content }), _jsxs("label", { htmlFor: id, className: `zen-form-step__label zen-form-step__label--${type}`, children: [_jsx("span", { className: "zen-form-step__label-primary", children: label }), labelSecondary && _jsx("span", { className: "zen-form-step__label-secondary", children: labelSecondary })] })] })] });
+    return (_jsxs(_Fragment, { children: [!isFirst && _jsx("div", { className: `zen-form-step__connector zen-form-step__connector--${type}` }), _jsxs("div", { className: "zen-form-step__item", children: [_jsx("button", { onClick: getOnClick(type, onClick), tabIndex: getTabIndex(type, onClick), id: id, "aria-selected": isAreaSelected(type), role: "tab", className: classNames([
+                            `zen-form-step__marker`,
+                            `zen-form-step__marker--${type}`,
+                            isNonClickable ? "zen-form-step__marker--non-clickable" : ""
+                        ]), children: type === "current" || type === "error" ? _jsx("div", { className: "zen-form-step__marker--inner", children: content }) : content }), _jsxs("label", { htmlFor: id, className: `zen-form-step__label zen-form-step__label--${type}`, children: [_jsx("span", { className: "zen-form-step__label-primary", children: label }), labelSecondary && _jsx("span", { className: "zen-form-step__label-secondary", children: labelSecondary })] })] })] }));
 };

package/esm/formStepper/formStepper.js

@@ -30,6 +30,7 @@ injectString("tr", "Step {0} of {1}", "Ad\u0131m {0} / {1}");
 injectString("zh-Hans", "Step {0} of {1}", "\u6B65\u9AA4 {0} / {1} ");
 injectString("zh-TW", "Step {0} of {1}", "\u6B65\u9A5F {0} (\u5171 {1} \u500B)");
 injectString("ro-RO", "Step {0} of {1}", "Pasul {0} din {1}");
+injectString("ar-SA", "Step {0} of {1}", "\u0627\u0644\u062E\u0637\u0648\u0629 {0} \u0645\u0646 {1}");
 injectString("cs", "Optional", "Voliteln\xE9");
 injectString("da-DK", "Optional", "Valgfri");
 injectString("de", "Optional", "Optional");
@@ -56,6 +57,7 @@ injectString("tr", "Optional", "\u0130ste\u011Fe ba\u011Fl\u0131");
 injectString("zh-Hans", "Optional", "\u53EF\u9009");
 injectString("zh-TW", "Optional", "\u9078\u586B");
 injectString("ro-RO", "Optional", "Op\u021Bional");
+injectString("ar-SA", "Optional", "\u0627\u062E\u062A\u064A\u0627\u0631\u064A");
 const MAX_STEPS = 7;
 export const STEPPER_LAST_STEP = "lastStep";
 export const FormStepper = ({

package/esm/formStepperButtons/formStepperButtons.js

@@ -34,6 +34,7 @@ injectString("tr", "Previous step", "\xD6nceki ad\u0131m");
 injectString("zh-Hans", "Previous step", "\u524D\u4E00\u6B65");
 injectString("zh-TW", "Previous step", "\u4E0A\u4E00\u6B65");
 injectString("ro-RO", "Previous step", "Pasul anterior");
+injectString("ar-SA", "Previous step", "\u0627\u0644\u062E\u0637\u0648\u0629 \u0627\u0644\u0633\u0627\u0628\u0642\u0629");
 injectString("cs", "Cancel", "Zru\u0161it");
 injectString("da-DK", "Cancel", "Annuller");
 injectString("de", "Cancel", "Abbrechen");
@@ -60,6 +61,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("cs", "Submit", "Odeslat");
 injectString("da-DK", "Submit", "Indsend");
 injectString("de", "Submit", "Absenden");
@@ -86,6 +88,7 @@ injectString("tr", "Submit", "G\xF6nder");
 injectString("zh-Hans", "Submit", "\u63D0\u4EA4");
 injectString("zh-TW", "Submit", "\u63D0\u4EA4");
 injectString("ro-RO", "Submit", "Trimite\u021Bi");
+injectString("ar-SA", "Submit", "\u0625\u0631\u0633\u0627\u0644");
 injectString("cs", "Continue", "Pokra\u010Dovat");
 injectString("da-DK", "Continue", "Forts\xE6t");
 injectString("de", "Continue", "Fortsetzen");
@@ -112,6 +115,7 @@ injectString("tr", "Continue", "Devam");
 injectString("zh-Hans", "Continue", "\u7EE7\u7EED");
 injectString("zh-TW", "Continue", "\u7E7C\u7E8C");
 injectString("ro-RO", "Continue", "Continua\u021Bi");
+injectString("ar-SA", "Continue", "\u0645\u062A\u0627\u0628\u0639\u0629");
 export const FormStepperButtons = ({
   onPrevious,
   onCancel,

package/esm/formStepperButtons/utils/getCurrentIndex.js

@@ -1,2 +1,2 @@
 import { STEPPER_LAST_STEP } from "../../formStepper/formStepper";
-export const getCurrentIndex = (steps, current) => current === STEPPER_LAST_STEP ? steps.length : steps.findIndex((step) => step.id === current);
+export const getCurrentIndex = (steps, current) => current === STEPPER_LAST_STEP ? steps.length : steps.findIndex(step => step.id === current);

package/esm/gridLayout/gridLayout.js

@@ -10,5 +10,5 @@ export const GridLayout = ({ children, className = "", stretch = false }) => {
     const ref = useRef(null);
     useGridClasses(children, childrenArr);
     useStretch(stretch, childrenArr, ref, setChildrenArrState);
-    return _jsx(GridLayoutProvider, { children: _jsx("div", { ref: ref, className: classNames(["zen-grid", className]), children: childrenArrState }) });
+    return (_jsx(GridLayoutProvider, { children: _jsx("div", { ref: ref, className: classNames(["zen-grid", className]), children: childrenArrState }) }));
 };

package/esm/gridLayout/hooks/useGridClasses.js

@@ -78,7 +78,13 @@ export const useGridClasses = (children, childrenArr, colsState = {
         applyFitContent(mergedState, hasFitContentProp);
         const gridClasses = convertStateToClasses(mergedState, true);
         const { restClasses } = getGridClasses(el.props.className || "");
-        const itemClassName = classNames(["zen-grid__item", gridClasses.length ? "zen-grid__item--unset" : "", ...gridClasses, ...restClasses, isFitContent ? FIT_CONTENT_CLASS : ""]);
+        const itemClassName = classNames([
+            "zen-grid__item",
+            gridClasses.length ? "zen-grid__item--unset" : "",
+            ...gridClasses,
+            ...restClasses,
+            isFitContent ? FIT_CONTENT_CLASS : ""
+        ]);
         const clone = cloneElement(el, {
             key: el.props.id || el.key || indx,
             className: itemClassName

package/esm/gridLayout/hooks/useStretch.js

@@ -42,10 +42,7 @@ export const useStretch = (stretch, childrenArr, ref, setChildrenArrState) => {
             }
             const childProps = child.props;
             const clone = cloneElement(child, {
-                className: classNames([
-                    childProps.className || "",
-                    "zen-col-stretch"
-                ]),
+                className: classNames([childProps.className || "", "zen-col-stretch"]),
                 key: childProps.id || child.key || indx
             });
             return clone;

package/esm/gridLayout/utils/adaptGridState.js

@@ -3,13 +3,13 @@ export const adaptGridState = (gridState, colState) => {
     // Example:
     // 9 + 4 == 13 -> | 9 | 10 | 11 | 12 | -> the last column is 12 == 12 => OK
     // 9 + 5 == 14 -> | 9 | 10 | 11 | 12 | 13 | -> the last column is 13 > 12 => should be adapted to 12
-    if (lg && lgStart && (lg + lgStart - 1) > colState.desktop) {
+    if (lg && lgStart && lg + lgStart - 1 > colState.desktop) {
         gridState.lg = colState.desktop - lgStart + 1;
     }
-    if (md && mdStart && (md + mdStart - 1) > colState.tablet) {
+    if (md && mdStart && md + mdStart - 1 > colState.tablet) {
         gridState.md = colState.tablet - mdStart + 1;
     }
-    if (sm && smStart && (sm + smStart - 1) > colState.mobile) {
+    if (sm && smStart && sm + smStart - 1 > colState.mobile) {
         gridState.sm = colState.mobile - smStart + 1;
     }
 };

package/esm/gridLayout/utils/convertClassesToState.js

@@ -2,7 +2,7 @@ import { DESKTOP_PREFIX, DESKTOP_START_PREFIX, TABLET_PREFIX, MOBILE_PREFIX, TAB
 export const convertClassesToState = (className) => {
     const classes = className.split(" ");
     const state = {};
-    classes.forEach((cls) => {
+    classes.forEach(cls => {
         if (cls.startsWith(DESKTOP_START_PREFIX) && !state.lgStart) {
             const val = cls.replace(DESKTOP_START_PREFIX, "");
             if (!isNaN(Number(val))) {

package/esm/gridLayout/utils/getGridClasses.js

@@ -1,11 +1,5 @@
 import { DESKTOP_PREFIX, TABLET_PREFIX, MOBILE_PREFIX, GRID_COL_PREFIX } from "./constants";
-const gridClassPrefixes = [
-    "zen-grid",
-    DESKTOP_PREFIX,
-    TABLET_PREFIX,
-    MOBILE_PREFIX,
-    GRID_COL_PREFIX
-];
+const gridClassPrefixes = ["zen-grid", DESKTOP_PREFIX, TABLET_PREFIX, MOBILE_PREFIX, GRID_COL_PREFIX];
 export const getGridClasses = (className) => {
     const gridClasses = [];
     const restClasses = [];
@@ -16,8 +10,8 @@ export const getGridClasses = (className) => {
         };
     }
     const classList = className.split(" ");
-    classList.forEach((classItem) => {
-        if (gridClassPrefixes.some((prefix) => classItem.startsWith(prefix))) {
+    classList.forEach(classItem => {
+        if (gridClassPrefixes.some(prefix => classItem.startsWith(prefix))) {
             gridClasses.push(classItem);
         }
         else {

package/esm/gridLayout/utils/getGridPositionClasses.js

@@ -1,8 +1,6 @@
 import { DESKTOP_START_PREFIX, GRID_COL_START_PREFIX, MOBILE_START_PREFIX, TABLET_START_PREFIX } from "./constants";
-const positionPrefixes = [
-    DESKTOP_START_PREFIX,
-    TABLET_START_PREFIX,
-    MOBILE_START_PREFIX,
-    GRID_COL_START_PREFIX
-];
-export const getGridPositionClasses = (className) => className.split(" ").filter((classItem) => positionPrefixes.some((prefix) => classItem.startsWith(prefix))).join(" ");
+const positionPrefixes = [DESKTOP_START_PREFIX, TABLET_START_PREFIX, MOBILE_START_PREFIX, GRID_COL_START_PREFIX];
+export const getGridPositionClasses = (className) => className
+    .split(" ")
+    .filter(classItem => positionPrefixes.some(prefix => classItem.startsWith(prefix)))
+    .join(" ");

package/esm/gridLayout/utils/getGridRows.js

@@ -3,10 +3,12 @@ export const getGridRows = (topValueArr, heightArr) => {
     if (topValueArr.length === 0) {
         return grouped;
     }
-    let currentGroup = [{
+    let currentGroup = [
+        {
             index: 0,
             height: heightArr[0]
-        }];
+        }
+    ];
     for (let i = 1; i < topValueArr.length; i++) {
         if (topValueArr[i] === topValueArr[i - 1]) {
             currentGroup.push({
@@ -16,10 +18,12 @@ export const getGridRows = (topValueArr, heightArr) => {
         }
         else {
             grouped.push(currentGroup);
-            currentGroup = [{
+            currentGroup = [
+                {
                     index: i,
                     height: heightArr[i]
-                }];
+                }
+            ];
         }
     }
     grouped.push(currentGroup);

package/esm/gridLayout/utils/getGridWidthClasses.js

@@ -1,15 +1,7 @@
 import { DESKTOP_PREFIX, DESKTOP_START_PREFIX, GRID_COL_PREFIX, GRID_COL_START_PREFIX, MOBILE_PREFIX, MOBILE_START_PREFIX, TABLET_PREFIX, TABLET_START_PREFIX } from "./constants";
-const widthPrefixes = [
-    DESKTOP_PREFIX,
-    TABLET_PREFIX,
-    MOBILE_PREFIX,
-    GRID_COL_PREFIX
-];
-const positionPrefixes = [
-    DESKTOP_START_PREFIX,
-    TABLET_START_PREFIX,
-    MOBILE_START_PREFIX,
-    GRID_COL_START_PREFIX
-];
+const widthPrefixes = [DESKTOP_PREFIX, TABLET_PREFIX, MOBILE_PREFIX, GRID_COL_PREFIX];
+const positionPrefixes = [DESKTOP_START_PREFIX, TABLET_START_PREFIX, MOBILE_START_PREFIX, GRID_COL_START_PREFIX];
 export const getGridWidthClasses = (className) => className
-    .split(" ").filter((cls) => widthPrefixes.some((prefix) => cls.startsWith(prefix)) && !positionPrefixes.some((prefix) => cls.startsWith(prefix))).join(" ");
+    .split(" ")
+    .filter(cls => widthPrefixes.some(prefix => cls.startsWith(prefix)) && !positionPrefixes.some(prefix => cls.startsWith(prefix)))
+    .join(" ");

package/esm/gridLayout/utils/gridLayoutProvider.js

@@ -8,5 +8,5 @@ export const GridLayoutContext = createContext({
 export const GridLayoutProvider = ({ children }) => {
     const isMobile = useMobile();
     const isTablet = useTablet();
-    return _jsx(GridLayoutContext.Provider, { value: { screen: isMobile ? "mobile" : isTablet ? "tablet" : "desktop" }, children: children });
+    return (_jsx(GridLayoutContext.Provider, { value: { screen: isMobile ? "mobile" : isTablet ? "tablet" : "desktop" }, children: children }));
 };

package/esm/gridLayout/utils/hasGridClasses.js

@@ -1,8 +1,4 @@
 import { DESKTOP_PREFIX, GRID_COL_PREFIX, MOBILE_PREFIX, TABLET_PREFIX } from "./constants";
-const gridPrefixes = [
-    DESKTOP_PREFIX,
-    TABLET_PREFIX,
-    MOBILE_PREFIX,
-    GRID_COL_PREFIX
-];
-export const hasGridClasses = (element) => !!element.props.className && gridPrefixes.some((prefix) => { var _a; return ((_a = element.props.className) === null || _a === void 0 ? void 0 : _a.indexOf(prefix)) !== -1; });
+const gridPrefixes = [DESKTOP_PREFIX, TABLET_PREFIX, MOBILE_PREFIX, GRID_COL_PREFIX];
+export const hasGridClasses = (element) => !!element.props.className &&
+    gridPrefixes.some(prefix => { var _a; return ((_a = element.props.className) === null || _a === void 0 ? void 0 : _a.indexOf(prefix)) !== -1; });

package/esm/gridLayout/utils/isGridItem.js

@@ -3,12 +3,12 @@ export const isGridItem = (element) => {
         return false;
     }
     const elProps = element.props;
-    return elProps.gridLg !== undefined
-        || elProps.gridMd !== undefined
-        || elProps.gridSm !== undefined
-        || elProps.gridLgStart !== undefined
-        || elProps.gridMdStart !== undefined
-        || elProps.gridSmStart !== undefined
-        || elProps.gridStart !== undefined
-        || elProps.grid !== undefined;
+    return (elProps.gridLg !== undefined ||
+        elProps.gridMd !== undefined ||
+        elProps.gridSm !== undefined ||
+        elProps.gridLgStart !== undefined ||
+        elProps.gridMdStart !== undefined ||
+        elProps.gridSmStart !== undefined ||
+        elProps.gridStart !== undefined ||
+        elProps.grid !== undefined);
 };

package/esm/gridLayout/utils/mergeGridStates.js

@@ -3,8 +3,9 @@
 // 2. From props general (grid and gridStart properties)
 // 3. From class names specific ("zen-lg", "zen-md", "zen-sm", "zen-lg-start", "zen-md-start", "zen-sm-start" class names)
 // 4. From class names general ("zen-col-" and "zen-col-start" class names)
-// eslint-disable-next-line complexity
+/* eslint-disable complexity */
 export const mergeGridStates = (stateFromProps, stateFromClassNames, resultState) => {
+    /* eslint-enable complexity */
     if (stateFromProps.gridLg !== undefined) {
         resultState.gridLg = stateFromProps.gridLg;
     }
@@ -42,22 +43,22 @@ export const mergeGridStates = (stateFromProps, stateFromClassNames, resultState
         resultState.smStart = stateFromProps.smStart;
     }
     // Merge state from class names
-    if ((resultState.lg === undefined && resultState.gridLg === undefined) && stateFromClassNames.lg !== undefined) {
+    if (resultState.lg === undefined && resultState.gridLg === undefined && stateFromClassNames.lg !== undefined) {
         resultState.lg = stateFromClassNames.lg;
     }
-    if ((resultState.md === undefined && resultState.gridMd === undefined) && stateFromClassNames.md !== undefined) {
+    if (resultState.md === undefined && resultState.gridMd === undefined && stateFromClassNames.md !== undefined) {
         resultState.md = stateFromClassNames.md;
     }
-    if ((resultState.sm === undefined && resultState.gridSm === undefined) && stateFromClassNames.sm !== undefined) {
+    if (resultState.sm === undefined && resultState.gridSm === undefined && stateFromClassNames.sm !== undefined) {
         resultState.sm = stateFromClassNames.sm;
     }
-    if ((resultState.lgStart === undefined && resultState.gridLgStart === undefined) && stateFromClassNames.lgStart !== undefined) {
+    if (resultState.lgStart === undefined && resultState.gridLgStart === undefined && stateFromClassNames.lgStart !== undefined) {
         resultState.lgStart = stateFromClassNames.lgStart;
     }
-    if ((resultState.mdStart === undefined && resultState.gridMdStart === undefined) && stateFromClassNames.mdStart !== undefined) {
+    if (resultState.mdStart === undefined && resultState.gridMdStart === undefined && stateFromClassNames.mdStart !== undefined) {
         resultState.mdStart = stateFromClassNames.mdStart;
     }
-    if ((resultState.smStart === undefined && resultState.gridSmStart === undefined) && stateFromClassNames.smStart !== undefined) {
+    if (resultState.smStart === undefined && resultState.gridSmStart === undefined && stateFromClassNames.smStart !== undefined) {
         resultState.smStart = stateFromClassNames.smStart;
     }
     if (resultState.gridLg === undefined && stateFromClassNames.gridLg !== undefined) {

package/esm/gridLayout/utils/removeSameTypeClasses.js

@@ -8,7 +8,7 @@ const isMobilePositionClass = (className) => className.startsWith(MOBILE_START_P
 export const removeSameTypeClasses = (classNames) => {
     const result = [];
     const classArray = classNames.split(" ");
-    classArray.forEach((className) => {
+    classArray.forEach(className => {
         if (isDesktopClassWidth(className) && !result.some(isDesktopClassWidth)) {
             result.push(className);
             return;

package/esm/gridLayout/utils/updateGridStateFromClassNames.js

@@ -5,14 +5,38 @@ export const updateGridStateFromClassNames = (gridState, item, colsState) => {
     if (!className) {
         return;
     }
-    const gridColClassesLast = className.split(" ").filter((el) => el.match(GRID_COL_PATTERN)).reverse()[0] || "";
-    const desktopClassesLast = className.split(" ").filter((el) => el.match(DESKTOP_PATTERN)).reverse()[0] || "";
-    const tabletClassesLast = className.split(" ").filter((el) => el.match(TABLET_PATTERN)).reverse()[0] || "";
-    const mobileClassesLast = className.split(" ").filter((el) => el.match(MOBILE_PATTERN)).reverse()[0] || "";
-    const gridColClassesStartLast = className.split(" ").filter((el) => el.match(GRID_COL_START_PATTERN)).reverse()[0] || "";
-    const desktopStartClassesLast = className.split(" ").filter((el) => el.match(DESKTOP_START_PATTERN)).reverse()[0] || "";
-    const tabletStartClassesLast = className.split(" ").filter((el) => el.match(TABLET_START_PATTERN)).reverse()[0] || "";
-    const mobileStartClassesLast = className.split(" ").filter((el) => el.match(MOBILE_START_PATTERN)).reverse()[0] || "";
+    const gridColClassesLast = className
+        .split(" ")
+        .filter(el => el.match(GRID_COL_PATTERN))
+        .reverse()[0] || "";
+    const desktopClassesLast = className
+        .split(" ")
+        .filter(el => el.match(DESKTOP_PATTERN))
+        .reverse()[0] || "";
+    const tabletClassesLast = className
+        .split(" ")
+        .filter(el => el.match(TABLET_PATTERN))
+        .reverse()[0] || "";
+    const mobileClassesLast = className
+        .split(" ")
+        .filter(el => el.match(MOBILE_PATTERN))
+        .reverse()[0] || "";
+    const gridColClassesStartLast = className
+        .split(" ")
+        .filter(el => el.match(GRID_COL_START_PATTERN))
+        .reverse()[0] || "";
+    const desktopStartClassesLast = className
+        .split(" ")
+        .filter(el => el.match(DESKTOP_START_PATTERN))
+        .reverse()[0] || "";
+    const tabletStartClassesLast = className
+        .split(" ")
+        .filter(el => el.match(TABLET_START_PATTERN))
+        .reverse()[0] || "";
+    const mobileStartClassesLast = className
+        .split(" ")
+        .filter(el => el.match(MOBILE_START_PATTERN))
+        .reverse()[0] || "";
     const gridColValue = Number(gridColClassesLast.split(GRID_COL_PREFIX)[1]);
     const lg = Number(desktopClassesLast.split(DESKTOP_PREFIX)[1]);
     const md = Number(tabletClassesLast.split(TABLET_PREFIX)[1]);

package/esm/groupButtonRaw/components/groupButtonOption.js

@@ -1,8 +1,8 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 export const GroupButtonOption = ({ nameGroup, labelName, value, disabled, checked, onChange }) => {
     const inputGroupId = useId();
     const inputKey = useId();
     const labelKey = useId();
-    return _jsxs(_Fragment, { children: [_jsx("input", { type: "radio", onChange: onChange, checked: checked, id: inputGroupId, value: value, disabled: disabled, className: "zen-group-button__input", name: nameGroup }, inputKey), _jsx("label", { htmlFor: inputGroupId, className: "zen-group-button__label zen-ellipsis", children: labelName }, labelKey)] });
+    return (_jsxs("li", { className: "zen-group-button__item", role: "none", children: [_jsx("input", { type: "radio", onChange: onChange, checked: checked, id: inputGroupId, value: value, disabled: disabled, className: "zen-group-button__input", name: nameGroup, role: "radio", "aria-label": labelName }, inputKey), _jsx("label", { htmlFor: inputGroupId, className: "zen-group-button__label zen-ellipsis", children: labelName }, labelKey)] }));
 };

package/esm/groupButtonRaw/groupButtonRaw.js

@@ -13,7 +13,7 @@ export const GroupButtonRaw = (props) => {
     const nameGroupId = useId();
     const driveClasses = useDriveClassName("zen-group-button");
     const mobileClasses = useMobileClassName("zen-group-button");
-    const { name = nameGroupId, disabled, onChange = () => { }, onBlur = () => { }, value = "" } = useFormFieldValues(controller, Object.assign(Object.assign({}, props), { value: valueProp || ((_a = groupData.find((el) => el.selected)) === null || _a === void 0 ? void 0 : _a.value) || (controller === null || controller === void 0 ? void 0 : controller.defaultValue) || "" }));
+    const { name = nameGroupId, disabled, onChange = () => { }, onBlur = () => { }, value = "" } = useFormFieldValues(controller, Object.assign(Object.assign({}, props), { value: valueProp || ((_a = groupData.find(el => el.selected)) === null || _a === void 0 ? void 0 : _a.value) || (controller === null || controller === void 0 ? void 0 : controller.defaultValue) || "" }));
     const onChangeHandlerMemo = useCallback(onChange, [onChange]);
     const onBlurHandlerMemo = useCallback(onBlur, [onBlur]);
     // TODO: do we need pass classes(GridClasses)
@@ -21,5 +21,11 @@ export const GroupButtonRaw = (props) => {
         return _jsx(ReviewTextControl, { value: value.name, className: "zen-group-button__review" });
     }
     // TODO: is it a proper place for onBlur handler?
-    return _jsx("div", { onBlur: onBlurHandlerMemo, className: classNames(["zen-group-button", isError ? "zen-group-button--error" : "", mobileClasses || driveClasses || "", fullWidth ? "zen-group-button--full-width" : "", className || ""]), children: groupData.map((el, index) => _jsx(GroupButtonOption, { nameGroup: name, labelName: el.name, value: el.value, disabled: !!disabled, checked: value === el.value, onChange: onChangeHandlerMemo }, `${name}_${index}_btngroup`)) });
+    return (_jsx("ul", { onBlur: onBlurHandlerMemo, role: "group", "aria-label": props.ariaLabel || "Group Button", className: classNames([
+            "zen-group-button",
+            isError ? "zen-group-button--error" : "",
+            mobileClasses || driveClasses || "",
+            fullWidth ? "zen-group-button--full-width" : "",
+            className || ""
+        ]), children: groupData.map((el, index) => (_jsx(GroupButtonOption, { nameGroup: name, labelName: el.name, value: el.value, disabled: !!disabled, checked: value === el.value, onChange: onChangeHandlerMemo }, `${name}_${index}_btngroup`))) }));
 };

package/esm/groupButtonRaw/types.d.ts

@@ -13,6 +13,7 @@ export interface IGroupButtonRawBase extends IZenComponentProps {
     groupData: IGroupButtons[];
     fullWidth?: boolean;
     value?: string;
+    ariaLabel?: string;
 }
 export interface IGroupButtonRawDefault extends IGroupButtonRawBase {
     disabled?: boolean;

package/esm/groupsFilter/groupsFilter.js

@@ -18,6 +18,4 @@ export const GroupsFilter = (_a) => {
     var props = __rest(_a, []);
     return _jsx(GroupsFilterFormField, Object.assign({}, props));
 };
-export const TRANSLATIONS = [
-    ...GroupsFilterRawTranslations
-];
+export const TRANSLATIONS = [...GroupsFilterRawTranslations];

package/esm/groupsFilterRaw/groupsFilterAdjustmentState.js

@@ -31,6 +31,7 @@ injectString("tr", "Deselect all", "T\xFCm\xFCn\xFCn se\xE7imini iptal et");
 injectString("zh-Hans", "Deselect all", "\u53D6\u6D88\u5168\u9009");
 injectString("zh-TW", "Deselect all", "\u53D6\u6D88\u5168\u9078");
 injectString("ro-RO", "Deselect all", "Deselecta\u021Bi tot");
+injectString("ar-SA", "Deselect all", "\u0625\u0644\u063A\u0627\u0621 \u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0643\u0644");
 injectString("cs", "Select all", "Vybrat v\u0161e");
 injectString("da-DK", "Select all", "V\xE6lg alle");
 injectString("de", "Select all", "Alle ausw\xE4hlen");
@@ -57,6 +58,7 @@ injectString("tr", "Select all", "T\xFCm\xFCn\xFC se\xE7");
 injectString("zh-Hans", "Select all", "\u5168\u9009");
 injectString("zh-TW", "Select all", "\u5168\u9078");
 injectString("ro-RO", "Select all", "Selecta\u021Bi tot");
+injectString("ar-SA", "Select all", "\u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0643\u0644");
 injectString("cs", "Back", "Zp\u011Bt");
 injectString("da-DK", "Back", "Tilbage");
 injectString("de", "Back", "Zur\xFCck");
@@ -83,6 +85,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("cs", "Home", "Dom\u016F");
 injectString("da-DK", "Home", "Hjem");
 injectString("de", "Home", "Zuhause");
@@ -109,6 +112,7 @@ injectString("tr", "Home", "Ev");
 injectString("zh-Hans", "Home", "\u4F4F\u5B85");
 injectString("zh-TW", "Home", "\u9996\u9801");
 injectString("ro-RO", "Home", "Acas\u0103");
+injectString("ar-SA", "Home", "\u0627\u0644\u0631\u0626\u064A\u0633\u064A\u0629");
 export const GroupsFilterAdjustmentState = ({
   children,
   onBackButtonClick,

package/esm/groupsFilterRaw/groupsFilterAdvancedValue.js

@@ -7,7 +7,7 @@ export const getAdvancedFilterValue = ({ blocks, state, isWithColor, uncheckedIt
         const result = createCurrentlySelectedOptions(state, value, isWithColor || false, uncheckedItems, limit, uncheckedAdvancedState);
         return result;
     };
-    const groupsBlocks = blocks.map((val) => getGroupsMenuValue(listLimit, val)).filter((el) => el.length);
+    const groupsBlocks = blocks.map((val) => getGroupsMenuValue(listLimit, val)).filter(el => el.length);
     return groupsBlocks;
 };
 export const getAdvancedLabel = ({ groupsBlocks }) => {

package/esm/groupsFilterRaw/groupsFilterBox.js

@@ -30,6 +30,7 @@ injectString("tr", "Built-in Groups", "Yerle\u015Fik Gruplar");
 injectString("zh-Hans", "Built-in Groups", "\u5185\u7F6E\u7EC4");
 injectString("zh-TW", "Built-in Groups", "\u5167\u5EFA\u7FA4\u7D44");
 injectString("ro-RO", "Built-in Groups", "Grupuri \xEEncorporate");
+injectString("ar-SA", "Built-in Groups", "\u0627\u0644\u0645\u062C\u0645\u0648\u0639\u0627\u062A \u0627\u0644\u0645\u062F\u0645\u062C\u0629");
 injectString("cs", "User Groups", "Skupiny u\u017Eivatel\u016F");
 injectString("da-DK", "User Groups", "Brugergrupper");
 injectString("de", "User Groups", "Benutzergruppen");
@@ -56,6 +57,7 @@ injectString("tr", "User Groups", "Kullan\u0131c\u0131 Gruplar\u0131");
 injectString("zh-Hans", "User Groups", "\u7528\u6237\u7EC4");
 injectString("zh-TW", "User Groups", "\u4F7F\u7528\u8005\u7FA4\u7D44");
 injectString("ro-RO", "User Groups", "Grupuri de utilizatori");
+injectString("ar-SA", "User Groups", "\u0645\u062C\u0645\u0648\u0639\u0627\u062A \u0627\u0644\u0645\u0633\u062A\u062E\u062F\u0645\u064A\u0646");
 injectString("cs", "Advanced Filter", "Roz\u0161\xED\u0159en\xFD filtr");
 injectString("da-DK", "Advanced Filter", "Avanceret filter");
 injectString("de", "Advanced Filter", "Erweiterter Filter");
@@ -82,6 +84,7 @@ injectString("tr", "Advanced Filter", "Geli\u015Fmi\u015F Filtre");
 injectString("zh-Hans", "Advanced Filter", "\u9AD8\u7EA7\u7B5B\u9009\u5668");
 injectString("zh-TW", "Advanced Filter", "\u9032\u968E\u7BE9\u9078");
 injectString("ro-RO", "Advanced Filter", "Filtru avansat");
+injectString("ar-SA", "Advanced Filter", "\u062A\u0635\u0641\u064A\u0629 \u0645\u062A\u0642\u062F\u0645\u0629");
 export const ADVANCED_FILTER_ID = "advancedGroups";
 export const GroupsFilterBox = ({
   blocks,

package/esm/groupsFilterRaw/groupsFilterCommon.js

@@ -30,6 +30,7 @@ injectString("tr", "Currently Selected", "\u015Eu Anda Se\xE7ili");
 injectString("zh-Hans", "Currently Selected", "\u5F53\u524D\u9009\u62E9");
 injectString("zh-TW", "Currently Selected", "\u76EE\u524D\u5DF2\u9078\u53D6");
 injectString("ro-RO", "Currently Selected", "Selec\u021Bie curent\u0103");
+injectString("ar-SA", "Currently Selected", "\u0627\u0644\u0645\u062D\u062F\u062F \u062D\u0627\u0644\u064A\u0627\u064B");
 injectString("cs", "All groups", "V\u0161echny skupiny");
 injectString("da-DK", "All groups", "Alle grupper");
 injectString("de", "All groups", "Alle Gruppen");
@@ -56,6 +57,7 @@ injectString("tr", "All groups", "T\xFCm gruplar");
 injectString("zh-Hans", "All groups", "\u6240\u6709\u7EC4");
 injectString("zh-TW", "All groups", "\u6240\u6709\u7FA4\u7D44");
 injectString("ro-RO", "All groups", "Toate grupurile");
+injectString("ar-SA", "All groups", "\u062C\u0645\u064A\u0639 \u0627\u0644\u0645\u062C\u0645\u0648\u0639\u0627\u062A");
 export const GroupsFilterCurrentlySelectedLabel = ({
   count,
   className

package/esm/groupsFilterRaw/groupsFilterCounter.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "../commonHelpers/classNames/classNames";
-export const GroupsFilterCounter = ({ count, className }) => count ? _jsx("div", { className: classNames(["zen-groups-filter__label-element", className || ""]), children: _jsx("div", { className: "zen-groups-filter__counter body-04", children: _jsx("span", { children: count }) }) }) : null;
+export const GroupsFilterCounter = ({ count, className }) => count ? (_jsx("div", { className: classNames(["zen-groups-filter__label-element", className || ""]), children: _jsx("div", { className: "zen-groups-filter__counter body-04", children: _jsx("span", { children: count }) }) })) : null;