@deframe-sdk/components 0.1.35 → 0.1.36

package/dist/index.mjs

@@ -9014,16 +9014,12 @@ var StrategyGridCard = ({
     ]
   }
 );
-var strategyCardClasses = [
-  "w-full",
+var cardClasses = [
+  "w-full flex flex-col gap-[var(--deframe-widget-size-gap-sm)]",
+  "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
   "bg-[var(--deframe-widget-color-bg-secondary)]",
   "border border-[color:var(--deframe-widget-color-border-secondary)]",
-  "rounded-[var(--deframe-widget-size-radius-md)]",
-  "p-[var(--deframe-widget-size-padding-x-md)]",
-  "flex flex-row items-center justify-between",
-  "gap-[var(--deframe-widget-size-gap-md)]",
-  "hover:border-[color:var(--deframe-widget-color-border-primary)]",
-  "transition-colors"
+  "rounded-[var(--deframe-widget-size-radius-md)]"
 ].join(" ");
 var StrategyGridCardSimple = ({
   logoUrl,
@@ -9037,41 +9033,49 @@ var StrategyGridCardSimple = ({
   var _a, _b, _c, _d, _e;
   const investLabel = (_a = labels == null ? void 0 : labels.investLabel) != null ? _a : "Depositar";
   const riskBadgeMap = {
-    low: /* @__PURE__ */ jsx(LowRiskBadge, { label: (_b = labels == null ? void 0 : labels.riskLow) != null ? _b : "Risco Baixo" }),
-    medium: /* @__PURE__ */ jsx(MediumRiskBadge, { label: (_c = labels == null ? void 0 : labels.riskMedium) != null ? _c : "Risco M\xE9dio" }),
-    high: /* @__PURE__ */ jsx(HighRiskBadge, { label: (_d = labels == null ? void 0 : labels.riskHigh) != null ? _d : "Risco Alto" })
+    low: /* @__PURE__ */ jsx(LowRiskBadge, { label: (_b = labels == null ? void 0 : labels.riskLow) != null ? _b : "Baixo" }),
+    medium: /* @__PURE__ */ jsx(MediumRiskBadge, { label: (_c = labels == null ? void 0 : labels.riskMedium) != null ? _c : "M\xE9dio" }),
+    high: /* @__PURE__ */ jsx(HighRiskBadge, { label: (_d = labels == null ? void 0 : labels.riskHigh) != null ? _d : "Alto" })
   };
   return /* @__PURE__ */ jsxs(
     "article",
     {
       "data-slot": "strategy-grid-card-simple",
       "data-test-id": "strategy-grid-card-simple",
-      className: strategyCardClasses,
+      className: cardClasses,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] min-w-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "w-full flex items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
           /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-full bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center overflow-hidden shrink-0", children: /* @__PURE__ */ jsx("img", { alt: title, src: logoUrl, referrerPolicy: "no-referrer", className: "w-full h-full object-contain" }) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] leading-[var(--deframe-widget-font-leading-sm)] font-[var(--deframe-widget-font-family)] truncate", children: title }),
-            /* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-xs)] text-[color:var(--deframe-widget-color-text-secondary)] leading-[var(--deframe-widget-font-leading-xs)]", children: chainName })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-xs)] [font-weight:var(--deframe-widget-font-weight-medium)] uppercase tracking-[0.08em] text-[color:var(--deframe-widget-color-text-tertiary)]", children: (_e = labels == null ? void 0 : labels.apyLabel) != null ? _e : "Rendimento" }),
-          /* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-lg)] [font-weight:var(--deframe-widget-font-weight-bold)] text-[color:var(--deframe-widget-color-brand-primary)] font-[var(--deframe-widget-font-family)] leading-none mt-[2px]", children: apyFormatted })
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-[14px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] leading-[1.3] font-[var(--deframe-widget-font-family)] truncate", children: title }),
+            /* @__PURE__ */ jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)] leading-[1.4]", children: chainName })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: riskBadgeMap[riskLevel] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] flex-shrink-0", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 whitespace-nowrap", children: riskBadgeMap[riskLevel] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-[var(--deframe-widget-size-gap-sm)]", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] uppercase tracking-[0.08em] text-[color:var(--deframe-widget-color-text-tertiary)]", children: (_e = labels == null ? void 0 : labels.apyLabel) != null ? _e : "Rendimento" }),
           /* @__PURE__ */ jsx(
-            PrimaryButton,
+            "span",
             {
-              "data-test-id": "strategy-grid-card-simple-invest",
-              "aria-label": `${investLabel} ${title}`,
-              onClick: onInvestClick,
-              className: "h-9 text-[13px] px-[var(--deframe-widget-size-padding-x-md)]",
-              children: investLabel
+              className: twMerge(
+                "text-[22px] [font-weight:var(--deframe-widget-font-weight-bold)]",
+                "text-[color:var(--deframe-widget-color-brand-primary)]",
+                "font-[var(--deframe-widget-font-family)] leading-[1.1]"
+              ),
+              children: apyFormatted
             }
           )
-        ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          PrimaryButton,
+          {
+            "data-test-id": "strategy-grid-card-simple-invest",
+            "aria-label": `${investLabel} ${title}`,
+            onClick: onInvestClick,
+            className: "h-9 text-[13px] w-full",
+            children: investLabel
+          }
+        )
       ]
     }
   );
