@uipath/apollo-react 6.44.2 → 6.45.1

package/dist/material/components/ap-chat/components/message/chat-message-content.cjs

@@ -52,38 +52,41 @@ const chat_actions_cjs_namespaceObject = require("./actions/chat-actions.cjs");
 const markdown_cjs_namespaceObject = require("./markdown/markdown.cjs");
 const chat_sources_cjs_namespaceObject = require("./sources/chat-sources.cjs");
 const tree_renderer_cjs_namespaceObject = require("./tree/tree-renderer.cjs");
-const getApolloMessageRenderers = (locale)=>[
-        {
-            name: external_service_index_cjs_namespaceObject.DEFAULT_MESSAGE_RENDERER,
-            component: markdown_cjs_namespaceObject.AutopilotChatMarkdownRenderer
-        },
-        {
-            name: external_service_index_cjs_namespaceObject.AGENTS_TOOL_CALL_RENDERER,
-            component: ({ message })=>{
-                if (!message.meta.span && !message.meta.input && !message.meta.toolName) return null;
-                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApToolCall, {
-                    span: message.meta.span,
-                    toolName: message.meta.toolName,
-                    input: message.meta.input,
-                    output: message.meta.output,
-                    isError: message.meta.isError,
-                    startTime: message.meta.startTime,
-                    endTime: message.meta.endTime,
-                    displayMode: message.meta.displayMode,
-                    locale: locale
-                });
-            }
-        },
-        {
-            name: external_service_index_cjs_namespaceObject.APOLLO_CHAT_TREE_RENDERER,
-            component: ({ message })=>{
-                if (!message.meta?.span) return null;
-                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tree_renderer_cjs_namespaceObject.ApolloChatTreeRenderer, {
-                    span: message.meta.span
-                });
-            }
-        }
-    ];
+const ToolCallMessageRenderer = ({ message })=>{
+    const { locale } = (0, locale_provider_cjs_namespaceObject.useLocale)();
+    if (!message.meta.span && !message.meta.input && !message.meta.toolName) return null;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApToolCall, {
+        span: message.meta.span,
+        toolName: message.meta.toolName,
+        input: message.meta.input,
+        output: message.meta.output,
+        isError: message.meta.isError,
+        startTime: message.meta.startTime,
+        endTime: message.meta.endTime,
+        displayMode: message.meta.displayMode,
+        locale: locale
+    });
+};
+const ChatTreeMessageRenderer = ({ message })=>{
+    if (!message.meta?.span) return null;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tree_renderer_cjs_namespaceObject.ApolloChatTreeRenderer, {
+        span: message.meta.span
+    });
+};
+const APOLLO_MESSAGE_RENDERERS = [
+    {
+        name: external_service_index_cjs_namespaceObject.DEFAULT_MESSAGE_RENDERER,
+        component: markdown_cjs_namespaceObject.AutopilotChatMarkdownRenderer
+    },
+    {
+        name: external_service_index_cjs_namespaceObject.AGENTS_TOOL_CALL_RENDERER,
+        component: ToolCallMessageRenderer
+    },
+    {
+        name: external_service_index_cjs_namespaceObject.APOLLO_CHAT_TREE_RENDERER,
+        component: ChatTreeMessageRenderer
+    }
+];
 const MessageBoxComponent = (0, material_namespaceObject.styled)('div')(({ isAssistant, isCustomWidget })=>{
     const chatService = (0, chat_service_provider_cjs_namespaceObject.useChatService)();
     const { spacing } = (0, chat_state_provider_cjs_namespaceObject.useChatState)();
@@ -173,10 +176,8 @@ const WidgetContainer = /*#__PURE__*/ external_react_default().memo(({ message,
 });
 function AutopilotChatMessageContentComponent({ message, isLastInGroup = true, disableActions = false, containerRef }) {
     const chatService = (0, chat_service_provider_cjs_namespaceObject.useChatService)();
-    const { locale } = (0, locale_provider_cjs_namespaceObject.useLocale)();
     if (!message.content && !message.contentParts && !message.attachments) return null;
     if (!chatService.getMessageRenderer(message.widget)) {
-        const APOLLO_MESSAGE_RENDERERS = getApolloMessageRenderers(locale);
         const ApolloMessageRenderer = APOLLO_MESSAGE_RENDERERS.find((renderer)=>renderer.name === message.widget)?.component;
         return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(MessageBox, {
             isAssistant: message.role === external_service_index_cjs_namespaceObject.AutopilotChatRole.Assistant,

package/dist/material/components/ap-chat/components/message/chat-message-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chat-message-content.d.ts","sourceRoot":"","sources":["../../../../../../src/material/components/ap-chat/components/message/chat-message-content.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAKL,KAAK,oBAAoB,EAQ1B,MAAM,eAAe,CAAC;AAwKvB,iBAAS,oCAAoC,CAAC,EAC5C,OAAO,EACP,aAAoB,EACpB,cAAsB,EACtB,YAAY,GACb,EAAE;IACD,OAAO,EAAE,oBAAoB,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,EAAE,cAAc,GAAG,IAAI,CAAC;CACrC,kDAkDA;AAED,eAAO,MAAM,2BAA2B,wEAAmD,CAAC"}
+{"version":3,"file":"chat-message-content.d.ts","sourceRoot":"","sources":["../../../../../../src/material/components/ap-chat/components/message/chat-message-content.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAKL,KAAK,oBAAoB,EAQ1B,MAAM,eAAe,CAAC;AAiLvB,iBAAS,oCAAoC,CAAC,EAC5C,OAAO,EACP,aAAoB,EACpB,cAAsB,EACtB,YAAY,GACb,EAAE;IACD,OAAO,EAAE,oBAAoB,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,EAAE,cAAc,GAAG,IAAI,CAAC;CACrC,kDAgDA;AAED,eAAO,MAAM,2BAA2B,wEAAmD,CAAC"}

package/dist/material/components/ap-chat/components/message/chat-message-content.js

@@ -13,38 +13,41 @@ import { AutopilotChatMessageActions } from "./actions/chat-actions.js";
 import { AutopilotChatMarkdownRenderer } from "./markdown/markdown.js";
 import { AutopilotChatSources } from "./sources/chat-sources.js";
 import { ApolloChatTreeRenderer } from "./tree/tree-renderer.js";
-const getApolloMessageRenderers = (locale)=>[
-        {
-            name: DEFAULT_MESSAGE_RENDERER,
-            component: AutopilotChatMarkdownRenderer
-        },
-        {
-            name: AGENTS_TOOL_CALL_RENDERER,
-            component: ({ message })=>{
-                if (!message.meta.span && !message.meta.input && !message.meta.toolName) return null;
-                return /*#__PURE__*/ jsx(ApToolCall, {
-                    span: message.meta.span,
-                    toolName: message.meta.toolName,
-                    input: message.meta.input,
-                    output: message.meta.output,
-                    isError: message.meta.isError,
-                    startTime: message.meta.startTime,
-                    endTime: message.meta.endTime,
-                    displayMode: message.meta.displayMode,
-                    locale: locale
-                });
-            }
-        },
-        {
-            name: APOLLO_CHAT_TREE_RENDERER,
-            component: ({ message })=>{
-                if (!message.meta?.span) return null;
-                return /*#__PURE__*/ jsx(ApolloChatTreeRenderer, {
-                    span: message.meta.span
-                });
-            }
-        }
-    ];
+const ToolCallMessageRenderer = ({ message })=>{
+    const { locale } = useLocale();
+    if (!message.meta.span && !message.meta.input && !message.meta.toolName) return null;
+    return /*#__PURE__*/ jsx(ApToolCall, {
+        span: message.meta.span,
+        toolName: message.meta.toolName,
+        input: message.meta.input,
+        output: message.meta.output,
+        isError: message.meta.isError,
+        startTime: message.meta.startTime,
+        endTime: message.meta.endTime,
+        displayMode: message.meta.displayMode,
+        locale: locale
+    });
+};
+const ChatTreeMessageRenderer = ({ message })=>{
+    if (!message.meta?.span) return null;
+    return /*#__PURE__*/ jsx(ApolloChatTreeRenderer, {
+        span: message.meta.span
+    });
+};
+const APOLLO_MESSAGE_RENDERERS = [
+    {
+        name: DEFAULT_MESSAGE_RENDERER,
+        component: AutopilotChatMarkdownRenderer
+    },
+    {
+        name: AGENTS_TOOL_CALL_RENDERER,
+        component: ToolCallMessageRenderer
+    },
+    {
+        name: APOLLO_CHAT_TREE_RENDERER,
+        component: ChatTreeMessageRenderer
+    }
+];
 const MessageBoxComponent = styled('div')(({ isAssistant, isCustomWidget })=>{
     const chatService = useChatService();
     const { spacing } = useChatState();
@@ -134,10 +137,8 @@ const WidgetContainer = /*#__PURE__*/ react.memo(({ message, isLastInGroup, cont
 });
 function AutopilotChatMessageContentComponent({ message, isLastInGroup = true, disableActions = false, containerRef }) {
     const chatService = useChatService();
-    const { locale } = useLocale();
     if (!message.content && !message.contentParts && !message.attachments) return null;
     if (!chatService.getMessageRenderer(message.widget)) {
-        const APOLLO_MESSAGE_RENDERERS = getApolloMessageRenderers(locale);
         const ApolloMessageRenderer = APOLLO_MESSAGE_RENDERERS.find((renderer)=>renderer.name === message.widget)?.component;
         return /*#__PURE__*/ jsxs(MessageBox, {
             isAssistant: message.role === AutopilotChatRole.Assistant,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-react",
-  "version": "6.44.2",
+  "version": "6.45.1",
   "description": "Apollo Design System - React component library with Material UI theming",
   "repository": {
     "type": "git",
@@ -222,7 +222,7 @@
     "zustand": "^5.0.9",
     "@uipath/apollo-core": "5.14.0",
     "@uipath/apollo-ui-icons": "1.0.0",
-    "@uipath/apollo-wind": "2.48.0"
+    "@uipath/apollo-wind": "2.49.0"
   },
   "devDependencies": {
     "@lingui/cli": "^5.6.1",

package/dist/canvas/components/Toolbox/ListView.styles.cjs

@@ -1,136 +0,0 @@
-"use strict";
-var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.n = (module)=>{
-        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
-        __webpack_require__.d(getter, {
-            a: getter
-        });
-        return getter;
-    };
-})();
-(()=>{
-    __webpack_require__.d = (exports1, definition)=>{
-        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
-            enumerable: true,
-            get: definition[key]
-        });
-    };
-})();
-(()=>{
-    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
-})();
-(()=>{
-    __webpack_require__.r = (exports1)=>{
-        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
-            value: 'Module'
-        });
-        Object.defineProperty(exports1, '__esModule', {
-            value: true
-        });
-    };
-})();
-var __webpack_exports__ = {};
-__webpack_require__.r(__webpack_exports__);
-__webpack_require__.d(__webpack_exports__, {
-    StyledList: ()=>StyledList,
-    ListItemButton: ()=>ListItemButton,
-    IconContainer: ()=>IconContainer
-});
-const styled_namespaceObject = require("@emotion/styled");
-var styled_default = /*#__PURE__*/ __webpack_require__.n(styled_namespaceObject);
-const react_namespaceObject = require("motion/react");
-const external_react_window_namespaceObject = require("react-window");
-const ListItemButton = styled_default()(react_namespaceObject.motion.button)`
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  border: none;
-  background: transparent;
-  border-radius: 8px;
-  cursor: pointer;
-  text-align: left;
-  width: 100%;
-  // Don't rely on a consumer's global reset: the row combines width:100% + an
-  // explicit react-window height with its own padding, so content-box would
-  // overflow the slot and desync the virtualizer's row positions.
-  box-sizing: border-box;
-  // Reserve the focus ring geometry in the resting state (invisible via a
-  // transparent color) so activating a row only flips outline-color. Without
-  // this the outline falls back to UA defaults (3px / currentColor) and every
-  // sub-property jumps at once, flashing a thick dark border under transition.
-  outline: 1px solid transparent;
-  outline-offset: -1px;
-  transition: background-color 0.15s ease, opacity 0.15s ease, outline-color 0.15s ease;
-
-  &:hover,
-  &.active {
-    background: var(--canvas-background-hover);
-  }
-
-  &.active {
-    outline-color: var(--canvas-primary);
-  }
-`;
-const IconContainer = styled_default().div`
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  // Transparent unless the item declares a background (color / colorDark),
-  // so plain rows read as icon + text without a tile.
-  background: ${(props)=>props.bgColor || 'transparent'};
-  border-radius: 6px;
-  color: var(--canvas-foreground-emp);
-  opacity: 0.9;
-  flex-shrink: 0;
-  // Icons should show below the inset outline
-  z-index: -1;
-`;
-const StyledList = styled_default()(external_react_window_namespaceObject.List)`
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: var(--canvas-border-de-emp);
-    border-radius: 3px;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: var(--canvas-border);
-  }
-
-  .list-view-item-name {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .loading {
-    opacity: 0.5;
-    pointer-events: none;
-    cursor: not-allowed;
-
-    // Ensure all child elements are also greyed out
-    * {
-      opacity: 0.7;
-    }
-  }
-`;
-exports.IconContainer = __webpack_exports__.IconContainer;
-exports.ListItemButton = __webpack_exports__.ListItemButton;
-exports.StyledList = __webpack_exports__.StyledList;
-for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "IconContainer",
-    "ListItemButton",
-    "StyledList"
-].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});

package/dist/canvas/components/Toolbox/ListView.styles.d.ts

@@ -1,12 +0,0 @@
-import { List } from 'react-window';
-export declare const ListItemButton: import("@emotion/styled").StyledComponent<Omit<import("motion/react").HTMLMotionProps<"button">, "ref"> & import("react").RefAttributes<HTMLButtonElement> & {
-    theme?: import("@emotion/react").Theme;
-}, {}, {}>;
-export declare const IconContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & {
-    bgColor?: string;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledList: typeof List;
-//# sourceMappingURL=ListView.styles.d.ts.map

package/dist/canvas/components/Toolbox/ListView.styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListView.styles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/ListView.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,eAAO,MAAM,cAAc;;UA8B1B,CAAC;AAEF,eAAO,MAAM,aAAa;;;;cAA0B,MAAM;yGAezD,CAAC;AAEF,eAAO,MAAM,UAAU,EAkClB,OAAO,IAAI,CAAC"}

package/dist/canvas/components/Toolbox/ListView.styles.js

@@ -1,86 +0,0 @@
-import styled from "@emotion/styled";
-import { motion } from "motion/react";
-import { List } from "react-window";
-const ListItemButton = styled(motion.button)`
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  border: none;
-  background: transparent;
-  border-radius: 8px;
-  cursor: pointer;
-  text-align: left;
-  width: 100%;
-  // Don't rely on a consumer's global reset: the row combines width:100% + an
-  // explicit react-window height with its own padding, so content-box would
-  // overflow the slot and desync the virtualizer's row positions.
-  box-sizing: border-box;
-  // Reserve the focus ring geometry in the resting state (invisible via a
-  // transparent color) so activating a row only flips outline-color. Without
-  // this the outline falls back to UA defaults (3px / currentColor) and every
-  // sub-property jumps at once, flashing a thick dark border under transition.
-  outline: 1px solid transparent;
-  outline-offset: -1px;
-  transition: background-color 0.15s ease, opacity 0.15s ease, outline-color 0.15s ease;
-
-  &:hover,
-  &.active {
-    background: var(--canvas-background-hover);
-  }
-
-  &.active {
-    outline-color: var(--canvas-primary);
-  }
-`;
-const IconContainer = styled.div`
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  // Transparent unless the item declares a background (color / colorDark),
-  // so plain rows read as icon + text without a tile.
-  background: ${(props)=>props.bgColor || 'transparent'};
-  border-radius: 6px;
-  color: var(--canvas-foreground-emp);
-  opacity: 0.9;
-  flex-shrink: 0;
-  // Icons should show below the inset outline
-  z-index: -1;
-`;
-const StyledList = styled(List)`
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: var(--canvas-border-de-emp);
-    border-radius: 3px;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: var(--canvas-border);
-  }
-
-  .list-view-item-name {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .loading {
-    opacity: 0.5;
-    pointer-events: none;
-    cursor: not-allowed;
-
-    // Ensure all child elements are also greyed out
-    * {
-      opacity: 0.7;
-    }
-  }
-`;
-export { IconContainer, ListItemButton, StyledList };

package/dist/canvas/components/Toolbox/SearchBox.styles.cjs

@@ -1,114 +0,0 @@
-"use strict";
-var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.n = (module)=>{
-        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
-        __webpack_require__.d(getter, {
-            a: getter
-        });
-        return getter;
-    };
-})();
-(()=>{
-    __webpack_require__.d = (exports1, definition)=>{
-        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
-            enumerable: true,
-            get: definition[key]
-        });
-    };
-})();
-(()=>{
-    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
-})();
-(()=>{
-    __webpack_require__.r = (exports1)=>{
-        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
-            value: 'Module'
-        });
-        Object.defineProperty(exports1, '__esModule', {
-            value: true
-        });
-    };
-})();
-var __webpack_exports__ = {};
-__webpack_require__.r(__webpack_exports__);
-__webpack_require__.d(__webpack_exports__, {
-    StyledSearchForm: ()=>StyledSearchForm
-});
-const styled_namespaceObject = require("@emotion/styled");
-var styled_default = /*#__PURE__*/ __webpack_require__.n(styled_namespaceObject);
-const StyledSearchForm = styled_default().form`
-  width: 100%;
-
-  .searchbox-container {
-    display: flex;
-    align-items: center;
-    background: var(--canvas-background);
-    border: 1px solid var(--canvas-border-de-emp);
-    border-radius: 8px;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
-    padding: 0 12px;
-    height: 32px;
-    transition:
-      border-color 0.2s,
-      box-shadow 0.2s;
-    position: relative;
-  }
-
-  .searchbox-container:focus-within {
-    border: 2px solid var(--canvas-primary);
-  }
-
-  .searchbox-container.has-value .searchbox-clear {
-    visibility: visible;
-  }
-
-  .searchbox-icon {
-    display: flex;
-    align-items: center;
-    margin-right: 8px;
-    color: var(--canvas-foreground);
-  }
-
-  .searchbox-input {
-    flex: 1;
-    border: none;
-    outline: none;
-    font-size: 14px;
-    background: transparent;
-    color: var(--canvas-foreground);
-    padding: 6px 0;
-  }
-
-  .searchbox-input::placeholder {
-    font-size: 14px;
-    font-family:
-      Noto Sans,
-      sans-serif;
-    line-height: 20px;
-    color: var(--canvas-foreground-de-emp);
-  }
-
-  .searchbox-clear {
-    display: flex;
-    align-items: center;
-    margin-left: 8px;
-    color: var(--canvas-foreground-de-emp);
-    cursor: pointer;
-    transition: color 0.2s;
-    visibility: hidden;
-    border: none;
-    background: transparent;
-  }
-
-  .searchbox-clear:hover {
-    color: var(--canvas-primary);
-  }
-`;
-exports.StyledSearchForm = __webpack_exports__.StyledSearchForm;
-for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "StyledSearchForm"
-].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});

