Export empty state card image

src/custom/CatalogFilterSection/index.tsx

@@ -1,3 +1,4 @@
-import CatalogFilterSidebar from './CatalogFilterSidebar';
+import CatalogFilterSidebar, { FilterList } from './CatalogFilterSidebar';
 
 export { CatalogFilterSidebar };
+export type { FilterList };

src/custom/CustomCatalog/EmptyStateCard.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { EmptyStyleIcon } from '../../icons/EmptyStyle';
+import { EmptyStyleIcon } from '../../icons';
 import { useTheme } from '../../theme';
 import { CatalogEmptyStateDiv } from './style';
 

src/custom/CustomCatalog/style.tsx

@@ -349,7 +349,7 @@ export const CardBack = styled('div')<CatalogProps>(({ isCatalog }) => ({
 }));
 
 const getBackground = (isLightMode: boolean) => {
-  const lightGradient = `linear-gradient(to left bottom, ${WHITESMOKE}, ${GRAY97},white, white, white, white, white, white, white,white, $, ${WHITESMOKE}, ${GRAY97})`;
+  const lightGradient = `linear-gradient(to left bottom, ${WHITESMOKE}, ${GRAY97},white, white, white, white, white, white, white, white, ${WHITESMOKE}, ${GRAY97})`;
   const darkGradient = `linear-gradient(to right top, ${DARK_PRIMARY_COLOR}, ${accentGrey[30]}, ${accentGrey[20]}, ${accentGrey[10]}, ${accentGrey[10]}, ${accentGrey[10]}, ${accentGrey[10]}, ${accentGrey[10]}, ${accentGrey[10]}, ${charcoal[20]}, ${charcoal[10]}, black)`;
 
   return isLightMode ? lightGradient : darkGradient;

src/custom/StyledSearchBar/StyledSearchBar.tsx

@@ -1,6 +1,6 @@
 import { SxProps, Theme } from '@mui/material';
 import { debounce } from 'lodash';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { InputAdornment } from '../../base';
 import { SearchIcon } from '../../icons';
 import { useTheme } from '../../theme';
@@ -33,44 +33,56 @@ interface SearchBarProps {
  */
 function StyledSearchBar({
   onChange,
-  value,
+  value = '',
   label,
   sx,
   placeholder,
   endAdornment,
   debounceTime = 300
 }: SearchBarProps): JSX.Element {
   const theme = useTheme();
-  const [inputValue, setInputValue] = useState(value ?? '');
+  const [inputValue, setInputValue] = useState(value);
 
+  // Update local state when controlled value changes
   useEffect(() => {
-    if (value !== undefined && value !== inputValue) {
+    if (value !== inputValue) {
       setInputValue(value);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
 
-  useEffect(() => {
-    const handler = debounce((newValue: string) => {
-      if (onChange) {
-        const syntheticEvent = {
-          target: { value: newValue },
-          persist: () => {}
-        } as React.ChangeEvent<HTMLInputElement>;
+  // Create synthetic event helper
+  const createSyntheticEvent = (value: string): React.ChangeEvent<HTMLInputElement> =>
+    ({
+      target: { value },
+      persist: () => {}
+    }) as React.ChangeEvent<HTMLInputElement>;
 
-        onChange(syntheticEvent);
-      }
-    }, debounceTime);
+  // Memoize the debounced handler
+  const debouncedOnChange = useMemo(
+    () =>
+      debounce((newValue: string) => {
+        onChange?.(createSyntheticEvent(newValue));
+      }, debounceTime),
+    [onChange, debounceTime]
+  );
 
-    handler(inputValue);
+  useEffect(() => {
+    if (!onChange) return;
+    if (inputValue === '') {
+      onChange(createSyntheticEvent(inputValue));
+    } else {
+      debouncedOnChange(inputValue);
+    }
 
     return () => {
-      handler.cancel();
+      debouncedOnChange.cancel();
     };
-  }, [inputValue, onChange, debounceTime]);
+  }, [inputValue, onChange, debouncedOnChange]);
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setInputValue(event.target.value);
+    const newValue = event.target.value;
+    setInputValue(newValue);
   };
 
   return (

src/custom/index.tsx

@@ -45,6 +45,7 @@ import { TransferListProps } from './TransferModal/TransferList/TransferList';
 import UniversalFilter, { UniversalFilterProps } from './UniversalFilter';
 export { CatalogCard } from './CatalogCard';
 export { CatalogFilterSidebar } from './CatalogFilterSection';
+export type { FilterList } from './CatalogFilterSection';
 export { StyledChartDialog } from './ChartDialog';
 export { LearningContent } from './LearningContent';
 export { NavigationNavbar } from './NavigationNavbar';

src/icons/CollapseAll/CollapseAllIcon.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+interface CollapsAllIconProps {
+  height?: string;
+  width?: string;
+  fill?: string;
+  strokeWidth?: string;
+  style?: React.CSSProperties;
+}
+
+const CollapsAllIcon: React.FC<CollapsAllIconProps> = ({
+  height = '24',
+  width = '24',
+  fill = 'none',
+  strokeWidth = '2',
+  style
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    height={height}
+    width={width}
+    style={style}
+  >
+    <path
+      d="M17 16l-5-5-5 5"
+      fill={fill}
+      stroke="currentColor"
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M17 10l-5-5-5 5"
+      fill={fill}
+      stroke="currentColor"
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default CollapsAllIcon;

src/icons/CollapseAll/index.tsx

@@ -0,0 +1 @@
+export { default as CollapseAllIcon } from './CollapseAllIcon';

src/icons/ExpandAll/ExpandAllIcon.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+interface ExpandAllIconProps {
+  height?: string;
+  width?: string;
+  fill?: string;
+  strokeWidth?: string;
+  style?: React.CSSProperties;
+}
+
+const ExpandAllIcon: React.FC<ExpandAllIconProps> = ({
+  height = '24',
+  width = '24',
+  fill = 'none',
+  strokeWidth = '2',
+  style
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    height={height}
+    width={width}
+    style={style}
+  >
+    <path
+      d="M7 8l5 5 5-5"
+      fill={fill}
+      stroke="currentColor"
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M7 14l5 5 5-5"
+      fill={fill}
+      stroke="currentColor"
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default ExpandAllIcon;

src/icons/ExpandAll/index.tsx

@@ -0,0 +1 @@
+export { default as ExpandAllIcon } from './ExpandAllIcon';

src/icons/index.ts

@@ -9,6 +9,7 @@ export * from './Circle';
 export * from './Clone';
 export * from './Close';
 export * from './Cloud';
+export * from './CollapseAll';
 export * from './Column';
 export * from './Component';
 export * from './Configuration';
@@ -25,6 +26,7 @@ export * from './Designer';
 export * from './Detail';
 export * from './DropDownIcon';
 export * from './Error';
+export * from './ExpandAll';
 export * from './Favorite';
 export * from './Filter';
 export * from './Fullscreen';
@@ -45,6 +47,7 @@ export * from './Design';
 export * from './Done';
 export * from './Download';
 export * from './Edit';
+export * from './EmptyStyle';
 export * from './Environment';
 export * from './ExternalLink';
 export * from './Feedback';