@deframe-sdk/components 0.1.56 → 0.1.58

package/dist/index.js

@@ -76,7 +76,7 @@ function ActionButton(_a) {
     "className",
     "type"
   ]);
-  const baseClasses = [
+  const baseClasses2 = [
     "flex-1 inline-flex items-center justify-center overflow-hidden",
     "h-[var(--deframe-widget-font-leading-lg)]",
     "px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)]",
@@ -86,7 +86,7 @@ function ActionButton(_a) {
     "transition-[background,border-color,box-shadow,opacity] duration-200",
     "focus:outline-none focus:ring-2 focus:ring-[color:var(--deframe-widget-color-brand-primary)]"
   ].join(" ");
-  const stateClasses = disabled ? [
+  const stateClasses2 = disabled ? [
     "cursor-not-allowed",
     "bg-[var(--deframe-widget-color-bg-tertiary)]",
     "text-[color:var(--deframe-widget-color-text-primary-disabled)]"
@@ -98,8 +98,8 @@ function ActionButton(_a) {
     "hover:shadow-[0_2px_8px_color-mix(in_srgb,var(--deframe-widget-color-text-primary)_18%,transparent)]"
   ].join(" ");
   const containerClasses = tailwindMerge.twMerge(
-    baseClasses,
-    stateClasses,
+    baseClasses2,
+    stateClasses2,
     className
   );
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -114,13 +114,13 @@ function ActionButton(_a) {
   );
 }
 var CloseButton = ({ onClick, testId, ariaLabel = "Close", className }) => {
-  const baseClasses = "w-12 h-12 rounded-[var(--deframe-widget-size-radius-sm)] flex items-center justify-center text-[color:var(--deframe-widget-color-text-secondary)] hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_92%,transparent)] transition-[background] duration-150 cursor-pointer";
+  const baseClasses2 = "w-12 h-12 rounded-[var(--deframe-widget-size-radius-sm)] flex items-center justify-center text-[color:var(--deframe-widget-color-text-secondary)] hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_92%,transparent)] transition-[background] duration-150 cursor-pointer";
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
       "data-test-id": testId != null ? testId : "close-button",
       onClick,
-      className: tailwindMerge.twMerge(baseClasses, className),
+      className: tailwindMerge.twMerge(baseClasses2, className),
       "aria-label": ariaLabel,
       children: /* @__PURE__ */ jsxRuntime.jsx(hi2.HiXMark, { className: "w-6 h-6" })
     }
@@ -173,7 +173,7 @@ function PrimaryButton(_a) {
     "className",
     "type"
   ]);
-  const baseClasses = [
+  const baseClasses2 = [
     /** layout */
     "overflow-hidden w-full flex items-center justify-center transition-all duration-200",
     /** typography */
@@ -189,7 +189,7 @@ function PrimaryButton(_a) {
     "border-solid border-[length:var(--deframe-widget-size-border-xs)]",
     "gap-[var(--deframe-widget-size-gap-sm)]"
   ].join(" ");
-  const stateClasses = {
+  const stateClasses2 = {
     /** enabled state */
     enabled: [
       "hover:opacity-90",
@@ -207,8 +207,8 @@ function PrimaryButton(_a) {
     ].join(" ")
   };
   const buttonClasses = tailwindMerge.twMerge(
-    baseClasses,
-    stateClasses[disabled ? "disabled" : "enabled"],
+    baseClasses2,
+    stateClasses2[disabled ? "disabled" : "enabled"],
     className
   );
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -237,7 +237,7 @@ function SecondaryButton(_a) {
     "className",
     "type"
   ]);
-  const baseClasses = [
+  const baseClasses2 = [
     /** layout */
     "overflow-hidden w-full flex items-center justify-center transition-all duration-200",
     /** typography */
@@ -254,7 +254,7 @@ function SecondaryButton(_a) {
     "border-solid border-[length:var(--deframe-widget-size-border-xs)]",
     "gap-[var(--deframe-widget-size-gap-sm)]"
   ].join(" ");
-  const stateClasses = {
+  const stateClasses2 = {
     enabled: [
       "text-[color:var(--deframe-widget-color-brand-primary)]",
       "border-[color:var(--deframe-widget-color-brand-primary)]",
@@ -268,8 +268,8 @@ function SecondaryButton(_a) {
     ].join(" ")
   };
   const buttonClasses = tailwindMerge.twMerge(
-    baseClasses,
-    stateClasses[disabled ? "disabled" : "enabled"],
+    baseClasses2,
+    stateClasses2[disabled ? "disabled" : "enabled"],
     className
   );
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -298,7 +298,7 @@ function TertiaryButton(_a) {
     "className",
     "type"
   ]);
-  const baseClasses = [
+  const baseClasses2 = [
     /** layout */
     "overflow-hidden w-full flex items-center justify-center transition-all duration-200",
     /** typography */
@@ -314,7 +314,7 @@ function TertiaryButton(_a) {
     "rounded-[var(--deframe-widget-size-radius-xs)]",
     "gap-[var(--deframe-widget-size-gap-sm)]"
   ].join(" ");
-  const stateClasses = {
+  const stateClasses2 = {
     enabled: [
       "text-[color:var(--deframe-widget-color-text-tertiary)]",
       "hover:opacity-90",
@@ -326,8 +326,8 @@ function TertiaryButton(_a) {
     ].join(" ")
   };
   const buttonClasses = tailwindMerge.twMerge(
-    baseClasses,
-    stateClasses[disabled ? "disabled" : "enabled"],
+    baseClasses2,
+    stateClasses2[disabled ? "disabled" : "enabled"],
     className
   );
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -346,7 +346,7 @@ function TertiaryButton(_a) {
 }
 function Input(_a) {
   var _b = _a, { className = "" } = _b, props = __objRest(_b, ["className"]);
-  const baseClasses = [
+  const baseClasses2 = [
     "flex flex-col",
     "[gap:var(--deframe-widget-size-gap-xs)]"
   ].join(" ");
@@ -355,13 +355,13 @@ function Input(_a) {
     __spreadValues({
       "data-slot": "input",
       "data-test-id": "input",
-      className: tailwindMerge.twMerge(baseClasses, className)
+      className: tailwindMerge.twMerge(baseClasses2, className)
     }, props)
   );
 }
 function InputLabel(_a) {
   var _b = _a, { className = "" } = _b, props = __objRest(_b, ["className"]);
-  const baseClasses = [
+  const baseClasses2 = [
     "[font-family:var(--deframe-widget-font-family)]",
     "[font-size:var(--deframe-widget-font-size-xs)]",
     "[font-weight:var(--deframe-widget-font-weight-medium)]",
@@ -372,13 +372,13 @@ function InputLabel(_a) {
     __spreadValues({
       "data-slot": "input-label",
       "data-test-id": "input-label",
-      className: tailwindMerge.twMerge(baseClasses, className)
+      className: tailwindMerge.twMerge(baseClasses2, className)
     }, props)
   );
 }
 function InputField(_a) {
   var _b = _a, { hasError = false, disabled, className = "" } = _b, props = __objRest(_b, ["hasError", "disabled", "className"]);
-  const baseClasses = [
+  const baseClasses2 = [
     "w-full",
     "[font-family:var(--deframe-widget-font-family)]",
     "[font-size:var(--deframe-widget-font-size-md)]",
@@ -392,7 +392,7 @@ function InputField(_a) {
     "outline-none",
     "transition-colors"
   ].join(" ");
-  const stateClasses = {
+  const stateClasses2 = {
     default: [
       "border border-[var(--deframe-widget-color-border-primary)]",
       "bg-[var(--deframe-widget-color-bg-raised)]"
@@ -410,7 +410,7 @@ function InputField(_a) {
     ].join(" ")
   };
   const stateKey = hasError ? "error" : disabled ? "disabled" : "default";
-  const fieldClasses = tailwindMerge.twMerge(baseClasses, stateClasses[stateKey], className);
+  const fieldClasses = tailwindMerge.twMerge(baseClasses2, stateClasses2[stateKey], className);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "input",
     __spreadValues({
@@ -442,13 +442,13 @@ function Link(_a) {
     "replace",
     "scroll"
   ]);
-  const baseClasses = [
+  const baseClasses2 = [
     "[font-family:var(--deframe-widget-font-family)]",
     "[font-size:var(--deframe-widget-font-size-md)]",
     "[font-weight:var(--deframe-widget-font-weight-medium)]",
     "[line-height:var(--deframe-widget-font-leading-lg)]"
   ].join(" ");
-  const stateClasses = {
+  const stateClasses2 = {
     enabled: [
       "text-[color:var(--deframe-widget-color-text-primary)]",
       "hover:underline",
@@ -461,8 +461,8 @@ function Link(_a) {
     ].join(" ")
   };
   const linkClasses = tailwindMerge.twMerge(
-    baseClasses,
-    stateClasses[disabled ? "disabled" : "enabled"],
+    baseClasses2,
+    stateClasses2[disabled ? "disabled" : "enabled"],
     className
   );
   if (disabled) {
@@ -572,7 +572,7 @@ function ListItem(_a) {
 }
 function ListItemLeftSide(_a) {
   var _b = _a, { children, className } = _b, props = __objRest(_b, ["children", "className"]);
-  const baseClasses = [
+  const baseClasses2 = [
     "flex justify-center items-center",
     "text-[var(--deframe-widget-color-text-primary)]"
   ].join(" ");
@@ -581,7 +581,7 @@ function ListItemLeftSide(_a) {
     __spreadProps(__spreadValues({
       "data-slot": "list-item-left-side",
       "data-test-id": "list-item-left-side",
-      className: tailwindMerge.twMerge(baseClasses, className)
+      className: tailwindMerge.twMerge(baseClasses2, className)
     }, props), {
       children
     })
@@ -589,7 +589,7 @@ function ListItemLeftSide(_a) {
 }
 function ListItemContent(_a) {
   var _b = _a, { children, className } = _b, props = __objRest(_b, ["children", "className"]);
-  const baseClasses = [
+  const baseClasses2 = [
     "flex-1 self-stretch inline-flex flex-col justify-center items-start overflow-hidden",
     "text-[var(--deframe-widget-color-text-primary)]"
   ].join(" ");
@@ -598,7 +598,7 @@ function ListItemContent(_a) {
     __spreadProps(__spreadValues({
       "data-slot": "list-item-content",
       "data-test-id": "list-item-content",
-      className: tailwindMerge.twMerge(baseClasses, className)
+      className: tailwindMerge.twMerge(baseClasses2, className)
     }, props), {
       children
     })
@@ -606,7 +606,7 @@ function ListItemContent(_a) {
 }
 function ListItemRightSide(_a) {
   var _b = _a, { children, className } = _b, props = __objRest(_b, ["children", "className"]);
-  const baseClasses = [
+  const baseClasses2 = [
     "flex flex-col justify-start items-end",
     "text-[var(--deframe-widget-color-text-primary)]"
   ].join(" ");
@@ -615,7 +615,7 @@ function ListItemRightSide(_a) {
     __spreadProps(__spreadValues({
       "data-slot": "list-item-right-side",
       "data-test-id": "list-item-right-side",
-      className: tailwindMerge.twMerge(baseClasses, className)
+      className: tailwindMerge.twMerge(baseClasses2, className)
     }, props), {
       children
     })
@@ -925,19 +925,19 @@ var Text = React6__namespace.forwardRef(
       "disabled",
       "className"
     ]);
-    const baseClasses = [
+    const baseClasses2 = [
       "[font-family:var(--deframe-widget-font-family)]",
       "[font-size:var(--deframe-widget-font-size-md)]",
       "[line-height:var(--deframe-widget-font-leading-md)]",
       "[font-weight:var(--deframe-widget-font-weight-regular)]"
     ].join(" ");
-    const stateClasses = {
+    const stateClasses2 = {
       enabled: "text-[color:var(--deframe-widget-color-text-primary)]",
       disabled: "text-[color:var(--deframe-widget-color-text-primary-disabled)]"
     };
     const textClasses = tailwindMerge.twMerge(
-      baseClasses,
-      stateClasses[disabled ? "disabled" : "enabled"],
+      baseClasses2,
+      stateClasses2[disabled ? "disabled" : "enabled"],
       className
     );
     return React6__namespace.createElement(
@@ -983,14 +983,14 @@ var TextAccent = React6__namespace.forwardRef(
         "[font-weight:var(--deframe-widget-font-weight-semibold)]"
       ].join(" ")
     };
-    const stateClasses = {
+    const stateClasses2 = {
       enabled: "text-[color:var(--deframe-widget-color-text-primary)]",
       disabled: "text-[color:var(--deframe-widget-color-text-primary-disabled)]"
     };
     const variantClass = accentVariants[variant];
     const accentClasses = tailwindMerge.twMerge(
       variantClass,
-      stateClasses[disabled ? "disabled" : "enabled"],
+      stateClasses2[disabled ? "disabled" : "enabled"],
       className
     );
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1037,14 +1037,14 @@ var TextBody = React6__namespace.forwardRef(
         "[font-weight:var(--deframe-widget-font-weight-regular)]"
       ].join(" ")
     };
-    const stateClasses = {
+    const stateClasses2 = {
       enabled: "text-[color:var(--deframe-widget-color-text-primary)]",
       disabled: "text-[color:var(--deframe-widget-color-text-primary-disabled)]"
     };
     const variantClass = bodyVariants[variant];
     const bodyClasses = tailwindMerge.twMerge(
       variantClass,
-      stateClasses[disabled ? "disabled" : "enabled"],
+      stateClasses2[disabled ? "disabled" : "enabled"],
       className
     );
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1106,14 +1106,14 @@ var TextHeading = React6__namespace.forwardRef(
         "[font-weight:var(--deframe-widget-font-weight-bold)]"
       ].join(" ")
     };
-    const stateClasses = {
+    const stateClasses2 = {
       enabled: "text-[color:var(--deframe-widget-color-text-primary)]",
       disabled: "text-[color:var(--deframe-widget-color-text-primary-disabled)]"
     };
     const variantClass = headingVariants[variant];
     const headingClasses = tailwindMerge.twMerge(
       variantClass,
-      stateClasses[disabled ? "disabled" : "enabled"],
+      stateClasses2[disabled ? "disabled" : "enabled"],
       className
     );
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1599,7 +1599,7 @@ var Skeleton = (_a) => {
 Skeleton.displayName = "Skeleton";
 function BannerNotificationIcon(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  const baseClasses = [
+  const baseClasses2 = [
     "flex items-center justify-center",
     "flex-shrink-0",
     "[font-size:var(--deframe-widget-font-size-xxl)]"
@@ -1609,19 +1609,19 @@ function BannerNotificationIcon(_a) {
     __spreadValues({
       "data-slot": "banner-notification-icon",
       "data-test-id": "banner-notification-icon",
-      className: tailwindMerge.twMerge(baseClasses, className)
+      className: tailwindMerge.twMerge(baseClasses2, className)
     }, props)
   );
 }
 function BannerNotificationContent(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  const baseClasses = "flex-1 min-w-0 px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-sm)]";
+  const baseClasses2 = "flex-1 min-w-0 px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-sm)]";
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     __spreadValues({
       "data-slot": "banner-notification-content",
       "data-test-id": "banner-notification-content",
-      className: tailwindMerge.twMerge(baseClasses, className)
+      className: tailwindMerge.twMerge(baseClasses2, className)
     }, props)
   );
 }
@@ -1652,7 +1652,7 @@ function BannerNotificationMessage(_a) {
 }
 function BannerNotificationClose(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  const baseClasses = [
+  const baseClasses2 = [
     "flex-shrink-0",
     "self-start",
     "[font-size:var(--deframe-widget-font-size-xl)]",
@@ -1664,7 +1664,7 @@ function BannerNotificationClose(_a) {
       "data-slot": "banner-notification-close",
       "data-test-id": "banner-notification-close",
       "aria-label": "Close notification",
-      className: tailwindMerge.twMerge(baseClasses, className)
+      className: tailwindMerge.twMerge(baseClasses2, className)
     }, props)
   );
 }
@@ -1763,7 +1763,7 @@ var BannerNotification = (_a) => {
   const v = variant;
   const t = type;
   const p = position;
-  const baseClasses = [
+  const baseClasses2 = [
     "flex items-center",
     "[gap:var(--deframe-widget-size-gap-md)]",
     "px-[var(--deframe-widget-size-padding-x-md)]",
@@ -1781,7 +1781,7 @@ var BannerNotification = (_a) => {
     ].join(" ")
   };
   const bannerClasses = tailwindMerge.twMerge(
-    baseClasses,
+    baseClasses2,
     typeClasses[t],
     t === "toast" ? "text-white" : variantTextClasses[v],
     isExiting && "opacity-0 -translate-y-2",
@@ -2243,13 +2243,13 @@ function DeframeComponentsProvider({
   );
 }
 var InfoRow = ({ children, borderBottom, className }) => {
-  const baseClasses = "self-stretch inline-flex justify-between items-start";
+  const baseClasses2 = "self-stretch inline-flex justify-between items-start";
   const borderClasses = borderBottom ? "border-b border-[color:var(--deframe-widget-color-border-secondary)] pb-[var(--deframe-widget-size-padding-y-sm)]" : "";
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "info-row", className: tailwindMerge.twMerge(baseClasses, borderClasses, className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "info-row", className: tailwindMerge.twMerge(baseClasses2, borderClasses, className), children });
 };
 var InfoLabel = ({ children, className }) => {
-  const baseClasses = "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)]";
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "info-label", className: tailwindMerge.twMerge(baseClasses, className), children });
+  const baseClasses2 = "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)]";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "info-label", className: tailwindMerge.twMerge(baseClasses2, className), children });
 };
 var variantClasses = {
   default: "text-[color:var(--deframe-widget-color-text-primary)]",
@@ -2258,24 +2258,24 @@ var variantClasses = {
   error: "text-[color:var(--deframe-widget-color-state-error)]"
 };
 var InfoValue = ({ children, variant = "default", className }) => {
-  const baseClasses = "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] [font-weight:var(--deframe-widget-font-weight-semibold)]";
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "info-value", className: tailwindMerge.twMerge(baseClasses, variantClasses[variant], className), children });
+  const baseClasses2 = "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] [font-weight:var(--deframe-widget-font-weight-semibold)]";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "info-value", className: tailwindMerge.twMerge(baseClasses2, variantClasses[variant], className), children });
 };
 var InfoRowWithIcon = ({ children, borderBottom, className }) => {
-  const baseClasses = "flex items-start justify-between h-[17px]";
+  const baseClasses2 = "flex items-start justify-between h-[17px]";
   const borderClasses = borderBottom ? "border-b border-[color:var(--deframe-widget-color-border-secondary)] pb-[var(--deframe-widget-size-padding-y-sm)]" : "";
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "info-row-with-icon", className: tailwindMerge.twMerge(baseClasses, borderClasses, className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "info-row-with-icon", className: tailwindMerge.twMerge(baseClasses2, borderClasses, className), children });
 };
 var InfoRowIconLabel = ({ children, className }) => {
-  const baseClasses = "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)]";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "info-row-icon-label", className: tailwindMerge.twMerge(baseClasses, className), children: [
+  const baseClasses2 = "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)]";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "info-row-icon-label", className: tailwindMerge.twMerge(baseClasses2, className), children: [
     "\u2022 ",
     children
   ] });
 };
 var InfoRowIconValue = ({ children, className }) => {
-  const baseClasses = "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)]";
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "info-row-icon-value", className: tailwindMerge.twMerge(baseClasses, className), children });
+  const baseClasses2 = "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)]";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "info-row-icon-value", className: tailwindMerge.twMerge(baseClasses2, className), children });
 };
 var CollapsibleInfoRow = ({
   label,
@@ -2287,8 +2287,8 @@ var CollapsibleInfoRow = ({
   expandLabel
 }) => {
   const [isOpen, setIsOpen] = React6__namespace.default.useState(defaultOpen);
-  const baseClasses = "flex flex-col gap-[var(--deframe-widget-size-gap-sm)] w-full";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "collapsible-info-row", className: tailwindMerge.twMerge(baseClasses, className), children: [
+  const baseClasses2 = "flex flex-col gap-[var(--deframe-widget-size-gap-sm)] w-full";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "collapsible-info-row", className: tailwindMerge.twMerge(baseClasses2, className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -2310,16 +2310,16 @@ var CollapsibleInfoRow = ({
   ] });
 };
 var BackgroundContainer = ({ children, className }) => {
-  const baseClasses = "w-full flex-1 min-h-0 px-[var(--deframe-widget-size-padding-x-md)] bg-[var(--deframe-widget-color-bg-primary)] lg:bg-[var(--deframe-widget-color-bg-secondary)] text-[color:var(--deframe-widget-color-text-primary)] flex flex-col relative overflow-y-auto";
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "background-container", className: tailwindMerge.twMerge(baseClasses, className), children });
+  const baseClasses2 = "w-full flex-1 min-h-0 px-[var(--deframe-widget-size-padding-x-md)] bg-[var(--deframe-widget-color-bg-primary)] lg:bg-[var(--deframe-widget-color-bg-secondary)] text-[color:var(--deframe-widget-color-text-primary)] flex flex-col relative overflow-y-auto";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "background-container", className: tailwindMerge.twMerge(baseClasses2, className), children });
 };
 var SectionCard = ({ children, className }) => {
-  const baseClasses = "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-xs)] shadow-[0_2px_8px_color-mix(in_srgb,var(--deframe-widget-color-text-primary)_18%,transparent)] px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)] flex flex-col gap-[var(--deframe-widget-size-gap-sm)]";
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "section-card", className: tailwindMerge.twMerge(baseClasses, className), children });
+  const baseClasses2 = "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-xs)] shadow-[0_2px_8px_color-mix(in_srgb,var(--deframe-widget-color-text-primary)_18%,transparent)] px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)] flex flex-col gap-[var(--deframe-widget-size-gap-sm)]";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "section-card", className: tailwindMerge.twMerge(baseClasses2, className), children });
 };
 var Navbar = ({ children, className }) => {
-  const baseClasses = "w-full px-[var(--deframe-widget-size-padding-x-sm)] pr-[var(--deframe-widget-size-padding-x-md)] pt-[var(--deframe-widget-size-padding-y-sm)] pb-[var(--deframe-widget-size-padding-y-md)] border-b items-center border-[color:var(--deframe-widget-color-border-tertiary)] flex";
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "data-test-id": "navbar", className: tailwindMerge.twMerge(baseClasses, className), children });
+  const baseClasses2 = "w-full px-[var(--deframe-widget-size-padding-x-sm)] pr-[var(--deframe-widget-size-padding-x-md)] pt-[var(--deframe-widget-size-padding-y-sm)] pb-[var(--deframe-widget-size-padding-y-md)] border-b items-center border-[color:var(--deframe-widget-color-border-tertiary)] flex";
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "data-test-id": "navbar", className: tailwindMerge.twMerge(baseClasses2, className), children });
 };
 var gapClasses = {
   xs: "gap-[var(--deframe-widget-size-gap-xs)]",
@@ -2328,8 +2328,8 @@ var gapClasses = {
   lg: "gap-[var(--deframe-widget-size-gap-lg)]"
 };
 var FlexCol = ({ children, className, gap = "xs" }) => {
-  const baseClasses = "flex flex-col";
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "flex-col", className: tailwindMerge.twMerge(baseClasses, gapClasses[gap], className), children });
+  const baseClasses2 = "flex flex-col";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "flex-col", className: tailwindMerge.twMerge(baseClasses2, gapClasses[gap], className), children });
 };
 var gapClasses2 = {
   xs: "gap-[var(--deframe-widget-size-gap-xs)]",
@@ -2338,16 +2338,16 @@ var gapClasses2 = {
   lg: "gap-[var(--deframe-widget-size-gap-lg)]"
 };
 var FlexRow = ({ children, className, gap = "xs" }) => {
-  const baseClasses = "flex items-center";
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "flex-row", className: tailwindMerge.twMerge(baseClasses, gapClasses2[gap], className), children });
+  const baseClasses2 = "flex items-center";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "flex-row", className: tailwindMerge.twMerge(baseClasses2, gapClasses2[gap], className), children });
 };
 var ScrollableContent = ({ children, className }) => {
-  const baseClasses = "flex-1 overflow-y-auto px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]";
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "scrollable-content", className: tailwindMerge.twMerge(baseClasses, className), children });
+  const baseClasses2 = "flex-1 overflow-y-auto px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "scrollable-content", className: tailwindMerge.twMerge(baseClasses2, className), children });
 };
 var DetailsHeader = ({ title, onBack, className, backAriaLabel = "Back" }) => {
-  const baseClasses = "w-full px-[var(--deframe-widget-size-padding-x-sm)] pr-[var(--deframe-widget-size-padding-x-md)] pt-[var(--deframe-widget-size-padding-y-sm)] pb-[var(--deframe-widget-size-padding-y-md)] border-b border-[color:var(--deframe-widget-color-border-tertiary)] flex items-center";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "details-header", className: tailwindMerge.twMerge(baseClasses, className), children: [
+  const baseClasses2 = "w-full px-[var(--deframe-widget-size-padding-x-sm)] pr-[var(--deframe-widget-size-padding-x-md)] pt-[var(--deframe-widget-size-padding-y-sm)] pb-[var(--deframe-widget-size-padding-y-md)] border-b border-[color:var(--deframe-widget-color-border-tertiary)] flex items-center";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "details-header", className: tailwindMerge.twMerge(baseClasses2, className), children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
@@ -2362,8 +2362,8 @@ var DetailsHeader = ({ title, onBack, className, backAriaLabel = "Back" }) => {
   ] });
 };
 var HighRiskBadge = ({ className, label }) => {
-  const baseClasses = "inline-flex justify-start items-start gap-[var(--deframe-widget-size-gap-xs)]";
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "high-risk-badge", className: tailwindMerge.twMerge(baseClasses, className), children: /* @__PURE__ */ jsxRuntime.jsx(
+  const baseClasses2 = "inline-flex justify-start items-start gap-[var(--deframe-widget-size-gap-xs)]";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "high-risk-badge", className: tailwindMerge.twMerge(baseClasses2, className), children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       "data-size": "Small",
@@ -2374,8 +2374,8 @@ var HighRiskBadge = ({ className, label }) => {
   ) });
 };
 var MediumRiskBadge = ({ className, label }) => {
-  const baseClasses = "inline-flex justify-start items-start gap-[var(--deframe-widget-size-gap-xs)]";
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "medium-risk-badge", className: tailwindMerge.twMerge(baseClasses, className), children: /* @__PURE__ */ jsxRuntime.jsx(
+  const baseClasses2 = "inline-flex justify-start items-start gap-[var(--deframe-widget-size-gap-xs)]";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "medium-risk-badge", className: tailwindMerge.twMerge(baseClasses2, className), children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       "data-size": "Small",
@@ -2386,8 +2386,8 @@ var MediumRiskBadge = ({ className, label }) => {
   ) });
 };
 var LowRiskBadge = ({ className, label }) => {
-  const baseClasses = "inline-flex justify-start items-start gap-[var(--deframe-widget-size-gap-xs)]";
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "low-risk-badge", className: tailwindMerge.twMerge(baseClasses, className), children: /* @__PURE__ */ jsxRuntime.jsx(
+  const baseClasses2 = "inline-flex justify-start items-start gap-[var(--deframe-widget-size-gap-xs)]";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "low-risk-badge", className: tailwindMerge.twMerge(baseClasses2, className), children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       "data-size": "Small",
@@ -2411,7 +2411,7 @@ var ProcessingBadge = ({
   size = "default"
 }) => {
   const isCompact = size === "compact";
-  const baseClasses = [
+  const baseClasses2 = [
     "inline-flex max-w-fit items-center gap-[var(--deframe-widget-size-gap-xs)] rounded-[var(--deframe-widget-size-radius-full)] border",
     "text-[color:var(--deframe-widget-color-state-info)]",
     "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-info)_18%,transparent)]",
@@ -2422,7 +2422,7 @@ var ProcessingBadge = ({
     compact: "px-[calc(var(--deframe-widget-size-padding-x-xs)+2px)] py-[2px]"
   };
   const processingBadgeClasses = tailwindMerge.twMerge(
-    baseClasses,
+    baseClasses2,
     sizeClasses[isCompact ? "compact" : "default"],
     className
   );
@@ -4276,7 +4276,7 @@ var SwapAmountInputView = ({
     }
     return val;
   };
-  const baseClasses = "[font-size:var(--deframe-widget-font-size-xxl)] [line-height:var(--deframe-widget-font-leading-xxl)] [font-weight:var(--deframe-widget-font-weight-extrabold)] bg-transparent outline-none text-right w-full min-w-[120px] placeholder:text-[color:var(--deframe-widget-color-text-primary-disabled)]";
+  const baseClasses2 = "[font-size:var(--deframe-widget-font-size-xxl)] [line-height:var(--deframe-widget-font-leading-xxl)] [font-weight:var(--deframe-widget-font-weight-extrabold)] bg-transparent outline-none text-right w-full min-w-[120px] placeholder:text-[color:var(--deframe-widget-color-text-primary-disabled)]";
   const colorClasses = hasError ? "text-[color:var(--deframe-widget-color-state-error)]" : "text-[color:var(--deframe-widget-color-text-primary)]";
   return /* @__PURE__ */ jsxRuntime.jsx(
     "input",
@@ -4290,7 +4290,7 @@ var SwapAmountInputView = ({
       min: "0",
       step: "any",
       value,
-      className: tailwindMerge.twMerge(baseClasses, colorClasses, className)
+      className: tailwindMerge.twMerge(baseClasses2, colorClasses, className)
     }, field), {
       onChange: (event) => {
         let normalized = normalizeAmountInput(event.target.value);
@@ -5842,14 +5842,14 @@ var SwapTokenSelectorView = ({
   selectTokenLabel = "Select token",
   className
 }) => {
-  const baseClasses = "h-[56px] border border-[color:var(--deframe-widget-color-border-secondary)] rounded-[var(--deframe-widget-size-radius-xs)] overflow-hidden hover:border-[color:var(--deframe-widget-color-border-primary)] transition-colors flex items-center px-[var(--deframe-widget-size-padding-x-sm)] py-[6px] w-full cursor-pointer";
+  const baseClasses2 = "h-[56px] border border-[color:var(--deframe-widget-color-border-secondary)] rounded-[var(--deframe-widget-size-radius-xs)] overflow-hidden hover:border-[color:var(--deframe-widget-color-border-primary)] transition-colors flex items-center px-[var(--deframe-widget-size-padding-x-sm)] py-[6px] w-full cursor-pointer";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
       "data-test-id": testId,
       type: "button",
       onClick,
-      className: tailwindMerge.twMerge(baseClasses, className),
+      className: tailwindMerge.twMerge(baseClasses2, className),
       "aria-label": token ? token.symbol : selectTokenLabel,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] flex-1", children: token ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -5869,8 +5869,8 @@ var SwapNetworkSelectorView = ({
   testId = "swap-network-selector",
   className
 }) => {
-  const baseClasses = "flex flex-row items-center gap-[var(--deframe-widget-size-gap-xs)]";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": testId, className: tailwindMerge.twMerge(baseClasses, className), children: [
+  const baseClasses2 = "flex flex-row items-center gap-[var(--deframe-widget-size-gap-xs)]";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": testId, className: tailwindMerge.twMerge(baseClasses2, className), children: [
     /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "text-small", className: "tracking-wide text-[color:var(--deframe-widget-color-text-tertiary)]", children: directionLabel }),
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -5991,8 +5991,8 @@ var SwapOutputAmountView = ({
   searchingQuoteLabel = "Searching quote...",
   className
 }) => {
-  const baseClasses = "[font-size:var(--deframe-widget-font-size-xxl)] [line-height:var(--deframe-widget-font-leading-xxl)] [font-weight:var(--deframe-widget-font-weight-extrabold)] text-right w-full min-w-[120px] text-[color:var(--deframe-widget-color-text-primary)]";
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "swap-flow-output-amount", className: tailwindMerge.twMerge(baseClasses, className), children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-primary-disabled)] inline-flex items-center", children: loadingElement != null ? loadingElement : searchingQuoteLabel }) : displayOutput });
+  const baseClasses2 = "[font-size:var(--deframe-widget-font-size-xxl)] [line-height:var(--deframe-widget-font-leading-xxl)] [font-weight:var(--deframe-widget-font-weight-extrabold)] text-right w-full min-w-[120px] text-[color:var(--deframe-widget-color-text-primary)]";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "swap-flow-output-amount", className: tailwindMerge.twMerge(baseClasses2, className), children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-primary-disabled)] inline-flex items-center", children: loadingElement != null ? loadingElement : searchingQuoteLabel }) : displayOutput });
 };
 var SwapToCardView = ({
   labels,
@@ -6071,10 +6071,67 @@ var SwapToCardView = ({
     ] })
   ] }) });
 };
+var baseClasses = [
+  "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",
+  "font-[var(--deframe-widget-font-family)] whitespace-nowrap border"
+].join(" ");
+var stateClasses = {
+  active: [
+    "border-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_32%,transparent)]",
+    "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)]",
+    "text-[color:var(--deframe-widget-color-brand-primary)]",
+    "[font-weight:var(--deframe-widget-font-weight-semibold)]"
+  ].join(" "),
+  default: [
+    "border-[color:var(--deframe-widget-color-border-secondary)]",
+    "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_84%,transparent)]",
+    "text-[color:var(--deframe-widget-color-text-secondary)]",
+    "[font-weight:var(--deframe-widget-font-weight-regular)]",
+    "hover:border-[color:var(--deframe-widget-color-border-primary)]",
+    "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_92%,transparent)]",
+    "hover:text-[color:var(--deframe-widget-color-text-primary)]"
+  ].join(" ")
+};
+function SlippageChip({
+  options = [],
+  selected = void 0,
+  onSelect,
+  formatLabel,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-test-id": "slippage-chips",
+      "data-slot": "slippage-chips",
+      className: tailwindMerge.twMerge("flex w-full gap-sm", className),
+      children: options.map((bps) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          "data-test-id": "slippage-chip",
+          "data-slot": "slippage-chip",
+          type: "button",
+          onClick: () => onSelect(bps),
+          className: tailwindMerge.twMerge(baseClasses, stateClasses[bps === selected ? "active" : "default"]),
+          children: formatLabel(bps)
+        },
+        String(bps)
+      ))
+    }
+  );
+}
 var SwapAdvancedSettingsView = ({
   title,
   isOpen,
   onOpenChange,
+  slippageBps,
+  onSlippageSelect,
+  formatPercentage,
+  slippageOptions,
+  slippageLabel,
   percentageOptions,
   onPercentageClick,
   slippageFormatted,
@@ -6091,19 +6148,33 @@ var SwapAdvancedSettingsView = ({
       onOpenChange,
       collapseText,
       expandText,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.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}%`;
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          PercentageButton,
-          {
-            type: "button",
-            onClick: () => onPercentageClick(pct),
-            children: label
-          },
-          pct
-        );
-      }) }) })
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col gap-sm", children: [
+        /* @__PURE__ */ jsxRuntime.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}%`;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            PercentageButton,
+            {
+              type: "button",
+              onClick: () => onPercentageClick(pct),
+              children: label
+            },
+            pct
+          );
+        }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-xs w-full", children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            SlippageChip,
+            {
+              options: slippageOptions,
+              selected: slippageBps,
+              onSelect: onSlippageSelect,
+              formatLabel: formatPercentage
+            }
+          )
+        ] })
+      ] })
     }
   ) }) });
 };
