@geotab/zenith 3.7.0 → 3.8.0-beta.0

package/dist/formField/hooks/useBanner.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useBanner = void 0;
 const react_1 = require("react");
 const getFormFieldBanner_1 = require("../utils/getFormFieldBanner");
-const useBanner = (props) => {
+const useBanner = props => {
     const bannerId = (0, react_1.useId)();
     if (!props.children) {
         return {

package/dist/formField/hooks/useContainer.js

@@ -35,16 +35,43 @@ const useContainer = (props, wrapperComponent) => {
     const { id: counterId, counter } = (0, useCounter_1.useCounter)(props);
     const disabledProps = (0, useDisabled_1.useDisabled)(props);
     const componentClassName = (0, classNames_1.classNames)(["zen-form-field__input", inputClassName || ""]);
-    const ariaDescribedBy = [assistiveId, trailingId, errorId, bannerId, counterId]
-        .filter(aId => aId)
-        .join(' ');
+    const ariaDescribedBy = [assistiveId, trailingId, errorId, bannerId, counterId].filter(aId => aId).join(" ");
     const isReadonly = (0, useReadonly_1.useReadonly)(props);
     const { hasCustomWidth } = (0, useWidth_1.useWidth)(props);
     const driveTextClass = (0, useDriveClassName_1.useDriveClassName)("zen-form-field__text");
     const isInputContainerHidden = isReadonly && props.isError;
     const ref = props.ref;
     const banner = errorBanner || bannerComp;
-    const container = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-form-field__input-container", isReadonly ? "zen-form-field__input-container--review" : "", isInputContainerHidden ? "zen-form-field__input-container--hidden" : "", trailing ? "zen-form-field__input-container--with-trailing" : ""]), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-form-field__input-wrapper", inputWrapperClassName || ""]), children: [(0, jsx_runtime_1.jsx)(WrappedComponent, Object.assign({}, rest, disabledProps, { isReadOnly: isReadonly, id: id, className: componentClassName, ref: ref, isLoadingError: props.isError, isError: !!error, ariaDescribedby: ariaDescribedBy })), (0, jsx_runtime_1.jsx)(formFieldAdditionalInfo_1.FormFieldAdditionalInfo, { counterId: counterId, assistiveId: assistiveId, errorId: errorId, driveTextClass: driveTextClass, error: error, assistive: assistive, counter: counter, showAdditionalInfo: showAdditionalInfo })] }), (0, jsx_runtime_1.jsx)(trailingComponent_1.TrailingComponent, { hasCustomWidth: hasCustomWidth, id: trailingId, value: trailing, hasAdditionalInfo: !!showAdditionalInfo })] }), banner] }), [isReadonly, isInputContainerHidden, trailing, inputWrapperClassName, props.isError, WrappedComponent, rest, disabledProps, id, componentClassName, ref, error, ariaDescribedBy, counterId, assistiveId, errorId, driveTextClass, assistive, counter, showAdditionalInfo, hasCustomWidth, trailingId, banner]);
+    const container = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)([
+                    "zen-form-field__input-container",
+                    isReadonly ? "zen-form-field__input-container--review" : "",
+                    isInputContainerHidden ? "zen-form-field__input-container--hidden" : "",
+                    trailing ? "zen-form-field__input-container--with-trailing" : ""
+                ]), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-form-field__input-wrapper", inputWrapperClassName || ""]), children: [(0, jsx_runtime_1.jsx)(WrappedComponent, Object.assign({}, rest, disabledProps, { isReadOnly: isReadonly, id: id, className: componentClassName, ref: ref, isLoadingError: props.isError, isError: !!error, ariaDescribedby: ariaDescribedBy })), (0, jsx_runtime_1.jsx)(formFieldAdditionalInfo_1.FormFieldAdditionalInfo, { counterId: counterId, assistiveId: assistiveId, errorId: errorId, driveTextClass: driveTextClass, error: error, assistive: assistive, counter: counter, showAdditionalInfo: showAdditionalInfo })] }), (0, jsx_runtime_1.jsx)(trailingComponent_1.TrailingComponent, { hasCustomWidth: hasCustomWidth, id: trailingId, value: trailing, hasAdditionalInfo: !!showAdditionalInfo })] }), banner] })), [
+        isReadonly,
+        isInputContainerHidden,
+        trailing,
+        inputWrapperClassName,
+        props.isError,
+        WrappedComponent,
+        rest,
+        disabledProps,
+        id,
+        componentClassName,
+        ref,
+        error,
+        ariaDescribedBy,
+        counterId,
+        assistiveId,
+        errorId,
+        driveTextClass,
+        assistive,
+        counter,
+        showAdditionalInfo,
+        hasCustomWidth,
+        trailingId,
+        banner
+    ]);
     return container;
 };
 exports.useContainer = useContainer;

