@streamscloud/embeddable 5.1.3 → 6.0.1

package/dist/media-center/media-center/short-video-resources-generator.js

@@ -0,0 +1,26 @@
+import { ContinuationToken } from '../../core/continuation-token';
+import { CursorDataLoader } from '../../core/data-loaders';
+export const makeShortVideosProvider = (data) => {
+    const { dataProvider, categoryId, prefetchedItems = [] } = data;
+    const loader = new CursorDataLoader({
+        loadPage: async (continuationToken) => {
+            const result = await dataProvider.getShortVideosCursor({
+                filter: { categoryId, excludeIds: prefetchedItems.length ? prefetchedItems.map((i) => i.id) : undefined },
+                continuationToken: continuationToken.toRawFormat(),
+                limit: 20
+            });
+            const items = result.items;
+            return {
+                items: items,
+                continuationToken: ContinuationToken.fromPayload(result.continuationToken)
+            };
+        }
+    });
+    return {
+        initialData: {
+            prefetchedItems,
+            startIndex: prefetchedItems.length ? 0 : -1
+        },
+        loadMore: loader.loadMore
+    };
+};

package/dist/media-center/media-center/types.d.ts

@@ -0,0 +1,10 @@
+import type { ProductCardModel } from '../../products/product-card';
+import type { ShortVideoViewerModel } from '../../short-videos/short-video-viewer';
+export declare enum MediaCenterMode {
+    ShortVideos = "short-videos",
+    Stream = "stream"
+}
+export type OverviewData = {
+    shortVideos: ShortVideoViewerModel[];
+    products: ProductCardModel[];
+};

package/dist/media-center/media-center/types.js

@@ -0,0 +1,5 @@
+export var MediaCenterMode;
+(function (MediaCenterMode) {
+    MediaCenterMode["ShortVideos"] = "short-videos";
+    MediaCenterMode["Stream"] = "stream";
+})(MediaCenterMode || (MediaCenterMode = {}));

package/dist/products/product-card/cmp.product-card.svelte

