@geotab/zenith 3.14.0 → 3.15.0-beta.0

package/esm/header/headerContext.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 import { TAlignment } from "../absolute/absolute";
 export declare const MenuAlignmentContext: import("react").Context<{
-    alignment?: TAlignment | undefined;
+    alignment?: TAlignment;
 }>;
 export declare const HeaderMenuProvider: ({ alignment, children }: {
     alignment: TAlignment;

package/esm/header/headerHelpers.d.ts

@@ -1,10 +1,10 @@
-import React from "react";
+import React, { ReactElement } from "react";
 export declare const HeaderCustomMenuWrapper = "HeaderCustomMenuWrapper";
 export declare const getArrayOfChildren: <T>(children: T | T[] | undefined) => T[];
-export declare const isNamedChildComponent: <T>(item: any, componentName: string) => item is React.ReactElement<T, string | React.JSXElementConstructor<any>>;
-export declare const getItemsForRender: <T extends React.ReactElement<unknown, string | React.JSXElementConstructor<any>>>(items: T[], isMobile: boolean) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>[];
-export declare const getItemsForMeasure: <T extends React.ReactElement<unknown, string | React.JSXElementConstructor<any>>>(items: T[], isMobile: boolean) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>[];
-export declare const filterItems: <T extends React.ReactElement<unknown, string | React.JSXElementConstructor<any>>>(items: T[], isMobile: boolean) => {
+export declare const isNamedChildComponent: <T>(item: any, componentName: string) => item is React.ReactElement<T>;
+export declare const getItemsForRender: <T extends ReactElement>(items: T[], isMobile: boolean) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>[];
+export declare const getItemsForMeasure: <T extends ReactElement>(items: T[], isMobile: boolean) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>[];
+export declare const filterItems: <T extends ReactElement>(items: T[], isMobile: boolean) => {
     resizableElements: React.ReactElement<unknown, string | React.JSXElementConstructor<any>>[];
     leftElements: T[];
     rightElements: T[];

package/esm/header/hooks/useNonFittingElements.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface INonFittingElementProps<T extends {
     props?: {
         id?: string;
@@ -12,9 +11,9 @@ interface INonFittingElementProps<T extends {
 }
 export declare const useNonFittingElements: <T extends {
     props?: {
-        id?: string | undefined;
-        inContextMenu?: boolean | undefined;
-    } | undefined;
+        id?: string;
+        inContextMenu?: boolean;
+    };
 }>({ maxWidth, data, hiddenElementsCountToRender, widthDelta, reverseOrderOfVisible }: INonFittingElementProps<T>) => {
     visibleElements: T[];
     nonFittingElements: T[];

package/esm/headerTitle/headerTitle.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./headerTitle.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import { IBetaPillActions } from "../betaPill/betaPill";

package/esm/icons/iconAce.d.ts

@@ -0,0 +1,3 @@
+import "./icon.less";
+import { IIcon } from "./icon";
+export declare const IconAce: ({ className, size, title, description, focusable }: IIcon) => import("react/jsx-runtime").JSX.Element;

package/esm/icons/iconAce.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useId } from "react";
+import { classNames } from "../commonHelpers/classNames/classNames";
+export const IconAce = ({ className, size, title, description, focusable = false }) => {
+    const uniqueId = useId();
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconAce", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { d: "M13.6611 4.30664L13.8945 4.33789L13.915 4.3418L14 4.36133C14.0207 4.36593 14.0414 4.37148 14.0615 4.37793L14.1377 4.40234C14.1501 4.40633 14.1626 4.41036 14.1748 4.41504C14.4779 4.53142 14.735 4.7523 14.8916 5.04297L14.9531 5.17188L15.752 7.1543C17.618 11.8336 19.4882 16.8472 21.4102 21.3096C21.4207 21.334 21.4305 21.3609 21.4404 21.3887L21.6221 21.8945C21.7731 22.3166 21.7019 22.7824 21.4375 23.1406C21.2074 23.4523 20.8582 23.6467 20.4834 23.6904C20.4702 23.692 20.4566 23.6936 20.4434 23.6943L20.3623 23.6992C20.3487 23.7 20.3349 23.7002 20.3213 23.7002H16.9971C16.4866 23.7001 16.0077 23.4208 15.7695 22.9629L15.7256 22.8682C15.4522 22.2265 15.2162 21.5119 15.002 20.8652C14.8897 20.5266 14.7802 20.2053 14.6729 19.9014H10.0869C9.74066 20.7858 9.47222 21.7369 9.11426 22.7783C8.92074 23.3411 8.38582 23.7001 7.80762 23.7002H4.67871C4.23995 23.7001 3.81999 23.4933 3.55762 23.1328C3.29372 22.7701 3.22679 22.3 3.38477 21.877C5.37214 16.5555 7.10753 12.4177 9.2998 7.36914C9.47546 6.96466 9.76874 6.57892 10.0479 6.26758C10.3434 5.93792 10.6984 5.60875 11.0713 5.32031C11.4387 5.03614 11.8645 4.75987 12.3076 4.56836C12.6361 4.42648 13.1238 4.26462 13.6611 4.30664ZM13.1406 6.45117C12.9064 6.55234 12.6311 6.72223 12.3516 6.93848C12.0746 7.15269 11.8129 7.39729 11.6035 7.63086C11.3857 7.87384 11.2585 8.06803 11.21 8.17969C9.15711 12.9072 7.5172 16.8149 5.69238 21.6445H7.30371C7.65518 20.5726 8.02548 19.3151 8.5459 18.2412L8.5957 18.1543C8.72453 17.9634 8.94124 17.8458 9.17578 17.8457H15.6289L15.7324 17.8535C15.9703 17.8891 16.1762 18.0458 16.2725 18.2715C16.5176 18.8469 16.7329 19.4874 16.9365 20.1016C17.1163 20.6438 17.2887 21.1651 17.4717 21.6445H19.2979C17.3053 16.9703 15.3168 11.6199 13.418 6.91016L13.2197 6.4209C13.1953 6.43014 13.1686 6.43911 13.1406 6.45117ZM12.4688 9.24707C12.7482 9.2402 13.0052 9.40029 13.1221 9.6543C14.1073 11.796 14.8137 13.8473 15.502 16.0986C15.5667 16.3108 15.5275 16.5414 15.3955 16.7197C15.2635 16.8981 15.054 17.0029 14.832 17.0029H10.1533C9.92392 17.0028 9.70884 16.8897 9.57812 16.7012C9.44765 16.5127 9.41777 16.2723 9.49805 16.0576C10.2824 13.9622 10.9869 11.8059 11.8359 9.68652L11.8818 9.59277C12.003 9.38584 12.2242 9.2532 12.4688 9.24707ZM12.54 13.7402C12.398 14.1394 12.2547 14.54 12.1094 14.9473H12.957C12.8218 14.5392 12.6825 14.138 12.54 13.7402Z" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 1C8.30125 1 8.54545 1.24421 8.54545 1.54545C8.54545 2.33114 8.71991 2.77239 8.97376 3.02624C9.22761 3.28009 9.66886 3.45455 10.4545 3.45455C10.7558 3.45455 11 3.69875 11 4C11 4.30125 10.7558 4.54545 10.4545 4.54545C9.66886 4.54545 9.22761 4.71991 8.97376 4.97376C8.71991 5.22761 8.54545 5.66886 8.54545 6.45455C8.54545 6.75579 8.30125 7 8 7C7.69875 7 7.45455 6.75579 7.45455 6.45455C7.45455 5.66886 7.28009 5.22761 7.02624 4.97376C6.77239 4.71991 6.33114 4.54545 5.54545 4.54545C5.24421 4.54545 5 4.30125 5 4C5 3.69875 5.24421 3.45455 5.54545 3.45455C6.33114 3.45455 6.77239 3.28009 7.02624 3.02624C7.28009 2.77239 7.45455 2.33114 7.45455 1.54545C7.45455 1.24421 7.69875 1 8 1ZM8 3C7.8591 3.1881 7.70462 3.36688 7.53575 3.53575C7.36688 3.70462 7.1881 3.8591 7 4C7.1881 4.14091 7.36688 4.29538 7.53575 4.46425C7.70462 4.63313 7.8591 4.8119 8 5C8.14091 4.8119 8.29538 4.63313 8.46425 4.46425C8.63313 4.29538 8.8119 4.14091 9 4C8.8119 3.8591 8.63313 3.70462 8.46425 3.53575C8.29538 3.36688 8.14091 3.1881 8 3Z" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.5 6C5.75104 6 5.95455 6.20351 5.95455 6.45455C5.95455 7.10929 6.09993 7.47699 6.31147 7.68853C6.52301 7.90007 6.89071 8.04545 7.54545 8.04545C7.79649 8.04545 8 8.24896 8 8.5C8 8.75104 7.79649 8.95455 7.54545 8.95455C6.89071 8.95455 6.52301 9.09993 6.31147 9.31147C6.09993 9.52301 5.95455 9.89071 5.95455 10.5455C5.95455 10.7965 5.75104 11 5.5 11C5.24896 11 5.04545 10.7965 5.04545 10.5455C5.04545 9.89071 4.90007 9.52301 4.68853 9.31147C4.47699 9.09993 4.10929 8.95455 3.45455 8.95455C3.20351 8.95455 3 8.75104 3 8.5C3 8.24896 3.20351 8.04545 3.45455 8.04545C4.10929 8.04545 4.47699 7.90007 4.68853 7.68853C4.90007 7.47699 5.04545 7.10929 5.04545 6.45455C5.04545 6.20351 5.24896 6 5.5 6ZM5.5 8C5.42955 8.09405 5.35231 8.18344 5.26787 8.26787C5.18344 8.35231 5.09405 8.42955 5 8.5C5.09405 8.57045 5.18344 8.64769 5.26787 8.73213C5.35231 8.81656 5.42955 8.90595 5.5 9C5.57045 8.90595 5.64769 8.81656 5.73213 8.73213C5.81656 8.64769 5.90595 8.57045 6 8.5C5.90595 8.42955 5.81656 8.35231 5.73213 8.26787C5.64769 8.18344 5.57045 8.09405 5.5 8Z" })] }));
+};

package/esm/icons/iconBreak.d.ts

@@ -0,0 +1,3 @@
+import "./icon.less";
+import { IIcon } from "./icon";
+export declare const IconBreak: ({ className, size, title, description, focusable }: IIcon) => import("react/jsx-runtime").JSX.Element;

package/esm/icons/iconBreak.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useId } from "react";
+import { classNames } from "../commonHelpers/classNames/classNames";
+export const IconBreak = ({ className, size, title, description, focusable = false }) => {
+    const uniqueId = useId();
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconBreak", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { d: "M5 21C4.71667 21 4.47917 20.9042 4.2875 20.7125C4.09583 20.5208 4 20.2833 4 20C4 19.7167 4.09583 19.4792 4.2875 19.2875C4.47917 19.0958 4.71667 19 5 19H19C19.2833 19 19.5208 19.0958 19.7125 19.2875C19.9042 19.4792 20 19.7167 20 20C20 20.2833 19.9042 20.5208 19.7125 20.7125C19.5208 20.9042 19.2833 21 19 21H5ZM8 17C6.9 17 5.95833 16.6083 5.175 15.825C4.39167 15.0417 4 14.1 4 13V5C4 4.45 4.19583 3.97917 4.5875 3.5875C4.97917 3.19583 5.45 3 6 3H20C20.55 3 21.0208 3.19583 21.4125 3.5875C21.8042 3.97917 22 4.45 22 5V8C22 8.55 21.8042 9.02083 21.4125 9.4125C21.0208 9.80417 20.55 10 20 10H18V13C18 14.1 17.6083 15.0417 16.825 15.825C16.0417 16.6083 15.1 17 14 17H8ZM8 15H14C14.55 15 15.0208 14.8042 15.4125 14.4125C15.8042 14.0208 16 13.55 16 13V5H6V13C6 13.55 6.19583 14.0208 6.5875 14.4125C6.97917 14.8042 7.45 15 8 15ZM18 8H20V5H18V8ZM8 15H6H16H8Z" })] }));
+};

package/esm/icons/iconChevronStepper.d.ts

@@ -0,0 +1,3 @@
+import "./icon.less";
+import { IIcon } from "./icon";
+export declare const IconChevronStepper: ({ className, size, title, description, focusable }: IIcon) => import("react/jsx-runtime").JSX.Element;

package/esm/icons/iconChevronStepper.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useId } from "react";
+import { classNames } from "../commonHelpers/classNames/classNames";
+export const IconChevronStepper = ({ className, size, title, description, focusable = false }) => {
+    const uniqueId = useId();
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconChevronStepper", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.7071 23.7071C12.3166 24.0976 11.6834 24.0976 11.2929 23.7071L7.29289 19.7071C6.90237 19.3166 6.90237 18.6834 7.29289 18.2929C7.68342 17.9024 8.31658 17.9024 8.70711 18.2929L12 21.5858L15.2929 18.2929C15.6834 17.9024 16.3166 17.9024 16.7071 18.2929C17.0976 18.6834 17.0976 19.3166 16.7071 19.7071L12.7071 23.7071Z" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.2929 0.292893C11.6834 -0.0976311 12.3166 -0.0976311 12.7071 0.292893L16.7071 4.29289C17.0976 4.68342 17.0976 5.31658 16.7071 5.70711C16.3166 6.09763 15.6834 6.09763 15.2929 5.70711L12 2.41421L8.70711 5.70711C8.31658 6.09763 7.68342 6.09763 7.29289 5.70711C6.90237 5.31658 6.90237 4.68342 7.29289 4.29289L11.2929 0.292893Z" })] }));
+};

package/esm/icons/iconPotato.d.ts

@@ -0,0 +1,3 @@
+import "./icon.less";
+import { IIcon } from "./icon";
+export declare const IconPotato: ({ className, size, title, description, focusable }: IIcon) => import("react/jsx-runtime").JSX.Element;

package/esm/icons/iconPotato.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useId } from "react";
+import { classNames } from "../commonHelpers/classNames/classNames";
+export const IconPotato = ({ className, size, title, description, focusable = false }) => {
+    const uniqueId = useId();
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconPotato", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { d: "M10.3899 11.289C9.89584 11.289 9.49536 10.8885 9.49536 10.3945C9.49536 9.90049 9.89584 9.5 10.3899 9.5C10.8839 9.5 11.2844 9.90048 11.2844 10.3945C11.2844 10.8885 10.8839 11.289 10.3899 11.289Z" }), _jsx("path", { d: "M13.6101 11.289C13.1161 11.289 12.7156 10.8885 12.7156 10.3945C12.7156 9.90049 13.1161 9.5 13.6101 9.5C14.1041 9.5 14.5046 9.90048 14.5046 10.3945C14.5046 10.8885 14.1041 11.289 13.6101 11.289Z" }), _jsx("path", { d: "M11.0684 12.6198C11.245 12.9704 11.6083 13.211 12.0277 13.211C12.4471 13.211 12.8103 12.9705 12.9869 12.6199C13.1111 12.3734 13.3247 12.1381 13.6006 12.138L14.0044 12.1378C14.2806 12.1377 14.5098 12.3638 14.4553 12.6346C14.2259 13.7742 13.223 14.6337 12.0179 14.6422C10.8091 14.6376 9.8022 13.7766 9.57234 12.6344C9.51786 12.3637 9.74693 12.1376 10.0231 12.1376H10.4543C10.7304 12.1376 10.9442 12.3731 11.0684 12.6198Z" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.9873 22.4883L13.5 22.5C16.4407 22.5 18.8869 20.3841 19.4004 17.5918C19.5323 16.8744 19.42 16.1408 19.2617 15.4287L18.9766 14.1436C18.6996 12.8971 18.5427 11.6271 18.5078 10.3516L18.5 9.80469V6.5C18.5 3.73858 16.2614 1.5 13.5 1.5C10.7335 1.5 8.43995 2.53321 6.85645 4.43262L6.57227 4.79297C5.19547 6.63968 4.5 9.1268 4.5 12C4.5 15.0646 5.29128 17.6898 6.85645 19.5674C8.34107 21.3482 10.4498 22.3679 12.9873 22.4883ZM16.5 9.80469V6.5C16.5 4.84314 15.1569 3.5 13.5 3.5C11.2662 3.5 9.55971 4.31436 8.39355 5.71289C7.2091 7.13364 6.5 9.25864 6.5 12C6.5 14.7414 7.2091 16.8664 8.39355 18.2871C9.55971 19.6856 11.2662 20.5 13.5 20.5C15.4583 20.5 17.0914 19.0907 17.4336 17.2305C17.4892 16.9282 17.4567 16.5245 17.3096 15.8623L17.0234 14.5771C16.6752 13.0102 16.5 11.4098 16.5 9.80469Z" })] }));
+};

