@true-engineering/true-react-common-ui-kit 4.0.0-alpha70 → 4.0.0-alpha72

package/dist/types.d.ts

@@ -15,6 +15,7 @@ export interface ITweakStylesProps<TweakStyles> {
     tweakStyles?: IMaybeArray<TweakStyles>;
 }
 export type ICommonProps<TweakStyles> = IDataAttributesProps & ITweakStylesProps<TweakStyles>;
+export type IReplaceTweakStylesProps<T extends ITweakStylesProps<unknown>, P> = ITweakStylesProps<P> & Omit<T, 'tweakStyles'>;
 export interface IDropdownWithPopperOptions {
     shouldUsePopper?: boolean;
     shouldRenderInBody?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "4.0.0-alpha70",
+  "version": "4.0.0-alpha72",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

package/src/components/AccountInfo/AccountInfo.tsx

@@ -24,7 +24,7 @@ export const AccountInfo: FC<IAccountInfoProps> = ({
   accountName,
   options,
 }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const tweakListStyles = useTweakStyles({
     tweakStyles,

package/src/components/AddButton/AddButton.tsx

@@ -27,7 +27,7 @@ export const AddButton: FC<IAddButtonProps> = ({
   testId,
   tweakStyles,
 }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   return (
     <button

package/src/components/Button/Button.tsx

@@ -70,7 +70,7 @@ export const Button = forwardRef<HTMLButtonElement, IButtonProps>(function Butto
   },
   ref,
 ) {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const tweakPreloaderStyles = useTweakStyles({
     innerStyles: getPreloaderStyles(size),

package/src/components/Checkbox/Checkbox.tsx

@@ -48,7 +48,7 @@ export function Checkbox<V>({
   tweakStyles,
   onSelect,
 }: ICheckboxProps<V>): JSX.Element {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const hasAction = !isDisabled && !isReadonly;
   const isSelected = isChecked || isSemiChecked;

package/src/components/CloseButton/CloseButton.tsx

@@ -18,7 +18,7 @@ export const CloseButton: FC<ICloseButtonProps> = ({
   icon = 'close',
   onClose,
 }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   return (
     <button

package/src/components/ControlWrapper/ControlWrapper.tsx

@@ -67,7 +67,7 @@ export const ControlWrapper: FC<IControlWrapperProps> = ({
   data,
   onClear,
 }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const [startControlsWidth, setStartControlsWidth] = useState<number>();
 

package/src/components/CssBaseline/CssBaseline.tsx

@@ -6,7 +6,7 @@ import { useStyles, ICssBaselineStyles } from './CssBaseline.styles';
 export type ICssBaselineProps = ICommonProps<ICssBaselineStyles>;
 
 export const CssBaseline: FC<ICssBaselineProps> = ({ data, testId, tweakStyles }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   return <div className={classes.root} {...addDataAttributes(data, testId)} />;
 };

package/src/components/DateInput/DateInput.tsx

@@ -2,14 +2,16 @@ import { ChangeEvent, forwardRef } from 'react';
 import clsx from 'clsx';
 import { addDataAttributes } from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
+import { IReplaceTweakStylesProps } from '../../types';
 import { IChangeInputEvent, IInputProps, Input } from '../Input';
 import { EMPTY_DATE_INPUT_VALUE, EMPTY_DATE_RANGE_INPUT_VALUE } from './constants';
 import { IDateInputStyles, useStyles } from './DateInput.styles';
 
 export interface IDateInputProps
-  extends Omit<IInputProps, 'value' | 'beforeMaskedStateChange' | 'onChange' | 'tweakStyles'>,
-    ICommonProps<IDateInputStyles> {
+  extends Omit<
+    IReplaceTweakStylesProps<IInputProps, IDateInputStyles>,
+    'value' | 'beforeMaskedStateChange' | 'onChange'
+  > {
   date?: string;
   /** @default  '' */
   startDate?: string;
@@ -39,7 +41,7 @@ export const DateInput = forwardRef<HTMLInputElement, IDateInputProps>(function
   },
   ref,
 ) {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const tweakInputStyles = useTweakStyles({
     tweakStyles,

package/src/components/DatePicker/DatePicker.tsx

@@ -21,7 +21,7 @@ import {
 } from '@true-engineering/true-react-platform-helpers';
 import { offset } from '@floating-ui/react';
 import { useMergedRefs, useOnClickOutside, useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
+import { ITweakStylesProps } from '../../types';
 import { DateInput, EMPTY_DATE_INPUT_VALUE, IDateInputProps } from '../DateInput';
 import { DatePickerBase, DatePickerHeader, PopperContainer } from './components';
 import {
@@ -34,7 +34,9 @@ import { areDatesEquals, getDateFormatter, getDateValueParser } from './helpers'
 import { IDatePickerBaseProps, IRange } from './types';
 import { IDatePickerStyles, useStyles } from './DatePicker.styles';
 
-export interface IDatePickerProps extends IDatePickerBaseProps, ICommonProps<IDatePickerStyles> {
+export interface IDatePickerProps
+  extends IDatePickerBaseProps,
+    ITweakStylesProps<IDatePickerStyles> {
   selectedDate?: Date | null;
   locale: IDatePickerLocale;
   months?: string[];
@@ -105,7 +107,7 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(function
   },
   ref,
 ) {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const tweakDateInputStyles = useTweakStyles({
     tweakStyles,

package/src/components/DatePicker/components/DatePickerHeader/DatePickerHeader.tsx

@@ -2,14 +2,14 @@ import { FC, useMemo } from 'react';
 import { ReactDatePickerCustomHeaderProps as BaseProps } from 'react-datepicker';
 import { getMonth, getYear } from 'date-fns';
 import { useTweakStyles } from '../../../../hooks';
-import { ICommonProps } from '../../../../types';
+import { ITweakStylesProps } from '../../../../types';
 import { Icon } from '../../../Icon';
 import { Select } from '../../../Select';
 import { IDatePickerHeaderStyles, selectStyles, useStyles } from './DatePickerHeader.styles';
 
 export interface IDatePickerHeaderProps
   extends BaseProps,
-    Pick<ICommonProps<IDatePickerHeaderStyles>, 'tweakStyles'> {
+    ITweakStylesProps<IDatePickerHeaderStyles> {
   months?: string[];
 }
 
@@ -24,7 +24,7 @@ export const DatePickerHeader: FC<IDatePickerHeaderProps> = ({
   decreaseMonth,
   increaseMonth,
 }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const tweakSelectStyles = useTweakStyles({
     innerStyles: selectStyles,

package/src/components/Description/Description.tsx

@@ -24,7 +24,7 @@ export const Description: FC<IDescriptionProps> = ({
   data,
   tweakStyles,
 }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const isTooShort = text.length < truncateIndex;
   const [isOpen, setIsOpen] = useState(isAlwaysOpen);

package/src/components/FileInput/FileInput.tsx

@@ -59,7 +59,7 @@ export const FileInput = forwardRef<HTMLInputElement, IFileInputProps>(function
   },
   ref,
 ) {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const [isDragOver, setIsDragOver] = useState(false);
 

package/src/components/FileItem/FileItem.tsx

@@ -63,7 +63,7 @@ export const FileItem: FC<IFileItemProps> = ({
   data,
   tweakStyles,
 }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const tweakIconButtonStyles = useTweakStyles({
     tweakStyles,

package/src/components/FiltersPane/FiltersPane.tsx

@@ -54,7 +54,7 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
   onSettingsButtonClick,
   onClear,
 }: IFiltersPaneProps<Values, Content>): JSX.Element {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const tweakClearButtonStyles = useTweakStyles({
     innerStyles: clearButtonStyles,

package/src/components/FiltersPane/components/FilterInterval/FilterInterval.tsx

@@ -39,7 +39,7 @@ export const FilterInterval: FC<IFilterIntervalProps> = ({
   toInput,
   testId,
 }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
 

package/src/components/FiltersPane/components/FilterSelect/FilterSelect.tsx

@@ -70,7 +70,7 @@ export function FilterSelect<Value>({
   hasClearButton = true,
   testId,
 }: IFilterSelectProps<Value>): JSX.Element {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const tweakSearchInputStyles = useTweakStyles({
     innerStyles: searchInputStyles,

package/src/components/FiltersPane/components/FilterWithDates/FilterWithDates.tsx

@@ -47,7 +47,7 @@ export const FilterWithDates: FC<IFilterWithDatesProps> = ({
   endPickerProps = DEFAULT_PICKER_PROPS,
   isClearable = true,
 }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const tweakClearButtonStyles = useTweakStyles({
     innerStyles: clearButtonStyles,

package/src/components/FiltersPane/components/FilterWithPeriod/FilterWithPeriod.tsx

@@ -35,7 +35,7 @@ export const FilterWithPeriod: FC<IFilterWithPeriodProps> = ({
   tweakStyles,
   testId,
 }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
 

package/src/components/FiltersPane/components/FilterWrapper/FilterWrapper.tsx

@@ -35,7 +35,7 @@ export function FilterWrapper<Values extends Record<string, unknown>, Key extend
   onChange,
 }: IFilterWrapperProps<Values, Key>): JSX.Element {
   const tweakStyles = useMixedStyles(baseTweakStyles, filter.tweakWrapperStyles);
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const tweakWithPopupStyles = useTweakStyles({
     tweakStyles,

package/src/components/FiltersPane/components/FiltersPaneSearch/FiltersPaneSearch.tsx

@@ -58,7 +58,7 @@ export function FiltersPaneSearch<Value>({
   tweakStyles,
   testId,
 }: IFiltersPaneSearchProps<Value>): JSX.Element {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const tweakSearchInputStyles = useTweakStyles({
     innerStyles: searchInputStyles,

package/src/components/FiltersPane/types.ts

@@ -117,6 +117,13 @@ export interface ICustomRangeConfigItem<Value> extends IConfigItemBasicBase<Valu
   valueViewType?: 'range';
 }
 
+export interface ICustomSingularConfigItem<Value> extends IConfigItemBasicBase<Value> {
+  [key: string & {}]: any;
+  type: 'custom';
+  component: CustomComponent<Value>;
+  getSelectedValue?: (v: Value) => ReactNode;
+}
+
 export interface ICustomMultipleConfigItem<Value> extends IConfigItemBasicBase<Value> {
   [key: string & {}]: any;
   type: 'custom';
@@ -127,6 +134,7 @@ export interface ICustomMultipleConfigItem<Value> extends IConfigItemBasicBase<V
 
 export type ICustomConfigItem<Value> =
   | ICustomRangeConfigItem<Value>
+  | ICustomSingularConfigItem<Value>
   | ICustomMultipleConfigItem<Value>;
 
 export type ConfigItem<Value> =

package/src/components/Flag/Flag.tsx

@@ -1,18 +1,18 @@
 import { FC } from 'react';
 import { hasFlag } from 'country-flag-icons';
 import * as Flags from 'country-flag-icons/react/3x2';
-import { ICommonProps } from '../../types';
+import { ITweakStylesProps } from '../../types';
 import { Icon } from '../Icon';
 import { customFlags } from './customFlags';
 import { IFlagStyles, useStyles } from './Flag.styles';
 
-export interface IFlagProps extends Pick<ICommonProps<IFlagStyles>, 'tweakStyles'> {
+export interface IFlagProps extends ITweakStylesProps<IFlagStyles> {
   /** @default '' */
   countryCode?: string;
 }
 
 export const Flag: FC<IFlagProps> = ({ countryCode = '', tweakStyles }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
   const countryFlagKey = countryCode.toUpperCase();
 
   const hasFlagInLibrary = hasFlag(countryFlagKey);

package/src/components/FlexibleTable/FlexibleTable.tsx

@@ -94,7 +94,7 @@ export function FlexibleTable<
   isExpandableRowComponentInitiallyOpen: isRowInitiallyOpen,
   ...restProps
 }: IFlexibleTableProps<Row, HeaderContent, UniqueField>): JSX.Element {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const tweakTableRowStyles = useTweakStyles({
     tweakStyles,

package/src/components/FlexibleTable/components/FlexibleTableCell/FlexibleTableCell.tsx

@@ -5,7 +5,7 @@ import {
   isNotEmpty,
   addDataAttributes,
 } from '@true-engineering/true-react-platform-helpers';
-import { ICommonProps } from '../../../../types';
+import { ITweakStylesProps } from '../../../../types';
 import { Skeleton } from '../../../Skeleton';
 import { TableRenders } from '../../constants';
 import { formatCellContent } from '../../helpers';
@@ -21,7 +21,7 @@ import { useStyles, IFlexibleTableCellStyles } from './FlexibleTableCell.styles'
 export interface IFlexibleTableCellProps<
   Row extends ITableRow,
   HeaderContent extends IHeaderContent<Row>,
-> extends Pick<ICommonProps<IFlexibleTableCellStyles>, 'tweakStyles'>,
+> extends ITweakStylesProps<IFlexibleTableCellStyles>,
     Pick<
       IValueComponentProps<Row, unknown>,
       'isFocusedRow' | 'isActiveRow' | 'isNestedComponentExpanded' | 'isRowNestedComponentExpanded'
@@ -51,7 +51,7 @@ export function FlexibleTableCell<
   tweakStyles,
   ...valueComponentProps
 }: IFlexibleTableCellProps<Row, HeaderContent>): JSX.Element {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const value = row[columnName];
 

package/src/components/FlexibleTable/components/FlexibleTableRow/FlexibleTableRow.tsx

@@ -70,7 +70,7 @@ export const FlexibleTableRow = genericMemo(function FlexibleTableRow<
   onRowHover,
   onRowClick,
 }: IFlexibleTableRowProps<Row, HeaderContent, UniqueField>): JSX.Element {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const tweakTableCellStyles = useTweakStyles({
     tweakStyles,

package/src/components/FloatDocActions/components/DocActions/DocActions.tsx

@@ -1,14 +1,13 @@
 import { FC, ReactNode } from 'react';
 import clsx from 'clsx';
 import { useTweakStyles } from '../../../../hooks';
-import { ICommonProps } from '../../../../types';
+import { IReplaceTweakStylesProps } from '../../../../types';
 import { Checkbox, ICheckboxProps } from '../../../Checkbox';
 import { IDocActionsView } from './types';
 import { IDocActionsStyles, useStyles } from './DocActions.styles';
 
 export interface IDocActionsProps
-  extends Omit<ICheckboxProps<never>, 'tweakStyles'>,
-    ICommonProps<IDocActionsStyles> {
+  extends IReplaceTweakStylesProps<ICheckboxProps<never>, IDocActionsStyles> {
   title: string;
   /** @default 'neutral' */
   view?: IDocActionsView;
@@ -22,7 +21,7 @@ export const DocActions: FC<IDocActionsProps> = ({
   tweakStyles,
   ...checkBoxProps
 }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const tweakCheckboxStyles = useTweakStyles({
     tweakStyles,

package/src/components/Icon/Icon.tsx

@@ -11,7 +11,7 @@ export interface IIconProps extends ICommonProps<IIconStyles> {
 }
 
 export const Icon: FC<IIconProps> = ({ type, data, testId, tweakStyles }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
   const theme = useTheme();
 
   const icon = theme.icons?.[type] ?? iconsMap[type];

package/src/components/IconButton/IconButton.tsx

@@ -40,7 +40,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IIconButtonProps>(functi
   },
   ref,
 ) {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const hasNoAction = isDisabled || isLoading;
 

package/src/components/IncrementInput/IncrementInput.tsx

@@ -3,14 +3,16 @@ import clsx from 'clsx';
 import { isNotEmpty, isNumberInteger } from '@true-engineering/true-react-platform-helpers';
 import { getNumberInRange, getNumberLength } from '../../helpers';
 import { useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
+import { IReplaceTweakStylesProps } from '../../types';
 import { Icon } from '../Icon';
 import { INumberInputProps, NumberInput } from '../NumberInput';
 import { useStyles, IIncrementInputStyles, inputStyles } from './IncrementInput.styles';
 
 export interface IIncrementInputProps
-  extends Omit<INumberInputProps, 'canBeFloat' | 'precision' | 'tweakStyles'>,
-    ICommonProps<IIncrementInputStyles> {
+  extends Omit<
+    IReplaceTweakStylesProps<INumberInputProps, IIncrementInputStyles>,
+    'canBeFloat' | 'precision'
+  > {
   /** @default 1 */
   step?: number;
 }
@@ -35,7 +37,7 @@ export const IncrementInput: FC<IIncrementInputProps> = ({
     currentComponentName: 'IncrementInput',
   });
 
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const isEditDisabled = isDisabled || isReadonly;
 

package/src/components/Input/InputBase.tsx

@@ -108,7 +108,7 @@ export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(function
   },
   ref,
 ) {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const tweakControlWrapperStyles = useTweakStyles({
     tweakStyles,

package/src/components/List/List.tsx

@@ -19,7 +19,7 @@ export interface IListProps extends ICommonProps<IListStyles> {
 }
 
 export const List: FC<IListProps> = ({ items, size, testId, data, tweakStyles, onClick }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const handleItemClick = (
     event: MouseEvent | KeyboardEvent,

package/src/components/List/components/ListItem/ListItem.tsx

@@ -42,7 +42,7 @@ export const ListItem: FC<IListItemProps> = ({
   data,
   onClick,
 }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   return (
     <>

package/src/components/Modal/Modal.tsx

@@ -68,7 +68,7 @@ export const Modal: FC<IModalProps> = ({
   onClose,
   ...restProps
 }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const tweakCloseButtonStyles = useTweakStyles({
     innerStyles: closeButtonStyles,

package/src/components/MoreMenu/MoreMenu.tsx

@@ -28,7 +28,7 @@ export const MoreMenu: FC<IMoreMenuProps> = ({
   onMenuOpen,
   onMenuClose,
 }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const tweakListStyles = useTweakStyles({
     tweakStyles,

package/src/components/MultiSelect/MultiSelect.tsx

@@ -46,7 +46,7 @@ export function MultiSelect<Value = string>({
   fetchOptions,
   tweakStyles,
 }: IMultiSelectProps<Value>): JSX.Element {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const tweakMultiSelectListStyles = useTweakStyles({
     innerStyles: multiSelectListStyles,

package/src/components/MultiSelect/components/MultiSelectInput/MultiSelectInput.tsx

@@ -1,12 +1,11 @@
 import { ReactElement } from 'react';
 import clsx from 'clsx';
-import { ICommonProps } from '../../../../types';
+import { ITweakStylesProps } from '../../../../types';
 import { Icon } from '../../../Icon';
 import { IMultiSelectListValues } from '../../../MultiSelectList';
 import { useStyles, IMultiSelectInputStyles } from './MultiSelectInput.styles';
 
-export interface IMultiSelectInputProps<Value>
-  extends Pick<ICommonProps<IMultiSelectInputStyles>, 'tweakStyles'> {
+export interface IMultiSelectInputProps<Value> extends ITweakStylesProps<IMultiSelectInputStyles> {
   value?: IMultiSelectListValues<Value>;
   isOpen: boolean;
   isDisabled: boolean;
@@ -22,7 +21,7 @@ export function MultiSelectInput<Value>({
   tweakStyles,
   onToggle,
 }: IMultiSelectInputProps<Value>): ReactElement | null {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const value = v?.include;
 

package/src/components/MultiSelectList/MultiSelectList.tsx

@@ -67,7 +67,7 @@ export function MultiSelectList<Value extends IMultiSelectListValues<Option>, Op
   testId,
 }: IMultiSelectListProps<Value, Option>): JSX.Element {
   const isMounted = useIsMounted();
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const tweakCheckboxStyles = useTweakStyles({
     innerStyles: checkboxStyles,

package/src/components/NewMoreMenu/NewMoreMenu.tsx

@@ -38,7 +38,7 @@ export const NewMoreMenu: FC<INewMoreMenuProps> = ({
   tweakStyles,
   ...rest
 }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const tweakWithPopupStyles = useTweakStyles({
     tweakStyles,

package/src/components/Notification/Notification.tsx

@@ -35,7 +35,7 @@ export const Notification: FC<INotificationProps> = ({
   icon = type !== 'custom' ? `status-${type}` : undefined,
   tweakStyles,
 }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const hasText = isReactNodeNotEmpty(text);
   const hasTitle = isReactNodeNotEmpty(title);

package/src/components/PhoneInput/PhoneInput.tsx

@@ -9,7 +9,7 @@ import {
   getPhoneObjFromString,
 } from '../../helpers';
 import { useOnClickOutsideWithRef, useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
+import { IReplaceTweakStylesProps } from '../../types';
 import { Flag } from '../Flag';
 import { Icon } from '../Icon';
 import { IChangeInputEvent, IInputProps, Input } from '../Input';
@@ -20,10 +20,9 @@ import { inputStyles, IPhoneInputStyles, useStyles } from './PhoneInput.styles';
 
 export interface IPhoneInputProps
   extends Omit<
-      IInputProps,
-      'value' | 'onChange' | 'type' | 'mask' | 'units' | 'placeholder' | 'tweakStyles'
-    >,
-    ICommonProps<IPhoneInputStyles> {
+    IReplaceTweakStylesProps<IInputProps, IPhoneInputStyles>,
+    'value' | 'onChange' | 'type' | 'mask' | 'units' | 'placeholder'
+  > {
   /** @default 'ru' */
   locale?: string;
   /** @default 'Поиск' */
@@ -49,7 +48,7 @@ export const PhoneInput: FC<IPhoneInputProps> = ({
   noMatchesLabel = 'Ничего не найдено',
   ...inputProps
 }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const tweakInputStyles = useTweakStyles({
     innerStyles: inputStyles,

package/src/components/PhoneInput/components/PhoneInputCountryList/PhoneInputCountryList.tsx

@@ -8,7 +8,7 @@ import {
   sortCountriesByLocale,
 } from '../../../../helpers';
 import { useTweakStyles } from '../../../../hooks';
-import { ICommonProps } from '../../../../types';
+import { ITweakStylesProps } from '../../../../types';
 import { Flag } from '../../../Flag';
 import { Icon } from '../../../Icon';
 import { IChangeInputEvent, Input } from '../../../Input';
@@ -21,7 +21,7 @@ import {
 } from './PhoneInputCountryList.styles';
 
 export interface IPhoneInputCountryListProps
-  extends Pick<ICommonProps<IPhoneInputCountryListStyles>, 'tweakStyles'> {
+  extends ITweakStylesProps<IPhoneInputCountryListStyles> {
   selectedCountryCode?: string;
   locale: string;
   placeholder: string;
@@ -39,7 +39,7 @@ export const PhoneInputCountryList: FC<IPhoneInputCountryListProps> = ({
   onChange,
   tweakStyles,
 }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const tweakInputStyles = useTweakStyles({
     innerStyles: inputStyles,

package/src/components/RadioButton/RadioButton.tsx

@@ -35,7 +35,7 @@ export function RadioButton<Value extends string>({
   tweakStyles,
   onChange,
 }: IRadioButtonProps<Value>): JSX.Element {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   return (
     <label