@@ -7,14 +7,14 @@ let { product, includeBeforeNowPrefix, inert = false, localization: localization
 const localization = $derived(new ProductCardLocalization(localizationInit));
 const showDescriptionPresented = $derived(product.shortDescription && product.shortDescription.length > 0);
 const onProductClicked = (event) => {
-    if (!product.link) {
-        return;
-    }
     event.preventDefault();
     event.stopPropagation();
     if (on === null || on === void 0 ? void 0 : on.productClick) {
         on.productClick(product.id);
     }
+    if (!product.link) {
+        return;
+    }
     window.open(product.link, '_blank', 'noopener noreferrer');
 };
 </script>
@@ -49,7 +49,7 @@ const onProductClicked = (event) => {
     </div>
   </div>
 
-  {#if product.link}
+  {#if product.link || on?.productClick}
     <a href={product.link} onclick={onProductClicked} target="_blank" rel="noopener noreferrer" class="product-card__link" aria-label="none">&nbsp;</a>
   {/if}
 </div>
@@ -66,6 +66,8 @@ const onProductClicked = (event) => {
   }
 }
 .product-card {
+  --_product-card--aspect-ratio: var(--product-card--aspect-ratio, 10/16);
+  --_product-card--border-radius: var(--product-card--border-radius, 0.5rem);
   --image--border-radius: 0.25rem;
   --image--object-fit: fit;
   --image--width: auto;
@@ -76,11 +78,11 @@ const onProductClicked = (event) => {
   flex-direction: column;
   position: relative;
   container-type: inline-size;
-  aspect-ratio: 10/16;
+  aspect-ratio: var(--_product-card--aspect-ratio);
   color: #000000;
   background-color: rgba(255, 255, 255, 0.9);
   border: 0.038125rem solid #f2f2f3;
-  border-radius: 0.5rem;
+  border-radius: var(--_product-card--border-radius);
   padding: 0.75rem 0.75rem 1.125rem;
   justify-content: space-between;
   /* Set 'container-type: inline-size;' to reference container*/
@@ -144,6 +146,9 @@ const onProductClicked = (event) => {
   min-height: 1.375rem;
   /* Set 'container-type: inline-size;' to reference container*/
 }
+:global([data-theme="dark"]) .product-card__description {
+  color: #d1d5db;
+}
 @container (width < 230px) {
   .product-card__description {
     font-size: 0.625rem;

package/dist/products/product-card/mapper.js

@@ -1,8 +1,8 @@
 import { getMediaItemImageUrl } from '../../core/media';
 import { shouldUseSalePrice } from '../price-helper';
 export const mapToProductCard = (payload, referenceDate) => {
-    const effectiveSalePrice = payload.priceAndAvailability?.productSalePrices?.find((x) => shouldUseSalePrice({
-        price: payload.priceAndAvailability?.price,
+    const effectiveSalePrice = payload.priceAndAvailability.productSalePrices?.find((x) => shouldUseSalePrice({
+        price: payload.priceAndAvailability.price,
         salePrice: x.salePrice,
         effectiveDateFrom: x.salePriceEffectiveDateFrom,
         effectiveDateTo: x.salePriceEffectiveDateTo,
@@ -14,7 +14,7 @@ export const mapToProductCard = (payload, referenceDate) => {
         shortDescription: payload.shortDescription,
         link: payload.link,
         brandName: payload.brand?.name || null,
-        image: getMediaItemImageUrl(payload.media?.[0]),
+        image: payload.media.length ? getMediaItemImageUrl(payload.media[0]) : null,
         currency: payload.priceAndAvailability.currency,
         price: payload.priceAndAvailability.price,
         salePrice: effectiveSalePrice?.salePrice ?? null

package/dist/short-videos/short-video-card/cmp.short-video-card.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">import { Icon } from '../../ui/icon';
+import { ImageRounded } from '../../ui/image';
+import { LineClamp } from '../../ui/line-clamp';
+import { ProportionalContainer } from '../../ui/proportional-container';
+import IconPhone from '@fluentui/svg-icons/icons/phone_20_regular.svg?raw';
+let { shortVideo, aspectRatio = 9 / 16, on } = $props();
+</script>
+
+<div class="short-video-card">
+  <div class="short-video-card__media">
+    <ProportionalContainer ratio={aspectRatio}>
+      <ImageRounded src={shortVideo.cover} alt="" noBorders={true} />
+    </ProportionalContainer>
+
+    <div class="short-video-card__media-icons">
+      <Icon src={IconPhone}></Icon>
+    </div>
+
+    <div class="short-video-card__gradient-overlay"></div>
+  </div>
+
+  {#if shortVideo.text}
+    <div class="short-video-card__text">
+      <div class="short-video-card__text-value">
+        <LineClamp value={shortVideo.text} maxLines={2} enableShowMore={false} />
+      </div>
+    </div>
+  {/if}
+
+  {#if on?.click}
+    <button type="button" onclick={on.click} class="short-video-card__link" aria-label="none">&nbsp;</button>
+  {/if}
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.short-video-card {
+  position: relative;
+  overflow: hidden;
+  container-type: inline-size;
+  width: 100%;
+  border-radius: 0.375rem;
+}
+.short-video-card__media {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  --image--rounded--outer--border-radius: 1%;
+}
+.short-video-card__gradient-overlay {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 350px) {
+  .short-video-card__gradient-overlay {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 80px;
+    background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
+    pointer-events: none;
+  }
+}
+.short-video-card__media-icons {
+  position: absolute;
+  top: 0.625em;
+  right: 0.625em;
+  display: flex;
+  align-items: center;
+  gap: 0.3125em;
+  --icon--size: 1.25em;
+  --icon--color: #ffffff;
+}
+.short-video-card__text {
+  font-weight: 500;
+  white-space: pre-line;
+  word-break: break-word;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  line-clamp: 3;
+  -webkit-line-clamp: 3;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+.short-video-card__text-value {
+  font-size: 0.9375em;
+  line-height: 1.2;
+}
+@container (width < 350px) {
+  .short-video-card__text {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 100%);
+    color: #ffffff;
+    font-size: 0.9375rem;
+    font-weight: 400;
+    padding: 0.78125rem 1rem;
+    padding-top: 2.5rem;
+  }
+}
+.short-video-card__link {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}</style>

package/dist/short-videos/short-video-card/cmp.short-video-card.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { ShortVideoCardModel } from './types';
+type Props = {
+    shortVideo: ShortVideoCardModel;
+    aspectRatio?: number;
+    on?: {
+        click?: () => void;
+    };
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/short-videos/short-video-card/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ShortVideoCard } from './cmp.short-video-card.svelte';
+export type { ShortVideoCardModel } from './types';

package/dist/short-videos/short-video-card/index.js

@@ -0,0 +1 @@
+export { default as ShortVideoCard } from './cmp.short-video-card.svelte';

package/dist/short-videos/short-video-card/types.d.ts

@@ -0,0 +1,5 @@
+export type ShortVideoCardModel = {
+    id: string;
+    text: string | null;
+    cover: string;
+};

package/dist/short-videos/short-video-card/types.js

@@ -0,0 +1 @@
+export {};

package/dist/short-videos/short-video-viewer/cmp.short-video-controls.svelte

@@ -49,19 +49,19 @@ const onLikeClicked = () => __awaiter(void 0, void 0, void 0, function* () {
     if (!socialInteractionsHandler) {
         return;
     }
-    yield socialInteractionsHandler.onToggleLike(model.id);
+    yield socialInteractionsHandler.toggleLike(model.id);
 });
 const onShareClicked = () => __awaiter(void 0, void 0, void 0, function* () {
     if (!socialInteractionsHandler) {
         return;
     }
-    yield socialInteractionsHandler.onShare(model.id);
+    yield socialInteractionsHandler.share(model.id);
 });
 const refreshIsLiked = () => __awaiter(void 0, void 0, void 0, function* () {
     if (!socialInteractionsHandler) {
         return;
     }
-    isLikedStore = yield socialInteractionsHandler.isLiked(model.id);
+    isLikedStore = yield socialInteractionsHandler.getIsLiked(model.id);
 });
 </script>
 

package/dist/short-videos/short-video-viewer/cmp.short-video-controls.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ShortVideoSocialInteractionsHandler } from './types';
+import type { IPostSocialInteractionsHandler } from './types';
 type Props = {
     model: {
         id: string;
@@ -9,7 +9,7 @@ type Props = {
             isImage: boolean;
         };
     };
-    socialInteractionsHandler?: ShortVideoSocialInteractionsHandler;
+    socialInteractionsHandler?: IPostSocialInteractionsHandler;
     on?: {
         attachmentsClicked?: () => void;
     };

package/dist/short-videos/short-video-viewer/cmp.short-video-viewer.svelte

@@ -6,26 +6,9 @@ import { default as ShortVideoControls } from './cmp.short-video-controls.svelte
 import { default as ShortVideoHeading } from './cmp.short-video-heading.svelte';
 import { ShortVideoViewerLocalization } from './short-video-viewer-localization';
 import { ShortVideoViewerUiManager } from './ui-manager.svelte';
-let { model, socialInteractionsHandler, availableSideSpace = 0, showAttachments = true, showControls = true, autoplay = 'on-appearance', localization: localizationInit = 'en', on } = $props();
+let { model, socialInteractionsHandler, showAttachments = true, showControls = true, autoplay = 'on-appearance', localization: localizationInit = 'en', on } = $props();
 const localization = $derived(new ShortVideoViewerLocalization(localizationInit));
-let actionsPanelRef = $state.raw(null);
 const uiManager = new ShortVideoViewerUiManager();
-$effect(() => {
-    if (actionsPanelRef) {
-        const resizeObserver = new ResizeObserver(() => {
-            if (actionsPanelRef) {
-                uiManager.updateActionsPanelWidth(actionsPanelRef.clientWidth);
-            }
-        });
-        resizeObserver.observe(actionsPanelRef);
-        return () => {
-            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
-        };
-    }
-});
-$effect(() => {
-    uiManager.updateAvailableSideSpace(availableSideSpace);
-});
 $effect(() => {
     uiManager.updateCanShowAttachments(showAttachments);
     uiManager.updateCanShowControls(showControls);
@@ -51,10 +34,7 @@ $effect(() => {
     {/if}
   </div>
 
-  <div
-    class="short-video-viewer__actions-panel"
-    class:short-video-viewer__actions-panel--inside-frame={uiManager.showActionsInsideFrame}
-    bind:this={actionsPanelRef}>
+  <div class="short-video-viewer__actions-panel" class:short-video-viewer__actions-panel--inside-frame={true}>
     {#if uiManager.showAttachments}
       <AttachmentsInline model={model} />
     {/if}
@@ -88,8 +68,6 @@ $effect(() => {
   }
 }
 .short-video-viewer {
-  --_short-video-viewer--actions-panel--top: var(--short-video-viewer--actions-panel--top, 0.9375rem);
-  --_short-video-viewer--actions-panel--bottom: var(--short-video-viewer--actions-panel--bottom, 0.9375rem);
   --video--media-fit: cover;
   width: 100%;
   min-width: 100%;
@@ -116,8 +94,8 @@ $effect(() => {
 .short-video-viewer__actions-panel {
   position: absolute;
   left: calc(100% + 0.625rem);
-  top: var(--_short-video-viewer--actions-panel--top);
-  bottom: var(--_short-video-viewer--actions-panel--bottom);
+  top: 0.9375rem;
+  bottom: 0.9375rem;
   gap: 2.5rem;
   display: flex;
   flex-direction: column;
@@ -128,12 +106,16 @@ $effect(() => {
   .short-video-viewer__actions-panel {
     left: auto;
     right: 0.625rem;
+    top: 5rem;
+    bottom: 5rem;
     align-items: flex-end;
   }
 }
 .short-video-viewer__actions-panel--inside-frame {
   left: auto;
   right: 0.625rem;
+  top: 5rem;
+  bottom: 5rem;
   align-items: flex-end;
 }
 .short-video-viewer__description {

package/dist/short-videos/short-video-viewer/cmp.short-video-viewer.svelte.d.ts

@@ -1,10 +1,9 @@
 import type { Locale } from '../../core/locale';
 import { type IShortVideoViewerLocalization } from './short-video-viewer-localization';
-import type { ShortVideoSocialInteractionsHandler, ShortVideoViewerModel } from './types';
+import type { IPostSocialInteractionsHandler, ShortVideoViewerModel } from './types';
 type Props = {
     model: ShortVideoViewerModel;
-    socialInteractionsHandler?: ShortVideoSocialInteractionsHandler;
-    availableSideSpace?: number;
+    socialInteractionsHandler?: IPostSocialInteractionsHandler;
     showAttachments?: boolean;
     showControls?: boolean;
     autoplay?: true | false | 'on-appearance';

package/dist/short-videos/short-video-viewer/index.d.ts

@@ -2,7 +2,7 @@ export { default as ShortVideoViewer } from './cmp.short-video-viewer.svelte';
 export { default as ShortVideoControls } from './cmp.short-video-controls.svelte';
 export { default as ShortVideoViewerAttachments } from './cmp.attachments.svelte';
 export { default as ShortVideoViewerAttachmentsInline } from './cmp.attachments-inline.svelte';
-export type { ShortVideoViewerModel, ShortVideoSocialInteractionsHandler, ShortVideoAdCardModel, ShortVideoProductCardModel } from './types';
+export type { ShortVideoViewerModel, IPostSocialInteractionsHandler, ShortVideoAdCardModel, ShortVideoProductCardModel } from './types';
 export type { IShortVideoViewerLocalization } from './short-video-viewer-localization';
 export type { IShortVideoAttachmentsLocalization } from './short-video-attachments-localization';
 export { mapToShortVideoViewerModel } from './mapper';

package/dist/short-videos/short-video-viewer/mapper.js

@@ -3,6 +3,9 @@ import { getMediaItemImageUrl } from '../../core/media';
 import { shouldUseSalePrice } from '../../products/price-helper';
 export const mapToShortVideoViewerModel = (payload) => {
     const mediaBlob = payload.postData.media[0];
+    if (!mediaBlob) {
+        console.warn('Short video media is missing. Unexpected behavior.');
+    }
     return {
         id: payload.id,
         media: mediaBlob.type === MediaType.Image
@@ -18,7 +21,7 @@ export const mapToShortVideoViewerModel = (payload) => {
         ad: payload.ad ? mapToShortVideoAdCardModel(payload.ad) : null,
         products: payload.allProducts.map((x) => mapToShortVideoProductCard(x))
         // uncomment if you want to test many products behavior
-        // .flatMap(x =>
+        // .flatMap((x) =>
         //   Array.from({ length: 20 }, (_, i) => ({
         //     ...x,
         //     id: x.id + String(i + 1)
@@ -30,7 +33,7 @@ const mapToShortVideoAdCardModel = (payload) => {
     return {
         id: payload.id,
         type: payload.type,
-        image: getMediaItemImageUrl(payload.media[0]),
+        image: payload.media.length ? getMediaItemImageUrl(payload.media[0]) : null,
         title: payload.title,
         description: payload.description,
         price: payload.price,
@@ -53,7 +56,7 @@ const mapToShortVideoProductCard = (payload, referenceDate) => {
         shortDescription: payload.shortDescription,
         link: payload.link,
         brandName: payload.brand?.name || null,
-        image: payload.media?.length ? getMediaItemImageUrl(payload.media[0]) : null,
+        image: payload.media.length ? getMediaItemImageUrl(payload.media[0]) : null,
         currency: payload.priceAndAvailability.currency,
         price: payload.priceAndAvailability.price,
         salePrice: effectiveSalePrice?.salePrice ?? null

package/dist/short-videos/short-video-viewer/types.d.ts

@@ -9,7 +9,7 @@ export type ShortVideoViewerModel = {
         url: string;
         thumbnailUrl: string;
     };
-    text?: string | null;
+    text: string | null;
     heading: ShortVideoViewerHeadingModel | null;
     enableSocialInteractions: boolean;
     products: ShortVideoProductCardModel[];
@@ -21,13 +21,14 @@ export type ShortVideoViewerHeadingModel = {
     displayDate: string;
     viewsCount: number;
 };
-export type ShortVideoSocialInteractionsHandler = {
-    isLiked: (shortVideoId: string) => Promise<{
+export interface IPostSocialInteractionsHandler {
+    getIsLiked: (shortVideoId: string) => PromiseLike<{
         readonly isLiked: boolean;
     }>;
-    onToggleLike: (shortVideoId: string) => void;
-    onShare: (shortVideoId: string) => void;
-};
+    toggleLike: (shortVideoId: string) => PromiseLike<void>;
+    share: (shortVideoId: string) => PromiseLike<void>;
+}
+type PromiseLike<T> = T | Promise<T>;
 export type ShortVideoProductCardModel = {
     id: string;
     title: string;
@@ -56,3 +57,4 @@ export type ShortVideoAdCardModel = {
         border: string;
     } | null;
 };
+export {};

package/dist/short-videos/short-video-viewer/ui-manager.svelte.d.ts

@@ -1,16 +1,11 @@
 export declare class ShortVideoViewerUiManager {
     readonly globalCssVariables: string;
-    readonly showActionsInsideFrame: boolean;
     readonly showAttachments: boolean;
     readonly showControls: boolean;
     private readonly buttonSize;
-    private actionsPanelWidth;
-    private availableSideSpace;
     private canShowControls;
     private canShowAttachments;
     private enableAttachments;
-    updateActionsPanelWidth: (value: number) => void;
-    updateAvailableSideSpace: (value: number) => void;
     updateCanShowAttachments: (value: boolean) => void;
     updateCanShowControls: (value: boolean) => void;
     toggleEnableAttachments: () => void;

package/dist/short-videos/short-video-viewer/ui-manager.svelte.js

@@ -3,9 +3,6 @@ export class ShortVideoViewerUiManager {
         const values = [`--_short-video-viewer--button--size: ${this.buttonSize}px`];
         return values.join(';');
     });
-    showActionsInsideFrame = $derived.by(() => {
-        return this.actionsPanelWidth + 40 > this.availableSideSpace;
-    });
     showAttachments = $derived.by(() => {
         return this.canShowAttachments && this.enableAttachments;
     });
@@ -13,20 +10,12 @@ export class ShortVideoViewerUiManager {
         return this.canShowControls;
     });
     buttonSize = 40;
-    actionsPanelWidth = $state(0);
-    availableSideSpace = $state(0);
     // is provided from the calling side
     canShowControls = $state(false);
     // is provided from the calling side
     canShowAttachments = $state(false);
     // managed internally by component
     enableAttachments = $state(true);
-    updateActionsPanelWidth = (value) => {
-        this.actionsPanelWidth = value;
-    };
-    updateAvailableSideSpace = (value) => {
-        this.availableSideSpace = value;
-    };
     updateCanShowAttachments = (value) => {
         this.canShowAttachments = value;
     };

package/dist/short-videos/short-videos-player/cmp.short-videos-player.svelte

@@ -1,20 +1,24 @@
-<script lang="ts">import {} from '../../core/locale';
+<script lang="ts">import { MediaCenter, MediaCenterMode } from '../../media-center/media-center';
 import { createShadowRoot } from '../../ui/shadow-dom';
-import {} from './short-videos-player-localization';
-import { default as ShortVideosPlayerView } from './short-videos-player-view.svelte';
 import { mount, unmount } from 'svelte';
-let { input, socialInteractionsHandler, localization, showStreamsCloudWatermark, disableBackground, on } = $props();
+let { dataProvider, socialInteractionsHandler, localization, showStreamsCloudWatermark, disableBackground, on, mediaCenterDataProvider } = $props();
 const initHost = (node) => {
     const shadowRoot = createShadowRoot(node);
-    const mounted = mount(ShortVideosPlayerView, {
+    const mounted = mount(MediaCenter, {
         target: shadowRoot,
         props: {
-            input,
-            socialInteractionsHandler,
-            localization,
-            showStreamsCloudWatermark,
-            disableBackground,
-            on
+            dataProvider: mediaCenterDataProvider || null,
+            playerProps: {
+                type: MediaCenterMode.ShortVideos,
+                props: {
+                    dataProvider,
+                    socialInteractionsHandler,
+                    disableBackground,
+                    localization,
+                    showStreamsCloudWatermark,
+                    on
+                }
+            }
         }
     });
     return {
@@ -25,6 +29,6 @@ const initHost = (node) => {
 };
 </script>
 
-{#key input}
+{#key dataProvider}
   <div class="short-videos-player-host" use:initHost></div>
 {/key}

package/dist/short-videos/short-videos-player/cmp.short-videos-player.svelte.d.ts

@@ -1,18 +1,8 @@
-import { type Locale } from '../../core/locale';
-import type { ShortVideoSocialInteractionsHandler } from '../short-video-viewer';
-import { type IShortVideosPlayerLocalization } from './short-videos-player-localization';
-import type { PlayerInput } from './types';
-type Props = {
-    input: PlayerInput;
-    socialInteractionsHandler?: ShortVideoSocialInteractionsHandler;
-    localization?: IShortVideosPlayerLocalization | Locale;
-    showStreamsCloudWatermark?: boolean;
-    disableBackground?: boolean;
-    on?: {
-        closePlayer?: () => void;
-        videoActivated?: (id: string) => void;
-    };
+import type { IMediaCenterDataProvider } from '../../media-center/data-provider';
+import type { ShortVideoPlayerProps } from './types';
+type $$ComponentProps = ShortVideoPlayerProps & {
+    mediaCenterDataProvider?: IMediaCenterDataProvider;
 };
-declare const Cmp: import("svelte").Component<Props, {}, "">;
+declare const Cmp: import("svelte").Component<$$ComponentProps, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;