@streamscloud/embeddable 3.4.2 → 4.0.0

package/dist/streams/stream-player/stream-player-localization.d.ts

@@ -1,5 +1,5 @@
 import { type Locale } from '../../core/locale';
-import type { IShortVideoAttachmentsLocalization, IShortVideoDetailsLocalization, IShortVideoViewerLocalization } from '../../short-videos/short-video-viewer';
+import type { IShortVideoAttachmentsLocalization, IShortVideoViewerLocalization } from '../../short-videos/short-video-viewer';
 import type { IStreamPageViewerLocalization } from '../stream-page-viewer';
 import type { ISwipeIndicatorLocalization } from '../../ui/swipe-indicator';
 import type { ITimeAgoLocalization } from '../../ui/time-ago';
@@ -9,7 +9,6 @@ export interface IStreamPlayerLocalization {
     timeAgoLocalization?: ITimeAgoLocalization | Locale;
     streamPageViewerLocalization?: IStreamPageViewerLocalization | Locale;
     shortVideoAttachmentsLocalization?: IShortVideoAttachmentsLocalization | Locale;
-    shortVideoDetailsLocalization?: IShortVideoDetailsLocalization | Locale;
     shortVideoViewerLocalization?: IShortVideoViewerLocalization | Locale;
     swipeIndicatorLocalization?: ISwipeIndicatorLocalization | Locale;
 }
