@hanzo/ui 0.5.23 → 0.6.15

package/src/components/emoji/icons/Symbols.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  //
+  // © 2025 Hardcore Engineering, Inc. All Rights Reserved.
+  // Licensed under the Eclipse Public License v2.0 (SPDX: EPL-2.0).
+  //
+  export let size: 'small' | 'medium' | 'large' | 'x-large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" viewBox="0 0 24 24" {fill} xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M6.5,10.8c2.3,0,4.2-1.9,4.2-4.2S8.8,2.2,6.5,2.2S2.2,4.2,2.2,6.5S4.2,10.8,6.5,10.8z M6.5,3.8C8,3.8,9.2,5,9.2,6.5S8,9.2,6.5,9.2S3.8,8,3.8,6.5S5,3.8,6.5,3.8z"
+  />
+  <path
+    d="M7.2,13.6c-0.3-0.5-1-0.5-1.3,0l-4,7c-0.1,0.2-0.1,0.5,0,0.7c0.1,0.2,0.4,0.4,0.6,0.4h8c0.3,0,0.5-0.1,0.6-0.4c0.1-0.2,0.1-0.5,0-0.7L7.2,13.6z M3.8,20.2l2.7-4.7l2.7,4.7H3.8z"
+  />
+  <path
+    d="M18.6,6.5l3-3c0.3-0.3,0.3-0.8,0-1.1s-0.8-0.3-1.1,0l-3,3l-3-3c-0.3-0.3-0.8-0.3-1.1,0s-0.3,0.8,0,1.1l3,3l-3,3c-0.3,0.3-0.3,0.8,0,1.1c0.1,0.1,0.3,0.2,0.5,0.2s0.4-0.1,0.5-0.2l3-3l3,3c0.1,0.1,0.3,0.2,0.5,0.2s0.4-0.1,0.5-0.2c0.3-0.3,0.3-0.8,0-1.1L18.6,6.5z"
+  />
+  <path
+    d="M21,13.2h-7c-0.4,0-0.8,0.3-0.8,0.8v7c0,0.4,0.3,0.8,0.8,0.8h7c0.4,0,0.8-0.3,0.8-0.8v-7C21.8,13.6,21.4,13.2,21,13.2zM20.2,20.2h-5.5v-5.5h5.5V20.2z"
+  />
+</svg>

package/src/components/emoji/icons/TravelAndPlaces.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  //
+  // © 2025 Hardcore Engineering, Inc. All Rights Reserved.
+  // Licensed under the Eclipse Public License v2.0 (SPDX: EPL-2.0).
+  //
+  export let size: 'small' | 'medium' | 'large' | 'x-large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" viewBox="0 0 24 24" {fill} xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M21.5,11.5l-9-9c-0.3-0.3-0.8-0.3-1.1,0l-9,9c-0.2,0.2-0.3,0.5-0.2,0.8s0.4,0.5,0.7,0.5h1.2V19c0,1.5,1.2,2.8,2.8,2.8h10c1.5,0,2.8-1.2,2.8-2.8v-6.2H21c0.3,0,0.6-0.2,0.7-0.5C21.8,12,21.7,11.7,21.5,11.5z M18.2,19c0,0.7-0.6,1.2-1.2,1.2H7c-0.7,0-1.2-0.6-1.2-1.2v-7c0-0.4-0.3-0.8-0.8-0.8H4.8L12,4.1l7.2,7.2H19c-0.4,0-0.8,0.3-0.8,0.8V19z"
+  />
+  <path
+    d="M14,11.2h-4c-0.4,0-0.8,0.3-0.8,0.8v4c0,0.4,0.3,0.8,0.8,0.8h4c0.4,0,0.8-0.3,0.8-0.8v-4C14.8,11.6,14.4,11.2,14,11.2zM13.2,15.2h-2.5v-2.5h2.5V15.2z"
+  />
+</svg>

package/src/components/emoji/index.ts

