@courtneyring/components-library 1.0.35 → 1.0.36

package/dist/components/Banner/Banner.js

@@ -1,23 +0,0 @@
-"use client";
-import { jsxs as b, jsx as e } from "react/jsx-runtime";
-import "../../hooks/useFadeIn.js";
-import _ from "../Button/Button.js";
-import { Fragment as p } from "react";
-import { useReveal as a } from "../../hooks/useReveal.js";
-import { appleReveal as n } from "../../presets/animations.js";
-import '../../assets/Banner.css';const f = "_banner_1cxb9_1", v = "_header_1cxb9_8", h = "_body_1cxb9_60", x = "_ctas_1cxb9_104", r = {
-  banner: f,
-  header: v,
-  body: h,
-  ctas: x
-}, g = ({ header: s, body: o, ctas: t }) => {
-  const c = a(n), d = a({ ...n, delay: 0.2 }), l = a({ ...n, delay: 0.4 });
-  return /* @__PURE__ */ b("div", { className: r.banner, children: [
-    s && /* @__PURE__ */ e("div", { className: r.header, ref: c, children: s }),
-    o && /* @__PURE__ */ e("div", { className: r.body, ref: d, children: o }),
-    t && /* @__PURE__ */ e("div", { className: r.ctas, ref: l, children: t.map((m, i) => /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(_, { ...m }) }, `button-${i}`)) })
-  ] });
-};
-export {
-  g as default
-};

package/dist/components/Button/Button.js

@@ -1,44 +0,0 @@
-"use client";
-import { jsxs as u, jsx as k } from "react/jsx-runtime";
-import { c as f } from "../../index-B2JRaoNz.js";
-import '../../assets/Button.css';const x = "_button_1xkig_1", b = "_hollow_1xkig_110", g = "_filled_1xkig_113", h = "_link_1xkig_149", l = {
-  button: x,
-  hollow: b,
-  filled: g,
-  link: h
-}, N = ({
-  children: i,
-  fn: o,
-  href: t,
-  target: c,
-  hollow: r = !1,
-  variation: s = "color-primary-dark",
-  textDecoration: _,
-  label: d,
-  value: n,
-  icon: a,
-  onClick: e,
-  className: m
-}) => /* @__PURE__ */ u(
-  t || n ? "a" : "button",
-  {
-    href: t || n,
-    onClick: o || e ? o || e : null,
-    target: c,
-    className: f(
-      l.button,
-      r ? l.hollow : l.filled,
-      l[s],
-      m
-    ),
-    style: { textDecoration: _ },
-    "data-color": s,
-    children: [
-      i || d,
-      a && /* @__PURE__ */ k("span", { className: "material-symbols-outlined", children: a })
-    ]
-  }
-);
-export {
-  N as default
-};

package/dist/components/ButtonGroup/ButtonGroup.js

@@ -1,11 +0,0 @@
-"use client";
-import { jsx as u } from "react/jsx-runtime";
-import { createElement as e } from "react";
-import m from "../Button/Button.js";
-import { c as n } from "../../index-B2JRaoNz.js";
-import '../../assets/ButtonGroup.css';const p = "_buttonGroup_8k163_1", a = {
-  buttonGroup: p
-}, G = ({ ctas: t, className: o }) => /* @__PURE__ */ u("div", { className: n(a.buttonGroup, o), children: t.map((r, s) => /* @__PURE__ */ e(m, { ...r, key: `cta-${s}` })) });
-export {
-  G as default
-};

package/dist/components/Countdown/Countdown.js

@@ -1,41 +0,0 @@
-"use client";
-import { jsx as n, jsxs as f } from "react/jsx-runtime";
-import { useState as d, useEffect as m } from "react";
-import { useStagger as p } from "../../hooks/useStagger.js";
-import { appleStagger as o } from "../../presets/animations.js";
-import '../../assets/Countdown.css';const h = "_countdown_45yvm_1", g = "_block_45yvm_12", r = {
-  countdown: h,
-  block: g
-}, _ = ({ targetDate: s }) => {
-  const c = () => {
-    const t = new Date(s) - /* @__PURE__ */ new Date();
-    return t <= 0 ? 0 : {
-      days: Math.floor(t / 864e5),
-      hours: Math.floor(t / 36e5 % 24),
-      minutes: Math.floor(t / 1e3 / 60 % 60),
-      seconds: Math.floor(t / 1e3 % 60)
-    };
-  }, [e, l] = d(void 0), a = ["days", "hours", "minutes", "seconds"], i = p(
-    `.${r.block}`,
-    o.from,
-    {
-      ...o.to,
-      stagger: o.stagger,
-      scrollTrigger: { start: o.start }
-    },
-    typeof e == "object"
-  );
-  return m(() => {
-    l(c());
-    const t = setInterval(() => {
-      l(c());
-    }, 1e3);
-    return () => clearInterval(t);
-  }, [s]), e === void 0 || e === 0 ? null : /* @__PURE__ */ n("div", { className: r.countdown, ref: i, children: e && a.map((t, u) => /* @__PURE__ */ f("div", { className: r.block, children: [
-    /* @__PURE__ */ n("span", { children: e[t] }),
-    /* @__PURE__ */ n("span", { children: t })
-  ] }, `countdown-${u}`)) });
-};
-export {
-  _ as default
-};

