@courtneyring/components-library 1.0.36 → 1.0.37

package/dist/components/Navbar/Navbar.js

@@ -0,0 +1,98 @@
+"use client";
+import { jsxs as u, jsx as n } from "react/jsx-runtime";
+import { useRef as h, useState as l, useEffect as f, cloneElement as k } from "react";
+import w from "../MenuButton/MenuButton.js";
+import { r as N } from "../../index-DyQs5aC7.js";
+import D from "../Overlay/Overlay.js";
+import x from "../Container/Container.js";
+import { c as E } from "../../index-B2JRaoNz.js";
+import '../../assets/Navbar.css';const y = "_navbar_1ue9a_1", O = "_hide_1ue9a_19", Y = "_background_1ue9a_22", S = "_navbar__link_1ue9a_22", $ = "_navbar__logo_1ue9a_26", j = "_component_1ue9a_34", B = "_navbar__links_1ue9a_38", C = "_navbar__mobileDialog_1ue9a_95", F = "_open_1ue9a_107", L = "_navbar__toggle_1ue9a_118", e = {
+  navbar: y,
+  hide: O,
+  background: Y,
+  navbar__link: S,
+  navbar__logo: $,
+  component: j,
+  navbar__links: B,
+  navbar__mobileDialog: C,
+  open: F,
+  navbar__toggle: L
+}, M = {}, Q = ({
+  links: c,
+  logoImage: s,
+  backgroundColor: I,
+  color: P,
+  logoComponent: t,
+  hidden: b,
+  position: d = "absolute"
+}) => {
+  const o = h(0), [R, v] = l("up"), [r, _] = l(!1), [m, p] = l(!1);
+  f(() => (window.addEventListener("scroll", i), () => window.removeEventListener("scroll", i)), []);
+  const i = () => {
+    p(window.scrollY > 30);
+    const a = window.scrollY;
+    a - o.current !== 0 && v(a > o.current ? "down" : "up"), o.current = a > 0 ? a : 0;
+  };
+  return /* @__PURE__ */ u(
+    "nav",
+    {
+      className: E(
+        e.navbar,
+        m && e.background,
+        r && e.open,
+        // (direction === "down" || hidden) && styles.hide
+        b && e.hide
+      ),
+      style: r ? {} : { position: d },
+      children: [
+        /* @__PURE__ */ u("a", { className: e.navbar__logo, href: "/", children: [
+          s && /* @__PURE__ */ n("img", { src: s }),
+          t && k(t, {
+            className: e.component
+          })
+        ] }),
+        /* @__PURE__ */ n("div", { className: e.navbar__toggle, children: /* @__PURE__ */ n(
+          w,
+          {
+            clickFn: () => _(!r),
+            isOpen: r,
+            theme: "color-white"
+          }
+        ) }),
+        /* @__PURE__ */ n("div", { className: e.navbar__links, children: c.map((a, g) => /* @__PURE__ */ n(
+          "a",
+          {
+            className: `${e.navbar__link}`,
+            href: a.value,
+            children: a.label
+          },
+          `navbar-d-${a.value}`
+        )) }),
+        r && N.createPortal(
+          /* @__PURE__ */ n(
+            D,
+            {
+              closeFn: () => _(!1),
+              hideClose: !0,
+              background: M.white,
+              fullscreen: !0,
+              children: /* @__PURE__ */ n(x, { color: "color-white", children: /* @__PURE__ */ n("div", { className: e.navbar__mobileDialog, children: c.map((a, g) => /* @__PURE__ */ n(
+                "a",
+                {
+                  className: e.navbar__link,
+                  href: a.value,
+                  children: a.label
+                },
+                `m-${a.value}`
+              )) }) })
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+};
+export {
+  Q as default
+};

package/dist/components/Note/Note.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsxs as o, jsx as s } from "react/jsx-runtime";
+import { useReveal as m } from "../../hooks/useReveal.js";
+import { appleReveal as i } from "../../presets/animations.js";
+import _ from "../../utils/parse.js";
+import '../../assets/Note.css';const p = "_salutation_vtem0_2", d = "_opener_vtem0_48", u = "_from_vtem0_53", f = "_body_vtem0_100", v = "_close_vtem0_152", N = "_signature_vtem0_199", e = {
+  salutation: p,
+  opener: d,
+  from: u,
+  body: f,
+  close: v,
+  signature: N
+}, x = ({ salutation: t, from: a, body: n, signature: r, close: c }) => {
+  const l = m(i);
+  return /* @__PURE__ */ o("div", { className: e.note, ref: l, children: [
+    /* @__PURE__ */ o("p", { className: e.salutation, children: [
+      /* @__PURE__ */ o("span", { className: e.opener, children: [
+        t,
+        " "
+      ] }),
+      /* @__PURE__ */ s("span", { className: e.from, children: a })
+    ] }),
+    /* @__PURE__ */ s("div", { className: e.body, children: _(n) }),
+    /* @__PURE__ */ s("p", { className: e.close, children: c }),
+    /* @__PURE__ */ s("p", { className: e.signature, children: r })
+  ] });
+};
+export {
+  x as default
+};

package/dist/components/OverlayHero/OverlayHero.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsxs as f, jsx as o } from "react/jsx-runtime";
+import y from "../../utils/parse.js";
+import { useRef as e, useEffect as N } from "react";
+import { g as t } from "../../index-BmTo-IS6.js";
+import { S as B } from "../../ScrollTrigger-6HnikosL.js";
+import T from "../../hooks/useResize.js";
+import '../../assets/OverlayHero.css';const S = "_hero_7ipms_5", j = "_heroBg_7ipms_34", k = "_overlay_7ipms_42", E = "_eyebrow_7ipms_69", P = "_title_7ipms_76", W = "_subtitle_7ipms_94", r = {
+  hero: S,
+  heroBg: j,
+  overlay: k,
+  eyebrow: E,
+  title: P,
+  subtitle: W
+};
+t.registerPlugin(B);
+const q = ({ text: z, image: d, pos: g, eyebrow: c, title: h, subtitle: i }) => {
+  const { innerWidth: _ } = T(), s = e(null), n = e(), l = e(null), a = e(null), u = e(null), m = e(null);
+  return N(() => {
+    const b = s.current, v = l.current, w = window.matchMedia("(prefers-reduced-motion: reduce)").matches, p = n.current;
+    if (w || _ < 390) return;
+    const R = t.context(() => {
+      t.fromTo(
+        v,
+        { opacity: 0 },
+        { opacity: 1, duration: 1.2, ease: "power2.out" }
+      );
+      const x = [a.current, u.current, m.current].filter(Boolean);
+      t.fromTo(
+        x,
+        { opacity: 0, y: 10 },
+        {
+          opacity: 1,
+          y: 0,
+          duration: 1,
+          ease: "power2.out",
+          stagger: 0.2,
+          delay: 1.2
+        }
+      ), t.fromTo(
+        p,
+        { scale: 1.1, opacity: 0 },
+        { scale: 1, opacity: 1, duration: 2, ease: "power1.out" }
+      ), t.to(p, {
+        y: "15%",
+        ease: "none",
+        scrollTrigger: {
+          trigger: b,
+          start: "top top",
+          end: "bottom top",
+          scrub: !0
+        }
+      });
+    }, s);
+    return () => R.revert();
+  }, []), /* @__PURE__ */ f("div", { ref: s, className: r.hero, children: [
+    /* @__PURE__ */ o("div", { ref: n, className: r.heroBg, style: { backgroundImage: `url(${d})`, backgroundPosition: g, opacity: 0 } }),
+    /* @__PURE__ */ f("div", { ref: l, className: r.overlay, style: { opacity: 0 }, children: [
+      c && /* @__PURE__ */ o("p", { ref: a, className: r.eyebrow, children: c }),
+      /* @__PURE__ */ o("h1", { ref: u, className: r.title, children: y(h) }),
+      i && /* @__PURE__ */ o("div", { ref: m, className: r.subtitle, children: y(i) })
+    ] })
+  ] });
+};
+export {
+  q as default
+};

package/dist/components/PageContainer/PageContainer.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import '../../assets/PageContainer.css';const s = "_container__inner_1mlm4_2", m = "_removePadding_1mlm4_55", l = "_container__body_1mlm4_59", y = "_container__copy_1mlm4_74", n = {
+  container__inner: s,
+  removePadding: m,
+  container__body: l,
+  container__copy: y
+}, P = ({
+  heroImage: g,
+  pageTitle: r,
+  children: t,
+  hero: h,
+  copy: e,
+  excludePadding: c = []
+}) => {
+  const a = () => {
+    let _ = {};
+    for (let d of c)
+      _[`padding-${d}`] = 0;
+    return _;
+  };
+  return /* @__PURE__ */ i("main", { children: [
+    /* @__PURE__ */ o(
+      "div",
+      {
+        className: `${n.container__inner} ${!r && !e && n.removePadding}`,
+        style: a(),
+        children: /* @__PURE__ */ i("div", { className: n.container__copy, children: [
+          /* @__PURE__ */ o("h1", { children: r }),
+          e && /* @__PURE__ */ o("div", { className: n.container__body, children: e })
+        ] })
+      }
+    ),
+    t
+  ] });
+};
+export {
+  P as default
+};

package/dist/components/ParallaxImageGrid/ParallaxImageGrid.js

@@ -0,0 +1,92 @@
+"use client";
+import { jsx as a, jsxs as _ } from "react/jsx-runtime";
+import { useRef as o, useEffect as b } from "react";
+import { g as i } from "../../index-BmTo-IS6.js";
+import { S as w } from "../../ScrollTrigger-6HnikosL.js";
+import '../../assets/ParallaxImageGrid.css';const h = "_container_1tu23_1", R = "_center_1tu23_10", T = "_wrapper_1tu23_17", k = "_box_1tu23_29", n = {
+  container: h,
+  center: R,
+  wrapper: T,
+  box: k
+};
+i.registerPlugin(w);
+const A = ({ images: y, center: l }) => {
+  const c = o(null), u = o([]), p = o(), g = o(), x = [
+    { x: -500, y: -200 },
+    { x: -75, y: -200 },
+    { x: 200, y: 0 },
+    { x: 500, y: -200 },
+    { x: -500, y: 100 },
+    { x: -200, y: 0 },
+    { x: 75, y: 200 },
+    { x: 500, y: 200 }
+  ], f = (e) => {
+    const r = g.current.getBoundingClientRect(), t = r.width / 100 * x[e].x, s = r.height / 100 * x[e].y;
+    return { x: t, y: s };
+  };
+  return b(() => {
+    const e = i.context(() => {
+      const r = i.timeline({
+        scrollTrigger: {
+          trigger: c.current,
+          start: "top-=25% top",
+          toggleActions: "play none none none"
+          // end: "top-=10% top",
+          // end: "+=250%",
+          // scrub: true,
+        }
+      });
+      r.fromTo(
+        p.current,
+        { scale: 2, y: -200 },
+        { scale: 1, y: 0, ease: "power1.out", duration: 2 },
+        0.7
+      ), u.current.forEach((t, s) => {
+        const { x: m, y: d } = f(s);
+        r.fromTo(
+          t,
+          { x: m, y: d, opacity: 0 },
+          {
+            x: 0,
+            y: 0,
+            opacity: 1,
+            ease: "power1.out",
+            duration: 3
+          },
+          0
+        );
+      });
+    }, c);
+    return () => e.revert();
+  }, []), /* @__PURE__ */ a("div", { className: n.container, ref: c, children: /* @__PURE__ */ _("section", { className: n.wrapper, ref: g, children: [
+    y.map((e, r) => /* @__PURE__ */ a(
+      "div",
+      {
+        className: n.box,
+        ref: (t) => u.current[r] = t,
+        style: {
+          backgroundImage: `url(${e.src})`,
+          backgroundPosition: e.position,
+          backgroundSize: e.size,
+          gridArea: `area-${r + 1}`
+        }
+      },
+      r
+    )),
+    /* @__PURE__ */ a(
+      "div",
+      {
+        className: n.center,
+        ref: p,
+        style: {
+          backgroundImage: `url(${l.src})`,
+          backgroundPosition: l.position,
+          gridArea: "center"
+        }
+      }
+    )
+  ] }) });
+};
+export {
+  A as default
+};

package/dist/components/PromoGroup/PromoGroup.js

@@ -0,0 +1,107 @@
+"use client";
+import { jsxs as n, Fragment as N, jsx as a } from "react/jsx-runtime";
+import { useMemo as q } from "react";
+import "../../index-K0WrPJ_C.js";
+import "../../hooks/useFadeIn.js";
+import f from "../Button/Button.js";
+import { appleStagger as r } from "../../presets/animations.js";
+import { c as m } from "../../index-B2JRaoNz.js";
+import "../OverlayHero/OverlayHero.js";
+import "../../index-DyQs5aC7.js";
+import { useStagger as y } from "../../hooks/useStagger.js";
+import "../FloatingWordsHero/FloatingWordsHero.js";
+import "../../index.modern-DPbS1w7M.js";
+import '../../assets/PromoGroup.css';const C = "_group_iq3ie_2", b = "_slider_iq3ie_27", x = "_header_iq3ie_33", v = "_promo_iq3ie_81", T = "_icon_iq3ie_131", $ = "_cta_iq3ie_141", j = "_imageContainer_iq3ie_149", F = "_image_iq3ie_149", k = "_promo__header_iq3ie_161", S = "_promo__body_iq3ie_253", z = "_stats_iq3ie_300", A = "_stat_iq3ie_300", B = "_statText_iq3ie_314", e = {
+  group: C,
+  slider: b,
+  header: x,
+  promo: v,
+  icon: T,
+  cta: $,
+  imageContainer: j,
+  image: F,
+  promo__header: k,
+  promo__body: S,
+  stats: z,
+  stat: A,
+  statText: B,
+  "count-4": "_count-4_iq3ie_381",
+  "count-2": "_count-2_iq3ie_381"
+}, Q = ({ header: d, promos: i, direction: c = "vertical", slider: g }) => {
+  const h = ["icon", "header", "body", "cta", "stats", "image"], p = y(`.${e.promo}`, r.from, {
+    ...r.to,
+    stagger: r.stagger,
+    scrollTrigger: { start: r.start }
+  }), l = q(() => {
+    let t = 0;
+    for (let s of h)
+      i.some((o) => !!o[s]) && (t += 1);
+    return t;
+  }, [i]);
+  return /* @__PURE__ */ n(N, { children: [
+    /* @__PURE__ */ a("h2", { className: e.header, children: d }),
+    /* @__PURE__ */ a(
+      "div",
+      {
+        ref: p,
+        className: m(
+          e.group,
+          e[`count-${i.length}`],
+          g && e.slider
+        ),
+        style: {
+          "--promos": i.length,
+          "--propCount": c == "horizontal" ? l - 1 : l
+        },
+        children: i.map((t, s) => {
+          const o = t.containerCta ? "a" : "div";
+          return /* @__PURE__ */ n(
+            o,
+            {
+              onClick: t.containerCta?.onClick || null,
+              href: t.containerCta?.href || null,
+              target: t.containerCta?.target || null,
+              delay: 0.1 * s,
+              className: e.promo,
+              "data-color": t.color,
+              "data-text-align": t.textAlign,
+              "data-direction": c,
+              children: [
+                t.icon && /* @__PURE__ */ a(
+                  "span",
+                  {
+                    className: m(
+                      "material-symbols-outlined",
+                      e.icon,
+                      !t.icon && "hidden"
+                    ),
+                    children: t.icon
+                  }
+                ),
+                t.image && /* @__PURE__ */ a("div", { className: e.imageContainer, children: /* @__PURE__ */ a(
+                  "img",
+                  {
+                    style: { objectFit: t.imageFit },
+                    className: e.image,
+                    src: t.image
+                  }
+                ) }),
+                t.header && /* @__PURE__ */ a("h3", { className: e.promo__header, children: t.header }),
+                /* @__PURE__ */ a("p", { className: e.promo__body, children: t.body }),
+                t.cta && /* @__PURE__ */ a("div", { className: e.cta, children: /* @__PURE__ */ a(f, { ...t.cta }) }),
+                t.stats && /* @__PURE__ */ a("div", { className: e.stats, children: t.stats.map((_, u) => /* @__PURE__ */ n("div", { className: e.stat, children: [
+                  /* @__PURE__ */ a("span", { className: "material-symbols-outlined", children: _.icon }),
+                  /* @__PURE__ */ a("span", { className: e.statText, children: _.text })
+                ] }, `stat-${u}`)) })
+              ]
+            },
+            `promo-${s}`
+          );
+        })
+      }
+    )
+  ] });
+};
+export {
+  Q as default
+};

package/dist/components/Schedule/Schedule.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsxs as s, jsx as i } from "react/jsx-runtime";
+import { Fragment as l } from "react";
+import '../../assets/Schedule.css';const n = "_schedule_rm7y9_2", a = "_timeline_rm7y9_79", r = "_time_rm7y9_79", o = "_dot_rm7y9_92", _ = "_diagram_rm7y9_100", h = "_line_rm7y9_106", e = {
+  schedule: n,
+  timeline: a,
+  time: r,
+  dot: o,
+  diagram: _,
+  line: h
+}, y = ({ slots: c, header: d }) => /* @__PURE__ */ s("div", { className: e.schedule, children: [
+  /* @__PURE__ */ i("h3", { children: d }),
+  /* @__PURE__ */ i("div", { className: e.timeline, children: c.map((m, t) => /* @__PURE__ */ s(l, { children: [
+    /* @__PURE__ */ i("div", { className: e.time, children: m.time }),
+    /* @__PURE__ */ s("div", { className: e.diagram, children: [
+      /* @__PURE__ */ i("span", { className: e.line }),
+      /* @__PURE__ */ i("div", { className: e.dot })
+    ] }),
+    /* @__PURE__ */ i("div", { className: e.description, children: m.description })
+  ] }, t)) })
+] });
+export {
+  y as default
+};

package/dist/components/Spacer/Spacer.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+const s = ({ height: r, className: t }) => /* @__PURE__ */ e("div", { style: { height: r }, className: t });
+export {
+  s as default
+};

package/dist/components/TextBlock/TextBlock.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsxs as i, jsx as s } from "react/jsx-runtime";
+import { createElement as d } from "react";
+import n from "../../utils/parse.js";
+import m from "../IconDetail/IconDetail.js";
+import '../../assets/TextBlock.css';const _ = "_title_1iuzs_1", p = "_blocks_1iuzs_52", k = "_block_1iuzs_52", h = "_blockHeader_1iuzs_63", b = "_description_1iuzs_92", e = {
+  title: _,
+  blocks: p,
+  block: k,
+  blockHeader: h,
+  description: b
+}, z = ({ header: l, blocks: t }) => /* @__PURE__ */ i("div", { className: e.container, children: [
+  /* @__PURE__ */ s("h2", { className: e.title, children: l }),
+  /* @__PURE__ */ s("div", { className: e.blocks, children: t.map((c, o) => (
+    // <div className={styles.block} key={`block-${idx}`}>
+    /* @__PURE__ */ i("div", { className: e.block, children: [
+      /* @__PURE__ */ s("h3", { className: e.blockHeader, children: c.header }),
+      /* @__PURE__ */ i("div", { className: e.content, children: [
+        /* @__PURE__ */ s("div", { className: e.description, children: n(c.description) }),
+        /* @__PURE__ */ s("div", { className: e.details, children: c.details && c.details.map((a, r) => /* @__PURE__ */ d(m, { ...a, key: r })) })
+      ] })
+    ] }, `block-${o}`)
+  )) })
+] });
+export {
+  z as default
+};

package/dist/components/Timeline/Timeline.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsxs as l, Fragment as g, jsx as t } from "react/jsx-runtime";
+import { useRef as a, useEffect as f } from "react";
+import { g as o } from "../../index-BmTo-IS6.js";
+import { S as p } from "../../ScrollTrigger-6HnikosL.js";
+import '../../assets/Timeline.css';const h = "_spacer_1g76i_1", u = "_timelineWrapper_1g76i_6", x = "_linePin_1g76i_12", v = "_timelineLine_1g76i_22", N = "_items_1g76i_33", y = "_item_1g76i_33", P = "_text_1g76i_49", i = {
+  spacer: h,
+  timelineWrapper: u,
+  linePin: x,
+  timelineLine: v,
+  items: N,
+  item: y,
+  text: P
+};
+o.registerPlugin(p);
+const W = [
+  { year: "2019", text: "Started the journey" },
+  { year: "2021", text: "Major milestone" },
+  { year: "2024", text: "Where we are today" }
+];
+function R() {
+  const s = a(null), d = a(null), m = a(null);
+  return f(() => {
+    const e = window.innerHeight, c = o.context(() => {
+      p.create({
+        trigger: s.current,
+        start: "top top",
+        end: `+=${e * 2}`,
+        // controls how long it stays pinned
+        pin: d.current,
+        scrub: !0,
+        onUpdate: (_) => {
+          const r = _.progress;
+          let n;
+          r < 0.25 ? n = r / 0.25 * 0.5 * e : r < 0.75 ? n = 0.5 * e : n = 0.5 * e + (r - 0.75) / 0.25 * 0.5 * e, o.set(m.current, { height: n });
+        }
+      });
+    }, s);
+    return () => c.revert();
+  }, []), /* @__PURE__ */ l(g, { children: [
+    /* @__PURE__ */ t("div", { className: i.spacer }),
+    /* @__PURE__ */ l("section", { className: i.timelineWrapper, ref: s, children: [
+      /* @__PURE__ */ t("div", { className: i.linePin, children: /* @__PURE__ */ t("div", { className: i.timelineLine, ref: m }) }),
+      /* @__PURE__ */ t("div", { className: i.items, children: W.map((e, c) => /* @__PURE__ */ t("div", { className: i.item, children: /* @__PURE__ */ l("div", { className: i.text, children: [
+        /* @__PURE__ */ t("h3", { children: e.year }),
+        /* @__PURE__ */ t("p", { children: e.text })
+      ] }) }, c)) })
+    ] }),
+    /* @__PURE__ */ t("div", { className: i.spacer })
+  ] });
+}
+export {
+  R as default
+};

package/dist/hooks/useActiveSection.js

@@ -0,0 +1,27 @@
+import { useState as s, useEffect as l } from "react";
+function a() {
+  const [o, r] = s < string | null > null;
+  return l(() => {
+    const c = Array.from(
+      document.querySelectorAll < HTMLElement > '[id^="section-"]'
+    ), t = new IntersectionObserver(
+      (e) => {
+        e.forEach((n) => {
+          if (n.isIntersecting) {
+            const i = n.target.id.replace("section-", "");
+            r(i);
+          }
+        });
+      },
+      {
+        root: null,
+        rootMargin: "-40% 0px -40% 0px",
+        threshold: 0
+      }
+    );
+    return c.forEach((e) => t.observe(e)), () => t.disconnect();
+  }, []), o;
+}
+export {
+  a as useActiveSection
+};

package/dist/hooks/useFadeIn.js

@@ -0,0 +1,52 @@
+import { useRef as f } from "react";
+import { g as s } from "../index-BmTo-IS6.js";
+import { S as g } from "../ScrollTrigger-6HnikosL.js";
+import { u as m } from "../index-K0WrPJ_C.js";
+s.registerPlugin(g);
+function b({
+  direction: u = "none",
+  // 'up' | 'down' | 'left' | 'right' | 'none'
+  distance: t = 40,
+  duration: c = 0.8,
+  delay: i = 0,
+  ease: n = "power2.out",
+  start: a = "top 85%",
+  once: p = !0
+} = {}) {
+  const r = f(null);
+  return m(
+    () => {
+      if (!r.current) return;
+      const e = { opacity: 0 }, o = {
+        opacity: 1,
+        duration: c,
+        delay: i,
+        ease: n,
+        scrollTrigger: {
+          trigger: r.current,
+          start: a,
+          once: p
+        }
+      };
+      switch (u) {
+        case "up":
+          e.y = t, o.y = 0;
+          break;
+        case "down":
+          e.y = -t, o.y = 0;
+          break;
+        case "left":
+          e.x = t, o.x = 0;
+          break;
+        case "right":
+          e.x = -t, o.x = 0;
+          break;
+      }
+      s.fromTo(r.current, e, o);
+    },
+    { scope: r }
+  ), r;
+}
+export {
+  b as useFadeIn
+};