@@ -6112,8 +6183,8 @@ var SwapQuoteHeaderView = ({
   timerElement,
   className
 }) => {
-  const baseClasses = "border-b border-[color:var(--deframe-widget-color-border-secondary)] pb-[var(--deframe-widget-size-padding-y-sm)]";
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "swap-quote-header", className: tailwindMerge.twMerge(baseClasses, className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+  const baseClasses2 = "border-b border-[color:var(--deframe-widget-color-border-secondary)] pb-[var(--deframe-widget-size-padding-y-sm)]";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "swap-quote-header", className: tailwindMerge.twMerge(baseClasses2, className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
     /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "text-small", className: "[font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-secondary)] inline-flex items-center", children: label }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-md)]", children: timerElement })
   ] }) });
@@ -6821,7 +6892,7 @@ function ChevronDown() {
   );
 }
 function ChipPill({ label, active, onClick }) {
-  const baseClasses = tailwindMerge.twMerge(
+  const baseClasses2 = tailwindMerge.twMerge(
     "inline-flex items-center justify-center",
     "py-[3px] px-[10px]",
     "rounded-[var(--deframe-widget-size-radius-full)]",
@@ -6833,7 +6904,7 @@ function ChipPill({ label, active, onClick }) {
     "whitespace-nowrap",
     "border"
   );
-  const stateClasses = active ? tailwindMerge.twMerge(
+  const stateClasses2 = active ? tailwindMerge.twMerge(
     "border-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_32%,transparent)]",
     "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)]",
     "text-[color:var(--deframe-widget-color-brand-primary)]",
@@ -6854,7 +6925,7 @@ function ChipPill({ label, active, onClick }) {
       type: "button",
       onClick,
       "aria-label": label,
-      className: tailwindMerge.twMerge(baseClasses, stateClasses),
+      className: tailwindMerge.twMerge(baseClasses2, stateClasses2),
       children: /* @__PURE__ */ jsxRuntime.jsx("span", { "data-test-id": "swap-from-card-simple-chip-label", children: label })
     }
   );
@@ -7289,9 +7360,13 @@ var SwapFormViewSimple = ({
     if (!advancedSettings.isOpen) setShowPanel(false);
   }, [advancedSettings.isOpen]);
   const updatePanelPos = React6.useCallback(() => {
-    if (containerRef.current && showPanel) {
-      const rect = containerRef.current.getBoundingClientRect();
-      setPanelPos({ top: rect.top, left: rect.right + 16 });
+    if (!containerRef.current || !showPanel) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    const GAP = 16;
+    if (window.innerWidth < 640) {
+      setPanelPos({ top: rect.bottom + GAP, left: rect.left, width: rect.width });
+    } else {
+      setPanelPos({ top: rect.top, left: rect.right + GAP });
     }
   }, [showPanel]);
   React6.useEffect(() => {
@@ -7405,15 +7480,21 @@ var SwapFormViewSimple = ({
           {
             "data-test-id": "swap-form-simple-advanced-panel",
             className: tailwindMerge.twMerge(
-              "fixed",
-              "w-[320px] z-[9999]",
+              "fixed z-[9999]",
+              !panelPos.width && "w-[320px]",
               "bg-[var(--deframe-widget-color-bg-secondary)]",
               "rounded-[var(--deframe-widget-size-radius-md)]",
               "border border-[color:var(--deframe-widget-color-border-secondary)]",
               "shadow-[0px_4px_24px_0px_#0000003D]",
-              "font-[var(--deframe-widget-font-family)]"
+              "font-[var(--deframe-widget-font-family)]",
+              "overflow-y-auto"
             ),
-            style: { top: panelPos.top, left: panelPos.left },
+            style: __spreadProps(__spreadValues({
+              top: panelPos.top,
+              left: panelPos.left
+            }, panelPos.width && { width: panelPos.width }), {
+              maxHeight: `calc(100vh - ${panelPos.top}px - 16px)`
+            }),
             children: /* @__PURE__ */ jsxRuntime.jsx(
               AdvancedPanelContent,
               {
@@ -7572,6 +7653,7 @@ function AdvancedPill({ label, isOpen, onClick }) {
   );
 }
 function AdvancedPanelContent({ advancedSettings, transactionDetails }) {
+  const handleSlippageSelect = advancedSettings.onSlippageSelect;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -7645,9 +7727,18 @@ function AdvancedPanelContent({ advancedSettings, transactionDetails }) {
         /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: transactionDetails.labels.blockchainCostsLabel, value: transactionDetails.totalCostFormatted }),
         /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: transactionDetails.labels.networkGasLabel, value: transactionDetails.gasCostFormatted }),
         /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: transactionDetails.labels.protocolFeeLabel, value: transactionDetails.protocolFee }),
-        /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: transactionDetails.labels.slippageLabel, value: transactionDetails.slippageFormatted }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SlippageDetailRow,
+          {
+            label: transactionDetails.labels.slippageLabel,
+            options: advancedSettings.slippageOptions,
+            selected: advancedSettings.slippageBps,
+            onSelect: handleSlippageSelect,
+            formatLabel: advancedSettings.formatPercentage
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: transactionDetails.labels.etaLabel, value: transactionDetails.etaFormatted }),
-        transactionDetails.quoteId && /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: transactionDetails.labels.quoteIdLabel, value: transactionDetails.quoteId })
+        transactionDetails.quoteId && /* @__PURE__ */ jsxRuntime.jsx(QuoteIdRow, { label: transactionDetails.labels.quoteIdLabel, quoteId: transactionDetails.quoteId })
       ]
     }
   );
