@axinom/mosaic-ui 0.71.0 → 0.72.0-rc.3

package/dist/esm/initialize.d.ts

@@ -0,0 +1,26 @@
+import type { AddIndicator, CustomEventEmitter, RemoveIndicator, ShowNotification } from './types/ui-config';
+export declare enum SaveIndicatorType {
+    Saving = "saving",
+    Inactive = "inactive",
+    Dirty = "dirty"
+}
+export declare let showNotification: ShowNotification | (() => void);
+export declare let addIndicator: AddIndicator | (() => void);
+export declare let removeIndicator: RemoveIndicator | (() => void);
+export declare let on: CustomEventEmitter['on'] | (() => void);
+export declare let setTitle: (title?: string) => void;
+export declare let setSaveIndicator: (type: SaveIndicatorType) => void;
+/**
+ * Passes the PiralApi methods to the UI library.
+ * @param app {UiConfig} object containing PiralApi methods for use in UI library.
+ */
+export declare function initializeUi(app: UiConfig): void;
+export interface UiConfig {
+    showNotification: ShowNotification;
+    addIndicator: AddIndicator;
+    removeIndicator: RemoveIndicator;
+    on: CustomEventEmitter['on'];
+    setSaveIndicator: (type: SaveIndicatorType) => void;
+    setTitle: (title?: string) => void;
+}
+//# sourceMappingURL=initialize.d.ts.map

package/dist/esm/initialize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"initialize.d.ts","sourceRoot":"","sources":["../../src/initialize.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,YAAY,EACZ,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EACjB,MAAM,mBAAmB,CAAC;AAE3B,oBAAY,iBAAiB;IAC3B,MAAM,WAAW;IACjB,QAAQ,aAAa;IACrB,KAAK,UAAU;CAChB;AAED,eAAO,IAAI,gBAAgB,EAAE,gBAAgB,GAAG,CAAC,MAAM,IAAI,CAC7B,CAAC;AAE/B,eAAO,IAAI,YAAY,EAAE,YAAY,GAAG,CAAC,MAAM,IAAI,CAA4B,CAAC;AAEhF,eAAO,IAAI,eAAe,EAAE,eAAe,GAAG,CAAC,MAAM,IAAI,CAC5B,CAAC;AAE9B,eAAO,IAAI,EAAE,EAAE,kBAAkB,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,IAAI,CAAkB,CAAC;AAExE,eAAO,IAAI,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAA2B,CAAC;AAErE,eAAO,IAAI,gBAAgB,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAC5B,CAAC;AAE/B;;;GAGG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,QAAQ,GAAG,IAAI,CAShD;AAED,MAAM,WAAW,QAAQ;IACvB,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,YAAY,EAAE,YAAY,CAAC;IAC3B,eAAe,EAAE,eAAe,CAAC;IACjC,EAAE,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAC7B,gBAAgB,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACpD,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC"}

package/dist/esm/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/dist/esm/types/data.d.ts

@@ -0,0 +1,4 @@
+export interface Data {
+    [key: string]: any;
+}
+//# sourceMappingURL=data.d.ts.map

package/dist/esm/types/data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../../src/types/data.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,IAAI;IAEnB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB"}

package/dist/esm/types/index.d.ts

@@ -0,0 +1,4 @@
+export * from './data';
+export * from './types';
+export * from './ui-config';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC"}

