@flamingo-stack/openframe-frontend-core 0.0.518-1660.4292.1 → 0.0.518-1663.4312.1

package/src/components/hamburger-icon.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+interface HamburgerIconProps {
+  width?: number;
+  height?: number;
+  className?: string;
+}
+
+export function HamburgerIcon({ width = 16, height = 16, className = '' }: HamburgerIconProps) {
+  return (
+    <svg 
+      width={width} 
+      height={height} 
+      viewBox="0 0 16 16" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path 
+        d="M14 11.25C14.4142 11.25 14.75 11.5858 14.75 12C14.75 12.4142 14.4142 12.75 14 12.75H2C1.58579 12.75 1.25 12.4142 1.25 12C1.25 11.5858 1.58579 11.25 2 11.25H14Z" 
+        fill="#FAFAFA"
+      />
+      <path 
+        d="M14 7.25C14.4142 7.25 14.75 7.58579 14.75 8C14.75 8.41421 14.4142 8.75 14 8.75H2C1.58579 8.75 1.25 8.41421 1.25 8C1.25 7.58579 1.58579 7.25 2 7.25H14ZM14 3.25C14.4142 3.25 14.75 3.58579 14.75 4C14.75 4.41421 14.4142 4.75 14 4.75H2C1.58579 4.75 1.25 4.41421 1.25 4C1.25 3.58579 1.58579 3.25 2 3.25H14Z" 
+        fill="#FAFAFA"
+      />
+    </svg>
+  );
+} 

package/src/components/hubspot-icon.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { cn } from "../utils/cn";
+
+/**
+ * HubSpot brand logo (solid orange)
+ * Usage: <HubspotIcon className="h-4 w-4" />
+ */
+export function HubspotIcon({ className, fill = '#FF7A59', ...props }: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+      fill={fill}
+      className={cn('inline-block', className)}
+      {...props}
+    >
+      <path d="M266.197 216.109c-22.551 21.293-36.655 51.48-36.655 84.991 0 26.326 8.714 50.582 23.359 70.08l-44.473 44.74c-3.953-1.438-8.176-2.245-12.579-2.245-9.702 0-18.776 3.774-25.605 10.602-6.828 6.827-10.602 15.989-10.602 25.696 0 9.701 3.773 18.775 10.602 25.605 6.829 6.826 15.993 10.42 25.605 10.42 9.703 0 18.777-3.505 25.695-10.42 6.829-6.83 10.602-15.994 10.602-25.605 0-3.774-.538-7.369-1.707-10.873l44.923-45.102c19.765 15.183 44.381 24.169 71.244 24.169 64.599 0 116.797-52.38 116.797-116.977 0-58.578-42.854-107.093-99.007-115.628v-55.343c15.723-6.65 25.335-21.384 25.335-38.545 0-23.449-18.777-43.034-42.227-43.034-23.448 0-41.956 19.585-41.956 43.034 0 17.161 9.613 31.895 25.335 38.545v54.983c-13.655 1.887-26.593 6.019-38.362 12.219-24.796-18.778-105.565-76.997-151.746-112.126 1.078-3.953 1.798-8.085 1.798-12.397 0-25.875-21.113-46.898-47.078-46.898-25.875 0-46.898 21.023-46.898 46.898 0 25.965 21.023 46.988 46.898 46.988 8.805 0 16.98-2.606 24.078-6.828L266.197 216.109zM346.606 363.095c-34.229 0-61.991-27.763-61.991-61.994 0-34.229 27.762-61.99 61.991-61.99 34.23 0 61.992 27.761 61.992 61.99 0 34.231-27.762 61.994-61.992 61.994z" />
+    </svg>
+  );
+} 

