@botpress/webchat 0.5.1 → 1.0.0

package/dist/services/clipboard.d.ts

@@ -0,0 +1 @@
+export declare function copyToClipboard(value: string, description?: string): Promise<string>;

package/dist/services/images.d.ts

@@ -0,0 +1,2 @@
+import { Dimensions, Options } from '../types';
+export declare const getImageSize: (url: string, options?: Options) => Promise<Dimensions>;

package/dist/services/index.d.ts

@@ -0,0 +1,3 @@
+export * from './clipboard';
+export * from './images';
+export * from './toast';

package/dist/services/toast.d.ts

@@ -0,0 +1,17 @@
+import { FC, ReactNode } from 'react';
+type ToastType = ToastProps['type'] | CustomToastProps['type'];
+type CustomToastProps = {
+    type: 'custom';
+    content?: ReactNode;
+};
+type ToastProps = {
+    type?: 'success' | 'error' | 'neutral';
+    title: string;
+    icon?: FC<{
+        className?: string;
+        type?: ToastType;
+    }>;
+    description?: string;
+};
+export declare function showToast(props: ToastProps | CustomToastProps): string;
+export {};

package/dist/themes/dawn.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '../schemas';
+export declare function buildDawnTheme(color: string): Theme;

package/dist/themes/duskTheme.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '../schemas';
+export declare const duskTheme: Theme;

package/dist/themes/eggplant.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '../schemas';
+export declare const eggplantTheme: Theme;

package/dist/themes/galaxy.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '../schemas';
+export declare const galaxyTheme: Theme;

package/dist/themes/index.d.ts

@@ -0,0 +1,6 @@
+export * from './dawn';
+export * from './midnight';
+export * from './duskTheme';
+export * from './eggplant';
+export * from './galaxy';
+export * from './prism';

package/dist/themes/midnight.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '../schemas';
+export declare function buildMidnightTheme(color: string): Theme;

package/dist/themes/prism.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '../schemas';
+export declare const prismTheme: Theme;

package/dist/twind.config.d.ts

@@ -0,0 +1,9 @@
+export declare const config: import("@twind/core").TwindConfig<import("@twind/core").BaseTheme & import("@twind/preset-tailwind").TailwindTheme & import("@twind/preset-container-queries").ContainerQueriesTheme & {
+    fontFamily: {
+        sans: string[];
+        rubik: string[];
+        plex: string[];
+        mono: string[];
+    };
+    extend: never;
+}>;

package/dist/types/block-type.d.ts

@@ -0,0 +1,93 @@
+import type { Theme } from '../schemas';
+export declare const blockTypes: readonly ["button", "text", "image", "audio", "video", "file", "location", "column", "row", "bubble", "carousel", "dropdown"];
+export declare const markdownTypes: readonly ["heading1", "heading2", "heading3", "text", "horizontalRule", "link", "italic", "bold", "orderedList", "unorderedList", "listItem", "lineBreak", "pre"];
+export type MarkdownTypes = (typeof markdownTypes)[number];
+export type BlockTypes = (typeof blockTypes)[number];
+export type BlockStyles = NonNullable<Theme['message']>['blocks'];
+export type BlockObject = DropdownBlock | ButtonBlock | TextBlock | ImageBlock | AudioBlock | VideoBlock | FileBlock | LocationBlock | ColumnBlock | RowBlock | BubbleBlock | CarouselBlock;
+export type Sender = {
+    name: string;
+    avatar?: string;
+};
+export type MessageObject = {
+    direction: 'incoming' | 'outgoing' | 'system';
+    disableInput?: boolean;
+    sender: Sender;
+    timestamp: Date;
+    block: BlockObject;
+};
+export type ButtonBlock = {
+    type: 'button';
+    variant: 'action' | 'link';
+    reusable?: boolean;
+    groupId?: string;
+    text: string;
+    buttonValue: string;
+};
+export type TextBlock = {
+    type: 'text';
+    text: string;
+};
+export type ImageBlock = {
+    type: 'image';
+    orientation?: 'portrait' | 'landscape' | 'square' | 'auto';
+    url: string;
+};
+export type AudioBlock = {
+    type: 'audio';
+    url: string;
+};
+export type VideoBlock = {
+    type: 'video';
+    url: string;
+};
+export type FileBlock = {
+    type: 'file';
+    url: string;
+    title?: string;
+};
+type DropdownChoice = {
+    label: string;
+    value: string;
+};
+export type DropdownBlock = {
+    label?: string;
+    type: 'dropdown';
+    reusable?: boolean;
+    options: DropdownChoice[];
+};
+export type LocationBlock = {
+    type: 'location';
+    latitude: number;
+    longitude: number;
+    title?: string;
+};
+export type ColumnBlock = {
+    type: 'column';
+    blocks: BlockObject[];
+    horizontalAlignment?: 'left' | 'center' | 'right';
+    verticalAlignment?: 'top' | 'center' | 'bottom' | 'stretch';
+};
+export type RowBlock = {
+    type: 'row';
+    blocks: BlockObject[];
+    horizontalAlignment?: 'left' | 'center' | 'right' | 'stretch';
+    verticalAlignment?: 'top' | 'center' | 'bottom';
+};
+export type CarouselBlock = {
+    type: 'carousel';
+    blocks: BlockObject[];
+};
+export type BubbleBlock = {
+    type: 'bubble';
+    block: BlockObject;
+};
+export type CommonBlockProps = {
+    styles?: BlockStyles;
+};
+export type BlockMap<P extends BlockObject = BlockObject> = {
+    [T in P['type']]: Extract<P, {
+        type: T;
+    }>;
+};
+export {};