package/dist/esm/types/types.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Creates a new type with the same properties as `Type`,
+ * but with all property values set to `undefined` and optional.
+ * @template Type - The type to negate.
+ *
+ * @example
+ * ```ts
+    interface Person {
+      name: string;
+      age: number;
+      email: string;
+    }
+    type EmptyPerson = Not<Person>;
+    const emptyPerson: EmptyPerson = {};
+    // The EmptyPerson type will be equivalent to:
+    {
+      name?: undefined;
+      age?: undefined;
+      email?: undefined,
+    }
+ * ```
+ */
+export type Not<Type> = {
+    [Property in keyof Type]?: undefined;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/esm/types/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,MAAM,GAAG,CAAC,IAAI,IAAI;KACrB,QAAQ,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,SAAS;CACrC,CAAC"}

package/dist/esm/types/ui-config.d.ts

@@ -0,0 +1,29 @@
+import type { Component, ReactNode } from 'react';
+export type ShowNotification = (notification: Notification) => NotificationId;
+export type UpdateNotification = (id: NotificationId, notification: Notification) => void;
+export type DismissNotification = (id: NotificationId) => void;
+export interface Notification {
+    /** Title shown in toast messages header */
+    title: string;
+    /** Optional body of the notification */
+    body?: NotificationBody;
+    /** Additional options for the notification */
+    options?: NotificationOptions;
+}
+export interface NotificationOptions {
+    /** Type of the notification */
+    type?: NotificationType;
+    /** Set to false to disable auto-closing of the notification, or specify a custom timeout in milliseconds */
+    autoClose?: number | false;
+}
+export type NotificationId = string | number;
+export type NotificationBody = string | ReactNode | Component;
+export type NotificationType = 'success' | 'error' | 'info' | 'warning';
+export type IndicatorId = number;
+export type AddIndicator = (content: React.ReactNode) => IndicatorId;
+export type RemoveIndicator = (id: IndicatorId) => void;
+export type UpdateIndicator = (id: IndicatorId, content: React.ReactNode) => void;
+export interface CustomEventEmitter {
+    on(eventName: string, listener: (...args: unknown[]) => void): void;
+}
+//# sourceMappingURL=ui-config.d.ts.map

package/dist/esm/types/ui-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-config.d.ts","sourceRoot":"","sources":["../../../src/types/ui-config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,MAAM,MAAM,gBAAgB,GAAG,CAAC,YAAY,EAAE,YAAY,KAAK,cAAc,CAAC;AAE9E,MAAM,MAAM,kBAAkB,GAAG,CAC/B,EAAE,EAAE,cAAc,EAClB,YAAY,EAAE,YAAY,KACvB,IAAI,CAAC;AAEV,MAAM,MAAM,mBAAmB,GAAG,CAAC,EAAE,EAAE,cAAc,KAAK,IAAI,CAAC;AAE/D,MAAM,WAAW,YAAY;IAC3B,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,mBAAmB,CAAC;CAC/B;AAED,MAAM,WAAW,mBAAmB;IAClC,+BAA+B;IAC/B,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,4GAA4G;IAC5G,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CAC5B;AAED,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,CAAC;AAE7C,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;AAE9D,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAExE,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC;AAEjC,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,KAAK,WAAW,CAAC;AAErE,MAAM,MAAM,eAAe,GAAG,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAC;AAExD,MAAM,MAAM,eAAe,GAAG,CAC5B,EAAE,EAAE,WAAW,EACf,OAAO,EAAE,KAAK,CAAC,SAAS,KACrB,IAAI,CAAC;AAEV,MAAM,WAAW,kBAAkB;IACjC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,GAAG,IAAI,CAAC;CACrE"}

package/dist/esm/utils/ErrorMapper/ApolloClient/ApolloErrorMapper.d.ts

@@ -0,0 +1,9 @@
+import type { ErrorMapper } from '../ErrorMapper.type';
+/**
+ * An error mapper that maps errors from the Apollo Client to more user friendly errors.
+ * @param error The error to map
+ * @param mappedError The error that was mapped by a previous error mapper
+ * @returns The mapped error or undefined if the error could not be mapped
+ */
+export declare const ApolloErrorMapper: ErrorMapper;
+//# sourceMappingURL=ApolloErrorMapper.d.ts.map

package/dist/esm/utils/ErrorMapper/ApolloClient/ApolloErrorMapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApolloErrorMapper.d.ts","sourceRoot":"","sources":["../../../../../src/utils/ErrorMapper/ApolloClient/ApolloErrorMapper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,EAAE,WAuB/B,CAAC"}

package/dist/esm/utils/ErrorMapper/ErrorMapper.d.ts

@@ -0,0 +1,15 @@
+import type { ErrorMapper } from './ErrorMapper.type';
+/**
+ * Sets the error mappers to use for mapping errors.
+ * By default the `ApolloErrorMapper` is registered.
+ * @param mappers an array of error mappers that should be used
+ */
+export declare const setErrorMappers: (mappers: ErrorMapper[]) => void;
+/**
+ * Uses the currently registered error mappers to map the given error.
+ * To register error mappers use the `setErrorMappers` function.
+ * @param error the error to map
+ * @returns the mapped error or the original error if no mapper was able to map the error
+ */
+export declare const mapError: ErrorMapper;
+//# sourceMappingURL=ErrorMapper.d.ts.map

package/dist/esm/utils/ErrorMapper/ErrorMapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorMapper.d.ts","sourceRoot":"","sources":["../../../../src/utils/ErrorMapper/ErrorMapper.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAItD;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,SAAS,WAAW,EAAE,KAAG,IAExD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,WAUtB,CAAC"}

package/dist/esm/utils/ErrorMapper/ErrorMapper.type.d.ts

@@ -0,0 +1,11 @@
+import type { ErrorType } from '../../components/models';
+export interface ErrorMapper {
+    /**
+     * Maps the given error to a new error.
+     * @param error the error to map
+     * @param currentlyMappedError the error that was mapped by a previous error mapper
+     * @returns the mapped error or undefined if the error could not be mapped
+     */
+    (error: ErrorType, currentlyMappedError?: ErrorType): ErrorType | undefined;
+}
+//# sourceMappingURL=ErrorMapper.type.d.ts.map

package/dist/esm/utils/ErrorMapper/ErrorMapper.type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorMapper.type.d.ts","sourceRoot":"","sources":["../../../../src/utils/ErrorMapper/ErrorMapper.type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEzD,MAAM,WAAW,WAAW;IAC1B;;;;;OAKG;IACH,CAAC,KAAK,EAAE,SAAS,EAAE,oBAAoB,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;CAC7E"}

package/dist/esm/utils/ErrorMapper/index.d.ts

@@ -0,0 +1,4 @@
+export * from './ApolloClient/ApolloErrorMapper';
+export * from './ErrorMapper';
+export * from './ErrorMapper.type';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/utils/ErrorMapper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/ErrorMapper/index.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC;AACjD,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC"}

package/dist/esm/utils/ErrorTypeToStationError.d.ts

@@ -0,0 +1,10 @@
+import type { ErrorType, StationError } from '../components/models';
+/**
+ * Converts an `ErrorType` object into a station error.
+ * @param error The error that should be converted. This is optional, so an error can be created, even if there is no original ErrorType object.
+ * @param defaultTitle The message that should be used as default title, in case the `ErrorType` object is no `StationError` that already defines a title.
+ * @param defaultBody The body that should be used in case the function can not infer the body of the message.
+ * @returns A station error object
+ */
+export declare const ErrorTypeToStationError: (originalError?: ErrorType, defaultTitle?: string, defaultBody?: string) => StationError;
+//# sourceMappingURL=ErrorTypeToStationError.d.ts.map

package/dist/esm/utils/ErrorTypeToStationError.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorTypeToStationError.d.ts","sourceRoot":"","sources":["../../../src/utils/ErrorTypeToStationError.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGpE;;;;;;GAMG;AACH,eAAO,MAAM,uBAAuB,GAClC,gBAAgB,SAAS,EACzB,qBAAmC,EACnC,cAAc,MAAM,KACnB,YA4CF,CAAC"}

package/dist/esm/utils/GenerateId.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A simple UUID generator. This is not a cryptographically secure generator.
+ * @returns UUID
+ */
+export declare const uuid: () => string;
+//# sourceMappingURL=GenerateId.d.ts.map

package/dist/esm/utils/GenerateId.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GenerateId.d.ts","sourceRoot":"","sources":["../../../src/utils/GenerateId.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,IAAI,QAAO,MAKvB,CAAC"}

package/dist/esm/utils/ToolTipHelpers.d.ts

@@ -0,0 +1,2 @@
+export declare const getTooltipText: (value: unknown) => string | undefined;
+//# sourceMappingURL=ToolTipHelpers.d.ts.map

package/dist/esm/utils/ToolTipHelpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolTipHelpers.d.ts","sourceRoot":"","sources":["../../../src/utils/ToolTipHelpers.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,GAAI,OAAO,OAAO,KAAG,MAAM,GAAG,SAaxD,CAAC"}

package/dist/esm/validators/index.d.ts

@@ -0,0 +1,2 @@
+export * from './timestamp/timestamp';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/validators/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/validators/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}

