@page-speed/maps 0.2.3 → 0.2.4

package/dist/components/index.cjs

@@ -823,8 +823,9 @@ function MarkerActions({ actions }) {
       ...rest
     } = action;
     const buttonStyles = cn(
-      "inline-flex items-center gap-2 px-4 py-2 rounded-md font-medium transition-colors",
-      variant === "outline" ? "border border-border bg-background hover:bg-muted" : "bg-primary text-primary-foreground hover:bg-primary/90",
+      "gap-2 px-4 py-2 rounded-md font-medium transition-colors duration-500",
+      "flex justify-center items-center",
+      variant === "outline" ? "border border-border bg-card text-card-foreground hover:bg-primary hover:text-primary-foreground" : "bg-primary text-primary-foreground hover:bg-primary/90",
       size === "sm" && "text-sm px-3 py-1.5",
       size === "icon" && "p-2",
       actionClassName
@@ -928,7 +929,7 @@ function MarkerMediaCarousel({
           children: /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { name: "lucide/arrow-right", size: 18 })
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-2 left-1/2 flex -translate-x-1/2 items-center gap-1.5 z-[2]", children: mediaItems.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-2 left-1/2 flex -translate-x-1/2 items-center gap-1.5 z-2", children: mediaItems.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "button",
@@ -1157,10 +1158,10 @@ function GeoMap({
     longitude: defaultViewState?.longitude ?? firstCoordinate.longitude,
     zoom: defaultViewState?.zoom ?? calculatedZoom
   });
-  const [dynamicPanelPosition, setDynamicPanelPosition] = React3__namespace.useState(
-    panelPosition
+  const [dynamicPanelPosition, setDynamicPanelPosition] = React3__namespace.useState(panelPosition);
+  const viewStateRef = React3__namespace.useRef(
+    uncontrolledViewState
   );
-  const viewStateRef = React3__namespace.useRef(uncontrolledViewState);
   React3__namespace.useEffect(() => {
     if (!viewState && !defaultViewState) {
       setUncontrolledViewState((prev) => {
@@ -1534,7 +1535,7 @@ function GeoMap({
     {
       ref: containerRef,
       className: cn(
-        "relative rounded-2xl border border-border bg-background",
+        "relative",
         // Remove overflow-hidden from outer container to allow panel to overflow
         className
       ),
@@ -1549,7 +1550,7 @@ function GeoMap({
           "div",
           {
             className: cn(
-              "w-full rounded-2xl",
+              "w-full",
               // Only apply default height class if mapWrapperClassName not provided
               !mapWrapperClassName && `h-[${calculatedHeight}px]`,
               mapWrapperClassName