@scality/core-ui 0.161.0 → 0.163.0

package/dist/components/emptytable/Emptytable.component.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-nocheck
 import styled, { css } from 'styled-components';
 import { spacing } from '../../spacing';
 const EmptytableContainer = styled.tr `

package/dist/components/error-pages/ErrorPage401.component.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 type Props = {
     supportLink?: string;
     locale?: string;

package/dist/components/error-pages/ErrorPage401.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorPage401.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/error-pages/ErrorPage401.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA2B1B,KAAK,KAAK,GAAG;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC1E,CAAC;AAEF,iBAAS,YAAY,CAAC,EACpB,WAAuB,EACvB,MAAa,EACb,iBAAiB,EACjB,GAAG,IAAI,EACR,EAAE,KAAK,2CAoCP;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"ErrorPage401.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/error-pages/ErrorPage401.component.tsx"],"names":[],"mappings":"AA0BA,KAAK,KAAK,GAAG;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC1E,CAAC;AAEF,iBAAS,YAAY,CAAC,EACpB,WAAuB,EACvB,MAAa,EACb,iBAAiB,EACjB,GAAG,IAAI,EACR,EAAE,KAAK,2CAoCP;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/error-pages/ErrorPage404.component.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 type Props = {
     locale?: string;
     onReturnHomeClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;

package/dist/components/error-pages/ErrorPage404.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorPage404.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/error-pages/ErrorPage404.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA2B1B,KAAK,KAAK,GAAG;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC1E,CAAC;AAEF,iBAAS,YAAY,CAAC,EAAE,MAAa,EAAE,iBAAiB,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CA6BzE;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"ErrorPage404.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/error-pages/ErrorPage404.component.tsx"],"names":[],"mappings":"AA0BA,KAAK,KAAK,GAAG;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC1E,CAAC;AAEF,iBAAS,YAAY,CAAC,EAAE,MAAa,EAAE,iBAAiB,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CA6BzE;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/error-pages/ErrorPage500.component.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 type Props = {
     supportLink?: string;
     locale?: string;

package/dist/components/error-pages/ErrorPage500.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorPage500.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/error-pages/ErrorPage500.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgC1B,KAAK,KAAK,GAAG;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACzE,YAAY,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;CAC3C,CAAC;AAEF,iBAAS,YAAY,CAAC,EACpB,WAAuB,EACvB,MAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,GAAG,IAAI,EACR,EAAE,KAAK,2CAwCP;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"ErrorPage500.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/error-pages/ErrorPage500.component.tsx"],"names":[],"mappings":"AA+BA,KAAK,KAAK,GAAG;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACzE,YAAY,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;CAC3C,CAAC;AAEF,iBAAS,YAAY,CAAC,EACpB,WAAuB,EACvB,MAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,GAAG,IAAI,EACR,EAAE,KAAK,2CAwCP;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/error-pages/ErrorPageAuth.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorPageAuth.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/error-pages/ErrorPageAuth.component.tsx"],"names":[],"mappings":"AA2BA,KAAK,KAAK,GAAG;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,iBAAS,aAAa,CAAC,EACrB,WAAuB,EACvB,MAAa,EACb,GAAG,IAAI,EACR,EAAE,KAAK,2CA+BP;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"ErrorPageAuth.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/error-pages/ErrorPageAuth.component.tsx"],"names":[],"mappings":"AA0BA,KAAK,KAAK,GAAG;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,iBAAS,aAAa,CAAC,EACrB,WAAuB,EACvB,MAAa,EACb,GAAG,IAAI,EACR,EAAE,KAAK,2CA+BP;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/form/Form.component.d.ts

@@ -1,4 +1,4 @@
-import React, { FormHTMLAttributes, ReactElement, ReactNode } from 'react';
+import { FormHTMLAttributes, ReactElement, ReactNode } from 'react';
 import { IconName } from '../icon/Icon.component';
 declare const DESCRIPTION_PREFIX = "describe-";
 declare const LABEL_PREFIX = "label-";
@@ -50,7 +50,7 @@ type FormSectionProps = {
     rightActions?: ReactNode;
 };
 declare const FormSection: ({ children, title, forceLabelWidth, rightActions, }: FormSectionProps) => import("react/jsx-runtime").JSX.Element;
-declare const Form: React.ForwardRefExoticComponent<(PageFormProps | TabFormProps) & React.RefAttributes<HTMLFormElement>>;
+declare const Form: import("react").ForwardRefExoticComponent<(PageFormProps | TabFormProps) & import("react").RefAttributes<HTMLFormElement>>;
 declare const useFieldContext: () => {
     isContextAvailable: boolean;
     error?: string;

package/dist/components/form/Form.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/form/Form.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAGZ,kBAAkB,EAGlB,YAAY,EACZ,SAAS,EAKV,MAAM,OAAO,CAAC;AAKf,OAAO,EAAQ,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAKxD,QAAA,MAAM,kBAAkB,cAAc,CAAC;AACvC,QAAA,MAAM,YAAY,WAAW,CAAC;AAG9B,KAAK,SAAS,GAAG,IAAI,CACnB,kBAAkB,CAAC,eAAe,CAAC,EACnC,YAAY,GAAG,gBAAgB,CAChC,GAAG;IACF,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;IAClC,WAAW,CAAC,EAAE,KAAK,GAAG,SAAS,CAAC;IAChC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,KAAK,aAAa,GAAG;IACnB,MAAM,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,IAAI,CAAC,EAAE,QAAQ,CAAC;KACjB,CAAC;CACH,GAAG,SAAS,CAAC;AACd,KAAK,YAAY,GAAG;IAAE,MAAM,EAAE;QAAE,IAAI,EAAE,KAAK,CAAA;KAAE,CAAA;CAAE,GAAG,SAAS,CAAC;AAyD5D,KAAK,YAAY,GAAG;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,YAAY,CAAC,YAAY,CAAC,CAAC;IACpC,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACtC,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,SAAS,6GAWZ,cAAc,4CAsGhB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,QAAQ,EAAE,YAAY,CAAC,cAAc,CAAC,GAAG,YAAY,CAAC,cAAc,CAAC,EAAE,CAAC;IACxE,KAAK,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,QAAQ,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B,CAAC;AAEF,QAAA,MAAM,WAAW,wDAKd,gBAAgB,4CAmClB,CAAC;AAgGF,QAAA,MAAM,IAAI,wGAYT,CAAC;AASF,QAAA,MAAM,eAAe;;YANX,MAAM;eACH,OAAO;eACP,OAAO;CAWnB,CAAC;AAEF,OAAO,EACL,IAAI,EACJ,WAAW,EACX,SAAS,EACT,eAAe,EACf,kBAAkB,EAClB,YAAY,GACb,CAAC"}
+{"version":3,"file":"Form.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/form/Form.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,kBAAkB,EAGlB,YAAY,EACZ,SAAS,EAKV,MAAM,OAAO,CAAC;AAKf,OAAO,EAAQ,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAKxD,QAAA,MAAM,kBAAkB,cAAc,CAAC;AACvC,QAAA,MAAM,YAAY,WAAW,CAAC;AAG9B,KAAK,SAAS,GAAG,IAAI,CACnB,kBAAkB,CAAC,eAAe,CAAC,EACnC,YAAY,GAAG,gBAAgB,CAChC,GAAG;IACF,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;IAClC,WAAW,CAAC,EAAE,KAAK,GAAG,SAAS,CAAC;IAChC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,KAAK,aAAa,GAAG;IACnB,MAAM,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,IAAI,CAAC,EAAE,QAAQ,CAAC;KACjB,CAAC;CACH,GAAG,SAAS,CAAC;AACd,KAAK,YAAY,GAAG;IAAE,MAAM,EAAE;QAAE,IAAI,EAAE,KAAK,CAAA;KAAE,CAAA;CAAE,GAAG,SAAS,CAAC;AAyD5D,KAAK,YAAY,GAAG;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,YAAY,CAAC,YAAY,CAAC,CAAC;IACpC,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACtC,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,SAAS,6GAWZ,cAAc,4CAsGhB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,QAAQ,EAAE,YAAY,CAAC,cAAc,CAAC,GAAG,YAAY,CAAC,cAAc,CAAC,EAAE,CAAC;IACxE,KAAK,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,QAAQ,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B,CAAC;AAEF,QAAA,MAAM,WAAW,wDAKd,gBAAgB,4CAmClB,CAAC;AAgGF,QAAA,MAAM,IAAI,4HAYT,CAAC;AASF,QAAA,MAAM,eAAe;;YANX,MAAM;eACH,OAAO;eACP,OAAO;CAWnB,CAAC;AAEF,OAAO,EACL,IAAI,EACJ,WAAW,EACX,SAAS,EACT,eAAe,EACf,kBAAkB,EAClB,YAAY,GACb,CAAC"}

package/dist/components/icon/Icon.component.d.ts

@@ -128,13 +128,13 @@ export declare const iconTable: {
     Mail: string;
 };
 export declare const customIcons: {
-    'Remote-user': ({ ariaLabel, color, size }: {
-        ariaLabel: any;
+    'Remote-user': ({ "aria-label": ariaLabel, color, size }: {
+        "aria-label": any;
         color: any;
         size: any;
     }) => import("react/jsx-runtime").JSX.Element;
-    'Remote-group': ({ ariaLabel, color, size }: {
-        ariaLabel: any;
+    'Remote-group': ({ "aria-label": ariaLabel, color, size }: {
+        "aria-label": any;
         color: any;
         size: any;
     }) => import("react/jsx-runtime").JSX.Element;
@@ -148,7 +148,7 @@ type Props = {
     ariaLabel?: string;
     withWrapper?: boolean;
     style?: CSSProperties;
-    onClick?: (event: MouseEvent) => void;
+    onClick?: (event: React.MouseEvent) => void;
     title?: string;
 };
 export declare const IconWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {

package/dist/components/icon/Icon.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/icon/Icon.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAE7D,OAAO,EACL,aAAa,EAKd,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6HrB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;CAOvB,CAAC;AAaF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AACzE,MAAM,MAAM,SAAS,GAAG,MAAM,WAAW,CAAC;AAC1C,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiBF,eAAO,MAAM,WAAW;UAAsB,QAAQ;SAiCrD,CAAC;AAyEF,iBAAS,IAAI,CAAC,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CAU7C;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Icon.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/icon/Icon.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAE7D,OAAO,EACL,aAAa,EAKd,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAOhD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6HrB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;CAOvB,CAAC;AAaF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AACzE,MAAM,MAAM,SAAS,GAAG,MAAM,WAAW,CAAC;AAC1C,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiBF,eAAO,MAAM,WAAW;UAAsB,QAAQ;SAiCrD,CAAC;AA2DF,iBAAS,IAAI,CAAC,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CAU7C;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/icon/Icon.component.js

@@ -1,10 +1,11 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useEffect, useState, } from 'react';
-import { useQuery } from 'react-query';
 import styled, { css } from 'styled-components';
 import { Loader } from '../loader/Loader.component';
 import { RemoteGroup, RemoteUser } from './CustomsIcons';
+// Module-level cache for imported icons
+const iconCache = {};
 export const iconTable = {
     Account: 'fas faWallet',
     Backend: 'fas faNetworkWired',
@@ -132,8 +133,8 @@ export const iconTable = {
     Mail: 'fas faEnvelope',
 };
 export const customIcons = {
-    'Remote-user': ({ ariaLabel, color, size }) => (_jsx(RemoteUser, { ariaLabel: ariaLabel, color: color, size: size })),
-    'Remote-group': ({ ariaLabel, color, size }) => (_jsx(RemoteGroup, { ariaLabel: ariaLabel, color: color, size: size })),
+    'Remote-user': ({ 'aria-label': ariaLabel, color, size }) => (_jsx(RemoteUser, { ariaLabel: ariaLabel, color: color, size: size })),
+    'Remote-group': ({ 'aria-label': ariaLabel, color, size }) => (_jsx(RemoteGroup, { ariaLabel: ariaLabel, color: color, size: size })),
 };
 const IconStyled = styled(FontAwesomeIcon) `
   ${(props) => {
@@ -189,36 +190,37 @@ export const IconWrapper = styled.div `
   align-items: center;
   border-radius: 100%;
 `;
-function NonWrappedIcon({ name, size = '1x', color = undefined, ariaLabel = '', title, ...rest }) {
+function NonWrappedIcon({ name, size = '1x', color, ariaLabel = '', title, ...rest }) {
+    var _a;
     const iconInfo = iconTable[name] || customIcons[name];
     if (!iconInfo)
         throw new Error(`${name}: is not a valid icon.`);
-    const { data, status } = useQuery({
-        queryKey: ['icon', name],
-        queryFn: async () => {
-            if (customIcons[name]) {
-                return {
-                    default: customIcons[name],
-                };
-            }
-            const [iconType, iconClass] = iconInfo.split(' ');
-            try {
-                const fontAwesomeType = iconType === 'far'
-                    ? 'free-regular-svg-icons'
-                    : 'free-solid-svg-icons';
-                const icon = await import(`@fortawesome/${fontAwesomeType}/${iconClass}.js`);
-                return {
-                    default: ({ name, color, size, ariaLabel, ...rest }) => (_jsx(IconStyled, { color: color, icon: icon[iconClass], size: size, "aria-label": `${name} ${ariaLabel}`, ...rest })),
-                };
-            }
-            catch {
-                return {
-                    default: ({ name, ariaLabel }) => (_jsx(Loader, { size: "base", "aria-label": `${name} ${ariaLabel}` })),
-                };
-            }
-        },
-    });
-    return (_jsxs(_Fragment, { children: [(status === 'loading' || status === 'error') && (_jsx(DelayedFallback, { "aria-label": `${name} ${ariaLabel}`, children: _jsx(Loader, { size: "base" }) })), status === 'success' && (_jsx(data.default, { name: name, color: color, size: size, ariaLabel: ariaLabel, title: title, ...rest }))] }));
+    // Loaded fortawesome icon if not a custom icon
+    const [icon, setIcon] = useState();
+    useEffect(() => {
+        if (customIcons[name]) {
+            return;
+        }
+        const [iconType, iconClass] = iconInfo.split(' ');
+        const fontAwesomeType = iconType === 'far' ? 'free-regular-svg-icons' : 'free-solid-svg-icons';
+        const cacheKey = `${fontAwesomeType}/${iconClass}`;
+        if (iconCache[cacheKey]) {
+            setIcon(iconCache[cacheKey]);
+            return () => setIcon(undefined);
+        }
+        // Handle FontAwesome icons with dynamic import
+        import(`@fortawesome/${fontAwesomeType}/${iconClass}.js`)
+            .then((module) => {
+            setIcon(module[iconClass]);
+            iconCache[cacheKey] = module[iconClass];
+        });
+        return () => setIcon(undefined);
+    }, [name, iconInfo]);
+    if (!icon && !customIcons[name]) {
+        return (_jsx(DelayedFallback, { "aria-label": `${name} ${ariaLabel}`, children: _jsx(Loader, { size: "base" }) }));
+    }
+    const IconComponent = (_a = customIcons[name]) !== null && _a !== void 0 ? _a : IconStyled;
+    return (_jsx(IconComponent, { color: color, icon: icon, size: size, title: title, "aria-label": `${name} ${ariaLabel}`, ...rest }));
 }
 function Icon({ withWrapper, ...props }) {
     if (withWrapper) {

package/dist/components/infomessage/InfoMessage.component.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 type Props = {
     title: string | React.ReactNode;
     content: React.ReactNode;

package/dist/components/infomessage/InfoMessage.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InfoMessage.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/infomessage/InfoMessage.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAYF,eAAO,MAAM,WAAW,6BAA8B,KAAK,4CAuB1D,CAAC"}
+{"version":3,"file":"InfoMessage.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/infomessage/InfoMessage.component.tsx"],"names":[],"mappings":"AAMA,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAYF,eAAO,MAAM,WAAW,6BAA8B,KAAK,4CAuB1D,CAAC"}

package/dist/components/lateralnavbarlayout/LateralNavbarLayout.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LateralNavbarLayout.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/lateralnavbarlayout/LateralNavbarLayout.component.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAGrE,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,YAAY,CAAC;IACtB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB,CAAC;AAiBF,iBAAS,mBAAmB,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CASjE;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAC"}
+{"version":3,"file":"LateralNavbarLayout.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/lateralnavbarlayout/LateralNavbarLayout.component.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAGrE,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,YAAY,CAAC;IACtB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB,CAAC;AAiBF,iBAAS,mBAAmB,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CASjE;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/components/layout/Layout.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/layout/Layout.component.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAGrE,KAAK,KAAK,GAAG;IACX,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC5B,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB,CAAC;AAgBF,iBAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAc3E;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Layout.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/layout/Layout.component.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAGrE,KAAK,KAAK,GAAG;IACX,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC5B,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB,CAAC;AAgBF,iBAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAc3E;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/layout/v2/panels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panels.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/v2/panels.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAwDnD,KAAK,WAAW,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAgB/C,eAAO,MAAM,cAAc,2DAMxB;IACD,WAAW,EAAE,WAAW,CAAC;IACzB,SAAS,EAAE;QAAE,QAAQ,EAAE,YAAY,CAAC;QAAC,UAAU,CAAC,EAAE,WAAW,CAAA;KAAE,CAAC;IAChE,UAAU,EAAE;QAAE,QAAQ,EAAE,YAAY,CAAC;QAAC,UAAU,CAAC,EAAE,WAAW,CAAA;KAAE,CAAC;IACjE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,4CAmBA,CAAC"}
+{"version":3,"file":"panels.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/v2/panels.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAwDnD,KAAK,WAAW,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAgB/C,eAAO,MAAM,cAAc,2DAMxB;IACD,WAAW,EAAE,WAAW,CAAC;IACzB,SAAS,EAAE;QAAE,QAAQ,EAAE,YAAY,CAAC;QAAC,UAAU,CAAC,EAAE,WAAW,CAAA;KAAE,CAAC;IAChE,UAAU,EAAE;QAAE,QAAQ,EAAE,YAAY,CAAC;QAAC,UAAU,CAAC,EAAE,WAAW,CAAA;KAAE,CAAC;IACjE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,4CAmBA,CAAC"}

package/dist/components/linetimeseriechart/linetimeseriechart.component.d.ts

@@ -0,0 +1,33 @@
+export type Serie = {
+    resource: string;
+    data: [number, string | null][];
+    getTooltipLabel: (metricPrefix?: string, resource?: string) => string;
+    metricPrefix?: string;
+    isLineDashed?: boolean;
+};
+type NonSymmetricalChartSerie = {
+    yAxisType?: 'default' | 'percentage';
+    series: Serie[];
+};
+type SymmetricalChartSerie = {
+    yAxisType: 'symmetrical';
+    series: {
+        above: Serie[];
+        below: Serie[];
+    };
+};
+export type LineChartProps = (NonSymmetricalChartSerie | SymmetricalChartSerie) & {
+    title: string;
+    height: number;
+    startingTimeStamp: number;
+    unitRange?: {
+        threshold: number;
+        label: string;
+    }[];
+    isLoading?: boolean;
+    yAxisTitle?: string;
+    helpText?: string;
+};
+export declare function LineTimeSerieChart({ series, title, height, startingTimeStamp, unitRange, isLoading, yAxisType, yAxisTitle, helpText, ...rest }: LineChartProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=linetimeseriechart.component.d.ts.map

package/dist/components/linetimeseriechart/linetimeseriechart.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"linetimeseriechart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx"],"names":[],"mappings":"AA2FA,MAAM,MAAM,KAAK,GAAG;IAElB,QAAQ,EAAE,MAAM,CAAC;IAEjB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAEhC,eAAe,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtE,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,SAAS,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;IACrC,MAAM,EAAE,KAAK,EAAE,CAAC;CACjB,CAAC;AAGF,KAAK,qBAAqB,GAAG;IAC3B,SAAS,EAAE,aAAa,CAAC;IACzB,MAAM,EAAE;QACN,KAAK,EAAE,KAAK,EAAE,CAAC;QACf,KAAK,EAAE,KAAK,EAAE,CAAC;KAChB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,CACzB,wBAAwB,GACxB,qBAAqB,CACxB,GAAG;IACF,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE;QACV,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAiEF,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,KAAK,EACL,MAAM,EACN,iBAAiB,EACjB,SAAS,EACT,SAAiB,EACjB,SAAqB,EACrB,UAAU,EACV,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,cAAc,2CAqShB"}

package/dist/components/linetimeseriechart/linetimeseriechart.component.js

@@ -0,0 +1,249 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Line, LineChart, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, CartesianGrid, } from 'recharts';
+import { useMemo, useRef } from 'react';
+import { useTheme } from 'styled-components';
+import { useMetricsTimeSpan } from '../linetemporalchart/MetricTimespanProvider';
+import { addMissingDataPoint } from '../linetemporalchart/ChartUtil';
+import styled from 'styled-components';
+import { fontSize, fontWeight } from '../../style/theme';
+import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
+import { ChartTitleText, SmallerText } from '../text/Text.component';
+import { Loader } from '../loader/Loader.component';
+import { spacing } from '../../spacing';
+import { getUnitLabel } from '../linetemporalchart/ChartUtil';
+import { Icon } from '../icon/Icon.component';
+import { Tooltip as TooltipComponent } from '../tooltip/Tooltip.component';
+import { DAY_MONTH_ABBREVIATED_HOUR_MINUTE, FormattedDateTime, } from '../date/FormattedDateTime';
+const LineTemporalChartWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  flex: 1;
+`;
+const ChartHeader = styled.div `
+  display: flex;
+  align-items: center;
+`;
+const TooltipContainer = styled.div `
+  background-color: ${(props) => props.theme.backgroundLevel1};
+  padding: ${spacing.r8};
+  border: 1px solid ${(props) => props.theme.border};
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  max-width: 250px;
+`;
+const TooltipTime = styled.div `
+  margin-bottom: ${spacing.r8};
+  color: ${(props) => props.theme.textPrimary};
+  font-size: ${fontSize.smaller};
+  font-weight: ${fontWeight.bold};
+  text-align: center;
+`;
+const TooltipValue = styled.div `
+  font-size: ${fontSize.smaller};
+  margin-top: 4px;
+  color: ${(props) => props.theme.textSecondary};
+  display: flex;
+  align-items: flex-start;
+`;
+const TooltipLegend = styled.div `
+  width: 12px;
+  height: 3px;
+  background-color: ${(props) => props.color};
+  margin-right: 8px;
+  flex-shrink: 0;
+  margin-top: 8px;
+`;
+const TooltipContent = styled.div `
+  display: flex;
+  min-width: 0;
+  flex: 1;
+`;
+const TooltipName = styled.div `
+  margin-right: 4px;
+  word-wrap: break-word;
+  word-break: break-word;
+  justify-content: flex-start;
+`;
+const TooltipInstanceValue = styled.div `
+  justify-content: flex-end;
+`;
+const CustomTooltip = ({ active, payload, label, unitLabel, }) => {
+    if (!active || !payload || !payload.length || !label)
+        return null;
+    // We can't use the default itemSorter method because it's a custom tooltip.
+    // Sort the payload here instead
+    const sortedPayload = [...payload].sort((a, b) => {
+        const aValue = Number(a.value);
+        const bValue = Number(b.value);
+        if (aValue >= 0 && bValue >= 0) {
+            return bValue - aValue; // Higher positive values first
+        }
+        if (aValue < 0 && bValue < 0) {
+            return bValue - aValue; // Lower negative values first
+        }
+        return bValue - aValue; // Positives before negatives
+    });
+    return (_jsxs(TooltipContainer, { children: [_jsx(TooltipTime, { children: _jsx(FormattedDateTime, { format: "day-month-abbreviated-hour-minute-second", value: new Date(label) }) }), sortedPayload.map((entry, index) => (_jsxs(TooltipValue, { children: [_jsx(TooltipLegend, { color: entry.color }), _jsxs(TooltipContent, { children: [_jsx(TooltipName, { children: entry.name }), _jsx(TooltipInstanceValue, { children: isNaN(Number(entry.value))
+                                    ? '-'
+                                    : `${Number(entry.value).toFixed(2)}${unitLabel}` })] })] }, index)))] }));
+};
+const isSymmetricalSeries = (series) => {
+    return 'above' in series && 'below' in series;
+};
+export function LineTimeSerieChart({ series, title, height, startingTimeStamp, unitRange, isLoading = false, yAxisType = 'default', yAxisTitle, helpText, ...rest }) {
+    const theme = useTheme();
+    const { frequency, duration } = useMetricsTimeSpan();
+    const { getColor } = useChartLegend();
+    const chartRef = useRef(null);
+    const chartData = useMemo(() => {
+        // 1. Add missing data points
+        const normalizedSeries = yAxisType === 'symmetrical' && isSymmetricalSeries(series)
+            ? {
+                above: series.above.map((line) => ({
+                    ...line,
+                    data: addMissingDataPoint(line.data, startingTimeStamp, duration, frequency),
+                })),
+                // Convert positive values to negative values
+                below: series.below.map((line) => ({
+                    ...line,
+                    data: addMissingDataPoint(line.data, startingTimeStamp, duration, frequency).map(([timestamp, value]) => [timestamp, value === null ? null : `-${Number(value)}`]),
+                })),
+            }
+            : series.map((line) => ({
+                ...line,
+                data: addMissingDataPoint(line.data, startingTimeStamp, duration, frequency),
+            }));
+        // 2. Convert directly to Recharts format
+        // Initialize an object to hold data points by timestamp
+        const dataPointsByTime = {};
+        const seriesToProcess = yAxisType === 'symmetrical' && isSymmetricalSeries(normalizedSeries)
+            ? [...normalizedSeries.above, ...normalizedSeries.below]
+            : normalizedSeries;
+        seriesToProcess.forEach((serie) => {
+            const label = serie.getTooltipLabel(serie.metricPrefix, serie.resource);
+            serie.data.forEach((point) => {
+                const timestamp = typeof point[0] === 'number' ? point[0] * 1000 : Number(point[0]);
+                const value = point[1];
+                // Initialize this timestamp if it doesn't exist
+                if (!dataPointsByTime[timestamp]) {
+                    dataPointsByTime[timestamp] = { timestamp };
+                }
+                // Add this metric's value to the data point, and convert the value to a number if it's a string
+                dataPointsByTime[timestamp][label] =
+                    typeof value === 'string' ? Number(value) : value;
+            });
+        });
+        // Convert object to array for Recharts
+        return Object.values(dataPointsByTime).sort((a, b) => a.timestamp - b.timestamp);
+    }, [series, startingTimeStamp, duration, frequency, yAxisType]);
+    // Calculate 5 perfectly evenly spaced ticks
+    const xAxisTicks = useMemo(() => {
+        if (!chartData || chartData.length === 0)
+            return [];
+        const timestamps = chartData.map((d) => d.timestamp);
+        const minTimestamp = Math.min(...timestamps);
+        const maxTimestamp = Math.max(...timestamps);
+        // Calculate 5 perfectly evenly spaced ticks
+        const timeRange = maxTimestamp - minTimestamp;
+        const interval = timeRange / 4; // 4 intervals create 5 points
+        const exactEvenTicks = [
+            minTimestamp,
+            minTimestamp + interval,
+            minTimestamp + interval * 2,
+            minTimestamp + interval * 3,
+            maxTimestamp,
+        ];
+        // Return perfectly even ticks (guaranteed to be evenly divided)
+        return exactEvenTicks;
+    }, [chartData]);
+    // 3. Transform the data base on the valuebase
+    const { topValue, unitLabel, rechartsData } = useMemo(() => {
+        if (yAxisType === 'percentage')
+            return {
+                topValue: 100,
+                unitLabel: '%',
+                rechartsData: chartData,
+            };
+        const values = chartData.flatMap((dataPoint) => Object.entries(dataPoint)
+            .filter(([key]) => key !== 'timestamp')
+            .map(([_, value]) => {
+            const num = typeof value === 'string' ? Number(value) : (value !== null && value !== void 0 ? value : Infinity);
+            return !isNaN(num) && num !== null ? num : null;
+        })
+            .filter((value) => value !== null));
+        const top = Math.abs(Math.max(...values));
+        const bottom = Math.abs(Math.min(...values));
+        const maxValue = Math.max(top, bottom);
+        const { valueBase, unitLabel } = getUnitLabel(unitRange !== null && unitRange !== void 0 ? unitRange : [], maxValue);
+        const topValue = Math.ceil(maxValue / valueBase / 10) * 10;
+        const rechartsData = chartData.map((dataPoint) => {
+            const normalizedDataPoint = { ...dataPoint };
+            Object.entries(dataPoint).forEach(([key, value]) => {
+                if (key !== 'timestamp' && typeof value === 'number') {
+                    normalizedDataPoint[key] = value / valueBase;
+                }
+            });
+            return normalizedDataPoint;
+        });
+        return { topValue, unitLabel, rechartsData };
+    }, [chartData, yAxisType, unitRange]);
+    // Group series by resource and create color mapping
+    const { colorMapping, groupedSeries } = useMemo(() => {
+        const mapping = {};
+        const allSeries = isSymmetricalSeries(series)
+            ? [...series.above, ...series.below]
+            : series;
+        // Group series by resource
+        const groups = allSeries.reduce((acc, serie) => {
+            const key = serie.resource;
+            if (!acc[key]) {
+                acc[key] = [];
+            }
+            acc[key].push(serie);
+            return acc;
+        }, {});
+        // Get colors from the ChartLegend context
+        Object.keys(groups).forEach((resource) => {
+            const color = getColor(resource);
+            if (color) {
+                mapping[resource] = color;
+            }
+            else {
+                console.warn(`Color not defined for resource: ${resource}`);
+            }
+        });
+        return {
+            colorMapping: mapping,
+            groupedSeries: groups,
+        };
+    }, [series, getColor]);
+    // Format time for display the tick in the x axis
+    const formatTime = useMemo(() => (timestamp) => {
+        const date = new Date(timestamp);
+        return DAY_MONTH_ABBREVIATED_HOUR_MINUTE.format(date).replace(',', '');
+    }, []);
+    return (_jsxs(LineTemporalChartWrapper, { children: [_jsxs(ChartHeader, { children: [_jsxs(ChartTitleText, { children: [title, " ", unitLabel && `(${unitLabel})`] }), helpText && (_jsx(TooltipComponent, { placement: 'right', overlay: _jsx(SmallerText, { children: helpText }), children: _jsx(Icon, { name: "Info", color: theme.buttonSecondary }) })), isLoading && _jsx(Loader, {})] }), _jsx(ResponsiveContainer, { width: "100%", height: height, children: _jsxs(LineChart, { data: rechartsData, ref: chartRef, margin: { top: 0, right: 0, bottom: 0, left: 0 }, "aria-label": `Time series chart for ${title}`, children: [_jsx(CartesianGrid, { vertical: true, horizontal: true, verticalPoints: [0], horizontalPoints: [0], stroke: theme.border, fill: theme.backgroundLevel4, strokeWidth: 1 }), _jsx(XAxis, { dataKey: "timestamp", type: "number", domain: ['dataMin', 'dataMax'], ticks: xAxisTicks, tickFormatter: formatTime, tickCount: 5, tick: {
+                                fill: theme.textSecondary,
+                                fontSize: fontSize.smaller,
+                            }, axisLine: { stroke: theme.border } }), _jsx(YAxis, { orientation: "right", allowDataOverflow: false, label: {
+                                value: yAxisTitle,
+                                angle: 90,
+                                position: 'insideRight',
+                                style: {
+                                    textAnchor: 'middle',
+                                    fill: theme.textSecondary,
+                                    fontSize: fontSize.smaller,
+                                },
+                            }, domain: yAxisType === 'percentage'
+                                ? [0, 100]
+                                : yAxisType === 'symmetrical'
+                                    ? [-topValue, topValue]
+                                    : [0, topValue], axisLine: { stroke: theme.border }, tick: {
+                                fill: theme.textSecondary,
+                                fontSize: fontSize.smaller,
+                            }, tickFormatter: (value) => Math.round(value).toString() }), _jsx(Tooltip, { content: _jsx(CustomTooltip, { unitLabel: unitLabel }) }), yAxisType === 'symmetrical' && (_jsx(ReferenceLine, { y: 0, stroke: theme.border })), Object.entries(groupedSeries).map(([resource, resourceSeries]) => resourceSeries.map((serie, serieIndex) => {
+                            const label = serie.getTooltipLabel(serie.metricPrefix, serie.resource);
+                            return (_jsx(Line, { type: "monotone", dataKey: label, stroke: colorMapping[resource], dot: false }, `${title}-${resource}-${serieIndex}`));
+                        }))] }) })] }));
+}

package/dist/components/modal/Modal.component.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useRef } from 'react';
-import ReactDom from 'react-dom';
+import { createPortal } from 'react-dom';
 import styled from 'styled-components';
 import { Wrap, spacing } from '../../spacing';
 import { zIndex } from '../../style/theme';
@@ -73,7 +73,7 @@ const Modal = ({ isOpen, close, title, children, footer, subTitle, role = 'dialo
         }
     }, [isOpen]);
     return isOpen
-        ? ReactDom.createPortal(_jsx(ModalContainer, { className: "sc-modal", role: role, "aria-modal": "true", "aria-labelledby": "dialog_label", "aria-describedby": "dialog_desc", ...rest, children: _jsxs(ModalContent, { className: "sc-modal-content", children: [_jsx(ModalHeader, { className: "sc-modal-header", children: _jsxs(Wrap, { style: { flex: 1 }, children: [_jsx(Text, { variant: "Larger", id: "dialog_label", children: title }), close ? (_jsx(Button, { icon: _jsx(Icon, { name: "Close" }), onClick: close, tooltip: {
+        ? createPortal(_jsx(ModalContainer, { className: "sc-modal", role: role, "aria-modal": "true", "aria-labelledby": "dialog_label", "aria-describedby": "dialog_desc", ...rest, children: _jsxs(ModalContent, { className: "sc-modal-content", children: [_jsx(ModalHeader, { className: "sc-modal-header", children: _jsxs(Wrap, { style: { flex: 1 }, children: [_jsx(Text, { variant: "Larger", id: "dialog_label", children: title }), close ? (_jsx(Button, { icon: _jsx(Icon, { name: "Close" }), onClick: close, tooltip: {
                                         overlay: 'Close modal',
                                     } })) : (_jsx(_Fragment, { children: subTitle }))] }) }), _jsx(ModalBody, { className: "sc-modal-body", id: "dialog_desc", children: children }), footer && (_jsx(ModalFooter, { className: "sc-modal-footer", children: footer }))] }) }), modalContainer.current)
         : null;

package/dist/components/navbar/Navbar.component.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { Fragment } from 'react';
+import { cloneElement, Fragment } from 'react';
 import styled, { css } from 'styled-components';
 import { Logo } from '../../icons/branding';
 import { spacing } from '../../spacing';
@@ -156,7 +156,7 @@ function NavBar({ onToggleClick, logo, tabs = [], rightActions = [], ...rest })
                     if (render) {
                         return (_jsx(Fragment, { children: render }, `navbar_tab_item_${index}`));
                     }
-                    return link ? (React.cloneElement(link, {
+                    return link ? (cloneElement(link, {
                         className: selected ? 'selected' : '',
                         'aria-selected': selected,
                         role: 'tab',

package/dist/components/scrollbarwrapper/ScrollbarWrapper.component.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 type Props = {
     children: React.ReactNode;
 };

package/dist/components/scrollbarwrapper/ScrollbarWrapper.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollbarWrapper.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/scrollbarwrapper/ScrollbarWrapper.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAmDF,iBAAS,gBAAgB,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,2CAO5C;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"ScrollbarWrapper.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/scrollbarwrapper/ScrollbarWrapper.component.tsx"],"names":[],"mappings":"AAEA,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAmDF,iBAAS,gBAAgB,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,2CAO5C;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/searchinput/SearchInput.component.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ChangeEvent } from 'react';
 import { InputSize } from '../inputv2/inputv2';
 export type Props = {
@@ -11,6 +10,6 @@ export type Props = {
     size?: InputSize;
     autoComplete?: 'on' | 'off';
 };
-declare const SearchInput: React.ForwardRefExoticComponent<Props & React.RefAttributes<unknown>>;
+declare const SearchInput: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<unknown>>;
 export { SearchInput };
 //# sourceMappingURL=SearchInput.component.d.ts.map

package/dist/components/searchinput/SearchInput.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/searchinput/SearchInput.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAA2C,MAAM,OAAO,CAAC;AAG7E,OAAO,EAAS,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAGtD,MAAM,MAAM,KAAK,GAAG;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;CAC7B,CAAC;AAuCF,QAAA,MAAM,WAAW,uEAuFhB,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"SearchInput.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/searchinput/SearchInput.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA2C,MAAM,OAAO,CAAC;AAG7E,OAAO,EAAS,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAGtD,MAAM,MAAM,KAAK,GAAG;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;CAC7B,CAAC;AAuCF,QAAA,MAAM,WAAW,2FAuFhB,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/selectv2/Selectv2.component.d.ts

@@ -1,13 +1,13 @@
-import React, { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes, ReactNode } from 'react';
 import { GroupTypeBase, OptionTypeBase } from 'react-select';
 import ReactSelect from 'react-select/src/Select';
 export type OptionProps = {
     title?: string;
     disabled?: boolean;
-    icon?: React.ReactNode;
-    children?: React.ReactNode;
+    icon?: ReactNode;
+    children?: ReactNode;
     value: string;
-    disabledReason?: React.ReactNode;
+    disabledReason?: ReactNode;
 };
 export declare function Option({ value, children, disabled, icon, disabledReason, ...rest }: OptionProps): JSX.Element;
 export interface SelectRef<OptionType extends OptionTypeBase, IsMulti extends boolean, GroupType extends GroupTypeBase<OptionType>> {
@@ -23,7 +23,7 @@ export type SelectProps = {
     id: string;
     placeholder?: string;
     disabled?: boolean;
-    children?: React.ReactNode;
+    children?: ReactNode;
     value?: string;
     onFocus?: (event: FocusEvent) => void;
     onBlur?: (event: FocusEvent) => void;