@streamscloud/embeddable 15.1.0 → 16.0.0

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

@@ -1,11 +1,11 @@
 <script lang="ts">import { enrichProductLinkWithTracking } from '../../marketing-tracking';
 import { toPriceRepresentation } from '../price-helper';
-import { Image } from '../../ui/image';
-import { LineClamp } from '../../ui/line-clamp';
-import { ProportionalContainer } from '../../ui/proportional-container';
 import { ProductCardLocalization } from './product-card-localization';
-let { product, includeBeforeNowPrefix, trackingParams, inert = false, locale, on } = $props();
-const localization = $derived(new ProductCardLocalization(locale));
+import { Image } from '@streamscloud/kit/ui/image';
+import { LineClamp } from '@streamscloud/kit/ui/line-clamp';
+import { ProportionalContainer } from '@streamscloud/kit/ui/proportional-container';
+let { product, includeBeforeNowPrefix, trackingParams, inert = false, on } = $props();
+const localization = new ProductCardLocalization();
 const shortDescriptionPresented = $derived(product.shortDescription && product.shortDescription.length > 0);
 const trackImpression = (node) => {
     if (on?.impression) {
@@ -44,13 +44,13 @@ const onProductClicked = (event) => {
   </ProportionalContainer>
 
   <div class="product-card__info">
-    <LineClamp maxLines={1} locale={locale}>
+    <LineClamp maxLines={1}>
       <div class="product-card__brand">{product.brandName}</div>
     </LineClamp>
-    <LineClamp maxLines={shortDescriptionPresented ? 1 : 2} locale={locale}>
+    <LineClamp maxLines={shortDescriptionPresented ? 1 : 2}>
       <div class="product-card__title" class:two-lines={!shortDescriptionPresented}>{product.title}</div>
     </LineClamp>
-    <LineClamp maxLines={2} locale={locale}>
+    <LineClamp maxLines={2}>
       <div class="product-card__description" class:two-lines={shortDescriptionPresented}>{product.shortDescription}</div>
     </LineClamp>
     <div class="product-price">
@@ -75,18 +75,7 @@ const onProductClicked = (event) => {
   {/if}
 </div>
 
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.product-card {
+<style>.product-card {
   --_product-card--aspect-ratio: var(--product-card--aspect-ratio, 10/16);
   --_product-card--border-radius: var(--product-card--border-radius, 0.5rem);
   --_product-card--background-color: var(--product-card--background-color, rgb(from light-dark(#ffffff, #000000) r g b / 90%));
@@ -95,10 +84,10 @@ const onProductClicked = (event) => {
   --_product-card--sale-price-color: var(--product-card--sale-price-color, inherit);
   --product-price-color: var(--_product-card--price-color);
   --product-price--sale--color: var(--_product-card--sale-price-color);
-  --image--border-radius: 0.25rem;
-  --image--object-fit: cover;
-  --image--width: auto;
-  --image--height: auto;
+  --sc-kit--image--border-radius: 0.25rem;
+  --sc-kit--image--object-fit: cover;
+  --sc-kit--image--width: auto;
+  --sc-kit--image--height: auto;
   width: 100%;
   height: max-content;
   display: flex;
@@ -185,10 +174,7 @@ const onProductClicked = (event) => {
 }
 .product-card__link {
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  inset: 0;
 }
 
 .product-price {
@@ -222,7 +208,7 @@ const onProductClicked = (event) => {
   text-align: var(--_product-price--align);
   min-height: var(--_product-price--before--font-size);
   text-overflow: ellipsis;
-  width: 100%;
+  max-width: 100%;
   white-space: nowrap;
   overflow: hidden;
 }
@@ -235,7 +221,7 @@ const onProductClicked = (event) => {
   text-align: var(--_product-price--align);
   min-height: var(--_product-price--font-size);
   text-overflow: ellipsis;
-  width: 100%;
+  max-width: 100%;
   white-space: nowrap;
   overflow: hidden;
 }

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

@@ -1,9 +1,7 @@
-import type { Locale } from '../../core/locale';
 import { type TrackingParams } from '../../marketing-tracking';
 import type { ProductCardModel } from './types';
 type Props = {
     product: ProductCardModel;
-    locale: Locale;
     includeBeforeNowPrefix?: boolean;
     inert?: boolean;
     trackingParams: TrackingParams;

package/dist/products/product-card/product-card-localization.d.ts

@@ -1,5 +1,3 @@
-import { type Locale } from '../../core/locale';
 export declare class ProductCardLocalization {
-    beforeNowPrefix: string | null;
-    constructor(init: Locale);
+    get beforeNowPrefix(): string | null;
 }

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

@@ -1,8 +1,7 @@
-import {} from '../../core/locale';
+import { getLocale } from '@streamscloud/kit/locale';
 export class ProductCardLocalization {
-    beforeNowPrefix;
-    constructor(init) {
-        this.beforeNowPrefix = loc.beforeNowPrefix[init];
+    get beforeNowPrefix() {
+        return loc.beforeNowPrefix[getLocale()];
     }
 }
 const loc = {

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

@@ -1,15 +1,15 @@
 <script lang="ts">import { toPriceRepresentation } from '../../products/price-helper';
-import { Icon } from '../../ui/icon';
-import { ImageRounded } from '../../ui/image';
-import { LineClamp } from '../../ui/line-clamp';
-import { ProportionalContainer } from '../../ui/proportional-container';
-import { TimeAgo } from '../../ui/time-ago';
 import { ShortVideoCardLocalization } from './localization';
 import IconPhone from '@fluentui/svg-icons/icons/phone_20_regular.svg?raw';
 import IconShoppingBag from '@fluentui/svg-icons/icons/shopping_bag_20_regular.svg?raw';
+import { Icon } from '@streamscloud/kit/ui/icon';
+import { ImageRounded } from '@streamscloud/kit/ui/image';
+import { LineClamp } from '@streamscloud/kit/ui/line-clamp';
+import { ProportionalContainer } from '@streamscloud/kit/ui/proportional-container';
+import { TimeAgo } from '@streamscloud/kit/ui/time-ago';
 const ADJUST_TEXT_SIZE = false;
-let { shortVideo, locale, on } = $props();
-const localization = $derived(new ShortVideoCardLocalization(locale));
+let { shortVideo, on } = $props();
+const localization = new ShortVideoCardLocalization();
 const adjustTextSize = (node) => {
     if (!ADJUST_TEXT_SIZE) {
         return;
@@ -43,7 +43,7 @@ const adjustTextSize = (node) => {
 <div class="short-video-card">
   <div class="short-video-card__media">
     <ProportionalContainer ratio={2 / 3}>
-      <ImageRounded src={shortVideo.cover} alt="" noBorders={true} />
+      <ImageRounded src={shortVideo.cover} alt="" />
     </ProportionalContainer>
 
     <div class="short-video-card__media-icons">
@@ -53,7 +53,7 @@ const adjustTextSize = (node) => {
 
   <div class="short-video-card__info">
     <div class="short-video-card__meta">
-      <span><TimeAgo date={shortVideo.displayDate} locale={locale} /></span>
+      <span><TimeAgo date={shortVideo.displayDate} /></span>
       {#if shortVideo.viewsCount}
         <span>&middot;</span>
         <span>{localization.viewsLabel(shortVideo.viewsCount)}</span>
@@ -70,15 +70,15 @@ const adjustTextSize = (node) => {
       {#snippet productView(product: IPostProductCardModel)}
         <div class="product-card">
           <ProportionalContainer ratio={4 / 5}>
-            <ImageRounded src={product.image} alt={product.title} noBorders={true} />
+            <ImageRounded src={product.image} alt={product.title} />
           </ProportionalContainer>
 
           <div class="product-card__info">
             <div class="product-card__title">
-              <LineClamp maxLines={1} enableShowMore={false} locale={locale}>{product.title}</LineClamp>
+              <LineClamp maxLines={1} enableShowMore={false}>{product.title}</LineClamp>
             </div>
             <div class="product-card__price">
-              <LineClamp maxLines={1} locale={locale}>
+              <LineClamp maxLines={1}>
                 <span>
                   {toPriceRepresentation({
                     amount: product.salePrice || product.price,
@@ -113,18 +113,7 @@ const adjustTextSize = (node) => {
   {/if}
 </div>
 
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.short-video-card {
+<style>.short-video-card {
   position: relative;
   overflow: hidden;
   container-type: inline-size;
@@ -134,7 +123,7 @@ const adjustTextSize = (node) => {
   display: flex;
   align-items: center;
   justify-content: center;
-  --image--rounded--outer--border-radius: 0.5rem;
+  --sc-kit--image--rounded--outer--border-radius: 0.5rem;
 }
 .short-video-card__media-icons {
   position: absolute;
@@ -143,9 +132,9 @@ const adjustTextSize = (node) => {
   display: flex;
   align-items: center;
   gap: 0.3125em;
-  --icon--size: 1.25em;
-  --icon--color: var(--sc-mc-color--icon-overlay);
-  --icon--filter: var(--sc-mc-color--icon-overlay-shadow);
+  --sc-kit--icon--size: 1.25em;
+  --sc-kit--icon--color: var(--sc-mc-color--icon-overlay);
+  --sc-kit--icon--filter: var(--sc-mc-color--icon-overlay-shadow);
 }
 .short-video-card__info {
   margin-top: clamp(0.4375rem, 3.6cqi, 0.625rem);
@@ -175,9 +164,7 @@ const adjustTextSize = (node) => {
   display: -webkit-box;
   overflow: hidden;
   -webkit-box-orient: vertical;
-  line-clamp: 2;
   -webkit-line-clamp: 2;
-  text-overflow: ellipsis;
 }
 .short-video-card__products {
   display: grid;
@@ -189,14 +176,11 @@ const adjustTextSize = (node) => {
 }
 .short-video-card__link {
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  inset: 0;
 }
 
 .product-card {
-  --image--rounded--outer--border-radius: 0.375rem;
+  --sc-kit--image--rounded--outer--border-radius: 0.375rem;
   container-type: inline-size;
 }
 .product-card__info {

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

@@ -1,8 +1,6 @@
-import type { Locale } from '../../core/locale';
 import type { ShortVideoCardModel } from './types';
 type Props = {
     shortVideo: ShortVideoCardModel;
-    locale: Locale;
     on?: {
         click?: () => void;
     };

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

@@ -1,5 +1,3 @@
-import { type Locale } from '../../core/locale';
 export declare class ShortVideoCardLocalization {
-    viewsLabel: (count: number) => string;
-    constructor(locale: Locale);
+    get viewsLabel(): (count: number) => string;
 }

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

@@ -1,8 +1,7 @@
-import {} from '../../core/locale';
+import { getLocale } from '@streamscloud/kit/locale';
 export class ShortVideoCardLocalization {
-    viewsLabel;
-    constructor(locale) {
-        this.viewsLabel = loc.viewsLabel[locale];
+    get viewsLabel() {
+        return loc.viewsLabel[getLocale()];
     }
 }
 const loc = {

package/dist/streams/layout/cmp.layout.svelte

@@ -1,5 +1,5 @@
-<script lang="ts">import { ProportionalContainer } from '../../ui/proportional-container';
-import { generateStreamLayoutStyles } from './styles-transformer';
+<script lang="ts">import { generateStreamLayoutStyles } from './styles-transformer';
+import { ProportionalContainer } from '@streamscloud/kit/ui/proportional-container';
 let { model, children, controls, overlay } = $props();
 </script>
 
@@ -15,18 +15,7 @@ let { model, children, controls, overlay } = $props();
   </div>
 </ProportionalContainer>
 
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.stream-page-layout {
+<style>.stream-page-layout {
   width: 100%;
   min-width: 100%;
   max-width: 100%;

package/dist/streams/layout/cmp.slot-content.svelte

@@ -1,8 +1,8 @@
-<script lang="ts">import { Utils } from '../../core/utils';
-import { enrichProductLinkWithTracking } from '../../marketing-tracking';
+<script lang="ts">import { enrichProductLinkWithTracking } from '../../marketing-tracking';
 import { StreamElementView } from './element-views';
 import { StreamComponentDataType } from './enums';
-let { model, locale, trackingParams, on } = $props();
+import { Utils } from '@streamscloud/kit/core/utils';
+let { model, trackingParams, on } = $props();
 const slotData = $derived.by(() => {
     return model.data;
 });
@@ -77,7 +77,7 @@ const productLinkMounted = (node, productModel) => {
 {#snippet slotContent()}
   {#if component && (!slotData || dataIsFilled)}
     {#each component.elements as element (element)}
-      <StreamElementView model={element} data={slotData} trackingParams={trackingParams} locale={locale} on={on} />
+      <StreamElementView model={element} data={slotData} trackingParams={trackingParams} on={on} />
     {/each}
   {/if}
 {/snippet}
@@ -95,18 +95,7 @@ const productLinkMounted = (node, productModel) => {
   {@render slotContent()}
 {/if}
 
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.stream-slot-content-product-link {
+<style>.stream-slot-content-product-link {
   width: 100%;
   min-width: 100%;
   max-width: 100%;

package/dist/streams/layout/cmp.slot-content.svelte.d.ts

@@ -1,9 +1,7 @@
-import type { Locale } from '../../core/locale';
 import type { StreamTrackingParams } from './types';
 import type { StreamSlot } from './slot';
 type Props = {
     model: StreamSlot;
-    locale: Locale;
     trackingParams: StreamTrackingParams;
     on?: {
         productClick: (productId: string) => void;

package/dist/streams/layout/cmp.slot.svelte

@@ -10,17 +10,6 @@ export {};
   {@render children()}
 </div>
 
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.stream-layout-slot {
+<style>.stream-layout-slot {
   position: absolute;
 }</style>

package/dist/streams/layout/element-views/cmp.annotation-stream-element.svelte

@@ -1,5 +1,5 @@
-<script lang="ts">import { HtmlHelper } from '../../../core/utils/html-helper';
-import { generateAnnotationStyles } from '../styles-transformer';
+<script lang="ts">import { generateAnnotationStyles } from '../styles-transformer';
+import { HtmlHelper } from '@streamscloud/kit/core/utils';
 let { model } = $props();
 const svgValue = $derived.by(() => {
     if (model.svg) {

package/dist/streams/layout/element-views/cmp.container-stream-element.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { StreamElementStyleDirection } from '../enums';
 import { generateContainerStyles } from '../styles-transformer';
 import { default as StreamElement } from './cmp.stream-element.svelte';
-let { model, data, trackingParams, locale } = $props();
+let { model, data, trackingParams } = $props();
 </script>
 
 <div class="container-stream-element" style={generateContainerStyles(model.styles)}>
@@ -10,7 +10,6 @@ let { model, data, trackingParams, locale } = $props();
       model={element}
       data={data}
       trackingParams={trackingParams}
-      constainerDirection={model.styles?.direction ?? StreamElementStyleDirection.Vertical}
-      locale={locale} />
+      constainerDirection={model.styles?.direction ?? StreamElementStyleDirection.Vertical} />
   {/each}
 </div>

package/dist/streams/layout/element-views/cmp.container-stream-element.svelte.d.ts

@@ -1,4 +1,3 @@
-import type { Locale } from '../../../core/locale';
 import type { StreamTrackingParams } from '..';
 import type { ContainerStreamElementModel } from '../elements';
 import type { StreamSlotData } from '../slot-data';
@@ -6,7 +5,6 @@ type Props = {
     model: ContainerStreamElementModel;
     data: StreamSlotData | null;
     trackingParams: StreamTrackingParams;
-    locale: Locale;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/streams/layout/element-views/cmp.image-ref-stream-element.svelte

@@ -18,18 +18,7 @@ const value = $derived(getStringValueByKey(data, model.key));
   {/if}
 </div>
 
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.image-ref-stream-element {
+<style>.image-ref-stream-element {
   width: 100%;
   min-width: 100%;
   max-width: 100%;

package/dist/streams/layout/element-views/cmp.images-stream-element.svelte

@@ -1,5 +1,5 @@
-<script lang="ts">import { Image } from '../../../ui/image';
-import { ImagesStreamElementMode } from '../enums';
+<script lang="ts">import { ImagesStreamElementMode } from '../enums';
+import { Image } from '@streamscloud/kit/ui/image';
 let { model, data } = $props();
 </script>
 
@@ -13,18 +13,7 @@ let { model, data } = $props();
   {/if}
 </div>
 
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.images-stream-element {
+<style>.images-stream-element {
   width: 100%;
   height: 100%;
 }</style>

package/dist/streams/layout/element-views/cmp.price-stream-element.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { PriceStreamElementLocalization } from './price-stream-element-localization';
 import { default as PriceElementView } from './price-element-view.svelte';
-let { model, data, locale } = $props();
-const localization = $derived(new PriceStreamElementLocalization(locale));
+let { model, data } = $props();
+const localization = new PriceStreamElementLocalization();
 let baseMaxHeight = $derived(model.styles?.height || 32);
 let adjustedHeight = $derived(baseMaxHeight);
 </script>

package/dist/streams/layout/element-views/cmp.price-stream-element.svelte.d.ts

@@ -1,10 +1,8 @@
-import type { Locale } from '../../../core/locale';
 import type { PriceStreamElementModel } from '../elements';
 import type { StreamLayoutProductPriceModel } from '../models';
 type Props = {
     model: PriceStreamElementModel;
     data: StreamLayoutProductPriceModel;
-    locale: Locale;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/streams/layout/element-views/cmp.products-slider-stream-element.svelte

@@ -1,8 +1,8 @@
-<script lang="ts">import { horizontalWheelScroll } from '../../../core/actions';
-import { StreamComponentDataType, StreamElementStyleDirection } from '../enums';
+<script lang="ts">import { StreamComponentDataType, StreamElementStyleDirection } from '../enums';
 import { generateProductsSliderStyles } from '../styles-transformer';
 import { default as StreamElement } from './cmp.stream-element.svelte';
-let { model, data, trackingParams, locale } = $props();
+import { horizontalWheelScroll } from '@streamscloud/kit/core/actions';
+let { model, data, trackingParams } = $props();
 const getProductDataByIndex = (index) => {
     const products = data?.type === StreamComponentDataType.Products ? data.products : [];
     const product = products[index];
@@ -22,12 +22,7 @@ const getProductDataByIndex = (index) => {
     <div class="products-slider-stream-element__item">
       {#each item.elements as element (element)}
         {@const productData = getProductDataByIndex(index)}
-        <StreamElement
-          model={element}
-          data={productData}
-          trackingParams={trackingParams}
-          constainerDirection={StreamElementStyleDirection.Vertical}
-          locale={locale} />
+        <StreamElement model={element} data={productData} trackingParams={trackingParams} constainerDirection={StreamElementStyleDirection.Vertical} />
       {/each}
     </div>
   {/each}

package/dist/streams/layout/element-views/cmp.products-slider-stream-element.svelte.d.ts

@@ -1,4 +1,3 @@
-import type { Locale } from '../../../core/locale';
 import type { StreamTrackingParams } from '..';
 import type { ProductsSliderStreamElementModel } from '../elements';
 import type { StreamSlotData } from '../slot-data';
@@ -6,7 +5,6 @@ type Props = {
     model: ProductsSliderStreamElementModel;
     data: StreamSlotData | null;
     trackingParams: StreamTrackingParams;
-    locale: Locale;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/streams/layout/element-views/cmp.short-video-stream-element.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">import { PostModel } from '../../../posts/model';
 import { PostViewer } from '../../../posts/post-viewer';
-import { ShortVideoStreamElementLocalization } from './short-video-stream-element-localization';
 import { mapToPostModel } from '../models';
-let { data, trackingParams, locale, on } = $props();
-const localization = $derived(new ShortVideoStreamElementLocalization(locale));
+let { data, trackingParams, on } = $props();
 </script>
 
 <PostViewer
@@ -12,5 +10,4 @@ const localization = $derived(new ShortVideoStreamElementLocalization(locale));
   autoplay={false}
   enableControls={false}
   controlActions={[]}
-  locale={localization.shortVideoViewerLocale}
   on={on} />

package/dist/streams/layout/element-views/cmp.short-video-stream-element.svelte.d.ts

@@ -1,10 +1,8 @@
-import type { Locale } from '../../../core/locale';
 import type { StreamTrackingParams } from '..';
 import { type StreamLayoutShortVideoModel } from '../models';
 type Props = {
     data: StreamLayoutShortVideoModel;
     trackingParams: StreamTrackingParams;
-    locale: Locale;
     on?: {
         progress?: (progress: number) => void;
     };

package/dist/streams/layout/element-views/cmp.spacer-stream-element.svelte

@@ -1,6 +1,6 @@
-<script lang="ts">import { Utils } from '../../../core/utils';
-import { StreamElementStyleDirection } from '../enums';
+<script lang="ts">import { StreamElementStyleDirection } from '../enums';
 import { transformNumericValue } from '../styles-transformer';
+import { Utils } from '@streamscloud/kit/core/utils';
 let { model, parentContainerDirection } = $props();
 const styles = $derived.by(() => {
     const values = [];
@@ -29,17 +29,6 @@ const styles = $derived.by(() => {
 
 <div class="spacer-stream-element" style={styles}>&nbsp;</div>
 
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.spacer-stream-element {
+<style>.spacer-stream-element {
   line-height: 0;
 }</style>

package/dist/streams/layout/element-views/cmp.stock-stream-element.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">import { StockStreamElementLocalization } from './stock-stream-element-localization';
 import { StockStreamElementLevel } from '../enums';
 import { mapFlexJustifyContent, transformNumericValue, transformTextColorValue } from '../styles-transformer';
-let { model, heightOverrideDdu, locale } = $props();
-const localization = $derived(new StockStreamElementLocalization(locale));
+let { model, heightOverrideDdu } = $props();
+const localization = new StockStreamElementLocalization();
 const height = $derived(heightOverrideDdu || model.styles?.height || 16);
 const containerStyles = $derived.by(() => {
     const values = [
@@ -40,18 +40,7 @@ const quantityCustomStyles = $derived.by(() => {
   </div>
 </div>
 
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.stock-stream-element {
+<style>.stock-stream-element {
   display: flex;
 }
 .stock-stream-element__dot {

package/dist/streams/layout/element-views/cmp.stock-stream-element.svelte.d.ts

@@ -1,9 +1,7 @@
-import type { Locale } from '../../../core/locale';
 import type { StockStreamElementModel } from '../elements';
 type Props = {
     model: StockStreamElementModel;
     heightOverrideDdu?: number;
-    locale: Locale;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;