package/dist/formField/hooks/useError.js

@@ -39,9 +39,34 @@ 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("cs", "Failed to load {0}", "Failed to load {0}");
+injectString("da-DK", "Failed to load {0}", "Failed to load {0}");
+injectString("de", "Failed to load {0}", "Failed to load {0}");
 injectString("en", "Failed to load {0}", "Failed to load {0}");
+injectString("es", "Failed to load {0}", "Failed to load {0}");
+injectString("fi-FI", "Failed to load {0}", "Failed to load {0}");
+injectString("fr", "Failed to load {0}", "Failed to load {0}");
+injectString("fr-FR", "Failed to load {0}", "Failed to load {0}");
+injectString("hu-HU", "Failed to load {0}", "Failed to load {0}");
+injectString("id", "Failed to load {0}", "Failed to load {0}");
+injectString("it", "Failed to load {0}", "Failed to load {0}");
+injectString("ja", "Failed to load {0}", "Failed to load {0}");
+injectString("ko-KR", "Failed to load {0}", "Failed to load {0}");
+injectString("ms", "Failed to load {0}", "Failed to load {0}");
+injectString("nb-NO", "Failed to load {0}", "Failed to load {0}");
+injectString("nl", "Failed to load {0}", "Failed to load {0}");
+injectString("pl", "Failed to load {0}", "Failed to load {0}");
+injectString("pt-BR", "Failed to load {0}", "Failed to load {0}");
 injectString("pt-PT", "Failed to load {0}", "Falha ao carregar {0}");
+injectString("sk-SK", "Failed to load {0}", "Failed to load {0}");
+injectString("sv", "Failed to load {0}", "Failed to load {0}");
+injectString("th", "Failed to load {0}", "Failed to load {0}");
+injectString("tr", "Failed to load {0}", "Failed to load {0}");
+injectString("zh-Hans", "Failed to load {0}", "Failed to load {0}");
+injectString("zh-TW", "Failed to load {0}", "Failed to load {0}");
 injectString("ro-RO", "Failed to load {0}", "Nu s-a putut \xEEnc\u0103rca {0}");
+injectString("ar-SA", "Failed to load {0}", "\u0641\u0634\u0644 \u062A\u062D\u0645\u064A\u0644 {0}");
 injectString("cs", "This field is required.", "Toto pole je povinn\xE9.");
 injectString("da-DK", "This field is required.", "Dette felt er p\xE5kr\xE6vet.");
 injectString("de", "This field is required.", "Dieses Feld ist erforderlich.");
@@ -68,6 +93,7 @@ injectString("tr", "This field is required.", "Bu alan zorunludur.");
 injectString("zh-Hans", "This field is required.", "\u8BE5\u5B57\u6BB5\u4E3A\u5FC5\u586B\u9879\u3002");
 injectString("zh-TW", "This field is required.", "\u6B64\u6B04\u4F4D\u70BA\u5FC5\u586B\u3002");
 injectString("ro-RO", "This field is required.", "Acest c\xE2mp este obligatoriu.");