package/dist/types/image.d.ts

@@ -0,0 +1,11 @@
+export type Options = {
+    timeout?: number;
+};
+export type Dimensions = {
+    width: number;
+    height: number;
+};
+export type UseImageSizeResult = [Dimensions | null, {
+    loading: boolean;
+    error: string | null;
+}];

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './block-type';
+export * from './image';

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+      rel="stylesheet"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Echo</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/package.json

@@ -1,55 +1,66 @@
 {
   "name": "@botpress/webchat",
-  "version": "0.5.1",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "source": "src/index.tsx",
-  "license": "AGPL-3.0",
-  "scripts": {
-    "build": "yarn && yarn run -T tsc --build",
-    "watch": "yarn && yarn run -T tsc --build --watch",
-    "dev": "yarn run -T parcel test/index.html",
-    "copy:scss": "yarn run -T copyfiles -u 1 ./src/**/*.scss dist",
-    "prepublish": "yarn run -T rimraf dist && yarn --immutable && yarn run -T tsc --build && yarn run -T rimraf dist/.tsbuildinfo && yarn copy:scss"
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./dist/index.umd.cjs",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
+    }
   },
-  "files": [
-    "dist",
-    "assets"
-  ],
-  "devDependencies": {
-    "@types/crypto-js": "^4.1.1",
-    "@types/js-cookie": "^3.0.1",
-    "@types/lodash": "^4.14.178",
-    "@types/mime": "^2.0.3",
-    "@types/node": "^16.11.13",
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.11",
-    "@types/uuid": "^8.3.4",
-    "prop-types": "^15.8.1"
+  "scripts": {
+    "type:check": "tsc --noEmit",
+    "dev": "vite",
+    "build": "pnpm type:check && vite build",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
   },
   "dependencies": {
-    "@blueprintjs/core": "^3.23.1",
-    "@botpress/messaging-components": "0.4.3",
-    "@botpress/messaging-socket": "1.2.0",
-    "@formatjs/intl-pluralrules": "^4.1.6",
-    "@formatjs/intl-utils": "^3.8.4",
-    "@juggle/resize-observer": "^3.0.2",
-    "axios": "^0.25.0",
-    "classnames": "^2.3.1",
-    "crypto-js": "^4.1.1",
-    "date-fns": "^1.30.1",
-    "js-cookie": "^3.0.1",
-    "lodash": "^4.17.21",
-    "mime": "^3.0.0",
-    "mobx": "5.15.7",
-    "mobx-react": "^6.2.1",
-    "query-string": "^7.1.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-ga": "^2.7.0",
-    "react-intl": "^3.12.1",
-    "react-scroll-to-bottom": "^4.2.0",
-    "snarkdown": "^2.0.0",
-    "uuid": "^8.3.2"
+    "@botpress/messaging-socket": "^1.2.0",
+    "@floating-ui/react": "^0.25.4",
+    "@headlessui/react": "1.7.11",
+    "@heroicons/react": "^2.0.18",
+    "@material/material-color-utilities": "^0.2.7",
+    "@radix-ui/react-avatar": "^1.0.3",
+    "@radix-ui/react-collapsible": "^1.0.3",
+    "@radix-ui/react-dialog": "^1.0.4",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@tailwindcss/container-queries": "^0.1.1",
+    "@twind/core": "^1.1.3",
+    "@twind/intellisense": "^1.1.3",
+    "@twind/preset-autoprefix": "^1.0.7",
+    "@twind/preset-container-queries": "^1.0.7",
+    "@twind/preset-tailwind": "^1.1.4",
+    "@twind/with-react": "^1.1.3",
+    "@types/color-convert": "^2.0.1",
+    "@types/uuid": "^9.0.3",
+    "classnames": "^2.3.2",
+    "clsx": "^2.0.0",
+    "color-convert": "^2.0.1",
+    "embla-carousel-react": "8.0.0-rc11",
+    "google-map-react": "^2.2.1",
+    "react": "^18.2.0",
+    "react-colorful": "^5.6.1",
+    "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.1",
+    "react-markdown": "^8.0.7",
+    "react-use": "^17.4.0",
+    "tailwind-scrollbar": "^3.0.4",
+    "uuid": "^9.0.0",
+    "vite-plugin-svgr": "^3.2.0",
+    "zod": "^3.21.4",
+    "zustand": "^4.4.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.37",
+    "@types/react-dom": "^18.0.11",
+    "@vitejs/plugin-react-swc": "^3.0.0",
+    "autoprefixer": "^10.4.14",
+    "tailwindcss": "^3.3.2",
+    "typescript": "^5.0.2",
+    "vite": "^4.3.9",
+    "vite-plugin-dts": "^3.5.4"
   }
-}
+}

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/App.tsx

@@ -0,0 +1,41 @@
+/// <reference types="vite-plugin-svgr/client" />
+
+import { GlobeAltIcon } from '@heroicons/react/24/outline'
+import { DocumentTextIcon, EnvelopeIcon, LockClosedIcon, PhoneIcon } from '@heroicons/react/24/solid'
+import { ComponentProps } from 'react'
+import { Toaster } from 'react-hot-toast'
+import { WebchatClient } from './client'
+import {
+  Composer,
+  ComposerButton,
+  ComposerInput,
+  Container,
+  Header,
+  MessageList,
+  RestartConversation,
+  Webchat,
+} from './components'
+import { WebchatProvider } from './providers'
+import { Theme } from './schemas'
+import { DevTools } from './components/dev-tools/DevTools'
+import { defaultConfiguration } from './components/dev-tools/configuration'
+// import { getSheet, stringify } from '@twind/core'
+// import { twObject } from './main'
+
+type Props = {
+  theme: Theme
+  client: WebchatClient
+} & ComponentProps<typeof Container>
+
+export const App = ({ theme, client }: Props) => {
+  return (
+    <WebchatProvider client={client} styles={theme} configuration={defaultConfiguration}>
+      {(configuration) => (
+        <>
+          <DevTools />
+          <Webchat configuration={configuration} />
+        </>
+      )}
+    </WebchatProvider>
+  )
+}

package/src/Utils/colors.ts

@@ -0,0 +1,45 @@
+import { argbFromHex, hexFromArgb, themeFromSourceColor } from '@material/material-color-utilities'
+import convert from 'color-convert'
+import colors from 'tailwindcss/colors'
+
+export function buildColorPalette(color: string, theme: 'light' | 'dark' = 'light') {
+  const {
+    palettes: { primary: primaryPalette, secondary: secondaryPalette },
+    schemes,
+  } = themeFromSourceColor(argbFromHex(color))
+
+  const scheme = schemes[theme]
+
+  return {
+    primary: hexFromArgb(scheme.primary),
+    primaryHover: hexFromArgb(primaryPalette.tone(theme === 'light' ? 30 : 90)),
+    primaryHoverDark: hexFromArgb(primaryPalette.tone(theme === 'light' ? 20 : 95)),
+    onPrimary: hexFromArgb(scheme.onPrimary),
+    primaryContainer: hexFromArgb(scheme.primaryContainer),
+    primaryContainerHover: hexFromArgb(primaryPalette.tone(theme === 'light' ? 80 : 40)),
+    onPrimaryContainer: hexFromArgb(scheme.onPrimaryContainer),
+    secondary: hexFromArgb(scheme.secondary),
+    secondaryHover: hexFromArgb(secondaryPalette.tone(theme === 'light' ? 30 : 90)),
+    onSecondary: hexFromArgb(scheme.onSecondary),
+    secondaryContainer: hexFromArgb(scheme.secondaryContainer),
+    secondaryContainerHover: hexFromArgb(secondaryPalette.tone(theme === 'light' ? 80 : 40)),
+    onSecondaryContainer: hexFromArgb(scheme.onSecondaryContainer),
+  }
+}
+
+type Grays = 'gray' | 'stone' | 'slate' | 'zinc' | 'neutral'
+export function selectGrayFromColor(color: string, omit?: Grays[]) {
+  const [primaryHue, ,] = convert.hex.hsl(color)
+
+  const grays: { name: Grays; HSL: [number, number, number] }[] = [
+    { name: 'gray' as const, HSL: convert.hex.hsl(colors.gray[500]) },
+    { name: 'stone' as const, HSL: convert.hex.hsl(colors.stone[500]) },
+    { name: 'slate' as const, HSL: convert.hex.hsl(colors.slate[500]) },
+    { name: 'zinc' as const, HSL: convert.hex.hsl(colors.zinc[500]) },
+    { name: 'neutral' as const, HSL: convert.hex.hsl(colors.neutral[500]) },
+  ].filter((gray) => !omit?.includes(gray.name))
+
+  const hueDiffs = grays.map((gray) => Math.abs(gray.HSL[0] - primaryHue))
+  const closestHueIndex = hueDiffs.indexOf(Math.min(...hueDiffs))
+  return grays[closestHueIndex].name
+}

