@geotab/zenith 3.11.1 → 3.12.0

package/dist/formGroup/hooks/useCustomRow.js

@@ -7,9 +7,10 @@ const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const formGroupItem_1 = require("../../formGroupItem/formGroupItem");
 const customRow_1 = require("../components/customRow/customRow");
 const useMode_1 = require("./useMode");
+const resolveId_1 = require("../utils/resolveId");
 // eslint-disable-next-line complexity
 const useCustomRowElements = (state) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15;
     const id1 = (0, react_1.useId)();
     const id2 = (0, react_1.useId)();
     const mode = (0, useMode_1.useMode)();
@@ -18,25 +19,27 @@ const useCustomRowElements = (state) => {
     if (mode === "review") {
         let customControl;
         if ((_a = state.elements.control1) === null || _a === void 0 ? void 0 : _a.value) {
-            control1 = (0, react_1.cloneElement)(state.elements.control1.value, { id: state.elements.control1.value.props.id || id1 });
+            const rid1 = (0, resolveId_1.resolveId)(state.elements.control1.value, id1);
+            control1 = (0, react_1.cloneElement)(state.elements.control1.value, { id: rid1 });
         }
         if ((_b = state.elements.control2) === null || _b === void 0 ? void 0 : _b.value) {
-            control2 = (0, react_1.cloneElement)(state.elements.control2.value, { id: state.elements.control2.value.props.id || id2 });
+            const rid2 = (0, resolveId_1.resolveId)(state.elements.control2.value, id2);
+            control2 = (0, react_1.cloneElement)(state.elements.control2.value, { id: rid2 });
         }
         if (state.controlsCount === 2 && state.labelsCount === 2) {
-            customControl = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: ((_d = (_c = state.elements.control1) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.props.id) || id1, value: (_e = state.elements.label1) === null || _e === void 0 ? void 0 : _e.value, tooltip: (_f = state.elements.label1) === null || _f === void 0 ? void 0 : _f.tooltip, className: (0, classNames_1.classNames)([
+            customControl = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: ((_c = state.elements.control1) === null || _c === void 0 ? void 0 : _c.value) ? (0, resolveId_1.resolveId)(state.elements.control1.value, id1) : id1, value: (_d = state.elements.label1) === null || _d === void 0 ? void 0 : _d.value, tooltip: (_e = state.elements.label1) === null || _e === void 0 ? void 0 : _e.tooltip, className: (0, classNames_1.classNames)([
                             "zen-field-label--custom-width",
-                            ((_g = state.elements.label1) === null || _g === void 0 ? void 0 : _g.className) || "",
+                            ((_f = state.elements.label1) === null || _f === void 0 ? void 0 : _f.className) || "",
                             state.customLabelClasses || ""
-                        ]) }), (0, jsx_runtime_1.jsx)(customRow_1.CustomRow, { className: state.customControlClasses, children: control1 }), (0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: ((_j = (_h = state.elements.control2) === null || _h === void 0 ? void 0 : _h.value) === null || _j === void 0 ? void 0 : _j.props.id) || id2, value: (_k = state.elements.label2) === null || _k === void 0 ? void 0 : _k.value, tooltip: (_l = state.elements.label2) === null || _l === void 0 ? void 0 : _l.tooltip, className: (0, classNames_1.classNames)(["zen-field-label--custom-width", ((_m = state.elements.label2) === null || _m === void 0 ? void 0 : _m.className) || ""]) }), (0, jsx_runtime_1.jsx)(customRow_1.CustomRow, { className: state.customControlClasses, children: control2 })] }));
+                        ]) }), (0, jsx_runtime_1.jsx)(customRow_1.CustomRow, { className: state.customControlClasses, children: control1 }), (0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: ((_g = state.elements.control2) === null || _g === void 0 ? void 0 : _g.value) ? (0, resolveId_1.resolveId)(state.elements.control2.value, id2) : id2, value: (_h = state.elements.label2) === null || _h === void 0 ? void 0 : _h.value, tooltip: (_j = state.elements.label2) === null || _j === void 0 ? void 0 : _j.tooltip, className: (0, classNames_1.classNames)(["zen-field-label--custom-width", ((_k = state.elements.label2) === null || _k === void 0 ? void 0 : _k.className) || ""]) }), (0, jsx_runtime_1.jsx)(customRow_1.CustomRow, { className: state.customControlClasses, children: control2 })] }));
             return {
                 customControl
             };
         }
         if (state.controlsCount > 1) {
-            customControl = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: ((_p = (_o = state.elements.control1) === null || _o === void 0 ? void 0 : _o.value) === null || _p === void 0 ? void 0 : _p.props.id) || id1, value: (_q = state.elements.label1) === null || _q === void 0 ? void 0 : _q.value, tooltip: (_r = state.elements.label1) === null || _r === void 0 ? void 0 : _r.tooltip, className: (0, classNames_1.classNames)([
+            customControl = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: ((_l = state.elements.control1) === null || _l === void 0 ? void 0 : _l.value) ? (0, resolveId_1.resolveId)(state.elements.control1.value, id1) : id1, value: (_m = state.elements.label1) === null || _m === void 0 ? void 0 : _m.value, tooltip: (_o = state.elements.label1) === null || _o === void 0 ? void 0 : _o.tooltip, className: (0, classNames_1.classNames)([
                             "zen-field-label--custom-width",
-                            ((_s = state.elements.label1) === null || _s === void 0 ? void 0 : _s.className) || "",
+                            ((_p = state.elements.label1) === null || _p === void 0 ? void 0 : _p.className) || "",
                             state.customLabelClasses || ""
                         ]) }), (0, jsx_runtime_1.jsxs)(customRow_1.CustomRow, { className: state.customControlClasses, children: [control1, control2] })] }));
             return {
@@ -44,10 +47,12 @@ const useCustomRowElements = (state) => {
             };
         }
     }