package/dist/canvas/components/Toolbox/SearchBox.styles.d.ts

@@ -1,5 +0,0 @@
-export declare const StyledSearchForm: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, {}>;
-//# sourceMappingURL=SearchBox.styles.d.ts.map

package/dist/canvas/components/Toolbox/SearchBox.styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SearchBox.styles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/SearchBox.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB;;;+GAmE5B,CAAC"}

package/dist/canvas/components/Toolbox/SearchBox.styles.js

@@ -1,70 +0,0 @@
-import styled from "@emotion/styled";
-const StyledSearchForm = styled.form`
-  width: 100%;
-
-  .searchbox-container {
-    display: flex;
-    align-items: center;
-    background: var(--canvas-background);
-    border: 1px solid var(--canvas-border-de-emp);
-    border-radius: 8px;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
-    padding: 0 12px;
-    height: 32px;
-    transition:
-      border-color 0.2s,
-      box-shadow 0.2s;
-    position: relative;
-  }
-
-  .searchbox-container:focus-within {
-    border: 2px solid var(--canvas-primary);
-  }
-
-  .searchbox-container.has-value .searchbox-clear {
-    visibility: visible;
-  }
-
-  .searchbox-icon {
-    display: flex;
-    align-items: center;
-    margin-right: 8px;
-    color: var(--canvas-foreground);
-  }
-
-  .searchbox-input {
-    flex: 1;
-    border: none;
-    outline: none;
-    font-size: 14px;
-    background: transparent;
-    color: var(--canvas-foreground);
-    padding: 6px 0;
-  }
-
-  .searchbox-input::placeholder {
-    font-size: 14px;
-    font-family:
-      Noto Sans,
-      sans-serif;
-    line-height: 20px;
-    color: var(--canvas-foreground-de-emp);
-  }
-
-  .searchbox-clear {
-    display: flex;
-    align-items: center;
-    margin-left: 8px;
-    color: var(--canvas-foreground-de-emp);
-    cursor: pointer;
-    transition: color 0.2s;
-    visibility: hidden;
-    border: none;
-    background: transparent;
-  }
-
-  .searchbox-clear:hover {
-    color: var(--canvas-primary);
-  }
-`;
-export { StyledSearchForm };