@ahmedrowaihi/pdf-forge-preview 1.0.0-canary.0

package/src/components/code.tsx

@@ -0,0 +1,185 @@
+'use client';
+import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
+import type { Language } from 'prism-react-renderer';
+import { Highlight } from 'prism-react-renderer';
+import { Fragment, useEffect, useRef } from 'react';
+import { useFragmentIdentifier } from '../hooks/use-fragment-identifier';
+import { cn } from '../utils';
+
+interface CodeProps {
+  children: string;
+  className?: string;
+  language?: Language;
+}
+
+const theme = {
+  plain: {
+    color: '#EDEDEF',
+    fontSize: 13,
+    fontFamily: 'MonoLisa, Menlo, monospace',
+  },
+  styles: [
+    {
+      types: ['comment'],
+      style: {
+        color: '#706F78',
+      },
+    },
+    {
+      types: ['atrule', 'keyword', 'attr-name', 'selector'],
+      style: {
+        color: '#7E7D86',
+      },
+    },
+    {
+      types: ['punctuation', 'operator'],
+      style: {
+        color: '#706F78',
+      },
+    },
+    {
+      types: ['class-name', 'function', 'tag', 'key-white'],
+      style: {
+        color: '#EDEDEF',
+      },
+    },
+  ],
+};
+
+const lineHashRegex = /#L(?<start>\d+)(?:,(?<end>\d+))?/;
+
+export const Code: React.FC<Readonly<CodeProps>> = ({
+  children,
+  language = 'html',
+}) => {
+  const locationHash = useFragmentIdentifier();
+  const highlight = (() => {
+    if (locationHash) {
+      const match = locationHash.match(lineHashRegex);
+      if (match?.groups?.start) {
+        const start = Number.parseInt(match.groups.start, 10);
+        const end = match.groups.end
+          ? Number.parseInt(match.groups.end, 10)
+          : start;
+        return [start, end] as const;
+      }
+    }
+  })();
+
+  const isHighlighting = (line: number) => {
+    if (!highlight) return false;
+
+    return highlight[0] <= line && highlight[1] >= line;
+  };
+
+  const scrollerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const scroller = scrollerRef.current;
+    if (highlight && scroller) {
+      const lineElement = scroller.querySelector(`#L${highlight[0]}`);
+      if (lineElement instanceof HTMLAnchorElement) {
+        scroller.scrollTo({
+          top: Math.max(lineElement.offsetTop - 325, 0),
+          behavior: 'smooth',
+        });
+      }
+    }
+  }, [highlight]);
+
+  const searchParams = useSearchParams();
+
+  const value = children.trim();
+
+  return (
+    <Highlight code={value} language={language} theme={theme}>
+      {({ tokens, getLineProps, getTokenProps }) => (
+        <>
+          <div
+            className="absolute right-0 top-0 h-px w-[200px]"
+            style={{
+              background:
+                'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',
+            }}
+          />
+          <div
+            ref={scrollerRef}
+            className="max-h-[650px] h-full p-4 after:w-full after:static after:block after:h-4 after:content-[''] overflow-auto"
+          >
+            <div className="grid grid-cols-[auto_1fr] w-full">
+              {tokens.map((line, i) => {
+                const lineProps = getLineProps({
+                  line,
+                  key: i,
+                });
+                const isHighlighted = isHighlighting(i + 1);
+                const isHighlightStart = highlight && highlight[0] === i + 1;
+                const isHighlightEnd = highlight && highlight[1] === i + 1;
+
+                return (
+                  <Fragment key={i}>
+                    {/* Line number cell */}
+                    <Link
+                      id={`L${i + 1}`}
+                      href={{
+                        hash: `#L${i + 1}`,
+                        search: searchParams.toString(),
+                      }}
+                      scroll={false}
+                      aria-selected={isHighlighted}
+                      className={cn(
+                        'text-[#49494f] relative text-[13px] font-light font-[MonoLisa,Menlo,monospace] align-middle scroll-mt-[325px] select-none pr-3 cursor-pointer hover:text-slate-12 transition-colors',
+                        'aria-selected:text-cyan-11 aria-selected:hover:text-cyan-11 aria-selected:bg-cyan-5 aria-selected:[&+*]:bg-cyan-5',
+                        isHighlightStart && 'rounded-tl-sm',
+                        isHighlightEnd && 'rounded-bl-sm',
+                      )}
+                      type="button"
+                    >
+                      {i + 1}
+                    </Link>
+
+                    {/* Code content cell */}
+                    <div
+                      {...lineProps}
+                      className={cn('whitespace-pre transition-colors', {
+                        "before:mr-2 before:text-slate-11 before:content-['$']":
+                          language === 'bash' && tokens.length === 1,
+                      })}
+                    >
+                      {line.map((token, key) => {
+                        const tokenProps = getTokenProps({
+                          token,
+                        });
+                        const isException =
+                          token.content === 'from' &&
+                          line[key + 1]?.content === ':';
+                        const newTypes = isException
+                          ? [...token.types, 'key-white']
+                          : token.types;
+                        token.types = newTypes;
+
+                        return (
+                          <Fragment key={key}>
+                            <span {...tokenProps} />
+                          </Fragment>
+                        );
+                      })}
+                    </div>
+                  </Fragment>
+                );
+              })}
+            </div>
+          </div>
+          <div
+            className="absolute bottom-0 left-0 h-px w-[200px]"
+            style={{
+              background:
+                'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',
+            }}
+          />
+        </>
+      )}
+    </Highlight>
+  );
+};

