venice-ui 3.0.53 → 3.0.55

package/dist/cjs/components/Table/Table.js

@@ -44,16 +44,18 @@ const Filters_1 = require("../Filters");
 const Pagination_1 = require("../Pagination");
 const HeaderCell_1 = require("./HeaderCell");
 const Cell_1 = require("./Cell");
+const SearchInput_1 = require("../SearchInput");
 const Table = ({ theme, themeVariant = 'default', headers, elements, hover = true, selectable = true, filtrable = false, pagination = false, sortable = true, sort = {
     name: '',
     order: 'none',
-}, pageSize = 20, moreActions = [], onRowClick, filterLabels, paginationCounters, tableHeight, tableWrapperHeight, paginationLabel, calendarLabels, calendarLocaleLabels, paginationZIndex, }) => {
+}, pageSize = 20, moreActions = [], onRowClick, filterLabels, paginationCounters, tableHeight, tableWrapperHeight, paginationLabel, calendarLabels, calendarLocaleLabels, paginationZIndex, headerExtraContent, searchable = true, searchInputPlaceholder = config_2.wordbook.searchInput.placeholder, }) => {
     const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
         theme,
         themeVariant,
     });
     const resolvedTheme = resolvedThemeData.resolvedTheme;
     const { componentsConfig } = resolvedThemeData;
