chore(ui): address review comments

packages/ui/src/design-system/decorators/page-provider.component.tsx

@@ -3,17 +3,21 @@ import React, { useState } from 'react';
 
 import { PageContext } from './page.context';
 
+import type { PageContextValue } from './page.context';
+
 interface Props {
   children: ReactNode;
 }
 
 export const PageProvider = ({
   children,
 }: Readonly<Props>): React.ReactElement => {
-  const [state, setState] = useState<{
-    lightThemePortalContainer?: HTMLElement;
-    darkThemePortalContainer?: HTMLElement;
-  }>({});
+  const [state, setState] = useState<
+    Pick<
+      PageContextValue,
+      'darkThemePortalContainer' | 'lightThemePortalContainer'
+    >
+  >({});
 
   return (
     <PageContext.Provider

packages/ui/src/design-system/decorators/page.context.ts

@@ -1,6 +1,6 @@
 import { createContext, useContext } from 'react';
 
-interface PageContextValue {
+export interface PageContextValue {
   darkThemePortalContainer?: HTMLElement;
   lightThemePortalContainer?: HTMLElement;
   setPortalContainers: ({

packages/ui/src/design-system/decorators/page.hooks.ts

@@ -1,16 +1,21 @@
 import { usePageContext } from './page.context';
 
-interface UsePortalContainerReturnType {
-  darkThemePortalContainer?: HTMLElement;
-  lightThemePortalContainer?: HTMLElement;
-}
+import type { PageContextValue } from './page.context';
 
 /**
  * **Important**: This is for Storybook use only. In real app everything will be placed in context of a single
  * ThemeProvider. It should be used with all components that create portals to fix LocalThemeProvider with dark theme
  * and Interaction tests (without this approach your component may not be accessible using `canvas.getByTestId()`).
  */
-export const usePortalContainer = (): UsePortalContainerReturnType => ({
-  darkThemePortalContainer: usePageContext().darkThemePortalContainer,
-  lightThemePortalContainer: usePageContext().lightThemePortalContainer,
-});
+export const usePortalContainer = (): Pick<
+  PageContextValue,
+  'darkThemePortalContainer' | 'lightThemePortalContainer'
+> => {
+  const { lightThemePortalContainer, darkThemePortalContainer } =
+    usePageContext();
+
+  return {
+    darkThemePortalContainer,
+    lightThemePortalContainer,
+  };
+};

packages/ui/src/design-system/select/select-item/select-item-root.component.css.ts

@@ -1,6 +1,6 @@
-import { styleVariants } from '@vanilla-extract/css';
+import { style, styleVariants } from '@vanilla-extract/css';
 
-import { style, vars } from '../../../design-tokens';
+import { vars } from '../../../design-tokens';
 
 const rootBase = style({
   display: 'flex',

packages/ui/src/design-system/select/select-root.component.css.ts

@@ -1,6 +1,6 @@
-import { styleVariants } from '@vanilla-extract/css';
+import { style, styleVariants } from '@vanilla-extract/css';
 
-import { style, sx, vars } from '../../design-tokens';
+import { sx, vars } from '../../design-tokens';
 
 const triggerBase = style({
   border: 0,