package/dist/esm/validators/timestamp/timestamp.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Checks if the value follows the Timestamp format: 00:00:00.000
+ * @param value - string to check
+ * @returns boolean
+ * @example timestampValidator('00:00:00.000')
+ */
+export declare const timestampValidator: (value: string) => boolean;
+//# sourceMappingURL=timestamp.d.ts.map

package/dist/esm/validators/timestamp/timestamp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timestamp.d.ts","sourceRoot":"","sources":["../../../../src/validators/timestamp/timestamp.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,GAAI,OAAO,MAAM,KAAG,OAIlD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.71.0",
+  "version": "0.72.0-rc.3",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -13,13 +13,20 @@
     "dist",
     "src"
   ],
-  "main": "dist/index.js",
-  "module": "dist/index.es.js",
-  "jsnext:main": "dist/index.es.js",
-  "types": "dist/index.d.ts",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "jsnext:main": "dist/esm/index.js",
+  "types": "dist/cjs/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/cjs/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    }
+  },
   "scripts": {
     "clean": "rimraf ./dist",
-    "build": "yarn clean && cross-env NODE_ENV=production rollup -c",
+    "build": "yarn clean && cross-env NODE_ENV=production rollup -c && node ../../scripts/write-esm-markers.js",
     "build:ci": "yarn workspaces focus && yarn build",
     "dev": "rollup -c -w",
     "test": "vitest run --silent",
@@ -27,12 +34,14 @@
     "test:coverage": "vitest run --coverage",
     "test:ci": "vitest run --reporter=default --reporter=junit --coverage --coverage.reporter=cobertura --coverage.reporter=html",
     "prettier": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\" --loglevel silent",
+    "ts:validate": "tsc && yarn build && yarn check:esm-interop",
+    "check:esm-interop": "node scripts/check-esm-interop.mjs",
     "lint": "eslint . --ext .ts,.tsx,.js --color --cache",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "cross-env STORYBOOK_A11Y=true storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@axinom/mosaic-core": "^0.4.33",
+    "@axinom/mosaic-core": "^0.4.34-rc.3",
     "@faker-js/faker": "^7.4.0",
     "@geoffcox/react-splitter": "^2.1.2",
     "@mui/base": "5.0.0-beta.40",
@@ -62,21 +71,17 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@mdx-js/react": "^1.6.22",
     "@optimize-lodash/rollup-plugin": "^4.0.1",
     "@rollup/plugin-commonjs": "^15.1.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@rollup/plugin-url": "^8.0.1",
-    "@storybook/addon-essentials": "^7.0.6",
-    "@storybook/addon-interactions": "^7.0.6",
-    "@storybook/addon-links": "^7.0.6",
-    "@storybook/addon-storysource": "^7.0.6",
-    "@storybook/addons": "^7.0.6",
+    "@storybook/addon-a11y": "10.4.2",
+    "@storybook/addon-docs": "^10.4.2",
+    "@storybook/addon-links": "^10.4.2",
+    "@storybook/addon-webpack5-compiler-babel": "^4.0.1",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^7.0.6",
-    "@storybook/react-webpack5": "^7.0.6",
-    "@storybook/testing-library": "^0.1.0",
-    "@storybook/theming": "^7.0.6",
+    "@storybook/react": "^10.4.2",
+    "@storybook/react-webpack5": "^10.4.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
@@ -104,7 +109,7 @@
     "rollup-plugin-visualizer": "^5.8.3",
     "sass": "^1.57.1",
     "sass-loader": "^12.3.0",
-    "storybook": "^7.0.6",
+    "storybook": "^10.4.2",
     "style-loader": "^3.3.1",
     "typescript": "^5.9.3",
     "typescript-plugin-css-modules": "^5.0.2",
@@ -113,5 +118,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "75dcfd9bf92de1ef72a28f073e43a7dfaa7b430b"
+  "gitHead": "9c7831acd6fcced9a09f97ffd4c9d67ee1b3b640"
 }

