@brcarddev/frontend-commons 1.0.2

package/src/components/atoms/UploadImageField/upload-image-field.tsx

@@ -0,0 +1,362 @@
+import { ChangeEvent, ComponentProps, forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+
+import { cn } from '@/utils/cn';
+
+import { Box, Button, Flex, RenderCondition, Trash01, Typography, UploadCloud02 } from '@/components';
+
+export interface UploadImageFieldProps extends Omit<ComponentProps<'input'>, 'onChange' | 'onError' | 'value' | 'placeholder'> {
+  buttonText?: string;
+  maxSize?: number;
+  maxSizeErrorMessage?: string;
+  acceptErrorMessage?: string;
+  onFileSelect?: (file: File | null, previewUrl?: string) => void;
+  onUploadComplete?: (url: string) => void;
+  onError?: (error: string) => void;
+  loading?: boolean;
+  error?: string;
+  value?: UploadValue;
+  onChange?: (value: UploadValue) => void;
+  uploadFunction?: (file: File) => Promise<string>;
+  helperText?: string;
+}
+
+export type UploadValue = File | string | null;
+
+export const UploadImageField = forwardRef<HTMLInputElement, UploadImageFieldProps>(({
+  buttonText = 'Select image',
+  maxSize = 5,
+  maxSizeErrorMessage,
+  acceptErrorMessage,
+  onFileSelect,
+  onUploadComplete,
+  onError,
+  loading = false,
+  disabled = false,
+  error,
+  accept = 'image/*',
+  value,
+  onChange,
+  uploadFunction,
+  helperText,
+  ...props
+}, ref) => {
+  const [ previewUrl, setPreviewUrl ] = useState<string | null>(null);
+  const [ selectedFile, setSelectedFile ] = useState<File | null>(null);
+  const [ isUploading, setIsUploading ] = useState<boolean>(false);
+  const [ isDragOver, setIsDragOver ] = useState<boolean>(false);
+  const [ isHovered, setIsHovered ] = useState<boolean>(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const uploadButtonRef = useRef<HTMLButtonElement>(null);
+
+  const isUrl = typeof value === 'string' && value.length > 0;
+  const isFile = value instanceof File;
+
+  const shouldShowImagePreview = Boolean(previewUrl && (
+    isUrl ||
+    (selectedFile && selectedFile.type.startsWith('image/'))
+  ));
+
+  const isLoading = loading || isUploading;
+
+  useEffect(() => {
+    if (isUrl) {
+      setPreviewUrl(value);
+      setSelectedFile(null);
+    } else if (isFile) {
+      setSelectedFile(value);
+
+      if (value.type.startsWith('image/')) {
+        const url = URL.createObjectURL(value);
+        setPreviewUrl(url);
+      }
+    } else {
+      setSelectedFile(null);
+      setPreviewUrl(null);
+    }
+  }, [ value, isUrl, isFile ]);
+
+  useEffect(() => {
+    return () => {
+      if (previewUrl && !isUrl) {
+        URL.revokeObjectURL(previewUrl);
+      }
+    };
+  }, [ previewUrl, isUrl ]);
+
+  const validateFile = useCallback((file: File): string | null => {
+    if (maxSize && file.size > maxSize * 1024 * 1024) {
+      return maxSizeErrorMessage || `Arquivo muito grande. Tamanho máximo: ${maxSize}MB`;
+    }
+
+    if (accept) {
+      const acceptedTypes = accept.split(',').map(type => type.trim());
+      const fileType = file.type;
+      const fileExtension = `.${file.name.split('.').pop()?.toLowerCase()}`;
+
+      const isValidType = acceptedTypes.some(type => {
+        if (type.startsWith('.')) {
+          return fileExtension === type.toLowerCase();
+        }
+
+        return fileType === type || fileType.startsWith(type.replace('*', ''));
+      });
+
+      if (!isValidType) {
+        return acceptErrorMessage || `Tipo de arquivo não suportado. Tipos aceitos: ${accept}`;
+      }
+    }
+
+    return null;
+  }, [ maxSize, accept, maxSizeErrorMessage, acceptErrorMessage ]);
+
+  const handleUpload = useCallback(async (file: File): Promise<string | null> => {
+    if (!uploadFunction) {
+      return null;
+    }
+
+    try {
+      setIsUploading(true);
+      const url = await uploadFunction(file);
+      onUploadComplete?.(url);
+      return url;
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Erro ao fazer upload';
+      onError?.(errorMessage);
+      return null;
+    } finally {
+      setIsUploading(false);
+    }
+  }, [ uploadFunction, onUploadComplete, onError ]);
+
+  const handleFileSelect = useCallback(async (file: File | null) => {
+    if (disabled || isLoading) {
+      return;
+    }
+
+    if (previewUrl && !isUrl) {
+      URL.revokeObjectURL(previewUrl);
+    }
+
+    if (file) {
+      const validationError = validateFile(file);
+
+      if (validationError) {
+        onError?.(validationError);
+        return;
+      }
+
+      setSelectedFile(file);
+
+      if (file.type.startsWith('image/')) {
+        const localUrl = URL.createObjectURL(file);
+        setPreviewUrl(localUrl);
+      }
+
+      onFileSelect?.(file, previewUrl || undefined);
+      onChange?.(file);
+
+      if (uploadFunction) {
+        const uploadedUrl = await handleUpload(file);
+
+        if (uploadedUrl) {
+          onChange?.(uploadedUrl);
+          setPreviewUrl(uploadedUrl);
+          setSelectedFile(null);
+        }
+      }
+    } else {
+      setSelectedFile(null);
+      setPreviewUrl(null);
+      onFileSelect?.(null);
+      onChange?.(null);
+
+      if (inputRef.current) {
+        inputRef.current.value = '';
+      }
+    }
+  }, [
+    previewUrl,
+    validateFile,
+    onFileSelect,
+    onError,
+    onChange,
+    uploadFunction,
+    handleUpload,
+    isUrl,
+    disabled,
+    isLoading,
+  ]);
+
+  const handleInputChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    if (disabled || isLoading) return;
+
+    const file = e.target.files?.[0] || null;
+    handleFileSelect(file);
+  }, [ handleFileSelect, disabled, isLoading ]);
+
+  const handleClick = useCallback(() => {
+    if (!disabled && !loading && !isUploading) {
+      inputRef.current?.click();
+    }
+  }, [ disabled, loading, isUploading ]);
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragOver(true);
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragOver(false);
+  }, []);
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragOver(false);
+
+    if (disabled || loading || isUploading) return;
+
+    const { files } = e.dataTransfer;
+
+    if (files.length > 0) {
+      handleFileSelect(files[0]);
+    }
+  }, [ disabled, loading, isUploading, handleFileSelect ]);
+
+  const handleMouseEnter = useCallback(() => {
+    setIsHovered(true);
+  }, []);
+
+  const handleMouseLeave = useCallback(() => {
+    setIsHovered(false);
+  }, []);
+
+  const handleDelete = useCallback(() => {
+    setSelectedFile(null);
+    setPreviewUrl(null);
+    onFileSelect?.(null);
+    onChange?.(null);
+
+    if (inputRef.current) {
+      inputRef.current.value = '';
+    }
+  }, [ onFileSelect, onChange ]);
+
+  return (
+    <Box className='relative h-full'>
+      <Box
+        className={cn(
+          'w-full h-full rounded-xl border transition-all duration-200',
+          shouldShowImagePreview ? 'relative overflow-hidden' : 'px-6 py-4 flex flex-col items-center justify-center gap-4',
+          isDragOver && 'border-primary',
+          !shouldShowImagePreview && isDragOver && 'bg-brand-50',
+          error && 'border-error-500',
+          (disabled || isLoading) && 'opacity-50 cursor-not-allowed'
+        )}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        onMouseEnter={shouldShowImagePreview ? handleMouseEnter : undefined}
+        onMouseLeave={shouldShowImagePreview ? handleMouseLeave : undefined}
+      >
+        <RenderCondition condition={shouldShowImagePreview}>
+          <img
+            src={previewUrl!}
+            alt="Image preview"
+            className={cn(
+              'w-full h-full object-cover transition-all duration-200',
+              isHovered && 'opacity-60 blur-sm'
+            )}
+          />
+        </RenderCondition>
+
+        <RenderCondition condition={shouldShowImagePreview}>
+          <Flex
+            className={cn(
+              'absolute inset-0 items-center justify-center transition-opacity duration-200 gap-4',
+              isHovered ? 'opacity-100' : 'opacity-0'
+            )}
+          >
+            <Button
+              type='button'
+              variant='outline'
+              size='sm'
+              onClick={handleClick}
+              isLoading={isLoading}
+              disabled={disabled}
+              className="gap-2 bg-white/90 backdrop-blur-sm hover:bg-white"
+              ref={uploadButtonRef}
+            >
+              <RenderCondition condition={!isLoading}>
+                <UploadCloud02 className="size-5 text-gray-400" />
+              </RenderCondition>
+              {buttonText}
+            </Button>
+
+            <Button
+              type='button'
+              size='sm'
+              onClick={handleDelete}
+              disabled={disabled}
+            >
+              <Trash01 className="size-5" />
+            </Button>
+          </Flex>
+        </RenderCondition>
+
+        <RenderCondition condition={!shouldShowImagePreview}>
+          <Box className="text-center space-y-2">
+            <Button
+              type='button'
+              variant='outline'
+              size='sm'
+              onClick={handleClick}
+              isLoading={isLoading}
+              disabled={disabled}
+              className="gap-2"
+              ref={uploadButtonRef}
+            >
+              <RenderCondition condition={!isLoading}>
+                <UploadCloud02 className="size-5 text-gray-400" />
+              </RenderCondition>
+              {buttonText}
+            </Button>
+          </Box>
+        </RenderCondition>
+
+        <input
+          ref={(node) => {
+            if (typeof ref === 'function') {
+              ref(node);
+            } else if (ref) {
+              ref.current = node;
+            }
+
+            inputRef.current = node;
+          }}
+          type="file"
+          className="hidden"
+          accept={accept}
+          disabled={disabled || isLoading}
+          onChange={handleInputChange}
+          onFocus={() => uploadButtonRef.current?.focus()}
+          {...props}
+        />
+      </Box>
+
+      {error && (
+        <Typography className="text-red-500 text-sm mt-1.5">
+          {error}
+        </Typography>
+      )}
+
+      {helperText && !error && (
+        <Typography className="text-gray-600 text-sm mt-1.5">
+          {helperText}
+        </Typography>
+      )}
+    </Box>
+  );
+});
+
+UploadImageField.displayName = 'UploadImageField';

