ugcinc-render 1.8.62 → 1.8.63

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.d.mts +80 -0
  2. package/dist/index.d.ts +80 -0
  3. package/dist/index.js +167 -71
  4. package/dist/index.mjs +167 -71
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -810,6 +810,30 @@ interface IgStatusBarConfig {
810
810
  batteryLevel?: number;
811
811
  /** Whether the device is charging */
812
812
  isCharging?: boolean;
813
+ /** Status bar height in pixels */
814
+ height?: number;
815
+ /** Horizontal padding in pixels */
816
+ paddingH?: number;
817
+ /** Gap between icons in pixels */
818
+ iconGap?: number;
819
+ /** Width of dynamic island/notch area in pixels */
820
+ dynamicIslandWidth?: number;
821
+ /** Time font size in pixels */
822
+ timeFontSize?: number;
823
+ /** Time font weight */
824
+ timeFontWeight?: FontWeight;
825
+ /** Cellular icon width in pixels */
826
+ cellularIconWidth?: number;
827
+ /** Cellular icon height in pixels */
828
+ cellularIconHeight?: number;
829
+ /** WiFi icon width in pixels */
830
+ wifiIconWidth?: number;
831
+ /** WiFi icon height in pixels */
832
+ wifiIconHeight?: number;
833
+ /** Battery icon width in pixels */
834
+ batteryIconWidth?: number;
835
+ /** Battery icon height in pixels */
836
+ batteryIconHeight?: number;
813
837
  }
814
838
  /** Instagram DM header configuration */
