@schematichq/schematic-components 0.7.3 → 0.7.5

package/dist/schematic-components.cjs.js

@@ -3017,7 +3017,7 @@ var unitlessKeys = {
 var f = "undefined" != typeof process && void 0 !== process.env && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || "data-styled";
 var m = "active";
 var y = "data-styled-version";
-var v = "6.1.16";
+var v = "6.1.17";
 var g = "/*!sc*/\n";
 var S = "undefined" != typeof window && "HTMLElement" in window;
 var w = Boolean("boolean" == typeof SC_DISABLE_SPEEDY ? SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== process.env && void 0 !== process.env.REACT_APP_SC_DISABLE_SPEEDY && "" !== process.env.REACT_APP_SC_DISABLE_SPEEDY ? "false" !== process.env.REACT_APP_SC_DISABLE_SPEEDY && process.env.REACT_APP_SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== process.env && void 0 !== process.env.SC_DISABLE_SPEEDY && "" !== process.env.SC_DISABLE_SPEEDY ? "false" !== process.env.SC_DISABLE_SPEEDY && process.env.SC_DISABLE_SPEEDY : true);
@@ -3026,7 +3026,7 @@ var E = /invalid hook call/i;
 var N = /* @__PURE__ */ new Set();
 var P = function(t2, n) {
   if (true) {
-    var o2 = n ? ' with the id of "'.concat(n, '"') : "", s2 = "The component ".concat(t2).concat(o2, " has been created dynamically.\n") + "You may see this warning because you've called styled inside another component.\nTo resolve this only create new StyledComponents outside of any render method and function component.", i2 = console.error;
+    var o2 = n ? ' with the id of "'.concat(n, '"') : "", s2 = "The component ".concat(t2).concat(o2, " has been created dynamically.\n") + "You may see this warning because you've called styled inside another component.\nTo resolve this only create new StyledComponents outside of any render method and function component.\nSee https://styled-components.com/docs/basics#define-styled-components-outside-of-the-render-method for more info.\n", i2 = console.error;
     try {
       var a2 = true;
       console.error = function(t3) {
@@ -10743,7 +10743,8 @@ function BillingProductPriceTierResponseDataFromJSONTyped(json, ignoreDiscrimina
   }
   return {
     flatAmount: json["flat_amount"] == null ? void 0 : json["flat_amount"],
-    perUnitPrice: json["per_unit_price"],
+    perUnitPrice: json["per_unit_price"] == null ? void 0 : json["per_unit_price"],
+    perUnitPriceDecimal: json["per_unit_price_decimal"] == null ? void 0 : json["per_unit_price_decimal"],
     upTo: json["up_to"] == null ? void 0 : json["up_to"]
   };
 }
@@ -10793,6 +10794,7 @@ function BillingProductDetailResponseDataFromJSONTyped(json, ignoreDiscriminator
     currency: json["currency"],
     environmentId: json["environment_id"],
     externalId: json["external_id"],
+    isActive: json["is_active"],
     name: json["name"],
     price: json["price"],
     priceDecimal: json["price_decimal"] == null ? void 0 : json["price_decimal"],
@@ -10852,6 +10854,7 @@ function BillingProductResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     currency: json["currency"],
     environmentId: json["environment_id"],
     externalId: json["external_id"],
+    isActive: json["is_active"],
     name: json["name"],
     price: json["price"],
     priceDecimal: json["price_decimal"] == null ? void 0 : json["price_decimal"],
@@ -11248,6 +11251,7 @@ function CompanyDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
       BillingSubscriptionViewFromJSON
     ),
     createdAt: new Date(json["created_at"]),
+    defaultPaymentMethod: json["default_payment_method"] == null ? void 0 : PaymentMethodResponseDataFromJSON(json["default_payment_method"]),
     entityTraits: json["entity_traits"].map(
       EntityTraitDetailResponseDataFromJSON
     ),
@@ -13189,7 +13193,7 @@ var EmbedProvider = ({
   (0, import_react11.useEffect)(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.7.3";
+      headers["X-Schematic-Components-Version"] = "0.7.5";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -14372,14 +14376,6 @@ var ModalHeader = ({
   );
 };
 
-// src/components/ui/progress-bar/styles.ts
-var Container3 = dt.div`
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-`;
-
 // src/components/ui/progress-bar/ProgressBar.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var progressColorMap = [
@@ -14396,7 +14392,6 @@ var ProgressBar = ({
   total = 0,
   color = "gray",
   bgColor = "#F2F4F7",
-  barWidth = "100%",
   ...props
 }) => {
   const theme = nt();
@@ -14407,18 +14402,18 @@ var ProgressBar = ({
     orange: "#DB6769",
     red: "#EF4444"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Container3, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      Flex,
-      {
-        $position: "relative",
-        $alignItems: "center",
-        $width: `${barWidth}`,
-        $maxWidth: "100%",
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          Flex,
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    Flex,
+    {
+      $position: "relative",
+      $alignItems: "center",
+      $gap: "1rem",
+      $width: "100%",
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          Box,
           {
-            $position: "relative",
             $overflow: "hidden",
             $width: "100%",
             $height: `${8 / TEXT_BASE_SIZE}rem`,
@@ -14429,29 +14424,28 @@ var ProgressBar = ({
               {
                 $width: `${Math.min(progress, 100)}%`,
                 $height: "100%",
-                $backgroundColor: barColorMap[color],
-                $borderRadius: "9999px"
+                $backgroundColor: barColorMap[color]
               }
             )
           }
+        ),
+        total && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          Text,
+          {
+            $font: theme.typography.text.fontFamily,
+            $size: 14,
+            $weight: 500,
+            $color: theme.typography.text.color,
+            children: [
+              value,
+              "/",
+              total
+            ]
+          }
         )
-      }
-    ),
-    total !== 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-      Text,
-      {
-        $font: theme.typography.text.fontFamily,
-        $size: 14,
-        $weight: 500,
-        $color: theme.typography.text.color,
-        children: [
-          value,
-          "/",
-          total
-        ]
-      }
-    )
-  ] });
+      ]
+    }
+  );
 };
 
 // src/components/ui/text/styles.ts
@@ -14500,7 +14494,9 @@ var import_react19 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/components/ui/tooltip/styles.ts
-var Trigger = dt.div``;
+var Trigger = dt.div`
+  width: 100%;
+`;
 var coords = (position2) => {
   let x2 = 0;
   let y2 = 0;
@@ -14656,13 +14652,15 @@ var Tooltip = ({
     }
   }, [position2]);
   (0, import_react19.useLayoutEffect)(() => {
-    updateCoords();
     const handleResize = (0, import_debounce.default)(updateCoords, DEBOUNCE_TIMEOUT);
     window.addEventListener("resize", handleResize);
     return () => {
       window.removeEventListener("resize", handleResize);
     };
   }, [updateCoords]);
+  (0, import_react19.useLayoutEffect)(() => {
+    updateCoords();
+  }, [updateCoords, show]);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       Trigger,
@@ -16377,7 +16375,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
 };
 
 // node_modules/@stripe/stripe-js/dist/index.mjs