@@ -0,0 +1,97 @@
+//
+// Copyright © 2025 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+import type { IntlString } from '@hanzo/platform'
+import IconFrequentlyUsed from './icons/FrequentlyUsed.svelte'
+import IconGettingWorkDone from './icons/GettingWorkDone.svelte'
+import IconSmileysAndPeople from './icons/SmileysAndPeople.svelte'
+import IconAnimalsAndNature from './icons/AnimalsAndNature.svelte'
+import IconFoodAndDrink from './icons/FoodAndDrink.svelte'
+import IconTravelAndPlaces from './icons/TravelAndPlaces.svelte'
+import IconActivities from './icons/Activities.svelte'
+import IconObjects from './icons/Objects.svelte'
+import IconSymbols from './icons/Symbols.svelte'
+import IconFlags from './icons/Flags.svelte'
+
+import plugin from '../../plugin'
+import type { EmojiCategory } from './types'
+
+export * from './types'
+export * from './store'
+export * from './utils'
+
+export { default as EmojiPopup } from './EmojiPopup.svelte'
+export { default as EmojiButton } from './EmojiButton.svelte'
+
+export const emojiCategories: EmojiCategory[] = [
+  { id: 'frequently-used', label: plugin.string.FrequentlyUsed, icon: IconFrequentlyUsed },
+  {
+    id: 'getting-work-done',
+    label: plugin.string.GettingWorkDone,
+    icon: IconGettingWorkDone,
+    emojisString: [
+      '2705',
+      '1F440',
+      '1F64C',
+      '1F64F',
+      '2795',
+      '2796',
+      '1F44F',
+      '1F4A1',
+      '1F3AF',
+      '1F44B',
+      '1F44D',
+      '1F389',
+      '0031-FE0F-20E3',
+      '0032-FE0F-20E3',
+      '0033-FE0F-20E3',
+      '1F4E3',
+      '26AA',
+      '1F535',
+      '1F534',
+      '1F3CE'
+    ]
+  },
+  {
+    id: 'smileys-people',
+    label: plugin.string.SmileysAndPeople,
+    icon: IconSmileysAndPeople,
+    categories: ['smileys-emotion', 'people-body']
+  },
+  {
+    id: 'animals-nature',
+    label: plugin.string.AnimalsAndNature,
+    icon: IconAnimalsAndNature,
+    categories: 'animals-nature'
+  },
+  { id: 'food-drink', label: plugin.string.FoodAndDrink, icon: IconFoodAndDrink, categories: 'food-drink' },
+  { id: 'travel-places', label: plugin.string.TravelAndPlaces, icon: IconTravelAndPlaces, categories: 'travel-places' },
+  { id: 'activities', label: plugin.string.Activities, icon: IconActivities, categories: 'activities' },
+  { id: 'objects', label: plugin.string.Objects, icon: IconObjects, categories: 'objects' },
+  { id: 'symbols', label: plugin.string.Symbols, icon: IconSymbols, categories: 'symbols' },
+  { id: 'flags', label: plugin.string.Flags, icon: IconFlags, categories: 'flags' }
+]
+
+export const skinTonesCodes = [0x1f3fb, 0x1f3fc, 0x1f3fd, 0x1f3fe, 0x1f3ff]
+
+export const skinTones: Map<number, IntlString> = new Map<number, IntlString>(
+  [
+    plugin.string.NoTone,
+    plugin.string.Light,
+    plugin.string.MediumLight,
+    plugin.string.Medium,
+    plugin.string.MediumDark,
+    plugin.string.Dark
+  ].map((label, index) => [index, label])
+)

package/src/components/emoji/store.ts

@@ -0,0 +1,44 @@
+//
+// Copyright © 2025 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+import { writable, derived } from 'svelte/store'
+import type { Emoji } from 'emojibase'
+import type { EmojiWithGroup } from '.'
+
+export const emojiStore = writable<EmojiWithGroup[]>([])
+export const emojiComponents = writable<Emoji[]>([])
+export const searchEmoji = writable<string>('')
+
+export const resultEmojis = derived([emojiStore, searchEmoji], ([emojis, search]) => {
+  return search !== ''
+    ? emojis.filter(
+      (emoji) =>
+        (emoji.tags?.some((tag: string) => tag.toLowerCase().startsWith(search.toLowerCase())) ?? false) ||
+          emoji.label.toLowerCase().includes(search.toLowerCase())
+    )
+    : emojis
+})
+
+export const groupsResultEmojis = derived(resultEmojis, (result) => {
+  const keys = new Set(result.map((res) => res?.key ?? ''))
+  const groups: string[] = keys?.size > 0 ? [...keys] : ['']
+  return {
+    emojis: new Map<string, EmojiWithGroup[]>(
+      groups.map((group) => {
+        return [group, result.filter((res) => res.key === group)]
+      })
+    ),
+    groups
+  }
+})