package/src/components/Accordion/Accordion.scss

@@ -33,7 +33,8 @@
       color: var(--accordion-header-text-color, $accordion-header-text-color);
       font-weight: bold;
 
-      border-bottom: solid 1px var(--accordion-header-border-color, $accordion-header-border-color);
+      border-bottom: solid 1px
+        var(--accordion-header-border-color, $accordion-header-border-color);
 
       top: 0;
       position: sticky;

package/src/components/Accordion/Accordion.stories.tsx

@@ -1,7 +1,7 @@
 import { faker } from '@faker-js/faker';
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { shuffle } from 'lodash';
-import { default as React, ReactNode, useEffect, useState } from 'react';
+import { default as React, type ReactNode, useEffect, useState } from 'react';
 import { createGroups, generateItemArray } from '../../helpers/storybook';
 import { TextButton } from '../Buttons/TextButton/TextButton';
 import { Divider } from '../FormElements';

package/src/components/Accordion/Accordion.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import React, {
-  ReactElement,
+  type ReactElement,
   useEffect,
   useLayoutEffect,
   useState,
@@ -11,7 +11,7 @@ import { IconName } from '../Icons';
 import classes from './Accordion.scss';
 import {
   AccordionItem,
-  AccordionItemProps,
+  type AccordionItemProps,
 } from './AccordionItem/AccordionItem';
 
 interface ExpandedState {

package/src/components/Accordion/AccordionItem/AccordionItem.scss

@@ -4,7 +4,10 @@
   display: grid;
   grid-template-columns: 50px auto;
   align-items: center;
-  background-color: var(--accordion-item-row-background-color, $accordion-item-row-background-color);
+  background-color: var(
+    --accordion-item-row-background-color,
+    $accordion-item-row-background-color
+  );
   margin-top: 4px;
   height: 50px;
   cursor: pointer;
@@ -19,7 +22,10 @@
   }
 
   &.rowExpanded {
-    background-color: var(--accordion-item-row-expanded-background-color, $accordion-item-row-expanded-background-color);
+    background-color: var(
+      --accordion-item-row-expanded-background-color,
+      $accordion-item-row-expanded-background-color
+    );
   }
 
   &.sticky {

package/src/components/Actions/Action/Action.spec.tsx

@@ -9,11 +9,11 @@ import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { afterEach, describe, expect, it, test, vi } from 'vitest';
 import { noop } from '../../../helpers/utils';
-import { ConfirmationConfig } from '../../ConfirmDialog';
+import type { ConfirmationConfig } from '../../ConfirmDialog';
 import { IconName } from '../../Icons';
 import {
   Action,
-  ActionProps,
+  type ActionProps,
   isContextAction,
   isNavigationAction,
 } from './Action';

package/src/components/Actions/Action/Action.tsx

@@ -3,11 +3,11 @@ import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import {
   ConfirmDialog,
-  ConfirmationConfig,
+  type ConfirmationConfig,
   useConfirmationDelay,
 } from '../../ConfirmDialog';
 import { IconName, Icons } from '../../Icons';
-import {
+import type {
   ActionData,
   ContextActionData,
   NavigationActionData,

package/src/components/Actions/Action/index.ts

@@ -1 +1 @@
-export { Action, ActionProps } from './Action';
+export { Action, type ActionProps } from './Action';

package/src/components/Actions/Actions.models.ts

@@ -1,6 +1,6 @@
-import { Not } from '../../types';
-import { IconComponent } from '../Icons';
-import { ConfirmAction, DefaultHandler, LinkAction } from '../models';
+import type { Not } from '../../types';
+import type { IconComponent } from '../Icons';
+import type { ConfirmAction, DefaultHandler, LinkAction } from '../models';
 
 export type ActionData<THandler = DefaultHandler> =
   | ContextActionData<THandler>

package/src/components/Actions/Actions.spec.tsx

@@ -5,7 +5,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { useBusy } from '../../hooks/useBusy/useBusy';
 import { IconName } from '../Icons';
 import { Actions } from './Actions';
-import { ActionData } from './Actions.models';
+import type { ActionData } from './Actions.models';
 
 vi.mock('../../initialize');
 vi.mock('../../hooks/useBusy/useBusy', () => ({

package/src/components/Actions/Actions.stories.tsx

@@ -1,10 +1,10 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { MemoryRouter } from 'react-router';
+import { action } from 'storybook/actions';
 import { createGroups, generateItemArray } from '../../helpers/storybook';
-import { Actions, ActionsProps } from './Actions';
-import { ActionData } from './Actions.models';
+import { Actions, type ActionsProps } from './Actions';
+import type { ActionData } from './Actions.models';
 
 const groups = createGroups({
   Content: ['actions'],

package/src/components/Actions/Actions.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React from 'react';
 import { useBusy } from '../../hooks/useBusy/useBusy';
 import { Action } from './Action/Action';
-import { ActionData, ContextActionData } from './Actions.models';
+import type { ActionData, ContextActionData } from './Actions.models';
 import classes from './Actions.scss';
 
 export interface ActionsProps {

package/src/components/Actions/index.ts

@@ -1,2 +1,2 @@
-export { Actions, ActionsProps } from './Actions';
+export { Actions, type ActionsProps } from './Actions';
 export * from './Actions.models';

package/src/components/Buttons/Button/Button.model.ts

@@ -1,5 +1,5 @@
-import { IconComponent } from '../../Icons';
-import {
+import type { IconComponent } from '../../Icons';
+import type {
   ButtonIconOptions,
   CommonJsButtonOptions,
   CommonNavigationButtonOptions,

package/src/components/Buttons/Button/Button.scss

@@ -108,10 +108,17 @@
     }
 
     &:disabled {
-      border: 1px solid var(--button-context-disabled-border-color, $button-context-disabled-border-color);
+      border: 1px solid
+        var(
+          --button-context-disabled-border-color,
+          $button-context-disabled-border-color
+        );
 
       svg * {
-        stroke: var(--button-context-disabled-stroke-color, $button-context-disabled-stroke-color);
+        stroke: var(
+          --button-context-disabled-stroke-color,
+          $button-context-disabled-stroke-color
+        );
       }
     }
   }
@@ -146,7 +153,10 @@
       background-color: white;
 
       svg * {
-        stroke: var(--button-icon-active-stroke-color, $button-icon-active-stroke-color);
+        stroke: var(
+          --button-icon-active-stroke-color,
+          $button-icon-active-stroke-color
+        );
       }
     }
 
@@ -154,7 +164,10 @@
       border: none;
 
       svg * {
-        stroke: var(--button-icon-disabled-stroke-color, $button-icon-disabled-stroke-color);
+        stroke: var(
+          --button-icon-disabled-stroke-color,
+          $button-icon-disabled-stroke-color
+        );
       }
     }
   }
@@ -193,7 +206,10 @@
     }
 
     &:disabled {
-      background-color: var(--button-active-disabled-background-color, $button-active-disabled-background-color);
+      background-color: var(
+        --button-active-disabled-background-color,
+        $button-active-disabled-background-color
+      );
 
       svg * {
         opacity: 0.5;

package/src/components/Buttons/Button/Button.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { MemoryRouter } from 'react-router';
 import { enumToObj } from '../../../helpers/storybook';

package/src/components/Buttons/Button/Button.tsx

@@ -1,10 +1,10 @@
 import clsx from 'clsx';
-import React, { ForwardedRef } from 'react';
+import React, { type ForwardedRef } from 'react';
 import { Link } from 'react-router-dom';
 import { noop } from '../../../helpers/utils';
 import { IconName, Icons } from '../../Icons';
 import { ButtonContext } from '../Button.model';
-import {
+import type {
   ButtonProps,
   ContextButtonProps,
   NavigationButtonProps,

package/src/components/Buttons/Button/index.ts

@@ -1,2 +1,2 @@
 export { Button } from './Button';
-export { ButtonProps } from './Button.model';
+export type { ButtonProps } from './Button.model';

package/src/components/Buttons/Button.model.ts

@@ -1,6 +1,6 @@
-import { Not } from '../../types';
-import { IconComponent } from '../Icons';
-import { LinkAction } from '../models';
+import type { Not } from '../../types';
+import type { IconComponent } from '../Icons';
+import type { LinkAction } from '../models';
 
 /** Button's context type. This type defines the button's colors and border. */
 export enum ButtonContext {

package/src/components/Buttons/CompositeButton/CompositeButton.model.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   ButtonIconOptions,
   CommonJsButtonOptions,
   CommonNavigationButtonOptions,