Fix search input in color helper

Author: garronej

stories/ColorHelper/ColorDecisionCard.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import type { ColorDecisionAndCorrespondingOption } from "../../src/scripts/build/cssToTs/colorDecisionAndCorrespondingOptions";
+import type { ColorDecisionAndCorrespondingOption } from "../../scripts/build/cssToTs/colorDecisionAndCorrespondingOptions";
 import { useColors } from "../../dist/useColors";
 import { fr } from "../../dist/fr";
 import Tooltip from "@mui/material/Tooltip";

stories/ColorHelper/ColorHelper.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useRef } from "react";
 import { CallOut } from "../../dist/CallOut";
 import { colorDecisionAndCorrespondingOptions } from "../../dist/fr/generatedFromCss/colorDecisionAndCorrespondingOptions";
-import type { ColorDecisionAndCorrespondingOption } from "../../src/scripts/build/cssToTs/colorDecisionAndCorrespondingOptions";
+import type { ColorDecisionAndCorrespondingOption } from "../../scripts/build/cssToTs/colorDecisionAndCorrespondingOptions";
 import { fr } from "../../dist/fr";
 import { createUseDebounce } from "powerhooks/useDebounce";
 import { Fzf } from "fzf";

stories/ColorHelper/Search.tsx

@@ -91,11 +91,17 @@ export function Search(props: Props) {
                 <SearchBar
                     className={classes.searchBar}
                     label="Filter by color code (e.g. #c9191e), CSS variable name (e.g. --text-active-red-marianne) or something else..."
-                    nativeInputProps={{
-                        "ref": inputElement => setInputElement(inputElement),
-                        "value": search,
-                        "onChange": event => onSearchChange(event.target.value)
-                    }}
+                    renderInput={({ className, id, placeholder, type }) =>
+                        <input
+                            ref={setInputElement}
+                            value={search}
+                            onChange={event => onSearchChange(event.target.value)}
+                            className={className}
+                            id={id}
+                            placeholder={placeholder}
+                            type={type}
+                        />
+                    }
                 />
                 <Button
                     className={classes.filterButton}