@geotab/zenith 3.3.0 → 3.4.0-beta.0

package/esm/formField/formField.js

@@ -9,93 +9,26 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useId, useMemo, useContext } from "react";
-import { classNames } from "../commonHelpers/classNames/classNames";
-import { useDriveClassName } from "../utils/theme/useDriveClassName";
-import { FormFieldError } from "../formFieldError/formFieldError";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { FormFieldBanner } from "./components/formFieldBanner";
-import { useMobile } from "../commonHelpers/hooks/useMobile";
-import { useBanner } from "./hooks/useBanner";
-import { useAssistive } from "./hooks/useAssistive";
-import { useTrailing } from "./hooks/useTrailing";
-import { useError } from "./hooks/useError";
 import { rangeRawLabelCheck } from "./utils/rangeRawLabelCheck";
-import { Skeleton } from "../skeleton/skeleton";
-import { TextareaRaw } from "../textareaRaw/textareaRaw";
 import { useSkeleton } from "./hooks/useSkeleton";
-import { useWidth } from "./hooks/useWidth";
-import { useDisabled } from "./hooks/useDisabled";
 import { useLoading } from "./hooks/useLoading";
-import { useReadonly } from "./hooks/useReadonly";
 import { FormFieldWithLabel } from "./components/formFieldWithLabel";
 import { FormFieldWithoutLabel } from "./components/formFieldWithoutLabel";