package/src/components/heading.tsx

@@ -0,0 +1,113 @@
+import * as SlotPrimitive from '@radix-ui/react-slot';
+import * as React from 'react';
+import { type As, cn, unreachable } from '../utils';
+
+export type HeadingSize =
+  | '1'
+  | '2'
+  | '3'
+  | '4'
+  | '5'
+  | '6'
+  | '7'
+  | '8'
+  | '9'
+  | '10';
+export type HeadingColor = 'white' | 'gray';
+export type HeadingWeight = 'medium' | 'bold';
+
+interface HeadingOwnProps {
+  size?: HeadingSize;
+  color?: HeadingColor;
+  weight?: HeadingWeight;
+}
+
+type HeadingProps = As<'h1', 'h2', 'h3', 'h4', 'h5', 'h6'> & HeadingOwnProps;
+
+export const Heading = React.forwardRef<
+  HTMLHeadingElement,
+  Readonly<HeadingProps>
+>(
+  (
+    {
+      as: Tag = 'h1',
+      size = '3',
+      className,
+      color = 'white',
+      children,
+      weight = 'bold',
+      ...props
+    },
+    forwardedRef,
+  ) => (
+    <SlotPrimitive.Slot
+      className={cn(
+        className,
+        getSizesClassNames(size),
+        getColorClassNames(color),
+        getWeightClassNames(weight),
+      )}
+      ref={forwardedRef}
+      {...props}
+    >
+      <Tag>{children}</Tag>
+    </SlotPrimitive.Slot>
+  ),
+);
+
+const getSizesClassNames = (size: HeadingSize | undefined) => {
+  switch (size) {
+    case '1':
+      return 'text-xs';
+    case '2':
+      return 'text-sm';
+    case undefined:
+    case '3':
+      return 'text-base';
+    case '4':
+      return 'text-lg';
+    case '5':
+      return 'text-xl tracking-[-0.16px]';
+    case '6':
+      return 'text-2xl tracking-[-0.288px]';
+    case '7':
+      return 'text-[28px] leading-[34px] tracking-[-0.416px]';
+    case '8':
+      return 'text-[35px] leading-[42px] tracking-[-0.64px]';
+    case '9':
+      return 'text-6xl leading-[73px] tracking-[-0.896px]';
+    case '10':
+      return [
+        'text-[38px] leading-[46px]',
+        'md:text-[70px] md:leading-[85px] tracking-[-1.024px;]',
+      ];
+    default:
+      return unreachable(size);
+  }
+};
+
+const getColorClassNames = (color: HeadingColor | undefined) => {
+  switch (color) {
+    case 'gray':
+      return 'text-slate-11';
+    case 'white':
+    case undefined:
+      return 'text-slate-12';
+    default:
+      return unreachable(color);
+  }
+};
+
+const getWeightClassNames = (weight: HeadingWeight | undefined) => {
+  switch (weight) {
+    case 'medium':
+      return 'font-medium';
+    case 'bold':
+    case undefined:
+      return 'font-bold';
+    default:
+      return unreachable(weight);
+  }
+};
+
+Heading.displayName = 'Heading';

