@streamscloud/embeddable 15.1.0-1770823267010 → 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 } 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="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>
@@ -106,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;
@@ -245,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,14 +1,14 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
+import { type TrackingParams } from '../../marketing-tracking';
+import type { AdCardModel } from './types';
+type Props = {
+    ad: AdCardModel;
+    trackingParams: TrackingParams;
+    inert?: boolean;
+    on?: {
+        click?: (id: string) => void;
+        impression?: (id: string) => void;
     };
-    slots: {};
 };
-export type CmpProps = typeof __propDef.props;
-export type CmpEvents = typeof __propDef.events;
-export type CmpSlots = typeof __propDef.slots;
-export default class Cmp extends SvelteComponentTyped<CmpProps, CmpEvents, CmpSlots> {
-}
-export {};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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, type ImageSize } from '@streamscloud/kit/core/media';
-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 '@streamscloud/kit/core/media';
-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/cmp.media-center-proxy.svelte.d.ts

@@ -1,14 +1,15 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+import type { IMediaCenterDataProvider } from '../config/types';
+import { type ICloseOrchestrator } from '../../ui/player/close-orchestrator';
+import type { MediaCenterSettings } from './media-center-settings.svelte';
+import type { MediaCenterModeProps } from './types';
+import { type Snippet } from 'svelte';
+type Props = {
+    dataProvider: IMediaCenterDataProvider;
+    settings: MediaCenterSettings;
+    modeProps: MediaCenterModeProps;
+    closeOrchestrator: ICloseOrchestrator;
+    dynamicActions?: Snippet;
 };
-export type CmpProps = typeof __propDef.props;
-export type CmpEvents = typeof __propDef.events;
-export type CmpSlots = typeof __propDef.slots;
-export default class Cmp extends SvelteComponentTyped<CmpProps, CmpEvents, CmpSlots> {
-}
-export {};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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, 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)}
@@ -139,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,14 +1,9 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+import type { MediaCenterModel } from '../../config/types';
+import type { IMediaCenterMembershipHandler } from '../../membership';
+type Props = {
+    target: MediaCenterModel;
+    membershipHandler: IMediaCenterMembershipHandler | null;
 };
-export type CommunityFeaturesProps = typeof __propDef.props;
-export type CommunityFeaturesEvents = typeof __propDef.events;
-export type CommunityFeaturesSlots = typeof __propDef.slots;
-export default class CommunityFeatures extends SvelteComponentTyped<CommunityFeaturesProps, CommunityFeaturesEvents, CommunityFeaturesSlots> {
-}
-export {};
+declare const CommunityFeatures: import("svelte").Component<Props, {}, "">;
+type CommunityFeatures = ReturnType<typeof CommunityFeatures>;
+export default 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,11 +15,11 @@ 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>
@@ -39,12 +39,12 @@ 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>
@@ -88,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) {
@@ -148,5 +148,5 @@ let { context } = $props();
 .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-header.svelte.d.ts

@@ -1,14 +1,7 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+import type { MediaCenterContext } from '../media-center-context.svelte';
+type Props = {
+    context: MediaCenterContext;
 };
-export type DiscoverHeaderProps = typeof __propDef.props;
-export type DiscoverHeaderEvents = typeof __propDef.events;
-export type DiscoverHeaderSlots = typeof __propDef.slots;
-export default class DiscoverHeader extends SvelteComponentTyped<DiscoverHeaderProps, DiscoverHeaderEvents, DiscoverHeaderSlots> {
-}
-export {};
+declare const DiscoverHeader: import("svelte").Component<Props, {}, "">;
+type DiscoverHeader = ReturnType<typeof DiscoverHeader>;
+export default DiscoverHeader;

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,15 +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 { 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) {
@@ -97,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>

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

@@ -1,14 +1,13 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
+import type { PostPlayerModel } from '../../../posts/posts-player/types';
+import type { StreamPlayerModel } from '../../../streams/streams-player';
+import type { MediaCenterContext } from '../media-center-context.svelte';
+type Props = {
+    context: MediaCenterContext;
+    on: {
+        shortVideoSelected: (shortVideo: PostPlayerModel, categoryId: string | null) => void;
+        streamSelected: (stream: StreamPlayerModel, categoryId: string | null) => void;
     };
-    slots: {};
 };
-export type DiscoverViewProps = typeof __propDef.props;
-export type DiscoverViewEvents = typeof __propDef.events;
-export type DiscoverViewSlots = typeof __propDef.slots;
-export default class DiscoverView extends SvelteComponentTyped<DiscoverViewProps, DiscoverViewEvents, DiscoverViewSlots> {
-}
-export {};
+declare const DiscoverView: import("svelte").Component<Props, {}, "">;
+type DiscoverView = ReturnType<typeof DiscoverView>;
+export default DiscoverView;

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>
 
@@ -52,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/footer/media-center-footer.svelte.d.ts

@@ -1,14 +1,7 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+import type { MediaCenterContext } from '../media-center-context.svelte';
+type Props = {
+    context: MediaCenterContext;
 };
-export type MediaCenterFooterProps = typeof __propDef.props;
-export type MediaCenterFooterEvents = typeof __propDef.events;
-export type MediaCenterFooterSlots = typeof __propDef.slots;
-export default class MediaCenterFooter extends SvelteComponentTyped<MediaCenterFooterProps, MediaCenterFooterEvents, MediaCenterFooterSlots> {
-}
-export {};
+declare const MediaCenterFooter: import("svelte").Component<Props, {}, "">;
+type MediaCenterFooter = ReturnType<typeof MediaCenterFooter>;
+export default MediaCenterFooter;

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;

package/dist/media-center/media-center/header/media-center-header-localization.d.ts

@@ -1,6 +1,6 @@
-import { type Locale } from '../../../core/locale';
 export declare class MediaCenterHeaderLocalization {
-    buttons: {
+    get discoverLabel(): string;
+    get buttons(): {
         cart: string;
         discover: string;
         feed: string;
@@ -8,6 +8,4 @@ export declare class MediaCenterHeaderLocalization {
         moments: string;
         webpage: string;
     };
-    discoverLabel: string;
-    constructor(locale: Locale);
 }

package/dist/media-center/media-center/header/media-center-header-localization.js

@@ -1,16 +1,16 @@
-import {} from '../../../core/locale';
+import { getLocale } from '@streamscloud/kit/locale';
 export class MediaCenterHeaderLocalization {
-    buttons;
-    discoverLabel;
-    constructor(locale) {
-        this.discoverLabel = loc.discoverLabel[locale];
-        this.buttons = {
-            cart: loc.cartButton[locale],
-            discover: loc.discoverButton[locale],
-            feed: loc.feedButton[locale],
-            login: loc.loginButton[locale],
-            moments: loc.momentsButton[locale],
-            webpage: loc.webpageButton[locale]
+    get discoverLabel() {
+        return loc.discoverLabel[getLocale()];
+    }
+    get buttons() {
+        return {
+            cart: loc.cartButton[getLocale()],
+            discover: loc.discoverButton[getLocale()],
+            feed: loc.feedButton[getLocale()],
+            login: loc.loginButton[getLocale()],
+            moments: loc.momentsButton[getLocale()],
+            webpage: loc.webpageButton[getLocale()]
         };
     }
 }