zudoku 0.0.0-f2c28ed → 0.0.0-f36627bd

package/src/app/main.css

@@ -1,102 +1,64 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@font-face {
-  font-family: Geist;
-  font-style: normal;
-  font-weight: 100;
-  font-display: swap;
-  src: url("https://cdn.zudoku.dev/geist/Geist-Thin.woff2") format("woff2");
-}
-
-@font-face {
-  font-family: Geist;
-  font-style: normal;
-  font-weight: 200;
-  font-display: swap;
-  src: url("https://cdn.zudoku.dev/geist/Geist-UltraLight.woff2")
-    format("woff2");
-}
-
-@font-face {
-  font-family: Geist;
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url("https://cdn.zudoku.dev/geist/Geist-Light.woff2") format("woff2");
-}
-
-@font-face {
-  font-family: Geist;
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("https://cdn.zudoku.dev/geist/Geist-Regular.woff2") format("woff2");
-}
-
-@font-face {
-  font-family: Geist;
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url("https://cdn.zudoku.dev/geist/Geist-Medium.woff2") format("woff2");
-}
-
-@font-face {
-  font-family: Geist;
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url("https://cdn.zudoku.dev/geist/Geist-SemiBold.woff2") format("woff2");
-}
-
-@font-face {
-  font-family: Geist;
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url("https://cdn.zudoku.dev/geist/Geist-Bold.woff2") format("woff2");
-}
-
-@font-face {
-  font-family: Geist;
-  font-style: normal;
-  font-weight: 800;
-  font-display: swap;
-  src: url("https://cdn.zudoku.dev/geist/Geist-Black.woff2") format("woff2");
-}
+/* @vite-plugin-inject defaultTheme */
+@import "tailwindcss" source("..");
+@import "tw-animate-css";
+
+/* @vite-plugin-inject main */
+
+@plugin "@tailwindcss/typography";
+@custom-variant dark (&:is(.dark *));
+
+@utility prose {
+  a {
+    @apply font-normal underline-offset-4 hover:text-primary;
+  }
+  blockquote {
+    @apply not-italic text-neutral-500/75 dark:text-neutral-400;
+    /* Disable adding quote marks to block-quotes: https://github.com/tailwindlabs/tailwindcss-typography/issues/66 */
+    p {
+      &:first-of-type::before,
+      &:last-of-type::after {
+        content: none;
+      }
+    }
+  }
+  hr {
+    @apply border-border;
+  }
+  code {
+    font-weight: 400;
+  }
+  code::before {
+    content: none;
+  }
+  code::after {
+    content: none;
+  }
 
-@font-face {
-  font-family: Geist;
-  font-style: normal;
-  font-weight: 900;
-  font-display: swap;
-  src: url("https://cdn.zudoku.dev/geist/Geist-UltraBlack.woff2")
-    format("woff2");
+  ol > li {
+    @apply my-2.5;
+  }
 }
 
 @layer base {
   :root {
     --top-header-height: 65px;
     --top-nav-height: 50px;
-    --banner-height: 40px;
+    --banner-height: 35px;
     --header-height: calc(
-      var(--top-header-height) + var(--top-nav-height) + var(--banner-height) -
-        /* borders */ 2px
+      var(--top-header-height) + var(--top-nav-height) + var(--banner-height)
     );
     --scroll-padding: calc(var(--header-height) + 10px);
-    --side-nav-width: theme("spacing.72");
-    --padding-content-top: theme("spacing.6");
-    --padding-content-bottom: theme("spacing.12");
-    --padding-nav-item: theme("spacing[2.5]");
+    --side-nav-width: --spacing(72);
+    --padding-content-top: --spacing(6);
+    --padding-content-bottom: --spacing(12);
+    --padding-nav-item: --spacing(2.5);
     --sidecar-grid-cols: 1fr minmax(200px, 260px);
     --scrollbar-width: calc(100vw - 100%);
   }
 
   html {
     /* This is to prevent layout jumping when the scrollbar appears/disappears */
-    @apply -me-[--scrollbar-width] scroll-pt-[--scroll-padding];
+    @apply -me-(--scrollbar-width) scroll-pt-(--scroll-padding);
     --dark: -1;
   }
 
@@ -109,6 +71,11 @@
     @apply h-full overscroll-none;
   }
 
+  ::view-transition-old(root),
+  ::view-transition-new(root) {
+    animation: none;
+  }
+
   details summary {
     @apply cursor-pointer;
   }
@@ -129,26 +96,25 @@
   }
 
   ::selection {
-    @apply bg-primary/100 text-primary-foreground;
+    @apply bg-primary text-primary-foreground;
   }
 
   .bg-primary::selection,
   .bg-primary ::selection {
-    background: theme(colors.background);
-    color: theme(colors.foreground);
+    background: var(--color-background);
+    color: var(--color-foreground);
   }
 
   .dark {
     color-scheme: dark;
   }
 
