@stack-spot/ai-chat-widget 1.36.1-betacitric.1 → 1.36.1

package/src/StackspotAIWidget.tsx

@@ -1,6 +1,7 @@
-import { FallbackBoundary } from '@stack-spot/citric-react'
 import { listToClass, WithStyle } from '@stack-spot/portal-theme'
 import { useMemo, useRef } from 'react'
+import { FallbackBoundary } from './components/FallbackBoundary'
+import { TooltipProvider } from './components/Tooltip'
 import { useCurrentChatMessages, useCurrentChatState, useWidgetState } from './context/hooks'
 import './layout.css'
 import { RightPanel } from './right-panel/RightPanel'
@@ -85,39 +86,41 @@ export const StackspotAIWidget = (
 
   return useMemo(() => (
     <FallbackBoundary>
-      <RightPanelProvider chatWindow={chatWindowRef} panel={rightPanelRef}>
-        <div className={listToClass(['ai-chat-widget', isMinimized && 'minimized', className])} translate="no" style={style}>
-          <div className="chat-window" ref={chatWindowRef}>
-            {hasHeader &&<>
-              {isMinimized
-                ? <MinimizedHeader {...minimizedActions} />
-                : <ChatTabSelection />
-              }
-            </>
-            }
-            <div className="chat-container" ref={chatWindowRef}>
-              <div className="chat-content">
-                {prefix}
-                {isCurrentChatEmpty
-                  ? (children ?? <Home username={username} initialAgents={initialAgents} urlCreateAgent={urlCreateAgent} />)
-                  : <Chat username={username} beforeMessage={beforeMessage} afterMessage={afterMessage} />
+      <TooltipProvider>
+        <RightPanelProvider chatWindow={chatWindowRef} panel={rightPanelRef}>
+          <div className={listToClass(['ai-chat-widget', isMinimized && 'minimized', className])} translate="no" style={style}>
+            <div className="chat-window" ref={chatWindowRef}>
+              {hasHeader &&<>
+                {isMinimized
+                  ? <MinimizedHeader {...minimizedActions} />
+                  : <ChatTabSelection />
                 }
+              </>
+              }
+              <div className="chat-container" ref={chatWindowRef}>
+                <div className="chat-content">
+                  {prefix}
+                  {isCurrentChatEmpty
+                    ? (children ?? <Home username={username} initialAgents={initialAgents} urlCreateAgent={urlCreateAgent} />)
+                    : <Chat username={username} beforeMessage={beforeMessage} afterMessage={afterMessage} />
+                  }
+                </div>
+                {features.messageInput && <MessageInput chatWindowRef={chatWindowRef} />}
               </div>
-              {features.messageInput && <MessageInput chatWindowRef={chatWindowRef} />}
             </div>
+            <Stacks />
+            {!isTrial && <Workspaces />}
+            <KnowledgeSources />
+            <KSDocument />
+            <Agents />
+            <Editor />
+            <ChatHistory />
+            <Steps />
+            <Tools />
+            <div className="chat-right-panel" ref={rightPanelRef}><RightPanel /></div>
           </div>
-          <Stacks />
-          {!isTrial && <Workspaces />}
-          <KnowledgeSources />
-          <KSDocument />
-          <Agents />
-          <Editor />
-          <ChatHistory />
-          <Steps />
-          <Tools />
-          <div className="chat-right-panel" ref={rightPanelRef}><RightPanel /></div>
-        </div>
-      </RightPanelProvider>
+        </RightPanelProvider>
+      </TooltipProvider>
     </FallbackBoundary>
   ), [isCurrentChatEmpty, username, isMinimized, children, initialAgents])
 }

package/src/app-metadata.json

@@ -1,7 +1,7 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "1.36.1-betacitric.1",
-  "date": "Thu Aug 14 2025 15:19:32 GMT-0300 (Horário Padrão de Brasília)",
+  "version": "1.36.1",
+  "date": "Mon Aug 18 2025 15:03:09 GMT+0000 (Coordinated Universal Time)",
   "dependencies": [
     {
       "name": "@stack-spot/app-metadata",
@@ -88,32 +88,36 @@
       "version": "5.6.2"
     },
     {
-      "name": "@dagrejs/dagre",
-      "version": "1.1.4"
+      "name": "@citric/core",
+      "version": "6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0))"
     },
     {
-      "name": "@monaco-editor/react",
-      "version": "4.6.0(monaco-editor@0.52.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
+      "name": "@citric/icons",
+      "version": "5.13.0(react@18.2.0)"
+    },
+    {
+      "name": "@citric/ui",
+      "version": "6.10.2(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.13.0(react@18.2.0))(lodash@4.17.21)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0))"
     },
     {
-      "name": "@stack-spot/citric-icons",
-      "version": "0.2.1"
+      "name": "@dagrejs/dagre",
+      "version": "1.1.4"
     },
     {
-      "name": "@stack-spot/citric-react",
-      "version": "0.20.5(@stack-spot/citric-icons@0.2.1)(@stack-spot/portal-theme@1.2.1(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@stack-spot/portal-translate@1.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(lodash@4.17.21)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
+      "name": "@monaco-editor/react",
+      "version": "4.6.0(monaco-editor@0.52.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
     },
     {
       "name": "@stack-spot/portal-components",
-      "version": "2.24.3(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.13.0(react@18.2.0))(@citric/ui@6.10.2(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.13.0(react@18.2.0))(lodash@4.17.21)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@stack-spot/portal-theme@1.2.1(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@stack-spot/portal-translate@1.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@types/react@18.3.11)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
+      "version": "2.25.5(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.13.0(react@18.2.0))(@citric/ui@6.10.2(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.13.0(react@18.2.0))(lodash@4.17.21)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@stack-spot/portal-theme@1.1.0(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@stack-spot/portal-translate@1.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@types/react@18.3.11)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
     },
     {
       "name": "@stack-spot/portal-network",
-      "version": "0.165.1(@stack-spot/auth@5.3.2)(@stack-spot/opa@2.5.0(@stack-spot/auth@5.3.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@stack-spot/portal-translate@1.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@tanstack/react-query@5.59.16(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
+      "version": "0.169.0(@stack-spot/auth@5.3.2)(@stack-spot/opa@2.5.0(@stack-spot/auth@5.3.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@stack-spot/portal-translate@1.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@tanstack/react-query@5.59.16(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
     },
     {
       "name": "@stack-spot/portal-theme",
-      "version": "1.2.1(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0))"
+      "version": "1.1.0(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0))"
     },
     {
       "name": "@stack-spot/portal-translate",

package/src/chat-interceptors/quick-commands.ts

@@ -74,25 +74,31 @@ export function createQuickCommandInterceptor(widget: WidgetState, getEditor: ()
    */
   async function runRouterStep(
     ctx: QCContext,
-    stepIndex: number, iteration: number,
+    stepIndex: number, iteration: Record<string, number>,
     progress: { update: (index: number) => void, remove: () => void },
   ) {
     const { qc: { slug, steps }, code, resultMap, customInputs } = ctx
     const step = steps![stepIndex]
     const inputData = Object.keys(customInputs).length > 0 && code ? { ...customInputs, [code]: code } : code ?? customInputs
     try {
+      if (step.slug in iteration) {
+        iteration[step.slug] = iteration[step.slug] + 1
+      } else {
+        iteration[step.slug] = 1
+      }
+
       const { next_step_slug } = await aiClient.calculateNextStep.mutate({
         stepSlug: step.slug,
         slug: slug,
         quickCommandEvaluateStepRouterRequest: {
-          executions_count: iteration++,
+          executions_count: iteration[step.slug],
           input_data: inputData,
           slugs_executions: resultMap,
         },
       })
 
       if (next_step_slug === step.slug) {
-        return runStepsRecursively(stepIndex, progress, ctx, iteration + 1)
+        return runStepsRecursively(stepIndex, progress, ctx, iteration)
       }
       const nextStepIndex = steps?.findIndex((step) => step.slug === next_step_slug)
       
@@ -222,7 +228,7 @@ export function createQuickCommandInterceptor(widget: WidgetState, getEditor: ()
   }
 
   async function runStepsRecursively(currentIndex: number, progress: { update: (index: number) => void, remove: () => void },
-    ctx: QCContext, iteration: number) {
+    ctx: QCContext, iteration: Record<string, number>) {
     const { qc } = ctx
     if (!qc.steps || currentIndex >= qc.steps?.length) return
     progress.update(currentIndex)
@@ -245,7 +251,7 @@ export function createQuickCommandInterceptor(widget: WidgetState, getEditor: ()
   async function runSteps(ctx: QCContext) {
     const progress = showProgressMessage(ctx)
     try {
-      await runStepsRecursively(0, progress, ctx, 0)
+      await runStepsRecursively(0, progress, ctx, {})
     } finally {
       progress.remove()
     }

package/src/components/Accordion.tsx

@@ -0,0 +1,75 @@
+/* Copiar do EDP ou usar o AnimatedHeight da lib de components */
+
+import { ChevronDown } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+import { AnimatedHeight } from '@stack-spot/portal-components/AnimatedHeight'
+import { theme, WithStyle } from '@stack-spot/portal-theme'
+import React, { useState } from 'react'
+import { styled } from 'styled-components'
+import { WithChildren } from '../types'
+
+interface Props extends WithStyle, Required<WithChildren> {
+  /**
+   * The header of the accordion (always rendered). The body (hidden part) must be passed as the children.
+   */
+  header: React.ReactNode,
+  /**
+   * Whether or not to start expanded.
+   * @default false
+   */
+  startExpanded?: boolean,
+}
+
+const StyledAccordion = styled.div`
+  > header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    background-color: ${theme.color.light[400]}; 
+
+    > button {
+      transition: transform 0.3s ease-out;
+      background: transparent;
+      border: none;
+      padding: 0;
+
+      &:hover {
+        background: transparent;
+      }
+
+      svg {
+        width: 16px;
+        height: 16px;
+        margin: 4px;
+      }
+    }
+
+    &.expanded > button {
+      transform: rotate(180deg);
+    }
+  }
+
+  > .accordion-content {
+    padding: 10px;
+  }
+`
+
+/**
+ * A component that can have it's content shown or hidden (animated).
+ */
+export const Accordion = ({ children, header, className, startExpanded, style }: Props) => {
+  const [expanded, setExpanded] = useState(startExpanded)
+  return (
+    <AnimatedHeight style={style} className={className} outerStyle={{ width: '100%' }}>
+      <StyledAccordion>
+        <header className={expanded ? 'expanded' : ''}>
+          {header}
+          <IconButton onClick={() => setExpanded(v => !v)}><ChevronDown /></IconButton>
+        </header>
+        {expanded ? <div className="accordion-content">{children}</div> : null}
+      </StyledAccordion>
+    </AnimatedHeight>
+  )
+}

package/src/components/AdaptiveTextArea.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/display-name */
-import { Textarea } from '@stack-spot/citric-react'
+import { Textarea } from '@citric/core'
 import { forwardRef, useEffect, useRef } from 'react'
 import { PropsOf } from '../types'
 

package/src/components/AgentCard/AgentCardCreate.tsx

@@ -1,5 +1,5 @@
-import { Icon } from '@stack-spot/citric-icons'
-import { Text } from '@stack-spot/citric-react'
+import { IconBox, Text } from '@citric/core'
+import { PlusMini } from '@citric/icons'
 import { theme } from '@stack-spot/portal-theme'
 import { useTranslate } from '@stack-spot/portal-translate'
 import { styled } from 'styled-components'
@@ -32,7 +32,9 @@ export const AgentCardCreate = ({ urlCreateAgent }: { urlCreateAgent: string  })
   const t = useTranslate(dictionary)
   return (
     <StyledCard href={urlCreateAgent} role="link" tabIndex={0} className={'agent-card'}>
-      <Icon size="md" icon="PlusMini" />
+      <IconBox color="light" appearance="square" size="md">
+        <PlusMini />
+      </IconBox>
       <div className="text-box">
         <Text appearance="body2">
           {`${t.create} ${t.agent}`}

package/src/components/AgentCard/index.tsx

@@ -1,4 +1,5 @@
-import { Card, ImageWithFallback, Text } from '@stack-spot/citric-react'
+import { Image, Text } from '@citric/core'
+import { Card } from '@citric/ui'
 import { listToClass, theme } from '@stack-spot/portal-theme'
 import { useTranslate } from '@stack-spot/portal-translate'
 import { styled } from 'styled-components'
@@ -15,12 +16,12 @@ const StyledCard = styled(Card)`
   flex-direction: column;
   gap: 12px;
 
-  &:hover, &:focus {
-    background-color: ${theme.color.light[500]} !important;
+  &:hover {
+    background-color: ${theme.color.light[500]};
   }
 
   &.active {
-    background-color: ${theme.color.light[600]} !important;
+    background-color: ${theme.color.light[600]};
   }
 
   img {
@@ -58,14 +59,13 @@ export const AgentCard = ({ agent }: { agent: LabeledAgent }) => {
       onClick={() => chat.set('agent', agent)} 
       role="button"
       tabIndex={0}
-      bgLevel={400}
       className={listToClass(['agent-card', currentAgent?.id === agent.id && 'active'])}
     >
-      <ImageWithFallback src={agent.image ?? ''} fallback={<img src={placeholder} />} />
+      <Image src={agent.image ? agent.image : placeholder} />
       <div className="text-box">
         {agent.visibility_level && (
           <div className="agent-type">
-            <Text appearance="microtext1" color="light.700">
+            <Text appearance="microtext1" colorScheme="light.700">
               {t[agent.visibility_level.toLowerCase() as keyof typeof t]}
             </Text>
             <Text appearance="microtext1">

package/src/components/ButtonFavorite.tsx

@@ -1,14 +1,16 @@
-import { BaseFavoriteProps, Favorite } from '@stack-spot/citric-react'
+import { Button, IconBox } from '@citric/core'
+import { Star, StarFill } from '@citric/icons'
+import { IconButton, LoadingCircular } from '@citric/ui'
 import { useTranslate } from '@stack-spot/portal-translate'
-import { useEffect, useState } from 'react'
+import { MouseEvent, useEffect, useState } from 'react'
 import { dictionaryFavorites } from './form/dictionary'
 
-export interface ItemFavorite {
+interface ItemFavorite {
   id?: string,
   slug?: string,
 }
 
-export interface Favorite<T extends ItemFavorite> {
+interface Favorite<T extends ItemFavorite> {
   /**
    * id or slug to be used on functions
    */
@@ -32,17 +34,17 @@ export 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, appearance = 'square' }: Props<T>) => {
+export const ButtonFavorite = <T extends ItemFavorite>({ favorite, isIconButton = false }: Props<T>) => {
   const [isFavorite, setIsFavorite] = useState(false)
   const { idOrSlug, listFavorites } = favorite || {}
 
@@ -51,12 +53,12 @@ export const ButtonFavorite = <T extends ItemFavorite>({ favorite, appearance =
   }, [listFavorites])
 
   return (
-    <ButtonWrapper isFavorite={isFavorite} favorite={favorite} appearance={appearance} />
+    <ButtonWrapper isFavorite={isFavorite} isIconButton={isIconButton} favorite={favorite} />
   )
 }
 
-const ButtonWrapper = <T extends ItemFavorite>({ isFavorite, favorite, appearance }: 
-  { isFavorite: boolean, favorite: Favorite<T>, appearance: BaseFavoriteProps['appearance'] }) => {
+const ButtonWrapper = <T extends ItemFavorite>({ isIconButton, isFavorite, favorite }: 
+  { isIconButton?: boolean, isFavorite: boolean, favorite: Favorite<T>}) => {
   const t = useTranslate(dictionaryFavorites)
   const { idOrSlug, onAddFavorite, onRemoveFavorite } = favorite
   const [loading, setLoading] = useState(false)
@@ -67,12 +69,37 @@ const ButtonWrapper = <T extends ItemFavorite>({ isFavorite, favorite, appearanc
     setLoading(false)    
   }
 
-  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)}
-  />
+  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>
+  )
 }

package/src/components/Code.tsx

@@ -2,7 +2,9 @@
  * Copied from the extension's webview.
  */
 
-import { IconButton, Text } from '@stack-spot/citric-react'
+import { Text } from '@citric/core'
+import { AddCode, ChevronDoubleDown, Collapse, Copy, Download } from '@citric/icons'
+import { IconButton } from '@citric/ui'
 import { theme, useThemeKind } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { CSSProperties, useState } from 'react'
@@ -77,12 +79,6 @@ const CodeBox = styled.code`
           opacity: 1;
         }
       }
-
-      .copy-btn {
-        &:after {
-          left: -30px; // prevents scrolling in the horizontal axis.
-        }
-      }
     }
   }
 
@@ -153,14 +149,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={() => {
@@ -180,30 +176,41 @@ 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' }}
-              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}
+            >
+              <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}
           </div>
         </div>
       )}
@@ -228,7 +235,6 @@ 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',
@@ -238,7 +244,6 @@ 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,4 +1,6 @@
-import { IconButton, Row } from '@stack-spot/citric-react'
+import { Flex } from '@citric/core'
+import { ArrowLeft } from '@citric/icons'
+import { IconButton } from '@citric/ui'
 import { createContext, useCallback, useContext, useMemo, useState } from 'react'
 
 /**
@@ -79,10 +81,12 @@ 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 && (
-        <Row gap="12px" style={{ alignSelf: 'stretch' }}>
-          <IconButton icon="ArrowLeft" onClick={goBack} className="back-button" aria-label="Back" />
+        <Flex alignItems="center" w={12} sx={{ gap: '4px' }}>
+          <IconButton onClick={goBack} appearance="square" className="back-button" aria-label="Back">
+            <ArrowLeft />
+          </IconButton>
           {renderTitle?.(currentItem)}
-        </Row>
+        </Flex>
       )}
       <Component {...(currentItem.props as any)} />
     </div>

package/src/components/FadingOverflow.tsx

@@ -1,4 +1,5 @@
-import { Icon } from '@stack-spot/citric-icons'
+import { IconBox } from '@citric/core'
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@citric/icons'
 import { listToClass, theme, WithStyle } from '@stack-spot/portal-theme'
 import { debounce } from 'lodash'
 import { useEffect, useRef } from 'react'
@@ -79,7 +80,7 @@ const OverflowBox = styled.div`
     pointer-events: none;
     transition: opacity 0.3s;
 
-    .citric-icon {
+    ${IconBox} {
       background-color: ${theme.color.light[300]};
       border-radius: 50%;
       width: 16px;
@@ -252,10 +253,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><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>
+      <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>
     </OverflowBox>
   ) : <OverflowBox {...props} className={className} ref={ref}>{children}</OverflowBox>
 }