package/dist/components/Fifty/Fifty.js

@@ -1,55 +0,0 @@
-"use client";
-import { jsxs as m, jsx as e } from "react/jsx-runtime";
-import F from "../Button/Button.js";
-import { c as f } from "../../index-B2JRaoNz.js";
-import { Fragment as d } from "react";
-import j from "../IconDetail/IconDetail.js";
-import I from "../../utils/parse.js";
-import { useReveal as s } from "../../hooks/useReveal.js";
-import { appleReveal as r } from "../../presets/animations.js";
-import { useImageReveal as b } from "../../hooks/useImageReveal.js";
-import '../../assets/Fifty.css';const B = "_content_1x7u4_2", D = "_fifty_1x7u4_49", P = "_contentFirst_1x7u4_86", k = "_reverse_1x7u4_90", q = "_image_1x7u4_93", w = "_text_1x7u4_161", z = "_ctas_1x7u4_219", A = "_details_1x7u4_237", t = {
-  content: B,
-  fifty: D,
-  contentFirst: P,
-  reverse: k,
-  image: q,
-  text: w,
-  ctas: z,
-  details: A
-}, Q = ({
-  heading: i,
-  body: n,
-  ctas: a,
-  color: _,
-  image: v,
-  reverse: p,
-  pos: u,
-  details: l,
-  contentFirst: x = !0
-}) => {
-  const R = b({ duration: 1.4 }), h = s(r), y = s({ ...r, delay: 0.2 }), g = s({ ...r, delay: 0.4 }), N = s({ ...r, delay: 0.4 });
-  return /* @__PURE__ */ m(
-    "div",
-    {
-      className: f(
-        t.fifty,
-        !!p && t.reverse,
-        x && t.contentFirst
-      ),
-      "data-color": _,
-      children: [
-        /* @__PURE__ */ e("div", { className: f(t.content), children: /* @__PURE__ */ m("div", { className: t.text, children: [
-          i && /* @__PURE__ */ e("h2", { ref: h, children: i }),
-          n && /* @__PURE__ */ e("div", { ref: y, children: I(n) }),
-          a && !!a.length && /* @__PURE__ */ e("div", { className: t.ctas, ref: g, children: a.map((o, c) => /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(F, { ...o }) }, c)) }),
-          /* @__PURE__ */ e("div", { className: t.details, ref: N, children: l && l.map((o, c) => /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(j, { ...o }) }, c)) })
-        ] }) }),
-        /* @__PURE__ */ e("div", { className: t.image, ref: R, children: /* @__PURE__ */ e("img", { src: v, style: { objectPosition: u } }) })
-      ]
-    }
-  );
-};
-export {
-  Q as default
-};

package/dist/components/Fifty/Fifty.stories.js

@@ -1,32 +0,0 @@
-"use client";
-import o from "./Fifty.js";
-const s = {
-  title: "Components/Fifty",
-  component: o,
-  parameters: {
-    layout: "centered"
-  },
-  tags: ["autodocs"]
-}, r = {
-  args: {
-    heading: "Museum Events",
-    body: "The museum is funded through donations, sponsorships, and grants. Find out ways you can help the museum from day-to-day operations to long term success",
-    color: "color-primary-dark",
-    cta: { children: "Click Here", color: "color-primary-dark" },
-    image: "https://placehold.co/600x600/png"
-  }
-}, t = {
-  args: {
-    heading: "Museum Events",
-    body: "The museum is funded through donations, sponsorships, and grants. Find out ways you can help the museum from day-to-day operations to long term success",
-    reverse: !0,
-    color: "color-secondary",
-    cta: { children: "Click Here", color: "color-primary-dark" },
-    image: "https://placehold.co/600x600/png"
-  }
-};
-export {
-  r as Default,
-  t as Reverse,
-  s as default
-};