+injectString("ar-SA", "This field is required.", "\u0647\u0630\u0627 \u0627\u0644\u062D\u0642\u0644 \u0645\u0637\u0644\u0648\u0628.");
 const useError = props => {
   var _a, _b, _c, _d;
   const errorId = (0, react_1.useId)();

package/dist/formField/hooks/useFormFieldClasses.js

@@ -20,7 +20,11 @@ const useFormFieldClasses = (props, component) => {
         "zen-form-field",
         isMobile ? "zen-form-field--mobile" : "",
         banner ? "zen-form-field--with-banner" : "",
-        !props.label || !(0, rangeRawLabelCheck_1.rangeRawLabelCheck)(component, props) ? "" : props.labelAlign ? `zen-form-field--label-${props.labelAlign}` : "zen-form-field--label-left",
+        !props.label || !(0, rangeRawLabelCheck_1.rangeRawLabelCheck)(component, props)
+            ? ""
+            : props.labelAlign
+                ? `zen-form-field--label-${props.labelAlign}`
+                : "zen-form-field--label-left",
         !(0, isOldFormFieldComponent_1.isOldFormFieldComponent)(component) && !fullWidthTriggerButton ? "zen-form-field--new-component" : "",
         isFormSection ? "zen-form-field--form-item" : "",
         props.className || ""

package/dist/formField/hooks/useFormFieldProps.js

@@ -30,7 +30,15 @@ const useFormFieldProps = (props, wrapperComponent) => {
     const showAdditionalInfo = !!((error || assistive || props.counter) && !isReadonly);
     const classes = (0, useFormFieldClasses_1.useFormFieldClasses)(props, wrapperComponent);
     return {
-        id, wrapperComponent, props, hasCustomWidth, widthObj, trailingId, trailing, showAdditionalInfo, classes
+        id,
+        wrapperComponent,
+        props,
+        hasCustomWidth,
+        widthObj,
+        trailingId,
+        trailing,
+        showAdditionalInfo,
+        classes
     };
 };
 exports.useFormFieldProps = useFormFieldProps;

package/dist/formField/hooks/useReadonly.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useReadonly = void 0;
 const useMode_1 = require("../../formGroup/hooks/useMode");
 // TODO: add to documentation?
-const useReadonly = (props) => {
+const useReadonly = props => {
     const mode = (0, useMode_1.useMode)();
     return props.isReadOnly !== undefined ? props.isReadOnly : mode === "review";
 };

package/dist/formField/hooks/useSkeleton.js

@@ -5,8 +5,6 @@ const react_1 = require("react");
 const formFieldSkeleton_1 = require("../components/formFieldSkeleton");
 const useSkeleton = (props) => {
     var _a;
-    return ((_a = react_1.Children
-        .toArray(props.children)
-        .find(child => child.type && child.type === formFieldSkeleton_1.FormFieldSkeleton)) === null || _a === void 0 ? void 0 : _a.props) || {};
+    return ((_a = react_1.Children.toArray(props.children).find(child => child.type && child.type === formFieldSkeleton_1.FormFieldSkeleton)) === null || _a === void 0 ? void 0 : _a.props) || {};
 };
 exports.useSkeleton = useSkeleton;

package/dist/formField/utils/getFormFieldBanner.js

@@ -10,7 +10,7 @@ const getFormFieldBanner = (children) => {
     if (!children) {
         return null;
     }
-    return react_1.default.Children.toArray(children).find((child) => {
+    return react_1.default.Children.toArray(children).find(child => {
         if (!react_1.default.isValidElement(child)) {
             return false;
         }

package/dist/formFieldError/formFieldError.d.ts

@@ -1,7 +1,8 @@
 import "./formFieldError.less";
 interface IFormFieldError {
+    id?: string;
     className?: string;
     error?: string | string[];
 }
-export declare const FormFieldError: ({ className, error }: IFormFieldError) => import("react/jsx-runtime").JSX.Element | null;
+export declare const FormFieldError: ({ id, className, error }: IFormFieldError) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/formFieldError/formFieldError.js

@@ -6,10 +6,12 @@ const classNames_1 = require("../commonHelpers/classNames/classNames");
 const iconException_1 = require("../icons/iconException");
 const useDrive_1 = require("../utils/theme/useDrive");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
-const FormFieldError = ({ className, error }) => {
+const FormFieldError = ({ id, className, error }) => {
     const driveComponentClass = (0, useDriveClassName_1.useDriveClassName)("zen-form-field-error");
     const isDrive = (0, useDrive_1.useDrive)();
-    const errorStrings = Array.isArray(error) ? error.filter(el => el).map((erStr, ind) => (0, jsx_runtime_1.jsx)("div", { children: erStr }, `error_str_${ind}`)) : error && (0, jsx_runtime_1.jsx)("div", { children: error });
-    return error ? (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-form-field-error", driveComponentClass || "", className || ""]), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-form-field-error__icon-container", children: (0, jsx_runtime_1.jsx)(iconException_1.IconException, { className: "zen-form-field-error__error-icon", size: isDrive ? "large" : "bigger" }) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-form-field-error__error-text", children: errorStrings })] }) : null;
+    const errorStrings = Array.isArray(error)
+        ? error.filter(el => el).map((erStr, ind) => (0, jsx_runtime_1.jsx)("div", { children: erStr }, `error_str_${ind}`))
+        : error && (0, jsx_runtime_1.jsx)("div", { children: error });
+    return error ? ((0, jsx_runtime_1.jsxs)("span", { id: id, className: (0, classNames_1.classNames)(["zen-form-field-error", driveComponentClass || "", className || ""]), children: [(0, jsx_runtime_1.jsx)(iconException_1.IconException, { className: "zen-form-field-error__error-icon", size: isDrive ? "large" : "bigger" }), (0, jsx_runtime_1.jsx)("span", { className: "zen-form-field-error__error-text", children: errorStrings })] })) : null;
 };
 exports.FormFieldError = FormFieldError;

package/dist/formGroup/components/customRow/customRow.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomRow = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classNames_1 = require("../../../commonHelpers/classNames/classNames");
-const CustomRow = ({ children, className = "" }) => (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-custom-form-row", className]), children: children });
+const CustomRow = ({ children, className = "" }) => ((0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-custom-form-row", className]), children: children }));
 exports.CustomRow = CustomRow;

package/dist/formGroup/components/list.js

@@ -14,6 +14,6 @@ const List = ({ children }) => {
     const columns = (0, useColumns_1.useColumns)();
     const { toggleList } = (0, useToggleList_1.useToggleList)({ children });
     // TODO: classes without toggle?
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { tooltip: tooltip, value: label, className: (0, classNames_1.classNames)([(0, getListClasses_1.getListClasses)(labelAlign, columns, true), "zen-form-list-label"]) }), toggleList] });
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { tooltip: tooltip, value: label, className: (0, classNames_1.classNames)([(0, getListClasses_1.getListClasses)(labelAlign, columns, true), "zen-form-list-label"]) }), toggleList] }));
 };
 exports.List = List;

package/dist/formGroup/components/listToggle/listToggle.js

@@ -15,12 +15,14 @@ const ListToggle = () => {
     const { value = false, onChange } = (0, useFormFieldValues_1.useFormFieldValues)(controller, { value: toggle, onChange: onToggleChange });
     const mode = (0, useMode_1.useMode)();
     const columns = (0, useColumns_1.useColumns)();
-    const toggleAttributes = (0, react_1.useMemo)(() => controller !== undefined ? {
-        controller
-    } : {
-        checked: toggle,
-        onChange: () => onChange === null || onChange === void 0 ? void 0 : onChange(!value)
-    }, [controller, toggle, onChange, value]);
+    const toggleAttributes = (0, react_1.useMemo)(() => controller !== undefined
+        ? {
+            controller
+        }
+        : {
+            checked: toggle,
+            onChange: () => onChange === null || onChange === void 0 ? void 0 : onChange(!value)
+        }, [controller, toggle, onChange, value]);
     if (mode === "edit") {
         return (0, jsx_runtime_1.jsx)(toggleButton_1.ToggleButton, Object.assign({}, toggleAttributes, { className: (0, getToggleClasses_1.getToggleClasses)(columns, labelAlign) }));
     }

package/dist/formGroup/components/oneRow.js

@@ -10,6 +10,6 @@ const OneRow = ({ state }) => {
     if (customControl) {
         return customControl;
     }
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: ((_b = (_a = state.elements.control1) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.props.id) || id1, value: (_c = state.elements.label1) === null || _c === void 0 ? void 0 : _c.value, tooltip: (_d = state.elements.label1) === null || _d === void 0 ? void 0 : _d.tooltip, className: (_e = state.elements.label1) === null || _e === void 0 ? void 0 : _e.className }), control1, (0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: ((_g = (_f = state.elements.control2) === null || _f === void 0 ? void 0 : _f.value) === null || _g === void 0 ? void 0 : _g.props.id) || 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: (_k = state.elements.label2) === null || _k === void 0 ? void 0 : _k.className }), control2] });
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: ((_b = (_a = state.elements.control1) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.props.id) || id1, value: (_c = state.elements.label1) === null || _c === void 0 ? void 0 : _c.value, tooltip: (_d = state.elements.label1) === null || _d === void 0 ? void 0 : _d.tooltip, className: (_e = state.elements.label1) === null || _e === void 0 ? void 0 : _e.className }), control1, (0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: ((_g = (_f = state.elements.control2) === null || _f === void 0 ? void 0 : _f.value) === null || _g === void 0 ? void 0 : _g.props.id) || 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: (_k = state.elements.label2) === null || _k === void 0 ? void 0 : _k.className }), control2] }));
 };
 exports.OneRow = OneRow;

