@stack-spot/ai-chat-widget 1.18.0-beta.0 → 1.18.0-beta.10

package/src/views/KnowledgeSources.tsx

@@ -8,7 +8,7 @@ import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { difference, uniqBy } from 'lodash'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { ButtonFavorite } from '../components/ButtonFavorite'
-import { NavigationItem } from '../components/ComponentNavigator'
+import { NavigationComponent } from '../components/ComponentNavigator'
 import { DescribedCheckboxGroup } from '../components/form/DescribedCheckboxGroup'
 import { IconInput } from '../components/IconInput'
 import { RightPanelTabs } from '../components/RightPanelTabs'
@@ -68,7 +68,7 @@ const KnowledgeSourcesPanel = () => {
     { title: t.favorites, content: <KnowledgeSourcesTab key="favorite" visibility="favorite" allKS={allKS} onSubmit={onSubmit} /> },
     { title: t.personal, content: <KnowledgeSourcesTab key="personal" visibility="personal" allKS={allKS} onSubmit={onSubmit} /> },
     { title: t.shared, content: <KnowledgeSourcesTab key="shared" visibility="shared" allKS={allKS} onSubmit={onSubmit} /> },
-    { title: t.spaces, content: <KnowledgeSourcesTabWorkspace key="workspace" visibility="workspace" allKS={allKS} onSubmit={onSubmit} /> },
+    { title: t.spots, content: <KnowledgeSourcesTabWorkspace key="workspace" visibility="workspace" allKS={allKS} onSubmit={onSubmit} /> },
     { title: t.account, content: <KnowledgeSourcesTab key="account" visibility="account" allKS={allKS} onSubmit={onSubmit} /> },    
   ]
 