package/src/components/atoms/VideoPlayer/index.ts

@@ -0,0 +1 @@
+export * from './video-player';

package/src/components/atoms/VideoPlayer/video-player.stories.tsx

@@ -0,0 +1,37 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { VideoPlayer } from './video-player';
+
+const meta: Meta<typeof VideoPlayer> = {
+  title: 'Components/Data Display/VideoPlayer',
+  component: VideoPlayer,
+  tags: [ 'autodocs' ],
+  argTypes: {
+    videoUrl: {
+      control: 'text',
+      description: 'The URL of the video to display',
+    },
+    className: {
+      control: 'text',
+      description: 'The class name of the video player',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'The VideoPlayer component displays a video.',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof VideoPlayer>;
+
+export const Default: Story = {
+  args: {
+    videoUrl: 'https://www.youtube.com/watch?v=yRYlMTFcKZA',
+  },
+};
+

package/src/components/atoms/VideoPlayer/video-player.test.tsx

@@ -0,0 +1,20 @@
+import { composeStories } from '@storybook/react';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import * as stories from './video-player.stories';
+
+const { Default } = composeStories(stories);
+
+describe('<VideoPlayer />', () => {
+  it('should render the video player', () => {
+    render(<Default />);
+
+    expect(screen.getByTestId('video-player')).toBeInTheDocument();
+  });
+
+  it('matches snapshot', () => {
+    const { container } = render(<Default />);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/atoms/VideoPlayer/video-player.tsx

@@ -0,0 +1,26 @@
+import { Box } from '@/components';
+import { cn, getYouTubeEmbedUrl } from '@/utils';
+
+export function VideoPlayer({ videoUrl, className }: { videoUrl: string, className?: string }) {
+  if (videoUrl.includes('youtube.com') || videoUrl.includes('youtu.be')) {
+    return (
+      <Box className={cn('relative w-full max-w-[1200px] aspect-video', className)} data-testid="video-player">
+        <iframe
+          src={getYouTubeEmbedUrl(videoUrl)}
+          className="w-full h-full rounded-lg"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+        />
+      </Box>
+    );
+  }
+
+  return (
+    <Box className={cn('relative w-full aspect-video', className)} data-testid="video-player">
+      <video controls className="w-full h-full rounded-lg">
+        <source src={videoUrl} type="video/mp4" />
+        Your browser does not support the video tag.
+      </video>
+    </Box>
+  );
+}

package/src/components/atoms/index.ts

@@ -0,0 +1,31 @@
+export * from './AudioPlayer';
+export * from './Badge';
+export * from './Box';
+export * from './Button';
+export * from './ButtonUpload';
+export * from './Calendar';
+export * from './Checkbox';
+export * from './CheckIcon';
+export * from './Flex';
+export * from './Grid';
+export * from './Icon';
+export * from './Input';
+export * from './InputMoney';
+export * from './InputPhone';
+export * from './InputSearch';
+export * from './InputUpload';
+export * from './InputWithButton';
+export * from './Label';
+export * from './Progress';
+export * from './RenderCondition';
+export * from './RichTextEditor';
+export * from './Separator';
+export * from './Skeleton';
+export * from './Slider';
+export * from './Sonner';
+export * from './Switch';
+export * from './Textarea';
+export * from './Toggle';
+export * from './Typography';
+export * from './UploadImageField';
+export * from './VideoPlayer';

package/src/components/icons/alert-circle.tsx

@@ -0,0 +1,22 @@
+import { ComponentProps } from 'react';
+
+export function AlertCircle({ ...props }: ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M12 8V12M12 16H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/components/icons/align-center.tsx

@@ -0,0 +1,22 @@
+import { ComponentProps } from 'react';
+
+export function AlignCenter(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M18 10H6M21 6H3M21 14H3M18 18H6"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/components/icons/align-left.tsx

@@ -0,0 +1,22 @@
+import { ComponentProps } from 'react';
+
+export function AlignLeft(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M16 10H3M20 6H3M20 14H3M16 18H3"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/components/icons/annotation-dots.tsx

@@ -0,0 +1,16 @@
+import { ComponentProps } from 'react';
+
+export function AnnotationDots(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M7.5 10.5H7.51M12 10.5H12.01M16.5 10.5H16.51M9.9 19.2L11.36 21.1467C11.5771 21.4362 11.6857 21.5809 11.8188 21.6327C11.9353 21.678 12.0647 21.678 12.1812 21.6327C12.3143 21.5809 12.4229 21.4362 12.64 21.1467L14.1 19.2C14.3931 18.8091 14.5397 18.6137 14.7185 18.4645C14.9569 18.2656 15.2383 18.1248 15.5405 18.0535C15.7671 18 16.0114 18 16.5 18C17.8978 18 18.5967 18 19.1481 17.7716C19.8831 17.4672 20.4672 16.8831 20.7716 16.1481C21 15.5967 21 14.8978 21 13.5V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V13.5C3 14.8978 3 15.5967 3.22836 16.1481C3.53284 16.8831 4.11687 17.4672 4.85195 17.7716C5.40326 18 6.10218 18 7.5 18C7.98858 18 8.23287 18 8.45951 18.0535C8.76169 18.1248 9.04312 18.2656 9.2815 18.4645C9.46028 18.6137 9.60685 18.8091 9.9 19.2ZM8 10.5C8 10.7761 7.77614 11 7.5 11C7.22386 11 7 10.7761 7 10.5C7 10.2239 7.22386 10 7.5 10C7.77614 10 8 10.2239 8 10.5ZM12.5 10.5C12.5 10.7761 12.2761 11 12 11C11.7239 11 11.5 10.7761 11.5 10.5C11.5 10.2239 11.7239 10 12 10C12.2761 10 12.5 10.2239 12.5 10.5ZM17 10.5C17 10.7761 16.7761 11 16.5 11C16.2239 11 16 10.7761 16 10.5C16 10.2239 16.2239 10 16.5 10C16.7761 10 17 10.2239 17 10.5Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  );
+}

package/src/components/icons/annotation-question.tsx

@@ -0,0 +1,15 @@
+import { ComponentProps } from 'react';
+
+export function AnnotationQuestion(props: ComponentProps<'svg'>) {
+  return (
+    <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M10 8.50224C10.1762 8.00136 10.524 7.579 10.9817 7.30998C11.4395 7.04095 11.9777 6.9426 12.501 7.03237C13.0243 7.12213 13.499 7.39421 13.8409 7.80041C14.1829 8.20661 14.37 8.72072 14.3692 9.25168C14.3692 10.7506 12.1209 11.5 12.1209 11.5M12.1499 14.5H12.1599M9.9 19.2L11.36 21.1467C11.5771 21.4362 11.6857 21.5809 11.8188 21.6327C11.9353 21.678 12.0647 21.678 12.1812 21.6327C12.3143 21.5809 12.4229 21.4362 12.64 21.1467L14.1 19.2C14.3931 18.8091 14.5397 18.6137 14.7185 18.4645C14.9569 18.2656 15.2383 18.1248 15.5405 18.0535C15.7671 18 16.0114 18 16.5 18C17.8978 18 18.5967 18 19.1481 17.7716C19.8831 17.4672 20.4672 16.8831 20.7716 16.1481C21 15.5967 21 14.8978 21 13.5V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V13.5C3 14.8978 3 15.5967 3.22836 16.1481C3.53284 16.8831 4.11687 17.4672 4.85195 17.7716C5.40326 18 6.10218 18 7.5 18C7.98858 18 8.23287 18 8.45951 18.0535C8.76169 18.1248 9.04312 18.2656 9.2815 18.4645C9.46028 18.6137 9.60685 18.8091 9.9 19.2Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/components/icons/annotation.tsx

@@ -0,0 +1,22 @@
+import { ComponentProps } from 'react';
+
+export function Annotation(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M3 7.8C3 6.11984 3 5.27976 3.32698 4.63803C3.6146 4.07354 4.07354 3.6146 4.63803 3.32698C5.27976 3 6.11984 3 7.8 3H16.2C17.8802 3 18.7202 3 19.362 3.32698C19.9265 3.6146 20.3854 4.07354 20.673 4.63803C21 5.27976 21 6.11984 21 7.8V13.5C21 14.8978 21 15.5967 20.7716 16.1481C20.4672 16.8831 19.8831 17.4672 19.1481 17.7716C18.5967 18 17.8978 18 16.5 18C16.0114 18 15.7671 18 15.5405 18.0535C15.2383 18.1248 14.9569 18.2656 14.7185 18.4645C14.5397 18.6137 14.3931 18.8091 14.1 19.2L12.64 21.1467C12.4229 21.4362 12.3143 21.5809 12.1812 21.6327C12.0647 21.678 11.9353 21.678 11.8188 21.6327C11.6857 21.5809 11.5771 21.4362 11.36 21.1467L9.9 19.2C9.60685 18.8091 9.46028 18.6137 9.2815 18.4645C9.04312 18.2656 8.76169 18.1248 8.45951 18.0535C8.23287 18 7.98858 18 7.5 18C6.10218 18 5.40326 18 4.85195 17.7716C4.11687 17.4672 3.53284 16.8831 3.22836 16.1481C3 15.5967 3 14.8978 3 13.5V7.8Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/components/icons/announcement-01.tsx

@@ -0,0 +1,15 @@
+import { ComponentProps } from 'react';
+
+export function Announcement01(props: ComponentProps<'svg'>) {
+  return (
+    <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M22 7.99992V11.9999M10.25 5.49991H6.8C5.11984 5.49991 4.27976 5.49991 3.63803 5.82689C3.07354 6.11451 2.6146 6.57345 2.32698 7.13794C2 7.77968 2 8.61976 2 10.2999L2 11.4999C2 12.4318 2 12.8977 2.15224 13.2653C2.35523 13.7553 2.74458 14.1447 3.23463 14.3477C3.60218 14.4999 4.06812 14.4999 5 14.4999V18.7499C5 18.9821 5 19.0982 5.00963 19.1959C5.10316 20.1455 5.85441 20.8968 6.80397 20.9903C6.90175 20.9999 7.01783 20.9999 7.25 20.9999C7.48217 20.9999 7.59826 20.9999 7.69604 20.9903C8.64559 20.8968 9.39685 20.1455 9.49037 19.1959C9.5 19.0982 9.5 18.9821 9.5 18.7499V14.4999H10.25C12.0164 14.4999 14.1772 15.4468 15.8443 16.3556C16.8168 16.8857 17.3031 17.1508 17.6216 17.1118C17.9169 17.0756 18.1402 16.943 18.3133 16.701C18.5 16.4401 18.5 15.9179 18.5 14.8736V5.1262C18.5 4.08191 18.5 3.55976 18.3133 3.2988C18.1402 3.05681 17.9169 2.92421 17.6216 2.88804C17.3031 2.84903 16.8168 3.11411 15.8443 3.64427C14.1772 4.55302 12.0164 5.49991 10.25 5.49991Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/components/icons/announcement-02.tsx

@@ -0,0 +1,15 @@
+import { ComponentProps } from 'react';
+
+export function Announcement02(props: ComponentProps<'svg'>) {
+  return (
+    <svg {...props} width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M4 13.9999L5.57465 20.2985C5.61893 20.4756 5.64107 20.5642 5.66727 20.6415C5.92317 21.397 6.60352 21.9282 7.39852 21.9933C7.4799 21.9999 7.5712 21.9999 7.75379 21.9999C7.98244 21.9999 8.09677 21.9999 8.19308 21.9906C9.145 21.8982 9.89834 21.1449 9.99066 20.193C10 20.0967 10 19.9823 10 19.7537V5.49991M18.5 13.4999C20.433 13.4999 22 11.9329 22 9.99991C22 8.06691 20.433 6.49991 18.5 6.49991M10.25 5.49991H6.5C4.01472 5.49991 2 7.51463 2 9.99991C2 12.4852 4.01472 14.4999 6.5 14.4999H10.25C12.0164 14.4999 14.1772 15.4468 15.8443 16.3556C16.8168 16.8857 17.3031 17.1508 17.6216 17.1118C17.9169 17.0756 18.1402 16.943 18.3133 16.701C18.5 16.4401 18.5 15.9179 18.5 14.8736V5.1262C18.5 4.08191 18.5 3.55976 18.3133 3.2988C18.1402 3.05681 17.9169 2.92421 17.6216 2.88804C17.3031 2.84903 16.8168 3.11411 15.8443 3.64427C14.1772 4.55302 12.0164 5.49991 10.25 5.49991Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

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

@@ -0,0 +1,9 @@
+import { ComponentProps } from 'react';
+
+export function AppleLogo(props: ComponentProps<'svg'>) {
+  return (
+    <svg {...props} width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M20.8426 17.1447C20.5099 17.9133 20.1161 18.6208 19.6598 19.2713C19.0378 20.158 18.5286 20.7719 18.1361 21.1127C17.5277 21.6722 16.8759 21.9587 16.1779 21.975C15.6768 21.975 15.0725 21.8324 14.3691 21.5432C13.6633 21.2553 13.0148 21.1127 12.4217 21.1127C11.7998 21.1127 11.1327 21.2553 10.4193 21.5432C9.70469 21.8324 9.12904 21.9832 8.68892 21.9981C8.01957 22.0266 7.35239 21.7319 6.68644 21.1127C6.26139 20.742 5.72974 20.1064 5.09285 19.2061C4.40951 18.2446 3.84772 17.1297 3.4076 15.8587C2.93624 14.4857 2.69995 13.1563 2.69995 11.8692C2.69995 10.3948 3.01853 9.12321 3.65665 8.0576C4.15815 7.20166 4.82533 6.52647 5.66035 6.03081C6.49537 5.53514 7.39761 5.28256 8.36925 5.2664C8.9009 5.2664 9.59809 5.43085 10.4645 5.75405C11.3284 6.07834 11.8832 6.24279 12.1264 6.24279C12.3082 6.24279 12.9245 6.0505 13.9692 5.66714C14.9571 5.31162 15.7909 5.16441 16.474 5.2224C18.3249 5.37178 19.7155 6.10142 20.6402 7.41595C18.9849 8.41896 18.166 9.82379 18.1823 11.626C18.1972 13.0297 18.7065 14.1979 19.7073 15.1254C20.1609 15.5558 20.6674 15.8885 21.231 16.1248C21.1087 16.4793 20.9797 16.8188 20.8426 17.1447ZM16.5975 0.440125C16.5975 1.54038 16.1956 2.56768 15.3944 3.51854C14.4275 4.64892 13.258 5.30211 11.9898 5.19904C11.9736 5.06705 11.9642 4.92812 11.9642 4.78214C11.9642 3.7259 12.424 2.59552 13.2406 1.67127C13.6483 1.20331 14.1667 0.814209 14.7955 0.503814C15.4229 0.19805 16.0163 0.0289566 16.5744 0C16.5907 0.147086 16.5975 0.294182 16.5975 0.440111V0.440125Z" fill="currentColor"/>
+    </svg>
+  );
+}

package/src/components/icons/arrow-circle-broken-right.tsx

@@ -0,0 +1,16 @@
+import { ComponentProps } from 'react';
+
+export function ArrowCircleBrokenRight(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M3.33789 7C5.06694 4.01099 8.29866 2 12.0001 2C17.5229 2 22.0001 6.47715 22.0001 12C22.0001 17.5228 17.5229 22 12.0001 22C8.29866 22 5.06694 19.989 3.33789 17M12 16L16 12M16 12L12 8M16 12H2" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  );
+}