@funnelsgrove/payments 0.1.20 → 0.1.22

package/dist/components/ManageSubscriptionScreen.js

@@ -231,11 +231,16 @@ function SubscriptionSection({ title, subscriptions, plans, onSelect, descriptio
                                             : resolveBillingDateLabel(subscription, { past }) }), _jsxs("span", { children: ["Created at: ", resolveCreatedDate(subscription)] })] })] }) }, subscription.id))) })] }));
 }
 const manageSubscriptionStyles = `
+.funnel-shell[data-preview-frame='true'] {
+  min-width: 0;
+}
+
 .manage-subscription {
   position: absolute;
   inset: 0;
   overflow-y: auto;
   box-sizing: border-box;
+  max-width: 100%;
   background: color-mix(in srgb, var(--color-primary, #4db53f) 8%, var(--color-surface, #fff) 92%);
   color: var(--color-text, #262729);
   font-family: var(--font-family-base, Inter, sans-serif);
@@ -243,6 +248,8 @@ const manageSubscriptionStyles = `
 
 .manage-subscription-inner {
   box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
   min-height: 100%;
   padding: 22px 12px 32px;
 }
@@ -266,6 +273,8 @@ const manageSubscriptionStyles = `
 }
 
 .manage-subscription-section {
+  min-width: 0;
+  max-width: 100%;
   margin-top: 22px;
 }
 
@@ -292,10 +301,14 @@ const manageSubscriptionStyles = `
   display: grid;
   gap: 8px;
   list-style: none;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .manage-subscription-row {
   width: 100%;
+  min-width: 0;
+  max-width: 100%;
   min-height: 118px;
   border: 0;
   border-left: 4px solid var(--color-primary, #4db53f);
@@ -333,6 +346,8 @@ const manageSubscriptionStyles = `
 
 .manage-subscription-row-heading {
   width: 100%;
+  min-width: 0;
+  max-width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -343,9 +358,11 @@ const manageSubscriptionStyles = `
   font-size: 15px;
   line-height: 1.25;
   font-weight: 800;
+  overflow-wrap: anywhere;
 }
 
 .manage-subscription-row-status {
+  flex-shrink: 0;
   border-radius: 999px;
   background: color-mix(in srgb, var(--color-warning, #f28100) 16%, var(--color-surface, #fff) 84%);
   color: var(--color-warning, #f28100);
@@ -360,10 +377,13 @@ const manageSubscriptionStyles = `
   font-size: 13px;
   line-height: 1.2;
   font-weight: 800;
+  overflow-wrap: anywhere;
 }
 
 .manage-subscription-row-meta {
   width: 100%;
+  min-width: 0;
+  max-width: 100%;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 8px;
@@ -373,23 +393,31 @@ const manageSubscriptionStyles = `
   line-height: 1.3;
 }
 
+.manage-subscription-row-meta span {
+  overflow-wrap: anywhere;
+}
+
 .manage-subscription-row-meta .is-active-until {
   color: var(--color-text, #262729);
   font-weight: 800;
 }
 
 .manage-subscription-support {
+  min-width: 0;
+  max-width: 100%;
   margin: 30px 0 0;
   color: var(--color-text, #262729);
   font-size: 15px;
   line-height: 1.35;
   text-align: center;
+  overflow-wrap: anywhere;
 }
 
 .manage-subscription-support a {
   color: var(--color-secondary, var(--color-primary, #4db53f));
   text-decoration: underline;
   text-underline-offset: 3px;
+  overflow-wrap: anywhere;
 }
 
 .manage-subscription-muted,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnelsgrove/payments",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "type": "module",
   "private": false,
   "main": "./dist/index.js",
@@ -26,7 +26,7 @@
     "test:run": "vitest run --passWithNoTests"
   },
   "dependencies": {
-    "@funnelsgrove/runtime": "0.1.5",
+    "@funnelsgrove/runtime": "0.1.6",
     "@stripe/react-stripe-js": "^5.6.0",
     "@stripe/stripe-js": "^8.7.0",
     "react": "19.2.3",