-    if (state.custom && state.totalCount === 4 && ((_t = state.elements.control1) === null || _t === void 0 ? void 0 : _t.value) && ((_u = state.elements.control2) === null || _u === void 0 ? void 0 : _u.value)) {
-        control1 = (0, react_1.cloneElement)(state.elements.control1.value, { id: state.elements.control1.value.props.id || id1 });
-        control2 = (0, react_1.cloneElement)(state.elements.control2.value, { id: state.elements.control2.value.props.id || id2 });
-        const customControl = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: state.elements.control1.value.props.id || id1, value: (_v = state.elements.label1) === null || _v === void 0 ? void 0 : _v.value, tooltip: (_w = state.elements.label1) === null || _w === void 0 ? void 0 : _w.tooltip, className: (0, classNames_1.classNames)([((_x = state.elements.label1) === null || _x === void 0 ? void 0 : _x.className) || "", "zen-field-label--custom-width", state.customLabelClasses || ""]) }), (0, jsx_runtime_1.jsxs)(customRow_1.CustomRow, { className: state.customControlClasses, children: [control1, (0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: state.elements.control2.value.props.id || id2, value: (_y = state.elements.label2) === null || _y === void 0 ? void 0 : _y.value, tooltip: (_z = state.elements.label2) === null || _z === void 0 ? void 0 : _z.tooltip, className: (0, classNames_1.classNames)([((_0 = state.elements.label2) === null || _0 === void 0 ? void 0 : _0.className) || "", "zen-field-label--custom-width"]) }), control2] })] }));
+    if (state.custom && state.totalCount === 4 && ((_q = state.elements.control1) === null || _q === void 0 ? void 0 : _q.value) && ((_r = state.elements.control2) === null || _r === void 0 ? void 0 : _r.value)) {
+        const rid1 = (0, resolveId_1.resolveId)(state.elements.control1.value, id1);
+        const rid2 = (0, resolveId_1.resolveId)(state.elements.control2.value, id2);
+        control1 = (0, react_1.cloneElement)(state.elements.control1.value, { id: rid1 });
+        control2 = (0, react_1.cloneElement)(state.elements.control2.value, { id: rid2 });
+        const customControl = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: rid1, value: (_s = state.elements.label1) === null || _s === void 0 ? void 0 : _s.value, tooltip: (_t = state.elements.label1) === null || _t === void 0 ? void 0 : _t.tooltip, className: (0, classNames_1.classNames)([((_u = state.elements.label1) === null || _u === void 0 ? void 0 : _u.className) || "", "zen-field-label--custom-width", state.customLabelClasses || ""]) }), (0, jsx_runtime_1.jsxs)(customRow_1.CustomRow, { className: state.customControlClasses, children: [control1, (0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: rid2, value: (_v = state.elements.label2) === null || _v === void 0 ? void 0 : _v.value, tooltip: (_w = state.elements.label2) === null || _w === void 0 ? void 0 : _w.tooltip, className: (0, classNames_1.classNames)([((_x = state.elements.label2) === null || _x === void 0 ? void 0 : _x.className) || "", "zen-field-label--custom-width"]) }), control2] })] }));
         return {
             customControl
         };
@@ -56,11 +61,13 @@ const useCustomRowElements = (state) => {
         state.totalCount === 3 &&
         state.labelsCount === 1 &&
         !state.elements.label1 &&
-        ((_1 = state.elements.control1) === null || _1 === void 0 ? void 0 : _1.value) &&
-        ((_2 = state.elements.control2) === null || _2 === void 0 ? void 0 : _2.value)) {
-        control1 = (0, react_1.cloneElement)(state.elements.control1.value, { id: state.elements.control1.value.props.id || id1 });
-        control2 = (0, react_1.cloneElement)(state.elements.control2.value, { id: state.elements.control2.value.props.id || id2 });
-        const customControl = ((0, jsx_runtime_1.jsxs)(customRow_1.CustomRow, { className: state.customControlClasses, children: [control1, (0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: state.elements.control2.value.props.id || id2, value: (_3 = state.elements.label2) === null || _3 === void 0 ? void 0 : _3.value, tooltip: (_4 = state.elements.label2) === null || _4 === void 0 ? void 0 : _4.tooltip, className: (0, classNames_1.classNames)([((_5 = state.elements.label2) === null || _5 === void 0 ? void 0 : _5.className) || "", "zen-field-label--custom-width"]) }), control2] }));
+        ((_y = state.elements.control1) === null || _y === void 0 ? void 0 : _y.value) &&
+        ((_z = state.elements.control2) === null || _z === void 0 ? void 0 : _z.value)) {
+        const rid1 = (0, resolveId_1.resolveId)(state.elements.control1.value, id1);
+        const rid2 = (0, resolveId_1.resolveId)(state.elements.control2.value, id2);
+        control1 = (0, react_1.cloneElement)(state.elements.control1.value, { id: rid1 });
+        control2 = (0, react_1.cloneElement)(state.elements.control2.value, { id: rid2 });
+        const customControl = ((0, jsx_runtime_1.jsxs)(customRow_1.CustomRow, { className: state.customControlClasses, children: [control1, (0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: rid2, value: (_0 = state.elements.label2) === null || _0 === void 0 ? void 0 : _0.value, tooltip: (_1 = state.elements.label2) === null || _1 === void 0 ? void 0 : _1.tooltip, className: (0, classNames_1.classNames)([((_2 = state.elements.label2) === null || _2 === void 0 ? void 0 : _2.className) || "", "zen-field-label--custom-width"]) }), control2] }));
         return {
             customControl
         };