package/src/Utils/eventEmitter.ts

@@ -0,0 +1,31 @@
+type CallbackFn<T> = (args: T) => void
+
+export class EventEmitter<T extends Record<string, any>> {
+  private readonly eventMap: Partial<Record<keyof T, Set<CallbackFn<any>>>>
+
+  constructor() {
+    this.eventMap = {}
+  }
+
+  on<U extends keyof T>(event: U, callback: CallbackFn<T[U]>): () => void {
+    if (!this.eventMap[event]) {
+      this.eventMap[event] = new Set<CallbackFn<T[U]>>()
+    }
+    this.eventMap[event]?.add(callback)
+
+    return () => {
+      this.eventMap[event]?.delete(callback)
+    }
+  }
+
+  emit<U extends keyof T>(event: U, arg?: T[U]): void {
+    this.eventMap[event]?.forEach((callback) => {
+      callback(arg)
+    })
+  }
+}
+
+export type Events = {
+  [key: string]: undefined
+}
+export const eventEmitter = new EventEmitter<Events>()

package/src/Utils/index.ts

@@ -0,0 +1,2 @@
+export * from './colors'
+export * from './eventEmitter'

package/src/assets/check-circle-bold.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"
+  stroke-width="1.5">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+    d="m7.5 12 3 3 6-6m5.5 3c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" />
+</svg>

package/src/assets/chevron-up.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m18 15-6-6-6 6" />
+</svg>

package/src/assets/file-05.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"
+  stroke-width="1.5"
+>
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+    d="M14 2.27V6.4c0 .56 0 .84.109 1.054a1 1 0 0 0 .437.437c.214.11.494.11 1.054.11h4.13M14 17H8m8-4H8m12-3.012V17.2c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C17.72 22 16.88 22 15.2 22H8.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C4 19.72 4 18.88 4 17.2V6.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.311-1.311C6.28 2 7.12 2 8.8 2h3.212c.733 0 1.1 0 1.446.083.306.073.598.195.867.36.303.185.562.444 1.08.963l3.19 3.188c.518.519.777.778.963 1.081a3 3 0 0 1 .36.867c.082.346.082.712.082 1.446Z" />
+</svg>

package/src/assets/globe-02.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" stroke-width="1.5" height="18" fill="none"
+  viewBox="0 0 18 18"
+>
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+    d="M9 .667A12.75 12.75 0 0 1 12.333 9 12.75 12.75 0 0 1 9 17.333M9 .667A12.75 12.75 0 0 0 5.667 9 12.75 12.75 0 0 0 9 17.333M9 .667a8.333 8.333 0 0 0 0 16.666M9 .667a8.333 8.333 0 0 1 0 16.666M1.083 6.5h15.834m-15.834 5h15.834" />
+</svg>

package/src/assets/help-circle.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3m.08 4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z"/>
+</svg>

package/src/assets/info-circle.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12 16v-4m0-4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z"/>
+</svg>

package/src/assets/lock-01.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
+    d="M17 10V8A5 5 0 0 0 7 8v2m5 4.5v2M8.8 21h6.4c1.68 0 2.52 0 3.162-.327a3 3 0 0 0 1.311-1.311C20 18.72 20 17.88 20 16.2v-1.4c0-1.68 0-2.52-.327-3.162a3 3 0 0 0-1.311-1.311C17.72 10 16.88 10 15.2 10H8.8c-1.68 0-2.52 0-3.162.327a3 3 0 0 0-1.311 1.311C4 12.28 4 13.12 4 14.8v1.4c0 1.68 0 2.52.327 3.162a3 3 0 0 0 1.311 1.311C6.28 21 7.12 21 8.8 21Z" />
+</svg>