package/esm/icons/iconToggleLarge.d.ts

@@ -0,0 +1,3 @@
+import "./icon.less";
+import { IIcon } from "./icon";
+export declare const IconToggleLarge: ({ className, size, title, description, focusable }: IIcon) => import("react/jsx-runtime").JSX.Element;

package/esm/icons/iconToggleLarge.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useId } from "react";
+import { classNames } from "../commonHelpers/classNames/classNames";
+export const IconToggleLarge = ({ className, size, title, description, focusable = false }) => {
+    const uniqueId = useId();
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconToggleLarge", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1 12C1 8.68629 3.68629 6 7 6H17C20.3137 6 23 8.68629 23 12C23 15.3137 20.3137 18 17 18H7C3.68629 18 1 15.3137 1 12ZM17 16C19.2091 16 21 14.2091 21 12C21 9.79086 19.2091 8 17 8C14.7909 8 13 9.79086 13 12C13 14.2091 14.7909 16 17 16ZM12.5278 8C11.5777 9.06151 11 10.4633 11 12C11 13.5367 11.5777 14.9385 12.5278 16H7C4.79086 16 3 14.2091 3 12C3 9.79086 4.79086 8 7 8H12.5278Z" })] }));
+};

package/esm/icons/iconToggleSmall.d.ts