@@ -69,36 +76,43 @@ const useCustomRowElements = (state) => {
         state.totalCount === 3 &&
         state.labelsCount === 1 &&
         state.controlsCount === 2 &&
-        ((_6 = state.elements.control1) === null || _6 === void 0 ? void 0 : _6.value) &&
-        ((_7 = state.elements.control2) === null || _7 === void 0 ? void 0 : _7.value)) {
-        control1 = (0, react_1.cloneElement)(state.elements.control1.value, { id: state.elements.control1.value.props.id || id1 });
-        control2 = (0, react_1.cloneElement)(state.elements.control2.value, { id: state.elements.control2.value.props.id || id2 });
-        const customControl = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: state.elements.control1.value.props.id || id1, value: (_8 = state.elements.label1) === null || _8 === void 0 ? void 0 : _8.value, tooltip: (_9 = state.elements.label1) === null || _9 === void 0 ? void 0 : _9.tooltip, className: (0, classNames_1.classNames)(["zen-field-label--custom-width", ((_10 = state.elements.label1) === null || _10 === void 0 ? void 0 : _10.className) || "", state.customLabelClasses || ""]) }), (0, jsx_runtime_1.jsxs)(customRow_1.CustomRow, { className: state.customControlClasses, children: [control1, control2] })] }));
+        ((_3 = state.elements.control1) === null || _3 === void 0 ? void 0 : _3.value) &&
+        ((_4 = state.elements.control2) === null || _4 === void 0 ? void 0 : _4.value)) {
+        const rid1 = (0, resolveId_1.resolveId)(state.elements.control1.value, id1);
+        const rid2 = (0, resolveId_1.resolveId)(state.elements.control2.value, id2);
+        control1 = (0, react_1.cloneElement)(state.elements.control1.value, { id: rid1 });
+        control2 = (0, react_1.cloneElement)(state.elements.control2.value, { id: rid2 });
+        const customControl = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: rid1, value: (_5 = state.elements.label1) === null || _5 === void 0 ? void 0 : _5.value, tooltip: (_6 = state.elements.label1) === null || _6 === void 0 ? void 0 : _6.tooltip, className: (0, classNames_1.classNames)(["zen-field-label--custom-width", ((_7 = state.elements.label1) === null || _7 === void 0 ? void 0 : _7.className) || "", state.customLabelClasses || ""]) }), (0, jsx_runtime_1.jsxs)(customRow_1.CustomRow, { className: state.customControlClasses, children: [control1, control2] })] }));
         return {
             customControl
         };
     }
