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

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>
+  );
+}; 

package/src/components/openframe-logo.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+export const OpenFrameLogo = ({ className, lowerPathColor, upperPathColor,  ...props }: { className?: string, lowerPathColor?: string, upperPathColor?: string } & React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      {...props}
+      className={className}
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{
+        '--fill-0': 'currentColor',
+        ...props.style
+      } as React.CSSProperties}
+    >
+      <g>
+        <g>
+          {/* White squares - top right, bottom left, bottom right, bottom center */}
+          <path
+            d="M21.3333 16.5333C21.3333 16.2388 21.5721 16 21.8667 16H26.1333C26.4279 16 26.6667 16.2388 26.6667 16.5333V20.8C26.6667 21.0946 26.4279 21.3333 26.1333 21.3333H21.8667C21.5721 21.3333 21.3333 21.0946 21.3333 20.8V16.5333Z"
+            fill={lowerPathColor ?? '#ffffff'}
+          />
+          <path
+            d="M16 21.8667C16 21.5721 16.2388 21.3333 16.5333 21.3333H20.8C21.0946 21.3333 21.3333 21.5721 21.3333 21.8667V26.1333C21.3333 26.4279 21.0946 26.6667 20.8 26.6667H16.5333C16.2388 26.6667 16 26.4279 16 26.1333V21.8667Z"
+            fill={lowerPathColor ?? '#ffffff'}
+          />
+          <path
+            d="M26.6667 21.8667C26.6667 21.5721 26.9054 21.3333 27.2 21.3333H31.4667C31.7612 21.3333 32 21.5721 32 21.8667V26.1333C32 26.4279 31.7612 26.6667 31.4667 26.6667H27.2C26.9054 26.6667 26.6667 26.4279 26.6667 26.1333V21.8667Z"
+            fill={lowerPathColor ?? '#ffffff'}
+          />
+          <path
+            d="M21.3333 27.2C21.3333 26.9054 21.5721 26.6667 21.8667 26.6667H26.1333C26.4279 26.6667 26.6667 26.9054 26.6667 27.2V31.4667C26.6667 31.7612 26.4279 32 26.1333 32H21.8667C21.5721 32 21.3333 31.7612 21.3333 31.4667V27.2Z"
+            fill={lowerPathColor ?? '#ffffff'}
+          />
+        </g>
+        {/* Black frame/border */}
+        <path
+          d="M30.9333 0H1.06667C0.477563 0 0 0.477564 0 1.06667V30.9333C0 31.5224 0.477563 32 1.06667 32H14.9333C15.5224 32 16 31.5224 16 30.9333V27.7333C16 27.1442 15.5224 26.6667 14.9333 26.6667H5.86667C5.57211 26.6667 5.33333 26.4279 5.33333 26.1333V5.86667C5.33333 5.57211 5.57211 5.33333 5.86667 5.33333H26.1333C26.4279 5.33333 26.6667 5.57212 26.6667 5.86667V14.9333C26.6667 15.5224 27.1442 16 27.7333 16H30.9333C31.5224 16 32 15.5224 32 14.9333V1.06667C32 0.477563 31.5224 0 30.9333 0Z"
+          fill={upperPathColor ?? '#1A1A1A'}
+        />
+      </g>
+    </svg>
+  );
+};

