@true-engineering/true-react-common-ui-kit 2.6.0 → 3.0.0-alpha.0

package/src/components/Select/components/SelectList/SelectList.tsx

@@ -1,20 +1,19 @@
 import { ReactNode, useMemo, MouseEvent } from 'react';
 import clsx from 'clsx';
 import {
+  addDataTestId,
   isNotEmpty,
   isReactNodeNotEmpty,
   isStringNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
-import { useTheme } from '../../../../hooks';
 import { ICommonProps } from '../../../../types';
 import { ScrollIntoViewIfNeeded } from '../../../ScrollIntoViewIfNeeded';
 import { ALL_OPTION_INDEX, DEFAULT_OPTION_INDEX } from '../../constants';
 import { IMultipleSelectValue } from '../../types';
 import { SelectListItem } from '../SelectListItem';
-import { SelectListStyles, styles } from './SelectList.styles';
+import { useStyles, ISelectListStyles } from './SelectList.styles';
 
-export interface ISelectListProps<Value> extends ICommonProps {
-  tweakStyles?: SelectListStyles;
+export interface ISelectListProps<Value> extends ICommonProps<ISelectListStyles> {
   options: Value[];
   focusedIndex?: number;
   activeValue?: Value | Value[];
@@ -22,7 +21,6 @@ export interface ISelectListProps<Value> extends ICommonProps {
   isLoading?: boolean;
   loadingLabel?: ReactNode;
   defaultOptionLabel?: string;
-  testId?: string;
   allOptionsLabel?: string;
   areAllOptionsSelected?: boolean;
   shouldScrollToList?: boolean;
@@ -56,7 +54,8 @@ export function SelectList<Value>({
   convertValueToReactNode = convertValueToString,
   convertValueToId,
 }: ISelectListProps<Value>): JSX.Element {
-  const { classes } = useTheme('SelectList', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
+
   const isMultiSelect = isNotEmpty(onToggleCheckbox);
   const multiSelectValue = activeValue as IMultipleSelectValue<Value> | undefined;
   const selectedOptionsCount = multiSelectValue?.length ?? 0;
@@ -93,7 +92,7 @@ export function SelectList<Value>({
       {isReactNodeNotEmpty(customListHeader) && (
         <div className={classes.listHeader}>{customListHeader}</div>
       )}
-      <div className={classes.list} data-testid={testId}>
+      <div className={classes.list} {...addDataTestId(testId)}>
         {isLoading ? (
           <div className={clsx(classes.cell, classes.loading)}>{loadingLabel}</div>
         ) : (

package/src/components/Select/components/SelectList/index.ts

@@ -1,2 +1,2 @@
 export * from './SelectList';
-export type { SelectListStyles } from './SelectList.styles';
+export type { ISelectListStyles } from './SelectList.styles';

package/src/components/Select/components/SelectListItem/SelectListItem.styles.ts

@@ -1,7 +1,7 @@
-import { CheckboxStyles } from '../../../Checkbox';
+import { ICheckboxStyles } from '../../../Checkbox';
 import { CELL_PADDING } from '../SelectList/SelectList.styles';
 
-export const checkboxStyles: CheckboxStyles = {
+export const checkboxStyles: ICheckboxStyles = {
   root: {
     padding: CELL_PADDING,
     width: '100%',

package/src/components/Select/components/SelectListItem/SelectListItem.tsx

@@ -14,7 +14,7 @@ export interface ISelectListItemProps {
   isActive?: boolean;
   isFocused?: boolean;
   children: ReactNode;
-  classes: Classes<'cellWithCheckbox' | 'cell' | 'focused' | 'active' | 'disabled'>;
+  classes: Classes<'cellWithCheckbox' | 'cell' | 'focused' | 'active' | 'disabled'>; // TODO: !!!
   onOptionSelect(index: number, event: MouseEvent<HTMLElement>): void;
   onToggleCheckbox?(index: number, isSelected: boolean): void;
 }

package/src/components/Select/helpers.ts

@@ -7,9 +7,10 @@ export const defaultIsOptionDisabled = <Value>(option: Value): boolean =>
   option !== null &&
   ((option as { isDisabled?: boolean })?.isDisabled ?? false);
 
-export const defaultConvertFunction = (v: unknown) => (v === undefined ? undefined : String(v));
+export const defaultConvertFunction = (v: unknown): string | undefined =>
+  v === undefined ? undefined : String(v);
 
-export const defaultCompareFunction = <Value>(v1: Value, v2: Value) => v1 === v2;
+export const defaultCompareFunction = <Value>(v1: Value, v2: Value): boolean => v1 === v2;
 
 export const getDefaultConvertToIdFunction =
   <Value>(

package/src/components/Select/index.ts

@@ -1,4 +1,4 @@
 export * from './Select';
 export * from './types';
-export type { SelectStyles } from './Select.styles';
-export type { SelectListStyles } from './components';
+export type { ISelectStyles } from './Select.styles';
+export type { ISelectListStyles } from './components';

package/src/components/SmartInput/SmartInput.stories.tsx

@@ -2,10 +2,10 @@ import { useState } from 'react';
 import { ComponentStory } from '@storybook/react';
 import { IInputProps } from '../Input';
 import { SmartInput } from './SmartInput';
-import { TSmartType } from './types';
+import { ISmartType } from './types';
 
 const types: Array<IInputProps['type']> = ['text', 'password', 'email', 'number'];
-const smartTypes: TSmartType[] = ['default', 'agencyName', 'surname', 'name', 'email'];
+const smartTypes: ISmartType[] = ['default', 'agencyName', 'surname', 'name', 'email'];
 
 export default {
   title: 'Inputs/SmartInput',

package/src/components/SmartInput/SmartInput.tsx

@@ -2,11 +2,11 @@ import { useState, useEffect, forwardRef, FormEvent, ClipboardEvent } from 'reac
 import { Input, IInputProps } from '../Input';
 import { CharactersMap, SMART_INPUT_REGEX_MAP, TransliterationMap } from './constants';
 import { transformCaseSensitive } from './helpers';
-import { TSmartType } from './types';
+import { ISmartType } from './types';
 
 export interface ISmartInputProps extends IInputProps {
   isUpperCase?: boolean;
-  smartType?: TSmartType;
+  smartType?: ISmartType;
   regExp?: RegExp;
   onChange: (value: string) => void;
 }

package/src/components/SmartInput/helpers.ts

@@ -1,7 +1,7 @@
-import { TSmartType } from './types';
+import { ISmartType } from './types';
 
 export const transformCaseSensitive = (
-  smartType: TSmartType,
+  smartType: ISmartType,
   map: { [key: string]: string },
   symbol: string,
 ): string => {

package/src/components/SmartInput/types.ts

@@ -1,4 +1,4 @@
-export type TSmartType =
+export type ISmartType =
   | 'name'
   | 'nameRuEn'
   | 'surname'

package/src/components/Switch/Switch.styles.ts

@@ -1,6 +1,6 @@
-import { ComponentStyles } from '../../types';
+import { ITweakStyles, createThemedStyles } from '../../theme';
 
-export const styles = {
+export const useStyles = createThemedStyles('Switch', {
   root: {
     display: 'flex',
     alignItems: 'center',
@@ -70,6 +70,6 @@ export const styles = {
   labelRight: {
     marginLeft: 12,
   },
-};
+});
 
-export type SwitchStyles = ComponentStyles<typeof styles>;
+export type ISwitchStyles = ITweakStyles<typeof useStyles>;

package/src/components/Switch/Switch.tsx

@@ -2,13 +2,11 @@ import { ReactNode } from 'react';
 import clsx from 'clsx';
 import { addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
-import { useTheme } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { ISwitchState } from './types';
-import { styles, SwitchStyles } from './Switch.styles';
+import { useStyles, ISwitchStyles } from './Switch.styles';
 
-export interface ISwitchProps<V extends string> extends ICommonProps {
-  tweakStyles?: SwitchStyles;
+export interface ISwitchProps<V extends string> extends ICommonProps<ISwitchStyles> {
   children?: ReactNode;
   value: V;
   isChecked: boolean;
@@ -22,7 +20,6 @@ export interface ISwitchProps<V extends string> extends ICommonProps {
    * @default `primary`
    */
   color?: 'primary' | 'secondary';
-  testId?: string;
   onChange(state: ISwitchState<V>): void;
 }
 
@@ -39,7 +36,7 @@ export const Switch = <V extends string>({
   testId,
   onChange,
 }: ISwitchProps<V>): JSX.Element => {
-  const { classes } = useTheme('Switch', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
 
   const handleChange = () => onChange({ name: value, isEnabled: !isChecked });
 

package/src/components/Switch/index.ts

@@ -1,3 +1,3 @@
 export * from './Switch';
 export * from './types';
-export type { SwitchStyles } from './Switch.styles';
+export type { ISwitchStyles } from './Switch.styles';

package/src/components/TextArea/TextArea.styles.ts

@@ -1,8 +1,8 @@
-import { ComponentStyles } from '../../types';
+import { ITweakStyles, createThemedStyles } from '../../theme';
 
 const PADDING_X = 12;
 
-export const styles = {
+export const useStyles = createThemedStyles('TextArea', {
   root: {
     width: '100%',
     height: '100%',
@@ -148,6 +148,6 @@ export const styles = {
     paddingTop: 4,
     paddingLeft: 13,
   },
-};
+});
 
-export type TextAreaStyles = ComponentStyles<typeof styles>;
+export type ITextAreaStyles = ITweakStyles<typeof useStyles>;

package/src/components/TextArea/TextArea.tsx

@@ -10,12 +10,10 @@ import {
 } from 'react';
 import clsx from 'clsx';
 import { addDataAttributes, trimStringToMaxLength } from '../../helpers';
-import { useTheme } from '../../hooks';
 import { ICommonProps } from '../../types';
-import { styles, TextAreaStyles } from './TextArea.styles';
+import { useStyles, ITextAreaStyles } from './TextArea.styles';
 
-export interface ITextAreaProps extends ICommonProps {
-  tweakStyles?: TextAreaStyles;
+export interface ITextAreaProps extends ICommonProps<ITextAreaStyles> {
   value?: string;
   label?: string;
   placeholder?: string;
@@ -33,7 +31,6 @@ export interface ITextAreaProps extends ICommonProps {
   shouldTrimAfterMaxLength?: boolean;
   maxLength?: number;
   rows?: number;
-  testId?: string;
   onChange(value: string, event?: FormEvent<HTMLTextAreaElement>): void;
   onFocus?(event: FocusEvent<HTMLTextAreaElement>): void;
   onBlur?(event: FocusEvent<HTMLTextAreaElement>): void;
@@ -68,7 +65,7 @@ export const TextArea: FC<ITextAreaProps> = ({
   onFocus,
   onBlur,
 }) => {
-  const { classes } = useTheme('TextArea', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
   const [isFocused, setFocused] = useState(false);
   const ref = useRef<HTMLTextAreaElement>(null);
 

package/src/components/TextArea/index.ts

@@ -1,2 +1,2 @@
 export * from './TextArea';
-export type { TextAreaStyles } from './TextArea.styles';
+export type { ITextAreaStyles } from './TextArea.styles';

package/src/components/TextWithInfo/TextWithInfo.styles.ts

@@ -1,7 +1,6 @@
-import { colors } from '../../theme';
-import { ComponentStyles } from '../../types';
+import { colors, ITweakStyles, createThemedStyles } from '../../theme';
 
-export const styles = {
+export const useStyles = createThemedStyles('TextWithInfo', {
   root: {
     display: 'inline-block',
     height: 40,
@@ -55,6 +54,6 @@ export const styles = {
       },
     },
   },
-};
+});
 
-export type TextWithInfoStyles = ComponentStyles<typeof styles>;
+export type ITextWithInfoStyles = ITweakStyles<typeof useStyles>;

package/src/components/TextWithInfo/TextWithInfo.tsx

@@ -1,14 +1,13 @@
 import { FC } from 'react';
 import clsx from 'clsx';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
-import { useTheme } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
 import { TextWithTooltip } from '../TextWithTooltip';
-import { styles, TextWithInfoStyles } from './TextWithInfo.styles';
+import { useStyles, ITextWithInfoStyles } from './TextWithInfo.styles';
 
-export interface ITextWithInfoProps extends ICommonProps {
-  tweakStyles?: TextWithInfoStyles;
+export interface ITextWithInfoProps extends ICommonProps<ITextWithInfoStyles> {
   text: string;
   isSelected?: boolean;
   textTooltip?: string;
@@ -25,14 +24,16 @@ export const TextWithInfo: FC<ITextWithInfoProps> = ({
   info,
   textTooltip,
   onClick,
+  testId,
   data,
   tweakStyles,
 }) => {
-  const { classes } = useTheme('TextWithInfo', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
 
   return (
     <div
       className={clsx(classes.root, isSelected && classes.selected)}
+      {...addDataTestId(testId)}
       {...addDataAttributes(data)}
     >
       <div className={classes.container}>

package/src/components/TextWithInfo/index.ts

@@ -1,2 +1,2 @@
 export * from './TextWithInfo';
-export type { TextWithInfoStyles } from './TextWithInfo.styles';
+export type { ITextWithInfoStyles } from './TextWithInfo.styles';

package/src/components/TextWithTooltip/TextWithTooltip.styles.ts

@@ -1,6 +1,7 @@
-import { ComponentStyles } from '../../types';
+import { ITweakStyles, createThemedStyles } from '../../theme';
+import { ITooltipStyles } from '../Tooltip';
 
-export const styles = {
+export const useStyles = createThemedStyles('TextWithTooltip', {
   root: {
     position: 'relative',
   },
@@ -12,8 +13,9 @@ export const styles = {
   clickable: {
     cursor: 'pointer',
   },
+});
 
-  tweakTooltip: {},
-};
-
-export type TextWithTooltipStyles = ComponentStyles<typeof styles>;
+export type ITextWithTooltipStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakTooltip: ITooltipStyles }
+>;

package/src/components/TextWithTooltip/TextWithTooltip.tsx

@@ -3,14 +3,14 @@ import { Styles } from 'react-jss';
 import { Portal } from 'react-overlays';
 import usePopper, { Modifier, Placement } from 'react-overlays/usePopper';
 import clsx from 'clsx';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
-import { useOnClickOutsideWithRef, useTheme, useTweakStyles } from '../../hooks';
+import { useOnClickOutsideWithRef, useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { ITooltipProps, Tooltip } from '../Tooltip';
-import { styles, TextWithTooltipStyles } from './TextWithTooltip.styles';
+import { useStyles, ITextWithTooltipStyles } from './TextWithTooltip.styles';
 
-export interface ITextWithTooltipProps extends ICommonProps {
-  tweakStyles?: TextWithTooltipStyles;
+export interface ITextWithTooltipProps extends ICommonProps<ITextWithTooltipStyles> {
   children: ReactNode;
   tooltipText: ITooltipProps['text'];
   tooltipView?: ITooltipProps['view'];
@@ -37,17 +37,24 @@ export const TextWithTooltip: FC<ITextWithTooltipProps> = ({
   shouldRenderInBody = true,
   mouseEventType = 'hover',
   hoverDelay,
+  testId,
   data,
   tweakStyles,
 }) => {
-  const { classes, componentStyles } = useTheme('TextWithTooltip', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
 
-  const root = useRef<HTMLDivElement>(null);
-  const tooltip = useRef<HTMLDivElement>(null);
+  const tweakTooltipStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakTooltip',
+    currentComponentName: 'TextWithTooltip',
+  });
 
   const [isTooltipVisible, setIsTooltipVisible] = useState(false);
   const [tooltipTimeout, setTooltipTimeout] = useState<ReturnType<typeof setTimeout>>();
 
+  const root = useRef<HTMLDivElement>(null);
+  const tooltip = useRef<HTMLDivElement>(null);
+
   const hasDelay = hoverDelay !== undefined;
 
   const handleMouseEnter = () => {
@@ -108,8 +115,6 @@ export const TextWithTooltip: FC<ITextWithTooltipProps> = ({
 
   const shouldShowTooltip = tooltipText !== undefined && tooltipText !== null && !isDisabled;
 
-  const tweakTooltipStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakTooltip');
-
   return (
     <div
       className={clsx(
@@ -117,6 +122,7 @@ export const TextWithTooltip: FC<ITextWithTooltipProps> = ({
         mouseEventType === 'click' && shouldShowTooltip && classes.clickable,
       )}
       {...(shouldShowTooltip ? props : undefined)}
+      {...addDataTestId(testId)}
       {...addDataAttributes(data)}
       ref={root}
     >

package/src/components/TextWithTooltip/index.ts

@@ -1,2 +1,2 @@
 export * from './TextWithTooltip';
-export type { TextWithTooltipStyles } from './TextWithTooltip.styles';
+export type { ITextWithTooltipStyles } from './TextWithTooltip.styles';

package/src/components/ThemedPreloader/ThemedPreloader.styles.ts

@@ -1,6 +1,7 @@
-import { ComponentStyles } from '../../types';
+import { ITweakStyles, createThemedStyles } from '../../theme';
+import { IDotsPreloaderStyles, ISvgPreloaderStyles } from './components';
 
-export const styles = {
+export const useStyles = createThemedStyles('ThemedPreloader', {
   root: {
     display: 'flex',
   },
@@ -14,8 +15,12 @@ export const styles = {
   currentColor: {
     color: 'currentColor',
   },
+});
 
-  tweakPreloaderComponent: {},
-};
-
-export type ThemedPreloaderStyles = ComponentStyles<typeof styles>;
+export type IThemedPreloaderStyles = ITweakStyles<
+  typeof useStyles,
+  {
+    tweakDotsPreloader: IDotsPreloaderStyles;
+    tweakSvgPreloader: ISvgPreloaderStyles;
+  }
+>;

package/src/components/ThemedPreloader/ThemedPreloader.tsx

@@ -1,14 +1,14 @@
 import { FC } from 'react';
 import clsx from 'clsx';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
-import { useTheme, useTweakStyles } from '../../hooks';
+import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { SvgPreloader, DotsPreloader } from './components';
 import { IPreloaderSvgType } from './types';
-import { ThemedPreloaderStyles, styles } from './ThemedPreloader.styles';
+import { useStyles, IThemedPreloaderStyles } from './ThemedPreloader.styles';
 
-export interface IThemedPreloaderProps extends ICommonProps {
-  tweakStyles?: ThemedPreloaderStyles;
+export interface IThemedPreloaderProps extends ICommonProps<IThemedPreloaderStyles> {
   /**
    * @default `default`
    */
@@ -20,27 +20,35 @@ export const ThemedPreloader: FC<IThemedPreloaderProps> = ({
   type = 'default',
   useCurrentColor = false,
   data,
+  testId,
   tweakStyles,
 }) => {
-  const { classes, componentStyles } = useTheme('ThemedPreloader', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
 
-  const preloaderComponentStyles = useTweakStyles(
-    componentStyles,
+  const tweakDotsPreloaderStyles = useTweakStyles({
     tweakStyles,
-    'tweakPreloaderComponent',
-  );
+    className: 'tweakDotsPreloader',
+    currentComponentName: 'ThemedPreloader',
+  });
+
+  const tweakSvgPreloaderStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakSvgPreloader',
+    currentComponentName: 'ThemedPreloader',
+  });
 
   return (
     <div
       className={clsx(classes.root, classes[type], {
         [classes.currentColor]: useCurrentColor,
       })}
+      {...addDataTestId(testId)}
       {...addDataAttributes(data)}
     >
       {type === 'dots' ? (
-        <DotsPreloader tweakStyles={preloaderComponentStyles} />
+        <DotsPreloader tweakStyles={tweakDotsPreloaderStyles} />
       ) : (
-        <SvgPreloader type={type} tweakStyles={preloaderComponentStyles} />
+        <SvgPreloader type={type} tweakStyles={tweakSvgPreloaderStyles} />
       )}
     </div>
   );

package/src/components/ThemedPreloader/components/DotsPreloader/DotsPreloader.styles.ts

@@ -1,6 +1,6 @@
-import { ComponentStyles } from '../../../../types';
+import { createThemedStyles, ITweakStyles } from '../../../../theme';
 
-export const styles = {
+export const useStyles = createThemedStyles('DotsPreloader', {
   root: {
     display: 'flex',
     gap: 4,
@@ -49,6 +49,6 @@ export const styles = {
     extend: 'fadedDot',
     animationDelay: '180ms',
   },
-};
+});
 
-export type DotsPreloaderStyles = ComponentStyles<typeof styles>;
+export type IDotsPreloaderStyles = ITweakStyles<typeof useStyles>;

package/src/components/ThemedPreloader/components/DotsPreloader/DotsPreloader.tsx

@@ -1,14 +1,11 @@
 import { FC } from 'react';
-import { useTheme } from '../../../../hooks';
 import { ICommonProps } from '../../../../types';
-import { DotsPreloaderStyles, styles } from './DotsPreloader.styles';
+import { useStyles, IDotsPreloaderStyles } from './DotsPreloader.styles';
 
-export interface IDotsPreloaderProps extends ICommonProps {
-  tweakStyles?: DotsPreloaderStyles;
-}
+export type IDotsPreloaderProps = Pick<ICommonProps<IDotsPreloaderStyles>, 'tweakStyles'>;
 
 export const DotsPreloader: FC<IDotsPreloaderProps> = ({ tweakStyles }) => {
-  const { classes } = useTheme('DotsPreloader', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
 
   return (
     <div className={classes.root}>

package/src/components/ThemedPreloader/components/DotsPreloader/index.ts

@@ -1,2 +1,2 @@
 export { DotsPreloader } from './DotsPreloader';
-export type { DotsPreloaderStyles } from './DotsPreloader.styles';
+export type { IDotsPreloaderStyles } from './DotsPreloader.styles';

package/src/components/ThemedPreloader/components/SvgPreloader/SvgPreloader.styles.ts

@@ -1,11 +1,11 @@
-import { ComponentStyles } from '../../../../types';
+import { createThemedStyles, ITweakStyles } from '../../../../theme';
 
-export const styles = {
+export const useStyles = createThemedStyles('SvgPreloader', {
   root: {
     display: 'flex',
     width: '100%',
     height: '100%',
   },
-};
+});
 
-export type SvgPreloaderStyles = ComponentStyles<typeof styles>;
+export type ISvgPreloaderStyles = ITweakStyles<typeof useStyles>;

package/src/components/ThemedPreloader/components/SvgPreloader/SvgPreloader.tsx

@@ -1,20 +1,19 @@
 import { FC, useContext } from 'react';
-import { ThemeContext, useTheme } from '../../../../hooks';
+import { ThemeContext } from '../../../../theme';
 import { ICommonProps } from '../../../../types';
 import { IPreloaderSvgType } from '../../types';
 import { DefaultPreloader } from '../DefaultPreloader';
-import { SvgPreloaderStyles, styles } from './SvgPreloader.styles';
+import { useStyles, ISvgPreloaderStyles } from './SvgPreloader.styles';
 
-export interface ISvgPreloaderProps extends ICommonProps {
+export interface ISvgPreloaderProps extends Pick<ICommonProps<ISvgPreloaderStyles>, 'tweakStyles'> {
   type: IPreloaderSvgType;
-  tweakStyles?: SvgPreloaderStyles;
 }
 
 export const SvgPreloader: FC<ISvgPreloaderProps> = ({ type = 'default', tweakStyles }) => {
-  const { classes } = useTheme('SvgPreloader', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
+
   const { theme } = useContext(ThemeContext);
   const PreloaderIcon = theme.preloaders?.[type] ?? DefaultPreloader;
-
   const isInlineSvg = typeof PreloaderIcon === 'string';
 
   return isInlineSvg ? (

package/src/components/ThemedPreloader/components/SvgPreloader/index.ts

@@ -1,2 +1,2 @@
 export * from './SvgPreloader';
-export type { SvgPreloaderStyles } from './SvgPreloader.styles';
+export type { ISvgPreloaderStyles } from './SvgPreloader.styles';

package/src/components/ThemedPreloader/index.ts

@@ -1,4 +1,4 @@
 export * from './ThemedPreloader';
 export * from './types';
-export type { ThemedPreloaderStyles } from './ThemedPreloader.styles';
-export type { DotsPreloaderStyles, SvgPreloaderStyles } from './components';
+export type { IThemedPreloaderStyles } from './ThemedPreloader.styles';
+export type { IDotsPreloaderStyles, ISvgPreloaderStyles } from './components';

package/src/components/Toaster/Toaster.styles.ts

@@ -1,7 +1,7 @@
-import { colors } from '../../theme';
-import { ComponentStyles } from '../../types';
+import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+import { ICloseButtonStyles } from '../CloseButton';
 
-export const styles = {
+export const useStyles = createThemedStyles('Toaster', {
   root: {
     borderRadius: 8,
     position: 'relative',
@@ -52,8 +52,9 @@ export const styles = {
     width: 32,
     height: 32,
   },
+});
 
-  tweakCloseButton: {},
-};
-
-export type ToasterStyles = ComponentStyles<typeof styles>;
+export type IToasterStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakCloseButton: ICloseButtonStyles }
+>;