@scality/core-ui 0.165.0 → 0.167.0

package/.storybook/preview.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { CoreUiThemeProvider } from '../src/lib/next';
-import { brand, coreUIAvailableThemes } from '../src/lib/style/theme';
+import { coreUIAvailableThemes } from '../src/lib/style/theme';
 import { Wrapper } from '../stories/common';
 import { ToastProvider } from '../src/lib';
 
@@ -72,9 +72,11 @@ export const parameters = {
   controls: {
     //All props with color in name will automatically have a control 'color'
     //with colors presets to theme colors, possible to have the color name from theme in control
-    presetColors: Object.entries(brand).map((color) => {
-      return { color: color[1], title: color[0] };
-    }),
+    presetColors: Object.entries(coreUIAvailableThemes.darkRebrand).map(
+      (color) => {
+        return { color: color[1], title: color[0] };
+      },
+    ),
     matchers: {
       color: /color/i,
     },

package/README.md

@@ -11,38 +11,21 @@ Core-UI is a component library containing all components, layouts, icons and the
 - Add `@scality/core-ui` in the `package.json`'s dependencies of your project.
 
 ```json
-    "@scality/core-ui": "0.115.0",
+    "@scality/core-ui": "^0.165.0",
 ```
 
 - `@scality/core-ui` requires the peerDependencies below. Make sure that you have them in the `package.json`'s dependencies.
 
 ```json
-    "@fortawesome/fontawesome-free": "^5.10.2",
-    "@fortawesome/fontawesome-svg-core": "^1.2.35",
-    "@fortawesome/free-regular-svg-icons": "^5.15.3",
-    "@fortawesome/free-solid-svg-icons": "^5.15.3",
-    "@fortawesome/react-fontawesome": "^0.1.14",
-    "@js-temporal/polyfill": "^0.4.4",
-    "polished": "3.4.1",
-    "pretty-bytes": "^5.6.0",
-    "react": "^17.0.2",
-    "react-debounce-input": "3.2.2",
-    "react-dom": "^17.0.2",
-    "react-dropzone": "^14.2.3",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    // to provides a Provider to the components using react-query
     "react-query": "^3.34.0",
-    "react-router": "^5.2.0",
-    "react-router-dom": "^5.2.0",
-    "react-select": "4.3.1",
-    "react-table": "^7.7.0",
-    "react-virtualized": "9.22.3",
-    "react-virtualized-auto-sizer": "^1.0.5",
-    "react-window": "^1.8.6",
-    "styled-components": "^4.1.2",
-    "styled-system": "^5.1.5",
-    "vega": "^5.17.3",
-    "vega-embed": "^6.0.0",
-    "vega-lite": "^5.0.0",
-    "vega-tooltip": "^0.27.0"
+    // for the components using react router
+    "react-router": "^7.0.1",
+    "react-router-dom": "^7.0.1",
+    // for legacy chart components
+    "canvas": "^2.10.1",
 ```
 
 - Install the dependencies :
@@ -90,51 +73,23 @@ import { coreUIAvailableThemes as themes } from '@scality/core-ui/dist/style/the
 
 There is 2 default theme available in Core-UI : you can find them [here](https://github.com/scality/core-ui/pull/684#:~:text=https%3A//github.com/scality/core%2Dui/blob/development/1.0/src/lib/style/theme.ts)
 
-<br/>
-
-You can also modify or create a new theme. In this case make sure to respect this type :
+You can also modify or create a new theme but make sure to extend this type:
 
 ```tsx
-export type CoreUITheme = {
-  statusHealthy: string;
-  statusHealthyRGB: string;
-  statusWarning: string;
-  statusWarningRGB: string;
-  statusCritical: string;
-  statusCriticalRGB: string;
-  selectedActive: string;
-  highlight: string;
-  border: string;
-  buttonPrimary: string;
-  buttonSecondary: string;
-  buttonDelete: string;
-  infoPrimary: string;
-  infoSecondary: string;
-  backgroundLevel1: string;
-  backgroundLevel2: string;
-  backgroundLevel3: string;
-  backgroundLevel4: string;
-  textPrimary: string;
-  textSecondary: string;
-  textTertiary: string;
-  textReverse: string;
-  textLink: string;
-};
+import { CoreUITheme } from "@scality/core-ui/dist/next";
 ```
 
-<br />
-
 ## Development
 
 This project is built with [React](https://react.dev/) and [TypeScript](https://www.typescriptlang.org/), and styled with [styled-components](https://styled-components.com/).
 
-To start contributing to core-ui, clone the repository :
+To start contributing to core-ui, clone the repository:
 
 ```sh
 git clone git@github.com:scality/core-ui.git
 ```
 
-then install the dependancies :
+then install the dependancies:
 
 ```sh
 npm install
@@ -142,7 +97,7 @@ npm install
 
 ### Create a new branch
 
-Give your branch an explicit name with the reference to the Jira ticket or issue if it exists, and prefix it with :
+Give your branch an explicit name with the reference to the Jira ticket or issue if it exists, and prefix it with:
 
 - feature/ for new component or major component update : `feature/TICKET-123-some-feature`
 - improvement/ for code improvement, component update : `improvement/TICKET-456-some-improvement`
@@ -183,7 +138,7 @@ When creating a new version of an existing component, expose it in `src/lib/next
 
 You can use storybook to help with the development.
 Storybook helps to test and vizualize component in isolation.
-If it doesn't exist, write a [story](https://storybook.js.org/docs/get-started/whats-a-story) for the component :
+If it doesn't exist, write a [story](https://storybook.js.org/docs/get-started/whats-a-story) for the component:
 
 ```jsx
 // in stories/example/example.stories.tsx
@@ -200,10 +155,9 @@ type Story = StoryObj<typeof Example>;
 export const Default: Story = {
   render: () => <Example />,
 };
-
 ```
 
-then launch storybook :
+Then launch storybook:
 
 ```sh
 npm run storybook
@@ -213,7 +167,7 @@ Storybook will be launched on `http://localhost:3000`.
 
 ### Lint
 
-To make sure your code is correctly lint, run :
+To make sure your code is correctly lint, run:
 
 ```sh
 npm run lint
@@ -225,13 +179,13 @@ It will run ESLint by using `eslint-config-react-app` which is a shareable ESLin
 
 Build tests with [jest](https://jestjs.io/)
 
-Make sure to write tests that cover all cases, then you can run all tests with :
+Make sure to write tests that cover all cases, then you can run all tests with:
 
 ```sh
 npm run test
 ```
 
-or run a specific test with :
+Or run a specific test with:
 
 ```sh
 npm run test Example.test.tsx
@@ -241,7 +195,6 @@ npm run test Example.test.tsx
 
 Core-UI uses [storybook](https://storybook.js.org/) for its documentation. \
 Illustrate use cases and state variations with [stories](https://storybook.js.org/docs/writing-stories).
-All stories should be type.
 
 If possible create or update the component guideline.
 This guideline is an MDX file containing details about the component usage and is illustrated with the stories write in stories.tsx file.
@@ -259,29 +212,23 @@ import * as ExampleStories from './Example.stories';
 An Example component is used for example.
 
 <Canvas of={ExampleStories.Default} />
-
 ```
 
-### Pull request
-
-Push your code on the repository
-
-```sh
-git push origin <branch-name>
-```
+### Contributing
 
-then create a `Pull Request`.
-Pull request needs to be approved by at least one reviewer.
-After your PR is approved you can comment `/approve`
+- Push your code on a branch following the [branch naming convention](#create-a-new-branch)
+- Create a pull request.
+- Obtain the approval of at least one reviewer.
+- Then comment with `/approve` to merge the PR.
 
 ### Release
 
 After merging one or more PR in Core-UI, it is possible to plublish a new release.
-In the Core-UI repo, follow these steps :
+In the Core-UI repo, follow these steps:
 
 1. Go on `Releases` then `Draft a new release`
-2. In the select menu `Choose a tag` : Create a new tag (the current tag increment by 1).
-3. You can now `Generate release notes` : it will add all the PR infos since the last release. \
+2. In the select menu `Choose a tag`: Create a new tag (the current tag increment by 1).
+3. You can now `Generate release notes`: it will add all the PR infos since the last release. \
    You can add details if necessary.
 4. `Publish release`
 5. It will create a PR that need to be approved.

package/dist/components/barchart/BarChart.component.d.ts

@@ -7,6 +7,11 @@ type Props = {
     height?: number;
     barConfig?: Record<string, any>;
 };
+/**
+ * @deprecated Use Barchart v2 instead
+ * @example import { Barchart } from '@scality/core-ui/dist/next';
+
+ */
 declare function BarChart({ id, data, xAxis, yAxis, color, height, barConfig, }: Props): import("react/jsx-runtime").JSX.Element;
 export { BarChart };
 //# sourceMappingURL=BarChart.component.d.ts.map

package/dist/components/barchart/BarChart.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchart/BarChart.component.tsx"],"names":[],"mappings":"AACA,KAAK,KAAK,GAAG;IACX,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACjC,CAAC;AAEF,iBAAS,QAAQ,CAAC,EAChB,EAAE,EACF,IAAI,EACJ,KAAK,EACL,KAAK,EACL,KAAK,EACL,MAAY,EACZ,SAAS,GACV,EAAE,KAAK,2CAwBP;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"BarChart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchart/BarChart.component.tsx"],"names":[],"mappings":"AACA,KAAK,KAAK,GAAG;IACX,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACjC,CAAC;AAEF;;;;GAIG;AACH,iBAAS,QAAQ,CAAC,EAChB,EAAE,EACF,IAAI,EACJ,KAAK,EACL,KAAK,EACL,KAAK,EACL,MAAY,EACZ,SAAS,GACV,EAAE,KAAK,2CAwBP;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/barchart/BarChart.component.js

@@ -1,5 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { VegaChart } from '../vegachartv2/VegaChartV2.component';
+/**
+ * @deprecated Use Barchart v2 instead
+ * @example import { Barchart } from '@scality/core-ui/dist/next';
+
+ */
 function BarChart({ id, data, xAxis, yAxis, color, height = 200, barConfig, }) {
     const spec = {
         mark: {

package/dist/components/barchartv2/Barchart.component.d.ts

@@ -57,5 +57,24 @@ export type BarchartProps<T extends BarchartBars> = {
     isLoading?: boolean;
     isError?: boolean;
 };
+interface CustomTickProps {
+    x: number;
+    y: number;
+    payload: {
+        value: number;
+    };
+    visibleTicksCount: number;
+    width: number;
+    type: TimeType;
+}
+/**
+ * Formats a date based on the interval
+ * @param timestamp - Timestamp
+ * @param interval - Interval in milliseconds
+ * @returns Formatted string
+ */
+export declare const formatDate: (timestamp: number, interval: number) => React.ReactNode;
+export declare const CustomTick: ({ x, y, payload, visibleTicksCount, width, type, }: CustomTickProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Barchart: <T extends BarchartBars>(props: BarchartProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=Barchart.component.d.ts.map

package/dist/components/barchartv2/Barchart.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Barchart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/Barchart.component.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAGL,SAAS,EAEV,MAAM,SAAS,CAAC;AAkBjB,MAAM,MAAM,QAAQ,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE;QACT,SAAS,EAAE,IAAI,CAAC;QAChB,OAAO,EAAE,IAAI,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,CAAC;AACF,MAAM,MAAM,KAAK,GAAG;IAClB,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,SAAS;IAClC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC,EAAE,CAAC;CACvE,EAAE,CAAC;AAEJ,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,YAAY,IAAI,CAAC,YAAY,EAAE;IACrE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,MAAM,EAAE;QAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,OAAO,CAAA;KAAE,EAAE,CAAC;CAC5E,KAAK,KAAK,CAAC,SAAS,CAAC;AAEtB,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,YAAY,IAAI,CACnD,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,GAAG;IAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,EAC1E,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,GAAG;IAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,KACvE,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;AAEhB,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,YAAY,IAAI;IAClD,IAAI,EAAE,UAAU,GAAG,QAAQ,CAAC;IAC5B,IAAI,CAAC,EAAE,CAAC,CAAC;IACT,OAAO,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAkIF,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,YAAY,SAAS,aAAa,CAAC,CAAC,CAAC,4CAwIvE,CAAC"}
+{"version":3,"file":"Barchart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/Barchart.component.tsx"],"names":[],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Bar, BarChart, CartesianGrid, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
 import styled, { useTheme } from 'styled-components';
@@ -9,8 +9,9 @@ import { ConstrainedText } from '../constrainedtext/Constrainedtext.component';
 import { IconHelp } from '../iconhelper/IconHelper';
 import { Loader } from '../loader/Loader.component';
 import { Text } from '../text/Text.component';
-import { formatDate, renderTooltipContent, useChartData, } from './utils';
+import { renderTooltipContent, useChartData } from './utils';
 import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
+import { FormattedDateTime } from '../date/FormattedDateTime';
 const CHART_CONSTANTS = {
     TICK_WIDTH_OFFSET: 5,
     BAR_SIZE: 12,
@@ -24,12 +25,37 @@ const CHART_CONSTANTS = {
     },
 };
 /* ---------------------------------- COMPONENTS ---------------------------------- */
-const CustomTick = ({ x, y, payload, visibleTicksCount, width, type, }) => {
+/**
+ * Formats a date based on the interval
+ * @param timestamp - Timestamp
+ * @param interval - Interval in milliseconds
+ * @returns Formatted string
+ */
+export const formatDate = (timestamp, interval) => {
+    const date = new Date(timestamp);
+    // More than 24 hours interval - use day and time format
+    if (interval > 24 * 60 * 60 * 1000) {
+        return (_jsxs(_Fragment, { children: [_jsx(FormattedDateTime, { format: "chart-date", value: date }), ' ', _jsx(FormattedDateTime, { format: "time", value: date })] }));
+    }
+    else if (interval === 24 * 60 * 60 * 1000) {
+        // Daily interval - use day format
+        return _jsx(FormattedDateTime, { format: "chart-date", value: date });
+    }
+    else if (interval >= 60 * 1000) {
+        //Hourly and minute intervals - use minute format
+        return _jsx(FormattedDateTime, { format: "time", value: date });
+    }
+    else {
+        // minute interval or less - use full timestamp
+        return timestamp;
+    }
+};
+export const CustomTick = ({ x, y, payload, visibleTicksCount, width, type, }) => {
     const theme = useTheme();
     const tickWidth = width / visibleTicksCount - CHART_CONSTANTS.TICK_WIDTH_OFFSET;
     const centerX = x - tickWidth / 2;
-    return (_jsx("foreignObject", { x: centerX, y: y, width: tickWidth, color: theme.textSecondary, overflow: "visible", children: _jsx(ConstrainedText, { text: _jsx(Text, { variant: "Smaller", color: "textSecondary", children: type.type === 'time'
-                    ? formatDate(new Date(payload.value), type.timeRange.interval)
+    return (_jsx("foreignObject", { x: centerX, y: y, width: tickWidth, color: theme.textSecondary, overflow: "visible", children: _jsx(ConstrainedText, { color: "textSecondary", text: _jsx(Text, { variant: "Smaller", children: type.type === 'time'
+                    ? formatDate(payload.value, type.timeRange.interval)
                     : String(payload.value) }), centered: true, tooltipStyle: {
                 backgroundColor: theme.backgroundLevel1,
                 padding: spacing.r10,

package/dist/components/barchartv2/ChartTooltip.d.ts

@@ -0,0 +1,18 @@
+import { BarchartBars } from './Barchart.component';
+export declare const ChartTooltipContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ChartTooltipItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    isHovered: boolean;
+}, never>;
+export declare const ChartTooltip: <T extends BarchartBars>({ type, currentPoint, colorSet, }: {
+    type: "time" | "category";
+    currentPoint: {
+        category: string | number;
+        values: {
+            label: T[number]["label"];
+            value: number;
+            isHovered: boolean;
+        }[];
+    };
+    colorSet: Record<string, string>;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChartTooltip.d.ts.map

package/dist/components/barchartv2/ChartTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTooltip.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/ChartTooltip.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAKpD,eAAO,MAAM,qBAAqB,yGAYjC,CAAC;AAEF,eAAO,MAAM,gBAAgB;eAA2B,OAAO;SAM9D,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,YAAY,qCAIhD;IACD,IAAI,EAAE,MAAM,GAAG,UAAU,CAAC;IAC1B,YAAY,EAAE;QACZ,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC;QAC1B,MAAM,EAAE;YAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAC;YAAC,SAAS,EAAE,OAAO,CAAA;SAAE,EAAE,CAAC;KAC5E,CAAC;IACF,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAClC,4CAkCA,CAAC"}

package/dist/components/barchartv2/ChartTooltip.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { spacing, Stack, Wrap } from '../../spacing';
+import { Text } from '../text/Text.component';
+import { fontSize, fontWeight } from '../../style/theme';
+import { LegendShape } from '../chartlegend/ChartLegend';
+import { FormattedDateTime } from '../date/FormattedDateTime';
+export const ChartTooltipContainer = styled.div `
+  background-color: ${({ theme }) => theme.backgroundLevel1};
+  padding: ${spacing.r4} ${spacing.r8};
+  border-radius: 4px;
+  width: max-content;
+  max-width: 40rem;
+  border: 1px solid ${({ theme }) => theme.border};
+  display: flex;
+  font-size: ${fontSize.small};
+  flex-direction: column;
+  gap: 16px;
+  align-items: center;
+`;
+export const ChartTooltipItem = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: ${({ isHovered }) => isHovered ? fontWeight.bold : fontWeight.base};
+`;
+export const ChartTooltip = ({ type, currentPoint, colorSet, }) => {
+    return (_jsxs(ChartTooltipContainer, { children: [_jsx(Text, { isEmphazed: true, children: type === 'time' ? (_jsx(FormattedDateTime, { format: "long-date", value: new Date(currentPoint.category) })) : (currentPoint.category) }), _jsx(Stack, { direction: "vertical", gap: "r8", style: { width: '100%' }, children: currentPoint.values.map((value) => {
+                    return (_jsxs(Wrap, { children: [_jsxs(ChartTooltipItem, { isHovered: value.isHovered, children: [_jsx(LegendShape, { color: colorSet[value.label], shape: "rectangle", chartColors: colorSet }), value.label] }), _jsx(ChartTooltipItem, { isHovered: value.isHovered, children: value.value })] }, value.label));
+                }) })] }));
+};

package/dist/components/barchartv2/utils.d.ts

@@ -5,13 +5,6 @@ export declare const getRoundReferenceValue: (value: number) => number;
 export declare const getMaxBarValue: (data: {
     [key: string]: string | number;
 }[], stacked?: boolean) => number;
-/**
- * Formats a date based on the interval
- * @param date - Date object
- * @param interval - Interval in milliseconds
- * @returns Formatted string
- */
-export declare const formatDate: (date: Date, interval: number) => string;
 /**
  * Transforms time-based data into chart format
  */

package/dist/components/barchartv2/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/utils.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,YAAY,EACZ,iBAAiB,EAClB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,EAAe,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAG7D,eAAO,MAAM,sBAAsB,UAAW,MAAM,KAAG,MAkBtD,CAAC;AAEF,eAAO,MAAM,cAAc,SACnB;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;CAAE,EAAE,YAChC,OAAO,WAuBlB,CAAC;AAkDF;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,YAAY,QAChD,CAAC,QACD;IACJ,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE;QACT,SAAS,EAAE,IAAI,CAAC;QAChB,OAAO,EAAE,IAAI,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,eACY,MAAM,EAAE;;GAsCtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB,GAAI,CAAC,SAAS,YAAY,QACpD,CAAC,eACM,MAAM,EAAE;;GA2BtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,GAAI,CAAC,SAAS,YAAY,QACjD;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;CAAE,EAAE,eAC7B,MAAM,EAAE,eACR,aAAa,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC;;GAqB7C,CAAC;AA6BF;;;;;GAKG;AACH,eAAO,MAAM,yCAAyC,GACpD,CAAC,SAAS,YAAY,QAEhB,CAAC,QACD,aAAa,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,YACpB,MAAM,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAAC,YACpC,OAAO,gBACH,aAAa,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,gBAC/B,MAAM,EAAE,KACrB;IACD,IAAI,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;KAAE,EAAE,CAAC;IAC3C,YAAY,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CA4BrE,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,EAAE,CAAC;AAEJ,eAAO,MAAM,sCAAsC,SAC3C,GAAG,YACC,MAAM,aACL,SAAS,GAAG,SAAS;;;;CAoBjC,CAAC;AAEF;;;;;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,CAmCA;AAID,eAAO,MAAM,eAAe,iBACZ;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,EAAE,QACG;IACJ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;CAChC,EAAE,YACO,OAAO,gBACH,MAAM,EAAE;aARX,MAAM;UACT,MAAM;cACF,MAAM;GA8CnB,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,CAAC,SAAS,YAAY,SAClD,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,WACjC,iBAAiB,CAAC,CAAC,CAAC,GAAG,SAAS,gBAC3B,MAAM,GAAG,SAAS,8BAwBjC,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,uCAAuC,SAC5C;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;CAAE,EAAE,gBAC5B;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,EAAE,qBAChD,MAAM,EAAE;;;;;iBADF,MAAM;cAAQ,MAAM;kBAAY,MAAM;;CA2BhE,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,YAAY,QAC3C,CAAC,QACD,aAAa,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,YACpB,MAAM,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAAC,YACpC,OAAO,gBACH,aAAa,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,cACjC,SAAS,mBACJ,SAAS,GAAG,QAAQ;;iBApCZ,MAAM;cAAQ,MAAM;kBAAY,MAAM;;;;;CAuEhE,CAAC"}

package/dist/components/barchartv2/utils.js

@@ -1,4 +1,3 @@
-import { DAY_MONTH_FORMATER, TIME_FORMATER } from '../date/FormattedDateTime';
 import { chartColors } from '../../style/theme';
 import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
 export const getRoundReferenceValue = (value) => {
@@ -62,31 +61,6 @@ const generateTimeRanges = (startDate, endDate, interval) => {
     }
     return ranges;
 };
-/**
- * Formats a date based on the interval
- * @param date - Date object
- * @param interval - Interval in milliseconds
- * @returns Formatted string
- */
-export const formatDate = (date, interval) => {
-    if (interval > 24 * 60 * 60 * 1000) {
-        return (DAY_MONTH_FORMATER.format(date).replace(/[ ,]/g, '') +
-            ' ' +
-            TIME_FORMATER.format(date));
-    }
-    else if (interval === 24 * 60 * 60 * 1000) {
-        // Daily or longer intervals - use day format
-        return DAY_MONTH_FORMATER.format(date).replace(/[ ,]/g, '');
-    }
-    else if (interval >= 60 * 1000) {
-        //Handle hourly and minute intervals - use minute format
-        return TIME_FORMATER.format(date);
-    }
-    else {
-        // Second intervals or less - use full timestamp
-        return date.toISOString();
-    }
-};
 /**
  * Finds the time range that contains the given date
  * @param date - Data point date
@@ -105,10 +79,8 @@ export const transformTimeData = (bars, type, barDataKeys) => {
     const categoryMap = new Map();
     // Initialize all ranges with zeros
     timeRanges.forEach((range) => {
-        // const categoryDisplay = formatDate(range.start, type.timeRange.interval);
-        const categoryDisplay = range.start.getTime();
         const initialData = {
-            category: categoryDisplay,
+            category: range.start.getTime(),
         };
         barDataKeys.forEach((dataKey) => {
             initialData[dataKey] = 0;

package/dist/components/button/Button.component.d.ts

@@ -19,8 +19,9 @@ export declare const ButtonText: import("styled-components").StyledComponent<"sp
 export declare const ButtonContent: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
 /**
  * @deprecated
+ * Used only in Dropdown.component.tsx, can be removed after refactoring
  * You should use ButtonV2 with
- * import { Button } from '@scality/core-ui/dist/next';
+ * @example import { Button } from '@scality/core-ui/dist/next';
  */
 declare function Button({ text, href, icon, size, variant, outlined, disabled, onClick, title, isLoading, type, inverted, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
 export { Button };

package/dist/components/button/Button.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/button/Button.component.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,KAAK,KAAK,GAAG;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,CAAC;IAIZ,OAAO,CAAC,EACJ,eAAe,GACf,iBAAiB,GACjB,cAAc,GACd,kBAAkB,CAAC;IAEvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;CAC/B,CAAC;AACF,eAAO,MAAM,YAAY,4GA+LxB,CAAC;AACF,eAAO,MAAM,UAAU,0GAStB,CAAC;AACF,eAAO,MAAM,UAAU,0GAItB,CAAC;AACF,eAAO,MAAM,aAAa,0GAEzB,CAAC;AAGF;;;;GAIG;AACH,iBAAS,MAAM,CAAC,EACd,IAAS,EACT,IAAS,EACT,IAAW,EACX,IAAa,EACb,OAAyB,EACzB,QAAgB,EAChB,QAAgB,EAChB,OAAO,EACP,KAAU,EACV,SAAiB,EACjB,IAAe,EACf,QAAgB,EAChB,GAAG,IAAI,EACR,EAAE,KAAK,2CAgDP;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Button.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/button/Button.component.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,KAAK,KAAK,GAAG;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,CAAC;IAIZ,OAAO,CAAC,EACJ,eAAe,GACf,iBAAiB,GACjB,cAAc,GACd,kBAAkB,CAAC;IAEvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;CAC/B,CAAC;AACF,eAAO,MAAM,YAAY,4GA+LxB,CAAC;AACF,eAAO,MAAM,UAAU,0GAStB,CAAC;AACF,eAAO,MAAM,UAAU,0GAItB,CAAC;AACF,eAAO,MAAM,aAAa,0GAEzB,CAAC;AAGF;;;;;GAKG;AACH,iBAAS,MAAM,CAAC,EACd,IAAS,EACT,IAAS,EACT,IAAW,EACX,IAAa,EACb,OAAyB,EACzB,QAAgB,EAChB,QAAgB,EAChB,OAAO,EACP,KAAU,EACV,SAAiB,EACjB,IAAe,EACf,QAAgB,EAChB,GAAG,IAAI,EACR,EAAE,KAAK,2CAgDP;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/button/Button.component.js

@@ -218,8 +218,9 @@ export const ButtonContent = styled.span `
 const Anchor = ButtonStyled.withComponent('a');
 /**
  * @deprecated
+ * Used only in Dropdown.component.tsx, can be removed after refactoring
  * You should use ButtonV2 with
- * import { Button } from '@scality/core-ui/dist/next';
+ * @example import { Button } from '@scality/core-ui/dist/next';
  */
 function Button({ text = '', href = '', icon = null, size = 'base', variant = 'buttonPrimary', outlined = false, disabled = false, onClick, title = '', isLoading = false, type = 'button', inverted = false, ...rest }) {
     return href && href.length ? (_jsxs(Anchor, { className: "sc-button", href: href, variant: variant, outlined: outlined, disabled: disabled, size: size, title: title, ...rest, children: [icon && (_jsx(ButtonIcon, { text: text, size: size, children: icon })), _jsx(ButtonText, { children: text })] })) : (_jsx(ButtonStyled, { className: "sc-button", variant: variant, outlined: outlined, disabled: disabled || isLoading, size: size, onClick: onClick, title: title, isLoading: isLoading, type: type, inverted: inverted, icon: icon, text: text, ...rest, children: _jsxs(ButtonContent, { children: [isLoading && _jsx(Loader, { size: size }), _jsxs("span", { className: "sc-button-text", children: [icon && (_jsx(ButtonIcon, { text: text, size: size, children: icon })), _jsx(ButtonText, { children: text })] })] }) }));

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

@@ -3,6 +3,15 @@ type ChartLegendProps = {
     disabled?: boolean;
     direction?: 'horizontal' | 'vertical';
 };
+export declare const LegendItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    disabled?: boolean;
+    selected?: boolean;
+}, never>;
+export declare const LegendShape: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    color?: string;
+    shape: "line" | "rectangle";
+    chartColors: Record<string, string>;
+}, never>;
 export declare const ChartLegend: ({ shape, disabled, direction, }: 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;AAkDF,eAAO,MAAM,WAAW,oCAIrB,gBAAgB,4CAgDlB,CAAC"}
+{"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"}

package/dist/components/chartlegend/ChartLegend.js

@@ -10,7 +10,7 @@ const Legend = styled.div `
   gap: ${({ direction }) => (direction === 'horizontal' ? '16px' : '8px')};
   flex-wrap: wrap;
 `;
-const LegendItem = styled.div `
+export const LegendItem = styled.div `
   display: flex;
   align-items: center;
   gap: 8px;
@@ -22,7 +22,7 @@ const LegendItem = styled.div `
     opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
   }
 `;
-const LegendShape = styled.div `
+export const LegendShape = styled.div `
   ${({ shape, color, chartColors }) => {
     if (shape === 'line') {
         return `
@@ -45,21 +45,44 @@ const LegendShape = styled.div `
 }}
 `;
 export const ChartLegend = ({ shape, disabled = false, direction = 'horizontal', }) => {
-    const { listResources, getColor, isSelected, addSelectedResource, removeSelectedResource, } = useChartLegend();
+    const { listResources, getColor, isSelected, addSelectedResource, removeSelectedResource, selectAllResources, selectOnlyResource, isOnlyOneSelected, } = useChartLegend();
     const resources = listResources();
-    const handleLegendClick = useCallback((resource) => {
+    const handleLegendClick = useCallback((resource, event) => {
         if (disabled)
             return;
-        if (isSelected(resource)) {
-            removeSelectedResource(resource);
+        const isModifierClick = event.metaKey || event.ctrlKey;
+        const itemIsSelected = isSelected(resource);
+        if (isModifierClick) {
+            if (itemIsSelected) {
+                if (isOnlyOneSelected()) {
+                    selectAllResources();
+                }
+                else {
+                    removeSelectedResource(resource);
+                }
+            }
+            else {
+                addSelectedResource(resource);
+            }
+        }
+        else if (itemIsSelected && isOnlyOneSelected()) {
+            selectAllResources();
         }
         else {
-            addSelectedResource(resource);
+            selectOnlyResource(resource);
         }
-    }, [disabled, isSelected, addSelectedResource, removeSelectedResource]);
+    }, [
+        disabled,
+        isSelected,
+        addSelectedResource,
+        removeSelectedResource,
+        selectAllResources,
+        selectOnlyResource,
+        isOnlyOneSelected,
+    ]);
     return (_jsx(Legend, { direction: direction, children: resources.map((resource) => {
             const color = getColor(resource);
             const selected = isSelected(resource);
-            return (_jsxs(LegendItem, { disabled: disabled, selected: selected, onClick: () => handleLegendClick(resource), 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: "Basic", children: resource })] }, resource));
         }) }));
 };

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

@@ -4,9 +4,12 @@ export type ChartLegendState = {
     selectedResources: string[];
     addSelectedResource: (resource: string) => void;
     removeSelectedResource: (resource: string) => void;
+    selectAllResources: () => void;
+    selectOnlyResource: (resource: string) => void;
     isSelected: (resource: string) => boolean;
     getColor: (resource: string) => string | undefined;
     listResources: () => string[];
+    isOnlyOneSelected: () => boolean;
 };
 export type ChartLegendWrapperProps = {
     children: ReactNode;

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,EAAuC,SAAS,EAAwB,MAAM,OAAO,CAAC;AAC7F,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,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;CAC/B,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,4CAqDzB,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,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"}