@lark-apaas/coding-templates 0.1.0

package/template-nextjs-static/src/components/ui/form.tsx

@@ -0,0 +1,167 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState } = useFormContext()
+  const formState = useFormState({ name: fieldContext.name })
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot="form-item"
+        className={cn("grid gap-2", className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  )
+}
+
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn("data-[error=true]:text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? "") : props.children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn("text-destructive text-sm", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}

package/template-nextjs-static/src/components/ui/hover-card.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  )
+}
+
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

package/template-nextjs-static/src/components/ui/icons/file-ae-colorful-icon.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+export function FileAeColorfulIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M3 3C3 1.89543 3.89543 1 5 1H14.5858C14.851 1 15.1054 1.10536 15.2929 1.29289L20.7071 6.70711C20.8946 6.89464 21 7.149 21 7.41421V21C21 22.1046 20.1046 23 19 23H5C3.89543 23 3 22.1046 3 21V3Z"
+        fill="#BF3DBF"
+      />
+      <path
+        opacity="0.8"
+        d="M15 1.48284C15 1.30466 15.2154 1.21543 15.3414 1.34142L20.6586 6.65858C20.7846 6.78457 20.6953 7 20.5172 7H17C15.8954 7 15 6.10457 15 5V1.48284Z"
+        fill="#A630A6"
+      />
+      <path
+        d="M7.5153 17.957L8.27031 15.91H11.3271L12.0808 17.957C12.1108 18.0383 12.1869 18.0922 12.272 18.0922H13.1295C13.1549 18.0922 13.1801 18.0874 13.2037 18.078C13.3088 18.0361 13.3609 17.9152 13.3199 17.8078L10.4623 10.316C10.4318 10.2359 10.3562 10.1831 10.2719 10.1831H9.33439C9.25016 10.1831 9.17457 10.2359 9.144 10.316L6.28639 17.8078C6.27719 17.832 6.27246 17.8576 6.27246 17.8836C6.27246 17.9988 6.36394 18.0922 6.47679 18.0922H7.32405C7.40915 18.0922 7.48534 18.0383 7.5153 17.957ZM10.9512 14.8195H8.64627L9.8072 11.8195L10.9512 14.8195ZM15.1782 16.9365C15.3602 17.1518 15.6104 17.2584 15.9382 17.2584C16.2197 17.2584 16.4497 17.1851 16.6177 17.0448C16.6247 17.0388 16.6411 17.0253 16.659 17.0104C16.6838 16.9899 16.7116 16.9669 16.7214 16.9584C16.7717 16.915 16.8048 16.8791 16.8379 16.8294C16.8646 16.7892 16.8908 16.74 16.9186 16.677C16.9512 16.603 17.0019 16.5696 17.0902 16.5757L17.7618 16.6221C17.8817 16.6304 17.9154 16.7461 17.8852 16.8478C17.7888 17.1721 17.6808 17.3196 17.3545 17.6283C16.9795 17.9712 16.5017 18.1456 15.9382 18.1456C15.3099 18.1456 14.7882 17.9238 14.4076 17.4941C14.0222 17.0607 13.8343 16.4916 13.8343 15.7689C13.8343 15.1092 14.0155 14.5583 14.3775 14.1243C14.7564 13.6432 15.2724 13.4002 15.9148 13.4002C16.6236 13.4002 17.1721 13.6543 17.5337 14.1532C17.8511 14.5853 18.0179 15.1884 18.0343 15.9511C18.0363 16.0466 17.9605 16.1257 17.865 16.1277L17.8613 16.1278H14.8688C14.9136 16.4782 15.0164 16.7452 15.1782 16.9365ZM15.2057 14.5893C15.0474 14.7648 14.9434 14.9928 14.8919 15.2809H16.995C16.8883 14.6054 16.5432 14.2875 15.9304 14.2875C15.6254 14.2875 15.3886 14.3866 15.2057 14.5893Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/template-nextjs-static/src/components/ui/icons/file-ai-colorful-icon.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+export function FileAiColorfulIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3 3C3 1.89543 3.89543 1 5 1H14.5858C14.851 1 15.1054 1.10536 15.2929 1.29289L20.7071 6.70711C20.8946 6.89464 21 7.149 21 7.41421V21C21 22.1046 20.1046 23 19 23H5C3.89543 23 3 22.1046 3 21V3Z"
+        fill="#FF811A"
+      />
+      <path
+        opacity="0.5"
+        d="M15 1.48284C15 1.30466 15.2154 1.21543 15.3414 1.34142L20.6586 6.65858C20.7846 6.78457 20.6953 7 20.5172 7H17C15.8954 7 15 6.10457 15 5V1.48284Z"
+        fill="#C25705"
+      />
+      <path
+        d="M8.06095 17.9557L8.81597 15.9088H11.8727L12.6264 17.9557C12.6564 18.0371 12.7326 18.0909 12.8177 18.0909H13.6752C13.7006 18.0909 13.7257 18.0861 13.7494 18.0767C13.8545 18.0349 13.9065 17.9139 13.8656 17.8065L11.008 10.3147C10.9774 10.2346 10.9018 10.1818 10.8176 10.1818H9.88004C9.79582 10.1818 9.72022 10.2346 9.68965 10.3147L6.83205 17.8065C6.82284 17.8307 6.81812 17.8564 6.81812 17.8823C6.81812 17.9975 6.9096 18.0909 7.02244 18.0909H7.8697C7.9548 18.0909 8.03099 18.0371 8.06095 17.9557ZM11.4968 14.8182H9.19192L10.3529 11.8182L11.4968 14.8182Z"
+        fill="white"
+      />
+      <path
+        d="M15.414 12.8636C15.414 12.5875 15.6378 12.3636 15.914 12.3636H16.1412C16.4174 12.3636 16.6412 12.5875 16.6412 12.8636V13.0909C16.6412 13.3671 16.4174 13.5909 16.1412 13.5909H15.914C15.6378 13.5909 15.414 13.3671 15.414 13.0909V12.8636Z"
+        fill="white"
+      />
+      <path
+        d="M15.914 14.2727C15.6378 14.2727 15.414 14.4966 15.414 14.7727V17.5909C15.414 17.8671 15.6378 18.0909 15.914 18.0909H16.1412C16.4174 18.0909 16.6412 17.8671 16.6412 17.5909V14.7727C16.6412 14.4966 16.4174 14.2727 16.1412 14.2727H15.914Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/template-nextjs-static/src/components/ui/icons/file-android-colorful-icon.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+
+export function FileAndroidColorfulIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M3 3C3 1.89543 3.89543 1 5 1H14.5858C14.851 1 15.1054 1.10536 15.2929 1.29289L20.7071 6.70711C20.8946 6.89464 21 7.149 21 7.41421V21C21 22.1046 20.1046 23 19 23H5C3.89543 23 3 22.1046 3 21V3Z"
+        fill="#35BD4B"
+      />
+      <path
+        opacity="0.9"
+        d="M15 1.48284C15 1.30466 15.2154 1.21543 15.3414 1.34142L20.6586 6.65858C20.7846 6.78457 20.6953 7 20.5172 7H17C15.8954 7 15 6.10457 15 5V1.48284Z"
+        fill="#32A645"
+      />
+      <path
+        d="M13.8667 9.32705C13.7471 9.25802 13.5942 9.29899 13.5251 9.41856L13.0551 10.2328C12.7345 10.0834 12.377 9.9999 12 9.9999C11.6127 9.9999 11.246 10.088 10.9188 10.2452L10.4582 9.44737C10.3891 9.3278 10.2362 9.28683 10.1167 9.35586C9.99708 9.4249 9.95611 9.5778 10.0251 9.69737L10.4919 10.5058C9.88929 10.9623 9.5 11.6856 9.5 12.4999H14.5C14.5 11.6752 14.1007 10.9438 13.4848 10.4884L13.9582 9.66856C14.0272 9.54899 13.9862 9.39609 13.8667 9.32705ZM11.5 11.5001C11.5 11.6381 11.3881 11.7501 11.25 11.7501C11.1119 11.7501 11 11.6381 11 11.5001C11 11.362 11.1119 11.2501 11.25 11.2501C11.3881 11.2501 11.5 11.362 11.5 11.5001ZM12.75 11.7501C12.6119 11.7501 12.5 11.6381 12.5 11.5001C12.5 11.362 12.6119 11.2501 12.75 11.2501C12.8881 11.2501 13 11.362 13 11.5001C13 11.6381 12.8881 11.7501 12.75 11.7501Z"
+        fill="white"
+      />
+      <path
+        d="M14.5 15.9999V12.9999H9.5V15.9999C9.5 16.7402 9.9022 17.3865 10.5 17.7323V18.9999C10.5 19.276 10.7239 19.4999 11 19.4999C11.2761 19.4999 11.5 19.276 11.5 18.9999V17.9999H12.5V18.9999C12.5 19.276 12.7239 19.4999 13 19.4999C13.2761 19.4999 13.5 19.276 13.5 18.9999V17.7323C14.0978 17.3865 14.5 16.7402 14.5 15.9999Z"
+        fill="white"
+      />
+      <path
+        d="M15.5 12.9999C15.2239 12.9999 15 13.2238 15 13.4999V14.9999C15 15.276 15.2239 15.4999 15.5 15.4999C15.7761 15.4999 16 15.276 16 14.9999V13.4999C16 13.2238 15.7761 12.9999 15.5 12.9999Z"
+        fill="white"
+      />
+      <path
+        d="M8.5 12.9999C8.22386 12.9999 8 13.2238 8 13.4999V14.9999C8 15.276 8.22386 15.4999 8.5 15.4999C8.77614 15.4999 9 15.276 9 14.9999V13.4999C9 13.2238 8.77614 12.9999 8.5 12.9999Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/template-nextjs-static/src/components/ui/icons/file-audio-colorful-icon.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+export function FileAudioColorfulIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M3 3C3 1.89543 3.89543 1 5 1H14.5858C14.851 1 15.1054 1.10536 15.2929 1.29289L20.7071 6.70711C20.8946 6.89464 21 7.149 21 7.41421V21C21 22.1046 20.1046 23 19 23H5C3.89543 23 3 22.1046 3 21V3Z"
+        fill="#35BD4B"
+      />
+      <path
+        opacity="0.9"
+        d="M15 1.48284C15 1.30466 15.2154 1.21543 15.3414 1.34142L20.6586 6.65858C20.7846 6.78457 20.6953 7 20.5172 7H17C15.8954 7 15 6.10457 15 5V1.48284Z"
+        fill="#32A645"
+      />
+      <path
+        d="M14.9814 9.65967C15.1899 9.70858 15.344 9.88482 15.3648 10.0979L15.4574 11.0474C15.4903 11.3855 15.1838 11.6573 14.8521 11.5842L12.5502 11.0769C12.4177 11.0477 12.2952 11.1562 12.3081 11.2912L12.8466 16.9414C12.8466 17.0285 12.8357 17.086 12.8162 17.1188C12.7684 18.2815 11.8107 19.2094 10.6363 19.2094C9.4313 19.2094 8.45447 18.2326 8.45447 17.0276C8.45447 15.8226 9.4313 14.8458 10.6363 14.8458C11.1344 14.8458 11.5935 15.0127 11.9608 15.2936L11.4549 9.50628C11.4252 9.16716 11.7358 8.89821 12.0672 8.97596L14.9814 9.65967Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/template-nextjs-static/src/components/ui/icons/file-code-colorful-icon.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+export function FileCodeColorfulIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3 3C3 1.89543 3.89543 1 5 1H14.5858C14.851 1 15.1054 1.10536 15.2929 1.29289L20.7071 6.70711C20.8946 6.89464 21 7.149 21 7.41421V21C21 22.1046 20.1046 23 19 23H5C3.89543 23 3 22.1046 3 21V3Z"
+        fill="#336DF4"
+      />
+      <path
+        opacity="0.7"
+        d="M15 1.48284C15 1.30466 15.2154 1.21543 15.3414 1.34142L20.6586 6.65858C20.7846 6.78457 20.6953 7 20.5172 7H17C15.8954 7 15 6.10457 15 5V1.48284Z"
+        fill="#0442D2"
+      />
+      <path
+        d="M10.2966 11.4764L7.76958 14.1363L10.2966 16.7961C10.3873 16.8916 10.3873 17.0447 10.293 17.1381L10.292 17.1391L9.95252 17.4774C9.8597 17.5698 9.7118 17.5677 9.62149 17.4727L6.61239 14.3054C6.52308 14.2114 6.52308 14.0611 6.61239 13.9671L9.62149 10.7999C9.7118 10.7048 9.8597 10.7027 9.95252 10.7952L10.292 11.1335C10.3852 11.2263 10.3877 11.3794 10.2976 11.4754L10.2966 11.4764ZM16.3178 14.1363L13.9712 11.4764C13.887 11.381 13.8885 11.2278 13.9746 11.1344L13.9755 11.1335L14.2908 10.7952C14.3769 10.7027 14.5143 10.7048 14.5981 10.7999L17.3923 13.9671C17.4752 14.0611 17.4752 14.2114 17.3923 14.3054L14.5981 17.4727C14.5143 17.5677 14.3769 17.5698 14.2908 17.4774L13.9755 17.1391C13.8889 17.0462 13.8866 16.8931 13.9704 16.7971L13.9712 16.7961L16.3178 14.1363ZM12.6285 9.09234L13.1203 9.14509C13.2546 9.15949 13.3509 9.27213 13.3353 9.39669L12.1614 18.7083C12.1457 18.8327 12.0244 18.9219 11.8902 18.9075L11.3984 18.8547C11.2642 18.8403 11.1679 18.7277 11.1834 18.6031L12.3574 9.2915C12.373 9.16708 12.4944 9.07796 12.6285 9.09234Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/template-nextjs-static/src/components/ui/icons/file-csv-colorful-icon.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+export function FileCsvColorfulIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M3 3C3 1.89543 3.89543 1 5 1H14.5858C14.851 1 15.1054 1.10536 15.2929 1.29289L20.7071 6.70711C20.8946 6.89464 21 7.149 21 7.41421V21C21 22.1046 20.1046 23 19 23H5C3.89543 23 3 22.1046 3 21V3Z"
+        fill="#35BD4B"
+      />
+      <path
+        opacity="0.9"
+        d="M15 1.48284C15 1.30466 15.2154 1.21543 15.3414 1.34142L20.6586 6.65858C20.7846 6.78457 20.6953 7 20.5172 7H17C15.8954 7 15 6.10457 15 5V1.48284Z"
+        fill="#32A645"
+      />
+      <path
+        d="M12.0767 10.4528C12.979 10.4528 13.7203 10.7465 14.3004 11.2514C14.5824 11.4947 14.8268 11.9192 14.9997 12.2801C15.148 12.5897 14.9123 12.9264 14.5689 12.9264H14.3771C14.1969 12.9264 14.0312 12.8291 13.9315 12.6789C13.7922 12.4691 13.5771 12.1789 13.3658 12.0284C13.022 11.776 12.5816 11.6429 12.0445 11.6429C11.2388 11.6429 10.6372 11.9481 10.229 12.5447C9.85304 13.0725 9.62122 13.7974 9.62122 14.7383C9.62122 15.7021 9.85304 16.4573 10.2183 16.9736C10.6157 17.5243 11.2388 17.8604 12.0767 17.8604C12.6246 17.8604 13.0757 17.662 13.4195 17.3867C13.6332 17.2054 13.8249 16.8625 13.9471 16.6093C14.037 16.4231 14.222 16.2954 14.4288 16.2954H14.6528C14.9804 16.2954 15.2147 16.6043 15.0974 16.9101C14.9283 17.3505 14.6578 17.9181 14.3004 18.226C13.6615 18.7765 13.153 18.9947 12.0767 19.0237C10.8407 19.057 9.85304 18.557 9.22999 17.7079C8.68213 16.9736 8.41357 15.9869 8.41357 14.7477C8.41357 13.5315 8.69287 12.5333 9.26222 11.776C9.90675 10.904 10.8521 10.4528 12.0767 10.4528Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/template-nextjs-static/src/components/ui/icons/file-eml-colorful-icon.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+export function FileEmlColorfulIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M3 3C3 1.89543 3.89543 1 5 1H14.5858C14.851 1 15.1054 1.10536 15.2929 1.29289L20.7071 6.70711C20.8946 6.89464 21 7.149 21 7.41421V21C21 22.1046 20.1046 23 19 23H5C3.89543 23 3 22.1046 3 21V3Z"
+        fill="#336DF4"
+      />
+      <path
+        opacity="0.7"
+        d="M15 1.48284C15 1.30466 15.2154 1.21543 15.3414 1.34142L20.6586 6.65858C20.7846 6.78457 20.6953 7 20.5172 7H17C15.8954 7 15 6.10457 15 5V1.48284Z"
+        fill="#0442D2"
+      />
+      <path
+        d="M13.7358 16.9998L13.7358 13.0029L12.778 15.0234C12.5612 15.4807 11.9105 15.4807 11.6937 15.0234L10.7358 13.0029L10.7358 16.9998C10.7358 17.276 10.512 17.4998 10.2358 17.4998C9.9597 17.4998 9.73584 17.276 9.73584 16.9998L9.73584 11.6698C9.73584 10.9231 10.7485 10.6952 11.0684 11.3699L12.2358 13.8326L13.4033 11.3699C13.7232 10.6952 14.7358 10.9231 14.7358 11.6697L14.7358 16.9998C14.7358 17.276 14.512 17.4998 14.2358 17.4998C13.9597 17.4998 13.7358 17.276 13.7358 16.9998Z"
+        fill="white"
+      />
+      <path
+        d="M6.6 10.9998C5.99249 10.9998 5.5 11.4922 5.5 12.0998V16.3998C5.5 17.0073 5.99249 17.4998 6.6 17.4998H8.5C8.77614 17.4998 9 17.2759 9 16.9998C9 16.7236 8.77614 16.4998 8.5 16.4998H6.6C6.54477 16.4998 6.5 16.455 6.5 16.3998V14.7961H8.5C8.77614 14.7961 9 14.5723 9 14.2961C9 14.02 8.77614 13.7961 8.5 13.7961H6.5V12.0998C6.5 12.0445 6.54477 11.9998 6.6 11.9998H8.5C8.77614 11.9998 9 11.7759 9 11.4998C9 11.2236 8.77614 10.9998 8.5 10.9998H6.6Z"
+        fill="white"
+      />
+      <path
+        d="M16 10.9998C16.2761 10.9998 16.5 11.2236 16.5 11.4998V16.4998H18.5C18.7761 16.4998 19 16.7236 19 16.9998C19 17.2759 18.7761 17.4998 18.5 17.4998H16.5C15.9477 17.4998 15.5 17.052 15.5 16.4998V11.4998C15.5 11.2236 15.7239 10.9998 16 10.9998Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/template-nextjs-static/src/components/ui/icons/file-ios-colorful-icon.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+export function FileIosColorfulIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M3 3C3 1.89543 3.89543 1 5 1H14.5858C14.851 1 15.1054 1.10536 15.2929 1.29289L20.7071 6.70711C20.8946 6.89464 21 7.149 21 7.41421V21C21 22.1046 20.1046 23 19 23H5C3.89543 23 3 22.1046 3 21V3Z"
+        fill="#336DF4"
+      />
+      <path
+        opacity="0.7"
+        d="M15 1.48284C15 1.30466 15.2154 1.21543 15.3414 1.34142L20.6586 6.65858C20.7846 6.78457 20.6953 7 20.5172 7H17C15.8954 7 15 6.10457 15 5V1.48284Z"
+        fill="#0442D2"
+      />
+      <path
+        d="M13.5701 10.3074C13.8115 9.9752 13.9303 9.60214 13.944 9.19354C13.944 9.1785 13.9441 9.16347 13.9441 9.14843C13.9441 9.11273 13.9441 9.07704 13.944 9.04134C13.9438 9.00711 13.9353 8.99905 13.901 9.00008C13.8938 9.0003 13.8867 9.00119 13.8795 9.00207L13.8779 9.00228C13.4419 9.05488 13.0641 9.24352 12.7202 9.50641C12.5715 9.62005 12.4593 9.7693 12.3502 9.92017C12.1764 10.1605 12.0559 10.4244 12.0001 10.7161C11.9707 10.8691 11.9467 11.0231 11.9762 11.1797C11.981 11.2055 11.9905 11.2156 12.0171 11.2173C12.1842 11.2286 12.3462 11.2017 12.5045 11.1514C12.8167 11.0523 13.0732 10.8643 13.3046 10.6392C13.3928 10.5534 13.4648 10.4534 13.5368 10.3536C13.5479 10.3382 13.5589 10.3228 13.5701 10.3074Z"
+        fill="white"
+      />
+      <path
+        d="M8.15792 13.0401C8.04442 13.4226 7.99704 13.8146 8.00014 14.2822C8.00302 14.3153 8.0058 14.354 8.00885 14.3965C8.01661 14.5045 8.02618 14.6376 8.04382 14.7696C8.12472 15.3751 8.30491 15.9508 8.56071 16.5018C8.70739 16.8177 8.87837 17.1198 9.08006 17.4025C9.27314 17.6732 9.4704 17.9401 9.7168 18.165C9.86567 18.3008 10.027 18.413 10.2134 18.4863C10.3389 18.5356 10.4691 18.5541 10.6022 18.5418C10.7458 18.5286 10.8875 18.5017 11.0239 18.4519C11.1303 18.413 11.2364 18.3728 11.3414 18.3299C11.587 18.2296 11.8417 18.1711 12.105 18.151C12.3152 18.1349 12.5188 18.1743 12.7172 18.2395C12.8283 18.276 12.938 18.317 13.0477 18.358C13.1087 18.3807 13.1696 18.4035 13.2308 18.4255C13.3952 18.4846 13.566 18.5219 13.7389 18.5252C13.9793 18.5298 14.2029 18.4577 14.4005 18.315C14.5522 18.2054 14.6905 18.0797 14.8078 17.9312C14.83 17.9031 14.8526 17.8754 14.8753 17.8478C14.8994 17.8183 14.9236 17.7889 14.9471 17.7589C15.1719 17.4726 15.3799 17.1744 15.5495 16.8499C15.688 16.5849 15.8021 16.3087 15.9002 16.0255C15.9159 15.9802 15.9136 15.9732 15.8709 15.9532C15.8669 15.9513 15.8629 15.9495 15.8589 15.9477L15.8568 15.9468C15.5996 15.8336 15.3773 15.6678 15.1846 15.4623C15.036 15.3038 14.9046 15.1301 14.8097 14.931C14.656 14.6087 14.6035 14.2658 14.6048 13.9095C14.6058 13.6463 14.6643 13.3963 14.7618 13.1579C14.9342 12.7368 15.2342 12.4278 15.6133 12.1954C15.6502 12.1728 15.6535 12.1608 15.6251 12.1268C15.6119 12.1109 15.598 12.0956 15.5842 12.0802C15.5713 12.0659 15.5584 12.0516 15.546 12.0369C15.4551 11.9292 15.3594 11.8262 15.2524 11.7352C15.0735 11.583 14.8659 11.4808 14.6515 11.3966C14.3947 11.2959 14.1255 11.2464 13.8504 11.2351C13.6997 11.2289 13.5488 11.2245 13.3998 11.2578C13.1659 11.3103 12.939 11.3865 12.7129 11.4665C12.5555 11.5222 12.3968 11.5742 12.2382 11.6261C12.1921 11.6412 12.1459 11.6563 12.0999 11.6715C12.0459 11.6893 11.9911 11.6883 11.9349 11.6771C11.8041 11.6509 11.6775 11.6105 11.5527 11.5638C11.3177 11.4757 11.0819 11.3898 10.838 11.331C10.6793 11.2928 10.5189 11.2614 10.355 11.2666C10.2118 11.2712 10.0701 11.2938 9.93032 11.3259C9.64924 11.3904 9.3916 11.5115 9.15379 11.6757C8.99012 11.7887 8.83861 11.9184 8.70382 12.0664C8.58697 12.1947 8.49551 12.3425 8.4107 12.4943C8.31279 12.6695 8.21565 12.8456 8.15792 13.0401Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/template-nextjs-static/src/components/ui/icons/file-keynote-colorful-icon.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+export function FileKeynoteColorfulIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M3 3C3 1.89543 3.89543 1 5 1H14.5858C14.851 1 15.1054 1.10536 15.2929 1.29289L20.7071 6.70711C20.8946 6.89464 21 7.149 21 7.41421V21C21 22.1046 20.1046 23 19 23H5C3.89543 23 3 22.1046 3 21V3Z"
+        fill="#336DF4"
+      />
+      <path
+        opacity="0.7"
+        d="M15 1.48284C15 1.30466 15.2154 1.21543 15.3414 1.34142L20.6586 6.65858C20.7846 6.78457 20.6953 7 20.5172 7H17C15.8954 7 15 6.10457 15 5V1.48284Z"
+        fill="#0442D2"
+      />
+      <path
+        d="M8.54222 10.6274C8.59456 10.2169 8.94394 9.90918 9.35784 9.90918H14.6422C15.0561 9.90918 15.4055 10.2169 15.4578 10.6274L15.8182 13.4546H8.18183L8.54222 10.6274Z"
+        fill="white"
+      />
+      <path
+        d="M9.81891 18.6504C9.81891 18.4921 9.94727 18.3637 10.1056 18.3637H10.7735C11.3006 18.3637 11.728 17.9364 11.728 17.4092V15.3637H12.2735V17.4092C12.2735 17.9364 12.7008 18.3637 13.228 18.3637H13.8959C14.0542 18.3637 14.1826 18.4921 14.1826 18.6504C14.1826 18.7933 14.0667 18.9092 13.9238 18.9092H10.0777C9.93477 18.9092 9.81891 18.7933 9.81891 18.6504Z"
+        fill="white"
+      />
+      <path
+        d="M8.12239 14.2728C7.86648 14.2728 7.75148 14.5935 7.94908 14.7561C7.9979 14.7963 8.05916 14.8183 8.12239 14.8183H15.8799C15.9432 14.8183 16.0046 14.7962 16.0535 14.7559C16.2507 14.5931 16.1356 14.2728 15.8799 14.2728H8.12239Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/template-nextjs-static/src/components/ui/icons/file-pages-colorful-icon.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+export function FilePagesColorfulIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M3 3C3 1.89543 3.89543 1 5 1H14.5858C14.851 1 15.1054 1.10536 15.2929 1.29289L20.7071 6.70711C20.8946 6.89464 21 7.149 21 7.41421V21C21 22.1046 20.1046 23 19 23H5C3.89543 23 3 22.1046 3 21V3Z"
+        fill="#FF811A"
+      />
+      <path
+        opacity="0.5"
+        d="M15 1.48284C15 1.30466 15.2154 1.21543 15.3414 1.34142L20.6586 6.65858C20.7846 6.78457 20.6953 7 20.5172 7H17C15.8954 7 15 6.10457 15 5V1.48284Z"
+        fill="#C25705"
+      />
+      <path
+        d="M14.3203 9.85267C13.9289 9.62674 13.4285 9.76082 13.2026 10.1521L10.5164 14.8047C10.4888 14.8526 10.5052 14.9137 10.553 14.9413L11.797 15.6595C11.8448 15.6871 11.9059 15.6708 11.9336 15.6229L14.6197 10.9703C14.8457 10.579 14.7116 10.0786 14.3203 9.85267Z"
+        fill="white"
+      />
+      <path
+        d="M10.3432 15.4009C10.2818 15.3655 10.2041 15.4033 10.1942 15.4735L9.94193 17.2506C9.92927 17.3398 10.0317 17.3989 10.1026 17.3434L11.5156 16.2364C11.5713 16.1927 11.5652 16.1065 11.5039 16.0711L10.3432 15.4009Z"
+        fill="white"
+      />
+      <path
+        d="M7.09106 18.3513C7.09106 18.2132 7.20299 18.1013 7.34106 18.1013H16.6592C16.7973 18.1013 16.9092 18.2132 16.9092 18.3513V18.3967C16.9092 18.5348 16.7973 18.6467 16.6592 18.6467H7.34106C7.20299 18.6467 7.09106 18.5348 7.09106 18.3967V18.3513Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/template-nextjs-static/src/components/ui/icons/file-ps-colorful-icon.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+export function FilePsColorfulIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M3 3C3 1.89543 3.89543 1 5 1H14.5858C14.851 1 15.1054 1.10536 15.2929 1.29289L20.7071 6.70711C20.8946 6.89464 21 7.149 21 7.41421V21C21 22.1046 20.1046 23 19 23H5C3.89543 23 3 22.1046 3 21V3Z"
+        fill="#336DF4"
+      />
+      <path
+        opacity="0.7"
+        d="M15 1.48284C15 1.30466 15.2154 1.21543 15.3414 1.34142L20.6586 6.65858C20.7846 6.78457 20.6953 7 20.5172 7H17C15.8954 7 15 6.10457 15 5V1.48284Z"
+        fill="#0442D2"
+      />
+      <path
+        d="M8.40249 18.302C8.40249 18.427 8.30428 18.5287 8.18444 18.5287H7.51828C7.39844 18.5287 7.30176 18.427 7.30176 18.302V10.5232C7.30176 10.3982 7.39844 10.2964 7.51828 10.2964H10.1091C10.5937 10.2964 10.9963 10.3567 11.3197 10.4786C11.6508 10.6033 11.9161 10.7778 12.1143 11.0022C12.3117 11.2257 12.4503 11.4846 12.5287 11.7764C12.6031 12.0537 12.6403 12.3439 12.6403 12.6465C12.6403 13.111 12.5494 13.5 12.3666 13.8118C12.1872 14.1178 11.9531 14.3606 11.6665 14.5378C11.3885 14.7096 11.0743 14.8296 10.7247 14.8978C10.3865 14.9636 10.0465 14.9966 9.70485 14.9966H8.40249V18.302ZM9.72457 13.9303C10.0288 13.9303 10.3003 13.9101 10.5386 13.8698C10.76 13.8323 10.945 13.7636 11.094 13.6642C11.235 13.5701 11.3431 13.4428 11.421 13.2789C11.5004 13.1117 11.5411 12.8822 11.5411 12.5937C11.5411 12.1828 11.4229 11.885 11.1832 11.683C10.9327 11.4719 10.5092 11.3627 9.92175 11.3627H8.40249V13.9303H9.72457ZM15.7527 17.8865C15.3853 17.8865 15.1102 17.8135 14.9279 17.6718C14.7503 17.5338 14.6323 17.3615 14.5577 16.9931C14.5377 16.8944 14.4534 16.8238 14.3556 16.8238H13.8017C13.7989 16.8238 13.7961 16.8238 13.7961 16.8238C13.7961 16.8238 13.7933 16.824 13.7906 16.8241C13.6767 16.8304 13.5895 16.9307 13.5956 17.0481C13.6091 17.3044 13.6526 17.465 13.7474 17.6883C13.843 17.9138 13.9767 18.1118 14.1477 18.281C14.3193 18.4509 14.5261 18.5832 14.7667 18.6776C15.0057 18.7713 15.2769 18.8179 15.5801 18.8179C15.8751 18.8179 16.1473 18.7863 16.3969 18.7227C16.6534 18.6575 16.8771 18.5584 17.0673 18.4253C17.2632 18.2882 17.4183 18.1154 17.5309 17.9086C17.6454 17.6983 17.7026 17.4581 17.7026 17.191C17.7026 16.8282 17.612 16.536 17.4291 16.3204C17.2609 16.1221 17.0504 15.9649 16.7993 15.8494C16.5618 15.7402 16.3056 15.6559 16.0311 15.5967C15.7771 15.5418 15.5024 15.4725 15.3236 15.4097C15.1447 15.347 14.9241 15.2418 14.8062 15.1013C14.6883 14.9608 14.6877 14.8451 14.6877 14.6921C14.6877 14.506 14.7509 14.3652 14.8843 14.2529C15.0261 14.1335 15.2457 14.0715 15.5438 14.0715C15.8495 14.0715 16.0971 14.1369 16.2891 14.2663C16.4626 14.3832 16.5825 14.6255 16.6232 14.9399C16.6262 14.963 16.6327 14.9848 16.6421 15.0048C16.6758 15.0764 16.7469 15.1247 16.8278 15.1247H17.3817C17.3945 15.1244 17.3945 15.1244 17.4073 15.123C17.5204 15.1084 17.6006 15.0021 17.5865 14.8854C17.5129 14.2781 17.28 13.8017 16.9124 13.5309C16.558 13.2699 16.1037 13.1401 15.5529 13.1401C14.9771 13.1401 14.5231 13.2863 14.1957 13.5813C13.8631 13.881 13.6938 14.2719 13.6938 14.7389C13.6938 15.108 13.7446 15.4195 13.9462 15.6881C14.1477 15.9568 14.3934 16.1161 14.6036 16.2176C14.8138 16.3191 15.0975 16.3914 15.3721 16.4408C15.6255 16.4863 15.8607 16.5409 16.0777 16.6044C16.2776 16.6629 16.441 16.742 16.5682 16.8411C16.6625 16.9145 16.7087 17.0283 16.7087 17.2003C16.7087 17.2877 16.6911 17.3691 16.6557 17.4469C16.6196 17.5259 16.5659 17.5975 16.4935 17.6626C16.4209 17.7278 16.3249 17.7813 16.205 17.8225C16.0817 17.8649 15.9306 17.8865 15.7527 17.8865Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/template-nextjs-static/src/components/ui/icons/file-sketch-colorful-icon.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+export function FileSketchColorfulIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M3 3C3 1.89543 3.89543 1 5 1H14.5858C14.851 1 15.1054 1.10536 15.2929 1.29289L20.7071 6.70711C20.8946 6.89464 21 7.149 21 7.41421V21C21 22.1046 20.1046 23 19 23H5C3.89543 23 3 22.1046 3 21V3Z"
+        fill="#FF811A"
+      />
+      <path
+        opacity="0.5"
+        d="M15 1.48284C15 1.30466 15.2154 1.21543 15.3414 1.34142L20.6586 6.65858C20.7846 6.78457 20.6953 7 20.5172 7H17C15.8954 7 15 6.10457 15 5V1.48284Z"
+        fill="#C25705"
+      />
+      <path
+        d="M16.5027 13.026C16.6611 12.8487 16.6728 12.5845 16.5308 12.3939L14.9785 10.3115C14.7898 10.0583 14.4925 9.90912 14.1767 9.90912H9.83996C9.52586 9.90912 9.23002 10.0567 9.04109 10.3076L7.47056 12.3935C7.32705 12.5841 7.3382 12.8496 7.49719 13.0275L11.6265 17.6477C11.8252 17.8701 12.1733 17.8701 12.3721 17.6477L16.5027 13.026Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/template-nextjs-static/src/components/ui/icons/file-slide-colorful-icon.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+export function FileSlideColorfulIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M3 3C3 1.89543 3.89543 1 5 1H14.5858C14.851 1 15.1054 1.10536 15.2929 1.29289L20.7071 6.70711C20.8946 6.89464 21 7.149 21 7.41421V21C21 22.1046 20.1046 23 19 23H5C3.89543 23 3 22.1046 3 21V3Z"
+        fill="#FF811A"
+      />
+      <path
+        opacity="0.5"
+        d="M15 1.48284C15 1.30466 15.2154 1.21543 15.3414 1.34142L20.6586 6.65858C20.7846 6.78457 20.6953 7 20.5172 7H17C15.8954 7 15 6.10457 15 5V1.48284Z"
+        fill="#C25705"
+      />
+      <path
+        d="M16.3635 9.63635H7.63625C7.48563 9.63635 7.36353 9.75846 7.36353 9.90908V18.0909C7.36353 18.2415 7.48563 18.3636 7.63625 18.3636H16.3635C16.5141 18.3636 16.6363 18.2415 16.6363 18.0909V9.90908C16.6363 9.75846 16.5141 9.63635 16.3635 9.63635ZM8.45443 11.5454H15.5453V16.4545H8.45443V11.5454Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/template-nextjs-static/src/components/ui/icons/file-vcf-colorful-icon.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+export function FileVcfColorfulIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M3 3C3 1.89543 3.89543 1 5 1H14.5858C14.851 1 15.1054 1.10536 15.2929 1.29289L20.7071 6.70711C20.8946 6.89464 21 7.149 21 7.41421V21C21 22.1046 20.1046 23 19 23H5C3.89543 23 3 22.1046 3 21V3Z"
+        fill="#336DF4"
+      />
+      <path
+        opacity="0.7"
+        d="M15 1.48284C15 1.30466 15.2154 1.21543 15.3414 1.34142L20.6586 6.65858C20.7846 6.78457 20.6953 7 20.5172 7H17C15.8954 7 15 6.10457 15 5V1.48284Z"
+        fill="#0442D2"
+      />
+      <path
+        d="M5.73751 11.6877C6.01141 11.5929 6.31035 11.738 6.4052 12.0119L7.64199 15.5832L8.88301 12.0114C8.97814 11.7376 9.27722 11.5928 9.55103 11.6879C9.82484 11.783 9.96968 12.0821 9.87455 12.3559L8.22724 17.0971C8.03409 17.653 7.24779 17.6526 7.05521 17.0965L5.41332 12.3554C5.31846 12.0815 5.46361 11.7826 5.73751 11.6877Z"
+        fill="white"
+      />
+      <path
+        d="M12.1859 17.4438C13.1909 17.4438 13.9726 16.9172 14.2676 16.1017C14.3743 15.8069 14.1202 15.5346 13.8067 15.5346C13.5457 15.5346 13.3355 15.7327 13.1983 15.9547C12.9947 16.284 12.6322 16.4801 12.1895 16.4801C11.3887 16.4801 10.8935 15.7954 10.8935 14.5679C10.8935 13.4665 11.3887 12.6335 12.1859 12.6335C12.6314 12.6335 12.9986 12.8482 13.2016 13.2022C13.3324 13.4304 13.5445 13.6298 13.8075 13.6298C14.1197 13.6298 14.3733 13.3604 14.2701 13.0658C13.9776 12.2303 13.1775 11.6698 12.1859 11.6698C10.7143 11.6698 9.8082 12.8688 9.8082 14.5679C9.8082 16.3968 10.7178 17.4438 12.1859 17.4438Z"
+        fill="white"
+      />
+      <path
+        d="M15.4339 11.6588C15.0914 11.6588 14.8137 11.9365 14.8137 12.2791V17.1254C14.8137 17.4153 15.0487 17.6503 15.3385 17.6503C15.6284 17.6503 15.8634 17.4153 15.8634 17.1254V15.0017H18.0904C18.3803 15.0017 18.6153 14.7668 18.6153 14.4769C18.6153 14.187 18.3803 13.9521 18.0904 13.9521H15.8634V12.7085H18.0904C18.3803 12.7085 18.6153 12.4735 18.6153 12.1836C18.6153 11.8938 18.3803 11.6588 18.0904 11.6588H15.4339Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/template-nextjs-static/src/components/ui/icons/file-wiki-excel-colorful-icon.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+export function FileWikiExcelColorfulIcon(
+  props: React.SVGProps<SVGSVGElement>,
+) {
+  return (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M3 3C3 1.89543 3.89543 1 5 1H14.5858C14.851 1 15.1054 1.10536 15.2929 1.29289L20.7071 6.70711C20.8946 6.89464 21 7.149 21 7.41421V21C21 22.1046 20.1046 23 19 23H5C3.89543 23 3 22.1046 3 21V3Z"
+        fill="#35BD4B"
+      />
+      <path
+        opacity="0.8"
+        d="M15 1.48284C15 1.30466 15.2154 1.21543 15.3414 1.34142L20.6586 6.65858C20.7846 6.78457 20.6953 7 20.5172 7H17C15.8954 7 15 6.10457 15 5V1.48284Z"
+        fill="#32A645"
+      />
+      <path
+        d="M8.54665 9.90918H9.6385C9.68691 9.90918 9.73222 9.93297 9.75972 9.97281L11.8583 13.014L13.968 9.97251C13.9955 9.93284 14.0407 9.90918 14.089 9.90918H15.1806C15.262 9.90918 15.3279 9.97512 15.3279 10.0565C15.3279 10.0871 15.3183 10.117 15.3006 10.1419L12.5676 13.9756L15.518 18.1312C15.5651 18.1975 15.5495 18.2894 15.4832 18.3365C15.4583 18.3542 15.4285 18.3637 15.3979 18.3637H14.3061C14.2578 18.3637 14.2125 18.34 14.185 18.3002L11.8583 14.9373L9.54263 18.3C9.51514 18.3399 9.46979 18.3637 9.42133 18.3637H8.3294C8.24807 18.3637 8.18213 18.2978 8.18213 18.2165C8.18213 18.1861 8.19152 18.1565 8.20901 18.1316L11.1375 13.9756L8.4264 10.1415C8.37945 10.0751 8.39521 9.98316 8.46163 9.9362C8.48649 9.91862 8.5162 9.90918 8.54665 9.90918Z"
+        fill="white"
+      />
+    </svg>
+  );
+}