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

package/src/components/FormElements/CustomTags/CustomTags.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, {
-  ChangeEvent,
-  FormEvent,
+  type ChangeEvent,
+  type FormEvent,
   useEffect,
   useRef,
   useState,
@@ -11,7 +11,7 @@ import { noop } from '../../../helpers/utils';
 import { useDebounce } from '../../../hooks/useDebounce/useDebounce';
 import { Button, ButtonContext } from '../../Buttons';
 import { IconName } from '../../Icons';
-import { BaseFormControl, BaseInputEvents } from '../Form.models';
+import type { BaseFormControl, BaseInputEvents } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';
 import classes from './CustomTags.scss';
 

package/src/components/FormElements/CustomTags/CustomTagsField.tsx

@@ -1,7 +1,7 @@
 import { useField } from 'formik';
 import React from 'react';
 import { useFormikError } from '../useFormikError';
-import { CustomTags, CustomTagsProps } from './CustomTags';
+import { CustomTags, type CustomTagsProps } from './CustomTags';
 
 export const CustomTagsField: React.FC<
   Omit<CustomTagsProps, 'error' | 'onChange'>

package/src/components/FormElements/DateTimeField/DateTimeText.spec.tsx

@@ -67,8 +67,7 @@ describe('DateTimeTextField', () => {
 
   it(`defaults to an empty string if prop value Wis 'null'`, () => {
     const { container } = render(
-      // @ts-expect-error intentional null value
-      <DateTimeText name={'test-name'} value={null} />,
+      <DateTimeText name={'test-name'} value={null as unknown as string} />,
     );
 
     const input = container.querySelector('input') as HTMLInputElement;

package/src/components/FormElements/DateTimeField/DateTimeText.stories.tsx

@@ -1,7 +1,7 @@
 import { faker } from '@faker-js/faker';
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
+import { action } from 'storybook/actions';
 import { createGroups } from '../../../helpers/storybook';
 import { DateTimeText } from './DateTimeText';
 

package/src/components/FormElements/DateTimeField/DateTimeText.tsx

@@ -9,7 +9,7 @@ import { Button, ButtonContext } from '../../Buttons';
 import { DateTimePicker } from '../../DateTime/DateTimePicker';
 import { IconName } from '../../Icons';
 import { formatDate, formatDateTime } from '../../Utils';
-import { BaseFormControl } from '../Form.models';
+import type { BaseFormControl } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';
 import classes from './DateTimeText.scss';
 

package/src/components/FormElements/DateTimeField/DateTimeTextField.tsx

@@ -2,7 +2,7 @@ import { useField } from 'formik';
 import { DateTime } from 'luxon';
 import React from 'react';
 import { useFormikError } from '../useFormikError';
-import { DateTimeText, DateTimeTextProps } from './DateTimeText';
+import { DateTimeText, type DateTimeTextProps } from './DateTimeText';
 /**
  * This component should be used to render a DateTimeTextField inside a Formik form.
  *

package/src/components/FormElements/Divider/Divider.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { createGroups } from '../../../helpers/storybook';
 import { Divider } from './Divider';
 

package/src/components/FormElements/DynamicDataListControl/DynamicDataListControl.spec.tsx

@@ -2,7 +2,7 @@ import { render } from '@testing-library/react';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { describe, expect, it, vi } from 'vitest';
-import { DynamicListColumn } from '../../DynamicDataList/DynamicDataList.model';
+import type { DynamicListColumn } from '../../DynamicDataList/DynamicDataList.model';
 import { DynamicDataListControl } from './DynamicDataListControl';
 
 const setFieldTouchedSpy = vi.fn();

package/src/components/FormElements/DynamicDataListControl/DynamicDataListControl.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 { createGroups, generateItemArray } from '../../../helpers/storybook';
-import { DynamicListColumn } from '../../DynamicDataList/DynamicDataList.model';
+import type { DynamicListColumn } from '../../DynamicDataList/DynamicDataList.model';
 import { DynamicDataListControl } from './DynamicDataListControl';
 
 interface DynamicListStoryData {

package/src/components/FormElements/DynamicDataListControl/DynamicDataListControl.tsx

@@ -1,11 +1,11 @@
 import clsx from 'clsx';
 import React from 'react';
-import { Data } from '../../../types/data';
+import type { Data } from '../../../types/data';
 import {
   DynamicDataList,
-  DynamicDataListProps,
+  type DynamicDataListProps,
 } from '../../DynamicDataList/DynamicDataList';
-import { BaseFormControl } from '../Form.models';
+import type { BaseFormControl } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';
 
 export type DynamicDataListControlProps<T extends Data> = BaseFormControl &

package/src/components/FormElements/DynamicDataListControl/DynamicDataListField.tsx

@@ -1,10 +1,10 @@
 import { useField } from 'formik';
-import React, { PropsWithChildren } from 'react';
-import { Data } from '../../../types/data';
+import React, { type PropsWithChildren } from 'react';
+import type { Data } from '../../../types/data';
 import { useFormikError } from '../useFormikError';
 import {
   DynamicDataListControl,
-  DynamicDataListControlProps,
+  type DynamicDataListControlProps,
 } from './DynamicDataListControl';
 
 /**

package/src/components/FormElements/FileUploadControl/FileUploadControl.scss

@@ -19,7 +19,10 @@
 
       margin-left: -50px;
       border: none;
-      background-color: var(--file-upload-button-bg-color, $file-upload-button-bg-color);
+      background-color: var(
+        --file-upload-button-bg-color,
+        $file-upload-button-bg-color
+      );
 
       transition: box-shadow 0.15s ease-in-out 0s;
 
@@ -35,12 +38,18 @@
 
       &:hover {
         border: none;
-        background-color: var(--file-upload-button-hover-bg-color, $file-upload-button-hover-bg-color);
+        background-color: var(
+          --file-upload-button-hover-bg-color,
+          $file-upload-button-hover-bg-color
+        );
       }
 
       &.disabled {
         border: none;
-        background-color: var(--file-upload-button-disabled-bg-color, $file-upload-button-disabled-bg-color);
+        background-color: var(
+          --file-upload-button-disabled-bg-color,
+          $file-upload-button-disabled-bg-color
+        );
         cursor: default;
 
         svg * {

package/src/components/FormElements/FileUploadControl/FileUploadControl.stories.tsx

@@ -1,7 +1,7 @@
 import { faker } from '@faker-js/faker';
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
+import { action } from 'storybook/actions';
 import { createGroups } from '../../../helpers/storybook';
 import { noop } from '../../../helpers/utils';
 import { FileUploadControl } from './FileUploadControl';

package/src/components/FormElements/FileUploadControl/FileUploadControl.tsx

@@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { noop } from '../../../helpers/utils';
 import { IconName, Icons } from '../../Icons';
 import { ProgressBar } from '../../ProgressBar';
-import { BaseFormControl } from '../Form.models';
+import type { BaseFormControl } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';
 import classes from './FileUploadControl.scss';
 

package/src/components/FormElements/FileUploadControl/FileUploadField.tsx

@@ -1,7 +1,7 @@
 import { useField } from 'formik';
 import React from 'react';
 import { useFormikError } from '../useFormikError';
-import { FileUploadControl, FileUploadProps } from './FileUploadControl';
+import { FileUploadControl, type FileUploadProps } from './FileUploadControl';
 
 export const FileUploadField: React.FC<
   Omit<FileUploadProps, 'onFileSelected' | 'error'>

package/src/components/FormElements/Form.models.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent, FormEvent, ReactNode } from 'react';
+import type { ChangeEvent, FormEvent, ReactNode } from 'react';
 
 export interface BaseFormElement {
   /** Form control id */

package/src/components/FormElements/FormElementContainer/FormElementContainer.stories.tsx

@@ -1,5 +1,5 @@
 import { faker } from '@faker-js/faker';
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { createGroups } from '../../../helpers/storybook';
 import { FormElementContainer } from './FormElementContainer';

package/src/components/FormElements/FormElementContainer/FormElementContainer.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
-import React, { CSSProperties } from 'react';
+import React, { type CSSProperties } from 'react';
 import { InfoTooltip } from '../../InfoTooltip';
-import { BaseFormElement } from '../Form.models';
+import type { BaseFormElement } from '../Form.models';
 import classes from './FormElementContainer.scss';
 
 export type FormElementContainerProps = BaseFormElement & {

package/src/components/FormElements/FormGroupTitle/FormGroupTitle.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { createGroups } from '../../../helpers/storybook';
 import { FormGroupTitle } from './FormGroupTitle';
 

package/src/components/FormElements/GenericField/GenericField.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BaseFormControl } from '../Form.models';
+import type { BaseFormControl } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';
 import { useFormikError } from '../useFormikError';
 

package/src/components/FormElements/Link/LinkField.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { createGroups } from '../../../helpers/storybook';
 import { LinkField } from './LinkField';
 

package/src/components/FormElements/Link/LinkField.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import React from 'react';
-import { BaseFormElement } from '../Form.models';
+import type { BaseFormElement } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';
 import classes from './LinkField.scss';
 

package/src/components/FormElements/MaskedSingleLineText/MaskedSingleLineText.stories.tsx

@@ -1,6 +1,6 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
+import { action } from 'storybook/actions';
 import { createGroups } from '../../../helpers/storybook';
 import { MaskedSingleLineText } from './MaskedSingleLineText';
 

package/src/components/FormElements/MaskedSingleLineText/MaskedSingleLineText.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { useIMask } from 'react-imask';
 import {
   SingleLineText,
-  SingleLineTextProps,
+  type SingleLineTextProps,
 } from '../SingleLineText/SingleLineText';
 
 export interface MaskedSingleLineTextProps

package/src/components/FormElements/MaskedSingleLineText/MaskedSingleLineTextField.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { useFormikError } from '../useFormikError';
 import {
   MaskedSingleLineText,
-  MaskedSingleLineTextProps,
+  type MaskedSingleLineTextProps,
 } from './MaskedSingleLineText';
 /**
  * This component should be used to render a Masked TextBox inside a Formik form.

package/src/components/FormElements/Radio/Radio.scss

@@ -37,7 +37,10 @@
 
         &.disabled {
           .radioOutline {
-            fill: var(--radio-disabled-outline-color, $radio-disabled-outline-color);
+            fill: var(
+              --radio-disabled-outline-color,
+              $radio-disabled-outline-color
+            );
           }
 
           .checked {

package/src/components/FormElements/Radio/Radio.spec.tsx

@@ -2,7 +2,7 @@ import { fireEvent, render, waitFor } from '@testing-library/react';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { describe, expect, it, vi } from 'vitest';
-import { Radio, RadioProps } from './Radio';
+import { Radio, type RadioProps } from './Radio';
 
 describe('Radio', () => {
   const defaultProps: RadioProps = {

package/src/components/FormElements/Radio/Radio.stories.tsx

@@ -1,7 +1,7 @@
 import { faker } from '@faker-js/faker';
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
+import { action } from 'storybook/actions';
 import { createGroups } from '../../../helpers/storybook';
 import { Radio } from './Radio';
 

package/src/components/FormElements/Radio/Radio.tsx

@@ -2,11 +2,11 @@ import clsx from 'clsx';
 import React, { useRef, useState } from 'react';
 import {
   ConfirmDialog,
-  ConfirmationConfig,
-  ConfirmationMode,
+  type ConfirmationConfig,
+  type ConfirmationMode,
 } from '../../ConfirmDialog';
 import { SvgElement } from '../../VisualElements/SvgElement';
-import { BaseFormControl, BaseInputEvents } from '../Form.models';
+import type { BaseFormControl, BaseInputEvents } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';
 import classes from './Radio.scss';
 

package/src/components/FormElements/Radio/RadioField.tsx

@@ -1,7 +1,7 @@
 import { useField } from 'formik';
 import React from 'react';
 import { useFormikError } from '../useFormikError';
-import { Radio, RadioProps } from './Radio';
+import { Radio, type RadioProps } from './Radio';
 
 export const RadioField: React.FC<
   Omit<RadioProps, 'error' | 'onChange'> & {

package/src/components/FormElements/ReadOnly/ReadOnlyField.stories.tsx

@@ -1,5 +1,5 @@
 import { faker } from '@faker-js/faker';
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { createGroups } from '../../../helpers/storybook';
 import {

package/src/components/FormElements/ReadOnly/ReadOnlyField.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import clsx from 'clsx';
-import React, { PropsWithChildren } from 'react';
-import { TransformerFunction } from '../../Utils';
-import { BaseFormElement } from '../Form.models';
+import React, { type PropsWithChildren } from 'react';
+import type { TransformerFunction } from '../../Utils';
+import type { BaseFormElement } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';
 import classes from './ReadOnlyField.scss';
 

package/src/components/FormElements/ReadOnlyText/ReadOnlyTextField.stories.tsx

@@ -1,5 +1,5 @@
 import { faker } from '@faker-js/faker';
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { createGroups } from '../../../helpers/storybook';
 import {

package/src/components/FormElements/ReadOnlyText/ReadOnlyTextField.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import clsx from 'clsx';
-import React, { PropsWithChildren } from 'react';
+import React, { type PropsWithChildren } from 'react';
 import { noop } from '../../../helpers/utils';
 import { Button, ButtonContext } from '../../Buttons';
 import { IconName } from '../../Icons';
-import { TransformerFunction } from '../../Utils';
-import { BaseFormElement } from '../Form.models';
+import type { TransformerFunction } from '../../Utils';
+import type { BaseFormElement } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';
 import classes from './ReadOnlyTextField.scss';
 

package/src/components/FormElements/Select/Select.stories.tsx

@@ -1,7 +1,7 @@
 import { faker } from '@faker-js/faker';
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
+import { action } from 'storybook/actions';
 import { createGroups } from '../../../helpers/storybook';
 import { Select } from './Select';
 

package/src/components/FormElements/Select/Select.tsx

@@ -1,10 +1,10 @@
-import { Popper, useAutocomplete, UseAutocompleteProps } from '@mui/base';
+import { Popper, useAutocomplete, type UseAutocompleteProps } from '@mui/base';
 import clsx from 'clsx';
-import React, { ChangeEvent } from 'react';
+import React, { type ChangeEvent } from 'react';
 import { noop } from '../../../helpers/utils';
 import { Button, ButtonContext } from '../../Buttons';
 import { IconName } from '../../Icons';
-import { BaseFormControl, BaseInputEvents } from '../Form.models';
+import type { BaseFormControl, BaseInputEvents } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';
 import classes from './Select.scss';
 

package/src/components/FormElements/Select/SelectField.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useFormikError } from '../useFormikError';
-import { Select, SelectProps } from './Select';
+import { Select, type SelectProps } from './Select';
 
 export const SelectField: React.FC<Omit<SelectProps, 'error'>> = (props) => {
   const error = useFormikError(props.name);

package/src/components/FormElements/SingleLineText/SingleLineText.stories.tsx

@@ -1,7 +1,7 @@
 import { faker } from '@faker-js/faker';
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
+import { action } from 'storybook/actions';
 import { createGroups } from '../../../helpers/storybook';
 import { SingleLineText } from './SingleLineText';
 

package/src/components/FormElements/SingleLineText/SingleLineText.tsx

@@ -1,12 +1,12 @@
 import clsx from 'clsx';
 import React, {
-  ChangeEvent,
-  InputHTMLAttributes,
+  type ChangeEvent,
+  type InputHTMLAttributes,
   useEffect,
   useRef,
 } from 'react';
 import { executeIfRefAvailable } from '../../../helpers/utils';
-import { BaseFormControl, BaseInputEvents } from '../Form.models';
+import type { BaseFormControl, BaseInputEvents } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';
 import classes from './SingleLineText.scss';
 

package/src/components/FormElements/SingleLineText/SingleLineTextField.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useFormikError } from '../useFormikError';
-import { SingleLineText, SingleLineTextProps } from './SingleLineText';
+import { SingleLineText, type SingleLineTextProps } from './SingleLineText';
 /**
  * This component should be used to render a TextBox inside a Formik form.
  *

package/src/components/FormElements/Tags/Tags.stories.tsx

@@ -1,7 +1,7 @@
 import { faker } from '@faker-js/faker';
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
+import { action } from 'storybook/actions';
 import { createGroups, generateItemArray } from '../../../helpers/storybook';
 import { Tags } from './Tags';
 

package/src/components/FormElements/Tags/Tags.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, {
-  ChangeEvent,
-  PropsWithChildren,
+  type ChangeEvent,
+  type PropsWithChildren,
   useEffect,
   useMemo,
   useRef,
@@ -11,9 +11,9 @@ import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import { noop } from '../../../helpers/utils';
 import { Button, ButtonContext } from '../../Buttons';
 import { IconName } from '../../Icons';
-import { BaseFormControl, BaseInputEvents } from '../Form.models';
+import type { BaseFormControl, BaseInputEvents } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';
-import { Select, SelectOption } from '../Select/Select';
+import { Select, type SelectOption } from '../Select/Select';
 import classes from './Tags.scss';
 
 export interface TagsProps<T = string>

package/src/components/FormElements/Tags/TagsField.tsx

@@ -1,6 +1,6 @@
-import React, { PropsWithChildren } from 'react';
+import React, { type PropsWithChildren } from 'react';
 import { useFormikError } from '../useFormikError';
-import { Tags, TagsProps } from './Tags';
+import { Tags, type TagsProps } from './Tags';
 export const TagsField = <T,>(
   props: PropsWithChildren<Omit<TagsProps<T>, 'error'>>,
 ): JSX.Element => {

package/src/components/FormElements/TextArea/TextArea.stories.tsx

@@ -1,7 +1,7 @@
 import { faker } from '@faker-js/faker';
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
+import { action } from 'storybook/actions';
 import { createGroups } from '../../../helpers/storybook';
 import { TextArea } from './TextArea';
 

package/src/components/FormElements/TextArea/TextArea.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
-import React, { FormEvent } from 'react';
-import { BaseFormControl } from '../Form.models';
+import React, { type FormEvent } from 'react';
+import type { BaseFormControl } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';
 import classes from './TextArea.scss';
 

package/src/components/FormElements/TextArea/TextAreaField.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useFormikError } from '../useFormikError';
-import { TextArea, TextAreaProps } from './TextArea';
+import { TextArea, type TextAreaProps } from './TextArea';
 /**
  * This component should be used to render a TextArea inside a Formik form.
  *

package/src/components/FormElements/ToggleButton/ToggleButton.scss

@@ -94,13 +94,29 @@
           }
         }
         &.off {
-          border-top: 1px solid var(--toggle-button-warning-border-color, $toggle-button-warning-border-color);
-          border-bottom: 1px solid var(--toggle-button-warning-border-color, $toggle-button-warning-border-color);
-          border-left: 1px solid var(--toggle-button-warning-border-color, $toggle-button-warning-border-color);
+          border-top: 1px solid
+            var(
+              --toggle-button-warning-border-color,
+              $toggle-button-warning-border-color
+            );
+          border-bottom: 1px solid
+            var(
+              --toggle-button-warning-border-color,
+              $toggle-button-warning-border-color
+            );
+          border-left: 1px solid
+            var(
+              --toggle-button-warning-border-color,
+              $toggle-button-warning-border-color
+            );
           transition: border $confirmation-transition linear;
         }
         &.on {
-          border: 1px solid var(--toggle-button-warning-border-color, $toggle-button-warning-border-color);
+          border: 1px solid
+            var(
+              --toggle-button-warning-border-color,
+              $toggle-button-warning-border-color
+            );
           transition: border $confirmation-transition linear;
         }
       }
@@ -108,19 +124,29 @@
       div.active.off {
         svg {
           .svgText {
-            fill: var(--toggle-button-warning-text-color, $toggle-button-warning-text-color);
+            fill: var(
+              --toggle-button-warning-text-color,
+              $toggle-button-warning-text-color
+            );
             transition: fill $confirmation-transition linear;
           }
         }
       }
 
       div.active.on {
-        background-color: var(--toggle-button-warning-bg-color, $toggle-button-warning-bg-color) !important;
+        background-color: var(
+          --toggle-button-warning-bg-color,
+          $toggle-button-warning-bg-color
+        ) !important;
         transition: background-color $confirmation-transition linear;
       }
 
       &:hover {
-        box-shadow: 0 0 0 2px var(--toggle-button-warning-hover-shadow-color, $toggle-button-warning-hover-shadow-color);
+        box-shadow: 0 0 0 2px
+          var(
+            --toggle-button-warning-hover-shadow-color,
+            $toggle-button-warning-hover-shadow-color
+          );
         transition: box-shadow $confirmation-transition linear;
       }
     }

package/src/components/FormElements/ToggleButton/ToggleButton.stories.tsx

@@ -1,7 +1,7 @@
 import { faker } from '@faker-js/faker';
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
+import { action } from 'storybook/actions';
 import { createGroups } from '../../../helpers/storybook';
 import { ToggleButton } from './ToggleButton';