@eccenca/gui-elements 25.1.0-rc.4 → 25.2.0-featureupgradeblueprintjsv6cmem7139.0

package/src/components/AutoSuggestion/AutoSuggestionList.tsx

@@ -44,7 +44,7 @@ const ListItem = ({ item }: any, ref: any) => {
                     </OverflowText>
                 </OverviewItemLine>
                 {item.label ? (
-                    <OverviewItemLine small={true} >
+                    <OverviewItemLine small={true}>
                         <OverflowText>
                             <Highlighter label={item.label} searchValue={item.query} />
                         </OverflowText>
@@ -86,9 +86,11 @@ export const AutoSuggestionList = ({
     offsetValues,
     ...otherDivProps
 }: AutoSuggestionListProps) => {
-    const [hoveredItem, setHoveredItem] = React.useState<CodeAutocompleteFieldSuggestionWithReplacementInfo | undefined>(undefined);
+    const [hoveredItem, setHoveredItem] = React.useState<
+        CodeAutocompleteFieldSuggestionWithReplacementInfo | undefined
+    >(undefined);
     // Refs of list items
-    const [refs] = React.useState<React.RefObject<Element>[]>([]);
+    const [refs] = React.useState<React.RefObject<Element | null>[]>([]);
     const dropdownRef = React.useRef<HTMLDivElement>(null);
     const generateRef = (index: number) => {
         if (!refs[index]) {

package/src/components/AutoSuggestion/ExtendedCodeEditor.tsx

@@ -82,8 +82,8 @@ export const ExtendedCodeEditor = ({
     onCursorChange,
     onSelection,
     codeEditorProps,
-    height, 
-    readOnly
+    height,
+    readOnly,
 }: ExtendedCodeEditorProps) => {
     const initialContent = React.useRef(multiline ? initialValue : initialValue.replace(/[\r\n]/g, " "));
     const multilineExtensions = multiline

package/src/components/AutoSuggestion/extensions/markText.ts

@@ -56,7 +56,7 @@ export const removeMarkFromText = (config: marksConfig) => {
 
     dispatch({
         effects: filterMarks?.of(
-            ((from: number, to: number) => to <= config.from || from >= config.to) as unknown as null
+            ((from: number, to: number) => to <= config.from || from >= config.to) as unknown as null,
         ),
     });
 };

package/src/components/AutocompleteField/AutoCompleteField.tsx

@@ -63,8 +63,8 @@ export interface SuggestFieldProps<T, UPDATE_VALUE> {
         item: T,
         query: string,
         modifiers: SuggestFieldItemRendererModifierProps,
-        handleClick: () => any
-    ): string | JSX.Element;
+        handleClick: () => any,
+    ): string | React.JSX.Element;
 
     /** Renders the string that should be displayed in the input field after the item has been selected.
      */
@@ -121,8 +121,8 @@ export interface SuggestFieldProps<T, UPDATE_VALUE> {
         itemRenderer: (
             query: string,
             modifiers: SuggestFieldItemRendererModifierProps,
-            handleClick: React.MouseEventHandler<HTMLElement>
-        ) => JSX.Element | undefined;
+            handleClick: React.MouseEventHandler<HTMLElement>,
+        ) => React.JSX.Element | undefined;
 
         /** If the new item option will always be shown as the first entry in the suggestion list, else it will be the last entry.
          * @default false
@@ -160,19 +160,10 @@ export interface SuggestFieldProps<T, UPDATE_VALUE> {
     loadMoreResults?: () => Promise<T[] | undefined>;
 }
 
-SuggestField.defaultProps = {
-    autoFocus: false,
-    disabled: false,
-    onlyDropdownWithQuery: false, // FIXME: this should be `true` by default, otherwise similarity to `<Select />` is very close
-    fill: true,
-    requestErrorPrefix: "",
-    hasBackDrop: false,
-};
-
 /**
  * A component with the appearance of an input field that allows to select and optionally create new items.
  * It shows suggestions for the entered text from which the user can select any option.
- * 
+ *
  * It has the following fixed behavior:
  *
  * - When not focused, a different representation of the item value can be shown, e.g. the label of the value.
@@ -187,21 +178,21 @@ export function SuggestField<T, UPDATE_VALUE>(props: SuggestFieldProps<T, UPDATE
         className,
         reset,
         noResultText,
-        disabled,
-        onlyDropdownWithQuery,
+        disabled = false,
+        onlyDropdownWithQuery = false, // FIXME: this should be `true` by default, otherwise similarity to `<Select />` is very close
         itemValueSelector,
         itemRenderer,
         onSearch,
         onChange,
         initialValue,
-        autoFocus,
+        autoFocus = false,
         createNewItem,
         itemValueRenderer,
         resetQueryToValue,
         itemValueString,
-        requestErrorPrefix,
-        hasBackDrop,
-        fill,
+        requestErrorPrefix = "",
+        hasBackDrop = false,
+        fill = true,
         loadMoreResults,
         ...otherProps
     } = props;
@@ -314,7 +305,7 @@ export function SuggestField<T, UPDATE_VALUE>(props: SuggestFieldProps<T, UPDATE
                 // Put selected item at the top if it is not in the result list
                 if (!!selectedItem && itemIndexOf(emptyStringResults, selectedItem) > -1) {
                     // Do not mutate original array
-                    const withoutSelected = [...emptyStringResults]
+                    const withoutSelected = [...emptyStringResults];
                     withoutSelected.splice(itemIndexOf(emptyStringResults, selectedItem), 1);
                     result = [selectedItem, ...withoutSelected];
                 } else {
@@ -334,7 +325,7 @@ export function SuggestField<T, UPDATE_VALUE>(props: SuggestFieldProps<T, UPDATE
     // Renders the item in the selection list
     const optionRenderer = (
         item: any,
-        { handleClick, modifiers, query }: { handleClick: any; modifiers: any; query: any }
+        { handleClick, modifiers, query }: { handleClick: any; modifiers: any; query: any },
     ) => {
         if (!modifiers.matchesPredicate) {
             return null;
@@ -441,7 +432,7 @@ export function SuggestField<T, UPDATE_VALUE>(props: SuggestFieldProps<T, UPDATE
               createNewItemRenderer: (
                   query: string,
                   active: boolean,
-                  handleClick: React.MouseEventHandler<HTMLElement>
+                  handleClick: React.MouseEventHandler<HTMLElement>,
               ) => {
                   if (selectedItem && query === itemValueString(selectedItem)) {
                       // Never show create new item option if the same item is already selected
@@ -470,7 +461,7 @@ export function SuggestField<T, UPDATE_VALUE>(props: SuggestFieldProps<T, UPDATE
                 }
             }
         },
-        [loadMoreResults]
+        [loadMoreResults],
     );
 
     return (
@@ -494,7 +485,7 @@ export function SuggestField<T, UPDATE_VALUE>(props: SuggestFieldProps<T, UPDATE
             query={query}
             // This leads to odd compile errors without "as any"
             popoverProps={updatedContextOverlayProps as any}
-            popoverContentProps={{className: "nodrag"}}
+            popoverContentProps={{ className: "nodrag" }}
             selectedItem={selectedItem}
             fill={fill}
             {...createNewItemProps}

package/src/components/AutocompleteField/autoCompleteFieldUtils.tsx

@@ -14,11 +14,15 @@ import { SuggestFieldItemRendererModifierProps } from "./interfaces";
  * @param iconName Optional icon to show left to the text.
  */
 export const createNewItemRendererFactory = (
-    itemTextRenderer: (query: string) => string | JSX.Element,
-    iconName?: ValidIconName | React.ReactElement<TestIconProps>
+    itemTextRenderer: (query: string) => string | React.JSX.Element,
+    iconName?: ValidIconName | React.ReactElement<TestIconProps>,
 ) => {
     // Return custom render function
-    return (query: string, modifiers: SuggestFieldItemRendererModifierProps, handleClick: React.MouseEventHandler<HTMLElement>) => {
+    return (
+        query: string,
+        modifiers: SuggestFieldItemRendererModifierProps,
+        handleClick: React.MouseEventHandler<HTMLElement>,
+    ) => {
         let textElement = itemTextRenderer(query);
         if (typeof textElement === "string") {
             textElement = (

package/src/components/Badge/Badge.stories.tsx

@@ -3,7 +3,7 @@ import { LogoReact } from "@carbon/icons-react";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../.storybook/helpers";
-import { Badge, Icon, TestIcon } from "../../../index";
+import { Badge, Icon, TestIcon } from "../../components";
 
 export default {
     title: "Components/Badge",

package/src/components/Breadcrumb/BreadcrumbList.tsx

@@ -11,7 +11,8 @@ import BreadcrumbItem from "./BreadcrumbItem";
 import { BreadcrumbItemProps } from "./BreadcrumbItem";
 
 export interface BreadcrumbListProps
-    extends TestableComponent,
+    extends
+        TestableComponent,
         Omit<
             BlueprintBreadcrumbsProps,
             // we remove some properties that are currently not necessary, required usage should be discussed
@@ -83,7 +84,7 @@ export const BreadcrumbList = ({
                 />
             );
         },
-        [onItemClick]
+        [onItemClick],
     );
 
     const renderCurrentBreadcrumb = React.useCallback((propsBreadcrumb: BreadcrumbItemProps) => {
@@ -97,7 +98,7 @@ export const BreadcrumbList = ({
                       minVisibleItems: otherBlueprintBreadcrumbsProps.items.length,
                   }
                 : {},
-        [ignoreOverflow, otherBlueprintBreadcrumbsProps.items.length]
+        [ignoreOverflow, otherBlueprintBreadcrumbsProps.items.length],
     );
 
     const breadcrumbs = (

package/src/components/Breadcrumb/breadcrumb.scss

@@ -19,8 +19,8 @@ $eccgui-color-breadcrumb-link: $eccgui-color-accent !default;
         width: $eccgui-size-block-whitespace;
         height: auto;
         margin: 0;
-        text-align: center;
         vertical-align: middle;
+        text-align: center;
         content: ">";
         background: none;
     }
@@ -61,8 +61,8 @@ $eccgui-color-breadcrumb-link: $eccgui-color-accent !default;
 .#{$eccgui}-breadcrumb__item {
     display: inline-block;
     overflow: hidden;
-    font-size: inherit;
     text-overflow: ellipsis;
+    font-size: inherit;
 
     a {
         @extend .#{$eccgui}-breadcrumb__item;

package/src/components/Button/Button.test.tsx

@@ -19,7 +19,7 @@ describe("Button", () => {
         const { container } = render(
             <Button {...FullExample.args} icon={"item-viewdetails"}>
                 Left icon
-            </Button>
+            </Button>,
         );
         expect(screen.getByRole("button").lastChild).toEqual(screen.getByText(/left icon/i));
         expect(container.getElementsByClassName(`${eccgui}-icon`).length).toBe(1);
@@ -29,7 +29,7 @@ describe("Button", () => {
         const { container } = render(
             <Button {...FullExample.args} rightIcon={<Icon name={"item-download"} />}>
                 Right icon
-            </Button>
+            </Button>,
         );
         expect(screen.getByRole("button").firstChild).toEqual(screen.getByText(/right icon/i));
         expect(container.getElementsByClassName(`${eccgui}-icon`).length).toBe(1);

package/src/components/Button/Button.tsx

@@ -47,7 +47,7 @@ interface AdditionalButtonProps {
     /**
      * takes in either a string of text or a react element to display as a tooltip when the button is hovered.
      */
-    tooltip?: string | JSX.Element | null;
+    tooltip?: string | React.JSX.Element | null;
     /**
      * Object with additional properties for the tooltip.
      */
@@ -55,19 +55,17 @@ interface AdditionalButtonProps {
     /**
      * Icon displayed on button start.
      */
-    icon?: ValidIconName | JSX.Element;
+    icon?: ValidIconName | React.JSX.Element;
     /**
      * Icon displayed on button end.
      */
-    rightIcon?: ValidIconName | JSX.Element;
+    rightIcon?: ValidIconName | React.JSX.Element;
 }
 
 interface ExtendedButtonProps
-    extends AdditionalButtonProps,
-        Omit<BlueprintButtonProps, "intent" | "icon" | "rightIcon"> {}
+    extends AdditionalButtonProps, Omit<BlueprintButtonProps, "intent" | "icon" | "rightIcon"> {}
 interface ExtendedAnchorButtonProps
-    extends AdditionalButtonProps,
-        Omit<BlueprintAnchorButtonProps, "intent" | "icon" | "rightIcon"> {}
+    extends AdditionalButtonProps, Omit<BlueprintAnchorButtonProps, "intent" | "icon" | "rightIcon"> {}
 
 export type ButtonProps = ExtendedButtonProps & ExtendedAnchorButtonProps;
 
@@ -104,13 +102,18 @@ export const Button = ({
 
     const ButtonType = restProps.href ? BlueprintAnchorButton : BlueprintButton;
 
+    const iconSize = {
+        small: restProps["size"] === "small",
+        large: restProps["size"] === "large",
+    };
+
     const button = (
         <ButtonType
             {...restProps}
             className={`${eccgui}-button ` + className}
             intent={(intent || intentByFunction) as BlueprintIntent}
-            icon={typeof icon === "string" ? <Icon name={icon} /> : icon}
-            rightIcon={typeof rightIcon === "string" ? <Icon name={rightIcon} /> : rightIcon}
+            icon={typeof icon === "string" ? <Icon name={icon} {...iconSize} /> : icon}
+            rightIcon={typeof rightIcon === "string" ? <Icon name={rightIcon} {...iconSize} /> : rightIcon}
         >
             {children}
             {typeof badge !== "undefined" && (
@@ -137,8 +140,7 @@ export const Button = ({
 };
 
 interface constructBadgePropertiesProps
-    extends Pick<ButtonProps, "intent" | "badgeProps">,
-        Pick<BlueprintButtonProps, "minimal" | "outlined"> {}
+    extends Pick<ButtonProps, "intent" | "badgeProps">, Pick<BlueprintButtonProps, "minimal" | "outlined"> {}
 
 const constructBadgeProperties = ({ intent, minimal, outlined, badgeProps = {} }: constructBadgePropertiesProps) => {
     if (badgeProps.intent) return badgeProps;

package/src/components/Button/button.scss

@@ -9,7 +9,7 @@ $button-border-radius: $pt-border-radius;
 
 // $button-padding-small: 0 ($pt-grid-size * 0.7) !default;
 // $button-padding-large: ($pt-grid-size * 0.5) ($pt-grid-size * 1.5) !default;
-// $button-icon-spacing: ($pt-button-height - $pt-icon-size-standard) * 0.5 !default;
+$button-icon-spacing: $pt-grid-size * 0.5; // ($pt-button-height - $pt-icon-size-standard) * 0.5 !default;
 // $button-icon-spacing-large: ($pt-button-height-large - $pt-icon-size-large) * 0.5 !default;
 // $button-box-shadow: inset 0 0 0 $button-border-width rgba($black, 0.2), inset 0 (-$button-border-width) 0 rgba($black, 0.1) !default;
 // $button-box-shadow-active: inset 0 0 0 $button-border-width rgba($black, 0.2), inset 0 1px 2px rgba($black, 0.2) !default;
@@ -51,8 +51,7 @@ $dark-button-gradient: $button-gradient; // !default;
 
 $button-intents: (
     // default - hover - active
-    "primary":
-        (
+    "primary": (
             eccgui-color-var("identity", "brand", "900"),
             eccgui-color-mix(
                 eccgui-color-var("identity", "brand", "900"),
@@ -166,7 +165,9 @@ $button-intents: (
     // special case override: blueprint do not use configured colors here
     @include eccgui-enhance-blueprint-button-intent("primary");
     @include eccgui-enhance-blueprint-button-intent("accent");
+    @include eccgui-enhance-blueprint-button-intent("success");
     @include eccgui-enhance-blueprint-button-intent("warning");
+    @include eccgui-enhance-blueprint-button-intent("danger");
 }
 
 .#{$ns}-button-text {

package/src/components/Card/CardContent.tsx

@@ -15,23 +15,20 @@ export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
  * Holds the card content.
  * Display scrollbars in case there is not enough space for it.
  */
-export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(({
-    children,
-    className='',
-    noFlexHeight,
-    ...otherProps
-}: CardContentProps, ref) => {
-    return (
-        <div
-            {...otherProps}
-            ref={ref}
-            className={
-                `${eccgui}-card__content` +
-                (noFlexHeight ? ` ${eccgui}-card__content--noflexheight` : "") +
-                (className ? ` ${className}` : "")
-            }
-        >
-            {children}
-        </div>
-    );
-});
+export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(
+    ({ children, className = "", noFlexHeight, ...otherProps }: CardContentProps, ref) => {
+        return (
+            <div
+                {...otherProps}
+                ref={ref}
+                className={
+                    `${eccgui}-card__content` +
+                    (noFlexHeight ? ` ${eccgui}-card__content--noflexheight` : "") +
+                    (className ? ` ${className}` : "")
+                }
+            >
+                {children}
+            </div>
+        );
+    },
+);

package/src/components/Card/CardHeader.tsx

@@ -8,7 +8,7 @@ import CardOptions from "./CardOptions";
 import CardTitle from "./CardTitle";
 
 export interface CardHeaderProps extends Omit<OverviewItemProps, "densityHigh" | "hasSpacing"> {
-    children: JSX.Element | (JSX.Element | undefined | null)[] | null | undefined;
+    children: React.JSX.Element | (React.JSX.Element | undefined | null)[] | null | undefined;
 }
 
 export const CardHeader = ({ children, className = "", ...otherProps }: CardHeaderProps) => {

package/src/components/Card/card.scss

@@ -38,10 +38,14 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
 
     &.#{$ns}-selected {
         background-color: $card-selected-background-color;
-        box-shadow: 0 0 0 3px eccgui-color-rgba($eccgui-color-accent, 0.2), 0 0 0 1px $eccgui-color-accent;
+        box-shadow:
+            0 0 0 3px eccgui-color-rgba($eccgui-color-accent, 0.2),
+            0 0 0 1px $eccgui-color-accent;
 
         &.#{$ns}-interactive {
-            box-shadow: 0 0 0 3px eccgui-color-rgba($eccgui-color-accent, 0.2), 0 0 0 1px $eccgui-color-accent;
+            box-shadow:
+                0 0 0 3px eccgui-color-rgba($eccgui-color-accent, 0.2),
+                0 0 0 1px $eccgui-color-accent;
 
             &:hover {
                 background-color: eccgui-color-mix($card-selected-background-color, $button-background-color-hover);
@@ -83,8 +87,8 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
     }
 
     .#{$eccgui}-card--whitespace-large > header > & {
-        padding: $eccgui-size-card-spacing $eccgui-size-card-spacing $eccgui-size-card-spacing $eccgui-size-card-spacing *
-            2;
+        padding: $eccgui-size-card-spacing $eccgui-size-card-spacing $eccgui-size-card-spacing
+            $eccgui-size-card-spacing * 2;
     }
 }
 

package/src/components/Card/stories/Card.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../../.storybook/helpers";
-import { Card, CardActions, CardContent, CardHeader, CardOptions, CardTitle, Divider } from "../../../../index";
+import { Card, CardActions, CardContent, CardHeader, CardOptions, CardTitle, Divider } from "../../../components";
 
 import { Default as CardActionsExample } from "./CardActions.stories";
 import { Default as CardContentExample } from "./CardContent.stories";

package/src/components/Chat/ChatArea.tsx

@@ -8,8 +8,7 @@ import { Spacing, SpacingProps } from "./../Separation/Spacing";
 import { ChatFieldProps } from "./ChatField";
 
 export interface ChatAreaProps
-    extends Omit<FlexibleLayoutContainerProps, "vertical" | "noEqualItemSpace">,
-        TestableComponent {
+    extends Omit<FlexibleLayoutContainerProps, "vertical" | "noEqualItemSpace">, TestableComponent {
     /**
      * The inut field for the chat.
      */

package/src/components/Chat/_chat.scss

@@ -1,5 +1,5 @@
 .#{$eccgui}-chat__content {
-    @extend .bp5-elevation-1;
+    @extend .#{$ns}-elevation-1;
 
     position: relative;
     z-index: 0;
@@ -32,7 +32,7 @@
         position: relative;
 
         &::before {
-            @extend .bp5-elevation-1;
+            @extend .#{$ns}-elevation-1;
 
             position: absolute;
             top: calc(#{mini-units(3)} - #{0.5 * $eccgui-size-block-whitespace});

package/src/components/Checkbox/Stories/Checkbox.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Checkbox, HtmlContentBlock } from "../../../../index";
+import { Checkbox, HtmlContentBlock } from "../../../components";
 
 export default {
     title: "Forms/Checkbox",

package/src/components/CodeAutocompleteField/CodeAutocompleteField.stories.tsx

@@ -1,15 +1,21 @@
 import React from "react";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 
+import { helpersArgTypes } from "../../../.storybook/helpers";
 import { CodeAutocompleteField, CodeAutocompleteFieldProps } from "../../../index";
 import { CodeAutocompleteFieldPartialAutoCompleteResult } from "../AutoSuggestion/AutoSuggestion";
 
 export default {
     title: "Forms/CodeAutocompleteField",
     component: CodeAutocompleteField,
-    argTypes: {},
+    argTypes: {
+        intent: {
+            ...helpersArgTypes.exampleIntent,
+            options: ["UNDEFINED", "primary", "accent", "success", "warning", "danger"],
+        },
+    },
     args: {
         onInputChecked: fn(),
     },
@@ -28,7 +34,7 @@ const defaultProps: CodeAutocompleteFieldProps = {
     initialValue: "",
     fetchSuggestions(
         inputString: string,
-        cursorPosition: number
+        cursorPosition: number,
     ):
         | CodeAutocompleteFieldPartialAutoCompleteResult
         | undefined

package/src/components/ColorField/ColorField.test.tsx

@@ -29,7 +29,7 @@ describe("ColorField", () => {
                         ["my-black", "#000000"],
                         ["my-white", "#ffffff"],
                     ]}
-                />
+                />,
             );
             // With default palette settings, a text input with readOnly is shown
             expect(container.querySelector("input[type='text']")).toBeInTheDocument();

package/src/components/ColorField/ColorField.tsx

@@ -1,6 +1,6 @@
 import React, { CSSProperties } from "react";
 import classNames from "classnames";
-import Color from "color";
+import { ColorLike } from "color";
 
 import { utils } from "../../common";
 import { getEnabledColorsProps } from "../../common/utils/colorHash";
@@ -14,7 +14,7 @@ import { TextField, TextFieldProps } from "../TextField";
 import { Tooltip } from "../Tooltip/Tooltip";
 import { WhiteSpaceContainer } from "../Typography";
 
-type ColorPresets = [string, string][] | [string, Color][];
+type ColorPresets = [string, string][] | [string, ColorLike][];
 type ColorPresetConfiguration = Pick<getEnabledColorsProps, "includeColorWeight" | "includePaletteGroup">;
 
 export interface ColorFieldProps extends Omit<TextFieldProps, "invisibleCharacterWarning"> {
@@ -108,7 +108,7 @@ export const ColorField = ({
                     )}
                     <FieldSet>
                         <TagList className={`${eccgui}-colorfield__palette`}>
-                            {colorPresets!.map((color: [string, string | Color], idx: number) => [
+                            {colorPresets!.map((color: [string, ColorLike], idx: number) => [
                                 <RadioButton
                                     key={idx}
                                     className={`${eccgui}-colorfield__palette__color`}
@@ -123,7 +123,7 @@ export const ColorField = ({
                                             large
                                             style={{ [`--eccgui-colorfield-palette-color`]: color[1] } as CSSProperties}
                                         >
-                                            {color[1]}
+                                            {typeof color[1] === "string" ? color[1] : color[1].toString()}
                                         </Tag>
                                     </Tooltip>
                                 </RadioButton>,
@@ -162,7 +162,7 @@ const listColorPalettePresets = (colorPaletteSet = defaultColorPaletteSet) => {
             ...colorPaletteSet,
             minimalColorDistance: 0, // we use all allowed colors, and do not check distances between them
         })
-        .map((color: [string, string | Color]) => [
+        .map((color: [string, ColorLike]) => [
             color[0].replace(`${eccgui}-color-palette-`, ""),
             color[1],
         ]) as ColorPresets;
@@ -180,7 +180,7 @@ ColorField.calculateColorHashValue = (
     options: calculateColorHashValueProps = {
         ...defaultColorPaletteSet,
         allowCustomColor: false,
-    }
+    },
 ) => {
     const hash = utils.textToColorHash({
         text,

package/src/components/ContentGroup/ContentGroup.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Badge, ContentGroup, HtmlContentBlock, IconButton, Tag } from "../../../index";
+import { Badge, ContentGroup, HtmlContentBlock, IconButton, Tag } from "../../components";
 
 export default {
     title: "Components/ContentGroup",

package/src/components/ContentGroup/ContentGroup.tsx

@@ -2,8 +2,6 @@ import React from "react";
 import classNames from "classnames";
 import Color from "color";
 
-import { TestableComponent } from "../../components/interfaces";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import {
     Divider,
     Icon,
@@ -17,7 +15,9 @@ import {
     Toolbar,
     ToolbarSection,
     Tooltip,
-} from "../index";
+} from "../../components";
+import { TestableComponent } from "../../components/interfaces";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface ContentGroupProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, TestableComponent {
     /**
@@ -128,7 +128,7 @@ export const ContentGroup = ({
                 acc.push(
                     `${color.rgb().toString()} ` +
                         `${(index / borderColors.length) * 100}% ` +
-                        `${((index + 1) / borderColors.length) * 100}%`
+                        `${((index + 1) / borderColors.length) * 100}%`,
                 );
             } catch {
                 // eslint-disable-next-line no-console
@@ -162,12 +162,12 @@ export const ContentGroup = ({
                                 "h" +
                                     Math.min(
                                         Math.max(minimumHeadlineLevel, level + minimumHeadlineLevel),
-                                        6
+                                        6,
                                     ).toString(),
                                 {
                                     children: <OverflowText>{title}</OverflowText>,
                                     className: `${eccgui}-contentgroup__header__title`,
-                                }
+                                },
                             )}
                             {description && (
                                 <>