@@ -11121,7 +11125,7 @@ var EarnAmountInputSimpleView = ({
           {
             "data-slot": "amount-input-simple-conversion",
             "data-test-id": "earn-amount-input-simple-view-conversion",
-            className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
+            className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)] overflow-hidden text-ellipsis whitespace-nowrap max-w-full",
             children: dollarAmountFormatted
           }
         )
@@ -11275,7 +11279,7 @@ var EarnInlineNotificationSimpleView = ({
 };
 var EarnDepositFormViewSimple = ({
   // Header / Layout
-  headerTitle,
+  pageTitle,
   onBack,
   onSubmit,
   // Token selector
@@ -11383,7 +11387,7 @@ var EarnDepositFormViewSimple = ({
                 "data-slot": "deposit-panel-simple-title",
                 "data-test-id": "earn-deposit-form-view-simple-title",
                 className: titleBaseClasses,
-                children: headerTitle
+                children: pageTitle
               }
             )
           }
@@ -11738,7 +11742,7 @@ var EarnWithdrawFormView = ({
 ] });
 var EarnWithdrawFormViewSimple = ({
   // Header / Layout
-  headerTitle,
+  pageTitle,
   onBack,
   onSubmit,
   // Position card (used for inline balance row)
@@ -11841,7 +11845,7 @@ var EarnWithdrawFormViewSimple = ({
                 "data-slot": "withdraw-panel-simple-title",
                 "data-test-id": "earn-withdraw-form-view-simple-title",
                 className: titleBaseClasses,
-                children: headerTitle
+                children: pageTitle
               }
             )
           }
@@ -15596,7 +15600,7 @@ var OnrampFormSimpleView = ({
     "px-[var(--deframe-widget-size-padding-x-md)]",
     "pb-[var(--deframe-widget-size-padding-y-md)]"
   ].join(" ");
-  const cardClasses2 = twMerge(
+  const cardClasses3 = twMerge(
     "rounded-[var(--deframe-widget-size-radius-sm)]",
     "border border-[color:var(--deframe-widget-color-border-secondary)]",
     "bg-[var(--deframe-widget-color-bg-secondary)]",
@@ -15694,7 +15698,7 @@ var OnrampFormSimpleView = ({
                       {
                         "data-slot": "onramp-form-simple-amount-card",
                         "data-test-id": "onramp-form-simple-view-amount-card",
-                        className: cardClasses2,
+                        className: cardClasses3,
                         children: /* @__PURE__ */ jsxs(
                           "div",
                           {
@@ -15753,7 +15757,7 @@ var OnrampFormSimpleView = ({
                       "div",
                       {
                         "data-test-id": "onramp-form-simple-view-skeleton",
-                        className: twMerge(cardClasses2, "space-y-3"),
+                        className: twMerge(cardClasses3, "space-y-3"),
                         children: [
                           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
                             /* @__PURE__ */ jsx(Skeleton, { width: 96, height: 16, shimmer: true }),
@@ -17536,7 +17540,7 @@ var DashboardPortfolioView = ({
     ) })
   ] }) });
 };
-var cardClasses = twMerge(
+var cardClasses2 = twMerge(
   "w-full self-start flex flex-col gap-[var(--deframe-widget-size-gap-sm)]",
   "bg-[var(--deframe-widget-color-bg-secondary)] border border-[color:var(--deframe-widget-color-border-secondary)]",
   "rounded-[var(--deframe-widget-size-radius-md)]",
@@ -17558,7 +17562,7 @@ function StatCardSkeletonBlock({ showDescription, className }) {
     {
       "data-test-id": "stat-card-skeleton",
       "aria-busy": "true",
-      className: twMerge(cardClasses, "self-stretch", className),
+      className: twMerge(cardClasses2, "self-stretch", className),
       children: [
         /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: 140, height: 11 }),
         /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: "60%", height: 44 }),
@@ -17594,7 +17598,7 @@ var DashboardPortfolioViewSimple = ({
         assetCount != null ? "grid-cols-[1fr_auto]" : "grid-cols-1"
       ),
       children: [
-        /* @__PURE__ */ jsxs("article", { className: twMerge(cardClasses, "self-stretch"), children: [
+        /* @__PURE__ */ jsxs("article", { className: twMerge(cardClasses2, "self-stretch"), children: [
           /* @__PURE__ */ jsx("p", { "data-test-id": "stat-card-label", className: labelClasses, children: "Total da Carteira (USD)" }),
           /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
             motion.p,
@@ -17611,7 +17615,7 @@ var DashboardPortfolioViewSimple = ({
           ) }),
           /* @__PURE__ */ jsx("p", { "data-test-id": "stat-card-description", className: descriptionClasses, children: "Soma do saldo por token (em USD)." })
         ] }),
-        assetCount != null && /* @__PURE__ */ jsxs("article", { className: twMerge(cardClasses, "self-stretch min-w-[160px]"), children: [
+        assetCount != null && /* @__PURE__ */ jsxs("article", { className: twMerge(cardClasses2, "self-stretch min-w-[160px]"), children: [
           /* @__PURE__ */ jsx("p", { "data-test-id": "stat-card-label", className: labelClasses, children: "Ativos" }),
           /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
             motion.p,