package/src/components/openmsp-logo.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+interface OpenmspLogoProps extends React.SVGProps<SVGSVGElement> {
+  className?: string;
+  frontBubbleColor?: string;
+  innerFrontBubbleColor?: string;
+  backBubbleColor?: string;
+  color?: string;
+}
+
+export function OpenmspLogo({ className = '', frontBubbleColor = '#000000', innerFrontBubbleColor = '#ffffff', backBubbleColor = '#ffffff', ...props }: OpenmspLogoProps) {
+  return (
+    <svg
+      width="97"
+      height="96"
+      viewBox="0 0 97 96"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+    >
+      <path
+        d="M73.933 0C75.7003 0 77.133 1.43269 77.133 3.2V54.4C77.133 56.1673 75.7003 57.6 73.933 57.6H3.53301C1.7657 57.6 0.333008 56.1673 0.333008 54.4V3.2C0.333008 1.43269 1.7657 0 3.53301 0H73.933ZM10.1076 47.6494C10.1076 48.0912 10.4658 48.4494 10.9076 48.4494H66.5584C67.0002 48.4494 67.3584 48.0912 67.3584 47.6494V9.95059C67.3584 9.50876 67.0002 9.15059 66.5584 9.15059H10.9076C10.4658 9.15059 10.1076 9.50876 10.1076 9.95059V47.6494Z"
+        fill={backBubbleColor} />
+      <path
+        d="M19.5332 22.4C19.5332 20.6326 20.9659 19.2 22.7332 19.2H93.1332C94.9005 19.2 96.3332 20.6326 96.3332 22.4V76.8C96.3332 78.2222 95.3945 79.4737 94.0292 79.8719L39.7572 95.7013C39.2452 95.8506 38.7332 95.4666 38.7332 94.9333V80C38.7332 79.5581 38.375 79.2 37.9332 79.2H22.7332C20.9659 79.2 19.5332 77.7673 19.5332 76V22.4Z"
+        fill={innerFrontBubbleColor} />
+      <path
+        d="M93.1332 19.2C94.9005 19.2 96.3332 20.6326 96.3332 22.4V76.8C96.3332 78.2222 95.3945 79.4737 94.0292 79.8719L39.7572 95.7013C39.2452 95.8506 38.7332 95.4666 38.7332 94.9333V80C38.7332 79.5581 38.375 79.2 37.9332 79.2H22.7332C20.9659 79.2 19.5332 77.7673 19.5332 76V22.4C19.5332 20.6326 20.9659 19.2 22.7332 19.2H93.1332ZM48.3377 82.1286C48.3355 82.6633 48.8484 83.0497 49.3617 82.9L86.1572 72.1672C86.4985 72.0676 86.7332 71.7547 86.7332 71.3992V29.6C86.7332 29.1581 86.375 28.8 85.9332 28.8H29.9332C29.4914 28.8 29.1332 29.1581 29.1332 29.6V68.8C29.1332 69.2418 29.4914 69.6 29.9332 69.6H47.5869C48.03 69.6 48.3887 69.9602 48.3869 70.4033L48.3377 82.1286Z"
+        fill={frontBubbleColor} />
+      <circle
+        cx="45.1334" cy="44.8" r="6.4"
+        fill={frontBubbleColor} />
+    </svg>
+  );
+}

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

@@ -0,0 +1,30 @@
+import React from 'react'
+
+interface PlusCircleIconProps extends React.SVGProps<SVGSVGElement> {
+  className?: string
+  whiteOverlay?: boolean
+  iconSize?: number
+}
+
+export function PlusCircleIcon({ className, whiteOverlay = false, iconSize = 24, ...props }: PlusCircleIconProps) {
+  return (
+    <svg 
+      width={iconSize} 
+      height={iconSize} 
+      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={whiteOverlay ? "white" : "#5EA62E"}
+      />
+      <path 
+        d="M10.8755 15.9995V13.1255H8C7.37884 13.1255 6.87526 12.6216 6.875 12.0005C6.875 11.3792 7.37868 10.8755 8 10.8755H10.8755V8C10.8755 7.37868 11.3792 6.875 12.0005 6.875C12.6216 6.87526 13.1255 7.37884 13.1255 8V10.8755H15.9995L16.1152 10.8813C16.6824 10.9391 17.1245 11.4181 17.1245 12.0005C17.1243 12.5827 16.6823 13.062 16.1152 13.1196L15.9995 13.1255H13.1255V15.9995C13.1255 16.6207 12.6216 17.1242 12.0005 17.1245C11.3792 17.1245 10.8755 16.6208 10.8755 15.9995Z" 
+        fill={whiteOverlay ? "white" : "#5EA62E"}
+      />
+    </svg>
+  )
+}