@remotion/promo-pages 4.0.269 → 4.0.271

package/.turbo/turbo-make.log

@@ -1,6 +1,6 @@
 
 
-> @remotion/promo-pages@4.0.269 make /Users/jonathanburger/remotion/packages/promo-pages
+> @remotion/promo-pages@4.0.271 make /Users/jonathanburger/remotion/packages/promo-pages
 > bun --env-file=../.env.bundle bundle.ts
 
 ≈ tailwindcss v4.0.0

package/bundle.ts

@@ -26,6 +26,7 @@ const result = await Bun.build({
 	entrypoints: [
 		'./src/components/Homepage.tsx',
 		'./src/components/homepage/Pricing.tsx',
+		'./src/components/Ai.tsx',
 	],
 	format: 'esm',
 	external: [

package/dist/Ai.js

@@ -0,0 +1,40 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/components/Ai.tsx
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+var AskAi = () => {
+  const click = useCallback(() => {
+    window.crawlchatEmbed.show();
+  }, []);
+  return /* @__PURE__ */ jsx("button", {
+    type: "button",
+    onClick: click,
+    style: {
+      backgroundColor: "#282A36",
+      cursor: "pointer"
+    },
+    className: "rounded-full text-white fixed z-10 bottom-8 right-8 fontbrand appearance-none border-none px-4 py-2 font-medium text-sm",
+    children: "Ask AI"
+  });
+};
+export {
+  AskAi
+};

package/dist/Homepage.js

@@ -727,7 +727,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.269", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.271", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -4084,17 +4084,12 @@ Check that all your Remotion packages are on the same version. If your dependenc
   return _portalNode;
 }, useLazyComponent = ({
   compProps,
-  componentName
+  componentName,
+  noSuspense
 }) => {
   const lazy = useMemo222(() => {
-    if ("lazyComponent" in compProps && typeof compProps.lazyComponent !== "undefined") {
-      if (typeof compProps.lazyComponent === "undefined") {
-        throw new Error(`A value of \`undefined\` was passed to the \`lazyComponent\` prop. Check the value you are passing to the <${componentName}/> component.`);
-      }
-      return React18.lazy(compProps.lazyComponent);
-    }
     if ("component" in compProps) {
-      if (typeof document === "undefined") {
+      if (typeof document === "undefined" || noSuspense) {
         return compProps.component;
       }
       if (typeof compProps.component === "undefined") {
@@ -4102,6 +4097,12 @@ Check that all your Remotion packages are on the same version. If your dependenc
       }
       return React18.lazy(() => Promise.resolve({ default: compProps.component }));
     }
+    if ("lazyComponent" in compProps && typeof compProps.lazyComponent !== "undefined") {
+      if (typeof compProps.lazyComponent === "undefined") {
+        throw new Error(`A value of \`undefined\` was passed to the \`lazyComponent\` prop. Check the value you are passing to the <${componentName}/> component.`);
+      }
+      return React18.lazy(compProps.lazyComponent);
+    }
     throw new Error("You must pass either 'component' or 'lazyComponent'");
   }, [compProps.component, compProps.lazyComponent]);
   return lazy;
@@ -4139,7 +4140,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const video = useVideo();
   const lazy = useLazyComponent({
     compProps,
-    componentName: "Composition"
+    componentName: "Composition",
+    noSuspense: false
   });
   const nonce = useNonce();
   const isPlayer = useIsPlayer();
@@ -12754,15 +12756,21 @@ var useElementSize = (ref, options) => {
       const probableCssParentScale = contentRect.width === 0 ? 1 : newSize[0].width / contentRect.width;
       const width = options.shouldApplyCssTransforms ? newSize[0].width : newSize[0].width * (1 / probableCssParentScale);
       const height = options.shouldApplyCssTransforms ? newSize[0].height : newSize[0].height * (1 / probableCssParentScale);
-      setSize({
-        width,
-        height,
-        left: newSize[0].x,
-        top: newSize[0].y,
-        windowSize: {
-          height: window.innerHeight,
-          width: window.innerWidth
+      setSize((prevState) => {
+        const isSame = prevState && prevState.width === width && prevState.height === height && prevState.left === newSize[0].x && prevState.top === newSize[0].y && prevState.windowSize.height === window.innerHeight && prevState.windowSize.width === window.innerWidth;
+        if (isSame) {
+          return prevState;
         }
+        return {
+          width,
+          height,
+          left: newSize[0].x,
+          top: newSize[0].y,
+          windowSize: {
+            height: window.innerHeight,
+            width: window.innerWidth
+          }
+        };
       });
     });
   }, [options.shouldApplyCssTransforms]);
@@ -13974,7 +13982,8 @@ var PlayerUI = ({
   hideControlsWhenPointerDoesntMove,
   overflowVisible,
   browserMediaControlsBehavior,
-  overrideInternalClassName
+  overrideInternalClassName,
+  noSuspense
 }, ref) => {
   const config = Internals.useUnsafeVideoConfig();
   const video = Internals.useVideo();
@@ -14393,7 +14402,7 @@ var PlayerUI = ({
       }) : null
     ]
   });
-  if (IS_NODE && !doesReactVersionSupportSuspense) {
+  if (noSuspense || IS_NODE && !doesReactVersionSupportSuspense) {
     return /* @__PURE__ */ jsx122("div", {
       ref: container4,
       style: outerStyle,
@@ -14696,6 +14705,7 @@ var PlayerFn = ({
   browserMediaControlsBehavior: passedBrowserMediaControlsBehavior,
   overrideInternalClassName,
   logLevel = "info",
+  noSuspense,
   acknowledgeRemotionLicense,
   ...componentProps
 }, ref) => {
@@ -14717,7 +14727,8 @@ var PlayerFn = ({
   useState132(() => acknowledgeRemotionLicenseMessage(Boolean(acknowledgeRemotionLicense), logLevel));
   const component = Internals.useLazyComponent({
     compProps: componentProps,
-    componentName: "Player"
+    componentName: "Player",
+    noSuspense: Boolean(noSuspense)
   });
   validateInitialFrame({ initialFrame, durationInFrames });
   const [frame, setFrame] = useState132(() => ({
@@ -14869,7 +14880,8 @@ var PlayerFn = ({
             hideControlsWhenPointerDoesntMove,
             overflowVisible,
             browserMediaControlsBehavior,
-            overrideInternalClassName: overrideInternalClassName ?? undefined
+            overrideInternalClassName: overrideInternalClassName ?? undefined,
+            noSuspense: Boolean(noSuspense)
           })
         })
       })
@@ -14902,6 +14914,7 @@ var ThumbnailUI = ({
   renderLoading,
   className: className2,
   overflowVisible,
+  noSuspense,
   overrideInternalClassName
 }, ref) => {
   const config = Internals.useUnsafeVideoConfig();
@@ -14991,7 +15004,7 @@ var ThumbnailUI = ({
       }) : null
     })
   });
-  if (IS_NODE && !doesReactVersionSupportSuspense2) {
+  if (noSuspense || IS_NODE && !doesReactVersionSupportSuspense2) {
     return /* @__PURE__ */ jsx152("div", {
       ref: container4,
       style: outerStyle,
@@ -15024,6 +15037,7 @@ var ThumbnailFn = ({
   overflowVisible = false,
   overrideInternalClassName,
   logLevel = "info",
+  noSuspense,
   ...componentProps
 }, ref) => {
   if (typeof window !== "undefined") {
@@ -15054,7 +15068,8 @@ var ThumbnailFn = ({
   useImperativeHandle42(ref, () => rootRef.current, []);
   const Component = Internals.useLazyComponent({
     compProps: componentProps,
-    componentName: "Thumbnail"
+    componentName: "Thumbnail",
+    noSuspense: Boolean(noSuspense)
   });
   const [emitter] = useState142(() => new ThumbnailEmitter);
   const passedInputProps = useMemo172(() => {
@@ -15081,7 +15096,8 @@ var ThumbnailFn = ({
           renderLoading,
           style: style2,
           overflowVisible,
-          overrideInternalClassName
+          overrideInternalClassName,
+          noSuspense: Boolean(noSuspense)
         })
       })
     })
@@ -19855,7 +19871,7 @@ var FEATURED_TEMPLATES = [
     cliId: "blank",
     type: "video",
     defaultBranch: "main",
-    featuredOnHomePage: "Blank",
+    featuredOnHomePage: null,
     previewURL: "https://template-empty.vercel.app/?/MyComp",
     templateInMonorepo: "template-blank",
     allowEnableTailwind: true
@@ -19881,23 +19897,23 @@ var FEATURED_TEMPLATES = [
     allowEnableTailwind: true
   },
   {
-    homePageLabel: "Remix",
-    shortName: "Remix",
+    homePageLabel: "React Router 7",
+    shortName: "React Router",
     org: "remotion-dev",
-    repoName: "template-remix",
-    description: "Remotion + Remix Starter Kit",
-    longerDescription: "A software-as-a-service starter kit which has the Remotion Player and rendering via Remotion Lambda built-in. Built with remix.run.",
+    repoName: "template-react-router",
+    description: "SaaS template for video generation apps",
+    longerDescription: "A software-as-a-service starter kit which has the Remotion Player and rendering via Remotion Lambda built-in. Built with React Router 7.",
     promoBanner: {
-      width: 1280,
+      width: 918,
       height: 720,
       src: "/img/remix-template.png"
     },
-    cliId: "remix",
+    cliId: "react-router",
     type: "image",
     defaultBranch: "main",
-    featuredOnHomePage: null,
+    featuredOnHomePage: "React Router",
     previewURL: null,
-    templateInMonorepo: "template-remix",
+    templateInMonorepo: "template-react-router",
     allowEnableTailwind: false
   },
   {
@@ -20303,24 +20319,27 @@ var OverlayIcon = (props) => {
 
 // src/components/icons/remix.tsx
 import { jsx as jsx113, jsxs as jsxs50 } from "react/jsx-runtime";
-var RemixIcon = (props) => {
-  return /* @__PURE__ */ jsxs50("svg", {
-    viewBox: "0 0 800 800",
-    fill: "none",
+var ReactRouterIcon = (props) => {
+  return /* @__PURE__ */ jsx113("svg", {
     xmlns: "http://www.w3.org/2000/svg",
+    width: "800px",
+    height: "800px",
+    viewBox: "0 -58 256 256",
+    version: "1.1",
+    preserveAspectRatio: "xMidYMid",
     ...props,
-    children: [
-      /* @__PURE__ */ jsx113("path", {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M621.609 552.632C626.649 617.449 626.649 647.833 626.649 681H476.823C476.823 673.776 476.952 667.167 477.082 660.466C477.488 639.634 477.911 617.911 474.538 574.041C470.082 509.814 442.451 495.543 391.645 495.543H346.633H156V378.687H398.776C462.951 378.687 495.04 359.146 495.04 307.408C495.04 261.915 462.951 234.347 398.776 234.347H156V120H425.516C570.802 120 643 188.686 643 298.405C643 380.471 592.194 433.993 523.562 442.913C581.498 454.509 615.369 487.514 621.609 552.632Z",
-        fill: "currentcolor"
-      }),
-      /* @__PURE__ */ jsx113("path", {
-        d: "M156 681V593H313.899C340.273 593 346 612.845 346 624.68V681H156Z",
-        fill: "currentcolor"
-      })
-    ]
+    children: /* @__PURE__ */ jsxs50("g", {
+      children: [
+        /* @__PURE__ */ jsx113("path", {
+          d: "M78.0659341,92.5875806 C90.8837956,92.5875806 101.274726,82.1966508 101.274726,69.3787894 C101.274726,56.5609279 90.8837956,46.1699982 78.0659341,46.1699982 C65.2480726,46.1699982 54.8571429,56.5609279 54.8571429,69.3787894 C54.8571429,82.1966508 65.2480726,92.5875806 78.0659341,92.5875806 Z M23.2087913,139.005163 C36.0266526,139.005163 46.4175825,128.614233 46.4175825,115.796372 C46.4175825,102.97851 36.0266526,92.5875806 23.2087913,92.5875806 C10.3909298,92.5875806 0,102.97851 0,115.796372 C0,128.614233 10.3909298,139.005163 23.2087913,139.005163 Z M232.791209,139.005163 C245.60907,139.005163 256,128.614233 256,115.796372 C256,102.97851 245.60907,92.5875806 232.791209,92.5875806 C219.973347,92.5875806 209.582418,102.97851 209.582418,115.796372 C209.582418,128.614233 219.973347,139.005163 232.791209,139.005163 Z",
+          fill: "currentcolor"
+        }),
+        /* @__PURE__ */ jsx113("path", {
+          d: "M156.565464,70.3568084 C155.823426,62.6028163 155.445577,56.1490255 149.505494,51.6131676 C141.982638,45.8687002 133.461166,49.5960243 122.964463,45.8072968 C112.650326,43.3121427 105,34.1545727 105,23.2394367 C105,10.4046502 115.577888,0 128.626373,0 C138.29063,0 146.599638,5.70747659 150.259573,13.8825477 C155.861013,24.5221258 152.220489,35.3500418 159.258242,40.8041273 C167.591489,47.2621895 178.826167,42.5329154 191.362109,48.6517412 C195.390112,50.5026944 198.799584,53.4384578 201.202056,57.0769224 C203.604528,60.7153869 205,65.0565524 205,69.7183101 C205,80.633446 197.349674,89.7910161 187.035538,92.2861702 C176.538834,96.0748977 168.017363,92.3475736 160.494506,98.092041 C152.03503,104.551712 156.563892,115.358642 149.669352,126.774447 C145.756163,134.291567 137.802119,139.43662 128.626373,139.43662 C115.577888,139.43662 105,129.03197 105,116.197184 C105,106.873668 110.581887,98.832521 118.637891,95.1306146 C131.173833,89.0117889 142.408511,93.7410629 150.741758,87.2830007 C155.549106,83.5574243 156.565464,77.8102648 156.565464,70.3568084 Z",
+          fill: "currentcolor"
+        })
+      ]
+    })
   });
 };
 
@@ -20489,8 +20508,8 @@ var IconForTemplate = ({ template, scale: scale4 = 1 }) => {
       }
     });
   }
-  if (template.cliId === "remix") {
-    return /* @__PURE__ */ jsx123(RemixIcon, {
+  if (template.cliId === "react-router") {
+    return /* @__PURE__ */ jsx123(ReactRouterIcon, {
       style: {
         height: scale4 * 32
       }

package/dist/components/Ai.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const AskAi: React.FC;

package/dist/components/Ai.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+export const AskAi = () => {
+    const click = useCallback(() => {
+        // @ts-expect-error
+        window.crawlchatEmbed.show();
+    }, []);
+    return (_jsx("button", { type: "button", onClick: click, style: {
+            backgroundColor: '#282A36',
+            cursor: 'pointer',
+        }, className: "rounded-full text-white fixed z-10 bottom-8 right-8 fontbrand appearance-none border-none px-4 py-2 font-medium text-sm", children: "Ask AI" }));
+};

package/dist/components/icons/remix.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const RemixIcon = (props) => {
-    return (_jsxs("svg", { viewBox: "0 0 800 800", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M621.609 552.632C626.649 617.449 626.649 647.833 626.649 681H476.823C476.823 673.776 476.952 667.167 477.082 660.466C477.488 639.634 477.911 617.911 474.538 574.041C470.082 509.814 442.451 495.543 391.645 495.543H346.633H156V378.687H398.776C462.951 378.687 495.04 359.146 495.04 307.408C495.04 261.915 462.951 234.347 398.776 234.347H156V120H425.516C570.802 120 643 188.686 643 298.405C643 380.471 592.194 433.993 523.562 442.913C581.498 454.509 615.369 487.514 621.609 552.632Z", fill: "currentcolor" }), _jsx("path", { d: "M156 681V593H313.899C340.273 593 346 612.845 346 624.68V681H156Z", fill: "currentcolor" })] }));
+export const ReactRouterIcon = (props) => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "800px", height: "800px", viewBox: "0 -58 256 256", version: "1.1", preserveAspectRatio: "xMidYMid", ...props, children: _jsxs("g", { children: [_jsx("path", { d: "M78.0659341,92.5875806 C90.8837956,92.5875806 101.274726,82.1966508 101.274726,69.3787894 C101.274726,56.5609279 90.8837956,46.1699982 78.0659341,46.1699982 C65.2480726,46.1699982 54.8571429,56.5609279 54.8571429,69.3787894 C54.8571429,82.1966508 65.2480726,92.5875806 78.0659341,92.5875806 Z M23.2087913,139.005163 C36.0266526,139.005163 46.4175825,128.614233 46.4175825,115.796372 C46.4175825,102.97851 36.0266526,92.5875806 23.2087913,92.5875806 C10.3909298,92.5875806 0,102.97851 0,115.796372 C0,128.614233 10.3909298,139.005163 23.2087913,139.005163 Z M232.791209,139.005163 C245.60907,139.005163 256,128.614233 256,115.796372 C256,102.97851 245.60907,92.5875806 232.791209,92.5875806 C219.973347,92.5875806 209.582418,102.97851 209.582418,115.796372 C209.582418,128.614233 219.973347,139.005163 232.791209,139.005163 Z", fill: "currentcolor" }), _jsx("path", { d: "M156.565464,70.3568084 C155.823426,62.6028163 155.445577,56.1490255 149.505494,51.6131676 C141.982638,45.8687002 133.461166,49.5960243 122.964463,45.8072968 C112.650326,43.3121427 105,34.1545727 105,23.2394367 C105,10.4046502 115.577888,0 128.626373,0 C138.29063,0 146.599638,5.70747659 150.259573,13.8825477 C155.861013,24.5221258 152.220489,35.3500418 159.258242,40.8041273 C167.591489,47.2621895 178.826167,42.5329154 191.362109,48.6517412 C195.390112,50.5026944 198.799584,53.4384578 201.202056,57.0769224 C203.604528,60.7153869 205,65.0565524 205,69.7183101 C205,80.633446 197.349674,89.7910161 187.035538,92.2861702 C176.538834,96.0748977 168.017363,92.3475736 160.494506,98.092041 C152.03503,104.551712 156.563892,115.358642 149.669352,126.774447 C145.756163,134.291567 137.802119,139.43662 128.626373,139.43662 C115.577888,139.43662 105,129.03197 105,116.197184 C105,106.873668 110.581887,98.832521 118.637891,95.1306146 C131.173833,89.0117889 142.408511,93.7410629 150.741758,87.2830007 C155.549106,83.5574243 156.565464,77.8102648 156.565464,70.3568084 Z", fill: "currentcolor" })] }) }));
 };

package/dist/tailwind.css

@@ -419,6 +419,9 @@ body {
   .absolute {
     position: absolute;
   }
+  .fixed {
+    position: fixed;
+  }
   .relative {
     position: relative;
   }
@@ -434,9 +437,15 @@ body {
   .right-2\.5 {
     right: calc(var(--spacing) * 2.5);
   }
+  .right-8 {
+    right: calc(var(--spacing) * 8);
+  }
   .bottom-2\.5 {
     bottom: calc(var(--spacing) * 2.5);
   }
+  .bottom-8 {
+    bottom: calc(var(--spacing) * 8);
+  }
   .bottom-full {
     bottom: 100%;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/promo-pages",
-  "version": "4.0.269",
+  "version": "4.0.271",
   "publishConfig": {
     "access": "public"
   },
@@ -10,14 +10,14 @@
     "polished": "4.3.1",
     "vite": "^5.4.12",
     "zod": "3.22.3",
-    "@remotion/animated-emoji": "4.0.269",
-    "@remotion/lottie": "4.0.269",
-    "@remotion/paths": "4.0.269",
-    "@remotion/lambda": "4.0.269",
-    "@remotion/shapes": "4.0.269",
-    "create-video": "4.0.269",
-    "remotion": "4.0.269",
-    "@remotion/player": "4.0.269"
+    "@remotion/animated-emoji": "4.0.271",
+    "@remotion/lottie": "4.0.271",
+    "@remotion/lambda": "4.0.271",
+    "@remotion/paths": "4.0.271",
+    "@remotion/player": "4.0.271",
+    "@remotion/shapes": "4.0.271",
+    "remotion": "4.0.271",
+    "create-video": "4.0.271"
   },
   "devDependencies": {
     "@eslint/eslintrc": "3.1.0",
@@ -36,7 +36,7 @@
     "tailwind-merge": "2.5.2",
     "bun-plugin-tailwind": "0.0.13",
     "clsx": "2.1.1",
-    "@remotion/eslint-config-internal": "4.0.269"
+    "@remotion/eslint-config-internal": "4.0.271"
   },
   "repository": {
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/promo-pages"

package/src/components/Ai.tsx

@@ -0,0 +1,22 @@
+import React, {useCallback} from 'react';
+
+export const AskAi: React.FC = () => {
+	const click = useCallback(() => {
+		// @ts-expect-error
+		window.crawlchatEmbed.show();
+	}, []);
+
+	return (
+		<button
+			type="button"
+			onClick={click}
+			style={{
+				backgroundColor: '#282A36',
+				cursor: 'pointer',
+			}}
+			className="rounded-full text-white fixed z-10 bottom-8 right-8 fontbrand appearance-none border-none px-4 py-2 font-medium text-sm"
+		>
+			Ask AI
+		</button>
+	);
+};

package/src/components/homepage/IconForTemplate.tsx

@@ -6,7 +6,7 @@ import {Cubes} from '../icons/cubes';
 import {JSIcon} from '../icons/js';
 import {NextIcon} from '../icons/next';
 import {OverlayIcon} from '../icons/overlay';
-import {RemixIcon} from '../icons/remix';
+import {ReactRouterIcon} from '../icons/remix';
 import {SkiaIcon} from '../icons/skia';
 import {Stargazer} from '../icons/stargazer';
 import {StillIcon} from '../icons/still';
@@ -110,9 +110,9 @@ export const IconForTemplate: React.FC<{
 		);
 	}
 
-	if (template.cliId === 'remix') {
+	if (template.cliId === 'react-router') {
 		return (
-			<RemixIcon
+			<ReactRouterIcon
 				style={{
 					height: scale * 32,
 				}}

package/src/components/icons/remix.tsx

@@ -1,24 +1,27 @@
 import type {SVGProps} from 'react';
 import React from 'react';
 
-export const RemixIcon: React.FC<SVGProps<SVGSVGElement>> = (props) => {
+export const ReactRouterIcon: React.FC<SVGProps<SVGSVGElement>> = (props) => {
 	return (
 		<svg
-			viewBox="0 0 800 800"
-			fill="none"
 			xmlns="http://www.w3.org/2000/svg"
+			width="800px"
+			height="800px"
+			viewBox="0 -58 256 256"
+			version="1.1"
+			preserveAspectRatio="xMidYMid"
 			{...props}
 		>
-			<path
-				fillRule="evenodd"
-				clipRule="evenodd"
-				d="M621.609 552.632C626.649 617.449 626.649 647.833 626.649 681H476.823C476.823 673.776 476.952 667.167 477.082 660.466C477.488 639.634 477.911 617.911 474.538 574.041C470.082 509.814 442.451 495.543 391.645 495.543H346.633H156V378.687H398.776C462.951 378.687 495.04 359.146 495.04 307.408C495.04 261.915 462.951 234.347 398.776 234.347H156V120H425.516C570.802 120 643 188.686 643 298.405C643 380.471 592.194 433.993 523.562 442.913C581.498 454.509 615.369 487.514 621.609 552.632Z"
-				fill="currentcolor"
-			/>
-			<path
-				d="M156 681V593H313.899C340.273 593 346 612.845 346 624.68V681H156Z"
-				fill="currentcolor"
-			/>
+			<g>
+				<path
+					d="M78.0659341,92.5875806 C90.8837956,92.5875806 101.274726,82.1966508 101.274726,69.3787894 C101.274726,56.5609279 90.8837956,46.1699982 78.0659341,46.1699982 C65.2480726,46.1699982 54.8571429,56.5609279 54.8571429,69.3787894 C54.8571429,82.1966508 65.2480726,92.5875806 78.0659341,92.5875806 Z M23.2087913,139.005163 C36.0266526,139.005163 46.4175825,128.614233 46.4175825,115.796372 C46.4175825,102.97851 36.0266526,92.5875806 23.2087913,92.5875806 C10.3909298,92.5875806 0,102.97851 0,115.796372 C0,128.614233 10.3909298,139.005163 23.2087913,139.005163 Z M232.791209,139.005163 C245.60907,139.005163 256,128.614233 256,115.796372 C256,102.97851 245.60907,92.5875806 232.791209,92.5875806 C219.973347,92.5875806 209.582418,102.97851 209.582418,115.796372 C209.582418,128.614233 219.973347,139.005163 232.791209,139.005163 Z"
+					fill="currentcolor"
+				/>
+				<path
+					d="M156.565464,70.3568084 C155.823426,62.6028163 155.445577,56.1490255 149.505494,51.6131676 C141.982638,45.8687002 133.461166,49.5960243 122.964463,45.8072968 C112.650326,43.3121427 105,34.1545727 105,23.2394367 C105,10.4046502 115.577888,0 128.626373,0 C138.29063,0 146.599638,5.70747659 150.259573,13.8825477 C155.861013,24.5221258 152.220489,35.3500418 159.258242,40.8041273 C167.591489,47.2621895 178.826167,42.5329154 191.362109,48.6517412 C195.390112,50.5026944 198.799584,53.4384578 201.202056,57.0769224 C203.604528,60.7153869 205,65.0565524 205,69.7183101 C205,80.633446 197.349674,89.7910161 187.035538,92.2861702 C176.538834,96.0748977 168.017363,92.3475736 160.494506,98.092041 C152.03503,104.551712 156.563892,115.358642 149.669352,126.774447 C145.756163,134.291567 137.802119,139.43662 128.626373,139.43662 C115.577888,139.43662 105,129.03197 105,116.197184 C105,106.873668 110.581887,98.832521 118.637891,95.1306146 C131.173833,89.0117889 142.408511,93.7410629 150.741758,87.2830007 C155.549106,83.5574243 156.565464,77.8102648 156.565464,70.3568084 Z"
+					fill="currentcolor"
+				/>
+			</g>
 		</svg>
 	);
 };