@eccenca/gui-elements 25.2.0-rc.0 → 26.0.0-rc.0

package/src/components/Application/tests/ApplicationViewability.test.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { expect } from "@storybook/test";
 import { render } from "@testing-library/react";
 
 import "@testing-library/jest-dom";
@@ -11,7 +10,7 @@ import { Default as ApplicationViewabilityStory } from "./../stories/Application
 const applyViewabilityAndCheckClass = (props: Omit<ApplicationViewabilityProps, "children">) => {
     const { container } = render(<ApplicationViewability {...ApplicationViewabilityStory.args} {...props} />);
     const element = container.getElementsByClassName(
-        props.hide ? `${eccgui}-application__hide--${props.hide}` : `${eccgui}-application__show--${props.show}`
+        props.hide ? `${eccgui}-application__hide--${props.hide}` : `${eccgui}-application__show--${props.show}`,
     );
     expect(element.length).toBe(1);
     return element;
@@ -25,19 +24,14 @@ describe("ApplicationViewability", () => {
          * Looks like it is not too easy to include and test them.
          * So we only test for the correct CSS class.
          */
-        // console.log(window.getComputedStyle(element.item(0)??new Element).getPropertyValue("display"));
-        // waitFor(() => expect(element).toBeVisible());
     });
     it("should not be visible on `hide=screen`", () => {
         applyViewabilityAndCheckClass({ hide: "screen" });
-        // waitFor(() => expect(element).not.toBeVisible());
     });
     it("should be visible on `hide=print`", () => {
         applyViewabilityAndCheckClass({ hide: "print" });
-        // waitFor(() => expect(element).toBeVisible());
     });
     it("should not be visible on `show=print`", () => {
         applyViewabilityAndCheckClass({ show: "print" });
-        // waitFor(() => expect(element).not.toBeVisible());
     });
 });

package/src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -97,14 +97,14 @@ export interface CodeAutocompleteFieldProps {
      */
     fetchSuggestions: (
         inputString: string,
-        cursorPosition: number
+        cursorPosition: number,
     ) =>
         | (CodeAutocompleteFieldPartialAutoCompleteResult | undefined)
         | Promise<CodeAutocompleteFieldPartialAutoCompleteResult | undefined>;
     /** Checks if the input is valid
      */
     checkInput?: (
-        inputString: string
+        inputString: string,
     ) => CodeAutocompleteFieldValidationResult | Promise<CodeAutocompleteFieldValidationResult | undefined>;
     /** Called with the input validation result
      */
@@ -125,10 +125,10 @@ export interface CodeAutocompleteFieldProps {
      */
     useTabForCompletions?: boolean;
     /** An additional element that is put to the left side of the input field */
-    leftElement?: JSX.Element | null;
+    leftElement?: React.JSX.Element | null;
     /** An additional element that is put to the right side of the input field
      */
-    rightElement?: JSX.Element | null;
+    rightElement?: React.JSX.Element | null;
     /** Placeholder tobe shown when no text has been entered, yet. */
     placeholder?: string;
     /** If the horizontal scrollbars should be shown. */
@@ -208,7 +208,7 @@ export const CodeAutocompleteField = ({
     const validationRequestData = React.useRef<RequestMetaData>({ requestId: undefined });
     const errorMarkers = React.useRef<any[]>([]);
     const [validationResponse, setValidationResponse] = useState<CodeAutocompleteFieldValidationResult | undefined>(
-        undefined
+        undefined,
     );
     const [suggestionResponse, setSuggestionResponse] = useState<
         CodeAutocompleteFieldPartialAutoCompleteResult | undefined
@@ -218,7 +218,7 @@ export const CodeAutocompleteField = ({
         CodeAutocompleteFieldSuggestionWithReplacementInfo | undefined
     >(undefined);
     const [cm, setCM] = React.useState<EditorView>();
-    const currentCm = React.useRef<EditorView>();
+    const currentCm = React.useRef<EditorView>(undefined);
     currentCm.current = cm;
     const isFocused = React.useRef(false);
     const autoSuggestionDivRef = React.useRef<HTMLDivElement>(null);
@@ -343,7 +343,7 @@ export const CodeAutocompleteField = ({
                         length,
                     }));
                     newSuggestions = [...newSuggestions, ...replacementsWithMetaData];
-                }
+                },
             );
             editorState.suggestions = newSuggestions;
             setSuggestions(newSuggestions);
@@ -365,7 +365,7 @@ export const CodeAutocompleteField = ({
         return { fromOffset, toOffset };
     };
 
-    const inputActionsDisplayed = React.useCallback((node) => {
+    const inputActionsDisplayed = React.useCallback((node: any) => {
         if (!node) return;
         const width = node.offsetWidth;
         const slCodeEditor = node.parentElement.getElementsByClassName(`${eccgui}-singlelinecodeeditor`);
@@ -396,12 +396,12 @@ export const CodeAutocompleteField = ({
                 setPathValidationPending(false);
             }
         },
-        [checkInput]
+        [checkInput],
     );
 
     const checkValuePathValidity = useMemo(
         () => debounce((inputString: string) => asyncCheckInput(inputString), validationRequestDelay),
-        [asyncCheckInput, validationRequestDelay]
+        [asyncCheckInput, validationRequestDelay],
     );
 
     const asyncHandleEditorInputChange = useMemo(
@@ -418,7 +418,7 @@ export const CodeAutocompleteField = ({
                 if (cursorLine) {
                     const result: CodeAutocompleteFieldPartialAutoCompleteResult | undefined = await fetchSuggestions(
                         inputString.split("\n")[cursorLine - 1], //line starts from 1
-                        cursorPosition
+                        cursorPosition,
                     );
                     if (value.current === inputString) {
                         setSuggestionResponse(result);
@@ -432,7 +432,7 @@ export const CodeAutocompleteField = ({
                 setSuggestionsPending(false);
             }
         },
-        [fetchSuggestions, cm]
+        [fetchSuggestions, cm],
     );
 
     const handleEditorInputChange = useMemo(
@@ -440,9 +440,9 @@ export const CodeAutocompleteField = ({
             debounce(
                 (inputString: string, cursorPosition: number) =>
                     asyncHandleEditorInputChange(inputString, cursorPosition),
-                autoCompletionRequestDelay
+                autoCompletionRequestDelay,
             ),
-        [asyncHandleEditorInputChange, autoCompletionRequestDelay]
+        [asyncHandleEditorInputChange, autoCompletionRequestDelay],
     );
 
     const handleChange = React.useMemo(() => {
@@ -624,14 +624,14 @@ export const CodeAutocompleteField = ({
         (item: CodeAutocompleteFieldSuggestionWithReplacementInfo | undefined) => {
             setHighlightedElement(item);
         },
-        []
+        [],
     );
 
     const onSelection = React.useMemo(
         () => (ranges: IRange[]) => {
             selectedTextRanges.current = ranges;
         },
-        []
+        [],
     );
 
     const hasError = !!value.current && !pathIsValid && !pathValidationPending;

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/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"),

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,7 +1,7 @@
 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";
@@ -34,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();