radiant-docs 0.1.7 → 0.1.8

package/template/src/components/endpoint/ResponseSnippets.astro

@@ -3,7 +3,11 @@ import * as Sampler from "openapi-sampler";
 import type { JSONSchema7 } from "json-schema";
 import type { OpenAPIV3, OpenAPIV3_1 } from "openapi-types";
 import { Icon } from "astro-icon/components";
-import { Code } from "astro-expressive-code/components";
+import CodeTabEdge from "../ui/CodeTabEdge.astro";
+import {
+  getCodeLineTokens,
+  normalizeCodeLanguageValue,
+} from "../../lib/code/code-block";
 
 interface Props {
   responses: OpenAPIV3.ResponsesObject | OpenAPIV3_1.ResponsesObject;
@@ -11,16 +15,14 @@ interface Props {
 
 const { responses } = Astro.props;
 
-// Extract and sample response data
-const responseData: Array<{
+const sampledResponses: Array<{
   statusCode: string;
-  description?: string;
-  example?: any;
+  description: string;
+  example?: unknown;
   contentType?: string;
 }> = [];
 
 Object.entries(responses).forEach(([statusCode, response]: [string, any]) => {
-  // Try to get application/json content first, fallback to first available content type
   const contentTypes = Object.keys(response.content || {});
   const contentType = response.content?.["application/json"]
     ? "application/json"
@@ -29,20 +31,20 @@ Object.entries(responses).forEach(([statusCode, response]: [string, any]) => {
   const mediaType = contentType ? response.content?.[contentType] : null;
   const schema = mediaType?.schema;
 
-  let example: any = undefined;
+  let example: unknown = undefined;
   if (schema) {
     try {
       example = Sampler.sample(schema as JSONSchema7, {
         skipReadOnly: false,
       });
-    } catch (err) {
-      console.error(`Failed to sample response ${statusCode}:`, err);
+    } catch (error) {
+      console.error(`Failed to sample response ${statusCode}:`, error);
     }
   }
 
-  responseData.push({
+  sampledResponses.push({
     statusCode,
-    description: response.description,
+    description: response.description ?? "",
     example,
     contentType,
   });
@@ -58,190 +60,314 @@ const statusCodeStyles = {
     dot: "bg-blue-700/70",
   },
   "4": {
-    badge: "bg-amber-50 text-amber-600/80 border-amber-700/10",
-    dot: "bg-amber-600/80",
+    badge: "bg-yellow-50 text-yellow-600/80 border-yellow-600/10",
+    dot: "bg-yellow-500/80",
   },
   "5": {
     badge: "bg-red-50 text-red-700/70 border-red-700/10",
     dot: "bg-red-700/70",
   },
-};
-
-const getStatusCodeClasses = (statusCode: string, type: "badge" | "dot") => {
-  const firstChar = statusCode[0];
-  return (
-    statusCodeStyles[firstChar as keyof typeof statusCodeStyles]?.[type] || ""
-  );
-};
-
-const initialStatusCodeClasses = responseData[0]
-  ? getStatusCodeClasses(responseData[0].statusCode, "badge")
-  : "";
-const initialStatusCodeDotClasses = responseData[0]
-  ? getStatusCodeClasses(responseData[0].statusCode, "dot")
-  : "";
+} as const;
+
+function getStatusCodeClass(statusCode: string, key: "badge" | "dot"): string {
+  const family = statusCode[0] as keyof typeof statusCodeStyles;
+  return statusCodeStyles[family]?.[key] ?? "";
+}
+
+function buildTokenStyle(token: {
+  color?: string;
+  bgColor?: string;
+  fontStyle?: number;
+  htmlStyle?: Record<string, string>;
+}): string | undefined {
+  const styleSegments: string[] = [];
+
+  if (token.color) styleSegments.push(`color:${token.color}`);
+  if (token.bgColor) styleSegments.push(`background-color:${token.bgColor}`);
+
+  const fontStyle = typeof token.fontStyle === "number" ? token.fontStyle : 0;
+  if ((fontStyle & 1) === 1) styleSegments.push("font-style:italic");
+  if ((fontStyle & 2) === 2) styleSegments.push("font-weight:600");
+  if ((fontStyle & 4) === 4) styleSegments.push("text-decoration:underline");
+
+  if (token.htmlStyle && typeof token.htmlStyle === "object") {
+    for (const [property, value] of Object.entries(token.htmlStyle)) {
+      styleSegments.push(`${property}:${value}`);
+    }
+  }
+
+  if (!styleSegments.length) return undefined;
+  return styleSegments.join(";");
+}
+
+function escapeHtml(value: string): string {
+  return value
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;");
+}
+
+function escapeAttribute(value: string): string {
+  return escapeHtml(value).replaceAll('"', "&quot;");
+}
+
+async function renderCodeLinesHtml(
+  code: string,
+  language: string,
+): Promise<string> {
+  const normalizedCode = code.replace(/\r\n?/g, "\n");
+  const { lines: tokenLines } = await getCodeLineTokens({
+    code: normalizedCode,
+    language: normalizeCodeLanguageValue(language),
+  });
+
+  const rawLines = normalizedCode.split("\n");
+  const normalizedRawLines = rawLines.length > 0 ? rawLines : [""];
+  const lineCount = Math.max(1, normalizedRawLines.length, tokenLines.length);
+  const normalizedTokenLines = Array.from({ length: lineCount }, (_, index) => {
+    return tokenLines[index] ?? [];
+  });
+
+  return normalizedTokenLines
+    .map((lineTokens, lineIndex) => {
+      const fallbackLineContent = normalizedRawLines[lineIndex] ?? "";
+      const tokenHtml =
+        lineTokens.length > 0
+          ? lineTokens
+              .map((token) => {
+                const tokenStyle = buildTokenStyle(token);
+                const tokenStyleAttribute = tokenStyle
+                  ? ` style="${escapeAttribute(tokenStyle)}"`
+                  : "";
+                return `<span${tokenStyleAttribute}>${escapeHtml(token.content)}</span>`;
+              })
+              .join("")
+          : fallbackLineContent.length > 0
+            ? escapeHtml(fallbackLineContent)
+            : "&nbsp;";
+
+      return `<span class="flex min-w-full"><span class="flex-1 whitespace-pre pr-4 pl-4">${tokenHtml}</span></span>`;
+    })
+    .join("");
+}
+
+const responseSnippetItems = await Promise.all(
+  sampledResponses.map(async (response) => {
+    const language = response.contentType?.includes("json")
+      ? "json"
+      : "plaintext";
+    const code =
+      response.example === undefined
+        ? "This response has no body data."
+        : typeof response.example === "string"
+          ? response.example
+          : JSON.stringify(response.example, null, 2);
+
+    return {
+      statusCode: response.statusCode,
+      description: response.description ?? "",
+      badgeClass: getStatusCodeClass(response.statusCode, "badge"),
+      dotClass: getStatusCodeClass(response.statusCode, "dot"),
+      code,
+      renderedCodeLinesHtml: await renderCodeLinesHtml(code, language),
+    };
+  }),
+);
+
+if (responseSnippetItems.length === 0) {
+  const fallbackCode = "This endpoint does not define response samples.";
+  responseSnippetItems.push({
+    statusCode: "200",
+    description: "Response",
+    badgeClass: getStatusCodeClass("200", "badge"),
+    dotClass: getStatusCodeClass("200", "dot"),
+    code: fallbackCode,
+    renderedCodeLinesHtml: await renderCodeLinesHtml(fallbackCode, "plaintext"),
+  });
+}
+
+const clientResponses = responseSnippetItems.map((item) => ({
+  statusCode: item.statusCode,
+  description: item.description,
+  badgeClass: item.badgeClass,
+  dotClass: item.dotClass,
+  code: item.code,
+}));
+const responsesData = JSON.stringify(clientResponses).replaceAll("`", "\\`");
+const firstResponse = responseSnippetItems[0];
+const hasMultipleResponses = responseSnippetItems.length > 1;
 ---
 
 <div
   x-data={`{
-    responses: ${JSON.stringify(responseData)},
+    snippets: ${responsesData},
     selected: 0,
+    hasMultiple: ${hasMultipleResponses ? "true" : "false"},
+    copied: false,
+    pillLeft: 0,
+    pillWidth: 0,
+    pillVisible: false,
+    tabSyncHandler: null,
+    copyTimeoutId: null,
+    init() {
+      if (!this.hasMultiple) return;
+      const sync = () => this.syncPill();
+      this.tabSyncHandler = sync;
+      this.$nextTick(() => {
+        this.syncPill();
+        this.$refs.tabList?.addEventListener("scroll", sync, {
+          passive: true,
+        });
+        window.addEventListener("resize", sync);
+      });
+    },
+    syncPill() {
+      if (!this.hasMultiple) return;
+      const tabs = this.$refs.tabList;
+      if (!tabs) return;
+      const activeTab = tabs.querySelector(
+        '[data-rd-snippet-tab="' + this.selected + '"]',
+      );
+      if (!activeTab) {
+        this.pillVisible = false;
+        return;
+      }
+      const tabsRect = tabs.getBoundingClientRect();
+      const activeRect = activeTab.getBoundingClientRect();
+      this.pillLeft = activeRect.left - tabsRect.left + tabs.scrollLeft;
+      this.pillWidth = activeRect.width;
+      this.pillVisible = true;
+    },
     select(index) {
       this.selected = index;
-      this.$refs.button?.focus();
-      this.close();
+      this.$nextTick(() => {
+        this.syncPill();
+        window.dispatchEvent(new CustomEvent("rd:snippet-content-change"));
+      });
     },
-    close(focusAfter) {
-      if (!this.open) return;
-      this.open = false;
-      focusAfter?.focus();
+    async copySelected() {
+      const snippet = this.snippets[this.selected];
+      if (!snippet) return;
+      if (!navigator?.clipboard?.writeText) {
+        this.copied = false;
+        return;
+      }
+      try {
+        await navigator.clipboard.writeText(snippet.code ?? "");
+        this.copied = true;
+        if (this.copyTimeoutId) window.clearTimeout(this.copyTimeoutId);
+        this.copyTimeoutId = window.setTimeout(() => {
+          this.copied = false;
+          this.copyTimeoutId = null;
+        }, 1200);
+      } catch {
+        this.copied = false;
+      }
     }
   }`}
-  class="response-code-snippets bg-neutral-100 rounded-[14px] border border-neutral-200 shadow-xs. p-[3px] shadow-[inset_0px_0.5px_2px_2px_rgba(0,0,0,0.01)]. inset-shadow-xs"
+  class="response-code-snippets h-full min-h-0 w-full min-w-0"
 >
-  <div class="flex justify-between items-center">
+  <div class="group/prose-code not-prose relative h-full min-h-0 w-full max-w-full min-w-0">
     <div
-      class="flex-1 min-w-0 flex items-center font-medium ml-2 text-neutral-700 text-sm"
+      class="flex h-full min-h-0 w-full max-w-full min-w-0 flex-col overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-xs"
     >
-      <span
-        class:list={[
-          "shrink-0 text-xs uppercase font-semibold px-1.5 border py-px rounded-md mr-1.5",
-          initialStatusCodeClasses,
-        ]}
-        x-bind:class="{
-            'bg-green-50 text-green-700/70 border-green-700/10': responses[selected].statusCode[0] === '2',
-            'bg-blue-50 text-blue-700/70 border-blue-700/10': responses[selected].statusCode[0] === '3',
-            'bg-amber-50 text-amber-600/80 border-amber-700/10': responses[selected].statusCode[0] === '4',
-            'bg-red-50 text-red-700/70 border-red-700/10': responses[selected].statusCode[0] === '5'
-          }"
-        x-text="responses[selected].statusCode"
-        set:html={responseData[0].statusCode}
-      />
-      <span
-        class="truncate"
-        x-text="responses[selected].description"
-        set:html={responseData[0].description}
-      />
-    </div>
-    <div
-      x-data="{
-    open: false,
-    toggle() {
-        if (this.open) {
-            return this.close()
-        }
+      <div
+        class="flex items-center justify-between gap-2 border-b border-neutral-200 rounded-t-xl bg-neutral-50 inset-shadow-sm inset-shadow-neutral-100/80"
+      >
+        {
+          hasMultipleResponses ? (
+            <div class="min-w-0 flex-1 overflow-hidden rounded-t-xl">
+              <div
+                x-ref="tabList"
+                class="relative flex min-w-0 items-end gap-1 overflow-x-auto px-1 pr-8 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+              >
+                <div
+                  aria-hidden="true"
+                  class="pointer-events-none absolute top-1/2 z-0 h-[28px] -translate-y-1/2 rounded-lg border-[0.5px] border-neutral-200 bg-white shadow-xs transition-[left,width,opacity] duration-200 ease-out"
+                  x-bind:class="pillVisible ? 'opacity-100' : 'opacity-0'"
+                  x-bind:style="'left:' + pillLeft + 'px;width:' + pillWidth + 'px;'"
+                />
 
-        this.$refs.button.focus()
+                <template
+                  x-for="(snippet, index) in snippets"
+                  :key="snippet.statusCode + index"
+                >
+                  <button
+                    type="button"
+                    x-bind:data-rd-snippet-tab="index"
+                    x-on:click="select(index)"
+                    class="relative z-10 inline-flex h-9 items-center gap-2 border-0 bg-transparent px-3 py-1.5 text-xs font-medium transition-colors duration-150 focus:outline-none focus-visible:outline-none cursor-pointer"
+                    x-bind:class="selected === index ? 'text-neutral-900' : 'text-neutral-600'"
+                  >
+                    <span
+                      class="size-[7px] shrink-0 rounded-full transition-opacity duration-150"
+                      x-bind:class="(selected === index ? 'opacity-100 ' : 'opacity-70 ') + snippet.dotClass"></span>
+                    <span class="whitespace-pre leading-none" x-text="snippet.statusCode"></span>
+                  </button>
+                </template>
+              </div>
+            </div>
+          ) : (
+            <div class="min-w-0 flex-1">
+              <div class="relative h-9 w-fit max-w-full rounded-tl-xl bg-white">
+                <div class="absolute inset-x-0 -bottom-px h-px bg-white"></div>
+                <CodeTabEdge
+                  className="pointer-events-none absolute -top-px left-full z-10 h-[calc(100%+2px)]"
+                />
 
-        this.open = true
-    },
-    close(focusAfter) {
-        if (! this.open) return
-
-        this.open = false
+                <div class="relative z-20 inline-flex h-9 max-w-full items-center gap-2 pl-5 pr-3 py-1.5 text-xs font-medium text-neutral-700">
+                  <span
+                    class="size-[7px] shrink-0 rounded-full"
+                    class:list={[firstResponse.dotClass]}></span>
+                  <span class="truncate leading-none">{firstResponse.statusCode}</span>
+                </div>
+              </div>
+            </div>
+          )
+        }
 
-        focusAfter && focusAfter.focus()
-    }
-}"
-      x-on:keydown.escape.prevent.stop="close($refs.button)"
-      x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
-      x-id="['dropdown-button']"
-      class="shrink-0 relative max-w-24 w-full"
-    >
-      <button
-        x-ref="button"
-        x-on:click="toggle()"
-        :aria-expanded="open"
-        :aria-controls="$id('dropdown-button')"
-        type="button"
-        class="flex items-center justify-between px-3 pt-2 pb-1.5 relative border-x border-t border-neutral-200/70 rounded-t-xl w-full text-sm font-medium bg-white shadow-[-1px_0px_2px_0px_rgba(0,0,0,0.01)]. shadow-sm cursor-pointer after:absolute after:-bottom-[1.5px] after:inset-x-0 after:z-10 after:h-[3px] after:bg-white"
-      >
-        <span class="flex items-center gap-2">
-          <span
-            class:list={["size-1.5 rounded-full", initialStatusCodeDotClasses]}
-            x-bind:class="{
-            'bg-green-700/70': responses[selected].statusCode[0] === '2',
-            'bg-blue-700/70': responses[selected].statusCode[0] === '3',
-            'bg-amber-600/80': responses[selected].statusCode[0] === '4',
-            'bg-red-700/70': responses[selected].statusCode[0] === '5'
-          }"
-          ></span>
-          <span
-            x-text="responses[selected].statusCode"
-            set:html={responseData[0].statusCode}
+        <div class="relative h-9 w-5 shrink-0 rounded-tr-xl bg-white">
+          <div class="absolute inset-x-0 -bottom-px h-px bg-white"></div>
+          <CodeTabEdge
+            className="pointer-events-none absolute -top-px right-full z-10 h-[calc(100%+2px)] rotate-y-180"
           />
-        </span>
-        <Icon name="lucide:chevrons-up-down" class="ml-auto." />
-      </button>
-      <!-- Panel -->
-      <ul
-        x-ref="panel"
-        x-show="open"
-        x-transition.origin.top.left
-        x-on:click.outside="close($refs.button)"
-        :id="$id('dropdown-button')"
-        x-cloak
-        role="menu"
-        class="absolute top-full right-2 min-w-28 rounded-lg shadow-xl mt-2 z-10 origin-top-right bg-white py-0.5 outline-none border border-neutral-200"
-      >
-        <template
-          x-for="(response, index) in responses"
-          :key="response.statusCode"
-        >
-          <li role="menuitem">
-            <button
-              x-on:click="select(index)"
-              type="button"
-              class="w-full text-left px-3 py-2 text-sm text-neutral-700 rounded-md transition-colors flex items-center gap-2 relative before:absolute before:inset-x-1 before:inset-y-0.5 before:-z-10 before:rounded-md before:duration-150 cursor-pointer"
-              x-bind:class="index === selected ? 'before:bg-neutral-200/50 text-neutral-900' : 'hover:before:bg-neutral-100/70'"
-            >
-              <span
-                class="size-1.5 rounded-full"
-                x-bind:class="{
-                'bg-green-700/70': response.statusCode[0] === '2',
-                'bg-blue-700/70': response.statusCode[0] === '3',
-                'bg-amber-600/80': response.statusCode[0] === '4',
-                'bg-red-700/70': response.statusCode[0] === '5'
-              }"
-              >
-              </span>
-              <span x-text="response.statusCode"></span>
-            </button>
-          </li>
-        </template>
-      </ul>
-    </div>
-  </div>
-  {
-    responseData.map((response, index) => (
-      <div
-        {...(index !== 0 ? { "x-cloak": true } : {})}
-        x-show={`selected === ${index}`}
-        data-snippet-index={index}
-      >
-        <Code
-          code={
-            JSON.stringify(response.example, null, 2) ||
-            "This response has no body data."
+          <button
+            x-on:click="copySelected()"
+            type="button"
+            class="absolute right-2 top-1/2 z-20 inline-flex size-7 -translate-y-1/2 appearance-none items-center justify-center rounded-md border-0 bg-transparent text-neutral-500/80 shadow-none outline-none ring-0 transition-colors duration-150 hover:bg-neutral-50 hover:text-neutral-600 focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 cursor-pointer"
+            aria-label="Copy code"
+          >
+            <Icon
+              name="lucide:copy"
+              class="size-3.5 origin-center transition-all duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform motion-reduce:transition-none"
+              x-bind:class="copied ? 'scale-50 opacity-0 -rotate-6' : 'scale-100 opacity-100 rotate-0'"
+              aria-hidden="true"
+            />
+            <Icon
+              name="lucide:check"
+              class="absolute size-3.5 stroke-3 origin-center text-green-700/80 transition-all duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform motion-reduce:transition-none"
+              x-bind:class="copied ? 'scale-110 opacity-100 rotate-0' : 'scale-25 opacity-0 rotate-6'"
+              aria-hidden="true"
+            />
+          </button>
+        </div>
+      </div>
+
+      <div class="relative min-h-0 min-w-0 flex-1 overflow-hidden rounded-b-xl">
+        <div class="relative h-full overflow-auto [scrollbar-width:thin] [scrollbar-color:var(--color-neutral-300)_transparent] [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-neutral-300/70 hover:[&::-webkit-scrollbar-thumb]:bg-neutral-300/90">
+          <div class="pointer-events-none sticky top-0 z-10 -mb-4 h-4 w-full bg-linear-to-b from-white to-transparent"></div>
+          {
+            responseSnippetItems.map((snippet, index) => (
+              <pre
+                class="relative m-0 min-w-full bg-white p-0 text-[13px] leading-6"
+                x-show={`selected === ${index}`}
+                {...(index !== 0 ? { "x-cloak": true } : {})}
+                data-snippet-index={index}
+              ><code class="block min-w-full py-2.5 font-mono text-neutral-800"><Fragment set:html={snippet.renderedCodeLinesHtml} /></code></pre>
+            ))
           }
-          lang="json"
-          frame="code"
-        />
+        </div>
       </div>
-    ))
-  }
+    </div>
+  </div>
 </div>
-
-<style>
-  @reference "../../styles/global.css";
-  :global(.response-code-snippets .expressive-code .frame) {
-    @apply shadow-sm rounded-2xl!;
-  }
-  :global(.response-code-snippets .expressive-code pre) {
-    @apply rounded-xl! rounded-tr-none! border-neutral-200/70!;
-  }
-
-  :global(.response-code-snippets .expressive-code pre code) {
-    @apply max-h-64 overflow-y-auto;
-  }
-</style>

package/template/src/components/sidebar/SidebarEndpointLink.astro

@@ -33,7 +33,7 @@ const isActive = currentPath === targetPath;
 <a
   href={href}
   class:list={[
-    "flex items-center px-2 py-[7px] text-sm relative z-0 font-[450] before:-z-10 before:absolute before:inset-x-0 before:inset-y-px before:rounded-md before:duration-150",
+    "flex items-center px-2 py-[7px] text-sm relative z-0 before:-z-10 before:absolute before:inset-x-0 before:inset-y-px before:rounded-md before:duration-150",
     isActive
       ? "before:bg-neutral-200/50 dark:before:bg-neutral-800 text-neutral-900 dark:text-neutral-200"
       : "text-neutral-600 dark:text-neutral-400 hover:before:bg-neutral-100/70 dark:hover:before:bg-neutral-800/50 hover:text-neutral-900 dark:hover:text-neutral-300",

package/template/src/components/ui/CodeLanguageIcon.astro

@@ -0,0 +1,19 @@
+---
+import { getLanguageIconSvg } from "../../lib/code/code-block";
+
+interface Props {
+  language: string;
+  fileName: string;
+  className?: string;
+}
+
+const { language, fileName, className = "" } = Astro.props;
+
+const iconSvg = await getLanguageIconSvg({
+  language,
+  fileName,
+  className,
+});
+---
+
+<Fragment set:html={iconSvg} />

package/template/src/components/ui/CodeTabEdge.astro

@@ -0,0 +1,79 @@
+---
+interface Props {
+  className?: string;
+}
+
+const { className = "" } = Astro.props;
+
+const idPrefix = `code_group_tab_edge_${Math.random().toString(36).slice(2, 9)}`;
+const mask0Id = `code_group_tab_edge_mask0_${idPrefix}`;
+const path1OutsideMaskId = `code_group_tab_edge_path_1_outside_1_${idPrefix}`;
+const path3OutsideMaskId = `code_group_tab_edge_path_3_outside_2_${idPrefix}`;
+---
+
+<svg
+  width="60"
+  height="42"
+  viewBox="0 0 60 42"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class:list={["block", className]}
+  preserveAspectRatio="none"
+  aria-hidden="true"
+  data-pagefind-ignore
+>
+  <mask
+    id={mask0Id}
+    maskUnits="userSpaceOnUse"
+    x="0"
+    y="-1"
+    width="60"
+    height="43"
+    style="mask-type:alpha"
+  >
+    <mask
+      id={path1OutsideMaskId}
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="-1"
+      width="60"
+      height="43"
+      fill="black"
+    >
+      <rect fill="white" y="-1" width="60" height="43"></rect>
+      <path
+        d="M1 0L8.0783 0C15.772 0 22.7836 4.41324 26.111 11.3501L34.8889 29.6498C38.2164 36.5868 45.228 41 52.9217 41H60H1L1 0Z"
+      ></path>
+    </mask>
+    <path
+      d="M1 0L8.0783 0C15.772 0 22.7836 4.41324 26.111 11.3501L34.8889 29.6498C38.2164 36.5868 45.228 41 52.9217 41H60H1L1 0Z"
+      fill="white"></path>
+    <path
+      d="M1 0V-1H0V0L1 0ZM1 41H0V42H1V41ZM34.8889 29.6498L33.9873 30.0823L34.8889 29.6498ZM26.111 11.3501L27.0127 10.9177L26.111 11.3501ZM1 1H8.0783V-1H1V1ZM60 40H1V42H60V40ZM2 41V0L0 0L0 41H2ZM25.2094 11.7826L33.9873 30.0823L35.7906 29.2174L27.0127 10.9177L25.2094 11.7826ZM52.9217 42H60V40H52.9217V42ZM33.9873 30.0823C37.4811 37.3661 44.8433 42 52.9217 42V40C45.6127 40 38.9517 35.8074 35.7906 29.2174L33.9873 30.0823ZM8.0783 1C15.3873 1 22.0483 5.19257 25.2094 11.7826L27.0127 10.9177C23.5188 3.6339 16.1567 -1 8.0783 -1V1Z"
+      fill="black"
+      mask={`url(#${path1OutsideMaskId})`}></path>
+  </mask>
+  <g mask={`url(#${mask0Id})`}>
+    <mask
+      id={path3OutsideMaskId}
+      maskUnits="userSpaceOnUse"
+      x="-1"
+      y="0.0244141"
+      width="60"
+      height="43"
+      fill="black"
+    >
+      <rect fill="white" x="-1" y="0.0244141" width="60" height="43"></rect>
+      <path
+        d="M0 1.02441H7.0783C14.772 1.02441 21.7836 5.43765 25.111 12.3746L33.8889 30.6743C37.2164 37.6112 44.228 42.0244 51.9217 42.0244H59H0L0 1.02441Z"
+      ></path>
+    </mask>
+    <path
+      d="M0 1.02441H7.0783C14.772 1.02441 21.7836 5.43765 25.111 12.3746L33.8889 30.6743C37.2164 37.6112 44.228 42.0244 51.9217 42.0244H59H0L0 1.02441Z"
+      fill="#ffffff"></path>
+    <path
+      d="M0 1.02441L0 0.0244141H-1V1.02441H0ZM0 42.0244H-1V43.0244H0L0 42.0244ZM33.8889 30.6743L32.9873 31.1068L33.8889 30.6743ZM25.111 12.3746L26.0127 11.9421L25.111 12.3746ZM0 2.02441H7.0783V0.0244141H0L0 2.02441ZM59 41.0244H0L0 43.0244H59V41.0244ZM1 42.0244L1 1.02441H-1L-1 42.0244H1ZM24.2094 12.8071L32.9873 31.1068L34.7906 30.2418L26.0127 11.9421L24.2094 12.8071ZM51.9217 43.0244H59V41.0244H51.9217V43.0244ZM32.9873 31.1068C36.4811 38.3905 43.8433 43.0244 51.9217 43.0244V41.0244C44.6127 41.0244 37.9517 36.8318 34.7906 30.2418L32.9873 31.1068ZM7.0783 2.02441C14.3873 2.02441 21.0483 6.21699 24.2094 12.8071L26.0127 11.9421C22.5188 4.65831 15.1567 0.0244141 7.0783 0.0244141V2.02441Z"
+      fill="#e5e5e5"
+      mask={`url(#${path3OutsideMaskId})`}></path>
+  </g>
+</svg>