@grupor5/raya 0.1.0

package/src/atoms/checkbox/checkbox.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check, Minus } from "lucide-react"
+import { cn } from "../../utils/cn"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-5 w-5 shrink-0 rounded border-2 mx-s",
+      "focus-visible:outline-none focus-visible:shadow-focus",
+      // Unchecked
+      "border-primary-1200",
+      // Checked & Indeterminate
+      "data-[state=checked]:bg-primary-1200 data-[state=checked]:text-neutral-10 data-[state=checked]:border-primary-1200",
+      "data-[state=indeterminate]:bg-primary-1200 data-[state=indeterminate]:text-neutral-10 data-[state=indeterminate]:border-primary-1200",
+      // Pressed states
+      "data-[state=checked]:active:bg-primary-900 data-[state=indeterminate]:active:bg-primary-900",
+      // Disabled states
+      "disabled:cursor-not-allowed disabled:opacity-40",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      {props.checked === 'indeterminate' ? (
+        <Minus className="h-4 w-4" />
+      ) : (
+        <Check className="h-4 w-4" />
+      )}
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox } 

package/src/atoms/checkbox/index.ts

@@ -0,0 +1 @@
+export * from "./checkbox"; 

package/src/atoms/index.ts

@@ -0,0 +1,10 @@
+export * from './button';
+export * from './input';
+export * from './label';
+export * from './Icon';
+export * from './badge';
+export * from './tag';
+export * from './textarea';
+export * from './radio';
+export * from './switch';
+export * from './checkbox';

package/src/atoms/input/index.ts

@@ -0,0 +1 @@
+export { Input } from './input'; 

package/src/atoms/input/input.tsx

@@ -0,0 +1,67 @@
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  error?: string | boolean;
+  helperText?: string;
+  label?: string;
+  required?: boolean;
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, error, helperText, label, required, id, ...props }, ref) => {
+    const inputId = id || `input-${React.useId()}`;
+    
+    return (
+      <div className="space-y-2">
+        {label && (
+          <label 
+            htmlFor={inputId}
+            className={cn(
+              "text-body-xs font-normal leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+              required && "after:content-['*'] after:text-destructive after:ml-1"
+            )}
+          >
+            {label}
+          </label>
+        )}
+        
+        <input
+          id={inputId}
+          type={type}
+          className={cn(
+            "flex h-10 w-full rounded-lg border border-primary-600 bg-background px-3 py-2",
+            "text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium",
+            "placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+            "focus-visible:shadow-focus active:shadow-pressed",
+            error && "border-destructive focus-visible:shadow-destructive",
+            className
+          )}
+          ref={ref}
+          aria-invalid={error ? "true" : "false"}
+          aria-describedby={
+            error ? `${inputId}-error` : helperText ? `${inputId}-helper` : undefined
+          }
+          {...props}
+        />
+        
+        {helperText && !error && (
+          <p id={`${inputId}-helper`} className="text-body-xs text-muted-foreground">
+            {helperText}
+          </p>
+        )}
+        
+        {error && (
+          <p id={`${inputId}-error`} className="text-body-xs text-destructive">
+            {typeof error === 'string' ? error : 'Este campo tiene errores'}
+          </p>
+        )}
+      </div>
+    );
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

package/src/atoms/label/index.ts

@@ -0,0 +1 @@
+export { Label } from './label'; 

package/src/atoms/label/label.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../utils/cn"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

package/src/atoms/radio/index.ts

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

package/src/atoms/radio/radio.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { Circle } from "lucide-react"
+import { cn } from "../../utils/cn"
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-5 w-5 rounded-full border border-primary-1200 text-primary-1200 mx-s",
+        "focus:outline-none focus-visible:shadow-focus",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-3 w-3 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem } 

package/src/atoms/switch/index.ts

@@ -0,0 +1 @@
+export * from "./switch"; 

package/src/atoms/switch/switch.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+import { cn } from "../../utils/cn"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors mx-s",
+      "focus-visible:outline-none focus-visible:shadow-focus",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "data-[state=unchecked]:bg-primary-300 data-[state=checked]:bg-secondary-600",
+      // Pressed states
+      "data-[state=unchecked]:active:bg-primary-400 data-[state=checked]:active:bg-secondary-700",
+      // Disabled states
+      "data-[state=unchecked]:disabled:bg-primary-200 data-[state=checked]:disabled:bg-secondary-300",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-neutral-10 shadow-lg ring-0 transition-transform",
+        "data-[state=unchecked]:translate-x-0",
+        "data-[state=checked]:translate-x-5"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch } 

