hunk.code_window:         mirror: true,
           facingMode: "user",
           locale: {},
         });
       this.state.uppy.on("file-removed", (file: any) => {
         const updatedFiles = this.props.selectedFiles
  
hunk.labels: keep keep keep add keep keep keep
hunk.after_edit:     }
  
hunk.file_path: app/client/src/widgets/FilePickerWidgetV2/widget/index.tsx
hunk.type: add
file: import { ButtonVariantTypes } from "components/constants";
  import { getTheme, ThemeMode } from "selectors/themeSelectors";
  import { escapeSpecialChars } from "./WidgetUtils";
  import {
    getCustomTextColor,
    getCustomBackgroundColor,
    getCustomHoverColor,
  } from "./WidgetUtils";
  
  describe("validate widget utils button style functions", () => {
    const theme = getTheme(ThemeMode.LIGHT);
    // validate getCustomTextColor function
    it("getCustomTextColor - validate empty or undefined background color", () => {
      // background color is undefined
      const result = getCustomTextColor(theme);
      expect(result).toStrictEqual("#FFFFFF");
  
      // background color is empty string
      const backgroundColor = "";
      const expected = "#FFFFFF";
      const result2 = getCustomTextColor(theme, backgroundColor);
      expect(result2).toStrictEqual(expected);
    });
  
    it("getCustomTextColor - validate text color in case of dark or light background color", () => {
      // background color is dark
      const blueBackground = "#3366FF";
      const expected1 = "#FFFFFF";
      const result1 = getCustomTextColor(theme, blueBackground);
      expect(result1).toStrictEqual(expected1);
  
      // background color is light
      const yellowBackground = "#FFC13D";
      const expected2 = "#333";
      const result2 = getCustomTextColor(theme, yellowBackground);
      expect(result2).toStrictEqual(expected2);
    });
  
    // validate getCustomBackgroundColor function
    it("getCustomBackgroundColor - validate empty or undefined background color", () => {
      const expected = "none";
      const result = getCustomBackgroundColor();
      expect(result).toStrictEqual(expected);
    });
  
    it("getCustomBackgroundColor - validate background color with primary button variant", () => {
      const backgroundColor = "#03b365";
      const expected = "#03b365";
      const result = getCustomBackgroundColor(
        ButtonVariantTypes.PRIMARY,
        backgroundColor,
      );
      expect(result).toStrictEqual(expected);
    });
  
    it("getCustomBackgroundColor - validate background color with secondary button variant", () => {
      const backgroundColor = "#03b365";
      const expected = "none";
      const result = getCustomBackgroundColor(
        ButtonVariantTypes.SECONDARY,
        backgroundColor,
      );
      expect(result).toStrictEqual(expected);
    });
  
    // validate getCustomHoverColor function
    it("getCustomHoverColor - validate empty or undefined background color or variant", () => {
      // background color and variant is both are undefined
      const expected = "#00693B";
      const result = getCustomHoverColor(theme);
      expect(result).toStrictEqual(expected);
  
      // variant is undefined
      const backgroundColor = "#03b365";
      const expected1 = "#028149";
      const result1 = getCustomHoverColor(theme, undefined, backgroundColor);
      expect(result1).toStrictEqual(expected1);
    });
  
    // validate getCustomHoverColor function
    it("getCustomHoverColor - validate hover color for different variant", () => {
      const backgroundColor = "#03b365";
      // variant : PRIMARY
      const expected1 = "#028149";
      const result1 = getCustomHoverColor(
        theme,
        ButtonVariantTypes.PRIMARY,
        backgroundColor,
      );
      expect(result1).toStrictEqual(expected1);
  
      // variant : PRIMARY without background
      const expected2 = theme.colors.button.primary.primary.hoverColor;
      const result2 = getCustomHoverColor(theme, ButtonVariantTypes.PRIMARY);
      expect(result2).toStrictEqual(expected2);
  
      // variant : SECONDARY
      const expected3 = "#85fdc8";
      const result3 = getCustomHoverColor(
        theme,
        ButtonVariantTypes.SECONDARY,
        backgroundColor,
      );
      expect(result3).toStrictEqual(expected3);
  
      // variant : SECONDARY without background
      const expected4 = theme.colors.button.primary.secondary.hoverColor;
      const result4 = getCustomHoverColor(theme, ButtonVariantTypes.SECONDARY);
      expect(result4).toStrictEqual(expected4);
  
      // variant : TERTIARY
      const expected5 = "#85fdc8";
      const result5 = getCustomHoverColor(
        theme,
        ButtonVariantTypes.TERTIARY,
        backgroundColor,
      );
      expect(result5).toStrictEqual(expected5);
  
      // variant : TERTIARY without background
      const expected6 = theme.colors.button.primary.tertiary.hoverColor;
      const result6 = getCustomHoverColor(theme, ButtonVariantTypes.TERTIARY);
      expect(result6).toStrictEqual(expected6);
    });
  
    it("validate escaping special characters", () => {
      const testString = `a\nb\nc
  hello! how are you?
  `;
      const result = escapeSpecialChars(testString);
      const expectedResult = "a\nb\nc\nhello! how are you?\n";
      expect(result).toStrictEqual(expectedResult);
    });
  });
  