815
839
  interface IgHeaderConfig {
@@ -823,6 +847,36 @@ interface IgHeaderConfig {
823
847
  showCallButton: boolean;
824
848
  /** Show info button */
825
849
  showInfoButton: boolean;
850
+ /** Horizontal padding in pixels */
851
+ paddingH?: number;
852
+ /** Gap between main elements in pixels */
853
+ gap?: number;
854
+ /** Gap between action buttons in pixels */
855
+ actionButtonGap?: number;
856
+ /** Avatar size in pixels */
857
+ avatarSize?: number;
858
+ /** Active status dot size in pixels */
859
+ activeDotSize?: number;
860
+ /** Active status dot border width in pixels */
861
+ activeDotBorderWidth?: number;
862
+ /** Username/display name font size in pixels */
863
+ usernameFontSize?: number;
864
+ /** Username/display name font weight */
865
+ usernameFontWeight?: FontWeight;
866
+ /** Subtitle font size in pixels */
867
+ subtitleFontSize?: number;
868
+ /** Gap between username and subtitle in pixels */
869
+ profileInfoGap?: number;
870
+ /** Back icon size in pixels */
871
+ backIconSize?: number;
872
+ /** Video call icon size in pixels */
873
+ videoCallIconSize?: number;
874
+ /** Voice call icon size in pixels */
875
+ callIconSize?: number;
876
+ /** Info icon size in pixels */
877
+ infoIconSize?: number;
878
+ /** Verified badge size in pixels */
879
+ verifiedBadgeSize?: number;
826
880
  }
827
881
  /** Instagram DM footer configuration */
828
882
  interface IgFooterConfig {
@@ -840,6 +894,32 @@ interface IgFooterConfig {
840
894
  placeholderText: string;
841
895
  /** Optional text already in input field */
842
896
  inputText?: string;
897
+ /** Horizontal padding in pixels */
898
+ paddingH?: number;
899
+ /** Gap between main elements in pixels */
900
+ gap?: number;
901
+ /** Camera button size in pixels */
902
+ cameraButtonSize?: number;
903
+ /** Camera icon size in pixels */
904
+ cameraIconSize?: number;
905
+ /** Input field height in pixels */
906
+ inputHeight?: number;
907
+ /** Input field border radius in pixels */
908
+ inputBorderRadius?: number;
909
+ /** Input field horizontal padding in pixels */
910
+ inputPaddingH?: number;
911
+ /** Input field font size in pixels */
912
+ inputFontSize?: number;
913
+ /** Gap between icons inside input field in pixels */
914
+ inputIconGap?: number;
915
+ /** Input field border width in pixels */
916
+ inputBorderWidth?: number;
917
+ /** Sticker icon size in pixels */
918
+ stickerIconSize?: number;
919
+ /** Gallery icon size in pixels */
920
+ galleryIconSize?: number;
921
+ /** Mic icon size in pixels */
922
+ micIconSize?: number;
843
923
  }
844
924
  /** Instagram DM message styling configuration */
845
925
  interface IgMessageStyle {
package/dist/index.d.ts CHANGED
@@ -810,6 +810,30 @@ interface IgStatusBarConfig {
810
810
  batteryLevel?: number;
811
811
  /** Whether the device is charging */
812
812
  isCharging?: boolean;
813
+ /** Status bar height in pixels */
814
+ height?: number;
815
+ /** Horizontal padding in pixels */
816
+ paddingH?: number;
817
+ /** Gap between icons in pixels */
818
+ iconGap?: number;
819
+ /** Width of dynamic island/notch area in pixels */
820
+ dynamicIslandWidth?: number;
821
+ /** Time font size in pixels */
822
+ timeFontSize?: number;
823
+ /** Time font weight */
824
+ timeFontWeight?: FontWeight;
825
+ /** Cellular icon width in pixels */
826
+ cellularIconWidth?: number;
827
+ /** Cellular icon height in pixels */
828
+ cellularIconHeight?: number;
829
+ /** WiFi icon width in pixels */
830
+ wifiIconWidth?: number;
831
+ /** WiFi icon height in pixels */
832
+ wifiIconHeight?: number;
833
+ /** Battery icon width in pixels */
834
+ batteryIconWidth?: number;
835
+ /** Battery icon height in pixels */
836
+ batteryIconHeight?: number;
813
837
  }
814
838
  /** Instagram DM header configuration */
815
839
  interface IgHeaderConfig {
@@ -823,6 +847,36 @@ interface IgHeaderConfig {
823
847
  showCallButton: boolean;
824
848
  /** Show info button */
825
849
  showInfoButton: boolean;
850
+ /** Horizontal padding in pixels */
851
+ paddingH?: number;
852
+ /** Gap between main elements in pixels */
853
+ gap?: number;
854
+ /** Gap between action buttons in pixels */
855
+ actionButtonGap?: number;
856
+ /** Avatar size in pixels */
857
+ avatarSize?: number;
858
+ /** Active status dot size in pixels */
859
+ activeDotSize?: number;
860
+ /** Active status dot border width in pixels */
861
+ activeDotBorderWidth?: number;
862
+ /** Username/display name font size in pixels */
863
+ usernameFontSize?: number;
864
+ /** Username/display name font weight */
865
+ usernameFontWeight?: FontWeight;
866
+ /** Subtitle font size in pixels */
867
+ subtitleFontSize?: number;
868
+ /** Gap between username and subtitle in pixels */
869
+ profileInfoGap?: number;
870
+ /** Back icon size in pixels */
871
+ backIconSize?: number;
872
+ /** Video call icon size in pixels */
873
+ videoCallIconSize?: number;
874
+ /** Voice call icon size in pixels */
875
+ callIconSize?: number;
876
+ /** Info icon size in pixels */
877
+ infoIconSize?: number;
878
+ /** Verified badge size in pixels */
879
+ verifiedBadgeSize?: number;
826
880
  }
827
881
  /** Instagram DM footer configuration */
828
882
  interface IgFooterConfig {
@@ -840,6 +894,32 @@ interface IgFooterConfig {
840
894
  placeholderText: string;
841
895
  /** Optional text already in input field */
842
896
  inputText?: string;
897
+ /** Horizontal padding in pixels */
898
+ paddingH?: number;
899
+ /** Gap between main elements in pixels */
900
+ gap?: number;
901
+ /** Camera button size in pixels */
902
+ cameraButtonSize?: number;
903
+ /** Camera icon size in pixels */
904
+ cameraIconSize?: number;
905
+ /** Input field height in pixels */
906
+ inputHeight?: number;
907
+ /** Input field border radius in pixels */
908
+ inputBorderRadius?: number;
909
+ /** Input field horizontal padding in pixels */
910
+ inputPaddingH?: number;
911
+ /** Input field font size in pixels */
912
+ inputFontSize?: number;
913
+ /** Gap between icons inside input field in pixels */
914
+ inputIconGap?: number;
915
+ /** Input field border width in pixels */
916
+ inputBorderWidth?: number;
917
+ /** Sticker icon size in pixels */
918
+ stickerIconSize?: number;
919
+ /** Gallery icon size in pixels */
920
+ galleryIconSize?: number;
921
+ /** Mic icon size in pixels */
922
+ micIconSize?: number;
843
923
  }
844
924
  /** Instagram DM message styling configuration */
845
925
  interface IgMessageStyle {
package/dist/index.js CHANGED
@@ -2776,14 +2776,48 @@ var DEFAULT_STATUS_BAR = {
2776
2776
  showWifi: true,
2777
2777
  showBattery: true,
2778
2778
  batteryLevel: 100,
2779
- isCharging: false
2779
+ isCharging: false,
2780
+ // Layout
2781
+ height: 75,
2782
+ paddingH: 36,
2783
+ iconGap: 8,
2784
+ dynamicIslandWidth: 180,
2785
+ // Typography
2786
+ timeFontSize: 24,
2787
+ timeFontWeight: "bold",
2788
+ // Icon sizes
2789
+ cellularIconWidth: 26,
2790
+ cellularIconHeight: 18,
2791
+ wifiIconWidth: 24,
2792
+ wifiIconHeight: 18,
2793
+ batteryIconWidth: 38,
2794
+ batteryIconHeight: 18
2780
2795
  };
2781
2796
  var DEFAULT_HEADER = {
2782
2797
  height: 160,
2783
2798
  showBackButton: true,
2784
2799
  showVideoCallButton: true,
2785
2800
  showCallButton: true,
2786
- showInfoButton: true
2801
+ showInfoButton: true,
2802
+ // Layout
2803
+ paddingH: 18,
2804
+ gap: 16,
2805
+ actionButtonGap: 28,
2806
+ // Avatar
2807
+ avatarSize: 64,
2808
+ activeDotSize: 20,
2809
+ activeDotBorderWidth: 3,
2810
+ // Typography
2811
+ usernameFontSize: 24,
2812
+ usernameFontWeight: "bold",
2813
+ subtitleFontSize: 18,
2814
+ profileInfoGap: 4,
2815
+ // Icon sizes
2816
+ backIconSize: 34,
2817
+ videoCallIconSize: 36,
2818
+ callIconSize: 34,
2819
+ infoIconSize: 34,
2820
+ verifiedBadgeSize: 20
2787
2821
  };
2788
2822
  var DEFAULT_FOOTER = {
2789
2823
  height: 130,
@@ -2791,7 +2825,24 @@ var DEFAULT_FOOTER = {
2791
2825
  showGallery: true,
2792
2826
  showMic: true,
2793
2827
  showSticker: true,
2794
- placeholderText: "Message..."
2828
+ placeholderText: "Message...",
2829
+ // Layout
2830
+ paddingH: 18,
2831
+ gap: 16,
2832
+ // Camera button
2833
+ cameraButtonSize: 64,
2834
+ cameraIconSize: 36,
2835
+ // Input field
2836
+ inputHeight: 64,
2837
+ inputBorderRadius: 32,
2838
+ inputPaddingH: 24,
2839
+ inputFontSize: 24,
2840
+ inputIconGap: 16,
2841
+ inputBorderWidth: 1.5,
2842
+ // Icon sizes
2843
+ stickerIconSize: 34,
2844
+ galleryIconSize: 34,
2845
+ micIconSize: 32
2795
2846
  };
2796
2847
  var DEFAULT_RECIPIENT_BUBBLE = {
2797
2848
  type: "solid",
@@ -2870,17 +2921,16 @@ function mergeStatusBarConfig(partial) {
2870
2921
 
2871
2922
  // src/compositions/InstagramDmComposition/components/IgStatusBar.tsx
2872
2923
  var import_jsx_runtime9 = require("react/jsx-runtime");
2873
- var STATUS_BAR_HEIGHT = 75;
2874
- function CellularIcon({ color }) {
2875
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { width: "26", height: "18", viewBox: "0 0 18 12", fill: "none", children: [
2924
+ function CellularIcon({ color, width, height }) {
2925
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { width, height, viewBox: "0 0 18 12", fill: "none", children: [
2876
2926
  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: "0", y: "8", width: "3", height: "4", rx: "0.5", fill: color }),
2877
2927
  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: "4", y: "5", width: "3", height: "7", rx: "0.5", fill: color }),
2878
2928
  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: "8", y: "3", width: "3", height: "9", rx: "0.5", fill: color }),
2879
2929
  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: "12", y: "0", width: "3", height: "12", rx: "0.5", fill: color })
2880
2930
  ] });
2881
2931
  }
2882
- function WifiIcon({ color }) {
2883
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { width: "24", height: "18", viewBox: "0 0 17 12", fill: "none", children: [
2932
+ function WifiIcon({ color, width, height }) {
2933
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { width, height, viewBox: "0 0 17 12", fill: "none", children: [
2884
2934
  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2885
2935
  "path",
2886
2936
  {
@@ -2940,12 +2990,14 @@ function WifiIcon({ color }) {
2940
2990
  }
2941
2991
  function BatteryIcon({
2942
2992
  color,
2993
+ width,
2994
+ height,
2943
2995
  level = 100,
2944
2996
  isCharging = false
2945
2997
  }) {
2946
2998
  const fillWidth = Math.max(0, Math.min(100, level)) * 0.22;
2947
2999
  const fillColor = level <= 20 ? "#FF3B30" : isCharging ? "#34C759" : color;
2948
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { width: "38", height: "18", viewBox: "0 0 27 13", fill: "none", children: [
3000
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { width, height, viewBox: "0 0 27 13", fill: "none", children: [
2949
3001
  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2950
3002
  "rect",
2951
3003
  {
@@ -2983,6 +3035,18 @@ function BatteryIcon({
2983
3035
  function IgStatusBar({ config, theme, width }) {
2984
3036
  const colors = getThemeColors(theme);
2985
3037
  const textColor = colors.statusBarText;
3038
+ const height = config.height ?? 75;
3039
+ const paddingH = config.paddingH ?? 36;
3040
+ const iconGap = config.iconGap ?? 8;
3041
+ const dynamicIslandWidth = config.dynamicIslandWidth ?? 180;
3042
+ const timeFontSize = config.timeFontSize ?? 24;
3043
+ const timeFontWeight = config.timeFontWeight ?? 600;
3044
+ const cellularIconWidth = config.cellularIconWidth ?? 26;
3045
+ const cellularIconHeight = config.cellularIconHeight ?? 18;
3046
+ const wifiIconWidth = config.wifiIconWidth ?? 24;
3047
+ const wifiIconHeight = config.wifiIconHeight ?? 18;
3048
+ const batteryIconWidth = config.batteryIconWidth ?? 38;
3049
+ const batteryIconHeight = config.batteryIconHeight ?? 18;
2986
3050
  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
2987
3051
  "div",
2988
3052
  {
@@ -2991,11 +3055,11 @@ function IgStatusBar({ config, theme, width }) {
2991
3055
  top: 0,
2992
3056
  left: 0,
2993
3057
  right: 0,
2994
- height: STATUS_BAR_HEIGHT,
3058
+ height,
2995
3059
  display: "flex",
2996
3060
  alignItems: "center",
2997
3061
  justifyContent: "space-between",
2998
- padding: "0 36px",
3062
+ padding: `0 ${paddingH}px`,
2999
3063
  zIndex: 20
3000
3064
  },
3001
3065
  children: [
@@ -3003,8 +3067,8 @@ function IgStatusBar({ config, theme, width }) {
3003
3067
  "div",
3004
3068
  {
3005
3069
  style: {
3006
- fontSize: 24,
3007
- fontWeight: 600,
3070
+ fontSize: timeFontSize,
3071
+ fontWeight: timeFontWeight,
3008
3072
  fontFamily: '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif',
3009
3073
  color: textColor,
3010
3074
  minWidth: 70
@@ -3016,7 +3080,7 @@ function IgStatusBar({ config, theme, width }) {
3016
3080
  "div",
3017
3081
  {
3018
3082
  style: {
3019
- width: width > 1e3 ? 180 : 120,
3083
+ width: dynamicIslandWidth,
3020
3084
  height: 48,
3021
3085
  backgroundColor: "transparent"
3022
3086
  }
@@ -3028,15 +3092,17 @@ function IgStatusBar({ config, theme, width }) {
3028
3092
  style: {
3029
3093
  display: "flex",
3030
3094
  alignItems: "center",
3031
- gap: 8
3095
+ gap: iconGap
3032
3096
  },
3033
3097
  children: [
3034
- config.showCellular && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CellularIcon, { color: textColor }),
3035
- config.showWifi && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(WifiIcon, { color: textColor }),
3098
+ config.showCellular && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CellularIcon, { color: textColor, width: cellularIconWidth, height: cellularIconHeight }),
3099
+ config.showWifi && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(WifiIcon, { color: textColor, width: wifiIconWidth, height: wifiIconHeight }),
3036
3100
  config.showBattery && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3037
3101
  BatteryIcon,
3038
3102
  {
3039
3103
  color: textColor,
3104
+ width: batteryIconWidth,
3105
+ height: batteryIconHeight,
3040
3106
  level: config.batteryLevel,
3041
3107
  isCharging: config.isCharging
3042
3108
  }
@@ -3052,8 +3118,8 @@ function IgStatusBar({ config, theme, width }) {
3052
3118
  // src/compositions/InstagramDmComposition/components/IgHeader.tsx
3053
3119
  var import_remotion8 = require("remotion");
3054
3120
  var import_jsx_runtime10 = require("react/jsx-runtime");
3055
- function BackIcon({ color }) {
3056
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { width: "34", height: "34", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3121
+ function BackIcon({ color, size }) {
3122
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3057
3123
  "path",
3058
3124
  {
3059
3125
  d: "M15 18L9 12L15 6",
@@ -3064,8 +3130,8 @@ function BackIcon({ color }) {
3064
3130
  }
3065
3131
  ) });
3066
3132
  }
3067
- function VideoCallIcon({ color }) {
3068
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("svg", { width: "36", height: "36", viewBox: "0 0 24 24", fill: "none", children: [
3133
+ function VideoCallIcon({ color, size }) {
3134
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
3069
3135
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3070
3136
  "rect",
3071
3137
  {
@@ -3090,8 +3156,8 @@ function VideoCallIcon({ color }) {
3090
3156
  )
3091
3157
  ] });
3092
3158
  }
3093
- function CallIcon({ color }) {
3094
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { width: "34", height: "34", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3159
+ function CallIcon({ color, size }) {
3160
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3095
3161
  "path",
3096
3162
  {
3097
3163
  d: "M22 16.92V19.92C22 20.48 21.56 20.97 20.92 21C14.44 21.5 8.5 19.1 4.7 15.3C0.9 11.5 -1.5 5.56 3 3.08C3.03 2.44 3.52 2 4.08 2H7.08C7.56 2 7.97 2.34 8.05 2.81C8.22 3.87 8.54 4.9 9 5.85C9.14 6.14 9.07 6.49 8.83 6.71L7.29 8.25C8.91 11.1 11.19 13.38 14.04 15L15.58 13.46C15.8 13.22 16.15 13.15 16.44 13.29C17.39 13.75 18.42 14.07 19.48 14.24C19.95 14.32 20.29 14.73 20.29 15.21V16.92H22Z",
@@ -3102,8 +3168,8 @@ function CallIcon({ color }) {
3102
3168
  }
3103
3169
  ) });
3104
3170
  }
3105
- function InfoIcon({ color }) {
3106
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("svg", { width: "34", height: "34", viewBox: "0 0 24 24", fill: "none", children: [
3171
+ function InfoIcon({ color, size }) {
3172
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
3107
3173
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: color, strokeWidth: "2" }),
3108
3174
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3109
3175
  "path",
@@ -3117,8 +3183,8 @@ function InfoIcon({ color }) {
3117
3183
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "12", cy: "8", r: "1", fill: color })
3118
3184
  ] });
3119
3185
  }
3120
- function VerifiedBadge() {
3121
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "#3897F0", children: [
3186
+ function VerifiedBadge({ size }) {
3187
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "#3897F0", children: [
3122
3188
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M12 2L14.4 4.4L17.6 3.6L18.4 6.8L21.6 7.6L20.8 10.8L24 12L20.8 13.2L21.6 16.4L18.4 17.2L17.6 20.4L14.4 19.6L12 22L9.6 19.6L6.4 20.4L5.6 17.2L2.4 16.4L3.2 13.2L0 12L3.2 10.8L2.4 7.6L5.6 6.8L6.4 3.6L9.6 4.4L12 2Z" }),
3123
3189
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3124
3190
  "path",
@@ -3132,22 +3198,37 @@ function VerifiedBadge() {
3132
3198
  )
3133
3199
  ] });
3134
3200
  }
3135
- function IgHeader({ config, theme, recipient, avatarUrl }) {
3201
+ function IgHeader({ config, theme, recipient, avatarUrl, statusBarHeight }) {
3136
3202
  const colors = getThemeColors(theme);
3137
3203
  const iconColor = colors.iconColor;
3204
+ const paddingH = config.paddingH ?? 18;
3205
+ const gap = config.gap ?? 16;
3206
+ const actionButtonGap = config.actionButtonGap ?? 28;
3207
+ const avatarSize = config.avatarSize ?? 64;
3208
+ const activeDotSize = config.activeDotSize ?? 20;
3209
+ const activeDotBorderWidth = config.activeDotBorderWidth ?? 3;
3210
+ const usernameFontSize = config.usernameFontSize ?? 24;
3211
+ const usernameFontWeight = config.usernameFontWeight ?? 600;
3212
+ const subtitleFontSize = config.subtitleFontSize ?? 18;
3213
+ const profileInfoGap = config.profileInfoGap ?? 4;
3214
+ const backIconSize = config.backIconSize ?? 34;
3215
+ const videoCallIconSize = config.videoCallIconSize ?? 36;
3216
+ const callIconSize = config.callIconSize ?? 34;
3217
+ const infoIconSize = config.infoIconSize ?? 34;
3218
+ const verifiedBadgeSize = config.verifiedBadgeSize ?? 20;
3138
3219
  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
3139
3220
  "div",
3140
3221
  {
3141
3222
  style: {
3142
3223
  position: "absolute",
3143
- top: STATUS_BAR_HEIGHT,
3224
+ top: statusBarHeight,
3144
3225
  left: 0,
3145
3226
  right: 0,
3146
3227
  height: config.height,
3147
3228
  backgroundColor: colors.headerBg,
3148
3229
  display: "flex",
3149
3230
  alignItems: "center",
3150
- padding: "0 18px",
3231
+ padding: `0 ${paddingH}px`,
3151
3232
  zIndex: 10
3152
3233
  },
3153
3234
  children: [
@@ -3157,18 +3238,18 @@ function IgHeader({ config, theme, recipient, avatarUrl }) {
3157
3238
  style: {
3158
3239
  display: "flex",
3159
3240
  alignItems: "center",
3160
- gap: 16,
3241
+ gap,
3161
3242
  flex: 1
3162
3243
  },
3163
3244
  children: [
3164
- config.showBackButton && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { padding: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(BackIcon, { color: iconColor }) }),
3245
+ config.showBackButton && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { padding: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(BackIcon, { color: iconColor, size: backIconSize }) }),
3165
3246
  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
3166
3247
  "div",
3167
3248
  {
3168
3249
  style: {
3169
3250
  position: "relative",
3170
- width: 64,
3171
- height: 64,
3251
+ width: avatarSize,
3252
+ height: avatarSize,
3172
3253
  borderRadius: "50%",
3173
3254
  overflow: "hidden",
3174
3255
  flexShrink: 0
@@ -3192,11 +3273,11 @@ function IgHeader({ config, theme, recipient, avatarUrl }) {
3192
3273
  position: "absolute",
3193
3274
  bottom: 0,
3194
3275
  right: 0,
3195
- width: 20,
3196
- height: 20,
3276
+ width: activeDotSize,
3277
+ height: activeDotSize,
3197
3278
  borderRadius: "50%",
3198
3279
  backgroundColor: colors.activeGreen,
3199
- border: `3px solid ${colors.headerBg}`,
3280
+ border: `${activeDotBorderWidth}px solid ${colors.headerBg}`,
3200
3281
  boxSizing: "border-box"
3201
3282
  }
3202
3283
  }
@@ -3210,7 +3291,7 @@ function IgHeader({ config, theme, recipient, avatarUrl }) {
3210
3291
  style: {
3211
3292
  display: "flex",
3212
3293
  flexDirection: "column",
3213
- gap: 4
3294
+ gap: profileInfoGap
3214
3295
  },
3215
3296
  children: [
3216
3297
  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
@@ -3227,14 +3308,14 @@ function IgHeader({ config, theme, recipient, avatarUrl }) {
3227
3308
  {
3228
3309
  style: {
3229
3310
  fontFamily: '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif',
3230
- fontSize: 24,
3231
- fontWeight: 600,
3311
+ fontSize: usernameFontSize,
3312
+ fontWeight: usernameFontWeight,
3232
3313
  color: colors.textPrimary
3233
3314
  },
3234
3315
  children: recipient.displayName ?? recipient.username
3235
3316
  }
3236
3317
  ),
3237
- recipient.verified && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(VerifiedBadge, {})
3318
+ recipient.verified && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(VerifiedBadge, { size: verifiedBadgeSize })
3238
3319
  ]
3239
3320
  }
3240
3321
  ),
@@ -3243,7 +3324,7 @@ function IgHeader({ config, theme, recipient, avatarUrl }) {
3243
3324
  {
3244
3325
  style: {
3245
3326
  fontFamily: '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif',
3246
- fontSize: 18,
3327
+ fontSize: subtitleFontSize,
3247
3328
  color: colors.textSecondary
3248
3329
  },
3249
3330
  children: recipient.isActive ? "Active now" : recipient.displayName ? recipient.username : ""
@@ -3261,12 +3342,12 @@ function IgHeader({ config, theme, recipient, avatarUrl }) {
3261
3342
  style: {
3262
3343
  display: "flex",
3263
3344
  alignItems: "center",
3264
- gap: 28
3345
+ gap: actionButtonGap
3265
3346
  },
3266
3347
  children: [
3267
- config.showCallButton && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CallIcon, { color: iconColor }),
3268
- config.showVideoCallButton && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(VideoCallIcon, { color: iconColor }),
3269
- config.showInfoButton && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(InfoIcon, { color: iconColor })
3348
+ config.showCallButton && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CallIcon, { color: iconColor, size: callIconSize }),
3349
+ config.showVideoCallButton && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(VideoCallIcon, { color: iconColor, size: videoCallIconSize }),
3350
+ config.showInfoButton && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(InfoIcon, { color: iconColor, size: infoIconSize })
3270
3351
  ]
3271
3352
  }
3272
3353
  )
@@ -3277,8 +3358,8 @@ function IgHeader({ config, theme, recipient, avatarUrl }) {
3277
3358
 
3278
3359
  // src/compositions/InstagramDmComposition/components/IgFooter.tsx
3279
3360
  var import_jsx_runtime11 = require("react/jsx-runtime");
3280
- function CameraIcon({ color }) {
3281
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width: "36", height: "36", viewBox: "0 0 24 24", fill: "none", children: [
3361
+ function CameraIcon({ color, size }) {
3362
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
3282
3363
  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "12", cy: "13", r: "4", stroke: color, strokeWidth: "2" }),
3283
3364
  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
3284
3365
  "path",
@@ -3292,8 +3373,8 @@ function CameraIcon({ color }) {
3292
3373
  )
3293
3374
  ] });
3294
3375
  }
3295
- function GalleryIcon({ color }) {
3296
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width: "34", height: "34", viewBox: "0 0 24 24", fill: "none", children: [
3376
+ function GalleryIcon({ color, size }) {
3377
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
3297
3378
  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
3298
3379
  "rect",
3299
3380
  {
@@ -3319,8 +3400,8 @@ function GalleryIcon({ color }) {
3319
3400
  )
3320
3401
  ] });
3321
3402
  }
3322
- function MicIcon({ color }) {
3323
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: [
3403
+ function MicIcon({ color, size }) {
3404
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
3324
3405
  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("rect", { x: "9", y: "2", width: "6", height: "11", rx: "3", stroke: color, strokeWidth: "2" }),
3325
3406
  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
3326
3407
  "path",
@@ -3342,8 +3423,8 @@ function MicIcon({ color }) {
3342
3423
  )
3343
3424
  ] });
3344
3425
  }
3345
- function StickerIcon({ color }) {
3346
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width: "34", height: "34", viewBox: "0 0 24 24", fill: "none", children: [
3426
+ function StickerIcon({ color, size }) {
3427
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
3347
3428
  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: color, strokeWidth: "2" }),
3348
3429
  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
3349
3430
  "path",
@@ -3362,6 +3443,19 @@ function IgFooter({ config, theme, compositionHeight }) {
3362
3443
  const colors = getThemeColors(theme);
3363
3444
  const iconColor = colors.iconColor;
3364
3445
  const hasInputText = config.inputText && config.inputText.length > 0;
3446
+ const paddingH = config.paddingH ?? 18;
3447
+ const gap = config.gap ?? 16;
3448
+ const cameraButtonSize = config.cameraButtonSize ?? 64;
3449
+ const cameraIconSize = config.cameraIconSize ?? 36;
3450
+ const inputHeight = config.inputHeight ?? 64;
3451
+ const inputBorderRadius = config.inputBorderRadius ?? 32;
3452
+ const inputPaddingH = config.inputPaddingH ?? 24;
3453
+ const inputFontSize = config.inputFontSize ?? 24;
3454
+ const inputIconGap = config.inputIconGap ?? 16;
3455
+ const inputBorderWidth = config.inputBorderWidth ?? 1.5;
3456
+ const stickerIconSize = config.stickerIconSize ?? 34;
3457
+ const galleryIconSize = config.galleryIconSize ?? 34;
3458
+ const micIconSize = config.micIconSize ?? 32;
3365
3459
  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
3366
3460
  "div",
3367
3461
  {
@@ -3374,8 +3468,8 @@ function IgFooter({ config, theme, compositionHeight }) {
3374
3468
  backgroundColor: colors.footerBg,
3375
3469
  display: "flex",
3376
3470
  alignItems: "center",
3377
- padding: "0 18px",
3378
- gap: 16,
3471
+ padding: `0 ${paddingH}px`,
3472
+ gap,
3379
3473
  zIndex: 10
3380
3474
  },
3381
3475
  children: [
@@ -3383,8 +3477,8 @@ function IgFooter({ config, theme, compositionHeight }) {
3383
3477
  "div",
3384
3478
  {
3385
3479
  style: {
3386
- width: 64,
3387
- height: 64,
3480
+ width: cameraButtonSize,
3481
+ height: cameraButtonSize,
3388
3482
  borderRadius: "50%",
3389
3483
  backgroundColor: "#3797F0",
3390
3484
  display: "flex",
@@ -3392,7 +3486,7 @@ function IgFooter({ config, theme, compositionHeight }) {
3392
3486
  justifyContent: "center",
3393
3487
  flexShrink: 0
3394
3488
  },
3395
- children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CameraIcon, { color: "#FFFFFF" })
3489
+ children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CameraIcon, { color: "#FFFFFF", size: cameraIconSize })
3396
3490
  }
3397
3491
  ),
3398
3492
  /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
@@ -3400,14 +3494,14 @@ function IgFooter({ config, theme, compositionHeight }) {
3400
3494
  {
3401
3495
  style: {
3402
3496
  flex: 1,
3403
- height: 64,
3404
- borderRadius: 32,
3405
- border: `1.5px solid ${colors.divider}`,
3497
+ height: inputHeight,
3498
+ borderRadius: inputBorderRadius,
3499
+ border: `${inputBorderWidth}px solid ${colors.divider}`,
3406
3500
  backgroundColor: colors.footerBg,
3407
3501
  display: "flex",
3408
3502
  alignItems: "center",
3409
- padding: "0 24px",
3410
- gap: 16
3503
+ padding: `0 ${inputPaddingH}px`,
3504
+ gap: inputIconGap
3411
3505
  },
3412
3506
  children: [
3413
3507
  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -3416,7 +3510,7 @@ function IgFooter({ config, theme, compositionHeight }) {
3416
3510
  style: {
3417
3511
  flex: 1,
3418
3512
  fontFamily: '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif',
3419
- fontSize: 24,
3513
+ fontSize: inputFontSize,
3420
3514
  color: hasInputText ? colors.textPrimary : colors.textSecondary
3421
3515
  },
3422
3516
  children: hasInputText ? config.inputText : config.placeholderText
@@ -3428,18 +3522,18 @@ function IgFooter({ config, theme, compositionHeight }) {
3428
3522
  style: {
3429
3523
  display: "flex",
3430
3524
  alignItems: "center",
3431
- gap: 16
3525
+ gap: inputIconGap
3432
3526
  },
3433
3527
  children: [
3434
- config.showSticker && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StickerIcon, { color: iconColor }),
3435
- config.showGallery && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(GalleryIcon, { color: iconColor })
3528
+ config.showSticker && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StickerIcon, { color: iconColor, size: stickerIconSize }),
3529
+ config.showGallery && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(GalleryIcon, { color: iconColor, size: galleryIconSize })
3436
3530
  ]
3437
3531
  }
3438
3532
  )
3439
3533
  ]
3440
3534
  }
3441
3535
  ),
3442
- config.showMic && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { padding: 6, flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MicIcon, { color: iconColor }) })
3536
+ config.showMic && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { padding: 6, flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MicIcon, { color: iconColor, size: micIconSize }) })
3443
3537
  ]
3444
3538
  }
3445
3539
  );
@@ -4647,7 +4741,8 @@ function InstagramDmComposition({
4647
4741
  const colors = getThemeColors(theme);
4648
4742
  const userAvatarUrl = imageUrls[user.avatarInputId] ?? "";
4649
4743
  const recipientAvatarUrl = imageUrls[recipient.avatarInputId] ?? "";
4650
- const headerHeight = STATUS_BAR_HEIGHT + mergedHeader.height;
4744
+ const statusBarHeight = mergedStatusBar.height ?? 75;
4745
+ const headerHeight = statusBarHeight + mergedHeader.height;
4651
4746
  const footerHeight = mergedFooter.height;
4652
4747
  const contentTop = headerHeight;
4653
4748
  const contentHeight = height - headerHeight - footerHeight;
@@ -4660,7 +4755,8 @@ function InstagramDmComposition({
4660
4755
  config: mergedHeader,
4661
4756
  theme,
4662
4757
  recipient,
4663
- avatarUrl: recipientAvatarUrl
4758
+ avatarUrl: recipientAvatarUrl,
4759
+ statusBarHeight
4664
4760
  }
4665
4761
  ),
4666
4762
  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
package/dist/index.mjs CHANGED
@@ -1880,14 +1880,48 @@ var DEFAULT_STATUS_BAR = {
1880
1880
  showWifi: true,
1881
1881
  showBattery: true,
1882
1882
  batteryLevel: 100,
1883
- isCharging: false
1883
+ isCharging: false,
1884
+ // Layout
1885
+ height: 75,
1886
+ paddingH: 36,
1887
+ iconGap: 8,
1888
+ dynamicIslandWidth: 180,
1889
+ // Typography
1890
+ timeFontSize: 24,
1891
+ timeFontWeight: "bold",
1892
+ // Icon sizes
1893
+ cellularIconWidth: 26,
1894
+ cellularIconHeight: 18,
1895
+ wifiIconWidth: 24,
1896
+ wifiIconHeight: 18,
1897
+ batteryIconWidth: 38,
1898
+ batteryIconHeight: 18
1884
1899
  };
1885
1900
  var DEFAULT_HEADER = {
1886
1901
  height: 160,
1887
1902
  showBackButton: true,
1888
1903
  showVideoCallButton: true,
1889
1904
  showCallButton: true,
1890
- showInfoButton: true
1905
+ showInfoButton: true,
1906
+ // Layout
1907
+ paddingH: 18,
1908
+ gap: 16,
1909
+ actionButtonGap: 28,
1910
+ // Avatar
1911
+ avatarSize: 64,
1912
+ activeDotSize: 20,
1913
+ activeDotBorderWidth: 3,
1914
+ // Typography
1915
+ usernameFontSize: 24,
1916
+ usernameFontWeight: "bold",
1917
+ subtitleFontSize: 18,
1918
+ profileInfoGap: 4,
1919
+ // Icon sizes
1920
+ backIconSize: 34,
1921
+ videoCallIconSize: 36,
1922
+ callIconSize: 34,
1923
+ infoIconSize: 34,
1924
+ verifiedBadgeSize: 20
1891
1925
  };
1892
1926
  var DEFAULT_FOOTER = {
1893
1927
  height: 130,
@@ -1895,7 +1929,24 @@ var DEFAULT_FOOTER = {
1895
1929
  showGallery: true,
1896
1930
  showMic: true,
1897
1931
  showSticker: true,
1898
- placeholderText: "Message..."
1932
+ placeholderText: "Message...",
1933
+ // Layout
1934
+ paddingH: 18,
1935
+ gap: 16,
1936
+ // Camera button
1937
+ cameraButtonSize: 64,
1938
+ cameraIconSize: 36,
1939
+ // Input field
1940
+ inputHeight: 64,
1941
+ inputBorderRadius: 32,
1942
+ inputPaddingH: 24,
1943
+ inputFontSize: 24,
1944
+ inputIconGap: 16,
1945
+ inputBorderWidth: 1.5,
1946
+ // Icon sizes
1947
+ stickerIconSize: 34,
1948
+ galleryIconSize: 34,
1949
+ micIconSize: 32
1899
1950
  };
1900
1951
  var DEFAULT_RECIPIENT_BUBBLE = {
1901
1952
  type: "solid",
@@ -1974,17 +2025,16 @@ function mergeStatusBarConfig(partial) {
1974
2025
 
1975
2026
  // src/compositions/InstagramDmComposition/components/IgStatusBar.tsx
1976
2027
  import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
1977
- var STATUS_BAR_HEIGHT = 75;
1978
- function CellularIcon({ color }) {
1979
- return /* @__PURE__ */ jsxs7("svg", { width: "26", height: "18", viewBox: "0 0 18 12", fill: "none", children: [
2028
+ function CellularIcon({ color, width, height }) {
2029
+ return /* @__PURE__ */ jsxs7("svg", { width, height, viewBox: "0 0 18 12", fill: "none", children: [
1980
2030
  /* @__PURE__ */ jsx9("rect", { x: "0", y: "8", width: "3", height: "4", rx: "0.5", fill: color }),
1981
2031
  /* @__PURE__ */ jsx9("rect", { x: "4", y: "5", width: "3", height: "7", rx: "0.5", fill: color }),
1982
2032
  /* @__PURE__ */ jsx9("rect", { x: "8", y: "3", width: "3", height: "9", rx: "0.5", fill: color }),
1983
2033
  /* @__PURE__ */ jsx9("rect", { x: "12", y: "0", width: "3", height: "12", rx: "0.5", fill: color })
1984
2034
  ] });
1985
2035
  }
1986
- function WifiIcon({ color }) {
1987
- return /* @__PURE__ */ jsxs7("svg", { width: "24", height: "18", viewBox: "0 0 17 12", fill: "none", children: [
2036
+ function WifiIcon({ color, width, height }) {
2037
+ return /* @__PURE__ */ jsxs7("svg", { width, height, viewBox: "0 0 17 12", fill: "none", children: [
1988
2038
  /* @__PURE__ */ jsx9(
1989
2039
  "path",
1990
2040
  {
@@ -2044,12 +2094,14 @@ function WifiIcon({ color }) {
2044
2094
  }
2045
2095
  function BatteryIcon({
2046
2096
  color,
2097
+ width,
2098
+ height,
2047
2099
  level = 100,
2048
2100
  isCharging = false
2049
2101
  }) {
2050
2102
  const fillWidth = Math.max(0, Math.min(100, level)) * 0.22;
2051
2103
  const fillColor = level <= 20 ? "#FF3B30" : isCharging ? "#34C759" : color;
2052
- return /* @__PURE__ */ jsxs7("svg", { width: "38", height: "18", viewBox: "0 0 27 13", fill: "none", children: [
2104
+ return /* @__PURE__ */ jsxs7("svg", { width, height, viewBox: "0 0 27 13", fill: "none", children: [
2053
2105
  /* @__PURE__ */ jsx9(
2054
2106
  "rect",
2055
2107
  {
@@ -2087,6 +2139,18 @@ function BatteryIcon({
2087
2139
  function IgStatusBar({ config, theme, width }) {
2088
2140
  const colors = getThemeColors(theme);
2089
2141
  const textColor = colors.statusBarText;
2142
+ const height = config.height ?? 75;
2143
+ const paddingH = config.paddingH ?? 36;
2144
+ const iconGap = config.iconGap ?? 8;
2145
+ const dynamicIslandWidth = config.dynamicIslandWidth ?? 180;
2146
+ const timeFontSize = config.timeFontSize ?? 24;
2147
+ const timeFontWeight = config.timeFontWeight ?? 600;
2148
+ const cellularIconWidth = config.cellularIconWidth ?? 26;
2149
+ const cellularIconHeight = config.cellularIconHeight ?? 18;
2150
+ const wifiIconWidth = config.wifiIconWidth ?? 24;
2151
+ const wifiIconHeight = config.wifiIconHeight ?? 18;
2152
+ const batteryIconWidth = config.batteryIconWidth ?? 38;
2153
+ const batteryIconHeight = config.batteryIconHeight ?? 18;
2090
2154
  return /* @__PURE__ */ jsxs7(
2091
2155
  "div",
2092
2156
  {
@@ -2095,11 +2159,11 @@ function IgStatusBar({ config, theme, width }) {
2095
2159
  top: 0,
2096
2160
  left: 0,
2097
2161
  right: 0,
2098
- height: STATUS_BAR_HEIGHT,
2162
+ height,
2099
2163
  display: "flex",
2100
2164
  alignItems: "center",
2101
2165
  justifyContent: "space-between",
2102
- padding: "0 36px",
2166
+ padding: `0 ${paddingH}px`,
2103
2167
  zIndex: 20
2104
2168
  },
2105
2169
  children: [
@@ -2107,8 +2171,8 @@ function IgStatusBar({ config, theme, width }) {
2107
2171
  "div",
2108
2172
  {
2109
2173
  style: {
2110
- fontSize: 24,
2111
- fontWeight: 600,
2174
+ fontSize: timeFontSize,
2175
+ fontWeight: timeFontWeight,
2112
2176
  fontFamily: '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif',
2113
2177
  color: textColor,
2114
2178
  minWidth: 70
@@ -2120,7 +2184,7 @@ function IgStatusBar({ config, theme, width }) {
2120
2184
  "div",
2121
2185
  {
2122
2186
  style: {
2123
- width: width > 1e3 ? 180 : 120,
2187
+ width: dynamicIslandWidth,
2124
2188
  height: 48,
2125
2189
  backgroundColor: "transparent"
2126
2190
  }
@@ -2132,15 +2196,17 @@ function IgStatusBar({ config, theme, width }) {
2132
2196
  style: {
2133
2197
  display: "flex",
2134
2198
  alignItems: "center",
2135
- gap: 8
2199
+ gap: iconGap
2136
2200
  },
2137
2201
  children: [
2138
- config.showCellular && /* @__PURE__ */ jsx9(CellularIcon, { color: textColor }),
2139
- config.showWifi && /* @__PURE__ */ jsx9(WifiIcon, { color: textColor }),
2202
+ config.showCellular && /* @__PURE__ */ jsx9(CellularIcon, { color: textColor, width: cellularIconWidth, height: cellularIconHeight }),
2203
+ config.showWifi && /* @__PURE__ */ jsx9(WifiIcon, { color: textColor, width: wifiIconWidth, height: wifiIconHeight }),
2140
2204
  config.showBattery && /* @__PURE__ */ jsx9(
2141
2205
  BatteryIcon,
2142
2206
  {
2143
2207
  color: textColor,
2208
+ width: batteryIconWidth,
2209
+ height: batteryIconHeight,
2144
2210
  level: config.batteryLevel,
2145
2211
  isCharging: config.isCharging
2146
2212
  }
@@ -2156,8 +2222,8 @@ function IgStatusBar({ config, theme, width }) {
2156
2222
  // src/compositions/InstagramDmComposition/components/IgHeader.tsx
2157
2223
  import { Img as Img4 } from "remotion";
2158
2224
  import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
2159
- function BackIcon({ color }) {
2160
- return /* @__PURE__ */ jsx10("svg", { width: "34", height: "34", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx10(
2225
+ function BackIcon({ color, size }) {
2226
+ return /* @__PURE__ */ jsx10("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx10(
2161
2227
  "path",
2162
2228
  {
2163
2229
  d: "M15 18L9 12L15 6",
@@ -2168,8 +2234,8 @@ function BackIcon({ color }) {
2168
2234
  }
2169
2235
  ) });
2170
2236
  }
2171
- function VideoCallIcon({ color }) {
2172
- return /* @__PURE__ */ jsxs8("svg", { width: "36", height: "36", viewBox: "0 0 24 24", fill: "none", children: [
2237
+ function VideoCallIcon({ color, size }) {
2238
+ return /* @__PURE__ */ jsxs8("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
2173
2239
  /* @__PURE__ */ jsx10(
2174
2240
  "rect",
2175
2241
  {
@@ -2194,8 +2260,8 @@ function VideoCallIcon({ color }) {
2194
2260
  )
2195
2261
  ] });
2196
2262
  }
2197
- function CallIcon({ color }) {
2198
- return /* @__PURE__ */ jsx10("svg", { width: "34", height: "34", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx10(
2263
+ function CallIcon({ color, size }) {
2264
+ return /* @__PURE__ */ jsx10("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx10(
2199
2265
  "path",
2200
2266
  {
2201
2267
  d: "M22 16.92V19.92C22 20.48 21.56 20.97 20.92 21C14.44 21.5 8.5 19.1 4.7 15.3C0.9 11.5 -1.5 5.56 3 3.08C3.03 2.44 3.52 2 4.08 2H7.08C7.56 2 7.97 2.34 8.05 2.81C8.22 3.87 8.54 4.9 9 5.85C9.14 6.14 9.07 6.49 8.83 6.71L7.29 8.25C8.91 11.1 11.19 13.38 14.04 15L15.58 13.46C15.8 13.22 16.15 13.15 16.44 13.29C17.39 13.75 18.42 14.07 19.48 14.24C19.95 14.32 20.29 14.73 20.29 15.21V16.92H22Z",
@@ -2206,8 +2272,8 @@ function CallIcon({ color }) {
2206
2272
  }
2207
2273
  ) });
2208
2274
  }
2209
- function InfoIcon({ color }) {
2210
- return /* @__PURE__ */ jsxs8("svg", { width: "34", height: "34", viewBox: "0 0 24 24", fill: "none", children: [
2275
+ function InfoIcon({ color, size }) {
2276
+ return /* @__PURE__ */ jsxs8("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
2211
2277
  /* @__PURE__ */ jsx10("circle", { cx: "12", cy: "12", r: "10", stroke: color, strokeWidth: "2" }),
2212
2278
  /* @__PURE__ */ jsx10(
2213
2279
  "path",
@@ -2221,8 +2287,8 @@ function InfoIcon({ color }) {
2221
2287
  /* @__PURE__ */ jsx10("circle", { cx: "12", cy: "8", r: "1", fill: color })
2222
2288
  ] });
2223
2289
  }
2224
- function VerifiedBadge() {
2225
- return /* @__PURE__ */ jsxs8("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "#3897F0", children: [
2290
+ function VerifiedBadge({ size }) {
2291
+ return /* @__PURE__ */ jsxs8("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "#3897F0", children: [
2226
2292
  /* @__PURE__ */ jsx10("path", { d: "M12 2L14.4 4.4L17.6 3.6L18.4 6.8L21.6 7.6L20.8 10.8L24 12L20.8 13.2L21.6 16.4L18.4 17.2L17.6 20.4L14.4 19.6L12 22L9.6 19.6L6.4 20.4L5.6 17.2L2.4 16.4L3.2 13.2L0 12L3.2 10.8L2.4 7.6L5.6 6.8L6.4 3.6L9.6 4.4L12 2Z" }),
2227
2293
  /* @__PURE__ */ jsx10(
2228
2294
  "path",
@@ -2236,22 +2302,37 @@ function VerifiedBadge() {
2236
2302
  )
2237
2303
  ] });
2238
2304
  }
2239
- function IgHeader({ config, theme, recipient, avatarUrl }) {
2305
+ function IgHeader({ config, theme, recipient, avatarUrl, statusBarHeight }) {
2240
2306
  const colors = getThemeColors(theme);
2241
2307
  const iconColor = colors.iconColor;
2308
+ const paddingH = config.paddingH ?? 18;
2309
+ const gap = config.gap ?? 16;
2310
+ const actionButtonGap = config.actionButtonGap ?? 28;
2311
+ const avatarSize = config.avatarSize ?? 64;
2312
+ const activeDotSize = config.activeDotSize ?? 20;
2313
+ const activeDotBorderWidth = config.activeDotBorderWidth ?? 3;
2314
+ const usernameFontSize = config.usernameFontSize ?? 24;
2315
+ const usernameFontWeight = config.usernameFontWeight ?? 600;
2316
+ const subtitleFontSize = config.subtitleFontSize ?? 18;
2317
+ const profileInfoGap = config.profileInfoGap ?? 4;
2318
+ const backIconSize = config.backIconSize ?? 34;
2319
+ const videoCallIconSize = config.videoCallIconSize ?? 36;
2320
+ const callIconSize = config.callIconSize ?? 34;
2321
+ const infoIconSize = config.infoIconSize ?? 34;
2322
+ const verifiedBadgeSize = config.verifiedBadgeSize ?? 20;
2242
2323
  return /* @__PURE__ */ jsxs8(
2243
2324
  "div",
2244
2325
  {
2245
2326
  style: {
2246
2327
  position: "absolute",
2247
- top: STATUS_BAR_HEIGHT,
2328
+ top: statusBarHeight,
2248
2329
  left: 0,
2249
2330
  right: 0,
2250
2331
  height: config.height,
2251
2332
  backgroundColor: colors.headerBg,
2252
2333
  display: "flex",
2253
2334
  alignItems: "center",
2254
- padding: "0 18px",
2335
+ padding: `0 ${paddingH}px`,
2255
2336
  zIndex: 10
2256
2337
  },
2257
2338
  children: [
@@ -2261,18 +2342,18 @@ function IgHeader({ config, theme, recipient, avatarUrl }) {
2261
2342
  style: {
2262
2343
  display: "flex",
2263
2344
  alignItems: "center",
2264
- gap: 16,
2345
+ gap,
2265
2346
  flex: 1
2266
2347
  },
2267
2348
  children: [
2268
- config.showBackButton && /* @__PURE__ */ jsx10("div", { style: { padding: 6 }, children: /* @__PURE__ */ jsx10(BackIcon, { color: iconColor }) }),
2349
+ config.showBackButton && /* @__PURE__ */ jsx10("div", { style: { padding: 6 }, children: /* @__PURE__ */ jsx10(BackIcon, { color: iconColor, size: backIconSize }) }),
2269
2350
  /* @__PURE__ */ jsxs8(
2270
2351
  "div",
2271
2352
  {
2272
2353
  style: {
2273
2354
  position: "relative",
2274
- width: 64,
2275
- height: 64,
2355
+ width: avatarSize,
2356
+ height: avatarSize,
2276
2357
  borderRadius: "50%",
2277
2358
  overflow: "hidden",
2278
2359
  flexShrink: 0
@@ -2296,11 +2377,11 @@ function IgHeader({ config, theme, recipient, avatarUrl }) {
2296
2377
  position: "absolute",
2297
2378
  bottom: 0,
2298
2379
  right: 0,
2299
- width: 20,
2300
- height: 20,
2380
+ width: activeDotSize,
2381
+ height: activeDotSize,
2301
2382
  borderRadius: "50%",
2302
2383
  backgroundColor: colors.activeGreen,
2303
- border: `3px solid ${colors.headerBg}`,
2384
+ border: `${activeDotBorderWidth}px solid ${colors.headerBg}`,
2304
2385
  boxSizing: "border-box"
2305
2386
  }
2306
2387
  }
@@ -2314,7 +2395,7 @@ function IgHeader({ config, theme, recipient, avatarUrl }) {
2314
2395
  style: {
2315
2396
  display: "flex",
2316
2397
  flexDirection: "column",
2317
- gap: 4
2398
+ gap: profileInfoGap
2318
2399
  },
2319
2400
  children: [
2320
2401
  /* @__PURE__ */ jsxs8(
@@ -2331,14 +2412,14 @@ function IgHeader({ config, theme, recipient, avatarUrl }) {
2331
2412
  {
2332
2413
  style: {
2333
2414
  fontFamily: '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif',
2334
- fontSize: 24,
2335
- fontWeight: 600,
2415
+ fontSize: usernameFontSize,
2416
+ fontWeight: usernameFontWeight,
2336
2417
  color: colors.textPrimary
2337
2418
  },
2338
2419
  children: recipient.displayName ?? recipient.username
2339
2420
  }
2340
2421
  ),
2341
- recipient.verified && /* @__PURE__ */ jsx10(VerifiedBadge, {})
2422
+ recipient.verified && /* @__PURE__ */ jsx10(VerifiedBadge, { size: verifiedBadgeSize })
2342
2423
  ]
2343
2424
  }
2344
2425
  ),
@@ -2347,7 +2428,7 @@ function IgHeader({ config, theme, recipient, avatarUrl }) {
2347
2428
  {
2348
2429
  style: {
2349
2430
  fontFamily: '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif',
2350
- fontSize: 18,
2431
+ fontSize: subtitleFontSize,
2351
2432
  color: colors.textSecondary
2352
2433
  },
2353
2434
  children: recipient.isActive ? "Active now" : recipient.displayName ? recipient.username : ""
@@ -2365,12 +2446,12 @@ function IgHeader({ config, theme, recipient, avatarUrl }) {
2365
2446
  style: {
2366
2447
  display: "flex",
2367
2448
  alignItems: "center",
2368
- gap: 28
2449
+ gap: actionButtonGap
2369
2450
  },
2370
2451
  children: [
2371
- config.showCallButton && /* @__PURE__ */ jsx10(CallIcon, { color: iconColor }),
2372
- config.showVideoCallButton && /* @__PURE__ */ jsx10(VideoCallIcon, { color: iconColor }),
2373
- config.showInfoButton && /* @__PURE__ */ jsx10(InfoIcon, { color: iconColor })
2452
+ config.showCallButton && /* @__PURE__ */ jsx10(CallIcon, { color: iconColor, size: callIconSize }),
2453
+ config.showVideoCallButton && /* @__PURE__ */ jsx10(VideoCallIcon, { color: iconColor, size: videoCallIconSize }),
2454
+ config.showInfoButton && /* @__PURE__ */ jsx10(InfoIcon, { color: iconColor, size: infoIconSize })
2374
2455
  ]
2375
2456
  }
2376
2457
  )
@@ -2381,8 +2462,8 @@ function IgHeader({ config, theme, recipient, avatarUrl }) {
2381
2462
 
2382
2463
  // src/compositions/InstagramDmComposition/components/IgFooter.tsx
2383
2464
  import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
2384
- function CameraIcon({ color }) {
2385
- return /* @__PURE__ */ jsxs9("svg", { width: "36", height: "36", viewBox: "0 0 24 24", fill: "none", children: [
2465
+ function CameraIcon({ color, size }) {
2466
+ return /* @__PURE__ */ jsxs9("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
2386
2467
  /* @__PURE__ */ jsx11("circle", { cx: "12", cy: "13", r: "4", stroke: color, strokeWidth: "2" }),
2387
2468
  /* @__PURE__ */ jsx11(
2388
2469
  "path",
@@ -2396,8 +2477,8 @@ function CameraIcon({ color }) {
2396
2477
  )
2397
2478
  ] });
2398
2479
  }
2399
- function GalleryIcon({ color }) {
2400
- return /* @__PURE__ */ jsxs9("svg", { width: "34", height: "34", viewBox: "0 0 24 24", fill: "none", children: [
2480
+ function GalleryIcon({ color, size }) {
2481
+ return /* @__PURE__ */ jsxs9("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
2401
2482
  /* @__PURE__ */ jsx11(
2402
2483
  "rect",
2403
2484
  {
@@ -2423,8 +2504,8 @@ function GalleryIcon({ color }) {
2423
2504
  )
2424
2505
  ] });
2425
2506
  }
2426
- function MicIcon({ color }) {
2427
- return /* @__PURE__ */ jsxs9("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: [
2507
+ function MicIcon({ color, size }) {
2508
+ return /* @__PURE__ */ jsxs9("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
2428
2509
  /* @__PURE__ */ jsx11("rect", { x: "9", y: "2", width: "6", height: "11", rx: "3", stroke: color, strokeWidth: "2" }),
2429
2510
  /* @__PURE__ */ jsx11(
2430
2511
  "path",
@@ -2446,8 +2527,8 @@ function MicIcon({ color }) {
2446
2527
  )
2447
2528
  ] });
2448
2529
  }
2449
- function StickerIcon({ color }) {
2450
- return /* @__PURE__ */ jsxs9("svg", { width: "34", height: "34", viewBox: "0 0 24 24", fill: "none", children: [
2530
+ function StickerIcon({ color, size }) {
2531
+ return /* @__PURE__ */ jsxs9("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
2451
2532
  /* @__PURE__ */ jsx11("circle", { cx: "12", cy: "12", r: "10", stroke: color, strokeWidth: "2" }),
2452
2533
  /* @__PURE__ */ jsx11(
2453
2534
  "path",
@@ -2466,6 +2547,19 @@ function IgFooter({ config, theme, compositionHeight }) {
2466
2547
  const colors = getThemeColors(theme);
2467
2548
  const iconColor = colors.iconColor;
2468
2549
  const hasInputText = config.inputText && config.inputText.length > 0;
2550
+ const paddingH = config.paddingH ?? 18;
2551
+ const gap = config.gap ?? 16;
2552
+ const cameraButtonSize = config.cameraButtonSize ?? 64;
2553
+ const cameraIconSize = config.cameraIconSize ?? 36;
2554
+ const inputHeight = config.inputHeight ?? 64;
2555
+ const inputBorderRadius = config.inputBorderRadius ?? 32;
2556
+ const inputPaddingH = config.inputPaddingH ?? 24;
2557
+ const inputFontSize = config.inputFontSize ?? 24;
2558
+ const inputIconGap = config.inputIconGap ?? 16;
2559
+ const inputBorderWidth = config.inputBorderWidth ?? 1.5;
2560
+ const stickerIconSize = config.stickerIconSize ?? 34;
2561
+ const galleryIconSize = config.galleryIconSize ?? 34;
2562
+ const micIconSize = config.micIconSize ?? 32;
2469
2563
  return /* @__PURE__ */ jsxs9(
2470
2564
  "div",
2471
2565
  {
@@ -2478,8 +2572,8 @@ function IgFooter({ config, theme, compositionHeight }) {
2478
2572
  backgroundColor: colors.footerBg,
2479
2573
  display: "flex",
2480
2574
  alignItems: "center",
2481
- padding: "0 18px",
2482
- gap: 16,
2575
+ padding: `0 ${paddingH}px`,
2576
+ gap,
2483
2577
  zIndex: 10
2484
2578
  },
2485
2579
  children: [
@@ -2487,8 +2581,8 @@ function IgFooter({ config, theme, compositionHeight }) {
2487
2581
  "div",
2488
2582
  {
2489
2583
  style: {
2490
- width: 64,
2491
- height: 64,
2584
+ width: cameraButtonSize,
2585
+ height: cameraButtonSize,
2492
2586
  borderRadius: "50%",
2493
2587
  backgroundColor: "#3797F0",
2494
2588
  display: "flex",
@@ -2496,7 +2590,7 @@ function IgFooter({ config, theme, compositionHeight }) {
2496
2590
  justifyContent: "center",
2497
2591
  flexShrink: 0
2498
2592
  },
2499
- children: /* @__PURE__ */ jsx11(CameraIcon, { color: "#FFFFFF" })
2593
+ children: /* @__PURE__ */ jsx11(CameraIcon, { color: "#FFFFFF", size: cameraIconSize })
2500
2594
  }
2501
2595
  ),
2502
2596
  /* @__PURE__ */ jsxs9(
@@ -2504,14 +2598,14 @@ function IgFooter({ config, theme, compositionHeight }) {
2504
2598
  {
2505
2599
  style: {
2506
2600
  flex: 1,
2507
- height: 64,
2508
- borderRadius: 32,
2509
- border: `1.5px solid ${colors.divider}`,
2601
+ height: inputHeight,
2602
+ borderRadius: inputBorderRadius,
2603
+ border: `${inputBorderWidth}px solid ${colors.divider}`,
2510
2604
  backgroundColor: colors.footerBg,
2511
2605
  display: "flex",
2512
2606
  alignItems: "center",
2513
- padding: "0 24px",
2514
- gap: 16
2607
+ padding: `0 ${inputPaddingH}px`,
2608
+ gap: inputIconGap
2515
2609
  },
2516
2610
  children: [
2517
2611
  /* @__PURE__ */ jsx11(
@@ -2520,7 +2614,7 @@ function IgFooter({ config, theme, compositionHeight }) {
2520
2614
  style: {
2521
2615
  flex: 1,
2522
2616
  fontFamily: '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif',
2523
- fontSize: 24,
2617
+ fontSize: inputFontSize,
2524
2618
  color: hasInputText ? colors.textPrimary : colors.textSecondary
2525
2619
  },
2526
2620
  children: hasInputText ? config.inputText : config.placeholderText
@@ -2532,18 +2626,18 @@ function IgFooter({ config, theme, compositionHeight }) {
2532
2626
  style: {
2533
2627
  display: "flex",
2534
2628
  alignItems: "center",
2535
- gap: 16
2629
+ gap: inputIconGap
2536
2630
  },
2537
2631
  children: [
2538
- config.showSticker && /* @__PURE__ */ jsx11(StickerIcon, { color: iconColor }),
2539
- config.showGallery && /* @__PURE__ */ jsx11(GalleryIcon, { color: iconColor })
2632
+ config.showSticker && /* @__PURE__ */ jsx11(StickerIcon, { color: iconColor, size: stickerIconSize }),
2633
+ config.showGallery && /* @__PURE__ */ jsx11(GalleryIcon, { color: iconColor, size: galleryIconSize })
2540
2634
  ]
2541
2635
  }
2542
2636
  )
2543
2637
  ]
2544
2638
  }
2545
2639
  ),
2546
- config.showMic && /* @__PURE__ */ jsx11("div", { style: { padding: 6, flexShrink: 0 }, children: /* @__PURE__ */ jsx11(MicIcon, { color: iconColor }) })
2640
+ config.showMic && /* @__PURE__ */ jsx11("div", { style: { padding: 6, flexShrink: 0 }, children: /* @__PURE__ */ jsx11(MicIcon, { color: iconColor, size: micIconSize }) })
2547
2641
  ]
2548
2642
  }
2549
2643
  );
@@ -3751,7 +3845,8 @@ function InstagramDmComposition({
3751
3845
  const colors = getThemeColors(theme);
3752
3846
  const userAvatarUrl = imageUrls[user.avatarInputId] ?? "";
3753
3847
  const recipientAvatarUrl = imageUrls[recipient.avatarInputId] ?? "";
3754
- const headerHeight = STATUS_BAR_HEIGHT + mergedHeader.height;
3848
+ const statusBarHeight = mergedStatusBar.height ?? 75;
3849
+ const headerHeight = statusBarHeight + mergedHeader.height;
3755
3850
  const footerHeight = mergedFooter.height;
3756
3851
  const contentTop = headerHeight;
3757
3852
  const contentHeight = height - headerHeight - footerHeight;
@@ -3764,7 +3859,8 @@ function InstagramDmComposition({
3764
3859
  config: mergedHeader,
3765
3860
  theme,
3766
3861
  recipient,
3767
- avatarUrl: recipientAvatarUrl
3862
+ avatarUrl: recipientAvatarUrl,
3863
+ statusBarHeight
3768
3864
  }
3769
3865
  ),
3770
3866
  /* @__PURE__ */ jsx23(
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ugcinc-render",
3
- "version": "1.8.62",
3
+ "version": "1.8.63",
4
4
  "description": "Unified rendering package for UGC Inc - shared types, components, and compositions for pixel-perfect client/server rendering",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",