package/dist/formGroup/components/reviewListToggle/reviewListToggle.js

@@ -31,7 +31,7 @@ injectString("nb-NO", "On", "P\xE5");
 injectString("nl", "On", "Aan");
 injectString("pl", "On", "W\u0142.");
 injectString("pt-BR", "On", "Ativado");
-injectString("pt-PT", "On", "Ligado");
+injectString("pt-PT", "On", "Ativado");
 injectString("sk-SK", "On", "Zapnut\xE9");
 injectString("sv", "On", "P\xE5");
 injectString("th", "On", "\u0E40\u0E1B\u0E34\u0E14");
@@ -39,6 +39,7 @@ injectString("tr", "On", "A\xE7\u0131k");
 injectString("zh-Hans", "On", "\u5F00\u542F");
 injectString("zh-TW", "On", "\u958B\u555F");
 injectString("ro-RO", "On", "Activat");
+injectString("ar-SA", "On", "\u062A\u0634\u063A\u064A\u0644");
 injectString("cs", "Off", "Vypnout");
 injectString("da-DK", "Off", "Slukket");
 injectString("de", "Off", "Aus");
@@ -65,6 +66,7 @@ injectString("tr", "Off", "Kapal\u0131");
 injectString("zh-Hans", "Off", "\u5173\u95ED");
 injectString("zh-TW", "Off", "\u95DC\u9589");
 injectString("ro-RO", "Off", "Dezactivat");