package/src/components/icons/icon-arrow-down.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconArrowDown = React.forwardRef<IconElement, Readonly<IconProps>>(
+  ({ ...props }, forwardedRef) => (
+    <IconBase ref={forwardedRef} {...props}>
+      <path
+        d="M12 16L6 9.85966L6.84 9L12 14.2808L17.16 9L18 9.85966L12 16Z"
+        fill="currentColor"
+      />
+    </IconBase>
+  ),
+);
+
+IconArrowDown.displayName = 'IconArrowDown';

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+export type IconElement = React.ComponentRef<'svg'>;
+export type RootProps = React.ComponentProps<'svg'>;
+
+export interface IconProps extends RootProps {
+  size?: number;
+}
+
+export const IconBase = React.forwardRef<IconElement, Readonly<IconProps>>(
+  ({ size = 20, children, ...props }, forwardedRef) => (
+    <svg
+      fill="none"
+      height={size}
+      ref={forwardedRef}
+      viewBox="0 0 24 24"
+      width={size}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      {children}
+    </svg>
+  ),
+);
+
+IconBase.displayName = 'IconBase';

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

@@ -0,0 +1,19 @@
+import { forwardRef } from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconBug = forwardRef<IconElement, IconProps>((props, ref) => (
+  <IconBase {...props} ref={ref}>
+    <g
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+    >
+      <path d="m8 2l1.88 1.88m4.24 0L16 2M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" />
+      <path d="M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6m0 0v-9" />
+      <path d="M6.53 9C4.6 8.8 3 7.1 3 5m3 8H2m1 8c0-2.1 1.7-3.9 3.8-4M20.97 5c0 2.1-1.6 3.8-3.5 4M22 13h-4m-.8 4c2.1.1 3.8 1.9 3.8 4" />
+    </g>
+  </IconBase>
+));

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { cn } from '../../utils';
+
+export type IconButtonProps = React.ComponentPropsWithoutRef<'button'>;
+
+export const IconButton = React.forwardRef<
+  HTMLButtonElement,
+  Readonly<IconButtonProps>
+>(({ children, className, ...props }, forwardedRef) => (
+  <button
+    type="button"
+    {...props}
+    className={cn(
+      'focus:ring-gray-8 rounded-sm text-slate-11 transition duration-200 ease-in-out hover:text-slate-12 focus:text-slate-12 focus:outline-hidden focus:ring-2',
+      className,
+    )}
+    ref={forwardedRef}
+  >
+    {children}
+  </button>
+));
+
+IconButton.displayName = 'IconButton';

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconCheck = React.forwardRef<IconElement, Readonly<IconProps>>(
+  ({ ...props }, forwardedRef) => (
+    <IconBase ref={forwardedRef} {...props}>
+      <path
+        d="M16.25 8.75L10.406 15.25L7.75 12.75"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+    </IconBase>
+  ),
+);
+
+IconCheck.displayName = 'IconCheck';

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

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconClipboard = React.forwardRef<IconElement, Readonly<IconProps>>(
+  ({ ...props }, forwardedRef) => (
+    <IconBase ref={forwardedRef} {...props}>
+      <path
+        d="M9 6.75H7.75C6.64543 6.75 5.75 7.64543 5.75 8.75V17.25C5.75 18.3546 6.64543 19.25 7.75 19.25H16.25C17.3546 19.25 18.25 18.3546 18.25 17.25V8.75C18.25 7.64543 17.3546 6.75 16.25 6.75H15"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M14 8.25H10C9.44772 8.25 9 7.80228 9 7.25V5.75C9 5.19772 9.44772 4.75 10 4.75H14C14.5523 4.75 15 5.19772 15 5.75V7.25C15 7.80228 14.5523 8.25 14 8.25Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M9.75 12.25H14.25"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M9.75 15.25H14.25"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+    </IconBase>
+  ),
+);
+
+IconClipboard.displayName = 'IconClipboard';

