Configuring `DepictProvider`

import { DepictProvider } from "@depict-ai/react-ui";
import { en } from "@depict-ai/react-ui/locales";
import { YourDisplay } from "./display-types.ts"

function App() {
  return (
    <DepictProvider<YourDisplay>
      // Wondering what your MERCHANT_ID is? Depict engineers aren't very creative here, so you can probably guess. Odds are it's your company name or an abbreviation thereof, all lower case and only a-z or 1-9. Ask us if you can't get it working.
      merchant="MERCHANT_ID"
      // Wondering what your MARKET(s) is/are? Me too. Ask a depict engineer or try something like `se-sv`, `se-sv_SE` or `se`.
      market="MARKET"
      // The `locale` property on the `DepictProvider` wrapper accepts a JavaScript object that handles UI translations and price formatting. Import our supported locales from the `@depict-ai/react-ui/locales` subpackage, extend them or write your own.
      locale={en}
      // userId={"USER_ID"} // <- if users are logged in and you have a user id for them, provide it here. Otherwise, omit this property.
    >
      <div className="App">
        ...
      </div>
    </DepictProvider>
  );
}

export default App;