polen 0.10.0-next.12 → 0.10.0-next.13

package/src/lib/graphql-document/hooks/use-tooltip-state.ts

@@ -0,0 +1,191 @@
+/**
+ * State management for GraphQL document tooltips
+ *
+ * Handles hover delays, pinning, and multiple tooltip coordination
+ */
+
+import { React } from '#dep/react/index'
+
+export interface TooltipState {
+  /** Currently visible tooltip (via hover) */
+  hoveredId: string | null
+  /** Set of pinned tooltip IDs */
+  pinnedIds: Set<string>
+  /** ID pending show (waiting for delay) */
+  pendingShowId: string | null
+  /** ID pending hide (waiting for grace period) */
+  pendingHideId: string | null
+}
+
+export interface UseTooltipStateOptions {
+  /** Delay before showing tooltip on hover (ms) */
+  showDelay?: number
+  /** Delay before hiding tooltip on mouse leave (ms) */
+  hideDelay?: number
+  /** Whether to allow multiple pinned tooltips */
+  allowMultiplePins?: boolean
+}
+
+export interface UseTooltipStateReturn {
+  /** Check if a tooltip should be visible */
+  isOpen: (id: string) => boolean
+  /** Check if a tooltip is pinned */
+  isPinned: (id: string) => boolean
+  /** Handle hover start */
+  onHoverStart: (id: string) => void
+  /** Handle hover end */
+  onHoverEnd: (id: string) => void
+  /** Handle click (toggle pin) */
+  onTogglePin: (id: string) => void
+  /** Handle tooltip content hover (cancels hide) */
+  onTooltipHover: (id: string) => void
+  /** Unpin a specific tooltip */
+  unpin: (id: string) => void
+  /** Unpin all tooltips */
+  unpinAll: () => void
+}
+
+export const useTooltipState = (options: UseTooltipStateOptions = {}): UseTooltipStateReturn => {
+  const {
+    showDelay = 300,
+    hideDelay = 200,
+    allowMultiplePins = true,
+  } = options
+
+  const [hoveredId, setHoveredId] = React.useState<string | null>(null)
+  const [pinnedIds, setPinnedIds] = React.useState<Set<string>>(new Set())
+  const [pendingShowId, setPendingShowId] = React.useState<string | null>(null)
+  const [pendingHideId, setPendingHideId] = React.useState<string | null>(null)
+
+  // Timer refs
+  const showTimerRef = React.useRef<NodeJS.Timeout | null>(null)
+  const hideTimerRef = React.useRef<NodeJS.Timeout | null>(null)
+
+  // Clear any pending timers
+  const clearTimers = React.useCallback(() => {
+    if (showTimerRef.current) {
+      clearTimeout(showTimerRef.current)
+      showTimerRef.current = null
+    }
+    if (hideTimerRef.current) {
+      clearTimeout(hideTimerRef.current)
+      hideTimerRef.current = null
+    }
+    setPendingShowId(null)
+    setPendingHideId(null)
+  }, [])
+
+  // Check if tooltip should be visible
+  const isOpen = React.useCallback((id: string): boolean => {
+    return hoveredId === id || pinnedIds.has(id)
+  }, [hoveredId, pinnedIds])
+
+  // Check if tooltip is pinned
+  const isPinned = React.useCallback((id: string): boolean => {
+    return pinnedIds.has(id)
+  }, [pinnedIds])
+
+  // Handle hover start
+  const onHoverStart = React.useCallback((id: string) => {
+    // Don't show if already pinned
+    if (pinnedIds.has(id)) return
+
+    // Cancel any pending hide for this ID
+    if (pendingHideId === id) {
+      clearTimeout(hideTimerRef.current!)
+      hideTimerRef.current = null
+      setPendingHideId(null)
+      return
+    }
+
+    // Clear any other pending operations
+    clearTimers()
+
+    // Schedule show
+    setPendingShowId(id)
+    showTimerRef.current = setTimeout(() => {
+      setHoveredId(id)
+      setPendingShowId(null)
+    }, showDelay)
+  }, [pinnedIds, pendingHideId, clearTimers, showDelay])
+
+  // Handle hover end
+  const onHoverEnd = React.useCallback((id: string) => {
+    // Don't hide if pinned
+    if (pinnedIds.has(id)) return
+
+    // Cancel pending show if still waiting
+    if (pendingShowId === id) {
+      clearTimeout(showTimerRef.current!)
+      showTimerRef.current = null
+      setPendingShowId(null)
+      return
+    }
+
+    // Only hide if currently showing this tooltip
+    if (hoveredId === id) {
+      setPendingHideId(id)
+      hideTimerRef.current = setTimeout(() => {
+        // First set hovered to null to trigger close animation
+        setHoveredId(null)
+        setPendingHideId(null)
+      }, hideDelay)
+    }
+  }, [pinnedIds, pendingShowId, hoveredId, hideDelay])
+
+  // Handle tooltip content hover (cancels hide)
+  const onTooltipHover = React.useCallback((id: string) => {
+    if (pendingHideId === id) {
+      clearTimeout(hideTimerRef.current!)
+      hideTimerRef.current = null
+      setPendingHideId(null)
+    }
+  }, [pendingHideId])
+
+  // Toggle pin state
+  const onTogglePin = React.useCallback((id: string) => {
+    clearTimers()
+
+    setPinnedIds((prev: Set<string>) => {
+      const next = new Set(prev)
+      if (next.has(id)) {
+        // Unpin
+        next.delete(id)
+        setHoveredId(null) // Also clear hover state
+      } else {
+        // Pin
+        if (!allowMultiplePins) {
+          next.clear() // Clear other pins
+        }
+        next.add(id)
+        setHoveredId(null) // Clear hover state since it's now pinned
+      }
+      return next
+    })
+  }, [clearTimers, allowMultiplePins])
+
+  // Unpin specific tooltip
+  const unpin = React.useCallback((id: string) => {
+    setPinnedIds((prev: Set<string>) => {
+      const next = new Set(prev)
+      next.delete(id)
+      return next
+    })
+  }, [])
+
+  // Unpin all tooltips
+  const unpinAll = React.useCallback(() => {
+    setPinnedIds(new Set())
+  }, [])
+
+  return {
+    isOpen,
+    isPinned,
+    onHoverStart,
+    onHoverEnd,
+    onTogglePin,
+    onTooltipHover,
+    unpin,
+    unpinAll,
+  }
+}