@@ -0,0 +1,3 @@
+import "./icon.less";
+import { IIcon } from "./icon";
+export declare const IconToggleSmall: ({ className, size, title, description, focusable }: IIcon) => import("react/jsx-runtime").JSX.Element;

package/esm/icons/iconToggleSmall.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useId } from "react";
+import { classNames } from "../commonHelpers/classNames/classNames";
+export const IconToggleSmall = ({ className, size, title, description, focusable = false }) => {
+    const uniqueId = useId();
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconToggleSmall", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1 12C1 8.13401 4.13401 5 8 5H16C19.866 5 23 8.13401 23 12C23 15.866 19.866 19 16 19H8C4.13401 19 1 15.866 1 12ZM8 7C5.23858 7 3 9.23858 3 12C3 14.7614 5.23858 17 8 17H16C18.7614 17 21 14.7614 21 12C21 9.23858 18.7614 7 16 7H8ZM12 12C12 9.79086 13.7909 8 16 8C18.2091 8 20 9.79086 20 12C20 14.2091 18.2091 16 16 16C13.7909 16 12 14.2091 12 12ZM16 10C14.8954 10 14 10.8954 14 12C14 13.1046 14.8954 14 16 14C17.1046 14 18 13.1046 18 12C18 10.8954 17.1046 10 16 10Z" })] }));
+};

