@remotion/promo-pages 4.0.384 → 4.0.386

package/dist/Homepage.js

@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.384", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.386", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -13413,36 +13413,41 @@ var buttonContainer = {
   alignItems: "center",
   cursor: "pointer"
 };
+var MAX_COUNT = 9999999;
 var Counter = ({
   count,
   setCount,
-  minCount = 0,
-  step = 1
+  minCount,
+  step,
+  incrementStep
 }) => {
   const decrement = () => {
     if (count > minCount) {
-      setCount(Math.max(minCount, count - step));
+      setCount(Math.max(minCount, count - incrementStep));
     }
   };
   const increment = () => {
-    setCount(count + step);
+    const nextValue = count + incrementStep;
+    const roundedValue = Math.round(nextValue / incrementStep) * incrementStep;
+    setCount(Math.min(MAX_COUNT, roundedValue));
   };
+  const shrink = String(count).length > 6;
   return /* @__PURE__ */ jsxs32(Card, {
     style: container2,
     className: cn("w-[140px] flex flex-row overflow-hidden"),
     children: [
       /* @__PURE__ */ jsx73("input", {
-        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",
+        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"),
         type: "number",
-        onClick: (e) => e.currentTarget.select(),
         value: count,
+        onClick: (e) => e.currentTarget.select(),
         onChange: (e) => {
           if (e.target.value.trim() === "") {
             setCount(step === 1 ? 1 : minCount);
             return;
           }
           const inputValue = parseInt(e.target.value, 10);
-          const validValue = Math.max(inputValue, minCount);
+          const validValue = Math.min(MAX_COUNT, Math.max(inputValue, minCount));
           if (step > 1) {
             const roundedValue = Math.round(validValue / step) * step;
             setCount(Math.max(roundedValue, minCount));
@@ -19706,8 +19711,9 @@ var PriceTag = ({ children }) => {
   });
 };
 var SmallPriceTag = ({ children }) => {
+  const shrink = children.length > 6;
   return /* @__PURE__ */ jsx41("div", {
-    className: "fontbrand text-2xl font-medium  w-auto min-w-[80px] text-right shrink-0",
+    className: cn2("fontbrand text-2xl font-medium w-auto min-w-[100px] text-right shrink-0", shrink ? "text-lg" : "text-2xl"),
     children
   });
 };
@@ -19837,7 +19843,7 @@ var CompanyPricing = () => {
     return formatter.format(price);
   }, []);
   const totalPrice = useMemo41(() => {
-    return Math.max(100, devSeatCount * SEAT_PRICE + cloudRenders / 1000 * RENDER_UNIT_PRICE);
+    return Math.max(100, devSeatCount * SEAT_PRICE + Math.ceil(cloudRenders / 1000) * RENDER_UNIT_PRICE);
   }, [cloudRenders, devSeatCount]);
   const totalPriceString = useMemo41(() => {
     return formatPrice(totalPrice);
@@ -19898,15 +19904,14 @@ var CompanyPricing = () => {
               /* @__PURE__ */ jsx41(Counter, {
                 count: devSeatCount,
                 setCount: setDevSeatCount,
-                minCount: 1
+                minCount: 1,
+                incrementStep: 1,
+                step: 1
               }),
-              /* @__PURE__ */ jsxs9(SmallPriceTag, {
-                children: [
-                  "$",
-                  new Intl.NumberFormat("en-US", {
-                    maximumFractionDigits: 0
-                  }).format(SEAT_PRICE * devSeatCount)
-                ]
+              /* @__PURE__ */ jsx41(SmallPriceTag, {
+                children: `$${new Intl.NumberFormat("en-US", {
+                  maximumFractionDigits: 0
+                }).format(SEAT_PRICE * devSeatCount)}`
               })
             ]
           })
@@ -19946,15 +19951,13 @@ var CompanyPricing = () => {
                 count: cloudRenders,
                 setCount: setCloudRenders,
                 minCount: 0,
-                step: 1000
+                step: 1,
+                incrementStep: 1000
               }),
-              /* @__PURE__ */ jsxs9(SmallPriceTag, {
-                children: [
-                  "$",
-                  new Intl.NumberFormat("en-US", {
-                    maximumFractionDigits: 0
-                  }).format(cloudRenders / 1000 * RENDER_UNIT_PRICE)
-                ]
+              /* @__PURE__ */ jsx41(SmallPriceTag, {
+                children: `$${new Intl.NumberFormat("en-US", {
+                  maximumFractionDigits: 0
+                }).format(Math.ceil(cloudRenders / 1000) * RENDER_UNIT_PRICE)}`
               })
             ]
           })

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/Homepage.js

@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.384", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.386", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -13413,36 +13413,41 @@ var buttonContainer = {
   alignItems: "center",
   cursor: "pointer"
 };
+var MAX_COUNT = 9999999;
 var Counter = ({
   count,
   setCount,
-  minCount = 0,
-  step = 1
+  minCount,
+  step,
+  incrementStep
 }) => {
   const decrement = () => {
     if (count > minCount) {
-      setCount(Math.max(minCount, count - step));
+      setCount(Math.max(minCount, count - incrementStep));
     }
   };
   const increment = () => {
-    setCount(count + step);
+    const nextValue = count + incrementStep;
+    const roundedValue = Math.round(nextValue / incrementStep) * incrementStep;
+    setCount(Math.min(MAX_COUNT, roundedValue));
   };
+  const shrink = String(count).length > 6;
   return /* @__PURE__ */ jsxs32(Card, {
     style: container2,
     className: cn("w-[140px] flex flex-row overflow-hidden"),
     children: [
       /* @__PURE__ */ jsx73("input", {
-        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",
+        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"),
         type: "number",
-        onClick: (e) => e.currentTarget.select(),
         value: count,
+        onClick: (e) => e.currentTarget.select(),
         onChange: (e) => {
           if (e.target.value.trim() === "") {
             setCount(step === 1 ? 1 : minCount);
             return;
           }
           const inputValue = parseInt(e.target.value, 10);
-          const validValue = Math.max(inputValue, minCount);
+          const validValue = Math.min(MAX_COUNT, Math.max(inputValue, minCount));
           if (step > 1) {
             const roundedValue = Math.round(validValue / step) * step;
             setCount(Math.max(roundedValue, minCount));
@@ -19706,8 +19711,9 @@ var PriceTag = ({ children }) => {
   });
 };
 var SmallPriceTag = ({ children }) => {
+  const shrink = children.length > 6;
   return /* @__PURE__ */ jsx41("div", {
-    className: "fontbrand text-2xl font-medium  w-auto min-w-[80px] text-right shrink-0",
+    className: cn2("fontbrand text-2xl font-medium w-auto min-w-[100px] text-right shrink-0", shrink ? "text-lg" : "text-2xl"),
     children
   });
 };
@@ -19837,7 +19843,7 @@ var CompanyPricing = () => {
     return formatter.format(price);
   }, []);
   const totalPrice = useMemo41(() => {
-    return Math.max(100, devSeatCount * SEAT_PRICE + cloudRenders / 1000 * RENDER_UNIT_PRICE);
+    return Math.max(100, devSeatCount * SEAT_PRICE + Math.ceil(cloudRenders / 1000) * RENDER_UNIT_PRICE);
   }, [cloudRenders, devSeatCount]);
   const totalPriceString = useMemo41(() => {
     return formatPrice(totalPrice);
@@ -19898,15 +19904,14 @@ var CompanyPricing = () => {
               /* @__PURE__ */ jsx41(Counter, {
                 count: devSeatCount,
                 setCount: setDevSeatCount,
-                minCount: 1
+                minCount: 1,
+                incrementStep: 1,
+                step: 1
               }),
-              /* @__PURE__ */ jsxs9(SmallPriceTag, {
-                children: [
-                  "$",
-                  new Intl.NumberFormat("en-US", {
-                    maximumFractionDigits: 0
-                  }).format(SEAT_PRICE * devSeatCount)
-                ]
+              /* @__PURE__ */ jsx41(SmallPriceTag, {
+                children: `$${new Intl.NumberFormat("en-US", {
+                  maximumFractionDigits: 0
+                }).format(SEAT_PRICE * devSeatCount)}`
               })
             ]
           })
@@ -19946,15 +19951,13 @@ var CompanyPricing = () => {
                 count: cloudRenders,
                 setCount: setCloudRenders,
                 minCount: 0,
-                step: 1000
+                step: 1,
+                incrementStep: 1000
               }),
-              /* @__PURE__ */ jsxs9(SmallPriceTag, {
-                children: [
-                  "$",
-                  new Intl.NumberFormat("en-US", {
-                    maximumFractionDigits: 0
-                  }).format(cloudRenders / 1000 * RENDER_UNIT_PRICE)
-                ]
+              /* @__PURE__ */ jsx41(SmallPriceTag, {
+                children: `$${new Intl.NumberFormat("en-US", {
+                  maximumFractionDigits: 0
+                }).format(Math.ceil(cloudRenders / 1000) * RENDER_UNIT_PRICE)}`
               })
             ]
           })

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/design.js

@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.384", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.386", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -13237,36 +13237,41 @@ var buttonContainer = {
   alignItems: "center",
   cursor: "pointer"
 };
+var MAX_COUNT = 9999999;
 var Counter = ({
   count,
   setCount,
-  minCount = 0,
-  step = 1
+  minCount,
+  step,
+  incrementStep
 }) => {
   const decrement = () => {
     if (count > minCount) {
-      setCount(Math.max(minCount, count - step));
+      setCount(Math.max(minCount, count - incrementStep));
     }
   };
   const increment = () => {
-    setCount(count + step);
+    const nextValue = count + incrementStep;
+    const roundedValue = Math.round(nextValue / incrementStep) * incrementStep;
+    setCount(Math.min(MAX_COUNT, roundedValue));
   };
+  const shrink = String(count).length > 6;
   return /* @__PURE__ */ jsxs32(Card, {
     style: container2,
     className: cn("w-[140px] flex flex-row overflow-hidden"),
     children: [
       /* @__PURE__ */ jsx73("input", {
-        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",
+        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"),
         type: "number",
-        onClick: (e) => e.currentTarget.select(),
         value: count,
+        onClick: (e) => e.currentTarget.select(),
         onChange: (e) => {
           if (e.target.value.trim() === "") {
             setCount(step === 1 ? 1 : minCount);
             return;
           }
           const inputValue = parseInt(e.target.value, 10);
-          const validValue = Math.max(inputValue, minCount);
+          const validValue = Math.min(MAX_COUNT, Math.max(inputValue, minCount));
           if (step > 1) {
             const roundedValue = Math.round(validValue / step) * step;
             setCount(Math.max(roundedValue, minCount));
@@ -18353,7 +18358,8 @@ var DesignPage = () => {
           count: count3,
           setCount,
           minCount: 1,
-          step: 1
+          step: 1,
+          incrementStep: 1
         }),
         /* @__PURE__ */ jsx40("br", {}),
         " ",

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/homepage/Pricing.js

@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.384", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.386", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -13237,36 +13237,41 @@ var buttonContainer = {
   alignItems: "center",
   cursor: "pointer"
 };
+var MAX_COUNT = 9999999;
 var Counter = ({
   count,
   setCount,
-  minCount = 0,
-  step = 1
+  minCount,
+  step,
+  incrementStep
 }) => {
   const decrement = () => {
     if (count > minCount) {
-      setCount(Math.max(minCount, count - step));
+      setCount(Math.max(minCount, count - incrementStep));
     }
   };
   const increment = () => {
-    setCount(count + step);
+    const nextValue = count + incrementStep;
+    const roundedValue = Math.round(nextValue / incrementStep) * incrementStep;
+    setCount(Math.min(MAX_COUNT, roundedValue));
   };
+  const shrink = String(count).length > 6;
   return /* @__PURE__ */ jsxs32(Card, {
     style: container2,
     className: cn("w-[140px] flex flex-row overflow-hidden"),
     children: [
       /* @__PURE__ */ jsx73("input", {
-        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",
+        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"),
         type: "number",
-        onClick: (e) => e.currentTarget.select(),
         value: count,
+        onClick: (e) => e.currentTarget.select(),
         onChange: (e) => {
           if (e.target.value.trim() === "") {
             setCount(step === 1 ? 1 : minCount);
             return;
           }
           const inputValue = parseInt(e.target.value, 10);
-          const validValue = Math.max(inputValue, minCount);
+          const validValue = Math.min(MAX_COUNT, Math.max(inputValue, minCount));
           if (step > 1) {
             const roundedValue = Math.round(validValue / step) * step;
             setCount(Math.max(roundedValue, minCount));
@@ -19530,8 +19535,9 @@ var PriceTag = ({ children }) => {
   });
 };
 var SmallPriceTag = ({ children }) => {
+  const shrink = children.length > 6;
   return /* @__PURE__ */ jsx41("div", {
-    className: "fontbrand text-2xl font-medium  w-auto min-w-[80px] text-right shrink-0",
+    className: cn2("fontbrand text-2xl font-medium w-auto min-w-[100px] text-right shrink-0", shrink ? "text-lg" : "text-2xl"),
     children
   });
 };
@@ -19661,7 +19667,7 @@ var CompanyPricing = () => {
     return formatter.format(price);
   }, []);
   const totalPrice = useMemo41(() => {
-    return Math.max(100, devSeatCount * SEAT_PRICE + cloudRenders / 1000 * RENDER_UNIT_PRICE);
+    return Math.max(100, devSeatCount * SEAT_PRICE + Math.ceil(cloudRenders / 1000) * RENDER_UNIT_PRICE);
   }, [cloudRenders, devSeatCount]);
   const totalPriceString = useMemo41(() => {
     return formatPrice(totalPrice);
@@ -19722,15 +19728,14 @@ var CompanyPricing = () => {
               /* @__PURE__ */ jsx41(Counter, {
                 count: devSeatCount,
                 setCount: setDevSeatCount,
-                minCount: 1
+                minCount: 1,
+                incrementStep: 1,
+                step: 1
               }),
-              /* @__PURE__ */ jsxs9(SmallPriceTag, {
-                children: [
-                  "$",
-                  new Intl.NumberFormat("en-US", {
-                    maximumFractionDigits: 0
-                  }).format(SEAT_PRICE * devSeatCount)
-                ]
+              /* @__PURE__ */ jsx41(SmallPriceTag, {
+                children: `$${new Intl.NumberFormat("en-US", {
+                  maximumFractionDigits: 0
+                }).format(SEAT_PRICE * devSeatCount)}`
               })
             ]
           })
@@ -19770,15 +19775,13 @@ var CompanyPricing = () => {
                 count: cloudRenders,
                 setCount: setCloudRenders,
                 minCount: 0,
-                step: 1000
+                step: 1,
+                incrementStep: 1000
               }),
-              /* @__PURE__ */ jsxs9(SmallPriceTag, {
-                children: [
-                  "$",
-                  new Intl.NumberFormat("en-US", {
-                    maximumFractionDigits: 0
-                  }).format(cloudRenders / 1000 * RENDER_UNIT_PRICE)
-                ]
+              /* @__PURE__ */ jsx41(SmallPriceTag, {
+                children: `$${new Intl.NumberFormat("en-US", {
+                  maximumFractionDigits: 0
+                }).format(Math.ceil(cloudRenders / 1000) * RENDER_UNIT_PRICE)}`
               })
             ]
           })

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/template-modal-content.js

@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.384", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.386", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -13237,36 +13237,41 @@ var buttonContainer = {
   alignItems: "center",
   cursor: "pointer"
 };
+var MAX_COUNT = 9999999;
 var Counter = ({
   count,
   setCount,
-  minCount = 0,
-  step = 1
+  minCount,
+  step,
+  incrementStep
 }) => {
   const decrement = () => {
     if (count > minCount) {
-      setCount(Math.max(minCount, count - step));
+      setCount(Math.max(minCount, count - incrementStep));
     }
   };
   const increment = () => {
-    setCount(count + step);
+    const nextValue = count + incrementStep;
+    const roundedValue = Math.round(nextValue / incrementStep) * incrementStep;
+    setCount(Math.min(MAX_COUNT, roundedValue));
   };
+  const shrink = String(count).length > 6;
   return /* @__PURE__ */ jsxs32(Card, {
     style: container2,
     className: cn("w-[140px] flex flex-row overflow-hidden"),
     children: [
       /* @__PURE__ */ jsx73("input", {
-        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",
+        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"),
         type: "number",
-        onClick: (e) => e.currentTarget.select(),
         value: count,
+        onClick: (e) => e.currentTarget.select(),
         onChange: (e) => {
           if (e.target.value.trim() === "") {
             setCount(step === 1 ? 1 : minCount);
             return;
           }
           const inputValue = parseInt(e.target.value, 10);
-          const validValue = Math.max(inputValue, minCount);
+          const validValue = Math.min(MAX_COUNT, Math.max(inputValue, minCount));
           if (step > 1) {
             const roundedValue = Math.round(validValue / step) * step;
             setCount(Math.max(roundedValue, minCount));

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/templates.js

@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.384", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.386", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -13237,36 +13237,41 @@ var buttonContainer = {
   alignItems: "center",
   cursor: "pointer"
 };
+var MAX_COUNT = 9999999;
 var Counter = ({
   count,
   setCount,
-  minCount = 0,
-  step = 1
+  minCount,
+  step,
+  incrementStep
 }) => {
   const decrement = () => {
     if (count > minCount) {
-      setCount(Math.max(minCount, count - step));
+      setCount(Math.max(minCount, count - incrementStep));
     }
   };
   const increment = () => {
-    setCount(count + step);
+    const nextValue = count + incrementStep;
+    const roundedValue = Math.round(nextValue / incrementStep) * incrementStep;
+    setCount(Math.min(MAX_COUNT, roundedValue));
   };
+  const shrink = String(count).length > 6;
   return /* @__PURE__ */ jsxs32(Card, {
     style: container2,
     className: cn("w-[140px] flex flex-row overflow-hidden"),
     children: [
       /* @__PURE__ */ jsx73("input", {
-        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",
+        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"),
         type: "number",
-        onClick: (e) => e.currentTarget.select(),
         value: count,
+        onClick: (e) => e.currentTarget.select(),
         onChange: (e) => {
           if (e.target.value.trim() === "") {
             setCount(step === 1 ? 1 : minCount);
             return;
           }
           const inputValue = parseInt(e.target.value, 10);
-          const validValue = Math.max(inputValue, minCount);
+          const validValue = Math.min(MAX_COUNT, Math.max(inputValue, minCount));
           if (step > 1) {
             const roundedValue = Math.round(validValue / step) * step;
             setCount(Math.max(roundedValue, minCount));

package/dist/design.js

@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.384", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.386", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -13237,36 +13237,41 @@ var buttonContainer = {
   alignItems: "center",
   cursor: "pointer"
 };
+var MAX_COUNT = 9999999;
 var Counter = ({
   count,
   setCount,
-  minCount = 0,
-  step = 1
+  minCount,
+  step,
+  incrementStep
 }) => {
   const decrement = () => {
     if (count > minCount) {
-      setCount(Math.max(minCount, count - step));
+      setCount(Math.max(minCount, count - incrementStep));
     }
   };
   const increment = () => {
-    setCount(count + step);
+    const nextValue = count + incrementStep;
+    const roundedValue = Math.round(nextValue / incrementStep) * incrementStep;
+    setCount(Math.min(MAX_COUNT, roundedValue));
   };
+  const shrink = String(count).length > 6;
   return /* @__PURE__ */ jsxs32(Card, {
     style: container2,
     className: cn("w-[140px] flex flex-row overflow-hidden"),
     children: [
       /* @__PURE__ */ jsx73("input", {
-        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",
+        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"),
         type: "number",
-        onClick: (e) => e.currentTarget.select(),
         value: count,
+        onClick: (e) => e.currentTarget.select(),
         onChange: (e) => {
           if (e.target.value.trim() === "") {
             setCount(step === 1 ? 1 : minCount);
             return;
           }
           const inputValue = parseInt(e.target.value, 10);
-          const validValue = Math.max(inputValue, minCount);
+          const validValue = Math.min(MAX_COUNT, Math.max(inputValue, minCount));
           if (step > 1) {
             const roundedValue = Math.round(validValue / step) * step;
             setCount(Math.max(roundedValue, minCount));
@@ -18353,7 +18358,8 @@ var DesignPage = () => {
           count: count3,
           setCount,
           minCount: 1,
-          step: 1
+          step: 1,
+          incrementStep: 1
         }),
         /* @__PURE__ */ jsx40("br", {}),
         " ",

package/dist/homepage/Pricing.js

@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.384", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.386", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -13237,36 +13237,41 @@ var buttonContainer = {
   alignItems: "center",
   cursor: "pointer"
 };
+var MAX_COUNT = 9999999;
 var Counter = ({
   count,
   setCount,
-  minCount = 0,
-  step = 1
+  minCount,
+  step,
+  incrementStep
 }) => {
   const decrement = () => {
     if (count > minCount) {
-      setCount(Math.max(minCount, count - step));
+      setCount(Math.max(minCount, count - incrementStep));
     }
   };
   const increment = () => {
-    setCount(count + step);
+    const nextValue = count + incrementStep;
+    const roundedValue = Math.round(nextValue / incrementStep) * incrementStep;
+    setCount(Math.min(MAX_COUNT, roundedValue));
   };
+  const shrink = String(count).length > 6;
   return /* @__PURE__ */ jsxs32(Card, {
     style: container2,
     className: cn("w-[140px] flex flex-row overflow-hidden"),
     children: [
       /* @__PURE__ */ jsx73("input", {
-        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",
+        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"),
         type: "number",
-        onClick: (e) => e.currentTarget.select(),
         value: count,
+        onClick: (e) => e.currentTarget.select(),
         onChange: (e) => {
           if (e.target.value.trim() === "") {
             setCount(step === 1 ? 1 : minCount);
             return;
           }
           const inputValue = parseInt(e.target.value, 10);
-          const validValue = Math.max(inputValue, minCount);
+          const validValue = Math.min(MAX_COUNT, Math.max(inputValue, minCount));
           if (step > 1) {
             const roundedValue = Math.round(validValue / step) * step;
             setCount(Math.max(roundedValue, minCount));
@@ -19530,8 +19535,9 @@ var PriceTag = ({ children }) => {
   });
 };
 var SmallPriceTag = ({ children }) => {
+  const shrink = children.length > 6;
   return /* @__PURE__ */ jsx41("div", {
-    className: "fontbrand text-2xl font-medium  w-auto min-w-[80px] text-right shrink-0",
+    className: cn2("fontbrand text-2xl font-medium w-auto min-w-[100px] text-right shrink-0", shrink ? "text-lg" : "text-2xl"),
     children
   });
 };
@@ -19661,7 +19667,7 @@ var CompanyPricing = () => {
     return formatter.format(price);
   }, []);
   const totalPrice = useMemo41(() => {
-    return Math.max(100, devSeatCount * SEAT_PRICE + cloudRenders / 1000 * RENDER_UNIT_PRICE);
+    return Math.max(100, devSeatCount * SEAT_PRICE + Math.ceil(cloudRenders / 1000) * RENDER_UNIT_PRICE);
   }, [cloudRenders, devSeatCount]);
   const totalPriceString = useMemo41(() => {
     return formatPrice(totalPrice);
@@ -19722,15 +19728,14 @@ var CompanyPricing = () => {
               /* @__PURE__ */ jsx41(Counter, {
                 count: devSeatCount,
                 setCount: setDevSeatCount,
-                minCount: 1
+                minCount: 1,
+                incrementStep: 1,
+                step: 1
               }),
-              /* @__PURE__ */ jsxs9(SmallPriceTag, {
-                children: [
-                  "$",
-                  new Intl.NumberFormat("en-US", {
-                    maximumFractionDigits: 0
-                  }).format(SEAT_PRICE * devSeatCount)
-                ]
+              /* @__PURE__ */ jsx41(SmallPriceTag, {
+                children: `$${new Intl.NumberFormat("en-US", {
+                  maximumFractionDigits: 0
+                }).format(SEAT_PRICE * devSeatCount)}`
               })
             ]
           })
@@ -19770,15 +19775,13 @@ var CompanyPricing = () => {
                 count: cloudRenders,
                 setCount: setCloudRenders,
                 minCount: 0,
-                step: 1000
+                step: 1,
+                incrementStep: 1000
               }),
-              /* @__PURE__ */ jsxs9(SmallPriceTag, {
-                children: [
-                  "$",
-                  new Intl.NumberFormat("en-US", {
-                    maximumFractionDigits: 0
-                  }).format(cloudRenders / 1000 * RENDER_UNIT_PRICE)
-                ]
+              /* @__PURE__ */ jsx41(SmallPriceTag, {
+                children: `$${new Intl.NumberFormat("en-US", {
+                  maximumFractionDigits: 0
+                }).format(Math.ceil(cloudRenders / 1000) * RENDER_UNIT_PRICE)}`
               })
             ]
           })

package/dist/tailwind.css

@@ -518,12 +518,18 @@
   .min-w-\[80px\] {
     min-width: 80px;
   }
+  .min-w-\[100px\] {
+    min-width: 100px;
+  }
   .min-w-\[200px\] {
     min-width: 200px;
   }
   .flex-1 {
     flex: 1;
   }
+  .shrink {
+    flex-shrink: 1;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }

package/dist/template-modal-content.js

@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.384", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.386", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -13237,36 +13237,41 @@ var buttonContainer = {
   alignItems: "center",
   cursor: "pointer"
 };
+var MAX_COUNT = 9999999;
 var Counter = ({
   count,
   setCount,
-  minCount = 0,
-  step = 1
+  minCount,
+  step,
+  incrementStep
 }) => {
   const decrement = () => {
     if (count > minCount) {
-      setCount(Math.max(minCount, count - step));
+      setCount(Math.max(minCount, count - incrementStep));
     }
   };
   const increment = () => {
-    setCount(count + step);
+    const nextValue = count + incrementStep;
+    const roundedValue = Math.round(nextValue / incrementStep) * incrementStep;
+    setCount(Math.min(MAX_COUNT, roundedValue));
   };
+  const shrink = String(count).length > 6;
   return /* @__PURE__ */ jsxs32(Card, {
     style: container2,
     className: cn("w-[140px] flex flex-row overflow-hidden"),
     children: [
       /* @__PURE__ */ jsx73("input", {
-        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",
+        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"),
         type: "number",
-        onClick: (e) => e.currentTarget.select(),
         value: count,
+        onClick: (e) => e.currentTarget.select(),
         onChange: (e) => {
           if (e.target.value.trim() === "") {
             setCount(step === 1 ? 1 : minCount);
             return;
           }
           const inputValue = parseInt(e.target.value, 10);
-          const validValue = Math.max(inputValue, minCount);
+          const validValue = Math.min(MAX_COUNT, Math.max(inputValue, minCount));
           if (step > 1) {
             const roundedValue = Math.round(validValue / step) * step;
             setCount(Math.max(roundedValue, minCount));

package/dist/templates.js

@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.384", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.386", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -13237,36 +13237,41 @@ var buttonContainer = {
   alignItems: "center",
   cursor: "pointer"
 };
+var MAX_COUNT = 9999999;
 var Counter = ({
   count,
   setCount,
-  minCount = 0,
-  step = 1
+  minCount,
+  step,
+  incrementStep
 }) => {
   const decrement = () => {
     if (count > minCount) {
-      setCount(Math.max(minCount, count - step));
+      setCount(Math.max(minCount, count - incrementStep));
     }
   };
   const increment = () => {
-    setCount(count + step);
+    const nextValue = count + incrementStep;
+    const roundedValue = Math.round(nextValue / incrementStep) * incrementStep;
+    setCount(Math.min(MAX_COUNT, roundedValue));
   };
+  const shrink = String(count).length > 6;
   return /* @__PURE__ */ jsxs32(Card, {
     style: container2,
     className: cn("w-[140px] flex flex-row overflow-hidden"),
     children: [
       /* @__PURE__ */ jsx73("input", {
-        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",
+        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"),
         type: "number",
-        onClick: (e) => e.currentTarget.select(),
         value: count,
+        onClick: (e) => e.currentTarget.select(),
         onChange: (e) => {
           if (e.target.value.trim() === "") {
             setCount(step === 1 ? 1 : minCount);
             return;
           }
           const inputValue = parseInt(e.target.value, 10);
-          const validValue = Math.max(inputValue, minCount);
+          const validValue = Math.min(MAX_COUNT, Math.max(inputValue, minCount));
           if (step > 1) {
             const roundedValue = Math.round(validValue / step) * step;
             setCount(Math.max(roundedValue, minCount));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/promo-pages",
-	"version": "4.0.384",
+	"version": "4.0.386",
 	"publishConfig": {
 		"access": "public"
 	},
@@ -11,23 +11,23 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@remotion/animated-emoji": "4.0.384",
-		"@remotion/design": "4.0.384",
-		"@remotion/lambda": "4.0.384",
-		"@remotion/lottie": "4.0.384",
-		"@remotion/paths": "4.0.384",
-		"@remotion/player": "4.0.384",
-		"@remotion/shapes": "4.0.384",
-		"@remotion/svg-3d-engine": "4.0.384",
-		"create-video": "4.0.384",
+		"@remotion/animated-emoji": "4.0.386",
+		"@remotion/design": "4.0.386",
+		"@remotion/lambda": "4.0.386",
+		"@remotion/lottie": "4.0.386",
+		"@remotion/paths": "4.0.386",
+		"@remotion/player": "4.0.386",
+		"@remotion/shapes": "4.0.386",
+		"@remotion/svg-3d-engine": "4.0.386",
+		"create-video": "4.0.386",
 		"hls.js": "1.5.19",
 		"polished": "4.3.1",
-		"remotion": "4.0.384",
+		"remotion": "4.0.386",
 		"zod": "3.22.3",
 		"bun-plugin-tailwind": "0.1.2"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.384",
+		"@remotion/eslint-config-internal": "4.0.386",
 		"@eslint/eslintrc": "3.1.0",
 		"@types/react": "19.2.7",
 		"@types/react-dom": "19.2.3",