@morphika/andami 0.1.2

package/components/builder/settings-panel/index.ts

@@ -0,0 +1,19 @@
+/**
+ * Settings panel sub-components barrel export.
+ *
+ * Session 64: SettingsPanel split into focused modules.
+ * Session 65: LayoutTab split into LayoutTab, BlockLayoutTab,
+ *             RowLayoutPresetPicker, TRBLInputs.
+ */
+
+export { LayoutTab } from "./LayoutTab";
+export { BlockLayoutTab } from "./BlockLayoutTab";
+export { TRBLInputs } from "./TRBLInputs";
+export { default as PageSettings, PageSeoSettings } from "./PageSettings";
+export { default as BlockSettings } from "./BlockSettings";
+export { default as SectionV2Settings } from "./SectionV2Settings";
+export { SectionV2LayoutTab } from "./SectionV2LayoutTab";
+export { SectionV2AnimationTab } from "./SectionV2AnimationTab";
+export { default as ColumnV2Settings } from "./ColumnV2Settings";
+export { default as ParallaxSlideSettings } from "./ParallaxSlideSettings";
+export { default as ParallaxGroupSettings } from "./ParallaxGroupSettings";

package/components/builder/settings-panel/responsive-helpers.ts

@@ -0,0 +1,524 @@
+/**
+ * Responsive helpers for section setting resolution.
+ *
+ * Session 64: Extracted from SettingsPanel.tsx.
+ * Session 86: Removed V1 Row/Column types — now uses generic interface
+ *             compatible with PageSection (settings + responsive shape).
+ */
+
+import type { PageSection } from "../../../lib/sanity/types";
+import type { DeviceViewport } from "../../../lib/builder/types";
+
+/**
+ * Generic shape for items with settings + responsive overrides.
+ * Compatible with PageSection (and formerly Row).
+ * Uses `unknown` to accept any settings interface without index signature issues.
+ */
+type SettingsItem = {
+  settings?: unknown;
+  responsive?: Record<string, Record<string, unknown>>;
+};
+
+/** Get effective value for a section setting, checking viewport overrides */
+export function getRowSettingValue<T>(item: SettingsItem, viewport: DeviceViewport, property: string, fallback: T): T {
+  if (viewport === "desktop") {
+    const val = (item.settings as Record<string, unknown> || {})[property];
+    return (val !== undefined ? val : fallback) as T;
+  }
+  const override = item.responsive?.[viewport]?.[property];
+  if (override !== undefined) return override as T;
+  const base = (item.settings as Record<string, unknown> || {})[property];
+  return (base !== undefined ? base : fallback) as T;
+}
+
+/** Check if a section setting has a responsive override */
+export function hasRowSettingOverride(item: SettingsItem, viewport: DeviceViewport, property: string): boolean {
+  if (viewport === "desktop") return false;
+  return item.responsive?.[viewport]?.[property] !== undefined;
+}
+
+/** Set a responsive override on a section setting, returning the updated fields */
+export function setRowResponsiveOverride(item: SettingsItem, viewport: DeviceViewport, property: string, value: unknown): Partial<PageSection> {
+  if (viewport === "desktop") {
+    return { settings: { ...(item.settings as Record<string, unknown> || {}), [property]: value } } as Partial<PageSection>;
+  }
+  const existing = item.responsive || {};
+  const vp = viewport as "tablet" | "phone";
+  const vpOverrides = { ...(existing[vp] || {}), [property]: value };
+  if (value === undefined) {
+    delete (vpOverrides as Record<string, unknown>)[property];
+  }
+  const responsive = { ...existing, [vp]: vpOverrides };
+  if (Object.keys(vpOverrides).length === 0) {
+    delete responsive[vp];
+  }
+  return { responsive: Object.keys(responsive).length ? responsive : undefined } as Partial<PageSection>;
+}
+
+// ============================================
+// Block Layout responsive helpers
+// ============================================
+// Block layout properties (spacing, background, offset, border, alignment)
+// are stored in block.responsive.tablet.layout / block.responsive.phone.layout.
+// The resolveBlock() function deep-merges these automatically.
+
+import type { ContentBlock, BlockLayout } from "../../../lib/sanity/types";
+
+/** Get effective value for a block layout property, checking viewport overrides */
+export function getBlockLayoutValue<T>(
+  block: ContentBlock,
+  viewport: DeviceViewport,
+  property: keyof BlockLayout,
+  fallback: T
+): T {
+  const layout = (block as unknown as Record<string, unknown>).layout as BlockLayout | undefined;
+  const base = layout?.[property];
+
+  if (viewport === "desktop") {
+    return (base !== undefined ? base : fallback) as T;
+  }
+
+  const responsive = (block as unknown as Record<string, unknown>).responsive as
+    | Record<string, Record<string, unknown>>
+    | undefined;
+  const vpLayout = responsive?.[viewport]?.layout as Partial<BlockLayout> | undefined;
+  if (vpLayout && property in vpLayout) {
+    return vpLayout[property] as T;
+  }
+
+  return (base !== undefined ? base : fallback) as T;
+}
+
+/** Check if a block layout property has a responsive override for the given viewport */
+export function hasBlockLayoutOverride(
+  block: ContentBlock,
+  viewport: DeviceViewport,
+  property: keyof BlockLayout
+): boolean {
+  if (viewport === "desktop") return false;
+  const responsive = (block as unknown as Record<string, unknown>).responsive as
+    | Record<string, Record<string, unknown>>
+    | undefined;
+  const vpLayout = responsive?.[viewport]?.layout as Partial<BlockLayout> | undefined;
+  return vpLayout !== undefined && property in vpLayout;
+}
+
+/**
+ * Set a block layout responsive override. Returns the updates to pass to store.updateBlock().
+ *
+ * - Desktop: returns `{ layout: { ...existing, [property]: value } }`
+ * - Tablet/Phone: returns `{ responsive: { ..., [viewport]: { ..., layout: { ..., [property]: value } } } }`
+ */
+export function setBlockLayoutOverride(
+  block: ContentBlock,
+  viewport: DeviceViewport,
+  property: keyof BlockLayout,
+  value: unknown
+): Partial<ContentBlock> {
+  const layout = (block as unknown as Record<string, unknown>).layout as BlockLayout | undefined;
+
+  if (viewport === "desktop") {
+    return {
+      layout: { ...(layout || {}), [property]: value },
+    } as Partial<ContentBlock>;
+  }
+
+  const existing = (block as unknown as Record<string, unknown>).responsive as
+    | Record<string, Record<string, unknown>>
+    | undefined || {};
+  const vpOverrides = { ...(existing[viewport] || {}) };
+  const layoutOverrides = { ...((vpOverrides.layout as Record<string, unknown>) || {}), [property]: value };
+
+  // Remove the field if value is undefined (reset to inherit)
+  if (value === undefined) {
+    delete layoutOverrides[property];
+  }
+
+  // Clean up empty layout object
+  if (Object.keys(layoutOverrides).length > 0) {
+    vpOverrides.layout = layoutOverrides;
+  } else {
+    delete vpOverrides.layout;
+  }
+
+  // Clean up empty viewport object
+  const responsive = { ...existing };
+  if (Object.keys(vpOverrides).length > 0) {
+    responsive[viewport] = vpOverrides;
+  } else {
+    delete responsive[viewport];
+  }
+
+  return {
+    responsive: Object.keys(responsive).length > 0 ? responsive : undefined,
+  } as unknown as Partial<ContentBlock>;
+}
+
+/**
+ * Reset all block layout overrides for a given viewport.
+ * Returns the updated responsive object to pass to store.updateBlock().
+ */
+export function resetBlockLayoutOverrides(
+  block: ContentBlock,
+  viewport: DeviceViewport
+): Partial<ContentBlock> {
+  if (viewport === "desktop") return {};
+
+  const existing = (block as unknown as Record<string, unknown>).responsive as
+    | Record<string, Record<string, unknown>>
+    | undefined;
+  if (!existing?.[viewport]?.layout) return {};
+
+  const vpOverrides = { ...(existing[viewport] || {}) };
+  delete vpOverrides.layout;
+
+  const responsive = { ...existing };
+  if (Object.keys(vpOverrides).length > 0) {
+    responsive[viewport] = vpOverrides;
+  } else {
+    delete responsive[viewport];
+  }
+
+  return {
+    responsive: Object.keys(responsive).length > 0 ? responsive : undefined,
+  } as unknown as Partial<ContentBlock>;
+}
+
+// ============================================
+// Block animation responsive helpers
+// ============================================
+// Block animation properties (enter_animation, hover_effect) are stored
+// at the block root level for desktop. Per-viewport overrides live in
+// block.responsive.tablet / block.responsive.phone (same level, not nested
+// under layout).
+
+type BlockAnimationProperty = "enter_animation" | "hover_effect";
+
+/** Get effective value for a block animation property, checking viewport overrides */
+export function getBlockAnimationValue<T>(
+  block: ContentBlock,
+  viewport: DeviceViewport,
+  property: BlockAnimationProperty,
+  fallback: T
+): T {
+  const base = (block as unknown as Record<string, unknown>)[property];
+
+  if (viewport === "desktop") {
+    return (base !== undefined ? base : fallback) as T;
+  }
+
+  const responsive = (block as unknown as Record<string, unknown>).responsive as
+    | Record<string, Record<string, unknown>>
+    | undefined;
+  const vpOverride = responsive?.[viewport]?.[property];
+  if (vpOverride !== undefined) return vpOverride as T;
+
+  return (base !== undefined ? base : fallback) as T;
+}
+
+/** Check if a block animation property has a responsive override */
+export function hasBlockAnimationOverride(
+  block: ContentBlock,
+  viewport: DeviceViewport,
+  property: BlockAnimationProperty
+): boolean {
+  if (viewport === "desktop") return false;
+  const responsive = (block as unknown as Record<string, unknown>).responsive as
+    | Record<string, Record<string, unknown>>
+    | undefined;
+  const vpData = responsive?.[viewport];
+  return vpData !== undefined && property in vpData;
+}
+
+/**
+ * Set a block animation responsive override. Returns updates for store.updateBlock().
+ *
+ * - Desktop: returns `{ [property]: value }`
+ * - Tablet/Phone: returns `{ responsive: { ..., [viewport]: { ..., [property]: value } } }`
+ */
+export function setBlockAnimationOverride(
+  block: ContentBlock,
+  viewport: DeviceViewport,
+  property: BlockAnimationProperty,
+  value: unknown
+): Partial<ContentBlock> {
+  if (viewport === "desktop") {
+    return { [property]: value } as Partial<ContentBlock>;
+  }
+
+  const existing = (block as unknown as Record<string, unknown>).responsive as
+    | Record<string, Record<string, unknown>>
+    | undefined || {};
+  const vpOverrides = { ...(existing[viewport] || {}), [property]: value };
+
+  // Remove the field if value is undefined (reset to inherit)
+  if (value === undefined) {
+    delete vpOverrides[property];
+  }
+
+  // Clean up empty viewport object
+  const responsive = { ...existing };
+  if (Object.keys(vpOverrides).length > 0) {
+    responsive[viewport] = vpOverrides;
+  } else {
+    delete responsive[viewport];
+  }
+
+  return {
+    responsive: Object.keys(responsive).length > 0 ? responsive : undefined,
+  } as unknown as Partial<ContentBlock>;
+}
+
+// ============================================
+// V2 Section responsive helpers
+// ============================================
+// V2 sections store responsive overrides at two levels:
+// 1. Section settings (col_gap, row_gap, spacing, border, etc.)
+//    → section.responsive[viewport].settings
+// 2. Column position/span overrides
+//    → section.responsive[viewport].columns[]
+//
+// On desktop, edits go to the base section.settings / column properties.
+// On tablet/phone, edits write to the responsive overrides.
+
+import type { PageSectionV2, SectionV2Settings, SectionV2SettingsOverridable, ColumnOverride, SectionColumn } from "../../../lib/sanity/types";
+
+/**
+ * Get the effective value for a V2 section setting, checking viewport overrides.
+ */
+export function getSectionV2SettingValue<T>(
+  section: PageSectionV2,
+  viewport: DeviceViewport,
+  property: keyof SectionV2SettingsOverridable,
+  fallback: T
+): T {
+  if (viewport !== "desktop") {
+    const vp = viewport as "tablet" | "phone";
+    const vpSettings = section.responsive?.[vp]?.settings;
+    if (vpSettings && property in vpSettings) {
+      return (vpSettings as Record<string, unknown>)[property] as T;
+    }
+  }
+  const val = (section.settings as unknown as Record<string, unknown>)[property];
+  return (val !== undefined ? val : fallback) as T;
+}
+
+/**
+ * Check if a V2 section setting has a responsive override for the given viewport.
+ */
+export function hasSectionV2SettingOverride(
+  section: PageSectionV2,
+  viewport: DeviceViewport,
+  property: keyof SectionV2SettingsOverridable
+): boolean {
+  if (viewport === "desktop") return false;
+  const vp = viewport as "tablet" | "phone";
+  const vpSettings = section.responsive?.[vp]?.settings;
+  return vpSettings !== undefined && property in vpSettings;
+}
+
+/**
+ * Build the updated responsive object after setting a V2 section setting override.
+ * Desktop writes to settings directly (returns null — caller should use updateSectionV2Settings).
+ * Tablet/Phone writes to responsive overrides.
+ */
+export function buildSectionV2SettingOverride(
+  section: PageSectionV2,
+  viewport: DeviceViewport,
+  property: keyof SectionV2SettingsOverridable,
+  value: unknown
+): PageSectionV2["responsive"] | null {
+  if (viewport === "desktop") return null; // Caller uses updateSectionV2Settings directly
+
+  const existing = section.responsive || {};
+  const vp = viewport as "tablet" | "phone";
+  const vpSettings = { ...(existing[vp]?.settings || {}), [property]: value } as Record<string, unknown>;
+
+  if (value === undefined) delete vpSettings[property];
+
+  const vpOverride = {
+    ...(existing[vp] || {}),
+    settings: Object.keys(vpSettings).length ? vpSettings : undefined,
+  } as NonNullable<PageSectionV2["responsive"]>[typeof vp];
+
+  // Clean up viewport override if empty
+  const hasColumns = Array.isArray((existing[vp] as Record<string, unknown>)?.columns) &&
+    ((existing[vp] as Record<string, unknown>)?.columns as unknown[]).length > 0;
+  if (!vpOverride!.settings && !hasColumns) {
+    const responsive = { ...existing };
+    delete responsive[vp];
+    return Object.keys(responsive).length ? responsive : undefined;
+  }
+
+  const responsive = { ...existing, [vp]: vpOverride };
+  return Object.keys(responsive).length ? responsive : undefined;
+}
+
+// ============================================
+// V2 Column position/span responsive helpers
+// ============================================
+
+/**
+ * Get effective column position/span for a V2 column, checking viewport overrides.
+ * Returns the override value if set, otherwise the base column value.
+ */
+export function getColumnV2Override(
+  section: PageSectionV2,
+  columnKey: string,
+  viewport: DeviceViewport,
+  property: "grid_column" | "grid_row" | "span"
+): number | undefined {
+  if (viewport === "desktop") return undefined;
+  const vp = viewport as "tablet" | "phone";
+  const colOverride = section.responsive?.[vp]?.columns?.find((c) => c._key === columnKey);
+  return colOverride?.[property];
+}
+
+/**
+ * Get all effective column positions for a V2 section at a given viewport.
+ * Merges responsive overrides on top of base column positions.
+ */
+export function getEffectiveColumnsV2(
+  section: PageSectionV2,
+  viewport: DeviceViewport
+): Array<{ _key: string; grid_column: number; grid_row: number; span: number }> {
+  if (viewport === "desktop") {
+    return section.columns.map((c) => ({
+      _key: c._key,
+      grid_column: c.grid_column,
+      grid_row: c.grid_row,
+      span: c.span,
+    }));
+  }
+
+  const vp = viewport as "tablet" | "phone";
+  const overrides = section.responsive?.[vp]?.columns || [];
+  const overrideMap = new Map(overrides.map((o) => [o._key, o]));
+
+  return section.columns.map((c) => {
+    const override = overrideMap.get(c._key);
+    return {
+      _key: c._key,
+      grid_column: override?.grid_column ?? c.grid_column,
+      grid_row: override?.grid_row ?? c.grid_row,
+      span: override?.span ?? c.span,
+    };
+  });
+}
+
+/**
+ * Check if any column has responsive overrides for a given viewport.
+ */
+export function hasAnyColumnV2Overrides(
+  section: PageSectionV2,
+  viewport: DeviceViewport
+): boolean {
+  if (viewport === "desktop") return false;
+  const vp = viewport as "tablet" | "phone";
+  const overrides = section.responsive?.[vp]?.columns;
+  return Array.isArray(overrides) && overrides.length > 0;
+}
+
+/**
+ * Check if any settings have overrides for a given viewport.
+ */
+export function hasAnySectionV2SettingOverrides(
+  section: PageSectionV2,
+  viewport: DeviceViewport
+): boolean {
+  if (viewport === "desktop") return false;
+  const vp = viewport as "tablet" | "phone";
+  const settings = section.responsive?.[vp]?.settings;
+  return settings !== undefined && Object.keys(settings).length > 0;
+}
+
+/**
+ * Build a "stack" layout override — all columns get full width, sequential rows.
+ * Used for one-click mobile stacking.
+ */
+export function buildStackOverride(
+  section: PageSectionV2
+): ColumnOverride[] {
+  const gridColumns = section.settings.grid_columns || 12;
+  return section.columns.map((col, index) => ({
+    _key: col._key,
+    grid_column: 1,
+    grid_row: index + 1,
+    span: gridColumns,
+  }));
+}
+
+/**
+ * Build the updated responsive object after setting column overrides for a viewport.
+ * Merges with existing settings overrides to preserve them.
+ */
+export function buildColumnV2Overrides(
+  section: PageSectionV2,
+  viewport: DeviceViewport,
+  columnOverrides: ColumnOverride[] | undefined
+): PageSectionV2["responsive"] | undefined {
+  if (viewport === "desktop") return section.responsive;
+
+  const existing = section.responsive || {};
+  const vp = viewport as "tablet" | "phone";
+
+  const vpOverride = {
+    ...(existing[vp] || {}),
+    columns: columnOverrides && columnOverrides.length > 0 ? columnOverrides : undefined,
+  } as NonNullable<PageSectionV2["responsive"]>[typeof vp];
+
+  // Clean up if both columns and settings are empty
+  if (!vpOverride!.columns?.length && !vpOverride!.settings) {
+    const responsive = { ...existing };
+    delete responsive[vp];
+    return Object.keys(responsive).length ? responsive : undefined;
+  }
+
+  const responsive = { ...existing, [vp]: vpOverride };
+  return Object.keys(responsive).length ? responsive : undefined;
+}
+
+/**
+ * Build a single-column position override within existing overrides.
+ * Updates one column's grid_column, grid_row, or span without affecting others.
+ */
+export function buildSingleColumnV2Override(
+  section: PageSectionV2,
+  viewport: DeviceViewport,
+  columnKey: string,
+  updates: Partial<Pick<ColumnOverride, "grid_column" | "grid_row" | "span">>
+): PageSectionV2["responsive"] | undefined {
+  if (viewport === "desktop") return section.responsive;
+
+  const vp = viewport as "tablet" | "phone";
+  const existingOverrides = section.responsive?.[vp]?.columns || [];
+
+  // Find existing override for this column or create a new one
+  const overrideIndex = existingOverrides.findIndex((o) => o._key === columnKey);
+  const existingColOverride = overrideIndex >= 0 ? existingOverrides[overrideIndex] : { _key: columnKey };
+
+  const updatedColOverride: ColumnOverride = {
+    ...existingColOverride,
+    ...updates,
+  };
+
+  // Check if the override is actually different from base
+  const baseCol = section.columns.find((c) => c._key === columnKey);
+  const isIdenticalToBase = baseCol &&
+    (updatedColOverride.grid_column === undefined || updatedColOverride.grid_column === baseCol.grid_column) &&
+    (updatedColOverride.grid_row === undefined || updatedColOverride.grid_row === baseCol.grid_row) &&
+    (updatedColOverride.span === undefined || updatedColOverride.span === baseCol.span);
+
+  let updatedOverrides: ColumnOverride[];
+  if (isIdenticalToBase) {
+    // Remove this column's override if it matches the base
+    updatedOverrides = existingOverrides.filter((o) => o._key !== columnKey);
+  } else if (overrideIndex >= 0) {
+    updatedOverrides = [...existingOverrides];
+    updatedOverrides[overrideIndex] = updatedColOverride;
+  } else {
+    updatedOverrides = [...existingOverrides, updatedColOverride];
+  }
+
+  return buildColumnV2Overrides(section, viewport, updatedOverrides);
+}

