@buoy-gg/shared-ui 7.0.40 → 7.0.42

package/lib/module/hooks/useFilterManager.js

@@ -1,132 +1 @@
-"use strict";
-
-import { useState, useCallback } from "react";
-/**
- * Custom hook for managing filter state and operations
- * 
- * This hook provides a complete interface for managing a set of string filters
- * with add, remove, toggle, and clear operations. It also manages UI state
- * for adding new filters through an input field.
- * 
- * @param initialFilters - Initial set of filters to start with
- * @returns Object containing filter state and management functions
- * 
- * @example
- * ```typescript
- * function FilterComponent() {
- *   const {
- *     filters,
- *     showAddInput,
- *     newFilter,
- *     addFilter,
- *     removeFilter,
- *     toggleFilter,
- *     clearFilters,
- *     setNewFilter,
- *     setShowAddInput,
- *     hasFilter
- *   } = useFilterManager(new Set(['initial-filter']));
- * 
- *   return (
- *     <div>
- *       {Array.from(filters).map(filter => (
- *         <FilterTag key={filter} onRemove={() => removeFilter(filter)}>
- *           {filter}
- *         </FilterTag>
- *       ))}
- *       <button onClick={() => addFilter('new-filter')}>Add Filter</button>
- *     </div>
- *   );
- * }
- * ```
- * 
- * @performance Uses Set for O(1) filter lookups and efficient deduplication
- * @performance All operations are memoized with useCallback for stable references
- */
-export function useFilterManager(initialFilters = new Set()) {
-  const [filters, setFilters] = useState(initialFilters);
-  const [showAddInput, setShowAddInput] = useState(false);
-  const [newFilter, setNewFilter] = useState("");
-
-  /**
-   * Add a new filter to the set
-   * 
-   * Trims whitespace and only adds non-empty strings. Automatically
-   * clears the new filter input and hides the add input UI.
-   * 
-   * @param filter - The filter string to add
-   */
-  const addFilter = useCallback(filter => {
-    const trimmedFilter = filter.trim();
-    if (trimmedFilter) {
-      setFilters(prev => new Set([...prev, trimmedFilter]));
-      setNewFilter("");
-      setShowAddInput(false);
-    }
-  }, []);
-
-  /**
-   * Remove a filter from the set
-   * 
-   * @param filter - The filter string to remove
-   */
-  const removeFilter = useCallback(filter => {
-    setFilters(prev => {
-      const next = new Set(prev);
-      next.delete(filter);
-      return next;
-    });
-  }, []);
-
-  /**
-   * Toggle a filter in the set (add if not present, remove if present)
-   * 
-   * @param filter - The filter string to toggle
-   */
-  const toggleFilter = useCallback(filter => {
-    setFilters(prev => {
-      const next = new Set(prev);
-      if (next.has(filter)) {
-        next.delete(filter);
-      } else {
-        next.add(filter);
-      }
-      return next;
-    });
-  }, []);
-
-  /**
-   * Clear all filters and reset UI state
-   * 
-   * Removes all filters from the set and resets the input UI state.
-   */
-  const clearFilters = useCallback(() => {
-    setFilters(new Set());
-    setNewFilter("");
-    setShowAddInput(false);
-  }, []);
-
-  /**
-   * Check if a filter exists in the set
-   * 
-   * @param filter - The filter string to check
-   * @returns True if the filter exists in the set
-   */
-  const hasFilter = useCallback(filter => {
-    return filters.has(filter);
-  }, [filters]);
-  return {
-    // State
-    filters,
-    showAddInput,
-    newFilter,
-    // Actions
-    setNewFilter,
-    setShowAddInput,
-    addFilter,
-    removeFilter,
-    toggleFilter,
-    clearFilters,
-    hasFilter
-  };
-}
+"use strict";import{useState as c,useCallback as n}from"react";export function useFilterManager(a=new Set){const[l,r]=c(a);const[d,o]=c(false);const[u,i]=c("");const F=n(e=>{const s=e.trim();if(s){r(t=>new Set([...t,s]));i("");o(false)}},[]);const w=n(e=>{r(s=>{const t=new Set(s);t.delete(e);return t})},[]);const S=n(e=>{r(s=>{const t=new Set(s);if(t.has(e)){t.delete(e)}else{t.add(e)}return t})},[]);const f=n(()=>{r(new Set);i("");o(false)},[]);const m=n(e=>{return l.has(e)},[l]);return{filters:l,showAddInput:d,newFilter:u,setNewFilter:i,setShowAddInput:o,addFilter:F,removeFilter:w,toggleFilter:S,clearFilters:f,hasFilter:m}}

