@courtneyring/components-library 1.0.30 → 1.0.32

package/dist/components/Banner/Banner.js

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

package/dist/components/BorderedBackground/BorderedBackground.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs as v, jsx as _ } from "react/jsx-runtime";
-import { c as a } from "../../index-BIlioXmW.js";
+import { c as a } from "../../index-B2JRaoNz.js";
 import '../../assets/BorderedBackground.css';const q = "_container_atjqo_1", d = "_corner_atjqo_10", m = "_lineh_atjqo_37", p = "_linev_atjqo_38", u = "_h0_atjqo_55", b = "_v0_atjqo_59", w = "_h1_atjqo_63", N = "_v1_atjqo_67", f = "_h2_atjqo_71", x = "_v2_atjqo_75", y = "_tr_atjqo_79", $ = "_bl_atjqo_120", t = {
   container: q,
   corner: d,

package/dist/components/Button/Button.js

@@ -1,37 +1,44 @@
 "use client";
-import { jsxs as i, jsx as u } from "react/jsx-runtime";
-import '../../assets/Button.css';const m = "_button_1cz9b_1", f = "_hollow_1cz9b_103", h = "_filled_1cz9b_106", k = "_link_1cz9b_142", l = {
-  button: m,
-  hollow: f,
+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_13x2k_1", b = "_hollow_13x2k_108", h = "_filled_13x2k_111", p = "_link_13x2k_147", l = {
+  button: x,
+  hollow: b,
   filled: h,
-  link: k
-}, y = ({
-  children: a,
+  link: p
+}, g = ({
+  children: c,
   fn: o,
   href: t,
   target: r,
   hollow: _ = !1,
   variation: s = "color-primary-dark",
-  textDecoration: b,
+  textDecoration: i,
   label: d,
   value: n,
-  icon: c,
-  onClick: e
-}) => /* @__PURE__ */ i(
+  icon: a,
+  onClick: e,
+  className: m
+}) => /* @__PURE__ */ u(
   t || n ? "a" : "button",
   {
     href: t || n,
     onClick: o || e ? o || e : null,
     target: r,
-    className: `${l.button} ${_ ? l.hollow : l.filled} ${l[s]}`,
-    style: { textDecoration: b },
+    className: f(
+      l.button,
+      _ ? l.hollow : l.filled,
+      l[s],
+      m
+    ),
+    style: { textDecoration: i },
     "data-color": s,
     children: [
-      a || d,
-      c && /* @__PURE__ */ u("span", { className: "material-symbols-outlined", children: c })
+      c || d,
+      a && /* @__PURE__ */ k("span", { className: "material-symbols-outlined", children: a })
     ]
   }
 );
 export {
-  y as default
+  g as default
 };

package/dist/components/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,11 @@
+"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_1w1h9_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/Container/Container.js

@@ -1,45 +1,48 @@
 "use client";
 import { jsx as n } from "react/jsx-runtime";
-import { c as t } from "../../index-BIlioXmW.js";
-import { useRef as _ } from "react";
-import "../../Particles-CKNJUrOc.js";
-import '../../assets/Container.css';const u = "_container_xosaf_1", x = "_innerContainer_xosaf_36", y = "_styleless_xosaf_127", e = {
+import { c as t } from "../../index-B2JRaoNz.js";
+import { useRef as p } from "react";
+import '../../assets/Container.css';const u = "_container_zvphg_1", g = "_innerContainer_zvphg_37", y = "_styleless_zvphg_140", e = {
   container: u,
-  innerContainer: x,
+  innerContainer: g,
   styleless: y
-}, N = ({
+}, z = ({
   color: s,
-  children: a,
-  maxWidth: r,
+  children: r,
+  maxWidth: a,
   styleless: o,
   backgroundImage: i,
   backgroundPosition: l,
   fullHeight: c,
   center: m,
-  hide: f
+  hide: d,
+  id: _,
+  ...f
 }) => {
-  const d = _();
-  if (!f)
+  const h = p();
+  if (!d)
     return /* @__PURE__ */ n(
       "div",
       {
         className: t(e.container, o && e.styleless),
         "data-color": s,
-        ref: d,
+        ref: h,
         style: { backgroundImage: `url(${i})`, backgroundPosition: l },
         "data-full-height": c,
         "data-center": m,
+        ...f,
         children: /* @__PURE__ */ n(
           "div",
           {
             className: t(e.innerContainer),
-            "data-max-width": r,
-            children: a
+            "data-max-width": a,
+            id: _,
+            children: r
           }
         )
       }
     );
 };
 export {
-  N as default
+  z as default
 };

package/dist/components/Countdown/Countdown.js

@@ -1,29 +1,41 @@
 "use client";
-import { jsx as t, jsxs as i } from "react/jsx-runtime";
-import { useState as u, useEffect as d } from "react";
-import '../../assets/Countdown.css';const f = "_countdown_1ilam_1", m = "_block_1ilam_12", s = {
-  countdown: f,
-  block: m
-}, w = ({ targetDate: c }) => {
-  const n = () => {
-    const e = new Date(c) - /* @__PURE__ */ new Date();
-    return e <= 0 ? null : {
-      days: Math.floor(e / 864e5),
-      hours: Math.floor(e / 36e5 % 24),
-      minutes: Math.floor(e / 1e3 / 60 % 60),
-      seconds: Math.floor(e / 1e3 % 60)
+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_px87l_1", g = "_block_px87l_12", r = {
+  countdown: h,
+  block: g
+}, k = ({ 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)
     };
-  }, [o, r] = u(n()), a = ["days", "hours", "minutes", "seconds"];
-  return d(() => {
-    const e = setInterval(() => {
-      r(n());
+  }, [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(e);
-  }, []), o ? /* @__PURE__ */ t("div", { className: s.countdown, children: a.map((e, l) => /* @__PURE__ */ i("div", { className: s.block, children: [
-    /* @__PURE__ */ t("span", { children: o[e] }),
-    /* @__PURE__ */ t("span", { children: e })
-  ] }, `countdown-${l}`)) }) : /* @__PURE__ */ t("span", { children: "Time’s up" });
+    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 {
-  w as default
+  k as default
 };

package/dist/components/Fifty/Fifty.js

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

package/dist/components/FloatingWordsHero/FloatingWordsHero.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import u from "../../utils/parse.js";
+import "../../index-B2JRaoNz.js";
+import w from "../ButtonGroup/ButtonGroup.js";
+import b from "../../hooks/useResize.js";
+import { useRef as a, useEffect as v } from "react";
+import { g as o } from "../../index-BmTo-IS6.js";
+import { S as N } from "../../ScrollTrigger-6HnikosL.js";
+import '../../assets/FloatingWordsHero.css';const k = "_hero_ug1ep_1", x = "_buttonGroup_ug1ep_28", B = "_heroBg_ug1ep_32", C = "_content_ug1ep_40", R = "_title_ug1ep_48", G = "_subtitle_ug1ep_62", S = "_arrow_ug1ep_80", y = "_arrowCircle_ug1ep_91", r = {
+  hero: k,
+  buttonGroup: x,
+  heroBg: B,
+  content: C,
+  title: R,
+  subtitle: G,
+  arrow: S,
+  arrowCircle: y
+};
+o.registerPlugin(N);
+const $ = ({ image: d, pos: p, eyebrow: n, title: g, subtitle: s, cta: W, contentPos: j, ctas: c, scrollToId: m }) => {
+  const { innerWidth: I, innerHeight: P } = b(), t = a(null), i = a(null), h = () => {
+    document.getElementById(m).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: p }
+      }
+    ),
+    /* @__PURE__ */ l("div", { className: r.content, children: [
+      n && /* @__PURE__ */ e("p", { className: r.eyebrow, children: n }),
+      /* @__PURE__ */ e("h1", { className: r.title, children: u(g) }),
+      s && /* @__PURE__ */ e("div", { className: r.subtitle, children: u(s) }),
+      c && /* @__PURE__ */ e(w, { ctas: c, className: r.buttonGroup })
+    ] }),
+    /* @__PURE__ */ e("div", { className: r.arrow, onClick: h, 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/Footer/Footer.js

@@ -1,13 +1,13 @@
 "use client";
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import '../../assets/Footer.css';const r = "_footer_1yn3n_2", a = "_image_1yn3n_50", c = "_text_1yn3n_55", t = {
-  footer: r,
-  image: a,
-  text: c
-}, _ = ({ logo: o, logoText: s }) => /* @__PURE__ */ n("footer", { className: t.footer, children: [
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import '../../assets/Footer.css';const a = "_footer_141jj_2", c = "_image_141jj_58", m = "_text_141jj_63", t = {
+  footer: a,
+  image: c,
+  text: m
+}, i = ({ logo: o, logoText: s }) => /* @__PURE__ */ r("footer", { className: t.footer, children: [
   /* @__PURE__ */ e("img", { src: o, className: t.image }),
   /* @__PURE__ */ e("p", { className: t.text, children: s })
 ] });
 export {
-  _ as default
+  i as default
 };

package/dist/components/GenericOverlay/GenericOverlay.js

@@ -1,21 +1,21 @@
 "use client";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import l from "../../utils/parse.js";
+import a from "../../utils/parse.js";
 import s from "../Button/Button.js";
-import '../../assets/GenericOverlay.css';const i = "_overlay_5xrtv_2", v = "_content_5xrtv_53", d = "_ctas_5xrtv_137", e = {
+import '../../assets/GenericOverlay.css';const i = "_overlay_oltvp_2", v = "_content_oltvp_61", d = "_ctas_oltvp_150", e = {
   overlay: i,
   content: v,
   ctas: d
-}, x = ({ header: o, body: a, primaryCta: r, secondaryCta: c }) => /* @__PURE__ */ t("div", { className: e.overlay, children: /* @__PURE__ */ n("div", { className: e.innerContainer, children: [
-  /* @__PURE__ */ t("h2", { children: o }),
+}, p = ({ header: r, body: l, primaryCta: o, secondaryCta: c }) => /* @__PURE__ */ t("div", { className: e.overlay, children: /* @__PURE__ */ n("div", { className: e.innerContainer, children: [
+  /* @__PURE__ */ t("h2", { children: r }),
   /* @__PURE__ */ n("div", { className: e.content, children: [
-    /* @__PURE__ */ t("div", { children: l(a) }),
+    /* @__PURE__ */ t("div", { children: a(l) }),
     /* @__PURE__ */ n("div", { className: e.ctas, children: [
-      r && /* @__PURE__ */ t(s, { ...r }),
+      o && /* @__PURE__ */ t(s, { ...o }),
       c && /* @__PURE__ */ t(s, { ...c })
     ] })
   ] })
 ] }) });
 export {
-  x as default
+  p as default
 };

package/dist/components/GridGallery/GridGallery.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import { c } from "../../index-BIlioXmW.js";
+import { c } from "../../index-B2JRaoNz.js";
 import '../../assets/GridGallery.css';const m = "_gallery_xj28v_1", o = "_image_xj28v_6", i = "_row_xj28v_15", t = "_reverse_xj28v_30", r = {
   gallery: m,
   image: o,

package/dist/components/HorizontalScrollImages/HorizontalScrollImages.js

@@ -1,18 +1,19 @@
 "use client";
 import { jsx as r } from "react/jsx-runtime";
-import { g as o, S as p } from "../../ScrollTrigger-DDbij8gI.js";
-import { useRef as s, useEffect as m } from "react";
-import '../../assets/HorizontalScrollImages.css';const g = "_container_b5pev_1", f = "_scrollWrapper_b5pev_8", u = "_imageWrapper_b5pev_17", a = {
+import { g as a } from "../../index-BmTo-IS6.js";
+import { S as p } from "../../ScrollTrigger-6HnikosL.js";
+import { useRef as o, useEffect as m } from "react";
+import '../../assets/HorizontalScrollImages.css';const g = "_container_b5pev_1", f = "_scrollWrapper_b5pev_8", u = "_imageWrapper_b5pev_17", s = {
   container: g,
   scrollWrapper: f,
   imageWrapper: u
 };
-o.registerPlugin(p);
-const v = () => {
-  const e = s(null), i = s([]), n = s();
+a.registerPlugin(p);
+const b = () => {
+  const e = o(null), i = o([]), n = o();
   return m(() => {
-    const t = o.context(() => {
-      o.to(n.current, {
+    const t = a.context(() => {
+      a.to(n.current, {
         x: () => -window.innerWidth * 1.2,
         ease: "none",
         scrollTrigger: {
@@ -27,13 +28,13 @@ const v = () => {
   }, [images]), /* @__PURE__ */ r(
     "div",
     {
-      className: a.container,
+      className: s.container,
       ref: e,
       style: { "--images": images.length },
-      children: /* @__PURE__ */ r("div", { className: a.scrollWrapper, ref: n, children: images.map((t, c) => /* @__PURE__ */ r(
+      children: /* @__PURE__ */ r("div", { className: s.scrollWrapper, ref: n, children: images.map((t, c) => /* @__PURE__ */ r(
         "div",
         {
-          className: a.imageWrapper,
+          className: s.imageWrapper,
           ref: (l) => i.current[c] = l,
           children: /* @__PURE__ */ r("img", { src: t.src, alt: "" })
         },
@@ -43,5 +44,5 @@ const v = () => {
   );
 };
 export {
-  v as default
+  b as default
 };

package/dist/components/IconDetail/IconDetail.js

@@ -1,13 +1,13 @@
 "use client";
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { jsxs as i, jsx as l } from "react/jsx-runtime";
 import o from "../../utils/parse.js";
-import { c as r } from "../../index-BIlioXmW.js";
-import '../../assets/IconDetail.css';const c = "_detail_4rjme_1", m = "_label_4rjme_53", a = {
-  detail: c,
-  label: m
-}, b = ({ icon: l, text: s, href: t }) => /* @__PURE__ */ i(t ? "a" : "div", { className: a.detail, children: [
-  /* @__PURE__ */ e("span", { className: r(a.icon, "material-symbols-outlined"), children: l }),
-  /* @__PURE__ */ e("div", { className: a.label, children: o(s) })
+import { c } from "../../index-B2JRaoNz.js";
+import '../../assets/IconDetail.css';const r = "_detail_1iupq_1", n = "_label_1iupq_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,33 +1,36 @@
 "use client";
-import { jsx as e, jsxs as c, Fragment as u } from "react/jsx-runtime";
-import a from "../Button/Button.js";
-import { c as f } from "../../index-BIlioXmW.js";
-import { useFadeIn as i } from "../../hooks/useFadeIn.js";
-import g from "../../utils/parse.js";
-import { Children as b } from "react";
-import '../../assets/ImageTextBlock.css';const v = "_block_hnnuu_1", N = "_container_hnnuu_5", p = "_reverse_hnnuu_11", k = "_content_hnnuu_15", x = "_header_hnnuu_20", y = "_body_hnnuu_68", I = "_ctas_hnnuu_115", j = "_image_hnnuu_119", n = {
-  block: v,
-  container: N,
-  reverse: p,
-  content: k,
+import { jsx as e, jsxs as s, Fragment as v } from "react/jsx-runtime";
+import i from "../Button/Button.js";
+import { c as f } 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 w } from "../../hooks/useReveal.js";
+import { useImageReveal as N } from "../../hooks/useImageReveal.js";
+import '../../assets/ImageTextBlock.css';const u = "_container_7w6eh_1", k = "_reverse_7w6eh_7", R = "_content_7w6eh_11", x = "_header_7w6eh_16", y = "_body_7w6eh_64", j = "_ctas_7w6eh_116", I = "_image_7w6eh_120", B = "_block_7w6eh_180", o = {
+  container: u,
+  reverse: k,
+  content: R,
   header: x,
   body: y,
-  ctas: I,
-  image: j
-}, z = ({ image: d, header: m, body: l, primaryCta: o, secondaryCta: s, reverse: t, children: r }) => {
-  const _ = i({ direction: t ? "right" : "left" }), h = i({ direction: t ? "right" : "left" });
-  return /* @__PURE__ */ e("div", { className: f(n.block, t && n.reverse), children: /* @__PURE__ */ c("div", { className: n.container, children: [
-    /* @__PURE__ */ e("div", { className: n.image, ref: _, children: /* @__PURE__ */ e("img", { src: d }) }),
-    /* @__PURE__ */ c("div", { className: n.content, ref: h, children: [
-      /* @__PURE__ */ e("h2", { className: n.header, children: m }),
-      /* @__PURE__ */ e("div", { className: n.body, children: g(l) }),
-      b.count(r) > 0 ? r : /* @__PURE__ */ e(u, { children: /* @__PURE__ */ c("div", { className: n.ctas, children: [
-        o && /* @__PURE__ */ e(a, { ...o }),
-        s && /* @__PURE__ */ e(a, { ...s })
+  ctas: j,
+  image: I,
+  block: B
+}, G = ({ image: m, header: t, body: c, primaryCta: r, secondaryCta: a, reverse: l, children: n, imagePos: _ }) => {
+  const d = N(), h = w({ ...b, delay: 0.2 });
+  return /* @__PURE__ */ e("div", { className: f(o.block, l && o.reverse), children: /* @__PURE__ */ s("div", { className: o.container, children: [
+    /* @__PURE__ */ e("div", { className: o.image, ref: d, children: /* @__PURE__ */ e("img", { src: m, style: { objectPosition: _ } }) }),
+    /* @__PURE__ */ s("div", { className: o.content, ref: h, children: [
+      t && /* @__PURE__ */ e("h2", { className: o.header, children: t }),
+      c && /* @__PURE__ */ e("div", { className: o.body, children: p(c) }),
+      g.count(n) > 0 ? n : /* @__PURE__ */ e(v, { children: /* @__PURE__ */ s("div", { className: o.ctas, children: [
+        r && /* @__PURE__ */ e(i, { ...r }),
+        a && /* @__PURE__ */ e(i, { ...a })
       ] }) })
     ] })
   ] }) });
 };
 export {
-  z as default
+  G as default
 };