-    if (state.custom && state.totalCount === 2 && state.controlsCount === 2 && ((_11 = state.elements.control1) === null || _11 === void 0 ? void 0 : _11.value) && ((_12 = state.elements.control2) === null || _12 === void 0 ? void 0 : _12.value)) {
-        control1 = (0, react_1.cloneElement)(state.elements.control1.value, { id: state.elements.control1.value.props.id || id1 });
-        control2 = (0, react_1.cloneElement)(state.elements.control2.value, { id: state.elements.control2.value.props.id || id2 });
+    if (state.custom && state.totalCount === 2 && state.controlsCount === 2 && ((_8 = state.elements.control1) === null || _8 === void 0 ? void 0 : _8.value) && ((_9 = state.elements.control2) === null || _9 === void 0 ? void 0 : _9.value)) {
+        const rid1 = (0, resolveId_1.resolveId)(state.elements.control1.value, id1);
+        const rid2 = (0, resolveId_1.resolveId)(state.elements.control2.value, id2);
+        control1 = (0, react_1.cloneElement)(state.elements.control1.value, { id: rid1 });
+        control2 = (0, react_1.cloneElement)(state.elements.control2.value, { id: rid2 });
         const customControl = ((0, jsx_runtime_1.jsxs)(customRow_1.CustomRow, { className: state.customControlClasses, children: [control1, control2] }));
         return {
             customControl
         };
     }
-    if (state.custom && state.totalCount === 2 && state.labelsCount === 1 && ((_13 = state.elements.control1) === null || _13 === void 0 ? void 0 : _13.value)) {
-        control1 = (0, react_1.cloneElement)(state.elements.control1.value, { id: state.elements.control1.value.props.id || id1 });
-        const customControl = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: state.elements.control1.value.props.id || id1, value: (_14 = state.elements.label1) === null || _14 === void 0 ? void 0 : _14.value, tooltip: (_15 = state.elements.label1) === null || _15 === void 0 ? void 0 : _15.tooltip, className: (0, classNames_1.classNames)(["zen-field-label--custom-width", ((_16 = state.elements.label1) === null || _16 === void 0 ? void 0 : _16.className) || "", state.customLabelClasses || ""]) }), (0, jsx_runtime_1.jsx)(customRow_1.CustomRow, { className: state.customControlClasses, children: control1 })] }));
+    if (state.custom && state.totalCount === 2 && state.labelsCount === 1 && ((_10 = state.elements.control1) === null || _10 === void 0 ? void 0 : _10.value)) {
+        const rid1 = (0, resolveId_1.resolveId)(state.elements.control1.value, id1);
+        control1 = (0, react_1.cloneElement)(state.elements.control1.value, { id: rid1 });
+        const customControl = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: rid1, value: (_11 = state.elements.label1) === null || _11 === void 0 ? void 0 : _11.value, tooltip: (_12 = state.elements.label1) === null || _12 === void 0 ? void 0 : _12.tooltip, className: (0, classNames_1.classNames)(["zen-field-label--custom-width", ((_13 = state.elements.label1) === null || _13 === void 0 ? void 0 : _13.className) || "", state.customLabelClasses || ""]) }), (0, jsx_runtime_1.jsx)(customRow_1.CustomRow, { className: state.customControlClasses, children: control1 })] }));
         return {
             customControl
         };
     }
     if (state.custom && state.totalCount === 1 && state.controlsCount === 1) {
-        if ((_17 = state.elements.control1) === null || _17 === void 0 ? void 0 : _17.value) {
-            control1 = (0, react_1.cloneElement)(state.elements.control1.value, { id: state.elements.control1.value.props.id || id1 });
+        if ((_14 = state.elements.control1) === null || _14 === void 0 ? void 0 : _14.value) {
+            const rid1 = (0, resolveId_1.resolveId)(state.elements.control1.value, id1);
+            control1 = (0, react_1.cloneElement)(state.elements.control1.value, { id: rid1 });
         }
-        else if ((_18 = state.elements.control2) === null || _18 === void 0 ? void 0 : _18.value) {
-            control1 = (0, react_1.cloneElement)(state.elements.control2.value, { id: state.elements.control2.value.props.id || id2 });
+        else if ((_15 = state.elements.control2) === null || _15 === void 0 ? void 0 : _15.value) {
+            const rid2 = (0, resolveId_1.resolveId)(state.elements.control2.value, id2);
+            control1 = (0, react_1.cloneElement)(state.elements.control2.value, { id: rid2 });
         }
         const customControl = (0, jsx_runtime_1.jsx)(customRow_1.CustomRow, { className: state.customControlClasses, children: control1 });
         return {

package/dist/formGroup/hooks/useRowElements.js

@@ -3,8 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRowElements = void 0;
 const react_1 = require("react");
 const useCustomRow_1 = require("./useCustomRow");
+const resolveId_1 = require("../utils/resolveId");
 const useRowElements = (state) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const id1 = (0, react_1.useId)();
     const id2 = (0, react_1.useId)();
     let control1;
@@ -13,12 +14,14 @@ const useRowElements = (state) => {
     if (customControl) {
         return { customControl };
     }
-    if ((_a = state.elements.control1) === null || _a === void 0 ? void 0 : _a.value) {
-        control1 = (0, react_1.cloneElement)(state.elements.control1.value, { id: state.elements.control1.value.props.id || id1 });
+    const resolvedId1 = ((_a = state.elements.control1) === null || _a === void 0 ? void 0 : _a.value) ? (0, resolveId_1.resolveId)(state.elements.control1.value, id1) : id1;
+    const resolvedId2 = ((_b = state.elements.control2) === null || _b === void 0 ? void 0 : _b.value) ? (0, resolveId_1.resolveId)(state.elements.control2.value, id2) : id2;
+    if ((_c = state.elements.control1) === null || _c === void 0 ? void 0 : _c.value) {
+        control1 = (0, react_1.cloneElement)(state.elements.control1.value, { id: resolvedId1 });
     }
-    if ((_b = state.elements.control2) === null || _b === void 0 ? void 0 : _b.value) {
-        control2 = (0, react_1.cloneElement)(state.elements.control2.value, { id: state.elements.control2.value.props.id || id2 });
+    if ((_d = state.elements.control2) === null || _d === void 0 ? void 0 : _d.value) {
+        control2 = (0, react_1.cloneElement)(state.elements.control2.value, { id: resolvedId2 });
     }
-    return { control1, control2, id1, id2 };
+    return { control1, control2, id1: resolvedId1, id2: resolvedId2 };
 };
 exports.useRowElements = useRowElements;

package/dist/formGroup/hooks/useToggle.js

@@ -44,7 +44,7 @@ injectString("tr", "Sub-options are not active.", "Sub-options are not active.")
 injectString("zh-Hans", "Sub-options are not active.", "Sub-options are not active.");
 injectString("zh-TW", "Sub-options are not active.", "Sub-options are not active.");
 injectString("ro-RO", "Sub-options are not active.", "Nu sunt active op\u021Biuni secundare.");
-injectString("ar-SA", "Sub-options are not active.", "\u0627\u0644\u062E\u064A\u0627\u0631\u0627\u062A \u0627\u0644\u0641\u0631\u0639\u064A\u0629 \u063A\u064A\u0631 \u0646\u0634\u0637\u0629.");
+injectString("ar", "Sub-options are not active.", "\u0627\u0644\u062E\u064A\u0627\u0631\u0627\u062A \u0627\u0644\u0641\u0631\u0639\u064A\u0629 \u063A\u064A\u0631 \u0646\u0634\u0637\u0629.");
 const useToggle = result => {
   const {
     controller,

package/dist/formGroup/types.d.ts

@@ -10,6 +10,10 @@ export interface IControlState {
     type: "control";
     value?: ReactElement<{
         id?: string;
+        name?: string;
+        controller?: {
+            name?: string;
+        };
         gridFitContent?: boolean;
         width?: string | number;
     }>;

package/dist/formGroup/utils/normalizeFieldId.d.ts

@@ -0,0 +1 @@
+export declare const normalizeFieldId: (name: string) => string;

package/dist/formGroup/utils/normalizeFieldId.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeFieldId = void 0;
+const normalizeFieldId = (name) => name.replace(/\./g, "-");
+exports.normalizeFieldId = normalizeFieldId;

package/dist/formGroup/utils/resolveId.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export declare const resolveId: (element: React.ReactElement<{
+    id?: string;
+    controller?: {
+        name?: string;
+    };
+}>, fallback: string) => string;

package/dist/formGroup/utils/resolveId.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveId = void 0;
+const normalizeFieldId_1 = require("./normalizeFieldId");
+const resolveId = (element, fallback) => { var _a; return element.props.id || (((_a = element.props.controller) === null || _a === void 0 ? void 0 : _a.name) && (0, normalizeFieldId_1.normalizeFieldId)(element.props.controller.name)) || fallback; };
+exports.resolveId = resolveId;

package/dist/formLayout/components/getLayoutColumns.js

@@ -13,11 +13,13 @@ const getLayoutColumns = (children) => {
     if (!Array.isArray(children)) {
         return (0, react_1.isValidElement)(children) && children.type === layoutColum_1.LayoutColumn ? [children] : [(0, jsx_runtime_1.jsx)(layoutColum_1.LayoutColumn, { children: children }, "column1")];
     }
-    const layoutColumns = children.filter(child => child.type === layoutColum_1.LayoutColumn && child.props.children).slice(0, 2);
+    const layoutColumns = children
+        .filter(child => (0, react_1.isValidElement)(child) && child.type === layoutColum_1.LayoutColumn && child.props.children)
+        .slice(0, 2);
     if (layoutColumns.length) {
         return layoutColumns;
     }
-    const sections = children.filter((el) => el.type === formSection_1.FormSection || (0, isCustomFormSection_1.isCustomFormSection)(el));
+    const sections = children.filter((el) => (0, react_1.isValidElement)(el) && (el.type === formSection_1.FormSection || (0, isCustomFormSection_1.isCustomFormSection)(el)));
     if (sections.length === 1) {
         return [(0, jsx_runtime_1.jsx)(layoutColum_1.LayoutColumn, { children: sections }, "column1")];
     }

package/dist/formLayout/hooks/useError.js

@@ -37,7 +37,7 @@ injectString("tr", "Reload", "Yeniden y\xFCkle");
 injectString("zh-Hans", "Reload", "\u91CD\u65B0\u52A0\u8F7D");
 injectString("zh-TW", "Reload", "\u91CD\u65B0\u8F09\u5165");
 injectString("ro-RO", "Reload", "Re\xEEnc\u0103rca\u021Bi");
-injectString("ar-SA", "Reload", "\u0625\u0639\u0627\u062F\u0629 \u062A\u062D\u0645\u064A\u0644");
+injectString("ar", "Reload", "\u0625\u0639\u0627\u062F\u0629 \u062A\u062D\u0645\u064A\u0644");
 injectString("cs", "Failed to load page", "Failed to load page");
 injectString("da-DK", "Failed to load page", "Failed to load page");
 injectString("de", "Failed to load page", "Failed to load page");
@@ -64,7 +64,7 @@ injectString("tr", "Failed to load page", "Failed to load page");
 injectString("zh-Hans", "Failed to load page", "Failed to load page");
 injectString("zh-TW", "Failed to load page", "Failed to load page");
 injectString("ro-RO", "Failed to load page", "Nu s-a putut \xEEnc\u0103rca pagina");
-injectString("ar-SA", "Failed to load page", "\u0641\u0634\u0644 \u062A\u062D\u0645\u064A\u0644 \u0627\u0644\u0635\u0641\u062D\u0629");
+injectString("ar", "Failed to load page", "\u0641\u0634\u0644 \u062A\u062D\u0645\u064A\u0644 \u0627\u0644\u0635\u0641\u062D\u0629");
 injectString("cs", "Please refresh the page and try again. If the issue persists, contact Support.", "Please refresh the page and try again. If the issue persists, contact Support.");
 injectString("da-DK", "Please refresh the page and try again. If the issue persists, contact Support.", "Please refresh the page and try again. If the issue persists, contact Support.");
 injectString("de", "Please refresh the page and try again. If the issue persists, contact Support.", "Please refresh the page and try again. If the issue persists, contact Support.");
@@ -91,7 +91,7 @@ injectString("tr", "Please refresh the page and try again. If the issue persists
 injectString("zh-Hans", "Please refresh the page and try again. If the issue persists, contact Support.", "Please refresh the page and try again. If the issue persists, contact Support.");
 injectString("zh-TW", "Please refresh the page and try again. If the issue persists, contact Support.", "Please refresh the page and try again. If the issue persists, contact Support.");
 injectString("ro-RO", "Please refresh the page and try again. If the issue persists, contact Support.", "Re\xEEnc\u0103rca\u021Bi pagina \u0219i \xEEncerca\u021Bi din nou. Dac\u0103 problema persist\u0103, contacta\u021Bi Asisten\u021Ba.");
-injectString("ar-SA", "Please refresh the page and try again. If the issue persists, contact Support.", "\u064A\u0631\u062C\u0649 \u062A\u062D\u062F\u064A\u062B \u0627\u0644\u0635\u0641\u062D\u0629 \u0648\u0627\u0644\u0645\u062D\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062E\u0631\u0649. \u0625\u0630\u0627 \u0627\u0633\u062A\u0645\u0631\u062A \u0627\u0644\u0645\u0634\u0643\u0644\u0629\u060C \u0627\u062A\u0635\u0644 \u0628\u0627\u0644\u062F\u0639\u0645.");
+injectString("ar", "Please refresh the page and try again. If the issue persists, contact Support.", "\u064A\u0631\u062C\u0649 \u062A\u062D\u062F\u064A\u062B \u0627\u0644\u0635\u0641\u062D\u0629 \u0648\u0627\u0644\u0645\u062D\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062E\u0631\u0649. \u0625\u0630\u0627 \u0627\u0633\u062A\u0645\u0631\u062A \u0627\u0644\u0645\u0634\u0643\u0644\u0629\u060C \u0627\u062A\u0635\u0644 \u0628\u0627\u0644\u062F\u0639\u0645.");
 const useError = props => {
   const {
     translate

package/dist/formLayout/hooks/useErrorSummary.d.ts

@@ -0,0 +1,6 @@
+import type { FieldErrors } from "react-hook-form";
+import { IBanner } from "../../banner/banner";
+export interface IUseErrorSummaryConfig extends Pick<IBanner, "size"> {
+    autoPrefix?: boolean;
+}
+export declare const useErrorSummary: (errors: FieldErrors, { autoPrefix, size }?: IUseErrorSummaryConfig) => React.ReactElement | null;

package/dist/formLayout/hooks/useErrorSummary.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useErrorSummary = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const banner_1 = require("../../banner/banner");
+const bannerErrorSummary_1 = require("../../banner/bannerErrorSummary");
+const flattenErrors_1 = require("../utils/flattenErrors");
+const getFieldLabel_1 = require("../utils/getFieldLabel");
+const normalizeFieldId_1 = require("../../formGroup/utils/normalizeFieldId");
+const MAX_ERROR_SUMMARY_ITEMS = 8;
+const useErrorSummary = (errors, { autoPrefix = true, size = "XXL" } = {}) => {
+    const errorsKey = Object.entries(errors)
+        .map(([key, val]) => { var _a; return `${key}:${(_a = val.message) !== null && _a !== void 0 ? _a : ""}`; })
+        .join(",");
+    const items = (0, react_1.useMemo)(() => (0, flattenErrors_1.flattenErrors)(errors).map(({ name, error }) => {
+        var _a;
+        const id = (0, normalizeFieldId_1.normalizeFieldId)(name);
+        const label = autoPrefix ? (0, getFieldLabel_1.getFieldLabel)(id) : null;
+        const message = (_a = error.message) !== null && _a !== void 0 ? _a : "";
+        return {
+            name,
+            value: label ? `${label} - ${message}` : message,
+            link: `#${id}`
+        };
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [errorsKey, autoPrefix]);
+    if (items.length === 0) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(banner_1.Banner, { type: "error", size: size, children: items.slice(0, MAX_ERROR_SUMMARY_ITEMS).map((item, index) => ((0, jsx_runtime_1.jsx)(bannerErrorSummary_1.BannerErrorSummary, { value: item.value, link: item.link }, `${item.name}-${index}`))) }));
+};
+exports.useErrorSummary = useErrorSummary;

package/dist/formLayout/hooks/useFormButtons.js

@@ -41,7 +41,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", "Edit", "Upravit");
 injectString("da-DK", "Edit", "Rediger");
 injectString("de", "Edit", "Bearbeiten");
@@ -68,7 +68,7 @@ injectString("tr", "Edit", "D\xFCzenle");
 injectString("zh-Hans", "Edit", "\u7F16\u8F91");
 injectString("zh-TW", "Edit", "\u7DE8\u8F2F");
 injectString("ro-RO", "Edit", "Edita\u021Bi");
-injectString("ar-SA", "Edit", "\u062A\u0639\u062F\u064A\u0644");
+injectString("ar", "Edit", "\u062A\u0639\u062F\u064A\u0644");
 injectString("cs", "Cancel", "Zru\u0161it");
 injectString("da-DK", "Cancel", "Annuller");
 injectString("de", "Cancel", "Abbrechen");
@@ -95,7 +95,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");
 const useFormButtons = (props = {}) => {
   const {
     onSave,

package/dist/formLayout/utils/applyGridPropsStatic.js

@@ -23,7 +23,7 @@ const applyGridPropsStatic = (element, indx, columns, result) => {
         result.push((0, react_1.cloneElement)(element, {
             // @ts-ignore
             gridLgStart: 3,
-            gridLg: 7,
+            gridLg: 8,
             gridMdStart: 2,
             gridMd: 6,
             gridSmStart: 1,

package/dist/formLayout/utils/flattenErrors.d.ts

@@ -0,0 +1,5 @@
+import type { FieldError, FieldErrors } from "react-hook-form";
+export declare const flattenErrors: (errors: FieldErrors, prefix?: string) => {
+    name: string;
+    error: FieldError;
+}[];

package/dist/formLayout/utils/flattenErrors.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.flattenErrors = void 0;
+const flattenErrors = (errors, prefix = "") => Object.entries(errors).flatMap(([key, value]) => {
+    const fullKey = prefix ? `${prefix}.${key}` : key;
+    if (value && typeof value === "object" && "type" in value) {
+        return [{ name: fullKey, error: value }];
+    }
+    if (value && typeof value === "object") {
+        return (0, exports.flattenErrors)(value, fullKey);
+    }
+    return [];
+});
+exports.flattenErrors = flattenErrors;

package/dist/formLayout/utils/getChildrenWithCustomColumns.js

@@ -15,6 +15,9 @@ const getChildrenWithCustomColumns = (children) => {
         return (0, react_1.isValidElement)(children) && children.type === layoutColum_1.LayoutColumn ? [children.props.children] : [children];
     }
     let filtered = children.filter(child => {
+        if (!(0, react_1.isValidElement)(child)) {
+            return false;
+        }
         if (child.type !== layoutColum_1.LayoutColumn) {
             return true;
         }

package/dist/formLayout/utils/getFieldLabel.d.ts

@@ -0,0 +1 @@
+export declare const getFieldLabel: (id: string) => string | null;

package/dist/formLayout/utils/getFieldLabel.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFieldLabel = void 0;
+const zen_1 = require("../../utils/zen");
+const getFieldLabel = (id) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    if (typeof zen_1.zen.document === "undefined" || typeof zen_1.zen.document.querySelector !== "function")
+        return null;
+    const direct = (_b = (_a = zen_1.zen.document.querySelector(`label[for="${id}"]`)) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim();
+    if (direct !== undefined)
+        return direct || null;
+    const row = (_c = zen_1.zen.document.getElementById(id)) === null || _c === void 0 ? void 0 : _c.closest(".zen-custom-form-row");
+    if (!row)
+        return null;
+    let sibling = row.previousElementSibling;
+    while (sibling) {
+        if (sibling.tagName === "LABEL")
+            return (_e = (_d = sibling.textContent) === null || _d === void 0 ? void 0 : _d.trim()) !== null && _e !== void 0 ? _e : null;
+        const inner = sibling.querySelector("label");
+        if (inner)
+            return (_g = (_f = inner.textContent) === null || _f === void 0 ? void 0 : _f.trim()) !== null && _g !== void 0 ? _g : null;
+        sibling = sibling.previousElementSibling;
+    }
+    return null;
+};
+exports.getFieldLabel = getFieldLabel;

package/dist/formSection/hooks/useError.js

@@ -38,7 +38,7 @@ injectString("tr", "Reload", "Yeniden y\xFCkle");
 injectString("zh-Hans", "Reload", "\u91CD\u65B0\u52A0\u8F7D");
 injectString("zh-TW", "Reload", "\u91CD\u65B0\u8F09\u5165");
 injectString("ro-RO", "Reload", "Re\xEEnc\u0103rca\u021Bi");
-injectString("ar-SA", "Reload", "\u0625\u0639\u0627\u062F\u0629 \u062A\u062D\u0645\u064A\u0644");
+injectString("ar", "Reload", "\u0625\u0639\u0627\u062F\u0629 \u062A\u062D\u0645\u064A\u0644");
 injectString("cs", "Failed to load section", "Failed to load section");
 injectString("da-DK", "Failed to load section", "Failed to load section");
 injectString("de", "Failed to load section", "Failed to load section");
@@ -65,7 +65,7 @@ injectString("tr", "Failed to load section", "Failed to load section");
 injectString("zh-Hans", "Failed to load section", "Failed to load section");
 injectString("zh-TW", "Failed to load section", "Failed to load section");
 injectString("ro-RO", "Failed to load section", "Nu s-a putut \xEEnc\u0103rca sec\u021Biunea");
-injectString("ar-SA", "Failed to load section", "\u0641\u0634\u0644 \u062A\u062D\u0645\u064A\u0644 \u0627\u0644\u0642\u0633\u0645");
+injectString("ar", "Failed to load section", "\u0641\u0634\u0644 \u062A\u062D\u0645\u064A\u0644 \u0627\u0644\u0642\u0633\u0645");
 injectString("cs", "Please reload this section to try again. If the issue persists, contact Support.", "Please reload this section to try again. If the issue persists, contact Support.");
 injectString("da-DK", "Please reload this section to try again. If the issue persists, contact Support.", "Please reload this section to try again. If the issue persists, contact Support.");
 injectString("de", "Please reload this section to try again. If the issue persists, contact Support.", "Please reload this section to try again. If the issue persists, contact Support.");
@@ -92,7 +92,7 @@ injectString("tr", "Please reload this section to try again. If the issue persis
 injectString("zh-Hans", "Please reload this section to try again. If the issue persists, contact Support.", "Please reload this section to try again. If the issue persists, contact Support.");
 injectString("zh-TW", "Please reload this section to try again. If the issue persists, contact Support.", "Please reload this section to try again. If the issue persists, contact Support.");
 injectString("ro-RO", "Please reload this section to try again. If the issue persists, contact Support.", "Re\xEEnc\u0103rca\u021Bi aceast\u0103 sec\u021Biune pentru a \xEEncerca din nou. Dac\u0103 problema persist\u0103, contacta\u021Bi Asisten\u021Ba.");
-injectString("ar-SA", "Please reload this section to try again. If the issue persists, contact Support.", "\u064A\u0631\u062C\u0649 \u0625\u0639\u0627\u062F\u0629 \u062A\u062D\u0645\u064A\u0644 \u0647\u0630\u0627 \u0627\u0644\u0642\u0633\u0645 \u0644\u0644\u0645\u062D\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062E\u0631\u0649. \u0625\u0630\u0627 \u0627\u0633\u062A\u0645\u0631\u062A \u0627\u0644\u0645\u0634\u0643\u0644\u0629\u060C \u0627\u062A\u0635\u0644 \u0628\u0627\u0644\u062F\u0639\u0645.");
+injectString("ar", "Please reload this section to try again. If the issue persists, contact Support.", "\u064A\u0631\u062C\u0649 \u0625\u0639\u0627\u062F\u0629 \u062A\u062D\u0645\u064A\u0644 \u0647\u0630\u0627 \u0627\u0644\u0642\u0633\u0645 \u0644\u0644\u0645\u062D\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062E\u0631\u0649. \u0625\u0630\u0627 \u0627\u0633\u062A\u0645\u0631\u062A \u0627\u0644\u0645\u0634\u0643\u0644\u0629\u060C \u0627\u062A\u0635\u0644 \u0628\u0627\u0644\u062F\u0639\u0645.");
 const useError = props => {
   const {
     translate

package/dist/formStepper/components/formStep.js

@@ -38,7 +38,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");
+injectString("ar", "Optional", "\u0627\u062E\u062A\u064A\u0627\u0631\u064A");
 const FormStep = ({
   isFirst,
   value,

package/dist/formStepper/formStepper.js

@@ -38,7 +38,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("ar", "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");
@@ -65,7 +65,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");
+injectString("ar", "Optional", "\u0627\u062E\u062A\u064A\u0627\u0631\u064A");
 const MAX_STEPS = 7;
 exports.STEPPER_LAST_STEP = "lastStep";
 const FormStepper = ({

package/dist/formStepperButtons/formStepperButtons.js

@@ -11,6 +11,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const button_1 = require("../button/button");
 const iconChevronLeft_1 = require("../icons/iconChevronLeft");
+const iconChevronRight_1 = require("../icons/iconChevronRight");
+const useDirectionalIcon_1 = require("../utils/localization/useDirectionalIcon");
 const textIconButton_1 = require("../textIconButton/textIconButton");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const formStepper_1 = require("../formStepper/formStepper");
@@ -42,7 +44,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("ar", "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");
@@ -69,7 +71,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");
 injectString("cs", "Submit", "Odeslat");
 injectString("da-DK", "Submit", "Indsend");
 injectString("de", "Submit", "Absenden");
@@ -96,7 +98,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("ar", "Submit", "\u0625\u0631\u0633\u0627\u0644");
 injectString("cs", "Continue", "Pokra\u010Dovat");
 injectString("da-DK", "Continue", "Forts\xE6t");
 injectString("de", "Continue", "Fortsetzen");
@@ -123,7 +125,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");
+injectString("ar", "Continue", "\u0645\u062A\u0627\u0628\u0639\u0629");
 const FormStepperButtons = ({
   onPrevious,
   onCancel,
@@ -139,6 +141,7 @@ const FormStepperButtons = ({
     translate
   } = (0, useLanguage_1.useLanguage)();
   const isMobile = (0, useMobile_1.useMobile)();
+  const BackChevronIcon = (0, useDirectionalIcon_1.useDirectionalIcon)(iconChevronLeft_1.IconChevronLeft, iconChevronRight_1.IconChevronRight);
   const onPreviousHandler = (0, react_1.useCallback)(() => {
     const currIndex = (0, getCurrentIndex_1.getCurrentIndex)(steps, current);
     const prevStep = currIndex > 0 ? steps[currIndex - 1].id : null;
@@ -177,7 +180,7 @@ const FormStepperButtons = ({
       className: "zen-form-step-buttons__left",
       children: !isFirstStep && (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
         className: "zen-form-step-buttons__previous",
-        icon: iconChevronLeft_1.IconChevronLeft,
+        icon: BackChevronIcon,
         type: "tertiary-black",
         onClick: onPreviousHandler,
         children: translate("Previous step")

package/dist/gridLayout/hooks/useGridClasses.js

@@ -55,7 +55,8 @@ const useGridClasses = (children, childrenArr, colsState = {
     tablet: constants_1.TABLET_COLS_NUMBER,
     mobile: constants_1.MOBILE_COLS_NUMBER
 }) => {
-    react_1.Children.forEach(children, (child, indx) => {
+    childrenArr.length = 0;
+    react_1.Children.forEach(children, (child) => {
         var _a;
         if (!child || typeof child === "string") {
             return;
@@ -89,16 +90,9 @@ const useGridClasses = (children, childrenArr, colsState = {
             isFitContent ? constants_1.FIT_CONTENT_CLASS : ""
         ]);
         const clone = (0, react_1.cloneElement)(el, {
-            key: el.props.id || el.key || indx,
             className: itemClassName
         });
-        const prevElementIndex = childrenArr.findIndex((prevItem) => prevItem.key === clone.key);
-        if (prevElementIndex !== -1) {
-            childrenArr[prevElementIndex] = clone;
-        }
-        else {
-            childrenArr.push(clone);
-        }
+        childrenArr.push(clone);
     });
 };
 exports.useGridClasses = useGridClasses;

package/dist/groupButtonRaw/groupButtonRaw.js

@@ -12,7 +12,7 @@ const useMobileClassName_1 = require("../utils/theme/useMobileClassName");
 // TODO: tests
 const GroupButtonRaw = (props) => {
     var _a;
-    const { fullWidth, groupData, className, isError, isReadOnly, controller, value: valueProp } = props;
+    const { fullWidth, groupData, className, isError, isReadOnly, controller, value: valueProp, id } = props;
     const nameGroupId = (0, react_1.useId)();
     const driveClasses = (0, useDriveClassName_1.useDriveClassName)("zen-group-button");
     const mobileClasses = (0, useMobileClassName_1.useMobileClassName)("zen-group-button");
@@ -24,7 +24,7 @@ const GroupButtonRaw = (props) => {
         return (0, jsx_runtime_1.jsx)(reviewTextControl_1.ReviewTextControl, { value: value.name, className: "zen-group-button__review" });
     }
     // TODO: is it a proper place for onBlur handler?
-    return ((0, jsx_runtime_1.jsx)("ul", { onBlur: onBlurHandlerMemo, role: "group", "aria-label": props.ariaLabel || "Group Button", className: (0, classNames_1.classNames)([
+    return ((0, jsx_runtime_1.jsx)("ul", { id: id, onBlur: onBlurHandlerMemo, role: "group", "aria-label": props.ariaLabel || "Group Button", className: (0, classNames_1.classNames)([
             "zen-group-button",
             isError ? "zen-group-button--error" : "",
             mobileClasses || driveClasses || "",