package/esm/icons/iconTrendNeutral.d.ts

@@ -0,0 +1,3 @@
+import "./icon.less";
+import { IIcon } from "./icon";
+export declare const IconTrendNeutral: ({ className, size, title, description, focusable }: IIcon) => import("react/jsx-runtime").JSX.Element;

package/esm/icons/iconTrendNeutral.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useId } from "react";
+import { classNames } from "../commonHelpers/classNames/classNames";
+export const IconTrendNeutral = ({ className, size, title, description, focusable = false }) => {
+    const uniqueId = useId();
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconTrendNeutral", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", d: "M7 12a1 1 0 0 1 1-1h8a1 1 0 1 1 0 2H8a1 1 0 0 1-1-1", clipRule: "evenodd" })] }));
+};

package/esm/icons/iconTruck.d.ts

@@ -0,0 +1,3 @@
+import "./icon.less";
+import { IIcon } from "./icon";
+export declare const IconTruck: ({ className, size, title, description, focusable }: IIcon) => import("react/jsx-runtime").JSX.Element;

package/esm/icons/iconTruck.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useId } from "react";
+import { classNames } from "../commonHelpers/classNames/classNames";
+export const IconTruck = ({ className, size, title, description, focusable = false }) => {
+    const uniqueId = useId();
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconTruck", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 5C8 4.44772 8.44772 4 9 4H21C21.5523 4 22 4.44772 22 5V16C22 16.5523 21.5523 17 21 17H19.9646C19.7219 18.6961 18.2632 20 16.5 20C14.7368 20 13.2781 18.6961 13.0354 17H10.9646C10.7219 18.6961 9.26324 20 7.5 20C5.73676 20 4.27806 18.6961 4.03544 17H3C2.44772 17 2 16.5523 2 16V10C2 9.80258 2.05844 9.60957 2.16795 9.4453L4.16795 6.4453C4.35342 6.1671 4.66565 6 5 6H8V5ZM8 8H5.53518L4 10.3028V15H4.33682C4.89855 13.8175 6.1038 13 7.5 13C7.66976 13 7.8367 13.0121 8 13.0354V8ZM9.94949 14C10.2424 14.2871 10.4851 14.6252 10.6632 15H13.3368C13.8985 13.8175 15.1038 13 16.5 13C17.8962 13 19.1015 13.8175 19.6632 15H20V6H10V14H9.94949ZM7.5 15C6.67157 15 6 15.6716 6 16.5C6 17.3284 6.67157 18 7.5 18C8.32843 18 9 17.3284 9 16.5C9 15.6716 8.32843 15 7.5 15ZM16.5 15C15.6716 15 15 15.6716 15 16.5C15 17.3284 15.6716 18 16.5 18C17.3284 18 18 17.3284 18 16.5C18 15.6716 17.3284 15 16.5 15Z" })] }));
+};