package/src/components/icon-utils.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import {
+  Megaphone,
+  Bell,
+  Info,
+  Star,
+  Rocket,
+  Package,
+} from 'lucide-react';
+import { OpenFrameLogo } from './openframe-logo';
+import { OpenmspLogo } from './openmsp-logo';
+import { FlamingoLogo } from './flamingo-logo';
+
+/**
+ * Returns a JSX element for a known icon name, spreading any extra props.
+ * Falls back to Megaphone if the name is not recognised.
+ */
+export function renderSvgIcon(
+  name: string,
+  props: React.SVGProps<SVGSVGElement | SVGElement> = {}
+): React.ReactElement {
+  const map: Record<string, (p: any) => React.ReactElement> = {
+    megaphone:   (p) => <Megaphone {...p} />,
+    bell:        (p) => <Bell {...p} />,
+    info:        (p) => <Info {...p} />,
+    star:        (p) => <Star {...p} />,
+    rocket:      (p) => <Rocket {...p} />,
+    package:     (p) => <Package {...p} />,
+    'openframe-logo': (p) => <OpenFrameLogo {...p} />,
+    'openmsp-logo':   (p) => <OpenmspLogo {...p} />,
+    'flamingo': (p)=> <FlamingoLogo {...p} />,
+  };
+
+  const renderer = map[name] || map['megaphone'];
+  return renderer(props);
+} 

package/src/components/icons/apple-icon.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+interface AppleIconProps {
+  width?: number | string
+  height?: number | string
+  className?: string
+}
+
+/** @deprecated Use icons from icons-v2-generated instead. */
+export function AppleIcon({
+  width = 24,
+  height = 24,
+  className = "text-current"
+  }: AppleIconProps) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.56-1.702"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

package/src/components/icons/index.ts

@@ -81,6 +81,7 @@ export { GitHubIcon } from './github-icon';
 export { SlackIcon } from './slack-icon';
 export { ClickUpIcon } from './clickup-icon';
 export { MicrosoftIcon } from './ms-icon';
+export { AppleIcon } from './apple-icon';
 export { GoogleLogo } from './google-logo';
 export { RedditIcon } from './reddit-icon';
 export { XLogo } from './x-logo';

package/src/components/interactive-wrapper.tsx

