@funnelsgrove/cli 0.1.87 → 0.1.89

package/template_scaffold/src/steps/step-32-paywall.tsx

@@ -2,30 +2,25 @@
 
 import { useEffect, useMemo, useRef, useState } from 'react';
 import Image from 'next/image';
-import Link from 'next/link';
-import {
-  checkoutRuntimeConfig,
-  resolveClaimbeeCheckoutMode,
-} from '@/runtime/checkout-runtime-config';
+import { checkoutRuntimeConfig } from '@/runtime/checkout-runtime-config';
 import {
   billingDiscountStorageKeys,
   billingDiscountList,
-  claimbeePlansByMode,
+  starterPlansByMode,
+  starterBillingRuntimeFallback,
 } from '@/config/billing.plans';
 import { stepPaywallContent } from '@/steps/content/step-32-paywall.content';
-import { useClaimbeeStepContent } from '@/steps/use-claimbee-step-content';
 import {
   PaymentRuntimeBoundary,
   apiService,
   collectCurrentFunnelAttribution,
   readPaywallStateValue,
   runtimePublicConfig,
-  resolveGeneratedOfferSetRuntime,
   updatePaywallStateValue,
   useFunnel,
   useFunnelRuntimeConfig,
+  usePreviewStepLocalizedContent,
   useRuntimeMode,
-  type GeneratedOfferSet,
   type FunnelStepMeta,
 } from '@funnelsgrove/runtime';
 import { getPathForStep } from '@/runtime/funnel-runtime';