package/esm/index.d.ts

@@ -174,6 +174,7 @@ export { type IHeaderButton, HeaderButtonDisplayName, HeaderButton } from "./hea
 export { type IHeaderMenu, HeaderMenuDisplayName, HeaderMenu } from "./header/headerMenu";
 export { useCustomMenu } from "./header/hooks/useCustomMenu";
 export { type IIcon } from "./icons/icon";
+export { IconAce } from "./icons/iconAce";
 export { IconActivity } from "./icons/iconActivity";
 export { IconAddPeople } from "./icons/iconAddPeople";
 export { IconAiImages } from "./icons/iconAiImages";
@@ -243,6 +244,7 @@ export { IconBookmarkFill } from "./icons/iconBookmarkFill";
 export { IconBookmarkPlus } from "./icons/iconBookmarkPlus";
 export { IconBookmarkSelectedHover } from "./icons/iconBookmarkSelectedHover";
 export { IconBranches } from "./icons/iconBranches";
+export { IconBreak } from "./icons/iconBreak";
 export { IconBrokenLink } from "./icons/iconBrokenLink";
 export { IconBrowser } from "./icons/iconBrowser";
 export { IconBrush } from "./icons/iconBrush";
@@ -294,6 +296,7 @@ export { IconChevronLeft } from "./icons/iconChevronLeft";
 export { IconChevronLeftSmall } from "./icons/iconChevronLeftSmall";
 export { IconChevronRight } from "./icons/iconChevronRight";
 export { IconChevronRightSmall } from "./icons/iconChevronRightSmall";
+export { IconChevronStepper } from "./icons/iconChevronStepper";
 export { IconChevronTop } from "./icons/iconChevronTop";
 export { IconChevronTopSmall } from "./icons/iconChevronTopSmall";
 export { IconChromecast } from "./icons/iconChromecast";
@@ -567,6 +570,7 @@ export { IconPlusCircle } from "./icons/iconPlusCircle";
 export { IconPlusFile } from "./icons/iconPlusFile";
 export { IconPlusLines } from "./icons/iconPlusLines";
 export { IconPlusSquare } from "./icons/iconPlusSquare";