package/components/ui/CustomCursor.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import { useState, useEffect, useCallback, useRef } from "react";
+
+export default function CustomCursor() {
+  const [position, setPosition] = useState({ x: -100, y: -100 });
+  const [isHovering, setIsHovering] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+  const [isMobile, setIsMobile] = useState(true);
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+  const rafId = useRef<number>(0);
+
+  // Check if device supports hover (desktop)
+  useEffect(() => {
+    const mql = window.matchMedia("(hover: hover) and (pointer: fine)");
+    setIsMobile(!mql.matches);
+
+    const handler = (e: MediaQueryListEvent) => setIsMobile(!e.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, []);
+
+  // Respect prefers-reduced-motion — disable custom cursor entirely
+  useEffect(() => {
+    const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setPrefersReducedMotion(mql.matches);
+
+    const handler = (e: MediaQueryListEvent) => setPrefersReducedMotion(e.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, []);
+
+  const handleMouseMove = useCallback((e: MouseEvent) => {
+    if (rafId.current) cancelAnimationFrame(rafId.current);
+    rafId.current = requestAnimationFrame(() => {
+      setPosition({ x: e.clientX, y: e.clientY });
+      setIsVisible(true);
+    });
+  }, []);
+
+  const handleMouseLeave = useCallback(() => {
+    setIsVisible(false);
+  }, []);
+
+  // Track hover state on interactive elements
+  useEffect(() => {
+    if (isMobile) return;
+
+    const handleMouseOver = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      if (
+        target.closest("a, button, [role='button'], input, textarea, select, [data-cursor-hover]")
+      ) {
+        setIsHovering(true);
+      }
+    };
+
+    const handleMouseOut = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      if (
+        target.closest("a, button, [role='button'], input, textarea, select, [data-cursor-hover]")
+      ) {
+        setIsHovering(false);
+      }
+    };
+
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseleave", handleMouseLeave);
+    document.addEventListener("mouseover", handleMouseOver);
+    document.addEventListener("mouseout", handleMouseOut);
+
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseleave", handleMouseLeave);
+      document.removeEventListener("mouseover", handleMouseOver);
+      document.removeEventListener("mouseout", handleMouseOut);
+      if (rafId.current) cancelAnimationFrame(rafId.current);
+    };
+  }, [isMobile, handleMouseMove, handleMouseLeave]);
+
+  // Don't render on mobile/touch devices or when reduced motion is preferred
+  if (isMobile || prefersReducedMotion) return null;
+
+  const size = isHovering ? 38 : 20;
+  const innerSize = isHovering ? 10 : 4;
+
+  return (
+    <div
+      className="pointer-events-none fixed inset-0 z-[9999]"
+      aria-hidden="true"
+    >
+      {/* Outer circle — primary brand color */}
+      <div
+        className="absolute rounded-full border-[1.5px] border-brand-primary"
+        style={{
+          width: size,
+          height: size,
+          left: position.x - size / 2,
+          top: position.y - size / 2,
+          opacity: isVisible ? 1 : 0,
+          transition: "width 0.2s ease, height 0.2s ease, opacity 0.15s ease",
+        }}
+      />
+      {/* Inner circle — secondary brand color */}
+      <div
+        className="absolute rounded-full bg-brand-secondary"
+        style={{
+          width: innerSize,
+          height: innerSize,
+          left: position.x - innerSize / 2,
+          top: position.y - innerSize / 2,
+          opacity: isVisible ? 1 : 0,
+          transition: "width 0.2s ease, height 0.2s ease, opacity 0.15s ease",
+        }}
+      />
+    </div>
+  );
+}