@streamscloud/embeddable 12.2.0 → 13.0.0

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

@@ -1,43 +1,36 @@
 import type { Locale } from '../core/locale';
-import { type IMediaCenterConfig } from '../media-center/config/types';
+import { type IMediaCenterDataProvider } from '../media-center/config/types';
+import type { PostPlayerModel } from '../posts/posts-player';
+import type { IStreamsPlayerDataProvider } from '../streams/streams-player';
+import type { StreamAmplificationParameters } from '../streams/streams-player/types';
+import type { IPlayerDataProvider } from '../ui/player/providers';
 export { default as MediaPage } from './cmp.media-page.svelte';
-export type { IMediaCenterConfig };
-export { mapToPostPlayerModel } from '../posts/data-loaders/mapper';
+export type { IMediaCenterDataProvider };
 /**
  * Opens the media page modal.
  *
- * Two overloads (mutually exclusive; enforced by TypeScript):
- * - Config mode: openMediaPageModal({ mediaCenterConfig, viewerSettings?, on? })
- * - Internal config mode: openMediaPageModal({ id, initiator, graphqlOrigin?, viewerSettings?, on? })
- *
  * @param init Configuration options.
  *
- * Config mode (overload 1)
- * @param {IMediaCenterConfig} init.mediaCenterConfig
+ * Config mode
+ * @param {IMediaCenterDataProvider} init.dataProvider
  *   Configuration for the media center.
  *
- * Internal config mode (overload 2)
- * @param {string} init.id
- *   Media page ID, used to construct an internal media-center config.
- * @param {string} init.initiator
- *   Initiator identifier (used for tracking/analytics and GraphQL).
- * @param {string} [init.graphqlOrigin]
- *   Optional GraphQL origin (base URL). If omitted, the default origin is determined internally.
- *
  * Common (optional)
- * @param {MediaPageViewerSettings} [init.viewerSettings]
+ * @param {Object} [init.viewerSettings]
  *   Viewer UI and behavior settings.
  *
- *   Fields of MediaPageViewerSettings:
- *   - {boolean} [disableBackground]
- *       If true , hides the viewer background image.
- *   - {Locale} [locale='en']
+ *   Fields of `viewerSettings`:
+ *   - {boolean} [viewerSettings.disableBackground]
+ *       If true, hides the viewer background image.
+ *   - {Locale} [viewerSettings.locale]
  *       Localization for the viewer UI. Supported values: 'en' | 'no'.
  *       If omitted, the default locale 'en' is used.
- *   - {boolean} [showStreamsCloudWatermark]
+ *   - {boolean} [viewerSettings.showStreamsCloudWatermark]
  *       If true, shows the StreamsCloud watermark.
- *   - {boolean} [hideCloseButton]
+ *   - {boolean} [viewerSettings.hideCloseButton]
  *       If true, hides the close button.
+ *   - {'light' | 'dark'} [viewerSettings.theme]
+ *       Optional theme for the viewer UI.
  *
  * Events
  * @param {{ closed?: () => void }} [init.on]
@@ -45,52 +38,28 @@ export { mapToPostPlayerModel } from '../posts/data-loaders/mapper';
  * @param {() => void} [init.on.closed]
  *   Called after the modal is fully closed (after unmount and removal from the DOM).
  *
- * Notes
- * - If neither mediaCenterConfig nor id is specified, a warning is shown and the modal is not opened.
- *
  * @returns {void}
  *
  * @example <caption>Config mode</caption>
  * ```ts
  * import {
  *   openMediaPageModal,
- *   type IMediaCenterConfig,
+ *   type IMediaCenterDataProvider
  * } from '@streamscloud/embeddable/media-page';
  *
- * const mediaCenterConfig: IMediaCenterConfig = {
+ * const dataProvider: IMediaDataProvider= {
  *   // ...your media center configuration
  * };
  *
  * openMediaPageModal({
- *   mediaCenterConfig,
+ *   dataProvider,
  *   viewerSettings: {
- *     // Locale defaults to 'en'; set 'no' to switch to Norwegian:
+ *     // Example: switch to Norwegian (if supported by your Locale type)
  *     locale: 'no',
  *     disableBackground: false,
  *     hideCloseButton: false,
  *     showStreamsCloudWatermark: true,
- *   },
- *   on: {
- *     closed: () => console.log('Media page modal closed'),
- *   },
- * });
- * ```
- *
-
-
- * @example <caption>Internal config mode</caption>
- * ```ts
- * import { openMediaPageModal } from '@streamscloud/embeddable/media-page';
- *
- * openMediaPageModal({
- *   id: 'media-page-123',
- *   initiator: 'marketing-campaign',
- *   graphqlOrigin: 'https://api.example.com',
- *   viewerSettings: {
- *     locale: 'en',
- *     disableBackground: true,
- *     hideCloseButton: false,
- *     showStreamsCloudWatermark: false,
+ *     theme: 'dark',
  *   },
  *   on: {
  *     closed: () => console.log('Media page modal closed'),
@@ -99,19 +68,32 @@ export { mapToPostPlayerModel } from '../posts/data-loaders/mapper';
  * ```
  */
 export declare function openMediaPageModal(init: {
-    mediaCenterConfig: IMediaCenterConfig;
+    dataProvider: IMediaCenterDataProvider;
     viewerSettings?: MediaPageViewerSettings;
     on?: {
         closed?: () => void;
     };
 }): void;
-export declare function openMediaPageModal(init: {
-    id: string;
-    initiator: string;
-    graphqlOrigin?: string;
+export declare function openMediaPageModalWithInitialPostsProvider(init: {
+    dataProvider: IPlayerDataProvider<PostPlayerModel>;
+    mediaCenterDataProvider: IMediaCenterDataProvider;
+    viewerSettings?: MediaPageViewerSettings;
+    on?: {
+        closed?: () => void;
+        postActivated?: (id: string) => void;
+    };
+}): void;
+export declare function openMediaPageModalWithInitialStreamsProvider(init: {
+    dataProvider: IStreamsPlayerDataProvider;
+    amplificationParameters?: StreamAmplificationParameters;
+    mediaCenterDataProvider: IMediaCenterDataProvider;
     viewerSettings?: MediaPageViewerSettings;
     on?: {
         closed?: () => void;
+        streamActivated?: (data: {
+            title: string;
+            image: string | null;
+        }) => void;
     };
 }): void;
 export type MediaPageViewerSettings = {

package/dist/media-page/index.js

@@ -1,22 +1,72 @@
-import { toastrWarning } from '../core/toastr';
-import { InternalMediaCenterConfig } from '../media-center/config/internal-media-center-config';
 import {} from '../media-center/config/types';
-import { MediaCenterProxy } from '../media-center/media-center';
+import { MediaCenterProxy, MediaCenterSettings } from '../media-center/media-center';
 import { CloseOrchestrator } from '../ui/player/close-orchestrator';
 import { ModalShadowHost } from '../ui/shadow-dom';
 import { mount, unmount } from 'svelte';
 export { default as MediaPage } from './cmp.media-page.svelte';
-export { mapToPostPlayerModel } from '../posts/data-loaders/mapper';
+/**
+ * Opens the media page modal.
+ *
+ * @param init Configuration options.
+ *
+ * Config mode
+ * @param {IMediaCenterDataProvider} init.dataProvider
+ *   Configuration for the media center.
+ *
+ * Common (optional)
+ * @param {Object} [init.viewerSettings]
+ *   Viewer UI and behavior settings.
+ *
+ *   Fields of `viewerSettings`:
+ *   - {boolean} [viewerSettings.disableBackground]
+ *       If true, hides the viewer background image.
+ *   - {Locale} [viewerSettings.locale]
+ *       Localization for the viewer UI. Supported values: 'en' | 'no'.
+ *       If omitted, the default locale 'en' is used.
+ *   - {boolean} [viewerSettings.showStreamsCloudWatermark]
+ *       If true, shows the StreamsCloud watermark.
+ *   - {boolean} [viewerSettings.hideCloseButton]
+ *       If true, hides the close button.
+ *   - {'light' | 'dark'} [viewerSettings.theme]
+ *       Optional theme for the viewer UI.
+ *
+ * Events
+ * @param {{ closed?: () => void }} [init.on]
+ *   Optional event handlers.
+ * @param {() => void} [init.on.closed]
+ *   Called after the modal is fully closed (after unmount and removal from the DOM).
+ *
+ * @returns {void}
+ *
+ * @example <caption>Config mode</caption>
+ * ```ts
+ * import {
+ *   openMediaPageModal,
+ *   type IMediaCenterDataProvider
+ * } from '@streamscloud/embeddable/media-page';
+ *
+ * const dataProvider: IMediaDataProvider= {
+ *   // ...your media center configuration
+ * };
+ *
+ * openMediaPageModal({
+ *   dataProvider,
+ *   viewerSettings: {
+ *     // Example: switch to Norwegian (if supported by your Locale type)
+ *     locale: 'no',
+ *     disableBackground: false,
+ *     hideCloseButton: false,
+ *     showStreamsCloudWatermark: true,
+ *     theme: 'dark',
+ *   },
+ *   on: {
+ *     closed: () => console.log('Media page modal closed'),
+ *   },
+ * });
+ * ```
+ */
 export function openMediaPageModal(init) {
-    const { id, graphqlOrigin, initiator, viewerSettings, on } = init;
-    let mediaCenterConfig = init.mediaCenterConfig;
-    if (!mediaCenterConfig && id) {
-        mediaCenterConfig = new InternalMediaCenterConfig({ mediaPageId: id, graphqlOrigin, initiator });
-    }
-    if (!mediaCenterConfig) {
-        toastrWarning('Config is not specified.');
-        return;
-    }
+    const { dataProvider, viewerSettings, on } = init;
     const shadowHost = new ModalShadowHost();
     let mounted = null;
     const makeCloseOrchestrator = () => new CloseOrchestrator({
@@ -32,10 +82,73 @@ export function openMediaPageModal(init) {
     mounted = mount(MediaCenterProxy, {
         target: shadowHost.shadowRoot,
         props: {
-            config: mediaCenterConfig,
-            settings: viewerSettings,
+            dataProvider,
+            settings: new MediaCenterSettings(viewerSettings),
             modeProps: {
-                mode: 'discover'
+                mode: 'default'
+            },
+            closeOrchestrator: makeCloseOrchestrator()
+        }
+    });
+    shadowHost.attachToBody();
+}
+export function openMediaPageModalWithInitialPostsProvider(init) {
+    const { dataProvider, mediaCenterDataProvider, viewerSettings, on } = init;
+    const shadowHost = new ModalShadowHost();
+    let mounted = null;
+    const makeCloseOrchestrator = () => new CloseOrchestrator({
+        closeFn: async () => {
+            await unmount(mounted);
+            shadowHost.remove();
+            if (on?.closed) {
+                on.closed();
+            }
+        },
+        canClose: !viewerSettings?.hideCloseButton
+    });
+    mounted = mount(MediaCenterProxy, {
+        target: shadowHost.shadowRoot,
+        props: {
+            dataProvider: mediaCenterDataProvider,
+            settings: new MediaCenterSettings(viewerSettings),
+            modeProps: {
+                mode: 'posts',
+                props: {
+                    dataProvider,
+                    onPostActivated: on?.postActivated
+                }
+            },
+            closeOrchestrator: makeCloseOrchestrator()
+        }
+    });
+    shadowHost.attachToBody();
+}
+export function openMediaPageModalWithInitialStreamsProvider(init) {
+    const { dataProvider, amplificationParameters, mediaCenterDataProvider, viewerSettings, on } = init;
+    const shadowHost = new ModalShadowHost();
+    let mounted = null;
+    const makeCloseOrchestrator = () => new CloseOrchestrator({
+        closeFn: async () => {
+            await unmount(mounted);
+            shadowHost.remove();
+            if (on?.closed) {
+                on.closed();
+            }
+        },
+        canClose: !viewerSettings?.hideCloseButton
+    });
+    mounted = mount(MediaCenterProxy, {
+        target: shadowHost.shadowRoot,
+        props: {
+            dataProvider: mediaCenterDataProvider,
+            settings: new MediaCenterSettings(viewerSettings),
+            modeProps: {
+                mode: 'streams',
+                props: {
+                    dataProvider,
+                    amplificationParameters,
+                    onStreamActivated: on?.streamActivated
+                }
             },
             closeOrchestrator: makeCloseOrchestrator()
         }

package/dist/posts/posts-player/index.d.ts

@@ -1,24 +1,19 @@
 import type { Locale } from '../../core/locale';
-import { type IMediaCenterConfig } from '../../media-center/config/types';
+import { type IMediaCenterDataProvider } from '../../media-center/config/types';
 import type { IPostSocialInteractionsHandler } from '../social-interactions';
 import { default as PostsPlayer } from './cmp.posts-player.svelte';
 import type { IPostAnalyticsHandler, PostPlayerModel } from './types';
 export { PostsPlayer, type PostPlayerModel };
-export type { IMediaCenterConfig, IPostAnalyticsHandler };
-export { mapToPostPlayerModel } from '../data-loaders/mapper';
+export type { IMediaCenterDataProvider, IPostAnalyticsHandler };
 /**
  * Opens the posts player modal.
  *
- * @param init Configuration options.
+ * @param init Configuration options for the posts player.
  *
  * Data provider (required)
- * @param init.postsProvider
+ * @param {IPostsPlayerDataProvider} init.postsProvider
  *   Provider that supplies post items to the player.
  *
- * Media center (optional)
- * @param {IMediaCenterConfig} [init.mediaCenterConfig]
- *   Optional media-center config passed to MediaCenter.
- *
  * Analytics (optional)
  * @param {IPostAnalyticsHandler} [init.analyticsHandler]
  *   Custom analytics handler for posts player events.
@@ -27,20 +22,23 @@ export { mapToPostPlayerModel } from '../data-loaders/mapper';
  * @param {IPostSocialInteractionsHandler} [init.socialInteractionsHandler]
  *   Handler for social interactions (like, share, etc.).
  *
- * Player settings
- * @param {PostPlayerSettings} [init.playerSettings]
+ * Player settings (optional)
+ * @param {object} [init.playerSettings]
  *   Player UI and behavior settings.
- *   Fields of PostPlayerSettings:
+ *   Fields of PostsPlayerSettings:
  *   - {boolean} [disableBackground]
  *       If true, hides the player's background image.
  *   - {boolean} [hideCloseButton]
  *       If true, hides the close button.
+ *       Note: when true, the `CloseOrchestrator` will not allow closing via the close button.
  *   - {'en'|'no'} [locale='en']
  *       Localization for the player UI. Default is 'en'; use 'no' for Norwegian.
  *   - {boolean} [showStreamsCloudWatermark]
  *       If true, shows the StreamsCloud watermark.
+ *   - {'light' | 'dark'} [theme]
+ *       Optional theme for the player UI.
  *
- * Events
+ * Events (optional)
  * @param {{ playerClosed?: () => void; postActivated?: (id: string) => void }} [init.on]
  *   Optional event handlers.
  * @param {() => void} [init.on.playerClosed]
@@ -55,16 +53,26 @@ export { mapToPostPlayerModel } from '../data-loaders/mapper';
  * import { openPostsPlayer } from '@streamscloud/embeddable/posts-player';
  *
  * openPostsPlayer({
- *   postsProvider: myPostsProvider,
- *   mediaCenterConfig: myMediaCenterConfig,
+ *   postsProvider: {
+ *     kind: 'feed',
+ *     initialData: {
+ *       prefetchedItems: myPrefetchedPosts,
+ *       startIndex: 0,
+ *       startMediaIndex: 0,
+ *     },
+ *     loadMore: async () => {
+ *       // return next chunk of PostPlayerModel[]
+ *       return await fetchMorePosts();
+ *     },
+ *   },
  *   analyticsHandler: myAnalyticsHandler,
  *   socialInteractionsHandler: mySocialHandler,
  *   playerSettings: {
- *     // Default locale is 'en'; set 'no' to switch to Norwegian:
  *     locale: 'no',
  *     disableBackground: false,
  *     hideCloseButton: false,
  *     showStreamsCloudWatermark: true,
+ *     theme: 'dark',
  *   },
  *   on: {
  *     playerClosed: () => console.log('Player closed'),
@@ -73,20 +81,17 @@ export { mapToPostPlayerModel } from '../data-loaders/mapper';
  * });
  * ```
  */
-export declare function openPostsPlayer(init: {
-    postsProvider: IPostsPlayerDataProvider;
-    mediaCenterConfig: IMediaCenterConfig;
-    playerSettings?: PostsPlayerSettings;
-    on?: {
-        playerClosed?: () => void;
-        postActivated?: (id: string) => void;
-    };
-}): void;
 export declare function openPostsPlayer(init: {
     postsProvider: IPostsPlayerDataProvider;
     analyticsHandler?: IPostAnalyticsHandler;
     socialInteractionsHandler?: IPostSocialInteractionsHandler;
-    playerSettings?: PostsPlayerSettings;
+    playerSettings?: {
+        disableBackground?: boolean;
+        locale?: Locale;
+        showStreamsCloudWatermark?: boolean;
+        hideCloseButton?: boolean;
+        theme?: 'light' | 'dark';
+    };
     on?: {
         playerClosed?: () => void;
         postActivated?: (id: string) => void;
@@ -115,10 +120,3 @@ export type IPostsPlayerDataProvider<TChunk extends WithId = WithId> = {
 type WithId = {
     id: string;
 };
-export type PostsPlayerSettings = {
-    disableBackground?: boolean;
-    locale?: Locale;
-    showStreamsCloudWatermark?: boolean;
-    hideCloseButton?: boolean;
-    theme?: 'light' | 'dark';
-};

package/dist/posts/posts-player/index.js

@@ -1,16 +1,90 @@
 import {} from '../../media-center/config/types';
-import { MediaCenterProxy } from '../../media-center/media-center';
 import { CloseOrchestrator } from '../../ui/player/close-orchestrator';
 import { ModalShadowHost } from '../../ui/shadow-dom';
 import { default as PostsPlayer } from './cmp.posts-player.svelte';
 import { default as PostsPlayerProxy } from './posts-player-proxy.svelte';
 import { mount, unmount } from 'svelte';
 export { PostsPlayer };
-export { mapToPostPlayerModel } from '../data-loaders/mapper';
+/**
+ * Opens the posts player modal.
+ *
+ * @param init Configuration options for the posts player.
+ *
+ * Data provider (required)
+ * @param {IPostsPlayerDataProvider} init.postsProvider
+ *   Provider that supplies post items to the player.
+ *
+ * Analytics (optional)
+ * @param {IPostAnalyticsHandler} [init.analyticsHandler]
+ *   Custom analytics handler for posts player events.
+ *
+ * Social interactions (optional)
+ * @param {IPostSocialInteractionsHandler} [init.socialInteractionsHandler]
+ *   Handler for social interactions (like, share, etc.).
+ *
+ * Player settings (optional)
+ * @param {object} [init.playerSettings]
+ *   Player UI and behavior settings.
+ *   Fields of PostsPlayerSettings:
+ *   - {boolean} [disableBackground]
+ *       If true, hides the player's background image.
+ *   - {boolean} [hideCloseButton]
+ *       If true, hides the close button.
+ *       Note: when true, the `CloseOrchestrator` will not allow closing via the close button.
+ *   - {'en'|'no'} [locale='en']
+ *       Localization for the player UI. Default is 'en'; use 'no' for Norwegian.
+ *   - {boolean} [showStreamsCloudWatermark]
+ *       If true, shows the StreamsCloud watermark.
+ *   - {'light' | 'dark'} [theme]
+ *       Optional theme for the player UI.
+ *
+ * Events (optional)
+ * @param {{ playerClosed?: () => void; postActivated?: (id: string) => void }} [init.on]
+ *   Optional event handlers.
+ * @param {() => void} [init.on.playerClosed]
+ *   Called after the player is fully closed (after unmount and removal from the DOM).
+ * @param {(id: string) => void} [init.on.postActivated]
+ *   Called when a post becomes active (receives the post's id).
+ *
+ * @returns {void}
+ *
+ * @example
+ * ```ts
+ * import { openPostsPlayer } from '@streamscloud/embeddable/posts-player';
+ *
+ * openPostsPlayer({
+ *   postsProvider: {
+ *     kind: 'feed',
+ *     initialData: {
+ *       prefetchedItems: myPrefetchedPosts,
+ *       startIndex: 0,
+ *       startMediaIndex: 0,
+ *     },
+ *     loadMore: async () => {
+ *       // return next chunk of PostPlayerModel[]
+ *       return await fetchMorePosts();
+ *     },
+ *   },
+ *   analyticsHandler: myAnalyticsHandler,
+ *   socialInteractionsHandler: mySocialHandler,
+ *   playerSettings: {
+ *     locale: 'no',
+ *     disableBackground: false,
+ *     hideCloseButton: false,
+ *     showStreamsCloudWatermark: true,
+ *     theme: 'dark',
+ *   },
+ *   on: {
+ *     playerClosed: () => console.log('Player closed'),
+ *     postActivated: (id) => console.log('Activated post', id),
+ *   },
+ * });
+ * ```
+ */
 export function openPostsPlayer(init) {
-    const { postsProvider: dataProvider, mediaCenterConfig, analyticsHandler, socialInteractionsHandler, playerSettings, on } = init;
+    const { postsProvider: dataProvider, analyticsHandler, socialInteractionsHandler, playerSettings, on } = init;
     const shadowHost = new ModalShadowHost();
-    let mounted;
+    let mounted = null;
     const makeCloseOrchestrator = () => new CloseOrchestrator({
         closeFn: async () => {
             await unmount(mounted);
@@ -21,37 +95,18 @@ export function openPostsPlayer(init) {
         },
         canClose: !playerSettings?.hideCloseButton
     });
-    if (mediaCenterConfig) {
-        mounted = mount(MediaCenterProxy, {
-            target: shadowHost.shadowRoot,
-            props: {
-                config: mediaCenterConfig,
-                settings: playerSettings,
-                modeProps: {
-                    mode: 'posts',
-                    props: {
-                        dataProvider,
-                        onPostActivated: on?.postActivated
-                    }
-                },
-                closeOrchestrator: makeCloseOrchestrator()
+    mounted = mount(PostsPlayerProxy, {
+        target: shadowHost.shadowRoot,
+        props: {
+            dataProvider,
+            socialInteractionsHandler,
+            analyticsHandler,
+            playerSettings,
+            closeOrchestrator: makeCloseOrchestrator(),
+            on: {
+                postActivated: on?.postActivated
             }
-        });
-    }
-    else {
-        mounted = mount(PostsPlayerProxy, {
-            target: shadowHost.shadowRoot,
-            props: {
-                dataProvider,
-                socialInteractionsHandler,
-                analyticsHandler,
-                playerSettings,
-                closeOrchestrator: makeCloseOrchestrator(),
-                on: {
-                    postActivated: on?.postActivated
-                }
-            }
-        });
-    }
+        }
+    });
     shadowHost.attachToBody();
 }

package/dist/posts/posts-player/posts-player-view.svelte

@@ -9,7 +9,7 @@
 };
 import { PostType } from '../..';
 import { ContentPlayer, ContentPlayerConfig } from '../../content-player';
-import { ContentPlayerSettings } from '../../content-player/content-player-settings';
+import { ContentPlayerSettings } from '../../content-player/content-player-settings.svelte';
 import { preloadImage } from '../../core/image-preloader';
 import { getPostCoverImage } from '../model';
 import {} from '../../ui/player/providers';

package/dist/posts/posts-player/types.d.ts

@@ -1,4 +1,5 @@
 import type { Locale } from '../../core/locale';
+import type { ThemeValue } from '../../core/theme';
 import type { IPostModel } from '..';
 import type { IPostSocialInteractionsHandler } from '../social-interactions';
 import type { ICloseOrchestrator } from '../../ui/player/close-orchestrator';
@@ -36,5 +37,5 @@ export type PostsPlayerProps = {
 export type PostPlayerSettings = {
     locale?: Locale;
     showStreamsCloudWatermark?: boolean;
-    playerColors?: PlayerColors;
+    playerColors?: Record<ThemeValue, PlayerColors>;
 };

package/dist/streams/layout/styles-transformer.d.ts

@@ -9,7 +9,7 @@ export declare const generateTextStyles: (styles: Partial<TextStreamElementStyle
 export declare const generateImageStyles: (styles: Partial<ImageStreamElementStyles> | null) => string;
 export declare const mapFontFamily: (value: StreamElementStyleFontFamily | null | undefined) => string;
 export declare const mapFontWeight: (value: StreamElementStyleFontWeight | null | undefined) => "normal" | "600" | "500";
-export declare const mapTextAlign: (value: StreamElementStyleHorizontalAlign | null | undefined) => "center" | "left" | "right";
+export declare const mapTextAlign: (value: StreamElementStyleHorizontalAlign | null | undefined) => "right" | "left" | "center";
 export declare const mapFlexJustifyContent: (value: StreamElementStyleHorizontalAlign | null | undefined) => "center" | "flex-start" | "flex-end";
 export declare const transformFontSizeValue: (value: number | null | undefined) => string;
 export declare const transformNumericValue: (value: number | null | undefined, fallback?: string) => string;