@@ -0,0 +1,336 @@
+"use client";
+
+import React, { forwardRef } from 'react';
+import { useInteractiveState } from '../hooks/use-interactive-state';
+import { cn } from "../utils/cn";
+
+interface InteractiveOptions {
+  enableHover?: boolean;
+  enableFocus?: boolean;
+  enablePress?: boolean;
+  enableRipple?: boolean;
+  enableAnimations?: boolean;
+  enableColorShifts?: boolean;
+  enableAccessibilityEnhancements?: boolean;
+  animations?: boolean;
+  enableHapticFeedback?: boolean;
+}
+
+interface InteractiveWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Interactive state options
+   */
+  interactive?: InteractiveOptions;
+  
+  /**
+   * Element type to render
+   */
+  as?: keyof React.JSX.IntrinsicElements;
+  
+  /**
+   * Whether to render ripple effect
+   */
+  showRipple?: boolean;
+  
+  /**
+   * Custom ripple color
+   */
+  rippleColor?: string;
+  
+  /**
+   * Accessibility role
+   */
+  role?: string;
+  
+  /**
+   * Whether element should be focusable
+   */
+  focusable?: boolean;
+  
+  /**
+   * Loading state
+   */
+  loading?: boolean;
+  
+  /**
+   * Disabled state
+   */
+  disabled?: boolean;
+  
+  /**
+   * Active state
+   */
+  active?: boolean;
+  
+  /**
+   * Callback for state changes
+   */
+  onStateChange?: (state: any) => void;
+}
+
+export const InteractiveWrapper = forwardRef<HTMLElement, InteractiveWrapperProps>(({
+  interactive = {},
+  as = 'div',
+  showRipple = true,
+  rippleColor,
+  role,
+  focusable = false,
+  loading = false,
+  disabled = false,
+  active = false,
+  onStateChange,
+  className,
+  children,
+  onClick,
+  ...props
+}, ref) => {
+  const {
+    state,
+    handlers,
+    getStateStyles,
+    getStateClasses,
+    ripplePosition,
+    setLoading,
+    setDisabled,
+    ref: interactiveRef
+  } = useInteractiveState();
+
+  // Update loading and disabled states
+  React.useEffect(() => {
+    setLoading(loading);
+  }, [loading, setLoading]);
+
+  React.useEffect(() => {
+    setDisabled(disabled);
+  }, [disabled, setDisabled]);
+
+  // Notify parent of state changes
+  React.useEffect(() => {
+    if (onStateChange) {
+      onStateChange(state);
+    }
+  }, [state, onStateChange]);
+
+  // Merge refs
+  React.useEffect(() => {
+    if (ref) {
+      if (typeof ref === 'function') {
+        ref(interactiveRef.current);
+      } else {
+        ref.current = interactiveRef.current;
+      }
+    }
+  }, [ref, interactiveRef]);
+
+  const Component = as as any;
+  
+  const mergedHandlers = {
+    ...handlers,
+    onClick: (event: React.MouseEvent<HTMLDivElement>) => {
+      handlers.onClick();
+      if (onClick && !event.defaultPrevented) {
+        onClick(event);
+      }
+    }
+  };
+
+  const computedClassName = cn(
+    'interactive-wrapper',
+    'relative overflow-hidden transition-all duration-200',
+    getStateClasses(),
+    focusable && 'focus:outline-none',
+    className
+  );
+
+  return (
+    <Component
+      ref={interactiveRef}
+      className={computedClassName}
+      style={{ ...getStateStyles(), ...props.style }}
+      role={role}
+      tabIndex={focusable ? 0 : undefined}
+      aria-disabled={disabled}
+      aria-busy={loading}
+      aria-pressed={active}
+      {...mergedHandlers}
+      {...props}
+    >
+      {children}
+      
+      {/* Ripple Effect */}
+      {showRipple && ripplePosition && (
+        <RippleEffect
+          x={ripplePosition.x}
+          y={ripplePosition.y}
+          color={rippleColor}
+        />
+      )}
+      
+      {/* Loading Overlay */}
+      {loading && (
+        <div className="absolute inset-0 bg-current opacity-10 animate-pulse pointer-events-none" />
+      )}
+    </Component>
+  );
+});
+
+InteractiveWrapper.displayName = 'InteractiveWrapper';
+
+/**
+ * Ripple effect component
+ */
+function RippleEffect({ 
+  x, 
+  y, 
+  color = 'currentColor' 
+}: { 
+  x: number; 
+  y: number; 
+  color?: string; 
+}) {
+  return (
+    <div
+      className="absolute pointer-events-none"
+      style={{
+        left: x,
+        top: y,
+        transform: 'translate(-50%, -50%)',
+      }}
+    >
+      <div
+        className="w-2 h-2 rounded-full animate-ping"
+        style={{
+          backgroundColor: color,
+          opacity: 0.3,
+          animationDuration: '0.6s',
+          animationTimingFunction: 'cubic-bezier(0, 0, 0.2, 1)',
+          transform: 'scale(0)',
+          animation: 'ripple-expand 0.6s cubic-bezier(0, 0, 0.2, 1)'
+        }}
+      />
+    </div>
+  );
+}
+
+/**
+ * Pre-configured interactive components
+ */
+export const InteractivePresets = {
+  /**
+   * Card with hover and click interactions
+   */
+  Card: forwardRef<HTMLDivElement, Omit<InteractiveWrapperProps, 'interactive'>>((props, ref) => (
+    <InteractiveWrapper
+      ref={ref}
+      interactive={{
+        enableAnimations: true,
+        enableColorShifts: true,
+        animations: true
+      }}
+      className={cn('bg-ods-card border border-ods-border rounded-lg p-4', props.className)}
+      focusable={true}
+      role="button"
+      {...props}
+    />
+  )),
+
+  /**
+   * Button-like interactive element
+   */
+  Button: forwardRef<HTMLButtonElement, Omit<InteractiveWrapperProps, 'interactive' | 'as'>>((props, ref) => (
+    <InteractiveWrapper
+      ref={ref}
+      as="button"
+      interactive={{
+        enableAnimations: true,
+        enableColorShifts: true,
+        enableAccessibilityEnhancements: true,
+        enableHapticFeedback: true,
+        animations: true
+      }}
+      className={cn('bg-ods-accent text-ods-text-on-accent px-4 py-2 rounded-md font-medium', props.className)}
+      role="button"
+      {...props}
+    />
+  )),
+
+  /**
+   * Navigation item with subtle interactions
+   */
+  NavItem: forwardRef<HTMLAnchorElement, Omit<InteractiveWrapperProps, 'interactive' | 'as'>>((props, ref) => (
+    <InteractiveWrapper
+      ref={ref}
+      as="a"
+      interactive={{
+        enableAnimations: true,
+        enableColorShifts: true,
+        animations: true
+      }}
+      className={cn('block px-3 py-2 rounded-md text-ods-text-secondary hover:text-ods-text-primary', props.className)}
+      focusable={true}
+      {...props}
+    />
+  )),
+
+  /**
+   * Input field with enhanced focus states
+   */
+  Input: forwardRef<HTMLInputElement, Omit<InteractiveWrapperProps, 'interactive' | 'as'>>((props, ref) => (
+    <InteractiveWrapper
+      ref={ref}
+      as="input"
+      interactive={{
+        enableAnimations: false,
+        enableColorShifts: true,
+        enableAccessibilityEnhancements: true,
+        animations: true
+      }}
+      className={cn('w-full px-3 py-2 bg-ods-bg border border-ods-border rounded-md text-ods-text-primary', props.className)}
+      focusable={true}
+      {...props}
+    />
+  )),
+
+  /**
+   * Toggle switch with visual feedback
+   */
+  Toggle: forwardRef<HTMLDivElement, Omit<InteractiveWrapperProps, 'interactive'> & { checked?: boolean }>((props, ref) => {
+    const { checked, ...restProps } = props;
+    
+    return (
+      <InteractiveWrapper
+        ref={ref}
+        interactive={{
+          enableAnimations: true,
+          enableColorShifts: true,
+          enableHapticFeedback: true,
+          animations: true
+        }}
+        className={cn(
+          'relative inline-flex w-12 h-6 rounded-full cursor-pointer transition-colors',
+          checked ? 'bg-ods-accent' : 'bg-ods-border',
+          props.className
+        )}
+        role="switch"
+        aria-checked={checked}
+        focusable={true}
+        {...restProps}
+      >
+        <div
+          className={cn(
+            'inline-block w-5 h-5 rounded-full bg-white transform transition-transform',
+            checked ? 'translate-x-6' : 'translate-x-0.5',
+            'mt-0.5'
+          )}
+        />
+      </InteractiveWrapper>
+    );
+  })
+};
+
+// Export individual preset components with display names
+InteractivePresets.Card.displayName = 'InteractiveCard';
+InteractivePresets.Button.displayName = 'InteractiveButton';
+InteractivePresets.NavItem.displayName = 'InteractiveNavItem';
+InteractivePresets.Input.displayName = 'InteractiveInput';
+InteractivePresets.Toggle.displayName = 'InteractiveToggle';