package/src/components/emoji/types.ts

@@ -0,0 +1,34 @@
+//
+// Copyright © 2025 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+import type { IntlString } from '@hanzo/platform'
+import type { AnySvelteComponent } from '../..'
+import type { Emoji } from 'emojibase'
+
+export type EmojiWithGroup = Emoji & { key: string }
+export type Emojis = Emoji | EmojiWithGroup
+
+export interface EmojiCategory {
+  id: string
+  label: IntlString
+  icon: AnySvelteComponent
+  categories?: string[] | string
+  emojisString?: string[]
+  emojis?: EmojiWithGroup[]
+}
+
+export interface EmojiHierarchy {
+  emoji: EmojiWithGroup
+  parent?: EmojiWithGroup
+}

package/src/components/emoji/utils.ts

@@ -0,0 +1,182 @@
+//
+// Copyright © 2025 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+import { get } from 'svelte/store'
+import { fetchEmojis, fetchMessages } from 'emojibase'
+import type { Emoji, Locale } from 'emojibase'
+import { getCurrentAccount } from '@hanzo/core'
+import { deviceOptionsStore as deviceInfo } from '../..'
+import { emojiStore, emojiComponents, emojiCategories, skinTonesCodes } from '.'
+import type { EmojiWithGroup, EmojiHierarchy } from '.'
+
+export async function loadEmojis (lang?: string): Promise<{
+  emojis: EmojiWithGroup[]
+  components: Emoji[]
+}> {
+  const local = lang ?? get(deviceInfo).language ?? 'en'
+  const englishEmojis =
+    local === 'en'
+      ? await fetchEmojis('en', { version: '15.0' })
+      : await fetchEmojis('en', { compact: true, version: '15.0' })
+  const languageEmojis = local === 'en' ? null : await fetchEmojis(local as Locale, { version: '15.0' })
+  const messages = await fetchMessages(local as Locale)
+  const groups = messages.groups
+  const groupKeys = new Map<number, string>(groups.map((group, index) => [index, group.key]))
+
+  const categories = new Map<string, string>()
+  emojiCategories.forEach((cat) => {
+    if (Array.isArray(cat.categories)) cat.categories.forEach((c) => categories.set(c, cat.id))
+    else if (typeof cat.categories === 'string') categories.set(cat.categories, cat.id)
+  })
+
+  const emojis =
+    languageEmojis !== null
+      ? languageEmojis.map((langEmoji, index) => {
+        return {
+          ...langEmoji,
+          tags: [...(englishEmojis[index]?.tags ?? []), ...(langEmoji?.tags ?? [])]
+        }
+      })
+      : (englishEmojis as Emoji[])
+
+  return {
+    emojis: emojis
+      .filter((e) => e.group !== 2 && e.group !== undefined)
+      .map((e) => {
+        return { ...e, key: categories.get(groupKeys.get(e?.group ?? 0) ?? '') ?? '' }
+      }),
+    components: emojis.filter((e) => e.group === 2)
+  }
+}
+
+export async function updateEmojis (lang?: string): Promise<void> {
+  const { emojis, components } = await loadEmojis(lang)
+  emojiStore.set(emojis)
+  emojiComponents.set(components)
+}
+
+function getEmojisLocalStorageKey (suffix: string = 'frequently'): string {
+  const me = getCurrentAccount()
+  return `emojis.${suffix}.${me.uuid}`
+}
+
+export const removeFrequentlyEmojis = (_hexcode: string): void => {
+  const emoji = getEmoji(_hexcode)
+  const hexcode = emoji?.parent?.hexcode ?? emoji?.emoji.hexcode
+  if (hexcode === undefined) return
+
+  const frequentlyEmojisKey = getEmojisLocalStorageKey()
+  const frequentlyEmojis = window.localStorage.getItem(frequentlyEmojisKey)
+  if (frequentlyEmojis != null) {
+    const parsedEmojis = JSON.parse(frequentlyEmojis)
+    if (Array.isArray(parsedEmojis)) {
+      window.localStorage.setItem(
+        frequentlyEmojisKey,
+        JSON.stringify(parsedEmojis.filter((pe) => pe.hexcode !== hexcode))
+      )
+    }
+  }
+}
+export const addFrequentlyEmojis = (_hexcode: string): void => {
+  const emoji = getEmoji(_hexcode)
+  const hexcode = emoji?.parent?.hexcode ?? emoji?.emoji.hexcode
+  if (hexcode === undefined) return
+
+  const frequentlyEmojisKey = getEmojisLocalStorageKey()
+  const frequentlyEmojis = window.localStorage.getItem(frequentlyEmojisKey)
+  const empty = frequentlyEmojis == null
+
+  if (!empty) {
+    const parsedEmojis = JSON.parse(frequentlyEmojis)
+    if (Array.isArray(parsedEmojis)) {
+      const index = parsedEmojis.findIndex((pe) => pe.hexcode === hexcode)
+      if (index === -1) parsedEmojis.push({ hexcode, count: 1 })
+      else parsedEmojis[index].count++
+      parsedEmojis.sort((a, b) => b.count - a.count)
+      window.localStorage.setItem(frequentlyEmojisKey, JSON.stringify(parsedEmojis))
+      return undefined
+    }
+  }
+  window.localStorage.setItem(frequentlyEmojisKey, JSON.stringify([{ hexcode, count: 1 }]))
+}
+export const getFrequentlyEmojis = (): EmojiWithGroup[] | undefined => {
+  const frequentlyEmojisKey = getEmojisLocalStorageKey()
+  const frequentlyEmojis = window.localStorage.getItem(frequentlyEmojisKey)
+  if (frequentlyEmojis == null) return undefined
+
+  try {
+    const parsedEmojis = JSON.parse(frequentlyEmojis)
+    if (!Array.isArray(parsedEmojis)) return undefined
+
+    const res: EmojiWithGroup[] = []
+
+    for (const val of parsedEmojis) {
+      const map = getEmoji(val.hexcode)
+      const emoji = map?.parent ?? map?.emoji
+      if (emoji !== undefined) {
+        res.push(emoji)
+      }
+    }
+
+    return res
+  } catch (e) {
+    console.error(e)
+    return undefined
+  }
+}
+
+export const setSkinTone = (skinTone: number): void => {
+  const skinToneKey = getEmojisLocalStorageKey('skinTone')
+  window.localStorage.setItem(skinToneKey, JSON.stringify(skinTone))
+}
+export const getSkinTone = (): number => {
+  const skinToneKey = getEmojisLocalStorageKey('skinTone')
+  const skinTone = window.localStorage.getItem(skinToneKey)
+  if (skinTone == null) return 0
+
+  try {
+    return JSON.parse(skinTone)
+  } catch (e) {
+    console.error(e)
+    return 0
+  }
+}
+export const generateSkinToneEmojis = (baseEmoji: number | number[]): string[] => {
+  const isArray = Array.isArray(baseEmoji)
+  return [
+    String.fromCodePoint(...(isArray ? baseEmoji : [baseEmoji])),
+    ...skinTonesCodes.map((skinTone) => {
+      return String.fromCodePoint(...(isArray ? baseEmoji : [baseEmoji]), skinTone)
+    })
+  ]
+}
+
+export const getEmojiMap = (): Map<string, EmojiHierarchy> | undefined => {
+  const result = new Map<string, EmojiHierarchy>()
+  const emojis = get(emojiStore)
+
+  emojis.forEach((emoji) => {
+    result.set(emoji.hexcode, { emoji })
+    emoji.skins?.forEach((skin) => result.set(skin.hexcode, { emoji: { ...skin, key: emoji.key }, parent: emoji }))
+  })
+  return result
+}
+export const getEmoji = (hexcode: string): EmojiHierarchy | undefined => {
+  return getEmojiMap()?.get(hexcode)
+}
+export const getEmojiCode = (e: number | number[] | string | Emoji | EmojiWithGroup): number | number[] => {
+  return typeof e === 'number' || Array.isArray(e)
+    ? e
+    : (typeof e === 'object' ? e.hexcode : e).split('-').map((h) => parseInt(h, 16))
+}

