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

package/src/views/Steps/StepModal.tsx

@@ -1,6 +1,4 @@
-import { Flex, Text } from '@citric/core'
-import { ChevronLeft, ChevronRight } from '@citric/icons'
-import { Badge, IconButton } from '@citric/ui'
+import { Badge, IconButton, Row, Text } from '@stack-spot/citric-react'
 import { theme } from '@stack-spot/portal-theme'
 import { useMemo, useState } from 'react'
 import { styled } from 'styled-components'
@@ -131,18 +129,18 @@ export const StepModal = ({ message, stepId, onClose }: Props) => {
     <div className="tool" key={tool.id}>
       <ToolBadge name={tool.name} duration={tool.duration} image={tool.image} description={tool.description} />
       {tool.input && <>
-        <Text appearance="microtext1" colorScheme="light.700">{t.input}:</Text>
+        <Text appearance="microtext1" color="light.700">{t.input}:</Text>
         <Code language="json" className="tool-input" showLineNumbers={false} showActionBar>{tool.input}</Code>
       </>}
       {tool.output && <>
-        <Text appearance="microtext1" colorScheme="light.700">{t.response}:</Text>
+        <Text appearance="microtext1" color="light.700">{t.response}:</Text>
         <Code language="json" className="tool-input" showLineNumbers={false} showActionBar>{tool.output}</Code>
       </>}
     </div>
   )) : undefined
 
   const title = (
-    <Flex flex={1} justifyContent="space-between" alignItems="center">
+    <Row flex={1} justifyContent="space-between">
       <Text appearance="h6">{getTitle(t, step, stepIndex)}</Text>
       <ExecutionBox>
         <Text className="time" appearance="microtext1">
@@ -153,28 +151,26 @@ export const StepModal = ({ message, stepId, onClose }: Props) => {
         {step?.type === 'step' && step.attempts.length > 1 && <div className="navigator">
           {attempt > 0 && (
             <IconButton
+              icon="ChevronLeft"
               size="xs"
               title={t.previousAttempt}
               aria-label={t.previousAttempt}
               onClick={() => setAttempt(attempt - 1)}
-            >
-              <ChevronLeft />
-            </IconButton>
+            />
           )}
           <Text appearance="microtext1">{attempt + 1}/{step.attempts.length}</Text>
           {attempt < step.attempts.length - 1 && (
             <IconButton
+              icon="ChevronRight"
               size="xs"
               title={t.nextAttempt}
               aria-label={t.nextAttempt}
               onClick={() => setAttempt(attempt + 1)}
-            >
-              <ChevronRight />
-            </IconButton>
+            />
           )}
         </div>}
       </ExecutionBox>
-    </Flex>
+    </Row>
   )
 
   return (
@@ -184,18 +180,18 @@ export const StepModal = ({ message, stepId, onClose }: Props) => {
       </StyledSection>}
 
       {step?.type === 'planning' && <StyledSection style={{ alignItems: 'stretch' }}>
-        <Badge appearance="square" palette="blue" style={{ alignSelf: 'start' }}>Prompt</Badge>
+        <Badge appearance="square" colorPalette="blue" style={{ alignSelf: 'start' }}>Prompt</Badge>
         <Text>{step.goal}</Text>
         <ul className="steps">
           {entry.steps?.filter(s => s.type === 'step').map((s, index) => (
             <li key={index}>
-              <Flex mb={2}>
+              <Row mb={2}>
                 <Text>{t.step} {index + 1}: <span className="step-description">{s.input}</span></Text>
-              </Flex>
+              </Row>
               {!!s.attempts[0].tools?.length && <ul className="side-by-side-tools">
                 {s.attempts[0].tools.map((tool) => (
                   <li key={tool.id}>
-                    <ToolBadge name={tool.name} image={tool.image} appearance="round" />
+                    <ToolBadge name={tool.name} image={tool.image} />
                   </li>
                 ))}
               </ul>}
@@ -205,7 +201,7 @@ export const StepModal = ({ message, stepId, onClose }: Props) => {
       </StyledSection>}
       
       {step?.type === 'step' && step?.input && <StyledSection>
-        <Badge appearance="square" palette="blue">Prompt</Badge>
+        <Badge appearance="square" colorPalette="blue">Prompt</Badge>
         <Text>{step.input}</Text>
       </StyledSection>}
       {!!tools?.length && <StyledSection>{tools}</StyledSection>}

package/src/views/Steps/index.tsx

@@ -1,6 +1,5 @@
-import { Flex } from '@citric/core'
-import { LoadingCircular } from '@citric/ui'
-import { lazy, Suspense, useEffect } from 'react'
+import { FallbackBoundary } from '@stack-spot/citric-react'
+import { lazy, useEffect } from 'react'
 import { useWidget, useWidgetState } from '../../context/hooks'
 import { useRightPanel } from '../../right-panel/hooks'
 import { useStepsDictionary } from './dictionary'
@@ -19,9 +18,9 @@ export const Steps = () => {
 
   useEffect(() => {
     if (panel === 'steps' && message) open(
-      <Suspense fallback={<Flex alignItems="center" justifyContent="center" flex={1}><LoadingCircular /></Flex>}>
+      <FallbackBoundary>
         <LazyStepsPanel key={message.messageId} chatId={message.chatId} messageId={message.messageId} />
-      </Suspense>,
+      </FallbackBoundary>,
       {
         title: t.steps,
         description: t.stepsPanelDescription,

package/src/views/Steps/utils.tsx

@@ -1,21 +1,21 @@
-import { IconBox } from '@citric/core'
-import { CheckCircleFill, ListUnordered, PlayFill, TimesCircleFill } from '@citric/icons'
-import { LoadingCircular } from '@citric/ui'
+import { Icon, WithIcon } from '@stack-spot/citric-icons'
+import { ProgressCircular } from '@stack-spot/citric-react'
 import { ChatStep } from '@stack-spot/portal-network'
+import { theme } from '@stack-spot/portal-theme'
 
 export function getStatusIcon(status: ChatStep['status']) {
   switch (status) {
-    case 'success': return <IconBox colorIcon="success.500"><CheckCircleFill /></IconBox>
-    case 'error': return <IconBox colorIcon="danger.500"><TimesCircleFill /></IconBox>
-    case 'running': return <LoadingCircular colorScheme="inverse" size="xs" />
+    case 'success': return <Icon group="fill" icon="CheckCircle" style={{ color: theme.color.success[500] }} />
+    case 'error': return <Icon group="fill" icon="TimesCircle" style={{ color: theme.color.danger[500] }} />
+    case 'running': return <ProgressCircular colorScheme="inverse" size="xs" />
     default: return null
   }
 }
 
-export function getTypeIcon(type: ChatStep['type']) {
+export function getTypeIcon(type: ChatStep['type']): WithIcon {
   switch (type) {
-    case 'planning': return <ListUnordered />
-    default: return <PlayFill />
+    case 'planning': return { group: 'outline', icon: 'ListUnordered' }
+    default: return { group: 'fill', icon: 'Play' }
   }
 }
 

package/src/views/Tools.tsx

@@ -42,26 +42,19 @@ const ToolsPanel = () => {
   }, [messageId])
 
   const [toolKits] = agentToolsClient.tools.useStatefulQuery({}, { enabled: !!message?.agent?.id })
-  const [agent] = agentToolsClient.agent.useStatefulQuery({ agentId: message?.agent?.id || '' },
-    { enabled: !!message?.agent?.id })
-  const tools = useMemo(() => message?.tools?.map(id => toolById(id, toolKits)), [messageId, toolKits])
-  const customTools = useMemo(() => message?.tools?.map(id => toolById(id, agent?.toolkits?.custom_toolkits)),
-    [messageId, agent?.toolkits?.custom_toolkits])
-  return !!(tools?.length || customTools?.length) && (
+  const tools = useMemo(() => message?.tools?.map(id => toolById(id, toolKits) ?? { id }), [messageId, toolKits])
+
+  return !!tools?.length && (
     <ToolList>
-      {[...(tools || []), ...(customTools || [])].map(
-        (tool) =>
-          tool && (
-            <li key={tool.id}>
-              <ToolBadge
-                name={tool.name || tool.id}
-                image={tool.image ?? ''}
-                description={tool.description ?? ''}
-                backgroundColor="light.500"
-              />
-            </li>
-          ),
-      )}
+      {tools.map((tool) => (
+        <li key={tool.id}>
+          <ToolBadge
+            name={tool.name || tool.id}
+            image={tool.image}
+            description={tool.description}
+          />
+        </li>
+      ))}
     </ToolList>
   )
 }

package/src/views/Workspaces/WorkspacesTab.tsx

@@ -1,12 +1,10 @@
-import { Button, Flex, IconBox, Image, Text } from '@citric/core'
-import { Agent, KnowledgeSource, Spaces, Stack } from '@citric/icons'
-import { Avatar } from '@citric/ui'
+import { Icon } from '@stack-spot/citric-icons'
+import { AsyncContent, Button, Center, Column, ImageBox, ImageWithFallback, Text } from '@stack-spot/citric-react'
 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 { Loading } from '../../components/FallbackBoundary/Loading'
 import { ListResource } from '../../components/ListResource'
 import { CardSpace, WorkspaceTabNavigator } from '../../components/WorkspaceTabNavigator'
 import { ChatProperties } from '../../state/ChatState'
@@ -16,17 +14,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 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>
-  </Flex>
+  return <Column gap="4px">
+    <Center gap="8px">
+      <ImageBox size="sm" appearance="square">
+        <ImageWithFallback src={workspace.logo ?? ''} fallback={<Icon icon="Spaces" />} />
+      </ImageBox>
+      <Text appearance="body2" weight="medium">{workspace.name}</Text>
+    </Center>
+    <Text color="light.700">{workspace.description}</Text>
+  </Column>
 }
 
 export interface TabProps {
@@ -52,9 +48,9 @@ export const WorkspaceResources = ({ workspaceId, allKS, agent, stack }: Omit<Ta
   const { navigate } = useComponentNavigation<typeof workspaceTabComponents>()
   const [isPending, startTransition] = useTransition()
   const resourceTypes: WorkspaceResource[] = [
-    { id: 'agents', resourceType: 'agent', displayName: 'Agents', workspaceId, icon: <Agent /> },
-    { id: 'ks', resourceType: 'ks', displayName: 'Knowledge Sources', workspaceId, icon: <KnowledgeSource /> },
-    { id: 'stack', resourceType: 'stack', displayName: 'Stacks', workspaceId, icon: <Stack /> },
+    { id: 'agents', resourceType: 'agent', displayName: 'Agents', workspaceId, icon: <Icon icon="Agent" /> },
+    { id: 'ks', resourceType: 'ks', displayName: 'Knowledge Sources', workspaceId, icon: <Icon icon="KnowledgeSource" /> },
+    { id: 'stack', resourceType: 'stack', displayName: 'Stacks', workspaceId, icon: <Icon icon="Stack" /> },
   ]
 
   const handleNavigate = (resource: WorkspaceResource) => {
@@ -72,14 +68,14 @@ export const WorkspaceResources = ({ workspaceId, allKS, agent, stack }: Omit<Ta
 
   return (<>
     {workspaceId && <SpaceCard workspaceId={workspaceId} />}
-    {isPending ? <Loading /> :
+    {<AsyncContent loading={isPending}>
       <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' }}
       />
-    }
+    </AsyncContent>}
   </>
   )
 }
@@ -105,7 +101,7 @@ export function WorkspacesTab({ visibility, allKS, agent, stack, onSubmit }: Tab
       getNavigateParam={buildNavigateParams}
       visibility={visibility}
     />
-    <Button className="workspace-submit" onClick={onSubmit} >{t.apply}</Button>
+    <Button className="workspace-submit" onClick={onSubmit}>{t.apply}</Button>
   </>
   )
 }

package/src/views/Workspaces/index.tsx

@@ -48,11 +48,13 @@ const WorkspacesPanel = () => {
 
   return <RightPanelTabs key={chat.id} tabs={[
     {
-      title: t.favorites,
+      key: 'favorites',
+      label: t.favorites,
       content: <WorkspacesTab key="favorite" visibility="favorite" allKS={allKS} agent={agent} stack={stack} onSubmit={onSubmit} />,
     },
     {
-      title: t.all,
+      key: 'all',
+      label: t.all,
       content: <WorkspacesTab key="all" visibility="all" allKS={allKS} agent={agent} stack={stack} onSubmit={onSubmit} />,
     },
   ]}

package/dist/components/Accordion.d.ts

@@ -1,20 +0,0 @@
-import { WithStyle } from '@stack-spot/portal-theme';
-import React from 'react';
-import { WithChildren } from '../types.js';
-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;
-}
-/**
- * A component that can have it's content shown or hidden (animated).
- */
-export declare const Accordion: ({ children, header, className, startExpanded, style }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=Accordion.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../src/components/Accordion.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAS,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,UAAU,KAAM,SAAQ,SAAS,EAAE,QAAQ,CAAC,YAAY,CAAC;IACvD;;OAEG;IACH,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAsCD;;GAEG;AACH,eAAO,MAAM,SAAS,0DAA2D,KAAK,4CAarF,CAAA"}

package/dist/components/Accordion.js

@@ -1,51 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* 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 } from '@stack-spot/portal-theme';
-import { useState } from 'react';
-import { styled } from 'styled-components';
-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 }) => {
-    const [expanded, setExpanded] = useState(startExpanded);
-    return (_jsx(AnimatedHeight, { style: style, className: className, outerStyle: { width: '100%' }, children: _jsxs(StyledAccordion, { children: [_jsxs("header", { className: expanded ? 'expanded' : '', children: [header, _jsx(IconButton, { onClick: () => setExpanded(v => !v), children: _jsx(ChevronDown, {}) })] }), expanded ? _jsx("div", { className: "accordion-content", children: children }) : null] }) }));
-};
-//# sourceMappingURL=Accordion.js.map

package/dist/components/Accordion.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../src/components/Accordion.tsx"],"names":[],"mappings":";AAAA,iEAAiE;AAEjE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,8CAA8C,CAAA;AAC7E,OAAO,EAAE,KAAK,EAAa,MAAM,0BAA0B,CAAA;AAC3D,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAe1C,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;wBAOV,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2B7C,CAAA;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,KAAK,EAAS,EAAE,EAAE;IACxF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAA;IACvD,OAAO,CACL,KAAC,cAAc,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,YAC/E,MAAC,eAAe,eACd,kBAAQ,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,aAC1C,MAAM,EACP,KAAC,UAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,YAAE,KAAC,WAAW,KAAG,GAAa,IACtE,EACR,QAAQ,CAAC,CAAC,CAAC,cAAK,SAAS,EAAC,mBAAmB,YAAE,QAAQ,GAAO,CAAC,CAAC,CAAC,IAAI,IACtD,GACH,CAClB,CAAA;AACH,CAAC,CAAA"}

package/dist/components/FallbackBoundary/ErrorBoundary.d.ts

@@ -1,33 +0,0 @@
-import { ErrorDescription } from '@stack-spot/portal-components/error';
-import { Component } from 'react';
-interface State extends ErrorDescription {
-    hasError: boolean;
-}
-interface Props {
-    mini?: boolean;
-    message?: string;
-    children: React.ReactNode;
-}
-/**
- * An Error Boundary that renders an ErrorFeedback instead of its content if any of its children throws.
- *
- * To customize what properties are passed to the ErrorFeedback component, setup an error descriptor for the ErrorManager class. If you're
- * using the component `Layout` or `RawLayout`, you can use the property `errorDescriptor`.
- *
- * To run an error handler every time an error is catch by this boundary, setup an error handler for the ErrorManager class. If you're
- * using the component `Layout` or `RawLayout`, you can use the property `onError`.
- */
-export declare class ErrorBoundary extends Component<Props, State> {
-    constructor(props: Props);
-    static getDerivedStateFromError(error: any): {
-        hasError: boolean;
-        message: any;
-        code: number | undefined;
-    };
-    componentDidCatch(error: any, errorInfo: any): void;
-    componentDidUpdate(prevProps: Readonly<Props>): void;
-    private renderError;
-    render(): string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
-}
-export {};
-//# sourceMappingURL=ErrorBoundary.d.ts.map

package/dist/components/FallbackBoundary/ErrorBoundary.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ErrorBoundary.d.ts","sourceRoot":"","sources":["../../../src/components/FallbackBoundary/ErrorBoundary.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAiB,MAAM,qCAAqC,CAAA;AAErF,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGjC,UAAU,KAAM,SAAQ,gBAAgB;IACtC,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAWD;;;;;;;;GAQG;AACH,qBAAa,aAAc,SAAQ,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;gBAC5C,KAAK,EAAE,KAAK;IAKxB,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,GAAG;;;;;IAM1C,iBAAiB,CAAC,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG;IAK5C,kBAAkB,CAAC,SAAS,EAAE,QAAQ,CAAC,KAAK,CAAC;IAI7C,OAAO,CAAC,WAAW;IAWnB,MAAM;CAGP"}

package/dist/components/FallbackBoundary/ErrorBoundary.js

@@ -1,52 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconBox, Text } from '@citric/core';
-import { TimesCircle } from '@citric/icons';
-import { ErrorFeedback } from '@stack-spot/portal-components/error';
-import { StackspotAPIError } from '@stack-spot/portal-network';
-import { Component } from 'react';
-import { styled } from 'styled-components';
-const ErrorBox = styled.div `
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-`;
-/**
- * An Error Boundary that renders an ErrorFeedback instead of its content if any of its children throws.
- *
- * To customize what properties are passed to the ErrorFeedback component, setup an error descriptor for the ErrorManager class. If you're
- * using the component `Layout` or `RawLayout`, you can use the property `errorDescriptor`.
- *
- * To run an error handler every time an error is catch by this boundary, setup an error handler for the ErrorManager class. If you're
- * using the component `Layout` or `RawLayout`, you can use the property `onError`.
- */
-export class ErrorBoundary extends Component {
-    constructor(props) {
-        super(props);
-        this.state = { hasError: false };
-    }
-    static getDerivedStateFromError(error) {
-        const message = error instanceof StackspotAPIError ? error.translate() : (error.message ?? `${error}`);
-        const code = error instanceof StackspotAPIError ? error.status : undefined;
-        return { hasError: true, message, code };
-    }
-    componentDidCatch(error, errorInfo) {
-        // eslint-disable-next-line no-console
-        console.error(error, errorInfo);
-    }
-    componentDidUpdate(prevProps) {
-        if (this.props.children !== prevProps.children)
-            this.setState({ hasError: false });
-    }
-    renderError() {
-        return this.props.mini
-            ? (_jsxs(ErrorBox, { className: "error", children: [_jsx(IconBox, { size: "lg", colorIcon: "danger.500", children: _jsx(TimesCircle, {}) }), _jsx(Text, { colorScheme: "light.700", children: this.props.message || this.state.message })] }))
-            : _jsx(ErrorFeedback, { className: "error", code: this.state.code, message: this.props.message || this.state.message });
-    }
-    render() {
-        return this.state.hasError ? this.renderError() : this.props.children;
-    }
-}
-//# sourceMappingURL=ErrorBoundary.js.map

package/dist/components/FallbackBoundary/ErrorBoundary.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ErrorBoundary.js","sourceRoot":"","sources":["../../../src/components/FallbackBoundary/ErrorBoundary.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAoB,aAAa,EAAE,MAAM,qCAAqC,CAAA;AACrF,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAY1C,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAO1B,CAAA;AAED;;;;;;;;GAQG;AACH,MAAM,OAAO,aAAc,SAAQ,SAAuB;IACxD,YAAY,KAAY;QACtB,KAAK,CAAC,KAAK,CAAC,CAAA;QACZ,IAAI,CAAC,KAAK,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAA;IAClC,CAAC;IAED,MAAM,CAAC,wBAAwB,CAAC,KAAU;QACxC,MAAM,OAAO,GAAG,KAAK,YAAY,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,IAAI,GAAG,KAAK,EAAE,CAAC,CAAA;QACtG,MAAM,IAAI,GAAG,KAAK,YAAY,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAA;QAC1E,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAA;IAC1C,CAAC;IAED,iBAAiB,CAAC,KAAU,EAAE,SAAc;QAC1C,sCAAsC;QACtC,OAAO,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,CAAC,CAAA;IACjC,CAAC;IAED,kBAAkB,CAAC,SAA0B;QAC3C,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAK,SAAS,CAAC,QAAQ;YAAE,IAAI,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAA;IACpF,CAAC;IAEO,WAAW;QACjB,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI;YACpB,CAAC,CAAC,CACA,MAAC,QAAQ,IAAC,SAAS,EAAC,OAAO,aACzB,KAAC,OAAO,IAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,YAAY,YAAC,KAAC,WAAW,KAAG,GAAU,EACnE,KAAC,IAAI,IAAC,WAAW,EAAC,WAAW,YAAE,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,GAAQ,IACtE,CACZ;YACD,CAAC,CAAC,KAAC,aAAa,IAAC,SAAS,EAAC,OAAO,EAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,GAAI,CAAA;IACnH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA;IACvE,CAAC;CACF"}

package/dist/components/FallbackBoundary/Loading.d.ts

@@ -1,2 +0,0 @@
-export declare const Loading: () => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Loading.d.ts.map

package/dist/components/FallbackBoundary/Loading.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Loading.d.ts","sourceRoot":"","sources":["../../../src/components/FallbackBoundary/Loading.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,OAAO,+CAEnB,CAAA"}

package/dist/components/FallbackBoundary/Loading.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { LoadingCircular } from '@citric/ui';
-import styled from 'styled-components';
-const LoadingBox = styled.div `
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-export const Loading = () => (_jsx(LoadingBox, { className: "loading", children: _jsx(LoadingCircular, {}) }));
-//# sourceMappingURL=Loading.js.map

package/dist/components/FallbackBoundary/Loading.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Loading.js","sourceRoot":"","sources":["../../../src/components/FallbackBoundary/Loading.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAM5B,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,CAC3B,KAAC,UAAU,IAAC,SAAS,EAAC,SAAS,YAAC,KAAC,eAAe,KAAG,GAAa,CACjE,CAAA"}

package/dist/components/FallbackBoundary/index.d.ts

@@ -1,17 +0,0 @@
-import { WithChildren } from '../../types.js';
-interface Props extends WithChildren {
-    /**
-     * Use this to show errors in small spaces.
-     */
-    mini?: boolean;
-    /**
-     * Replaces the error message with this text.
-     */
-    message?: string;
-}
-/**
- * Fallbacks for errors and loadings (suspense).
- */
-export declare const FallbackBoundary: ({ children, mini, message }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=index.d.ts.map

package/dist/components/FallbackBoundary/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FallbackBoundary/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAI1C,UAAU,KAAM,SAAQ,YAAY;IAClC;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,gCAAiC,KAAK,4CAMlE,CAAA"}

package/dist/components/FallbackBoundary/index.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Suspense } from 'react';
-import { ErrorBoundary } from './ErrorBoundary.js';
-import { Loading } from './Loading.js';
-/**
- * Fallbacks for errors and loadings (suspense).
- */
-export const FallbackBoundary = ({ children, mini, message }) => (_jsx(ErrorBoundary, { mini: mini, message: message, children: _jsx(Suspense, { fallback: _jsx(Loading, {}), children: children }) }));
-//# sourceMappingURL=index.js.map

package/dist/components/FallbackBoundary/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FallbackBoundary/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAanC;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAS,EAAE,EAAE,CAAC,CACtE,KAAC,aAAa,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,YACzC,KAAC,QAAQ,IAAC,QAAQ,EAAE,KAAC,OAAO,KAAG,YAC5B,QAAQ,GACA,GACG,CACjB,CAAA"}

package/dist/components/IconInput.d.ts

@@ -1,10 +0,0 @@
-interface Props extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
-    icon: React.ReactElement;
-    onChange?: (value: string) => void;
-}
-/**
- * A text input with an icon at the left side.
- */
-export declare const IconInput: ({ icon, onChange, style, className, disabled, onFocus, onBlur, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=IconInput.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"IconInput.d.ts","sourceRoot":"","sources":["../../src/components/IconInput.tsx"],"names":[],"mappings":"AAKA,UAAU,KAAM,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC;IACnF,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAyCD;;GAEG;AACH,eAAO,MAAM,SAAS,8EAA+E,KAAK,4CAoBzG,CAAA"}

package/dist/components/IconInput.js

@@ -1,61 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconBox } from '@citric/core';
-import { listToClass, theme } from '@stack-spot/portal-theme';
-import { useMemo, useState } from 'react';
-import { styled } from 'styled-components';
-const InputBox = styled.div `
-  display: flex;
-  flex-direction: row;
-  transition: border-color 0.3s, box-shadow 0.3s;
-  border: 1px solid ${theme.color.light[600]};
-  border-radius: 0.25rem;
-  background-color: ${theme.color.light[300]};
-  overflow: hidden;
-  flex-shrink: 0;
-
-  &.focused {
-    border-color: ${theme.color.primary[500]};
-    box-shadow: 0 0 0 1px ${theme.color.primary[500]};
-  }
-
-  &.disabled {
-      background-color: ${theme.color.light[500]};
-    }
-
-  ${IconBox} {
-    width: 40px;
-    height: 40px;
-    border-radius: 0;
-    background-color: ${theme.color.light[600]};
-  }
-
-  input {
-    padding: 8px;
-    border: none;
-    background-color: transparent;
-    flex: 1;
-    color: ${theme.color.light.contrastText};
-
-    &:focus {
-      outline: none;
-    }
-  }
-`;
-/**
- * A text input with an icon at the left side.
- */
-export const IconInput = ({ icon, onChange, style, className, disabled, onFocus, onBlur, ...props }) => {
-    const [focused, setFocused] = useState(false);
-    const { focus, blur } = useMemo(() => ({
-        focus: (e) => {
-            setFocused(true);
-            onFocus?.(e);
-        },
-        blur: (e) => {
-            setFocused(false);
-            onBlur?.(e);
-        },
-    }), []);
-    return (_jsxs(InputBox, { style: style, className: listToClass([className, focused && !disabled && 'focused', disabled && 'disabled']), children: [_jsx(IconBox, { children: icon }), _jsx("input", { ...props, disabled: disabled, onFocus: focus, onBlur: blur, onChange: e => onChange?.(e.target.value) })] }));
-};
-//# sourceMappingURL=IconInput.js.map

package/dist/components/IconInput.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconInput.js","sourceRoot":"","sources":["../../src/components/IconInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AACtC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAC7D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAO1C,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAA;;;;sBAIL,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;sBAEtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;oBAKxB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;4BAChB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;;;;0BAI1B,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;IAG5C,OAAO;;;;wBAIa,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;aAQjC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY;;;;;;CAM1C,CAAA;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,KAAK,EAAS,EAAE,EAAE;IAC5G,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAE7C,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QACrC,KAAK,EAAE,CAAC,CAA8C,EAAE,EAAE;YACxD,UAAU,CAAC,IAAI,CAAC,CAAA;YAChB,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;QACd,CAAC;QACD,IAAI,EAAE,CAAC,CAA8C,EAAE,EAAE;YACvD,UAAU,CAAC,KAAK,CAAC,CAAA;YACjB,MAAM,EAAE,CAAC,CAAC,CAAC,CAAA;QACb,CAAC;KACF,CAAC,EAAE,EAAE,CAAC,CAAA;IAEP,OAAO,CACL,MAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,SAAS,EAAE,OAAO,IAAI,CAAC,QAAQ,IAAI,SAAS,EAAE,QAAQ,IAAI,UAAU,CAAC,CAAC,aACpH,KAAC,OAAO,cAAE,IAAI,GAAW,EACzB,mBAAW,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GAAI,IACxG,CACZ,CAAA;AACH,CAAC,CAAA"}

package/dist/components/OverlayMenu.d.ts

@@ -1,21 +0,0 @@
-import { WithStyle } from '@stack-spot/portal-theme';
-import { ButtonAction, WithChildren } from '../types.js';
-import { TooltipPosition } from './Tooltip/types.js';
-interface Props extends WithStyle, WithChildren {
-    /**
-     * The position of the menu relative to its children.
-     */
-    position?: TooltipPosition;
-    /**
-     * The actions of the menu.
-     */
-    actions: ButtonAction[];
-}
-/**
- * A floating menu that shows up when the user clicks the children.
- *
- * This uses the tooltip component to build the menu.
- */
-export declare const OverlayMenu: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
-export {};
-//# sourceMappingURL=OverlayMenu.d.ts.map