@orioncactuscorp/ui 1.0.0

package/dist/components/ScrollArea/ScrollArea.js

@@ -0,0 +1,541 @@
+'use client';
+import { jsx as w, jsxs as Lt } from "react/jsx-runtime";
+import { useRef as m, useSyncExternalStore as mt, useState as rt, useCallback as h, useMemo as Mt, useEffect as ot, useLayoutEffect as ft, useContext as Pt } from "react";
+import pt from "../Interaction/Interaction.js";
+import { ScrollAreaContext as vt } from "./contexts.js";
+import T from "./ScrollArea.module.scss.js";
+const ct = "oc-scroll-area-container-style", it = "oc-scroll-area-root-style";
+let O = 0, V = 0;
+function gt() {
+  return () => {
+  };
+}
+function Dt() {
+  return !0;
+}
+function wt() {
+  return !1;
+}
+function xt() {
+  return typeof window < "u" && ("ontouchstart" in window || navigator.maxTouchPoints > 0);
+}
+function W(d) {
+  return d.preventDefault(), !1;
+}
+function Bt(d, e) {
+  let E = !1;
+  return () => {
+    E || (d(), E = !0, window.setTimeout(() => {
+      E = !1;
+    }, e));
+  };
+}
+function bt(d, e) {
+  typeof d == "function" ? d(e) : d && (d.current = e);
+}
+function R(d, e) {
+  d && (d.dataset.state = e, d.dataset.ocState = e);
+}
+function kt({
+  as: d,
+  root: e = !1,
+  children: E,
+  className: L = "",
+  ref: Y,
+  "data-oc-component": I = "scroll-area",
+  ...X
+}) {
+  const M = d ?? "div", U = m(null), v = mt(
+    gt,
+    Dt,
+    wt
+  ), S = mt(
+    gt,
+    xt,
+    wt
+  ), [o, Tt] = rt(null), [_, Et] = rt(!1), [j, Rt] = rt(!1), F = m(null), f = m(null), a = m(null), q = m(null), g = m(null), s = m(null), P = m(!1), D = m(!1), G = m(0), J = m(0), H = m(null), y = m(null), z = m(null), A = m(null), lt = h(
+    (t) => {
+      U.current = t, bt(Y, t);
+    },
+    [Y]
+  ), at = h((t) => {
+    Tt(t);
+  }, []), St = Mt(
+    () => ({ isRoot: e, setContainerRef: at }),
+    [e, at]
+  );
+  ot(() => {
+    if (!(!v || S || typeof document > "u")) {
+      if (O += 1, e && (V += 1), !document.getElementById(ct)) {
+        const t = document.createElement("style");
+        t.id = ct, t.textContent = `
+        [data-oc-scroll-container]::-webkit-scrollbar { display: none; }
+        [data-oc-scroll-container] { scrollbar-width: none; }
+      `, document.head.appendChild(t);
+      }
+      if (e && !document.getElementById(it)) {
+        const t = document.createElement("style");
+        t.id = it, t.textContent = `
+        ::-webkit-scrollbar { display: none; }
+        body { scrollbar-width: none; }
+      `, document.head.appendChild(t);
+      }
+      return () => {
+        O = Math.max(0, O - 1), e && (V = Math.max(
+          0,
+          V - 1
+        )), V === 0 && document.getElementById(it)?.remove(), O === 0 && document.getElementById(ct)?.remove();
+      };
+    }
+  }, [v, e, S]), ot(() => {
+    if (!v || !e || typeof document > "u")
+      return;
+    const t = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const n = window.setTimeout(() => {
+      document.body.style.overflow = t;
+    }, 1);
+    return () => {
+      document.body.style.overflow = "hidden", window.setTimeout(() => {
+        document.body.style.overflow = t;
+      }, 1), window.clearTimeout(n);
+    };
+  }, [v, e]);
+  const C = h(() => {
+    const t = o;
+    if (t) {
+      if (f.current) {
+        const n = f.current.getBoundingClientRect().height, r = e ? window.innerHeight : t.clientHeight, c = t.scrollHeight, i = c <= r ? n : r / c * n;
+        f.current.style.setProperty(
+          "--oc-scroll-area-thumb-height",
+          `${i}px`
+        );
+      }
+      if (g.current) {
+        const n = g.current.getBoundingClientRect().width, r = e ? window.innerWidth : t.clientWidth, c = t.scrollWidth, i = c <= r ? n : r / c * n;
+        g.current.style.setProperty(
+          "--oc-scroll-area-thumb-width",
+          `${i}px`
+        );
+      }
+    }
+  }, [o, e]), b = h(() => {
+    const t = o;
+    if (t) {
+      if (f.current && a.current)
+        if (e) {
+          const n = window.scrollY || document.documentElement.scrollTop, r = window.innerHeight, c = document.documentElement.scrollHeight;
+          if (c > r) {
+            const i = f.current.getBoundingClientRect().height - a.current.clientHeight, l = c - r;
+            let p = n, u = 0;
+            n > l ? (u = n - l, p = l) : n < 0 && (u = n, p = 0);
+            const et = p / l * i + u;
+            a.current.style.transform = `translateY(${et}px)`;
+          }
+        } else {
+          const { scrollTop: n, clientHeight: r, scrollHeight: c } = t;
+          if (c > r) {
+            const i = f.current.getBoundingClientRect().height - a.current.clientHeight, l = n / (c - r) * i;
+            a.current.style.transform = `translateY(${l}px)`;
+          }
+        }
+      if (g.current && s.current) {
+        const n = e ? window.scrollX || document.documentElement.scrollLeft : t.scrollLeft, r = e ? window.innerWidth : t.clientWidth, c = e ? document.documentElement.scrollWidth : t.scrollWidth;
+        if (c > r) {
+          const i = g.current.getBoundingClientRect().width - s.current.clientWidth, l = n / (c - r) * i;
+          s.current.style.transform = `translateX(${l}px)`;
+        }
+      }
+    }
+  }, [o, e]), st = h(() => {
+    R(F.current, "active"), R(q.current, "active"), H.current !== null && window.clearTimeout(H.current), H.current = window.setTimeout(() => {
+      R(F.current, "hidden"), R(q.current, "hidden"), H.current = null;
+    }, 1e3);
+  }, []), K = h(() => {
+    b(), st();
+  }, [st, b]), N = h(() => {
+    const t = o;
+    if (!t) return;
+    const n = e ? window.innerHeight : t.clientHeight, r = e ? window.innerWidth : t.clientWidth;
+    Et(t.scrollHeight > n), Rt(t.scrollWidth > r);
+  }, [o, e]), yt = (t) => {
+    if (t.preventDefault(), t.stopPropagation(), !f.current || !a.current || !o) return;
+    P.current = !0, a.current.dataset.state = "dragging", a.current.dataset.ocState = "dragging";
+    const n = e ? window.scrollY / (document.documentElement.scrollHeight - window.innerHeight) : o.scrollTop / (o.scrollHeight - o.clientHeight), r = f.current.getBoundingClientRect().height - a.current.clientHeight;
+    G.current = t.clientY - n * r, document.addEventListener("selectstart", W), document.addEventListener("dragstart", W);
+  }, Ht = (t) => {
+    if (t.preventDefault(), t.stopPropagation(), !g.current || !s.current || !o) return;
+    D.current = !0, s.current.dataset.state = "dragging", s.current.dataset.ocState = "dragging";
+    const n = e ? window.scrollX / (document.documentElement.scrollWidth - window.innerWidth) : o.scrollLeft / (o.scrollWidth - o.clientWidth), r = g.current.getBoundingClientRect().width - s.current.clientWidth;
+    J.current = t.clientX - n * r, document.addEventListener("selectstart", W), document.addEventListener("dragstart", W);
+  }, Q = h(
+    (t, n, r) => {
+      const c = t === "vertical" ? f.current : g.current, i = t === "vertical" ? a.current : s.current;
+      if (!c || !i) return;
+      const l = t === "vertical" ? window.innerHeight : window.innerWidth, p = t === "vertical" ? document.documentElement.scrollHeight : document.documentElement.scrollWidth, u = t === "vertical" ? c.getBoundingClientRect().height : c.getBoundingClientRect().width, et = t === "vertical" ? i.clientHeight : i.clientWidth, nt = u - et;
+      if (nt <= 0) return;
+      const ht = Math.max(
+        0,
+        Math.min(n - r.current, nt)
+      ) / nt;
+      t === "vertical" ? document.documentElement.scrollTop = ht * (p - l) : document.documentElement.scrollLeft = ht * (p - l);
+    },
+    []
+  ), Z = h(
+    (t) => {
+      if (!o) return;
+      let n = !1;
+      if (e) {
+        const r = document.documentElement.style.scrollBehavior;
+        document.documentElement.style.scrollBehavior = "auto", P.current && (t.preventDefault(), t.stopPropagation(), Q("vertical", t.clientY, G), n = !0), D.current && (t.preventDefault(), t.stopPropagation(), Q("horizontal", t.clientX, J), n = !0), document.documentElement.style.scrollBehavior = r;
+      } else {
+        if (P.current && f.current && a.current) {
+          t.preventDefault(), t.stopPropagation();
+          const r = f.current.getBoundingClientRect().height - a.current.clientHeight;
+          if (r > 0) {
+            const i = Math.max(
+              0,
+              Math.min(t.clientY - G.current, r)
+            ) / r * (o.scrollHeight - o.clientHeight);
+            o.scrollTo({ top: i, behavior: "auto" }), n = !0;
+          }
+        }
+        if (D.current && g.current && s.current) {
+          t.preventDefault(), t.stopPropagation();
+          const r = g.current.getBoundingClientRect().width - s.current.clientWidth;
+          if (r > 0) {
+            const i = Math.max(
+              0,
+              Math.min(t.clientX - J.current, r)
+            ) / r * (o.scrollWidth - o.clientWidth);
+            o.scrollTo({ left: i, behavior: "auto" }), n = !0;
+          }
+        }
+      }
+      n && b();
+    },
+    [o, e, Q, b]
+  ), tt = h(() => {
+    P.current = !1, D.current = !1, a.current && (a.current.dataset.state = "hidden", a.current.dataset.ocState = "hidden"), s.current && (s.current.dataset.state = "hidden", s.current.dataset.ocState = "hidden"), document.removeEventListener("selectstart", W), document.removeEventListener("dragstart", W);
+  }, []), ut = (t) => {
+    t.preventDefault();
+    const n = t.currentTarget.dataset.ocOrientation ?? t.currentTarget.dataset.orientation;
+    if (e) {
+      n === "horizontal" ? window.scrollBy({
+        left: t.deltaY || t.deltaX,
+        behavior: "auto"
+      }) : window.scrollBy({ top: t.deltaY, behavior: "auto" });
+      return;
+    }
+    o && (n === "horizontal" ? o.scrollTo({
+      left: o.scrollLeft + (t.deltaY || t.deltaX),
+      behavior: "auto"
+    }) : o.scrollTo({
+      top: o.scrollTop + t.deltaY,
+      behavior: "auto"
+    }));
+  }, k = h(() => {
+    y.current !== null && (window.clearTimeout(y.current), y.current = null);
+  }, []), dt = h(() => {
+    k(), y.current = window.setTimeout(() => {
+      R(f.current, "hidden"), R(g.current, "hidden"), y.current = null;
+    }, 200);
+  }, [k]), $ = h(
+    (t) => {
+      t ? (R(f.current, "active"), R(g.current, "active"), k()) : !P.current && !D.current && dt();
+    },
+    [k, dt]
+  ), x = h(() => {
+    z.current !== null && (window.clearInterval(z.current), z.current = null);
+  }, []), B = h(() => {
+    A.current !== null && (window.clearInterval(A.current), A.current = null);
+  }, []), Ct = (t) => {
+    if (t.target !== t.currentTarget || !o || !a.current)
+      return;
+    const n = t.clientY, r = a.current.getBoundingClientRect(), c = n < r.top ? "up" : n > r.bottom ? "down" : null;
+    if (!c) return;
+    const i = e ? window.innerHeight : o.clientHeight, l = () => {
+      const p = a.current?.getBoundingClientRect();
+      if (p && n >= p.top && n <= p.bottom) {
+        x();
+        return;
+      }
+      if (e) {
+        const u = window.scrollY || document.documentElement.scrollTop;
+        window.scrollTo({
+          top: c === "up" ? u - i : u + i,
+          behavior: "smooth"
+        });
+      } else {
+        const u = o.scrollTop;
+        o.scrollTo({
+          top: c === "up" ? u - i : u + i,
+          behavior: "smooth"
+        });
+      }
+      b();
+    };
+    l(), z.current = window.setInterval(l, 300);
+  }, Wt = (t) => {
+    if (t.target !== t.currentTarget || !o || !s.current)
+      return;
+    const n = t.clientX, r = s.current.getBoundingClientRect(), c = n < r.left ? "left" : n > r.right ? "right" : null;
+    if (!c) return;
+    const i = e ? window.innerWidth : o.clientWidth, l = () => {
+      const p = s.current?.getBoundingClientRect();
+      if (p && n >= p.left && n <= p.right) {
+        B();
+        return;
+      }
+      if (e) {
+        const u = window.scrollX || document.documentElement.scrollLeft;
+        window.scrollTo({
+          left: c === "left" ? u - i : u + i,
+          behavior: "smooth"
+        });
+      } else {
+        const u = o.scrollLeft;
+        o.scrollTo({
+          left: c === "left" ? u - i : u + i,
+          behavior: "smooth"
+        });
+      }
+      b();
+    };
+    l(), A.current = window.setInterval(l, 300);
+  };
+  return ft(() => {
+    const t = o;
+    if (!v || !t || S) return;
+    const n = window.requestAnimationFrame(() => {
+      N(), C(), b();
+    }), r = e ? window : t;
+    r.addEventListener("scroll", K, {
+      passive: !0
+    });
+    const c = () => {
+      N(), C(), b();
+    };
+    window.addEventListener("resize", c), document.addEventListener("mousemove", Z), document.addEventListener("mouseup", tt);
+    const i = Bt(() => {
+      C(), b(), N();
+    }, 100), l = new MutationObserver(i);
+    return l.observe(t, {
+      attributes: !0,
+      characterData: !0,
+      childList: !0,
+      subtree: !0
+    }), () => {
+      r.removeEventListener("scroll", K), window.removeEventListener("resize", c), document.removeEventListener("mousemove", Z), document.removeEventListener("mouseup", tt), window.cancelAnimationFrame(n), l.disconnect();
+    };
+  }, [
+    N,
+    o,
+    v,
+    K,
+    Z,
+    tt,
+    e,
+    S,
+    C,
+    b
+  ]), ft(() => {
+    !v || !o || S || !_ && !j || (C(), b());
+  }, [
+    o,
+    v,
+    j,
+    _,
+    S,
+    C,
+    b
+  ]), ot(
+    () => () => {
+      H.current !== null && window.clearTimeout(H.current), y.current !== null && window.clearTimeout(y.current), x(), B();
+    },
+    [B, x]
+  ), !v || S ? /* @__PURE__ */ w(
+    M,
+    {
+      ref: lt,
+      className: `${T.scrollArea} ${L}`.trim(),
+      ...X,
+      "data-oc-component": I,
+      "data-root": e ? "" : void 0,
+      "data-oc-scroll-root": e ? "true" : void 0,
+      "data-scroll": "",
+      "data-oc-scroll": "",
+      "data-scroll-label": e ? "root" : void 0,
+      "data-oc-scroll-label": e ? "root" : void 0,
+      children: E
+    }
+  ) : /* @__PURE__ */ w(vt.Provider, { value: St, children: /* @__PURE__ */ Lt(
+    M,
+    {
+      ref: lt,
+      className: `${T.scrollArea} ${L}`.trim(),
+      ...X,
+      "data-oc-component": I,
+      "data-root": e ? "" : void 0,
+      "data-oc-scroll-root": e ? "true" : void 0,
+      "data-scroll": "",
+      "data-oc-scroll": "",
+      "data-scroll-label": e ? "root" : void 0,
+      "data-oc-scroll-label": e ? "root" : void 0,
+      children: [
+        E,
+        _ ? /* @__PURE__ */ w(
+          "div",
+          {
+            ref: F,
+            className: T.scrollbar,
+            "data-oc-part": "scrollbar-vertical",
+            "data-orientation": "vertical",
+            "data-oc-orientation": "vertical",
+            "data-state": "hidden",
+            "data-oc-state": "hidden",
+            onWheel: ut,
+            children: /* @__PURE__ */ w(
+              "div",
+              {
+                ref: f,
+                className: T.wrapper,
+                "data-oc-part": "scrollbar-track",
+                "data-state": "hidden",
+                "data-oc-state": "hidden",
+                role: "presentation",
+                onMouseDown: Ct,
+                onMouseEnter: () => $(!0),
+                onMouseLeave: () => {
+                  x(), $(!1);
+                },
+                onMouseUp: x,
+                children: /* @__PURE__ */ w(
+                  "div",
+                  {
+                    ref: a,
+                    className: T.thumb,
+                    "data-oc-part": "thumb",
+                    "data-state": "hidden",
+                    "data-oc-state": "hidden",
+                    role: "presentation",
+                    onMouseDown: yt,
+                    onPointerDownCapture: (t) => {
+                      t.stopPropagation(), t.nativeEvent.stopImmediatePropagation();
+                    },
+                    onPointerMoveCapture: (t) => {
+                      t.stopPropagation(), t.nativeEvent.stopImmediatePropagation();
+                    },
+                    onPointerUpCapture: (t) => {
+                      t.stopPropagation(), t.nativeEvent.stopImmediatePropagation();
+                    },
+                    children: /* @__PURE__ */ w(
+                      "div",
+                      {
+                        className: T.background,
+                        "data-oc-part": "thumb-background",
+                        children: /* @__PURE__ */ w(pt, { variant: "light", self: !0 })
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          }
+        ) : null,
+        j ? /* @__PURE__ */ w(
+          "div",
+          {
+            ref: q,
+            className: T.scrollbar,
+            "data-oc-part": "scrollbar-horizontal",
+            "data-orientation": "horizontal",
+            "data-oc-orientation": "horizontal",
+            "data-state": "hidden",
+            "data-oc-state": "hidden",
+            onWheel: ut,
+            children: /* @__PURE__ */ w(
+              "div",
+              {
+                ref: g,
+                className: T.wrapper,
+                "data-oc-part": "scrollbar-track",
+                "data-state": "hidden",
+                "data-oc-state": "hidden",
+                role: "presentation",
+                onMouseDown: Wt,
+                onMouseEnter: () => $(!0),
+                onMouseLeave: () => {
+                  B(), $(!1);
+                },
+                onMouseUp: B,
+                children: /* @__PURE__ */ w(
+                  "div",
+                  {
+                    ref: s,
+                    className: T.thumb,
+                    "data-oc-part": "thumb",
+                    "data-state": "hidden",
+                    "data-oc-state": "hidden",
+                    role: "presentation",
+                    onMouseDown: Ht,
+                    onPointerDownCapture: (t) => {
+                      t.stopPropagation(), t.nativeEvent.stopImmediatePropagation();
+                    },
+                    onPointerMoveCapture: (t) => {
+                      t.stopPropagation(), t.nativeEvent.stopImmediatePropagation();
+                    },
+                    onPointerUpCapture: (t) => {
+                      t.stopPropagation(), t.nativeEvent.stopImmediatePropagation();
+                    },
+                    children: /* @__PURE__ */ w(
+                      "div",
+                      {
+                        className: T.background,
+                        "data-oc-part": "thumb-background",
+                        children: /* @__PURE__ */ w(pt, { variant: "light", self: !0 })
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          }
+        ) : null
+      ]
+    }
+  ) });
+}
+function $t({
+  as: d,
+  children: e,
+  className: E = "",
+  ref: L,
+  "data-oc-component": Y = "scroll-area-container",
+  ...I
+}) {
+  const X = d ?? "div", M = Pt(vt), U = h(
+    (v) => {
+      M?.setContainerRef(v), bt(L, v);
+    },
+    [M, L]
+  );
+  return /* @__PURE__ */ w(
+    X,
+    {
+      ref: U,
+      className: `${T.container} ${E}`.trim(),
+      ...I,
+      "data-oc-part": "scroll-area-container",
+      "data-oc-component": Y,
+      "data-scroll-container": "",
+      "data-oc-scroll-container": "",
+      children: e
+    }
+  );
+}
+export {
+  kt as ScrollArea,
+  $t as ScrollAreaContainer,
+  kt as default
+};

package/dist/components/ScrollArea/ScrollArea.module.scss.js

@@ -0,0 +1,17 @@
+import './ScrollArea.css';const o = "oc-ScrollArea-module__scrollArea__DqPec", r = "oc-ScrollArea-module__container__dGQhY", c = "oc-ScrollArea-module__scrollbar__fSzQp", l = "oc-ScrollArea-module__wrapper__wSIU3", e = "oc-ScrollArea-module__thumb__vIWmD", _ = "oc-ScrollArea-module__background__sPGmG", a = {
+  scrollArea: o,
+  container: r,
+  scrollbar: c,
+  wrapper: l,
+  thumb: e,
+  background: _
+};
+export {
+  _ as background,
+  r as container,
+  a as default,
+  o as scrollArea,
+  c as scrollbar,
+  e as thumb,
+  l as wrapper
+};

package/dist/components/ScrollArea/contexts.js

@@ -0,0 +1,7 @@
+import { createContext as t } from "react";
+const e = t(
+  null
+);
+export {
+  e as ScrollAreaContext
+};

package/dist/components/ScrollArea.d.ts

@@ -0,0 +1,6 @@
+export * from '../ui/src/components/ScrollArea/index'
+export {}
+import _default from '../ui/src/components/ScrollArea/index'
+export default _default
+export * from '../ui/src/components/ScrollArea/index'
+export {}

package/dist/components/ScrollArea.js

@@ -0,0 +1,8 @@
+import { ScrollAreaContext as e } from "./ScrollArea/contexts.js";
+import { ScrollArea as a, ScrollAreaContainer as t, ScrollArea as c } from "./ScrollArea/ScrollArea.js";
+export {
+  a as ScrollArea,
+  t as ScrollAreaContainer,
+  e as ScrollAreaContext,
+  c as default
+};

package/dist/components/SectionHeader/SectionHeader.css

@@ -0,0 +1 @@
+.oc-SectionHeader-module__sectionHeader__z1p-G{display:flex;align-items:flex-start;gap:var(--oc-space-item-gap-medium)}.oc-SectionHeader-module__sectionHeader__z1p-G[data-oc-size=large]{--oc-section-header-color: var(--oc-color-theme-label-strong)}.oc-SectionHeader-module__sectionHeader__z1p-G[data-oc-size=large][data-oc-viewport=auto]{--oc-section-header-heading-height: var(--oc-typo-height-heading2)}.oc-SectionHeader-module__sectionHeader__z1p-G[data-oc-size=large][data-oc-viewport=auto] [data-oc-part=title]{font-size:calc(var(--oc-typo-size-heading2) * var(--oc-typo-scale, 1));line-height:calc(var(--oc-typo-height-heading2) * var(--oc-typo-scale, 1));letter-spacing:var(--oc-typo-spacing-heading2);font-weight:var(--oc-typo-weight-heading2-bold)}@media screen and (min-width:769px){.oc-SectionHeader-module__sectionHeader__z1p-G[data-oc-size=large][data-oc-viewport=auto]{--oc-section-header-heading-height: var(--oc-typo-height-title3)}.oc-SectionHeader-module__sectionHeader__z1p-G[data-oc-size=large][data-oc-viewport=auto] [data-oc-part=title]{font-size:calc(var(--oc-typo-size-title3) * var(--oc-typo-scale, 1));line-height:calc(var(--oc-typo-height-title3) * var(--oc-typo-scale, 1));letter-spacing:var(--oc-typo-spacing-title3);font-weight:var(--oc-typo-weight-title3-bold)}}.oc-SectionHeader-module__sectionHeader__z1p-G[data-oc-size=large][data-oc-viewport=desktop]{--oc-section-header-heading-height: var(--oc-typo-height-title3)}.oc-SectionHeader-module__sectionHeader__z1p-G[data-oc-size=large][data-oc-viewport=desktop] [data-oc-part=title]{font-size:calc(var(--oc-typo-size-title3) * var(--oc-typo-scale, 1));line-height:calc(var(--oc-typo-height-title3) * var(--oc-typo-scale, 1));letter-spacing:var(--oc-typo-spacing-title3);font-weight:var(--oc-typo-weight-title3-bold)}.oc-SectionHeader-module__sectionHeader__z1p-G[data-oc-size=large][data-oc-viewport=mobile]{--oc-section-header-heading-height: var(--oc-typo-height-heading2)}.oc-SectionHeader-module__sectionHeader__z1p-G[data-oc-size=large][data-oc-viewport=mobile] [data-oc-part=title]{font-size:calc(var(--oc-typo-size-heading2) * var(--oc-typo-scale, 1));line-height:calc(var(--oc-typo-height-heading2) * var(--oc-typo-scale, 1));letter-spacing:var(--oc-typo-spacing-heading2);font-weight:var(--oc-typo-weight-heading2-bold)}.oc-SectionHeader-module__sectionHeader__z1p-G[data-oc-size=medium]{--oc-section-header-color: var(--oc-color-theme-label-strong)}.oc-SectionHeader-module__sectionHeader__z1p-G[data-oc-size=medium][data-oc-viewport=auto]{--oc-section-header-heading-height: var(--oc-typo-height-headline2)}.oc-SectionHeader-module__sectionHeader__z1p-G[data-oc-size=medium][data-oc-viewport=auto] [data-oc-part=title]{font-size:calc(var(--oc-typo-size-headline2) * var(--oc-typo-scale, 1));line-height:calc(var(--oc-typo-height-headline2) * var(--oc-typo-scale, 1));letter-spacing:var(--oc-typo-spacing-headline2);font-weight:var(--oc-typo-weight-headline2-bold)}@media screen and (min-width:769px){.oc-SectionHeader-module__sectionHeader__z1p-G[data-oc-size=medium][data-oc-viewport=auto]{--oc-section-header-heading-height: var(--oc-typo-height-heading1)}.oc-SectionHeader-module__sectionHeader__z1p-G[data-oc-size=medium][data-oc-viewport=auto] [data-oc-part=title]{font-size:calc(var(--oc-typo-size-heading1) * var(--oc-typo-scale, 1));line-height:calc(var(--oc-typo-height-heading1) * var(--oc-typo-scale, 1));letter-spacing:var(--oc-typo-spacing-heading1);font-weight:var(--oc-typo-weight-heading1-bold)}}.oc-SectionHeader-module__sectionHeader__z1p-G[data-oc-size=medium][data-oc-viewport=desktop]{--oc-section-header-heading-height: var(--oc-typo-height-heading1)}.oc-SectionHeader-module__sectionHeader__z1p-G[data-oc-size=medium][data-oc-viewport=desktop] [data-oc-part=title]{font-size:calc(var(--oc-typo-size-heading1) * var(--oc-typo-scale, 1));line-height:calc(var(--oc-typo-height-heading1) * var(--oc-typo-scale, 1));letter-spacing:var(--oc-typo-spacing-heading1);font-weight:var(--oc-typo-weight-heading1-bold)}.oc-SectionHeader-module__sectionHeader__z1p-G[data-oc-size=medium][data-oc-viewport=mobile]{--oc-section-header-heading-height: var(--oc-typo-height-headline2)}.oc-SectionHeader-module__sectionHeader__z1p-G[data-oc-size=medium][data-oc-viewport=mobile] [data-oc-part=title]{font-size:calc(var(--oc-typo-size-headline2) * var(--oc-typo-scale, 1));line-height:calc(var(--oc-typo-height-headline2) * var(--oc-typo-scale, 1));letter-spacing:var(--oc-typo-spacing-headline2);font-weight:var(--oc-typo-weight-headline2-bold)}.oc-SectionHeader-module__sectionHeader__z1p-G[data-oc-size=small]{--oc-section-header-color: var(--oc-color-theme-label-strong)}.oc-SectionHeader-module__sectionHeader__z1p-G[data-oc-size=small][data-oc-viewport=auto]{--oc-section-header-heading-height: var(--oc-typo-height-body2)}.oc-SectionHeader-module__sectionHeader__z1p-G[data-oc-size=small][data-oc-viewport=auto] [data-oc-part=title]{font-size:calc(var(--oc-typo-size-body2) * var(--oc-typo-scale, 1));line-height:calc(var(--oc-typo-height-body2) * var(--oc-typo-scale, 1));letter-spacing:var(--oc-typo-spacing-body2);font-weight:var(--oc-typo-weight-body2-bold)}@media screen and (min-width:769px){.oc-SectionHeader-module__sectionHeader__z1p-G[data-oc-size=small][data-oc-viewport=auto]{--oc-section-header-heading-height: var(--oc-typo-height-headline2)}.oc-SectionHeader-module__sectionHeader__z1p-G[data-oc-size=small][data-oc-viewport=auto] [data-oc-part=title]{font-size:calc(var(--oc-typo-size-headline2) * var(--oc-typo-scale, 1));line-height:calc(var(--oc-typo-height-headline2) * var(--oc-typo-scale, 1));letter-spacing:var(--oc-typo-spacing-headline2);font-weight:var(--oc-typo-weight-headline2-bold)}}.oc-SectionHeader-module__sectionHeader__z1p-G[data-oc-size=small][data-oc-viewport=desktop]{--oc-section-header-heading-height: var(--oc-typo-height-headline2)}.oc-SectionHeader-module__sectionHeader__z1p-G[data-oc-size=small][data-oc-viewport=desktop] [data-oc-part=title]{font-size:calc(var(--oc-typo-size-headline2) * var(--oc-typo-scale, 1));line-height:calc(var(--oc-typo-height-headline2) * var(--oc-typo-scale, 1));letter-spacing:var(--oc-typo-spacing-headline2);font-weight:var(--oc-typo-weight-headline2-bold)}.oc-SectionHeader-module__sectionHeader__z1p-G[data-oc-size=small][data-oc-viewport=mobile]{--oc-section-header-heading-height: var(--oc-typo-height-body2)}.oc-SectionHeader-module__sectionHeader__z1p-G[data-oc-size=small][data-oc-viewport=mobile] [data-oc-part=title]{font-size:calc(var(--oc-typo-size-body2) * var(--oc-typo-scale, 1));line-height:calc(var(--oc-typo-height-body2) * var(--oc-typo-scale, 1));letter-spacing:var(--oc-typo-spacing-body2);font-weight:var(--oc-typo-weight-body2-bold)}.oc-SectionHeader-module__sectionHeader__z1p-G[data-oc-size=xsmall]{--oc-section-header-color: var(--oc-color-theme-label-alternative);--oc-section-header-heading-height: var(--oc-typo-height-label1)}.oc-SectionHeader-module__sectionHeader__z1p-G[data-oc-size=xsmall] [data-oc-part=title]{font-size:calc(var(--oc-typo-size-label1) * var(--oc-typo-scale, 1));line-height:calc(var(--oc-typo-height-label1) * var(--oc-typo-scale, 1));letter-spacing:var(--oc-typo-spacing-label1);font-weight:var(--oc-typo-weight-label1-bold)}.oc-SectionHeader-module__sectionHeader__z1p-G [data-oc-part=leading]{display:flex;flex-direction:column;gap:var(--oc-space-item-gap-tiny);flex:1;min-width:0}.oc-SectionHeader-module__sectionHeader__z1p-G [data-oc-part=heading]{display:flex;align-items:center;gap:var(--oc-space-item-gap-tiny)}.oc-SectionHeader-module__sectionHeader__z1p-G [data-oc-part=title]{color:var(--oc-section-header-color);margin:0;flex:1;min-width:0}.oc-SectionHeader-module__sectionHeader__z1p-G [data-oc-part=heading-slot],.oc-SectionHeader-module__sectionHeader__z1p-G [data-oc-part=trailing-slot]{display:flex;align-items:center;max-height:var(--oc-section-header-heading-height);overflow:hidden;flex-shrink:0}.oc-SectionHeader-module__sectionHeader__z1p-G [data-oc-part=description]{font-size:calc(var(--oc-typo-size-body2) * var(--oc-typo-scale, 1));line-height:calc(var(--oc-typo-height-body2) * var(--oc-typo-scale, 1));letter-spacing:var(--oc-typo-spacing-body2);font-weight:var(--oc-typo-weight-body2-medium);color:var(--oc-color-theme-label-alternative);margin:0}

package/dist/components/SectionHeader/SectionHeader.js

@@ -0,0 +1,48 @@
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import u from "./SectionHeader.module.scss.js";
+const g = {
+  large: "h2",
+  medium: "h3",
+  small: "h4",
+  xsmall: "h5"
+};
+function f({
+  size: a = "medium",
+  as: i,
+  viewport: e = "auto",
+  children: n,
+  description: o,
+  headingSlot: r,
+  trailingSlot: c,
+  className: l = "",
+  ref: s,
+  ...m
+}) {
+  const p = i ?? g[a], h = a !== "xsmall" && o != null;
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      ...m,
+      ref: s,
+      className: `${u.sectionHeader} ${l}`.trim(),
+      "data-size": a,
+      "data-viewport": e,
+      "data-oc-component": "section-header",
+      "data-oc-size": a,
+      "data-oc-viewport": e,
+      children: [
+        /* @__PURE__ */ d("div", { "data-oc-part": "leading", children: [
+          /* @__PURE__ */ d("div", { "data-oc-part": "heading", children: [
+            /* @__PURE__ */ t(p, { "data-oc-part": "title", children: n }),
+            r != null && /* @__PURE__ */ t("span", { "data-oc-part": "heading-slot", children: r })
+          ] }),
+          h && /* @__PURE__ */ t("p", { "data-oc-part": "description", children: o })
+        ] }),
+        c != null && /* @__PURE__ */ t("div", { "data-oc-part": "trailing-slot", children: c })
+      ]
+    }
+  );
+}
+export {
+  f as default
+};

package/dist/components/SectionHeader/SectionHeader.module.scss.js

@@ -0,0 +1,7 @@
+import './SectionHeader.css';const e = "oc-SectionHeader-module__sectionHeader__z1p-G", o = {
+  sectionHeader: e
+};
+export {
+  o as default,
+  e as sectionHeader
+};

package/dist/components/SectionHeader.d.ts

@@ -0,0 +1,6 @@
+export * from '../ui/src/components/SectionHeader/index'
+export {}
+import _default from '../ui/src/components/SectionHeader/index'
+export default _default
+export * from '../ui/src/components/SectionHeader/index'
+export {}

package/dist/components/SectionHeader.js

@@ -0,0 +1,4 @@
+import { default as o } from "./SectionHeader/SectionHeader.js";
+export {
+  o as default
+};