@obosbbl/grunnmuren-react 1.11.0 → 1.12.0

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,1724 +0,0 @@
1
- var __defProp = Object.defineProperty;
2
- var __defProps = Object.defineProperties;
3
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
- var __spreadValues = (a, b) => {
9
- for (var prop in b || (b = {}))
10
- if (__hasOwnProp.call(b, prop))
11
- __defNormalProp(a, prop, b[prop]);
12
- if (__getOwnPropSymbols)
13
- for (var prop of __getOwnPropSymbols(b)) {
14
- if (__propIsEnum.call(b, prop))
15
- __defNormalProp(a, prop, b[prop]);
16
- }
17
- return a;
18
- };
19
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
- var __objRest = (source, exclude) => {
21
- var target = {};
22
- for (var prop in source)
23
- if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
24
- target[prop] = source[prop];
25
- if (source != null && __getOwnPropSymbols)
26
- for (var prop of __getOwnPropSymbols(source)) {
27
- if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
28
- target[prop] = source[prop];
29
- }
30
- return target;
31
- };
32
- import { useState, useCallback, useEffect, useId, createContext, useContext, forwardRef, Children, isValidElement, cloneElement, useRef, useMemo } from "react";
33
- import { jsx, jsxs, Fragment } from "react/jsx-runtime";
34
- import useCollapse from "react-collapsed";
35
- import cx from "clsx";
36
- import composeRefs from "@seznam/compose-react-refs";
37
- import { useMedia } from "react-use";
38
- export { useMedia } from "react-use";
39
- var __defProp2 = Object.defineProperty;
40
- var __defProps2 = Object.defineProperties;
41
- var __getOwnPropDescs2 = Object.getOwnPropertyDescriptors;
42
- var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
43
- var __hasOwnProp2 = Object.prototype.hasOwnProperty;
44
- var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
45
- var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
46
- var __spreadValues2 = (a, b) => {
47
- for (var prop in b || (b = {}))
48
- if (__hasOwnProp2.call(b, prop))
49
- __defNormalProp2(a, prop, b[prop]);
50
- if (__getOwnPropSymbols2)
51
- for (var prop of __getOwnPropSymbols2(b)) {
52
- if (__propIsEnum2.call(b, prop))
53
- __defNormalProp2(a, prop, b[prop]);
54
- }
55
- return a;
56
- };
57
- var __spreadProps2 = (a, b) => __defProps2(a, __getOwnPropDescs2(b));
58
- const ChevronDown = (props) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({
59
- width: "1.25em",
60
- height: "1.25em",
61
- fill: "none",
62
- viewBox: "0 0 29 17",
63
- role: "img",
64
- "aria-hidden": props["aria-label"] == null
65
- }, props), {
66
- children: /* @__PURE__ */ jsx("path", {
67
- fill: "currentColor",
68
- d: "M0 4.31662L4.31662 0L14.3752 10.0484L24.4337 0L28.7503 4.31662L17.2563 15.8106C16.4929 16.5722 15.4586 16.9999 14.3803 16.9999C13.3019 16.9999 12.2676 16.5722 11.5042 15.8106L0 4.31662Z"
69
- })
70
- }));
71
- const ChevronLeft = (props) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({
72
- width: "1.25em",
73
- height: "1.25em",
74
- fill: "none",
75
- viewBox: "0 0 17 29",
76
- role: "img",
77
- "aria-hidden": props["aria-label"] == null
78
- }, props), {
79
- children: /* @__PURE__ */ jsx("path", {
80
- fill: "currentColor",
81
- d: "M12.6771 0L17 4.31278L6.95043 14.3624L17 24.4119L12.6771 28.7247L1.19328 17.2409C0.814993 16.8631 0.514893 16.4143 0.310141 15.9204C0.105389 15.4265 0 14.897 0 14.3624C0 13.8277 0.105389 13.2982 0.310141 12.8043C0.514893 12.3104 0.814993 11.8616 1.19328 11.4838L12.6771 0Z"
82
- })
83
- }));
84
- const ChevronRight = (props) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({
85
- width: "1.25em",
86
- height: "1.25em",
87
- fill: "none",
88
- viewBox: "0 0 17 29",
89
- role: "img",
90
- "aria-hidden": props["aria-label"] == null
91
- }, props), {
92
- children: /* @__PURE__ */ jsx("path", {
93
- fill: "currentColor",
94
- d: "M4.32295 28.7247L0 24.4119L10.0496 14.3624L0 4.31278L4.32295 0L15.8067 11.4838C16.185 11.8616 16.4851 12.3104 16.6899 12.8043C16.8946 13.2982 17 13.8277 17 14.3624C17 14.897 16.8946 15.4265 16.6899 15.9204C16.4851 16.4143 16.185 16.8631 15.8067 17.2409L4.32295 28.7247Z"
95
- })
96
- }));
97
- const Close = (props) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({
98
- width: "1.25em",
99
- height: "1.25em",
100
- fill: "none",
101
- viewBox: "0 0 29 29",
102
- role: "img",
103
- "aria-hidden": props["aria-label"] == null
104
- }, props), {
105
- children: /* @__PURE__ */ jsx("path", {
106
- fill: "currentColor",
107
- d: "M29 4.35585L24.6441 0L14.5 10.1431L4.35585 0L0 4.35585L10.1431 14.5L0 24.6441L4.35585 29L14.5 18.8569L24.6441 29L29 24.6441L18.8569 14.5L29 4.35585Z"
108
- })
109
- }));
110
- const InfoCircle = (props) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({
111
- width: "1.25em",
112
- height: "1.25em",
113
- fill: "none",
114
- viewBox: "0 0 32 32",
115
- role: "img",
116
- "aria-hidden": props["aria-label"] == null
117
- }, props), {
118
- children: /* @__PURE__ */ jsx("path", {
119
- fill: "currentColor",
120
- d: "M16 0C12.8355 0 9.74207 0.938384 7.11088 2.69649C4.4797 4.45459 2.42894 6.95345 1.21793 9.87707C0.0069325 12.8007 -0.309921 16.0177 0.307443 19.1214C0.924806 22.2251 2.44866 25.0761 4.6863 27.3137C6.92394 29.5513 9.77487 31.0752 12.8786 31.6926C15.9823 32.3099 19.1993 31.9931 22.1229 30.7821C25.0466 29.5711 27.5454 27.5203 29.3035 24.8891C31.0616 22.2579 32 19.1645 32 16C32 11.7565 30.3143 7.68687 27.3137 4.68629C24.3131 1.68571 20.2435 0 16 0ZM18 26H14V15H18V26ZM18 11H14V7H18V11Z"
121
- })
122
- }));
123
- const LoadingSpinner = (props) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({
124
- width: "1.25em",
125
- height: "1.25em",
126
- fill: "none",
127
- viewBox: "0 0 30 30",
128
- role: "img",
129
- "aria-hidden": props["aria-label"] == null
130
- }, props), {
131
- children: /* @__PURE__ */ jsx("path", {
132
- fill: "currentColor",
133
- fillRule: "evenodd",
134
- d: "M14.4018 0.0119327C16.9653 -0.0903685 19.5121 0.466497 21.7989 1.6293C24.0856 2.79211 26.036 4.522 27.4635 6.65362C28.8909 8.78525 29.7479 11.2474 29.9523 13.8047C30.1567 16.3619 29.7019 18.9289 28.6312 21.2603C27.5605 23.5916 25.9097 25.6094 23.8367 27.1207C22.7211 27.9341 21.1572 27.6891 20.3438 26.5734C19.5304 25.4577 19.7755 23.8939 20.8912 23.0805C22.2732 22.0729 23.3737 20.7277 24.0874 19.1735C24.8012 17.6193 25.1045 15.908 24.9682 14.2031C24.8319 12.4982 24.2606 10.8568 23.309 9.43575C22.3573 8.01466 21.0571 6.86141 19.5326 6.0862C18.008 5.311 16.3102 4.93975 14.6012 5.00796C12.8923 5.07616 11.2294 5.58152 9.7715 6.47575C8.3136 7.36998 7.10942 8.62318 6.27403 10.1156C5.43865 11.608 5 13.2897 5 15C5 16.3807 3.88071 17.5 2.5 17.5C1.11929 17.5 0 16.3807 0 15C0 12.4346 0.657978 9.91198 1.91105 7.67337C3.16412 5.43477 4.97041 3.55497 7.15726 2.21362C9.34411 0.872282 11.8384 0.114234 14.4018 0.0119327ZM14.5 30C15.8807 30 17 28.8807 17 27.5C17 26.1193 15.8807 25 14.5 25C13.1193 25 12 26.1193 12 27.5C12 28.8807 13.1193 30 14.5 30Z",
135
- clipRule: "evenodd"
136
- })
137
- }));
138
- const MenuAlt = (props) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({
139
- width: "1.25em",
140
- height: "1.25em",
141
- fill: "none",
142
- viewBox: "0 0 28 26",
143
- role: "img",
144
- "aria-hidden": props["aria-label"] == null
145
- }, props), {
146
- children: /* @__PURE__ */ jsx("path", {
147
- fill: "currentColor",
148
- fillRule: "evenodd",
149
- d: "M0 0H28V6H0V0ZM0 20H28V26H0V20Z",
150
- clipRule: "evenodd"
151
- })
152
- }));
153
- const Warning = (props) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({
154
- width: "1.25em",
155
- height: "1.25em",
156
- fill: "none",
157
- viewBox: "0 0 32 30",
158
- role: "img",
159
- "aria-hidden": props["aria-label"] == null
160
- }, props), {
161
- children: /* @__PURE__ */ jsx("path", {
162
- fill: "currentColor",
163
- d: "M31.549 24.132L20.12 2.155C19.7824 1.50555 19.273 0.961197 18.6474 0.581216C18.0218 0.201234 17.304 0.000197802 16.572 0H15.428C14.696 0.000197802 13.9782 0.201234 13.3526 0.581216C12.727 0.961197 12.2176 1.50555 11.88 2.155L0.451 24.132C0.154748 24.7022 6.05376e-05 25.3354 0 25.978V26C0 27.0609 0.421427 28.0783 1.17157 28.8284C1.92172 29.5786 2.93913 30 4 30H28C29.0609 30 30.0783 29.5786 30.8284 28.8284C31.5786 28.0783 32 27.0609 32 26V25.978C31.9999 25.3354 31.8453 24.7022 31.549 24.132ZM18 26H14V22H18V26ZM18 18H14V7H18V18Z"
164
- })
165
- }));
166
- const noop = () => {
167
- };
168
- const QUERY = "(prefers-reduced-motion: reduce)";
169
- const usePrefersReducedMotion = (defaultState = false) => useMedia(QUERY, defaultState);
170
- function useBlockBackgroundColor(blockBgColor) {
171
- switch (blockBgColor) {
172
- case "gray":
173
- return "bg-gray-concrete";
174
- case "green":
175
- return "bg-green-lightest";
176
- case "yellow":
177
- return "bg-yellow";
178
- case "blue":
179
- return "bg-blue-lightest";
180
- }
181
- }
182
- const useScreenMaxWidthMd = (defaultState) => useMedia("(max-width: 767.9px)", defaultState);
183
- function useFormControlValidity(ref, enabled = true) {
184
- const [validity, setValidity] = useState("indeterminate");
185
- const [validationMessage, setValidationMessage] = useState();
186
- const onBlur = useCallback((event) => {
187
- const isValid = event.target.checkValidity();
188
- if (isValid) {
189
- setValidity("valid");
190
- setValidationMessage(void 0);
191
- }
192
- }, []);
193
- const onInput = useCallback((event) => {
194
- if (validity !== "indeterminate") {
195
- const isValid = event.target.checkValidity();
196
- if (isValid) {
197
- setValidity("valid");
198
- setValidationMessage(void 0);
199
- }
200
- }
201
- }, [validity]);
202
- const onInvalid = useCallback((event) => {
203
- event.preventDefault();
204
- const message = event.target.validationMessage;
205
- setValidationMessage(message);
206
- setValidity("invalid");
207
- }, []);
208
- useEffect(() => {
209
- var _a;
210
- const { current } = ref;
211
- if (enabled && ((_a = current == null ? void 0 : current.form) == null ? void 0 : _a.noValidate) !== true) {
212
- current == null ? void 0 : current.addEventListener("blur", onBlur);
213
- current == null ? void 0 : current.addEventListener("input", onInput);
214
- current == null ? void 0 : current.addEventListener("invalid", onInvalid);
215
- }
216
- return () => {
217
- current == null ? void 0 : current.removeEventListener("blur", onBlur);
218
- current == null ? void 0 : current.removeEventListener("input", onInput);
219
- current == null ? void 0 : current.removeEventListener("invalid", onInvalid);
220
- };
221
- }, [enabled, onInput]);
222
- return { validity, validationMessage };
223
- }
224
- function useFallbackId(id) {
225
- const generatedId = useId();
226
- return id != null ? id : generatedId;
227
- }
228
- const DURATION_MS = 300;
229
- const DURATION_TW = "duration-300";
230
- const Accordion = (props) => {
231
- const _a = props, {
232
- className
233
- } = _a, rest = __objRest(_a, [
234
- "className"
235
- ]);
236
- return /* @__PURE__ */ jsx("div", __spreadValues({
237
- className: cx(className, "flex flex-col gap-2")
238
- }, rest));
239
- };
240
- const AccordionContext = createContext({
241
- isExpanded: false,
242
- setExpanded: noop,
243
- getCollapseProps: noop,
244
- getToggleProps: noop,
245
- onChange: noop
246
- });
247
- const AccordionItem = (props) => {
248
- const prefersReducedMotion = usePrefersReducedMotion();
249
- const _a = props, {
250
- className,
251
- defaultOpen,
252
- onChange = noop,
253
- open
254
- } = _a, rest = __objRest(_a, [
255
- "className",
256
- "defaultOpen",
257
- "onChange",
258
- "open"
259
- ]);
260
- const collapseContext = useCollapse({
261
- defaultExpanded: defaultOpen,
262
- isExpanded: open,
263
- duration: DURATION_MS,
264
- hasDisabledAnimation: prefersReducedMotion,
265
- easing: "cubic-bezier(0.25, 0.1, 0.25, 1)"
266
- });
267
- return /* @__PURE__ */ jsx(AccordionContext.Provider, {
268
- value: __spreadValues({
269
- onChange
270
- }, collapseContext),
271
- children: /* @__PURE__ */ jsx("div", __spreadValues({
272
- className: cx(className, "rounded-sm border-b-2 border-l-4 border-solid", collapseContext.isExpanded ? "border-l-green-dark" : "border-l-green")
273
- }, rest))
274
- });
275
- };
276
- const AccordionHeader = (props) => {
277
- const _a = props, {
278
- children,
279
- className,
280
- as: Heading = "h3"
281
- } = _a, rest = __objRest(_a, [
282
- "children",
283
- "className",
284
- "as"
285
- ]);
286
- const {
287
- getToggleProps,
288
- onChange,
289
- isExpanded
290
- } = useContext(AccordionContext);
291
- const toggleProps = getToggleProps({
292
- onClick: () => onChange(!isExpanded)
293
- });
294
- return /* @__PURE__ */ jsx(Heading, {
295
- children: /* @__PURE__ */ jsxs("button", __spreadProps(__spreadValues(__spreadValues({
296
- className: cx(className, "focus-visible:outline-blue-dark aria-expanded:bg-green-dark group flex min-h-[4rem] w-full items-center justify-between px-5 py-4 text-left text-lg font-semibold focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-0 aria-expanded:text-white")
297
- }, rest), toggleProps), {
298
- id: getToggleId(toggleProps["aria-controls"]),
299
- children: [children, /* @__PURE__ */ jsx(ChevronDown, {
300
- className: `shrink-0 text-sm ${DURATION_TW} group-aria-expanded:rotate-180`
301
- })]
302
- }))
303
- });
304
- };
305
- const AccordionContent = (props) => {
306
- const {
307
- getCollapseProps
308
- } = useContext(AccordionContext);
309
- const _a = props, {
310
- className
311
- } = _a, rest = __objRest(_a, [
312
- "className"
313
- ]);
314
- const collapseProps = getCollapseProps();
315
- return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, collapseProps), {
316
- role: "region",
317
- "aria-labelledby": getToggleId(collapseProps.id),
318
- children: /* @__PURE__ */ jsx("div", __spreadValues({
319
- className: cx(className, "p-5 pb-10")
320
- }, rest))
321
- }));
322
- };
323
- const getToggleId = (id) => id + "toggle";
324
- Accordion.Item = AccordionItem;
325
- Accordion.Header = AccordionHeader;
326
- Accordion.Content = AccordionContent;
327
- const Alert = (props) => {
328
- const _a = props, {
329
- className,
330
- children,
331
- heading,
332
- severity = "alert"
333
- } = _a, rest = __objRest(_a, [
334
- "className",
335
- "children",
336
- "heading",
337
- "severity"
338
- ]);
339
- return /* @__PURE__ */ jsx("section", __spreadProps(__spreadValues({
340
- className: cx(className, "p-4 md:py-8", {
341
- "bg-orange-light": severity === "info",
342
- "bg-red-light": severity === "alert"
343
- }),
344
- role: "alert"
345
- }, rest), {
346
- children: /* @__PURE__ */ jsxs("div", {
347
- className: "flex justify-center",
348
- children: [/* @__PURE__ */ jsx(AlertIcon, {
349
- className: "mr-4 flex-none md:mr-8 md:text-2xl",
350
- severity
351
- }), /* @__PURE__ */ jsxs("div", {
352
- className: "w-prose flex-initial",
353
- children: [/* @__PURE__ */ jsx("h2", {
354
- className: "h4 mb-2",
355
- children: heading
356
- }), children]
357
- })]
358
- })
359
- }));
360
- };
361
- const AlertIcon = ({
362
- severity,
363
- className
364
- }) => {
365
- if (severity === "alert") {
366
- return /* @__PURE__ */ jsx(Warning, {
367
- className: cx(className, "text-red")
368
- });
369
- }
370
- return /* @__PURE__ */ jsx(InfoCircle, {
371
- className: cx(className, "text-orange")
372
- });
373
- };
374
- const Banner = (props) => {
375
- const _a = props, {
376
- bgColor: bgColorProp,
377
- className,
378
- children,
379
- heading,
380
- image
381
- } = _a, rest = __objRest(_a, [
382
- "bgColor",
383
- "className",
384
- "children",
385
- "heading",
386
- "image"
387
- ]);
388
- const bgColor = useBlockBackgroundColor(bgColorProp);
389
- return /* @__PURE__ */ jsx("article", __spreadProps(__spreadValues({
390
- className: cx(className, bgColor, "py-8 px-4 md:py-14")
391
- }, rest), {
392
- children: /* @__PURE__ */ jsxs("div", {
393
- className: "container flex gap-4 max-md:flex-wrap md:gap-12",
394
- children: [image, /* @__PURE__ */ jsxs("div", {
395
- className: "w-prose",
396
- children: [heading && /* @__PURE__ */ jsx("h2", {
397
- className: "mb-4",
398
- children: heading
399
- }), children]
400
- })]
401
- })
402
- }));
403
- };
404
- const BannerImage = (props) => {
405
- return /* @__PURE__ */ jsx("img", __spreadValues({
406
- loading: "lazy",
407
- decoding: "async",
408
- className: "w-24 flex-none self-center md:w-40 md:self-start"
409
- }, props));
410
- };
411
- const buttonVariations = {
412
- "standard-primary": "bg-green border-green text-white",
413
- "standard-secondary": "bg-white border-green text-black",
414
- "light-green-primary": "bg-green-light border-green-light text-black",
415
- "light-green-secondary": "bg-transparent border-green-light text-green-light",
416
- "white-primary": "bg-white border-white text-black",
417
- "white-secondary": "bg-transparent border-white text-white"
418
- };
419
- const Button = forwardRef((props, ref) => {
420
- const _a = props, {
421
- children: childrenFromProp,
422
- className,
423
- color: colorFromProp,
424
- href,
425
- loading,
426
- type = "button",
427
- variant = "primary"
428
- } = _a, rest = __objRest(_a, [
429
- "children",
430
- "className",
431
- "color",
432
- "href",
433
- "loading",
434
- "type",
435
- "variant"
436
- ]);
437
- const colorFromContext = useContext(ButtonColorContext);
438
- const color = colorFromProp != null ? colorFromProp : colorFromContext;
439
- const buttonVariation = buttonVariations[`${color}-${variant}`];
440
- const classes = cx(className, buttonVariation, "button");
441
- const children = loading ? /* @__PURE__ */ jsx(Loader, {
442
- children: childrenFromProp
443
- }) : childrenFromProp;
444
- return /* @__PURE__ */ jsx(Fragment, {
445
- children: href ? /* @__PURE__ */ jsx("a", __spreadProps(__spreadValues({
446
- "aria-busy": loading ? true : void 0
447
- }, rest), {
448
- href,
449
- ref,
450
- className: classes,
451
- children
452
- })) : /* @__PURE__ */ jsx("button", __spreadProps(__spreadValues({
453
- "aria-busy": loading ? true : void 0
454
- }, rest), {
455
- type,
456
- ref,
457
- className: classes,
458
- children
459
- }))
460
- });
461
- });
462
- const Loader = (props) => {
463
- return /* @__PURE__ */ jsxs(Fragment, {
464
- children: [deeplyWrapStrings(props.children), /* @__PURE__ */ jsx("span", {
465
- className: "!visible absolute top-1 bottom-1 left-1 right-1 grid place-items-center overflow-hidden bg-inherit",
466
- "aria-hidden": true,
467
- children: /* @__PURE__ */ jsx(LoadingSpinner, {
468
- className: "animate-spin"
469
- })
470
- })]
471
- });
472
- };
473
- function deeplyWrapStrings(children) {
474
- return Children.map(children, (child) => {
475
- if (!isValidElement(child)) {
476
- return typeof child === "string" ? /* @__PURE__ */ jsx("span", {
477
- children: child
478
- }) : child;
479
- }
480
- if (child.props.children) {
481
- const props = {
482
- children: deeplyWrapStrings(child.props.children)
483
- };
484
- child = cloneElement(child, props);
485
- }
486
- return child;
487
- });
488
- }
489
- const ButtonColorContext = createContext("standard");
490
- const CampaignContext = createContext(true);
491
- const CampaignInner = (props, ref) => {
492
- const _a = props, {
493
- as: Component = "div",
494
- body: Body,
495
- className,
496
- image: Image,
497
- rightAlignBody = true
498
- } = _a, rest = __objRest(_a, [
499
- "as",
500
- "body",
501
- "className",
502
- "image",
503
- "rightAlignBody"
504
- ]);
505
- return /* @__PURE__ */ jsxs(Component, __spreadProps(__spreadValues({
506
- className: cx(className, "grid gap-8 md:grid-flow-col md:grid-cols-[50%,50%] md:gap-0")
507
- }, rest), {
508
- ref,
509
- children: [/* @__PURE__ */ jsx(CampaignContext.Provider, {
510
- value: rightAlignBody,
511
- children: Image
512
- }), Body]
513
- }));
514
- };
515
- const CampaignBase = forwardRef(CampaignInner);
516
- const CampaignBody = forwardRef((props, ref) => {
517
- const _a = props, {
518
- className
519
- } = _a, rest = __objRest(_a, [
520
- "className"
521
- ]);
522
- return /* @__PURE__ */ jsx("div", __spreadValues({
523
- className: cx(className, "md:mx-18 self-center"),
524
- ref
525
- }, rest));
526
- });
527
- const CampaignImage = forwardRef((props, ref) => {
528
- const _a = props, {
529
- className: classNameProp,
530
- children
531
- } = _a, rest = __objRest(_a, [
532
- "className",
533
- "children"
534
- ]);
535
- const bodyIsRightAligned = useContext(CampaignContext);
536
- const className = cx(classNameProp, "max-md:rounded-b-3xl w-full", bodyIsRightAligned ? "md:rounded-r-3xl" : "md:rounded-l-3xl md:order-1");
537
- if (isValidElement(children)) {
538
- const child = Children.only(children);
539
- return cloneElement(child, __spreadValues({
540
- className,
541
- ref
542
- }, rest));
543
- }
544
- return /* @__PURE__ */ jsx("img", __spreadValues({
545
- className,
546
- ref
547
- }, rest));
548
- });
549
- const Campaign = Object.assign({}, CampaignBase, {
550
- Body: CampaignBody,
551
- Image: CampaignImage
552
- });
553
- const CardInner = (props, ref) => {
554
- const _a = props, {
555
- as: Component = "div",
556
- className,
557
- bgColor = "white"
558
- } = _a, rest = __objRest(_a, [
559
- "as",
560
- "className",
561
- "bgColor"
562
- ]);
563
- return /* @__PURE__ */ jsx(Component, __spreadProps(__spreadValues({
564
- className: cx(className, "relative overflow-hidden rounded-3xl", {
565
- "border-2 border-solid bg-white": bgColor === "white",
566
- "bg-gray-light": bgColor === "gray"
567
- })
568
- }, rest), {
569
- ref
570
- }));
571
- };
572
- const Card = forwardRef(CardInner);
573
- const CardImage = forwardRef((props, ref) => {
574
- const _a = props, {
575
- className
576
- } = _a, rest = __objRest(_a, [
577
- "className"
578
- ]);
579
- return /* @__PURE__ */ jsx("img", __spreadProps(__spreadValues({
580
- className: cx(className, "w-full object-cover"),
581
- loading: "lazy"
582
- }, rest), {
583
- ref
584
- }));
585
- });
586
- const CardList = forwardRef((props, ref) => {
587
- const _a = props, {
588
- bgColor: bgColorProp,
589
- className
590
- } = _a, rest = __objRest(_a, [
591
- "bgColor",
592
- "className"
593
- ]);
594
- const bgColor = useBlockBackgroundColor(bgColorProp);
595
- return /* @__PURE__ */ jsx("div", {
596
- className: cx(bgColor, className),
597
- children: /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({
598
- className: "container grid grid-cols-1 gap-12 py-16 md:grid-cols-2 md:py-20 lg:py-24"
599
- }, rest), {
600
- ref
601
- }))
602
- });
603
- });
604
- const CardContent = forwardRef((props, ref) => {
605
- const _a = props, {
606
- className
607
- } = _a, rest = __objRest(_a, [
608
- "className"
609
- ]);
610
- return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({
611
- className: cx(className, "p-8 md:px-10")
612
- }, rest), {
613
- ref
614
- }));
615
- });
616
- const CardLinkOverlay = forwardRef((props, ref) => {
617
- const _a = props, {
618
- className
619
- } = _a, rest = __objRest(_a, [
620
- "className"
621
- ]);
622
- return /* @__PURE__ */ jsx("a", __spreadValues({
623
- className: cx(className, "no-underline before:absolute before:top-0 before:left-0 before:block before:h-full before:w-full hover:underline"),
624
- ref
625
- }, rest));
626
- });
627
- const Checkbox = forwardRef((props, ref) => {
628
- const _a = props, {
629
- children,
630
- className,
631
- error,
632
- id: idProp,
633
- disableValidation = false
634
- } = _a, rest = __objRest(_a, [
635
- "children",
636
- "className",
637
- "error",
638
- "id",
639
- "disableValidation"
640
- ]);
641
- const ownRef = useRef(null);
642
- const {
643
- validity,
644
- validationMessage
645
- } = useFormControlValidity(ownRef, !disableValidation);
646
- const id = useFallbackId(idProp);
647
- const errorMsgId = id + "err";
648
- const errorMsg = error || validationMessage;
649
- return /* @__PURE__ */ jsxs("div", {
650
- className: "grid gap-2",
651
- children: [/* @__PURE__ */ jsxs("label", {
652
- className: cx(className, "flex cursor-pointer gap-2.5"),
653
- children: [/* @__PURE__ */ jsx("input", __spreadProps(__spreadValues({
654
- id,
655
- className: cx("checkbox checked:bg-green checked:border-green grid h-[1.25em] w-[1.25em] flex-none translate-y-[0.1em] cursor-pointer appearance-none place-content-center rounded border-2 border-solid bg-white text-white focus:outline-none focus:ring-2", {
656
- "border-gray-dark focus:ring-black": !error,
657
- "border-red focus:ring-red": !!error
658
- }),
659
- ref,
660
- type: "checkbox"
661
- }, rest), {
662
- "aria-describedby": errorMsg ? errorMsgId : void 0,
663
- "aria-invalid": !!error || validity === "invalid"
664
- })), children]
665
- }), errorMsg && /* @__PURE__ */ jsx(FormErrorMessage, {
666
- id: errorMsgId,
667
- children: errorMsg
668
- })]
669
- });
670
- });
671
- const chipVariations = {
672
- "blue-light": "bg-blue-light border-blue-light",
673
- "red-light": "bg-red-light border-red-light",
674
- "green-light": "bg-green-light border-green-light",
675
- "orange-light": "bg-orange-light border-orange-light"
676
- };
677
- const iconColors = {
678
- "blue-light": "text-blue-dark",
679
- "red-light": "text-red",
680
- "green-light": "text-green",
681
- "orange-light": "text-black"
682
- };
683
- const Chip = (props) => {
684
- const {
685
- className,
686
- color,
687
- icon,
688
- children,
689
- variant = "filled"
690
- } = props;
691
- const chipVariation = color && chipVariations[color];
692
- const iconColor = color && iconColors[color];
693
- return /* @__PURE__ */ jsxs("div", {
694
- className: cx("inline-flex items-center gap-0.5 overflow-hidden rounded-lg border-2 text-sm font-semibold", chipVariation, className),
695
- children: [icon && /* @__PURE__ */ jsx("div", {
696
- className: cx("px-3 py-2", iconColor),
697
- children: icon
698
- }), /* @__PURE__ */ jsx("div", {
699
- className: cx("flex-1 py-2 px-4", {
700
- "bg-white": variant === "outline"
701
- }),
702
- children
703
- })]
704
- });
705
- };
706
- const Footer = (props) => {
707
- const _a = props, {
708
- className,
709
- children
710
- } = _a, rest = __objRest(_a, [
711
- "className",
712
- "children"
713
- ]);
714
- return /* @__PURE__ */ jsx(ButtonColorContext.Provider, {
715
- value: "white",
716
- children: /* @__PURE__ */ jsx("footer", __spreadProps(__spreadValues({
717
- className: cx(className, "bg-blue pt-18 relative pb-12 text-white before:absolute before:-top-px before:left-0 before:right-0 before:h-[calc(1.5rem_+_1px)] before:rounded-b-3xl before:bg-white ")
718
- }, rest), {
719
- children: /* @__PURE__ */ jsx("div", {
720
- className: "container",
721
- children
722
- })
723
- }))
724
- });
725
- };
726
- const Form = (props) => {
727
- const _a = props, {
728
- heading,
729
- children,
730
- className
731
- } = _a, rest = __objRest(_a, [
732
- "heading",
733
- "children",
734
- "className"
735
- ]);
736
- return /* @__PURE__ */ jsxs("form", __spreadProps(__spreadValues({
737
- className: cx(className, "border-blue-dark block overflow-hidden rounded-t-3xl rounded-b-lg border-2")
738
- }, rest), {
739
- children: [heading && /* @__PURE__ */ jsx(FormHeading, {
740
- children: heading
741
- }), /* @__PURE__ */ jsx("div", {
742
- className: "p-6 md:p-10",
743
- children
744
- })]
745
- }));
746
- };
747
- const FormHeading = (props) => {
748
- const _a = props, {
749
- className
750
- } = _a, rest = __objRest(_a, [
751
- "className"
752
- ]);
753
- return /* @__PURE__ */ jsx("h2", __spreadValues({
754
- className: cx(className, "bg-blue-dark p-6 text-xl font-bold text-white md:px-10 md:py-8 md:text-2xl")
755
- }, rest));
756
- };
757
- const FormError = (props) => {
758
- const _a = props, {
759
- className
760
- } = _a, rest = __objRest(_a, [
761
- "className"
762
- ]);
763
- return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({
764
- "aria-live": "polite",
765
- className: cx(className, "border-red bg-red-light rounded-lg border-2 p-6 text-sm")
766
- }, rest), {
767
- children: "Beklager! Noe gikk dessverre galt under innesendingen av skjemaet. Pr\xF8v gjerne igjen om en stund."
768
- }));
769
- };
770
- const FormErrorMessage = (props) => {
771
- const _a = props, {
772
- children,
773
- className
774
- } = _a, rest = __objRest(_a, [
775
- "children",
776
- "className"
777
- ]);
778
- return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({
779
- className: cx(className, "bg-red-light text-red flex items-center gap-2 rounded py-1 px-2 text-sm"),
780
- "aria-live": "polite"
781
- }, rest), {
782
- children: [/* @__PURE__ */ jsx(Warning, {
783
- className: "text-red flex-shrink-0"
784
- }), children]
785
- }));
786
- };
787
- const FormHelperText = (props) => {
788
- const _a = props, {
789
- className,
790
- children
791
- } = _a, rest = __objRest(_a, [
792
- "className",
793
- "children"
794
- ]);
795
- return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({
796
- className: cx(className, "text-gray-dark text-sm")
797
- }, rest), {
798
- children
799
- }));
800
- };
801
- const FormLabel = (props) => {
802
- const _a = props, {
803
- className,
804
- children,
805
- isRequired,
806
- isInvalid
807
- } = _a, rest = __objRest(_a, [
808
- "className",
809
- "children",
810
- "isRequired",
811
- "isInvalid"
812
- ]);
813
- return /* @__PURE__ */ jsxs("label", __spreadProps(__spreadValues({
814
- className: cx(className, "block cursor-pointer font-semibold")
815
- }, rest), {
816
- children: [isRequired && /* @__PURE__ */ jsx("span", {
817
- "aria-hidden": true,
818
- className: cx("mr-1 select-none", isInvalid ? "text-red" : "text-blue"),
819
- children: "*"
820
- }), children]
821
- }));
822
- };
823
- const FormSuccess = (props) => {
824
- const _a = props, {
825
- className,
826
- heading,
827
- text
828
- } = _a, rest = __objRest(_a, [
829
- "className",
830
- "heading",
831
- "text"
832
- ]);
833
- return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({
834
- className: cx(className, "bg-gray-concrete flex flex-col gap-8 p-8 text-center")
835
- }, rest), {
836
- children: [/* @__PURE__ */ jsx("img", {
837
- className: "mx-auto",
838
- alt: "Innsending fullf\xF8rt",
839
- height: "220",
840
- width: "247",
841
- src: "data:image/png;base64,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"
842
- }), heading && /* @__PURE__ */ jsx("h2", {
843
- className: "text-blue text-2xl",
844
- children: heading
845
- }), text && /* @__PURE__ */ jsx("p", {
846
- className: "text-lg",
847
- children: text
848
- })]
849
- }));
850
- };
851
- function usesGridAreaPlacement(contentPosition) {
852
- return contentPosition !== "vertical-split" && contentPosition !== "below-center" && contentPosition !== "below-left";
853
- }
854
- const HeroContext = createContext({
855
- bgColor: "white",
856
- contentPosition: "below-center",
857
- hasImage: false
858
- });
859
- const Hero = forwardRef((props, ref) => {
860
- const _a = props, {
861
- bgColor = "white",
862
- children,
863
- className,
864
- contentPosition: contentPositionProp = "below-center",
865
- image
866
- } = _a, rest = __objRest(_a, [
867
- "bgColor",
868
- "children",
869
- "className",
870
- "contentPosition",
871
- "image"
872
- ]);
873
- const hasImage = image != null;
874
- const contentPosition = hasImage ? contentPositionProp : "below-center";
875
- const context = useMemo(() => ({
876
- bgColor,
877
- contentPosition,
878
- hasImage
879
- }), [bgColor, contentPosition, hasImage]);
880
- return /* @__PURE__ */ jsx(ButtonColorContext.Provider, {
881
- value: bgColor === "white" ? "standard" : "light-green",
882
- children: /* @__PURE__ */ jsx(HeroContext.Provider, {
883
- value: context,
884
- children: /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({
885
- className: cx(className, "container max-md:px-0 md:grid", {
886
- "md:grid-cols-[50%,50%]": contentPosition === "vertical-split"
887
- }),
888
- style: usesGridAreaPlacement(contentPosition) ? {
889
- gridTemplateAreas: '"hero"'
890
- } : void 0
891
- }, rest), {
892
- ref,
893
- children: [image, children]
894
- }))
895
- })
896
- });
897
- });
898
- const HeroImage = forwardRef((props, ref) => {
899
- const {
900
- contentPosition
901
- } = useContext(HeroContext);
902
- return /* @__PURE__ */ jsxs("picture", {
903
- className: cx(props.className, "aspect-w-6 aspect-h-7 block", {
904
- "sm:aspect-w-8 sm:aspect-h-4": contentPosition !== "vertical-split",
905
- "sm:aspect-w-8 sm:aspect-h-8": contentPosition === "vertical-split"
906
- }),
907
- style: contentPosition !== "vertical-split" && contentPosition !== "below-center" && contentPosition !== "below-left" ? {
908
- gridArea: "hero"
909
- } : void 0,
910
- ref,
911
- children: [/* @__PURE__ */ jsx("source", {
912
- media: "(min-width: 768px)",
913
- srcSet: props.mdSrc
914
- }), /* @__PURE__ */ jsx("img", {
915
- className: "object-cover",
916
- decoding: "async",
917
- src: props.src,
918
- alt: props.alt
919
- })]
920
- });
921
- });
922
- const HeroContent = forwardRef((props, ref) => {
923
- const {
924
- bgColor,
925
- contentPosition,
926
- hasImage
927
- } = useContext(HeroContext);
928
- const _a = props, {
929
- children,
930
- className,
931
- heading,
932
- description
933
- } = _a, rest = __objRest(_a, [
934
- "children",
935
- "className",
936
- "heading",
937
- "description"
938
- ]);
939
- const usesGridArea = usesGridAreaPlacement(contentPosition);
940
- return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({
941
- className: cx(className, "relative grid grid-flow-row grid-cols-[minmax(auto,_37rem)] content-center gap-6 rounded-3xl py-10 px-6 text-center max-md:mx-4 md:p-12", {
942
- "max-md:-mt-18": hasImage,
943
- "text-white": bgColor !== "white",
944
- "bg-green-dark": bgColor === "green",
945
- "bg-blue-dark": bgColor === "blue",
946
- "bg-white": bgColor === "white",
947
- "md:z-10 md:-order-1 md:mt-0 md:-mr-5 md:justify-center md:rounded-l-none md:text-left": contentPosition === "vertical-split",
948
- "justify-center md:mx-auto md:w-4/5": contentPosition === "below-center",
949
- "md:-mt-18": hasImage && contentPosition === "below-center",
950
- "md:ml-[8%] md:-mt-32 md:max-w-[58%] md:text-left": contentPosition === "below-left",
951
- "md:my-9 md:mx-32 md:w-2/5": usesGridArea,
952
- "self-end justify-self-start": contentPosition === "bottom-left",
953
- "self-start justify-self-start": contentPosition === "top-left",
954
- "self-start justify-self-end": contentPosition === "top-right",
955
- "self-end justify-self-end": contentPosition === "bottom-right",
956
- "self-center justify-self-center": contentPosition === "center"
957
- })
958
- }, rest), {
959
- style: usesGridArea ? {
960
- gridArea: "hero"
961
- } : void 0,
962
- ref,
963
- children: [/* @__PURE__ */ jsx("h1", {
964
- children: heading
965
- }), description && /* @__PURE__ */ jsx("p", {
966
- className: "text-lg font-semibold md:text-xl",
967
- children: description
968
- }), children]
969
- }));
970
- });
971
- const HeroActions = forwardRef((props, ref) => {
972
- const _a = props, {
973
- className
974
- } = _a, rest = __objRest(_a, [
975
- "className"
976
- ]);
977
- const {
978
- contentPosition
979
- } = useContext(HeroContext);
980
- return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({
981
- className: cx(className, "grid items-center justify-center justify-items-center gap-4 md:grid-flow-col", {
982
- "md:justify-start": contentPosition === "vertical-split" || contentPosition === "below-left"
983
- })
984
- }, rest), {
985
- ref
986
- }));
987
- });
988
- const Input = forwardRef((props, ref) => {
989
- const _a = props, {
990
- className,
991
- isInvalid,
992
- size,
993
- as,
994
- type: typeProp,
995
- rightAddon,
996
- leftAddon
997
- } = _a, rest = __objRest(_a, [
998
- "className",
999
- "isInvalid",
1000
- "size",
1001
- "as",
1002
- "type",
1003
- "rightAddon",
1004
- "leftAddon"
1005
- ]);
1006
- const Component = as != null ? as : "input";
1007
- const type = getType(Component, typeProp);
1008
- return /* @__PURE__ */ jsxs("div", {
1009
- className: cx(className, "relative flex items-center rounded-lg border border-b-[3px] focus-within:-ml-[2px] focus-within:-mt-[2px] focus-within:border-[3px] focus-within:shadow", {
1010
- "focus-within:border-blue-dark border-black": !isInvalid,
1011
- "border-red focus-within:border-red": isInvalid,
1012
- "w-fit": size != null,
1013
- "w-full": size == null,
1014
- "pl-4": leftAddon,
1015
- "pr-4": rightAddon
1016
- }),
1017
- children: [leftAddon, /* @__PURE__ */ jsx(Component, __spreadValues({
1018
- "aria-invalid": isInvalid,
1019
- ref,
1020
- className: "focus:none placeholder-gray w-full rounded-lg border-none px-4 py-3.5 focus:outline-none",
1021
- size,
1022
- type
1023
- }, rest)), rightAddon]
1024
- });
1025
- });
1026
- function getType(Component, type) {
1027
- if (type != null)
1028
- return type;
1029
- if (Component === "input")
1030
- return "text";
1031
- }
1032
- const Link = (props) => {
1033
- let iconClass = "";
1034
- if (props.icon) {
1035
- iconClass = "inline-flex items-center gap-2";
1036
- }
1037
- return /* @__PURE__ */ jsxs("a", {
1038
- className: iconClass,
1039
- href: props.href,
1040
- children: [props.icon, props.children]
1041
- });
1042
- };
1043
- const NavbarContext = createContext({
1044
- setIsExpanded: noop,
1045
- isExpanded: false,
1046
- collapsibleId: ""
1047
- });
1048
- const Navbar = (props) => {
1049
- const _a = props, {
1050
- className,
1051
- children
1052
- } = _a, rest = __objRest(_a, [
1053
- "className",
1054
- "children"
1055
- ]);
1056
- const collapsibleId = useId();
1057
- const [isExpanded, setIsExpanded] = useState(false);
1058
- const expandedContext = useMemo(() => ({
1059
- isExpanded,
1060
- setIsExpanded,
1061
- collapsibleId
1062
- }), [isExpanded, collapsibleId]);
1063
- return /* @__PURE__ */ jsx(ButtonColorContext.Provider, {
1064
- value: "white",
1065
- children: /* @__PURE__ */ jsx(NavbarContext.Provider, {
1066
- value: expandedContext,
1067
- children: /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({
1068
- className: cx(className, "bg-blue relative pt-6 pb-12 text-white before:absolute before:bottom-0 before:left-0 before:right-0 before:h-6 before:rounded-t-3xl before:bg-white md:pt-8 md:pb-14")
1069
- }, rest), {
1070
- children: /* @__PURE__ */ jsx("div", {
1071
- className: "container",
1072
- children
1073
- })
1074
- }))
1075
- })
1076
- });
1077
- };
1078
- const NavbarItems = (props) => {
1079
- const _a = props, {
1080
- className,
1081
- children
1082
- } = _a, rest = __objRest(_a, [
1083
- "className",
1084
- "children"
1085
- ]);
1086
- const {
1087
- isExpanded
1088
- } = useContext(NavbarContext);
1089
- return /* @__PURE__ */ jsx("nav", __spreadProps(__spreadValues({
1090
- className: cx(className, "my-8 flex flex-col md:mb-0 md:flex md:flex-row md:flex-wrap md:gap-x-8", {
1091
- hidden: !isExpanded
1092
- })
1093
- }, rest), {
1094
- children
1095
- }));
1096
- };
1097
- const NavbarItem = forwardRef((props, ref) => {
1098
- const _a = props, {
1099
- active,
1100
- className,
1101
- children
1102
- } = _a, rest = __objRest(_a, [
1103
- "active",
1104
- "className",
1105
- "children"
1106
- ]);
1107
- return /* @__PURE__ */ jsx("a", __spreadProps(__spreadValues({
1108
- "aria-current": active ? "page" : void 0,
1109
- className: cx(className, "border-b border-[#0156E0] py-3 no-underline md:border-b-2 md:border-transparent md:py-2 md:hover:border-white", {
1110
- "md:bg-blue-dark font-bold md:-mx-3 md:rounded-t-lg md:px-3": active
1111
- }),
1112
- ref
1113
- }, rest), {
1114
- children
1115
- }));
1116
- });
1117
- const NavbarMenuButton = () => {
1118
- const {
1119
- isExpanded,
1120
- setIsExpanded,
1121
- collapsibleId
1122
- } = useContext(NavbarContext);
1123
- let Icon = MenuAlt;
1124
- let buttonText = "Meny";
1125
- if (isExpanded) {
1126
- Icon = Close;
1127
- buttonText = "Lukk";
1128
- }
1129
- return /* @__PURE__ */ jsxs("button", {
1130
- "aria-controls": collapsibleId,
1131
- "aria-expanded": isExpanded,
1132
- className: "inline-flex items-center gap-2 md:hidden",
1133
- onClick: () => setIsExpanded((val) => !val),
1134
- children: [buttonText, " ", /* @__PURE__ */ jsx(Icon, {})]
1135
- });
1136
- };
1137
- const NavbarContent = (props) => {
1138
- const _a = props, {
1139
- className,
1140
- children,
1141
- logo
1142
- } = _a, rest = __objRest(_a, [
1143
- "className",
1144
- "children",
1145
- "logo"
1146
- ]);
1147
- return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({
1148
- className: cx(className, "flex items-center justify-between gap-8")
1149
- }, rest), {
1150
- children: [logo, /* @__PURE__ */ jsx("div", {
1151
- className: "hidden md:block",
1152
- children
1153
- }), /* @__PURE__ */ jsx(NavbarMenuButton, {})]
1154
- }));
1155
- };
1156
- const NavbarCollapsible = (props) => {
1157
- const _a = props, {
1158
- className,
1159
- children
1160
- } = _a, rest = __objRest(_a, [
1161
- "className",
1162
- "children"
1163
- ]);
1164
- const {
1165
- collapsibleId,
1166
- isExpanded
1167
- } = useContext(NavbarContext);
1168
- return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, rest), {
1169
- "aria-hidden": !isExpanded,
1170
- className: cx(className, "md:-mb-8 md:block", {
1171
- hidden: !isExpanded
1172
- }),
1173
- id: collapsibleId,
1174
- children
1175
- }));
1176
- };
1177
- const NavbarExpandedMobileContent = (props) => {
1178
- const {
1179
- isExpanded
1180
- } = useContext(NavbarContext);
1181
- const isMobileScreen = useScreenMaxWidthMd(false);
1182
- if (!isExpanded || !isMobileScreen)
1183
- return null;
1184
- return /* @__PURE__ */ jsx(Fragment, {
1185
- children: props.children
1186
- });
1187
- };
1188
- const SIBLING_COUNT = 2;
1189
- const PaginationContext = createContext({
1190
- currentPage: 0,
1191
- pageCount: 0
1192
- });
1193
- const Pagination = (props) => {
1194
- const _a = props, {
1195
- className,
1196
- page: currentPage,
1197
- count: pageCount,
1198
- onChange,
1199
- getItemHref,
1200
- getItemAriaLabel,
1201
- nextPageAriaLabel,
1202
- prevPageAriaLabel
1203
- } = _a, rest = __objRest(_a, [
1204
- "className",
1205
- "page",
1206
- "count",
1207
- "onChange",
1208
- "getItemHref",
1209
- "getItemAriaLabel",
1210
- "nextPageAriaLabel",
1211
- "prevPageAriaLabel"
1212
- ]);
1213
- const context = useMemo(() => ({
1214
- currentPage: Math.max(1, Math.min(currentPage, pageCount)),
1215
- pageCount: Math.max(1, pageCount)
1216
- }), [currentPage, pageCount]);
1217
- const handleClick = (page) => (event) => {
1218
- if (onChange) {
1219
- event.preventDefault();
1220
- onChange(page);
1221
- }
1222
- };
1223
- return /* @__PURE__ */ jsx(PaginationContext.Provider, {
1224
- value: context,
1225
- children: /* @__PURE__ */ jsxs("nav", __spreadProps(__spreadValues({
1226
- className: cx("flex justify-center gap-2 sm:gap-4", className)
1227
- }, rest), {
1228
- children: [/* @__PURE__ */ jsx(PrevPage, {
1229
- "aria-label": prevPageAriaLabel,
1230
- href: getItemHref(currentPage - 1),
1231
- onClick: handleClick(currentPage - 1)
1232
- }), /* @__PURE__ */ jsx(PageItem, {
1233
- page: 1,
1234
- href: getItemHref(1),
1235
- onClick: handleClick(1),
1236
- "aria-label": getItemAriaLabel(1),
1237
- selected: currentPage === 1
1238
- }), pageCount > 2 + SIBLING_COUNT * 2 && currentPage > SIBLING_COUNT + 2 && /* @__PURE__ */ jsx(PaginationEllipsis, {}), /* @__PURE__ */ jsx(Pages, {
1239
- children: (page) => /* @__PURE__ */ jsx(PageItem, {
1240
- href: getItemHref(page),
1241
- onClick: handleClick(page),
1242
- "aria-label": getItemAriaLabel(page),
1243
- page,
1244
- selected: page === currentPage
1245
- }, page)
1246
- }), /* @__PURE__ */ jsx(NextPage, {
1247
- "aria-label": nextPageAriaLabel,
1248
- href: getItemHref(currentPage + 1),
1249
- onClick: handleClick(currentPage + 1)
1250
- })]
1251
- }))
1252
- });
1253
- };
1254
- const NextPage = forwardRef((props, ref) => {
1255
- const {
1256
- currentPage,
1257
- pageCount
1258
- } = useContext(PaginationContext);
1259
- const hide = currentPage >= pageCount;
1260
- return /* @__PURE__ */ jsx(PageLink, __spreadProps(__spreadValues({
1261
- "aria-hidden": hide,
1262
- className: hide ? "invisible" : void 0,
1263
- ref,
1264
- rel: "next"
1265
- }, props), {
1266
- children: /* @__PURE__ */ jsx(ChevronRight, {})
1267
- }));
1268
- });
1269
- const PrevPage = forwardRef((props, ref) => {
1270
- const {
1271
- currentPage
1272
- } = useContext(PaginationContext);
1273
- const hide = currentPage <= 1;
1274
- return /* @__PURE__ */ jsx(PageLink, __spreadProps(__spreadValues({
1275
- "aria-hidden": hide,
1276
- className: hide ? "invisible" : void 0,
1277
- ref,
1278
- rel: "prev"
1279
- }, props), {
1280
- children: /* @__PURE__ */ jsx(ChevronLeft, {})
1281
- }));
1282
- });
1283
- const PageLink = forwardRef((props, ref) => {
1284
- const _a = props, {
1285
- className
1286
- } = _a, rest = __objRest(_a, [
1287
- "className"
1288
- ]);
1289
- return /* @__PURE__ */ jsx("a", __spreadValues({
1290
- className: cx(className, "aria-[current]:border-green hover:bg-gray-concrete flex h-9 w-9 items-center justify-center rounded-lg border-2 border-transparent no-underline sm:h-10 sm:w-10"),
1291
- ref
1292
- }, rest));
1293
- });
1294
- const PaginationEllipsis = () => {
1295
- return /* @__PURE__ */ jsx("span", {
1296
- className: "flex h-9 w-9 cursor-default items-center justify-center border-2 border-transparent sm:h-10 sm:w-10",
1297
- children: "..."
1298
- });
1299
- };
1300
- const Pages = ({
1301
- children
1302
- }) => {
1303
- const {
1304
- currentPage,
1305
- pageCount
1306
- } = useContext(PaginationContext);
1307
- const end = Math.min(Math.max(2 + SIBLING_COUNT * 2, currentPage + SIBLING_COUNT), pageCount);
1308
- let start = Math.max(Math.min(currentPage - SIBLING_COUNT, end - SIBLING_COUNT * 2), 1);
1309
- if (start - SIBLING_COUNT === 0) {
1310
- start = start - 1;
1311
- }
1312
- const pages = Array.from({
1313
- length: end - start
1314
- }, (_, i) => start + i + 1);
1315
- return pages.map((page) => children(page));
1316
- };
1317
- const PageItem = forwardRef((props, ref) => {
1318
- const _a = props, {
1319
- page,
1320
- selected
1321
- } = _a, rest = __objRest(_a, [
1322
- "page",
1323
- "selected"
1324
- ]);
1325
- return /* @__PURE__ */ jsx(PageLink, __spreadProps(__spreadValues({
1326
- "aria-current": selected ? "page" : void 0,
1327
- ref
1328
- }, rest), {
1329
- children: page
1330
- }));
1331
- });
1332
- const RadioContext = createContext({
1333
- defaultValue: void 0,
1334
- isControlled: false,
1335
- name: void 0,
1336
- onChange: noop,
1337
- required: false,
1338
- value: void 0,
1339
- error: false
1340
- });
1341
- const Radio = forwardRef((props, ref) => {
1342
- const _a = props, {
1343
- children,
1344
- className
1345
- } = _a, rest = __objRest(_a, [
1346
- "children",
1347
- "className"
1348
- ]);
1349
- const {
1350
- defaultValue,
1351
- isControlled,
1352
- name,
1353
- onChange,
1354
- required,
1355
- value,
1356
- error
1357
- } = useContext(RadioContext);
1358
- return /* @__PURE__ */ jsxs("label", {
1359
- className: cx(className, "flex cursor-pointer gap-2.5"),
1360
- children: [/* @__PURE__ */ jsx("input", __spreadValues({
1361
- className: cx("radio", error && "border-red"),
1362
- defaultChecked: !isControlled ? rest.value === defaultValue : void 0,
1363
- checked: isControlled ? rest.value === value : void 0,
1364
- name,
1365
- onChange: isControlled ? onChange : void 0,
1366
- required,
1367
- type: "radio",
1368
- ref
1369
- }, rest)), children]
1370
- });
1371
- });
1372
- const RadioGroup = forwardRef((props, ref) => {
1373
- const isControlled = "value" in props;
1374
- const _a = props, {
1375
- className,
1376
- defaultValue,
1377
- description,
1378
- error,
1379
- id: idProp,
1380
- children,
1381
- label,
1382
- name,
1383
- onChange: onChangeProp,
1384
- required,
1385
- value
1386
- } = _a, rest = __objRest(_a, [
1387
- "className",
1388
- "defaultValue",
1389
- "description",
1390
- "error",
1391
- "id",
1392
- "children",
1393
- "label",
1394
- "name",
1395
- "onChange",
1396
- "required",
1397
- "value"
1398
- ]);
1399
- const onChange = useCallback((event) => {
1400
- const nextValue = event.target.value;
1401
- onChangeProp == null ? void 0 : onChangeProp(nextValue);
1402
- }, [onChangeProp]);
1403
- const group = useMemo(() => ({
1404
- defaultValue,
1405
- isControlled,
1406
- name,
1407
- onChange,
1408
- required,
1409
- value,
1410
- error: Boolean(error)
1411
- }), [defaultValue, isControlled, name, onChange, required, value, error]);
1412
- const groupId = useFallbackId(idProp);
1413
- const labelId = `${groupId}:label`;
1414
- const helpTextId = `${groupId}:help`;
1415
- const errorMsgId = groupId + "err";
1416
- const errorMsg = error;
1417
- return /* @__PURE__ */ jsx(RadioContext.Provider, {
1418
- value: group,
1419
- children: /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({
1420
- "aria-describedby": cx({
1421
- [errorMsgId]: errorMsg,
1422
- [helpTextId]: description
1423
- }) || void 0,
1424
- "aria-invalid": !!error,
1425
- "aria-labelledby": label ? labelId : void 0,
1426
- className: cx(className, "flex flex-col gap-4"),
1427
- role: "radiogroup",
1428
- ref
1429
- }, rest), {
1430
- children: [label && /* @__PURE__ */ jsx(FormLabel, {
1431
- id: labelId,
1432
- isRequired: required,
1433
- isInvalid: !!error,
1434
- children: label
1435
- }), description && /* @__PURE__ */ jsx(FormHelperText, {
1436
- id: helpTextId,
1437
- children: description
1438
- }), children, errorMsg && /* @__PURE__ */ jsx(FormErrorMessage, {
1439
- id: errorMsgId,
1440
- children: errorMsg
1441
- })]
1442
- }))
1443
- });
1444
- });
1445
- const SelectPlain = forwardRef((props, ref) => {
1446
- const _a = props, {
1447
- children,
1448
- className,
1449
- isInvalid,
1450
- size
1451
- } = _a, rest = __objRest(_a, [
1452
- "children",
1453
- "className",
1454
- "isInvalid",
1455
- "size"
1456
- ]);
1457
- const isSmall = size === "small";
1458
- return /* @__PURE__ */ jsxs("div", {
1459
- className: cx(className, "relative", isSmall && "text-sm"),
1460
- children: [/* @__PURE__ */ jsx("select", __spreadProps(__spreadValues({
1461
- "aria-invalid": isInvalid
1462
- }, rest), {
1463
- className: cx("w-full cursor-pointer appearance-none border border-b-[3px] bg-white focus:-mt-0.5 focus:-ml-0.5 focus:border-[3px] focus:shadow focus:outline-none", isSmall ? "rounded px-3.5 py-2" : "rounded-lg px-4 py-3.5", isInvalid ? "border-red focus:border-red" : "focus:border-blue-dark border-black"),
1464
- ref,
1465
- children
1466
- })), /* @__PURE__ */ jsx(ChevronDown, {
1467
- className: cx("pointer-events-none absolute top-0 bottom-0 my-auto", isSmall ? "right-3.5" : "right-4")
1468
- })]
1469
- });
1470
- });
1471
- const Select = forwardRef((props, ref) => {
1472
- const _a = props, {
1473
- description,
1474
- error,
1475
- id: idProp,
1476
- label,
1477
- disableValidation = false
1478
- } = _a, rest = __objRest(_a, [
1479
- "description",
1480
- "error",
1481
- "id",
1482
- "label",
1483
- "disableValidation"
1484
- ]);
1485
- const ownRef = useRef(null);
1486
- const {
1487
- validity,
1488
- validationMessage
1489
- } = useFormControlValidity(ownRef, !disableValidation);
1490
- const id = useFallbackId(idProp);
1491
- const helpTextId = id + "help";
1492
- const errorMsgId = id + "err";
1493
- const errorMsg = error || validationMessage;
1494
- return /* @__PURE__ */ jsxs("div", {
1495
- className: "grid gap-2",
1496
- children: [/* @__PURE__ */ jsx(FormLabel, {
1497
- htmlFor: id,
1498
- isRequired: props.required,
1499
- isInvalid: !!error || validity === "invalid",
1500
- children: label
1501
- }), description && /* @__PURE__ */ jsx(FormHelperText, {
1502
- id: helpTextId,
1503
- children: description
1504
- }), /* @__PURE__ */ jsx(SelectPlain, __spreadProps(__spreadValues({
1505
- id,
1506
- ref: composeRefs(ownRef, ref)
1507
- }, rest), {
1508
- isInvalid: !!error || validity === "invalid",
1509
- "aria-describedby": cx({
1510
- [errorMsgId]: errorMsg,
1511
- [helpTextId]: description
1512
- }) || void 0
1513
- })), errorMsg && /* @__PURE__ */ jsx(FormErrorMessage, {
1514
- id: errorMsgId,
1515
- children: errorMsg
1516
- })]
1517
- });
1518
- });
1519
- const Snackbar = (props) => {
1520
- const {
1521
- heading,
1522
- children,
1523
- closeSnackbar
1524
- } = props;
1525
- const [isExpanded, setIsExpanded] = useState(false);
1526
- return /* @__PURE__ */ jsx("div", {
1527
- className: "container max-w-[59rem]",
1528
- children: /* @__PURE__ */ jsx("div", {
1529
- className: "bg-orange-light rounded-lg p-4",
1530
- children: /* @__PURE__ */ jsxs("div", {
1531
- className: "snackbar grid items-center",
1532
- children: [/* @__PURE__ */ jsx(InfoCircle, {
1533
- className: "text-orange snackbar-icon mr-4 md:mr-8 md:text-2xl"
1534
- }), /* @__PURE__ */ jsx("h3", {
1535
- className: cx("snackbar-header min-w-0 max-w-prose text-base font-medium", {
1536
- "overflow-hidden overflow-ellipsis whitespace-nowrap": !isExpanded
1537
- }),
1538
- children: heading
1539
- }), /* @__PURE__ */ jsxs("div", {
1540
- className: "snackbar-actions flex justify-end gap-4 max-md:mt-3 md:ml-4",
1541
- children: [/* @__PURE__ */ jsx(SnackbarButton, {
1542
- "aria-expanded": isExpanded,
1543
- onClick: () => setIsExpanded(!isExpanded),
1544
- children: isExpanded ? "Les mindre" : "Les mer"
1545
- }), /* @__PURE__ */ jsx(SnackbarButton, {
1546
- onClick: closeSnackbar,
1547
- children: "Ok"
1548
- })]
1549
- }), isExpanded && children]
1550
- })
1551
- })
1552
- });
1553
- };
1554
- const SnackbarButton = (props) => /* @__PURE__ */ jsx("button", __spreadProps(__spreadValues({
1555
- className: cx(props.className, "focus-visible:ring-offset flex-shrink-0 underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black")
1556
- }, props), {
1557
- children: props.children
1558
- }));
1559
- const SnackbarContent = (props) => {
1560
- return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({
1561
- className: "snackbar-content my-4 max-h-[50vh] max-w-prose overflow-y-auto"
1562
- }, props), {
1563
- children: props.children
1564
- }));
1565
- };
1566
- const StepList = (props) => {
1567
- const _a = props, {
1568
- align = "center",
1569
- children,
1570
- className
1571
- } = _a, rest = __objRest(_a, [
1572
- "align",
1573
- "children",
1574
- "className"
1575
- ]);
1576
- return /* @__PURE__ */ jsx("ol", __spreadProps(__spreadValues({
1577
- className: cx(className, "flex flex-col gap-8 md:gap-12")
1578
- }, rest), {
1579
- children: Children.map(children, (child) => {
1580
- return cloneElement(child, {
1581
- align
1582
- });
1583
- })
1584
- }));
1585
- };
1586
- const StepListItem = (props) => {
1587
- const _a = props, {
1588
- className,
1589
- children,
1590
- bullet,
1591
- align = "center"
1592
- } = _a, rest = __objRest(_a, [
1593
- "className",
1594
- "children",
1595
- "bullet",
1596
- "align"
1597
- ]);
1598
- return /* @__PURE__ */ jsxs("li", __spreadProps(__spreadValues({
1599
- className: cx(className, "group relative flex gap-4 text-sm md:gap-8 md:text-base", {
1600
- "items-center": align === "center"
1601
- })
1602
- }, rest), {
1603
- children: [/* @__PURE__ */ jsx(StepListBullet, {
1604
- align,
1605
- children: bullet
1606
- }), children]
1607
- }));
1608
- };
1609
- const StepListBullet = (_a) => {
1610
- var _b = _a, {
1611
- align
1612
- } = _b, props = __objRest(_b, [
1613
- "align"
1614
- ]);
1615
- return /* @__PURE__ */ jsx("span", __spreadValues({
1616
- "aria-hidden": true,
1617
- className: cx("text-green after:bg-gray-light before:bg-gray-light grid h-10 w-10 flex-none place-content-center justify-items-center rounded-full border-2 text-sm font-bold after:absolute after:bottom-0 after:w-0.5 after:translate-x-1/2 group-last:after:hidden md:h-20 md:w-20 md:text-xl", {
1618
- "before:absolute before:top-0 before:bottom-1/2 before:w-0.5 before:-translate-y-5 before:translate-x-1/2 after:top-1/2 after:translate-y-5 group-first:before:hidden before:md:-translate-y-10 after:md:translate-y-10": align === "center",
1619
- "after:top-10 after:-bottom-8 after:md:-bottom-12 after:md:top-20": align === "top"
1620
- })
1621
- }, props));
1622
- };
1623
- StepList.Item = StepListItem;
1624
- const TextArea = forwardRef((props, ref) => {
1625
- const _a = props, {
1626
- description,
1627
- error,
1628
- id: idProp,
1629
- label,
1630
- disableValidation = false
1631
- } = _a, rest = __objRest(_a, [
1632
- "description",
1633
- "error",
1634
- "id",
1635
- "label",
1636
- "disableValidation"
1637
- ]);
1638
- const ownRef = useRef(null);
1639
- const {
1640
- validity,
1641
- validationMessage
1642
- } = useFormControlValidity(ownRef, !disableValidation);
1643
- const id = useFallbackId(idProp);
1644
- const helpTextId = id + "help";
1645
- const errorMsgId = id + "err";
1646
- const errorMsg = error || validationMessage;
1647
- return /* @__PURE__ */ jsxs("div", {
1648
- className: "grid gap-2",
1649
- children: [/* @__PURE__ */ jsx(FormLabel, {
1650
- htmlFor: id,
1651
- isRequired: props.required,
1652
- isInvalid: !!error || validity === "invalid",
1653
- children: label
1654
- }), description && /* @__PURE__ */ jsx(FormHelperText, {
1655
- id: helpTextId,
1656
- children: description
1657
- }), /* @__PURE__ */ jsx(Input, __spreadProps(__spreadValues({
1658
- as: "textarea",
1659
- ref: composeRefs(ownRef, ref),
1660
- id
1661
- }, rest), {
1662
- isInvalid: !!error || validity === "invalid",
1663
- "aria-describedby": cx({
1664
- [errorMsgId]: errorMsg,
1665
- [helpTextId]: description
1666
- }) || void 0
1667
- })), errorMsg && /* @__PURE__ */ jsx(FormErrorMessage, {
1668
- id: errorMsgId,
1669
- children: errorMsg
1670
- })]
1671
- });
1672
- });
1673
- const TextField = forwardRef((props, ref) => {
1674
- const _a = props, {
1675
- description,
1676
- error,
1677
- id: idProp,
1678
- label,
1679
- type = "text",
1680
- disableValidation = false
1681
- } = _a, rest = __objRest(_a, [
1682
- "description",
1683
- "error",
1684
- "id",
1685
- "label",
1686
- "type",
1687
- "disableValidation"
1688
- ]);
1689
- const ownRef = useRef(null);
1690
- const {
1691
- validity,
1692
- validationMessage
1693
- } = useFormControlValidity(ownRef, !disableValidation);
1694
- const id = useFallbackId(idProp);
1695
- const helpTextId = id + "help";
1696
- const errorMsgId = id + "err";
1697
- const errorMsg = error || validationMessage;
1698
- return /* @__PURE__ */ jsxs("div", {
1699
- className: "grid gap-2",
1700
- children: [/* @__PURE__ */ jsx(FormLabel, {
1701
- htmlFor: id,
1702
- isRequired: props.required,
1703
- isInvalid: !!error || validity === "invalid",
1704
- children: label
1705
- }), description && /* @__PURE__ */ jsx(FormHelperText, {
1706
- id: helpTextId,
1707
- children: description
1708
- }), /* @__PURE__ */ jsx(Input, __spreadProps(__spreadValues({
1709
- id,
1710
- ref: composeRefs(ownRef, ref),
1711
- type
1712
- }, rest), {
1713
- isInvalid: !!error || validity === "invalid",
1714
- "aria-describedby": cx({
1715
- [errorMsgId]: errorMsg,
1716
- [helpTextId]: description
1717
- }) || void 0
1718
- })), errorMsg && /* @__PURE__ */ jsx(FormErrorMessage, {
1719
- id: errorMsgId,
1720
- children: errorMsg
1721
- })]
1722
- });
1723
- });
1724
- export { Accordion, AccordionContent, AccordionHeader, AccordionItem, Alert, Banner, BannerImage, Button, ButtonColorContext, Campaign, Card, CardContent, CardImage, CardLinkOverlay, CardList, Checkbox, Chip, Footer, Form, FormError, FormErrorMessage, FormHeading, FormHelperText, FormLabel, FormSuccess, Hero, HeroActions, HeroContent, HeroContext, HeroImage, Input, Link, Navbar, NavbarCollapsible, NavbarContent, NavbarExpandedMobileContent, NavbarItem, NavbarItems, Pagination, Radio, RadioGroup, Select, Snackbar, SnackbarButton, SnackbarContent, StepList, StepListItem, TextArea, TextField, useBlockBackgroundColor, useFallbackId, useFormControlValidity, usePrefersReducedMotion, useScreenMaxWidthMd };