package/build/lib/graphql-document/components/HoverTooltip.d.ts

@@ -1,35 +0,0 @@
-import type { React } from '#dep/react/index';
-import type { DOMPosition } from '../positioning-simple.ts';
-import type { Documentation } from '../schema-integration.ts';
-import type { Identifier } from '../types.ts';
-/**
- * Props for the HoverTooltip component
- */
-export interface HoverTooltipProps {
-    /** The identifier being hovered */
-    identifier: Identifier;
-    /** Documentation from schema */
-    documentation: Documentation;
-    /** Position of the identifier */
-    position: DOMPosition;
-    /** Whether this identifier has an error */
-    hasError?: boolean;
-    /** Reference URL for "View docs" link */
-    referenceUrl: string;
-    /** Callback to close the tooltip */
-    onClose?: () => void;
-    /** Callback to navigate to docs */
-    onNavigate?: () => void;
-}
-/**
- * Tooltip shown on hover over GraphQL identifiers
- *
- * Displays type information, descriptions, deprecation warnings,
- * and links to full documentation.
- */
-export declare const HoverTooltip: React.FC<HoverTooltipProps>;
-/**
- * Default styles for hover tooltips
- */
-export declare const hoverTooltipStyles = "\n.graphql-hover-tooltip {\n  /* Tooltip animation */\n  animation: graphql-tooltip-fade-in 0.2s ease-out;\n}\n\n@keyframes graphql-tooltip-fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Ensure tooltips appear above other content */\n.graphql-hover-tooltip .rt-Card {\n  box-shadow: 0 10px 38px -10px rgba(22, 23, 24, 0.35), \n              0 10px 20px -15px rgba(22, 23, 24, 0.2);\n}\n";
-//# sourceMappingURL=HoverTooltip.d.ts.map