package/lib/module/hooks/usePersistedState.js

@@ -1,102 +1 @@
-"use strict";
-
-import { useCallback, useEffect, useRef, useState } from "react";
-import { persistentStorage } from "../utils/persistentStorage.js";
-
-/**
- * Per-key cache so remounts (and multiple consumers of the same key) render
- * the last-known value immediately instead of flashing the default while the
- * async backend loads again.
- */
-const hydratedCache = new Map();
-
-/** The two calls a backend needs. `persistentStorage` and AsyncStorage both fit. */
-
-function defaultParse(raw) {
-  try {
-    return JSON.parse(raw);
-  } catch {
-    return undefined;
-  }
-}
-
-/**
- * `useState` persisted through `persistentStorage` (FileSystem → AsyncStorage
- * → memory). Replaces the load-then-`hasLoaded`-guard `useEffect` pattern
- * every tool used to hand-roll.
- *
- * Values are JSON-serialized by default; the default is returned until
- * hydration completes (subsequent mounts of the same key hydrate synchronously
- * from an in-memory cache). The third tuple element reports hydration so
- * callers can defer writes that must not clobber a not-yet-loaded value.
- *
- * ```tsx
- * const [tab, setTab, tabHydrated] = usePersistedState("@react_buoy_custom_flags_tab", "flags");
- *
- * // A Set, stored as an array:
- * const [pins, setPins] = usePersistedState(key, new Set<string>(), {
- *   parse: (raw) => new Set(JSON.parse(raw) as string[]),
- *   serialize: (set) => JSON.stringify([...set]),
- * });
- * ```
- */
-export function usePersistedState(key, defaultValue, options = {}) {
-  const [value, setValue] = useState(() => hydratedCache.has(key) ? hydratedCache.get(key) : defaultValue);
-  const [hydrated, setHydrated] = useState(() => hydratedCache.has(key));
-  const keyRef = useRef(key);
-  keyRef.current = key;
-  const optionsRef = useRef(options);
-  optionsRef.current = options;
-  useEffect(() => {
-    if (hydratedCache.has(key)) {
-      setValue(hydratedCache.get(key));
-      setHydrated(true);
-      return;
-    }
-    let cancelled = false;
-    const storage = optionsRef.current.storage ?? persistentStorage;
-    const parse = optionsRef.current.parse ?? defaultParse;
-    storage.getItem(key).then(raw => {
-      if (cancelled) return;
-      if (raw != null) {
-        let parsed;
-        try {
-          parsed = parse(raw);
-        } catch {
-          // Corrupt payload — fall back to the default and let the next
-          // write repair it.
-        }
-        if (parsed !== undefined) {
-          hydratedCache.set(key, parsed);
-          setValue(parsed);
-        }
-      }
-      setHydrated(true);
-    }).catch(() => {
-      if (!cancelled) setHydrated(true);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [key]);
-  const set = useCallback(next => {
-    setValue(prev => {
-      const resolved = typeof next === "function" ? next(prev) : next;
-      hydratedCache.set(keyRef.current, resolved);
-      const storage = optionsRef.current.storage ?? persistentStorage;
-      const serialize = optionsRef.current.serialize ?? JSON.stringify;
-      try {
-        storage.setItem(keyRef.current, serialize(resolved)).catch(() => {});
-      } catch {
-        // Unserializable value — keep it in memory, skip the write.
-      }
-      return resolved;
-    });
-  }, []);
-  return [value, set, hydrated];
-}
-
-/** Test seam: forget every hydrated value. */
-export function resetPersistedStateCache() {
-  hydratedCache.clear();
-}
+"use strict";import{useCallback as P,useEffect as R,useRef as l,useState as h}from"react";import{persistentStorage as p}from"../utils/persistentStorage";const e=new Map;function v(t){try{return JSON.parse(t)}catch{return void 0}}export function usePersistedState(t,g,d={}){const[m,u]=h(()=>e.has(t)?e.get(t):g);const[S,o]=h(()=>e.has(t));const i=l(t);i.current=t;const n=l(d);n.current=d;R(()=>{if(e.has(t)){u(e.get(t));o(true);return}let r=false;const f=n.current.storage??p;const c=n.current.parse??v;f.getItem(t).then(a=>{if(r)return;if(a!=null){let s;try{s=c(a)}catch{}if(s!==void 0){e.set(t,s);u(s)}}o(true)}).catch(()=>{if(!r)o(true)});return()=>{r=true}},[t]);const C=P(r=>{u(f=>{const c=typeof r==="function"?r(f):r;e.set(i.current,c);const a=n.current.storage??p;const s=n.current.serialize??JSON.stringify;try{a.setItem(i.current,s(c)).catch(()=>{})}catch{}return c})},[]);return[m,C,S]}export function resetPersistedStateCache(){e.clear()}

package/lib/module/hooks/useSafeAreaInsets.js

@@ -1,245 +1 @@
-"use strict";
-
-import { useState, useEffect } from "react";
-import { Platform, Dimensions, StatusBar } from "react-native";
-import { useNativeSafeAreaInsets, hasSafeAreaPackage, safeAreaType } from "./safe-area-impl.js";
-
-// Types
-
-// Device detection map for iOS
-const iPhoneDimensionMap = {
-  // iPhone 14 Pro, 14 Pro Max, 15, 15 Plus, 15 Pro, 15 Pro Max, 16 series (Dynamic Island)
-  "393,852": {
-    top: 59,
-    bottom: 34
-  },
-  // 14 Pro, 15, 15 Pro, 16, 16 Pro
-  "430,932": {
-    top: 59,
-    bottom: 34
-  },
-  // 14 Pro Max, 15 Plus, 15 Pro Max, 16 Plus, 16 Pro Max
-
-  // iPhone 12, 12 Pro, 13, 13 Pro, 14
-  "390,844": {
-    top: 47,
-    bottom: 34
-  },
-  // iPhone 12 Pro Max, 13 Pro Max, 14 Plus
-  "428,926": {
-    top: 47,
-    bottom: 34
-  },
-  // iPhone 12 mini, 13 mini (newer value takes precedence)
-  "375,812": {
-    top: 50,
-    bottom: 34
-  },
-  // iPhone XR, 11
-  "414,896": {
-    top: 48,
-    bottom: 34
-  },
-  // iPhone 16 Pro / 17 Pro and the Max/Plus alongside them.
-  //
-  // Missing these was a silent no-op, not a cosmetic gap: an unmapped device
-  // falls through to the "older iPhone" default of `bottom: 0`, so every footer
-  // in the toolkit that pads itself by `insets.bottom` padded by nothing and sat
-  // on the home indicator. Found on an iPhone 17 Pro (402×874).
-  "402,874": {
-    top: 62,
-    bottom: 34
-  },
-  // 16 Pro, 17 Pro
-  "440,956": {
-    top: 62,
-    bottom: 34
-  } // 16 Pro Max, 17 Pro Max
-};
-
-/**
- * Pure JavaScript implementation for calculating safe area insets
- * Uses device dimensions mapping for iOS and platform APIs for Android
- *
- * @returns SafeAreaInsets object with top, bottom, left, right values
- *
- * @performance Optimized for iOS with dimension-based mapping table
- * Device recognition uses screen dimensions as lookup key
- */
-const getPureJSSafeAreaInsets = () => {
-  if (Platform.OS === "android") {
-    const androidVersion = Platform.Version;
-    const statusBarHeight = StatusBar.currentHeight || 0;
-
-    // Android 10+ with gesture navigation typically has bottom insets
-    const hasGestureNav = androidVersion >= 29;
-    return {
-      top: statusBarHeight,
-      bottom: hasGestureNav ? 20 : 0,
-      // Approximate gesture bar height
-      left: 0,
-      right: 0
-    };
-  }
-
-  // iOS
-  const {
-    width,
-    height
-  } = Dimensions.get("window");
-  const dimensionKey = `${width},${height}`;
-  const deviceInsets = iPhoneDimensionMap[dimensionKey];
-  if (deviceInsets) {
-    return {
-      ...deviceInsets,
-      left: 0,
-      right: 0
-    };
-  }
-
-  // Default for older iPhones without notch
-  return {
-    top: 20,
-    // Standard status bar
-    bottom: 0,
-    left: 0,
-    right: 0
-  };
-};
-
-// Note: Native safe area support is detected at install time by scripts/detect-safe-area.js
-// The useNativeSafeAreaInsets hook is imported from the generated safe-area-impl.ts file
-// This uses SafeAreaInsetsContext directly with useContext(), which returns null when
-// no SafeAreaProvider is present (instead of throwing an error like useSafeAreaInsets does)
-
-/**
- * Custom hook for accessing safe area insets with automatic fallback
- *
- * Provides safe area insets for proper UI positioning on devices with notches,
- * dynamic islands, and status bars. Automatically detects and uses the native
- * react-native-safe-area-context package when available, falling back to a
- * pure JavaScript implementation when not available.
- *
- * @param options - Configuration options for minimum inset values
- * @param options.minTop - Minimum top inset value (overrides calculated value if larger)
- * @param options.minBottom - Minimum bottom inset value (overrides calculated value if larger)
- * @param options.minLeft - Minimum left inset value (overrides calculated value if larger)
- * @param options.minRight - Minimum right inset value (overrides calculated value if larger)
- *
- * @returns SafeAreaInsets object with top, bottom, left, right pixel values
- *
- * @example
- * ```typescript
- * // Basic usage
- * const insets = useSafeAreaInsets();
- * const topPadding = insets.top;
- *
- * // With minimum values
- * const insets = useSafeAreaInsets({
- *   minTop: 20,
- *   minBottom: 10
- * });
- * ```
- *
- * @performance Uses pure JS fallback with device dimension mapping for iOS
- * @performance Automatically handles orientation changes with dimension listener
- * @performance Memoizes native package detection at module level
- */
-export const useSafeAreaInsets = (options = {}) => {
-  // Always call the native hook unconditionally (returns null if not available)
-  const nativeInsets = useNativeSafeAreaInsets();
-
-  // Fallback state for pure JS implementation
-  const [fallbackInsets, setFallbackInsets] = useState(() => getPureJSSafeAreaInsets());
-  useEffect(() => {
-    // Only set up orientation listener if using fallback
-    if (!nativeInsets) {
-      const updateInsets = () => {
-        setFallbackInsets(getPureJSSafeAreaInsets());
-      };
-      const subscription = Dimensions.addEventListener("change", updateInsets);
-      return () => {
-        subscription?.remove();
-      };
-    }
-  }, [nativeInsets]); // Dependency on nativeInsets
-
-  const baseInsets = nativeInsets || fallbackInsets;
-
-  // Apply minimum values - handles both 0 values and values less than minimum
-  const finalInsets = {
-    top: options.minTop !== undefined ? Math.max(baseInsets.top, options.minTop) : baseInsets.top,
-    bottom: options.minBottom !== undefined ? Math.max(baseInsets.bottom, options.minBottom) : baseInsets.bottom,
-    left: options.minLeft !== undefined ? Math.max(baseInsets.left, options.minLeft) : baseInsets.left,
-    right: options.minRight !== undefined ? Math.max(baseInsets.right, options.minRight) : baseInsets.right
-  };
-  return finalInsets;
-};
-
-/**
- * Utility function to detect if the current device has a notch or dynamic island
- *
- * @returns True if the device has a notch/dynamic island, false otherwise
- *
- * @example
- * ```typescript
- * if (hasNotch()) {
- *   // Apply special styling for notched devices
- *   console.log('Device has notch or dynamic island');
- * }
- * ```
- */
-export const hasNotch = () => {
-  const insets = getPureJSSafeAreaInsets();
-  if (Platform.OS === "android") {
-    // Android with tall status bar might have notch
-    return insets.top > 24;
-  }
-
-  // iOS with top inset > 20 has notch or dynamic island
-  return insets.top > 20;
-};
-
-/**
- * Configuration helper for safe area implementation management
- *
- * Provides utilities for checking native package availability,
- * forcing pure JS implementation, and getting implementation type info
- */
-export const SafeAreaConfig = {
-  /**
-   * Check if the native react-native-safe-area-context package is available
-   * This is detected at install time by scripts/detect-safe-area.js
-   *
-   * @returns True if native package is installed and available
-   */
-  hasNativeSupport: () => hasSafeAreaPackage,
-  /**
-   * Force pure JS implementation (useful for testing)
-   * Set to true to disable native package usage even when available
-   */
-  forcePureJS: false,
-  /**
-   * Get current implementation type being used
-   * Detected at install time by scripts/detect-safe-area.js
-   *
-   * @returns "native" if using react-native-safe-area-context, "pure-js" if using fallback
-   */
-  getImplementationType: () => {
-    if (SafeAreaConfig.forcePureJS) return "pure-js";
-    return safeAreaType;
-  }
-};
-
-/**
- * Export the pure JS implementation directly for compatibility
- *
- * @returns SafeAreaInsets calculated using pure JavaScript implementation
- *
- * @example
- * ```typescript
- * const insets = getSafeAreaInsets();
- * console.log(`Top inset: ${insets.top}px`);
- * ```
- */
-export const getSafeAreaInsets = getPureJSSafeAreaInsets;
+"use strict";import{useState as u,useEffect as p}from"react";import{Platform as m,Dimensions as f,StatusBar as h}from"react-native";import{useNativeSafeAreaInsets as d,hasSafeAreaPackage as g,safeAreaType as b}from"./safe-area-impl.js";const l={"393,852":{top:59,bottom:34},"430,932":{top:59,bottom:34},"390,844":{top:47,bottom:34},"428,926":{top:47,bottom:34},"375,812":{top:50,bottom:34},"414,896":{top:48,bottom:34},"402,874":{top:62,bottom:34},"440,956":{top:62,bottom:34}};const s=()=>{if(m.OS==="android"){const e=m.Version;const a=h.currentHeight||0;const i=e>=29;return{top:a,bottom:i?20:0,left:0,right:0}}const{width:t,height:o}=f.get("window");const r=`${t},${o}`;const n=l[r];if(n){return{...n,left:0,right:0}}return{top:20,bottom:0,left:0,right:0}};export const useSafeAreaInsets=(t={})=>{const o=d();const[r,n]=u(()=>s());p(()=>{if(!o){const i=()=>{n(s())};const c=f.addEventListener("change",i);return()=>{c?.remove()}}},[o]);const e=o||r;const a={top:t.minTop!==void 0?Math.max(e.top,t.minTop):e.top,bottom:t.minBottom!==void 0?Math.max(e.bottom,t.minBottom):e.bottom,left:t.minLeft!==void 0?Math.max(e.left,t.minLeft):e.left,right:t.minRight!==void 0?Math.max(e.right,t.minRight):e.right};return a};export const hasNotch=()=>{const t=s();if(m.OS==="android"){return t.top>24}return t.top>20};export const SafeAreaConfig={hasNativeSupport:()=>g,forcePureJS:false,getImplementationType:()=>{if(SafeAreaConfig.forcePureJS)return"pure-js";return b}};export const getSafeAreaInsets=s;

package/lib/module/hooks/useSafeAreaInsets.web.js

@@ -0,0 +1 @@
+"use strict";import{useEffect as i,useState as n}from"react";import{getSafeAreaInsets as o}from"../utils/getSafeAreaInsets.web.js";export{getSafeAreaInsets}from"../utils/getSafeAreaInsets.web.js";export function useSafeAreaInsets(e={}){const[r,s]=n({top:0,bottom:0,left:0,right:0});i(()=>{const t=()=>s(o());t();window.addEventListener("resize",t);window.visualViewport?.addEventListener("resize",t);return()=>{window.removeEventListener("resize",t);window.visualViewport?.removeEventListener("resize",t)}},[]);return{top:Math.max(r.top,e.minTop??0),bottom:Math.max(r.bottom,e.minBottom??0),left:Math.max(r.left,e.minLeft??0),right:Math.max(r.right,e.minRight??0)}}export const hasNotch=()=>o().hasNotch;

package/lib/module/icons/BenchmarkIcon.js

@@ -1,104 +1 @@
-"use strict";
-
-import { View } from "react-native";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * BenchmarkIcon - Icon for the BENCHMARK dev tool
- * Shows a stopwatch with performance bars, representing
- * performance measurement and benchmarking functionality.
- */
-export const BenchmarkIcon = ({
-  size = 24,
-  color = "#F59E0B",
-  glowColor
-}) => {
-  const scale = size / 24;
-  const activeColor = color;
-  const activeGlow = glowColor || color;
-
-  // Center the stopwatch in the icon area
-  const centerX = size / 2;
-  const centerY = size / 2 + 1 * scale; // Slightly lower to account for button
-  const clockRadius = 7 * scale;
-  return /*#__PURE__*/_jsxs(View, {
-    style: {
-      width: size,
-      height: size,
-      position: "relative",
-      alignItems: "center",
-      justifyContent: "center"
-    },
-    children: [/*#__PURE__*/_jsx(View, {
-      style: {
-        position: "absolute",
-        width: clockRadius * 2,
-        height: clockRadius * 2,
-        borderRadius: clockRadius,
-        borderWidth: 1.5 * scale,
-        borderColor: activeColor,
-        backgroundColor: "transparent",
-        left: centerX - clockRadius,
-        top: centerY - clockRadius,
-        opacity: 0.9
-      }
-    }), /*#__PURE__*/_jsx(View, {
-      style: {
-        position: "absolute",
-        width: 10 * scale,
-        height: 10 * scale,
-        borderRadius: 5 * scale,
-        backgroundColor: activeGlow,
-        left: centerX - 5 * scale,
-        top: centerY - 5 * scale,
-        opacity: 0.15
-      }
-    }), /*#__PURE__*/_jsx(View, {
-      style: {
-        position: "absolute",
-        width: 4 * scale,
-        height: 3 * scale,
-        borderRadius: 1 * scale,
-        backgroundColor: activeColor,
-        left: centerX - 2 * scale,
-        top: centerY - clockRadius - 3 * scale,
-        opacity: 0.9
-      }
-    }), /*#__PURE__*/_jsx(View, {
-      style: {
-        position: "absolute",
-        width: 2 * scale,
-        height: 2 * scale,
-        backgroundColor: activeColor,
-        left: centerX - 1 * scale,
-        top: centerY - clockRadius - 0.5 * scale,
-        opacity: 0.9
-      }
-    }), /*#__PURE__*/_jsx(View, {
-      style: {
-        position: "absolute",
-        width: 1.5 * scale,
-        height: 5 * scale,
-        borderRadius: 1 * scale,
-        backgroundColor: activeColor,
-        left: centerX - 0.75 * scale,
-        top: centerY - 5 * scale,
-        opacity: 0.9,
-        transform: [{
-          rotate: "-45deg"
-        }],
-        transformOrigin: "bottom center"
-      }
-    }), /*#__PURE__*/_jsx(View, {
-      style: {
-        position: "absolute",
-        width: 2 * scale,
-        height: 2 * scale,
-        borderRadius: 1 * scale,
-        backgroundColor: activeColor,
-        left: centerX - 1 * scale,
-        top: centerY - 1 * scale,
-        opacity: 0.9
-      }
-    })]
-  });
-};
+"use strict";import{View as e}from"react-native";import{jsx as s,jsxs as h}from"react/jsx-runtime";export const BenchmarkIcon=({size:a=24,color:c="#F59E0B",glowColor:l})=>{const t=a/24;const n=c;const d=l||c;const r=a/2;const i=a/2+1*t;const o=7*t;return h(e,{style:{width:a,height:a,position:"relative",alignItems:"center",justifyContent:"center"},children:[s(e,{style:{position:"absolute",width:o*2,height:o*2,borderRadius:o,borderWidth:1.5*t,borderColor:n,backgroundColor:"transparent",left:r-o,top:i-o,opacity:.9}}),s(e,{style:{position:"absolute",width:10*t,height:10*t,borderRadius:5*t,backgroundColor:d,left:r-5*t,top:i-5*t,opacity:.15}}),s(e,{style:{position:"absolute",width:4*t,height:3*t,borderRadius:1*t,backgroundColor:n,left:r-2*t,top:i-o-3*t,opacity:.9}}),s(e,{style:{position:"absolute",width:2*t,height:2*t,backgroundColor:n,left:r-1*t,top:i-o-.5*t,opacity:.9}}),s(e,{style:{position:"absolute",width:1.5*t,height:5*t,borderRadius:1*t,backgroundColor:n,left:r-.75*t,top:i-5*t,opacity:.9,transform:[{rotate:"-45deg"}],transformOrigin:"bottom center"}}),s(e,{style:{position:"absolute",width:2*t,height:2*t,borderRadius:1*t,backgroundColor:n,left:r-1*t,top:i-1*t,opacity:.9}})]})};