@@ -36,16 +31,14 @@ import {
   activateSecondPaywallDiscount,
   advancePaywallDiscountState,
   buildBillingDiscountCatalog,
-  buildConfigPaywallPlans,
   buildDiscountedPaywallPlans,
   buildPaywallRenewalDisclaimer,
   getDefaultPlanId,
   getPaywallPromoDisplayName,
   resolvePaywallDiscountState,
+  resolvePublishedBillingRuntime,
   serializePaywallDiscountState,
   useStripeSubscriptionCheckoutSession,
-  type BillingFallbackPlanConfig,
-  type BillingPlanCatalog,
   type PaywallDiscountState,
   type PlatformWalletPaymentMethod,
   type StripeSubscriptionWalletSurfaceAvailability,
@@ -53,6 +46,7 @@ import {
 } from '@funnelsgrove/payments';
 import { stepSubscriptionStartedId } from '@/steps/step-33-subscription-started';
 import { funnelManifest } from '@/config/funnel.manifest';
+import { getStepContentLocale } from '@/runtime/step-content-context';
 
 export const stepPaywallId = 'paywall';
 
@@ -63,7 +57,7 @@ export const stepPaywall = {
   kind: 'paywall',
   figmaNodeId: '6992-6210',
   title: 'Paywall',
-  description: 'ClaimBee paywall rebuilt from Figma node 6992:6210 with a local three-plan catalog and FAQ accordion.',
+  description: 'Starter paywall with a local three-plan catalog and FAQ accordion.',
   actionBar: {
     hidden: true,
   },
@@ -89,25 +83,8 @@ const paywallWalletMethodWrapperClassNames: Record<PlatformWalletPaymentMethod,
   googlePay: 'paywall-v2-google-pay-shell',
 };
 
-const claimbeeStoryBackgroundColors = ['var(--color-secondary-text)', 'var(--color-primary)', 'var(--color-secondary)'] as const;
-const paywallFeatureTileColorClassNames = [
-  'paywall-v2-feature-title--orange',
-  'paywall-v2-feature-title--orange',
-  'paywall-v2-feature-title--green',
-  'paywall-v2-feature-title--green',
-] as const;
-const paywallDetailImageDimensions = {
-  tracking: {
-    width: 172,
-    height: 70,
-  },
-  alerts: {
-    width: 127,
-    height: 108,
-  },
-} as const;
-const defaultSelectedPlan = 'secondary';
-export const CLAIMBEE_PAYWALL_DISCOUNT_STORAGE_KEYS = billingDiscountStorageKeys;
+const storyBackgroundColors = ['var(--color-secondary-text)', 'var(--color-primary)', 'var(--color-secondary)'] as const;
+export const PAYWALL_DISCOUNT_STORAGE_KEYS = billingDiscountStorageKeys;
 const deferPaywallStateSync = (syncState: () => void): (() => void) => {
   const timeoutId = window.setTimeout(syncState, 0);
   return () => window.clearTimeout(timeoutId);
@@ -141,55 +118,41 @@ function StepPaywallRuntime({
   analyticsStepName = stepPaywall.name || stepPaywall.title,
 }: StepPaywallProps = {}) {
   const [runtimeMode] = useRuntimeMode();
-  const checkoutMode = useMemo(
-    () => resolveClaimbeeCheckoutMode(runtimeMode),
-    [runtimeMode],
-  );
+  const checkoutMode = runtimeMode;
   const { user, setUser, attributes, featureFlags, completeStep } = useFunnel();
   const publishedRuntime = useFunnelRuntimeConfig();
-  const content = useClaimbeeStepContent(stepPaywallId, stepPaywallContent);
+  const content = usePreviewStepLocalizedContent(
+    stepPaywallId,
+    stepPaywallContent,
+    getStepContentLocale(attributes),
+  );
   const supportEmail = runtimePublicConfig.supportEmail;
-  const publishedOfferSetRuntime = useMemo(
-    () => publishedRuntime.config && publishedRuntime.config.offerSets.length > 0
-      ? resolveGeneratedOfferSetRuntime<BillingFallbackPlanConfig>({
-          offerSets: publishedRuntime.config.offerSets as readonly GeneratedOfferSet[],
-          baseCatalogsByMode: claimbeePlansByMode,
-          fallbackDiscounts: billingDiscountList,
-        })
-      : null,
-    [publishedRuntime.config],
+  const paywallPreviewAsset = funnelManifest.assets.paywallPreview;
+  const activeBillingRuntime = useMemo(
+    () => resolvePublishedBillingRuntime({
+      config: publishedRuntime.config?.offerSets.length
+        ? publishedRuntime.config
+        : starterBillingRuntimeFallback,
+      featureFlags,
+      mode: checkoutMode,
+      search: typeof window === 'undefined' ? '' : window.location.search,
+      baseCatalogsByMode: starterPlansByMode,
+      fallbackDiscounts: billingDiscountList,
+    }),
+    [checkoutMode, featureFlags, publishedRuntime.config],
   );
   const activeBillingDiscounts = useMemo(
-    () => buildBillingDiscountCatalog(
-      publishedOfferSetRuntime?.getDiscountList(checkoutMode) ?? billingDiscountList,
-    ),
-    [checkoutMode, publishedOfferSetRuntime],
-  );
-  const activePlanCatalog = useMemo<BillingPlanCatalog>(
-    () => publishedOfferSetRuntime?.getPlanCatalog(checkoutMode) as BillingPlanCatalog
-      || (checkoutMode === 'test' ? claimbeePlansByMode.test : claimbeePlansByMode.live),
-    [checkoutMode, publishedOfferSetRuntime],
-  );
-  const activePlanKeys = useMemo(
-    () => publishedOfferSetRuntime?.planKeys.length
-      ? publishedOfferSetRuntime.planKeys
-      : ['primary', 'secondary', 'tertiary'],
-    [publishedOfferSetRuntime],
-  );
-  const availablePlans = useMemo(
-    () => buildConfigPaywallPlans(
-      activePlanCatalog,
-      activePlanKeys,
-    ),
-    [activePlanCatalog, activePlanKeys],
+    () => activeBillingRuntime.discounts ?? buildBillingDiscountCatalog(billingDiscountList),
+    [activeBillingRuntime.discounts],
   );
+  const availablePlans = activeBillingRuntime.plans;
   const initialPlanId = useMemo(
     () =>
-      availablePlans.find((plan) => plan.id === defaultSelectedPlan)?.id ??
+      availablePlans.find((plan) => plan.id === activeBillingRuntime.defaultPlanKey)?.id ??
       getDefaultPlanId(availablePlans) ??
       availablePlans[0]?.id ??
       null,
-    [availablePlans],
+    [activeBillingRuntime.defaultPlanKey, availablePlans],
   );
   const [selectedPlanId, setSelectedPlanId] = useState<string | null>(
     initialPlanId,
@@ -259,7 +222,7 @@ function StepPaywallRuntime({
         quote: item.quote,
         author: item.author,
         backgroundColor:
-          claimbeeStoryBackgroundColors[index % claimbeeStoryBackgroundColors.length],
+          storyBackgroundColors[index % storyBackgroundColors.length],
       })),
     [content.stories.items],
   );
@@ -293,7 +256,7 @@ function StepPaywallRuntime({
     return buildPaywallRenewalDisclaimer({
       plan: selectedPlan,
       hasActiveDiscount: Boolean(activeCouponId),
-      productName: 'ClaimBee',
+      productName: 'the app',
     });
   }, [activeCouponId, selectedPlan]);
   const appliedDiscountAmountCents = useMemo(() => {
@@ -430,7 +393,7 @@ function StepPaywallRuntime({
           discounts: activeBillingDiscounts,
           nowMs: Date.now(),
           storedValue: readPaywallStateValue({
-            legacyKeys: CLAIMBEE_PAYWALL_DISCOUNT_STORAGE_KEYS,
+            legacyKeys: PAYWALL_DISCOUNT_STORAGE_KEYS,
           }),
         }),
       );
@@ -487,7 +450,7 @@ function StepPaywallRuntime({
     updatePaywallStateValue(
       () => serializedDiscountSnapshot,
       {
-        legacyKeys: CLAIMBEE_PAYWALL_DISCOUNT_STORAGE_KEYS,
+        legacyKeys: PAYWALL_DISCOUNT_STORAGE_KEYS,
       },
     );
   }, [discountStateReady, serializedDiscountSnapshot]);
@@ -767,14 +730,16 @@ function StepPaywallRuntime({
           ))}
         </section>
 
-        <Image
-          src={content.hero.image.src}
-          alt={content.hero.image.alt || ''}
-          width={390}
-          height={288}
-          className='paywall-v2-hero'
-          priority
-        />
+        <div className='paywall-v2-hero'>
+          <Image
+            src={paywallPreviewAsset.src}
+            alt=''
+            width={paywallPreviewAsset.width}
+            height={paywallPreviewAsset.height}
+            className='paywall-v2-hero-image'
+            aria-hidden='true'
+          />
+        </div>
 
         {activeCouponId ? (
           <section
@@ -941,31 +906,11 @@ function StepPaywallRuntime({
             </p>
           </div>
 
-          <article className='paywall-v2-feature-card paywall-v2-feature-card--large'>
-            <Image
-              src={content.featureGrid.assistant.image?.src || '/paywall/ai-claim-assistant.png'}
-              alt={content.featureGrid.assistant.image?.alt || ''}
-              width={289}
-              height={105}
-              className='paywall-v2-feature-hero-image'
-            />
-            <div className='paywall-v2-feature-copy'>
-              <p className='paywall-v2-feature-name'>{content.featureGrid.assistant.title}</p>
-              <p className='paywall-v2-feature-description'>
-                {content.featureGrid.assistant.description}
-              </p>
-            </div>
-          </article>
-
-          <div className='paywall-v2-feature-row'>
-            {content.featureGrid.quickFeatures.slice(0, 2).map((feature, index) => (
+          <div className='paywall-v2-feature-row paywall-v2-feature-row--light'>
+            {[content.featureGrid.assistant, ...content.featureGrid.quickFeatures].map((feature) => (
               <article key={feature.id} className='paywall-v2-feature-card paywall-v2-feature-card--small'>
-                <p
-                  className={[
-                    'paywall-v2-feature-tile-title',
-                    paywallFeatureTileColorClassNames[index],
-                  ].join(' ')}
-                >
+                <span className='paywall-v2-feature-check' aria-hidden='true'>✓</span>
+                <p className='paywall-v2-feature-tile-title'>
                   {(feature.title || '').split('\n').map((line) => (
                     <span key={line}>{line}</span>
                   ))}
@@ -973,84 +918,13 @@ function StepPaywallRuntime({
               </article>
             ))}
           </div>
-
-          <article className='paywall-v2-feature-card paywall-v2-feature-card--mid'>
-            <Image
-              src={content.featureGrid.history.image?.src || '/paywall/claim-history.png'}
-              alt={content.featureGrid.history.image?.alt || ''}
-              width={160}
-              height={129}
-              className='paywall-v2-feature-mid-image'
-            />
-            <p className='paywall-v2-feature-mid-title'>
-              {(content.featureGrid.history.title || '').split('\n').map((line) => (
-                <span key={line}>
-                  {line}
-                  <br />
-                </span>
-              ))}
-            </p>
-          </article>
-
-          <div className='paywall-v2-feature-row'>
-            {content.featureGrid.quickFeatures.slice(2).map((feature, index) => (
-              <article key={feature.id} className='paywall-v2-feature-card paywall-v2-feature-card--small'>
-                <p
-                  className={[
-                    'paywall-v2-feature-tile-title',
-                    paywallFeatureTileColorClassNames[index + 2],
-                  ].join(' ')}
-                >
-                  {(feature.title || '').split('\n').map((line) => (
-                    <span key={line}>{line}</span>
-                  ))}
-                </p>
-              </article>
-            ))}
-          </div>
-
-          <div className='paywall-v2-feature-row paywall-v2-feature-row--tall'>
-            {content.featureGrid.detailedFeatures.map((feature) => {
-              const imageDimensions =
-                paywallDetailImageDimensions[
-                  feature.id as keyof typeof paywallDetailImageDimensions
-                ] || {
-                  width: 160,
-                  height: 90,
-                };
-
-              return (
-                <article key={feature.id} className='paywall-v2-feature-card paywall-v2-feature-card--tall'>
-                  <Image
-                    src={feature.image?.src || ''}
-                    alt={feature.image?.alt || ''}
-                    width={imageDimensions.width}
-                    height={imageDimensions.height}
-                    className='paywall-v2-feature-detail-image'
-                  />
-                  <div className='paywall-v2-feature-detail-copy'>
-                    <p className='paywall-v2-feature-detail-title'>
-                      {(feature.title || '').split('\n').map((line) => (
-                        <span key={line}>{line}</span>
-                      ))}
-                    </p>
-                    <p className='paywall-v2-feature-detail-description'>
-                      {(feature.description || '').split('\n').map((line) => (
-                        <span key={line}>{line}</span>
-                      ))}
-                    </p>
-                  </div>
-                </article>
-              );
-            })}
-          </div>
         </section>
 
         <section className='paywall-v2-feedback' aria-live='polite'>
           <h3 className='paywall-v2-feedback-title'>{content.stories.title}</h3>
           <article
             className='paywall-v2-feedback-card'
-            style={{ backgroundColor: activeStory?.backgroundColor || claimbeeStoryBackgroundColors[0] }}
+            style={{ backgroundColor: activeStory?.backgroundColor || storyBackgroundColors[0] }}
           >
             <p className='paywall-v2-feedback-quote'>{activeStory?.quote}</p>
             <p className='paywall-v2-feedback-author'>- {activeStory?.author}</p>
@@ -1090,20 +964,14 @@ function StepPaywallRuntime({
         </section>
 
         <section className='paywall-v2-guarantee-card'>
-          <Image
-            src={content.guarantee.image.src}
-            alt={content.guarantee.image.alt || ''}
-            width={184}
-            height={184}
-            className='paywall-v2-badge'
-          />
+          <div className='paywall-v2-badge' aria-hidden='true'>30</div>
           <div className='paywall-v2-guarantee-copy'>
             <p className='paywall-v2-guarantee-title'>{content.guarantee.title}</p>
             <p className='paywall-v2-guarantee-text'>
               {content.guarantee.description}{' '}
-              <Link href={content.guarantee.links[0]?.href || '/refund-policy'}>
+              <a href={content.guarantee.links[0]?.href || '/refund-policy'}>
                 {content.guarantee.links[0]?.label || 'refund policy'}
-              </Link>{' '}
+              </a>{' '}
               for details and limitations.
             </p>
           </div>
@@ -1291,10 +1159,21 @@ const stepPaywallStyles = `
 }
 
 .paywall-v2-hero {
-  display: block;
+  position: relative;
+  display: grid;
+  place-items: center;
   width: min(100%, 390px);
-  height: auto;
-  margin: -12px auto 0;
+  height: 230px;
+  margin: 20px auto 8px;
+  overflow: hidden;
+  border-radius: 32px;
+  background: linear-gradient(145deg, #d8edff, #f7fbff);
+}
+
+.paywall-v2-hero-image {
+  width: 160px;
+  height: 120px;
+  object-fit: contain;
 }
 
 .paywall-v2-promo-banner {
@@ -2016,10 +1895,15 @@ const stepPaywallStyles = `
 }
 
 .paywall-v2-badge {
-  width: 184px;
-  height: 184px;
-  object-fit: cover;
-  object-position: center 54%;
+  display: grid;
+  width: 104px;
+  height: 104px;
+  place-items: center;
+  border: 8px double var(--color-primary);
+  border-radius: 999px;
+  color: var(--color-primary);
+  font-size: 34px;
+  font-weight: 800;
 }
 
 .paywall-v2-guarantee-copy {
@@ -2093,37 +1977,6 @@ const stepPaywallStyles = `
   gap: 16px;
 }
 
-.paywall-v2-feature-hero-image {
-  width: 289px;
-  height: 105px;
-  object-fit: contain;
-  flex-shrink: 0;
-}
-
-.paywall-v2-feature-copy {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  text-align: center;
-}
-
-.paywall-v2-feature-name {
-  margin: 0;
-  color: var(--color-secondary-text);
-  font-size: 18px;
-  font-weight: 600;
-  line-height: 1.25;
-}
-
-.paywall-v2-feature-description {
-  margin: 0;
-  color: #6074e2;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1.25;
-}
-
 .paywall-v2-feature-row {
   margin-top: 24px;
   display: grid;
@@ -2134,100 +1987,41 @@ const stepPaywallStyles = `
 .paywall-v2-feature-card--small {
   min-height: 122px;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
+  gap: 10px;
   padding: 10px;
 }
 
-.paywall-v2-feature-tile-title,
-.paywall-v2-feature-detail-title,
-.paywall-v2-feature-detail-description {
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.paywall-v2-feature-tile-title {
-  font-size: 18px;
-  font-weight: 600;
-  line-height: 1.25;
-  text-align: center;
-}
-
-.paywall-v2-feature-title--orange {
-  color: var(--color-secondary);
+.paywall-v2-feature-row--light {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
-.paywall-v2-feature-title--green {
+.paywall-v2-feature-check {
+  display: grid;
+  width: 32px;
+  height: 32px;
+  place-items: center;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--color-primary) 14%, white);
   color: var(--color-primary);
+  font-weight: 800;
 }
 
-.paywall-v2-feature-card--mid {
-  margin-top: 24px;
-  min-height: 196px;
-  padding: 5px 16px 16px;
+.paywall-v2-feature-tile-title {
+  margin: 0;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: 12px;
 }
 
-.paywall-v2-feature-mid-image {
-  width: 160px;
-  height: 129px;
-  object-fit: contain;
-  flex-shrink: 0;
-}
-
-.paywall-v2-feature-mid-title {
-  margin: 0;
-  color: var(--color-secondary-text);
+.paywall-v2-feature-tile-title {
   font-size: 18px;
   font-weight: 600;
   line-height: 1.25;
   text-align: center;
 }
 
-.paywall-v2-feature-row--tall {
-  align-items: stretch;
-}
-
-.paywall-v2-feature-card--tall {
-  min-height: 255px;
-  padding: 16px 12px 24px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 14px;
-}
-
-.paywall-v2-feature-detail-image {
-  height: auto;
-  object-fit: contain;
-  flex-shrink: 0;
-}
-
-.paywall-v2-feature-detail-copy {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  text-align: center;
-}
-
-.paywall-v2-feature-detail-title {
-  color: var(--color-secondary-text);
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 1.25;
-}
-
-.paywall-v2-feature-detail-description {
-  color: #6074e2;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 1.25;
-}
-
 @media (max-width: 429px) {
   .paywall-v2-step {
     padding: 0 16px 48px;

package/template_scaffold/src/steps/step-33-subscription-started.tsx

@@ -23,7 +23,7 @@ export const stepSubscriptionStarted: FunnelStepMeta = {
   kind: 'subscription-handoff',
   figmaNodeId: 'final-step-deep-link',
   title: 'Subscription Started',
-  description: 'Post-checkout app handoff and deep-link step.',
+  description: 'Post-checkout and returning-subscriber app handoff step.',
   actionBar: {
     hidden: true,
   },

package/template_scaffold/src/steps/step-content.registry.ts

@@ -1,23 +1,8 @@
-import type { FunnelChoiceOption } from '@funnelsgrove/runtime';
-import { stepTwoOptions } from './content/step-02.content';
-
 export const stepContentRegistry = {
   'step-1': {
     contentPath: 'src/steps/content/step-01.content.ts',
     editorPath: 'src/steps/editor/step-01.editor.ts',
   },
-  'step-2': {
-    contentPath: 'src/steps/content/step-02.content.ts',
-    editorPath: 'src/steps/editor/step-02.editor.ts',
-  },
-  'step-3': {
-    contentPath: 'src/steps/content/step-03.content.ts',
-    editorPath: 'src/steps/editor/step-03.editor.ts',
-  },
-  'step-4': {
-    contentPath: 'src/steps/content/step-04.content.ts',
-    editorPath: 'src/steps/editor/step-04.editor.ts',
-  },
   'email-capture': {
     contentPath: 'src/steps/content/email-capture.content.ts',
     editorPath: 'src/steps/editor/email-capture.editor.ts',
@@ -26,20 +11,10 @@ export const stepContentRegistry = {
     contentPath: 'src/steps/content/step-32-paywall.content.ts',
     editorPath: 'src/steps/editor/step-32-paywall.editor.ts',
   },
-  'paywall-b': {
-    contentPath: 'src/steps/content/step-32-paywall.content.ts',
-    editorPath: 'src/steps/editor/step-32-paywall.editor.ts',
-  },
-  'manage-subscription': {
-    contentPath: 'src/steps/content/manage-subscription.content.ts',
-    editorPath: 'src/steps/editor/manage-subscription.editor.ts',
-  },
   'subscription-started': {
     contentPath: 'src/steps/content/subscription-started.content.ts',
     editorPath: 'src/steps/editor/subscription-started.editor.ts',
   },
 } as const;
 
-export const contentOptionsByStepId = {
-  'step-2': stepTwoOptions,
-} as const satisfies Record<string, readonly FunnelChoiceOption[]>;
+export const contentOptionsByStepId = {} as const;

package/template_scaffold/public/claimbee/glow.svg

@@ -1,3 +0,0 @@
-<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 116 109.5" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path id="Vector 11" d="M0 22.5L51 0H85L116 22.5V54.5V89L74.5 109.5L42 103L9 89L0 61.5V22.5Z" fill="var(--fill-0, #FEFDF5)"/>
-</svg>

package/template_scaffold/public/claimbee/testimonial-star.svg

@@ -1,3 +0,0 @@
-<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 16.1222 15.4039" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path id="Star 1" d="M7.37895 0.495601C7.59366 -0.165201 8.52852 -0.1652 8.74323 0.495602L10.1545 4.83902C10.2505 5.13454 10.5259 5.33462 10.8366 5.33462H15.4036C16.0984 5.33462 16.3873 6.22372 15.8251 6.63212L12.1304 9.3165C11.879 9.49914 11.7738 9.82288 11.8699 10.1184L13.2811 14.4618C13.4958 15.1226 12.7395 15.6721 12.1774 15.2637L8.48267 12.5793C8.23129 12.3967 7.89089 12.3967 7.63951 12.5793L3.94477 15.2637C3.38266 15.6721 2.62635 15.1226 2.84105 14.4618L4.25232 10.1184C4.34834 9.82288 4.24315 9.49914 3.99176 9.3165L0.297032 6.63212C-0.26508 6.22372 0.0238078 5.33462 0.718616 5.33462H5.28555C5.59628 5.33462 5.87167 5.13454 5.96769 4.83902L7.37895 0.495601Z" fill="var(--fill-0, #F28100)"/>
-</svg>