+export { IconPotato } from "./icons/iconPotato";
 export { IconPound } from "./icons/iconPound";
 export { IconPrinter } from "./icons/iconPrinter";
 export { IconProcessor } from "./icons/iconProcessor";
@@ -647,7 +651,11 @@ export { IconThermograph } from "./icons/iconThermograph";
 export { IconThermometer } from "./icons/iconThermometer";
 export { IconThumbsDown } from "./icons/iconThumbsDown";
 export { IconThumbsUp } from "./icons/iconThumbsUp";
+export { IconToggleLarge } from "./icons/iconToggleLarge";
+export { IconToggleSmall } from "./icons/iconToggleSmall";
 export { IconTrailer } from "./icons/iconTrailer";
+export { IconTrendNeutral } from "./icons/iconTrendNeutral";
+export { IconTruck } from "./icons/iconTruck";
 export { IconUmbrella } from "./icons/iconUmbrella";
 export { IconUnderline } from "./icons/iconUnderline";
 export { IconUndo } from "./icons/iconUndo";

package/esm/index.js

@@ -163,6 +163,7 @@ export { HeaderBackDisplayName, HeaderBack } from "./header/headerBack";
 export { HeaderButtonDisplayName, HeaderButton } from "./header/headerButton";
 export { HeaderMenuDisplayName, HeaderMenu } from "./header/headerMenu";
 export { useCustomMenu } from "./header/hooks/useCustomMenu";
+export { IconAce } from "./icons/iconAce";
 export { IconActivity } from "./icons/iconActivity";
 export { IconAddPeople } from "./icons/iconAddPeople";
 export { IconAiImages } from "./icons/iconAiImages";
@@ -232,6 +233,7 @@ export { IconBookmarkFill } from "./icons/iconBookmarkFill";
 export { IconBookmarkPlus } from "./icons/iconBookmarkPlus";
 export { IconBookmarkSelectedHover } from "./icons/iconBookmarkSelectedHover";
 export { IconBranches } from "./icons/iconBranches";
+export { IconBreak } from "./icons/iconBreak";
 export { IconBrokenLink } from "./icons/iconBrokenLink";
 export { IconBrowser } from "./icons/iconBrowser";
 export { IconBrush } from "./icons/iconBrush";
@@ -283,6 +285,7 @@ export { IconChevronLeft } from "./icons/iconChevronLeft";
 export { IconChevronLeftSmall } from "./icons/iconChevronLeftSmall";
 export { IconChevronRight } from "./icons/iconChevronRight";
 export { IconChevronRightSmall } from "./icons/iconChevronRightSmall";
+export { IconChevronStepper } from "./icons/iconChevronStepper";
 export { IconChevronTop } from "./icons/iconChevronTop";
 export { IconChevronTopSmall } from "./icons/iconChevronTopSmall";
 export { IconChromecast } from "./icons/iconChromecast";
@@ -556,6 +559,7 @@ export { IconPlusCircle } from "./icons/iconPlusCircle";
 export { IconPlusFile } from "./icons/iconPlusFile";
 export { IconPlusLines } from "./icons/iconPlusLines";
 export { IconPlusSquare } from "./icons/iconPlusSquare";
+export { IconPotato } from "./icons/iconPotato";
 export { IconPound } from "./icons/iconPound";
 export { IconPrinter } from "./icons/iconPrinter";
 export { IconProcessor } from "./icons/iconProcessor";
@@ -635,7 +639,11 @@ export { IconThermograph } from "./icons/iconThermograph";
 export { IconThermometer } from "./icons/iconThermometer";
 export { IconThumbsDown } from "./icons/iconThumbsDown";
 export { IconThumbsUp } from "./icons/iconThumbsUp";
+export { IconToggleLarge } from "./icons/iconToggleLarge";
+export { IconToggleSmall } from "./icons/iconToggleSmall";
 export { IconTrailer } from "./icons/iconTrailer";
+export { IconTrendNeutral } from "./icons/iconTrendNeutral";
+export { IconTruck } from "./icons/iconTruck";
 export { IconUmbrella } from "./icons/iconUmbrella";
 export { IconUnderline } from "./icons/iconUnderline";
 export { IconUndo } from "./icons/iconUndo";

package/esm/layout/layout.d.ts

@@ -22,5 +22,6 @@ interface ILayoutComponents {
     FullScreenButton: React.FC<IFullScreenButton>;
 }
 export declare const getContentPaddings: (isMobile: boolean, startWithToolbar: boolean) => number;
-export declare const Layout: (({ id, className, pageScrolling, children }: ILayout) => import("react/jsx-runtime").JSX.Element | null) & ILayoutComponents;
+declare const LayoutInner: ({ id, className, pageScrolling, children }: ILayout) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Layout: typeof LayoutInner & ILayoutComponents;
 export {};