package/src/components/icons/Activity.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path
+    d="M7.1,6.9C7,6.8,6.9,6.7,6.8,6.8C6.6,6.8,6.5,6.9,6.4,7l-2,2.6c-0.2,0.2-0.1,0.5,0.1,0.7c0.1,0.1,0.2,0.1,0.3,0.1 c0.1,0,0.3-0.1,0.4-0.2L6.9,8l1.9,1.5C8.9,9.5,9,9.6,9.2,9.5c0.1,0,0.3-0.1,0.3-0.2l2-2.5c0.2-0.2,0.1-0.5-0.1-0.7 C11.1,6,10.8,6,10.7,6.2L9,8.3L7.1,6.9z"
+  />
+  <path
+    d="M13.3,4.6c1,0,1.8-0.8,1.8-1.8S14.3,1,13.3,1s-1.8,0.8-1.8,1.8S12.3,4.6,13.3,4.6z M13.3,2c0.4,0,0.8,0.4,0.8,0.8 c0,0.4-0.4,0.8-0.8,0.8s-0.8-0.4-0.8-0.8C12.5,2.4,12.9,2,13.3,2z"
+  />
+  <path
+    d="M14.1,5.7c-0.3,0-0.5,0.2-0.5,0.5v4.7c0,1.8-1.1,2.9-2.8,2.9H5.1c-1.7,0-2.8-1.1-2.8-2.9V5.5c0-1.8,1.1-2.9,2.8-2.9h4.8 c0.3,0,0.5-0.2,0.5-0.5s-0.2-0.5-0.5-0.5H5.1c-2.2,0-3.8,1.6-3.8,3.9v5.4c0,2.3,1.5,3.9,3.8,3.9h5.7c2.2,0,3.8-1.6,3.8-3.9V6.2 C14.6,5.9,14.4,5.7,14.1,5.7z"
+  />
+</svg>

