@purpurds/illustrative-icon 6.8.3 → 6.10.0

package/src/components/user-lock-offblack.tsx

@@ -1,15 +1,18 @@
 /**
  * ⚠️ WARNING ⚠️
- * This file is automatically generated do not edit it manually",
+ * This file is automatically generated, do not edit it manually",
  */
 
 import React from "react";
 
-import animationData from "../assets/user-lock-offblack.json";
-import { IllustrativeBaseIconProps, IllustrativeIcon } from "../illustrative-icon";
+import {
+  AnimatedIllustrativeBaseIconProps,
+  AnimatedIllustrativeIcon,
+} from "../animated-illustrative-icon";
+import animationData from "../assets/json/user-lock-offblack.json";
 
-export const IllustrativeIconUserLockOffblack = (props: IllustrativeBaseIconProps) => (
-  <IllustrativeIcon {...props} json={animationData} />
+export const IllustrativeIconUserLockOffblack = (props: AnimatedIllustrativeBaseIconProps) => (
+  <AnimatedIllustrativeIcon {...props} json={animationData} />
 );
 
 IllustrativeIconUserLockOffblack.displayName = "IllustrativeIconUserLockOffblack";

package/src/components/user-plus-duocolor.tsx

@@ -1,15 +1,18 @@
 /**
  * ⚠️ WARNING ⚠️
- * This file is automatically generated do not edit it manually",
+ * This file is automatically generated, do not edit it manually",
  */
 
 import React from "react";
 
-import animationData from "../assets/user-plus-duocolor.json";
-import { IllustrativeBaseIconProps, IllustrativeIcon } from "../illustrative-icon";
+import {
+  AnimatedIllustrativeBaseIconProps,
+  AnimatedIllustrativeIcon,
+} from "../animated-illustrative-icon";
+import animationData from "../assets/json/user-plus-duocolor.json";
 
-export const IllustrativeIconUserPlusDuocolor = (props: IllustrativeBaseIconProps) => (
-  <IllustrativeIcon {...props} json={animationData} />
+export const IllustrativeIconUserPlusDuocolor = (props: AnimatedIllustrativeBaseIconProps) => (
+  <AnimatedIllustrativeIcon {...props} json={animationData} />
 );
 
 IllustrativeIconUserPlusDuocolor.displayName = "IllustrativeIconUserPlusDuocolor";

package/src/components/user-plus-offblack.tsx

@@ -1,15 +1,18 @@
 /**
  * ⚠️ WARNING ⚠️
- * This file is automatically generated do not edit it manually",
+ * This file is automatically generated, do not edit it manually",
  */
 
 import React from "react";
 
-import animationData from "../assets/user-plus-offblack.json";
-import { IllustrativeBaseIconProps, IllustrativeIcon } from "../illustrative-icon";
+import {
+  AnimatedIllustrativeBaseIconProps,
+  AnimatedIllustrativeIcon,
+} from "../animated-illustrative-icon";
+import animationData from "../assets/json/user-plus-offblack.json";
 
-export const IllustrativeIconUserPlusOffblack = (props: IllustrativeBaseIconProps) => (
-  <IllustrativeIcon {...props} json={animationData} />
+export const IllustrativeIconUserPlusOffblack = (props: AnimatedIllustrativeBaseIconProps) => (
+  <AnimatedIllustrativeIcon {...props} json={animationData} />
 );
 
 IllustrativeIconUserPlusOffblack.displayName = "IllustrativeIconUserPlusOffblack";

package/src/components/user-settings-duocolor.tsx

@@ -1,15 +1,18 @@
 /**
  * ⚠️ WARNING ⚠️
- * This file is automatically generated do not edit it manually",
+ * This file is automatically generated, do not edit it manually",
  */
 
 import React from "react";
 
-import animationData from "../assets/user-settings-duocolor.json";
-import { IllustrativeBaseIconProps, IllustrativeIcon } from "../illustrative-icon";
+import {
+  AnimatedIllustrativeBaseIconProps,
+  AnimatedIllustrativeIcon,
+} from "../animated-illustrative-icon";
+import animationData from "../assets/json/user-settings-duocolor.json";
 
-export const IllustrativeIconUserSettingsDuocolor = (props: IllustrativeBaseIconProps) => (
-  <IllustrativeIcon {...props} json={animationData} />
+export const IllustrativeIconUserSettingsDuocolor = (props: AnimatedIllustrativeBaseIconProps) => (
+  <AnimatedIllustrativeIcon {...props} json={animationData} />
 );
 
 IllustrativeIconUserSettingsDuocolor.displayName = "IllustrativeIconUserSettingsDuocolor";

package/src/components/user-settings-offblack.tsx

@@ -1,15 +1,18 @@
 /**
  * ⚠️ WARNING ⚠️
- * This file is automatically generated do not edit it manually",
+ * This file is automatically generated, do not edit it manually",
  */
 
 import React from "react";
 
-import animationData from "../assets/user-settings-offblack.json";
-import { IllustrativeBaseIconProps, IllustrativeIcon } from "../illustrative-icon";
+import {
+  AnimatedIllustrativeBaseIconProps,
+  AnimatedIllustrativeIcon,
+} from "../animated-illustrative-icon";
+import animationData from "../assets/json/user-settings-offblack.json";
 
-export const IllustrativeIconUserSettingsOffblack = (props: IllustrativeBaseIconProps) => (
-  <IllustrativeIcon {...props} json={animationData} />
+export const IllustrativeIconUserSettingsOffblack = (props: AnimatedIllustrativeBaseIconProps) => (
+  <AnimatedIllustrativeIcon {...props} json={animationData} />
 );
 
 IllustrativeIconUserSettingsOffblack.displayName = "IllustrativeIconUserSettingsOffblack";

package/src/components/video-meeting-duocolor.tsx

@@ -0,0 +1,18 @@
+/**
+ * ⚠️ WARNING ⚠️
+ * This file is automatically generated, do not edit it manually",
+ */
+
+import React from "react";
+
+import { videoMeetingDuocolor } from "../assets/video-meeting-duocolor";
+import {
+  StaticIllustrativeBaseIconProps,
+  StaticIllustrativeIcon,
+} from "../static-illustrative-icon";
+
+export const IllustrativeIconVideoMeetingDuocolor = (props: StaticIllustrativeBaseIconProps) => (
+  <StaticIllustrativeIcon {...props} svg={videoMeetingDuocolor.svg} />
+);
+
+IllustrativeIconVideoMeetingDuocolor.displayName = "IllustrativeIconVideoMeetingDuocolor";

package/src/components/video-meeting-offblack.tsx

@@ -0,0 +1,18 @@
+/**
+ * ⚠️ WARNING ⚠️
+ * This file is automatically generated, do not edit it manually",
+ */
+
+import React from "react";
+
+import { videoMeetingOffblack } from "../assets/video-meeting-offblack";
+import {
+  StaticIllustrativeBaseIconProps,
+  StaticIllustrativeIcon,
+} from "../static-illustrative-icon";
+
+export const IllustrativeIconVideoMeetingOffblack = (props: StaticIllustrativeBaseIconProps) => (
+  <StaticIllustrativeIcon {...props} svg={videoMeetingOffblack.svg} />
+);
+
+IllustrativeIconVideoMeetingOffblack.displayName = "IllustrativeIconVideoMeetingOffblack";

package/src/components/video-surveillance-cloud-duocolor.tsx

@@ -0,0 +1,18 @@
+/**
+ * ⚠️ WARNING ⚠️
+ * This file is automatically generated, do not edit it manually",
+ */
+
+import React from "react";
+
+import { videoSurveillanceCloudDuocolor } from "../assets/video-surveillance-cloud-duocolor";
+import {
+  StaticIllustrativeBaseIconProps,
+  StaticIllustrativeIcon,
+} from "../static-illustrative-icon";
+
+export const IllustrativeIconVideoSurveillanceCloudDuocolor = (props: StaticIllustrativeBaseIconProps) => (
+  <StaticIllustrativeIcon {...props} svg={videoSurveillanceCloudDuocolor.svg} />
+);
+
+IllustrativeIconVideoSurveillanceCloudDuocolor.displayName = "IllustrativeIconVideoSurveillanceCloudDuocolor";

package/src/components/video-surveillance-cloud-offblack.tsx

@@ -0,0 +1,18 @@
+/**
+ * ⚠️ WARNING ⚠️
+ * This file is automatically generated, do not edit it manually",
+ */
+
+import React from "react";
+
+import { videoSurveillanceCloudOffblack } from "../assets/video-surveillance-cloud-offblack";
+import {
+  StaticIllustrativeBaseIconProps,
+  StaticIllustrativeIcon,
+} from "../static-illustrative-icon";
+
+export const IllustrativeIconVideoSurveillanceCloudOffblack = (props: StaticIllustrativeBaseIconProps) => (
+  <StaticIllustrativeIcon {...props} svg={videoSurveillanceCloudOffblack.svg} />
+);
+
+IllustrativeIconVideoSurveillanceCloudOffblack.displayName = "IllustrativeIconVideoSurveillanceCloudOffblack";

package/src/components/video-surveillance-duocolor.tsx

@@ -0,0 +1,18 @@
+/**
+ * ⚠️ WARNING ⚠️
+ * This file is automatically generated, do not edit it manually",
+ */
+
+import React from "react";
+
+import { videoSurveillanceDuocolor } from "../assets/video-surveillance-duocolor";
+import {
+  StaticIllustrativeBaseIconProps,
+  StaticIllustrativeIcon,
+} from "../static-illustrative-icon";
+
+export const IllustrativeIconVideoSurveillanceDuocolor = (props: StaticIllustrativeBaseIconProps) => (
+  <StaticIllustrativeIcon {...props} svg={videoSurveillanceDuocolor.svg} />
+);
+
+IllustrativeIconVideoSurveillanceDuocolor.displayName = "IllustrativeIconVideoSurveillanceDuocolor";

package/src/components/video-surveillance-offblack.tsx

@@ -0,0 +1,18 @@
+/**
+ * ⚠️ WARNING ⚠️
+ * This file is automatically generated, do not edit it manually",
+ */
+
+import React from "react";
+
+import { videoSurveillanceOffblack } from "../assets/video-surveillance-offblack";
+import {
+  StaticIllustrativeBaseIconProps,
+  StaticIllustrativeIcon,
+} from "../static-illustrative-icon";
+
+export const IllustrativeIconVideoSurveillanceOffblack = (props: StaticIllustrativeBaseIconProps) => (
+  <StaticIllustrativeIcon {...props} svg={videoSurveillanceOffblack.svg} />
+);
+
+IllustrativeIconVideoSurveillanceOffblack.displayName = "IllustrativeIconVideoSurveillanceOffblack";

package/src/components/workshop-duocolor.tsx

@@ -0,0 +1,18 @@
+/**
+ * ⚠️ WARNING ⚠️
+ * This file is automatically generated, do not edit it manually",
+ */
+
+import React from "react";
+
+import { workshopDuocolor } from "../assets/workshop-duocolor";
+import {
+  StaticIllustrativeBaseIconProps,
+  StaticIllustrativeIcon,
+} from "../static-illustrative-icon";
+
+export const IllustrativeIconWorkshopDuocolor = (props: StaticIllustrativeBaseIconProps) => (
+  <StaticIllustrativeIcon {...props} svg={workshopDuocolor.svg} />
+);
+
+IllustrativeIconWorkshopDuocolor.displayName = "IllustrativeIconWorkshopDuocolor";

package/src/components/workshop-offblack.tsx

@@ -0,0 +1,18 @@
+/**
+ * ⚠️ WARNING ⚠️
+ * This file is automatically generated, do not edit it manually",
+ */
+
+import React from "react";
+
+import { workshopOffblack } from "../assets/workshop-offblack";
+import {
+  StaticIllustrativeBaseIconProps,
+  StaticIllustrativeIcon,
+} from "../static-illustrative-icon";
+
+export const IllustrativeIconWorkshopOffblack = (props: StaticIllustrativeBaseIconProps) => (
+  <StaticIllustrativeIcon {...props} svg={workshopOffblack.svg} />
+);
+
+IllustrativeIconWorkshopOffblack.displayName = "IllustrativeIconWorkshopOffblack";

package/src/components/world-close-duocolor.tsx

@@ -0,0 +1,18 @@
+/**
+ * ⚠️ WARNING ⚠️
+ * This file is automatically generated, do not edit it manually",
+ */
+
+import React from "react";
+
+import { worldCloseDuocolor } from "../assets/world-close-duocolor";
+import {
+  StaticIllustrativeBaseIconProps,
+  StaticIllustrativeIcon,
+} from "../static-illustrative-icon";
+
+export const IllustrativeIconWorldCloseDuocolor = (props: StaticIllustrativeBaseIconProps) => (
+  <StaticIllustrativeIcon {...props} svg={worldCloseDuocolor.svg} />
+);
+
+IllustrativeIconWorldCloseDuocolor.displayName = "IllustrativeIconWorldCloseDuocolor";

package/src/components/world-close-offblack.tsx

@@ -0,0 +1,18 @@
+/**
+ * ⚠️ WARNING ⚠️
+ * This file is automatically generated, do not edit it manually",
+ */
+
+import React from "react";
+
+import { worldCloseOffblack } from "../assets/world-close-offblack";
+import {
+  StaticIllustrativeBaseIconProps,
+  StaticIllustrativeIcon,
+} from "../static-illustrative-icon";
+
+export const IllustrativeIconWorldCloseOffblack = (props: StaticIllustrativeBaseIconProps) => (
+  <StaticIllustrativeIcon {...props} svg={worldCloseOffblack.svg} />
+);
+
+IllustrativeIconWorldCloseOffblack.displayName = "IllustrativeIconWorldCloseOffblack";

package/src/components/world-duocolor.tsx

@@ -0,0 +1,18 @@
+/**
+ * ⚠️ WARNING ⚠️
+ * This file is automatically generated, do not edit it manually",
+ */
+
+import React from "react";
+
+import { worldDuocolor } from "../assets/world-duocolor";
+import {
+  StaticIllustrativeBaseIconProps,
+  StaticIllustrativeIcon,
+} from "../static-illustrative-icon";
+
+export const IllustrativeIconWorldDuocolor = (props: StaticIllustrativeBaseIconProps) => (
+  <StaticIllustrativeIcon {...props} svg={worldDuocolor.svg} />
+);
+
+IllustrativeIconWorldDuocolor.displayName = "IllustrativeIconWorldDuocolor";

package/src/components/world-offblack.tsx

@@ -0,0 +1,18 @@
+/**
+ * ⚠️ WARNING ⚠️
+ * This file is automatically generated, do not edit it manually",
+ */
+
+import React from "react";
+
+import { worldOffblack } from "../assets/world-offblack";
+import {
+  StaticIllustrativeBaseIconProps,
+  StaticIllustrativeIcon,
+} from "../static-illustrative-icon";
+
+export const IllustrativeIconWorldOffblack = (props: StaticIllustrativeBaseIconProps) => (
+  <StaticIllustrativeIcon {...props} svg={worldOffblack.svg} />
+);
+
+IllustrativeIconWorldOffblack.displayName = "IllustrativeIconWorldOffblack";

package/src/components/world-questionmark-duocolor.tsx

@@ -0,0 +1,18 @@
+/**
+ * ⚠️ WARNING ⚠️
+ * This file is automatically generated, do not edit it manually",
+ */
+
+import React from "react";
+
+import { worldQuestionmarkDuocolor } from "../assets/world-questionmark-duocolor";
+import {
+  StaticIllustrativeBaseIconProps,
+  StaticIllustrativeIcon,
+} from "../static-illustrative-icon";
+
+export const IllustrativeIconWorldQuestionmarkDuocolor = (props: StaticIllustrativeBaseIconProps) => (
+  <StaticIllustrativeIcon {...props} svg={worldQuestionmarkDuocolor.svg} />
+);
+
+IllustrativeIconWorldQuestionmarkDuocolor.displayName = "IllustrativeIconWorldQuestionmarkDuocolor";

package/src/components/world-questionmark-offblack.tsx

@@ -0,0 +1,18 @@
+/**
+ * ⚠️ WARNING ⚠️
+ * This file is automatically generated, do not edit it manually",
+ */
+
+import React from "react";
+
+import { worldQuestionmarkOffblack } from "../assets/world-questionmark-offblack";
+import {
+  StaticIllustrativeBaseIconProps,
+  StaticIllustrativeIcon,
+} from "../static-illustrative-icon";
+
+export const IllustrativeIconWorldQuestionmarkOffblack = (props: StaticIllustrativeBaseIconProps) => (
+  <StaticIllustrativeIcon {...props} svg={worldQuestionmarkOffblack.svg} />
+);
+
+IllustrativeIconWorldQuestionmarkOffblack.displayName = "IllustrativeIconWorldQuestionmarkOffblack";

package/src/illustrative-icon.module.scss

@@ -0,0 +1,8 @@
+.purpur-illustrative-icon {
+  &,
+  svg {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+}

package/src/illustrative-icon.stories.tsx

@@ -1,7 +1,8 @@
-import React, { useState } from "react";
+import React, { type ReactNode, useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import * as components from "./all-illustrative-icon-components";
+import * as animatedComponents from "./all-animated-illustrative-icon-components";
+import * as staticComponents from "./all-static-illustrative-icon-components";
 import { IllustrativeIconSearchFieldDuocolor } from "./components/search-field-duocolor";
 
 const meta = {
@@ -14,7 +15,13 @@ const meta = {
         type: "figma",
         url: "https://www.figma.com/design/pwHRVifi0TRqqn02OLJQrB/Illustrative-icons?node-id=0-1",
       },
-    ],
+    ],    
+  },
+  argTypes: {
+    delay: {
+      control: "number",
+      defaultValue: { summary: 0 },
+    },
   },
 } satisfies Meta<typeof IllustrativeIconSearchFieldDuocolor>;
 
@@ -25,11 +32,11 @@ export const Showcase: Story = {
   parameters: {},
   args: {
     autoplay: true,
+    delay: 0,
     allyTitle: "search field animation",
     "data-testid": "",
     className: "",
   },
-  argTypes: {},
 
   render: ({ ...args }) => (
     <div style={{ height: "200px", width: "200px" }}>
@@ -38,9 +45,57 @@ export const Showcase: Story = {
   ),
 };
 
-const RenderComponent = ({ index }: { index: number }) => {
+const IconWrapper = ({ children, name }: { children: ReactNode; name: string }) => (
+  <div
+    style={{
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 20,
+    }}
+  >
+    <div
+      style={{
+        display: "flex",
+        flexShrink: 0,
+        padding: 4,
+        background: "var(--purpur-color-background-primary)",
+        borderRadius: 4,
+        border: "1px solid var(--purpur-color-border-medium)",
+        boxShadow: "rgba(0, 0, 0, 0.10) 0 1px 3px 0",
+        width: "6rem",
+        height: "6rem",
+      }}
+    >
+      {children}
+    </div>
+    <p
+      style={{
+        margin: 0,
+        color: "var(--purpur-color-text-default)",
+        fontSize: 14,
+        lineHeight: 1.2,
+        fontFamily: "TeliaSans, Helvetica, Arial, 'Lucida Grande', sans-serif",
+      }}
+    >
+      {name.replace("IllustrativeIcon", "")}
+    </p>
+  </div>
+);
+
+const RenderStaticComponent = ({ index }: { index: number }) => {
+  const [name, Component] = Object.entries(staticComponents)[index];
+
+  return (
+    <IconWrapper name={name}>
+      <Component />
+    </IconWrapper>
+  );
+};
+
+const RenderAnimatedComponent = ({ index }: { index: number }) => {
   const [autoplay, setAutoplay] = useState(false);
-  const [name, Component] = Object.entries(components)[index];
+  const [name, Component] = Object.entries(animatedComponents)[index];
 
   return (
     <button
@@ -50,46 +105,14 @@ const RenderComponent = ({ index }: { index: number }) => {
         all: "unset",
       }}
     >
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "row",
-          alignItems: "center",
-          gap: 20,
-        }}
-      >
-        <div
-          style={{
-            display: "flex",
-            flexShrink: 0,
-            padding: 4,
-            background: "#fff",
-            borderRadius: 4,
-            border: "1px solid hsla(203, 50%, 30%, 0.15)",
-            boxShadow: "rgba(0, 0, 0, 0.10) 0 1px 3px 0",
-            width: "6rem",
-            height: "6rem",
-          }}
-        >
-          <Component autoplay={autoplay} onAnimationEnd={() => setAutoplay(false)} />
-        </div>
-        <p
-          style={{
-            margin: 0,
-            color: "var(--purpur-color-text-default)",
-            fontSize: 14,
-            lineHeight: 1.2,
-            fontFamily: "TeliaSans, Helvetica, Arial, 'Lucida Grande', sans-serif",
-          }}
-        >
-          {name.replace("IllustrativeIcon", "")}
-        </p>
-      </div>
+      <IconWrapper name={name}>
+        <Component autoplay={autoplay} onAnimationEnd={() => setAutoplay(false)} />
+      </IconWrapper>
     </button>
   );
 };
 
-export const AllComponents: Story = {
+export const AnimatedComponents: Story = {
   parameters: {
     docs: {
       description: {
@@ -115,8 +138,51 @@ export const AllComponents: Story = {
         gap: 20,
       }}
     >
-      {Object.entries(components).map(([name], index) => (
-        <RenderComponent key={name} index={index} />
+      {Object.entries(animatedComponents).map(([name], index) => (
+        <RenderAnimatedComponent key={name} index={index} />
+      ))}
+    </div>
+  ),
+};
+
+export const StaticComponents: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: `Use the icons in the following manner: \`<IllustrativeIconCloudUploadDuocolor />\` `,
+      },
+      source: {
+        code: `
+<>
+  <IllustrativeIconAirplaneAboveDuocolor />
+  <IllustrativeIconAirplaneAboveOffblack />
+  <IllustrativeIconAlertLampDuocolor />
+  ...
+</>`,
+      },
+    },
+  },
+  argTypes: {
+    delay: {
+      table: { disable: true },
+    },
+    autoplay: {
+      table: { disable: true },
+    },
+    onAnimationEnd: {
+      table: { disable: true },
+    },
+  },
+  render: () => (
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
+        gap: 20,
+      }}
+    >
+      {Object.entries(staticComponents).map(([name], index) => (
+        <RenderStaticComponent key={name} index={index} />
       ))}
     </div>
   ),

package/src/illustrative-icon.test.tsx

@@ -6,9 +6,9 @@ import { axe } from "vitest-axe";
 import * as axeMatchers from "vitest-axe/matchers";
 
 import "vitest-canvas-mock";
-import animationData from "./assets/404-error-duocolor.json";
-import { IllustrativeIcon } from "./illustrative-icon";
-
+import { AnimatedIllustrativeIcon } from "./animated-illustrative-icon";
+import animationData from "./assets/json/404-error-duocolor.json";
+import { StaticIllustrativeIcon } from "./static-illustrative-icon";
 expect.extend(matchers);
 expect.extend(axeMatchers);
 
@@ -23,18 +23,39 @@ Object.defineProperty(window, "matchMedia", {
   })),
 });
 
-describe("IllustrativeIcon", () => {
+describe("AnimatedIllustrativeIcon", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("basic test", () => {
+    render(<AnimatedIllustrativeIcon data-testid="illustrative-icon" json={animationData} />);
+    expect(screen.getByTestId("illustrative-icon")).toBeInTheDocument();
+  });
+
+  it("is accessible", async () => {
+    const { container } = render(<AnimatedIllustrativeIcon json={animationData} />);
+    const results = await axe(container);
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    expect(results).toHaveNoViolations();
+  });
+});
+
+describe("StaticIllustrativeIcon", () => {
+  const svg = '<path d="M10 10 H 90 V 90 H 10 L 10 10" />';
+
   afterEach(() => {
     cleanup();
   });
 
   it("basic test", () => {
-    render(<IllustrativeIcon data-testid="illustrative-icon" json={animationData} />);
+    render(<StaticIllustrativeIcon data-testid="illustrative-icon" svg={svg} />);
     expect(screen.getByTestId("illustrative-icon")).toBeInTheDocument();
   });
 
   it("is accessible", async () => {
-    const { container } = render(<IllustrativeIcon json={animationData} />);
+    const { container } = render(<StaticIllustrativeIcon svg={svg} />);
     const results = await axe(container);
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore