@streamscloud/kit 0.2.42 → 0.9.0

package/dist/ui/dynamic-component/cmp.dynamic-component.svelte.d.ts

@@ -3,7 +3,29 @@ type Props = {
     /** Component reference and its props to render */
     model: DynamicComponentModel;
 };
-/** Renders a dynamic Svelte component from a model object, spreading its props automatically. */
+/**
+ * Renders a Svelte component from a `DynamicComponentModel`, spreading the model's props automatically.
+ *
+ * Use when the component to render is decided at runtime (e.g. dispatched by id, fed into a host that
+ * renders many heterogeneous nodes). `DynamicComponentModel` keeps `props` reactive — calling
+ * `model.updateProps(...)` updates the rendered component without re-mounting.
+ *
+ * ```svelte
+ * <script lang="ts">
+ * import { DynamicComponent, DynamicComponentModel } from '@streamscloud/kit/dynamic-component';
+ * import { Button } from '@streamscloud/kit/button';
+ *
+ * const model = new DynamicComponentModel({
+ *   component: Button,
+ *   props: { type: 'button', children: () => 'Click' }
+ * });
+ * </script>
+ *
+ * <DynamicComponent {model} />
+ * ```
+ *
+ * This component has no styles or visual surface of its own.
+ */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

package/dist/ui/emoji-picker/cmp.emoji-panel.svelte

@@ -75,65 +75,76 @@ const clearSearch = () => {
 
 <!--
 @component
-Inline emoji panel with search and categorized emoji grid. Used by EmojiPicker (dropdown wrapper)
-and can be embedded directly by input components.
+Inline emoji panel with search and categorized emoji grid. Used by `EmojiPicker` (popover wrapper) and
+can be embedded directly by input components.
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--emoji-panel--background` | Panel background | light-dark white/gray-800 |
-| `--sc-kit--emoji-panel--border-color` | Border color | light-dark neutral-300/neutral-600 |
-| `--sc-kit--emoji-panel--label-color` | Category title and info text color | light-dark neutral-500/neutral-400 |
-| `--sc-kit--emoji-panel--placeholder-color` | Placeholder and clear icon color | light-dark neutral-400/neutral-500 |
+| `--sc-kit--emoji-panel--background` | Panel background | `--sc-kit--color--bg--panel` |
+| `--sc-kit--emoji-panel--border-color` | Border color | `--sc-kit--color--border` |
+| `--sc-kit--emoji-panel--label-color` | Category title and info text color | `--sc-kit--color--text--muted` |
+| `--sc-kit--emoji-panel--placeholder-color` | Placeholder and clear icon color | `--sc-kit--color--text--placeholder` |
 | `--sc-kit--emoji-panel--width` | Panel width | `100%` |
+| `--sc-kit--emoji-panel--max-height` | Scrollable grid max height | `15em` |
 -->
 
 <style>.emoji-panel {
-  --_emoji-panel--background: var(--sc-kit--emoji-panel--background, light-dark(#ffffff, #2e2e2e));
-  --_emoji-panel--border-color: var(--sc-kit--emoji-panel--border-color, light-dark(#d1d5db, #4b5563));
-  --_emoji-panel--label-color: var(--sc-kit--emoji-panel--label-color, light-dark(#6b7280, #9ca3af));
-  --_emoji-panel--placeholder-color: var(--sc-kit--emoji-panel--placeholder-color, light-dark(#9ca3af, #6b7280));
+  --_emoji-panel--background: var(--sc-kit--emoji-panel--background, var(--sc-kit--color--bg--panel));
+  --_emoji-panel--border-color: var(--sc-kit--emoji-panel--border-color, var(--sc-kit--color--border));
+  --_emoji-panel--label-color: var(--sc-kit--emoji-panel--label-color, var(--sc-kit--color--text--muted));
+  --_emoji-panel--placeholder-color: var(--sc-kit--emoji-panel--placeholder-color, var(--sc-kit--color--text--placeholder));
   --_emoji-panel--width: var(--sc-kit--emoji-panel--width, 100%);
+  --_emoji-panel--max-height: var(--sc-kit--emoji-panel--max-height, 15em);
   width: var(--_emoji-panel--width);
   background-color: var(--_emoji-panel--background);
   border: 1px solid var(--_emoji-panel--border-color);
-  border-radius: 0.25rem;
+  border-radius: var(--sc-kit--radius--sm);
   z-index: 999;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
 }
 .emoji-panel__search {
-  padding: 0.375rem;
+  padding: var(--sc-kit--space--2);
   position: relative;
   display: flex;
   align-items: center;
 }
 .emoji-panel__search-input {
   width: 100%;
-  height: 1.75rem;
-  font-size: 0.75rem;
-  padding: 0 0.625rem;
+  height: var(--sc-kit--field--height--sm);
+  font-size: var(--sc-kit--font-size--sm);
+  line-height: var(--sc-kit--leading--tight);
+  padding: 0 var(--sc-kit--field--padding-inline--md);
   border: 1px solid var(--_emoji-panel--border-color);
-  border-radius: 1em;
+  border-radius: var(--sc-kit--radius--pill);
   background: transparent;
+  color: inherit;
   outline: none;
 }
 .emoji-panel__search-input::placeholder {
   color: var(--_emoji-panel--placeholder-color);
 }
+.emoji-panel__search-input:focus-visible {
+  border-color: var(--sc-kit--color--accent);
+}
 .emoji-panel__search-clear {
   position: absolute;
-  right: 0.625rem;
+  right: var(--sc-kit--space--3);
   display: flex;
   align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  padding: 0;
   cursor: pointer;
   --sc-kit--icon--size: 0.875rem;
   --sc-kit--icon--color: var(--_emoji-panel--placeholder-color);
 }
 .emoji-panel__categories {
-  max-height: 15em;
-  padding: 0 0.5rem;
+  max-height: var(--_emoji-panel--max-height);
+  padding: 0 var(--sc-kit--space--2);
   overflow-y: auto;
   --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, light-dark(#d1d5db, #4b5563));
   --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
@@ -157,14 +168,19 @@ and can be embedded directly by input components.
   }
 }
 .emoji-panel__category-title {
-  font-size: 0.625rem;
-  font-weight: 400;
+  font-size: var(--sc-kit--font-size--xs);
+  font-weight: var(--sc-kit--font-weight--regular);
+  line-height: var(--sc-kit--leading--tight);
   color: var(--_emoji-panel--label-color);
   position: sticky;
   top: 0;
   background-color: var(--_emoji-panel--background);
-  padding: 0.5rem 0;
+  padding: var(--sc-kit--space--2) 0;
   z-index: 1;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
 }
 .emoji-panel__grid {
   display: grid;
@@ -173,14 +189,19 @@ and can be embedded directly by input components.
 }
 .emoji-panel__not-found {
   grid-column: 1/-1;
-  line-height: 1.7em;
-  font-size: 0.5rem;
+  line-height: var(--sc-kit--leading--normal);
+  font-size: var(--sc-kit--font-size--xs);
   text-align: center;
   font-style: italic;
   color: var(--_emoji-panel--label-color);
 }
 .emoji-panel__emoji {
   font-size: 1.25em;
+  line-height: var(--sc-kit--leading--tight);
   cursor: pointer;
   text-align: center;
+  border-radius: var(--sc-kit--radius--sm);
+}
+.emoji-panel__emoji:hover {
+  background: var(--sc-kit--color--bg--hover);
 }</style>

package/dist/ui/emoji-picker/cmp.emoji-panel.svelte.d.ts

@@ -4,17 +4,18 @@ type Props = {
     };
 };
 /**
- * Inline emoji panel with search and categorized emoji grid. Used by EmojiPicker (dropdown wrapper)
- * and can be embedded directly by input components.
+ * Inline emoji panel with search and categorized emoji grid. Used by `EmojiPicker` (popover wrapper) and
+ * can be embedded directly by input components.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--emoji-panel--background` | Panel background | light-dark white/gray-800 |
- * | `--sc-kit--emoji-panel--border-color` | Border color | light-dark neutral-300/neutral-600 |
- * | `--sc-kit--emoji-panel--label-color` | Category title and info text color | light-dark neutral-500/neutral-400 |
- * | `--sc-kit--emoji-panel--placeholder-color` | Placeholder and clear icon color | light-dark neutral-400/neutral-500 |
+ * | `--sc-kit--emoji-panel--background` | Panel background | `--sc-kit--color--bg--panel` |
+ * | `--sc-kit--emoji-panel--border-color` | Border color | `--sc-kit--color--border` |
+ * | `--sc-kit--emoji-panel--label-color` | Category title and info text color | `--sc-kit--color--text--muted` |
+ * | `--sc-kit--emoji-panel--placeholder-color` | Placeholder and clear icon color | `--sc-kit--color--text--placeholder` |
  * | `--sc-kit--emoji-panel--width` | Panel width | `100%` |
+ * | `--sc-kit--emoji-panel--max-height` | Scrollable grid max height | `15em` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/emoji-picker/cmp.emoji-picker.svelte

@@ -1,35 +1,50 @@
-<script lang="ts">import { Dropdown } from '../dropdown';
-import { Icon } from '../icon';
+<script lang="ts">import { Icon } from '../icon';
+import { Popover } from '../popover';
 import { default as EmojiPanel } from './cmp.emoji-panel.svelte';
 import IconEmoji from '@fluentui/svg-icons/icons/emoji_20_regular.svg?raw';
-let { dropdownPosition = 'bottom-end', on, children } = $props();
+let { popoverPosition = 'bottom-end', revealOnHover = false, on, children } = $props();
 </script>
 
-<Dropdown position={dropdownPosition} keepDropdownOpen={true} panel={false}>
-  {#snippet trigger()}
-    <div class="emoji-picker__trigger">
-      {#if children}
-        {@render children()}
-      {:else}
-        <Icon src={IconEmoji} />
-      {/if}
-    </div>
-  {/snippet}
-  <EmojiPanel on={{ select: on.select }} />
-</Dropdown>
+<div class="emoji-picker" class:emoji-picker--reveal={revealOnHover}>
+  <Popover position={popoverPosition} keepOpen panel={false}>
+    {#snippet trigger()}
+      <span class="emoji-picker__trigger">
+        {#if children}
+          {@render children()}
+        {:else}
+          <Icon src={IconEmoji} />
+        {/if}
+      </span>
+    {/snippet}
+    <EmojiPanel on={{ select: on.select }} />
+  </Popover>
+</div>
 
 <!--
 @component
-Emoji picker dropdown with trigger icon. Wraps EmojiPanel in a Dropdown for positioning.
+Emoji picker popover. Renders a trigger that opens an `EmojiPanel`. Pass `revealOnHover` to make the
+trigger fade in only when an ancestor is hovered (used inside comment bars, message composers, etc.
+where the affordance is otherwise visual clutter).
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--emoji-picker--reveal-duration` | Fade-in duration in `revealOnHover` mode | `--sc-kit--duration--fast` |
 -->
 
-<style>.emoji-picker__trigger {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
+<style>.emoji-picker {
+  --_emoji-picker--reveal-duration: var(--sc-kit--emoji-picker--reveal-duration, var(--sc-kit--duration--fast));
+  display: contents;
+}
+.emoji-picker--reveal .emoji-picker__trigger {
   opacity: 0;
-  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: opacity var(--_emoji-picker--reveal-duration) var(--sc-kit--ease--default);
 }
-:global(:hover) > .emoji-picker__trigger {
+:global(:hover) > .emoji-picker--reveal .emoji-picker__trigger {
   opacity: 1;
+}
+.emoji-picker__trigger {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
 }</style>

package/dist/ui/emoji-picker/cmp.emoji-picker.svelte.d.ts

@@ -1,15 +1,26 @@
-import { type DropdownPosition } from '../dropdown';
+import type { Placement } from '@floating-ui/dom';
 import type { Snippet } from 'svelte';
 type Props = {
-    /** Popper.js dropdown placement @default 'bottom-end' */
-    dropdownPosition?: DropdownPosition;
+    /** Floating UI popover placement @default 'bottom-end' */
+    popoverPosition?: Placement;
+    /** Reveal-on-hover mode — trigger fades in only when an ancestor element is hovered. @default false */
+    revealOnHover?: boolean;
     on: {
         select: (value: string) => void;
     };
-    /** Custom trigger content (defaults to emoji icon) */
+    /** Custom trigger content (defaults to emoji icon). */
     children?: Snippet;
 };
-/** Emoji picker dropdown with trigger icon. Wraps EmojiPanel in a Dropdown for positioning. */
+/**
+ * Emoji picker popover. Renders a trigger that opens an `EmojiPanel`. Pass `revealOnHover` to make the
+ * trigger fade in only when an ancestor is hovered (used inside comment bars, message composers, etc.
+ * where the affordance is otherwise visual clutter).
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--emoji-picker--reveal-duration` | Fade-in duration in `revealOnHover` mode | `--sc-kit--duration--fast` |
+ */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

package/dist/ui/empty-state/cmp.empty-state.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">import { HtmlHelper } from '../../core/utils';
+import DefaultGraphic from './zero-content.svg?raw';
+const GRAPHIC_PRESETS = {
+    'zero-content': DefaultGraphic
+};
+let { graphic, title, description, action, layout = 'default' } = $props();
+const graphicPreset = $derived(typeof graphic === 'string' ? graphic : null);
+const graphicSnippet = $derived(typeof graphic === 'function' ? graphic : null);
+const sanitizedTitle = $derived(title ? HtmlHelper.sanitizeHtml(title) : '');
+const sanitizedDescription = $derived(description ? HtmlHelper.sanitizeHtml(description) : '');
+</script>
+
+<div class="empty-state empty-state--{layout}">
+  {#if graphicSnippet}
+    <div class="empty-state__graphic">{@render graphicSnippet()}</div>
+  {:else if graphicPreset}
+    <div class="empty-state__graphic empty-state__graphic--preset empty-state__graphic--preset-{graphicPreset}">
+      {@html GRAPHIC_PRESETS[graphicPreset]}
+    </div>
+  {/if}
+  {#if title}
+    <h3 class="empty-state__title">{@html sanitizedTitle}</h3>
+  {/if}
+  {#if description}
+    <p class="empty-state__description">{@html sanitizedDescription}</p>
+  {/if}
+  {#if action}
+    <div class="empty-state__action">{@render action()}</div>
+  {/if}
+</div>
+
+<!--
+@component
+EmptyState — centered placeholder for empty lists, tables, search results, first-run surfaces and any "nothing here" scenario. Renders an optional graphic (Snippet — consumer-sized, OR the built-in `'zero-content'` preset illustration), an optional HTML-capable title and description (both sanitized), and an optional action snippet. The `layout` prop picks one of three spacing scales — compact / default / spacious — covering inline-empties through hero-empties without separate components.
+
+Width is `100%` of the container — wrap or constrain in the consumer's layout if a narrower target is wanted.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--empty-state--padding-block` | Vertical padding | per layout |
+| `--sc-kit--empty-state--padding-inline` | Horizontal padding | per layout |
+| `--sc-kit--empty-state--gap--graphic` | Gap below the graphic | per layout |
+| `--sc-kit--empty-state--gap--title` | Gap between title and description | per layout |
+| `--sc-kit--empty-state--gap--action` | Gap above the action | per layout |
+| `--sc-kit--empty-state--title--font-size` | Title font size | `--sc-kit--font-size--lg` |
+| `--sc-kit--empty-state--title--color` | Title color | `--sc-kit--color--text--primary` |
+| `--sc-kit--empty-state--title--font-weight` | Title weight | `--sc-kit--font-weight--semibold` |
+| `--sc-kit--empty-state--description--font-size` | Description font size | `--sc-kit--font-size--md` |
+| `--sc-kit--empty-state--description--color` | Description color | `--sc-kit--color--text--secondary` |
+| `--sc-kit--empty-state--description--line-height` | Description line-height | `--sc-kit--leading--relaxed` |
+| `--sc-kit--empty-state--graphic--width` | Preset graphic width | `13.3125rem` (213px) |
+| `--sc-kit--empty-state--graphic--height` | Preset graphic height | `12.3125rem` (197px) |
+-->
+
+<style>.empty-state {
+  --_es--padding-block: var(--sc-kit--empty-state--padding-block);
+  --_es--padding-inline: var(--sc-kit--empty-state--padding-inline);
+  --_es--gap-graphic: var(--sc-kit--empty-state--gap--graphic);
+  --_es--gap-title: var(--sc-kit--empty-state--gap--title);
+  --_es--gap-action: var(--sc-kit--empty-state--gap--action);
+  --_es--title-font-size: var(--sc-kit--empty-state--title--font-size, var(--sc-kit--font-size--lg));
+  --_es--title-color: var(--sc-kit--empty-state--title--color, var(--sc-kit--color--text--primary));
+  --_es--title-font-weight: var(--sc-kit--empty-state--title--font-weight, var(--sc-kit--font-weight--semibold));
+  --_es--description-font-size: var(--sc-kit--empty-state--description--font-size, var(--sc-kit--font-size--md));
+  --_es--description-color: var(--sc-kit--empty-state--description--color, var(--sc-kit--color--text--secondary));
+  --_es--description-line-height: var(--sc-kit--empty-state--description--line-height, var(--sc-kit--leading--relaxed));
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  width: 100%;
+  padding: var(--_es--padding-block) var(--_es--padding-inline);
+}
+.empty-state--compact {
+  --sc-kit--empty-state--padding-block: var(--sc-kit--space--6);
+  --sc-kit--empty-state--padding-inline: var(--sc-kit--space--4);
+  --sc-kit--empty-state--gap--graphic: var(--sc-kit--space--3);
+  --sc-kit--empty-state--gap--title: var(--sc-kit--space--1);
+  --sc-kit--empty-state--gap--action: var(--sc-kit--space--2);
+}
+.empty-state--default {
+  --sc-kit--empty-state--padding-block: var(--sc-kit--space--12);
+  --sc-kit--empty-state--padding-inline: var(--sc-kit--space--6);
+  --sc-kit--empty-state--gap--graphic: var(--sc-kit--space--4);
+  --sc-kit--empty-state--gap--title: var(--sc-kit--space--2);
+  --sc-kit--empty-state--gap--action: var(--sc-kit--space--3);
+}
+.empty-state--spacious {
+  --sc-kit--empty-state--padding-block: var(--sc-kit--space--16);
+  --sc-kit--empty-state--padding-inline: var(--sc-kit--space--6);
+  --sc-kit--empty-state--gap--graphic: var(--sc-kit--space--6);
+  --sc-kit--empty-state--gap--title: var(--sc-kit--space--2);
+  --sc-kit--empty-state--gap--action: var(--sc-kit--space--4);
+}
+.empty-state__graphic {
+  margin-bottom: var(--_es--gap-graphic);
+  line-height: 0;
+}
+.empty-state__graphic--preset {
+  width: var(--sc-kit--empty-state--graphic--width, 13.3125rem);
+  height: var(--sc-kit--empty-state--graphic--height, 12.3125rem);
+}
+.empty-state__graphic--preset :global(svg) {
+  width: 100%;
+  height: 100%;
+}
+.empty-state__title {
+  margin: 0;
+  font-size: var(--_es--title-font-size);
+  font-weight: var(--_es--title-font-weight);
+  color: var(--_es--title-color);
+}
+.empty-state__title + .empty-state__description {
+  margin-top: var(--_es--gap-title);
+}
+.empty-state__description {
+  margin: 0;
+  font-size: var(--_es--description-font-size);
+  color: var(--_es--description-color);
+  line-height: var(--_es--description-line-height);
+}
+.empty-state__action {
+  margin-top: var(--_es--gap-action);
+}</style>

package/dist/ui/empty-state/cmp.empty-state.svelte.d.ts

@@ -0,0 +1,39 @@
+import type { Snippet } from 'svelte';
+type GraphicPreset = 'zero-content';
+type Props = {
+    /** Illustration / icon. Snippet for custom content (consumer-sized), OR a preset name to use a built-in illustration. Omit for no graphic. Current presets: `'zero-content'`. */
+    graphic?: Snippet | GraphicPreset;
+    /** Heading. May contain HTML — sanitized via `HtmlHelper.sanitizeHtml` before render. */
+    title?: string;
+    /** Body text. May contain HTML — sanitized before render. */
+    description?: string;
+    /** Action snippet below the description (typically Button / button group). */
+    action?: Snippet;
+    /** Spacing scale: `compact` for inline lists / dropdowns, `default` for modals / list views, `spacious` for hero / first-run. @default 'default' */
+    layout?: 'compact' | 'default' | 'spacious';
+};
+/**
+ * EmptyState — centered placeholder for empty lists, tables, search results, first-run surfaces and any "nothing here" scenario. Renders an optional graphic (Snippet — consumer-sized, OR the built-in `'zero-content'` preset illustration), an optional HTML-capable title and description (both sanitized), and an optional action snippet. The `layout` prop picks one of three spacing scales — compact / default / spacious — covering inline-empties through hero-empties without separate components.
+ *
+ * Width is `100%` of the container — wrap or constrain in the consumer's layout if a narrower target is wanted.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--empty-state--padding-block` | Vertical padding | per layout |
+ * | `--sc-kit--empty-state--padding-inline` | Horizontal padding | per layout |
+ * | `--sc-kit--empty-state--gap--graphic` | Gap below the graphic | per layout |
+ * | `--sc-kit--empty-state--gap--title` | Gap between title and description | per layout |
+ * | `--sc-kit--empty-state--gap--action` | Gap above the action | per layout |
+ * | `--sc-kit--empty-state--title--font-size` | Title font size | `--sc-kit--font-size--lg` |
+ * | `--sc-kit--empty-state--title--color` | Title color | `--sc-kit--color--text--primary` |
+ * | `--sc-kit--empty-state--title--font-weight` | Title weight | `--sc-kit--font-weight--semibold` |
+ * | `--sc-kit--empty-state--description--font-size` | Description font size | `--sc-kit--font-size--md` |
+ * | `--sc-kit--empty-state--description--color` | Description color | `--sc-kit--color--text--secondary` |
+ * | `--sc-kit--empty-state--description--line-height` | Description line-height | `--sc-kit--leading--relaxed` |
+ * | `--sc-kit--empty-state--graphic--width` | Preset graphic width | `13.3125rem` (213px) |
+ * | `--sc-kit--empty-state--graphic--height` | Preset graphic height | `12.3125rem` (197px) |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/empty-state/index.d.ts

@@ -0,0 +1 @@
+export { default as EmptyState } from './cmp.empty-state.svelte';

package/dist/ui/empty-state/index.js

@@ -0,0 +1 @@
+export { default as EmptyState } from './cmp.empty-state.svelte';

package/dist/ui/empty-state/zero-content.svg

@@ -0,0 +1,133 @@
+<svg width="213" height="197" viewBox="0 0 213 197" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g filter="url(#filter0_f_8327_30936)">
+    <path d="M74.6311 49.0151C117.493 -2.21236 160.373 5.47853 182.702 28.5481C235.444 83.04 173.091 87.0687 100.179 113.218C27.2673 139.367 21.0543 113.049 74.6311 49.0151Z" fill="url(#paint0_linear_8327_30936)" fill-opacity="0.5"/>
+  </g>
+  <g filter="url(#filter1_f_8327_30936)">
+    <path d="M60.8692 81.3816C118.142 47.0126 156.14 68.3202 169.684 97.4293C201.676 166.187 141.442 149.577 63.9868 150.41C-13.468 151.244 -10.7212 124.343 60.8692 81.3816Z" fill="url(#paint1_linear_8327_30936)" fill-opacity="0.75"/>
+  </g>
+  <g filter="url(#filter2_f_8327_30936)">
+    <path d="M140.118 89.0503C146.655 93.0803 146.655 102.584 140.118 106.614L113.113 123.263C106.239 127.501 97.382 122.556 97.382 114.481L97.382 81.183C97.382 73.1083 106.239 68.1637 113.113 72.4011L140.118 89.0503Z" fill="url(#paint2_linear_8327_30936)" fill-opacity="0.9"/>
+  </g>
+  <path d="M84.9187 50.1377C85.0816 45.4011 90.2426 42.5195 94.3601 44.8662L94.5593 44.9844L144.826 75.9736C148.708 78.3672 148.829 83.9107 145.189 86.501L144.826 86.7422L94.5593 117.731C90.3453 120.329 84.9148 117.298 84.9148 112.348V50.3682L84.9187 50.1377Z" fill="url(#paint3_linear_8327_30936)" stroke="url(#paint4_linear_8327_30936)" stroke-width="0.843341"/>
+  <foreignObject x="67.7778" y="36.6347" width="92.4288" height="109.811"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(4.9px);clip-path:url(#bgblur_0_8327_30936_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter3_dddd_8327_30936)" data-figma-bg-blur-radius="9.79302">
+  <path d="M148.404 58.8732C151.084 60.5191 151.084 64.4138 148.404 66.0596L129.165 77.8748C126.355 79.6002 122.741 77.5787 122.741 74.2816L122.741 50.6513C122.741 47.3542 126.355 45.3326 129.165 47.0581L148.404 58.8732Z" fill="#DCE7FB" fill-opacity="0.25"/>
+  <path d="M123.29 50.3848C123.471 47.7568 126.316 46.1658 128.651 47.3867L128.882 47.5186L148.121 59.333C150.385 60.7233 150.455 63.9536 148.333 65.459L148.121 65.5996L128.882 77.415C126.432 78.9192 123.281 77.1561 123.281 74.2812V50.6514L123.29 50.3848Z" stroke="url(#paint5_linear_8327_30936)" stroke-width="1.0798"/>
+</g>
+  <g filter="url(#filter4_f_8327_30936)">
+    <ellipse cx="85.493" cy="106.879" rx="9.62414" ry="14.6144" transform="rotate(-22.4427 85.493 106.879)" fill="url(#paint6_linear_8327_30936)"/>
+  </g>
+  <foreignObject x="0.297718" y="66.2781" width="96.6158" height="130.409"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(1.06px);clip-path:url(#bgblur_1_8327_30936_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter5_dddd_8327_30936)" data-figma-bg-blur-radius="2.12925">
+  <rect x="55.2612" y="70.8584" width="36.3086" height="57.8882" rx="4.2167" fill="#DCE7FB" fill-opacity="0.5"/>
+  <rect x="55.8011" y="71.3983" width="35.2288" height="56.8084" rx="3.6768" stroke="url(#paint7_linear_8327_30936)" stroke-width="1.0798"/>
+</g>
+  <circle cx="73.4147" cy="121.211" r="3.0828" stroke="url(#paint8_linear_8327_30936)" stroke-width="1.0798"/>
+  <defs>
+    <filter id="filter0_f_8327_30936" x="29.2403" y="0.72869" width="183.079" height="132.487" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feGaussianBlur stdDeviation="4.99112" result="effect1_foregroundBlur_8327_30936"/>
+    </filter>
+    <filter id="filter1_f_8327_30936" x="0.148213" y="57.2841" width="184.686" height="100.705" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feGaussianBlur stdDeviation="3.19387" result="effect1_foregroundBlur_8327_30936"/>
+    </filter>
+    <filter id="filter2_f_8327_30936" x="84.7318" y="58.1995" width="72.9393" height="79.2651" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feGaussianBlur stdDeviation="6.32505" result="effect1_foregroundBlur_8327_30936"/>
+    </filter>
+    <filter id="filter3_dddd_8327_30936" x="67.7778" y="36.6347" width="92.4288" height="109.811" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dx="-2.29015" dy="3.05353"/>
+      <feGaussianBlur stdDeviation="3.81691"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.729412 0 0 0 0 0.815686 0 0 0 0 0.968627 0 0 0 0.1 0"/>
+      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_8327_30936"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dx="-8.3972" dy="11.4507"/>
+      <feGaussianBlur stdDeviation="6.87044"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.729412 0 0 0 0 0.815686 0 0 0 0 0.968627 0 0 0 0.09 0"/>
+      <feBlend mode="normal" in2="effect1_dropShadow_8327_30936" result="effect2_dropShadow_8327_30936"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dx="-18.3212" dy="25.955"/>
+      <feGaussianBlur stdDeviation="9.54228"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.729412 0 0 0 0 0.815686 0 0 0 0 0.968627 0 0 0 0.05 0"/>
+      <feBlend mode="normal" in2="effect2_dropShadow_8327_30936" result="effect3_dropShadow_8327_30936"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dx="-32.8254" dy="45.8029"/>
+      <feGaussianBlur stdDeviation="11.069"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.729412 0 0 0 0 0.815686 0 0 0 0 0.968627 0 0 0 0.01 0"/>
+      <feBlend mode="normal" in2="effect3_dropShadow_8327_30936" result="effect4_dropShadow_8327_30936"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="effect4_dropShadow_8327_30936" result="shape"/>
+    </filter>
+    <clipPath id="bgblur_0_8327_30936_clip_path" transform="translate(-67.7778 -36.6347)"><path d="M148.404 58.8732C151.084 60.5191 151.084 64.4138 148.404 66.0596L129.165 77.8748C126.355 79.6002 122.741 77.5787 122.741 74.2816L122.741 50.6513C122.741 47.3542 126.355 45.3326 129.165 47.0581L148.404 58.8732Z"/>
+    </clipPath><filter id="filter4_f_8327_30936" x="70.7748" y="88.6612" width="29.4365" height="36.4363" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+    <feGaussianBlur stdDeviation="2.10835" result="effect1_foregroundBlur_8327_30936"/>
+  </filter>
+    <filter id="filter5_dddd_8327_30936" x="0.297718" y="66.2781" width="96.6158" height="130.409" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dx="-2.29015" dy="3.05353"/>
+      <feGaussianBlur stdDeviation="3.81691"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.729412 0 0 0 0 0.815686 0 0 0 0 0.968627 0 0 0 0.1 0"/>
+      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_8327_30936"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dx="-8.3972" dy="11.4507"/>
+      <feGaussianBlur stdDeviation="6.87044"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.729412 0 0 0 0 0.815686 0 0 0 0 0.968627 0 0 0 0.09 0"/>
+      <feBlend mode="normal" in2="effect1_dropShadow_8327_30936" result="effect2_dropShadow_8327_30936"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dx="-18.3212" dy="25.955"/>
+      <feGaussianBlur stdDeviation="9.54228"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.729412 0 0 0 0 0.815686 0 0 0 0 0.968627 0 0 0 0.05 0"/>
+      <feBlend mode="normal" in2="effect2_dropShadow_8327_30936" result="effect3_dropShadow_8327_30936"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dx="-32.8254" dy="45.8029"/>
+      <feGaussianBlur stdDeviation="11.069"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.729412 0 0 0 0 0.815686 0 0 0 0 0.968627 0 0 0 0.01 0"/>
+      <feBlend mode="normal" in2="effect3_dropShadow_8327_30936" result="effect4_dropShadow_8327_30936"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="effect4_dropShadow_8327_30936" result="shape"/>
+    </filter>
+    <clipPath id="bgblur_1_8327_30936_clip_path" transform="translate(-0.297718 -66.2781)"><rect x="55.2612" y="70.8584" width="36.3086" height="57.8882" rx="4.2167"/>
+    </clipPath><linearGradient id="paint0_linear_8327_30936" x1="155.973" y1="10.8812" x2="59.5441" y2="114.996" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#BAD0F7"/>
+    <stop offset="1" stop-color="#DCE7FB" stop-opacity="0"/>
+  </linearGradient>
+    <linearGradient id="paint1_linear_8327_30936" x1="186.81" y1="80.5815" x2="57.5354" y2="123.631" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white" stop-opacity="0"/>
+      <stop offset="1" stop-color="#FFEEF7"/>
+    </linearGradient>
+    <linearGradient id="paint2_linear_8327_30936" x1="117.054" y1="97.4931" x2="81.4409" y2="163.971" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#144AB0"/>
+      <stop offset="1" stop-color="#D8C8E9" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="paint3_linear_8327_30936" x1="108.719" y1="43.2396" x2="100.434" y2="106.118" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D8C8E9"/>
+      <stop offset="1" stop-color="#144AB0"/>
+    </linearGradient>
+    <linearGradient id="paint4_linear_8327_30936" x1="128.246" y1="103.743" x2="88.2045" y2="24.8984" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#144AB0"/>
+      <stop offset="0.622893" stop-color="white"/>
+      <stop offset="1" stop-color="#D8C8E9"/>
+    </linearGradient>
+    <linearGradient id="paint5_linear_8327_30936" x1="145.831" y1="93.0578" x2="124.467" y2="37.0598" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FFDEF0"/>
+      <stop offset="0.622893" stop-color="white"/>
+    </linearGradient>
+    <linearGradient id="paint6_linear_8327_30936" x1="79.4919" y1="96.82" x2="84.3803" y2="116.085" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white" stop-opacity="0"/>
+      <stop offset="1" stop-color="#144AB0"/>
+    </linearGradient>
+    <linearGradient id="paint7_linear_8327_30936" x1="74.8255" y1="120.998" x2="47.824" y2="79.443" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D8C8E9"/>
+      <stop offset="0.815" stop-color="white"/>
+    </linearGradient>
+    <linearGradient id="paint8_linear_8327_30936" x1="73.6542" y1="123.468" x2="71.5903" y2="116.875" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D8C8E9"/>
+      <stop offset="0.622893" stop-color="white"/>
+    </linearGradient>
+  </defs>
+</svg>