@planetaexo/design-system 0.23.1 → 0.23.3

package/dist/index.cjs

@@ -1991,12 +1991,12 @@ function TransferDetailsBlock({
     "div",
     {
       className: [
-        "w-full max-w-md mx-auto rounded-xl border border-border bg-muted/40 px-5 py-4 text-left",
+        "w-full max-w-sm mx-auto text-left",
         className != null ? className : ""
       ].filter(Boolean).join(" "),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3 text-xs uppercase tracking-wide text-muted-foreground font-heading", children: label }),
-        /* @__PURE__ */ jsxRuntime.jsx("dl", { className: "space-y-1.5 text-sm font-mono", children: items.map(([term, value], i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("dl", { className: "space-y-1.5 text-sm font-sans", children: items.map(([term, value], i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("dt", { className: "text-muted-foreground shrink-0", children: [
             term,
             ":"
@@ -7790,8 +7790,19 @@ function PricingTrip({
   const [showEstimates, setShowEstimates] = React25__namespace.useState(false);
   const [showPriceInfo, setShowPriceInfo] = React25__namespace.useState(false);
   if (variant === "compact") {
+    const showOverlay = showPriceInfo && (!!priceInfo || !!currencyEstimates && currencyEstimates.length > 0);
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+      showOverlay && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Close price details",
+          tabIndex: -1,
+          onClick: () => setShowPriceInfo(false),
+          className: "absolute bottom-full left-1/2 -translate-x-1/2 w-screen h-screen bg-foreground/20 backdrop-blur-sm cursor-default animate-in fade-in"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center gap-3", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] uppercase tracking-wide text-muted-foreground font-ui leading-none mb-0.5", children: "from" }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end gap-1.5 flex-wrap", children: [
@@ -7813,15 +7824,7 @@ function PricingTrip({
                   "text-muted-foreground hover:text-foreground transition-colors",
                   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                 ),
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  lucideReact.ChevronDownIcon,
-                  {
-                    className: cn(
-                      "h-4 w-4 transition-transform",
-                      showPriceInfo && "rotate-180"
-                    )
-                  }
-                )
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.InfoIcon, { className: "h-4 w-4" })
               }
             )
           ] })
@@ -7844,8 +7847,9 @@ function PricingTrip({
         "div",
         {
           className: cn(
-            "rounded-xl border border-border bg-muted/40 overflow-hidden",
-            "font-ui text-sm leading-relaxed text-foreground"
+            "relative rounded-xl border border-border bg-card overflow-hidden shadow-lg",
+            "font-ui text-sm leading-relaxed text-foreground",
+            "animate-in fade-in slide-in-from-bottom-2"
           ),
           children: [
             priceInfo && /* @__PURE__ */ jsxRuntime.jsx(
@@ -7968,15 +7972,7 @@ function PricingTrip({
               "text-muted-foreground hover:text-foreground transition-colors",
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
             ),
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              lucideReact.ChevronDownIcon,
-              {
-                className: cn(
-                  "h-4 w-4 transition-transform",
-                  showPriceInfo && "rotate-180"
-                )
-              }
-            )
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.InfoIcon, { className: "h-4 w-4" })
           }
         )
       ] })