@scality/core-ui 0.169.0 → 0.171.0

package/__mocks__/uuid.js

@@ -0,0 +1,11 @@
+// Mock uuid module for Jest tests
+let counter = 0;
+
+const v4 = () => {
+  counter += 1;
+  return `mock-uuid-${Math.random().toString(36)}-${counter}`;
+};
+
+module.exports = {
+  v4,
+};

package/dist/components/barchartv2/Barchart.component.js

@@ -14,13 +14,13 @@ import { Text } from '../text/Text.component';
 import { ChartTooltip } from './ChartTooltip';
 import { useChartData } from './utils';
 const CHART_CONSTANTS = {
-    TICK_WIDTH_OFFSET: 5,
+    TICK_WIDTH_OFFSET: 4,
     BAR_SIZE: 12,
     MIN_POINT_SIZE: 3,
     DEFAULT_HEIGHT: 200,
     CHART_MARGIN: {
         left: 0,
-        right: 0,
+        right: -10,
         top: 0,
         bottom: 0,
     },

package/dist/components/buttonv2/Buttonv2.component.js

@@ -99,6 +99,7 @@ export const ButtonStyled = styled.button `
         case 'outline':
             return css `
           border: ${spacing.r1} solid transparent;
+          border-color: ${brand.border}; // fallback for linear-gradient button themes
           border-color: ${brand.buttonSecondary};
           background-color: transparent;
           color: ${brand.textPrimary};
@@ -125,7 +126,6 @@ export const ButtonStyled = styled.button `
             position: absolute;
             inset: 0;
             padding: ${spacing.r1};
-            background-image: ${brand.buttonSecondary};
             border-radius: inherit;
             mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
             mask-composite: exclude;

package/dist/components/chartlegend/ChartLegend.d.ts

@@ -1,7 +1,9 @@
+import { TextVariant } from '../text/Text.component';
 type ChartLegendProps = {
     shape: 'line' | 'rectangle';
     disabled?: boolean;
     direction?: 'horizontal' | 'vertical';
+    legendSize?: TextVariant;
 };
 export declare const LegendItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     disabled?: boolean;
@@ -12,6 +14,6 @@ export declare const LegendShape: import("styled-components").StyledComponent<"d
     shape: "line" | "rectangle";
     chartColors: Record<string, string>;
 }, never>;
-export declare const ChartLegend: ({ shape, disabled, direction, }: ChartLegendProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ChartLegend: ({ shape, disabled, direction, legendSize, }: ChartLegendProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ChartLegend.d.ts.map

package/dist/components/chartlegend/ChartLegend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartLegend.d.ts","sourceRoot":"","sources":["../../../src/lib/components/chartlegend/ChartLegend.tsx"],"names":[],"mappings":"AAMA,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,MAAM,GAAG,WAAW,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACvC,CAAC;AAUF,eAAO,MAAM,UAAU;eACV,OAAO;eACP,OAAO;SAYnB,CAAC;AAEF,eAAO,MAAM,WAAW;YACd,MAAM;WACP,MAAM,GAAG,WAAW;iBACd,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;SAsBpC,CAAC;AAEF,eAAO,MAAM,WAAW,oCAIrB,gBAAgB,4CAyElB,CAAC"}
+{"version":3,"file":"ChartLegend.d.ts","sourceRoot":"","sources":["../../../src/lib/components/chartlegend/ChartLegend.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAQ,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAI3D,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,MAAM,GAAG,WAAW,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC,UAAU,CAAC,EAAE,WAAW,CAAC;CAC1B,CAAC;AAUF,eAAO,MAAM,UAAU;eACV,OAAO;eACP,OAAO;SAYnB,CAAC;AAEF,eAAO,MAAM,WAAW;YACd,MAAM;WACP,MAAM,GAAG,WAAW;iBACd,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;SAsBpC,CAAC;AAEF,eAAO,MAAM,WAAW,gDAKrB,gBAAgB,4CAyElB,CAAC"}

package/dist/components/chartlegend/ChartLegend.js

@@ -44,7 +44,7 @@ export const LegendShape = styled.div `
     }
 }}
 `;
-export const ChartLegend = ({ shape, disabled = false, direction = 'horizontal', }) => {
+export const ChartLegend = ({ shape, disabled = false, direction = 'horizontal', legendSize = 'Basic', }) => {
     const { listResources, getColor, isSelected, addSelectedResource, removeSelectedResource, selectAllResources, selectOnlyResource, isOnlyOneSelected, } = useChartLegend();
     const resources = listResources();
     const handleLegendClick = useCallback((resource, event) => {
@@ -83,6 +83,6 @@ export const ChartLegend = ({ shape, disabled = false, direction = 'horizontal',
     return (_jsx(Legend, { direction: direction, children: resources.map((resource) => {
             const color = getColor(resource);
             const selected = isSelected(resource);
-            return (_jsxs(LegendItem, { disabled: disabled, selected: selected, "aria-label": `${resource} ${selected ? 'selected' : 'not selected'}`, onClick: (event) => handleLegendClick(resource, event), children: [_jsx(LegendShape, { color: color, shape: shape, chartColors: chartColors }), _jsx(Text, { variant: "Basic", children: resource })] }, resource));
+            return (_jsxs(LegendItem, { disabled: disabled, selected: selected, "aria-label": `${resource} ${selected ? 'selected' : 'not selected'}`, onClick: (event) => handleLegendClick(resource, event), children: [_jsx(LegendShape, { color: color, shape: shape, chartColors: chartColors }), _jsx(Text, { variant: legendSize, children: resource })] }, resource));
         }) }));
 };

package/dist/components/chartlegend/ChartLegendWrapper.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { ChartColors } from '../../style/theme';
+export declare const useChartId: () => string;
 export type ChartLegendState = {
     selectedResources: string[];
     addSelectedResource: (resource: string) => void;
@@ -10,10 +11,11 @@ export type ChartLegendState = {
     getColor: (resource: string) => string | undefined;
     listResources: () => string[];
     isOnlyOneSelected: () => boolean;
+    register: (chartId: string, seriesNames: string[]) => void;
 };
 export type ChartLegendWrapperProps = {
     children: ReactNode;
-    colorSet: Record<string, ChartColors | string>;
+    colorSet: Record<string, ChartColors | string> | ((seriesNames: string[]) => Record<string, ChartColors | string>);
 };
 export declare const ChartLegendWrapper: ({ children, colorSet, }: ChartLegendWrapperProps) => import("react/jsx-runtime").JSX.Element;
 export declare const useChartLegend: () => ChartLegendState;

package/dist/components/chartlegend/ChartLegendWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartLegendWrapper.d.ts","sourceRoot":"","sources":["../../../src/lib/components/chartlegend/ChartLegendWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,SAAS,EAGV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAC5B,mBAAmB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,sBAAsB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,kBAAkB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC;IAC1C,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACnD,aAAa,EAAE,MAAM,MAAM,EAAE,CAAC;IAC9B,iBAAiB,EAAE,MAAM,OAAO,CAAC;CAClC,CAAC;AAIF,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAAC,CAAC;CAChD,CAAC;AAEF,eAAO,MAAM,kBAAkB,4BAG5B,uBAAuB,4CAiFzB,CAAC;AAGF,eAAO,MAAM,cAAc,wBAM1B,CAAC"}
+{"version":3,"file":"ChartLegendWrapper.d.ts","sourceRoot":"","sources":["../../../src/lib/components/chartlegend/ChartLegendWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,SAAS,EAKV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,eAAO,MAAM,UAAU,QAAO,MAQ7B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAC5B,mBAAmB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,sBAAsB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,kBAAkB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC;IAC1C,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACnD,aAAa,EAAE,MAAM,MAAM,EAAE,CAAC;IAC9B,iBAAiB,EAAE,MAAM,OAAO,CAAC;IACjC,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC5D,CAAC;AAIF,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EACJ,MAAM,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAAC,GACpC,CAAC,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,MAAM,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC;CACvE,CAAC;AAEF,eAAO,MAAM,kBAAkB,4BAG5B,uBAAuB,4CA0HzB,CAAC;AAEF,eAAO,MAAM,cAAc,wBAM1B,CAAC"}

package/dist/components/chartlegend/ChartLegendWrapper.js

@@ -1,9 +1,42 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useState, useMemo, useCallback, } from 'react';
+import { createContext, useContext, useState, useMemo, useCallback, useEffect, useRef, } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+export const useChartId = () => {
+    const idRef = useRef(null);
+    if (idRef.current === null) {
+        idRef.current = uuidv4();
+    }
+    return idRef.current;
+};
 const ChartLegendContext = createContext(null);
 export const ChartLegendWrapper = ({ children, colorSet, }) => {
-    const allResources = Object.keys(colorSet);
+    const [registeredColorSets, setRegisteredColorSets] = useState({});
+    const [internalColorSet, setInternalColorSet] = useState(() => {
+        return typeof colorSet === 'function' ? {} : colorSet;
+    });
+    useEffect(() => {
+        if (typeof colorSet === 'function') {
+            const allUniqueSeriesNames = Array.from(new Set(Object.values(registeredColorSets).flat()));
+            if (allUniqueSeriesNames.length > 0) {
+                const newColorSet = colorSet(allUniqueSeriesNames);
+                setInternalColorSet(newColorSet);
+            }
+        }
+        else {
+            setInternalColorSet(colorSet);
+        }
+    }, [registeredColorSets, colorSet]);
+    const allResources = useMemo(() => Object.keys(internalColorSet), [internalColorSet]);
     const [selectedResources, setSelectedResources] = useState(allResources);
+    useEffect(() => {
+        setSelectedResources(allResources);
+    }, [allResources]);
+    const register = useCallback((chartId, seriesNames) => {
+        setRegisteredColorSets((prev) => ({
+            ...prev,
+            [chartId]: seriesNames,
+        }));
+    }, []);
     const addSelectedResource = useCallback((resource) => {
         setSelectedResources((prev) => prev.includes(resource) ? prev : [...prev, resource]);
     }, []);
@@ -11,8 +44,8 @@ export const ChartLegendWrapper = ({ children, colorSet, }) => {
         setSelectedResources((prev) => prev.filter((r) => r !== resource));
     }, []);
     const selectAllResources = useCallback(() => {
-        setSelectedResources(allResources);
-    }, [allResources]);
+        setSelectedResources(Object.keys(internalColorSet));
+    }, [internalColorSet]);
     const selectOnlyResource = useCallback((resource) => {
         setSelectedResources([resource]);
     }, []);
@@ -23,16 +56,16 @@ export const ChartLegendWrapper = ({ children, colorSet, }) => {
         return selectedResources.includes(resource);
     }, [selectedResources]);
     const getColor = useCallback((resource) => {
-        const color = colorSet[resource];
+        const color = internalColorSet[resource];
         if (!color) {
             console.warn(`ChartLegendWrapper: No color defined for resource "${resource}"`);
             return undefined;
         }
         return color;
-    }, [colorSet]);
+    }, [internalColorSet]);
     const listResources = useCallback(() => {
-        return Object.keys(colorSet);
-    }, [colorSet]);
+        return Object.keys(internalColorSet);
+    }, [internalColorSet]);
     const chartLegendState = useMemo(() => ({
         selectedResources,
         addSelectedResource,
@@ -43,6 +76,7 @@ export const ChartLegendWrapper = ({ children, colorSet, }) => {
         getColor,
         listResources,
         isOnlyOneSelected,
+        register,
     }), [
         selectedResources,
         addSelectedResource,
@@ -53,10 +87,10 @@ export const ChartLegendWrapper = ({ children, colorSet, }) => {
         getColor,
         listResources,
         isOnlyOneSelected,
+        register,
     ]);
     return (_jsx(ChartLegendContext.Provider, { value: chartLegendState, children: children }));
 };
-// Hook for accessing legend state in custom components
 export const useChartLegend = () => {
     const context = useContext(ChartLegendContext);
     if (!context) {

package/dist/components/date/FormattedDateTime.d.ts

@@ -1,17 +1,41 @@
+/**
+ * @description Long date formatter, with weekday, year, month and day. Used for describing long term date.
+ * @example Wednesday 6 October 2025
+ */
 export declare const LONG_DATE_FORMATER: Intl.DateTimeFormat;
 /**
  * @description Long date formatter, without weekday.
  * @example 01 September 2025
  */
 export declare const LONG_DATE_FORMATER_WITHOUT_WEEKDAY: Intl.DateTimeFormat;
+/**
+ * @description Date formatter, with year, month and day. Used for describing long term date.
+ * @example 2025-01-01
+ */
 export declare const DATE_FORMATER: Intl.DateTimeFormat;
+/**
+ * @description Day month formatter, with weekday, day and month. Used for describing long term date.
+ * @example Wed 6 Oct
+ */
 export declare const DAY_MONTH_FORMATER: Intl.DateTimeFormat;
+/**
+ * @description Time formatter, with hour, minute and second. Used for describing long term date.
+ * @example 18:33:00
+ */
 export declare const TIME_SECOND_FORMATER: Intl.DateTimeFormat;
+/**
+ * @description Time formatter, with hour and minute. Used for describing long term date.
+ * @example 18:33
+ */
 export declare const TIME_FORMATER: Intl.DateTimeFormat;
+/**
+ * @description Day month abbreviated hour minute second formatter. Used for describing long term date.
+ * @example 6 Oct 18:33:00
+ */
 export declare const DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND: Intl.DateTimeFormat;
 /**
- * @description Day month abbreviated hour minute formatter, without second.
- * @example 15 Sept 14:30
+ * @description Day month abbreviated hour minute formatter. Used for describing long term date.
+ * @example 6 Oct 18:33
  */
 export declare const DAY_MONTH_ABBREVIATED_HOUR_MINUTE: Intl.DateTimeFormat;
 /**
@@ -28,6 +52,21 @@ type FormattedDateTimeProps = {
     format: 'date' | 'date-time' | 'date-time-second' | 'time' | 'time-second' | 'relative' | 'day-month-abbreviated-hour-minute' | 'day-month-abbreviated-hour-minute-second' | 'long-date' | 'long-date-without-weekday' | 'chart-date' | 'year-month-day' | 'month-day';
     value: Date;
 };
+/**
+ * @description Formats the date and time according to the format specified.
+ * @example
+ * date: '2025-01-01'
+ * 'date-time': '2025-01-01 00:00'
+ * 'date-time-second': '2025-01-01 00:00:00'
+ * time: '00:00'
+ * 'time-second': '00:00:00'
+ * relative: '1 month ago'
+ * 'day-month-abbreviated-hour-minute': '6 Oct 18:33'
+ * 'day-month-abbreviated-hour-minute-second': '6 Oct 18:33:00'
+ * 'long-date': 'Wednesday 6 October 2025'
+ * 'chart-date': '6 Oct'
+ * 'year-month-day': '2025-10-06'
+ */
 export declare const FormattedDateTime: ({ format, value, }: FormattedDateTimeProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=FormattedDateTime.d.ts.map

package/dist/components/date/FormattedDateTime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormattedDateTime.d.ts","sourceRoot":"","sources":["../../../src/lib/components/date/FormattedDateTime.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB,qBAK7B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,kCAAkC,qBAI7C,CAAC;AAEH,eAAO,MAAM,aAAa,qBAKxB,CAAC;AAEH,eAAO,MAAM,kBAAkB,qBAI7B,CAAC;AAEH,eAAO,MAAM,oBAAoB,qBAK/B,CAAC;AAEH,eAAO,MAAM,aAAa,qBAIxB,CAAC;AAEH,eAAO,MAAM,wCAAwC,qBAUpD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iCAAiC,qBAM5C,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,wBAAwB,qBAInC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,mBAAmB,qBAG9B,CAAC;AAEH,KAAK,sBAAsB,GAAG;IAC5B,MAAM,EACF,MAAM,GACN,WAAW,GACX,kBAAkB,GAClB,MAAM,GACN,aAAa,GACb,UAAU,GACV,mCAAmC,GACnC,0CAA0C,GAC1C,WAAW,GACX,2BAA2B,GAC3B,YAAY,GACZ,gBAAgB,GAChB,WAAW,CAAC;IAEhB,KAAK,EAAE,IAAI,CAAC;CACb,CAAC;AAaF,eAAO,MAAM,iBAAiB,uBAG3B,sBAAsB,4CA2HxB,CAAC"}
+{"version":3,"file":"FormattedDateTime.d.ts","sourceRoot":"","sources":["../../../src/lib/components/date/FormattedDateTime.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,kBAAkB,qBAK7B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,kCAAkC,qBAI7C,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,aAAa,qBAKxB,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,kBAAkB,qBAI7B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,oBAAoB,qBAK/B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,aAAa,qBAIxB,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,wCAAwC,qBAUpD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iCAAiC,qBAM5C,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,wBAAwB,qBAInC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,mBAAmB,qBAG9B,CAAC;AAEH,KAAK,sBAAsB,GAAG;IAC5B,MAAM,EACF,MAAM,GACN,WAAW,GACX,kBAAkB,GAClB,MAAM,GACN,aAAa,GACb,UAAU,GACV,mCAAmC,GACnC,0CAA0C,GAC1C,WAAW,GACX,2BAA2B,GAC3B,YAAY,GACZ,gBAAgB,GAChB,WAAW,CAAC;IAEhB,KAAK,EAAE,IAAI,CAAC;CACb,CAAC;AAaF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,iBAAiB,uBAG3B,sBAAsB,4CAsIxB,CAAC"}

package/dist/components/date/FormattedDateTime.js

@@ -1,11 +1,15 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { getDateDaysDiff } from './dateDiffer';
 import { Tooltip } from '../tooltip/Tooltip.component';
+/**
+ * @description Long date formatter, with weekday, year, month and day. Used for describing long term date.
+ * @example Wednesday 6 October 2025
+ */
 export const LONG_DATE_FORMATER = Intl.DateTimeFormat('en-GB', {
     weekday: 'long',
     year: 'numeric',
     month: 'long',
-    day: 'numeric',
+    day: '2-digit',
 });
 /**
  * @description Long date formatter, without weekday.
@@ -16,30 +20,50 @@ export const LONG_DATE_FORMATER_WITHOUT_WEEKDAY = Intl.DateTimeFormat('en-GB', {
     month: 'long',
     day: '2-digit',
 });
+/**
+ * @description Date formatter, with year, month and day. Used for describing long term date.
+ * @example 2025-01-01
+ */
 export const DATE_FORMATER = Intl.DateTimeFormat('fr-CA', {
     year: 'numeric',
     month: '2-digit',
     day: '2-digit',
     hour12: false,
 });
+/**
+ * @description Day month formatter, with weekday, day and month. Used for describing long term date.
+ * @example Wed 6 Oct
+ */
 export const DAY_MONTH_FORMATER = Intl.DateTimeFormat('en-GB', {
     weekday: 'short',
     day: '2-digit',
     month: 'short',
 });
+/**
+ * @description Time formatter, with hour, minute and second. Used for describing long term date.
+ * @example 18:33:00
+ */
 export const TIME_SECOND_FORMATER = Intl.DateTimeFormat('en-GB', {
     hour12: false,
     hour: '2-digit',
     minute: '2-digit',
     second: '2-digit',
 });
+/**
+ * @description Time formatter, with hour and minute. Used for describing long term date.
+ * @example 18:33
+ */
 export const TIME_FORMATER = Intl.DateTimeFormat('en-GB', {
     hour12: false,
     hour: '2-digit',
     minute: '2-digit',
 });
+/**
+ * @description Day month abbreviated hour minute second formatter. Used for describing long term date.
+ * @example 6 Oct 18:33:00
+ */
 export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND = Intl.DateTimeFormat('en-GB', {
-    day: 'numeric',
+    day: '2-digit',
     month: 'short',
     hour: '2-digit',
     minute: '2-digit',
@@ -47,11 +71,11 @@ export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND = Intl.DateTimeFormat('en-
     hour12: false,
 });
 /**
- * @description Day month abbreviated hour minute formatter, without second.
- * @example 15 Sept 14:30
+ * @description Day month abbreviated hour minute formatter. Used for describing long term date.
+ * @example 6 Oct 18:33
  */
 export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE = Intl.DateTimeFormat('en-GB', {
-    day: 'numeric',
+    day: '2-digit',
     month: 'short',
     hour: '2-digit',
     minute: '2-digit',
@@ -82,6 +106,21 @@ const isItFutureOrIsItPast = (timeDiff, stringToBeFormatted) => {
         return `in ${stringToBeFormatted}`;
     }
 };
+/**
+ * @description Formats the date and time according to the format specified.
+ * @example
+ * date: '2025-01-01'
+ * 'date-time': '2025-01-01 00:00'
+ * 'date-time-second': '2025-01-01 00:00:00'
+ * time: '00:00'
+ * 'time-second': '00:00:00'
+ * relative: '1 month ago'
+ * 'day-month-abbreviated-hour-minute': '6 Oct 18:33'
+ * 'day-month-abbreviated-hour-minute-second': '6 Oct 18:33:00'
+ * 'long-date': 'Wednesday 6 October 2025'
+ * 'chart-date': '6 Oct'
+ * 'year-month-day': '2025-10-06'
+ */
 export const FormattedDateTime = ({ format, value, }) => {
     switch (format) {
         case 'date':
@@ -116,15 +155,23 @@ export const FormattedDateTime = ({ format, value, }) => {
             }
             return (_jsx(Tooltip, { overlay: _jsx(FormattedDateTime, { format: "date-time-second", value: value }), children: "few seconds ago" }));
         case 'day-month-abbreviated-hour-minute':
-            return (_jsx(_Fragment, { children: DAY_MONTH_ABBREVIATED_HOUR_MINUTE.format(value).replace(',', '') }));
+            return (_jsx(_Fragment, { children: DAY_MONTH_ABBREVIATED_HOUR_MINUTE.format(value)
+                    .replace(',', '')
+                    .replace(/Sept/g, 'Sep') }));
         case 'day-month-abbreviated-hour-minute-second':
-            return (_jsx(_Fragment, { children: DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND.format(value).replace(',', '') }));
+            return (_jsx(_Fragment, { children: DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND.format(value)
+                    .replace(',', '')
+                    // replace Sept with Sep to keep 3 letter month
+                    .replace(/Sept/g, 'Sep') }));
         case 'long-date':
             return _jsx(_Fragment, { children: LONG_DATE_FORMATER.format(value) });
         case 'long-date-without-weekday':
             return _jsx(_Fragment, { children: LONG_DATE_FORMATER_WITHOUT_WEEKDAY.format(value) });
         case 'chart-date':
-            return _jsx(_Fragment, { children: DAY_MONTH_FORMATER.format(value).replace(/[ ,]/g, '') });
+            return (_jsx(_Fragment, { children: DAY_MONTH_FORMATER.format(value)
+                    .replace(/[ ,]/g, '')
+                    // replace Sept with Sep to keep 3 letter month
+                    .replace(/Sept/g, 'Sep') }));
         case 'year-month-day':
             return _jsx(_Fragment, { children: YEAR_MONTH_DAY_FORMATTER.format(value) });
         case 'month-day':

package/dist/components/date/FormattedDateTime.spec.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
 import { FormattedDateTime } from './FormattedDateTime';
 import userEvent from '@testing-library/user-event';
@@ -141,12 +141,21 @@ describe('FormatttedDateTime', () => {
         //S
         render(_jsx(FormattedDateTime, { format: "day-month-abbreviated-hour-minute", value: new Date('2022-10-06T18:33:00Z') }));
         //V
-        expect(screen.getByText('6 Oct 18:33')).toBeInTheDocument();
+        expect(screen.getByText('06 Oct 18:33')).toBeInTheDocument();
     });
     it('should display the date in the expected format of date in the chart', () => {
         //S
         render(_jsx(FormattedDateTime, { format: "day-month-abbreviated-hour-minute-second", value: new Date('2022-10-06T18:33:00Z') }));
         //V
-        expect(screen.getByText('6 Oct 18:33:00')).toBeInTheDocument();
+        expect(screen.getByText('06 Oct 18:33:00')).toBeInTheDocument();
+    });
+    it('should display 3 letter month for September date', () => {
+        //S
+        render(_jsxs(_Fragment, { children: [_jsx(FormattedDateTime, { format: "day-month-abbreviated-hour-minute", value: new Date('2022-09-06T18:33:00Z') }), _jsx(FormattedDateTime, { format: "day-month-abbreviated-hour-minute-second", value: new Date('2022-09-06T18:33:00Z') }), _jsx(FormattedDateTime, { format: "chart-date", value: new Date('2022-09-06T18:33:00Z') })] }));
+        //V
+        expect(screen.getByText(/06 Sep 18:33/)).toBeInTheDocument();
+        expect(screen.getByText(/06 Sep 18:33:00/)).toBeInTheDocument();
+        expect(screen.getByText(/Tue06Sep/)).toBeInTheDocument();
+        expect(screen.queryByText(/Sept/)).not.toBeInTheDocument();
     });
 });

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

@@ -126,6 +126,8 @@ export declare const iconTable: {
     Stop: string;
     Play: string;
     Mail: string;
+    ThumbsUp: string;
+    ThumbsDown: string;
 };
 type IconProps = {
     'aria-label'?: string;

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;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAOhD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6HrB,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAOtG,CAAC;AAgBF,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"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+HrB,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAOtG,CAAC;AAgBF,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

@@ -131,6 +131,8 @@ export const iconTable = {
     Stop: 'fas faStop',
     Play: 'fas faPlay',
     Mail: 'fas faEnvelope',
+    ThumbsUp: 'fas faThumbsUp',
+    ThumbsDown: 'fas faThumbsDown',
 };
 export const customIcons = {
     'Remote-user': ({ 'aria-label': ariaLabel, color, size }) => (_jsx(RemoteUser, { ariaLabel: ariaLabel, color: color, size: size })),

package/dist/components/layout/v2/index.d.ts

@@ -1,6 +1,7 @@
 import { ReactElement } from 'react';
-export declare function Layout({ children: app, headerNavigation, }: {
+export declare function Layout({ children: app, headerNavigation, variant, }: {
     children: ReactElement | ReactElement[];
     headerNavigation: ReactElement;
+    variant?: 'transparent';
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/v2/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAgBrC,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EAAE,GAAG,EACb,gBAAgB,GACjB,EAAE;IACD,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC,gBAAgB,EAAE,YAAY,CAAC;CAChC,2CAOA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/v2/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAgBrC,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EAAE,GAAG,EACb,gBAAgB,EAChB,OAAO,GACR,EAAE;IACD,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC,gBAAgB,EAAE,YAAY,CAAC;IAC/B,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB,2CAOA"}

package/dist/components/layout/v2/index.js

@@ -6,11 +6,11 @@ const LayoutContainer = styled.div `
   flex-direction: column;
   height: 100vh;
   box-sizing: border-box;