-import { TrailingComponent } from "./components/trailingComponent";
-import { FormSectionContext } from "../formSection/utils/formSectionProvider";
-const OLD_FORM_FIELD_COMPONENTS = [
-    "SearchInputRaw",
-    "SelectRaw",
-    "StepperRaw",
-    "TextAreaInput",
-    "TextInputRaw"
-];
-const isOldFormFieldComponent = (component) => 
-// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-OLD_FORM_FIELD_COMPONENTS.includes((component === null || component === void 0 ? void 0 : component.displayName) || "") || OLD_FORM_FIELD_COMPONENTS.includes((component === null || component === void 0 ? void 0 : component.name) || "");
+import { FormFieldLoading } from "./components/formFieldLoading";
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const FormField = function FormFieldInner(WrappedComponent) {
-    // eslint-disable-next-line complexity
     const InnerFormField = (props) => {
-        const isMobile = useMobile();
-        const ref = props.ref;
-        const { isFormSection } = useContext(FormSectionContext);
-        const { id: assistiveId, assistive } = useAssistive(props);
-        const { id: trailingId, trailing } = useTrailing(props);
-        const { id: errorId, error, errorBanner } = useError(props);
-        const { id: bannerId, banner: bannerComp } = useBanner(props);
-        const disabledProps = useDisabled(props);
-        const _a = useWidth(props), { hasCustomWidth } = _a, widthObj = __rest(_a, ["hasCustomWidth"]);
         const skeletonProps = __rest(useSkeleton(props), []);
         const isLoading = useLoading(props, WrappedComponent.displayName);
-        const isReadonly = useReadonly(props);
-        // TODO: add tests
-        const banner = errorBanner || bannerComp;
-        const isInputContainerHidden = isReadonly && props.isError;
-        const { className, inputClassName, counter } = props, rest = __rest(props, ["className", "inputClassName", "counter"]);
-        const driveTextClass = useDriveClassName("zen-form-field__text");
-        // TODO: Banner? Only it or assistive text?
-        const showAdditionalInfo = (error || assistive || counter) && !isReadonly;
-        const componentClassName = classNames(["zen-form-field__input", inputClassName || ""]);
-        const ariaDescribedBy = `${assistiveId} ${trailingId} ${errorId} ${bannerId}`.trim();
-        const localId = useId();
-        const id = props.id || localId;
-        const container = useMemo(() => _jsxs(_Fragment, { children: [_jsxs("div", { className: 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: [_jsxs("div", { children: [_jsx(WrappedComponent, Object.assign({}, rest, disabledProps, { isReadOnly: isReadonly, id: id, className: componentClassName, ref: ref, isLoadingError: props.isError, isError: !!error, "aria-describedby": ariaDescribedBy })), showAdditionalInfo ?
-                                    _jsxs("div", { className: "zen-form-field__secondary", children: [_jsx("div", { id: assistiveId || errorId, className: classNames([
-                                                    "zen-form-field__text",
-                                                    driveTextClass || "",
-                                                    error ? "zen-form-field__text--error" : ""
-                                                ]), children: error ? _jsx(FormFieldError, { error: error }) : assistive }), counter
-                                                ? _jsx("div", { className: classNames(["zen-form-field__length"]), children: counter })
-                                                : ""] })
-                                    : null] }), !hasCustomWidth && trailing && _jsx(TrailingComponent, { id: trailingId, value: trailing, hasAdditionalInfo: !!showAdditionalInfo })] }), banner] }), [isInputContainerHidden, trailing, rest, disabledProps, isReadonly, id, componentClassName, ref, props.isError, error, ariaDescribedBy, hasCustomWidth, trailingId, showAdditionalInfo, assistiveId, errorId, driveTextClass, assistive, counter, banner]);
-        const classes = classNames([
-            "zen-form-field",
-            isMobile ? "zen-form-field--mobile" : "",
-            banner ? "zen-form-field--with-banner" : "",
-            !props.label ? "" : props.labelAlign ? `zen-form-field--label-${props.labelAlign}` : "zen-form-field--label-left",
-            !isOldFormFieldComponent(WrappedComponent) ? "zen-form-field--new-component" : "",
-            isFormSection ? "zen-form-field--form-item" : "",
-            className || ""
-        ]);
         if (isLoading) {
-            const height = WrappedComponent.displayName === TextareaRaw.displayName ? 110 : 32;
-            return _jsx(Skeleton, Object.assign({ className: classes, height: height }, skeletonProps));
+            return _jsx(FormFieldLoading, { props: props, wrapperComponent: WrappedComponent, skeletonProps: skeletonProps });
         }
-        // TODO: refactor?
         if (props.label && rangeRawLabelCheck(WrappedComponent, props)) {
-            return _jsx(FormFieldWithLabel, { hasCustomWidth: hasCustomWidth, classes: classes, widthObj: widthObj, props: props, id: id, container: container, trailing: trailing, trailingId: trailingId, showAdditionalInfo: !!showAdditionalInfo });
+            return _jsx(FormFieldWithLabel, { props: props, wrapperComponent: WrappedComponent });
         }
-        return _jsx(FormFieldWithoutLabel, { hasCustomWidth: hasCustomWidth, classes: classes, widthObj: widthObj, container: container, trailing: trailing, trailingId: trailingId, showAdditionalInfo: !!showAdditionalInfo });
+        return _jsx(FormFieldWithoutLabel, { props: props, wrapperComponent: WrappedComponent });
     };
     InnerFormField.displayName = "InnerFormField";
     return InnerFormField;

package/esm/formField/hooks/useContainer.d.ts

@@ -0,0 +1,2 @@
+import { TFormFieldComponentProps } from "../formField";
+export declare const useContainer: <T>(props: TFormFieldComponentProps<T>, wrapperComponent: React.FC<T>) => import("react/jsx-runtime").JSX.Element;

package/esm/formField/hooks/useContainer.js

@@ -0,0 +1,43 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+import { useDriveClassName } from "../../utils/theme/useDriveClassName";
+import { FormFieldAdditionalInfo } from "../components/formFieldAdditionalInfo";
+import { TrailingComponent } from "../components/trailingComponent";
+import { useAssistive } from "./useAssistive";
+import { useBanner } from "./useBanner";
+import { useDisabled } from "./useDisabled";
+import { useError } from "./useError";
+import { useReadonly } from "./useReadonly";
+import { useWidth } from "./useWidth";
+import { useFormFieldProps } from "./useFormFieldProps";
+// eslint-disable-next-line
+export const useContainer = (props, wrapperComponent) => {
+    const { id, wrapperComponent: WrappedComponent, trailing, trailingId, showAdditionalInfo } = useFormFieldProps(props, wrapperComponent);
+    const { className, inputClassName, counter } = props, rest = __rest(props, ["className", "inputClassName", "counter"]);
+    const { id: errorId, error, errorBanner } = useError(props);
+    const { id: bannerId, banner: bannerComp } = useBanner(props);
+    const { id: assistiveId, assistive } = useAssistive(props);
+    const disabledProps = useDisabled(props);
+    const componentClassName = classNames(["zen-form-field__input", inputClassName || ""]);
+    const ariaDescribedBy = `${assistiveId} ${trailingId} ${errorId} ${bannerId}`.trim();
+    const isReadonly = useReadonly(props);
+    const { hasCustomWidth } = useWidth(props);
+    const driveTextClass = useDriveClassName("zen-form-field__text");
+    const isInputContainerHidden = isReadonly && props.isError;
+    const ref = props.ref;
+    const banner = errorBanner || bannerComp;
+    const container = useMemo(() => _jsxs(_Fragment, { children: [_jsxs("div", { className: 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: [_jsxs("div", { children: [_jsx(WrappedComponent, Object.assign({}, rest, disabledProps, { isReadOnly: isReadonly, id: id, className: componentClassName, ref: ref, isLoadingError: props.isError, isError: !!error, "aria-describedby": ariaDescribedBy })), _jsx(FormFieldAdditionalInfo, { assistiveId: assistiveId, errorId: errorId, driveTextClass: driveTextClass, error: error, assistive: assistive, counter: counter, showAdditionalInfo: showAdditionalInfo })] }), _jsx(TrailingComponent, { hasCustomWidth: hasCustomWidth, id: trailingId, value: trailing, hasAdditionalInfo: !!showAdditionalInfo })] }), banner] }), [isReadonly, isInputContainerHidden, trailing, WrappedComponent, rest, disabledProps, id, componentClassName, ref, props.isError, error, ariaDescribedBy, assistiveId, errorId, driveTextClass, assistive, counter, showAdditionalInfo, hasCustomWidth, trailingId, banner]);
+    return container;
+};

package/esm/formField/hooks/useError.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from "react";
 import { IReactFormItemController } from "../../commonHelpers/zenComponent";
-import { IFormFieldComponent, TFormField } from "../formField";
+import { IFormFieldComponent, TFormField } from "../types";
 import { Exclusive } from "../../commonHelpers/types/exclusive";
 import { IFormFieldBannerProps } from "../components/formFieldBanner";
 export type TErrorType = "text" | "banner";

package/esm/formField/hooks/useFormFieldClasses.d.ts

@@ -0,0 +1,2 @@
+import { TFormFieldComponentProps } from "../formField";
+export declare const useFormFieldClasses: <T>(props: TFormFieldComponentProps<T>, component: React.FC<T>) => string;

package/esm/formField/hooks/useFormFieldClasses.js

@@ -0,0 +1,26 @@
+import { useContext } from "react";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+import { useMobile } from "../../commonHelpers/hooks/useMobile";
+import { FormSectionContext } from "../../formSection/utils/formSectionProvider";
+import { isOldFormFieldComponent } from "../components/isOldFormFieldComponent";
+import { useBanner } from "./useBanner";
+import { useError } from "./useError";
+import { rangeRawLabelCheck } from "../utils/rangeRawLabelCheck";
+// eslint-disable-next-line @typescript-eslint/comma-dangle
+export const useFormFieldClasses = (props, component) => {
+    const isMobile = useMobile();
+    const { isFormSection } = useContext(FormSectionContext);
+    const { banner: bannerComp } = useBanner(props);
+    const { errorBanner } = useError(props);
+    const banner = errorBanner || bannerComp;
+    const classes = classNames([
+        "zen-form-field",
+        isMobile ? "zen-form-field--mobile" : "",
+        banner ? "zen-form-field--with-banner" : "",
+        (!props.label || !rangeRawLabelCheck(component, props)) ? "" : props.labelAlign ? `zen-form-field--label-${props.labelAlign}` : "zen-form-field--label-left",
+        !isOldFormFieldComponent(component) ? "zen-form-field--new-component" : "",
+        isFormSection ? "zen-form-field--form-item" : "",
+        props.className || ""
+    ]);
+    return classes;
+};

package/esm/formField/hooks/useFormFieldProps.d.ts

@@ -0,0 +1,17 @@
+import { FC } from "react";
+import { TFormFieldComponentProps } from "../formField";
+export declare const useFormFieldProps: <T>(props: TFormFieldComponentProps<T>, wrapperComponent: FC<T>) => {
+    id: string;
+    wrapperComponent: FC<T>;
+    props: TFormFieldComponentProps<T>;
+    hasCustomWidth: boolean;
+    widthObj: {
+        width: string | number;
+    } | {
+        width?: undefined;
+    };
+    trailingId: string;
+    trailing: string | undefined;
+    showAdditionalInfo: boolean;
+    classes: string;
+};

package/esm/formField/hooks/useFormFieldProps.js

@@ -0,0 +1,33 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { useId } from "react";
+import { useAssistive } from "./useAssistive";
+import { useError } from "./useError";
+import { useFormFieldClasses } from "./useFormFieldClasses";
+import { useReadonly } from "./useReadonly";
+import { useTrailing } from "./useTrailing";
+import { useWidth } from "./useWidth";
+// eslint-disable-next-line @typescript-eslint/comma-dangle
+export const useFormFieldProps = (props, wrapperComponent) => {
+    const localId = useId();
+    const id = props.id || localId;
+    const _a = useWidth(props), { hasCustomWidth } = _a, widthObj = __rest(_a, ["hasCustomWidth"]);
+    const { id: trailingId, trailing } = useTrailing(props);
+    const { error } = useError(props);
+    const { assistive } = useAssistive(props);
+    const isReadonly = useReadonly(props);
+    const showAdditionalInfo = !!((error || assistive || props.counter) && !isReadonly);
+    const classes = useFormFieldClasses(props, wrapperComponent);
+    return {
+        id, wrapperComponent, props, hasCustomWidth, widthObj, trailingId, trailing, showAdditionalInfo, classes
+    };
+};

package/esm/formField/hooks/useTrailing.d.ts

@@ -4,7 +4,7 @@ interface IUseTrailingProps {
 }
 export declare const useTrailing: (props: IUseTrailingProps) => {
     id: string;
-    trailing: null;
+    trailing: undefined;
 } | {
     id: string;
     trailing: string;

package/esm/formField/hooks/useTrailing.js

@@ -4,7 +4,7 @@ export const useTrailing = (props) => {
     if (!props.trailing) {
         return {
             id: "",
-            trailing: null
+            trailing: undefined
         };
     }
     return {

package/esm/formField/hooks/useWidth.d.ts

@@ -1,4 +1,4 @@
-import { IFormField } from "../formField";
+import { IFormField } from "../types";
 export declare const useWidth: (props: IFormField) => {
     width: string | number;
     hasCustomWidth: boolean;

package/esm/formField/types.d.ts

@@ -0,0 +1,35 @@
+import { PropsWithChildren, Ref } from "react";
+import { ILoadingBase } from "../commonHelpers/loading";
+import { Exclusive } from "../commonHelpers/types/exclusive";
+export type TLabelAlign = "left" | "top";
+interface IFormFieldBase extends PropsWithChildren {
+    className?: string;
+    inputClassName?: string;
+    error?: string;
+    assistive?: string;
+    counter?: string;
+    trailing?: string;
+    isReadOnly?: boolean;
+    disabled?: boolean;
+    width?: string | number;
+}
+export interface IFormFieldWithLabel extends IFormFieldBase, ILoadingBase {
+    label?: string;
+    labelAlign?: TLabelAlign;
+    tooltip?: React.ReactNode;
+    labelClassesName?: string;
+    controlClassesName?: string;
+    readOnlyValue?: string | React.ReactNode | ((content: React.ReactNode) => React.ReactNode);
+}
+export interface IFormField extends IFormFieldBase {
+}
+export type TFormField = Exclusive<IFormFieldWithLabel, IFormField>;
+export interface IFormFieldComponent {
+    isError?: boolean;
+    isReadOnly?: boolean;
+    children?: React.ReactNode;
+    isLoadingError?: boolean;
+    bannerLabel?: string;
+    ref?: Ref<HTMLElement | null>;
+}
+export {};

package/esm/formField/types.js

@@ -0,0 +1 @@
+export {};

package/esm/formGroup/components/formGroupList.d.ts

@@ -1,5 +1,5 @@
 import { FC, PropsWithChildren } from "react";
-import { IFormFieldWithLabel } from "../../formField/formField";
+import { IFormFieldWithLabel } from "../../formField/types";
 export interface IFormGroupList extends PropsWithChildren, Required<Pick<IFormFieldWithLabel, "label">>, Pick<IFormFieldWithLabel, "tooltip"> {
 }
 export declare const FormGroupList: FC<IFormGroupList>;

package/esm/formGroup/components/formGroupToggle.d.ts

@@ -1,6 +1,6 @@
 import { FC, PropsWithChildren } from "react";
 import { IReactFormItemController } from "../../commonHelpers/zenComponent";
-import { IFormFieldWithLabel } from "../../formField/formField";
+import { IFormFieldWithLabel } from "../../formField/types";
 import { Exclusive } from "../../commonHelpers/types/exclusive";
 interface IFormGroupToggleBase extends Required<Pick<IFormFieldWithLabel, "label">>, Pick<IFormFieldWithLabel, "tooltip">, PropsWithChildren {
 }

package/esm/formGroup/formGroup.d.ts

@@ -1,6 +1,6 @@
 import { FC } from "react";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
-import { IFormFieldWithLabel } from "../formField/formField";
+import { IFormFieldWithLabel } from "../formField/types";
 import { TFormGroupToggle } from "./components/formGroupToggle";
 import "./formGroup.less";
 import { IFormGroupList } from "./components/formGroupList";

package/esm/formGroup/hooks/useLabelAlign.d.ts

@@ -1,2 +1,2 @@
-import { TLabelAlign } from "../../formField/formField";
+import { TLabelAlign } from "../../formField/types";
 export declare const useLabelAlign: (labelAlign?: TLabelAlign) => TLabelAlign;

package/esm/formGroup/types.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from "react";
-import { TLabelAlign } from "../formField/formField";
+import { TLabelAlign } from "../formField/types";
 export interface IElementsState {
     control1: IControlState | null;
     control2: IControlState | null;

package/esm/formGroup/utils/applyCustomControlClasses.d.ts

@@ -1,4 +1,4 @@
-import { TLabelAlign } from "../../formField/formField";
+import { TLabelAlign } from "../../formField/types";
 import { TFormLayoutColumns } from "../../formLayout/types";
 import { IControlClasses, ITotalState } from "../types";
 interface IGetCustomControlClassesParams {

package/esm/formGroup/utils/applyCustomLabelClasses.d.ts

@@ -1,4 +1,4 @@
-import { TLabelAlign } from "../../formField/formField";
+import { TLabelAlign } from "../../formField/types";
 import { TFormLayoutColumns, TFormLayoutMode } from "../../formLayout/types";
 import { ILabelClasses, ITotalState } from "../types";
 interface IApplyCustomLabelClassesProps {

package/esm/formGroup/utils/getControlClasses/getControlClasses.d.ts

@@ -1,4 +1,4 @@
-import { TLabelAlign } from "../../../formField/formField";
+import { TLabelAlign } from "../../../formField/types";
 import { TFormLayoutColumns } from "../../../formLayout/types";
 import { TFormSectionMode, TFormSectionType } from "../../../formSection/types";
 import { ITotalState } from "../../types";

package/esm/formGroup/utils/getControlClasses/getOneLabelOneControlClasses.d.ts

@@ -1,4 +1,4 @@
-import { TLabelAlign } from "../../../formField/formField";
+import { TLabelAlign } from "../../../formField/types";
 import { TFormLayoutColumns } from "../../../formLayout/types";
 export declare const getOneLabelOneControlClasses: (labelAlign: TLabelAlign, columns: TFormLayoutColumns) => {
     controlClasses1: string;

package/esm/formGroup/utils/getControlClasses/getOneLabelTwoControlsClasses.d.ts

@@ -1,4 +1,4 @@
-import { TLabelAlign } from "../../../formField/formField";
+import { TLabelAlign } from "../../../formField/types";
 import { TFormLayoutColumns } from "../../../formLayout/types";
 import { ITotalState } from "../../types";
 export declare const getOneLabelTwoControlsClasses: (totalState: ITotalState, columns: TFormLayoutColumns, labelAlign: TLabelAlign) => {

package/esm/formGroup/utils/getControlClasses/getTwoLabelsOneControlClasses.d.ts

@@ -1,4 +1,4 @@
-import { TLabelAlign } from "../../../formField/formField";
+import { TLabelAlign } from "../../../formField/types";
 import { TFormLayoutColumns } from "../../../formLayout/types";
 export declare const getTwoLabelsOneControlClasses: (labelAlign: TLabelAlign, columns: TFormLayoutColumns) => {
     controlClasses1: string;

package/esm/formGroup/utils/getControlClasses/getTwoLabelsTwoControlsClasses.d.ts

@@ -1,4 +1,4 @@
-import { TLabelAlign } from "../../../formField/formField";
+import { TLabelAlign } from "../../../formField/types";
 import { TFormLayoutColumns } from "../../../formLayout/types";
 export declare const getTwoLabelsTwoControlsClasses: (labelAlign1: TLabelAlign, columns: TFormLayoutColumns) => {
     controlClasses1: string;

package/esm/formGroup/utils/getLabelClasses/getLabelClasses.d.ts

@@ -1,4 +1,4 @@
-import { TLabelAlign } from "../../../formField/formField";
+import { TLabelAlign } from "../../../formField/types";
 import { TFormLayoutColumns } from "../../../formLayout/types";
 import { TFormSectionMode, TFormSectionType } from "../../../formSection/types";
 import { ITotalState } from "../../types";

package/esm/formGroup/utils/getLabelClasses/getOneLabelOneControlClasses.d.ts

@@ -1,4 +1,4 @@
-import { TLabelAlign } from "../../../formField/formField";
+import { TLabelAlign } from "../../../formField/types";
 import { TFormLayoutColumns } from "../../../formLayout/types";
 import { ILabelClasses } from "./types";
 export declare const getOneLabelOneControlClasses: (labelAlign: TLabelAlign, columns: TFormLayoutColumns) => ILabelClasses;

package/esm/formGroup/utils/getLabelClasses/getOneLabelTwoControlsClasses.d.ts

@@ -1,4 +1,4 @@
-import { TLabelAlign } from "../../../formField/formField";
+import { TLabelAlign } from "../../../formField/types";
 import { TFormLayoutColumns } from "../../../formLayout/types";
 import { ILabelClasses } from "./types";
 export declare const getOneLabelTwoControlsClasses: (labelAlign: TLabelAlign, columns: TFormLayoutColumns, elementsState: any) => ILabelClasses;

package/esm/formGroup/utils/getLabelClasses/getTwoLabelsOneControlClasses.d.ts

@@ -1,4 +1,4 @@
-import { TLabelAlign } from "../../../formField/formField";
+import { TLabelAlign } from "../../../formField/types";
 import { TFormLayoutColumns } from "../../../formLayout/types";
 import { ILabelClasses } from "./types";
 export declare const getTwoLabelsOneControlClasses: (labelAlign: TLabelAlign, columns: TFormLayoutColumns) => ILabelClasses;

package/esm/formGroup/utils/getLabelClasses/getTwoLabelsTwoControlsClasses.d.ts

@@ -1,4 +1,4 @@
-import { TLabelAlign } from "../../../formField/formField";
+import { TLabelAlign } from "../../../formField/types";
 import { TFormLayoutColumns } from "../../../formLayout/types";
 import { ILabelClasses } from "./types";
 export declare const getTwoLabelsTwoControlsClasses: (labelAlign: TLabelAlign, columns: TFormLayoutColumns) => ILabelClasses;

package/esm/formGroup/utils/getListClasses.d.ts

@@ -1,3 +1,3 @@
-import { TLabelAlign } from "../../formField/formField";
+import { TLabelAlign } from "../../formField/types";
 import { TFormLayoutColumns } from "../../formLayout/types";
 export declare const getListClasses: (align: TLabelAlign | undefined, columns: TFormLayoutColumns, isFirstLabel?: boolean) => string;

package/esm/formGroup/utils/getToggleClasses.d.ts

@@ -1,3 +1,3 @@
-import { TLabelAlign } from "../../formField/formField";
+import { TLabelAlign } from "../../formField/types";
 import { TFormLayoutColumns } from "../../formLayout/types";
 export declare const getToggleClasses: (columns: TFormLayoutColumns, labelAlign?: TLabelAlign) => string;

package/esm/formGroup/utils/initializeState.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { IFormFieldWithLabel, TLabelAlign } from "../../formField/formField";
+import { IFormFieldWithLabel, TLabelAlign } from "../../formField/types";
 import { TFormLayoutMode } from "../../formLayout/types";
 import { IElementsState } from "../types";
 export interface IControlNode extends Pick<IFormFieldWithLabel, "isReadOnly" | "readOnlyValue"> {

package/esm/formGroup/utils/isTopAlign.d.ts

@@ -1,3 +1,3 @@
-import { TLabelAlign } from "../../formField/formField";
+import { TLabelAlign } from "../../formField/types";
 import { ITotalState } from "../types";
 export declare const isTopAligned: (state: ITotalState, sectionAlign: TLabelAlign | undefined) => boolean;

package/esm/formLayout/types.d.ts

@@ -2,7 +2,7 @@
 import { ILoadingBase } from "../commonHelpers/loading";
 import { Exclusive } from "../commonHelpers/types/exclusive";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
-import { TLabelAlign } from "../formField/formField";
+import { TLabelAlign } from "../formField/types";
 import { TFormSectionType } from "../formSection/types";
 import { IFormStepper } from "../formStepper/formStepper";
 import { IFormStepperButtons } from "../formStepperButtons/formStepperButtons";

package/esm/formSection/types.d.ts

@@ -2,7 +2,7 @@ import { ICard } from "../card/card";
 import { ILoadingBase } from "../commonHelpers/loading";
 import { Exclusive } from "../commonHelpers/types/exclusive";
 import { IZenComponentProps, IZenFormLayoutItem } from "../commonHelpers/zenComponent";
-import { TLabelAlign } from "../formField/formField";
+import { TLabelAlign } from "../formField/types";
 import { TFormLayoutMode } from "../formLayout/types";
 export declare const FORM_SECTION = "FORM_SECTION";
 export type TFormSectionMode = TFormLayoutMode;

package/esm/formSection/utils/formSectionProvider.d.ts

@@ -1,6 +1,6 @@
 import { FC, PropsWithChildren } from "react";
 import { TFormSectionMode, TFormSectionType } from "../types";
-import { TLabelAlign } from "../../formField/formField";
+import { TLabelAlign } from "../../formField/types";
 export interface IFormSectionProviderProps extends PropsWithChildren {
     isFormSection?: boolean;
     labelAlign?: TLabelAlign;

package/esm/groupButtonRaw/groupButtonRaw.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { IFormFieldComponent } from "../formField/formField";
+import { IFormFieldComponent } from "../formField/types";
 import { IGroupButtonRawDefault, TGroupButtonRaw } from "./types";
 import "./groupButtonRaw.less";
 export interface IGroupButtonRaw extends IGroupButtonRawDefault {

package/esm/groupsFilterRaw/groupsFilterRaw.d.ts

@@ -2,9 +2,9 @@ import React from "react";
 import { IAdvancedEntitiesNavigatorDialog, IGroupItem, IGroupsFilterTotalState } from "./groupsFilterInterfaces";
 import "./groupsFilterRaw.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
-import { IFormFieldComponent } from "../formField/formField";
 import { IChipsParent } from "../chip/chip";
 import { TGroupsFilterRaw } from "./types";
+import { IFormFieldComponent } from "../formField/types";
 interface IGroupsFilterOptions {
     /**
     * @deprecated

package/esm/groupsFilterRaw/groupsHelper.js

@@ -4,7 +4,7 @@ injectString("cs", "GroupCompanyId", "Skupina spole\u010Dnosti");
 injectString("da-DK", "GroupCompanyId", "Virksomhedsgruppe");
 injectString("de", "GroupCompanyId", "Unternehmensgruppe");
 injectString("en", "GroupCompanyId", "Company group");
-injectString("es", "GroupCompanyId", "Grupo Compa\xF1\xEDa");
+injectString("es", "GroupCompanyId", "Grupo Empresa");
 injectString("fi-FI", "GroupCompanyId", "Yritysryhm\xE4");
 injectString("fr", "GroupCompanyId", "Groupe Entreprise");
 injectString("fr-FR", "GroupCompanyId", "Groupe Entreprise");
@@ -198,7 +198,7 @@ injectString("de", "GroupPowertrainAndFuelTypeId", "Antriebs- und Kraftstoffart"
 injectString("en", "GroupPowertrainAndFuelTypeId", "Powertrain and Fuel Type");
 injectString("es", "GroupPowertrainAndFuelTypeId", "Tipo de sistema de propulsi\xF3n y combustible");
 injectString("fi-FI", "GroupPowertrainAndFuelTypeId", "Voimansiirto ja polttoainetyyppi");
-injectString("fr", "GroupPowertrainAndFuelTypeId", "Type de motopropulseur et de carburant");
+injectString("fr", "GroupPowertrainAndFuelTypeId", "Groupe motopropulseur et type de carburant");
 injectString("fr-FR", "GroupPowertrainAndFuelTypeId", "Groupe motopropulseur et type de carburant");
 injectString("hu-HU", "GroupPowertrainAndFuelTypeId", "Hajt\xE1sl\xE1nc \xE9s \xFCzemanyag t\xEDpusa");
 injectString("id", "GroupPowertrainAndFuelTypeId", "Powertrain dan Tipe Bahan Bakar");

package/esm/headerTitle/headerTitle.js

@@ -30,7 +30,7 @@ export const HeaderTitle = ({ id, children, className, pageName, subline, isBeta
         });
         return [b, b.length && !allowBookmarkWithBack ? o.filter(el => el.type !== Bookmark) : o];
     }, [children, allowBookmarkWithBack]);
-    return _jsxs("header", { id: id, className: clsNames, children: [_jsxs("div", { className: classNames(["zen-page-header__main-line", driveMainLineClassName || ""]), children: [back.length ? back : null, _jsx("h1", { className: classNames(["zen-page-header__page-name", drivePageNameClassName || ""]), children: pageName }), isBeta ? _jsx(BetaPill, { feedbackAction: feedBackAction, betaOptionAction: betaOptionAction, className: "zen-page-header__beta" }) : null, other.length ? other : null] }), subline || ""] });
+    return _jsxs("header", { id: id, className: clsNames, children: [_jsxs("div", { className: classNames(["zen-page-header__main-line", driveMainLineClassName || ""]), children: [back.length ? back : null, pageName ? _jsx("h1", { className: classNames(["zen-page-header__page-name", drivePageNameClassName || ""]), children: pageName }) : null, isBeta ? _jsx(BetaPill, { feedbackAction: feedBackAction, betaOptionAction: betaOptionAction, className: "zen-page-header__beta" }) : null, other.length ? other : null] }), subline || ""] });
 };
 HeaderTitle.displayName = HeaderTitleDisplayName;
 export const TRANSLATIONS = [

package/esm/images/imageAdjustFilter.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import "./svgImage.less";
+import { ISvgImage } from "./svgImage";
+export declare const ImageAdjustFilter: React.FC<ISvgImage>;

package/esm/images/imageAdjustFilter.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { useUniqueId } from "../commonHelpers/useUniqueId";
+export const ImageAdjustFilter = ({ className, title, description, focusable = false }) => {
+    const uniqueId = useUniqueId();
+    const classes = useMemo(() => classNames([
+        "zen-svg-image",
+        className !== null && className !== void 0 ? className : ""
+    ]), [className]);
+    return _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 180 180", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "ImageAdjustFilter", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("circle", { cx: "90", cy: "91", r: "90", fill: "#EFF1F2" }), _jsx("mask", { id: "mask0_28535_79659", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "180", height: "180", children: _jsx("circle", { cx: "90", cy: "90", r: "90", fill: "#D9D9D9" }) }), _jsxs("g", { mask: "url(#mask0_28535_79659)", children: [_jsx("rect", { x: "29.0156", y: "27.001", width: "214.137", height: "118.084", rx: "2.11987", fill: "#E6EBEF" }), _jsx("rect", { x: "28", y: "62.0273", width: "214.662", height: "46.5352", rx: "2.11987", fill: "white" }), _jsx("rect", { x: "28", y: "108.562", width: "214.662", height: "121.092", rx: "2.11987", fill: "#E6EBEF" }), _jsx("rect", { x: "40.0073", y: "74.5371", width: "66.0499", height: "21.0159", rx: "2.11987", fill: "#A6B8C9" }), _jsx("rect", { width: "21.5163", height: "21.0159", rx: "2.11987", transform: "matrix(-1 0 0 1 129.076 74.5371)", fill: "#A6B8C9" }), _jsx("rect", { x: "38.5049", y: "76.0381", width: "66.0499", height: "21.0159", rx: "2.11987", fill: "#E6EBEF" }), _jsx("rect", { x: "143.086", y: "74.5371", width: "99.5753", height: "21.0159", rx: "2.11987", fill: "#E6EBEF" }), _jsx("rect", { x: "106.06", y: "76.0381", width: "21.0159", height: "21.0159", rx: "2.11987", fill: "#E6EBEF" }), _jsx("path", { d: "M116.567 91.0498L111.8 84.67H121.334L116.567 91.0498Z", fill: "#4E677E" }), _jsx("rect", { x: "44.5117", y: "80.542", width: "2.00151", height: "13.0098", fill: "#4E677E" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M103.919 93.0928V146.847L118.339 133.077L119.116 132.409H143.574V130.545L103.919 93.0928Z", fill: "#A6B8C9" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M103.919 91.3301V145.085L118.339 131.314L119.116 130.647H143.574L103.919 91.3301Z", fill: "#43596D" })] })] });
+};

package/esm/images/imageNoMatchingAssets.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import "./svgImage.less";
+import { ISvgImage } from "./svgImage";
+export declare const ImageNoMatchingAssets: React.FC<ISvgImage>;

package/esm/images/imageNoMatchingAssets.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { useUniqueId } from "../commonHelpers/useUniqueId";
+export const ImageNoMatchingAssets = ({ className, title, description, focusable = false }) => {
+    const uniqueId = useUniqueId();
+    const classes = useMemo(() => classNames([
+        "zen-svg-image",
+        className !== null && className !== void 0 ? className : ""
+    ]), [className]);
+    return _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 180 180", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "ImageNoMatchingAssets", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("circle", { cx: "90", cy: "90", r: "90", fill: "#F2F5F7" }), _jsx("path", { d: "M49.2449 51.725C49.3822 50.7362 50.2276 50 51.2259 50H74.186C74.5236 50 74.8558 50.0855 75.1514 50.2484L86.4138 56.4562C86.7095 56.6191 87.0417 56.7046 87.3793 56.7046H148.02C149.245 56.7046 150.183 57.7961 149.997 59.0072L140.609 120.349C140.46 121.325 139.62 122.046 138.632 122.046H41.7812C40.5673 122.046 39.6333 120.974 39.8001 119.771L49.2449 51.725Z", fill: "#A6B8C9" }), _jsx("path", { d: "M133.485 61.9948L72.6656 61.9948C72.2202 61.9948 71.7875 61.8461 71.4362 61.5723L60.3485 52.9308C59.9974 52.6571 59.5649 52.5085 59.1197 52.5083L36.4957 52.5007C35.3909 52.5003 34.4951 53.3958 34.495 54.5006L34.4949 56.4822L57.8171 56.49C58.2567 56.4902 58.6839 56.6352 59.0329 56.9025L68.4542 64.1218C68.8031 64.3892 69.2304 64.5342 69.67 64.5343L71.9774 64.5351L132.998 71.2804C134.095 71.4017 135.083 70.6107 135.205 69.5134L135.485 67L135.485 63.9948C135.485 62.8902 134.589 61.9948 133.485 61.9948Z", fill: "white" }), _jsx("path", { d: "M34.5737 56.0856C34.525 54.9485 35.4337 54 36.5719 54H59.0006C59.4538 54 59.8936 54.1539 60.2479 54.4366L71.3174 63.268C71.6716 63.5507 72.1114 63.7046 72.5647 63.7046H133.447C134.513 63.7046 135.391 64.5406 135.444 65.6053L138.245 121.947C138.302 123.089 137.391 124.046 136.248 124.046H39.4005C38.3293 124.046 37.4482 123.202 37.4024 122.132L34.5737 56.0856Z", fill: "#E6EBEF" }), _jsx("path", { d: "M39.5 129.759C39.5 130.425 41.0596 130.966 41.75 130.966H44.25C44.9404 130.966 45.5 130.425 45.5 129.759V118.897H56.75C57.4404 118.897 58 118.356 58 117.69V115.276C58 114.609 57.4404 113 56.75 113L45.5 114.069V103.207C45.5 102.54 44.1904 100.5 43.5 100.5L41.75 102C41.0596 102 40.5 102.54 40.5 103.207V114.069H29.25C28.5596 114.069 28 114.609 28 115.276L27.5 116.5C27.5 117.167 28.5596 118.897 29.25 118.897L39.5 119V129.759Z", fill: "#4E677E" }), _jsx("path", { d: "M43.5 100C44.0523 100 44.5 100.448 44.5 101V112.499H56C56.5522 112.499 56.9998 112.947 57 113.499V116.499C57 117.051 56.5523 117.499 56 117.499H44.5V129C44.5 129.552 44.0523 130 43.5 130H40.5C39.9479 130 39.5 129.552 39.5 129V117.499H28C27.4477 117.499 27 117.051 27 116.499V113.499C27.0002 112.947 27.4478 112.499 28 112.499H39.5V101C39.5 100.448 39.9479 100 40.5 100H43.5Z", fill: "#A6B8C9" }), _jsx("rect", { x: "59.0488", y: "97", width: "4", height: "8", rx: "1", transform: "rotate(34.7836 59.0488 97)", fill: "#4E677E" }), _jsx("rect", { x: "70.3809", y: "111", width: "4", height: "8", rx: "1", transform: "rotate(80.7533 70.3809 111)", fill: "#4E677E" }), _jsx("rect", { x: "69.9941", y: "127.125", width: "4", height: "8", rx: "1", transform: "rotate(105.407 69.9941 127.125)", fill: "#4E677E" })] });
+};