package/esm/layout/layoutBanner.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 export interface ILayoutBanner extends IZenComponentProps {
     children: React.ReactNode;

package/esm/lineChart/lineChart.d.ts

@@ -2,6 +2,7 @@ import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import type { ChartData, ChartOptions, Plugin, PluginOptionsByType } from "chart.js/auto";
 import "../react-chartjs/dateAdapter";
 import { ILegendOptions } from "./plugins/htmlLegend";
+import "./lineChart.less";
 interface ILineChartPluginOptions extends Partial<PluginOptionsByType<"line">> {
     htmlLegend?: ILegendOptions;
 }

package/esm/lineChart/lineChart.js

@@ -1,13 +1,11 @@
-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 { injectString } from "../utils/localization/translationsDictionary";
+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 } from "react/jsx-runtime";
 import { useContext, useEffect, useMemo } from "react";
@@ -20,73 +18,135 @@ import { LEGEND_PLUGIN_ID } from "./plugins/htmlLegend";
 import { useDrive } from "../utils/theme/useDrive";
 import { useMobile } from "../commonHelpers/hooks/useMobile";
 import { themeContext } from "../utils/theme/themeContext";
+import { useLanguage } from "../utils/localization/useLanguage";
+injectString("cs", "Line chart", "Spojnicov\xFD graf");
+injectString("da-DK", "Line chart", "Linjediagram");
+injectString("de", "Line chart", "Liniendiagramm");
+injectString("en", "Line chart", "Line chart");
+injectString("es", "Line chart", "Gr\xE1fico de l\xEDneas");
+injectString("fi-FI", "Line chart", "Viivakaavio");
+injectString("fr", "Line chart", "Graphique lin\xE9aire");
+injectString("fr-FR", "Line chart", "Graphique lin\xE9aire");
+injectString("hu-HU", "Line chart", "Vonaldiagram");
+injectString("id", "Line chart", "Bagan garis");
+injectString("it", "Line chart", "Grafico a linee");
+injectString("ja", "Line chart", "\u6298\u308C\u7DDA\u30B0\u30E9\u30D5");
+injectString("ko-KR", "Line chart", "\uC120\uD615 \uCC28\uD2B8");
+injectString("ms", "Line chart", "Carta garisan");
+injectString("nb-NO", "Line chart", "Linjediagram");
+injectString("nl", "Line chart", "Lijndiagram");
+injectString("pl", "Line chart", "Wykres liniowy");
+injectString("pt-BR", "Line chart", "Gr\xE1fico de linhas");
+injectString("pt-PT", "Line chart", "Gr\xE1fico de linhas");
+injectString("sk-SK", "Line chart", "\u010Ciarov\xFD graf");
+injectString("sv", "Line chart", "Linjediagram");
+injectString("th", "Line chart", "\u0E41\u0E1C\u0E19\u0E20\u0E39\u0E21\u0E34\u0E40\u0E2A\u0E49\u0E19");
+injectString("tr", "Line chart", "\xC7izgi grafik");
+injectString("zh-Hans", "Line chart", "\u6298\u7EBF\u56FE");
+injectString("zh-TW", "Line chart", "\u6298\u7DDA\u5716");
+injectString("ro-RO", "Line chart", "Grafic liniar");
+injectString("ar", "Line chart", "\u0645\u062E\u0637\u0637 \u062E\u0637\u064A");
+injectString("lt-LT", "Line chart", "Linijin\u0117 diagrama");
+injectString("lv-LV", "Line chart", "L\u012Bniju diagramma");
+injectString("ka-GE", "Line chart", "\u10EE\u10D0\u10D6\u10DD\u10D5\u10D0\u10DC\u10D8 \u10E1\u10E5\u10D4\u10DB\u10D0");
+injectString("el-GR", "Line chart", "\u0393\u03C1\u03AC\u03C6\u03B7\u03BC\u03B1 \u03B3\u03C1\u03B1\u03BC\u03BC\u03CE\u03BD");
+injectString("et-EE", "Line chart", "Joondiagramm");
+injectString("bg-BG", "Line chart", "\u041B\u0438\u043D\u0435\u0439\u043D\u0430 \u0434\u0438\u0430\u0433\u0440\u0430\u043C\u0430");
 ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler, TimeScale);
 const defaultGridStyle = {
-    drawTicks: false,
-    color: "#C0CCD8"
+  drawTicks: false,
+  color: "#C0CCD8"
 };
 const defaultGridBorderStyle = {
-    display: false,
-    dash: [2, 2]
+  display: false,
+  dash: [2, 2]
 };
 const defTicksStyle = {
-    padding: 10
+  padding: 10
 };