package/src/atoms/tag/index.ts

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

package/src/atoms/tag/tag.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../../utils';
+import { Icon } from '../Icon';
+
+const tagVariants = cva(
+  'group inline-flex items-center justify-center rounded-tag px-tag-x py-tag-y text-tag transition-colors',
+  {
+    variants: {
+      variant: {
+        default: 'bg-tag-default-background text-tag-default-text hover:bg-tag-default-hover-background',
+        success: 'bg-tag-success-background text-tag-success-text hover:bg-tag-success-hover-background',
+        warning: 'bg-tag-warning-background text-tag-warning-text hover:bg-tag-warning-hover-background',
+        danger: 'bg-tag-danger-background text-tag-danger-text hover:bg-tag-danger-hover-background',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+const bulletVariants = cva('', {
+  variants: {
+    variant: {
+      default: 'text-tag-default-bullet',
+      success: 'text-tag-success-bullet',
+      warning: 'text-tag-warning-bullet',
+      danger: 'text-tag-danger-bullet',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+const closeButtonVariants = cva(
+  'ml-2 flex-shrink-0 transition-colors',
+  {
+    variants: {
+      variant: {
+        default: 'text-tag-default-text hover:text-tag-default-hover-text',
+        success: 'text-tag-success-text hover:text-tag-success-hover-text',
+        warning: 'text-tag-warning-text hover:text-tag-warning-hover-text',
+        danger: 'text-tag-danger-text hover:text-tag-danger-hover-text',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface TagProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof tagVariants> {
+  showBullet?: boolean;
+  onClose?: () => void;
+}
+
+const Tag = React.forwardRef<HTMLDivElement, TagProps>(
+  ({ className, children, showBullet = false, onClose, variant, ...props }, ref) => {
+    return (
+      <div
+        className={cn(tagVariants({ variant, className }))}
+        ref={ref}
+        {...props}
+      >
+        {showBullet && (
+          <Icon
+            name="dot"
+            className={cn('mr-2', bulletVariants({ variant }))}
+            style={{ width: '12px', height: '12px' }}
+          />
+        )}
+        {children}
+        {onClose && (
+          <button
+            type="button"
+            onClick={onClose}
+            className={cn(closeButtonVariants({ variant }))}
+            aria-label="Remove tag"
+          >
+            <Icon
+              name="close-square"
+              style={{ width: '12px', height: '12px' }}
+            />
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+
+Tag.displayName = 'Tag';
+
+export { Tag }; 

package/src/atoms/textarea/index.ts

@@ -0,0 +1 @@
+export * from "./textarea"; 

package/src/atoms/textarea/textarea.tsx

@@ -0,0 +1,98 @@
+import * as React from "react";
+import { cn } from '../../utils/cn';
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  error?: string | boolean;
+  helperText?: string;
+  label?: string;
+  required?: boolean;
+}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, error, helperText, label, required, id, maxLength, value, onChange, defaultValue, ...props }, ref) => {
+    const textareaId = id || `textarea-${React.useId()}`;
+    
+    // State only for the character count in uncontrolled mode
+    const [charCount, setCharCount] = React.useState(String(defaultValue || '').length);
+    
+    // In controlled mode, the length is derived from the `value` prop
+    const isControlled = value !== undefined;
+    const currentLength = isControlled ? String(value).length : charCount;
+
+    const handleOnChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      if (!isControlled) {
+        setCharCount(e.target.value.length);
+      }
+      if (onChange) {
+        onChange(e); // Propagate event to parent
+      }
+    };
+
+    const displayCounter = typeof maxLength === 'number';
+
+    return (
+      <div className="w-full space-y-2">
+        {(label || displayCounter) && (
+          <div className="flex justify-between items-center">
+            {label ? (
+              <label
+                htmlFor={textareaId}
+                className={cn(
+                  "text-body-xs font-normal leading-none",
+                  "peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+                  required && "after:content-['*'] after:text-destructive after:ml-1"
+                )}
+              >
+                {label}
+              </label>
+            ) : <div />} {/* Spacer to keep counter on the right */}
+            {displayCounter && (
+              <span className="text-body-xs font-normal text-muted-foreground">
+                {currentLength}/{maxLength}
+              </span>
+            )}
+          </div>
+        )}
+
+        <textarea
+          id={textareaId}
+          className={cn(
+            "flex min-h-[80px] w-full rounded-lg border border-primary-600 bg-background px-3 py-2 text-body-sm",
+            "placeholder:text-muted-foreground",
+            "focus-visible:outline-none focus-visible:shadow-focus",
+            "active:shadow-pressed",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            error && "border-destructive focus-visible:shadow-destructive",
+            className
+          )}
+          ref={ref}
+          maxLength={maxLength}
+          value={value} 
+          defaultValue={defaultValue}
+          onChange={handleOnChange}
+          aria-invalid={error ? "true" : "false"}
+          aria-describedby={
+            error ? `${textareaId}-error` : helperText ? `${textareaId}-helper` : undefined
+          }
+          {...props}
+        />
+
+        {helperText && !error && (
+          <p id={`${textareaId}-helper`} className="text-body-xs text-muted-foreground">
+            {helperText}
+          </p>
+        )}
+
+        {error && (
+          <p id={`${textareaId}-error`} className="text-body-xs text-destructive">
+            {typeof error === 'string' ? error : 'Este campo tiene errores'}
+          </p>
+        )}
+      </div>
+    );
+  }
+);
+
+Textarea.displayName = "Textarea";
+export { Textarea }; 

package/src/hooks/index.ts

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

package/src/hooks/use-toast.ts

@@ -0,0 +1,191 @@
+// import * as React from "react"
+
+// import type {
+//   ToastActionElement,
+//   ToastProps,
+// } from "./toast"
+
+// const TOAST_LIMIT = 1
+// const TOAST_REMOVE_DELAY = 1000000
+
+// type ToasterToast = ToastProps & {
+//   id: string
+//   title?: React.ReactNode
+//   description?: React.ReactNode
+//   action?: ToastActionElement
+// }
+
+// const actionTypes = {
+//   ADD_TOAST: "ADD_TOAST",
+//   UPDATE_TOAST: "UPDATE_TOAST",
+//   DISMISS_TOAST: "DISMISS_TOAST",
+//   REMOVE_TOAST: "REMOVE_TOAST",
+// } as const
+
+// let count = 0
+
+// function genId() {
+//   count = (count + 1) % Number.MAX_SAFE_INTEGER
+//   return count.toString()
+// }
+
+// type ActionType = typeof actionTypes
+
+// type Action =
+//   | {
+//       type: ActionType["ADD_TOAST"]
+//       toast: ToasterToast
+//     }
+//   | {
+//       type: ActionType["UPDATE_TOAST"]
+//       toast: Partial<ToasterToast>
+//     }
+//   | {
+//       type: ActionType["DISMISS_TOAST"]
+//       toastId?: ToasterToast["id"]
+//     }
+//   | {
+//       type: ActionType["REMOVE_TOAST"]
+//       toastId?: ToasterToast["id"]
+//     }
+
+// interface State {
+//   toasts: ToasterToast[]
+// }
+
+// const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+// const addToRemoveQueue = (toastId: string) => {
+//   if (toastTimeouts.has(toastId)) {
+//     return
+//   }
+
+//   const timeout = setTimeout(() => {
+//     toastTimeouts.delete(toastId)
+//     dispatch({
+//       type: "REMOVE_TOAST",
+//       toastId: toastId,
+//     })
+//   }, TOAST_REMOVE_DELAY)
+
+//   toastTimeouts.set(toastId, timeout)
+// }
+
+// export const reducer = (state: State, action: Action): State => {
+//   switch (action.type) {
+//     case "ADD_TOAST":
+//       return {
+//         ...state,
+//         toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+//       }
+
+//     case "UPDATE_TOAST":
+//       return {
+//         ...state,
+//         toasts: state.toasts.map((t) =>
+//           t.id === action.toast.id ? { ...t, ...action.toast } : t
+//         ),
+//       }
+
+//     case "DISMISS_TOAST": {
+//       const { toastId } = action
+
+//       // ! Side effects ! - This could be extracted into a dismissToast() action,
+//       // but I'll keep it here for simplicity
+//       if (toastId) {
+//         addToRemoveQueue(toastId)
+//       } else {
+//         state.toasts.forEach((toast) => {
+//           addToRemoveQueue(toast.id)
+//         })
+//       }
+
+//       return {
+//         ...state,
+//         toasts: state.toasts.map((t) =>
+//           t.id === toastId || toastId === undefined
+//             ? {
+//                 ...t,
+//                 open: false,
+//               }
+//             : t
+//         ),
+//       }
+//     }
+//     case "REMOVE_TOAST":
+//       if (action.toastId === undefined) {
+//         return {
+//           ...state,
+//           toasts: [],
+//         }
+//       }
+//       return {
+//         ...state,
+//         toasts: state.toasts.filter((t) => t.id !== action.toastId),
+//       }
+//   }
+// }
+
+// const listeners: Array<(state: State) => void> = []
+
+// let memoryState: State = { toasts: [] }
+
+// function dispatch(action: Action) {
+//   memoryState = reducer(memoryState, action)
+//   listeners.forEach((listener) => {
+//     listener(memoryState)
+//   })
+// }
+
+// type Toast = Omit<ToasterToast, "id">
+
+// function toast({ ...props }: Toast) {
+//   const id = genId()
+
+//   const update = (props: ToasterToast) =>
+//     dispatch({
+//       type: "UPDATE_TOAST",
+//       toast: { ...props, id },
+//     })
+//   const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+//   dispatch({
+//     type: "ADD_TOAST",
+//     toast: {
+//       ...props,
+//       id,
+//       open: true,
+//       onOpenChange: (open) => {
+//         if (!open) dismiss()
+//       },
+//     },
+//   })
+
+//   return {
+//     id: id,
+//     dismiss,
+//     update,
+//   }
+// }
+
+// function useToast() {
+//   const [state, setState] = React.useState<State>(memoryState)
+
+//   React.useEffect(() => {
+//     listeners.push(setState)
+//     return () => {
+//       const index = listeners.indexOf(setState)
+//       if (index > -1) {
+//         listeners.splice(index, 1)
+//       }
+//     }
+//   }, [state])
+
+//   return {
+//     ...state,
+//     toast,
+//     dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+//   }
+// }
+
+// export { useToast, toast }

package/src/hooks/useModal.ts

@@ -0,0 +1,8 @@
+import { useState } from 'react';
+
+export function useModal(initialOpen: boolean = false) {
+  const [open, setOpen] = useState(initialOpen);
+  function openModal() { setOpen(true); }
+  function closeModal() { setOpen(false); }
+  return { open, openModal, closeModal };
+}

package/src/icons/archive/archive-add.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M14.5 11.4H9.5C9.09 11.4 8.75 11.06 8.75 10.65C8.75 10.24 9.09 9.90002 9.5 9.90002H14.5C14.91 9.90002 15.25 10.24 15.25 10.65C15.25 11.06 14.91 11.4 14.5 11.4Z" /><path fill="currentColor" d="M12 13.96C11.59 13.96 11.25 13.62 11.25 13.21V8.21002C11.25 7.80002 11.59 7.46002 12 7.46002C12.41 7.46002 12.75 7.80002 12.75 8.21002V13.21C12.75 13.62 12.41 13.96 12 13.96Z" /><path fill="currentColor" d="M19.0703 22.75C18.5603 22.75 18.0003 22.6 17.4603 22.29L12.5803 19.58C12.2903 19.42 11.7203 19.42 11.4303 19.58L6.55031 22.29C5.56031 22.84 4.55031 22.9 3.78031 22.44C3.01031 21.99 2.57031 21.08 2.57031 19.95V5.86C2.57031 3.32 4.64031 1.25 7.18031 1.25H16.8303C19.3703 1.25 21.4403 3.32 21.4403 5.86V19.95C21.4403 21.08 21.0003 21.99 20.2303 22.44C19.8803 22.65 19.4803 22.75 19.0703 22.75ZM12.0003 17.96C12.4703 17.96 12.9303 18.06 13.3003 18.27L18.1803 20.98C18.6903 21.27 19.1603 21.33 19.4603 21.15C19.7603 20.97 19.9303 20.54 19.9303 19.95V5.86C19.9303 4.15 18.5303 2.75 16.8203 2.75H7.18031C5.47031 2.75 4.07031 4.15 4.07031 5.86V19.95C4.07031 20.54 4.24031 20.98 4.54031 21.15C4.84031 21.32 5.31031 21.27 5.82031 20.98L10.7003 18.27C11.0703 18.06 11.5303 17.96 12.0003 17.96Z" /></svg>

package/src/icons/archive/archive-minus.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M14.5 11.4H9.5C9.09 11.4 8.75 11.06 8.75 10.65C8.75 10.24 9.09 9.90002 9.5 9.90002H14.5C14.91 9.90002 15.25 10.24 15.25 10.65C15.25 11.06 14.91 11.4 14.5 11.4Z" /><path fill="currentColor" d="M4.92957 22.75C4.50957 22.75 4.11957 22.65 3.76957 22.45C2.99957 22 2.55957 21.09 2.55957 19.96V5.86C2.55957 3.32 4.62957 1.25 7.16957 1.25H16.8196C19.3596 1.25 21.4296 3.32 21.4296 5.86V19.95C21.4296 21.08 20.9896 21.99 20.2196 22.44C19.4496 22.89 18.4396 22.84 17.4496 22.29L12.5696 19.58C12.2796 19.42 11.7096 19.42 11.4196 19.58L6.53957 22.29C5.99957 22.59 5.44957 22.75 4.92957 22.75ZM7.17957 2.75C5.46957 2.75 4.06957 4.15 4.06957 5.86V19.95C4.06957 20.54 4.23957 20.98 4.53957 21.15C4.83957 21.33 5.30957 21.27 5.81957 20.98L10.6996 18.27C11.4396 17.86 12.5596 17.86 13.2996 18.27L18.1796 20.98C18.6896 21.27 19.1596 21.33 19.4596 21.15C19.7596 20.97 19.9296 20.53 19.9296 19.95V5.86C19.9296 4.15 18.5296 2.75 16.8196 2.75H7.17957Z" /></svg>

package/src/icons/archive/archive-slash.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M2.00043 22.75C1.81043 22.75 1.62043 22.68 1.47043 22.53C1.18043 22.24 1.18043 21.76 1.47043 21.47L21.4704 1.47C21.7604 1.18 22.2404 1.18 22.5304 1.47C22.8204 1.76 22.8204 2.24 22.5304 2.53L2.53043 22.53C2.38043 22.68 2.19043 22.75 2.00043 22.75Z" /><path fill="currentColor" d="M18.8797 22.75C18.3197 22.75 17.7197 22.58 17.1197 22.25L10.5997 18.18C10.2497 17.96 10.1397 17.5 10.3597 17.15C10.5797 16.8 11.0397 16.69 11.3897 16.91L17.8797 20.96C18.4397 21.27 18.9997 21.34 19.3597 21.13C19.7197 20.92 19.9297 20.4 19.9297 19.71V8.71002C19.9297 8.30002 20.2697 7.96002 20.6797 7.96002C21.0897 7.96002 21.4297 8.30002 21.4297 8.71002V19.71C21.4297 20.94 20.9497 21.93 20.1197 22.42C19.7497 22.64 19.3297 22.75 18.8797 22.75Z" /><path fill="currentColor" d="M3.32031 20.7C2.91031 20.7 2.57031 20.36 2.57031 19.95V5.86C2.57031 3.32 4.64031 1.25 7.18031 1.25H16.8303C18.2203 1.25 19.5303 1.87 20.4103 2.96C20.6703 3.28 20.6203 3.75 20.3003 4.02C19.9803 4.28 19.5103 4.23 19.2503 3.91C18.6503 3.17 17.7703 2.75 16.8303 2.75H7.18031C5.47031 2.75 4.07031 4.15 4.07031 5.86V19.95C4.07031 20.36 3.73031 20.7 3.32031 20.7Z" /></svg>

package/src/icons/archive/archive-tick.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M4.92957 22.75C4.50957 22.75 4.11957 22.65 3.76957 22.45C2.99957 22 2.55957 21.09 2.55957 19.96V5.86C2.55957 3.32 4.62957 1.25 7.16957 1.25H16.8196C19.3596 1.25 21.4296 3.32 21.4296 5.86V19.95C21.4296 21.08 20.9896 21.99 20.2196 22.44C19.4496 22.89 18.4396 22.84 17.4496 22.29L12.5696 19.58C12.2796 19.42 11.7096 19.42 11.4196 19.58L6.53957 22.29C5.99957 22.59 5.44957 22.75 4.92957 22.75ZM7.17957 2.75C5.46957 2.75 4.06957 4.15 4.06957 5.86V19.95C4.06957 20.54 4.23957 20.98 4.53957 21.15C4.83957 21.32 5.30957 21.27 5.81957 20.98L10.6996 18.27C11.4396 17.86 12.5596 17.86 13.2996 18.27L18.1796 20.98C18.6896 21.27 19.1596 21.33 19.4596 21.15C19.7596 20.97 19.9296 20.53 19.9296 19.95V5.86C19.9296 4.15 18.5296 2.75 16.8196 2.75H7.17957Z" /><path fill="currentColor" d="M11.0903 13.25C10.9003 13.25 10.7103 13.18 10.5603 13.03L9.06027 11.53C8.77027 11.24 8.77027 10.76 9.06027 10.47C9.35027 10.18 9.83027 10.18 10.1203 10.47L11.0903 11.44L14.5603 7.97C14.8503 7.68 15.3303 7.68 15.6203 7.97C15.9103 8.26 15.9103 8.74 15.6203 9.03L11.6203 13.03C11.4703 13.18 11.2803 13.25 11.0903 13.25Z" /></svg>