package/build/lib/graphql-document/components/HoverTooltip.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"HoverTooltip.d.ts","sourceRoot":"","sources":["../../../../src/lib/graphql-document/components/HoverTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAA;AAG7C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAC7D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAE7C;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,mCAAmC;IACnC,UAAU,EAAE,UAAU,CAAA;IACtB,gCAAgC;IAChC,aAAa,EAAE,aAAa,CAAA;IAC5B,iCAAiC;IACjC,QAAQ,EAAE,WAAW,CAAA;IACrB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yCAAyC;IACzC,YAAY,EAAE,MAAM,CAAA;IACpB,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;CACxB;AAED;;;;;GAKG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA6NpD,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,yeAsB9B,CAAA"}

package/build/lib/graphql-document/components/HoverTooltip.js

@@ -1,132 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Badge, Box, Card, Flex, Text } from '@radix-ui/themes';
-import { useEffect, useRef, useState } from 'react';
-/**
- * Tooltip shown on hover over GraphQL identifiers
- *
- * Displays type information, descriptions, deprecation warnings,
- * and links to full documentation.
- */
-export const HoverTooltip = ({ identifier, documentation, position, hasError = false, referenceUrl, onClose, onNavigate, }) => {
-    const tooltipRef = useRef(null);
-    const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
-    // Calculate tooltip position to avoid viewport edges
-    useEffect(() => {
-        if (!tooltipRef.current)
-            return;
-        const tooltip = tooltipRef.current;
-        const rect = tooltip.getBoundingClientRect();
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-        // Default position: above the identifier
-        let top = position.top - rect.height - 8;
-        let left = position.left;
-        // Adjust if tooltip would go off screen
-        if (top < 0) {
-            // Show below if not enough space above
-            top = position.top + position.height + 8;
-        }
-        if (left + rect.width > viewportWidth) {
-            // Align right edge with identifier if too wide
-            left = position.left + position.width - rect.width;
-        }
-        if (left < 0) {
-            // Keep on screen
-            left = 8;
-        }
-        setTooltipPosition({ top, left });
-    }, [position]);
-    // Determine badge color based on identifier kind
-    const getBadgeColor = () => {
-        switch (identifier.kind) {
-            case 'Type':
-                return 'blue';
-            case 'Field':
-                return 'green';
-            case 'Argument':
-                return 'orange';
-            case 'Variable':
-                return 'purple';
-            case 'Directive':
-                return 'amber';
-            case 'Fragment':
-                return 'cyan';
-            default:
-                return 'gray';
-        }
-    };
-    return (_jsx("div", { ref: tooltipRef, className: 'graphql-hover-tooltip', style: {
-            position: 'absolute',
-            top: tooltipPosition.top,
-            left: tooltipPosition.left,
-            zIndex: 100,
-            maxWidth: '400px',
-            pointerEvents: 'auto', // Make tooltip interactive
-        }, children: _jsx(Card, { size: '2', variant: 'surface', children: _jsxs(Flex, { direction: 'column', gap: '2', children: [_jsxs(Flex, { justify: 'between', align: 'center', children: [_jsxs(Flex, { align: 'center', gap: '2', children: [_jsx(Text, { size: '2', weight: 'bold', children: identifier.name }), _jsx(Badge, { color: getBadgeColor(), size: '1', children: identifier.kind })] }), onClose && (_jsx("button", { onClick: onClose, style: {
-                                    background: 'none',
-                                    border: 'none',
-                                    cursor: 'pointer',
-                                    padding: '4px',
-                                    color: 'var(--gray-11)',
-                                    fontSize: '18px',
-                                    lineHeight: '1',
-                                    fontWeight: 'bold',
-                                    borderRadius: '4px',
-                                    transition: 'background-color 0.2s',
-                                }, onMouseEnter: (e) => {
-                                    e.currentTarget.style.backgroundColor = 'var(--gray-a3)';
-                                }, onMouseLeave: (e) => {
-                                    e.currentTarget.style.backgroundColor = 'transparent';
-                                }, "aria-label": 'Close tooltip', children: "\u00D7" }))] }), _jsx(Box, { children: _jsxs(Text, { size: '1', color: 'gray', children: ["Type: ", _jsx(Text, { as: 'span', size: '1', style: { fontFamily: 'monospace' }, children: documentation.typeInfo })] }) }), documentation.description && (_jsx(Box, { children: _jsx(Text, { size: '1', children: documentation.description }) })), documentation.defaultValue && (_jsx(Box, { children: _jsxs(Text, { size: '1', color: 'gray', children: ["Default:", ' ', _jsx(Text, { as: 'span', size: '1', style: { fontFamily: 'monospace' }, children: documentation.defaultValue })] }) })), documentation.deprecated && (_jsxs(Box, { style: {
-                            padding: '8px',
-                            backgroundColor: 'var(--amber-2)',
-                            borderRadius: '4px',
-                            border: '1px solid var(--amber-6)',
-                        }, children: [_jsxs(Text, { size: '1', color: 'amber', children: ["\u26A0\uFE0F Deprecated: ", documentation.deprecated.reason] }), documentation.deprecated.replacement && (_jsxs(Text, { size: '1', color: 'amber', children: ["Use ", documentation.deprecated.replacement, " instead."] }))] })), hasError && (_jsx(Box, { style: {
-                            padding: '8px',
-                            backgroundColor: 'var(--red-2)',
-                            borderRadius: '4px',
-                            border: '1px solid var(--red-6)',
-                        }, children: _jsxs(Text, { size: '1', color: 'red', children: ["\u274C ", identifier.kind, " not found in schema"] }) })), _jsx(Box, { children: _jsxs(Text, { size: '1', color: 'gray', children: ["Path: ", identifier.schemaPath.join(' → ')] }) }), onNavigate && (_jsx(Box, { children: _jsx(Text, { size: '1', children: _jsx("a", { href: referenceUrl, onClick: (e) => {
-                                    e.preventDefault();
-                                    onNavigate();
-                                    onClose?.();
-                                }, style: {
-                                    color: 'var(--accent-9)',
-                                    textDecoration: 'none',
-                                    borderBottom: '1px solid transparent',
-                                    transition: 'border-color 0.2s',
-                                    cursor: 'pointer',
-                                }, onMouseEnter: (e) => {
-                                    e.currentTarget.style.borderBottomColor = 'var(--accent-9)';
-                                }, onMouseLeave: (e) => {
-                                    e.currentTarget.style.borderBottomColor = 'transparent';
-                                }, children: "View full documentation \u2192" }) }) }))] }) }) }));
-};
-/**
- * Default styles for hover tooltips
- */
-export const hoverTooltipStyles = `
-.graphql-hover-tooltip {
-  /* Tooltip animation */
-  animation: graphql-tooltip-fade-in 0.2s ease-out;
-}
-
-@keyframes graphql-tooltip-fade-in {
-  from {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Ensure tooltips appear above other content */
-.graphql-hover-tooltip .rt-Card {
-  box-shadow: 0 10px 38px -10px rgba(22, 23, 24, 0.35), 
-              0 10px 20px -15px rgba(22, 23, 24, 0.2);
-}
-`;
-//# sourceMappingURL=HoverTooltip.js.map