+injectString("ar-SA", "Off", "\u0625\u064A\u0642\u0627\u0641");
 const ReviewListToggle = ({
   value,
   className = ""

package/dist/formGroup/components/reviewTextControl.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReviewTextControl = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
-const ReviewTextControl = ({ value, className = "", password, secondary }) => (0, jsx_runtime_1.jsx)("span", { className: (0, classNames_1.classNames)([className, "zen-review-text-control", secondary ? "zen-review-text-control--secondary" : ""]), children: password ? value.replace(/./g, "*") : value });
+const ReviewTextControl = ({ value, className = "", password, secondary }) => ((0, jsx_runtime_1.jsx)("span", { className: (0, classNames_1.classNames)([className, "zen-review-text-control", secondary ? "zen-review-text-control--secondary" : ""]), children: password ? value.replace(/./g, "*") : value }));
 exports.ReviewTextControl = ReviewTextControl;

package/dist/formGroup/components/twoRows.js

@@ -10,6 +10,6 @@ const TwoRows = ({ state }) => {
     if (customControl) {
         return customControl;
     }
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: ((_b = (_a = state.elements.control1) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.props.id) || id1, value: (_c = state.elements.label1) === null || _c === void 0 ? void 0 : _c.value, tooltip: (_d = state.elements.label1) === null || _d === void 0 ? void 0 : _d.tooltip, className: (_e = state.elements.label1) === null || _e === void 0 ? void 0 : _e.className }), (0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: ((_g = (_f = state.elements.control2) === null || _f === void 0 ? void 0 : _f.value) === null || _g === void 0 ? void 0 : _g.props.id) || 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: (_k = state.elements.label2) === null || _k === void 0 ? void 0 : _k.className }), control1, control2] });
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: ((_b = (_a = state.elements.control1) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.props.id) || id1, value: (_c = state.elements.label1) === null || _c === void 0 ? void 0 : _c.value, tooltip: (_d = state.elements.label1) === null || _d === void 0 ? void 0 : _d.tooltip, className: (_e = state.elements.label1) === null || _e === void 0 ? void 0 : _e.className }), (0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { id: ((_g = (_f = state.elements.control2) === null || _f === void 0 ? void 0 : _f.value) === null || _g === void 0 ? void 0 : _g.props.id) || 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: (_k = state.elements.label2) === null || _k === void 0 ? void 0 : _k.className }), control1, control2] }));
 };
 exports.TwoRows = TwoRows;

package/dist/formGroup/formGroup.js

