@semcore/d3-chart 3.61.0-prerelease.1 → 3.61.0-prerelease.5

package/lib/types/component/Chart/HistogramChart.type.d.ts

@@ -1,11 +1,14 @@
-import { Intergalactic } from '@semcore/core';
-import { Flex } from '@semcore/flex-box';
-import { ScaleBand, ScaleLinear, ScaleTime } from 'd3-scale';
-import { BaseChartProps } from './AbstractChart.type';
+import type { Flex } from '@semcore/base-components';
+import type { Intergalactic } from '@semcore/core';
+import type { ScaleBand, ScaleLinear, ScaleTime } from 'd3-scale';
+import type { BaseChartProps } from './AbstractChart.type';
 export type HistogramChartData = Array<Record<string, number | Date>>;
 export type HistogramChartProps = BaseChartProps<HistogramChartData> & {
+    /** Field name that groups the data points */
     groupKey: string;
+    /** Custom x-axis scale */
     xScale?: ScaleBand<any> | ScaleTime<any, any>;
+    /** Custom y-axis scale */
     yScale?: ScaleLinear<any, any>;
 };
 export type HistogramChartType = Intergalactic.Component<typeof Flex, HistogramChartProps>;

package/lib/types/component/Chart/LineChart.d.ts

@@ -1,2 +1,2 @@
-import { LineChartType } from './LineChart.type';
+import type { LineChartType } from './LineChart.type';
 export declare const LineChart: LineChartType;

package/lib/types/component/Chart/LineChart.type.d.ts