@@ -198,7 +198,7 @@ export const KnowledgeSourcesTab = ({ visibility, allKS, onSubmit, workspaceId,
 export function KnowledgeSourcesTabWorkspace({ allKS, onSubmit }: TabProps) {
   const workspaceTabComponents = useMemo(() => ({ ks: KnowledgeSourcesTab }), [allKS, onSubmit])
 
-  const buildNavigateParams = (workspace: WorkspaceResponse): NavigationItem<typeof workspaceTabComponents> => ({
+  const buildNavigateParams = (workspace: WorkspaceResponse): NavigationComponent<typeof workspaceTabComponents> => ({
     component: 'ks',
     props: { visibility: 'workspace', workspaceId: workspace.id, allKS, onSubmit },
   })
@@ -220,7 +220,7 @@ const dictionary = {
     noSearchResultsDescription: 'Please, try another search term.',
     noData: 'There are no knowledge sources in this category yet.',
     noDataDescription: 'Use the tabs above to try other categories or use the AI portal to create new knowledge sources.',
-    spaces: 'Spaces',
+    spots: 'Spots',
   },
   pt: {
     title: 'Knowledge Sources',
@@ -234,6 +234,6 @@ const dictionary = {
     noSearchResultsDescription: 'Por favor, tente outra busca.',
     noData: 'Ainda não há knowledge sources nesta categoria.',
     noDataDescription: 'Use as abas acima para tentar outras categorias ou use o Portal AI para criar novos knowledge sources.',
-    spaces: 'Spaces',
+    spots: 'Spots',
   },
 } satisfies Dictionary

package/src/views/MessageInput/AgentSelector.tsx

@@ -9,17 +9,23 @@ import { useCurrentChat, useCurrentChatState } from '../../context/hooks'
 import { agentRegex } from '../../regex'
 import { useAgentFavorites } from '../Agents/useAgentFavorites'
 
-const AgentItem = ({ avatar, name }: AgentResponse) => {
+type AgentWithSpaceName = AgentResponse & { spaceName?: string }
+
+const AgentItem = ({ avatar, name, spaceName }: AgentWithSpaceName) => {
   const avatarComponent = avatar ? <Image width="32" height="32" radius="full" src={avatar} /> : <IconBox size="md"><Agent /></IconBox>
 
   return <Flex flexWrap="nowrap" alignItems="center" sx={{ gap: '8px' }}>
     {avatarComponent}
-    <p className="selector-title">{name}</p>
+    <div>
+      <p className="selector-description">{spaceName}</p>
+      <p className="selector-title">{name}</p>
+    </div>
   </Flex>
 }
 
 export const AgentSelector = ({ inputRef, isTrial }: { isTrial: boolean,
-  inputRef: React.RefObject<HTMLTextAreaElement | HTMLInputElement>, }) => {
+  inputRef: React.RefObject<HTMLTextAreaElement | HTMLInputElement>,
+}) => {
   const chat = useCurrentChat()
   const isAgentEnabled = useCurrentChatState('features').agent
   
@@ -33,8 +39,10 @@ export const AgentSelector = ({ inputRef, isTrial }: { isTrial: boolean,
     const isBuiltIn = agent.visibility_level === 'builtIn' || builtInsAgents.some((builtInAgent) => builtInAgent.id === agent.id)
     chat.set(
       'agent',
-      { id: agent.id, label: agent.name, image: agent.avatar, slug: agent.slug, 
-        builtIn: isBuiltIn, visibility_level: agent.visibility_level },
+      {
+        id: agent.id, label: agent.name, image: agent.avatar, slug: agent.slug,
+        builtIn: isBuiltIn, visibility_level: agent.visibility_level,
+      },
     )
 
     if (!inputRef.current) return
@@ -47,6 +55,9 @@ export const AgentSelector = ({ inputRef, isTrial }: { isTrial: boolean,
     const publicAgents = agentClient.publicAgents.useQuery({})
     const builtInsAgents = [...publicAgents.map((agent) => ({ ...agent, visibility_level: 'builtIn' }))]
     const workspaceAgents = workspaceAiClient.workspacesContentsByType.useQuery({ contentType: 'agent' })
+
+    const workspaceAgentsWithWorkspaceName = workspaceAgents.flatMap(({ agents, space_name }) =>
+      agents?.map((agent) => ({ ...agent, spaceName: space_name }))) as AgentWithSpaceName[]
     let accountAgents: AgentResponse[] = []
     let sharedAgents: AgentResponse[] = []
     if (!isTrial) {
@@ -54,7 +65,7 @@ export const AgentSelector = ({ inputRef, isTrial }: { isTrial: boolean,
       sharedAgents = agentClient.agents.useQuery({ visibility: 'SHARED' }) || []
     }
 
-    return uniqBy([...personalAgents, ...workspaceAgents.agents, ...accountAgents, ...sharedAgents, ...builtInsAgents], 'id')
+    return uniqBy([...personalAgents, ...workspaceAgentsWithWorkspaceName, ...accountAgents, ...sharedAgents, ...builtInsAgents], 'id')
   }
 
   return <Selector

package/src/views/MessageInput/ButtonGroup.tsx

@@ -1,4 +1,4 @@
-import { ChevronRight, Circle, Code, KnowledgeSource, Send, Stack, Times } from '@citric/icons'
+import { ChevronRight, Code, KnowledgeSource, Send, Spaces, Stack, Times } from '@citric/icons'
 import { IconButton } from '@citric/ui'
 import { listToClass } from '@stack-spot/portal-theme'
 import { useEffect, useRef } from 'react'
@@ -62,8 +62,8 @@ export const ButtonGroup = ({ onSend, onCancel, expanded, setExpanded, isLoading
           style={{ width: expanded ? featureButtonsWidth.current : 0 }}
         >
           {features.workspace && (
-            <IconButton aria-label={t.space} title={t.space} onClick={() => widget.set('panel', 'workspace')}>
-              <Circle />
+            <IconButton aria-label={t.spot} title={t.spot} onClick={() => widget.set('panel', 'workspace')}>
+              <Spaces />
             </IconButton>
           )}
           {features.knowledgeSource && (

package/src/views/MessageInput/QuickCommandSelector.tsx

@@ -1,11 +1,13 @@
 import { QuickCommand } from '@citric/icons'
 import { aiClient, workspaceAiClient } from '@stack-spot/portal-network'
-import { QuickCommandListResponse } from '@stack-spot/portal-network/api/ai'
+import { QuickCommandResponse } from '@stack-spot/portal-network/api/ai'
 import { useCallback } from 'react'
 import { Selector } from '../../components/Selector'
 import { useCurrentChat, useCurrentChatState } from '../../context/hooks'
 import { quickCommandRegex } from '../../regex'
 
+type QuickCommandResponseWithSpaceName = QuickCommandResponse & { spaceName?: string }
+
 export const QuickCommandSelector = ({ inputRef, isTrial }: 
   { isTrial: boolean, inputRef: React.RefObject<HTMLTextAreaElement | HTMLInputElement> }) => {
   const chat = useCurrentChat()
@@ -65,7 +67,7 @@ export const QuickCommandSelector = ({ inputRef, isTrial }:
     } 
   })
   
-  const onSelectItem = useCallback((qc: QuickCommandListResponse) => {
+  const onSelectItem = useCallback((qc: QuickCommandResponseWithSpaceName) => {
     const newValue = `/${qc.slug}`
     chat.set('nextMessage', newValue)
 
@@ -77,11 +79,15 @@ export const QuickCommandSelector = ({ inputRef, isTrial }:
   const getQuickCommands = () => {
     const quickCommands = aiClient.quickCommands.useQuery({ order: 'a-to-z' })
     const quickCommandsFiltered = quickCommands.filter((qc) => qc.visibility_level.toLowerCase() !== 'workspace')
-    const workspaceQuickCommands = workspaceAiClient.workspacesContentsByType.useQuery({ contentType: 'quick_command' })     
-    return [...quickCommandsFiltered, ...workspaceQuickCommands.qcs]
+    const workspaceQuickCommands = workspaceAiClient.workspacesContentsByType.useQuery({ contentType: 'quick_command' })
+    const workspaceQuickCommandsWithWorkspaceName: QuickCommandResponseWithSpaceName[] = workspaceQuickCommands
+      .flatMap(({ qcs, space_name }) => qcs?.map((qc) => ({ ...qc, spaceName: space_name }))) as QuickCommandResponseWithSpaceName[]
+
+    return [...quickCommandsFiltered, ...workspaceQuickCommandsWithWorkspaceName]
   }
 
-  const QuickCommandItem = ({ slug, description }: QuickCommandListResponse) => <>
+  const QuickCommandItem = ({ slug, description, spaceName }: QuickCommandResponseWithSpaceName) => <>
+    <p className="selector-description">{spaceName}</p>
     <p className="selector-title">/{slug?.toUpperCase()}</p>
     <p className="selector-description">{description}</p>
   </>

package/src/views/MessageInput/dictionary.ts

@@ -4,8 +4,8 @@ const dictionary = {
   en: {
     stack: 'Select stack',
     code: 'Open code editor',
-    workspace: 'Select workspace',
-    space: 'Select space',
+    workspace: 'Select spot',
+    spot: 'Select spot',
     knowledgeSource: 'Select knowledge sources',
     agent: 'Select agent',
     collapse: 'Hide buttons',
@@ -15,7 +15,7 @@ const dictionary = {
     cancel: 'Cancel',
     removeConfig: 'Remove all the configuration',
     removeStack: 'Stop using the current stack',
-    removeWorkspace: 'Stop using the current workspace',
+    removeWorkspace: 'Stop using the current spot',
     removeKS: 'Stop using this knowledge source',
     selected: 'Selected',
     removeSelection: 'Remove current code selection',
@@ -24,8 +24,8 @@ const dictionary = {
   pt: {
     stack: 'Selecionar stack',
     code: 'Abrir editor de código',
-    workspace: 'Selecionar workspace',
-    space: 'Select Space',
+    workspace: 'Selecionar spot',
+    spot: 'Selecionar spot',
     knowledgeSource: 'Selecionar knowledge sources',
     agent: 'Selecionar agente',
     collapse: 'Esconder botões',
@@ -35,7 +35,7 @@ const dictionary = {
     cancel: 'Cancelar',
     removeConfig: 'Remover todas as configurações',
     removeStack: 'Parar de usar a stack atual',
-    removeWorkspace: 'Parar de usar o workspace atual',
+    removeWorkspace: 'Parar de usar o spot atual',
     removeKS: 'Parar de usar este knowledge source',
     selected: 'Selecionado',
     removeSelection: 'Desfazer seleção de código',

package/src/views/Stacks.tsx

@@ -7,7 +7,7 @@ import { WorkspaceResponse } from '@stack-spot/portal-network/api/workspace-ai'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { ButtonFavorite } from '../components/ButtonFavorite'
-import { NavigationItem } from '../components/ComponentNavigator'
+import { NavigationComponent } from '../components/ComponentNavigator'
 import { DescribedRadioGroup } from '../components/form/DescribedRadioGroup'
 import { IconInput } from '../components/IconInput'
 import { RightPanelTabs } from '../components/RightPanelTabs'
@@ -53,7 +53,7 @@ const StacksPanel =  () => {
     { title: t.favorites, content: <StacksTab key="favorites" visibility="favorite" stack={stack} /> },
     { title: t.personal, content: <StacksTab key="personal" visibility="personal" stack={stack} /> },
     { title: t.shared, content: <StacksTab key="shared" visibility="shared" stack={stack} /> },
-    { title: t.spaces, content: <StacksTabWorkspace key="workspace" visibility="workspace" stack={stack} /> },
+    { title: t.spots, content: <StacksTabWorkspace key="workspace" visibility="workspace" stack={stack} /> },
     { title: t.account, content: <StacksTab key="account" visibility="account" stack={stack} /> },
   ], [t, isTrial])
   
@@ -184,7 +184,7 @@ export const StacksTab = ({ visibility, workspaceId, stack, showSubmitButton = t
 function StacksTabWorkspace({ stack, visibility, showSubmitButton }: StacksTabProps) {
   const workspaceTabComponents = useMemo(() => ({ stack: StacksTab }), [stack])
 
-  const buildNavigateParams = (workspace: WorkspaceResponse): NavigationItem<typeof workspaceTabComponents> => ({
+  const buildNavigateParams = (workspace: WorkspaceResponse): NavigationComponent<typeof workspaceTabComponents> => ({
     component: 'stack',
     props: { visibility, workspaceId: workspace.id, stack, showSubmitButton },
   }) 
@@ -205,7 +205,7 @@ const dictionary = {
     noData: 'There are no stacks in this category yet.',
     noDataDescription: 'Use the tabs above to try other categories or use the AI portal to create new stacks.',
     favorites: 'Favorites',
-    spaces: 'Spaces',
+    spots: 'Spots',
   },
   pt: {
     title: 'Stacks AI',
@@ -219,6 +219,6 @@ const dictionary = {
     noData: 'Ainda não há stacks nesta categoria.',
     noDataDescription: 'Use as abas acima para tentar outras categorias ou use o Portal AI para criar novas stacks.',
     favorites: 'Favoritos',
-    spaces: 'Spaces',
+    spots: 'Spots',
   },
 } satisfies Dictionary

package/src/views/Workspaces/WorkspacesTab.tsx

@@ -1,12 +1,13 @@
 import { Button, Flex, IconBox, Image, Text } from '@citric/core'
-import { Agent, Circle, KnowledgeSource, Stack } from '@citric/icons'
+import { Agent, KnowledgeSource, Spaces, Stack } from '@citric/icons'
 import { Avatar } from '@citric/ui'
 import { workspaceAiClient } from '@stack-spot/portal-network'
 import { WorkspaceResponse, WorkspaceVisibilityLevelEnum } from '@stack-spot/portal-network/api/workspace-ai'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { useTransition } from 'react'
 import { useComponentNavigation } from '../../components/ComponentNavigator'
-import { ListGroup } from '../../components/ListGroup'
+import { Loading } from '../../components/FallbackBoundary/Loading'
+import { ListResource } from '../../components/ListResource'
 import { CardSpace, WorkspaceTabNavigator } from '../../components/WorkspaceTabNavigator'
 import { ChatProperties } from '../../state/ChatState'
 import { AgentsTab } from '../Agents/AgentsTab'
@@ -16,14 +17,15 @@ import { StacksTab } from '../Stacks'
 const SpaceCard = ({ workspaceId }: { workspaceId: string }) => {
   const workspace = workspaceAiClient.workspaceAi.useQuery({ id: workspaceId })
   return <Flex flexDirection="column" sx={{ gap: '8px' }}>
-    <Flex alignItems="center" sx={{ gap: '4px' }}>
-      {workspace.logo
-        ? <Image src={workspace.logo} />
-        : <Avatar size="xxs" appearance="square" sx={{ bg: 'light.500' }}><IconBox><Circle /></IconBox></Avatar>}
-      <Text appearance="body2" weight="medium">{workspace.name} </Text>
+    <Flex flexDirection="column" sx={{ gap: '4px' }}>
+      <Flex alignContent="center" alignItems="center" sx={{ gap: '8px', m: 1 }} >
+        <Avatar size="xxs" appearance="square" sx={{ bg: 'light.600', r: 'xxs' }}>
+          {workspace.logo ? <Image src={workspace.logo} /> : <IconBox> <Spaces /> </IconBox>}
+        </Avatar>
+        <Text appearance="body2" weight="medium">{workspace.name} </Text>
+      </Flex>
+      <Text colorScheme="light.700">{workspace.description}</Text>
     </Flex>
-
-    <Text colorScheme="light.700">{workspace.description}</Text>
   </Flex>
 }
 
@@ -70,13 +72,14 @@ export const WorkspaceResources = ({ workspaceId, allKS, agent, stack }: Omit<Ta
 
   return (<>
     {workspaceId && <SpaceCard workspaceId={workspaceId} />}
-    <ListGroup
-      list={resourceTypes}
-      keygen={w => w.id}
-      onClick={(resource) => { handleNavigate(resource) }}
-      renderLabel={r => <CardSpace name={r.displayName} icon={r.icon} onClick={() => handleNavigate(r)} />}
-      style={{ gap: '6px', display: 'flex', flexDirection: 'column', opacity: isPending ? '0.5' : '1' }}
-    />
+    {isPending ? <Loading /> :
+      <ListResource
+        list={resourceTypes}
+        keygen={w => w.id}
+        renderLabel={r => <CardSpace name={r.displayName} icon={r.icon} onClick={() => handleNavigate(r)} />}
+        style={{ gap: '6px', display: 'flex', flexDirection: 'column' }}
+      />
+    }
   </>
   )
 }

package/src/views/Workspaces/index.tsx

@@ -61,24 +61,15 @@ const WorkspacesPanel = () => {
 
 const dictionary = {
   en: {
-    title: 'Spaces',
-    description: 'By selecting a space, its Knowledge Sources (KSs), Agents, Quick Commands and Stacks Ai will be consulted to generate the answers.',
-    apply: 'Apply',
+    title: 'Spot',
+    description: 'By selecting a spot, its Knowledge Sources (KSs), Agents, Quick Commands and Stacks Ai will be consulted to generate the answers.',
     noSearchResults: "Your search didn't yield results.",
-    noSearchResultsDescription: 'Please, try another search term.',
-    noData: 'There are no spaces yet.',
-    noDataDescription: 'Use the AI portal to create new spaces.',
     all: 'All',
     favorites: 'Favorites',
   },
   pt: {
-    title: 'Spaces',
-    description: 'Ao selecionar um space, seus Knowledge Sources (KSs), Agentes, Quick Commands e Stacks Ai serão consultados para gerar as respostas.',
-    apply: 'Aplicar',
-    noSearchResults: 'Sua busca não produziu resultados',
-    noSearchResultsDescription: 'Por favor, tente outra busca.',
-    noData: 'Ainda não há spaces.',
-    noDataDescription: 'Use o Portal AI para criar novos spaces.',
+    title: 'Spot',
+    description: 'Ao selecionar um spot, seus Knowledge Sources (KSs), Agentes, Quick Commands e Stacks Ai serão consultados para gerar as respostas.',
     all: 'Todos',
     favorites: 'Favoritos',
   },

package/dist/components/ListGroup.d.ts

@@ -1,46 +0,0 @@
-import { WithStyle } from '@stack-spot/portal-theme';
-interface ListGroupProps<T> extends WithStyle {
-    /**
-     * The list available.
-     */
-    list: T[];
-    /**
-     * A function that renders an option as a label. This can either return a string or a React Element.
-     */
-    renderLabel: (item: T) => React.ReactNode;
-    /**
-     * A function that renders an option as a description. This can either return a string or a React Element.
-     */
-    renderDescription?: (item: T) => React.ReactNode;
-    /**
-     * A function that renders a element before the content
-     */
-    renderBeforeElement?: (item: T) => React.ReactNode;
-    /**
-     * A function that renders a element after the content
-     */
-    renderAfterElement?: (item: T) => React.ReactNode;
-    /**
-     * A function that gives a custom className to the rendered option.
-     */
-    optionClassName?: (item: T) => string | undefined;
-    /**
-     * A function that gives a custom style to the rendered option.
-     */
-    optionStyle?: (item: T) => React.CSSProperties | undefined;
-    /**
-     * A function that generates a unique id for the option.
-     */
-    keygen: (item: T) => React.Key;
-    /**
-     * A function to call whenever the item click.
-     */
-    onClick: (item: T) => void;
-}
-/**
- * Renders a radio button group where each option has a label and a description.
- * The description in placed under the label and radio button as an accordion.
- */
-export declare function ListGroup<T>({ list, renderLabel, renderBeforeElement, renderAfterElement, className, keygen, style }: ListGroupProps<T>): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=ListGroup.d.ts.map

package/dist/components/ListGroup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListGroup.d.ts","sourceRoot":"","sources":["../../src/components/ListGroup.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAIpD,UAAU,cAAc,CAAC,CAAC,CAAE,SAAQ,SAAS;IAC3C;;OAEG;IACH,IAAI,EAAE,CAAC,EAAE,CAAC;IACV;;OAEG;IACH,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1C;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACjD;;OAEG;IACH,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACnD;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAClD;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS,CAAC;IAClD;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,aAAa,GAAG,SAAS,CAAC;IAC3D;;OAEG;IACH,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,GAAG,CAAC;IAC/B;;OAEG;IACH,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;CAC5B;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,CAAC,EACzB,EACE,IAAI,EACJ,WAAW,EACX,mBAAmB,EACnB,kBAAkB,EAClB,SAAS,EACT,MAAM,EACN,KAAK,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC,2CAkB7B"}

package/dist/components/ListGroup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListGroup.js","sourceRoot":"","sources":["../../src/components/ListGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AA0C/B;;;GAGG;AACH,MAAM,UAAU,SAAS,CACvB,EACE,IAAI,EACJ,WAAW,EACX,mBAAmB,EACnB,kBAAkB,EAClB,SAAS,EACT,MAAM,EACN,KAAK,EAAqB;IAE5B,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE;QAChD,MAAM,KAAK,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAA;QACnC,MAAM,OAAO,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAC,IAAI,cAAE,KAAK,GAAQ,CAAC,CAAC,CAAC,KAAK,CAAA;QAExE,OAAO,CACL,uBACE,MAAC,IAAI,IAAC,UAAU,EAAC,QAAQ,aACtB,mBAAmB,EAAE,CAAC,QAAQ,CAAC,EAC/B,OAAO,EACP,kBAAkB,EAAE,CAAC,QAAQ,CAAC,IAC1B,IALA,MAAM,CAAC,QAAQ,CAAC,CAMpB,CACN,CAAA;IACH,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEX,OAAO,KAAC,GAAG,IAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,YAAG,KAAK,GAAO,CAAA;AAC1F,CAAC"}

package/src/components/ListGroup.tsx

@@ -1,76 +0,0 @@
-import { Box, Flex, Text } from '@citric/core'
-import { WithStyle } from '@stack-spot/portal-theme'
-import { useMemo } from 'react'
-
-
-interface ListGroupProps<T> extends WithStyle {
-  /**
-   * The list available.
-   */
-  list: T[],
-  /**
-   * A function that renders an option as a label. This can either return a string or a React Element.
-   */
-  renderLabel: (item: T) => React.ReactNode,
-  /**
-   * A function that renders an option as a description. This can either return a string or a React Element.
-   */
-  renderDescription?: (item: T) => React.ReactNode,
-  /**
-   * A function that renders a element before the content
-   */
-  renderBeforeElement?: (item: T) => React.ReactNode,
-  /**
-   * A function that renders a element after the content
-   */
-  renderAfterElement?: (item: T) => React.ReactNode,
-  /**
-   * A function that gives a custom className to the rendered option.
-   */
-  optionClassName?: (item: T) => string | undefined,
-  /**
-   * A function that gives a custom style to the rendered option.
-   */
-  optionStyle?: (item: T) => React.CSSProperties | undefined,
-  /**
-   * A function that generates a unique id for the option.
-   */
-  keygen: (item: T) => React.Key,
-  /**
-   * A function to call whenever the item click.
-   */
-  onClick: (item: T) => void,
-}
-
-/**
- * Renders a radio button group where each option has a label and a description.
- * The description in placed under the label and radio button as an accordion.
- */
-export function ListGroup<T>(
-  {
-    list,
-    renderLabel,
-    renderBeforeElement,
-    renderAfterElement,
-    className,
-    keygen,
-    style }: ListGroupProps<T>,
-) {
-  const items = useMemo(() => list.map((listItem) => {
-    const label = renderLabel(listItem)
-    const content = typeof label === 'string' ? <Text>{label}</Text> : label
-
-    return (
-      <li key={keygen(listItem)}>
-        <Flex alignItems="center">
-          {renderBeforeElement?.(listItem)}
-          {content}
-          {renderAfterElement?.(listItem)}
-        </Flex>
-      </li>
-    )
-  }), [list])
-
-  return <Box as="ul" m={0} p={0} w={12} style={style} className={className}>{items}</Box>
-}
-