package/src/components/icons/icon-cloud-alert.tsx

@@ -0,0 +1,18 @@
+import type { IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconCloudAlert = (props: IconProps) => (
+  <IconBase
+    {...props}
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M12 12v4" />
+    <path d="M12 20h.01" />
+    <path d="M17 18h.5a1 1 0 0 0 0-9h-1.79A7 7 0 1 0 7 17.708" />
+  </IconBase>
+);
+
+IconCloudAlert.displayName = 'IconCloudAlert';

package/src/components/icons/icon-cloud-check.tsx

@@ -0,0 +1,17 @@
+import type { IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconCloudCheck = (props: IconProps) => (
+  <IconBase
+    {...props}
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="m17 15-5.5 5.5L9 18" />
+    <path d="M5 17.743A7 7 0 1 1 15.71 10h1.79a4.5 4.5 0 0 1 1.5 8.742" />
+  </IconBase>
+);
+
+IconCloudCheck.displayName = 'IconCloudCheck';

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconDownload = React.forwardRef<IconElement, Readonly<IconProps>>(
+  ({ ...props }, forwardedRef) => (
+    <IconBase ref={forwardedRef} {...props}>
+      <path
+        d="M4.75 14.75v1.5a3 3 0 0 0 3 3h8.5a3 3 0 0 0 3-3v-1.5M12 14.25v-9.5M8.75 10.75l3.25 3.5 3.25-3.5"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      />
+    </IconBase>
+  ),
+);
+
+IconDownload.displayName = 'IconDownload';

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconFile = React.forwardRef<IconElement, Readonly<IconProps>>(
+  ({ ...props }, forwardedRef) => (
+    <IconBase ref={forwardedRef} {...props}>
+      <path
+        clipRule="evenodd"
+        d="M7.75 4C6.23122 4 5 5.23122 5 6.75V17.25C5 18.7688 6.23122 20 7.75 20H16.25C17.7688 20 19 18.7688 19 17.25V9C19 8.80109 18.921 8.61032 18.7803 8.46967L14.5303 4.21967C14.3897 4.07902 14.1989 4 14 4H7.75ZM6.5 6.75C6.5 6.05964 7.05964 5.5 7.75 5.5H13V9.25C13 9.66421 13.3358 10 13.75 10H17.5V17.25C17.5 17.9404 16.9404 18.5 16.25 18.5H7.75C7.05964 18.5 6.5 17.9404 6.5 17.25V6.75ZM16.6893 8.5L14.5 6.31066V8.5H16.6893Z"
+        fill="currentColor"
+        fillOpacity="0.927"
+        fillRule="evenodd"
+      />
+    </IconBase>
+  ),
+);
+
+IconFile.displayName = 'IconFile';

package/src/components/icons/icon-folder-open.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconFolderOpen = React.forwardRef<
+  IconElement,
+  Readonly<IconProps>
+>(({ ...props }, forwardedRef) => (
+  <IconBase ref={forwardedRef} {...props}>
+    <path
+      clipRule="evenodd"
+      d="M6.75 4C5.23122 4 4 5.23122 4 6.75V17.25V17.5C4 17.5933 4.01702 17.6825 4.04812 17.7649C4.28918 19.0376 5.4072 20 6.75 20H17.25C17.9905 20 18.6283 19.7404 19.111 19.2387C19.5681 18.7636 19.836 18.1241 19.9792 17.4279L21.4711 12.206C21.4903 12.139 21.5 12.0697 21.5 12C21.5 10.652 20.5301 9.53047 19.25 9.29534V8.5C19.25 7.5335 18.4665 6.75 17.5 6.75H13.9452L13.227 5.43322C12.7451 4.54965 11.819 4 10.8127 4H6.75ZM17.75 9.25V8.5C17.75 8.36193 17.6381 8.25 17.5 8.25H13.5C13.2255 8.25 12.973 8.10009 12.8416 7.85915L11.9101 6.15145L11.91 6.15138C11.6911 5.74989 11.2702 5.5 10.8127 5.5H6.75C6.05964 5.5 5.5 6.05964 5.5 6.75V13.158L6.79875 9.73401C6.90926 9.44267 7.1884 9.25 7.5 9.25H17.75ZM5.50587 17.372L8.01766 10.75H18.5H18.75C19.4091 10.75 19.949 11.26 19.9966 11.9069L18.5289 17.044C18.5233 17.0634 18.5185 17.0831 18.5146 17.1029C18.4062 17.6448 18.2275 17.9934 18.03 18.1988C17.8513 18.3846 17.6141 18.5 17.25 18.5H6.75C6.10079 18.5 5.56718 18.0051 5.50587 17.372Z"
+      fill="currentColor"
+      fillRule="evenodd"
+    />
+  </IconBase>
+));
+
+IconFolderOpen.displayName = 'IconFolderOpen';

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconFolder = React.forwardRef<IconElement, Readonly<IconProps>>(
+  ({ ...props }, forwardedRef) => (
+    <IconBase ref={forwardedRef} {...props}>
+      <path
+        clipRule="evenodd"
+        d="M6.75 4C5.23122 4 4 5.23122 4 6.75V7.75V8V17.25C4 18.7688 5.23122 20 6.75 20H17.25C18.7688 20 20 18.7688 20 17.25V9.75C20 8.23122 18.7688 7 17.25 7H14.0816L13.227 5.43322C12.7451 4.54965 11.819 4 10.8127 4H6.75ZM12.3729 7L11.9101 6.15145L11.91 6.15138C11.6911 5.74989 11.2702 5.5 10.8127 5.5H6.75C6.05964 5.5 5.5 6.05964 5.5 6.75V7H12.3729ZM5.5 17.25V8.5H17.25C17.9404 8.5 18.5 9.05964 18.5 9.75V17.25C18.5 17.9404 17.9404 18.5 17.25 18.5H6.75C6.05964 18.5 5.5 17.9404 5.5 17.25Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </IconBase>
+  ),
+);
+
+IconFolder.displayName = 'IconFolder';

package/src/components/icons/icon-hide-sidebar.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconHideSidebar = React.forwardRef<
+  IconElement,
+  Readonly<IconProps>
+>(({ ...props }, forwardedRef) => (
+  <IconBase ref={forwardedRef} {...props}>
+    <path
+      d="M15.4697 15.5303C15.7626 15.8232 16.2374 15.8232 16.5303 15.5303C16.8232 15.2374 16.8232 14.7626 16.5303 14.4697L14.0607 12L16.5303 9.53033C16.8232 9.23744 16.8232 8.76256 16.5303 8.46967C16.2374 8.17678 15.7626 8.17678 15.4697 8.46967L12.4697 11.4697C12.1768 11.7626 12.1768 12.2374 12.4697 12.5303L15.4697 15.5303Z"
+      fill="currentColor"
+    />
+    <path
+      clipRule="evenodd"
+      d="M19 2.25H5C3.48122 2.25 2.25 3.48122 2.25 5V19C2.25 20.5188 3.48122 21.75 5 21.75L19 21.75C20.5188 21.75 21.75 20.5188 21.75 19L21.75 5C21.75 3.48122 20.5188 2.25 19 2.25ZM19 20.25C19.6904 20.25 20.25 19.6904 20.25 19L20.25 5C20.25 4.30964 19.6904 3.75 19 3.75L9.75 3.75L9.75 20.25L19 20.25ZM8.25 20.25L8.25 3.75L5 3.75C4.30965 3.75 3.75 4.30965 3.75 5L3.75 19C3.75 19.6904 4.30965 20.25 5 20.25H8.25Z"
+      fill="currentColor"
+      fillRule="evenodd"
+    />
+  </IconBase>
+));
+
+IconHideSidebar.displayName = 'IconHideSidebar';

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

@@ -0,0 +1,19 @@
+import { forwardRef } from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconImage = forwardRef<IconElement, IconProps>((props, ref) => (
+  <IconBase {...props} ref={ref}>
+    <g
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+    >
+      <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
+      <circle cx="9" cy="9" r="2" />
+      <path d="m21 15l-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
+    </g>
+  </IconBase>
+));

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconInfo = React.forwardRef<IconElement, Readonly<IconProps>>(
+  ({ ...props }, forwardedRef) => (
+    <IconBase ref={forwardedRef} {...props}>
+      <path
+        d="M12 4C7.58173 4 4 7.58172 4 12C4 16.4182 7.58173 20 12 20C16.4183 20 20 16.4182 20 12C20 7.58172 16.4183 4 12 4ZM5.14754 12C5.14754 8.21549 8.21551 5.14754 12 5.14754C15.7845 5.14754 18.8525 8.21549 18.8525 12C18.8525 15.7844 15.7845 18.8525 12 18.8525C8.21551 18.8525 5.14754 15.7844 5.14754 12ZM12.906 8.37648C12.906 8.87682 12.5004 9.28243 12 9.28243C11.4997 9.28243 11.0941 8.87682 11.0941 8.37648C11.0941 7.87613 11.4997 7.47053 12 7.47053C12.5004 7.47053 12.906 7.87613 12.906 8.37648ZM10.1883 10.1884H10.7922H12.0002C12.3337 10.1884 12.6041 10.4588 12.6041 10.7924V15.0201H13.2081H13.8121V16.2281H13.2081H12.0002H10.7922H10.1883V15.0201H10.7922H11.3962V11.3963H10.7922H10.1883V10.1884Z"
+        fill="currentColor"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      />
+    </IconBase>
+  ),
+);
+
+IconInfo.displayName = 'IconInfo';

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

@@ -0,0 +1,14 @@
+import { forwardRef } from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconLink = forwardRef<IconElement, IconProps>((props, ref) => (
+  <IconBase {...props} ref={ref}>
+    <path
+      d="m10 17.55l-1.77 1.72a2.47 2.47 0 0 1-3.5-3.5l4.54-4.55a2.46 2.46 0 0 1 3.39-.09l.12.1a1 1 0 0 0 1.4-1.43a3 3 0 0 0-.18-.21a4.46 4.46 0 0 0-6.09.22l-4.6 4.55a4.48 4.48 0 0 0 6.33 6.33L11.37 19A1 1 0 0 0 10 17.55M20.69 3.31a4.49 4.49 0 0 0-6.33 0L12.63 5A1 1 0 0 0 14 6.45l1.73-1.72a2.47 2.47 0 0 1 3.5 3.5l-4.54 4.55a2.46 2.46 0 0 1-3.39.09l-.12-.1a1 1 0 0 0-1.4 1.43a3 3 0 0 0 .23.21a4.47 4.47 0 0 0 6.09-.22l4.55-4.55a4.49 4.49 0 0 0 .04-6.33"
+      fill="currentColor"
+    />
+  </IconBase>
+));
+
+IconLink.displayName = 'IconLink';

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

@@ -0,0 +1,16 @@
+import type { IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconLoader = (props: IconProps) => (
+  <IconBase
+    {...props}
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+  </IconBase>
+);
+
+IconLoader.displayName = 'IconLoader';