@courtneyring/components-library 1.0.35 → 1.0.37
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/FloatingWordsHero.css +1 -1
- package/dist/assets/OverlayHero.css +1 -1
- package/dist/components/FloatingWordsHero/FloatingWordsHero.js +16 -16
- package/dist/components/OverlayHero/OverlayHero.js +27 -27
- package/package.json +1 -1
- package/dist/AccordionItem-DUGBw5pW 2.js +0 -40
- package/dist/ScrollTrigger-6HnikosL 3.js +0 -1086
- package/dist/animations/FadeIn 3.js +0 -34
- package/dist/assets/AccordionItem 4.css +0 -1
- package/dist/assets/Banner 3.css +0 -1
- package/dist/assets/BorderedBackground 4.css +0 -1
- package/dist/assets/Button 4.css +0 -1
- package/dist/assets/ButtonGroup 4.css +0 -1
- package/dist/assets/Container 4.css +0 -1
- package/dist/assets/Countdown 4.css +0 -1
- package/dist/assets/Fifty 4.css +0 -1
- package/dist/assets/FloatingWordsHero 4.css +0 -1
- package/dist/assets/Footer 4.css +0 -1
- package/dist/assets/GenericOverlay 4.css +0 -1
- package/dist/assets/GridGallery 4.css +0 -1
- package/dist/assets/HorizontalScrollImages 4.css +0 -1
- package/dist/assets/IconDetail 4.css +0 -1
- package/dist/assets/ImageTextBlock 4.css +0 -1
- package/dist/assets/Map 4.css +0 -1
- package/dist/assets/MenuButton 4.css +0 -1
- package/dist/assets/Navbar 4.css +0 -1
- package/dist/assets/Note 4.css +0 -1
- package/dist/assets/Overlay 4.css +0 -1
- package/dist/assets/OverlayHero 4.css +0 -1
- package/dist/assets/PageContainer 4.css +0 -1
- package/dist/assets/ParallaxImageGrid 4.css +0 -1
- package/dist/assets/PinnedImage 4.css +0 -1
- package/dist/assets/PromoGroup 4.css +0 -1
- package/dist/assets/RSVPEmbed 4.css +0 -1
- package/dist/assets/Schedule 4.css +0 -1
- package/dist/assets/TextBlock 4.css +0 -1
- package/dist/assets/Timeline 3.css +0 -1
- package/dist/assets/Toolbar 3.css +0 -1
- package/dist/hooks/useActiveSection 4.js +0 -27
- package/dist/hooks/useFadeIn 4.js +0 -52
- package/dist/hooks/useImageReveal 4.js +0 -55
- package/dist/hooks/useNavColor 4.js +0 -15
- package/dist/hooks/useRepeatable 4.js +0 -32
- package/dist/hooks/useResize 4.js +0 -23
- package/dist/hooks/useResponsive 4.js +0 -15
- package/dist/hooks/useReveal 4.js +0 -38
- package/dist/hooks/useStagger 4.js +0 -43
- package/dist/index 4.js +0 -50
- package/dist/index-B2JRaoNz 4.js +0 -48
- package/dist/index-BmTo-IS6 4.js +0 -2018
- package/dist/index-DyQs5aC7 4.js +0 -388
- package/dist/index-K0WrPJ_C 4.js +0 -29
- package/dist/index.modern-DPbS1w7M 4.js +0 -1443
- package/dist/presets/animations 4.js +0 -24
- package/dist/utils/breakpoints 4.js +0 -8
- package/dist/utils/gsapSetup 4.js +0 -8
- package/dist/utils/parse 4.js +0 -12
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._hero_b3fj4_1{height:100svh;display:flex;flex-direction:column;align-items:center;position:relative;overflow:hidden}._hero_b3fj4_1:before{content:"";position:absolute;inset:0;background:#fff;animation:_fadeOutWhite_b3fj4_1 2s ease forwards;z-index:1}._hero_b3fj4_1:after{content:"";position:absolute;bottom:0;left:0;right:0;height:40%;background:linear-gradient(to bottom,transparent,#344149);z-index:2}._buttonGroup_b3fj4_28{justify-content:center}._heroBg_b3fj4_32{position:absolute;inset:-3%;background-size:cover;background-position:center;will-change:transform}._content_b3fj4_40{position:absolute;text-align:center;top:var(--floating-words-hero-content-top);right:var(--floating-words-hero-content-right);z-index:3}._title_b3fj4_48{font-family:var(--font-secondary);font-size:clamp(2.5rem,13vw,8.5rem);margin-bottom:30px;opacity:0;transform:translateY(24px);animation:_slideIn_b3fj4_1 2s ease forwards;animation-delay:1s}._title_b3fj4_48>*{font-family:inherit}._subtitle_b3fj4_62{font-size:clamp(10px,5vw,30px);text-transform:uppercase;letter-spacing:3px;margin-bottom:30px;opacity:0;transform:translateY(24px);animation:_slideIn_b3fj4_1 2s ease forwards;animation-delay:1.3s}._content_b3fj4_40>div:last-child{opacity:0;transform:translateY(24px);animation:_slideIn_b3fj4_1 2s ease forwards;animation-delay:1.6s}._arrow_b3fj4_80{position:absolute;bottom:20px;left:50%;transform:translate(-50%);z-index:3;opacity:0;animation:_fadeInArrow_b3fj4_1 .6s ease forwards 1.6s;cursor:pointer}._arrowCircle_b3fj4_91{width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;color:#fff}._arrowCircle_b3fj4_91 svg{display:block;animation:_bounceChevron_b3fj4_1 1.6s ease-in-out infinite 2.2s}@keyframes _fadeInArrow_b3fj4_1{to{opacity:1}}@keyframes _bounce_b3fj4_1{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(10px)}}@keyframes _bounceChevron_b3fj4_1{0%,to{transform:translateY(0)}50%{transform:translateY(3px)}}@keyframes _fadeOutWhite_b3fj4_1{0%{opacity:1}to{opacity:0;pointer-events:none}}@keyframes _slideIn_b3fj4_1{to{opacity:1;transform:translateY(0)}}@media (min-width: 790px) and (orientation: landscape){._title_b3fj4_48{font-size:clamp(2.5rem,10vw,8.5rem);margin-bottom:15px}._subtitle_b3fj4_62{font-size:clamp(10px,2.5vw,30px);margin-bottom:20px;display:flex;justify-content:flex-end}._content_b3fj4_40{text-align:end}._buttonGroup_b3fj4_28{justify-content:flex-end}}@media (min-width: 1200px){._title_b3fj4_48{margin-bottom:40px}._subtitle_b3fj4_62{font-size:clamp(10px,2vw,30px);margin-bottom:40px}._arrow_b3fj4_80{bottom:50px}._arrowCircle_b3fj4_91{width:50px;height:50px}@keyframes _bounce_b3fj4_1{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(15px)}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--overlay-font-size: clamp(1rem, 2.5cqw, 2.25rem)}.
|
|
1
|
+
:root{--overlay-font-size: clamp(1rem, 2.5cqw, 2.25rem)}._hero_7ipms_5{display:flex;align-items:center;justify-content:center;width:100%;height:100svh;padding:30% 10%;position:relative;overflow:hidden}._hero_7ipms_5:before{content:"";position:absolute;inset:0;background:#fff;z-index:100;pointer-events:none;animation:_fadeOutWhite_7ipms_1 1.5s ease forwards 1s;opacity:1}@keyframes _fadeOutWhite_7ipms_1{0%{opacity:1}to{opacity:0}}._heroBg_7ipms_34{position:absolute;inset:-10%;background-size:cover;background-position:center;will-change:transform}._overlay_7ipms_42{display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:var(--color-primary-dark);background-color:rgb(from var(--color-primary-dark) r g b/.8);color:var(--color-white);opacity:0;text-align:center;position:relative;width:100%;height:100%;aspect-ratio:4/5}@supports not (background-color: rgb(from white r g b/.8)){._hero_7ipms_5{padding:0}._overlay_7ipms_42{background-color:var(--color-primary-dark);min-width:100%!important;min-height:100%!important;opacity:1}}._eyebrow_7ipms_69{font-size:var(--overlay-font-size);text-transform:uppercase;letter-spacing:3px;font-weight:300}._title_7ipms_76{display:flex;flex-direction:column}._title_7ipms_76,._title_7ipms_76>*{font-family:var(--font-secondary);font-size:clamp(2.75rem,8cqw,9.5rem);line-height:1.2;margin-top:0}._eyebrow_7ipms_69,._title_7ipms_76{margin-bottom:20px}._subtitle_7ipms_94{font-size:var(--overlay-font-size);letter-spacing:3px}._subtitle_7ipms_94>p{text-transform:uppercase}._subtitle_7ipms_94>p,._subtitle_7ipms_94 i{margin-bottom:10px;margin-top:0;font-weight:300}@media (min-width: 390px){._title_7ipms_76,._title_7ipms_76>*{line-height:1.2}._eyebrow_7ipms_69,._title_7ipms_76{margin-bottom:30px}}@media (min-width: 390px){._overlay_7ipms_42{aspect-ratio:unset}._title_7ipms_76{flex-direction:row}._eyebrow_7ipms_69,._title_7ipms_76{margin-bottom:10px}}@media (min-width: 625px){._title_7ipms_76,._title_7ipms_76>*{line-height:1.2}._hero_7ipms_5{padding:15%}._subtitle_7ipms_94,._eyebrow_7ipms_69{font-size:20px}}@media (min-width: 790px) and (orientation: landscape){._hero_7ipms_5{padding:10%}._eyebrow_7ipms_69,._title_7ipms_76{margin-bottom:15px}}@media (min-width: 992px) and (orientation: landscape){._eyebrow_7ipms_69,._title_7ipms_76{margin-bottom:30px}}@media (min-width: 1200px){._hero_7ipms_5{padding:7% 10%}}
|
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
import { jsxs as l, jsx as e } from "react/jsx-runtime";
|
|
3
3
|
import a from "../../utils/parse.js";
|
|
4
4
|
import "../../index-B2JRaoNz.js";
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import { useRef as u, useEffect as
|
|
5
|
+
import b from "../ButtonGroup/ButtonGroup.js";
|
|
6
|
+
import w from "../../hooks/useResize.js";
|
|
7
|
+
import { useRef as u, useEffect as j } from "react";
|
|
8
8
|
import { g as o } from "../../index-BmTo-IS6.js";
|
|
9
|
-
import { S as
|
|
10
|
-
import '../../assets/FloatingWordsHero.css';const N = "
|
|
9
|
+
import { S as v } from "../../ScrollTrigger-6HnikosL.js";
|
|
10
|
+
import '../../assets/FloatingWordsHero.css';const N = "_hero_b3fj4_1", k = "_buttonGroup_b3fj4_28", x = "_heroBg_b3fj4_32", B = "_content_b3fj4_40", C = "_title_b3fj4_48", R = "_subtitle_b3fj4_62", G = "_arrow_b3fj4_80", S = "_arrowCircle_b3fj4_91", r = {
|
|
11
11
|
hero: N,
|
|
12
12
|
buttonGroup: k,
|
|
13
13
|
heroBg: x,
|
|
@@ -17,14 +17,14 @@ import '../../assets/FloatingWordsHero.css';const N = "_hero_4e3sz_1", k = "_but
|
|
|
17
17
|
arrow: G,
|
|
18
18
|
arrowCircle: S
|
|
19
19
|
};
|
|
20
|
-
o.registerPlugin(
|
|
21
|
-
const $ = ({ image: d, pos: m, eyebrow:
|
|
22
|
-
const { innerWidth:
|
|
23
|
-
document.getElementById(
|
|
20
|
+
o.registerPlugin(v);
|
|
21
|
+
const $ = ({ image: d, pos: m, eyebrow: n, title: h, subtitle: s, cta: y, contentPos: W, ctas: c, scrollToId: f }) => {
|
|
22
|
+
const { innerWidth: I, innerHeight: P } = w(), t = u(null), i = u(null), p = () => {
|
|
23
|
+
document.getElementById(f).scrollIntoView({ behavior: "smooth" });
|
|
24
24
|
};
|
|
25
|
-
return
|
|
25
|
+
return j(() => {
|
|
26
26
|
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
|
|
27
|
-
const
|
|
27
|
+
const _ = o.context(() => {
|
|
28
28
|
o.to(i.current, {
|
|
29
29
|
y: "15%",
|
|
30
30
|
ease: "none",
|
|
@@ -36,7 +36,7 @@ const $ = ({ image: d, pos: m, eyebrow: s, title: h, subtitle: n, cta: y, conten
|
|
|
36
36
|
}
|
|
37
37
|
});
|
|
38
38
|
}, t);
|
|
39
|
-
return () =>
|
|
39
|
+
return () => _.revert();
|
|
40
40
|
}, []), /* @__PURE__ */ l("div", { ref: t, className: r.hero, children: [
|
|
41
41
|
/* @__PURE__ */ e(
|
|
42
42
|
"div",
|
|
@@ -47,12 +47,12 @@ const $ = ({ image: d, pos: m, eyebrow: s, title: h, subtitle: n, cta: y, conten
|
|
|
47
47
|
}
|
|
48
48
|
),
|
|
49
49
|
/* @__PURE__ */ l("div", { className: r.content, children: [
|
|
50
|
-
|
|
50
|
+
n && /* @__PURE__ */ e("p", { className: r.eyebrow, children: n }),
|
|
51
51
|
/* @__PURE__ */ e("h1", { className: r.title, children: a(h) }),
|
|
52
|
-
|
|
53
|
-
c && /* @__PURE__ */ e(
|
|
52
|
+
s && /* @__PURE__ */ e("div", { className: r.subtitle, children: a(s) }),
|
|
53
|
+
c && /* @__PURE__ */ e(b, { ctas: c, className: r.buttonGroup })
|
|
54
54
|
] }),
|
|
55
|
-
/* @__PURE__ */ e("div", { className: r.arrow, onClick:
|
|
55
|
+
/* @__PURE__ */ e("div", { className: r.arrow, onClick: p, 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" }) }) }) })
|
|
56
56
|
] });
|
|
57
57
|
};
|
|
58
58
|
export {
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsxs as
|
|
2
|
+
import { jsxs as f, jsx as o } from "react/jsx-runtime";
|
|
3
3
|
import y from "../../utils/parse.js";
|
|
4
4
|
import { useRef as e, useEffect as N } from "react";
|
|
5
|
-
import { g as
|
|
5
|
+
import { g as t } from "../../index-BmTo-IS6.js";
|
|
6
6
|
import { S as B } from "../../ScrollTrigger-6HnikosL.js";
|
|
7
7
|
import T from "../../hooks/useResize.js";
|
|
8
|
-
import '../../assets/OverlayHero.css';const S = "
|
|
8
|
+
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 = {
|
|
9
9
|
hero: S,
|
|
10
10
|
heroBg: j,
|
|
11
11
|
overlay: k,
|
|
@@ -13,39 +13,39 @@ import '../../assets/OverlayHero.css';const S = "_hero_m6nvt_5", j = "_heroBg_m6
|
|
|
13
13
|
title: P,
|
|
14
14
|
subtitle: W
|
|
15
15
|
};
|
|
16
|
-
|
|
17
|
-
const q = ({ text: z, image: d, pos: g, eyebrow:
|
|
18
|
-
const { innerWidth:
|
|
16
|
+
t.registerPlugin(B);
|
|
17
|
+
const q = ({ text: z, image: d, pos: g, eyebrow: c, title: h, subtitle: i }) => {
|
|
18
|
+
const { innerWidth: _ } = T(), s = e(null), n = e(), l = e(null), a = e(null), u = e(null), m = e(null);
|
|
19
19
|
return N(() => {
|
|
20
|
-
const
|
|
21
|
-
if (w ||
|
|
22
|
-
const R =
|
|
23
|
-
|
|
24
|
-
|
|
20
|
+
const b = s.current, v = l.current, w = window.matchMedia("(prefers-reduced-motion: reduce)").matches, p = n.current;
|
|
21
|
+
if (w || _ < 390) return;
|
|
22
|
+
const R = t.context(() => {
|
|
23
|
+
t.fromTo(
|
|
24
|
+
v,
|
|
25
25
|
{ opacity: 0 },
|
|
26
26
|
{ opacity: 1, duration: 1.2, ease: "power2.out" }
|
|
27
27
|
);
|
|
28
|
-
const x = [
|
|
29
|
-
|
|
28
|
+
const x = [a.current, u.current, m.current].filter(Boolean);
|
|
29
|
+
t.fromTo(
|
|
30
30
|
x,
|
|
31
|
-
{ opacity: 0, y:
|
|
31
|
+
{ opacity: 0, y: 10 },
|
|
32
32
|
{
|
|
33
33
|
opacity: 1,
|
|
34
34
|
y: 0,
|
|
35
|
-
duration:
|
|
35
|
+
duration: 1,
|
|
36
36
|
ease: "power2.out",
|
|
37
37
|
stagger: 0.2,
|
|
38
|
-
delay:
|
|
38
|
+
delay: 1.2
|
|
39
39
|
}
|
|
40
|
-
),
|
|
41
|
-
|
|
42
|
-
{ scale: 1.
|
|
40
|
+
), t.fromTo(
|
|
41
|
+
p,
|
|
42
|
+
{ scale: 1.1, opacity: 0 },
|
|
43
43
|
{ scale: 1, opacity: 1, duration: 2, ease: "power1.out" }
|
|
44
|
-
),
|
|
44
|
+
), t.to(p, {
|
|
45
45
|
y: "15%",
|
|
46
46
|
ease: "none",
|
|
47
47
|
scrollTrigger: {
|
|
48
|
-
trigger:
|
|
48
|
+
trigger: b,
|
|
49
49
|
start: "top top",
|
|
50
50
|
end: "bottom top",
|
|
51
51
|
scrub: !0
|
|
@@ -53,12 +53,12 @@ const q = ({ text: z, image: d, pos: g, eyebrow: n, title: h, subtitle: c }) =>
|
|
|
53
53
|
});
|
|
54
54
|
}, s);
|
|
55
55
|
return () => R.revert();
|
|
56
|
-
}, []), /* @__PURE__ */
|
|
57
|
-
/* @__PURE__ */ o("div", { ref:
|
|
58
|
-
/* @__PURE__ */
|
|
59
|
-
|
|
60
|
-
/* @__PURE__ */ o("h1", { ref: u, className:
|
|
61
|
-
|
|
56
|
+
}, []), /* @__PURE__ */ f("div", { ref: s, className: r.hero, children: [
|
|
57
|
+
/* @__PURE__ */ o("div", { ref: n, className: r.heroBg, style: { backgroundImage: `url(${d})`, backgroundPosition: g, opacity: 0 } }),
|
|
58
|
+
/* @__PURE__ */ f("div", { ref: l, className: r.overlay, style: { opacity: 0 }, children: [
|
|
59
|
+
c && /* @__PURE__ */ o("p", { ref: a, className: r.eyebrow, children: c }),
|
|
60
|
+
/* @__PURE__ */ o("h1", { ref: u, className: r.title, children: y(h) }),
|
|
61
|
+
i && /* @__PURE__ */ o("div", { ref: m, className: r.subtitle, children: y(i) })
|
|
62
62
|
] })
|
|
63
63
|
] });
|
|
64
64
|
};
|
package/package.json
CHANGED
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import { jsxs as _, jsx as o } from "react/jsx-runtime";
|
|
2
|
-
import r from "./utils/parse.js";
|
|
3
|
-
import { c as t } from "./index-B2JRaoNz.js";
|
|
4
|
-
import './assets/AccordionItem.css';const s = "_accordion_13pfc_1", d = "_title_13pfc_8", l = "_accordion__item_13pfc_11", p = "_header_13pfc_14", m = "_accordion__icon_13pfc_101", f = "_open_13pfc_180", b = "_accordion__button_13pfc_184", h = "_accordion__content_13pfc_254", N = "_body_13pfc_262", c = {
|
|
5
|
-
accordion: s,
|
|
6
|
-
title: d,
|
|
7
|
-
accordion__item: l,
|
|
8
|
-
header: p,
|
|
9
|
-
accordion__icon: m,
|
|
10
|
-
open: f,
|
|
11
|
-
accordion__button: b,
|
|
12
|
-
accordion__content: h,
|
|
13
|
-
body: N
|
|
14
|
-
}, x = ({ title: a, body: i, toggleFn: e, isOpen: n }) => /* @__PURE__ */ _("div", { className: t(c.accordion__item, n && c.open), children: [
|
|
15
|
-
/* @__PURE__ */ _(
|
|
16
|
-
"button",
|
|
17
|
-
{
|
|
18
|
-
className: t(c.accordion__button),
|
|
19
|
-
onClick: () => e(!n),
|
|
20
|
-
children: [
|
|
21
|
-
/* @__PURE__ */ _("div", { className: c.accordion__icon, children: [
|
|
22
|
-
/* @__PURE__ */ o("span", {}),
|
|
23
|
-
/* @__PURE__ */ o("span", { className: `${n ? c.open : ""}` })
|
|
24
|
-
] }),
|
|
25
|
-
/* @__PURE__ */ o("span", { className: c.title, children: a })
|
|
26
|
-
]
|
|
27
|
-
}
|
|
28
|
-
),
|
|
29
|
-
/* @__PURE__ */ o(
|
|
30
|
-
"div",
|
|
31
|
-
{
|
|
32
|
-
className: t(c.accordion__content, n && c.open),
|
|
33
|
-
children: /* @__PURE__ */ o("div", { className: c.body, children: r(i) })
|
|
34
|
-
}
|
|
35
|
-
)
|
|
36
|
-
] });
|
|
37
|
-
export {
|
|
38
|
-
x as A,
|
|
39
|
-
c as s
|
|
40
|
-
};
|