+    const [searchValue, setSearchValue] = (0, react_1.useState)('');
     const tableConfig = componentsConfig.table;
     const tableHeaders = (0, react_1.useMemo)(() => {
         const nextHeaders = [...headers];
@@ -116,16 +118,41 @@ const Table = ({ theme, themeVariant = 'default', headers, elements, hover = tru
     const paginatedElements = (0, react_1.useMemo)(() => {
         return tableElementsState.slice((currentPage - 1) * currentPageSize, currentPage * currentPageSize);
     }, [tableElementsState, currentPage, currentPageSize]);
-    const visibleElements = pagination ? paginatedElements : tableElementsState;
+    const handleSearchChange = (value) => {
+        setSearchValue(value);
+    };
+    const getVisableElements = () => {
+        const visable = pagination ? paginatedElements : tableElementsState;
+        if (searchValue) {
+            const searchValueLower = searchValue.toLowerCase();
+            return visable.filter((item) => {
+                return tableHeaders.some((header) => {
+                    const value = item[header.valueSource];
+                    if (value && typeof value === 'string') {
+                        return value.toLowerCase().includes(searchValueLower);
+                    }
+                    else if (value && typeof value === 'number') {
+                        return value.toString().toLowerCase().includes(searchValueLower);
+                    }
+                    return false;
+                });
+            });
+        }
+        return visable;
+    };
+    const visibleElements = getVisableElements();
     return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: resolvedTheme },
         react_1.default.createElement(Table_styles_1.TableRoot, { theme: resolvedTheme, config: tableConfig, componentHeight: tableWrapperHeight },
             react_1.default.createElement(react_1.default.Fragment, null,
                 (filtrable || pagination) && (react_1.default.createElement(Table_styles_1.TableHeader, { theme: resolvedTheme, config: tableConfig, right: pagination && !filtrable },
                     react_1.default.createElement(react_1.default.Fragment, null,
-                        filtrable && (react_1.default.createElement(Table_styles_1.HeaderSection, null,
-                            react_1.default.createElement(Filters_1.Filters, { labels: filterLabels, headers: headers, elements: fullElements, fullElements: fullElements, handleSubmitFilters: handleApplyFilters, externalClearSignal: filtersClearSignal, onClear: handleClearFilters, calendarLabels: calendarLabels, calendarLocaleLabels: calendarLocaleLabels }))),
-                        pagination && (react_1.default.createElement(Table_styles_1.HeaderSection, { right: true },
-                            react_1.default.createElement(Pagination_1.Pagination, { currentPage: currentPage, totalPages: totalPages, pageSize: currentPageSize, onPageChange: setCurrentPage, onPageSizeChange: setCurrentPageSize, label: paginationLabel?.label, availableValues: paginationCounters, zIndex: paginationZIndex })))))),
+                        (filtrable || headerExtraContent) && (react_1.default.createElement(Table_styles_1.HeaderSection, null,
+                            filtrable && (react_1.default.createElement(Filters_1.Filters, { labels: filterLabels, headers: headers, elements: fullElements, fullElements: fullElements, handleSubmitFilters: handleApplyFilters, externalClearSignal: filtersClearSignal, onClear: handleClearFilters, calendarLabels: calendarLabels, calendarLocaleLabels: calendarLocaleLabels })),
+                            headerExtraContent && (react_1.default.createElement(Table_styles_1.HeaderSection, null, headerExtraContent)))),
+                        (pagination || searchable) && (react_1.default.createElement(Table_styles_1.HeaderSection, { right: true },
+                            searchable && (react_1.default.createElement(Table_styles_1.TableSearch, { theme: resolvedTheme, config: tableConfig },
+                                react_1.default.createElement(SearchInput_1.SearchInput, { placeholder: searchInputPlaceholder, handleSearch: handleSearchChange }))),
+                            pagination && (react_1.default.createElement(Pagination_1.Pagination, { currentPage: currentPage, totalPages: totalPages, pageSize: currentPageSize, onPageChange: setCurrentPage, onPageSizeChange: setCurrentPageSize, label: paginationLabel?.label, availableValues: paginationCounters, zIndex: paginationZIndex }))))))),
                 react_1.default.createElement(Table_styles_1.TableContentWrapper, { componentHeight: tableHeight },
                     react_1.default.createElement(Table_styles_1.TableContent, { theme: resolvedTheme, config: tableConfig, cellPadding: "0", cellSpacing: "0" },
                         react_1.default.createElement(Table_styles_1.TableHead, null,

package/dist/cjs/components/Table/Table.styles.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableCellContent = exports.TableCell = exports.TableRow = exports.OptionTableCellWrapper = exports.OptionTableCell = exports.IconTableHeaderCell = exports.OptionTableHeaderCell = exports.HeaderCellContent = exports.TableHeaderCell = exports.TableHeaderRow = exports.TableBody = exports.TableHead = exports.TableContent = exports.HeaderSection = exports.TableContentWrapper = exports.TableHeader = exports.TableRoot = void 0;
+exports.TableSearch = exports.TableCellContent = exports.TableCell = exports.TableRow = exports.OptionTableCellWrapper = exports.OptionTableCell = exports.IconTableHeaderCell = exports.OptionTableHeaderCell = exports.HeaderCellContent = exports.TableHeaderCell = exports.TableHeaderRow = exports.TableBody = exports.TableHead = exports.TableContent = exports.HeaderSection = exports.TableContentWrapper = exports.TableHeader = exports.TableRoot = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 exports.TableRoot = styled_components_1.default.div `
   display: flex;
@@ -15,7 +15,8 @@ exports.TableHeader = styled_components_1.default.div `
   display: flex;
   align-items: center;
   flex-shrink: 0;
-  justify-content: ${({ right }) => (right ? 'flex-end' : 'flex-start')};
+  // justify-content: ${({ right }) => (right ? 'flex-end' : 'flex-start')};
+  justify-content: space-between;
   height: ${({ theme, config }) => config.size.header.height}px;
 `;
 exports.TableContentWrapper = styled_components_1.default.div `
@@ -33,8 +34,8 @@ exports.HeaderSection = styled_components_1.default.div `
   display: flex;
   align-items: center;
   justify-content: ${({ right }) => (right ? 'flex-end' : 'flex-start')};
-  width: 50%;
   flex-shrink: 0;
+  gap: 8px;
 `;
 exports.TableContent = styled_components_1.default.table `
   box-sizing: border-box;
@@ -59,7 +60,7 @@ exports.TableHead = styled_components_1.default.thead `
     position: sticky;
     top: 0;
     z-index: 2;
-  };
+  }
   flex-shrink: 0;
 `;
 exports.TableBody = styled_components_1.default.tbody `
@@ -182,3 +183,26 @@ exports.TableCellContent = styled_components_1.default.div `
   color: ${({ theme, config, disabled }) => disabled ? config.color.disabled.text : config.color.default.header.text};
   width: 100%;
 `;
+exports.TableSearch = styled_components_1.default.div `
+  width: 100%;
+  appearance: textfield;
+  padding: 0px ${({ config }) => config.size.searchInput.paddingX}px;
+  height: ${({ config }) => config.size.searchInput.height}px;
+  border-radius: ${({ config }) => config.size.searchInput.radius}px;
+  font-size: ${({ config }) => config.size.searchInput.fontSize}px;
+  line-height: ${({ config }) => config.size.searchInput.lineHeight}px;
+  flex-direction: row;
+  -webkit-box-align: center;
+  align-items: center;
+  overflow: hidden;
+  width: 100%;
+  color: ${({ theme, config }) => config.color.default.searchInput.text};
+  border: 1px solid ${({ theme, config }) => config.color.default.searchInput.border};
+  background: ${({ theme, config }) => config.color.default.searchInput.background};
+   box-sizing: border-box;
+   :hover {
+    border-color: ${({ theme, config }) => config.color.hover.searchInput.border};
+  &:focus-within {
+    border-color: ${({ theme, config }) => config.color.active.searchInput.border};
+  }
+`;

package/dist/cjs/config/config.js

@@ -1420,6 +1420,13 @@ const createComponentsConfig = (theme = 'default') => {
                         },
                     },
                 },
+                searchInput: {
+                    height: exports.measurements.space.xl4,
+                    paddingX: exports.measurements.space.sm,
+                    radius: exports.measurements.size.radius.sm,
+                    fontSize: exports.measurements.font.size.sm,
+                    lineHeight: exports.measurements.font.lineHeight.sm,
+                }
             },
             color: {
                 default: {
@@ -1432,10 +1439,19 @@ const createComponentsConfig = (theme = 'default') => {
                         text: Theme.text.primary,
                         sortIcon: Theme.text.primary,
                     },
+                    searchInput: {
+                        background: Theme.surface.default,
+                        border: Theme.border.default,
+                        text: Theme.text.primary,
+                        placeholder: Theme.text.placeholder,
+                    }
                 },
                 hover: {
                     background: Theme.surface.hover,
                     activeBackground: Theme.action.primary.selectedHover,
+                    searchInput: {
+                        border: Theme.border.strong,
+                    }
                 },
                 active: {
                     background: Theme.action.primary.selected,
@@ -1443,6 +1459,9 @@ const createComponentsConfig = (theme = 'default') => {
                         textHeader: Theme.action.primary.default,
                         sortIcon: Theme.action.primary.default,
                     },
+                    searchInput: {
+                        border: Theme.border.focus,
+                    }
                 },
                 disabled: {
                     text: Theme.text.disabled,

package/dist/esm/components/Table/Table.js

@@ -3,21 +3,23 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { applySort, setSortParams } from './tableHelper';
 import { wordbook } from '../../config';
 import { ThemeProvider } from 'styled-components';
-import { HeaderSection, TableBody, TableContent, TableContentWrapper, TableHead, TableHeader, TableHeaderRow, TableRoot, TableRow, } from './Table.styles';
+import { HeaderSection, TableBody, TableContent, TableContentWrapper, TableHead, TableHeader, TableHeaderRow, TableRoot, TableRow, TableSearch, } from './Table.styles';
 import { Filters } from '../Filters';
 import { Pagination } from '../Pagination';
 import { HeaderCell } from './HeaderCell';
 import { Cell } from './Cell';
+import { SearchInput } from '../SearchInput';
 export const Table = ({ theme, themeVariant = 'default', headers, elements, hover = true, selectable = true, filtrable = false, pagination = false, sortable = true, sort = {
     name: '',
     order: 'none',
-}, pageSize = 20, moreActions = [], onRowClick, filterLabels, paginationCounters, tableHeight, tableWrapperHeight, paginationLabel, calendarLabels, calendarLocaleLabels, paginationZIndex, }) => {
+}, pageSize = 20, moreActions = [], onRowClick, filterLabels, paginationCounters, tableHeight, tableWrapperHeight, paginationLabel, calendarLabels, calendarLocaleLabels, paginationZIndex, headerExtraContent, searchable = true, searchInputPlaceholder = wordbook.searchInput.placeholder, }) => {
     const resolvedThemeData = resolveThemeWithComponentsConfig({
         theme,
         themeVariant,
     });
     const resolvedTheme = resolvedThemeData.resolvedTheme;
     const { componentsConfig } = resolvedThemeData;
+    const [searchValue, setSearchValue] = useState('');
     const tableConfig = componentsConfig.table;
     const tableHeaders = useMemo(() => {
         const nextHeaders = [...headers];
@@ -80,16 +82,41 @@ export const Table = ({ theme, themeVariant = 'default', headers, elements, hove
     const paginatedElements = useMemo(() => {
         return tableElementsState.slice((currentPage - 1) * currentPageSize, currentPage * currentPageSize);
     }, [tableElementsState, currentPage, currentPageSize]);
-    const visibleElements = pagination ? paginatedElements : tableElementsState;
+    const handleSearchChange = (value) => {
+        setSearchValue(value);
+    };
+    const getVisableElements = () => {
+        const visable = pagination ? paginatedElements : tableElementsState;
+        if (searchValue) {
+            const searchValueLower = searchValue.toLowerCase();
+            return visable.filter((item) => {
+                return tableHeaders.some((header) => {
+                    const value = item[header.valueSource];
+                    if (value && typeof value === 'string') {
+                        return value.toLowerCase().includes(searchValueLower);
+                    }
+                    else if (value && typeof value === 'number') {
+                        return value.toString().toLowerCase().includes(searchValueLower);
+                    }
+                    return false;
+                });
+            });
+        }
+        return visable;
+    };
+    const visibleElements = getVisableElements();
     return (React.createElement(ThemeProvider, { theme: resolvedTheme },
         React.createElement(TableRoot, { theme: resolvedTheme, config: tableConfig, componentHeight: tableWrapperHeight },
             React.createElement(React.Fragment, null,
                 (filtrable || pagination) && (React.createElement(TableHeader, { theme: resolvedTheme, config: tableConfig, right: pagination && !filtrable },
                     React.createElement(React.Fragment, null,
-                        filtrable && (React.createElement(HeaderSection, null,
-                            React.createElement(Filters, { labels: filterLabels, headers: headers, elements: fullElements, fullElements: fullElements, handleSubmitFilters: handleApplyFilters, externalClearSignal: filtersClearSignal, onClear: handleClearFilters, calendarLabels: calendarLabels, calendarLocaleLabels: calendarLocaleLabels }))),
-                        pagination && (React.createElement(HeaderSection, { right: true },
-                            React.createElement(Pagination, { currentPage: currentPage, totalPages: totalPages, pageSize: currentPageSize, onPageChange: setCurrentPage, onPageSizeChange: setCurrentPageSize, label: paginationLabel?.label, availableValues: paginationCounters, zIndex: paginationZIndex })))))),
+                        (filtrable || headerExtraContent) && (React.createElement(HeaderSection, null,
+                            filtrable && (React.createElement(Filters, { labels: filterLabels, headers: headers, elements: fullElements, fullElements: fullElements, handleSubmitFilters: handleApplyFilters, externalClearSignal: filtersClearSignal, onClear: handleClearFilters, calendarLabels: calendarLabels, calendarLocaleLabels: calendarLocaleLabels })),
+                            headerExtraContent && (React.createElement(HeaderSection, null, headerExtraContent)))),
+                        (pagination || searchable) && (React.createElement(HeaderSection, { right: true },
+                            searchable && (React.createElement(TableSearch, { theme: resolvedTheme, config: tableConfig },
+                                React.createElement(SearchInput, { placeholder: searchInputPlaceholder, handleSearch: handleSearchChange }))),
+                            pagination && (React.createElement(Pagination, { currentPage: currentPage, totalPages: totalPages, pageSize: currentPageSize, onPageChange: setCurrentPage, onPageSizeChange: setCurrentPageSize, label: paginationLabel?.label, availableValues: paginationCounters, zIndex: paginationZIndex }))))))),
                 React.createElement(TableContentWrapper, { componentHeight: tableHeight },
                     React.createElement(TableContent, { theme: resolvedTheme, config: tableConfig, cellPadding: "0", cellSpacing: "0" },
                         React.createElement(TableHead, null,

package/dist/esm/components/Table/Table.styles.js

@@ -9,7 +9,8 @@ export const TableHeader = styled.div `
   display: flex;
   align-items: center;
   flex-shrink: 0;
-  justify-content: ${({ right }) => (right ? 'flex-end' : 'flex-start')};
+  // justify-content: ${({ right }) => (right ? 'flex-end' : 'flex-start')};
+  justify-content: space-between;
   height: ${({ theme, config }) => config.size.header.height}px;
 `;
 export const TableContentWrapper = styled.div `
@@ -27,8 +28,8 @@ export const HeaderSection = styled.div `
   display: flex;
   align-items: center;
   justify-content: ${({ right }) => (right ? 'flex-end' : 'flex-start')};
-  width: 50%;
   flex-shrink: 0;
+  gap: 8px;
 `;
 export const TableContent = styled.table `
   box-sizing: border-box;
@@ -53,7 +54,7 @@ export const TableHead = styled.thead `
     position: sticky;
     top: 0;
     z-index: 2;
-  };
+  }
   flex-shrink: 0;
 `;
 export const TableBody = styled.tbody `
@@ -176,3 +177,26 @@ export const TableCellContent = styled.div `
   color: ${({ theme, config, disabled }) => disabled ? config.color.disabled.text : config.color.default.header.text};
   width: 100%;
 `;
+export const TableSearch = styled.div `
+  width: 100%;
+  appearance: textfield;
+  padding: 0px ${({ config }) => config.size.searchInput.paddingX}px;
+  height: ${({ config }) => config.size.searchInput.height}px;
+  border-radius: ${({ config }) => config.size.searchInput.radius}px;
+  font-size: ${({ config }) => config.size.searchInput.fontSize}px;
+  line-height: ${({ config }) => config.size.searchInput.lineHeight}px;
+  flex-direction: row;
+  -webkit-box-align: center;
+  align-items: center;
+  overflow: hidden;
+  width: 100%;
+  color: ${({ theme, config }) => config.color.default.searchInput.text};
+  border: 1px solid ${({ theme, config }) => config.color.default.searchInput.border};
+  background: ${({ theme, config }) => config.color.default.searchInput.background};
+   box-sizing: border-box;
+   :hover {
+    border-color: ${({ theme, config }) => config.color.hover.searchInput.border};
+  &:focus-within {
+    border-color: ${({ theme, config }) => config.color.active.searchInput.border};
+  }
+`;

package/dist/esm/config/config.js

@@ -1415,6 +1415,13 @@ export const createComponentsConfig = (theme = 'default') => {
                         },
                     },
                 },
+                searchInput: {
+                    height: measurements.space.xl4,
+                    paddingX: measurements.space.sm,
+                    radius: measurements.size.radius.sm,
+                    fontSize: measurements.font.size.sm,
+                    lineHeight: measurements.font.lineHeight.sm,
+                }
             },
             color: {
                 default: {
@@ -1427,10 +1434,19 @@ export const createComponentsConfig = (theme = 'default') => {
                         text: Theme.text.primary,
                         sortIcon: Theme.text.primary,
                     },
+                    searchInput: {
+                        background: Theme.surface.default,
+                        border: Theme.border.default,
+                        text: Theme.text.primary,
+                        placeholder: Theme.text.placeholder,
+                    }
                 },
                 hover: {
                     background: Theme.surface.hover,
                     activeBackground: Theme.action.primary.selectedHover,
+                    searchInput: {
+                        border: Theme.border.strong,
+                    }
                 },
                 active: {
                     background: Theme.action.primary.selected,
@@ -1438,6 +1454,9 @@ export const createComponentsConfig = (theme = 'default') => {
                         textHeader: Theme.action.primary.default,
                         sortIcon: Theme.action.primary.default,
                     },
+                    searchInput: {
+                        border: Theme.border.focus,
+                    }
                 },
                 disabled: {
                     text: Theme.text.disabled,

package/dist/types/components/Table/Table.d.ts

@@ -1,5 +1,5 @@
 import { AppTheme, ThemeName } from '../../config';
-import { FC } from 'react';
+import React, { FC } from 'react';
 import { FilterType, IAction, ICalendarLocaleLabels, IFilterLabels, InputSize } from 'types';
 interface ITableProps {
     theme?: AppTheme;
@@ -23,6 +23,9 @@ interface ITableProps {
     calendarLabels?: IFilterLabels;
     calendarLocaleLabels?: ICalendarLocaleLabels;
     paginationZIndex?: number;
+    headerExtraContent?: React.ReactNode;
+    searchable?: boolean;
+    searchInputPlaceholder?: string;
 }
 export interface ITableHeaderProps {
     name: string;

package/dist/types/components/Table/Table.styles.d.ts

@@ -80,4 +80,9 @@ interface ITableCellContentProps {
     disabled: boolean;
 }
 export declare const TableCellContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ITableCellContentProps, never>;
+interface ITableSearchProps {
+    theme: AppTheme;
+    config: any;
+}
+export declare const TableSearch: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ITableSearchProps, never>;
 export {};

package/dist/types/config/config.d.ts

@@ -1458,6 +1458,13 @@ export declare const createComponentsConfig: (theme?: ThemeName | AppTheme) => {
                     };
                 };
             };
+            searchInput: {
+                height: 32;
+                paddingX: 8;
+                radius: 8;
+                fontSize: 13;
+                lineHeight: 18;
+            };
         };
         color: {
             default: {
@@ -1470,10 +1477,19 @@ export declare const createComponentsConfig: (theme?: ThemeName | AppTheme) => {
                     text: "#111827";
                     sortIcon: "#111827";
                 };
+                searchInput: {
+                    background: "#FFFFFF";
+                    border: "#E5E7EB";
+                    text: "#111827";
+                    placeholder: "#9CA3AF";
+                };
             };
             hover: {
                 background: "#F2F8FD";
                 activeBackground: "#9FD0EC";
+                searchInput: {
+                    border: "#D1D5DB";
+                };
             };
             active: {
                 background: "#C7E3F5";
@@ -1481,6 +1497,9 @@ export declare const createComponentsConfig: (theme?: ThemeName | AppTheme) => {
                     textHeader: "#3B90CB";
                     sortIcon: "#3B90CB";
                 };
+                searchInput: {
+                    border: "#3B90CB";
+                };
             };
             disabled: {
                 text: "#9CA3AF";
@@ -2803,6 +2822,13 @@ export declare const componentsConfig: {
                     };
                 };
             };
+            searchInput: {
+                height: 32;
+                paddingX: 8;
+                radius: 8;
+                fontSize: 13;
+                lineHeight: 18;
+            };
         };
         color: {
             default: {
@@ -2815,10 +2841,19 @@ export declare const componentsConfig: {
                     text: "#111827";
                     sortIcon: "#111827";
                 };
+                searchInput: {
+                    background: "#FFFFFF";
+                    border: "#E5E7EB";
+                    text: "#111827";
+                    placeholder: "#9CA3AF";
+                };
             };
             hover: {
                 background: "#F2F8FD";
                 activeBackground: "#9FD0EC";
+                searchInput: {
+                    border: "#D1D5DB";
+                };
             };
             active: {
                 background: "#C7E3F5";
@@ -2826,6 +2861,9 @@ export declare const componentsConfig: {
                     textHeader: "#3B90CB";
                     sortIcon: "#3B90CB";
                 };
+                searchInput: {
+                    border: "#3B90CB";
+                };
             };
             disabled: {
                 text: "#9CA3AF";
@@ -4293,6 +4331,13 @@ export declare const createConfig: (theme?: ThemeName | AppTheme) => {
                         };
                     };
                 };
+                searchInput: {
+                    height: 32;
+                    paddingX: 8;
+                    radius: 8;
+                    fontSize: 13;
+                    lineHeight: 18;
+                };
             };
             color: {
                 default: {
@@ -4305,10 +4350,19 @@ export declare const createConfig: (theme?: ThemeName | AppTheme) => {
                         text: "#111827";
                         sortIcon: "#111827";
                     };
+                    searchInput: {
+                        background: "#FFFFFF";
+                        border: "#E5E7EB";
+                        text: "#111827";
+                        placeholder: "#9CA3AF";
+                    };
                 };
                 hover: {
                     background: "#F2F8FD";
                     activeBackground: "#9FD0EC";
+                    searchInput: {
+                        border: "#D1D5DB";
+                    };
                 };
                 active: {
                     background: "#C7E3F5";
@@ -4316,6 +4370,9 @@ export declare const createConfig: (theme?: ThemeName | AppTheme) => {
                         textHeader: "#3B90CB";
                         sortIcon: "#3B90CB";
                     };
+                    searchInput: {
+                        border: "#3B90CB";
+                    };
                 };
                 disabled: {
                     text: "#9CA3AF";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "venice-ui",
-  "version": "3.0.53",
+  "version": "3.0.55",
   "description": "Component library",
   "main": "index.js",
   "module": "./dist/esm/index.js",