@stack-spot/ai-chat-widget 1.38.2-beta.1 → 2.0.0-beta.1

package/src/components/ButtonFavorite.tsx

@@ -1,16 +1,14 @@
-import { Button, IconBox } from '@citric/core'
-import { Star, StarFill } from '@citric/icons'
-import { IconButton, LoadingCircular } from '@citric/ui'
+import { BaseFavoriteProps, Favorite } from '@stack-spot/citric-react'
 import { useTranslate } from '@stack-spot/portal-translate'
-import { MouseEvent, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { dictionaryFavorites } from './form/dictionary'
 
-interface ItemFavorite {
+export interface ItemFavorite {
   id?: string,
   slug?: string,
 }
 
-interface Favorite<T extends ItemFavorite> {
+export interface Favorite<T extends ItemFavorite> {
   /**
    * id or slug to be used on functions
    */
@@ -34,17 +32,17 @@ interface Favorite<T extends ItemFavorite> {
 }
 
 interface Props<T extends ItemFavorite> {
-  /**
-   * Determine whether the component should be a Button or an IconButton.
-   */
-  isIconButton?: boolean,
   /**
    * An object containing favorite items and related operations.
   */
  favorite: Favorite<T>,
+ /**
+  * @default 'square'
+  */
+ appearance?: BaseFavoriteProps['appearance'],
 }
 
-export const ButtonFavorite = <T extends ItemFavorite>({ favorite, isIconButton = false }: Props<T>) => {
+export const ButtonFavorite = <T extends ItemFavorite>({ favorite, appearance = 'square' }: Props<T>) => {
   const [isFavorite, setIsFavorite] = useState(false)
   const { idOrSlug, listFavorites } = favorite || {}
 
@@ -53,12 +51,12 @@ export const ButtonFavorite = <T extends ItemFavorite>({ favorite, isIconButton
   }, [listFavorites])
 
   return (
-    <ButtonWrapper isFavorite={isFavorite} isIconButton={isIconButton} favorite={favorite} />
+    <ButtonWrapper isFavorite={isFavorite} favorite={favorite} appearance={appearance} />
   )
 }
 
-const ButtonWrapper = <T extends ItemFavorite>({ isIconButton, isFavorite, favorite }: 
-  { isIconButton?: boolean, isFavorite: boolean, favorite: Favorite<T>}) => {
+const ButtonWrapper = <T extends ItemFavorite>({ isFavorite, favorite, appearance }: 
+  { isFavorite: boolean, favorite: Favorite<T>, appearance: BaseFavoriteProps['appearance'] }) => {
   const t = useTranslate(dictionaryFavorites)
   const { idOrSlug, onAddFavorite, onRemoveFavorite } = favorite
   const [loading, setLoading] = useState(false)
@@ -69,37 +67,12 @@ const ButtonWrapper = <T extends ItemFavorite>({ isIconButton, isFavorite, favor
     setLoading(false)    
   }
 
-  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation()
-    isFavorite ? handleAction(idOrSlug, onRemoveFavorite) : handleAction(idOrSlug, onAddFavorite) 
-  }
-  
-
-  if (isIconButton){
-    return (
-      <IconButton 
-        type="button"
-        disabled={ loading } 
-        aria-label={`${t[isFavorite ? 'remove' : 'become']} ${t.favorite}`}
-        title={`${t[isFavorite ? 'remove' : 'become']} ${t.favorite}`}
-        onClick={(e: MouseEvent) => handleClick(e as MouseEvent<HTMLButtonElement>)}>
-        <IconBox colorIcon={isFavorite ? 'yellow.500' : 'light'}>
-          {loading ? <LoadingCircular colorScheme="warning"/> : isFavorite ? <StarFill/> : <Star/> }
-        </IconBox>
-      </IconButton>
-    )
-  }
-  return (
-    <Button 
-      type="button"
-      colorScheme="light" 
-      disabled={ loading } 
-      aria-label={`${t[isFavorite ? 'remove' : 'become']} ${t.favorite}`}
-      title={`${t[isFavorite ? 'remove' : 'become']} ${t.favorite}`}
-      onClick={(e: MouseEvent) => handleClick(e as MouseEvent<HTMLButtonElement>)}>
-      <IconBox colorIcon={isFavorite ? 'yellow.500' : 'light'}>
-        {loading ? <LoadingCircular colorScheme="warning"/> : isFavorite ? <StarFill/> : <Star/> }
-      </IconBox>
-    </Button>
-  )
+  return <Favorite
+    loading={loading}
+    appearance={appearance}
+    aria-label={`${t[isFavorite ? 'remove' : 'become']} ${t.favorite}`}
+    title={`${t[isFavorite ? 'remove' : 'become']} ${t.favorite}`}
+    value={isFavorite}
+    onChange={checked => handleAction(idOrSlug, checked ? onAddFavorite : onRemoveFavorite)}
+  />
 }

package/src/components/Code.tsx

@@ -2,9 +2,7 @@
  * Copied from the extension's webview.
  */
 
-import { Text } from '@citric/core'
-import { AddCode, ChevronDoubleDown, Collapse, Copy, Download } from '@citric/icons'
-import { IconButton } from '@citric/ui'
+import { IconButton, Text } from '@stack-spot/citric-react'
 import { theme, useThemeKind } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { CSSProperties, useState } from 'react'
@@ -79,6 +77,12 @@ const CodeBox = styled.code`
           opacity: 1;
         }
       }
+
+      .copy-btn {
+        &:after {
+          left: -30px; // prevents scrolling in the horizontal axis.
+        }
+      }
     }
   }
 
@@ -149,14 +153,14 @@ export const Code = ({
           </div>
           <div className="action-bar" role="toolbar">
             <IconButton
+              icon="Collapse"
               aria-label={showLines ? t.hideLines : t.showLines}
               title={showLines ? t.hideLines : t.showLines}
               onClick={() => setShowLines(v => !v)}
               style={{ position: 'relative', transform: showLines ? undefined : 'rotate(180deg)', transition: 'transform 0.2s' }}
-            >
-              <Collapse />
-            </IconButton>
+            />
             <IconButton
+              icon="Download"
               aria-label={t.downloadCode}
               title={t.downloadCode}
               onClick={() => {
@@ -176,41 +180,30 @@ export const Code = ({
                   console.error(t.downloadError, e)
                 }
               }}
-            >
-              <Download />
-            </IconButton>
+            />
             <IconButton
+              icon="Copy"
               aria-label={t.copy}
               title={t.copy}
               onClick={onClickCopy}
               style={{ position: 'relative' }}
-            >
-              <Copy />
-            </IconButton>
-            {onInsertCode
-              ? (
-                <IconButton
-                  aria-label={t.insert}
-                  title={t.insert}
-                  onClick={onClickInsert}
-                  style={{ position: 'relative' }}
-                >
-                  <ChevronDoubleDown style={{ transform: 'rotate(90deg)' }} />
-                </IconButton>
-              )
-              : null}
-            {onNewFile
-              ? (
-                <IconButton
-                  aria-label={t.newFile}
-                  title={t.newFile}
-                  onClick={onClickNewFile}
-                  style={{ position: 'relative' }}
-                >
-                  <AddCode />
-                </IconButton>
-              )
-              : null}
+              feedback={t.copied}
+              className="copy-btn"
+            />
+            {onInsertCode ? <IconButton
+              icon="ChevronDoubleDown"
+              aria-label={t.insert}
+              title={t.insert}
+              onClick={onClickInsert}
+              style={{ position: 'relative', transform: 'rotate(90deg)' }}
+            /> : null}
+            {onNewFile ? <IconButton
+              icon="AddCode"
+              aria-label={t.newFile}
+              title={t.newFile}
+              onClick={onClickNewFile}
+              style={{ position: 'relative' }}
+            /> : null}
           </div>
         </div>
       )}
@@ -235,6 +228,7 @@ export const Code = ({
 const dictionary = {
   en: {
     copy: 'Copy code to the clipboard',
+    copied: 'Copied',
     insert: 'Inject code into editor',
     newFile: 'Creates a new file with this code as its content',
     hideLines: 'Hide line numbers',
@@ -244,6 +238,7 @@ const dictionary = {
   },
   pt: {
     copy: 'Copiar código para a área de transferência',
+    copied: 'Copiado',
     insert: 'Inserir código no editor',
     newFile: 'Criar um novo arquivo com este código como conteúdo',
     hideLines: 'Esconder números das linhas',

package/src/components/ComponentNavigator.tsx

@@ -1,6 +1,4 @@
-import { Flex } from '@citric/core'
-import { ArrowLeft } from '@citric/icons'
-import { IconButton } from '@citric/ui'
+import { IconButton, Row } from '@stack-spot/citric-react'
 import { createContext, useCallback, useContext, useMemo, useState } from 'react'
 
 /**
@@ -81,12 +79,10 @@ export function ComponentNavigator<T extends NavigationMap, K extends keyof T>({
   return (<NavigationContext.Provider value={navigationContext as NavigationContextType<NavigationMap>}>
     <div className={`content-navigator ${className || isFullScreen ? 'full' : ''}`} role="navigation">
       {canGoBack && (
-        <Flex alignItems="center" w={12} sx={{ gap: '4px' }}>
-          <IconButton onClick={goBack} appearance="square" className="back-button" aria-label="Back">
-            <ArrowLeft />
-          </IconButton>
+        <Row gap="12px" style={{ alignSelf: 'stretch' }}>
+          <IconButton icon="ArrowLeft" onClick={goBack} className="back-button" aria-label="Back" />
           {renderTitle?.(currentItem)}
-        </Flex>
+        </Row>
       )}
       <Component {...(currentItem.props as any)} />
     </div>

package/src/components/FadingOverflow.tsx

@@ -1,5 +1,4 @@
-import { IconBox } from '@citric/core'
-import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@citric/icons'
+import { Icon } from '@stack-spot/citric-icons'
 import { listToClass, theme, WithStyle } from '@stack-spot/portal-theme'
 import { debounce } from 'lodash'
 import { useEffect, useRef } from 'react'
@@ -80,7 +79,7 @@ const OverflowBox = styled.div`
     pointer-events: none;
     transition: opacity 0.3s;
 
-    ${IconBox} {
+    .citric-icon {
       background-color: ${theme.color.light[300]};
       border-radius: 50%;
       width: 16px;
@@ -253,10 +252,10 @@ export const FadingOverflow = (
   return scroll === 'arrows' ? (
     <OverflowBox {...props} className={listToClass(['scroll-arrows', className])}>
       <div className="content" ref={ref}>{children}</div>
-      <div className="scroll-to-left" aria-hidden><IconBox size="xs"><ChevronLeft /></IconBox></div>
-      <div className="scroll-to-right" aria-hidden><IconBox size="xs"><ChevronRight /></IconBox></div>
-      <div className="scroll-to-top" aria-hidden><IconBox size="xs"><ChevronUp /></IconBox></div>
-      <div className="scroll-to-bottom" aria-hidden><IconBox size="xs"><ChevronDown /></IconBox></div>
+      <div className="scroll-to-left" aria-hidden><Icon icon="ChevronLeft" size="xs" /></div>
+      <div className="scroll-to-right" aria-hidden><Icon icon="ChevronRight" size="xs" /></div>
+      <div className="scroll-to-top" aria-hidden><Icon icon="ChevronUp" size="xs" /></div>
+      <div className="scroll-to-bottom" aria-hidden><Icon icon="ChevronDown" size="xs" /></div>
     </OverflowBox>
   ) : <OverflowBox {...props} className={className} ref={ref}>{children}</OverflowBox>
 }

package/src/components/FileDescription.tsx

@@ -1,6 +1,5 @@
-import { IconBox, Text } from '@citric/core'
-import { Document, Sync, TimesMini } from '@citric/icons'
-import { IconButton, LoadingCircular } from '@citric/ui'
+import { Icon } from '@stack-spot/citric-icons'
+import { IconButton, ProgressCircular, Text } from '@stack-spot/citric-react'
 import { theme } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { styled } from 'styled-components'
@@ -79,21 +78,26 @@ export const FileDescription = ({ fileName, icon, status, onRemove, onRetry }: F
   return (
     <Styled className={status} aria-busy={status === 'pending'}>
       <div className="image">
-        {icon ?? <IconBox><Document /></IconBox>}
+        {icon ?? <Icon icon="Document" />}
         {status === 'pending' && <div className="status" aria-label={t.loading}>
-          <LoadingCircular size="xs" />
+          <ProgressCircular size="xs" />
         </div>}
         {status === 'error' && <div className="status" aria-label={t.error}>
-          <IconButton appearance="circle" color="danger" title={t.retry} aria-label={t.retry} onClick={onRetry}><Sync /></IconButton>
+          <IconButton icon="Sync" appearance="circle" color="danger" title={t.retry} aria-label={t.retry} onClick={onRetry} />
         </div>}
       </div>
       <div className="details">
         <Text appearance="microtext1" className="name" title={name}>{name}</Text>
-        <Text appearance="microtext1" colorScheme="light.700">{extension.toUpperCase()}</Text>
+        <Text appearance="microtext1" color="light.700">{extension.toUpperCase()}</Text>
       </div>
-      {onRemove && <IconButton onClick={onRemove} title={t.remove} aria-label={`${t.remove} ${name}`}>
-        <TimesMini />
-      </IconButton>}
+      {onRemove && <IconButton
+        icon="TimesMini"
+        onClick={onRemove}
+        title={t.remove}
+        arial-label={`${t.remove} ${name}`}
+        style={{ alignSelf: 'start' }}
+        size="xs"
+      />}
     </Styled>
   )
 }

package/src/components/HistoryList.tsx

@@ -1,9 +1,10 @@
-import { Text } from '@citric/core'
+import { Text } from '@stack-spot/citric-react'
 import { theme, WithStyle } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { groupBy, map } from 'lodash'
 import { useMemo } from 'react'
 import { styled } from 'styled-components'
+import { useMidnightUpdateView } from '../hooks/midnight-update-view'
 import { subtractDays } from '../utils/date'
 
 type HistorySectionName = 'today' | 'yesterday' | 'last7' | 'last30' | 'older'
@@ -69,6 +70,8 @@ function dateToSectionName(date: Date): HistorySectionName {
  */
 export function HistoryList<T>({ getDate, items, keygen, className, style, renderItem }: Props<T>) {
   const t = useTranslate(dictionary)
+  useMidnightUpdateView()
+  
   const sections = useMemo(() => {
     const byDate = groupBy(items, item => dateToSectionName(getDate(item)))
     return map(byDate, (value: T[], key: HistorySectionName) => (

package/src/components/ListResource.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, Text } from '@citric/core'
+import { Row, Text } from '@stack-spot/citric-react'
 import { WithStyle } from '@stack-spot/portal-theme'
 import { useMemo } from 'react'
 
@@ -43,18 +43,18 @@ export function ListResource<T>({ list, renderLabel, renderBeforeElement, render
       const content = typeof label === 'string' ? <Text>{label}</Text> : label
       return (
         <li key={keygen(listItem)}>
-          <Flex alignItems="center">
+          <Row>
             {renderBeforeElement?.(listItem)}
             {content}
             {renderAfterElement?.(listItem)}
-          </Flex>
+          </Row>
         </li>
       )
     }), [list])
     
   return (
-    <Box as="ul" m={0} p={0} w={12} style={style} className={className}>
+    <ul style={{ margin: 0, padding: 0, width: '100%', ...style }} className={className}>
       {items}
-    </Box>
+    </ul>
   )
 }

package/src/components/Markdown.tsx

@@ -32,7 +32,7 @@ export const Markdown = (
 ) => (
   <>
     <ReactMarkdown
-      className="markdown"
+      className="markdown apply-citric"
       remarkPlugins={[[remarkGfm]]}
       components={{
         a: props => <a target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'underline' }} {...props} />,

package/src/components/Modal.tsx

@@ -1,6 +1,4 @@
-import { Text } from '@citric/core'
-import { Times } from '@citric/icons'
-import { IconButton } from '@citric/ui'
+import { IconButton, Text } from '@stack-spot/citric-react'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
@@ -19,7 +17,7 @@ const ModalContent = ({ title, children, onClose }: Omit<Props, 'open'>) => {
     <div className="chat-modal">
       <header>
         {typeof title === 'string' ? <Text appearance="h6">{title}</Text> : title}
-        <IconButton aria-label={t.close} title={t.close} appearance="circle" onClick={onClose}><Times /></IconButton>
+        <IconButton icon="Times" aria-label={t.close} title={t.close} onClick={onClose} />
       </header>
       <article>{children}</article>
     </div>

package/src/components/QuickStartButton.tsx

@@ -1,12 +1,13 @@
-import { Button, IconBox, Text } from '@citric/core'
+import { Icon } from '@stack-spot/citric-icons'
+import { Button, Text } from '@stack-spot/citric-react'
 import { WithStyle } from '@stack-spot/portal-theme'
 import { ButtonAction } from '../types'
 
-interface Props extends ButtonAction, WithStyle { }
+type Props = ButtonAction & WithStyle
 
-export const QuickStartButton = ({ label, onClick, className, icon, style }: Props) => {
+export const QuickStartButton = ({ label, onClick, className, group, icon, style }: Props) => {
   const content = <>
-    {icon && <IconBox color="light" aria-hidden>{icon}</IconBox>}
+    {icon && <Icon group={group} icon={icon} aria-hidden />}
     <Text nowrapEllipsis>{label}</Text>
   </>
 

package/src/components/RightPanelForm.tsx

@@ -1,10 +1,9 @@
-import { Card } from '@citric/ui'
+import { FallbackBoundary } from '@stack-spot/citric-react'
 import { theme } from '@stack-spot/portal-theme'
 import { styled } from 'styled-components'
 import { panelAnimationTime } from '../right-panel/constants'
 import { PropsOf } from '../types'
 import { AutoFocus } from './AutoFocus'
-import { FallbackBoundary } from './FallbackBoundary'
 
 const Form = styled.form`
   display: flex;
@@ -14,7 +13,7 @@ const Form = styled.form`
   flex: 1;
   gap: 20px;
 
-  > .content, .content-navigator .content, .content-navigator:not(.full) {
+  > .content, .content-navigator > .content, .content-navigator:not(.full) {
     display: flex;
     flex-direction: column;
     gap: 8px;
@@ -52,22 +51,30 @@ const Form = styled.form`
   > button {
     margin-right: auto;
   }
-
-  .search {
-    margin-bottom: 8px;
-  }
-
+  
   .option-list {
     overflow: auto;
+    > .row {
+      gap: 6px;
+      align-items: start;
+    }
+    [data-citric="accordion"] {
+      background-color: ${theme.color.light[400]};
+      flex: 1;
+      > header {
+        min-height: 24px;
+        padding: 8px 10px;
+        align-items: center;
+        p {
+          flex: 1;
+        }
+      }
+    }
   }
 
-  li.filtered-out {
+  .filtered-out {
     opacity: 0.5;
   }
-
-  ${Card} svg {
-    fill: transparent;
-  }
 `
 
 /**

package/src/components/RightPanelTabs.tsx

@@ -1,43 +1,15 @@
-import { Tabs, TabsItem } from '@citric/ui'
-import { useMemo, useState } from 'react'
-import styled from 'styled-components'
+import { Tab, Tabs } from '@stack-spot/citric-react'
+import { useMemo } from 'react'
 import { RightPanelForm } from './RightPanelForm'
 
-interface Tab {
-  title: string,
-  content: React.ReactNode,
-}
-
 interface Props {
   tabs: Tab[],
 }
 
-const StyledTabs = styled(Tabs)`
-  > button {
-    flex: 1;
-    padding: 8px 0;
-  }
-`
-
-const StyledTabsItem = styled(TabsItem)`
-  flex: 1;
-  overflow: hidden;
-`
-
 /**
  * Tabs for the right panel content.
  */
 export const RightPanelTabs = ({ tabs }: Props) => {
-  const [currentTab, setCurrentTab] = useState(0)
-  const tabItems = useMemo(() => tabs.map(({ content, title }) => (
-    <StyledTabsItem key={title} title={title}>
-      <RightPanelForm>{content}</RightPanelForm>
-    </StyledTabsItem>
-  )), [tabs])
-
-  return (
-    <StyledTabs activeIndex={currentTab} onChange={setCurrentTab}>
-      {tabItems}
-    </StyledTabs>
-  )
+  const tabItems = useMemo(() => tabs.map(t => ({ ...t, content: <RightPanelForm>{t.content}</RightPanelForm> })), [tabs])
+  return <Tabs tabs={tabItems} equallySized />
 }

package/src/components/Selector/index.tsx

@@ -1,6 +1,4 @@
-import { IconBox, Text } from '@citric/core'
-import { ExternalLink } from '@citric/icons'
-import { IconButton } from '@citric/ui'
+import { FallbackBoundary, IconLink, Text } from '@stack-spot/citric-react'
 import { useKeyboardControls } from '@stack-spot/portal-components'
 import { AgentVisibilityLevel } from '@stack-spot/portal-network'
 import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
@@ -9,7 +7,6 @@ import { useCurrentChatState, useWidgetState } from '../../context/hooks'
 import { getUrlToStackSpotAI } from '../../utils/url'
 import { ButtonFavorite } from '../ButtonFavorite'
 import { Fading } from '../Fading'
-import { FallbackBoundary } from '../FallbackBoundary'
 import { SelectorBox } from './styled'
 
 type SectionVisibility =  AgentVisibilityLevel
@@ -100,10 +97,17 @@ const ListItem = <T extends Item>({ item, selectorConfig, onSelect, favorite }:
       >
         {renderComponentItem(item)}
       </button>
-      <IconButton as="a" title={linkTitle} aria-label={linkTitle} href={`${getUrlToStackSpotAI()}${urlBuilder(item)}`} target="_blank">
-        <ExternalLink />
-      </IconButton>
-      <ButtonFavorite favorite={{ ...favorite, idOrSlug: favorite?.favoriteIsSlug ? item.slug : item?.id, listFavorites }} isIconButton />
+      <IconLink
+        icon="ExternalLink"
+        title={linkTitle}
+        aria-label={linkTitle}
+        href={`${getUrlToStackSpotAI()}${urlBuilder(item)}`}
+        target="_blank"
+      />
+      <ButtonFavorite
+        appearance="text"
+        favorite={{ ...favorite, idOrSlug: favorite?.favoriteIsSlug ? item.slug : item?.id, listFavorites }}
+      />
     </li>
   )
 }
@@ -128,9 +132,9 @@ const List = <T extends Item>({ selectorConfig, filter, visibility, onSelect, fa
   }, [filter, items, visibility, favorites])
 
 
-  if (!items.length) return <Text className="empty" colorScheme="light.700">{interpolate(t.noData, selectorConfig.resourceName)}</Text>
+  if (!items.length) return <Text className="empty" color="light.700">{interpolate(t.noData, selectorConfig.resourceName)}</Text>
   if (!filtered?.length)
-    <Text className="empty" colorScheme="light.700">{interpolate(t.noResults, selectorConfig.resourceName)}</Text>
+    <Text className="empty" color="light.700">{interpolate(t.noResults, selectorConfig.resourceName)}</Text>
 
   return (
     <ul className="selector-list">
@@ -180,8 +184,8 @@ const SelectorContent = ({ filter, onClose, selectorConfig, favorite }: ContentP
   return (
     <div ref={ref}>
       <header>
-        <IconBox>{icon}</IconBox>
-        <Text as="h3" className="uppercase"> {resourceName} </Text>
+        {icon}
+        <Text tag="h3">{resourceName}</Text>
       </header>
       <div className="body">
         {isGroupResourcesByScope && (
@@ -190,7 +194,7 @@ const SelectorContent = ({ filter, onClose, selectorConfig, favorite }: ContentP
             {sections.map(createSectionItem)}
           </ul>
         )}
-        <FallbackBoundary message={interpolate(t.error, selectorConfig.resourceName)} mini>
+        <FallbackBoundary message={interpolate(t.error, selectorConfig.resourceName)}>
           <List filter={filter} visibility={visibility} selectorConfig={selectorConfig} onSelect={onSelectItem} favorite={favorite} />
         </FallbackBoundary>
       </div>

package/src/components/Selector/styled.ts

@@ -40,13 +40,16 @@ export const SelectorBox = styled.div<{ $tabsCount: number }>`
       flex-direction: row;
       gap: 8px;
       align-items: center;
-      padding: 8px;
+      padding: 0 8px;
       margin-bottom: 4px;
-      font-family: 'San Francisco';
-      text-transform: uppercase;
-      font-weight: 500;
-      font-size: 11px;
       background-color: ${theme.color.light[500]};
+      height: 40px;
+      h3 {
+        text-transform: uppercase;
+        font-weight: 500;
+        font-size: 12px;
+        margin: 0;
+      }
     }
 
     .body {

package/src/components/StackedBadge.tsx

@@ -1,4 +1,4 @@
-import { IconBox, Text } from '@citric/core'
+import { Text } from '@stack-spot/citric-react'
 import { theme } from '@stack-spot/portal-theme'
 import { DetailedHTMLProps, HTMLAttributes } from 'react'
 import { styled } from 'styled-components'
@@ -46,9 +46,9 @@ const Styled = styled.div`
       }
     }
 
-    i {
-      width: 12px;
-      height: 12px;
+    .citric-icon {
+      margin: 1px;
+      font-size: 10px;
     }
 
     img, svg {
@@ -67,7 +67,7 @@ export const StackedBadge = ({ label, images, ...props }: Props) => (
           <li key={key || i}>
             {url
               ? <img alt={name} aria-label={name} title={name} src={url} />
-              : <IconBox size="xs" aria-label={name} title={name}>{icon}</IconBox>
+              : <span aria-label={name} title={name}>{icon}</span>
             }
           </li>
         ),