@@ -19,7 +18,6 @@ export declare class StreamPlayerLocalization {
     timeAgoLocalization: ITimeAgoLocalization | Locale;
     streamPageViewerLocalization: IStreamPageViewerLocalization | Locale;
     shortVideoAttachmentsLocalization: IShortVideoAttachmentsLocalization | Locale;
-    shortVideoDetailsLocalization: IShortVideoDetailsLocalization | Locale;
     shortVideoViewerLocalization: IShortVideoViewerLocalization | Locale;
     swipeIndicatorLocalization: ISwipeIndicatorLocalization | Locale;
     constructor(init: IStreamPlayerLocalization | Locale);

package/dist/streams/stream-player/stream-player-localization.js

@@ -5,7 +5,6 @@ export class StreamPlayerLocalization {
     timeAgoLocalization;
     streamPageViewerLocalization;
     shortVideoAttachmentsLocalization;
-    shortVideoDetailsLocalization;
     shortVideoViewerLocalization;
     swipeIndicatorLocalization;
     constructor(init) {
@@ -14,7 +13,6 @@ export class StreamPlayerLocalization {
         this.timeAgoLocalization = isLocale(init) ? init : init.timeAgoLocalization || 'en';
         this.streamPageViewerLocalization = isLocale(init) ? init : init.streamPageViewerLocalization || 'en';
         this.shortVideoAttachmentsLocalization = isLocale(init) ? init : init.shortVideoAttachmentsLocalization || 'en';
-        this.shortVideoDetailsLocalization = isLocale(init) ? init : init.shortVideoDetailsLocalization || 'en';
         this.shortVideoViewerLocalization = isLocale(init) ? init : init.shortVideoViewerLocalization || 'en';
         this.swipeIndicatorLocalization = isLocale(init) ? init : init.swipeIndicatorLocalization || 'en';
     }

package/dist/streams/stream-player/ui-manager.svelte.d.ts

@@ -1,18 +1,19 @@
 export declare class StreamPlayerUiManager {
     overviewCollapsed: boolean;
-    shortVideoDetailsCollapsed: boolean;
     showShortVideoAttachments: boolean;
     globalCssVariables: string;
     isMobileView: boolean;
     showShortVideoOverlay: boolean;
     private readonly buttonSize;
+    private readonly iconSize;
     private readonly controlsOffsetHorizontal;
     private readonly controlsOffsetVertical;
-    private readonly iconSize;
     private viewTotalWidth;
     private mainViewColumnWidth;
+    private overviewWidth;
     updateDimensions: (dimensions: {
         viewTotalWidth: number;
         mainViewColumnWidth: number;
     }) => void;
+    updateOverviewWidth: (width: number) => void;
 }

package/dist/streams/stream-player/ui-manager.svelte.js

@@ -1,27 +1,31 @@
 export class StreamPlayerUiManager {
     overviewCollapsed = $state(false);
-    shortVideoDetailsCollapsed = $state(true);
     showShortVideoAttachments = $state(true);
     globalCssVariables = $derived.by(() => {
         const values = [
             `--stream-player--button--size: ${this.buttonSize}px`,
+            `--stream-player--icon--size: ${this.iconSize}px`,
             `--stream-player--controls--offset-horizontal: ${this.controlsOffsetHorizontal}px`,
             `--stream-player--controls--offset-vertical: ${this.controlsOffsetVertical}px`,
-            `--stream-player--sidebar--available-space: ${(this.viewTotalWidth - this.mainViewColumnWidth) / 2}px`,
-            `--stream-player--icon--size: ${this.iconSize}px`
+            `--stream-player--overview--width: ${this.overviewWidth}px`,
+            `--stream-player--sidebar--available-space: ${(this.viewTotalWidth - this.mainViewColumnWidth) / 2}px`
         ];
         return values.join(';');
     });
     isMobileView = $derived.by(() => this.viewTotalWidth <= 576);
-    showShortVideoOverlay = $derived.by(() => (this.viewTotalWidth - this.mainViewColumnWidth) / 2 <= 70);
+    showShortVideoOverlay = $derived.by(() => (this.viewTotalWidth - this.mainViewColumnWidth) / 2 <= 85);
     buttonSize = 48;
+    iconSize = 28;
     controlsOffsetHorizontal = 28;
     controlsOffsetVertical = 28;
-    iconSize = 28;
     viewTotalWidth = $state(0);
     mainViewColumnWidth = $state(0);
+    overviewWidth = $state(0);
     updateDimensions = (dimensions) => {
         this.viewTotalWidth = dimensions.viewTotalWidth;
         this.mainViewColumnWidth = dimensions.mainViewColumnWidth;
     };
+    updateOverviewWidth = (width) => {
+        this.overviewWidth = width;
+    };
 }

package/dist/ui/button/resources/button-theme.svelte

@@ -36,6 +36,7 @@ let { style = undefined, size = ButtonSize.Standard, children } = $props();
   }
 }
 .button-theme {
+  display: contents;
   /*Style*/
   /*Size*/
 }

package/dist/ui/shadow-dom/index.d.ts

@@ -1 +1,2 @@
-export { ShadowHost } from './shadow-host';
+export { ModalShadowHost } from './modal-shadow-host';
+export { createShadowRoot } from './shadow-root-service';

package/dist/ui/shadow-dom/index.js

@@ -1 +1,2 @@
-export { ShadowHost } from './shadow-host';
+export { ModalShadowHost } from './modal-shadow-host';
+export { createShadowRoot } from './shadow-root-service';

package/dist/ui/shadow-dom/{shadow-host.d.ts → modal-shadow-host.d.ts}

@@ -1,4 +1,4 @@
-export declare class ShadowHost {
+export declare class ModalShadowHost {
     shadowRoot: ShadowRoot;
     private host;
     constructor();

package/dist/ui/shadow-dom/modal-shadow-host.js

@@ -0,0 +1,21 @@
+import { createShadowRoot } from './shadow-root-service';
+export class ModalShadowHost {
+    shadowRoot;
+    host;
+    constructor() {
+        const host = document.createElement('div');
+        this.host = host;
+        this.shadowRoot = createShadowRoot(host);
+        host.style.position = 'fixed';
+        host.style.inset = '0';
+        host.style.zIndex = '9999';
+    }
+    attachToBody() {
+        document.getElementsByTagName('html')[0].style.overflow = 'hidden';
+        document.body.appendChild(this.host);
+    }
+    remove() {
+        this.host.remove();
+        document.getElementsByTagName('html')[0].style.overflow = '';
+    }
+}

package/dist/ui/shadow-dom/shadow-root-service.d.ts

@@ -0,0 +1 @@
+export declare const createShadowRoot: (host: HTMLElement) => ShadowRoot;

package/dist/ui/shadow-dom/shadow-root-service.js

@@ -0,0 +1,23 @@
+import normalize from './_normalize.scss?raw';
+import reset from './_reset.scss?raw';
+export const createShadowRoot = (host) => {
+    prepareShadowRootHost(host);
+    const shadowRoot = host.attachShadow({ mode: 'open' });
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@300..700&display=swap';
+    shadowRoot.appendChild(link);
+    const styleElement = document.createElement('style');
+    styleElement.textContent = normalize + reset;
+    shadowRoot.appendChild(styleElement);
+    return shadowRoot;
+};
+const prepareShadowRootHost = (host) => {
+    host.style.all = 'unset';
+    host.style.lineHeight = '1.15';
+    host.style.font = '16px Inter, sans-serif, arial';
+    host.style.fontWeight = '400';
+    host.style.margin = '0';
+    host.style.boxSizing = 'border-box';
+    host.style.textAlign = 'initial';
+};

package/dist/ui/video/cmp.video.svelte

@@ -18,7 +18,7 @@ import IconSpeaker from '@fluentui/svg-icons/icons/speaker_2_20_regular.svg?raw'
 import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_20_regular.svg?raw';
 import { onDestroy, onMount, untrack } from 'svelte';
 import { slide } from 'svelte/transition';
-let { src, poster, id = randomNanoid(), controls = true, autoplay = false, loop = false, inert = false, intersectionContainer, on } = $props();
+let { src, poster, id = randomNanoid(), controls = true, autoplay = false, loop = false, inert = false, hideSpeaker = false, intersectionContainer, on } = $props();
 onMount(() => {
     var _a;
     PlaybackManager.registerMountedPlayer(id, {
@@ -270,7 +270,7 @@ const handleSeek = (percent) => {
           <Icon src={IconPause} color={IconColor.White} />
         </button>
       {/if}
-      {#if showControlsOnHover || MediaVolumeManager.isMuted}
+      {#if (showControlsOnHover || MediaVolumeManager.isMuted) && !hideSpeaker}
         <button type="button" aria-label={MediaVolumeManager.isMuted ? 'mute' : 'unmute'} class="video__mute-button" onclick={toggleMute}>
           {#if MediaVolumeManager.isMuted}
             <Icon src={IconSpeakerMute} color={IconColor.White} />

package/dist/ui/video/cmp.video.svelte.d.ts

@@ -7,6 +7,7 @@ type Props = {
     loop?: boolean;
     intersectionContainer?: HTMLElement;
     inert?: boolean;
+    hideSpeaker?: boolean;
     on?: {
         loaded?: (data: {
             id: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "3.4.2",
+  "version": "4.0.0",
   "author": "StreamsCloud",
   "repository": "https://github.com/StreamsCloud/streamscloud-frontend-packages.git",
   "type": "module",

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

@@ -1,140 +0,0 @@
-<script lang="ts">import { Image } from '../../ui/image';
-import { LineClamp } from '../../ui/line-clamp';
-import { ProportionalContainer } from '../../ui/proportional-container';
-let { ad } = $props();
-</script>
-
-<div class="ad">
-  <ProportionalContainer ratio={234 / 277}>
-    <Image src={ad.image} alt={ad.title} />
-  </ProportionalContainer>
-  <div class="ad__info">
-    {#if ad.title}
-      <div class="ad__title">{ad.title}</div>
-    {/if}
-    {#if ad.description}
-      <div class="ad__description">
-        <LineClamp value={ad.description} maxLines={2} />
-      </div>
-    {/if}
-    {#if ad.price && ad.currency}
-      <div class="ad__price">{ad.currency} {ad.price}</div>
-    {/if}
-    {#if ad.ctaButton}
-      <div class="ad__button">
-        <a
-          href={ad.ctaButton.url}
-          target="_blank"
-          class="short-video-ad-viewer__link"
-          style="background-color: {ad.ctaButton.background}; color: {ad.ctaButton.textColor}; border: {ad.ctaButton
-            .border}; text-decoration: none; padding: 0.5em 1em; border-radius: 0.25em; display: inline-block;">
-          {ad.ctaButton.text}
-        </a>
-      </div>
-    {/if}
-  </div>
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.ad {
-  --image--border-radius: 0.25rem;
-  --image--object-fit: fit;
-  --image--width: auto;
-  --image--height: auto;
-  width: 100%;
-  height: max-content;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  container-type: inline-size;
-  aspect-ratio: 9/16;
-  background-color: #fafafa;
-  border: 0.038125rem solid #999999;
-  border-radius: 0.5rem;
-  padding: 0.75rem 0.75rem 1.125rem;
-  justify-content: space-between;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 230px) {
-  .ad {
-    padding: 0.5rem 0.5rem 0.75rem;
-  }
-}
-.ad__info {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-  margin-top: 0.1875rem;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 230px) {
-  .ad__info {
-    gap: 0.25rem;
-    margin-top: 0.125rem;
-  }
-}
-.ad__title {
-  font-weight: 700;
-  font-size: 1.125rem;
-  line-height: 1.375rem;
-  min-height: 1.375rem;
-  color: #000000;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 230px) {
-  .ad__title {
-    font-size: 0.75rem;
-    line-height: 0.875rem;
-    min-height: 0.875rem;
-  }
-}
-.ad__description {
-  font-weight: 400;
-  color: #6b7280;
-  font-size: 0.9375rem;
-  line-height: 1.375rem;
-  min-height: 1.375rem;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 230px) {
-  .ad__description {
-    font-size: 0.625rem;
-    line-height: 0.875rem;
-    min-height: 0.875rem;
-  }
-}
-.ad__price {
-  font-size: 1.875rem;
-  font-weight: 700;
-  text-align: right;
-  min-height: 3.53125rem;
-  color: #000000;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 230px) {
-  .ad__price {
-    font-size: 1.25rem;
-    min-height: 2.40625rem;
-  }
-}
-.ad__button {
-  display: flex;
-  justify-content: center;
-  margin-top: auto;
-  width: 100%;
-}
-:global([data-theme="dark"]) .ad {
-  background-color: #121212;
-  color: #ffffff;
-  border-color: #1e1e1e;
-}</style>

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

@@ -1,168 +0,0 @@
-<script lang="ts">import { toPriceRepresentation } from '../../products/price-helper';
-import { ImageRounded } from '../../ui/image';
-import { ProportionalContainer } from '../../ui/proportional-container';
-import { ShortVideoProductLocalization } from './short-video-product-localization';
-let { product, fitToContainer = false, localization: localizationInit, on } = $props();
-const localization = $derived(new ShortVideoProductLocalization(localizationInit));
-const handleProductClick = (event) => {
-    if (!product.link) {
-        return;
-    }
-    event.preventDefault();
-    event.stopPropagation();
-    if (on === null || on === void 0 ? void 0 : on.productClick) {
-        on.productClick(product.id);
-    }
-    window.open(product.link, '_blank', 'noopener noreferrer');
-};
-</script>
-
-<div class="short-video-product-viewer">
-  {#if fitToContainer}
-    <div class="short-video-product-viewer__image">
-      <ImageRounded src={product.image} noBorders={true} />
-    </div>
-  {:else}
-    <ProportionalContainer ratio={4 / 5}>
-      <ImageRounded src={product.image} noBorders={true} />
-    </ProportionalContainer>
-  {/if}
-  <div class="short-video-product-viewer__name">{product.title}</div>
-  <div class="short-video-product-viewer__price">
-    <div class="product-price">
-      {#if !product.salePrice}
-        <div class="product-price__price">{toPriceRepresentation(product.price, product.currency)}</div>
-      {:else}
-        <div class="product-price__before-price">
-          {#if localization.beforeNowPrefix}
-            {localization.beforeNowPrefix}
-          {/if}
-          {toPriceRepresentation(product.price, product.currency)}
-        </div>
-        <div class="product-price__price product-price__price--sale">
-          {toPriceRepresentation(product.salePrice, product.currency)}
-        </div>
-      {/if}
-    </div>
-  </div>
-
-  {#if product.link}
-    <a href={product.link} onclick={handleProductClick} target="_blank" rel="noopener noreferrer" class="short-video-product-viewer__link" aria-label="none"
-      >&nbsp;</a>
-  {/if}
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.short-video-product-viewer {
-  width: 100%;
-  height: auto;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  container-type: inline-size;
-  --image--object-fit: contain;
-  --image--rounded--outer--border-radius: 0.25em;
-  --image--rounded--inner--border-color: transparent;
-  --image--rounded--outer--border-color: transparent;
-}
-.short-video-product-viewer__image {
-  flex: 1;
-  min-height: 0;
-}
-.short-video-product-viewer__name {
-  width: 100%;
-  font-weight: 500;
-  font-size: 0.9375rem;
-  color: #ffffff;
-  margin-top: 0.5rem;
-  padding: 0 0.3125rem;
-  text-align: center;
-  text-overflow: ellipsis;
-  width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 300px) {
-  .short-video-product-viewer__name {
-    font-size: 0.75rem;
-    margin-top: 0.3125rem;
-    padding: 0 0.25rem;
-  }
-}
-.short-video-product-viewer__price {
-  padding-top: 0.3125rem;
-  margin-top: auto;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 300px) {
-  .short-video-product-viewer__price {
-    padding-top: 0.25rem;
-  }
-}
-.short-video-product-viewer__link {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.product-price {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 0.4375rem;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 300px) {
-  .product-price {
-    gap: 0.3125rem;
-  }
-}
-.product-price__before-price {
-  width: 100%;
-  color: #e5e7eb;
-  text-decoration: line-through;
-  font-size: 0.75rem;
-  font-weight: 500;
-  text-align: center;
-  text-overflow: ellipsis;
-  width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 300px) {
-  .product-price__before-price {
-    font-size: 0.625em;
-  }
-}
-.product-price__price {
-  width: 100%;
-  font-size: 1.0625em;
-  color: #ffffff;
-  font-weight: 800;
-  margin-top: auto;
-  text-align: center;
-  text-overflow: ellipsis;
-  width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 300px) {
-  .product-price__price {
-    font-size: 0.9375em;
-  }
-}</style>

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

@@ -1,14 +0,0 @@
-import type { Locale } from '../../core/locale';
-import { type IShortVideoProductLocalization } from './short-video-product-localization';
-import type { ShortVideoViewerProductModel } from './types';
-type Props = {
-    product: ShortVideoViewerProductModel;
-    fitToContainer?: boolean;
-    localization: IShortVideoProductLocalization | Locale;
-    on?: {
-        productClick?: (productId: string) => void;
-    };
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

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

@@ -1,125 +0,0 @@
-<script lang="ts">import { slideHorizontally } from '../../core/transitions';
-import { default as ShortVideoAttachments } from './cmp.attachments.svelte';
-import { default as ShortVideoHeading } from './cmp.short-video-heading.svelte';
-import { ShortVideoDetailsLocalization } from './short-video-details-localization';
-import {} from './types';
-let { shortVideo, collapsed, localization: localizationInit, on } = $props();
-const localization = $derived(new ShortVideoDetailsLocalization(localizationInit));
-</script>
-
-{#if !collapsed}
-  <div class="short-video-details" transition:slideHorizontally|local data-theme="dark">
-    <div class="short-video-details__sliding-container">
-      <div class="short-video-details__content">
-        {#if shortVideo.heading}
-          <div class="short-video-details__heading">
-            <ShortVideoHeading
-              model={shortVideo.heading}
-              localization={{ viewsCount: localization.viewsCount, timeAgoLocalization: localization.timeAgoLocalization }} />
-          </div>
-        {/if}
-        {#if shortVideo.text}
-          <p class="short-video-details__text">
-            {shortVideo.text}
-          </p>
-        {/if}
-      </div>
-
-      <div class="short-video-details__section-splitter"></div>
-
-      <ShortVideoAttachments shortVideo={shortVideo} localization={localization.attachmentsLocalization} on={on} />
-    </div>
-  </div>
-{/if}
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.short-video-details {
-  --_short-video-details--padding-horizontal: 1rem;
-  --short-video-attachments--margin-vertical: 1.25rem;
-  --short-video-attachments--spacing-horizontal: var(--_short-video-details--padding-horizontal);
-  background: #1c1c1c;
-  height: 100%;
-  min-height: 100%;
-  max-height: 100%;
-  width: 25rem;
-  min-width: 25rem;
-  max-width: 25rem;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  padding-bottom: 0.9375rem;
-  overflow: auto;
-  scrollbar-color: transparent transparent;
-  scrollbar-width: thin;
-  --custom-scrollbar-color: #999999;
-  position: absolute;
-  top: 0;
-  right: 0;
-  height: 100%;
-  z-index: 1;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-.short-video-details::-webkit-scrollbar {
-  width: 3px;
-  height: 3px;
-  background: var(--custom-scrollbar-background, transparent);
-  visibility: hidden;
-}
-.short-video-details::-webkit-scrollbar-thumb {
-  background: transparent;
-}
-.short-video-details:hover {
-  scrollbar-color: var(--custom-scrollbar-color, #7d7d7d) var(--custom-scrollbar-background, transparent);
-  scrollbar-width: thin;
-}
-.short-video-details:hover::-webkit-scrollbar {
-  width: 3px;
-  height: 3px;
-  background: var(--custom-scrollbar-background, transparent);
-  visibility: hidden;
-}
-.short-video-details:hover::-webkit-scrollbar-thumb {
-  background: var(--custom-scrollbar-color, #7d7d7d);
-}
-.short-video-details__sliding-container {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-@container (width < 576px) {
-  .short-video-details {
-    width: 100%;
-    min-width: 100%;
-    max-width: 100%;
-  }
-}
-.short-video-details__content {
-  padding: 1.5rem var(--_short-video-details--padding-horizontal) 0.875rem;
-  margin-bottom: 0.875rem;
-}
-.short-video-details__heading {
-  --short-video-heading--padding: 0 1.875rem 1.25rem 0;
-}
-.short-video-details__text {
-  color: #d1d5db;
-  font-size: 0.9375rem;
-  line-height: 1.125rem;
-  font-weight: 400;
-  white-space: pre-line;
-  word-break: break-word;
-  margin-bottom: 0.4375rem;
-}
-.short-video-details__section-splitter {
-  border-bottom: 1px solid #4b5563;
-}</style>

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

@@ -1,14 +0,0 @@
-import type { Locale } from '../../core/locale';
-import { type IShortVideoDetailsLocalization } from './short-video-details-localization';
-import { type ShortVideoViewerModel } from './types';
-type Props = {
-    shortVideo: ShortVideoViewerModel;
-    collapsed: boolean;
-    localization: IShortVideoDetailsLocalization | Locale;
-    on?: {
-        productClick?: (productId: string) => void;
-    };
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;