@deframe-sdk/components 0.1.57 → 0.1.58

package/dist/index.mjs

@@ -6048,7 +6048,7 @@ var SwapToCardView = ({
   ] }) });
 };
 var baseClasses = [
-  "inline-flex items-center justify-center",
+  "flex-1 inline-flex items-center justify-center",
   "py-[3px] px-[10px]",
   "rounded-[var(--deframe-widget-size-radius-full)]",
   "cursor-pointer text-[12px] transition-all duration-150 outline-none",
@@ -6073,7 +6073,7 @@ var stateClasses = {
 };
 function SlippageChip({
   options = [],
-  selected = null,
+  selected = void 0,
   onSelect,
   formatLabel,
   className
@@ -6083,7 +6083,7 @@ function SlippageChip({
     {
       "data-test-id": "slippage-chips",
       "data-slot": "slippage-chips",
-      className: twMerge("flex gap-[6px] items-center", className),
+      className: twMerge("flex w-full gap-sm", className),
       children: options.map((bps) => /* @__PURE__ */ jsx(
         "button",
         {
@@ -6094,7 +6094,7 @@ function SlippageChip({
           className: twMerge(baseClasses, stateClasses[bps === selected ? "active" : "default"]),
           children: formatLabel(bps)
         },
-        bps
+        String(bps)
       ))
     }
   );
@@ -6107,6 +6107,7 @@ var SwapAdvancedSettingsView = ({
   onSlippageSelect,
   formatPercentage,
   slippageOptions,
+  slippageLabel,
   percentageOptions,
   onPercentageClick,
   slippageFormatted,
@@ -6124,15 +6125,6 @@ var SwapAdvancedSettingsView = ({
       collapseText,
       expandText,
       children: /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col gap-sm", children: [
-        /* @__PURE__ */ jsx(
-          SlippageChip,
-          {
-            options: slippageOptions,
-            selected: slippageBps,
-            onSelect: onSlippageSelect,
-            formatLabel: formatPercentage
-          }
-        ),
         /* @__PURE__ */ jsx("div", { className: "flex w-full gap-sm", children: percentageOptions.map((pct, index) => {
           const isMax = index === percentageOptions.length - 1;
           const label = isMax ? maxLabel : `${pct / 100}%`;
@@ -6145,7 +6137,19 @@ var SwapAdvancedSettingsView = ({
             },
             pct
           );
-        }) })
+        }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-xs w-full", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] text-[color:var(--deframe-widget-color-text-secondary)] font-[var(--deframe-widget-font-family)]", children: slippageLabel }),
+          /* @__PURE__ */ jsx(
+            SlippageChip,
+            {
+              options: slippageOptions,
+              selected: slippageBps,
+              onSelect: onSlippageSelect,
+              formatLabel: formatPercentage
+            }
+          )
+        ] })
       ] })
     }
   ) }) });
@@ -7748,13 +7752,13 @@ function SlippageDetailRow({ label, options, selected, onSelect: handleSelect, f
     "div",
     {
       "data-test-id": "swap-form-simple-slippage-row",
-      className: "flex justify-between items-center py-[10px] gap-[var(--deframe-widget-size-gap-sm)]",
+      className: "flex flex-col py-[10px] gap-[var(--deframe-widget-size-gap-sm)]",
       children: [
         /* @__PURE__ */ jsx(
           "span",
           {
             "data-test-id": "swap-form-simple-detail-row-label",
-            className: "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] uppercase tracking-[0.07em] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)] flex-shrink-0",
+            className: "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] uppercase tracking-[0.07em] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
             children: label
           }
         ),
@@ -7765,7 +7769,7 @@ function SlippageDetailRow({ label, options, selected, onSelect: handleSelect, f
             selected,
             onSelect: handleSelect,
             formatLabel,
-            className: "gap-[4px] [&_button]:py-[2px] [&_button]:px-[7px] [&_button]:text-[11px]"
+            className: "w-full gap-[4px] [&_button]:py-[2px] [&_button]:px-[7px] [&_button]:text-[11px]"
           }
         )
       ]