ugcinc-render 1.8.192 → 1.8.193

package/dist/index.js

@@ -2902,6 +2902,7 @@ function ScreenshotAnimation({
 
 // src/compositions/InstagramDmComposition/index.tsx
 var import_react9 = require("react");
+var import_remotion10 = require("remotion");
 
 // src/compositions/DmComposition/BaseDmComposition.tsx
 var import_react8 = require("react");
@@ -4047,6 +4048,7 @@ function generateHeaderElements(props) {
   const username2FontSize = props.username2FontSize ?? HEADER_DEFAULTS.username2FontSize;
   const username2LetterSpacing = props.username2LetterSpacing ?? HEADER_DEFAULTS.username2LetterSpacing;
   const truncatedUsername = senderUsername.length > 9 ? senderUsername.substring(0, 9) + "..." : senderUsername;
+  const themeColors = getThemeColors(props.theme);
   const username1Height = username1FontSize;
   const username1Top = username1Bottom - username1Height;
   elements.push({
@@ -4061,7 +4063,7 @@ function generateHeaderElements(props) {
     font: "apple",
     fontSize: username1FontSize,
     fontWeight: "bold",
-    color: "#fafafa",
+    color: themeColors.textPrimary,
     letterSpacing: username1LetterSpacing,
     textAlign: "left",
     verticalAlign: "middle"
@@ -4080,7 +4082,7 @@ function generateHeaderElements(props) {
     font: "apple",
     fontSize: username2FontSize,
     fontWeight: "normal",
-    color: "#a6afb6",
+    color: themeColors.textSecondary,
     letterSpacing: username2LetterSpacing,
     textAlign: "left",
     verticalAlign: "middle"
@@ -5068,12 +5070,45 @@ function InstagramDmComposition(props) {
     homeIndicatorBottom = 2597,
     homeIndicatorLeft = 387,
     homeIndicatorRight = 818,
-    homeIndicatorColor = "#ffffff"
+    homeIndicatorColor = "#ffffff",
+    // Header icon props
+    backArrowTop = 240,
+    backArrowBottom = 300,
+    backArrowLeft = 78,
+    backArrowRight = 111,
+    smilePlusTop = 234,
+    smilePlusBottom = 306,
+    smilePlusLeft = 663,
+    smilePlusRight = 735,
+    phoneIconTop = 237,
+    phoneIconBottom = 303,
+    phoneIconLeft = 807,
+    phoneIconRight = 873,
+    videoIconTop = 240,
+    videoIconBottom = 300,
+    videoIconLeft = 948,
+    videoIconRight = 1020,
+    flagTop = 237,
+    flagBottom = 303,
+    flagLeft = 1098,
+    flagRight = 1153,
+    usernameArrowTop = 231,
+    usernameArrowBottom = 260,
+    usernameArrowLeft = 619,
+    usernameArrowRight = 636
   } = props;
-  const { elements, imageUrls } = (0, import_react9.useMemo)(() => {
-    return convertPropsToElements(props);
-  }, [props]);
   const colors = getThemeColors(theme);
+  const isLightMode = theme === "light";
+  const { elements, imageUrls } = (0, import_react9.useMemo)(() => {
+    const propsWithThemeColors = {
+      ...props,
+      recipientBubbleColor: isLightMode ? colors.recipientBubble : props.recipientBubbleColor ?? "#25282d"
+    };
+    return convertPropsToElements(propsWithThemeColors);
+  }, [props, isLightMode, colors.recipientBubble]);
+  const effectiveHomeIndicatorColor = isLightMode ? "#000000" : homeIndicatorColor;
+  const effectiveStatusBarColor = isLightMode ? "#000000" : "#ffffff";
+  const headerIconFilter = isLightMode ? "invert(1)" : "none";
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     BaseDmComposition,
     {
@@ -5123,7 +5158,8 @@ function InstagramDmComposition(props) {
       homeIndicatorBottom,
       homeIndicatorLeft,
       homeIndicatorRight,
-      homeIndicatorColor,
+      homeIndicatorColor: effectiveHomeIndicatorColor,
+      statusBarColor: effectiveStatusBarColor,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           ImageEditorComposition,
@@ -5152,7 +5188,99 @@ function InstagramDmComposition(props) {
               zIndex: 29
             }
           }
-        )
+        ),
+        isLightMode && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            import_remotion10.Img,
+            {
+              src: (0, import_remotion10.staticFile)("ig-header-left-arrow.png"),
+              style: {
+                position: "absolute",
+                top: backArrowTop,
+                left: backArrowLeft,
+                width: backArrowRight - backArrowLeft,
+                height: backArrowBottom - backArrowTop,
+                zIndex: 31,
+                filter: headerIconFilter
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            import_remotion10.Img,
+            {
+              src: (0, import_remotion10.staticFile)("ig-smile-plus.png"),
+              style: {
+                position: "absolute",
+                top: smilePlusTop,
+                left: smilePlusLeft,
+                width: smilePlusRight - smilePlusLeft,
+                height: smilePlusBottom - smilePlusTop,
+                zIndex: 31,
+                filter: headerIconFilter
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            import_remotion10.Img,
+            {
+              src: (0, import_remotion10.staticFile)("ig-phone.png"),
+              style: {
+                position: "absolute",
+                top: phoneIconTop,
+                left: phoneIconLeft,
+                width: phoneIconRight - phoneIconLeft,
+                height: phoneIconBottom - phoneIconTop,
+                zIndex: 31,
+                filter: headerIconFilter
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            import_remotion10.Img,
+            {
+              src: (0, import_remotion10.staticFile)("ig-video.png"),
+              style: {
+                position: "absolute",
+                top: videoIconTop,
+                left: videoIconLeft,
+                width: videoIconRight - videoIconLeft,
+                height: videoIconBottom - videoIconTop,
+                zIndex: 31,
+                filter: headerIconFilter
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            import_remotion10.Img,
+            {
+              src: (0, import_remotion10.staticFile)("ig-flag.png"),
+              style: {
+                position: "absolute",
+                top: flagTop,
+                left: flagLeft,
+                width: flagRight - flagLeft,
+                height: flagBottom - flagTop,
+                zIndex: 31,
+                filter: headerIconFilter
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            import_remotion10.Img,
+            {
+              src: (0, import_remotion10.staticFile)("ig-username-right-arrow.png"),
+              style: {
+                position: "absolute",
+                top: usernameArrowTop,
+                left: usernameArrowLeft,
+                width: usernameArrowRight - usernameArrowLeft,
+                height: usernameArrowBottom - usernameArrowTop,
+                zIndex: 31,
+                filter: headerIconFilter
+              }
+            }
+          )
+        ] })
       ]
     }
   );
@@ -5260,7 +5388,7 @@ function convertPublicToProps(input) {
 
 // src/compositions/IMessageDmComposition/index.tsx
 var import_react10 = require("react");
-var import_remotion10 = require("remotion");
+var import_remotion11 = require("remotion");
 
 // src/compositions/IMessageDmComposition/convertPropsToElements.ts
 var SENDER_IMAGE_INPUT_ID_PREFIX = "sender-image-";
@@ -6003,7 +6131,7 @@ var defaultIMessageDmProps = {
 var IMessageDmComposition = (props) => {
   const [fontsLoaded, setFontsLoaded] = (0, import_react10.useState)(false);
   (0, import_react10.useEffect)(() => {
-    const handle = (0, import_remotion10.delayRender)("Loading fonts for IMessageDmComposition");
+    const handle = (0, import_remotion11.delayRender)("Loading fonts for IMessageDmComposition");
     const loadFonts = async () => {
       await preloadFonts();
       if (typeof document !== "undefined" && document.fonts?.ready) {
@@ -6023,11 +6151,11 @@ var IMessageDmComposition = (props) => {
     };
     loadFonts().then(() => {
       setFontsLoaded(true);
-      (0, import_remotion10.continueRender)(handle);
+      (0, import_remotion11.continueRender)(handle);
     }).catch((err) => {
       console.error("[IMessageDmComposition] Failed to load fonts:", err);
       setFontsLoaded(true);
-      (0, import_remotion10.continueRender)(handle);
+      (0, import_remotion11.continueRender)(handle);
     });
   }, []);
   const mergedProps = (0, import_react10.useMemo)(() => ({
@@ -6262,9 +6390,9 @@ var IMessageDmComposition = (props) => {
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          import_remotion10.Img,
+          import_remotion11.Img,
           {
-            src: (0, import_remotion10.staticFile)("imsg-header-left-arrow.png"),
+            src: (0, import_remotion11.staticFile)("imsg-header-left-arrow.png"),
             style: {
               position: "absolute",
               top: backArrowTop,
@@ -6309,9 +6437,9 @@ var IMessageDmComposition = (props) => {
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          import_remotion10.Img,
+          import_remotion11.Img,
           {
-            src: (0, import_remotion10.staticFile)("imsg-header-camera.png"),
+            src: (0, import_remotion11.staticFile)("imsg-header-camera.png"),
             style: {
               position: "absolute",
               top: cameraIconTop,
@@ -6337,7 +6465,7 @@ var IMessageDmComposition = (props) => {
           }
         ),
         profilePicUrl && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          import_remotion10.Img,
+          import_remotion11.Img,
           {
             src: profilePicUrl,
             style: {
@@ -6382,9 +6510,9 @@ var IMessageDmComposition = (props) => {
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                import_remotion10.Img,
+                import_remotion11.Img,
                 {
-                  src: (0, import_remotion10.staticFile)("imsg-name-right-arrow.png"),
+                  src: (0, import_remotion11.staticFile)("imsg-name-right-arrow.png"),
                   style: {
                     marginLeft: usernameArrowOffsetX,
                     marginTop: usernameArrowOffsetY,
@@ -6397,9 +6525,9 @@ var IMessageDmComposition = (props) => {
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          import_remotion10.Img,
+          import_remotion11.Img,
           {
-            src: (0, import_remotion10.staticFile)(lightMode ? "imsg-light-footer-plus.png" : "imsg-footer-plus.png"),
+            src: (0, import_remotion11.staticFile)(lightMode ? "imsg-light-footer-plus.png" : "imsg-footer-plus.png"),
             style: {
               position: "absolute",
               top: plusButtonTop,
@@ -6411,9 +6539,9 @@ var IMessageDmComposition = (props) => {
           }
         ),
         lightMode ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          import_remotion10.Img,
+          import_remotion11.Img,
           {
-            src: (0, import_remotion10.staticFile)("imsg-light-main-footer.png"),
+            src: (0, import_remotion11.staticFile)("imsg-light-main-footer.png"),
             style: {
               position: "absolute",
               top: footerTop,
@@ -6658,7 +6786,7 @@ function MessageBubble({
 }
 
 // src/compositions/messaging/components/ProfilePic.tsx
-var import_remotion11 = require("remotion");
+var import_remotion12 = require("remotion");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 function ProfilePic({
   src,
@@ -6693,7 +6821,7 @@ function ProfilePic({
               boxSizing: "border-box"
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-              import_remotion11.Img,
+              import_remotion12.Img,
               {
                 src,
                 style: {
@@ -6758,7 +6886,7 @@ function Reaction({
 }
 
 // src/compositions/messaging/components/TypingIndicator.tsx
-var import_remotion12 = require("remotion");
+var import_remotion13 = require("remotion");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function gradientToCss2(color) {
   if (color.type === "solid") {
@@ -6788,7 +6916,7 @@ function TypingIndicator({
   paddingH,
   paddingV
 }) {
-  const frame = (0, import_remotion12.useCurrentFrame)();
+  const frame = (0, import_remotion13.useCurrentFrame)();
   const dot1Y = calculateDotBounce(frame, 0);
   const dot2Y = calculateDotBounce(frame, 1);
   const dot3Y = calculateDotBounce(frame, 2);
@@ -6843,7 +6971,7 @@ function TypingIndicator({
 }
 
 // src/compositions/messaging/components/MediaBubble.tsx
-var import_remotion13 = require("remotion");
+var import_remotion14 = require("remotion");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function MediaBubble({
   src,
@@ -6866,7 +6994,7 @@ function MediaBubble({
         boxSizing: "border-box"
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-        import_remotion13.Img,
+        import_remotion14.Img,
         {
           src,
           style: {
@@ -7248,7 +7376,7 @@ function useResolvedPositions(elements, textValues) {
 }
 
 // src/Root.tsx
-var import_remotion14 = require("remotion");
+var import_remotion15 = require("remotion");
 var import_zod2 = require("zod");
 
 // src/compositions/IMessageDmComposition/types.ts
@@ -7926,7 +8054,7 @@ var calculateImageMetadata = async ({ props }) => {
 var RenderRoot = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-      import_remotion14.Composition,
+      import_remotion15.Composition,
       {
         id: "ImageEditorComposition",
         component: ImageComp,
@@ -7939,7 +8067,7 @@ var RenderRoot = () => {
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-      import_remotion14.Composition,
+      import_remotion15.Composition,
       {
         id: "VideoEditorComposition",
         component: VideoComp,
@@ -7951,7 +8079,7 @@ var RenderRoot = () => {
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-      import_remotion14.Composition,
+      import_remotion15.Composition,
       {
         id: "AutoCaptionComposition",
         component: AutoCaptionComp,
@@ -7963,7 +8091,7 @@ var RenderRoot = () => {
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-      import_remotion14.Composition,
+      import_remotion15.Composition,
       {
         id: "ScreenshotAnimationComposition",
         component: ScreenshotAnimationComp,
@@ -7976,7 +8104,7 @@ var RenderRoot = () => {
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-      import_remotion14.Composition,
+      import_remotion15.Composition,
       {
         id: "InstagramDmComposition",
         component: InstagramDmComp,
@@ -7989,7 +8117,7 @@ var RenderRoot = () => {
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-      import_remotion14.Composition,
+      import_remotion15.Composition,
       {
         id: "IMessageDmComposition",
         component: IMessageDmComp,

package/dist/index.mjs

@@ -1948,6 +1948,7 @@ function ScreenshotAnimation({
 
 // src/compositions/InstagramDmComposition/index.tsx
 import { useMemo as useMemo7 } from "react";
+import { Img as Img5, staticFile as staticFile3 } from "remotion";
 
 // src/compositions/DmComposition/BaseDmComposition.tsx
 import { useCallback as useCallback2, useEffect as useEffect3, useState as useState3 } from "react";
@@ -3093,6 +3094,7 @@ function generateHeaderElements(props) {
   const username2FontSize = props.username2FontSize ?? HEADER_DEFAULTS.username2FontSize;
   const username2LetterSpacing = props.username2LetterSpacing ?? HEADER_DEFAULTS.username2LetterSpacing;
   const truncatedUsername = senderUsername.length > 9 ? senderUsername.substring(0, 9) + "..." : senderUsername;
+  const themeColors = getThemeColors(props.theme);
   const username1Height = username1FontSize;
   const username1Top = username1Bottom - username1Height;
   elements.push({
@@ -3107,7 +3109,7 @@ function generateHeaderElements(props) {
     font: "apple",
     fontSize: username1FontSize,
     fontWeight: "bold",
-    color: "#fafafa",
+    color: themeColors.textPrimary,
     letterSpacing: username1LetterSpacing,
     textAlign: "left",
     verticalAlign: "middle"
@@ -3126,7 +3128,7 @@ function generateHeaderElements(props) {
     font: "apple",
     fontSize: username2FontSize,
     fontWeight: "normal",
-    color: "#a6afb6",
+    color: themeColors.textSecondary,
     letterSpacing: username2LetterSpacing,
     textAlign: "left",
     verticalAlign: "middle"
@@ -3836,7 +3838,7 @@ function convertPropsToElements(props) {
 }
 
 // src/compositions/InstagramDmComposition/index.tsx
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var defaultInstagramDmProps = {
   showDebugOverlay: true,
   referenceImageUrl: "https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/8ff1462b-13d7-4abe-9325-0a6ad19004f0/IMG_3186-L1M2HgmhYFpnI5uKDrhcKYpRQSzwoz.png",
@@ -4114,12 +4116,45 @@ function InstagramDmComposition(props) {
     homeIndicatorBottom = 2597,
     homeIndicatorLeft = 387,
     homeIndicatorRight = 818,
-    homeIndicatorColor = "#ffffff"
+    homeIndicatorColor = "#ffffff",
+    // Header icon props
+    backArrowTop = 240,
+    backArrowBottom = 300,
+    backArrowLeft = 78,
+    backArrowRight = 111,
+    smilePlusTop = 234,
+    smilePlusBottom = 306,
+    smilePlusLeft = 663,
+    smilePlusRight = 735,
+    phoneIconTop = 237,
+    phoneIconBottom = 303,
+    phoneIconLeft = 807,
+    phoneIconRight = 873,
+    videoIconTop = 240,
+    videoIconBottom = 300,
+    videoIconLeft = 948,
+    videoIconRight = 1020,
+    flagTop = 237,
+    flagBottom = 303,
+    flagLeft = 1098,
+    flagRight = 1153,
+    usernameArrowTop = 231,
+    usernameArrowBottom = 260,
+    usernameArrowLeft = 619,
+    usernameArrowRight = 636
   } = props;
-  const { elements, imageUrls } = useMemo7(() => {
-    return convertPropsToElements(props);
-  }, [props]);
   const colors = getThemeColors(theme);
+  const isLightMode = theme === "light";
+  const { elements, imageUrls } = useMemo7(() => {
+    const propsWithThemeColors = {
+      ...props,
+      recipientBubbleColor: isLightMode ? colors.recipientBubble : props.recipientBubbleColor ?? "#25282d"
+    };
+    return convertPropsToElements(propsWithThemeColors);
+  }, [props, isLightMode, colors.recipientBubble]);
+  const effectiveHomeIndicatorColor = isLightMode ? "#000000" : homeIndicatorColor;
+  const effectiveStatusBarColor = isLightMode ? "#000000" : "#ffffff";
+  const headerIconFilter = isLightMode ? "invert(1)" : "none";
   return /* @__PURE__ */ jsxs9(
     BaseDmComposition,
     {
@@ -4169,7 +4204,8 @@ function InstagramDmComposition(props) {
       homeIndicatorBottom,
       homeIndicatorLeft,
       homeIndicatorRight,
-      homeIndicatorColor,
+      homeIndicatorColor: effectiveHomeIndicatorColor,
+      statusBarColor: effectiveStatusBarColor,
       children: [
         /* @__PURE__ */ jsx11(
           ImageEditorComposition,
@@ -4198,7 +4234,99 @@ function InstagramDmComposition(props) {
               zIndex: 29
             }
           }
-        )
+        ),
+        isLightMode && /* @__PURE__ */ jsxs9(Fragment2, { children: [
+          /* @__PURE__ */ jsx11(
+            Img5,
+            {
+              src: staticFile3("ig-header-left-arrow.png"),
+              style: {
+                position: "absolute",
+                top: backArrowTop,
+                left: backArrowLeft,
+                width: backArrowRight - backArrowLeft,
+                height: backArrowBottom - backArrowTop,
+                zIndex: 31,
+                filter: headerIconFilter
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx11(
+            Img5,
+            {
+              src: staticFile3("ig-smile-plus.png"),
+              style: {
+                position: "absolute",
+                top: smilePlusTop,
+                left: smilePlusLeft,
+                width: smilePlusRight - smilePlusLeft,
+                height: smilePlusBottom - smilePlusTop,
+                zIndex: 31,
+                filter: headerIconFilter
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx11(
+            Img5,
+            {
+              src: staticFile3("ig-phone.png"),
+              style: {
+                position: "absolute",
+                top: phoneIconTop,
+                left: phoneIconLeft,
+                width: phoneIconRight - phoneIconLeft,
+                height: phoneIconBottom - phoneIconTop,
+                zIndex: 31,
+                filter: headerIconFilter
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx11(
+            Img5,
+            {
+              src: staticFile3("ig-video.png"),
+              style: {
+                position: "absolute",
+                top: videoIconTop,
+                left: videoIconLeft,
+                width: videoIconRight - videoIconLeft,
+                height: videoIconBottom - videoIconTop,
+                zIndex: 31,
+                filter: headerIconFilter
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx11(
+            Img5,
+            {
+              src: staticFile3("ig-flag.png"),
+              style: {
+                position: "absolute",
+                top: flagTop,
+                left: flagLeft,
+                width: flagRight - flagLeft,
+                height: flagBottom - flagTop,
+                zIndex: 31,
+                filter: headerIconFilter
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx11(
+            Img5,
+            {
+              src: staticFile3("ig-username-right-arrow.png"),
+              style: {
+                position: "absolute",
+                top: usernameArrowTop,
+                left: usernameArrowLeft,
+                width: usernameArrowRight - usernameArrowLeft,
+                height: usernameArrowBottom - usernameArrowTop,
+                zIndex: 31,
+                filter: headerIconFilter
+              }
+            }
+          )
+        ] })
       ]
     }
   );
@@ -4306,7 +4434,7 @@ function convertPublicToProps(input) {
 
 // src/compositions/IMessageDmComposition/index.tsx
 import { useEffect as useEffect4, useMemo as useMemo8, useState as useState4 } from "react";
-import { Img as Img5, staticFile as staticFile3, delayRender as delayRender3, continueRender as continueRender3 } from "remotion";
+import { Img as Img6, staticFile as staticFile4, delayRender as delayRender3, continueRender as continueRender3 } from "remotion";
 
 // src/compositions/IMessageDmComposition/convertPropsToElements.ts
 var SENDER_IMAGE_INPUT_ID_PREFIX = "sender-image-";
@@ -5308,9 +5436,9 @@ var IMessageDmComposition = (props) => {
           }
         ),
         /* @__PURE__ */ jsx12(
-          Img5,
+          Img6,
           {
-            src: staticFile3("imsg-header-left-arrow.png"),
+            src: staticFile4("imsg-header-left-arrow.png"),
             style: {
               position: "absolute",
               top: backArrowTop,
@@ -5355,9 +5483,9 @@ var IMessageDmComposition = (props) => {
           }
         ),
         /* @__PURE__ */ jsx12(
-          Img5,
+          Img6,
           {
-            src: staticFile3("imsg-header-camera.png"),
+            src: staticFile4("imsg-header-camera.png"),
             style: {
               position: "absolute",
               top: cameraIconTop,
@@ -5383,7 +5511,7 @@ var IMessageDmComposition = (props) => {
           }
         ),
         profilePicUrl && /* @__PURE__ */ jsx12(
-          Img5,
+          Img6,
           {
             src: profilePicUrl,
             style: {
@@ -5428,9 +5556,9 @@ var IMessageDmComposition = (props) => {
                 }
               ),
               /* @__PURE__ */ jsx12(
-                Img5,
+                Img6,
                 {
-                  src: staticFile3("imsg-name-right-arrow.png"),
+                  src: staticFile4("imsg-name-right-arrow.png"),
                   style: {
                     marginLeft: usernameArrowOffsetX,
                     marginTop: usernameArrowOffsetY,
@@ -5443,9 +5571,9 @@ var IMessageDmComposition = (props) => {
           }
         ),
         /* @__PURE__ */ jsx12(
-          Img5,
+          Img6,
           {
-            src: staticFile3(lightMode ? "imsg-light-footer-plus.png" : "imsg-footer-plus.png"),
+            src: staticFile4(lightMode ? "imsg-light-footer-plus.png" : "imsg-footer-plus.png"),
             style: {
               position: "absolute",
               top: plusButtonTop,
@@ -5457,9 +5585,9 @@ var IMessageDmComposition = (props) => {
           }
         ),
         lightMode ? /* @__PURE__ */ jsx12(
-          Img5,
+          Img6,
           {
-            src: staticFile3("imsg-light-main-footer.png"),
+            src: staticFile4("imsg-light-main-footer.png"),
             style: {
               position: "absolute",
               top: footerTop,
@@ -5704,7 +5832,7 @@ function MessageBubble({
 }
 
 // src/compositions/messaging/components/ProfilePic.tsx
-import { Img as Img6 } from "remotion";
+import { Img as Img7 } from "remotion";
 import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 function ProfilePic({
   src,
@@ -5739,7 +5867,7 @@ function ProfilePic({
               boxSizing: "border-box"
             },
             children: /* @__PURE__ */ jsx14(
-              Img6,
+              Img7,
               {
                 src,
                 style: {
@@ -5889,7 +6017,7 @@ function TypingIndicator({
 }
 
 // src/compositions/messaging/components/MediaBubble.tsx
-import { Img as Img7 } from "remotion";
+import { Img as Img8 } from "remotion";
 import { jsx as jsx17 } from "react/jsx-runtime";
 function MediaBubble({
   src,
@@ -5912,7 +6040,7 @@ function MediaBubble({
         boxSizing: "border-box"
       },
       children: /* @__PURE__ */ jsx17(
-        Img7,
+        Img8,
         {
           src,
           style: {
@@ -6231,7 +6359,7 @@ var iMessageDmPropsSchema = z.object({
 });
 
 // src/Root.tsx
-import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 var defaultImageProps = {
   config: {
     width: 1080,
@@ -6687,7 +6815,7 @@ var calculateImageMetadata = async ({ props }) => {
   };
 };
 var RenderRoot = () => {
-  return /* @__PURE__ */ jsxs13(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs13(Fragment3, { children: [
     /* @__PURE__ */ jsx18(
       Composition,
       {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugcinc-render",
-  "version": "1.8.192",
+  "version": "1.8.193",
   "description": "Unified rendering package for UGC Inc - shared types, components, and compositions for pixel-perfect client/server rendering",
   "main": "dist/index.js",
   "module": "dist/index.mjs",