@invopop/popui 0.0.1

package/dist/DrawerContextItem.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { DrawerOption } from './types.ts';
+declare const __propDef: {
+    props: {
+        multiple?: boolean | undefined;
+        item: DrawerOption;
+        scrollIfSelected?: boolean | undefined;
+        workspace?: boolean | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DrawerContextItemProps = typeof __propDef.props;
+export type DrawerContextItemEvents = typeof __propDef.events;
+export type DrawerContextItemSlots = typeof __propDef.slots;
+export default class DrawerContextItem extends SvelteComponent<DrawerContextItemProps, DrawerContextItemEvents, DrawerContextItemSlots> {
+}
+export {};

package/dist/DrawerContextWorkspace.svelte

@@ -0,0 +1,40 @@
+<script>import DrawerContextItem from "./DrawerContextItem.svelte";
+import { Icon } from "@steeze-ui/svelte-icon";
+import { AddCircle, Settings } from "@invopop/ui-icons";
+import { createEventDispatcher } from "svelte";
+export let items = [];
+export let multiple = false;
+const dispatch = createEventDispatcher();
+</script>
+
+<div class="w-[300px] border border-neutral-100 pt-1 rounded shadow-lg space-y-0.5 bg-white">
+  <ul class="px-1 pb-0.5 space-y-1 max-h-[60vh] overflow-y-auto">
+    {#each items as item}
+      <DrawerContextItem {item} {multiple} workspace on:click />
+    {/each}
+  </ul>
+  <ul class="px-1 space-y-1 bg-neutral-50 rounded-b border-t border-neutral-100 p-1 space-y-1">
+    <li class="pl-1.5 py-1.5 pr-2 hover:bg-neutral-100 rounded-sm">
+      <button
+        class="flex items-center space-x-2 w-full"
+        on:click={() => {
+          dispatch('click', 'add')
+        }}
+      >
+        <Icon src={AddCircle} class="w-4 h-4 text-neutral-500 flex-shrink-0" />
+        <span class="text-neutral-800 tracking-tight text-base">Create workspace</span>
+      </button>
+    </li>
+    <li class="pl-1.5 py-1.5 pr-2 hover:bg-neutral-100 rounded-sm">
+      <button
+        class="flex items-center space-x-2 w-full"
+        on:click={() => {
+          dispatch('click', 'settings')
+        }}
+      >
+        <Icon src={Settings} class="w-4 h-4 text-neutral-500" />
+        <span class="text-neutral-800 tracking-tight text-base">Settings</span>
+      </button>
+    </li>
+  </ul>
+</div>

package/dist/DrawerContextWorkspace.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { DrawerOption } from './types.ts';
+declare const __propDef: {
+    props: {
+        items?: DrawerOption[] | undefined;
+        multiple?: boolean | undefined;
+    };
+    events: {
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DrawerContextWorkspaceProps = typeof __propDef.props;
+export type DrawerContextWorkspaceEvents = typeof __propDef.events;
+export type DrawerContextWorkspaceSlots = typeof __propDef.slots;
+export default class DrawerContextWorkspace extends SvelteComponent<DrawerContextWorkspaceProps, DrawerContextWorkspaceEvents, DrawerContextWorkspaceSlots> {
+}
+export {};

package/dist/DropdownSelect.svelte

@@ -0,0 +1,78 @@
+<script>import isEqual from "lodash/isEqual.js";
+import { Icon } from "@steeze-ui/svelte-icon";
+import { createEventDispatcher } from "svelte";
+import { resolveIcon } from "./helpers.js";
+import BaseDropdown from "./BaseDropdown.svelte";
+import DrawerContext from "./DrawerContext.svelte";
+import clsx from "clsx";
+import TagStatus from "./TagStatus.svelte";
+const dispatch = createEventDispatcher();
+export let value = "";
+export let icon = void 0;
+export let iconTheme = "default";
+export let options = [];
+export let placeholder = "";
+export let multiple = false;
+export let fullWidth = false;
+let selectDropdown;
+let resolvedIcon;
+let isOpen = false;
+$: {
+  resolveIcon(icon).then((icon2) => {
+    resolvedIcon = icon2;
+  });
+}
+$:
+  items = options.map((o) => ({
+    ...o,
+    selected: multiple ? Boolean(value.find((v) => v.value === o.value)) : o.value === value
+  }));
+$:
+  selectedColor = !multiple && items.find((i) => i.selected)?.color;
+$:
+  selectedLabel = !multiple && items.find((i) => i.selected)?.label || placeholder;
+$:
+  styles = clsx({
+    "shadow-active border-workspace-accent hover:border-workspace-accent": isOpen
+  });
+function handleClick(e) {
+  value = e.detail;
+  dispatch("selected", value);
+  if (multiple)
+    return;
+  selectDropdown.toggle();
+}
+function handleSelected(e) {
+  if (!multiple)
+    return;
+  if (isEqual(value, e.detail))
+    return;
+  value = e.detail;
+}
+</script>
+
+<BaseDropdown bind:isOpen placement="bottom-start" {fullWidth} bind:this={selectDropdown}>
+  <div
+    class="{styles} dropdown-select flex items-center border hover:border-neutral-300 rounded-md py-1.25 pl-2 gap-1 bg-white"
+    slot="trigger"
+  >
+    {#if resolvedIcon && !selectedColor}
+      <Icon src={resolvedIcon} {iconTheme} class="h-4 w-4 text-neutral-500 flex-shrink-0" />
+    {/if}
+    {#if selectedColor}
+      <TagStatus dot status={selectedColor} />
+    {/if}
+    <span class="w-full pr-8 text-neutral-800 placeholder-neutral-800 text-base">
+      {selectedLabel}
+    </span>
+  </div>
+  <DrawerContext {multiple} {items} on:click={handleClick} on:selected={handleSelected} />
+</BaseDropdown>
+
+<style>
+  .dropdown-select {
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMiIgeT0iMiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiByeD0iNCIgZmlsbD0iI0YzRjRGNiIvPgo8cGF0aCBkPSJNNi41IDguMjUwMDRMMTAgMTEuNzVMMTMuNSA4LjI1IiBzdHJva2U9IiMwMzA3MTIiIHN0cm9rZS13aWR0aD0iMS4xIi8+Cjwvc3ZnPg==');
+    background-repeat: no-repeat;
+    background-position: center right 8px;
+  }
+</style>

package/dist/DropdownSelect.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+import type { AnyProp, DrawerOption, IconTheme } from './types.ts';
+import { type IconSource } from '@steeze-ui/svelte-icon';
+declare const __propDef: {
+    props: {
+        value?: AnyProp | undefined;
+        icon?: IconSource | string | undefined;
+        iconTheme?: IconTheme | undefined;
+        options?: DrawerOption[] | undefined;
+        placeholder?: string | undefined;
+        multiple?: boolean | undefined;
+        fullWidth?: boolean | undefined;
+    };
+    events: {
+        selected: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DropdownSelectProps = typeof __propDef.props;
+export type DropdownSelectEvents = typeof __propDef.events;
+export type DropdownSelectSlots = typeof __propDef.slots;
+export default class DropdownSelect extends SvelteComponent<DropdownSelectProps, DropdownSelectEvents, DropdownSelectSlots> {
+}
+export {};

package/dist/EmptyStateIcon.svelte

@@ -0,0 +1,46 @@
+<script>import IconEmpty from "./svg/IconEmpty.svelte";
+import { Icon } from "@steeze-ui/svelte-icon";
+export let icon = void 0;
+export let title = "";
+export let description = "";
+export let check = false;
+</script>
+
+<div
+  class="flex flex-col text-center items-center justify-center h-full font-sans gap-1"
+  aria-label={title}
+>
+  {#if icon}
+    <div class="relative h-[120px] w-[352px] max-w-sm">
+      <IconEmpty />
+      <div class="absolute left-[50%] translate-x-[-50%] top-[50%] translate-y-[-50%]">
+        <Icon src={icon} class="h-12 w-12 text-workspace-accent" />
+        {#if check}
+          <svg
+            width="26"
+            height="26"
+            viewBox="0 0 26 26"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            class="absolute top-[-16px] right-[-16px]"
+          >
+            <path
+              d="M13 1C6.3835 1 1 6.3835 1 13C1 19.6165 6.3835 25 13 25C19.6165 25 25 19.6165 25 13C25 6.3835 19.6165 1 13 1Z"
+              fill="#169958"
+            />
+            <circle cx="13" cy="13" r="10" stroke="white" stroke-opacity="0.4" stroke-width="0.6" />
+            <path
+              d="M18.1078 9.82205C15.7021 11.6837 13.6627 14.2538 12.0477 17.4584C11.8808 17.7912 11.5495 17.9999 11.1884 17.9999C10.83 18.004 10.4922 17.7885 10.3253 17.4517C9.58119 15.9471 8.7491 14.7239 7.78243 13.7123C7.40457 13.3176 7.40586 12.6764 7.78632 12.2831C8.16418 11.8898 8.78016 11.8898 9.15932 12.2871C9.90083 13.063 10.5699 13.9413 11.182 14.9435C12.7853 12.1888 14.7199 9.92443 16.9509 8.19887C17.3805 7.8675 17.9888 7.9591 18.3084 8.40766C18.628 8.85488 18.5387 9.48934 18.1078 9.82205Z"
+              fill="white"
+            />
+          </svg>
+        {/if}
+      </div>
+    </div>
+  {/if}
+  <div class="space-y-0.5">
+    <h4 class="font-medium text-base text-neutral-800 text-base tracking-tight">{title}</h4>
+    <p class="max-w-xs text-base text-neutral-500 tracking-normal">{description}</p>
+    <p><slot /></p>
+  </div>
+</div>

package/dist/EmptyStateIcon.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import { type IconSource } from '@steeze-ui/svelte-icon';
+declare const __propDef: {
+    props: {
+        icon?: IconSource | undefined;
+        title?: string | undefined;
+        description?: string | undefined;
+        check?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type EmptyStateIconProps = typeof __propDef.props;
+export type EmptyStateIconEvents = typeof __propDef.events;
+export type EmptyStateIconSlots = typeof __propDef.slots;
+export default class EmptyStateIcon extends SvelteComponent<EmptyStateIconProps, EmptyStateIconEvents, EmptyStateIconSlots> {
+}
+export {};

package/dist/EmptyStateIllustration.svelte

@@ -0,0 +1,58 @@
+<script>import BgPattern from "./svg/BgPattern.svelte";
+import IconContact from "./svg/IconContact.svelte";
+import IconInvoice from "./svg/IconInvoice.svelte";
+import IconProduct from "./svg/IconProduct.svelte";
+import IconFile from "./svg/IconFile.svelte";
+import IconPdf from "./svg/IconPdf.svelte";
+import IconNoResults from "./svg/IconNoResults.svelte";
+export let icon = void 0;
+export let title = "";
+export let description = "";
+$:
+  iconComponent = getComponent(icon);
+function getComponent(icon2) {
+  if (!icon2)
+    return void 0;
+  const icons = {
+    invoices: IconInvoice,
+    contacts: IconContact,
+    products: IconProduct,
+    file: IconFile,
+    pdf: IconPdf,
+    "no-results": IconNoResults
+  };
+  return icons[icon2];
+}
+</script>
+
+<div
+  class="flex flex-col text-center items-center justify-center h-full font-sans gap-1"
+  aria-label={title}
+>
+  {#if iconComponent}
+    <div class="relative h-[120px] w-full max-w-sm">
+      <div class="absolute top-0 left-0">
+        <BgPattern />
+      </div>
+      <svelte:component
+        this={iconComponent}
+        classes="text-neutral-400/40 absolute left-[50%] translate-x-[-50%] top-[50%] translate-y-[-50%] -ml-[40px] rotate-[-8deg] mt-0.5 z-20 w-[86px] h-[104px]"
+      />
+      <svelte:component
+        this={iconComponent}
+        classes="{icon === 'no-results'
+          ? 'text-neutral-400'
+          : 'text-workspace-accent'} absolute left-[50%] translate-x-[-50%] top-[50%] translate-y-[-50%] z-30 w-[97px] h-[117px]"
+      />
+      <svelte:component
+        this={iconComponent}
+        classes="text-neutral-400/40 absolute left-[50%] translate-x-[-50%] top-[50%] translate-y-[-50%] ml-[40px] rotate-[8deg] mt-0.5 z-20 w-[86px] h-[104px]"
+      />
+    </div>
+  {/if}
+  <div class="space-y-0.5">
+    <h4 class="font-medium text-base text-neutral-800 text-base tracking-tight">{title}</h4>
+    <p class="max-w-xs text-base text-neutral-500 tracking-normal">{description}</p>
+    <p><slot /></p>
+  </div>
+</div>

package/dist/EmptyStateIllustration.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import type { EmptyStateIcon } from './types.js';
+declare const __propDef: {
+    props: {
+        icon?: EmptyStateIcon | undefined;
+        title?: string | undefined;
+        description?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type EmptyStateIllustrationProps = typeof __propDef.props;
+export type EmptyStateIllustrationEvents = typeof __propDef.events;
+export type EmptyStateIllustrationSlots = typeof __propDef.slots;
+export default class EmptyStateIllustration extends SvelteComponent<EmptyStateIllustrationProps, EmptyStateIllustrationEvents, EmptyStateIllustrationSlots> {
+}
+export {};

package/dist/FeedEvents.svelte

@@ -0,0 +1,26 @@
+<script>import TagStatus from "./TagStatus.svelte";
+export let events = [];
+</script>
+
+<div class="border border-neutral-100 bg-neutral-50 rounded">
+  {#each events as event, i (i)}
+    <div class:border-t={i > 0} class="border-neutral-100 py-2 px-3">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center space-x-2">
+          <TagStatus status={event.status.type} label={event.status.label} />
+          {#if event.code}
+            <p class="text-sm text-neutral-500 font-mono tracking-wide">
+              {event.code}
+            </p>
+          {/if}
+        </div>
+        <p class="text-sm text-neutral-500 font-mono tracking-wide">
+          {event.date.toISOString()}
+        </p>
+      </div>
+      {#if event.message}
+        <p class="text-neutral-800 text-sm pt-2 tracking-normal">{event.message}</p>
+      {/if}
+    </div>
+  {/each}
+</div>

package/dist/FeedEvents.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { FeedEvent } from './types.js';
+declare const __propDef: {
+    props: {
+        events?: FeedEvent[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FeedEventsProps = typeof __propDef.props;
+export type FeedEventsEvents = typeof __propDef.events;
+export type FeedEventsSlots = typeof __propDef.slots;
+export default class FeedEvents extends SvelteComponent<FeedEventsProps, FeedEventsEvents, FeedEventsSlots> {
+}
+export {};

package/dist/FeedIconEvent.svelte

@@ -0,0 +1,10 @@
+<script>import { Icon } from "@steeze-ui/svelte-icon";
+export let icon = void 0;
+export let iconTheme = "default";
+</script>
+
+<div class="relative py-0.5 mt-2">
+  {#if icon}
+    <Icon src={icon} theme={iconTheme} class="h-4 w-4 text-neutral-500" />
+  {/if}
+</div>

package/dist/FeedIconEvent.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import { type IconSource } from '@steeze-ui/svelte-icon';
+import type { IconTheme } from './types.js';
+declare const __propDef: {
+    props: {
+        icon?: IconSource | undefined;
+        iconTheme?: IconTheme | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FeedIconEventProps = typeof __propDef.props;
+export type FeedIconEventEvents = typeof __propDef.events;
+export type FeedIconEventSlots = typeof __propDef.slots;
+export default class FeedIconEvent extends SvelteComponent<FeedIconEventProps, FeedIconEventEvents, FeedIconEventSlots> {
+}
+export {};

package/dist/FeedIconStatus.svelte

@@ -0,0 +1,26 @@
+<script>import { Icon } from "@steeze-ui/svelte-icon";
+import { Alert, Failure, Queue, Running, Success, CheckBadge, Skip } from "@invopop/ui-icons";
+export let status;
+$:
+  iconStatus = getIconStatus(status);
+function getIconStatus(status2) {
+  const icons = {
+    failure: Failure,
+    success: Success,
+    run: Running,
+    queued: Queue,
+    alert: Alert,
+    skip: Skip,
+    signed: CheckBadge
+  };
+  return icons[status2];
+}
+</script>
+
+{#if iconStatus}
+  <div title={status}>
+    <Icon src={iconStatus} class="h-4 w-4 flex-shrink-0" />
+  </div>
+{:else}
+  <div class="w-4 h-4 flex-shrink-0 bg-neutral-200 rounded-full" />
+{/if}

package/dist/FeedIconStatus.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { FeedItemStatus } from './types.ts';
+declare const __propDef: {
+    props: {
+        status: FeedItemStatus;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FeedIconStatusProps = typeof __propDef.props;
+export type FeedIconStatusEvents = typeof __propDef.events;
+export type FeedIconStatusSlots = typeof __propDef.slots;
+export default class FeedIconStatus extends SvelteComponent<FeedIconStatusProps, FeedIconStatusEvents, FeedIconStatusSlots> {
+}
+export {};

package/dist/FeedItem.svelte

@@ -0,0 +1,87 @@
+<script>import FeedIconEvent from "./FeedIconEvent.svelte";
+import FeedIconStatus from "./FeedIconStatus.svelte";
+import { createEventDispatcher } from "svelte";
+import BaseButton from "./BaseButton.svelte";
+import ProfileAvatar from "./ProfileAvatar.svelte";
+const dispatch = createEventDispatcher();
+export let status = void 0;
+export let icon = void 0;
+export let title = "";
+export let date = void 0;
+export let hasNext = false;
+export let slug = "";
+export let viewable = false;
+export let viewableText = "View";
+export let user = void 0;
+export let type = "";
+export let extraText = "";
+const dateOptions = {
+  year: "numeric",
+  month: "short",
+  day: "numeric",
+  hour: "2-digit",
+  minute: "2-digit",
+  hour12: false
+};
+</script>
+
+<div id={`feed-item-${slug}`} class="relative text-left w-full min-w-[344px]">
+  {#if hasNext && icon}
+    <span class="absolute bottom-[-20px] left-2 border-l border-neutral-100 w-px h-[58px]" />
+  {/if}
+  <div class="flex items-start justify-between space-x-2 py-3">
+    <div class="relative">
+      {#if icon}
+        <FeedIconEvent {icon} />
+      {/if}
+    </div>
+    <div
+      class="flex-1 items-center justify-start pl-2.5 py-2 pr-2 rounded-lg border border-neutral-100"
+    >
+      <div
+        class="text-base text-neutral-800 whitespace-nowrap tracking-normal font-medium flex items-center gap-1 {viewable
+          ? 'max-w-[260px]'
+          : 'max-w-[320px]'}"
+      >
+        {#if user}
+          <div class="mr-0.5">
+            <ProfileAvatar small {...user} />
+          </div>
+        {/if}
+        <p class="truncate" {title}>{title}</p>
+
+        {#if status}
+          <FeedIconStatus {status} />
+        {/if}
+      </div>
+      <p
+        class="mt-0.5 flex items-center space-x-2 text-sm text-neutral-500 whitespace-nowrap tabular-nums slashed-zero lining-nums tracking-normal"
+      >
+        {#if date}
+          <span>
+            {date.toLocaleDateString('en-us', dateOptions)}
+          </span>
+        {/if}
+        {#if date && extraText}
+          <span>·</span>
+        {/if}
+        {#if extraText}
+          <span>{extraText}</span>
+        {/if}
+      </p>
+    </div>
+  </div>
+  {#if viewable}
+    <span class="absolute top-5 right-2">
+      <BaseButton
+        small
+        variant="secondary"
+        on:click={() => {
+          dispatch('view', type)
+        }}
+      >
+        {viewableText}
+      </BaseButton>
+    </span>
+  {/if}
+</div>

package/dist/FeedItem.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponent } from "svelte";
+import type { IconSource } from '@steeze-ui/svelte-icon';
+import type { FeedItemStatus, FeedItemUser } from './types.ts';
+declare const __propDef: {
+    props: {
+        status?: FeedItemStatus | undefined;
+        icon?: IconSource | undefined;
+        title?: string | undefined;
+        date?: Date | undefined;
+        hasNext?: boolean | undefined;
+        slug?: string | undefined;
+        viewable?: boolean | undefined;
+        viewableText?: string | undefined;
+        user?: FeedItemUser | undefined;
+        type?: string | undefined;
+        extraText?: string | undefined;
+    };
+    events: {
+        view: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FeedItemProps = typeof __propDef.props;
+export type FeedItemEvents = typeof __propDef.events;
+export type FeedItemSlots = typeof __propDef.slots;
+export default class FeedItem extends SvelteComponent<FeedItemProps, FeedItemEvents, FeedItemSlots> {
+}
+export {};

package/dist/FeedItemDetail.svelte

@@ -0,0 +1,56 @@
+<script>import FeedIconStatus from "./FeedIconStatus.svelte";
+import UuidCopy from "./UuidCopy.svelte";
+import FeedEvents from "./FeedEvents.svelte";
+import { slide } from "svelte/transition";
+import SeparatorHorizontal from "./SeparatorHorizontal.svelte";
+export let status = void 0;
+export let title = "";
+export let uuid = "";
+export let events = [];
+export let idLabel = "ID:";
+let open = false;
+</script>
+
+<div class="w-full rounded-lg border border-neutral-100">
+  <div class="px-3 py-2.5 flex items-center space-x-1.5">
+    {#if status}
+      <FeedIconStatus {status} />
+    {/if}
+    <span class="truncate font-medium text-neutral-800 text-base">{title}</span>
+  </div>
+  <SeparatorHorizontal />
+  <div class="pl-3 py-1 pr-2.5 flex items-center space-x-0.5">
+    <span class="text-sm text-neutral-500 whitespace-nowrap">{idLabel}</span>
+    {#if uuid}
+      <UuidCopy {uuid} full small on:copied />
+    {/if}
+  </div>
+  {#if events.length}
+    <SeparatorHorizontal />
+    <div class="px-3 py-2 text-sm text-neutral-500 flex items-center justify-between">
+      <span>Logs</span>
+      <button
+        on:click={() => {
+          open = !open
+        }}
+      >
+        <svg
+          class:rotate-180={open}
+          width="20"
+          height="20"
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <rect x="2" y="2" width="16" height="16" rx="4" fill="#F3F4F6" />
+          <path d="M6.5 8.25004L10 11.75L13.5 8.25" stroke="#030712" stroke-width="1.1" />
+        </svg>
+      </button>
+    </div>
+    {#if open}
+      <div transition:slide class="px-3 pb-3">
+        <FeedEvents {events} />
+      </div>
+    {/if}
+  {/if}
+</div>

package/dist/FeedItemDetail.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { FeedEvent, FeedItemStatus } from './types.ts';
+declare const __propDef: {
+    props: {
+        status?: FeedItemStatus | undefined;
+        title?: string | undefined;
+        uuid?: string | undefined;
+        events?: FeedEvent[] | undefined;
+        idLabel?: string | undefined;
+    };
+    events: {
+        copied: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FeedItemDetailProps = typeof __propDef.props;
+export type FeedItemDetailEvents = typeof __propDef.events;
+export type FeedItemDetailSlots = typeof __propDef.slots;
+export default class FeedItemDetail extends SvelteComponent<FeedItemDetailProps, FeedItemDetailEvents, FeedItemDetailSlots> {
+}
+export {};