package/dist/components/FloatingWordsHero/FloatingWordsHero.js

@@ -1,60 +0,0 @@
-"use client";
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import a from "../../utils/parse.js";
-import "../../index-B2JRaoNz.js";
-import w from "../ButtonGroup/ButtonGroup.js";
-import b from "../../hooks/useResize.js";
-import { useRef as u, useEffect as v } from "react";
-import { g as o } from "../../index-BmTo-IS6.js";
-import { S as z } from "../../ScrollTrigger-6HnikosL.js";
-import '../../assets/FloatingWordsHero.css';const N = "_hero_4e3sz_1", k = "_buttonGroup_4e3sz_28", x = "_heroBg_4e3sz_32", B = "_content_4e3sz_40", C = "_title_4e3sz_48", R = "_subtitle_4e3sz_62", G = "_arrow_4e3sz_80", S = "_arrowCircle_4e3sz_91", r = {
-  hero: N,
-  buttonGroup: k,
-  heroBg: x,
-  content: B,
-  title: C,
-  subtitle: R,
-  arrow: G,
-  arrowCircle: S
-};
-o.registerPlugin(z);
-const $ = ({ image: d, pos: m, eyebrow: s, title: h, subtitle: n, cta: y, contentPos: W, ctas: c, scrollToId: p }) => {
-  const { innerWidth: j, innerHeight: I } = b(), t = u(null), i = u(null), g = () => {
-    document.getElementById(p).scrollIntoView({ behavior: "smooth" });
-  };
-  return v(() => {
-    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
-    const f = o.context(() => {
-      o.to(i.current, {
-        y: "15%",
-        ease: "none",
-        scrollTrigger: {
-          trigger: t.current,
-          start: "top top",
-          end: "bottom top",
-          scrub: !0
-        }
-      });
-    }, t);
-    return () => f.revert();
-  }, []), /* @__PURE__ */ l("div", { ref: t, className: r.hero, children: [
-    /* @__PURE__ */ e(
-      "div",
-      {
-        ref: i,
-        className: r.heroBg,
-        style: { backgroundImage: `url(${d})`, backgroundPosition: m }
-      }
-    ),
-    /* @__PURE__ */ l("div", { className: r.content, children: [
-      s && /* @__PURE__ */ e("p", { className: r.eyebrow, children: s }),
-      /* @__PURE__ */ e("h1", { className: r.title, children: a(h) }),
-      n && /* @__PURE__ */ e("div", { className: r.subtitle, children: a(n) }),
-      c && /* @__PURE__ */ e(w, { ctas: c, className: r.buttonGroup })
-    ] }),
-    /* @__PURE__ */ e("div", { className: r.arrow, onClick: g, children: /* @__PURE__ */ e("div", { className: r.arrowCircle, children: /* @__PURE__ */ e("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ e("path", { d: "M6 9l6 6 6-6" }) }) }) })
-  ] });
-};
-export {
-  $ as default
-};

package/dist/components/IconDetail/IconDetail.js

@@ -1,14 +0,0 @@
-"use client";
-import { jsxs as i, jsx as l } from "react/jsx-runtime";
-import o from "../../utils/parse.js";
-import { c } from "../../index-B2JRaoNz.js";
-import '../../assets/IconDetail.css';const r = "_detail_1tukt_1", n = "_label_1tukt_57", a = {
-  detail: r,
-  label: n
-}, b = ({ icon: s, text: e, href: t }) => /* @__PURE__ */ i(t ? "a" : "div", { className: a.detail, children: [
-  /* @__PURE__ */ l("span", { className: c(a.icon, "material-symbols-outlined"), children: s }),
-  /* @__PURE__ */ l("div", { className: a.label, children: o(e) })
-] });
-export {
-  b as default
-};

package/dist/components/ImageTextBlock/ImageTextBlock.js

@@ -1,36 +0,0 @@
-"use client";
-import { jsx as e, jsxs as a, Fragment as f } from "react/jsx-runtime";
-import i from "../Button/Button.js";
-import { c as h } from "../../index-B2JRaoNz.js";
-import "../../hooks/useFadeIn.js";
-import p from "../../utils/parse.js";
-import { Children as g } from "react";
-import { appleReveal as b } from "../../presets/animations.js";
-import { useReveal as N } from "../../hooks/useReveal.js";
-import { useImageReveal as u } from "../../hooks/useImageReveal.js";
-import '../../assets/ImageTextBlock.css';const k = "_container_v69a4_1", R = "_reverse_v69a4_7", x = "_content_v69a4_11", y = "_header_v69a4_16", j = "_body_v69a4_69", I = "_ctas_v69a4_121", B = "_image_v69a4_125", F = "_block_v69a4_186", o = {
-  container: k,
-  reverse: R,
-  content: x,
-  header: y,
-  body: j,
-  ctas: I,
-  image: B,
-  block: F
-}, G = ({ image: m, header: s, body: t, primaryCta: c, secondaryCta: r, reverse: l, children: n, imagePos: _ }) => {
-  const v = u(), d = N({ ...b, delay: 0.2 });
-  return /* @__PURE__ */ e("div", { className: h(o.block, l && o.reverse), children: /* @__PURE__ */ a("div", { className: o.container, children: [
-    /* @__PURE__ */ e("div", { className: o.image, ref: v, children: /* @__PURE__ */ e("img", { src: m, style: { objectPosition: _ } }) }),
-    /* @__PURE__ */ a("div", { className: o.content, ref: d, children: [
-      s && /* @__PURE__ */ e("h2", { className: o.header, children: s }),
-      t && /* @__PURE__ */ e("div", { className: o.body, children: p(t) }),
-      g.count(n) > 0 ? n : /* @__PURE__ */ e(f, { children: /* @__PURE__ */ a("div", { className: o.ctas, children: [
-        c && /* @__PURE__ */ e(i, { ...c }),
-        r && /* @__PURE__ */ e(i, { ...r })
-      ] }) })
-    ] })
-  ] }) });
-};
-export {
-  G as default
-};

package/dist/components/Navbar/Navbar.js

@@ -1,98 +0,0 @@
-"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

@@ -1,30 +0,0 @@
-"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

@@ -1,67 +0,0 @@
-"use client";
-import { jsxs as p, 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 r } 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_m6nvt_5", j = "_heroBg_m6nvt_34", k = "_overlay_m6nvt_42", E = "_eyebrow_m6nvt_69", P = "_title_m6nvt_76", W = "_subtitle_m6nvt_94", t = {
-  hero: S,
-  heroBg: j,
-  overlay: k,
-  eyebrow: E,
-  title: P,
-  subtitle: W
-};
-r.registerPlugin(B);
-const q = ({ text: z, image: d, pos: g, eyebrow: n, title: h, subtitle: c }) => {
-  const { innerWidth: v } = T(), s = e(null), l = e(), a = e(null), i = e(null), u = e(null), m = e(null);
-  return N(() => {
-    const _ = s.current, b = a.current, w = window.matchMedia("(prefers-reduced-motion: reduce)").matches, f = l.current;
-    if (w || v < 390) return;
-    const R = r.context(() => {
-      r.fromTo(
-        b,
-        { opacity: 0 },
-        { opacity: 1, duration: 1.2, ease: "power2.out" }
-      );
-      const x = [i.current, u.current, m.current].filter(Boolean);
-      r.fromTo(
-        x,
-        { opacity: 0, y: 18 },
-        {
-          opacity: 1,
-          y: 0,
-          duration: 0.85,
-          ease: "power2.out",
-          stagger: 0.2,
-          delay: 0.4
-        }
-      ), r.fromTo(
-        f,
-        { scale: 1.08, opacity: 0 },
-        { scale: 1, opacity: 1, duration: 2, ease: "power1.out" }
-      ), r.to(f, {
-        y: "15%",
-        ease: "none",
-        scrollTrigger: {
-          trigger: _,
-          start: "top top",
-          end: "bottom top",
-          scrub: !0
-        }
-      });
-    }, s);
-    return () => R.revert();
-  }, []), /* @__PURE__ */ p("div", { ref: s, className: t.hero, children: [
-    /* @__PURE__ */ o("div", { ref: l, className: t.heroBg, style: { backgroundImage: `url(${d})`, backgroundPosition: g, opacity: 0 } }),
-    /* @__PURE__ */ p("div", { ref: a, className: t.overlay, style: { opacity: 0 }, children: [
-      n && /* @__PURE__ */ o("p", { ref: i, className: t.eyebrow, children: n }),
-      /* @__PURE__ */ o("h1", { ref: u, className: t.title, children: y(h) }),
-      c && /* @__PURE__ */ o("div", { ref: m, className: t.subtitle, children: y(c) })
-    ] })
-  ] });
-};
-export {
-  q as default
-};

package/dist/components/PageContainer/PageContainer.js

@@ -1,39 +0,0 @@
-"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

@@ -1,92 +0,0 @@
-"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
-};