-  .prose.prose {
-    @apply prose-a:underline-offset-4 prose-a:font-normal hover:prose-a:text-primary;
-    @apply prose-blockquote:not-italic prose-blockquote:text-neutral-500/75 prose-blockquote:dark:text-neutral-400;
-    @apply prose-code:before:content-none prose-code:after:content-none prose-code:font-normal;
-    @apply prose-headings:prose-code:mx-2 prose-li:my-0.5;
-    @apply prose-hr:border-border;
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
 
+  .prose.prose {
     ul.contains-task-list {
       @apply list-none px-0;
       li {
@@ -160,9 +126,14 @@
   .shiki {
     counter-reset: line;
     @apply leading-normal;
+    background-color: var(--shiki-light-bg) !important;
+  }
+  .dark .shiki {
+    background-color: var(--shiki-dark-bg) !important;
   }
   .code-block .shiki {
-    @apply grid;
+    @apply grid grid-rows-1;
+    grid-auto-rows: 1lh;
   }
 
   .shiki,
@@ -173,8 +144,8 @@
     text-decoration: var(--shiki-light-text-decoration) !important;
   }
 
-  html.dark .shiki,
-  html.dark .shiki span {
+  .dark .shiki,
+  .dark .shiki span {
     color: var(--shiki-dark);
     font-style: var(--shiki-dark-font-style) !important;
     font-weight: var(--shiki-dark-font-weight) !important;
@@ -188,22 +159,30 @@
   }
 
   .shiki.not-inline .line {
-    @apply inline-flex items-baseline -mx-4 px-4 w-[calc(100%+2rem)];
-    --highlighted-bg: hsl(
-      from hsl(var(--muted)) h s calc(l + 4 * var(--dark)) / 50%
-    );
+    @apply block -mx-4 px-4;
+    width: calc(100% + --spacing(4));
+    --highlighted-bg: hsl(from var(--shiki-light-bg) h s calc(l - 6));
   }
+  .dark .shiki.not-inline .line {
+    --highlighted-bg: hsl(from var(--shiki-dark-bg) h s calc(l + 10));
+  }
+
   .shiki .line.highlighted {
-    @apply bg-[--highlighted-bg];
+    @apply bg-(--highlighted-bg) relative;
+  }
+
+  .shiki .line.highlighted::after {
+    @apply absolute left-0 top-0 bottom-0 right-auto translate-x-full content-[''];
+    border-left: 4px solid
+      hsl(from var(--highlighted-bg) h s calc(l + 4 * var(--dark)));
   }
 
   .shiki .highlighted-word {
-    @apply bg-[--highlighted-bg] px-0.5 rounded;
-    box-shadow: 0 0 0 4px var(--highlighted-bg);
+    @apply inline-block bg-(--highlighted-bg) px-0.5 rounded;
   }
 
   select {
-    @apply focus-visible:ring-primary focus-visible:ring-[1.5px] focus:outline-none;
+    @apply focus-visible:ring-primary focus-visible:ring-[1.5px] focus:outline-hidden;
   }
 
   .CollapsibleContent {
@@ -300,65 +279,9 @@
         50% calc(50% + var(--s) / 2 + var(--b) / 2) / calc(4 * var(--s))
         calc(var(--s) + var(--b)) repeat-x;
   }
-
-  /* Theme */
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 95%;
-    --input: 240 5.9% 90%;
-    --ring: 240 5.9% 10%;
-    --radius: 0.75rem;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-  }
-
-  .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-  }
 }
 
-@layer components {
+@layer utilities {
   .stepper > ol {
     --bullet-size: 1.75rem;
     --line-spacing: 0.25rem;
@@ -377,19 +300,27 @@
 
   /* Bullet with number */
   .stepper > ol > li::before {
-    @apply absolute start-0 flex items-center justify-center size-[--bullet-size];
+    @apply absolute start-0 flex items-center justify-center size-(--bullet-size);
     @apply bg-muted/80 border border-border text-muted-foreground text-[calc(var(--bullet-size)/2)] font-semibold rounded-full;
     content: counter(step-counter);
   }
 
   /* Vertical line */
   .stepper > ol > li::after {
-    @apply absolute content-[''] w-[2px] bg-border -translate-x-1/2 rtl:translate-x-1/2;
+    @apply absolute content-[''] w-[2px] bg-border -translate-x-1/2;
     inset-inline-start: calc(var(--bullet-size) / 2);
     top: calc(var(--bullet-size) + var(--line-spacing));
     height: calc(100% - var(--bullet-size) - (2 * var(--line-spacing)));
   }
 
+  /*
+    This can't be as `rtl:*` variant above, because it breaks the CSS minification. See:
+    https://github.com/tailwindlabs/tailwindcss/issues/16582
+  */
+  [dir="rtl"] .stepper > ol > li::after {
+    @apply translate-x-1/2;
+  }
+
   .stepper > ol > li > :first-child {
     @apply mt-0 pt-0;
     transform: translateY(calc((var(--bullet-size) - 1lh) / 2));

package/src/app/main.tsx

@@ -1,4 +1,3 @@
-import { type RouteObject } from "react-router";
 import { configuredApiKeysPlugin } from "virtual:zudoku-api-keys-plugin";
 import {
   configuredApiCatalogPlugins,
@@ -6,82 +5,63 @@ import {
 } from "virtual:zudoku-api-plugins";
 import { configuredAuthProvider } from "virtual:zudoku-auth";
 import { configuredCustomPagesPlugin } from "virtual:zudoku-custom-pages-plugin";
-import { configuredDocsPlugins } from "virtual:zudoku-docs-plugins";
+import { configuredDocsPlugin } from "virtual:zudoku-docs-plugin";
+import { configuredNavigation } from "virtual:zudoku-navigation";
 import { configuredRedirectPlugin } from "virtual:zudoku-redirect-plugin";
 import { configuredSearchPlugin } from "virtual:zudoku-search-plugin";
 import { registerShiki } from "virtual:zudoku-shiki-register";
-import { configuredSidebar } from "virtual:zudoku-sidebar";
+import type { RouteObject } from "react-router";
 import "virtual:zudoku-theme.css";
 import {
   BuildCheck,
   Layout,
+  Meta,
   RouteGuard,
   RouterError,
   StatusPage,
-  Zudoku,
-} from "zudoku/components";
+} from "zudoku/__internal";
+import { Zudoku } from "zudoku/components";
+import { Outlet } from "zudoku/router";
 import type { ZudokuConfig } from "../config/config.js";
-import type { ZudokuContextOptions } from "../lib/core/ZudokuContext.js";
 import { isNavigationPlugin } from "../lib/core/plugins.js";
+import type { ZudokuContextOptions } from "../lib/core/ZudokuContext.js";
 import { highlighter } from "../lib/shiki.js";
 import { ZuploEnv } from "./env.js";
+import "./main.css";
 
 await registerShiki(highlighter);
 
 export const convertZudokuConfigToOptions = (
   config: ZudokuConfig,
 ): ZudokuContextOptions => {
-  const fallbackLogoLight =
-    config.page?.logoUrl ??
-    "https://cdn.zudoku.dev/logos/zudoku-logo-full-light.svg";
-  const fallbackLogoDark =
-    config.page?.logoUrl ??
-    "https://cdn.zudoku.dev/logos/zudoku-logo-full-dark.svg";
-
-  const isUsingFallback =
-    !config.page?.logoUrl &&
-    !config.page?.logo?.src?.light &&
-    !config.page?.logo?.src?.dark;
-
   return {
     basePath: config.basePath,
     canonicalUrlOrigin: config.canonicalUrlOrigin,
     protectedRoutes: config.protectedRoutes,
-    page: {
-      ...config.page,
+    site: {
+      ...config.site,
       showPoweredBy:
         ZuploEnv.buildConfig?.entitlements.devPortalZuploBranding ??
-        config.page?.showPoweredBy,
-      logo: {
-        ...(isUsingFallback ? { width: "130px" } : {}),
-        ...config.page?.logo,
-        src: {
-          light: config.page?.logo?.src?.light ?? fallbackLogoLight,
-          dark: config.page?.logo?.src?.dark ?? fallbackLogoDark,
-        },
-      },
+        config.site?.showPoweredBy,
+      logo: config.site?.logo,
     },
-    slotlets: config.UNSAFE_slotlets,
+    slots: config.slots,
     metadata: {
       favicon: "https://cdn.zudoku.dev/logos/favicon.svg",
       title: "%s - Zudoku",
       ...config.metadata,
     },
-    sidebars: configuredSidebar,
-    topNavigation: config.topNavigation,
+    navigation: configuredNavigation,
     mdx: config.mdx,
-    authentication: configuredAuthProvider,
     plugins: [
-      ...configuredDocsPlugins,
+      ...(configuredAuthProvider ? [configuredAuthProvider] : []),
+      ...(configuredDocsPlugin ? [configuredDocsPlugin] : []),
       ...configuredApiPlugins,
       ...(configuredSearchPlugin ? [configuredSearchPlugin] : []),
       ...(configuredRedirectPlugin ? [configuredRedirectPlugin] : []),
       ...(configuredApiKeysPlugin ? [configuredApiKeysPlugin] : []),
       ...(configuredCustomPagesPlugin ? [configuredCustomPagesPlugin] : []),
       ...configuredApiCatalogPlugins,
-      ...(configuredAuthProvider?.getAuthenticationPlugin
-        ? [configuredAuthProvider.getAuthenticationPlugin()]
-        : []),
       ...(config.plugins ?? []),
     ],
     syntaxHighlighting: {
@@ -93,35 +73,26 @@ export const convertZudokuConfigToOptions = (
 
 export const getRoutesByOptions = (
   options: ZudokuContextOptions,
-  enableStatusPages = false,
+  enableStatusPages = true,
 ) => {
   const allPlugins = [
     ...(options.plugins ?? []),
-    ...(options.authentication?.getAuthenticationPlugin
-      ? [options.authentication.getAuthenticationPlugin()]
-      : []),
+    ...(options.authentication ? [options.authentication] : []),
   ];
 
   const routes = allPlugins
     .flatMap((plugin) => (isNavigationPlugin(plugin) ? plugin.getRoutes() : []))
     .concat(
       enableStatusPages
-        ? [400, 403, 404, 405, 414, 416, 500, 501, 502, 503, 504].map(
-            (statusCode) => ({
-              path: `/.static/${statusCode}`,
-              element: <StatusPage statusCode={statusCode} />,
-            }),
-          )
+        ? [400, 404, 500].map((statusCode) => ({
+            path: `/${statusCode}`,
+            element: <StatusPage statusCode={statusCode} />,
+          }))
         : [],
     )
-    .concat([
-      {
-        path: "*",
-        loader: () => {
-          throw new Response("Not Found", { status: 404 });
-        },
-      },
-    ]);
+    .concat([{ path: "*", element: <StatusPage statusCode={404} /> }]);
+
+  // @TODO Detect conflicts in routes and log warning
 
   return routes;
 };
@@ -138,22 +109,33 @@ export const getRoutesByConfig = (config: ZudokuConfig): RouteObject[] => {
       element: (
         <Zudoku {...options}>
           <BuildCheck
-            buildId={
-              import.meta.env.IS_ZUPLO && import.meta.env.ZUPLO_BUILD_ID
-                ? import.meta.env.ZUPLO_BUILD_ID
-                : undefined
-            }
+            buildId={import.meta.env.ZUPLO_BUILD_ID}
+            environmentType={import.meta.env.ZUPLO_ENVIRONMENT_TYPE}
           />
-          <Layout />
+          <Outlet />
         </Zudoku>
       ),
+      hydrateFallbackElement: <div>Loading...</div>,
       children: [
         {
-          element: <RouteGuard />,
+          element: (
+            <Meta>
+              <RouteGuard />
+            </Meta>
+          ),
           errorElement: <RouterError />,
-          children: routes,
+          children: routes.map((r) =>
+            r.handle?.layout === "none" ? r : wrapWithLayout(r),
+          ),
         },
       ],
     },
   ];
 };
+
+const wrapWithLayout = (route: RouteObject) => {
+  return {
+    element: <Layout />,
+    children: [route],
+  };
+};

package/src/app/standalone.tsx

@@ -1,6 +1,6 @@
 import { createRoot } from "react-dom/client";
 import { createBrowserRouter } from "react-router";
-import { Bootstrap } from "zudoku/components";
+import { Bootstrap } from "zudoku/__internal";
 import type { ZudokuConfig } from "../config/validators/validate.js";
 import { openApiPlugin } from "../lib/plugins/openapi/index.js";
 import "../lib/util/logInit.js";
@@ -13,14 +13,19 @@ if (!root) {
 }
 
 const apiUrl = root.getAttribute("data-api-url");
-const pageTitle = document.getElementsByTagName("title")[0]!.innerText;
+
+if (!apiUrl) {
+  throw new Error("No api url found");
+}
+
+const title = document.getElementsByTagName("title")[0]?.innerText;
 const logoUrl = root.getAttribute("data-logo-url");
 
 // IMPORTANT: This component must not contain tailwind classes
 // This directory is not processed by the tailwind plugin
 
 const config = {
-  page: {
+  site: {
     logo: logoUrl
       ? {
           src: {
@@ -29,20 +34,21 @@ const config = {
           },
         }
       : undefined,
-    pageTitle,
+    title,
   },
-  topNavigation: [
+  navigation: [
     {
-      id: "/",
+      type: "link",
       label: "API Reference",
+      to: "/",
     },
   ],
   plugins: [
     // Using the plugin directly because there's no config file to load in the virtual plugins
     openApiPlugin({
       type: "url",
-      input: apiUrl!,
-      navigationId: "/",
+      input: apiUrl,
+      path: "/",
     }),
   ],
 } satisfies ZudokuConfig;

package/src/lib/MissingIcon.tsx

@@ -1,4 +1,4 @@
-import { CircleDashed, LucideProps } from "lucide-react";
+import { CircleDashed, type LucideProps } from "lucide-react";
 import {
   Tooltip,
   TooltipContent,

package/src/lib/assets/language-icons/csharp.tsx

@@ -0,0 +1,35 @@
+import type { SVGProps } from "react";
+
+const CsharpIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <title>C#</title>
+    <path
+      d="M29 10.232a2.387 2.387 0 0 0-.318-1.244 2.451 2.451 0 0 0-.936-.879q-5.194-2.868-10.393-5.733a2.642 2.642 0 0 0-2.763.024c-1.378.779-8.275 4.565-10.331 5.706A2.287 2.287 0 0 0 3 10.231V21.77a2.4 2.4 0 0 0 .3 1.22 2.434 2.434 0 0 0 .954.9c2.056 1.141 8.954 4.927 10.332 5.706a2.642 2.642 0 0 0 2.763.026q5.19-2.871 10.386-5.733a2.444 2.444 0 0 0 .955-.9 2.4 2.4 0 0 0 .3-1.22V10.232"
+      fill="#4e994a"
+    />
+    <path
+      d="M28.549 23.171a2.126 2.126 0 0 0 .147-.182 2.4 2.4 0 0 0 .3-1.22V10.232a2.387 2.387 0 0 0-.318-1.244c-.036-.059-.089-.105-.13-.16L16 16Z"
+      fill="#358230"
+    />
+    <path
+      d="M28.549 23.171 16 16 3.451 23.171a2.435 2.435 0 0 0 .809.72c2.056 1.141 8.954 4.927 10.332 5.706a2.642 2.642 0 0 0 2.763.026q5.19-2.871 10.386-5.733a2.43 2.43 0 0 0 .808-.719Z"
+      fill="#1a7515"
+    />
+    <path
+      d="M19.6 18.02a4.121 4.121 0 1 1-.027-4.087l3.615-2.073A8.309 8.309 0 0 0 7.7 16a8.216 8.216 0 0 0 1.1 4.117 8.319 8.319 0 0 0 14.411-.017L19.6 18.02"
+      fill="#fff"
+    />
+    <path
+      d="M27.67 15.271v-1.238h-1.007v-1.006h-1.239v1.006h-1.508v-1.006h-1.239v1.006h-1.008v1.238h1.006v1.513h-1.006v1.237h1.006v1.006h1.239v-1.006h1.509v1.006h1.239v-1.006h1.006v-1.237h-1v-1.513Zm-2.246 1.513h-1.508v-1.513h1.508Z"
+      fill="#fff"
+    />
+  </svg>
+);
+
+export default CsharpIcon;

package/src/lib/assets/language-icons/css.tsx

@@ -0,0 +1,36 @@
+import type { SVGProps } from "react";
+
+const CssIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <title>CSS</title>
+    <path
+      fill="#1572b6"
+      d="M5.902 27.201 3.656 2h24.688l-2.249 25.197L15.985 30 5.902 27.201z"
+    />
+    <path fill="#33a9dc" d="m16 27.858 8.17-2.265 1.922-21.532H16v23.797z" />
+    <path
+      fill="#fff"
+      d="M16 13.191h4.09l.282-3.165H16V6.935h7.75l-.074.829-.759 8.547H16v-3.12z"
+    />
+    <path
+      fill="#ebebeb"
+      d="m16.019 21.218-.014.004-3.442-.93-.22-2.465H9.24l.433 4.853 6.331 1.758.015-.004v-3.216z"
+    />
+    <path
+      fill="#fff"
+      d="m19.827 16.151-.372 4.139-3.447.93v3.216l6.336-1.756.047-.522.537-6.007h-3.101z"
+    />
+    <path
+      fill="#ebebeb"
+      d="M16.011 6.935v3.091H8.545l-.062-.695-.141-1.567-.074-.829h7.743zM16 13.191v3.091H12.601l-.062-.695-.14-1.567-.074-.829H16z"
+    />
+  </svg>
+);
+
+export default CssIcon;