@refinedev/core 4.46.2 → 4.47.0

package/dist/interfaces/bindings/auth.d.ts

@@ -42,11 +42,16 @@ export declare type OnErrorResponse = {
     logout?: boolean;
     error?: RefineError | Error;
 };
+export declare type SuccessNotificationResponse = {
+    message: string;
+    description?: string;
+};
 export declare type AuthActionResponse = {
     success: boolean;
     redirectTo?: string;
     error?: RefineError | Error;
     [key: string]: unknown;
+    successNotification?: SuccessNotificationResponse;
 };
 export declare type PermissionResponse = unknown;
 export declare type IdentityResponse = unknown;
@@ -61,7 +66,8 @@ export declare type AuthBindings = {
     getPermissions?: (params?: any) => Promise<PermissionResponse>;
     getIdentity?: (params?: any) => Promise<IdentityResponse>;
 };
-export interface IAuthBindingsContext extends Partial<AuthBindings> {
+export interface IAuthBindingsContext extends Partial<AuthProvider> {
     isProvided: boolean;
 }
+export declare type AuthProvider = AuthBindings;
 //# sourceMappingURL=auth.d.ts.map

package/dist/interfaces/bindings/auth.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"auth.d.ts","sourceRoot":"","sources":["../../../src/interfaces/bindings/auth.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC,oBAAY,aAAa,GAAG;IACxB,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,WAAW,GAAG,KAAK,CAAC;CAC/B,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,WAAW,GAAG,KAAK,CAAC;CAC/B,CAAC;AAEF,oBAAY,kBAAkB,GAAG;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,GAAG,KAAK,CAAC;IAC5B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CAC1B,CAAC;AAEF,oBAAY,kBAAkB,GAAG,OAAO,CAAC;AAEzC,oBAAY,gBAAgB,GAAG,OAAO,CAAC;AAEvC,oBAAY,YAAY,GAAG;IACvB,KAAK,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACpD,MAAM,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACrD,KAAK,EAAE,CAAC,MAAM,CAAC,EAAE,GAAG,KAAK,OAAO,CAAC,aAAa,CAAC,CAAC;IAChD,OAAO,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,OAAO,CAAC,eAAe,CAAC,CAAC;IAClD,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACxD,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAC9D,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAC9D,cAAc,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,GAAG,KAAK,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAC/D,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,GAAG,KAAK,OAAO,CAAC,gBAAgB,CAAC,CAAC;CAC7D,CAAC;AAEF,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,YAAY,CAAC;IAC/D,UAAU,EAAE,OAAO,CAAC;CACvB"}
+{"version":3,"file":"auth.d.ts","sourceRoot":"","sources":["../../../src/interfaces/bindings/auth.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC,oBAAY,aAAa,GAAG;IACxB,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,WAAW,GAAG,KAAK,CAAC;CAC/B,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,WAAW,GAAG,KAAK,CAAC;CAC/B,CAAC;AAEF,oBAAY,2BAA2B,GAAG;IACtC,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB,CAAA;AAED,oBAAY,kBAAkB,GAAG;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,GAAG,KAAK,CAAC;IAC5B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,mBAAmB,CAAC,EAAE,2BAA2B,CAAC;CACrD,CAAC;AAEF,oBAAY,kBAAkB,GAAG,OAAO,CAAC;AAEzC,oBAAY,gBAAgB,GAAG,OAAO,CAAC;AAEvC,oBAAY,YAAY,GAAG;IACvB,KAAK,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACpD,MAAM,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACrD,KAAK,EAAE,CAAC,MAAM,CAAC,EAAE,GAAG,KAAK,OAAO,CAAC,aAAa,CAAC,CAAC;IAChD,OAAO,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,OAAO,CAAC,eAAe,CAAC,CAAC;IAClD,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACxD,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAC9D,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAC9D,cAAc,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,GAAG,KAAK,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAC/D,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,GAAG,KAAK,OAAO,CAAC,gBAAgB,CAAC,CAAC;CAC7D,CAAC;AAEF,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,YAAY,CAAC;IAC/D,UAAU,EAAE,OAAO,CAAC;CACvB;AAED,oBAAY,YAAY,GAAG,YAAY,CAAC"}

package/dist/interfaces/bindings/index.d.ts

@@ -1,5 +1,5 @@
 export { AccessControlBindings } from "./access-control";
-export { AuthBindings, IAuthBindingsContext, AuthActionResponse, IdentityResponse, CheckResponse, OnErrorResponse, PermissionResponse, } from "./auth";
+export { AuthBindings, IAuthBindingsContext, AuthActionResponse, IdentityResponse, CheckResponse, OnErrorResponse, PermissionResponse, AuthProvider, } from "./auth";
 export { DataBindings } from "./data";
 export { i18nBindings } from "./i18n";
 export { LiveBindings } from "./live";

package/dist/interfaces/bindings/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/interfaces/bindings/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EACH,YAAY,EACZ,oBAAoB,EACpB,kBAAkB,EAClB,gBAAgB,EAChB,aAAa,EACb,eAAe,EACf,kBAAkB,GACrB,MAAM,QAAQ,CAAC;AAChB,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EACH,cAAc,EACd,aAAa,EACb,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,aAAa,GAChB,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/interfaces/bindings/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EACH,YAAY,EACZ,oBAAoB,EACpB,kBAAkB,EAClB,gBAAgB,EAChB,aAAa,EACb,eAAe,EACf,kBAAkB,EAClB,YAAY,GACf,MAAM,QAAQ,CAAC;AAChB,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EACH,cAAc,EACd,aAAa,EACb,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,aAAa,GAChB,MAAM,UAAU,CAAC"}

package/dist/interfaces/metaData/graphqlQueryOptions.d.ts

@@ -1,6 +1,53 @@
 import type { DocumentNode } from "graphql";
 export declare type GraphQLQueryOptions = {
+    /**
+     * @description GraphQL query to be used by data providers.
+     * @optional
+     * @example
+     * ```tsx
+     * import gql from 'graphql-tag'
+     * import { useOne } from '@refinedev/core'
+     *
+     * const PRODUCT_QUERY = gql`
+     *   query GetProduct($id: ID!) {
+     *     product(id: $id) {
+     *       id
+     *       name
+     *     }
+     *   }
+     * `
+     *
+     * useOne({
+     *   id: 1,
+     *   meta: { gqlQuery: PRODUCT_QUERY }
+     * })
+     * ```
+     */
     gqlQuery?: DocumentNode;
+    /**
+     * @description GraphQL mutation to be used by data providers.
+     * @optional
+     * @example
+     * ```tsx
+     * import gql from 'graphql-tag'
+     * import { useCreate } from '@refinedev/core'
+     *
+     * const PRODUCT_CREATE_MUTATION = gql`
+     *   mutation CreateProduct($input: CreateOneProductInput!) {
+     *     createProduct(input: $input) {
+     *       id
+     *       name
+     *     }
+     *   }
+     * `
+     * const { mutate } = useCreate()
+     *
+     * mutate({
+     *   values: { name: "My Product" },
+     *   meta: { gqlQuery: PRODUCT_QUERY }
+     * })
+     * ```
+     */
     gqlMutation?: DocumentNode;
 };
 //# sourceMappingURL=graphqlQueryOptions.d.ts.map

package/dist/interfaces/metaData/graphqlQueryOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"graphqlQueryOptions.d.ts","sourceRoot":"","sources":["../../../src/interfaces/metaData/graphqlQueryOptions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,oBAAY,mBAAmB,GAAG;IAC9B,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,WAAW,CAAC,EAAE,YAAY,CAAC;CAC9B,CAAC"}
+{"version":3,"file":"graphqlQueryOptions.d.ts","sourceRoot":"","sources":["../../../src/interfaces/metaData/graphqlQueryOptions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,oBAAY,mBAAmB,GAAG;IAC9B;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC;CAC9B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinedev/core",
-  "version": "4.46.2",
+  "version": "4.47.0",
   "description": "refine is a React-based framework for building internal tools, rapidly. It ships with Ant Design System, an enterprise-level UI toolkit.",
   "private": false,
   "sideEffects": false,
@@ -45,7 +45,6 @@
   },
   "dependencies": {
     "@refinedev/devtools-internal": "1.1.4",
-    "export-to-csv-fix-source-map": "^0.2.1",
     "lodash-es": "^4.17.21",
     "lodash": "^4.17.21",
     "papaparse": "^5.3.0",

package/src/components/canAccess/index.tsx

@@ -2,6 +2,9 @@ import React, { useEffect } from "react";
 
 import { useCan, useResource } from "@hooks";
 import { BaseKey, IResourceItem, ITreeMenu } from "../../interfaces";
+import { UseQueryOptions } from "@tanstack/react-query";
+
+import { CanReturnType } from "../../interfaces";
 
 type CanParams = {
     resource?: IResourceItem & { children?: ITreeMenu[] };
@@ -39,6 +42,7 @@ type CanAccessBaseProps = {
      */
     onUnauthorized?: (props: OnUnauthorizedProps) => void;
     children: React.ReactNode;
+    queryOptions?: UseQueryOptions<CanReturnType>;
 };
 
 type CanAccessWithoutParamsProps = {
@@ -59,6 +63,7 @@ export const CanAccess: React.FC<CanAccessProps> = ({
     fallback,
     onUnauthorized,
     children,
+    queryOptions: componentQueryOptions,
     ...rest
 }) => {
     const {
@@ -90,6 +95,7 @@ export const CanAccess: React.FC<CanAccessProps> = ({
         resource: resourceName,
         action,
         params,
+        queryOptions: componentQueryOptions, 
     });
 
     useEffect(() => {

package/src/components/containers/refine/index.tsx

@@ -29,7 +29,7 @@ import { useRouterMisuseWarning } from "../../../hooks/router/use-router-misuse-
 import {
     AccessControlProvider,
     AuditLogProvider,
-    AuthBindings,
+    AuthProvider,
     DashboardPageProps,
     I18nProvider,
     IDataContextProvider,
@@ -69,12 +69,12 @@ export interface RefineProps {
      * A `dataProvider` is the place where a refine app communicates with an API. Data providers also act as adapters for refine, making it possible for it to consume different API's and data services.
      * @type [`IDataContextProvider` | `IDataMultipleContextProvider`](https://refine.dev/docs/api-reference/core/providers/data-provider/)
      */
-    dataProvider: IDataContextProvider | IDataMultipleContextProvider;
+    dataProvider?: IDataContextProvider | IDataMultipleContextProvider;
     /**
      * `authProvider` handles authentication logic like login, logout flow and checking user credentials. It is an object with methods that refine uses when necessary.
-     * @type [`AuthBindings`](https://refine.dev/docs/api-reference/core/providers/auth-provider/)
+     * @type [`AuthProvider`](https://refine.dev/docs/api-reference/core/providers/auth-provider/)
      */
-    authProvider?: AuthBindings;
+    authProvider?: AuthProvider;
     /**
      * `legacyAuthProvider` handles authentication logic like login, logout flow and checking user credentials. It is an object with methods that refine uses when necessary.
      * @type [`AuthProvider`](https://refine.dev/docs/api-reference/core/providers/auth-provider/)

package/src/components/pages/config-error/index.tsx

@@ -0,0 +1,444 @@
+import React from "react";
+
+export const ConfigErrorPage = () => {
+    return (
+        <div
+            style={{
+                position: "fixed",
+                zIndex: 11,
+                inset: 0,
+                overflow: "auto",
+                width: "100dvw",
+                height: "100dvh",
+            }}
+        >
+            <div
+                style={{
+                    width: "100%",
+                    height: "100%",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    padding: "24px",
+                    background: "#14141FBF",
+                    backdropFilter: "blur(3px)",
+                }}
+            >
+                <div
+                    style={{
+                        maxWidth: "640px",
+                        width: "100%",
+                        background: "#1D1E30",
+                        borderRadius: "16px",
+                        border: "1px solid #303450",
+                        boxShadow: "0px 0px 120px -24px #000000",
+                    }}
+                >
+                    <div
+                        style={{
+                            padding: "16px 20px",
+                            borderBottom: "1px solid #303450",
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "8px",
+                            position: "relative",
+                        }}
+                    >
+                        <ErrorGradient
+                            style={{
+                                position: "absolute",
+                                left: 0,
+                                top: 0,
+                            }}
+                        />
+                        <div
+                            style={{
+                                lineHeight: "24px",
+                                fontSize: "16px",
+                                color: "#FFFFFF",
+                                display: "flex",
+                                alignItems: "center",
+                                gap: "16px",
+                            }}
+                        >
+                            <ErrorIcon />
+                            <span
+                                style={{
+                                    fontWeight: 400,
+                                }}
+                            >
+                                Configuration Error
+                            </span>
+                        </div>
+                    </div>
+                    <div
+                        style={{
+                            padding: "20px",
+                            color: "#A3ADC2",
+                            lineHeight: "20px",
+                            fontSize: "14px",
+                            display: "flex",
+                            flexDirection: "column",
+                            gap: "20px",
+                        }}
+                    >
+                        <p
+                            style={{
+                                margin: 0,
+                                padding: 0,
+                                lineHeight: "28px",
+                                fontSize: "16px",
+                            }}
+                        >
+                            <code
+                                style={{
+                                    display: "inline-block",
+                                    background: "#30345080",
+                                    padding: "0 4px",
+                                    lineHeight: "24px",
+                                    fontSize: "16px",
+                                    borderRadius: "4px",
+                                    color: "#FFFFFF",
+                                }}
+                            >{`<Refine />`}</code>{" "}
+                            is not initialized. Please make sure you have it
+                            mounted in your app and placed your components
+                            inside it.
+                        </p>
+                        <div>
+                            <ExampleImplementation />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+const ExampleImplementation = () => {
+    return (
+        <pre
+            style={{
+                display: "block",
+                overflowX: "auto",
+                borderRadius: "8px",
+                fontSize: "14px",
+                lineHeight: "24px",
+                backgroundColor: "#14141F",
+                color: "#E5ECF2",
+                padding: "16px",
+                margin: "0",
+                maxHeight: "400px",
+                overflow: "auto",
+            }}
+        >
+            <span style={{ color: "#FF7B72" }}>import</span> {"{"} Refine,
+            WelcomePage {"}"} <span style={{ color: "#FF7B72" }}>from</span>{" "}
+            <span style={{ color: "#A5D6FF" }}>{'"@refinedev/core"'}</span>;
+            {"\n"}
+            {"\n"}
+            <span style={{ color: "#FF7B72" }}>export</span>{" "}
+            <span style={{ color: "#FF7B72" }}>default</span>{" "}
+            <span>
+                <span style={{ color: "#FF7B72" }}>function</span>{" "}
+                <span style={{ color: "#FFA657" }}>App</span>
+                (
+                <span style={{ color: "rgb(222, 147, 95)" }} />){" "}
+            </span>
+            {"{"}
+            {"\n"}
+            {"  "}
+            <span style={{ color: "#FF7B72" }}>return</span> ({"\n"}
+            {"    "}
+            <span>
+                <span style={{ color: "#79C0FF" }}>
+                    &lt;
+                    <span style={{ color: "#79C0FF" }}>Refine</span>
+                    {"\n"}
+                    {"      "}
+                    <span style={{ color: "#E5ECF2", opacity: 0.6 }}>
+                        {"// "}
+                        <span>...</span>
+                    </span>
+                    {"\n"}
+                    {"    "}&gt;
+                </span>
+                {"\n"}
+                {"      "}
+                <span style={{ opacity: 0.6 }}>
+                    {"{"}
+                    {"/* ... */"}
+                    {"}"}
+                </span>
+                {"\n"}
+                {"      "}
+                <span style={{ color: "#79C0FF" }}>
+                    &lt;
+                    <span style={{ color: "#79C0FF" }}>WelcomePage</span> /&gt;
+                </span>
+                {"\n"}
+                {"      "}
+                <span style={{ opacity: 0.6 }}>
+                    {"{"}
+                    {"/* ... */"}
+                    {"}"}
+                </span>
+                {"\n"}
+                {"    "}
+                <span style={{ color: "#79C0FF" }}>
+                    &lt;/
+                    <span style={{ color: "#79C0FF" }}>Refine</span>
+                    &gt;
+                </span>
+            </span>
+            {"\n"}
+            {"  "});{"\n"}
+            {"}"}
+        </pre>
+    );
+};
+
+const ErrorGradient = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={204}
+        height={56}
+        viewBox="0 0 204 56"
+        fill="none"
+        {...props}
+    >
+        <path fill="url(#welcome-page-error-gradient-a)" d="M12 0H0v12L12 0Z" />
+        <path
+            fill="url(#welcome-page-error-gradient-b)"
+            d="M28 0h-8L0 20v8L28 0Z"
+        />
+        <path
+            fill="url(#welcome-page-error-gradient-c)"
+            d="M36 0h8L0 44v-8L36 0Z"
+        />
+        <path
+            fill="url(#welcome-page-error-gradient-d)"
+            d="M60 0h-8L0 52v4h4L60 0Z"
+        />
+        <path
+            fill="url(#welcome-page-error-gradient-e)"
+            d="M68 0h8L20 56h-8L68 0Z"
+        />
+        <path
+            fill="url(#welcome-page-error-gradient-f)"
+            d="M92 0h-8L28 56h8L92 0Z"
+        />
+        <path
+            fill="url(#welcome-page-error-gradient-g)"
+            d="M100 0h8L52 56h-8l56-56Z"
+        />
+        <path
+            fill="url(#welcome-page-error-gradient-h)"
+            d="M124 0h-8L60 56h8l56-56Z"
+        />
+        <path
+            fill="url(#welcome-page-error-gradient-i)"
+            d="M140 0h-8L76 56h8l56-56Z"
+        />
+        <path
+            fill="url(#welcome-page-error-gradient-j)"
+            d="M132 0h8L84 56h-8l56-56Z"
+        />
+        <path
+            fill="url(#welcome-page-error-gradient-k)"
+            d="M156 0h-8L92 56h8l56-56Z"
+        />
+        <path
+            fill="url(#welcome-page-error-gradient-l)"
+            d="M164 0h8l-56 56h-8l56-56Z"
+        />
+        <path
+            fill="url(#welcome-page-error-gradient-m)"
+            d="M188 0h-8l-56 56h8l56-56Z"
+        />
+        <path
+            fill="url(#welcome-page-error-gradient-n)"
+            d="M204 0h-8l-56 56h8l56-56Z"
+        />
+        <defs>
+            <radialGradient
+                id="welcome-page-error-gradient-a"
+                cx={0}
+                cy={0}
+                r={1}
+                gradientTransform="scale(124)"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#FF4C4D" stopOpacity={0.1} />
+                <stop offset={1} stopColor="#FF4C4D" stopOpacity={0} />
+            </radialGradient>
+            <radialGradient
+                id="welcome-page-error-gradient-b"
+                cx={0}
+                cy={0}
+                r={1}
+                gradientTransform="scale(124)"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#FF4C4D" stopOpacity={0.1} />
+                <stop offset={1} stopColor="#FF4C4D" stopOpacity={0} />
+            </radialGradient>
+            <radialGradient
+                id="welcome-page-error-gradient-c"
+                cx={0}
+                cy={0}
+                r={1}
+                gradientTransform="scale(124)"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#FF4C4D" stopOpacity={0.1} />
+                <stop offset={1} stopColor="#FF4C4D" stopOpacity={0} />
+            </radialGradient>
+            <radialGradient
+                id="welcome-page-error-gradient-d"
+                cx={0}
+                cy={0}
+                r={1}
+                gradientTransform="scale(124)"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#FF4C4D" stopOpacity={0.1} />
+                <stop offset={1} stopColor="#FF4C4D" stopOpacity={0} />
+            </radialGradient>
+            <radialGradient
+                id="welcome-page-error-gradient-e"
+                cx={0}
+                cy={0}
+                r={1}
+                gradientTransform="scale(124)"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#FF4C4D" stopOpacity={0.1} />
+                <stop offset={1} stopColor="#FF4C4D" stopOpacity={0} />
+            </radialGradient>
+            <radialGradient
+                id="welcome-page-error-gradient-f"
+                cx={0}
+                cy={0}
+                r={1}
+                gradientTransform="scale(124)"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#FF4C4D" stopOpacity={0.1} />
+                <stop offset={1} stopColor="#FF4C4D" stopOpacity={0} />
+            </radialGradient>
+            <radialGradient
+                id="welcome-page-error-gradient-g"
+                cx={0}
+                cy={0}
+                r={1}
+                gradientTransform="scale(124)"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#FF4C4D" stopOpacity={0.1} />
+                <stop offset={1} stopColor="#FF4C4D" stopOpacity={0} />
+            </radialGradient>
+            <radialGradient
+                id="welcome-page-error-gradient-h"
+                cx={0}
+                cy={0}
+                r={1}
+                gradientTransform="scale(124)"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#FF4C4D" stopOpacity={0.1} />
+                <stop offset={1} stopColor="#FF4C4D" stopOpacity={0} />
+            </radialGradient>
+            <radialGradient
+                id="welcome-page-error-gradient-i"
+                cx={0}
+                cy={0}
+                r={1}
+                gradientTransform="scale(124)"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#FF4C4D" stopOpacity={0.1} />
+                <stop offset={1} stopColor="#FF4C4D" stopOpacity={0} />
+            </radialGradient>
+            <radialGradient
+                id="welcome-page-error-gradient-j"
+                cx={0}
+                cy={0}
+                r={1}
+                gradientTransform="scale(124)"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#FF4C4D" stopOpacity={0.1} />
+                <stop offset={1} stopColor="#FF4C4D" stopOpacity={0} />
+            </radialGradient>
+            <radialGradient
+                id="welcome-page-error-gradient-k"
+                cx={0}
+                cy={0}
+                r={1}
+                gradientTransform="scale(124)"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#FF4C4D" stopOpacity={0.1} />
+                <stop offset={1} stopColor="#FF4C4D" stopOpacity={0} />
+            </radialGradient>
+            <radialGradient
+                id="welcome-page-error-gradient-l"
+                cx={0}
+                cy={0}
+                r={1}
+                gradientTransform="scale(124)"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#FF4C4D" stopOpacity={0.1} />
+                <stop offset={1} stopColor="#FF4C4D" stopOpacity={0} />
+            </radialGradient>
+            <radialGradient
+                id="welcome-page-error-gradient-m"
+                cx={0}
+                cy={0}
+                r={1}
+                gradientTransform="scale(124)"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#FF4C4D" stopOpacity={0.1} />
+                <stop offset={1} stopColor="#FF4C4D" stopOpacity={0} />
+            </radialGradient>
+            <radialGradient
+                id="welcome-page-error-gradient-n"
+                cx={0}
+                cy={0}
+                r={1}
+                gradientTransform="scale(124)"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#FF4C4D" stopOpacity={0.1} />
+                <stop offset={1} stopColor="#FF4C4D" stopOpacity={0} />
+            </radialGradient>
+        </defs>
+    </svg>
+);
+
+const ErrorIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={16}
+        height={16}
+        viewBox="0 0 16 16"
+        fill="none"
+        {...props}
+    >
+        <path
+            fill="#FF4C4D"
+            fillRule="evenodd"
+            d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Z"
+            clipRule="evenodd"
+        />
+        <path
+            fill="#fff"
+            fillRule="evenodd"
+            d="M7 8a1 1 0 1 0 2 0V5a1 1 0 1 0-2 0v3Zm0 3a1 1 0 1 1 2 0 1 1 0 0 1-2 0Z"
+            clipRule="evenodd"
+        />
+    </svg>
+);