@@ -1,10 +1,10 @@
-import { Intergalactic } from '@semcore/core';
-import { Flex } from '@semcore/flex-box';
-import { interpolateValue } from '../../utils';
-import { ScaleLinear, ScaleTime } from 'd3-scale';
-import { CurveFactory } from 'd3-shape';
-import { BaseChartProps } from './AbstractChart.type';
-import { LegendItemKey } from '../ChartLegend/LegendItem/LegendItem.type';
+import type { Flex } from '@semcore/base-components';
+import type { Intergalactic } from '@semcore/core';
+import type { ScaleLinear, ScaleTime } from 'd3-scale';
+import type { CurveFactory } from 'd3-shape';
+import type { BaseChartProps } from './AbstractChart.type';
+import type { interpolateValue } from '../../utils';
+import type { LegendItemKey } from '../ChartLegend/LegendItem/LegendItem.type';
 type AreaItem = {
     x: number;
     y0: number;
@@ -12,13 +12,22 @@ type AreaItem = {
 };
 export type LineChartData = Array<Record<string, string | number | typeof interpolateValue | Date>>;
 export type LineChartProps = BaseChartProps<LineChartData> & {
+    /**  Field name that groups the data points */
     groupKey: string;
+    /** Optional area data for rendering filled areas under lines */
     area?: Record<LegendItemKey, AreaItem[]>;
+    /** Custom x-axis scale */
     xScale?: ScaleLinear<any, any> | ScaleTime<any, any>;
+    /** Custom y-axis scale */
     yScale?: ScaleLinear<any, any>;
+    /** Controls whether to display dots on the line chart */
     showDots?: boolean;
+    /** D3 curve factory for line interpolation */
     curve?: CurveFactory;
+    /** Curve factory specifically for area rendering */
     areaCurve?: CurveFactory;
+    /** Callback triggered when a user clicks on a line */
+    onClickLine?: (index: number, event: React.SyntheticEvent) => void;
 };
 export type LineChartType = Intergalactic.Component<typeof Flex, LineChartProps>;
 export {};

package/lib/types/component/Chart/RadarChart.d.ts

@@ -1,2 +1,2 @@
-import { RadarChartType } from './RadarChart.type';
+import type { RadarChartType } from './RadarChart.type';
 export declare const RadarChart: RadarChartType;

package/lib/types/component/Chart/RadarChart.type.d.ts

@@ -1,14 +1,16 @@
-import { Intergalactic } from '@semcore/core';
-import { Flex } from '@semcore/flex-box';
-import { ScaleLinear } from 'd3-scale';
-import { BaseChartProps } from './AbstractChart.type';
+import type { Flex } from '@semcore/base-components';
+import type { Intergalactic } from '@semcore/core';
+import type { ScaleLinear } from 'd3-scale';
+import type { BaseChartProps } from './AbstractChart.type';
 export type RadarChartData = Record<string, string[] | number[]>;
-export type RadarChartProps = BaseChartProps<RadarChartData> & {
+export type RadarChartProps = Intergalactic.InternalTypings.EfficientOmit<BaseChartProps<RadarChartData>, 'showTotalInTooltip' | 'showPercentValueInTooltip'> & {
     groupKey: string;
     scale?: ScaleLinear<any, any>;
     xScale?: never;
     yScale?: never;
     showDots?: boolean;
     circle?: boolean;
+    /** Callback triggered when a user clicks on a chart at a position corresponding to a category */
+    onClickRadar?: (index: number, e: React.SyntheticEvent) => void;
 };
 export type RadarChartType = Intergalactic.Component<typeof Flex, RadarChartProps>;

package/lib/types/component/Chart/ScatterPlotChart.d.ts

@@ -1,2 +1,2 @@
-import { ScatterPlotChartType } from './ScatterPlotChart.type';
+import type { ScatterPlotChartType } from './ScatterPlotChart.type';
 export declare const ScatterPlotChart: ScatterPlotChartType;

package/lib/types/component/Chart/ScatterPlotChart.type.d.ts

@@ -1,13 +1,19 @@
-import { Intergalactic } from '@semcore/core';
-import { Flex } from '@semcore/flex-box';
-import { interpolateValue } from '../../utils';
-import { ScaleLinear, ScaleTime } from 'd3-scale';
-import { BaseChartProps } from './AbstractChart.type';
+import type { Flex } from '@semcore/base-components';
+import type { Intergalactic } from '@semcore/core';
+import type { ScaleLinear, ScaleTime } from 'd3-scale';
+import type { BaseChartProps } from './AbstractChart.type';
+import type { interpolateValue } from '../../utils';
 export type ScatterPlotChartData = Array<Record<string, number | typeof interpolateValue | Date>>;
-export type ScatterPlotChartProps = BaseChartProps<ScatterPlotChartData> & {
+export type ScatterPlotChartProps = Intergalactic.InternalTypings.EfficientOmit<BaseChartProps<ScatterPlotChartData>, 'showTotalInTooltip'> & {
+    /** Field name that groups the data points */
     groupKey: string;
+    /** Custom x-axis scale */
     xScale?: ScaleLinear<any, any> | ScaleTime<any, any>;
+    /** Custom y-axis scale */
     yScale?: ScaleLinear<any, any>;
+    /**  Optional field name for additional value data */
     valueKey?: string;
+    /** Callback triggered when a user clicks on a scatter item */
+    onClickScatterItem?: (index: number, event: React.SyntheticEvent) => void;
 };
 export type ScatterPlotChartType = Intergalactic.Component<typeof Flex, ScatterPlotChartProps>;

package/lib/types/component/Chart/VennChart.d.ts

@@ -1,2 +1,2 @@
-import { VennChartType } from './VennChart.type';
+import type { VennChartType } from './VennChart.type';
 export declare const VennChart: VennChartType;

package/lib/types/component/Chart/VennChart.type.d.ts

@@ -1,11 +1,17 @@
-import { Intergalactic } from '@semcore/core';
-import { Flex } from '@semcore/flex-box';
-import { ScaleLinear } from 'd3-scale';
-import { BaseChartProps } from './AbstractChart.type';
-export type VennChartData = Record<string, number>;
-export type VennChartProps = BaseChartProps<VennChartData> & {
+import type { Flex } from '@semcore/base-components';
+import type { Intergalactic } from '@semcore/core';
+import type { ScaleLinear } from 'd3-scale';
+import type { BaseChartProps } from './AbstractChart.type';
+export type DataKey = string;
+export type VennChartData = Record<DataKey, number>;
+export type VennChartProps = Intergalactic.InternalTypings.EfficientOmit<BaseChartProps<VennChartData>, 'showTotalInTooltip'> & {
+    /** Internal */
     groupKey?: never;
+    /** Custom x-axis scale */
     xScale?: ScaleLinear<any, any>;
+    /** Custom y-axis scale */
     yScale?: ScaleLinear<any, any>;
+    /** Callback triggered when a user clicks on a circle */
+    onClickVennItem?: (key: DataKey, e: React.SyntheticEvent) => void;
 };
 export type VennChartType = Intergalactic.Component<typeof Flex, VennChartProps>;

package/lib/types/component/ChartLegend/BaseLegend.d.ts

@@ -1,14 +1,16 @@
-import React from 'react';
-import { Component, Intergalactic } from '@semcore/core';
-import { LegendItemKey, LegendItemProps } from './LegendItem/LegendItem.type';
-import { LegendProps } from './BaseLegend.type';
-export declare abstract class BaseLegend<T extends LegendProps> extends Component<T> {
+import { Component, type Intergalactic } from '@semcore/core';
+import type React from 'react';
+import type { LegendProps } from './BaseLegend.type';
+import { type LegendItemKey, type LegendItemProps, type ShapeType } from './LegendItem/LegendItem.type';
+export declare abstract class BaseLegend<T extends LegendProps, E extends readonly ((...args: any[]) => any)[] = never[]> extends Component<T, E> {
     componentDidMount(): void;
     componentDidUpdate(prevProps: T): void;
     setHints(): void;
     getItem(index: number): import("./LegendItem/LegendItem.type").LegendItem;
     getLegendItemProps(_: {}, index: number): LegendItemProps & Intergalactic.InternalTypings.ComponentPropsNesting<'div'>;
-    onChangeLegendItem: (id: LegendItemKey, checked: boolean) => void;
+    onChangeLegendItem: (shape: ShapeType) => (id: LegendItemKey, checked: boolean) => void;
+    onFocusLegendItem: (checked: boolean) => (id: LegendItemKey) => void;
+    onBlurLegendItem: (id: LegendItemKey) => void;
     bindOnMouseEnterItem: (id: LegendItemKey) => (e: React.SyntheticEvent) => void;
     bindOnMouseLeaveItem: (id: LegendItemKey) => (e: React.SyntheticEvent) => void;
 }

package/lib/types/component/ChartLegend/BaseLegend.type.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
-import { BoxProps, FlexProps } from '@semcore/flex-box';
-import { LegendItem, LegendItemKey, ShapeType } from './LegendItem/LegendItem.type';
-import { DataStructureHints } from '../../a11y/hints';
+import type { BoxProps, FlexProps } from '@semcore/base-components';
+import type { LegendItem, LegendItemKey, ShapeType } from './LegendItem/LegendItem.type';
+import type { DataStructureHints } from '../../a11y/hints';
 import type { PatternsConfig } from '../../Pattern';
-import { AriaNameProps } from '../Chart/AbstractChart.type';
+import type { AriaNameProps } from '../Chart/AbstractChart.type';
 export type LSize = 'm' | 'l';
 export type BaseChartLegendProps = FlexProps & AriaNameProps & {
     /**

package/lib/types/component/ChartLegend/LegendFlex/LegendFlex.d.ts

@@ -1,2 +1,2 @@
-import { LegendFlexType } from './LegendFlex.type';
+import type { LegendFlexType } from './LegendFlex.type';
 export declare const LegendFlex: LegendFlexType;

package/lib/types/component/ChartLegend/LegendFlex/LegendFlex.type.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
-import { Flex, FlexProps } from '@semcore/flex-box';
-import { Intergalactic } from '@semcore/core';
-import { LegendItemType } from '../LegendItem/LegendItem.type';
-import { LegendProps } from '../BaseLegend.type';
+import type { Flex, FlexProps } from '@semcore/base-components';
+import type { Intergalactic } from '@semcore/core';
+import type { LegendProps } from '../BaseLegend.type';
+import type { LegendItemType } from '../LegendItem/LegendItem.type';
 export type TrendProps = {
     /**
      * Flag for include trend LegendItem in Legend

package/lib/types/component/ChartLegend/LegendItem/LegendItem.d.ts

@@ -1,2 +1,2 @@
-import { LegendItemType } from './LegendItem.type';
+import { type LegendItemType } from './LegendItem.type';
 export declare const LegendItemComponent: LegendItemType;

package/lib/types/component/ChartLegend/LegendItem/LegendItem.type.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
-import { Flex } from '@semcore/flex-box';
-import { Intergalactic, Root } from '@semcore/core';
-import Icon from '@semcore/icon';
-import { Text } from '@semcore/typography';
-import { LSize } from '../BaseLegend.type';
-import { PatternsConfig } from '../../../Pattern';
+import type { Flex } from '@semcore/base-components';
+import type { Intergalactic, Root } from '@semcore/core';
+import type Icon from '@semcore/icon';
+import type { Text } from '@semcore/typography';
+import type { PatternsConfig } from '../../../Pattern';
+import type { LSize } from '../BaseLegend.type';
 /**
  * Key of chart data item
  */
@@ -63,14 +62,22 @@ export type LegendItemProps = LegendItem & {
      * Handler for select/deselect legend item
      */
     onChangeLegendItem: (id: LegendItemKey, checked: boolean) => void;
+    /**
+     * Handler for focus legend item
+     */
+    onFocusLegendItem: (id: LegendItemKey) => void;
+    /**
+     * Handler for focus out legend item
+     */
+    onBlurLegendItem: (id: LegendItemKey) => void;
 };
 export type ShapeProps = LegendItem & ({
     size: LSize;
     shape: Exclude<ShapeType, 'Checkbox'>;
 } | {
-    size: LSize;
-    shape: Extract<ShapeType, 'Checkbox'>;
-    onChange: (checked: boolean, e?: React.SyntheticEvent<HTMLInputElement>) => void;
+    'size': LSize;
+    'shape': Extract<ShapeType, 'Checkbox'>;
+    'onChange': (checked: boolean, e?: React.SyntheticEvent<HTMLInputElement>) => void;
     'aria-labelledby'?: string;
 });
 export declare const StaticShapes: readonly ["Circle", "Line", "Square", "Pattern"];

package/lib/types/component/ChartLegend/LegendTable/LegendTable.d.ts

@@ -1,2 +1,2 @@
-import { LegendTableType } from './LegendTable.type';
+import type { LegendTableType } from './LegendTable.type';
 export declare const LegendTable: LegendTableType;

package/lib/types/component/ChartLegend/LegendTable/LegendTable.type.d.ts

@@ -1,8 +1,8 @@
-import { Intergalactic } from '@semcore/core';
-import { Box } from '@semcore/flex-box';
-import { LegendItem, LegendItemType } from '../LegendItem/LegendItem.type';
-import React from 'react';
-import { LegendProps, LSize } from '../BaseLegend.type';
+import type { Box } from '@semcore/base-components';
+import type { Intergalactic } from '@semcore/core';
+import type React from 'react';
+import type { LegendProps, LSize } from '../BaseLegend.type';
+import type { LegendItem, LegendItemType } from '../LegendItem/LegendItem.type';
 export type LegendTableProps = Intergalactic.InternalTypings.EfficientOmit<LegendProps, 'items'> & {
     /**
      * Legend items

package/lib/types/component/StackGroupBar/StackGroupBar.d.ts

@@ -1,3 +1,3 @@
-import { StackGroupType } from './StackGroupBar.type';
+import type { StackGroupType } from './StackGroupBar.type';
 declare const StackGroupBar: StackGroupType;
 export default StackGroupBar;

package/lib/types/component/StackGroupBar/StackGroupBar.type.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
-import { ScaleBand, ScaleLinear } from 'd3-scale';
-import { Stack } from 'd3-shape';
-import { IntergalacticD3Component } from '../../Plot';
+import type { ScaleBand, ScaleLinear } from 'd3-scale';
+import type { Stack } from 'd3-shape';
+import type { IntergalacticD3Component } from '../../Plot';
 type StackGroupData = {
     [key: string]: number;
 };

package/lib/types/component/SvgElement.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+type FilteredTags<T, ValueType> = {
+    [K in keyof T]: K extends ValueType ? K : never;
+}[keyof T];
+type AvailableTags = FilteredTags<JSX.IntrinsicElements, keyof SVGElementTagNameMap>;
+type SvgElementProps<T extends AvailableTags> = React.SVGProps<SVGElementTagNameMap[T]> & {
+    tag: T;
+};
+export declare const SvgElement: <T extends AvailableTags>({ tag: Tag, ...props }: SvgElementProps<T>) => React.JSX.Element;
+export {};

package/lib/types/index.d.ts

@@ -1,6 +1,7 @@
 // Utils
 // @ts-ignore
-import { interpolateValue as intValue, PlotEventEmitter } from './utils';
+import type { interpolateValue as intValue } from './utils';
+import { PlotEventEmitter } from './utils';
 
 export declare const interpolateValue: typeof intValue;
 export declare function minMax(data: any, key: string | number): any;
@@ -99,6 +100,7 @@ export * from './component/Chart/AbstractChart.type';
 export * from './component/Chart/LineChart.type';
 export * from './component/Chart/BarChart.type';
 export * from './component/Chart/HistogramChart.type';
+export * from './component/Chart/CompactHorizontalBarChart.type';
 export * from './component/Chart/ScatterPlotChart.type';
 export * from './component/Chart/AreaChart.type';
 export * from './component/Chart/BubbleChart.type';

package/lib/types/translations/__intergalactic-dynamic-locales.d.ts

@@ -5,50 +5,62 @@ export declare const localizedMessages: {
         legendForChart: string;
     };
     es: {
+        "d3Chart.Plot:aria-label": string;
         trend: string;
         legendForChart: string;
     };
     fr: {
+        "d3Chart.Plot:aria-label": string;
         trend: string;
         legendForChart: string;
     };
     it: {
+        "d3Chart.Plot:aria-label": string;
         trend: string;
         legendForChart: string;
     };
     ja: {
+        "d3Chart.Plot:aria-label": string;
         trend: string;
         legendForChart: string;
     };
     ko: {
+        "d3Chart.Plot:aria-label": string;
         trend: string;
         legendForChart: string;
     };
     nl: {
+        "d3Chart.Plot:aria-label": string;
         trend: string;
         legendForChart: string;
     };
     pt: {
+        "d3Chart.Plot:aria-label": string;
         trend: string;
         legendForChart: string;
     };
     tr: {
+        "d3Chart.Plot:aria-label": string;
         trend: string;
         legendForChart: string;
     };
     vi: {
+        "d3Chart.Plot:aria-label": string;
         trend: string;
         legendForChart: string;
     };
     zh: {
+        "d3Chart.Plot:aria-label": string;
         trend: string;
         legendForChart: string;
     };
     pl: {
+        "d3Chart.Plot:aria-label": string;
         trend: string;
         legendForChart: string;
     };
     sv: {
+        "d3Chart.Plot:aria-label": string;
         trend: string;
         legendForChart: string;
     };

package/lib/types/utils.d.ts

@@ -1,7 +1,7 @@
-import EventEmitter from '@semcore/utils/lib/eventEmitter';
-import { Numeric } from 'd3-array';
-import { ScaleIdentity, ScaleTime, ScaleContinuousNumeric, ScaleBand, ScalePoint } from 'd3-scale';
-import React from 'react';
+import EventEmitter from '@semcore/core/lib/utils/eventEmitter';
+import { type Numeric } from 'd3-array';
+import { type ScaleIdentity, type ScaleTime, type ScaleContinuousNumeric, type ScaleBand, type ScalePoint } from 'd3-scale';
+import type React from 'react';
 export declare const eventToPoint: (event: React.MouseEvent<HTMLElement>, svgRoot: SVGElement) => number[];
 type InvertableScale = ScaleIdentity | ScaleBand<{}> | ScaleTime<unknown, unknown> | ScaleContinuousNumeric<unknown, unknown>;
 export declare const invert: <Scale extends InvertableScale = InvertableScale>(scale: Scale, value: number) => number | Date;
@@ -17,9 +17,9 @@ export declare const minMax: <Key extends string = string, Data extends {
 }[] = {
     [key: string]: Numeric | null | undefined;
 }[]>(data: Data, key: Key) => [min: Data[0][Key], max: Data[0][Key]];
-export declare const getNullData: <Name extends string = string, Data extends { [name in Name]?: unknown; } = {}>(data: Data[], defined: (data: Data) => boolean, name: Name) => Data[];
+export declare const getNullData: <Name extends string = string, Data extends { [name in Name]?: unknown | null; } = {}>(data: Data[], defined: (data: Data) => boolean, name: Name) => Data[];
 type IndexFromDataScale = ScaleIdentity | ScaleTime<unknown, unknown> | ScaleContinuousNumeric<unknown, unknown> | ScaleBand<{}> | ScalePoint<{}>;
-export declare const getIndexFromData: <Key extends string, Data extends { [key in Key]: number; } = { [key_1 in Key]: number; }, Scale extends IndexFromDataScale = IndexFromDataScale>(data: Data[], scale: Scale, key: Key, value: number) => string | number | null;
+export declare const getIndexFromData: <Key extends string, Data extends { [key in Key]: number; } = { [key in Key]: number; }, Scale extends IndexFromDataScale = IndexFromDataScale>(data: Data[], scale: Scale, key: Key, value: number) => string | number | null;
 export declare const roundedPath: (x: number, y: number, w: number, h: number, r: number, tl?: boolean, tr?: boolean, bl?: boolean, br?: boolean) => string;
 export declare const scaleToBand: (scale: ScaleBand<{}>) => ScaleBand<{}> | ScaleBand<string>;
 export declare const memoize: <Func extends (...args: any[]) => any>(func: Func) => Func;
@@ -34,15 +34,15 @@ type BubbleChartDataItem = {
     x: number;
     y: number;
 };
-export declare const calculateBubbleDomain: (data: Array<BubbleChartDataItem>, key: 'x' | 'y', range: [number, number]) => [min: number, max: number];
-interface PlotEventEmitterEmit {
-    (event: 'setTooltipVisible', visible: boolean): void;
-    (event: 'setTooltipPosition', x: number, y: number): void;
-}
-type Unsubscribe = () => void;
-interface PlotEventEmitterSubscribe {
-    (event: 'setTooltipVisible', callback: (visible: boolean) => void): Unsubscribe;
-    (event: 'setTooltipPosition', callback: (x: number, y: number) => void): Unsubscribe;
-}
-export declare const PlotEventEmitter: typeof EventEmitter<PlotEventEmitterEmit, PlotEventEmitterSubscribe>;
+export declare const calculateBubbleDomain: (data: Array<BubbleChartDataItem>, key: "x" | "y", range: [number, number]) => [min: number, max: number];
+type CommonEvents = {
+    setTooltipVisible: (visible: boolean) => void;
+    setTooltipPosition: (x: number, y: number) => void;
+};
+type Events = {
+    [K in keyof CommonEvents as `${K}_${string}`]: CommonEvents[K];
+};
+export declare const PlotEventEmitter: {
+    new (): EventEmitter<Events, `setTooltipVisible_${string}` | `setTooltipPosition_${string}`, ((visible: boolean) => void) | ((x: number, y: number) => void)>;
+};
 export {};

package/package.json

@@ -1,28 +1,28 @@
 {
   "name": "@semcore/d3-chart",
   "description": "Semrush D3 Chart Component",
-  "version": "3.61.0-prerelease.1",
+  "version": "3.61.0-prerelease.5",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.mjs",
-  "typings": "lib/types/index.d.ts",
+  "types": "lib/types/index.d.ts",
   "sideEffects": false,
   "author": "UI-kit team <ui-kit-team@semrush.com>",
   "license": "MIT",
   "exports": {
-    "require": "./lib/cjs/index.js",
+    "types": "./lib/types/index.d.ts",
     "import": "./lib/esm/index.mjs",
-    "types": "./lib/types/index.d.ts"
+    "require": "./lib/cjs/index.js"
   },
   "dependencies": {
     "@formatjs/intl": "2.3.0",
-    "@semcore/animation": "2.42.0-prerelease.1",
-    "@semcore/checkbox": "7.45.0-prerelease.1",
-    "@semcore/divider": "4.41.0-prerelease.1",
-    "@semcore/flex-box": "5.42.0-prerelease.1",
-    "@semcore/popper": "5.47.0-prerelease.1",
-    "@semcore/utils": "4.49.0-prerelease.1",
-    "@semcore/typography": "5.54.0-prerelease.1",
-    "@semcore/icon": "4.63.0-prerelease.1",
+    "@semcore/animation": "2.42.0-prerelease.5",
+    "@semcore/checkbox": "7.45.0-prerelease.5",
+    "@semcore/divider": "4.41.0-prerelease.5",
+    "@semcore/flex-box": "5.42.0-prerelease.5",
+    "@semcore/popper": "5.47.0-prerelease.5",
+    "@semcore/utils": "4.49.0-prerelease.5",
+    "@semcore/typography": "5.54.0-prerelease.5",
+    "@semcore/icon": "4.63.0-prerelease.5",
     "@types/d3-shape": "^3.1.0",
     "@upsetjs/venn.js": "1.4.2",
     "d3-array": "3.1.6",
@@ -36,7 +36,7 @@
     "hoist-non-react-statics": "3.3.2"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.40.0-prerelease.1",
+    "@semcore/core": "^2.40.0-prerelease.5",
     "react": "16.8 - 18",
     "react-dom": "16.8 - 18"
   },