package/src/assets/mail-01.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" width="18" height="16" fill="none"
+  viewBox="0 0 18 16"
+>
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+    d="M.667 3.833 7.47 8.596c.55.386.826.579 1.126.653.265.066.541.066.806 0 .3-.074.575-.267 1.126-.653l6.804-4.763M4.667 14.667h8.666c1.4 0 2.1 0 2.635-.273a2.5 2.5 0 0 0 1.093-1.092c.272-.535.272-1.235.272-2.635V5.333c0-1.4 0-2.1-.272-2.635a2.5 2.5 0 0 0-1.093-1.092c-.534-.273-1.235-.273-2.635-.273H4.667c-1.4 0-2.1 0-2.635.273A2.5 2.5 0 0 0 .939 2.698C.667 3.233.667 3.933.667 5.333v5.334c0 1.4 0 2.1.272 2.635a2.5 2.5 0 0 0 1.093 1.092c.534.273 1.234.273 2.635.273Z" />
+</svg>

package/src/assets/minus-circle.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8 12h8m6 0c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z"/>
+</svg>

package/src/assets/phone.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" width="18" height="18" fill="none"
+  viewBox="0 0 18 18"
+>
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+    d="M5.984 6.378c.58 1.208 1.37 2.34 2.372 3.341a12.17 12.17 0 0 0 3.341 2.372c.104.05.156.075.222.094a.87.87 0 0 0 .718-.122c.056-.04.103-.088.199-.183.29-.291.437-.437.583-.532a1.667 1.667 0 0 1 1.817 0c.146.095.292.24.584.532l.162.162c.443.443.664.665.785.903a1.667 1.667 0 0 1 0 1.504c-.12.238-.342.46-.785.902l-.131.131c-.442.442-.662.663-.963.831-.332.187-.85.322-1.231.32-.344 0-.58-.067-1.05-.2a15.866 15.866 0 0 1-6.903-4.062 15.866 15.866 0 0 1-4.061-6.903c-.134-.47-.2-.706-.202-1.05a2.814 2.814 0 0 1 .32-1.232c.17-.3.39-.52.831-.962l.132-.131c.443-.443.664-.664.902-.785a1.667 1.667 0 0 1 1.504 0c.238.12.46.342.902.785l.163.162c.291.292.437.437.532.584.36.552.36 1.264 0 1.817-.095.146-.24.292-.532.583a1.682 1.682 0 0 0-.183.199.872.872 0 0 0-.122.718c.019.066.044.118.094.222Z" />
+</svg>

package/src/assets/send-03.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
+    d="M10.5 12H5m-.084.291L2.58 19.267c-.184.548-.275.822-.21.99a.5.5 0 0 0 .332.3c.174.05.438-.07.965-.306l16.711-7.52c.515-.232.772-.348.851-.508a.5.5 0 0 0 0-.444c-.08-.16-.336-.276-.85-.508L3.661 3.748c-.525-.237-.788-.355-.962-.306a.5.5 0 0 0-.332.299c-.066.168.025.442.206.988l2.342 7.057c.032.094.047.14.053.188a.5.5 0 0 1 0 .129c-.006.048-.022.095-.053.188Z" />
+</svg>

package/src/assets/share-04.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"
+>
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+    d="M15.5 5.5v-5m0 0h-5m5 0L8.833 7.167m-2.5-5H4.5c-1.4 0-2.1 0-2.635.272A2.5 2.5 0 0 0 .772 3.532C.5 4.066.5 4.767.5 6.167V11.5c0 1.4 0 2.1.272 2.635a2.5 2.5 0 0 0 1.093 1.092C2.4 15.5 3.1 15.5 4.5 15.5h5.333c1.4 0 2.1 0 2.635-.273a2.5 2.5 0 0 0 1.093-1.092c.272-.535.272-1.235.272-2.635V9.667" />
+</svg>

package/src/assets/slash-circle-01.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m4.93 4.93 14.14 14.14M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z"/>
+</svg>

package/src/assets/x-circle-bold.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"
+  stroke-width="1.5">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+    d="m15 9-6 6m0-6 6 6m7-3c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" />
+</svg>

package/src/assets/x-close.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M18 6 6 18M6 6l12 12"/>
+</svg>

package/src/assets/x.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M17 7 7 17M7 7l10 10"/>
+</svg>