@@ -38,34 +38,34 @@ const isFormGroupToggle = (child) => react_1.default.Children.count(child) === 1
 const FormGroup = ({ label, children, tooltip, labelAlign }) => {
     // TODO: add accessibility
     // TODO: section align for both labels?
-    const Provider = (0, react_1.useCallback)(({ children: content, controller, label: labelProvider, labelAlign: labelAlignProvider, tooltip: tooltipProvider, toggle, onToggleChange }) => (0, jsx_runtime_1.jsx)(formGroupProvider_1.FormGroupProvider, { label: labelProvider || label, labelAlign: labelAlignProvider || labelAlign, tooltip: tooltipProvider || tooltip, controller: controller, toggle: toggle, onToggleChange: onToggleChange, children: content }), [label, labelAlign, tooltip]);
+    const Provider = (0, react_1.useCallback)(({ children: content, controller, label: labelProvider, labelAlign: labelAlignProvider, tooltip: tooltipProvider, toggle, onToggleChange }) => ((0, jsx_runtime_1.jsx)(formGroupProvider_1.FormGroupProvider, { label: labelProvider || label, labelAlign: labelAlignProvider || labelAlign, tooltip: tooltipProvider || tooltip, controller: controller, toggle: toggle, onToggleChange: onToggleChange, children: content })), [label, labelAlign, tooltip]);
     if (!children) {
         return null;
     }
     const numberOfChildren = react_1.default.Children.count(children);
     if (numberOfChildren === 1 && (typeof children === "string" || typeof children === "number")) {
-        return (0, jsx_runtime_1.jsx)(Provider, { children: (0, jsx_runtime_1.jsx)(row_1.Row, { children: (0, jsx_runtime_1.jsx)("span", { children: children }) }) });
+        return ((0, jsx_runtime_1.jsx)(Provider, { children: (0, jsx_runtime_1.jsx)(row_1.Row, { children: (0, jsx_runtime_1.jsx)("span", { children: children }) }) }));
     }
     // TODO: check for comments section
     // TODO: check for Additional Section
     // const isAllLabels = isAllChildrenLabels(children);
     if (isFormGroupToggle(children)) {
-        return (0, jsx_runtime_1.jsx)(Provider, { tooltip: children.props.tooltip, 
+        return ((0, jsx_runtime_1.jsx)(Provider, { tooltip: children.props.tooltip, 
             // TODO: do we need labelAlign here?
             // labelAlign={children.props.labelAlign}
-            controller: children.props.controller, label: children.props.label, toggle: children.props.value, onToggleChange: children.props.onChange, children: (0, jsx_runtime_1.jsx)(list_1.List, { children: children.props.children }) });
+            controller: children.props.controller, label: children.props.label, toggle: children.props.value, onToggleChange: children.props.onChange, children: (0, jsx_runtime_1.jsx)(list_1.List, { children: children.props.children }) }));
     }
     if (isFormGroupList(children)) {
-        return (0, jsx_runtime_1.jsx)(Provider, { label: children.props.label, tooltip: children.props.tooltip, children: (0, jsx_runtime_1.jsx)(list_1.List, { children: children.props.children }) });
+        return ((0, jsx_runtime_1.jsx)(Provider, { label: children.props.label, tooltip: children.props.tooltip, children: (0, jsx_runtime_1.jsx)(list_1.List, { children: children.props.children }) }));
     }
     // TODO: do we need it?
     if (numberOfChildren > 2 && label) {
-        return (0, jsx_runtime_1.jsx)(Provider, { children: (0, jsx_runtime_1.jsx)(list_1.List, { children: children }) });
+        return ((0, jsx_runtime_1.jsx)(Provider, { children: (0, jsx_runtime_1.jsx)(list_1.List, { children: children }) }));
     }
     if (numberOfChildren > 2 && !label) {
-        return (0, jsx_runtime_1.jsx)(Provider, { children: react_1.Children.map(children, (child, indx) => ((0, jsx_runtime_1.jsx)(row_1.Row, { children: child }, child.key || indx))) });
+        return ((0, jsx_runtime_1.jsx)(Provider, { children: react_1.Children.map(children, (child, indx) => ((0, jsx_runtime_1.jsx)(row_1.Row, { children: child }, child.key || indx))) }));
     }
-    return (0, jsx_runtime_1.jsx)(Provider, { children: (0, jsx_runtime_1.jsx)(row_1.Row, { children: children }) });
+    return ((0, jsx_runtime_1.jsx)(Provider, { children: (0, jsx_runtime_1.jsx)(row_1.Row, { children: children }) }));
 };
 exports.FormGroup = FormGroup;
 exports.FormGroup.Toggle = formGroupToggle_1.FormGroupToggle;

package/dist/formGroup/hooks/listHooks/useControlClasses.js

