@streamlayer/react 1.23.2 → 1.24.0

package/lib/es/storage.js

@@ -1,114 +1,113 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { s as styled_default } from "./sl-types.js";
-import { e as e$2 } from "./index12.js";
-import { e as e$1, i } from "./index9.js";
-import { B as B1 } from "./index6.js";
-import { P as PickHistoryStatus, Q as QuestionType, a as QuestionStatus } from "./useStreamLayerApp2.js";
-const r = /* @__PURE__ */ styled_default("div")({
+import { jsxs as o, jsx as s } from "react/jsx-runtime";
+import { s as e } from "./sl-types.js";
+import { e as f } from "./index11.js";
+import { e as A, i as c } from "./index10.js";
+import { B as m } from "./index8.js";
+import { Q as l, a as Q, P as n } from "./useStreamLayerApp2.js";
+const h = /* @__PURE__ */ e("div")({
   name: "QuestionItem",
   class: "q1w97g3p",
-  propsAsIs: false
-}), m = /* @__PURE__ */ styled_default("div")({
+  propsAsIs: !1
+}), S = /* @__PURE__ */ e("div")({
   name: "QuestionCaption",
   class: "q2sl39u",
-  propsAsIs: false
-}), I = /* @__PURE__ */ styled_default("div")({
+  propsAsIs: !1
+}), T = /* @__PURE__ */ e("div")({
   name: "QuestionBody",
   class: "qd5h0uc",
-  propsAsIs: false
-}), Q = /* @__PURE__ */ styled_default("div")({
+  propsAsIs: !1
+}), v = /* @__PURE__ */ e("div")({
   name: "QuestionAction",
   class: "q105uluy",
-  propsAsIs: false
-}), e = () => B1, t = /* @__PURE__ */ styled_default(e())({
+  propsAsIs: !1
+}), L = () => m, i = /* @__PURE__ */ e(L())({
   name: "QuestionActionIcon",
   class: "q1fa0b9h",
-  propsAsIs: true
-}), a = () => t, A = /* @__PURE__ */ styled_default(a())({
+  propsAsIs: !0
+}), k = () => i, E = /* @__PURE__ */ e(k())({
   name: "QuestionCheckIcon",
   class: "qxlt78s",
-  propsAsIs: true
-}), c = () => B1, f = /* @__PURE__ */ styled_default(c())({
+  propsAsIs: !0
+}), N = () => m, P = /* @__PURE__ */ e(N())({
   name: "QuestionTypeIcon",
   class: "qmg0vkx",
-  propsAsIs: true
-}), d = /* @__PURE__ */ styled_default("div")({
+  propsAsIs: !0
+}), b = /* @__PURE__ */ e("div")({
   name: "QuestionTypeLabel",
   class: "q1uz5j1g",
-  propsAsIs: false
-}), q = /* @__PURE__ */ styled_default("div")({
+  propsAsIs: !1
+}), g = /* @__PURE__ */ e("div")({
   name: "QuestionContent",
   class: "qc3icwa",
-  propsAsIs: false
-}), S = /* @__PURE__ */ styled_default("button")({
+  propsAsIs: !1
+}), w = /* @__PURE__ */ e("button")({
   name: "PlayButton",
   class: "p169lohr",
-  propsAsIs: false
-}), b = /* @__PURE__ */ styled_default("div")({
+  propsAsIs: !1
+}), x = /* @__PURE__ */ e("div")({
   name: "SkeletonContainer",
   class: "s1f43z3r",
-  propsAsIs: false
-}), p = () => e$1, k = /* @__PURE__ */ styled_default(p())({
+  propsAsIs: !1
+}), D = () => A, B = /* @__PURE__ */ e(D())({
   name: "SkeletonButton",
   class: "s16k8geu",
-  propsAsIs: true
-});
-const w = {
-  [PickHistoryStatus.LOST]: /* @__PURE__ */ jsx(t, { name: "incorrectVoted" }),
-  [PickHistoryStatus.WON]: /* @__PURE__ */ jsx(A, { name: "icon-check" }),
-  [PickHistoryStatus.UNSET]: /* @__PURE__ */ jsx(t, { name: "icon-arrow" }),
-  [PickHistoryStatus.DNP]: /* @__PURE__ */ jsx(t, { name: "icon-arrow" })
-}, D = () => /* @__PURE__ */ jsxs(b, { children: [
-  /* @__PURE__ */ jsx(i, { loading: true, style: { width: "35%" } }),
-  /* @__PURE__ */ jsx(i, { loading: true, style: { width: "70%" } }),
-  /* @__PURE__ */ jsx(k, {})
-] }), x = ({ questionTypeData: e2, questionType: n, questionStatus: a2 }) => /* @__PURE__ */ jsxs(m, { className: "SL_QuestionCaption", children: [
-  /* @__PURE__ */ jsx(
-    f,
+  propsAsIs: !0
+}), C = {
+  [n.LOST]: /* @__PURE__ */ s(i, { name: "incorrectVoted" }),
+  [n.WON]: /* @__PURE__ */ s(E, { name: "icon-check" }),
+  [n.UNSET]: /* @__PURE__ */ s(i, { name: "icon-arrow" }),
+  [n.DNP]: /* @__PURE__ */ s(i, { name: "icon-arrow" })
+}, F = () => /* @__PURE__ */ o(x, { children: [
+  /* @__PURE__ */ s(c, { loading: !0, style: { width: "35%" } }),
+  /* @__PURE__ */ s(c, { loading: !0, style: { width: "70%" } }),
+  /* @__PURE__ */ s(B, {})
+] }), O = ({ questionTypeData: t, questionType: a, questionStatus: r }) => /* @__PURE__ */ o(S, { className: "SL_QuestionCaption", children: [
+  /* @__PURE__ */ s(
+    P,
     {
       className: "SL_QuestionTypeIcon",
       "data-testid": "question-type-icon",
-      "data-type-trivia": n === QuestionType.TRIVIA,
-      "data-type-poll": n === QuestionType.POLL,
-      name: e2.iconName
+      "data-type-trivia": a === l.TRIVIA,
+      "data-type-poll": a === l.POLL,
+      name: t.iconName
     }
   ),
-  /* @__PURE__ */ jsxs(d, { className: "SL_QuestionTypeLabel", children: [
-    e2.label,
-    n === QuestionType.TRIVIA && a2 === QuestionStatus.RESOLVED && " • Expired"
+  /* @__PURE__ */ o(b, { className: "SL_QuestionTypeLabel", children: [
+    t.label,
+    a === l.TRIVIA && r === Q.RESOLVED && " • Expired"
   ] })
-] }), R = ({
-  questionId: e2,
-  questionType: n,
-  questionStatus: a2,
-  subject: u,
-  openForVoting: d2,
-  status: m2
+] }), H = ({
+  questionId: t,
+  questionType: a,
+  questionStatus: r,
+  subject: d,
+  openForVoting: I,
+  status: y
 }) => {
-  const c2 = e$2[n], Q$1 = w[m2];
-  return c2 ? /* @__PURE__ */ jsxs(r, { "data-a": "intr", "data-name": e2, children: [
-    /* @__PURE__ */ jsxs(q, { children: [
-      /* @__PURE__ */ jsx(
-        x,
+  const p = f[a], q = C[y];
+  return p ? /* @__PURE__ */ o(h, { "data-a": "intr", "data-name": t, children: [
+    /* @__PURE__ */ o(g, { children: [
+      /* @__PURE__ */ s(
+        O,
         {
-          questionTypeData: c2,
-          questionType: n,
-          questionStatus: a2
+          questionTypeData: p,
+          questionType: a,
+          questionStatus: r
         }
       ),
-      /* @__PURE__ */ jsx(I, { children: u || "" })
+      /* @__PURE__ */ s(T, { children: d || "" })
     ] }),
-    /* @__PURE__ */ jsx(Q, { children: d2 ? /* @__PURE__ */ jsx(S, { "data-a": "intr", "data-name": e2, children: "Play" }) : Q$1 })
+    /* @__PURE__ */ s(v, { children: I ? /* @__PURE__ */ s(w, { "data-a": "intr", "data-name": t, children: "Play" }) : q })
   ] }) : null;
 };
-var KEY_PREFIX;
-(function(KEY_PREFIX2) {
-  KEY_PREFIX2["OPENED"] = "opened";
-})(KEY_PREFIX || (KEY_PREFIX = {}));
+var u;
+(function(t) {
+  t.OPENED = "opened";
+})(u || (u = {}));
 export {
-  D,
-  R,
-  S,
-  r,
-  x
+  F as D,
+  H as R,
+  w as S,
+  h as r,
+  O as x
 };

package/lib/es/theme.js

@@ -1,193 +1,6 @@
 import "react/jsx-runtime";
-import { A, B, C, L, D } from "./sl-types.js";
-const r = (n) => (t) => `
-  @media only screen and (${n}) {
-    ${t}
-  }
-`, d = (n, t) => (e) => `
-  @media only screen and (${n}) and (${t}) {
-    ${e}
-  }
-`, m$1 = (n, t) => (e) => `
-  @media only screen and (${n}) and (${t}) {
-    ${e}
-  }
-`, c = {
-  up: (n) => {
-    const t = A[n];
-    return r(`min-width: ${t}px`);
-  },
-  down: (n) => {
-    const t = A[n] - 1;
-    return r(`max-width: ${t}px`);
-  },
-  intermediate: (n, t) => {
-    const e = A[n] - 1, o = A[t];
-    return d(`max-width: ${e}px`, `min-width: ${o}px`);
-  },
-  composite: (n, t) => {
-    const e = A[n] - 1, o = B[t];
-    return m$1(`max-width: ${e}px`, `orientation: ${o}`);
-  },
-  orientation: (n) => {
-    const t = B[n];
-    return r(`orientation: ${t}`);
-  }
-};
-`
-  ${C}
-  ${L}
-  --font-family: ${D.REGULAR};
-  --font-regular: ${D.REGULAR};
-  --font-color: ${D.COLOR};
-  --font-serif: ${D.SERIF};
-  --font-weight-default: ${D.WEIGHT_DEFAULT};
-  --font-weight-default1: ${D.WEIGHT_DEFAULT1};
-  --font-weight-default2: ${D.WEIGHT_DEFAULT2};
-  --font-weight-default3: ${D.WEIGHT_DEFAULT3};
-  --font-size-default: ${D.SIZE_DEFAULT};
-  --font-size-secondary: ${D.SIZE_DEFAULT1};
-  --font-size-small: ${D.SIZE_DEFAULT2};
-  --line-height-default: ${D.LINE_HEIGHT};
-  --margin-title-default: ${D.MARGIN_TITLE_DEFAULT};
-  --font-header-title: 1.125rem;
-
-  --header-offset: 0px;
-  --header-height: 68px;
-  --animation-duration: 0.5s;
-  --animation-function: ease;
-  --container-padding: 16px;
-  --tabs-padding-top: 16px;
-  --summary-container-padding-bottom: 16px;
-  --max-tabs-width: 100%;
-  --border-radius: 8px;
-  --pill-offset: 0px;
-  --max-width: 600px;
-  --max-notifications-width: 400px;
-  --header-padding: 12px 12px 12px 16px;
-  --margin-web-link-btn: 0px;
-  --padding-web-link-btn: 11px 16px;
-  --insight-content-padding: 0px;
-  --close-icon-size: 12px;
-  --close-icon-size: 1.125rem;
-  --close-icon-stroke-width: 1.5;
-  --padding-title-default: 0px;
-  --insight-image-display: inline;
-  --web-link-align-items: center;
-  --web-link-column-gap: 10px;
-  --nav-border: 1px solid var(--color-neutrals-gray3);
-  --card-border: 1px solid var(--color-card-border);
-  --welcome-screen-graphic-size: 144px;
-  --welcome-screen-graphic-size-xl: 144px;
-  --quote-indent: 0 0 8px 0px;
-  --quote-padding: 4px 16px 8px 0;
-  --history-card-gap: 0.75rem;
-
-  --row-gap-default: 12px;
-  --row-gap-default1: 12px;
-  --row-gap-default2: 16px;
-  --promo-header-line-height: 18.5px;
-  --promo-animation-duration: 0.5s;
-  --promo-animation-function: ease-in;
-
-  ${c.down("xl")`
-    --header-offset: 0px;
-  `}
-
-  ${c.intermediate("xl", "lg")`
-    --header-offset: 0px;
-  `}
-
-  --insight-image-ratio: 16/9;
-  --adv-side-indents: 16px;
-  --adv-promo-padding-bottom: 36px;
-  --adv-top-indent: 12px;
-  --adv-header-height: 52px;
-  --adv-media-row-gap: 24px;
-  --adv-media-button-indent: 10px;
-  --adv-media-padding: 0 26.5px;
-  --adv-sponsor-logo-size: 32px;
-  --adv-sponsor-font-size: 16px;
-  --adv-header-border: 1px solid var(--color-adv-border-primary);
-  --adv-header-shift: 0;
-  --adv-media-shift: 24px;
-  --adv-hide-on-mobile: unset;
-  --adv-title-font-size: 24px;
-  --adv-description-font-size: 16px;
-  --adv-title-height: 31px;
-  --adv-description-height: 21px;
-  --adv-btn-font-size: 16px;
-  --adv-btn-padding: 10px 14px;
-
-  .mobile-view {
-    --adv-side-indents: 16px;
-    --adv-promo-padding-bottom: 36px;
-    --adv-hide-on-mobile: none;
-    --adv-header-shift: -10px;
-    --adv-media-shift: -10px;
-    --adv-top-indent: 4px;
-    --adv-header-border: none;
-    --adv-header-height: 48px;
-    --adv-media-row-gap: 22.5px;
-    --adv-media-button-indent: 22.5px;
-    --adv-sponsor-logo-size: 28px;
-    --adv-sponsor-font-size: 12px;
-  }
-
-  --padding-question-content: 16px 16px 0px;
-  --gap-vote-options: 8px;
-  --vote-feedback-font-size: 1em;
-  --letter-spacing-feedback-header: normal;
-  --size-transparent-icon: 51px;
-  --padding-feedback-container: 8px 0px 24px;
-  --fz-feedbackContainer: 14px;
-  --margin-top-feedback-text: 10px;
-  --margin-top-feedback-dynamic-text: 0px;
-  --fz-feedback-text: 1em;
-  --fz-feedback-dynamic-text: 1em;
-  --letter-spacing-feedback-text: normal;
-  --display-dynamic-wrap: inline;
-  --padding-question-title: 0em;
-  --text-align-question-title: start;
-  --line-height-question-title: 24px;
-  --vote-title-font-size: 16px;
-  --padding-vote-answer: 5px 15px 5px 9px;
-  --fz-vote-answer: 12px;
-  --border-radius-vote-btn: 4px;
-  --min-height-vote-btn: 44px;
-  --justify-content-feedback-container: start;
-  --bg-color-feedback-container: transparent;
-  --padding-feedback-wrap: 0px;
-  --border-radius-feedback-container: 0px;
-  --text-align-feedback-description: start;
-  --color-feedback-description: #090E13;
-  --color-feedback-text: rgba(10, 14, 19, 0.70);
-  --vote-answer-font-size: 1em;
-  --size-vote-answer-icon: 32px;
-  --margin-left-vote-answer-indicator: 8px;
-  --size-vote-answer-indicator: 16px;
-  --path-fill-vote-answer-indicator: #107D57;
-  --vote-answer-font-weight: normal;
-  --margin-left-percentage: 8px;
-  --question-content-max-width: unset;
-  --line-height-percentage: 17px;
-  --line-height-percentage: 1.55em;
-  --border-color-btn-correct: #107D57;
-  --border-color-btn-voted: #1D7BFF;
-  --opacity-voted-btn-rct: 1;
-  --opacity-vote-btn-not-selected: 1;
-  --color-vote-btn-not-checked-bg: #fff;
-  --vote-options-margin-bottom: 0px;
-  --fw-feedback: inherit;
-  --letter-spacing-question-title: normal;
-  --margin-left-pts: 0px;
-
-  --display-question-container: initial;
-  --justify-content-question-container: initial;
-`;
-const m = "StreamLayerCSSReset", h = "ttkj0ah";
+const e = "StreamLayerCSSReset", r = "ttkj0ah";
 export {
-  c,
-  h,
-  m
+  r as h,
+  e as m
 };

package/lib/es/useStreamLayerApp.js

@@ -1,4 +1,4 @@
-import { $ } from "./useStreamLayerApp2.js";
+import { z as a } from "./useStreamLayerApp2.js";
 export {
-  $ as useStreamLayerApp
+  a as useStreamLayerApp
 };