@remotion/promo-pages 4.0.383 → 4.0.385

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.
package/dist/Homepage.js CHANGED
@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
755
755
  });
756
756
  }, useIsPlayer = () => {
757
757
  return useContext(IsPlayerContext);
758
- }, VERSION = "4.0.383", checkMultipleRemotionVersions = () => {
758
+ }, VERSION = "4.0.385", checkMultipleRemotionVersions = () => {
759
759
  if (typeof globalThis === "undefined") {
760
760
  return;
761
761
  }
@@ -13413,36 +13413,41 @@ var buttonContainer = {
13413
13413
  alignItems: "center",
13414
13414
  cursor: "pointer"
13415
13415
  };
13416
+ var MAX_COUNT = 9999999;
13416
13417
  var Counter = ({
13417
13418
  count,
13418
13419
  setCount,
13419
- minCount = 0,
13420
- step = 1
13420
+ minCount,
13421
+ step,
13422
+ incrementStep
13421
13423
  }) => {
13422
13424
  const decrement = () => {
13423
13425
  if (count > minCount) {
13424
- setCount(Math.max(minCount, count - step));
13426
+ setCount(Math.max(minCount, count - incrementStep));
13425
13427
  }
13426
13428
  };
13427
13429
  const increment = () => {
13428
- setCount(count + step);
13430
+ const nextValue = count + incrementStep;
13431
+ const roundedValue = Math.round(nextValue / incrementStep) * incrementStep;
13432
+ setCount(Math.min(MAX_COUNT, roundedValue));
13429
13433
  };
13434
+ const shrink = String(count).length > 6;
13430
13435
  return /* @__PURE__ */ jsxs32(Card, {
13431
13436
  style: container2,
13432
13437
  className: cn("w-[140px] flex flex-row overflow-hidden"),
13433
13438
  children: [
13434
13439
  /* @__PURE__ */ jsx73("input", {
13435
- className: "fontbrand text-2xl font-medium min-w-[80px] border-0 text-end outline-0 text-text overflow-hidden flex-1 px-0 py-0 pr-2 w-full h-full tabular-nums",
13440
+ className: cn("fontbrand font-medium min-w-[80px] border-0 text-end outline-0 text-text overflow-hidden flex-1 px-0 py-0 pr-2 w-full h-full tabular-nums", shrink ? "text-lg" : "text-2xl"),
13436
13441
  type: "number",
13437
- onClick: (e) => e.currentTarget.select(),
13438
13442
  value: count,
13443
+ onClick: (e) => e.currentTarget.select(),
13439
13444
  onChange: (e) => {
13440
13445
  if (e.target.value.trim() === "") {
13441
13446
  setCount(step === 1 ? 1 : minCount);
13442
13447
  return;
13443
13448
  }
13444
13449
  const inputValue = parseInt(e.target.value, 10);
13445
- const validValue = Math.max(inputValue, minCount);
13450
+ const validValue = Math.min(MAX_COUNT, Math.max(inputValue, minCount));
13446
13451
  if (step > 1) {
13447
13452
  const roundedValue = Math.round(validValue / step) * step;
13448
13453
  setCount(Math.max(roundedValue, minCount));
@@ -19706,8 +19711,9 @@ var PriceTag = ({ children }) => {
19706
19711
  });
19707
19712
  };
19708
19713
  var SmallPriceTag = ({ children }) => {
19714
+ const shrink = children.length > 6;
19709
19715
  return /* @__PURE__ */ jsx41("div", {
19710
- className: "fontbrand text-2xl font-medium w-auto min-w-[80px] text-right shrink-0",
19716
+ className: cn2("fontbrand text-2xl font-medium w-auto min-w-[100px] text-right shrink-0", shrink ? "text-lg" : "text-2xl"),
19711
19717
  children
19712
19718
  });
19713
19719
  };
@@ -19837,7 +19843,7 @@ var CompanyPricing = () => {
19837
19843
  return formatter.format(price);
19838
19844
  }, []);
19839
19845
  const totalPrice = useMemo41(() => {
19840
- return Math.max(100, devSeatCount * SEAT_PRICE + cloudRenders / 1000 * RENDER_UNIT_PRICE);
19846
+ return Math.max(100, devSeatCount * SEAT_PRICE + Math.ceil(cloudRenders / 1000) * RENDER_UNIT_PRICE);
19841
19847
  }, [cloudRenders, devSeatCount]);
19842
19848
  const totalPriceString = useMemo41(() => {
19843
19849
  return formatPrice(totalPrice);
@@ -19898,15 +19904,14 @@ var CompanyPricing = () => {
19898
19904
  /* @__PURE__ */ jsx41(Counter, {
19899
19905
  count: devSeatCount,
19900
19906
  setCount: setDevSeatCount,
19901
- minCount: 1
19907
+ minCount: 1,
19908
+ incrementStep: 1,
19909
+ step: 1
19902
19910
  }),
19903
- /* @__PURE__ */ jsxs9(SmallPriceTag, {
19904
- children: [
19905
- "$",
19906
- new Intl.NumberFormat("en-US", {
19907
- maximumFractionDigits: 0
19908
- }).format(SEAT_PRICE * devSeatCount)
19909
- ]
19911
+ /* @__PURE__ */ jsx41(SmallPriceTag, {
19912
+ children: `$${new Intl.NumberFormat("en-US", {
19913
+ maximumFractionDigits: 0
19914
+ }).format(SEAT_PRICE * devSeatCount)}`
19910
19915
  })
19911
19916
  ]
19912
19917
  })
@@ -19946,15 +19951,13 @@ var CompanyPricing = () => {
19946
19951
  count: cloudRenders,
19947
19952
  setCount: setCloudRenders,
19948
19953
  minCount: 0,
19949
- step: 1000
19954
+ step: 1,
19955
+ incrementStep: 1000
19950
19956
  }),
19951
- /* @__PURE__ */ jsxs9(SmallPriceTag, {
19952
- children: [
19953
- "$",
19954
- new Intl.NumberFormat("en-US", {
19955
- maximumFractionDigits: 0
19956
- }).format(cloudRenders / 1000 * RENDER_UNIT_PRICE)
19957
- ]
19957
+ /* @__PURE__ */ jsx41(SmallPriceTag, {
19958
+ children: `$${new Intl.NumberFormat("en-US", {
19959
+ maximumFractionDigits: 0
19960
+ }).format(Math.ceil(cloudRenders / 1000) * RENDER_UNIT_PRICE)}`
19958
19961
  })
19959
19962
  ]
19960
19963
  })
@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
755
755
  });
756
756
  }, useIsPlayer = () => {
757
757
  return useContext(IsPlayerContext);
758
- }, VERSION = "4.0.383", checkMultipleRemotionVersions = () => {
758
+ }, VERSION = "4.0.385", checkMultipleRemotionVersions = () => {
759
759
  if (typeof globalThis === "undefined") {
760
760
  return;
761
761
  }
@@ -13413,36 +13413,41 @@ var buttonContainer = {
13413
13413
  alignItems: "center",
13414
13414
  cursor: "pointer"
13415
13415
  };
13416
+ var MAX_COUNT = 9999999;
13416
13417
  var Counter = ({
13417
13418
  count,
13418
13419
  setCount,
13419
- minCount = 0,
13420
- step = 1
13420
+ minCount,
13421
+ step,
13422
+ incrementStep
13421
13423
  }) => {
13422
13424
  const decrement = () => {
13423
13425
  if (count > minCount) {
13424
- setCount(Math.max(minCount, count - step));
13426
+ setCount(Math.max(minCount, count - incrementStep));
13425
13427
  }
13426
13428
  };
13427
13429
  const increment = () => {
13428
- setCount(count + step);
13430
+ const nextValue = count + incrementStep;
13431
+ const roundedValue = Math.round(nextValue / incrementStep) * incrementStep;
13432
+ setCount(Math.min(MAX_COUNT, roundedValue));
13429
13433
  };
13434
+ const shrink = String(count).length > 6;
13430
13435
  return /* @__PURE__ */ jsxs32(Card, {
13431
13436
  style: container2,
13432
13437
  className: cn("w-[140px] flex flex-row overflow-hidden"),
13433
13438
  children: [
13434
13439
  /* @__PURE__ */ jsx73("input", {
13435
- className: "fontbrand text-2xl font-medium min-w-[80px] border-0 text-end outline-0 text-text overflow-hidden flex-1 px-0 py-0 pr-2 w-full h-full tabular-nums",
13440
+ className: cn("fontbrand font-medium min-w-[80px] border-0 text-end outline-0 text-text overflow-hidden flex-1 px-0 py-0 pr-2 w-full h-full tabular-nums", shrink ? "text-lg" : "text-2xl"),
13436
13441
  type: "number",
13437
- onClick: (e) => e.currentTarget.select(),
13438
13442
  value: count,
13443
+ onClick: (e) => e.currentTarget.select(),
13439
13444
  onChange: (e) => {
13440
13445
  if (e.target.value.trim() === "") {
13441
13446
  setCount(step === 1 ? 1 : minCount);
13442
13447
  return;
13443
13448
  }
13444
13449
  const inputValue = parseInt(e.target.value, 10);
13445
- const validValue = Math.max(inputValue, minCount);
13450
+ const validValue = Math.min(MAX_COUNT, Math.max(inputValue, minCount));
13446
13451
  if (step > 1) {
13447
13452
  const roundedValue = Math.round(validValue / step) * step;
13448
13453
  setCount(Math.max(roundedValue, minCount));
@@ -19706,8 +19711,9 @@ var PriceTag = ({ children }) => {
19706
19711
  });
19707
19712
  };
19708
19713
  var SmallPriceTag = ({ children }) => {
19714
+ const shrink = children.length > 6;
19709
19715
  return /* @__PURE__ */ jsx41("div", {
19710
- className: "fontbrand text-2xl font-medium w-auto min-w-[80px] text-right shrink-0",
19716
+ className: cn2("fontbrand text-2xl font-medium w-auto min-w-[100px] text-right shrink-0", shrink ? "text-lg" : "text-2xl"),
19711
19717
  children
19712
19718
  });
19713
19719
  };
@@ -19837,7 +19843,7 @@ var CompanyPricing = () => {
19837
19843
  return formatter.format(price);
19838
19844
  }, []);
19839
19845
  const totalPrice = useMemo41(() => {
19840
- return Math.max(100, devSeatCount * SEAT_PRICE + cloudRenders / 1000 * RENDER_UNIT_PRICE);
19846
+ return Math.max(100, devSeatCount * SEAT_PRICE + Math.ceil(cloudRenders / 1000) * RENDER_UNIT_PRICE);
19841
19847
  }, [cloudRenders, devSeatCount]);
19842
19848
  const totalPriceString = useMemo41(() => {
19843
19849
  return formatPrice(totalPrice);
@@ -19898,15 +19904,14 @@ var CompanyPricing = () => {
19898
19904
  /* @__PURE__ */ jsx41(Counter, {
19899
19905
  count: devSeatCount,
19900
19906
  setCount: setDevSeatCount,
19901
- minCount: 1
19907
+ minCount: 1,
19908
+ incrementStep: 1,
19909
+ step: 1
19902
19910
  }),
19903
- /* @__PURE__ */ jsxs9(SmallPriceTag, {
19904
- children: [
19905
- "$",
19906
- new Intl.NumberFormat("en-US", {
19907
- maximumFractionDigits: 0
19908
- }).format(SEAT_PRICE * devSeatCount)
19909
- ]
19911
+ /* @__PURE__ */ jsx41(SmallPriceTag, {
19912
+ children: `$${new Intl.NumberFormat("en-US", {
19913
+ maximumFractionDigits: 0
19914
+ }).format(SEAT_PRICE * devSeatCount)}`
19910
19915
  })
19911
19916
  ]
19912
19917
  })
@@ -19946,15 +19951,13 @@ var CompanyPricing = () => {
19946
19951
  count: cloudRenders,
19947
19952
  setCount: setCloudRenders,
19948
19953
  minCount: 0,
19949
- step: 1000
19954
+ step: 1,
19955
+ incrementStep: 1000
19950
19956
  }),
19951
- /* @__PURE__ */ jsxs9(SmallPriceTag, {
19952
- children: [
19953
- "$",
19954
- new Intl.NumberFormat("en-US", {
19955
- maximumFractionDigits: 0
19956
- }).format(cloudRenders / 1000 * RENDER_UNIT_PRICE)
19957
- ]
19957
+ /* @__PURE__ */ jsx41(SmallPriceTag, {
19958
+ children: `$${new Intl.NumberFormat("en-US", {
19959
+ maximumFractionDigits: 0
19960
+ }).format(Math.ceil(cloudRenders / 1000) * RENDER_UNIT_PRICE)}`
19958
19961
  })
19959
19962
  ]
19960
19963
  })
@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
755
755
  });
756
756
  }, useIsPlayer = () => {
757
757
  return useContext(IsPlayerContext);
758
- }, VERSION = "4.0.383", checkMultipleRemotionVersions = () => {
758
+ }, VERSION = "4.0.385", checkMultipleRemotionVersions = () => {
759
759
  if (typeof globalThis === "undefined") {
760
760
  return;
761
761
  }
@@ -13237,36 +13237,41 @@ var buttonContainer = {
13237
13237
  alignItems: "center",
13238
13238
  cursor: "pointer"
13239
13239
  };
13240
+ var MAX_COUNT = 9999999;
13240
13241
  var Counter = ({
13241
13242
  count,
13242
13243
  setCount,
13243
- minCount = 0,
13244
- step = 1
13244
+ minCount,
13245
+ step,
13246
+ incrementStep
13245
13247
  }) => {
13246
13248
  const decrement = () => {
13247
13249
  if (count > minCount) {
13248
- setCount(Math.max(minCount, count - step));
13250
+ setCount(Math.max(minCount, count - incrementStep));
13249
13251
  }
13250
13252
  };
13251
13253
  const increment = () => {
13252
- setCount(count + step);
13254
+ const nextValue = count + incrementStep;
13255
+ const roundedValue = Math.round(nextValue / incrementStep) * incrementStep;
13256
+ setCount(Math.min(MAX_COUNT, roundedValue));
13253
13257
  };
13258
+ const shrink = String(count).length > 6;
13254
13259
  return /* @__PURE__ */ jsxs32(Card, {
13255
13260
  style: container2,
13256
13261
  className: cn("w-[140px] flex flex-row overflow-hidden"),
13257
13262
  children: [
13258
13263
  /* @__PURE__ */ jsx73("input", {
13259
- className: "fontbrand text-2xl font-medium min-w-[80px] border-0 text-end outline-0 text-text overflow-hidden flex-1 px-0 py-0 pr-2 w-full h-full tabular-nums",
13264
+ className: cn("fontbrand font-medium min-w-[80px] border-0 text-end outline-0 text-text overflow-hidden flex-1 px-0 py-0 pr-2 w-full h-full tabular-nums", shrink ? "text-lg" : "text-2xl"),
13260
13265
  type: "number",
13261
- onClick: (e) => e.currentTarget.select(),
13262
13266
  value: count,
13267
+ onClick: (e) => e.currentTarget.select(),
13263
13268
  onChange: (e) => {
13264
13269
  if (e.target.value.trim() === "") {
13265
13270
  setCount(step === 1 ? 1 : minCount);
13266
13271
  return;
13267
13272
  }
13268
13273
  const inputValue = parseInt(e.target.value, 10);
13269
- const validValue = Math.max(inputValue, minCount);
13274
+ const validValue = Math.min(MAX_COUNT, Math.max(inputValue, minCount));
13270
13275
  if (step > 1) {
13271
13276
  const roundedValue = Math.round(validValue / step) * step;
13272
13277
  setCount(Math.max(roundedValue, minCount));
@@ -18353,7 +18358,8 @@ var DesignPage = () => {
18353
18358
  count: count3,
18354
18359
  setCount,
18355
18360
  minCount: 1,
18356
- step: 1
18361
+ step: 1,
18362
+ incrementStep: 1
18357
18363
  }),
18358
18364
  /* @__PURE__ */ jsx40("br", {}),
18359
18365
  " ",
@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
755
755
  });
756
756
  }, useIsPlayer = () => {
757
757
  return useContext(IsPlayerContext);
758
- }, VERSION = "4.0.383", checkMultipleRemotionVersions = () => {
758
+ }, VERSION = "4.0.385", checkMultipleRemotionVersions = () => {
759
759
  if (typeof globalThis === "undefined") {
760
760
  return;
761
761
  }
@@ -13237,36 +13237,41 @@ var buttonContainer = {
13237
13237
  alignItems: "center",
13238
13238
  cursor: "pointer"
13239
13239
  };
13240
+ var MAX_COUNT = 9999999;
13240
13241
  var Counter = ({
13241
13242
  count,
13242
13243
  setCount,
13243
- minCount = 0,
13244
- step = 1
13244
+ minCount,
13245
+ step,
13246
+ incrementStep
13245
13247
  }) => {
13246
13248
  const decrement = () => {
13247
13249
  if (count > minCount) {
13248
- setCount(Math.max(minCount, count - step));
13250
+ setCount(Math.max(minCount, count - incrementStep));
13249
13251
  }
13250
13252
  };
13251
13253
  const increment = () => {
13252
- setCount(count + step);
13254
+ const nextValue = count + incrementStep;
13255
+ const roundedValue = Math.round(nextValue / incrementStep) * incrementStep;
13256
+ setCount(Math.min(MAX_COUNT, roundedValue));
13253
13257
  };
13258
+ const shrink = String(count).length > 6;
13254
13259
  return /* @__PURE__ */ jsxs32(Card, {
13255
13260
  style: container2,
13256
13261
  className: cn("w-[140px] flex flex-row overflow-hidden"),
13257
13262
  children: [
13258
13263
  /* @__PURE__ */ jsx73("input", {
13259
- className: "fontbrand text-2xl font-medium min-w-[80px] border-0 text-end outline-0 text-text overflow-hidden flex-1 px-0 py-0 pr-2 w-full h-full tabular-nums",
13264
+ className: cn("fontbrand font-medium min-w-[80px] border-0 text-end outline-0 text-text overflow-hidden flex-1 px-0 py-0 pr-2 w-full h-full tabular-nums", shrink ? "text-lg" : "text-2xl"),
13260
13265
  type: "number",
13261
- onClick: (e) => e.currentTarget.select(),
13262
13266
  value: count,
13267
+ onClick: (e) => e.currentTarget.select(),
13263
13268
  onChange: (e) => {
13264
13269
  if (e.target.value.trim() === "") {
13265
13270
  setCount(step === 1 ? 1 : minCount);
13266
13271
  return;
13267
13272
  }
13268
13273
  const inputValue = parseInt(e.target.value, 10);
13269
- const validValue = Math.max(inputValue, minCount);
13274
+ const validValue = Math.min(MAX_COUNT, Math.max(inputValue, minCount));
13270
13275
  if (step > 1) {
13271
13276
  const roundedValue = Math.round(validValue / step) * step;
13272
13277
  setCount(Math.max(roundedValue, minCount));
@@ -19530,8 +19535,9 @@ var PriceTag = ({ children }) => {
19530
19535
  });
19531
19536
  };
19532
19537
  var SmallPriceTag = ({ children }) => {
19538
+ const shrink = children.length > 6;
19533
19539
  return /* @__PURE__ */ jsx41("div", {
19534
- className: "fontbrand text-2xl font-medium w-auto min-w-[80px] text-right shrink-0",
19540
+ className: cn2("fontbrand text-2xl font-medium w-auto min-w-[100px] text-right shrink-0", shrink ? "text-lg" : "text-2xl"),
19535
19541
  children
19536
19542
  });
19537
19543
  };
@@ -19661,7 +19667,7 @@ var CompanyPricing = () => {
19661
19667
  return formatter.format(price);
19662
19668
  }, []);
19663
19669
  const totalPrice = useMemo41(() => {
19664
- return Math.max(100, devSeatCount * SEAT_PRICE + cloudRenders / 1000 * RENDER_UNIT_PRICE);
19670
+ return Math.max(100, devSeatCount * SEAT_PRICE + Math.ceil(cloudRenders / 1000) * RENDER_UNIT_PRICE);
19665
19671
  }, [cloudRenders, devSeatCount]);
19666
19672
  const totalPriceString = useMemo41(() => {
19667
19673
  return formatPrice(totalPrice);
@@ -19722,15 +19728,14 @@ var CompanyPricing = () => {
19722
19728
  /* @__PURE__ */ jsx41(Counter, {
19723
19729
  count: devSeatCount,
19724
19730
  setCount: setDevSeatCount,
19725
- minCount: 1
19731
+ minCount: 1,
19732
+ incrementStep: 1,
19733
+ step: 1
19726
19734
  }),
19727
- /* @__PURE__ */ jsxs9(SmallPriceTag, {
19728
- children: [
19729
- "$",
19730
- new Intl.NumberFormat("en-US", {
19731
- maximumFractionDigits: 0
19732
- }).format(SEAT_PRICE * devSeatCount)
19733
- ]
19735
+ /* @__PURE__ */ jsx41(SmallPriceTag, {
19736
+ children: `$${new Intl.NumberFormat("en-US", {
19737
+ maximumFractionDigits: 0
19738
+ }).format(SEAT_PRICE * devSeatCount)}`
19734
19739
  })
19735
19740
  ]
19736
19741
  })
@@ -19770,15 +19775,13 @@ var CompanyPricing = () => {
19770
19775
  count: cloudRenders,
19771
19776
  setCount: setCloudRenders,
19772
19777
  minCount: 0,
19773
- step: 1000
19778
+ step: 1,
19779
+ incrementStep: 1000
19774
19780
  }),
19775
- /* @__PURE__ */ jsxs9(SmallPriceTag, {
19776
- children: [
19777
- "$",
19778
- new Intl.NumberFormat("en-US", {
19779
- maximumFractionDigits: 0
19780
- }).format(cloudRenders / 1000 * RENDER_UNIT_PRICE)
19781
- ]
19781
+ /* @__PURE__ */ jsx41(SmallPriceTag, {
19782
+ children: `$${new Intl.NumberFormat("en-US", {
19783
+ maximumFractionDigits: 0
19784
+ }).format(Math.ceil(cloudRenders / 1000) * RENDER_UNIT_PRICE)}`
19782
19785
  })
19783
19786
  ]
19784
19787
  })
@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
755
755
  });
756
756
  }, useIsPlayer = () => {
757
757
  return useContext(IsPlayerContext);
758
- }, VERSION = "4.0.383", checkMultipleRemotionVersions = () => {
758
+ }, VERSION = "4.0.385", checkMultipleRemotionVersions = () => {
759
759
  if (typeof globalThis === "undefined") {
760
760
  return;
761
761
  }
@@ -13237,36 +13237,41 @@ var buttonContainer = {
13237
13237
  alignItems: "center",
13238
13238
  cursor: "pointer"
13239
13239
  };
13240
+ var MAX_COUNT = 9999999;
13240
13241
  var Counter = ({
13241
13242
  count,
13242
13243
  setCount,
13243
- minCount = 0,
13244
- step = 1
13244
+ minCount,
13245
+ step,
13246
+ incrementStep
13245
13247
  }) => {
13246
13248
  const decrement = () => {
13247
13249
  if (count > minCount) {
13248
- setCount(Math.max(minCount, count - step));
13250
+ setCount(Math.max(minCount, count - incrementStep));
13249
13251
  }
13250
13252
  };
13251
13253
  const increment = () => {
13252
- setCount(count + step);
13254
+ const nextValue = count + incrementStep;
13255
+ const roundedValue = Math.round(nextValue / incrementStep) * incrementStep;
13256
+ setCount(Math.min(MAX_COUNT, roundedValue));
13253
13257
  };
13258
+ const shrink = String(count).length > 6;
13254
13259
  return /* @__PURE__ */ jsxs32(Card, {
13255
13260
  style: container2,
13256
13261
  className: cn("w-[140px] flex flex-row overflow-hidden"),
13257
13262
  children: [
13258
13263
  /* @__PURE__ */ jsx73("input", {
13259
- className: "fontbrand text-2xl font-medium min-w-[80px] border-0 text-end outline-0 text-text overflow-hidden flex-1 px-0 py-0 pr-2 w-full h-full tabular-nums",
13264
+ className: cn("fontbrand font-medium min-w-[80px] border-0 text-end outline-0 text-text overflow-hidden flex-1 px-0 py-0 pr-2 w-full h-full tabular-nums", shrink ? "text-lg" : "text-2xl"),
13260
13265
  type: "number",
13261
- onClick: (e) => e.currentTarget.select(),
13262
13266
  value: count,
13267
+ onClick: (e) => e.currentTarget.select(),
13263
13268
  onChange: (e) => {
13264
13269
  if (e.target.value.trim() === "") {
13265
13270
  setCount(step === 1 ? 1 : minCount);
13266
13271
  return;
13267
13272
  }
13268
13273
  const inputValue = parseInt(e.target.value, 10);
13269
- const validValue = Math.max(inputValue, minCount);
13274
+ const validValue = Math.min(MAX_COUNT, Math.max(inputValue, minCount));
13270
13275
  if (step > 1) {
13271
13276
  const roundedValue = Math.round(validValue / step) * step;
13272
13277
  setCount(Math.max(roundedValue, minCount));
@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
755
755
  });
756
756
  }, useIsPlayer = () => {
757
757
  return useContext(IsPlayerContext);
758
- }, VERSION = "4.0.383", checkMultipleRemotionVersions = () => {
758
+ }, VERSION = "4.0.385", checkMultipleRemotionVersions = () => {
759
759
  if (typeof globalThis === "undefined") {
760
760
  return;
761
761
  }
@@ -13237,36 +13237,41 @@ var buttonContainer = {
13237
13237
  alignItems: "center",
13238
13238
  cursor: "pointer"
13239
13239
  };
13240
+ var MAX_COUNT = 9999999;
13240
13241
  var Counter = ({
13241
13242
  count,
13242
13243
  setCount,
13243
- minCount = 0,
13244
- step = 1
13244
+ minCount,
13245
+ step,
13246
+ incrementStep
13245
13247
  }) => {
13246
13248
  const decrement = () => {
13247
13249
  if (count > minCount) {
13248
- setCount(Math.max(minCount, count - step));
13250
+ setCount(Math.max(minCount, count - incrementStep));
13249
13251
  }
13250
13252
  };
13251
13253
  const increment = () => {
13252
- setCount(count + step);
13254
+ const nextValue = count + incrementStep;
13255
+ const roundedValue = Math.round(nextValue / incrementStep) * incrementStep;
13256
+ setCount(Math.min(MAX_COUNT, roundedValue));
13253
13257
  };
13258
+ const shrink = String(count).length > 6;
13254
13259
  return /* @__PURE__ */ jsxs32(Card, {
13255
13260
  style: container2,
13256
13261
  className: cn("w-[140px] flex flex-row overflow-hidden"),
13257
13262
  children: [
13258
13263
  /* @__PURE__ */ jsx73("input", {
13259
- className: "fontbrand text-2xl font-medium min-w-[80px] border-0 text-end outline-0 text-text overflow-hidden flex-1 px-0 py-0 pr-2 w-full h-full tabular-nums",
13264
+ className: cn("fontbrand font-medium min-w-[80px] border-0 text-end outline-0 text-text overflow-hidden flex-1 px-0 py-0 pr-2 w-full h-full tabular-nums", shrink ? "text-lg" : "text-2xl"),
13260
13265
  type: "number",
13261
- onClick: (e) => e.currentTarget.select(),
13262
13266
  value: count,
13267
+ onClick: (e) => e.currentTarget.select(),
13263
13268
  onChange: (e) => {
13264
13269
  if (e.target.value.trim() === "") {
13265
13270
  setCount(step === 1 ? 1 : minCount);
13266
13271
  return;
13267
13272
  }
13268
13273
  const inputValue = parseInt(e.target.value, 10);
13269
- const validValue = Math.max(inputValue, minCount);
13274
+ const validValue = Math.min(MAX_COUNT, Math.max(inputValue, minCount));
13270
13275
  if (step > 1) {
13271
13276
  const roundedValue = Math.round(validValue / step) * step;
13272
13277
  setCount(Math.max(roundedValue, minCount));
package/dist/design.js CHANGED
@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
755
755
  });
756
756
  }, useIsPlayer = () => {
757
757
  return useContext(IsPlayerContext);
758
- }, VERSION = "4.0.383", checkMultipleRemotionVersions = () => {
758
+ }, VERSION = "4.0.385", checkMultipleRemotionVersions = () => {
759
759
  if (typeof globalThis === "undefined") {
760
760
  return;
761
761
  }
@@ -13237,36 +13237,41 @@ var buttonContainer = {
13237
13237
  alignItems: "center",
13238
13238
  cursor: "pointer"
13239
13239
  };
13240
+ var MAX_COUNT = 9999999;
13240
13241
  var Counter = ({
13241
13242
  count,
13242
13243
  setCount,
13243
- minCount = 0,
13244
- step = 1
13244
+ minCount,
13245
+ step,
13246
+ incrementStep
13245
13247
  }) => {
13246
13248
  const decrement = () => {
13247
13249
  if (count > minCount) {
13248
- setCount(Math.max(minCount, count - step));
13250
+ setCount(Math.max(minCount, count - incrementStep));
13249
13251
  }
13250
13252
  };
13251
13253
  const increment = () => {
13252
- setCount(count + step);
13254
+ const nextValue = count + incrementStep;
13255
+ const roundedValue = Math.round(nextValue / incrementStep) * incrementStep;
13256
+ setCount(Math.min(MAX_COUNT, roundedValue));
13253
13257
  };
13258
+ const shrink = String(count).length > 6;
13254
13259
  return /* @__PURE__ */ jsxs32(Card, {
13255
13260
  style: container2,
13256
13261
  className: cn("w-[140px] flex flex-row overflow-hidden"),
13257
13262
  children: [
13258
13263
  /* @__PURE__ */ jsx73("input", {
13259
- className: "fontbrand text-2xl font-medium min-w-[80px] border-0 text-end outline-0 text-text overflow-hidden flex-1 px-0 py-0 pr-2 w-full h-full tabular-nums",
13264
+ className: cn("fontbrand font-medium min-w-[80px] border-0 text-end outline-0 text-text overflow-hidden flex-1 px-0 py-0 pr-2 w-full h-full tabular-nums", shrink ? "text-lg" : "text-2xl"),
13260
13265
  type: "number",
13261
- onClick: (e) => e.currentTarget.select(),
13262
13266
  value: count,
13267
+ onClick: (e) => e.currentTarget.select(),
13263
13268
  onChange: (e) => {
13264
13269
  if (e.target.value.trim() === "") {
13265
13270
  setCount(step === 1 ? 1 : minCount);
13266
13271
  return;
13267
13272
  }
13268
13273
  const inputValue = parseInt(e.target.value, 10);
13269
- const validValue = Math.max(inputValue, minCount);
13274
+ const validValue = Math.min(MAX_COUNT, Math.max(inputValue, minCount));
13270
13275
  if (step > 1) {
13271
13276
  const roundedValue = Math.round(validValue / step) * step;
13272
13277
  setCount(Math.max(roundedValue, minCount));
@@ -18353,7 +18358,8 @@ var DesignPage = () => {
18353
18358
  count: count3,
18354
18359
  setCount,
18355
18360
  minCount: 1,
18356
- step: 1
18361
+ step: 1,
18362
+ incrementStep: 1
18357
18363
  }),
18358
18364
  /* @__PURE__ */ jsx40("br", {}),
18359
18365
  " ",
@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
755
755
  });
756
756
  }, useIsPlayer = () => {
757
757
  return useContext(IsPlayerContext);
758
- }, VERSION = "4.0.383", checkMultipleRemotionVersions = () => {
758
+ }, VERSION = "4.0.385", checkMultipleRemotionVersions = () => {
759
759
  if (typeof globalThis === "undefined") {
760
760
  return;
761
761
  }
@@ -13237,36 +13237,41 @@ var buttonContainer = {
13237
13237
  alignItems: "center",
13238
13238
  cursor: "pointer"
13239
13239
  };
13240
+ var MAX_COUNT = 9999999;
13240
13241
  var Counter = ({
13241
13242
  count,
13242
13243
  setCount,
13243
- minCount = 0,
13244
- step = 1
13244
+ minCount,
13245
+ step,
13246
+ incrementStep
13245
13247
  }) => {
13246
13248
  const decrement = () => {
13247
13249
  if (count > minCount) {
13248
- setCount(Math.max(minCount, count - step));
13250
+ setCount(Math.max(minCount, count - incrementStep));
13249
13251
  }
13250
13252
  };
13251
13253
  const increment = () => {
13252
- setCount(count + step);
13254
+ const nextValue = count + incrementStep;
13255
+ const roundedValue = Math.round(nextValue / incrementStep) * incrementStep;
13256
+ setCount(Math.min(MAX_COUNT, roundedValue));
13253
13257
  };
13258
+ const shrink = String(count).length > 6;
13254
13259
  return /* @__PURE__ */ jsxs32(Card, {
13255
13260
  style: container2,
13256
13261
  className: cn("w-[140px] flex flex-row overflow-hidden"),
13257
13262
  children: [
13258
13263
  /* @__PURE__ */ jsx73("input", {
13259
- className: "fontbrand text-2xl font-medium min-w-[80px] border-0 text-end outline-0 text-text overflow-hidden flex-1 px-0 py-0 pr-2 w-full h-full tabular-nums",
13264
+ className: cn("fontbrand font-medium min-w-[80px] border-0 text-end outline-0 text-text overflow-hidden flex-1 px-0 py-0 pr-2 w-full h-full tabular-nums", shrink ? "text-lg" : "text-2xl"),
13260
13265
  type: "number",
13261
- onClick: (e) => e.currentTarget.select(),
13262
13266
  value: count,
13267
+ onClick: (e) => e.currentTarget.select(),
13263
13268
  onChange: (e) => {
13264
13269
  if (e.target.value.trim() === "") {
13265
13270
  setCount(step === 1 ? 1 : minCount);
13266
13271
  return;
13267
13272
  }
13268
13273
  const inputValue = parseInt(e.target.value, 10);
13269
- const validValue = Math.max(inputValue, minCount);
13274
+ const validValue = Math.min(MAX_COUNT, Math.max(inputValue, minCount));
13270
13275
  if (step > 1) {
13271
13276
  const roundedValue = Math.round(validValue / step) * step;
13272
13277
  setCount(Math.max(roundedValue, minCount));
@@ -19530,8 +19535,9 @@ var PriceTag = ({ children }) => {
19530
19535
  });
19531
19536
  };
19532
19537
  var SmallPriceTag = ({ children }) => {
19538
+ const shrink = children.length > 6;
19533
19539
  return /* @__PURE__ */ jsx41("div", {
19534
- className: "fontbrand text-2xl font-medium w-auto min-w-[80px] text-right shrink-0",
19540
+ className: cn2("fontbrand text-2xl font-medium w-auto min-w-[100px] text-right shrink-0", shrink ? "text-lg" : "text-2xl"),
19535
19541
  children
19536
19542
  });
19537
19543
  };
@@ -19661,7 +19667,7 @@ var CompanyPricing = () => {
19661
19667
  return formatter.format(price);
19662
19668
  }, []);
19663
19669
  const totalPrice = useMemo41(() => {
19664
- return Math.max(100, devSeatCount * SEAT_PRICE + cloudRenders / 1000 * RENDER_UNIT_PRICE);
19670
+ return Math.max(100, devSeatCount * SEAT_PRICE + Math.ceil(cloudRenders / 1000) * RENDER_UNIT_PRICE);
19665
19671
  }, [cloudRenders, devSeatCount]);
19666
19672
  const totalPriceString = useMemo41(() => {
19667
19673
  return formatPrice(totalPrice);
@@ -19722,15 +19728,14 @@ var CompanyPricing = () => {
19722
19728
  /* @__PURE__ */ jsx41(Counter, {
19723
19729
  count: devSeatCount,
19724
19730
  setCount: setDevSeatCount,
19725
- minCount: 1
19731
+ minCount: 1,
19732
+ incrementStep: 1,
19733
+ step: 1
19726
19734
  }),
19727
- /* @__PURE__ */ jsxs9(SmallPriceTag, {
19728
- children: [
19729
- "$",
19730
- new Intl.NumberFormat("en-US", {
19731
- maximumFractionDigits: 0
19732
- }).format(SEAT_PRICE * devSeatCount)
19733
- ]
19735
+ /* @__PURE__ */ jsx41(SmallPriceTag, {
19736
+ children: `$${new Intl.NumberFormat("en-US", {
19737
+ maximumFractionDigits: 0
19738
+ }).format(SEAT_PRICE * devSeatCount)}`
19734
19739
  })
19735
19740
  ]
19736
19741
  })
@@ -19770,15 +19775,13 @@ var CompanyPricing = () => {
19770
19775
  count: cloudRenders,
19771
19776
  setCount: setCloudRenders,
19772
19777
  minCount: 0,
19773
- step: 1000
19778
+ step: 1,
19779
+ incrementStep: 1000
19774
19780
  }),
19775
- /* @__PURE__ */ jsxs9(SmallPriceTag, {
19776
- children: [
19777
- "$",
19778
- new Intl.NumberFormat("en-US", {
19779
- maximumFractionDigits: 0
19780
- }).format(cloudRenders / 1000 * RENDER_UNIT_PRICE)
19781
- ]
19781
+ /* @__PURE__ */ jsx41(SmallPriceTag, {
19782
+ children: `$${new Intl.NumberFormat("en-US", {
19783
+ maximumFractionDigits: 0
19784
+ }).format(Math.ceil(cloudRenders / 1000) * RENDER_UNIT_PRICE)}`
19782
19785
  })
19783
19786
  ]
19784
19787
  })
package/dist/tailwind.css CHANGED
@@ -518,12 +518,18 @@
518
518
  .min-w-\[80px\] {
519
519
  min-width: 80px;
520
520
  }
521
+ .min-w-\[100px\] {
522
+ min-width: 100px;
523
+ }
521
524
  .min-w-\[200px\] {
522
525
  min-width: 200px;
523
526
  }
524
527
  .flex-1 {
525
528
  flex: 1;
526
529
  }
530
+ .shrink {
531
+ flex-shrink: 1;
532
+ }
527
533
  .shrink-0 {
528
534
  flex-shrink: 0;
529
535
  }
@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
755
755
  });
756
756
  }, useIsPlayer = () => {
757
757
  return useContext(IsPlayerContext);
758
- }, VERSION = "4.0.383", checkMultipleRemotionVersions = () => {
758
+ }, VERSION = "4.0.385", checkMultipleRemotionVersions = () => {
759
759
  if (typeof globalThis === "undefined") {
760
760
  return;
761
761
  }
@@ -13237,36 +13237,41 @@ var buttonContainer = {
13237
13237
  alignItems: "center",
13238
13238
  cursor: "pointer"
13239
13239
  };
13240
+ var MAX_COUNT = 9999999;
13240
13241
  var Counter = ({
13241
13242
  count,
13242
13243
  setCount,
13243
- minCount = 0,
13244
- step = 1
13244
+ minCount,
13245
+ step,
13246
+ incrementStep
13245
13247
  }) => {
13246
13248
  const decrement = () => {
13247
13249
  if (count > minCount) {
13248
- setCount(Math.max(minCount, count - step));
13250
+ setCount(Math.max(minCount, count - incrementStep));
13249
13251
  }
13250
13252
  };
13251
13253
  const increment = () => {
13252
- setCount(count + step);
13254
+ const nextValue = count + incrementStep;
13255
+ const roundedValue = Math.round(nextValue / incrementStep) * incrementStep;
13256
+ setCount(Math.min(MAX_COUNT, roundedValue));
13253
13257
  };
13258
+ const shrink = String(count).length > 6;
13254
13259
  return /* @__PURE__ */ jsxs32(Card, {
13255
13260
  style: container2,
13256
13261
  className: cn("w-[140px] flex flex-row overflow-hidden"),
13257
13262
  children: [
13258
13263
  /* @__PURE__ */ jsx73("input", {
13259
- className: "fontbrand text-2xl font-medium min-w-[80px] border-0 text-end outline-0 text-text overflow-hidden flex-1 px-0 py-0 pr-2 w-full h-full tabular-nums",
13264
+ className: cn("fontbrand font-medium min-w-[80px] border-0 text-end outline-0 text-text overflow-hidden flex-1 px-0 py-0 pr-2 w-full h-full tabular-nums", shrink ? "text-lg" : "text-2xl"),
13260
13265
  type: "number",
13261
- onClick: (e) => e.currentTarget.select(),
13262
13266
  value: count,
13267
+ onClick: (e) => e.currentTarget.select(),
13263
13268
  onChange: (e) => {
13264
13269
  if (e.target.value.trim() === "") {
13265
13270
  setCount(step === 1 ? 1 : minCount);
13266
13271
  return;
13267
13272
  }
13268
13273
  const inputValue = parseInt(e.target.value, 10);
13269
- const validValue = Math.max(inputValue, minCount);
13274
+ const validValue = Math.min(MAX_COUNT, Math.max(inputValue, minCount));
13270
13275
  if (step > 1) {
13271
13276
  const roundedValue = Math.round(validValue / step) * step;
13272
13277
  setCount(Math.max(roundedValue, minCount));
package/dist/templates.js CHANGED
@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
755
755
  });
756
756
  }, useIsPlayer = () => {
757
757
  return useContext(IsPlayerContext);
758
- }, VERSION = "4.0.383", checkMultipleRemotionVersions = () => {
758
+ }, VERSION = "4.0.385", checkMultipleRemotionVersions = () => {
759
759
  if (typeof globalThis === "undefined") {
760
760
  return;
761
761
  }
@@ -13237,36 +13237,41 @@ var buttonContainer = {
13237
13237
  alignItems: "center",
13238
13238
  cursor: "pointer"
13239
13239
  };
13240
+ var MAX_COUNT = 9999999;
13240
13241
  var Counter = ({
13241
13242
  count,
13242
13243
  setCount,
13243
- minCount = 0,
13244
- step = 1
13244
+ minCount,
13245
+ step,
13246
+ incrementStep
13245
13247
  }) => {
13246
13248
  const decrement = () => {
13247
13249
  if (count > minCount) {
13248
- setCount(Math.max(minCount, count - step));
13250
+ setCount(Math.max(minCount, count - incrementStep));
13249
13251
  }
13250
13252
  };
13251
13253
  const increment = () => {
13252
- setCount(count + step);
13254
+ const nextValue = count + incrementStep;
13255
+ const roundedValue = Math.round(nextValue / incrementStep) * incrementStep;
13256
+ setCount(Math.min(MAX_COUNT, roundedValue));
13253
13257
  };
13258
+ const shrink = String(count).length > 6;
13254
13259
  return /* @__PURE__ */ jsxs32(Card, {
13255
13260
  style: container2,
13256
13261
  className: cn("w-[140px] flex flex-row overflow-hidden"),
13257
13262
  children: [
13258
13263
  /* @__PURE__ */ jsx73("input", {
13259
- className: "fontbrand text-2xl font-medium min-w-[80px] border-0 text-end outline-0 text-text overflow-hidden flex-1 px-0 py-0 pr-2 w-full h-full tabular-nums",
13264
+ className: cn("fontbrand font-medium min-w-[80px] border-0 text-end outline-0 text-text overflow-hidden flex-1 px-0 py-0 pr-2 w-full h-full tabular-nums", shrink ? "text-lg" : "text-2xl"),
13260
13265
  type: "number",
13261
- onClick: (e) => e.currentTarget.select(),
13262
13266
  value: count,
13267
+ onClick: (e) => e.currentTarget.select(),
13263
13268
  onChange: (e) => {
13264
13269
  if (e.target.value.trim() === "") {
13265
13270
  setCount(step === 1 ? 1 : minCount);
13266
13271
  return;
13267
13272
  }
13268
13273
  const inputValue = parseInt(e.target.value, 10);
13269
- const validValue = Math.max(inputValue, minCount);
13274
+ const validValue = Math.min(MAX_COUNT, Math.max(inputValue, minCount));
13270
13275
  if (step > 1) {
13271
13276
  const roundedValue = Math.round(validValue / step) * step;
13272
13277
  setCount(Math.max(roundedValue, minCount));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@remotion/promo-pages",
3
- "version": "4.0.383",
3
+ "version": "4.0.385",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -11,23 +11,23 @@
11
11
  },
12
12
  "type": "module",
13
13
  "dependencies": {
14
- "@remotion/animated-emoji": "4.0.383",
15
- "@remotion/design": "4.0.383",
16
- "@remotion/lambda": "4.0.383",
17
- "@remotion/lottie": "4.0.383",
18
- "@remotion/paths": "4.0.383",
19
- "@remotion/player": "4.0.383",
20
- "@remotion/shapes": "4.0.383",
21
- "@remotion/svg-3d-engine": "4.0.383",
22
- "create-video": "4.0.383",
14
+ "@remotion/animated-emoji": "4.0.385",
15
+ "@remotion/design": "4.0.385",
16
+ "@remotion/lambda": "4.0.385",
17
+ "@remotion/lottie": "4.0.385",
18
+ "@remotion/paths": "4.0.385",
19
+ "@remotion/player": "4.0.385",
20
+ "@remotion/shapes": "4.0.385",
21
+ "@remotion/svg-3d-engine": "4.0.385",
22
+ "create-video": "4.0.385",
23
23
  "hls.js": "1.5.19",
24
24
  "polished": "4.3.1",
25
- "remotion": "4.0.383",
25
+ "remotion": "4.0.385",
26
26
  "zod": "3.22.3",
27
27
  "bun-plugin-tailwind": "0.1.2"
28
28
  },
29
29
  "devDependencies": {
30
- "@remotion/eslint-config-internal": "4.0.383",
30
+ "@remotion/eslint-config-internal": "4.0.385",
31
31
  "@eslint/eslintrc": "3.1.0",
32
32
  "@types/react": "19.2.7",
33
33
  "@types/react-dom": "19.2.3",