package/src/components/join-waitlist-button-stub.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Button } from './ui/button';
+
+export interface JoinWaitlistButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  lowerPathColor?: string;
+  upperPathColor?: string;
+  buttonBackgroundColor?: string;
+  buttonTextColor?: string;
+  loading?: boolean;
+}
+
+export const JoinWaitlistButton = React.forwardRef<HTMLButtonElement, JoinWaitlistButtonProps>(
+  ({ className, lowerPathColor, upperPathColor, buttonBackgroundColor, buttonTextColor, children, ...props }, ref) => {
+    return (
+      <Button
+        ref={ref}
+        className={className}
+        style={{
+          backgroundColor: buttonBackgroundColor,
+          color: buttonTextColor
+        }}
+        {...props}
+      >
+        {children || 'Join Waitlist'}
+      </Button>
+    );
+  }
+);
+
+JoinWaitlistButton.displayName = "JoinWaitlistButton";

package/src/components/loading/openmsp-heartbeat.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React from 'react';
-import { OpenmspLogo } from '../icons/openmsp-logo';
+import { OpenmspLogo } from '../openmsp-logo';
 
 export function OpenmspHeartbeatLoader({ className = '', progress = 0, label, barWidth = 'w-128' }: { className?: string; progress?: number; label?: string; barWidth?: string }) {
   return (

package/src/components/made-with-love.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import React, { useState, useEffect } from 'react';
-import { FlamingoLogo } from './icons/flamingo-logo';
+import { FlamingoLogo } from './flamingo-logo';
 import { getBaseUrl } from '../utils';
 
 interface MadeWithLoveProps {
@@ -117,9 +117,8 @@ export function MadeWithLove({
       >
         <div style={logoStyle}>
           <FlamingoLogo
-            width={config.logoSize}
-            height={config.logoSize}
-            fill="#f357bb" // Direct hex instead of CSS variable for cross-framework compatibility
+            size={config.logoSize}
+            color="#f357bb" // Direct hex instead of CSS variable for cross-framework compatibility
           />
         </div>
         <span style={textStyle}>Flamingo</span>

package/src/components/menu-icon.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Menu } from 'lucide-react';
+
+interface MenuIconProps {
+  className?: string;
+  width?: number;
+  height?: number;
+}
+
+export const MenuIcon: React.FC<MenuIconProps> = ({ 
+  className = "", 
+  width = 24, 
+  height = 24 
+}) => {
+  return (
+    <Menu 
+      width={width} 
+      height={height} 
+      className={className}
+    />
+  );
+}; 

package/src/components/minus-circle-icon.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+
+interface MinusCircleIconProps extends React.SVGProps<SVGSVGElement> {
+  className?: string
+}
+
+export function MinusCircleIcon({ className, ...props }: MinusCircleIconProps) {
+  return (
+    <svg 
+      width="24" 
+      height="24" 
+      viewBox="0 0 24 24" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+    >
+      <path 
+        d="M20.8745 12.0005C20.8745 7.09912 16.9018 3.12526 12.0005 3.125C7.09896 3.125 3.125 7.09896 3.125 12.0005C3.12526 16.9018 7.09912 20.8745 12.0005 20.8745C16.9016 20.8742 20.8742 16.9016 20.8745 12.0005ZM23.1245 12.0005C23.1242 18.1443 18.1443 23.1242 12.0005 23.1245C5.85648 23.1245 0.875264 18.1444 0.875 12.0005C0.875 5.85632 5.85632 0.875 12.0005 0.875C18.1444 0.875264 23.1245 5.85648 23.1245 12.0005Z" 
+        fill="#888888"
+      />
+      <path 
+        d="M15.9995 10.875L16.1152 10.8809C16.6824 10.9386 17.1245 11.4176 17.1245 12C17.1245 12.5824 16.6824 13.0614 16.1152 13.1191L15.9995 13.125H8C7.37868 13.125 6.875 12.6213 6.875 12C6.875 11.3787 7.37868 10.875 8 10.875H15.9995Z" 
+        fill="#888888"
+      />
+    </svg>
+  )
+} 

package/src/components/moon-icon.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+interface MoonIconProps {
+  className?: string;
+  width?: number;
+  height?: number;
+}
+
+export const MoonIcon: React.FC<MoonIconProps> = ({ 
+  className = "", 
+  width = 23, 
+  height = 24 
+}) => {
+  return (
+    <svg 
+      width={width} 
+      height={height} 
+      viewBox="0 0 23 24" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path d="M9.37549 6.69626C9.3755 5.53929 9.55702 4.42358 9.89404 3.37692C6.00935 4.32228 3.125 7.82461 3.125 12.0005C3.12514 16.9019 7.09905 20.8745 12.0005 20.8745C14.846 20.8743 17.3791 19.5349 19.0039 17.4497C13.5887 16.856 9.37549 12.2696 9.37549 6.69626ZM11.6255 6.69626C11.6255 11.43 15.4626 15.2671 20.1963 15.2671C20.4368 15.2671 20.6747 15.2571 20.9097 15.2378C21.3123 15.2046 21.7024 15.3908 21.9307 15.7241C22.1587 16.0573 22.1904 16.4872 22.0142 16.8506C20.2135 20.5621 16.4075 23.1243 12.0005 23.1245C5.85641 23.1245 0.875136 18.1445 0.875 12.0005C0.875 5.96445 5.68179 1.05079 11.6768 0.879363C12.0807 0.867855 12.4598 1.07472 12.6699 1.41989C12.8797 1.76491 12.8889 2.19599 12.6934 2.54928C12.0132 3.77703 11.6255 5.18981 11.6255 6.69626Z" fill="currentColor"/>
+    </svg>
+  );
+}; 

package/src/components/ms-icon.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+interface MsIconProps {
+  width?: number | string
+  height?: number | string
+  className?: string
+}
+
+export function MicrosoftIcon({ 
+  width = 24, 
+  height = 24, 
+  className = "text-current" 
+  }: MsIconProps) {
+  return (
+    <svg 
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g>
+        <path d="M11.5047 11.5032H2V2H11.5047V11.5032Z" fill="#F1511B"/>
+        <path d="M22.0002 11.5032H12.4946V2H21.9993V11.5032H22.0002Z" fill="#80CC28"/>
+        <path d="M11.5047 21.9993H2V12.4961H11.5047V21.9993Z" fill="#00ADEF"/>
+        <path d="M22.0002 21.9993H12.4946V12.4961H21.9993V21.9993H22.0002Z" fill="#FBBC09"/>
+      </g>
+    </svg>
+  )
+}

package/src/components/open-source-features.tsx

@@ -33,7 +33,7 @@ const FeatureCard: React.FC<FeatureCardProps> = ({ icon, title, description }) =
   );
 };
 
-export const OpenSourceFeatures: React.FC = () => {
+const OpenSourceFeatures: React.FC = () => {
   const features = [
     {
       icon: <Terminal className="w-6 h-6" />,

package/src/components/open-source-icon.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface OpenSourceIconProps {
+  className?: string;
+  width?: number;
+  height?: number;
+}
+
+export const OpenSourceIcon: React.FC<OpenSourceIconProps> = ({ 
+  className = "", 
+  width = 19, 
+  height = 18 
+}) => {
+  return (
+    <svg 
+      width={width} 
+      height={height} 
+      viewBox="0 0 19 18" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path d="M10.1103 1.20504C10.2596 0.753862 10.729 0.479825 11.2029 0.584919C11.7083 0.697238 12.0269 1.19887 11.9145 1.7043L8.58202 16.7043C8.46953 17.2095 7.96794 17.5283 7.46264 17.416C6.95742 17.3035 6.63868 16.8019 6.75097 16.2966L10.0847 1.29659L10.1103 1.20504Z" fill="currentColor"/>
+      <path d="M4.50325 4.17094C4.86929 3.80489 5.4628 3.80502 5.82893 4.17094C6.19505 4.53705 6.19505 5.1305 5.82893 5.49662L2.32429 9.00004L5.82893 12.5047L5.89363 12.5755C6.19397 12.9437 6.17217 13.4871 5.82893 13.8304C5.48568 14.1732 4.94335 14.194 4.57527 13.8938L4.50325 13.8304L0.336986 9.66288C-0.0289274 9.29675 -0.029063 8.70325 0.336986 8.3372L4.50325 4.17094ZM12.837 4.17094C13.1802 3.82768 13.7236 3.80585 14.0919 4.10624L14.1627 4.17094L18.3289 8.3372C18.695 8.70331 18.695 9.29676 18.3289 9.66288L14.1627 13.8304C13.7966 14.1962 13.2031 14.1962 12.837 13.8304C12.4709 13.4643 12.4711 12.8708 12.837 12.5047L16.3404 9.00004L12.837 5.49662L12.7723 5.42582C12.4719 5.05759 12.4937 4.51419 12.837 4.17094Z" fill="currentColor"/>
+    </svg>
+  );
+};