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

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

@@ -1,24 +1,27 @@
 import { useRef, useState, useMemo, ReactNode } from 'react';
 import clsx from 'clsx';
 import { addDataAttributes } from '../../../../helpers';
-import { useTheme, useOnClickOutside, useTweakStyles } from '../../../../hooks';
+import { useOnClickOutside, useTweakStyles } from '../../../../hooks';
 import { ICommonProps } from '../../../../types';
 import { Icon } from '../../../Icon';
 import { SearchInput } from '../../../SearchInput';
 import { getLocale } from '../../helpers';
 import { IFilterLocaleKey, IFiltersPaneSearchPayload, IPartialFilterLocale } from '../../types';
 import { FilterSelect, IFilterSelectProps } from '../FilterSelect';
-import { FiltersPaneSearchStyles, styles } from './FiltersPaneSearch.styles';
+import {
+  useStyles,
+  IFiltersPaneSearchStyles,
+  searchInputStyles,
+  selectStyles,
+} from './FiltersPaneSearch.styles';
 
-export interface IFiltersPaneSearchProps<Value> extends ICommonProps {
-  tweakStyles?: FiltersPaneSearchStyles;
+export interface IFiltersPaneSearchProps<Value> extends ICommonProps<IFiltersPaneSearchStyles> {
   field?: Value;
   fields?: Value[];
   value?: string;
   onChange: (v: IFiltersPaneSearchPayload<Value>) => void;
   localeKey?: IFilterLocaleKey;
   locale?: IPartialFilterLocale;
-  testId?: string;
   maxLength?: number;
   getValueView?: (value: Value) => ReactNode;
   getValueId?: (value: Value) => string;
@@ -50,7 +53,21 @@ export function FiltersPaneSearch<Value>({
   tweakStyles,
   testId,
 }: IFiltersPaneSearchProps<Value>): JSX.Element {
-  const { classes, componentStyles } = useTheme('FiltersPaneSearch', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakSearchInputStyles = useTweakStyles({
+    innerStyles: searchInputStyles,
+    tweakStyles,
+    className: 'tweakSearchInput',
+    currentComponentName: 'FiltersPaneSearch',
+  });
+
+  const tweakSelectStyles = useTweakStyles({
+    innerStyles: selectStyles,
+    tweakStyles,
+    className: 'tweakSelect',
+    currentComponentName: 'FiltersPaneSearch',
+  });
 
   const [isInputFocused, setIsInputFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
@@ -81,10 +98,6 @@ export function FiltersPaneSearch<Value>({
     [field],
   );
 
-  const tweakSearchInputStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakSearchInput');
-
-  const tweakSelectStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakSelect');
-
   return (
     <div
       className={clsx(classes.root, {

package/src/components/FiltersPane/components/FiltersPaneSearch/index.ts

@@ -1,2 +1,2 @@
 export * from './FiltersPaneSearch';
-export type { FiltersPaneSearchStyles } from './FiltersPaneSearch.styles';
+export type { IFiltersPaneSearchStyles } from './FiltersPaneSearch.styles';

package/src/components/FiltersPane/helpers.ts

@@ -20,7 +20,7 @@ export const getSelectLocale = (
   custom2?: Partial<ISelectLocale>,
 ): ISelectLocale => merge({}, SelectLocales[key], custom, custom2);
 
-export const sortValues = (arr: Array<number | undefined>) =>
+export const sortValues = (arr: Array<number | undefined>): Array<number | undefined> =>
   arr.includes(undefined) ? arr : (arr as number[]).sort((a, b) => (a < b ? -1 : 1));
 
 export const defaultConvertFunction = (val: unknown): string => String(val);

package/src/components/FiltersPane/index.ts

@@ -1,5 +1,5 @@
 export * from './FiltersPane';
+export type { IFiltersPaneStyles } from './FiltersPane.styles';
 export * from './types';
 // TODO : подумать над тем чтобы вынести это все наружу
 export * from './components';
-export type { FiltersPaneStyles } from './FiltersPane.styles';

package/src/components/FiltersPane/types.ts

@@ -152,5 +152,5 @@ export type ISelectLocaleKey = keyof typeof SelectLocales;
 
 export type IFilterWithDateDatePickerProps = Omit<
   IDatePickerProps,
-  'onChange' | 'value' | 'locale' | 'months' | 'selectedDate'
+  'onChange' | 'value' | 'locale' | 'months' | 'selectedDate' | 'tweakStyles' // TODO: rethink
 >;

package/src/components/Flag/Flag.styles.ts

@@ -1,18 +1,17 @@
-import { colors } from '../../theme';
-import { ComponentStyles } from '../../types';
-
-export const styles = {
-  root: {
-    // приходится хардкодить в компоненте, тк либа Flags выдает флаги с 2-3 пиксельным отступом снизу
-    // если будет нужно, то можно вынести border на уровень пропсов
-    border: [1, 'solid', colors.BORDER_MAIN],
-    borderRadius: 2,
-  },
-
-  noFlag: {
-    width: 20,
-    color: colors.FONT_MEDIUM,
-  },
-};
-
-export type FlagStyles = ComponentStyles<typeof styles>;
+import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+
+export const useStyles = createThemedStyles('Flag', {
+  root: {
+    // приходится хардкодить в компоненте, тк либа Flags выдает флаги с 2-3 пиксельным отступом снизу
+    // если будет нужно, то можно вынести border на уровень пропсов
+    border: [1, 'solid', colors.BORDER_MAIN],
+    borderRadius: 2,
+  },
+
+  noFlag: {
+    width: 20,
+    color: colors.FONT_MEDIUM,
+  },
+});
+
+export type IFlagStyles = ITweakStyles<typeof useStyles>;

package/src/components/Flag/Flag.tsx

@@ -1,18 +1,16 @@
 import { FC } from 'react';
 import { hasFlag } from 'country-flag-icons';
 import Flags from 'country-flag-icons/react/3x2';
-import { useTheme } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
-import { FlagStyles, styles } from './Flag.styles';
+import { useStyles, IFlagStyles } from './Flag.styles';
 
-export interface IFlagProps extends ICommonProps {
-  tweakStyles?: FlagStyles;
+export interface IFlagProps extends Pick<ICommonProps<IFlagStyles>, 'tweakStyles'> {
   countryCode?: string;
 }
 
 export const Flag: FC<IFlagProps> = ({ countryCode = '', tweakStyles }) => {
-  const { classes } = useTheme('Flag', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
   const CC = countryCode.toUpperCase();
 
   const TheFlag = hasFlag(CC)

package/src/components/Flag/augment.d.ts

@@ -1 +1 @@
-declare module 'country-flag-icons/react/3x2';
+declare module 'country-flag-icons/react/3x2';

package/src/components/Flag/index.ts

@@ -1,2 +1,2 @@
-export * from './Flag';
-export type { FlagStyles } from './Flag.styles';
+export * from './Flag';
+export type { IFlagStyles } from './Flag.styles';

package/src/components/FlexibleTable/FlexibleTable.stories.tsx

@@ -2,6 +2,7 @@ import { FC } from 'react';
 import { ComponentStory } from '@storybook/react';
 import { FlexibleTable } from './FlexibleTable';
 import { FlexibleTableConfigType } from './types';
+import { IFlexibleTableStyles } from './FlexibleTable.styles';
 
 export default {
   title: 'Table/FlexibleTable',
@@ -303,6 +304,16 @@ const content = [
   },
 ];
 
+const tweak: IFlexibleTableStyles = {
+  tweakTableRow: {
+    tweakTableCell: {
+      root: {
+        color: 'red',
+      },
+    },
+  },
+};
+
 const Template: ComponentStory<typeof FlexibleTable<ITableContent>> = (args) => (
   <FlexibleTable<ITableContent>
     {...args}
@@ -312,6 +323,7 @@ const Template: ComponentStory<typeof FlexibleTable<ITableContent>> = (args) =>
         <div onClick={close}>всем привет :) {item.contractCode}</div>
       ) : null
     }
+    tweakStyles={tweak}
     content={content}
     config={config}
   />

package/src/components/FlexibleTable/FlexibleTable.styles.ts

@@ -1,10 +1,10 @@
 import { rgba } from '../../helpers';
-import { colors } from '../../theme';
-import { ComponentStyles } from '../../types';
+import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+import { IFlexibleTableRowStyles } from './components';
 
-const STICKY_SHADOW_PADDING = 12;
+export const STICKY_SHADOW_PADDING = 12;
 
-export const styles = {
+export const useStyles = createThemedStyles('FlexibleTable', {
   root: {
     position: 'relative',
     width: '100%',
@@ -12,10 +12,6 @@ export const styles = {
     borderSpacing: 0,
   },
 
-  row: {
-    position: 'relative',
-  },
-
   scroll: {
     overflow: 'auto',
     /*
@@ -47,30 +43,8 @@ export const styles = {
   },
 
   headerRow: {
-    verticalAlign: 'bottom',
-  },
-
-  activeRow: {},
-
-  cell: {
     position: 'relative',
-    boxSizing: 'content-box',
-    padding: [14, 7, 14, 7],
-    fontSize: 14,
-    lineHeight: 1.42,
-    zIndex: 5,
-    verticalAlign: 'top',
-  },
-
-  cellSticky: {
-    zIndex: 19,
-    paddingLeft: 24,
-    paddingRight: 12,
-    transition: ['box-shadow', '0.25s', 'ease-in-out'],
-  },
-
-  cellSecond: {
-    paddingLeft: STICKY_SHADOW_PADDING,
+    verticalAlign: 'bottom',
   },
 
   header: {
@@ -122,10 +96,9 @@ export const styles = {
   headerSecond: {
     paddingLeft: STICKY_SHADOW_PADDING,
   },
+});
 
-  editableRow: {
-    cursor: 'pointer',
-  },
-};
-
-export type FlexibleTableStyles = ComponentStyles<typeof styles>;
+export type IFlexibleTableStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakTableRow: IFlexibleTableRowStyles }
+>;

package/src/components/FlexibleTable/FlexibleTable.tsx

@@ -1,16 +1,16 @@
-import { ReactNode, RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ReactNode, RefObject, useCallback, useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { addDataAttributes } from '../../helpers';
-import { useTheme } from '../../hooks';
+import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { ThemedPreloader } from '../ThemedPreloader';
-import { TableRow } from './components';
+import { FlexibleTableRow } from './components';
 import { FlexibleTableConfigType, IInfinityScrollConfig, ITitleComponent } from './types';
-import { FlexibleTableStyles, styles } from './FlexibleTable.styles';
+import { useStyles, IFlexibleTableStyles } from './FlexibleTable.styles';
 
 // TODO: Заменить Record<string, any> на Record<string, unknown>
-export interface IFlexibleTableProps<Values extends Record<string, any>> extends ICommonProps {
-  tweakStyles?: FlexibleTableStyles;
+export interface IFlexibleTableProps<Values extends Record<string, any>>
+  extends ICommonProps<IFlexibleTableStyles> {
   content: Values[];
   headerContent?: Partial<Record<keyof Values, any>>;
   enabledColumns?: Array<keyof Values>;
@@ -28,7 +28,6 @@ export interface IFlexibleTableProps<Values extends Record<string, any>> extends
   refForScroll?: RefObject<HTMLDivElement>;
   nothingFoundContent?: ReactNode;
   expandableRowComponent?: (item: Values, isOpen: boolean, close: () => void) => ReactNode;
-  testId?: string;
 }
 
 export function FlexibleTable<Values extends Record<string, any>>({
@@ -52,13 +51,19 @@ export function FlexibleTable<Values extends Record<string, any>>({
   testId,
   expandableRowComponent,
 }: IFlexibleTableProps<Values>): JSX.Element {
-  const { classes } = useTheme('FlexibleTable', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
 
-  const observer = useRef<IntersectionObserver>();
-  const scrollRef = useRef<HTMLDivElement>(null);
+  const tweakTableRowStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakTableRow',
+    currentComponentName: 'FlexibleTable',
+  });
 
   const [isHorizontallyScrolled, setIsHorizontallyScrolled] = useState(false);
 
+  const observer = useRef<IntersectionObserver>();
+  const scrollRef = useRef<HTMLDivElement>(null);
+
   const initIntersectionObserver = useCallback(
     (node: HTMLDivElement) => {
       if (infinityScrollConfig) {
@@ -91,20 +96,6 @@ export function FlexibleTable<Values extends Record<string, any>>({
     ],
   );
 
-  const tableRowClasses = useMemo(
-    () => ({
-      root: classes.row,
-      active: classes.activeRow,
-      editable: classes.editableRow,
-      cell: {
-        root: classes.cell,
-        sticky: classes.cellSticky,
-        second: classes.cellSecond,
-      },
-    }),
-    [tweakStyles],
-  );
-
   useEffect(() => {
     const scrollContainer = (refForScroll ?? scrollRef).current;
     if (scrollContainer === null || !isHorizontallyScrollable || !isFirstColumnSticky) {
@@ -127,7 +118,7 @@ export function FlexibleTable<Values extends Record<string, any>>({
     >
       <table className={classes.root} data-testid={testId} {...addDataAttributes(data)}>
         <thead>
-          <tr className={clsx(classes.row, classes.headerRow)}>
+          <tr className={classes.headerRow}>
             {(enabledColumns || Object.keys(content[0])).map((key, idx) => {
               const itemConfig = config?.[key];
 
@@ -152,7 +143,7 @@ export function FlexibleTable<Values extends Record<string, any>>({
                     textAlign: itemConfig?.titleAlign ?? 'left',
                   }}
                   key={key as string}
-                  onClick={() => (onHeadClick ? onHeadClick(key) : undefined)}
+                  onClick={() => onHeadClick?.(key)}
                 >
                   {titleContent}
                 </th>
@@ -173,7 +164,7 @@ export function FlexibleTable<Values extends Record<string, any>>({
             )}
 
           {content.map((item, idx) => (
-            <TableRow
+            <FlexibleTableRow
               item={item}
               uniqueField={uniqueField}
               isActive={activeRows?.includes(idx) ?? false}
@@ -182,9 +173,9 @@ export function FlexibleTable<Values extends Record<string, any>>({
               onRowHover={onRowHover}
               enabledColumns={enabledColumns}
               config={config}
-              classes={tableRowClasses}
               key={uniqueField ? item[uniqueField] : idx}
               rowAttributes={rowAttributes}
+              tweakStyles={tweakTableRowStyles}
               expandableRowComponent={expandableRowComponent}
             />
           ))}

package/src/components/FlexibleTable/components/FlexibleTableCell/FlexibleTableCell.styles.ts

@@ -0,0 +1,28 @@
+import { getTransition } from '@true-engineering/true-react-platform-helpers';
+import { ITweakStyles, createThemedStyles } from '../../../../theme';
+import { STICKY_SHADOW_PADDING } from '../../FlexibleTable.styles';
+
+export const useStyles = createThemedStyles('FlexibleTableCell', {
+  root: {
+    position: 'relative',
+    boxSizing: 'content-box',
+    padding: [14, 7],
+    fontSize: 14,
+    lineHeight: 1.42,
+    zIndex: 5,
+    verticalAlign: 'top',
+  },
+
+  sticky: {
+    zIndex: 19,
+    paddingLeft: 24,
+    paddingRight: 12,
+    ...getTransition(['box-shadow']),
+  },
+
+  second: {
+    paddingLeft: STICKY_SHADOW_PADDING,
+  },
+});
+
+export type IFlexibleTableCellStyles = ITweakStyles<typeof useStyles>;

package/src/components/FlexibleTable/components/{TableValue/TableValue.tsx → FlexibleTableCell/FlexibleTableCell.tsx}

@@ -4,36 +4,35 @@ import { format } from 'date-fns';
 import type { ICommonProps } from '../../../../types';
 import { DEFAULT_DATE_FORMAT } from '../../constants';
 import type { FlexibleTableConfigType } from '../../types';
+import { useStyles, IFlexibleTableCellStyles } from './FlexibleTableCell.styles';
 
-export interface ITableValueProps<Values extends Record<string, any>> extends ICommonProps {
+export interface IFlexibleTableCellProps<Values extends Record<string, any>>
+  extends Pick<ICommonProps<IFlexibleTableCellStyles>, 'tweakStyles'> {
   item: Values;
   columnName: keyof Values;
   config?: FlexibleTableConfigType<Values>;
-  classes: {
-    root: string;
-    sticky: string;
-    second: string;
-  };
   isFocusedRow?: boolean;
   isSecond?: boolean;
   isSticky?: boolean;
   isNestedComponentExpanded: boolean;
   isRowNestedComponentExpanded: boolean;
-  onSetNestedComponent: (component?: ReactNode) => void;
+  onSetNestedComponent(component?: ReactNode): void;
 }
 
-function TableValue<Values extends Record<string, any>>({
+function FlexibleTableCell<Values extends Record<string, any>>({
   item,
   columnName,
   config,
-  classes,
   isFocusedRow,
   isSecond,
   isSticky,
   isNestedComponentExpanded,
   isRowNestedComponentExpanded,
+  tweakStyles,
   onSetNestedComponent,
-}: ITableValueProps<Values>): JSX.Element {
+}: IFlexibleTableCellProps<Values>): JSX.Element {
+  const classes = useStyles({ theme: tweakStyles });
+
   const itemConfig = config?.[columnName];
   const value = item[columnName];
   let content = null;
@@ -57,7 +56,7 @@ function TableValue<Values extends Record<string, any>>({
   return (
     <td
       key={columnName as string}
-      className={clsx(classes.root, isSticky && classes.sticky, isSecond && classes.second)}
+      className={clsx(classes.root, { [classes.sticky]: isSticky, [classes.second]: isSecond })}
       style={{
         textAlign: itemConfig?.cellAlign,
         position: isSticky ? 'sticky' : itemConfig?.position,
@@ -71,4 +70,4 @@ function TableValue<Values extends Record<string, any>>({
   );
 }
 
-export default TableValue;
+export default FlexibleTableCell;

package/src/components/FlexibleTable/components/FlexibleTableCell/index.ts

@@ -0,0 +1,2 @@
+export * from './FlexibleTableCell';
+export type { IFlexibleTableCellStyles } from './FlexibleTableCell.styles';

package/src/components/FlexibleTable/components/FlexibleTableRow/FlexibleTableRow.styles.ts

@@ -0,0 +1,19 @@
+import { ITweakStyles, createThemedStyles } from '../../../../theme';
+import { IFlexibleTableCellStyles } from '../FlexibleTableCell';
+
+export const useStyles = createThemedStyles('FlexibleTableRow', {
+  root: {
+    position: 'relative',
+  },
+
+  active: {},
+
+  editable: {
+    cursor: 'pointer',
+  },
+});
+
+export type IFlexibleTableRowStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakTableCell: IFlexibleTableCellStyles }
+>;

package/src/components/FlexibleTable/components/{TableRow/TableRow.tsx → FlexibleTableRow/FlexibleTableRow.tsx}

@@ -1,12 +1,15 @@
 import { ReactNode, useState, memo } from 'react';
 import clsx from 'clsx';
 import { addDataAttributes } from '../../../../helpers';
+import { useTweakStyles } from '../../../../hooks';
 import { ICommonProps, IDataAttributes } from '../../../../types';
 import { FlexibleTableConfigType, INestedComponent } from '../../types';
-import TableValue from '../TableValue/TableValue';
+import FlexibleTableCell from '../FlexibleTableCell/FlexibleTableCell';
+import { useStyles, IFlexibleTableRowStyles } from './FlexibleTableRow.styles';
 
 // TODO: Заменить Record<string, any> на Record<string, unknown>
-export interface ITableRowProps<Values extends Record<string, any>> extends ICommonProps {
+export interface IFlexibleTableRowProps<Values extends Record<string, any>>
+  extends Pick<ICommonProps<IFlexibleTableRowStyles>, 'tweakStyles'> {
   item: Values;
   uniqueField?: keyof Values;
   isFirstColumnSticky?: boolean;
@@ -14,37 +17,33 @@ export interface ITableRowProps<Values extends Record<string, any>> extends ICom
   config?: FlexibleTableConfigType<Values>;
   enabledColumns?: Array<keyof Values>;
   rowAttributes?: Array<keyof Values>;
-  expandableRowComponent?: (item: Values, isOpen: boolean, close: () => void) => ReactNode;
+  expandableRowComponent?(item: Values, isOpen: boolean, close: () => void): ReactNode;
   // TODO: Заменить string на Generic Values[uniqueField]
-  onRowHover?: (id?: string) => void;
-  onRowClick?: (id: string) => void;
-  // чтобы не перерендеривать стили для каждой строчки / ячейки
-  // TODO: Можно лучше через Classes
-  classes: {
-    root: string;
-    active: string;
-    editable: string;
-    cell: {
-      root: string;
-      sticky: string;
-      second: string;
-    };
-  };
+  onRowHover?(id?: string): void;
+  onRowClick?(id: string): void;
 }
 
-function TableRowInner<Values extends Record<string, any>>({
+function FlexibleTableRowInner<Values extends Record<string, any>>({
   item,
   uniqueField,
   isFirstColumnSticky,
   isActive,
   config,
   enabledColumns,
-  onRowHover,
-  onRowClick,
   rowAttributes,
+  tweakStyles,
   expandableRowComponent,
-  classes,
-}: ITableRowProps<Values>): JSX.Element {
+  onRowHover,
+  onRowClick,
+}: IFlexibleTableRowProps<Values>): JSX.Element {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakTableCellStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakTableCell',
+    currentComponentName: 'FlexibleTableRow',
+  });
+
   const [isFocused, setFocused] = useState(false);
   const [nestedComponent, setNestedComponent] = useState<INestedComponent>({
     isOpen: false,
@@ -122,14 +121,14 @@ function TableRowInner<Values extends Record<string, any>>({
         })}
       >
         {items.map((key, idx) => (
-          <TableValue
+          <FlexibleTableCell
             columnName={key}
             isSticky={isFirstColumnSticky && idx === 0}
             isSecond={isFirstColumnSticky && idx === 1}
             key={key as string}
             item={item}
             config={config}
-            classes={classes.cell}
+            tweakStyles={tweakTableCellStyles}
             isFocusedRow={isFocused}
             isNestedComponentExpanded={nestedComponent.isOpen && nestedComponent.cellKey === key}
             isRowNestedComponentExpanded={
@@ -149,4 +148,4 @@ function TableRowInner<Values extends Record<string, any>>({
   );
 }
 
-export const TableRow = memo(TableRowInner) as typeof TableRowInner;
+export const FlexibleTableRow = memo(FlexibleTableRowInner) as typeof FlexibleTableRowInner;

package/src/components/FlexibleTable/components/FlexibleTableRow/index.ts

@@ -0,0 +1,2 @@
+export * from './FlexibleTableRow';
+export type { IFlexibleTableRowStyles } from './FlexibleTableRow.styles';

package/src/components/FlexibleTable/components/index.ts

@@ -1,2 +1,2 @@
-export * from './TableRow';
-export * from './TableValue';
+export * from './FlexibleTableRow';
+export * from './FlexibleTableCell';

package/src/components/FlexibleTable/index.ts

@@ -1,3 +1,4 @@
-export * from './FlexibleTable';
-export * from './types';
-export type { FlexibleTableStyles } from './FlexibleTable.styles';
+export * from './FlexibleTable';
+export * from './types';
+export type { IFlexibleTableStyles } from './FlexibleTable.styles';
+export type { IFlexibleTableCellStyles, IFlexibleTableRowStyles } from './components';

package/src/components/Icon/Icon.styles.ts

@@ -1,10 +1,10 @@
-import { ComponentStyles } from '../../types';
-
-export const styles = {
-  root: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-};
-
-export type IconStyles = ComponentStyles<typeof styles>;
+import { ITweakStyles, createThemedStyles } from '../../theme';
+
+export const useStyles = createThemedStyles('Icon', {
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+});
+
+export type IIconStyles = ITweakStyles<typeof useStyles>;