-  background: ${(props) => props.theme['backgroundLevel1']};
+  background: ${props => props.variant === 'transparent' ? 'transparent' : props.theme.backgroundLevel1};
 `;
 const Navigation = styled.div `
   height: ${navbarHeight};
 `;
-export function Layout({ children: app, headerNavigation, }) {
-    return (_jsxs(LayoutContainer, { className: "layout-container", children: [_jsx(Navigation, { children: headerNavigation }), app] }));
+export function Layout({ children: app, headerNavigation, variant, }) {
+    return (_jsxs(LayoutContainer, { className: "layout-container", variant: variant, children: [_jsx(Navigation, { children: headerNavigation }), app] }));
 }

package/dist/components/linetemporalchart/ChartUtil.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartUtil.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetemporalchart/ChartUtil.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,+BAA+B,CAAC;AAEvC,MAAM,MAAM,QAAQ,GAAG;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IAEd,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC;IAEtB,eAAe,EAAE,OAAO,CAAC;IAEzB,QAAQ,EAAE,OAAO,CAAC;CACnB,EAAE,CAAC;AAKJ,wBAAgB,qBAAqB,CAAC,SAAS,EAAE,MAAM,UAEtD;AACD,wBAAgB,gBAAgB,CAC9B,2BAA2B,EAAE,KAAK,EAAE,GACnC,QAAQ,CAqBV;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,GAAG,QAAQ,CAU3E;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAC1B,SAAS,EAAE;IACT,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,EAAE,EACH,QAAQ,EAAE,MAAM,GACf;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB,CAwCA;AAED;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CACjC,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,EACjD,iBAAiB,CAAC,EAAE,MAAM,EAC1B,cAAc,CAAC,EAAE,MAAM,EACvB,cAAc,CAAC,EAAE,MAAM,GACtB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CA2CpC;AAGD,eAAO,MAAM,gBAAgB,UAAW,MAAM,QAAQ,MAAM,WAE3D,CAAC;AACF,eAAO,MAAM,4BAA4B,GAAI,CAAC,SAAS,CAAC,QAAQ,MAAM,KAAG,CAQxE,CAAC;AACF,eAAO,MAAM,gBAAgB,kBAAmB,MAAM,QAAQ,MAAM,WAEnE,CAAC;AAEF,eAAO,MAAM,eAAe,WAAY,KAAK,EAAE,KAAG,MAAM,EAMvD,CAAC"}
+{"version":3,"file":"ChartUtil.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetemporalchart/ChartUtil.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,+BAA+B,CAAC;AAEvC,MAAM,MAAM,QAAQ,GAAG;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IAEd,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC;IAEtB,eAAe,EAAE,OAAO,CAAC;IAEzB,QAAQ,EAAE,OAAO,CAAC;CACnB,EAAE,CAAC;AAKJ,wBAAgB,qBAAqB,CAAC,SAAS,EAAE,MAAM,UAEtD;AACD,wBAAgB,gBAAgB,CAC9B,2BAA2B,EAAE,KAAK,EAAE,GACnC,QAAQ,CAqBV;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,GAAG,QAAQ,CAU3E;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAC1B,SAAS,EAAE;IACT,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,EAAE,EACH,QAAQ,EAAE,MAAM,GACf;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB,CAwCA;AAED;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CACjC,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,EACjD,iBAAiB,CAAC,EAAE,MAAM,EAC1B,cAAc,CAAC,EAAE,MAAM,EACvB,cAAc,CAAC,EAAE,MAAM,GACtB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAoEpC;AAID,eAAO,MAAM,gBAAgB,UAAW,MAAM,QAAQ,MAAM,WAE3D,CAAC;AACF,eAAO,MAAM,4BAA4B,GAAI,CAAC,SAAS,CAAC,QAAQ,MAAM,KAAG,CAQxE,CAAC;AACF,eAAO,MAAM,gBAAgB,kBAAmB,MAAM,QAAQ,MAAM,WAEnE,CAAC;AAEF,eAAO,MAAM,eAAe,WAAY,KAAK,EAAE,KAAG,MAAM,EAMvD,CAAC"}

package/dist/components/linetemporalchart/ChartUtil.js

@@ -94,8 +94,16 @@ export function addMissingDataPoint(orginalValues, startingTimeStamp, sampleDura
         return [];
     }
     const newValues = [];
+    // add missing data points for the starting time
+    for (let i = startingTimeStamp; i < orginalValues[0][0]; i += sampleInterval) {
+        newValues.push([i, NAN_STRING]);
+    }
     // Process all but the last element
     for (let i = 0; i < orginalValues.length - 1; i++) {
+        if (orginalValues[i][0] < startingTimeStamp ||
+            orginalValues[i][0] > startingTimeStamp + sampleDuration) {
+            continue;
+        }
         // Always add the current data point
         newValues.push(orginalValues[i]);
         const currentTimestamp = orginalValues[i][0];
@@ -111,6 +119,10 @@ export function addMissingDataPoint(orginalValues, startingTimeStamp, sampleDura
     }
     // Add the last element
     newValues.push(orginalValues[orginalValues.length - 1]);
+    // add missing data points for the ending time
+    for (let i = orginalValues[orginalValues.length - 1][0] + sampleInterval; i < startingTimeStamp + sampleDuration; i += sampleInterval) {
+        newValues.push([i, NAN_STRING]);
+    }
     return newValues;
 }
 // get the value for the based value

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

@@ -1,3 +1,6 @@
+import { TooltipContentProps } from 'recharts';
+export declare const TooltipContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const TooltipTime: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export type Serie = {
     resource: string;
     data: [number, number | string | null][];
@@ -7,14 +10,14 @@ export type Serie = {
 };
 type NonSymmetricalChartSerie = {
     yAxisType?: 'default' | 'percentage';
-    series: Serie[];
+    series: Serie[] | undefined;
 };
 type SymmetricalChartSerie = {
     yAxisType: 'symmetrical';
     series: {
-        above: Serie[];
-        below: Serie[];
-    };
+        above: Serie[] | undefined;
+        below: Serie[] | undefined;
+    } | undefined;
 };
 export type LineChartProps = (NonSymmetricalChartSerie | SymmetricalChartSerie) & {
     title: string;
@@ -26,6 +29,7 @@ export type LineChartProps = (NonSymmetricalChartSerie | SymmetricalChartSerie)
         threshold: number;
         label: string;
     }[];
+    syncId?: string;
     isLoading?: boolean;
     /**
      * The format of the x axis, default is 'date-time' which is like 01 Sep 16:00
@@ -35,7 +39,8 @@ export type LineChartProps = (NonSymmetricalChartSerie | SymmetricalChartSerie)
     timeFormat?: 'date-time' | 'date';
     yAxisTitle?: string;
     helpText?: string;
+    renderTooltip?: (tooltipProps: TooltipContentProps<number, string>, unitLabel?: string, timeFormat?: 'date-time' | 'date') => React.ReactNode;
 };
-export declare function LineTimeSerieChart({ series, title, height, startingTimeStamp, interval, duration, unitRange, isLoading, timeFormat, yAxisType, yAxisTitle, helpText, ...rest }: LineChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function LineTimeSerieChart({ series, title, height, startingTimeStamp, interval, duration, unitRange, isLoading, timeFormat, yAxisType, yAxisTitle, helpText, syncId, renderTooltip, ...rest }: LineChartProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=linetimeseriechart.component.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"linetimeseriechart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx"],"names":[],"mappings":"AAoGA,MAAM,MAAM,KAAK,GAAG;IAElB,QAAQ,EAAE,MAAM,CAAC;IAEjB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAEzC,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,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE;QACV,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAkEF,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,KAAK,EACL,MAAM,EACN,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAiB,EACjB,UAAwB,EACxB,SAAqB,EACrB,UAAU,EACV,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,cAAc,2CA6ShB"}
+{"version":3,"file":"linetimeseriechart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,mBAAmB,EAGpB,MAAM,UAAU,CAAC;AA8BlB,eAAO,MAAM,gBAAgB,yGAO5B,CAAC;AAEF,eAAO,MAAM,WAAW,yGAMvB,CAAC;AAwCF,MAAM,MAAM,KAAK,GAAG;IAElB,QAAQ,EAAE,MAAM,CAAC;IAEjB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAEzC,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,GAAG,SAAS,CAAC;CAC7B,CAAC;AAGF,KAAK,qBAAqB,GAAG;IAC3B,SAAS,EAAE,aAAa,CAAC;IACzB,MAAM,EACF;QACE,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC;QAC3B,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC;KAC5B,GACD,SAAS,CAAC;CACf,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,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE;QACV,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,CACd,YAAY,EAAE,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,EACjD,SAAS,CAAC,EAAE,MAAM,EAClB,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,KAC9B,KAAK,CAAC,SAAS,CAAC;CACtB,CAAC;AA6EF,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,KAAK,EACL,MAAM,EACN,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAiB,EACjB,UAAwB,EACxB,SAAqB,EACrB,UAAU,EACV,QAAQ,EACR,MAAM,EACN,aAAa,EACb,GAAG,IAAI,EACR,EAAE,cAAc,2CAmWhB"}