@streamscloud/embeddable 15.1.0 → 16.0.0

package/dist/ads/ad-card/cmp.ad-card.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">import { enrichAdLinkWithTracking } from '../../marketing-tracking';
 import { toPriceRepresentation } from '../../products/price-helper';
-import { Button, ButtonSize } from '../../ui/button';
-import { Image } from '../../ui/image';
-import { LineClamp } from '../../ui/line-clamp';
-let { ad, locale, trackingParams, inert = false, on } = $props();
+import { Button } from '@streamscloud/kit/ui/button';
+import { Image } from '@streamscloud/kit/ui/image';
+import { LineClamp } from '@streamscloud/kit/ui/line-clamp';
+let { ad, trackingParams, inert = false, on } = $props();
 const trackImpression = (node) => {
     if (on?.impression) {
         const observer = new IntersectionObserver((entries) => {
@@ -46,12 +46,12 @@ const handleAdClick = () => {
     <div class="ad-card__content">
       {#if ad.title}
         <div class="ad-card__title">
-          <LineClamp maxLines={2} locale={locale}>{ad.title}</LineClamp>
+          <LineClamp maxLines={2}>{ad.title}</LineClamp>
         </div>
       {/if}
       {#if ad.description}
         <div class="ad-card__description">
-          <LineClamp maxLines={2} locale={locale}>{ad.description}</LineClamp>
+          <LineClamp maxLines={2}>{ad.description}</LineClamp>
         </div>
       {/if}
     </div>
@@ -68,7 +68,7 @@ const handleAdClick = () => {
     <div class="ad-card__button-container">
       {#if ad.ctaButton && enrichedLink && ad.ctaButton.text}
         <div class="ad-card__button">
-          <Button size={ButtonSize.Standard} on={{ click: handleAdClick }} --button--font--size="1em" --button--min-width="100%">
+          <Button size="standard" on={{ click: handleAdClick }} --sc-kit--button--font--size="1em" --sc-kit--button--min-width="100%">
             <span class="ad-card__button-text">{ad.ctaButton.text}</span>
           </Button>
         </div>
@@ -77,18 +77,7 @@ const handleAdClick = () => {
   </div>
 </div>
 
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.ad-card {
+<style>.ad-card {
   --_ad-card--background-color: var(--ad-card--background-color, rgb(from light-dark(#ffffff, #000000) r g b / 90%));
   --_ad-card--border-color: var(--ad-card--border-color, light-dark(#f2f2f2, #000000));
   --_ad-card--price-color: var(--ad-card--price-color, inherit);
@@ -117,9 +106,9 @@ const handleAdClick = () => {
   overflow: hidden;
   aspect-ratio: 1/1;
   width: 100%;
-  --image--object-fit: cover;
-  --image--width: 100%;
-  --image--height: 100%;
+  --sc-kit--image--object-fit: cover;
+  --sc-kit--image--width: 100%;
+  --sc-kit--image--height: 100%;
 }
 .ad-card__info {
   display: grid;
@@ -145,7 +134,7 @@ const handleAdClick = () => {
 }
 @container (width < 230px) {
   .ad-card__content {
-    gap: 0.09375rem;
+    gap: 0.0938rem;
   }
 }
 .ad-card__price-container {
@@ -176,13 +165,13 @@ const handleAdClick = () => {
 @container (width < 230px) {
   .ad-card__button-container {
     min-height: 2rem;
-    margin-top: 0.09375rem;
+    margin-top: 0.0938rem;
   }
 }
 .ad-card__button-text {
   display: block;
   text-overflow: ellipsis;
-  width: 100%;
+  max-width: 100%;
   white-space: nowrap;
   overflow: hidden;
 }
@@ -237,7 +226,7 @@ const handleAdClick = () => {
   font-weight: 400;
   font-style: normal;
   font-size: 0.75rem;
-  line-height: 1.09125rem;
+  line-height: 1.0913rem;
   letter-spacing: 0;
   text-align: right;
   color: var(--sc-mc-color--text-secondary);
@@ -256,13 +245,13 @@ const handleAdClick = () => {
 }
 .ad-card__button {
   width: 100%;
-  --button--background: light-dark(
+  --sc-kit--button--background: light-dark(
     var(--sc-player--light--card-button, var(--ad-card--cta-background)),
     var(--sc-player--dark--card-button, var(--ad-card--cta-background))
   );
-  --button--font--color: var(--ad-card--cta-text-color);
+  --sc-kit--button--font--color: var(--ad-card--cta-text-color);
 }
 .ad-card__button :global(*) {
   width: 100%;
-  --button--min-width: 100%;
+  --sc-kit--button--min-width: 100%;
 }</style>

package/dist/ads/ad-card/cmp.ad-card.svelte.d.ts

@@ -1,10 +1,8 @@
-import type { Locale } from '../../core/locale';
 import { type TrackingParams } from '../../marketing-tracking';
 import type { AdCardModel } from './types';
 type Props = {
     ad: AdCardModel;
     trackingParams: TrackingParams;
-    locale: Locale;
     inert?: boolean;
     on?: {
         click?: (id: string) => void;

package/dist/core/graphql.d.ts

@@ -1,3 +1,3 @@
-export declare const createLocalGQLClient: (graphqlOrigin?: string, headers?: HeadersInit, customFetch?: typeof fetch) => import("@urql/core").Client;
+export declare const createLocalGQLClient: (graphqlOrigin?: string, headers?: HeadersInit, customFetch?: typeof fetch) => any;
 export declare const resolveGraphQLOrigin: (origin?: string) => string;
 export declare const constructGraphQLUrl: (graphqlOrigin?: string) => string;

package/dist/core/graphql.js

@@ -1,13 +1,8 @@
-import { createClient, fetchExchange } from '@urql/core';
-export const createLocalGQLClient = (graphqlOrigin, headers, customFetch) => createClient({
+import { createGQLClient } from '@streamscloud/kit/core';
+export const createLocalGQLClient = (graphqlOrigin, headers, customFetch) => createGQLClient({
     url: constructGraphQLUrl(resolveGraphQLOrigin(graphqlOrigin)),
-    requestPolicy: 'network-only',
-    fetchOptions: {
-        credentials: 'include',
-        headers: headers
-    },
-    fetch: customFetch || fetch,
-    exchanges: [fetchExchange]
+    headers,
+    customFetch
 });
 export const resolveGraphQLOrigin = (origin) => {
     return origin || 'https://api.streamscloud.com';

package/dist/core/media/index.d.ts

@@ -1,4 +1,2 @@
-export { ImageHelper } from './image-helper';
-export { ImageSizeDetectorService } from './images-size-detector.service';
 export { type MediaItemModel, type MediaItemMetadataModel, type MediaItemWithMetadataModel } from './types';
 export { getMediaItemImageUrl } from './media-item-url.service';

package/dist/core/media/index.js

@@ -1,4 +1,2 @@
-export { ImageHelper } from './image-helper';
-export { ImageSizeDetectorService } from './images-size-detector.service';
 export {} from './types';
 export { getMediaItemImageUrl } from './media-item-url.service';

package/dist/external-api/data-providers/internal-short-video-player-items-provider.d.ts

@@ -1,5 +1,5 @@
 import { type PostPlayerModel } from '../../posts/posts-player';
-import type { IFeedPlayerDataProvider } from '../../ui/player/providers';
+import type { IFeedPlayerDataProvider } from '@streamscloud/kit/ui/player/providers';
 export declare class InternalShortVideoPlayerItemsProvider implements IFeedPlayerDataProvider<PostPlayerModel> {
     readonly kind = "feed";
     readonly initialData: IFeedPlayerDataProvider<PostPlayerModel>['initialData'];

package/dist/external-api/data-providers/internal-short-video-player-items-provider.js

@@ -1,9 +1,9 @@
 import { PostType } from '../..';
-import { ContinuationToken } from '../../core/continuation-token';
-import { CursorDataLoader } from '../../core/data-loaders';
 import { createLocalGQLClient } from '../../core/graphql';
 import {} from '../../posts/posts-player';
 import { getPostsCursor } from './post-data-loaders';
+import { ContinuationToken } from '@streamscloud/kit/core';
+import { CursorDataLoader } from '@streamscloud/kit/core/data-loaders';
 const CHUNK_SIZE = 20;
 export class InternalShortVideoPlayerItemsProvider {
     kind = 'feed';

package/dist/external-api/data-providers/internal-streams-player-data-provider.js

@@ -1,7 +1,7 @@
-import { ContinuationToken } from '../../core/continuation-token';
-import { CursorDataLoader } from '../../core/data-loaders';
 import { createLocalGQLClient } from '../../core/graphql';
 import { getStreamPagesCursor, getStreamsCursor } from './stream-data-loaders';
+import { ContinuationToken } from '@streamscloud/kit/core';
+import { CursorDataLoader } from '@streamscloud/kit/core/data-loaders';
 const CHUNK_SIZE = 5;
 export class InternalStreamsPlayerDataProvider {
     initialData;

package/dist/external-api/media-page/index.d.ts

@@ -1,5 +1,5 @@
-import type { Locale } from '../../core/locale';
 import { type IMediaCenterDataProvider } from '../../media-center/config/types';
+import type { Locale } from '@streamscloud/kit/locale';
 export type { IMediaCenterDataProvider };
 /**
  * Opens the media page modal using an internal media-center configuration.

package/dist/external-api/short-videos-player/index.d.ts

@@ -1,5 +1,5 @@
-import type { Locale } from '../../core/locale';
 import { type IMediaCenterDataProvider } from '../../media-center/config/types';
+import type { Locale } from '@streamscloud/kit/locale';
 export type { IMediaCenterDataProvider };
 /**
  * Opens the short videos player modal.

package/dist/external-api/streams-player/index.d.ts

@@ -1,7 +1,7 @@
-import type { Locale } from '../../core/locale';
 import { type IMediaCenterDataProvider } from '../../media-center/config/types';
 import type { StreamPageViewerModel } from '../../streams/stream-page-viewer/types';
 import type { IStreamAnalyticsHandler, IStreamsPlayerDataProvider, StreamAmplificationParameters, StreamPlayerModel } from '../../streams/streams-player/types';
+import type { Locale } from '@streamscloud/kit/locale';
 export { type StreamPlayerModel, type StreamPageViewerModel };
 export type { IStreamsPlayerDataProvider, IStreamAnalyticsHandler, IMediaCenterDataProvider };
 /**

package/dist/media-center/media-center/cmp.media-center-proxy.svelte

@@ -1,9 +1,9 @@
-<script lang="ts">import { Utils } from '../../core/utils';
-import { Loading } from '../../ui/loading';
-import {} from '../../ui/player/close-orchestrator';
+<script lang="ts">import {} from '../../ui/player/close-orchestrator';
 import { ShadowRoot } from '../../ui/shadow-dom';
 import { MediaCenterContext } from './media-center-context.svelte';
 import { default as MediaCenterView } from './media-center-view.svelte';
+import { Utils } from '@streamscloud/kit/core/utils';
+import { Loading } from '@streamscloud/kit/ui/loading';
 import { untrack } from 'svelte';
 let { dataProvider, modeProps, settings, closeOrchestrator, dynamicActions } = $props();
 const context = untrack(() => new MediaCenterContext({
@@ -50,7 +50,7 @@ const context = untrack(() => new MediaCenterContext({
 {:else if !context.initialized}
   Not initialized placeholder
 {:else}
-  <ShadowRoot theme={settings?.theme ?? 'dark'} {...context.backgroundWrapperProps}>
+  <ShadowRoot locale={settings?.locale} theme={settings?.theme ?? 'dark'} {...context.backgroundWrapperProps}>
     <MediaCenterView context={context} dynamicActions={dynamicActions} />
   </ShadowRoot>
 {/if}

package/dist/media-center/media-center/discover/community-features-localization.d.ts

@@ -1,8 +1,6 @@
-import { type Locale } from '../../../core/locale';
 export declare class CommunityFeaturesLocalization {
-    membersLabel: (count: number) => string;
-    memberButtonLabel: string;
-    joinButtonLabel: string;
-    leaveButtonLabel: string;
-    constructor(locale: Locale);
+    get membersLabel(): (count: number) => string;
+    get memberButtonLabel(): string;
+    get joinButtonLabel(): string;
+    get leaveButtonLabel(): string;
 }

package/dist/media-center/media-center/discover/community-features-localization.js

@@ -1,14 +1,16 @@
-import {} from '../../../core/locale';
+import { getLocale } from '@streamscloud/kit/locale';
 export class CommunityFeaturesLocalization {
-    membersLabel;
-    memberButtonLabel;
-    joinButtonLabel;
-    leaveButtonLabel;
-    constructor(locale) {
-        this.membersLabel = loc.membersLabel[locale];
-        this.memberButtonLabel = loc.memberButtonLabel[locale];
-        this.joinButtonLabel = loc.joinButtonLabel[locale];
-        this.leaveButtonLabel = loc.leaveButtonLabel[locale];
+    get membersLabel() {
+        return loc.membersLabel[getLocale()];
+    }
+    get memberButtonLabel() {
+        return loc.memberButtonLabel[getLocale()];
+    }
+    get joinButtonLabel() {
+        return loc.joinButtonLabel[getLocale()];
+    }
+    get leaveButtonLabel() {
+        return loc.leaveButtonLabel[getLocale()];
     }
 }
 const loc = {

package/dist/media-center/media-center/discover/community-features.svelte

@@ -1,8 +1,8 @@
-<script lang="ts">import { compactNumber } from '../../../core/utils/compact-number';
-import { OptionsButton, ButtonSize, ButtonStyle, Button } from '../../../ui/button';
-import { CommunityFeaturesLocalization } from './community-features-localization';
-let { target, membershipHandler, locale } = $props();
-const localization = $derived(new CommunityFeaturesLocalization(locale));
+<script lang="ts">import { CommunityFeaturesLocalization } from './community-features-localization';
+import { compactNumber } from '@streamscloud/kit/core/utils';
+import { OptionsButton, Button } from '@streamscloud/kit/ui/button';
+let { target, membershipHandler } = $props();
+const localization = new CommunityFeaturesLocalization();
 let uiState = $state('idle');
 let isJoinedStore = $state.raw({ isJoined: false });
 $effect(() => {
@@ -58,7 +58,7 @@ const onJoinMembershipClick = async () => {
       disabled={!membershipHandler || target.communityFeatures.membersCount === 0}
       onclick={() => membershipHandler?.viewMembersList()}>
       <span class="members__count">
-        {compactNumber(target.communityFeatures.membersCount, { locale })}
+        {compactNumber(target.communityFeatures.membersCount)}
       </span>
       <span class="members__label">
         {localization.membersLabel(target.communityFeatures.membersCount)}
@@ -67,7 +67,7 @@ const onJoinMembershipClick = async () => {
     {#if membershipHandler && uiState !== 'loading'}
       <div class="actions">
         {#if isJoinedStore.isJoined}
-          <OptionsButton size={ButtonSize.Small} style={ButtonStyle.Standard} optionsPosition="bottom-end" disabled={uiState === 'submitting'}>
+          <OptionsButton size="small" variant="standard" optionsPosition="bottom-end" disabled={uiState === 'submitting'}>
             {localization.memberButtonLabel}
             {#snippet rightOptions()}
               <div class="leave-actions">
@@ -78,7 +78,7 @@ const onJoinMembershipClick = async () => {
             {/snippet}
           </OptionsButton>
         {:else}
-          <Button size={ButtonSize.Small} style={ButtonStyle.Standard} on={{ click: onJoinMembershipClick }} disabled={uiState === 'submitting'}>
+          <Button size="small" variant="standard" on={{ click: onJoinMembershipClick }} disabled={uiState === 'submitting'}>
             {localization.joinButtonLabel}
           </Button>
         {/if}
@@ -87,18 +87,7 @@ const onJoinMembershipClick = async () => {
   </div>
 {/if}
 
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.community-features {
+<style>.community-features {
   display: flex;
   flex-wrap: nowrap;
   margin-top: 0.25rem;
@@ -150,7 +139,7 @@ const onJoinMembershipClick = async () => {
 }
 
 .actions {
-  --button--min-width: 7.5rem;
+  --sc-kit--button--min-width: 7.5rem;
 }
 
 .leave-actions {

package/dist/media-center/media-center/discover/community-features.svelte.d.ts

@@ -1,10 +1,8 @@
-import type { Locale } from '../../../core/locale';
 import type { MediaCenterModel } from '../../config/types';
 import type { IMediaCenterMembershipHandler } from '../../membership';
 type Props = {
     target: MediaCenterModel;
     membershipHandler: IMediaCenterMembershipHandler | null;
-    locale: Locale;
 };
 declare const CommunityFeatures: import("svelte").Component<Props, {}, "">;
 type CommunityFeatures = ReturnType<typeof CommunityFeatures>;

package/dist/media-center/media-center/discover/discover-header.svelte

@@ -1,8 +1,8 @@
-<script lang="ts">import { ImageRounded } from '../../../ui/image';
-import { LineClamp } from '../../../ui/line-clamp';
-import { ProportionalContainer } from '../../../ui/proportional-container';
-import { default as CommunityFeatures } from './community-features.svelte';
+<script lang="ts">import { default as CommunityFeatures } from './community-features.svelte';
 import { MomentsCircle } from '../moments';
+import { ImageRounded } from '@streamscloud/kit/ui/image';
+import { LineClamp } from '@streamscloud/kit/ui/line-clamp';
+import { ProportionalContainer } from '@streamscloud/kit/ui/proportional-container';
 let { context } = $props();
 </script>
 
@@ -15,18 +15,18 @@ let { context } = $props();
     <div class="header__info">
       <p class="header__name">{target.name}</p>
       <p class="header__handle">@{target.handle}</p>
-      <CommunityFeatures target={target} membershipHandler={context.membershipHandler} locale={context.locale} />
+      <CommunityFeatures target={target} membershipHandler={context.membershipHandler} />
 
       {#if target.description}
         <p class="header__description">
-          <LineClamp enableShowMore={true} locale={context.locale}>{target.description}</LineClamp>
+          <LineClamp enableShowMore={true}>{target.description}</LineClamp>
         </p>
       {/if}
     </div>
     {#if target.banner}
       <div class="header__side-banner-container">
         <ProportionalContainer ratio={470 / 179}>
-          <ImageRounded src={target.banner} noBorders={true} />
+          <ImageRounded src={target.banner} />
         </ProportionalContainer>
       </div>
     {/if}
@@ -39,29 +39,18 @@ let { context } = $props();
       </div>
       <div class="header-mobile__texts">
         <p class="header-mobile__name">{target.name}</p>
-        <CommunityFeatures target={target} membershipHandler={context.membershipHandler} locale={context.locale} />
+        <CommunityFeatures target={target} membershipHandler={context.membershipHandler} />
       </div>
     </div>
     {#if target.description}
       <p class="header-mobile__description">
-        <LineClamp enableShowMore={true} locale={context.locale}>{target.description}</LineClamp>
+        <LineClamp enableShowMore={true}>{target.description}</LineClamp>
       </p>
     {/if}
   </div>
 {/if}
 
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.header {
+<style>.header {
   display: flex;
   flex-direction: row;
   gap: 2.25rem;
@@ -99,12 +88,12 @@ let { context } = $props();
   margin-top: 0.875rem;
   font-size: 0.9375rem;
   max-width: 37.5rem;
-  --line-clamp--line-clamp: 5;
+  --sc-kit--line-clamp--line-clamp: 5;
 }
 .header__side-banner-container {
   width: 29.375rem;
   max-width: 100%;
-  --image--rounded--outer--border-radius: 0.25rem;
+  --sc-kit--image--rounded--outer--border-radius: 0.25rem;
   /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 67.5rem) {
@@ -153,11 +142,11 @@ let { context } = $props();
   .header-mobile__name {
     font-weight: 600;
     font-size: 0.9375rem;
-    letter-spacing: -0.0103125rem;
+    letter-spacing: -0.0103rem;
   }
 }
 .header-mobile__description {
   font-size: 1rem;
   font-weight: 500;
-  --line-clamp--line-clamp: 2;
+  --sc-kit--line-clamp--line-clamp: 2;
 }</style>

package/dist/media-center/media-center/discover/discover-view-handler.svelte.d.ts

@@ -21,7 +21,7 @@ export declare class DiscoverViewHandler {
     get loading(): boolean;
     get streamsHolder(): StreamsInCategory | null;
     get shortVideosHolders(): ShortVideosInCategory[];
-    loadMoreShortVideos: () => Promise<void>;
+    loadMoreShortVideos: () => Promise<any>;
     activate: (data: {
         activeCategoryId: string | null;
         activeCategoryName: string | null;

package/dist/media-center/media-center/discover/discover-view-handler.svelte.js

@@ -1,7 +1,7 @@
-import { Deferred } from '../../../core/deferred';
 import { PostType } from '../../../core/enums';
 import { DiscoverDataLoader } from './data-loading';
 import { ShortVideosInCategory, StreamsInCategory } from './types.svelte';
+import { Deferred } from '@streamscloud/kit/core';
 export class DiscoverViewHandler {
     _state = $state('inactive');
     _streamsInCategoryCache = $state.raw([]);

package/dist/media-center/media-center/discover/discover-view-localization.d.ts

@@ -1,7 +1,4 @@
-import { type Locale } from '../../../core/locale';
 export declare class DiscoverViewLocalization {
-    latestStreamsSectionTitle: string;
-    latestShortVideosSectionTitle: string;
-    locale: Locale;
-    constructor(locale: Locale);
+    get latestStreamsSectionTitle(): string;
+    get latestShortVideosSectionTitle(): string;
 }

package/dist/media-center/media-center/discover/discover-view-localization.js

@@ -1,12 +1,10 @@
-import {} from '../../../core/locale';
+import { getLocale } from '@streamscloud/kit/locale';
 export class DiscoverViewLocalization {
-    latestStreamsSectionTitle;
-    latestShortVideosSectionTitle;
-    locale;
-    constructor(locale) {
-        this.latestStreamsSectionTitle = loc.streamsSectionTitle[locale];
-        this.latestShortVideosSectionTitle = loc.shortVideosSectionTitle[locale];
-        this.locale = locale;
+    get latestStreamsSectionTitle() {
+        return loc.streamsSectionTitle[getLocale()];
+    }
+    get latestShortVideosSectionTitle() {
+        return loc.shortVideosSectionTitle[getLocale()];
     }
 }
 const loc = {

package/dist/media-center/media-center/discover/discover-view.svelte

@@ -1,16 +1,15 @@
 <script lang="ts">import { getPostCoverImage } from '../../../posts/model';
 import { ShortVideoCard } from '../../../short-videos/short-video-card';
 import { StreamCard } from '../../../streams/stream-card';
-import { cardActionContainer, CardActions } from '../../../ui/card-actions';
-import { IconColor } from '../../../ui/icon';
-import { InfiniteScrolling } from '../../../ui/infinite-scrolling';
 import { default as Header } from './discover-header.svelte';
 import { DiscoverViewLocalization } from './discover-view-localization';
 import IconDelete from '@fluentui/svg-icons/icons/delete_20_regular.svg?raw';
 import IconEdit from '@fluentui/svg-icons/icons/edit_20_regular.svg?raw';
+import { cardActionContainer, CardActions } from '@streamscloud/kit/ui/card-actions';
+import { InfiniteScrolling } from '@streamscloud/kit/ui/infinite-scrolling';
 let { context, on } = $props();
 const handler = $derived(context.discoverHandler);
-const localization = $derived(new DiscoverViewLocalization(context.locale));
+const localization = new DiscoverViewLocalization();
 const generateShortVideoActions = (id) => {
     const actions = [];
     if (context.contentManagementHandler.editPost) {
@@ -24,7 +23,7 @@ const generateShortVideoActions = (id) => {
     if (context.contentManagementHandler.deletePost) {
         actions.push({
             icon: IconDelete,
-            iconColor: IconColor.Red,
+            iconColor: 'red',
             callback: async () => {
                 context.contentManagementHandler.deletePost?.(id);
             }
@@ -45,7 +44,7 @@ const genereateStreamActions = (id) => {
     if (context.contentManagementHandler.deleteStream) {
         actions.push({
             icon: IconDelete,
-            iconColor: IconColor.Red,
+            iconColor: 'red',
             callback: async () => {
                 context.contentManagementHandler.deleteStream?.(id);
             }
@@ -98,7 +97,6 @@ const genereateStreamActions = (id) => {
                           viewsCount: item.viewsCount,
                           products: item.products
                         }}
-                        locale={context.locale}
                         on={{ click: () => on.shortVideoSelected(item, holder.categoryId) }} />
                       <CardActions actions={generateShortVideoActions(item.id)} />
                     </div>
@@ -113,18 +111,7 @@ const genereateStreamActions = (id) => {
   </div>
 </div>
 
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.media-center-discover {
+<style>.media-center-discover {
   width: 100%;
   flex: 1;
   scrollbar-gutter: stable both-edges;

package/dist/media-center/media-center/footer/media-center-footer.svelte

@@ -1,8 +1,8 @@
-<script lang="ts">import { Icon } from '../../../ui/icon';
-import IconCart from '@fluentui/svg-icons/icons/cart_20_regular.svg?raw';
+<script lang="ts">import IconCart from '@fluentui/svg-icons/icons/cart_20_regular.svg?raw';
 import IconLineHorizontal3 from '@fluentui/svg-icons/icons/line_horizontal_3_20_regular.svg?raw';
 import IconPhone from '@fluentui/svg-icons/icons/phone_20_regular.svg?raw';
 import IconScreenSearch from '@fluentui/svg-icons/icons/screen_search_20_regular.svg?raw';
+import { Icon } from '@streamscloud/kit/ui/icon';
 let { context } = $props();
 </script>
 
@@ -34,18 +34,7 @@ let { context } = $props();
   <div class="media-center-footer__spacer"></div>
 </div>
 
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.media-center-footer {
+<style>.media-center-footer {
   width: 100%;
   display: flex;
   align-items: center;
@@ -63,11 +52,11 @@ let { context } = $props();
   display: flex;
   justify-content: center;
   align-items: center;
-  --icon--size: 1.5rem;
-  --icon--color: var(--sc-mc-color--text-secondary);
+  --sc-kit--icon--size: 1.5rem;
+  --sc-kit--icon--color: var(--sc-mc-color--text-secondary);
   line-height: 0;
 }
 .media-center-footer__button--active {
-  --icon--color: var(--sc-mc-color--text-primary);
-  --icon--stroke-width: 0.3;
+  --sc-kit--icon--color: var(--sc-mc-color--text-primary);
+  --sc-kit--icon--stroke-width: 0.3;
 }</style>

package/dist/media-center/media-center/handlers/media-center-settings-handler.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { Locale } from '../../../core/locale';
 import type { IMediaCenterDataProvider } from '../../config/types';
 import type { MediaCenterSettings } from '../media-center-settings.svelte';
+import type { Locale } from '@streamscloud/kit/locale';
 export declare class MediaCenterSettingsHandler {
     private _backgroundImageUrl;
     private _mediaCenterSettings;