@caseparts-org/caseblocks 0.0.135 → 0.0.137
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._root_idgma_2{position:relative;display:grid;grid-template-columns:repeat(4,1fr);background-size:cover;background-position:center;overflow:hidden;box-sizing:border-box;align-items:center}._content_idgma_13{box-sizing:border-box;width:100%;display:flex;flex-direction:column;gap:var(--spacing-spacing-default, 16px)}@media (max-width: 768px){._content_idgma_13{gap:var(--spacing-spacing-2xs)}}._variant_hero_idgma_26._align_left_idgma_26 ._content_idgma_13{grid-column:1 / span 2;padding:var(--spacing-spacing-2xl, 3rem)}@media (max-width: 1280px){._variant_hero_idgma_26._align_left_idgma_26 ._content_idgma_13{grid-column:1 / span 3}}@media (max-width: 768px){._variant_hero_idgma_26._align_left_idgma_26 ._content_idgma_13{padding:var(--spacing-spacing-default)}}._variant_hero_idgma_26._align_right_idgma_37 ._content_idgma_13{grid-column:3 / span 2;padding:var(--spacing-spacing-2xl, 3rem)}@media (max-width: 1280px){._variant_hero_idgma_26._align_right_idgma_37 ._content_idgma_13{grid-column:2 / span 3}}@media (max-width: 768px){._variant_hero_idgma_26._align_right_idgma_37 ._content_idgma_13{padding:var(--spacing-spacing-default)}}._variant_promo_idgma_48._align_left_idgma_26 ._content_idgma_13{grid-column:1 / span 3;padding:var(--spacing-spacing-default, 1rem)}._variant_promo_idgma_48._align_right_idgma_37 ._content_idgma_13{grid-column:2 / span 3;padding:var(--spacing-spacing-default, 1rem)}@media (max-width: 1280px){._variant_hero_idgma_26 ._header_idgma_59{font-size:var(--font-size-4xl);line-height:var(--line-height-4xl)}}@media (max-width: 768px){._variant_hero_idgma_26 ._header_idgma_59{font-weight:400;font-size:var(--font-size-xl);line-height:var(--line-height-xl)}}@media (max-width: 1280px){._variant_hero_idgma_26 ._description_idgma_71{font-size:var(--font-size-sm);line-height:var(--line-height-sm);margin-top:-12px}}@media (max-width: 768px){._variant_hero_idgma_26 ._description_idgma_71{font-size:var(--font-size-xs);line-height:var(--line-height-xs);margin-top:0}}._align_left_idgma_26 ._content_idgma_13{align-items:flex-start;text-align:left;justify-self:start}._align_right_idgma_37 ._content_idgma_13{align-items:flex-end;text-align:right;justify-self:end}._content_idgma_13>*{position:relative;z-index:1}._overlay_dark_idgma_103 ._header_idgma_59,._overlay_dark_idgma_103 ._description_idgma_71,._overlay_none_idgma_105 ._header_idgma_59,._overlay_none_idgma_105 ._description_idgma_71{color:var(--color-neutrals-neutral-1)}._overlay_light_idgma_110 ._header_idgma_59{color:var(--color-brand-primary-primary-teal-blue)}._overlay_light_idgma_110 ._description_idgma_71{color:#000}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._root_1565i_1{width:100%}._header_1565i_5{display:flex;align-items:center;justify-content:space-between;width:100%;gap:var(--spacing-spacing-2xs);margin-bottom:var(--spacing-spacing-2xs)}._caption_1565i_13{font-size:var(--font-size-2xl);line-height:var(--line-height-2xl)}@media (max-width:768px){._caption_1565i_13{font-size:var(--font-size-lg);line-height:var(--line-height-lg)}}._controls_1565i_21{display:flex;align-items:center;gap:var(--spacing-spacing-2xs)}._controlBtn_1565i_26{cursor:pointer;padding:0;border:none;background-color:transparent;line-height:1;display:flex;align-items:center;justify-content:center}._controlBtn_1565i_26:hover{color:var(--color-brand-primary-primary-teal-blue)}._controlBtn_1565i_26:disabled:hover{cursor:default;color:var(--color-neutrals-neutral-3)}._container_1565i_45{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;overflow-x:auto;width:100%;-webkit-overflow-scrolling:touch;cursor:grab;-webkit-user-select:none;user-select:none;overscroll-behavior:contain;touch-action:pan-x}._dragging_1565i_58{cursor:grabbing}._noOverflow_1565i_61{cursor:default}._scrollVisibility--false_1565i_66{scrollbar-width:none;-ms-overflow-style:none}._scrollVisibility--false_1565i_66::-webkit-scrollbar{display:none}._viewport_1565i_74{position:relative}._indicator_1565i_77{position:absolute;top:0;bottom:0;width:48px;pointer-events:none;opacity:1;transition:opacity .25s;z-index:1}._left_1565i_87{left:0;background:linear-gradient(to right,var(--horizontal-scroll-indicator-color, rgba(0,0,0,.15)) 0%,rgba(0,0,0,0) 100%)}._right_1565i_93{right:0;background:linear-gradient(to left,var(--horizontal-scroll-indicator-color, rgba(0,0,0,.15)) 0%,rgba(0,0,0,0) 100%)}._hidden_1565i_99{opacity:0}
|
|
@@ -8,8 +8,9 @@ export interface HorizontalScrollProps extends PropsWithChildren {
|
|
|
8
8
|
scrollStep?: number;
|
|
9
9
|
leftButtonContent?: ReactNode;
|
|
10
10
|
rightButtonContent?: ReactNode;
|
|
11
|
+
headerContainerClassName?: string;
|
|
11
12
|
headerClassName?: string;
|
|
12
13
|
showIndicators?: boolean;
|
|
13
14
|
hideHeader?: boolean;
|
|
14
15
|
}
|
|
15
|
-
export declare function HorizontalScroll({ className, childrenContainerClassName, childrenSpacing, showScrollbar, children, caption, scrollStep, leftButtonContent, rightButtonContent, headerClassName, showIndicators, hideHeader, }: HorizontalScrollProps): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
export declare function HorizontalScroll({ className, childrenContainerClassName, childrenSpacing, showScrollbar, children, caption, scrollStep, leftButtonContent, rightButtonContent, headerContainerClassName, headerClassName, showIndicators, hideHeader, }: HorizontalScrollProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,24 +1,25 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useRef as
|
|
1
|
+
import { jsxs as d, jsx as l, Fragment as F } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as g, useState as h, useEffect as m } from "react";
|
|
3
3
|
import { Icon as N } from "../Icon/Icon.js";
|
|
4
|
-
import { Text as
|
|
5
|
-
import { c as
|
|
6
|
-
import '../../assets/HorizontalScroll.css';const
|
|
7
|
-
root:
|
|
8
|
-
header:
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
4
|
+
import { Text as K } from "../Text/Text.js";
|
|
5
|
+
import { c as i } from "../../clsx-OuTLNxxd.js";
|
|
6
|
+
import '../../assets/HorizontalScroll.css';const q = "_root_1565i_1", G = "_header_1565i_5", I = "_caption_1565i_13", U = "_controls_1565i_21", $ = "_controlBtn_1565i_26", J = "_container_1565i_45", Q = "_dragging_1565i_58", Z = "_noOverflow_1565i_61", tt = "_viewport_1565i_74", et = "_indicator_1565i_77", rt = "_left_1565i_87", nt = "_right_1565i_93", ot = "_hidden_1565i_99", e = {
|
|
7
|
+
root: q,
|
|
8
|
+
header: G,
|
|
9
|
+
caption: I,
|
|
10
|
+
controls: U,
|
|
11
|
+
controlBtn: $,
|
|
12
|
+
container: J,
|
|
13
|
+
dragging: Q,
|
|
14
|
+
noOverflow: Z,
|
|
15
|
+
"scrollVisibility--false": "_scrollVisibility--false_1565i_66",
|
|
16
|
+
viewport: tt,
|
|
17
|
+
indicator: et,
|
|
18
|
+
left: rt,
|
|
19
|
+
right: nt,
|
|
20
|
+
hidden: ot
|
|
20
21
|
};
|
|
21
|
-
function
|
|
22
|
+
function ft({
|
|
22
23
|
className: S,
|
|
23
24
|
childrenContainerClassName: E,
|
|
24
25
|
childrenSpacing: C,
|
|
@@ -28,25 +29,26 @@ function it({
|
|
|
28
29
|
scrollStep: p = 160,
|
|
29
30
|
leftButtonContent: z,
|
|
30
31
|
rightButtonContent: O,
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
32
|
+
headerContainerClassName: B,
|
|
33
|
+
headerClassName: M,
|
|
34
|
+
showIndicators: P = !0,
|
|
35
|
+
hideHeader: R = !1
|
|
34
36
|
// new default
|
|
35
37
|
}) {
|
|
36
|
-
const n =
|
|
38
|
+
const n = g(null), [b, x] = h(!1), c = g({ x: 0, scroll: 0 }), u = g(!1), X = 5, [_, k] = h(!0), [v, A] = h(!1), [s, H] = h(!1), a = () => {
|
|
37
39
|
const t = n.current;
|
|
38
40
|
if (!t) return;
|
|
39
41
|
const r = t.scrollWidth - t.clientWidth;
|
|
40
|
-
|
|
41
|
-
}, H = (t) => {
|
|
42
|
-
!n.current || !c || (x(!0), s.current.x = t.clientX, s.current.scroll = n.current.scrollLeft, u.current = !1);
|
|
42
|
+
H(t.scrollWidth > t.clientWidth + 1), k(t.scrollLeft <= 0), A(t.scrollLeft >= r - 1);
|
|
43
43
|
}, T = (t) => {
|
|
44
|
+
!n.current || !s || (x(!0), c.current.x = t.clientX, c.current.scroll = n.current.scrollLeft, u.current = !1);
|
|
45
|
+
}, V = (t) => {
|
|
44
46
|
if (!b || !n.current) return;
|
|
45
|
-
const r = t.clientX -
|
|
46
|
-
n.current.scrollLeft =
|
|
47
|
+
const r = t.clientX - c.current.x;
|
|
48
|
+
n.current.scrollLeft = c.current.scroll - r, Math.abs(t.clientX - c.current.x) > X && (u.current = !0);
|
|
47
49
|
}, y = () => {
|
|
48
50
|
n.current && x(!1);
|
|
49
|
-
},
|
|
51
|
+
}, Y = (t) => {
|
|
50
52
|
u.current && (t.preventDefault(), t.stopPropagation(), u.current = !1);
|
|
51
53
|
}, w = (t) => {
|
|
52
54
|
const r = n.current;
|
|
@@ -54,7 +56,7 @@ function it({
|
|
|
54
56
|
const o = Math.max(0, Math.min(r.scrollLeft + t, r.scrollWidth - r.clientWidth));
|
|
55
57
|
r.scrollTo({ left: o, behavior: "smooth" }), requestAnimationFrame(a);
|
|
56
58
|
};
|
|
57
|
-
|
|
59
|
+
m(() => {
|
|
58
60
|
const t = n.current;
|
|
59
61
|
if (!t) return;
|
|
60
62
|
const r = (o) => {
|
|
@@ -63,21 +65,21 @@ function it({
|
|
|
63
65
|
L !== 0 ? (o.preventDefault(), t.scrollLeft += L) : o.preventDefault();
|
|
64
66
|
};
|
|
65
67
|
return t.addEventListener("wheel", r, { passive: !1 }), () => t.removeEventListener("wheel", r);
|
|
66
|
-
}, []),
|
|
68
|
+
}, []), m(() => {
|
|
67
69
|
const t = n.current;
|
|
68
70
|
if (t)
|
|
69
71
|
return a(), t.addEventListener("scroll", a), () => t.removeEventListener("scroll", a);
|
|
70
|
-
}, []),
|
|
72
|
+
}, []), m(() => {
|
|
71
73
|
const t = n.current;
|
|
72
74
|
if (!t || typeof ResizeObserver > "u") return;
|
|
73
75
|
const r = new ResizeObserver(() => a());
|
|
74
76
|
return r.observe(t), () => r.disconnect();
|
|
75
77
|
}, []);
|
|
76
|
-
const
|
|
77
|
-
return /* @__PURE__ */
|
|
78
|
-
!
|
|
79
|
-
|
|
80
|
-
|
|
78
|
+
const j = () => f == null ? null : typeof f == "string" ? /* @__PURE__ */ l(K, { variant: "display", size: "2xl", className: i(M, e.caption), children: f }) : f;
|
|
79
|
+
return /* @__PURE__ */ d("div", { className: i(e.root, S), children: [
|
|
80
|
+
!R && /* @__PURE__ */ d("div", { className: i(B, e.header), children: [
|
|
81
|
+
j(),
|
|
82
|
+
s && /* @__PURE__ */ d("div", { className: e.controls, children: [
|
|
81
83
|
/* @__PURE__ */ l(
|
|
82
84
|
"button",
|
|
83
85
|
{
|
|
@@ -85,8 +87,8 @@ function it({
|
|
|
85
87
|
className: e.controlBtn,
|
|
86
88
|
onClick: () => w(-p),
|
|
87
89
|
"aria-label": "Scroll left",
|
|
88
|
-
disabled:
|
|
89
|
-
"aria-disabled":
|
|
90
|
+
disabled: _,
|
|
91
|
+
"aria-disabled": _,
|
|
90
92
|
children: z ?? /* @__PURE__ */ l(N, { iconKey: "fa-regular fa-chevron-left", size: "sm" })
|
|
91
93
|
}
|
|
92
94
|
),
|
|
@@ -97,52 +99,52 @@ function it({
|
|
|
97
99
|
className: e.controlBtn,
|
|
98
100
|
onClick: () => w(p),
|
|
99
101
|
"aria-label": "Scroll right",
|
|
100
|
-
disabled:
|
|
101
|
-
"aria-disabled":
|
|
102
|
+
disabled: v,
|
|
103
|
+
"aria-disabled": v,
|
|
102
104
|
children: O ?? /* @__PURE__ */ l(N, { iconKey: "fa-regular fa-chevron-right", size: "sm" })
|
|
103
105
|
}
|
|
104
106
|
)
|
|
105
107
|
] })
|
|
106
108
|
] }),
|
|
107
|
-
/* @__PURE__ */
|
|
109
|
+
/* @__PURE__ */ d("div", { className: e.viewport, children: [
|
|
108
110
|
/* @__PURE__ */ l(
|
|
109
111
|
"div",
|
|
110
112
|
{
|
|
111
113
|
ref: n,
|
|
112
114
|
style: { gap: C ?? "var(--spacing-spacing-3xs)" },
|
|
113
|
-
className:
|
|
115
|
+
className: i(
|
|
114
116
|
e.container,
|
|
115
117
|
e[`scrollVisibility--${D}`],
|
|
116
118
|
b ? e.dragging : "",
|
|
117
|
-
!
|
|
119
|
+
!s && e.noOverflow,
|
|
118
120
|
E
|
|
119
121
|
),
|
|
120
|
-
onPointerDown:
|
|
121
|
-
onPointerMove:
|
|
122
|
+
onPointerDown: T,
|
|
123
|
+
onPointerMove: V,
|
|
122
124
|
onPointerLeave: y,
|
|
123
125
|
onPointerUp: y,
|
|
124
|
-
onClickCapture:
|
|
126
|
+
onClickCapture: Y,
|
|
125
127
|
children: W
|
|
126
128
|
}
|
|
127
129
|
),
|
|
128
|
-
|
|
130
|
+
P && /* @__PURE__ */ d(F, { children: [
|
|
129
131
|
/* @__PURE__ */ l(
|
|
130
132
|
"div",
|
|
131
133
|
{
|
|
132
|
-
className:
|
|
134
|
+
className: i(
|
|
133
135
|
e.indicator,
|
|
134
136
|
e.left,
|
|
135
|
-
(
|
|
137
|
+
(_ || !s) && e.hidden
|
|
136
138
|
)
|
|
137
139
|
}
|
|
138
140
|
),
|
|
139
141
|
/* @__PURE__ */ l(
|
|
140
142
|
"div",
|
|
141
143
|
{
|
|
142
|
-
className:
|
|
144
|
+
className: i(
|
|
143
145
|
e.indicator,
|
|
144
146
|
e.right,
|
|
145
|
-
(
|
|
147
|
+
(v || !s) && e.hidden
|
|
146
148
|
)
|
|
147
149
|
}
|
|
148
150
|
)
|
|
@@ -151,5 +153,5 @@ function it({
|
|
|
151
153
|
] });
|
|
152
154
|
}
|
|
153
155
|
export {
|
|
154
|
-
|
|
156
|
+
ft as HorizontalScroll
|
|
155
157
|
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as o, jsxs as p } from "react/jsx-runtime";
|
|
2
2
|
import { getHideAtStyles as f } from "../../atoms/HideAt.js";
|
|
3
3
|
import { Text as s } from "../../atoms/Text/Text.js";
|
|
4
4
|
import { c as x } from "../../clsx-OuTLNxxd.js";
|
|
5
|
-
import '../../assets/BannerCard.css';const k = "
|
|
5
|
+
import '../../assets/BannerCard.css';const k = "_root_idgma_2", N = "_content_idgma_13", u = "_variant_hero_idgma_26", z = "_align_left_idgma_26", S = "_align_right_idgma_37", $ = "_variant_promo_idgma_48", b = "_header_idgma_59", j = "_description_idgma_71", C = "_overlay_dark_idgma_103", H = "_overlay_none_idgma_105", w = "_overlay_light_idgma_110", t = {
|
|
6
6
|
root: k,
|
|
7
7
|
content: N,
|
|
8
8
|
variant_hero: u,
|
|
@@ -16,34 +16,34 @@ import '../../assets/BannerCard.css';const k = "_root_1tnrd_2", N = "_content_1t
|
|
|
16
16
|
overlay_light: w
|
|
17
17
|
};
|
|
18
18
|
function L({
|
|
19
|
-
variant:
|
|
20
|
-
overlayTheme:
|
|
19
|
+
variant: a = "hero",
|
|
20
|
+
overlayTheme: e = "none",
|
|
21
21
|
title: l,
|
|
22
|
-
description:
|
|
23
|
-
backgroundImage:
|
|
22
|
+
description: r,
|
|
23
|
+
backgroundImage: i,
|
|
24
24
|
align: c = "left",
|
|
25
|
-
cta:
|
|
25
|
+
cta: n,
|
|
26
26
|
className: d,
|
|
27
|
-
hideAt:
|
|
27
|
+
hideAt: g
|
|
28
28
|
}) {
|
|
29
|
-
const
|
|
30
|
-
return /* @__PURE__ */
|
|
29
|
+
const m = i ? { backgroundImage: `url(${i})` } : void 0, _ = a === "hero", h = _ ? "5xl" : "xl", v = _ ? "md" : "sm", y = e === "dark" ? t.textLight : t.textDark;
|
|
30
|
+
return /* @__PURE__ */ o(
|
|
31
31
|
"article",
|
|
32
32
|
{
|
|
33
33
|
className: x(
|
|
34
34
|
t.root,
|
|
35
|
-
t[`variant_${
|
|
35
|
+
t[`variant_${a}`],
|
|
36
36
|
t[`align_${c}`],
|
|
37
|
-
t[`overlay_${
|
|
37
|
+
t[`overlay_${e}`],
|
|
38
38
|
y,
|
|
39
|
-
f(
|
|
39
|
+
f(g),
|
|
40
40
|
d
|
|
41
41
|
),
|
|
42
|
-
style: { ...
|
|
42
|
+
style: { ...m },
|
|
43
43
|
children: /* @__PURE__ */ p("div", { className: t.content, children: [
|
|
44
|
-
/* @__PURE__ */
|
|
45
|
-
|
|
46
|
-
|
|
44
|
+
/* @__PURE__ */ o(s, { variant: "display", weight: "light", size: h, className: t.header, children: l }),
|
|
45
|
+
r && /* @__PURE__ */ o(s, { size: v, className: t.description, children: r }),
|
|
46
|
+
n && /* @__PURE__ */ o("div", { className: t.cta, children: n })
|
|
47
47
|
] })
|
|
48
48
|
}
|
|
49
49
|
);
|