@oxyhq/bloom 0.1.4 → 0.1.6

package/src/context-menu/index.web.tsx

@@ -0,0 +1,363 @@
+/**
+ * ContextMenu — Web implementation
+ *
+ * Opens a positioned dropdown menu on right-click (contextmenu event).
+ * Uses Bloom's Portal for rendering the menu above other content.
+ */
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { Portal } from '../portal';
+import { useInteractionState } from '../hooks/useInteractionState';
+import { ItemCtx, useItemContext } from './context';
+import type {
+  ContextMenuContextValue,
+  GroupProps,
+  ItemContextValue,
+  ItemIconProps,
+  ItemProps,
+  ItemTextProps,
+  OuterProps,
+  TriggerProps,
+} from './types';
+
+// ---------------------------------------------------------------------------
+// Web-specific context (extends base with position)
+// ---------------------------------------------------------------------------
+
+type Position = { x: number; y: number };
+
+type WebContextMenuContextValue = ContextMenuContextValue & {
+  position: Position | null;
+};
+
+const WebContextMenuContext = createContext<WebContextMenuContextValue | null>(null);
+WebContextMenuContext.displayName = 'WebContextMenuContext';
+
+function useWebContextMenuContext(): WebContextMenuContextValue {
+  const ctx = useContext(WebContextMenuContext);
+  if (!ctx) {
+    throw new Error(
+      'ContextMenu components must be used within a ContextMenu.Root',
+    );
+  }
+  return ctx;
+}
+
+// ---------------------------------------------------------------------------
+// Root
+// ---------------------------------------------------------------------------
+
+export function Root({ children }: { children: React.ReactNode }) {
+  const [position, setPosition] = useState<Position | null>(null);
+  const isOpen = position !== null;
+
+  const ctx = useMemo<WebContextMenuContextValue>(
+    () => ({
+      isOpen,
+      position,
+      open: () => {
+        /* open is handled by the Trigger's contextmenu event */
+      },
+      close: () => setPosition(null),
+    }),
+    [isOpen, position],
+  );
+
+  /**
+   * We store the setPosition in a ref so the Trigger can call it
+   * without needing a stable identity on `open`.
+   */
+  return (
+    <WebContextMenuContext.Provider value={ctx}>
+      <SetPositionContext.Provider value={setPosition}>
+        {children}
+      </SetPositionContext.Provider>
+    </WebContextMenuContext.Provider>
+  );
+}
+
+const SetPositionContext = createContext<
+  React.Dispatch<React.SetStateAction<Position | null>>
+>(() => {});
+SetPositionContext.displayName = 'ContextMenuSetPositionContext';
+
+// ---------------------------------------------------------------------------
+// Trigger
+// ---------------------------------------------------------------------------
+
+export function Trigger({ children, label, hint, style }: TriggerProps) {
+  const ctx = useWebContextMenuContext();
+  const setPosition = useContext(SetPositionContext);
+  const triggerRef = useRef<View>(null);
+
+  const handleContextMenu = useCallback(
+    (e: MouseEvent) => {
+      e.preventDefault();
+      setPosition({ x: e.clientX, y: e.clientY });
+    },
+    [setPosition],
+  );
+
+  useEffect(() => {
+    const node = triggerRef.current;
+    if (!node) return;
+    // On web, View refs resolve to DOM elements
+    const element = node as unknown as HTMLElement;
+    element.addEventListener('contextmenu', handleContextMenu);
+    return () => {
+      element.removeEventListener('contextmenu', handleContextMenu);
+    };
+  }, [handleContextMenu]);
+
+  return (
+    <View ref={triggerRef} style={style}>
+      {children({
+        isOpen: ctx.isOpen,
+        state: {
+          hovered: false,
+          focused: false,
+          pressed: false,
+        },
+        props: {
+          onPress: null,
+          onLongPress: null,
+          onFocus: null,
+          onBlur: null,
+          accessibilityLabel: label,
+          accessibilityHint: hint ?? 'Right-click to open context menu',
+        },
+      })}
+    </View>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Outer
+// ---------------------------------------------------------------------------
+
+export function Outer({ children, style }: OuterProps) {
+  const ctx = useWebContextMenuContext();
+  const theme = useTheme();
+  const { isOpen, close, position } = ctx;
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        close();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, close]);
+
+  if (!isOpen || !position) return null;
+
+  return (
+    <Portal>
+      <Pressable
+        style={styles.backdrop}
+        onPress={close}
+        accessibilityLabel="Close context menu"
+      />
+      <View
+        style={[
+          styles.dropdown,
+          {
+            top: position.y,
+            left: position.x,
+            backgroundColor: theme.isDark
+              ? theme.colors.backgroundSecondary
+              : theme.colors.background,
+            borderColor: theme.colors.borderLight,
+            shadowColor: theme.colors.shadow,
+          },
+          style,
+        ]}
+      >
+        {children}
+      </View>
+    </Portal>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Item
+// ---------------------------------------------------------------------------
+
+export function Item({
+  children,
+  label,
+  onPress,
+  disabled = false,
+  style,
+}: ItemProps) {
+  const theme = useTheme();
+  const { close } = useWebContextMenuContext();
+  const {
+    state: hovered,
+    onIn: onMouseEnter,
+    onOut: onMouseLeave,
+  } = useInteractionState();
+  const { state: focused, onIn: onFocus, onOut: onBlur } = useInteractionState();
+
+  const isHighlighted = (hovered || focused) && !disabled;
+
+  const handlePress = useCallback(() => {
+    onPress();
+    close();
+  }, [onPress, close]);
+
+  const itemCtx = useMemo<ItemContextValue>(
+    () => ({ disabled }),
+    [disabled],
+  );
+
+  return (
+    <Pressable
+      accessibilityHint=""
+      accessibilityLabel={label}
+      disabled={disabled}
+      onPress={handlePress}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      {...({
+        onMouseEnter,
+        onMouseLeave,
+      } as Record<string, () => void>)}
+      style={[
+        styles.item,
+        isHighlighted && {
+          backgroundColor: theme.isDark
+            ? theme.colors.contrast50
+            : theme.colors.backgroundSecondary,
+        },
+        style,
+      ]}
+    >
+      <ItemCtx.Provider value={itemCtx}>{children}</ItemCtx.Provider>
+    </Pressable>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ItemText
+// ---------------------------------------------------------------------------
+
+export function ItemText({ children, style }: ItemTextProps) {
+  const theme = useTheme();
+  const { disabled } = useItemContext();
+
+  return (
+    <Text
+      numberOfLines={1}
+      ellipsizeMode="middle"
+      style={[
+        styles.itemText,
+        { color: disabled ? theme.colors.textTertiary : theme.colors.text },
+        ...(style ? [style] : []),
+      ]}
+    >
+      {children}
+    </Text>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ItemIcon
+// ---------------------------------------------------------------------------
+
+export function ItemIcon({ icon: Comp }: ItemIconProps) {
+  const theme = useTheme();
+  const { disabled } = useItemContext();
+
+  return (
+    <Comp
+      size="md"
+      fill={disabled ? theme.colors.textTertiary : theme.colors.textSecondary}
+    />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Group
+// ---------------------------------------------------------------------------
+
+export function Group({ children }: GroupProps) {
+  return <>{children}</>;
+}
+
+// ---------------------------------------------------------------------------
+// Divider
+// ---------------------------------------------------------------------------
+
+export function Divider() {
+  const theme = useTheme();
+
+  return (
+    <View
+      style={[
+        styles.divider,
+        { backgroundColor: theme.colors.borderLight },
+      ]}
+    />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const styles = StyleSheet.create({
+  backdrop: {
+    position: 'fixed' as 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 50,
+  },
+  dropdown: {
+    position: 'fixed' as 'absolute',
+    zIndex: 60,
+    borderRadius: 8,
+    padding: 4,
+    borderWidth: 1,
+    overflow: 'hidden',
+    shadowOpacity: 0.15,
+    shadowRadius: 12,
+    shadowOffset: { width: 0, height: 4 },
+    minWidth: 180,
+    maxWidth: 280,
+  },
+  item: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    paddingVertical: 8,
+    borderRadius: 6,
+    overflow: 'hidden',
+    paddingHorizontal: 10,
+    minHeight: 32,
+  },
+  itemText: {
+    flex: 1,
+    fontWeight: '600',
+  },
+  divider: {
+    height: 1,
+    marginVertical: 4,
+  },
+});

package/src/context-menu/types.ts

@@ -0,0 +1,68 @@
+import type {
+  AccessibilityRole,
+  GestureResponderEvent,
+  StyleProp,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
+
+import type { Props as SVGIconProps } from '../icons/common';
+
+export type ContextMenuContextValue = {
+  isOpen: boolean;
+  open: () => void;
+  close: () => void;
+};
+
+export type ItemContextValue = {
+  disabled: boolean;
+};
+
+export type TriggerProps = {
+  children: (props: TriggerChildProps) => React.ReactNode;
+  label: string;
+  /** Accessibility hint describing what long-pressing / right-clicking does. */
+  hint?: string;
+  role?: AccessibilityRole;
+  style?: StyleProp<ViewStyle>;
+};
+
+export type TriggerChildProps = {
+  isOpen: boolean;
+  state: {
+    hovered: boolean;
+    focused: boolean;
+    pressed: boolean;
+  };
+  props: {
+    onPress?: (() => void) | null;
+    onLongPress?: (() => void) | null;
+    onFocus?: (() => void) | null;
+    onBlur?: (() => void) | null;
+    accessibilityLabel: string;
+    accessibilityHint?: string;
+  };
+};
+
+export type OuterProps = React.PropsWithChildren<{
+  style?: StyleProp<ViewStyle>;
+}>;
+
+export type ItemProps = React.PropsWithChildren<{
+  label: string;
+  onPress: (e?: GestureResponderEvent) => void;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+}>;
+
+export type ItemTextProps = React.PropsWithChildren<{
+  style?: TextStyle;
+}>;
+
+export type ItemIconProps = {
+  icon: React.ComponentType<SVGIconProps>;
+};
+
+export type GroupProps = React.PropsWithChildren<{
+  style?: StyleProp<ViewStyle>;
+}>;

package/src/fill/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { StyleSheet, View, type ViewStyle } from 'react-native';
+
+export function Fill({
+  children,
+  style,
+}: {
+  children?: React.ReactNode;
+  style?: ViewStyle | ViewStyle[];
+}) {
+  return (
+    <View style={[fillStyles.base, style]}>
+      {children}
+    </View>
+  );
+}
+
+const fillStyles = StyleSheet.create({
+  base: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+  },
+});

package/src/grid/index.tsx

@@ -0,0 +1,58 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import { View, type ViewStyle } from 'react-native';
+
+const GridContext = createContext({ gap: 0 });
+GridContext.displayName = 'GridContext';
+
+export function Row({
+  children,
+  gap = 0,
+  style,
+}: {
+  children: React.ReactNode;
+  gap?: number;
+  style?: ViewStyle | ViewStyle[];
+}) {
+  return (
+    <GridContext.Provider value={useMemo(() => ({ gap }), [gap])}>
+      <View
+        style={[
+          {
+            flexDirection: 'row',
+            flex: 1,
+            marginLeft: -gap / 2,
+            marginRight: -gap / 2,
+          },
+          style,
+        ]}>
+        {children}
+      </View>
+    </GridContext.Provider>
+  );
+}
+
+export function Col({
+  children,
+  width = 1,
+  style,
+}: {
+  children: React.ReactNode;
+  width?: number;
+  style?: ViewStyle | ViewStyle[];
+}) {
+  const { gap } = useContext(GridContext);
+  return (
+    <View
+      style={[
+        {
+          flexDirection: 'column',
+          paddingLeft: gap / 2,
+          paddingRight: gap / 2,
+          width: `${width * 100}%` as unknown as number,
+        },
+        style,
+      ]}>
+      {children}
+    </View>
+  );
+}

package/src/hooks/index.ts

@@ -0,0 +1,4 @@
+export { useInteractionState } from './useInteractionState';
+export { useDelayedLoading } from './useDelayedLoading';
+export { useThrottledValue } from './useThrottledValue';
+export { mergeRefs } from './mergeRefs';

package/src/hooks/mergeRefs.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+
+/**
+ * Merges multiple React refs into a single callback ref.
+ */
+export function mergeRefs<T>(
+  refs: Array<React.Ref<T> | null | undefined>,
+): React.RefCallback<T> {
+  return (instance: T | null) => {
+    for (const ref of refs) {
+      if (typeof ref === 'function') {
+        ref(instance);
+      } else if (ref != null) {
+        (ref as React.MutableRefObject<T | null>).current = instance;
+      }
+    }
+  };
+}

package/src/hooks/useDelayedLoading.ts

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Returns true for the specified delay, then false.
+ * Useful for preventing loading spinner flash on fast loads.
+ */
+export function useDelayedLoading(delay: number, initialState: boolean = true) {
+  const [isLoading, setIsLoading] = useState(initialState);
+
+  useEffect(() => {
+    let timeout: ReturnType<typeof setTimeout>;
+    if (isLoading) timeout = setTimeout(() => setIsLoading(false), delay);
+
+    return () => timeout && clearTimeout(timeout);
+  }, [isLoading, delay]);
+
+  return isLoading;
+}

package/src/hooks/useInteractionState.ts

@@ -0,0 +1,14 @@
+import { useCallback, useState } from 'react';
+
+export function useInteractionState() {
+  const [state, setState] = useState(false);
+
+  const onIn = useCallback(() => {
+    setState(true);
+  }, []);
+  const onOut = useCallback(() => {
+    setState(false);
+  }, []);
+
+  return { state, onIn, onOut };
+}

package/src/hooks/useThrottledValue.ts

@@ -0,0 +1,34 @@
+import { useEffect, useRef, useState } from 'react';
+
+/**
+ * Returns a throttled version of the value that only updates at most once per `time` ms.
+ */
+export function useThrottledValue<T>(value: T, time: number) {
+  const [throttledValue, setThrottledValue] = useState(value);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (value === throttledValue) {
+      return;
+    }
+
+    if (timeoutRef.current !== null) {
+      // A timeout is already pending; it will pick up the latest value via closure.
+      return;
+    }
+
+    timeoutRef.current = setTimeout(() => {
+      timeoutRef.current = null;
+      setThrottledValue(value);
+    }, time);
+
+    return () => {
+      if (timeoutRef.current !== null) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+    };
+  }, [value, time, throttledValue]);
+
+  return throttledValue;
+}

package/src/icon-circle/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { View, type ViewStyle } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { type Props as IconProps } from '../icons/common';
+
+export function IconCircle({
+  icon: Icon,
+  size = 'xl',
+  style,
+  iconStyle,
+}: {
+  icon: React.ComponentType<IconProps>;
+  size?: IconProps['size'];
+  style?: ViewStyle | ViewStyle[];
+  iconStyle?: IconProps['style'];
+}) {
+  const { colors } = useTheme();
+
+  return (
+    <View
+      style={[
+        {
+          justifyContent: 'center',
+          alignItems: 'center',
+          borderRadius: 999,
+          width: size === 'lg' ? 52 : 64,
+          height: size === 'lg' ? 52 : 64,
+          backgroundColor: colors.primarySubtle,
+        },
+        style,
+      ]}>
+      <Icon size={size} style={[{ color: colors.primary }, iconStyle]} />
+    </View>
+  );
+}

package/src/icons/Accessibility.tsx

@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const Accessibility_Stroke2_Corner2_Rounded = createSinglePathSVG({
+  path: 'M4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0Zm8-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm0 7.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm-2.86.26.014.002c.944.125 1.893.238 2.846.238.95 0 1.904-.113 2.846-.238l.014-.002h.003a1 1 0 0 1 .273 1.98l-.006.002-.017.002c-.67.089-1.341.162-2.014.21.195 1.32.65 2.33 1.626 3.357a1 1 0 0 1-1.45 1.378 8.3 8.3 0 0 1-1.234-1.647 8.2 8.2 0 0 1-1.342 1.673 1 1 0 0 1-1.398-1.43c.673-.658 1.088-1.274 1.342-1.922.163-.42.269-.878.32-1.404a33 33 0 0 1-2.075-.215l-.017-.002-.006-.001a1 1 0 0 1 .271-1.982l.004.001Z',
+})

package/src/icons/Alien.tsx

@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const Alien_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M5 11a7 7 0 0 1 14 0c0 2.625-1.547 5.138-3.354 7.066a17.23 17.23 0 0 1-2.55 2.242 8.246 8.246 0 0 1-.924.577 2.904 2.904 0 0 1-.172.083 2.904 2.904 0 0 1-.172-.083 8.246 8.246 0 0 1-.923-.577 17.227 17.227 0 0 1-2.55-2.242C6.547 16.138 5 13.625 5 11Zm6.882 10.012Zm.232-.001h-.003a.047.047 0 0 0 .007.001l-.004-.001ZM12 2a9 9 0 0 0-9 9c0 3.375 1.953 6.362 3.895 8.434a19.216 19.216 0 0 0 2.856 2.508c.425.3.82.545 1.159.72.168.087.337.164.498.222.14.05.356.116.592.116s.451-.066.592-.116c.16-.058.33-.135.498-.222.339-.175.734-.42 1.159-.72.85-.6 1.87-1.457 2.856-2.508C19.047 17.362 21 14.375 21 11a9 9 0 0 0-9-9ZM7.38 9.927c2.774-.094 3.459 1.31 3.591 3.19a.89.89 0 0 1-.855.956c-2.774.094-3.458-1.31-3.59-3.19a.89.89 0 0 1 .854-.956Zm9.236 0c-2.774-.094-3.458 1.31-3.59 3.19a.89.89 0 0 0 .854.956c2.774.094 3.459-1.31 3.591-3.19a.89.89 0 0 0-.855-.956Z',
+})

package/src/icons/AndroidLogo.tsx

@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const AndroidLogo = createSinglePathSVG({
+  path: 'm15.604 2.47-.642 1.112a4.997 4.997 0 0 1 2.05 4.034H7.005c0-1.658.809-3.123 2.05-4.034L8.41 2.47a.313.313 0 0 1 .542-.313l.627 1.086a4.97 4.97 0 0 1 2.428-.63c.882 0 1.709.23 2.428.63l.627-1.085a.311.311 0 0 1 .426-.115c.151.087.202.278.115.428ZM9.506 5.114a.625.625 0 1 0 1.25 0 .625.625 0 0 0-1.25 0Zm3.753 0a.625.625 0 1 0 1.25 0 .625.625 0 0 0-1.25 0ZM3.878 8.866a1.251 1.251 0 0 1 2.501 0v5.004a1.252 1.252 0 0 1-2.501 0V8.866Zm13.759 0a1.251 1.251 0 0 1 2.501 0v5.004a1.251 1.251 0 0 1-2.501 0V8.866ZM7.005 17.622h1.25v3.128a1.251 1.251 0 0 0 2.502 0v-3.128h2.502v3.128a1.251 1.251 0 0 0 2.501 0v-3.128h1.25V8.241H7.006v9.381Z',
+})

package/src/icons/Apple.tsx

@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const Apple_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M8.148 2.034a1 1 0 0 1 1.35-.419c1.054.556 1.873 1.266 2.46 2.174.369.57.63 1.197.807 1.873 1.143-.349 2.194-.46 3.15-.342a5.122 5.122 0 0 1 3.134 1.556c1.564 1.63 2.086 4.183 1.922 6.58-.166 2.414-1.043 4.938-2.607 6.619-.792.851-1.78 1.505-2.95 1.782-1.063.251-2.213.176-3.415-.262-1.202.438-2.351.513-3.414.262-1.17-.277-2.158-.93-2.95-1.782-1.563-1.682-2.44-4.205-2.606-6.62-.164-2.396.358-4.949 1.921-6.579A5.121 5.121 0 0 1 8.085 5.32c.777-.095 1.617-.04 2.518.172a4.011 4.011 0 0 0-.325-.618c-.372-.576-.912-1.068-1.712-1.49a1 1 0 0 1-.418-1.35Zm.897 17.877c.71.167 1.557.117 2.562-.31a1 1 0 0 1 .784 0c1.005.428 1.853.477 2.563.31.715-.17 1.37-.579 1.946-1.198 1.171-1.26 1.932-3.303 2.076-5.394.144-2.109-.353-3.998-1.37-5.059a3.124 3.124 0 0 0-1.936-.955c-.83-.102-1.912.043-3.282.621a1 1 0 0 1-.778 0c-1.37-.578-2.45-.723-3.281-.62-.815.1-1.445.443-1.935.954-1.017 1.06-1.514 2.95-1.37 5.059.144 2.09.905 4.135 2.076 5.394.575.62 1.23 1.029 1.945 1.198Z',
+})

package/src/icons/AppleLogo.tsx

@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const AppleLogo = createSinglePathSVG({
+  path: 'M14.57 4.348c.65-.775 1.11-1.85 1.11-2.926 0-.149-.013-.3-.04-.422-1.057.04-2.314.708-3.072 1.592-.595.68-1.15 1.756-1.15 2.846 0 .164.027.327.04.38.066.012.175.027.283.027.948 0 2.14-.638 2.83-1.497Zm4.835 3.847.052-.035c-1.407-2.03-3.546-2.084-4.14-2.084-.911 0-1.726.325-2.411.598-.497.198-.925.368-1.271.368-.383 0-.822-.178-1.311-.377-.618-.25-1.317-.534-2.087-.534C5.64 6.13 3 8.296 3 12.379c0 2.545.975 5.227 2.182 6.954C6.224 20.803 7.13 22 8.43 22c.616 0 1.068-.193 1.543-.395.526-.225 1.082-.462 1.922-.462.849 0 1.356.223 1.845.437.455.2.895.393 1.58.393 1.42 0 2.353-1.292 3.246-2.586 1.003-1.47 1.422-2.913 1.435-2.98-.081-.027-2.802-1.13-2.802-4.246 0-2.51 1.855-3.734 2.207-3.966Z',
+})