feat(ui): migrate to @invoke-ai/ui

invokeai/frontend/web/src/features/system/components/AboutModal/AboutModal.tsx

@@ -3,21 +3,19 @@ import {
   Flex,
   Grid,
   GridItem,
+  Heading,
   Image,
   Link,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
   useDisclosure,
-} from '@chakra-ui/react';
-import { InvHeading } from 'common/components/InvHeading/wrapper';
-import {
-  InvModal,
-  InvModalBody,
-  InvModalCloseButton,
-  InvModalContent,
-  InvModalFooter,
-  InvModalHeader,
-  InvModalOverlay,
-} from 'common/components/InvModal/wrapper';
-import { InvText } from 'common/components/InvText/wrapper';
+} from '@invoke-ai/ui';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import {
   discordLink,
@@ -54,12 +52,12 @@ const AboutModal = ({ children }: AboutModalProps) => {
       {cloneElement(children, {
         onClick: onOpen,
       })}
-      <InvModal isOpen={isOpen} onClose={onClose} isCentered size="2xl">
-        <InvModalOverlay />
-        <InvModalContent maxH="80vh" h="33rem">
-          <InvModalHeader>{t('accessibility.about')}</InvModalHeader>
-          <InvModalCloseButton />
-          <InvModalBody display="flex" flexDir="column" gap={4}>
+      <Modal isOpen={isOpen} onClose={onClose} isCentered size="2xl">
+        <ModalOverlay />
+        <ModalContent maxH="80vh" h="33rem">
+          <ModalHeader>{t('accessibility.about')}</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody display="flex" flexDir="column" gap={4}>
             <Grid templateColumns="repeat(2, 1fr)" h="full">
               <GridItem
                 backgroundColor="base.750"
@@ -68,7 +66,7 @@ const AboutModal = ({ children }: AboutModalProps) => {
                 h="full"
               >
                 <ScrollableContent>
-                  <InvHeading
+                  <Heading
                     position="sticky"
                     top="0"
                     backgroundColor="base.750"
@@ -76,7 +74,7 @@ const AboutModal = ({ children }: AboutModalProps) => {
                     p="1"
                   >
                     {t('common.localSystem')}
-                  </InvHeading>
+                  </Heading>
                   {deps.map(({ name, version }, i) => (
                     <Grid
                       key={i}
@@ -85,10 +83,10 @@ const AboutModal = ({ children }: AboutModalProps) => {
                       w="full"
                       templateColumns="repeat(2, 1fr)"
                     >
-                      <InvText>{name}</InvText>
-                      <InvText>
+                      <Text>{name}</Text>
+                      <Text>
                         {version ? version : t('common.notInstalled')}
-                      </InvText>
+                      </Text>
                     </Grid>
                   ))}
                 </ScrollableContent>
@@ -102,7 +100,7 @@ const AboutModal = ({ children }: AboutModalProps) => {
                   h="full"
                 >
                   <Image src={InvokeLogoYellow} alt="invoke-logo" w="120px" />
-                  {appVersion && <InvText>{`v${appVersion?.version}`}</InvText>}
+                  {appVersion && <Text>{`v${appVersion?.version}`}</Text>}
                   <Grid templateColumns="repeat(2, 1fr)" gap="3">
                     <GridItem>
                       <Link fontSize="sm" href={githubLink} isExternal>
@@ -117,20 +115,18 @@ const AboutModal = ({ children }: AboutModalProps) => {
                       </Link>
                     </GridItem>
                   </Grid>
-                  <InvHeading fontSize="large">
-                    {t('common.aboutHeading')}
-                  </InvHeading>
-                  <InvText fontSize="sm">{t('common.aboutDesc')}</InvText>
+                  <Heading fontSize="large">{t('common.aboutHeading')}</Heading>
+                  <Text fontSize="sm">{t('common.aboutDesc')}</Text>
                   <Link isExternal href={websiteLink} fontSize="sm">
                     {websiteLink} <ExternalLinkIcon mx="2px" />
                   </Link>
                 </Flex>
               </GridItem>
             </Grid>
-          </InvModalBody>
-          <InvModalFooter />
-        </InvModalContent>
-      </InvModal>
+          </ModalBody>
+          <ModalFooter />
+        </ModalContent>
+      </Modal>
     </>
   );
 };

invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeyListItem.tsx

@@ -1,5 +1,4 @@
-import { Flex, Kbd, Spacer } from '@chakra-ui/react';
-import { InvText } from 'common/components/InvText/wrapper';
+import { Flex, Kbd, Spacer, Text } from '@invoke-ai/ui';
 import { Fragment, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -15,7 +14,7 @@ const HotkeyListItem = (props: HotkeysModalProps) => {
   return (
     <Flex flexDir="column" gap={2} px={2}>
       <Flex lineHeight={1} gap={1} alignItems="center">
-        <InvText fontWeight="semibold">{title}</InvText>
+        <Text fontWeight="semibold">{title}</Text>
         <Spacer />
         {hotkeys.map((hotkey, index) => {
           return (
@@ -29,27 +28,22 @@ const HotkeyListItem = (props: HotkeysModalProps) => {
                     {key}
                   </Kbd>
                   {index !== hotkey.length - 1 && (
-                    <InvText as="span" fontWeight="semibold">
+                    <Text as="span" fontWeight="semibold">
                       +
-                    </InvText>
+                    </Text>
                   )}
                 </>
               ))}
               {index !== hotkeys.length - 1 && (
-                <InvText
-                  as="span"
-                  px={2}
-                  variant="subtext"
-                  fontWeight="semibold"
-                >
+                <Text as="span" px={2} variant="subtext" fontWeight="semibold">
                   {t('common.or')}
-                </InvText>
+                </Text>
               )}
             </Fragment>
           );
         })}
       </Flex>
-      <InvText variant="subtext">{description}</InvText>
+      <Text variant="subtext">{description}</Text>
     </Flex>
   );
 };

invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeysModal.tsx

@@ -2,22 +2,20 @@ import { CloseIcon } from '@chakra-ui/icons';
 import {
   Divider,
   Flex,
+  IconButton,
+  Input,
   InputGroup,
   InputRightElement,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
   useDisclosure,
-} from '@chakra-ui/react';
+} from '@invoke-ai/ui';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
-import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
-import { InvInput } from 'common/components/InvInput/InvInput';
-import {
-  InvModal,
-  InvModalBody,
-  InvModalCloseButton,
-  InvModalContent,
-  InvModalFooter,
-  InvModalHeader,
-  InvModalOverlay,
-} from 'common/components/InvModal/wrapper';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import type { HotkeyGroup } from 'features/system/components/HotkeysModal/useHotkeyData';
 import { useHotkeyData } from 'features/system/components/HotkeysModal/useHotkeyData';
@@ -86,21 +84,21 @@ const HotkeysModal = ({ children }: HotkeysModalProps) => {
       {cloneElement(children, {
         onClick: onOpen,
       })}
-      <InvModal isOpen={isOpen} onClose={onClose} isCentered size="2xl">
-        <InvModalOverlay />
-        <InvModalContent maxH="80vh" h="80vh">
-          <InvModalHeader>{t('hotkeys.keyboardShortcuts')}</InvModalHeader>
-          <InvModalCloseButton />
-          <InvModalBody display="flex" flexDir="column" gap={4}>
+      <Modal isOpen={isOpen} onClose={onClose} isCentered size="2xl">
+        <ModalOverlay />
+        <ModalContent maxH="80vh" h="80vh">
+          <ModalHeader>{t('hotkeys.keyboardShortcuts')}</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody display="flex" flexDir="column" gap={4}>
             <InputGroup>
-              <InvInput
+              <Input
                 placeholder={t('hotkeys.searchHotkeys')}
                 value={hotkeyFilter}
                 onChange={onChange}
               />
               {hotkeyFilter.length && (
                 <InputRightElement h="full" pe={2}>
-                  <InvIconButton
+                  <IconButton
                     onClick={clearHotkeyFilter}
                     size="sm"
                     variant="ghost"
@@ -135,10 +133,10 @@ const HotkeysModal = ({ children }: HotkeysModalProps) => {
                 )}
               </Flex>
             </ScrollableContent>
-          </InvModalBody>
-          <InvModalFooter />
-        </InvModalContent>
-      </InvModal>
+          </ModalBody>
+          <ModalFooter />
+        </ModalContent>
+      </Modal>
     </>
   );
 };

invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx

@@ -1,9 +1,7 @@
 /* eslint-disable i18next/no-literal-string */
-import { Image } from '@chakra-ui/react';
+import { Image, Text, Tooltip } from '@invoke-ai/ui';
 import { useStore } from '@nanostores/react';
 import { $logo } from 'app/store/nanostores/logo';
-import { InvText } from 'common/components/InvText/wrapper';
-import { InvTooltip } from 'common/components/InvTooltip/InvTooltip';
 import InvokeLogoYellow from 'public/assets/images/invoke-symbol-ylw-lrg.svg';
 import { memo, useMemo, useRef } from 'react';
 import { useGetAppVersionQuery } from 'services/api/endpoints/appInfo';
@@ -14,7 +12,7 @@ const InvokeAILogoComponent = () => {
   const logoOverride = useStore($logo);
   const tooltip = useMemo(() => {
     if (appVersion) {
-      return <InvText fontWeight="semibold">v{appVersion.version}</InvText>;
+      return <Text fontWeight="semibold">v{appVersion.version}</Text>;
     }
     return null;
   }, [appVersion]);
@@ -24,7 +22,7 @@ const InvokeAILogoComponent = () => {
   }
 
   return (
-    <InvTooltip placement="right" label={tooltip} p={1} px={2} gutter={16}>
+    <Tooltip placement="right" label={tooltip} p={1} px={2} gutter={16}>
       <Image
         ref={ref}
         src={InvokeLogoYellow}
@@ -35,7 +33,7 @@ const InvokeAILogoComponent = () => {
         minH="24px"
         userSelect="none"
       />
-    </InvTooltip>
+    </Tooltip>
   );
 };
 

invokeai/frontend/web/src/features/system/components/ProgressBar.tsx

@@ -1,4 +1,4 @@
-import { Progress } from '@chakra-ui/react';
+import { Progress } from '@invoke-ai/ui';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
 import { selectSystemSlice } from 'features/system/store/systemSlice';

invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLanguageSelect.tsx

@@ -1,7 +1,6 @@
+import type { ComboboxOnChange } from '@invoke-ai/ui';
+import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { InvControl } from 'common/components/InvControl/InvControl';
-import { InvSelect } from 'common/components/InvSelect/InvSelect';
-import type { InvSelectOnChange } from 'common/components/InvSelect/types';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { languageChanged } from 'features/system/store/systemSlice';
 import { isLanguage } from 'features/system/store/types';
@@ -44,7 +43,7 @@ export const SettingsLanguageSelect = memo(() => {
     [language, options]
   );
 
-  const onChange = useCallback<InvSelectOnChange>(
+  const onChange = useCallback<ComboboxOnChange>(
     (v) => {
       if (!isLanguage(v?.value)) {
         return;
@@ -54,12 +53,10 @@ export const SettingsLanguageSelect = memo(() => {
     [dispatch]
   );
   return (
-    <InvControl
-      label={t('common.languagePickerLabel')}
-      isDisabled={!isLocalizationEnabled}
-    >
-      <InvSelect value={value} options={options} onChange={onChange} />
-    </InvControl>
+    <FormControl isDisabled={!isLocalizationEnabled}>
+      <FormLabel>{t('common.languagePickerLabel')}</FormLabel>
+      <Combobox value={value} options={options} onChange={onChange} />
+    </FormControl>
   );
 });
 

invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLogLevelSelect.tsx

@@ -1,8 +1,7 @@
+import type { ComboboxOnChange } from '@invoke-ai/ui';
+import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui';
 import { isLogLevel, zLogLevel } from 'app/logging/logger';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { InvControl } from 'common/components/InvControl/InvControl';
-import { InvSelect } from 'common/components/InvSelect/InvSelect';
-import type { InvSelectOnChange } from 'common/components/InvSelect/types';
 import { consoleLogLevelChanged } from 'features/system/store/systemSlice';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -22,7 +21,7 @@ export const SettingsLogLevelSelect = memo(() => {
     [consoleLogLevel, options]
   );
 
-  const onChange = useCallback<InvSelectOnChange>(
+  const onChange = useCallback<ComboboxOnChange>(
     (v) => {
       if (!isLogLevel(v?.value)) {
         return;
@@ -32,12 +31,10 @@ export const SettingsLogLevelSelect = memo(() => {
     [dispatch]
   );
   return (
-    <InvControl
-      label={t('common.languagePickerLabel')}
-      isDisabled={!shouldLogToConsole}
-    >
-      <InvSelect value={value} options={options} onChange={onChange} />
-    </InvControl>
+    <FormControl isDisabled={!shouldLogToConsole}>
+      <FormLabel>{t('common.languagePickerLabel')}</FormLabel>
+      <Combobox value={value} options={options} onChange={onChange} />
+    </FormControl>
   );
 });
 

invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx

@@ -1,12 +1,12 @@
-import { useDisclosure } from '@chakra-ui/react';
-import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
-import { InvMenuItem } from 'common/components/InvMenu/InvMenuItem';
-import { InvMenuList } from 'common/components/InvMenu/InvMenuList';
 import {
-  InvMenu,
-  InvMenuButton,
-  InvMenuGroup,
-} from 'common/components/InvMenu/wrapper';
+  IconButton,
+  Menu,
+  MenuButton,
+  MenuGroup,
+  MenuItem,
+  MenuList,
+  useDisclosure,
+} from '@invoke-ai/ui';
 import { useGlobalMenuClose } from 'common/hooks/useGlobalMenuClose';
 import AboutModal from 'features/system/components/AboutModal/AboutModal';
 import HotkeysModal from 'features/system/components/HotkeysModal/HotkeysModal';
@@ -33,69 +33,69 @@ const SettingsMenu = () => {
   const isGithubLinkEnabled = useFeatureStatus('githubLink').isFeatureEnabled;
 
   return (
-    <InvMenu isOpen={isOpen} onOpen={onOpen} onClose={onClose}>
-      <InvMenuButton
-        as={InvIconButton}
+    <Menu isOpen={isOpen} onOpen={onOpen} onClose={onClose}>
+      <MenuButton
+        as={IconButton}
         variant="link"
         aria-label={t('accessibility.menu')}
         icon={<RiSettings4Line fontSize={20} />}
         boxSize={8}
       />
 
-      <InvMenuList>
-        <InvMenuGroup title={t('common.communityLabel')}>
+      <MenuList>
+        <MenuGroup title={t('common.communityLabel')}>
           {isGithubLinkEnabled && (
-            <InvMenuItem
+            <MenuItem
               as="a"
               href={githubLink}
               target="_blank"
               icon={<RiGithubFill />}
             >
               {t('common.githubLabel')}
-            </InvMenuItem>
+            </MenuItem>
           )}
           {isBugLinkEnabled && (
-            <InvMenuItem
+            <MenuItem
               as="a"
               href={`${githubLink}/issues`}
               target="_blank"
               icon={<PiBugBeetleBold />}
             >
               {t('common.reportBugLabel')}
-            </InvMenuItem>
+            </MenuItem>
           )}
           {isDiscordLinkEnabled && (
-            <InvMenuItem
+            <MenuItem
               as="a"
               href={discordLink}
               target="_blank"
               icon={<RiDiscordFill />}
             >
               {t('common.discordLabel')}
-            </InvMenuItem>
+            </MenuItem>
           )}
-        </InvMenuGroup>
-        <InvMenuGroup title={t('common.settingsLabel')}>
+        </MenuGroup>
+        <MenuGroup title={t('common.settingsLabel')}>
           <HotkeysModal>
-            <InvMenuItem as="button" icon={<PiKeyboardBold />}>
+            <MenuItem as="button" icon={<PiKeyboardBold />}>
               {t('common.hotkeysLabel')}
-            </InvMenuItem>
+            </MenuItem>
           </HotkeysModal>
           <SettingsModal>
-            <InvMenuItem as="button" icon={<PiToggleRightFill />}>
+            <MenuItem as="button" icon={<PiToggleRightFill />}>
               {t('common.settingsLabel')}
-            </InvMenuItem>
+            </MenuItem>
           </SettingsModal>
-        </InvMenuGroup>
-        <InvMenuGroup title={t('accessibility.about')}>
+        </MenuGroup>
+        <MenuGroup title={t('accessibility.about')}>
           <AboutModal>
-            <InvMenuItem as="button" icon={<PiInfoBold />}>
+            <MenuItem as="button" icon={<PiInfoBold />}>
               {t('accessibility.about')}
-            </InvMenuItem>
+            </MenuItem>
           </AboutModal>
-        </InvMenuGroup>
-      </InvMenuList>
-    </InvMenu>
+        </MenuGroup>
+      </MenuList>
+    </Menu>
   );
 };
 

invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx

@@ -1,18 +1,20 @@
-import { Flex, useDisclosure } from '@chakra-ui/react';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { InvButton } from 'common/components/InvButton/InvButton';
-import { InvControl } from 'common/components/InvControl/InvControl';
 import {
-  InvModal,
-  InvModalBody,
-  InvModalCloseButton,
-  InvModalContent,
-  InvModalFooter,
-  InvModalHeader,
-  InvModalOverlay,
-} from 'common/components/InvModal/wrapper';
-import { InvSwitch } from 'common/components/InvSwitch/wrapper';
-import { InvText } from 'common/components/InvText/wrapper';
+  Button,
+  Flex,
+  FormControl,
+  FormLabel,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Switch,
+  Text,
+  useDisclosure,
+} from '@invoke-ai/ui';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import { useClearStorage } from 'common/hooks/useClearStorage';
 import { shouldUseCpuNoiseChanged } from 'features/parameters/store/generationSlice';
@@ -200,101 +202,109 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
         onClick: onSettingsModalOpen,
       })}
 
-      <InvModal
+      <Modal
         isOpen={isSettingsModalOpen}
         onClose={onSettingsModalClose}
         size="2xl"
         isCentered
       >
-        <InvModalOverlay />
-        <InvModalContent maxH="80vh" h="50vh">
-          <InvModalHeader bg="none">{t('common.settingsLabel')}</InvModalHeader>
-          <InvModalCloseButton />
-          <InvModalBody display="flex" flexDir="column" gap={4}>
+        <ModalOverlay />
+        <ModalContent maxH="80vh" h="50vh">
+          <ModalHeader bg="none">{t('common.settingsLabel')}</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody display="flex" flexDir="column" gap={4}>
             <ScrollableContent>
               <Flex flexDir="column" gap={4}>
                 <StickyScrollable title={t('settings.general')}>
-                  <InvControl label={t('settings.confirmOnDelete')}>
-                    <InvSwitch
+                  <FormControl>
+                    <FormLabel>{t('settings.confirmOnDelete')}</FormLabel>
+                    <Switch
                       isChecked={shouldConfirmOnDelete}
                       onChange={handleChangeShouldConfirmOnDelete}
                     />
-                  </InvControl>
+                  </FormControl>
                 </StickyScrollable>
 
                 <StickyScrollable title={t('settings.generation')}>
-                  <InvControl
-                    label={t('settings.enableNSFWChecker')}
-                    isDisabled={!isNSFWCheckerAvailable}
-                  >
-                    <InvSwitch
+                  <FormControl isDisabled={!isNSFWCheckerAvailable}>
+                    <FormLabel>{t('settings.enableNSFWChecker')}</FormLabel>
+                    <Switch
                       isChecked={shouldUseNSFWChecker}
                       onChange={handleChangeShouldUseNSFWChecker}
                     />
-                  </InvControl>
-                  <InvControl
-                    label={t('settings.enableInvisibleWatermark')}
-                    isDisabled={!isWatermarkerAvailable}
-                  >
-                    <InvSwitch
+                  </FormControl>
+                  <FormControl isDisabled={!isWatermarkerAvailable}>
+                    <FormLabel>
+                      {t('settings.enableInvisibleWatermark')}
+                    </FormLabel>
+                    <Switch
                       isChecked={shouldUseWatermarker}
                       onChange={handleChangeShouldUseWatermarker}
                     />
-                  </InvControl>
+                  </FormControl>
                 </StickyScrollable>
 
                 <StickyScrollable title={t('settings.ui')}>
-                  <InvControl label={t('settings.showProgressInViewer')}>
-                    <InvSwitch
+                  <FormControl>
+                    <FormLabel>{t('settings.showProgressInViewer')}</FormLabel>
+                    <Switch
                       isChecked={shouldShowProgressInViewer}
                       onChange={handleChangeShouldShowProgressInViewer}
                     />
-                  </InvControl>
-                  <InvControl label={t('settings.antialiasProgressImages')}>
-                    <InvSwitch
+                  </FormControl>
+                  <FormControl>
+                    <FormLabel>
+                      {t('settings.antialiasProgressImages')}
+                    </FormLabel>
+                    <Switch
                       isChecked={shouldAntialiasProgressImage}
                       onChange={handleChangeShouldAntialiasProgressImage}
                     />
-                  </InvControl>
-                  <InvControl
-                    label={t('parameters.useCpuNoise')}
-                    feature="noiseUseCPU"
-                  >
-                    <InvSwitch
+                  </FormControl>
+                  <FormControl feature="noiseUseCPU">
+                    <FormLabel>{t('parameters.useCpuNoise')}</FormLabel>
+                    <Switch
                       isChecked={shouldUseCpuNoise}
                       onChange={handleChangeShouldUseCpuNoise}
                     />
-                  </InvControl>
+                  </FormControl>
                   {shouldShowLocalizationToggle && <SettingsLanguageSelect />}
-                  <InvControl label={t('settings.enableInformationalPopovers')}>
-                    <InvSwitch
+                  <FormControl>
+                    <FormLabel>
+                      {t('settings.enableInformationalPopovers')}
+                    </FormLabel>
+                    <Switch
                       isChecked={shouldEnableInformationalPopovers}
                       onChange={handleChangeShouldEnableInformationalPopovers}
                     />
-                  </InvControl>
+                  </FormControl>
                 </StickyScrollable>
 
                 {shouldShowDeveloperSettings && (
                   <StickyScrollable title={t('settings.developer')}>
-                    <InvControl label={t('settings.shouldLogToConsole')}>
-                      <InvSwitch
+                    <FormControl>
+                      <FormLabel>{t('settings.shouldLogToConsole')}</FormLabel>
+                      <Switch
                         isChecked={shouldLogToConsole}
                         onChange={handleLogToConsoleChanged}
                       />
-                    </InvControl>
+                    </FormControl>
                     <SettingsLogLevelSelect />
-                    <InvControl label={t('settings.enableImageDebugging')}>
-                      <InvSwitch
+                    <FormControl>
+                      <FormLabel>
+                        {t('settings.enableImageDebugging')}
+                      </FormLabel>
+                      <Switch
                         isChecked={enableImageDebugging}
                         onChange={handleChangeEnableImageDebugging}
                       />
-                    </InvControl>
+                    </FormControl>
                   </StickyScrollable>
                 )}
 
                 {shouldShowClearIntermediates && (
                   <StickyScrollable title={t('settings.clearIntermediates')}>
-                    <InvButton
+                    <Button
                       tooltip={
                         hasPendingItems
                           ? t('settings.clearIntermediatesDisabled')
@@ -308,68 +318,65 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
                       {t('settings.clearIntermediatesWithCount', {
                         count: intermediatesCount ?? 0,
                       })}
-                    </InvButton>
-                    <InvText fontWeight="bold">
+                    </Button>
+                    <Text fontWeight="bold">
                       {t('settings.clearIntermediatesDesc1')}
-                    </InvText>
-                    <InvText variant="subtext">
+                    </Text>
+                    <Text variant="subtext">
                       {t('settings.clearIntermediatesDesc2')}
-                    </InvText>
-                    <InvText variant="subtext">
+                    </Text>
+                    <Text variant="subtext">
                       {t('settings.clearIntermediatesDesc3')}
-                    </InvText>
+                    </Text>
                   </StickyScrollable>
                 )}
 
                 <StickyScrollable title={t('settings.resetWebUI')}>
-                  <InvButton
-                    colorScheme="error"
-                    onClick={handleClickResetWebUI}
-                  >
+                  <Button colorScheme="error" onClick={handleClickResetWebUI}>
                     {t('settings.resetWebUI')}
-                  </InvButton>
+                  </Button>
                   {shouldShowResetWebUiText && (
                     <>
-                      <InvText variant="subtext">
+                      <Text variant="subtext">
                         {t('settings.resetWebUIDesc1')}
-                      </InvText>
-                      <InvText variant="subtext">
+                      </Text>
+                      <Text variant="subtext">
                         {t('settings.resetWebUIDesc2')}
-                      </InvText>
+                      </Text>
                     </>
                   )}
                 </StickyScrollable>
               </Flex>
             </ScrollableContent>
-          </InvModalBody>
+          </ModalBody>
 
-          <InvModalFooter />
-        </InvModalContent>
-      </InvModal>
+          <ModalFooter />
+        </ModalContent>
+      </Modal>
 
-      <InvModal
+      <Modal
         closeOnOverlayClick={false}
         isOpen={isRefreshModalOpen}
         onClose={onRefreshModalClose}
         isCentered
         closeOnEsc={false}
       >
-        <InvModalOverlay backdropFilter="blur(40px)" />
-        <InvModalContent>
-          <InvModalHeader />
-          <InvModalBody>
+        <ModalOverlay backdropFilter="blur(40px)" />
+        <ModalContent>
+          <ModalHeader />
+          <ModalBody>
             <Flex justifyContent="center">
-              <InvText fontSize="lg">
-                <InvText>
+              <Text fontSize="lg">
+                <Text>
                   {t('settings.resetComplete')} {t('settings.reloadingIn')}{' '}
                   {countdown}...
-                </InvText>
-              </InvText>
+                </Text>
+              </Text>
             </Flex>
-          </InvModalBody>
-          <InvModalFooter />
-        </InvModalContent>
-      </InvModal>
+          </ModalBody>
+          <ModalFooter />
+        </ModalContent>
+      </Modal>
     </>
   );
 };

invokeai/frontend/web/src/features/system/components/SettingsModal/StyledFlex.tsx

@@ -1,4 +1,4 @@
-import { Flex } from '@chakra-ui/react';
+import { Flex } from '@invoke-ai/ui';
 import type { PropsWithChildren } from 'react';
 import { memo } from 'react';
 

invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx

@@ -1,6 +1,5 @@
-import { Icon } from '@chakra-ui/react';
+import { Icon, Tooltip } from '@invoke-ai/ui';
 import { useAppSelector } from 'app/store/storeHooks';
-import { InvTooltip } from 'common/components/InvTooltip/InvTooltip';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiWarningBold } from 'react-icons/pi';
@@ -11,14 +10,14 @@ const StatusIndicator = () => {
 
   if (!isConnected) {
     return (
-      <InvTooltip
+      <Tooltip
         label={t('common.statusDisconnected')}
         placement="end"
         shouldWrapChildren
         gutter={10}
       >
         <Icon as={PiWarningBold} color="error.300" />
-      </InvTooltip>
+      </Tooltip>
     );
   }
 

invokeai/frontend/web/src/features/system/components/StickyScrollable.tsx

@@ -1,5 +1,4 @@
-import { Flex } from '@chakra-ui/layout';
-import { InvHeading } from 'common/components/InvHeading/wrapper';
+import { Flex, Heading } from '@invoke-ai/ui';
 import type { PropsWithChildren } from 'react';
 import { memo } from 'react';
 
@@ -11,7 +10,7 @@ export const StickyScrollableHeading = memo(
   (props: StickyScrollableHeadingProps) => {
     return (
       <Flex ps={2} pb={4} position="sticky" zIndex={1} top={0} bg="base.800">
-        <InvHeading size="sm">{props.title}</InvHeading>
+        <Heading size="sm">{props.title}</Heading>
       </Flex>
     );
   }

invokeai/frontend/web/src/features/system/store/systemSlice.ts

@@ -1,4 +1,4 @@
-import type { UseToastOptions } from '@chakra-ui/react';
+import type { UseToastOptions } from '@invoke-ai/ui';
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice, isAnyOf } from '@reduxjs/toolkit';
 import type { RootState } from 'app/store/store';

invokeai/frontend/web/src/features/system/store/types.ts

@@ -1,4 +1,4 @@
-import type { UseToastOptions } from '@chakra-ui/react';
+import type { UseToastOptions } from '@invoke-ai/ui';
 import type { LogLevel } from 'app/logging/logger';
 import type { ProgressImage } from 'services/events/types';
 import { z } from 'zod';

invokeai/frontend/web/src/features/system/util/makeToast.ts

@@ -1,4 +1,4 @@
-import type { UseToastOptions } from '@chakra-ui/react';
+import type { UseToastOptions } from '@invoke-ai/ui';
 
 export type MakeToastArg = string | UseToastOptions;