package/src/components/icons/ActivityEdit.svelte

@@ -0,0 +1,25 @@
+<!--
+// Copyright © 2022 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path d="M15,14.2H9.4c-0.2,0-0.4,0.2-0.4,0.4S9.1,15,9.4,15H15c0.2,0,0.4-0.2,0.4-0.4S15.2,14.2,15,14.2z" />
+  <path
+    d="M11.8,6.8C11.8,6.8,11.8,6.8,11.8,6.8C13.2,5,13.3,5,13.3,5c0.3-0.5,0.4-1,0.3-1.6c-0.1-0.5-0.5-1-0.9-1.3c0,0-1.3-1-1.3-1c-0.9-0.7-2.2-0.6-3,0.3c0,0,0,0,0,0L1,10.5c-0.3,0.4-0.4,0.9-0.3,1.4l0.6,2.7c0,0.2,0.2,0.3,0.4,0.3c0,0,0,0,0,0l2.8,0c0.5,0,1-0.2,1.3-0.6C8.9,10.4,10.7,8.2,11.8,6.8C11.8,6.8,11.8,6.8,11.8,6.8z"
+  />
+</svg>

package/src/components/icons/Add.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  export let size: 'x-small' | 'small' | 'medium' | 'large'
+  export let fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path
+    d="M7.49988 8.49991V12.9999H8.49988V8.49991L13 8.49994L13 7.49994L8.49988 7.49991V2.99988H7.49988V7.49991L3.00001 7.49988L3 8.49988L7.49988 8.49991Z"
+  />
+</svg>

package/src/components/icons/ArrowLeft.svelte

@@ -0,0 +1,25 @@
+<!--
+// Copyright © 2020, 2021 Hanzo <dev@hanzo.ai>.
+// Copyright © 2021 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M14 26L15.41 24.59L7.83 17H27C27.5523 17 28 16.5523 28 16C28 15.4477 27.5523 15 27 15H7.83L15.41 7.41L14 6L4 16L14 26Z"
+  />
+</svg>

package/src/components/icons/ArrowRight.svelte

@@ -0,0 +1,25 @@
+<!--
+// Copyright © 2020, 2021 Hanzo <dev@hanzo.ai>.
+// Copyright © 2021 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  export let fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M18 6L16.57 7.393L24.15 15H5C4.44771 15 4 15.4477 4 16C4 16.5523 4.44772 17 5 17H24.15L16.57 24.573L18 26L28 16L18 6Z"
+  />
+</svg>

package/src/components/icons/Attachment.svelte

@@ -0,0 +1,29 @@
+<!--
+// Copyright © 2020, 2021 Hanzo <dev@hanzo.ai>.
+// Copyright © 2021 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import { ButtonSize } from '../../types'
+
+  export let size: ButtonSize
+  export let fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M12.9142 2.58576C12.1378 1.80936 10.8893 1.8178 10.1035 2.60352L3.8535 8.85351C2.68656 10.0205 2.70242 11.9451 3.87865 13.1213C5.05488 14.2975 6.97945 14.3134 8.1464 13.1464L11.1463 10.1465C11.3416 9.95119 11.6582 9.95119 11.8535 10.1465C12.0487 10.3417 12.0487 10.6583 11.8535 10.8536L8.85351 13.8535C7.28679 15.4202 4.72899 15.3858 3.17154 13.8284C1.61411 12.271 1.57967 9.71313 3.1464 8.1464L9.39642 1.89642C10.5633 0.729518 12.4451 0.702443 13.6213 1.87866C14.7975 3.05488 14.7704 4.93673 13.6035 6.10362L7.35245 12.3547C6.59335 13.1138 5.36185 13.1928 4.58451 12.4154C3.80823 11.6392 3.88608 10.4103 4.64203 9.65096L8.01763 6.154C8.20942 5.95532 8.52595 5.94973 8.72463 6.14152C8.92331 6.3333 8.9289 6.64983 8.73711 6.84851L5.35557 10.3516L5.35245 10.3548C4.93991 10.7673 4.94735 11.3641 5.29161 11.7083C5.63594 12.0527 6.23287 12.0601 6.64534 11.6476L12.8964 5.39651C13.6821 4.61079 13.6906 3.36217 12.9142 2.58576Z"
+  />
+</svg>

package/src/components/icons/Back.svelte

@@ -0,0 +1,32 @@
+<!--
+// Copyright © 2020, 2021 Hanzo <dev@hanzo.ai>.
+// Copyright © 2021 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+  export let kind: 'strong' | 'curve' = 'strong'
+</script>
+
+{#if kind === 'strong'}
+  <svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <polygon points="10.6,14.4 4.3,8 10.6,1.6 11.4,2.4 5.7,8 11.4,13.6 " />
+  </svg>
+{:else if kind === 'curve'}
+  <svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M2.66601 5.33333L2.31246 5.68688L1.95891 5.33333L2.31246 4.97978L2.66601 5.33333ZM5.99935 13.1667C5.72321 13.1667 5.49935 12.9428 5.49935 12.6667C5.49935 12.3905 5.72321 12.1667 5.99935 12.1667L5.99935 13.1667ZM5.6458 9.02022L2.31246 5.68688L3.01957 4.97978L6.3529 8.31311L5.6458 9.02022ZM2.31246 4.97978L5.6458 1.64644L6.3529 2.35355L3.01957 5.68688L2.31246 4.97978ZM2.66601 4.83333L9.66601 4.83333L9.66601 5.83333L2.66602 5.83333L2.66601 4.83333ZM9.66602 13.1667L5.99935 13.1667L5.99935 12.1667L9.66602 12.1667L9.66602 13.1667ZM13.8327 9C13.8327 11.3012 11.9672 13.1667 9.66602 13.1667L9.66602 12.1667C11.4149 12.1667 12.8327 10.7489 12.8327 9L13.8327 9ZM9.66601 4.83333C11.9672 4.83333 13.8327 6.69881 13.8327 9L12.8327 9C12.8327 7.2511 11.4149 5.83333 9.66601 5.83333L9.66601 4.83333Z"
+    />
+  </svg>
+{/if}

package/src/components/icons/BlueCheck.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+</script>
+
+<svg class="svg-{size}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path fill={'#4474F6'} d="M8,0L8,0c4.4,0,8,3.6,8,8l0,0c0,4.4-3.6,8-8,8l0,0c-4.4,0-8-3.6-8-8l0,0C0,3.6,3.6,0,8,0z" />
+  <path
+    fill={'#fff'}
+    d="M7.3,10.6c-0.2,0-0.3-0.1-0.4-0.2l-1.8-2c-0.2-0.2-0.2-0.6,0-0.8c0.2-0.2,0.6-0.2,0.8,0l1.4,1.5L10,5.6 c0.2-0.3,0.6-0.3,0.8-0.1c0.3,0.2,0.3,0.6,0.1,0.8l-3.2,4C7.7,10.5,7.5,10.6,7.3,10.6C7.3,10.6,7.3,10.6,7.3,10.6z"
+  />
+</svg>

package/src/components/icons/Calendar.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'var(--caption-color)'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M19.5,5h-2.1V4.5c0-0.3-0.2-0.5-0.5-0.5s-0.5,0.2-0.5,0.5V5H8.1V4.5C8.1,4.2,7.9,4,7.6,4S7.1,4.2,7.1,4.5V5H5 C4.2,5,3.5,5.7,3.5,6.5V19c0,0.8,0.7,1.5,1.5,1.5h14.5c0.8,0,1.5-0.7,1.5-1.5V6.5C21,5.7,20.3,5,19.5,5z M5,6h2.1v0.5 c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5V6h8.3v0.5c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5V6h2.1C19.7,6,20,6.3,20,6.5v3.1H4.5V6.5 C4.5,6.3,4.7,6,5,6z M19.5,19.5H5c-0.3,0-0.5-0.2-0.5-0.5v-8.3H20V19C20,19.2,19.7,19.5,19.5,19.5z"
+  />
+</svg>

package/src/components/icons/Check.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  export let fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" viewBox="0 0 16 16" {fill} xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M14.8536 3.14645C15.0488 3.34171 15.0488 3.65829 14.8536 3.85355L6.85355 11.8536C6.65829 12.0488 6.34171 12.0488 6.14645 11.8536L2.14645 7.85355C1.95118 7.65829 1.95118 7.34171 2.14645 7.14645C2.34171 6.95118 2.65829 6.95118 2.85355 7.14645L6.5 10.7929L14.1464 3.14645C14.3417 2.95118 14.6583 2.95118 14.8536 3.14645Z"
+  />
+</svg>

package/src/components/icons/CheckAll.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <path
+      {fill}
+      d="M7.1,13.2c0.3,0.3,0.8,0.3,1.1,0c0.3-0.3,0.3-0.8,0-1.1l-0.6-0.6c-0.3-0.3-0.8-0.3-1.1,0c-0.3,0.3-0.3,0.8,0,1.1L7.1,13.2z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+    />
+    <path
+      {fill}
+      d="M22.5,6.5c-0.3-0.3-0.8-0.3-1.1,0L12,15.9l-0.1-0.1c-0.3-0.3-0.8-0.3-1.1,0c-0.3,0.3-0.3,0.8,0,1.1l0.6,0.6c0.3,0.3,0.8,0.3,1.1,0l10-10C22.8,7.2,22.8,6.8,22.5,6.5z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+    />
+    <path
+      {fill}
+      d="M17.5,6.5c-0.3-0.3-0.8-0.3-1.1,0L7,15.9l-4.5-4.5c-0.3-0.3-0.8-0.3-1.1,0c-0.3,0.3-0.3,0.8,0,1.1l5,5c0.3,0.3,0.8,0.3,1.1,0l10-10C17.8,7.2,17.8,6.8,17.5,6.5z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+    />
+  </g>
+</svg>

package/src/components/icons/CheckCircle.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  export let fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" viewBox="0 0 16 16" {fill} xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM11.7836 6.42901C12.0858 6.08709 12.0695 5.55006 11.7472 5.22952C11.4248 4.90897 10.9186 4.9263 10.6164 5.26821L7.14921 9.19122L5.3315 7.4773C5.00127 7.16593 4.49561 7.19748 4.20208 7.54777C3.90855 7.89806 3.93829 8.43445 4.26852 8.74581L6.28032 10.6427C6.82041 11.152 7.64463 11.1122 8.13886 10.553L11.7836 6.42901Z"
+  />
+</svg>