package/build/lib/graphql-document/components/HoverTooltip.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"HoverTooltip.js","sourceRoot":"","sources":["../../../../src/lib/graphql-document/components/HoverTooltip.tsx"],"names":[],"mappings":"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"}

package/src/lib/graphql-document/components/HoverTooltip.tsx

@@ -1,282 +0,0 @@
-import type { React } from '#dep/react/index'
-import { Badge, Box, Card, Flex, Text } from '@radix-ui/themes'
-import { useEffect, useRef, useState } from 'react'
-import type { DOMPosition } from '../positioning-simple.ts'
-import type { Documentation } from '../schema-integration.ts'
-import type { Identifier } from '../types.ts'
-
-/**
- * Props for the HoverTooltip component
- */
-export interface HoverTooltipProps {
-  /** The identifier being hovered */
-  identifier: Identifier
-  /** Documentation from schema */
-  documentation: Documentation
-  /** Position of the identifier */
-  position: DOMPosition
-  /** Whether this identifier has an error */
-  hasError?: boolean
-  /** Reference URL for "View docs" link */
-  referenceUrl: string
-  /** Callback to close the tooltip */
-  onClose?: () => void
-  /** Callback to navigate to docs */
-  onNavigate?: () => void
-}
-
-/**
- * Tooltip shown on hover over GraphQL identifiers
- *
- * Displays type information, descriptions, deprecation warnings,
- * and links to full documentation.
- */
-export const HoverTooltip: React.FC<HoverTooltipProps> = ({
-  identifier,
-  documentation,
-  position,
-  hasError = false,
-  referenceUrl,
-  onClose,
-  onNavigate,
-}) => {
-  const tooltipRef = useRef<HTMLDivElement>(null)
-  const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 })
-
-  // Calculate tooltip position to avoid viewport edges
-  useEffect(() => {
-    if (!tooltipRef.current) return
-
-    const tooltip = tooltipRef.current
-    const rect = tooltip.getBoundingClientRect()
-    const viewportWidth = window.innerWidth
-    const viewportHeight = window.innerHeight
-
-    // Default position: above the identifier
-    let top = position.top - rect.height - 8
-    let left = position.left
-
-    // Adjust if tooltip would go off screen
-    if (top < 0) {
-      // Show below if not enough space above
-      top = position.top + position.height + 8
-    }
-
-    if (left + rect.width > viewportWidth) {
-      // Align right edge with identifier if too wide
-      left = position.left + position.width - rect.width
-    }
-
-    if (left < 0) {
-      // Keep on screen
-      left = 8
-    }
-
-    setTooltipPosition({ top, left })
-  }, [position])
-
-  // Determine badge color based on identifier kind
-  const getBadgeColor = () => {
-    switch (identifier.kind) {
-      case 'Type':
-        return 'blue'
-      case 'Field':
-        return 'green'
-      case 'Argument':
-        return 'orange'
-      case 'Variable':
-        return 'purple'
-      case 'Directive':
-        return 'amber'
-      case 'Fragment':
-        return 'cyan'
-      default:
-        return 'gray'
-    }
-  }
-
-  return (
-    <div
-      ref={tooltipRef}
-      className='graphql-hover-tooltip'
-      style={{
-        position: 'absolute',
-        top: tooltipPosition.top,
-        left: tooltipPosition.left,
-        zIndex: 100,
-        maxWidth: '400px',
-        pointerEvents: 'auto', // Make tooltip interactive
-      }}
-    >
-      <Card size='2' variant='surface'>
-        <Flex direction='column' gap='2'>
-          {/* Header with name, kind, and close button */}
-          <Flex justify='between' align='center'>
-            <Flex align='center' gap='2'>
-              <Text size='2' weight='bold'>
-                {identifier.name}
-              </Text>
-              <Badge color={getBadgeColor()} size='1'>
-                {identifier.kind}
-              </Badge>
-            </Flex>
-            {onClose && (
-              <button
-                onClick={onClose}
-                style={{
-                  background: 'none',
-                  border: 'none',
-                  cursor: 'pointer',
-                  padding: '4px',
-                  color: 'var(--gray-11)',
-                  fontSize: '18px',
-                  lineHeight: '1',
-                  fontWeight: 'bold',
-                  borderRadius: '4px',
-                  transition: 'background-color 0.2s',
-                }}
-                onMouseEnter={(e) => {
-                  e.currentTarget.style.backgroundColor = 'var(--gray-a3)'
-                }}
-                onMouseLeave={(e) => {
-                  e.currentTarget.style.backgroundColor = 'transparent'
-                }}
-                aria-label='Close tooltip'
-              >
-                ×
-              </button>
-            )}
-          </Flex>
-
-          {/* Type signature */}
-          <Box>
-            <Text size='1' color='gray'>
-              Type: <Text as='span' size='1' style={{ fontFamily: 'monospace' }}>{documentation.typeInfo}</Text>
-            </Text>
-          </Box>
-
-          {/* Description */}
-          {documentation.description && (
-            <Box>
-              <Text size='1'>
-                {documentation.description}
-              </Text>
-            </Box>
-          )}
-
-          {/* Default value for arguments */}
-          {documentation.defaultValue && (
-            <Box>
-              <Text size='1' color='gray'>
-                Default:{' '}
-                <Text as='span' size='1' style={{ fontFamily: 'monospace' }}>{documentation.defaultValue}</Text>
-              </Text>
-            </Box>
-          )}
-
-          {/* Deprecation warning */}
-          {documentation.deprecated && (
-            <Box
-              style={{
-                padding: '8px',
-                backgroundColor: 'var(--amber-2)',
-                borderRadius: '4px',
-                border: '1px solid var(--amber-6)',
-              }}
-            >
-              <Text size='1' color='amber'>
-                ⚠️ Deprecated: {documentation.deprecated.reason}
-              </Text>
-              {documentation.deprecated.replacement && (
-                <Text size='1' color='amber'>
-                  Use {documentation.deprecated.replacement} instead.
-                </Text>
-              )}
-            </Box>
-          )}
-
-          {/* Error message */}
-          {hasError && (
-            <Box
-              style={{
-                padding: '8px',
-                backgroundColor: 'var(--red-2)',
-                borderRadius: '4px',
-                border: '1px solid var(--red-6)',
-              }}
-            >
-              <Text size='1' color='red'>
-                ❌ {identifier.kind} not found in schema
-              </Text>
-            </Box>
-          )}
-
-          {/* Schema path */}
-          <Box>
-            <Text size='1' color='gray'>
-              Path: {identifier.schemaPath.join(' → ')}
-            </Text>
-          </Box>
-
-          {/* View docs link */}
-          {onNavigate && (
-            <Box>
-              <Text size='1'>
-                <a
-                  href={referenceUrl}
-                  onClick={(e) => {
-                    e.preventDefault()
-                    onNavigate()
-                    onClose?.()
-                  }}
-                  style={{
-                    color: 'var(--accent-9)',
-                    textDecoration: 'none',
-                    borderBottom: '1px solid transparent',
-                    transition: 'border-color 0.2s',
-                    cursor: 'pointer',
-                  }}
-                  onMouseEnter={(e) => {
-                    e.currentTarget.style.borderBottomColor = 'var(--accent-9)'
-                  }}
-                  onMouseLeave={(e) => {
-                    e.currentTarget.style.borderBottomColor = 'transparent'
-                  }}
-                >
-                  View full documentation →
-                </a>
-              </Text>
-            </Box>
-          )}
-        </Flex>
-      </Card>
-    </div>
-  )
-}
-
-/**
- * Default styles for hover tooltips
- */
-export const hoverTooltipStyles = `
-.graphql-hover-tooltip {
-  /* Tooltip animation */
-  animation: graphql-tooltip-fade-in 0.2s ease-out;
-}
-
-@keyframes graphql-tooltip-fade-in {
-  from {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Ensure tooltips appear above other content */
-.graphql-hover-tooltip .rt-Card {
-  box-shadow: 0 10px 38px -10px rgba(22, 23, 24, 0.35), 
-              0 10px 20px -15px rgba(22, 23, 24, 0.2);
-}
-`