-var RELEASE_TRAIN = "acacia";
+var RELEASE_TRAIN = "basil";
 var runtimeVersionToUrlVersion = function runtimeVersionToUrlVersion2(version) {
   return version === 3 ? "v3" : version;
 };
@@ -16417,7 +16415,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "6.1.0",
+    version: "7.0.0",
     startTime
   });
 };
@@ -16492,7 +16490,7 @@ var initStripe = function initStripe2(maybeStripe, args, startTime) {
   var version = runtimeVersionToUrlVersion(maybeStripe.version);
   var expectedVersion = RELEASE_TRAIN;
   if (isTestKey && version !== expectedVersion) {
-    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("6.1.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
+    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("7.0.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
   }
   var stripe = maybeStripe.apply(void 0, args);
   registerWrapper(stripe, startTime);
@@ -18940,7 +18938,7 @@ Invoices.displayName = "Invoices";
 var import_react35 = require("react");
 
 // src/components/elements/metered-features/styles.ts
-var Container4 = dt.div`
+var Container3 = dt.div`
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -19036,7 +19034,7 @@ var MeteredFeatures = (0, import_react35.forwardRef)(({ className, ...rest }, re
   if (!shouldShowFeatures) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Container4, { ref, className, children: featureUsage.map(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Container3, { ref, className, children: featureUsage.map(
     ({
       feature,
       priceBehavior,
@@ -19061,8 +19059,7 @@ var MeteredFeatures = (0, import_react35.forwardRef)(({ className, ...rest }, re
           color: isOverage ? "blue" : progressColorMap[Math.floor(
             Math.min(usage, limit) / limit * (progressColorMap.length - 1)
           )],
-          ...isOverage && { bgColor: "#EF4444" },
-          $flexGrow: 1
+          ...isOverage && { bgColor: "#EF4444" }
         }
       );
       return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Flex, { $flexDirection: "column-reverse", children: [
@@ -19574,8 +19571,8 @@ var PaymentMethod = (0, import_react37.forwardRef)(({ children, className, porta
   const props = resolveDesignProps5(rest);
   const { data, setLayout } = useEmbed();
   const paymentMethod = (0, import_react37.useMemo)(() => {
-    return data.subscription?.paymentMethod;
-  }, [data.subscription?.paymentMethod]);
+    return data.subscription?.paymentMethod || data.company?.defaultPaymentMethod;
+  }, [data.company?.defaultPaymentMethod, data.subscription?.paymentMethod]);
   const monthsToExpiration = (0, import_react37.useMemo)(() => {
     let expiration;
     if (typeof paymentMethod?.cardExpYear === "number" && typeof paymentMethod?.cardExpMonth === "number") {
@@ -19633,10 +19630,10 @@ var PaymentMethodDetails = ({
   const [showDifferentPaymentMethods, setShowDifferentPaymentMethods] = (0, import_react38.useState)(false);
   const [paymentMethod, setPaymentMethod] = (0, import_react38.useState)(void 0);
   (0, import_react38.useEffect)(() => {
-    if (data.subscription?.paymentMethod) {
-      setPaymentMethod(data.subscription.paymentMethod);
-    }
-  }, [data.subscription?.paymentMethod]);
+    setPaymentMethod(
+      data.subscription?.paymentMethod || data.company?.defaultPaymentMethod
+    );
+  }, [data.company?.defaultPaymentMethod, data.subscription?.paymentMethod]);
   const monthsToExpiration = (0, import_react38.useMemo)(() => {
     let expiration;
     if (typeof paymentMethod?.cardExpYear === "number" && typeof paymentMethod?.cardExpMonth === "number") {
@@ -19693,15 +19690,31 @@ var PaymentMethodDetails = ({
         if (setPaymentMethodId) {
           setPaymentMethodId(updatePaymentMethodResponse.data.externalId);
         }
-        if (data.subscription) {
-          setData({
-            ...data,
+        setData({
+          ...data,
+          // Optimistic update
+          // If there is subscription - we have set payment method to subscription
+          ...data.subscription ? {
             subscription: {
               ...data.subscription,
               paymentMethod: updatePaymentMethodResponse.data
             }
-          });
-        }
+          } : {},
+          ...data.company ? {
+            company: {
+              ...data.company,
+              paymentMethods: [
+                updatePaymentMethodResponse.data,
+                ...data.company?.paymentMethods || []
+              ],
+              // Optimistic update
+              // If there is no subscription - we have updated default payment method in company
+              ...data.subscription ? {} : {
+                defaultPaymentMethod: updatePaymentMethodResponse.data
+              }
+            }
+          } : {}
+        });
       } catch {
         setError(t2("Error updating payment method. Please try again."));
       } finally {

package/dist/schematic-components.d.ts

@@ -268,6 +268,12 @@ declare interface BillingProductDetailResponseData {
      * @memberof BillingProductDetailResponseData
      */
     externalId: string;
+    /**
+     *
+     * @type {boolean}
+     * @memberof BillingProductDetailResponseData
+     */
+    isActive: boolean;
     /**
      *
      * @type {string}
@@ -462,7 +468,13 @@ declare interface BillingProductPriceTierResponseData {
      * @type {number}
      * @memberof BillingProductPriceTierResponseData
      */
-    perUnitPrice: number;
+    perUnitPrice?: number | null;
+    /**
+     *
+     * @type {string}
+     * @memberof BillingProductPriceTierResponseData
+     */
+    perUnitPriceDecimal?: string | null;
     /**
      *
      * @type {number}
@@ -518,6 +530,12 @@ declare interface BillingProductResponseData {
      * @memberof BillingProductResponseData
      */
     externalId: string;
+    /**
+     *
+     * @type {boolean}
+     * @memberof BillingProductResponseData
+     */
+    isActive: boolean;
     /**
      *
      * @type {string}
@@ -1184,6 +1202,12 @@ declare interface CompanyDetailResponseData {
      * @memberof CompanyDetailResponseData
      */
     createdAt: Date;
+    /**
+     *
+     * @type {PaymentMethodResponseData}
+     * @memberof CompanyDetailResponseData
+     */
+    defaultPaymentMethod?: PaymentMethodResponseData;
     /**
      *
      * @type {Array<EntityTraitDetailResponseData>}
@@ -4244,7 +4268,7 @@ export declare const PricingTable: ForwardRefExoticComponent<ElementProps & Recu
 
 export declare type PricingTableProps = DesignProps_7;
 
-export declare const ProgressBar: ({ progress, value, total, color, bgColor, barWidth, ...props }: ProgressBarProps) => JSX.Element;
+export declare const ProgressBar: ({ progress, value, total, color, bgColor, ...props }: ProgressBarProps) => JSX.Element;
 
 export declare interface ProgressBarProps extends React.ComponentPropsWithoutRef<typeof Flex> {
     progress: number;
@@ -4252,7 +4276,6 @@ export declare interface ProgressBarProps extends React.ComponentPropsWithoutRef
     total?: number | string;
     color?: "gray" | "blue" | "yellow" | "orange" | "red";
     bgColor?: string;
-    barWidth?: string | number;
 }
 
 export declare const progressColorMap: ("blue" | "red" | "yellow")[];

package/dist/schematic-components.esm.js

@@ -2964,7 +2964,7 @@ var unitlessKeys = {
 var f = "undefined" != typeof process && void 0 !== process.env && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || "data-styled";
 var m = "active";
 var y = "data-styled-version";
-var v = "6.1.16";
+var v = "6.1.17";
 var g = "/*!sc*/\n";
 var S = "undefined" != typeof window && "HTMLElement" in window;
 var w = Boolean("boolean" == typeof SC_DISABLE_SPEEDY ? SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== process.env && void 0 !== process.env.REACT_APP_SC_DISABLE_SPEEDY && "" !== process.env.REACT_APP_SC_DISABLE_SPEEDY ? "false" !== process.env.REACT_APP_SC_DISABLE_SPEEDY && process.env.REACT_APP_SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== process.env && void 0 !== process.env.SC_DISABLE_SPEEDY && "" !== process.env.SC_DISABLE_SPEEDY ? "false" !== process.env.SC_DISABLE_SPEEDY && process.env.SC_DISABLE_SPEEDY : true);
@@ -2973,7 +2973,7 @@ var E = /invalid hook call/i;
 var N = /* @__PURE__ */ new Set();
 var P = function(t2, n) {
   if (true) {
-    var o2 = n ? ' with the id of "'.concat(n, '"') : "", s2 = "The component ".concat(t2).concat(o2, " has been created dynamically.\n") + "You may see this warning because you've called styled inside another component.\nTo resolve this only create new StyledComponents outside of any render method and function component.", i2 = console.error;
+    var o2 = n ? ' with the id of "'.concat(n, '"') : "", s2 = "The component ".concat(t2).concat(o2, " has been created dynamically.\n") + "You may see this warning because you've called styled inside another component.\nTo resolve this only create new StyledComponents outside of any render method and function component.\nSee https://styled-components.com/docs/basics#define-styled-components-outside-of-the-render-method for more info.\n", i2 = console.error;
     try {
       var a2 = true;
       console.error = function(t3) {
@@ -10690,7 +10690,8 @@ function BillingProductPriceTierResponseDataFromJSONTyped(json, ignoreDiscrimina
   }
   return {
     flatAmount: json["flat_amount"] == null ? void 0 : json["flat_amount"],
-    perUnitPrice: json["per_unit_price"],
+    perUnitPrice: json["per_unit_price"] == null ? void 0 : json["per_unit_price"],
+    perUnitPriceDecimal: json["per_unit_price_decimal"] == null ? void 0 : json["per_unit_price_decimal"],
     upTo: json["up_to"] == null ? void 0 : json["up_to"]
   };
 }
@@ -10740,6 +10741,7 @@ function BillingProductDetailResponseDataFromJSONTyped(json, ignoreDiscriminator
     currency: json["currency"],
     environmentId: json["environment_id"],
     externalId: json["external_id"],
+    isActive: json["is_active"],
     name: json["name"],
     price: json["price"],
     priceDecimal: json["price_decimal"] == null ? void 0 : json["price_decimal"],
@@ -10799,6 +10801,7 @@ function BillingProductResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     currency: json["currency"],
     environmentId: json["environment_id"],
     externalId: json["external_id"],
+    isActive: json["is_active"],
     name: json["name"],
     price: json["price"],
     priceDecimal: json["price_decimal"] == null ? void 0 : json["price_decimal"],
@@ -11195,6 +11198,7 @@ function CompanyDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
       BillingSubscriptionViewFromJSON
     ),
     createdAt: new Date(json["created_at"]),
+    defaultPaymentMethod: json["default_payment_method"] == null ? void 0 : PaymentMethodResponseDataFromJSON(json["default_payment_method"]),
     entityTraits: json["entity_traits"].map(
       EntityTraitDetailResponseDataFromJSON
     ),
@@ -13136,7 +13140,7 @@ var EmbedProvider = ({
   useEffect2(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.7.3";
+      headers["X-Schematic-Components-Version"] = "0.7.5";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -14319,14 +14323,6 @@ var ModalHeader = ({
   );
 };
 
-// src/components/ui/progress-bar/styles.ts
-var Container3 = dt.div`
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-`;
-
 // src/components/ui/progress-bar/ProgressBar.tsx
 import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var progressColorMap = [
@@ -14343,7 +14339,6 @@ var ProgressBar = ({
   total = 0,
   color = "gray",
   bgColor = "#F2F4F7",
-  barWidth = "100%",
   ...props
 }) => {
   const theme = nt();
@@ -14354,18 +14349,18 @@ var ProgressBar = ({
     orange: "#DB6769",
     red: "#EF4444"
   };
-  return /* @__PURE__ */ jsxs4(Container3, { ...props, children: [
-    /* @__PURE__ */ jsx7(
-      Flex,
-      {
-        $position: "relative",
-        $alignItems: "center",
-        $width: `${barWidth}`,
-        $maxWidth: "100%",
-        children: /* @__PURE__ */ jsx7(
-          Flex,
+  return /* @__PURE__ */ jsxs4(
+    Flex,
+    {
+      $position: "relative",
+      $alignItems: "center",
+      $gap: "1rem",
+      $width: "100%",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx7(
+          Box,
           {
-            $position: "relative",
             $overflow: "hidden",
             $width: "100%",
             $height: `${8 / TEXT_BASE_SIZE}rem`,
@@ -14376,29 +14371,28 @@ var ProgressBar = ({
               {
                 $width: `${Math.min(progress, 100)}%`,
                 $height: "100%",
-                $backgroundColor: barColorMap[color],
-                $borderRadius: "9999px"
+                $backgroundColor: barColorMap[color]
               }
             )
           }
+        ),
+        total && /* @__PURE__ */ jsxs4(
+          Text,
+          {
+            $font: theme.typography.text.fontFamily,
+            $size: 14,
+            $weight: 500,
+            $color: theme.typography.text.color,
+            children: [
+              value,
+              "/",
+              total
+            ]
+          }
         )
-      }
-    ),
-    total !== 0 && /* @__PURE__ */ jsxs4(
-      Text,
-      {
-        $font: theme.typography.text.fontFamily,
-        $size: 14,
-        $weight: 500,
-        $color: theme.typography.text.color,
-        children: [
-          value,
-          "/",
-          total
-        ]
-      }
-    )
-  ] });
+      ]
+    }
+  );
 };
 
 // src/components/ui/text/styles.ts
@@ -14447,7 +14441,9 @@ import { useCallback as useCallback6, useLayoutEffect as useLayoutEffect3, useRe
 import { createPortal } from "react-dom";
 
 // src/components/ui/tooltip/styles.ts
-var Trigger = dt.div``;
+var Trigger = dt.div`
+  width: 100%;
+`;
 var coords = (position2) => {
   let x2 = 0;
   let y2 = 0;
@@ -14603,13 +14599,15 @@ var Tooltip = ({
     }
   }, [position2]);
   useLayoutEffect3(() => {
-    updateCoords();
     const handleResize = (0, import_debounce.default)(updateCoords, DEBOUNCE_TIMEOUT);
     window.addEventListener("resize", handleResize);
     return () => {
       window.removeEventListener("resize", handleResize);
     };
   }, [updateCoords]);
+  useLayoutEffect3(() => {
+    updateCoords();
+  }, [updateCoords, show]);
   return /* @__PURE__ */ jsxs5(Fragment2, { children: [
     /* @__PURE__ */ jsx8(
       Trigger,
@@ -16334,7 +16332,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
 };
 
 // node_modules/@stripe/stripe-js/dist/index.mjs
-var RELEASE_TRAIN = "acacia";
+var RELEASE_TRAIN = "basil";
 var runtimeVersionToUrlVersion = function runtimeVersionToUrlVersion2(version) {
   return version === 3 ? "v3" : version;
 };
@@ -16374,7 +16372,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "6.1.0",
+    version: "7.0.0",
     startTime
   });
 };
@@ -16449,7 +16447,7 @@ var initStripe = function initStripe2(maybeStripe, args, startTime) {
   var version = runtimeVersionToUrlVersion(maybeStripe.version);
   var expectedVersion = RELEASE_TRAIN;
   if (isTestKey && version !== expectedVersion) {
-    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("6.1.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
+    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("7.0.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
   }
   var stripe = maybeStripe.apply(void 0, args);
   registerWrapper(stripe, startTime);
@@ -18901,7 +18899,7 @@ Invoices.displayName = "Invoices";
 import { forwardRef as forwardRef10, useMemo as useMemo10, useRef as useRef8 } from "react";
 
 // src/components/elements/metered-features/styles.ts
-var Container4 = dt.div`
+var Container3 = dt.div`
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -18997,7 +18995,7 @@ var MeteredFeatures = forwardRef10(({ className, ...rest }, ref) => {
   if (!shouldShowFeatures) {
     return null;
   }
-  return /* @__PURE__ */ jsx31(Container4, { ref, className, children: featureUsage.map(
+  return /* @__PURE__ */ jsx31(Container3, { ref, className, children: featureUsage.map(
     ({
       feature,
       priceBehavior,
@@ -19022,8 +19020,7 @@ var MeteredFeatures = forwardRef10(({ className, ...rest }, ref) => {
           color: isOverage ? "blue" : progressColorMap[Math.floor(
             Math.min(usage, limit) / limit * (progressColorMap.length - 1)
           )],
-          ...isOverage && { bgColor: "#EF4444" },
-          $flexGrow: 1
+          ...isOverage && { bgColor: "#EF4444" }
         }
       );
       return /* @__PURE__ */ jsxs24(Flex, { $flexDirection: "column-reverse", children: [
@@ -19535,8 +19532,8 @@ var PaymentMethod = forwardRef11(({ children, className, portal, allowEdit = tru
   const props = resolveDesignProps5(rest);
   const { data, setLayout } = useEmbed();
   const paymentMethod = useMemo12(() => {
-    return data.subscription?.paymentMethod;
-  }, [data.subscription?.paymentMethod]);
+    return data.subscription?.paymentMethod || data.company?.defaultPaymentMethod;
+  }, [data.company?.defaultPaymentMethod, data.subscription?.paymentMethod]);
   const monthsToExpiration = useMemo12(() => {
     let expiration;
     if (typeof paymentMethod?.cardExpYear === "number" && typeof paymentMethod?.cardExpMonth === "number") {
@@ -19594,10 +19591,10 @@ var PaymentMethodDetails = ({
   const [showDifferentPaymentMethods, setShowDifferentPaymentMethods] = useState14(false);
   const [paymentMethod, setPaymentMethod] = useState14(void 0);
   useEffect7(() => {
-    if (data.subscription?.paymentMethod) {
-      setPaymentMethod(data.subscription.paymentMethod);
-    }
-  }, [data.subscription?.paymentMethod]);
+    setPaymentMethod(
+      data.subscription?.paymentMethod || data.company?.defaultPaymentMethod
+    );
+  }, [data.company?.defaultPaymentMethod, data.subscription?.paymentMethod]);
   const monthsToExpiration = useMemo13(() => {
     let expiration;
     if (typeof paymentMethod?.cardExpYear === "number" && typeof paymentMethod?.cardExpMonth === "number") {
@@ -19654,15 +19651,31 @@ var PaymentMethodDetails = ({
         if (setPaymentMethodId) {
           setPaymentMethodId(updatePaymentMethodResponse.data.externalId);
         }
-        if (data.subscription) {
-          setData({
-            ...data,
+        setData({
+          ...data,
+          // Optimistic update
+          // If there is subscription - we have set payment method to subscription
+          ...data.subscription ? {
             subscription: {
               ...data.subscription,
               paymentMethod: updatePaymentMethodResponse.data
             }
-          });
-        }
+          } : {},
+          ...data.company ? {
+            company: {
+              ...data.company,
+              paymentMethods: [
+                updatePaymentMethodResponse.data,
+                ...data.company?.paymentMethods || []
+              ],
+              // Optimistic update
+              // If there is no subscription - we have updated default payment method in company
+              ...data.subscription ? {} : {
+                defaultPaymentMethod: updatePaymentMethodResponse.data
+              }
+            }
+          } : {}
+        });
       } catch {
         setError(t2("Error updating payment method. Please try again."));
       } finally {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schematichq/schematic-components",
-  "version": "0.7.3",
+  "version": "0.7.5",
   "main": "dist/schematic-components.cjs.js",
   "module": "dist/schematic-components.esm.js",
   "types": "dist/schematic-components.d.ts",
@@ -30,14 +30,14 @@
     "tsc": "npx tsc"
   },
   "dependencies": {
-    "@stripe/stripe-js": "^6.1.0",
+    "@stripe/stripe-js": "^7.0.0",
     "classnames": "^2.5.1",
     "i18next": "^24.2.3",
     "lodash": "^4.17.21",
     "pako": "^2.1.0",
     "pluralize": "^8.0.0",
     "react-i18next": "^15.4.1",
-    "styled-components": "^6.1.16",
+    "styled-components": "^6.1.17",
     "uuid": "^11.1.0"
   },
   "devDependencies": {