fix: build errors

This commit is contained in:
Aditya
2026-02-10 18:29:21 +05:30
parent 1b4f25119b
commit 316f23ec70
6 changed files with 95 additions and 88 deletions
-2
View File
@@ -55,7 +55,6 @@ import {
OpenInNew as OpenInNewIcon, OpenInNew as OpenInNewIcon,
CloudDownload as CloudDownloadIcon, CloudDownload as CloudDownloadIcon,
Description as DescriptionIcon, Description as DescriptionIcon,
Polymer as PolymerIcon,
CheckCircle as CheckCircleIcon, CheckCircle as CheckCircleIcon,
Close as CloseIcon, Close as CloseIcon,
Apps as AppsIcon, Apps as AppsIcon,
@@ -63,7 +62,6 @@ import {
Cached as CachedIcon, Cached as CachedIcon,
AccessibilityNew as AccessibilityNewIcon, AccessibilityNew as AccessibilityNewIcon,
Lock as LockIcon, Lock as LockIcon,
Eco as EcoIcon,
Schedule as ScheduleIcon, Schedule as ScheduleIcon,
Cloud as CloudIcon, Cloud as CloudIcon,
Business as BusinessIcon, Business as BusinessIcon,
@@ -70,7 +70,6 @@ import {
Cached as CachedIcon, Cached as CachedIcon,
DirectionsRun as DirectionsRunIcon, DirectionsRun as DirectionsRunIcon,
Add as AddIcon, Add as AddIcon,
Polymer as PolymerIcon,
FormatListNumbered as FormatListNumberedIcon, FormatListNumbered as FormatListNumberedIcon,
Create as CreateIcon, Create as CreateIcon,
PlayArrow as PlayArrowIcon, PlayArrow as PlayArrowIcon,
+1 -1
View File
@@ -44,7 +44,7 @@ import {
Send as SendIcon, Send as SendIcon,
} from '@mui/icons-material'; } from '@mui/icons-material';
import { DataGrid, GridValueGetterParams } from '@mui/x-data-grid' import { DataGrid } from '@mui/x-data-grid'
import { import {
Search as SearchIcon, Search as SearchIcon,
} from "@mui/icons-material"; } from "@mui/icons-material";
@@ -1597,7 +1597,7 @@ const CodeEditor = (props) => {
if (e.srcElement.className === "ace_content") { if (e.srcElement.className === "ace_content") {
console.log("DRAG STOP IN CONTENT!", e.srcElement.className) console.log("DRAG STOP IN CONTENT!", e.srcElement.className)
const usedposition = e.offsetY let usedposition = e.offsetY
if (usedposition === undefined || usedposition === null) { if (usedposition === undefined || usedposition === null) {
toast.info(`Error: LayerY is undefined or null. Please contact ${supportEmail}`) toast.info(`Error: LayerY is undefined or null. Please contact ${supportEmail}`)
return return
+93 -82
View File
@@ -153,10 +153,20 @@ const theme = createTheme(adaptV4Theme({
export default theme; export default theme;
export const getTheme = (themeMode, brandColor) => export const getTheme = (themeMode, brandColor) => {
createTheme({ // Handle "system" mode by checking user's system preference
let resolvedMode = themeMode;
if (themeMode === "system" || !themeMode) {
resolvedMode = window?.matchMedia?.("(prefers-color-scheme: dark)")?.matches ? "dark" : "light";
}
// Ensure mode is only "dark" or "light"
if (resolvedMode !== "dark" && resolvedMode !== "light") {
resolvedMode = "dark";
}
return createTheme({
palette: { palette: {
mode: themeMode, mode: resolvedMode,
main: brandColor || "#FF8544", main: brandColor || "#FF8544",
primary: { primary: {
main: brandColor || "#FF8544", main: brandColor || "#FF8544",
@@ -167,35 +177,35 @@ export const getTheme = (themeMode, brandColor) =>
contrastText:"#000000", contrastText:"#000000",
}, },
text: { text: {
primary: themeMode === "dark" ? "#ffffff" : "#1A1A1A", primary: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A",
secondary: themeMode === "dark" ? "#9E9E9E" : "#616161", secondary: resolvedMode === "dark" ? "#9E9E9E" : "#616161",
}, },
type: themeMode, type: resolvedMode,
inputColor: themeMode === "dark" ? "rgba(39,41,45,1)" : "rgba(245, 245, 245, 1)", inputColor: resolvedMode === "dark" ? "rgba(39,41,45,1)" : "rgba(245, 245, 245, 1)",
textColor: themeMode === "dark" ? "#F1F1F1" : "#1A1A1A", textColor: resolvedMode === "dark" ? "#F1F1F1" : "#1A1A1A",
textPrimary: themeMode === "dark" ? "rgba(255, 255, 255, 0.8)" : "rgba(26, 26, 26, 0.8)", textPrimary: resolvedMode === "dark" ? "rgba(255, 255, 255, 0.8)" : "rgba(26, 26, 26, 0.8)",
surfaceColor: themeMode === "dark" ? "#27292d" : "#EFEFEF", surfaceColor: resolvedMode === "dark" ? "#27292d" : "#EFEFEF",
platformColor: themeMode === "dark" ? "#212121" : "#ffffff", platformColor: resolvedMode === "dark" ? "#212121" : "#ffffff",
backgroundColor: themeMode === "dark" ? "#1a1a1a" : "#f1f1f1", backgroundColor: resolvedMode === "dark" ? "#1a1a1a" : "#f1f1f1",
cytoscapeBackgroundColor: themeMode === "dark" ? "#161616" : "#f5f5f5", cytoscapeBackgroundColor: resolvedMode === "dark" ? "#161616" : "#f5f5f5",
distributionColor: themeMode === "dark" ? "#40E0D0" : "#008080", distributionColor: resolvedMode === "dark" ? "#40E0D0" : "#008080",
cardBackgroundColor: themeMode === "dark" ? "#1e1e1e" : "#eaeaea", cardBackgroundColor: resolvedMode === "dark" ? "#1e1e1e" : "#eaeaea",
cardHoverColor: themeMode === "dark" ? "#323232" : "#F0F0F0", cardHoverColor: resolvedMode === "dark" ? "#323232" : "#F0F0F0",
hoverColor: themeMode === "dark" ? "#323232" : "#D6D6D6", hoverColor: resolvedMode === "dark" ? "#323232" : "#D6D6D6",
usecaseCardColor: themeMode === "dark" ? "#2f2f2f" : "rgba(245, 245, 245, 1)", usecaseCardColor: resolvedMode === "dark" ? "#2f2f2f" : "rgba(245, 245, 245, 1)",
usecaseCardHoverColor: themeMode === "dark" ? "#2F2F2F" : "rgba(245, 245, 245, 1)", usecaseCardHoverColor: resolvedMode === "dark" ? "#2F2F2F" : "rgba(245, 245, 245, 1)",
usecaseDialogFieldColor: themeMode === "dark" ? "#2B2B2B" : "#F5F5F5", usecaseDialogFieldColor: resolvedMode === "dark" ? "#2B2B2B" : "#F5F5F5",
accentColor: themeMode === "dark" ? "#ff8544" : "#ff8544", accentColor: resolvedMode === "dark" ? "#ff8544" : "#ff8544",
green: themeMode === "dark" ? "#5cc879" : "#008000", green: resolvedMode === "dark" ? "#5cc879" : "#008000",
defaultBorder: themeMode === "dark" ? '1px solid #494949' : '1px solid #CCCCCC', defaultBorder: resolvedMode === "dark" ? '1px solid #494949' : '1px solid #CCCCCC',
linkColor: brandColor === "#ff8544" ? "#f86a3e" : brandColor, linkColor: brandColor === "#ff8544" ? "#f86a3e" : brandColor,
slateGrayColor: themeMode === "dark" ? "#494949" : "#CCCCCC", slateGrayColor: resolvedMode === "dark" ? "#494949" : "#CCCCCC",
parsedAppPaperColor: themeMode === "dark" ? "#2f2f2f" : "#CCCCCC", parsedAppPaperColor: resolvedMode === "dark" ? "#2f2f2f" : "#CCCCCC",
borderRadius: 10, borderRadius: 10,
loaderColor: themeMode === "dark" ? "#1a1a1a" : "#E0E0E0", loaderColor: resolvedMode === "dark" ? "#1a1a1a" : "#E0E0E0",
jsonIconStyle: "round", jsonIconStyle: "round",
jsonTheme: themeMode === "dark" ? "summerfruit" : { jsonTheme: resolvedMode === "dark" ? "summerfruit" : {
base00: "#ffffff", // background base00: "#ffffff", // background
base01: "#f0f0f0", // very light grey base01: "#f0f0f0", // very light grey
base02: "#f5f5f5", // light grey base02: "#f5f5f5", // light grey
@@ -215,11 +225,11 @@ export const getTheme = (themeMode, brandColor) =>
}, },
jsonCollapseStringsAfterLength: 100, jsonCollapseStringsAfterLength: 100,
drawer: { drawer: {
backgroundColor: themeMode === "dark" ? "#262626" : "#f9f9f9" backgroundColor: resolvedMode === "dark" ? "#262626" : "#f9f9f9"
}, },
actionSidebarField: { actionSidebarField: {
backgroundColor: themeMode === "dark" ? "#2F2F2F" : "#F1F1F1", backgroundColor: resolvedMode === "dark" ? "#2F2F2F" : "#F1F1F1",
color: themeMode === "dark" ? "#ffffff" : "#000000", color: resolvedMode === "dark" ? "#ffffff" : "#000000",
borderRadius: 8, borderRadius: 8,
height: 40, height: 40,
border: "none", border: "none",
@@ -228,53 +238,53 @@ export const getTheme = (themeMode, brandColor) =>
padding: 5, padding: 5,
width: "98%", width: "98%",
borderRadius: 5, borderRadius: 5,
border: themeMode === "dark" ? "1px solid rgba(255,255,255,0.7)" : "1px solid rgba(0,0,0,0.3)", border: resolvedMode === "dark" ? "1px solid rgba(255,255,255,0.7)" : "1px solid rgba(0,0,0,0.3)",
backgroundColor: themeMode === "dark" backgroundColor: resolvedMode === "dark"
? "#1A1A1A" ? "#1A1A1A"
: "#f1f1f1", : "#f1f1f1",
color: themeMode === "dark" color: resolvedMode === "dark"
? "#F1F1F1" ? "#F1F1F1"
: "#1A1A1A", : "#1A1A1A",
overflowX: "auto", overflowX: "auto",
}, },
textFieldStyle: { textFieldStyle: {
backgroundColor: themeMode === "dark" ? "#212121" : "#FFFFFF", backgroundColor: resolvedMode === "dark" ? "#212121" : "#FFFFFF",
color: themeMode === "dark" ? "#ffffff" : "#000000", color: resolvedMode === "dark" ? "#ffffff" : "#000000",
borderRadius: "5px", borderRadius: "5px",
height: 40, height: 40,
border: themeMode === "dark" ? "1px solid #4D4D4D" : "1px solid #E0E0E0", border: resolvedMode === "dark" ? "1px solid #4D4D4D" : "1px solid #E0E0E0",
}, },
DialogStyle: { DialogStyle: {
backgroundColor: themeMode === "dark" ? "#212121" : "#ffffff", backgroundColor: resolvedMode === "dark" ? "#212121" : "#ffffff",
borderRadius: 2, borderRadius: 2,
boxShadow: themeMode === "dark" ? "0px 0px 10px 0px rgba(0,0,0,0.75)" : "0px 0px 10px 0px rgba(0,0,0,0.2)", boxShadow: resolvedMode === "dark" ? "0px 0px 10px 0px rgba(0,0,0,0.75)" : "0px 0px 10px 0px rgba(0,0,0,0.2)",
border: themeMode === "dark" ? "1px solid #494949" : "1px solid #cccccc", border: resolvedMode === "dark" ? "1px solid #494949" : "1px solid #cccccc",
}, },
innerTextfieldStyle: { innerTextfieldStyle: {
height: 40, height: 40,
fontSize: 16, fontSize: 16,
backgroundColor: themeMode === "dark" ? "#212121" : "#f5f5f5", backgroundColor: resolvedMode === "dark" ? "#212121" : "#f5f5f5",
}, },
tooltip: { tooltip: {
backgroundColor: themeMode === "dark" ? "#212121" : "#ffffff", backgroundColor: resolvedMode === "dark" ? "#212121" : "#ffffff",
color: themeMode === "dark" ? "#ffffff" : "#000000", color: resolvedMode === "dark" ? "#ffffff" : "#000000",
border: themeMode === "dark" ? "1px solid #494949" : "1px solid #cccccc", border: resolvedMode === "dark" ? "1px solid #494949" : "1px solid #cccccc",
}, },
chipStyle: { chipStyle: {
backgroundColor: themeMode === "dark" ? "#333333" : "#F5F5F5", backgroundColor: resolvedMode === "dark" ? "#333333" : "#F5F5F5",
borderColor: themeMode === "dark" ? "#444444" : "#E0E0E0", borderColor: resolvedMode === "dark" ? "#444444" : "#E0E0E0",
color: themeMode === "dark" ? "#FFFFFF" : "#333333", color: resolvedMode === "dark" ? "#FFFFFF" : "#333333",
}, },
defaultImage: "/images/no_image.png", defaultImage: "/images/no_image.png",
singulOrange: "/images/singul_orange.png", singulOrange: "/images/singul_orange.png",
singulGreen: "/images/singul_green.png", singulGreen: "/images/singul_green.png",
singulBlackWhite: "/icons/workflow-page/shuffle_agent.png", singulBlackWhite: "/icons/workflow-page/shuffle_agent.png",
scrollbarColor: themeMode === "dark" ? "#494949 #2f2f2f": "#c1c1c1 #f1f1f1", scrollbarColor: resolvedMode === "dark" ? "#494949 #2f2f2f": "#c1c1c1 #f1f1f1",
scrollbarColorTransparent: themeMode === "dark" ? '#494949 transparent': "#c1c1c1 transparent", scrollbarColorTransparent: resolvedMode === "dark" ? '#494949 transparent': "#c1c1c1 transparent",
}, },
typography: { typography: {
fontFamily: `"inter", "Roboto", "Helvetica", "Arial", sans-serif`, fontFamily: `"inter", "Roboto", "Helvetica", "Arial", sans-serif`,
color: themeMode === "dark" ? "#ffffff" : "#000000", color: resolvedMode === "dark" ? "#ffffff" : "#000000",
useNextVariants: true, useNextVariants: true,
fontWeightLight: 300, fontWeightLight: 300,
fontWeightRegular: 400, fontWeightRegular: 400,
@@ -282,36 +292,36 @@ export const getTheme = (themeMode, brandColor) =>
fontWeightSemiBold: 600, fontWeightSemiBold: 600,
fontWeightBold: 700, fontWeightBold: 700,
allVariants: { allVariants: {
color: themeMode === "dark" ? "#ffffff" : "#1A1A1A", color: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A",
}, },
h1: { h1: {
fontSize: 40, fontSize: 40,
color: themeMode === "dark" ? "#ffffff" : "#1A1A1A" color: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A"
}, },
h2: { h2: {
fontSize: 36, fontSize: 36,
color: themeMode === "dark" ? "#ffffff" : "#1A1A1A" color: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A"
}, },
h3: { h3: {
fontSize: 32, fontSize: 32,
color: themeMode === "dark" ? "#ffffff" : "#1A1A1A" color: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A"
}, },
h4: { h4: {
fontSize: 30, fontSize: 30,
fontWeight: 500, fontWeight: 500,
color: themeMode === "dark" ? "#ffffff" : "#1A1A1A" color: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A"
}, },
h6: { h6: {
fontSize: 22, fontSize: 22,
color: themeMode === "dark" ? "#ffffff" : "#1A1A1A" color: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A"
}, },
body1: { body1: {
fontSize: 16, fontSize: 16,
color: themeMode === "dark" ? "#ffffff" : "#1A1A1A" color: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A"
}, },
body2: { body2: {
fontSize: 14, fontSize: 14,
color: themeMode === "dark" ? "#ffffff" : "#1A1A1A" color: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A"
}, },
}, },
components: { components: {
@@ -326,7 +336,7 @@ export const getTheme = (themeMode, brandColor) =>
{ {
props: { variant: 'text', color: 'primary' }, props: { variant: 'text', color: 'primary' },
style: { style: {
color: themeMode === "dark" ? "#ffffff" : "#1A1A1A", color: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A",
whiteSpace: "nowrap", whiteSpace: "nowrap",
textWrap: "normal", textWrap: "normal",
}, },
@@ -334,7 +344,7 @@ export const getTheme = (themeMode, brandColor) =>
{ {
props: { variant: 'text', color: 'secondary' }, props: { variant: 'text', color: 'secondary' },
style: { style: {
color: themeMode === "dark" ? "#9E9E9E" : "#616161", color: resolvedMode === "dark" ? "#9E9E9E" : "#616161",
whiteSpace: "nowrap", whiteSpace: "nowrap",
textWrap: "normal", textWrap: "normal",
}, },
@@ -342,24 +352,24 @@ export const getTheme = (themeMode, brandColor) =>
{ {
props: { variant: 'contained', color: 'primary' }, props: { variant: 'contained', color: 'primary' },
style: { style: {
backgroundColor: themeMode === "dark" ? brandColor || '#ff8544' : brandColor || '#FF7C35', backgroundColor: resolvedMode === "dark" ? brandColor || '#ff8544' : brandColor || '#FF7C35',
color: themeMode === "dark" ? '#1a1a1a': '#FFFFFF', color: resolvedMode === "dark" ? '#1a1a1a': '#FFFFFF',
borderRadius: '4px', borderRadius: '4px',
whiteSpace: "nowrap", whiteSpace: "nowrap",
textWrap: "normal", textWrap: "normal",
transition: 'background-color 0.2s ease-in-out', transition: 'background-color 0.2s ease-in-out',
'&:hover': { '&:hover': {
fontWeight: 600, fontWeight: 600,
backgroundColor: themeMode === 'dark' ? brandColor || "#ff955c" : brandColor || '#FF8D4F', backgroundColor: resolvedMode === 'dark' ? brandColor || "#ff955c" : brandColor || '#FF8D4F',
color: themeMode === "dark" ? '#1a1a1a': '#FFFFFF', color: resolvedMode === "dark" ? '#1a1a1a': '#FFFFFF',
}, },
}, },
}, },
{ {
props: { variant: 'contained', color: 'secondary' }, props: { variant: 'contained', color: 'secondary' },
style: { style: {
backgroundColor: themeMode === "dark" ? '#494949' : '#C9C9C9', backgroundColor: resolvedMode === "dark" ? '#494949' : '#C9C9C9',
color: themeMode === "dark" ? '#ffffff' : '#4C4C4C', color: resolvedMode === "dark" ? '#ffffff' : '#4C4C4C',
borderRadius: '4px', borderRadius: '4px',
boxShadow: 'none', boxShadow: 'none',
whiteSpace: "nowrap", whiteSpace: "nowrap",
@@ -367,23 +377,23 @@ export const getTheme = (themeMode, brandColor) =>
textWrap: "normal", textWrap: "normal",
'&:hover': { '&:hover': {
fontWeight: 600, fontWeight: 600,
border: themeMode === "dark" ? '1px solid #f1f1f1' : 'none', border: resolvedMode === "dark" ? '1px solid #f1f1f1' : 'none',
backgroundColor: themeMode === "dark" ? '#494949' : '#C9C9C9', backgroundColor: resolvedMode === "dark" ? '#494949' : '#C9C9C9',
color: themeMode === "dark" ? '#ffffff' : '#4C4C4C', color: resolvedMode === "dark" ? '#ffffff' : '#4C4C4C',
}, },
}, },
}, },
{ {
props: { variant: 'outlined', color: 'primary' }, props: { variant: 'outlined', color: 'primary' },
style: { style: {
borderColor: themeMode === "dark" ? brandColor || "#ff8544" : brandColor || "#cc5f1f", borderColor: resolvedMode === "dark" ? brandColor || "#ff8544" : brandColor || "#cc5f1f",
color: themeMode === "dark" ? brandColor || "#ff8544" : brandColor || "#cc5f1f", color: resolvedMode === "dark" ? brandColor || "#ff8544" : brandColor || "#cc5f1f",
whiteSpace: "nowrap", whiteSpace: "nowrap",
fontWeight: 'normal', fontWeight: 'normal',
textWrap: "normal", textWrap: "normal",
'&:hover': { '&:hover': {
backgroundColor: themeMode === "dark" ? brandColor || "#ff8544" : "#ffe8dc", backgroundColor: resolvedMode === "dark" ? brandColor || "#ff8544" : "#ffe8dc",
color: themeMode === "dark" ? "#1a1a1a" : "#8a3d00", color: resolvedMode === "dark" ? "#1a1a1a" : "#8a3d00",
fontWeight: 600, fontWeight: 600,
}, },
}, },
@@ -392,14 +402,14 @@ export const getTheme = (themeMode, brandColor) =>
props: { variant: 'outlined', color: 'secondary' }, props: { variant: 'outlined', color: 'secondary' },
style: { style: {
border: '1px solid #C5C5C5', border: '1px solid #C5C5C5',
color: themeMode === "dark" ? '#C5C5C5' : '#2D2D2D', color: resolvedMode === "dark" ? '#C5C5C5' : '#2D2D2D',
whiteSpace: "nowrap", whiteSpace: "nowrap",
textWrap: "normal", textWrap: "normal",
'&:hover': { '&:hover': {
backgroundColor: themeMode === "dark" ? '#C5C5C5' : '#EFEFEF', backgroundColor: resolvedMode === "dark" ? '#C5C5C5' : '#EFEFEF',
borderColor: themeMode === "dark" ? '#C5C5C5' : '#2D2D2D', borderColor: resolvedMode === "dark" ? '#C5C5C5' : '#2D2D2D',
fontWeight: 600, fontWeight: 600,
color: themeMode === "dark" ? '#1a1a1a' : '#1A1A1A', color: resolvedMode === "dark" ? '#1a1a1a' : '#1A1A1A',
}, },
}, },
}, },
@@ -422,8 +432,8 @@ export const getTheme = (themeMode, brandColor) =>
background: 'linear-gradient(90deg, #e6743a 0%, #d4456e 50%, #8a4de8 100%)', background: 'linear-gradient(90deg, #e6743a 0%, #d4456e 50%, #8a4de8 100%)',
}, },
'&:disabled': { '&:disabled': {
background: themeMode === "dark" ? '#494949' : '#C9C9C9', background: resolvedMode === "dark" ? '#494949' : '#C9C9C9',
color: themeMode === "dark" ? '#9E9E9E' : '#616161', color: resolvedMode === "dark" ? '#9E9E9E' : '#616161',
}, },
}, },
}, },
@@ -468,9 +478,9 @@ export const getTheme = (themeMode, brandColor) =>
}, },
'&:disabled': { '&:disabled': {
background: 'transparent', background: 'transparent',
color: themeMode === "dark" ? '#9E9E9E' : '#616161', color: resolvedMode === "dark" ? '#9E9E9E' : '#616161',
'&::before': { '&::before': {
background: themeMode === "dark" ? '#494949' : '#C9C9C9', background: resolvedMode === "dark" ? '#494949' : '#C9C9C9',
}, },
}, },
}, },
@@ -480,7 +490,7 @@ export const getTheme = (themeMode, brandColor) =>
MuiTab: { MuiTab: {
styleOverrides: { styleOverrides: {
root: { root: {
color: themeMode === "dark" ? "#C5C5C5" : "#1A1A1A", color: resolvedMode === "dark" ? "#C5C5C5" : "#1A1A1A",
}, },
}, },
}, },
@@ -489,7 +499,7 @@ export const getTheme = (themeMode, brandColor) =>
overrides: { overrides: {
MuiMenu: { MuiMenu: {
list: { list: {
backgroundColor: themeMode === "dark" ? "#27292d" : "#ffffff", backgroundColor: resolvedMode === "dark" ? "#27292d" : "#ffffff",
}, },
}, },
MuiCssBaseline: { MuiCssBaseline: {
@@ -535,4 +545,5 @@ export const getTheme = (themeMode, brandColor) =>
}, },
}, },
}); });
}
-1
View File
@@ -65,7 +65,6 @@ import { Context } from "../context/ContextApi.jsx";
import { import {
SearchBox, SearchBox,
StaticRefinementList,
RefinementList, RefinementList,
InstantSearch, InstantSearch,
connectSearchBox, connectSearchBox,