@streamlayer/react-ui 1.21.0 → 1.22.0

package/lib/ui/modal/index.js

@@ -1,63 +1,60 @@
-import { jsxs as c, Fragment as h, jsx as l } from "react/jsx-runtime";
-import { styled as y } from "@linaria/react";
-import { useState as d, useEffect as a } from "react";
-import { r as u } from "../../index-DALxy-8N.js";
-import { BREAKPOINTS as m } from "../theme/constants.js";
-const O = /* @__PURE__ */ y("div")({
+import { jsxs as p, jsx as i } from "react/jsx-runtime";
+import { styled as w } from "@linaria/react";
+import { useState as c, useEffect as d } from "react";
+import { r as a } from "../../index-DALxy-8N.js";
+import { BREAKPOINTS as u } from "../theme/constants.js";
+const h = /* @__PURE__ */ w("div")({
   name: "StaticContainer",
   class: "svm502q",
   propsAsIs: !1
-}), f = `
+}), y = `
   .sl-hide-on-modal {
     height: 0 !important;
     opacity: 0 !important;
     overflow: hidden !important;
   }
-`, S = `
+`, O = `
   .sl-pill-button {
     display: none !important;
   }
-`, w = () => window.innerWidth >= m.lg && window.innerWidth < m.xl ? 76 : 53, p = (e) => {
+`, f = () => window.innerWidth >= u.md && window.innerWidth < u.lg ? 76 : 53, m = (e) => {
   var n;
-  const t = w();
+  const t = f();
   return Math.round((((n = e.current) == null ? void 0 : n.getBoundingClientRect().y) || 0) - t) <= 0;
-}, x = ({
+}, g = ({
   children: e,
   container: t,
   useContainer: n
 }) => {
-  const [s] = d(() => p(t)), [r, i] = d(!1);
-  return a(() => {
-    if (!t.current || !s)
-      return i(!0), () => {
+  const [l] = c(() => m(t)), [o, s] = c(!1);
+  return d(() => {
+    if (!t.current || !l)
+      return s(!0), () => {
       };
-    const o = window.scrollY;
-    return i(!0), () => {
-      p(t) && window.scrollTo({
-        top: o,
+    const r = window.scrollY;
+    return s(!0), () => {
+      m(t) && window.scrollTo({
+        top: r,
         behavior: "instant"
       });
     };
-  }, []), a(() => {
-    if (r && t.current && s) {
-      const o = w();
+  }, []), d(() => {
+    if (o && t.current && l) {
+      const r = f();
       window.scrollTo({
-        top: t.current.offsetTop - o,
+        top: t.current.offsetTop - r,
         behavior: "instant"
       });
     }
-  }, [r]), !t.current || !r ? null : n ? u.createPortal(/* @__PURE__ */ c(O, {
-    children: [e, /* @__PURE__ */ l("style", {
-      children: f
-    }), /* @__PURE__ */ l("style", {
-      children: S
+  }, [o]), !t.current || !o ? null : n ? a.createPortal(/* @__PURE__ */ p(h, {
+    className: "StaticContainer",
+    children: [e, /* @__PURE__ */ i("style", {
+      children: y
+    }), /* @__PURE__ */ i("style", {
+      children: O
     })]
-  }), t.current, "modal-node") : u.createPortal(/* @__PURE__ */ c(h, {
-    children: [/* @__PURE__ */ l("style", {
-      children: f
-    }), e]
-  }), t.current, "modal-node");
+  }), t.current, "modal-node") : a.createPortal(e, t.current, "modal-node");
 };
 export {
-  x as ModalPortal
+  g as ModalPortal
 };

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

@@ -5,5 +5,6 @@ export declare const breakpoints: {
     up: (key: Breakpoints) => (styles: TemplateStringsArray) => string;
     down: (key: Breakpoints) => (styles: TemplateStringsArray) => string;
     intermediate: (down: Breakpoints, up: Breakpoints) => (styles: TemplateStringsArray) => string;
+    composite: (down: Breakpoints, key: Orientation) => (styles: TemplateStringsArray) => string;
     orientation: (key: Orientation) => (styles: TemplateStringsArray) => string;
 };

package/lib/ui/theme/breakpoints.js

@@ -1,24 +1,32 @@
-import { BREAKPOINTS as e, ORIENTATION as a } from "./constants.js";
+import { BREAKPOINTS as i, ORIENTATION as a } from "./constants.js";
 const r = (n) => (t) => `
   @media only screen and (${n}) {
     ${t}
   }
-`, d = (n, t) => (i) => `
+`, d = (n, t) => (e) => `
   @media only screen and (${n}) and (${t}) {
-    ${i}
+    ${e}
   }
-`, s = {
+`, m = (n, t) => (e) => `
+  @media only screen and (${n}) and (${t}) {
+    ${e}
+  }
+`, c = {
   up: (n) => {
-    const t = e[n];
+    const t = i[n];
     return r(`min-width: ${t}px`);
   },
   down: (n) => {
-    const t = e[n] - 1;
+    const t = i[n] - 1;
     return r(`max-width: ${t}px`);
   },
   intermediate: (n, t) => {
-    const i = e[n] - 1, o = e[t];
-    return d(`max-width: ${i}px`, `min-width: ${o}px`);
+    const e = i[n] - 1, o = i[t];
+    return d(`max-width: ${e}px`, `min-width: ${o}px`);
+  },
+  composite: (n, t) => {
+    const e = i[n] - 1, o = a[t];
+    return m(`max-width: ${e}px`, `orientation: ${o}`);
   },
   orientation: (n) => {
     const t = a[n];
@@ -26,5 +34,5 @@ const r = (n) => (t) => `
   }
 };
 export {
-  s as breakpoints
+  c as breakpoints
 };

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

@@ -193,6 +193,7 @@ const c = {
   --margin-left-pts: 0px;
   --display-question-container: initial;
   --justify-content-question-container: initial;
+  --color-question-body-text: #006747;
 
   .betPack {
     --padding-question-content: 0.8em 0.8em 0em 0.8em;