@@ -11,7 +11,7 @@ const useControlClasses = (state) => {
     const columns = (0, useColumns_1.useColumns)();
     const mode = (0, useMode_1.useMode)();
     // eslint-disable-next-line complexity
-    state.forEach((st) => {
+    state.forEach(st => {
         if (st.custom) {
             if (st.totalCount === 4) {
                 st.customControlClasses = (0, getOneLabelOneControlClasses_1.getOneLabelOneControlClasses)(st, columns, mode).controlClasses1;

package/dist/formGroup/hooks/listHooks/useControls.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useControls = void 0;
 const getControls_1 = require("../../utils/getControls");
 const useControls = (state) => {
-    state.forEach((st) => {
+    state.forEach(st => {
         var _a, _b;
         const { control1, control2 } = (0, getControls_1.getControls)(st.elements);
         if (control1 && ((_a = st.elements.control1) === null || _a === void 0 ? void 0 : _a.value)) {

package/dist/formGroup/hooks/listHooks/useElementsState.js

@@ -25,7 +25,7 @@ const useElementsState = (children) => {
             state.push(st);
             return;
         }
-        if ((typeof child === "string" || typeof child === "number")) {
+        if (typeof child === "string" || typeof child === "number") {
             const st = (0, initializeState_1.initializeState)((0, useElements_1.getEmptyState)(), (0, jsx_runtime_1.jsx)("span", { children: child }), mode, undefined, undefined, undefined);
             state.push(st);
             return;

package/dist/formGroup/hooks/listHooks/useLabelClasses.js

@@ -8,7 +8,7 @@ const useMode_1 = require("../useMode");
 const useLabelClasses = (state) => {
     const columns = (0, useColumns_1.useColumns)();
     const mode = (0, useMode_1.useMode)();
-    state.forEach((st) => {
+    state.forEach(st => {
         let { labelClasses1, labelClasses2 } = (0, getLabelListClasses_1.getLabelListClasses)(st, columns, mode);
         labelClasses1 = `${labelClasses1} zen-form-group-list-label`;
         labelClasses2 = `${labelClasses2} zen-form-group-list-label`;

package/dist/formGroup/hooks/useCustomRow.js

@@ -24,13 +24,21 @@ const useCustomRowElements = (state) => {
             control2 = (0, react_1.cloneElement)(state.elements.control2.value, { id: state.elements.control2.value.props.id || id2 });
         }
         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)(["zen-field-label--custom-width", ((_g = state.elements.label1) === null || _g === void 0 ? void 0 : _g.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 })] });
+            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)([
+                            "zen-field-label--custom-width",
+                            ((_g = state.elements.label1) === null || _g === void 0 ? void 0 : _g.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 })] }));
             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)(["zen-field-label--custom-width", ((_s = state.elements.label1) === null || _s === void 0 ? void 0 : _s.className) || "", state.customLabelClasses || ""]) }), (0, jsx_runtime_1.jsxs)(customRow_1.CustomRow, { className: state.customControlClasses, children: [control1, control2] })] });
+            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)([
+                            "zen-field-label--custom-width",
+                            ((_s = state.elements.label1) === null || _s === void 0 ? void 0 : _s.className) || "",
+                            state.customLabelClasses || ""
+                        ]) }), (0, jsx_runtime_1.jsxs)(customRow_1.CustomRow, { className: state.customControlClasses, children: [control1, control2] })] }));
             return {
                 customControl
             };
@@ -39,23 +47,33 @@ 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] })] });
+        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] })] }));
         return {
             customControl
         };
     }
-    if (state.custom && 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)) {
+    if (state.custom &&
+        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] });
+        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] }));
         return {
             customControl
         };
     }
-    if (state.custom && 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)) {
+    if (state.custom &&
+        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] })] });
+        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] })] }));
         return {
             customControl
         };
@@ -63,14 +81,14 @@ const useCustomRowElements = (state) => {
     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 });
-        const customControl = (0, jsx_runtime_1.jsxs)(customRow_1.CustomRow, { className: state.customControlClasses, children: [control1, control2] });
+        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 })] });
+        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 })] }));
         return {
             customControl
         };

package/dist/formGroup/hooks/useToggle.js

@@ -18,9 +18,33 @@ const useLanguage_1 = require("../../utils/localization/useLanguage");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const getListClasses_1 = require("../utils/getListClasses");
 const useColumns_1 = require("../../formLayout/hooks/useColumns");
+injectString("cs", "Sub-options are not active.", "Sub-options are not active.");
+injectString("da-DK", "Sub-options are not active.", "Sub-options are not active.");
+injectString("de", "Sub-options are not active.", "Sub-options are not active.");
 injectString("en", "Sub-options are not active.", "Sub-options are not active.");
+injectString("es", "Sub-options are not active.", "Sub-options are not active.");
+injectString("fi-FI", "Sub-options are not active.", "Sub-options are not active.");
+injectString("fr", "Sub-options are not active.", "Sub-options are not active.");
+injectString("fr-FR", "Sub-options are not active.", "Sub-options are not active.");
+injectString("hu-HU", "Sub-options are not active.", "Sub-options are not active.");
+injectString("id", "Sub-options are not active.", "Sub-options are not active.");
+injectString("it", "Sub-options are not active.", "Sub-options are not active.");
+injectString("ja", "Sub-options are not active.", "Sub-options are not active.");
+injectString("ko-KR", "Sub-options are not active.", "Sub-options are not active.");
+injectString("ms", "Sub-options are not active.", "Sub-options are not active.");
+injectString("nb-NO", "Sub-options are not active.", "Sub-options are not active.");
+injectString("nl", "Sub-options are not active.", "Sub-options are not active.");
+injectString("pl", "Sub-options are not active.", "Sub-options are not active.");
+injectString("pt-BR", "Sub-options are not active.", "Sub-options are not active.");
 injectString("pt-PT", "Sub-options are not active.", "Subop\xE7\xF5es n\xE3o est\xE3o ativas.");
