@streamlayer/react 0.10.10 → 0.11.0

package/lib/index.d.ts

@@ -69,6 +69,7 @@ declare module "packages/react-ui/src/lib/theme/theme" {
             BG_TRANSPARENT_VOTE_PROGRESS_SUCCESS: string;
             BG_TRANSPARENT_VOTE_PROGRESS_ERROR: string;
             BG_TRANSPARENT_USER_CONTAINER: string;
+            BG_TRANSPARENT_ONBOARDING_INAPP: string;
             BLUE_PRIMARY: string;
             RED_PRIMARY: string;
             RED_SECONDARY: string;
@@ -78,6 +79,7 @@ declare module "packages/react-ui/src/lib/theme/theme" {
             GREY_2: string;
             GREY_3: string;
             GREY_4: string;
+            GREY_PRIMARY_ONBOARDING_INAPP: string;
             BLACK_1: string;
             GREEN_1: string;
             RED_1: string;
@@ -153,543 +155,188 @@ declare module "packages/react-ui/src/lib/login/index" {
         host: string;
     }>;
 }
-declare module "packages/react-ui/src/lib/gamification/onboarding/styles" {
-    export const Container: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const Content: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const Description: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const Title: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const OnboardingActionBtn: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+declare module "packages/sdk-web-interfaces/src/auth" {
+    export abstract class AbstractAuthenticationProvider {
+        abstract login(...args: unknown[]): Promise<unknown>;
+        abstract logout(): void;
+        abstract me(): Promise<unknown>;
+        abstract isAuthenticated(): Promise<unknown>;
+    }
 }
-declare module "packages/react-ui/src/lib/gamification/onboarding/index" {
-    type OnboardingType = {
-        action: () => void;
+declare module "packages/sdk-web-interfaces/src/store/abstract" {
+    import type { AnyStore } from 'nanostores';
+    global {
+        interface Window {
+            storeLogger: any;
+        }
+    }
+    /**
+     * An abstract store is a wrapper for third-party stores,
+     * providing developers with a consistent interface inspired
+     * by the "nanostore" pattern. This simplifies
+     * interactions with different storage systems.
+     */
+    export abstract class AbstractStore<T extends AnyStore> {
+        /**
+         * store instance (nanostores)
+         */
+        protected readonly store: T;
+        protected readonly name: string;
+        constructor(store: T, name: string);
+        /**
+         * return store instance
+         */
+        getStore(): T;
+        /**
+         * get all store values
+         */
+        abstract getValues(): unknown;
+        /**
+         * get store value by key
+         */
+        abstract getValue(...args: unknown[]): unknown;
+        /**
+         * subsribe directly to store changes
+         */
+        abstract subscribe(...args: unknown[]): void;
+        /**
+         * unsubsribe directly to store change
+         */
+        abstract unsubscribe(): void;
+    }
+    /**
+     * Merge multiple stores into a single instance using a single
+     * subscribe handler, leveraging the `useStore` method from `@nanostores/react` for React subscriptions.
+     */
+    export const mergeStores: <T extends Record<string, AbstractStore<AnyStore>>, K = { [Index in keyof T]: ReturnType<T[Index]["getStore"]>["value"]; }>(stores: T) => import("nanostores").ReadableAtom<K>;
+}
+declare module "packages/sdk-web-interfaces/src/store/map" {
+    import type { MapStoreKeys, MapStore as NMapStore } from 'nanostores';
+    import { AbstractStore } from "packages/sdk-web-interfaces/src/store/abstract";
+    /**
+     * Wrapper for nanostores MapStore
+     */
+    export class MapStore<StoreInterface extends object, StoreInstance extends NMapStore<StoreInterface> = NMapStore<StoreInterface>> extends AbstractStore<StoreInstance> {
+        getValues: () => StoreInterface;
+        getValue: (key: MapStoreKeys<StoreInstance>) => StoreInterface[MapStoreKeys<StoreInstance>];
+        setValue: <Key extends MapStoreKeys<StoreInstance>>(path: Key, value: StoreInterface[Key]) => void;
+        subscribe: StoreInstance['subscribe'];
+        unsubscribe: () => void;
+    }
+    /**
+     * create map store from nanostores
+     */
+    export const createMapStore: <Data extends object>(initialData: Data) => NMapStore<Data>;
+    export type MapStoreListeners<StoreInstance extends NMapStore<StoreInterface>, StoreInterface extends object> = {
+        [T in MapStoreKeys<StoreInstance>]: (value: StoreInterface[T]) => void;
     };
-    export const Onboarding: React.FC<OnboardingType>;
 }
-declare module "packages/sdk-web-types/src/sl-types" {
+declare module "packages/sdk-web-interfaces/src/feature" {
+    import { SdkOverlay, SdkOverlaySettings } from '@streamlayer/sl-eslib/sdkSettings/sdkSettings.common_pb';
     import { PlainMessage } from '@bufbuild/protobuf';
-    import type { StreamSettings as SLStreamSettings, SdkOverlay, Advertising, OrganizationSettings as SLOrganizationSettings } from '@streamlayer/sl-eslib/sdkSettings/sdkSettings.common_pb';
-    import type { ClientSettings } from '@streamlayer/sl-eslib/sdkSettings/client/client_pb';
-    import type { UserAttributes } from '@streamlayer/sl-eslib/users/users_common_pb';
-    export { QuestionType, QuestionStatus } from '@streamlayer/sl-eslib/interactive/interactive.common_pb';
-    import type { PickHistory as IPickHistory } from '@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb';
-    export { PickHistoryStatus } from '@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb';
-    export type PickHistory = PlainMessage<IPickHistory>;
-    export type OrganizationSettings = SLOrganizationSettings;
-    export type OrganizationAdvertising = Advertising;
-    export type FeatureConfig = SdkOverlay;
-    export type StreamSettings = SLStreamSettings;
-    export type User = UserAttributes;
-    export type UserSettings = ClientSettings;
-    export { SdkOverlayType as FeatureType } from '@streamlayer/sl-eslib/sdkSettings/sdkSettings.common_pb';
-}
-declare module "packages/sdk-web-types/src/index" {
-    export * from "packages/sdk-web-types/src/sl-types";
-}
-declare module "packages/react-ui/src/lib/gamification/question/styles" {
-    export const Panel: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const QuestionTypeIconWrap: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const QuestionTypeIcon: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
-    export const QuestionContent: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const QuestionTypeLabel: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const QuestionSubject: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const QuestionActionTitle: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-    export const QuestionActionIcon: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-    export const QuestionStatusIcon: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
-    export const QuestionTypeTitle: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-    export const ExpiredQuestion: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-}
-declare module "packages/react-ui/src/lib/gamification/question/index" {
-    import { type PickHistory } from "packages/sdk-web-types/src/index";
-    export const Question: React.FC<{
-        openQuestion?: (questionId: string) => void;
-    } & PickHistory>;
-}
-declare module "packages/react-ui/src/lib/gamification/question-list/styles" {
-    export const Container: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const Title: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const ItemsContainer: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-}
-declare module "packages/react-ui/src/lib/gamification/question-list/index" {
-    import type { PickHistory } from '@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb';
-    interface QuestionListProps {
-        questions: PickHistory[];
-        openQuestion: (questionId: string) => void;
+    import { WritableAtom } from 'nanostores';
+    import { MapStore } from "packages/sdk-web-interfaces/src/store/map";
+    type FeatureListener = {
+        name: string;
+        enabled: boolean;
+        onEvent: (...args: unknown[]) => void;
+    };
+    export type FeatureProps = PlainMessage<SdkOverlay>;
+    export enum FeatureSource {
+        ORGANIZATION = "ORGANIZATION",
+        STREAM = "STREAM"
     }
-    export const QuestionList: React.FC<QuestionListProps>;
-}
-declare module "packages/react-ui/src/utils/common" {
-    export const abbreviate: (name: string) => string;
-}
-declare module "packages/react-ui/src/lib/gamification/user-statistics/components/statistics/styles" {
-    export const Container: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const Indicator: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-}
-declare module "packages/react-ui/src/lib/gamification/user-statistics/components/statistics/index" {
-    interface StatisticsProps {
-        indicator: string | number;
-        title: 'Win streak' | 'Correct' | 'Incorrect' | 'Success rate';
+    type FeatureConfig = Omit<FeatureProps, 'settings'>;
+    type FeatureSettings = Exclude<PlainMessage<SdkOverlaySettings>['overlaySettings'], {
+        case: 'inplay';
+    } | {
+        case: 'getstream';
+    } | {
+        case: undefined;
+    }>;
+    export enum FeatureStatus {
+        Ready = "ready",
+        Suspended = "suspended"
+    }
+    export abstract class AbstractFeature<K extends FeatureSettings['case'] | undefined, C extends FeatureSettings['value'] = FeatureSettings['value']> {
+        status: WritableAtom<FeatureStatus>;
+        source: FeatureSource;
+        protected config: MapStore<FeatureConfig>;
+        protected settings: MapStore<C>;
+        protected listeners: Set<FeatureListener>;
+        protected settingsKey: K;
+        constructor({ settings, ...config }: FeatureProps, source: FeatureSource);
+        get featureConfig(): import("nanostores").MapStore<FeatureConfig>;
+        get featureSettings(): import("nanostores").MapStore<C>;
+        registerEventListener(listener: FeatureListener): void;
+        enable: () => void;
+        disable: () => void;
+        setFeatureConfig: ({ settings, ...config }: FeatureProps) => void;
+        update: (config: FeatureProps, source: FeatureSource) => void;
+        protected fireEvent(event: unknown): void;
     }
-    export const Statistics: React.FC<StatisticsProps>;
 }
-declare module "packages/react-ui/src/lib/gamification/user-statistics/components/rank/styles" {
-    export const Container: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const Title: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const Indicator: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-}
-declare module "packages/react-ui/src/lib/gamification/user-statistics/components/rank/index" {
-    interface RankProps {
-        indicator: string | number;
-        title: 'Friens rank' | 'Global rank';
+declare module "packages/sdk-web-interfaces/src/store/single" {
+    import type { WritableAtom } from 'nanostores';
+    import { AbstractStore } from "packages/sdk-web-interfaces/src/store/abstract";
+    /**
+     * Wrapper for nanostores WritableAtom
+     */
+    export class SingleStore<StoreValue, StoreInstance extends WritableAtom<StoreValue | undefined> = WritableAtom<StoreValue | undefined>> extends AbstractStore<StoreInstance> {
+        getValue: () => StoreInstance['value'];
+        getValues(): unknown;
+        setValue: (value?: StoreValue) => void;
+        subscribe: (listener: Parameters<StoreInstance['subscribe']>[0]) => () => void;
+        unsubscribe: () => void;
+        listen(listener: Parameters<StoreInstance['subscribe']>[0]): () => void;
+        get(): StoreValue | undefined;
     }
-    export const Rank: React.FC<RankProps>;
-}
-declare module "packages/react-ui/src/lib/gamification/user-statistics/styles" {
-    export const Container: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const TopInfo: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const BottomInfo: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const User: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const Avatar: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
-    export const UserInfo: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const UserName: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const UserRating: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const TrophyIcon: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
-    export const Rts: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const RtsIndicator: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const Top: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const Ranks: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const AvatarPlaceholder: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const UserAccountBtn: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+    /**
+     * create atom store from nanostores
+     */
+    export const createSingleStore: <T>(initialData?: T | undefined) => WritableAtom<T | undefined>;
 }
-declare module "packages/react-ui/src/lib/gamification/user-statistics/index" {
-    interface UserStatisticsProps {
-        avatar: string;
-        name: string;
-        points: number;
-        grade: string;
-        friendsRank: number;
-        globalRank: number;
-        winStreak: number;
-        correct: number;
-        incorrect: number;
-        successRate?: number;
-        toggleAccountPage: (flag: boolean) => void;
+declare module "packages/sdk-web-interfaces/src/store/api" {
+    import type { FetcherStore } from '@nanostores/query';
+    import { WritableAtom } from 'nanostores';
+    import { AbstractStore } from "packages/sdk-web-interfaces/src/store/abstract";
+    /**
+     * Wrapper for @nanostores/query FetcherStore
+     */
+    export class ApiStore<StoreValue, StoreInstance extends FetcherStore<StoreValue | undefined> = FetcherStore<StoreValue | undefined>> extends AbstractStore<StoreInstance> {
+        private readonly atomStore;
+        constructor(store: StoreInstance, name: string, atomPicker?: (val?: StoreInstance['value']) => string | undefined);
+        getAtomStore: () => WritableAtom<string | undefined>;
+        getValue: () => Promise<StoreValue | undefined>;
+        getValues: () => never;
+        setValue: (value?: StoreInstance['value']) => void;
+        subscribe: StoreInstance['subscribe'];
+        unsubscribe: () => never;
+        invalidate: () => void;
+        listen: (cb: Parameters<FetcherStore['listen']>[0]) => () => void;
+        get(): void;
+        key: () => string | undefined;
+        off: () => void;
     }
-    export const UserStatistics: React.FC<UserStatisticsProps>;
-}
-declare module "packages/react-ui/src/lib/gamification/vote/components/voting-option/styles" {
-    export const Container: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    } & {
-        questionAnswered: boolean;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const AnsweredContainer: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    } & {
-        questionAnswered: boolean;
-    } & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-        theme?: import("@emotion/react").Theme | undefined;
-    } & {
-        answeredCorrect: boolean;
-    }, {}, {}>;
-    export const ButtonPct: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const Button: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-    export const Icon: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
-    export const Title: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-    export const Indicators: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-    export const CheckIconWrap: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const Percentage: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const CheckIcon: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 }
-declare module "packages/react-ui/src/lib/gamification/vote/components/voting-option/index" {
-    interface VotingOptionProps {
-        icon: string;
-        title: string;
-        id: string;
-        questionId: string;
-        percentage: number;
-        disabled: boolean;
-        correct: boolean;
-        questionAnswered: boolean;
-        hasCorrectAnswer: boolean;
-        answered: boolean;
-        onVote: (questionId: string, answerId: string) => void;
-        toggleIsLoadingSubmitAnswer: (flag: boolean) => void;
+declare module "packages/sdk-web-interfaces/src/index" {
+    export { AbstractAuthenticationProvider } from "packages/sdk-web-interfaces/src/auth";
+    export { AbstractFeature, FeatureSource, type FeatureProps, FeatureStatus } from "packages/sdk-web-interfaces/src/feature";
+    export { MapStore, createMapStore } from "packages/sdk-web-interfaces/src/store/map";
+    export type { MapStoreListeners } from "packages/sdk-web-interfaces/src/store/map";
+    export { SingleStore, createSingleStore } from "packages/sdk-web-interfaces/src/store/single";
+    export { AbstractStore, mergeStores } from "packages/sdk-web-interfaces/src/store/abstract";
+    export { ApiStore } from "packages/sdk-web-interfaces/src/store/api";
+    export interface StreamLayerSDK {
     }
-    export const VotingOption: React.FC<VotingOptionProps>;
-}
-declare module "packages/react-ui/src/lib/gamification/vote/styles" {
-    export const Container: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const Title: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const Options: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const Loader: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const Feedback: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const FeedbackIcon: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
-    export const FeedbackTitle: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const FeedbackDescription: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-}
-declare module "packages/react-ui/src/lib/gamification/vote/index" {
-    import { QuestionType } from "packages/sdk-web-types/src/index";
-    interface VoteProps {
-        title: string;
-        questionId: string;
-        options: any[];
-        questionType: QuestionType;
-        feedbackMessages: any;
-        questionAnswered: boolean;
-        questionAnsweredCorrectly?: boolean;
+    export interface StreamLayerContext {
+        sdk: StreamLayerSDK;
     }
-    export const Vote: React.FC<VoteProps>;
+    type DoneFn = Function;
+    export type StreamLayerPlugin = (instance: StreamLayerContext, opts: unknown, done: DoneFn) => void;
 }
-declare module "packages/sdk-web-interfaces/src/auth" {
-    export abstract class AbstractAuthenticationProvider {
-        abstract login(...args: unknown[]): Promise<unknown>;
-        abstract logout(): void;
-        abstract me(): Promise<unknown>;
-        abstract isAuthenticated(): Promise<unknown>;
-    }
-}
-declare module "packages/sdk-web-interfaces/src/store/abstract" {
-    import type { AnyStore } from 'nanostores';
-    global {
-        interface Window {
-            storeLogger: any;
-        }
-    }
-    /**
-     * An abstract store is a wrapper for third-party stores,
-     * providing developers with a consistent interface inspired
-     * by the "nanostore" pattern. This simplifies
-     * interactions with different storage systems.
-     */
-    export abstract class AbstractStore<T extends AnyStore> {
-        /**
-         * store instance (nanostores)
-         */
-        protected readonly store: T;
-        protected readonly name: string;
-        constructor(store: T, name: string);
-        /**
-         * return store instance
-         */
-        getStore(): T;
-        /**
-         * get all store values
-         */
-        abstract getValues(): unknown;
-        /**
-         * get store value by key
-         */
-        abstract getValue(...args: unknown[]): unknown;
-        /**
-         * subsribe directly to store changes
-         */
-        abstract subscribe(...args: unknown[]): void;
-        /**
-         * unsubsribe directly to store change
-         */
-        abstract unsubscribe(): void;
-    }
-    /**
-     * Merge multiple stores into a single instance using a single
-     * subscribe handler, leveraging the `useStore` method from `@nanostores/react` for React subscriptions.
-     */
-    export const mergeStores: <T extends Record<string, AbstractStore<AnyStore>>, K = { [Index in keyof T]: ReturnType<T[Index]["getStore"]>["value"]; }>(stores: T) => import("nanostores").ReadableAtom<K>;
-}
-declare module "packages/sdk-web-interfaces/src/store/map" {
-    import type { MapStoreKeys, MapStore as NMapStore } from 'nanostores';
-    import { AbstractStore } from "packages/sdk-web-interfaces/src/store/abstract";
-    /**
-     * Wrapper for nanostores MapStore
-     */
-    export class MapStore<StoreInterface extends object, StoreInstance extends NMapStore<StoreInterface> = NMapStore<StoreInterface>> extends AbstractStore<StoreInstance> {
-        getValues: () => StoreInterface;
-        getValue: (key: MapStoreKeys<StoreInstance>) => StoreInterface[MapStoreKeys<StoreInstance>];
-        setValue: <Key extends MapStoreKeys<StoreInstance>>(path: Key, value: StoreInterface[Key]) => void;
-        subscribe: StoreInstance['subscribe'];
-        unsubscribe: () => void;
-    }
-    /**
-     * create map store from nanostores
-     */
-    export const createMapStore: <Data extends object>(initialData: Data) => NMapStore<Data>;
-    export type MapStoreListeners<StoreInstance extends NMapStore<StoreInterface>, StoreInterface extends object> = {
-        [T in MapStoreKeys<StoreInstance>]: (value: StoreInterface[T]) => void;
-    };
-}
-declare module "packages/sdk-web-interfaces/src/feature" {
-    import { SdkOverlay, SdkOverlaySettings } from '@streamlayer/sl-eslib/sdkSettings/sdkSettings.common_pb';
-    import { PlainMessage } from '@bufbuild/protobuf';
-    import { WritableAtom } from 'nanostores';
-    import { MapStore } from "packages/sdk-web-interfaces/src/store/map";
-    type FeatureListener = {
-        name: string;
-        enabled: boolean;
-        onEvent: (...args: unknown[]) => void;
-    };
-    export type FeatureProps = PlainMessage<SdkOverlay>;
-    export enum FeatureSource {
-        ORGANIZATION = "ORGANIZATION",
-        STREAM = "STREAM"
-    }
-    type FeatureConfig = Omit<FeatureProps, 'settings'>;
-    type FeatureSettings = Exclude<PlainMessage<SdkOverlaySettings>['overlaySettings'], {
-        case: 'inplay';
-    } | {
-        case: 'getstream';
-    } | {
-        case: undefined;
-    }>;
-    export enum FeatureStatus {
-        Ready = "ready",
-        Suspended = "suspended"
-    }
-    export abstract class AbstractFeature<K extends FeatureSettings['case'] | undefined, C extends FeatureSettings['value'] = FeatureSettings['value']> {
-        status: WritableAtom<FeatureStatus>;
-        source: FeatureSource;
-        protected config: MapStore<FeatureConfig>;
-        protected settings: MapStore<C>;
-        protected listeners: Set<FeatureListener>;
-        protected settingsKey: K;
-        constructor({ settings, ...config }: FeatureProps, source: FeatureSource);
-        get featureConfig(): import("nanostores").MapStore<FeatureConfig>;
-        get featureSettings(): import("nanostores").MapStore<C>;
-        registerEventListener(listener: FeatureListener): void;
-        enable: () => void;
-        disabled: () => void;
-        setFeatureConfig: ({ settings, ...config }: FeatureProps) => void;
-        update: (config: FeatureProps, source: FeatureSource) => void;
-        protected fireEvent(event: unknown): void;
-    }
-}
-declare module "packages/sdk-web-interfaces/src/store/single" {
-    import type { WritableAtom } from 'nanostores';
-    import { AbstractStore } from "packages/sdk-web-interfaces/src/store/abstract";
-    /**
-     * Wrapper for nanostores WritableAtom
-     */
-    export class SingleStore<StoreValue, StoreInstance extends WritableAtom<StoreValue | undefined> = WritableAtom<StoreValue | undefined>> extends AbstractStore<StoreInstance> {
-        getValue: () => StoreInstance['value'];
-        getValues(): unknown;
-        setValue: (value?: StoreValue) => void;
-        subscribe: (listener: Parameters<StoreInstance['subscribe']>[0]) => () => void;
-        unsubscribe: () => void;
-        listen(listener: Parameters<StoreInstance['subscribe']>[0]): () => void;
-        get(): StoreValue | undefined;
-    }
-    /**
-     * create atom store from nanostores
-     */
-    export const createSingleStore: <T>(initialData?: T | undefined) => WritableAtom<T | undefined>;
-}
-declare module "packages/sdk-web-interfaces/src/store/api" {
-    import type { FetcherStore } from '@nanostores/query';
-    import { WritableAtom } from 'nanostores';
-    import { AbstractStore } from "packages/sdk-web-interfaces/src/store/abstract";
-    /**
-     * Wrapper for @nanostores/query FetcherStore
-     */
-    export class ApiStore<StoreValue, StoreInstance extends FetcherStore<StoreValue | undefined> = FetcherStore<StoreValue | undefined>> extends AbstractStore<StoreInstance> {
-        private readonly atomStore;
-        constructor(store: StoreInstance, name: string, atomPicker?: (val?: StoreInstance['value']) => string | undefined);
-        getAtomStore: () => WritableAtom<string | undefined>;
-        getValue: () => Promise<StoreValue | undefined>;
-        getValues: () => never;
-        setValue: (value?: StoreInstance['value']) => void;
-        subscribe: StoreInstance['subscribe'];
-        unsubscribe: () => never;
-        invalidate: () => void;
-        listen: (cb: Parameters<FetcherStore['listen']>[0]) => () => void;
-        get(): void;
-        key: () => string | undefined;
-        off: () => void;
-    }
-}
-declare module "packages/sdk-web-interfaces/src/index" {
-    export { AbstractAuthenticationProvider } from "packages/sdk-web-interfaces/src/auth";
-    export { AbstractFeature, FeatureSource, type FeatureProps } from "packages/sdk-web-interfaces/src/feature";
-    export { MapStore, createMapStore } from "packages/sdk-web-interfaces/src/store/map";
-    export type { MapStoreListeners } from "packages/sdk-web-interfaces/src/store/map";
-    export { SingleStore, createSingleStore } from "packages/sdk-web-interfaces/src/store/single";
-    export { AbstractStore, mergeStores } from "packages/sdk-web-interfaces/src/store/abstract";
-    export { ApiStore } from "packages/sdk-web-interfaces/src/store/api";
-    export interface StreamLayerSDK {
-    }
-    export interface StreamLayerContext {
-        sdk: StreamLayerSDK;
-    }
-    type DoneFn = Function;
-    export type StreamLayerPlugin = (instance: StreamLayerContext, opts: unknown, done: DoneFn) => void;
-}
-declare module "packages/sdk-web-api/src/utils/devtools" {
-    export const __GRPC_DEVTOOLS_EXTENSION__: any;
+declare module "packages/sdk-web-api/src/utils/devtools" {
+    export const __GRPC_DEVTOOLS_EXTENSION__: any;
 }
 declare module "packages/sdk-web-api/src/grpc/transport" {
     import { createRouterTransport, ConnectRouter, Interceptor, PromiseClient, CallbackClient, UnaryRequest, StreamRequest } from '@connectrpc/connect';
@@ -882,6 +529,26 @@ declare module "packages/sdk-web-api/src/index" {
         host: string;
     }, done: () => void) => void;
 }
+declare module "packages/sdk-web-types/src/sl-types" {
+    import { PlainMessage } from '@bufbuild/protobuf';
+    import type { StreamSettings as SLStreamSettings, SdkOverlay, Advertising, OrganizationSettings as SLOrganizationSettings } from '@streamlayer/sl-eslib/sdkSettings/sdkSettings.common_pb';
+    import type { ClientSettings } from '@streamlayer/sl-eslib/sdkSettings/client/client_pb';
+    import type { UserAttributes } from '@streamlayer/sl-eslib/users/users_common_pb';
+    export { QuestionType, QuestionStatus } from '@streamlayer/sl-eslib/interactive/interactive.common_pb';
+    import type { PickHistory as IPickHistory } from '@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb';
+    export { PickHistoryStatus } from '@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb';
+    export type PickHistory = PlainMessage<IPickHistory>;
+    export type OrganizationSettings = SLOrganizationSettings;
+    export type OrganizationAdvertising = Advertising;
+    export type FeatureConfig = SdkOverlay;
+    export type StreamSettings = SLStreamSettings;
+    export type User = UserAttributes;
+    export type UserSettings = ClientSettings;
+    export { SdkOverlayType as FeatureType } from '@streamlayer/sl-eslib/sdkSettings/sdkSettings.common_pb';
+}
+declare module "packages/sdk-web-types/src/index" {
+    export * from "packages/sdk-web-types/src/sl-types";
+}
 declare module "packages/feature-gamification/src/queries/leaderboard" {
     import type { Transport } from "packages/sdk-web-api/src/index";
     import { ReadableAtom } from 'nanostores';
@@ -1184,56 +851,532 @@ declare module "packages/feature-gamification/src/queries/index" {
     export const $pickHistory: (slStreamId: ReadableAtom<string | undefined>, transport: Transport) => import("@nanostores/query").FetcherStore<(import("@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb").PickHistory | undefined)[] | undefined, any>;
     export { $userSummary } from "packages/feature-gamification/src/queries/leaderboard";
 }
-declare module "packages/feature-gamification/src/queries/actions" {
-    import type { Transport } from "packages/sdk-web-api/src/index";
-    export const submitAnswer: (transport: Transport, data: {
+declare module "packages/feature-gamification/src/queries/actions" {
+    import type { Transport } from "packages/sdk-web-api/src/index";
+    export const submitAnswer: (transport: Transport, data: {
+        questionId: string;
+        answerId: string;
+    }) => Promise<import("@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb").SubmitAnswerResponse>;
+    export const submitInplay: (transport: Transport, eventId: string) => Promise<import("@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb").SubmitInplayResponse>;
+    export const skipQuestion: (transport: Transport, questionId: string) => Promise<import("@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb").SkipQuestionResponse>;
+}
+declare module "packages/feature-gamification/src/index" {
+    import { AbstractFeature, ApiStore, FeatureSource, type FeatureProps } from "packages/sdk-web-interfaces/src/index";
+    import type { GetApiResponseType } from "packages/sdk-web-api/src/index";
+    type StreamLayerContext = any;
+    import type { PlainMessage } from '@bufbuild/protobuf';
+    import type { GamesOverlaySettings } from '@streamlayer/sl-eslib/sdkSettings/sdkSettings.common_pb';
+    import { ReadableAtom, WritableAtom } from 'nanostores';
+    import * as queries from "packages/feature-gamification/src/queries/index";
+    export class Gamification extends AbstractFeature<'games', PlainMessage<GamesOverlaySettings>> {
+        userSummary?: ApiStore<GetApiResponseType<typeof queries.$userSummary>>;
+        questions?: ApiStore<GetApiResponseType<typeof queries.$pickHistory>>;
+        leaderboardId: WritableAtom<string | undefined>;
+        slStreamId: ReadableAtom<string | undefined>;
+        userId: ReadableAtom<string | undefined>;
+        organizationId: ReadableAtom<string | undefined>;
+        openedQuestionId: WritableAtom<string | undefined>;
+        openedQuestion?: ApiStore<GetApiResponseType<typeof queries.$questionByUser>>;
+        activeQuestionId?: ApiStore<GetApiResponseType<typeof queries.$activeQuestion>>;
+        moderationId: ReadableAtom<string | undefined>;
+        feedId: ReadableAtom<string | undefined>;
+        onbordingComplete: WritableAtom<boolean | undefined>;
+        private notifications;
+        private transport;
+        private questionSubscription?;
+        private feedSubscription?;
+        constructor(config: FeatureProps, source: FeatureSource, instance: StreamLayerContext);
+        showOnbordingInApp: (onbordingComplete: boolean) => void;
+        getCurrentSessionIdPrefix: (opts: {
+            prefix?: string;
+            userId?: string;
+            eventId?: string;
+            organizationId?: string;
+        }) => string;
+        connect: (transport: StreamLayerContext['transport']) => void;
+        disconnect: () => void;
+        submitInplay: () => Promise<void>;
+        submitAnswer: (questionId: string, answerId: string) => Promise<void>;
+        skipQuestion: (questionId: string) => Promise<void>;
+        openQuestion: (questionId: string) => void;
+        closeQuestion: () => void;
+    }
+}
+declare module "packages/react-ui/src/lib/gamification/onboarding/styles" {
+    export const Container: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const Content: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const OnboardingHeader: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const LeftBlock: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const RightBlock: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const GameIcon: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+    export const SponsorLogo: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+    export const CloseBtn: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+    export const IconClose: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+    export const OnboardingActionBtn: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+}
+declare module "packages/react-ui/src/lib/gamification/onboarding/components/onboarding-slides/onboarding-instructions/styles" {
+    export const Container: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const Content: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const Graphic: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+    export const Headline: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}
+declare module "packages/react-ui/src/lib/gamification/onboarding/components/onboarding-slides/onboarding-instructions/index" {
+    type OnboardingInstructionsProps = {
+        graphic: string;
+        headline: string;
+    };
+    export const OnboardingInstructions: React.FC<OnboardingInstructionsProps>;
+}
+declare module "packages/react-ui/src/lib/gamification/onboarding/components/onboarding-slides/onboarding-rules/styles" {
+    export const Container: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const Title: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const RulesList: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const RulesItem: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const RuleNumber: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & {
+        bgColor?: string | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const RuleText: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}
+declare module "packages/react-ui/src/lib/gamification/onboarding/components/onboarding-slides/onboarding-rules/index" {
+    type OnboardingRulesProps = {
+        rules?: string[];
+        rulesTitle?: string;
+        primaryColor?: string;
+    };
+    export const OnboardingRules: React.FC<OnboardingRulesProps>;
+}
+declare module "packages/react-ui/src/lib/gamification/onboarding/components/onboarding-slides/onboarding-invite-card/styles" {
+    export const Container: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const Content: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const InviteGameIconWrap: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & {
+        bgColor?: string | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const InviteGameIcon: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+    export const Heading: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const Subtext: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const InvateBtn: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & {
+        bgColor?: string | undefined;
+    }, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+}
+declare module "packages/react-ui/src/lib/gamification/onboarding/components/onboarding-slides/onboarding-invite-card/index" {
+    type OnboardingInviteCardProps = {
+        inviteCardTitle?: string;
+        inviteCardSubtext?: string;
+        primaryColor?: string;
+    };
+    export const OnboardingInviteCard: React.FC<OnboardingInviteCardProps>;
+}
+declare module "packages/react-ui/src/lib/gamification/onboarding/index" {
+    import type { Gamification } from "packages/feature-gamification/src/index";
+    type OnboardingType = {
+        gamification: Gamification;
+        closeFeature: () => void;
+        steps?: {
+            graphic: string;
+            headline: string;
+        }[];
+        gameIcon?: string;
+        sponsorLogo?: string;
+        rules?: string[];
+        rulesBtnLabel?: string;
+        rulesTitle?: string;
+        primaryColor?: string;
+        inviteCardTitle?: string;
+        inviteCardSubtext?: string;
+        inviteCardBtnLabel?: string;
+    };
+    export const Onboarding: React.FC<OnboardingType>;
+}
+declare module "packages/react-ui/src/lib/gamification/question/styles" {
+    export const Panel: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const QuestionTypeIconWrap: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const QuestionTypeIcon: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+    export const QuestionContent: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const QuestionTypeLabel: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const QuestionSubject: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const QuestionActionTitle: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+    export const QuestionActionIcon: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+    export const QuestionStatusIcon: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+    export const QuestionTypeTitle: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+    export const ExpiredQuestion: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+}
+declare module "packages/react-ui/src/lib/gamification/question/index" {
+    import { type PickHistory } from "packages/sdk-web-types/src/index";
+    export const Question: React.FC<{
+        openQuestion?: (questionId: string) => void;
+    } & PickHistory>;
+}
+declare module "packages/react-ui/src/lib/gamification/question-list/styles" {
+    export const Container: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const Title: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const ItemsContainer: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}
+declare module "packages/react-ui/src/lib/gamification/question-list/index" {
+    import type { PickHistory } from '@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb';
+    interface QuestionListProps {
+        questions: PickHistory[];
+        openQuestion: (questionId: string) => void;
+    }
+    export const QuestionList: React.FC<QuestionListProps>;
+}
+declare module "packages/react-ui/src/utils/common" {
+    export const abbreviate: (name: string) => string;
+}
+declare module "packages/react-ui/src/lib/gamification/user-statistics/components/statistics/styles" {
+    export const Container: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const Indicator: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}
+declare module "packages/react-ui/src/lib/gamification/user-statistics/components/statistics/index" {
+    interface StatisticsProps {
+        indicator: string | number;
+        title: 'Win streak' | 'Correct' | 'Incorrect' | 'Success rate';
+    }
+    export const Statistics: React.FC<StatisticsProps>;
+}
+declare module "packages/react-ui/src/lib/gamification/user-statistics/components/rank/styles" {
+    export const Container: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const Title: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const Indicator: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}
+declare module "packages/react-ui/src/lib/gamification/user-statistics/components/rank/index" {
+    interface RankProps {
+        indicator: string | number;
+        title: 'Friens rank' | 'Global rank';
+    }
+    export const Rank: React.FC<RankProps>;
+}
+declare module "packages/react-ui/src/lib/gamification/user-statistics/styles" {
+    export const Container: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const TopInfo: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const BottomInfo: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const User: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const Avatar: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+    export const UserInfo: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const UserName: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const UserRating: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const TrophyIcon: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+    export const Rts: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const RtsIndicator: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const Top: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const Ranks: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const AvatarPlaceholder: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const UserAccountBtn: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+}
+declare module "packages/react-ui/src/lib/gamification/user-statistics/index" {
+    interface UserStatisticsProps {
+        avatar: string;
+        name: string;
+        points: number;
+        grade: string;
+        friendsRank: number;
+        globalRank: number;
+        winStreak: number;
+        correct: number;
+        incorrect: number;
+        successRate?: number;
+    }
+    export const UserStatistics: React.FC<UserStatisticsProps>;
+}
+declare module "packages/react-ui/src/lib/gamification/vote/components/voting-option/styles" {
+    export const Container: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & {
+        questionAnswered: boolean;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const AnsweredContainer: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & {
+        questionAnswered: boolean;
+    } & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+        theme?: import("@emotion/react").Theme | undefined;
+    } & {
+        answeredCorrect: boolean;
+    }, {}, {}>;
+    export const ButtonPct: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const Button: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+    export const Icon: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+    export const Title: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+    export const Indicators: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+    export const CheckIconWrap: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const Percentage: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const CheckIcon: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+}
+declare module "packages/react-ui/src/lib/gamification/vote/components/voting-option/index" {
+    interface VotingOptionProps {
+        icon: string;
+        title: string;
+        id: string;
         questionId: string;
-        answerId: string;
-    }) => Promise<import("@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb").SubmitAnswerResponse>;
-    export const submitInplay: (transport: Transport, eventId: string) => Promise<import("@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb").SubmitInplayResponse>;
-    export const skipQuestion: (transport: Transport, questionId: string) => Promise<import("@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb").SkipQuestionResponse>;
+        percentage: number;
+        disabled: boolean;
+        correct: boolean;
+        questionAnswered: boolean;
+        hasCorrectAnswer: boolean;
+        answered: boolean;
+        onVote: (questionId: string, answerId: string) => void;
+        toggleIsLoadingSubmitAnswer: (flag: boolean) => void;
+    }
+    export const VotingOption: React.FC<VotingOptionProps>;
 }
-declare module "packages/feature-gamification/src/index" {
-    import { AbstractFeature, ApiStore, FeatureSource, type FeatureProps } from "packages/sdk-web-interfaces/src/index";
-    import type { GetApiResponseType } from "packages/sdk-web-api/src/index";
-    type StreamLayerContext = any;
-    import type { PlainMessage } from '@bufbuild/protobuf';
-    import type { GamesOverlaySettings } from '@streamlayer/sl-eslib/sdkSettings/sdkSettings.common_pb';
-    import { ReadableAtom, WritableAtom } from 'nanostores';
-    import * as queries from "packages/feature-gamification/src/queries/index";
-    export class Gamification extends AbstractFeature<'games', PlainMessage<GamesOverlaySettings>> {
-        userSummary?: ApiStore<GetApiResponseType<typeof queries.$userSummary>>;
-        questions?: ApiStore<GetApiResponseType<typeof queries.$pickHistory>>;
-        leaderboardId: WritableAtom<string | undefined>;
-        slStreamId: ReadableAtom<string | undefined>;
-        userId: ReadableAtom<string | undefined>;
-        organizationId: ReadableAtom<string | undefined>;
-        openedQuestionId: WritableAtom<string | undefined>;
-        openedQuestion?: ApiStore<GetApiResponseType<typeof queries.$questionByUser>>;
-        activeQuestionId?: ApiStore<GetApiResponseType<typeof queries.$activeQuestion>>;
-        moderationId: ReadableAtom<string | undefined>;
-        feedId: ReadableAtom<string | undefined>;
-        onbordingComplete: WritableAtom<boolean | undefined>;
-        private notifications;
-        private transport;
-        constructor(config: FeatureProps, source: FeatureSource, instance: StreamLayerContext);
-        getCurrentSessionIdPrefix: (opts: {
-            prefix?: string;
-            userId?: string;
-            eventId?: string;
-            organizationId?: string;
-        }) => string;
-        connect: (transport: StreamLayerContext['transport']) => void;
-        submitInplay: () => Promise<void>;
-        submitAnswer: (questionId: string, answerId: string) => Promise<void>;
-        skipQuestion: (questionId: string) => Promise<void>;
-        openQuestion: (questionId: string) => void;
-        closeQuestion: () => void;
+declare module "packages/react-ui/src/lib/gamification/vote/styles" {
+    export const Container: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const Title: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const Options: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const Loader: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const Feedback: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const FeedbackIcon: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+    export const FeedbackTitle: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const FeedbackDescription: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}
+declare module "packages/react-ui/src/lib/gamification/vote/index" {
+    import { QuestionType } from "packages/sdk-web-types/src/index";
+    interface VoteProps {
+        title: string;
+        questionId: string;
+        options: any[];
+        questionType: QuestionType;
+        feedbackMessages: any;
+        questionAnswered: boolean;
+        questionAnsweredCorrectly?: boolean;
     }
+    export const Vote: React.FC<VoteProps>;
 }
 declare module "packages/sdk-web-features/src/index" {
     import { FeatureConfig } from "packages/sdk-web-types/src/index";
-    import { AbstractFeature, FeatureSource, FeatureProps, StreamLayerContext } from "packages/sdk-web-interfaces/src/index";
+    import { AbstractFeature, FeatureSource, FeatureProps, StreamLayerContext, SingleStore } from "packages/sdk-web-interfaces/src/index";
     import { Gamification } from "packages/feature-gamification/src/index";
     export class Feature extends AbstractFeature<undefined> {
     }
@@ -1246,9 +1389,13 @@ declare module "packages/sdk-web-features/src/index" {
             updateFeature: (overlay: FeatureProps, source: FeatureSource) => void;
             destroyFeature: (overlay: FeatureProps) => void;
             reinitializeFeatures: () => Promise<void>;
+            activeFeature: SingleStore<string>;
         }
         interface StreamLayerSDK {
             getFeatures: () => Map<string, Feature | Gamification>;
+            getActiveFeature: SingleStore<string>['getStore'];
+            openFeature: (featureName: string) => void;
+            closeFeature: () => void;
         }
     }
     export const features: (instance: StreamLayerContext, opts: unknown, done: () => void) => void;
@@ -1459,7 +1606,6 @@ declare module "packages/react-ui/src/lib/demo/components/UserSummary" {
     import type { Gamification } from "packages/feature-gamification/src/index";
     export const UserSummary: React.FC<{
         store: ReturnType<Exclude<Gamification['userSummary'], undefined>['getStore']>;
-        toggleAccountPage: (flag: boolean) => void;
     }>;
 }
 declare module "packages/react-ui/src/lib/demo/components/QuestionsList" {
@@ -1561,6 +1707,9 @@ declare module "packages/sdk-web-core/src/notifications/notifications" {
         autoHideDuration?: number;
         delay?: number;
         data?: T;
+        type?: string;
+        action?: (...args: unknown[]) => void;
+        close?: (...args: unknown[]) => void;
         id: string;
     };
     /**
@@ -1594,82 +1743,83 @@ declare module "packages/sdk-web-core/src/notifications/index" {
      */
     export const notifications: (instance: StreamLayerContext, opts: unknown, done: () => void) => void;
 }
-declare module "packages/react-ui/src/lib/demo/components/Notifications" {
-    import type { NotificationsStore } from "packages/sdk-web-core/src/notifications/index";
-    export const Notifications: React.FC<{
-        notificationsStore: NotificationsStore;
-        openQuestion: (questionId: string) => void;
-    }>;
-}
-declare module "packages/react-ui/src/lib/demo/components/InPlayGame" {
-    type InPlayGameType = {
-        action: () => void;
-    };
-    export const InPlayGame: React.FC<InPlayGameType>;
-}
-declare module "packages/react-ui/src/lib/user-account/styles" {
+declare module "packages/react-ui/src/lib/demo/notifications/components/onboarding-inapp/styles" {
     export const Container: import("@emotion/styled").StyledComponent<{
         theme?: import("@emotion/react").Theme | undefined;
         as?: import("react").ElementType<any> | undefined;
     }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const ContentWrap: import("@emotion/styled").StyledComponent<{
+    export const BackgroundBlock: import("@emotion/styled").StyledComponent<{
         theme?: import("@emotion/react").Theme | undefined;
         as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-    export const UserContainer: import("@emotion/styled").StyledComponent<{
+    } & {
+        graphicBg?: string | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const Icon: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+    export const ContentWrap: import("@emotion/styled").StyledComponent<{
         theme?: import("@emotion/react").Theme | undefined;
         as?: import("react").ElementType<any> | undefined;
     }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const UserAvatar: import("@emotion/styled").StyledComponent<{
+    export const SponsorLogo: import("@emotion/styled").StyledComponent<{
         theme?: import("@emotion/react").Theme | undefined;
         as?: import("react").ElementType<any> | undefined;
     }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
-    export const UserName: import("@emotion/styled").StyledComponent<{
+    export const SponsorText: import("@emotion/styled").StyledComponent<{
         theme?: import("@emotion/react").Theme | undefined;
         as?: import("react").ElementType<any> | undefined;
     }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-    export const BackBtn: import("@emotion/styled").StyledComponent<{
+    export const ContentTitle: import("@emotion/styled").StyledComponent<{
         theme?: import("@emotion/react").Theme | undefined;
         as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-    export const LogoutBtn: import("@emotion/styled").StyledComponent<{
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const ContentSubtitle: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    export const ActionBtn: import("@emotion/styled").StyledComponent<{
         theme?: import("@emotion/react").Theme | undefined;
         as?: import("react").ElementType<any> | undefined;
+    } & {
+        bgColor?: string | undefined;
     }, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-    export const LogoutIcon: import("@emotion/styled").StyledComponent<{
+    export const CloseBtn: import("@emotion/styled").StyledComponent<{
         theme?: import("@emotion/react").Theme | undefined;
         as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
-    export const AvatarPlaceholder: import("@emotion/styled").StyledComponent<{
+    }, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+    export const IconClose: import("@emotion/styled").StyledComponent<{
         theme?: import("@emotion/react").Theme | undefined;
         as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 }
-declare module "packages/react-ui/src/lib/user-account/index" {
-    import type { Gamification } from "packages/feature-gamification/src/index";
-    interface UserAccountProps {
-        store: ReturnType<Exclude<Gamification['userSummary'], undefined>['getStore']>;
-        toggleAccountPage: (flag: boolean) => void;
-        logout: () => void;
+declare module "packages/react-ui/src/lib/demo/notifications/components/onboarding-inapp/index" {
+    interface OnBoardingInAppProps {
+        onClose: () => void;
+        onPlay: () => void;
+        header?: string;
+        title?: string;
+        subtitle?: string;
+        graphicBg?: string;
+        icon?: string;
+        sponsorLogo?: string;
+        primaryColor?: string;
     }
-    export const UserAccount: React.FC<UserAccountProps>;
+    export const OnBoardingInApp: React.FC<OnBoardingInAppProps>;
 }
-declare module "packages/react-ui/src/lib/demo/components/Account" {
-    import type { Gamification } from "packages/feature-gamification/src/index";
-    type AccountProps = {
-        store: ReturnType<Exclude<Gamification['userSummary'], undefined>['getStore']>;
-        toggleAccountPage: (flag: boolean) => void;
-        logout: () => void;
-    };
-    export const Account: React.FC<AccountProps>;
+declare module "packages/react-ui/src/lib/demo/notifications/index" {
+    import type { StreamLayerSDK } from "packages/sdk-web-interfaces/src/index";
+    export const Notifications: React.FC<{
+        sdk: StreamLayerSDK;
+    }>;
 }
 declare module "packages/react-ui/src/lib/demo/components/index" {
     export { UserSummary } from "packages/react-ui/src/lib/demo/components/UserSummary";
     export { QuestionsList } from "packages/react-ui/src/lib/demo/components/QuestionsList";
     export { Question } from "packages/react-ui/src/lib/demo/components/Question";
-    export { Notifications } from "packages/react-ui/src/lib/demo/components/Notifications";
-    export { InPlayGame } from "packages/react-ui/src/lib/demo/components/InPlayGame";
-    export { Account } from "packages/react-ui/src/lib/demo/components/Account";
+    export { Notifications } from "packages/react-ui/src/lib/demo/notifications/index";
+    export { OnBoardingInApp } from "packages/react-ui/src/lib/demo/notifications/components/onboarding-inapp/index";
+    export { Onboarding } from "packages/react-ui/src/lib/gamification/onboarding/index";
 }
 declare module "packages/react-ui/src/lib/demo/styles" {
     export const DemoContainer: import("@emotion/styled").StyledComponent<{
@@ -1688,13 +1838,9 @@ declare module "packages/react-ui/src/lib/demo/styles" {
         theme?: import("@emotion/react").Theme | undefined;
         as?: import("react").ElementType<any> | undefined;
     }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    export const AccountContainer: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 }
 declare module "packages/react-ui/src/lib/demo/Gamification" {
-    import type { StreamLayerSDK } from "packages/sdk-web-interfaces/src/index";
+    import { type StreamLayerSDK } from "packages/sdk-web-interfaces/src/index";
     import type { Gamification } from "packages/feature-gamification/src/index";
     export const GamificationComponent: React.FC<{
         gamification: Gamification;
@@ -1718,7 +1864,7 @@ declare module "packages/react-ui/src/lib/demo/Login" {
     }>;
 }
 declare module "packages/react-ui/src/lib/demo/index" {
-    import type { StreamLayerSDK } from "packages/sdk-web-interfaces/src/index";
+    import { type StreamLayerSDK } from "packages/sdk-web-interfaces/src/index";
     export const Demo: React.FC<{
         sdk: StreamLayerSDK;
     }>;