-const getDefaultOptions = (fontSize) => {
-    const defTitleStyle = {
-        display: true,
-        font: {
-            size: fontSize,
-            weight: "400"
-        }
-    };
-    return {
-        responsive: true,
-        maintainAspectRatio: false,
-        scales: {
-            x: {
-                grid: defaultGridStyle,
-                border: defaultGridBorderStyle,
-                ticks: defTicksStyle,
-                title: defTitleStyle
-            },
-            y: {
-                grid: defaultGridStyle,
-                border: defaultGridBorderStyle,
-                ticks: defTicksStyle,
-                title: defTitleStyle
-            }
-        },
-        plugins: {
-            legend: {
-                display: false
-            },
-            tooltip: {
-                enabled: true
-            }
-        }
-    };
+const getDefaultOptions = fontSize => {
+  const defTitleStyle = {
+    display: true,
+    font: {
+      size: fontSize,
+      weight: "400"
+    }
+  };
+  return {
+    responsive: true,
+    maintainAspectRatio: false,
+    scales: {
+      x: {
+        grid: defaultGridStyle,
+        border: defaultGridBorderStyle,
+        ticks: defTicksStyle,
+        title: defTitleStyle
+      },
+      y: {
+        grid: defaultGridStyle,
+        border: defaultGridBorderStyle,
+        ticks: defTicksStyle,
+        title: defTitleStyle
+      }
+    },
+    plugins: {
+      legend: {
+        display: false
+      },
+      tooltip: {
+        enabled: true
+      }
+    }
+  };
 };
 /**
  * @deprecated - will be removed in the next releases.
  */
-export const LineChart = (_a) => {
-    var { data, options = {}, plugins, className } = _a, rest = __rest(_a, ["data", "options", "plugins", "className"]);
-    const isDrive = useDrive();
-    const isMobile = useMobile();
-    const memoizedFontSize = useMemo(() => (isDrive ? (isMobile ? 14 : 16) : 12), [isDrive, isMobile]);
-    const { dark } = useContext(themeContext);
-    useEffect(() => {
-        ChartJS.defaults.font = {
-            family: "Roboto",
-            size: memoizedFontSize
-        };
-        ChartJS.defaults.color = dark ? "#FFFFFF" : "#1F2833";
-    }, [memoizedFontSize, dark]);
-    const adaptedData = Object.assign({}, data);
-    const memoizedDefaultOptions = useMemo(() => getDefaultOptions(memoizedFontSize), [memoizedFontSize]);
-    const adaptedOptions = deepMerge(memoizedDefaultOptions, options);
-    adaptedData.datasets = adaptedData.datasets.map((ds, i) => getDefaultDatasetStyle(ds, i));
-    const memoizedPlagins = useMemo(() => plugins === null || plugins === void 0 ? void 0 : plugins.map(el => (el.id === LEGEND_PLUGIN_ID ? Object.assign(Object.assign({}, el), { isDrive: isDrive }) : el)), [isDrive, plugins]);
-    return _jsx(Line, Object.assign({ options: adaptedOptions, data: adaptedData, plugins: memoizedPlagins, className: className }, rest));
-};
+export const LineChart = _a => {
+  var {
+      data,
+      options = {},
+      plugins,
+      className
+    } = _a,
+    rest = __rest(_a, ["data", "options", "plugins", "className"]);
+  const {
+    translate
+  } = useLanguage();
+  const isDrive = useDrive();
+  const isMobile = useMobile();
+  const memoizedFontSize = useMemo(() => isDrive ? isMobile ? 14 : 16 : 12, [isDrive, isMobile]);
+  const {
+    dark
+  } = useContext(themeContext);
+  useEffect(() => {
+    ChartJS.defaults.font = {
+      family: "Roboto",
+      size: memoizedFontSize
+    };
+    ChartJS.defaults.color = dark ? "#FFFFFF" : "#1F2833";
+  }, [memoizedFontSize, dark]);
+  const adaptedData = Object.assign({}, data);
+  const memoizedDefaultOptions = useMemo(() => getDefaultOptions(memoizedFontSize), [memoizedFontSize]);
+  const adaptedOptions = deepMerge(memoizedDefaultOptions, options);
+  adaptedData.datasets = adaptedData.datasets.map((ds, i) => getDefaultDatasetStyle(ds, i));
+  const memoizedPlagins = useMemo(() => plugins === null || plugins === void 0 ? void 0 : plugins.map(el => el.id === LEGEND_PLUGIN_ID ? Object.assign(Object.assign({}, el), {
+    isDrive: isDrive
+  }) : el), [isDrive, plugins]);
+  return _jsx("div", {
+    className: "zen-line-chart",
+    tabIndex: 0,
+    style: {
+      width: "100%",
+      height: "100%"
+    },
+    role: "figure",
+    "aria-label": translate("Line chart"),
+    children: _jsx(Line, Object.assign({
+      options: adaptedOptions,
+      data: adaptedData,
+      plugins: memoizedPlagins,
+      className: className
+    }, rest))
+  });
+};

package/esm/lineChartMini/lineChartMini.d.ts

@@ -1,5 +1,6 @@
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import type { ChartData, ChartOptions } from "chart.js/auto";
+import "./lineChartMini.less";
 export interface ILineChartMini extends IZenComponentProps {
     data: ChartData<"line">;
     options?: ChartOptions<"line">;