+injectString("sk-SK", "Sub-options are not active.", "Sub-options are not active.");
+injectString("sv", "Sub-options are not active.", "Sub-options are not active.");
+injectString("th", "Sub-options are not active.", "Sub-options are not active.");
+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.");
 const useToggle = result => {
   const {
     controller,

package/dist/formGroup/utils/applyCustomControlClasses.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.applyCustomControlClasses = void 0;
-// eslint-disable-next-line complexity
+/* eslint-disable complexity */
 const applyCustomControlClasses = ({ state, labelAlign, columns, getOneLabelOneControlClasses, getZeroLabelOneControlClasses }) => {
     var _a, _b, _c;
+    /* eslint-enable complexity */
     if (state.totalCount === 4) {
         state.customControlClasses = getOneLabelOneControlClasses(((_a = state.elements.label1) === null || _a === void 0 ? void 0 : _a.labelAlign) || labelAlign, columns).controlClasses1;
         return;

package/dist/formGroup/utils/getControlNode.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getControlNode = void 0;
 const isFormLabel_1 = require("./isFormLabel");
-const getControlNode = (node) => node && !(0, isFormLabel_1.isFormLabel)(node) ? node : null;
+const getControlNode = (node) => (node && !(0, isFormLabel_1.isFormLabel)(node) ? node : null);
 exports.getControlNode = getControlNode;

package/dist/formGroup/utils/getControls.js

@@ -9,18 +9,22 @@ const getControls = (elements) => {
     if ((_a = elements.control1) === null || _a === void 0 ? void 0 : _a.value) {
         const element = elements.control1.value;
         const isDOMElement = typeof element.type === "string";
-        control1 = (0, react_1.cloneElement)(element, Object.assign({ className: `zen-form-control ${elements.control1.className || ""}` }, (isDOMElement ? {} : {
-            isReadOnly: !!elements.control1.isReadOnly,
-            bannerLabel: (_b = elements.label1) === null || _b === void 0 ? void 0 : _b.value
-        })));
+        control1 = (0, react_1.cloneElement)(element, Object.assign({ className: `zen-form-control ${elements.control1.className || ""}` }, (isDOMElement
+            ? {}
+            : {
+                isReadOnly: !!elements.control1.isReadOnly,
+                bannerLabel: (_b = elements.label1) === null || _b === void 0 ? void 0 : _b.value
+            })));
     }
     if ((_c = elements.control2) === null || _c === void 0 ? void 0 : _c.value) {
         const element = elements.control2.value;
         const isDOMElement = typeof element.type === "string";
-        control2 = (0, react_1.cloneElement)(element, Object.assign({ className: `zen-form-control ${elements.control2.className || ""}` }, (isDOMElement ? {} : {
-            isReadOnly: !!elements.control2.isReadOnly,
-            bannerLabel: (_d = elements.label2) === null || _d === void 0 ? void 0 : _d.value
-        })));
+        control2 = (0, react_1.cloneElement)(element, Object.assign({ className: `zen-form-control ${elements.control2.className || ""}` }, (isDOMElement
+            ? {}
+            : {
+                isReadOnly: !!elements.control2.isReadOnly,
+                bannerLabel: (_d = elements.label2) === null || _d === void 0 ? void 0 : _d.value
+            })));
     }
     return { control1, control2 };
 };

package/dist/formGroup/utils/getElementsControl.js

@@ -11,10 +11,10 @@ const getElementsControl = (control, mode, elements, controlName) => {
     // TODO: update test
     const readOnlyValueProp = control.props.readOnlyValue;
     if (isControlReadOnly && readOnlyValueProp) {
-        elements[controlName] = { value: typeof readOnlyValueProp === "string"
-                ? (0, jsx_runtime_1.jsx)(reviewTextControl_1.ReviewTextControl, { value: readOnlyValueProp }) :
-                typeof readOnlyValueProp === "function" ? readOnlyValueProp(control.props.value) :
-                    readOnlyValueProp, type: "control" };
+        elements[controlName] = {
+            value: typeof readOnlyValueProp === "string" ? ((0, jsx_runtime_1.jsx)(reviewTextControl_1.ReviewTextControl, { value: readOnlyValueProp })) : typeof readOnlyValueProp === "function" ? (readOnlyValueProp(control.props.value)) : (readOnlyValueProp),
+            type: "control"
+        };
         return;
     }
     if (isControlReadOnly) {

package/dist/formGroup/utils/getLabelNode.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getLabelNode = void 0;
 const isFormLabel_1 = require("./isFormLabel");
-const getLabelNode = (node) => node && (0, isFormLabel_1.isFormLabel)(node) ? node : null;
+const getLabelNode = (node) => (node && (0, isFormLabel_1.isFormLabel)(node) ? node : null);
 exports.getLabelNode = getLabelNode;