@wix/editor-react-components 1.2153.0

package/dist/site/components/Logo/component.js

@@ -0,0 +1,155 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c as clsx } from "../chunks/clsx.js";
+import { a as getDataAttributes } from "../chunks/dataUtils.js";
+import { d as defaultLogoUrl, D as DEFAULT_LOGO_SIZE } from "../chunks/constants25.js";
+import { I as Image$1 } from "../chunks/Image.js";
+import { L as Link } from "../chunks/Link.js";
+const logo = "logo__Y9w6a";
+const linkLayer = "linkLayer__KtYh-";
+const styles$1 = {
+  logo,
+  linkLayer
+};
+const semanticClassNames = {
+  logoWrapper: "logo-wrapper"
+};
+const image = "image__aIxfR";
+const styles = {
+  image
+};
+const Image = (props) => {
+  var _a, _b, _c;
+  const {
+    id,
+    alt,
+    role,
+    className,
+    imageStyles = {},
+    targetWidth,
+    targetHeight,
+    onLoad,
+    onError,
+    containerWidth,
+    containerHeight,
+    isInFirstFold,
+    socialAttrs,
+    skipMeasure,
+    responsiveImageProps,
+    zoomedImageResponsiveOverride,
+    displayMode
+  } = props;
+  const effectiveWidth = targetWidth || containerWidth;
+  const effectiveHeight = targetHeight || containerHeight;
+  const { fallbackSrc, srcset, sources, css } = responsiveImageProps || {};
+  const { width, height, ...responsiveImgCssNoHeightAndWidth } = ((_a = responsiveImageProps == null ? void 0 : responsiveImageProps.css) == null ? void 0 : _a.img) || {};
+  const responsiveImagesStyle = displayMode === "original_size" ? (_b = responsiveImageProps == null ? void 0 : responsiveImageProps.css) == null ? void 0 : _b.img : responsiveImgCssNoHeightAndWidth;
+  if (fallbackSrc && srcset && css) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        fetchpriority: isInFirstFold ? "high" : void 0,
+        loading: isInFirstFold === false ? "lazy" : void 0,
+        sizes: `${effectiveWidth}px`,
+        srcSet: skipMeasure ? zoomedImageResponsiveOverride == null ? void 0 : zoomedImageResponsiveOverride.srcset : responsiveImageProps == null ? void 0 : responsiveImageProps.srcset,
+        id,
+        src: fallbackSrc,
+        alt: alt || "",
+        role,
+        style: {
+          ...imageStyles,
+          ...skipMeasure ? { ...(_c = zoomedImageResponsiveOverride == null ? void 0 : zoomedImageResponsiveOverride.css) == null ? void 0 : _c.img } : { ...responsiveImagesStyle }
+        },
+        onLoad,
+        onError,
+        className: clsx(className, styles.image),
+        width: effectiveWidth,
+        height: effectiveHeight,
+        ...socialAttrs
+      }
+    );
+  }
+  if (fallbackSrc && sources && css) {
+    return /* @__PURE__ */ jsxs("picture", { children: [
+      sources.map(
+        ({
+          srcset: sourceSrcset,
+          media,
+          sizes
+        }) => {
+          return /* @__PURE__ */ jsx(
+            "source",
+            {
+              srcSet: sourceSrcset,
+              media,
+              sizes
+            },
+            media
+          );
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          fetchpriority: isInFirstFold ? "high" : void 0,
+          loading: isInFirstFold === false ? "lazy" : void 0,
+          id,
+          src: sources[0].fallbackSrc,
+          alt: alt || "",
+          role,
+          style: {
+            ...imageStyles,
+            objectFit: sources[0].imgStyle.objectFit,
+            objectPosition: sources[0].imgStyle.objectPosition
+          },
+          onLoad,
+          onError,
+          className: clsx(className, styles.image),
+          width: effectiveWidth,
+          height: effectiveHeight,
+          ...socialAttrs
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx(Image$1, { ...props });
+};
+const Logo = ({
+  id,
+  className,
+  image: image2 = {
+    uri: defaultLogoUrl,
+    name: "defaultLogo",
+    width: 180,
+    height: 180
+  },
+  link,
+  a11y,
+  ...props
+}) => {
+  const rootClassNames = clsx(
+    semanticClassNames.logoWrapper,
+    styles$1.logo,
+    className
+  );
+  const dataAttributes = getDataAttributes(props);
+  const logoImage = /* @__PURE__ */ jsx(
+    Image,
+    {
+      uri: (image2 == null ? void 0 : image2.uri) || defaultLogoUrl,
+      width: (image2 == null ? void 0 : image2.width) || DEFAULT_LOGO_SIZE,
+      height: (image2 == null ? void 0 : image2.height) || DEFAULT_LOGO_SIZE,
+      displayMode: "fit",
+      alt: (a11y == null ? void 0 : a11y.ariaLabel) || "",
+      name: "logo",
+      onLoad: () => {
+      },
+      onError: () => {
+      }
+    },
+    image2 == null ? void 0 : image2.uri
+  );
+  return /* @__PURE__ */ jsx("div", { id, className: rootClassNames, ...dataAttributes, children: link ? /* @__PURE__ */ jsx(Link, { className: styles$1.linkLayer, ...link, children: logoImage }) : logoImage });
+};
+export {
+  Logo as default
+};

package/dist/site/components/Logo/constants.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Manifest display name translation keys (custompanel_ prefix for migration).
+ * Used in manifest.ts; add these keys to the Editor 3 Babel project for translation.
+ */
+export declare const DisplayNames: {
+    readonly root: {
+        readonly elementDisplayName: "Logo";
+        readonly actions: {
+            readonly settings: "Settings";
+        };
+        readonly customActions: {
+            readonly customizeLogo: "Customize Logo";
+        };
+        readonly data: {
+            readonly image: {
+                readonly displayName: "Logo Image";
+            };
+        };
+    };
+};
+export declare const HELP_GFPP_ID = "c2d2160a-9851-4bd4-96f1-e00e4ab40ba0";
+export declare const SETTINGS_PANEL_HELP_ID = "c0b9ce8f-e4ed-4852-a2f0-62f382559188";
+export declare const defaultLogoUrl = "https://static.parastorage.com/services/santa-resources/dist/editor/addPanelData/sections/logo/logoDefault.v2.png";
+export declare const brandsEndpoint = "/logoapi/logo-builder-server-webapp/v1/brands";
+export declare const logoServerless = "/_serverless/brand-maker/api/v1";
+export declare const editorLogoService = "/_api/branding/editor-logo-service";
+export declare const LOGO_PREVIEWS = "LOGO_PREVIEWS";
+export declare const WIX_STATIC_BASE_URL = "https://static.wixstatic.com/";
+export declare const MEDIA_BASE_URL: string;
+export declare const SVG_MEDIA_BASE_URL: string;
+export declare const DEFAULT_LOGO_SIZE = 80;
+export declare const BUILDER_IMAGE_TYPE = "Builder.Image";
+export declare const DEFAULT_ALT_TEXT = "logo";
+export declare const SUPPORTED_IMAGE_FORMATS_FOR_BACKGROUND_REMOVAL: string[];
+export declare const MEDIA_IMPORT_FAILED_ERROR = "Failed to import file to media manager";
+export declare const OPERATION_CANCELLED_ERROR = "Operation was cancelled";
+export declare const ABORT_ERROR_NAME = "AbortError";
+export declare const LOGOS_FOLDER_NAME = "My Logos";

package/dist/site/components/Logo/css.css

@@ -0,0 +1,46 @@
+.logo__Y9w6a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.linkLayer__KtYh- {
+  display: block;
+  width: 100%;
+  height: 100%;
+  text-decoration: none;
+}
+
+.loading__8Bh18 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 40px;
+  color: #666;
+  font-size: 14px;
+}.image__aIxfR {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+.image__WopE9 {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.image__WopE9 img {
+  max-width: var(--wix-img-max-width, 100%);
+}
+.image__WopE9[data-animate-blur] img {
+  filter: blur(9px);
+  transition: filter 0.8s ease-in;
+}
+.image__WopE9[data-animate-blur] img[data-load-done] {
+  filter: none;
+}

package/dist/site/components/Logo/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useSiteColors } from './useSiteColors';

package/dist/site/components/Logo/hooks/useSiteColors.d.ts

@@ -0,0 +1,5 @@
+export declare const SITE_COLORS_REQUEST_TYPE = "REQUEST_SITE_COLORS";
+export declare const SITE_COLORS_RESPONSE_TYPE = "SITE_COLORS_RESPONSE";
+export declare const useSiteColors: () => {
+    getSiteColors: () => Promise<Record<string, string>>;
+};

package/dist/site/components/Logo/index.d.ts

@@ -0,0 +1,2 @@
+export * from './component';
+export { default, default as Logo } from './component';

package/dist/site/components/Logo/index.js

@@ -0,0 +1,6 @@
+'use client';
+
+import Logo from './component.js';
+
+export { Logo };
+export default Logo;

package/dist/site/components/Logo/manifest.d.ts

@@ -0,0 +1,5 @@
+import { EditorReactComponent } from '@wix/component-protocol/schema';
+declare const manifest: EditorReactComponent & {
+    id: string;
+};
+export default manifest;

package/dist/site/components/Logo/manifest.js

@@ -0,0 +1,103 @@
+import { D as DATA, a as ACTIONS, L as LAYOUT, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
+import { a as DisplayNames } from "../chunks/constants25.js";
+const manifest = {
+  id: "4190f51c-3836-49f6-8114-96219c165b30",
+  type: "wixEditorElements.Logo",
+  description: "Displays a logo image to represent a brand or business on a page",
+  installation: {
+    initialSize: {
+      height: {
+        sizingType: LAYOUT.SIZING_TYPE.pixels,
+        pixels: 80
+      },
+      width: {
+        sizingType: LAYOUT.SIZING_TYPE.pixels,
+        pixels: 80
+      },
+      preserveAspectRatio: true
+    }
+  },
+  resources: {
+    client: {
+      componentUrl: "./site/components/Logo/component.tsx",
+      moduleSpecifier: "@wix/editor-react-components/Logo"
+    },
+    sdk: {
+      url: "./site/components/Logo/sdk.ts"
+    }
+  },
+  editorElement: {
+    selector: ".logo-wrapper",
+    displayName: DisplayNames.root.elementDisplayName,
+    archetype: Archetype.Logo,
+    layout: {
+      resizeDirection: LAYOUT.RESIZE_DIRECTION.aspectRatio,
+      contentResizeDirection: LAYOUT.CONTENT_RESIZE_DIRECTION.horizontalAndVertical,
+      disableStretching: true,
+      disablePositioning: false,
+      contentFill: {
+        dataItemKey: "image"
+      }
+    },
+    customActions: {
+      customizeLogo: {
+        displayName: DisplayNames.root.customActions.customizeLogo,
+        execution: {
+          actionType: ACTIONS.ACTION_TYPE.panel,
+          panel: {
+            panelType: ACTIONS.PANEL_TYPE.panelId,
+            panelId: "b9bcad4a-f393-44f4-ad80-a7c9615552aa"
+          }
+        }
+      }
+    },
+    actions: {
+      settings: {
+        displayName: DisplayNames.root.actions.settings
+      }
+    },
+    displayFilters: {
+      data: {
+        hide: ["image", "disableBackgroundRemoval"]
+      }
+    },
+    data: {
+      link: {
+        dataType: DATA.DATA_TYPE.link,
+        [DATA.DATA_TYPE.link]: {
+          linkTypes: [
+            DATA.LINK_TYPE.pageLink,
+            DATA.LINK_TYPE.dynamicPageLink,
+            DATA.LINK_TYPE.externalLink,
+            DATA.LINK_TYPE.anchorLink,
+            DATA.LINK_TYPE.edgeAnchorLinks,
+            DATA.LINK_TYPE.documentLink,
+            DATA.LINK_TYPE.emailLink,
+            DATA.LINK_TYPE.phoneLink,
+            DATA.LINK_TYPE.popupLink
+          ]
+        }
+      },
+      disableBackgroundRemoval: {
+        dataType: DATA.DATA_TYPE.booleanValue
+      },
+      image: {
+        displayName: DisplayNames.root.data.image.displayName,
+        dataType: DATA.DATA_TYPE.image,
+        [DATA.DATA_TYPE.image]: {}
+      },
+      a11y: {
+        dataType: DATA.DATA_TYPE.a11y,
+        [DATA.DATA_TYPE.a11y]: {
+          attributes: [DATA.A11Y_ATTRIBUTES.ariaLabel]
+        }
+      }
+    },
+    helpArticle: {
+      kbId: "8fc887dd-62ff-4cf8-b789-60d87654ca71"
+    }
+  }
+};
+export {
+  manifest as default
+};

package/dist/site/components/Logo/panels/customizeLogo/components/EmptyPanelState.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { Translations } from '../translations/consts';
+interface EmptyPanelStateProps {
+    translations: Translations;
+    onOpenOnBoardingFlowModal: () => void;
+    onUploadFromMediaManager: () => Promise<void>;
+    logoPreviewUrl?: string;
+    isLoadingPreview?: boolean;
+    addLogoToComponentFromEmptyState: (logoPreviewUrl: string) => Promise<void>;
+    onEditInLogoMaker: () => Promise<void>;
+    businessInfoImageUrl?: string;
+    onAddBusinessInfoToSite: () => void;
+}
+export declare const EmptyPanelState: React.FC<EmptyPanelStateProps>;
+export {};

package/dist/site/components/Logo/panels/customizeLogo/components/LogoActions.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { LogoImageData } from '../types';
+import { Translations } from '../translations/consts';
+interface LogoActionsProps {
+    translations: Translations;
+    onReplaceLogo: () => Promise<void>;
+    onOpenLogoEditor: (logoId: string, brandId: string) => void;
+    onOpenOnboardingFlow: () => void;
+    logoId: string | undefined;
+    brandId: string | undefined;
+    isPreviewingBackgroundRemoval: boolean;
+    logoImage: LogoImageData | undefined;
+    disableBackgroundRemoval: boolean;
+    handleRemoveBackgroundClicked: (logoImage: LogoImageData | undefined) => void;
+    isLoadingLogoPreview: boolean;
+}
+export declare const LogoActions: React.FC<LogoActionsProps>;
+export {};

package/dist/site/components/Logo/panels/customizeLogo/components/LogoBackgroundRemovalActions.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { LogoImageData } from '../types';
+import { Translations } from '../translations/consts';
+interface LogoBackgroundRemovalActionsProps {
+    translations: Translations;
+    isLoadingBackgroundRemoval: boolean;
+    backgroundRemovalError: boolean;
+    isLoadingAddToSite: boolean;
+    addImageToSiteFileError: boolean;
+    isLoadingLogoPreview: boolean;
+    logoImage: LogoImageData | undefined;
+    onCancelBackgroundRemoval: () => void;
+    onApplyBackgroundRemoval: () => void;
+    handleRemoveBackgroundClicked: (logoImage: LogoImageData | undefined) => void;
+}
+export declare const LogoBackgroundRemovalActions: React.FC<LogoBackgroundRemovalActionsProps>;
+export {};

package/dist/site/components/Logo/panels/customizeLogo/components/LogoBackgroundRemovalButton.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { Translations } from '../translations/consts';
+export declare const LogoBackgroundRemovalButton: ({ translations, onRemoveBackgroundClicked, disabled, isSupportedForBackgroundRemoval, }: {
+    translations: Translations;
+    onRemoveBackgroundClicked: () => void;
+    disabled?: boolean | undefined;
+    isSupportedForBackgroundRemoval?: boolean | undefined;
+}) => React.JSX.Element;

package/dist/site/components/Logo/panels/customizeLogo/components/LogoPreview.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { LogoImageData } from '../types';
+import { Translations } from '../translations/consts';
+interface LogoPreviewProps {
+    translations: Translations;
+    logoImage: LogoImageData | undefined;
+    isLoading: boolean;
+    isPreviewingBackgroundRemoval?: boolean;
+    backgroundRemovalPreviewImage?: LogoImageData | undefined;
+}
+export declare const LogoPreview: React.FC<LogoPreviewProps>;
+export {};

package/dist/site/components/Logo/panels/customizeLogo/components/StatusComponents.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+interface StatusMessageProps {
+    status?: 'loading' | 'error' | 'success';
+    title: string;
+    subtitle?: string;
+}
+export declare const StatusMessage: React.FC<StatusMessageProps>;
+interface ActionButtonsProps {
+    primaryAction: {
+        text: string;
+        onClick: () => void;
+        icon?: React.ReactElement;
+        disabled?: boolean;
+        fullWidth?: boolean;
+    };
+    secondaryAction?: {
+        text: string;
+        onClick: () => void;
+        disabled?: boolean;
+    };
+}
+export declare const ActionButtons: React.FC<ActionButtonsProps>;
+interface StatusCardProps {
+    children: React.ReactNode;
+}
+export declare const StatusCard: React.FC<StatusCardProps>;
+export {};

package/dist/site/components/Logo/panels/customizeLogo/components/index.d.ts

@@ -0,0 +1,5 @@
+export { LogoPreview } from './LogoPreview';
+export { LogoActions } from './LogoActions';
+export { LogoBackgroundRemovalButton } from './LogoBackgroundRemovalButton';
+export { LogoBackgroundRemovalActions } from './LogoBackgroundRemovalActions';
+export { EmptyPanelState } from './EmptyPanelState';

package/dist/site/components/Logo/panels/customizeLogo/extension.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    type: string;
+};
+export default _default;

package/dist/site/components/Logo/panels/customizeLogo/handlers.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { LogoImageData } from './types';
+export declare const createLogoHandlers: (setLogoImage: (image: LogoImageData | undefined) => void, setDisableBackgroundRemoval: (disableBackgroundRemoval: boolean) => void, setIsLoadingLogoPreview: (isLoadingLogoPreview: boolean) => void, setIsLoadingBackgroundRemoval: (isLoadingBackgroundRemoval: boolean) => void, setIsPreviewingBackgroundRemoval: (isPreviewingBackgroundRemoval: boolean) => void, setBackgroundRemovalPreviewImage: (image: LogoImageData | undefined) => void, backgroundRemovalPreviewImage: LogoImageData | undefined, setBackgroundRemovalError: (backgroundRemovalError: boolean) => void, setAddImageToSiteFileError: (addImageToSiteFileError: boolean) => void, setIsLoadingAddToSite: (isLoadingAddToSite: boolean) => void, getSiteColors: () => Promise<Record<string, string>>, setIsLoadingPanel: (isLoadingPanel: boolean) => void, setHasEmptyState?: ((hasEmptyState: boolean) => void) | undefined, businessInfoImage?: LogoImageData, abortControllerRef?: React.MutableRefObject<AbortController | null>) => {
+    handleRemoveBackgroundClicked: (currentLogoImage: LogoImageData | undefined) => Promise<void>;
+    handleOpenOnBoardingFlowModal: () => Promise<void>;
+    handleOpenLogoEditor: (logoId?: string, brandId?: string) => Promise<void>;
+    handleApplyBackgroundRemoval: () => Promise<void>;
+    handleCancelBackgroundRemoval: () => void;
+    handleUploadFromMediaManager: () => Promise<void>;
+    addLogoToComponentFromEmptyState: (logoPreviewUrl: string | undefined) => Promise<void>;
+    handleAddBusinessInfoImageToSite: () => void;
+};

package/dist/site/components/Logo/panels/customizeLogo/hooks.d.ts

@@ -0,0 +1,2 @@
+import { LogoDataHookReturn } from './types';
+export declare const useLogoData: () => LogoDataHookReturn;

package/dist/site/components/Logo/panels/customizeLogo/panel.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/site/components/Logo/panels/customizeLogo/translations/consts.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Translation keys for the Logo custom panel and manifest.
+ * All keys are prefixed with custompanel_ for migration to a dedicated project.
+ */
+export declare const TranslationKeys: {
+    readonly panelDescription: "custompanel_logo_create_and_edit_description";
+    readonly logoPreviewAlt: "custompanel_logo_preview_alt";
+    readonly logoPreviewWithBgRemovedAlt: "custompanel_logo_preview_with_bg_removed_alt";
+    readonly addToSite: "custompanel_logo_add_to_site";
+    readonly editLogo: "custompanel_logo_edit_logo";
+    readonly createdWithLogoMaker: "custompanel_logo_created_with_logo_maker";
+    readonly createWithLogoMaker: "custompanel_logo_create_with_logo_maker";
+    readonly businessInfoAlt: "custompanel_logo_business_info_alt";
+    readonly uploadDifferentLogo: "custompanel_logo_upload_different_logo";
+    readonly uploadedFromSiteSettings: "custompanel_logo_uploaded_from_site_settings";
+    readonly uploadLogo: "custompanel_logo_upload_logo";
+    readonly removeBackground: "custompanel_logo_remove_background";
+    readonly removeBackgroundTooltip: "custompanel_logo_remove_background_tooltip";
+    readonly replaceLogo: "custompanel_logo_replace_logo";
+    readonly openLogoMaker: "custompanel_logo_open_logo_maker";
+    readonly createLogo: "custompanel_logo_create_logo";
+    readonly createLogoSectionTitle: "custompanel_logo_create_section_title";
+    readonly createLogoSectionDescription: "custompanel_logo_create_section_description";
+    readonly removingBackgroundTitle: "custompanel_logo_removing_background_title";
+    readonly removingBackgroundSubtitle: "custompanel_logo_removing_background_subtitle";
+    readonly backgroundRemovalErrorTitle: "custompanel_logo_background_removal_error_title";
+    readonly backgroundRemovalErrorSubtitle: "custompanel_logo_background_removal_error_subtitle";
+    readonly tryAgain: "custompanel_logo_try_again";
+    readonly cancel: "custompanel_logo_cancel";
+    readonly addingToSiteTitle: "custompanel_logo_adding_to_site_title";
+    readonly addingToSiteSubtitle: "custompanel_logo_adding_to_site_subtitle";
+    readonly addToSiteErrorTitle: "custompanel_logo_add_to_site_error_title";
+    readonly addToSiteErrorSubtitle: "custompanel_logo_add_to_site_error_subtitle";
+    readonly backgroundRemovedTitle: "custompanel_logo_background_removed_title";
+    readonly backgroundRemovedSubtitle: "custompanel_logo_background_removed_subtitle";
+    readonly saveAndAddToSite: "custompanel_logo_save_and_add_to_site";
+};
+export type Translations = Record<keyof typeof TranslationKeys, string>;
+export declare const DefaultTranslations: Translations;

package/dist/site/components/Logo/panels/customizeLogo/types.d.ts

@@ -0,0 +1,32 @@
+import { ImageProps } from '@wix/image';
+export type LogoImageData = Pick<ImageProps, 'uri' | 'width' | 'height' | 'name'> & {
+    type?: string;
+};
+export interface LogoDataHookReturn {
+    logoImage: LogoImageData | undefined;
+    logoPreviewImage: LogoImageData | undefined;
+    hasEmptyState: boolean;
+    isLoadingPanel: boolean;
+    setIsLoadingPanel: (isLoadingPanel: boolean) => void;
+    isLoadingLogoPreview: boolean;
+    isLoadingBackgroundRemoval: boolean;
+    isLoadingAddToSite: boolean;
+    setIsLoadingAddToSite: (isLoadingAddToSite: boolean) => void;
+    setIsLoadingBackgroundRemoval: (isLoadingBackgroundRemoval: boolean) => void;
+    setLogoImage: (image: LogoImageData | undefined) => void;
+    setHasEmptyState: (hasEmptyState: boolean) => void;
+    brandId: string | undefined;
+    logoDesignId: string | undefined;
+    disableBackgroundRemoval: boolean;
+    setDisableBackgroundRemoval: (disableBackgroundRemoval: boolean) => void;
+    setIsLoadingLogoPreview: (isLoadingLogoPreview: boolean) => void;
+    isPreviewingBackgroundRemoval: boolean;
+    backgroundRemovalPreviewImage: LogoImageData | undefined;
+    setIsPreviewingBackgroundRemoval: (isPreviewingBackgroundRemoval: boolean) => void;
+    setBackgroundRemovalPreviewImage: (image: LogoImageData | undefined) => void;
+    businessInfoImage: LogoImageData | undefined;
+    backgroundRemovalError: boolean;
+    addImageToSiteFileError: boolean;
+    setBackgroundRemovalError: (backgroundRemovalError: boolean) => void;
+    setAddImageToSiteFileError: (addImageToSiteFileError: boolean) => void;
+}