@@ -7680,6 +7771,61 @@ function DetailRow({ label, value }) {
     }
   );
 }
+function SlippageDetailRow({ label, options, selected, onSelect: handleSelect, formatLabel }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-test-id": "swap-form-simple-slippage-row",
+      className: "flex flex-col py-[10px] gap-[var(--deframe-widget-size-gap-sm)]",
+      children: [
+        /* @__PURE__ */ jsxRuntime.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)]",
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SlippageChip,
+          {
+            options,
+            selected,
+            onSelect: handleSelect,
+            formatLabel,
+            className: "w-full gap-[4px] [&_button]:py-[2px] [&_button]:px-[7px] [&_button]:text-[11px]"
+          }
+        )
+      ]
+    }
+  );
+}
+function QuoteIdRow({ label, quoteId }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-test-id": "swap-form-simple-quote-id-row",
+      className: "flex justify-between items-center py-[10px] gap-[var(--deframe-widget-size-gap-sm)]",
+      children: [
+        /* @__PURE__ */ jsxRuntime.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",
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          AddressDisplay,
+          {
+            address: quoteId,
+            className: "py-[3px] px-[8px] max-w-[150px] min-w-0"
+          }
+        )
+      ]
+    }
+  );
+}
 var ChooseANetworkView = ({
   labels,
   autoFocus = true,
@@ -7781,7 +7927,7 @@ function useIsMobile(breakpoint = 640) {
   return isMobile;
 }
 function CloseButtonInline({ onClick, ariaLabel }) {
-  const baseClasses = [
+  const baseClasses2 = [
     "inline-flex items-center justify-center",
     "w-9 h-9",
     "rounded-[var(--deframe-widget-size-radius-sm)]",
@@ -7800,7 +7946,7 @@ function CloseButtonInline({ onClick, ariaLabel }) {
       "data-test-id": "close-button",
       onClick,
       "aria-label": ariaLabel,
-      className: baseClasses,
+      className: baseClasses2,
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "svg",
         {
@@ -7860,7 +8006,7 @@ function hasSignificantBalance(balanceUsd) {
   return !isNaN(num) && num >= 0.01;
 }
 function NetworkRow({ network, selected, onClick, onKeyDown, index }) {
-  const baseClasses = [
+  const baseClasses2 = [
     "relative flex items-center gap-[10px]",
     "py-[9px] px-[var(--deframe-widget-size-padding-x-sm)] pl-[14px]",
     "rounded-[var(--deframe-widget-size-radius-sm)]",
@@ -7869,11 +8015,11 @@ function NetworkRow({ network, selected, onClick, onKeyDown, index }) {
     "mb-[var(--deframe-widget-size-gap-none)].5",
     "transition-[background] duration-150"
   ].join(" ");
-  const stateClasses = {
+  const stateClasses2 = {
     selected: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)] hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)]",
     default: "bg-transparent hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-secondary)_72%,transparent)]"
   };
-  const rowClasses = tailwindMerge.twMerge(baseClasses, stateClasses[selected ? "selected" : "default"]);
+  const rowClasses = tailwindMerge.twMerge(baseClasses2, stateClasses2[selected ? "selected" : "default"]);
   const nameClasses = [
     "text-[14px] [font-weight:var(--deframe-widget-font-weight-medium)]",
     selected ? "text-[color:var(--deframe-widget-color-text-primary)]" : "text-[color:var(--deframe-widget-color-text-secondary)]"
@@ -7938,7 +8084,7 @@ function NetworkRow({ network, selected, onClick, onKeyDown, index }) {
   );
 }
 function NetworkChip({ network, selected, onClick }) {
-  const baseClasses = [
+  const baseClasses2 = [
     "inline-flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
     "py-[var(--deframe-widget-size-padding-y-sm)] pl-[var(--deframe-widget-size-padding-x-sm)] pr-[14px]",
     "rounded-[var(--deframe-widget-size-radius-full)]",
@@ -7949,11 +8095,11 @@ function NetworkChip({ network, selected, onClick }) {
     "outline-none",
     "border"
   ].join(" ");
-  const stateClasses = {
+  const stateClasses2 = {
     selected: "border-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_32%,transparent)] bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)]",
     default: "border-[color:var(--deframe-widget-color-border-secondary)] bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-secondary)_72%,transparent)]"
   };
-  const buttonClasses = tailwindMerge.twMerge(baseClasses, stateClasses[selected ? "selected" : "default"]);
+  const buttonClasses = tailwindMerge.twMerge(baseClasses2, stateClasses2[selected ? "selected" : "default"]);
   const nameLabelClasses = [
     "text-[13px] [font-weight:var(--deframe-widget-font-weight-medium)] leading-[1.2]",
     selected ? "text-[color:var(--deframe-widget-color-brand-primary)]" : "text-[color:var(--deframe-widget-color-text-secondary)]"
@@ -8087,7 +8233,7 @@ function AssetRowInline({
   const priceUSD = Number(balance == null ? void 0 : balance.priceUSD) || token.priceInUSD || 0;
   const formattedAmount = balance ? formatTokenAmount(balance.amountUI, priceUSD) : void 0;
   const formattedUsd = balance ? formatCurrencyValue(parseFloat(balance.amountInUSD)) : void 0;
-  const baseClasses = [
+  const baseClasses2 = [
     "group",
     "relative flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
     "py-[10px] px-[14px]",
@@ -8095,7 +8241,7 @@ function AssetRowInline({
     "cursor-pointer outline-none",
     "transition-[background] duration-150"
   ].join(" ");
-  const rowClasses = tailwindMerge.twMerge(baseClasses, "bg-transparent hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-secondary)_72%,transparent)]");
+  const rowClasses = tailwindMerge.twMerge(baseClasses2, "bg-transparent hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-secondary)_72%,transparent)]");
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -9603,13 +9749,13 @@ var StrategyGridCardSimple = ({
   );
 };
 var BackButton = ({ onClick, ariaLabel = "Back", className }) => {
-  const baseClasses = "w-12 h-12 rounded-[var(--deframe-widget-size-radius-full)] flex items-center justify-center text-[color:var(--deframe-widget-color-text-secondary)] hover:text-[color:var(--deframe-widget-color-brand-primary)] transition-colors cursor-pointer";
+  const baseClasses2 = "w-12 h-12 rounded-[var(--deframe-widget-size-radius-full)] flex items-center justify-center text-[color:var(--deframe-widget-color-text-secondary)] hover:text-[color:var(--deframe-widget-color-brand-primary)] transition-colors cursor-pointer";
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
       "data-test-id": "back-button",
       onClick,
-      className: tailwindMerge.twMerge(baseClasses, className),
+      className: tailwindMerge.twMerge(baseClasses2, className),
       "aria-label": ariaLabel,
       children: /* @__PURE__ */ jsxRuntime.jsx(hi2.HiArrowLeft, { className: "w-6 h-6" })
     }
@@ -11408,7 +11554,7 @@ var EarnTokenSelectorSimpleView = ({
 }) => {
   const hasToken = selectedToken != null;
   const isInteractive = !!onNetworkAndAssetClick;
-  const baseClasses = [
+  const baseClasses2 = [
     "inline-flex items-center gap-[10px]",
     "h-[54px] px-[10px]",
     "rounded-[var(--deframe-widget-size-radius-sm)]",
@@ -11417,13 +11563,13 @@ var EarnTokenSelectorSimpleView = ({
     "transition-[background] duration-150",
     "flex-shrink-0"
   ].join(" ");
-  const stateClasses = {
+  const stateClasses2 = {
     interactive: "cursor-pointer hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_92%,transparent)]",
     static: "cursor-default"
   };
   const selectorClasses = tailwindMerge.twMerge(
-    baseClasses,
-    stateClasses[isInteractive ? "interactive" : "static"],
+    baseClasses2,
+    stateClasses2[isInteractive ? "interactive" : "static"],
     className
   );
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -11754,14 +11900,14 @@ var EarnInlineNotificationSimpleView = ({
   variant,
   message
 }) => {
-  const baseClasses = [
+  const baseClasses2 = [
     "relative flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
     "py-[7px] pr-[10px] pl-[14px]",
     "rounded-[var(--deframe-widget-size-radius-sm)]",
     "border",
     "overflow-hidden"
   ].join(" ");
-  const wrapperClasses = tailwindMerge.twMerge(baseClasses, variantWrapperClasses[variant]);
+  const wrapperClasses = tailwindMerge.twMerge(baseClasses2, variantWrapperClasses[variant]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {