@streamlayer/react-ui 1.0.0 → 1.1.0

package/lib/ui/navigation/button/styles.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
-export declare const SButton: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
-export declare const ButtonIcon: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
-export declare const ButtonLabel: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
-export declare const SelectedButton: import("@linaria/core").LinariaClassName;
-export declare const HoverIconState: import("@linaria/core").LinariaClassName;
-export declare const HoverIconLeaderboardState: import("@linaria/core").LinariaClassName;
+export declare const SButton: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
+export declare const ButtonIcon: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLSpanElement> & import('react').HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
+export declare const ButtonLabel: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLSpanElement> & import('react').HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
+export declare const SelectedButton: import('@linaria/core').LinariaClassName;
+export declare const HoverIconState: import('@linaria/core').LinariaClassName;
+export declare const HoverIconLeaderboardState: import('@linaria/core').LinariaClassName;

package/lib/ui/navigation/index.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { ButtonProps } from './button';
+
 export declare const Navigation: React.FC<{
     children: React.ReactElement<ButtonProps>[];
     className?: string;

package/lib/ui/navigation/masters.d.ts

@@ -1,6 +1,7 @@
-/// <reference types="react" />
-export declare const Navigation: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const NavigationItems: import("@linaria/react").WYWEvalMeta & import("react").FC<{
-    children: import("react").ReactElement<import("./button").ButtonProps, string | import("react").JSXElementConstructor<any>>[];
-    className?: string | undefined;
+export declare const Navigation: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const NavigationItems: {
+    __wyw_meta: unknown;
+} & import('react').FC<{
+    children: React.ReactElement<import('./button').ButtonProps>[];
+    className?: string;
 }>;

package/lib/ui/questions/insight/index.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 import { InsightHistory } from '@streamlayer/sdk-web-types';
 import { VideoPlayerProps } from '../../video-player';
+
 export type InsightContentProps = InsightHistory & {
     isDetail?: boolean;
     controlVideo: VideoPlayerProps['controlVideo'];

package/lib/ui/questions/insight/styles.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
-export declare const Container: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const Content: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const Title: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & Record<never, unknown>>;
-export declare const Description: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const Image: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
-export declare const ImageContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Container: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Content: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Title: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLHeadingElement> & import('react').HTMLAttributes<HTMLHeadingElement> & Record<never, unknown>>;
+export declare const Description: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Image: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLImageElement> & import('react').ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
+export declare const ImageContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/ui/questions/twitter/account/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type AccountProps = {
     image: string;
     name: string | undefined;

package/lib/ui/questions/twitter/account/styles.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
-export declare const Container: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const ImageContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const Image: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
+export declare const Container: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ImageContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Image: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLImageElement> & import('react').ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
 export declare const TwitterIcon: any;
-export declare const Details: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const Name: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const UserNameAndDate: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Details: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Name: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const UserNameAndDate: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/ui/questions/twitter/index.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 import { TweetHistory } from '@streamlayer/sdk-web-types';
 import { VideoPlayerProps } from '../../video-player';
+
 export type TwitterContentProps = TweetHistory & {
     isDetail?: boolean;
     controlVideo: VideoPlayerProps['controlVideo'];

package/lib/ui/questions/twitter/styles.d.ts

@@ -1,13 +1,16 @@
-/// <reference types="react" />
-export declare const Container: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const Details: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const Body: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const ImagesContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const ImagesBlock: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const Image: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
-export declare const ImageFullSize: import("@linaria/react").WYWEvalMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown> & {
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+export declare const Container: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Details: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Body: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ImagesContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ImagesBlock: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Image: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLImageElement> & import('react').ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
+export declare const ImageFullSize: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLImageElement> & import('react').ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown> & {
+    as?: import('react').ElementType;
 }>;
-export declare const ImageHalfSize: import("@linaria/react").WYWEvalMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown> & {
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+export declare const ImageHalfSize: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLImageElement> & import('react').ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown> & {
+    as?: import('react').ElementType;
 }>;

package/lib/ui/show-in/index.d.ts

@@ -1,4 +1,5 @@
-import React from 'react';
+import { default as React } from 'react';
+
 type ShowInProps = {
     children: React.ReactNode | React.ReactNode[];
     style?: React.CSSProperties;

package/lib/ui/skeleton/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type SkeletonProps = {
     style?: React.CSSProperties;
     children?: React.ReactNode;

package/lib/ui/skeleton/styles.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare const Container: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Container: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/ui/slide-in/index.d.ts

@@ -0,0 +1,11 @@
+type SlideInProps = {
+    children: React.ReactNode | React.ReactNode[];
+    direction: 'left' | 'right' | 'top' | 'bottom';
+    style?: React.CSSProperties;
+    className?: string;
+    enabled?: boolean;
+    hiding?: boolean;
+    onAnimationEnd?: React.AnimationEventHandler;
+};
+export declare const SlideIn: React.FC<SlideInProps>;
+export {};

package/lib/ui/slide-in/index.js

@@ -0,0 +1,29 @@
+import { jsx as m } from "react/jsx-runtime";
+import { cx as a } from "@linaria/core";
+import { styled as c } from "@linaria/react";
+const l = /* @__PURE__ */ c("div")({
+  name: "Container",
+  class: "c5b6wdg",
+  propsAsIs: !1
+}), d = {
+  left: "l1rlj479",
+  right: "r35f1di",
+  top: "tj4471g",
+  bottom: "b12050d8"
+}, f = "h1d5ybek", h = ({
+  children: o,
+  style: i,
+  className: n,
+  enabled: t = !0,
+  hiding: r,
+  direction: s = "left",
+  onAnimationEnd: e
+}) => /* @__PURE__ */ m(l, {
+  style: i,
+  className: a(n, t && d[s], t && r && f),
+  onAnimationEnd: e,
+  children: o
+});
+export {
+  h as SlideIn
+};

package/lib/ui/theme/ThemeColors.js

@@ -1,6 +1,6 @@
 import { jsx as t } from "react/jsx-runtime";
 import { ColorItem as e } from "@storybook/blocks";
-import { PALETTE_COLORS as r } from "./constants.js";
+import { COLORS as r } from "./constants.js";
 const l = Object.keys(r), p = () => l.map((o) => /* @__PURE__ */ t(
   e,
   {

package/lib/ui/theme/breakpoints.d.ts

@@ -1,4 +1,5 @@
 import { BREAKPOINTS, ORIENTATION } from './constants';
+
 export type Breakpoints = keyof typeof BREAKPOINTS;
 export type Orientation = keyof typeof ORIENTATION;
 export declare const breakpoints: {

package/lib/ui/theme/constants.d.ts

@@ -1,66 +1,16 @@
-export declare const PALETTE_COLORS: {
-    PRIMARY_GREEN1: string;
-    PRIMARY_GREEN2: string;
-    PRIMARY_GREEN3: string;
-    PRIMARY_GREEN4: string;
-    SECONDARY_RED1: string;
-    SECONDARY_RED2: string;
-    SECONDARY_RED3: string;
-    SECONDARY_YELLOW: string;
-    SECONDARY_GREEN5: string;
-    SECONDARY_GREEN6: string;
-    NEUTRALS_WHITE: string;
-    NEUTRALS_GRAY1: string;
-    NEUTRALS_GRAY2: string;
-    NEUTRALS_GRAY3: string;
-    NEUTRALS_GRAY4: string;
-    NEUTRALS_GRAY5: string;
-    NEUTRALS_GRAY6: string;
-    NEUTRALS_GRAY7: string;
-    NEUTRALS_GRAY8: string;
-    NEUTRALS_GRAY9: string;
-    NEUTRALS_BLACK: string;
-};
 export declare const COLORS: {
     BG_TRANSPARENT: string;
-    BG_TRANSPARENT_VOTE_CONTAINER: string;
-    BG_TRANSPARENT_ITEM: string;
-    BG_TRANSPARENT_ITEM_VOTE: string;
-    BG_TRANSPARENT_ITEM_SUCCESS: string;
-    BG_TRANSPARENT_ITEM_ERROR: string;
-    BG_TRANSPARENT_VOTE_PROGRESS: string;
-    BG_TRANSPARENT_VOTE_PROGRESS_SUCCESS: string;
-    BG_TRANSPARENT_VOTE_PROGRESS_ERROR: string;
-    BG_TRANSPARENT_ONBOARDING_INAPP: string;
-    LEADERBOARD_UNIT: string;
-    BLUE_PRIMARY: string;
-    RED_PRIMARY: string;
-    RED_SECONDARY: string;
     BLUE_QUESTION_ACTION_BTN: string;
     WHITE: string;
-    GREY_1: string;
-    GREY_2: string;
-    GREY_3: string;
-    GREY_4: string;
-    GREY_PRIMARY_ONBOARDING_INAPP: string;
-    BLACK_1: string;
-    GREEN_1: string;
-    RED_1: string;
-    RED_2: string;
+    BLUE: string;
     GREY_PRIMARY: string;
-    DIVIDER_COLOR_SECONDARY: string;
-    GREEN_PRIMARY_BTN: string;
-} & {
-    PRIMARY_GREEN1: string;
-    PRIMARY_GREEN2: string;
-    PRIMARY_GREEN3: string;
-    PRIMARY_GREEN4: string;
+    GREY_PRIMARY_ONBOARDING_INAPP: string;
+    PRIMARY_1: string;
+    PRIMARY_2: string;
+    PRIMARY_TEXT: string;
+    SUCCESS: string;
+    UNSUCCESS: string;
     SECONDARY_RED1: string;
-    SECONDARY_RED2: string;
-    SECONDARY_RED3: string;
-    SECONDARY_YELLOW: string;
-    SECONDARY_GREEN5: string;
-    SECONDARY_GREEN6: string;
     NEUTRALS_WHITE: string;
     NEUTRALS_GRAY1: string;
     NEUTRALS_GRAY2: string;
@@ -69,10 +19,13 @@ export declare const COLORS: {
     NEUTRALS_GRAY5: string;
     NEUTRALS_GRAY6: string;
     NEUTRALS_GRAY7: string;
-    NEUTRALS_GRAY8: string;
     NEUTRALS_GRAY9: string;
-    NEUTRALS_BLACK: string;
 };
+export declare const TIMER_COLORS: string[];
+export declare const TIMER_GREEN = "#cee5de";
+export declare const TIMER_RED = "#f9d6d8";
+export declare const TIMER_GRAY = "#E8E8E8";
+export type ICOLORS = typeof COLORS;
 export declare const FONT: {
     REGULAR: string;
     SERIF: string;

package/lib/ui/theme/constants.js

@@ -1,43 +1,16 @@
-const N = {
+const F = {
   BG_TRANSPARENT: "rgba(0,0,0, .8)",
-  BG_TRANSPARENT_VOTE_CONTAINER: "rgba(10, 14, 19, 0.8)",
-  BG_TRANSPARENT_ITEM: "rgba(0, 0, 0, 0.7)",
-  BG_TRANSPARENT_ITEM_VOTE: "rgba(255, 255, 255, 0.1)",
-  BG_TRANSPARENT_ITEM_SUCCESS: "rgba(0, 139, 251, 0.2)",
-  BG_TRANSPARENT_ITEM_ERROR: "rgba(205, 37, 37, 0.2)",
-  BG_TRANSPARENT_VOTE_PROGRESS: "rgba(255, 255, 255, 0.2)",
-  BG_TRANSPARENT_VOTE_PROGRESS_SUCCESS: "rgba(60, 139, 251, 0.5)",
-  BG_TRANSPARENT_VOTE_PROGRESS_ERROR: "rgba(205, 37, 37, 0.5)",
-  BG_TRANSPARENT_ONBOARDING_INAPP: "rgba(138, 159, 182, 0.2)",
-  LEADERBOARD_UNIT: "rgba(255, 255, 255, 0.5)",
-  BLUE_PRIMARY: "#1589EE",
-  RED_PRIMARY: "#CD2525",
-  RED_SECONDARY: "#EB5757",
   BLUE_QUESTION_ACTION_BTN: "#1589ee",
   WHITE: "#FFFFFF",
-  GREY_1: "#909395",
-  GREY_2: "#22262b",
-  GREY_3: "#2d3135",
-  GREY_4: "#53565a",
-  GREY_PRIMARY_ONBOARDING_INAPP: "#B5B7B8",
-  BLACK_1: "#161a1f",
-  GREEN_1: "#F7B801",
-  RED_1: "#A30000",
-  RED_2: "#FF4170",
+  BLUE: "#2d6ffd",
   GREY_PRIMARY: "#909395",
-  DIVIDER_COLOR_SECONDARY: "#53565a",
-  GREEN_PRIMARY_BTN: "#009B77"
-}, T = {
-  PRIMARY_GREEN1: "#5088C1",
-  PRIMARY_GREEN2: "#3C6DB4",
-  PRIMARY_GREEN3: "#2653A2",
-  PRIMARY_GREEN4: "#1B3A73",
+  GREY_PRIMARY_ONBOARDING_INAPP: "#B5B7B8",
+  PRIMARY_1: "#1D7BFF",
+  PRIMARY_2: "#095CD1",
+  PRIMARY_TEXT: "#090E13",
+  SUCCESS: "#107D57",
+  UNSUCCESS: "#DF2F3B",
   SECONDARY_RED1: "#DF2F3B",
-  SECONDARY_RED2: "#BA0C2F",
-  SECONDARY_RED3: "#f9d6d8",
-  SECONDARY_YELLOW: "#fce300",
-  SECONDARY_GREEN5: "#C0DC8F",
-  SECONDARY_GREEN6: "#cee5de",
   NEUTRALS_WHITE: "#FFFFFF",
   NEUTRALS_GRAY1: "#F7F7F7",
   NEUTRALS_GRAY2: "#F2F2F1",
@@ -46,36 +19,34 @@ const N = {
   NEUTRALS_GRAY5: "#B1B3B3",
   NEUTRALS_GRAY6: "#888B8D",
   NEUTRALS_GRAY7: "#6B6F73",
-  NEUTRALS_GRAY8: "#53565A",
-  NEUTRALS_GRAY9: "#25282A",
-  NEUTRALS_BLACK: "#000000"
-}, E = Object.assign({}, N, T), S = {
-  REGULAR: "'Benton Sans', BentonSans, Arial, Helvetica, sans-serif",
-  SERIF: "'Tiempos', 'Tiempos Text', Times New Roman, serif",
+  NEUTRALS_GRAY9: "#25282A"
+}, T = ["#107D57", "#DF2F3B", "#DF2F3B", "#E8E8E8"], _ = "#cee5de", e = "#f9d6d8", N = "#E8E8E8", S = {
+  REGULAR: "'SF Pro Text', Arial, Helvetica, sans-serif",
+  SERIF: "'SF Pro Display', Arial, Helvetica, sans-serif",
   COLOR: "#fff",
   WEIGHT_DEFAULT: "500"
-}, O = {
+}, s = {
   xs: 324,
   sm: 576,
   md: 768,
   lg: 992,
   xl: 1200,
   xxl: 1440
-}, G = {
+}, t = {
   landscape: "landscape",
   portrait: "portrait"
-}, B = Object.keys(E).reduce((A, R) => {
-  const _ = E[R];
-  return `
-    ${A}
-    --color-${R.toLowerCase().replaceAll("_", "-")}: ${_};
-  `;
-}, "");
+}, o = Object.entries(F).reduce((R, [E, A]) => `
+    ${R}
+    --color-${E.toLowerCase().replaceAll("_", "-")}: ${A};
+  `, "");
 export {
-  O as BREAKPOINTS,
-  E as COLORS,
+  s as BREAKPOINTS,
+  F as COLORS,
   S as FONT,
-  G as ORIENTATION,
-  T as PALETTE_COLORS,
-  B as colors
+  t as ORIENTATION,
+  T as TIMER_COLORS,
+  N as TIMER_GRAY,
+  _ as TIMER_GREEN,
+  e as TIMER_RED,
+  o as colors
 };

package/lib/ui/theme/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const StreamLayerThemeProvider: React.FC<{
     children: React.ReactNode;
     style?: React.CSSProperties;

package/lib/ui/theme/masters-theme.d.ts

@@ -1,25 +1,5 @@
-export declare const MASTERS_COLORS: {
-    PRIMARY_GREEN1: string;
-    PRIMARY_GREEN2: string;
-    PRIMARY_GREEN3: string;
-    PRIMARY_GREEN4: string;
-    SECONDARY_RED1: string;
-    SECONDARY_RED2: string;
-    SECONDARY_RED3: string;
-    SECONDARY_YELLOW: string;
-    SECONDARY_GREEN5: string;
-    SECONDARY_GREEN6: string;
-    NEUTRALS_WHITE: string;
-    NEUTRALS_GRAY1: string;
-    NEUTRALS_GRAY2: string;
-    NEUTRALS_GRAY3: string;
-    NEUTRALS_GRAY4: string;
-    NEUTRALS_GRAY5: string;
-    NEUTRALS_GRAY6: string;
-    NEUTRALS_GRAY7: string;
-    NEUTRALS_GRAY8: string;
-    NEUTRALS_GRAY9: string;
-    NEUTRALS_BLACK: string;
-};
+import { ICOLORS } from './constants';
+
+export declare const MASTERS_COLORS: ICOLORS;
 export declare const mastersThemeStr: string;
-export declare const mastersTheme: import("@linaria/core").LinariaClassName;
+export declare const mastersTheme: import('@linaria/core').LinariaClassName;

package/lib/ui/theme/masters-theme.js

@@ -1,44 +1,17 @@
-import { breakpoints as A } from "./breakpoints.js";
-const T = {
+import { breakpoints as R } from "./breakpoints.js";
+const a = {
   BG_TRANSPARENT: "rgba(0,0,0, .8)",
-  BG_TRANSPARENT_VOTE_CONTAINER: "rgba(10, 14, 19, 0.8)",
-  BG_TRANSPARENT_ITEM: "rgba(0, 0, 0, 0.7)",
-  BG_TRANSPARENT_ITEM_VOTE: "rgba(255, 255, 255, 0.1)",
-  BG_TRANSPARENT_ITEM_SUCCESS: "rgba(0, 139, 251, 0.2)",
-  BG_TRANSPARENT_ITEM_ERROR: "rgba(205, 37, 37, 0.2)",
-  BG_TRANSPARENT_VOTE_PROGRESS: "rgba(255, 255, 255, 0.2)",
-  BG_TRANSPARENT_VOTE_PROGRESS_SUCCESS: "rgba(60, 139, 251, 0.5)",
-  BG_TRANSPARENT_VOTE_PROGRESS_ERROR: "rgba(205, 37, 37, 0.5)",
-  BG_TRANSPARENT_ONBOARDING_INAPP: "rgba(138, 159, 182, 0.2)",
-  LEADERBOARD_UNIT: "rgba(255, 255, 255, 0.5)",
-  BLUE_PRIMARY: "#1589EE",
-  RED_PRIMARY: "#CD2525",
-  RED_SECONDARY: "#EB5757",
   BLUE_QUESTION_ACTION_BTN: "#1589ee",
   WHITE: "#FFFFFF",
-  GREY_1: "#909395",
-  GREY_2: "#22262b",
-  GREY_3: "#2d3135",
-  GREY_4: "#53565a",
+  BLUE: "#2d6ffd",
   GREY_PRIMARY_ONBOARDING_INAPP: "#B5B7B8",
-  BLACK_1: "#161a1f",
-  GREEN_1: "#F7B801",
-  RED_1: "#A30000",
-  RED_2: "#FF4170",
   GREY_PRIMARY: "#909395",
-  DIVIDER_COLOR_SECONDARY: "#53565a",
-  GREEN_PRIMARY_BTN: "#009B77"
-}, S = {
-  PRIMARY_GREEN1: "#107D57",
-  PRIMARY_GREEN2: "#006747",
-  PRIMARY_GREEN3: "#1C4932",
-  PRIMARY_GREEN4: "#193526",
+  PRIMARY_1: "#107D57",
+  PRIMARY_2: "#006747",
+  PRIMARY_TEXT: "#006747",
+  SUCCESS: "#107D57",
+  UNSUCCESS: "#DF2F3B",
   SECONDARY_RED1: "#DF2F3B",
-  SECONDARY_RED2: "#BA0C2F",
-  SECONDARY_RED3: "#f9d6d8",
-  SECONDARY_YELLOW: "#fce300",
-  SECONDARY_GREEN5: "#C0DC8F",
-  SECONDARY_GREEN6: "#cee5de",
   NEUTRALS_WHITE: "#FFFFFF",
   NEUTRALS_GRAY1: "#F7F7F7",
   NEUTRALS_GRAY2: "#F2F2F1",
@@ -47,27 +20,22 @@ const T = {
   NEUTRALS_GRAY5: "#B1B3B3",
   NEUTRALS_GRAY6: "#888B8D",
   NEUTRALS_GRAY7: "#6B6F73",
-  NEUTRALS_GRAY8: "#53565A",
-  NEUTRALS_GRAY9: "#25282A",
-  NEUTRALS_BLACK: "#000000"
-}, _ = Object.assign({}, T, S), R = {
+  NEUTRALS_GRAY9: "#25282A"
+}, e = {
   REGULAR: "'Benton Sans', BentonSans, Arial, Helvetica, sans-serif",
   SERIF: "'Tiempos', 'Tiempos Text', Times New Roman, serif",
   COLOR: "#fff",
   WEIGHT_DEFAULT: "500"
-}, a = Object.keys(_).reduce((e, E) => {
-  const N = _[E];
-  return `
-    ${e}
-    --color-${E.toLowerCase().replaceAll("_", "-")}: ${N};
-  `;
-}, ""), r = `
-  ${a}
-  --font-family: ${R.REGULAR};
-  --font-regular: ${R.REGULAR};
-  --font-color: ${R.COLOR};
-  --font-serif: ${R.SERIF};
-  --font-weight-default: ${R.WEIGHT_DEFAULT};
+}, n = Object.entries(a).reduce((t, [o, A]) => `
+    ${t}
+    --color-${o.toLowerCase().replaceAll("_", "-")}: ${A};
+  `, ""), E = `
+  ${n}
+  --font-family: ${e.REGULAR};
+  --font-regular: ${e.REGULAR};
+  --font-color: ${e.COLOR};
+  --font-serif: ${e.SERIF};
+  --font-weight-default: ${e.WEIGHT_DEFAULT};
 
   --header-offset: 0px;
   --header-height: 68px;
@@ -80,17 +48,17 @@ const T = {
   --max-width: 600px;
   --max-notifications-width: 400px;
 
-  ${A.down("xl")`
+  ${R.down("xl")`
     --header-offset: 56px;
     --watch-live-header: 46px;
   `}
 
-  ${A.intermediate("xl", "lg")`
+  ${R.intermediate("xl", "lg")`
     --header-offset: 76px;
   `}
-`, G = "m1ojpy2l";
+`, i = "m1ojpy2l";
 export {
-  S as MASTERS_COLORS,
-  G as mastersTheme,
-  r as mastersThemeStr
+  a as MASTERS_COLORS,
+  i as mastersTheme,
+  E as mastersThemeStr
 };

package/lib/ui/theme/masters.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const StreamLayerMastersThemeProvider: React.FC<{
     children: React.ReactNode;
     style?: React.CSSProperties;

package/lib/ui/theme/theme.d.ts

@@ -3,5 +3,5 @@ export declare const themeStr: string;
  * @link https://stackoverflow.com/a/65560812
  */
 export declare const resetCss = "StreamLayerCSSReset";
-export declare const theme: import("@linaria/core").LinariaClassName;
+export declare const theme: import('@linaria/core').LinariaClassName;
 export declare const ThemeVariables: () => import("react/jsx-runtime").JSX.Element;

package/lib/ui/theme/theme.js

@@ -10,7 +10,7 @@ const l = `
   --font-weight-default: ${t.WEIGHT_DEFAULT};
 
   --header-offset: 0px;
-  --header-height: 0px;
+  --header-height: 68px;
   --watch-live-header: 0px;
   --animation-duration: 0.5s;
   --animation-function: ease;
@@ -21,12 +21,12 @@ const l = `
   --max-notifications-width: 400px;
 
   ${n.down("xl")`
-    --header-offset: 56px;
+    --header-offset: 0px;
     --watch-live-header: 46px;
   `}
 
   ${n.intermediate("xl", "lg")`
-    --header-offset: 76px;
+    --header-offset: 0px;
   `}
 `, p = "StreamLayerCSSReset", m = "ttkj0ah", x = () => /* @__PURE__ */ e("table", {
   children: /* @__PURE__ */ r("table", {

package/lib/ui/timer/index.d.ts

@@ -1,9 +1,10 @@
-import React from 'react';
+import { default as React } from 'react';
+
 interface TimerProps {
     isPlaying?: boolean;
     duration?: number;
     onTimerExpired?: () => void;
 }
-export declare const RemainingTime: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const RemainingTime: import('@linaria/react').StyledComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Timer: React.FC<TimerProps>;
 export {};